/* ============================================================
   SOS McKINNEY, design tokens
   Palette : harbor navy ground, channel teal for wayfinding,
             harbor-light amber for action. Neutrals carry a
             cool blue bias so nothing reads as default grey.
   Type    : EB Garamond (display) / Poppins (body), the two
             faces successonthespectrum.com uses, plus IBM Plex
             Mono for labels, data, phone numbers and codes
   ============================================================ */

:root {
  --ground:      #EDF2F5;
  --surface:     #FFFFFF;
  --surface-2:   #F5F9FB;
  --surface-sun: #FDF4E7;
  --ink:         #0A2540;
  --body:        #33506B;
  --muted:       #5C7590;
  --line:        #D6E0E8;
  --line-soft:   #E6EDF2;
  --navy:        #0A2540;
  --navy-2:      #12395F;
  --tide:        #16708A;
  --tide-ink:    #0E5266;
  --beacon:      #E8912B;
  --beacon-ink:  #8A5210;
  --good:        #2E7D5B;
  --warn:        #A8611A;
  --danger:      #B23A26;
  --on-navy:     #DCE8F0;
  --on-navy-dim: #97B2C6;
  --shadow:      0 1px 2px rgba(10,37,64,.05), 0 8px 24px -12px rgba(10,37,64,.18);
  --shadow-lg:   0 2px 4px rgba(10,37,64,.06), 0 24px 56px -24px rgba(10,37,64,.30);

  /* The same two faces the corporate site uses, taken from its own stylesheet rather than
     guessed at: EB Garamond on every heading, Poppins on everything else. The two brand
     typefaces now match successonthespectrum.com exactly.

     EB Garamond runs noticeably smaller and lighter than Newsreader did at the same size,
     and Poppins runs wider than Instrument Sans, so the sizes further down are retuned for
     them rather than inherited. Swapping the families without doing that leaves headings
     looking undersized and body lines too long, which is the usual way a font change goes
     wrong.

     IBM Plex Mono stays as a third, minor face for utility text: step numbers, drive
     times, the fax line. Corporate has no equivalent, and there is nothing on their site
     for it to clash with. */
  --f-display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-brand:   "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1180px;
  --read: 62ch;   /* narrower than before: Poppins sets wider than Instrument Sans did */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #061524;
    --surface:     #0B2136;
    --surface-2:   #0F2B43;
    --surface-sun: #2A1D0B;
    --ink:         #E9F1F7;
    --body:        #B6C8D8;
    --muted:       #8AA5BA;
    --line:        #1C3A56;
    --line-soft:   #16304a;
    --navy:        #04101C;
    --navy-2:      #0B2338;
    --tide:        #56B9D3;
    --tide-ink:    #8AD3E6;
    --beacon:      #F3A94E;
    --beacon-ink:  #F8C88A;
    --good:        #5FB98D;
    --warn:        #D79A52;
    --danger:      #FF9A82;
    --on-navy:     #DCE8F0;
    --on-navy-dim: #8FA9BE;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:   0 2px 4px rgba(0,0,0,.4), 0 24px 56px -24px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] {
  --ground:      #061524;
  --surface:     #0B2136;
  --surface-2:   #0F2B43;
  --surface-sun: #2A1D0B;
  --ink:         #E9F1F7;
  --body:        #B6C8D8;
  --muted:       #8AA5BA;
  --line:        #1C3A56;
  --line-soft:   #16304a;
  --navy:        #04101C;
  --navy-2:      #0B2338;
  --tide:        #56B9D3;
  --tide-ink:    #8AD3E6;
  --beacon:      #F3A94E;
  --beacon-ink:  #F8C88A;
  --good:        #5FB98D;
  --warn:        #D79A52;
  --danger:      #FF9A82;
  --on-navy:     #DCE8F0;
  --on-navy-dim: #8FA9BE;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:   0 2px 4px rgba(0,0,0,.4), 0 24px 56px -24px rgba(0,0,0,.75);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--f-body);
  /* 16px, down from 17. Poppins has a far larger x-height than the face it replaced, so
     it reads about a size larger at the same number of pixels. */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* EB Garamond is an old-style face: small x-height, modest cap height, fine strokes. At
   any given size it reads smaller and lighter than the face it replaced, so every step of
   the scale moves up by roughly a tenth. It also does not take tight tracking, where the
   previous face did, so the negative letter-spacing is eased right back. Weight 500 is
   what the corporate site sets on its own headings. */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.004em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.3rem); line-height: 1.04; letter-spacing: -0.014em; }
