/* ============================================================
   Things 4 Good — handmade candle fundraiser
   Warm boutique paper aesthetic. Marigold + pine accents.
   ============================================================ */

:root {
  /* warm paper neutrals */
  --paper:      #FBF3E5;   /* base cream */
  --paper-2:    #F6EAD3;   /* slightly deeper warm tint */
  --paper-3:    #FFFDF8;   /* near-white card */
  --ink:        #2B2017;   /* warm near-black */
  --ink-soft:   #6A5A4A;   /* muted brown text */
  --line:       #E4D4B8;   /* hairline on paper */

  /* bright friendly accents (shared chroma/lightness, varied hue) */
  --marigold:   #EE8B26;   /* candle flame / primary */
  --marigold-d: #C9701A;
  --marigold-t: #FBE3C2;   /* tint wash */
  --pine:       #18876F;   /* the "good" / fresh */
  --pine-d:     #0F6A57;
  --pine-t:     #D6EAE0;   /* tint wash */
  --berry:      #D5564B;   /* sparing warm pop */
  --berry-d:    #B23E34;
  --berry-t:    #F4DAD7;
  --sky:        #3E80A6;   /* cool 4th accent (for the 4th Thing) */
  --sky-d:      #2C6587;
  --sky-t:      #D8E7EF;

  --shadow-sm: 0 1px 2px rgba(43,32,23,.06), 0 3px 8px rgba(43,32,23,.05);
  --shadow-md: 0 6px 22px rgba(43,32,23,.10), 0 2px 6px rgba(43,32,23,.06);
  --shadow-lg: 0 24px 60px rgba(43,32,23,.16);

  --radius: 16px;
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 56px);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --hand:  "Caveat", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(238,139,38,.05), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(24,135,111,.045), transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, scroll;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--pine { background: var(--pine); color: #F2FBF7; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pine-d);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--marigold);
  display: inline-block; border-radius: 2px;
}
.section--ink .eyebrow, .section--pine .eyebrow { color: var(--marigold); }
.section--ink .eyebrow::before, .section--pine .eyebrow::before { background: var(--paper); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
h2.t { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 56ch; }
.section--ink .lead, .section--pine .lead { color: rgba(255,255,255,.82); }

em.it { font-style: italic; }

/* hand annotation */
.hand {
  font-family: var(--hand);
  font-size: 1.5rem;
  color: var(--marigold-d);
  font-weight: 600;
  line-height: 1;
}

/* squiggle underline */
.squig { position: relative; white-space: nowrap; }
.squig svg { position: absolute; left: 0; bottom: -.28em; width: 100%; height: .42em; overflow: visible; }
.squig svg path { stroke: var(--marigold); stroke-width: 5; fill: none; stroke-linecap: round; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  padding: 15px 26px; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn--primary { background: var(--marigold); color: #2B2017; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--marigold-d); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.section--ink .btn--ghost, .section--pine .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.section--ink .btn--ghost:hover, .section--pine .btn--ghost:hover { background: #fff; color: var(--ink); border-color:#fff; }
.btn .arr { transition: transform .14s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px var(--gutter);
  background: rgba(251,243,229,.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav.scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(43,32,23,.05); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFE7B0, var(--marigold) 62%, var(--marigold-d));
  box-shadow: 0 0 0 4px rgba(238,139,38,.16), var(--shadow-sm);
  position: relative; flex: none;
}
.brand .mark::after {
  content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  width: 6px; height: 11px; border-radius: 50% 50% 48% 48% / 62% 62% 38% 38%;
  background: linear-gradient(#FFF3C4, var(--marigold));
}
.brand b { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; }
.brand .four { color: var(--marigold-d); font-style: italic; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  white-space: nowrap;
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .96rem;
  position: relative; transition: color .14s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px;
  background: var(--marigold); transition: width .18s ease; border-radius: 2px;
}
.nav-links a:hover::after { width: 100%; }
.nav-date { font-family: var(--sans); font-weight: 700; font-size: .82rem; color: var(--pine-d); }
.nav-cta { display: inline-flex; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 110px); position: relative; overflow: hidden; }
.hero-glow {
  position: absolute; right: -8%; top: -10%; width: 60vmax; height: 60vmax; pointer-events: none;
  background: radial-gradient(circle, rgba(238,139,38,.22), rgba(238,139,38,.07) 38%, transparent 64%);
  z-index: 0;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.2rem); letter-spacing: -.02em; }
.hero h1 .pine { color: var(--pine-d); }
.hero .lead { margin-top: 22px; font-size: clamp(1.1rem, 1.7vw, 1.34rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.hero-note { margin: 22px 0 0; color: var(--ink-soft); font-size: .96rem; font-weight: 700; }
.section--ink .hero-note { color: rgba(255,255,255,.66); }

.hero-art { position: relative; }
.hero-art .ph { aspect-ratio: 4/5; border-radius: 22px; }
.hero-art .tape {
  position: absolute; top: -14px; left: 26px; transform: rotate(-4deg);
  background: var(--paper-3); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  border-radius: 12px; padding: 12px 16px; z-index: 3; max-width: 220px;
}
.hero-art .tape .hand { font-size: 1.6rem; }
.hero-art .tape small { display:block; color: var(--ink-soft); font-weight:600; font-size:.72rem; letter-spacing:.04em; }
.hero-art .badge {
  position: absolute; right: -16px; bottom: 22px; z-index: 3;
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--pine); color: #fff; display: grid; place-content: center; text-align: center;
  box-shadow: var(--shadow-md); transform: rotate(7deg); padding: 10px;
  border: 3px dashed rgba(255,255,255,.45);
}
.hero-art .badge b { font-family: var(--serif); font-size: 1.7rem; display:block; line-height: 1; }
.hero-art .badge span { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- image placeholders ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(238,139,38,.10) 0 14px, rgba(238,139,38,.04) 14px 28px),
    var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-content: center; color: var(--marigold-d);
}
.ph.alt {
  background:
    repeating-linear-gradient(135deg, rgba(24,135,111,.10) 0 14px, rgba(24,135,111,.04) 14px 28px),
    var(--paper-2);
  color: var(--pine-d);
}
.ph .ph-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .ph-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  background: var(--paper-3); border: 1px solid currentColor; color: inherit;
  padding: 6px 12px; border-radius: 999px; opacity: .9;
}

/* ---------- raised stat band ---------- */
.raised { text-align: center; }
.raised .big {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(4rem, 15vw, 11rem); line-height: .9; letter-spacing: -.03em;
  color: var(--marigold);
  text-shadow: 0 0 60px rgba(238,139,38,.35);
}
.raised .big .pre { font-size: .42em; vertical-align: .42em; color: rgba(242,251,247,.6); }
.raised .sub { font-size: clamp(1.05rem, 2vw, 1.4rem); color: rgba(242,251,247,.78); margin-top: 6px; }
.statrow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid rgba(255,255,255,.16); padding-top: 38px;
}
.statrow .stat b { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); display: block; line-height: 1; }
.statrow .stat span { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: rgba(242,251,247,.62); text-transform: uppercase; }

