/* Dynasty Library — Dynasty Wings, "album pulled from the shelf".
   Loads after library.css, publications.css and lane.css. Keeps every hook the
   read-along and player depend on (.act, .segment, .act-player, .lane-dock) and
   re-dresses them: a midnight listening room, a cover-first sleeve, a warm
   ivory reading field, restrained brass. No cards, pills, or panels. */

.wg-page{
  --ink:#07080b; --near:#0d0f14; --slate:#16181f; --edge:#23252c;
  --amber:#b8925a; --amber-soft:#8d6f43; --mute:#8b8678; --bone:#e9e3d5; --off:#f4eee1;
  --brass:#b8925a; --brass-hi:#d2b07c;
  --paper:#f2ebdc; --paper-ink:#1d1914; --paper-future:#3b352d; --paper-read:#a2998a; --paper-rule:#d9cdb5;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:'Spectral',Georgia,"Times New Roman",serif;
  background:
    radial-gradient(900px 520px at 50% 0%,rgba(184,146,90,.07),transparent 70%),
    #07080b;
  color:var(--bone);
}
.wg-page .nav{background:rgba(7,8,11,.96);border-bottom-color:#15161b}

/* SOURCE RAIL — sticky under the 64px nav; one quiet line, always visible. */
.wg-source{position:sticky;top:64px;z-index:40;background:rgba(10,11,15,.97);
  border-bottom:1px solid rgba(184,146,90,.22)}
.wg-source-inner{max-width:1080px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.wg-source-short{display:none;font-family:var(--sans);font-size:12px;color:var(--mute)}
.wg-source-short em{color:var(--bone)}
.wg-source-text{font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;color:var(--mute);line-height:1.35}
.wg-source-text em{color:var(--bone);font-style:italic}
.wg-source-btn{flex:none;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-hi);white-space:nowrap;
  border-bottom:1px solid rgba(210,176,124,.45);padding-bottom:2px}
.wg-source-btn:hover{color:var(--off);border-bottom-color:var(--off)}

/* HERO — the sleeve first, the words beside it. */
.wg-page .car-head.wg-hero{border:0;padding:72px 28px 80px}
.wg-hero{max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}

.wg-sleeve{position:relative;margin:0;aspect-ratio:1/1;width:100%;max-width:520px;justify-self:end;
  background:#0b0e15;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);overflow:hidden}
.wg-sleeve-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wg-sleeve-pending{background:
  radial-gradient(120% 70% at 50% 100%,#141b2a 0%,#0b0e15 60%),#0b0e15}
.wg-sleeve-pending::after{content:"Cover art pending";position:absolute;left:0;right:0;top:55%;
  text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(233,227,213,.28)}
.wg-sleeve-type{position:absolute;left:0;right:0;top:8.5%;display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;padding:0 8%}
.wg-sleeve-title{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,58px);line-height:1;
  letter-spacing:.01em;color:var(--off);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.wg-sleeve-promise{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.6vw,18px);
  color:rgba(244,238,225,.82);letter-spacing:.01em}
.wg-sleeve-imprint{position:absolute;left:0;right:0;bottom:5.5%;text-align:center;font-family:var(--sans);
  font-size:9.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(210,176,124,.8)}

.wg-hero-text{max-width:440px}
.wg-h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.2vw,50px);line-height:1.04;
  color:var(--off);margin:0 0 10px;letter-spacing:-.005em}
.wg-promise{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.35;color:var(--brass-hi);margin:0 0 18px}
.wg-subtitle{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--bone);margin:0 0 8px}
.wg-byline{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 32px}

.wg-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wg-source-btn:focus-visible,.wg-orig:focus-visible{outline:1px solid var(--brass-hi);outline-offset:4px}

