/* PLACE shared header, phone menu sheet and footer (site map option A, 31 Oct 2026).
   Loaded by EVERY public page after its own stylesheet (site.css or home.css). The markup comes from chrome/header.html and
   chrome/footer.html, stamped into each page by tools_shared_chrome.py; deploy.py refuses to publish if a page has drifted.
   Self-contained: own class names (gh-*, gf-*) and fallbacks for the brand tokens, so it works on either page stylesheet. */

.gh, .gh-sheet, .gf { --c-ink: var(--ink, #111); --c-muted: var(--muted, #5e5c56); --c-rule: var(--rule, #dedbd3); --c-stone: var(--stone, #f6f5f1);
  --c-sans: var(--sans, "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif); --c-mono: var(--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --c-gutter: clamp(16px, 4vw, 48px); }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 14px; z-index: 30; }
.skip:focus { left: 8px; top: 8px; }
html { scroll-padding-top: 84px; } /* anchor jumps land below the sticky header */

/* ---------- header ---------- */
.gh { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-rule); font-family: var(--c-sans); }
.gh-in { max-width: 1240px; margin: 0 auto; padding-inline: var(--c-gutter); display: flex; align-items: center; gap: 20px; height: 72px; }
.gh-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-ink); font: 600 15px var(--c-sans); letter-spacing: .28em; flex-shrink: 0; border: 0 !important; }
.gh-brand img { width: 30px; height: 30px; display: block; }
.gh-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 15px; }
.gh-nav a { text-decoration: none; color: var(--c-muted); white-space: nowrap; padding-block: 12px; }
.gh-nav a:hover, .gh-nav a[aria-current="page"] { color: var(--c-ink); }
.gh-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-ink); }
.gh-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--c-ink); border-radius: 2px; background: var(--c-ink); color: #fff !important; font: 500 14px var(--c-sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .2s; }
.gh-cta:hover { background: #333; }
.gh-menu { display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--c-ink); border-radius: 2px; background: #fff; color: var(--c-ink); font: 500 14px var(--c-sans); cursor: pointer; flex-shrink: 0; }
.gh-burger, .gh-burger::before, .gh-burger::after { display: block; width: 14px; height: 1.5px; background: currentColor; position: relative; }
.gh-burger::before, .gh-burger::after { content: ""; position: absolute; left: 0; }
.gh-burger::before { top: -4.5px; } .gh-burger::after { top: 4.5px; }
.gh :focus-visible, .gh-sheet :focus-visible, .gf :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* ---------- the phone menu sheet ---------- */
.gh-sheet { position: fixed; inset: 0; z-index: 40; background: #fff; overflow-y: auto; overscroll-behavior: contain; font-family: var(--c-sans); color: var(--c-ink); padding: 0 var(--c-gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
.gh-sheet[hidden] { display: none !important; }
.gh-sheet-top { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid var(--c-rule); margin-inline: calc(-1 * var(--c-gutter)); padding-inline: var(--c-gutter); }
.gh-close { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--c-ink); border-radius: 2px; background: #fff; color: var(--c-ink); font: 500 14px var(--c-sans); cursor: pointer; }
.gh-sheet-main { display: grid; }
.gh-sheet-main a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--c-rule); text-decoration: none; color: var(--c-ink); font-size: 18px; }
.gh-sheet-main a::after { content: "›"; color: var(--c-muted); font-size: 20px; }
.gh-sheet-main a[aria-current="page"] { font-weight: 600; }
.gh-sheet-main a[aria-current="page"]::after { content: "· you're here"; font-size: 15px; color: var(--c-ink); }
.gh-sheet-label { font: 500 12px/1.4 var(--c-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin: 22px 0 4px; }
.gh-sheet-also { display: grid; }
.gh-sheet-also > a, .gh-sheet-legal { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--c-rule); text-decoration: none; color: var(--c-muted); font-size: 15.5px; }
.gh-sheet-legal { flex-wrap: wrap; gap: 0 18px; }
.gh-sheet-legal a { color: var(--c-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.gh-sheet-also a[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.gh-sheet-cta { display: flex; width: 100%; min-height: 52px; margin-top: 24px; font-size: 15px; }
.gh-sheet-mail { margin: 16px 0 0; font-size: 14px; }
.gh-sheet-mail a { color: var(--c-ink); }
html.gh-open, html.gh-open body { overflow: hidden; }

/* ---------- footer ---------- */
.gf { border-top: 1px solid var(--c-rule); background: #fff; font: 400 14px/1.6 var(--c-sans); color: var(--c-muted); margin-top: 0; }
.gf-in { max-width: 1240px; margin: 0 auto; padding: 44px var(--c-gutter) 104px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; } /* bottom room for the Ask Archie button */
.gf p { margin: 0; }
.gf-place { display: grid; gap: 10px; align-content: start; }
.gf-place .gh-brand { font-size: 14px; gap: 10px; }
.gf-place .gh-brand img { width: 24px; height: 24px; }
.gf a { color: var(--c-ink); text-decoration: none; border: 0; }
.gf-place p a { border-bottom: 1px solid var(--c-rule); }
.gf-col { display: grid; align-content: start; gap: 2px; }
.gf-col a { display: inline-block; justify-self: start; padding-block: 6px; }
.gf-col a:hover, .gf-place p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gf-col a[aria-current="page"] { font-weight: 600; }
.gf-h { font: 500 11.5px/1.4 var(--c-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px !important; }
.gf-note { grid-column: 1 / -1; font-size: 13px; max-width: 60em; border-top: 1px solid var(--c-rule); padding-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 1120px) { .gh-nav { gap: 20px; font-size: 14.5px; } }
@media (max-width: 980px) {
  .gh-nav { display: none; }
  .gh-in { height: 60px; gap: 10px; }
  .gh-cta { margin-left: auto; }
  .gh-menu { display: inline-flex; }
  html { scroll-padding-top: 72px; }
  .gf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf-place { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .gh-in { gap: 8px; }
  .gh-brand { letter-spacing: .18em; gap: 8px; font-size: 14px; }
  .gh-brand img { width: 26px; height: 26px; }
  .gh-in .gh-cta { padding: 8px 10px; font-size: 13px; }
  .gh-menu { padding: 8px 10px; font-size: 13px; gap: 7px; }
}
@media (max-width: 374px) {
  .gh-in > .gh-brand { letter-spacing: .1em; gap: 6px; font-size: 13px; }
  .gh-in > .gh-brand img { width: 24px; height: 24px; }
  .gf-in { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .gh-in > .gh-brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the mark stays; the word is kept for screen readers */
}
@media (min-width: 981px) { .gh-sheet { display: none !important; } }
@media print { .gh, .gh-sheet, .gf { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .gh-cta { transition: none; } }