/* =============================================================================
   LEAP · Laboratory for the Economics of Africa's Past
   Design system. Plain CSS, no build step. All colours are tokens in :root.
   Maroon and gold (Stellenbosch University) carry the colour weight; the four
   letter accents appear only as a page's motif, card rule and eyebrow label.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family:"Raleway"; font-weight:200; font-style:normal; font-display:swap; src:url("../fonts/Raleway-ExtraLight.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/Raleway-Light.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/Raleway-Regular.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/Raleway-Regular-Italic.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/Raleway-Medium.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/Raleway-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/Raleway-Bold.ttf") format("truetype"); }
@font-face { font-family:"Raleway"; font-weight:800; font-style:normal; font-display:swap; src:url("../fonts/Raleway-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Crimson Pro"; font-weight:300 700; font-style:italic; font-display:swap; src:url("../fonts/CrimsonPro-Italic-VF.ttf") format("truetype"); }

/* ---------- Tokens ---------- */
:root{
  --ink:#120a0e;            /* page ground */
  --ink-2:#1d0f16;          /* raised surfaces, cards */
  --ink-3:#2a1620;          /* hover surfaces */
  --maroon:#60223b;         /* SU Confident Maroon */
  --maroon-deep:#421628;
  --gold:#a78e53;           /* SU Brilliant Gold */
  --gold-soft:#d4bf8a;
  --paper:#f4efe6;
  --paper-text:rgba(244,239,230,.88);
  --paper-dim:rgba(244,239,230,.62);
  --hair:rgba(255,255,255,.08);
  --hair-gold:rgba(167,142,83,.35);

  /* Letter accents, from the leapstyle palette */
  --l-sage:#6B8E5E;
  --e-earth:#8B6B3D;  --e-sand:#D9C9A8;
  --a-blue:#3D8EB9;
  --p-plum:#5C2346;   --p-rose:#c98aa6;  --mint:#97C5B0;

  /* Per-page accent: overridden by the body class below */
  --accent:var(--gold);
  --accent-text:var(--gold);

  --wrap:1180px;
  --pad:clamp(1.4rem, 5vw, 4rem);
  --sec:clamp(5rem, 11vw, 9rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Crimson Pro", "Iowan Old Style", Georgia, serif;
}
.page--news{     --accent:var(--a-blue);  --accent-text:#6fb2d6; }
.page--research,
.page--lectures{ --accent:var(--e-earth); --accent-text:var(--e-sand); }
.page--team{     --accent:var(--p-plum);  --accent-text:var(--p-rose); }
.page--data,
.page--contact{  --accent:var(--l-sage);  --accent-text:#8fb381; }

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:clamp(16.8px, 1rem + .22vw, 18px); }
body{
  font-family:"Raleway", "Trebuchet MS", system-ui, sans-serif;
  font-weight:400;
  font-feature-settings:"liga" 0, "clig" 0, "lnum" 1;
  color:var(--paper-text);
  background:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:var(--ink); padding:.6rem 1rem; font-weight:600; }
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Shared typography ---------- */
.label{
  font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold);
}
.label--accent{ color:var(--accent-text); }
.display{
  font-weight:200; font-size:clamp(2.4rem, 6vw, 5rem); line-height:1.05; letter-spacing:-.01em;
  color:#fff; margin-top:1.1rem;
}
.h2{
  font-weight:200; font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.1; letter-spacing:-.01em;
  color:#fff; margin-top:1rem;
}
.lede{
  font-weight:300; font-size:clamp(1.05rem, 1.6vw, 1.32rem); line-height:1.6;
  color:rgba(244,239,230,.8); max-width:58ch; margin-top:1.5rem;
}
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; }
.link{ color:var(--gold-soft); border-bottom:1px solid var(--hair-gold); padding-bottom:1px; transition:color .25s var(--ease), border-color .25s var(--ease); }
.link:hover{ color:#fff; border-bottom-color:var(--gold-soft); }
.more{ display:inline-flex; align-items:center; gap:.6rem; margin-top:clamp(2rem,4vw,3rem); font-size:.84rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); transition:color .25s var(--ease), gap .25s var(--ease); }
.more::after{ content:"→"; font-weight:400; letter-spacing:0; }
.more:hover{ color:var(--gold-soft); gap:.95rem; }

