/* EarthCo Products — site styles
   Locked EarthCo brand system (mark locked 2026-07-21, R2 Concept 3).
   Flow direction adopted 2026-08-29: large light type, drifting gradient field,
   monospace micro-labels, staggered lines, chapter navigation.
   PROPOSED KIT AMENDMENT: Space Mono, micro-labels only. Manrope + Source Serif 4 unchanged. */
:root{
  --charcoal:#1A1A1A; --cream:#FAF7F0; --cream-deep:#F0EDE2;
  --forest:#2E4A30; --forest-deep:#1F3320;
  --sage:#8FA17F; --sage-soft:#E5EBE0; --gold:#C99355;
  --muted:#5A5A56;
  --rule:rgba(26,26,26,.10);
  --max:1240px;
  --pad:clamp(22px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--cream)}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:transparent; color:var(--charcoal);
  -webkit-font-smoothing:antialiased; line-height:1.65;
  text-wrap:pretty; overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- the drifting field ---------- */
.field{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--cream);pointer-events:none}
.field i{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.field i:nth-child(1){width:78vw;height:78vw;left:-14vw;top:-22vw;background:rgba(143,161,127,.60);animation:d1 34s ease-in-out infinite alternate}
.field i:nth-child(2){width:62vw;height:62vw;right:-16vw;top:8vh;background:rgba(201,147,85,.30);animation:d2 44s ease-in-out infinite alternate}
.field i:nth-child(3){width:70vw;height:70vw;left:12vw;bottom:-28vw;background:rgba(240,237,226,.85);animation:d3 38s ease-in-out infinite alternate}
.field i:nth-child(4){width:46vw;height:46vw;right:6vw;bottom:2vh;background:rgba(46,74,48,.22);animation:d4 52s ease-in-out infinite alternate}
@keyframes d1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(10vw,8vh,0) scale(1.18)}}
@keyframes d2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-12vw,14vh,0) scale(.92)}}
@keyframes d3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,-10vh,0) scale(1.22)}}
@keyframes d4{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-9vw,-9vh,0) scale(1.2)}}

/* ---------- type ---------- */
h1,h2,h3,.dsp{font-family:'Manrope',system-ui,sans-serif;font-weight:300;letter-spacing:-.035em;line-height:1.0;text-wrap:balance}
em.s{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.015em}
.mono{font-family:'Space Mono','SFMono-Regular',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.eyebrow{font-family:'Space Mono','SFMono-Regular',ui-monospace,monospace;font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);display:block;max-width:100%}
.eyebrow .n{color:var(--sage)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s}
header.stuck{background:rgba(250,247,240,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:20px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.mark{width:118px;flex:none}
nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
nav a{font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);position:relative;padding:5px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--forest);transition:width .4s cubic-bezier(.2,.7,.3,1)}
nav a:hover{color:var(--charcoal)}
nav a:hover::after,nav a.on::after{width:100%}
nav a.on{color:var(--charcoal)}
#hcta{margin-left:auto}
@media(max-width:1040px){
  .bar{gap:10px 18px;padding-bottom:16px}
  #hcta{display:none}
  nav{order:3;width:100%;gap:8px 18px}
}
nav a{white-space:nowrap}
/* At phone widths the five items must wrap, never run off the edge. */
@media(max-width:640px){
  nav{gap:8px 14px}
  nav a{font-size:.72rem;letter-spacing:.1em}
  .mark{width:104px}
}
@media(max-width:380px){ nav a{font-size:.68rem;letter-spacing:.08em} }
body{padding-top:0}