/* ---------- impact / stats ---------- */
.impact-chart {
  display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 40px);
  height: clamp(220px, 34vw, 320px); padding: 24px 6px 0;
  border-bottom: 2px solid var(--line); margin-top: 10px;
}
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-decoration: none; color: inherit; cursor: pointer; }
.bar:hover .col { filter: brightness(1.06) saturate(1.05); }
.bar:hover .val { color: var(--marigold-d); }
.bar.now:hover .val { color: var(--pine-d); }
.bar .val { font-family: var(--serif); font-weight: 600; font-size: clamp(.92rem, 1.5vw, 1.35rem); color: var(--ink); margin-bottom: 10px; }
.bar .col {
  width: 100%; max-width: 92px; flex: none;
  display: flex; flex-direction: column;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .15s ease;
}
/* stacked segments: special events on top, candle sale on the bottom;
   `flex` splits the column height in proportion to each segment's dollars */
.bar .col .seg { width: 100%; min-height: 2px; }
.bar .col .seg:first-child { border-radius: 10px 10px 0 0; }
.seg--candle { background: linear-gradient(180deg, var(--marigold), var(--marigold-d)); }
.seg--event { background: linear-gradient(180deg, #25b497, var(--pine-d)); }
.impact-chart.in .col { transform: scaleY(1); }
.bar .yr { margin-top: 12px; font-weight: 700; color: var(--ink-soft); font-size: clamp(.8rem,1.4vw,.95rem); }
.bar.now .yr { color: var(--pine-d); }
.chart-legend { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.chart-legend .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.chart-legend .sw--candle { background: linear-gradient(180deg, var(--marigold), var(--marigold-d)); }
.chart-legend .sw--event { background: linear-gradient(180deg, #25b497, var(--pine-d)); }
.impact-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: clamp(34px, 5vw, 52px);
}
.impact-foot .istat { text-align: center; }
.impact-foot .istat b { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3rem); display: block; line-height: 1; color: var(--marigold-d); }
.impact-foot .istat span { display: block; margin-top: 8px; color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.impact-link { margin-top: clamp(30px, 4vw, 44px); text-align: center; color: var(--ink-soft); }
.impact-link a { color: var(--marigold-d); font-weight: 700; text-decoration: none; }
.impact-link a:hover { text-decoration: underline; }

/* ---------- journal / blog story cards ---------- */
.journal-callout { margin-top: clamp(38px, 6vw, 68px); }
.journal-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.journal-head .eyebrow { margin-bottom: 10px; }
.journal-head h3 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
.journal-all {
  flex: none; font-weight: 800; color: var(--marigold-d); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4em;
}
.journal-all:hover { text-decoration: underline; }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.journal-card {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm); text-decoration: none;
  color: var(--ink); display: flex; flex-direction: column; min-height: 240px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.journal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--marigold); }
.journal-card .jtype {
  font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pine-d); margin-bottom: 14px;
}
.journal-card h4 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.12; margin: 0; }
.journal-card p { margin: 12px 0 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.52; }
.journal-card .go {
  margin-top: auto; padding-top: 18px; font-weight: 800; color: var(--marigold-d);
  display: inline-flex; align-items: center; gap: .4em;
}
.journal-card:hover .go .arr, .journal-all:hover .arr { transform: translateX(3px); }
.journal-card .arr, .journal-all .arr { transition: transform .14s ease; }

