/* Cedar Park Roofing & Siding
   Plain CSS, system type, nothing to compile.

   Palette
     --brake      #1d3f4f  cedar-brake blue-green: top bar, closing band, headings
     --ledge      #3f6577  the lighter end of the banner fade, table rules
     --kiln       #b23f28  fired-brick red: buttons, links, small labels
     --kiln-deep  #8c2f1c  the same red, hovered
     --caliche    #f0dcae  pale road-base cream: brand word, tags, top borders

   Contrast figures are listed at the end.
*/

:root {
  --brake: #1d3f4f;
  --subtle-dim-layer: 29, 63, 79;            /* --brake as channels, for the photo banner */
  --ledge: #3f6577;
  --kiln: #b23f28;
  --kiln-deep: #8c2f1c;
  --caliche: #f0dcae;
  --fable-canvas-c: #f6f4ef;
  --glen-paper-w: #ffffff;
  --topaz-print: #1b2327;
  --whistle-understated: #56626a;
  --spire-border: #d8d4c9;
  --sincere-bevel: 4px;
  --haven-gauge: 1080px;
  --marsh-rail-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--marsh-rail-h);
  background: var(--fable-canvas-c);
  color: var(--topaz-print);
  font: 17px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { display: block; max-width: 100%; }
a { color: var(--kiln); text-underline-offset: 3px; }
a:hover { color: var(--kiln-deep); }
h1, h2, h3 { line-height: 1.2; font-weight: 750; letter-spacing: -0.01em; }
h2 { font-size: 1.6rem; margin: 0 0 14px; color: var(--brake); }
h3 { font-size: 1.06rem; margin: 0 0 6px; color: var(--brake); }
.sturdy-measure-x { max-width: var(--haven-gauge); margin: 0 auto; padding: 0 22px; }

/* ---- top bar ---- */
header.swift-crownbar { background: var(--brake); color: var(--glen-paper-w); }
header.swift-crownbar .teal-shelf {
  max-width: calc(var(--haven-gauge) + 44px); margin: 0 auto; padding: 11px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
}
header.swift-crownbar .lilac-titleblock {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--glen-paper-w); font-weight: 750; font-size: 1.08rem; text-decoration: none;
}
header.swift-crownbar .lilac-titleblock span { color: var(--caliche); }
.plum-cartouche { width: 40px; height: 40px; flex: none; }
header.swift-crownbar nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
header.swift-crownbar nav a { color: #d5e0e6; font-size: 0.92rem; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
header.swift-crownbar nav a:hover { color: var(--glen-paper-w); border-bottom-color: var(--caliche); }
header.swift-crownbar .poppy-tel-action {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: var(--sincere-bevel); background: var(--kiln);
  color: var(--glen-paper-w); font-weight: 700; text-decoration: none;
}
header.swift-crownbar .poppy-tel-action:hover { background: var(--kiln-deep); }
@media (max-width: 1120px) { header.swift-crownbar nav { order: 3; flex-basis: 100%; } }
@media (max-width: 600px) {
  header.swift-crownbar .teal-shelf { justify-content: center; }
  header.swift-crownbar .lilac-titleblock { margin-right: 0; }
  header.swift-crownbar nav { justify-content: center; gap: 2px 14px; }
}

/* ---- banner ---- */
.ridge-hero { background: linear-gradient(100deg, var(--brake) 55%, var(--ledge)); color: var(--glen-paper-w); padding: 42px 22px 38px; }
.ridge-hero .sturdy-measure-x { padding: 0; }
.ridge-hero .chalk-flag-line {
  display: inline-block; margin-bottom: 12px; padding: 2px 0 3px; border-bottom: 2px solid var(--caliche);
  color: var(--caliche); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
}
.ridge-hero h1 { margin: 0 0 14px; max-width: 780px; font-size: 2.25rem; }
.ridge-hero p.nettle-dek { margin: 0 0 20px; max-width: 660px; font-size: 1.08rem; color: #e8eef1; }
.ridge-hero .domino-options-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ridge-hero .ingot-marginalia { margin: 16px 0 0; max-width: 640px; font-size: 0.9rem; color: #d5e0e6; }
.ridge-hero.cream-pictorial {
  min-height: 500px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--subtle-dim-layer), 0.96) 0%, rgba(var(--subtle-dim-layer), 0.9) 46%, rgba(var(--subtle-dim-layer), 0.35) 70%, rgba(var(--subtle-dim-layer), 0.04) 100%),
    url('/images/hero-limestone-front-street.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.ridge-hero.cream-pictorial .sturdy-measure-x { width: 100%; }
@media (max-width: 820px) {
  .ridge-hero h1 { font-size: 1.7rem; }
  .ridge-hero.cream-pictorial {
    min-height: 420px;
    background-image:
      linear-gradient(180deg, rgba(var(--subtle-dim-layer), 0.95) 0%, rgba(var(--subtle-dim-layer), 0.9) 60%, rgba(var(--subtle-dim-layer), 0.8) 100%),
      url('/images/hero-limestone-front-street-mobile.jpg');
  }
}

/* ---- buttons ---- */
.trowel-striker { display: inline-block; padding: 12px 22px; border-radius: var(--sincere-bevel); font-weight: 700; text-decoration: none; }
.trowel-striker.cedar-primary { background: var(--kiln); color: var(--glen-paper-w); }
.trowel-striker.cedar-primary:hover { background: var(--kiln-deep); color: var(--glen-paper-w); }
.trowel-striker.medal-unfilled { padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.6); color: var(--glen-paper-w); }
.trowel-striker.medal-unfilled:hover { background: rgba(255, 255, 255, 0.14); color: var(--glen-paper-w); }

/* ---- sections ---- */
section { padding: 42px 22px; }
section.node-shaded { background: var(--glen-paper-w); border-top: 1px solid var(--spire-border); border-bottom: 1px solid var(--spire-border); }
section .sturdy-measure-x { padding: 0; }
.creek-rubric-line { margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kiln); }
section p, section li { max-width: 740px; }
.read-column ul, .read-column ol { padding-left: 22px; margin: 0 0 16px; }
.read-column li { margin-bottom: 7px; }
.read-column h3 { margin-top: 22px; }

