/* ---- tokens.css ---- */
/* ==========================================================================
   site-kit : tokens/tokens.css
   Semantic design tokens (SPEC.md section 5). Light-theme defaults = Suzanne
   (F:\Claude\suzanne-dolan\public\assets\site.css, tokens block, 2026-10-21).
   A theme file (themes/<name>.css) overrides these inside :root and adds its
   @font-face rules. Load order: tokens.css -> themes/<name>.css -> base/base.css.
   ========================================================================== */
:root {
  /* colour: page ground, one deeper plate, raised surfaces */
  --bg: #F4F4F1;
  --bg-deep: #ECECE8;
  --bg-raise: #FAFAF8;
  /* text; secondary text (at least 4.5:1 on --bg, checked by tools/check.mjs) */
  --fg: #1A1A1A;           /* 15.8:1 on --bg */
  --fg-soft: #6B6B68;      /* 4.9:1 on --bg */
  /* hairlines (decorative, may be under 3:1); control borders (at least 3:1) */
  --rule: #DADAD6;
  --line: #8A8A86;         /* 3.1:1 on --bg */
  /* the one accent: links, focus ring, primary button fill; text on it; resting underline */
  --accent: #2E4A7D;       /* 8.0:1 on --bg */
  --accent-fg: #F4F4F1;
  --accent-line: #9AAAC7;
  /* form errors (with text, never colour alone); ::selection ground */
  --error: #8A2E24;        /* 7.3:1 on --bg */
  --selection: #DCE2EC;

  /* type: self-hosted WOFF2, latin subset, declared in the theme file */
  --font-display: 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* type scale: ratio 1.2 on a 17px base at 375px, ratio 1.25 on an 18px base at 1180px (Suzanne) */
  --step-mono: clamp(0.8125rem, 0.7834rem + 0.1242vw, 0.875rem);  /* 13px -> 14px, mono lines */
  --step--1: 0.9375rem;                                           /* 15px: nav, buttons, footer, labels */
  --step-0: clamp(1.0625rem, 1.0334rem + 0.1242vw, 1.125rem);     /* 17px -> 18px: body */
  --step-1: clamp(1.275rem, 1.2139rem + 0.2609vw, 1.4062rem);     /* 20.4px -> 22.5px: h3, lead */
  --step-2: clamp(1.53rem, 1.4239rem + 0.4528vw, 1.7578rem);      /* 24.5px -> 28.1px */
  --step-3: clamp(1.836rem, 1.6677rem + 0.718vw, 2.1973rem);      /* 29.4px -> 35.2px: h2 */
  --step-4: clamp(2.2032rem, 1.9501rem + 1.08vw, 2.7466rem);      /* 35.3px -> 43.9px */
  --step-5: clamp(2.6438rem, 2.2761rem + 1.569vw, 3.4332rem);     /* 42.3px -> 54.9px: h1 */
  --step-6: clamp(3.1726rem, 2.6514rem + 2.224vw, 4.2915rem);     /* 50.8px -> 68.7px: the display cap */
  --measure: 66ch;

  /* spacing: 8px grid */
  --space-1: 0.5rem;   /* 8   */
  --space-2: 1rem;     /* 16  */
  --space-3: 1.5rem;   /* 24  */
  --space-4: 2rem;     /* 32  */
  --space-5: 2.5rem;   /* 40  */
  --space-6: 3rem;     /* 48  */
  --space-7: 4rem;     /* 64  */
  --space-8: 6rem;     /* 96  */
  --section: clamp(4rem, 2.3696rem + 6.9565vw, 7.5rem);   /* 64px -> 120px between sections */
  --wrap: 1180px;
  /* side gutter: 16px floor on phones (1rem), 40px on desktop */
  --pad: clamp(1rem, 0.6677rem + 2.4845vw, 2.5rem);

  /* motion; everything honours prefers-reduced-motion (base.css) */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-1: 120ms;    /* a press, a hover */
  --dur-2: 500ms;    /* a reveal, a sheet */
}

/* Suzanne round 13: past 1600px the root size and the container grow together */
@media (min-width: 1600px) {
  :root { --wrap: 1400px; }
  html { font-size: 110%; }
}
@media (min-width: 2200px) {
  :root { --wrap: 1640px; }
  html { font-size: 120%; }
}

/* ------------------------------------------------- compatibility aliases -- */
/* Ported CSS runs unchanged in v1 (SPEC.md section 5); v2 may rename.
   Every alias is var(--token), never a second literal colour. */
:root {
  /* Suzanne names */
  --paper: var(--bg);
  --paper-deep: var(--bg-deep);
  --paper-raise: var(--bg-raise);
  --ink: var(--fg);
  --ink-soft: var(--fg-soft);
  --t-mono: var(--step-mono);
  --t-sm: var(--step--1);
  --t-0: var(--step-0);
  --t-1: var(--step-1);
  --t-2: var(--step-2);
  --t-3: var(--step-3);
  --t-4: var(--step-4);
  --t-5: var(--step-5);
  --t-6: var(--step-6);
  --s-1: var(--space-1);
  --s-2: var(--space-2);
  --s-3: var(--space-3);
  --s-4: var(--space-4);
  --s-5: var(--space-5);
  --s-6: var(--space-6);
  --s-8: var(--space-7);
  --s-12: var(--space-8);
  --gutter: var(--pad);
  --reveal-ms: var(--dur-2);
  /* TCI names (Tattoo City Ink site-v3) */
  --warm-ink: var(--fg);
  --warm-line: var(--line);
  --warm-muted: var(--fg-soft);
  --paper-2: var(--fg-soft);
  --muted: var(--fg-soft);
  /* LWC names (LuckyWinCity) */
  --ivory: var(--fg);
  --gold: var(--accent);
  --gold-hi: var(--accent-line);
}