h2 { font-size: clamp(1.95rem, 3.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.009em; }
h3 { font-size: 1.42rem; line-height: 1.22; }
h4 { font-size: 1rem; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
p  { margin: 0; }

a { color: var(--tide-ink); text-decoration-color: rgba(22, 112, 138, .45);
  text-decoration-color: color-mix(in srgb, var(--tide) 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

/* A phone number broken across two lines is hard to read and impossible to dictate,
   and it is the one piece of text on this site a worried parent is most likely to be
   reading aloud to someone else. Buttons are left out: their label is longer than the
   number, and holding the whole thing on one line pushes a 320px screen sideways. */
a[href^="tel:"]:not(.btn) { white-space: nowrap; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2.5px solid var(--tide);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- layout primitives ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 22px; }
.stack { display: flex; flex-direction: column; min-width: 0; }
.gap-2 { gap: .5rem } .gap-3 { gap: .75rem } .gap-4 { gap: 1rem }
.gap-5 { gap: 1.5rem } .gap-6 { gap: 2rem } .gap-8 { gap: 3rem } .gap-10 { gap: 4.5rem }
.prose { max-width: var(--read); }
.prose p + p { margin-top: 1rem; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tide-ink);
  display: flex;
  align-items: center;
  gap: .6rem;
}
/* align-items is flex-start, not center. A long eyebrow wraps to two lines on a phone,
   and centring left the little rule floating in the gap between them instead of marking
   where the label starts. The margin puts it on the optical middle of the FIRST line. */
.eyebrow { align-items: flex-start; }
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  margin-top: .58em;
  background: var(--tide);
  flex: none;
}
.eyebrow.on-navy { color: var(--beacon); }
.eyebrow.on-navy::before { background: var(--beacon); }

.lede { font-size: 1.12rem; line-height: 1.58; color: var(--body); }
.small { font-size: .875rem; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }

section.band { padding-block: clamp(3.25rem, 7vw, 6rem); }
section.band + section.band { border-top: 1px solid var(--line-soft); }
.band.tinted { background: var(--surface-2); }

/* ---------- reading rhythm on a phone ----------
 *
 * These pages run to twelve screens on a 390px phone, and on a desktop the eye gets its
 * bearings from the width: headings sit against whitespace, the rail runs alongside, a
 * section is visibly a block. None of that survives a single narrow column. Every band
 * becomes the same tone with the same measure, one hairline apart, and the whole thing
 * reads as one undifferentiated wall. A parent who scrolls back to re-read something has
 * nothing to aim at.
 *
 * So on narrow screens, consecutive sections alternate tone. Not decoration: it is the
 * only cue left once the layout is a single column, and it is what makes a section feel
 * like a place rather than more text. */
@media (max-width: 900px) {
  section.band:not(.navy):not(.tinted):nth-of-type(even) { background: var(--surface-2); }

  /* A real edge where a band starts, rather than a hairline that vanishes into the text
     above it. */
  section.band + section.band { border-top: 1px solid var(--line); padding-top: 3.2rem; }

  /* .topic is put on by the script: it is whatever block holds an .eyebrow, which is this
     site's own unit of subject matter. Note it is NOT the band. A page like Autism 101 is
     twelve phone screens made of two bands holding a dozen topics, so separating bands
     alone changes almost nothing, which is exactly why it read as a wall. */
  .topic:not(.topic-first) {
    margin-top: 2.9rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line);
  }
  .band.navy .topic:not(.topic-first) { border-top-color: rgba(255, 255, 255, .16); }

  /* The eyebrow is the topic's name, so on a phone it does the work the layout used to do
     on a wide screen. Bigger, heavier, and with a short bar of colour that the eye catches
     while scrolling past rather than reading. */
  .eyebrow { font-size: .74rem; letter-spacing: .12em; font-weight: 600; }
  .eyebrow::before { width: 26px; height: 3px; margin-top: .5em; border-radius: 2px; background: var(--beacon); }
  .eyebrow.on-navy::before { background: var(--beacon); }

  /* Paragraphs at this measure run eight or nine lines. A little more space between them
     turns a block into a set of steps. */
  .prose p + p { margin-top: 1.15rem; }
}
.band.navy { background: var(--navy); color: var(--on-navy); border-top: 0; }
.band.navy h1, .band.navy h2, .band.navy h3, .band.navy h4 { color: #fff; }
.band.navy .dim { color: var(--on-navy-dim); }
/* :not(.btn) matters. This rule is a class plus an element, so it out-ranks
   .btn-primary's own colour and repainted the button label orange on an orange
   background, the text was there all along, at a contrast ratio of 1.00. */
.band.navy a:not(.btn) { color: var(--beacon); }

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

/* iOS Safari, read this before changing anything below.
 *
 * A button whose shape and background paint correctly while its label does not is not one
 * bug, it is a family of them, and iOS is where they live. Each line marked (iOS) closes
 * one of them. They are cheap, and the alternative is another round of guessing at a
 * device I cannot run here.
 *
 *   appearance:none        Safari renders a <button> as a NATIVE CONTROL unless this is
 *                          set, and a native control paints its own label using the system
 *                          colour, ignoring `color`. This is the big one, and it applies to
 *                          <button> but not to <a class="btn">, which is why some of these
 *                          buttons could look right and others not.
 *   -webkit-text-fill-color This is what actually paints glyphs in WebKit, and it WINS over
 *                          `color`. If anything sets it, on a control or by inheritance,
 *                          setting `color` does nothing at all. currentColor ties it back.
 *   background-clip        If any rule anywhere sets -webkit-background-clip:text, the text
 *                          becomes a window onto the background. Stated here so it cannot.
 *   font-family fallback   A webfont that fails on a phone connection must fall through to
 *                          a real system stack, not to nothing.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-body), system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .95rem; font-weight: 600;
  padding: .8rem 1.35rem; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
  line-height: 1.2;
  white-space: nowrap;

  -webkit-appearance: none;            /* (iOS) stop Safari drawing a native control */
  appearance: none;
  -webkit-text-fill-color: currentColor;  /* (iOS) the property that really paints glyphs */
  -webkit-background-clip: border-box;    /* (iOS) never clip the background to the text */
  background-clip: border-box;
  -webkit-text-stroke: 0;
  opacity: 1;
  text-indent: 0;
  text-shadow: none;
}
.btn:active { transform: translateY(1px); }
/* The label colour is stated twice on purpose. A container rule for links (.band.navy a,
   #mobilenav a) is one class heavier than .btn-primary and will otherwise repaint it, which
   is exactly how this button once rendered orange-on-orange. The explicit overrides below
   settle it by specificity rather than relying on :not() being parsed. */
.btn-primary { background: var(--beacon); color: #16243a; border-color: #b57122;
  border-color: color-mix(in srgb, var(--beacon) 78%, #000); }
.band.navy .btn-primary, .hero .btn-primary, #mobilenav .btn-primary,
footer.site .btn-primary { color: #16243a; background: var(--beacon); }
.btn-primary:hover { background: #eb9e44; background: color-mix(in srgb, var(--beacon) 88%, #fff); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--tide); color: var(--tide-ink); }
.band.navy .btn-ghost, .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.band.navy .btn-ghost:hover, .hero .btn-ghost:hover { border-color: var(--beacon); color: var(--beacon); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card-flat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
/* .btn is nowrap so the masthead never breaks a label across lines. On a 320px screen a
   long call-to-action needs that relaxed, or it hangs off the edge of the card. */
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; } }
.grid { display: grid; gap: 1.1rem; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 940px) { .rail { position: static; } }


/* ---------- masthead ---------- */
/* The colour here was --on-navy-dim at weight 400. It measured a perfectly respectable
   7:1 against the navy, which is exactly why no check ever flagged it, and it still read
   as faint. At 12px in a mono face the strokes are thin enough that a contrast ratio
   stops describing what the eye actually does with them. Brighter ink and one step of
   weight fix the legibility the number said was already fine. */
.util {
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--f-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.util .shell { display: flex; align-items: center; justify-content: space-between; gap: .2rem 1rem; min-height: 38px; flex-wrap: wrap; }
.util a { color: var(--on-navy); text-decoration: none; }
.util a:hover { color: var(--beacon); }
.util .sep { color: rgba(255,255,255,.22); }
/* On a phone the descriptive half wraps to two lines and eats the top of the screen for
   nothing. The phone number and the address are what a parent on a phone actually wants,
   and at this size they fit on one line together. */
@media (max-width: 720px) {
  .util .blurb { display: none; }
  .util .shell { justify-content: flex-start; min-height: 34px; gap: 0 .5rem; }
  .util a { display: inline-flex; align-items: center; min-height: 34px; }
}
@media (max-width: 700px) { .util { font-size: .7rem; letter-spacing: .02em; } }
@media (max-width: 430px) { .util { font-size: .625rem; letter-spacing: 0; } }
/* Below this the address cannot fit beside the number at any readable size. It stays in
   the footer, on the contact page and in the structured data on every page, so nothing
   is lost to a crawler, only the duplicate at the top of a very narrow screen goes. */
@media (max-width: 359px) {
  .util .sep, .util a[href^="mailto:"] { display: none; }
}

header.mast {
  position: sticky; top: 0; z-index: 50;
  background: #fff;                       /* opaque fallback: without it a browser that
                                             cannot parse color-mix gets NO header
                                             background and the page scrolls through it */
  background: rgba(255, 255, 255, .92);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* padding-block matters now the logo is bigger: without it the artwork sits flush
   against the top and bottom edges of the bar and reads as clipped. */
.mast .shell { display: flex; align-items: center; gap: 1rem; min-height: 72px;
  padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand svg { flex: none; }
/* The corporate logo, sized to carry.
 *
 * It was 92x52, which was chosen to stay pixel-sharp on a retina screen given a 175x99
 * source file. That was the right trade for sharpness and the wrong one for a logo: it
 * read as an afterthought, and shrank further on a phone, exactly where the header is the
 * only branding on screen. Corporate sets its own header logo at about 170px wide.
 *
 * So it is 132px here, dropping to 108 and then 96 on small screens, always well above
 * where it was. A 2x file goes with it, resampled and sharpened from the same artwork, so
 * enlarging is not left to the browser. A vector from the corporate office would beat both
 * and is worth asking for; the aspect ratio is 1.768:1, so any replacement drops straight
 * in. */
.brandmark { width: 132px; height: 75px; flex: none; }
.brandmark img { width: 100%; height: 100%; object-fit: contain; }
/* The img.  qualifier matters: `.brandmark img` above would otherwise out-rank a bare
   `.mark-on-dark` and both marks would render, one under the other. */
img.mark-on-light { display: block; }
img.mark-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.mark-on-light { display: none; }
  :root:not([data-theme="light"]) img.mark-on-dark { display: block; }
}
:root[data-theme="dark"] img.mark-on-light { display: none; }
:root[data-theme="dark"] img.mark-on-dark { display: block; }
:root[data-theme="light"] img.mark-on-light { display: block; }
:root[data-theme="light"] img.mark-on-dark { display: none; }
.orgmark { flex: none; }
/* The monogram already carries "Success On The Spectrum", the corporate lockup sets it
   under the mark. Repeating it as header type was redundant and cost 150px of masthead,
   which is what pushed the navigation out of its column. What the header needs to add is
   which location this is, so that is all it adds. */
.brand-txt { display: flex; flex-direction: column; padding-left: .75rem;
  border-left: 1px solid var(--line); }
.brand-sub { font-family: var(--f-mono); font-size: .66rem; line-height: 1.35;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tide-ink); }

nav.primary { display: flex; align-items: center; gap: .15rem; }
nav.primary a, nav.primary button.navbtn {
  font-size: .845rem; font-weight: 500; color: var(--body);
  text-decoration: none; padding: .5rem .4rem; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-body), system-ui, -apple-system, Helvetica, Arial, sans-serif;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  -webkit-appearance: none; appearance: none;         /* (iOS) see the note by .btn */
  -webkit-text-fill-color: currentColor;
}
nav.primary a:hover, nav.primary button.navbtn:hover { color: var(--ink); background: var(--surface-2); }
nav.primary a.active, nav.primary button.navbtn.active { color: var(--tide-ink);
  background: rgba(22, 112, 138, .1);
  background: color-mix(in srgb, var(--tide) 10%, transparent); }
/* Bolding the active item would widen the whole nav and push the buttons out of the
   column, so mark it with colour and a rule instead of weight. */
nav.primary a.active { box-shadow: inset 0 -2px 0 var(--tide); }
.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: -4px; min-width: 268px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .45rem; display: none; flex-direction: column; gap: 1px;
}
.has-menu.open .menu { display: flex; }
.menu a { padding: .6rem .7rem; border-radius: var(--r-sm); display: block; }
.menu a strong { display: block; font-size: .9rem; color: var(--ink); font-weight: 600; }
.menu a span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.menu a:hover strong { color: var(--tide-ink); }
.mast-cta { display: flex; align-items: center; gap: .5rem; flex: none; }
.mast-cta .btn { padding: .68rem .92rem; font-size: .86rem; }
.burger { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .55rem .7rem; cursor: pointer; color: var(--ink);
  -webkit-appearance: none; appearance: none;         /* (iOS) see the note by .btn */
  -webkit-text-fill-color: currentColor; }
/* Dropping the phone button (the number is already in the utility bar directly above) buys back about 150px, which is exactly what an iPad in landscape needs to keep the
   real navigation instead of hiding it behind a burger. */
@media (max-width: 1200px) { .mast-cta .btn-ghost { display: none; } }
@media (max-width: 1000px) {
  nav.primary { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .mast-cta .btn-primary { display: none; }
  /* Letterspaced capitals make the location line wide; on a 360px phone it has to come
     down or it pushes the burger off the edge. */
  .brand-sub { font-size: .58rem; letter-spacing: .11em; }
  .brand { gap: .55rem; }
  .brand-txt { padding-left: .55rem; }
  .brandmark { width: 108px; height: 61px; }
}
@media (max-width: 380px) {
  .brandmark { width: 96px; height: 54px; }
  .brand-sub { font-size: .54rem; }
}
/* The menu has 19 links, taller than a phone screen. Pinning it below the masthead and
   giving it its own scroll means the last items are always reachable, instead of being
   pushed off the bottom of a page that also scrolls. --navtop is set by the script from
   the masthead's real height, which changes as the utility bar wraps. */
#mobilenav { display: none; border-bottom: 1px solid var(--line); background: var(--surface); }
#mobilenav.open {
  display: block;
  position: fixed; left: 0; right: 0; top: var(--navtop, 72px); bottom: 0; z-index: 45;
  /* -webkit-overflow-scrolling: touch is deliberately NOT set here. It was removed from
     iOS in version 13, and on the versions that did honour it, it promoted this drawer to
     its own compositing layer, where content inside a position:fixed parent is known to
     paint blank until something forces a redraw. Momentum scrolling is the default now, so
     the property buys nothing and risks exactly the symptom being chased. */
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 12px 40px rgba(10,37,64,.18);
}
body.nav-open { overflow: hidden; }
#mobilenav .shell { padding-block: 1rem 2.5rem; }
/* Same trap as .band.navy a: an ID selector beats .btn-primary, so without :not(.btn)
   the two buttons at the foot of this menu lose their own colour and border. */
#mobilenav a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: .98rem; }
#mobilenav .grp { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 1.1rem; padding-bottom: .3rem; }
#mobilenav a.sub { padding-left: .9rem; font-weight: 400; color: var(--body); font-size: .92rem; }
#mobilenav .btn { min-height: 48px; }

/* ---------- where am I, on a phone ----------
 *
 * "Not clear separation, so you cannot feel where we are when you move back and forth."
 * That is a navigation problem, not a spacing one. On a desktop the page's structure is
 * visible: headings against whitespace, a rail, a shape you can hold in your head. Scrolled
 * one narrow column at a time through twelve screens, all of that is gone, and scrolling
 * back to re-read something means hunting.
 *
 * So a phone gets a thin strip under the masthead naming the section it is currently in,
 * with a line showing how far through the page it is. It appears once you are past the
 * page title, and it answers the question without anyone having to ask it.
 *
 * It is display:none above 900px, and it is built by script, so nothing about the page
 * depends on it. */
#youarehere { display: none; }

@media (max-width: 900px) {
  #youarehere {
    display: block;
    position: fixed;
    left: 0; right: 0;
    top: var(--navtop, 64px);
    z-index: 40;
    background: #fff;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    transform: translateY(-105%);
    transition: transform .22s ease;
    box-shadow: 0 6px 18px rgba(10, 37, 64, .07);
  }
  #youarehere.show { transform: translateY(0); }
  body.nav-open #youarehere { transform: translateY(-105%); }

  #youarehere .yah-label {
    display: block;
    padding: .48rem 1.1rem .5rem;
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tide-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The masthead and this strip together cover the top of the viewport, so anything jumped
     to by an anchor has to stop below both of them rather than underneath them. */
  html { scroll-padding-top: calc(var(--navtop, 64px) + 42px); }

  #youarehere .yah-track { height: 3px; background: var(--line-soft); }
  #youarehere .yah-fill {
    height: 100%; width: 0;
    background: var(--beacon);
    transition: width .1s linear;
  }
}

/* ---------- events listing ---------- */
/* A calendar block on the left, the event beside it. The date is the thing being scanned
   for, so it gets the visual weight rather than the title. */
.evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ev {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0 1.4rem;
  padding: 1.7rem 0;
  border-top: 1px solid var(--line);
}
.ev:last-child { border-bottom: 1px solid var(--line); }

.ev-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .5rem .2rem .55rem;
  background: var(--surface);
  align-self: start;
  line-height: 1.1;
}
.ev-day { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.ev-num { font-family: var(--f-display); font-size: 1.85rem; font-weight: 500;
  color: var(--ink); margin-top: .1rem; }
.ev-mon { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tide-ink); margin-top: .1rem; }

