/* Allen Fence Repair. Single stylesheet, system fonts, nothing loaded from elsewhere.

   Palette
     --gatepost    #123c69  deep blue: header band, footer, bottom strip, headings
     --stringer    #3b648f  mid blue: far end of the banner fade, table rules
     --hasp        #7fb069  leaf green: every button, with dark text on it
     --hasp-press  #6a9f52  the green when hovered or pressed
     --plumbline   #1b5a9c  link blue
     --leaf-ink    #2f6b1f  dark green for small labels on a light page
     --sprig       #a9dd93  pale green: second word of the name, chips, markers

   The contrast figures for these pairs are listed at the end of the file.
*/

:root {
  --gatepost: #123c69;
  --zinnia-tint-over: 18, 60, 105;           /* --gatepost as r, g, b for the photo banner overlay */
  --stringer: #3b648f;
  --hasp: #7fb069;
  --hasp-press: #6a9f52;
  --plumbline: #1b5a9c;
  --leaf-ink: #2f6b1f;
  --sprig: #a9dd93;
  --basin-canvas-c: #f4f5f1;
  --solid-plain: #ffffff;
  --copper-text: #14202b;
  --axis-understated: #4d5863;
  --loyal-edge: #d5d9d2;
  --cove-corner: 4px;
  --steady-bound-c: 1120px;
  --helm-pin-h: 64px;                  /* bottom strip: 10 + 44 + 10 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--helm-pin-h);
  background: var(--basin-canvas-c);
  color: var(--copper-text);
  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(--plumbline); text-underline-offset: 2px; }
a:hover { color: var(--gatepost); }
h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.7rem; margin: 0 0 14px; color: var(--gatepost); }
h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--gatepost); }
.near-container { max-width: var(--steady-bound-c); margin: 0 auto; padding: 0 22px; }

/* header band */
header.proud-mast { background: var(--gatepost); color: var(--solid-plain); }
header.proud-mast .inner-gantry {
  max-width: var(--steady-bound-c); margin: 0 auto; padding: 10px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
}
header.proud-mast .thread-escutcheon {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--solid-plain); font-weight: 700; font-size: 1.08rem; text-decoration: none;
}
header.proud-mast .thread-escutcheon span { color: var(--sprig); }
.tan-mark { width: 38px; height: 38px; flex: none; }
header.proud-mast nav { display: flex; flex-wrap: wrap; gap: 2px 19px; }
header.proud-mast nav a { color: #d3deea; font-size: 0.94rem; text-decoration: none; padding: 5px 0; border-bottom: 2px solid transparent; }
header.proud-mast nav a:hover { color: var(--solid-plain); border-bottom-color: var(--hasp); }
header.proud-mast .arrow-tel-action {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--cove-corner); background: var(--hasp);
  color: var(--copper-text); font-weight: 700; text-decoration: none;
}
header.proud-mast .arrow-tel-action:hover { background: var(--hasp-press); color: var(--copper-text); }
@media (max-width: 1080px) { header.proud-mast nav { order: 3; flex-basis: 100%; } }
@media (max-width: 600px) {
  header.proud-mast .inner-gantry { justify-content: center; }
  header.proud-mast .thread-escutcheon { margin-right: 0; }
  header.proud-mast nav { justify-content: center; gap: 0 14px; }
}

