/* Programme pages — the landing system, with a shorter field and a figure
   that belongs to the programme rather than to the institute. Loaded on top
   of landing.css, so the palette and type come from one place. */

.field.progpage {
  min-height: 78vh; padding: 128px 0 96px;
  /* deeper than the institute's field: these figures are drawn in light, and
     they need a ground dark enough to read against */
  background:
    radial-gradient(900px 620px at 74% 6%, #8A34D6 0%, transparent 56%),
    radial-gradient(700px 560px at 100% 82%, #1B6BA8 0%, transparent 58%),
    linear-gradient(112deg, #160540 0%, #340D8C 32%, #5320C0 70%, #6E2BD8 100%);
}
.field.progpage .shell { max-width: 1280px; }

#figure {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 1;
}
/* the figure owns the upper right; the type keeps a pool of shade */
.field.progpage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(24,7,64,0.90) 0%, rgba(24,7,64,0.64) 36%, rgba(24,7,64,0.16) 66%, transparent 86%);
}
.field.progpage .mast { max-width: 700px; }
.field.progpage .mast h1 { font-size: clamp(34px, 4.6vw, 60px); }
.pcode {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.66); margin-bottom: 16px;
}
.pcode .dim { color: rgba(255,255,255,0.40); }

/* ---------- prose ---------- */
.prose { max-width: 700px; }
.prose p { font-size: 17.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 20px; }
.prose p.big {
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.38; color: var(--ink);
  font-weight: 500; letter-spacing: -0.012em; margin-bottom: 26px;
}
.prose strong { color: var(--ink); font-weight: 500; }
section.band.tint { background: var(--surface); }

/* ---------- the record: a few figures, stated plainly ---------- */
.record {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin-top: 40px;
}
.record div { background: var(--paper); padding: 24px 22px; }
.record b {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 24px; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 6px;
}
.record span { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* ---------- where to go next ---------- */
.onward { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 38px; }
.onward a {
  font-family: var(--font-mono); font-size: 13.5px; text-decoration: none;
  color: var(--signal); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 6px; background: var(--paper);
}
.onward a:hover { border-color: var(--signal); background: var(--surface); }

@media (max-width: 980px) {
  .field.progpage { min-height: auto; padding: 112px 0 72px; }
  .field.progpage::after {
    background: linear-gradient(180deg,
      rgba(24,7,64,0.30) 0%, rgba(24,7,64,0.62) 46%, rgba(24,7,64,0.88) 100%);
  }
}