/* ============================================================
   NOKTVRN — token layer
   ============================================================ */
:root{
  /* ground */
  --ink:      #0B0B0C;
  --ink-2:    #141416;
  --ink-3:    #1C1B1E;
  /* type */
  --bone:     #E7E2D9;
  --ash:      #7A736B;   /* warm-biased, never neutral */
  --ash-dim:  #46423E;
  --paper:    #F2EEE7;
  /* the one accent */
  --ferrous:  #C43D12;

  /* type stack */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --label:   "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* fluid scale */
  --fs-mega:  clamp(3.4rem, 17.2vw, 20rem);
  --fs-huge:  clamp(2.6rem, 9vw,  9rem);
  --fs-h1:    clamp(2rem, 5.4vw, 5rem);
  --fs-h2:    clamp(1.5rem, 3.2vw, 2.75rem);
  --fs-lead:  clamp(1.05rem, 1.55vw, 1.5rem);
  --fs-body:  clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-label: clamp(0.625rem, 0.72vw, 0.72rem);

  /* rhythm */
  --gut:      clamp(1.25rem, 3.2vw, 3rem);
  --sec:      clamp(6rem, 14vh, 12rem);
  --rule:     1px solid color-mix(in oklab, var(--bone) 14%, transparent);

  --ease:     cubic-bezier(.16,1,.3,1);      /* expo.out */
  --ease-io:  cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:var(--fs-body);
  font-variation-settings:"wdth" 100,"wght" 400;
  line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--ferrous); color:var(--paper); }
:focus-visible{ outline:2px solid var(--ferrous); outline-offset:3px; }

/* ---------- primitives ---------- */
.label{
  font-family:var(--label); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.18em; color:var(--ash);
  font-weight:400;
}
.label--live{ color:var(--ferrous); }
.rule{ border:0; border-top:var(--rule); }

.display{
  font-family:var(--display); font-weight:700;
  font-variation-settings:"wdth" 125,"wght" 700;
  letter-spacing:-.035em; line-height:.84;
  text-transform:uppercase; text-wrap:balance;
}

/* ---------- reveal primitives (JS adds .is-in) ---------- */
[data-reveal]{ will-change:transform,opacity,clip-path; }
[data-reveal="up"]   { transform:translateY(2.2rem); opacity:0; }
[data-reveal="left"] { transform:translateX(-3rem);  opacity:0; }
[data-reveal="right"]{ transform:translateX(3rem);   opacity:0; }
[data-reveal="wipe-up"]   { clip-path:inset(100% 0 0 0); }
[data-reveal="wipe-down"] { clip-path:inset(0 0 100% 0); }
[data-reveal="wipe-left"] { clip-path:inset(0 0 0 100%); }
[data-reveal="wipe-right"]{ clip-path:inset(0 100% 0 0); }
.is-in[data-reveal]{
  transform:none; opacity:1; clip-path:inset(0 0 0 0);
  transition:transform 1.1s var(--ease), opacity .9s var(--ease), clip-path 1.2s var(--ease);
  transition-delay:var(--d,0ms);
}

/* line split */
.split-line{ display:block; overflow:hidden; }
.split-line > span{
  display:block; transform:translateY(105%);
  transition:transform 1s var(--ease); transition-delay:var(--d,0ms);
}
.is-in .split-line > span{ transform:translateY(0); }

/* ============================================================
   PRELOADER
   ============================================================ */
#preload{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:end start; padding:var(--gut);
}
#preload .count{
  font-family:var(--display); font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(4rem,16vw,14rem); line-height:.8; letter-spacing:-.04em;
}
#preload .pl-meta{ position:absolute; top:var(--gut); left:var(--gut); }
#preload .bar{
  position:absolute; left:var(--gut); right:var(--gut); bottom:calc(var(--gut) * 2.8);
  height:1px; background:color-mix(in oklab, var(--bone) 16%, transparent);
}
#preload .bar i{ display:block; height:100%; width:0%; background:var(--ferrous); }
body.loaded #preload{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease-io) .15s;
  pointer-events:none;
}

/* ============================================================
   CURSOR
   ============================================================ */
