/* ══════════════════════════════════════════════════════════════════════════
   Joe Finch — Editions · storefront design preview
   Local prototype for review. Not the live shop.

   Backdrop: deep green-black museum wall (#101d1e) with the catalogue's own
   seamless texture layer. Warm ivory type, soft brass accents.

   Structure:  tokens · reset · backdrop · header · intro (intro.css) · collection ·
               feature · guide · footer · product view · viewer · drawer ·
               responsive · motion
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts: the CI set ──────────────────────────────────────────────────────
   Montserrat 400 body, Montserrat 600 titles, Montserrat 400 italic subtitles,
   JetBrains Mono 300 controls, Great Vibes editorial accent.
   Merriweather is not part of the supplied CI set and is no longer used.        */
@font-face { font-family: Montserrat; src: url("assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url("assets/fonts/Montserrat-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: JetBrains Mono; src: url("assets/fonts/JetBrainsMono-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("assets/fonts/GreatVibes-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Remapped onto the supplied CI set. Ground, surface and accent are proposals in
   role only; the values are supplied. White carries every outline, hover and all
   type. No gold.                                                                 */
:root {
  --ink:            #0C1C1F;                    /* Plum, the page ground      */
  --ink-deep:       #0C1C1F;
  --ink-lift:       #173F4B;                    /* Blue Deep, the raised surface */
  --ivory:          #FFFFFF;                    /* white, all type            */
  --ivory-70:       rgba(255, 255, 255, 0.62);
  --ivory-52:       rgba(255, 255, 255, 0.62);
  --ivory-34:       rgba(255, 255, 255, 0.40);
  --brass:          #23717E;                    /* The Blue, accent, PROPOSAL */
  --brass-soft:     rgba(35, 113, 126, 0.34);   /* subdued, never a border fill */
  --rule:           rgba(255, 255, 255, 0.13);
  --rule-soft:      rgba(255, 255, 255, 0.08);
  --outline:        rgba(255, 255, 255, 0.62);  /* control outline at rest    */

  --font-sans:    Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Great Vibes", cursive;
  --font-serif:   "Great Vibes", cursive;

  --header-h: 70px;
  --pad-x: clamp(20px, 5vw, 88px);
  --section-y: clamp(76px, 11vh, 152px);
  --max: 1440px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: 220ms var(--ease);
}

/* Registered so the spotlight can glide instead of jumping. */
@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --ly { syntax: "<percentage>"; inherits: false; initial-value: 44%; }

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -150%);
  z-index: 120; padding: 12px 20px; background: var(--brass); color: var(--ivory);
  font: 300 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* ── Backdrop ───────────────────────────────────────────────────────────── */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.backdrop__texture {
  position: absolute; inset: 0;
  /* Texture deprecated and removed. Flat petrol ground. */
  background-color: var(--ink);
  background-image: none;
  opacity: 1;
}
/* Flat petrol ground. No texture, no gradient, no lit wall: the artwork floats. */
.backdrop__depth { position: absolute; inset: 0; background: none; }
main, .site-footer, .site-header { position: relative; z-index: 1; }

/* ── Type helpers ───────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 14px;
  font: 400 12px/1.5 var(--font-sans); font-style: italic;
  letter-spacing: 0;
  color: var(--ivory-70);
}
.mono { font-family: var(--font-mono); font-weight: 300; }

.section-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 68px); }
.section-head--center { max-width: 56ch; margin-inline: auto; text-align: center; }
.section-title {
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 600; line-height: 1.12; letter-spacing: 0.005em;
  text-transform: uppercase;
}
/* The Great Vibes accent is deliberate and keeps its own case: it is never shouted. */
.section-title em { font-family: "Great Vibes", cursive; font-style: normal; font-weight: 400;
  letter-spacing: 0.015em; text-transform: none; }
.section-body {
  margin: 0; max-width: 56ch;
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.5; color: var(--ivory-70);
}
.section-head--center .section-body { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Outlined, mono, stationary. Reference shape: 1px outline, 4px radius, .2em
   tracking. No fill, no wipe, no lift, no fade to unreadable: colour and border
   carry the hover and the type stays legible at every state.                     */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 clamp(16px, 1.6vw, 26px);
  border: 1px solid var(--outline); border-radius: 4px;
  background: none; cursor: pointer;
  font: 300 10.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70);
  transition: color var(--fade), border-color var(--fade);
}
.button:hover, .button:focus-visible { color: var(--ivory); border-color: var(--ivory); }
.button--primary { color: var(--ivory); border-color: rgba(255, 255, 255, 0.9); }
.button--primary:hover, .button--primary:focus-visible { border-color: var(--ivory); }
.button--quiet { color: var(--ivory-70); border-color: var(--outline); }
.button--block { width: 100%; }
.button[disabled] { color: var(--ivory-34); border-color: var(--rule); cursor: not-allowed; }

.link-button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 300 10.5px/1.6 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70); border-bottom: 1px solid var(--rule);
  transition: color var(--fade), border-color var(--fade);
}
.link-button:hover, .link-button:focus-visible { color: var(--ivory); border-color: var(--ivory); }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 15px;
  border: 1px solid var(--outline); border-radius: 4px; background: none;
  cursor: pointer;
  font: 300 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70);
  transition: color var(--fade), border-color var(--fade);
}
.icon-button:hover, .icon-button:focus-visible { color: var(--ivory); border-color: var(--ivory); }

