@charset "UTF-8";
/* ==========================================================================
   NEFFERTINI — visual identity stylesheet
   Governed by Constitution v1.1 §5 (visual identity) and §17.6 (accessibility).

   Binding rules encoded below:
     §5.2  only the master palette; no neon, bright turquoise, gold gradient,
           black-and-gold "hotel luxury" or heavy navy corporate look
     §5.4  chalk ground, wide whitespace, editorial layout; the first screen
           reads like the cover of an interiors magazine; no rounded technology
           cards, no icon soup, no SaaS look; slow, short, functional motion
     §5.4  mobile is designed independently, not a shrunk desktop
     §17.6 WCAG 2.2 AA: contrast, visible focus, reduced motion, real labels
     §14.6 no layout shift; hero is never lazy-loaded
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* §5.2 master palette — the only colours permitted */
  --chalk:      #F4F1EA;
  --travertine: #D4C5AF;
  --deep:       #12343B;
  --mineral:    #587681;
  --olive:      #69705B;
  --clay:       #A7654C;
  --espresso:   #2A2420;
  --white:      #FFFFFF;

  /* Derived neutrals. Every text token below passes 4.5:1 on --chalk. */
  --ink:        var(--espresso);
  --ink-muted:  #5F574E;          /* 6.29:1 on chalk */
  --ink-faint:  #6E655B;          /* 5.07:1 on chalk — smallest permitted text */

  /* §17.6 — the brand accents do NOT pass 4.5:1 as text on chalk:
     Mineral Blue reaches 4.31 and Sunbaked Clay 4.04. The brand hexes are kept
     exactly as specified for surfaces, swatches and borders; these two slightly
     deepened tokens exist purely for accent TEXT, and they measure 4.55 and
     4.58 on chalk. Never use --mineral or --clay for small text. */
  --mineral-text: #56727C;        /* 4.55:1 on chalk */
  --clay-text:    #9A5E48;        /* 4.58:1 on chalk */
  --error-text:   #8C4632;        /* 6.13:1 on chalk, 6.91:1 on white */
  --hairline:   rgba(42, 36, 32, 0.16);
  --hairline-strong: rgba(42, 36, 32, 0.34);
  --hairline-inverse: rgba(244, 241, 234, 0.22);

  /* §5.3 TEMPORARY web fonts standing in for the licensed direction
     (Canela/Ivar-like serif + Suisse/Neue Haas-like grotesk).
     A temporary font is not the brand standard — swap these two lines only. */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Editorial type scale */
  --t-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);
  --t-h1:      clamp(2.25rem, 1.3rem + 3.9vw, 4.5rem);
  --t-h2:      clamp(1.75rem, 1.15rem + 2.3vw, 3rem);
  --t-h3:      clamp(1.25rem, 1.02rem + 0.85vw, 1.75rem);
  --t-lede:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.375rem);
  --t-body:    1rem;
  --t-small:   0.8125rem;
  --t-micro:   0.6875rem;

  /* Rhythm */
  --wrap: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --pad-lg: clamp(4.5rem, 10vw, 10rem);
  --pad-md: clamp(3rem, 6vw, 6rem);
  --pad-sm: clamp(2rem, 4vw, 3.5rem);

  /* §5.4 no rounded technology cards */
  --radius: 0px;

  /* §5.4 slow, short, functional motion */
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --dur: 480ms;
  --dur-fast: 220ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header (§17.6 keyboard navigation) */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  letter-spacing: 0.02em;
}

/* §17.6 — focus is always visible, and never removed */
:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 3px;
}
.section--deep :focus-visible,
.footer :focus-visible { outline-color: var(--chalk); }

::selection { background: var(--travertine); color: var(--espresso); }

.u-visually-hidden {
  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;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--deep); color: var(--chalk);
  padding: 0.85rem 1.4rem; font-size: var(--t-small);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 14px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

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

.section { position: relative; }
.section--pad-lg { padding-block: var(--pad-lg); }
.section--pad-md { padding-block: var(--pad-md); }
.section--pad-sm { padding-block: var(--pad-sm); }
.section--pad-none { padding-block: 0; }

.section--chalk { background: var(--chalk); }
.section--white { background: var(--white); }
.section--travertine { background: var(--travertine); }