/* ---------- link-style CTA (mono, arrow) ---------- */
.lnk{display:inline-flex;align-items:center;gap:12px;font-family:'Space Mono',ui-monospace,monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);padding:6px 0;position:relative}
.lnk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;opacity:.28;transition:opacity .35s}
.lnk .arw{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.lnk:hover::after{opacity:1}
.lnk:hover .arw{transform:translateX(7px)}
.lnk.rev{color:var(--sage-soft)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;padding:13px 26px;border-radius:999px;border:1px solid rgba(46,74,48,.45);color:var(--forest);background:transparent;transition:background .4s,color .4s,transform .4s,box-shadow .4s}
.btn:hover{background:var(--forest);color:var(--cream);transform:translateY(-2px);box-shadow:0 14px 34px rgba(46,74,48,.20)}
.btn .arw{transition:transform .4s}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(120px,16vh,190px) 0 clamp(70px,10vh,120px)}
.hero.sm{min-height:76svh}
.hero h1{font-size:clamp(1.95rem,8.4vw,6.4rem);margin:26px 0 0}
.hero h1 .ln{display:block}
.hero h1 .ln.i1{margin-left:0}
.hero h1 .ln.i2{margin-left:clamp(18px,7vw,140px)}
.hero h1 .ln.i3{margin-left:clamp(8px,3vw,58px)}
.hero h1 em.s{color:var(--forest)}
.lede{font-size:clamp(1rem,1.55vw,1.16rem);color:var(--muted);max-width:52ch;margin:clamp(34px,5vh,54px) 0 0;line-height:1.7}
.cta{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);align-items:center;margin-top:clamp(30px,4.5vh,46px)}
.place{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:clamp(40px,7vh,72px);color:var(--muted)}
.place .dot{width:5px;height:5px;border-radius:50%;background:var(--forest);flex:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(84px,13vh,160px) 0}
.head{margin-bottom:clamp(44px,7vh,86px)}
.head h2{font-size:clamp(1.65rem,5.4vw,3.9rem);max-width:17ch}
.head h2 em.s{color:var(--forest)}
.head .eyebrow{display:block;margin-bottom:22px}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.count{color:var(--muted);padding-bottom:10px}

/* ---------- dark chapter ---------- */
.dark{position:relative;color:var(--cream);overflow:hidden;background:var(--forest-deep)}
.dark::before{content:"";position:absolute;inset:-30%;background:
  radial-gradient(38% 44% at 74% 12%,rgba(143,161,127,.42),transparent 66%),
  radial-gradient(34% 40% at 10% 88%,rgba(201,147,85,.20),transparent 68%),
  radial-gradient(30% 36% at 46% 50%,rgba(143,161,127,.16),transparent 70%);
  animation:d2 46s ease-in-out infinite alternate}
.dark .wrap{position:relative}
.dark .eyebrow{color:var(--sage)}
.dark .eyebrow .n{color:rgba(229,235,224,.5)}
.dark h2{color:var(--cream)}
.dark h2 em.s{color:var(--sage)}
.dark p{color:rgba(250,247,240,.74)}
.big{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(1.5rem,4.8vw,3.3rem);line-height:1.1;letter-spacing:-.032em;max-width:20ch;text-wrap:balance}
.sub{font-size:clamp(.98rem,1.5vw,1.12rem);max-width:54ch;margin-top:30px;line-height:1.72;color:var(--muted)}
.block-deep .big{color:var(--cream)}
.block-deep .big em.s{color:var(--sage)}
.block-deep .sub{color:rgba(250,247,240,.74)}
.block-sage .big{color:var(--forest-deep)}
.block-sage .sub{color:rgba(31,51,32,.78)}

/* ---------- scattered cards ---------- */
.scatter{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.scatter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.scatter{grid-template-columns:1fr}}
.scatter > *:nth-child(3n+2){transform:translateY(clamp(22px,4vw,64px))}
.scatter > *:nth-child(3n+3){transform:translateY(clamp(-14px,-2vw,-4px))}
@media(max-width:620px){.scatter > *{transform:none !important}}
.card{position:relative;padding:clamp(26px,3vw,38px);border:1px solid var(--rule);border-radius:2px;
  background:rgba(250,247,240,.52);backdrop-filter:blur(7px);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .5s,background .5s;
  display:flex;flex-direction:column;min-height:270px}