/* the short answer that opens a page */
.plainly { max-width: 740px; margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 5px solid var(--caliche); font-size: 1.05rem; }
.plainly p { margin: 0; }
.plainly p + p { margin-top: 8px; }

/* where a fact was read */
.sourced { max-width: 740px; margin: 0 0 16px; font-size: 0.85rem; color: var(--whistle-understated); }

/* what this site stays out of */
.hands-off { max-width: 740px; margin: 18px 0; padding: 14px 18px; background: #ebe8df; border: 1px dashed #9a958a; border-radius: var(--sincere-bevel); }
.hands-off p { margin: 0; }
.hands-off p + p { margin-top: 8px; }

/* four sourced facts, two across */
.rock-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border-top: 3px solid var(--brake); }
.rock-ledger > div { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--spire-border); }
.rock-ledger > div:nth-child(odd) { padding-right: 26px; border-right: 1px solid var(--spire-border); }
.rock-ledger > div:nth-child(even) { padding-left: 26px; }
.rock-ledger dt { font-size: 1.3rem; font-weight: 750; color: var(--brake); }
.rock-ledger dd { margin: 4px 0 0; color: var(--whistle-understated); font-size: 0.96rem; }
@media (max-width: 720px) {
  .rock-ledger { grid-template-columns: 1fr; }
  .rock-ledger > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .rock-ledger > div:nth-child(even) { padding-left: 0; }
}

