/* ==========================================================================
   DENEUVE — a 1970s screenprint, rebuilt for the browser.

   Colours are sampled directly from the original logo artwork so the page and
   the illustration share one ink set. The visual language is print: flat
   colour, chunky ink outlines, hard (never blurred) offset shadows, halftone
   fields, paper grain, and deliberate misregistration on display type.
   ========================================================================== */

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

:root {
  /* Ink set, sampled from deneuve_logo.png */
  --marigold: #f09000;
  --marigold-deep: #d97d00;
  --brick: #bb3410;
  --brick-deep: #96280a;
  /* Brick as *text*. Split from --brick because the fill tone that reads well
     behind white does not clear 4.5:1 as type on the dark ground. */
  --brick-text: #bb3410;

  /* Underline flourish; the stroke colour is baked into the data URI. */
  --wobble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q15 3.5 30 7 T60 7 T90 7 T120 7 T150 7 T180 7 T210 7 T240 7' fill='none' stroke='%23bb3410' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --olive: #748a30;
  --olive-deep: #5b6d24;
  --sky: #3185a6;
  --aubergine: #6b4a6f;
  --ink: #242418;
  --ink-soft: #4a4636;

  /* Paper */
  --paper: #f4e8cd;
  --paper-deep: #e9d9b5;
  --paper-edge: #dcc79c;

  /* Semantic surface roles — remapped wholesale in dark mode */
  --bg: var(--paper);
  --bg-alt: var(--paper-deep);
  --surface: #fbf4e2;
  --surface-sunk: var(--paper-deep);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --rule: var(--ink);
  --rule-soft: #c2ab7e;
  --shadow-ink: var(--ink);

  /* Type */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-text: 'Jost', 'Futura', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-slab: 'Alfa Slab One', 'Fraunces', Georgia, serif;

  /* A fluid scale — no media queries needed for headline sizing */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-4: clamp(2.8rem, 2rem + 4vw, 5rem);
  --step-5: clamp(3.4rem, 2rem + 7vw, 7.5rem);

  /* Rhythm */
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --measure: 62ch;
  --wrap: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
  --border: 2.5px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  color-scheme: light;
}

/* "After hours" — the same press run on black stock. */
:root[data-theme='dark'] {
  --bg: #17170f;
  --bg-alt: #1f1e14;
  --surface: #24231a;
  --surface-sunk: #1a1912;
  --text: #f4e8cd;
  --text-muted: #b9ac8c;
  --rule: #f4e8cd;
  --rule-soft: #4a4636;
  --shadow-ink: #000;
  --marigold: #f5a52b;
  --brick: #d94a24;
  --brick-text: #f0714a;
  --wobble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q15 3.5 30 7 T60 7 T90 7 T120 7 T150 7 T180 7 T210 7 T240 7' fill='none' stroke='%23f0714a' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --olive: #8fa845;
  --sky: #4aa3c6;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #17170f;
    --bg-alt: #1f1e14;
    --surface: #24231a;
    --surface-sunk: #1a1912;
    --text: #f4e8cd;
    --text-muted: #b9ac8c;
    --rule: #f4e8cd;
    --rule-soft: #4a4636;
    --shadow-ink: #000;
    --marigold: #f5a52b;
    --brick: #d94a24;
    --brick-text: #f0714a;
    --wobble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q15 3.5 30 7 T60 7 T90 7 T120 7 T150 7 T180 7 T210 7 T240 7' fill='none' stroke='%23f0714a' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --olive: #8fa845;
    --sky: #4aa3c6;
    color-scheme: dark;
  }
}

/* ----------------------------------------------------------- 2. Base reset */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

img { height: auto; }

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

a { color: inherit; }

ul, ol { list-style: none; padding: 0; }

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

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  transform: translateY(-160%);
  padding: 0.7rem 1.2rem;
  background: var(--marigold);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------- 3. Paper & print effects */

/* Grain sits above everything and multiplies into the page, the way ink and
   paper fibre interact. Pointer-events off so it never eats a click. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

:root[data-theme='dark'] .grain { mix-blend-mode: screen; opacity: 0.28; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .grain { mix-blend-mode: screen; opacity: 0.28; }
}

/* Halftone dot field, used behind hero art and section flourishes. */
.halftone {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 11px 11px;
  opacity: 0.28;
}

