/* The Series destination uses the existing paper, type and button system. */
.series-view { max-width:1280px; margin:0 auto; --series-art-ink:var(--ink-2); --series-art-accent:var(--accent); --series-art-wash:var(--accent-soft); }
.series-view [data-series-tone="moss"] { --series-art-accent:var(--moss); --series-art-wash:var(--moss-soft); }
.series-view [data-series-tone="sky"] { --series-art-accent:var(--sky); --series-art-wash:var(--sky-soft); }
.series-view [hidden] { display:none!important; }
.series-hero { display:grid; grid-template-columns:1fr 1.04fr; min-height:470px; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--cream); }
.series-hero-copy { padding:clamp(30px,3.6vw,54px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.series-eyebrow { display:flex; gap:10px; align-items:center; font-size:var(--t-xs); font-weight:600; color:var(--accent); }
.series-eyebrow-line { width:26px; height:2px; background:currentColor; }
.series-hero h1 { font-size:clamp(36px,4.1vw,60px); line-height:1.08; letter-spacing:-.055em; font-weight:500; margin:24px 0 20px; max-width:500px; }
.series-hero-copy>p { color:var(--muted); line-height:1.75; max-width:440px; margin:0 0 28px; }
.series-hero-meta { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:28px; padding-top:18px; width:100%; border-top:1px solid var(--line); font-size:var(--t-xs); color:var(--muted); }
.series-hero-meta span+span { margin-left:auto; color:var(--moss); font-weight:600; }
.series-hero-photo { position:relative; min-height:410px; background:var(--moss-soft); }
.series-hero-photo>img { width:100%; height:100%; object-fit:cover; object-position:48% center; position:absolute; inset:0; }
.series-photo-location { position:absolute; top:22px; left:24px; padding:8px 12px; background:var(--cream); color:var(--ink); border-radius:var(--r-pill); font-size:var(--t-xs); }
.series-dialogue { position:absolute; bottom:24px; left:24px; right:24px; padding:22px 24px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-1); }
.series-dialogue .label { color:var(--accent); }
.series-dialogue p { font-family:var(--serif); font-size:clamp(22px,2.1vw,30px); line-height:1.4; margin:10px 0; }
.series-photo-caption { font-size:var(--t-xs); color:var(--muted); }
.series-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:30px 0; border-bottom:1px solid var(--line); margin-bottom:36px; }
.series-step { display:flex; gap:12px; align-items:flex-start; }
.series-step+.series-step { padding-left:24px; margin-left:24px; border-left:1px solid var(--line); }
.series-step b { font-size:var(--t-sm); font-weight:600; }
.series-step p { font-size:var(--t-sm); color:var(--muted); line-height:1.5; margin:4px 0 0; }
.series-number { flex:0 0 36px; height:36px; display:grid; place-items:center; background:var(--accent-soft); border-radius:50%; font-size:var(--t-xs); color:var(--accent); }
.series-step:nth-child(2) .series-number { background:var(--moss-soft); color:var(--moss); }
.series-step:nth-child(3) .series-number { background:var(--sky-soft); color:var(--sky); }
.series-toolbar { display:flex; gap:16px; align-items:end; justify-content:space-between; flex-wrap:wrap; margin:28px 0 22px; scroll-margin-top:calc(var(--topbar) + 20px); }
.series-toolbar h2 { font-weight:500; font-size:32px; letter-spacing:-.045em; margin:6px 0 0; }
.series-filters { display:flex; gap:8px; flex-wrap:wrap; }
.series-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.series-card { text-align:left; min-width:0; border:1px solid var(--line); border-radius:var(--r-lg); padding:0; overflow:hidden; background:var(--cream); color:var(--ink); cursor:pointer; display:flex; flex-direction:column; transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur); }
.series-card:hover { border-color:var(--series-art-accent); transform:translateY(-3px); box-shadow:var(--shadow-1); }
.series-card-visual { display:block; position:relative; width:100%; height:184px; background:color-mix(in srgb,var(--series-art-wash) 65%,var(--paper)); border-bottom:1px solid var(--line); }
.series-card-head { display:flex; align-items:center; justify-content:space-between; position:absolute; top:16px; left:20px; right:20px; z-index:1; }
.series-card-number { font-family:var(--serif); font-size:27px; color:var(--series-art-accent); line-height:1; }
.series-card-level { color:var(--ink-2); font-size:11px; font-weight:600; background:var(--cream); border:1px solid var(--line); padding:4px 9px; border-radius:var(--r-pill); }
.series-scene-art { display:block; width:100%; height:100%; }
.series-card-visual .series-scene-art { height:142px; position:absolute; bottom:4px; }
.series-card-body { display:flex; flex-direction:column; align-items:flex-start; padding:24px; width:100%; flex:1; }
.series-card h3 { font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-.035em; margin:0 0 10px; }
.series-card p { color:var(--muted); font-size:var(--t-sm); line-height:1.65; margin:0 0 20px; }
.series-card-phrase { display:block; margin-top:auto; padding:18px 0 0; border-top:1px solid var(--line); width:100%; font-family:var(--serif); font-size:25px; line-height:1.2; }
.series-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:20px; color:var(--series-art-accent); font-size:var(--t-xs); font-weight:600; }
.series-card-arrow { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--series-art-wash); transition:transform var(--dur); }
.series-card:hover .series-card-arrow { transform:translateX(3px); }
.series-note { padding:20px 24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--cream); margin:20px 0; color:var(--muted); font-size:var(--t-sm); line-height:1.65; }
.series-note strong { color:var(--ink); display:block; margin-bottom:5px; font-weight:600; }
.series-note p { margin:0; }
.series-note a { color:var(--accent); display:inline-block; margin-top:10px; text-underline-offset:3px; }
.series-familiar { margin:64px 0 36px; padding:36px; background:var(--paper-2); border-radius:var(--r-lg); }
.series-familiar-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; margin-bottom:28px; }
.series-word-mark { color:var(--accent); font-family:var(--serif); font-size:clamp(64px,7vw,100px); font-style:italic; line-height:1; letter-spacing:-.04em; }
.series-word-mark span { display:block; font-family:var(--font); font-size:var(--t-xs); font-style:normal; letter-spacing:0; color:var(--muted); margin-top:20px; }
.series-familiar h2 { font-size:32px; line-height:1.2; font-weight:500; letter-spacing:-.04em; margin:8px 0 14px; }
.series-familiar-head p { color:var(--muted); font-size:var(--t-sm); line-height:1.7; }
.series-familiar-hint { display:block; font-size:var(--t-xs); color:var(--accent); margin-top:14px; }
.series-familiar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:start; }
.series-familiar details { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--cream); min-width:0; overflow:hidden; transition:border-color var(--dur); }
.series-familiar details[open] { border-color:var(--accent); }
.series-familiar summary { position:relative; cursor:pointer; list-style:none; font-size:var(--t-sm); line-height:1.5; padding:18px; min-height:140px; }
.series-familiar summary::-webkit-details-marker { display:none; }
.series-familiar summary strong { display:block; font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.15; margin:12px 0 8px; }
.series-word-number { display:block; color:var(--accent); font-size:10px; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.series-word-meaning { display:block; color:var(--muted); font-size:var(--t-xs); }
.series-word-toggle { position:absolute; top:12px; right:14px; color:var(--accent); font-size:24px; font-weight:400; transition:transform var(--dur); }
.series-familiar details[open] .series-word-toggle { transform:rotate(45deg); }
.series-familiar summary:hover { background:var(--accent-soft); }
.series-word-content { padding:0 18px 18px; }
.series-familiar details p { font-size:var(--t-sm); line-height:1.65; color:var(--muted); }
.series-familiar blockquote { border-left:2px solid var(--accent); margin:16px 0; padding-left:14px; font-family:var(--serif); font-size:22px; line-height:1.35; }
.series-familiar summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.series-status { min-height:1.5em; font-size:var(--t-sm); color:var(--muted); margin:14px 0; }
.series-detail-head { display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:center; margin:24px 0 32px; padding:32px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg); }
.series-detail-art { position:relative; min-width:0; height:220px; border-radius:var(--r-sm); background:var(--series-art-wash); }
.series-detail-art .series-scene-art { padding:16px 30px; }
.series-detail-number { position:absolute; left:20px; top:14px; font-family:var(--serif); font-size:32px; color:var(--series-art-accent); }
.series-detail-head h1 { font-size:clamp(30px,4vw,48px); letter-spacing:-.045em; font-weight:500; line-height:1.1; margin:10px 0 16px; }
.series-detail-head p { max-width:700px; color:var(--muted); line-height:1.7; }
.series-detail-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,.85fr); gap:28px; align-items:start; }
.series-prep-section { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--cream); padding:28px; margin:0 0 20px; }
.series-prep-section h2 { font-size:22px; letter-spacing:-.03em; font-weight:500; margin:0 0 20px; }
.series-phrase-row { display:grid; grid-template-columns:1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; }
.series-phrase-row:first-of-type { padding-top:0; }
.series-phrase-row:last-child { border-bottom:0; padding-bottom:0; }
.series-phrase-row strong { display:block; font-size:20px; line-height:1.5; font-weight:500; }
.series-phrase-row p { font-size:var(--t-sm); margin:5px 0 0; color:var(--muted); line-height:1.6; }
.series-vocab { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; }
.series-vocab div { border-bottom:1px solid var(--line); padding:0 0 12px; min-width:0; }
.series-vocab strong { font-weight:600; }
.series-vocab p { margin:4px 0 0; color:var(--muted); font-size:var(--t-sm); }
.series-prep-section ol,.series-prep-section ul { padding-left:20px; line-height:1.8; margin:0; color:var(--ink-2); }
.series-prep-section li+li { margin-top:10px; }
.series-practice-card { background:var(--moss-soft); color:var(--ink); min-height:170px; padding:26px; border-radius:var(--r-lg); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.series-practice-card strong { font-size:24px; font-weight:500; line-height:1.5; }
.series-practice-card p { margin:12px 0 0; color:var(--ink-2); }
.series-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.series-progress-line { color:var(--muted); font-size:var(--t-xs); margin:12px 0; }
.series-side-card { position:sticky; top:calc(var(--topbar) + 20px); border-top:3px solid var(--moss); }
.series-side-card p { color:var(--muted); line-height:1.7; font-size:var(--t-sm); }
.series-side-card .btn { width:100%; margin-top:8px; }
.series-side-card a { display:block; margin-top:18px; text-underline-offset:3px; font-size:var(--t-sm); color:var(--muted); }
.series-view button:focus-visible,.series-view a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.series-view h1,.series-view p,.series-view strong { overflow-wrap:anywhere; }
/* Six destinations retain the existing top/bottom navigation geometry. */
.top-nav { gap:22px; }
.top-nav button { white-space:nowrap; }
@media (max-width:1240px) and (min-width:1024px) { .topbar { gap:18px; }.top-nav { gap:16px; }.profile-chip-copy { display:none; } }
@media (max-width:1023px) { .mobile-nav { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:1100px) { .series-familiar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.series-step+.series-step { padding-left:16px; margin-left:16px; } }
@media (max-width:900px) { .series-hero-copy { padding:30px; }.series-hero { min-height:440px; }.series-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.series-detail-layout { grid-template-columns:minmax(0,1fr); }.series-side-card { position:static; }.series-familiar { padding:28px; }.series-familiar-head { gap:24px; }.series-familiar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.series-detail-head { padding:24px; gap:20px; } }
@media (max-width:620px) { .series-hero { grid-template-columns:1fr; }.series-hero-photo { min-height:290px; }.series-hero-copy { padding:28px; }.series-hero h1 { font-size:40px; margin-top:18px; }.series-hero-meta { margin-top:22px; }.series-photo-location { top:16px; left:16px; }.series-dialogue { bottom:16px; left:16px; right:16px; padding:16px 18px; }.series-steps { grid-template-columns:1fr; gap:22px; padding:26px 4px; margin-bottom:24px; }.series-step+.series-step { border:0; margin:0; padding:0; }.series-grid { grid-template-columns:1fr; }.series-toolbar { align-items:flex-start; }.series-toolbar h2 { font-size:28px; }.series-card-body { padding:22px; }.series-card-visual { height:170px; }.series-prep-section { padding:22px; }.series-phrase-row { gap:10px; }.series-vocab { gap:14px; }.series-detail-head { grid-template-columns:1fr; gap:20px; padding:22px; }.series-detail-art { height:170px; }.series-phrase-row .btn { padding:9px; font-size:var(--t-xs); }.series-familiar { margin-top:40px; padding:22px; }.series-familiar-head { grid-template-columns:1fr; gap:24px; }.series-word-mark { font-size:72px; }.series-word-mark span { margin-top:12px; }.series-familiar h2 { font-size:28px; }.series-familiar summary { padding:16px; }.series-familiar summary strong { font-size:28px; }.series-word-content { padding:0 16px 16px; } }
@media (max-width:420px) { .mobile-nav small { font-size:10px; }.series-vocab,.series-familiar-grid { grid-template-columns:1fr; }.series-familiar summary { min-height:0; padding:16px 18px; }.series-familiar summary strong { margin-top:8px; } }
@media (max-width:520px) { body:has([data-view="series"].active) .topbar { gap:8px; } body:has([data-view="series"].active) .topbar-actions { gap:4px; } }