/* Round-06 sample Y, "Research Tree". Every colour is a token here; nothing below uses a colour literal. */
:root {
  --red: #A32638;     /* Stevens Red: branch names, lecture lines, button, focus ring */
  --ink: #363D45;     /* Dark Gray: all text and the tree's rules */
  --gloss: #67707A;   /* grey for names and notes, 5.03:1 on white (off-palette, see notes.md, COL-01) */
  --dim: var(--gloss); /* text dimmed while one person is lit or locked: the same 5.03:1 grey as the names */
  --hair: #E4E5E6;    /* Light Gray: hairlines; rules dimmed while one person is lit */
  --white: #FFFFFF;

  --disp: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 1392px;
  --gut: 24px;
  /* the cladogram's columns: root stub, branch run, sub-branch run; tips take the rest */
  --c-root: 116px;
  --c-br: 160px;
  --c-sub: 304px;
  --lanes: 44px;      /* right end of the sub-branch run kept clear for the five lecture lanes, 8 px apart */
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: -200px; z-index: 30;
  background: var(--white); color: var(--red);
  font: 600 17px/1 var(--body); padding: 14px 18px; border: 2px solid var(--red);
}
.skip:focus { top: 16px; }

/* ---------- header: 50 px placeholder wordmark, 33.4 px clear space, 120 px bar ---------- */
.site-head { position: relative; z-index: 20; background: var(--white); border-bottom: 1px solid var(--hair); }
.head-row { display: flex; align-items: center; min-height: 120px; gap: 0 24px; flex-wrap: wrap; }
.mark { flex: none; display: block; padding-block: 35px; }
.mark img { height: 50px; width: auto; }
.lab { margin-left: 10px; font: 600 24px/1 var(--disp); font-stretch: 82%; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav { margin-left: auto; position: relative; }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.nav a { font: 500 15px/1.3 var(--body); color: var(--ink); text-decoration: none; white-space: nowrap; }
.menu-btn {
  font: 600 16px/1 var(--body); color: var(--ink); background: var(--white);
  border: 1px solid var(--ink); border-radius: 3px; padding: 12px 18px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--red); text-decoration: underline; }
  .menu-btn:hover { border-color: var(--red); color: var(--red); }
}
/* without JavaScript the list simply wraps under the wordmark; with it, narrow screens get the Menu button */
@media (max-width: 1299.98px) {
  .js .menu-btn { display: block; }
  .js .menu-btn[hidden] { display: block; }
  .js .nav ul {
    display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 25;
    min-width: 270px; flex-direction: column; gap: 0; padding: 8px 0;
    background: var(--white); border: 1px solid var(--ink);
  }
  .js .nav.open ul { display: flex; }
  .js .nav a { display: block; padding: 12px 20px; font-size: 16px; }
  .no-js .nav { margin-left: 0; width: 100%; padding-bottom: 20px; }
}
@media (min-width: 1300px) { .menu-btn, .menu-btn[hidden] { display: none; } }

/* ---------- first screen: intro (about 30%) and the tree (about 70%) ---------- */
.first { padding: 18px 0 40px; }
.first-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.intro h1 { font: 650 46px/1.04 var(--disp); font-stretch: 80%; letter-spacing: 0; color: var(--ink); max-width: 11ch; }
.mission { margin-top: 18px; font-size: 17px; line-height: 1.55; max-width: 62ch; }
.ws-h { margin-top: 22px; font: 600 14px/1.3 var(--body); color: var(--ink); }
.ws-links { margin-top: 8px; border-left: 1px solid var(--ink); }
.ws-links li { position: relative; padding: 4px 0 4px 22px; font: 500 16px/1.4 var(--body); }
.ws-links li::before { content: ''; position: absolute; left: 0; top: 15px; width: 14px; border-top: 1px solid var(--ink); }
.ws-links li:last-child::after { content: ''; position: absolute; left: -1px; top: 16px; bottom: 0; width: 1px; background: var(--white); }
.ws-links a { color: var(--ink); text-decoration-color: var(--hair); }
.cta { margin-top: 24px; }
.btn {
  display: inline-block; font: 600 16px/1.2 var(--body); color: var(--white); background: var(--red);
  border: 1px solid var(--red); border-radius: 3px; padding: 15px 22px; text-decoration: none;
}
.btn-line { color: var(--red); background: var(--white); }
.cta-who { margin-top: 10px; font-size: 15px; color: var(--ink); }
.cta-who a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .ws-links a:hover { color: var(--red); text-decoration-color: var(--red); }
  .btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

