:root{
  --ink:#0C1A22;
  --paper:#E9EFF1;
  --sterile:#DCE6E9;
  --scrub:#0F8C7E;
  --grey:#6F818A;
  --line:rgba(12,26,34,.16);
  --font:'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --mono:'SF Mono',Consolas,'Liberation Mono',Menlo,monospace;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:var(--font);-webkit-font-smoothing:antialiased;
  background:var(--paper);
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:.95}
p{margin:0;line-height:1.55}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.eyebrow,.manifesto__eyebrow{
  font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);margin:0 0 20px
}



/* hero */
.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(64px,11vw,140px) clamp(20px,5vw,56px) clamp(48px,7vw,88px);
}
.hero__title{font-size:clamp(34px,9.1vw,124px);margin-bottom:32px;line-height:1.02}   /* sized to the longest line, "is not a secret." */
.btn{
  display:inline-block;border:1px solid var(--ink);border-radius:999px;
  padding:13px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:.18s
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink);width:100%;text-align:center}
.btn--solid:hover{opacity:.84;background:var(--ink);color:var(--paper)}

/* ---------------------------------------------------------------------
   Everything below the hero is opaque. The tablet field is fixed to the
   viewport, so while it fades it was showing straight through the products
   — main and .strip were both transparent and the back layer sits at
   z-index 0 under them. An opaque ground occludes it outright, instead of
   relying on the fade winning a race against the scroll.
   The hero itself stays transparent; that is the whole point of it.
   --------------------------------------------------------------------- */
.strip,.manifesto,.care,.foot{position:relative;z-index:1}
.strip,.care{background:var(--paper)}      /* .manifesto and .foot bring their own ink */

/* grid */
.strip{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,56px) clamp(64px,9vw,120px)}
.strip__head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;
  padding-bottom:8px;margin-bottom:44px}
.strip__head h2{font-size:clamp(26px,3.4vw,40px)}
.strip__head p{font-size:13px;color:var(--grey)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(20px,3vw,42px)}
.card{text-align:left;display:flex;flex-direction:column}
.card__media{
  position:relative;background:var(--sterile);border-radius:3px;overflow:hidden;aspect-ratio:1/1.2;
  display:grid;place-items:center;transition:background .25s
}
.card:hover .card__media{background:#D3E0E4}
.card__media img{width:100%;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.045)}

/* ---------------------------------------------------------------------
   Both colourways on one card. The same garment is cut down the middle:
   white to the left of the divider, black to the right. At rest the divider
   sits dead centre, so the card gives each colourway equal billing, and on a
   fine pointer it follows the cursor — you wipe the shirt from one colourway
   to the other instead of hunting for a swatch.
   --------------------------------------------------------------------- */
.card__media{--split:50%}
.card__tee{grid-area:1/1}                       /* both tees, one cell, exact overlap */
.card__tee--k{clip-path:inset(0 0 0 var(--split))}
.card__edge{
  position:absolute;top:0;bottom:0;left:var(--split);width:1px;z-index:3;
  background:linear-gradient(180deg,var(--scrub),#16306E);
  opacity:.5;transition:opacity .3s;pointer-events:none;
  transform:translateZ(46px);                   /* same plane as the tees, or it parallaxes */
}
.card:hover .card__edge{opacity:.9}
.card__way{
  position:absolute;bottom:10px;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);opacity:0;transition:opacity .3s;
}
.card__way--w{left:12px}
.card__way--k{right:12px}
.card:hover .card__way{opacity:.75}

/* touch: the finger drags the divider (app.js). pan-y keeps vertical page
   scrolling with the browser and hands sideways movement to the script. */
.card__media{touch-action:pan-y}
.card.is-sliding .card__edge{opacity:.95}
.card.is-sliding .card__way{opacity:.8}
/* no hover on a phone, so the labels and divider never lit up; show them */
@media (hover:none){
  .card__way{opacity:.55}
  .card__edge{opacity:.8}
}
.card__row{display:flex;justify-content:space-between;gap:12px;margin-top:16px;align-items:baseline}
.card__name{font-size:17px;font-weight:700;letter-spacing:.02em}
.card__price{font-size:14px;color:var(--grey)}
.card__inn{margin-top:6px;font-size:11px;letter-spacing:.04em;color:var(--grey);line-height:1.5;font-family:var(--mono)}