.annual-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 2vw, 20px); }
.annual-card {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 26px); box-shadow: var(--shadow-sm);
}
.annual-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.jyear {
  font-family: var(--serif); font-size: 1.65rem; line-height: 1; color: var(--marigold-d);
}
.jraised {
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; color: var(--pine-d);
  background: var(--pine-t); border: 1px solid #BFDDD0; border-radius: 999px; padding: 5px 10px;
}
.annual-card h3 { font-size: 1.28rem; line-height: 1.15; }
.annual-card p { margin: 8px 0 16px; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.annual-card .annual-takeaway {
  color: var(--ink); font-family: var(--serif); font-style: italic;
  font-size: 1rem; line-height: 1.42; margin-top: 12px;
}
.post-list { display: flex; flex-direction: column; gap: 9px; }
.post-list a {
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: .88rem; line-height: 1.35;
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline;
}
.post-list a span { color: var(--marigold-d); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.post-list a i { font-style: normal; color: var(--marigold-d); transition: transform .14s ease; }
.post-list a:hover { color: var(--marigold-d); }
.post-list a:hover i { transform: translateX(3px); }

/* ---------- featured causes (with personal quotes) ---------- */
.causes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-bottom: clamp(40px, 6vw, 64px); }
.cause {
  background: var(--paper-3); border: 1px solid var(--line); border-left: 4px solid var(--marigold);
  border-radius: 14px; padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.cause:nth-child(even) { border-left-color: var(--pine); }
.cause .who { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cause .av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--marigold-d); background: var(--marigold-t);
}
.cause:nth-child(even) .av { color: var(--pine-d); background: var(--pine-t); }
.cause .who .nm { font-weight: 700; }
.cause .who .nm small { display: block; font-weight: 600; color: var(--ink-soft); font-size: .78rem; letter-spacing: .02em; }
.cause blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.5; color: var(--ink); }
.cause .org { margin-top: auto; padding-top: 18px; }
.cause .org a { font-weight: 700; color: var(--marigold-d); text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.cause:nth-child(even) .org a { color: var(--pine-d); }
.cause .org a:hover { text-decoration: underline; }
.good-sub { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 22px; }

/* ---------- generic section header ---------- */
.sec-head { max-width: 60ch; margin-bottom: clamp(34px, 5vw, 54px); }
.sec-head .lead { margin-top: 16px; }

/* ---------- sale details cards ---------- */
.sale-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 3vw, 36px); align-items: start; }
.when-card {
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.when-card .glow { position:absolute; inset:auto -30% -60% auto; width: 70%; aspect-ratio:1; background: radial-gradient(circle, rgba(238,139,38,.30), transparent 65%); }
.when-card .eyebrow { color: var(--marigold); }
.when-days { display: flex; gap: 14px; margin: 18px 0 10px; flex-wrap: wrap; }
.when-day {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding: 16px 22px; flex: 1; min-width: 130px; position: relative; z-index: 1;
}
.when-day .dow { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; color: var(--marigold); }
.when-day .dnum { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; margin-top: 4px; }
.when-day .mo { color: rgba(255,255,255,.66); font-weight:600; font-size: .9rem; }
.when-note { color: rgba(255,255,255,.7); font-size: .95rem; margin-top: 12px; position: relative; z-index: 1; }

.info-card { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.info-row { display: flex; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.info-row:last-child { border-bottom: 0; }
.info-row .k { font-weight: 700; min-width: 96px; color: var(--ink); }
.info-row .v { color: var(--ink-soft); }
.info-row .v b { color: var(--ink); }
.pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pay span { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 11px; font-size: .82rem; font-weight: 600; }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 30px); margin-top: 8px; }
.step {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm); position: relative;
}
.step .num {
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--marigold-d);
  width: 44px; height: 44px; border-radius: 50%; background: var(--marigold-t);
  display: grid; place-content: center; margin-bottom: 18px;
}
.step.alt .num { color: var(--pine-d); background: var(--pine-t); }
.step h3 { font-size: 1.4rem; margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------- story / split ---------- */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.story p { color: var(--ink-soft); }
.story p + p { margin-top: 16px; }
.story .crackle { font-family: var(--hand); color: var(--marigold-d); font-size: 1.6rem; }
.story-art .ph { aspect-ratio: 5/4; border-radius: 20px; }

/* ---------- makers ---------- */
.makers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.maker { text-align: center; }
.maker .ph { aspect-ratio: 1; border-radius: 20px; margin-bottom: 16px; }
.maker h3 { font-size: 1.5rem; }
.maker .role { font-family: var(--hand); font-size: 1.3rem; color: var(--pine-d); line-height: 1; margin-top: 2px; }
.maker a.site { display: inline-flex; align-items:center; gap: .35em; margin-top: 8px; font-weight: 600; font-size: .88rem; color: var(--marigold-d); text-decoration: none; }
.maker a.site:hover { text-decoration: underline; }

/* ---------- the good / charities ---------- */
.good-note {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--pine-t); border: 1px solid #BFDDD0; color: var(--pine-d);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 34px; font-weight: 600;
}
/* home digest of every cause — the full, filterable list lives on /impact/ */
.good-summary { text-align: center; }
.good-summary p { max-width: 720px; margin: 4px auto 28px; font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--ink-soft); line-height: 1.65; }
.logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-bottom: 30px; }
.logo-wall .lw { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px; box-shadow: var(--shadow-sm); }
.logo-wall .lw img { height: 52px; width: auto; display: block; }