.section--deep,
.section--espresso {
  color: var(--chalk);
  --ink: var(--chalk);
  --ink-muted: rgba(244, 241, 234, 0.78);
  --ink-faint: rgba(244, 241, 234, 0.66);
  --hairline: rgba(244, 241, 234, 0.20);
  --hairline-strong: rgba(244, 241, 234, 0.38);
  /* The deepened accent-text tokens are unreadable on a dark ground, so on
     dark sections the accent flips to travertine: 7.85:1 on --deep. */
  --mineral-text: var(--travertine);
  --clay-text: var(--travertine);
}
.section--deep { background: var(--deep); }
.section--espresso { background: var(--espresso); }

.rule { border: 0; border-top: 1px solid var(--hairline); margin: var(--pad-sm) 0; }

.grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3.25rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Editorial split: text column never runs full width (§5.4) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split--reverse > :first-child { order: 2; }
.split--center { align-items: center; }
/* Where the first column IS the main content — a long application form beside
   a short supporting aside — the default 5fr/6fr puts the form in the narrower
   column and strands whitespace next to it. */
.split--main-first { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }

.measure { max-width: 62ch; }
.measure--tight { max-width: 46ch; }
.measure--wide { max-width: 78ch; }

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
}
.eyebrow--accent { color: var(--mineral-text); }

.h-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.028em; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 58ch;
  margin: 1.5rem 0 0;
  font-weight: 300;
}

.prose { max-width: 66ch; color: var(--ink-muted); }
.prose p + p { margin-top: 0; }
.prose h2 { font-size: var(--t-h2); color: var(--ink); margin: 2.6em 0 0.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-h3); color: var(--ink); margin: 2.2em 0 0.6em; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote {
  margin: 2rem 0; padding-left: 1.75rem;
  border-left: 1px solid var(--hairline-strong);
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 300; line-height: 1.35; color: var(--ink);
}

.thesis {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mineral-text);
  margin: 1.5rem 0 0;
}

.pull {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  max-width: 22ch;
  margin: 0;
}

.link-inline { color: inherit; text-underline-offset: 0.22em; }

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 48px;                    /* §17.6 target size */
  padding: 0.9rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn--solid { background: var(--deep); color: var(--chalk); border-color: var(--deep); }
.btn--solid:hover { background: var(--espresso); border-color: var(--espresso); }

.btn--outline { color: var(--ink); border-color: var(--hairline-strong); }
.btn--outline:hover { border-color: var(--ink); background: rgba(42, 36, 32, 0.04); }

.section--deep .btn--solid,
.section--espresso .btn--solid { background: var(--chalk); color: var(--espresso); border-color: var(--chalk); }
.section--deep .btn--solid:hover { background: var(--travertine); border-color: var(--travertine); }
.section--deep .btn--outline { color: var(--chalk); border-color: var(--hairline-strong); }
.section--deep .btn--outline:hover { border-color: var(--chalk); background: rgba(244, 241, 234, 0.08); }

.btn--quiet { padding-inline: 1.2rem; border-color: var(--hairline-strong); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }
.cta-row--center { justify-content: center; }

.link {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-size: var(--t-small); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color var(--dur-fast) var(--ease);
}
.link:hover { border-bottom-color: currentColor; }
.link__arrow { display: inline-block; width: 1.1em; height: 1px; background: currentColor; position: relative; top: -0.28em; transition: width var(--dur-fast) var(--ease); }
.link:hover .link__arrow { width: 1.7em; }

/* --------------------------------------------------------------------------
   6. Header (§11.3)
   -------------------------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--chalk);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--hairline); }

/* Over a hero the header sits on the image until the user scrolls (§12.2) */
.has-hero .header { position: fixed; inset-inline: 0; background: transparent; color: var(--chalk); }
.has-hero .header.is-stuck { background: var(--chalk); color: var(--ink); }

.header__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

.wordmark { text-decoration: none; display: block; margin-right: auto; }
.wordmark__name {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
}
/* §5.1 — a small, separate descriptor. Never part of the logo. */
.wordmark__descriptor {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 5px;
}
.has-hero .header:not(.is-stuck) .wordmark__descriptor { color: rgba(244, 241, 234, 0.72); }

