/* ============================================================
   AI Drama Planet — public site layer
   Layers on assets/brand.css (tokens + base). Everything here is
   `s-` prefixed so it can never collide with the in-app system.

   Register: the same system, softened for marketing — more air,
   larger type (site-page-inventory.md §2 permits exactly this,
   and forbids forking the system).

   MOBILE-FIRST. §1: the typical first visit is a phone, in an
   in-app browser, from a shared link. Every base rule below is the
   phone rule; media queries only add.

   Accent discipline on the site: there is no playback here
   (W-60 undecided), so amber is re-scoped from "play" to
   "the free path" — the primary account CTA and the free-episode
   badge. Still a maximum of two visible uses per screen.
   ============================================================ */

:root {
  --s-measure: 65ch;          /* readable prose measure, W-20/21 */
  --s-max: 1180px;            /* marketing pages breathe narrower than the app */
  --s-step: clamp(56px, 9vw, 108px);   /* vertical rhythm between sections */
}

/* ---------- layout ------------------------------------- */

.s-wrap { max-width: var(--s-max); margin: 0 auto; padding-inline: var(--gutter); }
.s-narrow { max-width: 780px; }

.s-section { padding-block: var(--s-step); }
.s-section + .s-section { border-top: 1px solid var(--border); }

.s-head { margin-bottom: clamp(26px, 4vw, 44px); }
.s-head h2 { font-size: clamp(25px, 4.2vw, 38px); letter-spacing: -0.02em; }
.s-head p { color: var(--muted); margin-top: 12px; max-width: 58ch; font-size: 16px; }
.s-head .u-label { display: block; margin-bottom: 14px; }

/* ---------- W-06 · header / nav ------------------------
   Two rows at phone width so three items + a CTA never crush;
   one row from 720px. No JavaScript — the nav must survive an
   in-app browser with scripting restricted.                */

.s-nav {
  position: sticky; top: 0; z-index: 60;
  background: oklch(0.155 0.018 265 / 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
/* One wrapping flex row: at phone width the links wrap to a second line
   under the wordmark and the CTA; from 720px everything sits on one line.
   `order` does the rearranging, so the DOM order stays logical. */
.s-nav-bar {
  max-width: var(--s-max); margin: 0 auto;
  padding: 11px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.s-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; order: 1; }
.s-logo svg { width: 27px; height: 27px; flex: none; }
.s-logo span {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 600;
  font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.14em;      /* never set the wordmark without this */
  white-space: nowrap;
}
@media (max-width: 359px) { .s-logo span { font-size: 11.5px; letter-spacing: 0.12em; } }

.s-nav-links {
  order: 3; flex: 1 0 100%;
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.s-nav-links::-webkit-scrollbar { display: none; }
.s-nav-links a {
  padding: 7px 11px; border-radius: 7px; font-size: 14.5px;
  color: var(--muted); white-space: nowrap;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.s-nav-links a:hover { color: var(--fg); background: var(--surface); }
.s-nav-links a[aria-current="page"] { color: var(--fg); background: var(--surface); }
.s-nav-cta { order: 2; margin-left: auto; flex: none; }

@media (min-width: 720px) {
  .s-nav-bar { padding-block: 15px; }
  .s-nav-links { order: 2; flex: 0 1 auto; margin-left: 16px; margin-right: auto; overflow: visible; gap: 2px; }
  .s-nav-cta { order: 3; margin-left: 0; }
  .s-logo span { font-size: 14px; }
}

/* ---------- buttons ------------------------------------- */

.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;                    /* touch target floor */
  padding: 0 20px; border-radius: 8px;
  font-size: 15px; font-weight: 550; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  text-align: center;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.12s var(--ease);
}
.s-btn:active { transform: translateY(1px); }

/* the one amber element on most screens */
.s-btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.s-btn-primary:hover { background: oklch(0.845 0.155 74); }

.s-btn-ghost { background: transparent; border-color: oklch(1 0 0 / 0.22); color: var(--fg); }
.s-btn-ghost:hover { background: var(--surface); border-color: oklch(1 0 0 / 0.34); }

.s-btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.s-btn-block { width: 100%; }

.s-link {
  color: var(--fg); text-decoration: underline;
  text-decoration-color: oklch(1 0 0 / 0.3); text-underline-offset: 3px;
}
.s-link:hover { text-decoration-color: var(--fg); }

/* ---------- W-01 · hero --------------------------------
   The one place imagery belongs while covers do not exist
   (§5). Key art here is brand illustration, not a cover.   */

.s-hero { position: relative; isolation: isolate; overflow: hidden; }
.s-hero-art { position: absolute; inset: 0; z-index: -1; }
.s-hero-art img {
  width: 100%; height: 100%; object-fit: cover;
  /* the unified grade — posture rule 2 */
  filter: saturate(0.6) contrast(1.12) brightness(0.72);
}
.s-hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: oklch(0.42 0.09 265); mix-blend-mode: color; opacity: 0.34;
}
.s-hero-art::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, oklch(0.155 0.018 265 / 0.5) 0%, oklch(0.155 0.018 265 / 0.2) 34%, var(--bg) 97%),
    linear-gradient(92deg, oklch(0.155 0.018 265 / 0.86) 0%, oklch(0.155 0.018 265 / 0.34) 66%, transparent 100%);
}
.s-hero-body { padding-block: clamp(48px, 11vw, 116px) clamp(44px, 8vw, 92px); }

