/* Talks page (/conferences/). A standalone page with the site frame and its own 3D stage. */
/* Layout: the studio site's frame (fixed nav, black ground, DM Sans, the shared footer in footer.css) around a page with its own voice:
   the site's STIX Two Text headlines in white with one crimson accent for emphasis (a metal sheen that moves as the
   words scroll past), and photographs that first appear as data. Other colour belongs to data and artwork, in its own
   palette: the globe, the audience's answers and the pictures. A 3D stage behind the page carries the globe of past talks, the live Acclamor room and the archive lift. */
:root {
  color-scheme: dark;
  --bg: #080808;
  --panel: #111112;
  --ink: #FAFAFA;
  --ink-2: rgba(250, 250, 250, 0.66);
  --ink-3: rgba(250, 250, 250, 0.42);
  --rule: rgba(250, 250, 250, 0.13);
  --mark: #FAFAFA;
  /* One accent, a crimson red, used sparingly: emphasis in headlines, small labels and lines. */
  --accent: #D64553;
  /* Data colours, kept apart from the accent so answers stay easy to tell apart: amber, sky, coral and a warm white. */
  --data-1: #F2C27B;
  --data-2: #84D8FF;
  --data-3: #EFAD9C;
  --data-4: #E8E8E4;
  --display: "STIX Two Text", Georgia, serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --section-y: clamp(6rem, 11vw, 10rem);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.container { position: relative; max-width: 1320px; margin-inline: auto; padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.01em; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
/* The accent as metal: a sheen built from the accent colour, so it works for any colour a visitor picks. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 em, h2 em {
    padding-inline: 0.04em 0.14em;
    margin-inline: -0.04em -0.14em;
    background: linear-gradient(105deg,
      color-mix(in oklab, var(--accent) 72%, #000) 0%, var(--accent) 28%, color-mix(in oklab, var(--accent) 60%, #fff) 44%,
      var(--accent) 56%, color-mix(in oklab, var(--accent) 74%, #000) 72%, color-mix(in oklab, var(--accent) 78%, #fff) 100%) 30% 50% / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
/* The sheen slides across each phrase as it scrolls through the screen. Decorative, so browsers without scroll timelines keep a still sheen. */
@keyframes sheen { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    h1 em, h2 em {
      animation: sheen linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Stage */
#stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#css3d { position: absolute; inset: 0; overflow: hidden; }
main, footer { position: relative; z-index: 1; }

/* Site nav, as on kirellbenzi.com */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-block: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.5rem; transition: padding 500ms ease, background-color 500ms ease, border-color 500ms ease; border-bottom: 1px solid transparent; }
.nav.is-scrolled { padding-block: calc(1rem + env(safe-area-inset-top, 0px)) 1rem; background: rgba(8, 8, 8, 0.82); border-bottom-color: rgba(250, 250, 250, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2rem; }
.nav-brand { width: 2rem; height: 2rem; display: inline-flex; color: var(--ink); }
.nav-brand svg { width: 1.72rem; height: 1.72rem; }
.nav-links { display: flex; gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav-links a { position: relative; color: rgba(250, 250, 250, 0.62); text-decoration: none; font-size: 0.92rem; }
.nav-links a.active, .nav-links a:hover { color: var(--ink); }
/* The current page: its underline in the accent. */
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.45rem; height: 2px; background: var(--accent); }
/* More: opens the pages that are not in the main row (Gallery, Writing, Experiments). On phones they are listed like the others. */
.nav-more { position: relative; }
.nav-more-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border: 0; background: none; color: rgba(250, 250, 250, 0.62); font: inherit; font-size: 0.92rem; cursor: pointer; transition: color 220ms ease; }
.nav-more-toggle::after { content: ""; width: 0.3rem; height: 0.3rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 220ms ease; }
.nav-more:hover .nav-more-toggle, .nav-more:focus-within .nav-more-toggle, .nav-more:has(.active) .nav-more-toggle { color: var(--ink); }
.nav-more:hover .nav-more-toggle::after, .nav-more:focus-within .nav-more-toggle::after { transform: translateY(0.08rem) rotate(225deg); }
.nav-more:has(.active) .nav-more-toggle { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.5rem; }
.nav-more-list { position: absolute; top: 100%; left: 50%; display: grid; min-width: 9.5rem; margin: 0; padding: 0.85rem 0 0; list-style: none; opacity: 0; pointer-events: none; transform: translate(-50%, -0.25rem); transition: opacity 180ms ease, transform 180ms ease; }
.nav-more-list::before { content: ""; position: absolute; inset: 0.55rem 0 0; z-index: -1; background: rgba(8, 8, 8, 0.92); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-more:hover .nav-more-list, .nav-more:focus-within .nav-more-list { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-more-list a { display: block; padding: 0.58rem 0.9rem; white-space: nowrap; }
.nav-more-list a.active::after { display: none; }
/* Contact: a small outlined button on the right. On phones it is the last item of the menu instead. */
.nav-contact { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 0.4rem 0.95rem; border: 1px solid rgba(250, 250, 250, 0.2); border-radius: 0.25rem; color: var(--ink); font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease; }
.nav-contact:hover { background: rgba(250, 250, 250, 0.05); border-color: rgba(250, 250, 250, 0.4); transform: translateY(-1px); }
.nav-contact.active { background: rgba(250, 250, 250, 0.06); border-color: var(--accent); }
.nav-links-contact { display: none; }
.nav-toggle { display: none; justify-self: end; width: 42px; height: 42px; padding: 0 0.75rem; flex-direction: column; justify-content: center; gap: 5px; border: 1px solid rgba(250, 250, 250, 0.2); border-radius: 0.25rem; background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: 100%; height: 1px; background: var(--ink); transition: transform 220ms ease; }
.nav.is-open .nav-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; grid-column: 3; grid-row: 1; }
  .nav.is-open { background: rgba(8, 8, 8, 0.97); transition: none; }
  .nav.is-open .nav-links { display: flex; flex-direction: column; gap: 1rem; grid-column: 1 / -1; grid-row: 2; padding-top: 1rem; }
  .nav.is-open .nav-links a { font-size: 1.1rem; }
  .nav-more-toggle, .nav-contact { display: none; }
  .nav.is-open .nav-links-contact { display: block; }
  .nav.is-open .nav-more, .nav.is-open .nav-more-list { display: contents; }
  .nav.is-open .nav-more-list { pointer-events: auto; }
  .nav.is-open .nav-more-list a { padding: 0; }
}

/* Section heads: headline left, context right. */
.section { padding-top: var(--section-y); }
.head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.2rem 4vw; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head h2 { margin: 0; font-family: var(--display); font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); line-height: 0.98; letter-spacing: -0.015em; }
.head p { margin: 0; color: var(--ink-2); font-size: 1.05rem; max-width: 30rem; }
@media (max-width: 860px) { .head { grid-template-columns: minmax(0, 1fr); } }
.veil { background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0, rgba(8, 8, 8, 0.88) 10rem, rgba(8, 8, 8, 0.95) 100%); }

/* Hero */
/* The globe lives in its own box on the right, so it never covers the menu or the title. */
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2rem 3vw; align-items: center; padding-block: 7rem 4rem; }
.hero-copy { min-width: 0; }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 0.9rem + 5.4vw, 7.2rem); line-height: 0.92; letter-spacing: -0.02em; }
.hero-meta { margin: 1.4rem 0 0; color: var(--ink-2); }
.hero-globe { width: 100%; aspect-ratio: 1; max-height: min(76svh, 46rem); }
.lede { margin: 1.6rem 0 0; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); color: var(--ink-2); max-width: 32rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin-top: 1.8rem; }
@media (max-width: 600px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 5.5rem; }
  .hero-globe { order: -1; width: min(100%, 20rem); justify-self: end; max-height: 46svh; }
}
.btn { display: inline-flex; align-items: center; padding: 0.95rem 1.35rem; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; font-size: 0.95rem; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.4rem 2.6rem; margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.facts dt { font-family: var(--display); font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.facts dd { margin: 0.4rem 0 0; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

/* Photographs as data */
.ht { position: relative; overflow: hidden; background: #070809; }
.ht img { width: 100%; height: 100%; object-fit: cover; }
.ht canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 900ms ease; }
.ht.is-developed canvas { opacity: 0; }
.ht[data-halftone="lens"] canvas { cursor: none; }

/* On stage */
.on-stage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.on-stage .main { aspect-ratio: 3 / 2; }
.side { display: grid; grid-template-rows: auto 1fr; gap: clamp(1rem, 2vw, 1.5rem); min-width: 0; }
.side .ht { aspect-ratio: 3 / 2; }
.caption { margin: 0.6rem 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.bio { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.1rem; align-content: start; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.bio img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.05); }
.bio p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.bio strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--ink); margin-bottom: 0.2rem; }
.stages { list-style: none; margin: 2.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 860px) { .on-stage { grid-template-columns: minmax(0, 1fr); } }

/* Benefits */
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2rem, 4vw, 4rem); }
.benefit { min-width: 0; }
.benefit h3 { margin: 0 0 0.7rem; font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1.08; }
.benefit h3::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--accent); margin-bottom: 1.1rem; }
.benefit p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .benefits { grid-template-columns: minmax(0, 1fr); } }

