/* The road book. Two layouts in one file: a screen page for assembling it, and the printed thing
   it exists to become. Print is the real target — everything on screen is scaffolding. */
.booklet-shell{max-width:62rem;margin:0 auto;padding:32px clamp(16px,5vw,48px) 64px}
.booklet-intro h1{margin:.25rem 0 .5rem}
.booklet-intro>p{max-width:46rem;color:var(--hh-ink-muted)}
.booklet-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:22px 0 8px}
.booklet-field{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.booklet-field input{min-block-size:44px;min-inline-size:14rem;padding:0 12px;border:1px solid var(--hh-border);border-radius:12px;background:#fff;font:inherit;font-size:.95rem;text-transform:none;letter-spacing:0}
.booklet-empty{padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--hh-border)}

.booklet{margin-top:28px}
.booklet-cover,.booklet-stop,.booklet-packing,.booklet-sources{margin:0 0 22px;padding:26px clamp(18px,4vw,34px);border:1px solid var(--hh-border);border-radius:18px;background:#fff}
.booklet-cover__brand{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-pink)}
.booklet-cover__title{margin:.2rem 0 .4rem;font-size:clamp(1.8rem,4vw,2.6rem)}
.booklet-cover__facts{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.booklet-cover__made{margin:14px 0 0;font-size:.76rem;color:var(--hh-ink-muted)}
.booklet-map-wrap{margin:18px 0}
.booklet-map{display:block;width:100%;height:auto;border-radius:14px}
.booklet-contents{margin:14px 0 0;padding-left:1.3rem;columns:2;column-gap:28px}
.booklet-contents li{margin-bottom:4px;break-inside:avoid}

.booklet-stop__head{display:flex;align-items:baseline;gap:14px}
.booklet-stop__n{min-inline-size:2rem;font-family:"Luckiest Guy",system-ui,sans-serif;font-size:1.8rem;color:var(--hh-pink);font-variant-numeric:tabular-nums}
.booklet-stop h2{margin:0}
.booklet-stop__where{margin:0;font-size:.82rem;font-weight:700;color:var(--hh-ink-muted)}
.booklet-leg{margin:10px 0 0;font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--hh-ink-muted)}
.booklet-leg__warn{color:var(--hh-pink)}
.booklet-hook{margin:12px 0 0}
.booklet-pick{margin:10px 0 0}
.booklet-unwritten{margin:10px 0 0;font-style:italic;color:var(--hh-ink-muted)}
.booklet-practical{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0 0;font-size:.86rem}
.booklet-practical dt{font-weight:800}
.booklet-practical dd{margin:0}
.booklet-facts{margin:12px 0 0;padding-left:1.1rem;font-size:.86rem}
.booklet-weather{margin:12px 0 0;font-size:.86rem}
.booklet-basis{color:var(--hh-ink-muted)}
.booklet-checked{margin:8px 0 0;font-size:.74rem;color:var(--hh-ink-muted)}

.booklet-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0 0}
.booklet-photos:empty{display:none}
.booklet-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.booklet-add-photo{display:inline-flex;align-items:center;min-block-size:44px;margin:12px 0 0;padding:0 16px;border:1px dashed var(--hh-border);border-radius:12px;font-size:.8rem;font-weight:800;cursor:pointer}
.booklet-add-photo input{position:absolute;width:1px;height:1px;opacity:0}
.booklet-add-photo:focus-within{outline:3px solid var(--hh-focus);outline-offset:2px}
.booklet-notes{margin:18px 0 0}
.booklet-notes__label{margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-ink-muted)}
.booklet-rule{display:block;height:26px;border-bottom:1px solid rgba(42,27,61,.18)}
.booklet-pack-list,.booklet-sources ul{margin:10px 0 0;padding-left:1.1rem;font-size:.86rem}
.booklet-sources li{margin-bottom:6px;overflow-wrap:anywhere}

