/* larspinkwart.com — one stylesheet, no build step */

@font-face { font-family: 'ABC Areal'; src: url(../fonts/ABCAreal-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Areal'; src: url(../fonts/ABCAreal-Medium.woff2) format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Areal Mono'; src: url(../fonts/ABCArealMono-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Areal Semi Mono'; src: url(../fonts/ABCArealSemiMono-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* one "site pixel": 1px up to 1440px wide, then grows (≈1.25 at 2240px / 24" iMac, ≈1.35 at 2560px), capped at 1.4 */
  --u: clamp(1px, calc(0.55px + 0.03125vw), 1.4px);
  --bg: #F5F3EE;
  --card: #FDFBF7;
  --panel: #F4F2ED;
  --row-hover: rgba(70, 55, 30, .06);
  --chip: #F1EFEA;
  --rule: #ECE9E2;
  --ink: #2E2E2E;
  --muted: #717171;
  --quiet: #9A9A9A;
  --dark: #1A1A1A;
  --warm: #DAD5CC; /* assignment card + assignment title band */
  --accent: #C4161C;
  --accent-hover: #9A0F14;
  --on-accent: #FFFFFF;
  /* strong elements: current item, primary buttons, pills */
  --inverse: #1A1A1A;
  --on-inverse: #FFFFFF;
  --inverse-hover: #000000;
  --raised: #FFFFFF;          /* hover / slightly lifted surfaces */
  --warm-label: #615B52;
  --header-bg: rgba(253,251,247,.84);
  --header-border: rgba(255,255,255,.5);
  --field-border: #DADADA;
  --dash: #BDBDBD;
  --drop-bg: #FAF9F5;
  --drop-hover: #FBF3F2;
  --empty-thumb: #EDEDED;
  --error-bg: #FBEAE8;
  --error-ink: #8A1C12;
  --shadow-header: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  --shadow-hover: 0 1px 3px rgba(0,0,0,.08), 0 10px 26px rgba(0,0,0,.08);
  --shadow-float: 0 1px 3px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.09);
  --shadow-float-hover: 0 1px 3px rgba(0,0,0,.08), 0 20px 44px rgba(0,0,0,.15);
  color-scheme: light dark;

  --r-card: calc(10 * var(--u));
  --r-panel: calc(8 * var(--u));
  --r-thumb: calc(6 * var(--u));
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --gap: calc(16 * var(--u));
  --max: calc(1400 * var(--u));

  --sans: 'ABC Areal', system-ui, sans-serif;
  --mono: 'ABC Areal Mono', ui-monospace, monospace;
  --semi-mono: 'ABC Areal Semi Mono', 'ABC Areal Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(16 * var(--u));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
button { font: inherit; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus { outline: none; }
:focus-visible { outline: calc(2 * var(--u)) solid var(--accent); outline-offset: calc(3 * var(--u)); }
/* on dark surfaces the focus ring turns light */
.hero :focus-visible { outline-color: #FFFFFF; }

.skip-link {
  position: fixed; left: calc(16 * var(--u)); top: calc(16 * var(--u)); z-index: 10;
  padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u));
  background: var(--inverse); color: var(--on-inverse); text-decoration: none; font-size: calc(15 * var(--u));
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--on-inverse); }
#main { scroll-margin-top: calc(96 * var(--u)); }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }

/* ---------- dark mode (follows the visitor's system setting) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161514;
    --card: #1F1E1C;
    --panel: #2A2826;
    --row-hover: rgba(0, 0, 0, .28);
    --chip: #2E2C29;
    --rule: #34312E;
    --ink: #E9E6E0;
    --muted: #A29D95;
    --quiet: #77726B;
    --dark: #0E0D0C;          /* media frames and thumbnails stay darker than cards */
    --warm: #3A3631;
    --warm-label: #BBB3A7;
    --accent: #F06A68;
    --accent-hover: #FF8F8B;
    --on-accent: #1A0B0B;
    --inverse: #ECE8E1;
    --on-inverse: #161514;
    --inverse-hover: #FFFFFF;
    --raised: #2A2826;
    --header-bg: rgba(31,30,28,.82);
    --header-border: rgba(255,255,255,.06);
    --field-border: #3D3A36;
    --dash: #55514B;
    --drop-bg: #1B1A18;
    --drop-hover: #2A1C1B;
    --empty-thumb: #2E2C29;
    --error-bg: #3A1C1A;
    --error-ink: #FFB4AE;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-header: 0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    --shadow-hover: 0 1px 3px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.4);
    --shadow-float: 0 1px 3px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
    --shadow-float-hover: 0 1px 3px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.55);
  }
}

