/* EG Solar — egsolar.app
   Look: Partiful "watercolor" (Moses's default UI, 2026-10-06). Spec: ~/Desktop/Terminal Tasks/_sf-look/examples/EXAMPLES.md
   Off-white cold-press paper, ink blooms that swell and fade in place, black UI in alpha tiers,
   glass pills with hairlines, ONE solid black capsule per screen, theme color only on links.
   Matte: no neon, no glows, no grids, no colored shadows. */

:root {
  --paper: #f2f1ef;
  --text: #000;
  --t90: rgba(0,0,0,.9);
  --t80: rgba(0,0,0,.8);
  --t60: rgba(0,0,0,.6);
  --t50: rgba(0,0,0,.5);
  --t40: rgba(0,0,0,.4);
  --hair: rgba(0,0,0,.1);
  --hair-25: rgba(0,0,0,.25);
  --glass: rgba(0,0,0,.05);
  --glass-hover: rgba(0,0,0,.1);
  --card: rgba(255,255,255,.55);
  --link: #9a3b00;            /* EG Solar theme color: sun ember. Links only. */
  --danger: #c4253b;
  --ok: #17663f;
  --display: "Outfit", "Space Grotesk", system-ui, sans-serif;
  --ui: "Instrument Sans", "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --pill: 800px;
  --r-box: 8px;
  --r-card: 12px;
  --gutter: 24px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--t80);
  font: 400 18px/1.4 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); font-weight: 600; text-decoration: none; transition: opacity .1s ease-out; }
a:hover { opacity: .8; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { color: var(--text); margin: 0; font-family: var(--display); font-weight: 600; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(245,192,137,.6); }
.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 { position: absolute; left: 16px; top: -60px; z-index: 200; background: #000; color: #fff; padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { top: 12px; }

/* ---------- Living paper backdrop (z -1) ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background-color: #efefef;
  background-image: linear-gradient(90deg, #ead9ef 0%, #f3f3f3 40%, #bceeee 70%, #f1c9a7 100%);
}
.backdrop::before {               /* the sheet itself: mostly paper, the fallback gradient only at the edges */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(242,241,239,.92) 35%, rgba(242,241,239,.55) 80%, rgba(242,241,239,.3));
}
.bloom {
  position: absolute; width: var(--s, 60vmax); height: calc(var(--s, 60vmax) * var(--ar, .78));
  left: var(--x); top: var(--y); margin: calc(var(--s, 60vmax) * var(--ar, .78) / -2) 0 0 calc(var(--s, 60vmax) / -2);
  border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
  /* pigment pools at the edge of a wash: that darker rim is what reads as watercolor */
  background:
    radial-gradient(closest-side at 44% 54%, rgba(var(--c), .22) 0%, rgba(var(--c), .30) 50%, rgba(var(--c), .42) 62%, rgba(var(--c), .12) 70%, rgba(var(--c), 0) 76%),
    radial-gradient(closest-side at 66% 36%, rgba(var(--c2, var(--c)), .28) 0%, rgba(var(--c2, var(--c)), .1) 45%, rgba(var(--c2, var(--c)), 0) 62%),
    radial-gradient(closest-side at 30% 70%, rgba(var(--c), .18) 0%, rgba(var(--c), 0) 55%);
  filter: blur(12px);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(.2) rotate(var(--rot, 0deg));
  will-change: transform, opacity;
  animation: bloom var(--dur, 15s) cubic-bezier(.25,.6,.3,1) var(--delay, 0s) infinite;
}
@keyframes bloom {
  0%   { opacity: 0;   transform: scale(.18) rotate(var(--rot, 0deg)); }
  14%  { opacity: .95; }
  58%  { opacity: .7;  transform: scale(1.12) rotate(calc(var(--rot, 0deg) + 6deg)); }
  100% { opacity: 0;   transform: scale(1.42) rotate(calc(var(--rot, 0deg) + 10deg)); }
}
.backdrop .grain {                /* cold-press tooth + vertical fibre */
  position: absolute; inset: 0; opacity: .55; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .43  0 0 0 0 .40  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(90deg, rgba(0,0,0,.016) 0 1px, transparent 1px 4px);
}

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 90;
  height: 76px; display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  transition: background-color .2s ease-out, box-shadow .2s ease-out;
}
.top.scrolled {
  background: rgba(242,241,239,.72);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  box-shadow: 0 1px 0 var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 700 21px/1 var(--display); letter-spacing: -.01em; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand small { display: block; font: 500 11px/1 var(--ui); color: var(--t50); letter-spacing: .02em; margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--t80); font: 600 15px/1 var(--ui); padding: 10px 12px; border-radius: var(--pill); }
