/* =====================================================================================================
   DEPTH (loaded after site.css): nothing sits on a flat colour. A fixed cut-paper sky moves slowly behind
   every page, sections are sheets of paper laid over one another with torn edges (the pages of history),
   scenes are built from separate paper layers that move at their own rates.
   All art is Flow cut paper; code only stacks it, lights it and moves it.
   ===================================================================================================== */
html { background: #14171c; }
body { background: none; }
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #14171c; }
.bd-far { position: absolute; inset: -12% -2%; background: url("art/bg-sky.webp") center / cover; opacity: .6; will-change: transform; }
.bd-clouds { position: absolute; inset: 0; will-change: transform; }
.bd-c { position: absolute; opacity: .16; }
.bd-c img { width: 100%; height: auto; display: block; }
.bd-c1 { width: min(46vw, 620px); top: 16%; left: -6%; }
.bd-c2 { width: min(38vw, 520px); top: 54%; right: -8%; }
.bd-c3 { width: min(30vw, 420px); top: 88%; left: 22%; }
.bd-shade { position: absolute; inset: 0; background: radial-gradient(110% 70% at 82% 0%, rgba(43,58,122,.34), rgba(43,58,122,0) 62%), linear-gradient(to bottom, rgba(20,23,28,.46), rgba(20,23,28,.8)); }
.bd-shade::after { content: ""; position: absolute; inset: 0; background: url("art/grain.webp"); opacity: .07; }
@keyframes drift-a { from { transform: translateX(-3vw); } to { transform: translateX(3vw); } }
@keyframes drift-b { from { transform: translateX(2.5vw); } to { transform: translateX(-2.5vw); } }
.bd-c1 img, .sc-c1 img, .qb-c1 img { animation: drift-a 64s ease-in-out infinite alternate; }
.bd-c2 img, .sc-c2 img, .qb-c2 img { animation: drift-b 82s ease-in-out infinite alternate; }
.bd-c3 img, .sc-c3 img { animation: drift-a 96s ease-in-out infinite alternate; }
.is-off .sc-cloud img { animation-play-state: paused; }

/* ---- sheets of paper ---- */
.sheet { position: relative; z-index: 1; --tone: #242e49; --edge-h: clamp(54px, 8vw, 118px); background: var(--tone) url("art/grain.webp"); background-blend-mode: soft-light; }
.sheet.t2 { --tone: #2b3860; }
.sheet.t3 { --tone: #242e49; }
.sheet.t4 { --tone: #242734; }
.edge { position: absolute; inset-inline: 0; bottom: calc(100% - 1px); height: var(--edge-h); margin: 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 -10px 16px rgba(0,0,0,.4)); }
.edge img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* the shadow belongs to the torn top only: clip what the blur leaks under the strip's straight bottom */
.edge { clip-path: inset(-90px 0 0 0); }
/* the strip's own paper melts into the sheet's paper (same tone, same grain), so no line shows where the image ends */
.edge::after { content: ""; position: absolute; inset: 45% 0 -1px 0; background: var(--tone) url("art/grain.webp"); background-blend-mode: soft-light; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%); mask-image: linear-gradient(to bottom, transparent, #000 85%); }
.edge-back { z-index: 0; bottom: calc(100% + 10px); filter: brightness(.7) drop-shadow(0 -8px 14px rgba(0,0,0,.35)); }
.edge-back img { transform: scaleX(-1); }
.edge-back::after { display: none; }
.edge-end { bottom: auto; top: calc(100% - 1px); transform: scaleY(-1); }
.quote-band, .q, .work, .chapter { overflow: visible; overflow-x: clip; }
.chapter, .work, .q, .section { isolation: isolate; }
.work + .work, .q + .q { border-top: 0; }
.quote-band.sheet::before { background: radial-gradient(60% 80% at 50% 45%, rgba(74,95,174,.35), rgba(43,56,96,0) 75%); }

/* ---- section scenes: a faint paper landscape behind the text, drifting slower than the page ---- */
.sec-bg { position: absolute; inset: -6% 0; z-index: -1; margin: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); }
.sec-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.sheet .sec-bg img { opacity: .2; mix-blend-mode: luminosity; }
.ch-voice { background: linear-gradient(to bottom, rgba(11,14,20,0), #0b0e14 9%, #0b0e14 84%, rgba(11,14,20,0)); }
.voice-stage { isolation: isolate; }
.voice-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("art/bg-ripples.webp") 30% 50% / cover; opacity: .34; -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 95%); mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 95%); }
.intel-file { background: var(--paper) url("art/grain.webp"); background-blend-mode: soft-light; transform: rotate(-.6deg); box-shadow: 0 30px 60px rgba(0,0,0,.45), 14px 16px 0 rgba(20,23,28,.55); }
.un-paper { background: #f2ecdc url("art/grain.webp"); background-blend-mode: soft-light; }

/* ---- home hero: a scene of separate paper layers ---- */
.home-hero { padding-bottom: clamp(140px, 19vh, 210px); }
.home-hero::before { z-index: 0; background: radial-gradient(64% 80% at 30% 40%, rgba(58,79,160,.95) 0%, rgba(43,58,122,.72) 26%, rgba(32,42,70,.3) 58%, rgba(32,42,70,0) 88%); }
.scene { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.sc { position: absolute; margin: 0; will-change: transform; }
.sc img { display: block; width: 100%; height: auto; }
.sc-hill { left: -4%; right: -4%; }
.sc-hill img { height: 100%; object-fit: cover; object-position: 50% 0; }
.sc-far { height: max(11.6vw, 84px); bottom: clamp(74px, 10.5vw, 170px); filter: brightness(.4) saturate(1.5); }
.sc-mid { height: max(13.3vw, 96px); bottom: clamp(30px, 4.6vw, 80px); filter: brightness(.34) saturate(1.5); }
.sc-near { height: max(14.2vw, 104px); bottom: -2px; filter: drop-shadow(0 -10px 18px rgba(0,0,0,.4)); }
.sc-moon { width: clamp(64px, 7.4vw, 124px); top: 12%; right: 41%; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)) brightness(.96); }
.sc-c1 { width: min(17vw, 240px); top: 21%; right: 33%; filter: brightness(.6); }
.sc-c2 { display: none; }
.sc-c3 { width: min(30vw, 420px); bottom: clamp(44px, 6.4vw, 104px); right: 30%; filter: brightness(.55) drop-shadow(0 14px 22px rgba(0,0,0,.4)); }
.scene .hero-photo { position: absolute; inset-block: 0; left: 0; right: auto; width: min(58vw, 900px); z-index: auto; }
.home-hero .hero-text { position: relative; z-index: 2; }
.home-hero .hero-cue { z-index: 2; }
.statement { position: relative; }
.statement::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: clamp(160px, 30vh, 320px); z-index: -1; background: linear-gradient(to bottom, #23334b, rgba(35,51,75,0)); }
.light-words .lw { transition: color 320ms ease; }
.js .light-words .lw:not(.on) { color: rgba(236,230,218,.2); }
.statement em .lw.on { color: var(--bronze); }
.qb-c1, .qb-c2 { z-index: -1; opacity: .5; filter: brightness(.7); }
.qb-c1 { width: min(36vw, 480px); top: 12%; left: 4%; }
.qb-c2 { width: min(30vw, 400px); bottom: 10%; right: 5%; }

/* ---- photographs are prints lying on a sheet of paper; the sheet slides out as the print arrives ---- */
:where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo { display: grid; }
:where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo > .photo-btn { grid-area: 1 / 1; }
:where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo > figcaption { grid-row: 2; }
:where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo::before { content: ""; grid-area: 1 / 1; z-index: -1; background: #d8d0bf url("art/grain.webp"); background-blend-mode: soft-light; box-shadow: 0 16px 34px rgba(0,0,0,.42); transform: translate(-12px, 12px) rotate(-1.6deg); transition: transform 900ms cubic-bezier(.16,1,.3,1) 120ms, opacity 300ms ease 120ms; }
.ll-item:nth-child(even) .photo::before, .duo-photos .photo:last-child::before, .photo-law::before, .photo-war-side::before { transform: translate(12px, 12px) rotate(1.4deg); }
.photo-oval::before { border-radius: 50%; }
.js :where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo:not(.is-in)::before { opacity: 0; transform: none; }
.photo-btn { box-shadow: 0 10px 26px rgba(0,0,0,.35); }

/* ---- cards and details ---- */
.work-card { box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.tl-draw { position: absolute; inset-block: 0; inset-inline-start: calc(9ch + 28px); width: 1px; background: var(--bronze); transform-origin: top; transform: scaleY(var(--p, 1)); }
.js .tl-draw { --p: 0; }
.book { background-image: url("art/grain.webp"); background-blend-mode: soft-light; }
.menu-inner { background: #242e49 url("art/grain.webp"); background-blend-mode: soft-light; }
.next-page { border-top: 0; }

@media (max-width: 900px) {
  .scene .hero-photo { width: 100%; bottom: auto; height: 74%; }
  .home-hero { padding-bottom: 104px; }
  .home-hero .hero-name { font-size: 22vw; }
  .sc-moon { top: 10%; right: 9%; }
  .sc-c1 { width: 44vw; top: 15%; right: -6%; }
  .sc-c2 { display: none; }
  .sc-c3 { width: 46vw; right: 50%; bottom: 34px; }
  .sc-far { bottom: 86px; }
  .sc-mid { bottom: 40px; }
  .tl-draw { inset-inline-start: 6px; }
  .bd-c { opacity: .12; }
  :where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo::before { transform: translate(-7px, 8px) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-c img, .sc-cloud img { animation: none; }
  .js .tl-draw { --p: 1; }
  .js .light-words .lw:not(.on) { color: inherit; }
  .js :where(.ll-item, .work, .tl-body, .chapter, .person, .continuity) .photo:not(.is-in)::before { opacity: 1; transform: translate(-12px, 12px) rotate(-1.6deg); }
}
html.reduce-motion .bd-c img, html.reduce-motion .sc-cloud img { animation: none; }
html.reduce-motion .tl-draw { --p: 1 !important; }
html.reduce-motion .light-words .lw { color: inherit !important; }
html.reduce-motion .photo::before { opacity: 1 !important; transform: translate(-12px, 12px) rotate(-1.6deg) !important; }

/* banners: the paper scene stays behind the words */
.ph-bg img { opacity: .5; }
.page-hero h1, .page-hero .lead { text-shadow: 0 2px 26px rgba(20,23,28,.75); }