/* ============================================================
   weeQuesters — design system (v2)
   Matched to the Fraunces × Jakarta sorbet pastel reference.
   ============================================================ */

:root{
  /* Sorbet pastel palette */
  --peach:#FFD2B8;     --peach-2:#FFB893;
  --mint:#C7EBD1;      --mint-2:#9FD9B0;
  --lavender:#DCD2F5;  --lavender-2:#B9A8EE;
  --butter:#FFE9A8;    --butter-2:#FFD466;
  --berry:#FFB7C9;     --berry-2:#F58FAA;
  --sky:#BEE3F2;       --sky-2:#83C4DC;

  --ink:#2A2438;
  --ink-2:#4D4360;
  --ink-3:#7A7290;
  --paper:#FFF7EE;
  --paper-2:#FBEFE0;
  --line:#2A2438;

  --f-display:'Fraunces','Georgia',serif;
  --f-text:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-hand:'Caveat',cursive;
  --f-mono:'DM Mono',ui-monospace,monospace;

  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;

  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px -16px rgba(42,36,56,.25);
  --shadow-pop:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 50px -20px rgba(42,36,56,.4);

  --easing-soft:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-text);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
}
::selection{background:var(--butter-2);color:var(--ink)}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* ---------- Layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.section{padding:96px 0;position:relative}
@media (max-width:720px){
  .section{padding:64px 0}
  .wrap{padding:0 24px}
}
@media (max-width:480px){
  .wrap{padding:0 22px}
}
/* Header gets a touch more padding so the logo never hugs the screen edge */
.site-header .wrap.nav{padding-left:max(28px, env(safe-area-inset-left, 28px));padding-right:max(28px, env(safe-area-inset-right, 28px))}
@media (max-width:720px){
  .site-header .wrap.nav{padding-left:24px;padding-right:18px}
}
@media (max-width:480px){
  .site-header .wrap.nav{padding-left:22px;padding-right:14px}
}

/* ---------- Typography ---------- */
.display{
  font-family:var(--f-display);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.92;
  font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;
}
.display em{
  font-style:italic;
  font-weight:500;
  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;
}
.hand{font-family:var(--f-hand);font-weight:700}
.mono{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}

/* ---------- Pills, buttons, cards ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 10px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid var(--ink);
  font-size:12.5px;font-weight:600;
  box-shadow:2px 2px 0 var(--ink);
}
.pill .dot{width:8px;height:8px;border-radius:99px;background:var(--berry-2)}

.btn{
  appearance:none;border:0;cursor:pointer;
  font-family:var(--f-text);font-weight:700;font-size:15px;
  padding:14px 22px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  border:1.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-secondary{background:#fff;color:var(--ink)}
.btn-accent{background:var(--butter-2);color:var(--ink)}
.btn-ghost-light{
  background:transparent;color:var(--paper);
  border:1.5px solid var(--paper);
  box-shadow:3px 3px 0 var(--paper);
}
.btn-ghost-light:hover{box-shadow:5px 5px 0 var(--paper)}
.btn-ghost-light:active{box-shadow:1px 1px 0 var(--paper)}

.card{
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

/* ---------- Sticker (blob bubble) ---------- */
.sticker{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--ink);
  border-radius:32px 18px 28px 22px;
  padding:10px 16px;
  font-weight:700;font-size:13.5px;
  box-shadow:3px 3px 0 var(--ink);
  background:var(--peach);
  white-space:nowrap;
}

/* ---------- Tape strip (decorative) ---------- */
.tape{
  position:absolute;
  width:80px;height:22px;
  background:rgba(255,209,184,.85);
  border:1px dashed rgba(0,0,0,.18);
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  z-index:2;
}

/* ---------- Squiggle underline accent ---------- */
.squig{position:relative;display:inline-block}
.squig::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:10px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'><path d='M0 7 Q 15 -2 30 7 T 60 7 T 90 7 T 120 7' fill='none' stroke='%23F58FAA' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat:repeat-x;background-size:120px 10px;
}

/* ---------- Filter chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:var(--paper-2);
  border:1.5px solid var(--ink);
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--f-text);
  color:var(--ink);
  transition:transform .15s ease, background .15s;
}
.chip[aria-pressed="true"]{
  background:var(--butter-2);transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 var(--ink);
}
.chip:hover{background:var(--butter)}

/* ---------- Animations ---------- */
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.wiggle:hover{animation:wiggle .5s ease-in-out}