.nav a[aria-current="page"] { color: var(--text); background: var(--glass); }
.nav a:hover { opacity: 1; background: var(--glass); }
.top-cta { display: flex; gap: 8px; align-items: center; }
.top .menu-btn { display: none; }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: var(--pill);
  font: 600 16px/1 var(--ui); color: var(--text); white-space: nowrap; cursor: pointer;
  background: var(--glass); border: 1px solid var(--hair-25);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  transition: background-color .2s ease-out, border-color .1s ease-out, opacity .1s ease-out;
}
.pill:hover { opacity: 1; background: var(--glass-hover); }
.pill:active { background: rgba(0,0,0,.25); border-color: rgba(0,0,0,.4); }
.pill.sm { height: 32px; padding: 0 12px; font-size: 14px; }
.pill.lg { height: 52px; padding: 0 24px; font-size: 18px; }
.pill[aria-pressed="true"], .pill.on { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.6); }
.pill svg { width: 18px; height: 18px; }

/* the one solid object per screen */
.capsule {
  display: inline-flex; align-items: center; background: #000; color: #fff;
  border: 1px solid rgba(0,0,0,.1); border-radius: var(--pill);
  box-shadow: 0 0 12px rgba(0,0,0,.25); overflow: hidden;
}
.capsule a, .capsule button {
  display: inline-flex; align-items: center; gap: 8px; padding: 16px 24px;
  color: #fff; font: 600 18px/1 var(--ui); background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: opacity .1s ease-out;
}
.capsule a:hover, .capsule button:hover { opacity: .6; }
.capsule a:active, .capsule button:active { opacity: .4; }
.capsule .div { width: 1px; height: 16px; background: rgba(255,255,255,.6); flex: none; }
.capsule .glyph { font-size: 17px; line-height: 1; }
.capsule button[disabled] { opacity: .4; cursor: progress; }
.capsule.submit { gap: 8px; padding: 16px 28px; font: 600 18px/1 var(--ui); cursor: pointer; transition: opacity .1s ease-out; }
.capsule.submit:hover { opacity: .85; }
.capsule.submit[disabled] { opacity: .5; cursor: progress; }
.no-dock .dock { display: none !important; }