#cursor{
  position:fixed; top:0; left:0; z-index:190; pointer-events:none;
  width:10px; height:10px; border-radius:50%; background:var(--bone);
  mix-blend-mode:difference; translate:-50% -50%;
  transition:width .4s var(--ease), height .4s var(--ease);
}
#cursor.is-lg{ width:74px; height:74px; }
@media (hover:none){ #cursor{ display:none; } }

/* ============================================================
   NAV
   ============================================================ */
/* The nav floats over photography, the black hero and the paper-coloured material
   panel. mix-blend-mode:difference handled the paper panel elegantly but collapsed
   to 2.05:1 over mid-grey imagery — and because difference is non-monotonic, no
   single scrim opacity rescues both ends. A scrim with fixed light type is
   predictable: it measures ~13:1 on every background the nav crosses. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:calc(var(--gut) * .8) var(--gut);
  isolation:isolate;
}
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; z-index:-1;
  height:calc(100% + 2.5rem);
  background:linear-gradient(to bottom,
    color-mix(in oklab, var(--ink) 94%, transparent),
    color-mix(in oklab, var(--ink) 74%, transparent) 52%,
    transparent);
  pointer-events:none;
}
.nav__links a{ color:var(--bone); }
.nav__mark{
  font-family:var(--display); font-variation-settings:"wdth" 118,"wght" 700;
  font-size:.95rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--bone);
}
.nav__links{ display:flex; gap:2.25rem; justify-self:center; }
.nav__links a{ position:relative; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* .label defaults to --ash, which is only 4.3:1 on the scrim — lift it to --bone */
.nav__cart{ grid-column:3; justify-self:end; color:var(--bone); }
@media (max-width:800px){ .nav__links{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  padding-bottom:clamp(2rem,6vh,5rem); overflow:clip;
}
.hero__stage{ position:absolute; inset:0; display:grid; place-items:center; }
/* the word — behind the centre figure */
.hero__word{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:100%; text-align:center; z-index:1;
  /* sized so APPARITION spans the viewport edge to edge without clipping */
  font-size:min(12.2vw, 20rem); color:var(--bone);
  white-space:nowrap;
}
/* the cutout trio */
.hero__figures{
  position:relative; z-index:2;
  width:min(100%, 126vh); margin-inline:auto;
  filter:contrast(1.06);
}
/* clipped copies of the word that sit IN FRONT of the outer two figures.
   The bands are measured from the real figure box in app.js — layoutHero() */
.hero__word--front{ z-index:3; pointer-events:none; }
.hero__word--l{ clip-path:inset(0 var(--band-l,57%) 0 0); }
.hero__word--r{ clip-path:inset(0 0 0 var(--band-r,58%)); }

.hero__foot{
  position:relative; z-index:4;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gut);
  align-items:end; padding-inline:var(--gut);
}
.hero__foot p{ max-width:34ch; color:var(--ash); }
.hero__foot .r{ justify-self:end; text-align:right; }
.hero__scroll{ position:absolute; left:50%; bottom:1.4rem; translate:-50% 0; z-index:4; }
@media (max-width:700px){
  .hero__foot{ grid-template-columns:1fr; gap:1.5rem; }
  .hero__foot .r{ justify-self:start; text-align:left; }
  /* The cutout carries wide empty margins, so overscale it to make the figures
     read at phone width (.hero clips the excess). auto margins collapse to 0 once
     the box is wider than its container, so centre it explicitly instead. */
  /* Drop the auto margins: they collapse to 0 once the box is wider than its
     container, which left-aligns it. With margin 0, the stage's justify-items:
     center does the centring and the overflow splits evenly. */
  .hero__figures{ width:152%; max-width:none; margin-inline:0; }
}

/* sideways reveals would push past the right edge on a phone — send them up instead */
@media (max-width:700px){
  [data-reveal="left"],[data-reveal="right"]{ transform:translateY(1.75rem); }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{ border-block:var(--rule); padding-block:.9rem; overflow:hidden; background:var(--ink); }
.ticker__track{ display:flex; width:max-content; will-change:transform; }
.ticker__track span{
  font-family:var(--display); font-variation-settings:"wdth" 110,"wght" 500;
  font-size:clamp(1.1rem,2.4vw,2rem); text-transform:uppercase;
  letter-spacing:.02em; padding-inline:1.4rem; white-space:nowrap;
  display:flex; align-items:center; gap:1.4rem;
}
.ticker__track span::after{
  content:""; width:7px; height:7px; background:var(--ferrous);
  border-radius:50%; display:block;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding-block:var(--sec); }
.manifesto__grid{
  display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr) minmax(0,20rem);
  gap:var(--gut); padding-inline:var(--gut); align-items:start;
}

/* the run index — the collection stated as a manifest, not a menu */
.runlist{ list-style:none; margin:0; padding:0; }
.runlist li{
  display:grid; grid-template-columns:2.25rem 1fr auto; gap:1rem; align-items:baseline;
  font-family:var(--label); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.14em;
  padding-block:.72rem; border-top:var(--rule); color:var(--ash);
}
.runlist li:last-child{ border-bottom:var(--rule); }
.runlist li > span:nth-child(2){ color:var(--bone); letter-spacing:.1em; }
.runlist b{ font-weight:400; color:var(--ash-dim); }
.runlist b.open{ color:var(--ferrous); }
/* the statement — only #manifesto gets the display treatment */
#manifesto{
  font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 500;
  font-size:clamp(1.6rem, 3.4vw, 3.25rem); line-height:1.06; letter-spacing:-.025em;
  text-transform:uppercase; max-width:21ch; text-wrap:balance;
}
#manifesto .w{ color:var(--ash-dim); transition:color .45s var(--ease); }
#manifesto .w.lit{ color:var(--bone); }
.manifesto__note{
  margin-top:3rem; max-width:42ch; color:var(--ash);
  font-family:var(--body); font-variation-settings:"wdth" 100,"wght" 400;
  font-size:var(--fs-lead); line-height:1.5; letter-spacing:0;
  text-transform:none;
}
@media (max-width:1100px){ .manifesto__grid{ grid-template-columns:minmax(0,7rem) 1fr; }
  .runlist{ grid-column:1 / -1; margin-top:3rem; } }
