/* ==========================================================================
   AVEN — Quality. Style. Everyday.
   Core stylesheet
   --------------------------------------------------------------------------
   Design direction
   - Strictly monochrome: black, white, and four greys. No colour accents.
   - Typography: Archivo (display, wide + uppercase), Jost (interface + body,
     light with wide tracking to echo the wordmark), IBM Plex Mono (data:
     prices, SKUs, counts, sizes).
   - Signature device: the chevron angle taken from the AV monogram. It shows
     up as the intro animation, the hero watermark, hover underlines that
     grow from a point, and the corner rule on product cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --ink: #000000;
  --paper: #ffffff;
  --mist: #f5f5f5;
  --fog: #e5e5e5;
  --steel: #787878;
  --graphite: #6b6b6b;
  --slate: #4a4a4a;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* Type scale */
  --t-hero: clamp(2.75rem, 9vw, 8rem);
  --t-xl: clamp(2rem, 5vw, 3.75rem);
  --t-lg: clamp(1.5rem, 3vw, 2.25rem);
  --t-md: 1.125rem;
  --t-sm: 1rem;
  --t-xs: 0.9375rem;
  --t-micro: 1.0625rem;

  /* Space */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;
  --s-8: 10rem;

  /* Layout */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1440px;
  --nav-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.55s;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   1b. Dark theme
   --------------------------------------------------------------------------
   Every colour in this stylesheet comes from the seven tokens above — there is
   not one hard-coded hex below this block — so the whole site turns over by
   redefining them. The greys keep their running order (slate darkest through
   steel lightest in light mode) inverted, so anything set in --slate stays the
   most readable of the three either way.

   Set on <html> by the inline script in each page's <head>, which runs before
   the first paint so a customer who chose dark never sees a white flash.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --ink: #f4f4f4;      /* headings and body text */
  --paper: #0d0d0d;    /* page background */
  --mist: #171717;     /* panels, summary blocks */
  --fog: #2e2e2e;      /* rules and borders */
  --steel: #8f8f8f;    /* lightest grey — least emphasis */
  --graphite: #a8a8a8; /* mid grey — small print */
  --slate: #d2d2d2;    /* paragraph grey — kept bright to stay legible */

  color-scheme: dark;
}

/* The logos are transparent PNGs holding black artwork, so they read correctly
   on a light page and would be black-on-black here. Inverting flips the ink to
   white and leaves the transparency untouched — no white box either way. */
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .footer__brand img {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
svg { display: block; }

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0 0 var(--s-2); }

ul { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   3. Utility
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }
.section--flush-top { padding-top: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--s-3);
}

.data {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  font-weight: 400;
}

.lede {
  font-size: var(--t-md);
  color: var(--slate);
  max-width: 46ch;
  font-weight: 400;
}

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.section-head h2 { font-size: var(--t-xl); }

/* Chevron link — underline grows from the left point, mirroring the monogram */
.chev {
  position: relative;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 6px;
  white-space: nowrap;
}
.chev::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.chev:hover::after,
.chev:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 1.05rem 2.25rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--ink); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); }

.btn--light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--light::before { background: var(--ink); }
.btn--light:hover, .btn--light:focus-visible { color: var(--paper); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.75rem 1.4rem; font-size: var(--t-micro); }

.btn[disabled] { opacity: 0.35; pointer-events: none; }
/* display:inline-flex above outranks the UA [hidden] rule, so restate it —
   without this, hiding a button via .hidden leaves it on screen. */
.btn[hidden] { display: none; }

/* --------------------------------------------------------------------------
   5. Intro / page-transition overlay
   -------------------------------------------------------------------------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: transform 0.85s var(--ease-io);
}
#intro[hidden] { display: none; }
#intro.is-open { transform: translateY(0); }
#intro.is-leaving { transform: translateY(-101%); }
#intro.is-entering { transform: translateY(101%); }

.intro-stack {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.intro-welcome {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0;
  transform: translateY(10px);
  margin-bottom: var(--s-3);
  padding-left: 0.62em; /* optical centring for the tracking */
}
#intro.step-2 .intro-welcome {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--ease) 0.05s, transform 0.7s var(--ease) 0.05s;
}

.intro-mark {
  width: clamp(150px, 26vw, 250px);
  transform: translateY(-22px);
  transition: transform 0.9s var(--ease);
}
#intro.step-2 .intro-mark { transform: translateY(0); }

