/* The guide's one stylesheet. Taken from the approved notebook design (design/notebook-v1, -map, -county, -maker). */
:root { --paper:#f8f5ee; --ink:#23302a; --muted:#5d6a62; --rule:rgba(35,48,42,.18); --green:#2b5540; --deep:#24483a; --tint:#e8eee3; --red:#a3342a; --blossom:#efdcd2;
        --serif:"Newsreader",Georgia,serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html,body { margin:0; }
body { background:var(--paper); color:var(--ink); font:400 16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:16px; top:16px; background:var(--paper); padding:8px 12px; z-index:100; }

/* The plate: a thin frame with registration marks at the corners */
.plate { position:relative; max-width:1180px; margin:28px auto 40px; border:1px solid var(--rule); }
.mark { position:absolute; width:17px; height:17px; opacity:.55; }
.mark::before,.mark::after { content:""; position:absolute; background:var(--ink); }
.mark::before { left:8px; top:0; width:1px; height:17px; } .mark::after { top:8px; left:0; height:1px; width:17px; }
.tl{left:-9px;top:-9px} .tr{right:-9px;top:-9px} .bl{left:-9px;bottom:-9px} .br{right:-9px;bottom:-9px}
.inner { padding:0 clamp(16px,5vw,64px); }

.hdr { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0 20px; border-bottom:2px solid var(--deep); }
.logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
.logo span { font:500 clamp(1.7rem,3.6vw,2.15rem)/1 var(--serif); color:var(--deep); letter-spacing:-.01em; }
.logo img { display:block; width:56px; height:56px; }
.nav { display:flex; gap:30px; font-size:.9rem; } .nav a { text-decoration:none; color:var(--muted); } .nav a:hover, .nav a[aria-current] { color:var(--deep); }
.nav a[aria-current] { font-weight:500; box-shadow:0 2px 0 var(--deep); }

.kicker { font:italic 400 1.05rem var(--serif); color:var(--muted); margin:0 0 22px; }
h1 { font:400 clamp(2.3rem,5.2vw,4rem)/1.04 var(--serif); letter-spacing:-.015em; margin:0 0 24px; color:var(--deep); }
h2 { color:var(--deep); }
.lede { font-size:1.08rem; color:var(--muted); max-width:30em; margin:0 0 40px; }
.search { display:flex; align-items:center; max-width:440px; border-bottom:1px solid var(--ink); }
.search input { flex:1; border:0; background:none; font:400 1rem var(--sans); padding:12px 0; color:var(--ink); outline:none; min-width:0; }
.search button { border:0; background:none; font:500 .9rem var(--sans); color:var(--green); cursor:pointer; padding:0 0 0 16px; }
.near { margin-top:14px; font-size:.88rem; color:var(--muted); } .near a { color:var(--green); }
figure { margin:0; }
figcaption, .cap { font:italic 400 .98rem/1.45 var(--serif); color:var(--muted); margin-top:12px; }
figcaption b, .cap b { font-style:normal; font-weight:500; color:var(--ink); margin-right:4px; }
.fig-img { display:block; width:100%; height:auto; }
img.fig { mix-blend-mode:multiply; }
.go { font-size:.9rem; font-weight:500; color:var(--green); }
.crumb { font-size:.88rem; color:var(--muted); margin-bottom:20px; } .crumb a { color:var(--muted); }
.badge { display:inline-block; font:italic 400 .95rem var(--serif); color:var(--red); border:1px solid var(--red); border-radius:999px; padding:2px 12px; margin:0 0 18px; }

footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:22px 0 26px; border-top:1px solid var(--rule); font-size:.9rem; color:var(--muted); }
footer a { color:var(--muted); } footer .links a + a { margin-left:16px; }

