/* ==========================================================================
   Frank Zane, 3X Mr. Olympia
   Design language: heritage athlete. Near black, oxblood, gold hairlines,
   heavy condensed display type, editorial whitespace, archival photography.
   ========================================================================== */

:root {
  --ink: #0a0a0b;
  --ink-2: #131316;
  --ink-3: #1d1d21;
  --bone: #f5f2ec;
  --bone-2: #ebe6dd;
  --paper: #ffffff;

  --red: #ae0707;
  --red-hi: #d01414;
  --gold: #e7a700;
  --gold-deep: #b8892b;

  --text: #14141a;
  --text-mute: #5d5c66;
  --on-dark: #f5f2ec;
  --on-dark-mute: #a6a29b;

  --line: rgba(20, 20, 26, 0.14);
  --line-dark: rgba(245, 242, 236, 0.14);

  --wrap: 1280px;
  --gut: 24px;

  --ff: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.02; letter-spacing: -0.02em; }
p { margin: 0 0 1.1em; }

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

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; z-index: 999; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 700;
}

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

/* Cutout portraits are cropped at the source frame edge, so fade the bottom
   into the background instead of ending on a hard horizontal chop. */
.hero__figure img,
.train__figure img,
.story__figure img,
.rail__lead img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.55) 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.55) 88%, transparent 100%);
}

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

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red);
}
.eyebrow .rule { display: block; width: 34px; height: 2px; background: var(--red); }
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold .rule { background: var(--gold); }

.section__title {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 900; text-transform: uppercase;
}
.section__lede {
  max-width: 58ch; margin-top: 18px; color: var(--text-mute); font-size: 17px;
}

.link-more {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid var(--gold); padding-bottom: 4px; white-space: nowrap;
  transition: color .25s var(--ease);
}
.link-more:hover { color: var(--red); }

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 2px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #ffbe1a; }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn--sm { padding: 11px 18px; font-size: 11px; letter-spacing: 0.12em; }

/* Quick-add in product grids. Deliberately smaller than a page CTA: it repeats
   dozens of times per screen, so it should read as an action, not a headline.
   Never wraps, which it did at the old size. */
.btn--add {
  padding: 8px 14px;
  font-size: 10px; letter-spacing: 0.1em;
  white-space: nowrap;
  background: var(--red); color: #fff;
}
.btn--add:hover { background: var(--red-hi); }

/* ---------- Announcement + header --------------------------------------- */

.announce {
  background: var(--red); color: #fff;
  font-size: 12px; letter-spacing: 0.06em;
}
.announce__in {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  min-height: 40px; text-align: center; flex-wrap: wrap;
}
.announce a { font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.5); }

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
.site-head__in {
  display: flex; align-items: center; gap: 32px; min-height: 84px;
}
.brand img { width: 190px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__item > a {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark);
  transition: color .2s var(--ease);
}
.nav__item > a:hover { color: var(--gold); }
.chev { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.head-tools { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative;
  display: grid; place-items: center; width: 42px; height: 42px;
  background: none; border: 0; color: var(--on-dark);
  transition: color .2s var(--ease);
}
.icon-btn:hover { color: var(--gold); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.cart__count {
  position: absolute; top: 4px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 999px;
}

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; }
.burger span { width: 22px; height: 2px; background: var(--on-dark); transition: transform .3s var(--ease), opacity .2s; }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink-2); border-top: 1px solid var(--line-dark);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-mega { position: static; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__in { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; padding: 44px var(--gut) 52px; }
.mega__title {
  display: block; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--on-dark); padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
}
.mega__in { align-items: start; }
.mega__title:hover { color: var(--gold); }

/* Column headings all sit on one row and their rules line up, however many
   lines a heading takes.
   The fallback reserves two lines, which covers every current heading. Subgrid
   then does it properly: the heading row becomes as tall as the tallest
   heading, so a third line would still align rather than pushing one column
   out of step. */
.mega__title { min-height: 2.6em; display: flex; align-items: flex-start; }

@supports (grid-template-rows: subgrid) {
  .mega__in { grid-template-rows: auto auto; }
  .mega__col { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .mega__title { min-height: 0; align-items: flex-end; }
}
/* `align-content: start` keeps the rows at their natural height. The subgrid
   row is as tall as the longest column, and without this a two-link column
   stretches its rows to fill it, so its links sit further apart than the rest. */
.mega__in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.mega__in ul a { font-size: 13.5px; color: var(--on-dark-mute); transition: color .2s var(--ease); }
.mega__in ul a:hover { color: var(--gold); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(174,7,7,.34) 0%, transparent 58%),
    radial-gradient(80% 70% at 10% 90%, rgba(231,167,0,.12) 0%, transparent 60%),
    linear-gradient(180deg, #101013 0%, #0a0a0b 100%);
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0; opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px;
  padding-block: clamp(56px, 8vw, 104px);
}
.hero__title {
  font-size: clamp(40px, 6.6vw, 88px);
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em;
}
.hero__title em {
  font-style: italic; font-weight: 300; text-transform: lowercase;
  letter-spacing: -0.01em; color: var(--gold);
}
.hero__lede {
  max-width: 50ch; margin-top: 26px;
  font-size: clamp(16px, 1.5vw, 18px); color: var(--on-dark-mute);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__proof {
  display: flex; gap: 44px; list-style: none; margin: 52px 0 0; padding: 30px 0 0;
  border-top: 1px solid var(--line-dark);
}
.hero__proof li { display: flex; flex-direction: column; gap: 3px; }
.hero__proof strong { font-size: 30px; font-weight: 900; color: var(--gold); line-height: 1; }
.hero__proof span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-mute); }

.hero__figure { position: relative; justify-self: center; }
.hero__figure::before {
  content: ''; position: absolute; inset: auto 4% 2% 4%; height: 58%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(174,7,7,.55), transparent 72%);
  filter: blur(30px);
}
.hero__figure img { position: relative; max-height: 620px; width: auto; margin-inline: auto; }

/* ---------- Olympia strip ----------------------------------------------- */

