/* Bryan Moore for Cumberland County Board of Education — public site.
   Hand-written. Design tokens come from shared/tokens.css (GENERATED).

   Direction: the campaign's own colours, restored. Forest green and coral on
   warm cream, with a Baskerville display face — the palette and voice the
   candidate already had, rebuilt properly.

   Two rules the palette imposes, both measured rather than assumed:

     coral (#d85e40) is 3.50:1 on cream. That is enough for large text, rules,
     fills and borders, and NOT enough for body copy or small links. Coral as
     text uses --coral-dark (6.79:1). Primary actions are forest (10.56:1),
     so there is one dominant action colour and one accent, never two.

     Headings are sentence case. The previous direction set every heading in
     uppercase condensed sans; uppercase Baskerville at display sizes is
     unreadable and looks like a monument, which is the wrong register for a
     school board candidate asking to be trusted with a classroom. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--coral-dark)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:3px}
::selection{background:var(--coral);color:#fff}

/* ---------- type ---------- */
/* Baskerville needs more leading than a condensed sans and no letter-spacing:
   a text face spaced out at display size looks stretched, not elegant. */
h1,h2,h3,h4,.display{
  font-family:var(--display);font-weight:700;line-height:1.14;
  letter-spacing:-.005em;margin:0;color:var(--forest);
}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.08;text-wrap:balance}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem);text-wrap:balance}
h3{font-size:clamp(1.12rem,1.9vw,1.35rem);text-wrap:balance}
p{margin:0 0 1.1rem}
.lede{font-size:clamp(1.06rem,1.9vw,1.26rem);line-height:1.6;color:var(--muted);text-wrap:pretty}
strong{font-weight:700}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.section{padding-block:clamp(3.4rem,7.5vw,5.5rem)}
.section--dark{background:var(--forest);color:var(--paper)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--paper)}
.section--dark .lede,.section--dark p{color:rgba(250,247,238,.82)}
/* :not(.btn) again, and for the same reason the nav rule needs it: this
   selector is (0,1,1) and .btn--accent is (0,1,0), so without the exclusion it
   wins and paints a coral button's label coral on coral. It rendered blank the
   first time this stylesheet was screenshotted. */
.section--dark a:not(.btn){color:var(--coral-light)}
.section--tint{background:var(--paper-deep)}

/* The eyebrow stays in the sans: small uppercase serif with wide tracking is
   where Baskerville falls apart, and this is the one place tracking helps. */
.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:.76rem;color:var(--coral-dark);margin:0 0 .8rem;font-weight:800;
}
.section--dark .eyebrow{color:var(--coral-light)}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--coral);color:#fff;padding:.7rem 1.1rem;border-radius:8px;font-weight:700}

/* ---------- header ---------- */
.masthead{
  background:var(--paper);color:var(--ink);position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
}
/* The coral hairline is the brand signature at the top of every page — thin,
   so it reads as a rule rather than as a warning banner. */
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--coral)}
.masthead .wrap{display:flex;align-items:center;gap:1.2rem;min-height:74px}
.brandmark{display:flex;align-items:center;gap:.7rem;color:var(--forest);text-decoration:none;margin-right:auto}
.brandmark__mark{
  width:40px;height:40px;border-radius:9px;background:var(--forest);color:var(--paper);
  display:grid;place-items:center;font-family:var(--display);font-size:1.35rem;font-weight:700;flex:none;
}
.brandmark__name{font-family:var(--display);font-size:1.14rem;letter-spacing:0;line-height:1.1;font-weight:700}
.brandmark__sub{
  display:block;font-family:var(--sans);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--coral-dark);margin-top:.22rem;font-weight:800;
}
#navlinks{display:flex;align-items:center;gap:1.45rem;list-style:none;margin:0;padding:0}
#navlinks a:not(.btn){color:var(--muted);text-decoration:none;font-weight:600;font-size:.93rem;transition:color .13s ease}
/* :not(.btn) matters — a nav link styled as a filled button would otherwise
   take the accent colour as its text on the same colour and render blank. */