/* ---------- home: light path cards ---------- */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.path-card {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-sm); text-decoration: none;
  display: flex; flex-direction: column; min-height: 220px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.path-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--marigold); }
.path-card .kicker { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--pine-d); margin-bottom: 14px; }
.path-card h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.path-card p { color: var(--ink-soft); font-size: .96rem; margin: 12px 0 0; }
.path-card .go { margin-top: auto; padding-top: 18px; font-weight: 800; color: var(--marigold-d); display: inline-flex; align-items: center; gap: .4em; }
.path-card:nth-child(2) .kicker { color: var(--berry-d); }
.path-card:nth-child(3) .kicker { color: var(--sky-d); }

.charities { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.charity {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 22px 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.charity:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--marigold); }
.charity .ctop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.charity .glyph {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-content: center;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--pine-d); background: var(--pine-t);
}
.charity .glyph.haslogo { width: auto; height: auto; max-width: 64%; display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; box-shadow: var(--shadow-sm); }
.charity .glyph.haslogo img { width: auto; height: 24px; max-width: 100%; object-fit: contain; display: block; }
.charity .yr { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); background: var(--paper-2); border:1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.charity h3 { font-size: 1.22rem; line-height: 1.15; }
.charity p { margin: 8px 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.charity .go { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: .85rem; color: var(--marigold-d); display: inline-flex; align-items: center; gap: .4em; }
.charity:hover .go .arr { transform: translateX(3px); }
.charity .arr { transition: transform .14s ease; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 4px; display: flex; gap: 18px; align-items: center;
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .ic { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); position: relative; transition: .2s; }
.qa .ic::before, .qa .ic::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.qa .ic::before { width: 12px; height: 2px; }
.qa .ic::after { width: 2px; height: 12px; transition: transform .2s; }
.qa[open] .ic { background: var(--marigold); border-color: var(--marigold); }
.qa[open] .ic::before, .qa[open] .ic::after { background: var(--ink); }
.qa[open] .ic::after { transform: translate(-50%,-50%) scaleY(0); }
.qa .ans { padding: 0 4px 24px; color: var(--ink-soft); max-width: 70ch; }
.qa .ans b { color: var(--ink); }
.qa .ans .pay { margin-top: 10px; }

/* ---------- subscribe ---------- */
.subscribe { text-align: center; }
.sub-form { display: flex; gap: 10px; max-width: 480px; margin: 26px auto 0; flex-wrap: wrap; justify-content: center; }
.sub-form input {
  flex: 1; min-width: 220px; padding: 15px 20px; border-radius: 999px; border: 2px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color: #fff; font-family: var(--sans); font-size: 1rem; outline: none;
}
.sub-form input::placeholder { color: rgba(255,255,255,.6); }
.sub-form input:focus { border-color: var(--marigold); }
.sub-note { font-size: .86rem; color: rgba(255,255,255,.6); margin-top: 14px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding-block: 56px 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer .brand b { color: #fff; }
.footer .fcol h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--marigold); margin: 0 0 12px; }
.footer .fcol a { display: block; color: rgba(255,255,255,.72); text-decoration: none; padding: 4px 0; font-size: .95rem; }
.footer .fcol a:hover { color: #fff; }
.footer .fcols { display: flex; gap: clamp(36px, 7vw, 90px); flex-wrap: wrap; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(255,255,255,.5); }
.footer-bottom .heart { color: var(--berry); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- maker night: homepage teaser band ---------- */
.mn-band {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
}
.mn-band .glow { position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(238,139,38,.30), transparent 64%); pointer-events: none; }
.mn-band .mn-copy { position: relative; z-index: 1; max-width: 60ch; }
.mn-band .tag { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--marigold); margin-bottom: 12px; }
.mn-band h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.06; }
.mn-band p { margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: 1.02rem; }
.mn-band .mn-act { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mn-band .mn-act .small { font-size: .82rem; color: rgba(255,255,255,.6); font-weight: 600; }

/* ---------- maker night: spots indicator ---------- */
.spots { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.spots .flames { display: flex; gap: 9px; }
.spots .flame {
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #FFE7B0, var(--marigold) 62%, var(--marigold-d));
  box-shadow: 0 0 14px rgba(238,139,38,.65);
}
.spots .flame.out { background: rgba(255,255,255,.14); box-shadow: none; }
.spots .stxt { font-weight: 700; letter-spacing: .02em; color: var(--marigold); }
.section--ink .spots .stxt { color: var(--marigold); }

/* ---------- maker night: what's included ---------- */
.gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.gift { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-sm); }
.gift .big { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.2rem); color: var(--marigold-d); line-height: 1; }
.gift.alt .big { color: var(--pine-d); }
.gift h3 { font-size: 1.32rem; margin: 12px 0 8px; }
.gift p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero-grid, .sale-grid, .split { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
  .steps, .charities, .journal-grid { grid-template-columns: repeat(2, 1fr); }
  .annual-grid { grid-template-columns: repeat(2, 1fr); }
  .causes, .impact-foot { grid-template-columns: 1fr; }
  .makers { grid-template-columns: repeat(2, 1fr); }
  .statrow { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .nav { flex-wrap: wrap; gap: 10px 18px; padding-block: 12px 10px; }
  .nav-links {
    order: 3; width: 100%; overflow-x: auto; gap: 18px; padding: 4px 2px 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-date { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .steps, .charities, .makers, .gifts, .path-grid, .journal-grid, .annual-grid { grid-template-columns: 1fr; }
  .journal-head { display: block; }
  .journal-all { margin-top: 12px; }
  .hero-cta .btn { flex: 1; justify-content: center; }
  .nav-cta { display: none; }
}

/* ============================================================
   SUBPAGE ADDITIONS — Impact, Stats, Preorder, FAQ
   ============================================================ */

/* ---------- compact page header ---------- */
.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.page-head .hero-glow { opacity: .8; }
.back-link { display: inline-flex; align-items: center; gap: .4em; color: var(--marigold-d); font-weight: 700; font-size: .9rem; text-decoration: none; margin-bottom: 14px; }
.back-link:hover { text-decoration: underline; }
.section--ink .back-link { color: var(--marigold); }

/* ---------- summary stat strip ---------- */
.sumstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 22px); margin-top: clamp(26px, 4vw, 40px); }
.sumstrip .s { background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.sumstrip .s b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1; display: block; color: var(--ink); }
.sumstrip .s.acc b { color: var(--marigold-d); }
.sumstrip .s.acc2 b { color: var(--pine-d); }
.sumstrip .s span { display: block; margin-top: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); text-transform: uppercase; }