.tree-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
.tree-head h2 { font: 600 24px/1.15 var(--disp); font-stretch: 84%; color: var(--ink); }
.cap { font: 400 13px/1.4 var(--body); color: var(--gloss); }
.tree-area { position: relative; margin-top: 10px; }
.lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.band, .clad { position: relative; z-index: 1; }

/* ---------- the dated band of six lectures; its bottom border is the axis the lines hang from ---------- */
.band { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.lec { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lec-d { font: 600 16px/20px var(--disp); font-stretch: 88%; color: var(--ink); }
.lec-t { font: 500 15px/19px var(--body); color: var(--ink); text-decoration-color: var(--hair); }
.lec-w { font: 400 14px/18px var(--body); color: var(--gloss); }
.lec-note { display: block; font-size: 13px; line-height: 17px; }
.lec-w .who { font-size: 14px; }
/* the speakers in the band carry the same red underline as in the tree (the band arrives still) */
.lec-w .who[data-taught] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dim .lec-w .who[data-taught]:not(.lit) { text-decoration-color: var(--hair); }

/* ---------- the cladogram: labels sit on rules drawn by y.js into the svg ---------- */
.clad { margin-top: 32px; display: grid; grid-template-columns: var(--c-root) minmax(0, 1fr); align-items: center; }
.lbl-t { display: inline-block; }
.root-lbl { margin: 0; padding-right: 10px; }
.root-lbl .lbl-t { font: 600 17px/21px var(--disp); font-stretch: 80%; color: var(--ink); white-space: nowrap; }
.root-n { display: block; margin-top: 6px; font: 400 13px/17px var(--body); color: var(--gloss); }
.br { display: grid; grid-template-columns: var(--c-br) minmax(0, 1fr); align-items: center; padding-block: 3px; }
.br-lbl { margin: 0; padding: 0 12px 0 10px; }
.br-lbl .lbl-t { font: 600 20px/23px var(--disp); font-stretch: 82%; color: var(--red); }
.sub { display: grid; grid-template-columns: var(--c-sub) minmax(0, 1fr); align-items: start; padding-block: 3px; }
.sub-h { margin: 0; padding: 0 var(--lanes) 0 10px; font: inherit; }
.sub-btn {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 16px/21px var(--body); color: var(--ink);
}
.gloss { grid-column: 2; margin: var(--shift, 0px) 0 0; padding-left: 24px; font: 400 15px/20px var(--body); color: var(--gloss); }
.med { font: 400 16px/20px var(--body); color: var(--ink); }
.med .who { font-size: 15px; }
.ppl { color: var(--gloss); }
.lec-tag { display: none; }
.who {
  position: relative; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--gloss); text-align: left;
}
.who .u { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); }
.js .who[data-taught] .u { display: block; }
.tips { grid-column: 2; margin: var(--shift, 0px) 0 0; padding-left: 24px; }
.sub.open .sub-btn { color: var(--red); }
.tip { padding-bottom: 6px; font: 400 16px/21px var(--body); color: var(--ink); }
.tip .who { font-size: 15px; }
.methods { margin-top: 18px; font: 400 16px/1.5 var(--body); color: var(--gloss); max-width: 100ch; }

/* collapsed by default once the script runs; no script shows every phrase */
.js .tips { display: none; }
.js .sub.open .tips { display: block; }
.js .clad.has-open .gloss { display: none; }
.no-js .gloss { display: none; }

