/* Heretofore · website
   Paper by day, Lamplight by night. The Atlas's own chrome over the map:
   Liquid Glass, translucent and blurred with a hairline rim and a specular
   line along the top, in the sizes the app draws it. IM Fell English for
   every word. The map's clouds between the panels, and the app's creatures
   taking turns peeking from them. */

@font-face {
  font-family: "IM Fell English";
  src: url("fonts/IMFeENrm28P.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("fonts/IMFeENit28P.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Paper */
  --paper: #F4ECDD;
  --paper-deep: #E8DCC3;
  --plate: #FBF6EA;
  --ink: #241C14;
  --ink-soft: #5F5245;
  --ink-faint: #8E7F6D;
  --rule: rgba(36, 28, 20, 0.22);
  --hair: rgba(36, 28, 20, 0.12);
  --oxblood: #AC2D2A; /* the app's red on paper (theme.button), bright enough to read as an accent against the ink */
  --gilt: #AE8132;
  --cream: #FBF6EA;
  --plum: #8B3F8F;
  /* the badge generator's tokens (heretofore-badges) */
  --badge: #FDF9EF; --pleat: #E8DCC3; --verdigris: #2E6B66; --gilt-hi: #E7C160; --indigo: #2F4468; --madder: #B4432F;
  --wax-hi: rgba(255, 255, 255, 0.28); --emboss-hi: rgba(255, 255, 255, 0.95); --emboss-lo: rgba(36, 28, 20, 0.42); --on-gilt: #3A2A0E;
  --sans: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --serif: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --map-paper: #F5EDDE;
  --glow: rgba(139, 63, 143, 0.28);
  /* Liquid Glass */
  --glass-fill: rgba(251, 246, 234, 0.1);
  --glass-fill-strong: rgba(251, 246, 234, 0.22);
  --glass-rim: rgba(36, 28, 20, 0.16);
  --glass-shine: rgba(255, 255, 255, 0.6);
  --glass-shade: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 8px 28px rgba(36, 28, 20, 0.14);
  --glass-blur: 5px;
  /* the find panel's tinted glass and the ink on it (theme.button / theme.onButton) */
  --button-tint: rgba(172, 45, 42, 0.34);
  --on-button: #241C14;
  --knob: #FBF6EA;
  --seal-fill: rgba(123, 45, 42, 0.56);
  --shadow: 0 18px 50px rgba(36, 28, 20, 0.16), 0 2px 6px rgba(36, 28, 20, 0.08);
  --shadow-soft: 0 8px 26px rgba(36, 28, 20, 0.12);
  --fell: "IM Fell English", "Iowan Old Style", "Palatino", Georgia, serif;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --press: cubic-bezier(0.34, 1.7, 0.42, 1);
  --gutter: clamp(16px, 4vw, 44px);
  --seam: clamp(96px, 10vw, 136px);
}

.is-dark-page {
  color-scheme: dark;
  --paper: #15110D;
  --paper-deep: #0F0C09;
  --plate: #231416;
  --ink: #EBDFC8;
  --ink-soft: #B5A68F;
  --ink-faint: #847660;
  --rule: rgba(235, 223, 200, 0.22);
  --hair: rgba(235, 223, 200, 0.12);
  --oxblood: #B94F49;
  --gilt: #D3A755;
  --plum: #BF78C2;
  --badge: #3B2E22; --pleat: #6A5847; --verdigris: #64A9A1; --gilt-hi: #F0D07A; --indigo: #3A5385; --madder: #D06046;
  --wax-hi: rgba(255, 255, 255, 0.22); --emboss-hi: rgba(255, 255, 255, 0.3); --emboss-lo: rgba(0, 0, 0, 0.75);
  --map-paper: #3a3a3a;
  --glow: rgba(255, 185, 46, 0.26);
  --glass-fill: rgba(24, 16, 14, 0.12);
  --glass-fill-strong: rgba(24, 16, 14, 0.26);
  --glass-rim: rgba(255, 255, 255, 0.13);
  --glass-shine: rgba(255, 255, 255, 0.12);
  --glass-shade: rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  --button-tint: rgba(185, 79, 73, 0.34);
  --on-button: #EBDFC8;
  --knob: #231416;
  --seal-fill: rgba(185, 79, 73, 0.5);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.4);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fell);
  font-size: 1.1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.08 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  mix-blend-mode: multiply;
}
.is-dark-page body::before { mix-blend-mode: screen; opacity: 0.18; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--oxblood); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -0.005em; overflow-wrap: anywhere; }
p { margin: 0 0 1em; }
button { font-family: inherit; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); position: relative; z-index: 1; }

/* spaced capitals, as the app's PlateLabel does */
.folio { font-family: var(--fell); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: var(--ink-soft); max-width: 36em; }
.lede strong { font-weight: 400; color: var(--ink); }
.h1 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.08; text-wrap: balance; }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.06; max-width: 16em; text-wrap: balance; }
.h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.eyebrow { display: block; margin-bottom: 0.8rem; }
.rule-fleuron { display: flex; align-items: center; gap: 12px; margin: 0.9rem 0 1.1rem; max-width: 22em; }
.rule-fleuron::before, .rule-fleuron::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.rule-fleuron span { width: 7px; height: 7px; background: var(--gilt); transform: rotate(45deg); display: block; flex: none; }
/* the app's KindBadge: an outlined capsule in spaced capitals */
.kind-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px 3px 7px; color: var(--ink-soft); margin: 0 6px 6px 0; }
.kind-badge svg { width: 13px; height: 13px; }
.kind-badge.primary { color: var(--oxblood); border-color: var(--oxblood); }

/* ---------- Liquid Glass ---------- */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow);
}
.glass.strong { background: var(--glass-fill-strong); }

/* small glass buttons; the seal carries the app's prominent tint */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--fell); font-size: 0.95rem; line-height: 1; color: var(--ink);
  padding: 0.62em 1.15em; border-radius: 999px; border: 1px solid var(--glass-rim);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(4px) saturate(1.35); backdrop-filter: blur(4px) saturate(1.35);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-shade), 0 2px 10px rgba(36, 28, 20, 0.1);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transform: scale(1); -webkit-tap-highlight-color: transparent;
  transition: transform 360ms var(--press), background 300ms ease, border-color 300ms ease;
}
.btn:hover { background: var(--glass-fill-strong); border-color: var(--rule); }
.btn:active { transform: scale(0.94); transition: transform 90ms ease-out; }
.btn.small { font-size: 0.86rem; padding: 0.5em 0.95em; }
.btn.seal { color: var(--cream); background: var(--seal-fill); border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 14px rgba(123, 45, 42, 0.28); }
.btn.seal:hover { background: rgba(123, 45, 42, 0.72); }
.is-dark-page .btn.seal:hover { background: rgba(185, 79, 73, 0.66); }

