/* ==========================================================================
   Napa Valley Injectables

   DIRECTION: "Valley survey"
   Napa's real vernacular is not the brochure. It is agronomic and cartographic:
   AVA maps, soil series, elevation bands, block-by-block precision, harvest data.
   That register is measured, technical and quietly authoritative, which is the
   tone that settles a nervous reader. It is also the exact opposite of the
   seductive-spa cliche every competitor in this category uses.

   COLOR   Cool fog ground, white content sheets, deep oak ink.
           Green is reserved for action. Straw gold is reserved for data ink and
           never appears as a decorative field.
   TYPE    Fraunces (display, opsz 24 for a sturdy text-cut used large),
           system sans (body, 0 KB, effortless on any phone),
           IBM Plex Mono (the survey layer: time markers, figures, labels).
   SIGNATURE  A measured axis. On treatment pages it carries real elapsed time.
           On area pages it will carry the valley running south to north.
           The marker values are information, not ornament.

   MOTION  Functional feedback only. No scroll reveals, no ambient effects.
           The audience reads this on a phone, at night, slightly anxious, to
           answer three questions. Movement would dilute the one signature.
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Metrics measured against the real Fraunces subset: Georgia needs size-adjust
   105.79% to occupy the same width, and the vertical overrides are the font's own
   hhea values divided by that scale. Keeps CLS at zero while the webfont loads. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 105.79%;
  ascent-override: 92.45%;
  descent-override: 24.10%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Valley fog off San Pablo Bay at 7am. A mid-light cool ground, deliberately
     neither the near-white nor the near-black default. */
  --fog:      #e4eaea;
  --sheet:    #fafcfb;

  --ink:      #14201d;  /* deep oak, near-black with a green cast */
  --slate:    #4e5c58;  /* secondary text */
  --rule:     #c3cfcd;

  --vine:     #1c4636;  /* ACTION ONLY. every call button, every link. */
  --vine-deep:#123024;
  --vine-pale:#dae4df;

  --straw:    #75591f;  /* DATA INK ONLY. mono marks, never a field. */
  --straw-pale:#eee6d5;

  /* Semantic layer. Components reference these, never raw hex. */
  --surface-high:    #ffffff;
  --action-bg:       var(--vine);
  --action-bg-hover: var(--vine-deep);
  --action-fg:       #ffffff;
  --band-bg:         var(--vine);
  --band-fg:         #ffffff;
  --band-muted:      #c8d7cd;
  --band-btn-bg:     #ffffff;
  --band-btn-fg:     var(--vine-deep);
  --foot-bg:         var(--ink);
  --foot-fg:         #aebbb6;
  --foot-link:       #eef3f1;
  --foot-muted:      #8b9a95;
  --foot-rule:       #2c3a35;

  --measure: 66ch;
  --wrap: min(900px, 100% - 2.5rem);
  --r: 4px;

  --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Night in the valley. Same direction, re-toned rather than inverted: the fog
   ground becomes the dark ground, green stays action, straw stays data ink.
   Every pair below is verified against WCAG AA independently of light mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --fog:       #121816;
    --sheet:     #1a2220;
    --ink:       #e7edea;
    --slate:     #a8b5b0;
    --rule:      #33403b;

    --vine:      #8cc9a9;
    --vine-deep: #abdcc1;
    --vine-pale: #1e3129;

    --straw:     #dcb87b;
    --straw-pale:#3a2f1c;

    --surface-high:    #212b28;
    --action-bg:       #8cc9a9;
    --action-bg-hover: #abdcc1;
    --action-fg:       #0b1210;
    --band-bg:         #1b3a2d;
    --band-fg:         #eef5f1;
    --band-muted:      #b9cec2;
    --band-btn-bg:     #8cc9a9;
    --band-btn-fg:     #0b1210;
    --foot-bg:         #0b1210;
    --foot-fg:         #a8b5b0;
    --foot-link:       #e7edea;
    --foot-muted:      #93a09b;
    --foot-rule:       #26302d;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header is 57px and the mobile call bar is 80px. Without these the
     browser scrolls anchors and keyboard focus underneath both of them. */
  scroll-padding-top: 4.25rem;
  scroll-padding-bottom: 5.75rem;
}
@media (min-width: 768px) { html { scroll-padding-bottom: 2rem; } }

/* Cuts the legacy 300ms tap delay on touch devices. */
a, button, summary { touch-action: manipulation; }

body {
  margin: 0;
  padding-bottom: 5rem;              /* clears the sticky mobile call bar */
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vine); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--straw); }

:focus-visible { outline: 2px solid var(--straw); outline-offset: 3px; border-radius: 2px; }