@keyframes float{
  0%,100%{transform:translateY(0) rotate(var(--r0,0deg))}
  50%{transform:translateY(-10px) rotate(var(--r1,3deg))}
}
.float{animation:float 5s ease-in-out infinite}

/* Reveal on scroll — fail-open if JS missing */
.reveal{opacity:1;transform:none;transition:opacity .7s var(--easing-soft), transform .7s var(--easing-soft)}
html.js-ready .reveal{opacity:0;transform:translateY(24px)}
html.js-ready .reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){html.js-ready .reveal{opacity:1;transform:none}.float,.wiggle:hover{animation:none}}

/* Marquee */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Grain overlay */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><circle cx='2' cy='2' r='.6' fill='%232A2438'/><circle cx='30' cy='44' r='.5' fill='%232A2438'/><circle cx='70' cy='10' r='.5' fill='%232A2438'/><circle cx='100' cy='80' r='.7' fill='%232A2438'/><circle cx='50' cy='100' r='.6' fill='%232A2438'/><circle cx='15' cy='75' r='.4' fill='%232A2438'/><circle cx='85' cy='55' r='.5' fill='%232A2438'/></svg>");
}

/* Focus */
:focus-visible{outline:3px solid var(--lavender-2);outline-offset:2px;border-radius:6px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,247,238,.85);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1.5px solid var(--ink);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;height:72px;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);max-width:240px}
.logo-mark{width:38px;height:38px;flex-shrink:0}
.logo-img{
  max-height:40px;
  max-width:200px;
  width:auto;
  height:auto;
  display:block;
}
.logo-word{
  font-family:var(--f-display);font-weight:900;
  font-size:22px;letter-spacing:-.02em;line-height:1;
  white-space:nowrap;
}
.logo-word em{font-style:italic;font-weight:500}
.logo-word *{display:inline;margin:0;padding:0;font-size:inherit;line-height:inherit}

.nav-links{
  display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
}
.nav-links a{
  padding:10px 14px;font-size:14.5px;font-weight:600;
  text-decoration:none;border-radius:999px;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
  transition:background .15s;
}
.nav-links a:hover{background:var(--paper-2)}
.nav-links a.is-active{background:var(--butter)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .btn{padding:10px 16px;font-size:13.5px}

.hamburger{
  display:none;width:44px;height:44px;
  border:1.5px solid var(--ink);background:#fff;border-radius:12px;
  cursor:pointer;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 var(--ink);
  position:relative;z-index:51;
  -webkit-tap-highlight-color:rgba(0,0,0,.05);
  padding:0;
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
  touch-action:manipulation;
}
.hamburger:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.hamburger span,.hamburger span::before,.hamburger span::after{
  content:"";display:block;width:18px;height:2px;background:var(--ink);
  position:relative;border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
  pointer-events:none;
}
.hamburger span::before{position:absolute;top:-6px}
.hamburger span::after{position:absolute;top:6px}
.hamburger.is-open span{background:transparent}
.hamburger.is-open span::before{top:0;transform:rotate(45deg)}
.hamburger.is-open span::after{top:0;transform:rotate(-45deg)}

body.drawer-open{overflow:hidden}

@media (max-width:980px){
  .nav-links,.nav-actions{display:none}
  .hamburger{display:inline-flex}
}
@media (max-width:520px){
  .logo-word{font-size:18px}
  .logo-img{max-height:32px;max-width:140px}
  .logo{gap:6px;max-width:180px}
}
.mobile-drawer{
  border-top:1.5px solid var(--ink);
  background:var(--paper);padding:18px 28px 28px;
  position:absolute;top:100%;left:0;right:0;
  z-index:49;
  box-shadow:0 8px 16px rgba(42,36,56,.08);
}
.mobile-drawer[hidden]{display:none !important}
.mobile-drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mobile-drawer a{
  display:block;padding:12px 14px;border-radius:14px;
  font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);
}
.mobile-drawer a:hover{background:var(--paper-2)}
.mobile-drawer .mobile-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:32px 0 56px}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg .blob{
  position:absolute;
  border-radius:55% 45% 60% 40% / 55% 60% 40% 45%;
  opacity:.55;
}
.hero-bg .b1{top:60px;left:-80px;width:280px;height:280px;background:var(--mint)}
.hero-bg .b2{top:200px;right:-100px;width:360px;height:360px;background:var(--peach);border-radius:60% 40% 55% 45%;opacity:.5}
.hero-bg .b3{bottom:40px;left:30%;width:160px;height:160px;background:var(--lavender);border-radius:50% 60% 40% 50%}

