/* Shared Slow Yoga header: one brand lockup and one main navigation on every page,
   including the Friend of Carl pages. Markup comes from scripts/site-header.mjs.
   Self-contained on purpose: it sets its own font, colors and box model so it renders
   identically whether or not styles.css (or a page's own design) is loaded. */
header.site-header, header.site-header * , header.site-header *::before, header.site-header *::after { box-sizing:border-box; }
header.site-header { --ink:#111; --muted:#505050; --accent:#272727; --site-header-bg:#fff; font-family:Arial,Helvetica,sans-serif; font-weight:400; font-style:normal; line-height:1.6; letter-spacing:normal; text-transform:none; color:var(--ink); -webkit-font-smoothing:auto; }
header.site-header.wrap { width:min(1370px,86.5%); display:flex; align-items:center; justify-content:space-between; padding-block:24px; gap:24px; margin-inline:auto; }
header.site-header a { color:inherit; text-decoration:none; }
header.site-header .brand-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex-shrink:0; min-height:83.6px; }
header.site-header .masthead { font-family:Arial,Helvetica,sans-serif; font-size:30px; line-height:1.2; letter-spacing:-.025em; }
header.site-header .masthead span { color:var(--accent); }
header.site-header .brand-credit { font-size:12px; letter-spacing:.02em; line-height:1.4; color:var(--muted); margin-top:4px; }
/* Homepage-only tagline (D-024, owner decision October 8, 2026). */
header.site-header .brand-tagline { font-size:14px; letter-spacing:.02em; line-height:1.4; color:var(--muted); }
header.site-header nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:34px; margin:0; }
header.site-header nav a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; letter-spacing:normal; color:#222; }
header.site-header nav a:hover, header.site-header nav a:focus-visible { color:var(--ink); }
header.site-header nav a[aria-current="page"] { color:var(--ink); text-decoration:underline; text-underline-offset:7px; }
header.site-header a:focus-visible, header.site-header .home-nav-toggle:focus-visible { outline:2px solid #111; outline-offset:5px; }
header.site-header [hidden] { display:none!important; }
header.site-header .home-nav-toggle { display:none; font:inherit; font-size:15px; color:var(--ink); border:1px solid #ddd; border-radius:0; background:#fff; padding:9px 14px; min-height:44px; cursor:pointer; }
@media(min-width:901px) and (max-height:850px) {
  header.site-header.wrap { padding-block:18px; }
}
@media(max-width:1000px) and (min-width:901px) {
  header.site-header nav { gap:22px; }
  header.site-header nav a { font-size:14px; }
}
@media(max-width:900px) {
  header.site-header.wrap { width:calc(100% - 36px); position:sticky; top:0; z-index:900; display:flex; flex-wrap:wrap; align-items:center; gap:0; min-height:86px; padding-block:16px; background:var(--site-header-bg); box-shadow:0 0 0 18px var(--site-header-bg); }
  header.site-header .brand-lockup { min-height:74.4px; }
  header.site-header .masthead { font-size:24px; }
  header.site-header .brand-credit { margin-top:2px; }
  header.site-header.js .home-nav-toggle { display:block; margin-left:auto; margin-right:0; }
  /* The collapsed menu is hidden by CSS (not by script) so opening it never shifts the page. */
  header.site-header.js nav:not(.is-open) { display:none; }
  header.site-header nav { flex-basis:100%; justify-content:flex-start; display:grid; grid-template-columns:1fr 1fr; gap:0 16px; margin-top:16px; border-top:1px solid #ddd; padding-top:8px; }
  header.site-header nav a { font-size:16px; min-height:48px; }
}
@media(max-width:360px) {
  header.site-header .brand-lockup { min-height:69.2px; }
  header.site-header .masthead { font-size:22px; }
  header.site-header .brand-credit { font-size:11px; }
  header.site-header .brand-tagline { font-size:13px; }
  header.site-header .home-nav-toggle { padding-inline:10px; }
}

/* Shared Slow Yoga footer (markup from scripts/site-footer.mjs): brand block, navigation, notice.
   Self-contained like the header so it renders identically on every page, including Friend of Carl and 404. */
footer.site-footer, footer.site-footer * { box-sizing:border-box; }
footer.site-footer { --ink:#111; --muted:#505050; --line:#ddd; --accent:#272727; font-family:Arial,Helvetica,sans-serif; font-weight:400; line-height:1.6; letter-spacing:normal; color:var(--ink); display:grid; grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr); gap:48px; align-items:start; width:min(1370px,86.5%); margin-inline:auto; padding-block:48px 64px; border-top:1px solid var(--line); }
footer.site-footer p { margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--muted); max-width:46ch; }
footer.site-footer a { color:inherit; text-underline-offset:4px; }
footer.site-footer a:focus-visible { outline:2px solid #111; outline-offset:4px; }
footer.site-footer .footer-brand { display:inline-flex; align-items:center; min-height:44px; margin:0 0 4px; font-size:20.8px; font-weight:600; letter-spacing:normal; text-decoration:none; color:var(--ink); }
footer.site-footer .period { color:var(--accent); }
footer.site-footer .account-provenance { margin-top:12px; font-size:13px; }
footer.site-footer .footer-nav ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; align-items:center; gap:0 24px; }
footer.site-footer .footer-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; text-decoration:none; color:var(--ink); }
footer.site-footer .footer-nav a:hover { text-decoration:underline; }
@media(min-width:1101px) { footer.site-footer .footer-nav a { white-space:nowrap; } }
footer.site-footer .footer-notice p { font-size:13px; margin-bottom:6px; }
@media(max-width:900px) {
  footer.site-footer { width:calc(100% - 36px); grid-template-columns:1fr; gap:24px; padding-block:36px 96px; }
}

/* Skip link: first focusable element on every page. */
header.site-header .skip-link { position:absolute; left:18px; top:-80px; z-index:1000; padding:12px 18px; background:#111; color:#fff; font-size:16px; text-decoration:none; }
header.site-header .skip-link:focus { top:8px; outline:2px solid #fff; outline-offset:-4px; }