.intro-mark path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: butt;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
#intro.step-1 .intro-mark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--ease-io);
}
#intro.step-1 .intro-mark path:nth-child(2) { transition-delay: 0.1s; }
#intro.step-1 .intro-mark path:nth-child(3) { transition-delay: 0.2s; }
#intro.step-1 .intro-mark path:nth-child(4) { transition-delay: 0.3s; }

.intro-word {
  font-size: var(--t-xs);
  letter-spacing: 0.68em;
  text-transform: uppercase;
  margin-top: var(--s-3);
  padding-left: 0.68em;
  opacity: 0;
}
#intro.step-2 .intro-word {
  opacity: 1;
  transition: opacity 0.6s var(--ease) 0.25s;
}

.intro-tag {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--steel);
  margin-top: var(--s-2);
  opacity: 0;
}
#intro.step-2 .intro-tag {
  opacity: 1;
  transition: opacity 0.6s var(--ease) 0.45s;
}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--fog);
  transition: transform 0.5s var(--ease), background 0.4s var(--ease);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Brand lockup: the monogram file sits next to a typeset wordmark so the
   name stays readable at 40px, where the full logo's tagline turns to mush.

   flex: 0 1 auto, not 0 0 auto — when the bar runs short of room the brand is
   what gives way. Pinned at 0 0 it kept its full width and squeezed the tools
   instead, pushing the menu button off the right edge of a phone. */
.brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.brand img { height: 34px; width: auto; }
.brand__word {
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  padding-left: 0.44em;
  line-height: 1;
}

.nav__links {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
/* Direct children only — the mega-menu below holds product links that must not
   inherit the bar's uppercase tracking or its growing underline. */
.nav__links > a,
.nav__item > a {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding-block: 4px;
}
.nav__links > a::after,
.nav__item > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links > a:hover::after,
.nav__links > a[aria-current="page"]::after,
.nav__item > a:hover::after,
.nav__item > a[aria-current="page"]::after,
.nav__item:hover > a::after,
.nav__item:focus-within > a::after { transform: scaleX(1); }

/* ---- Shop mega-menu ----
   The bar keeps two items; the categories live in a panel that drops from the
   full width of the nav. Held open by :hover for pointers and :focus-within for
   keyboard — the trigger is inside .nav__item, so tabbing to it opens the panel
   and makes the links inside reachable. */
/* Full nav height on purpose: the panel opens at the bottom edge of the bar, so
   the trigger has to reach that edge or the pointer crosses dead space on the
   way down, drops :hover, and the menu shuts before it can be clicked. */
.nav__item {
  position: static;
  display: flex;
  align-items: center;
  height: var(--nav-h);
}

.megamenu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--fog);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Escape sets this so the panel stays shut while the trigger keeps focus. */
.nav__item.is-dismissed .megamenu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
}

.megamenu__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter) var(--s-5);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-5);
  align-items: start;
}

/* Single column: they're a numbered list, so they read top-to-bottom, and the
   full width keeps each blurb on one line instead of wrapping to three. */
.megamenu__cats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--fog); /* the gap becomes the rule between rows */
  border: 1px solid var(--fog);
}

.megacat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  transition: background 0.3s var(--ease);
}
.megacat:hover { background: var(--mist); }
.megacat__num {
  flex: 0 0 auto;
  color: var(--steel);
  font-size: var(--t-micro);
  line-height: 1.2;
}
.megacat:hover .megacat__num { color: var(--ink); }
.megacat__art { flex: 0 0 38px; line-height: 0; }
.megacat__art svg.art { width: 38px; height: 38px; }
.megacat__text {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
}
.megacat__text strong {
  /* fixed so the names stack in a straight column down the list */
  flex: 0 0 8.5rem;
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.megacat__text small {
  flex: 1;
  min-width: 0;
  color: var(--slate);
  font-size: var(--t-micro);
  line-height: 1.35;
}
.megacat__count {
  flex: 0 0 auto;
  color: var(--steel);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.megamenu__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 var(--s-2);
}

.megapick {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--fog);
}
.megapick__art {
  flex: 0 0 64px;
  background: var(--mist);
  line-height: 0;
  padding: 6px;
}
.megapick__art svg.art { width: 52px; height: 52px; }
.megapick__text { display: grid; gap: 2px; min-width: 0; }
.megapick__text strong { font-weight: 400; font-size: var(--t-sm); letter-spacing: 0.02em; }
.megapick__text small {
  color: var(--slate);
  font-size: var(--t-micro);
  line-height: 1.35;
  /* the blurb is a full sentence — keep the panel from growing tall */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.megapick__price { color: var(--ink); margin-top: 2px; }
.megapick:hover .megapick__art { background: var(--fog); }

/* Never shrinks. These are the only way to reach the cart, search and — on a
   phone — the menu, so they keep their full width and the brand yields. */
.nav__tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--s-2);
}
.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  position: relative;
  transition: opacity 0.3s var(--ease);
}
.icon-btn:hover { opacity: 0.55; }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* Theme toggle — the button carries both glyphs and CSS picks the one that
   describes what pressing it does: a moon while the site is light, a sun while
   it is dark. Swapping in CSS rather than JS keeps it correct on the very
   first frame, before any script has run. */