/* manifesto */
/* the closing line is the thesis, so it is set like one: larger, its own air */
.manifesto__close{
  margin-top:1.6em;font-size:clamp(19px,2.1vw,26px);line-height:1.4;
  font-weight:700;letter-spacing:-.01em;
}

.manifesto{background:var(--ink);color:var(--paper);padding:clamp(72px,11vw,148px) clamp(20px,5vw,56px)}
.manifesto__inner{max-width:760px;margin:0 auto}
.manifesto__eyebrow{color:rgba(233,239,241,.52)}
.manifesto h2{font-size:clamp(28px,4.6vw,58px);margin-bottom:36px}
.manifesto p+p{margin-top:20px}
.manifesto p{color:rgba(233,239,241,.76);font-size:clamp(15px,1.6vw,18px)}


/* care */
.care{
  max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,56px) clamp(64px,9vw,120px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px
}
.care h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.care p{font-size:14px;color:#3C4E57;max-width:34ch}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,72px) clamp(20px,5vw,56px) 40px}
.foot__top{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
  padding-bottom:28px}
.foot__mark{font-weight:700;letter-spacing:.14em}
.foot__top nav{display:flex;gap:22px;font-size:13px}
.foot__legal{margin-top:28px;max-width:78ch;font-size:11px;line-height:1.7;color:rgba(233,239,241,.5);font-family:var(--mono)}
.foot__copy{margin-top:16px;font-size:11px;color:rgba(233,239,241,.4);font-family:var(--mono)}

/* sheet */
.sheet{position:fixed;inset:0;z-index:60}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(12,26,34,.55);animation:fade .22s ease}
.sheet__panel{
  position:absolute;top:0;right:0;height:100%;width:min(560px,100%);
  background:var(--paper);overflow-y:auto;padding:clamp(24px,4vw,44px);
  animation:slidein .28s cubic-bezier(.2,.7,.3,1)
}
/* Close. It was a 32px target with no stacking order, so the product image
   loaded after it painted over its lower half and swallowed the tap: on a
   phone you had to aim above the X. Now it is 48px (the size a fingertip
   needs), sits above the content, and stays pinned while the panel scrolls.
   The negative margins keep it from pushing the content down. */
.sheet__x{
  position:sticky;top:10px;z-index:5;
  display:grid;place-items:center;
  width:48px;height:48px;margin:-12px -12px -36px auto;
  font-size:18px;line-height:1;border-radius:50%;
  background:rgba(233,239,241,.88);
  -webkit-tap-highlight-color:transparent;
}
@keyframes fade{from{opacity:0}}
@keyframes slidein{from{transform:translateX(24px);opacity:0}}

.pd__media{background:var(--sterile);border-radius:3px;display:grid;place-items:center;margin-bottom:26px;overflow:hidden}
.pd__media img{width:100%}
.pd__class{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--scrub);font-weight:700}
.pd h2{font-size:clamp(32px,6vw,50px);margin:10px 0 8px}
.pd__price{font-size:16px;color:var(--grey);margin-bottom:22px}
.pd__story{font-size:15px;color:#3C4E57;margin-bottom:26px}
.pd__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin:26px 0 10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:13px;transition:.16s}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.inn{margin-top:4px}
.inn li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:13px}
.inn li b{font-weight:700;letter-spacing:.02em;text-transform:lowercase}
.inn li span{color:var(--grey)}
.pd .btn--solid{margin-top:30px}
.pd__fine{margin-top:18px;font-size:11px;line-height:1.7;color:var(--grey)}

