/* readimo.app. One system with the app: true black, white ink, neutral
   greys (src/theme/colors.ts dark), the system sans for text, Instrument
   Serif for the large lines (the app's Stats display face), Readimo Clock
   for figures (the Active Session's clock). No glows, no gradients for their
   own sake: the books and the reader's own covers are the colour. */

@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Readimo Clock'; src: url('/fonts/ReadimoClock-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --page: #000000;
  --card: #141415;
  --card2: #1c1c1e;
  --hairline: rgba(255, 255, 255, 0.09);
  --ink: #ffffff;
  --ink2: rgba(255, 255, 255, 0.72);
  --meta: rgba(255, 255, 255, 0.52);
  --teal: #4fd1c5;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --display: 'Instrument Serif', 'New York', Georgia, serif;
  --figure: 'Readimo Clock', 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255, 255, 255, 0.9); color: #000; }

.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.035em; line-height: 0.98; margin: 0; }
.display em { font-style: italic; color: var(--ink2); }
.display > span, .display > em { display: block; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: transform 0.5s var(--ease), background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px); border-color: var(--hairline); }
.nav.away { transform: translateY(-100%); }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img:first-child { border-radius: 7px; transition: width 260ms ease, height 260ms ease; }
.nav-links { display: flex; gap: 30px; font-size: 14px; color: var(--meta); }
.nav-links a { position: relative; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 9px rgba(255,255,255,0.72); opacity: 0; transform: translateY(3px) scale(0.5); transition: opacity 160ms ease, transform 180ms ease; }
.nav-links a.active { font-weight: 650; }
.nav-links a.active::after { opacity: 1; transform: none; }
.nav:not(.scrolled) { text-shadow: 0 2px 18px rgba(0,0,0,0.95); }
.nav-cta { font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #000; transition: background-color 200ms ease, color 200ms ease, transform 200ms ease; }

.reader .nav-cta { background: var(--ink); color: #000; }
.nav-cta:hover { transform: scale(1.04); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; display: grid; place-items: center; overflow: hidden; touch-action: pan-y;
  /* The ruled ground the shelves pass over (after Cibby's 5% grid, the
     founder asked for it): fine enough to read as paper, not a chart. */
  background-color: var(--page);
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center center; }
/* Corners fall to black, and a soft dark plate sits under the headline so
   it always reads against the books going by. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 40% 36% at 50% 50%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.66) 38%, rgba(0,0,0,0.28) 66%, rgba(0,0,0,0) 88%),
              radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.92) 100%); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; touch-action: pan-y; }
.hero-canvas.can-grab { cursor: grab; }
.hero-canvas.grabbing { cursor: grabbing; touch-action: none; }
.hero-copy { will-change: transform, opacity; position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); pointer-events: none; max-width: 760px; }
.hero-copy .display { font-size: clamp(64px, 10.5vw, 136px); text-shadow: 0 2px 30px rgba(0,0,0,0.65), 0 0 2px rgba(0,0,0,0.5); }
.hero-copy .lede { text-shadow: 0 1px 14px rgba(0,0,0,0.9); }
.hero-copy .lede { margin: 26px auto 34px; max-width: 470px; color: var(--ink2); font-size: clamp(16px, 1.6vw, 18px); }
.hero-hint { position: absolute; bottom: 28px; left: 0; right: 0; z-index: 2; margin: 0; text-align: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); transition: opacity 0.8s ease; pointer-events: none; }
.hero-hint.gone { opacity: 0; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(to bottom, transparent, var(--page)); pointer-events: none; z-index: 1; }

.reveal-hero { opacity: 0; transform: translateY(18px); animation: rise 1.1s var(--ease) forwards; }
.hero-copy .display.reveal-hero { animation-delay: 0.55s; }
.hero-copy .lede.reveal-hero { animation-delay: 0.75s; }
.hero-copy .store-badge.reveal-hero { animation: rise 1.1s var(--ease) 0.9s forwards, rim-turn 14s linear infinite, flare-travel 7.6s linear infinite; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- App Store button ----------
   After Cibby's badge (a dark pill, a rim that turns, a flare that travels
   round it, a breathing glow, a shine on hover, a sprung press), in our own
   light: the brand beige (#E3C9AA) through ivory to white, a lamp on paper,
   not a rainbow. */
@property --rim { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --flare { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.store-badge { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 196px; min-height: 60px; padding: 8px 24px 9px 20px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgba(46,44,42,0.92), rgba(16,15,14,0.96)), #121110;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.5), 0 12px 30px rgba(0,0,0,0.42);
  transform: translateZ(0); will-change: transform; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 220ms ease, transform 320ms cubic-bezier(0.2, 1.45, 0.4, 1);
  animation: rim-turn 14s linear infinite, flare-travel 7.6s linear infinite; }
.store-badge::before, .store-badge::after { content: ''; position: absolute; border-radius: inherit; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.store-badge::before { z-index: -1; inset: -1.5px; padding: 1.5px;
  background: conic-gradient(from var(--flare), transparent 0deg 150deg, rgba(255,255,255,0.9) 178deg, transparent 206deg 360deg),
              conic-gradient(from var(--rim), #E3C9AA, #F6EBDD, #8C7A66, #E3C9AA 50%, #FFFFFF 62%, #B9A48C 78%, #E3C9AA); }
.store-badge::after { z-index: -2; inset: -7px; padding: 6px; filter: blur(7px); opacity: 0.4;
  background: conic-gradient(from var(--flare), transparent 0deg 200deg, rgba(227,201,170,0.85) 250deg, rgba(255,246,232,0.6) 290deg, transparent 340deg 360deg);
  animation: rim-breathe 6.4s ease-in-out infinite; }
.store-badge:hover { transform: translateY(-1px) translateZ(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.46), 0 14px 36px rgba(0,0,0,0.5), 0 0 26px rgba(227,201,170,0.18); }
.store-badge:active { transform: scale(0.93) translateZ(0); transition-duration: 80ms; }
.store-badge:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.store-badge-shine { position: absolute; z-index: 0; inset: 1.5px; overflow: hidden; border-radius: inherit; pointer-events: none; }
.store-badge-shine::before { content: ''; position: absolute; top: -65%; bottom: -65%; left: -48%; width: 42%; opacity: 0; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 14%, rgba(255,250,240,0.7) 50%, rgba(255,255,255,0.1) 86%, transparent); }
.store-badge:hover .store-badge-shine::before { animation: shine-wipe 820ms cubic-bezier(0.18, 0.72, 0.25, 1) both; }
.store-badge-apple { position: relative; z-index: 1; width: 22px; height: 26px; transform: translateY(-1px); }
.store-badge-copy { position: relative; z-index: 1; display: grid; gap: 1px; text-align: left; line-height: 1; }
.store-badge-copy small { color: rgba(255,255,255,0.8); font-size: 10.5px; font-weight: 600; letter-spacing: 0.015em; }
.store-badge-copy strong { font-size: 21px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.08; }
@keyframes rim-turn { to { --rim: 360deg; } }
@keyframes flare-travel { to { --flare: 360deg; } }
@keyframes rim-breathe { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.55; } }
@keyframes shine-wipe { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 14% { opacity: 0.7; } 72% { opacity: 0.45; } 100% { opacity: 0; transform: translateX(590%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .store-badge, .store-badge::after { animation: none; } }
.hero-copy .store-badge { pointer-events: auto; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- statement ---------- */
.statement { padding: clamp(110px, 16vw, 200px) var(--gutter) clamp(60px, 9vw, 120px); max-width: 1040px; margin: 0 auto; text-align: center; }
.statement .display { font-size: clamp(44px, 6.4vw, 88px); }
.statement-sub { margin: 30px auto 0; max-width: 560px; color: var(--ink2); font-size: 18px; }

/* ---------- features: text steps beside one phone that changes screens ---------- */
.features { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; max-width: 470px; opacity: 0.28; transition: opacity 0.6s ease; }
.step.on { opacity: 1; }
.step .display { font-size: clamp(46px, 5.4vw, 74px); margin: 10px 0 22px; }
.step p { margin: 0; color: var(--ink2); font-size: 18px; }
.kicker { font-size: 13px !important; letter-spacing: 0.04em; color: var(--meta) !important; font-weight: 500; }
.step-shot { display: none; }
.features-phone { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.phone { position: relative; width: min(380px, 39vh); aspect-ratio: 1206 / 2622; border-radius: 15% / 7%; padding: 2.3%; background: #0c0c0d; box-shadow: 0 0 0 1.5px #2a2a2c, 0 0 0 7px #0c0c0d, 0 0 0 8px #232325, 0 40px 120px rgba(0, 0, 0, 0.6); }
.phone img { position: absolute; inset: 2.3%; width: 95.4%; height: 95.4%; object-fit: cover; border-radius: 13% / 6%; opacity: 0; transform: scale(0.985); transition: opacity 0.55s ease, transform 0.8s var(--ease); }
.phone img.on { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .features { grid-template-columns: 1fr; }
  .features-phone { display: none; }
  .step { min-height: 0; opacity: 1; padding: 64px 0; max-width: none; }
  .step-shot { display: block; width: min(232px, 60vw); margin: 40px auto 0; border-radius: 34px; box-shadow: 0 0 0 1.5px #2a2a2c, 0 30px 80px rgba(0,0,0,0.6); }
}

/* ---------- import ---------- */
.import { padding: clamp(110px, 14vw, 180px) var(--gutter) 0; text-align: center; overflow: hidden; }
.import .display { font-size: clamp(44px, 6vw, 84px); }
.import > p { margin: 26px auto 0; max-width: 520px; color: var(--ink2); font-size: 18px; }
.import-wall { margin: 70px auto 0; display: flex; gap: 14px; width: max-content; animation: drift 80s linear infinite; }
.import-wall img { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: inset 3px 0 0 rgba(0,0,0,0.25), 0 18px 40px rgba(0,0,0,0.5); }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .import-wall { animation: none; } }

/* ---------- faq ---------- */
.faq { padding: clamp(120px, 15vw, 200px) var(--gutter) 0; max-width: 760px; margin: 0 auto; }
.faq .display { font-size: clamp(44px, 6vw, 84px); text-align: center; margin-bottom: 48px; }
.faq details { border-top: 1px solid var(--hairline); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 300; font-size: 26px; color: var(--meta); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--ink2); }

/* ---------- closing + footer ---------- */
.closing { padding: clamp(140px, 18vw, 240px) var(--gutter); text-align: center; }
.closing .display { font-size: clamp(52px, 8vw, 112px); margin-bottom: 44px; }
.footer { border-top: 1px solid var(--hairline); padding: 34px var(--gutter) 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--meta); font-size: 14px; }
.footer nav { display: flex; gap: 24px; }
.footer a:hover { color: var(--ink); }
.footer p { margin: 0; }

/* =====================================================================
   Reader and session pages (rendered by the worker)
   ===================================================================== */
.rp { max-width: 640px; margin: 0 auto; padding: 96px var(--gutter) 160px; }
.rp-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--card2); display: grid; place-items: center; font-size: 38px; font-weight: 600; color: var(--ink2); }
.rp-name { margin: 18px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 7px; }
.rp-user { margin: 2px 0 0; color: var(--meta); font-size: 16px; }
.rp-bio { margin: 14px 0 0; color: var(--ink2); max-width: 420px; }
.rp-counts { margin: 16px 0 0; display: flex; gap: 22px; font-size: 15px; color: var(--meta); }
.rp-counts b { color: var(--ink); font-weight: 700; }
.pro-mark { width: 20px; height: 20px; }

.stats-title { font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: -0.03em; line-height: 1; margin: 48px 0 18px; }
.stats-title em { color: var(--ink2); }
.stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--card); border-radius: 20px; padding: 18px 16px 16px; }
.stat b { display: block; font-family: var(--figure); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.01em; }
.stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink2); }

.rp-section { margin-top: 56px; }
.rp-section > h2 { font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: -0.03em; line-height: 1; margin: 0 0 20px; }
.rp-section > h2 em { color: var(--ink2); }

.now { display: flex; gap: 16px; align-items: center; background: var(--card); border-radius: 22px; padding: 14px; }
.now + .now { margin-top: 10px; }
.now .cover { width: 64px; flex: none; }
.now-title { font-weight: 650; font-size: 17px; line-height: 1.25; }
.now-author { color: var(--meta); font-size: 14px; }
.bar { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--teal); border-radius: 2px; }
.bar-label { margin-top: 6px; font-size: 13px; color: var(--ink2); }