.icon-btn__sun { display: none; }
:root[data-theme="dark"] .icon-btn__moon { display: none; }
:root[data-theme="dark"] .icon-btn__sun { display: block; }

/* Set apart from the account icon — it switches how the site looks rather than
   going anywhere, so it reads better as its own thing than as a fifth item in
   the row. The negative right margin lets it sit nearer the edge than the
   gutter would otherwise allow, without moving the nav off the page grid. */
#themeToggle {
  margin-left: var(--s-2);
  margin-right: calc(var(--gutter) * -0.4);
}

.badge {
  position: absolute;
  top: 3px; right: 1px;
  min-width: 18px; height: 18px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 18px;
  text-align: center;
}
.badge:empty, .badge[data-count="0"] { display: none; }

.nav__burger { display: none; }
.nav__burger span {
  display: block;
  width: 20px; height: 1px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 190;
  background: var(--paper);
  padding: var(--s-5) var(--gutter);
  transform: translateX(100%);
  transition: transform 0.6s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--fog);
}
.drawer .drawer__meta {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Search panel */
.searchbar {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 180;
  background: var(--paper);
  border-bottom: 1px solid var(--fog);
  transform: translateY(-110%);
  transition: transform 0.5s var(--ease);
}
.searchbar.is-open { transform: translateY(0); }
.searchbar form {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.searchbar input {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--fog);
  padding: var(--s-2) 0;
  font-size: var(--t-lg);
  font-family: var(--display);
  text-transform: uppercase;
  background: transparent;
}
.searchbar input:focus { outline: none; border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Page shell
   -------------------------------------------------------------------------- */
main { padding-top: var(--nav-h); }

.pagehead {
  padding-block: var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--fog);
}
.pagehead h1 { font-size: var(--t-xl); }
.crumbs {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.crumbs a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--fog);
}

.hero__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(62vw, 780px);
  color: var(--fog);
  pointer-events: none;
}
.hero__mark path {
  fill: none;
  stroke: currentColor;
  /* The monogram viewBox is 432 wide, not the 242 this was drawn against, so
     the weight is scaled to match — otherwise it renders as a hairline. */
  stroke-width: 5;
}

.hero__inner { position: relative; z-index: 2; }

.hero h1 {
  font-size: var(--t-hero);
  line-height: 0.86;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 15ch;
}
.hero h1 em {
  font-style: normal;
  font-weight: 300;
  display: block;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--fog);
  max-width: 640px;
}
.hero__meta div { min-width: 110px; }
.hero__meta dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 2px;
}
.hero__meta dd {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-sm);
}

.hero__cta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* Scroll cue */
.hero__cue {
  position: absolute;
  bottom: var(--s-4);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}
