/* ═══════════════════════════════════════════════════════════
   LIFETIME Store — Drop 01
   Greenish-white paper · pine · washed green-black
   Single accent sampled from the logo gradient:
     emerald #1C9B49 → mid #74B043 → lime #B1CB35
   ═══════════════════════════════════════════════════════════ */

:root,
[data-theme="light"]{
  /* — surfaces — */
  --bg:      #F1F4EC;
  --bg-lift: #F8FAF4;
  --bg-sunk: #E6EBDF;

  /* — text on page — */
  --t1: #111710;
  --t2: rgba(17,23,16,.66);
  --t3: rgba(17,23,16,.42);
  --hair:      rgba(17,23,16,.15);
  --hair-soft: rgba(17,23,16,.075);

  /* — inverted block fills (buttons, chips) — */
  --fill:     #111710;
  --on-fill:  #F1F4EC;
  --btn-wipe: #177F3B;

  /* — panel: footer, cart — */
  --panel:      #0F1411;
  --on-panel:   #EDF2E6;
  --on-panel-2: rgba(237,242,230,.62);
  --on-panel-3: rgba(237,242,230,.34);
  --panel-hair: rgba(237,242,230,.18);

  /* — brand accent — */
  --brand:       #1C9B49;  /* vivid: marks, dots, rules            */
  --brand-ink:   #157A3A;  /* AA-safe accent text on --bg          */
  --brand-solid: #17773A;  /* filled, always paired with white     */
  --lime:        #B1CB35;  /* accent on deep/panel surfaces        */
  --mid:         #74B043;

  --dot:     rgba(17,23,16,.085);
  --colline: rgba(17,23,16,.028);
  --shadow:  rgba(12,40,24,.20);
  --scrim:   rgba(11,18,13,.45);

  color-scheme: light;
}

[data-theme="dark"]{
  --bg:      #0B0F0C;
  --bg-lift: #141A14;
  --bg-sunk: #080B08;

  --t1: #E9EEE3;
  --t2: rgba(233,238,227,.62);
  --t3: rgba(233,238,227,.38);
  --hair:      rgba(233,238,227,.16);
  --hair-soft: rgba(233,238,227,.075);

  --fill:     #E9EEE3;
  --on-fill:  #0B0F0C;
  --btn-wipe: #7FD196;

  --panel:      #111711;
  --on-panel:   #E9EEE3;
  --on-panel-2: rgba(233,238,227,.60);
  --on-panel-3: rgba(233,238,227,.34);
  --panel-hair: rgba(233,238,227,.16);

  --brand:       #3DBE63;
  --brand-ink:   #62D083;
  --brand-solid: #17773A;
  --lime:        #C2DA4A;
  --mid:         #8CC24F;

  --dot:     rgba(233,238,227,.07);
  --colline: rgba(233,238,227,.022);
  --shadow:  rgba(0,0,0,.55);
  --scrim:   rgba(0,0,0,.62);

  color-scheme: dark;
}

:root{
  /* — deep pine band: identical in both themes, always dark — */
  --deep:      #0C4230;
  --on-deep:   #EDF2E6;
  --on-deep-2: rgba(237,242,230,.66);
  --on-deep-3: rgba(237,242,230,.36);
  --deep-hair: rgba(237,242,230,.20);

  /* the logo gradient itself */
  --grad: linear-gradient(100deg, #1C9B49 0%, #74B043 55%, #B1CB35 100%);

  /* — type — */
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --body:    "Karla", "Helvetica Neue", sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", monospace;

  /* — motion — */
  --ease: cubic-bezier(.16,1,.3,1);
  --snap: cubic-bezier(.32,.72,0,1);

  --pad: clamp(1.15rem, 4.4vw, 4.5rem);
  --maxw: 1520px;
}

[data-theme="dark"]{ --deep:#0D3527; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:var(--body);
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;

  /* faint dot-grid + hairline columns, no gradients */
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0),
    repeating-linear-gradient(90deg, var(--colline) 0 1px, transparent 1px 25%);
  background-size: 26px 26px, 100% 100%;
  background-attachment: fixed, scroll;
  /* kept short — a slower cross-fade passes through a muddy,
     low-contrast midpoint where text and background meet */
  transition:background-color .18s linear, color .18s linear;
}