.nav__list, .nav__sublist, .lang__list {
  list-style: none; margin: 0; padding: 0;
}
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2rem); }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--t-small); font-weight: 400;
  letter-spacing: 0.055em;
  text-decoration: none;
  padding: 0.6rem 0;
  border: 0; background: none; color: inherit;
  font-family: var(--font-sans); cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link.is-active { border-bottom-color: currentColor; }

.nav__chev {
  width: 6px; height: 6px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
[aria-expanded="true"] .nav__chev { transform: rotate(-135deg) translateY(-2px); }

.nav__panel, .lang__panel {
  position: absolute; top: calc(100% + 12px); left: -1.5rem;
  min-width: 264px; z-index: 10;
  background: var(--chalk); color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.5rem;
}
.nav__sublink, .lang__link {
  display: block; padding: 0.5rem 0;
  font-size: var(--t-small); text-decoration: none;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease);
}
.nav__sublink:hover, .lang__link:hover { color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.5rem); }

/* Mobile-only block inside the drawer; never rendered on desktop */
.nav__mobile-extra { display: none; }
.nav__lang-note { font-size: var(--t-small); color: var(--ink-faint); margin: 0.5rem 0 0; }

.lang { position: relative; }
.lang__button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--t-small);
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0;
}
.lang__panel { left: auto; right: -1rem; min-width: 190px; }
/* Locales not yet human-edited are shown but not linked (§13.5) */
.lang__link.is-planned { color: var(--ink-faint); opacity: 0.55; cursor: default; }
.lang__link.is-planned::after { content: " — planned"; font-size: var(--t-micro); }

.btn--shop {
  min-height: 42px; padding: 0.6rem 1.35rem;
  border-color: currentColor; font-size: var(--t-micro);
}
.btn--shop:hover { background: var(--deep); color: var(--chalk); border-color: var(--deep); }
.has-hero .header:not(.is-stuck) .btn--shop:hover { background: var(--chalk); color: var(--espresso); border-color: var(--chalk); }

.burger { display: none; }

/* --------------------------------------------------------------------------
   7. Hero (§12.2 — first screen reads like a magazine cover)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
  color: var(--chalk);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* `aspect-ratio` must be cancelled here. With `height: 100%` and an auto width,
   the ratio drives the WIDTH from the height — a 700px-tall hero became a
   1244px-wide box inside a 414px screen, pushing the whole page sideways and
   clipping every line of text against `overflow-x: hidden`. */