.wrap { width: var(--wrap); margin-inline: auto; }

.skip { position: absolute; left: -9999px; background: var(--action-bg); color: var(--action-fg);
  padding: .7rem 1rem; z-index: 100; }
.skip:focus { left: 0; top: 0; }

/* -------------------------------------------------------------- typography */

h1, h2 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 .7rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 7.6vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.15rem); margin-top: 3rem; }

h3 { font-family: var(--body); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); margin: 0 0 .35rem; letter-spacing: -0.005em; }

p { margin: 0 0 1.1rem; }
.lead { font-size: clamp(1.04rem, 3.2vw, 1.15rem); line-height: 1.55; color: var(--slate); }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.15rem; }
li { margin-bottom: .5rem; }

/* The survey layer. Every label, marker and figure on the site is set in it. */
.eyebrow, .axis-t, .fig, .site-nav a, .crumbs, .terms dt, .foot-label,
[data-site="phone"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--straw); margin: 0 0 1rem;
}
.note { font-size: .82rem; line-height: 1.5; color: var(--slate); max-width: 46ch; }

/* ------------------------------------------------------------------ header */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fog) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head__in { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 3.5rem; }
.wordmark { text-decoration: none; display: block; line-height: 1.1; }
.wordmark b { display: block; font-family: var(--display); font-weight: 500;
  font-size: 1.1rem; color: var(--ink); letter-spacing: -0.015em; }
.wordmark span { display: block; font-family: var(--mono); font-size: .61rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--slate); margin-top: .15rem; }

.site-nav { border-bottom: 1px solid var(--rule); }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a { display: inline-block; padding: .72rem 0;
  font-size: .69rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--vine); }
/* Current page carried by a rule as well as colour: colour alone fails 1.4.1.
   Inset shadow rather than border so nothing reflows. */
.site-nav a[aria-current="page"] { color: var(--straw); box-shadow: inset 0 -2px 0 var(--straw); }

.crumbs { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); padding: .8rem 0 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: .45rem; color: var(--rule); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { display: inline-block; padding: .3rem 0; color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--vine); }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease,
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn [data-site="phone"] { font-weight: 500; letter-spacing: .01em; }
.btn--call { background: var(--action-bg); color: var(--action-fg); }
.btn--call:hover { background: var(--action-bg-hover); color: var(--action-fg); }
/* Press feedback lands within a frame and never changes layout bounds. */
.btn--call:active { background: var(--action-bg-hover); transform: scale(0.97); }
/* The sticky bar button is full width, where the same ratio reads as too much. */
.callbar .btn--call:active { transform: scale(0.98); }
.btn--quiet { background: transparent; color: var(--vine); border-color: var(--rule); }
.btn--quiet:hover { border-color: var(--vine); background: var(--vine-pale); color: var(--vine-deep); }
.btn--quiet:active { background: var(--vine-pale); border-color: var(--vine); }
.btn--sm { padding: .5rem .95rem; font-size: .88rem; }
.btn--block { width: 100%; }

/* Specificity note: .btn sets display, so any hide rule must match it. */
.btn.head-call { display: none; }
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .btn.head-call { display: inline-flex; }
}

/* -------------------------------------------------------------------- hero */
/* Flat fog, no gradient. A gradient here would encode nothing. */

.hero { padding: 2.4rem 0 2.8rem; }
/* Hero text is inset by the same amount as the sheet's padding, so every
   left edge on the page lands on one line. */
.hero .wrap > * { max-width: var(--measure); }
.hero .lead { max-width: 60ch; }
@media (min-width: 720px) { .hero .wrap { padding-inline: 3rem; } }
.hero__cta { display: flex; flex-direction: column; gap: .65rem; margin: 1.6rem 0 1.1rem; }
@media (min-width: 560px) { .hero__cta { flex-direction: row; } }
@media (min-width: 640px) { .hero { padding: 3.6rem 0 3.8rem; } }

/* A utility, so no page needs an inline style attribute. Inline styles would
   force 'unsafe-inline' into the CSP, which defeats most of the point of it. */
.mt { margin-top: 1.4rem; }

/* ------------------------------------------------------------ area plates */
/*
 * The survey plate that sits between the hero and the content on an area page.
 *
 * Cropped to a band rather than shown at its native 16:9, which at the content
 * width would be over 500px tall and would push the page's actual answer below
 * the fold. The height is fixed in CSS and the intrinsic size is on the <img>,
 * so this reserves its own space and contributes nothing to CLS.
 */
.plate { margin: 0; padding: 0; background: var(--fog); }
.plate img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  object-position: center 58%;   /* the valley floor, not the empty sky above it */
  border-block: 1px solid var(--rule);
}
@media (min-width: 720px) { .plate img { height: 190px; } }

