/* FP kit — built from kit/[1-9]-*.css. Do not edit here; edit the tier. */
/* ═══ TIER 1 · REFERENCE ═══ raw values. Nothing outside tier 2 may name these.
   Rand's colour is flat, saturated and unmixed, and it is LOAD-BEARING: take the stripes off
   IBM and the idea is gone. Every hue below exists to carry a fact, and each is given twice —
   once for paper, once for the dark room — so the role tier can swap register without mixing.
   Every ratio below was MEASURED (kit/contrast.py), not estimated. Three room hues were lifted
   on 2026-08-20 because the measurement showed 5.1, 6.4 and 6.9 against a house floor of 7. */
:root{
  --ref-white:#ffffff;      --ref-black:#101010;
  --ref-grey-70:#3d3d3b;    --ref-grey-50:#4e4e4a;    --ref-grey-40:#585854;
  /* grey-50 was 5.4:1 and grey-40 was 3.3:1 against white — measured, not guessed, and both
     below the house floor of 7. grey-40 carries a THROWN-OUT review's text, and a reader is
     meant to check that work, so the strike now carries the de-emphasis and the words stay
     readable at 7.1:1. */
  --ref-line:#e2e0dc;

  /* the agreement scale — how far apart the critics actually were */
  --ref-teal:#0b5a50;       --ref-teal-lit:#4fbfae;    /* measured 8.1:1 / 8.4:1 */
  --ref-ochre:#7a4e00;      --ref-ochre-lit:#e0a32e;   /* measured 7.2:1 / 8.4:1 */
  --ref-vermilion:#9a3412;  --ref-verm-lit:#f2805d;    /* measured 7.3:1 / 7.1:1 */
  --ref-violet:#5b2a86;     --ref-violet-lit:#b38fe9;  /* measured 9.9:1 / 7.1:1 */

  --ref-garnet:#8c1d2a;     --ref-garnet-lit:#df8a94;  /* measured 9.0:1 / 7.3:1 */
  --ref-roast:180,85,31;    --ref-roast-lit:214,132,58;

  /* The dark room's ground, DERIVED and not picked. #b4551f is the roast; in HSL it sits at
     hue 21.7deg. This is that same hue held down to lightness 6.5% at saturation 26% — the
     coffee with the light taken out of it, which is what a dark room is. The value it replaces
     (#141210) was a warm near-black I chose by eye, with a red-over-blue bias of 4; this one
     is 9, and every step of it can be checked against the hue above. A ground with no
     derivation is a ground borrowed from whatever dark interface you last looked at, and on a
     site named after a way of making coffee there is a better place to get one. */
  --ref-ground-dark:#150f0c;

  --ref-face-a:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --ref-face-b:'Archivo',system-ui,sans-serif;
  --ref-ease:cubic-bezier(.2,.75,.3,1);
}

/* ═══ TIER 2 · ROLES ═══ the ONLY tier a livery may touch.
   A livery redefines these custom properties and nothing else. If a livery ever
   needs to name a component class, this tier is missing a role — fix it here.
   The number KIT_JITSU trap 12 asks for: component classes named by a livery = 0. */
:root{
  /* surface */
  --ground:var(--ref-white);
  --ink:var(--ref-black);          /* 19.3:1 on ground */
  --ink-quiet:var(--ref-grey-70);  /* 10.1:1 */
  --ink-meta:var(--ref-grey-50);   /*  5.3:1 — meta only, never body */
  --ink-gone:var(--ref-grey-40);   /* a review that was thrown out */
  --rule:var(--ref-line);
  --lift:rgb(var(--warmth)/.07);  /* the ground, one step up: a cited ruling when linked to */

  /* ── the hues, and every one of them carries a fact ──
     RAND_JITSU gate 2: take the colour out and the design must lose INFORMATION.
     Each of these is measured from the reading, never chosen for mood, and each is
     printed beside its own word on the page — colour is never the sole carrier. */
  --removed:var(--ref-garnet);       /* this review was thrown out */
  --agree-none:var(--ref-teal);      /* the critics were within 10 points: unanimous */
  --agree-some:var(--ref-ochre);     /* 11 to 25 apart: divided */
  --agree-wide:var(--ref-vermilion); /* 26 to 45 apart: contested */
  --agree-open:var(--ref-violet);    /* more than 45 apart: fought over */
  --warmth:var(--ref-roast);         /* light only, as an r,g,b triple. Never carries text. */

  /* voice: A is the studio (every sentence a person wrote), B is the machine (the score, alone) */
  --voice-studio:var(--ref-face-a);
  --voice-machine:var(--ref-face-b);

  /* scale — 7 steps, nothing between, nothing below --t-fine */
  --t-score:27.2vw;  --t-hero:clamp(2.15rem,5.1vw,4.05rem);
  --t-head:clamp(1.85rem,4.2vw,3.05rem); --t-lead:clamp(1.3rem,2.5vw,1.72rem);
  --t-quote:clamp(1.24rem,2.1vw,1.58rem); --t-body:1.09rem; --t-fine:1.02rem;

  /* rhythm */
  --pad:clamp(1.35rem,5vw,5.5rem); --band:clamp(3rem,8vh,5rem);
  --item:clamp(1.7rem,4vh,2.6rem); --measure:40rem;
  --ease:var(--ref-ease);
}

/* ═══ TIER 3 · PRIMITIVES ═══ domain-free layout and text. Roles only.
   SCALE_JITSU trap 2: the layer that scales is the one BELOW the components.
   Every one of these is a NAME, never a cell — they compose rather than multiply. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--voice-studio);
     font-size:var(--t-body);line-height:1.55;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--removed);border-radius:2px}

/* structure */
.k-page{max-width:1240px;margin:0 auto;padding:0 var(--pad);position:relative}
.k-band{padding:var(--band) 0}
.k-band--open{padding:clamp(3rem,9vh,6.4rem) 0 clamp(1.4rem,3.4vh,2.4rem)}
.k-band--tight{padding:clamp(2rem,5vh,3rem) 0}
.k-band--head{padding:clamp(2.6rem,8vh,5rem) 0 clamp(2.4rem,6vh,3.6rem)}
.k-top{border-top:1px solid var(--rule)}
.k-measure--wide{max-width:52rem}

/* a measure with a spine beside it — the shape a reading needs, and nothing else */
.k-spine{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);
  gap:clamp(1rem,4vw,3.5rem);align-items:start}