/* Diagonal ticking, echoing the striped underside of the logo's D. */
.hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    currentColor 0 3px,
    transparent 3px 9px
  );
  opacity: 0.5;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 120;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { text-wrap: pretty; }

/* Misregistration: a brick-coloured plate printed a hair off the black one. */
.misprint {
  position: relative;
  color: var(--text);
  text-shadow:
    0.055em 0.055em 0 var(--brick),
    0.11em 0.11em 0 color-mix(in srgb, var(--marigold) 65%, transparent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brick-text);
}

.eyebrow::before {
  content: '';
  width: 2.2rem;
  height: var(--border);
  background: currentColor;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: var(--measure);
  color: var(--text-muted);
}

/* Hand-drawn underline. One continuous sine, so the tile joins seamlessly
   Drawn as a single wave stretched to the line's width rather than a repeating
   tile, so there is no seam to line up. Applied as a background rather than a
   mask so it does not clip the text, and so each line box gets its own wave
   when the phrase wraps. The viewBox is taller than the wave so the stroke's
   half-width at the peaks is not clipped away. */
.underline-wobble {
  background-image: var(--wobble);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 13px;
  padding-bottom: 0.2em;
}

/* ------------------------------------------------- 5. Buttons & controls */

.btn {
  --btn-bg: var(--marigold);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border) solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--shadow-ink);
  cursor: pointer;
  transition:
    transform 0.16s var(--ease-spring),
    box-shadow 0.16s var(--ease-spring),
    background-color 0.16s var(--ease-out);
}

.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow-ink); }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 2px 2px 0 var(--shadow-ink);
}

.btn--brick { --btn-bg: var(--brick); --btn-fg: #fff; }
.btn--olive { --btn-bg: var(--olive); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--rule); }
.btn--ghost:hover { --btn-bg: var(--marigold); --btn-fg: var(--ink); }
.btn--sm { padding: 0.5em 1em; font-size: var(--step--1); box-shadow: 3px 3px 0 var(--shadow-ink); }
.btn--block { width: 100%; }

/* Small square utility button (icon only) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--surface);
  color: var(--text);
  border: var(--border) solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.16s var(--ease-out), transform 0.16s var(--ease-spring);
}
.icon-btn:hover { background: var(--marigold); color: var(--ink); transform: rotate(-6deg); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

.field { display: grid; gap: 0.4rem; }

.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.72em 0.95em;
  background: var(--surface);
  color: var(--text);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 color-mix(in srgb, var(--rule) 12%, transparent);
  transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}

.textarea { min-height: 8rem; resize: vertical; }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brick-text);
  box-shadow: 3px 3px 0 var(--brick);
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--brick-text); }

.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23242418' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.75rem;
  cursor: pointer;
}

:root[data-theme='dark'] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4e8cd' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.field-error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brick-text);
  min-height: 1.2em;
}

/* -------------------------------------------------------------- 6. Layout */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: clamp(3.5rem, 9vw, 7.5rem); position: relative; }
.section--tint { background: var(--bg-alt); }

.section-head {
  display: grid;
  gap: 0.9rem;
  max-width: 46ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* Torn-paper edge between bands of colour.

   The silhouette is a mask rather than a coloured shape, so the tear picks up
   --bg-alt automatically and stays correct in both themes. */
.section--tint {
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' preserveAspectRatio='none' viewBox='0 0 1200 40'%3E%3Cpath fill='%23000' d='M0 40V16c60-8 110 6 170 4s96-16 158-14 104 18 168 16 106-18 168-16 104 16 164 14 116-14 172-6v26Z'/%3E%3C/svg%3E");
}

.section--tint::before,
.section--tint::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(20px, 3.2vw, 38px);
  background: var(--bg-alt);
  -webkit-mask-image: var(--tear);
  mask-image: var(--tear);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* 1px of overlap hides the hairline seam sub-pixel rounding can leave. */
.section--tint::before { bottom: 100%; margin-bottom: -1px; }
.section--tint::after { top: 100%; margin-top: -1px; transform: scaleY(-1); }

/* Sticker: a rotated, hard-shadowed card — the base object of this design. */
.sticker {
  background: var(--surface);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}

/* ------------------------------------------------------ 7. Ticker & header */

.ticker {
  position: relative;
  z-index: 60;
  overflow: hidden;
  /* --brick lightens in dark mode; --brick-deep does not, so the cream text
     keeps its contrast ratio in both themes. */
  background: var(--brick-deep);
  color: #fff8e7;
  border-bottom: var(--border) solid var(--ink);
  font-family: var(--font-slab);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.55rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  padding-left: 3rem;
  animation: ticker-scroll 42s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: flex; align-items: center; gap: 3rem; white-space: nowrap; }
.ticker__item::after { content: '✻'; color: var(--marigold); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: var(--border) solid var(--rule);
  transition: box-shadow 0.2s var(--ease-out);
}

.site-header[data-stuck='true'] { box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--rule) 18%, transparent); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: 0.7rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

