:root {
  --ink: #21162d;
  --midnight: #170e2d;
  --violet: #39204f;
  --cream: #fffaf1;
  --paper: #ffffff;
  --muted: #6d6475;
  --line: #ddd3e3;
  --red: #ef476f;
  --orange: #f78c3d;
  --yellow: #ffd166;
  --green: #06d6a0;
  --blue: #118ab2;
  --purple: #9b5de5;
  --max: 1180px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 1rem; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .65rem 1rem; color: white; background: var(--midnight); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: .65rem max(1.25rem, calc((100vw - var(--max)) / 2)); color: white; background: rgba(23,14,45,.96); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.site-name { display: flex; gap: .8rem; align-items: center; color: white; font-size: .97rem; letter-spacing: .02em; text-decoration: none; }
.site-name b { display: block; font-family: var(--serif); font-size: 1.12rem; line-height: 1; }
.mini-window { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 33px; height: 42px; padding: 3px; overflow: hidden; background: #0b0712; border: 1px solid rgba(255,255,255,.45); border-radius: 50% 50% 4px 4px / 35% 35% 4px 4px; }
.mini-window i:nth-child(1) { background: var(--red); }.mini-window i:nth-child(2) { background: var(--yellow); }.mini-window i:nth-child(3) { background: var(--green); }.mini-window i:nth-child(4) { background: var(--purple); }
.site-nav { display: flex; gap: .35rem; align-items: center; }
.site-nav a { padding: .55rem .9rem; color: rgba(255,255,255,.76); font-size: .92rem; text-decoration: none; border-radius: 99px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: white; background: rgba(255,255,255,.12); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; color: white; background: transparent; border: 0; }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: currentColor; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); width: 100%; height: calc(100svh - 74px); min-height: 580px; max-height: 820px; overflow: hidden; color: white; background: radial-gradient(circle at 12% 18%, #4b2761 0, transparent 32%), linear-gradient(145deg, #170e2d 15%, #28143d 62%, #110a20 100%); }
.hero::after { position: absolute; inset: auto 0 0; height: 9px; content: ""; background: linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple)); }
.hero-copy { z-index: 2; align-self: center; width: min(700px, 100%); padding: clamp(2.5rem,6vh,5rem) clamp(1.4rem,4vw,4rem) clamp(2.5rem,6vh,5rem) max(1.4rem,calc((100vw - var(--max))/2)); }
.eyebrow { margin: 0 0 1rem; color: #fff0aa; font-size: .77rem; font-weight: 800; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.eyebrow.dark { color: #6d2d88; }
h1, h2, h3 { margin-top: 0; font-family: var(--serif); line-height: 1.04; letter-spacing: -.025em; }
h1 { max-width: 760px; margin-bottom: 1.15rem; font-size: clamp(3.1rem,min(6.2vw,10vh),6.1rem); font-weight: 500; }
h1 em { color: #ffd166; font-weight: 500; }
h2 { margin-bottom: 1.2rem; font-size: clamp(2.35rem,4.5vw,4.3rem); font-weight: 500; }
h3 { margin-bottom: .55rem; font-size: 1.45rem; }
.hero-intro { max-width: 590px; margin: 0 0 1.45rem; color: rgba(255,255,255,.84); font-family: var(--serif); font-size: clamp(1.08rem,1.7vw,1.32rem); line-height: 1.48; }
.event-card { display: grid; grid-template-columns: repeat(3,1fr); max-width: 720px; margin: 0 0 1.45rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17); border-radius: 15px; backdrop-filter: blur(14px); }
.event-card > div { padding: .78rem 1rem; }
.event-card > div + div { border-left: 1px solid rgba(255,255,255,.13); }
.event-card strong, .event-card span { display: block; }
.event-card strong { font-size: .98rem; line-height: 1.35; }
.event-card span:last-child { color: rgba(255,255,255,.66); font-size: .84rem; }
.meta-label { margin-bottom: .45rem; color: #ffe28b !important; font-size: .69rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { display: inline-flex; min-height: 48px; padding: .72rem 1.2rem; align-items: center; justify-content: center; font-weight: 800; line-height: 1.2; text-decoration: none; border: 2px solid transparent; border-radius: 5px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--midnight); background: #ffd166; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.button-primary:hover { background: #ffe08e; }
.button-ghost { color: white; border-color: rgba(255,255,255,.55); }
.button-ghost:hover { background: rgba(255,255,255,.1); }
.button-dark { color: white; background: var(--midnight); }

.hero-art { position: relative; height: 100%; min-height: 0; }
.window-frame { position: absolute; z-index: 1; top: 50%; right: clamp(1.3rem,4vw,5rem); width: min(35vw,490px); height: min(88%,700px); overflow: hidden; background: #10091b; border: 12px solid #0a0710; border-bottom-width: 18px; border-radius: 52% 52% 8px 8px / 32% 32% 8px 8px; box-shadow: 0 22px 80px rgba(0,0,0,.52), inset 0 0 0 3px rgba(255,255,255,.13); transform: translateY(-49%); }
.pane { position: absolute; filter: saturate(1.13); box-shadow: inset 0 0 38px rgba(255,255,255,.23); }
.pane-1 { inset: 1% 51% 68% 2%; background:#ef476f; clip-path: polygon(100% 4%,100% 100%,0 100%,16% 46%,52% 13%); }
.pane-2 { inset: 1% 2% 68% 51%; background:#f78c3d; clip-path: polygon(0 4%,48% 13%,84% 46%,100% 100%,0 100%); }
.pane-3 { inset: 33% 67% 42% 2%; background:#ffd166; clip-path: polygon(0 0,100% 0,82% 100%,0 80%); }
.pane-4 { inset: 33% 35% 42% 35%; background:#06d6a0; clip-path: polygon(5% 0,95% 0,100% 82%,50% 100%,0 82%); }
.pane-5 { inset: 33% 2% 42% 67%; background:#118ab2; clip-path: polygon(0 0,100% 0,100% 80%,18% 100%); }
.pane-6 { inset: 59% 68% 19% 2%; background:#35c4d5; clip-path: polygon(0 0,84% 12%,100% 100%,0 100%); }
.pane-7 { inset: 59% 36% 19% 34%; background:#7868e6; clip-path: polygon(50% 0,100% 18%,86% 100%,14% 100%,0 18%); }
.pane-8 { inset: 59% 2% 19% 66%; background:#c05ccf; clip-path: polygon(16% 12%,100% 0,100% 100%,0 100%); }
.pane-9 { inset: 82% 69% 1% 2%; background:#ef476f; clip-path: polygon(0 0,100% 0,84% 100%,0 100%); }
.pane-10 { inset: 82% 36% 1% 33%; background:#f78c3d; clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); }
.pane-11 { inset: 82% 2% 1% 66%; background:#ffd166; clip-path: polygon(0 0,100% 0,100% 100%,16% 100%); }
.pane-12 { inset: 25% 43% 51% 43%; z-index: 2; background: white; border-radius: 50%; box-shadow: 0 0 50px rgba(255,255,255,.6); }
.window-heart { position: absolute; z-index: 3; top: 46%; left: 50%; padding: .55rem .8rem; color: white; font-size: .75rem; font-weight: 900; letter-spacing: .18em; background: rgba(18,10,31,.8); transform: translate(-50%,-50%) rotate(-4deg); }
.color-pool { position: absolute; right: -8%; bottom: -16%; width: 110%; height: 48%; opacity: .45; background: radial-gradient(ellipse at 50% 30%,rgba(255,209,102,.65),transparent 25%),radial-gradient(ellipse at 25% 45%,rgba(239,71,111,.6),transparent 34%),radial-gradient(ellipse at 75% 45%,rgba(6,214,160,.5),transparent 35%); filter: blur(40px); transform: rotate(-8deg); }

.section-pad { padding: clamp(5rem,9vw,9rem) max(1.4rem,calc((100vw - var(--max))/2)); }
.section-heading { max-width: 760px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.08rem; }
.welcome { background: var(--paper); }
.welcome-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem,8vw,8rem); margin-top: 2.5rem; align-items: center; }
.welcome-copy { max-width: 650px; color: #4d4554; font-family: var(--serif); font-size: 1.25rem; }
.welcome-copy p:first-child { margin-top: 0; }
.prism-quote { position: relative; margin: 0; padding: 3rem 2.5rem; overflow: hidden; color: white; background: linear-gradient(135deg,#50245f,#21162d); border-radius: 50% 50% 12px 12px / 18% 18% 12px 12px; font-family: var(--serif); font-size: clamp(1.55rem,3vw,2.5rem); line-height: 1.25; box-shadow: 18px 18px 0 #ffd166; }
.prism-quote::after { position: absolute; right: -15%; bottom: -40%; width: 70%; aspect-ratio: 1; content:""; background: conic-gradient(from 25deg,var(--red),var(--yellow),var(--green),var(--blue),var(--purple),var(--red)); opacity: .34; clip-path: polygon(50% 0,100% 100%,0 100%); }
.prism-quote > span { display: block; height: 38px; color: #ffd166; font-size: 5rem; line-height: .8; }
.potluck-callout { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; min-height: 470px; overflow: hidden; color: white; background: var(--midnight); }
.callout-copy { align-self: center; max-width: 680px; padding: 5rem max(1.4rem,calc((100vw - var(--max))/2)) 5rem 4rem; }
.callout-copy p { max-width: 600px; color: rgba(255,255,255,.75); font-size: 1.12rem; }
.callout-shards { position: relative; min-height: 380px; background: #0e081a; }
.callout-shards i { position:absolute; inset:auto; border: 7px solid #09060f; box-shadow: inset 0 0 35px rgba(255,255,255,.2); transform: rotate(8deg); }
.callout-shards i:nth-child(1){left:-4%;top:-9%;width:55%;height:70%;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 82%)}
.callout-shards i:nth-child(2){left:36%;top:-5%;width:58%;height:58%;background:var(--yellow);clip-path:polygon(0 0,100% 20%,65% 100%,8% 80%)}
.callout-shards i:nth-child(3){left:8%;top:52%;width:53%;height:55%;background:var(--green);clip-path:polygon(0 10%,80% 0,100% 90%,20% 100%)}
.callout-shards i:nth-child(4){left:54%;top:42%;width:48%;height:69%;background:var(--blue);clip-path:polygon(20% 0,100% 20%,72% 100%,0 76%)}
.callout-shards i:nth-child(5){left:30%;top:30%;width:36%;height:48%;background:var(--purple);clip-path:polygon(50% 0,100% 42%,70% 100%,0 70%)}
.text-link { display: inline-block; margin-top: .6rem; color: #6c2d84; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.text-link.light { color: #ffe28b; }
.logo-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; margin-top: 3rem; }
.logo-card { display: flex; min-height: 215px; padding: 1.4rem 1rem; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; text-align: center; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 9px 25px rgba(44,25,56,.06); }
.logo-card img { width: 100%; max-width: 138px; height: 108px; object-fit: contain; }
.logo-card span { color: #54495b; font-size: .78rem; line-height: 1.35; }
.logo-card.logo-dark { background: #231633; border-color: #3b2b4c; }
.logo-card.logo-dark img { max-width: 170px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
.logo-card.logo-dark span { color: rgba(255,255,255,.82); }
.wordmark-card strong { font-family: var(--serif); font-size: 1.12rem; line-height: 1.18; }
.wordmark-card small { color: var(--muted); text-transform: uppercase; letter-spacing: .13em; }
.friends-mark { display: grid; width: 66px; aspect-ratio: 1; margin: 0 !important; place-items: center; color: white !important; background: var(--blue); border-radius: 50%; font-family: var(--serif); font-size: 2rem !important; }
.final-cta { display: flex; gap: 2rem; align-items: center; justify-content: space-between; background: #f2eaf4; }
.final-cta h2 { max-width: 760px; margin-bottom: 0; }
.site-footer { display: flex; gap: 2rem; min-height: 150px; padding: 2.4rem max(1.4rem,calc((100vw - var(--max))/2)); align-items: center; justify-content: space-between; color: rgba(255,255,255,.7); background: #10091d; font-size: .86rem; }
.site-footer div { display:flex; flex-direction:column; }
.site-footer strong { color:white; font-family:var(--serif); font-size:1rem; }
.site-footer div:last-child { text-align:right; }
.site-footer a { color:white; text-underline-offset:3px; }

.page-hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; min-height: clamp(390px,52svh,490px); overflow: hidden; color: white; background: radial-gradient(circle at 80% 30%,#572565,transparent 30%),linear-gradient(140deg,#170e2d,#2c163f); }
.page-hero::after { position:absolute; inset:auto 0 0; height:7px; content:""; background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple)); }
.page-hero-copy { align-self:center; max-width:760px; padding: clamp(3rem,6vh,4.5rem) 2rem clamp(3rem,6vh,4.5rem) max(1.4rem,calc((100vw - var(--max))/2)); }
.page-hero h1 { margin-bottom:1rem; font-size:clamp(2.8rem,min(5.2vw,8vh),5rem); }
.page-hero-copy > p:last-of-type { max-width:650px; color:rgba(255,255,255,.78); font-family:var(--serif); font-size:1.25rem; }
.page-hero-button { margin-top:.7rem; }
.small-window { position:absolute; top:50%; right:max(3rem,calc((100vw - var(--max))/2)); display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:300px; height:390px; padding:10px; overflow:hidden; background:#09060e; border:10px solid #09060e; border-radius:52% 52% 7px 7px / 30% 30% 7px 7px; transform:translateY(-45%) rotate(6deg); box-shadow:0 30px 70px rgba(0,0,0,.45); }
.small-window i { box-shadow:inset 0 0 28px rgba(255,255,255,.25); }
.small-window i:nth-child(1){background:var(--red);}.small-window i:nth-child(2){background:var(--orange);}.small-window i:nth-child(3){background:var(--yellow);}.small-window i:nth-child(4){background:var(--green);}.small-window i:nth-child(5){background:var(--blue);}.small-window i:nth-child(6){background:var(--purple);}
.small-window.alt { transform:translateY(-45%) rotate(-5deg); }.small-window.alt i:nth-child(1){background:#c05ccf}.small-window.alt i:nth-child(2){background:#118ab2}.small-window.alt i:nth-child(3){background:#06d6a0}.small-window.alt i:nth-child(4){background:#ffd166}.small-window.alt i:nth-child(5){background:#f78c3d}.small-window.alt i:nth-child(6){background:#ef476f}
.split-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,8rem); background:white; }
.prose { max-width:720px; color:#504758; font-size:1.08rem; }
.prose p:first-child { margin-top:0; }
.care-note { margin-top:2rem; padding:1.4rem 1.5rem; background:#fff5d9; border-left:6px solid var(--yellow); }
.care-note p { margin:.35rem 0 0; }
.allergen-section { background:#f3ecf5; }
.allergen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; max-width:900px; margin:3rem auto 0; padding:0; list-style:none; }
.allergen-grid li { position:relative; display:flex; min-height:86px; padding:1rem; align-items:center; justify-content:center; overflow:hidden; background:white; border:1px solid #ded3e1; border-radius:6px; font-family:var(--serif); font-size:1.25rem; font-weight:700; }
.allergen-grid li::before { position:absolute; inset:0 auto 0 0; width:9px; content:""; background:var(--tone); }
.cooking-section { background:white; }
.care-list { max-width:850px; margin:3rem 0 0 auto; padding:0; list-style:none; }
.care-list li { display:grid; grid-template-columns:70px 1fr; gap:1.2rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.care-list li > span { color:#873c9c; font-family:var(--serif); font-size:1.8rem; }
.care-list strong { font-family:var(--serif); font-size:1.3rem; }
.care-list p { margin:.2rem 0 0; color:var(--muted); }
.disclaimer { max-width:850px; margin:2rem 0 0 auto; padding:1.2rem 1.4rem; color:#5e425b; background:#f5edf7; border-radius:5px; font-weight:700; }
.recipe-banner { position:relative; display:grid; grid-template-columns:.65fr 1.35fr; min-height:390px; color:white; background:var(--midnight); }
.recipe-banner > div:last-child { align-self:center; max-width:720px; padding:4rem 2rem; }
.recipe-banner p:last-child { color:rgba(255,255,255,.72); font-size:1.1rem; }
.recipe-glass { position:relative; overflow:hidden; }
.recipe-glass i { position:absolute; border:7px solid #09060e; transform:rotate(7deg); }
.recipe-glass i:nth-child(1){inset:-15% 48% 25% -12%;background:var(--red);}.recipe-glass i:nth-child(2){inset:20% 10% 34% 32%;background:var(--green);}.recipe-glass i:nth-child(3){inset:55% 23% -20% 3%;background:var(--purple);}

.recipes-window { transform:translateY(-45%) rotate(-4deg); }
.recipes-window i:nth-child(1){background:var(--purple)}.recipes-window i:nth-child(2){background:var(--red)}.recipes-window i:nth-child(3){background:var(--blue)}.recipes-window i:nth-child(4){background:var(--yellow)}.recipes-window i:nth-child(5){background:var(--green)}.recipes-window i:nth-child(6){background:var(--orange)}
.recipe-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,8rem); background:white; }
.recipe-library { background:#f3ecf5; }
.recipe-filters { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:.8rem; max-width:1120px; margin:3rem auto 1.25rem; padding:1.1rem; align-items:end; background:white; border:1px solid #d9cfdd; border-radius:8px; box-shadow:0 9px 28px rgba(44,25,56,.06); }
.recipe-filters label { display:block; }
.recipe-filters label span { display:block; margin-bottom:.35rem; color:#55485c; font-size:.76rem; font-weight:800; letter-spacing:.04em; }
.recipe-filters select { width:100%; min-height:46px; padding:.6rem 2.2rem .6rem .7rem; color:var(--ink); background:#fffdfa; border:1px solid #bcaec1; border-radius:4px; }
.filter-reset { min-height:46px; padding:.6rem .9rem; color:#5f356d; font-weight:800; background:#f4edf6; border:1px solid #d4c6d9; border-radius:4px; cursor:pointer; }
.filter-reset:hover { background:#e9dced; }
.recipe-results-bar { display:flex; max-width:1120px; margin:0 auto 1.1rem; align-items:center; justify-content:space-between; color:#655a6c; font-size:.86rem; }
.recipe-results-bar p { margin:0; }
.sample-dot { display:inline-block; width:.65rem; height:.65rem; margin-right:.35rem; background:var(--purple); border-radius:50%; }
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; max-width:1120px; margin:0 auto; }
.recipe-card { overflow:hidden; background:white; border:1px solid #d9cfdd; border-radius:8px; box-shadow:0 10px 28px rgba(44,25,56,.07); }
.recipe-card[hidden] { display:none; }
.recipe-card-glass { position:relative; height:112px; overflow:hidden; background:var(--midnight); }
.recipe-card-glass i { position:absolute; width:48%; height:145%; border:5px solid #10091d; transform:rotate(18deg); box-shadow:inset 0 0 22px rgba(255,255,255,.25); }
.recipe-card-glass i:nth-child(1){top:-35%;left:-5%;background:var(--card-one)}.recipe-card-glass i:nth-child(2){top:-15%;left:31%;background:var(--card-two)}.recipe-card-glass i:nth-child(3){top:-35%;right:-10%;background:var(--card-three)}
.tone-red{--card-one:#ef476f;--card-two:#f78c3d;--card-three:#ffd166}.tone-orange{--card-one:#f78c3d;--card-two:#ffd166;--card-three:#ef476f}.tone-yellow{--card-one:#ffd166;--card-two:#06d6a0;--card-three:#118ab2}.tone-green{--card-one:#06d6a0;--card-two:#118ab2;--card-three:#7868e6}.tone-blue{--card-one:#118ab2;--card-two:#7868e6;--card-three:#c05ccf}.tone-purple{--card-one:#7868e6;--card-two:#c05ccf;--card-three:#ef476f}
.recipe-card-body { padding:1.4rem; }
.recipe-card-body h3 { margin:.85rem 0 .7rem; font-size:1.65rem; }
.recipe-card-body > p { color:#655a6c; }
.recipe-badges { display:flex; flex-wrap:wrap; gap:.35rem; }
.recipe-badges span { padding:.25rem .55rem; color:#285846; background:#def5e9; border-radius:99px; font-size:.7rem; font-weight:900; letter-spacing:.03em; }
.recipe-badges .allergen-badge { color:#743547; background:#fde3e9; }
.recipe-card dl { display:grid; grid-template-columns:1fr 1fr; margin:1rem 0; padding:.8rem 0; border-block:1px solid #e8e0ea; }
.recipe-card dl div + div { padding-left:.8rem; border-left:1px solid #e8e0ea; }
.recipe-card dt { color:#796d80; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.recipe-card dd { margin:.15rem 0 0; font-family:var(--serif); font-weight:700; line-height:1.25; }
.recipe-caution { min-height:3.5rem; margin:0 0 1rem; font-size:.82rem; line-height:1.45; }
.recipe-caution.allergen { padding:.65rem .7rem; color:#70394a; background:#fff0f3; border-left:4px solid var(--red); }
.recipe-link { display:inline-block; color:#692b80; font-size:.88rem; font-weight:900; text-decoration-thickness:2px; text-underline-offset:4px; }
.recipe-actions { display:flex; gap:.65rem; align-items:center; justify-content:space-between; }
.ingredient-button { min-height:40px; padding:.5rem .7rem; color:#fff; background:#5d2a70; border:1px solid #5d2a70; border-radius:4px; font-size:.82rem; font-weight:900; cursor:pointer; }
.ingredient-button:hover { background:#472055; }
.recipe-empty { max-width:700px; margin:2rem auto 0; padding:2rem; text-align:center; background:white; border:1px solid #d9cfdd; }
.recipe-empty p { margin-bottom:0; color:var(--muted); }
.recipe-next { display:flex; gap:3rem; align-items:center; justify-content:space-between; background:#fff5d9; }
.recipe-next > div { max-width:780px; }
.recipe-next h2 { margin-bottom:1rem; }
.recipe-next p:last-child { color:#5f5663; font-size:1.08rem; }
.ingredient-dialog { width:min(720px,calc(100% - 2rem)); max-height:calc(100svh - 2rem); padding:0; color:var(--ink); background:white; border:0; border-radius:10px; box-shadow:0 28px 90px rgba(15,7,25,.42); }
.ingredient-dialog::backdrop { background:rgba(16,9,29,.78); backdrop-filter:blur(4px); }
.ingredient-dialog-inner { position:relative; padding:clamp(1.5rem,5vw,3rem); }
.dialog-close { position:absolute; top:1rem; right:1rem; display:grid; width:42px; height:42px; padding:0; place-items:center; color:#fff; background:var(--midnight); border:0; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; }
.ingredient-kicker { margin:0 3rem .45rem 0; color:#74368b; font-size:.75rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.ingredient-dialog h2 { max-width:580px; margin-bottom:.35rem; font-size:clamp(2.1rem,5vw,3.2rem); }
.ingredient-type { margin:0 0 1.8rem; color:#6b5e71; font-weight:800; }
.ingredient-dialog h3 { padding-bottom:.55rem; border-bottom:2px solid #dcd1e0; }
.ingredient-dialog ul { columns:2; column-gap:3rem; margin:0 0 1.5rem; padding-left:1.25rem; }
.ingredient-dialog li { margin:0 0 .55rem; break-inside:avoid; line-height:1.45; }
.ingredient-reminder { padding:1rem; color:#5e425b; background:#fff5d9; border-left:5px solid var(--yellow); font-size:.88rem; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.dialog-cancel { color:var(--ink); background:#f4edf6; border-color:#d4c6d9; }

.roles-section { background:white; }
.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }
.role-card { position:relative; min-height:245px; padding:2rem 1.6rem; overflow:hidden; background:#fffdf8; border:1px solid var(--line); border-radius:8px; }
.role-card::after { position:absolute; right:-28px; bottom:-38px; width:110px; height:140px; content:""; background:var(--tone); opacity:.18; clip-path:polygon(50% 0,100% 100%,0 82%); transform:rotate(15deg); }
.role-card > span { display:inline-block; margin-bottom:2.5rem; color:#5f4467; font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; border-bottom:4px solid var(--tone); }
.role-card p { position:relative; z-index:1; margin-bottom:0; color:var(--muted); }
.form-section { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(3rem,8vw,8rem); color:white; background:linear-gradient(145deg,#170e2d,#311842); }
.form-intro { align-self:start; position:sticky; top:120px; }
.form-intro p { color:rgba(255,255,255,.7); }
.form-prism { display:flex; gap:8px; height:100px; margin-top:3rem; align-items:flex-end; }
.form-prism i { width:31%; clip-path:polygon(50% 0,100% 100%,0 82%); }
.form-prism i:nth-child(1){height:70%;background:var(--red)}.form-prism i:nth-child(2){height:100%;background:var(--yellow)}.form-prism i:nth-child(3){height:82%;background:var(--green)}
.volunteer-form { padding:clamp(1.5rem,4vw,3rem); color:var(--ink); background:white; border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.25); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.volunteer-form > label, .field-row label { display:block; margin-bottom:1.15rem; }
.volunteer-form label > span, .volunteer-form legend { display:block; margin-bottom:.45rem; font-size:.9rem; font-weight:800; }
.volunteer-form small { color:var(--muted); font-weight:400; }
.volunteer-form input[type="text"],.volunteer-form input[type="email"],.volunteer-form input[type="tel"],.volunteer-form textarea { width:100%; padding:.75rem .8rem; color:var(--ink); background:#fffdfa; border:1px solid #bcaec1; border-radius:4px; }
.volunteer-form textarea { resize:vertical; }
.volunteer-form fieldset { margin:1rem 0 1.5rem; padding:0; border:0; }
.volunteer-form legend { margin-bottom:.8rem; font-family:var(--serif); font-size:1.25rem; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.check-grid label { display:flex; padding:.7rem .8rem; align-items:center; gap:.65rem; background:#f7f2f8; border:1px solid #e1d7e4; border-radius:4px; cursor:pointer; }
.check-grid label > span { margin:0; font-size:.86rem; }
.check-grid input,.consent input { width:19px; height:19px; accent-color:#6d2d88; }
.consent { display:flex !important; gap:.7rem; align-items:flex-start; margin:1.2rem 0 1.5rem !important; }
.consent span { margin:0 !important; font-size:.84rem !important; font-weight:500 !important; }
.form-status { margin:1rem 0 0; color:#146c51; font-weight:800; }

:focus-visible { outline:3px solid #ffd166; outline-offset:3px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; }
  .hero-copy { width:100%; padding-right:34%; }
  .hero-art { position:absolute; inset:0 0 0 50%; min-height:0; opacity:.53; }
  .window-frame { right:-75px; width:370px; height:86%; }
  .logo-grid { grid-template-columns:repeat(3,1fr); }
  .role-grid { grid-template-columns:repeat(2,1fr); }
  .small-window { right:-55px; opacity:.65; }
  .page-hero-copy { z-index:2; padding-right:34%; }
  .recipe-filters { grid-template-columns:repeat(2,1fr); }
  .filter-reset { grid-column:1 / -1; }
  .recipe-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px) {
  .nav-toggle { display:block; }
  .site-nav { position:absolute; top:74px; right:0; left:0; display:none; padding:.7rem 1.25rem 1rem; align-items:stretch; flex-direction:column; background:var(--midnight); border-top:1px solid rgba(255,255,255,.1); }
  .site-nav.is-open { display:flex; }
  .site-nav a { padding:.75rem 1rem; }
  .hero { height:auto; min-height:0; max-height:none; }
  .hero-copy { padding:4rem 1.4rem 4.5rem; }
  .hero-art { inset:0 0 0 45%; opacity:.3; }
  .window-frame { top:2rem; right:-150px; width:350px; height:88%; min-height:470px; transform:rotate(3deg); }
  .hero-intro { color:rgba(255,255,255,.92); }
  .event-card { grid-template-columns:1fr; }
  .event-card > div + div { border-top:1px solid rgba(255,255,255,.13); border-left:0; }
  .welcome-grid,.potluck-callout,.split-section,.recipe-banner,.form-section,.page-hero,.recipe-intro { grid-template-columns:1fr; }
  .callout-shards { min-height:220px; }
  .callout-copy { padding:4rem 1.4rem; }
  .logo-grid { grid-template-columns:repeat(2,1fr); }
  .final-cta { align-items:flex-start; flex-direction:column; }
  .site-footer { align-items:flex-start; flex-direction:column; }
  .site-footer div:last-child { text-align:left; }
  .page-hero { min-height:0; }
  .small-window { top:1.25rem; right:-150px; height:calc(100% - 2.5rem); min-height:310px; opacity:.35; transform:rotate(6deg); }
  .small-window.alt { transform:rotate(-5deg); }
  .page-hero-copy { padding:4rem 1.4rem; }
  .page-hero-copy > p:last-child { color:rgba(255,255,255,.9); }
  .allergen-grid { grid-template-columns:repeat(2,1fr); }
  .recipe-glass { min-height:180px; }
  .form-intro { position:static; }
  .recipe-next { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 500px) {
  h1 { font-size:2.8rem; }
  .site-name > span:last-child { font-size:.82rem; }
  .logo-grid,.role-grid,.field-row,.check-grid,.recipe-grid,.recipe-filters { grid-template-columns:1fr; }
  .logo-card { min-height:175px; }
  .allergen-grid { grid-template-columns:1fr; }
  .button-row .button { width:100%; }
  .hero-copy { padding-top:3.25rem; }
  .hero-art { left:54%; opacity:.23; }
  .event-card > div { padding:.68rem .85rem; }
  .prism-quote { padding:2.5rem 1.5rem; box-shadow:10px 10px 0 #ffd166; }
  .filter-reset { grid-column:auto; }
  .recipe-results-bar { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .recipe-actions { align-items:flex-start; flex-direction:column; }
  .ingredient-dialog ul { columns:1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}