:root{
  --ink:#1f1d19; --muted:#6f685c; --line:#e5dfd3; --bg:#faf7f1; --panel:#fffdf9;
  /* green-deep is the numbers band and the call-to-action block. Kept a
     shade lighter and warmer than the obvious dark green, which reads
     gloomy at that size. */
  --green:#2f6344; --green-soft:#e6efe8; --green-deep:#3a6d4a;
  --warn:#8a5320; --warn-soft:#fbeedd;
  --grey:#57534a; --grey-soft:#eeeae1;
  --link:#2f6344;
  --radius:12px;
  /* Inter - the typeface refactoringui.com uses. Loaded from Google Fonts,
     with the system stack behind it so the page still reads if it fails. */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* There is no second typeface. Source Serif used to set the four box
     headings on the home page in capitals; on 31 August the operator replaced
     that with the same treatment as the state names on the cards, which is
     Inter. Nothing was left using the serif, so it is no longer downloaded.
     To bring it back: add
       family=Source+Serif+4:opsz,wght@8..60,600
     to the Google Fonts address near the top of this file. */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
a{color:var(--link)}
img{max-width:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:20}

header.site{background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:5}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-top:15px;padding-bottom:15px}
/* Once the bar wraps onto more than one line, 15px underneath is too tight.
   The "What to take" pill is a big solid green shape and it sits almost on
   the header's bottom edge. A text link would have got away with it; a filled
   pill does not. Only the narrow screen changes - the wide one was already
   signed off and is left exactly as it was. */
@media(max-width:820px){
  .bar{padding-top:15px;padding-bottom:8px}
}
.brand{font-weight:600;font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
/* THE MENU MUST BE ABLE TO WRAP ONTO TWO LINES WITHOUT BREAKING.
   It could not before, and the fault was invisible on a wide screen because
   the row fitted on one line. Two things were wrong:
     1. Every link carried margin-left:20px, INCLUDING THE FIRST. Whichever
        link started a second line was indented by 20px and looked misaligned.
     2. The "What to take" pill is an ordinary inline link with 8px of padding
        above and below. Vertical padding on an inline element does not push
        the lines apart - so on two lines the green pill overlapped the row
        above it.
   A flex row with a gap fixes both. Flex also blockifies its items, which is
   what makes the pill's padding behave. The gap is 20px across and 8px down,
   so the spacing on a wide screen is unchanged from before. */
header nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
header nav a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink)}
header nav a:hover{color:var(--green)}
/* The kit link is the one item in the bar that is not a state, and it is the
   one that earns money. Drawn as a filled pill so it reads as a separate
   thing rather than a sixth state. It says the same phrase as the two buttons
   on the home page and as the heading of the page itself - one wording
   everywhere, so nobody wonders whether they are three different pages. */
/* The 6px is on top of the row's 20px gap, keeping the 26px it had before so
   the pill still sits slightly apart from the five state names. */
.nav-gear{color:#fff!important;font-weight:600;margin-left:6px;
  display:inline-flex;align-items:center;
  background:var(--green);border:1px solid var(--green);border-radius:999px;
  padding:8px 20px;line-height:1.15;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease}