/* the house drawn as two bands: stone below, boards above */
.elevation { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: 0 0 16px; border: 1px solid var(--spire-border); border-radius: var(--sincere-bevel); overflow: hidden; }
.elevation > div { padding: 20px 22px; }
.elevation .boards { background: repeating-linear-gradient(180deg, #e3ebe6 0, #e3ebe6 21px, #cfdad3 21px, #cfdad3 22px); }
.elevation .stone { background: #efe6d2; border-left: 1px solid var(--spire-border); }
.elevation h3 { margin-bottom: 8px; }
.elevation p { margin: 0; font-size: 0.96rem; }
.elevation ul { margin: 8px 0 0; padding-left: 20px; font-size: 0.95rem; }
@media (max-width: 720px) { .elevation { grid-template-columns: 1fr; } .elevation .stone { border-left: 0; border-top: 1px solid var(--spire-border); } }

/* one row per job, name on the left */
.job-rows { list-style: none; margin: 0 0 8px; padding: 0; max-width: 900px; border-top: 1px solid var(--spire-border); }
.job-rows li { display: grid; grid-template-columns: 250px 1fr; gap: 6px 22px; padding: 12px 0; border-bottom: 1px solid var(--spire-border); max-width: none; }
.job-rows a { font-weight: 700; }
.job-rows span { color: var(--whistle-understated); font-size: 0.96rem; }
@media (max-width: 700px) { .job-rows li { grid-template-columns: 1fr; } }

/* what happens after the call, left to right */
.relay { list-style: none; counter-reset: leg; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; }
.relay li { counter-increment: leg; padding: 16px 18px 6px 0; border-top: 3px solid var(--ledge); max-width: none; }
.relay li::before { content: "0" counter(leg); display: block; font-size: 0.82rem; font-weight: 700; color: var(--kiln); letter-spacing: 0.06em; }
.relay strong { display: block; margin: 2px 0 4px; color: var(--brake); }
.relay span { color: var(--whistle-understated); font-size: 0.95rem; }
@media (max-width: 860px) { .relay { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .relay { grid-template-columns: 1fr; } }

/* tables */
.arrow-pan-wide { max-width: 900px; margin: 0 0 16px; overflow-x: auto; }
.dated-table { width: 100%; border-collapse: collapse; background: var(--glen-paper-w); font-size: 0.95rem; }
.dated-table th, .dated-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--spire-border); }
.dated-table th { background: var(--brake); color: var(--glen-paper-w); font-weight: 700; }
.dated-table td:first-child { font-weight: 700; color: var(--brake); white-space: nowrap; }
@media (max-width: 640px) { .dated-table { min-width: 540px; } .dated-table td:first-child { white-space: normal; } }

/* cards */
.tide-quilt { display: grid; gap: 18px; }
.tide-quilt.thread-two-across { grid-template-columns: repeat(2, 1fr); }
.tide-quilt.axis-trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .tide-quilt.thread-two-across, .tide-quilt.axis-trio { grid-template-columns: 1fr; } }
.tan-unit { padding: 18px 20px; background: var(--glen-paper-w); border: 1px solid var(--spire-border); border-left: 4px solid var(--ledge); border-radius: var(--sincere-bevel); }
section.node-shaded .tan-unit { background: var(--fable-canvas-c); }
.tan-unit p { margin: 0 0 8px; font-size: 0.95rem; color: var(--whistle-understated); }
.tan-unit a { font-weight: 700; font-size: 0.93rem; }
.built-when { display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 2px; background: var(--caliche); color: var(--topaz-print); font-size: 0.78rem; font-weight: 700; }

/* questions */
.qna-ledger { max-width: 800px; border-top: 1px solid var(--spire-border); }
.hinge-ask { border-bottom: 1px solid var(--spire-border); }
.hinge-ask summary { padding: 14px 28px 14px 0; cursor: pointer; font-weight: 700; color: var(--brake); }
.hinge-ask summary:hover { color: var(--kiln); }
.hinge-ask p { margin: 0 0 14px; color: var(--whistle-understated); }

/* links to places and neighboring pages */
.badge-coverage { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-coverage a { padding: 7px 13px; border-radius: var(--sincere-bevel); border: 1px solid var(--ledge); background: var(--glen-paper-w); color: var(--brake); font-size: 0.92rem; text-decoration: none; }
.badge-coverage a:hover { background: var(--brake); color: var(--glen-paper-w); }

/* closing band */
.alder-coda { padding: 40px 22px; background: var(--brake); color: var(--glen-paper-w); border-top: 4px solid var(--caliche); }
.alder-coda h2 { color: var(--glen-paper-w); margin-bottom: 8px; }
.alder-coda p { margin: 0 0 18px; max-width: 640px; color: #d5e0e6; }
.alder-coda .trowel-striker { margin: 0 8px 8px 0; }

/* contact form */
form.rivet-tell-form { display: grid; gap: 14px; max-width: 520px; }
form.rivet-tell-form label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 700; color: var(--brake); }
form.rivet-tell-form input, form.rivet-tell-form select, form.rivet-tell-form textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #7f8a90; border-radius: var(--sincere-bevel);
  background: var(--glen-paper-w); color: var(--topaz-print); font: inherit;
}
form.rivet-tell-form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.rivet-tell-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.rivet-tell-form .haven-disclaimer { margin: 0; font-size: 0.82rem; color: var(--whistle-understated); }
form.rivet-tell-form .lean-spare-line { position: absolute; left: -9999px; top: -9999px; }
.mid-confirm-line { display: none; padding: 11px 14px; border-radius: var(--sincere-bevel); font-size: 0.93rem; }
.mid-confirm-line.visible { display: block; }
.mid-confirm-line.success { background: #dff1e6; color: #14532d; }
.mid-confirm-line.error { background: #fbe5e1; color: #8a1f12; }

/* breadcrumb */
.umber-trail { max-width: calc(var(--haven-gauge) + 44px); margin: 0 auto; padding: 12px 22px; font-size: 0.84rem; color: var(--whistle-understated); }
.umber-trail a { color: var(--whistle-understated); }

/* referral note */
.willow-openly { max-width: 740px; margin-top: 20px; padding: 12px 16px; border-radius: var(--sincere-bevel); background: #ebe8df; color: var(--whistle-understated); font-size: 0.9rem; }

/* footer */
footer.swift-crownbar { padding: 36px 22px 20px; background: #142c38; color: #b3c2ca; font-size: 0.9rem; }
footer.swift-crownbar .sturdy-measure-x { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 26px; padding: 0; }
footer.swift-crownbar h2 { margin: 0 0 10px; font-size: 0.92rem; color: var(--glen-paper-w); }
footer.swift-crownbar p { margin: 0; }
footer.swift-crownbar ul { list-style: none; margin: 0; padding: 0; }
footer.swift-crownbar li { margin-bottom: 6px; }
footer.swift-crownbar a { color: #b3c2ca; }
footer.swift-crownbar a:hover { color: var(--glen-paper-w); }
footer.swift-crownbar .trowel-tail { max-width: var(--haven-gauge); margin: 24px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8rem; }
footer.swift-crownbar .trowel-tail span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.swift-crownbar .sturdy-measure-x { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.swift-crownbar .sturdy-measure-x { grid-template-columns: 1fr; } }

/* bar fixed to the bottom edge */
.square-dockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--brake); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.22);
}
.square-dockbar-inner { display: flex; gap: 10px; max-width: var(--haven-gauge); margin: 0 auto; }
.square-dockbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 12px; border-radius: var(--sincere-bevel); font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; text-decoration: none;
}
.square-dockbar .cobble-dial-glyph { flex: none; }
.square-dockbar-call { flex: 3; background: var(--kiln); color: var(--glen-paper-w); }
.square-dockbar-call:hover { background: var(--kiln-deep); color: var(--glen-paper-w); }
.square-dockbar-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.55); color: var(--glen-paper-w); }
.square-dockbar-quote:hover { background: rgba(255, 255, 255, 0.16); color: var(--glen-paper-w); }
.square-dockbar .nimble-addendum-cta { display: none; }
@media (min-width: 640px) { .square-dockbar .nimble-addendum-cta { display: inline; } }
@media (min-width: 780px) {
  .square-dockbar-inner { justify-content: flex-end; }
  .square-dockbar a { flex: 0 0 auto; padding: 0 26px; font-size: 0.96rem; }
}