:where(a, button, [tabindex]):focus-visible { outline-offset: 3px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.site-header__inner {
  height: var(--header-h);
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 4vw, 60px);
  background: var(--ink);
}
.site-header__rule { display: none; }

.mark { display: flex; align-items: baseline; gap: 12px; }
.mark__name {
  font: 400 12.5px/1 var(--font-sans);
  letter-spacing: 0.30em; text-transform: uppercase;
}
.mark__label {
  font: 300 9.5px/1 var(--font-mono);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ivory-34);
}
.mark__sub { display: block; margin-top: 8px; font: 300 10px/1.5 var(--font-mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-34); }

.site-nav { display: flex; gap: clamp(18px, 2.6vw, 40px); margin-left: auto; }
.site-nav a {
  font: 300 10.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70); padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color var(--fade), border-color var(--fade);
}
.site-nav a:hover { color: var(--ivory); border-color: var(--ivory); }

.site-header__actions { display: flex; align-items: center; gap: 18px; }
.preview-tag {
  font: 300 9.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-34);
}
.bag-button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border: 1px solid var(--outline); border-radius: 4px;
  background: none; cursor: pointer;
  font: 300 10.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70);
  transition: border-color var(--fade), color var(--fade);
}
.bag-button:hover, .bag-button:focus-visible { border-color: var(--ivory); color: var(--ivory); }
.bag-button__count { color: var(--ivory); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Built and then replaced: the opening of this page is now the scroll-driven
   intro (markup in index.html, choreography in intro.css, progress in
   intro.js). The former .hero, .ghost, .hero__title, .hero__body,
   .hero__actions, .hero__meta, .dot and .hero__caption rules were removed
   together with the markup they styled. The shared stage rules directly below
   are kept on purpose: the Gevecht feature band and the product overlay still
   use .stage__glow, .stage__light and .frame. */

/* Stages: the wall around the art, and the light that moves across it */
.feature__media, .overlay__stage {
  position: relative; isolation: isolate; --lx: 50%; --ly: 44%;
}
.stage__glow, .stage__light { display: none; }
.stage__glow {
  background: radial-gradient(closest-side at 50% 42%,
    rgba(255, 238, 208, 0.14), rgba(255, 238, 208, 0.045) 46%, transparent 74%);
}
.stage__light {
  background: radial-gradient(closest-side at var(--lx) var(--ly),
    rgba(255, 240, 212, 0.17), rgba(255, 240, 212, 0.05) 44%, transparent 72%);
  opacity: 0; transition: opacity 520ms var(--ease);
}
[data-spotlight].is-lit .stage__light { opacity: 1; }

.frame { position: relative; z-index: 1; padding: 0; background: none; border: 0; }
.frame__inner {
  border: 0;
  background: transparent;
  padding: 0;
  display: grid; place-items: center;
}
.frame__img {
  width: auto; height: auto; max-width: 100%; max-height: min(70vh, 760px);
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

.light-toggle {
  display: none !important;
  position: absolute; z-index: 3; left: 12px; bottom: 12px;
  padding: 11px 15px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--ink-deep); cursor: pointer;
  font: 300 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ivory-70);
}
.light-toggle[aria-pressed="true"] { border-color: var(--brass); color: var(--ivory); }
@media (pointer: coarse) { .light-toggle { display: none !important; } }

