/* THE MIDWAY GOES STILL — Cinematic final touches
   Natural photographic emphasis, quiet typography, unobstructed reading and music. */
:root { --film-ink: #0c1820; --film-ivory: #efe6d8; --film-brass: #c7ae8b; }

/* A recovered print, not a glossy fantasy poster. */
.hero__art {
  background: #11191e;
  border: 1px solid rgba(204,179,143,.54);
  box-shadow: 0 16px 42px rgba(0,0,0,.30), 0 0 0 3px rgba(4,13,17,.32);
}
.hero__art > img {
  filter: brightness(1.095) saturate(.76) contrast(1.035) !important;
  image-rendering: auto;
}
.hero__art figcaption {
  color: #d1c5b4;
  font-size: .72rem;
  letter-spacing: .085em;
  line-height: 1.45;
}
.hero__copy { max-width: 460px; }
.hero__eyebrow { color: #d7c6a8; }
.hero__line { color: #f0dfc8; }
.hero__intro { color: #d2d0cc; line-height: 1.67; }
.hero__credit { letter-spacing: .075em; color: #bdb7ab; }
.hero__actions .button--primary { min-height: 52px; box-shadow: 0 7px 19px rgba(0,0,0,.16); }
.hero__actions .button--primary:hover { background: #e6cfaa; }
.hero__actions .button--ghost { text-underline-offset: 5px; }
/* Desktop: visually pair the faces with the headline rather than letting the image float low. */
@media (min-width: 901px) {
  .hero__content { gap: clamp(30px,3.8vw,54px); padding-block: 63px 69px; }
  .hero__art { transform: translateY(-22px); }
}
/* Preserve the photograph's full original composition; prevent cropping the horse or the keeper. */
.hero__art > img { aspect-ratio: 1310 / 530; object-fit: contain; object-position: center; }

/* The photographs should become progressively colder as the carousel loses its warmth. */
.book-spread[data-book-page="0"] .book-spread__picture > img { filter: brightness(1.055) saturate(.83) contrast(1.025); }
.book-spread[data-book-page="1"] .book-spread__picture > img { filter: brightness(1.025) saturate(.73) contrast(1.06); }
.book-spread[data-book-page="2"] .book-spread__picture > img { filter: brightness(1.00) saturate(.66) contrast(1.075); }
.book-spread[data-book-page="3"] .book-spread__picture > img { filter: brightness(.99) saturate(.57) contrast(1.065); }
.book-spread[data-book-page="4"] .book-spread__picture > img { filter: brightness(.985) saturate(.53) contrast(1.04); }

/* A little more contrast, less gold dust, more authentic film-print restraint. */
.gallery-grid .photo-plate > img { filter: brightness(1.02) saturate(.78) contrast(1.04); }
.gallery-grid .photo-plate:hover > img { filter: brightness(1.06) saturate(.82) contrast(1.045); }
.gallery-grid .photo-plate .gallery-item__caption { background: #121b1e !important; }
.gallery-grid .photo-plate .gallery-item__caption small { color: #d3cec5; }
.gallery-act__epigraph { color: #d9c6ad; }

/* Light remains scattered throughout the site but never becomes a strobing foreground. */
.hero .fae-garland { opacity: .35; }
.hero .fae-light, .hero .midway-ambient-glimmer { filter: brightness(.7); }
.storybook-section .midway-ambient-glimmer, .gallery-section .midway-ambient-glimmer,
.soundtrack-section .midway-ambient-glimmer { filter: brightness(.72); }
.book-spread[data-book-page="4"] .midway-picture-glimmer { opacity: .12 !important; }
.end-section .midway-fairy-strand { opacity: .4; }

/* Keep accessible keyboard outlines visible against the dark interface. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #f4d9a8; outline-offset: 4px; }
#prologue, #origins-gallery, #story, #storybook, #gallery, #soundtrack, #about { scroll-margin-top: 84px; }
.recording-current audio { max-width: 100%; }
.recording-row__name { overflow-wrap: anywhere; }

@media (max-width: 740px) {
  .hero__content { gap: 19px; padding: 12px 0 30px; }
  .hero__art { margin: 0; padding: 3px; }
  .hero__art > img { aspect-ratio: 1310/530; object-fit: contain; }
  .hero__art figcaption { font-size: .69rem; line-height: 1.4; padding: 10px 9px 6px; letter-spacing: .035em; }
  .hero__copy { padding-inline: 0; }
  .hero h1 { letter-spacing: -.041em; font-size: clamp(3.07rem,11.25vw,4.05rem); line-height: 1.025; margin-bottom: 13px; }
  .hero__line { font-size: clamp(1.19rem,4.65vw,1.5rem); margin-bottom: 13px; max-width: 29ch; }
  .hero__intro { font-size: .98rem; line-height: 1.62; max-width: 39ch; margin-bottom: 15px; }
  .hero__meta { display: none; }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__actions { gap: 5px; }
  .hero__actions .button--primary { width: 100%; min-height: 53px; font-size: .87rem; }
  .hero__actions .button--ghost { min-height: 43px; align-self: flex-start; justify-content: flex-start; font-size: .83rem; }
  .hero__credit { margin-top: 17px; font-size: .64rem; line-height: 1.5; }
  .hero .fae-garland { opacity: .22; }
  .book-navigation button, .recording-current__actions button { min-height: 44px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(2.9rem,10.7vw,3.2rem); }
  .hero__art figcaption { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__art, .hero__art img, .gallery-grid .photo-plate > img { transition: none !important; }
}