/* rhythm without per-element margins */
.k-stack > * + *{margin-top:var(--sp,1rem)}
.k-stack--wide{--sp:var(--item)}
.k-flow{display:flex;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;align-items:baseline}
.k-split{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
/* a term beside its definition — adjacent, never flung to opposite edges (DESIGN_JITSU 17a) */
.k-def{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:.35rem 1.6rem;align-items:baseline}
.k-def > * + *{margin:0}
@media (max-width:640px){.k-def{grid-template-columns:1fr;gap:.15rem 0}}

/* the warm plane — light from beyond the frame, behind everything. Identity surfaces only. */
.k-light{position:relative}
.k-light::before{content:"";position:absolute;z-index:-1;right:-28vw;top:-14vh;width:92vw;height:118%;
  pointer-events:none;background:radial-gradient(closest-side at 62% 42%,
    rgba(var(--warmth),.06), rgba(var(--warmth),.02) 52%, transparent 78%)}

/* text roles — the whole scale, and nothing may set a size outside these */
.k-hero{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.038em;font-weight:500;max-width:19ch}
.k-head{font-size:var(--t-head);line-height:1.07;letter-spacing:-.032em;font-weight:500;max-width:18ch}
.k-lead{font-size:var(--t-lead);line-height:1.3;letter-spacing:-.024em;font-weight:500;max-width:26ch}
.k-lead + *{margin-top:clamp(1.6rem,4vh,2.4rem)}
.k-say{font-size:var(--t-body);color:var(--ink-meta);line-height:1.55;max-width:44ch;letter-spacing:-.011em}
.k-say--wide{max-width:58ch}
.k-fine{font-size:var(--t-fine);color:var(--ink-meta);line-height:1.45;letter-spacing:-.006em}
.k-strong{color:var(--ink);font-weight:600}
.k-link{font-weight:500;text-decoration-color:var(--rule);text-underline-offset:3px}
.k-link:hover{text-decoration-color:var(--removed)}
.k-bare{text-decoration:none;display:block}

/* ═══ TIER 4 · COMPONENTS ═══ FP's domain, skinned over the primitives.
   SCALE_JITSU trap 3: generic kits stall because generic parts cannot absorb domain UI.
   Every part here is a thing only a film reading has. Roles only — no raw values,
   no --ref- names. Enforced by kit/lint.py. */

/* THE SCORE — the one shout. --voice-machine appears here and nowhere else.
   Proportional figures: a standalone number in tabular reads gappy (DESIGN_JITSU L5). */
.fp-score{font-family:var(--voice-machine);font-weight:900;font-variation-settings:'wdth' 125;
  font-variant-numeric:proportional-nums lining-nums;letter-spacing:-.055em;line-height:.74;
  color:var(--ink);display:block}
.fp-score--bleed{font-size:calc(var(--t-score) * var(--fit,1));white-space:nowrap;
  margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
  margin-top:clamp(1.8rem,5vh,3.4rem)}
.fp-score--inline{font-size:clamp(2.4rem,5vw,3.6rem)}

/* CHROME — identical on every surface, so no page is a stranded island. */
.fp-foot{margin-top:var(--band);padding:1.4rem 0 clamp(2.6rem,6vh,3.8rem);
  border-top:1px solid var(--rule);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;font-size:var(--t-fine);color:var(--ink-meta)}

/* THE STRIKE — one expressive move, one meaning: this was removed. */
.fp-struck{text-decoration:none;color:var(--removed);display:inline;
  background-image:linear-gradient(var(--removed),var(--removed));
  background-repeat:no-repeat;background-position:0 .545em;background-size:0% .072em;
  transition:background-size .8s var(--ease) .35s}
.go .fp-struck{background-size:100% .072em}

/* A REVIEW — counted holds the left spine; thrown out is pushed right and greyed,
   so POSITION carries the verdict and no label has to. */
.fp-quote{max-width:var(--measure)}
.fp-quote p{font-size:var(--t-quote);line-height:1.36;letter-spacing:-.018em}
.fp-quote cite{display:block;font-style:normal;font-size:var(--t-fine);color:var(--ink-meta);margin-top:.5rem}
.fp-quote--cut{margin-left:auto;margin-right:0;max-width:32rem;text-align:right}
.fp-quote--cut p{font-size:clamp(1.09rem,1.6vw,1.24rem);color:var(--ink-gone)}
.fp-quote--cut cite{color:var(--removed)}
.fp-quote--cut p em{font-style:normal;background-image:linear-gradient(var(--removed),var(--removed));
  background-repeat:no-repeat;background-position:100% .66em;background-size:0% 2px;
  transition:background-size .6s var(--ease)}
.fp-quote--cut.in p em{background-size:100% 2px}
.fp-via{color:var(--ink-gone)}

/* A PLACEMENT — on a right spine, so a reading's spread is scannable straight down */
.fp-placed{margin-bottom:var(--item)}
.fp-at{font-family:var(--voice-machine);font-weight:800;font-variation-settings:'wdth' 108;
  font-variant-numeric:proportional-nums lining-nums;font-size:clamp(1.6rem,3vw,2.3rem);
  letter-spacing:-.03em;line-height:1;color:var(--ink);padding-top:.1rem}
.fp-at span{display:block;font-family:var(--voice-studio);font-size:var(--t-fine);
  font-weight:400;color:var(--ink-meta);letter-spacing:0;margin-top:.3rem}
.fp-placed--cut .fp-at{color:var(--removed)}

/* THE COUNTS — what a reading rests on, tight under the number, never an island */
.fp-counts{margin-top:clamp(.9rem,2.2vh,1.4rem);font-size:var(--t-body);color:var(--ink-meta)}
.fp-counts b{color:var(--ink);font-weight:600}

/* A NOTICE — a reading declaring its own weakness, in the reader's plain sight */
.fp-notice{margin-top:1.1rem;max-width:52ch;font-size:var(--t-body);color:var(--ink-meta);line-height:1.55}

/* A METER — honest by construction: the width IS the value */
.fp-meter{height:7px;background:var(--rule);max-width:19rem;margin-top:.95rem}
.fp-meter i{display:block;height:100%;background:var(--ink);width:0;transition:width 1s var(--ease)}
.go .fp-meter i{width:var(--w)}
.fp-meter--removed i{background:var(--removed)}

/* A FILM in the index */
.fp-film{display:block;text-decoration:none;margin-bottom:clamp(2rem,5vh,3.2rem)}
.fp-film-t{display:block;font-size:var(--t-lead);font-weight:600;letter-spacing:-.024em;margin-top:.55rem}
.fp-film-m{display:block;margin-top:.3rem}
.fp-vow{font-size:clamp(1.36rem,2.6vw,1.94rem);line-height:1.24;letter-spacing:-.028em;
  font-weight:500;color:var(--ink);max-width:24ch}
.fp-vow em{font-style:normal;color:var(--removed)}

@media (max-width:800px){
  .fp-score--bleed{font-size:clamp(4.6rem,26vw,9rem)}
  .k-spine{grid-template-columns:1fr;gap:.6rem}
  .fp-at{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .fp-struck::after,.fp-quote--cut p em,.fp-meter i{transition:none}
}

/* THE DRAWN READING — RANGE_JITSU trap 5: anything that can be drawn should be drawn.
   Generated from the same numbers the page prints, so a chart cannot disagree with its page. */
.fp-draw{display:block;width:100%;height:auto;margin-top:clamp(1.2rem,3vh,2rem)}
.fp-draw-t{font-family:var(--voice-studio);font-size:19px;fill:var(--ink-meta)}
.fp-draw-l{font-family:var(--voice-studio);font-size:23px;font-weight:600;fill:var(--ink)}
.fp-draw-n{font-family:var(--voice-machine);font-size:27px;font-weight:800;fill:var(--ink);
  font-variant-numeric:proportional-nums lining-nums}
.fp-room{padding:clamp(2rem,5vh,3.4rem) var(--pad);margin-left:calc(-1 * var(--pad));
  margin-right:calc(-1 * var(--pad))}
.fp-key{display:flex;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;margin-top:1rem;
  font-size:var(--t-fine);color:var(--ink-meta)}
.fp-key s{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.fp-key s::before{content:"";width:12px;height:3px;background:var(--ink)}
.fp-key s.score::before{height:9px}
.fp-key s.cut::before{background:var(--removed)}

/* THE AGREEMENT BAND — how far apart the critics were, as a word AND a colour.
   COLOR_JITSU trap 8: the word is always present, so the colour is never the sole carrier. */
.fp-band{font-weight:600;letter-spacing:.01em}
.fp-band--agree-none{color:var(--agree-none)}
.fp-band--agree-some{color:var(--agree-some)}
.fp-band--agree-wide{color:var(--agree-wide)}
.fp-band--agree-open{color:var(--agree-open)}
.fp-draw-h{font-family:var(--voice-studio);font-size:21px;font-weight:600;letter-spacing:.06em;
  text-transform:lowercase}

/* THE POSTER — one central image per film, isolated by space (Munari, Poster with a Central
   Image). The eye cannot leave a circle by a corner, because it has none. */
.fp-poster{display:block;width:100%;height:auto;max-width:17rem;margin-inline:auto}
.fp-poster-n{font-family:var(--voice-machine);font-weight:900;font-size:118px;
  font-variant-numeric:proportional-nums lining-nums;letter-spacing:-.05em;fill:var(--ground)}
.fp-plate{display:grid;place-items:center;padding:clamp(1.4rem,3.6vh,2.4rem) 0}

/* THE SHEET — a film's poster with its score. On the wall every tile is IDENTICAL: same box,
   same ratio, same badge position, so the grid is a grid. Ragged tiles with a badge hanging
   off the edge is a pile, not a wall. */
.fp-sheet{position:relative;display:block;max-width:19rem;margin-inline:auto}
.fp-sheet img{display:block;width:100%;height:auto;
  box-shadow:0 0 0 1px rgba(20,18,16,.10),
             0 1px 1px rgba(58,42,24,.05),
             0 2px 4px -1px rgba(58,42,24,.05),
             0 8px 12px -6px rgba(58,42,24,.06),
             0 20px 28px -14px rgba(58,42,24,.07)}
.fp-sheet .fp-poster{position:absolute;left:-11%;bottom:-9%;width:48%;max-width:none;margin:0}
.fp-sheet .fp-poster-n{font-size:150px}
.fp-credit{display:block;margin-top:3.4rem;font-size:var(--t-fine);color:var(--ink-meta);
  max-width:34ch;margin-inline:auto;text-align:center;line-height:1.45}

/* THE WALL — uniform tiles. Every cell the same, every badge in the same corner. */
.fp-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(1.7rem,4vw,2.6rem) clamp(1.1rem,2.4vw,1.8rem);margin-top:0}
.fp-wall a{text-decoration:none;display:block;text-align:center}
.fp-wall .fp-sheet{max-width:none;aspect-ratio:2/3;overflow:hidden;
  box-shadow:0 0 0 1px rgba(20,18,16,.10),
             0 1px 1px rgba(58,42,24,.05),
             0 2px 4px -1px rgba(58,42,24,.05),
             0 10px 16px -8px rgba(58,42,24,.07)}
.fp-wall .fp-sheet img{width:100%;height:100%;object-fit:cover;box-shadow:none}
.fp-wall .fp-sheet .fp-poster{left:auto;right:5%;bottom:4%;width:38%}
.fp-wall .fp-sheet-box{display:block}
.fp-wall .fp-poster-n{font-size:132px}
.fp-wall .fp-credit{display:none}
.fp-wall b{display:block;font-size:var(--t-body);font-weight:600;margin-top:.85rem;
  letter-spacing:-.015em;line-height:1.25;min-height:2.5em}
.fp-wall span{display:block}
.fp-wall .k-fine{margin-top:.15rem;min-height:2.9em}
.fp-wall .fp-band{display:inline-block;margin-top:.4rem}

/* THE SPEC SHEET — the same fixed rows on every film, so a reader learns the shape once and then
   reads any film in seconds. The Parents Guide's actual value is that it is SYSTEMATIC.
   Label / value / source. A value with no source does not ship. */
.fp-spec{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:0;
  max-width:52rem;margin-top:clamp(1.6rem,4vh,2.4rem)}
.fp-spec dt{grid-column:1;padding:.72rem 1.2rem .72rem 0;border-top:1px solid var(--rule);
  font-size:var(--t-fine);color:var(--ink-meta);letter-spacing:-.006em}
.fp-spec dd{grid-column:2;padding:.72rem 0;border-top:1px solid var(--rule);
  font-size:var(--t-body);letter-spacing:-.011em}
.fp-spec dd cite{display:block;font-style:normal;font-size:var(--t-fine);color:var(--ink-meta);
  margin-top:.2rem}
.fp-spec dd q{quotes:none}
.fp-spec .hi{font-weight:600}

/* THE COMPARISON — every reading in one scannable block. Comparison is a table's job. */
.fp-tbl{width:100%;border-collapse:collapse;margin-top:clamp(1.6rem,4vh,2.4rem);
  font-variant-numeric:tabular-nums}
.fp-tbl th{text-align:left;font-size:var(--t-fine);font-weight:600;color:var(--ink-meta);
  padding:.5rem .9rem .5rem 0;border-bottom:2px solid var(--ink);letter-spacing:-.006em}
.fp-tbl td{padding:.62rem .9rem .62rem 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-body);letter-spacing:-.011em;vertical-align:baseline}
.fp-tbl .n{font-family:var(--voice-machine);font-weight:800;font-size:1.24rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;width:1%;white-space:nowrap}
.fp-tbl .t{font-weight:600}
.fp-tbl tr:hover td{background:rgba(var(--warmth),.05)}
.fp-tbl a{text-decoration:none}
@media (max-width:640px){
  .fp-spec{grid-template-columns:1fr;max-width:none}
  .fp-spec dt{border-top:1px solid var(--rule);padding-bottom:0}
  .fp-spec dd{border-top:0;padding-top:.15rem}
  .fp-tbl .hide{display:none}
}
/* The homepage opens onto the goods. A useful page does not spend a screen introducing itself. */
.fp-open{padding:clamp(.9rem,2.2vh,1.5rem) 0 clamp(2.6rem,6vh,4rem)}
.fp-open .k-say{margin-top:.9rem}
.fp-open .fp-wall{margin-top:clamp(1.1rem,2.6vh,1.7rem)}

/* A film with no poster available still occupies a tile, so the grid never breaks. */
.fp-wall .fp-nosheet{aspect-ratio:2/3;display:grid;place-items:center;background:var(--rule);
  box-shadow:0 0 0 1px rgba(20,18,16,.10)}
.fp-wall .fp-nosheet .fp-poster{position:static;width:62%;max-width:none}

/* THE GUIDE — fixed categories, a level each, cited items. Scannable before it is readable. */
.fp-guide{display:grid;gap:0;max-width:52rem;margin-top:clamp(1.2rem,3vh,1.8rem)}
.fp-g{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:.2rem 1.2rem;
  padding:.78rem 0;border-top:1px solid var(--rule);align-items:baseline}
.fp-g > b{font-size:var(--t-body);font-weight:600;letter-spacing:-.011em}
.fp-g > span{font-size:var(--t-fine);color:var(--ink-meta);letter-spacing:-.006em}
.fp-g--none > b{color:var(--ink-meta);font-weight:400}
.fp-g--hit > b{color:var(--removed)}
.fp-g q{quotes:none;display:block;font-size:var(--t-fine);color:var(--ink-quiet);
  line-height:1.45;margin-top:.3rem}
.fp-g q cite{font-style:normal;color:var(--ink-meta)}
.fp-g .lv{grid-column:2;font-size:var(--t-fine);color:var(--ink-meta)}
@media (max-width:640px){.fp-g{grid-template-columns:1fr}.fp-g .lv,.fp-g q{grid-column:1}}

/* THE HEADER — a lookup product's header has to take you anywhere from anywhere. */
.fp-head{position:sticky;top:0;z-index:20;background:var(--ground);
  border-bottom:1px solid var(--rule);margin-bottom:clamp(1rem,2.4vh,1.6rem)}
.fp-head-in{max-width:1240px;margin:0 auto;padding:.85rem var(--pad);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.4rem);
  align-items:center}
