/* ============================================================
   BLANKS BY TSG — PROJECT: PREMIUM BLANK
   Design tokens. Palette: garment-dyed neutrals only.
   ============================================================ */
:root{
  --bone:    #F3F1EC;
  --paper:   #EAE7DF;
  --greige:  #CFC8BB;
  --stone:   #6B665C;
  --ink:     #1A1915;
  --white:   #FBFAF7;

  /* real colourways */
  --cw-black:    #1E1D19;
  --cw-ecru:     #E8E1D0;

  --font-sans: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --space-section: clamp(4.5rem, 10vw, 8.5rem);
  --space-gutter:  clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;
  --line: 1px solid rgba(26,25,21,.14);
  --ease: cubic-bezier(.22,.7,.25,1);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bone);
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}

/* ---------- type ---------- */
.display{
  font-stretch:118%;font-weight:640;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.94;
}
h1.display{font-size:clamp(2.7rem, 9vw, 6.6rem)}
h2.display{font-size:clamp(2rem, 5.5vw, 3.9rem)}
.blank-outline{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.on-dark .blank-outline{-webkit-text-stroke-color:var(--bone)}
@supports not (-webkit-text-stroke:1px black){.blank-outline{color:inherit}}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:2rem;height:1px;background:currentColor;opacity:.6}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--stone);max-width:34em}
.mono{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em}

/* the redacted-blank motif */
.redact{
  display:inline-block;height:.72em;border-radius:3px;
  background:currentColor;opacity:.22;vertical-align:baseline;
}

/* ---------- layout ---------- */
.wrap{width:min(1200px, 100% - 2*var(--space-gutter));margin-inline:auto}
section{padding-block:var(--space-section)}
.section-head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.75rem;border-radius:100px;
  font-weight:560;font-size:.95rem;letter-spacing:.01em;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-solid{background:var(--ink);color:var(--bone)}
.btn-solid:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone);transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.on-dark .btn-solid{background:var(--bone);color:var(--ink)}
.on-dark .btn-ghost{border-color:var(--bone)}
.on-dark .btn-ghost:hover{background:var(--bone);color:var(--ink)}
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;
}
.on-dark :is(a,button):focus-visible{outline-color:var(--bone)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bone) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-bottom:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:1.05rem}
.logo{font-stretch:118%;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.15rem, .95rem + 1vw, 1.7rem);line-height:1;white-space:nowrap}
.logo sup{font-family:var(--font-mono);font-size:.55em;letter-spacing:0;font-weight:400;margin-left:2px}
.nav-links{display:none;gap:2.2rem}
.nav-links a{font-size:.9rem;font-weight:500;position:relative;padding-block:.25rem}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.cart-link{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;position:relative;display:inline-flex;align-items:center;gap:.4rem}
.cart-count{
  display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  background:var(--ink);color:var(--bone);border-radius:100px;font-size:.62rem;line-height:1;
}
.cart-count[hidden]{display:none}
.burger{display:grid;gap:5px;padding:.4rem}
.burger span{width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:40;background:var(--bone);
  display:grid;place-content:center;gap:1rem;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-stretch:118%;font-weight:640;text-transform:uppercase;font-size:clamp(1.8rem,7.5vw,2.5rem);line-height:1.25}
.mobile-menu a:hover{color:var(--stone)}
.mobile-menu .mono{margin-top:2rem;color:var(--stone)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-block:clamp(3rem,7vw,6rem) 0}
.hero-grid{display:grid;gap:2.75rem}
.hero-copy{display:grid;gap:1.5rem;align-content:center}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.5rem}
.hero-figure{
  position:relative;background:var(--greige);border-radius:var(--radius);
  aspect-ratio:4/4.6;overflow:hidden;display:grid;place-items:center;
}
.figure-tag{
  position:absolute;left:1.1rem;bottom:1.1rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  background:var(--bone);padding:.45rem .8rem;border-radius:6px;text-transform:uppercase;
}
.figure-tag--tr{left:auto;right:1.1rem;bottom:auto;top:1.1rem}
.spec-strip{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  border-top:var(--line);border-bottom:var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);
}
.spec-strip div{
  padding:1.15rem .5rem;text-align:center;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);
}
.spec-strip div + div{border-left:var(--line)}
.spec-strip div:nth-child(3){border-left:none}
.spec-strip div:nth-child(n+3){border-top:var(--line)}