.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.5fr .85fr;gap:32px;align-items:center;
  padding-top:40px;
}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;padding-top:24px}}

.hero-headline{
  font-size:clamp(44px,5.4vw,80px);
  line-height:1.05;margin:0 0 32px;
}
.hero-q{color:var(--berry-2)}
.hero-sub{
  font-size:19px;line-height:1.55;color:var(--ink-2);
  max-width:540px;margin:0 0 28px;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  margin-top:40px;
}
.hero-stat .display{font-size:38px}
.hero-stat-l{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.hero-stat-rule{width:1px;height:36px;background:var(--ink);opacity:.15}

.hero-mascot-frame{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:480px;
}
.hero-mascot-bowl{
  width:360px;height:420px;
  background:var(--paper-2);
  border:1.5px solid var(--ink);
  border-radius:55% 45% 50% 50% / 60% 55% 45% 40%;
  box-shadow:8px 8px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
@media (max-width:520px){
  .hero-mascot-frame{min-height:380px}
  .hero-mascot-bowl{width:280px;height:330px}
}
.hero-sticker-1{position:absolute;top:30px;left:20px;z-index:3;background:var(--butter);transform:rotate(-8deg)}
.hero-sticker-2{position:absolute;top:130px;right:8px;z-index:3;background:var(--mint-2);transform:rotate(6deg)}
.hero-sticker-3{position:absolute;bottom:70px;left:40px;z-index:3;background:var(--berry);transform:rotate(-4deg)}

/* ---------- Marquee ---------- */
.marquee{
  margin-top:48px;padding:16px 0;
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  background:var(--butter);
  overflow:hidden;white-space:nowrap;
}
.marquee-track{
  display:inline-flex;gap:36px;
  animation:marq 28s linear infinite;
  font-family:var(--f-display);font-size:26px;font-weight:700;font-style:italic;
  padding-right:36px;
}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

/* ---------- Section header ---------- */
.section-head{max-width:820px}
.section-head.center{text-align:center;margin:0 auto;max-width:760px}
.kicker{
  display:flex;gap:8px;align-items:center;
  color:var(--ink-3);margin-bottom:14px;
}
.section-head.center .kicker{justify-content:center}
.kicker::before{
  content:"";width:22px;height:1.5px;background:var(--ink);display:inline-block;
}
.section-title{font-size:clamp(40px,5.4vw,72px);margin:0 0 16px}
.section-sub{
  font-size:18px;line-height:1.5;color:var(--ink-2);
  margin:0;max-width:640px;
}
.section-head.center .section-sub{margin:0 auto}

/* ---------- Sub-brands (uniform 3×2 grid) ---------- */
.subs-head{text-align:center;max-width:680px;margin:0 auto 56px}
.subs-head .section-title{margin:0 auto 16px}
.subs-head .kicker{justify-content:center}
.subs-head .lead{
  font-size:16px;color:var(--ink-2);line-height:1.55;
  max-width:560px;margin:0 auto;
}

.subs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:920px){.subs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.subs-grid{grid-template-columns:1fr}}

.sub-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  padding:28px;position:relative;min-height:300px;
}
.sub-card .row{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:24px;gap:12px;
}
.sub-card .icon-square{
  width:56px;height:56px;border-radius:14px;
  background:rgba(255,255,255,.55);
  border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  flex-shrink:0;
}
.sub-card .stamp{
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--paper);
  padding:7px 14px;border-radius:999px;
  font-family:var(--f-hand);font-weight:700;font-size:15px;
  transform:rotate(-3deg);
  box-shadow:2px 2px 0 rgba(42,36,56,.15);
  white-space:nowrap;
}
.sub-card .sub-title{
  font-family:var(--f-text);font-weight:800;
  font-size:24px;line-height:1.15;letter-spacing:-.01em;
  margin:0 0 10px;
}
.sub-card .sub-desc{
  font-size:14.5px;line-height:1.55;color:var(--ink-2);
  margin:0 0 24px;
}
.sub-card .sub-cta{
  margin-top:auto;font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  align-self:flex-start;
}
.sub-card .sub-cta .arrow{
  display:inline-flex;width:22px;height:22px;
  align-items:center;justify-content:center;
  border-radius:99px;background:rgba(255,255,255,.4);
  border:1.5px solid var(--ink);font-size:12px;
  transition:transform .2s ease;
  text-decoration:none;
}
.sub-card:hover .sub-cta .arrow{transform:translateX(3px)}