.brand__mark {
  width: clamp(44px, 6vw, 58px);
  transition: transform 0.4s var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

.brand__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.brand__tag {
  display: block;
  font-family: var(--font-text);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Below this the tagline cannot sit on one line without crowding the tools. */
@media (max-width: 420px) {
  .brand__tag { display: none; }
}

.nav { display: flex; align-items: center; gap: 0.35rem; }

.nav__link {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.16s var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 3px;
  background: var(--marigold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 0.5rem; }

.cart-btn { position: relative; }

.cart-btn__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.3rem;
  display: grid;
  place-items: center;
  background: var(--brick);
  color: #fff;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.cart-btn__count[hidden] { display: none; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; }

  .nav {
    /* Absolute against .site-header, not fixed: the header's backdrop-filter
       makes it the containing block for fixed descendants, so `fixed` here
       would resolve bottom:0 to the header's own bottom edge. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h, 5rem));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2.5rem;
    background: var(--bg);
    border-top: var(--border) solid var(--rule);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform 0.32s var(--ease-out), visibility 0.32s;
    overflow-y: auto;
  }

  .nav[data-open='true'] { transform: translateY(0); visibility: visible; }

  .nav__link {
    padding: 1rem 0.4rem;
    font-size: var(--step-1);
    border-bottom: 2px solid var(--rule-soft);
    border-radius: 0;
  }
  .nav__link::after { display: none; }
}

/* ---------------------------------------------------------------- 8. Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 8vw, 6.5rem);
}

/* Concentric sunburst behind the artwork — pure CSS conic gradient. */
.hero__rays {
  position: absolute;
  top: 46%;
  right: 6%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--marigold) 42%, transparent) 0deg 7deg,
    transparent 7deg 14deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  animation: slow-spin 90s linear infinite;
  pointer-events: none;
}

@keyframes slow-spin { to { rotate: 360deg; } }

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.hero__title {
  font-size: var(--step-5);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--brick-text);
  text-shadow: none;
}

.hero__copy { display: grid; gap: 1.4rem; justify-items: start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  margin-top: 0.6rem;
  padding-top: 1.4rem;
  border-top: var(--border) dashed var(--rule-soft);
  width: 100%;
}

.stat { display: flex; flex-direction: column-reverse; }

.stat__value {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--brick-text);
}

.stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__art { position: relative; justify-self: center; width: 100%; max-width: 520px; }

.hero__art img {
  width: 100%;
  filter: drop-shadow(10px 12px 0 color-mix(in srgb, var(--shadow-ink) 22%, transparent));
  animation: float 9s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

.hero__halftone {
  position: absolute;
  inset: 12% -6% -8% 4%;
  color: var(--brick-text);
  z-index: -1;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}

/* Rotating starburst seal, the sort stamped on a shop window. */
.seal {
  position: absolute;
  bottom: 4%;
  left: -7%;
  width: clamp(96px, 13vw, 148px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink);
  z-index: 2;
}

.seal__burst { position: absolute; inset: 0; animation: slow-spin 26s linear infinite; }

.seal__text {
  position: relative;
  font-family: var(--font-slab);
  font-size: clamp(0.6rem, 1.4vw, 0.78rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 380px; }
  .seal { bottom: 2%; left: -2%; }
}

/* ------------------------------------------------------------ 9. Services */

.services {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.service {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--shadow-ink);
  transition: transform 0.24s var(--ease-spring), box-shadow 0.24s var(--ease-spring);
}

.service:nth-child(2) { rotate: -1.1deg; }
.service:nth-child(3) { rotate: 0.9deg; }

.service:hover {
  rotate: 0deg;
  transform: translate(-3px, -5px);
  box-shadow: 11px 12px 0 var(--shadow-ink);
}

.service__index {
  position: absolute;
  top: -1.1rem;
  right: 1.2rem;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  background: var(--marigold);
  color: var(--ink);
  border: var(--border) solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-slab);
  font-size: 1.05rem;
}