img,svg{ display:block; max-width:100%; }
.defs{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--brand-solid); color:#fff; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:2px;
}

/* ── shared bits ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t2); margin:0 0 1.6rem;
  display:flex; align-items:center; gap:.6rem;
}
.dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--brand); flex:none;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(28,155,73,.45); }
  70%,100%{ box-shadow:0 0 0 9px rgba(28,155,73,0); }
}

.btn{
  display:inline-block; text-align:center;
  background:var(--fill); color:var(--on-fill);
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1.05rem 1.9rem;
  border-radius:2px;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), color .3s var(--ease);
}
/* z-index:-1 keeps the wipe above the button's own background
   but behind its label — isolation traps it inside the button */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--btn-wipe);
  transform:translateY(101%);
  transition:transform .34s var(--ease);
}
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }

.btn--brand{ background:var(--brand-solid); color:#fff; width:100%; }
.btn--brand::after{ background:var(--on-panel); }
.btn--brand:hover{ color:var(--panel); }

.link-slide{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.13em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.55rem;
  padding-bottom:.35rem;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0% 1px; background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .38s var(--ease), color .25s;
}
.link-slide:hover{ background-size:100% 1px; color:var(--brand-ink); }
.link-slide span{ transition:transform .32s var(--ease); }
.link-slide:hover span{ transform:translateX(4px); }

/* ── scroll rail (uses the logo gradient) ────────────────── */
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:120; pointer-events:none;
}
.scroll-rail span{ display:block; height:100%; width:0%; background:var(--grad); }

/* ── announcement (pine band) ────────────────────────────── */
.announce{
  background:var(--deep); color:var(--on-deep-2);
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.62rem var(--pad);
  overflow:hidden;
}
.announce__track{
  display:flex; align-items:center; justify-content:center;
  gap:1.2rem; flex-wrap:wrap;
}
.announce b{ color:var(--lime); font-weight:400; }
.announce em{ font-style:normal; }
.announce i{ width:3px; height:3px; border-radius:50%; background:var(--on-deep-3); flex:none; }

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem var(--pad);
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background .4s var(--ease),
             border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.is-stuck{
  padding:.85rem var(--pad);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--hair);
}
.nav__mark{ display:flex; align-items:center; gap:.7rem; }
.nav__logo{ width:auto; height:30px; transition:height .4s var(--ease), transform .5s var(--ease); }
.nav.is-stuck .nav__logo{ height:25px; }
.nav__mark:hover .nav__logo{ transform:rotate(-7deg); }
.nav__word{
  font-family:var(--display); font-weight:800;
  font-stretch:78%; font-size:1.22rem;
  letter-spacing:.02em; line-height:1;
}
.nav__sub{
  font-family:var(--serif); font-style:italic;
  font-size:1.05rem; color:var(--brand-ink); line-height:1;
  margin-left:-.28rem;
}
.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--t2);
  position:relative; padding-bottom:.2rem;
  transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .36s var(--ease);
}
.nav__links a:hover{ color:var(--t1); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__right{ display:flex; align-items:center; gap:.6rem; }

.nav__cart{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--hair);
  padding:.55rem .9rem; border-radius:2px;
  transition:border-color .3s, background .3s;
}
.nav__cart:hover{ border-color:var(--t1); background:var(--bg-lift); }
.nav__count{
  min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:20px; background:var(--t3); color:var(--bg);
  font-size:.62rem; letter-spacing:0;
  transition:background .3s var(--ease), transform .3s var(--snap);
}
.nav__count.has{ background:var(--brand-solid); color:#fff; }
.nav__count.bump{ transform:scale(1.35); }

/* theme toggle */
.nav__theme{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--hair); border-radius:50%;
  position:relative; overflow:hidden;
  transition:border-color .3s, background .3s;
}
.nav__theme:hover{ border-color:var(--t1); background:var(--bg-lift); }
.nav__theme svg{
  grid-area:1/1; width:16px; height:16px;
  stroke:currentColor; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .3s var(--ease), transform .45s var(--ease);
}
.nav__theme .ico-moon{ opacity:0; transform:rotate(-70deg) scale(.6); }
.nav__theme .ico-sun { opacity:1; transform:none; }
[data-theme="dark"] .nav__theme .ico-moon{ opacity:1; transform:none; }
[data-theme="dark"] .nav__theme .ico-sun { opacity:0; transform:rotate(70deg) scale(.6); }

/* ── side rail ───────────────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--pad);
  z-index:60; pointer-events:none;
  display:grid; place-items:center;
}
.rail__txt{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--t3); white-space:nowrap;
}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.5rem,6vw,5.5rem) var(--pad) clamp(3rem,7vw,6rem);
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1.02fr .98fr;
  align-items:center;
}
.hero__h1{
  font-family:var(--display);
  font-weight:800; font-stretch:80%;
  font-size:clamp(3.1rem,10.2vw,8.6rem);
  line-height:.87; letter-spacing:-.035em;
  margin:0 0 1.9rem;
  text-wrap:balance;
}
.hero__h1 .line{ display:block; overflow:hidden; }
.hero__h1 .line > span{ display:block; }
.hero__h1 em{
  font-family:var(--serif); font-style:italic;
  font-weight:400; font-stretch:100%;
  color:var(--brand);
  letter-spacing:-.01em;
  padding-right:.04em;
}
.hero__lede{
  max-width:44ch; color:var(--t2);
  font-size:clamp(1rem,.95rem + .3vw,1.16rem);
  line-height:1.6; margin:0 0 2.4rem;
}
.hero__cta{ display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem); flex-wrap:wrap; }
.hero__spec{
  display:flex; flex-wrap:wrap; gap:0;
  margin:3.2rem 0 0; padding-top:1.3rem;
  border-top:1px solid var(--hair);
}
.hero__spec > div{ padding-right:2.6rem; margin-right:2.6rem; border-right:1px solid var(--hair-soft); }
.hero__spec > div:last-child{ border:0; margin:0; padding:0; }
.hero__spec dt{
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--t3); margin-bottom:.3rem;
}
.hero__spec dd{ margin:0; font-size:.9rem; font-weight:600; }

/* — hero plate — */
.hero__plate{ position:relative; display:grid; place-items:center; min-height:min(70vh,620px); }
.hero__ring{
  grid-area:1/1; z-index:0;
  width:min(92%,540px); height:auto; aspect-ratio:1;
  color:var(--mid); opacity:.45;
  animation:spin 110s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero__garment{
  grid-area:1/1; z-index:1;
  width:min(88%,520px);
  animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
.hero__tag{
  position:absolute; top:4%; right:0;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--t2);
  border:1px solid var(--hair); border-radius:2px;
  padding:.4rem .7rem; background:var(--bg-lift);
}
.hero__tag b{ font-weight:500; color:var(--t1); }

.breath{
  position:absolute; left:0; bottom:2%;
  display:flex; align-items:center; gap:.8rem;
}
.breath__ring{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--brand); position:relative; flex:none;
  animation:breathe 10s ease-in-out infinite;
}
.breath__ring::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:5px; height:5px; border-radius:50%; background:var(--brand);
}
@keyframes breathe{
  0%{ transform:scale(.72); } 40%{ transform:scale(1.28); }
  60%{ transform:scale(1.28); } 100%{ transform:scale(.72); }
}
.breath__labels{ position:relative; display:block; width:7.5rem; height:1rem; }
.breath__labels b{
  position:absolute; left:0; top:0; white-space:nowrap;
  font-family:var(--mono); font-size:.62rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--t3);
  opacity:0; animation-duration:10s; animation-timing-function:linear;
  animation-iteration-count:infinite;
}
/* windows are disjoint: in 0–4s, hold 4–6s, out 6–10s */
.breath__labels b:nth-child(1){ animation-name:cueA; }
.breath__labels b:nth-child(2){ animation-name:cueB; }
.breath__labels b:nth-child(3){ animation-name:cueC; }
@keyframes cueA{ 0%{opacity:0} 3%,34%{opacity:1} 39%,100%{opacity:0} }
@keyframes cueB{ 0%,40%{opacity:0} 43%,54%{opacity:1} 58%,100%{opacity:0} }
@keyframes cueC{ 0%,60%{opacity:0} 63%,94%{opacity:1} 98%,100%{opacity:0} }

