/* =====================================================================================================
   UNIS Archive — design system layer (tokens → base → components → pages → responsive → motion prefs)
   Breakpoints: ≤1080 tablet (hamburger nav) · ≤760 small tablet (lightbox/toolbar stack) · ≤600 phone
   Balance rule: every card grid is a "balanced grid" — fixed column count per breakpoint, equal cells,
   and any incomplete last row is centred (8 members → 4×2 / 2×4, 6 sections → 3×2 / 2×3 / 1×6 …).
   ===================================================================================================== */
:root {
  color-scheme: dark; /* native controls (select menus, date pickers, scrollbars) in dark, like the page */
  /* colour — night sky */
  --bg: #070914;
  --bg2: #0c1024;
  --card: #121834;
  --card2: #182043;
  --line: rgba(160, 175, 255, 0.14);
  --txt: #eef0ff;
  --mut: #a3abd0;
  --dim: #6f78a3;
  --gold: #ffd27a;
  --gold2: #ffb85c;
  --pink: #ff9ec7;
  /* surfaces + borders (semantic) */
  --surface-0: var(--bg);
  --surface-1: var(--card);
  --surface-2: var(--card2);
  --surface-sunk: #0e1230;
  --surface-glass: rgba(7, 9, 20, 0.72);
  --page-bg: radial-gradient(1200px 700px at 80% -10%, #1a1c4a 0%, rgba(26, 28, 74, 0) 60%), radial-gradient(900px 600px at -10% 10%, #1b1236 0%, rgba(27, 18, 54, 0) 55%), var(--bg);
  --fill-1: rgba(255, 255, 255, 0.04);
  --fill-2: rgba(255, 255, 255, 0.07);
  --border: var(--line);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-accent: rgba(255, 210, 122, 0.55);
  --accent-wash: rgba(255, 210, 122, 0.08);
  --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  /* members */
  --A: #ff8a3d; /* YOONA orange */
  --B: #c23d63; /* NANA wine red */
  --C: #4fd1c5; /* YUNHA teal-ish light blue */
  --D: #8a4dff; /* GEHLEE royal purple */
  --E: #74b9ff; /* SEOWON sky blue */
  --F: #ffc629; /* KOTOKO warm yellow */
  --G: #ff8fc1; /* ELISIA pink */
  --H: #8fe388; /* HYEONJU light green */
  /* member colour as small text on the navy background: the two dark tokens get a lighter text variant
     (≥ 4.5:1 on --bg); the others are light enough as they are */
  --A-text: var(--A);
  --B-text: #de5a80;
  --C-text: var(--C);
  --D-text: #a47aff;
  --E-text: var(--E);
  --F-text: var(--F);
  --G-text: var(--G);
  --H-text: var(--H);
  /* spacing — 4/8 scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --gutter: clamp(16px, 3vw, 36px);
  --container: 1480px; /* data pages: galleries, link lists */
  --container-narrow: 1200px; /* landing + index pages: home sections, members, directory, community */
  --section-gap: var(--s-16); /* space above every section title */
  /* type */
  --font: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --display: "Fraunces", "Times New Roman", serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: clamp(26px, 3vw, 36px);
  --fs-3xl: clamp(34px, 5vw, 60px);
  --track-caps: 0.2em;
  /* radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  /* controls */
  --ctl-h: 36px; /* toolbar controls, header search, nav pills */
  --ctl-h-sm: 32px;
  --ctl-h-lg: 40px;
  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-1: 120ms;
  --dur-2: 160ms; /* press feedback */
  --dur-3: 200ms; /* hover, modal in */
  --dur-4: 240ms;
  --press: 0.97;
  --lift: -2px;
  --zoom: 1.03;
  --rise: 8px;
  /* layout (measured in app.js) */
  --rowh: 220px;
  --toph: 64px; /* header height */
  --tbh: 60px; /* gallery toolbar height */
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--page-bg);
  background-attachment: fixed; /* pinned to the screen, so the sticky bars below can match it exactly */
  color: var(--txt);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--s-3); top: var(--s-3); z-index: 100; background: var(--gold); color: #000; padding: 6px 10px; border-radius: var(--r-sm); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- header: brand | centred nav | search */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  padding: var(--s-3) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  min-height: 64px;
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; height: var(--ctl-h); font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
/* the official UNIS wordmark (assets/UNIS_logo.svg, black in the file) painted in the text colour through a mask */
.brand-logo { display: block; flex: none; height: 20px; aspect-ratio: 321 / 120; background: var(--txt); -webkit-mask: url("UNIS_logo.svg") center / contain no-repeat; mask: url("UNIS_logo.svg") center / contain no-repeat; }
.brand em { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--gold); }
.nav { display: flex; justify-content: center; gap: var(--s-1); }
.nav a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: var(--ctl-h); padding: 0 var(--s-3); border-radius: var(--r-pill);
  color: var(--mut); font-size: var(--fs-md);
  transition: color var(--dur-3) ease, background-color var(--dur-3) ease, transform var(--dur-2) var(--ease-out);
}
.nav a.on { color: #0a0c1c; background: var(--gold); font-weight: 600; }
.search { justify-self: end; width: min(300px, 100%); margin: 0; }
.search input {
  width: 100%; height: var(--ctl-h);
  padding: 0 var(--s-4) 0 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--fill-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3abd0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 15px;
  transition: border-color var(--dur-3) ease, background-color var(--dur-3) ease;
}
.search input:focus { border-color: var(--gold); outline: none; background-color: var(--fill-2); }
.menu { display: none; justify-self: end; background: none; border: 0; width: var(--ctl-h); height: var(--ctl-h); position: relative; cursor: pointer; border-radius: var(--r-sm); transition: transform var(--dur-2) var(--ease-out); }
.menu span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--txt); border-radius: 2px; }
.menu span:first-child { top: 13px; }
.menu span:last-child { top: 21px; }
/* open: the two bars cross into an ✕ (ease-out, 200ms; reduced motion just swaps) */
.menu span { transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out); }
.menu[aria-expanded="true"] span:first-child { top: 17px; transform: rotate(45deg); }
.menu[aria-expanded="true"] span:last-child { top: 17px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- layout + rhythm */
main { min-height: 70vh; outline: none; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: var(--container-narrow); }
.page-head { padding: var(--s-12) 0 var(--s-6); }
.eyebrow { color: var(--gold); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 600; }
.page-head h1 { font-family: var(--display); font-weight: 500; font-size: var(--fs-3xl); letter-spacing: -0.01em; margin-top: var(--s-2); }
.page-head h1 .ko { font-family: var(--font); font-weight: 300; font-size: 0.5em; color: var(--mut); margin-left: var(--s-3); letter-spacing: 0; }
.page-head p { color: var(--mut); max-width: 760px; margin: var(--s-3) 0 0; }
/* data-page section title: heading left, action right */
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: var(--section-gap) 0 var(--s-6); }
.sec-title h2 { font-family: var(--display); font-weight: 500; font-size: var(--fs-2xl); }
.sec-title a { color: var(--gold); font-size: var(--fs-md); }
.sec-title .note { color: var(--dim); font-size: var(--fs-sm); }
.sec-title .note:empty { display: none; }
/* landing section title (home): centred; its action sits centred under the grid (.sec-more) */
.sec-title.center { justify-content: center; text-align: center; }
.sec-more { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.it .lbl .ot8-tag, .ot8-tag { color: var(--gold); letter-spacing: 0.08em; }
.schips .chip { min-width: 56px; justify-content: center; } /* a one-letter source ("X") is still a pill */
.chip.ot8 { font-weight: 700; letter-spacing: 0.08em; color: var(--gold); border-color: rgba(255, 210, 122, 0.45); }
.chip.ot8.on { background: rgba(255, 210, 122, 0.16); border-color: var(--gold); }
/* OT8 fansites (they follow the whole group): a small gold tag where a member's name would be */
.fs-ot8 { display: inline-block; padding: 0 6px; border-radius: 5px; border: 1px solid rgba(255, 210, 122, 0.45); background: rgba(255, 210, 122, 0.1); color: var(--gold); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; line-height: 16px; vertical-align: 1px; }
.o8fs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); }
.o8fs > span { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; color: var(--dim); font-size: var(--fs-sm); }
.o8fs .chip small { margin-left: 6px; color: var(--dim); font-size: var(--fs-2xs); }

/* ---------------------------------------------------------------- balanced grids
   One pattern for every card grid: --cols fixed per breakpoint, equal cells, centred last row. */
.members, .cards, .eras, .comm, .lg, .fsgrid {
  --gap: var(--s-4);
  --cols: 4;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--gap);
}
.members > *, .cards > *, .eras > *, .comm > *, .lg > *, .fsgrid > * {
  --c: var(--bcols, var(--cols)); /* --bcols: balanced count chosen in app.js (balance()) */
  flex: 0 0 calc((100% - (var(--c) - 1) * var(--gap)) / var(--c));
  min-width: 0;
}
.cards { --cols: 3; }
.fsgrid { --cols: 3; }

/* ---------------------------------------------------------------- hero (canvas + quote logic live in app.js / hero3d.js) */
/* ~60% of the viewport, so "The eight" shows above the fold on a laptop; grows only if the text needs it */
.hero { position: relative; isolation: isolate; min-height: clamp(480px, 60vh, 660px); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .inner { position: relative; z-index: 1; text-align: center; padding: var(--s-12) var(--s-5) var(--s-10); }
.hero .dates { color: var(--gold); letter-spacing: 0.35em; font-size: var(--fs-sm); font-weight: 600; }
/* the title also scales with the height, so on short laptop screens it stays in the lower third, clear of the faces */
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, min(8vw, 12.5vh), 116px); letter-spacing: -0.02em; line-height: 0.95; margin: 14px 0 6px; text-shadow: 0 0 60px rgba(160, 150, 255, 0.35); }
.hero h1 i { color: var(--gold); font-weight: 300; }
.hero .ko { font-size: clamp(18px, 2.4vw, 26px); color: var(--mut); font-weight: 300; letter-spacing: 0.4em; }
/* "lower third": with the group photo the faces own the top of the hero (app.js frames them into the top 45%)
   and the three title lines sit centred at the bottom, over the fade */
.hero.has-photo { place-items: end center; }
.hero.has-photo .inner { padding: var(--s-6) var(--s-5) clamp(24px, 5vh, 48px); }
/* group photo (INDEX.hero), behind the sky. The canvas is blended with `screen` — its near-black sky lets the
   photo through, stars add light. app.js sets the fade stops (px) from the face boxes: a short fade at the
   top edge that stops above the hair, solid through the faces, then a long fade over the outfits into the
   night sky. When the photo is narrower than the hero (.narrow) its sides fade too. */
