/* ============================================================
   @frog — Currently Unbothered Tee
   Type:   Archivo Black (display) + Instrument Sans (everything else)
   Colour: @frog paper palette
   No monospace anywhere.
   ============================================================ */

/* palette matched to ralphtee.com (~/Desktop/Frog globals.css):
   paper #f4f0e8 · paper-light #fffdf8 · ink #111 · frog-green #a7b875
   frog-dark #3e5543 · muted #635f57 · border rgba(17,17,17,.16) */
:root{
  --paper:#F4F0E8;
  --paper-lt:#FFFDF8;
  --sand:#E7E2D8;
  --ink:#111111;
  --ink-2:#3B3A33;
  --muted:#635F57;
  --faint:#8D8779;
  --green:#3E5543;
  --green-dk:#33473A;
  --green-lt:#E9EDDA;
  --green-deep:#3E5543;
  --warn:#A05F33;
  --heart:#A7B875;
  --line:rgba(17,17,17,.16);
  --line-2:rgba(17,17,17,.3);

  --sh-1:0 1px 2px rgba(34,35,27,.05), 0 2px 8px rgba(34,35,27,.04);
  --sh-2:0 4px 14px rgba(34,35,27,.07), 0 18px 40px -14px rgba(34,35,27,.16);
  --sh-cta:0 2px 4px rgba(34,35,27,.16), 0 10px 22px -8px rgba(34,35,27,.34);

  --pad:20px;
  --maxw:1180px;

  --display:"Archivo Black",Impact,sans-serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-behavior:smooth}
/* Lenis drives scrolling itself; native smooth would fight it. Falls back
   to the rule above whenever Lenis is off (reduced motion, no JS). */
html.lenis{scroll-behavior:auto}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:contain;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0}
[hidden]{display:none !important}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:300}
.skip:focus{left:0;top:0}
:where(a,button,summary,input,[tabindex]):focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* display scale — uppercase, tight, Archivo Black */
.big{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,7.6vw,58px);line-height:.96;letter-spacing:-.012em;
}
.mid{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,4.4vw,30px);line-height:1.04;letter-spacing:-.008em;
}
/* small labels: sans, wide-tracked — NOT monospace */
.eyebrow,.field-label,.ftr-h,.tile figcaption{
  font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
}

.link{
  background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:500;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;
}
.link:hover{color:var(--ink)}

.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------------- bar + header ---------------- */
.bar{
  background:var(--green-deep);color:var(--paper-lt);text-align:center;
  padding:10px 14px;font-family:var(--display);font-weight:400;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
}
@media (min-width:640px){.bar{font-size:14px}}
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(244,240,232,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
/* Safari < 18 needs the prefix; without a blur the 95% ground is too sheer
   and body copy reads through the bar. Opaque is the correct fallback. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr{background:var(--paper)}
}
.hdr-in{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--display);font-size:29px;letter-spacing:-.022em;line-height:1;
}
.brand-heart{color:var(--heart);margin-top:5px;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.brand:hover .brand-heart{transform:scale(1.18) rotate(-8deg)}
.nav{display:flex;gap:26px}
.nav a{
  font-size:14px;font-weight:600;letter-spacing:.05em;
  color:var(--ink-2);text-decoration:none;transition:color .18s ease;
  white-space:nowrap;
}
.nav a:hover{color:var(--green)}

/* small screens: nav drops to its own row and spreads, instead of clipping */
@media (max-width:719px){
  .hdr-in{flex-direction:column;align-items:stretch;gap:12px;padding:14px var(--pad)}
  .brand{align-self:flex-start;font-size:27px}
  .nav{justify-content:space-between;gap:12px;
    border-top:1px solid var(--line);padding-top:11px}
  .nav a{font-size:13px;letter-spacing:.03em}
}

/* ---------------- hero ---------------- */
.hero{padding:26px 0 44px}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;gap:30px}

.track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  background:var(--sand);border:1px solid var(--line);
}
.track::-webkit-scrollbar{display:none}
.track figure{flex:0 0 100%;scroll-snap-align:center;margin:0}
.track img{width:100%;aspect-ratio:1/1;object-fit:cover}

.thumbs{display:flex;gap:8px;margin-top:8px}
.thumbs button{
  flex:1;padding:0;border:1.5px solid transparent;background:var(--sand);
  overflow:hidden;line-height:0;transition:border-color .18s ease,opacity .18s ease;opacity:.62;
}
.thumbs button:hover{opacity:1}
.thumbs button[aria-selected="true"]{border-color:var(--ink);opacity:1}
.thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover}

.eyebrow{color:var(--muted);margin:0}
h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(31px,8.2vw,50px);line-height:.97;letter-spacing:-.015em;margin:14px 0 0;
}
.sub{margin:12px 0 0;font-size:17px;color:var(--muted)}
.price{font-family:var(--display);font-size:34px;margin:26px 0 0;line-height:1}
.price-note{margin:8px 0 0;font-size:14px;color:var(--muted)}

.field{margin-top:28px}
.field-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px}
.field-label{color:var(--ink)}
.field-label b{color:var(--green);margin-left:5px}
.price-note b{color:var(--green)}
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.size{
  min-height:52px;padding:14px 6px;background:var(--paper-lt);
  border:1.5px solid var(--line-2);color:var(--ink);
  font-size:15px;font-weight:600;box-shadow:var(--sh-1);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.size:hover{border-color:var(--ink);transform:translateY(-2px)}
.size[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.cta{
  width:100%;margin-top:20px;min-height:58px;padding:18px 24px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);border:0;
  font-family:var(--display);font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:var(--sh-cta);transition:transform .16s ease,background .16s ease;
}
.cta:hover:not(:disabled){transform:translateY(-2px);background:#15160F}
.cta:active:not(:disabled){transform:translateY(0)}
.cta:disabled{background:#E0DACC;color:#8F8A7C;box-shadow:none;cursor:not-allowed}

.helper{margin:13px 0 0;font-size:14px;color:var(--muted);text-align:center}
.helper b{color:var(--ink);font-weight:600}

.assure{list-style:none;margin:24px 0 0;padding:16px 18px;display:grid;gap:12px;
  background:var(--paper-lt);border:1px solid var(--line)}
.assure li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.assure{border-left:3px solid var(--green)}
.assure svg{color:var(--green);flex:0 0 auto;margin-top:3px}
.merchant{margin:16px 0 0;font-size:13px;color:var(--faint);text-align:center}
.merchant .todo,.dt .todo{color:var(--warn)}

/* ---------------- story ---------------- */
.story{padding:56px 0;border-top:1px solid var(--line);background:var(--paper-lt)}
.story-grid{display:grid;gap:38px}
.story .lede{margin:18px 0 0;font-size:19px;font-weight:600;max-width:26ch}
.story .para{margin:16px 0 0;font-size:16px;color:var(--muted);line-height:1.75;max-width:46ch}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.facts>div{background:var(--paper-lt);padding:16px 18px}
.facts dt{
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 5px;
}
.facts dd{margin:0;font-size:15.5px;font-weight:600;line-height:1.4}

/* ---------------- tiles ---------------- */
.tiles{padding:56px 0;border-top:1px solid var(--line);background:var(--green-lt)}
.tile-grid{margin-top:26px;display:grid;grid-template-columns:1fr;gap:14px}
.tile{margin:0;position:relative;overflow:hidden;background:var(--sand);border:1px solid var(--line)}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.035)}
.tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to bottom,transparent,rgba(34,35,27,.62));
  pointer-events:none;
}
.tile figcaption{
  position:absolute;left:15px;bottom:14px;z-index:1;color:#FFF;
}
.tile-cta{margin:24px 0 0;font-size:17px;font-weight:600}
.tile-cta a{color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------------- process ---------------- */
.process{padding:56px 0;border-top:1px solid var(--line);background:var(--paper-lt)}
.steps{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;display:grid;gap:2px;background:var(--line)}
.steps li{display:flex;gap:18px;padding:22px 20px;background:var(--paper-lt)}
.num{
  font-family:var(--display);font-size:20px;color:var(--paper);
  background:var(--green);width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;
}
.steps h3{font-size:16px;font-weight:700}
.steps p{margin:5px 0 0;font-size:14.5px;color:var(--muted);line-height:1.68}
.timeline{margin:22px 0 0;font-size:14px;color:var(--muted)}

/* ---------------- sizing ---------------- */
.sizing{padding:56px 0;border-top:1px solid var(--line)}
.sizing .tbl-scroll{margin-top:22px}
.fine{margin:14px 0 0;font-size:13.5px;color:var(--faint);line-height:1.6}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--paper-lt)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px}
.tbl th,.tbl td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);background:var(--sand);
}
.tbl td{color:var(--muted)}
.tbl td:first-child{color:var(--ink);font-weight:700}

