/* ==========================================================================
   Ours — "After Dark" design system
   A single, deliberately dark boudoir world: deep bordeaux + champagne gold
   + blush on warm near-black. High-contrast Playfair Display (self-hosted)
   for display, Lora for reading, system sans for UI. Candlelight, film grain,
   gold hairlines, a sealed-edition cover.
   ========================================================================== */

/* ----- Self-hosted fonts (no external CDN; work offline) ---------------- */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/playfair-italic-500.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/playfair-italic-600.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/playfair-italic-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/playfair-normal-600.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-normal-700.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/lora-italic-400.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lora-normal-400.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lora-normal-500.woff2') format('woff2')}

/* ----- Tokens ----------------------------------------------------------- */
:root{
  color-scheme: dark;
  --ink:#120609; --ink-2:#1b0a0f; --card:#210c12; --card-2:#2a0f16;
  --wine:#43101d; --wine-lit:#6d1a2f;
  --gold:#d7a24e; --gold-lit:#f4d79b; --gold-dim:rgba(215,162,78,.14);
  --blush:#e78ba0; --blush-dim:rgba(231,139,160,.16);
  --ivory:#f3e7dd; --dim:#c3a79c; --t3:#b39a91; --mute:#8a6b6a;
  --line:rgba(215,162,78,.20); --line-2:rgba(215,162,78,.36);

  --disp:'Playfair Display','Didot','Hoefler Text',Georgia,serif;
  --read:'Lora','Hoefler Text','Iowan Old Style',Georgia,serif;
  --ui:-apple-system,system-ui,'Segoe UI',sans-serif;
  --script:'Snell Roundhand','Zapfino','Apple Chancery',cursive;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.2s; --t:.34s; --t-slow:.6s;
  --sh-1:0 6px 20px rgba(0,0,0,.4);
  --sh-2:0 24px 60px -24px rgba(0,0,0,.85);
  --glow:0 8px 30px rgba(215,120,70,.28);
  --r-sm:12px; --r:16px; --r-lg:22px;
  --maxw:460px; --pad:22px; --nav-h:76px;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --focus:0 0 0 2px var(--ink),0 0 0 4px var(--gold);
  --reader-fs:18px;
}

/* ----- Reset ------------------------------------------------------------ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--ui);
  background:var(--ink);
  color:var(--dim);
  line-height:1.6;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--gold-lit);text-decoration:none}
::selection{background:var(--blush-dim);color:var(--ivory)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--card);color:var(--ivory);border-radius:var(--r-sm);z-index:1000}

/* ----- Ambient: candlelight + film grain -------------------------------- */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient::before,.ambient::after{content:'';position:absolute;border-radius:50%;filter:blur(90px)}
.ambient::before{width:70vw;height:50vh;top:-16vh;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(215,120,70,.24),transparent 70%);animation:breathe 7s var(--ease) infinite}
.ambient::after{width:80vw;height:60vh;bottom:-20vh;right:-20vw;
  background:radial-gradient(circle,rgba(109,26,47,.4),transparent 72%)}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ----- App shell -------------------------------------------------------- */
.app{max-width:var(--maxw);margin:0 auto;min-height:100dvh;position:relative}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--st) + 16px) var(--pad) 10px;background:linear-gradient(180deg,var(--ink) 55%,transparent)}
.topbar__title{font-family:var(--disp);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--ivory);letter-spacing:.01em}
.topbar__actions{display:flex;gap:8px}
main{padding-bottom:calc(var(--nav-h) + var(--sb) + 20px)}
.view{display:none;animation:view-in var(--t) var(--ease)}
.view.is-active{display:block}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll{min-height:60dvh}