.olympia { background: var(--red); color: #fff; }
.olympia__in {
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding-block: 20px;
}
.olympia__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.olympia__label--r { color: rgba(255,255,255,.6); letter-spacing: 0.12em; }
.olympia__year { font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; letter-spacing: 0.02em; }
.olympia__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* ---------- Sections ---------------------------------------------------- */

.section { padding-block: clamp(64px, 8vw, 112px); }
.section--alt { background: var(--bone-2); }
.section__head { margin-bottom: 52px; }
.section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cat {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 40px 36px 46px; background: var(--bone);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.cat:hover { background: var(--ink); color: var(--on-dark); }
.cat__num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--gold-deep);
}
.cat:hover .cat__num { color: var(--gold); }
.cat__title { font-size: 23px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.cat__blurb { font-size: 14px; color: var(--text-mute); }
.cat:hover .cat__blurb { color: var(--on-dark-mute); }
.cat__go {
  position: absolute; right: 32px; bottom: 40px;
  font-size: 20px; color: var(--gold-deep);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cat:hover .cat__go { opacity: 1; transform: none; color: var(--gold); }

/* Product cards */
.grid { display: grid; gap: 28px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.card__media { position: relative; display: block; overflow: hidden; background: #fff; aspect-ratio: 1; }
.card__media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.tag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 10px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--ink); color: var(--bone);
}
.tag--digital { background: var(--gold); color: var(--ink); }
.tag--service { background: var(--red); color: #fff; }

.card__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-top: 1px solid var(--line); flex: 1; }
.card__title { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.card__title a:hover { color: var(--red); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.price { font-size: 19px; font-weight: 900; }

/* ---------- Train with Zane --------------------------------------------- */

.train { background: var(--ink-2); color: var(--on-dark); overflow: hidden; }
.train__in {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px;
  padding-block: clamp(64px, 8vw, 108px);
}
.train__title { font-size: clamp(32px, 4.4vw, 56px); font-weight: 900; text-transform: uppercase; }
.train__copy > p { color: var(--on-dark-mute); max-width: 52ch; margin-top: 22px; }
.ticks { list-style: none; margin: 26px 0 34px; padding: 0; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 30px; font-size: 15px; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 14px; height: 8px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.train__cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* Cutout figure standing in front of a gold rule frame. */
.train__figure { position: relative; margin: 0; justify-self: center; max-width: 520px; width: 100%; }
.train__figure::before {
  content: ''; position: absolute; inset: 6% 4% 14% 4%;
  border: 1px solid var(--gold-deep); opacity: .55; pointer-events: none;
}
.train__figure::after {
  content: ''; position: absolute; inset: auto 10% 4% 10%; height: 46%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(231,167,0,.20), transparent 72%);
  filter: blur(26px); pointer-events: none;
}
.train__figure img { position: relative; z-index: 1; width: 100%; }

/* ---------- Story ------------------------------------------------------- */

.story { background: var(--ink); color: var(--on-dark); }
.story__in {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px;
  padding-block: clamp(64px, 8vw, 108px);
}
.story__figure { margin: 0; position: relative; max-width: 430px; justify-self: center; }
.story__figure::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 70%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(174,7,7,.42), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.story__figure img { position: relative; width: 100%; }
.story__title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 900; text-transform: uppercase; margin-bottom: 24px; }
.story__copy p { color: var(--on-dark-mute); max-width: 60ch; }

/* ---------- Archive band ------------------------------------------------ */

/* Contact-sheet rail. Deliberately not the two-column split used by the
   Train and Legacy bands directly above it: light ground, full-width header,
   one horizontal row of prints. */
.archive { background: var(--bone); padding-block: clamp(64px, 8vw, 104px); }

.archive__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 40px;
  padding-bottom: 30px; margin-bottom: 36px; border-bottom: 1px solid var(--line);
}
.archive__note { margin: 0; max-width: 40ch; color: var(--text-mute); font-size: 14.5px; }

.rail {
  display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 20px; align-items: stretch;
}

/* Lead panel: the portrait on an oxblood ground, anchoring the row. */
.rail__lead {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #8f0606 0%, #5e0404 60%, #3a0202 100%);
  display: flex; align-items: flex-end; justify-content: center; min-height: 340px;
}
.rail__lead img {
  width: 88%; max-width: 280px; align-self: flex-end; filter: grayscale(1) contrast(1.08);
  mix-blend-mode: luminosity; opacity: .95;
}
/* Scrim so the caption stays legible over the portrait. */
.rail__lead::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(40,2,2,.92) 0%, rgba(40,2,2,.55) 55%, transparent 100%);
}
.rail__lead-cap {
  position: absolute; z-index: 1; left: 22px; top: 20px; right: 22px;
  display: flex; flex-direction: column; gap: 6px; color: #fff;
}
.rail__kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}
.rail__lead-title {
  font-size: 25px; font-weight: 900; text-transform: uppercase; line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Individual prints, framed like a contact sheet frame. */
.shot { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.shot__media { display: block; overflow: hidden; background: #111; aspect-ratio: 4 / 5; }
.shot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), opacity .3s; }
.shot:hover .shot__media img { transform: scale(1.06); }
.shot__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px 15px; border-top: 1px solid var(--line); margin-top: auto;
}
.shot__name {
  font-size: 12px; line-height: 1.4; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shot:hover .shot__name { color: var(--red); }
.shot__price { font-size: 14px; font-weight: 900; white-space: nowrap; }

/* ---------- Results carousel -------------------------------------------- */

.results { background: var(--ink); color: var(--on-dark); padding-block: clamp(64px, 8vw, 104px); }
.results .section__title { color: var(--on-dark); }
.results .section__lede { color: var(--on-dark-mute); }

.results__nav { display: flex; gap: 10px; }
.res-arrow {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line-dark); color: var(--on-dark); border-radius: 2px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.res-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.res-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* All slides share one grid cell so the stage is always as tall as the tallest
   story. Inactive slides stay in the layout but are hidden from view and from
   assistive tech, which keeps the height from jumping between tabs. */
.results__stage { position: relative; display: grid; }

.res {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: .68fr 1.32fr; align-items: center; gap: 52px;
  background: var(--ink-2); border: 1px solid var(--line-dark);
  padding: 40px 48px;
}
.res[hidden] { visibility: hidden; opacity: 0; pointer-events: none; }

.res__figure { margin: 0; position: relative; align-self: end; }
.res__figure::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(174,7,7,.42), transparent 72%);
  filter: blur(26px); pointer-events: none;
}
.res__figure img {
  position: relative; width: 100%; max-height: 380px; object-fit: contain; object-position: bottom;
}

/* Before/after pair, for programme testimonials. */
.res--pair { grid-template-columns: .82fr 1.18fr; }
.res__pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.res__shot { position: relative; display: block; overflow: hidden; background: var(--ink-3); }
.res__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.res__shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(10,10,11,.9));
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark);
}
.res__shot-cap b { color: var(--gold); font-weight: 800; }

/* Quote-led variant, used where there is no verified photograph. */
.res--quote { grid-template-columns: .4fr 1.6fr; align-items: center; }
.res__mark {
  font-size: 190px; line-height: .7; font-weight: 900; color: var(--gold); opacity: .28;
  justify-self: center; user-select: none;
}

.res__name { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; text-transform: uppercase; }
.res__meta {
  margin: 10px 0 20px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-mute);
}
.res__copy p { color: var(--on-dark-mute); max-width: 60ch; font-size: 15.5px; }
.res__quote {
  margin: 18px 0 22px; padding-left: 22px; border-left: 2px solid var(--gold);
  font-size: 16.5px; font-style: italic; color: var(--on-dark); max-width: 62ch;
}
.res__highlight { color: var(--gold) !important; font-weight: 700; margin-top: 4px; }

.res__wins { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 10px; max-width: 58ch; }
.res__wins li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--on-dark); }
.res__wins li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 9px; height: 9px;
  background: var(--gold); transform: rotate(45deg);
}

.results__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1px; }
.res-tab {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 18px 22px; background: var(--ink-2); border: 1px solid var(--line-dark); color: var(--on-dark-mute);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.res-tab:hover { color: var(--on-dark); background: var(--ink-3); }
.res-tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.res-tab__name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.res-tab__kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .8; }

/* ---------- Vault strip (prefooter) -------------------------------------- */

.vault-strip { background: var(--bone-2); padding-block: clamp(56px, 7vw, 88px); overflow-x: clip; }
.vault-strip__in { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 30px; width: 100%; }
.vault-strip__head .section__title { font-size: clamp(28px, 3.6vw, 44px); }
.vault-strip__row {
  display: flex; flex-wrap: nowrap; gap: 12px; width: 100%;
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin;
}
.vault-strip__frame {
  display: block; flex: 0 0 auto; width: clamp(150px, 20vw, 200px);
  overflow: hidden; background: #111; aspect-ratio: 4 / 5; border: 1px solid var(--line);
  padding: 0; cursor: pointer; scroll-snap-align: start;
  transition: border-color .3s var(--ease);
}
.vault-strip__frame:hover, .vault-strip__frame:focus-visible { border-color: var(--gold-deep); }
.vault-strip__frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); opacity: .92;
  transition: filter .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease);
}
.vault-strip__frame:hover img, .vault-strip__frame:focus-visible img { filter: grayscale(0) contrast(1); opacity: 1; transform: scale(1.05); }

/* ---------- Footer ------------------------------------------------------ */