/* ============================================================
   RANGE (product cards)
   ============================================================ */
.range{background:var(--paper)}
.range-grid{display:grid;gap:1.5rem}
.pcard{
  background:var(--bone);border:var(--line);border-radius:var(--radius);
  overflow:hidden;display:grid;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.pcard:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(26,25,21,.09)}
.pcard-figure{
  background:#E7E7E7;aspect-ratio:1/.95;position:relative;overflow:hidden;
}
.pcard-figure picture{position:absolute;inset:0;width:100%;height:100%}
.pcard-figure .mono{position:absolute;top:.9rem;left:.9rem;background:var(--bone);padding:.32rem .65rem;border-radius:5px;font-size:.62rem;text-transform:uppercase;z-index:2}
.pcard-body{padding:1.5rem 1.4rem 1.6rem;display:grid;gap:.85rem;align-content:start;min-width:0}
.pcard h3{font-stretch:112%;font-weight:640;text-transform:uppercase;font-size:1.2rem;line-height:1.1}
.pcard .sub{color:var(--stone);font-size:.92rem}
.pcard .price-row{display:flex;justify-content:flex-start;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.pcard .price{font-stretch:112%;font-weight:640;font-size:1.25rem}
.pcard .gsm{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.swatches{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.swatch{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(26,25,21,.18);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.swatch:hover{transform:scale(1.14)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bone), 0 0 0 3.5px var(--ink)}
.pcard .cw-name{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.pcard .btn{justify-self:start;margin-top:.35rem;padding:.75rem 1.35rem;font-size:.88rem}

/* ---------- size selector (new) ---------- */
.size-select{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.size-opt{
  min-width:2.6rem;height:2.6rem;padding:0 .5rem;border-radius:8px;
  border:1.5px solid rgba(26,25,21,.22);font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.04em;transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.size-opt:hover{border-color:var(--ink)}
.size-opt[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.size-opt:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.pcard .field-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.pcard .add-to-cart-row{display:grid;gap:.6rem;margin-top:.2rem}
.atc-note{font-size:.8rem;color:#6B675D;min-height:1.1em}
.atc-note.is-error{color:#8a3b2e}

/* ============================================================
   TWO PATHS (wardrobe / brand)
   ============================================================ */
.path-grid{display:grid;gap:1.25rem}
.path-card{
  border-radius:var(--radius);padding:clamp(1.8rem,4vw,2.6rem);
  display:grid;gap:1rem;align-content:start;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.path-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(26,25,21,.12)}
.path-card--light{background:var(--paper);border:var(--line)}
.path-card--dark{background:var(--ink);color:var(--bone)}
.path-card .mono{color:var(--stone)}
.path-card--dark .mono{color:var(--greige)}
.path-card h3{font-stretch:116%;font-weight:640;text-transform:uppercase;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.05}
.path-card p{color:var(--stone);font-size:.98rem;max-width:34em}
.path-card--dark p{color:var(--greige)}
.path-card .btn{justify-self:start;margin-top:.5rem}

/* ============================================================
   DESIGNED SLOWLY
   ============================================================ */
.slow-grid{display:grid;gap:2.5rem}
.slow-copy{display:grid;gap:1.4rem;align-content:center}
.slow-copy p{color:var(--stone)}
.slow-copy p strong{color:var(--ink);font-weight:600}
.dev-log{border-top:var(--line)}
.dev-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;
  padding:1.05rem 0;border-bottom:var(--line);align-items:baseline;
}
.dev-row .mono{color:var(--stone);white-space:nowrap}
.dev-row p{font-size:.95rem}

/* ============================================================
   SPEC TABLES
   ============================================================ */
.fit{background:var(--paper)}
.spec-cols{display:grid;gap:2.5rem}
.spec-col h3{
  font-stretch:114%;font-weight:640;text-transform:uppercase;font-size:1.25rem;
  margin-bottom:.35rem;
}
.spec-col .mono{color:var(--stone)}
.spec-table{border-top:var(--line);margin-top:1.1rem}
.spec-row{
  display:grid;grid-template-columns:1fr 1.5fr;gap:1rem;
  padding:.95rem 0;border-bottom:var(--line);align-items:baseline;
}
.spec-row dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.spec-row dd{font-size:.96rem}

/* ============================================================
   PIPELINE (dark, signature section)
   ============================================================ */
.pipeline{background:var(--ink);color:var(--bone)}
.pipeline .eyebrow{color:var(--greige)}
.pipeline .lede{color:var(--greige)}
.pipe-list{border-top:1px solid rgba(243,241,236,.16);margin-top:clamp(2rem,4vw,3rem)}
.pipe-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem;align-items:center;
  padding:1.25rem 0;border-bottom:1px solid rgba(243,241,236,.16);
  transition:padding-left .3s var(--ease);
}
.pipe-row:hover{padding-left:.6rem}
.pipe-row .idx{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--greige)}
.pipe-row .name{
  font-stretch:114%;font-weight:620;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1.15;
}
.pipe-row .name .redact{opacity:.28}
.status{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:100px;white-space:nowrap;
}
.status-live{background:var(--bone);color:var(--ink)}
.status-dev{border:1px solid rgba(243,241,236,.45);color:var(--greige)}
.status-sample{border:1px dashed rgba(243,241,236,.45);color:var(--greige)}
.pipe-note{margin-top:1.6rem;color:var(--greige);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* ============================================================
   FOR BRANDS
   ============================================================ */
.brands-grid{display:grid;gap:1px;background:rgba(26,25,21,.14);border:var(--line);border-radius:var(--radius);overflow:hidden}
.brand-card{background:var(--bone);padding:1.9rem 1.6rem;display:grid;gap:.7rem;transition:background .3s}
.brand-card:hover{background:var(--white)}
.brand-card .mono{color:var(--stone)}
.brand-card h3{font-size:1.12rem;font-weight:620;font-stretch:106%}
.brand-card p{color:var(--stone);font-size:.95rem}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--paper)}
.review-grid{display:grid;gap:1.25rem}
.review-card{
  background:var(--bone);border:var(--line);border-radius:var(--radius);
  padding:1.75rem 1.5rem;display:grid;gap:1rem;align-content:start;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(26,25,21,.08)}
.stars{font-family:var(--font-mono);letter-spacing:.2em;font-size:.8rem}
.review-card blockquote{font-size:.98rem;line-height:1.55}
.review-meta{display:grid;gap:.15rem;border-top:var(--line);padding-top:.9rem}
.review-meta strong{font-size:.9rem;font-weight:600}
.review-meta span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:52rem;border-top:var(--line)}
.faq-item{border-bottom:var(--line)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.35rem 0;text-align:left;font-weight:580;font-size:1.05rem;font-stretch:104%;
}
.faq-q .faq-icon{
  flex-shrink:0;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;transition:transform .35s var(--ease), background .3s;
}
.faq-icon svg{width:12px;height:12px;stroke:var(--ink);transition:stroke .3s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--ink)}
.faq-item.open .faq-icon svg{stroke:var(--bone)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 3rem 1.4rem 0;color:var(--stone);max-width:44em}

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final{background:var(--ink);color:var(--bone);text-align:center}
.final-inner{display:grid;gap:1.6rem;justify-items:center}
.final h2{font-size:clamp(2.4rem,7.5vw,5.2rem)}
.final .eyebrow{color:var(--greige)}
.final .lede{color:var(--greige);margin-inline:auto}
.final .mono{color:var(--greige)}
.footer{background:var(--ink);color:var(--greige);border-top:1px solid rgba(243,241,236,.12);padding-block:3rem 2rem}
.footer-grid{display:grid;gap:2rem}
.footer .logo{color:var(--bone)}
.footer-col h3{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--greige);margin-bottom:.9rem;font-weight:500}
.footer-col li{margin-bottom:.5rem;font-size:.92rem}
.footer-col a:hover{color:var(--bone)}
.footer-bottom{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(243,241,236,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--greige);
}

.photo{width:100%;height:100%;object-fit:cover;display:block}
.pcard-hover-reveal{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;
  object-position:center 18%;transition:opacity .4s var(--ease);
}
.pcard-link:hover .pcard-hover-reveal,.pcard-link:focus-visible .pcard-hover-reveal{opacity:1}
@media (prefers-reduced-motion:reduce){.pcard-hover-reveal{transition:none}}
.hero-figure--photos{grid-template-columns:1fr 1fr;place-items:stretch}
.pcard-figure .photo{transition:transform .45s var(--ease)}
.pcard:hover .pcard-figure .photo{transform:scale(1.04)}

/* ---------- announcement bar ---------- */
.announce{
  background:var(--ink);color:var(--bone);
  display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;
  padding:.55rem 1rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.announce span{white-space:nowrap}
.announce a{text-decoration:underline;text-underline-offset:2px}
.announce a:hover{color:var(--greige)}

/* ---------- lookbook ---------- */
.looks-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,300px);
  gap:1.1rem;overflow-x:auto;padding-bottom:1rem;
  scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;
}
.looks-track::-webkit-scrollbar{display:none}
.look{scroll-snap-align:start;display:grid;gap:.9rem;align-content:start}
.look-figure{
  background:var(--greige);border-radius:var(--radius);aspect-ratio:3/3.7;
  position:relative;overflow:hidden;
}
.look-figure .photo{transition:transform .5s var(--ease)}
.look:hover .photo{transform:scale(1.04)}
.look h3{font-size:1.02rem;font-weight:620;font-stretch:106%}
.look p{font-size:.88rem;color:var(--stone)}
.look .mono{position:absolute;top:.9rem;left:.9rem;background:var(--bone);padding:.3rem .6rem;border-radius:5px;font-size:.62rem;text-transform:uppercase;z-index:1}

/* ---------- size guide ---------- */
.size-guide{border:var(--line);border-radius:var(--radius);background:var(--bone);margin-top:1.25rem;overflow:hidden}
.size-guide summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.4rem;font-weight:580;font-stretch:106%;
}
.size-guide summary::-webkit-details-marker{display:none}
.size-guide summary::after{content:"+";font-family:var(--font-mono);font-size:1.1rem;transition:transform .3s var(--ease)}
.size-guide[open] summary::after{transform:rotate(45deg)}
.size-guide table{width:100%;border-collapse:collapse;font-size:.9rem}
.size-guide th,.size-guide td{padding:.7rem 1.4rem;text-align:left;border-top:var(--line)}
.size-guide th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:500}
.size-guide .sg-note{padding:.9rem 1.4rem 1.2rem;color:var(--stone);font-size:.82rem}