/* Talks */
.programme { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.talk-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.talk-row:nth-child(even) .talk-media { order: 2; }
.talk-media { margin: 0; min-width: 0; }
.talk-media .ht { aspect-ratio: 16 / 10; }
.talk-text { min-width: 0; display: grid; gap: 1rem; }
.talk-meta { margin: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--accent); }
.talk-text h3 { margin: 0; font-family: var(--display); font-size: clamp(2.1rem, 1.5rem + 2vw, 3.4rem); line-height: 0.98; letter-spacing: -0.01em; }
.promise { margin: 0; font-size: 1.1rem; color: var(--ink-2); }
.takeaways { list-style: none; margin: 0.4rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.55rem; }
.takeaways li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); }
.takeaways li::before { content: "→"; font-family: var(--mono); color: var(--ink-3); }
.tags { margin: 0.3rem 0 0; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); }
.tags b { font-weight: 400; color: var(--ink); }
@media (max-width: 860px) { .talk-row { grid-template-columns: minmax(0, 1fr); } .talk-row:nth-child(even) .talk-media { order: 0; } }

/* How a talk is made */
.making { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: make; border-top: 1px solid rgba(250, 250, 250, 0.3); }
.making li { counter-increment: make; padding: 1.3rem 1.2rem 1.5rem 0; min-width: 0; }
.making li + li { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
.making li::before { content: counter(make, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 0.78rem; color: var(--accent); margin-bottom: 0.8rem; }
.making h3 { margin: 0 0 0.45rem; font-family: var(--display); font-size: 1.6rem; line-height: 1.05; }
.making p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 1000px) {
  .making { grid-template-columns: minmax(0, 1fr); }
  .making li, .making li + li { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 3rem minmax(0, 1fr); }
  .making li::before { margin: 0.35rem 0 0; }
}
.themes { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 1rem 4vw; align-items: baseline; margin-top: clamp(3rem, 6vw, 5rem); padding-block: 1.6rem; border-block: 1px solid var(--rule); }
.themes p { margin: 0; color: var(--ink-2); }
.themes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-family: var(--display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.3; }
.themes li:not(:last-child)::after { content: " ·"; color: var(--ink-3); }
@media (max-width: 860px) { .themes { grid-template-columns: minmax(0, 1fr); } }
.sub-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1rem 4vw; align-items: end; margin: clamp(4rem, 8vw, 6.5rem) 0 clamp(2rem, 4vw, 3rem); }
.sub-head h3 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1; }
.sub-head p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .sub-head { grid-template-columns: minmax(0, 1fr); } }

