:root {
  --ink: #07101f;
  --ink-soft: #122445;
  --electric: #5c79ff;
  --lime: #cffc69;
  --paper: #f5f4ef;
  --line: rgba(245, 244, 239, 0.18);
  --dark-line: rgba(7, 16, 31, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Manrope, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-shell { overflow: hidden; }
.site-header { height: 88px; max-width: 1480px; margin: auto; padding: 0 6vw; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 5; }
.wordmark { font-family: 'DM Mono', monospace; font-size: 1.35rem; letter-spacing: -0.14em; font-weight: 500; }
.wordmark span { color: var(--lime); }
nav { display: flex; gap: 2.5rem; margin-left: auto; margin-right: 3rem; }
nav a, .header-cta, footer { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
nav a { color: rgba(245,244,239,.72); transition: color .2s ease; }
nav a:hover { color: var(--lime); }
.header-cta { border: 1px solid rgba(245,244,239,.48); border-radius: 99px; padding: .76rem 1.1rem; }
.header-cta span { color: var(--lime); font-size: 1rem; margin-left: .35rem; }
.hero { min-height: 750px; max-width: 1480px; margin: 0 auto; padding: 6.6rem 6vw 5rem; position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; isolation: isolate; }
.signal { position: absolute; width: 46vw; height: 46vw; border: 1px solid rgba(92,121,255,.25); border-radius: 50%; z-index: -1; }
.signal-one { top: -12vw; left: 35vw; box-shadow: 0 0 0 6vw rgba(92,121,255,.035), 0 0 0 12vw rgba(92,121,255,.02); }
.signal-two { width: 29vw; height: 29vw; top: 38%; left: 9%; border-color: rgba(207,252,105,.16); }
.eyebrow { font: 500 .69rem/1.4 'DM Mono', monospace; color: rgba(245,244,239,.62); letter-spacing: .09em; margin: 0 0 1.6rem; }
.eyebrow span { display: inline-block; width: 22px; border-top: 1px solid var(--lime); vertical-align: middle; margin-right: .65rem; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.06em; }
h1 { font-size: clamp(4.1rem, 7.8vw, 8rem); line-height: .92; margin: 0; font-weight: 800; }
em { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -.07em; }
.intro { font-size: 1.1rem; line-height: 1.75; color: rgba(245,244,239,.7); max-width: 27rem; margin: 2.2rem 0; }
.hero-actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.8rem; font-size: .78rem; font-weight: 800; letter-spacing: .03em; padding: 1.08rem 1.35rem; border-radius: 2px; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.button-primary { background: var(--lime); color: var(--ink); }
.text-link { font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--lime); padding-bottom: .45rem; }
.text-link span { color: var(--lime); margin-left: .45rem; }
.hero-portrait { align-self: stretch; margin: 0 0 0 auto; width: min(100%, 460px); min-height: 570px; position: relative; overflow: hidden; border-radius: 2px; }
.hero-portrait::after { content: ''; inset: 0; position: absolute; background: linear-gradient(180deg, rgba(7,16,31,.03), rgba(7,16,31,.38)); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.9) contrast(1.04); }
.hero-portrait figcaption { position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 2; font: .65rem 'DM Mono', monospace; letter-spacing: .04em; }
.hero-index { position: absolute; bottom: 3rem; left: 6vw; display: flex; align-items: center; gap: .7rem; color: rgba(245,244,239,.46); font: .68rem 'DM Mono', monospace; }
.hero-index i { display: block; width: 70px; border-top: 1px solid rgba(245,244,239,.26); }
.manifesto { background: var(--lime); color: var(--ink); padding: 7.5rem 10vw; }
.manifesto .eyebrow { color: rgba(7,16,31,.68); }
.manifesto .eyebrow span { border-color: var(--ink); }
.manifesto > div { display: grid; grid-template-columns: 1.35fr .65fr; gap: 7vw; align-items: end; }
.manifesto-main { font-size: clamp(2.2rem, 4.3vw, 4.45rem); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; margin: 0; }
.manifesto-side { font-size: .95rem; line-height: 1.75; margin: 0; max-width: 25rem; }
.talks, .books { background: var(--paper); color: var(--ink); padding: 8.5rem 10vw; }
.section-heading { display: grid; grid-template-columns: 1.1fr .5fr; gap: 6vw; align-items: end; margin-bottom: 4.2rem; }
.section-heading .eyebrow { color: rgba(7,16,31,.62); }
.section-heading .eyebrow span { border-color: var(--electric); }
h2 { font-size: clamp(3rem, 5.1vw, 5.6rem); line-height: .96; margin: 0; font-weight: 800; }
.section-heading > p { font-size: .98rem; line-height: 1.75; margin: 0 0 .45rem; color: rgba(7,16,31,.7); max-width: 23rem; }
.talk-list { border-top: 1px solid var(--dark-line); }
.talk-card { min-height: 160px; border-bottom: 1px solid var(--dark-line); display: grid; grid-template-columns: 6rem 1.2fr .48fr 2rem; gap: 1.5rem; align-items: center; position: relative; padding: 1.8rem 0; transition: padding .25s ease, background .25s ease; }
.talk-card:hover { padding-left: 1.2rem; padding-right: 1.2rem; background: rgba(92,121,255,.065); }
.talk-number, .talk-tag, .book-status { font: .66rem 'DM Mono', monospace; letter-spacing: .08em; }
.talk-number { align-self: start; margin: .2rem 0 0; color: var(--electric); }
.talk-tag { color: rgba(7,16,31,.58); margin-bottom: .55rem; }
.talk-card h3 { font-size: clamp(1.36rem, 2.3vw, 2.15rem); max-width: 44rem; line-height: 1.04; margin-bottom: .28rem; }
.talk-subtitle { font: italic 1rem 'Playfair Display', Georgia, serif; margin: 0; }
.talk-detail { font-size: .78rem; color: rgba(7,16,31,.62); line-height: 1.55; margin: 0; }
.arrow { color: var(--electric); font-size: 1.4rem; }
.stage { height: min(72vw, 760px); min-height: 440px; position: relative; isolation: isolate; overflow: hidden; }
.stage > img { height: 100%; width: 100%; object-fit: cover; object-position: center 52%; filter: saturate(.82) brightness(.76); }
.stage-overlay { z-index: 1; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,16,31,.9) 0%, rgba(7,16,31,.26) 58%, rgba(7,16,31,.05)); }
.stage-caption { position: absolute; z-index: 2; left: 10vw; bottom: 12%; max-width: 26rem; }
.stage-caption p:last-child { font-size: clamp(1.65rem, 3vw, 3rem); line-height: 1.12; font-weight: 700; letter-spacing: -.05em; margin: 0; }
.stage-mark { z-index: 2; position: absolute; right: 8vw; top: 12%; font: 500 1rem 'DM Mono', monospace; color: var(--lime); }
.books { background: var(--ink-soft); color: var(--paper); }
.books .section-heading .eyebrow, .books .section-heading > p { color: rgba(245,244,239,.66); }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.book { aspect-ratio: .83; padding: 2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: #09101a; }
.book > p:last-child { z-index: 2; font: .7rem 'DM Mono', monospace; letter-spacing: .06em; margin: 1.2rem 0 0; }
.book-status { position: relative; z-index: 3; margin: 0; color: rgba(245,244,239,.76); }
.book-cover { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s ease; }
.book::after { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(7,16,31,.48) 0%, transparent 24%, transparent 64%, rgba(7,16,31,.72) 100%); pointer-events: none; }
.book:hover .book-cover { transform: scale(1.035); }
.contact { padding: 9rem 10vw; background: var(--electric); color: var(--ink); }
.contact .eyebrow { color: rgba(7,16,31,.68); }.contact .eyebrow span { border-color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: 1.15fr .58fr; gap: 10vw; align-items: end; }
.contact h2 { max-width: 45rem; }
.contact-card { border-top: 1px solid rgba(7,16,31,.5); padding-top: 1.5rem; }
.contact-card > p:first-child { font-size: 1rem; line-height: 1.65; }
.button-light { background: var(--ink); color: var(--paper); margin: .8rem 0 1.15rem; width: 100%; }
.contact-method { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(7,16,31,.25); padding: .8rem 0; font: 500 .78rem 'DM Mono', monospace; letter-spacing: .015em; }
.contact-method:last-child { border-bottom: 1px solid rgba(7,16,31,.25); }
footer { display: flex; align-items: center; justify-content: space-between; padding: 2.3rem 6vw; color: rgba(245,244,239,.54); }
footer .wordmark { color: var(--paper); } footer p { margin: 0; text-transform: none; letter-spacing: .02em; font-size: .65rem; } footer > a:last-child { color: var(--lime); }
@media (max-width: 760px) {
  .site-header { height: 72px; padding: 0 1.5rem; } nav { display: none; } .header-cta { font-size: .64rem; padding: .65rem .85rem; }
  .hero { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 4rem 1.5rem 2.5rem; } .hero-copy { position: relative; z-index: 1; } h1 { font-size: clamp(3.65rem, 16vw, 5.6rem); } .intro { font-size: 1rem; } .hero-portrait { width: 100%; min-height: 480px; margin-top: 3rem; } .hero-index { display: none; } .signal-one { width: 80vw; height: 80vw; top: 11%; left: 25%; }
  .manifesto, .talks, .books, .contact { padding: 5.5rem 1.5rem; } .manifesto > div, .section-heading, .contact-grid { grid-template-columns: 1fr; gap: 1.9rem; } .manifesto-main { font-size: 2.5rem; }
  .talk-card { grid-template-columns: 2.4rem 1fr 1.2rem; gap: .7rem; } .talk-detail { display: none; } .talk-card h3 { font-size: 1.32rem; } .talk-subtitle { font-size: .94rem; }
  .stage { height: 620px; } .stage > img { object-position: 54% center; } .stage-overlay { background: linear-gradient(0deg, rgba(7,16,31,.9), rgba(7,16,31,.05) 75%); } .stage-caption { left: 1.5rem; right: 1.5rem; bottom: 3rem; }
  .book-grid { grid-template-columns: 1fr; gap: 1rem; } .book { aspect-ratio: 1.1; } .book h3 { font-size: 3.6rem; }
  footer { padding: 2rem 1.5rem; gap: 1.5rem; flex-wrap: wrap; } footer p { order: 3; width: 100%; }
}