/* ---------- Layout ---------- */
main { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 72px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.kicker { font: 600 14px/1.4 var(--ui); color: var(--t60); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #000; opacity: .8; }
.h2 { font: 600 clamp(32px, 4.2vw, 48px)/1.08 var(--display); letter-spacing: -.01em; max-width: 18ch; }
.lede { font-size: 20px; line-height: 1.45; color: var(--t80); max-width: 60ch; }
.detail { font-size: 16px; color: var(--t60); }
.muted { color: var(--t50); }

/* ---------- Event-page hero (two columns, sticky rail) ---------- */
.event {
  display: flex; gap: 48px; max-width: min(100vw, 1180px); margin: 0 auto;
  padding: 24px var(--gutter) 40px;
}
.event-main { flex: 1; min-width: 0; padding-top: 40px; }
.event-rail {
  width: 460px; flex-shrink: 0; position: sticky; top: 96px; align-self: flex-start;
  padding: 24px 24px 40px; display: flex; flex-direction: column; align-items: center;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--pill);
  border: 1px solid var(--hair); background-image: linear-gradient(transparent, rgba(0,0,0,.1));
  -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px);
  font: 600 14px/1.4 var(--ui); color: var(--text); margin-bottom: 24px; text-wrap: balance;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #1e9e57; box-shadow: 0 0 0 3px rgba(30,158,87,.18); }
.title {
  font: 700 clamp(44px, 6.2vw, 80px)/1.06 var(--display); letter-spacing: -.015em; color: #000;
  margin: 0 -25px 28px 0; font-feature-settings: "calt" 0; text-wrap: balance;
}
.date-line { font: 500 30px/1.4 var(--ui); color: var(--t90); margin: 0; }
.time-line { font: 400 22px/1.4 var(--ui); color: var(--t50); margin: 0 0 20px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.hosted { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--t80); margin: 0 0 12px; }
.hosted svg { width: 24px; height: 24px; }
.faces { display: flex; gap: 10px; margin: 0 0 28px 32px; flex-wrap: wrap; }
.faces figure { margin: 0; display: grid; justify-items: center; gap: 6px; font: 600 12px/1 var(--ui); color: var(--t60); }
.face {
  width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--hair); color: var(--text);
}
.face svg { width: 30px; height: 30px; }
.loc { display: flex; gap: 8px; padding: 4px 0; margin-bottom: 24px; }
.loc svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.loc b { display: block; color: var(--text); font-weight: 600; }
.loc .detail { text-wrap: balance; }
.desc { font-size: 18px; line-height: 1.4; color: var(--t80); max-width: 52ch; }
.flyer { width: 100%; margin-bottom: 24px; }
.flyer svg { width: 100%; height: auto; color: #000; overflow: visible; }
.rail-note { font-size: 14px; color: var(--t60); margin-top: 14px; text-align: center; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  background: var(--card); border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  padding: 24px; position: relative;
}
.card h3 { font: 600 22px/1.25 var(--display); margin-bottom: 8px; }
.card p { font-size: 16px; line-height: 1.45; color: var(--t80); }
.card .num { font: 600 14px/1 var(--ui); color: var(--t50); margin-bottom: 18px; display: block; }
a.card { display: block; color: inherit; font-weight: 400; transition: background-color .2s ease-out, transform .3s var(--ease); }
a.card:hover { opacity: 1; background: rgba(255,255,255,.75); transform: translateY(-2px); }
.card .go { position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair-25); display: grid; place-items: center; }
.card .go svg { width: 16px; height: 16px; }

/* End Game tiers */
.tier .art { height: 120px; display: grid; place-items: start; margin-bottom: 16px; color: #000; }
.tier .art svg { height: 110px; width: auto; }
.fine-print { font-size: 14px !important; color: var(--t60) !important; }
.tier .range { font: 600 14px/1 var(--ui); color: var(--t60); display: inline-flex; padding: 6px 10px; border-radius: var(--pill); background: var(--glass); margin-bottom: 14px; }
.tier ul { list-style: none; padding: 0; margin: 14px 0 0; font-size: 15px; color: var(--t80); }
.tier li { padding: 6px 0; border-top: 1px solid var(--hair); }

/* product cards */
.product { display: flex; flex-direction: column; }
.product .art { aspect-ratio: 4 / 3; display: grid; place-items: center; margin: -4px 0 12px; position: relative; color: #000; }
.product .art::before {
  content: ""; position: absolute; inset: 10% 14%; border-radius: 48% 52% 46% 54%;
  background: radial-gradient(closest-side, rgba(var(--wash), .45), rgba(var(--wash), .25) 62%, rgba(var(--wash), 0));
  filter: blur(4px);
}
.product .art svg { position: relative; width: 70%; height: auto; }
.product .fam { font: 600 13px/1 var(--ui); color: var(--t50); margin-bottom: 8px; }
.product h3 { font-size: 22px; }
.product .tag { font-size: 15px; color: var(--t80); margin-bottom: 14px; }
.specs { list-style: none; padding: 0; margin: 0 0 18px; font-size: 14px; }
.specs li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hair); }
.specs li span:first-child { color: var(--t60); }
.specs li span:last-child { color: var(--text); font-weight: 600; text-align: right; }
.product .row { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--ui); padding: 6px 10px; border-radius: var(--pill); border: 1px solid var(--hair-25); color: var(--t80); }

/* steps */
.steps { counter-reset: step; }
.step { padding: 22px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 64px 1fr; gap: 16px; }
.step:last-child { border-bottom: 1px solid var(--hair); }
.step::before { counter-increment: step; content: "0" counter(step); font: 600 28px/1 var(--display); color: var(--t40); }
.step h3 { font: 600 22px/1.25 var(--display); margin-bottom: 6px; }
.step p { margin: 0; font-size: 17px; color: var(--t80); }