/* highlight: a person or a lecture lights; the rest dims (colour only, 150 ms) */
.sub-btn, .br-lbl .lbl-t, .ph, .lec-t, .lec-d { transition: color .15s linear; }
.who { transition: color .15s linear, text-decoration-color .15s linear; }
.who .u { transition: background-color .15s linear; }
.lines path { transition: stroke .15s linear; }
.dim .sub:not(.lit) .sub-btn,
.dim .br:not(.lit) > .br-lbl .lbl-t,
.dim .who:not(.lit),
.dim .tip:not(.lit) .ph,
.dim .med:not(.lit) .ph,
.dim .lec:not(.lit) .lec-t,
.dim .lec:not(.lit) .lec-d { color: var(--dim); }
.dim .who.lit { color: var(--red); }
.dim .lec-tag:not(.lit) { color: var(--dim); }
.dim .lec-tag:not(.lit) .tick { border-color: var(--dim); }
.dim .who:not(.lit) .u { background: var(--hair); }
.dim .lines path.r:not(.lit),
.dim .lines path.lec:not(.lit) { stroke: var(--hair); }
.who[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.lines path { fill: none; stroke-width: 1px; stroke-linecap: butt; }
.lines path.r { stroke: var(--ink); }
.lines path.lec { stroke: var(--red); }
/* each lecture line drops in red, lands, then recedes to a light-gray ghost; at rest the red is only the speakers'
   underlines, and a person's or a lecture's whole route comes back red while it is lit (hover, focus or lock) */
.lines path.ghost { stroke: var(--hair); }
.settled .lines path.lec { opacity: 0; transition: stroke .15s linear, opacity .15s linear; }
.lines path.lec.lit { opacity: 1 !important; }
.lines rect.gap { fill: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .sub-btn:hover .lbl-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .lec-t:hover { color: var(--red); text-decoration-color: var(--red); }
  .who:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* intro hold: the script reveals each label as its rule arrives (clip-path, opacity) */
html.intro .clad .lbl-t, html.intro .root-n { clip-path: inset(0 100% 0 0); }
html.intro .gloss, html.intro .tips .tip { opacity: 0; }
html.intro .who .u { opacity: 0; }
html.intro .lec-tag .tick { clip-path: inset(0 0 100% 0); }

/* ---------- sections below the first screen arrive still ---------- */
.sec { padding-block: 72px; border-top: 1px solid var(--hair); }
.sec-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.sec h2 { font: 600 38px/1.08 var(--disp); font-stretch: 82%; color: var(--ink); }
.sec-intro { margin-top: 14px; max-width: 62ch; }
.sec-head .btn { margin-top: 22px; }
.sec-head .cap { margin-top: 10px; }

.elbows { border-left: 1px solid var(--ink); }
.elbows > li { position: relative; padding: 0 0 26px 30px; }
.elbows > li::before { content: ''; position: absolute; left: 0; top: 14px; width: 22px; border-top: 1px solid var(--ink); }
.elbows > li:last-child { padding-bottom: 0; }
.elbows > li:last-child::after { content: ''; position: absolute; left: -1px; top: 15px; bottom: 0; width: 1px; background: var(--white); }

.ws-list h3 { font: 600 22px/1.25 var(--body); }
.ws-list h3 a, .ev-list h4 a, .people h3 a, .res h3 a { color: var(--ink); text-decoration-color: var(--hair); }
.ws-list p { margin-top: 6px; max-width: 62ch; }

.ev-groups { display: grid; grid-template-columns: 1fr; gap: 40px; }
.ev-g h3 { font: 600 15px/1.3 var(--body); margin-bottom: 14px; }
.ev-list > li { display: grid; grid-template-columns: 1fr; }
.ev-list time { font: 600 18px/28px var(--disp); font-stretch: 88%; color: var(--ink); white-space: nowrap; }
.ev-list h4 { font: 500 17px/1.4 var(--body); }
.ev-list p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ev-flags h4 { font: 600 21px/1.3 var(--body); }

.people { margin-top: 36px; display: grid; grid-template-columns: 1fr; gap: 28px 32px; }
.person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 18px; align-items: start; }
.person img { width: 120px; height: auto; }
.person h3 { font: 600 18px/1.3 var(--body); }
.p-title { margin-top: 4px; font-size: 16px; line-height: 1.45; }
.p-tree { margin-top: 6px; }
.show {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 15px/1.4 var(--body); color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.no-js .p-tree { display: none; }

.res h3 { font: 600 22px/1.3 var(--body); }
.res p { margin-top: 10px; max-width: 64ch; }
.contact .addr { font-weight: 500; }
.contact p + p { margin-top: 14px; max-width: 62ch; }
@media (hover: hover) and (pointer: fine) {
  .ws-list h3 a:hover, .ev-list h4 a:hover, .people h3 a:hover, .res h3 a:hover { color: var(--red); text-decoration-color: var(--red); }
  .show:hover { color: var(--ink); }
}

.site-foot { border-top: 1px solid var(--hair); padding: 40px 0 60px; font-size: 15px; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--ink); }

/* ---------- widths ---------- */
@media (min-width: 760px) {
  .sec-grid { grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); gap: 44px; }
  .ev-list > li { grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; }
  .ev-list > li > p { grid-column: 2; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 1199.98px) {
  :root { --c-root: 88px; --c-br: 136px; --c-sub: 250px; }
  .intro h1 { max-width: none; }
  .root-lbl .lbl-t { white-space: normal; }
  .band { column-gap: 10px; }
  .lec-d { font-size: 15px; }
  .lec-t { font-size: 14px; line-height: 18px; -webkit-hyphens: auto; hyphens: auto; }
}
@media (min-width: 1100px) {
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 48px; }
  .ev-g.ev-flags { grid-column: 1 / -1; }
  .ev-g:not(.ev-flags) .ev-list > li { grid-template-columns: 1fr; }
  .ev-g:not(.ev-flags) .ev-list > li > p { grid-column: 1; }
  .ev-g:not(.ev-flags) .ev-list > li { padding-bottom: 20px; }
}
@media (min-width: 1200px) {
  .first { padding-top: 16px; }
  .first-grid { grid-template-columns: clamp(300px, 23%, 320px) minmax(0, 1fr); gap: 36px; align-items: start; }
}
@media (min-width: 1200px) and (max-width: 1379.98px) {
  :root { --c-root: 110px; --c-br: 158px; --c-sub: 284px; }
}
/* laptops (narrower than 1440 or shorter than about 820 px): the email button moves up under the mission
   so it stays above the fold; the workshop links follow it */