/* -------------------------------------------------------------- diagrams */
/*
 * A treatment diagram plus its legend. The artwork carries no lettering of its
 * own, so every label here is real text: selectable, translatable, and read out
 * properly rather than announced as an image.
 */
.diagram { margin: 2.4rem 0 0; padding: 0; }
/* <picture> is inline by default, which leaves a percentage width on the <img>
   nothing to resolve against and collapses it to a couple of pixels. */
.diagram picture, .plate picture { display: block; }
.diagram img {
  width: 100%; height: auto; display: block;
  background: var(--fog);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.diagram figcaption { margin-top: .9rem; font-size: .9rem; color: var(--slate); }
.dg-t { display: block; font-family: var(--display); font-size: 1.1rem;
  font-weight: 500; color: var(--ink); margin-bottom: .2rem; }
.dg-l { display: block; margin-bottom: .5rem; }
.diagram figcaption ol { margin: 0 0 .7rem; padding-left: 1.2rem; line-height: 1.6; }
.diagram figcaption li { margin-bottom: .4rem; }
.diagram figcaption li::marker { color: var(--straw); font-family: var(--mono); }
.diagram figcaption b { color: var(--ink); }
/* Same register as the review stamp: a stated fact about the figure, in the
   survey layer rather than the prose. */
.dg-n { display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* ----------------------------------------------------------------- sources */
/*
 * Citations. Straw stays data ink here as everywhere: a rule and the marker
 * numerals, never a filled field.
 */
.sources { border-top: 1px solid var(--rule); margin: 2.4rem 0 0; padding: 1.4rem 0 0; }
.sources h2 { font-size: 1rem; margin: 0 0 .3rem; }
.sources p { font-size: .86rem; color: var(--slate); margin: 0 0 .9rem; }
.sources ol { margin: 0; padding-left: 1.15rem; font-size: .86rem; line-height: 1.65; }
.sources li { margin-bottom: .5rem; color: var(--slate); }
.sources li::marker { color: var(--straw); font-family: var(--mono); }
.sources a { color: inherit; text-decoration-color: var(--straw); text-underline-offset: 2px; }
.sources a:hover { color: var(--vine); }
.sources cite { font-style: normal; }

/* The review line. Mono, because it is a figure like every other marker. */
.reviewed {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
  border-top: 1px solid var(--rule); margin: 1.6rem 0 0; padding: 1rem 0 0;
}
.reviewed b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------------- sheet */
/* Content sits on white sheets over the fog, like paper on a survey table. */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1.6rem 1.25rem 2rem;
}
@media (min-width: 720px) { .sheet { padding: 2.6rem 3rem 3rem; } }
/* On a phone the page margin, the sheet padding and the axis indent stack up and
   crush the measure to ~34 characters. Let the sheet run to the edges instead so
   the line length stays readable where nearly all the traffic is. */
@media (max-width: 559px) {
  .sheet {
    margin-inline: -1.25rem;
    border-radius: 0; border-left: 0; border-right: 0;
    padding-inline: 1.25rem;
  }
}
.sheet > .prose { max-width: var(--measure); }
.prose > section + section { margin-top: 3.6rem; }
.eyebrow + h2 { margin-top: 0; }
.sheet > :first-child, .sheet > .prose > :first-child { margin-top: 0; }

.prose { max-width: var(--measure); }

/* ----------------------------------------------- SIGNATURE: measured axis */
/* The marker column carries real elapsed time. The values answer two of the
   reader's actual questions (when will I see it, when do I go back), so the
   structure is information rather than decoration. */

.axis { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.axis-row {
  position: relative;
  margin: 0;
  padding: 0 0 1.7rem 1.15rem;
  border-left: 1px solid var(--rule);
}
.axis-row::before {
  content: ""; position: absolute; left: -4px; top: .42rem;
  width: 7px; height: 7px; background: var(--straw);
}
.axis-row:last-child { border-left-color: transparent; padding-bottom: 0; }
.axis-t {
  display: block; margin: 0 0 .4rem;
  font-size: .69rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--straw);
}
.axis-b p:last-child { margin-bottom: 0; }
/* A link inside a heading is only as tall as its line box, which falls under the
   24px minimum. Pad the hit area and pull the margin back so nothing moves. */
.axis-b h3 a { display: inline-block; padding-block: .28rem; margin-block: -.28rem; }

@media (min-width: 720px) {
  .axis-row { display: grid; grid-template-columns: 7.5rem 1fr; padding: 0; border-left: 0; }
  .axis-row::before { left: calc(7.5rem - 4px); top: .5rem; }
  .axis-t { text-align: right; padding: .18rem 1.75rem 0 0; margin: 0; }
  .axis-b { border-left: 1px solid var(--rule); padding: 0 0 1.9rem 1.75rem; }
  .axis-row:last-child .axis-b { border-left-color: transparent; padding-bottom: 0; }
}

/* ------------------------------------------------------------------ figure */
/* The one place a number is allowed to be large. Data ink, set in mono. */

.figure {
  border: 1px solid var(--rule); border-top: 2px solid var(--straw);
  background: var(--surface-high); padding: 1.3rem 1.35rem; margin: 1.6rem 0;
}
.figure .fig-label {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--straw);
  display: block; margin-bottom: .5rem;
}
.fig {
  font-size: clamp(1.5rem, 5.4vw, 2.05rem); font-weight: 500;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.15;
  display: block; margin-bottom: .6rem;
}
.figure p:last-child { margin-bottom: 0; color: var(--slate); font-size: .95rem; }

/* ------------------------------------------------------------------- aside */

/* Straw stays data ink: a thin rule, never a filled field. The block separates
   itself with the page's own fog instead. */
.aside {
  border-left: 2px solid var(--straw);
  background: var(--fog);
  padding: 1.15rem 1.3rem; margin: 1.7rem 0;
}
.aside h3 { margin-top: 0; }
.aside ul { margin-bottom: 0; list-style: square; }
.aside li::marker { color: var(--straw); }
.aside li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------- faq */
/* Not a sequence, so no markers. Rules only, kept quiet. */

.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1rem 2.2rem 1rem 0; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.35rem;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--straw); border-bottom: 1.5px solid var(--straw);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.faq summary:hover, .faq summary:active { color: var(--vine); }
.faq .faq-a { padding: 0 0 1.15rem; color: var(--slate); max-width: 62ch; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* Opening one answer moves everything below it by about 211px, a quarter of a
   phone screen, with no bridge. This is the one place on the page where motion
   does real work: it keeps the reader anchored while the panel opens.
   block-size is not a compositor property, but a scaleY disclosure distorts the
   text, so this is the right trade for a short, user-initiated transition.
   Browsers without ::details-content simply keep today's instant open. */
.faq details { interpolate-size: allow-keywords; }

.faq details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    block-size 220ms cubic-bezier(0.23, 1, 0.32, 1),
    content-visibility 220ms allow-discrete,
    opacity 160ms ease-out;
}
.faq details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ------------------------------------------------------------------- tiles */

