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

   Colors
     --thunderhead  #2d2b36  storm-cloud charcoal: top strip, footer, closing band
     --scud         #55525f  lighter cloud gray: far end of the banner fade, rules
     --postoak      #0f7b52  green for buttons, links and small labels
     --postoak-deep #0b5e3e  the same green, pressed
     --hailstone    #a6b8ff  pale blue used sparingly: brand word, bars, tags

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

:root {
  --thunderhead: #2d2b36;
  --tiller-shade-l: 45, 43, 54;           /* --thunderhead split into channels for the photo banner */
  --scud: #55525f;
  --postoak: #0f7b52;
  --postoak-deep: #0b5e3e;
  --hailstone: #a6b8ff;
  --peony-canvas-c: #f5f6f8;
  --primrose-pure: #ffffff;
  --sturdy-ink: #1d1c23;
  --quartz-quiet: #595766;
  --ready-edge: #d6d7df;
  --vale-easing-c: 8px;
  --oar-measure: 1100px;
  --graphite-batten-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(--graphite-batten-h);
  background: var(--peony-canvas-c);
  color: var(--sturdy-ink);
  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(--postoak); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--postoak-deep); }
h1, h2, h3 { line-height: 1.18; font-weight: 800; }
h2 { font-size: 1.65rem; margin: 0 0 14px; color: var(--thunderhead); }
h3 { font-size: 1.08rem; margin: 0 0 6px; color: var(--thunderhead); }
.notch-wrap { max-width: var(--oar-measure); margin: 0 auto; padding: 0 20px; }

/* ---- strip across the top ---- */
header.lantern-header-main { background: var(--thunderhead); color: var(--primrose-pure); border-bottom: 3px solid var(--hailstone); }
header.lantern-header-main .moss-runner {
  max-width: calc(var(--oar-measure) + 40px); margin: 0 auto; padding: 10px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
header.lantern-header-main .rare-identity {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--primrose-pure); font-weight: 800; font-size: 1.1rem; text-decoration: none;
}
header.lantern-header-main .rare-identity span { color: var(--hailstone); }
.spindle-glyph-logo { width: 40px; height: 40px; flex: none; }
header.lantern-header-main nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
header.lantern-header-main nav a { color: #d9d8e2; font-size: 0.92rem; text-decoration: none; padding: 4px 0; }
header.lantern-header-main nav a:hover { color: var(--primrose-pure); text-decoration: underline; text-decoration-color: var(--hailstone); }
header.lantern-header-main .dusk-call-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: 6px; background: var(--postoak);
  color: var(--primrose-pure); font-weight: 700; text-decoration: none;
}
header.lantern-header-main .dusk-call-link:hover { background: var(--postoak-deep); }
@media (max-width: 1100px) { header.lantern-header-main nav { order: 3; flex-basis: 100%; } }
@media (max-width: 600px) {
  header.lantern-header-main .moss-runner { justify-content: center; }
  header.lantern-header-main .rare-identity { margin-right: 0; }
  header.lantern-header-main nav { justify-content: center; gap: 2px 14px; }
}

/* ---- banner ---- */
.noble-splash { background: linear-gradient(135deg, var(--thunderhead) 45%, var(--scud)); color: var(--primrose-pure); padding: 44px 20px 40px; }
.noble-splash .notch-wrap { padding: 0; }
.noble-splash .palette-brow {
  display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 4px;
  background: var(--hailstone); color: var(--sturdy-ink); font-size: 0.8rem; font-weight: 700;
}
.noble-splash h1 { margin: 0 0 14px; max-width: 800px; font-size: 2.3rem; }
.noble-splash p.dune-chapeau { margin: 0 0 20px; max-width: 670px; font-size: 1.1rem; color: #ecebf3; }
.noble-splash .mesa-decision-row { display: flex; flex-wrap: wrap; gap: 12px; }
.noble-splash .valley-undernote { margin: 16px 0 0; max-width: 640px; font-size: 0.9rem; color: #dddce6; }
.noble-splash.spire-imaged {
  min-height: 510px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--tiller-shade-l), 0.95) 0%, rgba(var(--tiller-shade-l), 0.88) 50%, rgba(var(--tiller-shade-l), 0.32) 76%, rgba(var(--tiller-shade-l), 0.05) 100%),
    url('/images/hero-clearing-storm.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.noble-splash.spire-imaged .notch-wrap { width: 100%; }
@media (max-width: 820px) {
  .noble-splash h1 { font-size: 1.72rem; }
  .noble-splash.spire-imaged {
    min-height: 430px;
    background-image:
      linear-gradient(180deg, rgba(var(--tiller-shade-l), 0.94) 0%, rgba(var(--tiller-shade-l), 0.88) 58%, rgba(var(--tiller-shade-l), 0.76) 100%),
      url('/images/hero-clearing-storm-mobile.jpg');
  }
}

/* ---- buttons ---- */
.sleek-button-el { display: inline-block; padding: 12px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.sleek-button-el.cable-strong { background: var(--postoak); color: var(--primrose-pure); }
.sleek-button-el.cable-strong:hover { background: var(--postoak-deep); color: var(--primrose-pure); }
.sleek-button-el.jade-subdued { padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.62); color: var(--primrose-pure); }
.sleek-button-el.jade-subdued:hover { background: rgba(255, 255, 255, 0.14); color: var(--primrose-pure); }

/* ---- sections ---- */
section { padding: 44px 20px; }
section.mesa-band-b { background: var(--primrose-pure); }
section .notch-wrap { padding: 0; }
.ginger-rubric-line { margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--postoak); }
section p, section li { max-width: 750px; }
.body-copy ul, .body-copy ol { padding-left: 22px; margin: 0 0 16px; }
.body-copy li { margin-bottom: 7px; }
.body-copy h3 { margin-top: 22px; }

/* the two or three plain sentences that open a page */
.in-brief { max-width: 750px; margin: 0 0 22px; padding: 16px 20px; background: var(--primrose-pure); border: 1px solid var(--ready-edge); border-top: 4px solid var(--hailstone); border-radius: var(--vale-easing-c); }
section.mesa-band-b .in-brief { background: var(--peony-canvas-c); }
.in-brief p { margin: 0; }
.in-brief p + p { margin-top: 8px; }

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

/* the line this site does not cross: insurance, engineering, town paperwork */
.not-ours { max-width: 750px; margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--scud); background: #e9e9ef; border-radius: 0 var(--vale-easing-c) var(--vale-easing-c) 0; }
.not-ours p { margin: 0; }
.not-ours p + p { margin-top: 8px; }

/* year-built chart on the home page: one bar per decade, width set inline */
.decade-bars { list-style: none; margin: 0 0 14px; padding: 0; max-width: 820px; }
.decade-bars li { display: grid; grid-template-columns: 118px 1fr 58px; align-items: center; gap: 12px; padding: 5px 0; max-width: none; }
.decade-bars .yrs { font-weight: 700; color: var(--thunderhead); font-size: 0.95rem; }
.decade-bars .track { height: 22px; background: #e9e9ef; border-radius: 3px; overflow: hidden; }
.decade-bars .fill { display: block; height: 100%; background: var(--scud); }
.decade-bars .peak .fill { background: var(--postoak); }
.decade-bars .pct { font-size: 0.92rem; color: var(--quartz-quiet); text-align: right; }
@media (max-width: 560px) { .decade-bars li { grid-template-columns: 86px 1fr 46px; gap: 8px; } }

/* three large figures in a row */
.storm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 12px; }
.storm-facts div { padding: 16px 18px; border-radius: var(--vale-easing-c); background: var(--thunderhead); color: var(--primrose-pure); }
.storm-facts dt { font-size: 1.55rem; font-weight: 800; color: var(--hailstone); }
.storm-facts dd { margin: 4px 0 0; font-size: 0.9rem; color: #dddce6; }
@media (max-width: 760px) { .storm-facts { grid-template-columns: 1fr; } }

/* the three starting points: replaced since the storm, not replaced, not sure */
.roof-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ready-edge); border-radius: var(--vale-easing-c); background: var(--primrose-pure); overflow: hidden; }
.roof-paths > div { padding: 20px 22px; border-left: 1px solid var(--ready-edge); }
.roof-paths > div:first-child { border-left: 0; }
.roof-paths p { margin: 0 0 10px; font-size: 0.96rem; color: var(--quartz-quiet); }
.roof-paths .since-tag { display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--postoak); }
.roof-paths a { font-weight: 700; font-size: 0.94rem; }
@media (max-width: 860px) {
  .roof-paths { grid-template-columns: 1fr; }
  .roof-paths > div { border-left: 0; border-top: 1px solid var(--ready-edge); }
  .roof-paths > div:first-child { border-top: 0; }
}

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

