/* metime.ink story pages: /stories/<slug>/ and /stories/ (scripts/build_site.py, from the shelf export), on top of
   landing.css and pages.css. After the mockup "Public story page" (desktop and phone): the story on the left, a short
   pitch and more like this on the right; chapter 1, then the three choices that lead to sign-up. No inline styles: the
   page's CSP allows only this origin's stylesheets. */
/* The typographic cover (no cover pictures yet): a matchbook card under a lamp, a brass frame, the title set in the
   condensed display face, a neon rule, and a key tag with the story's room number. Five colourways (.cv-v0..4), picked
   by room number. The same rules live in site/landing/stories.css and web/src/screens/shelfReader.css: keep them in step. */
.cv { position: relative; z-index: 0; display: flex; flex-direction: column; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; padding: 18px 15px 14px; border-radius: 14px; container-type: inline-size;
  --cv-glow: rgba(233, 163, 91, .42); --cv-top: #2A1A10; --cv-neon: #E9A35B;
  background: radial-gradient(130% 70% at 50% -8%, var(--cv-glow), rgba(0, 0, 0, 0) 66%), linear-gradient(172deg, var(--cv-top) 0%, #130D09 58%, #0B0807 100%);
  box-shadow: inset 0 0 0 1px rgba(240, 215, 166, .14), 0 30px 60px -30px rgba(0, 0, 0, .9); color: #F6EDE0; }
.cv::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(240, 215, 166, .2); border-radius: 10px; pointer-events: none; }
.cv::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(246, 237, 224, .022) 0 1px, rgba(0, 0, 0, 0) 1px 11px); pointer-events: none; }
.cv-v1 { --cv-glow: rgba(255, 106, 77, .34); --cv-top: #2B1410; --cv-neon: #FF6A4D; }
.cv-v2 { --cv-glow: rgba(240, 215, 166, .3); --cv-top: #251C12; --cv-neon: #F0D7A6; }
.cv-v3 { --cv-glow: rgba(235, 165, 149, .34); --cv-top: #2A1716; --cv-neon: #EBA595; }
.cv-v4 { --cv-glow: rgba(155, 59, 38, .6); --cv-top: #2A110B; --cv-neon: #F2B878; }
.cv-glow { position: absolute; left: 50%; top: -2px; width: 34%; height: 3px; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: var(--cv-neon); opacity: .55; box-shadow: 0 0 18px 4px var(--cv-glow); }
.cv-mark { font: 600 9px/1.2 "Archivo", system-ui, sans-serif; font-size: max(8px, 4.6cqw); font-stretch: 85%; letter-spacing: .26em; text-transform: uppercase; color: rgba(240, 215, 166, .72); }
.cv-t { margin-top: auto; font: 500 22px/.9 "Archivo", system-ui, sans-serif; font-size: 17.5cqw; font-stretch: 64%; letter-spacing: .01em; text-transform: uppercase; color: #F8EFE3; overflow-wrap: break-word; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.cv-rule { display: block; width: 32%; height: 2px; margin: 9px 0 10px; border-radius: 2px; background: var(--cv-neon); box-shadow: 0 0 10px var(--cv-neon); }
.cv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cv-key { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px 7px 7px 999px; background: linear-gradient(180deg, #F0D7A6, #9C7543); color: #2E1D0A;
  font: 700 9px/1 "Archivo", system-ui, sans-serif; font-size: max(8px, 4.4cqw); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cv-hole { width: 6px; height: 6px; border-radius: 50%; background: #130D09; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.cv-tag { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: italic 400 11px/1.2 "Brygada 1918", Georgia, serif; font-size: max(10px, 5.2cqw); color: #B3A592; text-align: right; }
.cv-md { width: 96px; flex: none; padding: 11px 9px 9px; border-radius: 12px; }
.cv-md .cv-mark, .cv-md .cv-tag { display: none; }
.cv-md .cv-t { font-size: 13cqw; }
.cv-md .cv-rule { margin: 6px 0 8px; }
.cv-sm { width: 52px; flex: none; padding: 9px 7px 7px; border-radius: 10px; }
.cv-sm::before { inset: 3px; border-radius: 7px; }
.cv-sm .cv-t { font-size: 13cqw; line-height: .92; }
.cv-no { position: absolute; top: 6px; right: 6px; font: 700 8px/1 "Archivo", system-ui, sans-serif; font-stretch: 80%; letter-spacing: .06em; color: #F0D7A6; opacity: .8; }

/* ---- the story page ---- */
.st-main { padding-top: 24px; }
.st { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-bottom: 72px; }
.st-art { min-width: 0; }
.st-art .pg-crumbs { margin-bottom: 22px; }
.st-head { display: flex; align-items: flex-end; gap: 24px; }
.st-head > .cv { width: 168px; flex: none; }
.st-titles { display: grid; gap: 12px; min-width: 0; }
.st-h1 { margin: 0; font: 500 clamp(40px, 7vw, 64px)/.94 var(--disp); font-stretch: 64%; letter-spacing: .005em; text-transform: uppercase; color: var(--paper-hi); overflow-wrap: anywhere; text-wrap: balance; }
.st-log { max-width: 34em; font: italic 400 clamp(17px, 2vw, 19px)/1.45 var(--read); color: var(--muted); text-wrap: pretty; }
.st-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.st-tags li { padding: 6px 11px; border: 1px solid var(--line2); border-radius: 999px; font: 500 13px/1.1 var(--disp); color: var(--muted); }
.st-tags li.on { border-color: var(--line-amber); color: var(--amber2); }
.st-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: 680px; margin: 24px 0 26px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 13.5px/1.4 var(--disp); color: var(--dim); }
.st-prose { max-width: 680px; }
.st-prose p { font: 400 clamp(18px, 2vw, 20px)/1.7 var(--read); color: #ECE2D2; text-wrap: pretty; }
.st-prose p + p { margin-top: .95em; }
.st-prose > p:first-child::first-letter { float: left; margin: 7px 10px 0 0; font: 500 68px/.8 var(--disp); font-stretch: 66%; color: var(--amber2); }
.st-next { max-width: 680px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.st-h2 { font: 500 clamp(30px, 4.4vw, 40px)/1 var(--disp); font-stretch: 66%; letter-spacing: .005em; text-transform: uppercase; color: var(--paper-hi); }
.st-choices { display: grid; gap: 12px; margin-top: 18px; }
/* #choose: where a trailer's short link lands (?from=trailer, landing.js): one line over the choices, and A and B lit,
   the two on the trailer's end card. Hidden (and nothing lit) for everyone else */
.st-pick { scroll-margin-top: 150px; }  /* the header, and the "What happens next?" heading above it */
.st-trail { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 16px; font: 600 16px/1.4 var(--disp); color: var(--amber2); }
.st-trail[hidden] { display: none; }
.st-trail a { font-weight: 500; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.st-trail a:hover { color: var(--paper-hi); }
.from-trailer .st-choice[data-choice="A"], .from-trailer .st-choice[data-choice="B"] { border-color: rgba(233, 163, 91, .7); background: #221A13; box-shadow: inset 0 0 0 1px rgba(233, 163, 91, .35); }
.st-choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 18px; border-radius: 14px; background: var(--ink3); border: 1px solid var(--line); color: var(--paper); text-decoration: none; transition: border-color .2s, transform .2s var(--ease), background-color .2s; }
.st-choice.first { border-color: var(--line-amber); }
.st-choice:hover { border-color: rgba(233, 163, 91, .6); background: #221A13; transform: translateX(2px); }
.st-choice-l { display: grid; gap: 4px; min-width: 0; }
.st-choice-l b { font: 650 17px/1.3 var(--disp); color: var(--paper-hi); }
.st-choice-l i { font: italic 400 15px/1.4 var(--read); color: var(--muted); }
.st-go { flex: none; font: 650 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; color: var(--amber2); white-space: nowrap; }
.st-fine { margin-top: 16px; font: 400 14px/1.5 var(--disp); color: var(--dim); }
.st-own { display: grid; gap: 6px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--ink2); border: 1px solid var(--line); }
.st-own b { font: 650 15px/1.3 var(--disp); color: var(--paper-hi); }
.st-own span { font: 400 14px/1.45 var(--disp); color: var(--muted); }
.st-about { max-width: 680px; }

.st-side { display: grid; align-content: start; gap: 26px; min-width: 0; }
.st-card { display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: var(--ink2); border: 1px solid var(--line); }
.st-card b { font: 650 18px/1.25 var(--disp); color: var(--paper-hi); }
.st-card p { font: 400 15px/1.5 var(--disp); color: var(--muted); }
.st-card .btn { margin-top: 4px; }
.st-more-k { font: 600 12px/1.3 var(--disp); font-stretch: 75%; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.st-more ul { display: grid; gap: 12px; margin-top: 12px; }
.st-more a { display: flex; align-items: center; gap: 12px; min-height: 64px; color: var(--paper); text-decoration: none; }
.st-more a:hover .st-more-t b { color: var(--amber2); }
.st-more-t { display: grid; gap: 3px; min-width: 0; }
.st-more-t b { font: 650 15px/1.3 var(--disp); color: var(--paper-hi); transition: color .2s; }
.st-more-t span { font: 400 13px/1.35 var(--disp); color: var(--dim); }

@media (min-width: 980px) {
  .st { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
  .st-side { position: sticky; top: 92px; padding-top: 46px; }
}
@media (max-width: 599px) {
  .st-head { gap: 14px; }
  .st-head > .cv { width: 96px; padding: 11px 9px 9px; border-radius: 12px; }
  .st-head > .cv .cv-mark, .st-head > .cv .cv-tag { display: none; }
  .st-head > .cv .cv-t { font-size: 13cqw; }
  .st-h1 { font-size: clamp(32px, 10vw, 44px); }
  .st-tags { display: none; }
  .st-meta { margin: 18px 0 20px; font-size: 12.5px; }
  .st-prose p { font-size: 18px; line-height: 1.65; }
  .st-choice { flex-direction: column; align-items: flex-start; gap: 6px; padding: 15px 16px; }
  .st-choice-l b { font-size: 16.5px; }
}

/* ---- the /stories/ index ---- */
.si .st-log { margin: -8px 0 32px; }
.si-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.si-card { display: grid; gap: 8px; color: var(--paper); text-decoration: none; }
.si-card:hover .si-t { color: var(--amber2); }
.si-t { font: 650 16px/1.3 var(--disp); color: var(--paper-hi); transition: color .2s; }
.si-l { font: 400 14.5px/1.45 var(--read); color: var(--muted); }
.si-m { font: 500 12.5px/1.3 var(--disp); color: var(--dim); }
@media (min-width: 720px) { .si-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 22px; } }

/* ---- the story page's FAQ and its hub links ---- */
.st-faq { max-width: 680px; margin-top: 56px; }
.st-faq .qa { margin-top: 18px; gap: 22px; }
.st-faq .qa-i { padding-top: 20px; }
.st-part { max-width: 680px; margin-top: 32px; font: 400 17px/1.55 var(--read); color: var(--muted); }
.st-part a { color: var(--amber2); text-underline-offset: 3px; }