@media (max-width:800px){ .manifesto__grid{ grid-template-columns:1fr; } }

/* ============================================================
   LOOKBOOK — pinned horizontal
   ============================================================ */
.look{ position:relative; background:var(--ink-2); }
.look__viewport{ height:100svh; overflow:hidden; display:flex; align-items:center; }
.look__track{ display:flex; gap:var(--gut); padding-inline:var(--gut); will-change:transform; }
.look__intro{ flex:0 0 min(78vw, 30rem); align-self:center; }
.look__intro h2{ font-size:var(--fs-huge); }
.look__intro p{ color:var(--ash); margin-top:1.5rem; max-width:30ch; }
.look__card{ flex:0 0 min(72vw, 26rem); }
.look__card figure{ overflow:hidden; background:var(--ink-3); }
.look__card img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:scale 1.2s var(--ease), filter 1.2s var(--ease);
  filter:grayscale(1) contrast(1.06) brightness(.86);
}
.look__card:hover img{ scale:1.04; filter:grayscale(.25) contrast(1.08) brightness(1); }
.look__meta{
  display:flex; justify-content:space-between; gap:1rem;
  padding-top:.9rem; border-top:var(--rule); margin-top:.9rem;
}
/* below the pin breakpoint the track becomes a swipe strip (see lookbook() in
   app.js) — drop the full-height stage so it does not sit in a well of dead space */
@media (max-width:820px){
  .look__viewport{ height:auto; padding-block:clamp(3.5rem,10vh,6rem); }
  .look__viewport::-webkit-scrollbar{ display:none; }
  .look__viewport{ scrollbar-width:none; }
  .look__intro{ flex:0 0 82vw; }
  .look__card{ flex:0 0 78vw; }
}

/* ============================================================
   PIECES — directional reveal grid
   ============================================================ */
.pieces{ padding-block:var(--sec); }
.pieces__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--gut); padding-inline:var(--gut); padding-bottom:3rem;
}
.pieces__head h2{ font-size:var(--fs-huge); }
.pieces__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:calc(var(--gut) * 1.4) var(--gut); padding-inline:var(--gut);
}
.piece{ position:relative; }
.piece--a{ grid-column:1 / span 5; }
.piece--b{ grid-column:7 / span 4; margin-top:6rem; }
.piece--c{ grid-column:2 / span 4; }
.piece--d{ grid-column:7 / span 6; margin-top:-4rem; }
.piece figure{ overflow:hidden; background:var(--ink-3); position:relative; }
.piece img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(1) contrast(1.04) brightness(.88);
  transition:scale 1.4s var(--ease), filter 1s var(--ease);
}
.piece--d img{ aspect-ratio:4/3; }
.piece:hover img{ scale:1.05; filter:grayscale(.2) contrast(1.08) brightness(1); }
.piece__no{
  position:absolute; top:1rem; left:1rem; z-index:2;
  color:var(--bone); mix-blend-mode:difference;
}
.piece__meta{
  display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem;
  padding-top:.9rem; margin-top:.9rem; border-top:var(--rule);
}
.piece__name{
  font-family:var(--display); font-variation-settings:"wdth" 108,"wght" 600;
  font-size:1.05rem; text-transform:uppercase; letter-spacing:-.01em;
}
.piece__price{ font-family:var(--label); font-size:var(--fs-label); letter-spacing:.1em; }
.piece__spec{ grid-column:1 / -1; }
.piece__add{
  display:inline-block; margin-top:1rem;
  font-family:var(--label); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.18em;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  color:var(--ash); transition:color .4s var(--ease);
}
.piece__add:hover{ color:var(--ferrous); }
@media (max-width:820px){
  .pieces__head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .pieces__grid{ grid-template-columns:1fr; }
  .piece--a,.piece--b,.piece--c,.piece--d{ grid-column:1 / -1; margin-top:0; }
}

