/* landing.css: layout for the public landing (index.html) only.
 *
 * Load after /brand/fonts/fonts.css, /design-tokens.css and /brand/site.css. The shared components (chips, the
 * 60-cell grid, stamps, the file tree, lanes, strata, works list, films, buttons, nav, plates, role ghost) live in
 * site.css; this file only places them on this page. Every colour and space is a --pa-* token, so the opt-in dark
 * block in design-tokens.css (html[data-pa-auto-theme]) applies here unchanged. No motion.
 * (The older /landing.css at the app root belongs to viewer.html; it is not this file.)
 */

html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main { display: block; }

/* ---------- hero: text 56%, figure 44% at 960px and up ---------- */
.hero { padding: var(--pa-s7, 48px) 0 var(--pa-s8, 64px); }
.hero-grid { display: grid; gap: var(--pa-s6, 32px); align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 56fr 44fr; gap: var(--pa-s7, 48px); } }
.hero .sub { font-size: 17px; }
.hero .cta-note { font-size: 14px; line-height: 1.45; color: var(--pa-ink-faint, #655d4f); margin: var(--pa-s2, 8px) 0 var(--pa-s4, 16px); }
.hero .quiet { display: flex; flex-wrap: wrap; gap: var(--pa-s2, 8px) var(--pa-s4, 16px); margin: 0; font-size: 16px; }
.hero-figure .grid60 + .grid60 { margin-top: var(--pa-s6, 32px); padding-top: var(--pa-s5, 24px); border-top: 1px solid var(--pa-rule-soft, #d8caa6); }
.hero-figure .source { margin-top: var(--pa-s4, 16px); }

/* ---------- section scaffolding ---------- */
.section-lede { color: var(--pa-ink-2, #4a4239); max-width: 64ch; }
.two-col { display: grid; gap: var(--pa-s6, 32px); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.film-solo { max-width: 860px; }

/* #inbox: the still on the left, the spec card and the role ghost on the right */
.plate a.still { display: block; }
.plate a.still img { width: 100%; border: 1px solid var(--pa-rule, #c4b591); }
.surface-pair { display: grid; gap: var(--pa-s4, 16px); grid-template-columns: 1fr; }
@media (min-width: 560px) { .surface-pair { grid-template-columns: 3fr 2fr; } }

/* #graded: the pass and fail stories side by side at 900px and up */
.verdict-pair { display: grid; gap: var(--pa-s6, 32px); margin: var(--pa-s5, 24px) 0; }
@media (min-width: 900px) { .verdict-pair { grid-template-columns: 1fr 1fr; } }
.verdict-block { border-top: 1.5px solid var(--pa-ink, #1a1611); padding-top: var(--pa-s4, 16px); }
.verdict-block .result { font: 400 15px/1.5 var(--pa-font-mono, "IBM Plex Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; margin: 0 0 var(--pa-s3, 12px); display: flex; flex-wrap: wrap; gap: var(--pa-s2, 8px) var(--pa-s3, 12px); align-items: center; }
.verdict-block p { font-size: 17px; }
.lever-wrap h3 { margin-top: var(--pa-s6, 32px); }
.scope { font-size: 15px; color: var(--pa-ink-2, #4a4239); }

/* #who: lanes come from site.css; the stamp sits under the heading */
.lane .stamp { margin-top: var(--pa-s2, 8px); }
.lane .chips { margin-bottom: var(--pa-s3, 12px); }

/* #record: strata left, file tree right */
.record-grid { display: grid; gap: var(--pa-s6, 32px); align-items: start; }
@media (min-width: 900px) { .record-grid { grid-template-columns: 5fr 6fr; } }
.tree-caption { font-size: 15px; color: var(--pa-ink-2, #4a4239); margin-bottom: var(--pa-s3, 12px); }
.succession { list-style: none; padding: 0; margin: var(--pa-s5, 24px) 0 0; display: grid; gap: var(--pa-s3, 12px); }
@media (min-width: 640px) { .succession { grid-template-columns: repeat(3, 1fr); } }
.succession li { background: var(--pa-paper-2, #e5dabe); border: 1px solid var(--pa-rule, #c4b591); padding: var(--pa-s4, 16px); font: 500 20px/1.3 var(--pa-font-serif, "Spectral", Georgia, serif); }

/* #start */
.start-links { display: flex; flex-wrap: wrap; gap: var(--pa-s2, 8px) var(--pa-s5, 24px); margin: var(--pa-s5, 24px) 0 0; font-size: 16px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--pa-rule, #c4b591); padding: var(--pa-s7, 48px) 0 var(--pa-s8, 64px); color: var(--pa-ink-2, #4a4239); font-size: 15px; }
.site-footer .cols { display: grid; gap: var(--pa-s5, 24px); }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
.site-footer h2 { font: 600 13px/1.4 var(--pa-font-sans, "IBM Plex Sans", system-ui, sans-serif); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pa-ink-faint, #655d4f); margin: 0 0 var(--pa-s3, 12px); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 4px 0; }
.site-footer .fine { margin: var(--pa-s5, 24px) 0 0; font-size: 14px; color: var(--pa-ink-faint, #655d4f); }
.site-footer .fine + .fine { margin-top: var(--pa-s2, 8px); }

/* ---------- the thesis band (under the hero) ---------- */
.thesis { padding-block: var(--pa-s8, 64px); border-top: 1px solid var(--pa-rule, #c4b591); }
.thesis-line { font: 600 clamp(1.7rem, 3vw + 0.6rem, 2.7rem)/1.15 var(--pa-font-serif, "Spectral", Georgia, serif); max-width: 26ch; margin: 0 0 var(--pa-s5, 24px); letter-spacing: -0.01em; }
.thesis-lede { max-width: 64ch; }
.loop { list-style: none; padding: 0; margin: var(--pa-s7, 48px) 0 var(--pa-s6, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pa-s5, 24px); counter-reset: none; }
.loop li { position: relative; padding-top: var(--pa-s4, 16px); border-top: 3px solid var(--pa-ink, #1a1611); }
.loop li:first-child { border-top-color: var(--pa-ok, #2f6b45); }
.loop li:not(:last-child)::after { content: "\2192"; position: absolute; top: -0.9em; right: calc(-1 * var(--pa-s5, 24px) / 2 - 0.35em); font: 400 20px/1 var(--pa-font-sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--pa-ink-faint, #655d4f); background: var(--pa-paper, #ede4ce); padding: 0 2px; }
.loop .step { font: 500 13px/1 var(--pa-font-mono, "IBM Plex Mono", ui-monospace, monospace); color: var(--pa-ink-faint, #655d4f); }
.loop h3 { font: 600 22px/1.2 var(--pa-font-serif, "Spectral", Georgia, serif); margin: 6px 0 8px; }
.loop p { margin: 0; color: var(--pa-ink-2, #4a4239); font-size: 16px; line-height: 1.5; }
.today-next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pa-s5, 24px); font-size: 16px; color: var(--pa-ink-2, #4a4239); }
.today-next p { margin: 0; padding: var(--pa-s4, 16px); background: var(--pa-paper-2, #e5dabe); border-left: 3px solid var(--pa-ok, #2f6b45); }
.today-next p + p { border-left-color: var(--pa-rule, #c4b591); }
@media (max-width: 760px) {
  .loop { grid-template-columns: 1fr 1fr; row-gap: var(--pa-s6, 32px); }
  .loop li:nth-child(2)::after { display: none; }
  .today-next { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .loop { grid-template-columns: 1fr; } .loop li::after { display: none; } }