:root{--ink:#2B1B3D;--butter:#FFD23F;--basil:#1F7A56;--paper:#FFFDF6;--mist:#F1ECFA;--r:28px}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:Newsreader,Georgia,serif;font-size:1.15rem;line-height:1.7;color:var(--ink);background:var(--paper)}
h1,h2,h3,.logo,nav,.meta,.btn,.flogo,label,button{font-family:'Bricolage Grotesque',system-ui,sans-serif}
h1{font-size:clamp(2.6rem,8vw,6rem);line-height:.98;font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:2.2rem 0 1rem}
h3{font-size:1.3rem;line-height:1.2;font-weight:800}
a{color:var(--basil)}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:9}
.top{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,3rem);position:sticky;top:0;background:var(--butter);z-index:5}
.logo{font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;display:flex;gap:.5rem;align-items:center}.dot{color:var(--basil)}
nav{display:flex;gap:.4rem;flex-wrap:wrap}nav a{padding:.45rem 1rem;border-radius:99px;text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem}nav a:hover{background:var(--ink);color:var(--butter)}
.wrap{max-width:1100px;margin:auto;padding:0 clamp(1rem,4vw,2rem)}.narrow{max-width:760px;margin:auto;padding:3rem clamp(1rem,4vw,2rem) 5rem}
.hero{background:var(--butter);border-radius:0 0 60px 60px;padding:clamp(2rem,6vw,5rem) 0 clamp(3rem,7vw,6rem)}
.hero .wrap{display:grid;gap:2rem;grid-template-columns:1.3fr 1fr;align-items:center}
.hero p.lead{font-size:1.35rem;max-width:30ch;margin:1.2rem 0 1.8rem}
.plate{aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 14px var(--paper),0 0 0 16px var(--ink);display:grid;place-items:center;font-size:clamp(5rem,16vw,10rem);animation:spin 40s linear infinite}
.plate span{animation:spin 40s linear infinite reverse;display:block}
@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.btn{display:inline-block;background:var(--ink);color:var(--butter);padding:.8rem 1.6rem;border-radius:99px;font-weight:800;text-decoration:none;border:0;font-size:1.05rem;cursor:pointer}.btn:hover{background:var(--basil);color:#fff}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}
.cc{background:var(--c);color:var(--ink);text-decoration:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;padding:1.5rem;border-radius:var(--r) var(--r) var(--r) 6px;display:flex;flex-direction:column;gap:.6rem;transition:transform .2s}.cc span{font-size:2.6rem}.cc:hover{transform:rotate(-2deg) scale(1.03)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.rc{background:#fff;border:2px solid var(--ink);border-radius:6px var(--r) var(--r) var(--r);padding:1.4rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.5rem;box-shadow:6px 6px 0 var(--c)}.rc:hover{box-shadow:2px 2px 0 var(--c);transform:translate(4px,4px)}
.rc .em{font-size:2.4rem}.rc p{font-size:1rem;line-height:1.5}.meta{font-size:.9rem;font-weight:600;color:var(--basil)}
.band{background:var(--ink);color:var(--paper);padding:3rem 0;margin-top:4rem;border-radius:60px 60px 0 0}.band h2{margin-top:0}.band .btn{background:var(--butter);color:var(--ink)}
.phead{background:var(--c,var(--mist));padding:3rem 0 2.5rem;border-radius:0 0 50px 50px}.phead .meta{color:var(--ink)}
.rec{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:2.5rem;padding:2rem 0 4rem;align-items:start}
.ing{background:var(--mist);padding:1.5rem;border-radius:var(--r);position:sticky;top:5.5rem}.ing ul{list-style:none;padding:0}.ing li{padding:.35rem 0;display:flex;gap:.6rem;align-items:flex-start}.ing input{margin-top:.55rem;accent-color:var(--basil);width:1.1rem;height:1.1rem}
ol.steps{padding-left:1.4rem}ol.steps li{margin-bottom:1rem;padding-left:.4rem}ol.steps li::marker{font-family:'Bricolage Grotesque';font-weight:800;color:var(--basil)}
.crumbs{font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem;margin-bottom:1rem}.crumbs a{color:var(--ink)}
form{display:grid;gap:1rem}label{font-weight:600;display:grid;gap:.3rem}
input,textarea,select{font:inherit;padding:.8rem 1rem;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink)}
.narrow p,.narrow ul{margin-bottom:1rem}.narrow ul{padding-left:1.4rem}
.foot{background:var(--basil);color:#fff;padding:3rem 0 2rem;margin-top:0}.fwrap{max-width:1100px;margin:auto;padding:0 clamp(1rem,4vw,2rem)}.flogo{font-size:1.8rem;font-weight:800}
.foot nav{margin:1rem 0}.foot nav a{color:#fff;padding-left:0;padding-right:1.2rem}.foot nav a:hover{background:none;color:var(--butter);text-decoration:underline}.small{font-size:.9rem;opacity:.85}
.guest{background:var(--ink);color:var(--paper);min-height:80vh}.guest .top{background:transparent}.guest .logo{color:var(--butter)}
.invite{max-width:760px;margin:auto;padding:2rem clamp(1rem,4vw,2rem) 5rem;text-align:center}.invite h1{color:var(--butter);margin:1rem 0}
.menu{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:2rem;text-align:left;margin:2rem 0;border:4px double var(--ink);outline:6px solid var(--butter)}.menu li{margin-bottom:.6rem}
.invite form{text-align:left;background:var(--butter);color:var(--ink);padding:2rem;border-radius:var(--r)}
@media(max-width:760px){.hero .wrap,.rec{grid-template-columns:1fr}.plate{max-width:260px;margin:auto}.ing{position:static}}