/* Round Rock Roofing & Siding
   Plain CSS, system fonts, one file.

   Palette
     --rimrock         #6b3a2a  weathered red-brown: header, footer, closing band
     --clayline         #94604c  lighter clay: borders, bar fills
     --creekwater      #0f5f78  blue-green: buttons, links, labels
     --creekwater-deep #0a4a5e  pressed and hover state
     --wheat           #ffcf5c  yellow: small marks only

   Contrast figures are listed at the end of the file.
*/

:root {
  --rimrock: #6b3a2a;
  --shore-gauze: 107, 58, 42;          /* --rimrock as channels, for the home photo */
  --clayline: #94604c;
  --creekwater: #0f5f78;
  --creekwater-deep: #0a4a5e;
  --wheat: #ffcf5c;
  --garnet-paper: #f7f4f0;
  --fiber-clear: #ffffff;
  --gamma-body-c: #231c19;
  --sprig-understated: #5f544e;
  --west-divide: #dcd3ca;
  --linen: #ece5dd;
  --clover-radius: 4px;
  --pearl-measure: 1080px;
  --kite-sticky-h: 64px;                 /* bottom bar: 10 + 44 + 10 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--kite-sticky-h);
  background: var(--garnet-paper);
  color: var(--gamma-body-c);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { display: block; max-width: 100%; }
a { color: var(--creekwater); text-underline-offset: 3px; }
a:hover { color: var(--creekwater-deep); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; font-weight: 700; }
h2 { font-size: 1.7rem; margin: 0 0 14px; color: var(--rimrock); }
h3 { font-size: 1.12rem; margin: 0 0 6px; color: var(--gamma-body-c); }
blockquote { margin: 0 0 16px; padding: 14px 18px; border-left: 5px solid var(--wheat); background: var(--fiber-clear); font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; max-width: 760px; }
.spindle-spread { max-width: var(--pearl-measure); margin: 0 auto; padding: 0 20px; }

/* ---- header: name and phone on one row, links on the next ---- */
header.dune-brandbar { background: var(--rimrock); color: var(--fiber-clear); }
header.dune-brandbar .tandem-span {
  max-width: calc(var(--pearl-measure) + 40px); margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
header.dune-brandbar .relay-house-name { display: inline-flex; align-items: center; gap: 10px; color: var(--fiber-clear); text-decoration: none; }
.cedar-glyph-logo { width: 44px; height: 44px; flex: none; }
.brand-words { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1.15; }
.brand-words b { display: block; font-size: 1.3rem; color: var(--wheat); }
header.dune-brandbar .vital-connect-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 16px; border-radius: var(--clover-radius); background: var(--creekwater);
  color: var(--fiber-clear); font-weight: 700; text-decoration: none;
}
header.dune-brandbar .vital-connect-btn:hover { background: var(--creekwater-deep); }
header.dune-brandbar nav { background: #55291b; }
header.dune-brandbar .nav-row { max-width: calc(var(--pearl-measure) + 40px); margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 0 22px; }
header.dune-brandbar nav a { color: #eadcd4; font-size: 0.93rem; text-decoration: none; padding: 9px 0; border-bottom: 3px solid transparent; }
header.dune-brandbar nav a:hover { color: var(--fiber-clear); border-bottom-color: var(--wheat); }
@media (max-width: 560px) {
  header.dune-brandbar .tandem-span { flex-direction: column; align-items: stretch; text-align: left; }
  header.dune-brandbar .vital-connect-btn { justify-content: center; }
  header.dune-brandbar .nav-row { gap: 0 16px; }
}

/* ---- home page photo band ---- */
.chord-prologue { background: var(--rimrock); color: var(--fiber-clear); padding: 46px 20px 42px; }
.chord-prologue .spindle-spread { padding: 0; }
.chord-prologue .coral-supertitle { margin: 0 0 12px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wheat); }
.chord-prologue h1 { margin: 0 0 16px; max-width: 760px; font-size: 2.35rem; }
.chord-prologue p.arrow-blurb { margin: 0 0 22px; max-width: 660px; font-size: 1.08rem; color: #f3e9e3; }
.chord-prologue .heath-prompt-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chord-prologue .rare-codicil { margin: 18px 0 0; max-width: 620px; font-size: 0.88rem; color: #eadcd4; }
.chord-prologue.gauge-photo-led {
  min-height: 540px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--shore-gauze), 0.97) 0%, rgba(var(--shore-gauze), 0.92) 52%, rgba(var(--shore-gauze), 0.45) 78%, rgba(var(--shore-gauze), 0.12) 100%),
    url('/images/hero-street-after-hail.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.chord-prologue.gauge-photo-led .spindle-spread { width: 100%; }
@media (max-width: 820px) {
  .chord-prologue h1 { font-size: 1.75rem; }
  .chord-prologue.gauge-photo-led {
    min-height: 440px;
    background-image:
      linear-gradient(180deg, rgba(var(--shore-gauze), 0.95) 0%, rgba(var(--shore-gauze), 0.9) 60%, rgba(var(--shore-gauze), 0.8) 100%),
      url('/images/hero-street-after-hail-mobile.jpg');
  }
}

/* ---- top of every other page: light band, colored rule on the left ---- */
.page-top { padding: 30px 20px 30px; background: var(--fiber-clear); border-bottom: 1px solid var(--west-divide); }
.page-top .spindle-spread { padding: 0 0 0 20px; border-left: 6px solid var(--wheat); }
.page-top .coral-supertitle { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--creekwater); }
.page-top h1 { margin: 0 0 12px; max-width: 820px; font-size: 2.05rem; color: var(--rimrock); }
.page-top p.arrow-blurb { margin: 0 0 18px; max-width: 700px; font-size: 1.08rem; color: var(--sprig-understated); }
.page-top .heath-prompt-row { display: flex; flex-wrap: wrap; gap: 12px; }
.page-top .olive-btn.arrow-secondary-el { border-color: var(--creekwater); color: var(--creekwater); }
.page-top .olive-btn.arrow-secondary-el:hover { background: var(--creekwater); color: var(--fiber-clear); }
.page-top .hatch-patches { margin-top: 6px; }
@media (max-width: 820px) { .page-top h1 { font-size: 1.6rem; } .page-top .spindle-spread { padding-left: 14px; } }

/* ---- buttons ---- */
.olive-btn { display: inline-block; padding: 12px 22px; border-radius: var(--clover-radius); font-weight: 700; text-decoration: none; }
.olive-btn.primrose-primary { background: var(--creekwater); color: var(--fiber-clear); }
.olive-btn.primrose-primary:hover { background: var(--creekwater-deep); color: var(--fiber-clear); }
.olive-btn.arrow-secondary-el { padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.7); color: var(--fiber-clear); }
.olive-btn.arrow-secondary-el:hover { background: rgba(255, 255, 255, 0.16); color: var(--fiber-clear); }

/* ---- sections ---- */
section { padding: 42px 20px; }
section.fiber-washed { background: var(--fiber-clear); border-top: 1px solid var(--west-divide); border-bottom: 1px solid var(--west-divide); }
section .spindle-spread { padding: 0; }
.flute-section-tag { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--creekwater); }
section p, section li { max-width: 740px; }
.copy ul, .copy ol { padding-left: 22px; margin: 0 0 16px; }
.copy li { margin-bottom: 8px; }
.copy h3 { margin-top: 22px; }