.hero-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 400ms var(--ease-out);
  --ph-mask: linear-gradient(180deg, transparent var(--ph-t0, 0%), #000 var(--ph-t1, 12%), #000 var(--ph-b0, 45%), rgba(0, 0, 0, 0.4) var(--ph-bm, 60%), transparent var(--ph-b1, 85%));
  -webkit-mask-image: var(--ph-mask);
  mask-image: var(--ph-mask);
}
.hero-photo.ok { opacity: 1; }
.hero-photo img { position: absolute; max-width: none; object-fit: cover; filter: saturate(0.6) brightness(0.5) contrast(1.05); }
.hero-photo.narrow img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ph-x), #000 calc(100% - var(--ph-x)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--ph-x), #000 calc(100% - var(--ph-x)), transparent); }
.hero.has-photo canvas { mix-blend-mode: screen; }
.hero.flat .hero-photo img { filter: saturate(0.55) brightness(0.44) contrast(1.05); }
/* a soft pool of night behind the text block keeps every line AA over the outfits */
.hero.has-photo .inner::before { content: ""; position: absolute; inset: 8% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(7, 9, 20, 0.62), rgba(7, 9, 20, 0) 100%); pointer-events: none; }
/* the members' words + what the archive is: a slim centred band under the hero, above "The eight" */
.hero-note { padding: var(--s-8) var(--gutter); text-align: center; border-bottom: 1px solid var(--border); background: var(--bg2); }
.hero-note + .wrap > .sec-title:first-child { margin-top: var(--s-12); }
.hero-note .lede { max-width: 640px; margin: 0 auto; color: var(--mut); font-size: var(--fs-base); text-wrap: balance; }
.hero-note .quote + .lede { margin-top: var(--s-4); }
/* the rotator swaps quotes on a 700ms timer — keep this duration in step with quoteRotator() */
.hero-note .quote { margin: 0 auto; max-width: 720px; min-height: 104px; opacity: 0; transform: translateY(6px); transition: opacity 0.7s ease, transform 0.7s var(--ease-out); }
.hero-note .quote.on { opacity: 1; transform: none; }
.hero-note .quote blockquote { margin: 0; }
.hero-note .quote .q-ko { display: block; word-break: keep-all; text-wrap: balance; font-family: var(--display); font-style: italic; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.3; color: var(--txt); }
.hero-note .quote .q-en { display: block; margin-top: var(--s-2); color: #c9cfee; font-size: clamp(14px, 1.5vw, 16px); }
.hero-note .quote figcaption { margin-top: 10px; color: var(--mut); font-size: var(--fs-sm); letter-spacing: 0.04em; }
.hero-note .quote figcaption a { color: var(--gold); }
.stats { display: flex; justify-content: center; gap: clamp(18px, 4vw, 54px); margin-top: var(--s-8); flex-wrap: wrap; }
.stat b { display: block; font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 500; color: var(--txt); }
.stat span { color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.cta { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-8); flex-wrap: wrap; }

/* ---------------------------------------------------------------- buttons, pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--ctl-h-lg); padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05);
  cursor: pointer; font-size: var(--fs-md); white-space: nowrap;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, background-color var(--dur-3) ease, filter var(--dur-3) ease;
}
.btn.gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #1a1206; border: 0; font-weight: 600; }
.btn.sm { height: var(--ctl-h-sm); padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.pill { display: inline-block; font-size: var(--fs-2xs); padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--fill-2); color: var(--mut); font-weight: 600; letter-spacing: 0.04em; }
.pill.link { background: rgba(255, 210, 122, 0.12); color: var(--gold); }

/* ---------------------------------------------------------------- shared card surface */
.scard, .mcard, .era, .lc, .fscard, .ccard {
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-1);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

/* section cards (home "Browse the archive") */
.scard { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 72px; gap: 2px; background: #000; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.mosaic img:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic-empty { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; place-items: center; min-height: 146px; background: radial-gradient(400px 140px at 30% 20%, #3a2a66, transparent 70%), linear-gradient(135deg, #171d42, #0c1024); color: var(--gold); font-family: var(--display); font-size: 28px; font-style: italic; }
/* Community card art: X · Reddit / Facebook · Discord in a 2×2 grid (same 146px as the photo mosaics),
   each name underlined by two member colours so all eight appear */
.mosaic-comm { grid-template-columns: repeat(2, 1fr); background: radial-gradient(420px 150px at 50% 0%, #3a2a66, transparent 70%), linear-gradient(135deg, #171d42, #0c1024); }
.mosaic-comm span { display: grid; place-items: center; background: rgba(255, 255, 255, 0.035); }
.mosaic-comm b { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: 0.01em; color: var(--txt); text-align: center; }
.mosaic-comm b::after { content: ""; display: block; width: 32px; height: 2px; margin: 7px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px color-mix(in srgb, var(--c1) 50%, transparent); }
.scard .body { padding: var(--s-4); flex: 1; }
.scard h3 { font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
.scard p { margin: var(--s-1) 0 0; color: var(--mut); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- members */
.mcard { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.mcard img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fo, 50% 50%); transform: var(--ft, translate(0, 0)) scale(calc(var(--fz, 1) * var(--hz, 1))); transition: transform 280ms var(--ease-out); }
.mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(5, 6, 16, 0.92) 100%); }
.mcard .lab { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-4); z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.mcard .lab b { font-size: 20px; letter-spacing: 0.08em; line-height: 1.2; }
.mcard .lab b, .mcard .lab span, .mcard .lab small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .lab span { color: var(--txt); opacity: 0.85; font-size: var(--fs-sm); }
.mcard .lab small { color: var(--mut); font-size: var(--fs-xs); letter-spacing: 0.02em; }
.mcard .bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1; background: var(--mc); box-shadow: 0 0 18px var(--mc); }
.mhead { border-radius: var(--r-xl); padding: var(--s-8); margin-top: var(--s-6); background: radial-gradient(600px 300px at 90% 0%, color-mix(in srgb, var(--mc) 35%, transparent), transparent 70%), var(--card); border: 1px solid color-mix(in srgb, var(--mc) 45%, transparent); display: flex; gap: 28px; align-items: center; }
.mhead .disc { width: 132px; height: 132px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid var(--mc); box-shadow: 0 0 40px color-mix(in srgb, var(--mc) 60%, transparent); background: var(--surface-sunk); }
.mhead .disc img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fo, 50% 50%); transform: var(--ft, translate(0, 0)) scale(var(--fz, 1)); }
.mhead h1 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 58px); }
.mhead .ko { color: var(--mct, var(--mc)); font-size: 22px; margin-left: 10px; }

/* ---------------------------------------------------------------- eras */
.era { overflow: hidden; display: flex; flex-direction: column; }
.era img, .era .ph { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--surface-sunk); }
.era div { padding: var(--s-3) var(--s-4) var(--s-4); }
.era b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-base); line-height: 1.35; }
.era span { display: block; margin-top: 2px; color: var(--dim); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- community */
.comm { margin-top: var(--s-2); }
.ccard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
.ccard .where { font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.ccard b { font-family: var(--display); font-size: 26px; font-weight: 500; line-height: 1.2; }
.ccard .h { color: var(--mut); font-size: var(--fs-md); overflow-wrap: anywhere; }
.ccard-reddit .where { color: #ff8a5c; } .ccard-discord .where { color: #9aa5ff; } .ccard-facebook .where { color: #7fb2ff; } .ccard-x .where { color: #d9dcf5; }

/* ---------------------------------------------------------------- toolbar — one baseline, 36px controls, 8px gaps */
.toolbar {
  position: sticky; top: var(--toph); z-index: 30;
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  padding: var(--s-3) 0; margin-bottom: var(--s-2);
  background: var(--page-bg); background-attachment: fixed; /* the page's own pinned background (see .gtb) */
}
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm); cursor: pointer; display: inline-flex; gap: var(--s-2); align-items: center; white-space: nowrap;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, background-color var(--dur-3) ease, color var(--dur-3) ease;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--mc, var(--gold)); box-shadow: 0 0 8px var(--mc, var(--gold)); }
.chip.on { background: color-mix(in srgb, var(--mc, var(--gold)) 22%, transparent); border-color: var(--mc, var(--gold)); color: #fff; }
.tb-sep { width: 1px; height: 20px; background: var(--border); }
/* the controls travel as one block: when the toolbar can't hold everything on one line, chips keep row 1
   and every control drops to row 2 together (count pinned right) instead of wrapping one at a time */
.tb-ctl { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tsel, .tin { height: var(--ctl-h); padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg2); font-size: var(--fs-sm); transition: border-color var(--dur-3) ease; }
.tsel:focus, .tin:focus { border-color: var(--gold); outline: none; }
.tin { width: 170px; }
.toolbar .btn { height: var(--ctl-h); }
.count { color: var(--dim); font-size: var(--fs-sm); margin-left: auto; line-height: var(--ctl-h); white-space: nowrap; }
.density { width: 90px; height: var(--ctl-h); margin: 0; accent-color: var(--gold); }

/* tabs */
.tabs { display: flex; gap: var(--s-2); margin: var(--s-1) 0 var(--s-4); flex-wrap: wrap; }
.mhead + .tabs { margin-top: var(--s-6); }
.tab {
  display: inline-flex; align-items: center; height: var(--ctl-h-lg); padding: 0 var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--card); cursor: pointer; font-weight: 600; font-size: var(--fs-md); white-space: nowrap;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, background-color var(--dur-3) ease, color var(--dur-3) ease;
}
.tab.on { border-color: var(--gold); color: var(--gold); background: var(--accent-wash); }
.tab small { color: var(--dim); font-weight: 400; margin-left: 6px; }

