/* ---- tokens.css ---- */

/* ==========================================================================
   Design tokens — single source of truth.
   Every color, font, spacing, and breakpoint value used anywhere in the
   site should trace back to a variable defined here. Do not hardcode a
   color/size in a component file if a token for it already exists.
   ========================================================================== */

:root {
  /* ---- Color (brief §4) ---------------------------------------------- */
  --paper:            #f7f8f9;
  --ink:               #20282b;

  --sienna:            #b24e1d;
  --sienna-hover:      #a0461a;
  --sienna-active:     #984219;
  --amber:             #eb8b3b;
  --mist:              #9bc6cc;
  --mist-border:       #4f929b;

  --error:             #a32d2d;
  --error-on-dark:     #f09595;
  --success:           #2f6b3a;
  --success-on-dark:   #8fc79f;

  /* Disabled button state (Ink at 35% opacity, per §7 Buttons) */
  --ink-disabled:      color-mix(in srgb, var(--ink) 35%, transparent);

  /* ---- Type families --------------------------------------------------- */
  --font-sans:  "Public Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;

  /* ---- Fluid type scale (brief §5, clamp mobile 375px -> desktop 1440px)
     Values below are Home/most-pages defaults; every role also has an
     explicit desktop/mobile pair on the scale table in the brief. */
  --text-h1:      clamp(2.125rem, 1.641rem + 2.066vw, 3.5rem);    /* 34 -> 56 */
  --text-h2:      clamp(1.625rem, 1.405rem + 0.939vw, 2.25rem);   /* 26 -> 36 */
  --text-h3:      clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem);  /* 22 -> 26 */
  --text-subhead: clamp(1.125rem, 1.103rem + 0.094vw, 1.1875rem); /* 18 -> 19 */
  --text-body:    1.0625rem;                                      /* 17, fixed */
  --text-quote:   clamp(1.25rem, 1.184rem + 0.282vw, 1.4375rem);  /* 20 -> 23 */
  --text-nav:     clamp(1rem, 1.169rem - 0.188vw, 1.125rem);      /* 18 -> 16 (mobile larger) */
  --text-button:  clamp(0.9375rem, 1.022rem - 0.094vw, 1rem);     /* 16 -> 15 (mobile larger) */
  --text-detail:  0.875rem;                                       /* 14, fixed */
  --text-micro:   0.75rem;                                        /* 12, fixed */

  /* Line heights + tracking (brief §5 scale table) */
  --lh-h1: 1.05;   --tr-h1: 0.02em;
  --lh-h2: 1.15;   --tr-h2: 0.02em;
  --lh-h3: 1.2;    --tr-h3: 0.02em;
  --lh-subhead: 1.45;
  --lh-body: 1.6;
  --lh-quote: 1.5;
  --lh-nav: 1.2;
  --lh-button: 1;  --tr-button: 0.07em;
  --lh-detail: 1.4;
  --lh-micro: 1.4; --tr-micro: 0.01em;

  /* ---- Spacing scale, 8px base ------------------------------------------ */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* ---- Layout ------------------------------------------------------------
     Breakpoints (mirrored as raw px in media queries, since custom
     properties cannot be interpolated into @media conditions):
       mobile  320–639px  (design baseline 375px)
       tablet  640–1023px
       desktop 1024px+
       wide    1440px+ (container capped) */
  --container-max: 1200px;
  --measure: 680px;
  --measure-quote: 50ch;

  --gutter: 20px;         /* mobile */
  --section-pad: 64px;    /* mobile */

  --radius: 2px;           /* §7 Buttons: 2px or 0, applied consistently */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --border-hairline: var(--mist-border); /* on Paper */
  --transition-fast: 200ms ease;
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --section-pad: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section-pad: 128px;
  }
}

/* prefers-reduced-motion is consumed directly by components (header.css,
   accordion, etc.) rather than a token, since it disables transitions
   rather than swapping a value. */


/* ---- fonts.css ---- */

/* ==========================================================================
   Self-hosted variable fonts (brief §5 "Font loading").
   Files pulled from Google Fonts' CSS2 API (SIL OFL, redistributable),
   Latin subset only, one variable WOFF2 per family/style with the weight
   axis intact (no static per-weight instances). See ../../PLACEHOLDERS.md
   for the size-adjust calibration note.
   ========================================================================== */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/PublicSans-Variable.woff2") format("woff2-variations");
  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: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/SourceSerif4-Variable.woff2") format("woff2-variations");
  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;
  /* Calibrated by eye against Georgia per brief §5 — no font-metrics tool
     available in this environment. Re-check during the QA pass and adjust
     if serif body copy visibly over/undersizes relative to the Georgia
     fallback while a font is still loading. */
  size-adjust: 106%;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/SourceSerif4-Italic-Variable.woff2") format("woff2-variations");
  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;
  size-adjust: 106%;
}


