/* ==========================================================================
   TENFOLD — Edition 01
   Dark store style. Two accents, both lifted out of the hero photograph.
   Accents are only ever used on type, a dot, or a rule — never a filled area.
   ========================================================================== */

@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --q { syntax: '<number>'; inherits: true; initial-value: 0; }

/* Both accents come out of the campaign photography: amber is the candle in
   the detail shot, pine is the tree line the video was filmed against. They
   are only ever used on type, a dot or a rule — never a filled area.        */
:root{
  --ground:      #0A0C0B;
  --ground-2:    #101413;
  --ink:         #EDE7DC;
  --ink-2:       #9EA5A0;
  --muted:       #6B736D;
  --amber:       #E8913C;
  --teal:        #5E8A6B;   /* pine */

  --hair:        rgba(237,231,220,.13);
  --hair-soft:   rgba(237,231,220,.07);
  --hair-strong: rgba(237,231,220,.26);

  --display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --text:    'Sora', ui-sans-serif, system-ui, sans-serif;

  --ease:      cubic-bezier(.22,.61,.16,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-card: cubic-bezier(.32,.72,0,1);

  --nav-h: 58px;
  --gutter: clamp(20px, 4.4vw, 76px);
  --maxw: 1440px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background: var(--ground);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size:15px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden — overflow:hidden on the body turns it into a scroll
     container and kills position:sticky, which the portal depends on */
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background: rgba(232,145,60,.26); color: var(--ink); }

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

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:8px; left:8px; z-index:120;
  transform:translateY(-160%);
  background:var(--ground-2); color:var(--ink);
  border:1px solid var(--hair); border-radius:999px;
  padding:10px 18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ transform:none; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

section{ scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ------------------------------------------------------------- type --- */

.eyebrow{
  margin:0 0 26px;
  font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink-2);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background: var(--amber); flex:none;
}
.eyebrow .sl{ color: var(--muted); }

.h2{
  margin:0;
  font-family: var(--display);
  font-weight:700;
  font-size: clamp(34px, 5.2vw, 74px);
  line-height:.98;
  letter-spacing:-.03em;
}

.lede{
  margin:26px 0 0;
  max-width:38ch;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--ink-2);
  line-height:1.68;
}

.sep{ color: var(--muted); }

kbd{
  font-family: var(--text); font-size:10.5px;
  border:1px solid var(--hair); border-radius:4px;
  padding:1px 5px; color: var(--ink-2);
}

/* ------------------------------------------------------------ pills --- */

.pill{
  display:inline-flex; align-items:center; gap:12px;
  padding:9px 9px 9px 20px;
  border:1px solid var(--hair);
  border-radius:999px;
  background: rgba(237,231,220,.02);
  font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink);
  white-space:nowrap;
  transition: border-color .5s var(--ease), color .5s var(--ease),
              background-color .5s var(--ease), transform .4s var(--ease);
}
.pill__ico{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--hair);
  border-radius:999px;
  color: var(--ink-2);
  transition: transform .5s var(--ease-out), border-color .5s var(--ease), color .5s var(--ease);
}
.pill:hover{ border-color: var(--hair-strong); color: var(--amber); background: rgba(237,231,220,.045); }
.pill:hover .pill__ico{ transform: translate(2px,-2px) scale(1.06); border-color: rgba(232,145,60,.5); color: var(--amber); }
.pill:active{ transform: scale(.985); }

.pill--lg{ padding:12px 12px 12px 26px; font-size:11px; }
.pill--lg .pill__ico{ width:30px; height:30px; }
.pill--ghost{ padding:12px 26px; border-color: var(--hair-soft); color: var(--ink-2); }
.pill--ghost:hover{ color: var(--ink); border-color: var(--hair); }

.btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }

/* ============================================================== NAV === */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height: var(--nav-h);
  background: rgba(10,12,11,.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
.nav__in{
  height:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline: var(--gutter);
  display:flex; align-items:center; gap:28px;
}
.nav__mark{
  font-family: var(--display); font-weight:800;
  font-size:15px; letter-spacing:-.02em;
  text-transform:uppercase;
  margin-right:auto;
}
.nav__mark .dot{ color: var(--amber); }

.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-size:10.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-2);
  transition: color .45s var(--ease);
}
.nav__links a:hover{ color: var(--amber); }