.cart__row{display:flex;gap:14px;align-items:center;padding:16px 0}
.cart__row img{width:64px;background:var(--sterile);border-radius:2px}
.cart__meta{flex:1;font-size:13px}
.cart__meta small{display:block;color:var(--grey);margin-top:3px}
.cart__rm{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.cart__rm:hover{color:var(--ink)}
.cart__total{display:flex;justify-content:space-between;margin-top:24px;font-size:15px;font-weight:700}
.cart__empty{color:var(--grey);font-size:14px;padding:32px 0}


/* content rides above the trace; solid sections mask it as they should */
main,.foot{position:relative;z-index:1}

/* soft light following the pointer — see halo() in app.js.
   Eased by CSS transition rather than a rAF loop: nothing runs per frame,
   and the two layers lag by different amounts so the light has depth. */
.halo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.halo i{
  position:absolute;top:0;left:0;border-radius:50%;
  transform:translate3d(50vw,38vh,0) translate(-50%,-50%);
  will-change:transform;
}
.halo__wide{
  width:1120px;height:1120px;
  background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,.14) 52%,transparent 76%);
  transition:transform 2.4s cubic-bezier(.22,.61,.36,1);
}
.halo__core{
  width:620px;height:620px;
  background:radial-gradient(closest-side,rgba(15,140,126,.15),rgba(15,140,126,.05) 55%,transparent 78%);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){.halo i{transition:none}}

/* =====================================================================
   INTERACTIVE LAYER
   ===================================================================== */

/* The tablet field is two layers with the page between them: the bulk sits
   behind the content, and a sparse near-field layer passes in front of the
   headline. Both are inert to the pointer. */
#hero-gl,#hero-gl-front{
  position:fixed;inset:0;width:100vw;height:100vh;
  pointer-events:none;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
/* The 1.2s ease is the ENTRANCE only. Once the field is up, opacity is driven
   by scroll position, and a transition there means a fast scroll outruns the
   fade: the tablets are still dissolving over the products two screens down.
   hero.js adds this class as soon as the entrance is spent. */
#hero-gl.is-live,#hero-gl-front.is-live{transition:none}
#hero-gl{z-index:0}
#hero-gl-front{z-index:2}

/* dose meter — scroll progress as a filling column */
.dose{
  position:fixed;top:0;right:0;width:3px;height:100vh;z-index:50;
  background:rgba(12,26,34,.07);pointer-events:none;
}
.dose i{
  display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--scrub),#16306E);
}

/* hero sits above the field and gets a little taller to show it off */
/* The headline sits at the foot of the field rather than floating in the
   middle of it. Centring was right when the hero also carried an eyebrow, a
   lede and a button; with just the headline left it reserved ~500px of void
   above the shop. */
.hero{
  position:relative;z-index:1;min-height:82vh;
  display:flex;flex-direction:column;justify-content:flex-end;
}

/* headline: each word rises out of its own mask */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero__title .line > span{
  display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s ease;
}
.no-motion .hero__title .line > span{transform:none;opacity:1}
.hero__title.is-in .line > span{transform:translateY(0);opacity:1}

/* generic scroll reveal */
.motion .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.motion .reveal.is-in{opacity:1;transform:none}

/* product cards: 3D tilt, sheen that follows the cursor, floating tee */
.card__media{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .5s;
  --gx:50%;--gy:50%;
}
.card:hover .card__media{box-shadow:0 30px 60px -30px rgba(12,26,34,.45)}
.card__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(340px circle at var(--gx) var(--gy),
             rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,transparent 70%);
  opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;
}
.card:hover .card__media::after{opacity:1}
.card__media img{transform:translateZ(46px)}
.card:hover .card__media img{transform:translateZ(46px) scale(1.045)}

/* magnetic controls need a transition to spring back */
.btn,.opt{transition:transform .35s cubic-bezier(.16,1,.3,1),background .18s,color .18s,border-color .18s}

@media (prefers-reduced-motion:reduce){
  #hero-gl{transition:none}
  .card__media,.card__media img{transform:none!important;transition:none}
  .card__edge{transform:none}
  .dose i{transition:none}
}


