/* 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(0,0,0,.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:#060606;border:1px solid #2c241d;
  --ink:#f4ece0;--ink-soft:#e8ddcb;--ink-dim:#c8bca8;--muted:#9a8d78;--line:#33291f;--panel:#060606}
@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}
/* an Instagram post has its own shape; the well takes the crop's height */
.sheet .player.freeform{aspect-ratio:auto;height:auto}
.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(253,247,247,.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:999px;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%;
  /* Opaque, not translucent: in Read alongside this button sits over the
     scrolling text column, and at 55% the words read straight through it. */
  background:rgba(24,16,12,.94);backdrop-filter:blur(6px);
  border:1px solid rgba(253,247,247,.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:1.1rem 0 1.5rem;opacity:.55}
/* the title is set at line-height 1.03, so descenders sit low; the rule above
   needs clearance whether or not a subtitle is present to cushion it */
.mtitle + .mdivider{margin-top:1.3rem}
.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}
/* a value too long to sit opposite its label takes the row instead */
.raildl>div.stacked{flex-direction:column;align-items:flex-start;gap:.3rem}
.raildl>div.stacked dd{text-align:left}
.raildl dd.gold{color:var(--accent);font-style:normal;font-weight:600}
/* soundtrack provenance: whether this upload carries the audio heard in the room */
.raildl dd.st-orig{color:var(--accent);font-weight:600}
/* "Original" is a one-word flag and earns the accent. The altered line is a
   sentence explaining what was done to the audio, so it is set as prose - the
   accent on a full sentence at this size is hard to read. */
.raildl dd.st-alt{font-weight:500;font-size:.84rem;line-height:1.45;color:var(--ink-dim)}
.raildl dd.st-repl{color:var(--ink-dim);font-size:.86rem;line-height:1.3}
.raildl dd.st-unk{color:var(--muted);font-size:.86rem}
.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:999px;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:999px;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(253,247,247,.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:999px;
  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}
  /* The close button floats over this column rather than over the video, so
     the note has to start below it or its first line is permanently hidden.
     Spanish runs a fifth longer than English and made this obvious, but it was
     wrong in English too. */
  .sheet.side .mbody{width:42%;height:100%;overflow-y:auto;grid-template-columns:1fr;gap:0;
    padding:clamp(1.4rem,2.2vw,2.2rem);padding-top:calc(clamp(1.4rem,2.2vw,2.2rem) + 2.5rem)}
  .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(253,247,247,.35);color:var(--light);border-radius:999px;
  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}

/* progress control in the modal rail, matching the syllabus button */

/* ---- rail, regrouped ----
   The rail now reads: what this upload is, what you do with it, what it is
   about, and only then where else to go. The two big filled buttons became
   quiet links: the primary action is the player at the top of the modal, and
   two competing slabs made the rail look like a form. */
/* The rail is a flex column on a 24px gap and every other block sits on it.
   This group used to add 1.1rem of its own and the button another 1.4rem
   inside it, both above only, so the button sat 64px below the panel above
   and 24px above the one below - off centre in its own space. The gap does
   the spacing now, the same as everywhere else in the rail. The gap below
   is kept in case a second button ever joins it. */
.railgroup{display:flex;flex-direction:column;gap:.55rem}
.railout{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.5rem 0;border-bottom:1px solid var(--line);
  font-family:var(--font);font-size:.86rem;color:var(--ink-dim);text-decoration:none;
  transition:color .18s}
.railout:hover{color:var(--accent)}
.railout .rwx{font-size:.78rem;opacity:.6}
.railaway .railreport{margin-top:.8rem}

/* ---- glossary ----
   A dotted underline the eye can ignore while reading, and a bubble on hover.
   Deliberately not link-coloured: these are footnotes inside prose, not places
   to go. */
.gloss{border-bottom:1px dotted var(--muted);cursor:help;transition:border-color .18s,color .18s}
.gloss:hover,.gloss:focus{border-bottom-color:var(--accent);color:var(--accent);outline:none}
#glossBubble{position:fixed;z-index:120;display:none;padding:.85rem 1rem;border-radius:10px;
  background:var(--bg-2,#1a1210);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.55);
  font-family:var(--font);pointer-events:none}
#glossBubble.on{display:block}
#glossBubble .gb-term{font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.4rem}
#glossBubble .gb-text{font-size:.84rem;line-height:1.5;color:var(--ink-dim)}