/* Sized so the proposition holds its TWO authored lines on a desktop
   viewport and wraps gracefully rather than breaking mid-clause on a phone. */
.s-hero h1 {
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -0.03em; line-height: 1.06;
  max-width: 26ch; text-wrap: balance;
}
.s-hero .s-lede {
  margin-top: clamp(18px, 3vw, 26px); max-width: 54ch;
  font-size: clamp(16.5px, 2.1vw, 19px); line-height: 1.6;
  color: oklch(0.9 0.008 265);
}
.s-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vw, 38px); }
.s-actions .s-btn { flex: 1 1 auto; min-width: 168px; }
@media (min-width: 560px) { .s-actions .s-btn { flex: 0 0 auto; } }

/* ---------- W-01 · how it works ------------------------- */

.s-steps { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 780px) { .s-steps { grid-template-columns: repeat(3, 1fr); } }
.s-step { background: var(--bg); padding: clamp(22px, 3.4vw, 32px); }
.s-step-n {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--muted); display: block; margin-bottom: 16px;
}
.s-step h3 { font-size: 19px; letter-spacing: -0.01em; }
.s-step p { color: var(--muted); font-size: 15px; margin-top: 10px; line-height: 1.6; }
.s-step strong { color: var(--fg); font-weight: 550; }

/* ---------- §6 · drama card + typographic tile ----------
   No cover URLs exist (§5), so the tile IS the art surface.
   Posture rule 1 says chrome carries no colour — the tile
   stands in the art slot, so it may carry one restrained
   genre hue. It is amber-free, so accent discipline holds.  */

.s-grid { display: grid; gap: clamp(14px, 2.4vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 520px) { .s-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .s-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.s-card {
  display: grid; grid-template-columns: 104px 1fr; gap: 16px;
  align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.s-card:hover { border-color: oklch(1 0 0 / 0.24); background: var(--raised); }
@media (min-width: 900px) { .s-card { grid-template-columns: 124px 1fr; gap: 20px; padding: 16px; } }

.s-tile {
  position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 11px;
  border: 1px solid oklch(1 0 0 / 0.12);
  --tile-h: 265; --tile-c: 0.05;
  background:
    radial-gradient(128% 92% at 16% 0%, oklch(0.58 calc(var(--tile-c) * 1.35) var(--tile-h)) 0%, transparent 66%),
    linear-gradient(163deg, oklch(0.38 var(--tile-c) var(--tile-h)) 0%, oklch(0.165 0.02 265) 82%);
}
/* The artwork, when the drama has any. Absolute so it sits over the gradient
   field and under ::after, whose job — keeping the title on its own ground —
   is exactly as necessary over a photograph as over a hue. Covers are 2:3 and
   the tile is 3:4, so it crops rather than letterboxes. */
.s-tile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* fine diagonal rule — keeps the field from reading as a flat gradient */
.s-tile::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(118deg, oklch(1 0 0 / 0.06) 0 1px, transparent 1px 6px);
}
/* the title always sits on its own ground, whatever the field does behind it */
.s-tile::after {
  content: ""; position: absolute; inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, oklch(0.12 0.02 265 / 0.72) 78%);
}
.s-tile-title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-stretch: 112%;
  font-weight: 600; font-size: 14.5px; line-height: 1.1; letter-spacing: -0.015em;
  color: oklch(0.985 0.004 265);
  text-wrap: balance;
  overflow-wrap: anywhere;          /* long titles wrap, never clip the tile */
}
@media (min-width: 900px) { .s-tile-title { font-size: 16.5px; } }
.s-tile[data-genre="Sci-fi"]   { --tile-h: 248; --tile-c: 0.062; }
.s-tile[data-genre="Thriller"] { --tile-h: 18;  --tile-c: 0.048; }
.s-tile[data-genre="Romance"]  { --tile-h: 356; --tile-c: 0.056; }