.hero__cue i {
  display: block;
  width: 56px; height: 1px;
  background: var(--fog);
  position: relative;
  overflow: hidden;
}
.hero__cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left;
  animation: track 2.6s var(--ease-io) infinite;
}
@keyframes track {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* --------------------------------------------------------------------------
   9. Marquee — the one loud moment
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-2);
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: var(--s-4);
  padding-right: var(--s-4);
  animation: slide 32s linear infinite;
}
.marquee span {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.marquee span::after {
  content: "";
  width: 7px; height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}
@keyframes slide {
  to { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   10. Product cards & grid
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr) rather than 1fr throughout: a bare 1fr track refuses to go
   below its min-content width, and a card contains a nowrap price, so on a
   narrow screen the column grows and the price is cut off by the page edge. */
.grid {
  display: grid;
  gap: var(--s-4) var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card { position: relative; }

.card__media {
  position: relative;
  display: block;
  background: var(--mist);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.card__media svg.art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 14%;
  transition: transform 0.9s var(--ease);
}
.card:hover .card__media svg.art { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Uploaded product photos
   --------------------------------------------------------------------------
   A.media() returns either the line art (an <svg class="art">) or a real photo
   (an <img class="art art--photo">). Everywhere that sized the svg needs to
   size the photo the same way, so these mirror the svg rules — but with
   object-fit: cover and no padding, because a photograph should fill its frame
   rather than sit inset like a drawing.
   -------------------------------------------------------------------------- */
img.art--photo { display: block; width: 100%; height: 100%; object-fit: cover; }

.card__media img.art--photo {
  position: absolute;
  inset: 0;
  padding: 0;
  transition: transform 0.9s var(--ease);
}
.card:hover .card__media img.art--photo { transform: scale(1.06); }

.megacat__art img.art--photo { width: 38px; height: 38px; }
.megapick__art img.art--photo { width: 52px; height: 52px; }

/* diagonal corner rule — the monogram angle */
.card__media::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 46px; height: 46px;
  background: linear-gradient(to top left, var(--ink) 0 1px, transparent 1px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.card:hover .card__media::after { opacity: 1; }

.card__flag {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
}
.card__flag--out { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.card__wish {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--paper);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.card:hover .card__wish,
.card__wish:focus-visible,
.card__wish.is-on { opacity: 1; transform: translateY(0); }
.card__wish svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.card__wish.is-on svg { fill: var(--ink); }

.card__add {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-block: 0.95rem;
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.card:hover .card__add,
.card__add:focus-visible { transform: translateY(0); }

.card__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding-top: var(--s-2);
}
/* The name gives way; the price must never be clipped. */
.card__body > a, .card__name { min-width: 0; overflow-wrap: anywhere; }
.card__price { flex: 0 0 auto; }
.card__name {
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  font-weight: 400;
}
.card__cat {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}
.card__price {
  font-family: var(--mono);
  font-size: var(--t-sm);
  white-space: nowrap;
}
.card__price s { color: var(--steel); margin-right: 6px; }

/* --------------------------------------------------------------------------
   11. Categories
   -------------------------------------------------------------------------- */
.cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--fog);
  border-left: 1px solid var(--fog);
}
.cat {
  position: relative;
  border-right: 1px solid var(--fog);
  border-bottom: 1px solid var(--fog);
  padding: var(--s-4) var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  overflow: hidden;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.cat:hover { background: var(--ink); color: var(--paper); }
.cat svg.art { height: 130px; width: 100%; }
.cat__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.cat h3 { font-size: 1.35rem; }
.cat .data { color: var(--steel); }
.cat:hover .data { color: var(--paper); }

/* --------------------------------------------------------------------------
   12. Split / editorial blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.split--panel {
  background: var(--mist);
  padding: var(--s-6);
}
/* For splits where both sides are text and should start on the same line
   rather than being centred against each other. */
.split--top { align-items: start; }
.split__art {
  aspect-ratio: 1;
  background: var(--mist);
  display: grid;
  place-items: center;
  padding: var(--s-6);
}
.split__art svg { width: 100%; height: auto; }

.statline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--fog);
}
.statline dt {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 600;
}
.statline dd {
  margin: 0;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* --------------------------------------------------------------------------
   13. Newsletter
   -------------------------------------------------------------------------- */
.news {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-7);
  text-align: center;
}
.news h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.news p { color: var(--steel); max-width: 44ch; margin-inline: auto; }
.news form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: var(--s-4) auto 0;
  border-bottom: 1px solid var(--paper);
}
.news input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: var(--s-2) 0;
  color: var(--paper);
  letter-spacing: 0.06em;
}
.news input::placeholder { color: var(--graphite); }
.news input:focus { outline: none; }
.news button {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-inline: var(--s-2);
  transition: opacity 0.3s;
}
.news button:hover { opacity: 0.6; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--fog);
  padding-block: var(--s-6) var(--s-3);
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-5);
}
.footer__brand img { height: 64px; width: auto; margin-bottom: var(--s-2); }
.footer h4 {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 var(--s-2);
}
.footer li { margin-bottom: 8px; }
.footer li a {
  font-size: var(--t-sm);
  transition: opacity 0.3s;
}
.footer li a:hover { opacity: 0.5; }
.footer__base {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--fog);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--steel);
  text-transform: uppercase;
}
.social { display: flex; gap: var(--s-2); }
.social a { transition: opacity 0.3s; }
.social a:hover { opacity: 0.5; }
.social svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.3; }

/* --------------------------------------------------------------------------
   15. Shop layout
   -------------------------------------------------------------------------- */
.shop {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5) var(--s-7);
}

.filters { align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-3)); }
.filters__group { border-bottom: 1px solid var(--fog); padding-block: var(--s-3); }
.filters__group:first-child { padding-top: 0; }
.filters h3 {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--steel);
  margin-bottom: var(--s-2);
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  padding-block: 4px;
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; }
.check i {
  width: 13px; height: 13px;
  border: 1px solid var(--steel);
  display: inline-block;
  flex: 0 0 auto;
  transition: background 0.25s, border-color 0.25s;
}
.check input:checked + i { background: var(--ink); border-color: var(--ink); }
.check input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.check .n { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); color: var(--steel); }

.range { width: 100%; accent-color: var(--ink); }

.shop__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--fog);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.select {
  border: 1px solid var(--fog);
  padding: 0.6rem 2rem 0.6rem 0.8rem;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230a0a0a' fill='none'/%3E%3C/svg%3E") no-repeat right 0.8rem center/10px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.filters__toggle { display: none; }

.empty {
  padding: var(--s-6) 0;
  text-align: center;
  border: 1px dashed var(--fog);
}
.empty h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.empty p { color: var(--graphite); }

.pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-6);
}
.pager button {
  min-width: 38px; height: 38px;
  border: 1px solid var(--fog);
  font-family: var(--mono);
  font-size: var(--t-xs);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pager button:hover { border-color: var(--ink); }
.pager button[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   16. Product detail
   -------------------------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-6);
  padding-block: var(--s-5) var(--s-7);
  align-items: start;
}
.gallery { display: grid; gap: var(--s-2); position: sticky; top: calc(var(--nav-h) + var(--s-3)); }
.gallery__main {
  background: var(--mist);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}
.gallery__main svg.art {
  width: 100%; height: 100%;
  padding: 12%;
  transition: transform 0.6s var(--ease);
}
.gallery__main:hover svg.art { transform: scale(1.35); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); }
.thumb {
  background: var(--mist);
  aspect-ratio: 1;
  padding: 16%;
  border: 1px solid transparent;
  transition: border-color 0.3s;
}
.thumb[aria-current="true"] { border-color: var(--ink); }

.pdp__info h1 { font-size: var(--t-lg); letter-spacing: -0.01em; }
.pdp__price {
  font-family: var(--mono);
  font-size: 1.5rem;
  margin-block: var(--s-2);
}
.pdp__price s { color: var(--steel); font-size: 1rem; margin-right: 10px; }

.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 13px; height: 13px; fill: var(--ink); }
.stars svg.off { fill: var(--fog); }

.swatches { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.swatch {
  padding: 0.55rem 1rem;
  border: 1px solid var(--fog);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.swatch[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fog);
}
.qty button { width: 40px; height: 44px; font-size: 1rem; }
.qty button:hover { background: var(--mist); }
.qty input {
  width: 44px; height: 44px;
  text-align: center;
  border: 0;
  font-family: var(--mono);
  background: transparent;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block: var(--s-3); }

/* Email / phone on the contact page — set in mono so they read as data, and
   sized up because they're the point of the page. */
.contact__line {
  font-family: var(--mono);
  font-size: var(--t-md);
  border-bottom: 1px solid var(--fog);
  transition: border-color 0.3s var(--ease);
}
.contact__line:hover { border-bottom-color: var(--ink); }

.spec { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.spec th, .spec td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--fog); vertical-align: top; }
.spec th {
  font-weight: 400;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 42%;
}

.acc { border-top: 1px solid var(--fog); }
.acc__item { border-bottom: 1px solid var(--fog); }
.acc__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
}
.acc__btn i {
  width: 12px; height: 12px;
  position: relative;
  flex: 0 0 auto;
}
.acc__btn i::before, .acc__btn i::after {
  content: ""; position: absolute; background: var(--ink);
  left: 0; top: 50%; width: 12px; height: 1px;
  transition: transform 0.4s var(--ease);
}
.acc__btn i::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] i::after { transform: rotate(0); }
.acc__panel { display: none; padding-bottom: var(--s-3); color: var(--graphite); font-size: var(--t-sm); }
.acc__panel.is-open { display: block; }