/* the app's segmented picker, on glass */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
.seg button { font-family: var(--fell); font-size: 0.9rem; color: var(--ink-soft); background: transparent; border: 0; border-radius: 999px; padding: 6px 13px; cursor: pointer; white-space: nowrap; transition: background 200ms ease, color 200ms ease; }
.seg button:hover { color: var(--ink); background: var(--hair); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--cream); background: var(--seal-fill); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.seg.small { background: var(--hair); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.seg.small button { font-size: 0.82rem; padding: 4px 10px; }

/* ---------- nav: a floating glass pill ---------- */
.nav {
  position: fixed; z-index: 100; top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1180px; height: 60px;
  display: flex; align-items: center; gap: 2px; padding: 0 12px 0 20px;
  border-radius: 999px;
}
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(4px) saturate(1.3); backdrop-filter: blur(4px) saturate(1.3);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow);
  transition: box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}
.nav.scrolled::after { background: var(--glass-fill-strong); border-color: var(--rule); }
/* by lamplight the glass is thin over a bright map, so its light text carries a faint shadow instead of more fill */
.is-dark-page .nav::after { background: var(--glass-fill-strong); }
.is-dark-page .nav, .is-dark-page .glass { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.brand { margin-right: auto; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--ink); }
/* the app icon beside the name, the way iOS rounds it; by lamplight the dark one */
.brand-icon { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.brand .icon-dark { display: none; }
.is-dark-page .brand .icon-light { display: none; }
.is-dark-page .brand .icon-dark { display: block; }
/* the links are set in the ink, a size up from the chrome's small type, so they read against the map's glass */
.nav-link {
  color: var(--ink); text-decoration: none; font-size: 1rem; letter-spacing: 0.01em;
  border-radius: 999px; padding: 7px 13px;
  transform: scale(1); -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, background 300ms ease, transform 360ms var(--press);
}
.nav-link:hover { color: var(--ink); background: var(--hair); }
.nav-link:active { background: var(--rule); transform: scale(0.86); transition: transform 90ms ease-out; }
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; margin: 0 4px; padding: 0; border-radius: 999px;
  border: 1px solid var(--glass-rim); background: none; cursor: pointer; color: var(--ink-soft);
  transition: background 300ms ease, border-color 300ms ease, transform 360ms var(--press), color 200ms ease;
}
.theme-btn:hover { background: var(--hair); color: var(--ink); }
.theme-btn:active { transform: scale(0.82); transition: transform 90ms ease-out; }
.theme-btn svg { width: 16px; height: 16px; display: block; }
.theme-btn .tb-sun { display: none; }
.is-dark-page .theme-btn .tb-moon { display: none; }
.is-dark-page .theme-btn .tb-sun { display: block; }
/* Get the app wears the seal's tint, the one prominent button in the chrome */
.nav-cta {
  color: var(--cream); text-decoration: none; font-size: 0.95rem; padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35); background: var(--seal-fill); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 14px rgba(123, 45, 42, 0.28);
  transform: scale(1); -webkit-tap-highlight-color: transparent;
  transition: transform 360ms var(--press), background 300ms ease, border-color 300ms ease;
}
.nav-cta:hover { background: rgba(123, 45, 42, 0.72); }
.is-dark-page .nav-cta:hover { background: rgba(185, 79, 73, 0.66); }
.nav-cta:active { transform: scale(0.9); transition: transform 90ms ease-out; }
@media (max-width: 980px) {
  .nav { top: 10px; width: calc(100% - 20px); height: 52px; padding: 0 8px 0 16px; }
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand-icon { width: 26px; height: 26px; border-radius: 6px; }
  .nav-link { font-size: 0.94rem; padding: 7px 9px; }
  .nav-cta { padding: 8px 13px; font-size: 0.9rem; }
}
@media (max-width: 880px) { .nav-link { display: none; } } /* the seven links wrap below this */

/* ---------- panels and seams ---------- */
.panel { position: relative; }
.panel.paper { background: var(--paper); }
.panel.plate { background: var(--plate); }
.panel.deep { background: var(--paper-deep); }
.seam { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: var(--seam); pointer-events: none; z-index: 2; display: block; }
.panel-inner { padding-top: clamp(48px, 6vw, 72px); padding-bottom: calc(var(--seam) + clamp(28px, 4vw, 48px)); }
.panel-inner.tight { padding-bottom: clamp(48px, 6vw, 72px); }

/* ---------- hero: the headline on paper, the Atlas beside it ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; background: var(--map-paper); }
.hero .hf-atlas { position: absolute; inset: 0; z-index: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* solid only at the far left; the map shows through sooner and the fade is long */
  background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 10%, color-mix(in srgb, var(--paper) 88%, transparent) 22%, color-mix(in srgb, var(--paper) 66%, transparent) 36%, color-mix(in srgb, var(--paper) 30%, transparent) 50%, color-mix(in srgb, var(--paper) 0%, transparent) 62%); }
.hero-wrap { position: relative; z-index: 3; padding-top: 110px; padding-bottom: calc(var(--seam) + 24px); pointer-events: none; }
.hero-copy { max-width: 33rem; pointer-events: auto; }
.hero .h1 { font-size: clamp(1.9rem, 3.1vw, 2.8rem); line-height: 1.12; }
.hero-questions { margin: 0.9rem 0 0; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.35; color: var(--ink); max-width: 30rem; }
.hero-questions em { font-style: italic; color: var(--oxblood); }
.hero .map-above { display: none; }
.hero .lede { margin-top: 0.9rem; font-size: 1.04rem; max-width: 30rem; }
.hero .lede + .lede { margin-top: 0.55rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 1.3rem; }

/* ---------- the map's chrome, as the app draws it ---------- */
/* the toolbar: one glass capsule, 52 wide, items 52 square, 17pt semibold glyphs in a 22 box */
.toolbar-column { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.toolbar { display: flex; flex-direction: column; width: 52px; border-radius: 999px; padding: 0; }
.tb-item, .info-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform 240ms var(--press), background 200ms ease;
}
.tb-item { width: 52px; height: 52px; border-radius: 999px; }
.tb-item svg, .info-btn svg { width: 22px; height: 22px; display: block; }
.tb-item:hover, .info-btn:hover { background: var(--hair); }
.tb-item:active, .info-btn:active { transform: scale(0.9); transition: transform 90ms ease-out; }
.tb-item.searching svg { animation: book-pulse 0.9s ease-in-out infinite; }
@keyframes book-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }

/* ⓘ beside the map's mark, with the credits */
.attribution { position: absolute; right: var(--gutter); bottom: calc(var(--seam) + 16px); z-index: 6; display: flex; align-items: center; gap: 8px; flex-direction: row-reverse; }
.info-btn { width: 40px; height: 40px; border-radius: 999px; }
.info-btn svg { width: 20px; height: 20px; }
.credits-text { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 300ms ease, transform 360ms var(--ease-out); pointer-events: none; text-shadow: 0 0 6px var(--paper); }
.attribution.open .credits-text { opacity: 1; transform: none; pointer-events: auto; }

/* the chosen story */
.story-card {
  position: absolute; right: calc(var(--gutter) + 62px); top: 112px; z-index: 7;
  width: min(100% - 2 * var(--gutter) - 62px, var(--sheet-w, 400px));
  max-height: calc(100% - 112px - var(--seam) - 24px);
  display: flex; border-radius: 20px; padding: 0;
  opacity: 0; transform: translateY(-8px) scale(0.98); visibility: hidden;
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--spring), visibility 0s 0.3s;
}
.story-card.on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.3s var(--ease-out), transform 0.4s var(--spring); }
/* the sheets take the room the hero's copy leaves them, 520px at the least: the room is the width less the copy's
   right edge (the wrap's left padding, which is the gutter or the centred wrap's margin, plus the copy's 33rem),
   less the sheet's own offset from the right (the gutter and the toolbar's 62px) and a 24px gap */
.story-card { --sheet-room: calc(100vw - 33rem - 86px - var(--gutter) - max(var(--gutter), (100vw - 1180px) / 2 + var(--gutter))); }
/* the story's sheet is the wider one; its glass is filled further than the chrome's and its type set a touch larger
   and stroked a hair heavier, since the Fell's thin strokes read poorly over a map */