.site-foot { background: var(--ink); color: var(--on-dark-mute); padding-block: 72px 32px; font-size: 14px; }
.foot-top { display: grid; grid-template-columns: 260px 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
.foot-brand img { width: 190px; margin-bottom: 20px; }
.foot-brand p { max-width: 34ch; line-height: 1.7; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
.foot-col h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-dark); margin-bottom: 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--gold); }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 28px; font-size: 12.5px;
}
.foot-bottom p { margin: 0; }
.foot-legal { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.foot-legal a:hover { color: var(--gold); }
.pay { color: var(--on-dark-mute); }


/* ---------- Tablet and mobile header ------------------------------------ */
/* The drawer starts at 1024 rather than 900: six mega-menu columns are already
   cramped on an iPad in landscape, so tablets get the accordion too. */
@media (max-width: 1024px) {
  .burger { display: flex; }

  .site-head__in { gap: 16px; }
  .head-tools { margin-left: auto; }
  .brand img { width: 150px; }

  /* Mobile nav becomes a full-height drawer under the header. The desktop mega
     menu is re-flowed into an inline accordion opened by tapping "Shop". */
  .nav {
    position: fixed; inset: 76px 0 0 0; z-index: 90;
    background: var(--ink); overflow-y: auto; overscroll-behavior: contain;
    /* Slide from the right without widening the page: the panel is clipped by
       html{overflow-x:clip} (clip, not hidden, so sticky still works). */
    transform: translateX(100%); transition: transform .3s var(--ease), visibility .3s;
    visibility: hidden;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 40px; }
  .nav__item { border-bottom: 1px solid var(--line-dark); }
  .nav__item > a { padding: 18px var(--gut); font-size: 15px; justify-content: space-between; }

  /* Accordion: the mega panel is collapsed until its parent item is opened. */
  .has-mega { position: static; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows .3s var(--ease);
    background: var(--ink-2); border-top: 0;
    /* The panel clips its own contents. Collapsing the row zeroes the child's
       content box but not its padding, and that 28px band kept painting the
       first column heading under a closed "Shop". */
    overflow: hidden;
  }
  .mega > * { overflow: hidden; min-height: 0; }
  .mega__in { display: block; padding: 6px var(--gut) 22px; }
  /* The desktop columns are a subgrid so their headings line up. There is only
     one column per row on a phone, so the subgrid is dropped: left on, it gave
     the heading a zero-height row that its text then painted outside of. */
  .mega__col {
    display: block; grid-row: auto; grid-template-rows: none;
    padding: 16px 0; border-bottom: 1px solid var(--line-dark);
  }
  /* Keep the tap/keyboard focus ring inside the row: with the default +3px
     offset it draws a full-width gold rectangle whose edges read as stray
     rules cutting through the accordion content. */
  .nav__item > a:focus-visible { outline-offset: -4px; }
  .mega__col:last-child { border-bottom: 0; }
  /* One rule per group is enough on a phone: the column separators stay,
     the per-title underline goes. */
  .mega__title { min-height: 0; border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
  .nav__item.is-open > a .chev { transform: rotate(180deg); }
  .nav__item.is-open .mega { grid-template-rows: minmax(0, 1fr); }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav { transform: none; visibility: visible; }
  body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

}

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .mega__in { grid-template-columns: repeat(3, 1fr); }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {

  .hero__in, .train__in, .story__in { grid-template-columns: 1fr; }
  .hero__figure { order: -1; }
  .hero__figure img { max-height: 420px; }
  .story__figure, .train__figure { max-width: 340px; }
  .story__figure { order: -1; }
  .archive__head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .res { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .res__figure { max-width: 280px; margin-inline: auto; }
  .results__tabs { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail__lead { grid-column: 1 / -1; min-height: 300px; }
  .rail__lead img { max-width: 260px; }
  .foot-top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  :root { --gut: 18px; }
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .hero__proof { gap: 26px; }
  .hero__proof strong { font-size: 24px; }
  .announce__in { font-size: 11px; }
}

@media (max-width: 460px) {
  .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__cta, .train__cta { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* ---------- Page header -------------------------------------------------- */

.page-head { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.page-head__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(100% 90% at 80% 0%, rgba(174,7,7,.30) 0%, transparent 60%),
    linear-gradient(180deg, #101013 0%, #0a0a0b 100%);
}
.page-head__in { position: relative; padding-block: clamp(44px, 6vw, 84px) clamp(48px, 6vw, 76px); }
.page-head__title {
  font-size: clamp(40px, 6vw, 78px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em;
}
.page-head__lede { max-width: 54ch; margin-top: 20px; color: var(--on-dark-mute); font-size: 17px; }

/* Cutout of Frank standing on the right edge of a page header. The image is a
   transparent-background subject lift, so it must always sit on the dark ground. */
.page-head--figure { min-height: 340px; }
.page-head__cut {
  position: absolute; right: clamp(8px, 7vw, 120px); bottom: 0;
  height: 94%; width: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .6));
  pointer-events: none; user-select: none;
}
.page-head--figure .page-head__in { padding-right: clamp(180px, 26vw, 360px); }
/* Wide poses (kneeling Avedon) need less height or they swallow the header. */
.page-head__cut--wide { height: 72%; }
@media (max-width: 760px) {
  /* On phones the figure becomes a quiet backdrop: smaller, dimmed and faded
     out on its left edge so the title can run over it at full width. */
  .page-head__cut {
    height: 80%; right: -10px;
    opacity: .38;
    filter: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  }
  .page-head__cut--wide { height: 62%; }
  .page-head--figure { min-height: 0; }
  .page-head--figure .page-head__in { padding-right: 0; }
}

.crumbs {
  margin-bottom: 26px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-mute);
}
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--gold); border-color: var(--gold); }
.crumbs span { margin-inline: 8px; }
.crumbs [aria-current] { color: var(--on-dark); margin-inline: 0; }

/* ---------- Epigraph ----------------------------------------------------- */

.epigraph {
  margin: 0; padding-block: clamp(44px, 5.5vw, 72px);
  background: var(--ink); color: var(--on-dark);
  border-top: 3px solid var(--gold-deep); border-bottom: 1px solid rgba(245,242,236,.12);
}
.epigraph blockquote {
  margin: 0; max-width: 62ch;
  font-size: clamp(17px, 2vw, 22px); font-style: italic; line-height: 1.55;
}
.epigraph figcaption {
  margin-top: 18px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}

/* ---------- Biography body ---------------------------------------------- */

.bio {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 64px; align-items: start;
  padding-block: clamp(56px, 7vw, 88px);
}
.bio__text { max-width: 68ch; }

.ch + .ch { margin-top: 52px; padding-top: 52px; border-top: 1px solid var(--line); }
.ch__title {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; text-transform: uppercase;
}
.ch__num { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--gold-deep); }
.ch p { font-size: 16.5px; line-height: 1.78; color: #2a2a31; }
.ch p + p { margin-top: 1.1em; }

.ch--plate { display: grid; grid-template-columns: 1fr; gap: 30px; }
.ch__plate { margin: 0; }
.ch__plate img { width: 100%; }
.ch__plate figcaption {
  margin-top: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}

/* Transparent cutouts, exported against black. */
.ch__plate--cutout { background: var(--ink); }
.ch__plate--cutout img { max-height: 460px; object-fit: contain; object-position: bottom; }

/* Archive photographs keep their own ground and get a hairline frame. */
.ch__plate--photo img {
  border: 1px solid var(--line);
  max-height: 520px; object-fit: contain; object-position: center;
  background: var(--paper);
}
.ch__plate--photo.is-wide img { max-height: none; object-fit: cover; }

/* Sticky record rail */
.bio__aside { position: sticky; top: 108px; }
.honours { background: var(--ink); color: var(--on-dark); padding: 30px 28px 32px; }
.honours__title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.honours__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.honours__list li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; font-size: 13.5px; line-height: 1.5; }
.honours__year { font-weight: 900; color: var(--on-dark); }
.honours__list span:last-child { color: var(--on-dark-mute); }
.honours__note {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-dark);
  font-size: 12.5px; color: var(--on-dark-mute);
}

/* ---------- Biography CTA ------------------------------------------------ */

.bio-cta { background: var(--bone-2); border-top: 1px solid var(--line); }
.bio-cta__in {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding-block: 56px;
}
.bio-cta__title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.bio-cta__in p { margin: 0; color: var(--text-mute); max-width: 48ch; }
.bio-cta__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.bio-cta .btn--ghost { border-color: rgba(20,20,26,.4); }
.bio-cta .btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

@media (max-width: 900px) {
  .bio { grid-template-columns: 1fr; gap: 40px; }
  .bio__aside { position: static; }
}

/* ---------- Product detail ---------------------------------------------- */

.crumbs--light { color: var(--text-mute); padding-top: 26px; }
.crumbs--light a:hover { color: var(--red); border-color: var(--red); }
.crumbs--light [aria-current] { color: var(--text); }

.pdp {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start;
  padding-block: 30px clamp(48px, 6vw, 72px);
}
.pdp__frame {
  position: relative; margin: 0; background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center; padding: 44px; aspect-ratio: 1;
}
.pdp__frame img { width: 100%; height: 100%; object-fit: contain; }

.pdp__buy { position: sticky; top: 108px; }
.pdp__cat { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.pdp__title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; text-transform: uppercase; }

.pdp__pricerow { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 26px; flex-wrap: wrap; }
.pdp__price { font-size: 34px; font-weight: 900; }
.pdp__was { font-size: 18px; color: var(--text-mute); text-decoration: line-through; }
.pdp__stock {
  margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #1c7a34;
}
.pdp__stock.is-out { color: var(--red); }

.pdp__form { display: flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.pdp__add { flex: 1; min-width: 200px; }

.qty { display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--paper); }
.qty__btn { width: 44px; background: none; border: 0; font-size: 17px; color: var(--text); }
.qty__btn:hover { background: var(--bone-2); }
.qty__in {
  width: 54px; border: 0; text-align: center; font: inherit; font-weight: 700; background: none;
  -moz-appearance: textfield;
}
.qty__in::-webkit-outer-spin-button, .qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.delivery { border: 1px solid var(--line); background: var(--paper); padding: 22px 24px; }
.delivery__title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
}
.delivery ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.delivery li { position: relative; padding-left: 22px; font-size: 14px; color: var(--text-mute); line-height: 1.55; }
.delivery li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg);
}

.assurance { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.assurance li { font-size: 12.5px; color: var(--text-mute); padding-left: 22px; position: relative; }
.assurance li::before {
  content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px;
  border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg);
}

