/* TraVision / a shared landscape, not a framed card.
 * Include after site.css and thread.css. All rules are hero-scoped except the
 * immediate home chapter-rail seam, which continues the cream transition.
 * No text or controls are clipped, and the thread gets its own open column.
 */

.cinematic-hero {
  --hero-seam: clamp(72px, 8vw, 132px);
  --hero-top: clamp(158px, 13vw, 190px);
  --hero-white: #faf6ed;
  --hero-gold: #ecd7af;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #102e23;
  color: var(--hero-white);
}

.cinematic-hero::before,
.cinematic-hero::after {
  display: none;
}

.cinematic-hero .hero-watermark,
.cinematic-hero .hero-art,
.cinematic-hero .hero-photo,
.cinematic-hero .mist,
.cinematic-hero .thread-eye {
  display: none;
}

.cinematic-landscape {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #163b2b;
}

.cinematic-hero .cinematic-poster,
.cinematic-hero .cinematic-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 56% 48%;
  /* A stable crop is intentional: no Ken Burns, scroll parallax or CSS zoom. */
  transform: none;
  animation: none;
}

.cinematic-hero .cinematic-video {
  opacity: 0;
  transition: opacity 650ms ease;
}

.cinematic-hero[data-hero-video-ready="true"] .cinematic-video {
  opacity: 1;
}

.cinematic-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 27, 20, .94) 0%, rgba(6, 27, 20, .85) 30%, rgba(6, 27, 20, .59) 57%, rgba(6, 27, 20, .18) 100%),
    linear-gradient(180deg, rgba(6, 22, 17, .74) 0%, transparent 26%, transparent 61%, rgba(6, 22, 17, .85) 100%);
}

.cinematic-hero .cinematic-shore {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: var(--hero-seam);
  pointer-events: none;
  overflow: hidden;
}

.cinematic-shore path {
  fill: var(--paper, #f4f1ea);
  stroke: none;
}

.cinematic-hero .cinematic-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 5vw, 80px);
  align-items: center;
  min-height: 0;
  padding-top: var(--hero-top);
  padding-bottom: calc(var(--hero-seam) + 64px);
}

.cinematic-hero.cinematic-hero--home {
  min-height: 780px;
  min-height: clamp(780px, 100svh, 1100px);
}

.cinematic-hero--home .cinematic-hero-inner {
  flex: 1;
  padding-bottom: clamp(36px, 4vw, 64px);
}

.cinematic-hero--page .cinematic-hero-inner {
  min-height: 670px;
  min-height: clamp(670px, 84svh, 900px);
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}

.cinematic-hero .hero-copy,
.cinematic-hero .page-hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.cinematic-hero .breadcrumb {
  grid-column: 1;
  align-self: end;
  gap: 6px 12px;
  min-width: 0;
  margin: 0 0 24px;
  color: #e6e9dd;
  line-height: 1.5;
}

.cinematic-hero .breadcrumb a {
  min-height: 36px;
  text-decoration-color: #d9cfb475;
  text-underline-offset: 5px;
}

.cinematic-hero .breadcrumb a:hover {
  color: var(--hero-gold);
  text-decoration-color: currentColor;
}

.cinematic-hero .cinematic-thread-space {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: auto;
  min-height: 260px;
  margin: 0;
  opacity: 1;
  pointer-events: none;
}

.cinematic-hero--home .cinematic-thread-space {
  grid-row: 1;
}

/* The label is part of the measured composition, not another ornamental line.
 * Markup: .thread-prologue with two spans (or a br/em pair), followed by an
 * empty [data-thread-anchor]. The thread module owns the actual SVG stroke.
 * Its anchor's bottom centre is below the label, never through the words. */
.cinematic-hero .cinematic-thread-space .thread-prologue {
  position: absolute;
  top: clamp(8px, 1.8vw, 28px);
  left: 50%;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0 0 28px;
  transform: translateX(-50%);
  color: var(--hero-white);
  font-family: var(--serif);
  font-size: clamp(22px, 1.9vw, 28px) !important;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.012em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 1px 3px #061b14c0, 0 2px 18px #061b1480;
}

.cinematic-hero .thread-prologue > span:not([data-thread-anchor]),
.cinematic-hero .thread-prologue > em {
  display: block;
}

.cinematic-hero .thread-prologue > span:not([data-thread-anchor]) + span:not([data-thread-anchor]),
.cinematic-hero .thread-prologue > em {
  color: var(--hero-gold);
  font-style: italic;
}

.cinematic-hero .thread-prologue [data-thread-anchor] {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 1.25px;
  height: 20px;
  transform: translateX(-50%);
  background: #bd9a63;
  opacity: .84;
  pointer-events: none;
}