/* ---- reset.css ---- */

/* ==========================================================================
   Minimal modern reset.
   ========================================================================== */

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

* { margin: 0; }

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

body { min-height: 100vh; }

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

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

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

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

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

table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- base.css ---- */

/* ==========================================================================
   Base element styles + typographic roles (brief §5).
   "Serif for anything read, sans for anything used": body copy and quotes
   are Source Serif 4; headings, nav, buttons, and UI/detail text are
   Public Sans.
   ========================================================================== */

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Headings: Public Sans Medium, upper case, +2% tracking */
h1, h2, h3,
.h1, .h2, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink);
}
h1, .h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }

/* Subhead: Source Serif 4 SemiBold Italic, sentence case — always a real
   paragraph carrying the .subhead class, never a styled heading. Italic
   is reserved for this role only. */
.subhead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  text-transform: none;
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
  color: var(--ink);
}

p, .body-text {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

/* Nav, buttons, and UI/detail text are Public Sans regardless of context;
   anything under 14px is always Public Sans per the brief. */
nav, .nav-text {
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  line-height: var(--lh-nav);
}

.detail, .field-label, .table-header, .caption, .date, .price-label,
.pagination-link, .footer-utility, .quote-attribution {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  line-height: var(--lh-detail);
}

.micro {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--tr-micro);
}

/* Links on Paper: Sienna, always underlined, never below 14px. */
a {
  color: var(--sienna);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--sienna-hover); }
a:active { color: var(--sienna-active); }

/* On an Ink surface: Mist, underlined. */
.on-ink a, [data-surface="ink"] a {
  color: var(--mist);
}
.on-ink a:hover, [data-surface="ink"] a:hover { color: var(--paper); }

/* Focus states (brief §7 "Focus states") — never Amber. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink);
  outline-offset: var(--focus-ring-offset);
}
.on-ink :focus-visible, [data-surface="ink"] :focus-visible {
  outline-color: var(--paper);
}

/* Skip link — visible on focus only. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus {
  top: var(--space-2);
}

/* Selectable, mailto-linked email text uses body-role styling even inside
   Public Sans contexts (footer) so it always reads as an address, not UI. */
.mail-link {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
}


/* ---- layout.css ---- */

/* ==========================================================================
   Layout primitives: container, section rhythm, grids. Mobile-first.
   Breakpoints: tablet 640px, desktop 1024px, wide 1440px (brief §6).
   ========================================================================== */

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

.measure {
  max-width: var(--measure);
}

section, .section {
  padding-block: var(--section-pad);
}

.section-ink {
  background: var(--ink);
  color: var(--paper);
}
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--paper); }
.section-ink p { color: var(--mist); }

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

/* Generic responsive grid used by "Our services", "Who we work with" etc. */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-2up { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3up { grid-template-columns: repeat(3, 1fr); }
  .grid-4up { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .grid-4up { grid-template-columns: repeat(4, 1fr); }
}

/* Card grid: Selected work / Work index. 1 col mobile, 2 tablet, 3 desktop. */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Two-column split (photo + copy). Stacks on mobile, photo above copy. */
.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-reverse { grid-template-columns: 1fr 1fr; }
  .split.split-reverse > :first-child { order: 2; }
}

/* Ordered process list (Our approach): vertical mobile, horizontal desktop. */
.process-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  counter-reset: process;
}
@media (min-width: 1024px) {
  .process-list { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
}

/* Footer three-column layout: stacked mobile (Stay in touch, Navigation,
   The studio order per brief §3), three columns desktop. */
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.1fr 0.8fr 1.1fr;
    gap: var(--space-4);
  }
}

/* Table scroll wrapper: never let the page itself scroll horizontally. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll { overflow: hidden; }


/* ---- components.css ---- */

/* ==========================================================================
   Shared components. See src/style-guide.html for every state rendered
   in isolation.
   ========================================================================== */

