/* Approved blue-gray portrait treatment and separate ivory lettering. */
:root { --scene-ivory: #f1efe5; --scene-blue: #527787; }
body {
  background: var(--scene-blue) url('assets/scene-bluegray-approved.png') center top / cover no-repeat fixed;
}
.intro-surface {
  background: var(--scene-blue) url('assets/scene-bluegray-approved.png') center / cover no-repeat;
}
.intro-light {
  background: radial-gradient(ellipse at 80% 30%, rgba(202,221,225,.08), transparent 65%);
}
.hero-portrait, .intro-photo { mix-blend-mode: normal; }
.calligraphy-title { display: block; width: 100%; height: auto; filter: none; transform: none; }
.masthead { border-bottom-color: rgba(233,240,236,.19); }
.masthead-right { color: var(--scene-ivory); }
.masthead-right .status-dot { background: #e2eae4; }
.intro-replay {
  color: var(--scene-ivory);
  border-color: rgba(235,244,238,.28);
  background: rgba(52,83,96,.22);
}
.intro-replay:hover { background: rgba(222,237,233,.16); }
.intro-edition { color: var(--scene-ivory); }
.intro-caption { text-shadow: 0 1px 4px rgba(23,54,67,.3); }
.intro-caption .intro-deck, .intro-caption .intro-name { color: var(--scene-ivory); }
.paper-stack { background: rgba(250,251,245,.96); }
.section-tabs { background: rgba(233,245,239,.8); }

@media(min-width:761px) {
  .hero-copy {
    inset: 0 auto auto 47%;
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .hero-copy h1 {
    left: 0;
    width: min(100%, calc((var(--reader-top) - 110px) * 1.9));
    max-width: 900px;
    margin: 0;
    padding: 0;
  }
}
@media(min-width:761px) and (max-height:740px) {
  .intro-copy { width: min(60vw, 86svh); }
}
@media(max-width:760px) {
  .intro-copy { left: 36%; width: 62%; }
  .intro-photo-wrap {
    mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 34%), linear-gradient(#000 0%, #000 31%, transparent 39%);
    mask-composite: add;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 34%), linear-gradient(#000 0%, #000 31%, transparent 39%);
    -webkit-mask-composite: source-over;
  }
  .hero-copy {
    inset: 0 auto auto 35%;
    display: flex;
    align-items: center;
    width: 63%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .hero-copy h1 { left: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
  .paper-stack { background: rgba(250,251,245,.96); }
}