.pdp-detail {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start;
  padding-bottom: clamp(56px, 7vw, 84px);
}
.pdp-detail__head {
  font-size: clamp(21px, 2.4vw, 28px); font-weight: 900; text-transform: uppercase;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.draft-flag {
  display: inline-block; margin: 0 0 18px; padding: 7px 12px;
  background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.prose { font-size: 16px; line-height: 1.75; color: #2a2a31; }
.prose p { margin: 0 0 1.05em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--text); }

.callout { margin-top: 32px; background: var(--bone-2); border-left: 3px solid var(--red); padding: 22px 26px; }
.callout h3 { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
.callout p { margin: 0; font-size: 14.5px; color: var(--text-mute); line-height: 1.7; }

.spec { border: 1px solid var(--line); background: var(--paper); padding: 24px 26px; position: sticky; top: 108px; }
.spec__title { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.spec dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.spec dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); margin-top: 14px;
}
.spec dt:first-child { margin-top: 0; }
.spec dd { margin: 4px 0 0; font-size: 14px; }

@media (max-width: 980px) {
  .pdp { grid-template-columns: 1fr; gap: 34px; }
  .pdp__buy, .spec { position: static; }
  .pdp-detail { grid-template-columns: 1fr; gap: 36px; }
}

/* Products with no description yet: the details rail stands alone. */
.pdp-detail--nocopy { grid-template-columns: minmax(0, 420px); }

/* ---------- Author byline + course series ------------------------------- */

.pdp__author {
  margin: 10px 0 0; font-size: 14px; font-style: italic; color: var(--text-mute);
}

.series { background: var(--ink); color: var(--on-dark); padding-block: clamp(48px, 6vw, 72px); }
.series__head { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.series__note { margin: 0; font-size: 14px; color: var(--on-dark-mute); max-width: 60ch; }
.series__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark);
}
.series__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; background: var(--ink-2); height: 100%;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.series__list a:hover { background: var(--red); }
.series__name { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.series__price { font-size: 13px; font-weight: 900; color: var(--gold); white-space: nowrap; }
.series__list a:hover .series__price { color: #fff; }

/* ---------- Shop and category listings ---------------------------------- */

.page-head--slim .page-head__in { padding-block: clamp(36px, 4.5vw, 60px) clamp(38px, 5vw, 60px); }
.page-head--slim .page-head__title { font-size: clamp(32px, 4.6vw, 58px); }

.shop {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 52px; align-items: start;
  padding-block: clamp(40px, 5vw, 64px);
}

.shop__side { position: sticky; top: 108px; }
.shop__side-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute); padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.shop__cats { list-style: none; margin: 0; padding: 0; }
.shop__cats a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 14px; color: var(--text-mute);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease);
}
.shop__cats a span { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .6; }
.shop__cats a:hover { color: var(--red); }
.shop__cats a[aria-current] { color: var(--text); font-weight: 700; }
.shop__cats a[aria-current]::before {
  content: ''; width: 3px; height: 14px; background: var(--red); margin-right: 10px; flex: none;
}

.shop__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
}
.shop__count { margin: 0; font-size: 13px; color: var(--text-mute); }
.shop__count strong { color: var(--text); font-size: 15px; }
.shop__sort { display: flex; align-items: center; gap: 10px; }
.shop__sort label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}
.shop__sort select {
  font: inherit; font-size: 13.5px; padding: 9px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px; color: var(--text);
}
.shop__empty { padding: 40px 0; color: var(--text-mute); }