.impact-principle {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 4vw, 38px); padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}
.impact-principle p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }
.impact-principle b { color: var(--ink); }

/* ---------- maker color coding ---------- */
.av[data-who="Jamie"], .iav[data-who="Jamie"] { color: var(--marigold-d); background: var(--marigold-t); }
.av[data-who="Tammy"], .iav[data-who="Tammy"] { color: var(--pine-d); background: var(--pine-t); }
.av[data-who="Mazie"], .iav[data-who="Mazie"] { color: var(--berry-d); background: var(--berry-t); }
.av[data-who="Tyler"], .iav[data-who="Tyler"] { color: var(--sky-d); background: var(--sky-t); }
.av[data-who="The Things"], .iav[data-who="The Things"],
.av[data-who="Everyone"], .iav[data-who="Everyone"] { color: var(--ink-soft); background: var(--paper-2); }

/* ---------- filter / control bar ---------- */
.controls {
  position: sticky; top: 64px; z-index: 20;
  background: rgba(251,243,229,.86); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: clamp(26px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  box-shadow: var(--shadow-sm);
}
.ctrl { display: flex; flex-direction: column; gap: 7px; }
.ctrl > .lab { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--sans); font-weight: 700; font-size: .82rem;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--paper-3); border: 1.5px solid var(--line); color: var(--ink-soft);
  transition: all .14s ease; display: inline-flex; align-items: center; gap: .4em;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[data-who="Jamie"][aria-pressed="true"] { background: var(--marigold-d); border-color: var(--marigold-d); color: #fff; }
.chip[data-who="Tammy"][aria-pressed="true"] { background: var(--pine-d); border-color: var(--pine-d); color: #fff; }
.chip[data-who="Mazie"][aria-pressed="true"] { background: var(--berry-d); border-color: var(--berry-d); color: #fff; }
.chip[data-who="Tyler"][aria-pressed="true"] { background: var(--sky-d); border-color: var(--sky-d); color: #fff; }
.chip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.chip[data-who="Jamie"] .swatch { background: var(--marigold); }
.chip[data-who="Tammy"] .swatch { background: var(--pine); }
.chip[data-who="Mazie"] .swatch { background: var(--berry); }
.chip[data-who="Tyler"] .swatch { background: var(--sky); }
.ctrl.select { flex: 1; min-width: 170px; }
.ctrl.select select {
  font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink);
  padding: 11px 38px 11px 14px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A5A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  outline: none; width: 100%; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.ctrl.select select:focus { border-color: var(--marigold); }

.ledger-head { max-width: 760px; margin-bottom: clamp(22px, 4vw, 36px); }
.ledger-head .lead { margin-top: 10px; font-size: clamp(1rem, 1.8vw, 1.12rem); }
.filter-story {
  margin-top: 18px; padding: 16px 18px; border-left: 4px solid var(--pine);
  background: var(--pine-t); color: var(--ink); border-radius: 10px;
  font-size: .96rem; line-height: 1.55;
}

.result-count { font-weight: 600; color: var(--ink-soft); font-size: .92rem; margin: 0 0 18px; }
.result-count b { color: var(--ink); font-weight: 700; }

/* ---------- impact cards ---------- */
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.icard {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 22px 20px; box-shadow: var(--shadow-sm); color: var(--ink);
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.icard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--marigold); }
.icard .itop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.icard .glyph {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-content: center;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--pine-d); background: var(--pine-t);
}
.icard .ybadge { font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); background: var(--marigold-t); border: 1px solid #EFCD9A; padding: 4px 11px; border-radius: 999px; }
.icard .ebadge { font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--pine-d); background: var(--pine-t); border: 1px solid #BFDDD0; padding: 4px 11px; border-radius: 999px; }
.icard .iname { font-family: var(--serif); font-weight: 500; font-size: 1.28rem; line-height: 1.12; }
.icard .iplace { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; }
.icard .iblurb { margin: 12px 0 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.icard .imeta { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.icard .cardtags { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.icard .who-pill { display: inline-flex; align-items: center; gap: .45em; font-size: .76rem; font-weight: 700; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); }
.icard .who-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.icard .who-pill[data-who="Jamie"] { color: var(--marigold-d); background: var(--marigold-t); border-color: #EFCD9A; }
.icard .who-pill[data-who="Tammy"] { color: var(--pine-d); background: var(--pine-t); border-color: #BFDDD0; }
.icard .who-pill[data-who="Mazie"] { color: var(--berry-d); background: var(--berry-t); border-color: #E7C6D6; }
.icard .who-pill[data-who="Tyler"] { color: var(--sky-d); background: var(--sky-t); border-color: #BCD6E8; }
.icard .iamt { text-align: left; }
.icard .iamt b { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; color: var(--marigold-d); line-height: 1; display: block; }
.icard .iamt span { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.icard .iname { display: block; text-decoration: none; color: var(--ink); margin-bottom: 2px; }
.icard .iname:hover { color: var(--marigold-d); }
.icard .glyph.haslogo { width: auto; height: auto; max-width: 64%; display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; box-shadow: var(--shadow-sm); }
.icard .glyph.haslogo img { width: auto; height: 26px; max-width: 100%; object-fit: contain; display: block; }
.icard .why-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.icard .why-k {
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pine-d); margin-bottom: 8px;
}
.icard .why-note blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: .96rem;
  line-height: 1.5; color: var(--ink);
}
.icard .why-note blockquote cite {
  display: block; margin-top: 8px; font-family: var(--sans); font-style: normal;
  font-weight: 700; font-size: .8rem; color: var(--ink-soft);
}
.icard .why-full { margin-top: 10px; }
.icard .why-full summary {
  cursor: pointer; list-style: none; font-size: .78rem; font-weight: 800;
  color: var(--marigold-d);
}
.icard .why-full summary::-webkit-details-marker { display: none; }
.icard .why-full summary::after { content: " +"; color: var(--ink-soft); }
.icard .why-full[open] summary::after { content: " \2212"; }
.icard .why-full blockquote {
  margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line);
  color: var(--ink-soft); font-size: .9rem;
}
.icard .go { margin-top: 14px; font-weight: 700; font-size: .82rem; color: var(--marigold-d); display: inline-flex; align-items: center; gap: .4em; text-decoration: none; align-self: flex-start; }
.icard .go:hover .arr { transform: translateX(3px); }
.icard .arr { transition: transform .14s ease; }
.est { font-style: italic; }
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty b { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); display: block; margin-bottom: 6px; }
.impact-close {
  margin-top: clamp(30px, 5vw, 54px); padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper-3);
  box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 4vw, 42px);
}
.impact-close h3 {
  margin: 4px 0 8px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.05;
}
.impact-close p { margin: 0; color: var(--ink-soft); max-width: 56ch; line-height: 1.55; }
.impact-close .eyebrow { margin: 0; }
.impact-close-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex: none; }
.note-est { font-size: .86rem; color: var(--ink-soft); margin-top: clamp(26px, 4vw, 40px); text-align: center; }
.note-est b { color: var(--ink); }

/* ---------- stats: data lab ---------- */
.stats-hero { text-align: left; }
.stats-hero .wrap { position: relative; z-index: 1; }
.stats-hero h1 {
  font-family: var(--serif); font-weight: 500; max-width: 12ch;
  font-size: clamp(2.7rem, 6vw, 5rem); letter-spacing: -.02em; line-height: .98;
}
.stats-hero .lead {
  margin-top: 18px; max-width: 720px; color: rgba(255,255,255,.78);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}
.stats-hero-grid {
  max-width: 640px; margin-top: clamp(34px, 6vw, 64px);
}
.stats-hero-total, .stats-hero-note {
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  background: rgba(255,255,255,.055); box-shadow: var(--shadow-sm);
}
.stats-hero-total { padding: clamp(24px, 4vw, 38px); }
.stats-hero-total > span, .stats-hero-note .k {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marigold);
}
.stats-hero-total b {
  display: block; margin-top: 12px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(4.2rem, 12vw, 8.8rem); letter-spacing: -.04em; line-height: .86;
  color: var(--marigold); text-shadow: 0 0 60px rgba(238,139,38,.35);
}
.stats-hero-total .pre { font-size: .42em; vertical-align: .42em; color: rgba(242,251,247,.58); }
.stats-hero-total p, .stats-hero-note p { margin: 14px 0 0; color: rgba(255,255,255,.68); line-height: 1.55; }
.stats-hero-note { padding: clamp(22px, 3vw, 30px); align-self: end; }

.ops-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px);
}
.ops-card {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm);
}
.ops-card .k {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  line-height: .95; color: var(--marigold-d);
}
.ops-card:nth-child(2n) .k { color: var(--pine-d); }
.ops-card:nth-child(3n) .k { color: var(--berry-d); }
.ops-card .l {
  margin-top: 10px; font-weight: 800; letter-spacing: .03em;
  color: var(--ink); text-transform: uppercase; font-size: .78rem;
}
.ops-card p { margin: 8px 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }

.year-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.year-card {
  display: flex; flex-direction: column; min-height: 100%;
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(18px, 2.4vw, 24px); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.year-card:hover {
  transform: translateY(-2px); border-color: rgba(238,139,38,.45);
  box-shadow: 0 14px 30px rgba(54,38,28,.11);
}
.year-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.year-num {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.65rem);
  line-height: .95; color: var(--ink);
}
.year-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px;
  border: 1px solid #EAC68E; border-radius: 999px; background: var(--marigold-t);
  color: var(--marigold-d); font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.year-card-metrics { display: grid; gap: 10px; margin-top: 18px; }
.year-card-metrics div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.year-card-metrics b { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1; }
.year-card-metrics div:nth-child(1) b { color: var(--marigold-d); }
.year-card-metrics div:nth-child(2) b { color: var(--pine-d); }
.year-card-metrics div:nth-child(3) b { color: var(--sky-d); }
.year-card-metrics span {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: right;
}
.year-card p { margin: 16px 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }
.insight-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: clamp(18px, 3vw, 28px); }
.insight {
  background: var(--paper-3); border: 1px solid var(--line); border-left: 4px solid var(--pine);
  border-radius: 14px; padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow-sm);
}
.insight:nth-child(2) { border-left-color: var(--berry); }
.insight .k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.insight b { display: block; margin-top: 6px; font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1; }
.insight p { margin: 10px 0 0; color: var(--ink-soft); line-height: 1.52; }

