/* ---- site chrome ----------------------------------------------------
   Header bar, footer, brand type and the light/dark image switch, loaded by
   every page -- the wrapped artifacts included. So the tokens here are
   namespaced (--sc-*) and never redefine a page's own; their values are the
   site's, from base.css, and the logo draws from the same ones. */

@font-face {
  /* The logo's face, subset and limited to 600-800 by install_brand.py */
  font-family: "Big Shoulders Display";
  src: url("/assets/brand/BigShouldersDisplay.woff") format("woff");
  font-weight: 600 800;
  font-display: swap;
}

:root {
  --sc-ink: #0b0b0b; --sc-ink-2: #52514e; --sc-rule: #c3c2b7; --sc-hum: #d94b47;
  --sc-surface: #fcfcfb; --sc-ring: rgba(11, 11, 11, 0.10);
  --sc-display: "Big Shoulders Display", "Arial Narrow", sans-serif-condensed, sans-serif;
  --sc-text: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --sc-ink: #ffffff; --sc-ink-2: #c3c2b7; --sc-rule: #383835; --sc-hum: #f28b82;
    --sc-surface: #1a1a19; --sc-ring: rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="dark"] {
  --sc-ink: #ffffff; --sc-ink-2: #c3c2b7; --sc-rule: #383835; --sc-hum: #f28b82;
  --sc-surface: #1a1a19; --sc-ring: rgba(255, 255, 255, 0.10);
}

/* One image per theme. The dark one also carries the hidden attribute, so a
   browser holding a stylesheet from before these rules shows one, not both;
   the display rules below outrank the browser's own [hidden] rule. Same
   three-state rule as the tokens, so the toggle wins in both directions. */
.when-dark { display: none; }
:root[data-theme="dark"] .when-light { display: none; }
:root[data-theme="dark"] .when-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .when-light { display: none; }
  :root:where(:not([data-theme="light"])) .when-dark  { display: block; }
}

/* the name, set the way the logo sets it */
.sc-name {
  font-family: var(--sc-display); font-weight: 800; font-size: 22px;
  line-height: 1; letter-spacing: .005em; color: var(--sc-ink); white-space: nowrap;
}
.sc-name .sc-for { color: var(--sc-ink-2); }
.sc-name .sc-hum { color: var(--sc-hum); }

/* ---- header bar ---- */
/* Every layout property is set outright: the artifacts style bare header and
   footer elements (the Heartbreak Hotel makes every header a column). */
.sc-bar {
  display: flex; flex-direction: row; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--sc-rule);
  font: 13px/1.4 var(--sc-text);
}
.sc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Home's brand is the whole logo. Size only, no display: the when-light and
   when-dark rules above decide which of the pair shows, and a display here
   would outrank them and put both in the bar at once. */
.sc-brand-big { gap: 0; }
.sc-logo-big { width: 250px; max-width: 58vw; height: auto; }
@media (max-width: 640px) { .sc-logo-big { width: 165px; } }
/* The logo is a picture of the name, not a copy of it, so there is nothing in
   it worth selecting -- and Safari offers the words its text recognition finds
   inside an image, which came out as boxes straddling the mark and the
   wordmark. The alt text is what a reader or a screen reader gets. */
.sc-mark, .sc-logo-big { user-select: none; -webkit-user-select: none; }
.sc-mark { width: 34px; height: auto; }
.sc-nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.sc-nav a, .sc-foot a {
  color: var(--sc-ink-2); text-decoration: none; border-bottom: 1px solid transparent;
}
.sc-nav a:hover, .sc-foot a:hover { color: var(--sc-ink); border-bottom-color: var(--sc-rule); }
.sc-nav a[aria-current="page"] { color: var(--sc-ink); }
.sc-brand:focus-visible, .sc-nav a:focus-visible, .sc-foot a:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}
.sc-bar .theme-btn { margin-left: 0; }
/* On a phone the bar has no room for brand, nav and toggle on one line. Left
   to wrap on its own it made three rows -- the brand, the nav pushed to the
   right by its auto margin, then the toggle alone under it. Instead the brand
   takes a row of its own and the nav and toggle share the next one, reading
   left to right like everything else on the page. */
@media (max-width: 640px) {
  .sc-brand, .sc-brand-big { width: 100%; }
  .sc-nav { margin-left: 0; flex-wrap: wrap; gap: 8px 18px; }
}

/* ---- callouts: the card row above the footer ---- */
.sc-callouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
  margin-top: 56px;
}
.sc-card {
  display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-radius: 12px;
  background: var(--sc-surface); border: 1px solid var(--sc-ring); border-left: 4px solid var(--sc-hum);
  text-decoration: none; color: var(--sc-ink); font: 14px/1.45 var(--sc-text);
  transition: border-color .12s ease;
}
.sc-card:hover { border-color: var(--sc-rule); border-left-color: var(--sc-hum); }
.sc-card:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sc-card-title { font-family: var(--sc-display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.sc-card-title::after { content: "\00a0\2192"; }
.sc-card-blurb { color: var(--sc-ink-2); }
.sc-callouts + .sc-foot { margin-top: 28px; }
.sc-foot-wrap .sc-callouts { margin-top: 0; margin-bottom: 28px; }

/* ---- footer ---- */
.sc-foot {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 24px;
  margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--sc-rule);
  font: 13px/1.5 var(--sc-text); color: var(--sc-ink-2);
}
/* 20px: the red clears only the large-text bar in light (3.8:1 needs >= 18.7px bold) */
.sc-foot .sc-name { font-size: 20px; }
.sc-foot-brand { text-decoration: none; border: 0 !important; }
.sc-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sc-foot-note { flex-basis: 100%; font-size: 12px; }
/* on the wrapped artifacts the footer sits outside the page's own container */
.sc-foot-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.sc-foot-wrap .sc-foot { margin-top: 0; }