/* Home */
.opening { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,6vw,88px); padding:72px 0 80px; align-items:end; }
.opening figure { max-width:380px; margin-left:auto; }
.ways { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.way { padding:40px 32px 36px; text-decoration:none; display:flex; flex-direction:column; }
.way + .way { border-left:1px solid var(--rule); } .way:first-child { padding-left:0; } .way:last-child { padding-right:0; }
.spec { height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.spec img { max-height:150px; max-width:100%; }
.way .no { font:italic 400 .9rem var(--serif); color:var(--muted); }
.way h2 { font:400 1.75rem/1.15 var(--serif); margin:2px 0 8px; }
.way p { margin:0 0 16px; color:var(--muted); font-size:.95rem; }
.way .go { margin-top:auto; }
.way:hover h2 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.entry { display:grid; grid-template-columns:180px minmax(0,1fr) minmax(0,1fr); gap:32px 48px; padding:72px 0; border-bottom:1px solid var(--rule); align-items:start; }
.date { font:400 3.4rem/1 var(--serif); color:var(--red); }
.date small { display:block; font:italic 400 1rem var(--serif); color:var(--muted); margin-top:8px; }
.entry h2 { font:400 2rem/1.1 var(--serif); margin:0 0 12px; } .entry p { margin:0 0 14px; max-width:32em; }
.events { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.events li { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule); font-size:.95rem; }
.events li span { color:var(--muted); white-space:nowrap; }
.note { display:grid; grid-template-columns:180px minmax(0,1fr); gap:48px; padding:72px 0 80px; }
.note .lab { font:italic 400 1rem var(--serif); color:var(--muted); }
.note blockquote { margin:0; font:italic 400 1.35rem/1.55 var(--serif); max-width:34em; }
.note .sig { margin-top:18px; font-size:.9rem; color:var(--muted); } .note .sig b { font-weight:500; color:var(--ink); }

/* Section title shared by county, counties, apples, events, about */
.title { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr); gap:clamp(32px,6vw,80px); padding:64px 0 56px; align-items:end; border-bottom:1px solid var(--rule); }
.title h1 { margin-bottom:18px; }
.title .lede { margin-bottom:28px; }
.title figure { max-width:300px; margin-left:auto; }
.title figure img, .title figure svg { width:100%; height:auto; display:block; }
.stats { display:flex; gap:40px; flex-wrap:wrap; }
.stats div b { display:block; font:400 2.4rem/1 var(--serif); }
.stats div span { font:italic 400 .9rem var(--serif); color:var(--muted); }

/* County */
.makers { padding:64px 0 24px; }
.makers > h2 { font:400 2.2rem/1.1 var(--serif); margin:0 0 8px; }
.makers > p { color:var(--muted); margin:0 0 40px; }
.areas { columns:2 380px; column-gap:64px; }
.area { break-inside:avoid; margin:0 0 44px; }
.area h3 { font:400 1.45rem/1.2 var(--serif); margin:0 0 10px; display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--ink); padding-bottom:8px; }
.area h3 small { font:italic 400 .9rem var(--serif); color:var(--muted); }
.ledger { list-style:none; margin:0; padding:0; }
.ledger li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 16px; padding:10px 0; border-bottom:1px solid var(--rule); }
.ledger li a { text-decoration:none; } .ledger li a:hover b { text-decoration:underline; text-underline-offset:3px; }
.ledger b { font:500 1.02rem/1.3 var(--serif); }
.ledger span { font-size:.85rem; color:var(--muted); }
.ledger .t { grid-column:2; grid-row:1; font:italic 400 .85rem var(--serif); }
.pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.pair > section { padding:48px 40px 48px 0; display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; align-items:start; }
.pair > section + section { border-left:1px solid var(--rule); padding:48px 0 48px 40px; }
.pair img { width:120px; height:auto; }
.pair h2 { font:400 1.6rem/1.15 var(--serif); margin:0 0 10px; }
.pair ul { margin:0 0 12px; padding:0; list-style:none; } .pair li { padding:6px 0; border-bottom:1px solid var(--rule); font-size:.95rem; }
.pair li i { font-family:var(--serif); color:var(--muted); }
.neighbours { padding:40px 0 56px; } .neighbours h2 { font:italic 400 1rem var(--serif); color:var(--muted); margin:0 0 12px; }
.neighbours a { font:400 1.35rem var(--serif); margin-right:28px; display:inline-block; }

/* Counties index */
.countries { padding:56px 0 40px; columns:3 260px; column-gap:56px; }
.country { break-inside:avoid; margin:0 0 40px; }
.country h2 { font:400 1.6rem/1.2 var(--serif); margin:0 0 8px; border-bottom:1px solid var(--ink); padding-bottom:8px; display:flex; justify-content:space-between; align-items:baseline; }
.country h2 small { font:italic 400 .9rem var(--serif); color:var(--muted); }
.country li b { font-weight:400; }