/* the three-line answer at the top of a page */
.three-lines { position: relative; max-width: 740px; margin: 0 0 24px; padding: 22px 20px 14px; background: var(--linen); border-radius: var(--clover-radius); }
.three-lines-tag { position: absolute; top: -11px; left: 14px; padding: 2px 10px; border-radius: 3px; background: var(--rimrock); color: var(--fiber-clear); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.three-lines p { margin: 0 0 8px; padding-left: 18px; position: relative; }
.three-lines p::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--clayline); }

/* where a number came from */
.source-line { max-width: 740px; margin: 0 0 16px; font-size: 0.85rem; color: var(--sprig-understated); font-style: italic; }

/* things this site stays out of */
.outside-scope { max-width: 740px; margin: 18px 0; padding: 14px 18px; border: 1px dashed var(--clayline); border-radius: var(--clover-radius); background: var(--garnet-paper); }
section.fiber-washed .outside-scope { background: var(--garnet-paper); }
.outside-scope p { margin: 0; font-size: 0.95rem; color: var(--sprig-understated); }
.outside-scope p + p { margin-top: 8px; }

/* the owner's own inspection list */
.owner-check { max-width: 780px; margin: 0 0 18px; padding: 20px 22px 12px; background: var(--fiber-clear); border: 2px solid var(--rimrock); border-radius: var(--clover-radius); }
section.fiber-washed .owner-check { background: var(--garnet-paper); }
.owner-check h3 { margin: 0 0 12px; color: var(--rimrock); }
.owner-check ol { list-style: none; margin: 0; padding: 0; counter-reset: chk; }
.owner-check li { counter-increment: chk; position: relative; margin: 0 0 10px; padding-left: 40px; max-width: none; }
.owner-check li::before { content: counter(chk); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border: 2px solid var(--creekwater); border-radius: 3px; color: var(--creekwater); font-weight: 700; font-size: 0.85rem; text-align: center; line-height: 22px; }