/* Our own sessions get the accent on the date plate. It is the one distinction a parent
   scanning the page actually needs: can I just turn up, or is this someone else's. */
.ev-ours .ev-date { border-color: var(--beacon); background: var(--surface-sun); }
.ev-ours .ev-mon { color: var(--beacon-ink); }

.ev-body { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.ev-body h3 { margin: 0; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
  font-size: .85rem; color: var(--muted); font-family: var(--f-mono); }
.ev-sep { color: var(--line); }
.ev-where { font-size: .92rem; color: var(--body); font-weight: 500; }
.ev-about { font-size: .95rem; max-width: var(--read); }
.ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: .35rem; }
.ev-tag {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .26rem .55rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
}
.ev-tag.ours { border-color: var(--beacon); color: var(--beacon-ink);
  background: var(--surface-sun); }
.ev-link { font-size: .88rem; font-weight: 600; }

@media (max-width: 560px) {
  .ev { grid-template-columns: 60px minmax(0, 1fr); gap: 0 1rem; padding: 1.5rem 0; }
  .ev-num { font-size: 1.6rem; }
  .ev-about { font-size: .92rem; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--navy); color: var(--on-navy); overflow: hidden; }
#chart-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.hero .shell { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.hero h1 { color: #fff; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-sub { color: var(--on-navy); font-size: 1.16rem; line-height: 1.55; max-width: 40ch; }
/* Between the phone and the desktop two-column hero there is a stretch where the copy
   stops at 40 characters in the middle of a wide screen and looks abandoned. */
