@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  --mac-maroon: #7A003C;
  --mac-maroon-20: #E4CCDA;
  --mac-maroon-80: #953360;
  --mac-gold: #FDBF57;
  --mac-gold-20: #FFF2DD;
  --mac-gold-60: #FED999;
  --mac-grey: #495965;
  --mac-grey-20: #DBDEE0;
  --mac-grey-40: #B6BDC1;
  --mac-grey-80: #6D7A82;
  --lab-background: #F7F8FA;
  --lab-surface: #FFFFFF;
  --lab-text: #2D3338;
  --success: #287A4B;
  --danger: #B42318;
  --content: 1180px;
  --lab-page-width: 72rem;

  /* Stable aliases used by the Phase 1 shell and knowledge pages. */
  --maroon: var(--mac-maroon);
  --maroon-dark: #5A002D;
  --gold: var(--mac-gold);
  --gold-dark: #8A5A00;
  --grey: var(--mac-grey);
  --ink: var(--lab-text);
  --muted: var(--mac-grey);
  --surface: var(--lab-surface);
  --canvas: var(--lab-background);
  --line: rgba(73, 89, 101, 0.14);
  --success-bg: #EFFAF3;
  --danger-bg: #FFF3F2;
  --info-bg: #F8FAFC;
  --radius: 16px;
  color-scheme: light;
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; min-width: 280px; overflow-x: hidden; color: var(--lab-text); background: var(--lab-background); font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
code, pre, .font-mono { font-family: 'Roboto Mono', Consolas, monospace; }
code { font-size: .92em; }
a { color: inherit; }
main a[href], .concept-link { color: var(--mac-maroon); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
main a[href]:hover, .concept-link:hover { color: #5A002D; }
h1, h2, h3 { margin-top: 0; line-height: 1.15; }
p { margin-top: 0; }

:focus-visible { outline: 3px solid var(--mac-gold); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; inset: .75rem auto auto .75rem; padding: .65rem .9rem; color: var(--mac-maroon); background: #fff; border: 2px solid var(--mac-maroon); border-radius: 9px; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: 1.5rem; }
.page-stack { display: grid; gap: 1.25rem; padding-block: 2rem 4rem; }
.site-header { background: #fff; border-bottom: 1px solid rgba(73,89,101,.12); box-shadow: 0 4px 20px rgb(0 0 0 / 4%); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand, .brand-link { margin: 0; color: var(--mac-maroon); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.eyebrow { margin: 0 0 .7rem; color: var(--mac-maroon); font-size: clamp(.9rem, 1.1vw, 1.05rem); font-weight: 800; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.lede { max-width: 72ch; color: var(--mac-grey); font-size: 1.08rem; font-weight: 400; }
.site-footer { padding: 1.5rem 0; color: #fff; background: var(--mac-grey); }
.visually-hidden, .sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

@media (max-width: 640px) {
  .shell { padding-inline: 1rem; }
  .header-inner { align-items: flex-start; flex-direction: column; padding-block: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; transition-duration: .001ms!important; animation-duration: .001ms!important; animation-iteration-count: 1!important; }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}