/* ---- theme.css ---- */
/* site-kit theme: becca (light) — Rebecca Thorne, preview due 2026-10-23.
   Source: F:\Claude\webs.ie\leads\rebecca-thorne\mockup-v2\style.css line 1
   (paper #f8f4eb, ink #1a1816, line #e4ddcd, available-dot green #3a8a46; the mockup nav grey
   #4a443b and eyebrow #8a8070). Fonts fetched from Google Fonts at build time (latin subset,
   Chrome UA) into fonts/becca/: Cormorant Garamond 500 + 500 italic (static files), Jost served
   as ONE variable file covering 300-500.
   Mechanism: overrides tokens inside :root. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/becca/cormorant-garamond-500.woff2?v=8197bf53') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/becca/cormorant-garamond-500-italic.woff2?v=4fb55a7a') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/fonts/becca/jost-var.woff2?v=7726a5cd') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f8f4eb;
  --bg-deep: #efe9dc;     /* one step into the paper (derived; the mockup has no plate colour) */
  --bg-raise: #fdfbf6;    /* fields, one step out (derived) */
  --fg: #1a1816;          /* 16.1:1 on --bg */
  --fg-soft: #5f584d;     /* 6.4:1 on --bg (the mockup eyebrow #8a8070 is 3.5:1, too light for body-size text; lifted) */
  --rule: #e4ddcd;        /* the mockup --line, a hairline */
  --line: #8a8070;        /* control borders, 3.5:1 on --bg */
  --accent: #1a1816;      /* the mockup buttons and active nav are ink; no second colour. 16.1:1 */
  --accent-fg: #f8f4eb;
  --accent-line: #b9b0a0;
  --error: #8A2E24;       /* 7.7:1 on --bg */
  --selection: #e4ddcd;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;   /* no mono file in this theme */
  /* theme-local extra: the "available" dot (3.9:1 on --bg: a dot, never text alone) */
  --ok: #3a8a46;
}

/* ---- base.css ---- */
/* ==========================================================================
   site-kit : base/base.css
   Reset, body type, headings, .wrap, skip link, focus ring, buttons,
   reduced-motion, print. Ported 2026-10-21 from suzannedolanart.com
   (F:\Claude\suzanne-dolan\public\assets\site.css: "base" 115-174, "typography"
   174-244, "layout" 244-289, the .skip link 289-303, .btn 440-478, the
   reduced-motion and print blocks 950-984) with colours and fonts renamed to the
   tokens. Nothing page-specific: no world layer, sheet, frames, cutouts, kiln.
   Load order: tokens/tokens.css -> themes/<name>.css -> base/base.css -> section.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line) var(--bg);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  font-kerning: normal;
  caret-color: var(--accent);
  isolation: isolate;
}

::selection { background: var(--selection); color: var(--fg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: 0; }
figure { margin: 0; }
p, h1, h2, h3, h4, ul, ol, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
hr, .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
[hidden] { display: none !important; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.16em;
}
a:hover { text-decoration-color: var(--accent); }

/* ----------------------------------------------------------- typography -- */
/* headings in the display face at weight 500, tighter with size; a title is marked by weight and
   position, never by italics */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  color: var(--fg);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--step-3); letter-spacing: -0.016em; }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 500; }
.display { font-size: var(--step-6); line-height: 1.0; letter-spacing: -0.026em; }
.display--sm { font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.02em; }
em, .italic { font-style: italic; }
cite { font-style: normal; font-weight: 500; }
.lead { font-size: var(--step-1); line-height: 1.45; text-wrap: pretty; max-width: 34ch; }
.muted { color: var(--fg-soft); }
.mono { font-family: var(--font-mono); font-size: var(--step-mono); letter-spacing: 0.01em; }
.small { font-size: var(--step--1); }

/* running head. One per page, not one per section. */
.folio {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: var(--space-3);
}
.folio + h1, .folio + h2, .folio + .display { margin-top: 0; }

/* prose: one measure, more air above headings than below */
.prose { max-width: var(--measure); line-height: 1.6; text-wrap: pretty; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { margin-top: 2em; }
.prose > h3 { margin-top: 1.8em; }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote {
  margin: 1.5em 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.4;
}
.prose blockquote p { margin: 0; }
.prose--sm { font-size: var(--step--1); }
.flow > * + * { margin-top: var(--flow, 1em); }

/* --------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: calc(51.25rem + 2 * var(--pad)); }   /* 820px at the base size, grows with the root */
.section { padding-block: var(--section); }
.section--first { padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.section--tight { padding-block: var(--space-7); }
.section + .section { padding-top: 0; }
.section--ruled { border-top: 1px solid var(--rule); }
.section--ruled + .section--ruled, .section + .section--ruled { padding-top: var(--section); }

/* responsive object grid: 1 / 2 / 3 columns */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-4);
}
@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* photo + text split */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__sticky { position: sticky; top: var(--space-4); }
}