#navlinks a:not(.btn):hover{color:var(--coral-dark)}
#navlinks a:not(.btn)[aria-current=page]{color:var(--forest);font-weight:800;box-shadow:inset 0 -3px 0 var(--coral)}
#navlinks .btn--nav[aria-current=page]{box-shadow:0 0 0 3px var(--coral-line)}
.nav-toggle{display:none;background:none;border:1.5px solid var(--line);color:var(--forest);border-radius:8px;padding:.45rem .7rem;font-size:1.1rem;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  font-size:.83rem;padding:.9rem 1.7rem;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--forest);color:var(--paper)}
.btn--primary:hover{background:var(--forest-deep);color:var(--paper)}
/* Coral fill carries cream at 3.50:1 — fine for this size and weight as a
   large-text control, and the pairing is the campaign's own. */
.btn--accent{background:var(--coral-bright);color:var(--ink)}
.btn--accent:hover{background:var(--coral-dark);color:#fff}
.btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.btn--ghost:hover{border-color:var(--coral);color:inherit}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--forest);color:var(--paper);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(216,94,64,.075) 0 2px,transparent 2px 24px);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 92% at 6% 0%,rgba(216,94,64,.22) 0%,transparent 62%);
}
.hero__inner{position:relative;z-index:2;padding-block:clamp(3.4rem,9vw,6.2rem)}
.hero__content{max-width:46rem}
.hero h1{margin-bottom:.75rem;color:var(--paper)}
.hero h1 .accent{color:var(--coral-light);display:block;font-style:italic;font-weight:400}
.hero__office{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(.72rem,1.4vw,.84rem);color:var(--coral-light);margin:0 0 1.15rem;font-weight:800;
}
.hero__tagline{font-size:clamp(1.04rem,2vw,1.24rem);color:rgba(250,247,238,.86);margin-bottom:1.5rem}

/* ---------- ballot bar: the three-slot ask ---------- */
.ballot-bar{background:var(--coral-bright);color:var(--ink);border-block:1px solid rgba(0,0,0,.14)}
.ballot-bar .wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:.15rem;padding-block:1.05rem;text-align:center;
}
.ballot-bar strong{font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.42rem);font-weight:700}
.ballot-bar span{font-size:.93rem;font-weight:600;color:var(--ink);max-width:58ch;text-wrap:pretty}

/* ---------- countdown ---------- */
.countdown{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.countdown__item{
  background:rgba(250,247,238,.07);border:1px solid rgba(216,94,64,.42);
  border-radius:var(--radius);padding:.75rem 1.15rem;min-width:9rem;
}
.countdown__n{display:block;font-family:var(--display);font-size:1.85rem;color:var(--coral-light);line-height:1.15;font-weight:700}
.countdown__l{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(250,247,238,.7);margin-top:.2rem;font-weight:700}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1.4rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.75rem;box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(11,40,25,.07),0 22px 46px -24px rgba(11,40,25,.5)}
.section--tint .card{background:var(--card)}
.card__n{
  font-family:var(--display);font-size:2.15rem;line-height:1;color:var(--coral);
  opacity:.7;display:block;margin-bottom:.4rem;font-weight:700;
}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card--dark{background:rgba(250,247,238,.06);border-color:rgba(250,247,238,.16);color:var(--paper)}
.card--dark .card__n{color:var(--coral-light);opacity:.85}

/* ---------- split ---------- */
.split{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){ .split{grid-template-columns:1fr 1fr} .split--narrow{grid-template-columns:.85fr 1.15fr} }
.split__media img{border-radius:var(--radius-lg);border:1px solid var(--line)}

/* ---------- stats ---------- */
.stats{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-top:2.1rem}
.stat{border-left:3px solid var(--coral);padding:.35rem 0 .35rem 1rem}
.section--dark .stat{border-left-color:var(--coral)}
.stat__n{display:block;font-family:var(--display);font-size:clamp(1.75rem,3.2vw,2.4rem);line-height:1.1;color:var(--forest);font-weight:700}
.section--dark .stat__n{color:var(--coral-light)}
.stat__l{display:block;font-size:.85rem;color:var(--muted);margin-top:.3rem;line-height:1.4}
.section--dark .stat__l{color:rgba(250,247,238,.72)}

