/* Shared styles for every page: Penn palette tokens, base type, site header and footer.
   Layout: Penn Blue header band with a Penn Red rule, content on a cool paper ground below. */
:root {
  --penn-blue: #011f5b;
  --penn-red: #990000;
  --header-bg: #011f5b;
  --header-ink: #ffffff;
  --header-muted: rgba(255, 255, 255, 0.74);
  --header-hover: rgba(255, 255, 255, 0.10);
  --tab-mark: #e0524a;

  --bg: #f5f6f9;
  --panel: #ffffff;
  --ink: #0d1a33;
  --ink-2: #45506a;
  --muted: #687390;
  --line: #d9deea;
  --grid: #eceff5;
  --name: #011f5b;
  --accent: #011f5b;
  --accent-ink: #0a3a8c;
  --accent-wash: rgba(1, 31, 91, 0.07);
  --on-accent: #ffffff;
  --red: #990000;
  --neg: #b42318;
  --focus: #2a78d6;
  --shadow: 0 8px 24px rgba(13, 26, 51, 0.10);

  /* chart series (validated pair) */
  --val: #2a78d6;
  --val-wash: rgba(42, 120, 214, 0.10);
  --invested: #eb6834;

  --f-display: "Libre Caslon Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.84rem;
  --t-md: 0.94rem;
  --t-lg: 1.375rem;
  --radius: 10px;
  --wrap: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1120;
    --panel: #111a2c;
    --ink: #e6ebf4;
    --ink-2: #aab4c8;
    --muted: #8190aa;
    --line: #243049;
    --grid: #1b253a;
    --name: #e6ebf4;
    --accent: #7ea6e6;
    --accent-ink: #9dbcf0;
    --accent-wash: rgba(126, 166, 230, 0.14);
    --on-accent: #0a1120;
    --red: #e36b6b;
    --neg: #ef7a72;
    --focus: #6da7ec;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --val: #3987e5;
    --val-wash: rgba(57, 135, 229, 0.14);
    --invested: #d95926;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1120;
  --panel: #111a2c;
  --ink: #e6ebf4;
  --ink-2: #aab4c8;
  --muted: #8190aa;
  --line: #243049;
  --grid: #1b253a;
  --name: #e6ebf4;
  --accent: #7ea6e6;
  --accent-ink: #9dbcf0;
  --accent-wash: rgba(126, 166, 230, 0.14);
  --on-accent: #0a1120;
  --red: #e36b6b;
  --neg: #ef7a72;
  --focus: #6da7ec;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --val: #3987e5;
  --val-wash: rgba(57, 135, 229, 0.14);
  --invested: #d95926;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main, body > .page { flex: 1 0 auto; width: 100%; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Site header */
.site-header {
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 3px solid var(--penn-red);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-block: 12px;
}
.brand {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--header-ink);
  text-decoration: none;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-inline: -10px; }
.site-nav a {
  color: var(--header-muted);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 6px;
}
.site-nav a:hover { color: var(--header-ink); background: var(--header-hover); }
.site-nav a[aria-current="page"] { color: var(--header-ink); box-shadow: inset 0 -2px 0 var(--tab-mark); border-radius: 6px 6px 0 0; }
.site-header :focus-visible { outline-color: #ffffff; }
@media (min-width: 640px) { .site-nav { margin-inline: 0; } }

/* Site footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xs); }
.site-footer .wrap {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
  padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px));
}
.site-footer a { color: var(--muted); }