#story-card { --sheet-w: clamp(520px, var(--sheet-room), 620px); background: color-mix(in srgb, var(--plate) 62%, transparent); }
#story-card .card-scroll { -webkit-text-stroke: 0.3px currentColor; }
/* the lantern hint is set larger: it is the first thing read on the map */
#hint { --sheet-w: clamp(520px, var(--sheet-room), 580px); }
#hint .card-scroll { padding: 18px 22px 16px; }
#hint .claim { font-size: 1.12rem; line-height: 1.5; }
#hint .inline-glyph { width: 18px; height: 18px; vertical-align: -3px; }
.story-card .card-scroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 14px 16px 12px; width: 100%; }
.story-card .card-head { display: flex; align-items: center; gap: 8px; }
.story-card .close { margin-left: auto; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--glass-rim); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.story-card .close svg { width: 12px; height: 12px; }
.story-card h3 { font-size: 1.45rem; margin: 8px 0 2px; line-height: 1.1; }
.story-card .card-place { margin: 0 0 8px; font-size: 0.86rem; color: var(--ink-soft); font-style: italic; }
.story-card .badges { margin: 0; display: flex; flex-wrap: wrap; }
.story-card .claim { margin: 0.6em 0 0; font-size: 1.02rem; line-height: 1.5; }
.story-card .card-more { margin: 0.6em 0 0; font-size: 0.84rem; color: var(--ink-soft); font-style: italic; }
.story-card .src { display: inline; margin-left: 2px; font-size: 0.6rem; line-height: 1.9; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.story-card .src b { font-weight: 400; color: var(--ink); margin-right: 5px; }
.story-card .src.documented { background: var(--hair); }
.story-card .src.tradition b { color: var(--oxblood); }
.story-card .src.open { border-style: dashed; }
.story-card .card-note { margin: 12px 0 0; font-size: 0.74rem; color: var(--ink-soft); font-style: italic; }
.story-card .claim b { font-weight: 400; color: var(--oxblood); }
.story-card .inline-glyph { width: 15px; height: 15px; vertical-align: -3px; color: var(--ink); }
.story-card .hint-arrow { display: inline-block; margin: 0 6px 0 2px; color: var(--oxblood); font-size: 1.1em; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* the cue on the toolbar's Find a Story while the lantern hint is up */
.tb-item.is-cued { background: var(--button-tint); animation: cue 1.6s ease-out infinite; }
@keyframes cue { 0% { box-shadow: 0 0 0 0 rgba(172, 45, 42, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(172, 45, 42, 0); } 100% { box-shadow: 0 0 0 14px rgba(172, 45, 42, 0); } }
/* the badge generator's motion */
.spark { animation: twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.sheen { animation: sheen 5.5s cubic-bezier(.45, 0, .2, 1) infinite; }
.sheen.slow { animation-duration: 9s; }
@keyframes sheen { 0% { transform: translateX(-260px); } 55% { transform: translateX(260px); } 100% { transform: translateX(260px); } }
@media (prefers-reduced-motion: reduce) { .spark, .sheen, .tb-item.is-cued, .story-card .hint-arrow { animation: none !important; opacity: 1; } }
/* the narration: a round play button, the track, and the time */
.player { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--glass-rim); background: var(--glass-fill); }
.player[hidden] { display: none; }
.player .play { width: 40px; height: 40px; border-radius: 999px; flex: none; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--cream); background: var(--seal-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.player .play:disabled { cursor: default; opacity: 0.55; }
.player .play svg { width: 20px; height: 20px; margin-left: 2px; }
.player .play .when-playing, .story-card.playing .play .when-paused { display: none; }
.story-card.playing .play .when-playing { display: block; margin-left: 0; }
.player-body { flex: 1; min-width: 0; }
.player-track { height: 4px; border-radius: 999px; background: var(--hair); overflow: hidden; }
.player-bar { display: block; width: 0; height: 100%; background: var(--oxblood); }
.player-meta { display: block; margin-top: 6px; font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.player-meta b { font-weight: 400; color: var(--ink); }
/* the badge a find earns, and the ladder above it */
/* the featured story's dossier in the sheet: the distance, the sources consulted, the story notes, the request */
.story-card .card-distance { margin: 4px 0 6px; }
.story-card .card-distance b { font-weight: 400; display: flex; align-items: center; gap: 5px; font-size: 1rem; }
.story-card .card-distance b svg { width: 14px; height: 14px; }
.story-card .card-distance i { font-style: normal; display: block; font-size: 0.7rem; color: var(--ink-soft); }
.story-card .dossier { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.story-card .source-list { list-style: none; margin: 6px 0 0; padding: 0; }
.story-card .source-list li + li { border-top: 1px solid var(--hair); }
.story-card .source-list a { display: grid; grid-template-columns: 1.4em 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; text-decoration: none; }
.story-card .source-list .n { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.story-card .source-list .t { font-size: 0.92rem; line-height: 1.3; }
.story-card .source-list .o { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 1px; }
.story-card .source-list .arrow { width: 11px; height: 11px; color: var(--ink-soft); }
.story-card details.dossier > summary, .story-card details.record > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.story-card details > summary::-webkit-details-marker { display: none; }
.story-card details .chev { width: 12px; height: 12px; margin-left: auto; color: var(--ink-soft); transition: transform 0.25s ease; }
.story-card details[open] > summary .chev { transform: rotate(90deg); }
.story-card .notes-intro { margin: 4px 0 12px; font-size: 0.74rem; color: var(--ink-soft); line-height: 1.4; }
.dossier-note { margin: 0 0 14px; }
.dossier-note .mode { font-size: 0.68rem; color: var(--ink-soft); }
.dossier-note .statement { margin: 2px 0 4px; font-size: 0.9rem; line-height: 1.4; }
.dossier-note a { display: block; text-decoration: none; padding: 4px 0; }
.dossier-note a .rel { display: block; font-size: 0.66rem; color: var(--ink-soft); }
.dossier-note a .src-title { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.8rem; line-height: 1.3; }
.dossier-note a .src-title svg { width: 10px; height: 10px; flex: none; align-self: center; }
.story-card .record { margin-top: 4px; }
.story-card .record .dossier-note .statement { color: var(--ink-soft); }
.story-card .card-request { margin: 12px 0 0; font-size: 0.72rem; color: var(--ink-soft); line-height: 1.45; }
.story-card .card-request em { display: block; margin-top: 4px; }
.story-card .claim.now { background: linear-gradient(90deg, rgba(139, 63, 143, 0.1), transparent 75%); border-radius: 6px; }
.player-track { cursor: pointer; }
.earned { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.earned-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.badge-art { flex: none; width: 124px; height: 124px; display: grid; place-items: center; }
.badge-art svg { width: 124px; height: 124px; overflow: visible; }
.earned-text b { font-weight: 400; display: block; font-size: 1.05rem; }
.earned-text i { font-style: normal; display: block; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; margin-top: 3px; }
.earned .ladder { display: flex; justify-content: space-between; align-items: flex-end; gap: 2px; margin-top: 10px; }
.earned .rung { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 4px; }
.earned .rung .art { width: 50px; height: 56px; display: grid; place-items: end center; }
.earned .rung .art svg { width: 50px; height: auto; overflow: visible; }
.earned .rung i { font-style: normal; font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.earned-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; }


@media (max-width: 900px) {
  .hero { --hero-map-height: clamp(360px, 58svh, 520px); min-height: 0; justify-content: flex-start; }
  .hero .hf-atlas { inset: 0 0 auto; height: var(--hero-map-height); }
  /* the map dissolves into paper at both ends: at the top under the status bar and the nav, so it never ends
     in a hard line against the strip Safari paints above the page, and at the bottom into the introduction */
  .hero-scrim { background: linear-gradient(180deg, var(--paper) 0, color-mix(in srgb, var(--paper) 72%, transparent) 34px, transparent 112px, transparent calc(var(--hero-map-height) - 72px), var(--paper) var(--hero-map-height)); }
  .hero-wrap { padding-top: calc(var(--hero-map-height) + 8px); padding-bottom: calc(var(--seam) + 16px); }
  .hero-copy { max-width: none; }
  .hero .h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .hero .lede { font-size: 1rem; line-height: 1.48; }
  .hero-questions { font-size: 1.12rem; }
  .hero .map-beside { display: none; }
  .hero .map-above { display: inline; }
  .toolbar-column { top: 72px; transform: none; right: 12px; }
  .toolbar { width: 44px; }
  .tb-item { width: 44px; height: 44px; }
  .tb-item svg { width: 19px; height: 19px; }
  .attribution { right: 12px; bottom: auto; top: calc(var(--hero-map-height) - 60px); }
  .info-btn { width: 44px; height: 44px; }
  .credits-text { position: absolute; right: 0; bottom: 52px; width: min(320px, calc(100vw - 32px)); white-space: normal; line-height: 1.35; padding: 10px 12px; border-radius: 12px; background: var(--plate); box-shadow: var(--shadow-soft); }
  .story-card { top: 122px; right: 66px; left: 12px; width: auto; max-height: calc(var(--hero-map-height) - 134px); }
  .story-card .card-scroll { padding: 10px 12px 8px; }
  #hint .card-scroll { padding: 12px 14px 10px; }
  #hint .claim { font-size: 1rem; line-height: 1.4; } /* the phone's hint has the map's height to fit in */
  .story-card h3 { font-size: 1.2rem; }
  .earned .rung i { font-size: 0.42rem; letter-spacing: 0.02em; }
}

/* ---------- atlas chrome (shared by every map) ---------- */
.hf-atlas { position: relative; overflow: hidden; background: #F5EDDE; }
.hf-atlas-map, .hf-atlas-clouds { position: absolute; inset: 0; }
.hf-atlas-clouds { pointer-events: none; z-index: 2; }
.hf-atlas .maplibregl-canvas-container, .hf-atlas .maplibregl-canvas { outline: none; }
.hf-atlas .maplibregl-marker { z-index: 3; }
/* MapLibre positions the marker element itself; never set position on .hf-marker */
.hf-marker { display: block; }
.hf-atlas.is-dark { background: #2B2B2B; }
.hf-atlas.is-dark .maplibregl-canvas { filter: brightness(0.6) saturate(0.75) sepia(0.15) contrast(1.05); }
.hf-atlas .maplibregl-cooperative-gesture-screen { font-family: var(--fell); background: rgba(36, 28, 20, 0.35); }
.hf-atlas .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message,
.hf-atlas .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message { background: var(--plate); color: var(--ink); border-radius: 12px; }
.hf-atlas::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 120px rgba(36, 28, 20, 0.12); }
.hf-atlas.is-dark::after { box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.5); }

/* pins: Liquid Glass in the app's PinShape, tinted oxblood, a cream glyph */
.hf-pin {
  --pin: 30px; --k: 0.625;
  position: relative; display: block; width: var(--pin); height: calc(var(--pin) * 1.25);
  border: 0; background: transparent; padding: 0; cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(36, 28, 20, 0.28));
  transition: transform 0.4s var(--spring); transform-origin: 50% 100%;
}
.hf-pin:hover { transform: translateY(-3px) scale(1.06); }
.hf-pin.is-dropping, .hf-disc.is-dropping { animation: pin-drop 0.7s var(--spring) both; }
@keyframes pin-drop { from { transform: translateY(-40px) scale(0.6); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.hf-pin-glass {
  position: absolute; left: 50%; bottom: 0; width: 48px; height: 60px;
  transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 100%;
  clip-path: path("M43.5 36.2A23 23 0 1 0 4.5 36.2L24 60Z");
  background: rgba(123, 45, 42, 0.6);
  -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4);
}
.is-dark .hf-pin-glass { background: rgba(185, 79, 73, 0.62); }
.hf-pin-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hf-pin-rim path { fill: none; stroke: url(#pin-shine); stroke-width: 2.2; }
.hf-pin-glyph { position: absolute; left: 50%; top: calc(var(--pin) * 0.4); width: calc(var(--pin) * 0.52); height: calc(var(--pin) * 0.52); transform: translate(-50%, -50%); color: #FBF6EA; }
.hf-pin.is-selected { transform: translateY(-6px) scale(1.14); filter: drop-shadow(0 8px 10px rgba(36, 28, 20, 0.35)); z-index: 4; }
.hf-pin.is-selected .hf-pin-rim path { stroke: #FFFFFF; stroke-width: 3; }
/* browse mode: every pin carries its title, set beside it where it fits (atlas.js lays them out);
   a story not collected yet stands in ink, a collected one in oxblood, and collecting it bounces the pin */
.hf-pin-label { position: absolute; left: calc(var(--pin) * 1.1); top: calc(var(--pin) * 0.4); transform: translateY(-50%); visibility: hidden; white-space: nowrap; font-family: var(--fell); font-size: 0.74rem; line-height: 12px; padding: 5px 9px; border-radius: 999px; color: var(--ink); background: rgba(251, 246, 234, 0.88); border: 1px solid rgba(36, 28, 20, 0.2); pointer-events: none; }
.hf-pin-label[data-side="right"] { visibility: visible; }
.hf-pin-label[data-side="left"] { visibility: visible; left: auto; right: calc(var(--pin) * 1.1); }
.hf-pin-label[data-side="below"] { visibility: visible; left: 50%; top: calc(var(--pin) * 1.25 + 4px); transform: translateX(-50%); }
.is-dark .hf-pin-label { color: #F3EAD8; background: rgba(43, 43, 43, 0.84); border-color: rgba(255, 255, 255, 0.2); }
.hf-pin.is-unfound .hf-pin-glass { background: rgba(95, 82, 69, 0.52); }
.is-dark .hf-pin.is-unfound .hf-pin-glass { background: rgba(170, 160, 145, 0.48); }
.hf-pin.is-collected { animation: pin-collect 0.7s var(--spring); }
@keyframes pin-collect { 0% { transform: translateY(-6px) scale(1.14); } 45% { transform: translateY(-16px) scale(1.32); } 100% { transform: translateY(-6px) scale(1.14); } }
.hf-pin-area { height: var(--pin); }
.hf-pin-area .hf-pin-badge { position: absolute; inset: 0; border-radius: 999px; background: rgba(123, 45, 42, 0.42); border: 1.4px dashed rgba(251, 246, 234, 0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4); }
.is-dark .hf-pin-area .hf-pin-badge { background: rgba(185, 79, 73, 0.45); }
.hf-pin-area .hf-pin-glyph { top: 50%; }
.hf-pin-area.is-selected .hf-pin-badge { box-shadow: 0 0 0 2px #FFFFFF, inset 0 1px 0 rgba(255,255,255,0.35); }
.hf-disc {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; display: block;
  background: rgba(123, 45, 42, 0.6); color: #FBF6EA; font-family: var(--fell); font-size: 1.05rem; line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px rgba(36, 28, 20, 0.28);
  transition: transform 0.4s var(--spring);
}
.hf-disc:hover { transform: scale(1.08); }
.is-dark .hf-disc { background: rgba(185, 79, 73, 0.62); }
.hf-lantern { pointer-events: none; }
/* the lantern's width follows the zoom (--lantern-w, set by atlas.js); the glow is a little over three of it */
.hf-lantern img { width: var(--lantern-w, 38px); height: auto; filter: drop-shadow(0 2px 3px rgba(36, 28, 20, 0.35)); transition: transform 0.4s var(--spring), filter 0.4s ease; }
.is-carried .hf-lantern img { transform: translateY(-18px) rotate(-6deg) scale(1.08); filter: drop-shadow(0 22px 10px rgba(36, 28, 20, 0.3)); }
.is-carried .hf-lantern-glow { opacity: 0.35; }
.hf-lantern-glow { width: calc(var(--lantern-w, 38px) * 3.3); height: calc(var(--lantern-w, 38px) * 3.3); border-radius: 999px; pointer-events: none; background: radial-gradient(circle, var(--glow) 0%, rgba(0,0,0,0) 65%); animation: lantern-breathe 4.5s ease-in-out infinite; }
@keyframes lantern-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hf-lantern-glow, .frame-caption .dot, .tb-item.searching svg { animation: none; } }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.on { animation: rise 0.9s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .reveal.on { animation: none; } }

/* ---------- atlas section ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.frame { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--hair); background: var(--plate); }
/* the map box is clipped on its own account: Safari lets a WebGL canvas (and a video) escape an ancestor's rounded
   overflow: hidden, so the map showed square corners under the clouds' rounded ones; a clip-path it honours */
.frame .hf-atlas { aspect-ratio: 1 / 1; width: 100%; border-radius: 21px; clip-path: inset(0 round 21px); isolation: isolate; }
.frame-caption { position: absolute; left: 14px; bottom: 14px; z-index: 7; border-radius: 999px; padding: 7px 12px 7px 10px; font-size: 0.82rem; color: var(--ink-soft); max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 8px; }
.frame-caption .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--plum); box-shadow: 0 0 0 3px var(--glow); flex: none; animation: bearing-pulse 1.6s ease-in-out infinite; }
.frame-caption.still .dot { animation: none; }
@keyframes bearing-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* beside a two-column map the copy says where the map is; on a phone it is below */
.two-col .map-below { display: none; }
@media (max-width: 900px) {
  .two-col .map-beside { display: none; }
  .two-col .map-below { display: inline; }
  .two-col.flip .frame { order: 2; }
}

/* the couch section's two ways, one with each subscription */
.way-seg { margin-top: 1.2rem; flex-wrap: wrap; max-width: 100%; }
/* the browse, road trip and audiobook maps run the height of their text instead of floating beside the middle of it */
@media (min-width: 901px) {
  #browse .two-col, #roadtrip .two-col, #listen .two-col.way { align-items: stretch; }
  #browse .frame, #roadtrip .frame, #listen .way .frame { display: flex; flex-direction: column; }
  #browse .frame .hf-atlas, #roadtrip .frame .hf-atlas, #listen .way .frame .hf-atlas { aspect-ratio: auto; flex: 1; min-height: 420px; }
}
.way-seg button { font-size: 0.92rem; padding: 7px 14px; }
.way { margin-top: clamp(20px, 3vw, 32px); }
.way[hidden] { display: none; }
.way .lede { margin-top: 0.5rem; }

.vig-cards { display: grid; gap: 10px; }
.vig-card { background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; padding: 11px 13px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }
.vig-card .stamp { width: 34px; height: 34px; border-radius: 999px; border: 1.2px solid var(--ink); display: grid; place-items: center; color: var(--ink); position: relative; }
.vig-card .stamp::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; border: 1px dotted var(--ink-faint); }
.vig-card .stamp svg { width: 18px; height: 18px; }
.vig-card b { font-weight: 400; display: block; font-size: 1.02rem; line-height: 1.15; }
.vig-card i { color: var(--ink-soft); font-size: 0.86rem; }
.vig-card.dim { opacity: 0.55; transform: scale(0.97); }
.vig-capsule { border-radius: 999px; padding: 7px 9px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.vig-capsule.faint { opacity: 0.75; }
.frame-capsule { position: absolute; left: 14px; bottom: 14px; z-index: 7; max-width: min(360px, calc(100% - 28px)); }
.frame-capsule .label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#browse-capsule .label span { white-space: normal; line-height: 1.25; } /* its lines are sentences; on a phone they wrap */
.vig-capsule .glyph { width: 32px; height: 32px; border-radius: 999px; background: var(--button-tint); color: var(--on-button); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 var(--glass-shine); }
.vig-capsule .glyph svg { width: 16px; height: 16px; }
.vig-capsule .label { flex: 1; font-size: 0.92rem; min-width: 0; overflow-wrap: anywhere; }
.vig-capsule .label i { display: block; font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; }
.vig-capsule .x { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--ink-soft); flex: none; }
.vig-capsule .x svg { width: 11px; height: 11px; }
/* the runs: a road trip and an audiobook mode set, played whole from their sections;
   the track is the run's chapters, the host in plum, the stories in oxblood, the waits in hairline */
.run { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.run-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.run-len { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* under the track: the time and what is playing, and at the right the volume, a speaker that mutes and a short slider, one setting for every player on the page */
.run-under { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 4px; }
.run-under .run-meta { margin-top: 2px; flex: 1; min-width: 0; }
.run-vol { display: flex; align-items: center; gap: 4px; flex: none; }
.run-vol .mute { width: 26px; height: 26px; border: 0; padding: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.run-vol .mute:hover { color: var(--ink); background: var(--hair); }
.run-vol .mute svg { width: 17px; height: 17px; }
.run-vol .when-muted, .run.muted .run-vol .when-loud { display: none; }
.run.muted .run-vol .when-muted { display: block; }
.run-vol input { -webkit-appearance: none; appearance: none; width: 84px; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.run-vol input::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--oxblood) var(--vol, 100%), var(--hair) var(--vol, 100%)); }
.run-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 999px; background: var(--seal-fill); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.run-vol input::-moz-range-track { height: 3px; border-radius: 999px; background: var(--hair); }
.run-vol input::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--oxblood); }
.run-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: var(--seal-fill); border: 1px solid rgba(255, 255, 255, 0.5); }
.run.muted .run-vol input { opacity: 0.45; }
@media (max-width: 900px) { .run-vol input { width: 64px; } }
.run-player { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.run-player .play { width: 40px; height: 40px; border-radius: 999px; flex: none; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--cream); background: var(--seal-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.run-player .play svg { width: 20px; height: 20px; margin-left: 2px; }
.run-player .play .when-playing, .run.playing .play .when-paused { display: none; }
.run.playing .play .when-playing { display: block; margin-left: 0; }
.run-body { flex: 1; min-width: 0; }
.run-track { display: flex; gap: 2px; height: 6px; cursor: pointer; }
.run-seg { flex: 0 1 0; min-width: 3px; border-radius: 999px; overflow: hidden; background: var(--hair); }
.run-seg.story { background: color-mix(in srgb, var(--oxblood) 22%, transparent); }
.run-seg.host { background: color-mix(in srgb, var(--plum) 22%, transparent); }
.run-fill { display: block; width: 0; height: 100%; background: var(--ink-faint); }
.run-seg.story .run-fill { background: var(--oxblood); }
.run-seg.host .run-fill { background: var(--plum); }
.run-meta { display: block; margin-top: 6px; font-size: 0.74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.run-meta b { font-weight: 400; color: var(--ink); }
.run-list { list-style: none; margin: 10px 0 0; padding: 0; }
.run-list button { width: 100%; display: grid; grid-template-columns: 2.6em 7px 1fr; gap: 8px; align-items: baseline; text-align: left; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 0.84rem; line-height: 1.3; cursor: pointer; }
.run-list button:hover { background: var(--hair); color: var(--ink); }
.run-list button.on { color: var(--ink); background: color-mix(in srgb, var(--plum) 10%, transparent); }
.run-t { font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.run-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-faint); align-self: start; margin-top: 0.4em; }
.run-dot.story { background: var(--oxblood); }
.run-dot.host { background: var(--plum); }
.run .run-note { margin: 8px 0 0; font-size: 0.7rem; color: var(--ink-faint); line-height: 1.4; }
/* claims, each mapped to the sources under it */

/* ---------- field notes and themes ---------- */
/* the Library and the Passport */
.keep-row { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--hair); }
.keep-row.two-col { align-items: center; }
.keep-row .lede { margin-top: 0; }
.lib-vig { background: var(--paper); border: 1px solid var(--hair); border-radius: 22px; padding: 16px; box-shadow: var(--shadow-soft); display: grid; gap: 12px; }
.lib-search { display: flex; align-items: center; gap: 10px; border-radius: 999px; padding: 9px 14px; font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.lib-search svg { width: 16px; height: 16px; flex: none; }
.lib-search span { overflow: hidden; text-overflow: ellipsis; }
.lib-vig .vig-card { background: var(--plate); grid-template-columns: 34px 1fr auto; }
.lib-vig .vig-card .unheard { width: 8px; height: 8px; border-radius: 999px; background: var(--oxblood); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oxblood) 18%, transparent); }
.lib-foot { font-size: 0.78rem; color: var(--ink-soft); padding: 0 4px; }
.fine { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; margin: 12px 0 0; }
.keep-row .lede sup { font-size: 0.6em; color: var(--ink-soft); }
.badge-plate { margin-top: 18px; background: var(--paper); border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; }
.badge-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.badge-cell { padding: clamp(18px, 2.4vw, 26px) 12px 16px; display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.badge-cell + .badge-cell { border-left: 1px solid var(--hair); }
.badge-cell svg { width: 128px; height: auto; overflow: visible; }
.badge-cell b { font-weight: 400; font-family: var(--fell); font-size: 1.05rem; line-height: 1.15; }
.badge-ladder { border-top: 1px solid var(--hair); padding: 14px clamp(16px, 2.4vw, 26px) 16px; background: color-mix(in srgb, var(--plate) 55%, var(--paper)); }
.badge-ladder > .folio { display: block; margin-bottom: 10px; }
.ladder-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.ladder-row .rung { display: grid; justify-items: center; gap: 5px; min-width: 0; text-align: center; }
.ladder-row .rung .art { width: 100%; max-width: 72px; display: grid; place-items: end center; }
.ladder-row .rung .art svg { width: 100%; height: auto; overflow: visible; }
.ladder-row .rung b { font-weight: 400; font-family: var(--fell); font-size: 0.86rem; line-height: 1.15; }
.ladder-row .rung i { font-style: normal; font-size: 0.68rem; color: var(--ink-soft); line-height: 1.3; }
.companions { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; margin-top: 18px; }
.companion { appearance: none; background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 8px 4px 7px; display: grid; justify-items: center; gap: 4px; cursor: pointer; color: var(--ink-soft); font-family: var(--fell); font-size: 0.78rem; line-height: 1.15; text-align: center; transition: transform 0.35s var(--spring), border-color 200ms ease, background 200ms ease; -webkit-tap-highlight-color: transparent; }
.companion img { width: 52px; height: 52px; display: block; }
.companion:hover { transform: translateY(-2px); border-color: var(--rule); }
.companion[aria-checked="true"] { border-color: var(--oxblood); color: var(--ink); background: color-mix(in srgb, var(--oxblood) 7%, var(--paper)); }
.companion-photo { position: relative; background: var(--paper); border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow-soft); padding: 24px; display: grid; place-items: center; }
.companion-photo img { width: min(100%, 300px); height: auto; display: block; }
.companion-plate { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 2px; }
.companion-plate b { font-weight: 400; font-family: var(--fell); font-size: 1.2rem; }
@media (max-width: 900px) {
  .badge-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge-cell:nth-child(3) { border-left: 0; }
  .badge-cell:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .ladder-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
}

/* the plans: one plate, four columns; a phone shows one plan at a time, chosen by the tabs */
.plan-seg { margin-top: 1.2rem; flex-wrap: wrap; max-width: 100%; display: none; }
.plans { margin-top: clamp(20px, 3vw, 28px); background: var(--plate); border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; }
.plans-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plans-table th, .plans-table td { text-align: left; vertical-align: top; padding: 13px 16px; border-top: 1px solid var(--hair); font-size: 0.93rem; line-height: 1.4; }
.plans-table thead th { border-top: 0; padding: clamp(18px, 2.4vw, 26px) 16px 16px; vertical-align: top; }
.plans-table thead th b { display: block; font-weight: 400; font-family: var(--fell); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.1; }
.plans-table thead th i { display: block; font-style: normal; color: var(--ink); margin-top: 6px; font-size: 0.95rem; }
.plans-table thead th i { font-size: 1.15rem; }
.plans-table thead th i em { display: block; font-style: normal; color: var(--ink-soft); font-size: 0.8rem; margin-top: 2px; }
.plans-table thead th i em.deal { color: var(--oxblood); }
.plans-table thead th span { display: block; color: var(--ink-soft); font-size: 0.86rem; margin-top: 8px; }
.plans-table .plans-corner { width: 19%; }
.plans-table tbody th { font-family: var(--fell); font-weight: 400; color: var(--ink); font-size: 1rem; }
.plans-table tbody td { color: var(--ink-soft); }
.plans-table [data-tier="wayfarer"] { background: color-mix(in srgb, var(--oxblood) 6%, transparent); }
.plans-table .no { color: var(--ink-faint); }
.plans-table .yes { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.plans-table .yes svg { width: 15px; height: 15px; color: var(--oxblood); }
.plans-table td small { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.plans-table td sup { font-size: 0.7em; color: var(--ink-soft); }
.plans-note { padding: 12px 16px 14px; border-top: 1px solid var(--hair); margin: 0; }
@media (max-width: 760px) {
  .plan-seg { display: inline-flex; }
  .plans-table .plans-corner { width: 44%; }
  .plans-table th[data-tier], .plans-table td[data-tier] { display: none; }
  .plans-table[data-show="free"] [data-tier="free"], .plans-table[data-show="trial"] [data-tier="trial"], .plans-table[data-show="explorer"] [data-tier="explorer"], .plans-table[data-show="wayfarer"] [data-tier="wayfarer"] { display: table-cell; }
}

/* the stories: the genre groups, how the stories are made, and the sample dossier */
.two-col.lead-row { align-items: center; margin-top: 4px; }
.ship-group { min-width: 0; }
.genre-groups { display: grid; gap: clamp(22px, 3vw, 32px); margin-top: clamp(28px, 4vw, 44px); }
.genre-group { padding-top: clamp(18px, 2.5vw, 24px); border-top: 1px solid var(--hair); }
.group-folio { display: block; margin-bottom: 14px; }
.lede.wide { max-width: 60em; }
.genre-group .lede { margin: 0 0 20px; }
.genres.ship { grid-template-columns: repeat(3, minmax(0, 170px)); gap: 16px 8px; }
.genres.ship .genre { font-size: 0.94rem; gap: 10px; }
.genres.ship .genre .disc { width: 64px; height: 64px; }
.genres.ship .genre .disc::after { inset: 4px; }
.genres.ship .genre .disc svg { width: 30px; height: 30px; }
.genre .disc.next { color: var(--gilt); border-color: var(--gilt); }
.genre .tag { display: block; font-style: normal; font-family: var(--fell); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gilt); margin-top: 3px; }
.made { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--hair); }
.made > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; -webkit-tap-highlight-color: transparent; }
.made > summary::-webkit-details-marker { display: none; }
.made > summary:hover .folio, .made > summary:hover .plus { color: var(--ink); border-color: var(--ink); }
/* a plus in a ring before the label; it becomes a minus while the section is open */
.made > summary .plus { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 999px; border: 1.2px solid var(--ink-soft); color: var(--ink-soft); transition: color 200ms ease, border-color 200ms ease; }
.made > summary .plus .v { transition: opacity 200ms ease; }
.made[open] > summary .plus .v { opacity: 0; }
/* one plate, three cells and a footer: the steps the stories go through, and the small print under them */
.process-pitch { margin: 12px 0 0; max-width: 46em; }
.process { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--plate); border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; }
.process-step { padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 26px); min-width: 0; }
.process-step + .process-step { border-left: 1px solid var(--hair); }
.process-step .folio { display: block; color: var(--gilt); margin-bottom: 10px; }
.process-step h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 400; margin: 0 0 8px; line-height: 1.1; }
.process-step p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.5; }
.caveat { margin-top: clamp(22px, 3vw, 32px); max-width: 60em; display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 12px 16px 12px 12px; }
.caveat p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.notice-glyph { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 1.2px solid var(--oxblood); color: var(--oxblood); display: grid; place-items: center; }
.notice-glyph svg { width: 18px; height: 18px; }
.dossier-row { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--hair); }
.dossier-row .lede { margin: 0 0 20px; }
@media (max-width: 760px) {
  .process { grid-template-columns: 1fr; }
  .process-step + .process-step { border-left: 0; border-top: 1px solid var(--hair); }
}
.dossier-sample { background: var(--plate); border: 1px solid var(--hair); border-radius: 16px; padding: 18px 20px 14px; box-shadow: var(--shadow-soft); }
.dossier-sample h3 { font-size: 1.3rem; font-weight: 400; margin: 2px 0 12px; line-height: 1.15; }
#dossier-sample-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.dossier-sample .dossier-note { padding-top: 10px; border-top: 1px solid var(--hair); margin-bottom: 8px; }
.dossier-sample .dossier-note .statement { font-size: 0.95rem; }
.dossier-sample .dossier-note a .src-title { font-size: 0.84rem; }
.dossier-sample-foot { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 760px) { #dossier-sample-notes { grid-template-columns: 1fr; } } /* after the three-column rule, which it must outrank */
.genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 8px; }
.genre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 0.78rem; line-height: 1.15; color: var(--ink-soft); min-width: 0; }
.genre .disc { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); border: 1.2px solid var(--ink); position: relative; transition: transform 0.35s var(--spring); }
.genre .disc::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; border: 1px dotted var(--ink-faint); }
.genre:hover .disc { transform: translateY(-3px) rotate(-6deg); }
.genre .disc svg { width: 20px; height: 20px; }
.genre .disc.stamp { color: var(--oxblood); border-color: var(--oxblood); }

