/* Layout: "ancestral meets digital". Dark only: every section sits on a muted near-black ground tinted with the hero's
   sunset-to-teal palette, so the page flows season by season. Folk storytelling art lives in the hero tree and season chapters. */
:root {
  color-scheme: dark;
  --bg: #131210;
  --surface: #1C1A17;
  --ink: #F1E8D5;
  --muted: #B3A893;
  --line: #2F2B25;
  --orange: #F26A1B;
  --orange-hover: #FF7F33;
  --on-orange: #16130F;
  --link: #F58A4E;
  --teal: #5EC4CC;
  --teal-tint: #182628;
  --gunmetal: #222B2F;
  --gunmetal-2: #33424A;
  --metal: linear-gradient(135deg, #1E5F66 0%, #3E8C92 45%, #24525A 70%, #2A3439 100%);
  --gold: #E0AE4A;
  --red: #E2574A;
  --night: #0B0A09;
  --night-2: #171512;
  --night-fg: #F3EAD6;
  --night-muted: #B9AE98;
  --night-gold: #E0A93B;
  --night-teal: #3FB3C2;
  --hdr: #1C1A17;
  --tile: rgba(14, 12, 10, .62);

  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --dw: 400;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tech: "Chakra Petch", "Consolas", "Menlo", monospace;

  --wrap: 74rem;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--hdr); }
h1, h2, h3 { font-family: var(--display); font-weight: var(--dw); line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }
svg { display: block; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--tech); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: 4px; font-weight: 700; text-decoration: none; font-size: .95rem; border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s; font-family: var(--body); cursor: pointer; }
.btn-primary { background: var(--orange); color: var(--on-orange); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* Logo: minimal, on the orange-to-teal grid */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.mark { width: 2.6rem; height: 2.6rem; flex: none; }
.brand-name { font-family: var(--display); font-weight: var(--dw); font-size: 1.3rem; line-height: 1; letter-spacing: .01em; }
.brand-name small { display: block; font-family: var(--tech); font-weight: 500; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }

/* Header */
.top-note { background: var(--gunmetal); color: var(--night-muted); font-family: var(--tech); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.top-note .wrap { padding-block: .45rem; }
.top-note b { color: var(--night-gold); font-weight: 600; }
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--hdr); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }
nav.main { display: flex; gap: 1.8rem; font-weight: 600; font-size: .94rem; }
nav.main a { text-decoration: none; }
nav.main a:hover { color: var(--link); }
.cart { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 600; font-size: .88rem; padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.cart b { background: var(--orange); color: var(--on-orange); border-radius: 3px; font-size: .72rem; padding: 0 .4rem; font-family: var(--tech); }
@media (max-width: 760px) { nav.main { display: none; } }

/* Hero: calm "simulation meets real" scene, headline left, tree of life right */
.hero { position: relative; background: #0A0908; color: var(--night-fg); overflow: hidden; isolation: isolate; }
.hero-bg, .hero-motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.hero-motes { z-index: -2; pointer-events: none; }
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,7,6,.9) 0%, rgba(8,7,6,.72) 38%, rgba(8,7,6,.3) 70%, rgba(8,7,6,.2) 100%), linear-gradient(0deg, rgba(8,7,6,.6) 0%, rgba(8,7,6,0) 35%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "copy tree" "cue tree"; align-items: center; gap: 1.5rem 2.5rem; padding-block: 5rem 2.2rem; min-height: min(78vh, 46rem); }
.hero-copy { grid-area: copy; max-width: 40rem; min-width: 0; }
.hero .eyebrow { color: var(--night-teal); }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.06; margin: 1.1rem 0 1.4rem; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lede { font-size: 1.15rem; color: #D9CFBB; max-width: 33rem; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero .btn-ghost { color: var(--night-fg); background: rgba(8,7,6,.35); }
.scroll-cue { grid-area: cue; align-self: end; justify-self: start; font-family: var(--tech); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--night-muted); text-decoration: none; }
.scroll-cue span { display: inline-block; margin-left: .4rem; color: var(--orange); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(4px); } }

