@font-face{font-family:"Brewlento Display";src:url("/assets/brand-display.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
:root{--paper:#f4f2ea;--ink:#191d19;--muted:#62665e;--red:#bd392d;--green:#2e4538}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
p,h1,figure,ul{margin:0}
a{color:inherit}
.cover{max-width:1440px;min-height:100svh;margin:auto;padding:48px 64px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:72px}
header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-family:"Brewlento Display",sans-serif;font-weight:800;font-size:40px;line-height:1.275;letter-spacing:-.04423em;text-decoration:none}
.status,.eyebrow,figcaption{text-transform:uppercase;font-size:12px;line-height:1.5;letter-spacing:.09em}
.status{color:var(--muted);text-align:right}
main{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,32%);gap:clamp(40px,5.55vw,80px);align-items:center;min-height:470px}
.message{display:flex;flex-direction:column;gap:28px}
.eyebrow{color:var(--green)}
h1{font-family:"Brewlento Display",sans-serif;font-weight:800;font-size:clamp(48px,5.417vw,78px);line-height:1.0513;letter-spacing:-.04423em}
h1 span{display:block;white-space:nowrap}
.intro{font-size:18px;line-height:28px;max-width:620px;color:var(--muted)}
.visual{width:100%;max-width:420px;aspect-ratio:1;justify-self:end;border-radius:12px;background:var(--red);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px}
.visual img{display:block;width:min(81%,340px);height:auto}
figcaption{font-size:11px}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;line-height:1.6;color:var(--muted)}
footer ul{padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:24px;row-gap:8px}
.skip{position:absolute;left:24px;top:0;transform:translateY(-150%);background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:4px;z-index:2}
.skip:focus{transform:translateY(12px)}
a:focus-visible{outline:2px solid var(--green);outline-offset:6px}
@media(min-width:960px) and (max-width:1199px){.cover{padding-left:40px;padding-right:40px}}
@media(max-width:959px){
.cover{padding:32px 24px 24px;gap:64px}
header{gap:16px}
.wordmark{font-size:clamp(26px,4.8vw,40px)}
.status{font-size:10px;max-width:130px}
main{grid-template-columns:1fr;gap:44px;min-height:0}
.message{gap:24px}
h1{font-size:clamp(26px,8.5vw,64px)}
.intro{font-size:17px;line-height:26px}
.desktop-break{display:none}
.visual{width:min(100%,420px);justify-self:start}
footer{align-items:flex-start;flex-direction:column;gap:24px}
footer ul{column-gap:20px}
}
@media(max-width:359px){.cover{padding-left:20px;padding-right:20px}.wordmark{font-size:24px}.status{font-size:9px;max-width:85px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wordmark{display:inline-flex;align-items:center;gap:12px}
.brand-mark{display:block;width:44px;height:44px;flex:none}
@media(max-width:959px){.wordmark{gap:8px}.brand-mark{width:32px;height:32px}}
@media(max-width:599px){header{flex-wrap:wrap;gap:12px}.status{flex-basis:100%;max-width:none;text-align:left;font-size:10px}}
@media(max-width:359px){.brand-mark{width:28px;height:28px}}