/* banner at the top of a page */
.violet-overlook { background: linear-gradient(120deg, var(--gatepost) 50%, var(--stringer)); color: var(--solid-plain); padding: 46px 22px 42px; }
.violet-overlook .near-container { padding: 0; }
.violet-overlook .ginger-tagline {
  display: inline-block; margin-bottom: 12px; padding: 2px 0 2px 10px;
  border-left: 4px solid var(--hasp); color: var(--sprig); font-size: 0.84rem; font-weight: 700;
}
.violet-overlook h1 { margin: 0 0 14px; max-width: 780px; font-size: 2.35rem; }
.violet-overlook p.linen-first-para { margin: 0 0 22px; max-width: 660px; font-size: 1.09rem; color: #e6edf4; }
.violet-overlook .rare-picks { display: flex; flex-wrap: wrap; gap: 12px; }
.violet-overlook .wick-minor-note { margin: 18px 0 0; max-width: 640px; font-size: 0.9rem; color: #e6edf4; }
.violet-overlook.forge-has-image {
  min-height: 520px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--zinnia-tint-over), 0.96) 0%, rgba(var(--zinnia-tint-over), 0.9) 44%, rgba(var(--zinnia-tint-over), 0.4) 72%, rgba(var(--zinnia-tint-over), 0.08) 100%),
    url('/images/hero-leaning-fence-line.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.violet-overlook.forge-has-image .near-container { width: 100%; }
@media (max-width: 820px) {
  .violet-overlook h1 { font-size: 1.75rem; }
  .violet-overlook.forge-has-image {
    min-height: 440px;
    background-image:
      linear-gradient(180deg, rgba(var(--zinnia-tint-over), 0.95) 0%, rgba(var(--zinnia-tint-over), 0.9) 62%, rgba(var(--zinnia-tint-over), 0.76) 100%),
      url('/images/hero-leaning-fence-line-mobile.jpg');
  }
}

/* buttons: green with dark text; the outline kind sits on dark bands only */
.canyon-hit { display: inline-block; padding: 12px 24px; border-radius: var(--cove-corner); font-weight: 700; text-decoration: none; }
.canyon-hit.medal-solid { background: var(--hasp); color: var(--copper-text); }
.canyon-hit.medal-solid:hover { background: var(--hasp-press); color: var(--copper-text); }
.canyon-hit.wise-lined-btn { padding: 10px 22px; border: 2px solid rgba(255, 255, 255, 0.7); color: var(--solid-plain); }
.canyon-hit.wise-lined-btn:hover { background: rgba(255, 255, 255, 0.14); color: var(--solid-plain); }

/* page sections */
section { padding: 46px 22px; }
section.lower-alt { background: var(--solid-plain); border-top: 1px solid var(--loyal-edge); border-bottom: 1px solid var(--loyal-edge); }
section .near-container { padding: 0; }
.crest-rubric-line { margin-bottom: 6px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--leaf-ink); }
section p, section li { max-width: 740px; }
.fence-notes ul, .fence-notes ol { padding-left: 22px; margin: 0 0 16px; }
.fence-notes li { margin-bottom: 7px; }
.fence-notes h3 { margin-top: 24px; }

/* the short answer printed first on a page */
.short-call { max-width: 740px; margin: 0 0 24px; padding: 16px 20px; background: #e3f0dc; border-left: 6px solid var(--hasp); border-radius: 0 var(--cove-corner) var(--cove-corner) 0; }
.short-call p { margin: 0; }
.short-call p + p { margin-top: 8px; }

/* says where a number or rule was read */
.read-at { max-width: 740px; margin: 0 0 16px; font-size: 0.86rem; color: var(--axis-understated); }

/* something a fence crew does not handle, or a thing to settle first */
.hold-on { max-width: 740px; margin: 18px 0; padding: 14px 18px; background: var(--solid-plain); border: 1px solid var(--loyal-edge); border-top: 4px solid var(--stringer); border-radius: var(--cove-corner); }
section.lower-alt .hold-on { background: var(--basin-canvas-c); }
.hold-on p { margin: 0; }
.hold-on p + p { margin-top: 8px; }

/* a measurement from the city on the left, what it means on the right */
.city-lines { margin: 0 0 14px; padding: 0; max-width: 900px; }
.city-lines div { display: grid; grid-template-columns: 170px 1fr; gap: 4px 22px; padding: 13px 0; border-bottom: 1px solid var(--loyal-edge); }
.city-lines div:first-child { border-top: 3px solid var(--gatepost); }
.city-lines dt { font-size: 1.3rem; font-weight: 700; color: var(--gatepost); }
.city-lines dd { margin: 0; }
@media (max-width: 640px) { .city-lines div { grid-template-columns: 1fr; } }

/* fence age on the left, what usually fails on the right */
.age-rows { list-style: none; margin: 0 0 18px; padding: 0; max-width: 900px; }
.age-row { display: grid; grid-template-columns: 190px 1fr; gap: 4px 22px; padding: 16px 18px; margin-bottom: 8px; background: var(--solid-plain); border: 1px solid var(--loyal-edge); border-radius: var(--cove-corner); }
section.lower-alt .age-row { background: var(--basin-canvas-c); }
.yrs-label { font-weight: 700; color: var(--gatepost); }
.yrs-label small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--axis-understated); }
.age-row p { margin: 0 0 6px; }
@media (max-width: 680px) { .age-row { grid-template-columns: 1fr; } }

