.leadership-band .split-section { padding-top: 0; padding-bottom: 0; }

.leadership-band .rich-copy p {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.leadership-band h2 {
  color: var(--ink);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.07em;
  margin: 0;
}

.wordmark { min-width: 0; }

.wordmark > :not(.wordmark-title) { flex-shrink: 0; }

.wordmark-title {
  margin-left: 0.5rem;
  max-width: 26rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.site-nav,
.menu-toggle { flex-shrink: 0; }

/* Slightly larger nav; tighter gap so "Creative Works" still fits the bar */
.site-nav {
  font-size: 0.8rem;
  gap: 1.45rem;
}

@media (max-width: 800px) {
  .site-header { gap: 0.8rem; }
  .wordmark-title { font-size: 0.6rem; margin-left: 0.3rem; }
  .site-nav { gap: 1rem; }
}

.call-banner {
  background: var(--coral);
  padding: 1.3rem 0;
}

.call-banner-inner {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr auto;
  align-items: center;
  gap: 2rem;
}

.call-banner-kicker,
.call-banner-detail span {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.call-banner strong {
  display: block;
  font-size: 1.45rem;
  letter-spacing: -0.06em;
}

.call-banner-inner > div:first-child > span:last-child {
  font-size: 0.85rem;
}

.call-banner-detail {
  border-left: 1px solid rgba(23, 33, 36, 0.3);
  padding-left: 1.5rem;
}

/* "See positions" hovers coral like "See the call" in the hero. The banner is
   itself coral, so the ink border stays to keep the button visible against it
   rather than letting it disappear into the background. */
.call-banner .button:hover {
  background: var(--coral);
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 800px) {
  .call-banner-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }

  .call-banner-detail {
    border-left: 0;
    padding-left: 0;
  }

  .call-banner .button {
    grid-column: span 2;
    justify-content: center;
  }
}

.constellation-section {
  padding: 5vh 0 8vh;
}

.constellation-intro {
  color: #526164;
  margin: -1.4rem 0 0;
  max-width: 420px;
}

.constellation {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--ink);
}

.constellation::before,
.constellation::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(244, 242, 236, 0.18);
  border-radius: 50%;
}

.constellation::before { inset: 12% 22%; }
.constellation::after { inset: 25% 36%; border-style: dashed; }

.constellation-lines i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 43%;
  height: 1px;
  background: rgba(244, 242, 236, 0.35);
  transform-origin: left center;
}

.line-a { transform: rotate(-28deg); }
.line-b { transform: rotate(18deg); }
.line-c { transform: rotate(72deg); }
.line-d { transform: rotate(138deg); }
.line-e { transform: rotate(204deg); }
.line-f { transform: rotate(258deg); }

.constellation-node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-content: center;
  width: 116px;
  height: 116px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  text-align: center;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.constellation-node:hover,
.constellation-node:focus,
.constellation-node.is-selected {
  background: var(--acid);
  color: var(--ink);
  transform: scale(1.08);
  outline: none;
}

.node-root { left: calc(50% - 58px); top: calc(50% - 58px); background: var(--coral); color: var(--ink); border-color: var(--coral); }
.node-topic { width: 104px; height: 104px; }
.topic-body { left: 13%; top: 18%; }
.topic-data { right: 14%; top: 20%; }
.topic-agency { left: 14%; bottom: 16%; }
.topic-method { right: 13%; bottom: 15%; }
.constellation-node small { font-size: 0.55rem; color: inherit; opacity: 0.65; }

.constellation-note { position: absolute; color: var(--acid); font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; }
.note-one { left: 37%; top: 19%; }
.note-two { right: 35%; top: 63%; }
.note-three { left: 37%; bottom: 18%; }

.constellation-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding-top: 1rem; }
.constellation-controls > span { margin-right: 0.5rem; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; color: #667577; }

.publication-item[hidden] { display: none; }

@media (max-width: 800px) {
  .constellation { min-height: 390px; }
  .constellation::before { inset: 12% 8%; }
  .constellation::after { inset: 26% 27%; }
  .constellation-node { width: 82px; height: 82px; font-size: 0.5rem; }
  .node-root { left: calc(50% - 41px); top: calc(50% - 41px); }
  .node-topic { width: 76px; height: 76px; }
  .topic-body { left: 7%; top: 14%; }
  .topic-data { right: 7%; top: 16%; }
  .topic-agency { left: 8%; bottom: 12%; }
  .topic-method { right: 7%; bottom: 12%; }
  .constellation-note { display: none; }
}

/* ============================================================
   Call page — sections added to carry the full call document
   ============================================================ */

/* Position headings. nowrap guarantees the institution and the
   "Supervisor: <name>" line each stay on one line — only the <br>
   breaks them. The vw term keeps the longest name (Gabriel
   Vigliensoni) inside the column at every width, so nowrap can
   never cause overflow. */
.position-card h2 {
  font-size: clamp(0.9rem, 4vw, 2.4rem);
  line-height: 1.08;
  max-width: none;
  white-space: nowrap;
}

/* Program line + editorial note inside a position card */
.position-program {
  border-left: 2px solid var(--coral);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1.5rem 0;
  max-width: 680px;
}

.position-program span {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  margin-bottom: 0.4rem;
}

.position-program p {
  margin: 0;
  font-size: 0.95rem;
  color: #3f4d50;
}

.position-note {
  background: var(--mist);
  padding: 1.5rem;
  margin-top: 1.8rem;
  max-width: 680px;
}

.position-note span {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.position-note p {
  margin: 0;
  font-size: 0.95rem;
}

.tag-row .tag-lang {
  border-color: var(--coral);
  color: var(--coral);
}

/* A callout for facts that are easy to miss */
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--acid);
  padding: 1.4rem 1.6rem;
  margin-top: 2.5rem;
  max-width: 720px;
}

.notice span {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.notice p {
  margin: 0;
  font-size: 1rem;
}

/* Funding and support */
.support-section { padding-bottom: 12vh; }

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.support-item {
  background: var(--paper);
  padding: 2.2rem;
}

.support-item > span {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
}

.support-item h3 {
  font-size: 1.6rem;
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 1.3rem 0 0.9rem;
}

.support-item p {
  margin: 0;
  color: #526164;
  font-size: 0.95rem;
}

/* Candidate profile, three grouped columns */
.profile-head { margin-bottom: 3.5rem; max-width: 720px; }

.requirements-band { padding: 3rem 0; }
.requirements-band .profile-head { margin-bottom: 1.75rem; }

.profile-head h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.07em;
  margin: 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.9fr;
  gap: 1.75rem;
}

.profile-col h3 {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  margin: 0 0 0.85rem;
}

.profile-col ul {
  margin: 0;
  padding-left: 1.1rem;
}

.profile-col li {
  margin-bottom: 0.65rem;
  color: #526164;
  font-size: 0.95rem;
}

/* How to apply — numbered list with detail */
.apply-list {
  list-style: none;
  counter-reset: apply;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.apply-list li {
  counter-increment: apply;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
}

.apply-list li::before {
  content: counter(apply, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--coral);
}

.apply-list h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
}

.apply-list p {
  margin: 0;
  color: #526164;
  font-size: 0.95rem;
  max-width: 640px;
}

/* Where to send it */
.submit-panel {
  background: var(--ink);
  color: var(--paper);
  padding: 2.5rem;
  margin-top: 3rem;
}

.submit-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(244, 242, 236, 0.2);
}

.submit-row:last-child { border-bottom: 0; }

.submit-row > span {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b8c2bd;
}

.submit-row strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
  word-break: break-word;
  color: var(--acid);
}

.submit-row a { border-bottom: 1px solid var(--acid); color: var(--acid); }

/* Timeline and selection process */
.timeline-section { padding-bottom: 12vh; }

.timeline { border-top: 1px solid var(--line); }

.timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 2rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
}

.timeline-step {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
}

.timeline-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
}

.timeline-item p {
  margin: 0;
  color: #526164;
  max-width: 680px;
}

/* Equity, diversity, and inclusion */
.edi-band { background: var(--coral); padding: 9vh 0; }

.edi-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6vw;
  align-items: start;
}

.edi-grid h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.07em;
  margin: 0;
}

.edi-grid p {
  font-size: 1.1rem;
  margin: 0 0 1.2rem;
}

.edi-grid p:last-child { margin-bottom: 0; }

/* Contacts */
.contact-section { background: var(--ink); color: var(--paper); padding: 10vh 0; }

.contact-section .section-label { color: #aab6b1; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(244, 242, 236, 0.25);
}

.contact-card {
  background: var(--ink);
  padding: 1.6rem;
  min-height: 190px;
  display: flex;
  flex-direction: column;
}

