/* Base: the phone ends of the web scale, the reset, type primitives, links, focus and buttons.

   The web scale. Since ich-2027 1.2.0 the system's ramp is the web's at 1440: a 112px display, 120px band
   padding, body at 1.5, and --sp-stack-lg and --lay-gutter fluid down to 390 on their own. The engine keeps
   type and section steps as fixed px, so the type steps and the band padding below are each a clamp()
   between locked tokens, 1440 (the right end) to 390 (the left end). Components use these names for type
   and --space-section, --space-stack, --tile-pad and --poster-min; everything else reads the system. */
:root {
  /* Type, largest to smallest (1440 → 390) */
  /* Since 1.3.0 the steps are harvard.edu's at 1440 (h1 86, h2 59, h3 46), too big to scale down from, so the
     phone ends are Harvard's own clamp() minimums (--type-80/70/60/50/40: 52/44/36/30/26px) and the steps
     below the hero stop at their 1440 size, so none outgrows the hero on a wider screen. */
  --type-hero: clamp(52px, 7.8vw, var(--text-display)); /* 109 → 52: the name */
  --type-figure: clamp(72px, 9.7vw, calc(var(--text-display) * 1.25)); /* 136 → 72: one stat */
  --type-display: clamp(44px, 6.1vw, 88px); /* 88 → 44: posters */
  --type-title: clamp(36px, 4.45vw, 64px); /* 64 → 36: sections */
  --type-heading: clamp(30px, 2.7vw, 39px); /* 39 → 30 */
  --type-meta: clamp(var(--text-lead), 2.08vw, 30px); /* 30 → 24: corners */
  --type-subheading: 26px; /* Harvard's --type-40 floor, also its 1440 size */
  --type-lead: clamp(var(--text-body), 1.43vw, var(--text-lead)); /* 21 → 18 */
  --type-body: clamp(calc(var(--text-body) * 0.94), 1.25vw, var(--text-body)); /* 18 → 17 */

  /* Space (head to content is --sp-stack-lg, the side gutter --lay-gutter: both fluid in the system) */
  --space-section: clamp(calc(var(--sp-region) * 0.75), 8.33vw, var(--sp-section)); /* 120 → 72 */
  --space-stack: clamp(calc(var(--sp-stack-md) * 1.25), 2.2vw, calc(var(--sp-stack-md) * 2)); /* 32 → 20 */
  --tile-pad: clamp(var(--sp-stack-md), 2.2vw, var(--sp-inset-lg)); /* 32 → 16 */
  --poster-min: clamp(calc(var(--sp-section) * 3.5), 42vw, calc(var(--sp-section) * 5)); /* 600 → 420: five sections, the band recipe's rule */

  --title-measure: calc(var(--lay-page) * 0.76);
  --focus-width: calc(var(--stroke-hairline) * 2);
  --rise: calc(var(--sp-stack-md) * 1.5);
  --step: 55ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h, 0);
  background: var(--background);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-regular);
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Emphasis changes colour, never weight or style (docs/08 §4). */
strong,
b,
em {
  font-weight: var(--weight-regular);
  font-style: normal;
  color: var(--emphasis, inherit);
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Links: the band's own colour, a hairline underline on hover (no colour shift). ---- */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-quick) var(--ease-standard);
}

a:hover {
  text-decoration-color: currentColor;
}

/* ---- Focus: a 2px ring in the band's focus colour, offset clear of the shape. ---- */
:focus-visible {
  outline: var(--focus-width) solid var(--focus, currentColor);
  outline-offset: var(--sp-optical);
}

.skip-link {
  position: absolute;
  top: var(--sp-inset-md);
  left: var(--sp-inset-md);
  z-index: 100;
  padding: var(--sp-inset-md) calc(var(--sp-inset-md) * 2);
  background: var(--primary);
  color: var(--primary-foreground);
  --focus: var(--primary);
  transform: translateY(-300%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---- Type primitives ---- */
.label {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  line-height: var(--text-h3--line-height);
  color: var(--quiet, currentColor);
  text-wrap: balance;
}

/* Section titles take the page measure: the 0.76 cap is for the hero's two-phrase name; a long section title
   held to it leaves one word on a line of its own. */
.title {
  max-width: var(--lay-page);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  text-wrap: balance;
}

/* Display titles keep the board's two-line rule: on the web scale 0.76 of the page no longer forces the break,
   so the measure is also held to 8em of the title's own size. */
.display {
  max-width: min(var(--title-measure), 8em);
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  text-wrap: balance;
}

/* ALL CAPS title-only mode: 0.75 of display, untracked, with Gambarino's case-sensitive forms. On phones it
   holds at h1, not h2: both caps titles fit 342px at h1, and at h2 the poster band reads empty. */
.caps {
  max-width: calc(var(--lay-page) * 0.6);
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  text-transform: uppercase;
  font-feature-settings: 'case' 1;
  color: var(--loud, currentColor);
  text-wrap: balance;
}

.subtitle {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  text-wrap: balance;
}

/* A narrow left-ragged column, centred as a block under a centred title (the board's body). */
.lede {
  width: fit-content;
  max-width: var(--ms-md);
  margin-inline: auto;
  font-size: var(--type-lead);
  line-height: var(--text-lead--line-height);
  letter-spacing: var(--text-lead--letter-spacing);
  text-align: left;
}

.small {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* ---- Buttons: a square block. Crimson with white type by default; `--paper` is the paper block that carries
   the ground's colour as its type. No outline variant. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-inset-xs);
  min-height: var(--ctl-xl);
  padding: var(--sp-inset-md) calc(var(--sp-inset-md) * 2);
  border-width: 0;
  border-radius: var(--r-containers);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--duration-quick) var(--ease-standard),
    text-decoration-color var(--duration-quick) var(--ease-standard);
}

.btn--paper {
  background: var(--background);
  color: var(--on-paper, var(--foreground));
}

/* The solid block in the band's own ink, for a paper band whose ink is not crimson. */
.btn--ink {
  background: var(--ink);
  color: var(--ground);
}

.btn:hover,
.btn.is-hover {
  text-decoration-color: currentColor;
}

.btn.is-focus {
  outline: var(--focus-width) solid var(--focus, currentColor);
  outline-offset: var(--sp-optical);
}

/* Not yet open: the block stays, its label goes quiet (rose tint is the quiet colour on crimson). */
.btn:disabled {
  cursor: default;
  text-decoration-color: transparent;
}

.btn:not(.btn--paper):disabled {
  color: var(--palette-rose-tint);
}

/* The link-out mark: one filled glyph, sized to the text it follows. */
.arrow {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-inline-start: var(--sp-optical);
  vertical-align: 0.5em;
  fill: currentColor;
}

/* Every title in ALL CAPS (Ahmed, 26 Oct): untracked, with Gambarino's case-sensitive forms, as the board's
   caps cards set them. Subtitles, labels and body stay in sentence case. */
.title,
.display,
.hero__title,
.programme__title {
  text-transform: uppercase;
  font-feature-settings: 'case' 1;
}