/* ---------- Bands ---------- */
section{ position:relative; }
.band{ padding-block:var(--sec); background:var(--ink); }
.band--maroon{ background:radial-gradient(120% 90% at 78% 0%, var(--maroon-deep) 0%, var(--ink-2) 52%, var(--ink) 100%); }
.band--tight{ padding-block:clamp(3.5rem,7vw,5.5rem); }
.band--paper{ background:var(--paper); color:#33202a; }
.band--tight-top{ padding-top:clamp(1rem,3vw,2.5rem); }
.band--paper .label{ color:var(--maroon); }
.band--paper .h2{ color:var(--maroon); }
.band--paper .lede{ color:#5a4650; }
.band--paper .more{ color:var(--maroon); }
.band--paper .more:hover{ color:var(--ink); }
.band--paper :focus-visible{ outline-color:var(--maroon); }
.section-head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head--row{ max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.section-head--row .more{ margin-top:0; }

/* ---------- Motifs: a low-opacity texture behind a section ---------- */
.motif{ position:relative; isolation:isolate; overflow:hidden; }
.motif::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 50%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 50%, transparent 100%);
}
.motif--contour::before{ background-image:url("../img/motif-contour.svg"); opacity:.34; }
.motif--paper::before{
  background-image:url("../img/archive/motif-e-1800.jpg");
  background-image:image-set(url("../img/archive/motif-e-1800.webp") type("image/webp"), url("../img/archive/motif-e-1800.jpg") type("image/jpeg"));
  opacity:.16;
}
.motif--ink::before{
  background-image:url("../img/archive/motif-a-1800.jpg");
  background-image:image-set(url("../img/archive/motif-a-1800.webp") type("image/webp"), url("../img/archive/motif-a-1800.jpg") type("image/jpeg"));
  opacity:.17;
}
.motif--weave::before{ background-image:url("../img/motif-weave.svg"); background-size:240px 240px; background-repeat:repeat; opacity:.2; }

/* =============================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__inner{
  max-width:1320px; margin-inline:auto; padding:.95rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__logo img{ height:46px; width:auto; }
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-size:.84rem; font-weight:500; letter-spacing:.04em; color:rgba(255,255,255,.82);
  position:relative; padding-block:.3rem; transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--gold);
  transition:width .3s var(--ease);
}
.nav__links a:hover,.nav__links a.active{ color:#fff; }
.nav__links a.active::after,.nav__links a:hover::after{ width:100%; }
.nav.scrolled{ background:rgba(18,10,14,.97); box-shadow:0 1px 0 var(--hair-gold); }

.nav__toggle{ display:none; background:none; border:0; cursor:pointer; width:30px; height:22px; position:relative; }
.nav__toggle span{ position:absolute; left:0; height:2px; width:100%; background:#fff; transition:.3s var(--ease); }
.nav__toggle span:nth-child(1){ top:0; }
.nav__toggle span:nth-child(2){ top:10px; }
.nav__toggle span:nth-child(3){ top:20px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ top:10px; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ top:10px; transform:rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:55; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.menu.open{ opacity:1; visibility:visible; }
.menu nav{ display:flex; flex-direction:column; gap:1.6rem; text-align:center; }
.menu a{ font-size:1.8rem; font-weight:200; color:#fff; letter-spacing:.01em; }
.menu a:hover{ color:var(--gold); }

/* =============================================================================
   HERO (home): four letters, four archival windows
   ========================================================================== */
.hero{
  /* The whole cover (letters, headline, text, buttons) fits one screen: sizes scale with the viewport height. */
  min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  background:radial-gradient(130% 100% at 80% -10%, var(--maroon-deep) 0%, var(--ink-2) 42%, var(--ink) 100%);
  padding:clamp(5rem, 11svh, 6.5rem) var(--pad) clamp(1.5rem, 5svh, 3.5rem);
}
.hero__inner{ max-width:calc(var(--wrap) - 2 * var(--pad)); width:100%; margin-inline:auto; }
.hero__word{
  position:relative; display:flex; align-items:flex-end; gap:.02em; margin-left:-.04em;
  font-weight:800; font-size:clamp(4.5rem, min(30vw, 30svh), 21rem); line-height:.78; letter-spacing:-.01em;
  --shift:0px;
}
.hero__letter{ position:relative; display:block; }
.hero__glyph{
  display:block; padding-bottom:.04em;
  background-size:cover; background-position:50% calc(50% + var(--shift));
  transition:filter .4s var(--ease);
}
.hero__letter:hover .hero__glyph, .hero__letter.show .hero__glyph{ filter:brightness(1.14) contrast(1.04); }
.hero__glyph.l{ color:var(--l-sage); }
.hero__glyph.e{ color:var(--e-sand); }
.hero__glyph.a{ color:var(--a-blue); }
.hero__glyph.p{ color:var(--p-rose); }
/* Defaults only: a script in index.html draws one of five sources per letter (_data/hero.yml). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__glyph{ -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
  .hero__glyph.l{ background-image:url("../img/hero/l-free-state-map.webp"); }
  .hero__glyph.e{ background-image:url("../img/hero/e-barberton.webp"); }
  .hero__glyph.a{ background-image:url("../img/hero/a-estate-inventory.webp"); }
  .hero__glyph.p{ background-image:url("../img/hero/p-attestation-paper.webp"); }
}
/* The archival source of each letter, shown when the pointer is over it (or it is tapped). */
.hero__tip{
  position:absolute; left:.06em; top:100%; margin-top:.35rem; white-space:nowrap; pointer-events:none;
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:1rem; line-height:1.3; letter-spacing:0;
  opacity:0; transform:translateY(-4px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hero__letter:hover .hero__tip, .hero__letter.show .hero__tip{ opacity:1; transform:none; }
/* P is the last letter: its caption runs leftwards so a long line cannot leave the screen. */
.hero__tip.p{ left:auto; right:.1em; text-align:right; }
.hero__tip.l{ color:#8fb381; } .hero__tip.e{ color:var(--e-sand); } .hero__tip.a{ color:#6fb2d6; } .hero__tip.p{ color:var(--p-rose); }
.hero__label{ margin-top:clamp(2.7rem, 6.5svh, 3.6rem); }
.hero__label a{ color:inherit; border-bottom:1px solid transparent; transition:border-color .25s var(--ease); }
.hero__label a:hover, .hero__label a:focus-visible{ border-bottom-color:currentColor; }
@media (min-width:700px){ .hero__label a{ white-space:nowrap; } }
.hero__title{
  margin-top:clamp(.6rem, 1.6svh, 1.1rem); font-weight:200; font-size:clamp(1.9rem, min(5.2vw, 7svh), 4rem);
  line-height:1.07; letter-spacing:-.015em; color:#fff; max-width:20ch; text-wrap:balance;
}
.hero__sub{
  margin-top:clamp(.8rem, 2.4svh, 1.5rem); font-weight:300; font-size:clamp(1rem, min(1.6vw, 2.6svh), 1.25rem);
  line-height:1.55; color:rgba(244,239,230,.8); max-width:60ch;
}
.hero__cta{ margin-top:clamp(1.2rem, 3.6svh, 2.4rem); display:flex; gap:1rem; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-block; font-weight:600; font-size:.92rem; letter-spacing:.03em;
  padding:.95rem 2rem; border-radius:2px; transition:.35s var(--ease); cursor:pointer; border:1.5px solid transparent;
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }
.btn--maroon{ background:var(--maroon); color:#fff; }
.btn--maroon:hover{ background:var(--ink); transform:translateY(-2px); }
.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; }

/* =============================================================================
   PAGE HEAD (every page but home)
   ========================================================================== */
.page-head{ padding:clamp(9rem,17vw,13rem) 0 clamp(3.5rem,7vw,5.5rem); background:radial-gradient(120% 100% at 80% -10%, var(--maroon-deep) 0%, var(--ink-2) 45%, var(--ink) 100%); }
.page-head .display{ max-width:18ch; }
.page-head__rule{ display:block; width:3.5rem; height:3px; background:var(--accent); margin-top:2.2rem; }
.page--team .page-head__rule{ background:linear-gradient(90deg, var(--p-plum) 0 40%, var(--gold) 40% 70%, var(--mint) 70% 100%); }

/* =============================================================================
   MISSION + PHOTOGRAPH (home)
   ========================================================================== */
.mission{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.mission__text{ font-weight:300; font-size:clamp(1.2rem,2.1vw,1.7rem); line-height:1.5; color:#fff; }
.mission__founding{ margin-top:1.6rem; color:var(--paper-dim); max-width:48ch; }
.mission__values{ margin-top:1.4rem; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold-soft); }
/* One of LEAP's own photographs, mounted like a print: black and white, a gold hairline set off the edge */
.moment{ margin:2.9rem 0 0; }
.moment__img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--ink-2); filter:grayscale(1); outline:1px solid var(--hair-gold); outline-offset:10px; }
.moment__cap{ display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--hair-gold); font-size:.88rem; line-height:1.5; color:var(--paper-dim); }
.moment__cap a{ color:var(--paper-text); border-bottom:1px solid var(--hair-gold); transition:border-color .25s var(--ease); }
.moment__cap a:hover, .moment__cap a:focus-visible{ border-bottom-color:var(--gold); }
.moment__year{ flex:none; font-family:var(--serif); font-style:italic; font-size:1.25rem; line-height:1; color:var(--gold-soft); }

/* =============================================================================
   CARDS
   ========================================================================== */
.grid{ display:grid; gap:clamp(1.4rem,2.4vw,2.2rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--5{ grid-template-columns:repeat(5,1fr); gap:clamp(1rem,1.6vw,1.5rem); }

.card{
  position:relative; display:flex; flex-direction:column; background:var(--ink-2);
  border:1px solid var(--hair); border-radius:2px; overflow:hidden;
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:2.6rem; background:var(--rule, var(--accent)); z-index:2;
  transition:width .5s var(--ease);
}
a.card:hover, .card--hover:hover{ transform:translateY(-4px); background:var(--ink-3); border-color:var(--hair-gold); }
a.card:hover::before, .card--hover:hover::before{ width:100%; }
.card__body{ padding:clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column; flex:1; }
.card__meta{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); }
.card__title{ font-weight:600; font-size:1.18rem; line-height:1.3; color:#fff; margin:.7rem 0 .7rem; letter-spacing:-.005em; }
.card__text{ font-size:.95rem; color:var(--paper-dim); line-height:1.6; }
.card__foot{ margin-top:auto; padding-top:1.2rem; font-size:.84rem; color:var(--paper-dim); }
.card__img{ aspect-ratio:16/10; width:100%; object-fit:cover; filter:saturate(.9); transition:transform .9s var(--ease); }
a.card:hover .card__img{ transform:scale(1.03); }
.card__img--portrait{ object-fit:contain; background:var(--ink-3); filter:grayscale(1); }

/* News */
.card--news{ --rule:var(--a-blue); }
.year-head{ display:flex; align-items:baseline; gap:1.4rem; margin:clamp(3rem,6vw,4.5rem) 0 1.8rem; }
.year-head:first-of-type{ margin-top:0; }
.year-head span{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(2.2rem,4vw,3rem); line-height:1; color:var(--gold-soft); }
.year-head::after{ content:""; flex:1; height:1px; background:var(--hair-gold); }

/* Project tiles (home) */
.card--project{ --rule:var(--e-earth); }
.card--project .card__img{ aspect-ratio:4/3; }
.card--project .card__title{ margin-top:.6rem; }

/* Person */
.person{ --rule:var(--p-plum); }
.person__photo{ aspect-ratio:1/1; width:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:transform .9s var(--ease); background:var(--ink-3); }
.person:hover .person__photo{ transform:scale(1.02); }
.person__initials{
  aspect-ratio:1/1; width:100%; display:flex; align-items:center; justify-content:center;
  font-weight:200; font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:.06em; color:var(--gold-soft);
  background:linear-gradient(rgba(29,15,22,.55), rgba(29,15,22,.55)), url("../img/motif-weave.svg") center/160px repeat, var(--ink-3);
}
.person .card__body{ padding:1.1rem 1.1rem 1.3rem; }
.person__name{ font-weight:600; font-size:1.02rem; line-height:1.25; color:#fff; }
.person__title{ margin-top:.35rem; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); line-height:1.5; }
.person__focus{ margin-top:.7rem; font-size:.86rem; line-height:1.5; color:var(--paper-dim); }
.person__link{ margin-top:auto; padding-top:.9rem; font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--gold-soft); }
.person__link:hover{ color:#fff; }

/* Board, on paper */
.board{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,2.6vw,2.4rem) clamp(1.2rem,2vw,2rem); }
.board__person{ display:flex; gap:1rem; align-items:center; }
.board__photo, .board__initials{ width:76px; height:76px; border-radius:50%; flex-shrink:0; }
.board__photo{ object-fit:cover; filter:grayscale(1); box-shadow:0 0 0 1px rgba(96,34,59,.25); }
.board__initials{ display:flex; align-items:center; justify-content:center; background:var(--maroon); color:var(--gold-soft); font-weight:300; font-size:1.3rem; letter-spacing:.06em; }
.board__name{ font-weight:700; font-size:.98rem; color:var(--maroon); line-height:1.25; }
.board__role{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#8a6f2f; margin-top:.2rem; }
.board__inst{ font-size:.84rem; color:#5a4650; line-height:1.4; margin-top:.2rem; }

/* Alumni table */
.table-wrap{ overflow-x:auto; }
.alumni{ width:100%; border-collapse:collapse; font-size:.95rem; }
.alumni th{ text-align:left; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding:0 1.2rem .9rem 0; border-bottom:1px solid var(--hair-gold); }
.alumni td{ padding:1.05rem 1.2rem 1.05rem 0; border-bottom:1px solid var(--hair); vertical-align:top; color:var(--paper-dim); }
.alumni td:first-child{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--gold-soft); white-space:nowrap; line-height:1.3; }
.alumni td:nth-child(2){ color:#fff; font-weight:600; white-space:nowrap; }
.alumni tr:hover td{ background:rgba(255,255,255,.02); }

/* Team: extraordinary professors and research affiliates, names only */
.affil{ display:grid; grid-template-columns:1fr 2fr; gap:2rem clamp(2rem,5vw,5rem); margin-top:clamp(3.5rem,7vw,5.5rem); padding-top:2.2rem; border-top:1px solid var(--hair-gold); }
.affil__list{ margin-top:1.2rem; display:grid; gap:.7rem; }
.affil__list--cols{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.5rem; }
.affil__list a{ font-weight:300; font-size:1.2rem; color:#fff; border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease); }
.affil__list a::after{ content:"\2197"; margin-left:.35em; font-size:.8em; color:var(--accent-text); }
.affil__list a:hover, .affil__list a:focus-visible{ color:var(--gold-soft); border-bottom-color:var(--hair-gold); }

/* Research: the Sampie Terreblanche Research Repository, with a halftone portrait */
.sampie{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; scroll-margin-top:5rem; }
.sampie__portrait{ position:relative; margin:.8rem 0 0; }
.sampie__portrait img{ display:block; width:100%; height:auto; outline:1px solid var(--hair-gold); outline-offset:12px; }
.sampie__portrait figcaption{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:3.5rem 1.2rem 1rem; background:linear-gradient(180deg, transparent, rgba(18,10,14,.92)); }
.sampie__name{ font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#fff; }
.sampie__dates{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--gold-soft); }
.sampie .project__strap{ margin-top:.8rem; }
.sampie__books{ margin-top:1.6rem; border-top:1px solid var(--hair-gold); }
.sampie__books li{ padding:.7rem 0; border-bottom:1px solid var(--hair-gold); font-style:italic; font-weight:300; color:var(--paper-text); }

/* LEAP Lectures: the next lecture, then a register of every lecture on a gold spine */
.lec-next{ display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.lec-next__img{ width:clamp(150px,18vw,220px); height:auto; filter:grayscale(1); outline:1px solid var(--hair-gold); outline-offset:10px; }
.lec-next__date{ margin-top:1rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; color:var(--gold-soft); }
.lec-next .h2{ margin-top:.6rem; }
.lec-next__aff{ margin-top:.3rem; color:var(--paper-dim); }
.lec-next__title{ margin-top:1.2rem; font-weight:300; font-size:clamp(1.3rem,2.2vw,1.7rem); color:#fff; }
.lec-next__note{ margin-top:.5rem; font-size:.92rem; color:var(--paper-dim); }
.register{ position:relative; margin-top:2.5rem; }
.register::before{ content:""; position:absolute; top:.6rem; bottom:.6rem; left:calc(7.5rem - 1px); width:1px; background:var(--hair-gold); }
.lec{ position:relative; display:grid; grid-template-columns:7.5rem 1fr minmax(0,20rem); gap:0 2.4rem; padding:2rem 0; border-bottom:1px solid var(--hair); }
.lec::before{ content:""; position:absolute; top:2.75rem; left:calc(7.5rem - 5px); width:9px; height:9px; border-radius:50%; background:var(--ink); border:1px solid var(--gold); }
.lec:hover::before{ background:var(--gold); }
.lec__mark{ display:flex; flex-direction:column; padding-right:1.4rem; }
.lec__year{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:2.6rem; line-height:1; color:var(--gold-soft); }
.lec__no{ margin-top:.5rem; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-text); }
.lec__body{ padding-top:.3rem; }
.lec__speaker{ font-weight:600; font-size:1.2rem; line-height:1.3; color:#fff; }
.lec__aff{ margin-top:.2rem; font-size:.9rem; color:var(--paper-dim); }
.lec__title{ margin-top:.8rem; font-weight:300; font-size:1.15rem; line-height:1.45; color:var(--paper-text); }
.lec__note{ margin-top:.5rem; font-size:.86rem; line-height:1.5; color:var(--paper-dim); }
.lec__links{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1rem; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); }
.lec__links a{ color:var(--gold-soft); border-bottom:1px solid var(--hair-gold); }
.lec__links a:hover{ color:#fff; border-bottom-color:var(--gold-soft); }
.lec__film, .lec__frame{ display:block; position:relative; width:100%; aspect-ratio:16/9; border:0; background:var(--ink-2); overflow:hidden; }
.lec__film img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .4s var(--ease); filter:brightness(.85); }
.lec__film:hover img, .lec__film:focus-visible img{ transform:scale(1.03); filter:brightness(1); }
.lec__play{ position:absolute; left:50%; top:50%; width:3.4rem; height:3.4rem; margin:-1.7rem 0 0 -1.7rem; border-radius:50%; border:1px solid rgba(244,239,230,.75); background:rgba(18,10,14,.45); transition:background .3s var(--ease), border-color .3s var(--ease); }
.lec__play::after{ content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:.55rem 0 .55rem .9rem; border-color:transparent transparent transparent var(--paper); }
.lec__film:hover .lec__play, .lec__film:focus-visible .lec__play{ background:var(--maroon); border-color:var(--gold); }
.lec-series{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.lec-series p{ font-size:1.05rem; line-height:1.65; }

/* Data index: one sortable table, one row per paper */
.dindex__tools{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem 2rem; margin-bottom:1.6rem; }
.dindex__search{ display:grid; gap:.5rem; flex:1 1 20rem; max-width:28rem; }
.dindex__search input{ font:inherit; font-size:.95rem; color:#fff; background:var(--ink-2); border:1px solid var(--hair-gold); border-radius:2px; padding:.7rem .9rem; }
.dindex__search input::placeholder{ color:var(--paper-dim); }
.dindex__search input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.dindex__count{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold-soft); }
.dindex__table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.dindex__table th{ text-align:left; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding:0 1.2rem .9rem 0; border-bottom:1px solid var(--hair-gold); white-space:nowrap; }
.dindex__sort{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.dindex__sort::after{ content:"\2195"; margin-left:.45em; opacity:.45; letter-spacing:0; }
th[aria-sort="ascending"] .dindex__sort::after{ content:"\2191"; opacity:1; }
th[aria-sort="descending"] .dindex__sort::after{ content:"\2193"; opacity:1; }
.dindex__sort:hover, .dindex__sort:focus-visible{ color:#fff; }
.dindex__table td{ padding:1.15rem 1.2rem 1.15rem 0; border-bottom:1px solid var(--hair); vertical-align:top; color:var(--paper-dim); }
.dindex__table tr:hover td{ background:rgba(255,255,255,.02); }
.dindex__paper{ width:46%; }
.dindex__authors{ min-width:10.5rem; }
.dindex__paper > a{ display:block; font-weight:600; line-height:1.4; color:#fff; }
.dindex__paper > a:hover{ color:var(--gold-soft); }
.dindex__outlet{ display:block; margin-top:.3rem; font-style:italic; font-size:.88rem; color:var(--paper-text); }
.dindex__data{ display:block; margin-top:.35rem; font-size:.86rem; line-height:1.5; }
.dindex__period, .dindex__date{ white-space:nowrap; }
.dindex__date{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold-soft); }
.dindex__get{ text-align:right; white-space:nowrap; }
.dindex__get a{ display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); border-bottom:1px solid var(--hair-gold); margin-left:.9rem; }
.dindex__get a:hover{ color:#fff; border-bottom-color:var(--gold-soft); }
.dindex__none{ padding:1.4rem 0; color:var(--paper-dim); }
.dindex__note{ margin-top:1.4rem; font-size:.86rem; color:var(--paper-dim); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:2.5rem; }
.steps--4{ grid-template-columns:repeat(4,1fr); }
.steps li{ background:var(--ink-2); padding:1.6rem; }
.steps code, .prose code{ font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:.84em; color:#a9c79b; }
.steps h3{ font-size:.98rem; font-weight:600; color:#fff; margin-bottom:.5rem; }
.steps p{ font-size:.9rem; color:var(--paper-dim); }

/* =============================================================================
   RESEARCH
   ========================================================================== */
.project{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--hair); scroll-margin-top:5rem; }
.project:first-of-type{ border-top:0; padding-top:0; }
.project:nth-of-type(even) .project__media{ order:2; }
.project__media{ position:relative; }
.project__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
.project__media::after{ content:""; position:absolute; left:-10px; top:-10px; width:3.2rem; height:3.2rem; border-left:2px solid var(--e-earth); border-top:2px solid var(--e-earth); }
.project__name{ font-weight:200; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; color:#fff; }
.project__strap{ margin-top:.5rem; font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--e-sand); }
.project__facts{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top:1.2rem; font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); }
.project__facts b{ color:var(--gold); font-weight:600; margin-right:.5em; }
.project__body{ margin-top:1.3rem; display:grid; gap:1rem; max-width:62ch; }
.project__body p{ color:var(--paper-text); }

/* Library (Research page) */
.library{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; scroll-margin-top:5rem; }
.library .project__strap{ margin-top:.8rem; }
.library__note{ margin-top:1.6rem; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold-soft); }
.library__facts{ border-top:1px solid var(--hair-gold); }
.library__facts div{ padding:1.2rem 0; border-bottom:1px solid var(--hair-gold); }
.library__facts dt{ font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.library__facts dd{ margin-top:.4rem; font-weight:300; font-size:1.15rem; line-height:1.4; color:#fff; }
.contact__note{ margin-top:.9rem; font-size:.95rem !important; color:var(--paper-dim) !important; max-width:34ch; }

/* Paper rows (on the paper band, and a dark variant for home) */
.papers{ border-top:1px solid rgba(96,34,59,.2); }
.paper{ display:grid; grid-template-columns:7.5rem 1fr auto; gap:1rem 2rem; align-items:baseline; padding:1.25rem 0; border-bottom:1px solid rgba(96,34,59,.2); }
.paper__no{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a6f2f; }
.paper__title{ font-weight:600; font-size:1.05rem; line-height:1.35; color:var(--maroon); }
a.paper__title:hover, .paper__title a:hover{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.paper__authors{ margin-top:.3rem; font-size:.9rem; color:#5a4650; }
.paper__authors a{ font-weight:700; color:#33202a; }
.paper__authors a:hover{ color:var(--maroon); }
.paper__venue{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:#5a4650; }
.paper__get{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon); white-space:nowrap; }
.paper__get:hover{ color:var(--ink); }
.papers--dark{ border-top-color:var(--hair-gold); }
.papers--dark .paper{ border-bottom-color:var(--hair); }
.papers--dark .paper__no{ color:var(--gold); }
.papers--dark .paper__title{ color:#fff; }
.papers--dark a.paper__title:hover{ color:var(--gold-soft); }
.papers--dark .paper__authors{ color:var(--paper-dim); }
.papers--dark .paper__authors a{ color:var(--paper-text); }
.papers--dark .paper__venue{ color:var(--paper-dim); }
.papers--dark .paper__get{ color:var(--gold); }
.papers--dark .paper__get:hover{ color:var(--gold-soft); }
.h3{ font-weight:300; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.15; color:#fff; }
.section-head--second{ margin-top:clamp(3rem,6vw,4.5rem); margin-bottom:1.6rem; }
.pub-year--paper{ color:#8a6f2f !important; }
.pub-year{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:2rem; color:var(--gold-soft); margin:2.5rem 0 .6rem; }

/* =============================================================================
   QUOTE BAND + SU BAND
   ========================================================================== */
.quote{ position:relative; padding-block:clamp(6rem,13vw,11rem); text-align:center; isolation:isolate; overflow:hidden; }
/* One archival photograph per quotation (_data/quotes.yml), toned maroon and darkened enough for white text */
.quote__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; background-color:var(--maroon-deep); }
.quote::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--ink) 0%, rgba(18,10,14,.66) 26%, rgba(18,10,14,.62) 60%, rgba(66,22,40,.8) 100%); }
.quote__q{ margin-inline:auto; max-width:32ch; }
.quote__text{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.25; color:#fff; text-shadow:0 1px 18px rgba(18,10,14,.6); }
.quote__q--long{ max-width:46ch; }
.quote__q--long .quote__text{ font-size:clamp(1.3rem,2.4vw,1.95rem); line-height:1.35; }
.quote__by{ margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.3rem .9rem; }
.quote__by cite{ font-style:normal; color:var(--gold-soft); text-shadow:0 1px 10px rgba(18,10,14,.8); }
.quote__source{ font-size:.86rem; color:var(--paper-text); text-shadow:0 1px 10px rgba(18,10,14,.8); }
.quote__caption{ position:absolute; right:var(--pad); bottom:1.1rem; left:var(--pad); text-align:right; font-size:.72rem; color:var(--paper-dim); }

.su-band{ padding-block:clamp(3.5rem,7vw,5.5rem); }
.su-band__inner{ display:grid; grid-template-columns:minmax(0,520px) 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.su-band img{ width:min(100%, 520px); }
.su-band__links{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem; font-size:.84rem !important; font-weight:600 !important; letter-spacing:.12em; text-transform:uppercase; }
.su-band__links a{ color:var(--maroon); border-bottom:1px solid var(--gold); padding-bottom:2px; transition:color .25s var(--ease); }
.su-band__links a:hover{ color:var(--ink); }
.su-band p{ font-weight:300; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:#33202a; max-width:44ch; }

/* =============================================================================
   CONTACT
   ========================================================================== */
.contact{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact__block + .contact__block{ margin-top:2.4rem; }
.contact__block h2{ margin-bottom:.8rem; }
.contact__block p, .contact__block address{ font-style:normal; font-weight:300; font-size:1.1rem; line-height:1.6; color:#fff; }
.contact__email{ font-weight:200; font-size:clamp(1.6rem,3vw,2.3rem); color:#fff; border-bottom:1px solid var(--hair-gold); transition:.25s var(--ease); }
.contact__email:hover{ color:var(--gold-soft); border-bottom-color:var(--gold-soft); }
.map{ position:relative; border:1px solid var(--hair-gold); border-radius:2px; overflow:hidden; background:var(--ink-2); }
.map iframe{ display:block; width:100%; aspect-ratio:4/3; border:0; filter:invert(1) grayscale(1) sepia(.45) hue-rotate(290deg) saturate(1.1) brightness(.85) contrast(.92); }
.map::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 6px rgba(66,22,40,.55), inset 0 0 90px rgba(18,10,14,.55); }
.map__link{ display:inline-block; margin-top:1rem; }

/* =============================================================================
   POST
   ========================================================================== */
.post-head{ padding:clamp(9rem,17vw,12rem) 0 clamp(2.5rem,5vw,3.5rem); background:radial-gradient(120% 100% at 80% -10%, var(--maroon-deep) 0%, var(--ink-2) 45%, var(--ink) 100%); }
.post-head .display{ font-size:clamp(2rem,4.6vw,3.6rem); max-width:24ch; }
.post-head__meta{ margin-top:1.6rem; font-size:.9rem; color:var(--paper-dim); }
.post-head__meta a{ color:var(--gold-soft); }
.post-head__meta a:hover{ color:#fff; }
.post-body{ padding-block:clamp(3rem,6vw,5rem) var(--sec); }
.post-hero{ width:100%; max-height:70vh; object-fit:cover; border-radius:2px; margin-bottom:clamp(2.5rem,5vw,4rem); }
/* A speaker's headshot: shown small, because such photos are rarely large */
.post-portrait{ display:block; width:min(240px, 60vw); height:auto; filter:grayscale(1); margin-bottom:clamp(2rem,4vw,3rem); outline:1px solid var(--hair-gold); outline-offset:8px; }
.prose{ max-width:62ch; font-size:1.05rem; }
.prose > * + *{ margin-top:1.25em; }
.prose p:first-of-type{ font-weight:300; font-size:1.25rem; line-height:1.55; color:#fff; }
.prose h2{ font-weight:300; font-size:1.7rem; line-height:1.2; color:#fff; margin-top:2.2em; }
.prose h3{ font-weight:600; font-size:1.15rem; color:#fff; margin-top:1.8em; }
.prose a{ color:var(--gold-soft); border-bottom:1px solid var(--hair-gold); }
.prose a:hover{ color:#fff; border-bottom-color:var(--gold-soft); }
.prose ul, .prose ol{ padding-left:1.3rem; }
.prose ul{ list-style:disc; } .prose ol{ list-style:decimal; }
.prose li + li{ margin-top:.4em; }
.prose li::marker{ color:var(--gold); }
.prose blockquote{ border-left:2px solid var(--gold); padding-left:1.4rem; font-family:var(--serif); font-style:italic; font-size:1.3rem; line-height:1.45; color:#fff; }
.prose img{ border-radius:2px; margin-block:2em; }
.prose em{ font-style:italic; }
.prose strong{ font-weight:700; color:#fff; }
.prose hr{ border:0; height:1px; background:var(--hair-gold); margin-block:2.5em; }

/* =============================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--ink); border-top:1px solid var(--hair-gold); color:var(--paper-dim); padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; font-size:.9rem; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.footer__name{ font-weight:300; font-size:1.15rem; color:#fff; line-height:1.35; max-width:22ch; }
.footer h2{ font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; }
.footer address{ font-style:normal; line-height:1.7; }
.footer a{ color:var(--gold-soft); transition:color .25s var(--ease); }
.footer a:hover{ color:#fff; }
.footer li + li{ margin-top:.35rem; }
.footer__strip{ display:flex; height:2px; margin-top:clamp(2.5rem,5vw,3.5rem); }
.footer__strip i{ flex:1; }
.footer__strip i:nth-child(1){ background:var(--l-sage); } .footer__strip i:nth-child(2){ background:var(--e-earth); }
.footer__strip i:nth-child(3){ background:var(--a-blue); } .footer__strip i:nth-child(4){ background:var(--p-plum); }
.footer__legal{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; font-size:.78rem; color:rgba(244,239,230,.45); }

/* =============================================================================
   REVEAL
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity, transform; }
.js .reveal.in{ opacity:1; transform:none; }
.js .hero__inner.reveal{ transform:none; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .grid--5{ grid-template-columns:repeat(4,1fr); }
  .board{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  /* Captions run the full width under the word, so a long one can wrap and never leaves the screen. */
  .hero__letter{ position:static; }
  .hero__tip, .hero__tip.p{ left:.2rem; right:0; white-space:normal; font-size:.92rem; text-align:left; }
  .hero__label{ margin-top:clamp(3.3rem, 7svh, 3.8rem); }
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav__logo img{ height:40px; }
  .mission, .contact, .su-band__inner, .library, .sampie{ grid-template-columns:1fr; }
  .sampie__portrait{ max-width:26rem; }
  .lec{ grid-template-columns:6rem 1fr; }
  .lec__film, .lec__frame{ grid-column:2; margin-top:1.2rem; max-width:28rem; }
  .register::before{ left:calc(6rem - 1px); }
  .lec::before{ left:calc(6rem - 5px); }
  .lec-series{ grid-template-columns:1fr; }
  .moment{ margin-top:0; }
  .moment__img{ outline-offset:6px; }
  .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--5{ grid-template-columns:repeat(3,1fr); }
  .board{ grid-template-columns:repeat(2,1fr); }
  .project{ grid-template-columns:1fr; gap:1.8rem; }
  .project:nth-of-type(even) .project__media{ order:0; }
  .steps{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .affil, .affil__list--cols{ grid-template-columns:1fr; }
  .lec-next{ grid-template-columns:1fr; }
  .register::before{ left:0; }
  .register .lec{ grid-template-columns:1fr; gap:1rem; padding-left:1.4rem; }
  .register .lec::before{ left:-4px; top:2.35rem; }
  .register .lec__film, .register .lec__frame{ grid-column:auto; margin-top:0; max-width:none; }
  .lec__mark{ flex-direction:row; align-items:baseline; gap:1rem; padding:0; }
  .lec__year{ font-size:2.1rem; }
  .dindex__table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .dindex__table, .dindex__table tbody, .dindex__table tr, .dindex__table td{ display:block; width:auto; }
  .dindex__table tr{ padding:1.1rem 0; border-bottom:1px solid var(--hair); }
  .dindex__table td{ padding:.2rem 0; border:0; text-align:left; }
  .dindex__period::before, .dindex__date::before{ content:attr(data-label) " "; font-family:Raleway, sans-serif; font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-right:.5rem; }
  .dindex__get{ padding-top:.5rem !important; }
  .dindex__get a{ margin:0 1rem 0 0; }
  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
  .grid--5{ grid-template-columns:repeat(2,1fr); }
  .board{ grid-template-columns:1fr; }
  .paper{ grid-template-columns:1fr; gap:.35rem; }
  .paper__get{ margin-top:.3rem; }
  .footer__inner{ grid-template-columns:1fr; }
  .hero__cta .btn{ padding:.85rem 1.4rem; }
  .alumni thead{ display:none; }
  .alumni, .alumni tbody, .alumni tr, .alumni td{ display:block; }
  .alumni tr{ padding:1.1rem 0; border-bottom:1px solid var(--hair); }
  .alumni td{ padding:0; border:0; white-space:normal !important; }
  .alumni td + td{ margin-top:.25rem; }
}

/* =============================================================================
   REDUCED MOTION + PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .hero__word{ --shift:0px !important; }
  a.card:hover, .card--hover:hover, .btn:hover, .person:hover .person__photo, a.card:hover .card__img{ transform:none; }
}
@media print{
  .nav, .menu, .footer__strip{ display:none; }
  body{ background:#fff; color:#000; }
}