/* ---- Buttons (brief §7) ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-button);
  line-height: var(--lh-button);
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.btn-primary {
  background: var(--sienna);
  color: var(--paper);
}
.btn-primary:hover { background: var(--sienna-hover); color: var(--paper); }
.btn-primary:active { background: var(--sienna-active); color: var(--paper); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: transparent;
  color: var(--ink-disabled);
  border-color: var(--ink-disabled);
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover, .btn-secondary:active {
  background: var(--ink);
  color: var(--paper);
}

/* On a Sienna surface: Paper-outlined only — Amber/Sienna never touch. */
.btn-on-sienna {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.btn-on-sienna:hover, .btn-on-sienna:active {
  background: var(--paper);
  color: var(--sienna);
}

/* ---- Header (brief §2) --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  height: 88px;
  display: flex;
  align-items: center;
  transition: height var(--transition-fast), border-color var(--transition-fast);
  border-bottom: 1px solid transparent;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header.is-shrunk {
  height: 64px;
  border-bottom-color: var(--mist-border);
}
@media (max-width: 1023px) {
  .site-header, .site-header.is-shrunk { height: 56px; }
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.header-logo {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--text-h3);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.primary-nav {
  display: none;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .primary-nav { display: flex; }
}
.primary-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  text-decoration: none;
  color: var(--ink);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--sienna); }
.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--sienna);
  font-weight: 500;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}
.menu-toggle svg { width: 24px; height: 24px; }

/* Mobile full-screen overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--gutter);
}
.nav-overlay[hidden] { display: none; }

.nav-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.nav-overlay-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-overlay nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav-overlay nav a {
  font-family: var(--font-sans);
  font-size: 18px;
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--space-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-overlay nav a[aria-current="page"] {
  color: var(--sienna);
  font-weight: 500;
}
.nav-overlay .btn { margin-top: var(--space-3); align-self: flex-start; }

/* ---- Field tag / pill ----------------------------------------------------- */
.field-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  text-transform: none;
  color: var(--ink);
}

/* ---- Card (Selected work / Work index) ------------------------------------ */
.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.work-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);
}
.work-card-tag { margin-top: var(--space-2); } /* color: Mist is structure-only (brief §4 rule 5) — inherits Ink body text color */
.work-card-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-subhead);
  text-transform: none;
  margin-top: var(--space-1);
}
.work-card-type {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--ink);
  margin-top: 2px;
}
.work-card-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-detail);
}
/* Whole card is clickable via a stretched link, but the visible in-card
   link element remains a real, separately focusable/readable link too. */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
}
.work-card-link { position: relative; z-index: 1; }

/* ---- Quote component (brief §7) -------------------------------------------- */
.quote {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: var(--space-3);
  max-width: var(--measure-quote);
}
.quote-rule { background: var(--sienna); }
.on-ink .quote-rule, [data-surface="ink"] .quote-rule { background: var(--mist); }
.quote-text {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--text-quote);
  line-height: var(--lh-quote);
  text-align: left;
}
.quote-attribution {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink);
}
.quote-attribution .name { font-weight: 500; }
.on-ink .quote-attribution, [data-surface="ink"] .quote-attribution { color: var(--paper); }

/* ---- Accordion (brief §7) --------------------------------------------------- */
.accordion-item {
  border-bottom: 1px solid var(--mist-border);
}
.accordion-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-block: var(--space-1);
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-detail);
  text-transform: uppercase;
  letter-spacing: var(--tr-button);
  color: var(--sienna);
}
.accordion-trigger:hover { color: var(--sienna-hover); }
.accordion-trigger .accordion-icon {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
}
.accordion-trigger .accordion-icon::before,
.accordion-trigger .accordion-icon::after {
  content: "";
  position: absolute;
  background: var(--sienna);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.accordion-trigger .accordion-icon::before { width: 14px; height: 2px; }
.accordion-trigger .accordion-icon::after { width: 2px; height: 14px; transition: transform var(--transition-fast); }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.accordion-visible {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-fast);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none; }
}
.accordion-panel[data-open="true"] {
  max-height: var(--panel-height, 1000px);
}
.accordion-panel-inner {
  padding-bottom: var(--space-3);
}
.accordion-panel-inner ul {
  display: grid;
  gap: var(--space-1);
  padding-left: 1.1em;
  list-style: disc;
  font-family: var(--font-serif);
  font-size: var(--text-body);
}

/* ---- Comparison table (brief §9.4) ------------------------------------------ */
.compare-table {
  min-width: 720px;
  border: 1px solid var(--mist-border);
}
.compare-table th, .compare-table td {
  border: 1px solid var(--mist-border);
  padding: var(--space-2) var(--space-2);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  text-transform: none;
  background: var(--paper);
}
.compare-table th[scope="row"] {
  font-family: var(--font-sans);
  font-weight: 500;
  background: var(--paper);
  position: sticky;
  left: 0;
}
.compare-table td {
  font-family: var(--font-serif);
  font-size: var(--text-body);
}
.table-scroll {
  border-radius: var(--radius);
}
.table-scroll:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink);
  outline-offset: -2px;
}