.contact-card > span {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
}

.contact-card h3 {
  margin: 1.6rem 0 0.4rem;
  font-size: 1.3rem;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.contact-card p {
  margin: 0;
  font-size: 0.78rem;
  color: #b8c2bd;
}

.contact-card a {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #b8c2bd;
  word-break: break-all;
}

.contact-card a:hover { color: var(--acid); }

@media (max-width: 800px) {
  .support-grid,
  .profile-grid,
  .contact-grid,
  .edi-grid {
    grid-template-columns: 1fr;
  }

  .profile-grid { gap: 2.2rem; }
  .edi-grid { gap: 2rem; }

  .apply-list li { grid-template-columns: 38px 1fr; gap: 1rem; }
  .timeline-item { grid-template-columns: 1fr; gap: 0.7rem; }
  .submit-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .submit-panel { padding: 1.8rem; }
  .notice { grid-template-columns: 1fr; gap: 0.6rem; }
  .contact-card { min-height: 0; }
}
.leadership-band { padding: 3rem 0; }
body[data-page="about"] .split-section > .section-label,
body[data-page="call"] .section-label,
.section-label-large {
  font-size: 1rem;
}
.position-card h2 { font-size: 1.5rem; line-height: 1.15; }

.position-details summary {
  cursor: pointer;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.position-details summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.position-details .details-open,
.position-details[open] .details-closed { display: none; }
.position-details[open] .details-open { display: inline; }
.position-details[open] summary { margin-bottom: 1rem; }

@media (min-width: 1000px) {
  .position-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
  }

  .position-card {
    display: block;
    min-width: 0;
    padding: 2rem 1.5rem;
    border-bottom: 0;
  }

  .position-card + .position-card { border-left: 1px solid var(--line); }
  .position-number { margin-bottom: 1.5rem; }
  .position-card p { font-size: 0.95rem; }
  .position-card .position-note { padding: 1rem; }
}
.application-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.application-head h2 {
  color: var(--ink);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.07em;
  margin: 0;
}

.application-head p { font-size: 1rem; color: var(--ink); margin: 0; }

/* One spacing unit for the whole site. Both the call and the home page
   read from this, so their vertical rhythm can't drift apart. Change it
   here and every section gap on both pages moves together. */
:root {
  --section-space: clamp(2rem, 4vw, 3.5rem);

  /* Hero heading scale, matching the size the other page heroes
     already use, so no page's headline reads as odd next to the rest. */
  --display-1: clamp(3.5rem, 7vw, 7.2rem);
}

/* Keep the call compact without shrinking the application text. */
body[data-page="call"] {
  --call-section-space: var(--section-space);
}

body[data-page="call"] .page-hero { padding: var(--call-section-space) 0 2rem; }
body[data-page="call"] .page-hero h1 {
  font-size: var(--display-1);
  margin-bottom: 1.5rem;
}
body[data-page="call"] .page-lede { font-size: 1.15rem; margin-bottom: 0; }
body[data-page="contact"] .page-lede { font-size: 1.15rem; }
body[data-page="call"] .deadline-panel { padding: 1.5rem; margin-bottom: 0; }
body[data-page="call"] .deadline-panel strong { font-size: 1.5rem; margin: 0.4rem 0; }
body[data-page="call"] .split-section { padding: var(--call-section-space) 0; gap: 2rem; }
body[data-page="call"] .section-label { margin-bottom: 1.25rem; }
body[data-page="call"] .notice { margin-top: 1.25rem; padding: 1rem 1.25rem; }
body[data-page="call"] .call-section,
body[data-page="call"] .support-section,
body[data-page="call"] .timeline-section { padding-bottom: var(--call-section-space); }
body[data-page="call"] .position-card { padding: 1.5rem 1.25rem; }
body[data-page="call"] .position-number { margin-bottom: 1rem; }
body[data-page="call"] .position-program { margin: 1rem 0; }
body[data-page="call"] .tag-row { margin-top: 1rem; }
body[data-page="call"] .support-item { padding: 1.5rem; }
body[data-page="call"] .support-item h3 { margin: 0 0 0.65rem; font-size: 1.4rem; }
body[data-page="call"] .requirements-band { padding: 2.5rem 0; }
body[data-page="call"] .profile-head h2 { font-size: 2.5rem; }
body[data-page="call"] .application-section { padding-block: var(--call-section-space); }
body[data-page="call"] .apply-list li { padding: 1.1rem 0; gap: 1rem; }
body[data-page="call"] .apply-list h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
body[data-page="call"] .submit-panel { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
body[data-page="call"] .submit-row { padding: 0.75rem 0; }
body[data-page="call"] .timeline-item { padding: 1.25rem 0; gap: 1rem; }
body[data-page="call"] .timeline-item h3 { font-size: 1.25rem; }
body[data-page="call"] .edi-band { padding: 2.5rem 0; }
body[data-page="call"] .edi-grid { gap: 2rem; }
body[data-page="call"] .edi-grid h2,
body[data-page="contact"] .edi-grid h2 { font-size: 2.5rem; }
body[data-page="call"] .edi-grid p { font-size: 1rem; }
body[data-page="call"] .contact-section { padding: 2.5rem 0; }
body[data-page="call"] .contact-card { min-height: 0; padding: 1.25rem; }
body[data-page="call"] .contact-card h3 { margin-top: 1rem; }

@media (min-width: 801px) {
  /* Two rows plus column flow fills downward — steps 01 and 02 in the left
     column, 03 and 04 in the right — instead of the default row-major fill,
     which put 01/02 across the top and 03/04 across the bottom. */
  body[data-page="call"] .timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 2rem;
  }
  body[data-page="call"] .timeline-item {
    grid-template-columns: 65px minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  body[data-page="call"] .position-card { padding: 1.25rem 0; }
  body[data-page="call"] .split-section { gap: 0.5rem; }
  body[data-page="call"] .profile-grid { gap: 1.5rem; }
  body[data-page="call"] .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  body[data-page="call"] .deadline-panel { grid-template-columns: 1fr; }
  body[data-page="call"] .deadline-panel .button { grid-column: auto; }
  body[data-page="call"] .contact-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Home page vertical rhythm
   The merged page inherited padding from two different pages
   (13vh here, 10vh there, and 12vh+13vh stacking between the
   shared-project section and the route cards). One unit of space
   between every pair of sections instead. Coloured bands keep
   their own internal padding and sit flush against each other.
   ============================================================ */

body[data-page="home"] {
  --home-section-space: var(--section-space);
}

body[data-page="home"] .home-intro,
body[data-page="home"] .home-route {
  padding: var(--home-section-space) 0;
  padding-top: calc(var(--section-space) * 1.7);
  padding-bottom: calc(var(--section-space) * 1.7);
}

/* padding-bottom 0 so this section and .home-route below it
   produce one gap between them, not two stacked ones. */
body[data-page="home"] .split-section.about-foot {
  padding-top: var(--home-section-space);
  padding-bottom: 0;
}

/* The hero reserved a full viewport (min-height: 100vh - 78px) and centred
   a shorter content block inside it, so the leftover height collected as a
   large gap above the eyebrow and below the button. Now that the merged
   page has content below the fold, let the height follow the content and
   sit on the shared spacing unit. */
body[data-page="home"] .hero {
  min-height: 0;
  padding-block: var(--section-space);
}

/* The premise grid was proportioned for the long slogan headline that used
   to sit here (1.1fr heading / 0.8fr text, 8vw gap). With a three-word
   heading that left a large void in the middle and squeezed the prose into
   a narrow column. Give the heading only what it needs and the text the
   rest. */
body[data-page="home"] .home-intro .intro-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* "A shared project" is now a display heading like "The premise", not a
   small label. A bare h2 here would fall back to the browser default, so
   match the premise heading exactly and use the same column gap. */
body[data-page="home"] .about-foot {
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

body[data-page="home"] .about-foot h2 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
  margin: 0;
}

/* Route cards. The h3 had no line-height, so it inherited the body's 1.5 —
   at 3rem that opened a ~72px gap inside the wrapped "Creative Works"
   title. Tighten it, and reserve two lines' height on every card so the
   one that wraps doesn't push its paragraph out of line with the others. */
body[data-page="home"] .route-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

body[data-page="home"] .route-card h3 {
  display: flex;
  align-items: flex-end;
  margin: auto 0 0.9rem;
  font-size: clamp(1.9rem, 2.7vw, 2.7rem);
  line-height: 0.95;
  min-height: 1.9em;
}

body[data-page="home"] .route-card p {
  margin: 0 0 2.75rem;
  max-width: 24ch;
}

/* Contact cards. `word-break: break-all` was splitting addresses mid-word
   ("...concordia." / "ca"). Never break an email: keep it on one line, size
   it so the longest (gabriel.vigliensoni@concordia.ca, 32 characters) fits
   the column, and drop to two columns before four would squeeze it. With
   every address on one line they also bottom-align across the row. */
.contact-card a {
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
  font-size: 0.78rem;
}

.contact-card {
  padding: 1.6rem 1.25rem;
}

/* Four columns only at the full 1180px content width, where each card has
   ~254px of room — enough for the 32-character address at 0.78rem. Below
   that, two columns rather than shrinking the text. */
@media (max-width: 1340px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contact page: the block was padded for a full-bleed band at the bottom of
   the call (10vh top and bottom, 190px card floors that held the addresses
   far from the names). On its own page that reads as dead space — put it on
   the shared spacing unit and let the cards size to their content. */
body[data-page="contact"] .contact-section {
  padding: 0;
  background: none;
}

body[data-page="contact"] .contact-section > .content-wide {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 1rem 0;
}

body[data-page="contact"] .page-hero { border-bottom: 0; }

body[data-page="contact"] .contact-section > .content-wide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  pointer-events: none;
  animation: rise 0.8s ease both;
}

body[data-page="contact"] .contact-card {
  min-height: 0;
  padding: 1.25rem;
}

body[data-page="contact"] .contact-card h3 {
  margin: 0.9rem 0 0.3rem;
}

body[data-page="contact"] .contact-card a {
  padding-top: 0.9rem;
  font-size: 1rem;
  color: var(--acid);
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-page="contact"] .contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 800px) {
  body[data-page="contact"] .contact-grid { grid-template-columns: 1fr; }
}

/* Contact page. With the "Applying" label gone, the split-section would
   leave its first column empty and strand the text in the narrow half. */
body[data-page="contact"] .applying-section {
  grid-template-columns: 1fr;
}

/* Both EDI bands are coral now, so the contact page needs no override —
   it inherits the colour from .edi-band above. */

/* Contact hero: the base .page-hero reserves 12vh above and 10vh below,
   which left a large empty band between the header rule and the headline
   now that the eyebrow is gone. Same treatment the call hero already uses. */
body[data-page="contact"] .page-hero {
  padding: var(--section-space) 0 2rem;
}

/* Home headline. At 8.4vw capped at 8.7rem it was breaking "Music, agency
   and machine learning." across five lines on a wide screen and crowding
   the orbit beside it. Scoped to >800px so the mobile rule in style.css
   (16vw) still governs phones. */
@media (min-width: 801px) {
  body[data-page="home"] .hero h1 {
    font-size: var(--display-1);
  }
}

/* "The premise." and "A shared project." a little smaller. The line break
   between the two words is now an explicit <br> in the markup rather than
   natural wrapping, so the second word stays under the first at the
   smaller size instead of collapsing onto one line. */
body[data-page="home"] .home-intro .intro-grid h2,
body[data-page="home"] .about-foot h2 {
  font-size: clamp(2.1rem, 4.1vw, 4.1rem);
}

/* Literature entries: make the whole row open the DOI, not just the small
   arrow. The <a> already exists on entries that have a link, so stretching
   it with a pseudo-element keeps the markup and the semantics intact — and
   entries without a DOI stay correctly unclickable. */
.publication-item { position: relative; }

.publication-item > a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.publication-item:has(> a) {
  transition: background 160ms ease;
}

.publication-item:has(> a):hover {
  background: rgba(23, 33, 36, 0.04);
}

.publication-item:has(> a):hover h2 {
  color: var(--coral);
}

.publication-item > a {
  display: inline-block;
  transition: transform 160ms ease, color 160ms ease;
}

.publication-item:has(> a):hover > a {
  color: var(--coral);
  transform: translate(2px, -2px);
}

/* Keyboard users get the same affordance as the mouse */
.publication-item:focus-within {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

/* ============================================================
   Constellation, rebuilt on real geometry
   The previous version positioned everything by percentage inside a
   very wide box, so nothing could line up: `inset: 12% 22%` plus
   border-radius drew flattened ovals rather than circles, and the
   "lines" were fixed-length rotated bars that overshot every node and
   were clipped at the edges. Now a square stage holds an SVG with a
   0–100 viewBox, so the rings are true circles, the spokes stop where
   the nodes begin, and the nodes sit exactly on the r=34 ring.
   ============================================================ */

.constellation::before,
.constellation::after { content: none; }

.constellation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  min-height: 0;
  padding: clamp(1.75rem, 4vw, 3.25rem) 1rem;
  overflow: hidden;
}

.constellation-stage {
  position: relative;
  width: min(560px, 92%);
  aspect-ratio: 1 / 1;
}

.constellation-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.constellation-orbits circle { fill: none; }

.constellation-orbits .orbit-ring,
.constellation-orbits line {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.orbit-ring-outer { stroke: rgba(244, 242, 236, 0.10); }
.orbit-ring-main  { stroke: rgba(244, 242, 236, 0.20); }
.orbit-ring-inner { stroke: rgba(244, 242, 236, 0.26); stroke-dasharray: 2 3; }
.orbit-spokes line { stroke: rgba(244, 242, 236, 0.30); }

/* Nodes sit on the ring. Positioning uses translate(-50%,-50%), so the
   hover/selected scale has to carry that translate or the node jumps. */
.constellation-stage .constellation-node {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 21%;
  height: 21%;
  padding: 0.35rem;
  font-size: clamp(0.5rem, 1.55vw, 0.62rem);
  line-height: 1.25;
  transform: translate(-50%, -50%);
}

.constellation-stage .node-root {
  left: 50%;
  top: 50%;
  width: 25%;
  height: 25%;
}

.constellation-stage .topic-body   { left: 26%; top: 26%; }
.constellation-stage .topic-data   { left: 74%; top: 26%; }
.constellation-stage .topic-agency { left: 26%; top: 74%; }
.constellation-stage .topic-method { left: 74%; top: 74%; }

.constellation-stage .constellation-node:hover,
.constellation-stage .constellation-node:focus-visible,
.constellation-stage .constellation-node.is-selected {
  transform: translate(-50%, -50%) scale(1.09);
}

.constellation-stage .node-root strong { display: block; }
.constellation-stage .node-root small { display: block; margin-top: 0.15rem; }

.constellation-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acid);
}

@media (max-width: 800px) {
  .constellation-stage { width: 100%; }
  .constellation-stage .constellation-node { width: 25%; height: 25%; }
  .constellation-stage .node-root { width: 28%; height: 28%; }
  .constellation-legend { gap: 0.5rem 1.2rem; }
}

/* Publications hero matched to the home hero: the headline was running at
   clamp(4rem, 8vw, 8rem) against home's clamp(3.5rem, 7vw, 7.2rem), and the
   lede at 1.3rem against home's 1.15rem. */
body[data-page="publications"] .page-hero h1 {
  font-size: var(--display-1);
  margin-bottom: 1.5rem;
}

body[data-page="publications"] .page-lede {
  font-size: 1.15rem;
}

/* Publications page spacing, brought onto the shared unit like the home and
   call pages. The base rules here were 12vh/10vh on the hero, 5vh/8vh on the
   constellation and 10–12vh below the archive, which stacked into large empty
   bands between every section. */
body[data-page="publications"] .page-hero {
  padding: var(--section-space) 0 2rem;
}

body[data-page="publications"] .constellation-section {
  padding: 0 0 var(--section-space);
}

body[data-page="publications"] .constellation-section > .archive-toolbar,
body[data-page="works"] .works-section > .archive-toolbar {
  background: var(--acid);
  padding: 1.25rem 1.5rem;
  gap: 1.5rem;
  align-items: center;
}

body[data-page="publications"] .constellation-section .section-label,
body[data-page="works"] .works-section .section-label {
  font-family: var(--sans);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

body[data-page="publications"] .constellation-intro,
body[data-page="works"] .constellation-intro {
  margin: 0;
  max-width: 600px;
}

body[data-page="publications"] .archive-section {
  padding-bottom: var(--section-space);
}

body[data-page="publications"] .open-resources {
  padding: var(--section-space) 0;
}

/* The coral banner ran full-bleed edge to edge, while the call page's yellow
   deadline panel is a contained block — it carries `content-wide`, so it stops
   at min(1180px, 88vw). Move the coral background off the full-width section
   and onto the inner element, which already has content-wide. */
body[data-page="home"] .call-banner {
  background: none;
  width: min(1180px, 88vw);
  margin-inline: auto;
  position: relative;
  border-top: 0;
  padding: 0;
}

body[data-page="home"] .call-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-top: 1px solid var(--line);
  animation: rise 0.8s ease both;
  pointer-events: none;
}

body[data-page="home"] .call-banner-inner {
  background: var(--acid);
  padding: 1.5rem;
  margin-block: 0 var(--section-space);
}

/* Pull the rule and the coral block up: the gap above them is the hero's
   bottom padding, so trim that rather than adding a negative margin. */
body[data-page="home"] .hero {
  padding-bottom: calc(var(--section-space) * 0.6);
}

/* Contain the investigators panel within the shared content margins. */
body[data-page="home"] .leadership-band {
  background: none;
  padding: 0;
}

body[data-page="home"] .leadership-band > .content-wide {
  background: var(--coral);
  padding: clamp(1.5rem, 3vw, 3rem);
}

/* Two open rows with shared column alignment. The rule above "About the
   project" is gone; "A shared project" keeps its own. */
body[data-page="home"] .home-intro,
body[data-page="home"] .split-section.about-foot {
  padding-block: calc(var(--section-space) * 1.5);
}

body[data-page="home"] .split-section.about-foot {
  border-top: 1px solid var(--line);
}

/* With no rule above it, that top padding was just empty space. */
body[data-page="home"] .home-intro {
  padding-top: calc(var(--section-space) * 0.9);
}

body[data-page="home"] .home-intro .intro-grid,
body[data-page="home"] .split-section.about-foot {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

body[data-page="home"] .home-intro h2,
body[data-page="home"] .home-intro p,
body[data-page="home"] .about-foot p {
  margin-bottom: 0;
}

body[data-page="home"] .split-section.about-foot {
  margin-bottom: var(--section-space);
  padding-bottom: calc(var(--section-space) * 0.9);
}

@media (max-width: 800px) {
  body[data-page="home"] .home-intro .intro-grid,
  body[data-page="home"] .split-section.about-foot {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* Compact circular atlas with evenly spaced themes. */
body[data-page="home"] .atlas-orbit {
  width: min(390px, 100%);
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0 auto;
  background: #e8ece5;
  border: 1px solid rgba(23, 33, 36, 0.08);
}

.atlas-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(23, 33, 36, 0.18);
}

.atlas-rings circle,
.atlas-rings path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas-rings .atlas-inner-ring { stroke-dasharray: 2 4; opacity: 0.6; }
.atlas-rings path { opacity: 0.6; }

body[data-page="home"] .atlas-node {
  width: 24%;
  height: 24%;
  right: auto;
  bottom: auto;
  padding: 0.2rem;
  font-size: clamp(0.5rem, 1.5vw, 0.62rem);
  transform: translate(-50%, -50%);
  border-color: rgba(23, 33, 36, 0.55);
  transition: transform 180ms ease, background 180ms ease;
}

body[data-page="home"] .node-center {
  left: 50%;
  top: 50%;
  width: 29%;
  height: 29%;
  font-size: 1rem;
}

body[data-page="home"] .node-center small {
  font-size: 0.85rem;
}

body[data-page="home"] .node-one { left: 26%; top: 26%; }
body[data-page="home"] .node-two { left: 74%; top: 26%; }
body[data-page="home"] .node-three { left: 26%; top: 74%; }
body[data-page="home"] .node-four { left: 74%; top: 74%; }

body[data-page="home"] .atlas-node:hover,
body[data-page="home"] .atlas-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.05);
}

body[data-page="home"] .atlas-node:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (max-width: 800px) {
  body[data-page="home"] .atlas-orbit { margin-top: 2rem; }
}

.atlas-area { min-width: 0; }
.atlas-definition {
  position: fixed;
  z-index: 20;
  width: min(310px, calc(100vw - 32px));
  padding: 1.35rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 8px 24px rgba(23, 33, 36, 0.12);
}
.atlas-definition[hidden] { display: none; }
.atlas-definition h2 {
  margin: 0 2rem 0.75rem 0;
  padding-left: 0.65rem;
  border-left: 3px solid var(--coral);
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.atlas-definition p { margin: 0; font-size: 1rem; line-height: 1.5; }
.atlas-literature-link {
  display: block;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.atlas-literature-link[hidden] { display: none; }
.atlas-literature-link:hover { color: var(--coral); }
body[data-page="home"] .node-center[aria-expanded="true"] { background: var(--ink); }
.atlas-definition-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}
.atlas-definition:focus-visible,
.atlas-definition-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
body[data-page="home"] .atlas-node[aria-expanded="true"] { background: var(--acid); }
@media (max-width: 800px) {
  .atlas-definition {
    position: static;
    width: min(390px, 100%);
    margin: 1rem auto 0;
    padding-right: 3.25rem;
  }
  .atlas-definition-close { position: static; float: right; margin: -1rem -3rem 0 0; }
}
body[data-page="home"] .hero-actions {
  justify-content: flex-end;
  margin-top: 1rem;
  padding-right: 12rem;
}

/* Literature explorer: compact map and useful reading preview. */
body[data-page="publications"] .constellation {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: visible;
  color: var(--ink);
}
body[data-page="publications"] .constellation-stage {
  width: min(360px, 100%);
  justify-self: center;
}
body[data-page="publications"] .orbit-ring-main,
body[data-page="publications"] .orbit-spokes line { stroke: rgba(23, 33, 36, 0.22); }
body[data-page="publications"] .orbit-ring-inner { stroke: rgba(23, 33, 36, 0.12); }
body[data-page="publications"] .constellation-node {
  background: var(--paper);
  color: var(--ink);
  border-color: rgba(23, 33, 36, 0.55);
  width: 26%;
  height: 26%;
  font-size: 0.6rem;
}
body[data-page="publications"] .constellation-node.node-root { width: 28%; height: 28%; }
body[data-page="publications"] .constellation-node:hover,
body[data-page="publications"] .constellation-node.is-selected {
  background: var(--coral);
  border-color: var(--coral);
}
body[data-page="publications"] .constellation-node:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.constellation-results { border-left: 1px solid var(--line); padding-left: 2rem; }
.constellation-results h2 { font-size: 1.75rem; letter-spacing: -0.05em; line-height: 1.1; margin: 0 0 0.75rem; }
.constellation-results > p { font-size: 0.95rem; margin: 0 0 1rem; }
#constellation-count { font-family: var(--mono); font-size: 0.65rem; color: #526164; }
#constellation-reading-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
#constellation-reading-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
#constellation-reading-list li > span:first-child { font-family: var(--mono); font-size: 0.7rem; }
#constellation-reading-list a { font-size: 0.95rem; line-height: 1.35; }
#constellation-reading-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 800px) {
  body[data-page="publications"] .constellation { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
  .constellation-results { border-left: 0; border-top: 1px solid var(--line); padding: 1.25rem 0 0; }
  body[data-page="publications"] .constellation-node { font-size: 0.53rem; }
}
.constellation-map { min-width: 0; position: relative; }
.constellation-map .constellation-stage { margin-inline: auto; }
.constellation-filter-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #526164;
}

/* People hero matched to the call hero. The headline already resolved to the
   same clamp(4rem, 8vw, 8rem); what differed was the lede (1.3rem vs 1.15rem)
   and the gap under the headline (the base 2rem vs the call's 1.5rem). */
body[data-page="people"] .page-hero h1 {
  font-size: var(--display-1);
  margin-bottom: 1.5rem;
}

body[data-page="people"] .page-lede {
  font-size: 1.15rem;
}

/* GAMMa card in coral, against the pale grey of the AIMC card beside it. */
body[data-page="people"] .session-accent,
body[data-page="works"] .session-accent,
body[data-page="publications"] .session-accent {
  background: var(--coral);
}

/* Those paragraphs are #b8c2bd — a pale grey written for the dark labs band,
   which the session cards also inherit. On the pale grey AIMC card that is
   roughly 1.5:1 contrast, and on the coral GAMMa card it reads washed out.
   Both cards are light, so their text should be ink. */
body[data-page="people"] .session-grid > div,
body[data-page="people"] .session-grid p,
body[data-page="works"] .session-grid > div,
body[data-page="works"] .session-grid p,
body[data-page="publications"] .session-grid > div,
body[data-page="publications"] .session-grid p {
  color: var(--ink);
}

body[data-page="people"] .session-grid .session-year,
body[data-page="works"] .session-grid .session-year,
body[data-page="publications"] .session-grid .session-year {
  color: var(--ink);
  opacity: 0.7;
}

/* People page still used the base 12vh/10vh hero padding, so the cards sat a
   long way below the lede. Same treatment as the call, contact and
   publications heroes. */
body[data-page="people"] .page-hero {
  padding: var(--section-space) 0 2rem;
}

body[data-page="people"] .people-section {
  padding-bottom: var(--section-space);
}

/* Person focus lines as a list rather than a run-on string of separators.
   A rule between items instead of a bullet, matching the position cards and
   timeline elsewhere on the site. */
.person-card .person-focus {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}

.person-card .person-focus li {
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.3;
  color: #526164;
}

.person-card-accent .person-focus li { color: #3f4d50; }

/* Website link on each person card, sitting between the institution and the
   tag list. align-self keeps the underline to the text rather than spanning
   the whole card. */
.person-link {
  align-self: flex-start;
  margin-top: 0.9rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.person-link:hover,
.person-link:focus-visible { color: var(--coral); }

/* The website link is no longer shown as its own line. The person's name is
   the link, and it stretches over the whole card so clicking anywhere on the
   card opens their site. */
.person-card { position: relative; }

.person-card .person-link {
  align-self: auto;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}

.person-card .person-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.person-card:has(.person-link) { transition: background 160ms ease; }
.person-card:hover .person-link { color: var(--coral); }
.person-card:focus-within { outline: 2px solid var(--coral); outline-offset: -2px; }

/* Close some of the gap between the institution and the tag list. The list is
   pinned to the bottom of the card (margin-top: auto), so the gap is the
   card's leftover height — trim the floor rather than unpinning the list. */
.person-card { min-height: 340px; }

/* Lab cards: with the 01/02 numbers gone, the h2's 3.5rem top margin left a
   band of dead space above every name, and the 230px floor stretched the
   cards well past their content. Size to content and top-align instead. */
body[data-page="people"] .lab-list > div {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.5rem;
}

body[data-page="people"] .lab-list h2 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.05;
}

body[data-page="people"] .lab-list p {
  margin: 0;
  line-height: 1.45;
}

/* Lab cards clickable through to each lab, same stretched-link approach as
   the person cards. The name carries the link; the card is the hit area. */
body[data-page="people"] .lab-list > div { position: relative; }

body[data-page="people"] .lab-link { color: inherit; }

body[data-page="people"] .lab-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

body[data-page="people"] .lab-list > div:hover .lab-link { color: var(--acid); }
body[data-page="people"] .lab-list > div:focus-within { outline: 2px solid var(--acid); outline-offset: -2px; }

/* Creative Works hero matched to the call hero, same as People. The headline
   already resolved to clamp(4rem, 8vw, 8rem); the lede was 1.3rem against the
   call's 1.15rem, and the gap under the headline 2rem against 1.5rem. */
body[data-page="works"] .page-hero h1 {
  font-size: var(--display-1);
  margin-bottom: 1.5rem;
}

body[data-page="works"] .page-lede {
  font-size: 1.15rem;
}

/* Video documentation on a work card: thumbnail plus a play button, swapped
   for the real player on click. */
.work-video { position: relative; overflow: hidden; background: var(--ink); }

.work-video img,
.work-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.work-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  width: 72px;
  height: 72px;
  padding: 0 0 0 4px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  background: rgba(23, 33, 36, 0.55);
  color: var(--paper);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.work-play:hover,
.work-play:focus-visible {
  background: var(--coral);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.08);
}

/* ============================================================
   Creative Works: masonry card grid
   CSS columns rather than grid — cards keep their natural height
   (driven by each image), which is what gives the staggered look.
   ============================================================ */
body[data-page="works"] .works-grid {
  display: block;
  column-count: 4;
  column-gap: 1rem;
}

body[data-page="works"] .work-card,
body[data-page="works"] .work-card-large {
  display: block;
  break-inside: avoid;
  width: 100%;
  margin: 0 0 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
}

/* let the image set the card height; video keeps 16:9 for its facade */
/* No single aspect-ratio here — a uniform one makes every card the same
   height and they line up in rows. Each card picks a shape instead. */
/* .work-card:not(.work-card-large) .work-visual in style.css is 0,3,0 and was
   beating this, pinning the box to 300px tall — aspect-ratio then derived the
   WIDTH from that height, which is why the video showed as a narrow sliver. */
body[data-page="works"] .work-card .work-visual { height: auto; }
body[data-page="works"] .ratio-wide      { aspect-ratio: 16 / 9; }
body[data-page="works"] .ratio-landscape { aspect-ratio: 4 / 3; }
body[data-page="works"] .ratio-square    { aspect-ratio: 1 / 1; }
body[data-page="works"] .ratio-portrait  { aspect-ratio: 4 / 5; }
body[data-page="works"] .ratio-tall      { aspect-ratio: 3 / 4; }
body[data-page="works"] .ratio-xtall     { aspect-ratio: 9 / 16; }

body[data-page="works"] .work-meta { padding: 1.1rem 1.2rem 1.3rem; }

body[data-page="works"] .work-meta h2 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

body[data-page="works"] .work-meta h2 a { color: inherit; }
body[data-page="works"] .work-card:hover h2 a { color: var(--coral); }

body[data-page="works"] .work-venue {
  margin: 0 0 0.6rem;
  max-width: none;
  color: #7a8689;
  font-size: 0.9rem;
  line-height: 1.35;
}

body[data-page="works"] .work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-page="works"] .work-tags li {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--coral);
  color: var(--coral);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