/* tables of published prices and rule comparisons */
.wide-table { max-width: 900px; margin: 0 0 16px; overflow-x: auto; }
.figures-table { width: 100%; border-collapse: collapse; background: var(--solid-plain); font-size: 0.95rem; }
.figures-table th, .figures-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--loyal-edge); }
.figures-table th { background: #e2e8ee; color: var(--gatepost); border-bottom: 2px solid var(--stringer); }
.figures-table td:first-child { font-weight: 700; color: var(--gatepost); }
@media (max-width: 640px) { .figures-table { min-width: 520px; } }

/* boxes laid out in columns */
.cocoa-mosaic { display: grid; gap: 14px; }
.cocoa-mosaic.harp-split-2 { grid-template-columns: repeat(2, 1fr); }
.cocoa-mosaic.level-trine { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cocoa-mosaic.level-trine { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cocoa-mosaic.harp-split-2, .cocoa-mosaic.level-trine { grid-template-columns: 1fr; } }
.pole-slab { padding: 18px 20px; background: var(--solid-plain); border: 1px solid var(--loyal-edge); border-bottom: 3px solid var(--stringer); border-radius: var(--cove-corner); }
section.lower-alt .pole-slab { background: var(--basin-canvas-c); }
.pole-slab p { margin: 0 0 8px; font-size: 0.95rem; color: var(--axis-understated); }
.pole-slab a { font-weight: 700; font-size: 0.94rem; }
.built-chip { display: inline-block; margin-bottom: 8px; padding: 1px 9px; border-radius: 3px; background: #cfe6c4; color: var(--copper-text); font-size: 0.79rem; font-weight: 700; }

/* what happens after a call, as a numbered list */
.gilded-procedure { list-style: none; margin: 0; padding: 0; max-width: 800px; counter-reset: none; }
.wheat-phase-card { position: relative; padding: 4px 0 18px 58px; }
.wheat-phase-card .prism-ordinal { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--gatepost); color: var(--solid-plain); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wheat-phase-card p { margin: 0; color: var(--axis-understated); }

/* questions and answers */
.qa-stack { max-width: 800px; }
.clear-point { border-bottom: 1px solid var(--loyal-edge); }
.clear-point:first-child { border-top: 1px solid var(--loyal-edge); }
.clear-point summary { padding: 13px 4px; cursor: pointer; font-weight: 700; color: var(--gatepost); }
.clear-point summary:hover { color: var(--plumbline); }
.clear-point p { margin: 0; padding: 0 4px 15px; color: var(--axis-understated); }

/* rows of short links */
.violet-places { display: flex; flex-wrap: wrap; gap: 8px; }
.violet-places a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--stringer); background: var(--solid-plain); color: var(--gatepost); font-size: 0.92rem; text-decoration: none; }
.violet-places a:hover { background: var(--gatepost); color: var(--solid-plain); }

/* closing band above the footer */
.lucid-closer { padding: 40px 22px; background: var(--gatepost); color: var(--solid-plain); }
.lucid-closer h2 { color: var(--solid-plain); margin-bottom: 8px; }
.lucid-closer p { margin: 0 0 18px; max-width: 640px; color: #d3deea; }
.lucid-closer .canyon-hit { margin: 0 8px 8px 0; }

/* contact form */
form.rust-approach { display: grid; gap: 14px; max-width: 520px; }
form.rust-approach label { display: block; margin-bottom: 4px; font-size: 0.89rem; font-weight: 700; color: var(--gatepost); }
form.rust-approach input, form.rust-approach select, form.rust-approach textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #76828d; border-radius: var(--cove-corner);
  background: var(--solid-plain); color: var(--copper-text); font: inherit;
}
form.rust-approach button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.rust-approach button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.rust-approach .willow-assent-note { margin: 0; font-size: 0.82rem; color: var(--axis-understated); }
form.rust-approach .fern-cross-ref { position: absolute; left: -9999px; top: -9999px; }
.compass-echo-line { display: none; padding: 11px 14px; border-radius: var(--cove-corner); font-size: 0.93rem; }
.compass-echo-line.visible { display: block; }
.compass-echo-line.success { background: #e3f0dc; color: #1f4d14; }
.compass-echo-line.error { background: #fae5e3; color: #8e1d16; }

/* link trail under the header */
.tan-signpost { max-width: var(--steady-bound-c); margin: 0 auto; padding: 11px 22px; font-size: 0.84rem; color: var(--axis-understated); }
.tan-signpost a { color: var(--axis-understated); }

/* the line that says who does the work */
.cipher-referral-note { max-width: 740px; margin-top: 20px; padding: 11px 15px; border-radius: var(--cove-corner); background: #e2e8ee; color: var(--axis-understated); font-size: 0.9rem; }

/* footer */
footer.proud-mast { padding: 36px 22px 20px; background: #0c2a4a; color: #b3bfcc; font-size: 0.9rem; }
footer.proud-mast .near-container { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 26px; padding: 0; }
footer.proud-mast h2 { margin: 0 0 10px; font-size: 0.93rem; color: var(--solid-plain); }
footer.proud-mast p { margin: 0; }
footer.proud-mast ul { list-style: none; margin: 0; padding: 0; }
footer.proud-mast li { margin-bottom: 6px; }
footer.proud-mast a { color: #b3bfcc; }
footer.proud-mast a:hover { color: var(--solid-plain); }
footer.proud-mast .slate-base-row { max-width: var(--steady-bound-c); margin: 24px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8rem; }
footer.proud-mast .slate-base-row span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.proud-mast .near-container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.proud-mast .near-container { grid-template-columns: 1fr; } }

/* two buttons fixed to the bottom edge at every screen width */
.tall-pinned-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--gatepost); border-top: 3px solid var(--hasp);
}
.tall-pinned-call-inner { display: flex; gap: 10px; max-width: var(--steady-bound-c); margin: 0 auto; }
.tall-pinned-call a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 12px; border-radius: var(--cove-corner); font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; text-decoration: none;
}
.tall-pinned-call .ruby-ring-mark { flex: none; }
.tall-pinned-call-call { flex: 3; background: var(--hasp); color: var(--copper-text); }
.tall-pinned-call-call:hover { background: var(--hasp-press); color: var(--copper-text); }
.tall-pinned-call-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.65); color: var(--solid-plain); }
.tall-pinned-call-quote:hover { background: rgba(255, 255, 255, 0.15); color: var(--solid-plain); }
.tall-pinned-call .far-trailer { display: none; }
@media (min-width: 640px) { .tall-pinned-call .far-trailer { display: inline; } }
@media (min-width: 780px) {
  .tall-pinned-call-inner { justify-content: flex-end; }
  .tall-pinned-call a { flex: 0 0 auto; padding: 0 26px; font-size: 0.96rem; }
}