.s-card-body { min-width: 0; }
.s-card-body h3 { font-size: 17px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
@media (min-width: 900px) { .s-card-body h3 { font-size: 19px; } }
.s-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.s-card-meta span + span::before { content: "·"; margin-right: 10px; opacity: 0.55; }
.s-card-syn {
  margin-top: 11px; color: var(--muted); font-size: 14.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s-card-creator { margin-top: 11px; font-size: 13.5px; color: var(--muted); }
.s-card-creator b { color: var(--fg); font-weight: 550; }

/* ---------- §6 · access badge --------------------------
   Words carry the meaning; colour never carries it alone.  */

.s-access {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 550; letter-spacing: 0.01em;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  white-space: nowrap;
}
.s-access-free {
  border-color: oklch(0.795 0.155 74 / 0.42);
  background: oklch(0.795 0.155 74 / 0.13);
  color: oklch(0.87 0.12 74);
}
.s-access-free .s-dot { background: var(--accent); }
.s-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); flex: none; }

/* ---------- W-03 · episode list ------------------------- */

.s-eps { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.s-ep {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px;
  padding: 14px; background: var(--surface);
  align-items: baseline;
}
.s-ep + .s-ep { border-top: 1px solid var(--border); }
.s-ep-n {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.s-ep-t { font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.s-ep-foot {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 8px;
}
.s-ep-d {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
@media (min-width: 700px) {
  .s-ep { grid-template-columns: 44px 1fr auto auto; gap: 18px; padding: 15px 18px; align-items: center; }
  .s-ep-foot { display: contents; }
  .s-ep-d { text-align: right; }
}

/* ---------- W-03 · app hand-off panel -------------------
   Must never imply web playback exists.                    */

.s-handoff {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: clamp(20px, 3.4vw, 28px);
}
.s-handoff h3 { font-size: 19px; letter-spacing: -0.015em; }
.s-handoff p { color: var(--muted); font-size: 15px; margin-top: 10px; line-height: 1.6; max-width: 46ch; }
/* W-41 · the store-badge slot, designed now and filled when an app ships */
.s-store-slot {
  margin-top: 20px; padding: 14px; border: 1px dashed oklch(1 0 0 / 0.16);
  border-radius: 9px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted);
}
.s-store-slot svg { width: 16px; height: 16px; flex: none; opacity: 0.7; }

/* ---------- §6 · form field ----------------------------- */

.s-form { display: grid; gap: 20px; }
.s-field { display: grid; gap: 7px; }
.s-field > label { font-size: 14px; font-weight: 550; letter-spacing: 0.01em; }
.s-field input, .s-field textarea, .s-field select {
  font: inherit; font-size: 16px;         /* 16px stops iOS zooming the page on focus */
  color: var(--fg); background: var(--bg);
  border: 1px solid oklch(1 0 0 / 0.16); border-radius: 8px;
  padding: 12px 13px; min-height: 46px; width: 100%;
  transition: border-color 0.16s var(--ease);
}
.s-field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.s-field input:hover, .s-field textarea:hover { border-color: oklch(1 0 0 / 0.28); }
.s-field input:focus-visible, .s-field textarea:focus-visible, .s-field select:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 1px; border-color: transparent;
}
.s-hint { font-size: 13px; color: var(--muted); line-height: 1.5; }
.s-error {
  font-size: 13.5px; color: oklch(0.78 0.16 24); display: flex; gap: 7px; align-items: flex-start;
  line-height: 1.5;
}
.s-error svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.s-field-invalid input, .s-field-invalid textarea { border-color: oklch(0.66 0.19 24); }

.s-consent { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ---------- states: empty, notice ----------------------- */

.s-empty {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: clamp(28px, 5vw, 48px); text-align: center;
}
.s-empty h3 { font-size: 20px; letter-spacing: -0.015em; }
.s-empty p { color: var(--muted); font-size: 15.5px; margin: 12px auto 0; max-width: 46ch; line-height: 1.6; }
.s-empty .s-actions { justify-content: center; }

.s-notice {
  border: 1px solid var(--border); border-left: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
  padding: 16px 18px; font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
.s-notice b { color: var(--fg); font-weight: 550; }

/* ---------- status pages (W-11 / W-12 / W-31 / W-50) ---- */

.s-status { padding-block: clamp(56px, 10vw, 104px); }
.s-status-mark { width: 46px; height: 46px; color: var(--muted); margin-bottom: 26px; }
.s-status h1 { font-size: clamp(28px, 5.2vw, 42px); letter-spacing: -0.025em; max-width: 18ch; }
.s-status p { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin-top: 16px; max-width: 52ch; }
.s-status p + p { margin-top: 14px; }
.s-status-code {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  color: var(--muted); display: block; margin-bottom: 18px;
}

/* ---------- §6 · prose block (W-20 / W-21) -------------- */

.s-prose { max-width: var(--s-measure); }
.s-prose h2 {
  font-size: 24px; letter-spacing: -0.015em; margin-top: 44px; margin-bottom: 14px;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.s-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.s-prose h3 { font-size: 18px; letter-spacing: -0.01em; margin-top: 28px; margin-bottom: 10px; }
.s-prose p, .s-prose li { font-size: 16px; line-height: 1.72; color: oklch(0.86 0.008 265); }
.s-prose p + p, .s-prose ul, .s-prose ol { margin-top: 15px; }
.s-prose ul, .s-prose ol { padding-left: 22px; }
.s-prose li + li { margin-top: 8px; }
.s-prose strong { color: var(--fg); font-weight: 600; }

/* ---------- pagination (W-02) --------------------------- */

.s-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; }
.s-pager-n {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.s-pager .s-btn[aria-disabled="true"] {
  opacity: 0.36; pointer-events: none;      /* dead ends visibly inert */
}

/* ---------- search bar (W-02) --------------------------- */

.s-search { display: flex; gap: 10px; flex-wrap: wrap; }
.s-search .s-field { flex: 1 1 240px; }

/* ---------- W-01 · creator strip ------------------------ */

.s-strip {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: clamp(22px, 3.6vw, 34px);
  display: grid; gap: 18px;
}
@media (min-width: 800px) {
  .s-strip { grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
}
.s-strip h2 { font-size: clamp(21px, 3vw, 27px); letter-spacing: -0.02em; }
.s-strip p { color: var(--muted); font-size: 15.5px; margin-top: 10px; line-height: 1.6; max-width: 52ch; }

/* ---------- W-40 · numbers ------------------------------ */

.s-figures { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 620px) { .s-figures { grid-template-columns: repeat(3, 1fr); } }
.s-figure { background: var(--bg); padding: clamp(20px, 3vw, 28px); }
.s-figure-v {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 600;
  font-size: clamp(30px, 4.6vw, 42px); letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; display: block;
}
.s-figure-l { color: var(--muted); font-size: 14px; margin-top: 8px; line-height: 1.5; }

.s-checks { display: grid; gap: 14px; }
.s-check { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.s-check svg { width: 18px; height: 18px; color: var(--muted); margin-top: 3px; }
.s-check b { display: block; font-weight: 550; font-size: 15.5px; }
.s-check span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- §6 · footer --------------------------------- */

.s-foot { border-top: 1px solid var(--border); padding-block: clamp(38px, 6vw, 60px); margin-top: var(--s-step); }
.s-foot-grid { display: grid; gap: 28px; }
@media (min-width: 780px) { .s-foot-grid { grid-template-columns: minmax(0, 1.4fr) auto; gap: 56px; } }
.s-foot-about { color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 52ch; margin-top: 16px; }
.s-foot-links { display: grid; gap: 11px; align-content: start; }
.s-foot-links a { font-size: 14.5px; color: var(--muted); }
.s-foot-links a:hover { color: var(--fg); }
.s-foot-legal {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 18px;
}

/* ---------- misc ---------------------------------------- */

.s-crumb { font-size: 14px; color: var(--muted); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 8px; }
.s-crumb svg { width: 15px; height: 15px; }
.s-crumb:hover { color: var(--fg); }

.s-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: 0 0 8px 0;
  font-size: 14px; font-weight: 550;
}
.s-skip:focus { left: 0; }

/* State-switcher chrome for this prototype. Never part of the
   shipped page — the real pages render one server-side state. */
.s-demo {
  position: sticky; bottom: 0; z-index: 70;
  background: oklch(0.205 0.022 265 / 0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); padding: 11px var(--gutter);
}
.s-demo-in {
  max-width: var(--s-max); margin: 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.s-demo-l { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 550; }
.s-demo button {
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  padding: 7px 12px; font-size: 13px; color: var(--muted); cursor: pointer;
  min-height: 36px;
}
.s-demo button:hover { color: var(--fg); border-color: oklch(1 0 0 / 0.26); }
.s-demo button[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}