.card:hover{box-shadow:0 26px 56px rgba(26,26,26,.10);border-color:rgba(46,74,48,.3);background:rgba(250,247,240,.78)}
a.card:hover{transform:translateY(-7px)}
.scatter > a.card:nth-child(3n+2):hover{transform:translateY(calc(clamp(22px,4vw,64px) - 7px))}
.scatter > a.card:nth-child(3n+3):hover{transform:translateY(calc(clamp(-14px,-2vw,-4px) - 7px))}
.card .n{color:var(--sage);margin-bottom:20px;font-family:'Space Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em}
.card .role{color:var(--forest);margin-bottom:12px;font-family:'Space Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.card h3{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:14px}
.card p{font-size:.95rem;color:var(--muted);line-height:1.68}
.card .go{margin-top:auto;padding-top:24px}
.card.quiet{background:rgba(229,235,224,.44);border-color:rgba(46,74,48,.14);min-height:auto}
.card.quiet h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}

/* ---------- spec list ---------- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px)}
@media(max-width:760px){.specs{grid-template-columns:1fr}}
.spec{display:flex;justify-content:space-between;gap:22px;padding:20px 0;border-bottom:1px solid var(--rule)}
.spec dt{font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--forest);padding-top:3px}
.spec dd{color:var(--charcoal);font-size:.98rem;text-align:right;font-weight:400}

/* ---------- values ---------- */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
@media(max-width:900px){.vals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vals{grid-template-columns:1fr}}
.val{padding-top:26px;border-top:1px solid rgba(46,74,48,.5)}
.val h4{font-family:'Manrope',sans-serif;font-size:1.12rem;font-weight:400;letter-spacing:-.02em;margin-bottom:11px}
.val p{font-size:.92rem;color:var(--muted);line-height:1.66}

/* ---------- editorial ---------- */
.ed .quote{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.24;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.ed .body{max-width:50ch;margin-top:28px;color:var(--muted);font-size:1.01rem;line-height:1.72}
.ed .body + .body{margin-top:20px}
.ed .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,86px);align-items:start}
@media(max-width:880px){.ed .split{grid-template-columns:1fr}}

/* ---------- note ---------- */
.note{border-top:1px solid rgba(46,74,48,.32);padding-top:26px;max-width:70ch}
.note h4{font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-bottom:14px}
.note p{color:var(--muted);font-size:.95rem;line-height:1.7}

