/* ============================================================
   Calla Lilies IPR Legal Consultancy — design tokens + base
   Spec: docs/DESIGN.md §1

   Light, soft, low-contrast. Every colour and size below was measured off
   the reference (mullas.net) rather than estimated — see DESIGN.md §1.
   The previous build's near-black slabs were the single biggest reason it
   did not read like the reference; there is no dark surface here at all.
   ============================================================ */

:root {
  /* ---- Surfaces + ink, measured from the reference ---- */
  --paper:      #FFFFFF;   /* page */
  --shade:      #F3F5F8;   /* alternating section fill */
  --shade-deep: #E9E9E9;   /* footer */
  --ink:        #222222;   /* headings, list rows */
  --body:       #565872;   /* body copy — a soft blue-grey, not black */
  /* #8A8CA0 was the eyeballed value and measured 3.31:1 on white — it failed
     AA on 32 text runs. #5F6172 clears 4.5:1 on all three surfaces including
     the #E9E9E9 footer, and still reads clearly as secondary against --ink. */
  --muted:      #5F6172;   /* captions, meta, icons */
  --hair:       #DDE0E6;   /* hairline under list rows */
  --hair-soft:  #ECEEF2;
  /* Decorative index numerals only (01–09, chapter numbers). Below AA on
     purpose and always aria-hidden — never use for text that must be read. */
  --numeral:    #C4C8D1;

  /* ---- Type ---- */
  --f-display: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  /* EB Garamond replaced Fraunces on 2026-08-27. Fraunces is a display serif
     with its WONK axis on — flared A, angled E terminals — which read as
     quirky on a law firm's masthead. One brand serif now, roman and italic. */
  --f-serif:   'EB Garamond', 'Garamond Fallback', Georgia, serif;
  --f-accent:  'EB Garamond Italic', 'Garamond Fallback', Georgia, serif;

  /* Widened 2026-09-12 — the scale below measured flat: every section
     heading after the hero rendered at the same ~35.5px regardless of the
     section, against a 16px body, and six different text roles were crammed
     into an 11–17px band. --t-hero used to be dead: defined here but never
     referenced in index.html (the hero wordmark had its own hardcoded clamp
     in sections.css) — folded that hardcoded value in here instead, so the
     token and the real hero size are now the same thing. See DESIGN.md §1.2. */
  --t-hero:    clamp(2.75rem, 9.2vw, 7.5rem);
  --t-display: clamp(2.75rem, 3.6vw, 3.375rem);
  --t-row:     clamp(1.375rem, 2vw, 1.75rem);
  --t-lead:    clamp(1.125rem, 1.35vw, 1.25rem);
  --t-body:    1rem;
  --t-body-sm: 0.9375rem;
  --t-meta:    0.875rem;
  --t-eyebrow: 0.75rem;

  /* ---- Space ---- */
  /* Widened 2026-09-12 in the other direction from the note this replaces:
     1320px was chosen to avoid the 1170px reference's "narrow" read, but it
     overshot — the nav and footer sit flush against this container with no
     secondary padding, and 1320px measured out to a 41px margin per side at
     1366px, a genuinely thin edge on a mainstream laptop. 1200px roughly
     doubles that across the 768–1440px band and lands close to the
     reference's own historically-measured proportion. Phones are unaffected:
     the old 700px-and-below override already produced the same number the
     base formula now gives directly, so it's removed rather than kept as a
     no-op. */
  --container:  min(88vw, 1200px);
  /* The nav and footer bars run wider than the content: logo, Contact me
     button and footer text sit this far from the window edge. */
  --gutter:     clamp(20px, 3.2vw, 48px);
  --gap:        clamp(16px, 2vw, 30px);
  --section-y:  clamp(56px, 7vw, 95px);
  --nav-h:      78px;
}

@media (max-width: 900px) { :root { --nav-h: 62px; } }

/* ============================================================
   Self-hosted webfonts — three cuts, all subset and axis-limited
   locally. Provenance and licences: assets/fonts/.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo.woff2') format('woff2');
  font-weight: 300 700;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/garamond.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond Italic';
  src: url('../assets/fonts/garamond-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

/* Metric-matched fallbacks so the swap does not move the page. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 99.31%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Garamond Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 89.21%; ascent-override: 101%; descent-override: 30%; line-gap-override: 0%;
}

/* ============================================================
   Reset
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f-display);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.8;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible { outline-color: #FFFFFF; }

/* ============================================================
   Type scale — light weights throughout
   ============================================================ */

.t-hero {
  font-family: var(--f-serif);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.t-display {
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.t-row {
  font-size: var(--t-row);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
}

.t-lead { font-size: var(--t-lead); font-weight: 400; line-height: 1.7; }
.t-body { font-size: var(--t-body); }
.t-meta { font-size: var(--t-meta); line-height: 1.7; color: var(--muted); }

.t-eyebrow {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Surfaces — both light. There is no dark surface on this site.
   ============================================================ */

.se-paper { background: var(--paper); }
.se-shade { background: var(--shade); }

/* ============================================================
   Layout primitives
   ============================================================ */

.container { width: var(--container); margin-inline: auto; }
.section   { padding-block: var(--section-y); }

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

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

/* ============================================================
   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;
  }
}