@media (min-width: 620px) and (max-width: 940px) {
  .hero-sub { max-width: 56ch; font-size: 1.1rem; }
  .hero .shell { padding-block: clamp(2.75rem, 6vw, 4rem); }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.factcard {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.factrow { display: flex; gap: .85rem; padding-block: .8rem; border-top: 1px solid rgba(255,255,255,.13); }
.factrow:first-of-type { border-top: 0; padding-top: 0; }
.factrow .ic { color: var(--beacon); flex: none; margin-top: 2px; }
.factrow .lab { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-dim); }
.factrow .val { color: #fff; font-size: .96rem; line-height: 1.45; overflow-wrap: anywhere; }
/* The second line of a fact: the fax number, the in-home hours. It used to be set in the
   mono face on one row and three sizes down on another, which read as two different
   typefaces sitting inside one card. Same family, one step down, dimmer. That is enough to
   say "secondary" without looking like a mistake. */
.factrow .fact-2nd { display: inline-block; margin-top: .18rem; font-size: .89rem;
  color: var(--on-navy-dim); }
.factrow .val a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--beacon); }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); padding: 1.35rem 1.25rem; }
.stat .n { font-family: var(--f-display); font-size: clamp(1.65rem, 2.2vw, 2.15rem); color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .l { font-size: .84rem; color: var(--muted); margin-top: .45rem; line-height: 1.4; }

/* ---------- service cards ---------- */
.svc { display: flex; flex-direction: column; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
a.svc:hover { border-color: var(--tide); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.svc .ic { color: var(--tide); }
.svc h3 { font-size: 1.22rem; }
.svc p { font-size: .92rem; color: var(--body); }
.svc .more { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tide-ink); margin-top: auto; padding-top: .4rem; }
.svc-wide { flex-direction: row; align-items: center; gap: 1.4rem; }
.svc-wide .ic { flex: none; }
.svc-wide .svc-body { flex: 1 1 auto; min-width: 0; }
.svc-wide .svc-title { display: block; font-family: var(--f-display); font-size: 1.22rem; color: var(--ink); line-height: 1.25; margin-bottom: .35rem; }
.svc-wide .svc-desc { display: block; font-size: .92rem; color: var(--body); }
.svc-wide .more { margin: 0; padding: 0; flex: none; }
@media (max-width: 760px) { .svc-wide { flex-direction: column; align-items: flex-start; gap: .9rem; } }

/* ---------- process / route markers ---------- */
.route { display: flex; flex-direction: column; gap: 0; counter-reset: buoy; }
.step { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 1.5rem; padding-bottom: 2.4rem; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 30px; top: 56px; bottom: -4px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.step:last-child::before { display: none; }
.marker {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--tide);
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--f-mono); font-size: 1.06rem; font-weight: 600; color: var(--tide-ink);
  font-variant-numeric: tabular-nums;
}
.step .when { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--beacon-ink); }
.step h3 { margin-top: .3rem; }
.step p { margin-top: .55rem; }

