/* ═══════════════════════════════════════════════════════════════════════
   typeart.co.uk — house style

   Ink on paper. The page is painted the logo's own paper colour (#FEFEFE) so
   the lockup sits on it without a seam. Everything else is restraint: one
   serif, one sans, hairline rules, and gold used only where the eye should
   stop. The pieces themselves are the only saturated thing on the site, and
   they are shown against darkness, because that is the only way frosted
   acrylic reads.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --paper: #FEFEFE;          /* sampled from the logo artwork */
  --paper-2: #F7F5F1;        /* the quieter band, for alternation */
  --paper-3: #F1EEE8;
  --noir: #0B0A08;           /* the gallery walls */
  --noir-2: #15130F;
  --ink: #12110E;
  --ink-soft: #2E2B25;
  --grey: #6B665C;
  --grey-faint: #A29C90;
  --line: #E7E3DB;
  --line-strong: #D2CCC0;
  --gold: #A8873C;
  --gold-soft: #C0A054;
  --gold-pale: #E8DCBC;
  --error: #8E2F22;
  --ok: #3F5D43;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;

  --space: clamp(64px, 9vw, 148px);
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 350;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
::selection { background: var(--gold-pale); color: var(--ink); }

/* ── typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(40px, 6.4vw, 86px); }
h2 { font-size: clamp(30px, 4.4vw, 56px); }
h3 { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2; }

p.lede {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--ink-soft);
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

/* A hairline that grows out of the heading, rather than a centred dash. */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule-gold {
  border: 0; height: 1px; width: 64px; margin: 30px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 940px; }
section { padding: var(--space) 0; position: relative; }
.center { text-align: center; }
.muted { color: var(--grey); }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.d1.in { transition-delay: .09s; }
.reveal.d2.in { transition-delay: .18s; }
.reveal.d3.in { transition-delay: .27s; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  position: relative;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  transform: translateY(-2px);
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.wide { width: 100%; text-align: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.small { padding: 12px 26px; font-size: 10px; }

/* A quieter call: type with a hairline that draws itself on hover. */
.link-quiet {
  display: inline-block; text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  padding-bottom: 6px; position: relative; color: var(--ink);
}
.link-quiet::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--line-strong);
}
/* a gold hairline draws itself over the grey one */
.link-quiet::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease); z-index: 1;
}
.link-quiet:hover::before { transform: scaleX(1); transform-origin: left; }

/* ── header ─────────────────────────────────────────────────────────────── */
/* Floats clear of the page rather than sitting on it: a detached bar with its
   own edge and shadow, which lifts once you start scrolling. */
/* At the top of the page it is barely there — a hairline and nothing else, so
   the page opens on the work rather than on chrome. Once you scroll it detaches
   into a floating bar. No boxed card at rest: the border was what made it read
   as a toolbar. */
.ta-header {
  position: sticky; top: 0; z-index: 60;
  padding: 0 var(--gutter);
  transition: padding .5s var(--ease);
}
.ta-header .wrap {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px);
  padding: 22px clamp(6px, 1.4vw, 22px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  transition: padding .5s var(--ease), box-shadow .5s var(--ease),
              border-color .5s var(--ease), background .5s var(--ease);
}
.ta-header.tight { padding-top: 10px; }
.ta-header.tight .wrap {
  padding: 12px clamp(14px, 1.8vw, 26px);
  border-color: var(--line);
  box-shadow: 0 20px 50px -34px rgba(18,17,14,.5);
}

/* a hairline separating browsing from buying */
.nav-rule {
  width: 1px; height: 22px; background: var(--line);
  margin: 0 clamp(2px, 0.8vw, 10px);
}

/* ── header menus ───────────────────────────────────────────────────────── */
.menu { position: relative; }
.menu-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--ink-soft);
}
.menu-trigger:hover, .menu[data-open="true"] .menu-trigger { color: var(--gold); }
.chev {
  width: 5px; height: 5px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .35s var(--ease);
}
.menu[data-open="true"] .chev { transform: rotate(225deg) translate(-2px, -2px); }

.menu-panel {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px; padding: 10px 0;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -38px rgba(18, 17, 14, .38);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.menu[data-open="true"] .menu-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Bridge the gap between the trigger and the panel. Without this the pointer
   crosses 18px of dead space on its way down, is briefly over neither element,
   and mouseleave closes the menu before it can be used. */
.menu-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
}