.hero__media .photo {
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.hero__media .photo__field { width: 100%; height: 100%; }
.photo__picture { position: absolute; inset: 0; display: block; }
/* The hero scrim (::after, z-index 1) sits above the media, so the slot brief
   would wash out to unreadable and collide with the CTAs. Lift it over the
   scrim and move it out of the headline column. */
.hero__media .photo__meta {
  z-index: 3;
  left: auto; right: 0;
  max-width: min(34ch, 46%);
  background: rgba(42, 36, 32, 0.92);
}
@media (max-width: 900px) {
  /* The hero copy is bottom-anchored on small screens, so a bottom-left brief
     lands on top of the CTAs. Move it to the top of the hero instead. */
  .hero__media .photo__meta {
    max-width: 100%; left: 0; right: 0;
    bottom: auto; top: var(--header-h);
  }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Legibility scrim. Text over the image must still meet 4.5:1 (§17.6).
     Directional on purpose: a flat vertical wash drained the warmth out of the
     plaster and turned the whole frame cold. This protects the left column,
     where the headline and CTAs sit, and leaves the right side — where the
     artwork is — close to its own colour. */
  background:
    linear-gradient(to right, rgba(18, 52, 59, 0.82) 0%,
                              rgba(18, 52, 59, 0.70) 58%,
                              rgba(18, 52, 59, 0.30) 74%,
                              rgba(18, 52, 59, 0.08) 88%,
                              rgba(18, 52, 59, 0.03) 100%),
    linear-gradient(to top, rgba(18, 52, 59, 0.34) 0%,
                            rgba(18, 52, 59, 0.06) 32%,
                            rgba(18, 52, 59, 0) 60%);
}
@media (max-width: 900px) {
  /* On a narrow screen the text runs the full width, so the scrim does too. */
  .hero::after {
    /* The mobile crop takes the centre of the frame, which is the brightest
       part of the image, so the scrim carries more weight than on desktop.
       Measured: this holds the headline at 5.28:1 (§17.6). */
    background: linear-gradient(to top, rgba(18, 52, 59, 0.92) 0%,
                                        rgba(18, 52, 59, 0.82) 42%,
                                        rgba(18, 52, 59, 0.58) 100%);
  }
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
/* Block children span the container by default, so the eyebrow's box ran the
   full width of the hero even though its text sits on the left. Constraining it
   keeps the box, the design and the contrast measurement in agreement — and
   stops longer copy from ever reaching the bright side of the image. */
.hero .eyebrow { color: rgba(244, 241, 234, 0.82); max-width: 40ch; }
.hero .cta-row { max-width: 40rem; }
.hero__title { font-size: var(--t-display); line-height: 0.98; max-width: 13ch; letter-spacing: -0.028em; }
.hero__sub { font-size: var(--t-lede); color: rgba(244, 241, 234, 0.88); max-width: 38ch; margin-top: 1.75rem; font-weight: 300; }
.hero .btn--outline { color: var(--chalk); border-color: rgba(244, 241, 234, 0.5); }
.hero .btn--outline:hover { border-color: var(--chalk); background: rgba(244, 241, 234, 0.1); }
.hero .btn--solid { background: var(--chalk); color: var(--espresso); border-color: var(--chalk); }
.hero .btn--solid:hover { background: var(--travertine); border-color: var(--travertine); }

/* Page hero: a quieter masthead for inner pages */
.masthead { padding-block: clamp(3.5rem, 8vw, 7.5rem) var(--pad-md); }
.masthead__title { font-size: var(--t-h1); max-width: 18ch; }

/* --------------------------------------------------------------------------
   8. Photo slots (§5.5, §5.6)
   -------------------------------------------------------------------------- */

.photo { position: relative; overflow: hidden; background: var(--travertine); }
/* A delivered image fills its slot and keeps the declared aspect ratio, so it
   cannot shift layout while loading (§14.6). */
.photo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__media .photo__img { object-position: center; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--4x3  { aspect-ratio: 4 / 3; }
.photo--3x2  { aspect-ratio: 3 / 2; }
.photo--1x1  { aspect-ratio: 1 / 1; }
.photo--4x5  { aspect-ratio: 4 / 5; }
.photo--2x3  { aspect-ratio: 2 / 3; }
.photo--21x9 { aspect-ratio: 21 / 9; }

/* A woven, material field rather than a grey box — palette only (§5.2) */
.photo__field {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(42,36,32,0.045) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(42,36,32,0.035) 0 1px, transparent 1px 6px),
    linear-gradient(148deg, var(--travertine) 0%, #C6B69E 46%, var(--olive) 100%);
}
.photo__meta {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.4rem;
  max-width: min(46ch, 88%);
  padding: 0.85rem 1.1rem;
  background: rgba(42, 36, 32, 0.82);
  color: var(--chalk);
}
.photo__tag {
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--travertine);
}
.photo__brief { font-size: var(--t-small); line-height: 1.45; color: rgba(244, 241, 234, 0.9); }
.photo__rule {
  font-size: var(--t-micro); line-height: 1.5;
  color: var(--travertine);
  border-top: 1px solid rgba(244, 241, 234, 0.24);
  padding-top: 0.5rem; margin-top: 0.2rem;
}
.photo__status {
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: #E4A88F;                       /* 6.2:1 on the rgba(42,36,32,.82) label */
}
.photo__caption { font-size: var(--t-small); color: var(--ink-faint); margin-top: 0.85rem; }
.photo-figure { margin: 0; }

.placeholder-note {
  font-size: var(--t-small); color: var(--ink-faint);
  display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
  margin-top: 1rem;
}
.tagpill {
  font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--hairline-strong); padding: 0.2rem 0.55rem;
  color: var(--ink-muted); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Cards — a material library, never a campaign poster (§5.4)
   -------------------------------------------------------------------------- */

.card { display: flex; flex-direction: column; }
.card__body { padding-top: 1.35rem; }
.card__title { font-size: var(--t-h3); margin-bottom: 0.5rem; }
.card__meta, .card__footnote {
  font-size: var(--t-small); color: var(--ink-faint); margin-bottom: 0.9rem;
}
.card__footnote { margin-top: 1rem; margin-bottom: 0; line-height: 1.5; }
.card__label {
  display: block; font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.25rem;
}
.card__sku-row { margin-top: 1.1rem; margin-bottom: 0; }
.card__sku { color: var(--ink-muted); }

.swatch { position: relative; overflow: hidden; background: var(--chalk); }
.swatch-svg { width: 100%; height: auto; display: block; }
/* Delivered production artwork fills the swatch frame the same way the
   generated stand-in did, so replacing one with the other changes nothing
   about the layout. */
.swatch__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.swatch--card { aspect-ratio: 1 / 1; }
.swatch--chapter { aspect-ratio: 3 / 4; }
.swatch--weave { aspect-ratio: 1 / 1; }
.swatch--card .swatch-svg, .swatch--chapter .swatch-svg, .swatch--weave .swatch-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.card--design .swatch { transition: transform var(--dur) var(--ease); }

.base__code {
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mineral-text); margin-bottom: 0.5rem;
}

/* Chapter card */
.card--chapter { position: relative; }
.chapter__link { display: block; text-decoration: none; position: relative; }
.chapter__link .swatch { position: relative; }
.chapter__link .swatch::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,52,59,0.78), rgba(18,52,59,0.05) 62%);
}
.chapter__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--chalk);
}
.chapter__body .eyebrow { color: rgba(244, 241, 234, 0.75); margin-bottom: 0.6rem; }
.chapter__name {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  letter-spacing: 0.24em; margin-bottom: 0.6rem;
}
.chapter__headline {
  font-size: var(--t-small); color: rgba(244, 241, 234, 0.86);
  margin-bottom: 1rem; max-width: 32ch; line-height: 1.5;
}
.chapter__cta {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(244, 241, 234, 0.4); padding-bottom: 0.25rem;
}
.chapter__link:hover .chapter__cta { border-bottom-color: var(--chalk); }
.chapter__link:hover .link__arrow { width: 1.7em; }