/* Team credits: name against role, quieter than the facts list at the top */
.railcredits{margin:0;display:flex;flex-direction:column;gap:.45rem}
.railcredits>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.railcredits dt{font-family:var(--font);font-size:.84rem;color:var(--ink-dim)}
.railcredits dd{margin:0;font-family:var(--font);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.railcredits dt.credit-note{border-bottom:1px dotted var(--muted);cursor:help;transition:border-color .18s,color .18s}
.railcredits dt.credit-note:hover,.railcredits dt.credit-note:focus{border-bottom-color:var(--accent);color:var(--accent);outline:none}

/* ---- the show's own credits, in the rail ---- */
.crlist{list-style:none;margin:.2rem 0 0;padding:0}
.crlist li{display:flex;flex-direction:column;gap:.08rem;padding:.4rem 0;
  border-bottom:1px solid var(--line)}
.crlist li:last-child{border-bottom:0}
.cr-role{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cr-name{font-size:.9rem;color:var(--ink);line-height:1.3}
.cr-note{font-size:.78rem;color:var(--muted);line-height:1.35}
.cr-dedic{font-size:.84rem;color:var(--ink-dim);font-style:italic;line-height:1.4;
  margin-bottom:.1rem}
.cr-src{font-size:.78rem;color:var(--muted);line-height:1.4;margin-top:.5rem}

/* ---- soundtrack list in the show rail ---- */
.stlist{list-style:none;margin:.2rem 0 0;padding:0;counter-reset:st}
.stlist li{counter-increment:st;display:flex;flex-direction:column;gap:.05rem;
  padding:.36rem 0 .36rem 1.5rem;position:relative;border-bottom:1px solid var(--line)}
.stlist li:last-child{border-bottom:0}
.stlist li::before{content:counter(st);position:absolute;left:0;top:.42rem;
  font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.st-song{font-size:.9rem;color:var(--ink);line-height:1.25}
.st-artist{font-size:.8rem;color:var(--muted)}
.stlist li.st-unknown .st-song{color:var(--muted);font-style:italic}
.st-note{font-size:.8rem;color:var(--muted);margin-bottom:.35rem;line-height:1.4}
.st-src{font-size:.72rem;color:var(--muted);margin-top:.5rem;letter-spacing:.02em}
/* sources under Notes: one per line, hyphen bullets, flush left */
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem;text-align:left}
.srclist li{position:relative;padding-left:.95rem;line-height:1.45}
.srclist li::before{content:"–";position:absolute;left:0;color:var(--muted)}

/* ---- an Instagram post, cropped to its picture ---------------------------
   The embed is another origin, so nothing here reaches inside it: it arrives
   as a white card with the picture somewhere in the middle. So the frame is
   blown up and shifted until that picture, and only that picture, fills the
   well. docs.js supplies the four numbers, worked out from the rectangle it
   measured off the running clip:

     --ar  the picture's own height over its width, which shapes the window
     --fw  how much wider the frame has to be than the window
     --fx  how far left to pull it, in windows-widths
     --fy  how far up to pull it, in window-heights, on top of the 54px header
     --fh  how tall the frame must be for the whole post to have somewhere to go

   Percentages resolve against the window's width for left and width, and
   against its height for top and height, which is why the two offsets are
   expressed in different units above rather than in one. */
.sheet .player .igstage{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:.9rem;width:100%;background:#0b0806;padding:1.3rem 1rem 1rem}
.sheet .player .igcrop{position:relative;width:100%;max-width:980px;overflow:hidden;
  border-radius:4px;background:#000;box-shadow:0 16px 40px -18px rgba(0,0,0,.9)}
.sheet .player .igcrop::before{content:"";display:block;padding-top:calc(var(--ar) * 100%)}
.sheet .player .igcrop iframe{position:absolute;inset:auto;border:0;
  width:calc(var(--fw) * 100%);
  height:calc(54px + var(--fh) * 100%);
  left:calc(var(--fx) * -100%);
  top:calc(-54px - var(--fy) * 100%)}

/* the credit Instagram's header was carrying, back in this archive's type */
.sheet .player .igcred{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font);font-size:.86rem;letter-spacing:.01em;
  color:rgba(253,247,247,.72);text-decoration:none;transition:color .2s}
.sheet .player .igcred:hover{color:var(--accent-hi)}
.sheet .player .igcred svg{width:15px;height:15px;flex-shrink:0}
.sheet .player .igcred .rwx{font-size:.74em;opacity:.7}
@media(max-width:600px){ .sheet .player .igstage{padding:.9rem .6rem} }

/* a handle in the prose: a link, but a quiet one - it is a credit inside a
   sentence, not a call to action, so it takes the same underline the people
   links use rather than the accent. */
.essay a.ighandle{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:rgba(253,247,247,.35);transition:.18s}
.essay a.ighandle:hover,.essay a.ighandle:focus{color:var(--accent-hi);
  text-decoration-color:currentColor}

/* ---- Citations -------------------------------------------------------
   Chicago notes-bibliography: a superscript in the prose, a numbered note
   under the essay, the full entry in the rail. The marker has to be small
   enough not to interrupt a sentence and findable enough to be worth
   setting, which is what the colour is doing rather than decoration. */
.essay sup.cite{font-size:.62em;line-height:0;vertical-align:super;margin-left:.12em;font-feature-settings:"tnum"}
.essay sup.cite a{color:var(--accent,#B31313);text-decoration:none;padding:0 .08em}
.essay sup.cite a:hover,.essay sup.cite a:focus{text-decoration:underline}
.notesblock{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.10)}
.notesblock .essay-label{margin-bottom:.55rem}
ol.cnotes{margin:0;padding-left:1.35rem;list-style:decimal}
ol.cnotes li{font-size:.83rem;line-height:1.55;opacity:.74;margin:0 0 .3rem;padding-left:.15rem}
ol.cnotes li:target{opacity:1}
/* Which notes cite this entry - the other half of the superscript, so the
   reader can go from a number to a book or from a book to its numbers. */
/* A collection with no footage: the panel says so instead of offering a frame
   from something else. */
.player.nofilm{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#141414,#0b0b0b);border-bottom:1px solid rgba(255,255,255,.07)}
.player.nofilm .blockcard{position:static;left:auto;top:auto;transform:none;
  max-width:34rem;text-align:center;padding:2rem 1.4rem}
.bwatch.quietlink{background:none;border:1px solid rgba(255,255,255,.22);color:inherit;
  font-size:.78rem;letter-spacing:.02em;opacity:.8}
.bwatch.quietlink:hover{opacity:1}
.srcedit{margin:.75rem 0 0;font-size:.76rem;letter-spacing:.03em;color:var(--muted)}
.srcedit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.srclist .srctext{display:block}
/* Everything about an entry - locator, shop link, credit - stacks here at one
   left edge with one gap, instead of each setting its own margin and letting
   the text flow decide whether it sits beside the citation or beneath it. */
.srclist .srcmeta{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin-top:.3rem}
.srclist .srcmeta > *{margin-top:0}
.srclist .srccontrib{font-size:.72rem;letter-spacing:.03em;opacity:.75}
.srclist .srcwho{display:inline-block}
.srclist .srccontrib a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.srcedit-l{text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;opacity:.75;margin-right:.35rem}
.srclist .srcnotes{font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent,#B31313);opacity:.85}
.srclist .srcnotes.quiet{color:inherit;opacity:.45}
/* Where to buy the book an entry names. Set quietly: it is a convenience, not
   the point of the bibliography. */
.srclist .srcbuy{font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:inherit;opacity:.55;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.srclist .srcbuy:hover,.srclist .srcbuy:focus{opacity:.95}
.srclist .srcbuy .rwx{margin-left:.22em;font-size:.9em}

/* One source list per show. Numbered entries are what the superscripts point
   at; the plain list underneath is everything else the note rests on. */
/* The numbers are the list marker, so the dash the plain list draws in front
   of every entry has to go, or it strikes through the first word. */
ol.srclist.numbered{margin:0 0 .2rem;padding-left:1.35rem;list-style:decimal}
ol.srclist.numbered li{padding-left:.15rem}
ol.srclist.numbered li::before{content:none}
ol.srclist.numbered li::marker{color:var(--muted)}
ol.srclist.numbered li:target{opacity:1}
ul.srclist.plain{margin-top:.5rem}
.srclist .srcpages{font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent,#B31313);opacity:.85}
.essay sup.cite a+a{margin-left:.18em}

/* Translator credit, directly under the study notes. */
.trcredit{margin-top:1.6rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--muted);letter-spacing:.01em}
.trcredit a{color:var(--accent);border-bottom:1px solid transparent;transition:.2s}
.trcredit a:hover{border-color:var(--accent)}