/* ---------------------------------------------------------------- justified gallery */
.group-h { position: sticky; top: calc(var(--toph) + var(--tbh)); z-index: 5; display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-4) 2px var(--s-2); background: #080a17; box-shadow: 0 0 0 100vmax #080a17; clip-path: inset(0 -100vmax); }
.group-h h3 { font-family: var(--display); font-weight: 500; font-size: var(--fs-xl); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-h span, .group-h .gact { flex: none; }
.group-h span { color: var(--dim); font-size: var(--fs-sm); }
.group-h .gact { margin-left: auto; transition: opacity var(--dur-3) ease, transform var(--dur-2) var(--ease-out); }
.jg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.jg::after { content: ""; flex-grow: 1e4; } /* keeps the last row at natural width instead of stretching */
/* rows are centred, so a row that can't fill (one tall photo capped at its max width) sits symmetric */
.it { position: relative; flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--rowh)); max-width: calc(var(--r) * var(--rowh) * 1.8); border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunk); cursor: zoom-in; container-type: inline-size; }
.it > i { display: block; padding-bottom: calc(100% / var(--r)); }
.it img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3) var(--ease-out), transform 280ms var(--ease-out); }
.it img.ok { opacity: 1; }
.it .badge { position: absolute; top: var(--s-2); left: var(--s-2); padding: 2px var(--s-2) 2px 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); font-size: var(--fs-xs); font-weight: 600; display: flex; gap: var(--s-1); align-items: center; }
.it .badge svg { width: 12px; height: 12px; fill: #fff; }
/* a collapsed burst (several photos from one post): ×N top-right; moves aside for the selection tick */
.it .setn { position: absolute; top: var(--s-2); right: var(--s-2); display: flex; align-items: center; gap: 3px; padding: 2px var(--s-2) 2px 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.it .setn svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; }
body.selecting .it .setn { right: 40px; }
.sets-chip.on { --mc: var(--gold); }
.it .lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 9px 7px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; background: linear-gradient(180deg, rgba(4, 5, 14, 0) 0%, rgba(4, 5, 14, 0.82) 70%); font-size: 11.5px; line-height: 1.25; letter-spacing: 0.04em; pointer-events: none; }
.it .lbl b { font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.it .lbl .src { font-style: normal; color: #d9dcf5; opacity: 0.9; margin-left: auto; font-size: var(--fs-2xs); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .lbl .src-fs { color: var(--gold); }
.it .lbl .src-tt { color: #7ff5e8; }
.it .lbl .src-wp, .it .lbl .src-wm, .it .lbl .src-wmo { color: #6ff0c8; }
.it .lbl .src-x { color: #cfd6ff; }
.it .lbl .src-fs[data-x] { cursor: pointer; pointer-events: auto; text-decoration: underline; text-decoration-color: rgba(255, 210, 122, 0.45); text-underline-offset: 2px; }
@container (max-width: 130px) {
  .it .lbl { padding: 14px 5px 4px; font-size: 9.5px; gap: 0 4px; }
  .it .lbl .src { font-size: 9px; margin-left: 0; }
}
@container (max-width: 64px) { .it .lbl { display: none; } }
.it .sel { position: absolute; right: var(--s-2); top: var(--s-2); width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.35); display: none; }
body.selecting .it .sel { display: block; }
body.selecting .it { cursor: pointer; }
.it.picked { outline: 3px solid var(--gold); outline-offset: -3px; }
.it.picked .sel { background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--gold); }
.more { height: 60px; }

/* ---------------------------------------------------------------- link cards (YouTube / Weverse live) */
.lc { overflow: hidden; display: flex; flex-direction: column; }
.lc .th { position: relative; aspect-ratio: 16 / 9; background: var(--surface-sunk); }
.lc .th img { width: 100%; height: 100%; object-fit: cover; }
.lc .th .dur { position: absolute; right: var(--s-2); bottom: var(--s-2); background: rgba(0, 0, 0, 0.75); padding: 1px 7px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; }
.lc .th .go { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-3) ease; background: rgba(5, 6, 16, 0.45); font-weight: 700; }
.lc .meta { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lc .meta b { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc .meta span { color: var(--dim); font-size: var(--fs-xs); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lc .meta .dots { display: inline-flex; gap: 3px; }
.lc .meta .dots i { width: 7px; height: 7px; border-radius: 50%; }
.show-all { margin-top: var(--s-4); }
.src-yt { color: #ff6b6b; }
.src-wv { color: #6ff0c8; }
/* thumbnail corners: EP number top-left, EN (official English subtitles) top-right, duration bottom-right */
.lc .th .ep { position: absolute; left: var(--s-2); top: var(--s-2); background: rgba(0, 0, 0, 0.72); color: var(--gold); padding: 1px 7px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; }
.en {
  display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.5); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
}
.lc .th .en { position: absolute; right: var(--s-2); top: var(--s-2); }

/* ---------------------------------------------------------------- watch hub + series pages + era pages */
.page-head .eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 210, 122, 0.4); text-underline-offset: 3px; }
.page-head h1 { overflow-wrap: anywhere; }
.head-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); }
.head-acts:empty { display: none; }
/* centred landing heading with a one-line count under it */
.sec-title.stack { flex-direction: column; align-items: center; gap: var(--s-1); }
.watch > section:first-of-type .sec-title { margin-top: var(--s-8); }
/* small groups side by side: every card keeps the width of a card in a full 4-column row */
.srow { --sg: var(--s-4); --scmax: 4; display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--sg); }
.sgroup { flex: 0 0 calc((100% - (var(--scmax) - 1) * var(--sg)) / var(--scmax) * var(--n) + (var(--n) - 1) * var(--sg)); min-width: 0; }
.sgroup .eras { --cols: var(--n); --gap: var(--sg); }
/* series page: sticky year bar (year chips scroll sideways; sort + EN toggle stay put) */
.ybar {
  position: sticky; top: var(--toph); z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; margin-bottom: var(--s-2);
  background: var(--page-bg); background-attachment: fixed; /* the page's own pinned background (see .gtb) */
}
.ychips { display: flex; gap: var(--s-2); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ychips::-webkit-scrollbar { display: none; }
.ychips .chip, .yctl .chip { flex: none; }
.yctl { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.yctl .count { margin-left: var(--s-2); }
.en-chip .en { background: none; }
.en-chip.on .en { background: var(--gold); border-color: var(--gold); color: #1a1206; }
.ybody .group-h { top: calc(var(--toph) + var(--tbh)); }
.ysec + .ysec { margin-top: var(--s-4); }
.ysec .lg, .esec .lg { padding-top: var(--s-2); }
/* era page */
.jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.jump .chip { min-width: 0; }
.esec .sec-title { margin-top: var(--s-12); }
.esec .host:has(> .loading) { min-height: 220px; }
.enav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: stretch; margin-top: var(--s-16); }
.enav > a, .enav > span { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--s-4) var(--s-5); border-radius: var(--radius); }
.enav-prev, .enav-next { border: 1px solid var(--border); background: var(--surface-1); transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, box-shadow var(--dur-3) ease; }
.enav-prev { text-align: left; }
.enav-next { text-align: right; }
.enav .none { visibility: hidden; }
.enav-mid { text-align: center; padding-inline: var(--s-6); }
.enav small { color: var(--gold); font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.enav b { font-family: var(--display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enav span:not(.none) { color: var(--dim); font-size: var(--fs-xs); }
.enav-mid b { font-family: var(--font); font-size: var(--fs-md); font-weight: 600; color: var(--mut); }
/* search: matching series / eras */
.qlinks { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-8); }
.qlinks .chip small { color: var(--dim); font-size: var(--fs-2xs); letter-spacing: 0.04em; }
@media (hover: hover) and (pointer: fine) {
  .enav-prev:hover, .enav-next:hover { transform: translateY(var(--lift)); border-color: var(--border-accent); box-shadow: var(--shadow-lift); }
  .enav-mid:hover b { color: var(--gold); }
}
.enav-prev:active, .enav-next:active, .enav-mid:active { transform: scale(var(--press)); }
/* small tablets and phones: the watch hub lists series as compact rows (thumbnail left) in one column —
   4-across cards get too narrow for their text, and groups of 5 or 1 would leave orphans in two columns */
@media (max-width: 760px) {
  .watch .eras, .watch .sgroup .eras { --cols: 1; --gap: var(--s-2); }
  .watch .sgroup { flex-basis: 100%; }
  .ser { flex-direction: row; align-items: center; }
  .ser img, .ser .ph { width: 168px; flex: none; }
  .ser div { padding: var(--s-2) var(--s-4); min-width: 0; }
}
@media (max-width: 600px) {
  .ser img, .ser .ph { width: 136px; }
  .ser div { padding: var(--s-2) var(--s-3); }
  .srow { --sg: var(--s-3); --scmax: 2; }
  /* phones: one sticky row — equal year chips, then the two toggles in short form */
  .yctl .count, .yctl .long { display: none; }
  .ybar { gap: var(--s-2); }
  .ychips .chip { flex: 1 0 auto; justify-content: center; padding: 0 var(--s-3); }
  .yctl .chip { padding: 0 var(--s-3); }
  .jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esec .sec-title { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .jump .chip { justify-content: center; padding: 0 var(--s-2); overflow: hidden; text-overflow: ellipsis; }
  .enav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .enav-mid { grid-column: 1 / -1; grid-row: 1; padding-block: 0; }
  .enav > a, .enav > span { padding: var(--s-3) var(--s-4); }
  .enav b { font-size: var(--fs-lg); }
}

/* ---------------------------------------------------------------- fansite directory */
.fscard { display: flex; gap: var(--s-4); padding: var(--s-4); align-items: center; }
.fscard .cov { width: 76px; height: 76px; border-radius: var(--r-md); overflow: hidden; flex: none; background: var(--surface-sunk); }
.fscard .cov img { width: 100%; height: 100%; object-fit: cover; }
.fscard > div:last-child { min-width: 0; }
.fscard b { font-size: 16px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fscard .sub { color: var(--mut); font-size: var(--fs-sm); }
.credit { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: rgba(255, 210, 122, 0.06); border: 1px solid rgba(255, 210, 122, 0.25); margin-bottom: var(--s-2); color: #e9dcc0; font-size: var(--fs-md); }

/* ---------------------------------------------------------------- viewer: see "viewer (Instagram-style modal)" below */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- selection bar + toast */
.selbar {
  position: fixed; left: 50%; bottom: var(--s-6); translate: -50% 0; z-index: 60;
  display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-2) var(--s-2) 18px;
  border-radius: var(--r-pill); background: rgba(18, 24, 52, 0.96); border: 1px solid rgba(255, 210, 122, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
@starting-style { .selbar { opacity: 0; transform: translateY(var(--rise)); } }
.selbar[hidden] { display: none; }
.selbar b { color: var(--gold); }
.selbar .short { display: none; }
/* toast: rises from the bottom and sinks back the same way; exit is quicker than entry */
.toast {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 95; max-width: 360px;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: #1a2250; border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); font-size: var(--fs-md); overflow-wrap: anywhere; pointer-events: none;
  opacity: 0; transform: translateY(calc(var(--rise) * 2));
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.toast.show { opacity: 1; transform: none; transition-duration: var(--dur-4); }
.toast.show.sel { pointer-events: auto; user-select: text; }
.progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); margin-top: var(--s-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width var(--dur-3) linear; }

/* ---------------------------------------------------------------- misc */
.empty { padding: var(--s-16) 0; text-align: center; color: var(--dim); }
.wrap.empty { padding-left: var(--gutter); padding-right: var(--gutter); }
.loading { padding: var(--s-20) 0; display: grid; place-items: center; color: var(--dim); gap: var(--s-4); }
.loading::before { content: ""; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.12); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
.prose { max-width: 820px; color: #cfd4f2; }
.prose h2 { font-family: var(--display); font-weight: 500; margin: var(--s-10) 0 var(--s-3); color: var(--txt); }
.prose a { color: var(--gold); }
.prose code { background: var(--fill-2); padding: 1px 6px; border-radius: 6px; }
.foot {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2);
  padding: var(--s-10) max(var(--gutter), calc((100% - var(--container-narrow)) / 2 + var(--gutter))) var(--s-12);
  color: var(--dim); font-size: var(--fs-sm); border-top: 1px solid var(--border); margin-top: var(--s-20);
}
.foot a { color: var(--mut); transition: color var(--dur-3) ease; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-2); font-size: var(--fs-md); }
.foot-links a { display: inline-flex; align-items: center; min-height: 32px; }
/* not found (in-app) */
.nf { display: grid; justify-items: center; gap: var(--s-2); }
.nf h1 { margin: 0; font-family: var(--display); font-size: clamp(26px, 4vw, 36px); font-weight: 500; color: var(--txt); }
.nf p { margin: 0 0 var(--s-2); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); font-size: var(--fs-sm); }
.nf-links a { color: var(--mut); }
@media (max-width: 520px) { .nf-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: var(--s-2) var(--s-6); } }

/* ---------------------------------------------------------------- motion: route change + first-view stagger */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } }
.page.enter { animation: rise 220ms var(--ease-out); }
.members.reveal:not(.in) .mcard { opacity: 0; }
.members.reveal.in .mcard { animation: rise 360ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }

/* ---------------------------------------------------------------- hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .nav a:not(.on):hover { color: var(--txt); background: rgba(255, 255, 255, 0.05); }
  .btn:hover { border-color: var(--border-accent); background-color: var(--accent-wash); }
  .btn.gold:hover { filter: brightness(1.07); }
  .chip:not(.on):hover { border-color: var(--border-strong); }
  .tab:not(.on):hover { border-color: var(--border-strong); color: var(--txt); }
  .scard:hover, .lc:hover, .ccard:hover, .era:hover { transform: translateY(var(--lift)); border-color: var(--border-accent); box-shadow: var(--shadow-lift); }
  .mcard:hover, .fscard:hover { transform: translateY(var(--lift)); border-color: var(--mc, var(--gold)); box-shadow: var(--shadow-lift); }
  .mcard:hover img { --hz: var(--zoom); }
  .it:hover img.ok { transform: scale(1.02); }
  .lc:hover .th .go { opacity: 1; }
  .lb .nav-b:hover { background-color: rgba(255, 210, 122, 0.18); }
  .it .lbl .src-fs[data-x]:hover { color: #fff; }
  .foot a:hover { color: var(--gold); }
  .group-h .gact { opacity: 0; }
  .group-h:hover .gact, .group-h .gact:focus-visible { opacity: 1; }
}

/* ---------------------------------------------------------------- press feedback (after hover so it wins) */
.btn:active, .chip:active, .tab:active, .nav a:active, .menu:active,
.scard:active, .mcard:active, .lc:active, .fscard:active, .ccard:active, .era:active { transform: scale(var(--press)); }
.lb .nav-b:active { transform: scale(0.94); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
  .lg { --cols: 3; }
}
@media (max-width: 1080px) {
  /* brand | search | menu — equal side columns keep the search exactly centred */
  .top { grid-template-columns: 1fr minmax(0, 34vw) 1fr; }
  .search { justify-self: center; width: 100%; }
  .menu { display: block; }
  .nav {
    position: fixed; inset: var(--toph) 0 auto 0; flex-direction: column; align-items: center; gap: var(--s-1);
    padding: var(--s-3) var(--gutter) var(--s-4); background: rgba(7, 9, 20, 0.98); border-bottom: 1px solid var(--border); display: none;
  }
  .nav a { width: min(360px, 100%); justify-content: center; height: var(--ctl-h-lg); }
  .nav.open { display: flex; }
  @starting-style { .nav.open { opacity: 0; transform: translateY(-4px); } }
  .nav { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .cards { --cols: 2; }
  .comm { --cols: 2; }
  .fsgrid { --cols: 2; }
}
@media (max-width: 760px) {
  :root { --rowh: 150px; --section-gap: var(--s-12); }
  .lg { --cols: 2; }
  .page-head { padding: var(--s-10) 0 var(--s-5); }
  .mhead { flex-direction: column; text-align: center; padding: var(--s-6) 18px; }
  .tin { flex: 1 1 140px; width: auto; min-width: 0; }
  /* phones: the toolbar scrolls away with the page (it is tall once wrapped); month headers stick under the header */
  .toolbar { position: static; box-shadow: none; clip-path: none; background: none; }
  .tb-sep { display: none; }
  .group-h { top: var(--toph); }
  /* the eight member chips: a 4×2 grid of equal chips (never 7+1 / 3+3+2); source chips scroll sideways */
  .chips.mchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .chips.mchips:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 8 members + OT8: 3 × 3 */
  .chips.mchips .chip { justify-content: center; min-width: 0; padding: 0 var(--s-2); }
  .chips.schips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .chips.schips::-webkit-scrollbar { display: none; }
  .chips.schips .chip { flex: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  /* compact member cards: the eight stay 4 across × 2 rows at every width (owner's rule) */
  .members { --gap: var(--s-2); }
  .mcard { border-radius: var(--r-md); }
  .mcard .bar { height: 3px; }
  .mcard .lab { left: var(--s-1); right: var(--s-1); bottom: var(--s-3); }
  .mcard .lab b { font-size: 15px; letter-spacing: 0.06em; }
  .mcard .lab span { font-size: var(--fs-xs); }
  .mcard .lab small { font-size: var(--fs-2xs); }
  .selbar { left: var(--s-3); right: var(--s-3); translate: none; flex-wrap: wrap; justify-content: center; border-radius: 18px; padding: 10px var(--s-3); }
  .selbar .long, .group-h .long { display: none; }
  .selbar .short { display: inline; }
  .toast { left: var(--s-4); right: var(--s-4); max-width: none; text-align: center; }
  .lg.lg-strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); }
  .lg.lg-strip > .lc { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  /* phone header: brand left, menu right; search gets its own full-width row */
  .top { grid-template-columns: 1fr auto; row-gap: var(--s-3); }
  .search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .eras { --cols: 2; --gap: var(--s-3); }
  .comm { --gap: var(--s-3); }
  .cards { --cols: 1; }
  .lg { --cols: 1; }
  .fsgrid { --cols: 1; --gap: var(--s-3); }
  .ccard { padding: var(--s-5) var(--s-3); }
  .ccard b { font-size: var(--fs-xl); }
  .ccard .h { font-size: var(--fs-xs); }
  .mcard::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(5, 6, 16, 0.9) 100%); }
  .mcard .lab { left: 2px; right: 2px; bottom: var(--s-2); gap: 0; }
  .mcard .lab b { font-size: 12px; letter-spacing: 0.04em; }
  .mcard .lab span { font-size: 10px; }
  .mcard .lab small { display: none; } /* the count line doesn't fit ~84px cards; it's on the member page */
  .era div { padding: 10px var(--s-3) var(--s-3); }
  .era b { font-size: var(--fs-md); }
  .chips.mchips { gap: 6px; }
  .chips.mchips .chip { gap: 5px; padding: 0 var(--s-1); font-size: var(--fs-xs); }
  .chips.mchips .chip i { width: 6px; height: 6px; }
}

/* ---------------------------------------------------------------- reduced motion: keep fades, drop movement */
@media (prefers-reduced-motion: reduce) {
  :root { --press: 1; --lift: 0px; --zoom: 1; --rise: 0px; }
  html { scroll-behavior: auto; }
  .hero-note .quote { transform: none; }
  .it:hover img.ok { transform: none; }
  .nav.open { transform: none; }
  .menu span { transition: none; }
}

/* OT8 chip: its own full-width row under the 4×2 member chips on phones, so both stay symmetric */
@media (max-width: 760px) {
  .chips.ochips { width: 100%; }
  .chips.ochips .chip { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------------- audit fixes */
/* "Select all shown": one per gallery toolbar, only while selecting */
.toolbar .selall { display: none; }
body.selecting .toolbar .selall { display: inline-flex; }
/* a page with some sources missing (a data file failed to load) */
.notice { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg2); color: var(--dim); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
/* backup-copy link beside a link card (SHOW_MIRRORS) — a sibling of the card, not nested inside it */
.lcw { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.lcw > .lc { flex: 1 1 auto; }
.lcw > .bkup { align-self: flex-start; }
/* headings focused after a route change: no outline ring on a non-interactive element */
h1[tabindex="-1"]:focus { outline: none; }
@media (max-width: 760px) { .lg.lg-strip > .lcw { flex: 0 0 78%; scroll-snap-align: start; } }

/* ---------------------------------------------------------------- farewell letters (2026.09.26)
   home band right under the quote band, #/letters and #/letter/<id>. Eight cards in a balanced 4×2 grid (4 across at
   every width, like the member grid): the first page of each letter as paper on a card, her name in her colour. */
.letters-band {
  padding: var(--s-12) 0; /* padding, not the title's margin: the glow starts at the band's top edge */ border-bottom: 1px solid var(--border);
  background: radial-gradient(760px 280px at 50% 0%, rgba(255, 210, 122, 0.08), rgba(255, 210, 122, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}
.letters-band .lt-head { margin-top: 0; }
.letter-page .t-short { display: none; }
.letter-page .page-head h1 .ko { white-space: nowrap; }
.letter-page .page-head .eyebrow .nw { white-space: nowrap; }
/* #/letters: a centred head over the centred 4×2 grid and the centred footnote */
.letters-page .page-head { text-align: center; }
.letters-page .page-head p { margin-inline: auto; max-width: 680px; text-wrap: balance; }
.lt-head h2 { font-family: var(--display); font-weight: 500; font-size: var(--fs-2xl); margin-top: var(--s-2); }
.lt-head .lt-day { color: var(--gold); font-style: italic; font-weight: 400; white-space: nowrap; }
.lt-head p { margin: var(--s-2) auto 0; max-width: 560px; color: var(--mut); text-wrap: balance; }
.lgrid { --gap: var(--s-5); --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--gap); }
.lgrid > * { --c: var(--bcols, var(--cols)); flex: 0 0 calc((100% - (var(--c) - 1) * var(--gap)) / var(--c)); min-width: 0; }
.ltcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-1);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}
.ltcard .bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; background: var(--mc); box-shadow: 0 0 14px var(--mc); }
.ltcard .sheet { display: block; margin: var(--s-4) var(--s-4) 0; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 4px; background: #f4f1ea; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.9); }
.ltcard .sheet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 3%; transform-origin: 50% 0; transition: transform 280ms var(--ease-out); }
.ltcard .lab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-3) var(--s-2) var(--s-4); text-align: center; }
.ltcard .lab b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mct); font-size: 16px; letter-spacing: 0.1em; line-height: 1.2; }
.langs { display: flex; justify-content: center; gap: 4px; }
.langs i {
  display: inline-grid; place-items: center; height: 18px; min-width: 24px; padding: 0 5px; border-radius: 5px;
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  color: #dfe3ff; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.24);
}
.langs i.lang-en:not(.fan) { color: #1a1206; background: var(--gold); border-color: var(--gold); } /* her own English */
.langs i.fan { color: var(--mut); background: none; border-style: dashed; } /* the archive's fan translation */
.lt-foot { max-width: 640px; margin: var(--s-6) auto 0; text-align: center; color: var(--dim); font-size: var(--fs-sm); text-wrap: balance; }
.lt-nm { color: var(--mct); }
.page-head h1 .lt-nm { font-style: italic; }
/* reading page: the handwritten pages | the text (sticky, its own scroll) — equal halves on desktop */
.lread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.lpages { display: flex; flex-direction: column; gap: var(--s-5); }
.lpg {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in;
  aspect-ratio: var(--r, 0.7071); background: #f4f1ea; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
  transition: transform var(--dur-2) var(--ease-out);
}
.lpg img { width: 100%; height: 100%; object-fit: contain; }
.lpg .pgn { position: absolute; right: var(--s-2); bottom: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-pill); background: rgba(7, 9, 20, 0.74); color: #fff; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.lpg:active { transform: scale(0.99); }
.ltext {
  position: sticky; top: calc(var(--toph) + var(--s-4)); max-height: calc(100vh - var(--toph) - var(--s-8)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-6); border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--mc) 35%, var(--border));
  background: radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--mc) 13%, transparent), transparent 70%), var(--surface-1);
}
.ltabs { margin: 0 0 var(--s-3); }
.ltabs .tab { height: var(--ctl-h); }
.ltabs .t-short { display: none; }
.lnote { margin: 0 0 var(--s-5); color: var(--mut); font-size: var(--fs-sm); }
.lnote b { color: var(--txt); font-weight: 600; }
.lbody p { margin: 0 0 1.1em; overflow-wrap: anywhere; font-size: 16px; line-height: 1.9; color: #e6e9ff; }
.lbody .ln { display: block; padding-left: 1.25em; text-indent: -1.25em; white-space: pre-wrap; } /* the paper's lines; a wrapped remainder hangs */
.lbody[lang="ja"] .ln { display: inline; padding: 0; text-indent: 0; }
.lbody[lang="ko"] p { word-break: keep-all; }
.lbody p.sign { text-align: right; color: var(--mct); font-family: var(--display); font-style: italic; }
.lbody p.tnote { white-space: normal; font-size: var(--fs-sm); line-height: 1.6; color: var(--dim); border-left: 2px solid var(--border-strong); padding-left: var(--s-3); }
.pgbreak { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0; color: var(--dim); font-size: var(--fs-2xs); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.pgbreak::before, .pgbreak::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.letter-page .enav b.lt-nm { color: var(--mct); letter-spacing: 0.06em; }
.letter-page .enav small span { color: inherit; font-size: inherit; } /* " letter" in "← Previous letter" */
@media (hover: hover) and (pointer: fine) {
  .ltcard:hover { transform: translateY(var(--lift)); border-color: var(--mc); box-shadow: var(--shadow-lift); }
  .ltcard:hover .sheet img { transform: scale(var(--zoom)); }
}
.ltcard:active { transform: scale(var(--press)); }
@media (max-width: 1080px) {
  .lgrid { --gap: var(--s-3); }
  .ltcard .sheet { margin: var(--s-3) var(--s-3) 0; }
}
@media (max-width: 760px) {
  /* compact: still 4 across × 2 rows; the reading page stacks — pages as a sideways strip, then the text */
  .lgrid { --gap: var(--s-2); }
  .ltcard { border-radius: var(--r-md); }
  .ltcard .sheet { margin: 6px 6px 0; border-radius: 3px; }
  .ltcard .lab { gap: 4px; padding: var(--s-2) 2px var(--s-3); }
  .ltcard .lab b { font-size: 12px; letter-spacing: 0.05em; }
  .langs { gap: 3px; }
  .langs i { height: 15px; min-width: 19px; padding: 0 3px; font-size: 8.5px; border-radius: 4px; letter-spacing: 0.04em; }
  .lread { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .lpages { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-2); scrollbar-width: none; }
  .lpages::-webkit-scrollbar { display: none; }
  .lpg { flex: 0 0 84%; scroll-snap-align: center; }
  .lpg:only-child { flex-basis: 100%; }
  .ltext { position: static; max-height: none; overflow: visible; padding: var(--s-5) var(--s-4); }
  .ltabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .ltabs .tab { justify-content: center; padding: 0 var(--s-2); }
  .ltabs .t-long { display: none; }
  .ltabs .t-short { display: inline; }
  /* phones: the paper's line breaks would wrap twice in a narrow column — lines flow, paragraphs and pages stay */
  .lbody p { font-size: 15px; line-height: 1.85; }
  .lbody .ln { display: inline; padding: 0; text-indent: 0; white-space: normal; }
  .letter-page .t-long { display: none; }
  .letter-page .t-short { display: inline; }
  .letter-page .head-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter-page .head-acts .btn { padding: 0 var(--s-2); font-size: var(--fs-sm); }
}
@media (max-width: 600px) {
  .letter-page .page-head h1 .ko, .letters-page .page-head h1 .ko { display: block; margin: var(--s-1) 0 0; }
  .lt-head .lt-day { display: block; }
  .lt-head .lt-day .dot { display: none; }
}

/* ---------------------------------------------------------------- After Story (the members' own Instagram, after U&I)
   #/after-story: a centred head, the eight member chips (8 equal columns → 4×2 below 1000px), then ONE centred
   column of posts, max 560px like a real feed. A single column is symmetric at any post count (a 2-column grid
   would leave a lone card whenever the count is odd) and gives each carousel its full width.
   Motion: slides only move when the viewer swipes/scrolls or presses an arrow button (smooth; instant for arrow
   keys and reduced motion); images fade in; nothing else animates. */
.as-page .page-head { text-align: center; }
.as-page .page-head p { margin-inline: auto; max-width: 620px; text-wrap: balance; }
.as-chips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-2); max-width: 920px; margin: 0 auto; }
.as-chips .chip { justify-content: center; min-width: 0; padding: 0 var(--s-2); }
.as-chips .chip.none:not(.on) { color: var(--dim); }
.as-chips .chip.none:not(.on) i { opacity: 0.35; box-shadow: none; }
.as-sum { margin: var(--s-5) 0 var(--s-6); text-align: center; color: var(--dim); font-size: var(--fs-sm); }
.as-sum:empty { margin-bottom: var(--s-5); }
.asfeed { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-8); }
.host > .asfeed { margin-top: var(--s-4); }
/* the card */
.ascard { position: relative; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface-1); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); scroll-margin-top: calc(var(--toph) + var(--s-4)); }
.ascard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--mc); box-shadow: 0 0 14px var(--mc); }
.as-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 18px 14px; }
.as-av { position: relative; display: block; flex: none; width: 40px; height: 40px; margin: 2px; border-radius: 50%; overflow: hidden; background: var(--surface-sunk); box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--mc); }
.as-av img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fo, 50% 50%); transform: var(--ft, translate(0, 0)) scale(var(--fz, 1)); }
.as-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.as-nm { color: var(--mct); font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.08em; }
.as-acc { color: var(--mut); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-3) ease; }
.as-when { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; color: var(--mut); font-size: var(--fs-sm); line-height: 1.3; font-variant-numeric: tabular-nums; }
.as-when small { color: var(--dim); font-size: var(--fs-2xs); letter-spacing: 0.04em; }
/* carousel: one slide per view, native scroll-snap */
.ascar { position: relative; aspect-ratio: var(--ar, 1); background: #04050d; }
.astrack { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.astrack::-webkit-scrollbar { display: none; }
.astrack:focus-visible { outline-offset: -3px; }
.asslide { position: relative; flex: 0 0 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: center; scroll-snap-stop: always; }
.asslide img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.asslide img.ok { opacity: 1; }
.asslide .badge { position: absolute; top: var(--s-3); left: var(--s-3); padding: 2px var(--s-2) 2px 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); font-size: var(--fs-xs); font-weight: 600; display: flex; gap: var(--s-1); align-items: center; }
.asslide .badge svg { width: 12px; height: 12px; fill: #fff; }
.ascount { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 1; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(4, 5, 14, 0.66); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; pointer-events: none; }
.asnav { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(238, 240, 255, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transition: opacity var(--dur-3) ease, transform var(--dur-2) var(--ease-out); }
.asnav svg { width: 16px; height: 16px; fill: none; stroke: #0a0c1c; stroke-width: 2.6; }
.asnav.prev { left: var(--s-3); }
.asnav.next { right: var(--s-3); }
.asnav.off { opacity: 0; pointer-events: none; }
.asnav:active { transform: scale(0.94); }
@media (hover: none) { .asnav { display: none; } } /* touch: swipe */
.asdots { display: flex; justify-content: center; gap: 5px; padding: var(--s-3) 0 0; }
.asdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background-color var(--dur-3) ease; }
.asdots i.on { background: var(--mc); }
.as-body { padding: var(--s-3) 18px var(--s-4); }
.as-body:empty { display: none; }
.as-cap { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-base); line-height: 1.6; color: #e6e9ff; }
.as-cap b { font-weight: 700; margin-right: 2px; }
.as-cap a { color: var(--gold); }
.as-tr { margin-top: var(--s-3); padding: var(--s-3) 14px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); background: var(--fill-1); }
.as-tr small { display: block; margin-bottom: var(--s-1); color: var(--dim); font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.as-tr p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #dfe3ff; font-size: var(--fs-md); line-height: 1.6; }
.as-kinds { color: var(--dim); font-size: var(--fs-sm); }
.as-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 18px; border-top: 1px solid var(--border); }
.lb .side .cap-en small { display: block; margin-bottom: var(--s-1); color: var(--dim); font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.it .lbl .src-ig { color: #ffb3d4; }
/* a member with no post yet */
.as-empty { max-width: 560px; margin: 0 auto; padding: var(--s-12) var(--s-5); text-align: center; border: 1px dashed var(--border); border-radius: var(--r-xl); background: var(--fill-1); }
.as-empty p { margin: 0; }
.as-empty p b { color: var(--txt); font-size: var(--fs-lg); font-weight: 600; }
.as-empty p:first-of-type { text-wrap: balance; }
.as-empty .sub { margin-top: var(--s-2); color: var(--mut); font-size: var(--fs-md); text-wrap: balance; }
.as-av.lg { width: 76px; height: 76px; margin: 0 auto var(--s-5); filter: saturate(0.5); opacity: 0.85; }
.as-empty-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
/* home band (under the farewell letters) + the compact post card it and search use */
.as-band { padding: var(--s-12) 0; border-bottom: 1px solid var(--border); background: radial-gradient(760px 280px at 50% 0%, color-mix(in srgb, var(--mc, var(--gold)) 9%, transparent), transparent 70%); }
.as-bhead { margin-top: 0; }
.as-bhead h2 { font-family: var(--display); font-weight: 500; font-size: var(--fs-2xl); margin-top: var(--s-2); }
.as-bhead p { margin: var(--s-2) auto 0; max-width: 560px; color: var(--mut); text-wrap: balance; }
.asmini {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-width: 820px; margin: 0 auto; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface-1);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}
.asmini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; background: var(--mc); box-shadow: 0 0 14px var(--mc); }
.asm-img { position: relative; aspect-ratio: 3 / 2; background: #04050d; }
.asm-img img { width: 100%; height: 100%; object-fit: cover; }
.asm-img .setn { position: absolute; top: var(--s-3); right: var(--s-3); display: flex; align-items: center; gap: 3px; padding: 2px var(--s-2) 2px 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.asm-img .setn svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; }
.asm-txt { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); padding: var(--s-5) var(--s-6); min-width: 0; }
.asm-top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.asm-cap { font-family: var(--display); font-style: italic; font-size: clamp(19px, 2vw, 24px); line-height: 1.3; color: var(--txt); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.asm-cap::before { content: "\201C"; }
.asm-cap::after { content: "\201D"; }
.asm-tr { color: var(--mut); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.asm-tr i { display: inline-grid; place-items: center; height: 16px; padding: 0 4px; margin-right: 6px; border-radius: 4px; border: 1px dashed rgba(255, 255, 255, 0.3); font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; vertical-align: 1px; }
.as-cap, .as-tr p, .asm-cap, .asm-tr { word-break: keep-all; } /* Korean wraps between words */
.asm-meta { color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.04em; }
.asminis { display: flex; flex-direction: column; gap: var(--s-3); }
.asminis .asmini { margin: 0; max-width: 760px; }
@media (hover: hover) and (pointer: fine) {
  .as-nm:hover { text-decoration: underline; text-underline-offset: 3px; }
  .as-acc:hover { color: var(--txt); }
  .asmini:hover { transform: translateY(var(--lift)); border-color: var(--mc); box-shadow: var(--shadow-lift); }
  .asnav:hover { background: #fff; }
}
.asmini:active { transform: scale(var(--press)); }
@media (max-width: 1000px) {
  .as-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 600px) {
  .as-chips { gap: 6px; }
  .as-chips .chip { gap: 5px; padding: 0 var(--s-1); font-size: var(--fs-xs); }
  .as-chips .chip i { width: 6px; height: 6px; }
  .asfeed { gap: var(--s-6); }
  .ascard { border-radius: var(--r-lg); }
  .as-head { padding: 14px var(--s-4) var(--s-3); }
  .as-body { padding: var(--s-3) var(--s-4) 14px; }
  .as-foot { padding: 10px var(--s-4); }
    .asmini { grid-template-columns: minmax(0, 1fr); }
  .asm-txt { padding: var(--s-4) var(--s-4) var(--s-5); gap: 10px; }
}

/* =====================================================================================================
   Layout redesign · phase 1 (docs/Kpop_Archive_Layout_Design_Guide.md §1–4, §7): pill filters, square grid,
   member pages (sticky card | subtabs), Instagram-style viewer. Colours and type are the tokens above.
   ===================================================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.host, .gbody, .mp-body { container-type: inline-size; }

/* ---------------------------------------------------------------- filter bar: [Filter] [pills…] [Clear] ····· N items */
.gtb { position: sticky; top: var(--stick, var(--toph)); z-index: 30; padding: 10px 0; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
/* member page, two columns: the sticky bars stay inside the content column (nothing paints over the card) */
/* sticky bars (subtabs, filter bar, month headings) paint the page's own pinned background: solid, so photos never
   show through, and identical to what is around them, so no darker block ends mid-page */
.gtb, .group-h, .mp-tabs, .mp .gtb, .mp .group-h { background: var(--page-bg); background-attachment: fixed; box-shadow: none; clip-path: none; }
/* touch browsers (iOS) ignore fixed backgrounds: plain night there, where the glow sits only at the top of the page */
@media (hover: none) {
  body { background-attachment: scroll; }
  .gtb, .group-h, .mp-tabs, .mp .gtb, .mp .group-h, .toolbar, .ybar { background: var(--bg); }
}
/* native select menus: dark rows, readable text (Windows draws the option list itself) */
select option { background: #141a3a; color: var(--txt); }
.fbar { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 28px; }
.fpills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); flex: 1 1 auto; min-width: 0; }
.fbar .count { flex: none; line-height: 28px; }
.fbtn, .fclear, .fp > * { font: inherit; font-size: var(--fs-xs); color: var(--txt); }
.fbtn {
  height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--fill-1); color: var(--mut); cursor: pointer; font-weight: 600;
  transition: border-color var(--dur-3) ease, background-color var(--dur-3) ease, color var(--dur-3) ease, transform var(--dur-2) var(--ease-out);
}
.fbtn.icon { width: 28px; padding: 0; justify-content: center; }
.fbtn.icon span { display: none; }
.fbtn[aria-expanded="true"] { border-color: var(--border-accent); color: var(--txt); }
.fbar svg, .pop svg, .gview svg, .mp svg, .vw-meta svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fbtn svg { width: 15px; height: 15px; }
/* one pill = four joined segments; the 1px gaps show the pill's own border colour */
.fp { display: inline-flex; height: 28px; gap: 1px; border-radius: var(--r-sm); overflow: hidden; background: var(--border); border: 1px solid var(--border); max-width: 100%; }
.fp > * { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 9px; border: 0; background: var(--surface-1); white-space: nowrap; min-width: 0; transition: background-color var(--dur-3) ease, color var(--dur-3) ease; }
.fp-d { color: var(--mut); }
.fp-d svg { width: 13px; height: 13px; flex: none; }
.fp-o { color: var(--mut); cursor: pointer; }
.fp-v { cursor: pointer; max-width: 240px; font-weight: 600; }
.fp-v > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fp-x { padding: 0 7px; color: var(--dim); cursor: pointer; }
.fp-x svg { width: 12px; height: 12px; }
.fp [aria-expanded="true"] { background: var(--surface-2); color: var(--txt); }
.fclear { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--mut); cursor: pointer; transition: color var(--dur-3) ease, background-color var(--dur-3) ease; }
/* value glyphs: source initials in their colour, member avatars, stacked when several are selected */
.fv { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: 0; line-height: 1; color: var(--c); background: color-mix(in srgb, var(--c) 18%, #0c1024); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.fv.o8 { --c: var(--gold); font-family: var(--display); font-size: 10px; }
.fvi { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--mut); }
.fvi svg { width: 15px; height: 15px; }
.fav { display: block; flex: none; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; background: var(--surface-sunk); box-shadow: 0 0 0 1.5px var(--mc); }
.fav img, .vw-av img, .mpost-av img, .msw img, .mp-av img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fo, 50% 50%); transform: var(--ft, translate(0, 0)) scale(var(--fz, 1)); }
.fstack { display: inline-flex; }
.fstack > * + * { margin-left: -5px; }
.fstack > .fv { box-shadow: 0 0 0 1.5px var(--surface-1), inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.fstack > .fav { box-shadow: 0 0 0 1.5px var(--surface-1), 0 0 0 3px var(--mc); }

/* ---------------------------------------------------------------- popover (command list · values · operator): 200px, in <body> */
.pop {
  position: fixed; z-index: 96; width: 200px; max-width: calc(100vw - 16px); overflow: hidden;
  border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, 0.14); background: #141a3a;
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.3); outline: none;
}
.pop.pop-op { width: 150px; }
.pop-s { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-bottom: 1px solid var(--border); color: var(--dim); }
.pop-s > svg { width: 14px; height: 14px; flex: none; }
.pop-s input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: var(--fs-sm); color: var(--txt); }
.pop-s input::placeholder { color: var(--dim); }
.pop-back { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: -5px; padding: 0; border: 0; border-radius: 5px; background: var(--fill-2); color: var(--mut); cursor: pointer; }
.pop-back svg { width: 14px; height: 14px; }
.pop-l { max-height: min(320px, 50vh); overflow-y: auto; padding: 4px; overscroll-behavior: contain; scrollbar-width: thin; }
.pop-h { padding: 8px 8px 4px; color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pop-sep { height: 1px; margin: 4px -4px; background: var(--border); }
.po { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: var(--fs-sm); color: var(--txt); cursor: pointer; user-select: none; }
.po.act { background: var(--fill-2); }
.pock { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-strong); transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pock svg { width: 10px; height: 10px; stroke: #1a1206; stroke-width: 3.2; opacity: 0; }
.po.on .pock { background: var(--gold); border-color: var(--gold); }
.po.on .pock svg { opacity: 1; }
.pol { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol small { margin-left: 6px; color: var(--dim); font-size: var(--fs-2xs); }
.pon { flex: none; color: var(--dim); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.pom { display: grid; flex: none; color: var(--dim); }
.pom svg { width: 14px; height: 14px; }
.pop-none { padding: 12px 8px; color: var(--dim); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- gallery view controls (above the grid) */
.gview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 2px 0 var(--s-3); }
.gv-l, .gv-r { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.gv-l:empty { display: none; }
.gv-r { margin-left: auto; }
.gview .btn, .gview .tsel { height: var(--ctl-h-sm); }
.tgl {
  height: var(--ctl-h-sm); display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--fill-1); color: var(--mut); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-3) ease, background-color var(--dur-3) ease, color var(--dur-3) ease, transform var(--dur-2) var(--ease-out);
}
.tgl svg { width: 15px; height: 15px; }
.tgl[aria-pressed="true"] { color: var(--txt); border-color: var(--border-accent); background: var(--accent-wash); }
.tgl[aria-pressed="true"] svg { color: var(--gold); }
.tgl[disabled] { opacity: 0.4; pointer-events: none; }
.tgl[hidden] { display: none; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--fill-1); }
.seg button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--dim); cursor: pointer; transition: background-color var(--dur-3) ease, color var(--dur-3) ease; }
.seg button svg { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--gold); }
.tin-w { position: relative; display: inline-flex; align-items: center; }
.tin-w > svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--dim); pointer-events: none; }
.gview .tin { width: 150px; height: var(--ctl-h-sm); padding-left: 30px; border-radius: var(--r-pill); transition: width var(--dur-3) var(--ease-out), border-color var(--dur-3) ease; }
.gview .tin:focus { width: 210px; }
.gview .density { height: var(--ctl-h-sm); }
.gview[data-mode="square"] .density, .gview[data-mode="links"] .density { display: none; }
.selall { display: none; }
body.selecting .selall { display: inline-flex; }