/* ── Collection ─────────────────────────────────────────────────────────── */
.collection, .guide {
  max-width: var(--max); margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
.feature { border-top: 1px solid var(--rule-soft); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 4px;
  background: none; cursor: pointer;
  font: 300 10.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70);
  transition: color var(--fade), border-color var(--fade);
}
.chip:hover, .chip:focus-visible { color: var(--ivory); border-color: var(--ivory); }
/* The selected filter is carried by outline and type, never by a filled chip. */
.chip[aria-pressed="true"] { color: var(--ivory); border-color: var(--ivory); background: none; }
.chip__count { font-size: 9.5px; opacity: 0.6; }
.filters__status {
  margin: 0 0 44px; min-height: 1.4em;
  font: 300 10px/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory-34);
}

.grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.6vw, 68px) clamp(22px, 2.6vw, 46px);
}
.card { min-width: 0; }
/* Petrol cards: the card surface is Blue Deep, never white. */
.card__button {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
/* No plate, no panel, no border. Like the reference, the artwork floats directly on
   the petrol ground and its own soft shadow is the only thing that marks it.        */
.card__media {
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0; background: none;
  min-height: clamp(240px, 30vw, 400px);
}
.card__media img {
  max-width: 100%; max-height: clamp(200px, 26vw, 340px);
  width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.55));
}
/* Stationary: nothing on the card moves, and no box lights up around the work.
   Keyboard users still get a visible focus ring on the whole card button.          */
.card__button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: 8px; }
.card__body { display: block; padding-top: 20px; }
.card__title {
  display: block;
  font: 600 clamp(0.95rem, 1.15vw, 1.1rem)/1.3 var(--font-sans);
  letter-spacing: 0.01em; text-transform: uppercase;
}
.card__meta {
  display: block; margin-top: 7px;
  font: 300 10.5px/1.7 var(--font-mono); letter-spacing: 0.09em; color: var(--ivory-52);
}
.card__price {
  display: block; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule-soft);
  font: 300 11px/1.6 var(--font-mono); letter-spacing: 0.1em; color: var(--ivory);
}
.card__price-note { display: block; color: var(--ivory-34); }
.grid__empty {
  margin: 0; padding: 60px 0; text-align: center;
  font: 300 11px/1.7 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory-34);
}

/* ── Feature band (Gevecht) ─────────────────────────────────────────────── */
.feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 84px); align-items: center;
  max-width: var(--max); margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
.feature__media { border: 0; background: none; }
.feature__media img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  object-fit: contain;
}
.feature__media figcaption {
  position: relative; z-index: 1; padding: 14px 18px; border-top: 1px solid var(--rule-soft);
  font: 300 10px/1.7 var(--font-mono); letter-spacing: 0.08em; color: var(--ivory-34);
}
.feature__copy { max-width: 46ch; }
.feature__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ── Edition guide ──────────────────────────────────────────────────────── */
.guide__columns {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 56px);
  border-top: 1px solid var(--rule-soft); padding-top: clamp(34px, 4vw, 58px);
}
.guide__col { min-width: 0; }
.guide__label {
  margin: 0 0 12px;
  font: 400 1.06rem/1.3 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase;
}
.guide__price {
  margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-soft);
  font: 300 15px/1.4 var(--font-mono); color: var(--ivory);
}
.guide__lines { margin: 0 0 20px; }
.guide__lines li {
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
  font: 300 11px/1.6 var(--font-mono); letter-spacing: 0.05em; color: var(--ivory-70);
}
.guide__lines li:last-child { border-bottom: 0; }
.guide__note { margin: 0; font-size: 0.86rem; line-height: 1.7; color: var(--ivory-34); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--rule); margin-top: var(--section-y); }
.site-footer__inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(46px, 6vw, 74px) var(--pad-x) clamp(30px, 5vw, 46px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 4vw, 70px); align-items: start;
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-bottom: 22px; }
.site-footer__nav a {
  font: 300 10.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ivory-52); border-bottom: 1px solid var(--rule-soft); padding-bottom: 3px;
  transition: color var(--fade), border-color var(--fade);
}
.site-footer__nav a:hover { color: var(--ivory); border-color: var(--ivory); }
.site-footer__note {
  grid-column: 2; margin: 0; max-width: 62ch;
  font: 300 10px/1.9 var(--font-mono); letter-spacing: 0.06em; color: var(--ivory-34);
}

.preview-flag {
  position: fixed; left: var(--pad-x); bottom: 18px; z-index: 55; margin: 0;
  padding: 10px 14px; border: 1px solid var(--outline); border-radius: 4px;
  background: var(--ink-deep);
  font: 300 9.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70); pointer-events: none;
}
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.noscript {
  position: fixed; inset: auto 0 0 0; z-index: 130; margin: 0; padding: 14px var(--pad-x);
  background: var(--brass); color: var(--ivory); font: 300 11px/1.6 var(--font-mono);
}