/* ---- Forms (brief §7) --------------------------------------------------------- */
.field {
  display: grid;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.field label {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  color: var(--ink);
}
.field .required-marker { color: var(--sienna); }
.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: var(--space-2);
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--mist-border);
  border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--ink);
  outline-offset: var(--focus-ring-offset);
}
.field-helper {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  color: var(--ink);
}
.field-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  color: var(--error);
}
.field[data-invalid="true"] .field-error { display: flex; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--error);
}
.field-error svg { flex: none; width: 16px; height: 16px; }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.checkbox-field input {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
}
/* The visual checkbox glyph stays small, but its label is the real tap
   target and is grown to the 44px minimum (brief §6 Mobile rules) — the
   label's `for` makes the whole row clickable, not just the 20px box. */
.checkbox-field label {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  display: flex;
  align-items: center;
  min-height: 44px;
}
.checkbox-field .field-error { margin-top: 6px; }
.checkbox-field[data-invalid="true"] .field-error { display: flex; }

.form-success {
  border: 1px solid var(--success);
  border-radius: var(--radius);
  padding: var(--space-3);
  color: var(--success);
  font-family: var(--font-sans);
}
.form-success::before { content: "✓ "; }

/* Honeypot field: present for bots, hidden from everyone else including
   assistive tech (brief §11.1 spam protection). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- CTA band ------------------------------------------------------------------- */
.cta-band {
  text-align: left;
}
.cta-band .measure { max-width: 52ch; }

/* ---- Boundary line (full-bleed single sentence) ---------------------------------- */
.boundary-line p {
  font-family: var(--font-serif);
  font-size: var(--text-subhead);
  max-width: var(--measure);
}

/* ---- Footer (brief §3) ------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-8);
}
.site-footer h2, .site-footer h3 { text-transform: uppercase; color: var(--paper); }
.footer-col-studio p { color: var(--mist); }
/* Mobile stacking order per brief §3: Stay in touch, Navigation, The
   studio, bottom bar. Desktop restores source order (studio, nav, signup
   = columns 1, 2, 3 left to right). */
.footer-col-signup { order: 1; }
.footer-col-nav { order: 2; }
.footer-col-studio { order: 3; }
@media (min-width: 1024px) {
  .footer-col-signup, .footer-col-nav, .footer-col-studio { order: initial; }
}
.footer-col-signup h2 {
  font-size: var(--text-h3);
  color: var(--amber);
}
.footer-col-signup p { color: var(--mist); }
.footer-nav-list {
  display: flex;
  flex-direction: column;
}
.footer-nav-list a {
  color: var(--mist);
  font-family: var(--font-sans);
  text-decoration: underline;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer-nav-list a:hover { color: var(--paper); }

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  margin-top: var(--space-3);
}
.signup-form .field { flex: 1 1 220px; margin-bottom: 0; }
.signup-form .field input {
  background: var(--paper);
}
.signup-consent {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--mist);
  margin-top: var(--space-2);
  max-width: 40ch;
}
.signup-consent a { color: var(--mist); }

.footer-email {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--paper);
  font-weight: 500;
}
.footer-social {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
}
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sienna);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
}
.footer-social a:hover { background: var(--sienna-hover); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--mist);
}
.footer-bottom a { color: var(--mist); }
.footer-legal-links { display: flex; gap: var(--space-3); }

/* ---- Package price (prominent Detail element, never Sienna text — the
   Paper/Sienna pairing is reserved for links only) ------------------------------------- */
.price {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-h3);
  color: var(--ink);
  text-transform: none;
  margin-block: var(--space-2);
}

/* ---- Package card ------------------------------------------------------------------- */
.package-card {
  border: 1px solid var(--mist-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.package-card .for {
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  color: var(--ink);
  margin-top: var(--space-1);
}
.package-card ul {
  display: grid;
  gap: var(--space-1);
  padding-left: 1.1em;
  list-style: disc;
  margin-top: var(--space-2);
}
.package-card .delivered {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--mist-border);
}
.package-card .module {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--mist-border);
}

/* ---- Empty state (Work/Blog index while no items) --------------------------------- */
.empty-state { max-width: var(--measure); }

/* ---- Calendar embed placeholder (brief §11.3) -------------------------------------- */
.calendar-embed {
  border: 1px solid var(--mist-border);
  border-radius: var(--radius);
  background: var(--paper);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
}
.calendar-embed iframe {
  width: 100%;
  min-height: 640px;
  border: 0;
}

/* ---- Founder photo placeholder ------------------------------------------------------ */
.photo-placeholder {
  background: color-mix(in srgb, var(--mist) 15%, var(--paper));
  border: 1px dashed var(--mist-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-detail);
  text-align: center;
  padding: var(--space-3);
}