/* ── marquee ─────────────────────────────────────────────── */
.marquee{
  background:var(--deep); color:var(--on-deep);
  border-top:1px solid var(--panel); border-bottom:1px solid var(--panel);
  padding:1.15rem 0; overflow:hidden;
  /* full-bleed dark bands sit above the fixed side rail, so the rail
     tucks behind them instead of showing as dark-on-dark */
  position:relative; z-index:70;
}
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{
  font-family:var(--display); font-weight:500; font-stretch:88%;
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  letter-spacing:-.02em; white-space:nowrap; padding-right:.4em;
}
.marquee i{ color:var(--lime); font-style:normal; padding:0 .28em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── ledger ──────────────────────────────────────────────── */
.ledger{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vw,8rem) var(--pad);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.ledger__intro h2{
  font-family:var(--display); font-weight:700; font-stretch:82%;
  font-size:clamp(2.1rem,5.2vw,4.1rem);
  line-height:.95; letter-spacing:-.03em; margin:0 0 1.4rem;
}
.ledger__intro p{ color:var(--t2); max-width:46ch; margin:0; }
.ledger__row{
  display:flex; align-items:baseline; gap:1.4rem;
  padding:1.5rem 0; border-top:1px solid var(--hair);
}
.ledger__rows > :last-child{ border-bottom:1px solid var(--hair); }
.ledger__row .num{
  font-family:var(--display); font-weight:700; font-stretch:78%;
  font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:.9;
  letter-spacing:-.03em; min-width:4.6ch;
}
.ledger__row .num i{ font-style:normal; color:var(--brand); }
.ledger__row .lbl{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--t2);
}

/* ── collection ──────────────────────────────────────────── */
.collection{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(4rem,8vw,7rem); }
.collection__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:1.6rem;
}
.collection__title{
  font-family:var(--display); font-weight:800; font-stretch:80%;
  font-size:clamp(2.4rem,6.4vw,5rem);
  line-height:.9; letter-spacing:-.035em; margin:0;
}
.collection__title em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-stretch:100%; color:var(--t3); letter-spacing:-.01em;
}
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.11em; text-transform:uppercase;
  padding:.55rem .95rem; border-radius:2px;
  border:1px solid var(--hair); color:var(--t2);
  transition:.28s var(--ease);
}
.chip sup{ font-size:.55em; opacity:.55; margin-left:.25em; }
.chip:hover{ border-color:var(--t1); color:var(--t1); }
.chip.is-on{ background:var(--fill); border-color:var(--fill); color:var(--on-fill); }

.specbar{
  display:flex; flex-wrap:wrap; gap:0 2.2rem;
  padding:.85rem 0; margin-bottom:2.4rem;
  border-top:1px solid var(--t1); border-bottom:1px solid var(--hair);
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--t2);
}
.specbar__live{ margin-left:auto; display:flex; align-items:center; gap:.5rem; color:var(--t1); }
.specbar__live i{
  width:5px; height:5px; border-radius:50%; background:var(--brand);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── grid + cards ────────────────────────────────────────── */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hair);
  border:1px solid var(--hair);
}
.card{
  background:var(--bg);
  padding:1.4rem 1.4rem 1.5rem;
  display:flex; flex-direction:column;
  position:relative;
  transition:background .4s var(--ease), opacity .3s, transform .3s;
}
.card:hover{ background:var(--bg-lift); }
.card.is-out{ display:none; }

.card--wide{ grid-column:span 2; flex-direction:row; gap:2rem; align-items:center; }
.card--wide .card__plate{ flex:1.05; margin:0; }
.card--wide .card__plate svg{ max-width:min(100%,420px); }
.card--wide .card__info{ flex:1; padding-right:1rem; }
.card--wide .card__blurb{ display:block; }