/* ── Overlays: shared shell ─────────────────────────────────────────────── */
.overlay, .viewer, .drawer { position: fixed; inset: 0; z-index: 100; }
.overlay { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.overlay[hidden], .viewer[hidden], .drawer[hidden] { display: none; }
.overlay__scrim, .drawer__scrim {
  position: absolute; inset: 0; background: rgba(6, 12, 13, 0.84);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.overlay__panel {
  position: relative; height: 100%; width: 100%; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 65%) minmax(0, 35%);
  grid-template-rows: minmax(0, 1fr);
  background: var(--ink-deep);
}
.overlay__panel > * { min-height: 0; min-width: 0; }

/* ── Product view: art stage ────────────────────────────────────────────────
   Two rows: the artwork takes every pixel that is left, the footer keeps its own row
   and can never overlap the work. min-height: 0 on the stage and the fit box is what
   lets the artwork actually shrink; the image is then sized in measured pixels by
   app.js so a percentage max-height never resolves against an indefinite height.     */
.overlay__stage {
  position: relative; min-height: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.stage__fit {
  min-height: 0; height: 100%; position: relative;
  display: grid; place-items: center;
  padding: clamp(18px, 3vw, 48px);
  overflow: hidden;
}
.overlay__img {
  display: block; position: relative; z-index: 1;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.6));
}
.stage__footer {
  position: relative; z-index: 2; min-height: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 26px;
  padding: clamp(12px, 1.6vw, 18px) clamp(18px, 3vw, 48px) clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--rule-soft);
  background: var(--ink-deep);
}
.stage__ref {
  margin: 0; font: 300 10px/1.7 var(--font-mono); letter-spacing: 0.06em; color: var(--ivory-34);
}

/* ── Product view: purchase panel ───────────────────────────────────────── */
.overlay__purchase {
  display: flex; flex-direction: column; min-width: 0;
  border-left: 1px solid var(--rule);
  background: var(--ink-deep);
}
.purchase__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 2.6vw, 40px) clamp(22px, 2.6vw, 40px) 26px;
}
.purchase__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.purchase__head .eyebrow { margin-bottom: 0; }
.purchase__title {
  margin: 22px 0 12px;
  font-size: clamp(1.4rem, 1.9vw, 1.85rem); font-weight: 600; line-height: 1.12;
  text-transform: uppercase; letter-spacing: 0.005em;
}
.purchase__meta {
  margin: 0 0 20px;
  font: 300 10.5px/1.8 var(--font-mono); letter-spacing: 0.08em; color: var(--ivory-52);
}
.purchase__body {
  margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9rem; line-height: 1.78; color: var(--ivory-70);
}

.fieldset { margin-bottom: 26px; }
.fieldset legend {
  margin-bottom: 12px;
  font: 300 9.5px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory-34);
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.option {
  padding: 12px 15px; border: 1px solid var(--outline); border-radius: 4px;
  background: none; cursor: pointer; text-align: left;
  font: 300 10.5px/1.5 var(--font-mono); letter-spacing: 0.12em; color: var(--ivory-70);
  transition: color var(--fade), border-color var(--fade);
}
.option:hover, .option:focus-visible { color: var(--ivory); border-color: var(--ivory); }
.option[aria-pressed="true"] { border-color: var(--ivory); color: var(--ivory); background: none; }
.option__sub { display: block; margin-top: 5px; font-size: 9.5px; color: var(--ivory-34); }
.option[aria-pressed="true"] .option__sub { color: var(--ivory-52); }

.museum { margin-bottom: 26px; padding: 20px; border: 1px solid var(--rule); background: none; }
.museum__label {
  margin: 0 0 8px; font: 300 10px/1 var(--font-mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory);
}
.museum__note { margin: 0 0 16px; font-size: 0.84rem; line-height: 1.7; color: var(--ivory-52); }

.purchase__buy {
  flex: 0 0 auto; padding: 22px clamp(22px, 2.6vw, 40px) clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--rule); background: var(--ink-deep);
}
.purchase__price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.price { font: 300 1.28rem/1.2 var(--font-mono); color: var(--ivory); }
.price__note { font: 300 10px/1.6 var(--font-mono); letter-spacing: 0.08em; color: var(--ivory-34); text-align: right; }
.purchase__disclaimer {
  margin: 14px 0 0; font: 300 9.5px/1.75 var(--font-mono);
  letter-spacing: 0.05em; color: var(--ivory-34);
}
.purchase__ref {
  margin: 12px 0 0; font-size: 9.5px; line-height: 1.7;
  letter-spacing: 0.05em; color: rgba(242, 236, 225, 0.24); overflow-wrap: anywhere;
}

