/* ==========================================================================
   Shared site chrome — the masthead (topbar) and footer used by BOTH page
   designs: catalog pages (build-catalog.py) and warm filing pages
   (unhinged-cms page-template.ts). Namespaced (sc- classes, --sc-* tokens)
   so neither design's own stylesheet can collide with it.
   Theme: light by default, follows the OS for dark, and an explicit
   html[data-theme] set by the accessibility widget always wins.
   Values mirror the catalog design system (catalog.css). Pairs with
   site-chrome.js (mobile menu toggle).
   ========================================================================== */

@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/atkinson-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/atkinson-700.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/source-serif-4-400.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/source-serif-4-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2")}

:root{
  --sc-serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sc-body:"Atkinson Hyperlegible", system-ui, sans-serif;
  --sc-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sc-ink:#241d13; --sc-dim:#5c4e33; --sc-rust:#8a3a18; --sc-rule:#dccdb0; --sc-bg:#f4ecdb;
}
:root[data-theme="dark"]{
  --sc-ink:#efe9dc; --sc-dim:#a2937d; --sc-rust:#e07a4d; --sc-rule:#3a3324; --sc-bg:#1c1813;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sc-ink:#efe9dc; --sc-dim:#a2937d; --sc-rust:#e07a4d; --sc-rule:#3a3324; --sc-bg:#1c1813;
  }
}
@media (prefers-contrast: more){ :root{--sc-dim:#493c24; --sc-rust:#762d0e} }
@media (prefers-contrast: more){ :root[data-theme="dark"]{--sc-dim:#c6bba4; --sc-rust:#f0916a} }
@media (prefers-contrast: more) and (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--sc-dim:#c6bba4; --sc-rust:#f0916a} }

/* ---- masthead ---- */
.sc-topbar{border-bottom:2px solid var(--sc-rule)}
.sc-bar{max-width:80rem; margin:0 auto; padding:1.15rem 22px; display:flex; align-items:center; justify-content:space-between; gap:.5rem 2.5rem; flex-wrap:wrap}
a.sc-brand{display:inline-block; font-family:var(--sc-serif); font-weight:700; font-size:1.5rem; letter-spacing:-.015em; color:var(--sc-ink); text-decoration:none; line-height:1}
a.sc-brand:hover{color:var(--sc-rust); text-decoration:none}
.sc-nav{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem; font-family:var(--sc-body); font-size:.92rem}
.sc-nav a{color:var(--sc-dim); text-decoration:none}
.sc-nav a:hover{color:var(--sc-rust); text-decoration:none}
.sc-nav a[aria-current]{color:var(--sc-ink); font-weight:700}
.sc-links{display:contents}
.sc-toggle{display:none; font-family:var(--sc-mono); font-size:.88rem; letter-spacing:.04em; align-items:center; gap:.45rem;
  background:transparent; color:var(--sc-ink); border:1.5px solid var(--sc-rule); border-radius:6px; padding:.42rem .7rem; cursor:pointer; line-height:1}
.sc-toggle .bars{font-size:1.1em}
.sc-toggle:hover{border-color:var(--sc-rust); color:var(--sc-rust)}
.sc-toggle:focus-visible{outline:2px solid var(--sc-rust); outline-offset:2px}

/* ---- footer: wordmark, legend, site links, legal, fine print ---- */
.sc-foot{text-align:center; border-top:2px solid var(--sc-rule); margin-top:2.8rem; padding:2.8rem 22px 4.5rem}
a.sc-mark{display:inline-block; font-family:var(--sc-serif); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--sc-ink); text-decoration:none; margin-bottom:1.3rem}
a.sc-mark:hover{color:var(--sc-rust); text-decoration:none}
.sc-foot .legend{font-family:var(--sc-mono); font-size:.67rem; letter-spacing:.07em; color:var(--sc-dim); line-height:1.9; margin:0 0 1.4rem}
.sc-foot .legend b{color:var(--sc-ink); font-weight:500}
.sc-foot .legend .leg{white-space:nowrap}
.sc-foot .legend .dot{opacity:.5; margin:0 .55em}
.sc-foot .foot-links{font-family:var(--sc-mono); font-size:.7rem; letter-spacing:.05em; color:var(--sc-dim); line-height:2; margin:0 0 1.4rem}
.sc-foot .foot-links a{color:var(--sc-dim); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.sc-foot .foot-links a:hover,.sc-foot .foot-links a:focus-visible{color:var(--sc-rust)}
.sc-foot .foot-links .dot{opacity:.5; margin:0 .55em}
.sc-foot .legal{font-family:var(--sc-mono); font-size:.72rem; letter-spacing:.02em; color:var(--sc-ink); line-height:1.6; margin:0 0 .45rem}
.sc-foot .legal a{color:var(--sc-rust); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.sc-foot .fineprint{font-family:var(--sc-mono); font-size:.64rem; letter-spacing:.03em; color:var(--sc-dim); line-height:1.6; margin:0}

/* ---- mobile: collapse nav behind the toggle only when JS is present ---- */
@media (max-width:560px){
  html.js .sc-toggle{display:inline-flex}
  .sc-bar{flex-wrap:wrap; row-gap:.3rem}
  .sc-nav{width:100%; order:3}
  html.js .sc-links{display:none}
  html.js .sc-links.open{display:flex; flex-direction:column; align-items:stretch; width:100%; gap:0; padding:.4rem 0 .2rem}
  html.js .sc-links.open a{padding:.65rem .25rem; border-bottom:1px solid var(--sc-rule)}
  html.js .sc-links.open a:last-child{border-bottom:0}
  .sc-foot .legend{display:flex; flex-direction:column; align-items:center; gap:.4rem}
  .sc-foot .legend .dot{display:none}
}

@media (forced-colors: active){
  .sc-topbar,.sc-foot{border-color:CanvasText}
}