.card__meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--t3);
  padding-bottom:.9rem; border-bottom:1px solid var(--hair-soft);
}
.card--wide .card__meta{ position:absolute; top:1.4rem; left:1.4rem; right:1.4rem; }
.card__flag{ color:var(--brand-ink); opacity:0; transform:translateY(-3px); transition:.3s var(--ease); }
.card:hover .card__flag{ opacity:1; transform:none; }

.card__plate{
  position:relative;
  margin:1.6rem 0 1.2rem;
  display:grid; place-items:center;
  padding:.5rem;
}
.card__plate svg{ width:100%; transition:transform .5s var(--ease); }
.card:hover .card__plate svg{ transform:translateY(-8px) scale(1.015); }

.card__sizes{
  position:absolute; left:0; right:0; bottom:-.2rem;
  display:flex; justify-content:center; gap:.35rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .38s var(--ease);
}
.card:hover .card__sizes, .card:focus-within .card__sizes{ opacity:1; transform:none; }
/* touch devices never fire :hover — keep sizes reachable */
@media (hover:none){
  .card__sizes{ position:static; opacity:1; transform:none; margin-top:1rem; }
}
.card__sizes button{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.06em;
  width:30px; height:26px; border-radius:2px;
  border:1px solid var(--hair); background:var(--bg-lift);
  color:var(--t2); transition:.2s;
}
.card__sizes button:hover{ border-color:var(--t1); color:var(--t1); }
.card__sizes button.on{ background:var(--fill); border-color:var(--fill); color:var(--on-fill); }

.card__name{
  font-family:var(--display); font-weight:700; font-stretch:84%;
  font-size:clamp(1.25rem,1.6vw,1.75rem);
  letter-spacing:-.02em; line-height:1.02; margin:0 0 .3rem;
}
.card--wide .card__name{ font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:-.035em; }
.card__sub{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); margin:0 0 1rem;
}
.card__blurb{ display:none; color:var(--t2); max-width:38ch; margin:0 0 1.5rem; font-size:.95rem; }

.card__ways{ display:flex; gap:.4rem; margin-bottom:1.1rem; }
.card__ways button{
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--hair);
  box-shadow:inset 0 0 0 2px var(--bg);
  transition:.24s var(--ease);
}
.card__ways button:hover{ transform:scale(1.15); }
.card__ways button.on{ box-shadow:inset 0 0 0 2px var(--bg), 0 0 0 1px var(--t1); border-color:var(--t1); }

.card__buy{
  margin-top:auto; display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
  padding-top:.9rem; border-top:1px solid var(--hair-soft);
}
.card--wide .card__buy{ margin-top:0; }
.card__price{ font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.card__price s{ color:var(--t3); font-weight:400; font-size:.85em; margin-right:.45em; }
.card__add{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.25rem; position:relative;
}
.card__add::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brand); transform:scaleX(0); transform-origin:right;
  transition:transform .34s var(--ease);
}
.card__add:hover{ color:var(--brand-ink); }
.card__add:hover::after{ transform:scaleX(1); transform-origin:left; }

/* — manifesto tile — */
.tile{
  grid-column:span 2;
  background:var(--deep); color:var(--on-deep);
  padding:clamp(2rem,4vw,3.4rem);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:2rem;
  background-image:radial-gradient(circle at 1px 1px, rgba(237,242,230,.09) 1px, transparent 0);
  background-size:22px 22px;
}
.tile blockquote{
  font-family:var(--display); font-weight:500; font-stretch:88%;
  font-size:clamp(1.4rem,2.7vw,2.35rem);
  line-height:1.12; letter-spacing:-.025em;
  margin:0; max-width:26ch; text-wrap:balance;
}
.tile blockquote em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--lime); }
.tile__ft{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1.5rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-deep-3);
}
.tile__ft a{ color:var(--on-deep); border-bottom:1px solid var(--lime); padding-bottom:.2rem; }