/* ── Image viewer ───────────────────────────────────────────────────────────
   One image, fitted. The stage is the only flexible row and it carries min-height: 0,
   so the panel can shrink on a short screen instead of pushing the tools off.          */
.viewer { display: grid; place-items: center; min-height: 0; padding: clamp(12px, 2.4vw, 34px); }
.viewer__panel {
  position: relative; z-index: 1; min-height: 0;
  width: 100%; height: 100%; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--rule); background: var(--ink-deep);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9);
}
.viewer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 36px) 16px;
}
.viewer__head .eyebrow { margin-bottom: 8px; }
.viewer__title { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase; }
.viewer__stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center; overflow: hidden;
  background: none;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  cursor: grab; touch-action: none;
}
.viewer__stage.is-panning { cursor: grabbing; }
.viewer__stage.is-zoomed { cursor: grab; }
.viewer__stage img {
  display: block;
  /* app.js writes a measured pixel size; these two are the safety net if the stage
     has no box yet, so the image can never render at full natural size. */
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}
.viewer__tools { justify-content: flex-end; }
.viewer__hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: 300 9.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ivory-34); pointer-events: none;
}
.viewer__tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 26px;
  padding: 16px clamp(20px, 2.6vw, 36px);
}
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 15px; border: 1px solid var(--outline); border-radius: 4px;
  background: none; cursor: pointer;
  font: 300 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-70);
  transition: color var(--fade), border-color var(--fade);
}
.thumb:hover, .thumb:focus-visible { color: var(--ivory); border-color: var(--ivory); }
.thumb[aria-pressed="true"] { border-color: var(--ivory); color: var(--ivory); }
.zoom { display: flex; align-items: center; gap: 12px; }
.zoom .icon-button { min-width: 38px; font-size: 13px; }
.zoom__level { min-width: 52px; text-align: center;
  font: 300 10px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--ivory-52); }
.viewer__note {
  margin: 0; padding: 0 clamp(20px, 2.6vw, 36px) clamp(20px, 2.4vw, 30px);
  font: 300 9.5px/1.75 var(--font-mono); letter-spacing: 0.05em; color: var(--ivory-34);
}

/* ── Bag drawer ─────────────────────────────────────────────────────────── */
.drawer { z-index: 105; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%); display: flex; flex-direction: column;
  border-left: 1px solid var(--rule); background: var(--ink-deep);
  box-shadow: -40px 0 90px -50px rgba(0, 0, 0, 0.9);
}
.drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 30px) 16px;
}
.drawer__head .eyebrow { margin-bottom: 8px; }
.drawer__title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; }
.drawer__flag {
  margin: 0 clamp(20px, 2.4vw, 30px) 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
  font: 300 9.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory);
}
.bag { flex: 1 1 auto; overflow-y: auto; padding: 0 clamp(20px, 2.4vw, 30px); }
.bag__line {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
}
.bag__thumb {
  display: grid; place-items: center; padding: 6px;
  border: 1px solid var(--rule); background: none;
}
.bag__thumb img { max-height: 58px; width: auto; height: auto; object-fit: contain; }
.bag__title { margin: 0 0 6px; font: 400 0.86rem/1.4 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; }
.bag__variant { margin: 0 0 12px; font: 300 10px/1.7 var(--font-mono); color: var(--ivory-52); }
.bag__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 2px; }
.qty button {
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  font: 300 13px/1 var(--font-mono); color: var(--ivory-52);
}
.qty button:hover { color: var(--ivory); }
.qty span { min-width: 26px; text-align: center; font: 300 11px/1 var(--font-mono); }
.bag__line-total { font: 300 11.5px/1 var(--font-mono); }
.bag__empty {
  margin: 0; padding: 40px clamp(20px, 2.4vw, 30px); text-align: center;
  font: 300 10.5px/1.8 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ivory-34);
}
.drawer__foot {
  flex: 0 0 auto; padding: 22px clamp(20px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--rule); background: var(--ink-deep);
}
.bag__total {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px;
  font: 300 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-70);
}
.bag__total span:last-child { font-size: 1.16rem; letter-spacing: 0.04em; color: var(--ivory); }
.drawer__foot .link-button { margin-top: 16px; }
.drawer__note { margin: 14px 0 0; font: 300 9.5px/1.75 var(--font-mono); letter-spacing: 0.05em; color: var(--ivory-34); }