/* tables */
.spruce-table-scroll { max-width: 900px; margin: 0 0 16px; overflow-x: auto; }
.sourced-table { width: 100%; border-collapse: collapse; background: var(--primrose-pure); font-size: 0.95rem; }
.sourced-table th, .sourced-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ready-edge); }
.sourced-table th { background: #e9e9ef; color: var(--thunderhead); border-bottom: 2px solid var(--scud); }
.sourced-table td:first-child { font-weight: 700; color: var(--thunderhead); }
@media (max-width: 640px) { .sourced-table { min-width: 520px; } }

/* cards */
.umber-array { display: grid; gap: 16px; }
.umber-array.arbor-bisect { grid-template-columns: repeat(2, 1fr); }
.umber-array.nectar-split-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .umber-array.arbor-bisect, .umber-array.nectar-split-3 { grid-template-columns: 1fr; } }
.rust-pod { padding: 18px 20px; background: var(--primrose-pure); border: 1px solid var(--ready-edge); border-radius: var(--vale-easing-c); }
section.mesa-band-b .rust-pod { background: var(--peony-canvas-c); }
.rust-pod p { margin: 0 0 8px; font-size: 0.95rem; color: var(--quartz-quiet); }
.rust-pod a { font-weight: 700; font-size: 0.93rem; }
.built-tag { display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 4px; background: #e9e9ef; color: var(--thunderhead); font-size: 0.78rem; font-weight: 700; }

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

/* questions, open-and-close version */
.vivid-questions-list { max-width: 820px; }
.square-topic-block { border-bottom: 1px solid var(--ready-edge); }
.square-topic-block summary { padding: 14px 28px 14px 0; cursor: pointer; font-weight: 700; color: var(--thunderhead); }
.square-topic-block summary:hover { color: var(--postoak); }
.square-topic-block p { margin: 0 0 14px; color: var(--quartz-quiet); }
/* questions, always-open version used on the home page */
.first-asked { max-width: 820px; margin: 0; }
.first-asked dt { margin-top: 18px; font-weight: 700; color: var(--thunderhead); }
.first-asked dt:first-child { margin-top: 0; }
.first-asked dd { margin: 4px 0 0; color: var(--quartz-quiet); }

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

/* closing band */
.azure-closer { padding: 40px 20px; background: var(--thunderhead); color: var(--primrose-pure); }
.azure-closer h2 { color: var(--primrose-pure); margin-bottom: 8px; }
.azure-closer p { margin: 0 0 18px; max-width: 640px; color: #d9d8e2; }
.azure-closer .sleek-button-el { margin: 0 8px 8px 0; }

/* contact form */
form.scout-approach { display: grid; gap: 14px; max-width: 520px; }
form.scout-approach label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 700; color: var(--thunderhead); }
form.scout-approach input, form.scout-approach select, form.scout-approach textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #85838f; border-radius: 6px;
  background: var(--primrose-pure); color: var(--sturdy-ink); font: inherit;
}
form.scout-approach button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.scout-approach button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.scout-approach .spare-legal-note { margin: 0; font-size: 0.82rem; color: var(--quartz-quiet); }
form.scout-approach .heather-alt-contact { position: absolute; left: -9999px; top: -9999px; }
.sleek-answer-line { display: none; padding: 11px 14px; border-radius: 6px; font-size: 0.93rem; }
.sleek-answer-line.visible { display: block; }
.sleek-answer-line.success { background: #e0f2e8; color: #14532d; }
.sleek-answer-line.error { background: #fbe6ea; color: #8f1a2e; }

/* breadcrumb */
.spire-path { max-width: calc(var(--oar-measure) + 40px); margin: 0 auto; padding: 12px 20px; font-size: 0.84rem; color: var(--quartz-quiet); }
.spire-path a { color: var(--quartz-quiet); }

/* referral note */
.clear-upfront { max-width: 750px; margin-top: 20px; padding: 12px 16px; border-radius: var(--vale-easing-c); background: #e9e9ef; color: var(--quartz-quiet); font-size: 0.9rem; }

/* footer */
footer.lantern-header-main { padding: 36px 20px 20px; background: #1f1e26; color: #b5b3c2; font-size: 0.9rem; }
footer.lantern-header-main .notch-wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; padding: 0; }
footer.lantern-header-main h2 { margin: 0 0 10px; font-size: 0.92rem; color: var(--primrose-pure); }
footer.lantern-header-main p { margin: 0; }
footer.lantern-header-main ul { list-style: none; margin: 0; padding: 0; }
footer.lantern-header-main li { margin-bottom: 6px; }
footer.lantern-header-main a { color: #b5b3c2; }
footer.lantern-header-main a:hover { color: var(--primrose-pure); }
footer.lantern-header-main .sepia-baseline { max-width: var(--oar-measure); margin: 24px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8rem; }
footer.lantern-header-main .sepia-baseline span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.lantern-header-main .notch-wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.lantern-header-main .notch-wrap { grid-template-columns: 1fr; } }

/* bar pinned to the bottom of the window at every width */
.pole-fixedbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: var(--thunderhead); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.24);
}
.pole-fixedbar-inner { display: flex; gap: 10px; max-width: var(--oar-measure); margin: 0 auto; }
.pole-fixedbar 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;
}
.pole-fixedbar .hinge-tel-glyph { flex: none; }
.pole-fixedbar-call { flex: 3; background: var(--postoak); color: var(--primrose-pure); }
.pole-fixedbar-call:hover { background: var(--postoak-deep); color: var(--primrose-pure); }
.pole-fixedbar-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.55); color: var(--primrose-pure); }
.pole-fixedbar-quote:hover { background: rgba(255, 255, 255, 0.16); color: var(--primrose-pure); }
.pole-fixedbar .calm-rider { display: none; }
@media (min-width: 620px) { .pole-fixedbar .calm-rider { display: inline; } }
@media (min-width: 780px) {
  .pole-fixedbar-inner { justify-content: flex-end; }
  .pole-fixedbar a { flex: 0 0 auto; padding: 0 26px; font-size: 0.96rem; }
}

