/* The Affordability Problem — one stylesheet, every page.
   Palette is the film's: the frames are drawn on GROUND #F5F7FA in DARK #101E33,
   with one red and one green doing all the arguing. Nothing here should compete
   with a number. */
:root{
  --ground:#F5F7FA; --panel:#FFFFFF; --sunk:#EDF1F7;
  --ink:#101E33; --mute:#64748B; --rule:#DCE4EE;
  --blue:#1D5FA8; --red:#C0392B; --money:#1E8A5A; --slate:#A9C3E0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C1828; --panel:#132339; --sunk:#0F1F33;
    --ink:#EAF1FA; --mute:#8FA3BC; --rule:#25384F;
    --blue:#7FB2E8; --red:#E8776A; --money:#4FBE8C; --slate:#5C7796;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1828; --panel:#132339; --sunk:#0F1F33;
  --ink:#EAF1FA; --mute:#8FA3BC; --rule:#25384F;
  --blue:#7FB2E8; --red:#E8776A; --money:#4FBE8C; --slate:#5C7796;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.6; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px 96px}
p{max-width:66ch}
a{color:var(--blue); text-underline-offset:3px; text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}

header{padding:64px 0 0}
.kick{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); font-weight:600; margin:0 0 20px}
.kick a{color:var(--mute); text-decoration:none}
.kick a:hover{color:var(--blue)}
h1{font-size:clamp(32px,6vw,50px); line-height:1.05; letter-spacing:-.03em; font-weight:700; margin:0 0 24px; text-wrap:balance}
h1.film-title{font-size:clamp(28px,5vw,42px)}
.lede{font-size:19px; line-height:1.55; margin:0 0 18px}
.lede strong{font-weight:600}
.dek{font-size:15px; color:var(--mute); margin:0 0 26px}

section{border-top:1px solid var(--rule); margin-top:52px; padding-top:32px}
h2{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-weight:600; margin:0 0 20px}
h3{font-size:17px; font-weight:600; letter-spacing:-.01em; margin:28px 0 8px}
.note{font-size:15px; color:var(--mute); margin-top:0}

/* the thesis figure */
figure{margin:28px 0 8px; background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:24px 24px 18px}
.barrow{margin-bottom:22px}
.barrow:last-of-type{margin-bottom:6px}
.barlab{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:13.5px; margin-bottom:7px}
.barlab .what{font-weight:600}
.barlab .pct{font-weight:700; font-size:16px}
.track{height:15px; background:var(--sunk); border-radius:2px; overflow:hidden}
.fill{height:100%; border-radius:2px}
.fill.up{background:var(--red)}
.fill.pay{background:var(--money)}
.ends{font-size:12.5px; color:var(--mute); margin-top:6px}
figcaption{font-size:12px; color:var(--mute); line-height:1.5; margin-top:18px; border-top:1px solid var(--rule); padding-top:12px}

/* film card, front page */
.film{background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:22px 24px; margin:22px 0}
.film .t{font-size:19px; font-weight:600; letter-spacing:-.015em; margin:0 0 4px}
.film .m{font-size:13px; color:var(--mute); margin:0 0 16px}
.film .blurb{font-size:15px; margin:0 0 18px}
.btnrow{display:flex; flex-wrap:wrap; gap:10px}
.watch{display:inline-block; background:var(--ink); color:var(--ground); text-decoration:none; font-weight:600; font-size:14.5px; padding:10px 20px; border-radius:3px}
.watch:hover{opacity:.88}
.watch.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}
.watch.ghost:hover{border-color:var(--blue); color:var(--blue); opacity:1}

/* embed, film page */
.embed{position:relative; width:100%; aspect-ratio:16/9; background:var(--ink); border-radius:3px; overflow:hidden; margin:0 0 24px}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.chapters{list-style:none; padding:0; margin:22px 0 0; border-top:1px solid var(--rule)}
.chapters li{display:flex; gap:16px; font-size:14px; padding:7px 0; border-bottom:1px solid var(--rule)}
.chapters a{color:var(--mute); text-decoration:none; flex:0 0 46px}
.chapters a:hover{color:var(--blue)}
.chapters span{color:var(--ink)}

/* tables */
.tblwrap{overflow-x:auto; margin:18px 0}
table{border-collapse:collapse; width:100%; font-size:14px; table-layout:auto}
th{text-align:left; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute); font-weight:600; padding:0 16px 8px 0; border-bottom:1px solid var(--rule); white-space:nowrap}
td{padding:10px 16px 10px 0; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.4}
th:first-child,td:first-child{min-width:176px}
td.v{font-weight:600; white-space:nowrap}
td.s{font-size:12.5px; color:var(--mute)}
tr>td:last-child,tr>th:last-child{white-space:nowrap; padding-right:0}
code{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.88em}
td.s code{font-size:12.5px}

