/* ==========================================================================
   MILWONDERLAND
   Cream canvas. Colour as an event. Image first, words only where they earn it.
   ========================================================================== */

/* ---------- self-hosted fonts (no third-party runtime dependency) ---------- */
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root {
  /* ground */
  --cream:   #F4EFE4;
  --bone:    #FBF8F1;
  --paper:   #EAE3D3;

  /* ink */
  --navy:    #16233F;
  --ink:     #16233F;
  --ink-60:  #16233F99;
  --ink-40:  #16233F66;

  /* colour events, used full-bleed, one at a time, never together */
  --gold:    #E0A32E;
  --brick:   #B23A2F;
  --forest:  #2E4A31;
  --violet:  #5B4B96;
  --powder:  #A8C4D8;
  --tawny:   #80471C;
  --canary:  #F2D64B;

  /* type */
  --display: "Instrument Serif", "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut:     clamp(1.25rem, 4vw, 3.5rem);
  --maxw:    1680px;

  --ease:    cubic-bezier(.22,.61,.36,1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--gold); color: var(--navy); }

/* ---------- type scale ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
}
.d-xl { font-size: clamp(3.2rem, 13vw, 12rem); }
.d-lg { font-size: clamp(2.6rem, 8vw,  7rem); }
.d-md { font-size: clamp(2rem,   5vw,  4rem); }

.kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.5; max-width: 46ch; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--cream);
  padding: .75rem 1.25rem; font-family: var(--mono); font-size: .8rem;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--gut);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.hdr a, .hdr button { pointer-events: auto; }
.hdr__mark {
  grid-column: 2;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.hdr__nav { display: flex; gap: 1.5rem; }
.hdr__nav a { text-decoration: none; }
.hdr__nav--r { grid-column: 3; justify-content: flex-end; }
.hdr .kicker { opacity: .95; }
@media (max-width: 720px) { .hdr__nav a.opt { display: none; } }

/* ==========================================================================
   ALBUM PANELS. The whole home page is these
   ========================================================================== */
.panel {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navy);
}
.panel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim. Album covers put type over photography, which means the type has to
   survive whatever the photograph is doing. This is heavy on purpose: the
   bottom third must hold 4.5:1 against cream text no matter the image. */
.panel--dim::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, #000000A6 0%, #00000026 26%, #00000000 44%,
                            #00000059 66%, #000000C4 88%, #000000D9 100%);
}
.panel__body {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  padding: 0 var(--gut);
  color: var(--cream);
  text-shadow: 0 1px 24px #000000B3, 0 1px 3px #00000080;
}
.panel__body--btm { align-self: end; padding-bottom: clamp(2rem, 7vh, 5rem); }
.panel__body--ctr { text-align: center; }

/* square album crop */
.album {
  aspect-ratio: 1 / 1;
  width: min(86vmin, 900px);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  cursor: zoom-in;
}
.album img { width: 100%; height: 100%; object-fit: cover; }
.album__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  color: #fff;
  background: linear-gradient(180deg, #0000, #0009);
}

/* ---------- colour event ---------- */
.event { padding: clamp(4rem, 14vh, 10rem) var(--gut); }
.event--gold   { background: var(--gold);   color: var(--navy); }
.event--brick  { background: var(--brick);  color: var(--cream); }
.event--forest { background: var(--forest); color: var(--cream); }
.event--violet { background: var(--violet); color: var(--cream); }
.event--navy   { background: var(--navy);   color: var(--cream); }
.event__in { max-width: var(--maxw); margin-inline: auto; }

/* ---------- generic section ---------- */
.sec { padding: clamp(3.5rem, 10vh, 8rem) var(--gut); }
.sec__in { max-width: var(--maxw); margin-inline: auto; }

.rule { height: 1px; background: var(--ink); opacity: .18; border: 0; margin: 0; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .pdp { grid-template-columns: minmax(0,1.15fr) minmax(400px, .85fr); align-items: start; }
  .pdp__media { position: relative; }
  /* The info column flows with the page. It is NOT an inner scroll area:
     burying the spec, the fit index and the measurements inside a nested
     scroller is exactly the kind of thing this brand is not supposed to do. */
  .pdp__info { align-self: start; }
}

.pdp__media { background: var(--paper); }
.shot { position: relative; aspect-ratio: 4/5; background: var(--paper); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  background: var(--navy); color: var(--cream);
  padding: .35rem .6rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase;
}

/* model <-> flat reveal slider */
.reveal { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); touch-action: pan-y; }
.reveal__base, .reveal__top { position: absolute; inset: 0; }
.reveal__base img, .reveal__top img { width: 100%; height: 100%; object-fit: cover; }
.reveal__top { clip-path: inset(0 0 0 50%); will-change: clip-path; }
.reveal__handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--cream); transform: translateX(-1px);
  z-index: 4; pointer-events: none;
  box-shadow: 0 0 0 1px #0003;
}
.reveal__knob {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--cream); color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem;
  box-shadow: 0 2px 14px #0004; z-index: 5; pointer-events: none;
}
.reveal__lbl {
  position: absolute; bottom: 1rem; z-index: 4;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #0009;
}
.reveal__lbl--l { left: 1rem; } .reveal__lbl--r { right: 1rem; }
.reveal input[type=range] {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize; z-index: 6;
}

/* ---------- info column ---------- */
.pdp__info { padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 3.5vw, 3rem); }
.price { font-family: var(--mono); font-size: 1.05rem; }

.hook { font-family: var(--display); font-size: clamp(1.5rem,2.6vw,2.2rem); line-height: 1.05; margin: .2em 0 .6em; }
.body-copy p { max-width: 52ch; margin: 0 0 1em; }