/* ---------- crew depth bands ---------- */
.crew { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 1.4rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--line); }
@media (max-width: 620px) { .crew { grid-template-columns: 1fr; gap: .5rem; } }
.crew .depth { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; color: var(--muted); }
.crew .bar { height: 6px; border-radius: 3px; margin-top: .5rem; background: var(--line); overflow: hidden; }
.crew .bar i { display: block; height: 100%; background: var(--tide); border-radius: 3px; }
.crew h4 { color: var(--ink); font-size: 1.04rem; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: .92rem; }
th, td { text-align: left; padding: .85rem 1.05rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th { background: var(--surface-2); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }

/* ---------- faq / disclosure ---------- */
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 0; position: relative; font-weight: 600; color: var(--ink); font-size: 1.02rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 1.3rem; color: var(--tide); font-weight: 400; }
details.faq[open] summary::after { content: "\2013"; }
details.faq .ans { padding: 0 0 1.2rem; max-width: var(--read); }
details.faq .ans p + p { margin-top: .8rem; }

/* ---------- callouts ---------- */
.note { border-left: 3px solid var(--tide); background: var(--surface-2); padding: 1.05rem 1.25rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .93rem; }
.note.sun { border-left-color: var(--beacon); background: var(--surface-sun); }
.note strong { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 100px; background: rgba(22, 112, 138, .12); background: color-mix(in srgb, var(--tide) 12%, transparent); color: var(--tide-ink); border: 1px solid rgba(22, 112, 138, .28); border-color: color-mix(in srgb, var(--tide) 28%, transparent); }
.pill.sun { background: rgba(232, 145, 43, .16); background: color-mix(in srgb, var(--beacon) 16%, transparent); color: var(--beacon-ink); border-color: rgba(232, 145, 43, .38); border-color: color-mix(in srgb, var(--beacon) 38%, transparent); }
ul.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
ul.ticks li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: .52em; width: 8px; height: 8px; border-radius: 2px; background: var(--tide); transform: rotate(45deg); }
.band.navy ul.ticks li::before { background: var(--beacon); }

/* ---------- photography ---------- */
figure.shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface-2); position: relative; }
figure.shot img { width: 100%; height: auto; display: block; }
figure.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem 1rem .8rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: linear-gradient(to top, rgba(4,16,28,.88), rgba(4,16,28,.45) 55%, transparent); }
figure.shot.plain figcaption { position: static; background: none; color: var(--muted);
  text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: .82rem;
  padding: .7rem .2rem 0; line-height: 1.45; }
figure.shot.plain { border: 0; background: none; border-radius: 0; }
figure.shot.plain img { border-radius: var(--r-lg); border: 1px solid var(--line); }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery > * { min-width: 0; }

/* a room: photo above, description below, as one card */
.room { display: flex; flex-direction: column; gap: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.room img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; }
.room .body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.room h3 { font-size: 1.15rem; }
.room p { font-size: .9rem; color: var(--body); }

/* photo beside prose */
.media { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.media > * { min-width: 0; }
@media (max-width: 820px) { .media { grid-template-columns: 1fr; } }
.media.flip > figure { order: 2; }
@media (max-width: 820px) { .media.flip > figure { order: 0; } }

/* ---------- forms ---------- */
form fieldset { border: 0; padding: 0; margin: 0; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label, legend.flabel { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.field .hint { font-size: .8rem; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
  font-family: var(--f-body); font-size: .96rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .68rem .8rem; width: 100%;
}
textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: rgba(92, 117, 144, .75);
  color: color-mix(in srgb, var(--muted) 75%, transparent); }
input:focus, select:focus, textarea:focus { border-color: var(--tide); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); background: #fbf1ef;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.err { color: var(--danger); font-size: .8rem; font-weight: 600; display: none; }
.err.show { display: block; }
/* The send failure is not a field hint. A parent who has just filled in four steps needs
   to see plainly that it did not go, and what to do instead, so this one gets a panel
   rather than a line of small red text under the button. */
#err-send.show {
  font-size: .95rem; font-weight: 500; line-height: 1.55;
  background: #fdf3f1; border: 1px solid #e3b4a9; border-left: 4px solid var(--danger);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: .9rem 1.1rem; margin-top: 1rem;
}
.choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
@media (max-width: 620px) { .choices { grid-template-columns: 1fr; } }
.choice { display: flex; gap: .65rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .68rem .8rem; cursor: pointer; background: var(--surface); font-size: .92rem; line-height: 1.4; transition: border-color .12s, background-color .12s; }
.choice:hover { border-color: var(--tide); }
.choice input { margin: .25rem 0 0; accent-color: var(--tide); flex: none; }
/* :has() is unsupported before Chrome 105 / Safari 15.4 / Firefox 121, and the whole rule
   is dropped there, so the selected option would show no highlight at all. The script also
   sets .is-checked on the same element, and that duplicate rule needs no :has(). */
.choice:has(input:checked), .choice.is-checked { border-color: var(--tide); background: #ecf4f6;
  background: color-mix(in srgb, var(--tide) 8%, var(--surface)); }
.choice strong { display: block; color: var(--ink); font-weight: 600; }
.choice span { color: var(--muted); font-size: .82rem; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }
.formgrid .full { grid-column: 1 / -1; }
.formstep { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-top: 1.6rem; }
.formstep:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.stepnum { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--beacon-ink); }
#sent { display: none; scroll-margin-top: 96px; }
#sent.show { display: block; }
#intake { scroll-margin-top: 96px; }
.card .small a, .rail a { overflow-wrap: anywhere; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; line-height: 1.5; }
.consent input { margin-top: .28rem; accent-color: var(--tide); flex: none; }

