/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/work/site/blade-route-about.html by _dev/generate/theme-assets.mjs. Edit the
   snapshot (or re-sync it from the original) and regenerate; a hand edit
   here fails the gate at commit rather than surviving to contradict its
   source.

     node _dev/sync-static-source.mjs sharpening-plus      pull the original in
     node _dev/generate/theme-assets.mjs sharpening-plus   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   the About page's inline <style> block: the base, the title
   strip and the two bio bands.

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

  /* ─── tokens ──────────────────────────────────────────────────────────
     Identical to blade-route-home.html. Swap these in one place and both
     pages follow. Nothing below uses raw hex. */
  :root {
    --bg:      #f4f3ef;
    --surface: #ffffff;
    --fg:      #1c1a17;
    --muted:   #6a665f;
    --border:  #e2e0d9;
    --accent:  #f8d117;

    /* Yellow is a background colour, never a text colour on light surfaces. */
    --on-accent: #17150f;

    /* the inverse lockup: black band, yellow mark, the logo's own arrangement */
    --ink:       #1c1a17;
    --ink-fg:    #f7f6f2;
    --ink-muted: #9a958a;
    --ink-line:  color-mix(in oklch, var(--ink-fg) 18%, transparent);

    --fg-soft:     color-mix(in oklch, var(--fg) 5%, transparent);
    --fg-line:     color-mix(in oklch, var(--fg) 14%, transparent);

    --font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    --fs-h1: clamp(40px, 5.4vw, 68px);
    --fs-h2: clamp(28px, 3.4vw, 42px);
    --fs-h3: 21px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --fs-meta: 13px;

    --gap-xs: 8px;
    --gap-sm: 12px;
    --gap-md: 20px;
    --gap-lg: 32px;
    --gap-xl: 56px;
    --gap-2xl: 96px;
    --container: 1180px;
    --gutter: 32px;

    --radius: 10px;
    --radius-lg: 16px;
  }

  /* ─── reset & base ────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }
  p { text-wrap: pretty; }
  h1, h2, h3, h4 { text-wrap: balance; }
  :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
  .on-ink :focus-visible { outline-color: var(--accent); }

  /* ─── layout primitives ───────────────────────────────────────────── */
  .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: clamp(48px, 7vw, 88px); }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }

  /* ─── type ────────────────────────────────────────────────────────── */
  h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
  h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; margin: 0; font-weight: 600; }
  h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; margin: 0; }
  .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 56ch; margin: 0; }
  .eyebrow {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 var(--gap-md);
  }
  .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* ─── buttons ─────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 11px 22px;
    border-radius: var(--radius); border: 1px solid transparent;
    font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
    transition: transform .05s ease, background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
  .btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, var(--on-accent)); border-color: color-mix(in oklch, var(--accent) 88%, var(--on-accent)); }
  .btn-secondary { background: transparent; color: var(--fg); border-color: var(--fg-line); }
  .btn-secondary:hover { border-color: var(--fg); }
  .on-ink .btn-secondary { color: var(--ink-fg); border-color: var(--ink-line); }
  .on-ink .btn-secondary:hover { border-color: var(--ink-fg); }
  .btn-arrow::after { content: '→'; transition: transform .15s ease; }
  .btn-arrow:hover::after { transform: translateX(3px); }

  /* ─── page title strip ────────────────────────────────────────────── */
  /* The wireframe opens straight into the first bio, so this stays a strip
     rather than a hero: one line of orientation and nothing else. */
  .titlestrip { padding-block: clamp(28px, 3.6vw, 44px) 0; }
  .titlestrip h1 { font-size: clamp(32px, 3.8vw, 48px); }
  .titlestrip .lead { margin-top: var(--gap-sm); }

  /* ─── bio rows ────────────────────────────────────────────────────── */
  /* Two rows, mirrored: copy beside a plate. Column ratios follow the
     wireframe, where the business copy runs wider than the owner copy's plate. */
  .bio { padding-block: clamp(36px, 5vw, 64px); }
  .bio + .bio { border-top: 1px solid var(--border); }
  .bio-grid { display: grid; gap: clamp(32px, 5vw, 68px); align-items: start; }
  .bio-business .bio-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .bio-owner .bio-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .bio-copy > * + * { margin-top: var(--gap-md); }
  .bio-copy p { margin: 0; max-width: 60ch; }
  .bio-copy p.lead { color: var(--fg); }
  .bio-copy h2 { margin-bottom: var(--gap-xs); }

  /* A short signature line under the owner copy: the one place on the page
     where the yellow returns, at hairline weight. */
  .bio-sign { border-left: 3px solid var(--accent); padding-left: 14px; }
  .bio-sign strong { display: block; font-size: 15px; }
  .bio-sign .meta { display: block; margin-top: 2px; }

  /* ─── picture plates ──────────────────────────────────────────────── */
  /* Honest placeholders: a grey plate with a mono label, echoing the
     wireframe's heavy-bordered boxes. No stock photography stand-ins. */
  .plate { margin: 0; }
  .plate-img {
    display: grid; place-items: center; gap: 6px;
    background: color-mix(in oklch, var(--fg) 6%, var(--surface));
    border: 2px solid var(--fg); border-radius: var(--radius-lg);
    padding: var(--gap-lg); text-align: center;
  }
  .bio-business .plate-img { aspect-ratio: 5 / 4; }
  .bio-owner .plate-img { aspect-ratio: 1 / 1; }
  .plate-img span {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
  }
  .plate figcaption { margin-top: var(--gap-sm); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .plate-sticky { position: sticky; top: 84px; }

  @media (max-width: 920px) {
    .bio-business .bio-grid,
    .bio-owner .bio-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
    .plate-sticky { position: static; }
    /* On one column the owner's copy leads and the portrait follows it. */
    .bio-owner .plate { order: 2; }
    .bio-owner .bio-copy { order: 1; }
    .bio-owner .bio-grid { display: flex; flex-direction: column; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* ─── closing band ────────────────────────────────────────────────── */
  .on-ink { background: var(--ink); color: var(--ink-fg); }
  .on-ink .lead, .on-ink .meta, .on-ink .eyebrow { color: var(--ink-muted); }

  .closer { border-top: 4px solid var(--accent); }
  .closer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-xl); align-items: center; padding-block: clamp(48px, 6vw, 76px); }
  .closer-actions { display: flex; flex-direction: column; gap: var(--gap-sm); }
  .closer-actions .btn { width: 100%; }
  @media (max-width: 920px) { .closer-inner { grid-template-columns: 1fr; gap: var(--gap-lg); } }

  /* ─── footer ──────────────────────────────────────────────────────── */
  .pagefoot { border-top: 1px solid var(--border); padding-block: var(--gap-xl); font-size: 14px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-xl); }
  @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; gap: var(--gap-lg); } }
  .foot-col .foot-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 12px; }
  .foot-col a, .foot-col p { display: block; color: var(--muted); margin: 0 0 8px; }
  .foot-col a:hover { color: var(--fg); }
  .foot-base { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; padding-top: var(--gap-md); border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }