/* Frisco Roofing & Siding
   One stylesheet, no build step, system fonts.

   Colors (named for the layers of a roof and wall assembly)
     --sheathing       #172b45  deep navy: top strip, footer, closing band
     --felt            #3f5f88  lighter steel blue: far end of the banner fade, rules
     --stepflash       #0b7566  teal for buttons, links and small labels
     --stepflash-deep  #085a4e  the same teal, pressed
     --skylight        #5ee0b8  pale aquamarine used sparingly: brand word, bars, tags

   Measured contrast ratios are at the bottom of the file.
*/

:root {
  --sheathing: #172b45;
  --cobble-scrim: 23, 43, 69;           /* --sheathing split into channels for the photo banner */
  --felt: #3f5f88;
  --stepflash: #0b7566;
  --stepflash-deep: #085a4e;
  --skylight: #5ee0b8;
  --reed-ground: #f3f6f9;
  --primrose-bright: #ffffff;
  --ledger-text: #161c26;
  --onyx-muted: #55606f;
  --glint-divide: #d3dae3;
  --clover-fillet: 8px;
  --shore-gauge: 1100px;
  --neat-perch-h: 66px;                 /* fixed bar: 11 + 44 + 11 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--neat-perch-h);
  background: var(--reed-ground);
  color: var(--ledger-text);
  font: 17px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { display: block; max-width: 100%; }
a { color: var(--stepflash); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--stepflash-deep); }
h1, h2, h3 { line-height: 1.18; font-weight: 800; }
h2 { font-size: 1.65rem; margin: 0 0 14px; color: var(--sheathing); }
h3 { font-size: 1.08rem; margin: 0 0 6px; color: var(--sheathing); }
.ridge-inner { max-width: var(--shore-gauge); margin: 0 auto; padding: 0 20px; }

/* ---- strip across the top ---- */
header.thistle-toprail { background: var(--sheathing); color: var(--primrose-bright); border-bottom: 3px solid var(--skylight); }
header.thistle-toprail .poppy-strip {
  max-width: calc(var(--shore-gauge) + 40px); margin: 0 auto; padding: 10px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
header.thistle-toprail .ferry-byname {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--primrose-bright); font-weight: 800; font-size: 1.1rem; text-decoration: none;
}
header.thistle-toprail .ferry-byname span { color: var(--skylight); }
.prairie-crest { width: 40px; height: 40px; flex: none; }
header.thistle-toprail nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
header.thistle-toprail nav a { color: #d5deeb; font-size: 0.92rem; text-decoration: none; padding: 4px 0; }
header.thistle-toprail nav a:hover { color: var(--primrose-bright); text-decoration: underline; text-decoration-color: var(--skylight); }
header.thistle-toprail .harbor-ring {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: 6px; background: var(--stepflash);
  color: var(--primrose-bright); font-weight: 700; text-decoration: none;
}
header.thistle-toprail .harbor-ring:hover { background: var(--stepflash-deep); }
@media (max-width: 1100px) { header.thistle-toprail nav { order: 3; flex-basis: 100%; } }
@media (max-width: 600px) {
  header.thistle-toprail .poppy-strip { justify-content: center; }
  header.thistle-toprail .ferry-byname { margin-right: 0; }
  header.thistle-toprail nav { justify-content: center; gap: 2px 14px; }
}

/* ---- banner ---- */
.tan-standard { background: linear-gradient(135deg, var(--sheathing) 45%, var(--felt)); color: var(--primrose-bright); padding: 44px 20px 40px; }
.tan-standard .ridge-inner { padding: 0; }
.tan-standard .dusk-kicker {
  display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 4px;
  background: var(--skylight); color: var(--ledger-text); font-size: 0.8rem; font-weight: 700;
}
.tan-standard h1 { margin: 0 0 14px; max-width: 800px; font-size: 2.3rem; }
.tan-standard p.noble-opening-line { margin: 0 0 20px; max-width: 670px; font-size: 1.1rem; color: #e6edf7; }
.tan-standard .lilac-action-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tan-standard .sturdy-minor-note { margin: 16px 0 0; max-width: 640px; font-size: 0.9rem; color: #dde5f0; }
.tan-standard.glen-has-image {
  min-height: 510px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--cobble-scrim), 0.95) 0%, rgba(var(--cobble-scrim), 0.88) 50%, rgba(var(--cobble-scrim), 0.32) 76%, rgba(var(--cobble-scrim), 0.05) 100%),
    url('/images/hero-builder-roofs.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.tan-standard.glen-has-image .ridge-inner { width: 100%; }
@media (max-width: 820px) {
  .tan-standard h1 { font-size: 1.72rem; }
  .tan-standard.glen-has-image {
    min-height: 430px;
    background-image:
      linear-gradient(180deg, rgba(var(--cobble-scrim), 0.94) 0%, rgba(var(--cobble-scrim), 0.88) 58%, rgba(var(--cobble-scrim), 0.76) 100%),
      url('/images/hero-builder-roofs-mobile.jpg');
  }
}

/* ---- buttons ---- */
.pilot-lever { display: inline-block; padding: 12px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.pilot-lever.yarrow-strong { background: var(--stepflash); color: var(--primrose-bright); }
.pilot-lever.yarrow-strong:hover { background: var(--stepflash-deep); color: var(--primrose-bright); }
.pilot-lever.brisk-subdued { padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.62); color: var(--primrose-bright); }
.pilot-lever.brisk-subdued:hover { background: rgba(255, 255, 255, 0.14); color: var(--primrose-bright); }

/* ---- sections ---- */
section { padding: 44px 20px; }
section.deep-shaded { background: var(--primrose-bright); }
section .ridge-inner { padding: 0; }
.west-band-label { margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stepflash); }
section p, section li { max-width: 750px; }
.body-prose ul, .body-prose ol { padding-left: 22px; margin: 0 0 16px; }
.body-prose li { margin-bottom: 7px; }
.body-prose h3 { margin-top: 22px; }

/* the two or three plain sentences that open a page */
.short-form { max-width: 750px; margin: 0 0 22px; padding: 16px 20px; background: var(--primrose-bright); border: 1px solid var(--glint-divide); border-top: 4px solid var(--skylight); border-radius: var(--clover-fillet); }
section.deep-shaded .short-form { background: var(--reed-ground); }
.short-form p { margin: 0; }
.short-form p + p { margin-top: 8px; }

/* where a figure came from */
.source-mark { max-width: 750px; margin: 0 0 16px; font-size: 0.86rem; color: var(--onyx-muted); }

/* the line this site does not cross: insurance, engineering, town paperwork */
.beyond-us { max-width: 750px; margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--felt); background: #e6ecf3; border-radius: 0 var(--clover-fillet) var(--clover-fillet) 0; }
.beyond-us p { margin: 0; }
.beyond-us p + p { margin-top: 8px; }

/* year-built chart on the home page: one bar per decade, width set inline */
.decade-rows { list-style: none; margin: 0 0 14px; padding: 0; max-width: 820px; }
.decade-rows li { display: grid; grid-template-columns: 118px 1fr 58px; align-items: center; gap: 12px; padding: 5px 0; max-width: none; }
.decade-rows .era-span { font-weight: 700; color: var(--sheathing); font-size: 0.95rem; }
.decade-rows .bar-lane { height: 22px; background: #e6ecf3; border-radius: 3px; overflow: hidden; }
.decade-rows .bar-ink { display: block; height: 100%; background: var(--felt); }
.decade-rows .decade-peak .bar-ink { background: var(--stepflash); }
.decade-rows .share-pct { font-size: 0.92rem; color: var(--onyx-muted); text-align: right; }
@media (max-width: 560px) { .decade-rows li { grid-template-columns: 86px 1fr 46px; gap: 8px; } }

/* three large figures in a row */
.event-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 12px; }
.event-facts div { padding: 16px 18px; border-radius: var(--clover-fillet); background: var(--sheathing); color: var(--primrose-bright); }
.event-facts dt { font-size: 1.55rem; font-weight: 800; color: var(--skylight); }
.event-facts dd { margin: 4px 0 0; font-size: 0.9rem; color: #dde5f0; }
@media (max-width: 760px) { .event-facts { grid-template-columns: 1fr; } }

/* the three starting points: replaced since the storm, not replaced, not sure */
.cohort-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--glint-divide); border-radius: var(--clover-fillet); background: var(--primrose-bright); overflow: hidden; }
.cohort-paths > div { padding: 20px 22px; border-left: 1px solid var(--glint-divide); }
.cohort-paths > div:first-child { border-left: 0; }
.cohort-paths p { margin: 0 0 10px; font-size: 0.96rem; color: var(--onyx-muted); }
.cohort-paths .decade-tag { display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stepflash); }
.cohort-paths a { font-weight: 700; font-size: 0.94rem; }
@media (max-width: 860px) {
  .cohort-paths { grid-template-columns: 1fr; }
  .cohort-paths > div { border-left: 0; border-top: 1px solid var(--glint-divide); }
  .cohort-paths > div:first-child { border-top: 0; }
}