.card__cat {
  margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
}
.card__author { margin: -4px 0 0; font-size: 12px; font-style: italic; color: var(--text-mute); }
.price s { font-size: 13px; font-weight: 500; color: var(--text-mute); margin-left: 6px; }
.tag--sale { top: auto; bottom: 12px; background: var(--red); color: #fff; }

/* Category index */
.catgroup + .catgroup { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.catgroup__title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; text-transform: uppercase; margin-bottom: 20px; }
.catgroup__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.catgroup__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; background: var(--paper); height: 100%;
  font-size: 14.5px; font-weight: 600;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.catgroup__list a:hover { background: var(--ink); color: var(--on-dark); }
.catgroup__n { font-size: 12px; font-weight: 800; color: var(--gold-deep); }

@media (max-width: 980px) {
  .shop { grid-template-columns: 1fr; gap: 28px; }
  .shop__side { position: static; }
  .shop__cats { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .shop__cats a { padding: 6px 0; }
  .shop__cats a[aria-current]::before { display: none; }
}

/* ---------- Train With Zane --------------------------------------------- */

.train-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.train-intro__copy p { font-size: 16.5px; line-height: 1.75; color: #2a2a31; max-width: 62ch; }

.sessions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.session { background: var(--paper); border: 1px solid var(--line); }
.session--feature { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.session__body { padding: 36px 34px 34px; }
.session__name { font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; text-transform: uppercase; }
.session__price { margin: 10px 0 22px; font-size: 38px; font-weight: 900; }
.session--feature .session__price { color: var(--gold); }
.ticks--dark li::before { border-color: var(--gold-deep); }
.session--feature .ticks li::before { border-color: var(--gold); }
.session .ticks { margin-bottom: 28px; }
.session--feature .btn--gold:hover { background: #ffbe1a; }

.bonus {
  margin-top: 28px; padding: 26px 30px;
  background: var(--gold); color: var(--ink); border-radius: 2px;
}
.bonus__title { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.bonus p { margin: 0; font-size: 15px; max-width: 78ch; }
.bonus a { font-weight: 700; border-bottom: 1px solid rgba(10,10,11,.4); }

.train-story { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
.train-story__figure { margin: 0; background: var(--ink); max-width: 380px; justify-self: end; }
.train-story__figure img { width: 100%; }
.train-story__copy p { font-size: 16px; line-height: 1.75; color: #2a2a31; max-width: 62ch; }
.train-story__credits { font-size: 13px !important; color: var(--text-mute) !important; }
.train-story__credits a { border-bottom: 1px solid var(--line); }
.train-story__credits a:hover { color: var(--red); }

@media (max-width: 900px) {
  .train-intro, .train-story { grid-template-columns: 1fr; gap: 28px; }
  .sessions { grid-template-columns: 1fr; }
  .train-story__figure { max-width: 320px; }
}

.price--na { font-size: 13px; font-weight: 700; color: var(--text-mute); text-transform: none; }
.pdp__na {
  margin: 0; padding: 14px 18px; background: var(--bone-2); border-left: 3px solid var(--text-mute);
  font-size: 14px; color: var(--text-mute);
}

/* ---------- L.E.A.R.N. equation ----------------------------------------- */

.learn { margin: 52px 0 0; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.learn__head {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 24px 26px; text-align: center;
}
.learn__brand {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--red);
}
.learn__name { font-size: clamp(17px, 2vw, 23px); font-style: italic; font-weight: 400; color: var(--text); }
.learn__eq {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  font-size: clamp(30px, 4.6vw, 54px); font-weight: 900; color: var(--red); letter-spacing: 0.04em;
}
.learn__eq i { font-style: normal; font-size: .5em; color: var(--text-mute); font-weight: 700; }

.learn__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }
.learn__col { position: relative; background: var(--paper); padding: 26px 20px 24px; }
.learn__letter {
  position: absolute; top: 10px; right: 14px;
  font-size: 44px; font-weight: 900; line-height: 1; color: var(--red); opacity: .10;
}
.learn__word {
  position: relative; font-size: 16px; font-weight: 900; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 2px solid var(--red);
}
.learn__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.learn__col li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.5; color: #2a2a31; }
.learn__col li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--red);
}

/* ---------- Progress strip + client pairs -------------------------------- */

.progress {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.progress__step { display: flex; flex-direction: column; }
.progress__step img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  background: var(--ink-3); filter: grayscale(1) contrast(1.04);
}
.progress__label {
  margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red);
}
.progress__stat { margin-top: 3px; font-size: 13px; color: var(--text-mute); }

.clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.clients__item { margin: 0; background: var(--paper); border: 1px solid var(--line); }
.clients__item img { width: 100%; }

@media (max-width: 900px) {
  .learn__grid { grid-template-columns: repeat(2, 1fr); }
  .progress { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 560px) {
  .learn__grid { grid-template-columns: 1fr; }
}

.progress + .train-story__credits { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.train-story__copy { align-self: center; }

/* ---------- Cart + checkout --------------------------------------------- */

.cartpage, .checkout {
  display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 52px; align-items: start;
  padding-block: clamp(36px, 5vw, 60px);
}

.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 26px; }
.cart-table thead th {
  text-align: left; padding: 0 0 14px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
.cl td { padding: 18px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cl--free td { background: rgba(231,167,0,.07); }
.cl__media { width: 92px; }
.cl__media img { width: 76px; height: 76px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); }
.cl__info { padding-right: 20px !important; }
.cl__name { display: block; font-weight: 700; font-size: 15px; line-height: 1.4; }
.cl__name:hover { color: var(--red); }
.cl__tag {
  display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute);
}
.cl__gift {
  display: inline-block; margin-top: 6px; padding: 3px 8px; background: var(--gold); color: var(--ink);
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.cl__qty { width: 148px; }
.cl__qty .qty { display: inline-flex; }
.cl__fixed { display: inline-block; padding: 9px 0; color: var(--text-mute); font-size: 14px; }
.cl__price { width: 110px; text-align: right; font-weight: 900; font-size: 16px; }
.cl__zero { color: var(--gold-deep); }
.cl__remove { width: 44px; text-align: right; }
.cl__x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--text-mute); padding: 4px 6px; }
.cl__x:hover { color: var(--red); }

/* Summary rail */
.sum { position: sticky; top: 108px; background: var(--paper); border: 1px solid var(--line); padding: 28px 26px; }
.sum__title { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 20px; }
.sum__lines { list-style: none; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.sum__lines li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; font-size: 13.5px; align-items: baseline; }
.sum__q { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.sum__n { line-height: 1.4; }
.sum__n em { font-style: normal; color: var(--gold-deep); font-weight: 700; font-size: 11px; text-transform: uppercase; }
.sum__p { font-weight: 700; white-space: nowrap; }
.sum__rows { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0 0 18px; font-size: 14px; }
.sum__rows dt { color: var(--text-mute); }
.sum__rows dd { margin: 0; text-align: right; font-weight: 700; }
.sum__ship { list-style: none; margin: 0 0 16px; padding: 14px 0; border-block: 1px solid var(--line); display: grid; gap: 10px; }
.sum__ship li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sum__ship em { display: block; font-style: normal; color: var(--text-mute); font-size: 11.5px; margin-top: 2px; }
.sum__note { font-size: 12.5px; color: var(--text-mute); margin: 0 0 16px; line-height: 1.55; }
.sum__where { padding: 16px 0; border-top: 1px solid var(--line); }
.sum__where h3 { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.sum__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 16px; margin-top: 4px; border-top: 2px solid var(--ink);
}
.sum__total span { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sum__total strong { font-size: 26px; font-weight: 900; }
.sum__go { width: 100%; margin-top: 18px; }
.sum__go[disabled] { opacity: .45; pointer-events: none; }

.blocked { background: rgba(174,7,7,.07); border-left: 3px solid var(--red); padding: 16px 18px; margin-bottom: 18px; }
.blocked h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.blocked ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.blocked p { margin: 0; font-size: 12.5px; color: var(--text-mute); }

/* Forms */
.fs { border: 0; margin: 0 0 34px; padding: 0; }
.fs__legend { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 900; text-transform: uppercase; margin-bottom: 20px; }
.fs__n { display: grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--bone); font-size: 12px; border-radius: 50%; }
.fs__note { font-size: 14px; color: var(--text-mute); margin: 0; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.field label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 7px; }
.field__opt { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .7; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 15px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px; color: var(--text);
}
.field input:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.field__hint { margin: 7px 0 0; font-size: 12.5px; color: var(--text-mute); }
/* A rejected send comes back to the form with the reason named and the field
   marked, rather than to a page that says only that something went wrong. */
.form-error {
  margin: 0 0 18px; padding: 12px 14px; font-size: 14.5px;
  background: #fdf0ef; border-left: 4px solid #8f2822; color: #8f2822;
}
.field [aria-invalid="true"] { border-color: #8f2822; }
.field [aria-invalid="true"]:focus { outline-color: #8f2822; border-color: #8f2822; }
.formerror { background: rgba(174,7,7,.08); border-left: 3px solid var(--red); padding: 14px 18px; font-size: 14px; margin-bottom: 24px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pay__box { border: 1px dashed var(--line); padding: 24px; background: var(--bone-2); }
.pay__pending { margin: 0; font-size: 13.5px; color: var(--text-mute); line-height: 1.6; }
.pay__methods { margin: 12px 0 0; font-size: 12px; color: var(--text-mute); }

@media (max-width: 980px) {
  .cartpage, .checkout { grid-template-columns: 1fr; gap: 32px; }
  .sum { position: static; }
  .cl__media { display: none; }
}

/* ---------- Blog --------------------------------------------------------- */

.blog { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 52px; align-items: start; padding-block: clamp(36px,5vw,60px); }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__noimg { display: grid; place-items: center; height: 100%; color: rgba(245,242,236,.2); font-size: 40px; font-weight: 900; }
.post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; color: var(--text-mute); }
.post-card__tag { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.post-card__title { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.post-card__title a:hover { color: var(--red); }
.post-card__excerpt { margin: 0; font-size: 14px; color: var(--text-mute); line-height: 1.6; }

.post-card--feature { grid-column: 1 / -1; flex-direction: row; margin-bottom: 32px; }
.post-card--feature .post-card__media { width: 52%; aspect-ratio: auto; }
.post-card--feature .post-card__body { justify-content: center; padding: 36px 40px; }
.post-card--feature .post-card__title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; }

.blog__side { position: sticky; top: 108px; display: grid; gap: 30px; }
.blog-widget__title { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13.5px; color: var(--text-mute); }
.blog-cats a span { font-size: 11.5px; opacity: .6; }
.blog-cats a:hover { color: var(--red); }
.blog-cats a[aria-current] { color: var(--text); font-weight: 700; }
.blog-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.blog-recent a { display: block; }
.blog-recent__t { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.blog-recent a:hover .blog-recent__t { color: var(--red); }
.blog-recent__d { font-size: 11px; color: var(--text-mute); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager__link { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pager__link:hover { color: var(--red); }
.pager__now { font-size: 12px; color: var(--text-mute); }

/* Single post */
.post-head { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.post-head__bg { position: absolute; inset: 0; background: radial-gradient(100% 90% at 80% 0%, rgba(174,7,7,.28), transparent 60%), linear-gradient(180deg,#101013,#0a0a0b); }
.post-head__in { position: relative; padding-block: clamp(40px,5vw,68px) clamp(30px,4vw,44px); }
.post-head__meta { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: 12px; color: var(--on-dark-mute); }
.post-head__tag { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.post-head__title { font-size: clamp(28px,4vw,52px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; max-width: 22ch; }
.post-hero { margin: 0; background: var(--ink); }
.post-hero img { width: 100%; max-height: 560px; object-fit: cover; }
/* Post body plus a persistent author rail. */
.post-wrap {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start;
  padding-block: clamp(40px,5vw,64px);
}
.article-wrap { max-width: 860px; margin-inline: auto; padding-block: clamp(40px,5vw,64px); }
/* Post bodies run the full content width. Long paragraphs still cap their own
   measure so lines stay readable, but images and embeds get the whole width. */
.post-body { max-width: none; }
/* Images sit inline at a readable size rather than filling the column. Portrait
   scans in particular were running to full height and pushing the text apart. */
.post-body img {
  width: auto; max-width: min(100%, 420px); max-height: 520px;
  height: auto; object-fit: contain;
  margin: 8px 0 22px; border: 1px solid var(--line); background: var(--paper);
}
.post-body .embed img { max-width: none; margin: 0; border: 0; float: none; }

/* Two image treatments, chosen by how much prose the post actually has.
   26% of posts are a title and a linked PDF, where a floated image leaves a
   large empty column; the median post is 232 words and wraps fine. */
@media (min-width: 721px) {
  /* Posts with real copy: images float left and text wraps to the right.
     clear:left stops consecutive images stacking side by side. */
  .post-body--wrap img:not(.embed img) {
    float: left; clear: left;
    margin: 6px 34px 24px 0;
    max-width: min(42%, 380px);
  }
  .post-body--wrap::after { content: ''; display: block; clear: both; }
  .post-body--wrap h2, .post-body--wrap h3 { clear: both; }
}

/* Short posts: no float. The image sits as a modest block so the page reads
   as image, line, button rather than a picture beside an empty column. */
.post-body--stack img:not(.embed img) {
  float: none;
  display: block;
  max-width: min(100%, 320px);
  max-height: 400px;
  margin: 0 0 26px;
}
.post-body img, .prose img { border: 1px solid var(--line); margin: 24px 0; }
.post-body figure, .prose figure { margin: 24px 0; }
.post-body figcaption, .prose figcaption { font-size: 12.5px; color: var(--text-mute); margin-top: 8px; }
.post-doc { margin: 28px 0; }
/* Articles recovered from their PDF wrap each photograph in a figure so the
   caption and the image travel together. The float lives on the figure rather
   than on the image inside it: floating the image alone collapses the figure
   to nothing and the picture escapes the column. */
.post-figure { margin: 6px 0 26px; }
.post-figure img { margin: 0; display: block; }
@media (min-width: 721px) {
  .post-body--wrap .post-figure {
    float: left; clear: left;
    margin: 6px 34px 24px 0;
    max-width: min(42%, 380px);
  }
  .post-body--wrap .post-figure img { max-width: 100%; }
}
.post-pdf { margin: 32px 0 0; font-size: 14px; }
.post-pdf a { color: var(--text-mute); text-decoration: underline; }



.embed { position: relative; padding-top: 56.25%; margin: 24px 0; background: var(--ink); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed--audio { padding-top: 0; height: 152px; }
.embed--audio iframe { position: static; height: 152px; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 0 clamp(48px,6vw,72px); }
.post-nav__link { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 700; line-height: 1.4; }
.post-nav__link span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.post-nav__link:hover { border-color: var(--red); color: var(--red); }
.post-nav__link--next { text-align: right; }

/* Videos + podcast + press + contact */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.embed--tile { margin: 0; }
.podcast-list { display: grid; gap: 20px; }
.podcast-item { border: 1px solid var(--line); background: var(--paper); padding: 8px; }

.press-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press-item a { display: flex; align-items: baseline; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--line); transition: padding .2s var(--ease); }
.press-item a:hover { padding-left: 12px; }
.press-item__title { font-size: 17px; font-weight: 700; flex: 1; }
.press-item a:hover .press-item__title { color: var(--red); }
.press-item__date { font-size: 12.5px; color: var(--text-mute); white-space: nowrap; }
.press-item__go { color: var(--gold-deep); font-size: 18px; }

.contact { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 56px; align-items: start; padding-block: clamp(36px,5vw,60px); }
.contact__intro p { font-size: 15px; color: var(--text-mute); line-height: 1.7; }
.contact__intro a { color: var(--red); border-bottom: 1px solid currentColor; }
.contact__addr { font-size: 14px !important; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.contact__form textarea { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; resize: vertical; }
.contact__form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }

@media (max-width: 900px) {
  .blog { grid-template-columns: 1fr; }
  .blog__side { position: static; }
  .post-grid, .video-grid { grid-template-columns: 1fr; }
  .post-card--feature { flex-direction: column; }
  .post-card--feature .post-card__media { width: 100%; aspect-ratio: 3/2; }
  .contact { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Author rail --------------------------------------------------- */

.author-rail { position: sticky; top: 108px; }
.author {
  background: var(--paper); color: var(--text);
  border: 1px solid var(--line); border-top: 3px solid var(--red);
  padding: 28px 26px 30px;
}
.author__pic {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-deep); margin-bottom: 18px;
}
.author__label {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
}
.author__name { font-size: 22px; font-weight: 900; text-transform: uppercase; margin-bottom: 6px; }
.author__titles {
  margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.06em; color: var(--text-mute);
}
.author__bio { font-size: 13.5px; line-height: 1.65; color: var(--text-mute); margin-bottom: 14px; }
.author .link-more { display: inline-block; margin-top: 4px; }
.author__cta { display: flex; width: 100%; margin-top: 20px; }

@media (max-width: 980px) {
  .post-wrap { grid-template-columns: 1fr; gap: 36px; }
  .author-rail { position: static; max-width: 480px; }
}

/* Post-add state: the button becomes the next step. */
.btn--add.is-added { background: var(--ink); color: var(--gold); }
.btn--add.is-added:hover { background: #000; }
.pdp__add.is-added { background: var(--ink); color: var(--gold); }

.post-pdfnote { clear: both; font-size: 15px; color: var(--text-mute); }

.press-src { font-size: 12.5px; color: var(--text-mute); letter-spacing: 0.04em; }

/* ---------------------------------------------------------------- account --
   The customer portal. Reuses the storefront tokens so it inherits any later
   change to the palette or the type scale. */
.acct-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.acct-card { background: var(--paper); border: 1px solid var(--line); padding: 26px; }
.acct-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.acct-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.acct-tabs a {
  padding: 11px 18px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acct-tabs a:hover { color: var(--text); }
.acct-tabs a.on { color: var(--gold); border-bottom-color: var(--gold); }
.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.acct-stat { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px; }
.acct-stat b { display: block; font-size: 30px; line-height: 1.1; }
.acct-stat span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.acct-order { background: var(--paper); border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 16px; }
.acct-order__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.acct-order__total { font-size: 20px; font-weight: 800; }
.acct-order__items { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.acct-order__items li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.acct-order__price { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.acct-order__again { margin-top: 16px; }
.acct-dls { list-style: none; margin: 0; padding: 0; }
.acct-dl {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); padding: 18px 22px; margin-bottom: 12px;
}

/* Payment area on checkout. */
.pay__error { display: block; }
.pay__warn {
  margin: 14px 0 0; padding: 12px 16px; font-size: 13px; line-height: 1.5;
  background: rgba(174,7,7,.08); border-left: 3px solid var(--red);
}

/* Sign in and create account are single-purpose pages, so they read better in a
   narrow column than stretched across the full grid. */
.acct-narrow { max-width: 460px; }
.acct-submit { width: 100%; margin-top: 4px; }
.acct-alt { margin: 16px 0 0; }
.acct-switch { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--text-mute); }

/* Delivery speed options at checkout. */
.ship-opts { display: grid; gap: 10px; }
.ship-opt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
}
.ship-opt:hover { border-color: var(--gold-deep); }
.ship-opt:has(input:checked) { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.ship-opt input { width: auto; margin: 0; flex: 0 0 auto; }
.ship-opt__name { flex: 1; font-size: 14px; }
.ship-opt__price { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Product options (size and colour) --------------------------- */
.pdp__opts { display: grid; gap: 18px; margin: 0 0 22px; }
.opts { border: 0; padding: 0; margin: 0; }
.opts__label {
  padding: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 9px;
}
.opts__chosen { color: var(--text); letter-spacing: 0; text-transform: none; font-weight: 600; }
.opts__row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; margin: 0; }
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span {
  display: block; padding: 9px 15px; border: 1px solid var(--line); background: var(--paper);
  font-size: 14px; line-height: 1.2; min-width: 46px; text-align: center; transition: border-color .15s, background .15s;
}
.opt input:hover + span { border-color: var(--gold-deep); }
.opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--on-dark); font-weight: 600; }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt.is-off span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.pdp__optnote { margin: 0; font-size: 13px; color: var(--red); }
.cl__variant { display: block; font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.sum__variant { font-style: normal; color: var(--text-mute); }

/* ---------- Photo Vault gallery ----------------------------------------- */

.vault-tabs {
  display: flex; flex-wrap: nowrap; gap: 8px;
  padding-bottom: 30px; margin-bottom: 40px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: thin;
}
.vault-tab {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 13px; border: 1px solid var(--line); background: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.vault-tab span { font-size: 11px; font-weight: 800; color: inherit; opacity: .6; }
.vault-tab:hover { border-color: var(--gold-deep); color: var(--text); }
.vault-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.vault-tab.is-active span { color: var(--gold); opacity: 1; }

.vault-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px;
}
.vault-card {
  display: block; text-align: left; background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.vault-card[hidden] { display: none; }
.vault-card:hover { transform: translateY(-3px); border-color: var(--gold-deep); }
.vault-card__frame { display: block; overflow: hidden; background: #111; aspect-ratio: 4 / 5; }
.vault-card__img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); opacity: .92;
  transition: filter .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease);
}
.vault-card:hover .vault-card__img, .vault-card:focus-visible .vault-card__img {
  filter: grayscale(0) contrast(1); opacity: 1; transform: scale(1.04);
}
.vault-empty { text-align: center; color: var(--text-mute); padding-block: 60px; }
body.vault-lock { overflow: hidden; }

/* Lightbox: full-bleed viewer with a filmstrip scrubber, a literal callback
   to the 35mm slides and contact sheets this archive was scanned from. */
.vault-lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
}
.vault-lightbox.is-open { display: block; }
.vault-lightbox__scrim { position: absolute; inset: 0; background: rgba(10, 10, 11, .95); }
.vault-lightbox__in {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px 70px;
}
.vault-lightbox__close {
  position: absolute; top: 18px; right: 24px; z-index: 2;
  font-size: 34px; line-height: 1; color: var(--on-dark-mute); background: none; border: 0;
}
.vault-lightbox__close:hover { color: var(--on-dark); }
.vault-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-dark);
  background: rgba(245, 242, 236, .06); color: var(--on-dark); font-size: 18px;
}
.vault-lightbox__nav:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.vault-lightbox__nav--prev { left: 14px; }
.vault-lightbox__nav--next { right: 14px; }
.vault-lightbox__stage { max-height: 62vh; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.vault-lightbox__stage img { max-height: 62vh; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.vault-lightbox__cap { display: none; max-width: 62ch; text-align: center; color: var(--on-dark); }
.vault-lightbox__cat {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.vault-lightbox__cap p { margin: 0; color: var(--on-dark-mute); font-size: 15px; }

.vault-film {
  display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.vault-film__frame {
  flex: 0 0 auto; width: 56px; height: 70px; padding: 0; border: 2px solid transparent; background: #111;
  opacity: .5; transition: opacity .2s, border-color .2s;
}
.vault-film__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.vault-film__frame:hover { opacity: .85; }
.vault-film__frame.is-active { opacity: 1; border-color: var(--gold); }

@media (max-width: 640px) {
  .vault-lightbox__in { padding: 16px 14px; }
  .vault-lightbox__nav { width: 38px; height: 38px; }
  .vault-lightbox__nav--prev { left: 4px; }
  .vault-lightbox__nav--next { right: 4px; }
}