/* ---------------- pond ---------------- */
.pond{padding:66px 0;border-top:1px solid var(--line);background:var(--green-deep);color:var(--paper)}
.pond-in{text-align:center;max-width:620px}
.pond p{margin:14px auto 0;font-size:16px;color:rgba(239,230,215,.7);max-width:46ch}
.pond-form{display:flex;gap:9px;margin:26px 0 0}
.pond-form input{
  flex:1;min-width:0;min-height:54px;padding:16px;font-size:16px;
  background:rgba(239,230,215,.07);border:1.5px solid rgba(239,230,215,.28);
  color:var(--paper);font-family:inherit;transition:border-color .18s ease;
}
.pond-form input::placeholder{color:rgba(239,230,215,.45)}
.pond-form input:focus{outline:none;border-color:var(--paper)}
.pond-form button{
  min-height:54px;padding:16px 24px;background:var(--paper);color:var(--ink);border:0;
  font-family:var(--display);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .16s ease;
}
.pond-form button:hover{transform:translateY(-2px)}
.pond-note{margin:14px 0 0 !important;font-size:13.5px;color:rgba(239,230,215,.7) !important}
.pond-note.ok{color:#C6CE97 !important;font-weight:600}
.pond-note.err{color:#E9A279 !important}
.pond-note a{color:inherit}
.pond-note:empty{display:none}

/* ---------------- faq ---------------- */
.faq{padding:56px 0;border-top:1px solid var(--line)}
.acc{margin-top:22px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;padding:19px 2px;font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:color .18s ease;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--green)}
.plus{position:relative;width:14px;height:14px;flex:0 0 auto}
.plus::before,.plus::after{
  content:"";position:absolute;background:var(--muted);
  transition:transform .24s ease,opacity .24s ease;
}
.plus::before{left:0;top:6px;width:14px;height:2px}
.plus::after{left:6px;top:0;width:2px;height:14px}
.acc details[open] .plus::after{transform:scaleY(0);opacity:0}
.acc .body{padding:0 2px 20px;font-size:15px;color:var(--muted);line-height:1.72;max-width:64ch}
.acc .body p{margin:0}
.acc .body a{color:var(--ink)}

/* ---------------- footer ---------------- */
.ftr{border-top:1px solid var(--line);padding:44px 0 calc(110px + env(safe-area-inset-bottom));background:var(--paper-lt)}
.ftr-in{display:grid;grid-template-columns:1fr 1fr;gap:30px 20px}
.ftr-col{display:flex;flex-direction:column;gap:9px}
.ftr-h{color:var(--faint);margin-bottom:2px}
.ftr-col a{font-size:14.5px;color:var(--ink-2);text-decoration:none;transition:color .18s ease}
.ftr-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.copy{
  max-width:var(--maxw);margin:34px auto 0;padding:0 var(--pad);
  font-size:12.5px;color:var(--faint);
}

/* ---------------- sticky ---------------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:rgba(244,240,232,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 26px -12px rgba(34,35,27,.2);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(130%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.sticky.show{transform:translateY(0)}
.sticky-in{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto}
.sticky-in>img{width:40px;height:50px;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.sticky-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.sticky-name{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-price{font-family:var(--display);font-size:17px}
.cta-sm{margin-top:0;width:auto;flex:0 0 auto;min-height:46px;padding:13px 20px;font-size:12px}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;background:rgba(34,35,27,.45);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{width:100%;max-width:560px;max-height:86vh;overflow:auto;background:var(--paper);box-shadow:var(--sh-2);animation:up .26s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(22px)}to{transform:translateY(0)}}
.modal-head{position:sticky;top:0;background:var(--paper);z-index:2;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad) 14px;border-bottom:1px solid var(--line)}
.modal-head h2{font-family:var(--display);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.modal-x{width:38px;height:38px;display:grid;place-items:center;background:var(--sand);border:0;color:var(--ink-2);transition:background .18s ease}
.modal-x:hover{background:var(--line)}
.modal-body{padding:18px var(--pad) 30px}
.modal-lead{margin:0 0 16px;font-size:14.5px;color:var(--muted)}

/* ---------------- legal pages ---------------- */
.doc{max-width:660px;margin:0 auto;padding:44px var(--pad) 90px}
.doc h1{font-family:var(--display);font-size:30px;text-transform:uppercase;margin-bottom:8px;letter-spacing:-.012em;line-height:1.05}
.doc .updated{margin:0 0 30px;font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.doc h2{font-family:var(--display);font-size:16px;text-transform:uppercase;margin:34px 0 10px;letter-spacing:.01em}
.doc p,.doc li{font-size:15.5px;color:var(--muted);line-height:1.78}
.doc ul{padding-left:20px}
.doc a{color:var(--ink)}
.doc .back{display:inline-block;margin-bottom:26px;font-size:14px;color:var(--muted);text-decoration:none}
.doc .back:hover{color:var(--ink)}
.doc .todo{background:#FBF2DE;border:1px solid #E4CF9C;padding:15px 17px;font-size:14px;color:#6B4A12;margin:20px 0;line-height:1.68}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:640px){
  :root{--pad:28px}
  .sizes{grid-template-columns:repeat(6,1fr)}
  .tile-grid{grid-template-columns:repeat(3,1fr)}
  .detail-grid{grid-template-columns:1fr 1fr;column-gap:44px}
  .steps{grid-template-columns:1fr 1fr}
  .ftr-in{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1000px){
  .hero{padding:40px 0 60px}
  .hero-in{grid-template-columns:1.04fr .96fr;gap:40px;align-items:start}
  .hero-media{position:sticky;top:96px}
  h1{font-size:clamp(40px,3.9vw,54px)}
  .story,.tiles,.process,.sizing,.faq{padding:76px 0}
  .story-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps li{flex-direction:column;gap:14px}
  .sticky{display:none}
  .ftr{padding-bottom:48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   v6 — header, story, process, community, footer, zoom
   ============================================================ */

/* ---------- header: mark | centred nav | utilities ---------- */
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.brand{
  display:inline-flex;align-items:center;gap:8px;justify-self:start;
  font-family:var(--display);font-size:30px;letter-spacing:-.02em;
  text-transform:uppercase;text-decoration:none;line-height:1;
}
.nav{justify-self:center;gap:32px}
.nav a{font-family:var(--display);font-size:13px;letter-spacing:.08em;color:var(--ink)}
.hdr-end{justify-self:end;display:flex;align-items:center;gap:16px}
.hdr-ig{
  display:inline-flex;align-items:center;
  font-family:var(--display);font-size:13px;letter-spacing:.08em;
  color:var(--ink);text-decoration:none;transition:color .18s ease;
}
.hdr-ig:hover{color:var(--green)}
.cart{
  display:inline-flex;align-items:center;gap:9px;
  border:2px solid var(--ink);padding:9px 14px;text-decoration:none;
  font-family:var(--display);font-size:13px;letter-spacing:.08em;
  transition:background .18s ease,color .18s ease;
}
.cart:hover{background:var(--ink);color:var(--paper)}
.cart-n{
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:11px;
}
.cart:hover .cart-n{background:var(--paper);color:var(--ink)}

/* ---------- product: floats on the page, no frame ---------- */
.track{background:transparent;border:0}
.media-stage,.hero-media{position:relative}
.zoom-btn{
  position:absolute;right:0;bottom:96px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper-lt);border:1px solid var(--line-2);
  padding:10px 14px;font-family:var(--display);font-size:11px;letter-spacing:.09em;
  color:var(--ink);box-shadow:var(--sh-1);transition:transform .18s ease,background .18s ease;
}
.zoom-btn:hover{transform:translateY(-2px);background:var(--paper)}
.thumbs button{background:transparent;border:1.5px solid var(--line)}
.thumbs button[aria-selected="true"]{border-color:var(--ink)}

/* ---------- story ---------- */
.story{background:var(--paper)}
.story-copy .lede{font-size:20px}
.story .para{font-size:16.5px;color:var(--muted);max-width:34ch}
.circled{position:relative;display:inline-block}
.ring{
  position:absolute;left:-5%;top:6%;width:110%;height:92%;
  overflow:visible;pointer-events:none;
}
.ring path{
  fill:none;stroke:var(--heart);stroke-width:3.2;stroke-linecap:round;
  opacity:.85;transform-origin:center;transform:rotate(-1.6deg);
  stroke-dasharray:940;stroke-dashoffset:940;
}
.js .reveal.in .ring path,.js h2.reveal.in .ring path{
  animation:draw 1s cubic-bezier(.3,.7,.4,1) .25s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.btn{
  display:inline-block;margin-top:28px;background:var(--ink);color:var(--paper);
  padding:17px 30px;text-decoration:none;
  font-family:var(--display);font-size:13px;letter-spacing:.09em;
  box-shadow:var(--sh-cta);transition:transform .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-2px);background:#15160F}
.story-img{margin:0;background:var(--paper-lt);border:1px solid var(--line)}
.story-img img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- process: full-bleed deep green ---------- */
.process{background:var(--green-deep);color:var(--paper);border-top:0}
.process .big{color:var(--paper)}
.proc-lede{margin:18px 0 0;font-size:17px;color:rgba(239,230,215,.72);max-width:38ch}
.steps{
  list-style:none;margin:44px 0 0;padding:0;background:transparent;
  display:grid;gap:34px;
}
.steps li{display:block;padding:0;background:transparent;position:relative}
.num{
  display:block;width:auto;height:auto;background:transparent;
  font-family:var(--display);font-size:40px;line-height:1;
  color:var(--heart);margin-bottom:14px;
}
.steps h3{
  font-family:var(--display);font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper);
}
.steps p{margin:8px 0 0;font-size:15px;color:rgba(239,230,215,.68);line-height:1.6}
.timeline{
  margin:40px 0 0;padding-top:22px;font-size:14.5px;
  color:rgba(239,230,215,.6);border-top:1px solid rgba(239,230,215,.2);
}

/* ---------- community ---------- */
.made{padding:72px 0;border-top:1px solid var(--line);text-align:center}
.made-in{max-width:660px}
.made p{margin:18px auto 0;font-size:17px;color:var(--muted);max-width:40ch}
.btn-outline{
  display:inline-block;margin-top:28px;border:2px solid var(--ink);
  padding:16px 30px;text-decoration:none;
  font-family:var(--display);font-size:13px;letter-spacing:.08em;
  transition:background .18s ease,color .18s ease;
}
.btn-outline:hover{background:var(--ink);color:var(--paper)}

/* ---------- footer ---------- */
.ftr{background:var(--paper-lt);padding-top:56px}
.ftr-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.ftr-mark{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--display);font-size:34px;letter-spacing:-.02em;line-height:1;
}
.ftr-mark svg{color:var(--heart)}
.ftr-line{margin:0;font-size:15px;color:var(--muted)}
.ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;padding:34px 0}
.ftr-col{display:flex;flex-direction:column;gap:11px}
.ftr-h{color:var(--faint)}
.ftr-col a{font-size:15px;color:var(--ink-2);text-decoration:none}
.ftr-col a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.ftr-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  padding-top:22px;border-top:1px solid var(--line);
}
.ftr-base p{margin:0;font-size:13px;color:var(--faint)}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(34,35,27,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .2s ease;
}
.lightbox img{max-width:100%;max-height:92vh;object-fit:contain}
.lb-x{
  position:absolute;top:18px;right:18px;width:44px;height:44px;
  display:grid;place-items:center;background:transparent;border:0;color:#fff;
}

@media (min-width:720px){
  .ftr-cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px){
  .story-grid{grid-template-columns:1.02fr .98fr;align-items:center;gap:70px}
  .steps{grid-template-columns:repeat(4,1fr);gap:30px}
  .steps li:not(:last-child)::after{
    content:"";position:absolute;right:-18px;top:18px;width:22px;height:2px;
    background:rgba(147,166,98,.5);
  }
  .made{padding:96px 0}
}
@media (max-width:719px){
  .hdr-in{grid-template-columns:1fr auto;gap:12px}
  .nav{grid-column:1/-1;justify-self:stretch;justify-content:space-between;
    border-top:1px solid var(--line);padding-top:12px;gap:10px}
  .hdr-end{gap:10px}
  .hdr-ig{display:none}
  .brand{font-size:26px}
  .zoom-btn{bottom:auto;top:10px;right:10px}
}

/* ---------- v6 corrections ---------- */
.ring{left:-7%;top:-14%;width:114%;height:128%}
.ring path{stroke-width:4}

.zoom-btn{bottom:auto;top:12px;right:12px}
@media (min-width:1000px){ .zoom-btn{top:16px;right:16px} }

.story-img{background:transparent;border:0}
.story-img img{aspect-ratio:auto}

/* ---------- zoom control: match ralphtee — bottom right, boxed, flat ---------- */
.zoom-btn{
  position:absolute;top:auto;bottom:14px;right:14px;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper-lt);border:1px solid var(--line-2);border-radius:0;
  padding:12px 18px;box-shadow:none;
  font-family:var(--display);font-size:11.5px;letter-spacing:.1em;color:var(--ink);
  transition:background .18s ease,border-color .18s ease;
}
.zoom-btn:hover{transform:none;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zoom-btn svg{width:14px;height:14px}
@media (min-width:1000px){ .zoom-btn{bottom:16px;right:16px} }
@media (max-width:719px){ .zoom-btn{bottom:12px;right:12px;padding:10px 14px;font-size:10.5px} }

/* ============================================================
   zoom — matched to ralphtee.com
   image scales in place from the click point; the label is a hint
   ============================================================ */
.zoom-btn{display:none}

.track figure{position:relative;overflow:hidden;cursor:zoom-in}
.track figure.zoomed{cursor:zoom-out}
.track img{
  object-fit:contain;background:var(--paper);
  transform:scale(1);transform-origin:center center;
  transition:transform .2s ease-out;will-change:transform;
}

.zoom-hint{
  pointer-events:none;position:absolute;bottom:12px;right:12px;
  display:flex;align-items:center;gap:6px;
  border-radius:2px;border:1px solid var(--line);
  background:rgba(247,240,227,.85);
  padding:6px 12px;
  font-family:var(--display);font-size:.7rem;letter-spacing:.12em;
  color:var(--muted);opacity:.8;
  transition:opacity .2s ease;z-index:3;
}
.hero-media.is-zoomed .zoom-hint{opacity:0}

@media (prefers-reduced-motion:reduce){ .track img{transition:none} }

/* ralphtee caps the media at max-w-xl so the frame + hint sit in one view */
/* 1280 − 2×24 padding − 40 gap = 1192; the 5fr share of that is ~662 */
.hero-media{max-width:680px;margin-inline:auto;width:100%}
/* square frame, as ralphtee runs it — its shirt PNG is 938×948, so a portrait
   frame would strand it in margin instead of letting it fill the column */
.track figure{aspect-ratio:1/1}
.track img{aspect-ratio:auto;height:100%;width:100%}

/* the hint belongs to the image frame, not the whole media column */
.stage{position:relative;overflow:hidden}
.hero-media{position:static}
.hero-media.is-zoomed .zoom-hint,.stage.is-zoomed .zoom-hint{opacity:0}

/* ---------- header mark ---------- */
.brand-mark{width:auto;height:34px;object-fit:contain}
@media (max-width:719px){ .brand-mark{height:28px} }

/* ---------- buy panel left, product right (ralphtee order) ----------
   ralphtee's hero is, verbatim from its stylesheet:
     max-w-7xl (80rem/1280px) · md:grid-cols-[4fr_5fr] · md:gap-10 (40px)
   Its header stays narrower (max-w-6xl), so only the hero widens here. */
@media (min-width:1000px){
  .hero-in{grid-template-columns:4fr 5fr;max-width:1280px}
  .hero-buy{order:1}
  .hero-media{order:2}
}

/* ---------- zoom hint: closer to ralphtee's weight ---------- */
.zoom-hint{padding:9px 16px;font-size:.74rem;gap:8px}

/* mark sits on the baseline with the wordmark */
.brand{gap:10px}
.brand-mark{height:38px;margin-top:-2px}
@media (max-width:719px){ .brand-mark{height:31px} }

/* ============================================================
   v8 — buy panel to reference, readability, centred footer
   ============================================================ */

/* boxed eyebrow */
.eyebrow{
  display:inline-block;border:2px solid var(--ink);color:var(--ink);
  padding:9px 15px;font-size:11.5px;letter-spacing:.13em;margin-bottom:20px;
}

/* hand-drawn underline on the subhead */
.sub{position:relative;display:inline-block;font-size:19px;color:var(--muted);margin:14px 0 0}
.ul{position:absolute;left:0;right:0;bottom:-9px;width:100%;height:12px;overflow:visible}
.ul path{fill:none;stroke:#93A662;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300}
.js .reveal.in .ul path{animation:draw .9s cubic-bezier(.3,.7,.4,1) .3s forwards}

.price{font-size:38px;margin-top:30px}
.price-note{font-size:15px}

/* SIZE / QUANTITY blocks stacked like the reference */
.field{margin-top:30px;display:block}
.field-label{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.13em}
.field .link{display:inline-block;margin-bottom:12px;font-size:15px}
.sizes{gap:10px}
.size{min-height:58px;font-size:16px;border-width:2px;border-color:var(--ink);background:var(--paper-lt)}

/* quantity stepper */
.qty-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink);background:var(--paper-lt)}
.qty button{
  width:52px;height:54px;background:none;border:0;font-size:22px;line-height:1;color:var(--ink);
  transition:background .16s ease;
}
.qty button:hover{background:var(--sand)}
.qty span{min-width:46px;text-align:center;font-size:17px;font-weight:600}
.qty-note{font-size:15px;color:var(--muted)}