/* Tree of life */
.tree-wrap { grid-area: tree; min-width: 0; width: 100%; max-width: 34rem; justify-self: center; }
.tree-stage { position: relative; width: 100%; aspect-ratio: 520 / 500; max-width: 100%; }
.tree-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaf { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.2,.7,.2,1), fill 1.1s ease, opacity .8s ease; transition-delay: var(--dl, 0s); }
.snow, .tdisc { transition: opacity 1s ease; transition-delay: var(--dl, 0s); }
.flake, .fall { opacity: 0; transition: opacity 1s ease; }
.tree-stage[data-season="3"] .flake { opacity: .9; animation: drift-down 7s linear infinite; animation-delay: var(--dl, 0s); }
.tree-stage[data-season="2"] .fall { opacity: .95; animation: drift-down 6s ease-in infinite; animation-delay: var(--dl, 0s); }
@keyframes drift-down { from { transform: translate(0, -30px); } to { transform: translate(18px, 150px); } }
.tglow { animation: breathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { opacity: .65; transform: scale(1.04); } }
.tmark { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--night-muted); font-family: var(--tech); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tmark svg { position: static; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: rgba(10,9,8,.7); border: 1px solid rgba(243,234,214,.28); padding: .45rem; transition: border-color .3s, box-shadow .3s, transform .3s; }
.tmark:hover svg, .tmark[aria-pressed="true"] svg { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242,106,27,.18), 0 0 22px rgba(242,106,27,.45); transform: scale(1.06); }
.tmark[aria-pressed="true"] { color: var(--night-fg); }
.tree-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .2rem .7rem; margin-top: .4rem; text-align: center; min-height: 3.2rem; }
.tc-season { font-family: var(--display); font-size: 1.45rem; color: var(--night-fg); }
.tc-stage { font-family: var(--tech); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--night-gold); }
.tc-hint { flex-basis: 100%; font-size: .85rem; color: var(--night-muted); }
@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; grid-template-areas: "copy" "tree" "cue"; padding-block: 3.5rem 1.8rem; min-height: 0; }
  .tree-wrap { max-width: 24rem; }
  .hero-shade { background: linear-gradient(180deg, rgba(8,7,6,.85) 0%, rgba(8,7,6,.55) 55%, rgba(8,7,6,.7) 100%); }
}

