:root {
  --paper:#faf4e9; --white:#fffaf3; --ink:#2a211d; --red:#922e26;
  --muted:#635751; --line:#d8c6b6; --blush:#eedfd2; --max:1340px;
  --gutter:clamp(19px,5vw,76px);
}
* { box-sizing:border-box }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 Arial,Helvetica,sans-serif }
h1,h2,h3,p,figure { margin:0 }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1; letter-spacing:-.075em }
h1 { font-size:clamp(3.2rem,8.4vw,8.2rem) }
h2 { font-size:clamp(2.4rem,4.2vw,4.9rem) }
h3 { font-size:1.15rem; line-height:1.25 }
address { font-style:normal }
a { color:inherit; text-underline-offset:4px }
a:focus-visible { outline:2px solid currentColor; outline-offset:5px }
img { display:block; width:100%; height:auto }
.wrap { width:min(var(--max),100%); padding-inline:var(--gutter); margin-inline:auto }
.mono { font:700 .72rem/1.45 Consolas,"Courier New",monospace; text-transform:uppercase; letter-spacing:.1em }
.kicker { color:var(--red) }
.skip { position:absolute; left:8px; top:8px; transform:translateY(-160%); background:var(--white); padding:9px; z-index:1 }
.skip:focus { transform:none }
.site-header { border-bottom:1px solid var(--line) }
.mast { display:flex; gap:20px; justify-content:space-between; align-items:center; min-height:86px }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; line-height:1.05; font-weight:800; letter-spacing:.055em }
.brand svg { flex:none; width:32px; height:32px }
.brand small { display:block; margin-top:4px; font:700 .63rem/1.2 Consolas,"Courier New",monospace; letter-spacing:.19em; color:var(--red) }
nav { display:flex; align-items:center; gap:clamp(12px,3.2vw,45px); font-size:.84rem }
nav a { text-decoration:none; padding-block:7px; border-bottom:1px solid transparent }
nav a:hover, nav a[aria-current=page] { color:var(--red); border-color:currentColor }
.hero { padding-top:clamp(34px,5.5vw,74px) }
.hero-header { display:flex; gap:10px 20px; justify-content:space-between; color:var(--red); border-top:1px solid currentColor; padding-top:12px }
.hero h1 { margin-block:clamp(20px,3vw,38px) clamp(24px,4vw,50px) }
.hero h1 em { color:var(--red); font-weight:400 }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,.88fr); gap:clamp(24px,4vw,56px) }
.scene img { aspect-ratio:13/7; object-fit:cover; object-position:center 48%; background:var(--blush) }
.scene figcaption { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); color:var(--muted); padding-block:12px }
.hero-aside { border-top:4px solid var(--red); display:flex; flex-direction:column; align-items:start; justify-content:center; gap:19px; padding-block:24px }
.hero-aside p:not(.mono) { color:var(--muted); max-width:34ch }
.hero-aside strong { font-size:clamp(1.48rem,2.4vw,2.5rem); line-height:1.12; letter-spacing:-.04em; font-weight:500 }
.action { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 15px; background:var(--red); color:white; font-size:.85rem; text-decoration:none }
.action:hover { background:#73231e }
.action:focus-visible { outline-color:var(--ink) }
.section { padding-block:clamp(48px,7vw,96px) }
.split { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(26px,7vw,100px) }
.section h2,.band h2 { margin-top:15px }
.prose p { max-width:66ch; margin-top:17px; color:var(--muted) }
.prose h3:not(:first-child) { margin-top:30px }
.link { display:inline-flex; gap:16px; align-items:center; margin-top:20px; color:var(--red); font-size:.875rem }
.link:hover { color:var(--ink) }
.band { background:var(--red); color:var(--white) }
.band-inner { display:flex; justify-content:space-between; align-items:center; gap:20px 40px; padding-block:clamp(38px,6vw,74px) }
.band .mono { color:#f9ded0 }
.band a { display:inline-block; flex:none; padding:10px 15px; border:1px solid #e9bcad; text-decoration:none }
.band a:hover { background:var(--white); color:var(--red) }
.page-head { border-bottom:1px solid var(--line); padding-block:clamp(42px,6.5vw,88px) }
.page-head h1 { margin-top:17px; font-size:clamp(2.8rem,6vw,6.2rem); max-width:17ch }
.page-head .lead { margin-top:21px; max-width:62ch; color:var(--muted) }
.memo { background:var(--white); border:1px solid var(--line); border-top:5px solid var(--red); padding:clamp(22px,3vw,38px); align-self:start }
.memo h2 { font-size:clamp(1.8rem,3.1vw,3rem); margin-top:0; letter-spacing:-.055em }
.memo dl { margin:0 }
.memo dt { margin-top:17px; color:var(--red) }
.memo dd { margin:4px 0 0; overflow-wrap:anywhere }
.memo address { margin-top:16px }
.shaded { background:var(--blush) }
.sequence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,42px); list-style:none; padding:0; margin:30px 0 0 }
.sequence li { border-top:1px solid var(--line); padding-top:16px }
.sequence h3 { margin-block:10px }
.sequence li p:not(.mono) { color:var(--muted) }
.story-frame { border:1px solid var(--line); padding:9px }
.story-frame figcaption { padding:9px 2px 0; color:var(--red) }
.site-footer { border-top:1px solid var(--line); background:var(--blush) }
.footer-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:20px 40px; padding-block:34px; font-size:.82rem }
.footer-grid strong { display:block; margin-bottom:6px }
.footer-grid address { justify-self:end }
.footer-grid .copyright { grid-column:1/-1; border-top:1px solid var(--line); padding-top:13px; color:var(--muted) }
@media(max-width:760px) {
 .hero-grid,.split { grid-template-columns:1fr }
 .hero-aside { padding-block:20px 0 }
 .hero-aside p:not(.mono) { max-width:60ch }
 .sequence { grid-template-columns:1fr }
}
@media(max-width:500px) {
 .mast { flex-wrap:wrap; gap:7px; padding-block:15px }
 nav { width:100%; justify-content:space-between; font-size:.76rem }
 .hero-header,.scene figcaption { font-size:.63rem }
 .hero h1 { font-size:clamp(2.9rem,11vw,4rem); line-height:.98 }
 .hero h1 em { display:block }
 .scene img { aspect-ratio:3/2 }
 .band-inner { flex-direction:column; align-items:flex-start }
 .footer-grid { grid-template-columns:1fr 1fr; gap:16px }
 .footer-grid>:first-child { grid-column:1/-1 }
 .footer-grid address { justify-self:start }
}