/* ===========================================================
   Miracle Collective — design system
   Per design brief §2: cream/white backgrounds ~90% of the time,
   pink as accent only, serif for feelings, sans for facts,
   sentence case everywhere except tiny letterspaced eyebrows.
   =========================================================== */

:root{
  /* Palette */
  --cream:#FAF6F2;
  --white:#FFFFFF;
  --ink:#221D19;
  --ink-soft:#5C534C;
  --ink-faint:#8A807A;
  --pink:#C2497F;
  --pink-deep:#A33366;
  --blush:#F7DCE6;
  --blush-soft:#FDF1F5;
  --hairline:rgba(34,29,25,0.12);
  --hairline-soft:rgba(34,29,25,0.07);

  /* Hero backdrop (photographic studio scene) */
  --backdrop:#BBD0E3;
  --backdrop-lit:#CEDDEA;

  /* Type — the whole site speaks "Deco" (Fredoka, the web twin of
     Instagram's Deco style), matching the home story beats. */
  --display:'Fredoka','Instrument Serif',Georgia,serif;
  --sans:'Fredoka','General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Motion — ease-out-quint feel per brief §4 */
  --ease:cubic-bezier(0.22,1,0.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--pink);text-decoration:none}
a:hover{color:var(--pink-deep)}
::selection{background:var(--blush);color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.wrap-narrow{max-width:760px}
section{position:relative}
.section{padding:clamp(64px,9vw,120px) 0}
.section-tight{padding:clamp(44px,6vw,76px) 0}
.section-blush{background:var(--blush-soft)}
.section-white{background:var(--white)}

/* ---------- Type ---------- */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px;
}
.eyebrow .spark{color:var(--pink)}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
/* Fredoka needs a touch more weight than the old serif did to hold
   presence at display sizes */