.behavior-grid, .inventory-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(18px, 3vw, 32px); align-items: start;
}
.histogram, .payment-lab, .scent-board, .learn-card {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow-sm);
}
.chart-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.chart-title h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.1; }
.chart-title span { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hrow, .pay-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 36px; align-items: center; gap: 10px;
  margin-top: 10px; font-size: .88rem; font-weight: 800;
}
.hrow span, .pay-row span { color: var(--ink-soft); }
.hrow i, .pay-row i {
  height: 15px; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, var(--marigold), var(--marigold-d));
}
.hrow b, .pay-row b { text-align: right; color: var(--ink); }
.payment-lab .venmo-callout {
  background: var(--pine-t); border: 1px solid #BFDDD0; border-radius: 14px; padding: 18px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 16px;
}
.venmo-callout b { font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 3.4rem); color: var(--pine-d); line-height: .9; }
.venmo-callout p { margin: 0; color: var(--ink-soft); font-weight: 600; }
.pay-row { grid-template-columns: 78px minmax(0, 1fr) 32px; }
.pay-row i { background: linear-gradient(90deg, var(--pine), var(--pine-d)); }

.scent-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.scent-card {
  display: flex; flex-direction: column; min-height: 100%;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.scent-card.sold-out { border-color: #C8DDCF; background: var(--pine-t); }
.scent-card.over-sold { border-color: #E2BCD0; background: var(--berry-t); }
.scent-card-top { display: grid; gap: 6px; }
.scent-card h4 { font-size: .95rem; line-height: 1.15; margin: 0; }
.scent-card-top span {
  width: fit-content; font-size: .64rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pine-d);
}
.scent-card-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px;
}
.scent-card-stats div {
  border-top: 1px solid var(--line); padding-top: 9px;
}
.scent-card-stats b {
  display: block; font-family: var(--serif); font-weight: 500; font-size: 1.45rem;
  line-height: 1; color: var(--berry-d);
}
.scent-card-stats div:nth-child(2) b { color: var(--ink); }
.scent-card-stats span {
  display: block; margin-top: 4px; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.scent-card p {
  margin: auto 0 0; padding-top: 14px; color: var(--ink-soft);
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.scent-card.sold-out p { color: var(--pine-d); }
.scent-card.over-sold p { color: var(--berry-d); }
.learn-card { border-left: 4px solid var(--marigold); }
.learn-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.08; margin-top: 6px; }
.learn-card p { color: var(--ink-soft); line-height: 1.58; }
.learn-card ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.learn-card li { color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 10px; }
.learn-card li b { color: var(--ink); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }

.math-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.math-card {
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm);
}
.math-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--marigold-d); }
.math-card:nth-child(2) b { color: var(--pine-d); }
.math-card:nth-child(3) b { color: var(--berry-d); }
.math-card:nth-child(4) b { color: var(--sky-d); }
.math-card span { display: block; margin-top: 10px; color: var(--ink-soft); font-weight: 700; font-size: .9rem; line-height: 1.4; }
.cost-note {
  margin-top: clamp(18px, 3vw, 30px); padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line); border-left: 4px solid var(--pine);
  border-radius: 16px; background: var(--paper-3); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 4vw, 36px);
}
.cost-note h3 {
  margin: 4px 0 10px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.45rem, 2.7vw, 2rem); line-height: 1.12;
}
.cost-note p { margin: 0; color: var(--ink-soft); line-height: 1.58; max-width: 72ch; }
.cost-note .eyebrow { margin: 0; }
.cost-note .btn { flex: none; }