/* reviews: printed only when turned on in the settings file */
.vector-hearsay .hinge-remark p { color: var(--topaz-print); }
.vector-hearsay .tidy-scoring { margin: 0 0 6px; color: var(--kiln); letter-spacing: 2px; }
.vector-hearsay .cream-byline { font-size: 0.88rem; color: var(--whistle-understated); }

/* a value not filled in yet */
.mild-placeholder-flag { padding: 1px 6px; border: 1px dashed #a08a00; background: #fff7cc; color: #574a00; font-size: 0.85em; }

/* one photo per job page, held to a readable width */
.fable-work-photo { max-width: calc(var(--haven-gauge) + 44px); margin: 0 auto; padding: 22px 22px 4px; }
.fable-work-photo img { width: 100%; max-width: 720px; height: auto; margin: 0; border-radius: var(--sincere-bevel); border: 1px solid var(--spire-border); }

/* home page photos: twelve, six across, then three, then two.
   height:auto keeps the height attribute from overriding aspect-ratio. */
.merry-reel .rare-previews { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.merry-reel img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: var(--glen-paper-w); }
@media (max-width: 900px) { .merry-reel .rare-previews { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .merry-reel .rare-previews { grid-template-columns: repeat(2, 1fr); gap: 6px; } }

/* --- 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 .docked-top past the header's own height and .panel-down while
   the menu is open. */
header.swift-crownbar .list-toggle { display: none; }
@media (max-width: 820px) {
  header.swift-crownbar { position: static; }
  header.swift-crownbar .teal-shelf {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.swift-crownbar .lilac-titleblock {
    display: block;
    position: relative;
    padding-left: 48px;
    min-height: 40px;
    line-height: 40px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.40vw, 1.08rem);
  }
  header.swift-crownbar .lilac-titleblock .plum-cartouche {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.swift-crownbar nav { flex: 1 0 100%; margin: 0; }
  header.swift-crownbar nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.swift-crownbar nav li { margin: 0; padding: 0; }
  header.swift-crownbar nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.swift-crownbar .poppy-tel-action { display: none; }

  header.swift-crownbar.docked-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: drop-top 0.2s ease-out;
  }
  header.swift-crownbar.docked-top .teal-shelf {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.swift-crownbar.docked-top > :not(.teal-shelf):not(nav):not(script),
  header.swift-crownbar.docked-top > .teal-shelf > :not(.lilac-titleblock):not(.list-toggle):not(nav),
  header.swift-crownbar.docked-top nav { display: none; }
  header.swift-crownbar.docked-top .lilac-titleblock {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.swift-crownbar.docked-top .lilac-titleblock > * { white-space: nowrap; }
  header.swift-crownbar.docked-top .lilac-titleblock {
    padding-left: 34px;
    min-height: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.81rem, 4.89vw, 1.06rem);
  }
  header.swift-crownbar.docked-top .lilac-titleblock .plum-cartouche { width: 26px; height: 26px; }
  header.swift-crownbar.docked-top .list-toggle {
    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, 224, 230);
    cursor: pointer;
  }
  header.swift-crownbar .list-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.swift-crownbar.panel-down .list-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.swift-crownbar.panel-down .list-toggle span:nth-child(2) { opacity: 0; }
  header.swift-crownbar.panel-down .list-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.swift-crownbar.docked-top.panel-down nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(29, 63, 79);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.swift-crownbar.docked-top.panel-down nav { display: flex; flex-direction: column; gap: 0; }
  header.swift-crownbar.docked-top.panel-down 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) {
  .square-dockbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .square-dockbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .square-dockbar .square-dockbar-call, .square-dockbar .square-dockbar-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .square-dockbar-inner > :not(a) { display: none; }
}
@keyframes drop-top { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.swift-crownbar.docked-top { animation: none; }
  header.swift-crownbar .list-toggle span { transition: none; }
}

.upload-slot input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; color: #222; font-size: 0.9rem; }
.upload-slot label span { font-weight: 400; opacity: 0.7; }
.file-aside { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.file-roll { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.file-roll:empty, .photo-msg:empty { display: none; }
.file-roll li { padding: 2px 0; overflow-wrap: anywhere; }
.photo-msg { 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.alder-coda.alder-coda,
  section.merry-reel.node-shaded.merry-reel,
  section.node-shaded.node-shaded,
  section.ridge-hero.cream-pictorial.ridge-hero,
  section.ridge-hero.ridge-hero { 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.swift-crownbar div.teal-shelf { padding-top: 7px; padding-bottom: 7px; }
}

header.swift-crownbar #bar-sections .drop-item { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.swift-crownbar #bar-sections .beak-knob {
  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, 224, 230); cursor: pointer;
}
header.swift-crownbar #bar-sections .beak-knob::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.swift-crownbar #bar-sections .drop-item.fanned-fold > .beak-knob::before { transform: rotate(180deg); }
header.swift-crownbar #bar-sections .under-links {
  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(29, 63, 79); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.swift-crownbar #bar-sections .under-links[data-cols="2"] { columns: 2; min-width: 400px; }
header.swift-crownbar #bar-sections .under-links[data-cols="3"] { columns: 3; min-width: 560px; }
header.swift-crownbar #bar-sections .drop-item.fanned-fold > .under-links { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.swift-crownbar #bar-sections .drop-item:hover > .under-links { display: block; }
}
header.swift-crownbar #bar-sections .under-links a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(213, 224, 230); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.swift-crownbar #bar-sections .under-links a:hover, header.swift-crownbar #bar-sections .under-links a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.swift-crownbar #bar-sections .under-links a.root-route { 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.swift-crownbar #bar-sections .drop-item { position: static; flex-wrap: wrap; justify-content: center; }
  header.swift-crownbar #bar-sections .drop-item.fanned-fold { flex-basis: 100%; }
  header.swift-crownbar #bar-sections .beak-knob { width: 18px; height: 34px; margin-left: 2px; }
  header.swift-crownbar #bar-sections .under-links, header.swift-crownbar #bar-sections .under-links[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.swift-crownbar #bar-sections .drop-item.fanned-fold > .under-links { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.swift-crownbar #bar-sections .drop-item.fanned-fold > .under-links[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.swift-crownbar #bar-sections .under-links a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.swift-crownbar #bar-sections .under-links a.root-route { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.swift-crownbar.docked-top.panel-down #bar-sections { flex-wrap: nowrap; }
  header.swift-crownbar.docked-top.panel-down #bar-sections > * { flex-shrink: 0; }
  header.swift-crownbar.docked-top.panel-down #bar-sections .drop-item { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.swift-crownbar.docked-top.panel-down #bar-sections .drop-item > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.swift-crownbar.docked-top.panel-down #bar-sections .beak-knob { width: 52px; height: 48px; }
  header.swift-crownbar.docked-top.panel-down #bar-sections .under-links { margin: 0; border-radius: 0; }
  header.swift-crownbar.docked-top.panel-down #bar-sections .under-links 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.swift-crownbar #bar-sections .beak-knob::before { transition: none; } }