.grid { display: grid; gap: .8rem; margin: 1.4rem 0 0; }
/* 3-up only once each tile has room for its text. Below this they stack full width. */
@media (min-width: 820px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* 2-up pairs read fine earlier, since each tile gets half the measure. */
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
/* Paired asides in a grid should not also carry their own vertical margins. */
.grid > .aside { margin: 0; }
.tile {
  display: block; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.1rem 1.15rem; text-decoration: none; color: var(--ink);
  transition: border-color .14s ease, background-color .14s ease;
}
.tile:hover { border-color: var(--vine); background: var(--surface-high); color: var(--ink); }
.tile:active { border-color: var(--vine); background: var(--vine-pale); }
.tile b { display: block; font-size: 1rem; margin-bottom: .3rem; color: var(--vine); }
.tile span { display: block; font-size: .9rem; color: var(--slate); line-height: 1.5; }

/* ------------------------------------------------------------------ index */
/* Eighteen treatments as eighteen cards would be a wall. A ruled index is
   denser, scans faster, and reads like the document this site is styled as. */

.index { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.index li { margin: 0; border-top: 1px solid var(--rule); }
.index a {
  display: block; padding: .8rem 0; text-decoration: none; color: var(--ink);
  transition: color .14s ease;
}
.index a:hover, .index a:active { color: var(--vine); }
.index b { display: block; font-size: 1rem; font-weight: 600; color: var(--vine); }
.index span { display: block; font-size: .87rem; color: var(--slate); line-height: 1.45; }
@media (min-width: 720px) {
  .index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* Neighbourhoods hanging off a single point on the valley axis. The gap stays
   above the 8px touch-spacing minimum once the links are padded out. */
.sub { margin: .55rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .55rem .9rem; }
.sub a { display: inline-block; padding-block: .25rem; font-size: .89rem; }
#coverage .sub { margin-top: 1rem; gap: .55rem 1.15rem; }

/* -------------------------------------------------------------- glossary */

.terms { margin-top: 3rem; }
.terms dl { margin: 1.3rem 0 0; }
.terms dt {
  font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--straw); margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.terms dl > dt:first-of-type { margin-top: 0; }
.terms dd { margin: .45rem 0 0; color: var(--slate); max-width: 62ch; }

/* ------------------------------------------------------------- consult line */

.consult {
  margin: 2rem 0 0; padding: 1.15rem 1.25rem;
  background: var(--vine-pale); border-left: 2px solid var(--vine);
  color: var(--vine-deep); font-weight: 600;
}

/* --------------------------------------------------------------- closing cta */

.cta { margin-top: 2.5rem; background: var(--band-bg); color: var(--band-fg);
  border-radius: var(--r); padding: 2rem 1.35rem 2.2rem; }
@media (min-width: 720px) { .cta { padding: 2.8rem 3rem 3rem; } }
.cta h2 { color: var(--band-fg); margin: 0 0 .7rem; }
.cta .eyebrow { color: var(--straw-pale); }
.cta p { color: var(--band-muted); max-width: 46ch; }
.cta .btn { background: var(--band-btn-bg); color: var(--band-btn-fg); margin-top: .6rem; }
.cta .btn:hover, .cta .btn:active { background: var(--straw-pale); color: var(--band-btn-fg); }

/* ------------------------------------------------------------------ footer */

.site-foot { background: var(--foot-bg); color: var(--foot-fg); padding: 2.6rem 0 2.8rem;
  margin-top: 3rem; font-size: .93rem; }
.foot-label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--straw-pale); margin: 0 0 .8rem; }
.site-foot a { display: inline-block; padding: .26rem 0; color: var(--foot-link); text-decoration: none; }
.site-foot a:hover, .site-foot a:active { color: var(--band-fg); text-decoration: underline; }
.site-foot ul { list-style: none; padding: 0; margin: 0 0 1.9rem; }
.site-foot li { margin-bottom: .5rem; }
.foot-grid { display: grid; gap: 0; }
/* auto-fit rather than a fixed count, so adding a footer column does not
   require touching this rule again. */
@media (min-width: 720px) { .foot-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2.5rem; } }
.foot-legal { border-top: 1px solid var(--foot-rule); padding-top: 1.4rem; }
.foot-legal p { font-size: .8rem; line-height: 1.6; color: var(--foot-muted); max-width: 78ch; }
.foot-legal p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ tap targets */
/*
 * WCAG 2.2 AA asks for 24x24; Google's mobile usability check wants 48x48.
 * The desktop layout is a deliberate density and is left alone.
 *
 * Keyed on viewport width FIRST, with pointer type only as an additional
 * trigger. Pointer type is device-reported and unreliable: touchscreen laptops
 * report coarse, a tablet with a stylus can report fine, and emulators get it
 * wrong outright. Width is deterministic, and on this site the phone layout and
 * the touch case are the same case anyway.
 *
 * Expressed as min-height with centred text rather than as padding, which would
 * push the footer columns apart.
 */
@media (max-width: 767px), (pointer: coarse) {
  .site-nav a, .site-foot a, .crumbs a, .sub a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .site-foot li { margin-bottom: 0; }
  /* The last crumb is a span, not a link, so it does not get the 48px box the
     anchors do. Without centring it sits at the top of the row while the links
     centre in theirs, and the trail reads as though it has wrapped. */
  .crumbs ol { gap: .45rem 1rem; align-items: center; }
  /* The coverage list is a list of links, so it gets the same floor. Its own
     row gap comes down to compensate, or twelve 48px rows run very long. */
  .sub, #coverage .sub { gap: 0 1.15rem; }
  /* The wordmark is a two-line block; give it the same floor. */
  .wordmark { min-height: 48px; display: inline-flex; flex-direction: column; justify-content: center; }
}

/*
 * Deliberately NOT raised: citation links inside the Sources list. They sit
 * inside running sentences, and WCAG 2.5.8 exempts inline links in a block of
 * text for exactly this reason. Padding them out would break the line boxes of
 * the sentence around them and read worse than it measures.
 */

/* --------------------------------------------------------- sticky call bar */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: color-mix(in srgb, var(--fog) 95%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--rule);
  padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom));
}
.callbar .btn { width: 100%; padding: .95rem 1rem; font-size: 1.05rem; }
@media (min-width: 768px) { .callbar { display: none; } }

@media print { .callbar, .site-nav, .site-head { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

  /* Gentler, not zero. The size change is the vestibular trigger, so drop that
     and keep a short fade rather than hard-cutting the panel into place. */
  .faq details::details-content,
  .faq details[open]::details-content {
    block-size: auto;
    transition-property: opacity !important;
    transition-duration: 120ms !important;
  }
}