:root {
  --paper:#f0f2ed; --ink:#162b24; --forest:#123f32; --leaf:#dce6dd;
  --muted:#4e6258; --line:#aebcb3; --orange:#a13f1a; --flash:#f8b786;
  --gutter:clamp(19px,5vw,72px); --limit:1450px;
}
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Arial,Helvetica,sans-serif }
.wrap { width:min(100%,var(--limit)); margin:auto; padding-inline:var(--gutter) }
h1,h2,h3,p,figure { margin:0 }
h1,h2,h3 { line-height:1.03; letter-spacing:-.045em }
h1 { font-size:clamp(2.65rem,5.25vw,5.8rem) }
h2 { font-size:clamp(2rem,3.7vw,4rem) }
h3 { font-size:clamp(1.3rem,2vw,2rem) }
img { display:block; width:100%; height:auto }
address { font-style:normal }
a { color:inherit; text-decoration:none }
a:focus-visible { outline:2px solid currentColor; outline-offset:5px }
.skip { position:absolute; z-index:2; top:8px; left:8px; background:white; padding:10px; transform:translateY(-160%) }
.skip:focus { transform:none }
.mono { font:700 .72rem/1.5 Consolas,"Courier New",monospace; text-transform:uppercase; letter-spacing:.095em }
.mast { border-bottom:1px solid var(--line) }
.mast-inner { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; min-height:86px }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:1.12rem; font-weight:800; line-height:1.1; white-space:nowrap }
.brand svg { width:36px; height:36px }
.brand small { display:block; font:700 .59rem/1.3 Consolas,"Courier New",monospace; letter-spacing:.18em; margin-top:5px }
nav { display:flex; gap:clamp(13px,2.8vw,40px); align-items:center; flex-wrap:wrap; font-size:.85rem }
nav a { padding-block:8px; border-bottom:1px solid transparent }
nav a:hover, nav a[aria-current=page] { border-color:currentColor; color:var(--orange) }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.28fr); gap:clamp(20px,5vw,80px); align-items:center; padding-block:clamp(40px,6vw,94px) }
.hero h1 { margin-block:24px }
.hero h1 span { display:block; color:var(--forest) }
.hero p:not(.mono) { max-width:390px; color:var(--muted) }
.kicker { color:var(--orange) }
.action { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; margin-top:25px; padding:12px 17px; background:var(--forest); color:white; font-size:.85rem }
.action:hover { background:#225645 }
.action:focus-visible { outline-color:var(--ink) }
.frame { background:var(--forest); color:white; padding:10px }
.frame-top,.frame figcaption { display:flex; justify-content:space-between; gap:10px; padding:8px 4px }
.frame figcaption { padding-bottom:4px }
.frame .accent { color:var(--flash) }
.frame img { aspect-ratio:5/4; object-fit:cover; object-position:52% center }
.identity { background:var(--forest); color:white }
.identity .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; padding-block:16px }
.identity span:last-child { color:var(--flash) }
.section { padding-block:clamp(48px,7.5vw,100px) }
.head { padding-block:clamp(40px,6vw,80px); border-bottom:1px solid var(--line) }
.head h1,.section h2 { margin-top:15px }
.head h1 { font-size:clamp(2.5rem,5.2vw,5.5rem); max-width:16ch }
.head p:last-child { color:var(--muted); margin-top:20px; max-width:62ch }
.split { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,7vw,100px) }
.prose p { max-width:65ch; margin-top:17px; color:var(--muted) }
.prose h3:not(:first-child) { margin-top:34px }
.text-link { display:inline-flex; align-items:center; gap:16px; margin-top:20px; border-bottom:1px solid currentColor; color:var(--orange); font-size:.875rem }
.text-link:hover { color:var(--ink) }
.shaded { background:var(--leaf) }
.sequence { margin:0; padding:0; list-style:none; counter-reset:scene }
.sequence li { display:grid; grid-template-columns:38px 1fr; gap:8px 14px; padding:21px 0; border-top:1px solid var(--line); counter-increment:scene }
.sequence li::before { content:counter(scene,decimal-leading-zero); color:var(--orange); font:700 1rem Consolas,"Courier New",monospace; padding-top:2px }
.sequence li p { color:var(--muted); margin-top:8px }
.notes { align-self:start; background:var(--leaf); border:1px solid var(--line); border-top:5px solid var(--forest); padding:clamp(20px,3vw,37px) }
.notes h2 { font-size:clamp(1.65rem,2.5vw,2.5rem); margin:0 }
.notes dl { margin:20px 0 0 }
.notes dt { font:700 .72rem/1.5 Consolas,"Courier New",monospace; color:var(--muted); text-transform:uppercase; margin-top:15px }
.notes dd { margin:4px 0 0; overflow-wrap:anywhere }
.notes address { margin-top:17px }
.notes a { text-decoration:underline; text-underline-offset:4px }
.concept { margin-top:32px; border-left:3px solid var(--orange); padding-left:20px }
.footer { border-top:1px solid var(--line); background:var(--leaf) }
.footer-inner { display:grid; grid-template-columns:1.25fr .75fr 1fr; gap:18px 32px; padding-block:38px; font-size:.83rem }
.footer a:hover { text-decoration:underline; text-underline-offset:4px }
.footer strong { display:block; margin-bottom:7px }
.footer .legal { grid-column:1/-1; border-top:1px solid var(--line); color:var(--muted); padding-top:16px; font-size:.73rem }
@media (max-width:780px) {
 .hero,.split { grid-template-columns:1fr }
 .hero { gap:32px }
 .frame img { aspect-ratio:3/2 }
}
@media (max-width:565px) {
 .mast-inner { flex-wrap:wrap; padding-block:15px }
 .mast nav { width:100%; justify-content:space-between; gap:5px 9px; font-size:.8rem }
 .footer-inner { grid-template-columns:1fr 1fr }
 .footer-inner > :first-child { grid-column:1/-1 }
}
@media (max-width:350px) { .hero h1 { font-size:2.65rem } .frame .mono { font-size:.62rem } }