/* Colour variants */
.sub-card.c-berry   {background:var(--berry)}
.sub-card.c-mint    {background:var(--mint)}
.sub-card.c-butter  {background:var(--butter)}
.sub-card.c-lavender{background:var(--lavender)}
.sub-card.c-sky     {background:var(--sky)}
.sub-card.c-peach   {background:var(--peach)}
.sub-card.c-ink{
  background:var(--ink);color:var(--paper);
}
.sub-card.c-ink .sub-title{color:var(--paper)}
.sub-card.c-ink .sub-desc{color:rgba(255,247,238,.75)}
.sub-card.c-ink .icon-square{
  background:var(--butter-2);border-color:var(--paper);
}
.sub-card.c-ink .stamp{
  background:var(--butter-2);color:var(--ink);
}
.sub-card.c-ink .sub-cta{color:var(--butter-2)}
.sub-card.c-ink .sub-cta .arrow{
  background:transparent;border-color:var(--butter-2);color:var(--butter-2);
}

/* ---------- Quest picker ---------- */
.qp-section{
  background:var(--paper-2);
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
}
.qp-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;
}
@media (max-width:880px){.qp-grid{grid-template-columns:1fr;gap:40px}}
.qp-controls .mono{color:var(--ink-3);margin-bottom:10px;display:block}
.qp-controls .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.qp-card{
  padding:32px;background:var(--peach);
  position:relative;
  border:1.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:4px 4px 0 var(--ink);
}
.qp-card .display{font-size:44px;line-height:.95;margin-bottom:14px}
.qp-card p{font-size:17px;line-height:1.5;color:var(--ink-2);margin:0 0 22px}
.qp-card .stickers-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}

/* ---------- Worksheets ---------- */
.ws-section{
  background:var(--paper-2);
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
}
.filter-row{display:flex;gap:24px;flex-wrap:wrap;margin:32px 0 24px}
.filter-row .mono{color:var(--ink-3);margin-bottom:8px;display:block}
.filter-row .chip-row{display:flex;gap:6px;flex-wrap:wrap}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:880px){.ws-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ws-grid{grid-template-columns:1fr}}
.ws-card{padding:22px;background:#fff;display:flex;flex-direction:column;gap:14px;height:100%}
.ws-thumb{
  position:relative;
  aspect-ratio:4/5;padding:18px;border-radius:var(--r);
  border:1.5px solid var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
}
.ws-thumb .mono{color:var(--ink-2)}
.ws-thumb .display{font-size:22px;line-height:1;color:var(--ink)}
.ws-thumb .ws-meta{
  display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;
}
.ws-thumb .ws-meta .badge{
  background:#fff;padding:3px 8px;border-radius:999px;
  border:1.5px solid var(--ink);font-weight:700;
}
.ws-card .row-bottom{display:flex;justify-content:space-between;align-items:center}
.ws-card .row-bottom .t{font-weight:700;font-size:14px}

/* ---------- Shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media (max-width:880px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shop-grid{grid-template-columns:1fr}}
.kit-card{padding:24px;position:relative}
.kit-card .placeholder{margin-bottom:18px}
.kit-card .display{font-size:32px;line-height:1;margin-bottom:10px}
.kit-card .price-tag{position:absolute;top:8px;right:36px;font-family:var(--f-hand);font-weight:700;font-size:24px}
.kit-card ul{
  list-style:none;padding:0;margin:0 0 18px;
  display:flex;flex-direction:column;gap:4px;font-size:13.5px;
}
.kit-card .stickers-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.kit-card .btn{width:100%;justify-content:center}
.shop-banner{
  display:flex;gap:20px;align-items:center;justify-content:center;
  margin-top:56px;padding:24px 32px;
  background:var(--butter);border:1.5px solid var(--ink);border-radius:999px;
  max-width:720px;margin-inline:auto;flex-wrap:wrap;
}
.shop-banner .hand{font-size:28px}

/* ---------- Olympiad (dark section) ---------- */
.oly{
  background:var(--ink);color:var(--paper);
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  position:relative;overflow:hidden;
}
.oly .blob{position:absolute;border-radius:60% 40% 50% 50%;opacity:.3;pointer-events:none}
.oly .blob.b1{top:80px;right:80px;width:240px;height:240px;background:var(--berry-2)}
.oly .blob.b2{bottom:60px;left:100px;width:180px;height:180px;background:var(--mint-2);border-radius:50% 50% 60% 40%}
.oly-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:2}
@media (max-width:880px){.oly-grid{grid-template-columns:1fr}}
.oly h2{font-size:clamp(48px,6vw,88px);margin:0 0 22px;color:var(--paper)}
.oly h2 em{color:var(--butter-2)}
.oly .kicker{color:var(--butter-2)}
.oly .kicker::before{background:var(--butter-2)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:520px;margin-bottom:32px}
.cd-cell{
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--paper);border-radius:18px;
  padding:16px 8px;text-align:center;
}
.cd-cell .display{font-size:44px;line-height:1}
.cd-cell .mono{font-size:10px;color:var(--ink-3);margin-top:4px}
.oly-tracks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.track{
  display:block;text-decoration:none;color:var(--ink);
  padding:22px;border:1.5px solid var(--paper);
  border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--paper);
  transition:transform .2s;
}
.track:hover{transform:translate(-2px,-2px)}
.track .badge{
  width:32px;height:32px;border-radius:10px;background:#fff;
  border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-family:var(--f-display);font-weight:900;
}
.track .display{font-size:26px;line-height:1;margin-bottom:6px}
.track .mono{color:var(--ink-2)}