/* reviews: printed only when switched on in the settings file */
.axis-testimonials .lantern-voice p { color: var(--sturdy-ink); }
.axis-testimonials .ingot-ranking { margin: 0 0 6px; color: var(--postoak); letter-spacing: 2px; }
.axis-testimonials .west-said-by { font-size: 0.88rem; color: var(--quartz-quiet); }

/* marks a value still waiting to be filled in */
.central-to-fill { 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 */
.sheer-onsite { max-width: calc(var(--oar-measure) + 40px); margin: 0 auto; padding: 24px 20px 4px; }
.sheer-onsite img { width: 100%; max-width: 740px; height: auto; margin: 0; border-radius: var(--vale-easing-c); box-shadow: 0 2px 8px rgba(29, 28, 35, 0.24); }

/* home page photo block: eight pictures, four across, two across on phones.
   height:auto is required or the height attribute beats aspect-ratio. */
.facet-job-band .fennel-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.facet-job-band img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 5px; background: var(--primrose-pure); }
@media (max-width: 760px) { .facet-job-band .fennel-plates { grid-template-columns: repeat(2, 1fr); gap: 6px; } }

/* Contrast, measured (body text needs 4.5:1, large text 3:1)
     --sturdy-ink on --peony-canvas-c                          15.63:1
     --quartz-quiet on --peony-canvas-c                         6.52:1
     --quartz-quiet on white                        7.05:1
     --quartz-quiet on #e9e9ef                      5.83:1
     white on --thunderhead                 13.90:1
     white on --scud                         7.61:1
     white on --postoak                      5.28:1
     white on --postoak-deep                 7.82:1
     --postoak on --peony-canvas-c                       4.89:1
     --postoak on white                      5.28:1
     --postoak-deep on --peony-canvas-c                  7.23:1
     --thunderhead on --peony-canvas-c                  12.86:1
     --thunderhead on #e9e9ef               11.50:1
     nav #d9d8e2 on --thunderhead            9.85:1
     lead #ecebf3 on --thunderhead          11.75:1
     lead #ecebf3 on --scud                  6.43:1
     note #dddce6 on --thunderhead          10.23:1
     note #dddce6 on --scud                  5.60:1
     --hailstone on --thunderhead            7.23:1
     --sturdy-ink on --hailstone                    8.79:1
     footer #b5b3c2 on #1f1e26               8.01:1
     success #14532d on #e0f2e8              7.82:1
     error #8f1a2e on #fbe6ea                7.48:1
     #574a00 on #fff7cc                      8.15:1
     --postoak on #e9e9ef (not used for text)  4.37:1
   The banner fades from --thunderhead to --scud, so banner text is checked on both. */

/* --- 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 .narrow-mode past the header's own height and .links-showing while
   the menu is open. */
