/* Shared cinematic refinement. Existing typefaces, artwork and copy are canonical. */
::selection { background: #94dce0; color: #070e12; }
html { scrollbar-color: #42606a #070e12; }
body { overflow-x: clip; }
h1, h2 { text-wrap: balance; }
a, button { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; }
nav a { padding-block: 10px; }
.eyebrow, .art-caption { font-size: 12px; }
.no-motion { scroll-behavior: auto; }
html:has(.no-motion) { scroll-behavior: auto; }
/* The home remains a forest doorway into the author’s world. */
.author-page .journey { height: 160svh; min-height: 0; }
.author-page .stage { min-height: 620px; }
.author-page .hero-copy { top: 27%; }
.author-page .hero-copy h1 { font-size: clamp(64px, 8vw, 112px); }
.author-page .chapter { display: none; }
.author-page .section { padding-block: clamp(80px, 9vw, 130px); }
.author-page .book { min-height: 720px; }
.author-page .book-object { transition: none; }
.author-page .book-art:hover .book-object { transform: rotateY(-17deg) rotateZ(-5deg); }
.author-page .book-copy h2 { font-size: clamp(38px, 4.7vw, 64px); }
.author-page .author { overflow: clip; }
.author-page .author h2 { font-size: clamp(70px, 9vw, 126px); margin-top: 0; }
.author-page .author-bottom { grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr); gap: 28px 8%; }
.author-page .author-bottom .nero-leap { width: 300px; height: 450px; margin-top: -32px; }
.author-page .bio p:first-child { color: #e8e9e3; font-size: 22px; line-height: 1.65; }
.author-page .author-bottom > .text-link { margin-top: 0; }
/* More variation between narrative beats, fewer empty holds. */
.story-page .opening { min-height: 740px; }
.story-page .opening-copy { padding-top: clamp(155px, 20vh, 215px); }
.story-page h1 { font-size: clamp(62px, 10vw, 116px); }
.story-page .opening-sloane { width: 43%; height: 82%; right: 1%; opacity: .8; filter: brightness(.62); }
.story-page .hook { max-width: 540px; }
.story-page .chapter { padding-block: clamp(80px, 10vw, 140px); }
.story-page .instinct { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 7%; min-height: 700px; overflow: clip; }
.story-page .instinct-art { width: 100%; height: 530px; object-fit: contain; object-position: center; }
.story-page .instinct .narrow { margin: 0; }
.story-page .instinct h2 { font-size: clamp(34px, 3.6vw, 52px); }
.story-page .rhythm { margin: 28px 0; }
.story-page .rhythm p { color: #94dce0; font-size: clamp(24px, 2.6vw, 36px); }
.story-page .dna { background: #0b1920; overflow: clip; }
.story-page .dna .split { gap: 10%; }
.story-page .dna blockquote { font-family: Casale, Georgia, serif; font-size: clamp(26px, 3vw, 42px); border: 0; padding: 0; color: #94dce0; }
.story-page .name-reveal { margin-top: 35px; text-align: right; font-size: clamp(80px, 14vw, 170px); }
.story-page .memory { border-block: 1px solid #d8eeee20; }
.story-page .memory .narrow { max-width: 960px; }
.story-page .memory .large { font-family: Casale, Georgia, serif; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.6; }
.story-page .abilities { margin-top: 35px; color: #b5e4e7; }
.story-page .missing { background: linear-gradient(90deg, #070e12ed, #070e12b8), url(city.webp) center / cover; }
/* Native sticky stages; GSAP controls only their internal choreography. */
.story-page .nero-sequence { height: 230svh; min-height: 0; }
.story-page .max-sequence { height: 245svh; min-height: 0; }
.story-page .nero-sticky, .story-page .max-sticky { height: 100svh; min-height: 0; padding: 60px 9%; }
.story-page .nero-sticky { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; }
.story-page .nero-copy { width: 100%; }
.story-page .nero-copy h2 { font-size: clamp(38px, 4.8vw, 68px); }
.story-page .nero-before { min-height: 185px; }
.story-page .nero-after { bottom: 0; margin: 0; }
.story-page .nero-frames { width: 100%; height: min(70svh, 650px); mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent); }
.story-page .frame { object-fit: contain; transform-origin: center; }
.story-page .max-sticky { background: linear-gradient(90deg, #070e12f5, #070e1288), url(city.webp) 60% center / cover; }
.story-page .max-portrait { right: 4%; width: 43%; height: 88%; filter: brightness(.08); opacity: 1; will-change: auto; }
.story-page .max-lit { filter: brightness(.85); opacity: 0; }
.story-page .max-copy { width: 62%; height: 420px; }
.story-page .max-copy h2 { font-size: clamp(38px, 4.6vw, 66px); }
.story-page .max-recognition h2 { font-size: clamp(75px, 10vw, 140px); }
.story-page .max-copy > div { max-width: 620px; }
.story-page .sequence-note { font-size: 12px; color: #bdd0d5; }
.story-page .hope { text-align: left; }
.story-page .hope > h2, .story-page .maybe { text-align: center; }
.story-page .excerpt-layout { grid-template-columns: 1fr 2.8fr 1fr; gap: 35px; max-width: 1050px; margin-inline: auto; }
.story-page .dialogue { font-family: Casale, Georgia, serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.6; }
.story-page .dialogue p:nth-child(even) { padding-left: 12%; color: #94dce0; }
.story-page .dialogue p:nth-child(3) { font: 17px/1.8 Arial, sans-serif; color: #b1bfc1; margin-block: 28px; }
.story-page .question-copy { max-width: 840px; }
.story-page .pitch { gap: 10%; }
.story-page .cover-3d { max-width: 380px; }
/* The full text is the default: JS, motion preference and short screens can all fall back. */
.story-page.no-motion .nero-sequence, .story-page.no-motion .max-sequence { height: auto; min-height: 0; }
.story-page.no-motion .nero-sticky, .story-page.no-motion .max-sticky { position: relative; height: auto; min-height: 0; padding-block: 80px; }
.story-page.no-motion .nero-after { position: static; opacity: 1; visibility: visible; }
.story-page.no-motion .nero-before { min-height: 0; }
.story-page.no-motion .max-copy { height: auto; }
.story-page.no-motion .max-copy > div { position: relative; opacity: 1; visibility: visible; margin-bottom: 48px; }
.story-page.no-motion .max-copy > div:last-child { margin-bottom: 0; }
.story-page.no-motion .max-portrait { opacity: .65; }
.story-page.no-motion .max-lit { display: none; }
.author-page.no-motion .journey { height: auto; min-height: 0; }
@media (max-width: 750px) {
  header { padding: 18px 5%; gap: 12px; }
  .brand, .author-page .brand .brand-name { font-size: 24px; }
  nav { gap: 12px; }
  nav a, nav button, button { font-size: 13px; }
  .author-page .brand > img { width: 34px; height: 34px; }
  .author-page .stage { min-height: 700px; }
  .author-page .hero-copy { top: 19%; max-width: 90%; }
  .author-page .hero-copy h1 { font-size: clamp(60px, 14vw, 100px); }
  .author-page .sloane { height: 59%; width: 86%; right: -6%; bottom: 1%; }
  .author-page .whisper { top: 19%; }
  .author-page .author-bottom { grid-template-columns: 1fr; }
  .author-page .author-bottom .nero-leap { grid-row: 2; height: 330px; width: 220px; margin: 0; }
  .author-page .author-bottom > .text-link { grid-row: 3; }
  .author-page .bio p:first-child { font-size: 21px; }
  .story-page .opening { min-height: 730px; }
  .story-page .opening-copy { padding-top: 150px; }
  .story-page h1 { font-size: clamp(62px, 10vw, 116px); }
  .story-page .opening-sloane { height: 58%; width: 65%; right: -8%; opacity: .42; }
  .story-page .instinct { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .story-page .instinct-art { height: 310px; margin: -35px 0 25px; }
  .story-page .instinct h2 { font-size: 36px; }
  .story-page .nero-sticky { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 32px 7% 40px; align-content: start; }
  .story-page .nero-copy h2 { font-size: 36px; margin-bottom: 16px; }
  .story-page .nero-copy .eyebrow { margin-bottom: 12px; }
  .story-page .nero-copy p { font-size: 16px; line-height: 1.65; }
  .story-page .nero-before { min-height: 166px; }
  .story-page .nero-after strong { font-size: 22px; margin-top: 12px; }
  .story-page .nero-frames { width: 100%; height: 100%; min-height: 0; margin: 0; align-self: stretch; }
  .story-page .max-sticky { padding: 40px 7%; align-items: start; }
  .story-page .max-copy { width: 100%; height: 330px; }
  .story-page .max-copy h2 { font-size: 37px; }
  .story-page .max-recognition h2 { font-size: 85px; }
  .story-page .max-copy p { max-width: 100%; font-size: 16px; }
  .story-page .max-portrait { right: -7%; width: 68%; height: 63%; opacity: .8; }
  .story-page .max-lit { opacity: 0; }
  .story-page .excerpt-layout { grid-template-columns: 1fr; }
  .story-page .dialogue { font-size: 23px; }
  .story-page .pitch { gap: 45px; }
  .story-page.no-motion .nero-frames { height: 340px; }
  .story-page.no-motion .max-portrait { opacity: .2; }
  .story-page.no-motion .max-copy { width: 100%; }
}
@media (max-width: 420px) {
  .author-page nav a { display: none; }
  .author-page .brand .brand-name { font-size: 23px; }
  .story-page .brand { font-size: 23px; }
  .story-page nav { gap: 8px; }
  .story-page button { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* A quiet refuge beneath the city. Keep the children below the copy. */
.story-page .missing { background: #070e12; overflow: hidden; padding-bottom: 510px; isolation: isolate; }
.story-page .hideout-scene { position: absolute; inset: auto 0 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: .45; z-index: -2; }
.story-page .missing::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#070e12 0%, #070e12e8 20%, #070e1280 46%, transparent 65%, #070e1240 90%, #070e12 100%); }
.story-page .missing .split { position: relative; }
@media (max-width: 750px) {
  .story-page .missing { padding-bottom: 400px; }
  .story-page .hideout-scene { height: 580px; object-position: 55% bottom; }
  .story-page .missing::after { background: linear-gradient(#070e12 0%, #070e12 36%, #070e12b0 53%, transparent 72%, #070e1240 93%, #070e12 100%); }
}

/* Inward-facing portraits belong only to the excerpt. */
.story-page .excerpt-layout > img { filter: brightness(.8); mix-blend-mode: lighten; }
@media (max-width: 1000px) {
  .story-page .excerpt-layout { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .story-page .excerpt-layout > img { display: block; height: 300px; max-height: none; align-self: end; object-position: center bottom; }
  .story-page .excerpt-layout > img:first-child { grid-column: 1; grid-row: 1; }
  .story-page .excerpt-layout > img:last-child { grid-column: 2; grid-row: 1; }
  .story-page .dialogue { grid-column: 1 / -1; grid-row: 2; }
}

/* Equal portrait heights despite different source-image aspect ratios. */
@media (min-width: 1001px) {
  .story-page .excerpt-layout > img { height: 480px; width: auto; max-width: none; justify-self: center; object-fit: contain; }
}

/* Keep the dialogue centered beneath its heading, between equal side tracks. */
.story-page .excerpt-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr) minmax(0, 1fr); }
.story-page .dialogue { text-align: center; min-width: 0; }
.story-page .dialogue p:nth-child(even) { padding-left: 0; }
@media (max-width: 1000px) {
  .story-page .excerpt-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Keep the conversation attribution separate from its illustrative portraits. */
.story-page .excerpt-context { text-align: center; color: #b1bfc1; margin: 20px auto 40px; max-width: 540px; }
#motion { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; background: #091318; box-shadow: 0 3px 18px #0008; }
footer { padding-bottom: 85px; }
@media (max-width: 1000px) {
  .story-page .instinct { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .story-page .instinct-art { height: 310px; margin: -35px 0 25px; }
}
@media (max-width: 750px) {
  header { flex-wrap: wrap; gap: 8px; }
  header nav { width: 100%; justify-content: flex-start; gap: 24px; }
  .author-page nav a, .story-page nav a { display: inline-flex; min-height: 44px; align-items: center; }
  .story-page .opening-copy { padding-top: 175px; }
}

/* Release-news signup at the end of the story. */
.story-signup{text-align:center}
.story-signup h2{max-width:820px;margin:0 auto 24px}
.story-signup-note{max-width:520px;margin:0 auto 36px}
.story-signup-form{max-width:520px;margin:0 auto 22px;text-align:left}
.story-signup .form-note{max-width:520px;margin:0 auto;font-size:13px;opacity:.75}

/* Kit embed (transparent template): make it legible on the dark page and match the palette. */
.formkit-form{font-family:Arial,Helvetica,sans-serif}
.formkit-form legend,.formkit-form label{color:#e9e7e0!important;font:15px/1.5 Arial,Helvetica,sans-serif}
.formkit-form legend{font-weight:700;margin-bottom:4px}
.formkit-form .formkit-checkbox{accent-color:#94dce0}
.formkit-form .formkit-submit{background:#94dce0!important;color:#070e12!important;font-weight:700}
.formkit-form .formkit-submit span{color:inherit!important}
.formkit-form .formkit-powered-by-convertkit{filter:invert(1);opacity:.55}