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

   Built from _source/work/site/blade-route-contact.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 Contact & FAQ page's inline <style> block: the base, the
   title strip, the panels, the question form and the FAQ list.

   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 and blade-route-about.html. Swap
     these in one place and all three pages follow. No raw hex below. */
  :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 ────────────────────────────────────────────── */
  /* Same strip the about page opens with: one line of orientation, then
     straight into the panel the wireframe leads with. */
  .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); }

  /* ─── heavy panels ────────────────────────────────────────────────── */
  /* The wireframe draws both blocks as thick-bordered boxes with a centred
     caption bar across the top. That reads as a plate here: 2px fg border,
     a hairline-separated head, and the body inset from it. */
  .panelsection { padding-block: clamp(32px, 4.4vw, 56px) 0; }
  .panelsection + .panelsection { padding-top: clamp(28px, 3.6vw, 44px); }
  /* The last panel in the run needs its own bottom padding so it does not sit
     flush against whatever band follows it. */
  .panelsection:last-of-type,
  .panelsection:not(:has(+ .panelsection)) { padding-bottom: clamp(48px, 6vw, 80px); }

  .plate {
    background: var(--surface);
    border: 2px solid var(--fg);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .plate-head {
    display: flex; align-items: baseline; justify-content: center; gap: var(--gap-sm); flex-wrap: wrap;
    padding: 13px var(--gap-md);
    border-bottom: 2px solid var(--fg);
    background: var(--fg-soft);
    text-align: center;
  }
  .plate-head h2 { font-size: 20px; letter-spacing: -0.01em; }
  /* Stacked variant: title on its own line, the note centred beneath it. */
  .plate-head.is-stacked {
    flex-direction: column; align-items: center; gap: 4px;
  }
  .plate-body { padding: clamp(18px, 2.6vw, 28px); }

  /* ─── contact form ────────────────────────────────────────────────── */
  .field { display: block; }
  .field-label {
    display: block; margin-bottom: 7px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
  }
  .input, .textarea {
    width: 100%; font: inherit; color: var(--fg);
    background: var(--surface);
    border: 2px solid var(--fg); border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .input { min-height: 52px; }
  /* The wireframe's question box is the dominant element on the page, so it
     keeps a real writing area rather than collapsing to two rows. */
  .textarea { min-height: 210px; resize: vertical; line-height: 1.55; }
  .input::placeholder, .textarea::placeholder { color: var(--muted); }
  .input:focus-visible, .textarea:focus-visible {
    outline: none; border-color: var(--fg);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 55%, transparent);
  }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--fg); box-shadow: 0 0 0 3px var(--fg-soft); }

  /* email left, send right, matching the wireframe's split bottom row */
  .form-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--gap-md); align-items: end; margin-top: var(--gap-md); }
  .form-row .btn { min-height: 52px; width: 100%; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

  .field-error { display: none; margin: 7px 0 0; font-size: 13px; color: var(--fg); }
  .field-error::before { content: '↳ '; color: var(--muted); }
  .field.has-error .field-error { display: block; }

  .form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; margin-top: var(--gap-md); }
  .charcount { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* Sent state: the panel body swaps for a short receipt rather than a toast
     that disappears before it is read. */
  .sent { display: none; text-align: center; padding: clamp(24px, 4vw, 44px) var(--gap-md); }
  .sent-mark { width: 54px; height: 54px; margin: 0 auto var(--gap-md); display: grid; place-items: center; background: var(--accent); border-radius: 999px; color: var(--on-accent); }
  .sent-mark svg { width: 26px; height: 26px; }
  .sent h3 { margin-bottom: 8px; }
  .sent p { margin: 0 auto; max-width: 46ch; color: var(--muted); }
  .sent .btn { margin-top: var(--gap-md); }
  .is-sent .form-live { display: none; }
  .is-sent .sent { display: block; }

  /* ─── FAQ list ────────────────────────────────────────────────────── */
  /* The wireframe's three scribbled lines are three answers waiting to be
     written. They open one at a time so the panel keeps its stacked shape. */
  .faq-list { border-top: 1px solid var(--border); }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-q {
    display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--gap-md);
    width: 100%; min-height: 60px; padding: 14px 4px;
    background: transparent; border: 0; text-align: left; color: inherit;
    font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
    transition: padding-left .18s ease;
  }
  .faq-q:hover { padding-left: 10px; }
  .faq-sign { position: relative; width: 18px; height: 18px; justify-self: end; }
  .faq-sign::before, .faq-sign::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    background: var(--fg); transform: translate(-50%, -50%);
    transition: transform .18s ease, opacity .18s ease;
  }
  .faq-sign::before { width: 15px; height: 2px; }
  .faq-sign::after { width: 2px; height: 15px; }
  .faq-q[aria-expanded="true"] .faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  .faq-a { padding: 0 4px 20px; max-width: 68ch; }
  .faq-a p { margin: 0; color: var(--muted); }
  .faq-a p + p { margin-top: var(--gap-sm); }
  .faq-a[hidden] { display: none; }
  .faq-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; margin-top: var(--gap-md); }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faq-q, .faq-sign::before, .faq-sign::after { transition: none; } }

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