.cta{margin-top:30px;min-height:62px;font-size:15px}
.helper{font-size:15px;margin-top:16px}
.assure li{font-size:15px}

/* ---------- readability ---------- */
.story .lede{font-size:21px;line-height:1.45}
.story .para{font-size:17px;line-height:1.75;color:var(--ink-2);max-width:38ch}
.proc-lede{font-size:18px}
.steps p{font-size:16px;color:rgba(239,230,215,.78)}
.steps h3{font-size:15px}
.timeline{font-size:15px;color:rgba(239,230,215,.7)}
.acc summary{font-size:17px;padding:21px 2px}
.acc .body{font-size:16px}
.tbl{font-size:15.5px}
.pond p{font-size:17px}
.fine{font-size:14.5px}

/* story image: no frame */
.story-img.bare{background:transparent;border:0}
.story-img.bare img{aspect-ratio:auto}

/* ---------- centred footer ---------- */
.ftr{text-align:center}
.ftr-top{flex-direction:column;align-items:center;gap:10px}
.ftr-mark{justify-content:center}
.ftr-cols{grid-template-columns:1fr;gap:30px;justify-items:center}
.ftr-col{align-items:center}
.ftr-base{justify-content:center;gap:6px 20px}
@media (min-width:720px){
  .ftr-cols{grid-template-columns:repeat(3,1fr)}
}

/* dev placeholders never render as page copy */
.merchant{display:none}

/* transparent cutouts: never crop them */
.track img{object-fit:contain}
.thumbs img{object-fit:contain}
.thumbs button{background:var(--paper-lt)}

/* keep the hint clear of the artwork's own bottom-right lockup */
.zoom-hint{bottom:16px;right:16px;background:rgba(247,240,227,.92)}

/* assurances: plain rows on the page, no card, no green slab */
.assure{
  background:transparent;border:0;border-top:1px solid var(--line);
  border-left:0;padding:0;margin-top:28px;gap:0;
}
.assure li{
  padding:15px 2px;border-bottom:1px solid var(--line);
  align-items:center;gap:12px;color:var(--ink-2);
}
.assure svg{margin-top:0;color:var(--green)}

/* lighter controls — 2px black boxes read heavy at this scale */
.size{border-width:1.5px;border-color:var(--line-2);min-height:54px;font-size:15.5px}
.size:hover{border-color:var(--ink)}
.size[aria-checked="true"]{border-color:var(--ink)}
.qty{border-width:1.5px;border-color:var(--line-2)}
.qty button{width:48px;height:50px}
.eyebrow{border-width:1.5px;padding:8px 14px}
.cart{border-width:1.5px}

/* product frame carries the deep-green ground so the white tee separates */
.stage{background:var(--green-deep)}
.track{background:var(--green-deep)}
.zoom-hint{background:rgba(239,230,215,.92);border-color:transparent;color:var(--ink)}
.thumbs button{background:var(--sand)}

/* white ground, ralphtee-style: the product images are transparent PNGs,
   so the tee floats on the page with no visible frame. contain, not cover —
   cropping a cutout would shear the sleeves. */
.stage{background:var(--paper)}
.track{background:var(--paper)}
.zoom-hint{background:rgba(255,253,248,.92);border:1px solid var(--line);color:var(--muted)}

/* ============================================================
   zoom affordance — icon only, no wording
   the behaviour still lives on .track figure (see main.js)
   ============================================================ */
.zoom-hint{
  width:34px;height:34px;padding:0;gap:0;
  justify-content:center;font-size:0;letter-spacing:0;
}
.zoom-hint svg{width:15px;height:15px;flex:none}
@media (max-width:719px){ .zoom-hint{width:30px;height:30px} }

/* ============================================================
   MOBILE PRODUCTION LAYER
   Everything below is the phone/tablet pass. Grouped by concern
   so it can be reasoned about as one unit rather than as more
   accreted overrides. Desktop (>=1000px) is deliberately
   untouched except where noted.
   ============================================================ */

/* ---------- 1. touch behaviour ---------- */
a,button,summary,input,[role="radio"],[role="tab"]{
  -webkit-tap-highlight-color:rgba(74,115,40,.14);
  touch-action:manipulation;               /* no 300ms double-tap delay */
}
/* iOS fires a synthetic hover on tap and the style sticks until you tap
   elsewhere. Confine every hover effect to devices that really hover. */
@media (hover:none){
  .size:hover{transform:none;border-color:var(--line-2)}
  .cta:hover:not(:disabled),.btn:hover,.pond-form button:hover{transform:none}
  .tile:hover img{transform:none}
  .brand:hover .brand-heart{transform:none}
}