/* --- narrow-screen menu ------------------------------------------------ */

.nav__menu{
  display:none; position:relative;
  width:38px; height:38px; flex:none; padding:0;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--hair); border-radius:999px;
  color: var(--ink); cursor:pointer;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.nav__menu:hover{ border-color: var(--hair-strong); color: var(--amber); }
.nav__bar{
  position:absolute; left:11px; top:calc(50% - .5px);
  width:16px; height:1px; background: currentColor;
  transition: transform .45s var(--ease-out);
}
.nav__bar:nth-child(1){ transform: translateY(-3.5px); }
.nav__bar:nth-child(2){ transform: translateY(3.5px); }
html.menu-open .nav__bar:nth-child(1){ transform: rotate(45deg); }
html.menu-open .nav__bar:nth-child(2){ transform: rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  padding: calc(var(--nav-h) + 48px) var(--gutter) 48px;
  background: rgba(10,12,11,.95);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity:0; visibility:hidden;
  touch-action:none; overscroll-behavior:contain;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
html.menu-open .menu{ opacity:1; visibility:visible; }
@media (min-width: 861px){ .menu{ display:none; } }

.menu__links{ display:flex; flex-direction:column; border-top:1px solid var(--hair); }
.menu__links a{
  font-family: var(--display); font-weight:600;
  font-size: clamp(28px, 8.5vw, 46px);
  line-height:1; letter-spacing:-.03em;
  padding:20px 0; border-bottom:1px solid var(--hair);
  opacity:0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), color .4s var(--ease);
}
.menu__links a:hover{ color: var(--amber); }
html.menu-open .menu__links a{ opacity:1; transform:none; }
html.menu-open .menu__links a:nth-child(1){ transition-delay:.08s; }
html.menu-open .menu__links a:nth-child(2){ transition-delay:.14s; }
html.menu-open .menu__links a:nth-child(3){ transition-delay:.20s; }
html.menu-open .menu__links a:nth-child(4){ transition-delay:.26s; }
.menu__cta{ align-self:flex-start; }
.menu__foot{
  margin:0; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted);
}

/* ====================================================== PORTAL HERO === */

.hero{
  position:relative;
  height:100svh;                 /* no-JS / reduced-motion: a single screen */
}
html.motion .hero{ height:260vh; }

.hero__stage{
  --p:1;                          /* 0 = closed, 1 = fully open  */
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}
html.motion .hero__stage{ --p:0; }

/* layer 1 — the photograph */
.hero__image{
  position:absolute; inset:0; z-index:1;
  background-image:
    url("../../hero/hero.jpg"),
    url("../../hero/hero.png"),
    url("../../hero/hero.webp"),
    url("../img/placeholder-hero.svg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform: scale(calc(1.14 - var(--p) * .14));
  will-change: transform;
  overflow:hidden;
}

/* The still underneath is a frame of the film, so the two are the same shot.
   The video fades in once it is genuinely playing; if it never plays — no JS,
   reduced motion, a blocked autoplay, a phone on Low Power Mode — the still
   stays and nothing about the page looks unfinished. */
.hero__vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity .9s var(--ease);
  pointer-events:none;
}
.hero__vid.is-playing{ opacity:1; }

/* layer 2 — duotone wash, pulled from the same two accents */
.hero__duo{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(122deg, var(--teal) 0%, rgba(94,138,107,0) 46%, rgba(232,145,60,0) 54%, var(--amber) 100%);
  mix-blend-mode: overlay;
  opacity: calc(var(--p) * .5);
}

/* layer 3 — radial veil */
.hero__veil{
  position:absolute; inset:0; z-index:3;
  /* the film is bright daylight; without a real veil the bone type and the
     corner metadata sit on sunlit cloth and stop being readable */
  background:
    radial-gradient(118% 86% at 50% 46%, rgba(10,12,11,.12) 18%, rgba(10,12,11,.66) 66%, rgba(10,12,11,.96) 100%),
    linear-gradient(to bottom, rgba(10,12,11,.72) 0%, rgba(10,12,11,0) 24%),
    linear-gradient(to top, rgba(10,12,11,.78) 0%, rgba(10,12,11,0) 22%);
}

