/* Chapter 01 «The Drop»: text and scene as one (scene: drop-v2.js). Lines surface as you read them;
   the line being read is lit, key lines are set larger so they stay with the reader. */
.d2-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;background:#070707}
.d2-veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.7) 34%,rgba(7,7,7,.12) 58%,rgba(7,7,7,0) 70%)}
.d2-nogl .d2-gl{background:radial-gradient(circle at 70% 50%,#1b1b1b 0%,#070707 46%)}
.d2 > section{position:relative;z-index:2}

.d2-hero{min-height:100svh;display:flex;align-items:center;padding:110px clamp(22px,7vw,110px) 60px}
.d2-hero .chapter-kicker{margin:0 0 18px;font:600 .78rem/1 Inter,system-ui,sans-serif;letter-spacing:.22em;color:#9e9990}
.d2-hero h1{margin:0 0 22px;font:400 clamp(3.6rem,10vw,8.6rem)/.92 Newsreader,Georgia,serif;letter-spacing:-.03em;color:#f5f2eb}
.d2-hero p.d2-lede{margin:0 0 34px;max-width:26rem;font:italic 400 clamp(1.15rem,1.8vw,1.45rem)/1.5 Newsreader,Georgia,serif;color:#cfc9bf}
.d2-hero .read-cue{font:600 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:.24em;color:#9e9990}
.d2-hero .read-cue span{display:inline-block;margin-left:8px;animation:d2cue 2.4s ease-in-out infinite}
@keyframes d2cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.d2-beat{min-height:calc(80svh + var(--n,3) * 24svh);padding:0 clamp(22px,7vw,110px)}
.d2-text{position:sticky;top:max(96px,20svh);max-width:34rem;padding:4svh 0}
.d2-tag{margin:0 0 22px;font:600 .74rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#9e9990}
.d2-tag b{color:#f5f2eb;font-weight:600;margin-right:10px}
.d2 .l{margin:0 0 .55em;font:400 clamp(1.12rem,1.6vw,1.42rem)/1.62 Newsreader,Georgia,serif;color:#d8d2c8;text-shadow:0 1px 18px rgba(0,0,0,.9)}
.d2 .l.key{margin:.25em 0 .55em;font:italic 400 clamp(1.7rem,3.3vw,2.75rem)/1.2 Newsreader,Georgia,serif;letter-spacing:-.012em;color:#f5f2eb}
.d2 .l.quote{font-style:italic;color:#ece6dc}
.d2 .l.who{margin-top:.9em;font:600 .78rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9e9990}

/* reveal only once the script runs, so the text is never hidden without it */
.d2-js .d2-beat .l{opacity:0;transform:translateY(14px);filter:blur(5px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease,color .8s ease}
.d2-js .d2-beat .l.in{opacity:.5;transform:none;filter:none}
.d2-js .d2-beat .l.in.key{opacity:.92}
.d2-js .d2-beat .l.now{opacity:1;color:#fffaf0}

.d2-remember{min-height:150svh;padding:0 clamp(22px,7vw,110px)}
.d2-remember .d2-text{top:max(90px,12svh)}
.d2-remember h2{margin:0 0 26px;font:400 clamp(2rem,4vw,3.2rem)/1.05 Newsreader,Georgia,serif;color:#f5f2eb}
.d2-remember ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(245,242,235,.14)}
.d2-remember li a{display:grid;grid-template-columns:3rem 1fr;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(245,242,235,.14);text-decoration:none;color:#d8d2c8;transition:color .3s}
.d2-remember li a:hover,.d2-remember li a:focus-visible{color:#fffaf0}
.d2-remember li b{font:600 .78rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;color:#9e9990}
.d2-remember li span{font:italic 400 clamp(1.05rem,1.5vw,1.25rem)/1.45 Newsreader,Georgia,serif}
.d2-remember .d2-note{margin:22px 0 0;font:400 .92rem/1.6 Inter,system-ui,sans-serif;color:#9e9990}

@media (max-width:820px){
  .d2-veil{background:linear-gradient(180deg,rgba(7,7,7,0) 0%,rgba(7,7,7,.1) 34%,rgba(7,7,7,.86) 56%,rgba(7,7,7,.96) 100%)}
  .d2-hero{align-items:flex-end;padding-bottom:12svh}
  .d2-beat{min-height:calc(90svh + var(--n,3) * 22svh)}
  .d2-text{top:40svh;padding:0}
  .d2 .l{font-size:1.05rem;line-height:1.55}
  .d2 .l.key{font-size:1.5rem}
  .d2-remember .d2-text{top:80px}
  .d2-remember{min-height:170svh}
}
@media (prefers-reduced-motion: reduce){
  .d2-js .d2-beat .l{opacity:1;transform:none;filter:none;transition:none}
  .d2-hero .read-cue span{animation:none}
}

/* Persian: reads right to left, so the text sits right and the scene moves left */
[dir=rtl] .d2-veil{background:linear-gradient(270deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.7) 34%,rgba(7,7,7,.12) 58%,rgba(7,7,7,0) 70%)}
[dir=rtl] .d2 .l,[dir=rtl] .d2-hero p.d2-lede,[dir=rtl] .d2-remember li span{font-family:Vazirmatn,Tahoma,sans-serif;font-style:normal;line-height:2}
[dir=rtl] .d2 .l.key{font-family:Vazirmatn,Tahoma,sans-serif;font-style:normal;font-weight:500;line-height:1.6;letter-spacing:0}
[dir=rtl] .d2-hero h1,[dir=rtl] .d2-remember h2{font-family:Vazirmatn,Tahoma,sans-serif;letter-spacing:0}
[dir=rtl] .d2-tag,[dir=rtl] .d2 .l.who,[dir=rtl] .d2-hero .chapter-kicker,[dir=rtl] .d2-hero .read-cue,[dir=rtl] .d2-remember .d2-note{font-family:Vazirmatn,Tahoma,sans-serif;letter-spacing:0;text-transform:none}
[dir=rtl] .d2-tag b{margin:0 0 0 10px}
[dir=rtl] .d2 [dir=ltr]{font-family:Newsreader,Georgia,serif;font-style:italic}
@media (max-width:820px){
  [dir=rtl] .d2-veil{background:linear-gradient(180deg,rgba(7,7,7,0) 0%,rgba(7,7,7,.1) 34%,rgba(7,7,7,.86) 56%,rgba(7,7,7,.96) 100%)}
}

/* Source line under a scientific beat: small, quiet, always readable */
.d2 .l.src{margin-top:1.1em;font:400 .8rem/1.5 Inter,system-ui,sans-serif;color:#9e9990;text-shadow:none}
.d2 .l.src a{color:#cfc9bf;text-decoration-color:rgba(245,242,235,.35);word-break:break-word}
.d2-js .d2-beat .l.src.in{opacity:.85}
[dir=rtl] .d2 .l.src{font-family:Vazirmatn,Tahoma,sans-serif}