/* ---------- chapter foot nav ---------- */
.chapnav{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:32px;margin-top:clamp(60px,9vh,110px)}
.chapnav a{display:block;font-family:'Space Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .35s}
.chapnav a:hover{color:var(--forest)}
.chapnav .glyph{display:block;color:var(--sage);margin-bottom:10px}
.chapnav .t{display:block;color:var(--charcoal);font-size:.78rem;line-height:1.5}
.chapnav .nx{text-align:right}

/* ---------- footer ---------- */
footer{position:relative;background:var(--forest-deep);color:rgba(250,247,240,.66);padding:clamp(70px,10vh,110px) 0 44px;overflow:hidden}
footer::before{content:"";position:absolute;inset:-30%;background:
  radial-gradient(36% 42% at 78% 8%,rgba(143,161,127,.34),transparent 66%),
  radial-gradient(30% 38% at 8% 92%,rgba(201,147,85,.16),transparent 68%);
  animation:d3 50s ease-in-out infinite alternate}
footer .wrap{position:relative}
footer .mark{width:142px;margin-bottom:28px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
footer h5{font-family:'Space Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sage);margin-bottom:20px}
footer li{list-style:none;margin-bottom:12px;font-size:.92rem}
footer a:hover{color:var(--cream)}
footer .fine{margin-top:56px;padding-top:26px;border-top:1px solid rgba(250,247,240,.14);font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,247,240,.44);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- accessibility ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--forest);outline-offset:4px;border-radius:2px}
.dark a:focus-visible,footer a:focus-visible{outline-color:var(--sage)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--forest);color:var(--cream);
  font-family:'Space Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;padding:15px 24px}
.skip:focus{left:0}

/* ---------- motion ---------- */
.rv{opacity:1;transform:none}
.js .rv:not(.in){opacity:0;transform:translateY(34px)}
.js .rv{transition:opacity 1.05s cubic-bezier(.16,.7,.24,1),transform 1.05s cubic-bezier(.16,.7,.24,1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.js .rv:not(.in){opacity:1;transform:none;transition:none}
  .field i,.dark::before,footer::before{animation:none !important}
  .btn,.card,.lnk .arw,a.card:hover{transition:none}
}

/* ================= COLOR-BLOCK RHYTHM ================= */
/* Sections alternate ground rather than floating on one wash. */
.block{position:relative;overflow:hidden}
.block-cream{background:var(--cream)}
.block-deepcream{background:var(--cream-deep)}
.block-sage{background:var(--sage);color:var(--forest-deep)}
.block-sage .eyebrow{color:var(--forest-deep)}
.block-sage .eyebrow .n{color:rgba(31,51,32,.55)}
.block-sage h2,.block-sage h3,.block-sage .big{color:var(--forest-deep)}
.block-sage p{color:rgba(31,51,32,.78)}
.block-sage .val{border-top-color:rgba(31,51,32,.4)}
.block-sage .lnk{color:var(--forest-deep)}
.block-deep{background:var(--forest-deep);color:var(--cream)}
.block-deep .eyebrow{color:var(--sage)}
.block-deep h2,.block-deep .big{color:var(--cream)}
.block-deep h2 em.s,.block-deep .big em.s{color:var(--sage)}
.block-deep p{color:rgba(250,247,240,.74)}
.block-deep .spec{border-bottom-color:rgba(250,247,240,.16)}
.block-deep .spec dt{color:var(--sage)}
.block-deep .spec dd{color:var(--cream)}
.block-deep .note{border-top-color:rgba(143,161,127,.5)}
.block-deep .note h4{color:var(--sage)}
.block-deep .note p{color:rgba(250,247,240,.7)}

/* ================= OVERSIZED GHOST TYPE ================= */
.bgtype{position:absolute;left:0;right:0;top:clamp(24px,5vh,70px);z-index:0;pointer-events:none;
  font-family:'Manrope',sans-serif;font-weight:200;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(4rem,15vw,13rem);white-space:nowrap;text-align:center}
.block-deep .bgtype{color:rgba(250,247,240,.075)}
.block-sage .bgtype{color:rgba(31,51,32,.10)}
.block-cream .bgtype,.block-deepcream .bgtype{color:rgba(46,74,48,.07)}
.hasghost{padding-top:clamp(120px,20vh,240px)}
.hasghost .wrap{position:relative;z-index:1}

/* ================= FROSTED CARDS OVER A FIELD ================= */
.glasswrap{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,44px)}
@media(max-width:780px){.glasswrap{grid-template-columns:1fr}}
.glasswrap > *:nth-child(even){transform:translateY(clamp(30px,6vw,90px))}
@media(max-width:780px){.glasswrap > *{transform:none !important}}
.glass{padding:clamp(26px,3.2vw,40px);border-radius:3px;
  background:rgba(250,247,240,.10);border:1px solid rgba(250,247,240,.20);
  backdrop-filter:blur(14px);transition:background .5s,border-color .5s}
.glass:hover{background:rgba(250,247,240,.16);border-color:rgba(250,247,240,.34)}
.glass h3{font-size:clamp(1.35rem,2.3vw,1.8rem);color:var(--cream);margin-bottom:16px;font-weight:300}
.glass p{font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.85;color:rgba(250,247,240,.72)}

/* ================= STATISTIC STATEMENT ================= */
.stat{max-width:22ch}
.stat .fig{font-family:'Manrope',sans-serif;font-weight:300;letter-spacing:-.04em;line-height:1.0;
  font-size:clamp(2.2rem,6vw,4.4rem);text-wrap:balance}
.stat .src{display:block;margin-top:20px;font-family:'Space Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.block-deep .stat .src{color:rgba(250,247,240,.5)}
.block-sage .stat .src{color:rgba(31,51,32,.6)}

/* ================= PILL CTA ================= */
.pill{display:inline-flex;align-items:center;gap:14px;padding:16px 30px;border-radius:999px;
  border:1px solid rgba(46,74,48,.42);color:var(--forest);
  font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  transition:background .45s,color .45s,border-color .45s,transform .45s}
.pill .d{opacity:.5;transition:opacity .45s}
.pill:hover{background:var(--forest);border-color:var(--forest);color:var(--cream);transform:translateY(-2px)}
.pill:hover .d{opacity:1}
.pill.rev{border-color:rgba(250,247,240,.42);color:var(--cream)}
.pill.rev:hover{background:var(--cream);border-color:var(--cream);color:var(--forest-deep)}

/* ================= LINE ART ================= */
/* Drawn illustration stands in for photography. The printed labels still carry
   claims this site does not make, so product photos stay out until the rewrite. */
.art{display:block;width:100%;height:auto}
.art path,.art line,.art circle,.art rect,.art ellipse,.art polyline{
  fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.artrow{--artmax:clamp(104px,13.2vw,190px);display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:clamp(12px,2vw,30px);align-items:end;
  color:rgba(46,74,48,.55)}
@media(max-width:760px){.artrow{grid-template-columns:repeat(3,1fr);row-gap:34px}}
@media(max-width:420px){.artrow{grid-template-columns:repeat(2,1fr)}}
.artcell{text-align:center}
.artcell .art{margin:0 auto;width:auto;max-width:100%;
  height:calc(var(--s,1) * var(--artmax))}
.artcell .cap{display:block;margin-top:18px;font-family:'Space Mono',ui-monospace,monospace;
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.block-deep .artrow{color:rgba(229,235,224,.6)}
.block-deep .artcell .cap{color:rgba(250,247,240,.6)}
.artbig{color:rgba(46,74,48,.42);max-width:460px;width:100%}
.block-deep .artbig{color:rgba(229,235,224,.5)}
.splitart{display:grid;grid-template-columns:1fr .8fr;gap:clamp(34px,6vw,90px);align-items:center}
@media(max-width:880px){.splitart{grid-template-columns:1fr}.splitart .artbig{max-width:260px}}

@media(prefers-reduced-motion:reduce){.pill,.glass{transition:none}}

/* Nothing may exceed the viewport at phone widths. */
@media(max-width:640px){
  .eyebrow,.place,.mono{font-size:.66rem;letter-spacing:.1em}
  .hero h1,.head h2,.big,.card h3{overflow-wrap:break-word}
}

/* A scatter grid nested inside a split column has no room for three tracks. */
.splitart .scatter{grid-template-columns:repeat(2,1fr)}
.splitart .scatter > *{transform:none !important}
@media(max-width:900px){.splitart .scatter{grid-template-columns:1fr}}
.splitart{align-items:center}

/* Four cards balance as a 2x2; three tracks strand the last one. */
.scatter.two{grid-template-columns:repeat(2,1fr)}
.scatter.two > *:nth-child(3n+2),.scatter.two > *:nth-child(3n+3){transform:none}
.scatter.two > *:nth-child(even){transform:translateY(clamp(20px,3.5vw,54px))}
@media(max-width:620px){.scatter.two{grid-template-columns:1fr}.scatter.two > *{transform:none !important}}

/* ================= WHERE TO BUY (2026-11-09) ================= */
/* Until the Shopify stores open, every product carries its own buy button: Amazon when it
   is listed there, an order request when it is not. Bottle pictures are the KICK
   storefront's claim-compliant renders, drawn by render_bottles.py. */
[hidden]{display:none !important}
.pill{white-space:nowrap}
.pill.sm{padding:13px 22px;gap:11px;font-size:.64rem}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);align-items:start}
.shelf > .item:nth-child(even){margin-top:clamp(0px,4vw,56px)}
@media(max-width:1040px){.shelf{grid-template-columns:repeat(2,1fr)}.shelf > .item:nth-child(even){margin-top:clamp(0px,5vw,48px)}}
@media(max-width:560px){.shelf{grid-template-columns:1fr;gap:54px}.shelf > .item:nth-child(even){margin-top:0}}
.item{display:flex;flex-direction:column}
.item .ph{position:relative;aspect-ratio:4/5;display:grid;place-items:end center;margin-bottom:26px;
  background:radial-gradient(60% 34% at 50% 86%,rgba(250,247,240,.95),rgba(250,247,240,0) 72%),
             radial-gradient(70% 60% at 50% 46%,rgba(229,235,224,.75),rgba(229,235,224,0) 70%)}
.item .ph img{display:block;width:100%;height:auto;max-width:300px;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);filter:drop-shadow(0 18px 26px rgba(26,26,26,.07))}
.item:hover .ph img{transform:translateY(-8px)}
@media(max-width:560px){.item .ph{aspect-ratio:auto}.item .ph img{max-width:240px}}
.item .role,.size .role{color:var(--forest);margin-bottom:10px;font-family:'Space Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.item h3,.size h3{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-bottom:12px}
.item p,.size p{font-size:.95rem;color:var(--muted);line-height:1.68}
.item .buy,.size .buy{margin-top:24px}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}
@media(max-width:620px){.sizes{grid-template-columns:1fr}}
.size{padding:clamp(26px,3vw,38px);border:1px solid var(--rule);border-radius:2px;background:rgba(250,247,240,.52);
  display:flex;flex-direction:column}
.size .buy{margin-top:auto;padding-top:24px}
a.inl{color:var(--forest);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.inl:hover{text-decoration-thickness:2px}
.ordfor{margin-top:26px;font-size:1.05rem;color:var(--forest-deep)}
.block-sage .pill{border-color:rgba(31,51,32,.5);color:var(--forest-deep)}
.block-sage .pill:hover{background:var(--forest-deep);border-color:var(--forest-deep);color:var(--cream)}
@media(prefers-reduced-motion:reduce){.item .ph img{transition:none}.item:hover .ph img{transform:none}}
/* The ghost word is decorative, but at phone widths a long one ran past the screen edge.
   Let it wrap and scale with the viewport instead. */
@media(max-width:600px){.bgtype{white-space:normal;text-wrap:balance;font-size:15vw;padding:0 8px}}
section[id]{scroll-margin-top:72px}