/* Tokens follow the hesselberthlab.org CU Anschutz theme: warm cream ground,
   CU gold for decoration, deeper gold where text needs AA contrast. */

/* Metric-matched fallback so the page does not jump when Crimson Pro loads. */
@font-face {
  font-family: 'Crimson Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif');
  size-adjust: 97.1%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --font-serif: 'Crimson Pro', 'Crimson Fallback', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --bg: #faf7f0;
  --fg: #1c1b19;
  --footer-fg: #45413a;
  --primary: #756026;
  --ink-soft: #55534e;
  --rule: #e2d9c6;
  --pano-opacity: 0.22;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1917;
    --fg: #ede7da;
    --footer-fg: #c9c2b4;
    --primary: #cfb87c;
    --ink-soft: #b8b1a3;
    --rule: #35322d;
    --pano-opacity: 0.16;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  line-height: 1.5;
}

.splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem;
  text-align: center;
}

.motif { max-width: 100%; height: auto; margin-bottom: 1.75rem; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}

h1 {
  margin: 0;
  font-size: clamp(3.5rem, 12vw, 7rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.name {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: var(--ink-soft);
}

/* Footer: the mountain panorama is a band at the top of the footer, drawn at
   its intrinsic ratio (1584/438) so the ridge is never stretched or cropped. */
.page-footer {
  position: relative;
  isolation: isolate;
  color: var(--footer-fg);
}

.page-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1584 / 438;
  background: url('/media/footer-panorama.png') no-repeat center top / 100% auto;
  opacity: var(--pano-opacity);
  pointer-events: none;
}

.page-footer footer { padding-inline: 1.25rem; }

.pano-credit-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27.65vw; /* 438/1584 */
}

.credit, .copyright {
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
}

.copyright { padding-bottom: 1.25rem; }