.d1,.d2,.d3,.statement,.quote,.footer .mark{font-weight:500}
.d1{font-family:var(--display);font-size:clamp(42px,6.4vw,84px);line-height:1.03;letter-spacing:-0.015em}
.d2{font-family:var(--display);font-size:clamp(32px,4.4vw,56px);line-height:1.08;letter-spacing:-0.01em}
.d3{font-family:var(--display);font-size:clamp(24px,2.8vw,34px);line-height:1.18}
.h-sans{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-0.01em;line-height:1.35}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--ink-soft);max-width:62ch;margin:20px 0 0}
.body{color:var(--ink-soft);margin:16px 0 0;max-width:66ch}
.fine{font-size:14px;color:var(--ink-faint);line-height:1.6}
.stack>*+*{margin-top:14px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:0.01em;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.btn-primary{background:var(--pink);color:#fff}
.btn-primary:hover{background:var(--pink-deep);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.link-underline{
  font-size:14px;font-weight:600;color:var(--pink);
  text-decoration:underline 1.5px;text-underline-offset:6px;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(250,246,242,0.88);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--hairline-soft);
}

/* Home: the hero fills the screen with no nav; the nav becomes a fixed overlay that
   slides in once the About section scrolls up under it (revealed toggled in site.js).
   The hero's own height is governed by the .hero-track sticky rule below. */
.home .nav{
  position:fixed;top:0;left:0;right:0;
  transform:translateY(-100%);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.home .nav.revealed{
  transform:translateY(0);
  box-shadow:0 6px 24px rgba(34,29,25,0.07);
}
@media (prefers-reduced-motion:reduce){
  .home .nav{transition:none}
}

/* Anchored sections must clear the fixed nav when jumped to. Applied to every id'd
   section (not just :target) because smooth-scrolling to a hash and the scroll-spy
   both rely on the same offset.
   Keep in sync with ANCHOR_OFFSET in site.js — the home nav-reveal threshold is
   derived from it so that jumping to #about can't land just above the threshold and
   dismiss the nav. */
:target,
section[id]{scroll-margin-top:92px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
/* Set in caps via text-transform rather than in the markup so site.js keeps one
   readable, sentence-case source string for the wordmark.
   Tracking goes slightly positive here: the tight negative letter-spacing that suits
   mixed case reads as cramped once every glyph is a capital. */
.wordmark{
  display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:0.03em;
  /* Fredoka's kern table pulls ~2.4px off the capital I, collapsing the IV pair in
     COLLECTIVE into what looks like a single glyph (I advance measures 1.8px with
     kerning on vs 4.2px with it off). Those pairs are tuned for mixed-case setting,
     so they misfire on an all-caps lockup — the explicit tracking above spaces this
     evenly instead. Adding letter-spacing alone does NOT fix it: the negative kern
     still applies, so at 0.09em the I is only 2.76px. */
  font-kerning:none;
  color:var(--ink);white-space:nowrap;
}
.wordmark:hover{color:var(--ink)}
.wordmark .spark{color:var(--pink);font-size:12px}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14.5px;color:var(--ink-soft);font-weight:500;transition:color .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]{text-decoration:underline 1.5px;text-underline-offset:6px;text-decoration-color:var(--pink)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 20px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px 4px;background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.6px;background:var(--ink)}

@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{
    display:flex;position:absolute;left:0;right:0;top:68px;flex-direction:column;
    align-items:flex-start;gap:2px;background:var(--cream);
    border-bottom:1px solid var(--hairline);padding:12px clamp(20px,4vw,48px) 22px;
  }
  .nav.open .nav-links a{display:block;padding:11px 0;font-size:17px}
}
@media (max-width:560px){ .nav-cta .btn-ghost{display:none} }
/* Narrow phones: Fredoka runs wider than the old sans — compact the
   shell so the wordmark, CTA and hamburger share one row cleanly.
   The hero h1 is intentionally absent: it kept the original General Sans, so it
   doesn't need the Fredoka width compensation. */
@media (max-width:480px){
  .wordmark{font-size:14.5px}
  .nav-cta .btn{padding:9px 14px;font-size:13px}
}

/* ---------- Hero (home) ---------- */
.hero{
  min-height:calc(100vh - 68px);box-sizing:border-box;position:relative;overflow:hidden;
  display:flex;flex-direction:column;color:var(--ink);
  /* Layered studio backdrop: glare bloom, tonal halo staging the products,
     lit falloff, and an edge vignette that closes the frame */
  background:
    radial-gradient(46% 34% at 71% 18%, rgba(255,255,255,0.62), rgba(255,255,255,0) 62%),
    radial-gradient(42% 50% at 63% 56%, rgba(255,255,255,0.34), rgba(255,255,255,0) 72%),
    radial-gradient(30% 22% at 26% 78%, rgba(255,255,255,0.24), rgba(255,255,255,0) 66%),
    radial-gradient(135% 110% at 50% 44%, rgba(40,56,80,0) 46%, rgba(40,56,80,0.20) 100%),
    radial-gradient(120% 95% at 66% 30%, var(--backdrop-lit) 0%, var(--backdrop) 64%);
  padding:clamp(24px,3.5vw,44px) 0 clamp(28px,3.5vw,48px);
}
/* Fine grain — a flat digital fill reads as fake; real studio photography
   always carries sensor noise */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.055;
}
.hero-main{
  position:relative;flex:1;display:flex;align-items:center;
  gap:clamp(20px,4vw,56px);min-height:0;
}
.hero-copy{position:relative;z-index:2;flex:1 1 0;min-width:0}
/* The hero wordmark deliberately keeps the ORIGINAL General Sans, so it is pinned
   here rather than reading var(--sans) — that variable now leads with Fredoka for the
   rest of the site. Don't collapse this back to var(--sans). */
.hero h1{
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(54px,10.5vw,158px);line-height:0.94;letter-spacing:-0.02em;max-width:9em;
}
.hero .lede{color:#3B4657;max-width:48ch}

.hero-art{position:relative;z-index:1;flex:0 0 clamp(280px,39vw,600px);align-self:stretch;pointer-events:none}
.art-slot{position:absolute}
.art-slot>div{width:100%;height:100%}

/* ---------- Scroll-scrubbed hero video ----------
   .hero-track is a tall spacer; .hero sticks inside it and site.js maps how far
   through the track we've scrolled onto the video's currentTime. 220vh gives the
   3s clip roughly 1.2 screens of scroll — long enough to read as deliberate,
   short enough that nobody feels trapped. */
.home .hero-track{height:220vh;position:relative}
.home .hero-track>.hero{position:sticky;top:0;height:100vh;min-height:0}

/* The clip is a crop of the same studio render as the hero gradient, so rather than
   framing it we bleed it off the top, right and bottom edges and feather only the
   left. Nothing reads as a video box — it reads as the backdrop coming to life. */
.hero-video{
  position:absolute;z-index:1;pointer-events:none;
  top:0;right:0;height:100%;width:clamp(320px,46vw,660px);
  object-fit:cover;object-position:50% 46%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);
  mask-image:linear-gradient(to right,transparent 0,#000 30%);
}

/* Scroll affordance — the hero no longer moves on the first flick of the wheel,
   so without a cue it reads as a stuck page. Fades out as soon as scrubbing starts. */
.scroll-hint{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;
  width:23px;height:38px;border:1.5px solid rgba(34,29,25,0.34);border-radius:12px;
  display:block;transition:opacity .4s var(--ease);
}
.scroll-hint-dot{
  position:absolute;left:50%;top:7px;translate:-50% 0;
  width:3px;height:7px;border-radius:2px;background:rgba(34,29,25,0.5);
  animation:hint 1.9s var(--ease) infinite;
}
@keyframes hint{0%,100%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(14px);opacity:0}}
.hero.scrubbing .scroll-hint{opacity:0}

@media (max-width:900px){
  /* Less scrub distance on phones — a 220vh track is a lot of thumb travel. */
  .home .hero-track{height:180vh}
  /* Stacked layout: the clip takes the lower half and feathers upward into the copy
     instead of sitting behind the headline. */
  .hero-video{
    width:100%;height:66%;top:auto;bottom:0;object-position:50% 62%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
  }
}

/* No scrubbing when motion is reduced: the track collapses to a normal hero and
   site.js parks the video on its final frame, so the splash is simply already there. */
@media (prefers-reduced-motion:reduce){
  .home .hero-track{height:auto}
  .home .hero-track>.hero{position:relative;height:auto;min-height:100vh}
  .scroll-hint{display:none}
}
/* Two shadow layers — tight contact plus a wider ambient pool — offset down-right to
   agree with the light coming from upper-left in both renders. Kept to two passes with
   moderate blur: stacking three at large radii is expensive enough to drop frames. */
.product{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(4px 9px 11px rgba(46,62,86,0.24))
         drop-shadow(14px 30px 34px rgba(46,62,86,0.18));
}
.art-bottle{top:8%;right:-7%;width:48%;height:52%}
.art-mat{bottom:-4%;left:4%;width:58%;height:79%}
/* Both renders already lean right in-camera, so these are offsets, not final angles */
.art-bottle .product{transform:rotate(-22deg)}
.art-mat .product{transform:rotate(-3deg)}

@media (max-width:900px){
  .hero-main{flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{flex:0 0 auto;padding-top:8px}
  .hero-art{flex:1 1 auto;min-height:46vh}
  .art-bottle{top:6%;right:2%;width:34%;height:78%}
  .art-mat{bottom:0;left:7%;width:46%;height:89%}
}
/* Phones: app-like hero — tighter lede, full-width thumb-sized buttons */
@media (max-width:560px){
  .hero .lede{font-size:15.5px}
  .hero .btn-row{gap:10px;margin-top:24px}
  .hero .btn-row .btn{width:100%;justify-content:center}
}

/* ---------- Marquee (brief §4) ---------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--hairline-soft);
  border-bottom:1px solid var(--hairline-soft);background:var(--white);
  padding:18px 0;white-space:nowrap;
}
.marquee-track{display:inline-flex;gap:0;animation:slide 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-family:var(--display);font-size:clamp(20px,2.4vw,30px);
  padding:0 26px;color:var(--ink);
}
.marquee .spark{color:var(--pink);font-family:var(--sans);font-size:15px;vertical-align:middle}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* ---------- Cards ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }

.card{
  background:var(--white);border:1px solid var(--hairline-soft);border-radius:20px;
  padding:30px 28px;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(34,29,25,0.07)}
.card .num{font-family:var(--display);font-size:26px;color:var(--pink);line-height:1}
.card h3{margin:14px 0 0}
.card p{margin:10px 0 0;color:var(--ink-soft);font-size:15.5px}

/* ===========================================================
   Graphic elements — line icons, arch panels, blush blobs and
   sparkle rules. All CSS/SVG so they scale, recolour and animate.
   =========================================================== */

/* Line icons */
.ico{
  width:24px;height:24px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico-lg{width:34px;height:34px;stroke-width:1.2}
.ico-solid{fill:currentColor;stroke:none}

/* Icon badge — a soft blush disc behind an icon */
.ico-badge{
  width:60px;height:60px;border-radius:999px;display:grid;place-items:center;
  background:var(--blush-soft);border:1px solid var(--blush);color:var(--pink);
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.card:hover .ico-badge{transform:translateY(-2px) rotate(-4deg);background:var(--blush)}

/* Arch panel — echoes the arched studio windows in the brand imagery */
.arches{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media (max-width:820px){ .arches{grid-template-columns:1fr} }
.arch{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid var(--hairline-soft);
  border-radius:999px 999px 22px 22px;
  background:linear-gradient(180deg,var(--blush-soft) 0%,var(--white) 62%);
  padding:52px 28px 34px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.arch:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(34,29,25,0.08)}
.arch .ico-badge{margin:0 auto 20px}
.arch h3{margin:0}
.arch p{margin:10px auto 0;color:var(--ink-soft);font-size:15px;max-width:26ch}

/* Blush blobs — soft out-of-focus shapes drifting behind content */
.has-blobs{position:relative;overflow:hidden}
.has-blobs>.wrap{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(46px);opacity:.55}
.blob-a{width:min(46vw,520px);aspect-ratio:1;background:var(--blush);top:-14%;right:-8%}
.blob-b{width:min(34vw,380px);aspect-ratio:1;background:#E9DFF6;bottom:-18%;left:-10%;opacity:.42}
@media (prefers-reduced-motion:no-preference){
  .blob-a{animation:drift 22s ease-in-out infinite}
  .blob-b{animation:drift 28s ease-in-out -6s infinite reverse}
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,4%,0) scale(1.07)}
}

/* Sparkle rule — a hairline divider broken by the brand mark */
.rule-spark{
  display:flex;align-items:center;gap:18px;color:var(--pink);
  margin:clamp(48px,6vw,76px) 0;
}
.rule-spark::before,.rule-spark::after{content:"";flex:1;height:1px;background:var(--hairline)}
.rule-spark .ico{width:16px;height:16px}

/* Scattered sparkles as a decorative accent */
.sparkle-scatter{position:absolute;inset:0;pointer-events:none;color:var(--pink);opacity:.30}
.sparkle-scatter .ico{position:absolute}
.sparkle-scatter .s1{top:12%;left:6%;width:15px;height:15px}
.sparkle-scatter .s2{top:64%;left:15%;width:10px;height:10px;opacity:.7}
.sparkle-scatter .s3{top:28%;right:9%;width:19px;height:19px}
.sparkle-scatter .s4{bottom:16%;right:18%;width:12px;height:12px;opacity:.75}

/* Ticker of icons — a light graphic band */
.icon-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,5vw,64px);
  color:var(--pink);opacity:.85;
}
.icon-strip figure{margin:0;text-align:center;display:grid;justify-items:center;gap:10px}
.icon-strip figcaption{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- Split: image beside text ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.split-portrait img{border-radius:20px;aspect-ratio:4/5;object-fit:cover;width:100%}
.split-wide img{border-radius:20px;aspect-ratio:1/1;object-fit:cover;width:100%}
@media (max-width:860px){ .split{grid-template-columns:1fr;gap:32px} }

/* ---------- Editorial statement (Glossier/Rhode: big serif, lots of air) ---------- */
.statement{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:1.22;letter-spacing:-0.01em;
  color:var(--ink);margin:22px 0 0;max-width:20em;text-wrap:balance;
}

/* ---------- Feature columns — no boxes, a hairline rule per column ---------- */
.features{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,60px);margin-top:clamp(34px,4.5vw,60px);
}
@media (max-width:820px){ .features{grid-template-columns:1fr;gap:40px} }
/* Flex column + margin-top:auto on the button pushes every button to the bottom of its
   equal-height grid cell, so all three buttons line up on one baseline regardless of how
   long each paragraph runs. */
.feature{border-top:1px solid var(--hairline);padding-top:22px;display:flex;flex-direction:column}
.feature-num{font-family:var(--display);font-size:22px;line-height:1;color:var(--pink)}
.feature h3{margin:16px 0 0;font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-0.01em}
.feature p{margin:12px 0 20px;color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.feature .btn{margin-top:auto;align-self:flex-start}
@media (max-width:820px){ .feature .btn{margin-top:18px} }

/* ---------- Pull quote ---------- */
.quote{
  font-family:var(--display);font-size:clamp(30px,4.2vw,52px);line-height:1.12;
  letter-spacing:-0.01em;max-width:18ch;
}
.quote-note{font-size:15px;color:var(--ink-soft);margin-top:22px;max-width:46ch}

/* ---------- Chips (category tier signalling, brief legal note) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.chip{
  border:1px solid var(--hairline);border-radius:999px;padding:8px 16px;
  font-size:13px;color:var(--ink-soft);background:var(--white);
}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.stat .n{font-family:var(--display);font-size:clamp(34px,4vw,52px);line-height:1;color:var(--ink)}
.stat .l{font-size:13px;color:var(--ink-faint);margin-top:8px;letter-spacing:0.02em}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* ---------- Photo rail ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;padding:4px 0 18px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}
.rail figure{margin:0;flex:0 0 clamp(240px,30vw,360px);scroll-snap-align:start}
.rail img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%}
.rail figcaption{font-size:13px;color:var(--ink-faint);margin-top:10px}

/* ---------- Events ---------- */
.event{
  display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;
  padding:26px 0;border-top:1px solid var(--hairline-soft);
}
.event:last-child{border-bottom:1px solid var(--hairline-soft)}
.event .date{font-family:var(--display);font-size:22px;line-height:1.2}
.event .meta{font-size:14px;color:var(--ink-faint);margin-top:4px}
.event .tag{
  display:inline-block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pink);border:1px solid var(--blush);background:var(--blush-soft);
  border-radius:999px;padding:5px 12px;margin-bottom:10px;
}
@media (max-width:760px){
  .event{grid-template-columns:1fr;gap:12px;align-items:start}
}

/* Reusable event tag (also used outside the .event row) */
.tag{
  display:inline-block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pink);border:1px solid var(--blush);background:var(--blush-soft);
  border-radius:999px;padding:5px 12px;
}

/* ---------- Featured launch event ---------- */
.event-hero{
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;
  border:1px solid var(--hairline-soft);border-radius:24px;background:var(--white);
  padding:clamp(28px,4vw,52px);
}
@media (max-width:860px){ .event-hero{grid-template-columns:1fr;gap:34px} }
.event-hero h2{margin:16px 0 0}
.event-facts{list-style:none;margin:26px 0 0;padding:0}
.event-facts>div{
  display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;
  border-top:1px solid var(--hairline-soft);padding:14px 0;
}
.event-facts>div:last-child{border-bottom:1px solid var(--hairline-soft)}
.event-facts dt{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.event-facts dd{margin:0;font-size:17px;color:var(--ink)}

.event-buy{
  background:var(--blush-soft);border:1px solid var(--blush);border-radius:20px;
  padding:clamp(24px,3vw,32px);text-align:center;
}
.event-buy .price{font-family:var(--display);font-size:clamp(34px,4vw,48px);line-height:1;color:var(--ink)}
.event-buy .price-note{font-size:13px;color:var(--ink-faint);margin:8px 0 22px}
.event-buy .btn{width:100%;justify-content:center}
.event-buy .secure{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;color:var(--ink-faint);margin-top:16px;
}
.event-buy stripe-buy-button{display:block}

/* ---------- Spacious empty state (past events / recaps) ---------- */
.empty-state{
  margin-top:clamp(36px,5vw,56px);
  border:1px solid var(--hairline-soft);border-radius:24px;
  background:var(--cream);
  padding:clamp(48px,8vw,96px) clamp(28px,6vw,72px);
  text-align:center;
}
.empty-state .d3{max-width:20ch;margin:14px auto 0}
.empty-state .body{margin-left:auto;margin-right:auto;max-width:44ch}
.empty-state .btn-row{justify-content:center;margin-top:28px}

/* ---------- Forms ---------- */
.form{margin-top:36px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
.field .hint{font-weight:400;color:var(--ink-faint);font-size:12.5px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:var(--white);border:1px solid var(--hairline);border-radius:12px;
  padding:13px 15px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(194,73,127,0.10);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){ .field-row{grid-template-columns:1fr} }
.form-note{font-size:13px;color:var(--ink-faint);margin-top:18px}
.form-success{
  display:none;border:1px solid var(--blush);background:var(--blush-soft);
  border-radius:16px;padding:22px 24px;margin-top:28px;
}
.form-success.show{display:block}
.form-success h3{font-family:var(--display);font-size:24px}
.form-success p{margin:8px 0 0;color:var(--ink-soft);font-size:15px}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--hairline-soft)}
.faq details{border-bottom:1px solid var(--hairline-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
  font-weight:600;font-size:17px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:22px;font-size:22px;font-weight:400;
  color:var(--pink);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 40px 26px 0;color:var(--ink-soft);font-size:15.5px;margin:0}

/* ---------- Footer ---------- */
.footer-cta{background:var(--blush);padding:clamp(60px,8vw,104px) 0;text-align:center}
.footer-cta .d2{max-width:16ch;margin:0 auto}
.footer-cta .lede{margin-left:auto;margin-right:auto;color:#6B4152}
.email-form{display:flex;gap:10px;max-width:460px;margin:32px auto 0}
.email-form input{
  flex:1;border:1px solid rgba(34,29,25,0.16);border-radius:999px;padding:14px 20px;
  font-family:var(--sans);font-size:15px;background:rgba(255,255,255,0.75);
}
.email-form input:focus{outline:none;border-color:var(--pink);background:#fff}
@media (max-width:520px){ .email-form{flex-direction:column;border-radius:16px} .email-form .btn{justify-content:center} }

.footer{background:var(--ink);color:#EFE9E4;padding:clamp(48px,6vw,72px) 0 36px}
.footer a{color:#EFE9E4;font-size:14.5px}
.footer a:hover{color:var(--blush)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer h4{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#9A9089;margin-bottom:16px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li+li{margin-top:10px}
/* Matches the nav wordmark: caps via text-transform (so site.js keeps one sentence-case
   source string), positive tracking because caps need air, and font-kerning:none to kill
   Fredoka's negative kern on the capital I — see .wordmark for the measurements. The
   kern scales with type size, so at 26px it collapses IV harder than it does in the nav. */
.footer .mark{
  font-family:var(--display);color:#fff;
  text-transform:uppercase;letter-spacing:0.03em;font-kerning:none;
  /* Caps set ~15% wider than mixed case, which pushed this lockup past its footer-grid
     column and broke it into "MIRACLE / COLLECTIVE". Sized fluidly so it fits the
     narrowest column (the 2-up tablet grid) and still reaches 26px on desktop; nowrap
     guarantees the lockup never splits mid-phrase if a column gets tighter. */
  font-size:clamp(20px,1.8vw,26px);
  white-space:nowrap;
}
.footer .tagline{color:#9A9089;font-size:14.5px;margin-top:10px;max-width:28ch}
.footer-base{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.12);margin-top:46px;padding-top:24px;
  font-size:13px;color:#9A9089;
}

/* ---------- Scroll reveal (brief §4: fade up 20px, once only) ----------
   Scoped to .js so content is never hidden if the script fails to load. */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- Page header ---------- */
.page-head{padding:clamp(52px,7vw,92px) 0 clamp(30px,4vw,48px)}
.page-head .lede{margin-top:22px}

/* ---------- Section header (one-page: each former "page" opens with one of these) ---------- */
.section-head{max-width:24em}
.section-head .d2{margin-top:4px}
.section-head .lede{margin-top:20px}
.section-head .btn-row{margin-top:28px}

/* ===========================================================
   Home polish — Rhode/Glossier editorial rhythm & choreography
   =========================================================== */

/* Hero copy: staggered load-in (sequence: heading -> lede -> buttons) */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:heroIn .9s var(--ease) both}
  .hero-copy > h1{animation-delay:.06s}
  .hero-copy > .lede{animation-delay:.20s}
  .hero-copy > .btn-row{animation-delay:.34s}
}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Staggered group reveal — children fade up in sequence when the group enters view */
.js .reveal-group > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal-group.in > *{opacity:1;transform:none}
.js .reveal-group.in > *:nth-child(2){transition-delay:.09s}
.js .reveal-group.in > *:nth-child(3){transition-delay:.18s}
.js .reveal-group.in > *:nth-child(4){transition-delay:.27s}
.js .features.reveal-group.in > *:nth-child(1){transition-delay:0s}
.js .features.reveal-group.in > *:nth-child(2){transition-delay:.11s}
.js .features.reveal-group.in > *:nth-child(3){transition-delay:.22s}
@media (prefers-reduced-motion:reduce){
  .js .reveal-group > *{opacity:1;transform:none;transition:none}
}

/* About band — a calm editorial moment with generous air. Kept restrained rather than
   oversized so it reads clean and simple: one quiet serif paragraph, comfortable measure. */
.editorial-band{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(48px,6vw,88px)}
.editorial-lead .statement{
  font-size:clamp(22px,2.7vw,34px);line-height:1.32;max-width:22em;margin-top:24px;color:var(--ink);
}

/* ---------- Metallic infinity mark ----------
   site.js swaps every ✦ spark glyph for this SVG (#ico-infinity in the
   sprite). em-sized so each context's spark font-size still governs it. */
.spark-inf{line-height:0}
.spark-inf .inf{
  width:2.2em;height:1.1em;display:inline-block;vertical-align:-.22em;
}