/* Work shown on stage */
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.work { margin: 0; min-width: 0; }
.work video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); }
.work figcaption { margin-top: 0.65rem; font-family: var(--display); font-size: 1.15rem; line-height: 1.15; }
.work figcaption a { text-decoration: none; }
.work figcaption a:hover, .work figcaption a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); }
.work figcaption span { display: block; margin-top: 0.2rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
@media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Live: scroll-driven Acclamor room */
.scrolly { position: relative; }
#live { height: 540vh; }
#live .sticky { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; overflow: hidden; }
#live .sticky > .container { width: 100%; }
.live-copy { max-width: 24rem; }
.live-copy h2 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); line-height: 0.98; }
.live-copy > p { margin: 1rem 0 0; color: var(--ink-2); }

/* The six moments, one word each; the rule under the current one fills as you scroll. */
.moments { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; }
.moments li { position: relative; border-top: 1px solid var(--rule); }
.moments li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.moments button { appearance: none; display: flex; align-items: baseline; gap: 0.6rem; width: 100%; padding: 0.45rem 0; border: 0; background: none; color: var(--ink-3); font: 400 1.5rem/1.15 var(--display); text-align: left; cursor: pointer; transition: color 250ms ease; }
.moments button small { font-family: var(--body); font-size: 0.72rem; color: var(--ink-3); }
.moments li.is-on button { color: var(--ink); }
.moment-note { margin: 1rem 0 0; min-height: 3.2em; color: var(--ink-2); }
/* During the Light moment the visitor votes too: the colour they pick becomes the room's. */
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.6rem; visibility: hidden; }
.pick.is-on, html.lite .pick { visibility: visible; }
.pick span { margin-right: 0.3rem; font-size: 0.85rem; color: var(--ink-3); }
.pick button { appearance: none; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 0; background: var(--c); box-shadow: 0 0 0 1px rgba(250, 250, 250, 0.18); cursor: pointer; transition: box-shadow 200ms ease, transform 200ms ease; }
.pick button:hover { transform: scale(1.08); }
.pick button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--c), 0 0 16px var(--c); }