/* ----- Buttons / controls ---------------------------------------------- */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:var(--dim);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:var(--t-fast) var(--ease)}
.icon-btn:hover{color:var(--gold-lit);border-color:var(--line-2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}
.icon-btn--lg{width:48px;height:48px;font-size:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:.92rem;color:var(--ivory);background:rgba(255,255,255,.03);border:1px solid var(--line-2);transition:var(--t-fast) var(--ease)}
.btn:hover{border-color:var(--gold);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn-primary{display:block;width:100%;padding:15px 22px;border-radius:999px;font-weight:800;font-size:1rem;letter-spacing:.02em;
  color:#2a0a10;background:linear-gradient(135deg,var(--gold-lit),var(--gold));box-shadow:var(--glow);transition:var(--t-fast) var(--ease)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px) scale(.995)}
.btn-primary:disabled{opacity:.6;box-shadow:none;cursor:default}

/* ----- Forms ------------------------------------------------------------ */
.field{margin-bottom:18px}
.field__label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:700;margin-bottom:8px}
.field__input,.field__textarea,.input,.textarea{width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--ivory);font-size:1rem;transition:var(--t-fast) var(--ease)}
.field__textarea,.textarea{min-height:110px;resize:vertical;line-height:1.6;font-family:var(--read)}
.field__input::placeholder,.field__textarea::placeholder{color:var(--mute)}
.field__input:focus,.field__textarea:focus,.input:focus,.textarea:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.35);box-shadow:0 0 0 3px var(--gold-dim)}
.success{display:none;text-align:center;padding:30px 20px}
.success.is-visible{display:block;animation:view-in var(--t) var(--ease)}
.success__title{font-family:var(--disp);font-style:italic;font-size:1.7rem;color:var(--gold-lit)}

/* ----- Bottom navigation ------------------------------------------------ */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;
  padding:12px 8px calc(14px + var(--sb));background:linear-gradient(0deg,rgba(18,6,9,.97),rgba(18,6,9,.55) 78%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bottom-nav__inner{display:flex;width:100%;max-width:var(--maxw);margin:0 auto}
.bottom-nav__tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px;color:var(--mute);
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;position:relative;transition:color var(--t-fast) var(--ease)}
.bottom-nav__tab svg{width:22px;height:22px;stroke-width:1.5}
.bottom-nav__tab.is-active{color:var(--gold)}
.bottom-nav__tab.is-active .bottom-nav__icon{filter:drop-shadow(0 2px 10px rgba(215,162,78,.55))}
.bottom-nav__tab.has-note::after{content:'';position:absolute;top:0;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;
  background:var(--blush);box-shadow:0 0 8px var(--blush);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ----- Library: masthead + editorial ------------------------------------ */
.library{padding:2px var(--pad) 0}
.masthead{padding:14px 2px 4px}
.masthead__eyebrow{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.masthead__title{font-family:var(--disp);font-style:italic;font-weight:500;font-size:4.4rem;line-height:.9;color:var(--ivory);
  letter-spacing:-.01em;margin-top:6px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.masthead__title .dot{color:var(--gold)}
.issue-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 18px;
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.issue-bar__vol{font-family:var(--disp);font-style:italic;font-size:.95rem;letter-spacing:.02em;text-transform:none;color:var(--gold-lit)}
.issue-bar__date{font-weight:700}
.continue{display:block;width:100%;text-align:left;margin-bottom:22px;padding:16px 18px 16px 20px;border-radius:var(--r);
  position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(109,26,47,.34),rgba(28,10,15,.4));border:1px solid var(--line);transition:var(--t-fast) var(--ease)}
.continue::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--blush))}
.continue:hover{border-color:var(--gold)}
.continue__kicker{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700}
.continue__title{display:block;font-family:var(--disp);font-style:italic;font-size:1.28rem;line-height:1.12;color:var(--ivory);margin:7px 0 6px}
.continue__meta{font-size:.78rem;color:var(--dim)}
.continue__track{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:12px;overflow:hidden}
.continue__fill{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--blush))}