html.large-text body .cinematic-hero .cinematic-thread-space .thread-prologue {
  font-size: clamp(24px, 2.1vw, 32px) !important;
  line-height: 1.45;
}

.cinematic-hero .eyebrow {
  margin: 0 0 22px;
  max-width: none;
  color: var(--hero-gold);
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.cinematic-hero .eyebrow::before {
  width: 28px;
  flex: 0 0 28px;
  opacity: .85;
}

.cinematic-hero h1 {
  margin: 0;
  max-width: 100%;
  color: var(--hero-white);
  font-family: var(--serif);
  font-size: clamp(50px, 5.8vw, 88px);
  font-weight: 400;
  line-height: 1.075;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.cinematic-hero--page h1 {
  font-size: clamp(48px, 5.25vw, 80px);
}

.cinematic-hero.rotating-hero[data-slide-kind="history"] h1 {
  max-width: 100%;
  font-size: clamp(48px, 5.15vw, 78px);
  line-height: 1.08;
}

.cinematic-hero h1 em {
  display: inline;
  color: var(--hero-gold);
  font-weight: 400;
}

.cinematic-hero .hero-description,
.cinematic-hero .page-hero-copy > p:not(.eyebrow):not(.audio-status) {
  max-width: 36rem;
  margin-top: 26px;
  color: #f5f3e9;
  font-size: clamp(19px, 1.4vw, 21px) !important;
  line-height: 1.7;
  text-wrap: pretty;
}

.cinematic-hero.rotating-hero[data-slide-kind="history"] .hero-description {
  max-width: 34rem;
  font-size: clamp(20px, 1.65vw, 24px) !important;
  line-height: 1.65;
}

.cinematic-hero .actions {
  gap: 12px 16px;
  margin-top: 28px;
  align-items: stretch;
}

.cinematic-hero .button {
  min-height: 54px;
  max-width: 100%;
  padding: 13px 22px;
  gap: 18px;
  border-radius: 999px;
  font-size: 16px !important;
  line-height: 1.5;
}

.cinematic-hero .button.light {
  background: #efdfbd;
  border-color: #efdfbd;
  color: #13372a;
}

.cinematic-hero .button.ghost,
.cinematic-hero .button.outline {
  color: var(--hero-white);
  background: #102e2380;
  border-color: #f2e8d680;
}

.cinematic-hero .button:hover {
  transform: none;
  background: #fff0cf;
  border-color: #fff0cf;
  color: #102e23;
}

.cinematic-hero .hero-subactions,
.cinematic-hero .page-hero-tools {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  color: #efeee2;
}

.cinematic-hero .listen-button,
.cinematic-hero .cinematic-video-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 46px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid #efe7d56b;
  border-radius: 999px;
  background: #102b2180;
  color: #f6f2e8;
  font-family: var(--sans);
  font-size: 16px !important;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  backdrop-filter: none;
}

.cinematic-hero .listen-button:hover,
.cinematic-hero .cinematic-video-toggle:hover:not(:disabled) {
  background: #f2dfb7;
  color: #123628;
  border-color: #f2dfb7;
}

.cinematic-hero .listen-button[aria-pressed="true"] {
  background: #f2dfb7;
  color: #123628;
  border-color: #f2dfb7;
}

.cinematic-hero .cinematic-video-toggle:disabled {
  opacity: 1;
  cursor: default;
  color: #e2e5d9;
  background: #102b216b;
  border-color: #efe7d540;
}

.cinematic-video-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.cinematic-video-toggle[data-video-action="pause"] .cinematic-play-mark,
.cinematic-video-toggle[data-video-action="play"] .cinematic-pause-mark {
  display: none;
}

.cinematic-hero :is(a, button):focus-visible {
  outline: 3px solid #fff0ca;
  outline-offset: 5px;
}

.cinematic-hero .hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 24px;
  margin-bottom: var(--hero-seam);
  padding: 22px 0 26px;
  border-top: 1px solid #e9e4d633;
  color: #f3efe4;
}

.cinematic-hero .hero-location {
  flex: 1 1 150px;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  letter-spacing: .025em;
}

.cinematic-hero .location-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: #e2ca9d;
}

.cinematic-hero .hero-bottom > .cinematic-video-toggle {
  order: 3;
  flex: 0 1 auto;
  background: #102b2133;
}

.cinematic-hero .carousel-controls {
  order: 2;
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e9e4d633;
  border-radius: 28px;
}

.cinematic-hero .carousel-controls > button {
  min-width: 44px;
  min-height: 46px;
  border-color: transparent;
  background: transparent;
}

.cinematic-hero .carousel-controls > .carousel-pause {
  margin-left: 8px;
  padding: 9px 15px;
  font-size: 16px;
  line-height: 1.5;
  border-left-color: #e9e4d633;
  border-radius: 0 22px 22px 0;
}

