/* McKinney Duct Pros. One hand-kept stylesheet, system fonts, nothing to compile.

   Colors. --attic is the dark chrome (header, footer bar, closing band).
   --trunk is the mid blue the plain page banners fade toward. --damper is
   the action color: buttons, text links, small labels. --damper-deep is its
   hover. --foil is a small-area yellow for rules and markers.

   Contrast, measured (WCAG AA wants 4.5:1 for body text, 3:1 for large):
     --fjord-fg #16222a on --mint-surface #f5f8fa ................. 15.19:1
     --sage-understated #51626d on --mint-surface / white / #e3ecf1 ..... 5.93 / 6.33 / 5.29:1
     white on --attic #1f3b4d ...................... 11.73:1
     white on --trunk #35607a ...................... 6.76:1
     white on --damper #8a2f8a ..................... 7.36:1
     white on --damper-deep #6c226c ................ 10.08:1
     --damper on --mint-surface / white (links, labels) ...... 6.90 / 7.36:1
     --damper-deep on --mint-surface (link hover) ............ 9.45:1
     --attic on --mint-surface (headings) .................... 10.99:1
     nav link #d5e2ea on --attic ................... 8.88:1
     banner lead #e4edf2 on --attic / --trunk ...... 9.88 / 5.70:1
     banner note #d0dde5 on --attic / --trunk ...... 8.46 / 4.88:1
     --foil #f7e04a on --attic (brand word) ........ 8.77:1
     --fjord-fg on --foil ............................... 12.12:1
     footer text #a9bdc9 on #14262f ................ 8.02:1
     --attic on #e3ecf1 (table head, decade tag) ... 9.79:1
     success #1d5a2e on #e5f2e8 .................... 7.12:1
     error #9b1b2a on #fbe8ea ...................... 6.90:1
   Banners run --attic to --trunk, so banner text is checked at both ends.
*/