/* ── footer ──────────────────────────────────────────────── */
.foot{
  background:var(--panel); color:var(--on-panel);
  border-top:1px solid var(--panel-hair);
  padding:clamp(3.5rem,7vw,6rem) var(--pad) 0;
  position:relative; overflow:hidden; z-index:70;
}
.foot__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(280px,340px) 1fr;
  gap:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}

/* care label */
.care{
  border:1px dashed var(--panel-hair);
  border-radius:3px; padding:1.4rem;
  background:rgba(237,242,230,.03);
  position:relative;
}
.care::before,.care::after{
  content:""; position:absolute; left:14%; right:14%; height:4px;
  background-image:repeating-linear-gradient(90deg, var(--panel-hair) 0 6px, transparent 6px 12px);
}
.care::before{ top:-2px; } .care::after{ bottom:-2px; }
.care__hd{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-panel-3); padding-bottom:1rem; margin-bottom:1rem;
  border-bottom:1px solid var(--panel-hair);
}
.care__list{ list-style:none; margin:0; padding:0; display:grid; gap:.95rem; }
.care__list li{ display:flex; align-items:center; gap:.85rem; }
.care__list svg{
  width:22px; height:22px; flex:none;
  color:var(--on-panel-2); transition:color .25s;
}
.care__list li:hover svg{ color:var(--lime); }
.care__list span{
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--on-panel-2);
}
.care__note{
  margin:1.3rem 0 0; padding-top:1rem;
  border-top:1px solid var(--panel-hair);
  font-family:var(--serif); font-style:italic;
  font-size:1.15rem; color:var(--on-panel);
}

.foot__cols{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.foot__col h3{
  font-family:var(--mono); font-size:.62rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-panel-3); margin:0 0 .5rem;
}
.foot__col a{
  font-size:.95rem; color:var(--on-panel-2);
  transition:color .22s, transform .3s var(--ease);
}
.foot__col a:hover{ color:var(--on-panel); transform:translateX(3px); }
.foot__col--news p{ color:var(--on-panel-3); font-size:.9rem; margin:0 0 .3rem; max-width:26ch; }

.news{ display:flex; width:100%; max-width:300px; border-bottom:1px solid var(--panel-hair); transition:border-color .3s; }
.news:focus-within{ border-color:var(--lime); }
.news input{
  flex:1; background:none; border:0; color:var(--on-panel);
  font-family:var(--mono); font-size:.75rem; padding:.65rem 0;
}
.news input::placeholder{ color:var(--on-panel-3); }
.news input:focus{ outline:none; }
.news button{ padding:0 .3rem 0 .8rem; color:var(--on-panel-2); transition:color .25s, transform .3s var(--ease); }
.news button:hover{ color:var(--lime); transform:translateX(3px); }
.news__msg{
  display:block; margin-top:.6rem; min-height:1rem;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
  opacity:0; transition:opacity .3s;
}
.news__msg.on{ opacity:1; }

/* footer brand block */
.foot__brand{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:1.2rem;
  padding:0 0 1.6rem;
}
.foot__brand img{ height:58px; width:auto; flex:none; }
.foot__reach{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.1;
  color:var(--on-panel); margin:0;
}
.foot__reach b{ color:var(--lime); font-weight:400; }

.foot__bottom{
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:1.2rem 0 2rem; border-top:1px solid var(--panel-hair);
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-panel-3);
}
.foot__slogan{ color:var(--on-panel-2); }

.foot__mark{
  font-family:var(--display); font-weight:800; font-stretch:76%;
  font-size:clamp(4.5rem,21vw,19rem);
  line-height:.72; letter-spacing:-.045em;
  color:rgba(237,242,230,.055);
  text-align:center; user-select:none;
  margin-bottom:-.19em;
}
.foot__mark i{ color:var(--brand); opacity:.45; font-style:normal; }