/* The room without 3D, on small screens and when motion is reduced: the same moments play on a loop. */
.room-flat { display: none; }
html.lite .room-flat { display: block; position: relative; margin-top: 1.6rem; max-width: 34rem; padding-top: 18px; --wash: 0; }
html.lite .moments { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: 1.4rem; }
html.lite .moments li { border-top: 0; }
html.lite .moments li::before { top: auto; bottom: 0; height: 2px; }
html.lite .moments button { font-size: 1.2rem; padding: 0.2rem 0 0.35rem; }
.rf-lamps { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rf-lamp { position: absolute; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c, #E8E8E4); box-shadow: 0 0 calc(4px + 14px * var(--l, 0)) var(--c, #E8E8E4); opacity: calc(0.4 + 0.6 * var(--l, 0)); }
.rf-lamp::after { content: ""; position: absolute; top: 5px; left: 50%; width: 220px; height: 560px; margin-left: -110px; transform-origin: 50% 0; transform: rotate(var(--a, 0deg)); background: linear-gradient(to bottom, var(--c, #E8E8E4), transparent 80%); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); opacity: calc(0.5 * var(--l, 0)); }
.rf-lamp:nth-child(1) { left: 4%; --a: -16deg; }
.rf-lamp:nth-child(2) { left: 22%; --a: -6deg; }
.rf-lamp:nth-child(3) { left: 78%; --a: 6deg; }
.rf-lamp:nth-child(4) { left: 96%; --a: 16deg; }
.rf-screen { position: relative; z-index: 1; width: 84%; margin-inline: auto; aspect-ratio: 16 / 9; background: #0D0D0D; border: 1px solid rgba(250, 250, 250, 0.2); box-shadow: 0 0 50px rgba(250, 250, 250, 0.05); }
.rf-screen canvas { display: block; width: 100%; height: 100%; }
.rf-phones { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5%; padding: 1.8rem 4% 0.6rem; }
.rf-phones::before { content: ""; position: absolute; inset: 0 -10% -20%; z-index: -1; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--win, #F2C27B) 50%, transparent), transparent 65%); opacity: var(--wash); }
.rf-phones .phone3d { width: 100%; height: auto; aspect-ratio: 128 / 250; border-radius: 14px; }

/* Elements placed in the 3D room (styled here, positioned by the stage) */
.screen3d { width: 640px; height: 360px; background: #0D0D0D; border: 1px solid rgba(250, 250, 250, 0.2); box-shadow: 0 0 70px rgba(250, 250, 250, 0.05); }
.screen3d canvas { display: block; width: 100%; height: 100%; }
.beam3d { width: 300px; height: 760px; background: linear-gradient(to bottom, var(--c, #E8E8E4), transparent 85%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.lamp3d { width: 26px; height: 26px; border-radius: 50%; background: var(--c, #E8E8E4); box-shadow: 0 0 30px var(--c, #E8E8E4); }
.wash3d { width: 1300px; height: 760px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c, #F2C27B) 55%, transparent), transparent 65%); }

/* Phones: a dark body and one layer per moment, shown by the moment the phone is in. No text on the phone except a typed word. */
.phone3d { position: relative; width: 128px; height: 250px; border-radius: 20px; background: #121212; border: 2px solid #2A2A2A; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); container-type: inline-size; transition: border-color 200ms ease, box-shadow 200ms ease; }
.phone3d::before { content: ""; position: absolute; top: 3.6%; left: 50%; width: 22%; height: 1.6%; transform: translateX(-50%); border-radius: 4px; background: #2A2A2A; }
.p-screen { position: absolute; inset: 9% 7% 5%; border-radius: 8px; overflow: hidden; background: #0B0B0B; }
.p-screen > * { position: absolute; inset: 0; opacity: 0; transition: opacity 250ms ease, filter 250ms ease; }
.p-opts { display: grid; align-content: center; gap: 8cqw; padding: 0 12%; }
.p-opts span { height: 12cqw; border-radius: 99px; border: 2px solid color-mix(in srgb, var(--c) 55%, transparent); transition: background 200ms ease, box-shadow 200ms ease; }
.p-opts span.is-picked { background: var(--c); border-color: var(--c); box-shadow: 0 0 14px var(--c); }
.p-word { display: grid; place-items: center; }
.p-word span { font-family: var(--display); font-size: 15cqw; color: var(--ink); padding-bottom: 2px; border-bottom: 2px solid var(--data-1); }
.p-tilt { background: radial-gradient(circle at 50% 55%, rgba(242, 194, 123, 0.4), transparent 62%); }
.p-tilt i { position: absolute; left: 50%; top: 55%; width: 18cqw; height: 18cqw; margin: -9cqw 0 0 -9cqw; border-radius: 50%; background: var(--data-1); box-shadow: 0 0 14px var(--data-1); }
.p-photo { background: #000 center / contain no-repeat; }
.p-draw { width: 100%; height: 100%; }
.phone3d[data-m="vote"] .p-opts, .phone3d[data-m="words"] .p-word, .phone3d[data-m="light"] .p-fill, .phone3d[data-m="move"] .p-tilt,
.phone3d[data-m="photos"] .p-photo, .phone3d[data-m="draw"] .p-draw { opacity: 1; }
.phone3d[data-m="words"]:not(.is-sent) .p-word { opacity: 0.3; }
.phone3d[data-m="photos"]:not(.is-sent) .p-photo { opacity: 0.3; filter: grayscale(1) brightness(0.6); }

/* Formats and practical */
.two-col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 5vw; }
.formats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.formats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.formats strong { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.formats em { font-style: normal; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; }
.formats span { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.95rem; }
.practical { margin: 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem 1.25rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.practical dt { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); padding-top: 0.15rem; }
.practical dd { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* Archive: lifts onto the globe */
#archive { height: 330vh; }
#archive .sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.2rem; padding-block: 5.5rem 2.2rem; }
#archive .head { margin-bottom: 0; }
#archive .head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); }
.talks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 3px 12px; align-content: start; max-width: 58%; overflow: hidden; }
.talk, .lift-card { display: flex; align-items: baseline; gap: 6px; padding: 2px 7px; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.talk { border-left: 1px solid var(--rule); background: rgba(8, 8, 8, 0.6); }
.lift-card { border-left: 2px solid var(--accent); background: rgba(18, 18, 18, 0.94); color: var(--ink); font-family: var(--body); }
.talk b, .lift-card b { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.talk span, .lift-card span { flex: none; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.talk.is-lifted { visibility: hidden; }
.archive-sum { margin: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
html.lite #archive, html.lite #live { height: auto; }
html.lite #archive .sticky, html.lite #live .sticky { position: static; height: auto; }
html.lite .talks { max-width: none; }
@media (max-width: 900px) { .talks { max-width: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* Book */
.book { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 5vw; align-items: end; padding-block: 2rem 4rem; }
.book h2 { margin: 0; font-family: var(--display); font-size: clamp(3rem, 1.6rem + 5vw, 7rem); line-height: 0.92; letter-spacing: -0.02em; }
.book .email { display: inline-block; margin-top: 1.6rem; font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); border-bottom: 1px solid var(--accent); }
.book ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; color: var(--ink-2); }
.book ul li::before { content: "→ "; font-family: var(--mono); color: var(--ink-3); }
@media (max-width: 860px) { .book { grid-template-columns: minmax(0, 1fr); } }

/* Footer: shared by every page, in footer.css. */