/* Colour dots */
.colour-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.colour-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 0.9rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--t-small);
}
.colour-row__name { color: var(--ink); }
.colour-row__sku { color: var(--ink-faint); min-width: 0; overflow-wrap: anywhere; }

.dot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.dot-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-micro); color: var(--ink-faint); letter-spacing: 0.06em; }
.dot {
  width: 13px; height: 13px; background: var(--dot);
  border: 1px solid var(--hairline-strong); flex: none;
}

/* A whole card that is a link. The card must not gain link styling. */
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link .card__title { transition: text-decoration-color var(--dur-fast) var(--ease); }
.card-link:hover .card__title { text-decoration: underline; text-underline-offset: 0.18em; }

/* §8.4 — Master 60 designs are shown, but their depth sits behind trade access.
   Held back visually without being hidden or teased. */
.card-locked .swatch { opacity: 0.82; }
.card-locked .card__footnote {
  border-top: 1px solid var(--hairline); padding-top: 0.85rem; margin-top: 1rem;
  font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Route cards on the trade section: text-led, hairline-separated, no icons */
.card--route {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 1.5rem;
}

.design-group + .design-group { margin-top: var(--pad-md); }
.pillar + .pillar { margin-top: var(--pad-md); }

.passport-preview {
  border: 1px solid var(--hairline);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}
.passport-preview .spec__row:last-child { border-bottom: 0; }

/* The manifesto on About — set as a quiet sequence, not as marketing copy */
.pull-list p {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.55rem);
  line-height: 1.3; letter-spacing: -0.012em;
  padding: 0.85rem 0; margin: 0;
  border-bottom: 1px solid var(--hairline);
}
.pull-list p:last-child { border-bottom: 0; }

.apply__aside { display: grid; gap: 1.5rem; align-content: start; }
.apply__aside .note { margin-top: 0; }

/* --------------------------------------------------------------------------
   10. Data: tables, spec lists, stats
   -------------------------------------------------------------------------- */

/* §14.6 — wide content scrolls inside its own container, the page never does */
.table-wrap { overflow-x: auto; margin-block: 1.5rem; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 34rem; }
.table caption {
  text-align: left; font-size: var(--t-small); color: var(--ink-faint);
  padding-bottom: 1rem; line-height: 1.5;
}
.table th, .table td {
  text-align: left; vertical-align: top;
  padding: 0.95rem 1.25rem 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
  line-height: 1.5;
}
.table thead th {
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
  border-bottom-color: var(--hairline-strong);
  padding-bottom: 0.8rem;
}
.table tbody th { font-weight: 500; color: var(--ink); padding-right: 2rem; }
.table td { color: var(--ink-muted); }

