/* Shore Miles (gulfofcleveland.us) v1.1.0. Trail-sign identity: National Park display type on carved-wood route signs,
   Rethink Sans for reading, sand paper ground, deep lake teal and buoy orange. References: nps.gov wayfinding, REI, Strava. */
@font-face { font-family: "National Park"; src: url("fonts/national-park-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Rethink Sans"; src: url("fonts/rethink-sans-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --sand: #f3eddf; --paper: #fbf8f1; --ink: #18262b; --ink-2: #44545a; --lake: #0f4c5c; --lake-2: #1d6b7f; --lake-3: #cfe3e6;
  --buoy: #d94e1f; --buoy-2: #b63f15; --wood: #4f3624; --wood-2: #6b4a32; --cream: #f6ecd6; --grass: #56743a; --line: #d9cfba;
  --disp: "National Park", "Trebuchet MS", sans-serif; --body: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 10px; --wrap: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 400 17px/1.6 var(--body); }
img, svg { max-width: 100%; }
a { color: var(--lake); text-underline-offset: 3px; }
a:hover { color: var(--buoy-2); }
:focus-visible { outline: 3px solid var(--buoy); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 9; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 780px; }
h1, h2, h3 { font-family: var(--disp); line-height: 1.08; letter-spacing: .005em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

/* header: the route sign */
.hd { background: var(--paper); border-bottom: 1px solid var(--line); }
.hd__in { max-width: var(--wrap); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sign { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--cream); }
.sign__board { display: inline-flex; align-items: center; gap: 10px; background: var(--wood); border-radius: 6px; padding: 6px 14px 5px; box-shadow: inset 0 0 0 2px var(--wood-2), inset 0 0 0 4px var(--wood); }
.sign__name { font: 700 22px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; }
.sign__arrow { font: 700 20px/1 var(--disp); color: #f2b544; }
.sign__post { font: 600 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--wood-2); margin: 6px 0 0 4px; }
.hd__nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; }
.hd__nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.hd__nav a[aria-current="page"] { border-color: var(--buoy); }
.hd__nav a.hd__go { background: var(--lake); color: #fff; padding: 9px 16px; border-radius: 999px; border: 0; }
.hd__nav a.hd__go:hover { background: var(--ink); }

/* buttons */
.btn { display: inline-block; font: 700 16px/1 var(--body); text-decoration: none; padding: 15px 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; margin: 0 8px 8px 0; }
.btn--buoy { background: var(--buoy); color: #fff; }
.btn--buoy:hover { background: var(--buoy-2); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--lake); color: #fff; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--quiet:hover { background: var(--ink); color: #fff; }
.btn--line { background: transparent; color: var(--buoy-2); border-color: var(--buoy-2); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--lake); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }

/* hero */
.kicker { font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--grass); margin-bottom: 14px; }
.hero { padding: 56px 0 40px; background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%); }
.hero__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.hero__h { font-size: clamp(40px, 5.4vw, 70px); font-weight: 800; color: var(--ink); }
.hero__lede { font-size: 19px; color: var(--ink-2); max-width: 34em; }
.hero__fine { font-size: 15px; color: var(--ink-2); }
.hero__eg { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: -4px; }

/* map */
.map { margin: 0; }
.map svg { display: block; width: 100%; height: auto; }
.map__lake { fill: var(--lake-3); stroke: #a9cbd1; stroke-width: 2; stroke-linejoin: round; }
.map__route { fill: none; stroke: var(--lake); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2 11; }
.map__done { fill: none; stroke: var(--buoy); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.map__town { fill: #fff; stroke: #8aa3a8; stroke-width: 2; }
.map__town.is-on { stroke: var(--lake); stroke-width: 4; }
.map__lbl { font: 600 24px var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.map__lbl.is-home { font-weight: 800; fill: var(--lake); }
.map__you circle { fill: rgba(217, 78, 31, .22); }
.map__you .map__youdot { fill: var(--buoy); stroke: #fff; stroke-width: 3; }
.map figcaption { font-size: 13px; color: var(--ink-2); text-align: right; }

/* route sign posts */
.band { background: var(--lake); color: #e8f1f2; padding: 54px 0 60px; }
.band__h { font-size: 34px; color: #fff; }
.posts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.post a { display: block; height: 100%; text-decoration: none; color: #e8f1f2; border-left: 4px solid #6aa3ae; padding: 0 0 0 16px; }
.post--free a { border-left-color: #f2b544; }
.post__board { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--wood); color: var(--cream); border-radius: 6px; padding: 12px 14px; box-shadow: inset 0 0 0 2px var(--wood-2); clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%); padding-right: 30px; }
.post__to { font: 700 19px/1.1 var(--disp); }
.post__mi { font: 800 19px/1 var(--disp); color: #f2b544; white-space: nowrap; }
.post__line { display: block; margin: 12px 0 8px; font-size: 15px; }
.post__tag { font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #9fc6cd; }
.post a:hover .post__board { background: var(--wood-2); }

/* sections */
.sec { padding: 56px 0; }
.sec__h { font-size: 30px; }
.steps { padding: 64px 0; background: var(--paper); }
.steps__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.steps__n { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--buoy); color: var(--buoy); font: 800 26px/1 var(--disp); margin-bottom: 14px; }
.steps__list h3 { font-size: 24px; }
.steps__list p { color: var(--ink-2); }
.money { padding: 64px 0; }
.money__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.prices { margin: 0; display: grid; gap: 12px; }
.prices div { display: flex; justify-content: space-between; align-items: baseline; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; }
.prices dt { font-weight: 700; }
.prices dd { margin: 0; font: 800 30px/1 var(--disp); color: var(--lake); }
.passnote { background: #fff6e6; border-left: 4px solid #f2b544; padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; font-size: 15px; }
.honest { padding: 0 0 64px; }
.pagehead { background: var(--paper); border-bottom: 1px solid var(--line); padding: 48px 0 36px; }
.pagehead__h { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; }
.pagehead__lede { font-size: 18px; color: var(--ink-2); max-width: 46em; }
.lede { font-size: 18px; color: var(--ink-2); }
.prose h2 { font-size: 26px; margin-top: 1.4em; }
.prose li { margin-bottom: .6em; }

/* routes page */
.route { padding: 48px 0; border-bottom: 1px solid var(--line); }
.route:nth-child(odd) { background: var(--paper); }
.route__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.route__h { font-size: 34px; }
.route__mi { display: block; font: 600 16px/1.4 var(--body); color: var(--ink-2); margin-top: 6px; }
.route__plan { font-weight: 700; color: var(--grass); }
.tablewrap { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
thead th { font: 700 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* forms */
.form fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.form legend { font: 700 20px/1.2 var(--disp); margin-bottom: 10px; }
.pick { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; background: var(--paper); border: 2px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.pick:has(input:checked) { border-color: var(--lake); box-shadow: 0 0 0 3px var(--lake-3); }
.pick input { margin-top: 5px; accent-color: var(--lake); }
.pick__name { font: 700 19px/1.3 var(--disp); }
.pick__mi { color: var(--buoy-2); margin-left: 6px; }
.pick__line { grid-column: 2; font-size: 15px; color: var(--ink-2); }
.pick.is-locked { opacity: .6; cursor: not-allowed; }
.inline { display: inline-flex; gap: 8px; align-items: center; margin-right: 20px; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.field input, .field select { width: 100%; max-width: 420px; font: 400 17px var(--body); padding: 11px 12px; border: 2px solid #b9ad94; border-radius: 8px; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus { border-color: var(--lake); outline: 0; box-shadow: 0 0 0 3px var(--lake-3); }
.hint { font-size: 14px; color: var(--ink-2); }
.alert { background: #fde8df; border-left: 4px solid var(--buoy); padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; font-weight: 600; }

/* journey */
.keep { background: var(--ink); color: #fff; padding: 28px 0; }
.keep__h { font-size: 26px; color: #f2b544; }
.copyrow { display: flex; gap: 10px; flex-wrap: wrap; }
.copyrow__in { flex: 1 1 320px; font: 500 15px var(--body); padding: 12px; border-radius: 8px; border: 0; }
.keep .btn--ink { background: var(--buoy); }
.trip { background: var(--paper); padding: 44px 0 36px; border-bottom: 1px solid var(--line); }
.trip__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.trip__big { margin: 0 0 8px; line-height: 1; }
.trip__done { font: 800 clamp(48px, 7vw, 84px)/1 var(--disp); color: var(--lake); }
.trip__of { display: block; font: 600 18px/1.4 var(--body); color: var(--ink-2); margin-top: 8px; }
.trip__next { font-size: 19px; }
.bar { display: block; width: 100%; height: 28px; margin: 14px 0; }
.bar__bg { fill: #e3dccb; }
.bar__fill { fill: var(--buoy); }
.bar__tick { fill: var(--paper); }
.trip__stats { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--ink-2); }
.trip__stats strong { color: var(--ink); font-size: 18px; }
.trip__cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.harbors { list-style: none; padding: 0; margin: 0 0 24px; border-left: 3px dotted var(--lake-2); }
.harbors li { position: relative; padding: 4px 0 10px 22px; color: var(--ink-2); }
.harbors li::before { content: ""; position: absolute; left: -9px; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--lake-2); }
.harbors li.is-past { color: var(--ink); font-weight: 600; }
.harbors li.is-past::before { background: var(--buoy); border-color: var(--buoy); }
.harbors span { font-weight: 400; color: var(--ink-2); font-size: 14px; margin-left: 6px; }
.tools { list-style: none; padding: 0; }
.tools li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tools span { display: block; font-size: 13px; color: var(--ink-2); }
.danger { margin-top: 24px; }
.danger summary { cursor: pointer; color: var(--buoy-2); font-weight: 600; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 40px; align-items: stretch; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.plan--main { border: 3px solid var(--lake); box-shadow: 0 18px 40px -24px rgba(15, 76, 92, .55); }
.plan__h { font-size: 24px; }
.plan__price { font: 800 46px/1 var(--disp); color: var(--lake); margin-bottom: 6px; }
.plan__price span { font: 600 16px var(--body); color: var(--ink-2); }
.plan__alt { color: var(--ink-2); font-size: 15px; }
.plan ul { padding-left: 20px; }
.plan__state { font-weight: 700; color: var(--grass); font-size: 15px; }

/* certificate */
.cert { padding: 40px 20px; }
.cert__card { max-width: 900px; margin: 0 auto; background: #fff; border: 10px double var(--wood); padding: 40px 48px; text-align: center; }
.cert__kicker { font: 700 13px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--wood-2); }
.cert__h { font-size: clamp(30px, 4.6vw, 52px); color: var(--lake); }
.cert__line { font-size: 19px; }
.cert__towns { font-size: 14px; color: var(--ink-2); }
.cert__fine { font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.cert__actions { text-align: center; margin-top: 20px; }

/* footer */
.ft { background: var(--ink); color: #c9d3d5; padding: 44px 0 24px; font-size: 14px; }
.ft__in { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.ft p { margin: 0 0 12px; }
.ft a { color: #fff; }
.ft__name { font: 700 20px/1 var(--disp); color: var(--cream); letter-spacing: .05em; text-transform: uppercase; }
.ft__links a { margin-right: 16px; display: inline-block; }
.ft__nick { font-size: 13px; color: #9fb0b3; }
.ft .ft__powered { max-width: var(--wrap); margin: 20px auto 0; padding: 16px 28px 0; border-top: 1px solid #2e3f45; font-size: 13px; }
.ft > p.ft__nick { max-width: var(--wrap); margin: 0 auto 12px; padding: 0 28px; }

@media (max-width: 960px) {
  .hero__grid, .route__grid, .trip__grid, .trip__cols, .money__grid { grid-template-columns: 1fr; }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .steps__list, .plans { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap, .hd__in { padding-left: 18px; padding-right: 18px; }
  .hero { padding-top: 32px; }
  .posts { grid-template-columns: 1fr; }
  .ft__in { grid-template-columns: 1fr; }
  .map__lbl { font-size: 30px; }
  .cert__card { padding: 24px 18px; }
  .entries th, .entries td { padding: 8px 6px; }
}
@media print {
  .hd, .ft, .noprint, .skip { display: none !important; }
  body { background: #fff; }
  .cert { padding: 0; }
  .cert__card { border-width: 8px; }
}
/* ---------- v1.2.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer, on public pages only (the controllers opt in). The label, the
   reserved height and the vertical space are all on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill, the
   label and the space go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). vertical-align:top on
   the link keeps the line box at the banner's own height. display stays in this file and is never !important: tag.js hides a
   slot with style.display='none'. */
.ae-slot { padding: 0 clamp(16px, 4vw, 28px); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: clamp(32px, 4vw, 48px) auto; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 700 11px/16px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; } }
@media print { .ae-slot { display: none; } }