/* Maker */
.maker-title { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:clamp(32px,6vw,80px); padding:56px 0 48px; align-items:end; }
.maker-title h1 { margin-bottom:16px; }
.maker-title .lede { margin:0; }
.maker-title figure img { width:100%; max-width:220px; height:auto; display:block; margin-left:auto; }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); margin:0; }
.facts div { padding:20px 20px 22px 0; }
.facts div + div { padding-left:20px; border-left:1px solid var(--rule); }
.facts dt { font:italic 400 .9rem var(--serif); color:var(--muted); margin-bottom:6px; }
.facts dd { margin:0; font:400 1.25rem/1.3 var(--serif); overflow-wrap:anywhere; }
.facts dd small { display:block; font:400 .9rem/1.45 var(--sans); color:var(--muted); margin-top:6px; }
.body { display:grid; grid-template-columns:minmax(0,640px) minmax(0,320px); justify-content:space-between; gap:64px; padding:64px 0 72px; }
.story h2 { font:400 1.9rem/1.1 var(--serif); margin:0 0 16px; }
.story h2:not(:first-child) { margin-top:52px; }
.story p { font-size:1.06rem; line-height:1.75; margin:0 0 1em; }
.buy { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.buy li { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.buy li span { color:var(--muted); font-size:.92rem; text-align:right; }
.body aside { align-self:start; position:sticky; top:104px; }
.mini { height:240px; border:1px solid var(--rule); background:#efeadf; margin-bottom:16px; }
.body aside address { font-style:normal; margin-bottom:18px; line-height:1.5; }
.btn { display:block; text-align:center; padding:12px; border:1px solid var(--ink); text-decoration:none; font-size:.92rem; font-weight:500; margin-bottom:10px; }
.btn.solid { background:var(--ink); color:var(--paper); }
.sources { padding:28px 0 40px; border-top:1px solid var(--rule); display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; }
.sources .lab { font:italic 400 1rem var(--serif); color:var(--muted); }
.sources ul { margin:0 0 10px; padding-left:1.1em; font-size:.9rem; color:var(--muted); overflow-wrap:anywhere; }
.sources p { margin:0; font-size:.9rem; }
.nearby { border-top:1px solid var(--rule); padding:40px 0 56px; }
.nearby h2 { font:400 1.6rem var(--serif); margin:0 0 18px; }
.nearby ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.nearby li { border-top:1px solid var(--ink); padding-top:12px; }
.nearby a { text-decoration:none; } .nearby a:hover b { text-decoration:underline; text-underline-offset:3px; }
.nearby b { display:block; font:500 1.05rem/1.3 var(--serif); }
.nearby span { font:italic 400 .88rem var(--serif); color:var(--muted); }

/* Prose pages (about, placeholders) */
.prose { padding:56px 0 72px; max-width:40em; }
.prose h2 { font:400 1.7rem/1.15 var(--serif); margin:44px 0 12px; }
.prose p, .prose li { font-size:1.04rem; line-height:1.75; }
.table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem; }
.table td, .table th { text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.table th { font:italic 400 .9rem var(--serif); color:var(--muted); border-bottom-color:var(--ink); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* Map page: full-bleed frame */
body.mapbody { height:100vh; display:flex; flex-direction:column; }
.mapframe { flex:1; display:flex; flex-direction:column; margin:20px; border:1px solid var(--rule); position:relative; min-height:0; }
.mapframe .hdr { padding:18px 28px 16px; }
.work { flex:1; display:grid; grid-template-columns:360px minmax(0,1fr); min-height:0; border-top:1px solid var(--rule); }
.side { border-right:1px solid var(--rule); display:flex; flex-direction:column; min-height:0; }
.side .top { padding:22px 24px 16px; border-bottom:1px solid var(--rule); }
.side h1 { font-size:1.9rem; margin:0 0 4px; }
.side .sub { font:italic 400 .95rem var(--serif); color:var(--muted); margin:0 0 16px; }
.side .search { max-width:none; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.chip { font:400 .82rem var(--sans); padding:5px 11px; border:1px solid var(--rule); background:transparent; color:var(--muted); cursor:pointer; border-radius:999px; }
.chip[aria-pressed="true"] { border-color:var(--ink); color:var(--ink); }
.count { padding:10px 24px; font:italic 400 .9rem var(--serif); color:var(--muted); border-bottom:1px solid var(--rule); }
.results { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; }
.results li { border-bottom:1px solid var(--rule); }
.results li a { display:block; padding:14px 24px; text-decoration:none; }
.results li:hover { background:rgba(35,48,42,.035); }
.results li.on { background:rgba(163,52,42,.06); box-shadow:inset 3px 0 0 var(--red); }
.results b { display:block; font:500 1.08rem/1.25 var(--serif); }
.results span { font-size:.9rem; color:var(--muted); }
#map { background:#efeadf; min-height:0; }
.leaflet-container.basemap { background:#d9e5e8 !important; }  /* the sea: hillshade tiles are plain white over water */
.basemap .leaflet-map-pane { isolation:isolate; }
/* Blend only, no filter or opacity on the pane or its tiles: either makes the browser drop the blend */
.basemap .leaflet-tile-pane { mix-blend-mode:multiply; }
.basemap .leaflet-labels-pane { opacity:.8; }
.leaflet-container { font-family:var(--sans); }
.leaflet-control-attribution { font-size:10px; line-height:1.3; max-width:70%; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--paper); color:var(--ink); border-radius:2px; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.leaflet-popup-content { font:400 .9rem/1.45 var(--sans); margin:12px 16px; }
.leaflet-popup-content b { display:block; font:500 1.1rem/1.25 var(--serif); }
.leaflet-popup-content a { color:var(--green); }
.cl { background:var(--paper); border:1.2px solid var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font:500 .78rem var(--sans); color:var(--ink); }
.empty { padding:36px 24px; text-align:center; color:var(--muted); font:italic 400 .95rem var(--serif); }
.empty img { width:120px; display:block; margin:0 auto 12px; }

/* History */
.journey { padding:56px 0; border-bottom:1px solid var(--rule); }
#journey svg { display:block; width:100%; height:auto; }
#journey .sea { fill:#d6e2e4; }
#journey .land { fill:#eef0dc; stroke:var(--ink); stroke-width:.6; }
#journey .grat { fill:none; stroke:#5b7a80; stroke-width:.35; stroke-dasharray:2 4; opacity:.35; }
#journey .route { fill:none; stroke:var(--red); stroke-width:1.6; stroke-dasharray:5 4; }
#journey .stop circle { fill:var(--paper); stroke:var(--red); stroke-width:1.4; }
#journey .stop .lead { stroke:var(--ink); stroke-width:.6; opacity:.6; }
#journey .stop text.n { font:500 9px var(--sans); fill:var(--ink); text-anchor:middle; dominant-baseline:central; }
#journey .stop text.l { font:italic 400 13px var(--serif); fill:var(--ink); paint-order:stroke; stroke:var(--paper); stroke-width:3px; }
.stops { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 28px; }
.stops li { padding:10px 0 0; border-top:1px solid var(--ink); }
.stops b { display:block; font:500 1rem/1.3 var(--serif); }
.stops span { font:italic 400 .88rem var(--serif); color:var(--red); }
.stops p { margin:2px 0 0; font-size:.88rem; color:var(--muted); }
.timeline { padding:56px 0 24px; }
.keyrow { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 32px; font:italic 400 .9rem var(--serif); color:var(--muted); }
.key i { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:8px; vertical-align:-1px; }
.timeline ol { list-style:none; margin:0; padding:0; position:relative; }
.timeline ol::before { content:""; position:absolute; left:163px; top:0; bottom:0; width:1px; background:var(--rule); }
.timeline .era { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:40px 0 16px 190px; }
.timeline .era h2 { font:400 2rem/1.1 var(--serif); margin:0; }
.timeline .era img { height:88px; width:auto; }
.timeline .ev { display:grid; grid-template-columns:150px minmax(0,1fr); gap:40px; padding:18px 0; position:relative; }
.timeline .ev .d { text-align:right; font:400 1.25rem/1.3 var(--serif); color:var(--red); }
.timeline .ev::after, .key i { background:var(--red); border:1.5px solid var(--red); }
.timeline .ev::after { content:""; position:absolute; left:158px; top:24px; width:11px; height:11px; border-radius:50%; box-sizing:border-box; }
.timeline .ev.likely::after, .key.likely i { background:var(--blossom); }
.timeline .ev.debated::after, .key.debated i { background:var(--paper); }
.timeline .ev.legend::after, .key.legend i { background:var(--paper); border-style:dashed; border-color:var(--muted); }
.timeline .ev h3 { font:500 1.2rem/1.3 var(--serif); margin:0 0 6px; }
.timeline .cert { font:italic 400 .85rem var(--serif); color:var(--muted); margin-left:12px; }
.timeline .ev p { margin:0 0 6px; max-width:40em; }
.timeline .caveat { font:italic 400 .95rem/1.5 var(--serif); color:var(--muted); }
.src { font-size:.8rem; color:var(--muted); } .src a { color:var(--muted); }
.debates, .myths { padding:56px 0; border-top:1px solid var(--rule); }
.debates > h2, .myths > h2 { font:400 2.2rem/1.1 var(--serif); margin:0 0 28px; }
.debates .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 56px; }
.debates h3 { font:500 1.2rem/1.3 var(--serif); margin:0 0 8px; border-top:1px solid var(--ink); padding-top:14px; }
.myths ul { list-style:none; margin:0; padding:0; columns:2 380px; column-gap:56px; }
.myths li { break-inside:avoid; padding:0 0 22px; }
.myths b { font:italic 500 1.1rem/1.35 var(--serif); }
.myths li p { margin:6px 0; }
@media (max-width:860px) {
  .debates .grid { grid-template-columns:1fr; } .stops { grid-template-columns:1fr 1fr; }
  .timeline ol::before { left:7px; } .timeline .era { padding-left:28px; } .timeline .era img { display:none; }
  .timeline .ev { grid-template-columns:1fr; gap:4px; padding-left:28px; } .timeline .ev .d { text-align:left; }
  .timeline .ev::after { left:2px; top:22px; }
}

/* County map */
.countymap { padding:48px 0 8px; border-bottom:1px solid var(--rule); }
#cmap { height:clamp(360px,60vh,560px); border:1px solid var(--rule); background:#efeadf; }
.ledger li.on { background:rgba(163,52,42,.06); box-shadow:inset 3px 0 0 var(--red); }
.ledger li[data-id] { transition:background .15s; padding-left:6px; margin-left:-6px; }

/* Events finder */
.finder { padding:48px 0 56px; }
.finder .controls { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end; }
.finder .search { flex:1 1 280px; max-width:360px; }
.finder label { display:flex; flex-direction:column; gap:4px; font:italic 400 .9rem var(--serif); color:var(--muted); }
.finder select { font:400 .95rem var(--sans); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink); padding:8px 24px 8px 0; min-width:180px; }
.finder .chips { margin-top:20px; }
.finder .count { padding:16px 0 10px; border:0; margin:0; }
.evwork { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); border-top:1px solid var(--ink); height:clamp(460px,72vh,720px); }
#evmap { background:#efeadf; border-right:1px solid var(--rule); min-height:0; }
.evlist { list-style:none; margin:0; padding:0; overflow-y:auto; min-height:0; }
.evlist li { display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding:16px 20px; border-bottom:1px solid var(--rule); cursor:pointer; }
.evlist li[hidden] { display:none; }
.evlist li:hover { background:rgba(35,48,42,.035); }
.evlist li.on { background:rgba(163,52,42,.06); box-shadow:inset 3px 0 0 var(--red); }
.when { text-align:center; border:1px solid var(--rule); padding:6px 0 7px; align-self:start; }
.when b { display:block; font:400 1.7rem/1 var(--serif); color:var(--red); }
.when span { font:italic 400 .82rem var(--serif); color:var(--muted); }
.when.usual b { font-size:1.2rem; color:var(--ink); padding-top:4px; }
.what b { display:block; font:500 1.08rem/1.3 var(--serif); }
.what b a { text-decoration:none; } .what b a:hover { text-decoration:underline; text-underline-offset:3px; }
.what span { display:block; font-size:.86rem; color:var(--muted); }
.what .k { font:italic 400 .86rem var(--serif); color:var(--green); }
.what p { margin:6px 0 0; font-size:.92rem; }
.what .dist:empty { display:none; } .what .dist { color:var(--red); font-style:italic; font-family:var(--serif); }
.evpin { width:12px; height:12px; border-radius:50%; background:var(--red); border:1.5px solid var(--paper); box-shadow:0 0 0 1px rgba(35,48,42,.25); }
.evpin.usual { background:var(--paper); border:2px solid var(--red); box-shadow:none; }

@media (max-width:860px) {
  .evwork { grid-template-columns:1fr; grid-template-rows:50vh auto; height:auto; }
  #evmap { border-right:0; border-bottom:1px solid var(--rule); }
  .evlist { max-height:none; overflow:visible; }
  .evlist li { padding:14px 0; }
}

@media (max-width:860px) {
  .plate { margin:12px; } .hdr { flex-direction:column; align-items:flex-start; gap:14px; padding:20px 0 16px; } .nav { gap:18px; flex-wrap:wrap; font-size:.88rem; }
  .opening, .title, .maker-title, .body, .sources, .pair, .entry, .note { grid-template-columns:1fr; }
  .opening { padding:48px 0 56px; } .opening figure, .title figure { margin-left:0; max-width:220px; }
  .ways { grid-template-columns:1fr; } .way { padding:32px 0 !important; } .way + .way { border-left:0; border-top:1px solid var(--rule); }
  .entry, .note { gap:16px; padding:56px 0; }
  .maker-title figure { display:none; }
  .facts, .nearby ol { grid-template-columns:1fr 1fr; } .facts div:nth-child(3) { padding-left:0; border-left:0; }
  .body aside { position:static; order:-1; }
  .buy li { flex-direction:column; gap:2px; } .buy li span { text-align:left; }
  .pair > section { padding-right:0; } .pair > section + section { border-left:0; border-top:1px solid var(--rule); padding-left:0; }
  .mapframe { margin:0; border:0; } .mapframe > .mark { display:none; }
  .work { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 42vh; }
  .side { order:2; border-right:0; border-top:1px solid var(--rule); }
  .side .top { padding:14px 16px; } .side h1, .side .sub { display:none; }
  .results li a { padding:12px 16px; } .count { padding:8px 16px; }
}

/* Short screens (a phone held sideways): let the map page scroll and keep the map usable */
@media (max-height:560px) {
  body.mapbody { height:auto; min-height:100vh; }
  .work { grid-template-columns:1fr; grid-template-rows:75vh auto; }
  #map { min-height:260px; }
  .side { order:2; border-right:0; border-top:1px solid var(--rule); }
  .results { overflow:visible; }
}

/* Suggest a maker */
.suggest { display:grid; gap:18px; margin:24px 0 8px; max-width:34em; }
.suggest label { display:grid; gap:6px; font:500 .92rem var(--sans); }
.suggest .opt { font-weight:400; color:var(--muted); }
.suggest input:not([type=radio]), .suggest textarea { font:400 1rem var(--sans); padding:11px 12px; border:1px solid var(--rule); background:#fff; color:var(--ink); border-radius:2px; width:100%; }
.suggest textarea { resize:vertical; }
.suggest .kind { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.suggest .kind legend { font:500 .92rem var(--sans); margin-bottom:8px; padding:0; }
.suggest .kind label { display:flex; gap:8px; align-items:center; font-weight:400; }
.suggest .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.suggest button { justify-self:start; font:500 .95rem var(--sans); background:var(--green); color:#fff; border:0; padding:12px 22px; border-radius:2px; cursor:pointer; }
.suggest button:hover { background:var(--ink); }
.suggest .note { font-size:.9rem; color:var(--muted); line-height:1.6; margin:0; }


/* Sticky header: stays put while you scroll, and shrinks once you are away from the top */
:root { --gut:clamp(16px,5vw,64px); }
html { scroll-padding-top:96px; }
.inner > .hdr { position:sticky; top:0; z-index:1200; background:var(--paper); margin:0 calc(-1 * var(--gut)); padding-inline:var(--gut);
  transition:padding .18s ease, box-shadow .18s ease; }
.inner > .hdr .logo img { transition:width .18s ease, height .18s ease; }
.inner > .hdr .logo span { transition:font-size .18s ease; }
html.scrolled .inner > .hdr { padding-block:10px 8px; box-shadow:0 8px 16px -12px rgba(36,72,58,.45); }
html.scrolled .inner > .hdr .logo img { width:38px; height:38px; }
html.scrolled .inner > .hdr .logo span { font-size:1.5rem; }
@media (max-width:860px) {
  html { scroll-padding-top:64px; }
  html.scrolled .inner > .hdr { flex-direction:row; align-items:center; gap:12px; padding-block:8px 6px; }
  html.scrolled .inner > .hdr .logo span { display:none; }
  html.scrolled .inner > .hdr .logo img { width:30px; height:30px; }
  html.scrolled .inner > .hdr .nav { gap:12px; font-size:.8rem; flex-wrap:nowrap; }
}
@media (prefers-reduced-motion:reduce) { .inner > .hdr, .inner > .hdr .logo img, .inner > .hdr .logo span { transition:none; } }

/* Fixes from the 29 Sep site review */
[hidden] { display:none !important; }
.msg { margin:10px 0 0; font:italic 400 .98rem/1.4 var(--serif); color:var(--red); }
.msg:empty { display:none; }
.facts { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.nav a.desk { }
@media (max-width:860px) {
  .nav a.desk { display:none; }
  /* facts: a website address gets a row of its own so it never breaks mid-word */
  .facts div + div { padding-left:0; border-left:0; border-top:1px solid var(--rule); }
  .facts div { padding-top:16px; padding-bottom:16px; }
  .facts dd { overflow-wrap:break-word; }
  /* maker page: the buttons come first, then the address, then the little map */
  .body aside { display:flex; flex-direction:column; }
  .body aside .btn { order:1; margin-bottom:10px; }
  .body aside address { order:2; margin:6px 0 14px; }
  .body aside .mini { order:3; }
  .body aside .cap { order:4; }
  /* map page: compact header, search and filters above the map, then the list */
  .mapbody .hdr { flex-direction:row; align-items:center; gap:12px; padding:8px 16px; }
  .mapbody .hdr .logo span { display:none; }
  .mapbody .hdr .logo img { width:34px; height:34px; }
  .mapbody .hdr .nav { gap:14px; font-size:.9rem; flex-wrap:nowrap; }
  body.mapbody { height:auto; min-height:100vh; }
  .work { display:flex; flex-direction:column; flex:none; }
  .side { display:contents; }
  .side .top { order:1; border-top:1px solid var(--rule); }
  #map { order:2; height:56vh; min-height:300px; flex:none; }
  .count { order:3; }
  .results { order:4; overflow:visible; flex:none; }
}
.chip.on { border-color:var(--ink); color:var(--ink); }

/* Phones: shorter map credit (the full one is on the About page), roomier tap targets, nav that wraps instead of clipping */
@media (max-width:640px) {
  .leaflet-control-attribution { font-size:9px; max-width:55%; opacity:.85; }
  .nav a { padding:6px 0; }
  .mapbody .hdr .nav { flex-wrap:wrap; gap:2px 10px; font-size:.82rem; }
  footer .links a { display:inline-block; padding:6px 0; }
}

/* County pages with apples, events and places to drink: three side by side, stacked on narrow screens */
.pair.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pair.three > section { grid-template-columns:1fr; gap:14px; padding:40px 28px 40px 0; }
.pair.three > section + section { padding:40px 28px; }
.pair.three > section:last-child { padding-right:0; }
.pair.three img { width:90px; }
@media (max-width:860px) {
  .pair.three { grid-template-columns:1fr; }
  .pair.three > section, .pair.three > section + section, .pair.three > section:last-child { padding:32px 0; }
}
/* Apples: the makers who name a variety */
.named { font-size:.88rem; color:var(--muted); } .named b { font-weight:500; color:var(--ink); margin-right:4px; }
.named details { display:inline; } .named summary { display:inline; cursor:pointer; color:var(--deep); }
/* Phones: six menu items on one line where they fit */
@media (max-width:640px) { .nav { gap:4px 10px; font-size:.8rem; } .mapbody .hdr .nav { gap:2px 8px; font-size:.78rem; } }