/* ---------- quote ---------- */
.pullquote{
  border-left:4px solid var(--coral);padding:.2rem 0 .2rem 1.5rem;margin:0;
  font-family:var(--display);font-size:clamp(1.3rem,2.8vw,1.85rem);line-height:1.32;
  font-style:italic;font-weight:400;color:var(--forest);
}
.section--dark .pullquote{color:var(--paper)}
.pullquote cite{
  display:block;font-family:var(--sans);font-size:.78rem;font-style:normal;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--coral-dark);margin-top:1rem;
}
.section--dark .pullquote cite{color:var(--coral-light)}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:700;font-size:.9rem;color:var(--forest)}
.section--dark .field label{color:var(--paper)}
.field .hint{font-size:.82rem;color:var(--muted)}
.section--dark .field .hint{color:rgba(250,247,238,.7)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--field-border);border-radius:var(--radius);padding:.72rem .85rem;width:100%;
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest);outline:2px solid rgba(216,94,64,.35);outline-offset:1px}
.checks{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;font-weight:500}
.check input{margin-top:.25rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--forest)}
.hp{position:absolute!important;left:-9999px!important}
.form-status{border-radius:var(--radius);padding:.75rem .95rem;font-weight:700;font-size:.93rem}
.form-status.ok{background:#e4efe5;color:#0b4022;border:1px solid #b3d0bb}
.form-status.err{background:var(--coral-soft);color:var(--coral-dark);border:1px solid var(--coral-line)}
.required{color:var(--coral-dark)}
/* The signup form sits in a dark PANEL, which is a translucent cream layer
   over forest and therefore lighter than forest itself: the on-light coral
   is 1.32 there and even --coral-light is only 4.25. Measured against the
   composited panel colour, not against forest. */
.section--dark .required{color:#ffa98a}

/* ---------- posts ---------- */
.post-list{display:grid;gap:1.4rem;list-style:none;margin:0;padding:0}
.post{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow);transition:border-color .16s ease}
.post:hover{border-color:var(--coral)}
.post a{text-decoration:none;color:inherit;display:block;padding:1.65rem}
.post a:hover h3{color:var(--coral-dark)}
.post h3{margin-bottom:.5rem;font-size:clamp(1.15rem,2.1vw,1.42rem);line-height:1.25}
.post p{color:var(--muted);margin:0}
.prose{max-width:42rem}
.prose p{text-wrap:pretty}
.prose h2{margin:2.4rem 0 .8rem}
.prose h3{margin:1.9rem 0 .6rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
/* :not(.btn) — same trap: about.html puts a button inside .prose. */
.prose a:not(.btn){color:var(--coral-dark)}

/* ---------- footer ---------- */
.footer{background:var(--forest);color:rgba(250,247,238,.76);padding-block:3rem 2rem;font-size:.93rem}
.footer a:not(.btn){color:var(--paper);text-decoration-color:rgba(250,247,238,.45)}
.footer a:not(.btn):hover{color:var(--coral-light)}
.footer__grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:2rem}
.footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-light);margin-bottom:.8rem;font-weight:800}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer__legal{border-top:1px solid rgba(250,247,238,.18);padding-top:1.4rem;display:grid;gap:.5rem}
/* The disclaimer is a legal requirement, so it is styled as something the
   campaign stands behind rather than as fine print apologising for itself. */
.disclaimer{
  font-weight:700;color:var(--paper);letter-spacing:.01em;
  border:1px solid rgba(216,94,64,.5);border-left:4px solid var(--coral);
  border-radius:var(--radius);padding:.75rem 1rem;display:inline-block;
}

/* ---------- notice ---------- */
.notice{
  background:var(--coral-soft);border:1px solid var(--coral-line);border-left:4px solid var(--coral);
  border-radius:var(--radius);padding:1rem 1.2rem;font-size:.94rem;color:var(--ink);
}
.notice strong{font-family:var(--display);font-weight:700}

