:root {
  --ink: #06170F;
  --rust: #A2471B;
  --paper: #F8F3EC;
  --paper-deep: #EFE7DC;
  --ink-soft: #3A4A42;
  --rule: rgb(6 23 15 / 0.15);
  --rust-dark: color-mix(in srgb, var(--rust) 82%, var(--ink));

  --serif: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, sans-serif;

  --body: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);     /* 17 → 19 */
  --headline: clamp(2.125rem, 1.6rem + 2.3vw, 3rem);          /* 34 → 48 */
  --subhead: clamp(1.5rem, 1.35rem + 0.7vw, 1.75rem);         /* 24 → 28 */
  --small: 0.9375rem;                                         /* 15 */

  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(4rem, 2.5rem + 6vw, 6rem);                 /* 64 → 96 */
  --bar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html.motion { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--body)/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h2 {
  font: 400 var(--headline)/1.1 var(--serif);
  letter-spacing: -0.01em;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--rust);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

section[id] { scroll-margin-top: var(--bar-h); }

.wrap,
.bar-inner {
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap { max-width: calc(720px + 2 * var(--gutter)); }

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


/* 44px touch targets */
.btn,
.switch button,
.bar-logo,
.bar-links a,
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.btn,
.switch button {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  font: 500 1rem/1.3 var(--sans);
  cursor: pointer;
}

.btn {
  background: var(--rust);
  color: var(--paper);
  text-decoration: none;
}
.btn:hover { background: var(--rust-dark); color: var(--paper); }
.btn:active { transform: translateY(1px); }


/* hero */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
  min-height: 92svh;
  padding: 64px var(--gutter);
  text-align: center;
}

.hero > :not(.drift) {
  position: relative;
  z-index: 1;
}

.mark {
  width: min(360px, 100%);
  margin: 0 auto;
}
.mark img { width: 100%; }

/* dots drifting in the free space, threads forming between near pairs, moved by setupDrift() */
.drift {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.thread-dot {
  fill: var(--rust);
  opacity: 0.6;
}

/* each line's own opacity (set by JS) multiplies with this */
.threads { opacity: 0.8; }

.thread {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: round;
}


/* underline + dots measured off the logo, all % of the wordmark width */
.typing {
  position: relative;
  margin-top: 1.7%;
  padding-top: 2.3%;
}

.typing-line,
.typing-dot {
  position: absolute;
  background: var(--rust);
}

.typing-line {
  left: 1.3%;
  top: 50%;
  width: 41%;
  aspect-ratio: 41 / 1.7;
  border-radius: 999px;
  transform: translateY(-50%);
}

.typing-dot {
  top: 0;
  width: 2.3%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.typing-dot:nth-child(2) { left: 43.5%; }
.typing-dot:nth-child(3) { left: 47.5%; }

.tagline {
  margin-top: 24px;
  padding-left: 0.2em; /* offsets the trailing letter-spacing */
  letter-spacing: 0.2em;
}

.hero-line {
  max-width: 34ch;
  margin: 12px auto 0;
  color: var(--ink-soft);
}

.motion .typing-line { animation: draw 600ms cubic-bezier(0.3, 0, 0.2, 1) both; }
.motion .typing-dot { animation: blink 1500ms ease-in-out 650ms both; }
.motion .typing-dot:nth-child(3) { animation-delay: 850ms; }

.mark.replay .typing-line,
.mark.replay .typing-dot { animation: none; }

.motion .tagline:not(.split) { visibility: hidden; }
.motion .tagline .ch { opacity: 0; }
.motion .tagline .ch.on { opacity: 1; }

@keyframes draw {
  from { clip-path: inset(0 100% 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}

@keyframes blink {
  0%   { opacity: 0;    transform: scale(0.7); }
  20%  { opacity: 1;    transform: scale(1.25); }
  40%  { opacity: 0.35; transform: scale(0.85); }
  60%  { opacity: 1;    transform: scale(1.25); }
  80%  { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 1;    transform: scale(1); }
}


/* top bar */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: var(--bar-h);
  background: rgb(248 243 236 / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  visibility: hidden;
}

@supports not (backdrop-filter: blur(1px)) {
  .bar { background: rgb(248 243 236 / 0.96); }
}

.bar.show {
  transform: none;
  visibility: visible;
}

.motion .bar { transition: transform 200ms ease-out, visibility 0s 200ms; }
.motion .bar.show { transition: transform 200ms ease-out; }

.bar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(960px + 2 * var(--gutter));
  height: 100%;
}

.bar-logo img { width: 112px; }

.bar-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.bar-links a {
  color: var(--ink);
  font-size: var(--small);
  font-weight: 500;
  text-decoration: none;
}
.bar-links a:hover,
.bar-links a[aria-current="true"] {
  text-decoration: underline 2px var(--rust);
  text-underline-offset: 6px;
}

.bar-cta {
  margin-left: 16px;
  font-size: var(--small);
  white-space: nowrap;
}


/* sections */

.idea, .next, .involved { padding: var(--section) 0; }


/* the idea */

.idea p,
.ways { max-width: 60ch; }

.idea p { margin-top: 24px; }


/* room */

.room { padding: 0 0 var(--section); }

.room-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.switch button {
  justify-content: center;
  min-width: 96px;
  background: none;
  color: var(--ink);
  font-weight: 400;
}
.switch button:hover { background: var(--paper-deep); }

.switch button[aria-pressed="true"] {
  background: var(--rust);
  color: var(--paper);
  font-weight: 500;
}

.room-map {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 48px auto 32px;
}

.room-dots circle { fill: var(--ink); }
.room-dots .speaker { fill: var(--rust); }

.room-lines {
  stroke: var(--ink-soft);
  stroke-width: 1;
  opacity: 0;
}
[data-mode="vaad"] .room-lines { opacity: 0.55; }

.room-dots circle:nth-child(1) { transform: translate(160px, 44px); }
.room-dots circle:nth-child(2) { transform: translate(76px, 120px); }
.room-dots circle:nth-child(3) { transform: translate(132px, 120px); }
.room-dots circle:nth-child(4) { transform: translate(188px, 120px); }
.room-dots circle:nth-child(5) { transform: translate(244px, 120px); }
.room-dots circle:nth-child(6) { transform: translate(76px, 164px); }
.room-dots circle:nth-child(7) { transform: translate(132px, 164px); }
.room-dots circle:nth-child(8) { transform: translate(188px, 164px); }
.room-dots circle:nth-child(9) { transform: translate(244px, 164px); }
.room-dots circle:nth-child(10) { transform: translate(76px, 208px); }
.room-dots circle:nth-child(11) { transform: translate(132px, 208px); }
.room-dots circle:nth-child(12) { transform: translate(188px, 208px); }
.room-dots circle:nth-child(13) { transform: translate(244px, 208px); }

[data-mode="vaad"] .room-dots circle:nth-child(1) { transform: translate(160px, 32px); }
[data-mode="vaad"] .room-dots circle:nth-child(2) { transform: translate(81px, 73.5px); }
[data-mode="vaad"] .room-dots circle:nth-child(3) { transform: translate(115.4px, 43px); }
[data-mode="vaad"] .room-dots circle:nth-child(4) { transform: translate(204.6px, 43px); }
[data-mode="vaad"] .room-dots circle:nth-child(5) { transform: translate(239px, 73.5px); }
[data-mode="vaad"] .room-dots circle:nth-child(6) { transform: translate(64.7px, 116.4px); }
[data-mode="vaad"] .room-dots circle:nth-child(7) { transform: translate(96.3px, 199.9px); }
[data-mode="vaad"] .room-dots circle:nth-child(8) { transform: translate(223.7px, 199.9px); }
[data-mode="vaad"] .room-dots circle:nth-child(9) { transform: translate(255.3px, 116.4px); }
[data-mode="vaad"] .room-dots circle:nth-child(10) { transform: translate(70.2px, 162px); }
[data-mode="vaad"] .room-dots circle:nth-child(11) { transform: translate(137px, 221.2px); }
[data-mode="vaad"] .room-dots circle:nth-child(12) { transform: translate(183px, 221.2px); }
[data-mode="vaad"] .room-dots circle:nth-child(13) { transform: translate(249.8px, 162px); }

/* Into vaad: dots move, then lines fade in (600ms + 12 × 20ms stagger).
   Back to lecture: lines fade out first, then dots move. */
.motion .room-dots circle {
  transition: transform 600ms ease-in-out calc(var(--delay, 0ms) + 200ms);
}
.motion [data-mode="vaad"] .room-dots circle { transition-delay: var(--delay, 0ms); }

.motion .room-lines { transition: opacity 200ms; }
.motion [data-mode="vaad"] .room-lines { transition-delay: 840ms; }

.motion .room-dots circle:nth-child(2) { --delay: 20ms; }
.motion .room-dots circle:nth-child(3) { --delay: 40ms; }
.motion .room-dots circle:nth-child(4) { --delay: 60ms; }
.motion .room-dots circle:nth-child(5) { --delay: 80ms; }
.motion .room-dots circle:nth-child(6) { --delay: 100ms; }
.motion .room-dots circle:nth-child(7) { --delay: 120ms; }
.motion .room-dots circle:nth-child(8) { --delay: 140ms; }
.motion .room-dots circle:nth-child(9) { --delay: 160ms; }
.motion .room-dots circle:nth-child(10) { --delay: 180ms; }
.motion .room-dots circle:nth-child(11) { --delay: 200ms; }
.motion .room-dots circle:nth-child(12) { --delay: 220ms; }
.motion .room-dots circle:nth-child(13) { --delay: 240ms; }

.room-caption {
  max-width: 48ch;
  min-height: 3.2em; /* two lines, so the page doesn't jump when it changes */
}


/* topics */

.topics { padding-bottom: var(--section); }

.topics h2 {
  padding-top: var(--section);
  border-top: 1px solid var(--rule);
}


/* next somevaad */

.next { background: var(--paper-deep); }

#next-body { margin-top: 32px; }
.js .next[aria-busy="true"] #next-body { visibility: hidden; }

.dots {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rust);
}

.next-lead,
.event-title { font: 400 var(--subhead)/1.3 var(--serif); }

.next-note {
  margin-top: 8px;
  color: var(--ink-soft);
}

.event-title { max-width: 30ch; }

.event-info {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}

.event-info div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.event-info dt {
  color: var(--ink-soft);
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.6rem;
}
.event-info dd { overflow-wrap: anywhere; }

#next-body .btn { margin-top: 32px; }


/* involved */

.ways { margin-top: 32px; }
.ways li + li { margin-top: 16px; }
.ways strong { font-weight: 500; }

.involved-note { margin-top: 32px; }
.involved .btn { margin-top: 16px; }


footer {
  padding: 32px 0 48px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--small);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
}


@media (max-width: 899px) {
  .bar-links { gap: 16px; }
  .bar-cta { margin-left: 8px; }
}

@media (max-width: 719px) {
  .bar-links { display: none; }
  .bar-cta { margin-left: auto; }
}

@media (max-width: 480px) {
  .event-info div { grid-template-columns: 1fr; }
}