.nav-gear:hover{background:#43815c;border-color:#43815c;color:#fff!important}

/* hero: outdoorsy, but not eating the whole screen */
.hero{position:relative;height:clamp(220px,30vw,340px);overflow:hidden;background:var(--line)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,12,.12) 0%,rgba(18,16,12,.34) 50%,rgba(18,16,12,.80) 100%)}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding-bottom:22px;color:#fff}
.hero-text h1{color:#fff;margin:4px 0 0;text-shadow:0 1px 18px rgba(0,0,0,.4)}
.eyebrow{margin:0;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.eyebrow a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.eyebrow span{opacity:.75;margin-left:10px;letter-spacing:.06em;text-transform:none;font-weight:400}

/* the strip of quick answers directly under the hero */
.chipbar{background:var(--panel);border-bottom:1px solid var(--line)}
.chipbar .wrap{display:flex;flex-wrap:wrap;gap:8px;padding-top:13px;padding-bottom:13px}
.chip{font-size:13px;font-weight:600;padding:5px 13px;border-radius:999px;white-space:nowrap}
.chip-free{background:var(--green-soft);color:var(--green)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-unknown{background:var(--grey-soft);color:var(--grey)}
.chip-plain{background:var(--grey-soft);color:var(--grey);font-weight:500}

/* home page masthead: an image with the words sitting on it, not a
   full-screen photograph. About half the height of the window. */
.mast{position:relative;min-height:clamp(430px,60vh,600px);display:flex;align-items:flex-end;
  overflow:hidden;background:#2a2622}
.mast>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* keep the photograph bright - darken only the strip the words sit on */
.mast-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,13,10,.06) 0%,rgba(14,13,10,.10) 42%,rgba(14,13,10,.55) 76%,rgba(14,13,10,.86) 100%)}
.mast-text{position:relative;padding-top:70px;padding-bottom:46px;color:#fff;width:100%}
/* headline and the line under it share one width, so the paragraph can
   never run wider than the words above it */
.mast-text h1,.mast-text .lede{max-width:640px}
/* Typography matched to refactoringui.com's headline: Inter at a light
   weight, very tight letter spacing, roomy line height. Sentence case. */
.mast-text h1{color:#fff;margin:0 0 18px;text-transform:none;
  font-size:clamp(38px,5.8vw,66px);line-height:1.14;letter-spacing:-.045em;font-weight:500;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
/* The masthead line is display type sitting on a photograph, not body text.
   It keeps its flush left edge - an indent there reads as a mistake. */
.mast-text .lede{text-indent:0;color:rgba(255,255,255,.92);margin-bottom:26px;font-size:17.5px;line-height:1.6;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
.mast-actions{margin:0}
.mast-credit{position:absolute;right:22px;top:16px;margin:0;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
/* NOTE: the two masthead button styles live further down, immediately after
   the plain .btn rule they have to override. They used to sit here, above it,
   which meant .btn won every time and quietly cancelled both of them. */

/* the numbers band, sitting between the masthead and the states */
.statband{background:var(--green-deep);color:#fff}
.statband-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:34px;padding-top:44px;padding-bottom:44px}
.stat{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.stat strong{font-size:clamp(40px,4.8vw,58px);line-height:1;letter-spacing:-.045em;font-weight:600;
  color:#fff;font-variant-numeric:tabular-nums}
.stat span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.74);max-width:22ch}

.section-lead{font-size:clamp(27px,3.1vw,36px);letter-spacing:-.04em;font-weight:600;
  line-height:1.18;margin-top:48px}

h1{font-size:clamp(30px,3.8vw,42px);line-height:1.16;letter-spacing:-.04em;margin:26px 0 10px;font-weight:600}
h2{font-size:22px;line-height:1.32;letter-spacing:-.028em;margin:34px 0 10px;font-weight:600}
h3{font-size:16px;margin:0 0 10px;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 15px}
/* Paragraphs are indented on the first line, the way a printed book does it,
   EXCEPT the first paragraph of a block. An indent is a signal saying "a new
   paragraph starts here", and the first one needs no signal because nothing
   comes before it. The summary line under a page heading is a first
   paragraph, so it stays flush left. */
.lede{font-size:19px;line-height:1.55;color:#3f3a32;max-width:62ch}
.small{font-size:14px;color:var(--muted)}
.count{font-weight:500;color:var(--muted);font-size:15px}
.crumbs{font-size:13.5px;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--muted)}
article p{max-width:70ch}
main{padding-bottom:16px}

/* ---- the shape of a campsite page's writing -------------------------------
   Subheadings inside "About this place" and "Getting there". They are a size
   and a colour below the black h2 headings, so the page reads as sections
   inside sections rather than as one long ladder of equal headings. */
.sub{font-size:16.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  margin:26px 0 9px;padding-top:2px}
h2 + .sub{margin-top:14px}
/* "Drinking water: ..." - the agency's own bullet points, put back. The label
   is bold so somebody scanning for the one that matters finds it without
   reading the paragraph. */
article p.labelled{margin-bottom:11px;text-indent:0}
article p.labelled strong{font-weight:600}

/* Numbered driving directions. The number sits outside the text so the steps
   line up down the left edge and you can find your place again after looking
   up at the road. */
ol.steps{max-width:70ch;margin:0 0 16px;padding-left:26px}
ol.steps li{margin-bottom:9px;padding-left:4px;line-height:1.62}
ol.steps li::marker{font-weight:600;color:var(--muted)}
/* The agency's own bullet points, where it wrote them without labels. */
ul.points{max-width:70ch;margin:0 0 16px;padding-left:22px}
ul.points li{margin-bottom:8px;line-height:1.62}

/* THE FIRST-LINE INDENT, owed on the campsite pages since 31 August. It is on
   the home page and the state pages already. Same rule as there: an indent
   says "a new paragraph starts here", and the first paragraph of any block
   needs no such signal because nothing comes before it. A paragraph that
   follows a heading or a list is a first paragraph too. */
article p{text-indent:1.9em}
article > p:first-of-type,
article h2 + p, article h3 + p, article ol + p, article ul + p,
article dl + p, article p.labelled, article .roadnote, article .coords,
article .actions, article .small{text-indent:0}

/* two columns on a listing, so the page reads full rather than empty */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.rail{position:sticky;top:22px;display:flex;flex-direction:column;gap:22px;padding-top:26px}
.railbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.railbox .small{margin-bottom:0}

.cost{display:flex;flex-direction:column;gap:3px;padding:15px 18px;border-radius:var(--radius);margin:26px 0 4px}
.cost strong{font-size:18px;letter-spacing:-.01em}
.cost span{font-size:14px;line-height:1.5;opacity:.92}
.cost-free{background:var(--green-soft);color:var(--green-deep)}
.cost-warn{background:var(--warn-soft);color:var(--warn)}
.cost-unknown{background:var(--grey-soft);color:var(--grey)}

dl.facts{margin:14px 0 0;border-top:1px solid var(--line)}
dl.facts>div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:11px 2px;border-bottom:1px solid var(--line)}
dl.facts dt{color:var(--muted);font-size:14.5px;margin:0}
dl.facts dd{margin:0;font-weight:600;font-size:15.5px}

.coords{font-size:14.5px;color:var(--muted)}
.coords code{background:var(--panel);border:1px solid var(--line);padding:3px 8px;border-radius:6px;font-size:13.5px;color:var(--ink)}
.actions{margin-top:16px}

.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:999px;font-size:14.5px;font-weight:600;margin:0 7px 7px 0;
  border:1px solid var(--green);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-quiet{background:transparent;color:var(--green)}
.btn-quiet:hover{background:var(--green-soft);color:var(--green-deep)}

/* The two buttons on the home page masthead. Both are the same green and the
   same size - a matching pair, decided by the operator on 31 August. This
   rule MUST stay below the plain .btn rule above, because it overrides it and
   CSS gives the last rule of equal weight the final say. */
.btn-big{padding:14px 26px;font-size:15.5px}

.kitbox{background:var(--green-soft);border-radius:var(--radius);padding:18px 20px;margin:30px 0}
.kitbox h3{color:var(--green-deep)}
.kitbox p{margin-bottom:10px;font-size:15px;color:var(--green-deep)}

.report{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:34px 0 20px}
.report h2{margin-top:0}
.report-actions{display:flex;flex-wrap:wrap;gap:6px}
.report-thanks{color:var(--green);font-weight:600;margin-bottom:0}

/* sourcing: present, once, folded away */
.prov{border-top:1px solid var(--line);padding-top:14px;margin-top:26px}
.prov summary{font-size:13.5px;color:var(--muted);cursor:pointer}
.prov p{font-size:13.5px;color:var(--muted);margin:10px 0 0}

/* EVERY ROW THE SAME SHAPE. The name gets its own line, then the cost tag and
   the distance on the line under it. This used to be one flex line for all
   three, so the layout changed depending on how long the name was: short names
   put the tag alongside, long names pushed it below. The operator marked four
   rows on one screenshot, and they were right that it read as a mistake. */
ul.near{list-style:none;padding:0;margin:0}
ul.near li{padding:10px 0;border-bottom:1px solid var(--line)}
ul.near li:last-child{border-bottom:0}
ul.near li a{display:block;font-weight:600;text-decoration:none;font-size:14.5px;line-height:1.35;margin-bottom:6px}
ul.near li a:hover{text-decoration:underline}
.near-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dist{font-size:12.5px;color:var(--muted)}

.tag{font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap;font-weight:600}
.tag.free{background:var(--green-soft);color:var(--green)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.unknown{background:var(--grey-soft);color:var(--grey)}

/* card grid: 4-5 across on a laptop */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin:18px 0 8px}
.tile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.tile:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 6px 20px rgba(40,30,10,.07)}
.tile-img{display:block;position:relative;aspect-ratio:4/3;background:var(--line);overflow:hidden}
.tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.tile-tag{position:absolute;left:9px;bottom:9px;background:rgba(255,255,255,.94)!important;
  box-shadow:0 1px 6px rgba(0,0,0,.16)}
.tile-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.tile-name{font-weight:650;font-size:15px;line-height:1.32;letter-spacing:-.01em}
.tile-unit{font-size:12.5px;color:var(--muted);line-height:1.4}
/* The lead card in each town: two columns wide, two rows tall, carrying a few
   real sentences. It breaks up a grid of near-identical aerial photographs,
   and it puts writing on a page that was otherwise a heading and thumbnails. */
.tile-big{grid-column:span 2;grid-row:span 2}
/* The card is stretched to two grid rows, but its text does not fill that.
   Let the photograph take whatever is left over instead of leaving a band of
   empty white under the writing. */
.tile-big .tile-img{flex:1 1 auto;aspect-ratio:auto;min-height:190px}
.tile-big .tile-body{padding:15px 17px 17px;gap:7px}
.tile-big .tile-name{font-size:19px;letter-spacing:-.02em;line-height:1.25}
.tile-facts{font-size:12.5px;font-weight:600;color:var(--green-deep);line-height:1.45}
.tile-snip{font-size:13.5px;line-height:1.55;color:var(--muted)}
@media(max-width:700px){
  /* Two columns on a phone, so the big card is simply the full width. */
  .tile-big{grid-column:span 2;grid-row:auto}
  .tile-big .tile-name{font-size:17px}
}

/* How far to fuel and a shop. The single most useful fact for deciding
   whether to open a card, so it sits directly under the name. */
.tile-dist{font-size:12.5px;font-weight:600;color:var(--green-deep);line-height:1.4}
/* Past 60 road miles it is a different kind of trip, so it is coloured as a
   caution rather than as a neutral fact. */
.tile-dist-far{color:var(--warn)}
.tile-state .tile-dist{display:none}

/* state cards on the home page: big, they are the front door */
/* Five states into a three-across grid leaves two stranded on the left of
   the second row. Flex instead of grid so the short last row centres. */
.tiles-state{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin:34px 0 8px}
.tile-state{flex:0 1 calc(33.333% - 14.7px);min-width:300px}
.tile-state .tile-img{aspect-ratio:16/10}
.tile-state .tile-body{padding:16px 18px 18px}
.tile-state .tile-name{font-size:24px;font-weight:600;letter-spacing:-.035em}
.tile-state .tile-unit{font-size:14px}

/* The name of the landmark in the photograph, sitting on the picture. It is
   there so nobody thinks we are listing campsites inside a national park. */
.tile-place{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55);
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}

/* Photo credits, kept small and last. Sourcing stays quiet on this site. */
.photo-credit{font-size:12.5px;color:var(--muted);line-height:1.55;
  max-width:none;margin:40px 0 0;padding-top:16px;border-top:1px solid var(--line)}

/* What camping in this state is like. Sits between the summary line and the
   first advertisement, on purpose: an advert inside real writing is worth
   more than one stuck at the top of a page nobody stayed on.
   The writing takes the left, the photograph fills the right - a column of
   text on its own left half the page empty.
   The right column is a FIXED 336px, which is the width of the advertisement
   under the photograph. That makes the picture and the advert exactly the same
   width with their edges lined up. Set as a share of the page instead and the
   column comes out 412px, so the picture overhangs the advert by 76px and the
   pair reads as a mistake. If the advert size ever changes, change this too. */
.state-lead{display:grid;grid-template-columns:minmax(0,1fr) 336px;
  gap:34px;align-items:start;margin:26px 0 34px}
/* The heading sits inside the left column, so its own top margin would push
   the whole grid down twice. The 26px moved to .state-lead above instead. */
.state-main>h1{margin-top:0}
.state-intro{margin-top:24px}
.state-intro p{font-size:16.5px;line-height:1.68;margin:0 0 15px;max-width:64ch;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-indent:2.2em}
.state-intro p:first-child{text-indent:0}
.state-intro p:last-child{margin-bottom:0}
.state-intro p:first-child{font-size:17.5px}
/* The right-hand column: photograph, caption, then a 336x280 square.
   The photo used to follow you down the page. It no longer does, on purpose -
   this column is already the exact shape that square is built for, and an
   advert here sits high on the page beside real writing, which is the best
   position an advert can have. The photo only followed for three paragraphs,
   so very little was given up. */
.state-aside{display:flex;flex-direction:column;gap:22px}
.state-aside .ad{margin:0}
/* 9px, so the TOP OF THE PICTURE lines up with the TOP OF THE CAPITAL F in
   the heading beside it, not with the invisible box around that line of type.
   The heading is Inter at 42px on a 1.16 line, which leaves about 9px of empty
   space above the letters. Aligning to the box instead leaves the picture
   looking 9px too high. Recheck this if the heading size or typeface changes. */
.state-shot{margin:9px 0 0}
/* height:auto MATTERS. The img tag carries width="800" height="500" so the
   browser reserves the right space while loading, but that height then wins
   over aspect-ratio unless height is handed back to auto. Without this line
   the picture renders 412 by 500 - taller than it is wide, from a landscape
   photograph. */
.state-shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--radius);border:1px solid var(--line)}
.state-shot figcaption{display:flex;flex-direction:column;gap:2px;margin-top:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.state-shot figcaption span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
/* On a narrow screen the three pieces reorder: photograph, then the writing,
   then the advert. display:contents dissolves the right-hand column so its
   two pieces can be placed separately - otherwise the advert would be dragged
   above the writing along with the photograph, which is the one place an
   advert should never be. */
@media(max-width:860px){
  .state-lead{grid-template-columns:1fr;gap:24px}
  .state-main,.state-aside{display:contents}
  .state-main>h1{order:1}
  .state-main>.lede{order:2}
  .state-shot{order:3;margin:0}
  .state-intro{order:4;margin-top:0}
  .state-aside .ad{order:5;margin:2px auto 0}
}

/* The list of towns at the top of a state page.
   With script running these are FILTERS: choosing one hides every other town,
   so the page becomes short instead of merely signposted. With no script they
   stay ordinary jump links and every town is on the page. */
.lead-note{max-width:74ch;margin-bottom:16px}
.townjump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.townjump a{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease}
.townjump a:hover{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}
.townjump a span{font-size:12.5px;font-weight:500;color:var(--muted)}
.townjump a:hover span{color:var(--green-deep)}
/* The town you are looking at. Filled in, so you can tell at a glance what
   you are being shown and that the rest is hidden rather than missing. */
.townjump a.on{background:var(--green);border-color:var(--green);color:#fff}
.townjump a.on span{color:rgba(255,255,255,.75)}
/* "All places" only appears once script is running, because without script
   everything is showing anyway and the button would do nothing. */
.townjump .tj-all{display:none}
.js-filters .townjump .tj-all{display:inline-flex}

.is-hidden{display:none}

/* The second row of filters, narrowing what is inside the chosen town.
   Hidden without script, because the buttons would do nothing. */
/* Deliberately NOT shaped like the town buttons above.
   The town buttons are a list you pick ONE of. These are switches you can
   turn on several at once. Same shape for both jobs made the second row read
   as more of the first. So: a tinted band to bind them together, square
   corners rather than pills, and a tick box on each one. */
.narrow{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px;
  background:var(--grey-soft);border-radius:var(--radius);padding:12px 16px}
.js-filters .narrow{display:flex}
.narrow-label{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);margin-right:4px}
/* Type part of a name. With 177 places in a state this is often the fastest
   way in - somebody who half-remembers "Deadman Bar" should not have to hunt
   through 23 towns for it.
   It sits up beside the heading, in the space the explaining paragraph leaves
   empty on a wide screen, rather than crowding the filter row. */
/* Centred against the paragraph beside it, so it sits in the middle of that
   space rather than floating at the top of it with a hole underneath. */
.towns-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);
  gap:30px;align-items:center;margin-bottom:24px}