/* layer 4 — the two panels */
.hero__panel{
  position:absolute; top:0; bottom:0; z-index:4;
  width:50.6%;
  background: var(--ground);
  will-change: transform;
}
.hero__panel--l{ left:0;  transform: translate3d(calc(var(--p) * -112%),0,0); }
.hero__panel--r{ right:0; transform: translate3d(calc(var(--p) *  112%),0,0); }

/* layer 5 — the two accent dots */
.hero__dot{
  position:absolute; z-index:5;
  top:50%; left:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:999px;
  will-change: transform;
}
.hero__dot--a{
  background: radial-gradient(circle, var(--amber) 0 38%, rgba(232,145,60,.42) 55%, rgba(232,145,60,0) 78%);
  width:22px; height:22px; margin:-11px 0 0 -11px;
  transform: translate3d(calc(-14px + var(--p) * -33vw), calc(-84px + var(--p) * -27vh), 0);
}
.hero__dot--b{
  background: radial-gradient(circle, var(--teal) 0 38%, rgba(94,138,107,.5) 55%, rgba(94,138,107,0) 78%);
  width:22px; height:22px; margin:-11px 0 0 -11px;
  transform: translate3d(calc(14px + var(--p) * 33vw), calc(84px + var(--p) * 27vh), 0);
}

/* layer 6 — the wordmark */
.hero__title{
  position:absolute; z-index:6;
  top:50%; left:0; right:0;
  margin:0;
  display:flex; justify-content:center;
  transform: translateY(-50%) scale(calc(1 + var(--p) * .18));
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(30px, 7.8vw, 138px);
  line-height:.86;
  letter-spacing: calc(.014em + var(--p) * -.05em);
  white-space:nowrap;
  will-change: transform, letter-spacing;
}
.hero__t{ display:block; will-change:transform; }
.hero__t--a{ transform: translate3d(calc(var(--p) * -32%),0,0); }
.hero__t--b{ transform: translate3d(calc(var(--p) *  32%),0,0); }

/* corner metadata */
.hero__meta{
  position:absolute; z-index:7; margin:0;
  font-size:10.5px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink-2);
}
.hero__meta--tl{ top: calc(var(--nav-h) + 26px); left: var(--gutter); }
.hero__meta--tr{ top: calc(var(--nav-h) + 26px); right: var(--gutter); text-align:right; }
.hero__meta--bl{ bottom:30px; left: var(--gutter); }
.hero__meta--br{ bottom:30px; right: var(--gutter); text-align:right; color: var(--muted);
  opacity: calc(1 - var(--p)); }
.hero__meta .arw{ display:inline-block; margin-left:6px; color: var(--amber); }
html.motion .hero__meta .arw{ animation: nudge 2.6s var(--ease) infinite; }
@keyframes nudge{ 0%,72%,100%{ transform:translateY(0); opacity:.85 } 84%{ transform:translateY(4px); opacity:1 } }

/* ==================================================== STATEMENT FOLD === */

.say{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  border-top:1px solid var(--hair-soft);
}
.say__in{ position:relative; padding-block: clamp(96px, 14vh, 190px); }

.say__round{
  position:absolute; z-index:0;
  top:50%; right: calc(var(--gutter) * -1 - 3vw);
  width: min(48vw, 540px); aspect-ratio:1;
  border-radius:50%;
  background-image:
    url("../../hero/round.jpg"),
    url("../../hero/round.png"),
    url("../img/placeholder-round.svg");
  background-size:cover; background-position:center;
  opacity:.46;
  transform: translate3d(0, calc(-50% + var(--q) * -80px), 0) rotate(calc(var(--q) * 22deg));
  will-change: transform;
  pointer-events:none;
}

.say__text{
  position:relative; z-index:1;
  margin:0;
  max-width:22ch;
  font-family: var(--display);
  font-weight:600;
  font-size: clamp(24px, 3.6vw, 52px);
  line-height:1.16;
  letter-spacing:-.025em;
}
.say__text em{ font-style:normal; color: var(--amber); }