/* A quiet list of names. These sit inside <nav>, so the uppercase, wide-tracked
   nav-link rule applies unless it is explicitly undone. */
.ta-header nav .menu-panel a {
  display: block; padding: 11px 24px; text-decoration: none; white-space: nowrap;
  font-family: var(--serif); font-size: 17px; font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--ink-soft);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.ta-header nav .menu-panel a:hover,
.ta-header nav .menu-panel a:focus-visible {
  color: var(--gold); background: var(--paper-2);
}
/* the last entry is the catch-all, set apart by a hairline */
.ta-header nav .menu-panel a:last-child {
  margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}

@media (max-width: 900px) { .menu.hide-m { display: none; } }
.brand { text-decoration: none; display: flex; align-items: center; min-width: 0; }
.brand img {
  height: 86px; width: auto; display: block;
  transition: height .5s var(--ease), opacity .3s;
}
.ta-header.tight .brand img { height: 56px; }
.brand:hover img { opacity: .78; }

.ta-header nav {
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}
/* 10.5px at .24em was too small to be read and too tracked to be scanned. */
.ta-header nav a {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft); position: relative; padding: 4px 0;
}
.ta-header nav a.hide-m::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.ta-header nav a.hide-m:hover::after { transform: scaleX(1); transform-origin: left; }
/* the nav-link colour rules out-specify .btn, so restate the button here */
.ta-header nav a.btn { padding: 13px 28px; color: var(--paper); }
.ta-header nav a.btn:hover { color: var(--ink); }
/* An icon, not a word: "Basket" set in wide caps next to a black CTA read as a
   second button. The count rides on the corner. */
.basket-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; text-decoration: none; color: var(--ink-soft);
  border: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.basket-chip:hover { color: var(--gold); border-color: var(--line); }
.basket-icon { width: 21px; height: 21px; display: block; }
.basket-chip b {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--paper);
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0; border-radius: 9px;
}

/* ── mobile navigation ──────────────────────────────────────────────────── */
.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid transparent; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink-soft);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav-toggle:hover { color: var(--gold); border-color: var(--line); }
.bars, .bars::before, .bars::after {
  display: block; width: 19px; height: 1px; background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column;
  max-width: 1440px; margin: 0 auto;
  padding: 6px clamp(6px, 1.4vw, 22px) 26px;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--serif); font-size: 20px; color: var(--ink-soft);
  text-decoration: none; padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav-head {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  margin: 22px 4px 6px;
}
/* The default button tracking is too wide for a long label in a narrow
   column — it overflowed rather than wrapping. */
.mobile-nav .btn {
  margin-top: 22px; text-align: center;
  padding: 18px 20px; letter-spacing: .16em; white-space: normal;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .ta-header nav { gap: 6px; }
}
@media (max-width: 900px) {
  .ta-header nav .hide-m { display: none; }
  .ta-header nav { gap: 16px; }
  .brand img { height: 52px; }
  .ta-header.tight .brand img { height: 44px; }
}

/* ── announcement strip ─────────────────────────────────────────────────── */
/* A single quiet line on the landing page, not a promo bar: ink ground, one
   gold mark, and the whole strip is the link. */