.split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 48px; }

/* stats strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stat { padding: 22px 20px 22px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--hair); }
.stat b { display: block; font: 600 clamp(28px, 3.4vw, 40px)/1 var(--display); color: #000; letter-spacing: -.02em; margin-bottom: 8px; }
.stat span { font-size: 15px; color: var(--t60); }

/* FAQ */
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 600 19px/1.35 var(--ui); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 10px; height: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.faq .a { padding: 0 0 22px; font-size: 17px; line-height: 1.5; color: var(--t80); max-width: 70ch; }

/* call-out band */
.band { text-align: center; padding: 96px 0; }
.band .h2 { margin: 0 auto 16px; max-width: 20ch; }
.band .lede { margin: 0 auto 32px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters .pill { height: 40px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label, .legend { font: 600 15px/1.3 var(--ui); color: var(--text); }
.field .hint { font-size: 14px; color: var(--t50); }
.input, select.input, textarea.input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 10px; font: 400 17px/1.3 var(--ui); color: #000;
  background: rgba(255,255,255,.7); border: 1px solid var(--hair-25);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  transition: border-color .15s ease-out, background-color .15s ease-out;
  appearance: none; -webkit-appearance: none;
}
select.input { background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
textarea.input { height: auto; min-height: 130px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
.input:focus { outline: none; border-color: #000; background: rgba(255,255,255,.9); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--t80); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #000; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 16px; padding: 14px 16px; border-radius: 10px; display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: rgba(23,102,63,.08); color: var(--ok); border: 1px solid rgba(23,102,63,.25); }
.form-msg.err { background: rgba(196,37,59,.06); color: var(--danger); border: 1px solid rgba(196,37,59,.25); }
.plan-box { background: rgba(255,255,255,.6); border: 1px dashed var(--hair-25); border-radius: 10px; padding: 14px 16px; font-size: 15px; white-space: pre-wrap; color: var(--t80); }

/* ---------- Planner ---------- */
.planner { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.appl { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.appl:last-child { border-bottom: 1px solid var(--hair); }
.appl input[type=checkbox] { width: 20px; height: 20px; accent-color: #000; margin: 0; }
.appl .nm { font: 600 16px/1.3 var(--ui); color: var(--text); }
.appl .nm small { display: block; font: 400 13px/1.4 var(--ui); color: var(--t60); }
.appl .ctl { display: flex; gap: 10px; align-items: center; }
.appl .ctl label { font-size: 12px; color: var(--t60); display: grid; gap: 2px; text-align: center; }
.appl .ctl input { width: 64px; height: 36px; border-radius: 8px; border: 1px solid var(--hair-25); background: rgba(255,255,255,.7); text-align: center; font: 600 15px var(--ui); }
.appl.off .ctl { opacity: .55; }
.appl.off .nm { color: var(--t60); }
.result { position: sticky; top: 96px; }
.result .card { padding: 28px; }
.result .eg { font: 700 34px/1.1 var(--display); color: #000; letter-spacing: -.02em; margin: 4px 0 6px; }
.result .kv { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); margin: 18px 0; }
.result .kv div { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.result .kv div:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--hair); }
.result .kv div:nth-child(even) { padding-left: 14px; }
.result .kv b { display: block; font: 600 24px/1.1 var(--display); color: #000; }
.result .kv span { font-size: 13px; color: var(--t60); }
.result .rec { font-size: 16px; line-height: 1.45; color: var(--t80); margin-bottom: 18px; }
.result .rec b { color: #000; }

/* ---------- Legal / prose ---------- */
.doc { padding: 40px 0 80px; }
.doc.sheet-bg, .narrow.doc { background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: 48px 56px 64px; margin-top: 24px; margin-bottom: 24px; }
.doc h1 { font: 700 clamp(38px, 5vw, 60px)/1.08 var(--display); letter-spacing: -.01em; margin-bottom: 14px; }
.doc .updated { font-size: 15px; color: var(--t50); margin-bottom: 36px; }
.doc h2 { font: 600 24px/1.25 var(--display); margin: 40px 0 12px; }
.doc h3 { font: 600 18px/1.3 var(--ui); margin: 24px 0 8px; }
.doc p, .doc li { font-size: 17px; line-height: 1.6; color: var(--t80); }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 1em; }
.doc li { margin-bottom: 6px; }
.doc .callout { background: rgba(255,255,255,.6); border: 1px solid var(--hair); border-radius: 10px; padding: 16px 18px; margin: 0 0 24px; font-size: 16px; }
.doc .caps { text-transform: uppercase; font-size: 15px; letter-spacing: .01em; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 1; padding: 64px 0 120px; border-top: 1px solid var(--hair); margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot h4 { font: 600 14px/1 var(--ui); color: var(--t50); margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 10px; }
.foot li a { color: var(--t80); font: 500 15px/1.3 var(--ui); }
.foot .blurb { font-size: 15px; color: var(--t60); max-width: 34ch; margin-top: 14px; }
.foot .contact { font-size: 15px; line-height: 1.7; color: var(--t80); margin-top: 12px; }
.foot .contact a { color: var(--t80); font-weight: 600; }
.fine { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.55; color: var(--t50); display: grid; gap: 8px; }
.fine-row { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* mobile sticky CTA (rides above the bottom edge like Partiful's RSVP) */
.dock { position: fixed; left: 50%; bottom: 16px; z-index: 99; transform: translate(-50%, 140%); transition: transform .5s var(--ease); display: none; }
.dock.show { transform: translate(-50%, 0); }

/* ---------- Motion ---------- */
.rise { animation: rise .95s var(--ease) both; }
.rise.d1 { animation-delay: .06s; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 100vh, 0); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .nav, .top-cta .hide-m { display: none; }
  .top .menu-btn { display: inline-flex; }
  .event { flex-direction: column; max-width: 720px; gap: 0; }
  .event-main { padding-top: 16px; }
  .event-rail { position: static; width: 100%; padding: 0 0 24px; }
  .event-main { display: contents; }
  .event-main > * { order: 3; }
  .event-main > .status-pill { order: 0; align-self: center; }
  .event-main > .kicker { order: 0; align-self: center; margin-top: 16px; }
  .event-main > .title { order: 1; }
  .event-rail { order: 2; }
  .event-main > .status-pill:first-child { margin-top: 16px; }
  .event-rail .flyer { max-width: min(400px, 100%); }
  .event-rail.after { order: 4; padding-top: 24px; }
  .title { text-align: center; margin: 0 -10px 25px; }
  .event-main .date-line, .event-main .time-line { text-align: center; }
  .event-main .pill-row, .event-main .action-row { justify-content: center; }
  .grid.c3 { grid-template-columns: 1fr; }
  .planner, .split { grid-template-columns: 1fr; }
  .split { gap: 24px; }
  .result { position: static; }
  .dock { display: block; }
  .foot { padding-bottom: 140px; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .top { height: 60px; }
  .brand { font-size: 19px; }
  .brand img { width: 30px; height: 30px; }
  section { padding: 56px 0; }
  .title { letter-spacing: -.01em; }
  .date-line { font-size: 26px; }
  .time-line { font-size: 19px; }
  .grid.c2, .grid.c4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .row2 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .capsule a, .capsule button { padding: 15px 18px; font-size: 16px; }
  .appl { grid-template-columns: 22px minmax(0,1fr); }
  .narrow.doc { padding: 28px 20px 40px; border-radius: 14px; margin-left: 8px; margin-right: 8px; }
  .appl .ctl { grid-column: 2; }
  .lede { font-size: 18px; }
  .step { grid-template-columns: 48px 1fr; }
}

/* mobile menu sheet */
.sheet { position: fixed; inset: 0; z-index: 120; display: none; }
.sheet.open { display: block; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(242,241,239,.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sheet nav { position: absolute; left: 12px; right: 12px; top: 12px; background: rgba(255,255,255,.88); border: 1px solid var(--hair); border-radius: 16px; padding: 14px; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.sheet nav a { display: block; color: #000; font: 600 22px/1 var(--display); padding: 16px 10px; border-bottom: 1px solid var(--hair); }
.sheet nav a:last-of-type { border-bottom: 0; }
.sheet .close { position: absolute; right: 14px; top: 14px; }

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