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

   Built from _source/work/site/blade-route-home.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 home page's inline <style> block: the warm-paper tokens,
   the base, the tagline band, the route calendar and the town finder.

   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 ──────────────────────────────────────────────────────────
     Six variables carry the whole palette. Swap these to the logo colors
     and every surface, rule, and state follows. 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.
       Anything sitting on --accent takes --on-accent. */
    --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); }
  .stack { display: flex; flex-direction: column; }
  .stack > * + * { margin-top: var(--gap-md); }
  .row { display: flex; align-items: center; gap: var(--gap-md); }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
  @media (max-width: 920px) { .grid-3 { grid-template-columns: 1fr; } }

  /* ─── 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); }
  /* button variants for the two ink bands */
  .on-ink .btn-secondary { color: var(--ink-fg); border-color: var(--ink-line); }
  .on-ink .btn-secondary:hover { border-color: var(--ink-fg); }
  .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; padding-inline: 4px; min-height: 32px; }
  .btn-ghost:hover { color: var(--fg); }
  .btn-arrow::after { content: '→'; transition: transform .15s ease; }
  .btn-arrow:hover::after { transform: translateX(3px); }
  .btn-block { width: 100%; }
  /* A control that is waiting on the client rather than broken. It keeps
     its full size and stays in the tab order's reading position, and the
     cursor plus the note beside it say why it will not act yet. */
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn:disabled:hover { border-color: var(--fg-line); background: transparent; }
  .btn-primary:disabled:hover { background: var(--accent); }
  .detail-note.is-pending { color: var(--fg); }

  /* ─── tagline band ────────────────────────────────────────────────── */
  /* Sized so the band ends level with the rail's "See the full month" link:
     the headline drops a step off the global scale and the lede runs quieter. */
  .tagband { padding-block: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 28px); }
  .tagband-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 5vw, 68px); align-items: start; }
  .tagband .eyebrow { margin-bottom: var(--gap-sm); }
  .tagband h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; margin-bottom: var(--gap-sm); }
  .tagband .lead { font-size: 15.5px; line-height: 1.5; max-width: 50ch; margin-bottom: var(--gap-md); }
  .tagband .btn { min-height: 44px; padding-block: 9px; font-size: 14.5px; }
  .tagband-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
  @media (max-width: 920px) {
    .tagband-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
    /* On one column the rail leads: the next stops are the reason people land here. */
    .tagband-grid > .rail { order: -1; }
  }

  /* upcoming-stops rail */
  .rail { border-top: 1px solid var(--fg); padding-top: 16px; }
  .rail-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .rail-list { display: flex; flex-direction: column; }
  .rail-more { margin-top: 6px; min-height: 44px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
  .stop-chip {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: var(--gap-md);
    width: 100%; min-height: 48px; padding: 7px 0;
    background: transparent; border: 0; border-bottom: 1px solid var(--border);
    text-align: left; color: inherit; transition: padding-left .18s ease, border-color .18s ease;
  }
  .stop-chip:hover { padding-left: 8px; border-bottom-color: var(--fg-line); }
  .stop-chip .chip-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .stop-chip .chip-town { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .stop-chip .chip-go { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  /* Once a town is picked the arrow gives way to the distance, which is
     the more useful thing in the same slot. */
  .stop-chip .chip-dist { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }

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

  /* ─── calendar ────────────────────────────────────────────────────── */
  /* The calendar follows the tagline band directly, so it carries the
     breathing room the arrow cue used to sit in. */
  .calsection { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 64px); }
  .cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--gap-lg); align-items: start; }
  @media (max-width: 1040px) {
    .cal-layout { grid-template-columns: 1fr; gap: var(--gap-lg); }
    .cal { max-width: 720px; margin-inline: auto; }
  }

  /* The card is a square: the head and weekday strip take what they need and
     the six week rows split the rest, so cells stay close to 1:1 too. */
  .cal {
    display: flex; flex-direction: column; aspect-ratio: 1 / 1;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  }
  .cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .cal-month { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
  .cal-month .num { font-family: var(--font-mono); font-size: 15px; color: var(--muted); margin-left: 10px; letter-spacing: 0.04em; }
  .cal-nav { display: flex; gap: 6px; }
  .cal-nav-btn {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--fg); transition: border-color .15s ease, background .15s ease;
  }
  .cal-nav-btn:hover:not(:disabled) { border-color: var(--fg); }
  .cal-nav-btn:disabled { color: var(--muted); opacity: .4; cursor: not-allowed; }
  .cal-nav-btn svg { width: 15px; height: 15px; }

  .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
  .cal-dow span { padding: 7px 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; }

  /* Type inside a cell runs a step below body scale so the town and its
     distance both clear the cell without truncation. */
  .day {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    min-height: 0; overflow: hidden; padding: 6px 8px 7px;
    background: transparent; border: 0;
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    text-align: left; color: inherit;
    transition: background .14s ease;
  }
  .day:nth-child(7n) { border-right: 0; }
  /* The card clips, so a focus ring drawn outside a cell is cut off on the
     four edges of the grid. Drawing it inside keeps it whole on every cell. */
  .day:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; border-radius: 0; }
  .day-num { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
  .day-stop { display: flex; flex-direction: column; gap: 1px; margin-top: auto; width: 100%; }
  /* Two lines rather than one clipped line: a long salon name wraps instead
     of ending in an ellipsis. */
  .day-town {
    font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  /* The distance badge a cell takes once a town is picked. In range it is
     a filled chip, out of range it is quiet type, and the miles are on
     both, so the reading never rests on the colour alone. */
  .day-dist { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--muted); align-self: flex-start; }
  .day-dist.is-near { background: var(--accent); color: var(--on-accent); border-radius: 3px; padding: 0 4px; }
  .day.has-stop { cursor: pointer; }
  .day.has-stop::before {
    content: ''; position: absolute; left: 8px; top: 10px;
    width: 4px; height: 4px; border-radius: 999px; background: var(--fg);
  }
  .day.has-stop .day-num { padding-left: 9px; }
  .day.has-stop:hover { background: var(--fg-soft); }
  .day.is-out { background: color-mix(in oklch, var(--bg) 55%, var(--surface)); cursor: default; }
  .day.is-out .day-num { opacity: .38; }
  .day.is-empty { cursor: default; }
  .day.is-today .day-num { color: var(--fg); font-weight: 600; }
  .day.is-today::after {
    content: 'Today'; position: absolute; right: 7px; top: 6px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .day.is-selected { background: var(--accent); }
  .day.is-selected .day-num,
  .day.is-selected .day-town { color: var(--on-accent); }
  .day.is-selected::before { background: var(--on-accent); }
  .day.is-selected::after { color: color-mix(in oklch, var(--on-accent) 62%, transparent); }
  /* On the selected cell the chip inverts, because a yellow chip on a
     yellow cell is nothing at all. */
  .day.is-selected .day-dist { color: color-mix(in oklch, var(--on-accent) 72%, transparent); }
  .day.is-selected .day-dist.is-near { background: var(--on-accent); color: var(--accent); }

  /* narrow viewports: the 7-column grid becomes an agenda list */
  @media (max-width: 720px) {
    .cal { aspect-ratio: auto; max-width: none; }
    .cal-dow { display: none; }
    .cal-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .day { display: none; }
    .day.has-stop {
      display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
      align-items: center; gap: var(--gap-md);
      min-height: 68px; padding: 12px 16px; border-right: 0; overflow: visible;
    }
    .day.has-stop::before { display: none; }
    .day.has-stop .day-num { padding-left: 0; font-family: var(--font-mono); font-size: 15px; color: var(--fg); }
    .day-stop { margin-top: 0; gap: 2px; }
    /* the agenda has room, so type returns to list scale and stops clamping */
    .day-town { display: block; font-size: 15px; line-height: 1.3; white-space: normal; }
    .day-dist { font-size: 11px; }
    .day.is-today::after { position: static; font-size: 9.5px; }
  }

  /* ─── the town finder ─────────────────────────────────────────────── */
  /* The field that turns "when are you near me" into a date. Adopted from
     variations/route-location-swatches.html on 2026-09-24. The list is
     the towns the route could plausibly serve rather than only the ones
     it stops in, so a visitor in a town with no stop still gets an answer. */
  .finder {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px 18px; margin-bottom: var(--gap-md);
  }
  .finder-label {
    display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
  }
  .finder-field { position: relative; max-width: 460px; }
  .finder-input {
    width: 100%; min-height: 48px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 16px; color: inherit;
  }
  .finder-input:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
  .finder-input::placeholder { color: color-mix(in oklch, var(--muted) 70%, transparent); }
  .suggest {
    position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px; list-style: none;
    max-height: 264px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--fg); border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(23, 21, 15, .18);
  }
  .suggest[hidden] { display: none; }
  .suggest-opt {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md);
    min-height: 44px; padding: 8px 12px; border-radius: 6px; cursor: pointer;
  }
  .suggest-opt .opt-state { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.06em; }
  .suggest-opt.is-active, .suggest-opt:hover { background: var(--accent); }
  .suggest-opt.is-active .opt-state, .suggest-opt:hover .opt-state { color: var(--on-accent); }
  .suggest-none { padding: 10px 12px; font-size: 14px; color: var(--muted); }
  .finder-answer {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md);
    flex-wrap: wrap; margin-top: var(--gap-sm); padding-top: var(--gap-sm); border-top: 1px solid var(--border);
  }
  .finder-answer[hidden] { display: none; }
  .finder-answer p { margin: 0; font-size: 14.5px; }
  .finder-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
  .finder-clear {
    min-height: 44px; padding: 0 12px; background: transparent; border: 0;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  }
  .finder-clear:hover { color: var(--fg); }
  .finder-empty a { text-decoration: underline; text-underline-offset: 3px; }

  /* ─── the dates near you ──────────────────────────────────────────── */
  /* The answer, above the month rather than inside it: the grid stays the
     schedule and this stays the shortlist. */
  .nearby {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 14px 18px 6px; margin-bottom: var(--gap-md);
  }
  .nearby[hidden] { display: none; }
  .nearby-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }
  .nearby-head h3 { font-size: 17px; }
  .nearby-row {
    display: grid; grid-template-columns: 110px minmax(0, 1fr) 104px;
    align-items: center; gap: var(--gap-md);
    width: 100%; min-height: 52px; padding: 8px 0;
    background: transparent; border: 0; border-top: 1px solid var(--border);
    text-align: left; color: inherit;
    transition: padding-left .18s ease, background .14s ease;
  }
  .nearby-row:first-of-type { border-top: 0; }
  .nearby-row:hover { padding-left: 8px; background: var(--fg-soft); }
  .nearby-row.is-selected { background: var(--accent); }
  .nearby-date { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .nearby-row.is-selected .nearby-date { color: color-mix(in oklch, var(--on-accent) 72%, transparent); }
  .nearby-town { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
  .nearby-dist { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
  @media (max-width: 720px) {
    .nearby-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
  }

  /* ─── detail panel ────────────────────────────────────────────────── */
  .detail { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
  @media (max-width: 1040px) { .detail { position: static; } }
  .detail-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .detail-town { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 4px; }
  .detail-list { display: flex; flex-direction: column; gap: 0; margin: var(--gap-md) 0; padding: 0; }
  .detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md); padding: 11px 0; border-top: 1px solid var(--border); }
  .detail-row dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .detail-row dd { margin: 0; font-size: 14px; text-align: right; }
  .detail-note { font-size: 13px; color: var(--muted); margin: var(--gap-sm) 0 0; }
  .detail-actions { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: var(--gap-md); }

  /* ─── closing band ────────────────────────────────────────────────── */
  /* shared inversion: black ground, yellow accent, used by the brand band and the closer */
  .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; }