.review {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--fog);
}
.review__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-1);
}
.review__name { font-size: var(--t-sm); letter-spacing: 0.06em; }
.review__date { font-family: var(--mono); font-size: var(--t-micro); color: var(--steel); }

/* --------------------------------------------------------------------------
   17. Cart & checkout
   -------------------------------------------------------------------------- */
.cart {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-6);
  padding-block: var(--s-5) var(--s-7);
  align-items: start;
}

.line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--fog);
  align-items: start;
}
.line__media { background: var(--mist); aspect-ratio: 4/5; padding: 14%; }
.line__name { font-size: var(--t-md); letter-spacing: 0.03em; }
.line__meta { font-family: var(--mono); font-size: var(--t-micro); color: var(--steel); text-transform: uppercase; letter-spacing: 0.1em; }
.line__tools { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); flex-wrap: wrap; }
.line__remove {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.line__remove:hover { color: var(--ink); }
.line__price { font-family: var(--mono); font-size: var(--t-md); text-align: right; }

.summary {
  background: var(--mist);
  padding: var(--s-4);
  position: sticky;
  top: calc(var(--nav-h) + var(--s-3));
}
.summary h2 { font-size: 1.25rem; margin-bottom: var(--s-3); }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: 0.55rem;
  font-size: var(--t-sm);
  font-family: var(--mono);
}
.summary__row span:first-child { font-family: var(--body); color: var(--graphite); }
.summary__total {
  border-top: 1px solid var(--fog);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  font-size: var(--t-md);
}
.summary__total span:first-child { color: var(--ink); }

.coupon { display: flex; gap: var(--s-1); margin-block: var(--s-3); }
.coupon input {
  flex: 1;
  border: 1px solid var(--fog);
  background: var(--paper);
  padding: 0.7rem 0.8rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
}
.coupon input:focus { outline: none; border-color: var(--ink); }

.note {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--graphite);
  margin-top: var(--s-2);
}
.note--ok { color: var(--ink); }
.note--err { color: var(--ink); font-weight: 400; }

/* Steps */
.steps {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.step {
  flex: 1;
  min-width: 120px;
  padding-top: var(--s-1);
  border-top: 2px solid var(--fog);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  transition: color 0.4s, border-color 0.4s;
}
.step.is-active { border-top-color: var(--ink); color: var(--ink); }
.step.is-done { border-top-color: var(--ink); color: var(--graphite); }

.panel { display: none; }
.panel.is-active { display: block; animation: fadeup 0.5s var(--ease); }
@keyframes fadeup {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
/* align-content:start matters — a grid's default is stretch, so when one field
   in a row is taller (a wrapped label, a visible error) its neighbour stretches
   its own rows to match and the input grows with it. Pin to the top instead so
   two inputs side by side are always the same height. */
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
}
.field input,
.field select,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--fog);
  background: transparent;
  padding: 0.7rem 0;
  font-size: var(--t-md);
  border-radius: 0;
  transition: border-color 0.3s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field .err {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink);
  display: none;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: var(--ink); }
.field.is-invalid .err { display: block; }

/* Boxed variant. Where the form is the point of the page rather than a step in
   a flow, the underline fields don't read as "type here" — give them a real
   box on a tinted card so the writing area is obvious. */
.formcard {
  background: var(--mist);
  padding: var(--s-4);
}
.formcard .form-grid { margin-top: var(--s-3); }

/* Every box carries the same black outline — optional fields included. A grey
   border on phone/order next to a black one on name/email read as two different
   kinds of control rather than one form. */
.form--boxed .field input,
.form--boxed .field select,
.form--boxed .field textarea {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 0.8rem 0.9rem;
  font-size: var(--t-sm);
}
/* Focus and error both thicken the same outline rather than recolouring it —
   inset shadow so it doubles visually without nudging the layout. */