/* ---------- network attribution strip ---------- */
.orgstrip { background: var(--surface-2); border-top: 1px solid var(--line); }
.orgstrip .shell { display: flex; align-items: center; gap: 1.2rem; padding-block: 1.4rem; flex-wrap: wrap; }
.orgstrip svg { flex: none; }
.orgstrip p { font-size: .84rem; line-height: 1.55; color: var(--muted); flex: 1 1 340px; margin: 0; }
.orgstrip p strong { color: var(--ink); }
.orgstrip .orglinks { display: flex; flex-direction: column; gap: .3rem; flex: none; }
.orgstrip .orglinks a { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .04em; color: var(--tide-ink); text-decoration: none; white-space: nowrap; }
.orgstrip .orglinks a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
footer.site { background: var(--navy); color: var(--on-navy-dim); padding-block: 3.5rem 2rem; }
footer.site h4 { color: #fff; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-bottom: .9rem; color: var(--beacon); }
footer.site a { color: var(--on-navy); text-decoration: none; font-size: .9rem; display: block; padding-block: .28rem; overflow-wrap: anywhere; }
footer.site a:hover { color: var(--beacon); }
.footgrid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.2rem; }
@media (max-width: 880px) { .footgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footgrid { grid-template-columns: 1fr; } }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.social a { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 100px; font-size: .82rem; }
.social a:hover { border-color: var(--beacon); }
.social svg { flex: none; }

