@charset "utf-8";

      :root {
        --color-cream: #f6f3ec;
        --color-paper: #ece8df;
        --color-ink: #1f1d1a;
        --color-ink-light: #3a3733;
        --color-ink-muted: #5c5850;
        --color-accent: #9a4f12;
        --color-rule: #d8d2c4;
        --color-rule-dark: #8f8a80;
        --font-serif: "Source Serif 4", Georgia, serif;
        --font-sans: "Hanken Grotesk", -apple-system, sans-serif;
        --font-mono: "JetBrains Mono", monospace;
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --max-width: 1200px;
        --nav-height: 72px;
      }

      *,
      ::before,
      ::after {
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
      }

      html {
        font-size: 16px;
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--font-sans);
        color: var(--color-ink);
        background: var(--color-cream);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      .navbar {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        height: var(--nav-height);
        background: var(--color-cream);
        border-bottom: 1px solid var(--color-rule);
        z-index: 1000;
      }

      .navbar.scrolled {
        box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 20px;
      }

      .navbar-inner {
        max-width: var(--max-width);
        margin: 0px auto;
        padding: 0 var(--space-lg);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        text-decoration: none;
        color: var(--color-ink);
      }

      .logo-mark {
        width: 40px;
        height: 40px;
        display: block;
        flex-shrink: 0;
      }

      .logo-text {
        font-family: var(--font-serif);
        font-size: 1.5rem;
        font-weight: 400;
        letter-spacing: -0.02em;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
        list-style: none;
      }

      .nav-link {
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
        text-decoration: none;
        position: relative;
        padding: var(--space-xs) 0;
        transition: color 0.2s;
        cursor: pointer;
      }

      .nav-link::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0px;
        width: 0px;
        height: 1px;
        background: var(--color-accent);
        transition: width 0.3s;
      }

      .nav-link:hover,
      .nav-link.active {
        color: var(--color-ink);
      }

      .nav-link:hover::after,
      .nav-link.active::after {
        width: 100%;
      }

      .nav-dropdown {
        position: relative;
      }

      .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-cream);
        border: 1px solid var(--color-rule);
        padding: var(--space-sm) 0;
        min-width: 180px;
        opacity: 0;
        visibility: hidden;
        transition: 0.2s;
      }

      .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
      }

      .nav-dropdown-item {
        display: block;
        padding: var(--space-sm) var(--space-md);
        font-size: 0.8125rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0.01em;
        color: var(--color-ink-light);
        text-decoration: none;
        cursor: pointer;
      }

      .nav-dropdown-item:hover {
        background: var(--color-paper);
        color: var(--color-ink);
      }

      .mobile-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-sm);
      }

      .mobile-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-ink);
      }

      @media (max-width: 768px) {
        .nav-links {
          position: fixed;
          top: var(--nav-height);
          left: 0px;
          right: 0px;
          background: var(--color-cream);
          border-bottom: 1px solid var(--color-rule);
          flex-direction: column;
          padding: var(--space-lg);
          gap: var(--space-md);
          transform: translateY(-100%);
          opacity: 0;
          visibility: hidden;
          transition: 0.3s;
        }
        .nav-links.open {
          transform: translateY(0px);
          opacity: 1;
          visibility: visible;
        }
        .mobile-toggle {
          display: flex;
        }
        .nav-dropdown-menu {
          position: static;
          transform: none;
          border: none;
          padding: var(--space-sm) 0 0 var(--space-md);
          opacity: 1;
          visibility: visible;
        }
      }

      .main-content {
        min-height: 100vh;
        padding-top: var(--nav-height);
      }

      .page {
        display: none;
        animation: 0.4s ease 0s 1 normal none running fadeIn;
      }

      .page.active {
        display: block;
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
          transform: translateY(10px);
        }
        100% {
          opacity: 1;
          transform: translateY(0px);
        }
      }

      .section {
        padding: var(--space-2xl) var(--space-lg);
      }

      .container {
        max-width: var(--max-width);
        margin: 0px auto;
      }

      .container--narrow {
        max-width: 720px;
      }

      .headline {
        font-family: var(--font-serif);
        font-weight: 600;
        font-size: clamp(2.25rem, 5.5vw, 3.5rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
      }

      .headline em {
        font-style: normal;
      }

      .subheadline {
        font-family: var(--font-serif);
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
        font-weight: 400;
        line-height: 1.5;
        color: var(--color-ink-light);
        margin-top: var(--space-lg);
      }

      .section-title {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
        margin-bottom: var(--space-md);
      }

      .section-heading {
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.01em;
        margin-bottom: var(--space-lg);
      }

      .body-text {
        font-family: var(--font-serif);
        font-size: 1.125rem;
        line-height: 1.75;
        color: var(--color-ink-light);
      }

      .body-text p + p {
        margin-top: var(--space-md);
      }

      .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        font-family: var(--font-sans);
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 1rem 2rem;
        border: none;
        cursor: pointer;
        transition: 0.25s;
      }

      .btn--primary {
        background: var(--color-accent);
        color: var(--color-cream);
      }

      .btn--primary:hover {
        background: var(--color-ink);
      }

      .btn--outline {
        background: transparent;
        color: var(--color-ink);
        border: 1px solid var(--color-ink);
      }

      .btn--outline:hover {
        background: var(--color-ink);
        color: var(--color-cream);
      }

      .btn svg {
        width: 14px;
        height: 14px;
      }

      .hero {
        /* No full-viewport min-height: it left a screen of empty space
           before the first real content (Ouro, Aug 2026 feedback). */
        display: flex;
        align-items: center;
        position: relative;
        padding-bottom: var(--space-xl);
      }

      .hero::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -20%;
        width: 80%;
        height: 200%;
        background: radial-gradient(rgba(200, 137, 26, 0.12) 0%, transparent 70%);
        pointer-events: none;
      }

      .hero-content {
        position: relative;
        z-index: 1;
      }

      .hero-meta {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
        margin-bottom: var(--space-lg);
      }

      .hero-actions {
        display: flex;
        gap: var(--space-md);
        margin-top: var(--space-xl);
        flex-wrap: wrap;
      }

      .hero-deadline {
        margin-top: var(--space-lg);
        font-family: var(--font-mono);
        font-size: 0.8125rem;
        color: var(--color-accent);
      }

      .divider {
        width: 100%;
        height: 1px;
        background: var(--color-rule);
        margin: var(--space-2xl) 0;
      }

      .divider--accent {
        background: linear-gradient(
          90deg,
          var(--color-accent),
          var(--color-rule) 50%,
          transparent
        );
        height: 2px;
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-lg);
        margin-top: var(--space-xl);
      }

      .feature-card {
        padding: var(--space-lg);
        background: var(--color-paper);
        border-left: 2px solid var(--color-rule);
        transition: border-color 0.3s;
      }

      .feature-card:hover {
        border-color: var(--color-accent);
      }

      .feature-card h4 {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 400;
        margin-bottom: var(--space-sm);
      }

      .feature-card p {
        font-size: 0.9375rem;
        color: var(--color-ink-muted);
        line-height: 1.6;
      }

      .program-nav {
        display: flex;
        gap: var(--space-lg);
        border-bottom: 1px solid var(--color-rule);
        margin-bottom: var(--space-xl);
      }

      .program-nav-item {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-ink-muted);
        padding: var(--space-md) 0;
        position: relative;
        cursor: pointer;
        background: none;
        border: none;
      }

      .program-nav-item::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0px;
        width: 0px;
        height: 2px;
        background: var(--color-accent);
        transition: width 0.3s;
      }

      .program-nav-item:hover,
      .program-nav-item.active {
        color: var(--color-ink);
      }

      .program-nav-item.active::after {
        width: 100%;
      }

      .program-section {
        display: none;
        animation: 0.4s ease 0s 1 normal none running fadeIn;
      }

      .program-section.active {
        display: block;
      }

      .key-info {
        background: var(--color-paper);
        padding: var(--space-lg);
        margin-bottom: var(--space-xl);
        border-left: 3px solid var(--color-accent);
      }

      .key-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--space-md);
      }

      .key-info-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .key-info-label {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
      }

      .key-info-value {
        font-family: var(--font-serif);
        font-size: 1.0625rem;
      }

      .key-info-deadline {
        margin-top: var(--space-md);
        padding-top: var(--space-md);
        border-top: 1px solid var(--color-rule);
        font-family: var(--font-mono);
        font-size: 0.875rem;
        color: var(--color-accent);
      }

      .mentors-section {
        margin-top: var(--space-xl);
        padding: var(--space-lg);
        background: var(--color-paper);
      }

      .mentors-section h4 {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
        margin-bottom: var(--space-sm);
      }

      .mentors-list {
        font-family: var(--font-serif);
        font-size: 1.0625rem;
        line-height: 1.7;
        color: var(--color-ink-light);
      }

      .note-box {
        margin-top: var(--space-xl);
        padding: var(--space-md) var(--space-lg);
        border-left: 2px solid var(--color-rule-dark);
      }

      .note-box p {
        font-size: 0.9375rem;
        font-style: normal;
        color: var(--color-ink-muted);
        line-height: 1.6;
      }

      .subsection-title {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 400;
        margin-top: var(--space-xl);
        margin-bottom: var(--space-md);
      }

      .involvement-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--space-md);
      }

      .involvement-card {
        padding: var(--space-md);
        background: var(--color-paper);
        border-top: 2px solid var(--color-rule);
      }

      .involvement-card:hover {
        border-color: var(--color-accent);
      }

      .involvement-card h5 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: var(--space-xs);
      }

      .involvement-card p {
        font-size: 0.875rem;
        color: var(--color-ink-muted);
        line-height: 1.5;
      }

      .activities-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-top: var(--space-md);
      }

      .activities-list span {
        font-size: 0.8125rem;
        padding: var(--space-xs) var(--space-sm);
        background: var(--color-paper);
        border: 1px solid var(--color-rule);
        color: var(--color-ink-light);
      }

      .team-section + .team-section {
        margin-top: var(--space-2xl);
      }

      .team-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--space-lg);
        margin-top: var(--space-lg);
      }

      .team-card {
        text-align: center;
      }

      .team-card-image {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: var(--color-rule);
        margin: 0 auto var(--space-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-serif);
        font-size: 2rem;
        font-style: normal;
        color: var(--color-ink-muted);
      }

      img.team-card-image {
        object-fit: cover;
      }

      .team-card h4 {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 400;
        margin-bottom: var(--space-xs);
      }

      .team-card-role {
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
        margin-bottom: var(--space-sm);
      }

      .team-card-bio {
        font-size: 0.9375rem;
        color: var(--color-ink-light);
        line-height: 1.5;
      }

      .team-card-org {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--color-accent);
        margin-bottom: var(--space-sm);
        letter-spacing: 0.02em;
      }

      .team-card--detailed {
        text-align: left;
        padding: var(--space-lg);
        background: var(--color-paper);
        border-left: 2px solid var(--color-rule);
      }

      .team-card--detailed .team-card-image {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
        margin: 0 0 var(--space-md) 0;
      }

      .team-card--detailed .team-card-bio {
        margin-top: var(--space-sm);
        font-family: var(--font-serif);
        font-size: 0.9375rem;
        line-height: 1.6;
      }

      .team-card--detailed .team-card-bio em {
        font-style: normal;
        color: var(--color-ink);
      }

      .team-grid--mentors {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }

      .team-intro {
        font-family: var(--font-serif);
        font-size: 1.0625rem;
        color: var(--color-ink-light);
        margin-bottom: var(--space-xl);
        line-height: 1.6;
      }

      .affiliation-logos {
        margin-top: var(--space-2xl);
        padding: var(--space-xl);
        background: var(--color-paper);
        text-align: center;
      }

      .affiliation-label {
        font-family: var(--font-sans);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
        margin-bottom: var(--space-md);
      }

      .logo-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
      }

      .org-badge {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        padding: var(--space-sm) var(--space-md);
        background: var(--color-cream);
        border: 1px solid var(--color-rule);
        color: var(--color-ink-light);
        letter-spacing: 0.03em;
      }

      .mentors-showcase {
        background: var(--color-paper);
        border-top: 1px solid var(--color-rule);
        border-bottom: 1px solid var(--color-rule);
      }

      .mentors-intro {
        font-family: var(--font-serif);
        font-size: 1.125rem;
        color: var(--color-ink-light);
        max-width: 600px;
        line-height: 1.6;
        margin-bottom: var(--space-xl);
      }

      .mentor-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--space-md);
      }

      .mentor-card {
        display: flex;
        align-items: flex-start;
        gap: var(--space-md);
        padding: var(--space-md);
        background: var(--color-cream);
        border-left: 2px solid var(--color-rule);
      }

      .mentor-img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--color-rule);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-style: normal;
        color: var(--color-ink-muted);
        overflow: hidden;
      }

      .mentor-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mentor-info h4 {
        font-family: var(--font-serif);
        font-size: 1.125rem;
        font-weight: 400;
        margin-bottom: 2px;
      }

      .mentor-org {
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        color: var(--color-accent);
        letter-spacing: 0.02em;
        margin-bottom: var(--space-xs);
      }

      .mentor-desc {
        font-size: 0.875rem;
        color: var(--color-ink-muted);
        line-height: 1.5;
      }

      .mentor-desc em {
        font-style: normal;
        color: var(--color-ink-light);
      }

      .mentor-orgs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-sm);
        margin-top: var(--space-xl);
        padding-top: var(--space-xl);
        border-top: 1px solid var(--color-rule);
      }

      .org-tag {
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        padding: var(--space-xs) var(--space-sm);
        background: transparent;
        border: 1px solid var(--color-rule);
        color: var(--color-ink-muted);
        letter-spacing: 0.05em;
      }

      .mentor-cta {
        text-align: center;
        margin-top: var(--space-xl);
      }

      .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
        align-items: start;
      }

      @media (max-width: 768px) {
        .contact-content {
          grid-template-columns: 1fr;
        }
      }

      .contact-info h3 {
        font-family: var(--font-serif);
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: var(--space-md);
      }

      .contact-email {
        font-family: var(--font-mono);
        font-size: 1.125rem;
        color: var(--color-accent);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-md);
        background: var(--color-paper);
        border-left: 2px solid var(--color-accent);
        transition: 0.2s;
      }

      .contact-email:hover {
        background: var(--color-ink);
        color: var(--color-cream);
      }

      .contact-email svg {
        width: 18px;
        height: 18px;
      }

      .footer {
        padding: var(--space-xl) var(--space-lg);
        border-top: 1px solid var(--color-rule);
        margin-top: var(--space-2xl);
      }

      .footer-inner {
        max-width: var(--max-width);
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-md);
      }

      .footer-copy {
        font-size: 0.8125rem;
        color: var(--color-ink-muted);
      }

      .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-lg);
        margin-top: var(--space-xl);
      }

      .testimonial-card {
        margin: 0;
        padding: var(--space-lg);
        background: var(--color-paper);
        border-left: 2px solid var(--color-accent);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
      }

      .testimonial-card blockquote {
        margin: 0;
        font-family: var(--font-serif);
        font-size: 1.125rem;
        font-style: normal;
        line-height: 1.6;
        color: var(--color-ink);
      }

      .testimonial-card figcaption {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        color: var(--color-ink-muted);
        margin-top: auto;
      }

      .photo-figure {
        margin: var(--space-xl) 0 0;
      }

      .photo-figure img {
        display: block;
        width: 100%;
        height: auto;
      }

      .photo-figure figcaption {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--color-ink-muted);
        margin-top: var(--space-sm);
      }
    

      /* ---- Added Aug 2026 (team feedback round) ---- */

      /* Skim support: bold runs inside serif body text should read as ink, not grey. */
      .body-text strong,
      .subheadline strong {
        font-weight: 600;
        color: var(--color-ink);
      }

      /* One-line "how we do this differently" note, sits under a section heading. */
      .differ {
        font-family: var(--font-serif);
        font-style: normal;
        font-size: 1.125rem;
        color: var(--color-accent);
        margin: calc(-1 * var(--space-md)) 0 var(--space-lg);
        line-height: 1.5;
      }

      /* Large pull-quote for the pedagogy statement. */
      .callout {
        font-family: var(--font-serif);
        font-size: clamp(1.375rem, 2.4vw, 1.75rem);
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -0.01em;
        color: var(--color-ink);
        padding: var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-lg) + 0.5rem);
        border-left: 3px solid var(--color-accent);
        background: var(--color-paper);
        margin: var(--space-lg) 0;
      }

      .callout em {
        color: var(--color-accent);
        font-style: normal;
      }

      /* Numbered steps, e.g. the shape of a seminar day. */
      .steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--space-lg);
        margin-top: var(--space-lg);
      }

      .step {
        padding-top: var(--space-md);
        border-top: 2px solid var(--color-rule);
      }

      .step-num {
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent);
        margin-bottom: var(--space-sm);
      }

      .step h4 {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 400;
        margin-bottom: var(--space-sm);
      }

      .step p {
        font-size: 0.9375rem;
        color: var(--color-ink-muted);
        line-height: 1.6;
      }

      /* Survey numbers on the retrospective page. */
      .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--space-lg);
        margin-top: var(--space-lg);
      }

      .stat {
        padding: var(--space-md) 0;
        border-top: 2px solid var(--color-rule);
      }

      .stat-num {
        font-family: var(--font-serif);
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 1;
        color: var(--color-accent);
        margin-bottom: var(--space-sm);
      }

      .stat-label {
        font-size: 0.875rem;
        color: var(--color-ink-muted);
        line-height: 1.5;
      }

      .stat-note {
        margin-top: var(--space-md);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--color-ink-muted);
      }

      /* Footer links row (contact, support, retrospective). */
      .footer-inner {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm) var(--space-lg);
        align-items: center;
        justify-content: space-between;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        font-size: 0.8125rem;
      }

      .footer-links a {
        color: var(--color-ink-muted);
        text-decoration: none;
        border-bottom: 1px solid var(--color-rule);
      }

      .footer-links a:hover {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
      }

      /* Labelled list (shared with the approach page, which also defines it locally). */
      .join-list {
        list-style: none;
        margin: var(--space-lg) 0 var(--space-xl);
        padding: 0;
      }

      .join-list li {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-rule);
      }

      .join-list b {
        font-family: var(--font-serif);
        font-size: 1.0625rem;
        font-weight: 400;
      }

      .join-list span {
        font-size: 0.9375rem;
        color: var(--color-ink-muted);
        line-height: 1.6;
      }

      /* ---- Added Aug 2026, round 2 (legibility, spacing, talks page) ---- */

      /* Body copy is sans (Hanken Grotesk) for legibility; the serif is for headings and quotes. */
      .body-text,
      .mentors-list,
      .mentors-intro,
      .team-intro,
      .key-info-value,
      .differ {
        font-family: var(--font-sans);
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.7;
      }

      .body-text strong {
        font-weight: 600;
      }

      .subheadline {
        font-family: var(--font-sans);
        font-weight: 300;
        font-size: clamp(1.125rem, 2.2vw, 1.375rem);
        line-height: 1.55;
      }

      .testimonial-card blockquote {
        font-size: 1.375rem;
        line-height: 1.4;
      }

      @media (max-width: 768px) {
        .section {
          padding: var(--space-xl) 1.25rem;
        }
      }

      .key-info-deadline a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--color-rule-dark);
      }

      /* Mentor and team names become links where we have a public page. */
      .mentor-info h4 a,
      .team-card h4 a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--color-rule-dark);
      }

      .mentor-info h4 a:hover,
      .team-card h4 a:hover {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
      }

      /* Talks page: one row per talk, grouped by week. */
      .talk-list {
        list-style: none;
        margin: var(--space-md) 0 0;
        padding: 0;
      }

      .talk {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-rule);
      }

      .talk-title {
        font-family: var(--font-serif);
        font-size: 1.1875rem;
        font-weight: 400;
        line-height: 1.35;
      }

      .talk-meta {
        margin-top: var(--space-xs);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        color: var(--color-ink-muted);
      }

      .talk-meta a {
        color: var(--color-accent);
        text-decoration: none;
        border-bottom: 1px solid var(--color-rule);
      }

      .talk-meta a:hover {
        border-bottom-color: var(--color-accent);
      }

      /* Compact quote row used on the program page. */
      .testimonial-grid--compact {
        margin-top: var(--space-md);
      }

      .mentors-list a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--color-rule-dark);
      }

      .mentors-list a:hover {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
      }

      /* In-copy links: accent red like the rest of the site, not browser blue. */
      .body-text a,
      .mentors-intro a,
      .fact span a,
      .join-list span a,
      .feature-card p a,
      .note-box p a,
      .hero-deadline a,
      .subheadline a,
      .q-card small a {
        color: var(--color-accent);
        text-decoration: none;
        border-bottom: 1px solid var(--color-rule-dark);
      }

      .body-text a:hover,
      .mentors-intro a:hover,
      .fact span a:hover,
      .join-list span a:hover,
      .feature-card p a:hover,
      .note-box p a:hover,
      .hero-deadline a:hover,
      .subheadline a:hover,
      .q-card small a:hover {
        border-bottom-color: var(--color-accent);
      }

      /* The hero glow is positioned past the right edge; clip it so the page
         never scrolls sideways on narrow screens. */
      .hero {
        overflow: hidden;
      }

      /* ---- Aug 2026, round 3: the "Daylight" look chosen from the style lab. ---- */
      /* Sep 2026: headings moved from Instrument Serif (a narrow display face)
         to Source Serif 4 for readability. Source Serif runs wider, so sizes
         come down and weight goes up. */
      .headline {
        font-size: clamp(2.25rem, 5.5vw, 3.5rem);
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.15;
      }

      .headline em {
        color: var(--color-accent);
      }

      .section-heading {
        font-weight: 600;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
      }

      .differ {
        font-style: normal;
        font-weight: 400;
        font-size: 1.0625rem;
      }

      .callout {
        font-weight: 400;
        font-size: clamp(1.25rem, 2.2vw, 1.5rem);
      }

      .feature-card h4,
      .step h4,
      .talk-title,
      .team-card h4,
      .mentor-info h4 {
        font-size: 1.25rem;
        font-weight: 600;
      }

      .join-list b {
        font-size: 1.125rem;
      }

      /* ---- Sep 2026: "Inscription" theme, chosen after the team's style round. ----
         Every shape comes from the A logo: streamer rules that taper to a point on
         the left, hairline stems, and the A's ~58° diagonal cut on heavy slabs.
         One highlight colour only (forest green). Carved capitals (Castoro Titling)
         for labels and headings, Spectral for reading.
         Note: this brings back serif body text and a few italic lines, which the
         Sep 2026 readability round had removed; the team approved this look. */
      :root {
        /* Oct 2026: a cream inspired by princint.ai (#f8eedf). Was sand #e9e1cf;
           paper, rules and placeholders below are retuned to the same contrast as on the sand. */
        --color-cream: #f8eedf;
        --color-paper: rgba(237, 223, 201, 0.55);
        --color-ink: #1c1a17;
        --color-ink-light: #36312a;
        --color-ink-muted: #635a4b;
        --color-accent: #1f5a3e; /* Oct 2026: Ivy, richer than the old forest #2f5a45, to suit the cream */
        --color-accent-deep: #16422d; /* was #234434 */
        --color-accent-dark: #1b4e36; /* Oct 2026: green text links; between accent and deep, so it still reads as green next to ink */
        --color-rule: #d3c4ad;
        --color-rule-dark: #998b78;
        --color-dot: rgba(28, 26, 23, 0.25);
        --font-serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
        --font-sans: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
        --font-mono: "Castoro Titling", "Trajan Pro", "Times New Roman", serif;
        --font-cut: "Castoro Titling", "Trajan Pro", "Times New Roman", serif;
        /* Oct 2026: the tapering streamers were stretched to the full width, so the
           point became a long grey hairline. Replaced by a swelled rule (thickest in
           the middle, pointed at both ends) over a hairline that also thins out to
           points at the ends; drawn for a 10px box. */
        --streamers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q500 -3.3 1000 3Q500 9.3 0 3Z'/%3E%3Cpath d='M0 9.5C120 8.8 880 8.8 1000 9.5C880 10.2 120 10.2 0 9.5Z'/%3E%3C/svg%3E");
        /* The hairline alone (thinning to points at both ends), drawn for a 2px box. */
        --hairline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 2' preserveAspectRatio='none'%3E%3Cpath d='M0 1C120 .3 880 .3 1000 1C880 1.7 120 1.7 0 1Z'/%3E%3C/svg%3E");
        /* The rule over each quote: pointed at both ends, but swelling fast from the left
           and thinning slowly to the right, so it reads as heavier on the left. */
        --quote-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5C40 1.5 120 0 220 0C500 0 800 3 1000 5C800 7 500 10 220 10C120 10 40 8.5 0 5Z'/%3E%3C/svg%3E");
      }

      body {
        background-color: var(--color-cream);
        color: var(--color-ink-light);
        font-family: var(--font-serif);
        font-size: 1.0625rem;
        line-height: 1.66;
      }
      /* Oct 2026: the dotted paper fought the text. The dots now sit on their own
         fixed layer, masked so they show in the margins and fade out across the
         content column (1200px, the widest container). */
      /* Half the width the dots keep clear. Pages whose text sits in the 720px
         column (program, contact, talks) let the dots come further in. */
      body { --dots-half: 600px; }
      body.narrow { --dots-half: 430px; }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: radial-gradient(var(--color-dot) 1px, transparent 1.4px);
        background-size: 22px 22px;
        background-position: 11px 11px;
        --fade: linear-gradient(to right, #000 0, transparent calc(50% - var(--dots-half)), transparent calc(50% + var(--dots-half)), #000 100%);
        -webkit-mask-image: var(--fade);
        mask-image: var(--fade);
      }
      /* Bands of the same dots (about a row and a half) running edge to edge:
         under the nav and under the footer only.
         The dots are fixed to the viewport, so they line up with the margins.
         The band's horizontal mask is the inverse of the margin fade above, so
         the edges don't come out twice as dark. */
      body { overflow-x: clip; }
      .main-content,
      .footer {
        position: relative;
      }
      .main-content { --band-top: calc(var(--nav-height) + 10px); }
      .footer { padding-bottom: calc(var(--space-xl) + 44px); }
      .main-content::before,
      .footer::after {
        content: "";
        position: absolute;
        top: var(--band-top);
        left: calc(50% - 50vw);
        width: 100vw;
        height: 44px;
        pointer-events: none;
        background-image: radial-gradient(var(--color-dot) 1px, transparent 1.4px);
        background-size: 22px 22px;
        background-position: 11px 11px;
        background-attachment: fixed;
        -webkit-mask-image:
          linear-gradient(to right, transparent 0, #000 calc(50% - var(--dots-half)), #000 calc(50% + var(--dots-half)), transparent 100%),
          linear-gradient(to bottom, #000 50%, transparent);
        -webkit-mask-composite: source-in;
        mask-image:
          linear-gradient(to right, transparent 0, #000 calc(50% - var(--dots-half)), #000 calc(50% + var(--dots-half)), transparent 100%),
          linear-gradient(to bottom, #000 50%, transparent);
        mask-composite: intersect;
      }
      .footer::after { top: auto; bottom: 12px; }
      @media (max-width: 768px) {
        /* The home hero starts only 36px under the nav on phones: one row there. */
        .main-content::before { height: 22px; --band-top: calc(var(--nav-height) + 4px); }
      }
      strong, b { color: var(--color-ink); }
      a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

      /* Header */
      .navbar { background: var(--color-cream); border-bottom: 1px solid var(--color-ink); }
      .navbar.scrolled { box-shadow: none; }
      .logo-text { font-family: var(--font-cut); font-size: 0.95rem; letter-spacing: 0.3em; }
      .nav-link { font-family: var(--font-cut); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.18em; color: var(--color-ink); }
      .nav-link::after { background: var(--color-accent); }
      .nav-dropdown-menu { background: var(--color-cream); border: 1px solid var(--color-ink); }
      /* The menu sits 12px below "Program"; bridge that gap so the menu stays open
         while the pointer moves down to it, and open it for keyboard focus too. */
      .nav-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
      .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; }
      .nav-dropdown-item { font-family: var(--font-serif); font-size: 0.95rem; color: var(--color-ink); }
      .nav-dropdown-item:hover { background: rgba(237, 223, 201, 0.8); color: var(--color-accent); }
      /* Splits the three offerings from the past-seminar pages below them. */
      .nav-dropdown-divider { border: 0; border-top: 1px solid var(--color-rule-dark); margin: var(--space-sm) var(--space-md); }
      @media (max-width: 768px) {
        .nav-links { background: var(--color-cream); border-bottom: 1px solid var(--color-ink); }
      }

      /* Type */
      .hero::before { display: none; }
      .hero-meta,
      .section-title,
      .key-info-label,
      .mentors-section h4,
      .affiliation-label,
      .step-num,
      .era {
        font-family: var(--font-cut);
        font-weight: 400;
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
      }
      /* Every section opens on a swelled rule over a hairline. */
      .section-title::before {
        content: "";
        display: block;
        height: 10px;
        margin-bottom: 26px;
        background: var(--color-ink);
        -webkit-mask: var(--streamers) 0 0 / 100% 100% no-repeat;
        mask: var(--streamers) 0 0 / 100% 100% no-repeat;
      }
      /* The contact page is short and plain: tapered hairlines between its sections. */
      /* Contact: a short quote rule (as above the home page quotes) instead of a full-width line. The first one stays hidden. */
      #page-contact .section-title::before { width: min(450px, 100%); height: 3px; margin-bottom: 22px; background: var(--color-rule-dark); -webkit-mask: var(--quote-rule) 0 0 / 100% 100% no-repeat; mask: var(--quote-rule) 0 0 / 100% 100% no-repeat; }
      /* ...except the first one on a page, which would sit right under the nav's own rule. */
      .page > .section:first-child > .container > .section-title:first-child::before { display: none; }
      .headline {
        font-family: var(--font-cut);
        font-weight: 400;
        font-size: clamp(1.95rem, 4.4vw, 3.4rem);
        line-height: 1.1;
        letter-spacing: 0.05em;
        color: var(--color-ink);
        text-wrap: balance;
      }
      .headline em {
        display: inline-block;
        margin-top: 0.12em;
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 300;
        font-size: 1.25em;
        letter-spacing: -0.015em;
        color: var(--color-accent-deep); /* Oct 2026: green, like the italic line in the home hero */
      }
      .subheadline { font-family: var(--font-serif); font-weight: 400; color: var(--color-ink-light); }
      .section-heading {
        font-family: var(--font-cut);
        font-weight: 400;
        font-size: clamp(1.6rem, 3.4vw, 2.6rem);
        line-height: 1.12;
        letter-spacing: 0.045em;
        color: var(--color-ink);
        text-wrap: balance;
      }
      .body-text,
      .mentors-list,
      .mentors-intro,
      .team-intro,
      .key-info-value,
      .differ {
        font-family: var(--font-serif);
        font-size: 1.0625rem;
        line-height: 1.7;
        color: var(--color-ink-light);
      }
      .differ { color: var(--color-accent); font-size: 1.125rem; }
      .subsection-title { font-family: var(--font-cut); font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink); }
      em, i, cite { font-style: italic; }

      /* Buttons: the one heavy slab (green, cut on the A's diagonal) and thin text links */
      .btn { font-family: var(--font-cut); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.2em; }
      .btn--primary {
        color: var(--color-cream);
        background: linear-gradient(122deg, transparent 11px, var(--color-accent) 11.5px);
        padding: 15px 26px 14px 30px;
      }
      .btn--primary:hover { color: var(--color-cream); background: linear-gradient(122deg, transparent 11px, var(--color-accent-deep) 11.5px); }
      .btn--outline {
        background: none;
        border: 0;
        border-bottom: 1px solid var(--color-ink);
        padding: 4px 0 3px;
        color: var(--color-ink);
      }
      .btn--outline:hover { background: none; color: var(--color-accent); border-bottom-color: var(--color-accent); }
      /* Green text links (secondary actions that lead somewhere to read) */
      .btn--accent { color: var(--color-accent-dark); border-bottom-color: var(--color-accent-dark); }
      .btn--accent:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
      .hero-actions { align-items: center; gap: var(--space-md) var(--space-lg); }
      .hero-deadline { font-family: var(--font-serif); font-size: 1rem; color: var(--color-ink); }

      /* In-copy links: the one green */
      .body-text a, .mentors-intro a, .fact span a, .join-list span a, .feature-card p a,
      .note-box p a, .hero-deadline a, .subheadline a, .q-card small a, .talk-meta a,
      .door a, .key-info-deadline a {
        color: var(--color-accent);
        border-bottom: 1px solid currentColor;
        text-decoration: none;
      }
      /* Name links are underlined in the highlight green, like the other in-copy links. */
      .mentor-info h4 a, .team-card h4 a, .mentors-list a { border-bottom-color: var(--color-accent); }
      .mentor-info h4 a:hover, .team-card h4 a:hover, .mentors-list a:hover { color: var(--color-accent); }

      /* Rules instead of filled boxes */
      .divider, .divider--accent {
        height: 10px;
        background: var(--color-ink);
        -webkit-mask: var(--streamers) 0 0 / 100% 100% no-repeat;
        mask: var(--streamers) 0 0 / 100% 100% no-repeat;
      }
      .feature-card,
      .involvement-card,
      .team-card--detailed,
      .q-card {
        background: none;
        border: 0;
        border-top: 1px solid var(--color-ink);
        padding: var(--space-md) 0 0;
      }
      .feature-card:hover, .involvement-card:hover, .q-card:hover { border-color: var(--color-ink); }
      /* Mentors on the team page: no rule over each; with most names underlined it got too dense. */
      .team-grid--mentors .team-card--detailed { border-top: 0; }
      .team-grid--mentors { row-gap: var(--space-sm); } /* tighter rows now the rules are gone */
      /* Oct 2026: tighter again (about a quarter, then a tenth of that given back): less padding
         over each name, a small gap under the affiliation, and the names on a shorter line. */
      .team-grid--mentors { row-gap: 8px; }
      .team-grid--mentors .team-card--detailed { padding-top: 9px; }
      .team-grid--mentors .team-card h4 { line-height: 1.4; }
      .team-grid--mentors .team-card-org { margin-bottom: 2px; }
      /* The approach page styles .q-card in its own <style>, which loads later; win on specificity. */
      body .q-card { background: none; border: 0; border-top: 1px solid var(--color-ink); padding: var(--space-md) 0 0; }
      body .q-card:hover { border-color: var(--color-accent); }
      .feature-card h4, .involvement-card h5 {
        font-family: var(--font-cut);
        font-weight: 400;
        font-size: 0.95rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-ink);
      }
      .feature-card p, .involvement-card p, .step p, .stat-label, .note-box p, .team-card-bio, .mentor-desc, .join-list span {
        color: var(--color-ink-light);
      }
      .q-card .q { font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--color-ink); }
      .door { border-top-color: var(--color-rule); }

      /* Quotes: a short rule over each that thins out to the right, italic text, carved caption */
      .testimonial-card {
        background: none;
        border: 0;
        padding: 0;
        gap: var(--space-sm);
      }
      .testimonial-card::before {
        content: "";
        display: block;
        width: 42%;
        height: 3px;
        margin-bottom: var(--space-sm);
        background: var(--color-rule-dark);
        -webkit-mask: var(--quote-rule) 0 0 / 100% 100% no-repeat;
        mask: var(--quote-rule) 0 0 / 100% 100% no-repeat;
      }
      .testimonial-card blockquote { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 1.25rem; line-height: 1.5; }
      .testimonial-card figcaption, .photo-figure figcaption, .talk-meta, .team-card-org, .mentor-org, .stat-note, .team-card-role {
        font-family: var(--font-cut);
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
      }
      .callout {
        background: none;
        border-left: 2px solid var(--color-accent);
        padding: 0 0 0 var(--space-lg);
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(1.35rem, 2.6vw, 1.9rem);
        line-height: 1.38;
        color: var(--color-ink);
      }
      .callout em { color: var(--color-ink); font-style: italic; }

      /* Program page */
      .program-nav { border-bottom: 1px solid var(--color-ink); }
      .program-nav-item { font-family: var(--font-cut); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted); }
      .program-nav-item.active, .program-nav-item:hover { color: var(--color-ink); }
      .key-info { background: none; border: 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); padding: var(--space-md) 0; }
      .key-info-value { color: var(--color-ink); }
      .key-info-deadline { font-family: var(--font-serif); color: var(--color-accent); border-top-color: var(--color-rule); }
      .mentors-section { background: none; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-ink); }
      .note-box { border-left: 2px solid var(--color-accent); }
      .activities-list span { background: none; border-color: var(--color-rule-dark); font-family: var(--font-cut); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }

      /* Team and mentors: portraits cut on the A's diagonal instead of circles */
      /* Oct 2026: portraits 120px -> 176px, and five columns on desktop (the core team is five people). */
      .team-grid:not(.team-grid--mentors) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
      .team-card:not(.team-card--detailed) .team-card-image { width: 176px; height: 176px; max-width: 100%; }
      /* A light warm tint to even out the colour of photos taken in very different light. */
      img.team-card-image, .mentor-img img { filter: grayscale(0.4) sepia(0.25) contrast(0.96); }
      /* More room before "Visiting Mentors" (was --space-2xl). */
      /* More room before "Visiting Mentors": 1.4x the earlier 96px (was --space-2xl, then x1.5). */
      .team-section + .team-section { margin-top: calc(var(--space-2xl) * 2.1); }
      /* The two notes under "Visiting Mentors" sit closer to each other and to the grid. */
      #page-team .team-section .differ { margin-bottom: 20px; }
      #page-team .team-section .team-intro { margin-bottom: 28px; }

      .team-card-image, .mentor-img {
        border-radius: 0;
        background: rgba(211, 196, 173, 0.6);
        clip-path: polygon(0 22%, 18% 0, 100% 0, 100% 100%, 0 100%);
        font-family: var(--font-cut);
        color: var(--color-ink-muted);
      }
      .team-card h4, .mentor-info h4 { font-family: var(--font-serif); font-weight: 500; color: var(--color-ink); }
      .team-card-org, .mentor-org { color: var(--color-ink-muted); }
      .mentors-showcase { background: none; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
      .mentor-card { background: none; border: 0; border-top: 1px solid var(--color-rule); padding: var(--space-md) 0; }
      .affiliation-logos { background: none; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
      .org-badge, .org-tag { background: none; border-color: var(--color-rule-dark); font-family: var(--font-cut); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }

      /* Steps, stats and talks */
      .step, .stat { border-top: 1px solid var(--color-ink); }
      .step h4 { font-family: var(--font-serif); font-weight: 500; color: var(--color-ink); }
      .step-num { color: var(--color-accent); }
      .stat-num { font-family: var(--font-cut); font-weight: 400; color: var(--color-accent); letter-spacing: 0.02em; }
      .talk { border-bottom-color: var(--color-rule); }
      .talk-title { font-family: var(--font-serif); font-weight: 500; color: var(--color-ink); }
      .join-list li { border-bottom-color: var(--color-rule); }
      .join-list b { font-family: var(--font-serif); font-weight: 500; color: var(--color-ink); }
      /* One size for the label and the text after it, as in the body copy. */
      .join-list b, .join-list span { font-size: 1.0625rem; line-height: 1.66; }

      /* Contact */
      .contact-info h3 { font-family: var(--font-cut); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink); }
      .contact-email {
        font-family: var(--font-serif);
        color: var(--color-accent);
        background: none;
        border: 0;
        border-bottom: 1px solid var(--color-accent);
        padding: 4px 0;
      }
      .contact-email:hover { background: none; color: var(--color-accent-deep); }

      /* Photos keep the A's cut on one corner */
      .photo-figure img { clip-path: polygon(0 clamp(40px, 8vw, 120px), clamp(26px, 5vw, 76px) 0, 100% 0, 100% 100%, 0 100%); filter: saturate(0.8) sepia(0.06); }

      /* Footer */
      .footer { border-top: 1px solid var(--color-ink); margin-top: var(--space-2xl); }
      .footer-copy, .footer-links { font-family: var(--font-cut); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-muted); }
      .footer-links a { color: var(--color-ink-muted); border-bottom: 0; }
      .footer-links a:hover { color: var(--color-accent); }

      /* Oct 2026: Castoro Titling ships in one weight only, and at label sizes its
         hairline strokes were hard to read. A copy of each letter shifted 0.4px
         sideways thickens the upright strokes; unlike a text stroke, it leaves the
         serifs and horizontals sharp. Large headings are left alone. */
      .logo-text, .nav-link, .btn, .subsection-title, .program-nav-item,
      .hero-meta, .section-title, .key-info-label, .mentors-section h4, .affiliation-label, .step-num, .era,
      .feature-card h4, .involvement-card h5, .activities-list span, .org-badge, .org-tag, .contact-info h3,
      .testimonial-card figcaption, .photo-figure figcaption, .talk-meta, .team-card-org, .mentor-org, .stat-note, .team-card-role,
      .footer-copy, .footer-links, #page-program .faq-group,
      .home .label, .home .facts dt, .home .testimony figcaption, .home .offer h3, .home .offer .meta,
      .home .photo figcaption, .home .year .when, .home .rhythm h3, .home .mentors span, .home .for h3 {
        text-shadow: 0.4px 0 0 currentColor;
      }

      /* Applications switch (see /apps.js): only one of each pair shows. With no
         script, the open version shows. */
      [data-apps="closed"] .if-open,
      :root:not([data-apps="closed"]) .if-closed { display: none !important; }

      /* Apply in the nav: a small version of the primary button, rightmost */
      .nav-apply {
        display: inline-block;
        font-family: var(--font-cut);
        font-size: 0.74rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: 0.4px 0 0 currentColor;
        color: var(--color-cream);
        background: linear-gradient(122deg, transparent 7px, var(--color-accent) 7.5px);
        padding: 8px 14px 7px 17px;
        margin-top: 4px; /* text sits on the same baseline as the other nav links */
      }
      .nav-apply:hover { color: var(--color-cream); background: linear-gradient(122deg, transparent 7px, var(--color-accent-deep) 7.5px); }

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

      /* ---- Oct 2026: program page pass ---- */
      /* No lone item on a last row. Key facts and involvement go 2 x 2; the three
         seminar cards become rows (title left, text right); the three quotes stack. */
      #page-program .key-info-grid,
      #page-program .involvement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
      #page-program .feature-grid--three { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
      #page-program .feature-grid--three .feature-card { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-lg); }
      #page-program .testimonial-grid--compact { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
      #page-program .testimonial-grid--compact .testimonial-card::before { width: 180px; }
      #page-program .testimonial-grid--compact blockquote { font-size: 1.0625rem; line-height: 1.6; }
      @media (max-width: 520px) {
        #page-program .key-info-grid,
        #page-program .involvement-grid,
        #page-program .feature-grid--three .feature-card { grid-template-columns: minmax(0, 1fr); }
      }
      /* Fewer capitals: card titles are serif in normal case (as on the approach
         page's questions). Capitals stay for labels and subsection titles. */
      #page-program .feature-card h4,
      #page-program .involvement-card h5 {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        text-shadow: none;
        line-height: 1.3;
        margin-bottom: var(--space-xs);
      }
      /* Card text at the body copy's size and colour. */
      #page-program .feature-card p,
      #page-program .involvement-card p,
      #page-program .note-box p { font-size: 1.0625rem; line-height: 1.66; color: var(--color-ink-light); }
      #page-program .involvement-card { padding: var(--space-md) 0 0; }
      /* Activities: one dot-separated line, like the mentor lists, not boxed tags. */
      #page-program .activities-list { display: block; font-size: 1.0625rem; line-height: 1.7; color: var(--color-ink-light); }
      #page-program .activities-list span {
        display: inline;
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--font-serif);
        font-size: inherit;
        letter-spacing: 0;
        text-transform: none;
        text-shadow: none;
        color: inherit;
      }
      /* Notes: a plain paragraph under a short quote rule, as on the contact page. */
      #page-program .note-box { border-left: 0; padding: 0; }
      #page-program .note-box::before {
        content: "";
        display: block;
        width: 180px;
        height: 3px;
        margin-bottom: var(--space-md);
        background: var(--color-rule-dark);
        -webkit-mask: var(--quote-rule) 0 0 / 100% 100% no-repeat;
        mask: var(--quote-rule) 0 0 / 100% 100% no-repeat;
      }
      /* Dot-separated lists (mentors, fellows, activities). Each item is one unit that
         never splits across lines. The dot leads each item; the list is shifted left
         by one dot's width and that strip is clipped, so a dot that would start a
         line is hidden and no line ends or starts with one. */
      #page-program .dot-list, #page-retrospective .dot-list { margin-left: -0.6em; clip-path: inset(0 0 0 0.6em); }
      #page-program .dot-list > span, #page-retrospective .dot-list > span { white-space: nowrap; }
      #page-program .dot-list > span::before, #page-retrospective .dot-list > span::before {
        content: "\00b7";
        display: inline-block;
        width: 0.85em;
        margin-left: -0.25em; /* back over the space between items, so the dot sits centred */
        text-align: center;
        text-transform: none;
      }
      /* No rules between the three seminar rows; only the one above them. */
      #page-program .feature-grid--three .feature-card + .feature-card { border-top: 0; padding-top: 0; }
      /* "Write to us" on a line of its own. */
      #page-program .note-box p + p { margin-top: var(--space-xs); }
      /* The quotes and the 2026 material below them open on the section rule. */
      #page-program .subsection-title--break { margin-top: var(--space-2xl); }
      #page-program .subsection-title--break::before {
        content: "";
        display: block;
        height: 10px;
        margin-bottom: 26px;
        background: var(--color-ink);
        -webkit-mask: var(--streamers) 0 0 / 100% 100% no-repeat;
        mask: var(--streamers) 0 0 / 100% 100% no-repeat;
      }
      /* Retrospective hero: in the narrow column the three buttons don't fit one row,
         so the green one gets its own and the two text links sit together below it. */
      .hero-actions--stacked::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
      .hero-actions--stacked .btn--outline { order: 2; }
      /* Seminar row titles a step down from the card titles; the deadline line a step up. */
      #page-program .feature-grid--three .feature-card h4 { font-size: 1.125rem; }
      #page-program .key-info-deadline { font-size: 1rem; }
      #page-program .nowrap { white-space: nowrap; }
      #page-program .key-info-deadline a { white-space: nowrap; }
      /* Footer on phones: the links in two columns (contact, support | retrospective,
         talks), with the copyright below them. */
      @media (max-width: 768px) {
        .footer { padding-left: 1.25rem; padding-right: 1.25rem; } /* the page's own gutter */
        .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
        .footer-links { order: 1; display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start; gap: 12px calc(2 * var(--space-lg)); }
        .footer-copy { order: 2; line-height: 1.9; }
      }
      /* Headings one level under the page title (team: Core Team, Visiting Mentors;
         contact: its section headings). On phones the page title shrinks to 1.6rem,
         so these step down too, to keep a clear difference. */
      .section-heading--sub { font-size: 1.5rem; }
      @media (max-width: 768px) { .section-heading--sub { font-size: 1.2rem; } }
      /* Program: subsection titles ("Ways to take part") a step above the card titles under them. */
      #page-program .subsection-title { font-size: 1.2rem; }
      #page-program .feature-card h4, #page-program .involvement-card h5 { font-size: 1.125rem; }
      @media (max-width: 768px) { #page-team .team-card h4 { font-size: 1.125rem; } } /* names under the 1.2rem section headings */
      @media (max-width: 768px) { .contact-info h3 { font-size: 0.95rem; } } /* under the 1.2rem section headings */
      /* Seminar FAQ: questions in small groups, each one a disclosure on a hairline. The
         questions are numbered in Roman numerals in the carved capitals. */
      #page-program .faq-group { font-family: var(--font-cut); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink); margin: var(--space-lg) 0 var(--space-xs); }
      #page-program .subsection-title + .faq-group { margin-top: var(--space-md); }
      #page-program #faq { scroll-margin-top: 110px; } /* clear of the sticky nav when linked as /program/#faq */
      .faq { border-top: 1px solid var(--color-rule); }
      .faq details { border-bottom: 1px solid var(--color-rule); }
      .faq summary {
        list-style: none;
        cursor: pointer;
        position: relative;
        padding: 14px 0 14px 3.4em;
        font-family: var(--font-serif);
        font-size: 1.0625rem;
        font-weight: 500;
        line-height: 1.5;
        color: var(--color-ink);
      }
      .faq summary::-webkit-details-marker { display: none; }
      .faq summary:hover { color: var(--color-accent); }
      .faq summary:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 2px; }
      .faq .faq-n {
        position: absolute;
        left: 0;
        top: 14px;
        width: 2.6em;
        text-align: center;
        font-family: var(--font-cut);
        font-size: 0.85rem;
        font-weight: 400;
        letter-spacing: 0.06em;
        line-height: 1.6rem;
        color: var(--color-rule-dark);
        transition: color 0.2s;
      }
      .faq summary:hover .faq-n, .faq details[open] .faq-n { color: var(--color-accent); }
      .faq details > .body-text { padding: 0 0 16px 3.4em; }
      @media (max-width: 600px) {
        .faq summary { padding-left: 2.9em; }
        .faq .faq-n { width: 2.3em; }
        .faq details > .body-text { padding-left: 0; } /* answers use the full width on phones */
      }
      .faq details { scroll-margin-top: 110px; } /* a jump to one question (#faq-xv) clears the sticky nav */