:root {
  --attic: #1f3b4d;
  /* the same color as three channels, for the photo overlay */
  --ivy-gauze: 31, 59, 77;
  --trunk: #35607a;
  --damper: #8a2f8a;
  --damper-deep: #6c226c;
  --foil: #f7e04a;
  --mint-surface: #f5f8fa;
  --vista-paper-w: #ffffff;
  --fjord-fg: #16222a;
  --sage-understated: #51626d;
  --pagoda-edge: #d9e2e8;
  --sincere-softening: 3px;
  --canvas-bound-c: 1100px;
  /* height of the fixed call bar: 9px padding, 10px button padding, 22px line */
  --ivory-dock-h: 62px;
}
@media (min-width: 760px) { :root { --ivory-dock-h: 66px; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  color: var(--fjord-fg);
  background: var(--mint-surface);
  line-height: 1.62;
  padding-bottom: var(--ivory-dock-h);
}
img { max-width: 100%; display: block; }
a { color: var(--damper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--damper-deep); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.teal-runway { max-width: var(--canvas-bound-c); margin: 0 auto; padding: 0 24px; }

/* header */
header.hub-masthead { background: var(--attic); color: var(--vista-paper-w); border-bottom: 3px solid var(--foil); }
header.hub-masthead .spindle-runner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 16px; padding: 11px 24px; max-width: var(--canvas-bound-c); margin: 0 auto;
}
header.hub-masthead .palette-identity {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.2rem;
  color: var(--vista-paper-w); text-decoration: none;
}
header.hub-masthead .palette-identity span { color: var(--foil); }
.granite-cartouche { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
header.hub-masthead nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
header.hub-masthead nav a { color: #d5e2ea; font-size: 0.93rem; text-decoration: none; }
header.hub-masthead nav a:hover { color: var(--vista-paper-w); text-decoration: underline; }
header.hub-masthead .cyan-tel-action {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--damper); color: var(--vista-paper-w); padding: 8px 16px;
  border-radius: var(--sincere-softening); font-weight: 700; text-decoration: none;
}
header.hub-masthead .cyan-tel-action:hover { background: var(--damper-deep); }
@media (max-width: 1040px) {
  header.hub-masthead nav { order: 3; flex: 1 0 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  header.hub-masthead .spindle-runner { justify-content: center; }
  header.hub-masthead nav { justify-content: center; }
}

/* page banner */
.yarrow-opener { background: linear-gradient(100deg, var(--attic) 35%, var(--trunk)); color: var(--vista-paper-w); padding: 44px 24px 40px; }
.yarrow-opener .teal-runway { padding: 0; }
.yarrow-opener .stencil-overline {
  display: inline-block; background: var(--foil); color: var(--fjord-fg);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; margin-bottom: 14px;
}
.yarrow-opener h1 { font-size: 2.3rem; line-height: 1.16; margin: 0 0 14px; max-width: 800px; }
.yarrow-opener p.far-overture-copy { font-size: 1.1rem; color: #e4edf2; max-width: 680px; margin: 0 0 18px; }
.yarrow-opener .keel-options-row { display: flex; gap: 12px; flex-wrap: wrap; }
.yarrow-opener .moss-gloss { font-size: 0.9rem; color: #d0dde5; margin: 14px 0 0; max-width: 640px; }
.yarrow-opener.brisk-plated {
  background-image:
    linear-gradient(90deg, rgba(var(--ivy-gauze), 0.95) 0%, rgba(var(--ivy-gauze), 0.84) 45%, rgba(var(--ivy-gauze), 0.35) 75%, rgba(var(--ivy-gauze), 0.10) 100%),
    url('/images/hero-duct-photo.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
  min-height: 500px; display: flex; align-items: center;
}
.yarrow-opener.brisk-plated .teal-runway { width: 100%; }
@media (max-width: 820px) {
  .yarrow-opener h1 { font-size: 1.7rem; }
  .yarrow-opener.brisk-plated {
    background-image:
      linear-gradient(180deg, rgba(var(--ivy-gauze), 0.92) 0%, rgba(var(--ivy-gauze), 0.86) 60%, rgba(var(--ivy-gauze), 0.72) 100%),
      url('/images/hero-duct-photo-mobile.jpg');
    min-height: 430px;
  }
}

/* buttons */
.haven-cta { display: inline-block; padding: 12px 22px; border-radius: var(--sincere-softening); font-weight: 700; font-size: 1rem; text-decoration: none; }
.haven-cta.deep-foremost { background: var(--damper); color: var(--vista-paper-w); }
.haven-cta.deep-foremost:hover { background: var(--damper-deep); color: var(--vista-paper-w); }
.haven-cta.sand-outline { background: transparent; color: var(--vista-paper-w); border: 2px solid rgba(255,255,255,0.55); padding: 10px 20px; }
.haven-cta.sand-outline:hover { background: rgba(255,255,255,0.14); color: var(--vista-paper-w); }

/* sections */
section { padding: 44px 24px; }
section.trim-tinted { background: var(--vista-paper-w); }
section .teal-runway { padding: 0; }
.square-band-label { font-size: 0.8rem; font-weight: 700; color: var(--damper); margin-bottom: 4px; }
.square-band-label::before { content: ""; display: inline-block; width: 22px; height: 3px; background: var(--foil); vertical-align: middle; margin-right: 8px; }
h2 { font-size: 1.65rem; line-height: 1.22; margin: 0 0 14px; color: var(--attic); }
h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 6px; color: var(--attic); }
section p, section li { max-width: 770px; }
ul.duct-notes, ol.duct-notes { padding-left: 22px; margin: 0 0 16px; }
ul.duct-notes li, ol.duct-notes li { margin-bottom: 8px; }

/* the short answer near the top of a page */
.verdict { border: 1px solid var(--pagoda-edge); border-left: 6px solid var(--foil); background: var(--vista-paper-w); padding: 16px 20px; max-width: 770px; margin: 0 0 20px; }
section.trim-tinted .verdict { background: var(--mint-surface); }
.verdict p { margin: 0; }
.verdict p + p { margin-top: 8px; }

/* quoted rule or agency text */
blockquote.rule-quote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--trunk); max-width: 770px; font-family: Georgia, "Times New Roman", serif; }
blockquote.rule-quote p { margin: 0 0 8px; }
blockquote.rule-quote cite { display: block; font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-style: normal; font-size: 0.86rem; color: var(--sage-understated); }

/* tables */
.rudder-table-drag { overflow-x: auto; max-width: 900px; margin-bottom: 16px; }
.bronze-figures { border-collapse: collapse; width: 100%; font-size: 0.95rem; background: var(--vista-paper-w); }
.bronze-figures th, .bronze-figures td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--pagoda-edge); vertical-align: top; }
.bronze-figures th { background: #e3ecf1; color: var(--attic); border-bottom: 2px solid var(--trunk); }
.bronze-figures td:first-child { font-weight: 700; color: var(--attic); white-space: nowrap; }
@media (max-width: 640px) { .bronze-figures td:first-child { white-space: normal; } }

/* grids and cards */
.pearl-matrix { display: grid; gap: 20px; }
.pearl-matrix.arbor-doubleton { grid-template-columns: repeat(2, 1fr); }
.pearl-matrix.nettle-tri { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .pearl-matrix.arbor-doubleton, .pearl-matrix.nettle-tri { grid-template-columns: 1fr; } }
.central-panel { background: var(--vista-paper-w); border: 1px solid var(--pagoda-edge); border-radius: var(--sincere-softening); padding: 18px 20px; }
section.trim-tinted .central-panel { background: var(--mint-surface); }
.central-panel p { margin: 6px 0 0; font-size: 0.96rem; color: var(--sage-understated); }

/* service lists: a term and what it means */
dl.svc-list { margin: 0; }
dl.svc-list dt { font-weight: 700; margin-top: 12px; }
dl.svc-list dt:first-child { margin-top: 0; }
dl.svc-list dd { margin: 2px 0 0; color: var(--sage-understated); font-size: 0.95rem; }

/* decade marker */
.era-key { display: inline-block; background: #e3ecf1; color: var(--attic); font-weight: 700; font-size: 0.82rem; padding: 2px 8px; border-radius: 2px; margin-bottom: 8px; }

/* questions */
.common-asks { max-width: 800px; }
.canvas-topic-block { padding: 14px 0; border-top: 1px solid var(--pagoda-edge); }
.canvas-topic-block:first-child { border-top: 0; padding-top: 0; }
.canvas-topic-block h3 { font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 1.04rem; }
.canvas-topic-block p { margin: 6px 0 0; color: var(--sage-understated); }

/* link pills */
.peony-reach { display: flex; flex-wrap: wrap; gap: 8px; }
.peony-reach a { background: var(--vista-paper-w); border: 1px solid var(--trunk); padding: 7px 13px; border-radius: 20px; color: var(--attic); font-size: 0.92rem; text-decoration: none; }
.peony-reach a:hover { background: var(--attic); color: var(--vista-paper-w); }

/* closing band */
.flat-close-band { background: var(--attic); color: var(--vista-paper-w); padding: 38px 24px; border-top: 3px solid var(--foil); }
.flat-close-band h2 { color: var(--vista-paper-w); margin-bottom: 8px; }
.flat-close-band p { color: #d5e2ea; margin: 0 0 18px; max-width: 640px; }
.flat-close-band .haven-cta { margin: 0 8px 8px 0; }

/* contact form */
form.arbor-intake { display: grid; gap: 13px; max-width: 500px; }
form.arbor-intake label { font-size: 0.88rem; font-weight: 700; color: var(--attic); display: block; margin-bottom: 4px; }
form.arbor-intake input, form.arbor-intake select, form.arbor-intake textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #8fa3b0; border-radius: var(--sincere-softening); font-size: 1rem; font-family: inherit; background: var(--vista-paper-w); color: var(--fjord-fg);
}
form.arbor-intake button { border: 0; cursor: pointer; font-family: inherit; }
form.arbor-intake button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.arbor-intake .tempo-assent-note { font-size: 0.82rem; color: var(--sage-understated); margin: 0; }
form.arbor-intake .true-hp-field { position: absolute; left: -9999px; top: -9999px; }
.walnut-reply-note { padding: 11px 14px; border-radius: var(--sincere-softening); font-size: 0.92rem; display: none; }
.walnut-reply-note.visible { display: block; }
.walnut-reply-note.success { background: #e5f2e8; color: #1d5a2e; }
.walnut-reply-note.error { background: #fbe8ea; color: #9b1b2a; }

/* breadcrumb */
.shore-ariadne { font-size: 0.84rem; color: var(--sage-understated); padding: 12px 24px 0; max-width: var(--canvas-bound-c); margin: 0 auto 12px; }
.shore-ariadne a { color: var(--sage-understated); }

/* referral note */
.forthright { font-size: 0.9rem; color: var(--sage-understated); background: #e3ecf1; padding: 12px 16px; margin-top: 20px; max-width: 770px; }

/* footer */
footer.hub-masthead { background: #14262f; color: #a9bdc9; padding: 34px 24px 20px; font-size: 0.9rem; }
footer.hub-masthead .teal-runway { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; padding: 0; }
footer.hub-masthead h2 { font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--vista-paper-w); font-size: 0.92rem; margin: 0 0 10px; }
footer.hub-masthead p { margin: 0; }
footer.hub-masthead ul { list-style: none; padding: 0; margin: 0; }
footer.hub-masthead li { margin-bottom: 6px; }
footer.hub-masthead a { color: #a9bdc9; }
footer.hub-masthead a:hover { color: var(--vista-paper-w); }
footer.hub-masthead .walnut-footer-lower { max-width: var(--canvas-bound-c); margin: 22px auto 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; }
footer.hub-masthead .walnut-footer-lower span { display: block; margin-bottom: 4px; }
@media (max-width: 760px) { footer.hub-masthead .teal-runway { grid-template-columns: 1fr; gap: 20px; } }

/* fixed call bar, present at every width */
.helm-hoverbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--attic); padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
.helm-hoverbar-inner { display: flex; gap: 10px; max-width: var(--canvas-bound-c); margin: 0 auto; }
.helm-hoverbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  padding: 10px 10px; border-radius: var(--sincere-softening); font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.helm-hoverbar .olive-receiver { flex: none; }
.helm-hoverbar-call { flex: 3; background: var(--damper); color: var(--vista-paper-w); }
.helm-hoverbar-quote { flex: 2; background: transparent; color: var(--vista-paper-w); border: 1px solid rgba(255,255,255,0.5); }
.helm-hoverbar-call:hover { background: var(--damper-deep); color: var(--vista-paper-w); }
.helm-hoverbar-quote:hover { background: rgba(255,255,255,0.16); color: var(--vista-paper-w); }
.helm-hoverbar .isle-footnote-cta { display: none; }
@media (min-width: 580px) { .helm-hoverbar .isle-footnote-cta { display: inline; } }
@media (min-width: 760px) {
  .helm-hoverbar-inner { justify-content: flex-end; }
  .helm-hoverbar a { flex: 0 0 auto; padding: 11px 24px; font-size: 0.96rem; }
}

/* reviews, printed only when switched on */
.ember-said-here .alpha-commendation p { color: var(--fjord-fg); }
.ember-said-here .stencil-stamps-rating { color: var(--damper); letter-spacing: 2px; margin: 0 0 6px; }
.ember-said-here .spiral-source-name { font-size: 0.88rem; color: var(--sage-understated); }

/* marker for a value not filled in yet */
.violet-unfilled { background: #fff6c9; color: #5c4a00; border: 1px dashed #b89b00; padding: 1px 6px; font-size: 0.84em; }

/* one photo per service page; the width cap keeps it from running edge to edge */
.thimble-job-photo { max-width: var(--canvas-bound-c); margin: 0 auto; padding: 0 24px 8px; }
.thimble-job-photo img { display: block; width: 100%; max-width: 720px; height: auto; margin: 0; border: 6px solid var(--vista-paper-w); box-shadow: 0 1px 4px rgba(0,0,0,0.18); }

/* homepage strip: ten small photos, five across, then two across */
.daisy-photo-band .fable-plates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.daisy-photo-band img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 4px solid var(--vista-paper-w); box-shadow: 0 1px 3px rgba(0,0,0,0.16); background: var(--vista-paper-w); }
@media (max-width: 900px) { .daisy-photo-band .fable-plates { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* on phones a wide table scrolls sideways inside its box */
@media (max-width: 640px) { .bronze-figures { min-width: 540px; } }

/* --- 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 .short-state past the header's own height and .nav-out while
   the menu is open. */
header.hub-masthead .page-toggle { display: none; }
@media (max-width: 820px) {
  header.hub-masthead { position: static; }
  header.hub-masthead .spindle-runner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.hub-masthead .palette-identity {
    display: block;
    position: relative;
    padding-left: 42px;
    min-height: 34px;
    line-height: 34px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 6.00vw, 1.2rem);
  }
  header.hub-masthead .palette-identity .granite-cartouche {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.hub-masthead nav { flex: 1 0 100%; margin: 0; }
  header.hub-masthead nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.hub-masthead nav li { margin: 0; padding: 0; }
  header.hub-masthead nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.hub-masthead .cyan-tel-action { display: none; }

  header.hub-masthead.short-state {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: lower-strip 0.2s ease-out;
  }
  header.hub-masthead.short-state .spindle-runner {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.hub-masthead.short-state > :not(.spindle-runner):not(nav):not(script),
  header.hub-masthead.short-state > .spindle-runner > :not(.palette-identity):not(.page-toggle):not(nav),
  header.hub-masthead.short-state nav { display: none; }
  header.hub-masthead.short-state .palette-identity {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.hub-masthead.short-state .palette-identity > * { white-space: nowrap; }
  header.hub-masthead.short-state .palette-identity {
    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.hub-masthead.short-state .palette-identity .granite-cartouche { width: 26px; height: 26px; }
  header.hub-masthead.short-state .page-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, 226, 234);
    cursor: pointer;
  }
  header.hub-masthead .page-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.hub-masthead.nav-out .page-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.hub-masthead.nav-out .page-toggle span:nth-child(2) { opacity: 0; }
  header.hub-masthead.nav-out .page-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.hub-masthead.short-state.nav-out nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(31, 59, 77);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.hub-masthead.short-state.nav-out nav { display: flex; flex-direction: column; gap: 0; }
  header.hub-masthead.short-state.nav-out 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) {
  .helm-hoverbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .helm-hoverbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .helm-hoverbar .helm-hoverbar-call, .helm-hoverbar .helm-hoverbar-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .helm-hoverbar-inner > :not(a) { display: none; }
}
@keyframes lower-strip { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.hub-masthead.short-state { animation: none; }
  header.hub-masthead .page-toggle span { transition: none; }
}

/* --- Phone tables (2026-10-15) ---
   Inside their scroll box these tables squeezed the first column to a word
   or two per line. Give it room; the table scrolls a little further instead. */
@media (max-width: 820px) {
  table.bronze-figures th:first-child, table.bronze-figures td:first-child { min-width: 7.5rem; }
}

.attach-field input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; color: #222; font-size: 0.9rem; }
.attach-field label span { font-weight: 400; opacity: 0.7; }
.pics-note { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.picked-files { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.picked-files:empty, .file-warn:empty { display: none; }
.picked-files li { padding: 2px 0; overflow-wrap: anywhere; }
.file-warn { 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.daisy-photo-band.trim-tinted.daisy-photo-band,
  section.flat-close-band.flat-close-band,
  section.trim-tinted.trim-tinted,
  section.yarrow-opener.brisk-plated.yarrow-opener,
  section.yarrow-opener.yarrow-opener { 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.hub-masthead div.spindle-runner { padding-top: 7px; padding-bottom: 7px; }
}

header.hub-masthead #head-nav .stack-item { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.hub-masthead #head-nav .notch-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 28px; margin: 0 0 0 1px; padding: 0;
  background: none; border: 0; color: rgb(213, 226, 234); cursor: pointer;
}
header.hub-masthead #head-nav .notch-switch::before {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform 0.15s;
}
header.hub-masthead #head-nav .stack-item.expanded-bloc > .notch-switch::before { transform: rotate(180deg); }
header.hub-masthead #head-nav .fan-shelf {
  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(31, 59, 77); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.hub-masthead #head-nav .fan-shelf[data-cols="2"] { columns: 2; min-width: 400px; }
header.hub-masthead #head-nav .fan-shelf[data-cols="3"] { columns: 3; min-width: 560px; }
header.hub-masthead #head-nav .stack-item.expanded-bloc > .fan-shelf { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.hub-masthead #head-nav .stack-item:hover > .fan-shelf { display: block; }
}
header.hub-masthead #head-nav .fan-shelf a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(213, 226, 234); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.hub-masthead #head-nav .fan-shelf a:hover, header.hub-masthead #head-nav .fan-shelf a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.hub-masthead #head-nav .fan-shelf a.top-entry { column-span: all; font-weight: 600; border-bottom: 1px solid rgba(127,127,127,0.3); margin-bottom: 4px; padding-bottom: 8px; }
@media (max-width: 820px) {
  header.hub-masthead #head-nav .stack-item { position: static; flex-wrap: wrap; justify-content: center; }
  header.hub-masthead #head-nav .stack-item.expanded-bloc { flex-basis: 100%; }
  header.hub-masthead #head-nav .notch-switch { width: 18px; height: 34px; margin-left: 2px; }
  header.hub-masthead #head-nav .fan-shelf, header.hub-masthead #head-nav .fan-shelf[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.hub-masthead #head-nav .stack-item.expanded-bloc > .fan-shelf { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.hub-masthead #head-nav .stack-item.expanded-bloc > .fan-shelf[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.hub-masthead #head-nav .fan-shelf a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.hub-masthead #head-nav .fan-shelf a.top-entry { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.hub-masthead.short-state.nav-out #head-nav { flex-wrap: nowrap; }
  header.hub-masthead.short-state.nav-out #head-nav > * { flex-shrink: 0; }
  header.hub-masthead.short-state.nav-out #head-nav .stack-item { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.hub-masthead.short-state.nav-out #head-nav .stack-item > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.hub-masthead.short-state.nav-out #head-nav .notch-switch { width: 52px; height: 48px; }
  header.hub-masthead.short-state.nav-out #head-nav .fan-shelf { margin: 0; border-radius: 0; }
  header.hub-masthead.short-state.nav-out #head-nav .fan-shelf 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.hub-masthead #head-nav .notch-switch::before { transition: none; } }