.say__note{
  position:relative; z-index:1;
  margin:38px 0 0; max-width:32ch;
  color: var(--muted);
  font-size:13.5px;
}

.say__num{
  position:absolute; z-index:0;
  left: var(--gutter); bottom: clamp(28px, 5vh, 64px);
  margin:0;
  font-family: var(--display); font-weight:800;
  font-size: clamp(84px, 13vw, 200px);
  line-height:.78;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke: 1px var(--hair-strong);
  pointer-events:none;
}

/* ========================================================= RELEASES === */

.rel{ padding-block: clamp(110px, 16vh, 200px); border-top:1px solid var(--hair-soft); }
.rel__in{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
  gap: clamp(48px, 7vw, 110px);
  align-items:center;
}
.rel__say{ min-width:0; }
/* the padding is the room the fanned-out cards need — without it the stack
   pushes past the gutter and the page scrolls sideways on a phone */
.rel__deck{ min-width:0; justify-self:end; width:100%; max-width:600px; padding-right:80px; }

/* ---- the deck ---- */

.deck{
  position:relative;
  width:100%; aspect-ratio: 4 / 5;   /* garments hang portrait, not square */
  touch-action: pan-y;
  outline-offset:14px;
}

.card{
  position:absolute; inset:0;
  --i:0;
  z-index: calc(50 - var(--i));
  padding:10px;
  border:1px solid var(--hair);
  border-radius:20px;
  background: var(--ground-2);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(237,231,220,.055);
  transform-origin: 50% 100%;
  transform:
    translate3d(calc(var(--i) * 17px), calc(var(--i) * -13px), 0)
    scale(calc(1 - var(--i) * .026))
    rotate(calc(var(--i) * -2.1deg));
  opacity: clamp(0, calc(1.55 - var(--i) * .31), 1);
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
}
html.motion .card{
  transition: transform .62s var(--ease-card), opacity .5s var(--ease);
}
.card.is-top{ pointer-events:auto; cursor:grab; }
.card.is-top:active{ cursor:grabbing; }
.card.is-drag{ transition:none !important; }
.card.is-mute{ transition:none !important; }

.card__art{
  position:absolute; inset:10px;
  border-radius:11px;
}

/* Garment photography lives here, not in the markup: a url() inside a custom
   property resolves against the stylesheet that USES it, not the document, so
   inline values silently 404 under assets/css/. One rule per piece, shared by
   the deck, the shop grid and the bag thumbnails. Real photograph first,
   generated placeholder last — CSS paints the first layer that loads.        */
.art{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#0d100f;
}
.art[data-art="L01"]{ background-image:url("../../looks/look-01-ready.jpg"),   url("../img/placeholder-look.svg"); }
.art[data-art="L02"]{ background-image:url("../../looks/look-02-cords.jpg"),   url("../img/placeholder-look.svg"); }
.art[data-art="L03"]{ background-image:url("../../looks/look-03-boots.jpg"),   url("../img/placeholder-look.svg"); }
.art[data-art="L04"]{ background-image:url("../../looks/look-04-club.jpg"),    url("../img/placeholder-look.svg"); }
.art[data-art="L05"]{ background-image:url("../../looks/look-05-grass.jpg"),   url("../img/placeholder-look.svg"); }
.art[data-art="L06"]{ background-image:url("../../looks/look-06-sun.jpg"),     url("../img/placeholder-look.svg"); }
.art[data-art="D01"]{ background-image:url("../../looks/detail-01-stitch.jpg"),url("../img/placeholder-look.svg"); }
/* the bag thumbnail keys off the product code, not a look */
.art[data-art="SET"]{ background-image:url("../../looks/look-01-ready.jpg"),   url("../img/placeholder-look.svg"); }
.card__art::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(to top, rgba(8,10,12,.94) 0%, rgba(8,10,12,.72) 26%, rgba(8,10,12,0) 58%);
}
.card__body{
  position:absolute; z-index:1;
  left:28px; right:28px; bottom:26px;
}
.card__code{
  margin:0 0 12px;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--amber);
}
.card__title{
  margin:0;
  font-family: var(--display); font-weight:700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height:1.02; letter-spacing:-.025em;
}
.card__spec{ margin:9px 0 0; font-size:13px; color: var(--ink-2); }
.card__price{
  margin:8px 0 0;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.deck__hint{
  margin:32px 0 0;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted);
}
.deck__dots{
  list-style:none; display:flex; gap:7px;
  margin:16px 0 0; padding:0;
}
.deck__dots li{
  width:5px; height:5px; border-radius:999px;
  background: var(--hair-strong);
  transition: background-color .5s var(--ease), transform .5s var(--ease);
}
.deck__dots li.on{ background: var(--amber); transform: scale(1.35); }