/* =====================================================================
   CHECKOUT — see checkout.js
   ===================================================================== */
.co{position:fixed;inset:0;z-index:80}
.co__scrim{position:absolute;inset:0;background:rgba(12,26,34,.62);opacity:0;transition:opacity .4s ease}
.co.is-open .co__scrim{opacity:1}
.co__panel{
  position:absolute;inset:0;display:grid;grid-template-columns:320px 1fr;
  background:var(--paper);
  transform:translateY(18px);opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.co.is-open .co__panel{transform:none;opacity:1}

/* left rail — the running script */
.co__rail{
  background:var(--ink);color:var(--paper);padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:28px;overflow-y:auto;position:relative;
}
.co__mark{font-weight:700;letter-spacing:.16em;font-size:13px}
.co__steps{display:flex;flex-direction:column;gap:2px;counter-reset:s}
.co__steps li{
  display:flex;gap:14px;align-items:baseline;padding:9px 0;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(233,239,241,.34);transition:color .35s
}
.co__steps li b{font-family:var(--mono);font-size:11px;font-weight:400}
.co__steps li.is-done{color:rgba(233,239,241,.6)}
.co__steps li.is-now{color:var(--paper)}
.co__steps li.is-now b{color:var(--scrub)}

.co__dose{height:3px;background:rgba(233,239,241,.14);border-radius:2px;overflow:hidden}
.co__dose i{
  display:block;height:100%;width:100%;transform-origin:left;
  background:linear-gradient(90deg,var(--scrub),#8FD9CE);
  transition:transform .6s cubic-bezier(.16,1,.3,1)
}
.co__dose i{transform:scaleX(0)}
.co__dose i[style*="scaleY"]{transform:none}

.co__totals{margin-top:auto;font-size:13px;display:flex;flex-direction:column;gap:9px}
.co__totals>div{display:flex;justify-content:space-between;gap:12px;color:rgba(233,239,241,.72)}
.co__totals .co__off{color:var(--scrub)}
.co__grand{font-size:17px;font-weight:700;color:var(--paper)!important;padding-top:12px}
.co__vat{font-size:10px;line-height:1.6;color:rgba(233,239,241,.4);font-family:var(--mono)}

/* right side */
.co__main{position:relative;overflow-y:auto;display:flex;flex-direction:column}
.co__close{position:absolute;top:18px;right:20px;font-size:15px;padding:10px;z-index:2}
.co__body{padding:clamp(28px,4.5vw,64px);flex:1;max-width:720px;width:100%}
.co__body h2{font-size:clamp(30px,4.5vw,52px);margin-bottom:10px}
.co__lede{color:#3C4E57;font-size:15px;margin-bottom:32px}
.co__hint{margin-top:20px;font-size:12px;color:var(--scrub);font-family:var(--mono)}

.co__lines li{
  display:grid;grid-template-columns:62px 1fr auto auto;gap:16px;align-items:center;
  padding:16px 0;border-top:1px solid rgba(12,26,34,.1)
}
.co__lines img{width:62px;border-radius:2px;background:var(--sterile)}
.co__line b{display:block;font-size:15px;letter-spacing:.02em}
.co__line small{color:var(--grey);font-size:12px}
.co__qty{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px}
.co__qty button{width:28px;height:28px;border-radius:50%;font-size:15px;line-height:1}
.co__qty button:hover{background:var(--ink);color:var(--paper)}
.co__qty span{min-width:22px;text-align:center;font-size:13px;font-family:var(--mono)}
.co__lp{font-size:14px;font-family:var(--mono)}
.co__rm{grid-column:2/-1;justify-self:start;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.co__rm:hover{color:var(--ink)}

/* form */
.co__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.co__f{display:flex;flex-direction:column;gap:7px}
.co__f.is-wide{grid-column:1/-1}
.co__flabel{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.co__f input{
  font:inherit;font-size:15px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:9px 0;border-radius:0;
  transition:border-color .2s
}
.co__f input:focus{outline:none;border-bottom-color:var(--scrub);border-bottom-width:2px;padding-bottom:8px}
.co__f.has-err input{border-bottom-color:#D4145A}
.co__err{display:none;font-style:normal;font-size:11px;color:#D4145A}
.co__f.has-err .co__err{display:block}
.co__brandtag{margin-top:14px;font-size:11px;font-family:var(--mono);color:var(--scrub);letter-spacing:.1em}
.co__note{
  margin-top:28px;font-size:11px;line-height:1.7;color:var(--grey);
  border-left:2px solid var(--line);padding-left:14px;max-width:52ch
}

.co__foot{
  position:sticky;bottom:0;display:flex;justify-content:space-between;gap:16px;
  padding:20px clamp(28px,4.5vw,64px);background:var(--paper);
  border-top:1px solid rgba(12,26,34,.08)
}
.co__next[disabled]{opacity:.3;pointer-events:none}
.co.is-working .co__panel{pointer-events:none}

/* the dispensing label */
.co__label{
  background:#fff;border-radius:3px;padding:30px 32px;max-width:440px;
  box-shadow:0 30px 60px -34px rgba(12,26,34,.5);
  animation:coPrint .7s cubic-bezier(.16,1,.3,1) both
}
@keyframes coPrint{from{transform:translateY(-14px) scaleY(.94);opacity:0;transform-origin:top}}
.co__lbars{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.co__lbars i{height:9px;background:var(--scrub)}
.co__lbars i:last-child{background:#16306E}
.co__lref{font-family:var(--mono);font-size:11px;color:var(--ink);margin-bottom:14px}
.co__label h3{font-size:30px;letter-spacing:-.02em}
.co__lsub{font-family:Georgia,'Times New Roman',serif;font-size:16px;color:var(--ink);margin:4px 0 18px}
.co__label ul{border-top:1px solid rgba(12,26,34,.12);margin-bottom:14px}
.co__label li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid rgba(12,26,34,.07);font-size:12px}
.co__label li span:last-child{color:var(--grey);font-family:var(--mono);font-size:11px}
.co__ltotal{font-size:26px;font-weight:700;letter-spacing:-.02em}
.co__laddr{margin-top:10px;font-size:11px;line-height:1.6;color:var(--grey);max-width:34ch}
.co__barcode{display:flex;align-items:flex-end;gap:2px;height:38px;margin:18px 0 8px}
.co__barcode i{background:var(--ink);height:100%;display:block}
.co__lfoot{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--grey)}
.co__done-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.co__x2{margin-top:24px}

@media (max-width:860px){
  .co__panel{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .co__rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 20px}
  .co__steps{flex-direction:row;gap:14px}
  .co__steps li span{display:none}
  .co__totals{margin:0 0 0 auto;gap:2px}
  .co__vat,.co__dose{display:none}
  .co__grid{grid-template-columns:1fr}
  .co__lines li{grid-template-columns:50px 1fr auto;gap:12px}
  .co__lp{grid-column:2/3}
}

/* printing the label is a real feature, so give it a real print sheet */
@media print{
  body>*:not(.co){display:none!important}
  .co,.co__panel,.co__main,.co__body{position:static!important;display:block!important;
    background:#fff!important;padding:0!important;overflow:visible!important}
  .co__scrim,.co__rail,.co__close,.co__foot,.co__done-actions,.co__lede,.co__body h2{display:none!important}
  .co__label{box-shadow:none;animation:none;max-width:none;padding:0}
}

/* factual "what it is for" copy, set apart from the brand voice */
.pd__purpose{
  font-size:14px;line-height:1.65;color:#3C4E57;
  border-left:2px solid var(--scrub);padding-left:15px;max-width:46ch
}

/* =====================================================================
   TURN — the garment viewer. See bindTurn() in app.js.
   ===================================================================== */
.turn{
  position:relative;width:100%;perspective:1400px;cursor:ew-resize;
  outline:none;touch-action:pan-y;
}
.turn:focus-visible{outline:2px solid var(--scrub);outline-offset:4px;border-radius:3px}
.turn__stage{
  position:relative;width:100%;aspect-ratio:1/1;
  transform-style:preserve-3d;will-change:transform;
}
.turn__face{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.turn__face--back{transform:rotateY(180deg)}
/* The faces never take the touch themselves: the drag belongs to .turn, and
   on iOS a finger held on an image otherwise offers to save the image or
   starts dragging the picture instead of turning the shirt. */
.turn__face{pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.turn.is-dragging{cursor:grabbing}

/* Front | Back switch. Its pill is driven by --f, the live rotation from
   app.js, so it slides with the shirt instead of snapping between states. */
.turn__switch{
  --f:0;
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:min(210px,72%);margin:16px auto 10px;padding:3px;
  border-radius:999px;background:rgba(12,26,34,.07);
}
.turn__pill{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  border-radius:999px;background:var(--ink);
  transform:translateX(calc(var(--f) * 100%));
}
.turn__switch button{
  position:relative;z-index:1;min-height:42px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);transition:color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.turn__switch button[aria-pressed="true"]{color:var(--paper)}

/* a soft ground shadow that shortens as the garment turns edge-on */
.turn::after{
  content:'';position:absolute;left:12%;right:12%;bottom:4%;height:22px;
  background:radial-gradient(ellipse at center,rgba(12,26,34,.28),transparent 70%);
  filter:blur(6px);z-index:-1;transition:opacity .3s
}

.turn__hint{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  background:rgba(233,239,241,.82);padding:6px 12px;border-radius:999px;
  pointer-events:none;transition:opacity .5s ease,transform .5s ease;
  animation:turnHint 2.4s ease-in-out infinite;
}
.turn__hint.is-gone{opacity:0;transform:translateX(-50%) translateY(6px);animation:none}
@keyframes turnHint{0%,100%{opacity:.5}50%{opacity:1}}

/* the media box now holds a 3D stage, so it must not clip the rotation */
.pd__media{overflow:visible;padding:6px 0 2px}
.pd__media img{width:100%}

@media (prefers-reduced-motion:reduce){
  .turn__hint{animation:none}
  .turn__stage{will-change:auto}
}

/* order failure: the prototype note becomes the error surface */
.co__note.is-error{border-left-color:#D4145A;color:#D4145A}

/* =====================================================================
   LEGAL — one long readable column. No hero, no motion, nothing to get
   between a person and the sentence that tells them their rights.
   ===================================================================== */
.legal{max-width:74ch;margin:0 auto;padding:clamp(28px,6vw,72px) clamp(20px,5vw,40px) clamp(56px,8vw,96px)}
.legal__back{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.legal__head h1{font-size:clamp(38px,7vw,72px);margin:22px 0 14px;letter-spacing:-.02em}
.legal__lede{font-size:clamp(15px,1.8vw,18px);color:#3C4E57;max-width:52ch}
.legal__toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin:30px 0 8px;
  padding-bottom:26px;border-bottom:1px solid rgba(12,26,34,.12)}
.legal__toc a{font-size:12px;color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.legal__toc a:hover{color:var(--ink)}
.legal section{padding-top:44px}
.legal h2{font-size:clamp(22px,3vw,30px);margin-bottom:16px;letter-spacing:-.01em}
.legal h3{font-size:15px;margin:28px 0 10px;letter-spacing:.01em}
.legal p,.legal li{font-size:15px;line-height:1.75;color:#28383F;margin-bottom:14px}
.legal ul{padding-left:20px;margin-bottom:14px}
.legal li{margin-bottom:10px}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal__block{font-family:var(--mono);font-size:13px;line-height:1.9;
  background:var(--sterile);padding:18px 20px;border-radius:3px}
.legal__form{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:#28383F;
  background:var(--sterile);padding:20px;border-radius:3px;margin:0 0 14px;
  border-left:2px solid var(--scrub)}
.legal__note{font-size:12px;color:var(--grey)}
.legal__updated{margin-top:52px;font-size:11px;color:var(--grey);font-family:var(--mono)}