/* Palette: sage base #ccdfbe; highlights from its triadic pair
   #dfbecc (pink, --accent) and #beccdf (blue, --a) — tints/shades of each. */
:root{
  --bg:#dbe9d2; --panel:#f3f8eb; --line:#c3d4b2; --hair:#dfe9d5; --ink:#263021; --dim:#6f7d63;
  --accent:#a64e76; --accent-bright:#ca739a; --a:#476e9e; --b:#c9566b; --well:#e7efdb;
  --hdr:69px;                /* sticky header height: 52px logo + 8px padding + hairline */
  --gut:224px;               /* film page: width of the label column left of every time axis */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:13px/1.45 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;align-items:center;gap:16px;padding:8px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;box-shadow:0 1px 6px rgba(45,65,35,.07)}
h1{display:flex;align-items:center;margin:0;font-size:0}   /* the wordmark is the SVG */
#logo{height:52px;width:auto;display:block}
nav{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:12px}
nav:empty{display:none}          /* no breadcrumb on the corpus page: no double gap */
nav a{color:var(--a);text-decoration:none;font-weight:600;padding:4px 12px;
  border-radius:999px;background:#e7edf6;border:1px solid #c9d6e8;
  transition:background .15s,color .15s,border-color .15s}
nav a:hover{background:var(--a);border-color:var(--a);color:#f4f8fd}
nav > span{padding:4px 12px;border-radius:999px;background:var(--well);
  border:1px solid var(--line);color:var(--ink);font-weight:600;
  max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}
#status{color:var(--dim);font-size:11px;white-space:nowrap}   /* transient only */
main{padding:12px 16px;display:flex;gap:14px;align-items:flex-start}
#content{flex:1;min-width:0;container-type:inline-size}
/* Wide enough, the list and the plot sit side by side, and the list scrolls to
   about the plot's height rather than to its own fixed one. */
@container (min-width:1100px){
  #split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
  #split #listwrap{margin-bottom:0}
  #split #listscroll{max-height:max(400px,calc(100vh - 262px))}
}

/* ---------- sidebar: a rail of buttons and the drawer they open ---------- */
#sidebar{flex:none;display:flex;align-items:flex-start;position:sticky;
  top:calc(var(--hdr) + 12px);z-index:20}
#rail{flex:none;display:flex;flex-direction:column;gap:8px}
.railbtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;
  padding:9px 0 7px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--dim);font:600 10.5px/1 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.04em;cursor:pointer;box-shadow:0 1px 3px rgba(45,65,35,.06);
  transition:color .15s,border-color .15s,background .15s}
.railbtn svg{width:20px;height:20px}
.railbtn:hover{color:var(--accent);border-color:var(--accent-bright)}
.railbtn.on{color:#fff;background:var(--accent);border-color:var(--accent)}
/* The drawer is a column beside the rail: opening it grows it from nothing and
   pushes the page over. Its page keeps the open width throughout, so the text
   is uncovered rather than reflowed, and a long one scrolls inside the drawer
   while the page stays where it is. It is shrunk rather than hidden, so
   closing it animates too. */
:root{--dw:min(480px,38vw)}
#drawer{position:relative;flex:none;width:0;margin-left:0;
  max-height:calc(100vh - var(--hdr) - 24px);overflow:hidden auto;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);
  box-shadow:0 1px 3px rgba(45,65,35,.06);opacity:0;visibility:hidden;
  transition:width .32s cubic-bezier(.2,.8,.2,1),margin-left .32s cubic-bezier(.2,.8,.2,1),
    opacity .2s,visibility 0s .32s}
body.draweropen #drawer{width:var(--dw);margin-left:10px;opacity:1;visibility:visible;
  transition:width .32s cubic-bezier(.2,.8,.2,1),margin-left .32s cubic-bezier(.2,.8,.2,1),
    opacity .2s,visibility 0s}
#drawer .dpage{width:var(--dw)}
@media (prefers-reduced-motion:reduce){ #drawer,body.draweropen #drawer{transition:none} }
#drawerclose{position:absolute;top:10px;right:10px;width:26px;height:26px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--dim);font-size:18px;
  line-height:26px;cursor:pointer}
#drawerclose:hover{background:var(--well);color:var(--accent)}
.sidebody{padding:22px 40px 24px 26px;color:#4a5742;font-size:13px;line-height:1.62}
.sidebody h2{margin:0 0 12px;font-size:16.5px;line-height:1.3;font-weight:700;
  color:var(--ink);letter-spacing:.1px}
.sidebody h3{margin:20px 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);break-after:avoid}
.sidebody p{margin:0 0 8px;text-align:justify;text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
.sidebody .lede{font-size:13.5px;color:var(--ink);line-height:1.6}
.sidebody b{color:var(--ink);font-weight:600}
.sidebody i{font-style:italic;color:var(--ink)}
.sidebody .fine{margin-top:20px;padding-top:11px;font-size:11px;color:var(--dim);
  border-top:1px solid var(--line)}
/* narrow: shrink the film page's label column (canvases re-read --gut on resize) */
@media (max-width:820px){ :root{--gut:120px} }

/* ---------- advanced (faceted) search bar ---------- */
#advbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:7px 16px;
  background:var(--well);border-bottom:1px solid var(--line)}