/* ---------- 2. safe areas (notch / home indicator / landscape) ---------- */
.wrap,.hero-in,.hdr-in,.copy{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.sticky{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.doc{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}

/* ---------- 3. anchor targets clear the sticky header ----------
   Lenis offsets its own scrolls, but native smooth-scroll (reduced
   motion, or no JS) does not — without this the section heading
   lands underneath the header. */
#buy,#story,#faq,.sizing,.pond{scroll-margin-top:76px}
@media (min-width:1000px){ #buy,#story,#faq,.sizing,.pond{scroll-margin-top:96px} }

/* the icon link is mobile-only; the INSTAGRAM wordmark covers desktop.
   Declared before the mobile block so the media query can win. */
.hdr-ig-icon{display:none}

/* ============================================================
   4. HEADER — was three grid rows and 157px tall on a phone,
   because .hdr-end auto-placed onto a row of its own beneath the
   full-width nav. Placed explicitly it is two rows, and the nav
   row collapses once you start scrolling.
   ============================================================ */
@media (max-width:719px){
  .hdr-in{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"brand . end"
                        "nav   nav nav";
    align-items:center;
    column-gap:10px;row-gap:0;
    padding-top:9px;padding-bottom:0;
  }
  .brand{grid-area:brand;font-size:25px;min-height:44px}
  .hdr-end{grid-area:end;gap:4px}
  .nav{
    grid-area:nav;display:flex;align-items:center;justify-content:space-between;
    height:46px;padding-top:0;overflow:hidden;gap:8px;
    border-top:1px solid var(--line);
    transition:height .28s cubic-bezier(.2,.7,.3,1),opacity .18s ease,
               border-top-color .28s ease;
  }
  .nav a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 2px;
    font-size:12.5px;letter-spacing:.06em;
  }
  /* condensed: nav row folds away, header drops to ~54px */
  .hdr.is-condensed .nav{height:0;opacity:0;border-top-color:transparent}

  .brand-mark{height:29px}
  /* text "INSTAGRAM" doesn't fit; the icon does and keeps the link */
  .hdr-ig{display:none}
  .hdr-ig-icon{
    display:inline-grid;place-items:center;width:44px;height:44px;
    color:var(--ink);text-decoration:none;
  }
  .cart{min-height:44px;padding:0 12px;gap:8px;font-size:12px}
}

/* ============================================================
   5. HERO — on a phone the product photo sat ~1,200px down the
   page, below the entire buy panel. Nobody scrolls to a product
   image they have not been shown. Gallery first.
   ============================================================ */
@media (max-width:999px){
  .hero{padding-top:18px}
  .hero-in{gap:22px}
  .hero-media{order:1}
  .hero-buy{order:2}
  .hero-media{max-width:none}
  /* full-bleed gallery: the shot is the hero on a phone */
  .stage{
    margin-left:calc(-1 * max(var(--pad),env(safe-area-inset-left)));
    margin-right:calc(-1 * max(var(--pad),env(safe-area-inset-right)));
  }
  .thumbs{
    margin-top:10px;gap:7px;
  }
  .thumbs button{min-height:0}
}

/* SIZE label and "Size guide" share a row instead of stacking */
.field-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px}
.field-top .field-label{margin-bottom:0}
.field-top .link{
  margin-bottom:0;display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px;
}

@media (max-width:719px){
  .field{margin-top:24px}
  .eyebrow{margin-bottom:16px}
  h1{margin-top:12px}
  .price{margin-top:24px}
  .sizes{gap:8px}
  .size{min-height:52px}
  .qty-row{gap:12px}
  .qty-note{font-size:14px}
  .cta{margin-top:24px;min-height:56px}
}

/* ---------- 6. touch targets on standalone links ----------
   Keyed to the INPUT, not the viewport width: an iPad at 768–1024 and a
   phone held in landscape at 844 are both finger-driven but sail past any
   width breakpoint, and were left with 21px-tall nav links. */
@media (hover:none){
  .nav a,.cart,.brand,.ftr-mark,.ftr-col a,.field-top .link{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* min-height only — setting `display` here would resurrect the wordmark
     that the <=719px block hides in favour of the icon. */
  .hdr-ig{min-height:44px}
  .nav a,.ftr-col a{justify-content:center;min-width:44px}
  .nav{gap:6px}
  /* the only navigation on a legal page — it has to be thumb-sized */
  .doc .back{display:inline-flex;align-items:center;min-height:44px}
  .thumbs button{min-height:44px}
  .acc summary{min-height:52px}
}

@media (max-width:999px){
  .ftr-col a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 6px;
  }
  .ftr-col{gap:2px}
  .ftr-mark{min-height:44px}
  .cart{min-height:44px}
}

/* ---------- 7. footer: nine stacked rows was ~950px of scroll ---------- */
@media (max-width:719px){
  .ftr{padding-top:40px}
  .ftr-top{padding-bottom:26px}
  .ftr-cols{grid-template-columns:1fr 1fr;gap:24px 12px;padding:26px 0}
  .ftr-col:last-child{grid-column:1 / -1}
  .ftr-mark{font-size:30px}
  .ftr-line{font-size:14px}
}

/* ---------- 8. email capture ---------- */
@media (max-width:479px){
  .pond-form{flex-direction:column;gap:10px}
  .pond-form button{width:100%}
}
@media (max-width:719px){
  .pond{padding:52px 0}
}

/* ---------- 9. size table: fit the phone, and show it scrolls ---------- */
@media (max-width:719px){
  .tbl{min-width:326px;font-size:14px}
  .tbl th,.tbl td{padding:11px 8px}
  .tbl th{font-size:10px;letter-spacing:.08em}
}
/* CSS-only scroll shadows — they sit on the scroll container and fade
   themselves out at each end, so the affordance is honest. */
.tbl-scroll{
  background:
    linear-gradient(to right,var(--paper-lt) 30%,rgba(255,253,248,0)) left center,
    linear-gradient(to left,var(--paper-lt) 30%,rgba(255,253,248,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(34,35,27,.15),rgba(34,35,27,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(34,35,27,.15),rgba(34,35,27,0)) right center;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
  overscroll-behavior-x:contain;
}

/* ---------- 10. carousel ---------- */
.track{
  overscroll-behavior-x:contain;   /* stops iOS edge-swipe back-navigation */
}
@media (hover:none){
  /* tap-to-zoom fights the swipe gesture; touch gets the lightbox instead */
  .track figure{cursor:default}
}

/* ---------- 11. sections: tighten vertical rhythm on a phone ---------- */
@media (max-width:719px){
  .story,.process,.sizing,.faq{padding:48px 0}
  .story-grid{gap:30px}
  .steps{gap:28px;margin-top:34px}
  .num{font-size:34px;margin-bottom:10px}
  .acc summary{padding:18px 2px;font-size:16px}
  .acc .body{font-size:15.5px;padding-bottom:18px}
}

/* ---------- 12. sticky buy bar ---------- */
@media (max-width:999px){
  .sticky-in{gap:11px}
  .cta-sm{min-height:48px;padding:12px 16px;font-size:11.5px}
  .sticky-name{font-size:12px}
}
@media (max-width:359px){
  .sticky-in>img{display:none}      /* 320px phones need the width for the CTA */
}

/* ---------- 13. modal / size guide ---------- */
.modal-card{max-height:86dvh}
@media (max-width:719px){
  .modal-card{
    max-height:88dvh;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .modal-body{padding-bottom:24px}
  .modal-x{width:44px;height:44px}
}
/* body is frozen by JS while the sheet is open (see main.js) */
body.modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---------- 14. lightbox (touch image viewer) ---------- */
.lightbox{
  padding:0;flex-direction:column;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  touch-action:pinch-zoom;
}
.lightbox img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.lb-x{
  top:calc(10px + env(safe-area-inset-top));right:10px;
  width:48px;height:48px;background:rgba(34,35,27,.5);z-index:2;
}
.lb-cap{
  position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));
  text-align:center;color:rgba(255,255,255,.72);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--sans);font-weight:600;
}

/* ---------- 15. landscape phones ---------- */
@media (max-height:520px) and (orientation:landscape){
  .bar{padding:7px 14px;font-size:10.5px}
  .hdr-in{padding-top:6px}
  .hero{padding-top:12px}
  .modal-card{max-height:94dvh}
  .sticky{padding-top:6px}
  .cta-sm{min-height:44px}   /* never below the 44px touch minimum */
}

/* ---------- 16. very narrow phones (<=360px) ---------- */
@media (max-width:360px){
  :root{--pad:16px}
  .brand{font-size:23px}
  .brand-mark{height:26px}
  .cart{padding:0 10px;font-size:11px}
  .cart-word{display:none}          /* icon-count only; "CART" is redundant */
  .cart::before{content:"BAG"}
  .nav a{font-size:11.5px;letter-spacing:.03em}
  .eyebrow{font-size:10.5px;padding:7px 11px}
  .price{font-size:34px}
  .sizes{gap:7px}
  .size{min-height:50px;font-size:15px}
}

/* ---------- 17. print-ish / misc guards ---------- */
/* long unbroken strings (an email typed into the pond) must not widen the page */
.pond-form input,.acc .body,.doc p,.ftr-col a{overflow-wrap:break-word}

/* ============================================================
   v9 — story with a voice, a size chart you can actually read,
   the @frog post rail, and a pond that isn't whispering
   ============================================================ */

/* ---------- 1. story: eyebrow + pull quote ---------- */
.story-copy .eyebrow{margin-bottom:18px}
.story .lede{font-size:22px;line-height:1.4;max-width:22ch;color:var(--ink)}
.story .para{max-width:42ch}
.story .para+.para{margin-top:14px}

.pull{
  margin:34px 0 0;padding:22px 0 0 24px;
  border-left:3px solid var(--heart);
}
.pull p{
  margin:0;font-family:var(--display);font-size:clamp(19px,2.2vw,24px);
  line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:20ch;
}
.pull cite{
  display:block;margin-top:12px;font-style:normal;
  font-size:14.5px;line-height:1.6;color:var(--muted);max-width:34ch;
}
.story .btn{margin-top:32px}

/* ---------- 2. size chart: contrast, not vibes ----------
   the old table was muted-on-cream with hairline rules, which reads as
   disabled UI. Header goes solid ink, rows alternate, and the row that
   matches the chosen size lights up so nobody has to count lines. */
.sizing{background:var(--paper-lt)}
.sizing-lede{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.sizing .tbl-scroll{margin-top:26px}

.tbl-scroll{border:1.5px solid var(--ink);background:var(--paper-lt);box-shadow:var(--sh-1)}

.tbl th{
  background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:15px 16px;border-bottom:0;white-space:nowrap;
}
.tbl td{
  padding:17px 16px;font-size:16.5px;color:var(--ink-2);
  border-bottom:1px solid rgba(34,35,27,.16);
}
.tbl tbody tr:nth-child(even) td{background:#ECE7DB}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{padding-right:10px}
.tbl-size{
  display:inline-block;min-width:46px;
  font-family:var(--display);font-size:17px;letter-spacing:.03em;color:var(--ink);
}
.tbl-you{
  display:none;margin-left:10px;padding:4px 8px;
  background:var(--green);color:var(--paper);
  font-family:var(--display);font-size:9.5px;letter-spacing:.1em;vertical-align:2px;
}
@media (hover:hover){
  .tbl tbody tr:hover td{background:var(--sand)}
}
/* the row you picked upstairs */
.tbl tbody tr.is-you td{background:var(--green-lt);color:var(--ink);font-weight:600}
.tbl tbody tr.is-you td:first-child{box-shadow:inset 4px 0 0 var(--green)}
.tbl tbody tr.is-you .tbl-you{display:inline-block}
.sizing .fine{color:var(--muted);max-width:70ch}

/* ---------- 3. from the pond: @frog top posts ---------- */
.ig{padding:60px 0;border-top:1px solid var(--line);background:var(--paper)}
.ig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.ig-head .eyebrow{margin-bottom:14px}
.ig-head .mid{line-height:1.02}
.ig-follow{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  border:1.5px solid var(--ink);padding:13px 18px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-size:12px;letter-spacing:.09em;
  transition:background .18s ease,color .18s ease;
}
.ig-follow:hover{background:var(--ink);color:var(--paper)}

.ig-stats{
  list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.ig-stats li{background:var(--paper-lt);padding:20px 22px}
.ig-stats b{
  display:block;font-family:var(--display);font-size:clamp(30px,4.4vw,42px);
  line-height:1;letter-spacing:-.015em;color:var(--green);
  font-variant-numeric:tabular-nums;
}
.ig-stats span{
  display:block;margin-top:8px;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}

.ig-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;
  margin-top:26px;padding-bottom:6px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ig-rail::-webkit-scrollbar{display:none}
.ig-card{
  position:relative;scroll-snap-align:start;text-decoration:none;color:inherit;
  background:var(--paper-lt);border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,box-shadow .22s ease;
}
.ig-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--sh-2)}
.ig-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--sand);display:block}
.ig-rank{
  position:absolute;top:0;left:0;z-index:2;
  padding:8px 12px;background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:12px;letter-spacing:.06em;
}
.ig-body{display:flex;flex-direction:column;gap:12px;padding:16px 16px 18px;flex:1}
.ig-cap{font-size:15px;line-height:1.5;color:var(--ink-2)}
.ig-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ig-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;background:var(--green-lt);color:var(--green);
  font-size:13.5px;font-variant-numeric:tabular-nums;
}
.ig-pill b{font-weight:700}
.ig-pill svg{flex:none}
.ig-fine{margin:18px 0 0;font-size:13.5px;color:var(--faint)}