.service:nth-child(2) .service__index { background: var(--olive); color: #fff; }
.service:nth-child(3) .service__index { background: var(--sky); color: #fff; }

.service__icon { width: 3.2rem; height: 3.2rem; color: var(--brick-text); }
.service__list { display: grid; gap: 0.45rem; margin-top: 0.35rem; }

.service__list li {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.service__list li::before { content: '✂'; color: var(--brick-text); flex: none; }

.service__price {
  margin-top: 0.5rem;
  font-family: var(--font-slab);
  font-size: 0.9rem;
  color: var(--brick-text);
}

/* ---------------------------------------------------------- 10. Shop grid */

.shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-end;
  margin-bottom: 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--shadow-ink);
}

.shop__toolbar .field { flex: 1 1 12rem; }
.shop__toolbar .field--search { flex: 2 1 18rem; }

.shop__result-count {
  flex: 0 0 auto;
  padding-bottom: 0.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }

.chip {
  padding: 0.42em 1em;
  background: transparent;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}

.chip:hover { background: color-mix(in srgb, var(--marigold) 35%, transparent); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
:root[data-theme='dark'] .chip[aria-pressed='true'] { background: var(--marigold); color: var(--ink); }

/* Explicit steps rather than auto-fill: on a phone auto-fill collapsed to one
   very tall column, and two is the right density for a shop. */
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (min-width: 660px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  overflow: hidden;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-spring);
}

.card:hover,
.card:focus-within { transform: translate(-3px, -4px); box-shadow: 10px 11px 0 var(--shadow-ink); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunk);
  border-bottom: var(--border) solid var(--rule);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.05); }

/* Stand-in artwork when a product has no photograph — a printed swatch
   rather than a grey box, so an image-less catalogue still looks deliberate. */
.card__swatch {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--marigold) 55%, transparent) 0 10px,
      transparent 10px 20px),
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--olive) 45%, transparent), transparent 62%),
    var(--surface-sunk);
}

.card__swatch span {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  font-size: 3.4rem;
  color: var(--ink);
  opacity: 0.72;
}

.card__badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.28em 0.7em;
  background: var(--brick);
  color: #fff;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  rotate: -4deg;
}

.card__badge--sold { background: var(--ink-soft); }

.card__body { display: grid; gap: 0.35rem; padding: 1rem 1.05rem 1.15rem; flex: 1; }

.card__cat {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.15;
}

/* The whole card is clickable, but only the title is a real link — so the
   keyboard tab order stays one stop per product. */
.card__link { text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; }

.card__desc {
  font-size: var(--step--1);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.card__price { font-family: var(--font-slab); font-size: 1.15rem; color: var(--brick-text); }

/* Sits above the stretched-link pseudo-element so it stays clickable. */
.card__add { position: relative; z-index: 1; }

/* ------------------------------------------------- 11. Loading & states */

.skeleton {
  border: var(--border) solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.skeleton__media { aspect-ratio: 4 / 5; }
.skeleton__body { display: grid; gap: 0.6rem; padding: 1rem; }
.skeleton__line { height: 0.85rem; border-radius: 4px; }
.skeleton__line--short { width: 45%; }

.skeleton__media,
.skeleton__line {
  background: linear-gradient(
      90deg,
      var(--surface-sunk) 0%,
      color-mix(in srgb, var(--marigold) 22%, var(--surface-sunk)) 50%,
      var(--surface-sunk) 100%
    )
    0 0 / 220% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
  to { background-position: -220% 0; }
}

.state {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
  background: var(--surface);
  border: var(--border) dashed var(--rule-soft);
  border-radius: var(--radius);
}

.state__mark { width: 5rem; opacity: 0.85; animation: float 7s ease-in-out infinite; }
.state__title { font-size: var(--step-2); }
.state p { max-width: 44ch; color: var(--text-muted); }

/* ------------------------------------------------------------ 12. Process */

.process {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  counter-reset: step;
}

.step { position: relative; display: grid; gap: 0.6rem; padding-top: 3.6rem; }

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--brick-text);
}

.step::after {
  content: '';
  position: absolute;
  top: 1.6rem;
  left: 4.5rem;
  right: -1rem;
  height: 2.5px;
  background-image: linear-gradient(90deg, var(--rule-soft) 55%, transparent 55%);
  background-size: 11px 100%;
}