/* Season chapters: banner plus that season's picks */
.chapter { background: var(--night); color: var(--night-fg); border-block: 1px solid #2a241e; scroll-margin-top: 4.5rem; }
.ch-head { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem 2.5rem; align-items: center; padding-block: 2rem .6rem; }
.ch-copy { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ch-k { font-family: var(--tech); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--night-gold); }
.ch-line { font-family: var(--display); font-weight: var(--dw); font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.2; text-wrap: balance; }
.ch-sub { color: var(--night-muted); font-size: .95rem; max-width: 28rem; }
.ch-art { width: 100%; max-width: 100%; height: auto; aspect-ratio: 640 / 200; overflow: visible; }
.chapter .ch-copy, .ch-sky, .ch-fig, .ch-picks { transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.ch-fig, .ch-sky { transform-box: view-box; }
.chapter.pre .ch-copy { opacity: .25; transform: translateY(14px); }
.chapter.pre .ch-fig { opacity: .2; transform: translateX(-40px); }
.chapter.pre .ch-sky { opacity: .2; transform: translateY(26px); }
.chapter.pre .ch-picks { opacity: .3; transform: translateY(20px); }
.ch-picks { --d: .35s; padding-block: 1rem 2.4rem; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mini { display: grid; grid-template-columns: 4.2rem 1fr; gap: .9rem; padding: 1rem; background: var(--night-2); border: 1px solid #2f2922; border-radius: 4px; min-width: 0; }
.mini .mini-img { background: #221d18; border-radius: 3px; display: grid; place-items: center; aspect-ratio: 3 / 4; }
.mini .bottle { width: 52%; height: 64%; margin-top: 18%; }
.mini .bottle .tag { font-size: .38rem; padding: 6% 2%; }
.mini-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.mini-name { font-family: var(--display); font-size: 1.08rem; line-height: 1.25; }
.mini-take { font-size: .84rem; color: var(--night-muted); }
.mini-take b { color: var(--night-fg); font-weight: 600; }
.mini-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: auto; padding-top: .3rem; }
.mini .price { font-size: 1.05rem; }
.mini .price small { color: var(--night-muted); }
.mini .add { padding: .4rem .7rem; font-size: .8rem; }
.ch-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; font-size: .85rem; color: var(--night-muted); }
.ch-more .text-link { color: var(--orange); }
@media (max-width: 920px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ch-head { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mini-grid { grid-template-columns: 1fr; } }

/* Product tags: one need, one or more life stages */
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag-need, .tag-stage { font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: 3px; letter-spacing: .02em; }
.tag-need { background: var(--teal-tint); color: var(--teal); }
.tag-stage { border: 1px solid var(--gold); color: var(--gold); }
.chapter .tag-need { background: rgba(62,154,160,.18); color: #8FD3D8; }
.chapter .tag-stage { border-color: rgba(224,169,59,.6); color: var(--night-gold); }

/* Two ways to shop */
.shop-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); margin-bottom: 1.6rem; }
.shop-tabs button { font: inherit; font-weight: 600; font-size: .92rem; color: var(--muted); background: transparent; border: 0; border-radius: 4px; padding: .5rem 1rem; cursor: pointer; }
.shop-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stage { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; background: var(--bg); text-decoration: none; min-width: 0; transition: background .2s; }
.stage:hover { background: var(--surface); }
.stage:hover h3 { color: var(--link); }
.stage .glyph { grid-row: auto; }
.stage h3 { font-size: 1.35rem; }
.stage .st-name { font-family: var(--tech); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.stage p { font-size: .9rem; color: var(--muted); }
.stage .count { font-family: var(--tech); font-size: .74rem; color: var(--muted); margin-top: auto; }
.shop-note { color: var(--muted); font-size: .92rem; margin-top: 1.2rem; max-width: 46rem; }
@media (max-width: 900px) { .stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stages { grid-template-columns: 1fr; } }

.cat-all { background: var(--surface); }
.cat-all .text-link { align-self: start; }
.village-intro { color: var(--muted); max-width: 40rem; margin: -1.2rem 0 2rem; }
.product .tags { margin-top: .1rem; }

/* Header: dark gunmetal */
header.site { background: var(--gunmetal); color: #F3EAD6; border-bottom-color: #3B4A50; }
header.site .brand-name small { color: #B9AE98; }
header.site nav.main a:hover { color: var(--orange); }
header.site .cart { background: transparent; border-color: rgba(243,234,214,.3); color: #F3EAD6; }
.top-note { background: var(--night); }
body::before { background: var(--gunmetal); }
@media (prefers-reduced-motion: reduce) { .flake, .fall, .tglow, .scroll-cue span { animation: none !important; } }


/* Pattern divider */
.divider { background: var(--night); height: 38px; overflow: hidden; }
.divider svg { width: 100%; height: 38px; }

/* Promise strip */
.promises ul { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: 2.2rem; padding-inline: 0; }
.promises li { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.promises .k { font-family: var(--tech); font-size: .74rem; letter-spacing: .14em; color: var(--orange); }
.promises strong { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.promises span { font-size: .92rem; color: var(--muted); }
@media (max-width: 880px) { .promises ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .promises ul { grid-template-columns: 1fr; } }

section.block > .wrap { padding-block: 5rem; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 2.4rem; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: .6rem; }
.sec-head p { color: var(--muted); max-width: 30rem; }
.text-link { font-weight: 700; color: var(--link); text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }

/* Categories */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cat { display: grid; grid-template-columns: 3.2rem 1fr; gap: .4rem 1.1rem; padding: 1.6rem 1.5rem; background: var(--bg); text-decoration: none; transition: background .2s; min-width: 0; }
.cat:hover { background: var(--surface); }
.cat:hover h3 { color: var(--link); }
.glyph { grid-row: span 3; width: 3.2rem; height: 3.2rem; background: var(--gunmetal); border-radius: 3px; padding: .35rem; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; min-width: 0; }
.cat h3 { font-size: 1.3rem; transition: color .2s; }
.cat .count { font-family: var(--tech); font-size: .74rem; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat p { font-size: .9rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .74rem; padding: .12rem .55rem; border-radius: 3px; background: var(--teal-tint); color: var(--teal); font-weight: 600; }
.cat.soon .chip { background: transparent; border: 1px dashed var(--gold); color: var(--gold); }
@media (max-width: 900px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; } }

/* Products with BF's Take: calm, lots of air */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.product { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.p-img { position: relative; aspect-ratio: 1 / 1; max-width: 100%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.bottle { position: relative; width: 30%; height: 56%; margin-top: 8%; border-radius: 16% 16% 8% 8% / 10% 10% 4% 4%;
  background: linear-gradient(100deg, #5a2c08 0%, #9b5214 28%, #d88f3c 42%, #a45a17 58%, #4f2706 100%); }
.bottle::before { content: ""; position: absolute; left: 24%; right: 24%; top: -13%; height: 14%; border-radius: 2px 2px 0 0; background: #16130F; }
.bottle .tag { position: absolute; left: 10%; right: 10%; top: 30%; background: #F6EEDD; border-radius: 2px; padding: 8% 4%; text-align: center; font-family: var(--tech); font-weight: 600; font-size: .62rem; color: #16130F; line-height: 1.2; letter-spacing: .04em; }
.tier { position: absolute; top: .75rem; left: .75rem; font-family: var(--tech); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); background: var(--bg); }
.tier.pro { border-color: var(--teal); color: var(--teal); }
.p-meta { display: flex; flex-direction: column; gap: .2rem; }
.p-cat { font-family: var(--tech); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.p-name { font-family: var(--display); font-weight: var(--dw); font-size: 1.25rem; line-height: 1.3; }
.p-brand { font-size: .86rem; color: var(--muted); }
.take { border-left: 3px solid var(--orange); padding: .2rem 0 .2rem 1rem; }
.take-label { font-family: var(--tech); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.take dl { margin: .4rem 0 0; display: grid; gap: .3rem; font-size: .9rem; }
.take dt { font-weight: 700; display: inline; }
.take dd { display: inline; margin: 0; color: var(--muted); }
.p-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: auto; padding-top: .3rem; }
.price { font-family: var(--tech); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.price small { font-size: .72rem; color: var(--muted); }
.add { padding: .6rem 1rem; font-size: .86rem; }
.disclaimer { font-size: .82rem; color: var(--muted); margin-top: 2.6rem; max-width: 54rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
@media (max-width: 920px) { .products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .products { grid-template-columns: 1fr; } }

/* Two worlds + seasons */
.worlds { background: var(--night); color: var(--night-fg); }
.worlds > .wrap { padding-block: 4.5rem; }
.worlds .eyebrow { color: var(--night-teal); }
.worlds-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; align-items: end; margin-bottom: 2.4rem; }
.worlds h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); margin-top: .6rem; }
.worlds-head p { color: var(--night-muted); max-width: 34rem; }
.worlds-head p strong { color: var(--night-fg); }
.seasons-scroll { overflow-x: auto; }
.seasons { width: 100%; min-width: 640px; height: auto; aspect-ratio: 1200 / 340; border-radius: 4px; }
.seasons-cap { font-family: var(--tech); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--night-muted); margin-top: .8rem; }
@media (max-width: 760px) { .worlds-head { grid-template-columns: 1fr; } }

/* BF's Take + Nic */
.about > .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.8rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sample-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sample h3 { font-size: 1.3rem; }
.sample .take dl { font-size: .95rem; gap: .5rem; }
.sample-note { font-size: .8rem; color: var(--muted); }
.about h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: .6rem 0 1.1rem; }
.about .copy { display: flex; flex-direction: column; gap: 1rem; color: var(--muted); max-width: 36rem; }
.about .copy strong { color: var(--ink); }
.creds { display: flex; flex-wrap: wrap; gap: .5rem; }
.creds span { font-family: var(--tech); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 3px; border: 1px solid var(--teal); color: var(--teal); }
@media (max-width: 880px) { .about > .wrap { grid-template-columns: 1fr; gap: 2.5rem; } }

/* The Village (Support Local) */
.village { background: var(--teal-tint); }
.makers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.maker { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.maker .hood { font-family: var(--tech); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.maker h3 { font-size: 1.3rem; }
.maker p { color: var(--muted); font-size: .92rem; }
.maker .made { font-size: .84rem; font-weight: 600; margin-top: auto; padding-top: .4rem; }
.maker.open { border: 1.5px dashed var(--orange); background: transparent; }
.maker.open .btn { align-self: flex-start; margin-top: auto; }
.directory { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; border-radius: 4px; background: var(--metal); color: var(--night-fg); }
.directory .text-link { color: var(--night-gold); }
.directory p { color: #D5E2E2; font-size: .94rem; max-width: 42rem; }
.directory strong { color: #FFFFFF; font-family: var(--display); font-weight: var(--dw); font-size: 1.2rem; display: block; margin-bottom: .25rem; }
.soon-tag { font-family: var(--tech); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .05rem .4rem; border: 1px solid var(--gold); color: var(--gold); border-radius: 3px; margin-left: .35rem; vertical-align: middle; }
@media (max-width: 880px) { .makers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .makers { grid-template-columns: 1fr; } }

/* Newsletter + footer */
.letter > .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding-block: 4rem; }
.letter h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.letter p { color: var(--muted); margin-top: .6rem; }
.signup { display: flex; gap: .6rem; flex-wrap: wrap; }
.signup label { flex-basis: 100%; }
.signup input { flex: 1 1 14rem; min-width: 0; padding: .8rem 1rem; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.signup .ok { flex-basis: 100%; font-size: .9rem; color: var(--teal); font-weight: 600; }
@media (max-width: 760px) { .letter > .wrap { grid-template-columns: 1fr; } }

footer { background: linear-gradient(180deg, var(--gunmetal), var(--night)); color: var(--night-muted); font-size: .9rem; }
footer .wrap { padding-block: 3rem 2rem; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
footer .brand-name { color: var(--night-fg); }
footer .brand-name small { color: var(--night-muted); }
footer h4 { font-family: var(--tech); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--night-fg); margin: 0 0 .8rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
footer a { text-decoration: none; } footer a:hover { color: var(--orange); }
footer .soon-tag { border-color: var(--night-gold); color: var(--night-gold); }
footer .legal { grid-column: 1 / -1; border-top: 1px solid #3a332b; padding-top: 1.3rem; font-size: .8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr 1fr; } footer .wrap > div:first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Season grounds: muted darks tinted with the hero palette. Each section starts and ends near the page's charcoal so the page flows. */
#library { background:
  radial-gradient(ellipse 70% 55% at 85% 100%, rgba(62,154,160,.10), transparent 70%),
  linear-gradient(180deg, #121110 0%, #121312 55%, #0f1a1b 100%); }
.chapter { border-block: 0; }
#ch-spring { background:
  radial-gradient(ellipse 55% 60% at 12% 35%, rgba(62,154,160,.13), transparent 70%),
  radial-gradient(ellipse 50% 55% at 88% 70%, rgba(224,169,59,.09), transparent 70%),
  linear-gradient(180deg, #0f1a1b 0%, #11161a 45%, #14120e 100%); }
#ch-summer { background:
  radial-gradient(ellipse 60% 60% at 80% 30%, rgba(242,150,50,.12), transparent 70%),
  radial-gradient(ellipse 45% 50% at 15% 80%, rgba(224,169,59,.07), transparent 70%),
  linear-gradient(180deg, #14120e 0%, #19120b 50%, #170f0b 100%); }
#ch-autumn { background:
  radial-gradient(ellipse 60% 60% at 82% 35%, rgba(222,92,32,.13), transparent 70%),
  radial-gradient(ellipse 50% 55% at 15% 75%, rgba(194,54,42,.11), transparent 70%),
  linear-gradient(180deg, #170f0b 0%, #1a0e0b 50%, #120f13 100%); }
#ch-winter { background:
  radial-gradient(ellipse 60% 60% at 82% 30%, rgba(29,94,140,.14), transparent 70%),
  radial-gradient(ellipse 50% 55% at 15% 75%, rgba(30,95,102,.13), transparent 70%),
  linear-gradient(180deg, #120f13 0%, #0b1418 50%, #0d1417 100%); }
#sports { background: linear-gradient(180deg, #0d1417 0%, #121312 35%, #131210 70%, #1b2225 100%); }
#bfs-take { background:
  radial-gradient(ellipse 60% 70% at 20% 40%, rgba(62,140,146,.06), transparent 70%),
  linear-gradient(180deg, #1b2225 0%, #222B2F 50%, #1b2427 100%); }
.village { background:
  radial-gradient(ellipse 60% 60% at 85% 20%, rgba(62,154,160,.10), transparent 70%),
  linear-gradient(180deg, #1b2427 0%, #182628 45%, #12191b 100%); }
.letter { background: linear-gradient(180deg, #12191b 0%, #131210 100%); }

/* Tiles and cards sit as translucent panels so the tint glows around them */
.cats, .stages { background: rgba(243,234,214,.07); border-color: rgba(243,234,214,.07); }
.cat, .stage { background: var(--tile); }
.cat:hover, .stage:hover, .cat-all { background: rgba(28,26,23,.8); }
.shop-tabs { background: var(--tile); }
.p-img, .sample { background: rgba(28,26,23,.72); }
.maker { background: rgba(14,20,21,.65); }
.maker.open { background: transparent; }
.mini { background: rgba(23,21,18,.72); }
.tier { background: rgba(19,18,16,.85); }
.signup input { background: rgba(28,26,23,.8); }