.fp-head .fp-mark{font-weight:600;font-size:1.24rem;letter-spacing:-.03em;text-decoration:none}
.fp-find{display:flex;align-items:center;gap:.6rem;border:1px solid var(--rule);
  border-radius:2px;padding:.42rem .8rem;background:var(--ground);max-width:26rem;width:100%}
.fp-find input{border:0;background:none;outline:none;width:100%;font:inherit;color:var(--ink);
  font-size:var(--t-fine);letter-spacing:-.006em}
.fp-find input::placeholder{color:var(--ink-meta)}
.fp-find:focus-within{border-color:var(--ink)}
.fp-find svg{flex:none;width:15px;height:15px;stroke:var(--ink-meta);fill:none;stroke-width:2}
.fp-head nav{display:flex;gap:clamp(.9rem,2.2vw,1.6rem);align-items:baseline}
.fp-head nav a{font-size:var(--t-fine);color:var(--ink-meta);text-decoration:none;white-space:nowrap}
.fp-head nav a:hover,.fp-head nav a[aria-current]{color:var(--ink)}
.fp-head nav a[aria-current]{font-weight:600}
.fp-none{padding:2rem 0;color:var(--ink-meta)}
@media (max-width:720px){
  .fp-head-in{grid-template-columns:auto 1fr;gap:.8rem 1rem}
  .fp-head nav{grid-column:1/-1;order:3}
}

