/* ---------------------------------------------------------------------------
   ODI design system.

   Ported from the design demo (odi-site-source.zip, app/globals.css) into
   plain CSS: the demo's Tailwind/shadcn imports are replaced by the small
   set of primitives at the end of this file, so the stylesheet is
   self-contained and needs no JS framework or build step.

   Edit content in _data/odi/*.yml, not here.
   --------------------------------------------------------------------------- */


@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/odi/fonts/HankenGrotesk-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/odi/fonts/Montserrat-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #191b1d;
  --soft-ink: #52575a;
  --line: #d9ded9;
  --paper: #ffffff;
  --wash: #f3f5f2;
  --mint: #79bfbe;
  --green: #69be8c;
  --lime: #b4d232;
  --lavender: #9b9ad6;
  --background: #ffffff;
  --foreground: #191b1d;
  --card: #ffffff;
  --card-foreground: #191b1d;
  --popover: #ffffff;
  --popover-foreground: #191b1d;
  --primary: #191b1d;
  --primary-foreground: #ffffff;
  --secondary: #f3f5f2;
  --secondary-foreground: #191b1d;
  --muted: #f3f5f2;
  --muted-foreground: #5b6164;
  --accent: #eaf4ef;
  --accent-foreground: #191b1d;
  --destructive: #b42318;
  --border: #d9ded9;
  --input: #d9ded9;
  --ring: #69be8c;
  --radius: 0.2rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
[id] { scroll-margin-top: 106px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hanken Grotesk', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #1f6b44; outline-offset: 3px; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; transform: translateY(-180%); border: 2px solid var(--ink); background: #fff; padding: 10px 14px; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }

/* --- Primitives ------------------------------------------------------------
   The demo got these from Tailwind's preflight and the shadcn accordion and
   carousel components. Here they are written out so no framework is needed:
   accordions are native <details>/<summary>, the carousel is 40 lines of JS
   in /assets/odi/js/site.js.
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

button { margin: 0; border: 0; background: none; color: inherit; font: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
table { border-collapse: collapse; }
figure { margin: 0; }
blockquote { margin: 0; }

/* Stand-ins for next/image `fill`, which absolutely positions the image. */
.hero-photo, .photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Accordion --------------------------------------------------------------- */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 18px; padding: 16px 0; text-align: left;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 600;
}
.acc-trigger:hover { color: #2b6a48; }
.acc-chevron {
  flex: none; width: 20px; height: 20px; color: var(--soft-ink);
  transition: transform 200ms ease;
}
.acc-item[open] > .acc-trigger .acc-chevron { transform: rotate(180deg); }
.acc-panel { padding-bottom: 18px; }

/* Carousel ---------------------------------------------------------------- */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform 420ms cubic-bezier(.4, 0, .2, 1); }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-control {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; cursor: pointer;
}
.carousel-control:hover { background: var(--wash) !important; }
.carousel-control svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}

@media (max-width: 700px) {
  .carousel-control-prev, .carousel-control-next { transform: none; }
}