.visually-hidden, .sr, .sr-only {
  position: absolute !important;
  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;
}

/* ------------------------------------------------------------- skeleton -- */
.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 2px;
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ----------------------------------------------------------- components -- */
/* buttons: page ground, 1.5px ink border, ink text, mono label; hover, active and a pressed toggle
   fill with ink. The focus ring is the global one. .btn--primary fills with the accent. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border: 1.5px solid var(--fg);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.8125rem;   /* 13px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--dur-1) var(--ease);
}
.btn:hover, .btn:active, .btn[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; pointer-events: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover, .btn--primary:active { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--quiet {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  text-decoration-color: currentColor;
}
.btn--quiet:hover, .btn--quiet:active, .btn--quiet[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
/* the same stillness under html.no-motion (shots, ?static=1), set by base.js */
html.no-motion *, html.no-motion *::before, html.no-motion *::after { transition: none !important; animation: none !important; }

/* ----------------------------------------------------------------- print -- */
.print-only { display: none; }
@media print {
  .skip, .btn, .no-print { display: none !important; }
  .print-only { display: block; }
  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; line-height: 1.45; }
  a { color: #000; text-decoration: none; }
  .wrap { max-width: none; padding: 0; }
  .section { padding-block: 1.5rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .split { grid-template-columns: 1fr; }
  .split__sticky { position: static; }
  h1, h2, h3 { break-after: avoid; }
  figure { break-inside: avoid; }
}

/* ---- site.css ---- */
/* ==========================================================================
   site-kit starter : public/assets/site.css — what is left of suzannedolanart.com site.css (git cf1ec2b, 983 lines)
   after the split of 2026-10-21: the tokens went to tokens.css (the kit's), the fonts and colours to theme.css
   (the kit theme you copy in), base/typography/layout/buttons/skip/print to base.css (the kit's), the header,
   menu sheet and footer to header-sheet.css + footer.css, the grounds, objects, turning vessel and motion were
   removed with the turntable. What stays is shared by the admin, the 404 and the error page only (public pages
   get the same rules from their section file): the TODO(proof) marker, the bordered plate, form fields, ruled
   rows, the stub aliases and the two small pages. Delete a rule here when nothing references it any more.
   Load order (src/views/layout.ts): tokens.css -> theme.css -> base.css -> site.css -> header-sheet.css ->
   footer.css -> the page's section files.
   ========================================================================== */

/* the quiet TODO(proof) marker for facts we do not have yet */
.notice {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* the enquiry plate: the one bordered panel on the site */
.plate {
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.plate__title { font-size: var(--t-3); line-height: 1.1; letter-spacing: -0.008em; }
.plate__text { margin-top: var(--s-2); max-width: 48ch; text-wrap: pretty; }
.plate .actions { margin-top: var(--s-4); }
@media (max-width: 479.98px) { .plate .btn { width: 100%; } }

/* form fields: 44px tap height, 16px+ type so iOS does not zoom, text under each field */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: var(--s-3); }
.field__label { font-size: var(--t-sm); font-weight: 500; line-height: 1.4; color: var(--ink); }
.field__label small, .field__optional { font-weight: 400; color: var(--ink-soft); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-raise);
  color: var(--ink);
  font: inherit;
  font-size: max(16px, var(--t-0));
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input[type="file"] { font-size: max(16px, var(--t-sm)); padding: 8px 0; }
.field__help { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }
.field__error { display: none; font-size: 0.875rem; line-height: 1.5; color: var(--error); font-weight: 500; }
.field.is-error input, .field.is-error textarea, .field.is-error select {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
.field.is-error .field__error { display: block; }
.field.is-error .field__label { color: var(--error); }

.choice { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; }
.choice input[type="checkbox"], .choice input[type="radio"] {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--accent);
}
.choice__text { font-size: var(--t-0); line-height: 1.4; }
.choice__help { display: block; font-size: 0.875rem; color: var(--ink-soft); }
.choices { display: grid; gap: 0; }
.form-status { font-size: var(--t-sm); color: var(--ink-soft); }
.form-status.is-error { color: var(--error); }

/* lists without bullets, ruled rows (CV, admin lists) */
.list-plain { list-style: none; margin: 0; padding: 0; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows > li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }

/* aliases so the page stubs (src/views/pages/_shared.ts and friends) sit on the system until they adopt
   ui.ts components: ul.grid, .figure, .figure__placeholder, .label__credit, .btn--danger, .radio, .checkbox,
   .hp (honeypot), .form-error */
ul.grid, ol.grid { list-style: none; margin: 0; padding: 0; }
.grid__item { margin: 0; }
.figure { margin: 0; }
.figure img { display: block; width: 100%; height: auto; }
.figure a { display: block; }
.figure figcaption { margin-top: var(--s-2); color: var(--ink); }
.figure__placeholder {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px dashed var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-align: center;
  padding: var(--s-3);
}
.label__credit { margin-top: var(--s-1); color: var(--ink-soft); }
.btn--danger { background: transparent; border-color: var(--error); color: var(--error); }
.btn--danger:hover { background: transparent; border-color: var(--error); color: var(--error); text-decoration: underline; }
.radio, .checkbox { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; }
.radio input, .checkbox input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-error { font-size: var(--t-sm); font-weight: 500; color: var(--error); }


/* the 404 page (was p-pages.css 159-161) */
.notfound { min-height: 40vh; }
.notfound__line { margin-top: var(--s-3); }
.notfound__links { margin-top: var(--s-4); font-size: var(--t-1); font-family: var(--font-display); }

/* the 500 page (src/index.ts app.onError) */
.error { padding-block: var(--section); min-height: 40vh; }

/* ---- header-sheet.css ---- */
/* site-kit section: header-sheet. Ported 2026-10-21 from tattoocityink.co.uk
   (F:\Claude\AI Operating System\projects\Tatoo City Ink\site-v3\public\css\site.css: .btn 90-98,
   header 119-135, phone bar 273-287, every-width header 691-703, menu-open 705-710, the sheet
   712-793, scrolled state 800-806). Literal greys -> tokens: --paper -> --fg, --muted/--paper-2 ->
   --fg-soft, rgba(255,255,255,.14) -> --rule, .28 -> --line, --pale/--dark-text -> --accent/--accent-fg,
   the sheet ground #0b0b0b -> --bg so it reads on light paper. Fonts: --brand -> --font-brand
   (TCI theme only; others fall back to --font-display), --display -> --font-display, --body -> --font-body.
   Default: nav + CTA in the bar from 900px, burger + full-screen sheet under 900px.
   .kit-header--sheet-always = the shipped TCI variant (burger and sheet at every width, 2026-10-05). */

.kit-header {
  /* private geometry (TCI micro-values that have no token) */
  --kit-header-h: 52px;              /* phone bar height */
  --kit-header-h-desk: 104px;        /* desktop bar min-height */
  --kit-header-gap: 12px;
  --kit-header-gap-desk: 20px;
  --kit-header-bar-w: 22px;          /* burger bar width (phone) */
  --kit-header-ease: var(--ease);
}

/* ---------- the one button (TCI .btn / .btn--pale, scoped; base.css .btn stays untouched) ---------- */
.kit-header .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 0 26px; border: 0; border-radius: 0; cursor: pointer;
  font: 600 17px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: background-color .25s var(--kit-header-ease), color .25s var(--kit-header-ease), transform .25s var(--kit-header-ease);
}
.kit-header .btn--pale { background: var(--accent); color: var(--accent-fg); }
.kit-header .btn--pale:hover { background: var(--fg); color: var(--bg); }
.kit-header .btn--pale:active { transform: translateY(1px); }

/* ---------- the bar ---------- */
.kit-header.top {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px;
  padding: 18px var(--pad);
  /* transparent over a hero, solid once the page moves (section.js adds .is-solid); solid without JS */
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
  transition: background-color .4s var(--kit-header-ease), border-color .4s var(--kit-header-ease);
}
.kit-header.top.is-solid, html:not(.js) .kit-header.top {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kit-header .brand { display: grid; align-content: center; gap: 8px; min-height: 44px; min-width: 0; text-decoration: none; margin-right: auto; }
.kit-header .brand__name { font: 600 30px/1 var(--font-display); letter-spacing: .34em; text-transform: uppercase; color: var(--fg); }
.kit-header .brand__sub { font: 500 12px/1 var(--font-body); letter-spacing: .42em; text-transform: uppercase; color: var(--fg-soft); }
.kit-header .nav ul { display: flex; gap: clamp(20px, 3vw, 52px); margin: 0; padding: 0; list-style: none; }
.kit-header .nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--fg-soft); position: relative; }
.kit-header .nav a::after { content: ""; position: absolute; left: 0; right: .26em; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--kit-header-ease); }
.kit-header .nav a:hover, .kit-header .nav a[aria-current="page"] { color: var(--fg); }
.kit-header .nav a:hover::after, .kit-header .nav a[aria-current="page"]::after { transform: scaleX(1); }
.kit-header .top__cta { min-height: 56px; padding: 0 34px; }
.kit-header .menu-btn { display: none; }
.kit-header .menu-sheet { display: none; }
.kit-header .brand, .kit-header .menu-btn, .kit-header .top__cta { position: relative; z-index: 2; }
.kit-header .menu-btn__open, .kit-header .menu-btn__close { display: none; }
.kit-header .menu-btn[aria-expanded="false"] .menu-btn__open, .kit-header .menu-btn[aria-expanded="true"] .menu-btn__close { display: block; }

@media (min-width: 900px) {
  .kit-header.top { min-height: var(--kit-header-h-desk); gap: var(--kit-header-gap-desk); }
  .kit-header .nav { margin-right: 28px; }   /* air between the last nav item and the CTA's divider (the nav never showed on TCI's desktop) */
  .kit-header .top__cta { position: relative; margin-left: 12px; }
  .kit-header .top__cta::before { content: ""; position: absolute; left: -32px; top: -23px; bottom: -23px; width: 1px; background: var(--rule); }
}

/* bar under 900px: 52px, brand shrinks, burger on the right; the CTA stays in the bar from 600px (TCI hides it under 900,
   site.css 279; the kit keeps it on tablets). Under 600px the sheet's CTA is the CTA — add .kit-header--cta-phone to keep
   a compact one in the bar (only when the brand name is short enough to share 390px with it). */
@media (max-width: 899px) {
  .kit-header.top { height: var(--kit-header-h); min-height: var(--kit-header-h); gap: var(--kit-header-gap); padding: 0 var(--space-1) 0 var(--space-2); }
  .kit-header .brand { gap: 4px; }
  .kit-header .brand__name { font-size: clamp(14px, 4.4vw, 17px); letter-spacing: .3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit-header .brand__sub { font-size: 11px; letter-spacing: .22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit-header .nav { display: none; }
  .kit-header .top__cta { min-height: 44px; padding: 0 14px; font-size: 13px; letter-spacing: .14em; }
  .kit-header .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: none; border: 0; cursor: pointer; color: var(--fg); }
  .kit-header .menu-btn__bars, .kit-header .menu-btn__bars::before, .kit-header .menu-btn__bars::after { display: block; width: var(--kit-header-bar-w); height: 1.5px; background: var(--fg); transition: transform .25s var(--kit-header-ease), opacity .2s; }
  .kit-header .menu-btn__bars { position: relative; }
  .kit-header .menu-btn__bars::before, .kit-header .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .kit-header .menu-btn__bars::before { top: -7px; } .kit-header .menu-btn__bars::after { top: 7px; }
  .kit-header .menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
  .kit-header .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(7px) rotate(45deg); }
  .kit-header .menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 599px) { .kit-header .top__cta { display: none; } }