@media (max-width: 1180px) { body[data-page="works"] .works-grid { column-count: 3; } }
@media (max-width: 820px)  { body[data-page="works"] .works-grid { column-count: 2; } }
@media (max-width: 560px)  { body[data-page="works"] .works-grid { column-count: 1; } }

/* Show the whole video frame centred in the card rather than cropping it to
   fill. YouTube thumbnails are not always a clean 16:9, so `cover` was
   trimming the edges. */
/* YouTube always renders a 16:9 thumbnail, padding portrait videos with black
   bars. `contain` therefore showed the bars. Cropping to the card's own shape
   discards them, so give a portrait video a portrait card. */
body[data-page="works"] .work-video img {
  object-fit: cover;
  background: var(--ink);
}

body[data-page="works"] .work-video iframe {
  object-fit: contain;
  background: var(--ink);
}

body[data-page="works"] .works-grid.works-grid-stable {
  display: grid;
  grid-template-columns: repeat(var(--works-columns), minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
}
.works-column { min-width: 0; }

/* Creative Works was the last page left on the base 12vh/10vh hero and 12vh
   section padding, which put a large empty band between the title and the
   toolbar. Same shared unit as every other page. */
body[data-page="works"] .page-hero {
  padding: var(--section-space) 0 2rem;
}

body[data-page="works"] .works-section {
  padding-bottom: var(--section-space);
}

/* tighten the toolbar row itself */
body[data-page="works"] .archive-toolbar {
  padding-bottom: 0.6rem;
  margin-bottom: 1.2rem;
}

/* Works toolbar as a filled acid box, matching the call page's deadline
   panel: yellow ground, dark button sitting inside it, no rules top or
   bottom since the fill does that job now. */
body[data-page="works"] .archive-toolbar {
  border-bottom: 0;
  margin-bottom: var(--section-space);
  align-items: center;
}

/* "The archive will grow" band in coral rather than acid — the acid is now
   spent on the toolbar box at the top of this page. */
body[data-page="works"] .works-note {
  background: var(--coral);
}

body[data-page="works"] .works-outro,
body[data-page="publications"] .works-outro { padding-bottom: var(--section-space); }

/* Second outro box links through to the literature page. The arrow sits
   bottom-right and stretches over the card, so the whole box is the hit
   area — same approach as the route cards and the literature entries. */
body[data-page="works"] .session-link,
body[data-page="publications"] .session-link {
  position: relative;
  display: flex;
  flex-direction: column;
}

body[data-page="works"] .session-arrow,
body[data-page="publications"] .session-arrow {
  align-self: flex-end;
  margin-top: auto;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease;
}

body[data-page="works"] .session-arrow::after,
body[data-page="publications"] .session-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
}