/* The bottom of the footer, in reading order: the substantive disclaimer first, then a
   rule, then the fine-print line. The old order put a long grey paragraph underneath the
   copyright, which left the legal row stranded with a wide empty gap through the middle
   of it and read like an afterthought. */
.disclaimer { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.13);
  font-size: .78rem; line-height: 1.65; color: var(--on-navy-dim); max-width: 92ch; }
.legal { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem; line-height: 1.6; display: flex; flex-wrap: wrap;
  gap: .6rem 2rem; align-items: baseline; justify-content: space-between; }
.legal .copy { flex: 1 1 auto; min-width: 0; color: var(--on-navy-dim); }
/* A basis wide enough to hold the row on one line when there is space, but still
   shrinkable: pinning it with flex:0 0 auto kept it on one line on a desktop and then
   overflowed the screen on a 430px phone. */
/* No separator glyphs. A ::before strands a dot at the head of a wrapped line and a
   ::after strands one at the tail; there is no CSS that knows where a line will break.
   Spacing separates them perfectly well and cannot produce an artifact. */
.legal .links { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; }
/* footer.site a is one class and two elements, so it out-ranked a bare .legal a and every
   legal link rendered as a block with its separator stranded underneath. */
footer.site .legal a { display: inline; font-size: .78rem; padding: 0; color: var(--on-navy); }
footer.site .legal a:hover { color: var(--beacon); }
.legal .links a { white-space: nowrap; }
/* The separator hangs off the END of each link rather than the start of the next one.
   A ::before on the following link gets stranded at the head of a wrapped line, which is
   how the phone footer ended up reading "· Complaint Form". Trailing it keeps the dot
   attached to the item it follows, and the last one simply has none. */


/* ---------- misc ---------- */
.pagehead { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(2.4rem, 5vw, 3.8rem); }
.pagehead h1 { font-size: clamp(2.05rem, 4.1vw, 3.15rem); }
.pagehead .lede { margin-top: .2rem; }
.crumbs { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--tide-ink); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--beacon); color: #16243a; padding: .6rem 1rem; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }