/* Clear typography, photographic detail, quiet controls; the shader is the visual centre. */
:root { --ink: #1d232d; --blue: #243455; --muted: #4e5862; --line: #25364b26; }
.site-header { top: 18px; width: calc(100% - 64px); max-width: 1432px; border-radius: 0; }
.site-header.is-scrolled { background: #ffffffb8; backdrop-filter: blur(12px); }
.site-nav a { font-size: 10px; letter-spacing: .08em; }
.header-shell { min-height: 60px; }
.home-edited .hero-shell { width: min(calc(100% - 128px), 1296px); min-height: min(860px, 94svh); padding-top: 152px; padding-bottom: 70px; grid-template-columns: 1.3fr .7fr; row-gap: 42px; }
.home-edited .hero-panel h1 { font-size: clamp(116px, 14.4vw, 205px); letter-spacing: -.085em; margin-top: 30px; }
.home-edited .hero-copy { font-size: 18px; line-height: 1.6; max-width: 42ch; margin-top: 28px; }
.hero .eyebrow { font-size: 11px; line-height: 1.65; letter-spacing: .1em; }
.home-edited .hero-actions { margin-top: 26px; }
.button-dark { background: #243455; }
.hero-margin-note { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; text-align: right; font-size: 11px; letter-spacing: .04em; line-height: 1.9; }
.hero-margin-note span { display: block; font-size: 14px; letter-spacing: 0; }
.home-edited .hero-event-teaser { grid-column: 1; margin-top: 0; padding: 12px 0; border-left: 0; border-top: 1px solid #24345550; background: transparent; gap: 24px; }
.home-edited .hero-event-teaser:hover { background: #ffffff30; }
.home-edited .hero-event-teaser time { font-size: 11px; }
.home-edited .hero-event-teaser strong { font-size: 14px; }
.home-publication { width: calc(100% - 48px); }
.home-publication::before { background: #ffffff91; backdrop-filter: blur(6px); }
.home-edited .site-section { max-width: 1424px; padding: 76px 64px; }
.home-edited .section-heading { margin-bottom: 40px; }
.home-edited .section-heading h2 { font-size: clamp(32px, 3.2vw, 46px); }
.home-edited .section-heading .text-link { font-size: 10px; }
.upcoming-event { grid-template-columns: 230px minmax(0, 1fr) 225px; gap: 28px 40px; }
.upcoming-event-label { padding-bottom: 12px; }
.upcoming-event-label p { font-size: 11px; }
.upcoming-event-label > p:last-child { font-size: 18px; }
.upcoming-event-title h3 { font-size: clamp(35px, 3.6vw, 53px); line-height: 1.08; }
.upcoming-event-title p { font-size: 15px; line-height: 1.65; }
.upcoming-event-portrait { max-width: none; }
.upcoming-event-portrait .portrait-crop { aspect-ratio: 4 / 5; }
.upcoming-event-portrait figcaption { margin-top: 10px; font-size: 8px; letter-spacing: .08em; }
.upcoming-event-facts { font-size: 13px; line-height: 1.7; }
.upcoming-event-facts h4 { font-size: 11px; }
.event-actions { gap: 12px; }
.event-actions a { font-size: 10px; }
.calendar-picker { position: relative; font-size: 11px; }
.calendar-picker summary { padding: 10px 0; list-style: none; cursor: pointer; font-weight: 600; }
.calendar-picker summary::-webkit-details-marker { display: none; }
.calendar-picker[open] { background: #ffffff80; padding: 0 10px; margin-left: -10px; }
.calendar-picker a { display: block; padding: 10px 0; }
.eventfrog-primary { display: flex; padding: 12px 16px!important; background: #243455!important; color: white!important; justify-content: space-between; text-decoration: none; }
.programme-archive-heading { margin-top: 64px; }
.editorial-list .editorial-row summary { min-height: 120px; padding-top: 25px; padding-bottom: 25px; }
.editorial-row-title { font-size: clamp(24px, 2.3vw, 32px); }
.programme-talk-subtitle { font-size: 14px; max-width: 67ch; line-height: 1.5; }
.home-edited .home-recordings { padding-top: 60px; }
#archive .section-heading { align-items: end; margin-bottom: 24px; }
#archive-title { max-width: 16ch; line-height: 1.1; }
.archive-intro { margin-top: 16px; max-width: 42ch; font-size: 14px; line-height: 1.6; color: var(--muted); }
.recording-carousel-controls { margin-bottom: 24px; }
.carousel-position { font-size: 10px; letter-spacing: .09em; }
.carousel-arrows button { width: 44px; height: 44px; font-size: 23px; background: #ffffff50; border-color: #24345566; }
.recording-rail { grid-auto-columns: calc((100% - 64px) / 3); gap: 32px; align-items: start; padding-bottom: 24px; }
.recording-choice { gap: 10px; padding-bottom: 18px; position: relative; }
.recording-choice > .recording-art { width: 100%; height: 290px; position: relative; overflow: hidden; display: block; background: #d9ded9; margin-bottom: 10px; }
.recording-art:not(.original-art) .talk-thumbnail { position: absolute; height: 165%; width: auto; max-width: none; right: -2%; top: -21%; margin: 0; aspect-ratio: auto; object-fit: contain; }
.recording-art.portrait-richards .talk-thumbnail { height: 178%; top: -25%; right: -1%; }
.recording-art.portrait-prinz .talk-thumbnail { height: 175%; top: -24%; right: -1%; }
.recording-art.original-art .talk-thumbnail { height: 100%; width: 100%; object-fit: cover; margin: 0; }
.recording-choice .preview-play { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 10px; align-items: center; color: #fff; font-size: 11px; text-shadow: 0 1px 6px #000; }
.preview-play > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffffaa; border-radius: 50%; background: #18232850; backdrop-filter: blur(8px); font-size: 20px; }
.preview-play > span:last-child { opacity: 0; transform: translateX(-5px); transition: opacity 180ms, transform 180ms; }
.recording-choice:hover .preview-play > span:last-child, .recording-choice:focus-visible .preview-play > span:last-child, .recording-choice[aria-expanded=true] .preview-play > span:last-child { opacity: 1; transform: none; }
.recording-choice:hover .talk-thumbnail { filter: none; }
.recording-choice .recording-topic { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; color: var(--blue); }
.recording-choice strong { font-size: clamp(22px, 2.1vw, 29px); letter-spacing: -.035em; line-height: 1.18; -webkit-line-clamp: 3; }
.recording-choice > span:not(.recording-art):not(.recording-topic) { font-size: 12px; }
.recording-choice .recording-date { font-size: 10px; margin-top: 4px; }
.recording-choice[aria-expanded=true] { border-color: #243455; }
.recording-choice[aria-expanded=true] .preview-play > span:first-child { background: #243455; }
.recording-carousel.is-ready .talk-row[open] { padding: 32px; background: #ffffff59; border: 0; margin-top: 28px; }
.recording-carousel.is-ready .talk-row[open] summary { padding-bottom: 24px; }
.recording-carousel.is-ready .talk-row[open] strong { font-size: clamp(25px, 3vw, 38px); }
.recording-context { gap: 64px; margin-top: 40px; }
.recording-context h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.recording-context p { font-size: 15px; line-height: 1.8; }
.about-introduction { gap: 80px; }
@media (max-width: 1100px) {
 .upcoming-event { grid-template-columns: 180px 1fr; gap: 28px; }
 .upcoming-event-facts { grid-column: 2; }
 .recording-choice > .recording-art { height: 245px; }
 .site-nav a { font-size: 9px; }
}
@media (max-width: 760px) {
 .site-header { width: calc(100% - 24px); top: 12px; }
 .home-edited .hero-shell { width: calc(100% - 48px); min-height: 740px; padding-top: 140px; padding-bottom: 56px; grid-template-columns: 1fr; gap: 30px; }
 .home-edited .hero-panel h1 { font-size: clamp(108px, 24vw, 170px); }
 .home-edited .hero-copy { font-size: 16px; max-width: 34ch; }
 .hero-margin-note { display: none; }
 .home-edited .hero-event-teaser { flex-wrap: wrap; gap: 8px 16px; }
 .home-edited .hero-event-teaser strong { font-size: 13px; }
 .home-publication { width: calc(100% - 16px); }
 .home-edited .site-section { padding: 52px 24px; }
 .home-edited .section-heading { gap: 20px; align-items: start; }
 .upcoming-event { grid-template-columns: 104px minmax(0, 1fr); gap: 24px 18px; }
 .upcoming-event-title h3 { font-size: 29px; }
 .upcoming-event-title p { font-size: 13px; }
 .upcoming-event-facts { grid-column: 1 / -1; }
 .upcoming-event-label > p:last-child { font-size: 15px; }
 .event-actions { align-items: start; }
 .editorial-list .editorial-row summary { min-height: 110px; }
 .editorial-row-title { font-size: 24px; }
 .programme-talk-subtitle { font-size: 13px; }
 #archive .section-heading { flex-direction: column; align-items: start; }
 #archive-title { font-size: 36px; }
 .recording-rail { grid-auto-columns: 82%; gap: 22px; }
 .recording-choice > .recording-art { height: 290px; }
 .recording-choice strong { font-size: 26px; }
 .preview-play > span:last-child { opacity: 1; transform: none; }
 .recording-carousel.is-ready .talk-row[open] { padding: 22px 0; background: transparent; }
 .recording-context { gap: 30px; }
 .about-introduction { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .preview-play > span:last-child { transition: none; } }
/* Fixed crop windows keep lettering outside the portrait at every viewport. */
.recording-choice > .recording-art { height: auto; aspect-ratio: 1 / 1.18; }
.recording-art:not(.original-art) .talk-thumbnail { height: auto; max-width: none; top: 0; right: 0; object-fit: initial; width: 282.353%; transform: translateY(-25%); }
.recording-art.portrait-richards .talk-thumbnail { width: 338.03%; transform: translateY(-31%); right: 0; }
.recording-art.portrait-prinz .talk-thumbnail { width: 290.909%; transform: translateY(-24%); right: 0; }
.recording-art.original-art .talk-thumbnail { height: 100%; width: 100%; object-fit: cover; }
@media (min-width: 1200px) { .recording-choice > .recording-art { aspect-ratio: 1 / 1.05; } }

/* Higher-resolution, unletterboxed source artwork for the three featured portraits. */
.recording-art:not(.original-art) .talk-thumbnail { transform: translateY(-16.67%); }
.recording-art.portrait-richards .talk-thumbnail { transform: translateY(-24.67%); }
.recording-art.portrait-prinz .talk-thumbnail { transform: translateY(-15.33%); }
@media (min-width: 1200px) {
 .recording-rail { grid-auto-columns: calc((100% - 80px) / 3.35); gap: 28px; }
}

/* Speaker and portrait share one row; the full lecture title reads below on phones. */
@media (max-width: 760px) {
  [data-upcoming-event] .upcoming-event-portrait { grid-column: 1; grid-row: 2; }
  [data-upcoming-event] .upcoming-event-facts { grid-column: 2; grid-row: 2; align-self: center; }
  [data-upcoming-event] .upcoming-event-title { grid-column: 1 / -1; grid-row: 3; }
  [data-upcoming-event] .upcoming-event-title h3 { max-width: none; }
}