/* ---------- Blog ---------- */
.blog-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:36px;flex-wrap:wrap;gap:24px;
}
.blog-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;
}
.blog-grid > a:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:880px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-grid > a:first-child{grid-column:span 2;grid-row:auto}
}
@media (max-width:520px){
  .blog-grid{grid-template-columns:1fr}
  .blog-grid > a:first-child{grid-column:auto}
}
.post{display:block;text-decoration:none;color:var(--ink);padding:22px;height:100%}
.post-feature{padding:28px}
.post .tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.post .tags span{
  padding:5px 10px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;
  font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.08em;
}
.post .tags span.alt{background:rgba(255,255,255,.5)}
.post .display{font-size:24px;line-height:1;margin-bottom:10px}
.post-feature .display{font-size:44px}
.post p{font-size:14px;color:var(--ink-2);margin:0 0 16px;line-height:1.5}
.post-feature p{font-size:16px}
.post .author{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--ink-3)}

/* ---------- Community / About ---------- */
.com-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
@media (max-width:880px){.com-grid{grid-template-columns:1fr}}
.com-grid p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:540px;margin:20px 0}
.com-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.placeholder{
  width:100%;background-size:20px 20px;
  border:1.5px solid var(--ink);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;position:relative;
  aspect-ratio:4/3;
}
.placeholder .label{
  font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.08em;
  background:#fff;padding:5px 10px;border:1.5px solid var(--ink);border-radius:999px;
}

.community-row{margin-top:96px;display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
@media (max-width:880px){.community-row{grid-template-columns:1fr}}
.newsletter-card{
  padding:36px;background:var(--lavender);
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
}
@media (max-width:660px){.newsletter-card{grid-template-columns:1fr;padding:28px}}
.newsletter-card .display{font-size:38px;line-height:1;margin-bottom:12px}
.newsletter-card form{display:flex;flex-direction:column;gap:8px}
.newsletter-card input{
  padding:14px 18px;border-radius:999px;border:1.5px solid var(--ink);
  font-size:15px;font-family:inherit;background:#fff;outline:none;
}
.event-card{padding:28px;background:var(--mint);height:100%}
.event-card .display{font-size:28px;line-height:1;margin-bottom:8px}
.event-card .stickers-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

.press{
  margin-top:80px;padding-top:40px;border-top:1.5px solid var(--ink);
}
.press .mono{text-align:center;color:var(--ink-3);margin-bottom:24px;display:block}
.press-row{
  display:flex;justify-content:space-around;flex-wrap:wrap;gap:32px;
  opacity:.55;font-family:var(--f-display);font-size:22px;font-weight:900;font-style:italic;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--paper-2);
  border-top:1.5px solid var(--ink);
}

/* Subscribe block — dark plum strip at top of footer */
.footer-subscribe{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding:64px 0 72px;
  overflow:hidden;
}
.footer-subscribe::before,
.footer-subscribe::after{
  content:"";position:absolute;border-radius:50%;
  pointer-events:none;
  opacity:.85;
}
/* Left teal/blue arc */
.footer-subscribe::before{
  width:240px;height:240px;
  left:-120px;top:-30px;
  background:#2C5C7B;
}
/* Right rust/clay arc */
.footer-subscribe::after{
  width:280px;height:280px;
  right:-140px;bottom:-100px;
  background:#A04A37;
}
/* Decorative dotted strip along the bottom edge */
.footer-subscribe-dots{display:none}
.footer-subscribe::before, .footer-subscribe::after{ z-index:0 }