/* ---------------------------------------------------------------- square grid (Instagram): 1:1 tiles, 4px gaps
   3 columns in a member-page column / tablet, more on wide full-page galleries, 2 on phones */
.sq { --sqc: 3; display: grid; grid-template-columns: repeat(var(--sqc), minmax(0, 1fr)); gap: 4px; }
@container (min-width: 1000px) { .sq { --sqc: 4; } }
@container (min-width: 1300px) { .sq { --sqc: 5; } }
@container (max-width: 600px) { .sq { --sqc: 2; } }
@media (min-width: 1441px) { .mp .sq { --sqc: 4; } }
.it.sqt { display: block; flex: none; max-width: none; aspect-ratio: 1; border-radius: 3px; cursor: pointer; scroll-margin: calc(var(--stick, var(--toph)) + var(--tbh) + 56px) 0 24px; }
.it.sqt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sqt .badge.vb { top: auto; left: var(--s-2); bottom: var(--s-2); }
.sqt .setn { top: var(--s-2); right: var(--s-2); gap: 3px; padding: 3px 7px 3px 5px; }
.sqt .setn svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }
.sqt .hv {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; display: flex; align-items: flex-end; gap: 6px; padding: 0 var(--s-2) var(--s-2);
  background: linear-gradient(180deg, rgba(4, 5, 14, 0), rgba(4, 5, 14, 0.86)); font-size: 11.5px; line-height: 1.2; white-space: nowrap;
  opacity: 0; transition: opacity var(--dur-2) ease; pointer-events: none;
}
.sqt .hv em { font-style: normal; font-weight: 600; color: #e6e9ff; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sqt .hv em.src-fs { color: var(--gold); }
.sqt .hv .hm { font-size: 10.5px; letter-spacing: 0.04em; overflow: hidden; }
.sqt .hv time { margin-left: auto; flex: none; color: var(--mut); font-variant-numeric: tabular-nums; }
.sqt .hv b { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.sqt .hv b svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; }
.sqt.it .badge.vb ~ .hv { padding-bottom: 36px; }
@container (max-width: 230px) { .sqt .hv .hm { display: none; } }
@container (max-width: 160px) { .sqt .hv time { display: none; } }
body.selecting .sqt .setn { right: 40px; }
@media (hover: hover) and (pointer: fine) {
  .sqt:hover .hv, .sqt:focus-visible .hv { opacity: 1; }
  .sqt:hover .hv em.src-fs { pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .sqt:hover img.ok { transform: scale(1.03); }
}
.sq-skel span { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-1); animation: skel 1.4s ease-in-out infinite; }
.more:has(.sq-skel) { height: auto; margin-top: 4px; }
@keyframes skel { 50% { opacity: 0.5; } }
/* month / post dividers: slimmer than before, still sticky under the toolbar */
.group-h { top: calc(var(--stick, var(--toph)) + var(--tbh)); min-height: 44px; padding: 10px 2px 8px; }
.group-h h3 { font-size: var(--fs-lg); }
.gempty { display: grid; place-items: center; align-content: center; gap: var(--s-4); min-height: 40vh; }
.gempty p { margin: 0; color: var(--mut); }
.notice.err { border-color: rgba(255, 128, 128, 0.35); background: rgba(255, 96, 96, 0.06); color: var(--mut); }
.notice.err small { color: var(--dim); }
.notice.err .btn { margin-left: auto; }

/* ---------------------------------------------------------------- member page: card (320px, sticky) | column (≤900px) */
.mp { --stick: calc(var(--toph) + var(--subh, 49px)); display: grid; grid-template-columns: 320px minmax(0, 900px); justify-content: center; align-items: start; column-gap: var(--s-8); max-width: 1300px; margin: 0 auto; padding: var(--s-6) var(--s-6) 0; }
.mp-side { position: sticky; top: calc(var(--toph) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-3); max-height: calc(100vh - var(--toph) - var(--s-8)); overflow-y: auto; scrollbar-width: none; }
.mp-side::-webkit-scrollbar { display: none; }
/* member switcher: "All" + the eight, one balanced row */
.mp-switch { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; padding: 3px; }
.msw { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 40px; width: 100%; justify-self: center; border-radius: 50%; overflow: hidden; background: var(--surface-sunk); box-shadow: 0 0 0 1px var(--border); opacity: 0.72; transition: opacity var(--dur-3) ease, box-shadow var(--dur-3) ease, transform var(--dur-2) var(--ease-out); }
.msw.on { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--mc); }
.msw.all { opacity: 1; background: var(--fill-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--mut); }
.mp-card { padding: var(--s-6); border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--mc) 30%, var(--border)); background: radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--mc) 16%, transparent), transparent 70%), var(--surface-1); text-align: center; }
.mp-av { display: block; width: 104px; height: 104px; margin: 0 auto var(--s-4); border-radius: 50%; overflow: hidden; background: var(--surface-sunk); box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--mc), 0 0 36px color-mix(in srgb, var(--mc) 45%, transparent); }
.mp-name { display: flex; justify-content: center; align-items: baseline; gap: 6px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; }
.mp-emo { font-size: 0.85em; }
.mp-sub { margin: var(--s-1) 0 0; color: var(--mut); font-size: var(--fs-md); }
.mp-sub b { color: var(--mct); font-weight: 600; }
.mp-meta { display: inline-flex; flex-direction: column; gap: var(--s-2); margin: var(--s-4) auto 0; padding: 0; list-style: none; text-align: left; color: var(--mut); font-size: 13.5px; }
.mp-meta li { display: flex; align-items: center; gap: var(--s-2); }
.mp-meta svg { width: 16px; height: 16px; flex: none; color: var(--mct); }
.mp-ig { color: var(--mct); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .mp-ig:hover { text-decoration: underline; text-underline-offset: 3px; } }
.mp-ig:focus-visible { outline: 2px solid var(--mct); outline-offset: 2px; border-radius: 4px; }
/* her Weverse quote of the day (replaces the old stats row): label · her words · the post it came from */
.mp-q { margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); border-left: 2px solid var(--mc); background: var(--fill-1); text-align: left; }
.mp-q figcaption { display: flex; align-items: center; gap: 6px; color: var(--mct); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mp-q figcaption svg { width: 14px; height: 14px; }
.mp-q blockquote { margin: 8px 0 0; }
.mp-q blockquote p { margin: 0; color: #e6e9ff; font-size: var(--fs-md); line-height: 1.6; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mp-q > a { display: inline-block; margin-top: 8px; color: var(--dim); font-size: var(--fs-xs); transition: color var(--dur-3) ease; }
.mp-q-sk { display: grid; gap: 8px; }
.mp-q-sk i { height: 10px; border-radius: 5px; background: var(--fill-2); animation: skel 1.4s ease-in-out infinite; }
.mp-q-sk i:first-child { width: 45%; }
.mp-q-sk i:last-child { width: 70%; }
.mp-links { margin-top: var(--s-5); text-align: left; }
.mp-links h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-1); color: var(--dim); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.mp-links h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mp-links a { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 -10px; padding: 0 10px; border-radius: var(--r-sm); color: var(--mut); font-size: var(--fs-md); transition: background-color var(--dur-3) ease, color var(--dur-3) ease; }
.mp-links a svg { width: 18px; height: 18px; flex: none; }
.mp-links a b { margin-left: auto; color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-links a[aria-current] { color: var(--txt); background: var(--fill-1); }
.mp-links a[aria-current] svg { color: var(--mct); }
/* After Story under the card: her latest Instagram post as one compact row */
.mp-as { padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-1); }
.mp-as h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 var(--s-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mct); }
.mp-as h2 small { color: var(--dim); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: var(--fs-xs); }
.mp-as-post { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.mp-as-img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunk); }
.mp-as-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-as-img i { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; gap: 2px; padding: 1px 5px 1px 4px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); font-style: normal; font-size: 10px; font-weight: 700; }
.mp-as-img i svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.2; }
.mp-as-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mp-as-txt b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--fs-base); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mp-as-txt small { color: var(--dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-as-all { display: inline-block; margin-top: var(--s-3); color: var(--gold); font-size: var(--fs-sm); }
/* subtabs: Photos · Posts · Live (underline) + sort, sticky under the header */
.mp-tabs { position: sticky; top: var(--toph); z-index: 31; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 48px; border-bottom: 1px solid var(--border); }
.mp-tl { display: flex; gap: var(--s-6); height: 100%; }
.mt { position: relative; display: inline-flex; align-items: center; height: 100%; color: var(--mut); font-size: var(--fs-base); font-weight: 600; transition: color var(--dur-3) ease; }
.mt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--mc); opacity: 0; }
.mt.on { color: var(--txt); }
.mt.on::after { opacity: 1; }
.mp-sort { position: relative; display: inline-flex; align-items: center; }
.mp-sort select { appearance: none; height: var(--ctl-h-sm); padding: 0 30px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--fill-1); font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--dur-3) ease; }
.mp-sort select:focus-visible { border-color: var(--gold); }
.mp-sort svg { position: absolute; right: 9px; width: 14px; height: 14px; color: var(--mut); pointer-events: none; }
.mp-body { padding-top: var(--s-2); min-height: 60vh; }
.mp-body .lg { --cols: 2; }
.mp-sec .sec-title { margin: var(--s-6) 0 var(--s-4); }
.mp-foot { margin: var(--s-8) 0 0; color: var(--dim); font-size: var(--fs-sm); text-align: center; }
.mp-foot a { color: var(--gold); }
.mp-skel span { display: block; height: 180px; margin-top: var(--s-4); border-radius: var(--r-lg); background: var(--surface-1); animation: skel 1.4s ease-in-out infinite; }
.mp-skel.live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.mp-skel.live span { height: auto; aspect-ratio: 16 / 12; margin: 0; }
/* Posts (phase 2): one centred 680px column — toolbar (pills · N posts · search), pinned milestone, cards 16px apart */
.mp-skel.posts { max-width: 680px; margin: 0 auto; }
.mp-skel.posts span { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px var(--s-3); height: auto; padding: var(--s-5); }
.mp-skel.posts i { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--fill-2); }
.mp-skel.posts b { height: 10px; border-radius: 5px; background: var(--fill-2); }
.mp-skel.posts b:nth-of-type(1) { width: 30%; }
.mp-skel.posts b:nth-of-type(2) { width: 18%; }
.mp-skel.posts b:nth-of-type(3) { grid-column: 1 / -1; height: 56px; margin-top: 6px; }
.ptb .fbar { align-items: center; max-width: 680px; margin: 0 auto; }
.ptb .tin-w { flex: none; }
.ptb .tin { width: 132px; height: var(--ctl-h-sm); padding-left: 30px; border-radius: var(--r-pill); transition: width var(--dur-3) var(--ease-out), border-color var(--dur-3) ease; }
.ptb .tin:focus { width: 200px; }
.mp-body > .notice { max-width: 680px; margin-left: auto; margin-right: auto; }
.mposts { display: flex; flex-direction: column; gap: var(--s-4); max-width: 680px; margin: var(--s-2) auto 0; }
.mposts > .notice { margin: 0; }
.mpost { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-1); scroll-margin-top: calc(var(--stick, var(--toph)) + var(--tbh, 48px) + 12px); }
.mpost.pin { border-color: color-mix(in srgb, var(--mc) 45%, var(--border)); background: radial-gradient(400px 160px at 100% 0%, color-mix(in srgb, var(--mc) 12%, transparent), transparent 70%), var(--surface-1); }
.mpost.focus { border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc); }
.mpost header { display: flex; align-items: center; gap: var(--s-3); }
.mpost-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mpost-who b { color: var(--mct); font-size: var(--fs-md); letter-spacing: 0.06em; }
.mpost-who span { color: var(--dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpost-when { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; color: var(--dim); font-size: var(--fs-xs); line-height: 1.3; text-align: right; }
.mpost-when a { color: var(--mut); font-variant-numeric: tabular-nums; }
.mpost-when > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.mpost-when .fv { width: 14px; height: 14px; font-size: 7.5px; }
.mpost-av, .vw-av { position: relative; display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-sunk); box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--mc, var(--gold)); }
.pin-tag { color: var(--gold); font-size: var(--fs-xs); font-weight: 600; }
.mpost-txt { margin-top: 14px; }
.mpost-c { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; line-height: 1.65; color: #e6e9ff; }
.mpost-c.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mpost-c a { color: var(--gold); }
.mpost-more { margin-top: 4px; padding: 2px 0; border: 0; background: none; color: var(--mut); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: color var(--dur-3) ease; }
.mpost-trb { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--mct); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.mpost-trb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mpost-trb small { color: var(--dim); font-weight: 400; font-size: var(--fs-xs); }
.mpost-trb small::before { content: "· "; }
.mpost-tr { margin-top: 10px; padding: var(--s-3) var(--s-4); border-left: 2px solid color-mix(in srgb, var(--mc) 55%, transparent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--fill-1); }
.mpost-tr small { display: block; margin-bottom: 4px; color: var(--dim); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; }
.mpost-tr p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; color: var(--mut); }
.mpost-ph { display: grid; gap: 4px; margin-top: 14px; border-radius: var(--r-md); overflow: hidden; }
.mpost-ph.n1 { width: min(100%, calc(420px * var(--ar, 1.3333))); }
.mpost-ph.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpost-ph.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpost-ph.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mpost-ph button { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: var(--surface-sunk); cursor: zoom-in; overflow: hidden; }
.mpost-ph.n1 button { aspect-ratio: var(--ar, 1.3333); }
.mpost-ph img { width: 100%; height: 100%; object-fit: cover; }
.mpost-ph button > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 5, 14, 0.55); font-size: 20px; font-weight: 700; }
.mpost-ph .badge { position: absolute; left: var(--s-2); bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2) 2px 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); font-size: var(--fs-xs); font-style: normal; font-weight: 600; }
.mpost-ph .badge svg { width: 12px; height: 12px; fill: #fff; stroke: none; }
.mpost footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); color: var(--dim); font-size: var(--fs-sm); }
.mpost footer a { flex: none; color: var(--gold); }
.mpost-letter { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: center; margin-top: 14px; }
.mpost-letter img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 3%; border-radius: 4px; background: #f4f1ea; }
.mpost-letter > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mpost-letter b { font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; }
.mpost-ex { color: var(--mut); font-size: var(--fs-sm); }
.mpost-letter em { font-style: normal; color: var(--gold); font-size: var(--fs-sm); font-weight: 600; }
/* Live (phase 3): featured replay (thumb ~65% | info ~35%) → filter bar → 2-column replay grid; the info page */
.lhero { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); margin: var(--s-4) 0 var(--s-2); border-radius: var(--r-lg); overflow: hidden; border: 1px solid color-mix(in srgb, var(--mc) 40%, var(--border)); background: radial-gradient(360px 200px at 100% 0%, color-mix(in srgb, var(--mc) 12%, transparent), transparent 70%), var(--surface-1); }
.lhero[hidden] { display: none; }
.lhero-th, .rc-th, .lp-th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-sunk); }
.lhero-th img, .rc-th img, .lp-th img { width: 100%; height: 100%; object-fit: cover; }
.lhero-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-2); min-width: 0; padding: var(--s-5) var(--s-6); }
.lhero-info small { color: var(--mct); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lhero-info h2 { margin: 0; font-size: var(--fs-lg); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lhero-info p { margin: 0; color: var(--dim); font-size: var(--fs-sm); }
.lhero-info .btn { margin-top: var(--s-2); gap: 6px; }
.lhero-info .btn svg, .lp-go i svg, .rc-dur svg { fill: currentColor; stroke: none; }
.lhero-info .btn svg { width: 12px; height: 12px; }
/* thumbnail corners: platform top-left, EN top-right, duration bottom-right */
.rc-plat { position: absolute; left: var(--s-2); top: var(--s-2); display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); font-size: var(--fs-xs); font-weight: 600; }
.rc-plat > span { padding-right: 5px; }
.rc-th .en, .lhero-th .en, .lp-th .en { position: absolute; right: var(--s-2); top: var(--s-2); }
.rc-dur { position: absolute; right: var(--s-2); bottom: var(--s-2); display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.75); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-dur svg { width: 10px; height: 10px; }
.ltb { margin-top: var(--s-2); }
.rgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-top: var(--s-2); }
.rgrid > .rc { flex: 0 0 calc(50% - var(--s-2)); }
.rgrid > .gempty { flex: 1 1 100%; }
.rc { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-1); transition: border-color var(--dur-3) ease, transform var(--dur-2) var(--ease-out); }
.rc-meta { display: flex; flex-direction: column; gap: 5px; padding: var(--s-3); }
.rc-meta b { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rc-meta > span:not(.rc-with) { color: var(--dim); font-size: var(--fs-xs); }
.rc-with { display: inline-flex; align-items: center; gap: 5px; color: var(--mut); font-size: var(--fs-xs); min-width: 0; }
.rc-with > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-with b { font-weight: 600; }
.rc-with svg { width: 14px; height: 14px; flex: none; }
.rc:active { transform: scale(var(--press)); }
/* the info page */
.lp-back { display: inline-flex; align-items: center; gap: 4px; margin: var(--s-4) 0 var(--s-3); color: var(--mut); font-size: var(--fs-sm); }
.lp-back svg { width: 16px; height: 16px; }
.lp-th { max-height: 70vh; border-radius: var(--r-lg); border: 1px solid var(--border); }
.lp-go { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); background: linear-gradient(transparent 40%, rgba(4, 5, 14, 0.55)); font-weight: 700; }
.lp-go i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0c1024; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: transform var(--dur-2) var(--ease-out); }
.lp-go i svg { width: 24px; height: 24px; margin-left: 4px; }
.lp-go > span { padding: 4px 12px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.55); font-size: var(--fs-sm); }
.lp-t { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-xl); line-height: 1.35; overflow-wrap: anywhere; }
.lp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--dim); font-size: var(--fs-sm); }
.lp-plat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.lp-lab { margin-right: 4px; color: var(--dim); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--fill-1); font-size: var(--fs-sm); transition: border-color var(--dur-3) ease; }
.lp-chip .fav { width: 18px; height: 18px; }
.lp-dl { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.lp-dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
.lp-dl dt { color: var(--dim); }
.lp-dl dd { margin: 0; color: var(--mut); }
.lp-dl a { color: var(--gold); }
.lp-note { margin: var(--s-4) 0 0; color: var(--dim); font-size: var(--fs-xs); }
.lp-next { margin-top: var(--s-8); }
.lp-next h3 { margin: 0 0 var(--s-3); font-size: var(--fs-md); letter-spacing: 0.06em; }
.lp-rail { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); scrollbar-width: thin; }
.lp-rail > .rc { flex: 0 0 min(280px, 78%); scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) {
  .rc:hover { border-color: color-mix(in srgb, var(--mc) 55%, var(--border)); }
  .lhero-info h2 a:hover, .lp-back:hover { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }
  .lp-th:hover .lp-go i { transform: scale(1.06); }
  .lp-chip:hover { border-color: var(--mc); }
}
@media (max-width: 639px) {
  .lhero { grid-template-columns: minmax(0, 1fr); }
  .lhero-info { padding: var(--s-4); }
  .rgrid > .rc { flex-basis: 100%; }
  .lp-t { font-size: var(--fs-lg); }
  .lp-go i { width: 52px; height: 52px; }
}
@media (hover: hover) and (pointer: fine) {
  .fbtn:hover, .fp > button:hover, .fclear:hover { background-color: var(--surface-2); color: var(--txt); }
  .tgl:not([aria-pressed="true"]):hover { border-color: var(--border-strong); color: var(--txt); }
  .seg button:not([aria-pressed="true"]):hover { color: var(--txt); }
  .msw:hover { opacity: 1; }
  .mp-links a:hover { background: var(--fill-1); color: var(--txt); }
  .mt:not(.on):hover { color: var(--txt); }
  .mp-sort select:hover { border-color: var(--border-strong); }
  .mpost-letter:hover em { text-decoration: underline; text-underline-offset: 3px; }
  .mpost-more:hover, .mp-q > a:hover { color: var(--txt); }
  .mp-as-post:hover b, .mp-as-all:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mpost-when a:hover, .mpost-trb:hover span { text-decoration: underline; text-underline-offset: 3px; }
}
.fbtn:active, .fp > button:active, .fclear:active, .tgl:active, .msw:active { transform: scale(var(--press)); }
/* tablet: one column — the card becomes a strip (avatar left, details right) above the sticky subtabs */
@media (max-width: 1024px) {
  .mp { grid-template-columns: minmax(0, 1fr); max-width: 900px; padding: var(--s-4) var(--gutter) 0; }
  .mp-side { position: static; max-height: none; overflow: visible; }
  .mp-switch { display: flex; justify-content: center; gap: var(--s-2); }
  .msw { width: 40px; flex: none; }
  .mp-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-6); align-items: center; padding: var(--s-5) var(--s-6); text-align: left; }
  .mp-av { width: 96px; height: 96px; margin: 0; }
  .mp-name { justify-content: flex-start; }
  .mp-meta { display: flex; flex-flow: row wrap; gap: var(--s-1) var(--s-4); margin: 10px 0 0; }
  .mp-q { margin-top: 14px; max-width: 520px; }
  .mp-links { display: none; }
}
/* phones: compact header, full-width segmented control */
@media (max-width: 639px) {
  .mp-switch { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
  .msw { width: 100%; }
  .mp-card { column-gap: var(--s-4); padding: 14px var(--s-4); border-radius: var(--r-lg); }
  .mp-av { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--mc); }
  .mp-name { font-size: 20px; }
  .mp-sub { font-size: var(--fs-sm); margin-top: 2px; }
  .mp-meta { font-size: var(--fs-xs); margin-top: 6px; }
  .mp-meta svg { width: 14px; height: 14px; }
  .mp-q { margin-top: 10px; padding: 8px 10px; }
  .mp-q > a { display: none; }
  .mp-q blockquote { margin: 4px 0 0; }
  .mp-q blockquote p { font-size: var(--fs-sm); -webkit-line-clamp: 2; }
  .mp-tabs { height: auto; padding: var(--s-2) 0; gap: var(--s-2); border-bottom: 0; }
  .mp-tl { flex: 1; height: 36px; gap: 0; padding: 3px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--fill-1); }
  .mt { flex: 1; justify-content: center; border-radius: 7px; font-size: var(--fs-md); }
  .mt::after { display: none; }
  .mt.on { background: var(--surface-2); }
  .mp-sort select { height: 36px; padding: 0 26px 0 10px; }
  .mp-body .lg { --cols: 1; }
  .mp-skel.live { grid-template-columns: minmax(0, 1fr); }
  .mpost { padding: var(--s-4); }
  .ptb .tin { width: 104px; }
  .ptb .tin:focus { width: 150px; }
  .mpost-letter { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); }
}
/* phones: the gallery toolbar scrolls away with the page (as before); pills stay on one scrollable row */
@media (max-width: 760px) {
  .gtb, .mp .gtb { position: static; box-shadow: none; clip-path: none; background: none; padding: var(--s-2) 0; }
  .group-h { top: var(--stick, var(--toph)); }
  .fpills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px 0; padding: 2px 0; }
  .fpills::-webkit-scrollbar { display: none; }
  .fpills > * { flex: none; }
  .gview .tgl span { display: none; }
  .gview .tgl { padding: 0 9px; }
  /* phones: the right-hand group takes its own row and the search box fills what is left of it */
  .gv-r { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .gv-r .tin-w { flex: 1 1 auto; min-width: 0; }
  .gview .tin, .gview .tin:focus { width: 100%; }
}
@media (pointer: coarse) {
  .fbtn, .fp, .fclear { height: 32px; }
  .fbtn.icon { width: 32px; }
  .fbar .count { line-height: 32px; }
  .po { height: 38px; }
}