.form--boxed .field input:focus,
.form--boxed .field select:focus,
.form--boxed .field textarea:focus,
.form--boxed .field.is-invalid input,
.form--boxed .field.is-invalid select,
.form--boxed .field.is-invalid textarea {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.form--boxed .field input::placeholder,
.form--boxed .field textarea::placeholder { color: var(--steel); }
.form--boxed .field textarea { resize: vertical; min-height: 8rem; }

.meter { height: 2px; background: var(--fog); overflow: hidden; }
.meter i {
  display: block; height: 100%;
  background: var(--ink);
  width: 0;
  transition: width 0.4s var(--ease);
}

.radio-cards { display: grid; gap: var(--s-1); }
.radio-card {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--fog);
  padding: var(--s-2);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.radio-card:hover { border-color: var(--steel); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card i {
  width: 13px; height: 13px;
  border: 1px solid var(--steel);
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
}
.radio-card input:checked + i::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--ink);
  border-radius: 50%;
}
.radio-card input:checked ~ .radio-card__body { }
.radio-card:has(input:checked) { border-color: var(--ink); }
.radio-card__body { flex: 1; }
.radio-card__body strong { font-weight: 400; font-size: var(--t-sm); letter-spacing: 0.06em; }
.radio-card__body small { display: block; color: var(--graphite); font-size: var(--t-micro); }
.radio-card__price { font-family: var(--mono); font-size: var(--t-sm); }

.auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100svh - var(--nav-h));
}
.auth__art {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-6) var(--s-5);
}
.auth__art svg path { stroke: var(--paper); fill: none; stroke-width: 5; }
.auth__art .mk { width: 180px; }
.auth__art blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  line-height: 1.05;
}
.auth__form {
  display: grid;
  align-content: center;
  padding: var(--s-6) var(--gutter);
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
}
.auth__alt {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-3);
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  border: 1px solid var(--fog);
  padding: 0.85rem;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color 0.3s;
}
.btn-oauth:hover { border-color: var(--ink); }
/* While a provider popup is open the button is disabled — show that. */
.btn-oauth[disabled] { opacity: 0.4; pointer-events: none; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--steel);
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--fog);
}

/* --------------------------------------------------------------------------
   19. Account
   -------------------------------------------------------------------------- */
.account {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5) var(--s-7);
  align-items: start;
}
.account__nav { position: sticky; top: calc(var(--nav-h) + var(--s-3)); }
.account__nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--fog);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  transition: color 0.3s, padding-left 0.3s;
}
.account__nav button:hover { padding-left: 6px; color: var(--ink); }
.account__nav button.is-active { color: var(--ink); }

.order {
  border: 1px solid var(--fog);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
}
.order__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--fog);
  margin-bottom: var(--s-2);
}
.tag {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--ink);
}
.tag--fill { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   20. Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  right: var(--s-3); bottom: var(--s-3);
  z-index: 400;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(140%);
  transition: transform 0.5s var(--ease);
  max-width: min(90vw, 340px);
}
.toast.is-on { transform: translateY(0); }

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21b. Small-label legibility
   --------------------------------------------------------------------------
   Everything small and letter-spaced carries a heavier weight than the body
   copy. At these sizes Jost's light weights and Plex Mono's regular go thin
   enough that the tracking pulls the letterforms apart, so the whole tier of
   micro/xs labels sits at 600. Grouped here rather than on each component so
   the tier stays consistent as new ones are added.
   -------------------------------------------------------------------------- */
.data,
.chev,
.btn,
.intro-word,
.brand__word,
.badge,
.drawer .drawer__meta,
.crumbs,
.hero__cue,
.hero__meta dd,
.card__flag,
.card__cat,
.statline dd,
.news button,
.footer__base,
.filters h3,
.check .n,
.select,
.pager button,
.swatch,
.spec th,
.acc__btn,
.line__meta,
.line__remove,
.coupon input,
.note,
.step,
.btn-oauth,
.divider,
.account__nav button,
.tag,
.toast {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 960px) {
  :root { --nav-h: 64px; }

  /* The links stay in the bar on phones, same as on a desktop, rather than
     collapsing into a burger and drawer. */
  .nav__links { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; }
  .nav__burger { display: none; }

  /* No hover on a touch screen, and the panel is far too wide for a phone —
     tapping Shop just goes to the shop page. */
  .megamenu { display: none; }
  .nav__item { height: auto; }

  .brand img { height: 30px; }
  .brand { gap: 9px; }
  .brand__word { font-size: var(--t-xs); letter-spacing: 0.3em; padding-left: 0.3em; }
  .nav__tools { gap: 0; }
  .icon-btn { width: 38px; }

  .shop { grid-template-columns: 1fr; }
  .filters {
    position: static;
    display: none;
    border: 1px solid var(--fog);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
  }
  .filters.is-open { display: block; }
  .filters__toggle { display: inline-flex; }

  .pdp { grid-template-columns: 1fr; gap: var(--s-4); }
  .gallery { position: static; }
  .cart { grid-template-columns: 1fr; }
  .summary { position: static; }
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
  .split--panel { padding: var(--s-4); }
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .account { grid-template-columns: 1fr; }
  .account__nav { position: static; display: flex; overflow-x: auto; gap: var(--s-3); }
  .account__nav button { width: auto; white-space: nowrap; border-bottom-width: 2px; }
}

