/* Bells Auto Repair — Theme D (Roadside Retro)
   Levers (per design-system.md §6 pre-assignment for this slug):
   teal-forward palette + pinstripe divider + plate wordmark
   (see README.md for sibling-proof against crozier-rv, the Theme D sibling) */
:root{
  --font-display:"Paytone One",system-ui,sans-serif;
  --display-transform:none; --display-weight:400; --display-tracking:.002em; --display-lh:1.02;
  --paper:#f3ead6; --surface:#fffdf7; --surface-2:#e6dabf;
  --ink:#1f2b2b; --ink-soft:#3c4a49; --ink-faint:#6d7877;
  --line:#d6c9ac; --line-strong:#b7a884;
  --brand:#12615e; --on-brand:#f3ead6;             /* deep teal, teal-forward lever */
  --accent:#d8722c; --on-accent:#fffdf7;            /* sand-rust */
  --accent-2:#12615e;
  --radius:10px; --radius-lg:14px; --border-w:2px; --rule-w:1px;
  --shadow:none; --lift:2px;
  --divider-color:#b7a884; --divider-accent:var(--accent);
  --slot-bg:#efe4cb; --slot-line:#b7a884; --slot-tag-bg:#12615e;

  /* photo hero — Theme D deep-teal tint (see design-system.md Amendment) */
  --hero-tint-a:#08211f;
  --hero-tint-b:#12615e;
  --hero-bar:3px;
}

/* Paytone One is single-weight (400) — the base.css button/wordmark defaults
   pull 700, which would synthetic-bold against a font that doesn't have it. */
.btn{font-weight:400}
.wordmark__name{font-weight:400}

/* lever: plate wordmark, slightly rounder than the base radius per the
   design-system note ("wordmark--plate with --radius:12px") */
.wordmark--plate .wordmark__name{border-radius:12px}

/* site-specific overrides */
.wordmark__name{max-width:14ch}
@media(min-width:420px){.wordmark__name{max-width:none}}

/* quick anchor nav — sits between wordmark and the call/request buttons on
   wider screens; hidden on mobile where the sticky action bar carries the CTAs */
.quick-nav{display:none;gap:18px;margin:0;padding:0;list-style:none}
.quick-nav a{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
}
.quick-nav a:hover{color:var(--ink)}
@media(min-width:760px){.quick-nav{display:flex}}

/* "Getting here" directions list — verified lines read plain; anything not
   confirmed gets the same dashed/hatch slot treatment as review-slot cards. */
.directions{list-style:none;margin:0;padding:0}
.directions li{margin:0 0 .6em;color:var(--ink-soft);padding-left:1.4em;position:relative}
.directions li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
  background:var(--accent);border-radius:50%}
.directions li.dir-slot{
  list-style:none;margin:.8em 0 0;padding:14px 14px 14px 16px;
  background:var(--slot-bg);background-image:var(--hatch);
  border:2px dashed var(--slot-line);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.78rem;line-height:1.5;color:var(--slot-ink);
}
.directions li.dir-slot::before{display:none}
.directions li.dir-slot strong{color:var(--ink)}

/* hours row for a not-yet-confirmed value gets the same hatch treatment */
.hours li.is-slot{background:var(--slot-bg);background-image:var(--hatch);
  margin-inline:-14px;padding-inline:14px;border-radius:var(--radius)}
.hours li.is-slot .time{color:var(--slot-ink);font-weight:600}

.centerpiece__panel--split{align-items:start}
.centerpiece aside h3, .centerpiece .info-card h3{color:var(--ink)}

.form-wrap + .btn{margin-top:12px}