:root {
  color-scheme: dark;
  --ink: #f7f1e7;
  --muted: #cbd1d4;
  --line: #f0e7da2e;
  --navy: #141e28;
  --slate: #1d2d3b;
  --night: #101923;
  --gold: #e3bb86;
  --display: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--navy); font-family: var(--sans); }
figure, p, h1, h2, h3, dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
section, footer { scroll-margin-top: 28px; }
.wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: absolute; top: 12px; left: 12px; z-index: 5; background: var(--night); padding: 12px; }
.eyebrow, .micro, figcaption, dt {
  font-size: .69rem; font-weight: 680; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.dash { width: 24px; height: 1px; flex: 0 0 24px; background: currentColor; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; }
h2 { font-size: clamp(2.8rem, 5.5vw, 5.6rem); line-height: .98; letter-spacing: -.059em; }
h1 em, h2 em { color: var(--gold); font-weight: inherit; }

.header { border-bottom: 1px solid var(--line); background: var(--night); }
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-block; flex: 0 0 auto; }
.brand img { width: 147px; }
nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 46px); font-size: .84rem; font-weight: 600; }
nav a:hover, .footer a:hover { color: var(--gold); }
.nav-talk { display: inline-flex; align-items: center; gap: 13px; padding: 9px 14px; border: 1px solid #e3bb8680; color: var(--gold); }
.nav-talk:hover { background: #e3bb8614; border-color: var(--gold); }
.menu-button { display: none; background: none; border: 1px solid var(--line); padding: 8px 12px; color: inherit; }

.hero { display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(35px, 6vw, 108px); padding-block: 53px clamp(42px, 5vw, 82px); align-items: center; }
.hero h1 { font-size: clamp(4.9rem, 8.6vw, 9rem); letter-spacing: -.087em; line-height: .82; margin: 26px 0 27px -.042em; }
.hero h1 em { letter-spacing: -.082em; }
.hero-lead { max-width: 28ch; font: 400 clamp(1.22rem, 2.03vw, 1.85rem) / 1.18 var(--display); letter-spacing: -.02em; }
.hero-intro { max-width: 46ch; margin-top: 12px; font-size: clamp(.95rem, 1.24vw, 1.1rem); line-height: 1.58; color: var(--muted); }
.hero-actions { margin-top: 24px; display: flex; gap: 13px 24px; align-items: center; flex-wrap: wrap; }
.button { min-height: 49px; display: inline-flex; gap: 24px; align-items: center; justify-content: space-between; width: fit-content; padding: 12px 17px; font-weight: 680; font-size: .86rem; transition: background-color .2s; }
.text-link { display: inline-flex; align-items: center; gap: 11px; width: fit-content; max-width: 100%; border-bottom: 1px solid currentColor; padding-block: 5px; font-weight: 650; font-size: .88rem; }
.text-link:hover { color: var(--gold); }
.hero-photo { position: relative; width: min(100%, clamp(375px, 31.5vw, 457px)); justify-self: center; background: var(--slate); isolation: isolate; outline: 1px solid #e3bb8652; outline-offset: 6px; }
.hero-photo img, .about-photo img, .talk-photo img { width: 100%; height: auto; }
.hero-photo::after { content: ""; position: absolute; inset: 76% 0 0; background: linear-gradient(transparent, #1c120ec7); pointer-events: none; }
.hero-photo figcaption { position: absolute; z-index: 1; inset: auto 18px 15px; color: #fffaf0; letter-spacing: .12em; font-size: .63rem; }

.about-section { background: var(--slate); }
.about { display: grid; grid-template-columns: .78fr 1fr; gap: clamp(44px, 8.5vw, 130px); align-items: center; padding-block: clamp(80px, 10vw, 145px); }
.about-photo { position: relative; background: var(--navy); }
.about h2, .book-copy h2, .footer h2 { margin-bottom: 25px; }
.about-copy > p, .book-copy > p { max-width: 54ch; margin-bottom: 14px; line-height: 1.68; color: var(--muted); }
.about-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; }
.about-links a { color: var(--gold); }

.book-section { color: #f7f1e7; background: var(--navy); padding-block: clamp(68px, 8.3vw, 120px); overflow: hidden; }
.book-layout { display: grid; grid-template-columns: 1fr .95fr; align-items: center; gap: clamp(35px, 5vw, 90px); }
.book-copy h2 { font-size: clamp(2.65rem, 5.25vw, 5.45rem); }
.book-facts { border-block: 1px solid #ffffff2b; padding-block: 16px; display: flex; flex-wrap: wrap; column-gap: clamp(15px, 3vw, 42px); row-gap: 10px; margin: 23px 0; }
.book-facts dt { color: #b5bfc7; font-size: .59rem; }
.book-facts dd { font-size: .87rem; margin-top: 3px; }
.button-gold { color: #261c16; background: var(--gold); }
.button-gold:hover { background: #f3d3aa; }
.book-stage {
  --book-width: clamp(158px, 21vw, 271px);
  --depth: clamp(13px, 1.8vw, 25px);
  --angle: -24deg;
  --book-turn-progress: 1;
  display: grid; place-items: center; position: relative; isolation: isolate;
  width: 100%; height: clamp(350px, 37vw, 520px); perspective: 1100px;
  background: radial-gradient(ellipse at center, #3d526471, transparent 70%);
}
.book-stage.is-interactive { cursor: grab; touch-action: pan-y; }
.book-stage.is-dragging { cursor: grabbing; }
.book-stage .orbit { position: absolute; width: min(92%, 478px); aspect-ratio: 1; border: 1px solid #a8b2b524; border-radius: 50%; pointer-events: none; }
.book-stage .orbit-two { width: min(76%, 395px); }
.book-shadow { position: absolute; top: 94%; left: 23%; width: 55%; height: 3%; border-radius: 50%; background: #070e15; filter: blur(11px); }
.book-model {
  position: relative; width: var(--book-width); aspect-ratio: 680 / 1016;
  transform-style: preserve-3d; transform: rotateX(8deg) rotateY(var(--angle));
  transition: transform .78s cubic-bezier(.21,.67,.26,1); pointer-events: none;
}
.book-stage:not(.is-manual) .book-model {
  transform: rotateX(8deg) rotateY(calc(var(--angle) + (var(--book-turn-progress, 1) - 1) * 360deg));
  transition: none;
}
.book-stage.is-dragging .book-model { transition: none; }
.face { position: absolute; backface-visibility: hidden; }
.cover, .back { inset: 0; width: 100%; height: 100%; border-radius: 1px; }
.cover { transform: translateZ(calc(var(--depth) / 2)); }
.back { transform: rotateY(180deg) translateZ(calc(var(--depth) / 2)); }
.spine, .fore-edge { width: var(--depth); height: 100%; top: 0; }
.spine {
  display: grid; place-items: center; left: calc(var(--depth) / -2);
  transform: rotateY(-90deg); background: #27394d; border-inline: 1px solid #6e8399;
  color: #e3e9ef; font-family: var(--display); font-size: .67rem;
}
.spine span { writing-mode: vertical-rl; }
.fore-edge, .top-edge, .bottom-edge { background: repeating-linear-gradient(90deg, #e8dfcb 0 2px, #c9bdab 2px 3px); }
.fore-edge { right: calc(var(--depth) / -2); transform: rotateY(90deg); border-inline: 2px solid #4c6176; }
.top-edge, .bottom-edge { width: 100%; height: var(--depth); border-block: 2px solid #4c6176; background: repeating-linear-gradient(0deg, #ded4c3 0 2px, #c5b8a7 2px 3px); }
.top-edge { top: calc(var(--depth) / -2); transform: rotateX(90deg); }
.bottom-edge { bottom: calc(var(--depth) / -2); transform: rotateX(-90deg); }
.book-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; color: #b5bfc7; font-size: .57rem; }
.book-toggle { padding: 8px 12px; border: 1px solid #8a98a575; background: transparent; color: #f7f1e7; border-radius: 2px; cursor: pointer; min-height: 40px; letter-spacing: .02em; font-size: .8rem; }
.book-toggle:hover { border-color: var(--gold); color: var(--gold); }
.book-toggle span { margin-right: 5px; }

.talk-section { background: var(--slate); }
.talk-layout {
  display: grid; grid-template-columns: .78fr 1fr; align-items: center;
  gap: clamp(44px, 8.5vw, 130px); padding-block: clamp(64px, 8vw, 112px);
}
.talk-photo { border: 1px solid #e3bb8659; padding: 8px; }
.talk-copy h2 { margin-bottom: 25px; }
.talk-copy > p { max-width: 51ch; color: var(--muted); line-height: 1.68; margin-bottom: 14px; }
.talk-copy .button { margin-top: 8px; }
.talk-copy p.talk-channel { margin: 9px 0 0; font-size: .77rem; }

.footer { background: var(--night); }
.footer-main { display: grid; grid-template-columns: 1.25fr .75fr; gap: 35px; padding-block: clamp(58px, 7vw, 100px); align-items: end; }
.footer h2 { font-size: clamp(2.7rem, 6vw, 6rem); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.email { overflow-wrap: anywhere; }
.footer-side { display: grid; justify-self: end; justify-items: start; gap: 6px; min-width: 0; }
.footer-side .micro { color: var(--gold); margin-bottom: 5px; }
.footer-base { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-block: 19px; }
.footer-base .brand img { width: 121px; }
.footer-base small, .to-top { font-size: .74rem; color: var(--muted); }
.to-top span { margin-left: 5px; }

.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 4; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.section-transition {
  height: clamp(28px, 4vw, 58px);
  display: grid; place-items: center;
  background: linear-gradient(var(--seam-from), var(--seam-to));
}
.transition-to-slate { --seam-from: var(--navy); --seam-to: var(--slate); }
.transition-to-navy { --seam-from: var(--slate); --seam-to: var(--navy); }
.transition-to-night { --seam-from: var(--slate); --seam-to: var(--night); }
.section-transition::before,
.section-transition::after {
  content: ""; grid-area: 1 / 1;
}
.section-transition::before {
  width: min(80vw, 960px); height: 100%;
  background: radial-gradient(ellipse at center, #e3bb8629, transparent 70%);
  transform: scaleX(calc(.38 + .62 * var(--seam-progress, 1)));
  opacity: calc(4 * var(--seam-progress, 1) * (1 - var(--seam-progress, 1)));
}
.section-transition::after {
  width: min(58vw, 700px); height: 1px;
  background: linear-gradient(90deg, transparent, #e3bb86b3 50%, transparent);
  transform: scaleX(var(--seam-progress, 1));
  opacity: var(--seam-progress, 1);
}
[data-reveal] { opacity: calc(.68 + .32 * var(--entry-progress, 1)); }
[data-reveal]:focus-within { --entry-progress: 1 !important; }
[data-reveal]:not([data-reveal="photo"]) > * {
  transform: translateY(calc((1 - var(--entry-progress, 1)) * 26px));
}
[data-reveal]:not([data-reveal="photo"]) > :last-child {
  transform: translateY(calc((1 - var(--entry-progress, 1)) * 38px));
}

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 72px); }
  .hero { gap: 42px; }
  .hero-photo { width: min(100%, 420px); }
  .hero h1 { font-size: clamp(4.8rem, 10.9vw, 7.5rem); }
}
@media (max-width: 760px) {
  .wrap { width: min(540px, calc(100% - 40px)); }
  .header-inner { min-height: 64px; flex-wrap: wrap; padding-block: 10px; row-gap: 0; }
  .header .brand img { width: 120px; }
  .header nav { display: grid; flex: 1 0 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 8px; gap: 6px 12px; }
  .header nav a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
  .header.has-menu nav:not(.is-open) { display: none; }
  .menu-button { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; }
  .header nav .nav-talk { border-bottom-color: #e3bb8680; justify-content: space-between; }

  .hero, .about, .book-layout, .talk-layout, .footer-main { grid-template-columns: minmax(0, 1fr); }
  .hero {
    grid-template-areas: "role" "name" "portrait" "lead" "intro" "actions";
    padding-block: 28px 24px;
    gap: 0;
  }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { grid-area: role; }
  .hero h1 {
    grid-area: name;
    font-size: clamp(3.6rem, 13.5vw, 5.65rem);
    line-height: .85;
    margin: 14px 0 20px -.035em;
  }
  .hero-photo, .about-photo, .talk-photo { width: min(100%, clamp(210px, 75vw, 310px)); justify-self: center; }
  .hero-photo { grid-area: portrait; outline-offset: 3px; }
  .hero-photo figcaption { inset: auto 12px 10px; }
  .hero-lead { grid-area: lead; max-width: 29ch; margin-top: 21px; font-size: clamp(1.33rem, 4.8vw, 1.7rem); }
  .hero-intro { grid-area: intro; margin-top: 9px; }
  .hero-actions { grid-area: actions; display: grid; justify-items: start; margin-top: 17px; gap: 5px; }
  .hero-actions .button, .book-copy .button, .talk-copy .button { width: 100%; }
  .text-link { min-height: 44px; }

  .about, .talk-layout { gap: 23px; padding-block: 36px 42px; }
  .about h2, .book-copy h2, .talk-copy h2, .footer h2 {
    font-size: clamp(2.35rem, 8.8vw, 3.8rem);
    line-height: 1;
    margin-bottom: 17px;
  }
  .about-copy > p, .book-copy > p, .talk-copy > p { line-height: 1.64; }
  .about-links { margin-top: 12px; }
  .about-photo { grid-row: 2; }
  .talk-photo { grid-row: 2; padding: 5px; }

  .book-section { padding-block: 36px 41px; }
  .book-layout { gap: 13px; }
  .book-facts { padding-block: 12px; gap: 8px 17px; margin-block: 15px 18px; }
  .book-stage { --book-width: clamp(148px, 46vw, 230px); --depth: clamp(14px, 4vw, 22px); height: clamp(252px, 76vw, 390px); }
  .book-stage.is-interactive { touch-action: pan-y pinch-zoom; }
  .book-stage .orbit-one { width: min(92%, 390px); }
  .book-stage .orbit-two { width: min(76%, 330px); }
  .book-controls { gap: 6px 12px; }
  .book-toggle { min-height: 44px; padding-inline: 16px; }

  .footer-main { gap: 22px; padding-block: 37px 29px; }
  .footer-social { gap: 12px; }
  .footer-social a { flex: 1; justify-content: space-between; padding-inline: 10px; border: 1px solid var(--line); }
  .footer-side { justify-self: stretch; gap: 0; }
  .footer-side .micro { margin-bottom: 0; }
  .footer-base { flex-wrap: wrap; gap: 6px 12px; padding-block: 11px 16px; }
  .footer-base .brand img { width: 105px; }
  .footer-base .to-top { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-base small { order: 3; flex-basis: 100%; }

  .section-transition { height: 19px; }
  [data-reveal] { opacity: calc(.88 + .12 * var(--entry-progress, 1)); }
  [data-reveal]:not([data-reveal="photo"]) > *,
  [data-reveal]:not([data-reveal="photo"]) > :last-child {
    transform: translateY(calc((1 - var(--entry-progress, 1)) * 12px));
  }
}
@media (max-width: 365px) {
  .wrap { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { --entry-progress: 1 !important; }
  .scroll-progress { display: none; }
  .section-transition { --seam-progress: 1 !important; }
  .book-stage { --book-turn-progress: 1 !important; }
}