#advbar select{max-width:190px}
/* ---------- multi-select facets (director / country / genre) ---------- */
.fac{display:inline-flex;align-items:center;gap:6px}
.flab{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.ms{position:relative;display:inline-block}
.ms-btn{max-width:212px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}
.ms-btn:hover{border-color:var(--a);background-color:#fbfdf8;color:var(--ink)}
.ms.on .ms-btn{background-color:var(--accent);border-color:var(--accent);color:#fdf4f8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f4d7e4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E")}
.ms.on .ms-btn:hover{color:#fff;box-shadow:0 1px 6px rgba(166,78,118,.35)}
.ms-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:268px;padding:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 22px rgba(45,65,35,.18)}
/* ---------- the sort menu's families ---------- */
/* Each family is one clickable row that sorts by its representative, with an
   arrow that unfolds the rest in place. The nested rows are ordinary .ms-rows. */
.sg-head{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:6px;
  cursor:pointer;font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink)}
.sg-head:hover{background:var(--well)}
.sg.on .sg-head{background:#f0e2e9;color:var(--accent);font-weight:600}
.sg-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-pick{font-style:normal;font-size:10.5px;color:var(--accent)}
/* a drawn triangle rather than a glyph: at this size the unicode arrows come
   out as a smudge in whatever the system font happens to be */
button.sg-arrow,span.sg-arrow{flex:none;width:14px;height:12px;padding:0;border:none;
  background:none;color:#7d8c73}
button.sg-arrow::before{content:'';display:block;width:0;height:0;margin-top:2px;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transform-origin:3px 4px;transition:transform .12s}
.sg.open button.sg-arrow::before{transform:rotate(90deg)}
button.sg-arrow:hover{color:var(--accent)}
button.sg-arrow:active{transform:none}
.sg-sub{margin:1px 0 3px 21px}
.sg-sub .ms-row{font-size:11.5px}

/* The sort menu is the one control at the right edge of its panel, so a popup
   hung from its left corner opens into the page margin. Hang this one from the
   right instead. (The widget rewrites className, so it has to key off the id.) */
#sortsel .ms-pop{left:auto;right:0}
#sortsel .ms-btn{max-width:262px}   /* family names run longer than a metric label */
/* tall enough that six families plus the longest one unfolded need no scroll */
#sortsel .ms-list{max-height:400px}
.ms-find{width:100%;background:#fbfdf8;color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font:12px/1.2 inherit}
.ms-find:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(166,78,118,.14)}
.ms-list{max-height:274px;overflow:auto;margin-top:7px}
.ms-row{display:flex;align-items:center;gap:8px;padding:3px 7px;border-radius:6px;cursor:pointer;
  font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink)}
.ms-row:hover{background:var(--well)}
.ms-row.sel{background:#f0e2e9;color:var(--accent);font-weight:600}   /* single-choice */
.ms-row.sel i{color:var(--accent)}
.ms-head{padding:7px 7px 3px;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.ms-head:first-child{padding-top:2px}
.ms-row input{accent-color:var(--accent);margin:0;flex:none}
.ms-row span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ms-row i{margin-left:auto;padding-left:6px;font-style:normal;font-size:10.5px;color:var(--dim)}
.ms-foot{display:flex;align-items:center;gap:9px;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--hair);font-size:11px;color:var(--dim)}
.ms-foot button{padding:3px 10px;font-size:11px}
#advbar input[type=number]{width:70px;background:#fbfdf8;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;font:12px/1.2 inherit;
  -moz-appearance:textfield;appearance:textfield}          /* no spinner arrows */
#advbar input[type=number]::-webkit-outer-spin-button,
#advbar input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#advbar input[type=number]:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(166,78,118,.14)}

/* ---------- header search (pill inputs with inset icons) ---------- */
#titlebox{color:var(--ink);font:12px/1.2 inherit;
  background-repeat:no-repeat;background-position:11px 50%;background-size:13px 13px}
#titlebox{background-color:#fbfdf8;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px 6px 31px;align-self:center;
  transition:border-color .15s,box-shadow .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23476e9e' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
#titlebox:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(71,110,158,.16)}
/* the scene search: the same pill as the title filter, its icon in the accent */
#qbox{color:var(--ink);font:12px/1.2 inherit;background-color:#fbfdf8;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px 6px 31px;align-self:center;min-width:0;
  background-repeat:no-repeat;background-position:11px 50%;background-size:13px 13px;
  transition:border-color .15s,box-shadow .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64e76' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
#qbox:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(166,78,118,.16)}
#titlebox::placeholder,#qbox::placeholder,.ms-find::placeholder{color:#96a189}

/* ---------- segmented two-way switches (visual/text, film/tv) ---------- */
.seg{display:inline-flex;align-items:center;gap:2px;padding:2px;flex:none;
  background:#fbfdf8;border:1px solid var(--line);border-radius:999px}
.seg button{border:none;background:none;border-radius:999px;padding:3px 12px;
  font:600 11px/1.3 inherit;letter-spacing:.4px;text-transform:uppercase;color:var(--dim)}
.seg button:hover{color:var(--accent)}
.seg button:active{transform:none}
.seg button.on{background:var(--accent);color:#fdf4f8}
.seg button.on:hover{color:#fff}

/* ---------- film list (above the plot, ~10 rows visible) ---------- */
#listwrap{position:relative;margin-bottom:12px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel)}
#listwrap .panelhead{border-bottom:1px solid var(--hair)}
#listscroll{max-height:510px;overflow-y:auto}
#listsort{color:var(--dim);font-size:11px}
.frow{display:grid;grid-template-columns:28px minmax(0,1fr) 168px;gap:10px;
  align-items:center;padding:4px 10px;border-top:1px solid var(--hair);cursor:pointer}
.frow:first-child{border-top:none}
.frow:hover{background:#e9f1dd}
.frow img{width:28px;height:42px;object-fit:cover;border-radius:3px;background:var(--well)}
.frow .t{min-width:0;line-height:1.3}
.frow .t b{font-size:12.5px;font-weight:600}
.frow .t .yr{color:var(--dim);font-size:11px}
.frow .t > span{display:block;color:var(--dim);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#closefilm{align-self:flex-start}
.frow .v{text-align:right;font-size:11px}
.frow .v .num{color:var(--accent)}
.barwrap{height:5px;background:var(--well);border-radius:2px;margin-top:3px;overflow:hidden}
.barwrap .bar{height:100%;background:var(--accent-bright);opacity:.9}
#disthint{color:var(--dim);font-size:11px;min-width:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* ---------- categorical distribution charts in the list rows ---------- */
/* Replaces the proportional bar when the sort is one category out of a set:
   every category as a vertical bar on one corpus-wide scale, the sorted one
   in the accent. Drawn in JS — see paintListDists. */
.frow .dbar{display:block;width:100%;margin-top:3px;cursor:pointer}
/* ---------- paired numbers in place of a bar ---------- */
/* Both values of a pair, the sorted one in the accent and the other in the
   same dark green the bar charts outline with. Bare numbers by design: the
   list header names them, and hovering either one spells it out. */
.frow .pair{display:inline-flex;align-items:baseline;gap:3px;font-size:12.5px}
.frow .pnum{color:#4a5742;cursor:pointer;border-radius:3px;padding:1px 4px}
.frow .pnum:hover{background:var(--well)}
.frow .pnum.on{color:var(--accent);font-weight:700}
.frow .psep{color:#aebfa0}
#listtip,#helptip{position:absolute;pointer-events:none;background:#f6faef;border:1px solid var(--line);
  border-radius:4px;padding:5px 7px;font-size:11px;line-height:1.45;z-index:5;
  max-width:290px;text-align:left;box-shadow:0 2px 8px rgba(45,65,35,.14)}
@media (max-width:1100px){ #disthint{display:none} }
#listmore{display:block;margin:8px 10px}
#plotpanel{border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#controls{flex-wrap:wrap;gap:12px;border-bottom-color:var(--hair)}
#plotpanel .legend{margin:0;padding:6px 10px 8px;border-top:1px solid var(--hair)}
label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
select,button{background-color:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font:12px/1.2 inherit}
/* selects: native chevron swapped for one in the palette */
select,.ms-btn{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:26px;background-repeat:no-repeat;background-position:right 10px center;
  background-size:9px 6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236f7d63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E")}
select:hover{border-color:var(--a);background-color:#fbfdf8}
select:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(71,110,158,.16)}
button{cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
button:hover{border-color:var(--accent);color:var(--accent)}
button:active{transform:translateY(1px)}
.chk{display:inline-flex;align-items:center;gap:5px}
#plotwrap{position:relative}
canvas{display:block;width:100%}
#tip,#tltip{position:absolute;pointer-events:none;background:#f6faef;border:1px solid var(--line);
  border-radius:4px;padding:5px 7px;font-size:11px;white-space:nowrap;z-index:5;
  box-shadow:0 2px 8px rgba(45,65,35,.14)}
.panelhead{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
#filmhead h2{margin:0 0 2px;font-size:20px}
/* the film's own name where the shown title is a translation of it */
#filmhead .alt{color:var(--dim);font-style:italic;margin:-4px 0 6px}
#filmhead .sub{color:var(--dim);margin-bottom:10px}
#filmhead .overview{margin:0 0 10px;max-width:68ch;font-size:12.5px;line-height:1.5;color:var(--ink)}
#tlwrap{position:relative;margin-top:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#pacewrap{margin-top:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}

/* ---------- the narrative section: ribbon, toggle, scenes ---------- */
/* The ribbon is the roof and the list is folded under it, so the whole thing
   is one panel with one border and the ribbon keeps no frame of its own. */
#storysec{margin-top:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#storywrap{position:relative}
#scenetoggle{display:flex;align-items:center;gap:7px;width:100%;padding:6px 10px;
  border:0;border-top:1px solid var(--hair);border-radius:0 0 6px 6px;background:none;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--a);cursor:pointer;text-align:left}
#scenetoggle:hover{background:#eef4e5;color:var(--accent)}
#scenetoggle i{font-style:normal;font-weight:400;color:var(--dim)}
#scenetoggle .caret{flex:none;width:0;height:0;border:4px solid transparent;
  border-left-color:currentColor;border-right:0;transition:transform .12s}
#scenetoggle.open .caret{transform:rotate(90deg) translateX(1px)}
#scenetoggle.open{border-radius:0}
#scenelist{border-top:1px solid var(--hair)}

.scn{display:grid;grid-template-columns:30px 1fr 250px;gap:12px;padding:11px 12px 11px 6px;
  border-bottom:1px solid var(--hair);align-items:start}
.scn:last-child{border-bottom:0}
.scn:hover{background:#f7fbf1}
.scn.flash{animation:scnflash 1.2s ease-out}
@keyframes scnflash{from{background:#e5efd4;box-shadow:inset 3px 0 0 var(--accent)}
  to{background:transparent;box-shadow:inset 3px 0 0 transparent}}
.scn-n{text-align:right;font-size:11px;color:var(--dim);padding-top:2px;
  font-variant-numeric:tabular-nums}
.scn-main{min-width:0}
.scn-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin-bottom:3px}
.scn-h b{font-size:13px;color:var(--ink)}
.scn-t{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.scn-d{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink);max-width:74ch}
/* the scene's contact sheet: frames from its shots, cut to what is on it,
   beside the description where there is room and under it where there is not */
.scn-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:14px;align-items:start}
.scn-sheet{display:block;margin-top:3px;line-height:0;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff;justify-self:start;max-width:100%}
.scn-sheet img{display:block;max-width:100%;height:auto}
@media (max-width:1180px){ .scn-body{grid-template-columns:1fr} .scn-sheet{max-width:420px} }
.scn-sheet:hover{border-color:var(--accent-bright);box-shadow:0 2px 10px rgba(45,65,35,.18)}
.chip{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;border-radius:999px;
  padding:1px 7px;border:1px solid transparent;white-space:nowrap}
.chip.why{background:#e3ecd8;color:#5d6b52;border-color:#d3e0c4}
/* the measures: the scene read against the film, not against the corpus */
.scn-mx{border-left:1px solid var(--hair);padding-left:11px}
.mx-head{font-size:10px;color:var(--dim);margin-bottom:5px;text-transform:uppercase;
  letter-spacing:.3px}
.mx-row{display:grid;grid-template-columns:42px 1fr 54px;gap:6px;align-items:center;
  margin-bottom:4px}
.mx-l{font-size:10px;color:var(--dim)}
.mx-v{font-size:10px;color:#3f4c37;text-align:right;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the same grammar as the margin at the foot of the page — rail, boxed middle
   half, median tick, a dot for the one in hand — but the population is this
   film's own scenes, so the dot takes the site's blue rather than its pink */
.mx-track{position:relative;height:12px}
.mx-track::before{content:'';position:absolute;left:0;right:0;top:4px;height:4px;
  border-radius:2px;background:#dee9d3}
.mx-track i{position:absolute;display:block}
.mx-track .box{top:2px;height:8px;border-radius:1px;background:#d2dfc5}
.mx-track .med{top:0;height:12px;width:1px;background:#75826a}
.mx-track .dot{top:2.5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--a);box-shadow:0 0 0 1.5px var(--panel)}
.scn-key{margin:0;padding:7px 12px 7px 48px;font-size:10.5px;color:var(--dim);
  border-bottom:1px solid var(--hair)}
.scn-key i{display:inline-block;vertical-align:middle;margin:0 1px}
.scn-key i.box{width:15px;height:7px;border-radius:1px;background:#d2dfc5;
  border-left:1px solid #75826a}
.scn-key i.dot{width:7px;height:7px;border-radius:50%;background:var(--a)}
.mx-foot{font-size:10px;color:var(--dim);margin-top:5px;
  border-top:1px solid var(--hair);padding-top:4px}
@media (max-width:980px){ .scn{grid-template-columns:24px 1fr}
  .scn-mx{grid-column:2;border-left:0;padding-left:0;border-top:1px solid var(--hair);
    padding-top:7px;margin-top:7px} }
/* the scene label, wider and wrapping where #tltip is one nowrap line: a
   scene's title and its sentence are the point of hovering the band */
#striptip,#storytip{position:absolute;pointer-events:none;background:#f6faef;border:1px solid var(--line);
  border-radius:4px;padding:5px 7px;font-size:11px;max-width:320px;z-index:5;
  box-shadow:0 2px 8px rgba(45,65,35,.14)}
#striptip b,#storytip b{display:block;margin-bottom:2px}
#striptip .t,#storytip .t{color:var(--dim)}
#storytip img{display:block;width:290px;margin-top:6px;border-radius:3px}
#strips{margin-top:6px;display:grid;gap:4px}
#strips canvas{background:var(--panel);border:1px solid var(--hair);border-radius:4px}
/* ---------- the metric margin, grouped into the sort menu's families ---------- */
#filmmetrics{margin-top:14px}
#filmmetrics h4{margin:0 0 2px}
.mg-key{color:var(--dim);font-size:10.5px;margin:0 0 8px}
.mg-key i{display:inline-block;vertical-align:middle;margin:0 2px}
.mg-key i.box{width:14px;height:8px;background:#d2dfc5;border-left:1px solid #75826a}
.mg-key i.dot{width:7px;height:7px;border-radius:50%;background:#b25a84}
/* Two bands. The pair families are all two rows tall, so three across the top
   come out level; the distributions below take one track each, two when they
   carry a duration column as well, which is five tracks in all. Cards stretch
   to their band's height, so the boxes line up even where the row counts do
   not. */
.mg-band{display:grid;gap:8px;margin-bottom:8px}
.mg-band.pair{grid-template-columns:repeat(3,1fr)}
.mg-band.dist{grid-template-columns:repeat(5,1fr)}
.mgroup{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:6px 8px}
.mgroup.wide{grid-column:span 2}
@media (max-width:1000px){ .mg-band.dist{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .mg-band.pair,.mg-band.dist{grid-template-columns:1fr}
  .mgroup.wide{grid-column:span 1}
}
.mg-head{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#4a5742;
  margin-bottom:2px}
.mg-rows{display:grid;align-items:center;column-gap:6px;row-gap:1px;
  grid-template-columns:auto max-content 1fr}
.mgroup.wide .mg-rows{grid-template-columns:auto max-content 1fr max-content 1fr}
.mg-col{grid-column:span 2;justify-self:center;color:var(--dim);font-size:9.5px;
  padding-bottom:2px}
.mg-lab{font-size:11px;color:#4a5742;white-space:nowrap}
.mg-v{font-size:11px;font-weight:600;color:var(--accent);justify-self:end;
  font-variant-numeric:tabular-nums}
.mg-c{display:block;width:100%;height:18px}
.legend{display:flex;gap:10px;flex-wrap:wrap;color:var(--dim);font-size:11px;margin:6px 0}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}


.qerr{color:var(--b)}

/* ---------- film page: poster + characters ---------- */
.headrow{display:flex;gap:14px;align-items:flex-start}
.headrow .poster{width:77px;border-radius:4px;border:1px solid var(--line);flex:none}

/* ---------- the poster grid ---------- */
#tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:10px}
.stile{cursor:pointer;border-radius:5px;padding:4px;border:1px solid transparent;min-width:0}
.stile:hover,.stile.hover{background:#e9f1dd;border-color:var(--line)}
.stile.hover{box-shadow:0 0 0 2px var(--accent-bright)}
.stile img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;background:var(--well)}
.stile b{display:block;margin-top:4px;font-size:11px;line-height:1.25;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stile span{display:block;color:var(--dim);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stile.off{opacity:.35}

/* ---------- loading states ---------- */
/* A view waiting on the network shows a spinner in place of what it held. The
   fetch for the next film outlasts the click that asked for it, and the film
   still on screen reads as the one that was asked for. */
#film-view{position:relative}
#film-view.missing > :not(#filmhead){display:none}
.busy{position:relative;min-height:120px}
.busy > *{visibility:hidden}
.busy::after{content:'';position:absolute;left:50%;top:40px;width:26px;height:26px;
  margin-left:-13px;border:3px solid var(--line);border-top-color:var(--a);
  border-radius:50%;animation:dvspin .8s linear infinite;visibility:visible}
.busy::before{content:attr(data-busy);position:absolute;left:0;right:0;top:78px;
  text-align:center;color:var(--dim);font-size:11px;visibility:visible;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
@keyframes dvspin{to{transform:rotate(360deg)}}
/* the spinner still turns, slowly enough not to be the thing you look at */
@media (prefers-reduced-motion:reduce){.busy::after{animation-duration:2.4s}}

/* ---------- click-through to the source video ---------- */
/* Anything that opens something on click says so with the cursor. The story
   strip unfolds its scene list; the time axes open the film's video. */
canvas.tclick,#strip-story{cursor:pointer}
.scn-yt{text-decoration:none;color:var(--a);font-size:10px;line-height:15px;
  border:1px solid #c9d6e8;border-radius:999px;padding:0 5px;background:#eef3fa}
.scn-yt:hover{background:var(--a);border-color:var(--a);color:#f4f8fd}

/* ---------- placeholders for what we hold no image of ---------- */
/* 13 films have no poster and about one named face in seven has no still. A
   missing image keeps its box and shows a drawn card or the person's initials,
   so a gap reads as something we know about and have no picture of. The img
   drops its src on error, which leaves the element in flow without the
   browser's broken-image glyph. */
img.ph,.poster.ph{background-color:var(--well);background-size:cover;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Crect width='40' height='60' fill='%23e7efdb'/%3E%3Crect x='7' y='11' width='26' height='38' rx='2' fill='none' stroke='%23c3d4b2' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='30' r='5.5' fill='none' stroke='%23c3d4b2' stroke-width='1.4'/%3E%3C/svg%3E")}
.headrow .poster.ph{display:block;width:77px;aspect-ratio:2/3}

/* ---------- films we hold a video of ---------- */
/* The mark is this page's own: a play triangle in the site's blue, not the
   badge of whichever service the copy came from. */
.vmark{display:inline-block;width:11px;height:11px;vertical-align:-1px;flex:none;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='.6' y='1.6' width='10.8' height='8.8' rx='2.2' fill='%23e7edf6' stroke='%23476e9e' stroke-width='1.1'/%3E%3Cpath d='M4.9 3.9 L8.4 6 L4.9 8.1 Z' fill='%23476e9e'/%3E%3C/svg%3E")}
.frow .vlink{display:inline-flex;align-items:center;gap:4px;margin-top:1px;
  color:var(--a);font-size:10.5px;text-decoration:none}
.frow .vlink:hover{color:var(--accent);text-decoration:underline}
.stile .vmark{vertical-align:-1px}
.vfac{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.vfac input{cursor:pointer}
/* the same link on the film page's credits line as on a list row */
.vlink{display:inline-flex;align-items:center;gap:4px;color:var(--a);text-decoration:none}
.vlink:hover{color:var(--accent);text-decoration:underline}

/* ---------- the film's video, played over the page ---------- */
/* The wash greys the page behind the player and takes no clicks, so the time
   axes underneath stay live: a click on one seeks the running video. */
#vdim{position:absolute;inset:0;z-index:2;border-radius:8px;
  background:rgba(219,233,210,.72);pointer-events:none}
/* while the player is up the rail holds its place, so no axis sits under it */
:root{--vpw:min(560px,40vw)}
body.vopen #sidebar{width:calc(var(--vpw) - 14px);min-height:calc(var(--vpw) * 9 / 16 + 34px)}
#vpanel{position:fixed;left:16px;top:calc(var(--hdr) + 12px);z-index:50;
  width:var(--vpw);border:1px solid var(--line);border-radius:8px;
  background:var(--panel);box-shadow:0 8px 30px rgba(45,65,35,.28);overflow:hidden}
#vpanel .vhead{display:flex;align-items:center;gap:10px;font-size:12px;
  padding:6px 8px 6px 10px;border-bottom:1px solid var(--line)}
#vpanel .vhead strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vbox{aspect-ratio:16/9;background:#11150f}
#vbox iframe,#vbox #vframe{display:block;width:100%;height:100%;border:0}
@media (max-width:760px){#vpanel{left:8px;right:8px;width:auto}}

/* ---------- hoverable help ---------- */
/* The mark is small and quiet until you want it; the tip it opens is the same
   one the list uses for its numbers, fixed to the viewport so a mark in the
   header or the facet bar can use it too. */
.qm{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:13px;height:13px;margin-left:4px;border-radius:999px;border:1px solid #c9d6e8;
  background:#eef3fa;color:var(--a);font:700 9.5px/1 ui-sans-serif,sans-serif;
  font-style:normal;cursor:help;vertical-align:1px;user-select:none}
.qm:hover,.qm:focus{background:var(--a);border-color:var(--a);color:#f4f8fd;outline:none}
#helptip{position:fixed;z-index:60;max-width:320px}
.mg-lab .qm{margin-left:3px}

/* ================= narrow screens ================= */
/* The page is built for a wide one: a 480px reading column, a plot beside it,
   and rows that carry a measure at the right edge. Narrowing it, the parts come
   apart in a fixed order. First the controls wrap, then the row's measure moves
   under its title, and on a phone the description and the plot each fold behind
   a toggle so the search and the list have the screen to themselves. */
header{flex-wrap:wrap;row-gap:8px}
.panelhead{flex-wrap:wrap;row-gap:6px}
#titlebox{min-width:0}
#plottoggle{display:none}                   /* shown only where it is needed */


/* the measure column gives up width before the title does */
@media (max-width:860px){
  main{padding:10px 12px}
  .frow{grid-template-columns:28px minmax(0,1fr) 108px}
}

@media (max-width:760px){
  /* header: the wordmark and the two boxes each take the width they need */
  header{gap:8px;padding:7px 10px}
  #logo{height:40px}
  .grow{display:none}
  #titlebox{flex:1 1 100%}
  #titlebox{width:100%}
  #status{flex:1 1 100%;white-space:normal}
  nav > span{max-width:100%}

  /* facets: a popup hangs from the bar rather than from its own button, which
     would put it off the right edge */
  #advbar{gap:8px;padding:6px 10px;position:relative}
  #advbar .ms{position:static}
  #advbar .ms-pop{left:10px;right:10px;width:auto;top:calc(100% + 4px)}
  #advbar input[type=number]{width:62px}
  .ms-btn{max-width:46vw}

  main{padding:8px 10px;gap:10px}
  #content{order:1}
  /* the rail lies flat above the list and the drawer is a sheet over the page */
  main{flex-direction:column;align-items:stretch}
  #sidebar,body.vopen #sidebar{position:static;z-index:auto;width:auto;min-height:0}
  #rail{flex-direction:row}
  .railbtn{flex-direction:row;width:auto;padding:6px 12px}
  .railbtn svg{width:16px;height:16px}
  #drawer,body.draweropen #drawer{position:fixed;z-index:40;left:8px;right:8px;top:8px;
    width:auto;margin:0;max-height:calc(100vh - 16px);box-shadow:0 10px 34px rgba(45,65,35,.22)}
  #drawer{transform:translateY(-24px);
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s .28s}
  body.draweropen #drawer{transform:none;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s}
  #drawer .dpage{width:auto}
  #vdim{display:none}                  /* nothing to grey: the player is its own layer */

  #plottoggle{display:inline-block}
  body:not(.plotopen) #corpus-view{display:none}
  #listscroll{max-height:none}         /* the list is the page; let it scroll with it */
  #listwrap .panelhead{position:relative}
  #listwrap .ms{position:static}
  #listwrap .ms-pop{left:10px;right:10px;width:auto}

  /* rows: two lines rather than three columns */
  .frow{
    grid-template-columns:34px minmax(0,1fr)}
  .frow img{width:34px;height:51px}
  .frow .v{grid-column:2;text-align:left}

  :root{--gut:104px}                   /* the film page's label column */
  .mx-row{grid-template-columns:38px 1fr 46px}
  button,select,.ms-btn{padding-top:7px;padding-bottom:7px}
  .qm{width:15px;height:15px}
  #listtip,#helptip,#striptip,#storytip,#tip,#tltip,#chartip,.ftip{
    max-width:calc(100vw - 24px);white-space:normal}
  /* the player sits at the foot, where a thumb reaches it */
  #vpanel{top:auto;bottom:8px;left:8px;right:8px;width:auto}
}

@media (max-width:560px){
  #tilegrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;padding:8px}
  .headrow .poster,.headrow .poster.ph{width:58px}
  #filmhead h2{font-size:17px}
}

/* ---------- the lightbox: a contact sheet over the page ---------- */
#lightbox{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  gap:18px;padding:28px 20px;background:rgba(24,30,20,.86);animation:lbfade .16s ease-out}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#lightbox{animation:none}}
body.lbopen{overflow:hidden}
#lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0;
  max-width:min(1100px,100%)}
/* as large as the screen allows, up to 1000px wide: --ar is the sheet's own
   width over height, set when it loads, so the height bound keeps its shape */
#lbimg{display:block;height:auto;
  width:min(1000px,calc(100vw - 170px),calc((100vh - 170px) * var(--ar,1.06)));
  border-radius:4px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.45);
  image-rendering:auto}
#lightbox figcaption{max-width:72ch;margin-top:12px;color:#e7efdb;font-size:13px;line-height:1.5;
  text-align:center}
#lbhead{display:block;font-size:11px;color:#b9c8aa;letter-spacing:.03em;margin-bottom:3px;
  font-variant-numeric:tabular-nums}
#lightbox button{border:1px solid rgba(231,239,219,.35);background:rgba(243,248,235,.1);color:#f3f8eb}
#lightbox button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
#lbclose{position:absolute;top:14px;right:16px;width:36px;height:36px;padding:0;
  font-size:22px;line-height:34px}
.lbnav{flex:none;width:46px;height:46px;padding:0;position:relative}
.lbnav::before{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;
  border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translate(-30%,-50%) rotate(135deg)}
#lbnext::before{transform:translate(-70%,-50%) rotate(-45deg)}
.lbnav:disabled{opacity:.25;cursor:default}
.lbnav:disabled:hover{background:rgba(243,248,235,.1);border-color:rgba(231,239,219,.35);color:#f3f8eb}
.scn-sheet{cursor:zoom-in}
@media (max-width:760px){
  #lightbox{padding:56px 8px 16px;flex-wrap:wrap;align-content:center;gap:10px}
  #lightbox figure{order:-1;flex-basis:100%}
  #lbimg{width:min(100%,calc((100vh - 230px) * var(--ar,1.06)))}
}

/* ---------- characters onscreen: named face tracks, row by row ---------- */
/* who is in a scene, from the same face tracks the presence strips draw */
.scn-cast{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center}
.fchip{display:flex;align-items:center;gap:5px;background:var(--well);border:1px solid var(--hair);
  border-radius:999px;padding:1px 8px 1px 1px;max-width:150px}
.fchip.faint{opacity:.55}
.fchip img,.fchip .noimg{width:20px;height:20px;border-radius:999px;object-fit:cover;
  background:#dbe4cd;flex:none;display:block}
.fchip em{font-style:normal;font-size:10.5px;color:#3f4c37;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fmore{font-size:10.5px;color:var(--dim)}
#charwrap{position:relative;margin-top:12px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);padding:8px 10px}
#charwrap h4{margin:0 0 8px;font-size:11px;color:var(--dim);font-weight:500;text-transform:uppercase}
#charnote{text-transform:none;font-weight:400;letter-spacing:0}
.charrow{display:grid;grid-template-columns:var(--gut) 1fr;gap:10px;align-items:center;
  padding:2px 0;border-top:1px solid var(--hair)}
.charrow.axis{border-top:none;padding:0}
.charrow .who{display:flex;gap:8px;align-items:center;min-width:0}
.charrow .who img{width:34px;height:34px;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);flex:none;transition:transform .09s ease-out}
.charrow .who img:hover{position:relative;z-index:10;transform:scale(3.7);
  transform-origin:left center;border-radius:1px;
  box-shadow:0 3px 16px rgba(45,65,35,.35)}
.charrow .who .noimg{width:34px;height:34px;border-radius:4px;background:var(--well);
  border:1px solid var(--line);flex:none}
.charrow .who div{min-width:0;line-height:1.25}
.charrow .who b{display:block;font-size:12px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.charrow .who span{display:block;color:var(--dim);font-size:10.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.charrow canvas{width:100%}
#chartip{position:absolute;pointer-events:none;background:#f6faef;border:1px solid var(--line);
  border-radius:4px;padding:4px 7px;font-size:11px;white-space:nowrap;z-index:5;
  box-shadow:0 2px 8px rgba(45,65,35,.14)}
.noimg{display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  font-weight:600;color:#8a977e;letter-spacing:.02em;overflow:hidden}
.fchip .noimg{font-size:8.5px}
.charrow .who .noimg{font-size:12px}
#charmore{margin:8px 0 2px}
.charrow .who .noimg{font-size:12px}

/* ---------- search results ---------- */
/* a ranked row quotes the film's best scene and shows its sheet small */
.flist.hasq .frow{grid-template-columns:28px minmax(0,1fr) 112px 54px}
.frow .qhit{display:block;color:#7d3d5a;font-size:11px;line-height:1.35;margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.frow .qsheet{width:112px;height:auto;max-height:64px;object-fit:cover;object-position:top;
  border-radius:3px;border:1px solid var(--hair);background:#fff}
.conceptbar{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;color:var(--dim);font-size:11.5px;
  margin:2px 0 6px}
.conceptbar b{color:var(--accent)}
.conceptbar a{color:var(--a)}
.conceptbar .quote{flex-basis:100%;font-style:italic;color:#4a5742;max-width:90ch}
.chip.best{background:#f4e5ec;color:var(--accent);border-color:#e8d2dd}
.qerr{color:var(--b)}
@media (max-width:760px){
  #qbox{flex:1 1 100%;width:100%}
  .flist.hasq .frow{grid-template-columns:34px minmax(0,1fr)}
  .frow .qsheet{display:none}
}
/* a TMDb headshot is a portrait, so it is framed on the face near its top */
.charrow .who img.tmdb,.fchip img.tmdb{object-position:50% 22%}

/* ---------- hover ---------- */
/* everything that answers a hover says so with the cursor */
#timeline,#pace,#strip-band,#strip-pace,#strip-speech,#strip-story,canvas.presence,
canvas.mg-c,.frow .dbar,.mx-row{cursor:pointer}
#pacewrap,#strips{position:relative}
.ftip{position:absolute;pointer-events:none;background:#f6faef;border:1px solid var(--line);
  border-radius:4px;padding:5px 7px;font-size:11px;white-space:nowrap;z-index:5;
  box-shadow:0 2px 8px rgba(45,65,35,.14)}