.cinematic-hero .slide-selectors button {
  min-width: 44px;
  min-height: 46px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.cinematic-hero .hero-bottom .scroll-cue {
  order: 4;
  display: inline-flex;
  min-height: 46px;
  gap: 12px;
  margin-left: auto;
  font-size: 16px;
  color: #ece6d8;
}

.cinematic-hero .hero-bottom .scroll-cue span {
  font-size: 22px;
}

.cinematic-hero .audio-status {
  max-width: 100%;
  color: #f5f0e4 !important;
  font-size: 16px !important;
}

.cinematic-hero-controls {
  position: relative;
  z-index: 2;
  padding-bottom: calc(var(--hero-seam) + 32px);
}

/* The home silhouette arrives in cream, rather than an unrelated dark bar. */
.cinematic-hero + .chapter-rail {
  background: var(--paper, #f4f1ea);
  color: var(--forest, #14392c);
  border-top: 0;
}

.cinematic-hero + .chapter-rail .chapter-grid {
  border-bottom: 1px solid var(--line, #c8d0c3);
}

.cinematic-hero + .chapter-rail .chapter-link {
  border-color: #c8d0c3;
}

.cinematic-hero + .chapter-rail .chapter-link:hover {
  background: #e8eadf;
}

.cinematic-hero + .chapter-rail .chapter-link .icon {
  color: #826539;
}

.cinematic-hero + .chapter-rail .chapter-link span small {
  color: #405344;
}

.large-text .cinematic-hero .hero-description,
.large-text .cinematic-hero .page-hero-copy > p:not(.eyebrow):not(.audio-status) {
  font-size: 24px !important;
}

.large-text .cinematic-hero :is(.button, .listen-button, .cinematic-video-toggle, .breadcrumb, .hero-location, .carousel-pause, .scroll-cue) {
  font-size: 19px !important;
}

@media (min-width: 1700px) {
  .cinematic-hero .cinematic-hero-inner {
    padding-top: 190px;
  }
  .cinematic-hero--home .cinematic-hero-inner {
    padding-bottom: 64px;
    min-height: 0;
  }
}

@media (max-width: 1100px) {
  .cinematic-hero .cinematic-hero-inner,
  .cinematic-hero--page .cinematic-hero-inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, .75fr);
    column-gap: 26px;
  }
  .cinematic-hero h1 {
    font-size: clamp(50px, 6.4vw, 70px);
  }
  .cinematic-hero--page h1,
  .cinematic-hero.rotating-hero[data-slide-kind="history"] h1 {
    font-size: clamp(48px, 5.8vw, 64px);
  }
  .cinematic-hero .hero-bottom .scroll-cue {
    display: none;
  }
  .cinematic-hero .hero-bottom {
    gap: 14px 20px;
  }
}

@media (max-width: 767px) {
  .cinematic-hero {
    --hero-top: 148px;
    --hero-seam: 74px;
  }
  .cinematic-hero.cinematic-hero--home {
    min-height: 0;
  }
  .cinematic-hero .cinematic-hero-inner,
  .cinematic-hero--page .cinematic-hero-inner,
  .large-text .cinematic-hero .cinematic-hero-inner {
    display: block;
    min-height: 0;
    padding-top: var(--hero-top);
    padding-bottom: calc(var(--hero-seam) + 45px);
  }
  .cinematic-hero--home .cinematic-hero-inner,
  .large-text .cinematic-hero--home .cinematic-hero-inner {
    padding-bottom: 36px;
  }
  .cinematic-hero .cinematic-thread-space {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 110px;
    margin-top: 24px;
    clear: both;
  }
  .cinematic-hero .cinematic-thread-space:empty {
    display: none;
  }
  .cinematic-hero .cinematic-thread-space .thread-prologue {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 240px);
    margin: 0 0 0 auto;
    transform: none;
    font-size: 22px !important;
    text-align: right;
  }
  .cinematic-hero .thread-prologue [data-thread-anchor] {
    right: 0;
    left: auto;
    width: 1.05px;
    opacity: .68;
    transform: none;
  }
  html.large-text body .cinematic-hero .cinematic-thread-space .thread-prologue {
    font-size: 24px !important;
  }
  .cinematic-hero .cinematic-poster,
  .cinematic-hero .cinematic-video {
    object-position: 60% 48%;
  }
  .cinematic-shade {
    background:
      linear-gradient(90deg, rgba(7, 28, 21, .9), rgba(7, 28, 21, .7)),
      linear-gradient(180deg, rgba(6, 22, 17, .55), transparent 28%, rgba(6, 22, 17, .68));
  }
  .cinematic-hero .eyebrow {
    margin-bottom: 20px;
    max-width: 100%;
    font-size: 16px !important;
    letter-spacing: .055em;
  }
  .cinematic-hero h1,
  .cinematic-hero--page h1 {
    font-size: clamp(42px, 10.2vw, 64px);
    line-height: 1.09;
    letter-spacing: -.035em;
  }
  .cinematic-hero.rotating-hero[data-slide-kind="history"] h1 {
    font-size: clamp(40px, 9.3vw, 60px);
    line-height: 1.1;
  }
  .cinematic-hero .hero-description,
  .cinematic-hero .page-hero-copy > p:not(.eyebrow):not(.audio-status) {
    max-width: 100%;
    margin-top: 24px;
    font-size: 19px !important;
    line-height: 1.7;
  }
  .cinematic-hero.rotating-hero[data-slide-kind="history"] .hero-description {
    max-width: 100%;
    font-size: 21px !important;
  }
  .cinematic-hero .button {
    padding: 12px 18px;
    gap: 14px;
    min-height: 54px;
    font-size: 16px !important;
  }
  .cinematic-hero .actions {
    gap: 12px;
  }
  .cinematic-hero .hero-bottom {
    flex-direction: row;
    align-items: center;
    gap: 18px 12px;
    padding-top: 22px;
    padding-bottom: 24px;
  }
  .cinematic-hero .hero-location {
    flex: 1 1 100%;
  }
  .cinematic-hero .hero-bottom > .cinematic-video-toggle {
    order: 2;
  }
  .cinematic-hero .carousel-controls {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 6px;
    border-radius: 24px;
  }
  .cinematic-hero .carousel-controls > .carousel-pause {
    margin-left: 6px;
  }
  .cinematic-hero .slide-selectors {
    gap: 0;
  }
  .cinematic-hero .breadcrumb {
    margin-bottom: 26px;
  }
  .large-text .cinematic-hero .hero-description,
  .large-text .cinematic-hero .page-hero-copy > p:not(.eyebrow):not(.audio-status) {
    font-size: 23px !important;
  }
}

@media (max-width: 380px) {
  .cinematic-hero .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .cinematic-hero .actions .button {
    justify-content: space-between;
  }
  .cinematic-hero .carousel-controls > .carousel-pause {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-hero .cinematic-video,
  .cinematic-hero .hero-copy {
    transition: none;
  }
}

[data-motion="off"] .cinematic-hero .cinematic-video {
  transition: none;
}

/* One real copy block, gently faded by home-carousel.js. No translated text,
 * hidden duplicate headings, fixed-height clipping or index-dependent type jump.
 * The common type scale survives reversal of the two authored messages. */
#home-carousel[data-carousel-enhanced] .hero-copy {
  opacity: 1;
  transform: none !important;
  transition: none !important;
  height: auto;
  max-height: none;
  overflow: visible;
}

#home-carousel[data-carousel-enhanced] h1 {
  max-width: 100%;
  font-size: clamp(48px, 5.15vw, 78px);
  line-height: 1.08;
}