/* ── paper ──────────────────────────────────────────────────────────────── */
@media print{
  /* Everything that exists to build the book, rather than be the book. */
  .no-print,.hub-nav,.site-nav,nav,footer,.booklet-intro{display:none!important}
  @page{size:A4 portrait;margin:14mm}
  html,body{background:#fff!important;color:#000}
  .booklet-shell{max-width:none;margin:0;padding:0}
  .booklet{margin:0}
  /* One stop to a page: the point of a printed book is that you can put a finger on today. */
  .booklet-cover,.booklet-stop,.booklet-packing,.booklet-sources{margin:0;padding:0 0 10mm;border:0;border-radius:0;break-after:page;break-inside:avoid}
  .booklet-sources{break-after:auto}
  .booklet-photos{grid-template-columns:repeat(2,1fr)}
  .booklet-photos img{aspect-ratio:3/2}
  .booklet-rule{border-bottom:1px solid #999}
  /* A printed URL has to be readable, not a hyperlink nobody can click on paper. */
  .booklet-sources li{font-size:9pt}
  .booklet-map{border:1px solid #999}
}

/* ── the Highway Heads checklists ───────────────────────────────────────── */
.booklet-checklist{margin:26px 0 0}
.booklet-checklist h2{margin:0 0 6px}
.booklet-checklist__lede{margin:0 0 12px;font-size:.86rem;color:var(--hh-ink-muted);max-width:44rem}
/* A box drawn in CSS, not a ☐ character: a glyph depends on the printer having the font, and
   this has to come out of any printer as something you can put a pen through. */
.booklet-ticks{list-style:none;margin:0;padding:0}
.booklet-ticks li{position:relative;padding:0 0 9px 1.9rem;font-size:.9rem;line-height:1.45}
.booklet-ticks li::before{content:"";position:absolute;left:0;top:.18em;width:.95rem;height:.95rem;border:1.5px solid var(--hh-border);border-radius:3px}
/* The break-down steps are an order of operations, so they are numbered rather than ticked. */
.booklet-ticks--steps{counter-reset:step}
.booklet-ticks--steps li{counter-increment:step}
.booklet-ticks--steps li::before{content:counter(step);border:0;width:1.3rem;height:1.3rem;top:0;display:grid;place-items:center;background:var(--hh-pink);color:#fff;border-radius:999px;font-size:.72rem;font-weight:800}
.booklet-why{color:var(--hh-ink-muted)}
.booklet-cite{font-size:.74rem;color:var(--hh-ink-muted);white-space:nowrap}
.booklet-worth{margin:0;padding-left:1.1rem;font-size:.88rem;line-height:1.5}
.booklet-worth li{margin-bottom:8px}
.booklet-disclaimer{margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:44rem}

@media print{
  /* Each checklist gets its own page: the whole point is to tick it with the car in front of you. */
  .booklet-checklist{margin:0;padding:0 0 10mm;break-before:page;break-inside:avoid}
  .booklet-ticks li::before{border-color:#000}
  .booklet-ticks--steps li::before{background:#000;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .booklet-why,.booklet-cite,.booklet-checklist__lede{color:#333}
  .booklet-disclaimer{background:none;border-left:2px solid #000;font-size:9pt}
}

/* ── in the car ─────────────────────────────────────────────────────────── */
.booklet-games{margin:26px 0 0}
.booklet-games h2{margin:0 0 6px}
.booklet-games h3{margin:18px 0 6px;font-size:1rem}
.booklet-games__lede{margin:0 0 12px;font-size:.86rem;color:var(--hh-ink-muted);max-width:44rem}
/* A grid a child fills in with a pencil: fixed-width cells, square, generous. */
.booklet-wordsearch{display:inline-block;border:1.5px solid var(--hh-border);padding:8px;border-radius:6px}
.booklet-wordsearch__row{display:flex}
.booklet-wordsearch__row span{display:grid;place-items:center;width:1.45rem;height:1.45rem;font:600 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.booklet-wordsearch__words{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;font:600 .78rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.booklet-plates p,.booklet-spotting p{margin:0 0 8px;font-size:.88rem}

@media print{
  /* Its own page: this is the page a child is handed. */
  .booklet-games{break-before:page;break-inside:avoid;margin:0;padding:0 0 10mm}
  .booklet-wordsearch{border-color:#000}
  .booklet-wordsearch__row span{width:1.5rem;height:1.5rem;font-size:.85rem}
  .booklet-games__lede{color:#333}
}