/* =========================================================== ROSTER === */

.ros{ padding-block: clamp(100px, 14vh, 180px); border-top:1px solid var(--hair-soft); }
.sechead{ margin-bottom: clamp(54px, 7vh, 96px); }

.ros__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.ros__row{
  display:grid;
  grid-template-columns: 210px minmax(0,1fr) auto auto;
  align-items:baseline;
  gap:24px 32px;
  padding: clamp(22px, 3vh, 34px) 0;
  border-bottom:1px solid var(--hair);
}
.ros__tag{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--amber);
}
.ros__spec{ font-size:12.5px; color: var(--ink-2); white-space:nowrap; }
.ros__name{
  font-family: var(--display); font-weight:600;
  font-size: clamp(24px, 3.4vw, 46px);
  line-height:1; letter-spacing:-.03em;
  transition: transform .55s var(--ease-out), color .5s var(--ease);
}
.ros__row:hover .ros__name{ transform: translateX(10px); }
.ros__n{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-2); text-align:right;
}
.ros__foot{ margin:26px 0 0; font-size:11px; letter-spacing:.1em; color: var(--muted); }

/* ============================================================ DATES === */

.dat{ padding-block: clamp(100px, 14vh, 180px); border-top:1px solid var(--hair-soft); }

.dat__table{ width:100%; border-collapse:collapse; text-align:left; }
.dat__table th, .dat__table td{ padding: clamp(18px,2.4vh,26px) 18px clamp(18px,2.4vh,26px) 0; }
.dat__table thead th{
  padding-top:0;
  font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color: var(--muted);
  border-bottom:1px solid var(--hair);
}
.dat__table tbody tr{ border-bottom:1px solid var(--hair); }
.dat__table tbody th[scope="row"]{
  font-family: var(--display); font-weight:600;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing:-.02em;
  color: var(--ink);
  white-space:nowrap;
  width:1%;
}
.dat__table td{ font-size:13.5px; color: var(--ink-2); }
.dat__table td:last-child, .dat__table th:last-child{ padding-right:0; text-align:right; }
.dat__table .tick{ color: var(--teal); }
.dat__table tbody tr{ transition: background-color .5s var(--ease); }
.dat__table tbody tr:hover{ background: rgba(237,231,220,.022); }

/* ============================================================ CLOSE === */

.end{
  padding-top: clamp(100px, 14vh, 180px);
  border-top:1px solid var(--hair-soft);
  overflow:hidden;
}
.end__top{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(36px, 5vw, 80px);
  align-items:end;
}
.end__fine{
  margin:30px 0 0; max-width:46ch;
  font-size:12.5px; line-height:1.72; color: var(--muted);
}
.end__btns{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }

.end__strip{
  margin-top: clamp(64px, 9vh, 120px);
  padding-top:22px;
  border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted);
}

.end__mark{
  margin: clamp(26px,4vh,54px) 0 0;
  font-family: var(--display); font-weight:800;
  font-size: clamp(44px, 12vw, 190px);
  line-height:.78;
  letter-spacing:-.045em;
  white-space:nowrap;
  text-align:center;
  color: var(--ink);
  transform: translateY(.13em);
  opacity:.94;
}

/* ======================================================== CAMPAIGN === */