/* ---------------------------------------------------------------- viewer (Instagram-style modal)
   Desktop: media (original aspect, ≤85vh) | 360px sidebar, max 1200px, centred; post arrows at the viewport edges.
   Phones: full-screen media, the sidebar is a bottom sheet (peek → open). Open: backdrop fade + the modal settles
   from 0.96 (200ms, app.js); close fades (150ms); slide steps glide 280ms on the iOS drawer curve (app.js). */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; opacity: 1; transition: opacity var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete; }
@starting-style { .lb { opacity: 0; } }
.lb[hidden] { display: none; opacity: 0; pointer-events: none; transition-duration: 150ms; }
.lb.instant { transition: none; }
.vw-scrim { position: absolute; inset: 0; background: rgba(3, 4, 12, 0.94); }
.vw-modal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; width: min(1200px, calc(100vw - 144px)); height: min(85vh, 900px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.vw-media { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #000; }
.vw-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
.vw-track { display: flex; height: 100%; will-change: transform; }
.vw-slide { position: relative; flex: 0 0 100%; height: 100%; }
.vw-slide .pan { position: absolute; inset: 0; overflow: hidden; }
.vw-slide .pan img, .vw-slide .pan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vw-slide .hi { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.vw-slide.ok .hi { opacity: 1; }
.vw-slide.ok .lo { visibility: hidden; }
.vw-slide .lo { filter: blur(6px); transform: scale(1.02); }
.vw-pill { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; }
@media (hover: hover) and (pointer: fine) { .lb:not(.zoomed) .hi { cursor: zoom-in; } }
.vw-slide.zoomed .pan { overflow: auto; }
.vw-slide.zoomed .lo { display: none; }
.vw-slide .hi.zoom { position: static; width: auto; height: auto; max-width: none; max-height: none; cursor: zoom-out; }
.vw-arr { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(238, 240, 255, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); cursor: pointer; opacity: 0; transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out); }
.vw-arr svg { width: 16px; height: 16px; fill: none; stroke: #0a0c1c; stroke-width: 2.6; }
.vw-arr.prev { left: var(--s-3); }
.vw-arr.next { right: var(--s-3); }
.lb:not(.multi) .vw-arr, .vw-arr.off, .lb.zoomed .vw-arr { display: none; }
.vw-arr:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .vw-frame:hover .vw-arr { opacity: 1; } }
.vw-cnt { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(4, 5, 14, 0.66); color: #fff; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.vw-cnt:empty { display: none; }
.vw-dots { flex: none; display: flex; justify-content: center; align-items: center; gap: 6px; height: 28px; }
.vw-dots:empty { display: none; }
.vw-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); transition: background-color var(--dur-3) ease; }
.vw-dots i.on { background: var(--gold); }
.vw-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg2); border-left: 1px solid var(--border); }
.vw-grab { display: none; }
.vw-info { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vw-head { flex: none; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.vw-head .vw-av { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--bg2), 0 0 0 3.5px var(--mc, var(--gold)); }
.vw-unis { display: grid; place-items: center; font-style: normal; font-family: var(--display); font-weight: 600; color: var(--gold); }
.vw-stack { display: flex; flex: none; }
.vw-stack .vw-av + .vw-av { margin-left: -12px; }
.vw-head > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.vw-nm { color: var(--mct, var(--txt)); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-nm span[lang] { margin-left: 6px; color: var(--mut); font-weight: 400; letter-spacing: 0; }
.vw-sub { color: var(--dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); overscroll-behavior: contain; }
.vw-cap { white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; font-size: var(--fs-md); line-height: 1.7; color: #dfe3ff; }
.vw-cap a { color: var(--gold); }
.vw-nocap { margin: 0; color: var(--dim); font-size: var(--fs-sm); }
.vw-trl { margin: 0 0 6px; color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.vw-trb { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--gold); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.vw-meta { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); color: var(--mut); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vw-meta a { color: var(--txt); }
.vw-meta span[aria-hidden] { color: var(--dim); }
.vw-mems { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s-3) var(--s-5) 0; }
.vw-mems .chip { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.vw-acts { flex: none; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
.vw-acts .btn { width: 100%; }
.vw-lnk { align-self: center; padding: 2px; border: 0; background: none; color: var(--mut); font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.vw-credit { flex: none; margin: 0; padding: 0 var(--s-5) var(--s-3); color: var(--mut); font-size: var(--fs-xs); }
.vw-credit a { color: var(--gold); }
.vw-keys { flex: none; margin: 0; padding: 0 var(--s-5) var(--s-4); color: var(--dim); font-size: 11.5px; }
.vw-keys kbd { display: inline-block; min-width: 18px; margin-right: 2px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--border-strong); font: inherit; font-size: 10.5px; text-align: center; }
.vw-post, .vw-close { position: fixed; z-index: 3; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: rgba(255, 255, 255, 0.06); cursor: pointer; transition: background-color var(--dur-3) ease, transform var(--dur-2) var(--ease-out), opacity var(--dur-3) ease; }
.vw-post { top: 50%; translate: 0 -50%; width: 48px; height: 48px; }
.vw-post.prev { left: var(--s-4); }
.vw-post.next { right: var(--s-4); }
.vw-post:disabled { opacity: 0.25; cursor: default; }
.vw-close { top: var(--s-4); right: var(--s-4); width: 44px; height: 44px; }
.vw-post svg, .vw-close svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; }
@media (hover: hover) and (pointer: fine) {
  .vw-post:not(:disabled):hover, .vw-close:hover { background-color: rgba(255, 210, 122, 0.18); }
  .vw-arr:hover { background: #fff; }
  .vw-trb:hover, .vw-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.vw-post:not(:disabled):active, .vw-close:active, .vw-arr:active { transform: scale(0.94); }
@media (max-width: 1100px) {
  .vw-modal { width: calc(100vw - 128px); }
  .vw-post { width: 40px; height: 40px; }
  .vw-post.prev { left: 12px; }
  .vw-post.next { right: 12px; }
}
@media (max-width: 900px) { .vw-modal { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 760px) {
  .lb { place-items: stretch; }
  .vw-modal { width: 100vw; height: 100vh; height: 100dvh; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; }
  .vw-side { --peek: 92px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 80vh; max-height: 80dvh; border-left: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5); transform: translateY(calc(100% - var(--peek))); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
  .lb.sheet .vw-side { transform: none; }
  .vw-info { flex: 0 1 auto; }
  .vw-body { flex: 0 1 auto; min-height: 96px; }
  .vw-media { height: calc(100dvh - 92px); }
  .vw-grab { display: flex; justify-content: center; align-items: center; flex: none; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
  .vw-grab span { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .vw-head { padding: 2px var(--s-4) var(--s-3); touch-action: none; }
  .vw-body, .vw-meta, .vw-acts { padding-left: var(--s-4); padding-right: var(--s-4); }
  .vw-post, .vw-arr { display: none; }
  .vw-close { top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.45); }
  .vw-cnt { right: auto; left: var(--s-3); top: calc(env(safe-area-inset-top, 0px) + 18px); }
  .vw-dots { position: absolute; left: 0; right: 0; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-side { transition: none; }
  .sq-skel span, .mp-skel span { animation: none; }
  .sqt:hover img.ok { transform: none; }
  .gview .tin { transition: none; }
}