.spec { margin: 0; }
.spec__row {
  display: grid; grid-template-columns: minmax(9rem, 34%) 1fr;
  gap: 1.5rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-small);
}
.spec__row:last-child { border-bottom: 0; }
.spec dt { color: var(--ink-faint); min-width: 0; }
/* A grid item defaults to min-width:auto and will not shrink below its longest
   unbreakable string, so an email address or a SKU code pushes the page wider.
   These fields legitimately hold long unbroken tokens. */
.spec dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.sla__v, .card__sku, .crumb { min-width: 0; overflow-wrap: anywhere; }

.stat-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--hairline);
  padding-top: 2.5rem;
}
.stat { display: flex; flex-direction: column; gap: 0.5rem; }
.stat__value { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 300; }
.stat__label { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   11. Notes, disclosures, SLA
   -------------------------------------------------------------------------- */

/* Breadcrumb — an ordered list semantically, never numbered visually */
.breadcrumb { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.crumbs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0.75rem;
  font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.crumb { display: inline-flex; align-items: baseline; gap: 0.75rem; }
.crumb + .crumb::before {
  content: ""; width: 14px; height: 1px;
  background: currentColor; opacity: 0.5;
  align-self: center;
}
.crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { border-bottom-color: currentColor; }
.crumb [aria-current] { color: var(--ink); }

.note {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 1.5rem; margin-top: 2.5rem;
  max-width: 68ch;
}
.note__title {
  font-family: var(--font-sans); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; margin: 0 0 0.85rem;
}
.note__text { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; margin: 0; }
.note--boundary { border-top-color: var(--clay); }

.disclose { border-bottom: 1px solid var(--hairline); }
.disclose__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: var(--t-lede); font-weight: 300; font-family: var(--font-display);
}
.disclose__summary::-webkit-details-marker { display: none; }
.disclose__sign { position: relative; width: 14px; height: 14px; flex: none; }
.disclose__sign::before, .disclose__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.disclose__sign::before { inset-inline: 0; top: 6px; height: 1px; }
.disclose__sign::after { inset-block: 0; left: 6px; width: 1px; }
.disclose[open] .disclose__sign::after { transform: scaleY(0); }
.disclose__body { padding: 0 0 1.75rem; }
.faq-block { margin-top: 3rem; }
.faq { margin-top: 1.5rem; border-top: 1px solid var(--hairline); }

.sla { list-style: none; margin: 2rem 0 0; padding: 0; }
.sla__row {
  display: grid; grid-template-columns: minmax(10rem, 30%) 1fr; gap: 1.5rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-small);
}
.sla__k { color: var(--ink-faint); letter-spacing: 0.04em; }
.sla__v { color: var(--ink); }

/* --------------------------------------------------------------------------
   12. Forms (§15.5, §17.6)
   -------------------------------------------------------------------------- */

.form { max-width: 58rem; }
.fieldset { border: 0; margin: 0 0 var(--pad-sm); padding: 0; }
.fieldset + .fieldset { border-top: 1px solid var(--hairline); padding-top: var(--pad-sm); }
.legend {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 300;
  padding: 0; margin-bottom: 1.75rem;
}

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.field--textarea, .field--file, .field--checkboxes { grid-column: 1 / -1; }

.label {
  display: block; font-size: var(--t-small); font-weight: 500;
  margin-bottom: 0.55rem; color: var(--ink);
}
.label__text {
  display: block; font-size: var(--t-small); font-weight: 500;
  margin-bottom: 0.75rem; color: var(--ink);
}
.label__req { color: var(--clay-text); }
.field__help { font-size: var(--t-small); color: var(--ink-faint); margin: -0.2rem 0 0.6rem; line-height: 1.5; }
.field__help--block { margin-bottom: 1.5rem; max-width: 62ch; }

.input {
  width: 100%; min-height: 48px;
  padding: 0.8rem 1rem;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover { border-color: var(--ink-faint); }
.input:focus-visible { border-color: var(--deep); }
textarea.input { min-height: 9rem; resize: vertical; line-height: 1.6; }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}
.input--file { padding: 0.6rem; background: var(--white); }