body[data-page="works"] .session-link:hover .session-arrow,
body[data-page="publications"] .session-link:hover .session-arrow {
  color: var(--coral);
  transform: translate(2px, -2px);
}

body[data-page="works"] .session-link:focus-within,
body[data-page="publications"] .session-link:focus-within {
  outline: 2px solid var(--coral);
  outline-offset: -2px;
}

/* "All works" matched to the size of "Open archive" on the literature page —
   it is a .filter-button rather than a .button, so it ran smaller. */
body[data-page="works"] .works-section .filter-button {
  padding: 0.85rem 1rem;
  font-size: 0.7rem;
}

/* Two actions in the literature toolbar */
body[data-page="publications"] .toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Institutional signatures below the project statistics. */
.institution-band { background: var(--paper); padding: 2rem 0; border-bottom: 1px solid var(--line); color-scheme: light; }
.institution-grid { width: min(1800px, 94vw); display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 2.9fr) minmax(0, 4.6fr) minmax(0, 7.9fr) minmax(0, 16.5fr); align-items: center; justify-items: center; gap: clamp(1rem, 2vw, 2rem); }
.institution-logo { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
.institution-logo:nth-child(3) { position: relative; top: 3px; }
.institution-cirmmt { position: relative; top: 6px; }
.institution-sshrc { position: relative; top: 3px; }
/* Optical centering compensates for unequal white margins in the supplied signature. */
@media (min-width: 1001px) {
  /* Offset the first four marks by the funding image's built-in right margin. */
  .institution-logo:nth-child(-n+4) { transform: translateX(clamp(12px, 1.5vw, 27px)); }
  .institution-sshrc { transform: translateY(5%); }
}
@media (max-width: 1000px) {
  .institution-grid { width: 92vw; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .institution-logo { max-width: 260px; }
  .institution-cirmmt { max-width: 340px; }
  .institution-sshrc { grid-column: span 2; max-width: 620px; justify-self: center; transform: none; }
}
@media (max-width: 700px) {
  .institution-band { padding: 2.5rem 0; }
  .institution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (max-width: 440px) {
  /* Phone: the three universities share one row, then CIRMMT, then SSHRC.
     Capped by height so logos of different proportions read at one scale. */
  .institution-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 0.75rem;
    align-items: center;
  }

  .institution-logo {
    width: auto;
    max-width: 100%;
    max-height: 30px;
    transform: none;
  }

  .institution-udem { max-width: 100%; max-height: 30px; }

  .institution-cirmmt {
    grid-column: 1 / -1;
    max-width: 78%;
    max-height: 30px;
  }

  /* SSHRC is a thin strip of small text next to CIRMMT's full-height block
     letters, so it needs more height to read at the same scale. */
  .institution-sshrc {
    grid-column: 1 / -1;
    max-width: 100%;
    max-height: 38px;
  }
}

/* Keep the copyright centered between the two footer signatures. */
.site-footer { background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.footer-copyright { text-align: center; }
.site-footer > div:last-child { text-align: right; }
@media (max-width: 1000px) {
  .site-footer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
  .site-footer > div:last-child { text-align: center; }
  .site-footer > div + div { margin-top: 0; }
}

/* Emphasize the EMAI name without enlarging the accompanying project title. */
.wordmark > span:nth-child(2) { font-size: 3rem; line-height: 1; }

/* Align the homepage hero with the shared content and application panel edges. */
body[data-page="home"] .hero {
  width: min(1180px, 88vw);
  margin-inline: auto;
  padding-inline: 0;
}
body[data-page="home"] .hero > * { min-width: 0; }

/* The homepage introduction stands alone after removing the atlas. */
body[data-page="home"] .hero { display: block; }
body[data-page="home"] .hero-copy { max-width: 100%; }
body[data-page="home"] .hero-intro { max-width: 680px; }
body[data-page="home"] .hero-actions { justify-content: flex-start; padding-right: 0; }

/* Person cards: name, then rank, then the institution as a small label.
   Five cards now, so the grid widens from four columns. */
body[data-page="people"] .people-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* the research team grid keeps the same column width, so its card lines up
   under the first investigator rather than stretching across */
body[data-page="people"] .people-assistants { padding-top: calc(var(--section-space) * 0.5); }

body[data-page="people"] .person-rank {
  margin: 0.7rem 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #526164;
}

body[data-page="people"] .person-inst {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7a7d;
}



@media (max-width: 1180px) { body[data-page="people"] .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { body[data-page="people"] .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { body[data-page="people"] .people-grid { grid-template-columns: 1fr; } }

/* Ranks a touch smaller so the longest one holds two lines rather than three. */
body[data-page="people"] .person-rank {
  font-size: 0.7rem;
}

/* Pull the rank and institution up under the name. The gap was the heading's
   default bottom margin (~35px at 2.6rem) plus the rank's own top margin. */
body[data-page="people"] .person-card h2 {
  margin-top: 1rem;
  margin-bottom: 1.6rem;
}

body[data-page="people"] .person-card .person-rank {
  margin-top: 0;
}

/* Align institution labels with Concordia without changing card spacing. */
@media (min-width: 561px) {
  body[data-page="people"] .people-section:not(.people-assistants) .person-card:nth-child(n+2) .person-inst {
    position: relative;
    top: calc(0.7rem * 1.3);
  }
}

/* Keep the assistant as one yellow card with empty space beside it. */
body[data-page="people"] .people-assistants .people-grid {
  background: transparent;
  border-color: transparent;
}
body[data-page="people"] .people-assistants .person-card {
  background: var(--acid);
  outline: 1px solid var(--line);
}

/* Align the outro paragraphs beneath headings of different lengths. */
@media (min-width: 801px) {
  body[data-page="works"] .works-outro .session-grid > div,
  body[data-page="publications"] .works-outro .session-grid > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
}

/* Match the About cards' bottom-right arrow inset without affecting text rows. */
body[data-page="works"] .works-outro .session-arrow,
body[data-page="publications"] .works-outro .session-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1.5rem;
  margin: 0;
}
body[data-page="works"] .works-outro .session-link,
body[data-page="publications"] .works-outro .session-link { padding-bottom: 4rem; }

/* Match homepage navigation arrows to the coral hover treatment elsewhere. */
.route-arrow { transition: color 160ms ease, transform 160ms ease; }
.route-card:hover .route-arrow,
.route-card:focus-visible .route-arrow {
  color: var(--coral);
  transform: translate(2px, -2px);
}

/* Contact was the last hero still on the base rule. */
body[data-page="contact"] .page-hero h1 {
  font-size: var(--display-1);
  margin-bottom: 1.5rem;
}

/* On phones the position headings must be allowed to wrap. nowrap plus the
   flat 1.5rem size needs ~350px for "Supervisor: Gabriel Vigliensoni" in a
   ~285px column, and the overflow makes the browser zoom the whole page out —
   which is why the call page rendered smaller than the others on mobile. */
@media (max-width: 700px) {
  .position-card h2 {
    white-space: normal;
    font-size: 1.25rem;
  }
}

/* The call banner runs two columns down to 800px, which on a phone squeezes
   the deadline in beside a tall stack of text. Below 600px give each part its
   own row and quiet the funder line so it stops competing with the heading. */
@media (max-width: 600px) {
  .call-banner-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .call-banner-inner > div:first-child > span:last-child {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .call-banner-detail {
    padding-top: 1rem;
    border-top: 1px solid rgba(23, 33, 36, 0.25);
  }

  .call-banner .button {
    grid-column: auto;
    width: 100%;
  }
}

/* Keep the project label and opening title line together on phones. */
@media (max-width: 600px) {
  body[data-page="home"] .hero .eyebrow {
    font-size: min(2.25vw, 0.65rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  body[data-page="home"] .hero .eyebrow .live-dot {
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.4em;
    box-shadow: 0 0 0 0.3em rgba(255, 117, 95, 0.16);
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(2rem, 13vw, 4.875rem);
  }

  body[data-page="home"] .hero-title-opening {
    white-space: nowrap;
  }

}

/* Touch devices need drawn icons at every width, including landscape tablets. */
@media (max-width: 600px), (any-pointer: coarse) {
  .mobile-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    text-indent: -9999px;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: url('../img/arrow-up-right.svg') center / contain no-repeat;
    mask: url('../img/arrow-up-right.svg') center / contain no-repeat;
  }
}

/* Preserve the larger tablet control while avoiding the iOS play emoji. */
@media (max-width: 600px), (any-pointer: coarse) {
  .work-play {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
  }

  .work-play > span {
    display: block;
    width: 17px;
    height: 20px;
    margin-left: 4px;
    overflow: hidden;
    text-indent: -9999px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

@media (max-width: 600px) {
  .work-play {
    width: 56px;
    height: 56px;
  }
}

/* Tablet team cards form complete rows and use less vertical space. */
@media (min-width: 601px) and (max-width: 1400px) and (any-pointer: coarse) {
  body[data-page="people"] .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="people"] .person-card {
    min-width: 0;
    min-height: 300px;
    padding: 1.25rem;
  }

  body[data-page="people"] .person-card h2 {
    font-size: 2.2rem;
    line-height: 0.95;
    margin-top: 0.5rem;
    margin-bottom: 1.1rem;
  }

  body[data-page="people"] .person-card .person-focus {
    padding-top: 1.25rem;
  }

  body[data-page="people"] .people-assistants {
    padding-top: 1.5rem;
  }
}

/* Keep footer signatures compact on portrait tablets. */
@media (min-width: 601px) and (max-width: 1400px) and (any-pointer: coarse) and (orientation: portrait) {
  .institution-grid {
    width: 92vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .institution-grid .institution-logo {
    width: auto;
    max-width: 100%;
    max-height: 64px;
    top: 0;
    transform: none;
  }

  .institution-grid .institution-cirmmt {
    width: 100%;
    max-width: 340px;
    max-height: 54px;
  }

  .institution-grid .institution-sshrc {
    grid-column: span 2;
    width: 100%;
    max-width: 620px;
    max-height: 64px;
  }
}

/* Landscape tablets use the desktop logo row and its optical alignment. */
@media (min-width: 601px) and (max-width: 1400px) and (any-pointer: coarse) and (orientation: landscape) {
  .institution-band { padding: 2rem 0; }

  .institution-grid {
    width: min(1800px, 94vw);
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 2.9fr) minmax(0, 4.6fr) minmax(0, 7.9fr) minmax(0, 16.5fr);
    gap: clamp(1rem, 2vw, 2rem);
  }

  .institution-grid .institution-logo {
    grid-column: auto;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .institution-grid .institution-logo:nth-child(-n+4) {
    transform: translateX(clamp(12px, 1.5vw, 27px));
  }

  .institution-grid .institution-sshrc {
    transform: translateY(5%);
  }
}

/* ---------------------------------------------------------------------------
   Erin Gee's hand in the home hero.

   The hero has been single-column since the atlas graphic came out, leaving
   the right-hand slot empty. The hand goes there and is allowed to cross into
   the text column — the grid being broken is the point — but it sits behind
   the copy so nothing costs readability, and the overflow is clipped at the
   hero so the page can never scroll sideways on a phone.
   --------------------------------------------------------------------------- */
body[data-page="home"] .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  overflow: clip;
}

body[data-page="home"] .hero-copy {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .hero-hand {
  position: relative;
  margin: 0 0 0 clamp(-5rem, -3.5vw, -1.5rem);
  justify-self: end;
  width: min(100%, 520px);
}

.hero-hand-frame {
  position: relative;
  aspect-ratio: 982 / 1000;
}

.hero-hand picture,
.hero-hand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The canvas lies over the still image and crossfades in once hydra has
   painted, so a failed or slow load simply leaves the photograph showing. */
.hero-hand-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-hand.is-live .hero-hand-canvas { opacity: 1; }

.hero-hand figcaption {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #667577;
  margin-top: 0.75rem;
  text-align: right;
}

/* Phones stack, and keep the still hand — see the motion guards in site.js. */
@media (max-width: 700px) {
  body[data-page="home"] .hero {
    display: block;
  }

  body[data-page="home"] .hero-hand {
    width: min(100%, 340px);
    margin: 2.5rem auto 0;
  }

  .hero-hand figcaption { text-align: center; }
}

/* Seven nav items now; buy back the room "Statement" costs before the bar
   wraps on smaller laptops. */
@media (max-width: 1250px) {
  .site-nav { gap: 1.05rem; }
}

/* ---------------------------------------------------------------------------
   Statement page: prose, not panels. Every other page is built from grids and
   boxes, so setting this one as plain text at reading width is itself part of
   the point.
   --------------------------------------------------------------------------- */
body[data-page="statement"] .statement-byline {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #667577;
  margin: 0;
}

body[data-page="statement"] .statement-body {
  padding-block: var(--section-space);
}

body[data-page="statement"] .statement-body p {
  max-width: 44rem;
  font-size: 1.12rem;
  line-height: 1.62;
  color: #3f4d50;
  margin-bottom: 1.55rem;
}

body[data-page="statement"] .statement-close {
  font-size: 1.3rem;
  color: var(--ink);
  margin-top: 2.5rem;
}

body[data-page="statement"] .statement-body .hero-actions {
  margin-top: 1.5rem;
}

/* The byline belongs with the title, and the prose should follow it without a
   page-height gap in between. */
body[data-page="statement"] .page-hero {
  /* Top padding too, or this hero sits 108px down against everyone else's 56. */
  padding-block: var(--section-space);
}

body[data-page="statement"] .statement-byline {
  margin-top: 1.5rem;
}


/* ---------------------------------------------------------------------------
   Statement window — after the welcome panel on hydra.ojack.xyz: a black box
   with a white border floating over a fullscreen sketch. Black and white on
   purpose; the sketch behind it does all the colour.
   --------------------------------------------------------------------------- */

/* display:grid below would beat the hidden attribute, so say this first. */
.statement-splash[hidden] { display: none; }

.statement-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.statement-splash.is-closing {
  opacity: 0;
  pointer-events: none;
}

.statement-splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.statement-splash.is-live .statement-splash-canvas { opacity: 1; }

.statement-splash-window {
  position: relative;
  z-index: 1;
  width: min(880px, 88vw);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--acid);
  border: 2px solid var(--ink);
  color: var(--ink);
}

.splash-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.6rem 0;
  flex-shrink: 0;
}

.splash-close {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.splash-close:hover { color: var(--coral); }

/* The reference scrolls its body inside the frame, scrollbar and all. The
   statement runs past the fold now, so the scrollbar is left visible and
   styled rather than hidden — with a fade at the bottom edge so it reads as
   "there is more" instead of "that is the end". */
.splash-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem clamp(1.5rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3rem);
  scrollbar-color: var(--ink) transparent;
}

/* The fade lives on the scroll region itself now, not the window. As a
   window-level overlay it would have covered the pinned button; here it just
   softens the last line so the text does not cut off mid-letter against the
   button. It masks the scrollbar with it, which is a fair trade now that the
   button no longer needs one to be found. Lifted at the end of the text. */
.splash-scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
}

.statement-splash-window.is-at-end .splash-scroll {
  -webkit-mask-image: none;
  mask-image: none;
}

.splash-scroll::-webkit-scrollbar { width: 10px; }
.splash-scroll::-webkit-scrollbar-track { background: transparent; }
.splash-scroll::-webkit-scrollbar-thumb { background: var(--ink); }

/* Weight and tracking match the site's own headings (700 / -0.07em), not the
   hydra reference this panel was modelled on. */
.statement-splash h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.07em;
  margin: 0 0 0.75rem;
  font-weight: 700;
}

/* And the small caps line is DM Mono, as every equivalent line on the site is. */
.splash-sub {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.8rem;
}

.statement-splash p {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.statement-splash .statement-close {
  font-weight: 500;
  margin-top: 1.6rem;
}

/* Outside the scroll region now, so "See the call" is reachable without
   scrolling however long the text gets. */
.splash-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 0 clamp(1.5rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 2.25rem);
}

/* The button is the site's own dark-on-acid, the same pairing the home page's
   call banner already uses. */

body.splash-open { overflow: hidden; }

@media (max-width: 700px) {
  .statement-splash-window {
    width: 94vw;
    max-height: 88vh;
  }
}

/* Erin's hand reaches up behind the panel. It is also fed into the sketch
   itself (buffer o1), but that reads as texture rather than as a hand — this
   is the copy you can actually recognise. Screen blending lets the pattern
   burn through her colours instead of sitting flatly on top. */
.splash-hand {
  position: absolute;
  right: -4%;
  bottom: -6%;
  height: 104%;
  width: auto;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 1.2s ease 0.3s;
  pointer-events: none;
}

.statement-splash.is-live .splash-hand { opacity: 0.92; }

@media (max-width: 700px) {
  .splash-hand { height: 55%; right: -14%; bottom: -2%; }
}

/* Sit the panel left of centre so the hand has room to stand on the right,
   rather than being reduced to a sliver in the margin. */
@media (min-width: 1000px) {
  .statement-splash { place-items: center start; }

  .statement-splash-window {
    width: min(760px, 58vw);
    margin-left: clamp(2rem, 6vw, 6rem);
  }

  .splash-hand {
    right: 1%;
    bottom: -8%;
    height: 112%;
  }
}


/* ---------------------------------------------------------------------------
   Hydra surfaces.

   A surface is a small canvas living inside a section, above that section's
   own colour and below its content. The section keeps its colour and the
   pattern becomes texture on top of it — which is what "tuned to EMAI" means
   here: acid stays acid, ink stays ink.

   This replaces a single fixed canvas behind the whole page. That could not
   work: most sections are `.content-wide` and only ~1180px across, so paper
   never covered the viewport margins and the pattern leaked out around every
   one of them, including behind body copy.
   --------------------------------------------------------------------------- */
.has-surface {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Content rides above the texture. */
.has-surface > *:not(.surface):not(.hand-surface) {
  position: relative;
  z-index: 1;
}

.surface,
.hand-surface {
  position: absolute;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}

.surface {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Dark bands lighten, pale bands darken, so the pattern reads on both. */
.surface.is-live { opacity: 0.34; }

.signal-band .surface,
.labs-section .surface {
  mix-blend-mode: screen;
}

/* Measured, not guessed: at 0.3 the screen blend on the ink bands pushed the
   pattern all the way to paper white in places, and paper text on paper is
   1.00:1. These are the values that keep every band above 4.5:1. */
.signal-band .surface.is-live { opacity: 0.22; }
.labs-section .surface.is-live { opacity: 0.22; }

.requirements-band .surface,
.edi-band .surface {
  mix-blend-mode: multiply;
}

.requirements-band .surface.is-live { opacity: 0.22; }
.edi-band .surface.is-live { opacity: 0.16; }

/* Erin's hand: the pattern alive inside her silhouette. The mask does the
   shape, so there is no tiling to fight and the edge stays crisp. */
.hand-surface {
  right: 3%;
  bottom: -7%;
  height: 116%;
  aspect-ratio: 982 / 1000;
  -webkit-mask-image: url('../img/hand-erin-gee.webp');
  mask-image: url('../img/hand-erin-gee.webp');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hand-surface.is-live { opacity: 0.92; }

/* Tablets. Surfaces never exist below 701px, so this band is the only place
   these values apply. At 72% of a tall hero the hand filled most of a 768px
   screen, ran underneath the headline, and was clipped at the right edge —
   it sits in the corner now, and the home copy holds clear of it the same way
   it does on desktop. */
@media (min-width: 701px) and (max-width: 900px) {
  /* Sized against the viewport, not the hero. As a percentage of the hero
     the hand came out large on Home's tall hero and tiny on the call page's
     short one; this keeps it the same on every page, with max-height so a
     short hero still contains it. */
  .hand-surface {
    right: 1%;
    bottom: -2%;
    width: 26vw;
    height: auto;
    max-height: 84%;
  }

  .hand-surface.is-live { opacity: 0.85; }

}

/* --- More surfaces, and the hand on About -------------------------------- */

.leadership-band .surface,
.session-accent .surface { mix-blend-mode: multiply; }

.leadership-band .surface.is-live { opacity: 0.12; }
.session-accent .surface.is-live { opacity: 0.16; }

/* Research hub: the pattern runs the full band. The lab cards were painting
   solid ink on top of it, which is the black that had to go — they keep their
   dividing lines but let the band through. */
body[data-page="people"] .lab-list > div { background: transparent; }

/* With the cards transparent, the grid's own pale fill showed through as a
   washed strip behind the text and cost contrast. Drop it and draw the
   dividers directly instead. */
body[data-page="people"] .lab-list { background: transparent; }

body[data-page="people"] .lab-list > div + div {
  border-left: 1px solid rgba(244, 242, 236, 0.3);
}

/* The home hero matches every other page's hero: a single block column with
   the hand in the corner, rather than a two-column grid with the hand in a
   slot of its own. The heading was already the same size — it was the layout
   that made it read as bigger. */
body[data-page="home"] .hero {
  display: block;
  position: relative;
  overflow: clip;
}

body[data-page="home"] .hero-copy {
  max-width: 100%;
}

body[data-page="home"] .hero-intro {
  max-width: 670px;
}

/* Every page hero on one scale. Five pages each set this individually, so the
   statement page — added later — never got a rule and ran at 115.2px against
   everything else's 100.8px. One rule covers them all from here. */
.page-hero h1 { font-size: var(--display-1); }

/* Now that the hero is one block, the headline runs the full width and
   collides with the hand — grey italic over her colours reads badly. Hold the
   copy to the left of it. The other pages don't need this: their headings are
   short enough to clear the hand on their own. */
@media (min-width: 901px) {
  body[data-page="home"] .hero h1,
  body[data-page="home"] .hero-intro {
    max-width: 60%;
  }
}

/* The lede has to clear the hand on tablets: grey text over the pattern reads
   badly, while the solid black headline above it is fine. This sits at the end
   of the file on purpose — the 670px rule further up has the same specificity
   and was winning. The headline keeps its full width; constraining that broke
   "Embodying AI:" onto two lines. */
@media (min-width: 701px) and (max-width: 900px) {
  body[data-page="home"] .hero-intro,
  .page-hero .page-lede {
    max-width: 460px;
  }
}

/* Phones. Until now no surface existed below 701px at all, so there were no
   rules here — without them a phone would inherit the desktop placement
   (116% of the hero height), which is far too big for the screen. */
@media (max-width: 700px) {
  /* The hand sits large behind the heading rather than tucked into a band at
     the foot of the hero. The band is gone with it — it existed only to keep
     the hand away from the text, which is no longer the goal. */
  .hand-surface {
    top: 55px;
    bottom: auto;
    right: -12%;
    width: 62vw;
    height: auto;
    max-height: none;
  }

  .hand-surface.is-live { opacity: 0.8; }

  /* Leave room around the panel so the sketch behind it is actually visible —
     at 94vw it was a sliver at the edges of the screen. */
  .statement-splash-window {
    width: 86vw;
    max-height: 82vh;
  }
}

/* With the hand behind the heading, the italic line has to carry more weight.
   At its usual #687b80 it measures only 3.97:1 even on plain paper, so any
   texture behind it drops below 3 — at 0.18 opacity it was still 2.79, and by
   then the hand is invisible anyway. Darker on phones only; the two tones are
   still distinct, just closer. */
@media (max-width: 700px) {
  main h1 em { color: #38474a; }

  /* The lede gets the same treatment, and for the same reason. At its usual
     #526164 it measured 2.5:1 with the hand behind it — and at 18px it needs
     4.5:1, not the 3:1 a huge headline can lean on. Darkening it is what lets
     the hand be large enough to sit behind the heading at all. */
  .page-hero .page-lede,
  body[data-page="home"] .hero-intro {
    color: #2b3639;
  }

  .hand-surface.is-live { opacity: 0.5; }
}

/* Phone splash: visual on top, panel at the foot.

   Measured on a real viewport, the centred panel covered 58% of the screen
   and the hand sat at y397..861 against a panel at y136..708 — so she was
   almost entirely behind it. Dropping the panel to the bottom and lifting the
   hand into the space above gives the sketch and the hand a clear third of
   the screen. The panel scrolls internally at this height, which is fine:
   wheel-to-dismiss is suppressed whenever there is something to scroll, and
   touch scrolling was never bound to dismissal. */
@media (max-width: 700px) {
  .statement-splash {
    place-items: end center;
  }

  .statement-splash-window {
    width: 90vw;
    max-height: 54vh;
    margin-bottom: 16px;
  }

  .splash-hand {
    top: 1%;
    bottom: auto;
    right: -10%;
    height: 40vh;
  }
}

/* ---------------------------------------------------------------------------
   Tablet portrait.
   --------------------------------------------------------------------------- */

/* Between 801 and 1023 the hamburger is gone but the full nav is showing, and
   there is no room left for the project title beside it: measured at 810, 820
   and 834 — all iPad portrait widths — it collapsed to a 69px column, wrapped
   to six lines and spilled out of the 78px header. The wordmark still names
   the site, and the full title is in the page title and the H1. */
@media (min-width: 801px) and (max-width: 1023px) {
  .wordmark-title { display: none; }
}

/* The hand gets the phone treatment here: large, behind the heading, rather
   than tucked small into the corner. Same consequence as on phones — the grey
   italic and the lede have no contrast headroom over the pattern, so both are
   darkened. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  /* These heroes are short — 277 to 446px — so a hand sized off the viewport
     was being cut in half by the hero's own clip: 148px lost on Home, 355px on
     Team. Give the hero a little more room and then size the hand off the hero
     rather than the viewport, so it is always whole. */
  body[data-page] main > section.hero,
  body[data-page] main > section.page-hero {
    padding-bottom: 130px;
  }

  .hand-surface {
    top: 40px;
    bottom: auto;
    right: -8%;
    height: calc(100% - 52px);
    width: auto;
    max-height: none;
  }

  .hand-surface.is-live { opacity: 0.5; }

  main h1 em { color: #38474a; }

  body[data-page="home"] .hero-intro,
  .page-hero .page-lede {
    color: #2b3639;
    max-width: none;
  }
}

/* Closing the statement window moves focus into <main> so a screen reader
   carries on from the right place. The browser then draws its focus ring
   around the whole element — the blue line across the page under the header.
   The focus stays, the ring goes; real interactive elements keep theirs. */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
}