.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section-block { padding-block: clamp(72px, 9vw, 120px); }
.eyebrow { margin: 0 0 14px; color: #397955; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; line-height: 1.08; letter-spacing: -.025em; }
h1 { font-size: clamp(2.65rem, 6vw, 5.6rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; }
h3 { font-size: 1.3rem; }
p { color: var(--soft-ink); }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 94%); backdrop-filter: blur(14px); }
.header-inner { width: min(1320px, calc(100% - 40px)); min-height: 86px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand-cluster { display: flex; align-items: center; gap: 18px; min-width: 0; }
.eth-link { display: inline-flex; padding: 10px 0; }
.eth-link img { width: 150px; }
.brand-rule { width: 1px; height: 42px; background: var(--line); }
.odi-brand { display: flex; min-height: 44px; align-items: center; gap: 12px; padding-block: 7px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: .72rem; font-weight: 700; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; }
/* Both marks carry dead space inside the artwork, so centring their boxes
   leaves them visibly off. The nudges below are percentages of each mark's own
   height, measured from the source files, so they hold at every size:
   - eth-zurich.png has 6px of padding above the logo and 54px below (of 161),
     which floats it 15.2% too high;
   - the ODI wordmark's box includes the detached i-dot above the letters,
     which drops the o/d/i 11.5% too low. */
.eth-link img { transform: translateY(15.2%); }
.odi-brand .brand-wordmark { width: 52px; transform: translateY(-11.5%); }
.odi-brand .brand-landscape { width: 62px; margin-inline: 2px 4px; }
.desktop-nav { display: flex; align-items: center; gap: clamp(13px, 1.7vw, 24px); font-size: .87rem; font-weight: 500; }
.desktop-nav > a:not(.nav-cta) { padding: 31px 0 27px; border-bottom: 3px solid transparent; }
.desktop-nav > a:not(.nav-cta):hover, .desktop-nav > a:not(.nav-cta):focus-visible { border-color: var(--green); }
.desktop-nav > a:not(.nav-cta)[aria-current='page'] { border-color: var(--ink); font-weight: 600; }
.nav-cta, .button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--ink); padding: 12px 18px; font-weight: 700; line-height: 1.2; transition: transform 160ms ease, background 160ms ease, color 160ms ease; }
.nav-cta { min-height: 44px; padding: 10px 15px; background: var(--ink); color: #fff; }
.button:hover, .nav-cta:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #2e3335; }
.button-light { background: #fff; }
.button-light:hover { background: var(--wash); }
.button-large { min-height: 58px; padding-inline: 24px; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--ink); cursor: pointer; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav nav { position: absolute; top: 58px; right: 0; width: min(310px, calc(100vw - 32px)); border: 1px solid var(--ink); background: #fff; padding: 8px; box-shadow: 0 18px 44px rgb(0 0 0 / 12%); }
.mobile-nav nav a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 12px; font-weight: 700; }

.hero { display: grid; min-height: 690px; grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr); align-items: center; gap: clamp(54px, 8vw, 110px); padding-block: clamp(70px, 9vw, 125px); }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 820px; margin-bottom: 28px; font-size: clamp(2.1rem, 4.4vw, 4.2rem); }
.gradient-text { color: transparent; background: linear-gradient(115deg, #2f7c56 5%, #547d12 48%, #6260a2 95%); background-clip: text; -webkit-background-clip: text; }
.hero-kicker { margin: -12px 0 14px; color: #45494c; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500; }
.hero-lede { max-width: 650px; margin: 0 0 34px; font-size: clamp(1.12rem, 1.6vw, 1.35rem); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { position: relative; overflow: hidden; min-height: 0; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: #eef1ed; }
.hero-visual::before { content: ''; position: absolute; inset: 24px; border: 1px solid rgb(25 27 29 / 18%); }
.hero-visual .hero-photo { object-fit: cover; object-position: 52% center; }
.hero-visual::after { content: ''; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent, rgb(0 0 0 / 62%)); }
.hero-visual-caption { z-index: 2; position: absolute; inset: auto 30px 24px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgb(255 255 255 / 55%); padding-top: 12px; color: #fff; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.section-intro { max-width: 760px; margin-bottom: 46px; }
.section-intro h2 { margin-bottom: 0; }
.section-intro-inline { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.research-triptych { position: relative; display: grid; grid-template-columns: 1fr minmax(180px, 255px) 1fr; align-items: center; gap: clamp(30px, 5vw, 62px); border: 1px solid #cfd8d2; padding: clamp(40px, 6vw, 68px); background: linear-gradient(135deg, #f3faf6 0%, #f6f7fd 55%, #f9fbee 100%); box-shadow: 0 24px 60px -40px rgb(25 27 29 / 35%); }
.research-triptych::before { content: ''; position: absolute; inset: -1px -1px auto; height: 5px; background: linear-gradient(90deg, var(--lavender), var(--mint) 42%, var(--green) 70%, var(--lime)); }
.research-pillar-left h3 { color: #2f7c56; }
.research-pillar:not(.research-pillar-left) h3 { color: #6260a2; }
.research-pillar li { position: relative; color: var(--ink); }
.research-pillar li::before { content: ''; position: absolute; top: .62em; width: 6px; height: 6px; background: linear-gradient(135deg, var(--green), var(--lime)); }
.research-pillar:not(.research-pillar-left) li { padding-left: 17px; }
.research-pillar:not(.research-pillar-left) li::before { left: 0; }
.research-pillar-left li { padding-right: 17px; }
.research-pillar-left li::before { right: 0; background: linear-gradient(135deg, var(--lavender), var(--mint)); }
.research-landscape { width: 100%; }
.research-pillar h3 { margin-bottom: 18px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 600; }
.research-pillar ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; color: var(--soft-ink); list-style: none; }
.research-pillar-left { text-align: right; }
.square-link { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--ink); background: #fff; transition: background 160ms ease, color 160ms ease; }
.square-link:hover { background: var(--ink); color: #fff; }

.news-section { background: var(--wash); }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.news-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; padding: clamp(22px, 3vw, 30px); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.news-card:hover, .news-card:focus-visible { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px -30px rgb(25 27 29 / 45%); }
.news-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; color: #5c6164; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.news-meta span { display: inline-flex; align-items: center; gap: 7px; }
.news-meta span:last-child { border: 1px solid #dfe5df; background: var(--wash); padding: 3px 9px; }
.news-card h3 { margin-bottom: 8px; font-size: 1.2rem; }
.news-card p { margin: 0 0 18px; font-size: .95rem; }
.news-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--ink); font-size: .85rem; font-weight: 700; }
.news-card:hover .news-card-more { color: #2f7c56; }
.news-footer { display: flex; justify-content: center; margin-top: 28px; }
.news-footer .button { width: auto; }
.card-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 4px; font-weight: 700; }

.photo-section .section-intro > p { max-width: 380px; margin: 0; }
.photo-carousel { margin-inline: 54px; }
.photo-frame { position: relative; aspect-ratio: 16 / 8.7; overflow: hidden; background: var(--wash); }
.photo-frame img { object-fit: cover; }
.photo-slide { margin: 0; }
.photo-slide figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; border-bottom: 1px solid var(--ink); padding: 16px 2px 18px; color: var(--soft-ink); font-size: 1.02rem; line-height: 1.45; }
.photo-slide figcaption strong { color: var(--ink); font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1.15rem; font-weight: 600; }
.carousel-control { width: 46px !important; height: 46px !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; background: #fff !important; }
.carousel-control-prev { left: -54px !important; }
.carousel-control-next { right: -54px !important; }

.join-band { margin-block: clamp(74px, 9vw, 120px); border: 1px solid var(--line); padding: clamp(36px, 5vw, 52px); background: #fff; }
.join-accent { display: block; width: 72px; height: 3px; margin-bottom: 26px; background: linear-gradient(90deg, var(--lavender), var(--mint) 42%, var(--green) 70%, var(--lime)); }
.join-content { display: flex; align-items: flex-end; justify-content: space-between; gap: 52px; }
.join-content > div { max-width: 760px; }
.join-band h2 { margin-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.join-band p:last-child { margin-bottom: 0; }

.site-footer { border-top: 1px solid var(--line); background: #f7f8f6; padding-block: 52px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 42px; }
.footer-grid p { margin: 14px 0 0; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact p, .footer-contact a { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.footer-social-label { margin: 0 0 12px !important; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft-ink); }
.footer-social-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-social-icons .icon-button svg { width: 20px; height: 20px; }

.page-masthead { border-bottom: 1px solid var(--ink); padding-block: 52px 28px; }
.page-masthead h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; }
.page-masthead p { max-width: 760px; margin: 18px 0 0; color: #45494c; font-size: 1rem; }
.page-section { padding-block: clamp(70px, 8vw, 110px); }
.section-rule-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ink); padding-bottom: 18px; margin-bottom: 0; }
.section-rule-heading h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.section-rule-heading span { color: var(--soft-ink); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-row > span { display: inline-flex; min-height: 28px; align-items: center; border: 1px solid #bfc7c0; background: #f2f5f2; padding: 4px 8px; color: #4f5653; font-size: .76rem; font-weight: 700; }

.research-register { padding-bottom: clamp(80px, 10vw, 130px); }
.research-register-row { display: grid; grid-template-columns: 20px 1fr 54px; gap: 28px; align-items: center; border-bottom: 1px solid var(--line); padding: 38px 0; }
.research-register-row h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.45rem); }
.research-register-row p { max-width: 800px; margin: 0 0 16px; }
.theme-swatch { width: 20px; align-self: stretch; }
.swatch-1 { background: var(--mint); }.swatch-2 { background: var(--green); }.swatch-3 { background: var(--lavender); }.swatch-4 { background: var(--lime); }

.roster-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 18px; }
.roster-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); padding: 14px; }
.member-photo { width: 76px; height: 76px; object-fit: cover; }
.roster-row h3 { margin: 0 0 4px; font-size: 1.1rem; }
.roster-row p { margin: 0; font-size: .9rem; }
.roster-actions { display: flex; gap: 8px; }
.icon-button { display: grid; width: 48px; height: 48px; flex: none; place-items: center; border: 1px solid var(--ink); background: #fff; transition: background 160ms ease, color 160ms ease; }
.icon-button:hover { background: var(--ink); color: #fff; }
.icon-button svg { width: 19px; }
.alumni-table { display: table; width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--ink); }
.alumni-row { display: grid; grid-template-columns: .85fr 1fr 1.5fr; gap: 22px; border-bottom: 1px solid var(--line); padding: 17px 0; }
.alumni-row th, .alumni-row td { padding: 0; text-align: left; }
.alumni-row:last-child { border-bottom: 0; }
.alumni-head { color: var(--soft-ink); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: clamp(68px, 8vw, 100px); }
.track-card { min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); padding: clamp(26px, 3vw, 38px); transition: border 160ms ease, transform 160ms ease; }
.track-card:nth-child(1) { background: linear-gradient(145deg, #f7fbf9, #e4f2ec); }
.track-card:nth-child(2) { background: linear-gradient(145deg, #f8f8fd, #e7e6f6); }
.track-card:nth-child(3) { background: linear-gradient(145deg, #fbfced, #f2f6d8); }
.track-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.track-card h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.track-card ul { display: flex; flex-direction: column; gap: 9px; margin: 22px 0; padding: 0; list-style: none; }
.track-card li { position: relative; padding-left: 17px; color: var(--ink); font-size: .9rem; }
.track-card li::before { content: ''; position: absolute; top: .62em; left: 0; width: 6px; height: 6px; background: linear-gradient(135deg, var(--green), var(--lime)); }
.track-empty { margin-top: 22px; font-size: .9rem; }
.track-card .square-link { margin-left: auto; }
.project-list { border-bottom: 1px solid var(--ink); }
.project-category { margin-top: 48px; }
.project-category:first-child { margin-top: 26px; }
.project-category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.project-category-heading h3 { margin: 0; font-size: 1.35rem; }
.project-category-heading span { color: var(--soft-ink); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.project-empty { margin: 0; border-bottom: 1px solid var(--line); padding: 26px 4px; }
.project-item { border-bottom: 1px solid var(--line) !important; }
.project-trigger { min-height: 108px; border-radius: 0 !important; padding: 22px 4px !important; text-decoration: none !important; }
.project-trigger > span:first-child { display: flex; flex-direction: column; gap: 7px; padding-right: 24px; }
.project-trigger strong { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.project-trigger small { max-width: 800px; color: var(--soft-ink); font-size: .94rem; font-weight: 400; line-height: 1.45; }
.project-content { padding: 0 4px 26px !important; }
.project-overview { max-width: 900px; margin: 22px 0 26px; font-size: 1rem; }
.project-detail-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 6vw, 70px); border-top: 1px solid var(--line); padding-top: 24px; }
.project-detail-grid h4 { margin: 0 0 10px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.project-detail-grid h4:not(:first-child) { margin-top: 24px; }
.project-detail-grid ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding-left: 20px; color: var(--soft-ink); }
.project-detail-grid p { margin: 0; }
.project-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.teaching-masthead { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; border-bottom: 1px solid var(--ink); padding-block: 52px 28px; }
.teaching-masthead h1 { margin: 0; font-size: clamp(2rem, 3vw, 2.4rem); }
.teaching-masthead blockquote { max-width: 620px; margin: 6px 0 0; color: #45494c; font-size: clamp(1.08rem, 1.8vw, 1.3rem); font-style: italic; }
.teaching-courses { padding-block: 40px 58px; }
.teaching-courses > h2 { margin-bottom: 24px; font-size: 1.4rem; }
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.teaching-past-heading { margin: 48px 0 24px; font-size: 1.4rem; }
.course-card { min-height: 250px; display: flex; flex-direction: column; border: 1px solid var(--line); padding: 26px; transition: border 160ms ease, transform 160ms ease; }
.course-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.course-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 40px; color: var(--soft-ink); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.course-card h3 { margin-bottom: 10px; font-size: 1.4rem; font-weight: 700; }
.course-card p { margin: 0 0 24px; }
.card-button { margin-top: auto; display: flex; min-height: 46px; align-items: center; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 14px; font-weight: 500; }
.teaching-projects { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-top: 1px solid var(--line); padding-block: 38px clamp(75px, 9vw, 112px); }
.teaching-projects h2 { margin-bottom: 9px; font-size: 1.45rem; }
.teaching-projects p { margin: 0; }

.course-hero { border-bottom: 1px solid var(--ink); padding-block: 52px 28px; }
.course-hero h1 { max-width: 980px; margin-bottom: 14px; font-size: clamp(2rem, 3vw, 2.4rem); }
.course-summary { max-width: 800px; font-size: 1rem; }
.course-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.facts-band { border-block: 1px solid var(--ink); background: var(--wash); }
.facts-grid { display: grid; grid-template-columns: repeat(var(--facts-columns, 6), minmax(0, 1fr)); }
.facts-grid > div { min-height: 104px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); padding: 18px; }
.facts-grid > div:first-child { border-left: 1px solid var(--line); }
.facts-grid span { color: var(--soft-ink); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.facts-grid strong { margin-top: 5px; font-size: .95rem; }
.reading-column { max-width: 900px; padding-block: clamp(75px, 9vw, 120px); }
.reading-column > section { margin-bottom: 80px; }
.reading-column h2 { margin-bottom: 20px; }
.course-details { border-top: 1px solid var(--ink); }
.course-details > div { display: grid; grid-template-columns: 180px 1fr; gap: 28px; border-bottom: 1px solid var(--line); padding: 17px 0; }
.course-details dt { color: #727a76; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.course-details dd { margin: 0; color: var(--ink); }
.course-details a { border-bottom: 1px solid #9ea6a0; font-weight: 600; }
.reading-column > section > p:last-of-type { font-size: 1.08rem; }
.schedule-list { margin-top: 30px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.schedule-trigger { display: grid !important; grid-template-columns: 110px 1fr auto; gap: 24px; min-height: 66px; border-radius: 0 !important; padding: 14px 0 !important; text-decoration: none !important; }
.schedule-trigger > span:first-child { color: var(--soft-ink); font-size: .8rem; font-weight: 700; }
.schedule-content { padding: 0 0 18px 134px !important; }
.schedule-content p { margin: 0; }
.assessment-block { border-top: 1px solid var(--ink); padding-top: 34px; }

.openings-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .75fr); gap: clamp(42px, 7vw, 90px); padding-block: clamp(75px, 9vw, 120px); align-items: start; }
.openings-accordion { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.position-accordion-item { border-bottom: 1px solid var(--line) !important; }
.position-accordion-item:last-child { border-bottom: 0 !important; }
.position-accordion-trigger { min-height: 82px; border-radius: 0 !important; padding: 20px 2px !important; text-decoration: none !important; }
.position-title { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 600; }
.position-accordion-content { padding: 0 46px 28px 2px !important; }
.position-accordion-content p { max-width: 760px; margin: 0 0 14px; }
.position-accordion-content a { border-bottom: 1px solid #9da49f; color: #286743; font-weight: 600; }
.position-subtitle { color: var(--ink); font-weight: 600; }
.application-panel { border: 1px solid var(--ink); background: var(--wash); padding: clamp(28px, 4vw, 42px); }
.application-panel h2 { font-size: 2.2rem; }
.application-panel ol { padding-left: 22px; color: var(--soft-ink); }
.application-panel li { margin-bottom: 14px; }
.application-panel .button { width: 100%; margin-top: 20px; }
.panel-mail { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.publication-list { padding-bottom: clamp(80px, 10vw, 130px); }
.publication-year { display: grid; grid-template-columns: 110px 1fr; gap: 34px; padding-top: 54px; }
.publication-year > h2 { position: sticky; top: 120px; align-self: start; margin: 0; font-size: 2.7rem; }
.publication-year > div { border-top: 1px solid var(--ink); }
.publication-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 20px; align-items: start; border-bottom: 1px solid var(--line); padding: 24px 0; }
.publication-icon { display: grid; width: 42px; height: 42px; place-items: center; background: var(--wash); }
.publication-icon svg { width: 19px; }
.publication-row h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.012em; }
.publication-row p { margin: 0 0 12px; font-size: .9rem; }
.publication-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.resource-button { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid var(--ink); background: #fff; font-size: .68rem; font-weight: 700; line-height: 1; }
.resource-button:hover { background: var(--ink); color: #fff; }

.news-ledger { padding-bottom: clamp(80px, 10vw, 130px); }
.news-ledger article { display: grid; grid-template-columns: 220px 1fr; gap: 34px; border-bottom: 1px solid var(--line); padding: 32px 0; }
.news-ledger-meta { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-content: start; color: var(--soft-ink); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.news-ledger-meta svg { grid-row: 1 / 3; }
.news-ledger h2 { margin-bottom: 10px; font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.news-ledger p { margin: 0; }

.member-name-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.personal-homepage { padding-bottom: 80px; }
.profile-back { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; margin-top: 22px; font-size: .9rem; }
.profile-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.profile-intro { display: grid; grid-template-columns: 288px minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 68px); padding-block: 28px 44px; }
.profile-portrait-column { min-width: 0; }
.profile-portrait { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.profile-email { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; border: 1px solid var(--ink); padding: 12px; font-size: .95rem; }
.profile-email span { overflow-wrap: anywhere; }
.profile-email svg { flex: none; }
.profile-email:hover { background: var(--wash); }
.profile-biography { min-width: 0; }
.profile-biography h1 { margin: 0 0 9px; font-size: clamp(2rem, 3.4vw, 2.4rem); font-weight: 600; }
.profile-biography > p { max-width: 740px; margin: 0 0 18px; font-size: 1.05rem; }
.profile-biography .profile-role { margin-bottom: 24px; color: var(--ink); font-size: 1rem; font-weight: 600; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.profile-actions .button { font-size: .9rem; font-weight: 600; }
.profile-affiliations { border-top: 1px solid var(--line); padding-top: 24px; }
.profile-affiliations h2 { margin-bottom: 16px; font-family: 'Hanken Grotesk', Arial, sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.profile-affiliation-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.profile-affiliation-links a { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); padding: 18px; font-size: .95rem; font-weight: 500; line-height: 1.4; }
.profile-affiliation-links a:hover { border-color: var(--ink); background: var(--wash); }
.profile-affiliation-links svg { flex: none; }
.profile-section-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block: 44px 48px; }
.profile-section-nav a { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-top: 3px solid var(--mint); padding: 12px 16px; background: var(--wash); font-size: .9rem; font-weight: 600; line-height: 1.4; }
.profile-section-nav a:nth-child(2) { border-top-color: var(--green); }
.profile-section-nav a:nth-child(3) { border-top-color: var(--lavender); }
.profile-section-nav a:nth-child(4) { border-top-color: var(--lime); }
.profile-section-nav a:hover { background: #e9eee8; }
.profile-section-nav svg { flex: none; }
.profile-cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 68px); }
.profile-section { min-width: 0; }
.profile-section > h2 { margin: 0; border-bottom: 1px solid var(--ink); padding-bottom: 18px; font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 600; line-height: 1.3; }
.profile-records { margin: 0; padding: 0; list-style: none; }
.profile-records li { border-bottom: 1px solid var(--line); padding-block: 24px; }
.profile-records h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.profile-records p { margin: 0; }
.profile-records .profile-period { margin-bottom: 8px; color: #397955; font-size: .875rem; font-weight: 600; }
.profile-records .profile-institution { margin-bottom: 4px; color: var(--ink); }
.profile-honors, .profile-service { margin: 0; }
.profile-honors > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; border-bottom: 1px solid var(--line); padding-block: 18px; }
.profile-honors dt { color: #397955; font-size: .9rem; font-weight: 600; }
.profile-honors dd { margin: 0; }
.profile-honors ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.profile-service > div { border-bottom: 1px solid var(--line); padding-block: 20px; }
.profile-service dt { margin-bottom: 8px; font-weight: 600; }
.profile-service dd { margin: 0; color: var(--soft-ink); line-height: 1.65; }
.profile-funding { margin: 48px 0 0; border-left: 3px solid var(--mint); padding: 18px 24px; background: var(--wash); font-size: .95rem; }

@media (max-width: 900px) {
  .profile-intro { grid-template-columns: 230px minmax(0, 1fr); }
  .profile-affiliation-links, .profile-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-cv-grid { column-gap: 32px; }
}

@media (max-width: 700px) {
  .profile-intro, .profile-cv-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-intro { gap: 28px; padding-top: 16px; }
  .profile-portrait-column { max-width: 288px; }
  .profile-portrait { width: 220px; }
  .profile-actions .button { width: auto; flex: 1 1 120px; }
  .profile-affiliation-links a { padding: 14px; gap: 10px; }
  .profile-section-nav { margin-block: 32px; }
  .profile-section-nav a { padding: 12px; }
  .profile-cv-grid { row-gap: 36px; }
  .profile-funding { padding: 18px; }
}

@media (max-width: 1040px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; }
  .news-grid { grid-template-columns: 1fr; }
  .openings-layout { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: repeat(3, 1fr); }
  .facts-grid > div:nth-child(4) { border-left: 1px solid var(--line); }
}

@media (max-width: 1250px) and (min-width: 1041px) {
  .odi-brand span { display: none; }
}

@media (max-width: 700px) {
  .section-shell { width: min(100% - 30px, 1180px); }
  .header-inner { width: min(100% - 24px, 1320px); min-height: 74px; }
  .eth-link img { width: 112px; }
  .brand-rule { height: 32px; }
  .odi-brand .brand-wordmark { width: 42px; }
  .odi-brand .brand-landscape { display: none; }
  .odi-brand span { display: none; }
  .hero { min-height: auto; gap: 44px; padding-block: 56px 70px; }
  .hero-visual { min-height: 0; }
  .hero-visual-caption { inset-inline: 20px; flex-direction: column; }
  .photo-carousel { margin-inline: 0; padding-bottom: 62px; }
  .carousel-control-prev { left: calc(50% - 52px) !important; top: auto !important; bottom: 0; }
  .carousel-control-next { right: calc(50% - 52px) !important; top: auto !important; bottom: 0; }
  .section-intro-inline { align-items: flex-start; flex-direction: column; }
  .teaching-masthead { grid-template-columns: 1fr; gap: 18px; }
  .teaching-projects { align-items: flex-start; flex-direction: column; }
  .research-triptych { grid-template-columns: 1fr; padding: 32px 24px; }
  .research-landscape { width: min(220px, 70vw); margin-inline: auto; }
  .research-pillar-left { text-align: left; }
  .research-pillar-left li { padding-right: 0; padding-left: 17px; }
  .research-pillar-left li::before { right: auto; left: 0; }
  .join-content { align-items: flex-start; flex-direction: column; gap: 28px; }
  .button, .button-large { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .research-register-row { grid-template-columns: 12px 1fr; gap: 18px; }
  .research-register-row .square-link { grid-column: 2; }
  .section-rule-heading { align-items: flex-start; flex-direction: column; }
  .alumni-row { grid-template-columns: 1fr; gap: 5px; padding-block: 20px; }
  .alumni-table-head { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .alumni-row > [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--soft-ink); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .alumni-row td:last-child { color: var(--soft-ink); }
  .roster-list, .track-grid, .course-grid { grid-template-columns: 1fr; }
  .track-card { min-height: 300px; }
  .course-actions, .project-actions { flex-direction: column; }
  .project-detail-grid { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .facts-grid > div:nth-child(odd) { border-left: 1px solid var(--line); }
  .schedule-trigger { grid-template-columns: 88px 1fr auto; gap: 12px; }
  .schedule-content { padding-left: 100px !important; }
  .course-details > div { grid-template-columns: 1fr; gap: 5px; }
  .publication-year { grid-template-columns: 1fr; gap: 14px; }
  .publication-year > h2 { position: static; }
  .publication-row { grid-template-columns: 42px 1fr; }
  .publication-actions { grid-column: 2; justify-content: flex-start; }
  .news-ledger article { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 480px) {
  .roster-row { grid-template-columns: 68px 1fr; }
  .member-photo { width: 68px; height: 68px; }
  .roster-actions { grid-column: 2; }
  .facts-grid { grid-template-columns: 1fr; }
  .facts-grid > div { border-left: 1px solid var(--line); }
  .schedule-trigger { grid-template-columns: 1fr auto; }
  .schedule-trigger > span:first-child { grid-column: 1 / -1; }
  .schedule-content { padding-left: 0 !important; }
}

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

/* --- Additions for the Jekyll port ----------------------------------------
   Small rules the demo did not need: Markdown from _data renders as <p>/<ul>
   inside blocks the demo filled with single elements, plus a couple of states
   (a member without a portrait, an expandable full news item, a wider primary
   navigation) that only exist once the pages are driven by real data.
   ------------------------------------------------------------------------- */

.member-photo-empty { display: block; background: var(--wash); border: 1px solid var(--line); }

.project-overview > p { margin: 0 0 14px; }
.project-overview > p:last-child { margin-bottom: 0; }
.project-detail-grid li { line-height: 1.5; }

.position-accordion-content ol,
.position-accordion-content ul { max-width: 760px; margin: 0 0 14px; padding-left: 22px; color: var(--soft-ink); }
.position-accordion-content li { margin-bottom: 8px; }

.schedule-materials { margin: 10px 0 0; font-size: .9rem; }
.schedule-materials a { border-bottom: 1px solid #9ea6a0; font-weight: 600; }

.news-body p { margin: 0 0 14px; }
.news-body ul { margin: 0 0 14px; padding-left: 20px; color: var(--soft-ink); }
.news-body li { margin-bottom: 7px; }
.news-body a { border-bottom: 1px solid #9ea6a0; color: #286743; overflow-wrap: anywhere; }
.news-body > :last-child { margin-bottom: 0; }

.assessment-block p { margin: 0 0 16px; }
.assessment-block p:last-child { margin-bottom: 0; }

/* Seven primary links plus the Openings button need a little more room than
   the demo's five. */
@media (max-width: 1420px) and (min-width: 1041px) {
  .desktop-nav { gap: 12px; font-size: .82rem; }
  .nav-cta { padding: 10px 12px; }
}

/* Course page blocks that only appear once courses carry their full content:
   learning objectives, a grouped reading list, course staff, per-entry metadata
   inside a collapsible row, and rows that have nothing to expand. */
.course-objectives { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; color: var(--soft-ink); }
.course-objectives li { line-height: 1.55; }

.reading-group { margin-top: 30px; }
.reading-group h3 { margin-bottom: 12px; font-size: 1.05rem; font-weight: 600; }
.reading-group ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; color: var(--soft-ink); }
.reading-group a { border-bottom: 1px solid #9ea6a0; color: #286743; }

.course-people { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 26px; }
.course-people .roster-row { grid-template-columns: 76px 1fr; }

.entry-meta { margin: 0; }
.entry-meta > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-block: 7px; }
.entry-meta dt { color: #727a76; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.entry-meta dd { margin: 0; color: var(--ink); font-size: .95rem; }
.entry-meta a { border-bottom: 1px solid #9ea6a0; font-weight: 600; }
.schedule-content > p + .entry-meta { margin-top: 10px; }

/* A row with nothing to reveal keeps the grid but drops the disclosure. */
.schedule-row { display: grid; grid-template-columns: 110px 1fr; gap: 24px; min-height: 66px; align-items: center; padding: 14px 0; color: var(--soft-ink); }
.schedule-row > span { font-size: .8rem; font-weight: 700; }
.schedule-row > strong { font-weight: 500; }

/* Listings whose entries carry no date or number lose the first column. */
.schedule-list-plain .schedule-trigger { grid-template-columns: 1fr auto !important; }
.schedule-list-plain .schedule-row { grid-template-columns: 1fr; }
.schedule-list-plain .schedule-content { padding-left: 0 !important; }

@media (max-width: 700px) {
  .course-people { grid-template-columns: 1fr; }
  .entry-meta > div { grid-template-columns: 1fr; gap: 2px; }
  .schedule-row { grid-template-columns: 88px 1fr; gap: 12px; }
}