.cover{display:block;width:100%;text-align:left;position:relative;aspect-ratio:5/6;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--sh-2);margin-bottom:20px;background:var(--card)}
/* sealed-edition monogram, shown on the typographic cover (no photo) */
.jacket__seal{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(60% 60% at 40% 35%,#7d1e33,#3d0d1b 80%);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.14),inset 0 -8px 16px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.4)}
.jacket__seal::before{content:'';position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(244,215,155,.45)}
.jacket__seal-mono{font-family:var(--disp);font-style:italic;font-weight:600;font-size:2.1rem;
  background:linear-gradient(120deg,var(--gold) 20%,var(--gold-lit) 50%,var(--gold) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover__img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cover:hover .cover__img{transform:scale(1.04)}
.cover::after{content:'';position:absolute;inset:11px;border:1px solid rgba(244,215,155,.26);border-radius:14px;pointer-events:none;z-index:2}
.cover__no{position:absolute;top:18px;left:20px;z-index:3;font-family:var(--disp);font-style:italic;font-size:1.05rem;color:var(--gold-lit);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cover__tag{position:absolute;top:18px;right:18px;z-index:3;padding:6px 12px;border-radius:999px;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold-lit);background:rgba(18,6,9,.5);border:1px solid rgba(244,215,155,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cover__seal{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:3;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(60% 60% at 40% 35%,#7d1e33,#3d0d1b 80%);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.14),inset 0 -8px 16px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.4)}
.cover__seal::before{content:'';position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(244,215,155,.45)}
.cover__seal span{font-family:var(--disp);font-style:italic;font-weight:600;font-size:2rem;
  background:linear-gradient(120deg,var(--gold) 20%,var(--gold-lit) 50%,var(--gold) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover__overlay{position:absolute;inset:auto 0 0 0;z-index:3;padding:64px 20px 22px;background:linear-gradient(0deg,rgba(15,5,8,.95),rgba(15,5,8,.45) 60%,transparent)}
.cover__title{font-family:var(--disp);font-style:italic;font-size:1.85rem;line-height:1.05;color:#fff}

/* typographic jacket fallback (no image) */
.jacket{position:relative;display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(130% 100% at 30% 0%,var(--wine-lit),var(--wine) 55%,#2a0912 100%)}
.jacket__frame{position:absolute;inset:12px;border:1px solid rgba(244,215,155,.24);border-radius:10px}
.jacket__no{font-family:var(--disp);font-style:italic;font-weight:600;font-size:3.4rem;color:rgba(244,215,155,.5)}
.jacket__orn{position:absolute;bottom:18px;font-size:1rem;color:var(--gold);opacity:.7}
.jacket--0,.jacket--1,.jacket--2,.jacket--3,.jacket--4{background:radial-gradient(130% 100% at 30% 0%,var(--wine-lit),var(--wine) 55%,#2a0912 100%)}

.pull{font-family:var(--disp);font-style:italic;font-size:1.7rem;line-height:1.28;color:var(--ivory);text-align:center;text-wrap:balance;margin:30px 8px 14px}
.pull-byline{text-align:center;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:22px}
.begin{display:inline-flex;align-items:center;gap:10px;margin:0 auto 30px;font-weight:800;color:var(--gold-lit);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.begin__arrow{width:22px;height:1px;background:currentColor;position:relative;transition:width var(--t-fast) var(--ease)}
.begin:hover .begin__arrow{width:32px}
.begin__arrow::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.toc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.toc-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-weight:700}
.toc-rule{height:1px;background:var(--line);margin-bottom:2px}
.toc-list{display:flex;flex-direction:column}
.toc-item{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px 4px;border-bottom:1px solid rgba(215,162,78,.1);transition:transform var(--t) var(--ease)}
.toc-item:hover{transform:translateX(6px)}
.toc-thumb{position:relative;width:52px;height:70px;flex-shrink:0;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.toc-thumb-img{width:100%;height:100%;object-fit:cover}
.toc-thumb-no{position:absolute;bottom:3px;right:5px;font-family:var(--disp);font-style:italic;font-size:.7rem;color:var(--gold-lit);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.toc-body{flex:1;min-width:0}
.toc-title{display:block;font-family:var(--read);font-weight:500;font-size:1.06rem;color:var(--ivory);line-height:1.24}
.toc-date{font-size:.68rem;letter-spacing:.06em;color:var(--mute)}
.toc-meta{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);flex-shrink:0}
.toc-meta.is-new{color:var(--blush)}
.toc-thumb .jacket__no{font-size:1.4rem}
.toc-thumb .jacket__frame{inset:5px}
.toc-thumb .jacket__orn{display:none}

/* ----- Reader ----------------------------------------------------------- */
.reader-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:calc(var(--st) + 12px) var(--pad) 12px;background:linear-gradient(180deg,var(--ink) 68%,transparent)}
.reader-bar__title{flex:1;font-size:.86rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-bar__tools{display:flex;gap:6px}
.reader-fs{display:inline-flex;align-items:flex-end;height:36px;padding:0 11px;border-radius:999px;border:1px solid var(--line);color:var(--dim);font-family:var(--read);font-weight:500;font-size:.82rem}
.reader-fs--lg{font-size:1rem}
.reader-fs:disabled{opacity:.4}
.reader-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(215,162,78,.12)}
.reader-progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--blush));transition:width .1s linear}
.reader{padding:8px var(--pad) 40px}
/* Hero: the full cover image, uncropped, with the title laid over a soft
   bottom gradient — a magazine cover rather than a cropped box + boxed title. */
.reader__cover{margin:0 0 26px;width:100%;position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.reader__cover-img{width:100%;height:auto;display:block}
.reader__cover-img.jacket{aspect-ratio:3/4}
.reader__cover-overlay{position:absolute;left:0;right:0;bottom:0;padding:30px 22px 20px;
  background:linear-gradient(0deg,rgba(12,4,7,.94) 0%,rgba(12,4,7,.74) 34%,rgba(12,4,7,.34) 66%,transparent 100%)}
.reader-kicker{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.reader__title{font-family:var(--disp);font-style:italic;font-weight:500;font-size:2.4rem;line-height:1.08;color:var(--ivory);margin-bottom:10px;text-wrap:balance}
.reader__meta{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:0}
/* On the hero, size the title to the overlay and never show the focus box the
   programmatic focus would otherwise draw around it. */
.reader__cover-overlay .reader__title{font-size:1.9rem;margin-bottom:8px;text-shadow:0 2px 20px rgba(0,0,0,.65)}
.reader__cover-overlay .reader__meta{color:rgba(240,230,220,.82)}
.reader__title:focus,.reader__title:focus-visible{outline:none;box-shadow:none}
.reader__body{font-family:var(--read);font-size:var(--reader-fs);line-height:1.85;color:var(--dim)}
.reader__body p{margin-bottom:1.3em}
.reader__body p:first-of-type::first-letter{font-family:var(--disp);font-style:italic;float:left;font-size:3.8em;line-height:.72;padding:.04em .12em 0 0;color:var(--gold)}
.reader__body .dialogue{font-style:italic;color:var(--blush)}
.reader__body .emphasis{color:var(--gold-lit);font-weight:600}
.reader__body .hot{color:var(--blush)}
.reader__body .whisper{color:var(--mute);font-style:italic}
.reader__body .scene-break{text-align:center;color:var(--gold);letter-spacing:.4em;margin:2em 0;opacity:.7}
.reader__end{text-align:center;margin:40px 0 10px}
.reader__end-text{font-family:var(--script);font-size:1.7rem;color:var(--blush);line-height:1}
.reader__end-sig{font-family:var(--disp);font-style:italic;color:var(--mute)}
.chapter-nav{display:grid;gap:10px;margin-top:34px}
.chapter-card{text-align:left;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);transition:var(--t-fast) var(--ease)}
.chapter-card:hover{border-color:var(--gold)}
.chapter-label{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.chapter-title{display:block;font-family:var(--disp);font-style:italic;font-size:1.15rem;color:var(--ivory);margin:5px 0 3px}
.chapter-meta{font-size:.74rem;color:var(--mute)}

/* ----- View headers (quiz/videos/submit) -------------------------------- */
.view-header{padding:6px var(--pad) 20px}
.view-kicker{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.view-title{font-family:var(--disp);font-style:italic;font-weight:500;font-size:2.2rem;line-height:1.08;color:var(--ivory)}
.view-sub{color:var(--dim);font-size:.92rem;margin-top:10px;line-height:1.55}
.pane{padding:0 var(--pad)}

/* ----- Quiz ------------------------------------------------------------- */
.set-pills{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--pad);margin-bottom:16px}
.set-pill{padding:8px 16px;border-radius:999px;border:1px solid var(--line);color:var(--mute);font-size:.78rem;font-weight:700;transition:var(--t-fast) var(--ease)}
.set-pill.is-active{background:var(--gold-dim);color:var(--gold-lit);border-color:var(--gold)}
.quiz-progress{display:flex;gap:6px;padding:0 var(--pad);margin-bottom:20px}
.quiz-progress__dot{flex:1;height:4px;border-radius:4px;background:rgba(215,162,78,.12);transition:var(--t-fast) var(--ease)}
.quiz-progress__dot.is-filled{background:linear-gradient(90deg,var(--gold),var(--blush))}
.quiz-card{margin:0 var(--pad) 16px;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.quiz-card__num{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.quiz-card__question{font-family:var(--disp);font-style:italic;font-size:1.3rem;color:var(--ivory);line-height:1.32;margin:8px 0 16px}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--dim);transition:var(--t-fast) var(--ease)}
.quiz-option:hover{border-color:var(--line-2)}
.quiz-option.is-selected{border-color:var(--gold);background:var(--gold-dim);color:var(--ivory)}
.quiz-option__dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex-shrink:0;transition:var(--t-fast) var(--ease)}
.quiz-option.is-selected .quiz-option__dot{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px var(--card)}
.quiz-slider{text-align:center}
.quiz-slider__value{font-family:var(--disp);font-style:italic;font-size:2rem;color:var(--gold-lit)}
.quiz-slider__input{width:100%;margin:12px 0 8px;accent-color:var(--gold)}
.quiz-slider__labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mute)}
.quiz-textarea{width:100%;min-height:90px;padding:14px;border-radius:var(--r-sm);background:rgba(0,0,0,.22);border:1px solid var(--line);color:var(--ivory);font-family:var(--read);resize:vertical}
.quiz-textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.quiz-submit-wrap{padding:8px var(--pad) 20px}

/* ----- Yours (conversations + journal) ---------------------------------- */
.yours{padding:6px var(--pad) 0}
.yours-mast{font-family:var(--disp);font-style:italic;font-weight:500;font-size:2.8rem;color:var(--ivory)}
.yours-sub{color:var(--mute);font-size:.9rem;margin:4px 0 24px}
.letters-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.letters-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.letters-count{font-size:.62rem;padding:2px 9px;border-radius:999px;background:var(--blush-dim);color:var(--blush);font-weight:700}
.letter{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);margin-bottom:14px}
.letter-re{font-family:var(--read);font-style:italic;color:var(--mute);font-size:.86rem;border-left:2px solid var(--gold-dim);padding-left:12px;margin-bottom:14px}
.conv{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.bubble{max-width:85%;padding:10px 14px;border-radius:16px}
.bubble-who{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.75;margin-bottom:3px}
.bubble-text{color:var(--ivory);white-space:pre-wrap;word-wrap:break-word;line-height:1.5;font-family:var(--read)}
.bubble-time{font-size:.66rem;color:var(--mute);margin-top:4px}
.bubble--him{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble--him .bubble-who{color:var(--gold-lit)}
.bubble--her{align-self:flex-end;background:var(--blush-dim);border:1px solid rgba(231,139,160,.4);border-bottom-right-radius:4px}
.bubble--her .bubble-who{color:var(--blush)}
.conv-compose{display:flex;gap:8px;align-items:flex-end}
.conv-input{flex:1;min-height:42px;padding:10px 12px;border-radius:var(--r-sm);background:rgba(0,0,0,.22);border:1px solid var(--line);color:var(--ivory);font-family:var(--read);resize:vertical}
.conv-input:focus{outline:none;border-color:var(--gold)}
.conv-send{flex-shrink:0}
.yours-prompt{padding:18px;border-radius:var(--r);border:1px dashed var(--line-2);background:rgba(0,0,0,.18);margin:8px 0 20px}
.yours-prompt-eyebrow{display:flex;align-items:center;gap:8px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.yours-prompt-dot{width:7px;height:7px;border-radius:50%;background:var(--blush);box-shadow:0 0 8px var(--blush)}
.yours-prompt-q{font-family:var(--disp);font-style:italic;font-size:1.3rem;color:var(--ivory);line-height:1.4}
.compose{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);margin-bottom:24px}
.compose-field{margin-bottom:14px}
.compose-label{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.chip-row{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--dim);font-size:.8rem;transition:var(--t-fast) var(--ease)}
.chip.is-selected{border-color:var(--gold);background:var(--gold-dim);color:var(--ivory)}
.mood-btn{font-size:1.2rem;width:44px;height:44px;display:grid;place-items:center}
.compose-textarea{width:100%;min-height:90px;padding:14px;border-radius:var(--r-sm);background:rgba(0,0,0,.22);border:1px solid var(--line);color:var(--ivory);font-family:var(--read);resize:vertical}
.compose-textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.privacy{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:.86rem;color:var(--dim);cursor:pointer}
.privacy input{width:18px;height:18px;accent-color:var(--gold)}
.past-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.past-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.entry{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);margin-bottom:10px}
.entry-date{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;color:var(--mute);margin-bottom:8px}
.entry-mood{font-size:1.2rem}
.entry-text{color:var(--ivory);white-space:pre-wrap;line-height:1.6;font-family:var(--read)}
.entry-tag{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:999px;background:var(--gold-dim);color:var(--gold-lit);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.yours-chips{display:grid;gap:10px;margin:24px 0}
.yours-chip{text-align:left;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);transition:var(--t-fast) var(--ease)}
.yours-chip:hover{border-color:var(--gold)}
.yours-chip-title{font-family:var(--disp);font-style:italic;font-size:1.15rem;color:var(--ivory)}
.yours-chip-meta{font-size:.76rem;color:var(--mute);margin-top:2px}

/* ----- Videos ----------------------------------------------------------- */
.videos{padding:0 var(--pad)}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.video-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.video-thumb{position:relative;width:100%;aspect-ratio:16/10;display:grid;place-items:center;background:rgba(0,0,0,.3)}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-thumb__placeholder svg{width:40px;height:40px;color:var(--mute)}
.video-thumb__overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,4,6,.25)}
.video-thumb__play{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(215,162,78,.9);box-shadow:var(--glow)}
.video-thumb__play svg{width:20px;height:20px;color:#2a0a10}
.video-info{padding:12px 14px}
.video-info__title{font-family:var(--disp);font-style:italic;font-size:1rem;color:var(--ivory)}
.video-info__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.72rem;color:var(--mute);margin-top:4px}
.empty-state{text-align:center;padding:50px 20px}
.empty-state__title{font-family:var(--disp);font-style:italic;font-size:1.5rem;color:var(--dim)}
.empty-state__text{color:var(--mute);font-size:.88rem;margin-top:8px}
.video-add{display:block;width:100%;text-align:left;margin-top:24px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.video-add__text{font-weight:700;color:var(--ivory)}
.video-add__sub{font-size:.76rem;color:var(--mute);margin-top:2px}
.video-form{display:none;margin-top:14px}
.video-form.is-visible{display:block;animation:view-in var(--t) var(--ease)}

/* ----- Share / previous ------------------------------------------------- */
.submit-view{padding:0 var(--pad)}
.previous-item{padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);margin-bottom:10px}
.previous-item__url{color:var(--gold-lit);font-size:.82rem;word-break:break-all}
.previous-item__note{color:var(--dim);font-size:.86rem;margin-top:6px;font-family:var(--read)}
.previous-item__date{color:var(--mute);font-size:.72rem;margin-top:6px}

/* ----- Install / note banners, modal, toast ----------------------------- */
.install-banner{display:none;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--card-2)}
.install-banner.is-visible{display:flex}
.install-banner__text{flex:1}
.install-banner__text strong{display:block;color:var(--ivory);font-size:.9rem}
.install-banner__text small{color:var(--mute);font-size:.76rem}
.install-banner__action{padding:9px 16px;border-radius:999px;background:var(--gold);color:#2a0a10;font-weight:800;font-size:.82rem}
.install-banner__close{width:30px;height:30px;border-radius:50%;color:var(--mute);font-size:1.2rem}
.note-banner{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--sb) + 14px);transform:translate(-50%,20px);z-index:60;opacity:0;
  display:flex;align-items:center;gap:4px;width:calc(100% - 32px);max-width:420px;padding:4px 4px 4px 6px;border-radius:999px;
  border:1px solid var(--gold);background:rgba(33,12,18,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh-2);transition:var(--t) var(--ease)}
.note-banner.is-in{opacity:1;transform:translate(-50%,0)}
.note-main{flex:1;display:flex;align-items:center;gap:10px;padding:8px 10px;text-align:left}
.note-dot{width:8px;height:8px;border-radius:50%;background:var(--blush);box-shadow:0 0 8px var(--blush);flex-shrink:0}
.note-text{flex:1;font-size:.86rem;color:var(--ivory);font-weight:600}
.note-cta{font-size:.72rem;font-weight:800;color:var(--gold-lit);text-transform:uppercase;letter-spacing:.06em}
.note-close{width:34px;height:34px;border-radius:50%;color:var(--mute);font-size:1.1rem;flex-shrink:0}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(6,2,3,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal.is-open{display:flex}
.modal__close{position:absolute;top:calc(var(--st) + 14px);right:16px}
.modal video{width:100%;max-width:900px;border-radius:var(--r)}
.modal__title{position:absolute;bottom:calc(var(--sb) + 20px);left:0;right:0;text-align:center;color:var(--dim);font-size:.9rem}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--sb) + 16px);transform:translate(-50%,12px);z-index:80;padding:11px 18px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ivory);font-size:.86rem;font-weight:600;opacity:0;transition:var(--t) var(--ease);pointer-events:none;box-shadow:var(--sh-2)}
.toast.is-in{opacity:1;transform:translate(-50%,0)}

/* ----- Unlock / "Almost there" fallback --------------------------------- */
.unlock{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px calc(40px + var(--sb));max-width:460px;margin:0 auto}
.unlock__mark{width:72px;height:72px;border-radius:50%;margin-bottom:26px;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,var(--blush),#a7284a);box-shadow:var(--glow)}
.unlock__mark svg{width:34px;height:34px;color:#fff}
.unlock__kicker{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
.unlock__title{font-family:var(--disp);font-style:italic;font-weight:500;font-size:2.4rem;line-height:1.05;color:var(--ivory);margin-bottom:12px}
.unlock__sub{color:var(--dim);font-size:.98rem;margin-bottom:30px;max-width:340px}
.unlock__form{width:100%;max-width:320px}
.unlock__note{color:var(--mute);font-size:.78rem;margin-top:22px;font-style:italic}

/* ----- Motion utility --------------------------------------------------- */
.is-animated{opacity:0;animation:rise var(--t-slow) var(--ease) forwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (min-width:600px){
  .video-grid{grid-template-columns:repeat(3,1fr)}
  .reader__title{font-size:2.9rem}
  .cover__title{font-size:2.2rem}
  .masthead__title{font-size:5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .is-animated{opacity:1}
  .ambient::before{animation:none}
}

/* Ask — open questions & concerns channel */
.ask-empty{font-family:var(--read);font-style:italic;color:var(--mute);text-align:center;padding:26px 8px;border:.5px dashed var(--line);border-radius:12px;margin-bottom:14px;line-height:1.6}