/* roof work in one column, wall work in the other */
.twin-trades { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.twin-trades dl { margin: 0; }
.twin-trades dt { margin-top: 14px; font-weight: 700; }
.twin-trades dt:first-child { margin-top: 0; }
.twin-trades dd { margin: 2px 0 0; color: var(--onyx-muted); font-size: 0.95rem; }
@media (max-width: 800px) { .twin-trades { grid-template-columns: 1fr; gap: 26px; } }

/* tables */
.scroll-pane { max-width: 900px; margin: 0 0 16px; overflow-x: auto; }
.fact-grid { width: 100%; border-collapse: collapse; background: var(--primrose-bright); font-size: 0.95rem; }
.fact-grid th, .fact-grid td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--glint-divide); }
.fact-grid th { background: #e6ecf3; color: var(--sheathing); border-bottom: 2px solid var(--felt); }
.fact-grid td:first-child { font-weight: 700; color: var(--sheathing); }
@media (max-width: 640px) { .fact-grid { min-width: 520px; } }

/* cards */
.myrtle-framework { display: grid; gap: 16px; }
.myrtle-framework.jewel-doubleton { grid-template-columns: repeat(2, 1fr); }
.myrtle-framework.garnet-ternary { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .myrtle-framework.jewel-doubleton, .myrtle-framework.garnet-ternary { grid-template-columns: 1fr; } }
.tassel-pod { padding: 18px 20px; background: var(--primrose-bright); border: 1px solid var(--glint-divide); border-radius: var(--clover-fillet); }
section.deep-shaded .tassel-pod { background: var(--reed-ground); }
.tassel-pod p { margin: 0 0 8px; font-size: 0.95rem; color: var(--onyx-muted); }
.tassel-pod a { font-weight: 700; font-size: 0.93rem; }
.build-chip { display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 4px; background: #e6ecf3; color: var(--sheathing); font-size: 0.78rem; font-weight: 700; }

/* how a request moves: an ordinary numbered list, numbers drawn by a counter */
.relay-steps { list-style: none; counter-reset: hand; margin: 0; padding: 0; max-width: 780px; }
.relay-steps li { counter-increment: hand; position: relative; padding: 0 0 18px 52px; max-width: none; }
.relay-steps li::before { content: counter(hand); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 6px; background: var(--sheathing); color: var(--primrose-bright); font-weight: 800; text-align: center; line-height: 34px; }
.relay-steps strong { display: block; color: var(--sheathing); }
.relay-steps span { color: var(--onyx-muted); font-size: 0.96rem; }

/* questions, open-and-close version */
.answer-column { max-width: 820px; }
.daisy-qa { border-bottom: 1px solid var(--glint-divide); }
.daisy-qa summary { padding: 14px 28px 14px 0; cursor: pointer; font-weight: 700; color: var(--sheathing); }
.daisy-qa summary:hover { color: var(--stepflash); }
.daisy-qa p { margin: 0 0 14px; color: var(--onyx-muted); }
/* questions, always-open version used on the home page */
.question-stack { max-width: 820px; margin: 0; }
.question-stack dt { margin-top: 18px; font-weight: 700; color: var(--sheathing); }
.question-stack dt:first-child { margin-top: 0; }
.question-stack dd { margin: 4px 0 0; color: var(--onyx-muted); }

/* links to nearby places and related pages */
.link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.link-row a { padding: 7px 13px; border-radius: 6px; border: 1px solid var(--felt); background: var(--primrose-bright); color: var(--sheathing); font-size: 0.92rem; text-decoration: none; }
.link-row a:hover { background: var(--sheathing); color: var(--primrose-bright); }

/* closing band */
.lantern-signoff { padding: 40px 20px; background: var(--sheathing); color: var(--primrose-bright); }
.lantern-signoff h2 { color: var(--primrose-bright); margin-bottom: 8px; }
.lantern-signoff p { margin: 0 0 18px; max-width: 640px; color: #d5deeb; }
.lantern-signoff .pilot-lever { margin: 0 8px 8px 0; }

/* contact form */
form.lantern-tell-form { display: grid; gap: 14px; max-width: 520px; }
form.lantern-tell-form label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 700; color: var(--sheathing); }
form.lantern-tell-form input, form.lantern-tell-form select, form.lantern-tell-form textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #7f8a99; border-radius: 6px;
  background: var(--primrose-bright); color: var(--ledger-text); font: inherit;
}
form.lantern-tell-form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.lantern-tell-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.lantern-tell-form .orchid-advisory { margin: 0; font-size: 0.82rem; color: var(--onyx-muted); }
form.lantern-tell-form .gauge-ref-code { position: absolute; left: -9999px; top: -9999px; }
.ripple-report-line { display: none; padding: 11px 14px; border-radius: 6px; font-size: 0.93rem; }
.ripple-report-line.visible { display: block; }
.ripple-report-line.success { background: #e0f2e8; color: #14532d; }
.ripple-report-line.error { background: #fbe6ea; color: #8f1a2e; }

/* breadcrumb */
.aspen-breadcrumbs { max-width: calc(var(--shore-gauge) + 40px); margin: 0 auto; padding: 12px 20px; font-size: 0.84rem; color: var(--onyx-muted); }
.aspen-breadcrumbs a { color: var(--onyx-muted); }

/* referral note */
.gamma-upfront { max-width: 750px; margin-top: 20px; padding: 12px 16px; border-radius: var(--clover-fillet); background: #e6ecf3; color: var(--onyx-muted); font-size: 0.9rem; }

/* footer */
footer.thistle-toprail { padding: 36px 20px 20px; background: #101e31; color: #b4c0d1; font-size: 0.9rem; }
footer.thistle-toprail .ridge-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; padding: 0; }
footer.thistle-toprail h2 { margin: 0 0 10px; font-size: 0.92rem; color: var(--primrose-bright); }
footer.thistle-toprail p { margin: 0; }
footer.thistle-toprail ul { list-style: none; margin: 0; padding: 0; }
footer.thistle-toprail li { margin-bottom: 6px; }
footer.thistle-toprail a { color: #b4c0d1; }
footer.thistle-toprail a:hover { color: var(--primrose-bright); }
footer.thistle-toprail .hatch-floorline { max-width: var(--shore-gauge); margin: 24px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8rem; }
footer.thistle-toprail .hatch-floorline span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.thistle-toprail .ridge-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.thistle-toprail .ridge-inner { grid-template-columns: 1fr; } }

/* bar pinned to the bottom of the window at every width */
.crest-keelbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: var(--sheathing); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.24);
}
.crest-keelbar-inner { display: flex; gap: 10px; max-width: var(--shore-gauge); margin: 0 auto; }
.crest-keelbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 12px; border-radius: 6px; font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; text-decoration: none;
}
.crest-keelbar .ferry-speaker-mark { flex: none; }
.crest-keelbar-call { flex: 3; background: var(--stepflash); color: var(--primrose-bright); }
.crest-keelbar-call:hover { background: var(--stepflash-deep); color: var(--primrose-bright); }
.crest-keelbar-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.55); color: var(--primrose-bright); }
.crest-keelbar-quote:hover { background: rgba(255, 255, 255, 0.16); color: var(--primrose-bright); }
.crest-keelbar .beam-dock-note { display: none; }
@media (min-width: 620px) { .crest-keelbar .beam-dock-note { display: inline; } }
@media (min-width: 780px) {
  .crest-keelbar-inner { justify-content: flex-end; }
  .crest-keelbar a { flex: 0 0 auto; padding: 0 26px; font-size: 0.96rem; }
}