/* hail reports as a vertical timeline */
.storm-clock { list-style: none; margin: 0 0 16px; padding: 0 0 0 14px; max-width: 760px; border-left: 3px solid var(--clayline); }
.storm-clock li { position: relative; display: grid; grid-template-columns: 84px 76px 1fr; gap: 10px; align-items: baseline; padding: 7px 0 7px 14px; max-width: none; }
.storm-clock li::before { content: ""; position: absolute; left: -22px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--garnet-paper); border: 3px solid var(--clayline); }
.storm-clock li.official::before { background: var(--wheat); border-color: var(--rimrock); }
.storm-clock time { font-weight: 700; color: var(--rimrock); }
.storm-clock .size { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 700; }
.storm-clock .where { color: var(--sprig-understated); font-size: 0.95rem; }
section.fiber-washed .storm-clock li::before { background: var(--fiber-clear); }
section.fiber-washed .storm-clock li.official::before { background: var(--wheat); }
@media (max-width: 520px) { .storm-clock li { grid-template-columns: 70px 62px 1fr; gap: 6px; } }

/* decade chart: widths are set inline */
.era-rows { list-style: none; margin: 0 0 14px; padding: 0; max-width: 780px; }
.era-rows li { display: grid; grid-template-columns: 104px 1fr 56px; align-items: center; gap: 12px; padding: 4px 0; max-width: none; }
.era-rows .span-yrs { font-size: 0.93rem; font-weight: 700; }
.era-rows .decade-track { height: 18px; background: var(--linen); }
.era-rows .decade-fill { display: block; height: 100%; background: var(--clayline); }
.era-rows .most .decade-fill { background: var(--rimrock); }
.era-rows .share { font-size: 0.92rem; color: var(--sprig-understated); text-align: right; }
@media (max-width: 520px) { .era-rows li { grid-template-columns: 84px 1fr 46px; gap: 8px; } }

/* large numbers with a caption */
.big-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 20px; border-top: 4px solid var(--rimrock); border-bottom: 1px solid var(--west-divide); }
.big-figures p { margin: 0; padding: 16px 18px 16px 0; max-width: none; }
.big-figures p + p { padding-left: 18px; border-left: 1px solid var(--west-divide); }
.big-figures strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1.1; color: var(--rimrock); }
.big-figures span { display: block; margin-top: 6px; font-size: 0.9rem; color: var(--sprig-understated); }
@media (max-width: 760px) {
  .big-figures { grid-template-columns: 1fr; }
  .big-figures p, .big-figures p + p { padding: 14px 0; border-left: 0; }
  .big-figures p + p { border-top: 1px solid var(--west-divide); }
}