/* THE FILM HEAD — poster left, the verdict and the guide right. Everything that matters is on
   screen at once; nothing that matters is below the fold. */
.fp-film-head{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:start;padding-top:clamp(.6rem,1.6vh,1.2rem)}
.fp-film-head .fp-sheet{max-width:none;margin:0}
.fp-film-head .fp-credit{margin:1.9rem 0 0;text-align:left;max-width:none}
.fp-film-head .fp-spec{margin-top:0}
.fp-film-head h1{margin-bottom:.9rem}
@media (max-width:760px){.fp-film-head{grid-template-columns:1fr}
  .fp-film-head .fp-sheet{max-width:13rem}}
.fp-gh{font-size:1.24rem;font-weight:600;letter-spacing:-.02em;margin-top:clamp(1.6rem,3.6vh,2.2rem);
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.fp-gh span{font-size:var(--t-fine);font-weight:400;color:var(--ink-meta);letter-spacing:-.006em}

/* THE CREDITS — the last thing on a film. These people did the work; the page should say so
   with weight, not bury them in a footnote. Built to hold anyone who wrote something good,
   a critic at a paper or a stranger on a forum. */
.fp-thanks{margin-top:clamp(1.4rem,3.4vh,2.2rem);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem clamp(1.4rem,3vw,2.4rem)}
.fp-who{border-top:2px solid var(--ink);padding-top:.75rem}
.fp-who b{display:block;font-size:var(--t-body);font-weight:600;letter-spacing:-.015em}
.fp-who span{display:block;font-size:var(--t-fine);color:var(--ink-meta);margin-top:.15rem}
.fp-who a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:3px;
  font-size:var(--t-fine);display:inline-block;margin-top:.45rem}
.fp-who a:hover{text-decoration-color:var(--removed)}
.fp-who--cut{border-top-color:var(--removed)}

/* THE COMPARE TABLE — poster to anchor the row, the score big, and the split DRAWN, because a
   range is the one thing a column of text cannot show. Sortable, because that is what a
   compare view is for. */