/* reviews: printed only when switched on in the settings file */
.marble-feedback-block .baton-report-card p { color: var(--ledger-text); }
.marble-feedback-block .firm-grade-marks { margin: 0 0 6px; color: var(--stepflash); letter-spacing: 2px; }
.marble-feedback-block .khaki-source-name { font-size: 0.88rem; color: var(--onyx-muted); }

/* marks a value still waiting to be filled in */
.sincere-placeholder-flag { padding: 1px 6px; border: 1px dashed #a08a00; background: #fff7cc; color: #574a00; font-size: 0.85em; }

/* one photo per roof or wall page, capped so it never spans a desktop window */
.snug-job-frame { max-width: calc(var(--shore-gauge) + 40px); margin: 0 auto; padding: 24px 20px 4px; }
.snug-job-frame img { width: 100%; max-width: 740px; height: auto; margin: 0; border-radius: var(--clover-fillet); box-shadow: 0 2px 8px rgba(22, 28, 38, 0.24); }

/* home page photo block: twelve pictures, four across, three on tablets, two on phones.
   height:auto is required or the height attribute beats aspect-ratio. */
.navy-work-strip .orbit-snippets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.navy-work-strip img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 5px; background: var(--primrose-bright); }
@media (max-width: 900px) { .navy-work-strip .orbit-snippets { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 520px) { .navy-work-strip .orbit-snippets { grid-template-columns: repeat(2, 1fr); gap: 6px; } }

/* Contrast, measured (body text needs 4.5:1, large text 3:1)
     --ledger-text on --reed-ground                              15.76:1
     --onyx-muted on --reed-ground                             5.89:1
     --onyx-muted on white                            6.39:1
     --onyx-muted on #e6ecf3                          5.37:1
     white on --sheathing                       14.31:1
     white on --felt                             6.55:1
     white on --stepflash                        5.60:1
     white on --stepflash-deep                   8.13:1
     --stepflash on --reed-ground                         5.16:1
     --stepflash on white                        5.60:1
     --stepflash-deep on --reed-ground                    7.50:1
     --sheathing on --reed-ground                        13.19:1
     --sheathing on #e6ecf3                     12.03:1
     nav #d5deeb on --sheathing                 10.54:1
     lead #e6edf7 on --sheathing                12.14:1
     lead #e6edf7 on --felt                      5.56:1
     note #dde5f0 on --sheathing                11.27:1
     note #dde5f0 on --felt                      5.16:1
     --skylight on --sheathing                   8.74:1
     --ledger-text on --skylight                        10.45:1
     footer #b4c0d1 on #101e31                   9.11:1
     success #14532d on #e0f2e8                  7.82:1
     error #8f1a2e on #fbe6ea                    7.48:1
     #574a00 on #fff7cc                          8.15:1
     --stepflash on #e6ecf3 (not used for text)  4.71:1
   The banner fades from --sheathing to --felt, so banner text is checked on both. */

.image-field input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; color: #222; font-size: 0.9rem; }
.image-field label span { font-weight: 400; opacity: 0.7; }
.picture-note { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.upload-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.upload-list:empty, .photo-warn:empty { display: none; }
.upload-list li { padding: 2px 0; overflow-wrap: anywhere; }
.photo-warn { margin: 6px 0 0; font-size: 0.85rem; font-weight: 600; color: #b42318; }

/* --- Phone header (2026-10-15) ------------------------------------------
   On phones the desktop header stacked into a tall block that stayed pinned
   over the content, and its call button repeated the fixed bottom bar. Under
   820px: the full header sits at the top of the page and scrolls away (the
   name on one line, the nav in tidy centered rows, no call button), and once
   it has gone a slim bar with the name and a menu button slides down. The
   header script adds .compact-mode past the header's own height and .tray-open while
   the menu is open. */
header.thistle-toprail .page-handle { display: none; }
@media (max-width: 820px) {
  header.thistle-toprail { position: static; }
  header.thistle-toprail .poppy-strip {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.thistle-toprail .ferry-byname {
    display: block;
    position: relative;
    padding-left: 48px;
    min-height: 40px;
    line-height: 40px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.50vw, 1.1rem);
  }
  header.thistle-toprail .ferry-byname .prairie-crest {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.thistle-toprail nav { flex: 1 0 100%; margin: 0; }
  header.thistle-toprail nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.thistle-toprail nav li { margin: 0; padding: 0; }
  header.thistle-toprail nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.thistle-toprail .harbor-ring { display: none; }

  header.thistle-toprail.compact-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: ease-head 0.2s ease-out;
  }
  header.thistle-toprail.compact-mode .poppy-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.thistle-toprail.compact-mode > :not(.poppy-strip):not(nav):not(script),
  header.thistle-toprail.compact-mode > .poppy-strip > :not(.ferry-byname):not(.page-handle):not(nav),
  header.thistle-toprail.compact-mode nav { display: none; }
  header.thistle-toprail.compact-mode .ferry-byname {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.thistle-toprail.compact-mode .ferry-byname > * { white-space: nowrap; }
  header.thistle-toprail.compact-mode .ferry-byname {
    padding-left: 34px;
    min-height: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.81rem, 5.31vw, 1.06rem);
  }
  header.thistle-toprail.compact-mode .ferry-byname .prairie-crest { width: 26px; height: 26px; }
  header.thistle-toprail.compact-mode .page-handle {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    background: none;
    border: 0;
    color: rgb(213, 222, 235);
    cursor: pointer;
  }
  header.thistle-toprail .page-handle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.thistle-toprail.tray-open .page-handle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.thistle-toprail.tray-open .page-handle span:nth-child(2) { opacity: 0; }
  header.thistle-toprail.tray-open .page-handle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.thistle-toprail.compact-mode.tray-open nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(23, 43, 69);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.thistle-toprail.compact-mode.tray-open nav { display: flex; flex-direction: column; gap: 0; }
  header.thistle-toprail.compact-mode.tray-open nav a {
    min-height: 48px;
    padding: 0 20px;
    font-size: 1rem;
    text-align: left;
    border-top: 1px solid rgba(127,127,127,0.2);
  }
}
/* At 320px the bottom bar's second button ran off the screen. */
@media (max-width: 380px) {
  .crest-keelbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .crest-keelbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .crest-keelbar .crest-keelbar-call, .crest-keelbar .crest-keelbar-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .crest-keelbar-inner > :not(a) { display: none; }
}
@keyframes ease-head { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.thistle-toprail.compact-mode { animation: none; }
  header.thistle-toprail .page-handle span { transition: none; }
}

/* --- Phone body (2026-10-15) ---------------------------------------------
   On phones: body text runs 16px from the screen edge instead of 40px, and
   a centered row that wraps into a stack is left-aligned instead. */
@media (max-width: 820px) {
  section,
  section.deep-shaded.deep-shaded,
  section.lantern-signoff.lantern-signoff,
  section.navy-work-strip.deep-shaded.navy-work-strip,
  section.tan-standard.glen-has-image.tan-standard,
  section.tan-standard.tan-standard { padding-left: 16px; padding-right: 16px; }
}

/* --- Header spacing (2026-10-15) ---------------------------------------------
   Desktop: the same header in less height (its rows' vertical padding cut by
   about a third). Phones have their own header block above. */
@media (min-width: 821px) {
  header.thistle-toprail div.poppy-strip { padding-top: 6px; padding-bottom: 6px; }
}

header.thistle-toprail #short-links .set-slot { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.thistle-toprail #short-links .wedge-flip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 28px; margin: 0 0 0 1px; padding: 0;
  background: none; border: 0; color: rgb(213, 222, 235); cursor: pointer;
}
header.thistle-toprail #short-links .wedge-flip::before {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform 0.15s;
}
header.thistle-toprail #short-links .set-slot.showing-drop > .wedge-flip::before { transform: rotate(180deg); }
header.thistle-toprail #short-links .deep-menu {
  display: none; position: absolute; top: 100%; left: -14px; z-index: 90;
  min-width: 220px; max-width: min(620px, calc(100vw - 16px)); padding: 6px 0;
  background: rgb(23, 43, 69); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.thistle-toprail #short-links .deep-menu[data-cols="2"] { columns: 2; min-width: 400px; }
header.thistle-toprail #short-links .deep-menu[data-cols="3"] { columns: 3; min-width: 560px; }
header.thistle-toprail #short-links .set-slot.showing-drop > .deep-menu { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.thistle-toprail #short-links .set-slot:hover > .deep-menu { display: block; }
}
header.thistle-toprail #short-links .deep-menu a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(213, 222, 235); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.thistle-toprail #short-links .deep-menu a:hover, header.thistle-toprail #short-links .deep-menu a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.thistle-toprail #short-links .deep-menu a.every-entry { column-span: all; font-weight: 600; border-bottom: 1px solid rgba(127,127,127,0.3); margin-bottom: 4px; padding-bottom: 8px; }
@media (max-width: 820px) {
  header.thistle-toprail #short-links .set-slot { position: static; flex-wrap: wrap; justify-content: center; }
  header.thistle-toprail #short-links .set-slot.showing-drop { flex-basis: 100%; }
  header.thistle-toprail #short-links .wedge-flip { width: 18px; height: 34px; margin-left: 2px; }
  header.thistle-toprail #short-links .deep-menu, header.thistle-toprail #short-links .deep-menu[data-cols] {
    position: static; flex-basis: 100%; min-width: 0; max-width: none; width: 100%;
    margin: 0 0 6px; padding: 4px 0; border-radius: 4px; box-shadow: none;
    background: rgba(0,0,0,0.2); transform: none !important;
  }
  header.thistle-toprail #short-links .set-slot.showing-drop > .deep-menu { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.thistle-toprail #short-links .set-slot.showing-drop > .deep-menu[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.thistle-toprail #short-links .deep-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.thistle-toprail #short-links .deep-menu a.every-entry { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.thistle-toprail.compact-mode.tray-open #short-links { flex-wrap: nowrap; }
  header.thistle-toprail.compact-mode.tray-open #short-links > * { flex-shrink: 0; }
  header.thistle-toprail.compact-mode.tray-open #short-links .set-slot { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.thistle-toprail.compact-mode.tray-open #short-links .set-slot > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.thistle-toprail.compact-mode.tray-open #short-links .wedge-flip { width: 52px; height: 48px; }
  header.thistle-toprail.compact-mode.tray-open #short-links .deep-menu { margin: 0; border-radius: 0; }
  header.thistle-toprail.compact-mode.tray-open #short-links .deep-menu a { min-height: 44px; padding: 0 20px 0 32px; font-size: 0.95rem; border-top: 1px solid rgba(127,127,127,0.12); }
}
@media (prefers-reduced-motion: reduce) { header.thistle-toprail #short-links .wedge-flip::before { transition: none; } }