@media (max-width:820px){
  .nav-toggle{display:block}
  #navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 0;
    border-bottom:3px solid var(--coral);box-shadow:var(--shadow);
  }
  #navlinks.open{display:flex}
  #navlinks li{width:100%}
  #navlinks a{display:block;padding:.85rem clamp(1.1rem,4vw,2.5rem)}
  #navlinks a:not(.btn)[aria-current=page]{box-shadow:inset 3px 0 0 var(--coral)}
  .masthead .wrap{position:relative}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- nav CTA ---------- */
.btn--nav{padding:.5rem 1.1rem;font-size:.75rem;border-radius:8px}
@media (max-width:820px){
  #navlinks li:last-child{padding:.4rem clamp(1.1rem,4vw,2.5rem) .9rem}
  .btn--nav{display:inline-flex}
}

/* ---------- vote page ---------- */
.steps{counter-reset:step;display:grid;gap:1.2rem;margin-top:2rem}
.step{
  position:relative;padding-left:3.6rem;
  border-left:2px solid var(--coral-line);margin-left:1.2rem;padding-bottom:.5rem;
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:-1.35rem;top:0;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--forest);color:var(--paper);display:grid;place-items:center;
  font-family:var(--display);font-size:1.1rem;font-weight:700;
}
.section--dark .step{border-left-color:rgba(216,94,64,.45)}
.section--dark .step::before{background:var(--coral-bright);color:var(--ink)}
.step h3{margin-bottom:.35rem}
.step p:last-child{margin-bottom:0}
.datelist{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
/* Grid, not flex: with flex-wrap a long row drops its text to the next line
   while short rows stay inline, so the column edge zigzags down the list. */
.datelist li{
  display:grid;grid-template-columns:11rem 1fr;gap:.3rem 1.2rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:.7rem;
}
@media (max-width:620px){ .datelist li{grid-template-columns:1fr} }
.datelist .when{font-family:var(--display);font-size:1.02rem;color:var(--forest);font-weight:700}
.section--dark .datelist li{border-bottom-color:rgba(250,247,238,.2)}
.section--dark .datelist .when{color:var(--coral-light)}

/* ---------- gated feature ---------- */
.gate{
  border:2px dashed var(--coral-line);background:var(--coral-soft);
  border-radius:var(--radius-lg);padding:1.8rem;
}
.gate h3{margin-bottom:.6rem}
.gate p:last-child{margin-bottom:0}
.gate__badge{
  display:inline-block;background:var(--forest);color:var(--paper);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;padding:.34rem .75rem;border-radius:999px;margin-bottom:.9rem;font-weight:800;
}
.amounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:.6rem;margin-bottom:1rem}
.amount{
  border:2px solid var(--field-border);background:#fff;border-radius:var(--radius);
  padding:.78rem .5rem;font-family:var(--display);font-size:1.1rem;font-weight:700;cursor:pointer;text-align:center;color:var(--ink);
}
.amount[aria-pressed=true]{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.freq{display:flex;gap:.5rem;margin-bottom:1rem}
.freq button{
  flex:1;border:2px solid var(--field-border);background:#fff;border-radius:var(--radius);
  padding:.62rem;cursor:pointer;font:inherit;font-weight:700;color:var(--ink);
}
.freq button[aria-pressed=true]{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.fine{font-size:.82rem;color:var(--muted);line-height:1.5}

/* ---------- fact card ---------- */
/* Replaced the empty photo frames. A grey box that says "photo goes here"
   tells a voter nothing; four concrete facts tell them who he is. */
.factcard{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--forest);
  border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow);
}
.factcard h3{margin-bottom:1.15rem}
.factcard ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.factcard li{display:grid;gap:.15rem;font-size:.97rem;line-height:1.5}
.factcard li span{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;
  font-size:.67rem;color:var(--coral-dark);font-weight:800;
}
.factcard--accent{border-left-color:var(--coral)}
.factcard--accent li span{color:var(--coral-dark)}
.section--dark .factcard{
  background:rgba(250,247,238,.06);border-color:rgba(250,247,238,.16);
  border-left-color:var(--coral);color:var(--paper);
}
.section--dark .factcard li span{color:var(--coral-light)}
.section--dark .factcard a:not(.btn){color:var(--coral-light)}