@media (max-width: 600px) {
  /* Wishlist and account move into the drawer so search, cart and menu fit */
  .nav__tools [data-tool="secondary"] { display: none; }
  .hero__mark { right: -22%; width: 105vw; opacity: 0.75; }
  .cats { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: var(--s-4); }
  .line { grid-template-columns: 72px 1fr; }
  .line__price { grid-column: 2; text-align: left; }
  .statline { grid-template-columns: 1fr; }
  .section { padding-block: var(--s-6); }
}

/* --------------------------------------------------------------------------
   Phone type scale
   --------------------------------------------------------------------------
   The desktop sizes were raised deliberately for legibility, but the same
   numbers on a 375px screen leave two or three words per line. These are the
   phone equivalents — still comfortably readable, just proportionate to the
   width. Nothing here goes below 13px.

   The wide tracking is cut back harder than the size: 0.42em on a short screen
   is what makes a four-word eyebrow wrap onto three lines.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --t-hero: clamp(2.1rem, 10vw, 3.25rem);
    --t-xl:   clamp(1.6rem, 7.5vw, 2.25rem);
    --t-lg:   clamp(1.3rem, 5.5vw, 1.75rem);
    --t-md:   1rem;
    --t-sm:   0.9375rem;
    --t-xs:   0.875rem;
    --t-micro: 0.8125rem;
    --gutter: 1.25rem;
  }

  .eyebrow      { letter-spacing: 0.2em; }
  .nav__links > a, .nav__item > a { letter-spacing: 0.12em; }
  .btn          { padding: 0.95rem 1.5rem; letter-spacing: 0.14em; }
  .hero h1      { letter-spacing: -0.02em; }
  .hero__meta   { gap: var(--s-3); }
  .hero__meta div { min-width: 42%; }
  .hero__meta dt, .statline dd { letter-spacing: 0.14em; }
  .statline dt  { font-size: 1.4rem; }
  .footer h4    { letter-spacing: 0.18em; }
  .crumbs       { letter-spacing: 0.08em; }
  .field label  { letter-spacing: 0.14em; }
  .intro-welcome { letter-spacing: 0.4em; }
  .intro-word   { letter-spacing: 0.45em; }
}

/* --------------------------------------------------------------------------
   Phone nav bar
   --------------------------------------------------------------------------
   Four links, a logo and the tools all have to share about 375px. The wordmark
   goes (the monogram already identifies the shop) and the links tighten right
   down — tracking first, then size, because the wide letter-spacing costs far
   more width than the type itself.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .brand__word { display: none; }
  .brand img { height: 24px; }

  .nav__inner { padding-inline: 0.6rem; gap: 0.35rem; }
  .nav__links { gap: 0.6rem; }
  .nav__links > a,
  .nav__item > a {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    padding-block: 2px;
  }

  /* All five tools stay in the bar. With the drawer gone this is the only way
     to reach search, wishlist, cart, account and the theme switch, so they
     shrink rather than drop — 25px keeps five inside a 375px screen alongside
     the links. */
  .nav__tools { gap: 0; }
  .nav__tools [data-tool="secondary"] { display: grid; }
  .icon-btn { width: 25px; height: 36px; }
  .icon-btn svg { width: 15px; height: 15px; }

  /* No room to set it apart on a phone, and the gutter is already tight. */
  #themeToggle { margin-left: 0; margin-right: 0; }

  /* Scaled with the buttons so the count does not hang off the edge. */
  .badge {
    min-width: 14px; height: 14px;
    line-height: 14px;
    font-size: 0.5625rem;
    padding-inline: 3px;
    top: 2px; right: 0;
  }
}

/* Very narrow phones — search goes first if something has to. It is still
   reachable from the shop page; the wishlist and account are not. */
@media (max-width: 340px) {
  .nav__links { gap: 0.45rem; }
  .nav__links > a,
  .nav__item > a { font-size: 0.5625rem; }
  #navSearch { display: none; }
}

/* --------------------------------------------------------------------------
   23. Reduced motion
   -------------------------------------------------------------------------- */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .footer, .marquee, #intro, .toast { display: none !important; }
  main { padding-top: 0; }
}