.fp-cmp{width:100%;border-collapse:collapse;margin-top:clamp(1.2rem,3vh,1.8rem)}
.fp-cmp th{text-align:left;font-size:var(--t-fine);font-weight:600;color:var(--ink-meta);
  padding:.5rem .9rem .55rem 0;border-bottom:2px solid var(--ink);letter-spacing:-.006em;
  cursor:pointer;user-select:none;white-space:nowrap}
.fp-cmp th:hover{color:var(--ink)}
.fp-cmp th[aria-sort]{color:var(--ink)}
.fp-cmp th[aria-sort]::after{content:" \2191";font-size:.85em}
.fp-cmp th[aria-sort="descending"]::after{content:" \2193"}
.fp-cmp td{padding:.55rem .9rem .55rem 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.fp-cmp tr:hover td{background:rgba(var(--warmth),.07)}
.fp-cmp .pic{width:44px;padding-right:.9rem}
.fp-cmp .pic img{display:block;width:44px;height:66px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.fp-cmp .pic .none{display:grid;place-items:center;width:44px;height:66px}
.fp-cmp .pic .none svg{width:44px;height:44px}
.fp-cmp .sc{font-family:var(--voice-machine);font-weight:800;font-size:1.5rem;
  font-variant-numeric:proportional-nums lining-nums;letter-spacing:-.03em;width:1%}
.fp-cmp .ti{font-size:var(--t-body);font-weight:600;letter-spacing:-.015em}
.fp-cmp .ti span{display:block;font-size:var(--t-fine);font-weight:400;color:var(--ink-meta)}
.fp-cmp a{text-decoration:none;color:inherit}
.fp-cmp a:hover .ti{text-decoration:underline;text-underline-offset:3px}
.fp-bar{position:relative;display:block;height:9px;background:var(--rule);
  width:100%;min-width:9rem;max-width:19rem}
.fp-bar i{position:absolute;top:0;bottom:0;border-radius:1px;
  left:var(--l);width:var(--w);background:var(--h)}
.fp-bar u{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink);
  text-decoration:none;left:var(--s)}
.fp-bar-l{display:block;font-size:var(--t-fine);color:var(--ink-meta);margin-top:.25rem}
@media (max-width:760px){.fp-cmp .hide{display:none}.fp-bar{min-width:6rem}}

/* THE CONVERSATIONS — we credit the THREAD, never a person in it. A named stranger can be
   piled on for an opinion; a thread cannot. So the link goes to the whole conversation, the
   compliment is about what the conversation worked out, and no username ever appears. */
.fp-threads{margin-top:clamp(1.2rem,3vh,1.8rem);display:grid;gap:1.1rem;max-width:52rem}
.fp-thread{border-top:2px solid var(--ink);padding-top:.75rem}
.fp-thread b{display:block;font-size:var(--t-body);font-weight:600;letter-spacing:-.015em}
.fp-thread .net{display:inline-block;margin-top:.24rem;font-family:var(--voice-machine);
  font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-meta)}
.fp-thread p{font-size:var(--t-fine);color:var(--ink-quiet);line-height:1.5;margin-top:.3rem;
  max-width:56ch}
.fp-thread a{font-size:var(--t-fine);color:var(--ink);text-decoration-color:var(--rule);
  text-underline-offset:3px;display:inline-block;margin-top:.45rem}
.fp-thread a:hover{text-decoration-color:var(--removed)}

/* THE BYLINE — a reading is signed. A score nobody stands behind is the thing we exist against. */
/* A sentence, not a row. Flex made every text node a flex item, so the gap opened up in front
   of the comma after the name: "Marlow , First Reader". */
.fp-by{margin-top:.65rem;font-size:var(--t-fine);color:var(--ink-meta);line-height:1.5}
.fp-by b{color:var(--ink);font-weight:600}
.fp-by a{color:var(--ink-meta);text-decoration-color:var(--rule);text-underline-offset:3px}

/* THE NOTES — what FP has worked out, and what each thing leans on. Legible first: a note is a
   paragraph you can read, and its connections are named links, not a graph you have to decode. */
.fp-notes{margin-top:clamp(1.4rem,3.4vh,2.2rem);display:grid;gap:clamp(1.8rem,4vh,2.8rem)}
.fp-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);
  gap:.4rem clamp(1.4rem,3vw,2.6rem);border-top:2px solid var(--ink);padding-top:.85rem}
.fp-note h3{font-size:clamp(1.18rem,2vw,1.42rem);font-weight:600;letter-spacing:-.022em;line-height:1.25}
.fp-note p{grid-column:1;font-size:var(--t-body);color:var(--ink-quiet);line-height:1.55;
  letter-spacing:-.011em;max-width:60ch;margin-top:.35rem}
.fp-note .side{grid-column:2;grid-row:1/4;font-size:var(--t-fine);color:var(--ink-meta);
  line-height:1.5;border-left:1px solid var(--rule);padding-left:clamp(.9rem,2vw,1.4rem)}
.fp-note .side b{display:block;color:var(--ink-quiet);font-weight:600;margin-top:.7rem}
.fp-note .side b:first-child{margin-top:0}
.fp-note .side a{display:inline-block;color:var(--ink);text-decoration-color:var(--rule);
  text-underline-offset:3px;margin-right:.5rem}
.fp-note .side a:hover{text-decoration-color:var(--removed)}
.fp-note .who{grid-column:1;font-size:var(--t-fine);color:var(--ink-meta);margin-top:.5rem}
@media (max-width:760px){
  .fp-note{grid-template-columns:1fr}
  .fp-note .side{grid-column:1;grid-row:auto;border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:.7rem;margin-top:.7rem}
}

/* THE LOG — what moved, and when. */
.fp-log{margin-top:clamp(1.6rem,3.6vh,2.4rem);display:grid;gap:.9rem;max-width:52rem}
.fp-log div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.9rem;
  border-top:1px solid var(--rule);padding-top:.7rem;align-items:baseline}
.fp-log time{font-size:var(--t-fine);color:var(--ink-meta);font-variant-numeric:tabular-nums}
.fp-log p{font-size:var(--t-body);letter-spacing:-.011em;line-height:1.5}

/* THE DESK — a copy desk's stylebook. A ruling carries a number that is issued once and never
   reused, so it can be cited from anywhere; the number sits in its own column, the way a
   stylebook entry does, and the rest of the entry hangs off it. Superseded rulings stay on the
   page and step back in weight rather than disappearing.
   Named fp-ruling, not fp-find: fp-find is the header search box, and holding both names at once
   is what broke this page. */
.fp-book{list-style:none;margin-top:clamp(1.6rem,4vh,2.6rem);display:grid;
  gap:clamp(1.5rem,3.4vh,2.2rem);max-width:54rem;counter-reset:none}