/* ---------- shared bits ---------- */
/* inline icons carry width/height attributes; scale them with the site unit */
svg[width="14"] { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
svg[width="16"] { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
svg[width="18"] { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
svg[width="22"] { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
svg[width="32"] { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.mono, .label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(11 * var(--u));
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
}
.mono--12, .label { font-size: calc(12 * var(--u)); }
.mono--accent { color: var(--accent); }
.mono--light { color: #BDBDBD; }
.label { margin-bottom: calc(12 * var(--u)); }
.muted { color: var(--muted); }

.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.chip {
  flex-shrink: 0;
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border-radius: calc(999 * var(--u));
  background: var(--chip); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.pill {
  display: inline-flex; gap: calc(8 * var(--u)); align-items: center;
  min-height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u));
  border-radius: calc(999 * var(--u));
  font-size: calc(15 * var(--u)); font-weight: 500;
  text-decoration: none;
}
.pill--light { background: var(--card); color: var(--ink); }
.pill--light:hover { color: var(--ink); background: var(--raised); }
.pill--dark { background: var(--inverse); color: var(--on-inverse); }
.pill--dark:hover { background: var(--inverse-hover); color: var(--on-inverse); }

.prose p { font-size: calc(16 * var(--u)); line-height: 1.6; max-width: 66ch; }
.prose p + p { margin-top: calc(14 * var(--u)); }
.prose--tight p { line-height: 1.5; }

/* ---------- course layout ---------- */
.wrap { padding: var(--gap) var(--gap) var(--gap); }
.col { margin: 0 auto; max-width: var(--max); display: flex; flex-direction: column; gap: var(--gap); }

.course-top { position: sticky; top: 0; z-index: 3; padding: var(--gap) var(--gap) 0; }
.course-top--overlay { height: 0; overflow: visible; padding-top: 0; }
.course-top--overlay .course-header { position: relative; top: var(--gap); }

.course-header {
  margin: 0 auto; max-width: var(--max);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(calc(18 * var(--u))) saturate(140%);
  backdrop-filter: blur(calc(18 * var(--u))) saturate(140%);
  border: 1px solid var(--header-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-header);
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(20 * var(--u));
  justify-content: space-between; align-items: center;
  font-size: calc(21 * var(--u)); line-height: 1.2;
}
.course-header a { color: var(--ink); text-decoration: none; }
.course-header a:hover { color: var(--accent); }
.course-header__title span { display: block; }
.course-header__name { font-weight: 500; }
.course-header__meta { text-align: right; }
.course-header__meta a { display: block; }

/* About card */
.about {
  padding: calc(28 * var(--u));
  display: flex; flex-wrap: wrap; gap: calc(28 * var(--u)) calc(48 * var(--u)); align-items: flex-start;
}
.about__main { flex: 1.7 1 calc(480 * var(--u)); min-width: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.about__side { flex: 1 1 calc(300 * var(--u)); min-width: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.about .label { margin-bottom: calc(10 * var(--u)); }
.about__main > div:first-child .label { margin-bottom: calc(12 * var(--u)); }
.objectives { padding-left: calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.fact { background: var(--panel); border-radius: var(--r-panel); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.fact dt { font-family: var(--mono); font-size: calc(11 * var(--u)); text-transform: uppercase; color: var(--muted); }
.fact dd { margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); }

/* Session cards */
.session-grid {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(400 * var(--u))), 1fr));
  gap: var(--gap);
}
.session-grid > li { display: flex; }
.session-card {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
  padding: calc(16 * var(--u));
  color: var(--ink); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.session-card:hover { color: var(--ink); box-shadow: var(--shadow-hover); }
.session-card:hover .chip { background: var(--inverse); color: var(--on-inverse); }
.session-card__frame { display: block; background: var(--dark); border-radius: var(--r-panel); padding: calc(24 * var(--u)); }
.session-card__frame img,
.session-card__placeholder { display: block; width: 100%; height: calc(220 * var(--u)); }
.session-card__head { display: flex; gap: calc(14 * var(--u)); align-items: flex-start; justify-content: space-between; }
.session-card__titles { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.session-card__title { font-size: calc(21 * var(--u)); line-height: 1.25; }
.session-card__lead { font-size: calc(16 * var(--u)); line-height: 1.5; }

/* ---------- session page ---------- */
.hero { position: relative; width: 100%; height: 100vh; min-height: calc(520 * var(--u)); overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img.is-contain { padding: calc(96 * var(--u)) calc(24 * var(--u)) calc(72 * var(--u)); }
.hero__caption {
  position: absolute; left: var(--gap); bottom: var(--gap);
  max-width: calc(100% - calc(96 * var(--u)));
  padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: var(--r-thumb);
  background: rgba(20,20,20,.62); color: #FFFFFF;
  font-size: calc(13 * var(--u)); line-height: 1.35;
}
.hero__caption a { color: #FFFFFF; }
.hero__down {
  position: absolute; right: var(--gap); bottom: var(--gap);
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(999 * var(--u));
  background: rgba(20,20,20,.62);
  display: flex; align-items: center; justify-content: center;
}
.hero__down:hover { background: rgba(20,20,20,.85); }
#session { scroll-margin-top: calc(76 * var(--u)); }

.sx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: var(--gap);
  align-items: start;
}
.sx-head { grid-column: 1 / -1; padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)); }
.sx-left { grid-column: 1; }
.sx-tt { grid-column: 2; grid-row: 2 / span 2; padding: calc(28 * var(--u)); }
section.sx-left { padding: calc(28 * var(--u)); }
.session-title {
  margin-top: calc(10 * var(--u));
  font-size: clamp(calc(32 * var(--u)), 4.2vw, calc(52 * var(--u)));
  line-height: 1.06; font-weight: 400; letter-spacing: -.01em;
  max-width: 22ch;
}
#abstract-h { margin-bottom: calc(16 * var(--u)); }
.abstract { display: flex; flex-direction: column; gap: calc(14 * var(--u)); max-width: 64ch; }
.abstract p { font-size: calc(16 * var(--u)); line-height: 1.6; }

/* Timetable */
.tt { list-style: none; padding: 0; }
.tt__row { display: flex; gap: calc(14 * var(--u)); padding: calc(11 * var(--u)) 0; }
.tt__row + .tt__row { border-top: 1px solid var(--rule); }
.tt__time { font-family: var(--mono); font-size: calc(13 * var(--u)); color: var(--muted); width: calc(52 * var(--u)); flex-shrink: 0; padding-top: calc(2 * var(--u)); }
.tt__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.tt__item { font-size: calc(15 * var(--u)); line-height: 1.35; }
.tt__row.is-quiet .tt__item { color: var(--quiet); }

.mat-chip {
  margin-top: calc(8 * var(--u));
  display: flex; gap: calc(12 * var(--u)); align-items: center;
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  border-radius: var(--r-panel);
  background: var(--panel);
  color: var(--ink); text-decoration: none;
}
a.mat-chip:hover { color: var(--ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--rule); }
.mat-chip__thumb { display: block; width: calc(30 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(4 * var(--u)); flex-shrink: 0; background: var(--dark); }
.mat-chip__thumb.is-film, .supp-card__thumb.is-film { background: var(--accent); }
.mat-chip__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.mat-chip__type { font-family: var(--mono); font-size: calc(10 * var(--u)); text-transform: uppercase; color: var(--accent); }
.mat-chip__cite { font-size: calc(13 * var(--u)); line-height: 1.3; }
.mat-chip svg { flex-shrink: 0; }

/* Assignment + supplementary */
.lower { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.lower__h { margin: 0 calc(4 * var(--u)); }
.lower__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(280 * var(--u)), 1fr)); gap: var(--gap); align-items: stretch; }
.task-card {
  background: var(--warm); color: var(--ink);
  border-radius: var(--r-card); padding: calc(20 * var(--u));
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(20 * var(--u));
}
.task-card .mono { color: var(--warm-label); }
.task-card__title { margin-top: calc(4 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 400; line-height: 1.25; }
.task-card .pill { align-self: flex-start; }
.supp-card { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); color: var(--ink); text-decoration: none; }
a.supp-card:hover { color: var(--ink); box-shadow: var(--shadow-hover); }
.supp-card__thumb { display: block; height: calc(140 * var(--u)); border-radius: var(--r-thumb); background: var(--dark); }
.supp-card__cite { font-size: calc(16 * var(--u)); line-height: 1.35; }

/* Bottom navigation */
.sx-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.nav-card {
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  min-height: calc(64 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: none; border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none; font-size: calc(15 * var(--u));
  cursor: pointer; grid-row: 1;
}
.nav-card:hover { color: var(--ink); box-shadow: var(--shadow); }
.nav-card--prev { grid-column: 1; align-items: flex-start; text-align: left; }
.nav-card--next { grid-column: 3; align-items: flex-end; text-align: right; }
.nav-card--overview { grid-column: 2; align-items: center; justify-content: center; text-align: center; background: var(--raised); }
.nav-card--overview[aria-expanded="true"] { background: var(--inverse); color: var(--on-inverse); }

.sx-menu { grid-column: 1 / -1; grid-row: 2; scroll-margin-bottom: var(--gap); }
.sx-menu ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.menu-item {
  width: 100%;
  display: flex; gap: calc(16 * var(--u)); align-items: center;
  min-height: calc(60 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-radius: var(--r-card); box-shadow: var(--shadow);
  background: var(--card); color: var(--ink);
  text-decoration: none; font-size: calc(16 * var(--u));
}
.menu-item:hover { color: var(--ink); background: var(--raised); }
.menu-item.is-current { background: var(--inverse); color: var(--on-inverse); }
.menu-item.is-current .mono { color: inherit; opacity: .7; }
.menu-item__label { width: calc(84 * var(--u)); flex-shrink: 0; }
.menu-item__title { flex: 1 1 auto; }
.menu-item__pill {
  font-family: var(--mono); font-size: calc(10 * var(--u)); text-transform: uppercase;
  padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u));
  background: var(--inverse); color: var(--on-inverse); flex-shrink: 0;
}
.menu-item.is-current .menu-item__pill { background: var(--card); color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sx-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sx-tt { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .course-header { font-size: calc(17 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .about, .sx-head, section.sx-left, .sx-tt { padding: calc(22 * var(--u)) calc(20 * var(--u)); }
  .session-card__frame { padding: calc(16 * var(--u)); }
  .session-card__frame img, .session-card__placeholder { height: calc(190 * var(--u)); }
  .sx-nav { gap: calc(8 * var(--u)); }
  .nav-card { padding: calc(10 * var(--u)) calc(12 * var(--u)); font-size: calc(14 * var(--u)); }
  .nav-card > span:last-child:not(:first-child) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .menu-item { gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .menu-item__label { width: calc(72 * var(--u)); }
}

/* ---------- plain fallback pages ---------- */
.plain-page { max-width: calc(760 * var(--u)); padding: calc(28 * var(--u)); }
.plain-page h1 { font-size: calc(22 * var(--u)); font-weight: 400; margin: 0 0 calc(16 * var(--u)); }
.plain-page ul { padding-left: calc(20 * var(--u)); margin-top: calc(12 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- homepage ---------- */
.home { padding: calc(28 * var(--u)); }
.hp { position: relative; z-index: 2; }
/* pulsating dithered circle in the empty top-right corner (field.js) */
.field {
  position: absolute; top: 0; right: calc(48 * var(--u)); z-index: -1;
  width: calc(340 * var(--u)); height: calc(340 * var(--u)); /* field.js matches top and size to the bio */
  pointer-events: none; image-rendering: pixelated;
  opacity: var(--field-opacity, .3);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field { --field-opacity: .35; } }
:root[data-theme="dark"] .field { --field-opacity: .35; }
@media (max-width: 1300px) { .field { display: none; } } /* no room beside the bio there */
.hp__name, .hp__bio, .error-hp { max-width: calc(760 * var(--u)); }
.hp a { color: var(--ink); text-decoration: underline; text-decoration-thickness: max(1px, calc(1 * var(--u))); text-underline-offset: calc(3 * var(--u)); }
/* no red on the homepage: the accent becomes the text colour (hover, focus ring) */
.home { --accent: var(--ink); --accent-hover: var(--ink); }
.hp a:hover { color: var(--muted); }
.hp__name { font-size: calc(22 * var(--u)); line-height: 1.3; font-weight: 400; }
.hp__bio { margin-top: calc(28 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.45; }
.hp__bio p + p { margin-top: 1.45em; }
/* links inside the bio text: medium weight, no underline, a grey arrow after */
.hp .hp__bio p:not(.hp__links) a { font-weight: 500; text-decoration: none; }
.hp .hp__bio p:not(.hp__links) a::after { content: '\2197'; margin-left: .15em; font-weight: 400; color: var(--muted); }
.hp__bio .hp__links { margin-top: 1.6em; font-size: calc(16 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
/* mail / social links as buttons */
.hp .hp__links a {
  display: inline-flex; align-items: center;
  min-height: calc(40 * var(--u)); padding: 0 calc(18 * var(--u));
  border-radius: calc(999 * var(--u));
  background: var(--row-hover); color: var(--ink);
  text-decoration: none; line-height: 1;
  transition: background-color .15s ease;
}
.hp .hp__links a:hover { color: var(--ink); background: color-mix(in srgb, var(--row-hover), var(--ink) 10%); }
/* on hover the button grows to the right to show an arrow, grey like the row arrows */
.hp .hp__links a::after {
  content: '\2197'; display: inline-block; overflow: hidden;
  max-width: 0; margin-left: 0; opacity: 0; color: var(--muted);
  transition: max-width .25s ease, margin-left .25s ease, opacity .2s ease;
}
.hp .hp__links a:hover::after,
.hp .hp__links a:focus-visible::after { max-width: 1em; margin-left: .4em; opacity: 1; }
.hp__lists { font-size: calc(16 * var(--u)); line-height: 1.55; }
/* small copyright line, bottom right */
.hp-foot {
  margin-top: calc(120 * var(--u)); text-align: right;
  font-family: var(--semi-mono); font-size: calc(13 * var(--u)); color: var(--muted);
  text-transform: uppercase;
}
.hp__lists section { margin-top: calc(90 * var(--u)); }
.hp__lists h2 { margin: 0 0 calc(30 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; text-transform: uppercase; }
.hp__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: calc(24 * var(--u)); margin: 0 0 1.6em; scroll-margin-top: calc(28 * var(--u)); }
/* dates in the list */
.hp__row > span:first-child { font-family: var(--semi-mono); }
/* rows with a link are the link: no underline */
.hp a.hp__row { color: var(--ink); text-decoration: none; }
.hp a.hp__row:hover { color: var(--ink); }
.hp a.hp__row:focus-visible { outline: 2px solid var(--accent); outline-offset: calc(10 * var(--u)); }
.hp__row { position: relative; z-index: 1; border-radius: calc(4 * var(--u)); }
/* hover without JS: each row darkens on its own */
@media (hover: hover) {
  .hp__lists:not(.has-blob) .hp__row:hover { background: var(--row-hover); box-shadow: 0 0 0 calc(10 * var(--u)) var(--row-hover); }
}
/* hover with JS: one shared shape that flows from row to row (home.js) */
.hp__lists { position: relative; }
.hp__blob {
  position: absolute; top: 0; left: 0; z-index: 0;
  box-sizing: border-box; padding: calc(10 * var(--u)); /* how far it reaches past the text */
  background: var(--row-hover); border-radius: calc(4 * var(--u));
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.hp__blob.is-on { opacity: 1; }
@media (hover: none) { .hp__blob { display: none; } }
/* linked rows: an arrow fades in at the top right, on the date's line (↗ leaves the site, → stays on it) */
.hp a.hp__row > span:last-child { padding-right: 1.4em; } /* room for the arrow */
.hp a.hp__row::after {
  content: '\2192'; position: absolute; top: 0; right: 0; color: var(--muted);
  opacity: 0; transform: translateX(-.25em);
  transition: opacity .18s ease, transform .18s ease;
}
.hp a.hp__row[target="_blank"]::after { content: '\2197'; transform: translate(-.2em, .2em); }
.hp a.hp__row:hover::after,
.hp a.hp__row:focus-visible::after { opacity: 1; transform: none; }
.hp__row:target > span:last-child { background: var(--panel); box-shadow: 0 0 0 6px var(--panel); border-radius: 2px; }
@media (max-width: 700px) {
  .home { padding: 20px 16px; }
  .hp-foot { margin-top: 80px; }
  .hp__row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .hp__row > span:first-child { color: var(--muted); }
}

/* Desktop: three columns. Events & Organisation sits under Teaching. */
@media (min-width: 1101px) {
  .hp__lists {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr;
    column-gap: calc(56 * var(--u)); align-items: start;
  }
  .hp__sec--publications { grid-column: 1; grid-row: 1 / span 2; }
  .hp__sec--talks        { grid-column: 2; grid-row: 1 / span 2; }
  .hp__sec--teaching     { grid-column: 3; grid-row: 1; }
  .hp__sec--projects     { grid-column: 3; grid-row: 2; margin-top: calc(56 * var(--u)); } /* closer: it shares the column with Teaching */
  /* narrow columns: the date sits above the entry */
  .hp__lists .hp__row { grid-template-columns: minmax(0, 1fr); row-gap: calc(2 * var(--u)); }
  .hp__lists .hp__row > span:first-child { color: var(--muted); }
}

/* ---------- assignment page ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.col--narrow { max-width: calc(1040 * var(--u)); }
.assignment .wrap { padding-bottom: calc(80 * var(--u)); }
.pill--card { min-height: 40px; padding: 0 16px; background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 400; }
.pill--card:hover { color: var(--ink); box-shadow: var(--shadow); }
.as-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: start; } /* same split as the session page */
.as-main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.as-side { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 900px) { .as-layout { grid-template-columns: minmax(0, 1fr); } }

.as-tabs { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.as-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--raised); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-size: 15px; }
.as-tab:hover { color: var(--accent); }
.as-tab.is-current { background: var(--accent); color: var(--on-accent); }

.as-brief { padding: calc(20 * var(--u)); }
.as-band { background: var(--warm); color: var(--ink); border-radius: var(--r-panel); padding: calc(28 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(24 * var(--u)); justify-content: space-between; align-items: flex-end; }
.as-band__small { font-size: calc(14 * var(--u)); color: var(--warm-label); }
.as-band__title { margin-top: calc(6 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.15; font-weight: 400; max-width: 22ch; }
.as-band__due { text-align: right; }
.as-band__date { font-size: calc(22 * var(--u)); }
.as-brief__text { margin-top: calc(20 * var(--u)); font-size: calc(19 * var(--u)); max-width: 64ch; }
.as-brief__text p + p { margin-top: .8em; }
.as-facts { margin-top: calc(20 * var(--u)); display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(180 * var(--u)), 1fr)); gap: calc(12 * var(--u)); }
.as-facts > div { background: var(--panel); border-radius: var(--r-panel); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.as-facts dt { font-size: calc(14 * var(--u)); color: var(--muted); }
.as-facts dd { margin-top: calc(2 * var(--u)); }

.as-upload, .as-sidecard { padding: 20px; box-shadow: var(--shadow-sm); }
.as-upload { scroll-margin-top: calc(110 * var(--u)); }
.as-h2 { margin-bottom: calc(16 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 400; }
.as-h3 { margin-bottom: calc(14 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 400; }
.as-note { display: flex; gap: calc(14 * var(--u)); align-items: center; border-radius: var(--r-panel); padding: calc(18 * var(--u)) calc(20 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.as-note svg { flex-shrink: 0; }
.as-note--ok { background: var(--panel); color: var(--ink); }
.as-note--ok svg { color: var(--accent); }
.as-note--error { background: var(--error-bg); color: var(--error-ink); }
.as-note ul { margin: 0; padding-left: calc(18 * var(--u)); }
.as-locked { font-size: calc(17 * var(--u)); max-width: 52ch; color: var(--ink); background: var(--panel); border-radius: var(--r-panel); padding: calc(18 * var(--u)) calc(20 * var(--u)); }
.as-locked + .as-login { margin-top: calc(16 * var(--u)); }

.as-form { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.as-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); min-height: calc(200 * var(--u)); border: 1.5px dashed var(--dash); border-radius: var(--r-panel); background: var(--drop-bg); cursor: pointer; text-align: center; padding: calc(24 * var(--u)); transition: border-color .15s, background .15s; }
.as-drop svg { color: var(--accent); }
.as-drop:hover, .as-drop.is-over { border-color: var(--accent); background: var(--drop-hover); }
.as-drop:focus-within { outline: calc(2 * var(--u)) solid var(--accent); outline-offset: calc(3 * var(--u)); }
.as-drop.has-file .as-drop__label { color: var(--accent); }
.as-drop__label { font-size: calc(18 * var(--u)); overflow-wrap: anywhere; }
.as-drop__hint, .as-small { font-size: calc(14 * var(--u)); color: var(--muted); }
.as-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(240 * var(--u)), 1fr)); gap: calc(12 * var(--u)); }
.as-field { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }
.as-field input, .as-field textarea { font: inherit; font-size: calc(16 * var(--u)); color: var(--ink); background: var(--card); border: 1px solid var(--field-border); border-radius: var(--r-panel); }
.as-field input { min-height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); }
.as-field textarea { padding: calc(12 * var(--u)) calc(14 * var(--u)); resize: vertical; }
.as-field input:focus, .as-field textarea:focus { outline: calc(2 * var(--u)) solid var(--accent); outline-offset: 0; border-color: transparent; }
.as-actions { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); align-items: center; justify-content: space-between; }
.as-submit { min-height: calc(48 * var(--u)); padding: 0 calc(24 * var(--u)); border: none; border-radius: calc(999 * var(--u)); background: var(--inverse); color: var(--on-inverse); font-size: calc(16 * var(--u)); font-weight: 500; cursor: pointer; }
.as-submit:hover { background: var(--inverse-hover); }
.as-submit[disabled] { opacity: .6; cursor: progress; }

.as-mine { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.as-mine__item { display: flex; gap: calc(12 * var(--u)); align-items: flex-start; background: var(--panel); border-radius: var(--r-panel); padding: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
.as-mine__item.is-empty { align-items: center; background: none; border: 1.5px dashed var(--field-border); color: var(--muted); }
.as-mine__thumb { width: calc(40 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--dark); flex-shrink: 0; }
.as-mine__item.is-empty .as-mine__thumb { background: var(--empty-thumb); }
.as-mine__text { display: flex; flex-direction: column; min-width: 0; }
.as-mine__text a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-mine__text a:hover { color: var(--accent); }
.as-feedback { margin-top: calc(8 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(14 * var(--u)); }
.as-how { padding-left: calc(20 * var(--u)); font-size: calc(15 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.as-logout { margin-top: calc(14 * var(--u)); }
.as-linkbtn { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: calc(14 * var(--u)); }
@media (max-width: 640px) {
  .as-band { padding: calc(22 * var(--u)) calc(20 * var(--u)); }
  .as-band__due { text-align: left; }
  .as-brief, .as-upload, .as-sidecard { padding: calc(16 * var(--u)); }
}

/* ---------- 404 ---------- */
.error-card { padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)); }
.error-card__title { margin-top: calc(10 * var(--u)); font-size: clamp(calc(32 * var(--u)), 4.2vw, calc(52 * var(--u))); line-height: 1.06; font-weight: 400; letter-spacing: -.01em; }
.error-card__text { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.6; max-width: 56ch; }
.error-card__links { margin-top: calc(24 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.error-hp h1 { margin-top: calc(90 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; text-transform: uppercase; }
.error-hp > p { margin-top: 1em; font-size: calc(18 * var(--u)); line-height: 1.45; max-width: 52ch; }
.error-hp h2 { margin-top: calc(90 * var(--u)); }
.hp p.hp__name a { text-decoration: none; }

/* ---------- print ---------- */
@media print {
  :root { --bg: #FFFFFF; --card: #FFFFFF; --panel: #F4F2ED; --ink: #2E2E2E; --muted: #717171; --accent: #C4161C; --warm: #DAD5CC; --warm-label: #615B52; }
  body { background: #FFFFFF; }
   .course-top, .hero, .sx-nav, .skip-link, .as-upload, .hero__down { display: none !important; }
  .card { box-shadow: none; border: 1px solid #DDD; }
  .sx-grid { display: block; }
  .sx-grid > * { margin-bottom: calc(12 * var(--u)); }
  a { color: inherit; }
}
.error-card__note { margin: calc(16 * var(--u)) 0 0; max-width: 56ch; }

/* ---------- slides in the timetable ---------- */
.slide-chips { margin-top: calc(8 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.slide-chip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  min-height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u));
  border: none; border-radius: 999px;
  background: var(--inverse); color: var(--on-inverse);
  font-family: var(--mono); font-size: calc(11 * var(--u)); text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
}
.slide-chip:hover { background: var(--accent); color: var(--on-accent); }
.slide-chip--link { background: var(--chip); color: var(--ink); }
.slide-chip--link:hover { background: var(--rule); color: var(--accent); }

/* ---------- full-screen slide player ---------- */
.deck-open { overflow: hidden; }
.deck {
  position: fixed; inset: 0; z-index: 100;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: #0E0E0E; color: #FFFFFF;
  display: flex; flex-direction: column;
  outline: none;
}
.deck[hidden] { display: none; }
.deck:fullscreen { width: 100vw; height: 100vh; }
.deck:-webkit-full-screen { width: 100vw; height: 100vh; }
.deck__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; }
.deck__canvas { display: block; max-width: 100%; max-height: 100%; background: #FFFFFF; }
.deck__status { position: absolute; inset: auto 0 50% 0; text-align: center; color: #BDBDBD; font-size: calc(15 * var(--u)); }
.deck__bar {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(16 * var(--u)); align-items: center; justify-content: space-between;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  transition: opacity .3s;
}
.deck.is-idle .deck__bar { opacity: 0; }
.deck.is-bare .deck__bar { display: none; }
.deck.is-bare .deck__stage { cursor: none; }
.deck.is-idle .deck__stage { cursor: none; }
.deck__title { font-size: calc(14 * var(--u)); color: #BDBDBD; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 calc(200 * var(--u)); }
.deck__controls { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); align-items: center; }
.deck__count { font-family: var(--mono); font-size: calc(13 * var(--u)); color: #BDBDBD; min-width: 6ch; text-align: center; }
.deck__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(40 * var(--u)); min-height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u));
  border: none; border-radius: 999px; background: rgba(255,255,255,.1); color: #FFFFFF;
  font-size: calc(14 * var(--u)); text-decoration: none; cursor: pointer;
}
.deck__btn:hover { background: rgba(255,255,255,.2); color: #FFFFFF; }
.deck__btn[disabled] { opacity: .35; cursor: default; }
.deck__btn--text { padding: 0 calc(14 * var(--u)); }
.deck :focus-visible { outline-color: #FFFFFF; }
@media (max-width: 640px) { .deck__btn--text[data-download] { display: none; } }
@media print { .slide-chips { display: none; } }