@media (min-width:640px){
  .ig-stats{grid-template-columns:repeat(3,1fr)}
  .ig-rail{grid-auto-columns:44%}
}
@media (min-width:1000px){
  .ig{padding:80px 0}
  .ig-rail{
    grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
    overflow:visible;gap:18px;
  }
}

/* ---------- 4. the pond: louder, and no wallpaper promise ---------- */
/* flat, like ralphtee — its token sheet says "no gradients" */
.pond{padding:76px 0;background:var(--green-deep)}
.pond-in{max-width:680px}
.pond-eyebrow{
  display:inline-block;margin:0 0 20px;padding:8px 14px;
  border:1.5px solid rgba(239,230,215,.55);color:var(--paper) !important;
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.pond .big{color:var(--paper);line-height:.96}
.pond-lede{
  margin:20px auto 0 !important;font-size:18px !important;line-height:1.6;
  color:rgba(239,230,215,.92) !important;max-width:44ch;
}
.pond-form{margin-top:30px;max-width:520px;margin-left:auto;margin-right:auto}
.pond-form input{
  background:rgba(239,230,215,.12);border:1.5px solid rgba(239,230,215,.5);
  min-height:58px;font-size:16.5px;
}
.pond-form input::placeholder{color:rgba(239,230,215,.62)}
.pond-form input:focus{border-color:var(--paper);background:rgba(239,230,215,.18)}
.pond-form button{min-height:58px;font-size:13px;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.pond-note{color:rgba(239,230,215,.9) !important;font-size:14.5px !important}

@media (max-width:719px){
  .pond{padding:60px 0}
  .pond-form{flex-direction:column}
  .pond-form button{width:100%}
  .ig-head{align-items:flex-start}
  .tbl th{font-size:10.5px;padding:13px 13px}
  .tbl td{font-size:15.5px;padding:15px 13px}
}

/* ---------- 5. size chart on a phone: stop scrolling it sideways ----------
   at 390px the sleeve column falls off the right edge and nobody finds it.
   Below 560px each size becomes its own card, label on the left, figure on
   the right — same data, nothing hidden, no horizontal scroll. */
@media (max-width:560px){
  .tbl-scroll{overflow:visible;border:0;background:transparent;box-shadow:none}
  .tbl{min-width:0;display:block;border-collapse:separate}
  .tbl thead{display:none}
  .tbl tbody{display:grid;gap:12px}
  .tbl tbody tr{display:block;border:1.5px solid var(--ink);background:var(--paper-lt)}
  .tbl tbody tr td{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:13px 15px;font-size:16px;
    background:transparent !important;border-bottom:1px solid rgba(34,35,27,.14);
  }
  .tbl tbody tr td:last-child{border-bottom:0}
  .tbl td[data-th]::before{
    content:attr(data-th);flex:0 0 auto;
    font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:600;
  }
  .tbl tbody tr td:first-child{
    background:var(--ink) !important;border-bottom:0;padding:12px 15px;
  }
  .tbl tbody tr td:first-child .tbl-size{color:var(--paper);font-size:19px}
  .tbl tbody tr.is-you{border-color:var(--green);box-shadow:0 0 0 2px var(--green-lt)}
  .tbl tbody tr.is-you td{background:var(--green-lt) !important}
  .tbl tbody tr.is-you td:first-child{background:var(--green) !important}
  .tbl tbody tr.is-you td:first-child .tbl-you{background:var(--paper-lt);color:var(--green)}
  .tbl tbody tr.is-you td:first-child{box-shadow:none}
}

/* launch-price strikethrough — legit only while the post-drop price really is $42 */
.price-was{
  font-size:.62em;color:var(--faint);text-decoration-thickness:2.5px;
  margin-right:6px;font-family:var(--display);
}

/* ============================================================
   v10 — ralphtee.com parity
   Measurements are lifted straight from ~/Desktop/Frog (Tailwind
   classes → px). Header max-w-6xl, hero max-w-7xl 4fr/5fr, badge
   text-xs, h1 text-display-lg, price text-2xl, controls h-13, CTA
   h-15, story max-w-6xl 1:1 image at max-w-md. Same paper grain.
   ============================================================ */

:root{--maxw:1152px;--line-2:rgba(17,17,17,.85)}

/* ---------- background: ralphtee's paper + grain overlay ----------
   The base hex was already identical (#f4f0e8); what reads as a
   different colour is ralphtee's fixed noise layer at 40%. Same SVG,
   same opacity — above chrome, below the size sheet and lightbox. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- header: h-20, max-w-6xl, 0.9rem/.12em nav ---------- */
.hdr{background:rgba(244,240,232,.95)}
.hdr-in{max-width:1152px;min-height:80px;padding-top:0;padding-bottom:0}
.brand{font-size:30px;letter-spacing:-.025em;gap:10px}
.brand-mark{height:36px;margin-top:0}
.nav{gap:40px}
.nav a,.hdr-ig{font-size:.9rem;letter-spacing:.12em;color:var(--ink)}
.nav a:hover,.hdr-ig:hover{color:var(--green)}
.hdr-end{gap:16px}
.cart{
  height:48px;padding:0 16px;gap:8px;border:1px solid var(--line-2);border-radius:2px;
  font-size:.9rem;letter-spacing:.12em;
}
.cart-n{width:24px;height:24px;font-family:var(--sans);font-weight:600;font-size:.8rem}

/* ---------- hero: one screen, copy 4fr / product 5fr ---------- */
.hero{padding:32px 0}
.hero-in{max-width:1280px;gap:32px;align-items:center}
.hero-media{max-width:576px;position:relative}
.stage,.track{background:transparent}
.track figure{aspect-ratio:1/1}
.track img{aspect-ratio:auto;object-fit:contain;background:transparent}

/* badge: border-edge-strong · px-3 py-1 · text-xs · .16em */
.hero .eyebrow{
  display:inline-block;margin:0;padding:4px 12px;border:1px solid var(--line-2);border-radius:2px;
  font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.16em;color:var(--ink);
}
/* h1: text-display-lg — clamp(2.25rem,6.5vw,5rem) / .95 */
.hero h1{
  margin:12px 0 0;font-size:clamp(2.25rem,6.5vw,5rem);line-height:.95;letter-spacing:-.01em;
}
/* tagline: text-lg→xl, frog-dark, scribble 10px under */
.sub{margin:8px 0 0;font-size:18px;color:var(--green);font-weight:400}
.ul{bottom:-10px;height:10px}
.ul path{stroke:var(--heart)}

/* buy box: max-w-md, mt-5 */
.buy-box{max-width:448px;margin-top:20px}
.price{margin:0;font-size:24px;line-height:1.33}
.price-was{font-size:.62em}
.price-note{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.price-note b{color:var(--muted);font-weight:500}
.helper a,.price-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.field{margin-top:16px}
.field-top{display:block;margin-bottom:0}
.field-label{
  display:block;margin:0;font-family:var(--display);font-weight:400;
  font-size:.85rem;letter-spacing:.12em;color:var(--ink);
}
.field-label b{font-family:var(--sans);font-weight:600;color:var(--green)}
.field .link,.field-top .link{
  display:inline-block;min-height:0;margin:0;padding:0;font-size:14px;font-weight:400;
  color:var(--muted);text-decoration:underline;text-underline-offset:2px;
}
.field .link:hover{color:var(--ink)}
/* sizes: h-13 min-w-14 px-4 rounded-btn border, flex-wrap gap-2 */
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.size{
  min-height:52px;height:52px;min-width:56px;padding:0 16px;flex:0 0 auto;
  background:transparent;border:1px solid var(--line-2);border-radius:2px;
  font-family:var(--display);font-weight:400;font-size:16px;color:var(--ink);
  box-shadow:none;transition:background .15s ease,color .15s ease;
}
.size:hover{transform:none;border-color:var(--line-2);background:rgba(17,17,17,.05)}
.size[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper-lt)}
/* quantity: h-13 w-13 stepper, text-lg */
.qty-row{margin-top:8px;gap:12px}
.qty{border:1px solid var(--line-2);border-radius:2px;background:transparent}
.qty button{width:52px;height:52px;font-size:18px;font-weight:400}
.qty button:hover{background:rgba(17,17,17,.05)}
.qty span{min-width:48px;font-size:18px;font-weight:400}
.qty-note{font-size:14px;color:var(--muted)}
/* CTA: Button size=lg — h-15 px-9 text-base display, border-radius 2px */
.cta{
  margin-top:20px;min-height:60px;padding:0 36px;border-radius:2px;
  font-size:16px;letter-spacing:.025em;box-shadow:none;
  transition:background .15s ease,border-color .15s ease;
}
.cta:hover:not(:disabled){transform:none;background:var(--green)}
.cta:disabled{background:var(--ink);color:var(--paper-lt);opacity:.4}
.helper{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.helper b{color:var(--muted);font-weight:500}

/* click-to-zoom pill: bottom-3 right-3, border-edge, paper-light/85 */
.zoom-hint{
  width:auto;height:auto;bottom:12px;right:12px;gap:6px;padding:6px 12px;
  border:1px solid var(--line);border-radius:2px;background:rgba(255,253,248,.85);
  font-family:var(--display);font-size:.7rem;letter-spacing:.12em;color:var(--muted);opacity:.8;
}
.zoom-hint svg{width:13px;height:13px}

@media (min-width:768px){
  .track figure{aspect-ratio:4/5}
}
@media (min-width:1000px){
  .hero{display:flex;align-items:center;min-height:calc(100svh - 8rem);padding:24px 0}
  .hero-in{width:100%;grid-template-columns:4fr 5fr;gap:40px;align-items:center}
  .hero-media{position:relative;top:auto}
}
@media (max-width:719px){
  .hero{padding:16px 0 40px}
  .hero .eyebrow{margin:0;padding:4px 12px;font-size:12px}
  .hero h1{margin-top:12px}
  .field{margin-top:16px}
  .cta{margin-top:20px;min-height:60px}
  .size{min-height:52px}
  .qty-row{gap:12px}
  .qty-note{font-size:14px}
  .zoom-hint{width:auto;height:auto;padding:6px 12px;font-size:.7rem}
}

/* ---------- story: ralphtee "SIMPLE. ICONIC." band ---------- */
.story{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.story-grid{max-width:1152px;gap:40px;align-items:center}
.story .big{font-size:clamp(2.25rem,6.5vw,5rem);line-height:.95;letter-spacing:-.01em}
.story .lede{margin:32px 0 0;max-width:24rem;font-size:20px;line-height:1.55;font-weight:400;color:rgba(17,17,17,.8)}
.story .para{margin:16px 0 0;max-width:24rem;font-size:18px;line-height:1.6;color:var(--muted)}
.story .btn{
  display:inline-flex;align-items:center;justify-content:center;margin-top:32px;
  height:48px;padding:0 24px;border-radius:2px;
  font-size:.9rem;letter-spacing:.025em;box-shadow:none;
  transition:background .15s ease;
}
.story .btn:hover{transform:none;background:var(--green)}
.story-img,.story-img.bare{margin:0 auto;max-width:448px;width:100%;aspect-ratio:1/1;background:transparent;border:0}
.story-img img,.story-img.bare img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.ring{left:-24px;top:-12px;width:calc(100% + 48px);height:calc(100% + 24px)}
@media (min-width:1000px){
  .story{padding:96px 0}
  .story-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
}
@media (max-width:999px){
  .story-grid{display:grid}
  .story-img{order:-1}
}
@media (max-width:719px){
  .story{padding:56px 0}
  .story .lede{margin-top:24px;font-size:19px}
}

/* ---------- process: ralphtee PreorderProcess ---------- */
.process{padding:56px 0;border-bottom:1px solid var(--line)}
.process .big{font-size:clamp(2.25rem,6.5vw,5rem);line-height:.95;letter-spacing:-.01em;color:var(--paper-lt)}
.proc-lede{margin:16px 0 0;max-width:28rem;font-size:16px;line-height:1.6;color:rgba(255,253,248,.7)}
.steps{margin:48px 0 0;display:grid;gap:40px 24px;grid-template-columns:1fr}
.steps li{position:relative;display:block;padding:0}
.num{
  display:block;margin:0;width:auto;height:auto;background:transparent;
  font-family:var(--display);font-size:36px;line-height:1.1;color:var(--heart);
}
.step-arrow{display:none;position:absolute;right:0;top:4px;width:56px;height:32px;color:rgba(167,184,117,.6)}
.steps h3{margin:12px 0 0;font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.025em;line-height:1.3;color:var(--paper-lt)}
.steps p{margin:8px 0 0;font-size:16px;line-height:1.625;color:rgba(255,253,248,.75)}
.timeline{
  margin:56px 0 0;padding:16px 0;font-size:14px;line-height:1.5;color:rgba(255,253,248,.7);
  border-top:1px solid rgba(255,253,248,.2);border-bottom:1px solid rgba(255,253,248,.2);
}
.timeline:empty{display:none}
@media (min-width:640px){ .steps{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){
  .process{padding:80px 0}
  .steps{grid-template-columns:repeat(4,1fr);gap:40px 24px}
  .steps li:not(:last-child)::after{display:none}
  .step-arrow{display:block}
}
@media (max-width:719px){ .steps{gap:34px;margin-top:40px} .num{font-size:34px;margin-bottom:0} }

/* ---------- made for @frog: ralphtee CommunitySection ---------- */
.made{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;background:var(--paper)}
.made-in{max-width:1152px}
.made-mark{display:block;margin:0 auto;height:96px;width:auto}
.made .big{margin-top:16px;font-size:clamp(2.25rem,6.5vw,5rem);line-height:.95;letter-spacing:-.01em}
.made-lede{margin:16px auto 0;max-width:28rem;font-size:16px;line-height:1.6;color:var(--muted)}
.made-callout{
  display:inline-block;margin:32px 0 0;padding:14px 28px;border:1px solid var(--line-2);border-radius:2px;
  font-family:var(--display);font-size:16px;letter-spacing:.025em;color:var(--ink);
}
.made-link{margin:24px 0 0;font-size:14px}
.made-link a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.made-link a:hover{color:var(--green)}
@media (min-width:1000px){ .made{padding:80px 0} }

/* CTA always live (ralphtee): missing size shows an inline error, not a grey button */
.size-err{margin:8px 0 0;font-size:14px;color:#A03A2A}
.size-err[hidden]{display:none}
.cta:disabled{opacity:.4;cursor:wait}

/* ---------- the pond: ralphtee EmailCapture ---------- */
.pond{padding:56px 0;background:var(--ink);color:var(--paper-lt);border-top:0;border-bottom:1px solid var(--line)}
.pond-in{max-width:1152px;text-align:left}
.pond .big{max-width:42rem;font-size:clamp(2.25rem,6.5vw,5rem);line-height:.95;letter-spacing:-.01em;color:var(--paper-lt)}
.pond-lede{margin:16px 0 0 !important;max-width:28rem;font-size:16px !important;line-height:1.6;color:rgba(255,253,248,.7) !important}
.pond-form{display:flex;flex-direction:column;gap:12px;margin:32px 0 0;max-width:28rem}
.pond-field{flex:1;min-width:0}
.pond-form input{
  display:block;width:100%;height:56px;min-height:0;padding:0 16px;
  background:transparent;border:1px solid rgba(255,253,248,.3);border-radius:0;
  color:var(--paper-lt);font-size:16px;
}
.pond-form input::placeholder{color:rgba(255,253,248,.4)}
.pond-form input:focus{outline:none;border-color:var(--paper-lt);background:transparent}
.pond-form button{
  flex:0 0 auto;height:60px;min-height:0;padding:0 36px;border-radius:2px;
  background:var(--paper-lt);color:var(--ink);border:1px solid var(--paper-lt);
  font-family:var(--display);font-size:16px;letter-spacing:.025em;box-shadow:none;
  transition:background .15s ease,border-color .15s ease;
}
.pond-form button:hover{transform:none;background:var(--heart);border-color:var(--heart)}
.pond-note{margin:12px 0 0 !important;font-size:14px !important;color:rgba(255,253,248,.7) !important}
.pond-note.ok{color:var(--heart) !important;font-family:var(--display);font-size:18px !important;font-weight:400}
.pond-note.err{color:var(--heart) !important}
@media (min-width:640px){ .pond-form{flex-direction:row;align-items:flex-start} .pond-form button{width:auto} }
@media (min-width:1000px){ .pond{padding:80px 0} }
@media (max-width:719px){ .pond{padding:56px 0} .pond-form{flex-direction:column} .pond-form button{width:100%} }

/* crossed-out launch anchor: legible, not a smudge */
.price-was{
  font-size:.8em;color:var(--muted);font-family:var(--display);
  text-decoration:line-through;text-decoration-color:var(--ink);text-decoration-thickness:2px;
  margin-right:8px;
}

/* the pond in our palette: deep green like the bar and the process band, not ralphtee's black */
.pond{background:var(--green-deep)}
.pond-form button:hover{background:var(--heart);border-color:var(--heart)}

/* ==================== CART DRAWER ==================== */
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:100%;max-width:440px;height:100dvh;max-height:none;padding:0;border:0;
  background:var(--paper);color:var(--ink);box-shadow:var(--sh-2);flex-direction:column}
.drawer[open]{display:flex;animation:drawer-in .28s cubic-bezier(.2,.8,.3,1)}
.drawer::backdrop{background:rgba(34,35,27,.45)}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad) 14px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-family:var(--display);font-size:15px;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.drawer-list{list-style:none;margin:0;padding:0 var(--pad);flex:1;overflow-y:auto}
.cl{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.cl img{width:72px;height:72px;object-fit:cover;background:var(--paper-lt);border:1px solid var(--line);flex:0 0 auto}
.cl-mid{flex:1;min-width:0}
.cl-name{margin:0;font-weight:600;font-size:15px}
.cl-var{margin:2px 0 10px;font-size:13.5px;color:var(--muted)}
.cl-row{display:flex;align-items:center;gap:16px}
.cl-price{margin:0;font-weight:600}
.cl-rm{font-size:13px}
.qty-sm button{width:34px;height:34px}
.qty-sm span{min-width:26px}
.drawer-more{padding:14px var(--pad);border-bottom:1px solid var(--line)}
.sizes-sm{margin-top:8px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sizes-sm .size{min-height:38px;min-width:0;width:auto;font-size:12.5px;padding:0}
.sizes-sm .size.in-bag{box-shadow:inset 0 0 0 1.5px var(--ink)}
.drawer-foot{padding:16px var(--pad) calc(18px + env(safe-area-inset-bottom));background:var(--paper)}
.drawer-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.drawer-sum b{font-family:var(--display);font-size:20px;font-weight:400}
.drawer-note{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.drawer-foot .cta{margin-top:14px;width:100%}
.drawer-err{margin:10px 0 0;font-size:13.5px;color:var(--warn);text-align:center}
.drawer-fine{margin:10px 0 0;font-size:12px;color:var(--faint);text-align:center}
.drawer-empty{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:var(--pad);text-align:center}
.drawer-empty-h{margin:0;font-family:var(--display);font-size:22px}
.drawer.is-empty .drawer-empty{display:flex}
.drawer.is-empty .drawer-list,.drawer.is-empty .drawer-more,.drawer.is-empty .drawer-foot{display:none}
button.cart{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){.drawer[open]{animation:none}}
.drawer-zone{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.drawer-zone select{width:100%;min-height:46px;padding:0 12px;border:2px solid var(--ink);background:var(--paper-lt);font:600 14px var(--sans);color:var(--ink);border-radius:0}
.drawer-ship{margin-top:4px;font-size:14px;color:var(--muted)}
.drawer-total{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}

/* 3-step version of the process strip */
@media (min-width:640px){ .steps.steps-3{grid-template-columns:repeat(3,1fr)} }
.pond-fine{margin:14px 0 0;font-size:12px;opacity:.7;max-width:460px}

/* sticker upsell */
.drawer-upsell{display:flex;align-items:center;gap:12px;margin:0 var(--pad);padding:12px;border:1.5px dashed var(--line-2,rgba(17,17,17,.4));background:var(--paper-lt)}
.drawer-upsell[hidden]{display:none}
.drawer-upsell img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.drawer-upsell div{flex:1;min-width:0}
.drawer-upsell .cl-var{margin:2px 0 0}
.up-add,.sticker-plus{font:700 12px var(--display);letter-spacing:.06em;padding:10px 12px;border:2px solid var(--ink);background:var(--paper-lt);color:var(--ink);cursor:pointer;white-space:nowrap}
.up-add:hover,.sticker-add:hover .sticker-plus{background:var(--ink);color:var(--paper-lt)}
.sticker-add{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:10px 12px;border:1.5px solid var(--line);background:var(--paper-lt);font:14px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.sticker-add img{width:44px;height:44px;object-fit:contain}
.sticker-add span:nth-child(2){flex:1}
.drawer-list:empty{flex:0}
.drawer.is-empty .drawer-upsell{display:none}

/* sticker section */
.stk{padding:72px 0;background:var(--green-lt)}
.stk-grid{display:grid;gap:28px;align-items:center}
.stk-img{margin:0;display:flex;justify-content:center}
.stk-img img{width:min(100%,420px);height:auto;filter:drop-shadow(0 14px 22px rgba(34,35,27,.22));transform:rotate(-6deg)}
.stk-copy .lede{margin:14px 0 10px}
.stk-price{margin:0 0 20px;font-size:17px}
.stk .btn{cursor:pointer;border:0;font:inherit}
@media (min-width:800px){.stk{padding:110px 0}.stk-grid{grid-template-columns:1fr 1fr;gap:60px}}
.sticker-add{padding:12px 14px}
.sticker-add img{width:64px;height:64px}
.drawer-nudge{margin:0;padding:10px var(--pad);background:var(--green-lt);font-size:13.5px;text-align:center}
.drawer-nudge.is-unlocked{background:var(--green);color:var(--paper-lt)}
.drawer-nudge[hidden]{display:none}
.cl-free .cl-price{color:var(--green);font-weight:700}
/* whole bag scrolls; totals + checkout stay pinned at the bottom */
.drawer{overflow-y:auto;overscroll-behavior:contain}
.drawer-list{flex:0 0 auto;overflow:visible}
.drawer-upsell{margin-top:16px}
.drawer-foot{position:sticky;bottom:0;margin-top:auto;border-top:1px solid var(--line);box-shadow:0 -10px 20px -14px rgba(34,35,27,.25)}
.drawer-head{position:sticky;top:0;z-index:2;background:var(--paper)}