@media (min-width: 360px) and (max-width: 599px) { .kit-header--cta-phone .top__cta { display: inline-flex; padding: 0 12px; font-size: 12px; letter-spacing: .1em; } }

/* ---------- the shipped TCI variant: burger and sheet at every width (site.css 691-703) ---------- */
.kit-header--sheet-always .nav { display: none; }
@media (min-width: 900px) {
  .kit-header--sheet-always.top { gap: var(--kit-header-gap-desk); }
  .kit-header--sheet-always .menu-btn { display: grid; place-items: center; width: 56px; height: 56px; background: none; border: 1px solid var(--line); cursor: pointer; margin-right: 0; color: var(--fg); transition: background .25s var(--kit-header-ease), border-color .25s; }
  .kit-header--sheet-always .menu-btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: var(--fg-soft); }
  .kit-header--sheet-always .menu-btn__bars, .kit-header--sheet-always .menu-btn__bars::before, .kit-header--sheet-always .menu-btn__bars::after { display: block; width: 26px; height: 2px; background: var(--fg); transition: transform .25s var(--kit-header-ease), opacity .2s; }
  .kit-header--sheet-always .menu-btn__bars { position: relative; }
  .kit-header--sheet-always .menu-btn__bars::before, .kit-header--sheet-always .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .kit-header--sheet-always .menu-btn__bars::before { top: -8px; } .kit-header--sheet-always .menu-btn__bars::after { top: 8px; }
  .kit-header--sheet-always .menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
  .kit-header--sheet-always .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(8px) rotate(45deg); }
  .kit-header--sheet-always .menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- menu open: the page stops scrolling, the bar goes clear over the sheet ---------- */
html.menu-open { overflow: hidden; }
html.menu-open .kit-header.top { z-index: 60; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
html.menu-open .kit-header .top__cta::before { visibility: hidden; }

/* ---------- the sheet: full-screen overlay, list top-aligned (TCI rev e) ----------
   geometry vars: --mh header height, --gap header-to-first-row, --lbl label size, --lh label line-height,
   --pv row padding, --nfs numeral size, --padl/--padr side gutters */
/* --lbl: TCI ships clamp(48px, 14.4vw, 60px) for Antonio (ultra-condensed); the kit's default is smaller so an 11-letter
   label ("Exhibitions") fits one line at 360px in Inter Tight, Cormorant and Playfair too. Override --lbl on the sheet for
   a condensed face. overflow-wrap: anywhere on .mi-t is the last resort, never the plan. */
.kit-header .menu-sheet { --mh: var(--kit-header-h); --gap: 40px; --lbl: clamp(38px, 10.5vw, 60px); --lh: 1; --pv: 10px; --nfs: 14.5px;
  --padl: var(--space-2); --padr: var(--space-2);
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--fg);
  padding: calc(var(--mh) + var(--gap)) var(--padr) calc(28px + env(safe-area-inset-bottom, 0px)) var(--padl);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--kit-header-ease), visibility 0s .28s; }