ul.rules{list-style:none; padding:0; margin:18px 0}
ul.rules li{padding:12px 0; border-bottom:1px solid var(--rule); font-size:15px; line-height:1.55}
ul.rules li b{display:block; font-weight:600; margin-bottom:2px}
ul.rules li span{color:var(--mute); font-size:14px}

.none{color:var(--mute); font-size:15px}
.method p{font-size:15px}
footer{border-top:1px solid var(--rule); margin-top:52px; padding-top:24px; font-size:13px; color:var(--mute)}
footer a{color:var(--mute)}
footer p{max-width:70ch}

/* ---------- charts ---------------------------------------------------------
   Drawn by charts.py into the page as inline SVG, so they inherit these tokens
   and change with the theme. The chart green is a truer teal than the film's:
   the film's red/green pair separates by only dE 6.3 under deuteranopia, which
   is too close for two thin lines. Both lines are labelled at their ends as
   well, so colour is never the only thing telling them apart. */
:root{ --c-red:#C0392B; --c-blue:#1D5FA8; --c-green:#0E9480; --c-band:rgba(192,57,43,.07); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --c-red:#D9594A; --c-blue:#4F8BE8; --c-green:#2BA88C; --c-band:rgba(217,89,74,.12);
  }
}
:root[data-theme="dark"]{
  --c-red:#D9594A; --c-blue:#4F8BE8; --c-green:#2BA88C; --c-band:rgba(217,89,74,.12);
}

figure.chart{padding:20px 22px 14px; margin:24px 0}
.chead{display:block; border:0; padding:0; margin:0 0 4px; font-size:12px; color:var(--mute); line-height:1.5}
.chead b{display:block; font-size:17px; color:var(--ink); font-weight:600; letter-spacing:-.01em; margin-bottom:2px}
.legend{display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 6px; font-size:12.5px; color:var(--mute)}
.key{display:inline-flex; align-items:center; gap:7px}
.sw{width:14px; height:3px; border-radius:2px; display:inline-block}
.sw.red{background:var(--c-red)} .sw.blue{background:var(--c-blue)} .sw.green{background:var(--c-green)}
.chartwrap{overflow-x:auto; margin:4px -4px 0}
.chartwrap svg{display:block; width:100%; min-width:560px; height:auto}
.csrc{font-size:11.5px; color:var(--mute); line-height:1.5; margin:12px 0 0; max-width:none;
      border-top:1px solid var(--rule); padding-top:10px}

svg .grid{stroke:var(--rule); stroke-width:1}
svg .base{stroke:var(--mute); stroke-width:1; stroke-dasharray:3 3; opacity:.6}
svg .band{fill:var(--c-band)}
svg .ax{fill:var(--mute); font-size:12px}
svg .bandlab{fill:var(--c-red); font-size:15px; font-weight:600}
svg .bandsub{fill:var(--mute); font-size:12px}
svg .ln{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
svg .ln.red,svg .dot.red{stroke:var(--c-red)}
svg .ln.blue,svg .dot.blue{stroke:var(--c-blue)}
svg .ln.green,svg .dot.green{stroke:var(--c-green)}
svg .dot{fill:var(--panel); stroke-width:2}
svg .lab{font-size:14px; font-weight:600}
svg .lab.red{fill:var(--c-red)} svg .lab.blue{fill:var(--c-blue)} svg .lab.green{fill:var(--c-green)}
svg .lab.sub{fill:var(--mute); font-size:11.5px; font-weight:400}
.legend b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; margin-left:2px}
.hdate{margin-left:auto; color:var(--mute); font-variant-numeric:tabular-nums}
svg .hline{stroke:var(--mute); stroke-width:1; opacity:.45}
svg .hdot{fill:var(--panel); stroke-width:2}
svg .hdot.red{stroke:var(--c-red)} svg .hdot.blue{stroke:var(--c-blue)} svg .hdot.green{stroke:var(--c-green)}
.chartwrap{cursor:crosshair}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* The `hidden` attribute is an HTML attribute. Browsers apply it through the UA
   stylesheet, and that rule does not reliably reach elements inside an <svg> -- so the
   parked hover crosshair and its dots rendered as a tick in the top-left corner of every
   chart, at the (0,0) they sit at before the first pointermove. Chromium did not show it;
   Safari did. Say it in our own stylesheet and it is true everywhere. */
svg .hov[hidden]{display:none}

/* One line, above the fold, so nobody has to hunt for the video -- but a text link and
   not a card, because the page still has to open with the argument rather than a play
   button. Most visitors arrive from the film's own description and have already watched;
   the ones who have not are the reason this is here at all. */
.watchline{font-size:15px; color:var(--mute); margin:22px 0 0}
.watchline a{font-weight:600; color:var(--blue); text-decoration:none; border-bottom:1px solid var(--rule)}
.watchline a:hover{border-bottom-color:var(--blue)}