/* homeowner notes, shown only when turned on in site.php */
.flute-reports .solid-review-card p { color: var(--copper-text); }
.flute-reports .zenith-pips { margin: 0 0 6px; color: var(--leaf-ink); letter-spacing: 2px; }
.flute-reports .orchid-byline { font-size: 0.88rem; color: var(--axis-understated); }

/* flags a value that is still a placeholder */
.juniper-pending-value { padding: 1px 6px; border: 1px dashed #8a7a00; background: #fff5c2; color: #554a00; font-size: 0.85em; }

/* one photo per fence work page, held to a readable width so it does not
   stretch across a desktop window */
.flute-field-photo { max-width: var(--steady-bound-c); margin: 0 auto; padding: 0 22px 10px; }
.flute-field-photo img { width: 100%; max-width: 700px; height: auto; margin: 0; border-radius: var(--cove-corner); border: 1px solid var(--loyal-edge); }

/* home page photos: nine, three across, then two with the ninth hidden
   on narrow screens so no row is left ragged. height:auto stops the
   height attribute from beating aspect-ratio. */
.upper-reel .glint-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 900px; }
.upper-reel img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--cove-corner); background: var(--solid-plain); }
@media (max-width: 620px) {
  .upper-reel .glint-plates { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .upper-reel .glint-plates img:last-child { display: none; }
}

/* Measured contrast (4.5:1 needed for body text, 3:1 for large text)
     --copper-text on --basin-canvas-c                         15.1:1
     --axis-understated on --basin-canvas-c                        6.63:1
     --axis-understated on white                       7.26:1
     --axis-understated on #e2e8ee                     5.88:1
     white on --gatepost                   11.19:1
     white on --stringer                    6.17:1
     --copper-text on --hasp (buttons)              6.54:1
     --copper-text on --hasp-press                  5.27:1
     --plumbline on --basin-canvas-c                    6.42:1
     --plumbline on white                   7.03:1
     --gatepost on --basin-canvas-c                    10.22:1
     --gatepost on #e2e8ee                  9.07:1
     --leaf-ink on --basin-canvas-c                     5.91:1
     --leaf-ink on white                    6.47:1
     menu #d3deea on --gatepost             8.21:1
     banner text #e6edf4 on --stringer      5.22:1
     --sprig on --gatepost                  7.17:1
     --copper-text on #e3f0dc                      13.97:1
     --copper-text on #cfe6c4                      12.40:1
     footer #b3bfcc on #0c2a4a              7.78:1
   The banner fades from --gatepost to --stringer, so banner text is checked on the lighter end. */

/* --- 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 .trim-top past the header's own height and .menu-open while
   the menu is open. */
header.proud-mast .route-toggle { display: none; }
@media (max-width: 820px) {
  header.proud-mast { position: static; }
  header.proud-mast .inner-gantry {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.proud-mast .thread-escutcheon {
    display: block;
    position: relative;
    padding-left: 46px;
    min-height: 38px;
    line-height: 38px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.40vw, 1.08rem);
  }
  header.proud-mast .thread-escutcheon .tan-mark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.proud-mast nav { flex: 1 0 100%; margin: 0; }
  header.proud-mast nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.proud-mast nav li { margin: 0; padding: 0; }
  header.proud-mast nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.proud-mast .arrow-tel-action { display: none; }

  header.proud-mast.trim-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: glide-top 0.2s ease-out;
  }
  header.proud-mast.trim-top .inner-gantry {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.proud-mast.trim-top > :not(.inner-gantry):not(nav):not(script),
  header.proud-mast.trim-top > .inner-gantry > :not(.thread-escutcheon):not(.route-toggle):not(nav),
  header.proud-mast.trim-top nav { display: none; }
  header.proud-mast.trim-top .thread-escutcheon {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.proud-mast.trim-top .thread-escutcheon > * { white-space: nowrap; }
  header.proud-mast.trim-top .thread-escutcheon {
    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.proud-mast.trim-top .thread-escutcheon .tan-mark { width: 26px; height: 26px; }
  header.proud-mast.trim-top .route-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(211, 222, 234);
    cursor: pointer;
  }
  header.proud-mast .route-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.proud-mast.menu-open .route-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.proud-mast.menu-open .route-toggle span:nth-child(2) { opacity: 0; }
  header.proud-mast.menu-open .route-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.proud-mast.trim-top.menu-open nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(18, 60, 105);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.proud-mast.trim-top.menu-open nav { display: flex; flex-direction: column; gap: 0; }
  header.proud-mast.trim-top.menu-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) {
  .tall-pinned-call { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .tall-pinned-call-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .tall-pinned-call .tall-pinned-call-call, .tall-pinned-call .tall-pinned-call-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .tall-pinned-call-inner > :not(a) { display: none; }
}
@keyframes glide-top { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.proud-mast.trim-top { animation: none; }
  header.proud-mast .route-toggle span { transition: none; }
}

/* --- Phone detail (2026-10-15) ---
   At 320px "Describe the Fence" still touched the edge of its button. */
@media (max-width: 380px) {
  .tall-pinned-call-inner { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .tall-pinned-call .tall-pinned-call-quote { padding-left: 4px; padding-right: 4px; font-size: 0.76rem; }
}

.upload-field input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; color: #222; font-size: 0.9rem; }
.upload-field label span { font-weight: 400; opacity: 0.7; }
.attach-tip { 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, .image-alert:empty { display: none; }
.upload-list li { padding: 2px 0; overflow-wrap: anywhere; }
.image-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) {
  li.wheat-phase-card.wheat-phase-card,
  section,
  section.lower-alt.lower-alt,
  section.lucid-closer.lucid-closer,
  section.upper-reel.lower-alt.upper-reel,
  section.violet-overlook.forge-has-image.violet-overlook,
  section.violet-overlook.violet-overlook { 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.proud-mast div.inner-gantry { padding-top: 6px; padding-bottom: 6px; }
}

header.proud-mast #site-menu .group-slot { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.proud-mast #site-menu .arrow-toggle {
  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(211, 222, 234); cursor: pointer;
}
header.proud-mast #site-menu .arrow-toggle::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.proud-mast #site-menu .group-slot.showing-node > .arrow-toggle::before { transform: rotate(180deg); }
header.proud-mast #site-menu .second-sheet {
  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(18, 60, 105); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.proud-mast #site-menu .second-sheet[data-cols="2"] { columns: 2; min-width: 400px; }
header.proud-mast #site-menu .second-sheet[data-cols="3"] { columns: 3; min-width: 560px; }
header.proud-mast #site-menu .group-slot.showing-node > .second-sheet { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.proud-mast #site-menu .group-slot:hover > .second-sheet { display: block; }
}
header.proud-mast #site-menu .second-sheet a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(211, 222, 234); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.proud-mast #site-menu .second-sheet a:hover, header.proud-mast #site-menu .second-sheet a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.proud-mast #site-menu .second-sheet a.every-link { 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.proud-mast #site-menu .group-slot { position: static; flex-wrap: wrap; justify-content: center; }
  header.proud-mast #site-menu .group-slot.showing-node { flex-basis: 100%; }
  header.proud-mast #site-menu .arrow-toggle { width: 18px; height: 34px; margin-left: 2px; }
  header.proud-mast #site-menu .second-sheet, header.proud-mast #site-menu .second-sheet[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.proud-mast #site-menu .group-slot.showing-node > .second-sheet { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.proud-mast #site-menu .group-slot.showing-node > .second-sheet[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.proud-mast #site-menu .second-sheet a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.proud-mast #site-menu .second-sheet a.every-link { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.proud-mast.trim-top.menu-open #site-menu { flex-wrap: nowrap; }
  header.proud-mast.trim-top.menu-open #site-menu > * { flex-shrink: 0; }
  header.proud-mast.trim-top.menu-open #site-menu .group-slot { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.proud-mast.trim-top.menu-open #site-menu .group-slot > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.proud-mast.trim-top.menu-open #site-menu .arrow-toggle { width: 52px; height: 48px; }
  header.proud-mast.trim-top.menu-open #site-menu .second-sheet { margin: 0; border-radius: 0; }
  header.proud-mast.trim-top.menu-open #site-menu .second-sheet 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.proud-mast #site-menu .arrow-toggle::before { transition: none; } }