@media (min-width: 1200px) and (max-width: 1439.98px), (min-width: 1200px) and (max-height: 819.98px) {
  .intro { display: flex; flex-direction: column; align-items: stretch; }
  .intro h1 { order: 0; }
  .mission { order: 1; }
  .cta { order: 2; margin-top: 22px; }
  .cta-who { order: 3; }
  .ws-h { order: 4; }
  .ws-links { order: 5; }
}

/* ---------- phone: an indented outline with elbow ticks ---------- */
@media (max-width: 759.98px) {
  .lab { display: none; }
  .head-row { gap: 0 12px; }
  .intro h1 { font-size: 40px; max-width: none; }
  .mission { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .ws-h { margin-top: 16px; }
  .ws-links li { padding-block: 3px; }
  .cta { margin-top: 18px; }
  .first { padding-top: 14px; }
  .tree-head h2 { font-size: 26px; }
  .clad { display: block; margin-top: 22px; }
  .root-lbl .lbl-t { font-size: 22px; line-height: 26px; }
  .root-n { margin-top: 2px; }
  .brs { padding-left: 26px; margin-top: 4px; }
  .br { display: block; padding: 14px 0 0; }
  .br-lbl { padding: 0; }
  .br-lbl .lbl-t { font-weight: 700; font-size: 22px; line-height: 26px; }
  .subs { padding-left: 26px; }
  .sub { display: block; padding: 12px 0 0; }
  .sub-h { padding: 0; }
  .sub-btn { font-weight: 600; font-size: 17px; line-height: 23px; }
  .gloss, .tips { margin: 2px 0 0; padding-left: 26px; }
  .js .clad.has-open .gloss { display: block; }
  .js .sub.open .gloss { display: none; }
  .tips { margin-top: 8px; }
  .who .u, .js .who[data-taught] .u { display: none; }
  .lec-w .who[data-taught] { text-decoration: none; }
  /* the lecture a speaker gave, right after their name: a red tick and the short title */
  .lec-tag { display: inline; margin-left: 6px; color: var(--red); font-weight: 500; white-space: nowrap; }
  .lec-tag .tick { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: 0.2em; border-left: 1px solid var(--red); border-bottom: 1px solid var(--red); }
  /* the band, once, as a compact dated list above the outline */
  .band { display: block; margin-top: 16px; padding: 0; border-bottom: 0; }
  .lec { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 10px; row-gap: 0; padding: 7px 0; border-top: 1px solid var(--hair); }
  .lec:last-child { border-bottom: 1px solid var(--hair); }
  .lec-d { grid-row: 1 / span 2; font-size: 16px; line-height: 21px; }
  .lec-t { font-size: 16px; line-height: 21px; }
  .lec-w, .lec-w .who { font-size: 15px; line-height: 20px; }
  .lec-note { font-size: 15px; line-height: 20px; }
  .no-js .brs, .no-js .subs, .no-js .tips { border-left: 1px solid var(--ink); }
  .methods { margin-top: 22px; }
  .sec { padding-block: 56px; }
  .sec h2 { font-size: 34px; }
  .person { grid-template-columns: 96px minmax(0, 1fr); }
  .person img { width: 96px; }
}

/* ---------- no script: the rules come from borders so the tree still reads ---------- */
@media (min-width: 760px) {
  .no-js .subs { border-left: 1px solid var(--ink); }
  .no-js .sub { position: relative; }
  .no-js .sub::before { content: ''; position: absolute; left: 0; top: 26px; width: 8px; border-top: 1px solid var(--ink); }
  .no-js .brs { border-left: 1px solid var(--ink); }
  .no-js .br { position: relative; }
  .no-js .br::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; border-top: 1px solid var(--ink); }
}

/* ---------- reduced motion: the whole tree drawn at once; ?motion=force overrides, ?motion=off holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after {
    animation: none !important; scroll-behavior: auto !important;
  }
  html:not(.force-motion) .clad .lbl-t, html:not(.force-motion) .root-n { clip-path: none; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; }