.band{
  position:relative;
  height: clamp(420px, 74vh, 820px);
  overflow:hidden;
  border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
}
.band__img{
  position:absolute; inset:0;
  background-image: url("../../looks/campaign.jpg"), url("../img/placeholder-look.svg");
  background-size:cover;
  background-position: center 34%;   /* the crop that holds the garment */
  background-repeat:no-repeat;
}
.band::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,12,11,.92) 0%, rgba(10,12,11,.1) 34%, rgba(10,12,11,0) 60%),
    linear-gradient(to bottom, rgba(10,12,11,.6) 0%, rgba(10,12,11,0) 22%);
  pointer-events:none;
}
.band__line, .band__price{
  position:absolute; z-index:1; bottom:30px; margin:0;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink);
}
.band__line{ left: var(--gutter); }
.band__price{ right: var(--gutter); color: var(--amber); }

/* ============================================================ SHOP === */

.shop{ padding-block: clamp(100px, 14vh, 180px); border-top:1px solid var(--hair-soft); }

.sechead--split{
  display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:flex-end; justify-content:space-between;
}
.shop__terms{
  margin:0; max-width:34ch;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); line-height:1.9;
}

/* One product, so this is a product page rather than a grid: a gallery on one
   side, everything you need to decide on the other.                          */
.pdp{
  display:grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: clamp(40px, 5vw, 84px);
  align-items:start;
}
.pdp__gallery{ min-width:0; }
.pdp__main{
  aspect-ratio: 4 / 5;
  border:1px solid var(--hair);
  border-radius:16px;
  transition: border-color .5s var(--ease);
}
.pdp__thumbs{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:12px 0 0; padding:0;
}
.thumb{
  display:block; width:clamp(56px, 6vw, 78px); aspect-ratio: 4 / 5;
  padding:0; border:1px solid var(--hair); border-radius:9px;
  cursor:pointer;
  transition: border-color .45s var(--ease), opacity .45s var(--ease);
  opacity:.7;
}
.thumb:hover{ opacity:1; border-color: var(--hair-strong); }
.thumb.is-on{ opacity:1; border-color: var(--amber); }

.pdp__side{ min-width:0; padding-top:4px; }
.prod__code{
  margin:0 0 12px;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--amber);
}
.pdp__name{
  margin:0;
  font-family: var(--display); font-weight:700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height:1; letter-spacing:-.03em;
}
.pdp__price{
  margin:14px 0 0;
  font-size:16px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pdp__desc{
  margin:26px 0 0; max-width:44ch;
  font-size:14px; line-height:1.72; color: var(--ink-2);
}
.pdp__legend{
  padding:0; margin:0 0 12px;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color: var(--muted);
}
.pdp .sizes{ margin-top:32px; }
.pdp__note{
  margin:14px 0 0;
  font-size:11px; letter-spacing:.06em; color: var(--muted);
}
.pdp__note a{ color: var(--ink-2); border-bottom:1px solid var(--hair); }
.pdp__note a:hover{ color: var(--amber); border-bottom-color: rgba(232,145,60,.5); }
.pdp .add{ margin-top:22px; max-width:340px; }

.pdp__facts{
  list-style:none; margin:38px 0 0; padding:0;
  border-top:1px solid var(--hair);
  max-width:440px;
}
.pdp__facts li{
  display:flex; justify-content:space-between; gap:24px;
  padding:13px 0; border-bottom:1px solid var(--hair);
  font-size:12px;
}
.pdp__facts li span:first-child{
  letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
}
.pdp__facts li span:last-child{ color: var(--ink-2); text-align:right; }

/* the deck can send you here — a hairline pulse, no glow, no flashing */
.pdp.is-target .pdp__main{ border-color: var(--amber); }

/* ---- sizes ---- */

.sizes{ margin:18px 0 0; padding:0; border:0; min-width:0; display:flex; flex-wrap:wrap; gap:8px; }
.size{ position:relative; display:inline-flex; }
.size input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.size span{
  display:grid; place-items:center;
  min-width:40px; height:34px; padding:0 12px;
  border:1px solid var(--hair); border-radius:999px;
  font-size:11px; letter-spacing:.1em; color: var(--ink-2);
  transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.size input:hover + span{ border-color: var(--hair-strong); color: var(--ink); }
.size input:checked + span{ border-color: var(--amber); color: var(--amber); }
.size input:focus-visible + span{ outline:1px solid var(--amber); outline-offset:3px; }
.size.is-out span{
  color: var(--muted); border-color: var(--hair-soft);
  text-decoration: line-through; text-decoration-thickness:1px;
}
.size.is-out input{ cursor:not-allowed; }

/* the product needs a size before it can be added, and says so, once */
.needs-size .sizes{ animation: askSize .5s var(--ease); }
.needs-size .size:not(.is-out) span{ border-color: var(--amber); color: var(--amber); }
@keyframes askSize{
  0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-4px) } 75%{ transform:translateX(4px) }
}