.cover { aspect-ratio: 2 / 3; border-radius: 2px 5px 5px 2px; object-fit: cover; background: var(--card2); box-shadow: inset 2px 0 0 rgba(0,0,0,0.22), 0 10px 26px rgba(0,0,0,0.45); width: 100%; }
.cover-blank { display: grid; place-items: center; padding: 8px; font-size: 11px; line-height: 1.2; text-align: center; color: rgba(255,255,255,0.8); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px 10px; }

.post { background: var(--card); border-radius: 24px; padding: 20px; }
.post + .post { margin-top: 12px; }
.post-top { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--meta); }
.post-top .avatar { width: 34px; height: 34px; font-size: 14px; }
.post-top b { color: var(--ink); font-weight: 650; }
.post-title { margin: 14px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.figures { margin-top: 12px; display: flex; gap: 28px; }
.figures span { display: block; font-size: 13px; color: var(--ink2); }
.figures b { display: block; font-size: 22px; font-weight: 700; }
.post-book { margin-top: 18px; display: flex; gap: 14px; align-items: center; }
.post-book .cover { width: 56px; flex: none; }
.post-book p { margin: 0; font-size: 15px; }
.post-book small { display: block; color: var(--meta); font-size: 13px; }
.stars { color: var(--ink); letter-spacing: 2px; font-size: 18px; margin-top: 10px; }

.single { max-width: 520px; }
.single .post { padding: 24px; }
.hero-cover { width: min(260px, 62vw); margin: 26px auto 8px; }
.private { margin-top: 40px; text-align: center; background: var(--card); border-radius: 24px; padding: 34px 24px; color: var(--ink2); }
.private svg { width: 26px; height: 26px; margin: 0 auto 12px; display: block; opacity: 0.8; }

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.88) 38%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dock-btn { display: flex; align-items: center; gap: 12px; width: min(440px, 100%); padding: 10px 22px 10px 10px; border-radius: 999px; background: var(--ink); color: #000; font-weight: 650; font-size: 17px; transition: transform 0.2s var(--ease); }
.dock-btn:active { transform: scale(0.98); }
.dock-btn img { width: 40px; height: 40px; border-radius: 10px; }
.dock-btn span { flex: 1; text-align: center; margin-right: 30px; }
.dock-open { font-size: 13px; color: var(--meta); }
.dock-open:hover { color: var(--ink); }
.miss { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.miss .display { font-size: clamp(48px, 9vw, 80px); }
.miss p { color: var(--ink2); }

/* legal + seo pages (growth/seo): legal, guides and comparisons share one
   answer-first article on a ~680px measure, in the landing page's type. */
.doc-page { background: var(--page); }
.doc { max-width: 720px; margin: 0 auto; padding: 132px var(--gutter) 40px; }
.doc .kicker { margin: 0 0 14px; }
.doc-h1 { font-size: clamp(48px, 7vw, 82px); margin: 0 0 30px; }
.doc-answer { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.55; color: var(--ink); margin: 0 0 40px; padding: 26px 28px; background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; }
.doc h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 56px 0 14px; scroll-margin-top: 90px; }
.doc p, .doc li { color: var(--ink2); font-size: 17px; line-height: 1.7; }
.doc p { margin: 0 0 16px; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--meta); }
.doc strong { color: var(--ink); font-weight: 650; }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.doc a:hover { text-decoration-color: var(--ink); }
.doc-note { font-size: 14px !important; color: var(--meta) !important; margin-top: 12px !important; }
.doc-dim { color: var(--meta); }
.doc-table-wrap { margin: 0 0 8px; overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc-table th, .doc-table td { text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.doc-table thead th { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--meta); }
.doc-table thead th:nth-child(2) { color: var(--ink); }
.doc-table tbody th { font-weight: 500; color: var(--ink2); width: 44%; }
.doc-table td:nth-child(2) { color: var(--ink); font-weight: 600; }
.doc-table td { color: var(--ink2); }
.doc-faq details { border-top: 1px solid var(--hairline); padding: 20px 0; }
.doc-faq details:last-child { border-bottom: 1px solid var(--hairline); }
.doc-faq summary { cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after { content: '+'; font-weight: 300; font-size: 24px; line-height: 1; color: var(--meta); transition: transform 0.3s var(--ease); }
.doc-faq details[open] summary::after { transform: rotate(45deg); }
.doc-faq details p { margin: 12px 0 0; }
.doc-related { margin-top: 64px; display: flex; flex-direction: column; gap: 2px; }
.doc-related .kicker { margin-bottom: 10px; }
.doc-related a { font-family: var(--display); font-size: 30px; letter-spacing: -0.02em; line-height: 1.25; text-decoration: none !important; color: var(--ink2) !important; transition: color 0.2s; }
.doc-related a:hover { color: var(--ink) !important; }
.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 30px; }
.doc-toc a { font-size: 14px; text-decoration: none !important; padding: 7px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); color: var(--ink2) !important; }
.doc-toc a:hover { color: var(--ink) !important; }
.doc-closing { padding: 80px var(--gutter) 120px; text-align: center; }
.doc-closing-line { font-family: var(--display); font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 36px; }
.doc-closing-line em { color: var(--ink2); }
.doc-footer nav { flex-wrap: wrap; gap: 10px 22px; max-width: 760px; }
.book-faq { text-align: left; margin-top: 44px; }
.book-faq h2 { font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
.book-faq p { color: var(--ink2); margin: 0; line-height: 1.6; }
.book-faq p + p { margin-top: 18px; }

/* ---------- numbers: a floor of covers going away, two real figures ----------
   After Cibby's catalogue band (founder: "they have a very cool font"):
   the figures in the app's own figures face (Momo Trust Display), counted
   up once when they come into view; the floor is the shelf laid down, its
   covers drifting toward the far edge. Hidden until real numbers arrive. */
@font-face { font-family: 'Momo Trust Display'; src: url('/fonts/MomoTrustDisplay-Regular.ttf') format('truetype'); font-display: swap; }
.numbers { position: relative; margin-top: clamp(100px, 12vw, 160px); height: clamp(520px, 62vw, 760px); overflow: hidden; perspective: 900px; perspective-origin: 50% 0%; }
.numbers-floor { position: absolute; left: 50%; top: 0; width: 220%; height: 160%; margin-left: -110%; transform-origin: 50% 0%; transform: rotateX(64deg); display: grid; grid-template-columns: repeat(28, 1fr); gap: 18px 22px; align-content: start; animation: floor-drift 60s linear infinite; }
.numbers-floor img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px 5px 5px 2px; box-shadow: 6px 10px 0 rgba(0,0,0,0.5), inset 3px 0 0 rgba(0,0,0,0.25); }
.numbers::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--page) 0%, rgba(0,0,0,0.55) 22%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.86) 74%, var(--page) 100%), radial-gradient(ellipse 70% 50% at 50% 78%, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); }
.numbers-row { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(48px, 7vw, 90px); display: flex; justify-content: center; gap: clamp(40px, 12vw, 200px); text-align: center; padding: 0 var(--gutter); }
.number b { display: block; font-family: 'Momo Trust Display', var(--sans); font-weight: 400; font-size: clamp(48px, 7.4vw, 104px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 40px rgba(0,0,0,0.8); }
.number span { display: block; margin-top: 12px; font-size: clamp(14px, 1.4vw, 18px); color: var(--ink2); }
@keyframes floor-drift { to { transform: rotateX(64deg) translateY(-33.3%); } }
@media (max-width: 640px) { .numbers-row { flex-direction: column; gap: 34px; } .numbers { height: 640px; } .numbers-floor { grid-template-columns: repeat(10, 1fr); width: 260%; margin-left: -130%; } }
@media (prefers-reduced-motion: reduce) { .numbers-floor { animation: none; } }

/* ---------- the nav, scrolled: a floating card of the app's glass ----------
   After Cibby's: on the way down the bar lifts off the edges into a rounded
   card, the blur and a lit top edge (the app's header glass) under it. */
.nav { transition: transform 0.5s var(--ease), top 0.45s var(--ease), left 0.45s var(--ease), right 0.45s var(--ease), border-radius 0.45s var(--ease), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; animation: nav-in 0.9s var(--ease) 0.2s backwards; }
.nav.scrolled { top: 12px; left: max(12px, calc((100% - 1180px) / 2)); right: max(12px, calc((100% - 1180px) / 2)); height: 60px; border-radius: 22px; background: rgba(22, 22, 24, 0.58); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.nav.scrolled.away { transform: translateY(calc(-100% - 16px)); }
@keyframes nav-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   The profile, as the app draws it today (feat/r8-fixes): the head on the
   page colour (#0E0E0F) with no banner, a 112pt face (Pro: the gold
   bookmark, and a gold glow above the top edge), the name 24 bold, the
   handle, Following / Followers / Pages in the figures face, the bio, two
   pills; an icon tab strip with Stats on; then the room in the reader's own
   colour with its slow light, glass cards on it.
   ===================================================================== */
.pf { padding-top: 84px; background: #0E0E0F; overflow-x: clip; }
.pf-top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px var(--gutter) 22px; max-width: 640px; margin: 0 auto; }
.pf-top.is-pro::before { content: ''; position: absolute; left: 50%; top: -150px; width: 640px; height: 360px; margin-left: -320px; pointer-events: none; background: radial-gradient(closest-side, rgba(224,158,23,0.32), rgba(224,158,23,0)); }
.pf-face { position: relative; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.pf-pro { border-radius: 0; }
.pf-mono { display: grid; place-items: center; background: #2C2C2E; color: rgba(255,255,255,0.72); font-size: 44px; font-weight: 600; }
.pf-name { margin: 14px 0 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.4px; }
.pf-user { margin: 2px 0 0; font-size: 15px; line-height: 20px; color: var(--meta); }
.pf-counts { margin: 12px 0 0; display: flex; gap: 20px; font-size: 15px; color: var(--meta); }
.pf-counts b { font-family: 'Momo Trust Display', var(--sans); font-weight: 400; font-size: 14.1px; color: var(--ink); }
.pf-bio { margin: 12px 0 0; font-size: 17px; line-height: 22px; max-width: 460px; }
.pf-actions { margin-top: 20px; display: flex; gap: 10px; width: 100%; max-width: 420px; }
.pill { flex: 1; display: grid; place-items: center; height: 40px; border-radius: 20px; background: #2C2C2E; color: var(--ink); font-size: 15px; font-weight: 600; transition: transform 0.2s var(--ease), opacity 0.2s; }
.pill:active { transform: scale(0.97); }
.pill-primary { background: var(--ink); color: #000; }
.pf-tabs { position: sticky; top: 84px; z-index: 5; display: flex; justify-content: space-around; max-width: 640px; margin: 8px auto 0; border-bottom: 1px solid var(--hairline); background: #0E0E0F; }
.pf-tab { position: relative; display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 10px; color: var(--meta); }
.pf-tab svg { width: 24px; height: 24px; }
.pf-tab em { font-style: normal; font-size: 15px; font-weight: 600; }
.pf-tab.on { color: var(--ink); }
.pf-tab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--ink); }
.pf-room { position: relative; background: var(--room); min-height: 100vh; }
.pf-light { position: absolute; left: 0; right: 0; top: 0; height: 560px; pointer-events: none; overflow: hidden; }
.pf-light::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--room-glow), transparent 50%); }
.pf-light i { position: absolute; inset: 0; animation: breathe 9s ease-in-out infinite alternate; -webkit-mask: linear-gradient(to bottom, #000 35%, transparent); mask: linear-gradient(to bottom, #000 35%, transparent); }
.pf-light i:first-child { background: linear-gradient(to right, var(--aurora-a), transparent 75%); }
.pf-light i:last-child { background: linear-gradient(to left, var(--aurora-b), transparent 75%); animation-direction: alternate-reverse; }
@keyframes breathe { from { opacity: 0.2; } to { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .pf-light i { animation: none; opacity: 0.45; } }
.pf-body { position: relative; max-width: 640px; margin: 0 auto; padding: 18px var(--gutter) 180px; display: grid; gap: 16px; }
.pf-periods { display: flex; gap: 8px; }
.period { height: 36px; padding: 0 16px; display: grid; place-items: center; border-radius: 18px; border: 1px solid rgba(255,255,255,0.4); font-size: 14px; font-weight: 600; }
.period.on { background: #fff; border-color: #fff; color: var(--on-white); }
.pf-head { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.pf-caption { margin: 6px 0 0; text-align: center; font-size: 16px; color: rgba(255,255,255,0.72); }
.pf-desk { padding-top: 10px; }
.desk { height: 300px; display: grid; place-items: center; perspective: 1400px; cursor: grab; touch-action: pan-y; user-select: none; }
.desk-pile { --rx: 0deg; --ry: 0deg; position: relative; width: 132px; height: 198px; transform-style: preserve-3d; transform: rotateX(calc(46deg + var(--rx))) rotateZ(calc(-24deg + var(--ry))); }
/* One book is a closed box built about its own centre: the cover lifted
   by its thickness, each edge stood up at its side (page block on the
   fore-edge, head and tail; the spine in the cover's own colour). */
.db { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(var(--r)); }
.db-f { position: absolute; backface-visibility: hidden; }
.db-cover { inset: 0; transform: translateZ(var(--t)); border-radius: 1px 3px 3px 1px; overflow: hidden; }
.db-cover img, .db-blank { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; padding: 10px; font-size: 13px; text-align: center; }
.db-cover::before { content: ''; position: absolute; z-index: 1; left: 4.5%; top: 0; bottom: 0; width: 3px; background: linear-gradient(to right, rgba(0,0,0,0.22) 50%, rgba(255,255,255,0.16) 50%); }
.db-cover::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.db-cover b { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff; }
.db-fore, .db-spine { top: 0; height: var(--h); width: var(--t); left: calc((var(--w) - var(--t)) / 2); }
.db-fore { transform: translateX(calc(var(--w) / 2)) translateZ(calc(var(--t) / 2)) rotateY(90deg); background: repeating-linear-gradient(to right, #EFE8DB 0 1.4px, #D9CFBF 1.4px 2px); filter: brightness(0.78); }
.db-spine { transform: translateX(calc(var(--w) / -2)) translateZ(calc(var(--t) / 2)) rotateY(-90deg); filter: brightness(0.86); }
.db-tail, .db-head { left: 0; width: var(--w); height: var(--t); top: calc((var(--h) - var(--t)) / 2); background: repeating-linear-gradient(to bottom, #EFE8DB 0 1.4px, #D9CFBF 1.4px 2px); }
.db-tail { transform: translateY(calc(var(--h) / 2)) translateZ(calc(var(--t) / 2)) rotateX(-90deg); filter: brightness(0.92); }
.db-head { transform: translateY(calc(var(--h) / -2)) translateZ(calc(var(--t) / 2)) rotateX(90deg); filter: brightness(0.7); }
.favs { margin-top: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fav { position: relative; margin: 0; padding-left: 16px; }
.fav-rank { position: absolute; left: -2px; bottom: -6px; z-index: 1; font-family: var(--display); font-size: 46px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,0.9); }
.glass { border-radius: 28px; padding: 20px; background: linear-gradient(to bottom, rgba(255,255,255,0.13), rgba(255,255,255,0.07)); border: 1px solid rgba(255,255,255,0.16); }
.g-title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.g-period { margin: 2px 0 0; font-size: 16px; line-height: 22px; color: rgba(255,255,255,0.72); }
.g-figure { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.g-figure b { font-family: 'Momo Trust Display', var(--sans); font-weight: 400; font-size: 44px; line-height: 52px; }
.g-figure span { font-size: 22px; font-weight: 600; }
.g-tiles { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-tile { border-radius: 18px; padding: 14px; background: rgba(255,255,255,0.08); }
.g-tile b { display: block; font-family: 'Momo Trust Display', var(--sans); font-weight: 400; font-size: 34px; line-height: 40px; }
.g-tile span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.72); }
.g-wall { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 8px; }
.goal { position: relative; width: 180px; height: 180px; margin: 14px auto 4px; }
.goal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.goal-track { stroke: rgba(255,255,255,0.16); }
.goal-arc { stroke: #fff; }
.goal-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.goal-n b { font-family: 'Momo Trust Display', var(--sans); font-weight: 400; font-size: 36px; line-height: 1; }
.goal-n span { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,0.72); }
.pf-lately .post { background: linear-gradient(to bottom, rgba(255,255,255,0.13), rgba(255,255,255,0.07)); border: 1px solid rgba(255,255,255,0.16); border-radius: 28px; margin-top: 12px; }
.pf-private { text-align: center; padding: 50px 20px; color: rgba(255,255,255,0.72); }
.pf-private svg { width: 52px; height: 52px; display: block; margin: 0 auto 14px; color: #fff; }
.pf-private h3 { margin: 0; font-size: 22px; color: #fff; }
.pf-private p { margin: 8px auto 0; max-width: 320px; }
.dock-late { transform: translateY(110%); transition: transform 0.45s var(--ease); }
.dock-late.in { transform: none; }

/* The profile's last word: everything else lives in the app. */
.pf-more { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 28px; background: rgba(255,255,255,0.92); color: var(--on-white); }
.pf-more img { width: 44px; height: 44px; border-radius: 11px; }
.pf-more b { display: block; font-size: 17px; }
.pf-more span { display: block; font-size: 14px; opacity: 0.75; }

.tab-raster { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
/* The rest of a profile, kept for the app: drawn, frosted, fading out, one card on it. */
.pf-gate { position: relative; }
.pf-kept { display: grid; gap: 16px; max-height: 760px; overflow: hidden; filter: blur(14px) saturate(1.1); opacity: 0.75; pointer-events: none; user-select: none; -webkit-mask: linear-gradient(to bottom, #000 30%, transparent 92%); mask: linear-gradient(to bottom, #000 30%, transparent 92%); }
.pf-unlock { position: absolute; left: 0; right: 0; top: 70px; margin: 0 auto; max-width: 360px; padding: 28px 24px 26px; border-radius: 28px; text-align: center; background: linear-gradient(to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.pf-unlock img { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px; }
.pf-unlock h3 { margin: 0; font-size: 22px; line-height: 28px; }
.pf-unlock p { margin: 8px 0 20px; color: rgba(255,255,255,0.78); font-size: 15px; }