/* ============================================================================
   Base: reset, typography, focus, layout primitives
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "onum";
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: var(--text-md);
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(134, 214, 198, 0.06), transparent 60%),
    linear-gradient(180deg, var(--ground-900) 0%, var(--ground-950) 100%);
  background-attachment: fixed;
}

img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-200); }
hr { border: 0; border-top: var(--hairline) solid var(--line); margin-block: var(--s-6); }
::selection { background: var(--accent-700); color: var(--bone-50); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-1); }
:focus:not(:focus-visible) { outline: none; }

/* --- type --- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 600; }
p { max-width: var(--measure); text-wrap: pretty; }
small, .small { font-size: var(--text-sm); }
.lede { font-size: var(--text-lg); color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.mono, code, kbd, .num { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.latin { font-family: var(--font-display); font-style: italic; font-size: 1.08em; color: var(--ink-muted); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-300);
}
.eyebrow::before { content: ""; display: inline-block; width: 1.1em; height: 1px; margin-right: 0.5em; vertical-align: 0.28em; background: currentColor; opacity: 0.5; }
.kbd {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 0.1em 0.45em; border: var(--hairline) solid var(--line-strong); border-bottom-width: 2px;
  border-radius: var(--radius-2); color: var(--ink-muted);
}

/* --- skip link --- */
.skip-link {
  position: absolute; left: var(--s-4); top: -100%; z-index: var(--z-toast);
  background: var(--bone-100); color: var(--ground-900);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-2);
}
.skip-link:focus { top: var(--s-4); }

/* --- layout primitives --- */
.wrap { width: min(100% - 2 * var(--s-5), 72rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--s-5), 40rem); }
.wrap--wide { width: min(100% - 2 * var(--s-5), 88rem); }
.stack > * + * { margin-block-start: var(--stack-gap, var(--s-4)); }
.stack--tight { --stack-gap: var(--s-2); }
.stack--loose { --stack-gap: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--s-3)); align-items: center; }
.cluster--between { justify-content: space-between; }
.grid { display: grid; gap: var(--grid-gap, var(--s-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
.center { text-align: center; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.section { padding-block: var(--s-8); }
.section + .section { border-top: var(--hairline) solid var(--line); }
.section__head { margin-block-end: var(--s-6); }
.section__head h2 { margin-block-start: var(--s-2); }

/* --- site chrome --- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  backdrop-filter: blur(10px) saturate(1.2);
  background: color-mix(in srgb, var(--ground-900) 82%, transparent);
  border-bottom: var(--hairline) solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.75rem; }
.brand { display: inline-flex; align-items: baseline; gap: var(--s-3); text-decoration: none; color: var(--ink-strong); }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.18em; }
.brand__latin { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--ink-faint); }
@media (max-width: 30rem) { .brand__latin { display: none; } }
.site-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.site-nav__link {
  color: var(--ink-muted); text-decoration: none; padding: var(--s-2) var(--s-3); border-radius: var(--radius-2);
  font-size: var(--text-sm); white-space: nowrap;
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--ink-strong); background: rgba(239, 233, 221, 0.06); }
.site-main { padding-block: var(--s-6) var(--s-8); }
.site-footer { border-top: var(--hairline) solid var(--line); padding-block: var(--s-6); color: var(--ink-faint); font-size: var(--text-sm); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; align-items: baseline; }
.site-footer a { color: var(--ink-muted); }
.inline-form { display: inline; }

/* --- reveal on scroll (JS adds .is-visible) --- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

/* --- site nav: a real bar on wide screens; one disclosure on narrow ones --- */
.site-nav__primary { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.site-nav__primary li { display: contents; }
.site-menu { position: relative; }
.site-menu__toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); }
.site-menu__toggle::-webkit-details-marker { display: none; }
.site-menu__avatar { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(127, 209, 200, 0.18); color: var(--ink-strong); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; }
.site-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: var(--z-overlay);
  display: flex; flex-direction: column; align-items: stretch; min-width: 14rem; padding: var(--s-2);
  background: var(--ground-800); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-3);
}
.site-menu__panel .inline-form { padding: var(--s-2) var(--s-3); }
.site-menu--account .site-menu__dup { display: none; }
.site-nav > .site-menu:not(.site-menu--account) { display: none; }
@media (max-width: 56rem) {
  .site-nav__primary, .site-nav__login { display: none; }
  .site-nav > .site-menu:not(.site-menu--account) { display: block; }
  .site-menu--account .site-menu__dup { display: block; }
  .site-menu__label { display: none; }
  .site-menu:not(.site-menu--account) .site-menu__label { display: inline; }
}

/* --- motion system (M11.4): cross-document view transitions, quiet and short --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--ease-in-out) both vt-fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(8px); } }
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* staggered entrance for lists and grids: children fade up in sequence */
.stagger > * { animation: stagger-in var(--dur-2) var(--ease-out) both; }
.stagger > :nth-child(1) { animation-delay: 0ms; }  .stagger > :nth-child(2) { animation-delay: 40ms; }
.stagger > :nth-child(3) { animation-delay: 80ms; } .stagger > :nth-child(4) { animation-delay: 120ms; }
.stagger > :nth-child(5) { animation-delay: 160ms; } .stagger > :nth-child(6) { animation-delay: 200ms; }
.stagger > :nth-child(n+7) { animation-delay: 240ms; }
@keyframes stagger-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stagger > * { animation: none; } }

/* numbers that count up (JS sets the final text; this only eases the swap) */
.tick { display: inline-block; transition: transform var(--dur-1) var(--ease-out); }
.tick.is-bumping { transform: translateY(-2px); }

/* shared-element: the subject's name flies from the map into the subject page heading */
.vt-subject-title { view-transition-name: subject-title; }
::view-transition-group(subject-title) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .vt-subject-title { view-transition-name: none; } }

/* --- typography: numerals in timers and scores line up; display faces use optical sizing --- */
.mono, .timer, .stat__value, .ring__value, .exam-nav__cell, .table .num { font-variant-numeric: tabular-nums; }
h1, h2, .display { font-optical-sizing: auto; text-wrap: balance; }
p, li { text-wrap: pretty; }