/* roof list beside wall list */
.two-trades { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.two-trades h3 { padding-bottom: 6px; border-bottom: 2px solid var(--rimrock); font-size: 1.25rem; color: var(--rimrock); }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { padding: 10px 0; border-bottom: 1px solid var(--west-divide); max-width: none; }
.job-list a { display: block; font-weight: 700; text-decoration: none; }
.job-list a:hover { text-decoration: underline; }
.job-list span { display: block; font-size: 0.93rem; color: var(--sprig-understated); }
@media (max-width: 800px) { .two-trades { grid-template-columns: 1fr; gap: 26px; } }

/* tables */
.indigo-table-slide { max-width: 900px; margin: 0 0 16px; overflow-x: auto; }
.indigo-table-slide table { width: 100%; border-collapse: collapse; background: var(--fiber-clear); font-size: 0.95rem; }
.indigo-table-slide th, .indigo-table-slide td { padding: 10px 14px; text-align: left; vertical-align: top; border: 1px solid var(--west-divide); }
.indigo-table-slide th { background: var(--rimrock); color: var(--fiber-clear); font-weight: 700; }
.indigo-table-slide td:first-child { font-weight: 700; }
.report-log td:nth-child(2) { white-space: nowrap; }
.count-table { max-width: 320px; }
@media (max-width: 640px) { .rule-pair, .report-log, .place-table { min-width: 520px; } }

/* cards */
.low-tiles { display: grid; gap: 14px; }
.low-tiles.opal-couplet { grid-template-columns: repeat(2, 1fr); }
.low-tiles.basin-split-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .low-tiles.basin-split-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .low-tiles.opal-couplet, .low-tiles.basin-split-3 { grid-template-columns: 1fr; } }
.calm-unit { padding: 16px 18px; background: var(--fiber-clear); border: 1px solid var(--west-divide); border-top: 3px solid var(--clayline); border-radius: 0 0 var(--clover-radius) var(--clover-radius); }
section.fiber-washed .calm-unit { background: var(--garnet-paper); }
.calm-unit p { margin: 0 0 8px; font-size: 0.95rem; color: var(--sprig-understated); }
.calm-unit a { font-weight: 700; font-size: 0.93rem; }
.era-tag { display: block; margin-bottom: 6px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--creekwater); }

/* how a request is passed along */
.handover { list-style: none; counter-reset: rel; margin: 0; padding: 0; max-width: 760px; }
.handover li { counter-increment: rel; position: relative; padding: 0 0 16px 50px; max-width: none; }
.handover li::before { content: counter(rel); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--rimrock); color: var(--fiber-clear); font-weight: 700; text-align: center; line-height: 32px; }
.handover strong { display: block; }
.handover span { color: var(--sprig-understated); font-size: 0.96rem; }

/* questions that open and close */
.asked-rows { max-width: 800px; border-top: 1px solid var(--west-divide); }
.solid-question { border-bottom: 1px solid var(--west-divide); }
.solid-question summary { padding: 13px 26px 13px 0; cursor: pointer; font-weight: 700; }
.solid-question summary:hover { color: var(--creekwater); }
.solid-question p { margin: 0 0 14px; color: var(--sprig-understated); }
/* questions printed open, two across, on the home page */
.qa-open { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; margin: 0 0 16px; }
.qa-pair h3 { font-family: inherit; font-size: 1rem; }
.qa-pair p { margin: 0; color: var(--sprig-understated); font-size: 0.96rem; }
@media (max-width: 760px) { .qa-open { grid-template-columns: 1fr; } }

/* rows of plain links */
.next-reads { padding-top: 26px; padding-bottom: 26px; }
.hatch-patches { display: flex; flex-wrap: wrap; gap: 8px; }
.hatch-patches a { padding: 6px 12px; border-radius: 3px; border: 1px solid var(--clayline); background: var(--fiber-clear); color: var(--rimrock); font-size: 0.92rem; text-decoration: none; }
.hatch-patches a:hover { background: var(--rimrock); color: var(--fiber-clear); }