header.lantern-header-main .list-knob { display: none; }
@media (max-width: 820px) {
  header.lantern-header-main { position: static; }
  header.lantern-header-main .moss-runner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.lantern-header-main .rare-identity {
    display: block;
    position: relative;
    padding-left: 48px;
    min-height: 40px;
    line-height: 40px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 4.88vw, 1.1rem);
  }
  header.lantern-header-main .rare-identity .spindle-glyph-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.lantern-header-main nav { flex: 1 0 100%; margin: 0; }
  header.lantern-header-main nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.lantern-header-main nav li { margin: 0; padding: 0; }
  header.lantern-header-main nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.lantern-header-main .dusk-call-link { display: none; }

  header.lantern-header-main.narrow-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: slide-in 0.2s ease-out;
  }
  header.lantern-header-main.narrow-mode .moss-runner {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.lantern-header-main.narrow-mode > :not(.moss-runner):not(nav):not(script),
  header.lantern-header-main.narrow-mode > .moss-runner > :not(.rare-identity):not(.list-knob):not(nav),
  header.lantern-header-main.narrow-mode nav { display: none; }
  header.lantern-header-main.narrow-mode .rare-identity {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.lantern-header-main.narrow-mode .rare-identity > * { white-space: nowrap; }
  header.lantern-header-main.narrow-mode .rare-identity {
    padding-left: 34px;
    min-height: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.81rem, 4.40vw, 1.06rem);
  }
  header.lantern-header-main.narrow-mode .rare-identity .spindle-glyph-logo { width: 26px; height: 26px; }
  header.lantern-header-main.narrow-mode .list-knob {
    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(217, 216, 226);
    cursor: pointer;
  }
  header.lantern-header-main .list-knob span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.lantern-header-main.links-showing .list-knob span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.lantern-header-main.links-showing .list-knob span:nth-child(2) { opacity: 0; }
  header.lantern-header-main.links-showing .list-knob span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.lantern-header-main.narrow-mode.links-showing nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(45, 43, 54);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.lantern-header-main.narrow-mode.links-showing nav { display: flex; flex-direction: column; gap: 0; }
  header.lantern-header-main.narrow-mode.links-showing 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) {
  .pole-fixedbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .pole-fixedbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .pole-fixedbar .pole-fixedbar-call, .pole-fixedbar .pole-fixedbar-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .pole-fixedbar-inner > :not(a) { display: none; }
}
@keyframes slide-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.lantern-header-main.narrow-mode { animation: none; }
  header.lantern-header-main .list-knob span { transition: none; }
}

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

/* --- 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.azure-closer.azure-closer,
  section.facet-job-band.mesa-band-b.facet-job-band,
  section.mesa-band-b.mesa-band-b,
  section.noble-splash.noble-splash,
  section.noble-splash.spire-imaged.noble-splash { 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.lantern-header-main div.moss-runner { padding-top: 6px; padding-bottom: 6px; }
}

header.lantern-header-main #main-index .bloc-entry { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.lantern-header-main #main-index .chevron-switch {
  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(217, 216, 226); cursor: pointer;
}
header.lantern-header-main #main-index .chevron-switch::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.lantern-header-main #main-index .bloc-entry.unrolled-set > .chevron-switch::before { transform: rotate(180deg); }
header.lantern-header-main #main-index .second-deck {
  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(45, 43, 54); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.lantern-header-main #main-index .second-deck[data-cols="2"] { columns: 2; min-width: 400px; }
header.lantern-header-main #main-index .second-deck[data-cols="3"] { columns: 3; min-width: 560px; }
header.lantern-header-main #main-index .bloc-entry.unrolled-set > .second-deck { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.lantern-header-main #main-index .bloc-entry:hover > .second-deck { display: block; }
}
header.lantern-header-main #main-index .second-deck a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(217, 216, 226); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.lantern-header-main #main-index .second-deck a:hover, header.lantern-header-main #main-index .second-deck a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.lantern-header-main #main-index .second-deck a.top-door { 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.lantern-header-main #main-index .bloc-entry { position: static; flex-wrap: wrap; justify-content: center; }
  header.lantern-header-main #main-index .bloc-entry.unrolled-set { flex-basis: 100%; }
  header.lantern-header-main #main-index .chevron-switch { width: 18px; height: 34px; margin-left: 2px; }
  header.lantern-header-main #main-index .second-deck, header.lantern-header-main #main-index .second-deck[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.lantern-header-main #main-index .bloc-entry.unrolled-set > .second-deck { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.lantern-header-main #main-index .bloc-entry.unrolled-set > .second-deck[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.lantern-header-main #main-index .second-deck a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.lantern-header-main #main-index .second-deck a.top-door { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.lantern-header-main.narrow-mode.links-showing #main-index { flex-wrap: nowrap; }
  header.lantern-header-main.narrow-mode.links-showing #main-index > * { flex-shrink: 0; }
  header.lantern-header-main.narrow-mode.links-showing #main-index .bloc-entry { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.lantern-header-main.narrow-mode.links-showing #main-index .bloc-entry > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.lantern-header-main.narrow-mode.links-showing #main-index .chevron-switch { width: 52px; height: 48px; }
  header.lantern-header-main.narrow-mode.links-showing #main-index .second-deck { margin: 0; border-radius: 0; }
  header.lantern-header-main.narrow-mode.links-showing #main-index .second-deck 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.lantern-header-main #main-index .chevron-switch::before { transition: none; } }