@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root { --ink:#17150f; --paper:#f3ead2; --cheese:#f8d747; --hot:#f35b25; --acid:#b9f227; --muted:#6f6857; --line:rgba(23,21,15,.22); --display:'Archivo Black',Impact,sans-serif; --mono:'Space Mono',monospace; }
html[data-theme="afterdark"] { --ink:#f8f3df; --paper:#17130f; --cheese:#d8ff38; --hot:#ff5b91; --acid:#32e6c2; --muted:#b9ad96; --line:rgba(248,243,223,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); color:var(--ink); }
body { margin:0; min-width:320px; overflow-x:hidden; background:var(--paper); font-family:var(--mono); }
a { color:inherit; }
.skip { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.8rem 1rem; background:var(--ink); color:var(--paper); }
.skip:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:30; min-height:84px; padding:13px clamp(18px,4vw,60px); display:flex; align-items:center; gap:30px; border-bottom:2px solid var(--ink); background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; font:1rem/0.86 var(--display); text-decoration:none; letter-spacing:-.04em; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--cheese); border:2px solid var(--ink); font-size:2rem; }
nav { display:flex; gap:26px; margin-left:auto; font-size:.76rem; font-weight:700; text-transform:uppercase; }
nav a { text-decoration:none; border-bottom:2px solid transparent; }
nav a:hover, nav a:focus-visible { border-color:var(--hot); }
button { font:inherit; color:inherit; }
.theme-button { border:2px solid var(--ink); background:transparent; padding:10px 14px; font-weight:700; cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
.theme-button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.theme-panel { position:absolute; right:clamp(18px,4vw,60px); top:76px; width:220px; padding:15px; border:2px solid var(--ink); background:var(--paper); box-shadow:7px 7px 0 var(--ink); }
.theme-panel p { margin:0 0 9px; font-weight:700; text-transform:uppercase; font-size:.75rem; }
.theme-panel button { display:block; width:100%; padding:9px; margin-top:6px; border:1px solid var(--ink); background:transparent; text-align:left; cursor:pointer; }
.theme-panel button:hover,.theme-panel button:focus-visible { background:var(--cheese); color:#17150f; }

.hero { min-height:calc(100vh - 84px); position:relative; padding:clamp(50px,8vw,110px) clamp(18px,6vw,90px) 95px; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr); align-items:center; gap:4vw; border-bottom:2px solid var(--ink); overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to right,black,transparent 70%); }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-number { margin:0 0 24px; font-size:.72rem; font-weight:700; letter-spacing:.14em; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1 { margin:0; font:clamp(3.4rem,9.2vw,9.4rem)/.78 var(--display); letter-spacing:-.085em; text-transform:uppercase; }
h1 em { color:var(--hot); font-style:normal; text-shadow:4px 4px 0 var(--ink); -webkit-text-stroke:2px var(--ink); }
.lede { max-width:700px; margin:36px 0 0; font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.65; }
.actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.button { display:inline-flex; gap:10px; align-items:center; padding:15px 19px; border:2px solid var(--ink); text-decoration:none; font-weight:700; text-transform:uppercase; }
.button.primary { background:var(--ink); color:var(--paper); }
.button.ghost { background:var(--cheese); color:#17150f; box-shadow:5px 5px 0 var(--ink); }
.spin-stage { position:relative; aspect-ratio:1; display:grid; place-items:center; }
.cheese { position:relative; width:min(28vw,370px); aspect-ratio:1.18; background:var(--cheese); border:7px solid var(--ink); border-radius:48% 52% 48% 52% / 45% 45% 55% 55%; box-shadow:15px 17px 0 var(--hot); transform:rotate(-12deg); animation:spin-pillow 7s ease-in-out infinite; }
.hole { position:absolute; display:block; background:#d8aa21; border:4px solid var(--ink); border-radius:50%; box-shadow:inset 3px 3px 0 rgba(0,0,0,.18); }
.h1 { width:18%; aspect-ratio:1; left:18%; top:20%; }.h2{width:12%;aspect-ratio:1;right:17%;top:17%}.h3{width:15%;aspect-ratio:1;left:29%;bottom:14%}.h4{width:9%;aspect-ratio:1;right:20%;bottom:28%}
.stitch { position:absolute; width:33%; border-top:3px dashed var(--ink); }.s1{left:8%;top:10%;transform:rotate(-18deg)}.s2{right:8%;bottom:9%;transform:rotate(-18deg)}
.orbit { position:absolute; border:2px dashed var(--ink); border-radius:50%; animation:orbit 13s linear infinite; }
.orbit-one { inset:6%; }.orbit-two { inset:18%; animation-direction:reverse; animation-duration:9s; border-color:var(--hot); }
.stage-note { position:absolute; right:0; bottom:5%; margin:0; padding:8px; background:var(--acid); color:#17150f; border:2px solid var(--ink); font-weight:700; transform:rotate(4deg); }
.ticker { position:absolute; bottom:0; left:0; width:max-content; display:flex; background:var(--ink); color:var(--paper); font-weight:700; line-height:40px; white-space:nowrap; animation:ticker 22s linear infinite; }
.ticker span { padding-right:1ch; }

.story,.manifesto,.connect { padding:clamp(70px,10vw,150px) clamp(18px,7vw,110px); border-bottom:2px solid var(--ink); }
.story { display:grid; grid-template-columns:.9fr 1.1fr; gap:8vw; background:var(--cheese); color:#17150f; }
h2 { margin:0; font:clamp(3rem,7.5vw,8.2rem)/.82 var(--display); letter-spacing:-.07em; text-transform:uppercase; }
.story-body { align-self:end; max-width:780px; }
.story-body p { line-height:1.7; }
.big-copy { font-size:clamp(1.35rem,2.5vw,2.35rem); line-height:1.3!important; letter-spacing:-.035em; }
.fact-note { margin-top:35px; padding:18px 0 0; border-top:2px solid #17150f; font-size:.78rem; }
.manifesto { background:var(--ink); color:var(--paper); }
.manifesto h2 span { color:var(--acid); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:70px; border:2px solid var(--paper); }
.steps article { min-height:270px; padding:25px; border-right:2px solid var(--paper); }
.steps article:last-child { border:0; }
.steps b { color:var(--hot); }.steps h3{font:clamp(1.5rem,3vw,2.8rem)/1 var(--display);text-transform:uppercase}.steps p{line-height:1.6;color:var(--muted)}
.connect { text-align:center; background:var(--hot); color:#17150f; }
.connect > p:not(.section-number):not(.booking) { max-width:700px; margin:28px auto; font-size:1.1rem; line-height:1.6; }
.social-link { max-width:1000px; margin:50px auto 25px; padding:20px 0; display:flex; justify-content:space-between; border-top:4px solid #17150f; border-bottom:4px solid #17150f; font:clamp(1.7rem,5.5vw,6rem)/1 var(--display); letter-spacing:-.06em; text-decoration:none; }
.social-link:hover span:first-child { transform:translateX(10px); }.social-link span{transition:transform .2s ease}
.booking { font-size:.76rem; text-transform:uppercase; }
footer { padding:30px clamp(18px,4vw,60px); display:flex; justify-content:space-between; gap:20px; font-size:.72rem; font-weight:700; text-transform:uppercase; }
@keyframes spin-pillow { 0%,100%{transform:rotate(-12deg) scale(1)} 45%{transform:rotate(12deg) scale(1.04)} 55%{transform:rotate(370deg) scale(.97)} }
@keyframes orbit { to { transform:rotate(360deg) } }
@keyframes ticker { to { transform:translateX(-50%) } }
@media (max-width:850px) { nav{display:none}.site-header{gap:12px}.theme-button{margin-left:auto;font-size:.7rem}.hero{grid-template-columns:1fr;padding-top:55px}.spin-stage{width:min(92vw,520px);margin:auto}.cheese{width:min(57vw,330px)}.story{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps article{border-right:0;border-bottom:2px solid var(--paper);min-height:0}.steps article:last-child{border-bottom:0}.social-link{font-size:clamp(1.2rem,7vw,3.5rem)}footer{flex-direction:column}.hero::before{mask-image:none}.stage-note{right:5%} }
@media (max-width:460px) { .brand span:last-child{font-size:.8rem}.theme-button{padding:8px}.theme-panel{right:16px;top:72px}.hero{padding-left:16px;padding-right:16px}.actions{flex-direction:column}.button{justify-content:center}.story,.manifesto,.connect{padding-left:18px;padding-right:18px}h1{font-size:clamp(3rem,18vw,5.1rem)} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.cheese,.orbit,.ticker{animation:none!important}.social-link span{transition:none} }