/* ---------- print ---------- */
/* Voters print sample ballots and voting guides. Dark grounds waste a
   cartridge and the nav is noise on paper. */

/* ── Booking widgets ───────────────────────────────────────────────────────
   Used by /schedule.html and /manage-call.html. Both pages talk to the same
   scheduling worker and show the same day/time picker, so the picker lives
   here rather than being defined twice in two <style> blocks — which is how
   the template shipped it, and how the two copies drifted apart.

   Every colour below is a token. Contrast is verified by the audit in
   scripts/contrast-audit.mjs, not asserted here. */
.hidden{display:none!important}
.muted{color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);margin:.75rem 0 0}
.req{color:var(--coral-dark)}

/* A day is a chip; a time is a button. Both are toggles, so both carry
   aria-pressed and both show that state visually — a selected chip that only
   a screen reader can identify is not a selection. */
.days,.times{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0}
.day-chip,.time-btn{
  font:inherit;font-weight:700;cursor:pointer;
  padding:.55rem .95rem;border-radius:999px;
  border:2px solid var(--line);background:var(--paper);color:var(--forest);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.time-btn{border-radius:var(--radius);min-width:6.5rem;justify-content:center}
.day-chip:hover,.time-btn:hover{border-color:var(--coral);background:var(--coral-soft)}
.day-chip[aria-pressed="true"],.time-btn[aria-pressed="true"]{
  background:var(--forest);border-color:var(--forest);color:var(--paper);
}
.day-chip:focus-visible,.time-btn:focus-visible{outline:2px solid var(--coral-dark);outline-offset:2px}
.day-chip:disabled,.time-btn:disabled{opacity:.5;cursor:default}

/* The slot you picked, held in view while you fill in your details. */
.selected-slot{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;
  background:var(--coral-soft);border:1px solid var(--coral-line);
  border-radius:var(--radius);padding:.7rem .95rem;margin-bottom:1.1rem;color:var(--ink);
}
.link-btn{
  font:inherit;font-weight:700;cursor:pointer;
  background:none;border:0;padding:0;color:var(--coral-dark);text-decoration:underline;
}
.link-btn:hover{color:var(--forest)}

/* An error the visitor has to act on. Announced via role="alert" on the
   element itself; this only has to make it visible and legible. */
.banner{border-radius:var(--radius);padding:.75rem .95rem;margin-bottom:1rem;font-weight:600}
.banner.error{background:var(--coral-soft);border:1px solid var(--coral-line);color:var(--coral-dark)}

/* Terminal states: booked, moved, canceled. */
.confirm{text-align:center}
.confirm .big{display:block;margin-bottom:.4rem}
.booking-panel{
  background:var(--paper-deep);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:1.1rem;
}
.booking-panel .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.booking-panel .when{font-family:var(--display);font-size:1.3rem;color:var(--forest);margin:.15rem 0 .2rem}

/* Numbered step heading inside the booking card. */
.step-label{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--forest);margin:0 0 .5rem}
.step-num{
  display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--forest);color:var(--paper);font-size:.85rem;
}
@media print{
  .masthead,.nav-toggle,.btn-row,.skip,.countdown{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  .section,.hero__inner{padding-block:1rem}
  .hero,.section--dark,.footer{background:#fff!important;color:#000!important}
  .hero h1,.section--dark h1,.section--dark h2,.section--dark h3,
  .hero h1 .accent,.section--dark .stat__n{color:#000!important}
  .section--dark p,.section--dark .lede,.footer{color:#222!important}
  .card,.factcard,.post{box-shadow:none;border:1px solid #999}
  a{text-decoration:underline}
  .disclaimer{border-color:#000;color:#000}
}