/* =========================================================================
   Harlan's Legacy — Listening (Cinematic) production styles
   Engine: harlan-listen-cinematic  (evolved from listen-cinematic-experience-v2.html)

   The stage is mounted in a Shadow DOM, so these rules are isolated from the
   reader. `:host` carries the design tokens (v2's :root); `.lc-scene` is the
   full-screen flex stage (v2's body). The `.hl-listen` CTA lives in the light
   DOM (the reader page) and is styled here too — the same file is linked in
   both contexts; non-matching rules are inert.
   ========================================================================= */

/* ---------------- light-DOM: the "Listen to this memory" CTA ---------------- */
.hl-listen{ display:inline-flex; align-items:center; gap:.6rem; margin:1.6rem 0 .4rem; padding:.62rem 1.15rem .62rem .95rem;
  font:600 .82rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing:.02em;
  color:#2a2118; background:linear-gradient(180deg,#f3ecdb,#e7ddc6); border:1px solid rgba(60,44,24,.28); border-radius:999px;
  cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 18px -10px rgba(40,28,12,.5); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hl-listen:hover{ border-color:#b5763e; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -12px rgba(40,28,12,.6); transform:translateY(-1px); }
.hl-listen:focus-visible{ outline:2px solid #b5763e; outline-offset:2px; }
.hl-listen{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
/* waiting for the (tiny) manifest: visibly not ready yet, never a dead tap */
.hl-listen:disabled{ opacity:.55; cursor:progress; transform:none; }
/* tapped: acknowledge instantly while the listening room opens */
.hl-listen.is-busy{ cursor:progress; transform:scale(.97); }
.hl-listen.is-busy .hl-glyph{ animation:hl-listen-pulse 1s ease-in-out infinite; }
@keyframes hl-listen-pulse{ 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .hl-listen.is-busy .hl-glyph{ animation:none; } }
.hl-listen .hl-glyph{ display:inline-flex; width:1.15rem; height:1.15rem; color:#8c3d22; }
.hl-listen .hl-glyph svg{ width:100%; height:100%; }
.hl-listen .hl-dur{ color:#6a5b45; font-weight:500; }
@media (prefers-color-scheme:dark){ .hl-listen{ color:#ece3cc; background:linear-gradient(180deg,#26221b,#1c1912); border-color:rgba(224,206,168,.28); } .hl-listen .hl-glyph{ color:#db8b59; } .hl-listen .hl-dur{ color:#b7b2a4; } }

/* ---------------- shadow-DOM host + stage ---------------- */
:host{
  --paper-hi:#F5EFE0; --paper:#E9E2D0; --paper-lo:#D3CAB2; --ink:#241d12; --ink-soft:#584a37;
  --body:"EB Garamond",Georgia,serif; --display:"Fraunces",Georgia,serif; --titleface:"Cormorant Garamond",Georgia,serif;
  --board:#262b21; --ivory:#ece3cc; --thick:18px; --bw:87vw; --bh:84vh;
  position:fixed; inset:0; z-index:2147483000; display:block; opacity:0; visibility:hidden;
  transition:opacity .5s ease; background:#000;
}
:host(.lc-visible){ opacity:1; visibility:visible; }
.lc-scene{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; overflow:hidden; background:#000; color:#cfc9ba; font:14px/1.5 system-ui,sans-serif; }

.dbg{ position:absolute; top:10px; left:10px; z-index:400; display:none; font:600 11px/1.66 "Courier New",monospace; background:rgba(8,8,5,.82); border:1px solid rgba(224,206,168,.22); border-radius:8px; padding:.5rem .7rem; color:#c7c0b0; white-space:pre; }
.lc-scene.debug .dbg{ display:block; } .dbg b{ color:#e7c99a; } .dbg .ok{ color:#8fc98a; } .dbg .warn{ color:#e0704a; }

/* ---------------- SCENE + LIVING ATMOSPHERE ---------------- */
.scene{ position:relative; width:100%; flex:1 1 auto; display:flex; align-items:center; justify-content:center; box-sizing:border-box; overflow:hidden; padding:4.2vmin; background:#050503; }
.atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:1; transition:opacity 1s ease; }
.lc-scene.noatmos .atmos{ opacity:0; }
.lc-scene.noatmos .scene{ background:radial-gradient(120% 120% at 50% 46%, #0c0b07 0%, #060503 68%, #030201 100%); }
.atmos .base{ position:absolute; inset:0; background:radial-gradient(130% 120% at 50% 44%, #14120c 0%, #0a0906 52%, #050403 100%); }
.atmos .warmpool{ position:absolute; inset:-16%; background:radial-gradient(40% 44% at 46% 40%, rgba(255,206,140,.22), rgba(255,190,120,.07) 42%, transparent 68%); animation:lc-drift 58s ease-in-out infinite; will-change:transform; }
.atmos .coolpool{ position:absolute; inset:-16%; background:radial-gradient(44% 48% at 70% 74%, rgba(120,150,210,.07), transparent 60%); animation:lc-drift2 82s ease-in-out infinite; will-change:transform; }
.atmos .expo{ position:absolute; inset:0; background:rgba(0,0,0,0); animation:lc-expose 26s ease-in-out infinite; mix-blend-mode:multiply; }
.atmos .grain{ position:absolute; inset:-60%; opacity:.045; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"); background-size:300px; animation:lc-grainmove 5.6s steps(6) infinite; }
.atmos .vig{ position:absolute; inset:0; box-shadow:inset 0 0 26vmin 9vmin rgba(0,0,0,.7); }
.lc-scene.arriving .atmos .warmpool{ filter:brightness(1.25); }
.lc-scene.turning .atmos .warmpool{ filter:brightness(1.1); }
.atmos .warmpool, .lc-scene.arriving .atmos .warmpool, .lc-scene.turning .atmos .warmpool{ transition:filter 1.1s ease; }
@keyframes lc-drift{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(3%,2.4%,0) scale(1.07); } }
@keyframes lc-drift2{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-2.6%,-1.8%,0); } }
@keyframes lc-expose{ 0%,100%{ background:rgba(0,0,0,0); } 50%{ background:rgba(0,0,0,.05); } }
@keyframes lc-grainmove{ 0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)} 40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,2%)} 80%{transform:translate(2%,-1%)} 100%{transform:translate(0,0)} }

/* ---------------- BOOK ---------------- */
.book{ position:relative; z-index:2; width:min(var(--bw), calc(var(--bh) * 16/9)); aspect-ratio:16/9; height:auto; max-height:var(--bh); perspective:3200px; perspective-origin:52% 42%; transform-style:preserve-3d; opacity:0; }
.contact{ position:absolute; left:3%; right:0%; bottom:-3.4%; height:6%; background:radial-gradient(56% 100% at 47% 0%, rgba(0,0,0,.66), transparent 74%); filter:blur(17px); z-index:0; }
.block{ position:absolute; inset:0; border-radius:3px 7px 8px 4px; z-index:1; background:var(--paper-lo); box-shadow:0 0 0 1px rgba(20,16,10,.3), 19px 14px 0 -4px #a49c8a, 15px 10px 0 -3px #b3ac99, 11px 7px 0 -2px #c1baa6, 6px 3px 0 -1px #d0c9b5, 0 60px 130px -36px rgba(0,0,0,.9); }
.block::after{ content:""; position:absolute; top:8px; bottom:8px; right:-2px; width:13px; border-radius:0 3px 3px 0; background:repeating-linear-gradient(179deg, #d7d1be 0 1.7px, #c4bda7 1.7px 2.7px, #d0c9b4 2.7px 4.1px); }
.spine{ position:absolute; top:0; bottom:0; left:-8px; width:24px; z-index:26; pointer-events:none; border-radius:4px 2px 2px 4px; background:linear-gradient(90deg, #070603 0%, #1e2118 44%, #0b0a07 68%, transparent 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 1px 0 0 rgba(255,250,236,.05); }

.surface{ position:absolute; inset:0; border-radius:3px 5px 5px 3px; overflow:hidden; background:radial-gradient(84% 74% at 58% 22%, #f4eede 0%, #ece5d3 40%, #ddd4bc 82%, #c9bea4 120%); }
.surface .vignette{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 46px 0 84px -54px rgba(0,0,0,.4), inset -22px 0 52px -54px rgba(0,0,0,.24), inset 0 -60px 90px -60px rgba(40,28,12,.28); }
.surface .pool{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(56% 58% at 54% 30%, rgba(255,224,170,.5), rgba(255,206,140,.14) 46%, transparent 74%); mix-blend-mode:soft-light; }
.surface .edgedark{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 108% at 50% 42%, transparent 54%, rgba(28,18,6,.3) 116%); }
.pagetext{ position:absolute; inset:0; z-index:3; padding:clamp(3.6rem,8vh,7rem) clamp(4rem,7vw,9rem); display:flex; align-items:center; }
.story-text{ max-width:var(--measure,50ch); margin:0 auto; width:100%; color:var(--ink); font-family:var(--body); font-weight:500; font-size:var(--fs, clamp(1.68rem,1.06rem + 1.5vw,2.55rem)); line-height:1.63; letter-spacing:.004em; text-align:left; -webkit-font-smoothing:antialiased; }
.story-text p{ margin:0 0 .72em; } .story-text p:last-child{ margin-bottom:0; }
.story-text.lead > p:first-child::first-letter{ font-family:var(--display); font-weight:600; float:left; font-size:3.6em; line-height:.64; padding:.05em .12em 0 0; color:var(--ink); }
.foot{ position:absolute; left:0; right:0; bottom:clamp(1.6rem,3.4vh,3rem); z-index:3; text-align:center; font-family:var(--body); font-weight:500; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); opacity:0; }
.lc-scene.opened .foot{ opacity:.5; }

/* ONE authoritative text; paint-only per-word mask; layout never changes */
.w{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 33%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg,#000 0,#000 33%,rgba(0,0,0,0) 67%,rgba(0,0,0,0) 100%); -webkit-mask-size:340% 100%; mask-size:340% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:100% 0; mask-position:100% 0; position:relative; }
.w.written{ -webkit-mask-position:0 0; mask-position:0 0; }
.w.drop{ -webkit-mask-image:none; mask-image:none; opacity:0; }
.w.drop.written{ opacity:1; }
.w.cur::after{ content:""; position:absolute; left:-.06em; right:-.06em; top:-.02em; bottom:-.02em; z-index:-1; border-radius:3px; background:radial-gradient(120% 150% at 50% 62%, rgba(212,150,74,.26) 0%, rgba(212,150,74,.06) 56%, transparent 80%); }
.pen{ position:absolute; z-index:6; width:3px; height:.56em; margin-left:-1.5px; border-radius:60% 60% 50% 50%; background:radial-gradient(60% 70% at 50% 40%, rgba(30,22,12,.72), rgba(30,22,12,.16) 70%, transparent 85%); filter:blur(.5px); opacity:0; pointer-events:none; }

#dest{ z-index:5; }
#turnshadow{ position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0; background:linear-gradient(100deg, rgba(0,0,0,.5), rgba(0,0,0,.16) 24%, transparent 50%); }
#leaf{ position:absolute; inset:0; z-index:10; transform-origin:left center; transform-style:preserve-3d; transform:rotateY(0deg); }
#leaf .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
#leaf .back{ transform:rotateY(180deg); border-radius:3px 5px 5px 3px; background:radial-gradient(150% 130% at 54% -8%, #efe9dc, var(--paper-lo) 122%); }
#leaf .back .ubib{ position:absolute; inset:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset -34px 0 66px -54px rgba(0,0,0,.32); }
#leaf .edgelight{ position:absolute; top:1%; bottom:1%; right:-2px; width:10px; z-index:7; opacity:0; border-radius:2px; background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(255,251,240,.7) 42%, rgba(255,244,222,.18)); filter:blur(.4px); }
#leaf .bend{ position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0; background:linear-gradient(105deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 30%, rgba(255,252,244,.13) 62%, rgba(0,0,0,.1) 100%); }

/* ---------------- MID-CENTURY LITERARY ARCHIVE COVER ---------------- */
.cover{ position:absolute; inset:0; z-index:20; transform-origin:left center; transform-style:preserve-3d; transform:rotateY(0deg); }
.cover .cface{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:3px 8px 8px 3px; overflow:hidden; }
.cover .front{ transform:translateZ(calc(var(--thick)/2)); background:linear-gradient(147deg, #373c31 0%, #2d3227 38%, #23271c 68%, #191c13 116%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.58), inset 0 2px 0 rgba(230,224,200,.07), inset -60px 0 96px -60px rgba(0,0,0,.72), inset 20px 0 40px -30px rgba(0,0,0,.6), 0 72px 140px -28px rgba(0,0,0,.94); }
.cover .front::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:soft-light; background:radial-gradient(75% 55% at 40% 30%, rgba(196,150,86,.14), transparent 60%); }
.cover .cloth{ position:absolute; inset:0; z-index:0; opacity:.4; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230'><filter id='c'><feTurbulence type='turbulence' baseFrequency='0.92 0.13' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='230' height='230' filter='url(%23c)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230'><filter id='c2'><feTurbulence type='turbulence' baseFrequency='0.13 0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='230' height='230' filter='url(%23c2)'/></svg>"); background-size:230px,230px; }
.cover .rake{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:screen; background:linear-gradient(118deg, transparent 32%, rgba(226,232,206,.08) 47%, rgba(232,236,214,.13) 52%, rgba(226,232,206,.06) 58%, transparent 70%); animation:lc-rake 13s ease-in-out infinite; }
.lc-scene.noatmos .cover .rake{ animation:none; opacity:.42; }
@keyframes lc-rake{ 0%,100%{ transform:translateX(-6%); opacity:.34; } 50%{ transform:translateX(6%); opacity:.6; } }
.cover .bloom{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(66% 50% at 30% 15%, rgba(226,232,206,.11), transparent 52%); animation:lc-coverbreath 17s ease-in-out infinite; }
.lc-scene.noatmos .cover .bloom{ animation:none; }
@keyframes lc-coverbreath{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
@keyframes lc-foilsheen{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }
.cover .falloff{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(150deg, transparent 45%, rgba(0,0,0,.48) 100%); }
.cover .keyline{ position:absolute; left:6.5%; right:5.5%; top:7.5%; bottom:8.5%; z-index:3; box-shadow:inset 0 0 0 1px rgba(210,204,180,.15), inset 0 0 0 4px rgba(0,0,0,.16); border-radius:1px; }
.plate{ position:absolute; left:11.5%; right:10.5%; top:12.5%; bottom:12%; z-index:4; display:flex; flex-direction:column; }
.plate .masthead{ font-family:var(--body); font-weight:500; font-size:clamp(.58rem,.4rem + .34vw,.86rem); letter-spacing:.48em; text-transform:uppercase; padding-left:.48em; color:var(--ivory); opacity:.92; text-shadow:0 1px 0 rgba(0,0,0,.6); }
.plate .drule{ margin:1rem 0 auto; height:0; border-top:1px solid rgba(210,204,180,.42); box-shadow:0 3px 0 -2px rgba(210,204,180,.22); }
.plate .titlewrap{ margin-top:auto; }
.plate .kicker{ font-family:var(--titleface); font-style:italic; font-weight:400; font-size:clamp(.86rem,.6rem + .62vw,1.32rem); color:#c1b998; margin-bottom:.4rem; letter-spacing:.01em; }
.plate .title{ font-family:var(--titleface); font-weight:600; font-size:clamp(2.9rem,1rem + 5.2vw,6.6rem); line-height:.9; letter-spacing:.006em;
  background:linear-gradient(176deg, #f4ead0 0%, #e0c88c 27%, #caaa63 45%, #b3963f 57%, #ecdeb2 78%, #cdae72 100%); background-size:185% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(210,178,110,.12)); animation:lc-foilsheen 15s ease-in-out infinite; }
.lc-scene.noatmos .plate .title{ animation:none; }
.plate .teller{ margin-top:.9rem; font-family:var(--titleface); font-style:italic; font-weight:400; font-size:clamp(.9rem,.62rem + .6vw,1.34rem); color:#b8b094; }
.plate .series{ margin-top:1.5rem; display:flex; align-items:center; gap:.85rem; font-family:var(--body); font-weight:500; font-size:clamp(.58rem,.48rem + .22vw,.8rem); letter-spacing:.32em; text-transform:uppercase; color:#9a9a82; }
.plate .series .dot{ width:4px; height:4px; transform:rotate(45deg); background:linear-gradient(135deg,#e6d3a2,#c2a25a); }
.cover .colophon{ position:absolute; right:11.5%; bottom:11.5%; z-index:5; width:30px; height:30px; opacity:.9; }
.cover .colophon::before{ content:""; position:absolute; inset:0; border:1px solid rgba(200,168,106,.42); transform:rotate(45deg); }
.cover .colophon::after{ content:""; position:absolute; inset:32%; background:linear-gradient(135deg,#efdcac,#bd9a4e); transform:rotate(45deg); box-shadow:0 0 8px rgba(210,178,110,.28); }
.cover .thickedge{ position:absolute; top:2px; bottom:2px; right:0; width:var(--thick); transform-origin:100% 50%; transform:rotateY(90deg); background:linear-gradient(90deg, #14170f, #2b3125 55%, #191d13); z-index:1; }
.cover .foreedge{ position:absolute; top:3%; bottom:3%; right:calc(-1 * var(--thick) - 1px); width:15px; z-index:0; border-radius:0 3px 3px 0; background:repeating-linear-gradient(179deg, #dcd6c3 0 1.7px, #c6bfaa 1.7px 2.7px, #d1cbb5 2.7px 4.1px); box-shadow:0 46px 66px -26px rgba(0,0,0,.82); }
.cover .inner{ transform:rotateY(180deg) translateZ(calc(var(--thick)/2)); background:radial-gradient(120% 100% at 62% 30%, #2b3125, #1c2117 68%, #10140c 122%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 26px 0 68px -30px rgba(0,0,0,.84); }
.cover .inner .lt{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(90% 80% at 40% 26%, rgba(255,238,200,.2), transparent 60%); }

/* ---------------- in-stage player bar ---------------- */
.lc-bar{ position:absolute; left:0; right:0; bottom:2.2vmin; z-index:60; display:flex; gap:.5rem; align-items:center; justify-content:center; opacity:0; transition:opacity .5s ease; }
.lc-scene.reading .lc-bar{ opacity:1; }
.lc-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; color:#e7dfce; background:rgba(22,21,17,.7); border:1px solid rgba(224,206,168,.28); cursor:pointer; backdrop-filter:blur(6px); }
.lc-btn:hover{ border-color:#D9A25A; color:#D9A25A; } .lc-btn svg{ width:18px; height:18px; }
.lc-attrib{ position:absolute; left:0; right:0; bottom:.7vmin; z-index:60; text-align:center; font:500 .62rem/1.4 var(--body); letter-spacing:.06em; color:rgba(200,192,176,.5); opacity:0; transition:opacity .6s ease; }
.lc-scene.reading .lc-attrib{ opacity:1; }
/* the attribution is information only — it must never take taps meant for the controls */
.lc-attrib{ pointer-events:none; }
/* phones: the attribution wraps to two lines; keep Pause/Close clear above it */
@media (max-width:640px){ .lc-bar{ bottom:calc(.7vmin + 2.2rem); } }

@media (max-width:900px){
  :host{ --measure:none; --bw:92vw; --bh:auto; --fs:clamp(1.42rem,1.05rem + 1.6vw,1.92rem); }
  .book{ width:min(92vw,40rem); aspect-ratio:auto; height:calc(100dvh - 8.8rem - env(safe-area-inset-bottom)); max-height:none; perspective:1800px; }
  .scene{ padding:3vmin; }
  .pagetext{ padding:clamp(2.4rem,4.5vh,3.4rem) clamp(2rem,6.5vw,2.8rem); }
  .plate{ left:11%; right:10%; } .spine{ left:-4px; width:14px; }
}