.kit-header .menu-sheet[hidden] { display: none; }
.kit-header .menu-sheet.is-open { opacity: 1; visibility: visible; transition: opacity .28s var(--kit-header-ease); }
/* without JavaScript the burger is a link to #menu-sheet and the sheet shows on :target; the Close link leads back to #top */
.kit-header .menu-sheet:target { display: flex !important; opacity: 1; visibility: visible; }
/* a backdrop-filter makes the bar the containing block of the fixed sheet (TCI drops it under html.menu-open); without JS drop it on :target */
html:not(.js) .kit-header.top:has(.menu-sheet:target) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.kit-header .menu-sheet__close { display: none; }
html:not(.js) .kit-header .menu-sheet:target .menu-sheet__close { display: inline-flex; align-items: center; align-self: flex-end; min-height: 44px; margin: -36px 0 0; padding: 0 4px; font: 500 14px/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
html:not(.js) .kit-header .menu-sheet:target > ul > li, html:not(.js) .kit-header .menu-sheet:target .menu-sheet__cta, html:not(.js) .kit-header .menu-sheet:target .menu-sheet__foot { opacity: 1; transform: none; }
/* the 4% numeral: upper-right field, top at the first row, right edge at the gutter; its height is capped so it ends well above the footer */
.kit-header .menu-sheet__num { position: relative; flex: none; height: 0; margin-top: auto; text-align: right; white-space: nowrap; top: -.135em; z-index: 0; font: 700 min(70vw, 400px)/1 var(--font-brand, var(--font-display)); letter-spacing: -.02em; color: color-mix(in srgb, var(--fg) 4%, transparent); pointer-events: none; user-select: none; }
.kit-header .menu-sheet > :not(.menu-sheet__num) { position: relative; z-index: 1; }
.kit-header .menu-sheet > ul { margin: 0; padding: 0; list-style: none; flex: none; }
.kit-header .menu-sheet > ul > li { border-bottom: 1px solid var(--rule); transition: border-color .25s var(--kit-header-ease); }
.kit-header .menu-sheet > ul a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: var(--pv) 0; color: var(--fg); text-decoration: none; font: 700 var(--lbl)/var(--lh) var(--font-brand, var(--font-display)); letter-spacing: .04em; text-transform: uppercase; }
/* numeral: its cap-top sits at the label's cap-top (Antonio cap .87em / Barlow Cond. cap .71em) */
.kit-header .mi-n { font: 500 var(--nfs)/1 var(--font-display); letter-spacing: .1em; color: var(--fg-soft);
  margin-top: calc(((var(--lh) - 1.29) / 2 + .28 + .17) * var(--lbl) - .19 * var(--nfs)); }
