@font-face {
  font-family: Bellkeeper;
  src: url('assets/bellkeeper-sans.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: BellkeeperMono;
  src: url('assets/bellkeeper-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #0a0d10;
  --ink: #dddad2;
  --muted: #96a1a8;
  --line: #2c363e;
  --live: #dc7065;
  --rest: #738b9b;
  --change: #cfad69;
  --gutter: clamp(24px, 4vw, 72px);
  --column-gap: clamp(32px, 6vw, 80px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 32px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 Bellkeeper, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #34444f; color: #f4f2ec; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 400; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 1px solid var(--change); outline-offset: 6px; }
img { display: block; max-width: 100%; }
em { font-style: normal; color: var(--rest); }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow, .speaker, .conversation-note {
  font: 400 10px/1.6 BellkeeperMono, monospace;
  letter-spacing: .075em;
  color: var(--muted);
}
.skip { position: absolute; left: var(--gutter); top: 12px; transform: translateY(-200%); padding: 10px 14px; background: var(--ink); color: var(--bg); z-index: 10; }
.skip:focus { transform: none; }
.site-header { display: flex; justify-content: space-between; align-items: center; min-height: 88px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { width: 36px; height: 36px; }
.brand span { font-size: 17px; letter-spacing: .12em; }
.site-header nav { display: flex; align-items: center; gap: 36px; color: var(--muted); font-size: 13px; }
.site-header nav a { display: flex; align-items: center; min-height: 44px; }
.site-header nav a:hover, .site-header nav a:focus-visible,
.site-footer a:hover, .site-footer a:focus-visible { color: var(--change); text-decoration: underline; text-underline-offset: 6px; }
.site-header nav a:active, .site-footer a:active { color: var(--live); }
.hero { padding-top: clamp(48px, 7vw, 100px); padding-bottom: clamp(80px, 9vw, 128px); }
.hero h1 { margin-top: 34px; font-size: clamp(80px, 12.8vw, 174px); line-height: .97; letter-spacing: -.065em; }
.hero h1 em { color: var(--live); }
.hero-bottom { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--column-gap); align-items: end; margin-top: clamp(48px, 6vw, 84px); }
.text-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 35px; justify-self: start; min-height: 44px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
.text-link span { color: var(--rest); font-size: 20px; }
.text-link:hover, .text-link:focus-visible { border-color: var(--change); }
.text-link:hover span, .text-link:focus-visible span { color: var(--change); }
.text-link:active, .text-link:active span { color: var(--live); border-color: var(--live); }
.introduction { max-width: 570px; font-size: clamp(18px, 1.85vw, 24px); line-height: 1.6; letter-spacing: -.015em; }
.introduction p + p { margin-top: 14px; color: var(--muted); font-size: .84em; }
.conversation { padding-top: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 28px; }
.conversation-note { letter-spacing: .01em; text-align: right; }
.exchanges { margin-top: 32px; }
.exchange { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--column-gap); padding-block: 60px 64px; }
.exchange + .exchange { border-top: 1px solid var(--line); }
.speaker { margin-bottom: 20px; letter-spacing: .03em; }
.question .speaker { color: var(--change); }
.answer .speaker { color: var(--rest); }
.question h3 { max-width: 390px; font-size: clamp(25px, 2.6vw, 35px); line-height: 1.32; letter-spacing: -.035em; text-wrap: pretty; }
.answer-copy { max-width: 570px; font-size: clamp(18px, 1.85vw, 24px); line-height: 1.65; letter-spacing: -.016em; }
.answer-copy > p + p { margin-top: 18px; color: var(--muted); }
.architecture-note { margin-top: 30px; font-size: 15px; letter-spacing: 0; color: var(--muted); }
.architecture-note summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; width: fit-content; max-width: 100%; min-height: 44px; cursor: pointer; border-bottom: 1px solid var(--rest); color: var(--ink); font-size: 12px; }
.architecture-note summary::-webkit-details-marker { display: none; }
.architecture-note summary span { font-size: 18px; color: var(--rest); }
.architecture-note[open] summary { border-color: var(--live); }
.architecture-note[open] summary span { transform: rotate(45deg); color: var(--live); }
.architecture-note summary:hover, .architecture-note summary:focus-visible { border-color: var(--change); }
.architecture-note summary:hover span, .architecture-note summary:focus-visible span { color: var(--change); }
.architecture-note summary:active, .architecture-note summary:active span { color: var(--live); border-color: var(--live); }
.architecture-note > div { border-left: 2px solid var(--live); padding-left: 19px; margin-top: 22px; }
.architecture-note > div p + p { margin-top: 14px; }
.horizon { padding-top: clamp(80px, 10vw, 144px); }
.horizon h2 { font-size: clamp(53px, 8.5vw, 122px); line-height: 1.02; letter-spacing: -.06em; margin-top: 40px; }
.horizon h2 em { color: var(--change); }
.horizon-body { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--column-gap); margin-top: 50px; }
.author { display: flex; align-items: start; gap: 20px; padding-top: 5px; }
.author-mark { border-right: 1px solid var(--line); padding-right: 18px; flex-shrink: 0; }
.author-mark img { width: 47px; height: 47px; }
.author p { font-size: 14px; padding-top: 4px; }
.author p span { display: block; font-size: 10px; color: var(--muted); margin-top: 6px; }
.manifesto { max-width: 550px; }
.manifesto p { font-size: 20px; line-height: 1.65; letter-spacing: -.015em; }
.manifesto p + p { color: var(--muted); margin-top: 24px; }
.site-footer { margin-top: clamp(80px, 10vw, 144px); padding-bottom: 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 11px; color: var(--muted); }
.site-footer p { display: flex; gap: 20px; align-items: center; }
.site-footer p > span { padding-left: 20px; border-left: 1px solid var(--line); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; gap: 25px; }
.site-footer a > span { color: var(--rest); font-size: 18px; }
.site-footer a:hover > span, .site-footer a:focus-visible > span { color: var(--change); }
.site-footer a:active > span { color: var(--live); }
@media (max-width: 800px) {
  :root { --gutter: 28px; --column-gap: 32px; }
  .site-header { min-height: 78px; }
  .brand span { font-size: 14px; }
  .brand img { width: 32px; height: 32px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(80px, 14vw, 112px); }
  .hero-bottom { grid-template-columns: 1fr 1.3fr; }
  .wide-break { display: none; }
  .exchange { grid-template-columns: 1fr 1.3fr; padding-block: 48px; }
  .question h3 { font-size: 27px; }
  .answer-copy { font-size: 19px; }
  .horizon-body { grid-template-columns: 1fr 1.3fr; }
  .author { gap: 12px; }
  .author-mark { padding-right: 12px; }
  .author-mark img { width: 38px; height: 38px; }
  .author p { font-size: 12px; }
  .manifesto p { font-size: 18px; }
}
@media (max-width: 600px) {
  :root { --gutter: 22px; }
  .site-header { min-height: 72px; gap: 16px; }
  .brand { gap: 9px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-size: 12px; letter-spacing: .11em; }
  .site-header nav { gap: 22px; font-size: 12px; }
  .hero { padding-top: 48px; padding-bottom: 70px; }
  .hero h1 { font-size: clamp(68px, 17vw, 102px); margin-top: 28px; }
  .hero-bottom { display: flex; flex-direction: column-reverse; align-items: start; gap: 28px; margin-top: 40px; }
  .introduction { font-size: 20px; }
  .introduction p + p { font-size: 17px; margin-top: 12px; }
  .text-link { font-size: 12px; }
  .section-heading { align-items: start; gap: 20px; padding-top: 24px; }
  .section-heading h2 { font-size: 9px; max-width: 150px; }
  .conversation-note { font-size: 9px; max-width: 100px; }
  .exchanges { margin-top: 6px; }
  .exchange { display: block; padding-block: 40px; }
  .speaker { margin-bottom: 14px; }
  .question h3 { font-size: 28px; max-width: 420px; }
  .answer { margin-top: 30px; }
  .answer-copy { font-size: 19px; }
  .answer-copy > p + p { margin-top: 16px; }
  .architecture-note { font-size: 15px; margin-top: 24px; }
  .horizon { padding-top: 56px; }
  .horizon h2 { font-size: clamp(43px, 11.5vw, 69px); margin-top: 32px; }
  .horizon-body { display: flex; flex-direction: column-reverse; gap: 30px; margin-top: 34px; }
  .manifesto p { font-size: 19px; }
  .manifesto p + p { margin-top: 20px; }
  .author p { font-size: 13px; }
  .author-mark img { width: 40px; height: 40px; }
  .site-footer { align-items: start; margin-top: 70px; padding-bottom: 22px; font-size: 10px; gap: 18px; }
  .site-footer p { flex-direction: column; align-items: start; gap: 4px; padding-top: 6px; }
  .site-footer p > span { border: 0; padding: 0; }
  .site-footer a { max-width: 145px; gap: 14px; }
}
@media print {
  .site-header nav, .text-link, .site-footer a { display: none; }
  :root { --bg: #fff; --ink: #111; --muted: #444; --live: #9b3b33; --change: #775c28; --rest: #465d6c; --line: #bbb; }
  .hero { padding-block: 30px; }
  .hero h1 { font-size: 80px; }
  .exchange { padding-block: 24px; break-inside: avoid; }
  .horizon { padding-top: 40px; }
  .horizon h2 { font-size: 64px; }
  .site-footer { margin-top: 40px; }
}