.step:last-child::after { display: none; }
.step h3 { font-size: var(--step-1); }
.step p { font-size: var(--step--1); color: var(--text-muted); }

@media (max-width: 760px) {
  .step::after { display: none; }
}

/* ------------------------------------------------------------ 13. Atelier */

.atelier {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.atelier__figure {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--marigold);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--shadow-ink);
  rotate: -1.4deg;
}

.atelier__figure::before {
  content: '';
  position: absolute;
  inset: 0.55rem;
  border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}

.atelier__figure img { width: 100%; }

.atelier__notes { display: grid; gap: 1.1rem; }

.note-list { display: grid; gap: 0.9rem; margin-top: 0.5rem; }

.note-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-bottom: 0.9rem;
  border-bottom: 2px dotted var(--rule-soft);
}

.note-list li:last-child { border-bottom: 0; }

.note-list dt,
.note-list strong { font-weight: 600; }

.note-list svg { width: 1.5rem; height: 1.5rem; color: var(--brick-text); margin-top: 0.2rem; }

/* -------------------------------------------------------------- 14. Visit */

.visit {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: start;
}

.hours { display: grid; gap: 0.55rem; }

.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dotted var(--rule-soft);
  font-size: var(--step--1);
}

.hours > div[data-today='true'] { color: var(--brick-text); font-weight: 700; }

.hours > div[data-today='true'] dt::after {
  content: ' ← today';
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.enquiry {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--surface);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--shadow-ink);
}

.enquiry__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.form-status {
  padding: 0.8rem 1rem;
  border: var(--border) solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
}
.form-status[hidden] { display: none; }
.form-status--ok { background: color-mix(in srgb, var(--olive) 28%, var(--surface)); }
.form-status--bad { background: color-mix(in srgb, var(--brick) 22%, var(--surface)); }

/* ------------------------------------------------------------- 15. Footer */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 5px solid var(--brick);
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
}

:root[data-theme='dark'] .site-footer { background: #100f0a; }

.site-footer a { color: inherit; }

.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.footer__brand { display: grid; gap: 0.9rem; align-content: start; }
.footer__brand img { width: 96px; }
.footer__brand p { color: color-mix(in srgb, var(--paper) 70%, transparent); max-width: 34ch; }

.footer__title {
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marigold);
  margin-bottom: 0.9rem;
}

.footer__links { display: grid; gap: 0.5rem; }

.footer__links a {
  text-decoration: none;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  transition: color 0.16s var(--ease-out), padding-left 0.16s var(--ease-out);
}

.footer__links a:hover { color: var(--marigold); padding-left: 0.35rem; }

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 2px solid color-mix(in srgb, var(--paper) 25%, transparent);
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

/* ------------------------------------------------- 16. Drawer, modal, toast */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease-out), visibility 0.28s;
}

.scrim[data-open='true'] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  width: min(27rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: var(--border) solid var(--rule);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform 0.36s var(--ease-out), visibility 0.36s;
}

.drawer[data-open='true'] { transform: translateX(0); visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem var(--gutter);
  border-bottom: var(--border) solid var(--rule);
}

.drawer__head h2 { font-size: var(--step-2); margin-right: auto; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem var(--gutter); }

.drawer__foot {
  padding: 1.2rem var(--gutter);
  border-top: var(--border) solid var(--rule);
  background: var(--surface);
  display: grid;
  gap: 0.9rem;
}

.cart-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px dotted var(--rule-soft);
}

.cart-line__thumb {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunk);
}

.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__title { font-weight: 600; line-height: 1.25; }
.cart-line__meta { font-size: var(--step--1); color: var(--text-muted); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.qty button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.14s var(--ease-out);
}

.qty button:hover { background: var(--marigold); color: var(--ink); }
.qty output { min-width: 1.9rem; text-align: center; font-weight: 600; font-size: 0.9rem; }

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-slab);
  font-size: var(--step-1);
}

.cart-note { font-size: 0.76rem; color: var(--text-muted); text-align: center; }

/* Quick-view dialog */
.quickview {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease-out), visibility 0.24s;
}

.quickview[data-open='true'] { opacity: 1; visibility: visible; }