.kit-header .mi-t { display: block; overflow-wrap: anywhere; }
.kit-header .mi-i { display: none; }
.kit-header .menu-sheet a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* scripted focus from a tap or click carries data-noring (base.js): no ring; keyboard focus keeps the ring above */
.kit-header [data-noring], .kit-header .menu-sheet a[data-noring] { outline: 0; }
.kit-header .menu-sheet__cta { display: flex; width: 100%; margin-top: var(--space-3); min-height: 58px; justify-content: center; gap: 16px; padding: 0 var(--space-3); }
.kit-header .menu-sheet__cta::after { content: "\2192"; font: 400 24px/1 var(--font-body); letter-spacing: 0; }
.kit-header .menu-sheet__foot { margin: var(--space-4) 0 auto; display: grid; gap: var(--space-3); }
.kit-header .menu-sheet__label { font: 500 14px/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 4px; }
.kit-header .menu-sheet__social { display: flex; flex-wrap: nowrap; gap: 0 clamp(10px, 4.2vw, 24px); margin: 0; padding: 0; list-style: none; }
.kit-header .menu-sheet__social li { flex: none; }
.kit-header .menu-sheet__social a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; white-space: nowrap; color: var(--fg-soft); text-decoration: none; font: 400 15px/1 var(--font-body); letter-spacing: .03em; }
.kit-header .menu-sheet__social a:hover { color: var(--fg); }
.kit-header .menu-sheet__social span { display: inline-flex; }
.kit-header .menu-sheet__social svg { width: 20px; height: 20px; flex: none; stroke-width: 1.5; }
.kit-header .menu-sheet__meta { color: var(--fg-soft); font: 400 14px/1.6 var(--font-body); letter-spacing: .04em; }
.kit-header .menu-sheet__meta:empty { display: none; }
/* motion: overlay fades, items rise 10px with a 40ms stagger; closing reverses (shorter, no wait) */
.kit-header .menu-sheet > ul > li, .kit-header .menu-sheet__cta, .kit-header .menu-sheet__foot { opacity: 0; transform: translateY(10px); transition: opacity .2s var(--kit-header-ease), transform .2s var(--kit-header-ease), border-color .25s var(--kit-header-ease); }
.kit-header .menu-sheet.is-open > ul > li, .kit-header .menu-sheet.is-open .menu-sheet__cta, .kit-header .menu-sheet.is-open .menu-sheet__foot { opacity: 1; transform: none; transition: opacity .34s var(--kit-header-ease), transform .34s var(--kit-header-ease), border-color .25s var(--kit-header-ease); }
.kit-header .menu-sheet.is-open > ul > li:nth-child(1) { transition-delay: .06s; } .kit-header .menu-sheet.is-open > ul > li:nth-child(2) { transition-delay: .1s; }
.kit-header .menu-sheet.is-open > ul > li:nth-child(3) { transition-delay: .14s; } .kit-header .menu-sheet.is-open > ul > li:nth-child(4) { transition-delay: .18s; }
.kit-header .menu-sheet.is-open > ul > li:nth-child(5) { transition-delay: .22s; }
.kit-header .menu-sheet.is-open .menu-sheet__cta { transition-delay: .26s; } .kit-header .menu-sheet.is-open .menu-sheet__foot { transition-delay: .3s; }
@media (max-width: 380px) {
  .kit-header .menu-sheet__social { gap: 0 10px; }
  .kit-header .menu-sheet__social a { gap: 5px; font-size: 14px; letter-spacing: .01em; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .kit-header .menu-sheet { --pv: 8px; }
  .kit-header .menu-sheet__cta { min-height: 56px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .kit-header .menu-sheet { --lbl: clamp(64px, 11vw, 96px); --pv: 14px; --nfs: 15px; }
  .kit-header .menu-sheet > ul a { grid-template-columns: 64px minmax(0, 1fr); }
  .kit-header .menu-sheet__num { font-size: min(50vw, 420px); }
}
/* desktop sheet geometry (TCI 760-784): only reachable with .kit-header--sheet-always, where the burger shows at every width */
@media (min-width: 900px) {
  .kit-header .menu-sheet { --mh: var(--kit-header-h-desk); --gap: 64px; --lbl: clamp(80px, min(7.8vw, 12.6svh), 136px); --lh: .95; --pv: 14px; --nfs: 17px;
    --padl: var(--pad); --padr: var(--pad); padding-bottom: 28px; }
  .kit-header .menu-sheet__num { position: absolute; height: auto; margin-top: 0; text-align: left; right: var(--padr); top: calc(var(--mh) + var(--gap) - .135em); }
  .kit-header .menu-sheet > ul a { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; letter-spacing: .03em; }
  .kit-header .mi-n { letter-spacing: .1em; }
  .kit-header .mi-n, .kit-header .mi-t { transition: transform .3s var(--kit-header-ease), color .25s; }
  .kit-header .mi-i { display: flex; align-items: center; align-self: center; gap: 48px; padding-right: 0; color: var(--fg); opacity: 0; transform: translateX(-10px); transition: opacity .25s var(--kit-header-ease), transform .3s var(--kit-header-ease); }
  .kit-header .mi-i svg { width: 28px; height: 28px; stroke-width: 1.5; }
  .kit-header .menu-sheet > ul a:focus-visible .mi-n, .kit-header .menu-sheet > ul a:focus-visible .mi-t { transform: translateX(14px); }
  .kit-header .menu-sheet > ul a:focus-visible .mi-i { opacity: 1; transform: none; }
  .kit-header .menu-sheet > ul > li:has(a:focus-visible) { border-bottom-color: var(--line); }
  /* ...and a tap must not leave the focused link slid 14px with the arrow showing */
  .kit-header .menu-sheet > ul a[data-noring]:focus-visible .mi-n, .kit-header .menu-sheet > ul a[data-noring]:focus-visible .mi-t { transform: none; }
  .kit-header .menu-sheet > ul a[data-noring]:focus-visible .mi-i { opacity: 0; transform: translateX(-10px); }
  .kit-header .menu-sheet > ul > li:has(a[data-noring]) { border-bottom-color: var(--rule); }
  .kit-header .menu-sheet__cta { display: none; }
  .kit-header .menu-sheet__foot { grid-template-columns: 1fr auto; align-items: end; gap: var(--space-3); margin: auto 0 0; padding-top: var(--space-4); }
  .kit-header .menu-sheet__meta { text-align: right; font-size: 15px; }
  .kit-header .menu-sheet__num { font-size: min(34vw, calc((100svh - var(--mh) - var(--gap) - 150px) / .87), 640px); }
}
@media (min-width: 900px) and (max-height: 760px) {
  .kit-header .menu-sheet { --gap: 56px; --pv: 8px; }
  .kit-header .menu-sheet__foot { padding-top: 20px; }
}
@media (min-width: 900px) and (hover: hover) {
  .kit-header .menu-sheet > ul a:hover .mi-n, .kit-header .menu-sheet > ul a:hover .mi-t { transform: translateX(14px); }
  .kit-header .menu-sheet > ul a:hover .mi-i { opacity: 1; transform: none; }
  .kit-header .menu-sheet > ul > li:has(a:hover) { border-bottom-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-header .menu-sheet > ul > li, .kit-header .menu-sheet__cta, .kit-header .menu-sheet__foot { transform: none; transition: none; transition-delay: 0s; }
  .kit-header .menu-sheet, .kit-header .menu-sheet.is-open { transition: opacity .1s linear; }
  .kit-header .menu-sheet.is-open > ul > li, .kit-header .menu-sheet.is-open .menu-sheet__cta, .kit-header .menu-sheet.is-open .menu-sheet__foot { transition: none; transition-delay: 0s; }
  .kit-header .mi-n, .kit-header .mi-t, .kit-header .mi-i, .kit-header .menu-btn, .kit-header .menu-btn__bars, .kit-header .menu-btn__bars::before, .kit-header .menu-btn__bars::after, .kit-header.top { transition: none; }
}

/* ---- footer.css ---- */
/* site-kit section: footer. The one new design in v1 (SPEC.md section 7).
   Base: Tattoo City Ink site-v3 public/css/site.css 621-636 (.foot, .foot__brand, .foot__name 18.3cqw,
   .foot__by, .foot__col, .foot__h, .foot__addr, .foot__links, .foot__copy), generalised: colours and
   fonts through tokens, the phone layout redesigned as a 2-column grid (Sebastian, 2026-10-21: "on small
   screens everything is in one column, huge, with empty space on the right"). Private variables only
   as --kit-foot-*. */
.foot {
  --kit-foot-gap: var(--space-5);
  /* the wordmark band: fraction of the brand row's width. 18.3cqw is TCI's value for "Tattoo City Ink"
     in Antonio (15 condensed characters); a normal-width face fits ~13 characters at the default. */
  --kit-foot-name-size: 12cqw;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--step--1);
  line-height: 1.5;
  padding-block: var(--space-4) var(--space-3);   /* council r1: 32 / 24 on phones */
}
.foot__inner { display: grid; gap: var(--space-2); }   /* 16px: divider-to-links and links-to-divider (council r1) */

/* brand row: full width, hairline below */
.foot__brand {
  container-type: inline-size;
  padding-bottom: calc(var(--space-1) * 2.5);   /* 20px tagline-to-divider (council r1) */
  border-bottom: 1px solid var(--rule);
}
.foot__name {
  font-family: var(--font-brand, var(--font-display));
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.foot[data-brand-band="on"] .foot__name {
  font-size: min(var(--kit-foot-name-size), 15vw, 96px);
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: -0.03em;
}
.foot__by { margin-top: var(--space-1); color: var(--fg-soft); }   /* 8px name-to-line on phones (council r1) */

/* link groups: phones = 2 columns, column gap 24px (the brief's floor is 20) */
.foot__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--space-1) * 2.5) var(--space-3);   /* 20px rows, 24px columns */
  align-items: start;
}
.foot__col { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }   /* 8px between the label and the first tap row */
.foot__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;   /* 13px */
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
}   /* council r1 (argon 2, astra agreed): no hairline under the label; only the two full-width rules remain */
.foot__addr { font-style: normal; line-height: 1.6; padding-block: 4px; overflow-wrap: anywhere; }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.foot__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;   /* council r1: clear of descenders */
  overflow-wrap: anywhere;
}
.foot__links a:hover, .foot__links a:focus-visible { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.foot__links a:visited { color: var(--fg); }

/* an odd last group on phones spans both columns and lays its links in two columns, so the right half is never empty.
   Put the group with the longest string (an email, an address) LAST so it gets the full row (council r1, both members). */
@media (max-width: 599px) {
  .foot__col:nth-child(odd):last-child { grid-column: 1 / -1; }
  .foot__col:nth-child(odd):last-child .foot__links:has(> li:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }   /* a single long link (an email) keeps the whole row */
}

/* legal line: full width, hairline above */
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   /* credit anchors the right edge, wraps when it must (council r1) */
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding-top: calc(var(--space-1) * 1.5);   /* 12px */
  border-top: 1px solid var(--rule);
  color: var(--fg-soft);
}
.foot__copy, .foot__site-by { font-size: var(--step--1); }
/* the 44px tap height comes from padding balanced by a negative margin, so the row stays one line tall (council r1, argon 5) */
.foot__site-by a { color: var(--fg-soft); text-decoration-color: var(--accent-line); text-underline-offset: 0.28em; display: inline-block; padding-block: 11px; margin-block: -11px; }
.foot__site-by a:hover, .foot__site-by a:focus-visible { color: var(--fg); text-decoration-color: var(--accent); }
.foot[data-site-by="off"] .foot__site-by { display: none; }