/* ---------- get the app ---------- */
/* the closing panel is short: it is a sign-off, not a section, and the footer follows it */
#get .panel-inner { padding-top: 40px; padding-bottom: 36px; }
.get { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.get .h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.get .cta-row { margin-top: 0.5rem; }
.get .icon { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
/* the invitation to write, under the App Store button: a line and a small glass button to support@corvie.app */
.get .write { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; }
.btn.small { font-size: 0.86rem; padding: 0.5em 0.95em 0.5em 0.85em; }
.btn.small svg { width: 15px; height: 15px; }
.get .icon img { width: 100%; height: 100%; }
.get .icon .icon-dark { display: none; }
.is-dark-page .get .icon .icon-light { display: none; }
.is-dark-page .get .icon .icon-dark { display: block; }
.get .lede { margin: 0 auto; }
.fireflies { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- footer ---------- */
.footer { padding: 12px 0 16px; color: var(--ink-soft); font-size: 0.88rem; border-top: 1px solid var(--hair); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.footer .brand { font-size: 1rem; margin-right: 0; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }
.footer .copy { margin-left: auto; }
.footer .credits { width: 100%; font-size: 0.72rem; line-height: 1.35; color: var(--ink-faint); }

/* ---------- privacy and terms pages ---------- */
.prose { max-width: 42em; padding-top: 120px; padding-bottom: 80px; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 1rem; }
.prose h2 { font-size: 1.6rem; margin: 2rem 0 0.6rem; }
.prose h3 { font-size: 1.15rem; margin: 1.4rem 0 0.4rem; }
/* an in-page anchor lands clear of the fixed nav */
.prose h2, .prose h3 { scroll-margin-top: 96px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose li { margin-bottom: 0.4em; }
.prose .short { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.prose .short li { position: relative; padding-left: 1.1em; }
.prose .short li::before { content: "◆"; position: absolute; left: 0; top: 0.3em; font-size: 0.55em; color: var(--oxblood); }
/* the contents list at the head of a long page */
.prose .toc { list-style: none; padding: 0; margin: 0.2rem 0 1.6rem; columns: 2; column-gap: 2rem; font-size: 0.95rem; }
.prose .toc li { break-inside: avoid; margin-bottom: 0.25em; }
.prose .toc a { text-decoration-color: var(--hair); }
/* a plain table: who sees what, the plans */
.prose table { width: 100%; border-collapse: collapse; margin: 0.8rem 0 1.4rem; font-size: 0.92rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.5rem 0.8rem 0.5rem 0; border-bottom: 1px solid var(--hair); color: var(--ink-soft); }
.prose th { color: var(--ink); font-weight: 400; }
.prose thead th { font-family: var(--fell); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--rule); }
.prose td b { font-weight: 400; color: var(--ink); }
.prose .dated { margin-top: 2rem; }
/* the FAQ: each question folds, closed until opened, behind the home page's ringed plus */
.faq-list { margin-top: 1.6rem; border-bottom: 1px solid var(--hair); }
.qa { border-top: 1px solid var(--hair); }
.qa > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 0.85rem 0; -webkit-tap-highlight-color: transparent; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.qa > summary .plus { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 999px; border: 1.2px solid var(--ink-soft); color: var(--ink-soft); transition: color 200ms ease, border-color 200ms ease; }
.qa > summary:hover h2, .qa > summary:hover .plus { color: var(--ink); border-color: var(--ink); }
.qa > summary .plus .v { transition: opacity 200ms ease; }
.qa[open] > summary .plus .v { opacity: 0; }
.qa > p { margin: 0 0 1.1rem; padding-left: 34px; }
@media (max-width: 600px) {
  .prose .toc { columns: 1; }
  /* each row stands on its own, every cell labelled by its column */
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tr { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
  .prose th, .prose td { border: 0; padding: 0.15rem 0; }
  .prose td::before { content: attr(data-th); display: block; font-family: var(--fell); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.3rem; }
}