.footer-subscribe-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:40px;align-items:center;
}
@media (max-width:880px){
  .footer-subscribe-grid{grid-template-columns:1fr;gap:24px;text-align:left}
  .footer-subscribe{padding:48px 0 56px}
}

.footer-subscribe-kicker{
  font-family:var(--f-mono, ui-monospace, monospace);
  font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:#FFD466;margin-bottom:8px;
}
.footer-subscribe-title{
  color:#fff;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.1;letter-spacing:-.02em;
  margin:0 0 12px;
}
.footer-subscribe-title em{
  color:#FFD466;font-style:italic;font-weight:500;
}
.footer-subscribe-blurb{
  color:rgba(255,255,255,.78);
  font-size:15px;line-height:1.55;
  max-width:480px;margin:0;
}
.footer-subscribe-form{
  display:flex;
  background:var(--paper);
  border-radius:999px;
  padding:6px;
  border:1.5px solid var(--ink);
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  position:relative;
}
.footer-subscribe-form input[type="email"]{
  flex:1;
  border:0;background:transparent;
  padding:0 18px;
  font-size:15px;color:var(--ink);
  outline:none;font-family:inherit;
  min-width:0;
}
.footer-subscribe-form input[type="email"]::placeholder{color:var(--ink-3)}
.footer-subscribe-form .btn{
  border-radius:999px;
  padding:12px 24px;
  flex-shrink:0;
}
.footer-subscribe-msg{
  position:absolute;
  top:calc(100% + 8px);left:18px;
  margin:0;
  font-size:13px;color:#fff;
}
.footer-subscribe-msg[data-state="ok"]{color:#aef0c0}
.footer-subscribe-msg[data-state="err"]{color:#ffb5b5}
@media (max-width:520px){
  .footer-subscribe-form{flex-direction:column;border-radius:18px;padding:8px;gap:6px}
  .footer-subscribe-form input[type="email"]{padding:12px 16px}
  .footer-subscribe-form .btn{width:100%}
}

.footer-grid{
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px;margin-bottom:64px;
  padding-top:80px;
}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;padding-top:48px}
}
.footer-brand p{
  font-size:14px;color:var(--ink-2);line-height:1.55;
  margin:16px 0;max-width:280px;
}
.socials{display:flex;gap:8px}
.socials a{
  width:38px;height:38px;border-radius:12px;
  border:1.5px solid var(--ink);background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;text-decoration:none;color:var(--ink);
}
.footer-col .mono{color:var(--ink-3);margin-bottom:14px;display:block}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink)}
.footer-col a:hover{text-decoration:underline}

.footer-wordmark{border-top:1.5px solid var(--ink);padding-top:24px}
.footer-wordmark .display{
  font-size:clamp(70px,14vw,220px);
  line-height:.85;letter-spacing:-.04em;text-align:center;
}
.footer-socials{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  text-decoration:none;
  transition:transform .15s var(--easing-soft), background .15s ease;
  box-shadow:2px 2px 0 var(--ink);
}
.social-link:hover{transform:translate(-1px,-1px);background:var(--butter);box-shadow:3px 3px 0 var(--ink)}
.social-link:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.social-link svg{display:block}
.footer-meta{
  display:flex;justify-content:space-between;margin-top:24px;
  font-size:12.5px;color:var(--ink-3);flex-wrap:wrap;gap:12px;
  padding-bottom:32px;
}

/* ---------- Page hero (interior) ---------- */
.page-hero{padding:64px 0 32px;position:relative}
.page-hero .display{font-size:clamp(40px,5.4vw,72px);margin:0 0 16px}
.page-hero .lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:640px;margin:0 0 24px}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:14px;max-width:520px}
.form-grid label{font-weight:600;font-size:13px;display:flex;flex-direction:column;gap:6px}
.form-grid input,.form-grid select,.form-grid textarea{
  padding:12px 16px;border-radius:14px;border:1.5px solid var(--ink);
  font-size:15px;font-family:inherit;background:#fff;outline:none;
  color:var(--ink);
}
.form-grid textarea{min-height:140px;resize:vertical}
.form-success{
  padding:14px 18px;background:var(--mint);border:1.5px solid var(--ink);
  border-radius:14px;font-weight:600;
}

/* ---------- Bursts and decoration ---------- */
.burst-overlay{position:absolute;top:-28px;right:-28px;pointer-events:none}