/* Grand Syntagmatique: the films are the page; the only diagram is Metz's own table */
:root{ color-scheme:dark; --bg:#0b0b0a; --panel:#131311; --ink:#ece6da; --dim:#8a8378; --rule:#282622; --hi:#ff6b4a;
  --perception:#e9d9a8; --affect:#f0b9a4; --action:#e7a37c; --reflection:#b9cfa0; --mental:#a9c9c9; --break:#d9d3c7; --time:#b8b3d8; --read:#d9b8d2;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --serif:'Fraunces',Georgia,serif; }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font:12px/1.4 var(--mono); }
body{ padding:0 clamp(10px,1.4vw,20px) 40px; }
button{ font:inherit; color:inherit; background:var(--panel); border:1px solid var(--rule); padding:2px 8px; cursor:pointer; }
button:hover{ border-color:var(--ink); }
button:focus-visible{ outline:2px solid var(--hi); outline-offset:2px; }
svg{ display:block; max-width:100%; }
svg text{ font-family:var(--mono); }

.top{ position:sticky; top:0; z-index:10; background:var(--bg); display:flex; align-items:center; gap:10px; padding:8px 0; flex-wrap:wrap; border-bottom:1px solid var(--rule); }
.ttl{ font:600 18px var(--serif); }
.play{ width:30px; }
.clock{ color:var(--dim); min-width:44px; font-variant-numeric:tabular-nums; }
.poems{ display:flex; gap:1px; flex-wrap:wrap; }
.poems button{ border:0; background:transparent; color:var(--dim); padding:2px 5px; border-bottom:2px solid transparent; }
.poems button.on{ color:var(--ink); border-bottom-color:var(--hi); }
.grow{ flex:1; }

main{ display:flex; flex-direction:column; gap:10px; padding-top:10px; }
.stage{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:10px; align-items:start; }
.stage > .main{ justify-self:center; }
.main{ position:relative; background:#000; aspect-ratio:16/9; height:min(44vh,calc((100vw - 380px) * 9 / 16)); max-width:100%; overflow:hidden; }
.main video{ width:100%; height:100%; object-fit:contain; display:block; }
.tag{ position:absolute; left:8px; top:8px; background:#000c; padding:2px 7px; font-size:12px; }
.tag b{ color:var(--hi); margin-right:6px; }
.sub{ position:absolute; left:0; right:0; bottom:0; padding:18px 14px 10px; background:linear-gradient(transparent,#000d); font:600 clamp(13px,1.4vw,18px)/1.3 var(--serif); text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.read{ display:flex; flex-direction:column; gap:6px; }
.why{ color:var(--dim); min-height:3em; }
.why b{ color:var(--ink); font-weight:500; }

/* one monitor per cut, all at the same moment */
.mons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px; }
.mons .mon{ max-height:15vh; aspect-ratio:auto; height:15vh; }
.mon{ position:relative; background:#000; aspect-ratio:16/9; cursor:pointer; border:0; padding:0; overflow:hidden; }
.mon video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.mon span{ position:absolute; left:0; bottom:0; right:0; display:flex; justify-content:space-between; padding:2px 6px; background:#000b; font-size:11px; }
.mon span b{ color:var(--hi); }
.mon.on{ outline:2px solid var(--hi); outline-offset:-2px; }

/* the commutation table: cuts down, the scenario's beats across */
.tbl{ position:relative; user-select:none; }
.trow{ display:flex; align-items:stretch; gap:0; }
.trow > .lab{ flex:0 0 84px; display:flex; align-items:center; font-size:11px; color:var(--dim); padding-right:6px; cursor:pointer; }
.trow.on > .lab{ color:var(--ink); }
.trow.on > .lab::before{ content:'▸'; color:var(--hi); margin-right:3px; }
.cells{ flex:1; display:flex; min-width:0; position:relative; }
.bh{ flex:1 1 0; min-width:0; font-size:10px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px 3px; border-left:1px solid var(--rule); }
.bh .p{ color:var(--ink); margin-right:4px; }
.cell{ flex:1 1 0; min-width:0; position:relative; border-left:1px solid var(--bg); cursor:pointer; margin-bottom:3px; }
.cell .ty{ display:flex; gap:4px; align-items:baseline; font-size:10px; color:var(--dim); height:15px; padding:0 3px; overflow:hidden; white-space:nowrap; }
.cell .ty b{ color:var(--ink); font-size:11px; }
.cell .ty .ov{ text-decoration:underline; text-decoration-color:var(--hi); }
.cell .st{ display:flex; height:46px; gap:1px; }
.cell .st i{ flex:1 1 0; min-width:0; background:#000 center/cover no-repeat; border-bottom:3px solid var(--c,#444); }
.cell.now{ outline:2px solid var(--hi); outline-offset:-1px; z-index:1; }
.cell:hover .st i{ filter:brightness(1.25); }
/* type shades: the achronological branch is hatched, the chronological solid */
.cell[data-t="1"] .ty{ background:#2b2925; } .cell[data-t="2"] .ty,.cell[data-t="3"] .ty{ background:repeating-linear-gradient(135deg,#221f1b 0 4px,#16150f 4px 8px); }
.cell[data-t="4"] .ty{ background:#1d2a2a; } .cell[data-t="5"] .ty{ background:#2a2233; } .cell[data-t="6"] .ty{ background:#3a2a1c; }
.cell[data-t="7"] .ty{ background:#27301d; } .cell[data-t="8"] .ty{ background:#1f2633; }
.head{ margin-bottom:2px; }
.head .pu{ position:absolute; top:-1px; transform:translateX(-50%); font-size:11px; color:var(--ink); background:var(--bg); padding:0 2px; line-height:1; }
.head .pu.fx{ color:var(--hi); }
.ph{ position:absolute; top:0; bottom:0; width:2px; background:var(--hi); pointer-events:none; z-index:3; }

/* frequency, Metz ch. 7 */
.freq table{ border-collapse:collapse; font-variant-numeric:tabular-nums; }
.freq th,.freq td{ padding:2px 10px; text-align:right; border-bottom:1px solid var(--rule); }
.freq th{ font-weight:400; color:var(--dim); }
.freq td:first-child,.freq th:first-child{ text-align:left; color:var(--dim); }
.freq td.z{ color:#4a463f; }
.freq td.hi{ color:var(--ink); font-weight:500; }
.freq td.dev{ color:var(--hi); }
.freq .on{ color:var(--ink); }
.freq caption{ text-align:left; color:var(--dim); padding-bottom:4px; font-size:11px; }

.menu{ position:fixed; z-index:40; background:var(--panel); border:1px solid var(--ink); box-shadow:0 10px 40px #000; display:flex; flex-direction:column; min-width:190px; }
.menu button{ border:0; text-align:left; padding:4px 10px; background:transparent; }
.menu button:hover{ background:#2a2824; }
.menu button b{ display:inline-block; width:18px; color:var(--hi); }
.pop{ position:fixed; z-index:50; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,calc(100% - 24px)); max-height:84vh; overflow:auto; background:var(--panel); border:1px solid var(--ink); box-shadow:0 20px 80px #000; padding:14px; }
.pop dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; } .pop dt{ color:var(--hi); } .pop dd{ margin:0; color:var(--dim); }
@media (max-width:900px){ .stage{ grid-template-columns:1fr; } .main{ height:auto; width:100%; } .read{ max-width:360px; } .trow > .lab{ flex-basis:56px; } .cell .st{ height:34px; } }
.menu[hidden],.pop[hidden]{ display:none; }