/* Full-bleed editorial cover; clouds enter only after scrolling. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 40; padding-block: 23px; background: transparent; border: 0; }
.site-header .brand { font-size: 2.4rem; }
.site-header .main-nav { gap: 34px; }
.site-header .main-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rose-light); font-size: .75rem; letter-spacing: .035em; }
.site-header .nav-contact { padding: 0; border: 0; border-radius: 0; background: transparent; }
.site-header .nav-contact:hover { color: var(--paper); background: transparent; text-decoration: underline; text-underline-offset: 6px; }
.site-header .main-nav a::after { bottom: 8px; }
.site-header .menu-toggle { border: 0; border-radius: 0; padding-inline: 0; font-size: .8125rem; }
.card-story { --cover-height: 100svh; --cover-axis: 50%; }
.story-animated { height: calc(var(--cover-height) + 125svh); }
.story-animated .story-stage { height: var(--cover-height); top: 0; background: var(--wine); }
.story-intro { position: relative; isolation: isolate; overflow: clip; min-height: var(--cover-height); padding-top: var(--cover-copy-top, 420px); padding-bottom: 100px; background: var(--wine); }
.story-animated .story-intro { z-index: 3; min-height: 0; padding-top: var(--cover-copy-top, 420px); padding-bottom: 0; pointer-events: none; }
.story-intro::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--wine) url('../assets/hero-editorial-backdrop.png') center / cover no-repeat; pointer-events: none; }
.hero-masthead { position: absolute; z-index: -2; inset: clamp(76px, 9svh, 100px) auto auto var(--cover-axis); width: 100%; transform: translateX(-50%); margin: 0; padding-right: .075em; color: var(--butter); text-align: center; font: 400 min(27vw, 42svh, 460px)/.8 Georgia, 'Times New Roman', serif; letter-spacing: -.075em; pointer-events: none; }
/* Keep the portrait's lower feather below the opening frame, under the cloud transition. */
.hero-alanis { --portrait-inset: clamp(108px, 13.5svh, 140px); position: absolute; z-index: -1; top: var(--portrait-inset); left: var(--cover-axis); width: min(55vw, calc((100svh - 76px) * .81), 850px); aspect-ratio: 896 / 1195; transform: translateX(-50%); pointer-events: none; mask-image: linear-gradient(to right, transparent, #000 12%, #000 86%, transparent), linear-gradient(to bottom, #000 max(90%, calc(100svh - var(--portrait-inset))), #000000e6 95%, transparent 100%); mask-composite: intersect; }
.hero-alanis-original { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.story-intro .hero-copy, .story-animated .story-intro .hero-copy { width: min(34%, 400px); max-width: 400px; padding: 0; pointer-events: auto; }
.story-intro .eyebrow, .story-animated .story-intro .eyebrow { color: var(--rose); font-size: .625rem; line-height: 1.6; letter-spacing: .17em; margin-bottom: 16px; }
.story-intro h1, .story-animated .story-intro h1 { color: var(--rose-light); font-size: clamp(2.3rem, min(3.75vw, 6svh), 4rem); font-weight: 300; line-height: 1.04; letter-spacing: -.06em; }
.story-intro h1 br, .story-animated .story-intro h1 br { display: initial; }
.story-intro h1 em, .story-animated .story-intro h1 em { display: block; color: var(--rose); font-size: 1.28em; line-height: 1.02; margin: 4px 0 0; letter-spacing: -.035em; }
.story-intro .hero-description, .story-animated .hero-description { max-width: 340px; color: var(--rose); font-size: .9375rem; line-height: 1.65; margin-top: 20px; }
.story-intro .hero-actions, .story-animated .hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.story-intro .hero-actions .button { min-height: 52px; padding: 12px 22px; gap: 20px; border: 0; border-radius: 999px; background: var(--rose-light); color: var(--wine); font-size: .8125rem; font-weight: 500; text-decoration: none; box-shadow: none; }
.story-intro .hero-actions .button:hover { background: var(--paper); transform: translateY(-2px); }
.story-intro .hero-actions .button-icon { width: 20px; height: 24px; border: 0; font-size: 1.2rem; }
.hero-social { display: flex; align-items: center; gap: 0; }
.hero-social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--rose); border-radius: 50%; transition: color .2s, background-color .2s; }
.hero-social svg { display: block; width: 17px; height: 17px; }
.hero-social a:hover { color: var(--paper); background: #e7aebf12; }
.hero-social a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.story-intro .story-scroll-link, .story-animated .story-deck-note, .story-animated .story-deck-controls { display: none; }
.story-animated .card-front { border-color: rgb(254 219 226 / 0.3137); background: var(--paper); }
.story-animated .card-face { border-radius: 4px; box-shadow: 0 24px 60px rgb(75 24 31 / 0.2510), 0 2px 8px rgb(75 24 31 / 0.0941); }
.story-animated .story-clouds, .story-animated .story-paper { opacity: var(--cloud-opacity, 0); }
/* Copy and navigation share the page gutter; no separate optical offset. */
@media (min-width: 761px) and (max-height: 800px) {
  .story-intro h1, .story-animated .story-intro h1 { font-size: clamp(2.3rem, 3.5vw, 3.5rem); }
  .story-intro .hero-description, .story-animated .hero-description { font-size: .875rem; margin-top: 20px; }
  .story-intro .hero-actions, .story-animated .hero-actions { margin-top: 20px; }
  .story-intro .hero-actions .button { min-height: 48px; }
}
@media (min-width: 761px) and (max-height: 620px) {
  .site-header { padding-block: 12px; }
  .site-header .brand { font-size: 2rem; }
  .hero-masthead { top: 56px; font-size: min(19vw, 28svh, 160px); }
  .hero-alanis { --portrait-inset: 92px; width: min(49vw, calc((100svh - 54px) * .78), 600px); }
  .story-intro h1, .story-animated .story-intro h1 { font-size: clamp(1.9rem, 3.1vw, 2.75rem); }
  .story-intro .eyebrow, .story-animated .story-intro .eyebrow { margin-bottom: 14px; }
  .story-intro .hero-description, .story-animated .hero-description { margin-top: 14px; line-height: 1.55; }
  .story-intro .hero-actions, .story-animated .hero-actions { margin-top: 16px; }
  .story-intro .hero-actions .button { min-height: 44px; padding-block: 8px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .story-intro .hero-copy, .story-animated .story-intro .hero-copy { width: 34%; max-width: 310px; }
  .story-intro h1, .story-animated .story-intro h1 { font-size: clamp(2rem, 3.9vw, 2.65rem); }
  .story-intro .hero-description, .story-animated .hero-description { font-size: .875rem; max-width: 245px; }
  .hero-alanis { --portrait-inset: clamp(135px, 18svh, 170px); left: 52%; width: min(66vw, calc((100svh - 76px) * .81)); }
  .story-intro .hero-actions, .story-animated .hero-actions { gap: 10px; }
}
@media (max-width: 760px) {
  .site-header { padding-block: 15px; }
  .site-header .brand { font-size: 2rem; }
  .menu-enabled .site-header .main-nav.is-open { position: absolute; inset: 65px 16px auto; width: auto; padding: 14px 22px; gap: 0; background: var(--wine); box-shadow: 0 18px 40px rgb(75 24 31 / 0.2510); }
  .menu-enabled .site-header .main-nav a { min-height: 48px; padding: 12px 0; border: 0; }
  .menu-enabled .site-header .main-nav .nav-contact { color: var(--rose-light); }
  .story-intro::before { background-position: 47% center; }
  .hero-masthead { top: 88px; left: 50%; font-size: 26vw; line-height: .82; letter-spacing: -.07em; }
  .story-intro, .story-animated .story-intro { padding-top: max(180px, calc(116px + 21.32vw)); }
  .story-intro .hero-copy, .story-animated .story-intro .hero-copy { width: 54%; max-width: 245px; }
  .story-intro .eyebrow, .story-animated .story-intro .eyebrow { max-width: 170px; font-size: .5625rem; line-height: 1.6; letter-spacing: .09em; margin-bottom: 16px; }
  .story-intro h1, .story-animated .story-intro h1 { font-size: clamp(1.8rem, 7.6vw, 2.8rem); line-height: 1.08; }
  .story-intro h1 em, .story-animated .story-intro h1 em { font-size: 1.28em; margin-top: 4px; }
  .story-intro .hero-description, .story-animated .hero-description { max-width: 185px; font-size: .8125rem; line-height: 1.65; margin-top: 16px; }
  .story-intro .hero-actions, .story-animated .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
  .story-intro .hero-actions .button { min-height: 48px; padding: 10px 19px; gap: 16px; font-size: .75rem; white-space: nowrap; }
  .hero-social { margin-left: 0; }
  .hero-social svg { width: 16px; height: 16px; }
  /* Keep Alanis present beside the copy on the first mobile screen. The cloud
     transition may now meet the portrait sooner instead of reserving a large
     empty strip above her. */
  .hero-alanis, .story-animated .hero-alanis {
    --portrait-inset: clamp(232px, 30svh, 258px);
    top: var(--portrait-inset);
    left: 76%;
    width: min(100vw, 620px);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 86%, transparent), linear-gradient(to bottom, #000 72%, #000000d9 84%, transparent 100%);
  }
  .story-animated .post-header small { display: none; }
  .story-animated .post-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .story-animated .post-footer { padding-top: 4px; }
}
@media (max-width: 380px) {
  .story-intro, .story-animated .story-intro { padding-top: max(176px, calc(116px + 21.32vw)); }
  .story-intro h1, .story-animated .story-intro h1 { font-size: 1.55rem; }
  .story-intro .eyebrow, .story-animated .story-intro .eyebrow { font-size: .5rem; }
}

/* Keep tall tablet covers composed rather than leaving an empty lower third. */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 1000px) {
  .hero-alanis { left: 50%; width: max(74vw, 640px); mask-image: linear-gradient(to right, transparent, #000 12%, #000 86%, transparent), linear-gradient(to bottom, #000 75%, transparent 100%); }
}
/* Landscape tablets retain one aligned action row instead of a tall button stack. */
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 740px) {
  .story-intro .hero-copy, .story-animated .story-intro .hero-copy { width: 45%; max-width: 360px; }
  .story-intro h1, .story-animated .story-intro h1 { font-size: clamp(1.85rem, 3.5vw, 2.2rem); }
  .story-intro .hero-description, .story-animated .hero-description { max-width: 290px; line-height: 1.55; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .story-animated .post-header { font-size: 10px; padding: 10px; gap: 7px; }
  .story-animated .post-header small { display: none; }
  .story-animated .post-avatar { width: 24px; height: 24px; font-size: 22px; }
  .story-animated .post-caption { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Finite opening. Without the early script these layers never cover the site. */
.opening-screen { display: none; position: fixed; inset: 0; z-index: 90; color: var(--butter); isolation: isolate; }
.opening-veil { position: absolute; inset: 0; background: #4b181f; z-index: -1; }
.opening-word { position: absolute; margin: 0; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; white-space: nowrap; transform-origin: 50% 50%; pointer-events: none; }
.opening-skip { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); right: var(--gutter); min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--butter); font: .8125rem/1.5 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }
.opening-skip:focus-visible { outline: 2px solid var(--butter); outline-offset: 6px; }
html[data-opening] .opening-screen { display: block; }
html[data-opening] .hero-masthead { visibility: hidden; }
html[data-opening] :is(.site-header, .hero-copy, .hero-alanis, .story-cards) { opacity: 0; }
html[data-opening="reveal"] .opening-screen { pointer-events: none; }
html[data-opening="reveal"] .opening-skip { opacity: 0; pointer-events: none; }
.portrait-variant { opacity: 0; pointer-events: none; transition: opacity 520ms cubic-bezier(.16,1,.3,1); }
.portrait-variant.is-hovering { opacity: 1; transition-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .opening-screen, html[data-opening] .opening-screen { display: none; }
  html[data-opening] .hero-masthead { visibility: visible; }
  html[data-opening] :is(.site-header, .hero-copy, .hero-alanis, .story-cards) { opacity: 1; }
  .portrait-variant { display: none; }
}
html[data-motion="reduced"] .portrait-variant { display: none; }
html[data-opening="pending"] .opening-word { visibility: hidden; }