/* tablet: 3 columns */
@media (min-width: 600px) {
  .foot { padding-block: var(--space-7) var(--space-6); }
  .foot__inner { gap: var(--kit-foot-gap); }
  .foot__brand { padding-bottom: var(--space-4); }
  .foot__by { margin-top: var(--space-2); }
  .foot__legal { padding-top: var(--space-3); }
  .foot__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .foot__groups:has(> .foot__col:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__groups:has(> .foot__col:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* desktop: band on = the wordmark across the row then the groups; band off = brand column + the groups as equal columns */
@media (min-width: 1024px) {
  .foot[data-brand-band="on"] .foot__name { font-size: min(var(--kit-foot-name-size), 15vw); }   /* the band proper; the 96px cap is for phones and tablets */
  .foot__links a { font-size: var(--step-0); }
  .foot__addr { font-size: var(--step-0); }
  .foot[data-brand-band="off"] .foot__inner { grid-template-columns: repeat(var(--kit-foot-cols, 4), minmax(0, 1fr)); column-gap: var(--space-5); }
  .foot[data-brand-band="off"] .foot__brand { border-bottom: 0; padding-bottom: 0; }
  .foot[data-brand-band="off"] .foot__groups { display: contents; }
  .foot[data-brand-band="off"] .foot__legal { grid-column: 1 / -1; }
}