/* size buttons */
.sizes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.sizes button {
  font-family: var(--mono); font-size: .78rem;
  padding: .6rem .85rem; min-width: 3.2rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink-40); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sizes button:hover { border-color: var(--ink); }
.sizes button[aria-pressed=true] { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.btn {
  display: block; width: 100%; margin-top: 1.25rem;
  padding: 1.1rem 1.5rem;
  background: var(--navy); color: var(--cream);
  border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background .18s var(--ease);
}
.btn:hover { background: var(--brick); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* ---------- spec blocks ---------- */
.block { border-top: 1px solid var(--ink-40); padding: 1.5rem 0; }
.block__h {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 .9rem; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem;
}

/* provenance tags: the honesty machine */
.tag {
  font-family: var(--mono); font-size: .54rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .2rem .45rem; white-space: nowrap;
  border: 1px solid currentColor;
}
.tag--spec   { color: #2E4A31; }
.tag--tested { color: #80471C; }
.tag--ours   { color: #5B4B96; }
.tag--todo   { color: #B23A2F; background: #B23A2F14; }

dl.spec { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; font-size: .9rem; }
dl.spec dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); align-self: baseline; }
dl.spec dd { margin: 0; }

.plain { font-size: .95rem; }
.plain + .src { margin-top: .8rem; }
.src { font-family: var(--mono); font-size: .62rem; color: var(--ink-60); line-height: 1.6; }
.src a { color: inherit; }

/* ---------- fit index ---------- */
.fit { display: grid; gap: .7rem; margin: 0; }
.fit__row { display: grid; grid-template-columns: 5.5rem 1fr 5.5rem; align-items: center; gap: .75rem; }
.fit__end { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.fit__end--r { text-align: right; }
.fit__dots { display: flex; gap: .3rem; justify-content: center; }
.fit__dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); }
.fit__dot--on { background: var(--ink); }
.fit__dot--na { border-style: dashed; opacity: .35; }
.fit__label { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }

.notrated {
  font-family: var(--mono); font-size: .66rem; line-height: 1.7;
  padding: .8rem 1rem; border: 1px dashed var(--brick); color: var(--brick);
}

/* ---------- fit finder ---------- */
.finder { display: grid; gap: .7rem; }
.finder__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.finder label { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); display: block; margin-bottom: .25rem; }
.finder input, .finder select {
  width: 100%; padding: .6rem .7rem; font-family: var(--mono); font-size: .8rem;
  border: 1px solid var(--ink-40); background: var(--bone); color: var(--ink);
}
.finder__out { margin-top: .3rem; padding: 1rem; background: var(--navy); color: var(--cream); font-size: .92rem; }
.finder__out b { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .04em; }
.finder__out .why { display: block; margin-top: .5rem; opacity: .8; font-size: .82rem; }

/* ---------- measurements table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .72rem; }
.tbl th, .tbl td { padding: .5rem .4rem; text-align: right; border-bottom: 1px solid var(--ink-40); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); }
.tbl tbody tr.on td { background: var(--gold); }

/* ---------- provenance / made-by strip ---------- */
.madeby { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.madeby dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.madeby dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.35; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb[hidden] { display: none; }
.lb {
  position: fixed; inset: 0; z-index: 500;
  background: #0F1626F2;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 1rem;
}
.lb__bar { display: flex; justify-content: space-between; align-items: center; color: var(--cream); }
.lb__close {
  background: none; border: 1px solid #FFF6; color: var(--cream);
  width: 42px; height: 42px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.lb__close:hover { background: #FFF2; }
.lb__stage { display: grid; place-items: center; min-height: 0; }
.lb__stage .reveal { width: min(92vw, 88vh * 0.8); aspect-ratio: 4/5; max-height: 100%; }
.lb__foot { color: var(--cream); text-align: center; padding-top: .75rem; }

/* one image, nothing to compare: no slider, no labels, no drag affordance */
.lb--single .reveal__top,
.lb--single .reveal__handle,
.lb--single .reveal__knob,
.lb--single .reveal__lbl,
.lb--single .reveal input[type=range] { display: none; }
.lb--single .reveal { cursor: default; }
.lb--single .reveal__base img { object-fit: contain; }

/* ==========================================================================
   PRODUCT SHOTS. A main image and a strip of others, all of them clickable
   ========================================================================== */
.shots { display: grid; gap: .55rem; }
.shot { position: relative; display: block; cursor: zoom-in; background: var(--paper); }
.shot img { display: block; width: 100%; height: auto; }
.shot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shot__zoom {
  position: absolute; left: .5rem; bottom: .5rem;
  background: #FBF8F1E6; color: var(--ink); padding: .35rem .55rem;
  font-family: var(--mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
}
.shots__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.shots__note {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-60); margin: .2rem 0 0; line-height: 1.5;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--navy); color: var(--cream); padding: clamp(3rem,8vh,6rem) var(--gut) 2rem; }
.ftr__in { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
.ftr h4 { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin: 0 0 .9rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ftr a { text-decoration: none; opacity: .9; }
.ftr a:hover { opacity: 1; text-decoration: underline; }
.ftr__btm { max-width: var(--maxw); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid #FFF3; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

/* ---------- ledger ---------- */
.ledger { display: grid; gap: 1px; background: currentColor; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.ledger__cell { background: var(--gold); padding: 1.75rem 1.25rem; }
.event--brick .ledger__cell { background: var(--brick); }
.ledger__n { font-family: var(--display); font-size: clamp(2rem,5vw,3.6rem); line-height: 1; }
.ledger__k { font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-top: .5rem; }

/* ---------- utils ---------- */
.mono { font-family: var(--mono); }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }