/* The video modal, side rail and 'Read alongside' layout
   Lines 274-361 of the original index.html. */

/* ---------------- modal ---------------- */
#modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:clamp(1rem,5vh,4rem) 1rem;overflow-y:auto}
#modal.open{display:flex}
.backdrop{position:fixed;inset:0;background:rgba(38,22,10,.55);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:min(1000px,100%);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);
  animation:rise .38s cubic-bezier(.2,.8,.2,1);background:#100c0a;border:1px solid #2c241d;
  --ink:#f4ece0;--ink-soft:#e8ddcb;--ink-dim:#c8bca8;--muted:#9a8d78;--line:#33291f;--panel:#100c0a}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.99)}to{opacity:1;transform:none}}
.sheet .player{position:relative;aspect-ratio:16/9;background:#000}
.sheet .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sheet .player .poster{position:absolute;inset:0;background-size:cover;background-position:center 50%}
.sheet .player .pgrad{position:absolute;inset:0;background:rgba(0,0,0,.36)}
.sheet .player .pplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--accent-hi);color:var(--accent-hi);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.sheet .player .pplay:hover{background:var(--accent);color:var(--on-accent);transform:translate(-50%,-50%) scale(1.06)}
.sheet .player .blockcard{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:.7rem;padding:1.5rem;background:linear-gradient(rgba(6,5,4,.84),rgba(6,5,4,.94))}
.blockcard .blabel{font-family:var(--font);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;font-weight:700;color:var(--accent-hi)}
.blockcard .bnote{color:rgba(246,241,224,.85);font-style:normal;max-width:44ch;font-size:.98rem;line-height:1.5}
.blockcard .bwatch{display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;background:var(--accent);color:var(--on-accent);
  font-family:var(--font);font-weight:700;letter-spacing:0;font-size:1rem;padding:.6rem 1.4rem;border-radius:5px;transition:.2s}
.blockcard .bwatch:hover{background:var(--accent-deep);transform:translateY(-1px)}
.mclose{position:absolute;top:.9rem;right:.9rem;z-index:9;width:38px;height:38px;border-radius:50%;
  background:rgba(38,22,10,.55);border:1px solid rgba(246,241,224,.25);color:var(--light);cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.mclose:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mbody{padding:clamp(1.4rem,3vw,2.6rem);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,.92fr);
  gap:clamp(1.6rem,3.4vw,3.6rem);align-items:start}
.mmain{min-width:0}
.mhouse{color:var(--accent);letter-spacing:.3em}
.mtitle{font-family:var(--font);font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.03;margin:.35rem 0 .1rem;letter-spacing:-.02em;color:var(--ink)}
.msub{font-style:normal;color:var(--ink-dim);font-size:1.18rem;margin-bottom:1.1rem}
.mdivider{height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin:0 0 1.5rem;opacity:.55}
.essay-label{font-family:var(--font);text-transform:uppercase;letter-spacing:.22em;font-size:.62rem;font-weight:700;color:var(--accent);margin:0 0 1rem}
.essay{font-size:1.12rem;line-height:1.68;color:var(--ink-soft)}
.essay p{margin:0 0 1.05rem}
.essay .drop::first-letter{font-family:var(--font);font-size:3.1em;line-height:.8;float:left;padding:.02em .1em 0 0;color:var(--accent);font-weight:800}
.mrail{position:sticky;top:1.4rem;align-self:start;display:flex;flex-direction:column;gap:1.5rem}
.raildl{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.raildl>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.66rem 0;border-bottom:1px solid var(--line)}
.raildl dt{font-family:var(--font);text-transform:uppercase;letter-spacing:.16em;font-size:.56rem;font-weight:600;color:var(--muted);white-space:nowrap;padding-top:.15rem}
.raildl dd{margin:0;text-align:right;color:var(--ink-dim);font-size:.98rem;font-style:normal}
.raildl dd.gold{color:var(--accent);font-style:normal;font-weight:600}
.railwatch{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--accent);color:var(--on-accent);
  font-family:var(--font);font-weight:700;letter-spacing:0;font-size:.98rem;padding:.64rem 1rem;border-radius:5px;transition:.2s}
.railwatch:hover{background:var(--accent-deep);transform:translateY(-1px)}
.watchgroup{display:flex;flex-direction:column;gap:.6rem}
.railsave{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:none;color:var(--accent);border:1px solid var(--accent);font-family:var(--font);font-weight:700;letter-spacing:0;font-size:.98rem;padding:.58rem 1rem;border-radius:5px;transition:.2s}
.railsave:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-1px)}
.railsave svg{width:16px;height:16px;flex-shrink:0}
.railsave-hint{color:var(--muted);font-family:var(--font);font-size:.72rem;line-height:1.45}
.railreport{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-family:var(--font);font-size:.82rem;text-align:left;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:.2s}
.railreport:hover{color:var(--accent)}
.railreport svg{width:14px;height:14px;flex-shrink:0}
.foot-report{display:inline-block;margin-top:1rem;margin-left:1.4rem;color:var(--muted);font-weight:600;font-size:.95rem;border-bottom:1px solid transparent;transition:.2s}
.foot-report:hover{color:var(--accent);border-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(12px);z-index:120;background:rgba(16,11,8,.94);color:var(--light);font-family:var(--font);font-size:.9rem;line-height:1.4;padding:.7rem 1.15rem;border-radius:9px;border:1px solid rgba(246,241,224,.18);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.railblock .railh{font-family:var(--font);text-transform:uppercase;letter-spacing:.2em;font-size:.58rem;font-weight:700;color:var(--accent);margin-bottom:.7rem}
.mtags{display:flex;gap:.45rem;flex-wrap:wrap}
.tag{font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;font-size:.58rem;font-weight:600;
  color:var(--ink-dim);border:1px solid var(--line);padding:.32rem .66rem;border-radius:999px}
.msource{font-size:.92rem;color:var(--muted);font-style:normal;line-height:1.55}
.mnav{display:flex;flex-direction:column;gap:.6rem;margin-top:.2rem}
.mnav button{background:none;border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;border-radius:5px;
  padding:.6rem .9rem;font-family:var(--font);font-size:.95rem;transition:.2s;text-align:left;width:100%}
.mnav button:hover{border-color:var(--accent);color:var(--accent)}
.mnav button .k{display:block;font-family:var(--font);text-transform:uppercase;letter-spacing:.16em;font-size:.54rem;font-weight:600;color:var(--muted);margin-bottom:.2rem}
@media(max-width:820px){.mbody{grid-template-columns:1fr;gap:1.8rem}.mrail{position:static}}
/* side-by-side "read alongside" mode (desktop only) */
@media(min-width:900px){
  .sheet.side{display:flex;flex-direction:row;align-items:stretch;height:min(86vh,760px);width:min(1260px,95vw)}
  .sheet.side .player{width:58%;height:100%;aspect-ratio:auto;flex-shrink:0}
  .sheet.side .mbody{width:42%;height:100%;overflow-y:auto;grid-template-columns:1fr;gap:0;padding:clamp(1.4rem,2.2vw,2.2rem)}
  .sheet.side .mrail{position:static}
  .sheet.side .mdivider{margin-bottom:1.3rem}
}
.modal-layout-toggle{display:none;position:fixed;top:1.1rem;left:1.3rem;z-index:86;align-items:center;gap:.5rem;
  background:rgba(16,11,8,.82);border:1px solid rgba(246,241,224,.35);color:var(--light);border-radius:6px;
  font-family:var(--font);font-size:.9rem;font-weight:600;padding:.55rem 1rem;cursor:pointer;transition:.2s;backdrop-filter:blur(6px)}
#modal.open .modal-layout-toggle{display:inline-flex}
.modal-layout-toggle:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.modal-layout-toggle.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media(max-width:899px){#modal.open .modal-layout-toggle{display:none}}
.loading-note{color:var(--muted);font-style:normal}