.input[aria-invalid="true"] { border-color: var(--clay); border-width: 2px; }

/* §17.6 — errors are announced, described in words, never colour alone */
.form__error {
  font-size: var(--t-small); color: var(--error-text); margin: 0.45rem 0 0;
  min-height: 0; line-height: 1.45;
}
.form__error:empty { margin: 0; }
.form__error::before { content: ""; }
.form__error:not(:empty)::before {
  content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; margin-right: 0.5em;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 0.8em; font-weight: 600;
}

.checkbox-group { display: grid; gap: 0.75rem; }
.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; padding: 0.35rem 0; }
.checkbox--tight { margin-top: 0.9rem; }
.checkbox__input { width: 20px; height: 20px; margin: 0.15rem 0 0; flex: none; accent-color: var(--deep); }
.checkbox__text { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.55; }

.consent-fields { display: grid; gap: 0.5rem; margin: 2rem 0; padding-top: 1.75rem; border-top: 1px solid var(--hairline); }

.form__note { font-size: var(--t-small); color: var(--ink-faint); max-width: 62ch; margin-top: 1.5rem; }
.form__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.form__status { font-size: var(--t-small); margin: 0; color: var(--ink-muted); max-width: 44ch; }
.form__status.is-error { color: var(--error-text); }

/* Conditional blocks — hidden by default, revealed by application type (§15.5) */
[data-group] { display: none; }
[data-group].is-shown { display: block; }
.field-grid > [data-group].is-shown { display: block; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--deep); color: var(--chalk);
  padding-block: var(--pad-md) var(--pad-sm);
  --ink-faint: rgba(244, 241, 234, 0.62);
  --hairline: rgba(244, 241, 234, 0.18);
}
.footer__grid {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.4fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__title {
  font-family: var(--font-sans); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: rgba(244, 241, 234, 0.6); margin: 0 0 1.25rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__link {
  display: inline-block; padding: 0.35rem 0; font-size: var(--t-small);
  color: rgba(244, 241, 234, 0.88); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer__link:hover { border-bottom-color: currentColor; }
.footer__note { font-size: var(--t-small); color: rgba(244, 241, 234, 0.72); max-width: 34ch; }
.footer__field { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.footer__input {
  flex: 1 1 12rem; min-height: 46px; padding: 0.7rem 0.9rem;
  background: transparent; border: 1px solid rgba(244, 241, 234, 0.34);
  color: var(--chalk); font-family: var(--font-sans); font-size: 0.9375rem;
}
.footer__input::placeholder { color: rgba(244, 241, 234, 0.5); }
.footer__submit { color: var(--chalk); border-color: rgba(244, 241, 234, 0.34); min-height: 46px; }
.footer__submit:hover { background: var(--chalk); color: var(--espresso); }
.footer .form__error { color: var(--travertine); }
.footer .checkbox__text { color: rgba(244, 241, 234, 0.72); }

.footer__base {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  margin-top: var(--pad-sm); padding-top: 1.75rem;
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; align-items: baseline;
}
.footer__meta { font-size: var(--t-small); color: rgba(244, 241, 234, 0.66); margin: 0; }
.footer__meta--small { font-size: var(--t-micro); flex-basis: 100%; }

/* --------------------------------------------------------------------------
   14. Consent banner (§18.5) — no dark patterns, reject equals accept
   -------------------------------------------------------------------------- */

.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
  background: var(--espresso); color: var(--chalk);
  border-top: 1px solid rgba(244, 241, 234, 0.2);
}
.consent__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 1rem var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem; align-items: center;
}
.consent__title { font-family: var(--font-sans); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.25rem; font-weight: 500; }
.consent__text { font-size: var(--t-micro); line-height: 1.5; color: rgba(244, 241, 234, 0.82); margin: 0; max-width: 78ch; }
.consent__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.consent__actions .btn { min-height: 42px; padding: 0.7rem 1rem; }
.consent .btn--solid { background: var(--chalk); color: var(--espresso); border-color: var(--chalk); }
.consent .btn--outline { color: var(--chalk); border-color: rgba(244, 241, 234, 0.5); }
.consent .link { color: rgba(244, 241, 234, 0.8); border-bottom-color: rgba(244, 241, 234, 0.3); }

/* --------------------------------------------------------------------------
   15. Motion (§5.4) — slow, short, functional. Never parallax.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   16. Journal
   -------------------------------------------------------------------------- */

.article__head { max-width: 60ch; }
.article__meta { font-size: var(--t-small); color: var(--ink-faint); margin-top: 1.5rem; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.article__body { max-width: 66ch; margin-top: var(--pad-sm); }
.article__body > * + h2 { margin-top: 2.8em; }

.entry { display: grid; gap: 1.25rem; }
.entry__pillar { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mineral-text); }
.entry__title { font-size: var(--t-h3); }
.entry__excerpt { font-size: var(--t-small); color: var(--ink-muted); max-width: 44ch; }
.entry a { text-decoration: none; }
.entry a:hover .entry__title { text-decoration: underline; text-underline-offset: 0.18em; }

/* --------------------------------------------------------------------------
   17. Responsive — mobile is designed, not shrunk (§5.4)
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  .nav, .header__actions .lang { display: none; }
  .burger {
    display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 44px; padding: 0.5rem 0;
    background: none; border: 0; color: inherit; cursor: pointer;
    font-family: var(--font-sans); font-size: var(--t-micro);
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .burger__bar { position: relative; width: 22px; height: 1px; background: currentColor; }
  .burger__bar::before, .burger__bar::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: currentColor;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .burger__bar::before { top: -6px; }
  .burger__bar::after { top: 6px; }
  .burger[aria-expanded="true"] .burger__bar { background: transparent; }
  .burger[aria-expanded="true"] .burger__bar::before { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bar::after { transform: translateY(-6px) rotate(-45deg); }

  /* Full-height drawer. Every §11.3 mobile requirement stays reachable:
     Request Samples, Apply for Trade and Shop Fabric. */
  .nav.is-open {
    display: block; position: fixed;
    inset: var(--header-h) 0 0; z-index: 90;
    background: var(--chalk); color: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1.5rem var(--gutter) 4rem;
    border-top: 1px solid var(--hairline);
  }
  .nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open .nav__item { border-bottom: 1px solid var(--hairline); }
  .nav.is-open .nav__link {
    width: 100%; justify-content: space-between;
    padding: 1.15rem 0; font-size: var(--t-lede);
    font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em;
    border-bottom: 0;
  }
  .nav.is-open .nav__panel {
    position: static; border: 0; padding: 0 0 1.25rem; min-width: 0;
    background: none;
  }
  .nav.is-open .nav__sublink { padding: 0.65rem 0 0.65rem 1rem; font-size: 0.9375rem; }
  .nav.is-open .nav__mobile-extra { display: grid; gap: 0.75rem; margin-top: 2rem; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split--reverse > :first-child { order: 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent__inner { grid-template-columns: 1fr; }
  .hero { min-height: min(86svh, 720px); }
  .hero__title { max-width: 14ch; }
}

@media (max-width: 620px) {
  /* §5.1 — the descriptor is a separate, optional identifier, never part of the
     logo. On a narrow header it wraps to two lines and crowds the actions, so
     the wordmark stands alone. */
  .wordmark__descriptor { display: none; }

  /* Keep all three mobile header actions reachable without widening the page.
     The text label remains available to assistive technology while the compact
     bar shows the universally recognisable menu glyph. */
  .header__inner { gap: 0.75rem; }
  .header__actions .btn--shop { padding-inline: 1rem; }
  .burger { gap: 0; }
  .burger__label {
    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;
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .spec__row, .sla__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .photo__meta { max-width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .consent__inner { padding-block: 0.75rem; gap: 0.65rem; }
  .consent__title { margin-bottom: 0.15rem; }
  .consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .consent__actions .btn { width: 100%; padding-inline: 0.5rem; font-size: 0.67rem; }
  .consent__actions .link { grid-column: 1 / -1; justify-self: center; }
}

/* --------------------------------------------------------------------------
   18. Reduced motion (§17.6) and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .consent, .skip-link, .cta-row, .photo__meta { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Windows High Contrast / forced colours */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .photo__field, .swatch { forced-color-adjust: none; }
}

/* Cookie preferences remain available after the initial choice. */
button.footer__link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 24px; text-decoration: underline; }