.announce {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--noir); color: #EFEAE0; text-decoration: none;
  padding: 15px clamp(20px, 4vw, 56px);
  font-size: 13.5px; line-height: 1.5;
  border-bottom: 1px solid rgba(239, 234, 224, .12);
  transition: background .45s var(--ease);
}
.announce:hover { background: #141210; color: #EFEAE0; }
.announce-tag {
  flex: none; font-size: 9.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--noir); background: var(--gold-soft);
  padding: 4px 10px;
}
.announce-text { flex: 1 1 auto; min-width: 0; color: #C4BDAF; }
.announce-text em { font-family: var(--serif); font-style: normal; font-size: 16px; color: #F6F2E8; }
.announce-price {
  flex: none; font-family: var(--serif); font-size: 17px; color: var(--gold-soft);
}
.announce-go { flex: none; color: var(--gold-soft); transition: transform .45s var(--ease); }
.announce:hover .announce-go { transform: translateX(5px); }
@media (max-width: 640px) {
  .announce { gap: 10px 14px; font-size: 12.5px; }
  .announce-go { display: none; }
}

/* ── full-bleed hero banner ─────────────────────────────────────────────── */
/* The supplied artwork spans the whole viewport, edge to edge, with no
   container gutter — it is the design, not an illustration inside a layout. */
.hero-banner { padding: 0; }
.hero-banner picture { display: block; }
.hero-banner img {
  display: block; width: 100%; height: auto;
  animation: riseIn 1.2s var(--ease) both;
}
.hero-banner-cta {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  padding-top: clamp(28px, 4vw, 48px);
}

/* Real text for search engines and screen readers, without printing a headline
   the artwork already carries. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); }
.hero-split {
  display: grid; grid-template-columns: 1.12fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-say { animation: riseIn 1.3s var(--ease) both; }
.hero-say h1 { margin-bottom: 26px; }
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } }

.hero .sub { color: var(--grey); max-width: 520px; margin: 0 0 40px; font-size: 16px; line-height: 1.85; }
/* Slightly tighter than the page default so both calls sit on one line. */
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-cta .btn { padding: 17px 32px; letter-spacing: .2em; }

/* The proposition in one picture: photograph on the left, the same photograph
   as type on the right. */
.hero-art { animation: riseIn 1.6s var(--ease) .12s both; }
.hero-art img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { order: -1; }
}

/* the thin band of facts under the hero */
.kicker-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kicker { text-align: center; padding: 30px 12px; border-right: 1px solid var(--line); }
.kicker:last-child { border-right: 0; }
.kicker .v { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); color: var(--ink); line-height: 1; }
.kicker .k {
  font-size: 9.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--grey); margin-top: 12px;
}
@media (max-width: 780px) {
  .kicker-row { grid-template-columns: 1fr 1fr; }
  .kicker:nth-child(2) { border-right: 0; }
  .kicker:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ── dark gallery band: where the pieces are shown ──────────────────────── */
.noir { background: var(--noir); color: #EFEAE0; }
.noir h1, .noir h2, .noir h3 { color: #F6F2E8; }
.noir .lede { color: #B9B2A4; }
.noir .eyebrow { color: var(--gold-soft); }
.noir .rule-gold { background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
.noir .btn { background: transparent; border-color: rgba(239,234,224,.4); color: #F6F2E8; }
.noir .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--noir); }
.noir .muted { color: #8E887B; }
.noir .sub { color: #A9A296; }
.noir .rule { border-top-color: rgba(239,234,224,.14); }
.noir .spec-list li span { color: #8E887B; }
.noir .link-quiet { color: #F6F2E8; }
.noir .link-quiet::after { background: rgba(239,234,224,.3); }
.noir .product-card .meta { border-top-color: rgba(239,234,224,.16); }
.noir .product-card p { color: #9A9488; }
.noir .price-big { color: #F6F2E8; }
.noir .price-line { border-top-color: rgba(239,234,224,.18); }
.noir .filter-row a { border-color: rgba(239,234,224,.22); color: #9A9488; }
.noir .filter-row a.on { border-color: var(--gold-soft); color: #F6F2E8; }
.noir .notice-strip { background: rgba(239,234,224,.05); border-color: rgba(239,234,224,.16); color: #B9B2A4; }
.noir .notice-strip strong { color: #F6F2E8; }

/* ── material cards ─────────────────────────────────────────────────────── */
.material-card {
  position: relative; text-align: left;
  display: flex; flex-direction: column;
}
.material-card .plate {
  aspect-ratio: 3 / 2; position: relative; overflow: hidden;
  background: var(--noir-2);
}
.material-card .plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.material-card:hover .plate img { transform: scale(1.035); }
.material-card .meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding-top: 22px; margin-top: 22px;
  border-top: 1px solid var(--line);
}
.noir .material-card .meta { border-top-color: rgba(239,234,224,.16); }
.material-card h3 { margin: 0; }
.material-card .price {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; color: var(--gold-soft); white-space: nowrap;
}
.material-card p { font-size: 14.5px; color: var(--grey); margin-top: 12px; line-height: 1.75; }
.noir .material-card p { color: #9A9488; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }

/* Plate fallbacks — only visible where no mockup image is supplied. */
.plate.acrylic { background: radial-gradient(120% 90% at 30% 20%, #3b4048 0%, #23262c 55%, #17191d 100%); }
.plate.anodised { background: radial-gradient(130% 100% at 50% 0%, #2f2c28 0%, #171512 60%, #0c0b09 100%); }

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 76px); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--ink); padding-top: 26px; }
.step .num {
  font-family: var(--serif); font-size: 15px; letter-spacing: .3em;
  color: var(--gold); line-height: 1; text-transform: uppercase;
}
.step h3 { margin: 16px 0 12px; }
.step p { font-size: 14.5px; color: var(--grey); line-height: 1.8; }

/* ── gallery filter ─────────────────────────────────────────────────────── */
.filter-row {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 30px;
}
.filter-row a {
  font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--grey);
  border: 1px solid var(--line); padding: 9px 18px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.filter-row a:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-row a.on { border-color: var(--gold); color: var(--ink); }

/* ── product index ──────────────────────────────────────────────────────── */
.product-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 940px) { .product-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .product-index { grid-template-columns: 1fr; } }
.product-card { display: block; text-decoration: none; }
.product-card .plate { aspect-ratio: 3/2; overflow: hidden; background: var(--noir-2); }
.product-card .plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.product-card:hover .plate img { transform: scale(1.04); }
.product-card .meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-top: 18px; margin-top: 0; border-top: 1px solid var(--line);
}
.product-card h3 { margin: 0; }
.product-card .price { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; color: var(--gold); white-space: nowrap; }
.product-card p { font-size: 14px; color: var(--grey); margin: 12px 0 16px; line-height: 1.7; }

/* ── product detail ─────────────────────────────────────────────────────── */
.product-hero {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
@media (max-width: 900px) { .product-hero { grid-template-columns: 1fr; } }
.product-art img { width: 100%; height: auto; display: block; }
.product-say h1 { margin-bottom: 22px; }

.spec-list { list-style: none; }
.spec-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.spec-list li span { color: var(--grey); }
.spec-list li b { font-family: var(--serif); font-weight: 400; font-size: 17px; text-align: right; }
.noir .spec-list li { border-bottom-color: rgba(239,234,224,.14); }

/* ── product showcase (image one side, the case for it on the other) ────── */
.showcase {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }
.showcase-art img { width: 100%; height: auto; display: block; }
.showcase-say h2 { margin-bottom: 20px; }
.price-line {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.price-big { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); color: var(--ink); }
.price-line .muted { font-size: 13px; letter-spacing: .06em; }

/* ── pull quote ─────────────────────────────────────────────────────────── */
.quote { max-width: 900px; margin: 0 auto; text-align: center; }
.quote blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 3.6vw, 44px); line-height: 1.32; color: var(--ink);
}
.quote figcaption {
  margin-top: 26px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--grey);
}

/* ── notice strips ──────────────────────────────────────────────────────── */
.notice-strip {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  padding: 26px 30px;
  font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
}
.notice-strip strong { font-family: var(--serif); font-size: 17px; display: block; margin-bottom: 8px; }

/* ── band (multi-buy) ───────────────────────────────────────────────────── */
.band { background: var(--noir); color: #EFEAE0; }
.band h2 { color: #F6F2E8; }
.band .lede { color: #B9B2A4; }
.band .eyebrow { color: var(--gold-soft); }
.band .gold { color: var(--gold-soft); }
.band .inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .band .inner { grid-template-columns: 1fr; } }
.band ul.tiers { list-style: none; margin-top: 34px; }
.band ul.tiers li {
  padding: 18px 0; border-bottom: 1px solid rgba(239,234,224,.14);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; letter-spacing: .04em;
}
.band ul.tiers li b { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--gold-soft); }
.band .btn { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--noir); }
.band .btn:hover { background: #EFEAE0; border-color: #EFEAE0; color: var(--noir); }

/* ── gallery ────────────────────────────────────────────────────────────── */
/* A page title set as spaced capitals rather than a sentence. */
.page-title-lg {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 9vw, 128px); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Two up, with the first piece running the full width — the pieces need to be
   big enough that you can see the type is type. */
/* The mockups are 3:2, so every plate stays 3:2 and nothing is ever cropped —
   the lead piece gets its scale from spanning both columns instead. */
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.gallery-grid .piece:first-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr; } }
.piece { display: block; }
.piece .plate {
  aspect-ratio: 3/2; overflow: hidden; position: relative; background: var(--noir-2);
}
.piece .plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.5s var(--ease);
}
.piece:hover .plate img { transform: scale(1.04); }
.piece .cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-top: 18px; font-size: 12px; color: var(--grey); letter-spacing: .04em;
}
.piece .cap b { font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 400; }
.noir .piece .cap b { color: #F6F2E8; }
.noir .piece .cap { color: #8E887B; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 26px; }
.field label {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 11px;
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field textarea, .field select {
  width: 100%; padding: 16px 18px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.75; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,135,60,.1);
}
.field .help { font-size: 12.5px; color: var(--grey); margin-top: 9px; }
.field .errorlist { list-style: none; color: var(--error); font-size: 13px; margin-top: 7px; }
.check { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; font-size: 13.5px; color: var(--ink-soft); }
.check input { margin-top: 4px; accent-color: var(--gold); width: 16px; height: 16px; }

.drop {
  border: 1px dashed var(--line-strong); background: var(--paper-2);
  padding: 44px 24px; text-align: center; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  position: relative;
}
.drop:hover, .drop.over { border-color: var(--gold); background: #FDFBF5; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .hint { font-size: 13px; color: var(--grey); }
.drop .thumb { max-height: 320px; max-width: 100%; margin: 0 auto; display: block; box-shadow: 0 24px 60px -30px rgba(18,17,14,.5); }
.wordcount { font-size: 12.5px; color: var(--grey); letter-spacing: .05em; margin-top: 10px; }
.wordcount b { color: var(--gold); }

.mat-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .mat-chooser { grid-template-columns: 1fr; } }
input.mat-radio { position: absolute; opacity: 0; }
label.mat-option {
  display: block; border: 1px solid var(--line-strong); background: var(--paper);
  padding: 20px; cursor: pointer; text-align: left;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
label.mat-option .swatch { height: 76px; margin-bottom: 14px; position: relative; overflow: hidden; }
.swatch.acrylic { background: radial-gradient(120% 90% at 30% 20%, #454b55 0%, #26292f 55%, #191b1f 100%); }
.swatch.acrylic::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, rgba(255,255,255,.25) 0%, transparent 26%); }
.swatch.anodised { background: radial-gradient(130% 100% at 50% 0%, #35322c 0%, #181612 60%, #0c0b09 100%); }
label.mat-option h4 { font-family: var(--serif); font-weight: 400; font-size: 21px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
label.mat-option h4 span { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
label.mat-option p { font-size: 13px; color: var(--grey); margin-top: 6px; }
input.mat-radio:checked + label.mat-option { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.orient-chooser { display: flex; gap: 12px; flex-wrap: wrap; }
.orient-chooser .opt {
  border: 1px solid var(--line-strong); background: var(--paper); padding: 13px 20px;
  cursor: pointer; font-size: 12.5px; letter-spacing: .08em; display: flex; align-items: center; gap: 11px;
  transition: border-color .3s var(--ease);
}
.orient-chooser input { position: absolute; opacity: 0; }
.orient-chooser input:checked + .opt { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.orient-icon { display: inline-block; border: 1.4px solid var(--ink-soft); }
.orient-icon.p { width: 13px; height: 19px; }
.orient-icon.l { width: 19px; height: 13px; }
.orient-icon.a { width: 16px; height: 16px; border-style: dashed; }

/* ── proof page ─────────────────────────────────────────────────────────── */
.progress-wrap { max-width: 660px; margin: 0 auto; text-align: center; padding: clamp(40px,7vw,88px) 0; }
.progress-track { height: 1px; background: var(--line-strong); margin: 40px 0 14px; position: relative; }
.progress-bar { position: absolute; inset: 0 100% 0 0; background: var(--gold); transition: right 1.1s var(--ease); }
.progress-pct { font-family: var(--serif); font-size: clamp(48px, 7vw, 72px); color: var(--ink); line-height: 1; }
.progress-label { font-size: 15px; letter-spacing: .04em; margin-top: 8px; }
.progress-detail { font-size: 13px; color: var(--grey); font-style: italic; min-height: 1.6em; }
.stage-list { text-align: left; max-width: 470px; margin: 44px auto 0; list-style: none; }
.stage-list li { padding: 9px 0; font-size: 13px; color: var(--grey-faint); display: flex; gap: 14px; transition: color .4s; }
.stage-list li .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); margin-top: 9px; flex: none; }
.stage-list li.done { color: var(--grey); }
.stage-list li.done .dot { background: var(--gold); }
.stage-list li.active { color: var(--ink); }
.stage-list li.active .dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale); }

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,44px); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-card .plate { cursor: zoom-in; }
.proof-tools { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.proof-note { font-size: 13px; color: var(--grey); }
.zoom-overlay {
  position: fixed; inset: 0; background: rgba(8,7,6,.95); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 4vmin; cursor: zoom-out;
}
.zoom-overlay.open { display: flex; }
.zoom-overlay img { max-width: 96vw; max-height: 90vh; }
.zoom-overlay .cap { position: fixed; bottom: 3vmin; left: 0; right: 0; text-align: center; color: var(--grey-faint); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }

.keyring-adder {
  display: flex; align-items: center; gap: 18px; border: 1px solid var(--line);
  background: var(--paper-2); padding: 22px 26px; margin-top: 30px; flex-wrap: wrap;
}
.keyring-adder .qty { display: flex; align-items: center; gap: 15px; font-size: 15px; }
.keyring-adder button.qbtn {
  width: 36px; height: 36px; border: 1px solid var(--line-strong);
  background: var(--paper); font-size: 17px; cursor: pointer; transition: border-color .3s;
}
.keyring-adder button.qbtn:hover { border-color: var(--gold); color: var(--gold); }

/* ── basket / checkout ──────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--grey); text-align: left; padding: 0 0 14px; border-bottom: 1px solid var(--ink);
}
.table td { padding: 22px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr.total td { border-bottom: none; font-family: var(--serif); font-size: 25px; padding-top: 24px; }
.table .price { text-align: right; white-space: nowrap; }
.table .strike { text-decoration: line-through; color: var(--grey-faint); font-size: 13px; margin-right: 8px; }
.save-tag {
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok); padding: 4px 9px; margin-left: 10px; white-space: nowrap;
}
.basket-thumb { width: 104px; }
.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 940px) { .two-col { grid-template-columns: 1fr; } }
.summary-card {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: clamp(24px, 3vw, 38px); position: sticky; top: 120px;
}
.summary-card h3 { margin-bottom: 22px; }

/* ── order page ─────────────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 34px 0; }
.timeline li { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--grey-faint); align-items: center; }
.timeline li .tick { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.timeline li.done { color: var(--ink); }
.timeline li.done .tick { border-color: var(--gold); background: var(--gold); color: var(--paper); }
.timeline li.now { color: var(--ink); }
.timeline li.now .tick { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
details.faq { border-bottom: 1px solid var(--line); padding: 26px 0; }
details.faq summary {
  cursor: pointer; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 25px);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--gold); font-size: 26px; font-weight: 200; flex: none; }
details.faq[open] summary::after { content: "–"; }
details.faq .a { padding-top: 16px; color: var(--grey); font-size: 15px; max-width: 780px; line-height: 1.85; }

/* ── legal ──────────────────────────────────────────────────────────────── */
.legal { max-width: 820px; }
.legal h2 { margin: 52px 0 16px; font-size: clamp(24px, 2.6vw, 32px); }
.legal p, .legal li { color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.legal ul { padding-left: 22px; margin: 14px 0; }
.legal .seal { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--paper-2); padding: 24px 28px; margin: 30px 0; }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer { background: var(--noir); color: #8E887B; margin-top: var(--space); }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: clamp(56px, 8vw, 96px) 0 48px; }
@media (max-width: 900px) { footer .cols { grid-template-columns: 1fr 1fr; gap: 36px; } }
footer h4 {
  color: #F6F2E8; font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 20px;
}
footer a { color: #8E887B; text-decoration: none; display: block; font-size: 13.5px; padding: 5px 0; transition: color .3s; }
footer a:hover { color: var(--gold-soft); }
footer .legal-line { border-top: 1px solid rgba(239,234,224,.12); padding: 26px 0; font-size: 11.5px; color: #6B665C; line-height: 1.8; }
footer .flogo { max-width: 220px; margin-bottom: 18px; opacity: .92; }
footer .fnote { font-size: 13px; max-width: 330px; line-height: 1.8; }

/* ── flash messages ─────────────────────────────────────────────────────── */
.messages { position: fixed; top: 100px; right: 24px; z-index: 300; display: grid; gap: 10px; }
.messages .msg {
  background: var(--noir); color: #F6F2E8; padding: 16px 22px; font-size: 13.5px;
  border-left: 2px solid var(--gold); box-shadow: 0 24px 50px -20px rgba(0,0,0,.55); max-width: 340px;
}
.messages .msg.error { border-left-color: var(--error); }

/* ── misc ───────────────────────────────────────────────────────────────── */
.dev-banner { background: var(--error); color: #fff; text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 7px; }
.empty-state { text-align: center; padding: clamp(60px, 9vw, 120px) 0; }
.pill { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 6px 14px; color: var(--grey); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Launch promotion strip. Sits above the floating header, in the header's own
   language so it reads as part of the furniture rather than a banner ad. */
.promo-strip {
  position: relative;
  z-index: 60;
  text-align: center;
  padding: 9px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}