.fp-ruling{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:0 clamp(1rem,2.4vw,1.6rem);
  border-top:2px solid var(--removed);padding-top:.85rem}
.fp-ruling--keep{border-top-color:var(--agree-none)}
.fp-ruling--old{border-top-color:var(--rule);opacity:.66}
.fp-ruling .no{font-family:var(--voice-machine);font-weight:800;font-size:var(--t-fine);
  color:var(--removed);letter-spacing:.02em;font-variant-numeric:tabular-nums;padding-top:.22rem}
.fp-ruling--keep .no{color:var(--agree-none)}
.fp-ruling--old .no{color:var(--ink-meta)}
.fp-ruling .hd{grid-column:2;display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
.fp-ruling h3{flex:1 1 auto;min-width:0;font-size:clamp(1.2rem,2.2vw,1.5rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.16}
.fp-ruling .call{font-size:var(--t-fine);font-weight:600;color:var(--removed);letter-spacing:.01em}
.fp-ruling--keep .call{color:var(--agree-none)}
.fp-ruling--old .call{color:var(--ink-meta)}
.fp-ruling .ba{grid-column:2;display:grid;grid-template-columns:1fr 1fr;
  gap:.8rem clamp(1.2rem,3vw,2.2rem);margin-top:.85rem}
.fp-ruling .ba span{font-size:var(--t-fine);line-height:1.5;color:var(--ink-quiet);
  border-left:2px solid var(--rule);padding-left:.8rem}
.fp-ruling .ba b{display:block;font-size:var(--t-fine);color:var(--ink-meta);font-weight:600;
  letter-spacing:.02em;margin-bottom:.2rem}
.fp-ruling .was{color:var(--ink-gone)}
.fp-ruling .now{border-left-color:var(--ink)}
.fp-ruling > p{grid-column:2;font-size:var(--t-body);color:var(--ink-quiet);line-height:1.55;
  letter-spacing:-.011em;margin-top:.85rem;max-width:58ch}
.fp-ruling .meta{grid-column:2;font-size:var(--t-fine);color:var(--ink-meta);margin-top:.5rem}
.fp-ruling .meta a{color:var(--ink-quiet)}
.fp-ruling:target{background:var(--lift);box-shadow:0 0 0 .7rem var(--lift)}
@media (max-width:640px){
  .fp-ruling{grid-template-columns:1fr}
  .fp-ruling .hd,.fp-ruling .ba,.fp-ruling > p,.fp-ruling .meta{grid-column:1}
  .fp-ruling .ba{grid-template-columns:1fr}
  .fp-ruling .no{padding-bottom:.3rem}
}

/* THE LIST — the rulings collapsed into the entries the build actually refuses. Set in columns
   because it is looked up, not read through. */
.fp-lex{margin-top:1.1rem;columns:clamp(13rem,20vw,17rem);column-gap:clamp(1.4rem,3vw,2.4rem);
  max-width:66rem}
.fp-lex .e{break-inside:avoid;border-top:1px solid var(--rule);padding:.42rem 0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:.05rem}
.fp-lex dt{font-size:var(--t-fine);color:var(--ink-gone);text-decoration:line-through;
  text-decoration-thickness:1px}
.fp-lex dd{font-size:var(--t-fine);color:var(--ink);line-height:1.4}
.fp-lex .c{font-family:var(--voice-machine);font-size:.78em;font-weight:700;color:var(--ink-meta);
  letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.fp-lex .c:hover{color:var(--ink)}
.fp-lex--keep dt{color:var(--ink);text-decoration:none;font-weight:600}
.fp-ph--sub{margin-top:clamp(2.4rem,6vh,4rem)}
.fp-ph--sub h2{font-size:clamp(1.35rem,2.7vw,1.85rem);font-weight:500;letter-spacing:-.028em}

/* CHANGES — every edit to a page, with the diff openable. */
.fp-changes{margin-top:clamp(1.4rem,3.4vh,2.2rem);display:grid;gap:.7rem;max-width:56rem}
.fp-change{border-top:1px solid var(--rule);padding-top:.65rem}
.fp-change summary{cursor:pointer;display:grid;grid-template-columns:6.5rem minmax(0,1fr);
  gap:.9rem;align-items:baseline;font-size:var(--t-body);letter-spacing:-.011em}
.fp-change summary::-webkit-details-marker{display:none}
.fp-change summary time{font-size:var(--t-fine);color:var(--ink-meta);font-variant-numeric:tabular-nums}
.fp-change summary b{font-weight:600}
.fp-change summary span{color:var(--ink-meta);font-size:var(--t-fine);display:block}
.fp-diff{margin:.7rem 0 .3rem;font-family:var(--voice-studio);font-size:var(--t-fine);
  line-height:1.55;border-left:2px solid var(--rule);padding-left:.9rem}
.fp-diff del{display:block;text-decoration:none;color:var(--removed);padding:.1rem 0}
.fp-diff del::before{content:"\2212  ";opacity:.6}
.fp-diff ins{display:block;text-decoration:none;color:var(--agree-none);padding:.1rem 0}
.fp-diff ins::before{content:"+  ";opacity:.6}

/* THE WORKSHOP — Marlow's pages, always one click away, never in the visitor's path. */
.fp-shop{border-top:1px solid var(--rule);margin-top:clamp(2.4rem,6vh,3.6rem);
  padding-top:clamp(1.2rem,3vh,1.8rem)}
.fp-shop h2{font-size:var(--t-fine);font-weight:600;color:var(--ink-meta);letter-spacing:-.006em}
.fp-shop ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:.9rem clamp(1.2rem,3vw,2.2rem);margin-top:.9rem}
.fp-shop a{text-decoration:none;display:block}
.fp-shop b{display:block;font-size:var(--t-body);font-weight:600;letter-spacing:-.015em}
.fp-shop a:hover b{text-decoration:underline;text-underline-offset:3px}
.fp-shop span{display:block;font-size:var(--t-fine);color:var(--ink-meta);margin-top:.1rem}
.fp-shop a[aria-current] b{color:var(--removed)}

/* THE PAGE HEAD — same shape everywhere: where you are, what is here, how much of it.
   Eagle eye reads the count; microscope reads the line. */
.fp-ph{display:flex;align-items:baseline;gap:.9rem clamp(1rem,2.4vw,1.8rem);flex-wrap:wrap;
  padding-bottom:clamp(.6rem,1.6vh,1rem)}
.fp-ph h1{font-size:clamp(1.65rem,3.6vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.fp-ph .n{font-family:var(--voice-machine);font-weight:800;font-size:clamp(1.1rem,2vw,1.35rem);
  font-variant-numeric:proportional-nums lining-nums;color:var(--ink-meta);letter-spacing:-.02em}
.fp-ph p{flex:1 1 22rem;font-size:var(--t-fine);color:var(--ink-meta);line-height:1.45;max-width:52ch}

/* THE VAULT — a note reads as prose with its connections inside the sentence, the way a vault
   actually works, and its linked mentions underneath. Five-star: air and one column, not a
   dashboard of panels. */
.fp-vault{margin-top:clamp(1.6rem,4vh,2.6rem);display:grid;gap:clamp(2.2rem,5vh,3.4rem);
  max-width:44rem}
.fp-n{scroll-margin-top:5rem}
.fp-n h3{font-size:clamp(1.3rem,2.4vw,1.62rem);font-weight:600;letter-spacing:-.025em;
  line-height:1.22}
.fp-n .stamp{font-size:var(--t-fine);color:var(--ink-meta);margin-top:.25rem}
.fp-n p{font-size:1.13rem;line-height:1.62;letter-spacing:-.011em;color:var(--ink-quiet);
  margin-top:.7rem}
.fp-n a.wl{color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(180,85,31,.45);padding-bottom:1px}
.fp-n a.wl:hover{border-bottom-color:var(--removed);background:rgba(var(--warmth),.09)}
.fp-n .ment{margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--rule);
  font-size:var(--t-fine);color:var(--ink-meta);line-height:1.6}
.fp-n .ment b{color:var(--ink-quiet);font-weight:600}
.fp-n .ment a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:3px;
  margin-right:.55rem}

/* GOALS — the bar is the whole road, the fill is how far along. A goal that has not started
   shows an empty road rather than a nothing, which is the honest picture. */
.fp-goals{margin-top:clamp(1.6rem,4vh,2.6rem);display:grid;gap:0;max-width:52rem}
.fp-goal{display:grid;grid-template-columns:2.2rem minmax(0,1fr) 7rem;gap:.3rem 1.2rem;
  border-top:1px solid var(--rule);padding:1.15rem 0;align-items:baseline}
.fp-goal:first-child{border-top:2px solid var(--ink)}
.fp-goal .no{font-family:var(--voice-machine);font-weight:800;font-size:var(--t-fine);
  color:var(--ink-meta);font-variant-numeric:tabular-nums}
.fp-goal .fp-goal-t{font-size:clamp(1.16rem,2.1vw,1.4rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.24}
.fp-goal .when{text-align:right;font-size:var(--t-fine);color:var(--ink-meta);white-space:nowrap}
.fp-goal p{grid-column:2/-1;font-size:var(--t-fine);color:var(--ink-meta);line-height:1.5;
  max-width:52ch;margin-top:.1rem}
.fp-goal .fp-meter{grid-column:2/-1;max-width:none;height:5px;margin-top:.85rem}
.fp-goal--lead .fp-goal-t{font-size:clamp(1.34rem,2.6vw,1.72rem)}
@media (max-width:640px){.fp-goal{grid-template-columns:2rem 1fr}.fp-goal .when{grid-column:2;text-align:left}}

/* ABOUT — one page that answers the whole site. Every heading is a question a reader types, and
   the rail beside it is the list of those questions, so the page can be entered anywhere rather
   than read from the top. On a narrow screen the rail becomes a scrollable row above the text. */
.fp-abs{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);margin-top:clamp(1.4rem,3.4vh,2.2rem);align-items:start}
.fp-rail{position:sticky;top:clamp(4.6rem,9vh,5.6rem);display:grid;gap:.1rem;
  border-left:1px solid var(--rule);padding-left:1rem}
.fp-rail a{font-size:var(--t-fine);color:var(--ink-meta);text-decoration:none;padding:.2rem 0;
  line-height:1.32}
.fp-rail a:hover,.fp-rail a:focus-visible{color:var(--ink)}
.fp-abbody{display:grid;gap:clamp(1.9rem,4.4vh,2.9rem);max-width:58rem}
.fp-ab{scroll-margin-top:6rem}
.fp-ab h2{font-size:clamp(1.3rem,2.5vw,1.72rem);font-weight:600;letter-spacing:-.026em;
  line-height:1.2;max-width:26ch}
.fp-ab p{font-size:var(--t-body);color:var(--ink-quiet);line-height:1.62;letter-spacing:-.011em;
  max-width:64ch;margin-top:.7rem}
.fp-ab p:first-of-type{margin-top:.85rem}
@media (max-width:820px){
  .fp-abs{grid-template-columns:1fr}
  .fp-rail{position:static;border-left:0;padding-left:0;border-top:1px solid var(--rule);
    padding-top:.7rem;grid-auto-flow:column;grid-auto-columns:max-content;gap:0 1.1rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* REFERENCES — a register, not a bibliography for show. The number sits in its own column and
   is the same width on every row, so a gap in the sequence would be visible; that is the only
   reason a sequence is worth keeping. A reference to a review we did not use is struck, because
   it was still read and still has a number. */
.fp-refs{list-style:none;margin-top:clamp(1.1rem,2.6vh,1.7rem);display:grid;gap:0;max-width:62rem}
.fp-ref{display:grid;grid-template-columns:6.4rem minmax(0,1fr) auto;gap:.2rem .9rem;
  align-items:baseline;border-top:1px solid var(--rule);padding:.52rem 0}
.fp-ref .no{font-family:var(--voice-machine);font-weight:800;font-size:var(--t-fine);
  color:var(--ink-meta);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.fp-ref .w{font-size:var(--t-fine);color:var(--ink-quiet);line-height:1.45}
.fp-ref .w i{font-style:italic}
.fp-ref a{font-size:var(--t-fine);color:var(--ink-meta);white-space:nowrap}
.fp-ref a:hover{color:var(--ink)}
.fp-ref--cut .no{color:var(--removed)}
.fp-ref--cut .w{color:var(--ink-gone)}
.fp-ref:target{background:var(--lift);box-shadow:0 0 0 .5rem var(--lift)}
.fp-cite{font-family:var(--voice-machine);font-weight:700;font-size:.86em;color:var(--ink-meta);
  letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.fp-cite:hover{color:var(--ink)}
@media (max-width:640px){
  .fp-ref{grid-template-columns:1fr auto}
  .fp-ref .no{grid-column:1}
  .fp-ref .w{grid-column:1/-1}
}

/* WHO WE LEAN ON — the register's own shape. A score site that reads one publication twelve
   times looks identical to one that reads twelve publications, until this is drawn. */
.fp-lean{margin-top:clamp(1.2rem,3vh,1.9rem);display:grid;gap:.34rem;max-width:44rem}
.fp-lean .e{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) 2.4rem;
  gap:.9rem;align-items:center}
.fp-lean b{font-size:var(--t-fine);font-weight:500;color:var(--ink-quiet);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-lean .n{font-family:var(--voice-machine);font-weight:800;font-size:var(--t-fine);
  color:var(--ink-meta);text-align:right;font-variant-numeric:tabular-nums}
.fp-lean .fp-meter{height:6px;max-width:none}
@media (max-width:620px){.fp-lean .e{grid-template-columns:minmax(0,9rem) minmax(0,1fr) 2.2rem}}

/* THE CRITICS — a roll of the writers this site is built out of, and it exists to send readers
   to them. Two densities on one page: a critic we have read more than once gets room for a line
   about them; a critic we have read once gets their own sentence and a narrower cell, because
   the page should not pretend to know more about them than it does. */
.fp-crits{margin-top:clamp(1.2rem,3vh,1.9rem);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));
  gap:clamp(1.5rem,3.2vw,2.4rem)}
.fp-crits--once{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));
  gap:clamp(1.2rem,2.6vw,1.8rem)}
.fp-crit{border-top:2px solid var(--ink);padding-top:.7rem;display:flex;flex-direction:column}
.fp-crit--once{border-top-width:1px;border-top-color:var(--rule)}
.fp-crit .who{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;
  flex-wrap:wrap}
.fp-crit h3{font-size:clamp(1.16rem,2vw,1.38rem);font-weight:600;letter-spacing:-.024em;
  line-height:1.18}
.fp-crit--once h3{font-size:var(--t-body);font-weight:600}
.fp-crit .out{font-size:var(--t-fine);color:var(--ink-meta)}
.fp-crit .out a{color:var(--ink-meta);text-decoration-color:var(--rule);text-underline-offset:3px}
.fp-crit .out a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.fp-crit .art{margin-top:.5rem}
.fp-reach{display:block;width:100%;max-width:15rem;height:auto;overflow:visible}
.fp-crit .say{font-size:var(--t-fine);color:var(--ink-quiet);line-height:1.55;
  letter-spacing:-.008em;margin-top:.55rem;max-width:52ch}
.fp-crit .own{margin-top:.5rem;border-left:2px solid var(--rule);padding-left:.75rem;
  font-size:var(--t-fine);color:var(--ink-quiet);line-height:1.5}
.fp-crit .own cite{display:block;font-style:normal;color:var(--ink-meta);margin-top:.3rem}
.fp-crit .own cite a{color:var(--ink-meta);text-decoration-color:var(--rule);
  text-underline-offset:3px}
.fp-crit .own cite a:hover{color:var(--ink)}
.fp-crit .films{margin-top:auto;padding-top:.7rem;display:grid;gap:0}
.fp-crit .films a{display:grid;grid-template-columns:minmax(0,1fr) 2.4rem;gap:.7rem;
  align-items:baseline;border-top:1px solid var(--rule);padding:.34rem 0;text-decoration:none;
  color:var(--ink-quiet)}
.fp-crit .films a:hover{color:var(--ink)}
.fp-crit .films span{font-size:var(--t-fine);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fp-crit .films b{font-family:var(--voice-machine);font-weight:800;font-size:var(--t-fine);
  color:var(--ink-meta);text-align:right;font-variant-numeric:tabular-nums}
.fp-crit .films a:hover b{color:var(--ink)}
.fp-crit:target{background:var(--lift);box-shadow:0 0 0 .7rem var(--lift)}

/* ═══ LIVERY · PRINT ═══ the boundary test, per KIT_JITSU trap 12.
   Roles only. Zero component selectors. If this file ever names a component,
   the role tier failed and the kit has a ceiling. */
@media print{
  :root{
    --ground:#ffffff; --ink:#000000; --ink-quiet:#222222; --ink-meta:#444444;
    --ink-gone:#666666; --rule:#bbbbbb; --removed:#000000; --warmth:255,255,255;
    --t-score:5.5rem; --t-hero:2rem; --t-head:1.6rem; --t-lead:1.2rem;
    --t-quote:1.05rem; --t-body:.95rem; --t-fine:.85rem;
    --pad:0; --band:1.4rem; --item:.9rem;
  }
}

/* The same roles, selectable, so the bench can render both liveries at once.
   Still roles only — a livery that names a component class fails kit/lint.py. */
[data-livery="print"]{
  --ground:#ffffff; --ink:#000000; --ink-quiet:#222222; --ink-meta:#444444;
  --ink-gone:#666666; --rule:#bbbbbb; --removed:#000000; --warmth:255,255,255;
  --t-score:5.5rem; --t-hero:2rem; --t-head:1.6rem; --t-lead:1.2rem;
  --t-quote:1.05rem; --t-body:.95rem; --t-fine:.85rem; --band:1.4rem; --item:.9rem;
}

/* ═══ ROOM · INSTRUMENT ═══ the second register (RANGE_JITSU trap 1).
   Roles only, zero component selectors — same boundary the print livery proves.
   Deliberately WARM-dark rather than neutral black: a white paper page and a warm dark
   room give the product a real temperature range to push against (RANGE trap 2, anaemia).
   Every ratio below is measured against THIS room's ground by kit/contrast.py. They were all
   wrong until 2026-08-20, because the tool held its own copy of the ground and the ground
   moved without it. */
[data-room="instrument"]{
  --ground:var(--ref-ground-dark);   /* the roast's own hue, with the light taken out */
  --ink:#f2efe9;             /* 16.6:1 on ground */
  --ink-quiet:#c3bcb1;       /* 10.1:1 */
  --ink-meta:#948c82;        /*  5.7:1 — meta only, never body */
  --ink-gone:#6d665e;        /*  3.4:1 — a thrown-out review, and the strike carries the meaning */
  --rule:#332d27;            /*  1.4:1 — a hairline, never text */
  --removed:var(--ref-garnet-lit);      /*  7.4:1 — lifted so it survives the dark ground */
  --agree-none:var(--ref-teal-lit);     /*  8.5:1 */
  --agree-some:var(--ref-ochre-lit);    /*  8.5:1 */
  --agree-wide:var(--ref-verm-lit);     /*  7.3:1 */
  --agree-open:var(--ref-violet-lit);   /*  7.3:1 */
  --warmth:var(--ref-roast-lit);        /* the light in this room is warmer and stronger */
  background:var(--ground);
  color:var(--ink);
}