/* Site chrome: the one header and footer every page shares.
   Loaded last on every page, after the page's own stylesheet. It reads the
   field-guide tokens (tokens-field-guide.css) and falls back to their literal
   values, so the header and footer look the same on a page that lacks them.
   Behavior lives in assets/js/chrome.js. */

.site-header,
.site-footer {
  --chrome-ground: var(--ground, var(--bg, #F7F4EC));
  --chrome-surface: var(--surface, #FFFDF8);
  --chrome-tint: var(--tint, var(--surface-2, #E6E3D7));
  --chrome-line: var(--line, var(--border, #CDD3CB));
  --chrome-line-soft: var(--line-soft, var(--border-soft, #DEE2D8));
  --chrome-ink: var(--ink, #193C39);
  --chrome-ink-soft: var(--ink-soft, #35504C);
  --chrome-ink-muted: var(--ink-muted, #546965);
  --chrome-action: var(--teal, var(--primary, #245F58));
  --chrome-action-ink: var(--btn-primary-ink, var(--primary-ink, #FFFDF8));
  --chrome-mark: var(--primary, #245F58);
  --chrome-focus: var(--primary, #245F58);
  --chrome-display: var(--font-display, "Newsreader", Georgia, "Times New Roman", serif);
  --chrome-body: var(--font-body, "Inter", "Helvetica Neue", Arial, sans-serif);
  --chrome-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chrome-t: 240ms var(--chrome-ease);
}


:root {
  --header-h: 72px;
  --header-height: 72px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--chrome-ground);
  transition: background-color var(--chrome-t);
}
.site-header.is-scrolled {
  background: var(--bg-alt, var(--chrome-tint));
}
/* One measure for the chrome on every page. The page stylesheets size
   .container differently (home.css 1180px with 2.25rem gutters, styles.css
   1200px with 2rem), which moved the brand and CTA 14px between the homepage
   and inner pages. These match styles.css, so inner pages are unchanged. */
.site-header .site-header__inner,
.site-footer > .container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.site-header .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 1.5rem);
  height: var(--header-h);
}
.site-header :focus-visible,
.site-footer :focus-visible {
  outline: 2.5px solid var(--chrome-focus);
  outline-offset: 3px;
  border-radius: 0;
}

/* Brand */
.site-header .brand,
.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  color: var(--chrome-ink);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
}
.site-header .brand:hover { color: var(--chrome-ink); }
/* The mark (docs/field-guide/brand-mark.md): inline SVG, arcs in currentColor,
   the leaf in sage. Light bar: forest ink and sage-deep. Dark theme and the
   ink footer: sage arcs and a pale sage leaf. No disc, no border. */
.site-header .brand__mark,
.site-footer .brand__mark {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #193C39;
  overflow: visible;
}
.site-header .brand__leaf,
.site-footer .brand__leaf { fill: #8DAE9A; }
[data-theme="dark"] .site-header .brand__mark,
.site-footer .brand__mark { color: #A9C3B2; }
[data-theme="dark"] .site-header .brand__leaf,
.site-footer .brand__leaf { fill: #CFDFD6; }
.site-header .brand__name,
.site-footer .brand__name {
  font-family: var(--chrome-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
/* The wordmark lockup (brand guidelines): lowercase name in the editorial
   serif, then a widely tracked SCIENCE descriptor in the text face. Type
   before symbol: the sprout mark is retired from the chrome. */
.site-header .brand,
.site-footer .brand { align-items: center; gap: 0.55em; }
/* SCIENCE sits on the name's baseline: nudge the small caps down to meet it. */
.site-header .brand__desc,
.site-footer .brand__desc { position: relative; top: 0.22em; }
/* The mark sits before the name, centered on the bar; the name and SCIENCE share a baseline. */
.site-header .brand,
.site-footer .brand { gap: 0.6em; }
.site-header .brand__mark + .brand__name,
.site-footer .brand__mark + .brand__name { margin-left: 0.1em; }
.site-header .brand__desc,
.site-footer .brand__desc {
  font-family: var(--chrome-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Nav */
.site-header .nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header .nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .nav__list > li { margin: 0; }
.site-header .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--chrome-ink-soft);
  background: none;
  border-radius: 0;
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--chrome-t);
}
.site-header .nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 6px;
  height: 2px;
  border-radius: 0;
  background: var(--chrome-mark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--chrome-t);
}
.site-header .nav__link:hover {
  color: var(--chrome-ink);
  background: none;
}
.site-header .nav__link:hover::after,
.site-header .nav__link[aria-current="page"]::after,
.site-header .nav__summary.is-current::after { transform: scaleX(1); }
.site-header .nav__link[aria-current="page"],
.site-header .nav__summary.is-current { color: var(--chrome-ink); background: none; }

/* Free tools menu (details/summary: works without JS, closes via chrome.js) */
.site-header .nav__details { position: relative; }
.site-header .nav__summary {
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.site-header .nav__summary::-webkit-details-marker { display: none; }
.site-header .nav__summary::marker { content: ""; }
.site-header .nav__chev {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform var(--chrome-t);
}

/* Just above the menu breakpoint the seven top-level items are a little
   wider than the bar, so the tabs (and their underline) sit closer. */
@media (min-width: 1001px) and (max-width: 1080px) {
  .site-header .nav__link { padding-left: 0.4rem; padding-right: 0.4rem; }
  .site-header .nav__link::after { left: 0.4rem; right: 0.4rem; }
}
.site-header .nav__details[open] .nav__chev { transform: rotate(180deg); }
.site-header .nav__details[open] .nav__summary { color: var(--chrome-ink); }

.site-header .nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 344px;
  padding: 0.5rem;
  background: var(--chrome-surface);
  border: 0;
  border-top: 3px solid var(--chrome-ink);
  border-radius: 0;
  box-shadow: var(--shadow-md, 0 18px 40px -24px rgba(27, 42, 58, 0.35)); /* a menu floats */
  transform: translateX(-50%);
}
.site-header .nav__submenu {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .nav__submenu li { margin: 0; }
.site-header .nav__submenu-link {
  display: grid;
  gap: 2px;
  padding: 0.65rem 0.8rem;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 160ms var(--chrome-ease);
}
.site-header .nav__submenu-link:hover,
.site-header .nav__submenu-link[aria-current="page"] { background: var(--chrome-tint); }
.site-header .nav__submenu-title {
  color: var(--chrome-ink);
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}
.site-header .nav__submenu-desc {
  color: var(--chrome-ink-muted);
  font-family: var(--chrome-body);
  font-size: 0.875rem;
  line-height: 1.4;
}
.site-header .nav__menu-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  padding: 0.75rem 0.8rem 0.4rem;
  border-top: 3px solid var(--chrome-ink);
  color: var(--chrome-action);
  font-family: var(--chrome-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.site-header .nav__menu-all span { transition: transform var(--chrome-t); }
.site-header .nav__menu-all:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  .site-header .nav__details[open] .nav__menu { animation: chrome-menu-in 200ms var(--chrome-ease); }
  .site-header .nav__details[open] .nav__menu--auth { animation-name: chrome-menu-in-end; }
}
/* "My classes" chooser: two rows (this site, and Thinkific for the toddler
   class) until the toddler class moves on-site. It sits at the right of the
   bar, so its menu aligns to the label's right edge instead of centering. */
@media (min-width: 1001px) {
  .site-header .nav__menu--auth { left: auto; right: 0; width: 300px; transform: none; }
}
@keyframes chrome-menu-in-end {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes chrome-menu-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Account link + primary action sit apart from the section links */
.site-header .nav__auth {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
.site-header .nav__auth::before {
  content: "";
  width: 1px;
  height: 20px;
  margin-right: 0.5rem;
  background: var(--chrome-line);
}
/* "My classes" is the account link; a person glyph says so before the label
   does. A mask filled with currentColor, so it follows hover, the ink bar and
   dark mode. Empty generated content, so assistive tech never announces it. */
.site-header .nav__auth .nav__link::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='5.25' r='2.75'/%3E%3Cpath d='M2.75 14.5c0-2.9 2.35-4.9 5.25-4.9s5.25 2 5.25 4.9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='5.25' r='2.75'/%3E%3Cpath d='M2.75 14.5c0-2.9 2.35-4.9 5.25-4.9s5.25 2 5.25 4.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Just above the menu breakpoint, room for that glyph next to the longest
   CTA ("Browse the classes"). */
@media (min-width: 1001px) and (max-width: 1080px) {
  .site-header .nav__auth { margin-left: 0.25rem; }
  .site-header .nav__auth::before { margin-right: 0.25rem; }
  /* The bar is at its tightest here; the label alone carries "My classes". */
  .site-header .nav__auth .nav__link::before { display: none; }
}
.site-header .nav__cta { margin-left: 0.25rem; }
/* Never a button to the page you are already on (/classes/). */
.site-header .nav__cta:has(> [aria-current="page"]) { display: none; }
.site-header .nav__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* DESIGN.md: every button is at least 48px tall */
  padding: 0.55rem 1.15rem;
  border: 1.5px solid var(--chrome-action);
  border-radius: 0;
  background: var(--chrome-action);
  color: var(--chrome-action-ink);
  box-shadow: none;
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--chrome-t), transform 140ms var(--chrome-ease), box-shadow var(--chrome-t);
}
.site-header .nav__cta .btn:hover {
  background: var(--chrome-action-hover, var(--primary-hover, #17494B));
  border-color: var(--chrome-action-hover, var(--primary-hover, #17494B));
  color: var(--chrome-action-ink);
}

/* Theme + menu buttons */
.site-header .theme-toggle,
.site-header .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--chrome-ink);
  border-radius: 0;
  background: transparent;
  color: var(--chrome-ink);
  cursor: pointer;
  transition: color var(--chrome-t), border-color var(--chrome-t), transform 140ms var(--chrome-ease);
}
.site-header .theme-toggle:hover { background: var(--chrome-ink); color: var(--chrome-ground); }
.site-header .theme-toggle__sun { display: none; }
[data-theme="dark"] .site-header .theme-toggle__sun { display: block; }
[data-theme="dark"] .site-header .theme-toggle__moon { display: none; }

.site-header .nav-toggle { display: none; color: var(--chrome-ink); }
.site-header .nav__list > .nav__now,
.site-header .nav__list > .nav__theme { display: none; }
.site-header .nav-toggle__bars { position: relative; display: block; width: 18px; height: 12px; }
.site-header .nav-toggle__bars::before,
.site-header .nav-toggle__bars::after,
.site-header .nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  /* transform + opacity only: the bars never animate `top` (a layout property). */
  transition: transform var(--chrome-t), opacity var(--chrome-t);
}
.site-header .nav-toggle__bars::before { top: 0; }
.site-header .nav-toggle__bars span { top: 5px; }
.site-header .nav-toggle__bars::after { top: 10px; }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }

/* ---------- Header: menu layout below 1000px ---------- */
@media (max-width: 1000px) {
  /* The menu button comes first in the DOM so focus moves from it straight into
     the open list; visually it sits at the far right. */
  .site-header .theme-toggle { order: 1; }
  .site-header .nav-toggle { display: inline-flex; order: 2; }
  /* On phones the two buttons are bare icons, not boxes: the wordmark owns the bar. */
  .site-header .theme-toggle,
  .site-header .nav-toggle { border-color: transparent; background: transparent; width: 44px; height: 44px; }
  .site-header .theme-toggle:hover { background: transparent; color: var(--chrome-ink); }
  /* The theme switch moves into the open menu (chrome.js moves the button). */
  .site-header .nav__list > .nav__theme { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; padding: 0.5rem 0.25rem; font-size: 1.0625rem; }
  .site-header .nav__list > .nav__theme .theme-toggle { display: inline-flex; border: 1.5px solid var(--chrome-ink); }
  /* Hard-moment support is the first item in the phone menu: two taps from any page. */
  .site-header .nav__list > .nav__now { display: block; margin-bottom: 0.25rem; }
  .site-header .nav__now .nav__link { background: var(--sage-mist, var(--chrome-tint)); border-radius: var(--radius, 6px); padding-inline: 0.85rem; font-weight: 600; }
  .site-header .nav__list {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1rem, 4vw, 2.25rem) 1.5rem;
    background: var(--chrome-ground);
    border-bottom: 3px solid var(--chrome-ink);
    box-shadow: none;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--chrome-t), opacity var(--chrome-t), visibility 0s linear 240ms;
  }
  .site-header .nav.is-open .nav__list {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--chrome-t), opacity var(--chrome-t), visibility 0s;
  }
  .site-header .nav__list > li { border-bottom: 0; }
  .site-header .nav__link {
    width: 100%;
    min-height: 54px;
    padding: 0.75rem 0.25rem;
    border-radius: 0;
    font-size: 1.0625rem;
  }
  .site-header .nav__link::after { display: none; }
  .site-header .nav__link[aria-current="page"],
  .site-header .nav__summary.is-current { font-weight: 600; }
  .site-header .nav__link[aria-current="page"]::before,
  .site-header .nav__summary.is-current::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 0;
    background: var(--chrome-mark);
  }
  .site-header .nav__summary { justify-content: flex-start; }
  .site-header .nav__summary .nav__chev { margin-left: auto; }
  .site-header .nav__chev { width: 14px; height: 14px; }
  .site-header .nav__menu {
    position: static;
    width: auto;
    padding: 0 0 0.75rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none !important;
  }
  .site-header .nav__submenu-link { padding: 0.6rem 0.75rem; }
  .site-header .nav__menu-all { margin-top: 0.25rem; padding: 0.6rem 0.75rem; border-top: 0; }
  .site-header .nav__auth { margin: 0; }
  .site-header .nav__auth::before { display: none; }
  .site-header .nav__list > .nav__cta { margin: 1.25rem 0 0; border-bottom: 0; }
  .site-header .nav__cta .btn { width: 100%; min-height: 52px; font-size: 1rem; }
}

@media (max-width: 720px) {
  :root { --header-h: 64px; --header-height: 64px; }
}
@media (max-width: 420px) {
  .site-header .site-header__inner { gap: 0.75rem; }
  /* Let the wordmark give way on the narrowest screens (320px phones, Display
     Zoom, 400% browser zoom): the brand may shrink and the name wraps to two
     lines instead of pushing the menu button off-screen (WCAG 1.4.10). */
  .site-header .brand { flex-shrink: 1; min-width: 0; gap: 0.5rem; }
  .site-header .brand__mark { flex-shrink: 0; }
  .site-header .brand__name { font-size: 1rem; line-height: 1.05; white-space: normal; }
}

/* ---------- Footer ---------- */
.site-footer {
  --chrome-on-dark: #EEF4F3;
  --chrome-on-dark-soft: #BCCFD3;
  --chrome-on-dark-muted: #9DB3B8;
  --chrome-on-dark-line: rgba(238, 244, 243, 0.14);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  background: var(--ink-900, #16232F);
  border-top: 0;
  color: var(--chrome-on-dark);
}
[data-theme="dark"] .site-footer {
  background: #0A1016;
}
.site-footer :focus-visible { outline-color: #7FC4BC; }
/* The name returns at full width to close the page: a designed end, not a sitemap. */
.site-footer .site-footer__wordmark {
  margin: clamp(2.5rem, 7vw, 5rem) 0 0;
  max-width: none;
  font-family: var(--chrome-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 7.4vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}
.site-footer .site-footer__wordmark-desc {
  display: block;
  font-family: var(--chrome-body);
  font-weight: 500;
  font-size: clamp(0.8rem, 1.6vw, 1.4rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 0.5em;
}
.site-footer .site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.site-footer .brand,
.site-footer .brand:hover,
.site-footer .brand__name { color: #FFFFFF; }
.site-footer .brand__mark { background: none; border: 0; color: #A9C3B2; }
.site-footer .site-footer__tag {
  max-width: 30ch;
  margin: 1.1rem 0 0;
  color: var(--chrome-on-dark-soft);
  font-family: var(--chrome-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer .footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: var(--chrome-on-dark-soft);
  font-family: var(--chrome-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--chrome-t);
}
.site-footer .footer-ig:hover { color: #FFFFFF; }
/* 44px touch targets for the brand links and the Instagram link. */
.site-header .brand, .site-footer .brand, .site-footer .footer-ig { min-height: 44px; }

.site-footer .site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.site-footer .site-footer__heading {
  margin: 0 0 1rem;
  color: #FFFFFF;
  font-family: var(--chrome-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.site-footer .footer-list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-list li { margin: 0; }
.site-footer .footer-list a {
  color: var(--chrome-on-dark-soft);
  font-family: var(--chrome-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--chrome-t);
}
/* 44px touch targets on phones; the taller links carry the row spacing. */
@media (max-width: 720px) {
  .site-footer .footer-list { gap: 0; }
  .site-footer .footer-list a { display: flex; align-items: center; min-height: 44px; }
}
.site-footer .footer-list a:hover,
.site-footer .footer-list a[aria-current="page"] { color: #FFFFFF; }

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.25rem;
  border-top: 3px solid var(--chrome-on-dark);
  color: var(--chrome-on-dark-muted);
  font-family: var(--chrome-display);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.site-footer .footer-bottom p { margin: 0; color: inherit; font-size: inherit; max-width: none; }
.site-footer .footer-bottom a {
  color: var(--chrome-on-dark-soft);
  text-decoration: underline;
  text-decoration-color: var(--chrome-on-dark-line);
  text-underline-offset: 3px;
  transition: color var(--chrome-t), text-decoration-color var(--chrome-t);
  /* A fingertip-sized hit area without changing the line. */
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}
.site-footer .footer-bottom a:hover { color: #FFFFFF; text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .site-footer .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-footer .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

@media print {
  .site-header,
  .site-footer { display: none; }
}

/* Footer brand line: the tagline sits above the descriptor, a step larger, in the display face. */
.site-footer .site-footer__line {
  max-width: 30ch;
  margin: 1.1rem 0 0;
  color: var(--chrome-on-dark);
  font-family: var(--chrome-display);
  font-size: 1.1875rem;
  line-height: 1.35;
}
.site-footer .site-footer__line + .site-footer__tag { margin-top: 0.35rem; }