/* ---------- signup ---------- */
.signup{background:var(--paper)}
.signup-inner{display:grid;gap:1.4rem;justify-items:center;text-align:center;max-width:40rem;margin-inline:auto}
.signup-form{display:flex;gap:.6rem;width:100%;max-width:26rem;flex-wrap:wrap;justify-content:center}
.signup-form input{
  flex:1;min-width:200px;padding:.95rem 1.3rem;border-radius:100px;
  border:1.5px solid rgba(26,25,21,.25);background:var(--bone);
  font:inherit;font-size:.95rem;color:var(--ink);
}
.signup-form input:focus{outline:2px solid var(--ink);outline-offset:2px}
.signup-form input[aria-invalid="true"]{border-color:#8a3b2e}
.signup-msg{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;color:var(--ink)}
.signup-msg.is-error{color:#8a3b2e}

/* layout overflow guards */
body{overflow-x:clip}
.range-grid > *,.review-grid > *,.spec-cols > *,.path-grid > *{min-width:0}
.pcard .price-row{flex-wrap:wrap}
.size-guide{overflow-x:auto}

/* secondary text on light backgrounds — WCAG AA contrast */
.lede,.pcard .sub,.brand-card p,.look p,.faq-a p,.sg-note,.price-note,.cart-empty,.cart-note{color:#6B675D}

/* visually-hidden but screen-reader-accessible content */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* skip link for keyboard users */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bone);padding:.8rem 1.3rem;font-size:.9rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:520px){
  .size-guide th,.size-guide td{padding:.65rem .8rem;font-size:.8rem}
}
@media (max-width:390px){
  .swatch{width:32px;height:32px}
  .size-opt{min-width:2.9rem;height:2.9rem}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:760px){
  .nav-links{display:flex}
  .burger{display:none}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}
  .spec-strip{grid-template-columns:repeat(4,1fr)}
  .spec-strip div:nth-child(3){border-left:var(--line)}
  .spec-strip div:nth-child(n+3){border-top:none}
  .range-grid{grid-template-columns:repeat(2,1fr)}
  .path-grid{grid-template-columns:1fr 1fr}
  .slow-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
  .spec-cols{grid-template-columns:1fr 1fr;gap:4rem}
  .spec-row{min-height:5.4rem;align-content:center}
  .brands-grid{grid-template-columns:repeat(3,1fr)}
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr}
  .section-head--split{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:2.5rem}
  .section-head--split .lede{justify-self:end;text-align:right;max-width:26em}
}
@media (min-width:1024px){
  .review-grid{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   CART DRAWER (new)
   ============================================================ */
.cart-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(26,25,21,.42);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(420px, 100vw);background:var(--bone);
  display:grid;grid-template-rows:auto 1fr auto;
  transform:translateX(100%);transition:transform .35s var(--ease);
  box-shadow:-20px 0 50px rgba(26,25,21,.18);
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.4rem;border-bottom:var(--line)}
.cart-head h2{font-size:1.05rem;font-stretch:112%;font-weight:640;text-transform:uppercase}
.cart-close{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.cart-close:hover{background:rgba(26,25,21,.08)}
.cart-body{overflow-y:auto;padding:1rem 1.4rem}
.cart-empty{font-size:.95rem;padding:2rem 0;text-align:center}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;padding:1rem 0;border-bottom:var(--line);align-items:start}
.cart-line img{width:64px;height:64px;object-fit:cover;border-radius:6px;background:#E7E7E7}
.cart-line-title{font-size:.92rem;font-weight:600}
.cart-line-opts{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-top:.2rem}
.cart-line-qty{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.cart-qty-btn{width:26px;height:26px;border:1.5px solid rgba(26,25,21,.2);border-radius:50%;display:grid;place-items:center;font-size:.85rem}
.cart-line-remove{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-top:.5rem;text-decoration:underline}
.cart-line-price{font-weight:640;font-size:.92rem;white-space:nowrap}
.cart-foot{border-top:var(--line);padding:1.25rem 1.4rem;display:grid;gap:.9rem}
.cart-subtotal{display:flex;justify-content:space-between;font-size:1rem;font-weight:640}
.cart-foot .btn{width:100%;justify-content:center}
.cart-note{font-size:.78rem;text-align:center}

/* ---------- mobile sticky purchase bar (new) ---------- */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:var(--line);
  padding:.85rem var(--space-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transform:translateY(100%);transition:transform .3s var(--ease);
}
.sticky-buy.show{transform:translateY(0)}
.sticky-buy .mono{color:var(--stone)}
.sticky-buy .btn{padding:.7rem 1.3rem;font-size:.85rem;white-space:nowrap}
@media (min-width:760px){
  .sticky-buy{display:none}
}

/* ============================================================
   LEGAL PAGES (contact / privacy / terms / returns / shipping)
   ============================================================ */
.legal-main{padding-block:clamp(3rem,7vw,5rem)}
.legal-body{max-width:44rem;display:grid;gap:1.5rem;margin-top:2rem}
.legal-body h2{font-size:1.3rem;font-stretch:112%;font-weight:640;text-transform:uppercase;margin-top:1rem}
.legal-body p{color:var(--stone)}
.legal-body ul{color:var(--stone);padding-left:1.2rem;display:grid;gap:.6rem;list-style:disc}
.legal-body li{line-height:1.55}
.legal-body a{color:inherit}
.placeholder-notice{
  background:#F6E9C9;border:1px solid #C9A227;border-radius:8px;
  padding:1rem 1.25rem;font-family:var(--font-mono);font-size:.82rem;line-height:1.5;
}

/* ============================================================
   PRODUCT CARD — full-card click-through
   ============================================================ */
.pcard{position:relative}
.pcard-link{position:relative;display:block}
.pcard-link:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--radius)}
.pcard-view{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;position:relative;z-index:1;
}
.pcard-view svg{width:11px;height:11px;transition:transform .25s var(--ease)}
.pcard-link:hover .pcard-view svg,.pcard-link:focus-visible .pcard-view svg{transform:translateX(3px)}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.product-main{padding-block:clamp(2rem,5vw,3.5rem) 0}
.breadcrumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--ink)}
.product-layout{display:grid;gap:2.5rem}

/* ---- gallery ----
   Main viewer uses object-fit:contain (never crops) rather than cover: the
   gallery mixes near-square flat-lay shots with taller portrait model
   photography, and forcing a uniform crop was cutting into models' heads.
   A 4:5 container comfortably fits the portrait shots with little to no
   letterboxing, and lets the flat-lay sit on the same neutral background
   with modest, intentional-looking side margins rather than a hard crop. */
.gallery{display:grid;gap:.75rem}
.gallery-main{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.gallery-zoom{
  position:absolute;inset:0;width:100%;height:100%;background:#E7E7E7;
  cursor:zoom-in;
}
.gallery-zoom img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.gallery-main .gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;background:color-mix(in srgb, var(--bone) 88%, transparent);
  display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s;
}
.gallery-main .gallery-arrow:hover{background:var(--bone)}
.gallery-main .gallery-arrow--prev{left:.75rem}
.gallery-main .gallery-arrow--next{right:.75rem}
.gallery-main .gallery-arrow svg{width:14px;height:14px}
.gallery-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:.6rem;overflow-x:auto;padding-bottom:.25rem;-ms-overflow-style:none;scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
  aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#E7E7E7;
  border:2px solid transparent;transition:border-color .2s;
}
.gallery-thumb[aria-current="true"]{border-color:var(--ink)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:80;background:rgba(26,25,21,.92);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-img-wrap{width:min(92vw,900px);max-height:88vh;display:grid;place-items:center}
.lightbox-img-wrap img{max-width:100%;max-height:88vh;object-fit:contain;display:block}
.lightbox-close{
  position:absolute;top:1.25rem;right:1.25rem;width:44px;height:44px;border-radius:50%;
  background:var(--bone);display:grid;place-items:center;
}
.lightbox .gallery-arrow{background:var(--bone)}
.lightbox .gallery-arrow--prev{left:1rem}
.lightbox .gallery-arrow--next{right:1rem}

/* ---- buy box ---- */
.buybox{display:grid;gap:1.1rem;align-content:start}
.buybox h1{font-stretch:114%;font-weight:640;text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.05}
.buybox .price-row{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.buybox .price{font-stretch:112%;font-weight:640;font-size:1.6rem}
.buybox .availability{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.buybox .availability.in-stock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#3f6b46;margin-right:.5rem}
.buybox .availability.out-of-stock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8a3b2e;margin-right:.5rem}
.buybox .availability.out-of-stock{color:#8a3b2e}
.buybox-field{display:grid;gap:.6rem}
.buybox-field .field-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.qty-row{display:flex;align-items:center;gap:.75rem}
.qty-select{
  display:inline-flex;align-items:center;border:1.5px solid rgba(26,25,21,.22);border-radius:8px;overflow:hidden;
}
.qty-btn{width:2.6rem;height:2.6rem;font-size:1.1rem;display:grid;place-items:center;transition:background .2s}
.qty-btn:hover{background:rgba(26,25,21,.06)}
.qty-value{min-width:2.4rem;text-align:center;font-family:var(--font-mono);font-size:.95rem}
.product-desc{color:var(--stone);max-width:38rem}
.wholesale-teaser{
  border:var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;display:grid;gap:.7rem;
  background:var(--paper);margin-top:.5rem;
}
.wholesale-teaser h2{font-size:1rem;font-stretch:110%;font-weight:640;text-transform:uppercase}
.wholesale-teaser p{color:var(--stone);font-size:.92rem}
.wholesale-teaser .btn{justify-self:start;padding:.75rem 1.4rem;font-size:.88rem}
.buybox-trust{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.04em;color:var(--stone);
}
.product-crosssell{margin-top:.25rem;font-size:.92rem}
.product-crosssell a{text-decoration:underline}

/* ---- product-page-only sections ---- */
.product-specs{margin-top:clamp(3rem,7vw,5rem)}
.product-lookbook-strip{margin-top:clamp(2.5rem,6vw,4rem)}

/* ============================================================
   WHOLESALE PAGE
   ============================================================ */
.wholesale-hero{padding-block:clamp(2.5rem,6vw,4.5rem) 1rem}
.wholesale-audience{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr);margin-top:1.5rem}
.wholesale-audience li{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;
  padding:.6rem 0;border-bottom:var(--line);
}
.wholesale-form{display:grid;gap:1.1rem;max-width:42rem;margin-top:2rem}
.wholesale-form .form-row{display:grid;gap:.45rem}
.wholesale-form .form-row--2{display:grid;gap:1.1rem}
.wholesale-form label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.wholesale-form input,.wholesale-form select,.wholesale-form textarea{
  padding:.85rem 1rem;border-radius:8px;border:1.5px solid rgba(26,25,21,.22);
  background:var(--bone);font:inherit;font-size:.95rem;color:var(--ink);width:100%;
}
.wholesale-form textarea{min-height:7rem;resize:vertical}
.wholesale-form input:focus,.wholesale-form select:focus,.wholesale-form textarea:focus{outline:2px solid var(--ink);outline-offset:2px}
.wholesale-form .btn{justify-self:start;margin-top:.5rem}
.wholesale-msg{font-family:var(--font-mono);font-size:.85rem;color:var(--ink);margin-top:1rem}
.wholesale-msg.is-error{color:#8a3b2e}

@media (min-width:760px){
  .product-layout{grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start}
  .buybox{position:sticky;top:6.5rem}
  .wholesale-form .form-row--2{grid-template-columns:1fr 1fr}
}

/* ---------- garment motion (cards + gallery + GIM section) ---------- */
.pcard-motion{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:2;pointer-events:none;transition:opacity .35s var(--ease);
}
.pcard-motion.is-on{opacity:1}
.pcard-figure.has-motion .pcard-hover-reveal{display:none}

.gallery-video{position:absolute;inset:0;background:#E7E7E7;z-index:1}
.gallery-video-el{width:100%;height:100%;object-fit:contain;object-position:center;display:block}

.motion-toggle{
  position:absolute;right:.9rem;bottom:.9rem;z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--ink);
  transition:background .2s;
}
.motion-toggle:hover{background:var(--bone)}
.motion-toggle svg{width:14px;height:14px}
.motion-toggle .icon-pause{display:none}
.motion-toggle.is-playing .icon-play,.is-playing .motion-toggle .icon-play{display:none}
.motion-toggle.is-playing .icon-pause,.is-playing .motion-toggle .icon-pause{display:block}

.motion-tag{
  position:absolute;top:.9rem;left:.9rem;z-index:3;background:var(--bone);
  padding:.32rem .65rem;border-radius:5px;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;
}

.gallery-thumb--video{position:relative}
.thumb-motion{
  position:absolute;right:4px;bottom:4px;width:18px;height:18px;border-radius:50%;
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  display:grid;place-items:center;color:var(--ink);
}
.thumb-motion svg{width:9px;height:9px}

/* ---------- garment in motion section ---------- */
.gim{background:var(--paper)}
.gim-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:900px){.gim-grid{grid-template-columns:1.02fr .98fr;gap:4rem}}
.gim-media{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:#E7E7E7;
}
.gim-video{width:100%;height:100%;object-fit:contain;display:block}
.gim-media .figure-tag{position:absolute;left:.9rem;bottom:.9rem;color:var(--stone)}
.gim-copy{display:grid;gap:1.3rem;justify-items:start}
.gim-specs{
  display:grid;gap:.55rem;list-style:none;padding:0;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone);
}
.gim-specs li{display:flex;align-items:baseline;gap:.7rem}
.gim-specs li::before{content:"\2014";color:var(--greige)}

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

/* ---------- GSM weight comparison ---------- */
.gsm-compare{max-width:44rem;margin:0 0 3rem;display:grid;gap:1rem}
.gsm-bar{display:grid;grid-template-columns:8rem 1fr auto;align-items:center;gap:1rem}
.gsm-bar-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.gsm-bar-track{height:12px;border-radius:100px;background:var(--greige);overflow:hidden}
.gsm-bar-fill{display:block;height:100%;border-radius:100px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.gsm-compare.in .gsm-bar-fill{transform:scaleX(1)}
.gsm-bar--typical .gsm-bar-fill{background:var(--stone)}
.gsm-bar-val{font-size:.8rem;white-space:nowrap;font-weight:500}
.gsm-note{grid-column:1 / -1;color:var(--stone);font-size:.9rem;max-width:36em;margin-top:.35rem}
@media (prefers-reduced-motion:reduce){.gsm-bar-fill{transition:none;transform:scaleX(1)}}
@media (max-width:560px){.gsm-bar{grid-template-columns:5.5rem 1fr auto;gap:.6rem}.gsm-bar-label{font-size:.6rem}}

/* ---------- 404 ---------- */
.notfound{min-height:56vh;display:grid;align-content:center;text-align:center}
.notfound .wrap{display:grid;gap:1.2rem;justify-items:center}
.notfound .lede{margin-inline:auto}
.notfound .hero-ctas{justify-content:center}