/* closing band */
.hatch-closer { padding: 38px 20px; background: var(--rimrock); color: var(--fiber-clear); border-top: 5px solid var(--wheat); }
.hatch-closer h2 { color: var(--fiber-clear); margin-bottom: 8px; }
.hatch-closer p { margin: 0 0 18px; max-width: 640px; color: #eadcd4; }
.hatch-closer .olive-btn { margin: 0 8px 8px 0; }

/* contact page */
.reach-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
@media (max-width: 860px) { .reach-cols { grid-template-columns: 1fr; gap: 28px; } }
.phone-line { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; }
form.whistle-quote-form { display: grid; gap: 14px; max-width: 520px; }
form.whistle-quote-form label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 700; }
form.whistle-quote-form input, form.whistle-quote-form select, form.whistle-quote-form textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #8b7f78; border-radius: var(--clover-radius);
  background: var(--fiber-clear); color: var(--gamma-body-c); font: inherit;
}
form.whistle-quote-form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.whistle-quote-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.whistle-quote-form .khaki-proviso { margin: 0; font-size: 0.82rem; color: var(--sprig-understated); }
form.whistle-quote-form .copper-extra-detail { position: absolute; left: -9999px; top: -9999px; }
.proud-acknowledgement { display: none; padding: 11px 14px; border-radius: var(--clover-radius); font-size: 0.93rem; }
.proud-acknowledgement.visible { display: block; }
.proud-acknowledgement.success { background: #e0f2e8; color: #14532d; }
.proud-acknowledgement.error { background: #fbe6ea; color: #8f1a2e; }
.signal-openly { max-width: 740px; margin-top: 20px; padding: 12px 16px; border-radius: var(--clover-radius); background: var(--linen); color: var(--sprig-understated); font-size: 0.9rem; }

/* breadcrumb */
.spindle-breadcrumbs { max-width: calc(var(--pearl-measure) + 40px); margin: 0 auto; padding: 10px 20px; font-size: 0.84rem; color: var(--sprig-understated); background: var(--garnet-paper); }
.spindle-breadcrumbs a { color: var(--sprig-understated); }

/* footer */
footer.dune-brandbar { padding: 34px 20px 18px; background: #2e1a13; color: #c9b9b0; font-size: 0.9rem; }
footer.dune-brandbar .spindle-spread { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 28px; padding: 0; }
footer.dune-brandbar h2 { margin: 0 0 10px; font-size: 1rem; color: var(--wheat); }
footer.dune-brandbar p { margin: 0; }
footer.dune-brandbar ul { list-style: none; margin: 0; padding: 0; }
footer.dune-brandbar li { margin-bottom: 6px; }
footer.dune-brandbar a { color: #c9b9b0; text-decoration: none; }
footer.dune-brandbar a:hover { color: var(--fiber-clear); text-decoration: underline; }
footer.dune-brandbar .meadow-last-row { max-width: var(--pearl-measure); margin: 24px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8rem; }
footer.dune-brandbar .meadow-last-row span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.dune-brandbar .spindle-spread { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { footer.dune-brandbar .spindle-spread { grid-template-columns: 1fr; } }

/* bar fixed to the bottom of the screen */
.noble-dockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #2e1a13; border-top: 3px solid var(--wheat);
}
.noble-dockbar-inner { display: flex; gap: 10px; max-width: var(--pearl-measure); margin: 0 auto; }
.noble-dockbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 12px; border-radius: var(--clover-radius); font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; text-decoration: none;
}
.noble-dockbar .atoll-receiver { flex: none; }
.noble-dockbar-call { flex: 3; background: var(--creekwater); color: var(--fiber-clear); }
.noble-dockbar-call:hover { background: var(--creekwater-deep); color: var(--fiber-clear); }
.noble-dockbar-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.6); color: var(--fiber-clear); }
.noble-dockbar-quote:hover { background: rgba(255, 255, 255, 0.16); color: var(--fiber-clear); }
.noble-dockbar .lumen-bar-note { display: none; }
@media (min-width: 700px) { .noble-dockbar .lumen-bar-note { display: inline; } }
@media (min-width: 780px) {
  .noble-dockbar-inner { justify-content: center; }
  .noble-dockbar a { flex: 0 0 auto; padding: 0 26px; font-size: 0.96rem; }
}

/* owner comments, shown only when enabled in the settings file */
.fern-accounts .ferry-testimonial p { color: var(--gamma-body-c); }
.fern-accounts .brook-scoring { margin: 0 0 6px; color: var(--rimrock); letter-spacing: 2px; }
.fern-accounts .tidy-attribution { font-size: 0.88rem; color: var(--sprig-understated); }

/* flags a value that has not been filled in yet */
.flint-pending-value { padding: 1px 6px; border: 1px dashed #a08a00; background: #fff7cc; color: #574a00; font-size: 0.85em; }

/* one photo on each roof or wall page, width-capped */
.cobble-documentary { max-width: calc(var(--pearl-measure) + 40px); margin: 0 auto; padding: 26px 20px 6px; }
.cobble-documentary img { width: 100%; max-width: 720px; height: auto; margin: 0; border: 6px solid var(--fiber-clear); box-shadow: 0 1px 6px rgba(35, 28, 25, 0.3); }

/* home page photo block: fourteen pictures, seven across on wide screens and
   two across below 900px, so every row is full. height:auto keeps the height
   attribute from overriding aspect-ratio. */
.sail-jobstrip .lupine-smalls { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sail-jobstrip img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fiber-clear); }
@media (max-width: 900px) { .sail-jobstrip .lupine-smalls { grid-template-columns: repeat(2, 1fr); gap: 6px; } }

/* Contrast, measured (4.5:1 for body text, 3:1 for large text)
     --gamma-body-c on --garnet-paper                    15.30
     --sprig-understated on --garnet-paper                   6.69
     --sprig-understated on white                  7.33
     --sprig-understated on --linen                 5.87
     white on --rimrock                9.28
     white on --creekwater             7.17
     white on --creekwater-deep        9.75
     --creekwater on --garnet-paper              6.54
     --creekwater on white             7.17
     --creekwater on --linen            5.74
     --rimrock on --garnet-paper                 8.46
     --rimrock on white                9.28
     --rimrock on --linen               7.43
     nav #eadcd4 on #55291b            8.9
     lead #f3e9e3 on --rimrock         7.76
     note #eadcd4 on --rimrock         6.93
     --wheat on --rimrock              6.33
     --wheat on #2e1a13               11.26
     footer #c9b9b0 on #2e1a13         8.68
     success #14532d on #e0f2e8        7.82
     error #8f1a2e on #fbe6ea          7.48
     #574a00 on #fff7cc                8.15
   --clayline is used for rules, bar fills and borders only, never for text. */

/* --- 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 .folded-top past the header's own height and .pages-open while
   the menu is open. */
header.dune-brandbar .page-latch { display: none; }
@media (max-width: 820px) {
  header.dune-brandbar { position: static; }
  header.dune-brandbar > .tandem-span {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.dune-brandbar .relay-house-name {
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.31vw, 1.06rem);
  }
  header.dune-brandbar .relay-house-name * { white-space: nowrap; }
  header.dune-brandbar nav { flex: 1 0 100%; margin: 0; }
  header.dune-brandbar nav > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.dune-brandbar nav li { margin: 0; padding: 0; }
  header.dune-brandbar nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.dune-brandbar .vital-connect-btn { display: none; }

  header.dune-brandbar.folded-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-crest 0.2s ease-out;
  }
  header.dune-brandbar.folded-top > .tandem-span {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.dune-brandbar.folded-top > :not(.tandem-span):not(nav):not(script),
  header.dune-brandbar.folded-top > .tandem-span > :not(.relay-house-name):not(.page-latch):not(nav),
  header.dune-brandbar.folded-top nav { display: none; }
  header.dune-brandbar.folded-top .relay-house-name {
    flex: 0 1 auto;
    min-width: 0;
    
    min-height: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.81rem, 5.31vw, 1.06rem);
  }
  header.dune-brandbar.folded-top .relay-house-name .cedar-glyph-logo { width: 26px; height: 26px; }
  header.dune-brandbar.folded-top .page-latch {
    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(234, 220, 212);
    cursor: pointer;
  }
  header.dune-brandbar .page-latch span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.dune-brandbar.pages-open .page-latch span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.dune-brandbar.pages-open .page-latch span:nth-child(2) { opacity: 0; }
  header.dune-brandbar.pages-open .page-latch span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.dune-brandbar.folded-top.pages-open nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(107, 58, 42);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.dune-brandbar.folded-top.pages-open nav > div { display: flex; flex-direction: column; gap: 0; }
  header.dune-brandbar.folded-top.pages-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) {
  .noble-dockbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .noble-dockbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .noble-dockbar .noble-dockbar-quote, .noble-dockbar .noble-dockbar-call { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .noble-dockbar-inner > :not(a) { display: none; }
}
@keyframes glide-crest { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.dune-brandbar.folded-top { animation: none; }
  header.dune-brandbar .page-latch 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; }
.upload-note { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.attach-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.attach-list:empty, .upload-alert:empty { display: none; }
.attach-list 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.chord-prologue.gauge-photo-led.chord-prologue,
  section.fiber-washed.fiber-washed,
  section.hatch-closer.hatch-closer,
  section.next-reads.next-reads,
  section.sail-jobstrip.sail-jobstrip { 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.dune-brandbar div.tandem-span { padding-top: 6px; padding-bottom: 6px; }
}

header.dune-brandbar #top-pages .drop-cell { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.dune-brandbar #top-pages .fin-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(234, 220, 212); cursor: pointer;
}
header.dune-brandbar #top-pages .fin-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.dune-brandbar #top-pages .drop-cell.flared-stem > .fin-toggle::before { transform: rotate(180deg); }
header.dune-brandbar #top-pages .lower-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(107, 58, 42); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.dune-brandbar #top-pages .lower-sheet[data-cols="2"] { columns: 2; min-width: 400px; }
header.dune-brandbar #top-pages .lower-sheet[data-cols="3"] { columns: 3; min-width: 560px; }
header.dune-brandbar #top-pages .drop-cell.flared-stem > .lower-sheet { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.dune-brandbar #top-pages .drop-cell:hover > .lower-sheet { display: block; }
}
header.dune-brandbar #top-pages .lower-sheet a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(234, 220, 212); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.dune-brandbar #top-pages .lower-sheet a:hover, header.dune-brandbar #top-pages .lower-sheet a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.dune-brandbar #top-pages .lower-sheet a.root-way { 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.dune-brandbar #top-pages .drop-cell { position: static; flex-wrap: wrap; justify-content: center; }
  header.dune-brandbar #top-pages .drop-cell.flared-stem { flex-basis: 100%; }
  header.dune-brandbar #top-pages .fin-toggle { width: 18px; height: 34px; margin-left: 2px; }
  header.dune-brandbar #top-pages .lower-sheet, header.dune-brandbar #top-pages .lower-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.dune-brandbar #top-pages .drop-cell.flared-stem > .lower-sheet { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.dune-brandbar #top-pages .drop-cell.flared-stem > .lower-sheet[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.dune-brandbar #top-pages .lower-sheet a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.dune-brandbar #top-pages .lower-sheet a.root-way { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.dune-brandbar.folded-top.pages-open #top-pages { flex-wrap: nowrap; }
  header.dune-brandbar.folded-top.pages-open #top-pages > * { flex-shrink: 0; }
  header.dune-brandbar.folded-top.pages-open #top-pages .drop-cell { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.dune-brandbar.folded-top.pages-open #top-pages .drop-cell > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.dune-brandbar.folded-top.pages-open #top-pages .fin-toggle { width: 52px; height: 48px; }
  header.dune-brandbar.folded-top.pages-open #top-pages .lower-sheet { margin: 0; border-radius: 0; }
  header.dune-brandbar.folded-top.pages-open #top-pages .lower-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.dune-brandbar #top-pages .fin-toggle::before { transition: none; } }