#home-carousel[data-carousel-enhanced] .hero-description {
  max-width: 34rem;
  font-size: clamp(20px, 1.65vw, 24px) !important;
  line-height: 1.65;
}

html.large-text #home-carousel[data-carousel-enhanced] h1 {
  font-size: clamp(56px, 6vw, 92px);
}

html.large-text #home-carousel[data-carousel-enhanced] .hero-description {
  font-size: 25px !important;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  #home-carousel[data-carousel-enhanced] h1 {
    font-size: clamp(48px, 5.8vw, 64px);
  }
}

@media (max-width: 767px) {
  #home-carousel[data-carousel-enhanced] h1 {
    font-size: clamp(40px, 9.3vw, 60px);
    line-height: 1.1;
  }
  #home-carousel[data-carousel-enhanced] .hero-description {
    max-width: 100%;
    font-size: 21px !important;
  }
  html.large-text #home-carousel[data-carousel-enhanced] h1 {
    font-size: clamp(46px, 10.8vw, 68px);
  }
}

@media print {
  .cinematic-hero,
  .cinematic-hero.cinematic-hero--home {
    min-height: 0 !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0;
  }
  .cinematic-landscape,
  .cinematic-shore,
  .cinematic-hero .cinematic-thread-space,
  .cinematic-hero .cinematic-video-toggle,
  .cinematic-hero .hero-bottom {
    display: none !important;
  }
  .cinematic-hero .cinematic-hero-inner {
    display: block;
    min-height: 0;
    padding: 30px 0;
  }
  .cinematic-hero h1,
  .cinematic-hero h1 em,
  .cinematic-hero p {
    color: #000 !important;
  }
}