:root{--bg:#0b0c0e;--ink:#e9e4d8;--mute:#a39e92;--line:#2a2b2e;--red:#c0392b;--red-text:#e4685a;--paper:#d8c9a3;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;--sans:"Segoe UI",system-ui,-apple-system,Tahoma,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.8 var(--sans);min-height:100vh;overflow-x:hidden;-webkit-text-size-adjust:100%}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.spot{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(520px circle at var(--x,50%) var(--y,28%),rgba(216,201,163,.10),transparent 70%)}
.skip{position:absolute;inset-inline-start:1rem;top:-4rem;background:var(--paper);color:#111;padding:.6rem 1rem;z-index:20;border-radius:4px}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.top{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;max-width:72rem;margin-inline:auto}
.mark{font:600 .95rem/1 var(--sans);letter-spacing:.28em}
.mark b{color:var(--red-text);font-weight:700}
.lang{min-width:44px;min-height:44px;padding:0 1rem;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;font:600 .85rem var(--sans);letter-spacing:.12em;cursor:pointer;transition:border-color .2s,color .2s}
.lang:hover{border-color:var(--paper);color:var(--paper)}
main{position:relative;z-index:2}
.hero{position:relative;min-height:calc(100svh - 76px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.25rem 4rem;overflow:hidden}
.print{position:absolute;width:min(92vw,640px);color:var(--paper);opacity:.07;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.status{margin:0 0 1.4rem;padding:.35rem 1rem;border:1px solid var(--red);color:#e8a79f;font-size:.9rem;letter-spacing:.08em;border-radius:2px;position:relative}
.brand{margin:0;font:700 clamp(1.7rem,8.2vw,6.2rem)/1 var(--serif);letter-spacing:.04em;position:relative;max-width:100%}
.brand span{color:var(--red)}
.tagline{text-wrap:balance;position:relative;margin:1.6rem 0 0;max-width:34ch;font:500 clamp(1.3rem,4.6vw,2.1rem)/1.6 var(--serif);color:var(--paper)}
.lede{position:relative;margin:1.1rem 0 0;max-width:42ch;color:var(--mute);font-size:1rem}
.scroll{position:relative;margin-top:2.4rem;display:inline-flex;align-items:center;min-height:44px;padding:0 1.4rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);transition:color .2s,border-color .2s}
.scroll:hover{color:var(--paper);border-color:var(--paper)}
.block{max-width:44rem;margin:0 auto;padding:3.5rem 1.25rem;border-top:1px solid var(--line)}
.block h2{margin:0 0 1rem;font:600 1.5rem/1.3 var(--serif);color:var(--paper)}
.block p{margin:0;color:#cfcabd}
.tags{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.tags li{position:relative;padding:1.2rem 1.3rem;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);border-inline-start:3px solid var(--red)}
.tags .n{display:block;margin-bottom:.35rem;font:600 .8rem var(--sans);color:var(--red-text);letter-spacing:.15em}
.tags h3{margin:0 0 .3rem;font:600 1.15rem var(--serif);color:var(--ink)}
.tags p{font-size:.95rem;color:var(--mute)}
.note p{color:var(--mute)}
footer{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem 2.5rem;border-top:1px solid var(--line);color:var(--mute);font-size:.85rem}
html[lang=en] body{font-family:var(--sans)}
@media (min-width:48rem){.tags{grid-template-columns:repeat(3,1fr)}.block{max-width:64rem}.block>p{max-width:44rem}}
@media (prefers-reduced-motion:no-preference){.hero>*{animation:rise .9s ease both}.hero>.status{animation-delay:.05s}.hero>.brand{animation-delay:.15s}.hero>.tagline{animation-delay:.3s}.hero>.lede{animation-delay:.45s}.hero>.scroll{animation-delay:.6s}.print{animation:fade 2.4s ease both}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:.07}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spot{display:none}}