.quickview__panel {
  position: relative;
  width: min(56rem, 100%);
  max-height: min(90vh, 46rem);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  background: var(--bg);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 12px 12px 0 var(--shadow-ink);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.3s var(--ease-spring);
}

.quickview[data-open='true'] .quickview__panel { transform: scale(1) translateY(0); }

.quickview__media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-sunk); overflow: hidden; }
.quickview__media img { width: 100%; height: 100%; object-fit: cover; }
.quickview__body { display: grid; gap: 0.85rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.25rem); }
.quickview__price { font-family: var(--font-slab); font-size: var(--step-2); color: var(--brick-text); }
.quickview__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; }

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  z-index: 130;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  pointer-events: none;
  width: min(24rem, calc(100% - 2rem));
}

.toast {
  padding: 0.8rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  border: var(--border) solid var(--marigold);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--brick);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
  animation: toast-in 0.3s var(--ease-spring);
}

.toast[data-leaving='true'] { animation: toast-out 0.25s var(--ease-out) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.9); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(0.6rem) scale(0.95); }
}

/* ------------------------------------------------------- 17. Scroll reveal */

/* Only hidden when scripting is on — see the .js class set in theme.js. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------------------------------------------------- 18. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; padding-left: 0; }
  .hero__art img { animation: none; }
}

/* ------------------------------------------------------------- 19. Print */

@media print {
  .grain, .ticker, .site-header, .drawer, .scrim, .quickview,
  .toast-stack, .hero__rays, .seal { display: none !important; }

  body { background: #fff; color: #000; }
  /* Never print a blank band because a section was not scrolled into view. */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card, .service, .sticker { box-shadow: none; border-color: #000; }
  .section { padding-block: 1.5rem; }
}

/* -------------------------------------------------- 20. Utility helpers */

.stack { display: grid; gap: 1rem; }
.stack--lg { gap: 1.75rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.text-center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Inline SVG does not always pick up the UA [hidden] rule. */
svg[hidden] { display: none !important; }

/* Two-up cards on a phone need a little less padding and a smaller price. */
@media (max-width: 480px) {
  .card__body { padding: 0.75rem 0.8rem 0.9rem; }
  .card__title { font-size: 1rem; }
  .card__price { font-size: 1rem; }
  .card__desc { display: none; }
  .card__foot { flex-wrap: wrap; }
}

/* ------------------------------------------------- 21. Long-form pages

   The About page is mostly reading, so it drops to a single measure-width
   column and leans on rules and numbers instead of cards. */

.prose-head { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.prose-head h1 { margin-block: 0.5rem 1rem; max-width: 16ch; }
.prose-head .lede { max-width: 52ch; }

.prose {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  max-width: 68ch;
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
}

.prose__block { display: grid; gap: 0.9rem; }

.prose__block > h2 {
  font-size: var(--step-2);
  padding-bottom: 0.6rem;
  border-bottom: var(--border) solid var(--rule);
  margin-bottom: 0.4rem;
}

.prose__block p { max-width: var(--measure); }
.prose__block a:not(.btn) { color: var(--brick-text); text-underline-offset: 0.2em; }
.prose__block .btn { margin-top: 0.5rem; margin-right: 0.5rem; }

/* Numbered steps, using the same outlined numerals as the home page. */
.numbered { display: grid; gap: 1.6rem; counter-reset: n; }

.numbered > li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.4rem 1rem;
  align-items: start;
}

.numbered > li::before {
  counter-increment: n;
  content: counter(n, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--brick-text);
}

.numbered h3 { font-size: var(--step-1); }
.numbered p { color: var(--text-muted); }

/* Condition grades: a definition list set as a ruled table. */
.grades { display: grid; gap: 0; margin-top: 0.4rem; }

.grades > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.3rem 1.2rem;
  padding: 0.9rem 0;
  border-bottom: 2px dotted var(--rule-soft);
}

.grades > div:first-child { border-top: 2px dotted var(--rule-soft); }

.grades dt {
  font-family: var(--font-slab);
  font-size: 0.92rem;
  color: var(--brick-text);
}

.grades dd { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .grades > div { grid-template-columns: 1fr; }
  .numbered > li { grid-template-columns: 2.6rem 1fr; }
}

.plain-list { display: grid; gap: 0.7rem; margin-top: 0.3rem; }

.plain-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--text-muted);
}

.plain-list li::before { content: '✕'; color: var(--brick-text); font-weight: 700; }