/* PLAYLIST — the back of the record sleeve. Each whole row is the control. */
.wg-pl-head{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mute);margin:0 0 4px}
.wg-pl{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.wg-pl li{margin:0;border-bottom:1px solid var(--edge)}
.wg-track{position:relative;display:grid;grid-template-columns:22px 30px minmax(0,1fr) auto;column-gap:14px;align-items:baseline;
  width:100%;padding:20px 14px 20px 12px;margin:0;background:none;border:0;border-radius:0;color:var(--bone);
  text-align:left;cursor:pointer;font:inherit;transition:background .35s ease,box-shadow .35s ease}
.wg-track::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:transparent;transition:background .3s ease}
.wg-trk-glyph{align-self:center;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent rgba(233,227,213,.32);transition:border-color .3s ease}
.wg-trk-no{font-family:var(--serif);font-size:15px;color:var(--brass);letter-spacing:.04em}
.wg-trk-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.wg-trk-title{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--off)}
.wg-trk-line{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--mute)}
.wg-trk-time{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--mute);font-variant-numeric:tabular-nums}
.wg-track:hover .wg-trk-glyph{border-left-color:var(--brass)}
.wg-track:hover .wg-trk-line{color:var(--bone)}
.wg-track:focus-visible{outline:1px solid var(--brass-hi);outline-offset:-1px}
/* Active selection: thin antique-brass rule, brass glyph, restrained warm glow */
.wg-track.is-active{background:radial-gradient(120% 140% at 0% 50%,rgba(184,146,90,.10) 0%,rgba(184,146,90,.03) 55%,transparent 100%);
  box-shadow:inset 0 0 40px rgba(210,176,124,.04)}
.wg-track.is-active::before{background:var(--brass)}
.wg-track.is-active .wg-trk-glyph{border-left-color:var(--brass-hi)}
.wg-track.is-active .wg-trk-line{color:var(--bone)}
.wg-track.is-active .wg-trk-time{color:var(--brass-hi)}
.wg-track.is-playing .wg-trk-glyph{width:10px;height:12px;border:0;
  background:linear-gradient(90deg,var(--brass-hi) 0 3px,transparent 3px 7px,var(--brass-hi) 7px 10px)}
.wg-orig{display:inline-block;margin:22px 0 0;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-hi);border-bottom:1px solid rgba(210,176,124,.45);padding-bottom:3px}
.wg-orig:hover{color:var(--off);border-bottom-color:var(--off)}

/* THE READING FIELD — ivory paper under a lamp. */
.wg-paper{max-width:760px;margin:0 auto 80px;background:var(--paper);color:var(--paper-ink);
  padding:64px 72px 56px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.wg-paper a{color:#7a5a2c;border-bottom:1px solid rgba(122,90,44,.35)}
.wg-tier[hidden]{display:none!important}
.wg-page .wg-tier{margin:0}

.wg-side-head{text-align:center;margin:0 0 30px}
.wg-paper .wg-side-no{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:#8d6f43;margin:0 0 10px}
.wg-paper .wg-side-no .act-run{color:#8d6f43}
.wg-side-title{font-family:var(--serif);font-style:italic;font-size:32px;line-height:1.1;color:var(--paper-ink);margin:0 0 10px}
.wg-side-blurb{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--paper-future);max-width:30em;margin:0 auto}

.wg-slot{margin:26px 0 8px;padding:14px 0;border-top:1px solid var(--paper-rule);border-bottom:1px solid var(--paper-rule);
  font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:.01em;color:#6f675a;text-align:center;outline:none}
.wg-slot:focus{color:var(--paper-ink)}

/* ACT DIVIDERS — record-side / liner-note marks. */
.wg-act{margin-top:52px}
.wg-divider{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.wg-rule{flex:1 1 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(141,111,67,.55),transparent)}
.wg-div-mark{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#8d6f43;white-space:nowrap}
.wg-paper .act h2.wg-act-title{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15;text-align:center;
  color:var(--paper-ink);margin:0 0 4px}
.wg-act-era{font-family:var(--serif);font-style:italic;font-size:15.5px;color:#7d7466;text-align:center;margin:0 0 22px}
.wg-act-line{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--paper-future);text-align:center;margin:0 auto;max-width:28em}

/* READ-ALONG STATE on paper.
   future = readable ink · active = full contrast + thin brass rule · read = soft dim */
.wg-paper .act .segment{font-family:var(--serif);font-size:20px;line-height:1.7;color:var(--paper-future);
  padding:2px 0 2px 16px;margin:0 0 18px -16px;border-radius:0;background:transparent;box-shadow:none;
  transition:color .25s ease,box-shadow .25s ease}
.wg-paper .act h2.segment{padding-left:0;margin-left:0}
.wg-paper .act .segment.is-seekable:hover:not(.is-active){background:rgba(141,111,67,.06)}
.wg-paper .act .segment.is-read{color:var(--paper-read)}
.wg-paper .act.is-live .segment.is-active,
.wg-paper .act .segment.is-active{color:#120f0b;background:transparent;box-shadow:inset 2px 0 0 var(--brass)}
.wg-paper .act h2.segment.is-active{background:transparent;box-shadow:none;color:#120f0b}
.wg-paper .act:not(.is-live) .segment.is-active{color:#120f0b}

/* PLAYER — minimal, and pinned under the rail while reading its side. Exists
   only when the builder lights it (MP3 + timings). */
.wg-paper .act-player{position:sticky;top:105px;z-index:30;margin:26px -24px 8px;padding:10px 16px;gap:12px;
  background:#0c0d11;border:0;border-radius:0;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.wg-paper .act-player .ap-play{width:36px;height:36px;border-color:var(--brass)}
.wg-paper .act-player .ap-status,.wg-paper .act-player .ap-time{font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:#bdb5a5}
.wg-paper .act-player .ap-scrub{height:2px;background:#2a2b31;border-radius:0}
.wg-paper .act-player .ap-speed,.wg-paper .act-player .ap-follow{font-family:var(--sans);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;border:0;border-radius:0;padding:6px 4px;color:#8b8678}
.wg-paper .act-player .ap-follow.is-on{color:var(--brass-hi)}
.wg-page .lane-dock{background:rgba(9,10,13,.97);border-top:1px solid rgba(184,146,90,.25)}
.wg-page .ld-progress{height:1px;background:#1d1e23}
.wg-page .ld-fill{background:var(--brass)}
.wg-page .ld-skip,.wg-page .ld-jump,.wg-page .ld-speed{border-radius:0;font-family:var(--sans)}

.wg-liner{margin:64px 0 0;padding-top:20px;border-top:1px solid var(--paper-rule);font-family:var(--serif);
  font-size:14.5px;line-height:1.6;color:#6f675a}
.wg-liner strong{color:var(--paper-ink);font-weight:600}

.wg-foot{max-width:1080px;margin:0 auto;padding:22px 28px 48px;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#5f5b52}
.wg-foot a{color:var(--mute)}
.wg-foot a:hover{color:var(--brass-hi)}

@media (max-width:860px){
  .wg-hero{grid-template-columns:1fr;gap:34px}
  .wg-page .car-head.wg-hero{padding:28px 20px 48px}
  .wg-source-text{display:none!important}
  .wg-source-short{display:inline!important}
  .wg-sleeve{justify-self:center;max-width:none}
  .wg-hero-text{max-width:none}
  .wg-track{padding:18px 8px 18px 10px;column-gap:12px}
  .wg-trk-title{font-size:12px;letter-spacing:.2em}
  .wg-trk-line{font-size:15px}
  .wg-paper{margin:0 0 56px;padding:44px 24px 40px;box-shadow:none}
  .wg-paper .act .segment{font-size:18.5px;padding-left:12px;margin-left:-12px}
  .wg-paper .act-player{margin:22px -12px 8px;top:104px}
  .wg-source-inner{padding:9px 20px}
  .wg-source-credit{display:none}
  .wg-source-text{font-size:12px}
  .wg-source-btn{font-size:10.5px;letter-spacing:.14em}
  .wg-side-title{font-size:28px}
  .wg-paper .act h2.wg-act-title{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.wg-paper .act .segment{transition:none}}

/* Specificity fixes: lane.css sets light-on-dark colours and the Archivo
   display face for .car-head h1 and .act text; the paper needs ink. */
.wg-page .car-head h1.wg-h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.2vw,50px);line-height:1.04;
  letter-spacing:-.005em;color:var(--off);margin:0 0 10px}
.wg-paper .act p.wg-side-blurb{color:var(--paper-future)}
.wg-paper .act p.wg-act-era{color:#7d7466}
.wg-paper .act p.wg-act-line{color:var(--paper-future)}
.wg-paper .act p.wg-slot{color:#6f675a}
.wg-paper .act p.wg-slot:focus{color:var(--paper-ink)}
.wg-paper .act .wg-side-title{color:var(--paper-ink)}
.wg-tier{scroll-margin-top:118px}
.wg-paper .act p strong{color:var(--paper-ink)}
.wg-page .act.wg-tier{padding:0;border:0}
@media (max-width:860px){
  .wg-paper .act-player{flex-wrap:nowrap;gap:9px;padding:9px 12px}
  .wg-paper .act-player .ap-body{min-width:0;flex:1 1 auto}
  .wg-paper .act-player .ap-follow{letter-spacing:.04em;font-size:9.5px;white-space:nowrap;padding:6px 0}
  .wg-paper .act-player .ap-speed{padding:6px 0}
}

/* Script blocks: Dynasty interpretation and act sub-heads (What Remains) */
.wg-paper .wg-interp::before{content:"Dynasty reading";display:block;font:600 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9a7a48;margin:0 0 .55em}
.wg-paper h3.wg-sub{font-family:"Spectral",Georgia,serif;font-weight:500;font-style:italic;font-size:1.25rem;color:#2a241c;text-align:center;margin:2.2em 0 1em;letter-spacing:.01em}
.wg-paper .wg-bookend{padding-top:.5rem}

/* Pinned player on phones: keep status and time on one line */
@media (max-width:860px){
  .wg-paper .act-player .ap-line{flex-wrap:nowrap;gap:8px;min-width:0}
  .wg-paper .act-player .ap-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;letter-spacing:.06em;font-size:10px}
  .wg-paper .act-player .ap-time{white-space:nowrap;flex:none;font-size:11px}
}

/* Texted-link entry (?play): full-screen album cover, one tap to play. */
html.wg-curtained, html.wg-curtained body{overflow:hidden}
.wg-curtain{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:max(24px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));border:0;margin:0;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 40%,#16233a 0%,#0a111d 70%);color:#f3e6c4;font:inherit;-webkit-tap-highlight-color:transparent}
.wg-curtain img{width:min(88vw,62vh,560px);height:auto;aspect-ratio:1/1;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(243,230,196,.12)}
.wg-curtain-play{width:68px;height:68px;border-radius:50%;border:1.5px solid rgba(232,190,110,.85);position:relative;flex:none;animation:wgPulse 2.4s ease-in-out infinite}
.wg-curtain-play::after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #e8be6e}
.wg-curtain-cue{font-family:Georgia,"Times New Roman",serif;letter-spacing:.22em;text-transform:uppercase;font-size:12px;color:#e8be6e}
@keyframes wgPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,190,110,.35)}50%{box-shadow:0 0 0 12px rgba(232,190,110,0)}}
@media (prefers-reduced-motion:reduce){.wg-curtain-play{animation:none}}
/* 320px phones: the source-rail button ran 7px past the screen edge and
   clipped its arrow. Tighten its tracking and the rail gap so the full label
   and arrow fit. Wings only; nothing changes at 360px and wider. */
@media (max-width:359px){
  .wg-source-inner{gap:10px}
  .wg-source-btn{letter-spacing:.06em}
}