@font-face{font-family:'Fraunces';src:url('fonts/fraunces-italic-latin.woff2') format('woff2');font-weight:500 700;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
:root{--bg:#fff5e1;--bg2:#ffe9c2;--card:#fffaf0;--ink:#2d1408;--mute:#6b4a35;--sun:#ffb703;--org:#ff7a1a;--chili:#e5352b;--cream:#fff1dc;--hero:#2d1408;
--disp:'Fraunces',Georgia,serif;--body:'DM Sans','Helvetica Neue',Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#220d08;--bg2:#2e130b;--card:#341810;--ink:#fff1dc;--mute:#d9b99a}}
:root[data-theme="dark"]{--bg:#220d08;--bg2:#2e130b;--card:#341810;--ink:#fff1dc;--mute:#d9b99a}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.7 var(--body)}
:focus-visible{outline:3px solid var(--chili);outline-offset:3px}
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:2rem;
padding:2.5rem clamp(1.2rem,5vw,5rem);background:linear-gradient(155deg,#ffd24a 0%,#ff9c32 48%,#e8452a 100%);color:var(--hero)}
h1{margin:0;font:italic 700 clamp(3.6rem,11vw,9rem)/.95 var(--disp);letter-spacing:-.02em}
.tag{font:600 clamp(1.2rem,2.4vw,1.8rem)/1.35 var(--body);max-width:22ch;margin:1.2rem 0 .7rem}
.lede{max-width:40ch;margin:0 0 1.8rem;font-size:1.1rem}
.art{width:min(100%,520px);height:auto;justify-self:center}
.btn{display:inline-block;padding:.85rem 2rem;border:0;border-radius:999px;font:800 1.1rem var(--body);cursor:pointer;background:#2d1408;color:var(--cream);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.s{padding:clamp(3rem,8vw,6rem) clamp(1.2rem,5vw,4rem);max-width:1100px;margin:0 auto}
.band{background:var(--bg2)}
h2{font:italic 700 clamp(2rem,4.5vw,3.2rem)/1.1 var(--disp);margin:0 0 1.4rem}
h3{margin:0 0 .4rem;font-size:1.25rem}
p{max-width:62ch;margin:0 0 1rem;color:var(--mute)}
.people{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:2rem;align-items:center}
.people figure{margin:0;text-align:center}
.ph{width:clamp(100px,14vw,160px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:italic 700 3.4rem var(--disp);color:var(--cream);background:linear-gradient(150deg,var(--sun),var(--org))}
.ph.l{background:linear-gradient(150deg,var(--org),var(--chili))}
.people figcaption{margin-top:.6rem;font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.card{background:var(--card);border-radius:16px;padding:1.5rem;border-top:6px solid var(--sun);box-shadow:0 6px 18px rgba(120,50,10,.12)}
.card.c2{border-color:var(--org)}.card.c3{border-color:var(--chili)}
.card p{margin:0}
.spice{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.5rem,5vw,3.5rem);align-items:center}
.cover{aspect-ratio:1;width:100%;border-radius:18px;display:flex;align-items:flex-end;padding:1.3rem;font:italic 700 2.2rem/1 var(--disp);color:var(--cream);
background:radial-gradient(circle at 72% 26%,#ffd24a 0 17%,transparent 18%),linear-gradient(160deg,#ff9c32,#e5352b);box-shadow:0 12px 30px rgba(120,50,10,.3)}
footer{text-align:center;padding:2rem 1rem 3rem;color:var(--mute);font-size:.95rem}
.social{display:flex;gap:1.3rem;justify-content:center;margin-bottom:1.2rem}
.social a{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--chili);color:var(--ink);transition:background .15s}
.social a:hover{background:var(--bg2)}
.grid svg,.social svg{fill:currentColor;flex:none;width:1.3em;height:1.3em}
.social svg{width:1.4rem;height:1.4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog{border:0;border-radius:22px;padding:clamp(1.4rem,4vw,2.2rem);width:min(92vw,620px);background:var(--card);color:var(--ink);box-shadow:0 0 0 3px var(--org),0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(30,10,4,.7)}
dialog h2{font-size:1.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.grid a{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1rem;border-radius:12px;background:var(--bg2);color:var(--ink);font-weight:600;text-decoration:none;transition:background .15s}
.grid a:hover{background:var(--sun);color:#2d1408}
.sub2{font-weight:800;margin:1.2rem 0 0;color:var(--chili)}
.or{margin:1.2rem 0 0;max-width:none}
.x{float:right;background:none;border:0;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;padding:.2rem .5rem}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:3rem}.art{width:min(80vw,380px)}
.people{grid-template-columns:1fr 1fr}.people>div{grid-column:1/-1}.spice{grid-template-columns:1fr}.cover{max-width:300px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.grid a,.social a{transition:none}}
.tag,.lede{color:var(--hero)}
.art{display:block;filter:drop-shadow(0 10px 18px rgba(80,25,5,.25))}
.face{display:block;width:clamp(110px,15vw,170px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--org)}
.face.carl{object-position:50% 45%}
[hidden]{display:none!important}
.soonmsg{color:var(--ink);font-size:1.2rem;line-height:1.5;max-width:none;margin:1rem 0 1.4rem}
.vframe{width:100%;max-width:300px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#2d1408;box-shadow:0 12px 30px rgba(120,50,10,.3)}
.vframe video{display:block;width:100%;height:100%;object-fit:cover}