/* ── cart ────────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:130;
  background:var(--scrim);
  backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .18s linear;
}
.scrim.on{ opacity:1; pointer-events:auto; }

.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:140;
  width:min(420px,100%);
  background:var(--panel); color:var(--on-panel);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .18s var(--snap);
  box-shadow:-20px 0 60px rgba(0,0,0,.3);
}
.cart.on{ transform:none; transition:transform .42s var(--ease); }
.cart__hd{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 1.5rem; border-bottom:1px solid var(--panel-hair);
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase;
}
.cart__hd b{ color:var(--lime); font-weight:400; }
.cart__hd button{ color:var(--on-panel-3); font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }
.cart__hd button:hover{ color:var(--on-panel); }
.cart__body{ flex:1; overflow-y:auto; padding:1.5rem; display:grid; gap:1.1rem; align-content:start; }
.cart__empty{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-panel-3); text-align:center; padding:3rem 0;
}
.citem{ display:flex; gap:1rem; align-items:center; padding-bottom:1.1rem; border-bottom:1px solid var(--panel-hair); }
.citem__thumb{ width:62px; flex:none; background:rgba(237,242,230,.05); border-radius:2px; padding:4px; }
.citem__n{ font-family:var(--display); font-weight:600; font-stretch:86%; font-size:1rem; letter-spacing:-.01em; }
.citem__s{ font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-panel-3); margin-top:.2rem; }
.citem__r{ margin-left:auto; text-align:right; }
.citem__p{ font-family:var(--mono); font-size:.78rem; }
.citem__x{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-panel-3); margin-top:.35rem; }
.citem__x:hover{ color:var(--lime); }
.cart__ft{ padding:1.5rem; border-top:1px solid var(--panel-hair); }
.cart__line{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.cart__line span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-panel-3); }
.cart__line b{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; }
.cart__note{ font-size:.78rem; color:var(--on-panel-3); margin:0 0 1.1rem; }

/* ── toast ───────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:150;
  transform:translate(-50%,calc(100% + 3rem));
  background:var(--panel); color:var(--on-panel);
  border:1px solid var(--panel-hair);
  border-radius:3px; padding:.85rem 1.3rem;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase;
  opacity:0; visibility:hidden;
  transition:transform .16s linear, opacity .16s linear, visibility 0s .16s;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  white-space:nowrap; max-width:calc(100vw - 2rem);
}
.toast.on{
  transform:translate(-50%,0); opacity:1; visibility:visible;
  transition:transform .42s var(--ease), opacity .28s linear, visibility 0s;
}
.toast b{ color:var(--lime); font-weight:400; }

/* ── reveal ──────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s);
}
.hero__h1 .line.reveal{ transform:none; opacity:1; }
.hero__h1 .line.reveal > span{ transform:translateY(105%); transition:transform .85s var(--ease) var(--d,0s); }
.hero__h1 .line.reveal.in > span{ transform:none; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1180px){
  .rail{ display:none; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .card--wide, .tile{ grid-column:span 2; }
}
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .hero__plate{ min-height:auto; }
  .hero__garment{ width:min(74%,380px); }
  .breath{ position:static; margin-top:1rem; justify-content:center; }
  .ledger{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:repeat(2,1fr); gap:2.2rem 1.5rem; }
  .nav__links{ display:none; }
  .card--wide{ flex-direction:column; align-items:stretch; gap:0; }
  .card--wide .card__meta{ position:static; }
  .card--wide .card__info{ padding:0; }
  .card--wide .card__name{ font-size:clamp(1.6rem,5vw,2.2rem); }
  .foot__brand{ flex-direction:column; align-items:flex-start; gap:1rem; }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr; }
  .card--wide,.tile{ grid-column:span 1; }
  .card__blurb{ display:none; }
  .card--wide .card__blurb{ display:block; }
  .hero__cta{ gap:1rem 1.4rem; }
  .hero__spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 1rem; }
  .hero__spec > div{ padding:0; margin:0; border:0; }
  .foot__cols{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; gap:.5rem; }
  .specbar__live{ margin-left:0; }
  .announce{ font-size:.55rem; letter-spacing:.11em; }
  .announce__track{ gap:.7rem; flex-wrap:nowrap; }
  .announce__hide, .announce em{ display:none; }
  .nav__word{ font-size:1.05rem; }
  .nav__logo{ height:26px; }
  .foot__brand img{ height:46px; }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__h1 .line.reveal > span{ transform:none; }
  .hero__garment{ animation:none; }
}