/* ============================================================
   DETAIL split
   ============================================================ */
.detail{
  display:grid; grid-template-columns:1fr 1fr; min-height:90svh; align-items:center;
  background:var(--paper); color:var(--ink);
}
.detail__img{ height:100%; overflow:hidden; }
.detail__img img{ width:100%; height:100%; object-fit:cover; }
.detail__body{ padding:clamp(2rem,6vw,6rem); }
.detail__body h2{ font-size:var(--fs-h1); color:var(--ink); }
.detail__body .label{ color:color-mix(in oklab, var(--ink) 55%, transparent); }
.detail dl{ margin-top:2.5rem; display:grid; gap:0; max-width:34rem; }
.detail dl > div{
  display:grid; grid-template-columns:9rem 1fr; gap:1rem;
  padding-block:.85rem; border-top:1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.detail dt{
  font-family:var(--label); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.18em;
  color:color-mix(in oklab, var(--ink) 50%, transparent);
}
@media (max-width:820px){
  .detail{ grid-template-columns:1fr; }
  .detail__img{ height:70svh; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding-top:var(--sec); }
.foot__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut);
  padding-inline:var(--gut); padding-bottom:4rem;
}
.foot__cols ul{ list-style:none; display:grid; gap:.55rem; margin-top:1.2rem; }
.foot__cols a{ color:var(--ash); transition:color .35s var(--ease); }
.foot__cols a:hover{ color:var(--bone); }
.foot__sign{ padding-inline:var(--gut); border-top:var(--rule); padding-top:2rem; overflow:hidden; }
/* NOKTVRN measures 6.24em wide in expanded Archivo — 14.6vw fills the gutters exactly */
.foot__mark{ font-size:min(14.6vw, 22rem); line-height:.78; color:var(--bone); display:block; text-align:center; }
.foot__legal{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.5rem var(--gut) 2rem;
}
@media (max-width:820px){ .foot__cols{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   REDUCED MOTION — everything still reads
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ transform:none !important; opacity:1 !important; clip-path:none !important; }
  .split-line > span{ transform:none !important; }
  .manifesto__body p .w{ color:var(--bone) !important; }
  #cursor{ display:none; }
}

/* split chars (injected by app.js) */
.hero__word .ch{ display:inline-block; will-change:transform,opacity; }
.hero__word .ch:not(:last-child){ margin-right:-0.005em; }

/* ============================================================
   THEME UTILITIES (Shopify)
   ============================================================ */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-to-content:focus{
  position:fixed; top:1rem; left:1rem; z-index:300;
  width:auto; height:auto; margin:0; padding:.75rem 1rem; clip-path:none;
  background:var(--ferrous); color:var(--paper);
  font-family:var(--label); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.18em;
}
.piece__form{ margin:0; }
.piece__add--closed{ color:var(--ash-dim); border-bottom-color:var(--ash-dim); cursor:default; }
.piece__add--closed:hover{ color:var(--ash-dim); }
.piece__add--pending{
  display:inline-block; margin-top:1rem;
  font-family:var(--label); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.18em;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  color:var(--ferrous); cursor:default;
}

/* A closed run stays on the page — the scarcity is the point, so it is dimmed
   rather than removed. It still lifts on hover, just never all the way back. */
.piece--closed img{ opacity:.42; }
.piece--closed:hover img{ opacity:.6; scale:1.02; filter:grayscale(1) contrast(1.04) brightness(.88); }
.piece--closed .piece__name{ color:var(--ash); }
.piece--closed .piece__price{ color:var(--ash-dim); }

/* The unreleased piece is withheld, not dimmed — it holds its accent. */
.piece--pending .piece__price{ color:var(--ferrous); }
.piece__placeholder{ width:100%; aspect-ratio:3/4; background:var(--ink-3); fill:var(--ash-dim); }