.towns-head .section-lead{margin-top:0}
/* The paragraph's own bottom margin is dropped, because the space before the
   town buttons is set once here for both columns. */
.towns-head .lead-note{margin-bottom:0}
/* Kept deliberately short. It used to sit almost on top of the town buttons,
   with no air between the two sets of controls. */
.narrow-find{display:none;flex-direction:column;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px 15px}
.js-filters .narrow-find{display:flex}
.narrow-find-label{font-size:12.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted)}
.narrow-find input{font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;width:100%}
.narrow-find-hint{font-size:12px;line-height:1.4;color:var(--muted)}
@media(max-width:760px){
  .towns-head{grid-template-columns:1fr;gap:0;margin-bottom:18px}
  .towns-head .lead-note{margin-bottom:16px}
}
.narrow-find input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.narrow button{display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:7px 13px;color:var(--grey);
  transition:border-color .14s ease,background .14s ease,color .14s ease}
/* The tick box. This is the bit that says "switch", at a glance, without
   anybody having to read the label first. */
.narrow button[data-f]::before{content:'';flex:0 0 auto;width:14px;height:14px;
  border:1.5px solid #c8c0b1;border-radius:4px;background:#fff;
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  transition:background-color .14s ease,border-color .14s ease}
.narrow button[data-f].on::before{background-color:var(--green);border-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.4L9.6 3.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.narrow button:hover{border-color:var(--green);color:var(--green-deep)}
.narrow button.on{background:var(--green-soft);border-color:var(--green);color:var(--green-deep)}
.narrow-clear{color:var(--warn)!important;border-color:transparent!important;background:transparent!important}
.narrow-clear:hover{text-decoration:underline}

.narrow-count{font-size:13.5px;color:var(--muted);margin:0 0 20px}

/* What we show instead of a blank page. A dead end makes people leave, so it
   always offers the nearest thing we do have. */
.narrow-empty{background:var(--warn-soft);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 28px;max-width:70ch}
.narrow-empty p{margin:0 0 10px;font-size:15px;color:var(--warn)}
.narrow-empty p:last-child{margin-bottom:0}
.narrow-empty button{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:var(--green);color:#fff;border:1px solid var(--green);border-radius:999px;padding:8px 16px}
.narrow-empty button:hover{background:var(--green-deep);border-color:var(--green-deep)}

/* One town's worth of places. scroll-margin-top keeps the heading clear of
   the top of the window when a jump link lands on it. */
.townsec{margin:0 0 40px;scroll-margin-top:18px}
.townsec h2{margin-bottom:2px}
.townsec .small{margin-bottom:14px}

/* Once you have scrolled past the town list, this brings it back in one tap.
   Without it, changing town from the bottom of a long list means scrolling
   all the way up again - which is the thing that makes people give up. */
.townback{position:fixed;right:20px;bottom:20px;z-index:20;
  background:var(--green);color:#fff;border:1px solid var(--green);border-radius:999px;
  padding:11px 20px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 18px rgba(30,25,10,.22);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,background .14s ease}
.townback.show{opacity:1;transform:none;pointer-events:auto}
.townback:hover{background:var(--green-deep);border-color:var(--green-deep)}
@media(max-width:560px){.townback{right:12px;bottom:12px;padding:10px 16px}}

/* three panels so the home page reads full, not empty */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin:14px 0 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
/* Capitals read larger than lower case and need room to breathe, so the
   size comes down and the letter spacing opens up. */
/* Inter, capitals, bold. Two pixels down from where it started and the
   letters pulled in tighter, both at the operator's ear on 31 August. The
   spacing has gone 0.06em to 0.01em to -0.01em across the day. */
.panel h2{margin-top:0;font-weight:700;text-transform:uppercase;
  font-size:20px;letter-spacing:-.01em;line-height:1.25}
/* The same soft grey as "53 places, 28 confirmed free" under a state card,
   so the heading carries the weight and the explanation sits back.
   Justified, with hyphenation switched on - these columns are narrow, and
   justifying without hyphens tears holes between the words. */
.panel p{font-size:15px;margin-bottom:11px;color:var(--muted);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-indent:2em}
.panel p:first-of-type{text-indent:0}
.panel p:last-child{margin-bottom:0}

.cta{background:var(--green);color:#fff;border-radius:var(--radius);padding:30px 32px;margin:38px 0 8px}
.cta h2{color:#fff;margin-top:0;font-weight:700;text-transform:none;
  font-size:25px;letter-spacing:-.03em;line-height:1.25}
.cta p{color:rgba(255,255,255,.9);max-width:62ch}
.cta .btn{background:#fff;color:var(--green-deep);border-color:#fff;margin-top:6px}
.cta .btn:hover{background:var(--green-soft);border-color:var(--green-soft);color:var(--green-deep)}

/* kit page */
.disclosure{font-size:13.5px;color:var(--muted);background:var(--grey-soft);
  padding:12px 16px;border-radius:10px;max-width:none}
.kitsec{margin-bottom:14px}
.kitsec>p{max-width:70ch}
.kitlist{list-style:none;padding:0;margin:14px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.kitlist li{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kitlist strong{font-size:15.5px;letter-spacing:-.01em}
.kitlist span{font-size:14px;color:var(--muted);flex:1 1 auto}
.kitlink{font-size:14px;font-weight:600;text-decoration:none;align-self:flex-start}
.kitlink:hover{text-decoration:underline}

/* legal pages: a single readable column, nothing clever */
.legal-body{max-width:70ch}
.legal-body h2{font-size:19px;margin-top:34px}
.legal-body p{font-size:15.5px}

/* nearby landmarks and towns */
.lms{list-style:none;padding:0;margin:16px 0 14px;display:flex;flex-direction:column;gap:10px}
/* DIRECTIONS STAYS ON THE RIGHT, WHATEVER THE ROW HOLDS.
   Found by the operator on 6 September 2026, on a row reading "Petticoat Peak
   Wilderness Study Area - 56 miles by road - wilderness - free camping here
   too". Everything used to be one wrapping flex line, so when the text ran
   past the edge the Directions link was the thing that wrapped, and it landed
   underneath on the LEFT, in the position the eye reads as the start of a new
   row. Adding "free camping here too" to our own places made the rows long
   enough for it to start happening.
     The operator's instruction: "keep the directions on the right side of the
   button. if the description bulleted text cannot fit in one line, put the
   other below it."
     So the row is now two parts, not four. The text is one box that wraps
   inside itself, and the link is a second box that never wraps and never
   moves. What overflows is the description, which drops to a second line under
   the name, exactly as asked. */
.lm,.lms>li{display:flex;flex-wrap:nowrap;align-items:baseline;gap:4px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px}
/* min-width:0 is what actually lets this shrink. Without it a flex item refuses
   to go narrower than its content, and the row pushes the link off the edge
   instead of wrapping the words. */
.lm-text{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:2px 10px;overflow-wrap:anywhere}
.lm-name{font-weight:650;font-size:15.5px;letter-spacing:-.012em;flex:0 1 auto}
.lm-meta{font-size:13.5px;color:var(--muted);flex:1 1 auto}
/* Same rule as the drive to the nearest shop: past 60 road miles it is a day
   out rather than somewhere you are near, so it is coloured as a caution. */
.lm-dist-far{color:var(--warn);font-weight:600}
/* One of our own pages, sitting in the same list as the famous landmarks. The
   name is a link, which is the whole point of it being here, so it needs to
   look like one without turning the row into a different shape. */
.lm-ours .lm-name a{color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--accent-soft, rgba(0,0,0,.18))}
.lm-ours .lm-name a:hover{border-bottom-color:currentColor}
/* flex:0 0 auto so it never shrinks, margin-left:auto so it is pinned to the
   right edge even on a row whose text is short. */
.lm-go{font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  flex:0 0 auto;margin-left:auto}
.lm-go:hover{text-decoration:underline}
/* a quiet stripe on the left showing how well known the place is, without
   printing a score at the reader */
.lm-tier1{border-left:3px solid var(--green)}
.lm-tier2{border-left:3px solid #b9c9bd}
.lm-tier3{border-left:3px solid var(--line)}
.lms-town>li{border-left:3px solid var(--grey-soft)}
.straight{background:var(--warn-soft);color:var(--warn);border-radius:10px;
  padding:11px 14px;max-width:none;margin-bottom:22px}

/* What the roads around a listing are kept fit for. Written as a plain fact
   rather than a red warning: it appears on 43% of the site, and a warning on
   nearly half the pages stops being a warning. */
.roadnote{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:70ch;
  margin:16px 0 0;padding-left:14px;border-left:3px solid var(--line)}

/* An explainer borrows the road note's look on purpose. Both are the same kind
   of thing to a reader: quiet, off to one side, there if you need it.
   scroll-margin-top is what stops the note landing hard against the top of the
   window when somebody follows a link down to it. */
.explainer strong{color:var(--ink)}

/* THE GAP ABOVE IS DOING REAL WORK, and 16px was not enough of it. The
   operator, 7 September 2026: "it looks like it is a note about the boat
   ramps." On the Salmon River page the note landed one line under the last
   bullet of a list of boat ramp manners, and at that distance the eye reads
   it as the last thing in that list rather than as a note about the whole
   page. A grey box near a paragraph belongs to that paragraph. So it is
   pushed clear of whatever it follows: further from the text above it than
   the lines of that text are from each other. */
.explainer{margin-top:38px;margin-bottom:26px;scroll-margin-top:18px}

/* One paragraph per word, and they must not look like body text: no first
   line indent, and a gap between them small enough that the box still reads
   as one thing. Each carries its own id, so a link can land on the word the
   reader asked about rather than on the top of the box. */
.explainer p{text-indent:0;margin:0 0 10px;scroll-margin-top:22px}
.explainer p:last-child{margin-bottom:0}

/* A LINK TO AN EXPLANATION IS NOT A LINK TO ANOTHER PAGE, and it should not
   look like one. Green underlined text seven times in four paragraphs, which
   is what the Salmon River page has, reads as seven places to go. A dotted
   line under the words in the colour of the writing says "there is more about
   this here" and leaves the paragraph alone. */
a.classref{color:inherit;text-decoration:underline dotted;text-underline-offset:3px;
  text-decoration-color:var(--muted)}
a.classref:hover,a.classref:focus{color:var(--green);text-decoration-style:solid}

/* reader road notes */
.roadnotes{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.roadnotes>summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--green)}
.roadnotes>summary:hover{text-decoration:underline}
.rn-grid{display:flex;flex-direction:column;gap:13px;margin:14px 0 4px}
.rn-grid label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.rn-grid input,.rn-grid select,.rn-grid textarea{font-family:inherit;font-size:14.5px;
  font-weight:400;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;width:100%;max-width:520px}
.rn-grid input:focus,.rn-grid select:focus,.rn-grid textarea:focus{outline:2px solid var(--green);
  outline-offset:1px;border-color:var(--green)}
.rn-grid textarea{resize:vertical;min-height:74px}
.rn-thanks{color:var(--green-deep);font-weight:600;font-size:14.5px}

/* "Going to see something famous?" - the signpost between the state
   description and the long list of places. */
.famous{margin:6px 0 34px}
.fm-intro{font-size:16.5px;line-height:1.68;margin:0 0 20px;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* First paragraph of a block stays flush, the same rule as everywhere else. */

/* THE CARDS AND THE SMALL GREY NOTE SHARE ONE GRID. That is what lets the
   note fill the empty part of the last row instead of leaving a hole, while
   the cards themselves all keep exactly the same width. Three equal columns,
   NOT auto-fill, so a lone card never stretches into a letterbox.
   display:contents on the list dissolves it so its items and the note become
   items of the same grid. How many columns the note takes is decided at build
   time and written onto it as data-span - see famousSection in this file. */
.fm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;align-items:stretch}
.fm-list{display:contents;list-style:none;margin:0;padding:0}
.fm-list li{display:flex;flex-direction:column;gap:3px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 16px 14px}
.fm-name{font-weight:650;font-size:15.5px;letter-spacing:-.012em}
.fm-count{font-size:13px;color:var(--muted)}
.fm-closest{font-size:13.5px;line-height:1.5;margin-top:3px}
/* Sits at the TOP of its slot, level with the first line inside the card
   beside it. The 14px is the card's own top padding plus its 1px border, so
   the two first lines start at the same height rather than merely near it.
   If the card padding changes, change this to match. */
.fm-note{margin:0;max-width:none;align-self:start;font-style:italic;
  padding:14px 4px 0}
.fm-note strong{font-weight:700;color:var(--ink)}
.fm-note[data-span="1"]{grid-column:span 1}
.fm-note[data-span="2"]{grid-column:span 2}
/* A full row of its own. Nothing beside it to line up with, so the top
   padding comes off and it gets a little air above instead. */
.fm-note[data-span="3"]{grid-column:span 3;padding-top:0;margin-top:10px}

/* Narrower screens drop to two columns and then one. The count the build
   worked out is for THREE columns, so it is meaningless here - the note
   simply spans whatever the row is. These selectors are deliberately more
   specific than the data-span rules above so they win without !important. */
@media(max-width:1000px){
  .fm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-grid .fm-note[data-span]{grid-column:1/-1;padding-top:0;margin-top:10px}
}
@media(max-width:660px){
  .fm-grid{grid-template-columns:1fr}
}

/* Ad slots reserved at fixed sizes NOW so filling them later does not push
   the page around. This cannot be retrofitted cheaply. */
.ad{margin:26px auto;background:transparent}
.ad-leaderboard,.ad-footer{width:100%;max-width:728px;min-height:90px}
.ad-inline{width:100%;max-width:336px;min-height:280px}
.ad-rail{width:300px;max-width:100%;min-height:250px;margin:0}

/* Placeholder styling. Switch SHOW_AD_MOCKS off in build.js before going
   live and every one of these boxes becomes invisible reserved space. */
.ad-mock{display:flex;align-items:center;justify-content:center;
  border:1px dashed #c9c0ae;border-radius:10px;background:
  repeating-linear-gradient(135deg,rgba(201,192,174,.10) 0 8px,transparent 8px 16px)}
.ad-mock-label{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#a2977f;text-align:center;padding:8px}
.ad-mock-label strong{font-size:12.5px;letter-spacing:.16em;color:#8d8168}
.ad-mock-label em{font-style:normal;font-size:10.5px;letter-spacing:.08em;opacity:.8}

@media(max-width:960px){
  .cols{grid-template-columns:1fr;gap:0}
  .rail{position:static;flex-direction:row;flex-wrap:wrap;padding-top:0}
  .railbox{flex:1 1 280px}
  .ad-inline{margin:26px auto}
}
@media(max-width:700px){
  /* LEFT AND RIGHT ONLY, NEVER THE SHORTHAND. This was written as
     "padding:0 18px", which also sets top and bottom to zero. The header bar
     carries both .wrap and .bar, and this rule sits LATER in the stylesheet
     than .bar with the same weight - so on any screen under 700px it quietly
     wiped the bar's 15px of vertical padding. The header had been running
     with no padding at all on every phone, and a later attempt to give the
     "What to take" pill more room did nothing, because this rule undid it.
     Any rule for .wrap must only ever touch the sides. */
  .wrap{padding-left:18px;padding-right:18px}
  .ad-leaderboard,.ad-footer{max-width:320px;min-height:100px}
  dl.facts>div{grid-template-columns:1fr;gap:2px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .tile-state{flex:1 1 100%}
  .mast{min-height:480px}
  .mast-text{padding-top:56px;padding-bottom:34px}
  .mast-text .lede{font-size:16px}
  .statband-inner{grid-template-columns:repeat(2,1fr);gap:22px}
  .stat strong{font-size:34px}
  .stat span{font-size:12.5px}
  .mast-credit{display:none}
}

footer.site{margin-top:44px;padding:32px 0 40px;border-top:1px solid var(--line);background:var(--panel)}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot-name{font-weight:600;font-size:17px;margin-bottom:2px}
.foot-links{display:flex;flex-wrap:wrap;gap:16px}
.foot-links a{font-size:14px;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-legal{font-size:12.5px;color:var(--muted);margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}