/* ---- add / checkout ---- */

.add{
  margin-top:18px; width:100%;
  padding:13px 18px;
  background: rgba(237,231,220,.02);
  border:1px solid var(--hair); border-radius:999px;
  color: var(--ink);
  font-family: var(--text); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition: border-color .5s var(--ease), color .5s var(--ease),
              background-color .5s var(--ease), transform .35s var(--ease);
}
.add:hover{ border-color: var(--hair-strong); color: var(--amber); background: rgba(237,231,220,.05); }
.add:active{ transform: scale(.985); }
.add.is-added{ color: var(--teal); border-color: rgba(94,138,107,.55); }
.add:disabled{ color: var(--muted); border-color: var(--hair-soft); cursor:not-allowed; }
.add:disabled:hover{ background: rgba(237,231,220,.02); color: var(--muted); }
.add--lg{ margin-top:0; padding:16px 18px; font-size:11px; }

/* ============================================================= BAG === */

.bag-btn{ display:none; }
html.js .bag-btn{ display:inline-flex; }
.bag-count{
  font-size:10px; letter-spacing:0; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bag-btn.has-items .bag-count{ border-color: rgba(232,145,60,.55); color: var(--amber); }

.scrim{
  position:fixed; inset:0; z-index:105;
  background: rgba(6,8,9,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none;
  touch-action:none; overscroll-behavior:contain;
  transition: opacity .45s var(--ease);
}
html.bag-open .scrim{ opacity:1; pointer-events:auto; }

.bag{
  position:fixed; top:0; right:0; bottom:0; z-index:106;
  width: min(420px, 100vw);
  display:flex; flex-direction:column;
  background: var(--ground-2);
  border-left:1px solid var(--hair);
  transform: translateX(101%);
  visibility:hidden;
  overscroll-behavior: contain;
  transition: transform .55s var(--ease-out), visibility .55s var(--ease);
}
html.bag-open .bag{ transform:none; visibility:visible; }

.bag__head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; height: var(--nav-h);
  border-bottom:1px solid var(--hair);
}
.bag__title{
  margin:0;
  font-family: var(--display); font-weight:700;
  font-size:15px; letter-spacing:-.02em; text-transform:uppercase;
}
.bag__close{
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:1px solid var(--hair); border-radius:999px;
  color: var(--ink-2); cursor:pointer;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.bag__close:hover{ border-color: var(--hair-strong); color: var(--amber); }

.bag__body{ flex:1 1 auto; overflow-y:auto; padding:4px 22px 22px; }
.bag__empty{
  margin:40px 0 0;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
}

.bag__line{
  display:grid; grid-template-columns: 58px minmax(0,1fr) auto;
  gap:16px; align-items:start;
  padding:20px 0; border-bottom:1px solid var(--hair);
}
.bag__thumb{ aspect-ratio: 4 / 5; border-radius:8px; border:1px solid var(--hair); }
.bag__name{
  margin:0;
  font-family: var(--display); font-weight:600;
  font-size:16px; line-height:1.1; letter-spacing:-.02em;
}
.bag__meta{
  margin:7px 0 0;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
}
.bag__qty{ display:flex; align-items:center; gap:4px; margin:12px 0 0; }
.bag__qty button{
  width:26px; height:26px; display:grid; place-items:center;
  background:none; border:1px solid var(--hair); border-radius:999px;
  color: var(--ink-2); font-size:13px; line-height:1; cursor:pointer;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.bag__qty button:hover{ border-color: var(--hair-strong); color: var(--amber); }
.bag__qty output{
  min-width:26px; text-align:center;
  font-size:12px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.bag__right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.bag__cost{ font-size:12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bag__drop{
  background:none; border:0; padding:0;
  font-family: var(--text); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); cursor:pointer;
  border-bottom:1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.bag__drop:hover{ color: var(--amber); border-bottom-color: rgba(232,145,60,.5); }

.bag__foot{ flex:none; padding:20px 22px 24px; border-top:1px solid var(--hair); }
.bag__sums{ margin:0 0 18px; padding:0; }
.bag__sums > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:5px 0;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-2);
}
.bag__sums dt, .bag__sums dd{ margin:0; }
.bag__sums dd{ font-variant-numeric: tabular-nums; }
.bag__sums .is-total{
  margin-top:8px; padding-top:12px; border-top:1px solid var(--hair);
  color: var(--ink); font-size:12.5px;
}
.bag__note{
  margin:14px 0 0;
  font-size:10.5px; letter-spacing:.1em; line-height:1.75; color: var(--muted);
}
.bag__note.is-warn{ color: var(--amber); }

/* ========================================================== REVEALS === */
/* Default = the finished page. Only .motion introduces a "before" state,
   so the reduced-motion and no-JS renders are already complete.            */

html.motion [data-reveal]{
  opacity:0;
  transform: translateY(20px);
  filter: blur(6px);
}
html.motion [data-reveal].is-in{
  opacity:1;
  transform:none;
  filter:none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* =========================================================== NARROW === */

@media (max-width: 1080px){
  .rel__in{ grid-template-columns: minmax(0,1fr); gap:56px; }
  .rel__deck{ justify-self:start; max-width:520px; padding-right:56px; }
  .card{
    transform:
      translate3d(calc(var(--i) * 9px), calc(var(--i) * -7px), 0)
      scale(calc(1 - var(--i) * .026))
      rotate(calc(var(--i) * -1.3deg));
  }
  .ros__row{ grid-template-columns: 180px minmax(0,1fr) auto auto; gap:20px 24px; }
  .pdp{ grid-template-columns: minmax(0,1fr); gap:44px; }
  .pdp__gallery{ max-width:520px; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  html.js .nav__menu{ display:inline-flex; }
  /* without JS the overlay can never open, so keep a tight link row instead
     of leaving a phone with no navigation at all */
  html:not(.js) .nav__links{ display:flex; gap:15px; }
  html:not(.js) .nav__links a{ font-size:9.5px; letter-spacing:.08em; }
  .hero__meta--tr{ display:none; }

  .say__round{ right:-26vw; width:72vw; opacity:.2; }
  .say__text{ max-width:none; }

  .ros__row{
    grid-template-columns: minmax(0,1fr) auto;
    row-gap:10px;
  }
  .ros__tag { grid-column: 1 / -1; grid-row: 1; }
  .ros__name{ grid-column: 1;      grid-row: 2; }
  .ros__n   { grid-column: 2;      grid-row: 2; }
  .ros__spec{ grid-column: 1 / -1; grid-row: 3; white-space:normal; }
  .ros__row:hover .ros__name{ transform:none; }

  /* dates collapse to two columns per row */
  .dat__table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .dat__table, .dat__table tbody, .dat__table tr, .dat__table th, .dat__table td{ display:block; }
  .dat__table tbody tr{ padding: 22px 0; border-bottom:1px solid var(--hair); }
  .dat__table tbody th[scope="row"]{ width:auto; padding:0 0 12px; font-size:20px; }
  .dat__table tbody td{
    display:grid; grid-template-columns: 92px minmax(0,1fr);
    gap:14px; padding:5px 0; font-size:13px;
  }
  .dat__table tbody td::before{
    content: attr(data-label);
    font-size:10px; letter-spacing:.15em; text-transform:uppercase; color: var(--muted);
  }
  .dat__table td:last-child{ text-align:left; }

  .end__top{ grid-template-columns: minmax(0,1fr); }
  .end__btns{ align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
}

@media (max-width: 560px){
  .card__body{ left:22px; right:22px; bottom:20px; }
  .end__strip{ gap:10px 20px; }
  .nav__in{ gap:14px; }
  .bag-btn{ padding:9px 9px 9px 14px; gap:9px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}