/* ── Motion preferences ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .guide__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide__col:last-child { grid-column: span 2; }
}
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__note { grid-column: 1; }
}
@media (max-width: 980px) {
  .overlay__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    height: auto; min-height: 100%; }
  .stage__fit { padding: clamp(12px, 3vw, 26px); }
  /* One scroll only: the overlay itself. The purchase column stops being a
     second scroll area, so a thumb swipe moves the whole product page. */
  .overlay__purchase { border-left: 0; border-top: 1px solid var(--rule);
    max-height: none; min-height: 0; overflow: visible; }
  .purchase__scroll { min-height: 0; overflow: visible; }
  .purchase__buy { position: sticky; bottom: 0; background: var(--ink-deep); }
}
@media (max-height: 620px) {
  .viewer { padding: 10px; }
  .viewer__head { padding: 12px 16px 8px; }
  .viewer__tools { padding: 10px 16px; }
  .viewer__panel { height: 100%; }
  .stage__footer { padding: 10px 16px; }
}
@media (max-width: 760px) {
  :root { --pad-x: 20px; --header-h: 64px; }
  .mark__logo { width: 90px; }
  .site-nav a:nth-child(n + 2) { display: none; }
  .preview-tag { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .guide__columns { grid-template-columns: minmax(0, 1fr); }
  .guide__col:last-child { grid-column: auto; }
  .viewer__panel { height: 100%; }
  .zoom { width: 100%; justify-content: space-between; }
  .preview-flag { bottom: 12px; }
}
@media (max-width: 420px) {
  .mark { gap: 9px; }
  .mark__label { display: none; }
}

@media print {
  .backdrop, .site-header, .overlay, .viewer, .drawer, .preview-flag { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── CI: the supplied logo replaces the typed wordmark ─────────────────── */
.mark { display: flex; align-items: center; gap: 12px; }
.mark__logo { display: block; width: 110px; height: auto; }
.site-footer__mark .mark__logo { width: clamp(132px, 12vw, 190px); }
.feature__media { margin: 0; }

/* ── Magnifier lens ─────────────────────────────────────────────────────────
   A real circular lens over the artwork. It shows the best available source, clipped
   to the displayed image's own content bounds, so the coordinates are the full image's
   coordinates and not the stage's. Subtle blue outline; no simulated light anywhere.   */
.stage__fit, .viewer__stage { position: relative; }
.lens {
  position: absolute; z-index: 4; top: 0; left: 0;
  width: var(--lens-size, 176px); height: var(--lens-size, 176px);
  margin: calc(var(--lens-size, 176px) / -2) 0 0 calc(var(--lens-size, 176px) / -2);
  border-radius: 50%; overflow: hidden; pointer-events: none;
  border: 1px solid rgba(35, 113, 126, 0.9);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.75);
  opacity: 0; transition: opacity 120ms linear;
  background: var(--ink-lift);
}
.lens[data-visible="true"] { opacity: 1; }
.lens img {
  position: absolute; top: 0; left: 0;
  max-width: none; max-height: none; transform-origin: 0 0;
  user-select: none; -webkit-user-drag: none;
}
.stage__actions { display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { :root { --lens-size: 132px; } }
@media (prefers-reduced-motion: reduce) { .lens { transition: none; } }

/* ── CI: controls are stationary ──────────────────────────────────────────
   Hover and focus change colour and border only. No translate, no lift, no scale,
   on any control, button, chip, option, thumb or card.                            */
.button, .icon-button, .link-button, .bag-button, .chip, .option, .thumb,
.card__button, .light-toggle, .qty button { transform: none; }
.button:hover, .button:focus-visible, .button:active,
.icon-button:hover, .link-button:hover, .bag-button:hover,
.chip:hover, .option:hover, .thumb:hover,
.card__button:hover, .card__button:hover .card__media img { transform: none; }

/* the Limited filter's collection subsection */
.grid { position: relative; }
.grid__collection {
  grid-column: 1 / -1; margin: 0 0 clamp(18px, 2vw, 30px);
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
}
.grid__collection-label {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  letter-spacing: -0.011em; text-transform: uppercase;
}
.grid__collection-note { font-size: 0.92rem; color: var(--ivory-70); }

/* ── CI: white focus ring everywhere ───────────────────────────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}