/* ---------- stats: big tiles ---------- */
.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.tile { background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.tile.span2 { grid-column: span 2; }
.tile .k { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .95; color: var(--marigold-d); }
.tile.alt .k { color: var(--pine-d); }
.tile.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile.ink .k { color: var(--marigold); }
.tile .l { margin-top: 10px; font-weight: 600; color: var(--ink-soft); font-size: .98rem; }
.tile.ink .l { color: rgba(255,255,255,.72); }
.tile .sub { margin-top: 6px; font-size: .84rem; color: var(--ink-soft); }
.tile.ink .sub { color: rgba(255,255,255,.55); }

/* ---------- stats: cumulative timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 2vw, 20px); margin-top: 10px; }
.tnode { text-align: center; }
.tnode .yr { font-weight: 800; color: var(--ink-soft); font-size: .85rem; letter-spacing: .04em; }
.tnode .amt { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.55rem); color: var(--ink); margin-top: 4px; }
.tnode .cum { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pine-d); margin-top: 6px; }
.tnode .grow { font-size: .76rem; font-weight: 700; color: var(--marigold-d); margin-top: 2px; }

/* ---------- stats: records ---------- */
.records { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.record { background: var(--paper-3); border: 1px solid var(--line); border-left: 4px solid var(--marigold); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-sm); }
.record:nth-child(2) { border-left-color: var(--pine); }
.record:nth-child(3) { border-left-color: var(--berry); }
.record .rl { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.record .rv { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; margin: 8px 0 4px; }
.record .rd { font-size: .9rem; color: var(--ink-soft); }

/* ---------- payment cards ---------- */
.paygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
.paycard { background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.paycard .pname { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.5rem; }
.paycard .picon { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-content: center; font-family: var(--sans); font-weight: 800; font-size: 1.1rem; color: var(--marigold-d); background: var(--marigold-t); }
.paycard.alt .picon { color: var(--pine-d); background: var(--pine-t); }
.paycard .handle { margin-top: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.02rem; font-weight: 600; color: var(--ink); background: var(--paper-2); border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; word-break: break-all; }
.paycard .pdesc { margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }

@media (max-width: 920px) {
  .impact-grid, .tilegrid, .records, .sumstrip { grid-template-columns: repeat(2, 1fr); }
  .stats-hero-grid, .behavior-grid, .inventory-layout { grid-template-columns: 1fr; }
  .ops-grid, .math-grid { grid-template-columns: repeat(2, 1fr); }
  .cost-note { align-items: flex-start; flex-direction: column; }
  .impact-principle { grid-template-columns: 1fr; }
  .tile.span2 { grid-column: span 2; }
  .paygrid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .controls { top: 0; }
  .impact-close { align-items: flex-start; flex-direction: column; }
  .impact-close-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .impact-grid, .tilegrid, .records, .sumstrip, .ops-grid, .math-grid, .insight-row { grid-template-columns: 1fr; }
  .tile.span2 { grid-column: span 1; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .stats-hero-total b { font-size: clamp(3.8rem, 18vw, 5.2rem); }
  .chart-title { display: block; }
  .chart-title span { display: block; margin-top: 6px; }
}