/* frame.css — the v2 FRAME: what every page is made of, so no page styles itself.
Sits on site.css (color tokens, the type roles .t-*, the html.sl-type element layer). Three layers, in order:
1. layout tokens (this file's :root) — the numbers a redesign changes
2. the frame regions and the control vocabulary — what pages compose from
3. nothing else. A page carries NO CSS of its own; a new need becomes a variant here, named, and shows up on
/v2/patterns.html before it ships. (v2.css's per-page blocks retire onto this file.)
Spec: /v2/patterns.html. Rules: v2/README.md → "The frame". */
/* ── 1 · layout tokens ─────────────────────────────────────────────────────────────────────────────────────────── */
:root{
--rail:270px; /* the left column: title, then facets / the film page's rail */
--gutter:28px; /* column gap and the gap between stacked regions (2026-09-13: 18 → 28 — the pages read cramped; Adrian: "give the elements more breathing room, even if it means losing a column") */
--pad-x:32px;--pad-y:24px;--pad-b:72px; /* the page's edges; the nav bar shares --pad-x so the two left edges stay one */
--measure:86ch; /* running sans text (deks, notes, descriptions) — 64ch read as unnecessarily narrow on every page (Adrian 2026-09-13); full width would be too wide */
--measure-read:80ch; /* long serif reading (dossiers, essays) */
/* the spacing scale (2026-09-17, Adrian: "a change to a rule applies across pages"): every margin, padding and gap in the
v2 sheets is a step on it (hairlines under 4px stay literal); page grids share one gap */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:44px;
--gap-grid:24px;
/* the colors the sheets had by hand, named: ink on the amber button, the map's dots, the amber washes and halos, the shadows */
--ink-on-amber:#1a1407; --ink-on-amber-a25:rgba(26,20,7,.25);
--white:#fff; --white-a72:rgba(255,255,255,.72);
--btn-hover:rgba(202,161,90,.22);
--amber-a35:rgba(232,176,75,.35); --amber-a55:rgba(232,176,75,.55);
--amber-halo:rgba(224,176,75,.35); --amber-halo-soft:rgba(224,176,75,.12); --amber-outline:rgba(224,176,75,.45);
--map-dot:#7fa6c9; --map-dot-a:rgba(127,166,201,.42);
--shadow-pop:0 14px 36px rgba(0,0,0,.45); --shadow-float:0 10px 30px rgba(0,0,0,.4);
--white-a06:rgba(255,255,255,.06); --white-a10:rgba(255,255,255,.1); --white-a22:rgba(255,255,255,.22);
--scrim:rgba(10,10,12,.78); --scrim-soft:rgba(8,8,10,.12); --scrim-hard:rgba(8,8,10,.94); /* the dark washes over a poster (year badge, hover caption) */
--danger:rgba(160,40,40,.9);
--amber-pale:#d8cfa8; --amber-soft-a12:rgba(202,161,90,.12); --amber-soft-a32:rgba(202,161,90,.32);
--ctl-h:34px; /* pills, tabs, selects */
--btn-h:38px; /* buttons */
--field-h:38px;--field-h-lg:44px; /* --field-h-lg = the site search field, one height on every page (2026-09-11: it read as moving between pages) */
--radius:8px;--radius-lg:10px;--radius-pill:999px;
--amber-wash:rgba(232,176,75,.09);
--line-strong:color-mix(in srgb,var(--dim) 45%,transparent);
--spin-sm:14px;--spin:18px;--spin-lg:28px; /* spinners are sized in pixels, never em: a small-font context cannot shrink them */
--spin-stroke:2px;--spin-stroke-lg:3px;
--head-line:56px; /* the frame's first row: the kicker and one line of the title; the search field's row — fixed, so the field never moves */
--rel-lineage:#6ea8dc;--rel-sideways:#b48ee0;--rel-thread:#7cbf8c; /* the relation rings on a seeded wall (amber = what you started from) */
--vs-a:#e8b04b;--vs-b:#6aa9e0; /* X vs Y: the first film amber, the second blue — the live Facets page's pair (2026-09-13) */
}
/* the nav bar shares the page's side padding on a frame page (this file loads only there): one left edge from the nav
down through the title, the rail and the wall */
nav.g7nav{padding-left:var(--pad-x);padding-right:var(--pad-x)} /* element+class: site.css's .g7nav is appended after this file by the shared head */
/* ── 2a · the frame: two columns on every page, the same two x-positions everywhere ──────────────────────────────
head (title · count · dek) sits over the rail; tools (the search module) over the main column; side + main below;
foot under main. A page with no rail leaves column 1 empty below the head — the margins do not move. */
.pg{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:var(--head-line) auto auto auto auto 1fr auto;column-gap:var(--gutter);align-items:start;padding:var(--pad-y) var(--pad-x) var(--pad-b)}
/* row 1 is a fixed line — the kicker and a one-line title in the head, the search field beside them, its bottom on the
title's bottom — so the field sits in the same place on every page. The head itself is one tight block (kicker ·
title · count · dek) spanning down the rail column; a title that wraps or a long dek grows the block, never the
field's row. The search module's parts are placed by the frame (display:contents): the field in row 1, the intake
row in row 2, a status line in row 3; the main column starts at row 4, the rail after the head (2026-09-11). */
.pg-head{grid-column:1;grid-row:1 / span 5;display:flex;flex-direction:column;gap:var(--s-1);min-width:0;padding-top:var(--s-1)}
.pg-head > .t-kicker{margin:0 0 var(--s-1)}
.pg-head h1{margin:0}
.pg-head .pg-count{margin:0}
.pg-head .pg-dek{margin:var(--s-2) 0 0;max-width:var(--measure)}
.pg-tools,.pg-tools > .tools{display:contents}
.pg-tools .field-row{grid-column:2;grid-row:1;align-self:end;min-width:0}
.pg-tools .tools-row{grid-column:2;grid-row:2;margin:var(--s-3) 0 0}
.pg-tools .tools-status,.pg-tools .tools-hint{grid-column:2;grid-row:3;margin:var(--s-2) 0 0;max-width:var(--measure)}
.pg-tools .tools-status:empty{display:none}
.pg-side{grid-column:1;grid-row:6;min-width:0;margin-top:var(--gutter)}
.pg-side--sticky{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding-right:var(--s-1);scrollbar-width:thin} /* facets beside a long wall; never for a rail taller than the viewport */
.pg-side[hidden]{display:none}
.pg-foot--links{position:static;border-top:1px solid var(--line);margin-top:var(--s-5);padding:var(--s-4) 0 0;background:none} /* the sandbox's small footer of links */
.pg-main{grid-column:2;grid-row:4 / span 3;min-width:0;margin-top:var(--gutter)}
.pg-foot{grid-column:2;grid-row:7}
/* the crawlable render (a template's server-rendered body) is what a reader without JS gets; with JS it is not painted before the page script redraws it — no flash of the plain render */
html.js .fm-ssr{visibility:hidden;max-width:100%;overflow:hidden} /* the crawlable render must not set a phone’s layout viewport before the script redraws (2026-09-17: the reading page opened zoomed out) */
/* a reading page: text keeps to the reading measure wherever it sits; strips, tabs, walls and columns run wide */
.pg--read .pg-main :is(p,blockquote,ul,ol,.essay-body,.fm-dossier,.fm-doc){max-width:var(--measure-read)}
.pg--read .pg-main :is(h1,h2,h3,h4){max-width:760px;text-wrap:balance} /* headings in px: a ch measure scales with the heading's own size */
.pg--read .pg-main :is(.strip,.tabs,.wall,.cols,.pills,.island) :is(h1,h2,h3,h4,p,ul,ol){max-width:none}
.pg--wall .pg-main{max-width:none} /* a poster wall takes the room */
.pg--notools .pg-main{grid-row:1 / span 6;margin-top:var(--s-1)} /* a page with no search module: main starts level with the title */
.pg--notools .pg-foot{grid-row:7}
.pg-head .pg-dek + .pg-dek{margin-top:var(--s-2)} /* a second dek paragraph (Your Films: what the page does, then what it reads against) */
@media (max-width:900px){
:root{--pad-x:16px;--pad-y:16px;--gutter:18px} /* a phone keeps the tighter measures */
.pg{grid-template-columns:1fr;grid-template-rows:none}
.pg-head,.pg-tools .field-row,.pg-tools .tools-row,.pg-tools .tools-status,.pg-tools .tools-hint,.pg-side,.pg-main,.pg-foot{grid-column:1}
.pg-head{grid-row:1}
.pg-tools .field-row{grid-row:2;margin-top:var(--s-3)}.pg-tools .tools-row{grid-row:3}.pg-tools .tools-status,.pg-tools .tools-hint{grid-row:4}
.pg-main{grid-row:5}.pg-side{grid-row:6}.pg-foot{grid-row:7} /* a phone reads the content before the rail (A3) */
.pg--notools .pg-main{grid-row:5}
}
/* ── 2b · tools: the search module in its two states ───────────────────────────────────────────────────────────── */
.tools{display:flex;flex-direction:column;gap:var(--s-2)}
.tools .field{height:var(--field-h-lg);font-size:var(--fs-14)} /* the search field is the same height in both states — hero and bar differ only by the intake row */
.tools .field-row .btn{min-height:var(--field-h-lg);padding:0 var(--s-5)}
.tools--bar .tools-row{display:none} /* elsewhere: one line, no intake row */
.tools-hint{margin:0;max-width:var(--measure)}
/* ── 2c · strips: one row of controls; at most two above the content ───────────────────────────────────────────── */
.strip{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:0 0 var(--s-4);min-width:0}
.strip-end{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.strip .t-note{margin:0}
/* ── 2d · the control vocabulary: button · pill · tab · select · field. Nothing else is clickable. ───────────────
button = does something (acts, saves, opens elsewhere) — filled or bordered, radius 8, 38px
pill = narrows or toggles a view, shows a count — outline, fully round, 34px, amber when on
tab = switches between views of the same thing — text with an underline, 34px
select = a pill that opens a list — the pill look with a chevron
field = typing — 38px; the hero field 46px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--btn-h);box-sizing:border-box;padding:var(--s-2) var(--s-3);border-radius:var(--radius);font:var(--fw-semibold) var(--fs-14)/1 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;color:var(--amber-pale);background:var(--amber-soft-a12);border:1px solid var(--amber-soft-a32);transition:background .14s,color .14s}
.btn:hover{background:var(--btn-hover);color:var(--white)}
.btn--primary{color:var(--ink-on-amber);background:var(--amber);border-color:transparent;font-weight:var(--fw-bold)}
.btn--primary:hover{filter:brightness(1.06);color:var(--ink-on-amber);background:var(--amber)}
.btn--quiet{background:none;border-color:var(--line);color:var(--ink)}
.btn[hidden],.ibtn[hidden]{display:none} /* the hidden attribute beats the button's own display — no inline style="display:none" needed (2026-09-17) */
/* the two answers to a claim of the reading (spec 42, 2026-09-17): a check and a cross, the same tool shape; the chosen one holds amber */
.ibtn.is-on{border-color:var(--amber);color:var(--amber)}
/* Tool — an icon button for a utility (share · print · export · save as image · copy a post): 32px, the line icon, the
label as a tooltip on hover and read by screen readers; the page's one or two real actions stay text buttons
(Adrian, 2026-09-16: "the button rows are crazy big… many sites would just use icons with rollover") */
.tool-row{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:var(--s-1)}
.ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;box-sizing:border-box;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:none;color:var(--dim);cursor:pointer;text-decoration:none;transition:border-color .14s,color .14s}
.ibtn:hover,.ibtn:focus-visible{border-color:var(--amber-soft);color:var(--ink)}
.ibtn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ibtn::before{content:"";display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ibtn::after{content:attr(data-label);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:var(--s-1) var(--s-2);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font:var(--fw-regular) var(--fs-12)/1.2 var(--sans);white-space:nowrap;display:none;pointer-events:none;z-index:5} /* absent until shown: a hidden tooltip still widened the page past the edge on a phone (2026-09-17) */
.ibtn:hover::after,.ibtn:focus-visible::after,.ibtn.is-done::after{display:block;animation:sl-tip .12s ease-out}
@keyframes sl-tip{from{opacity:0}to{opacity:1}}
.ibtn--share{--ico:url("data:image/svg+xml;utf8,")}
.ibtn--print{--ico:url("data:image/svg+xml;utf8,")}
.ibtn--export{--ico:url("data:image/svg+xml;utf8,")}
.ibtn--image{--ico:url("data:image/svg+xml;utf8,")}
.ibtn--post{--ico:url("data:image/svg+xml;utf8,")}
.ibtn--add{--ico:url("data:image/svg+xml;utf8,")}
.ibtn--add.is-on{--ico:url("data:image/svg+xml;utf8,");border-color:var(--amber-soft);color:var(--amber-soft)} /* the film page's add-to-list as a tool: + becomes a check once it's in the list */
/* no hover on a phone, so no tooltip: the label sits under the icon as a small caption instead (Adrian, 2026-09-17: "with an icon in place of a button, that will be less obvious") */
@media (hover:none){.ibtn::after{display:none}.tool-row{gap:var(--s-2);align-items:flex-start}.ibtn{width:auto;min-width:32px;height:auto;flex-direction:column;gap:3px;padding:var(--s-1) var(--s-1) var(--s-1)}.ibtn > span{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap;font:var(--fw-regular) var(--fs-10)/1.1 var(--sans);color:var(--dim)}}
.btn--quiet:hover{border-color:var(--amber-soft);background:none;color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}
.btn.is-on{border-color:var(--amber);color:var(--amber)}
/* ── 2d′ · busy: the state of anything that takes time ───────────────────────────────────────────────────────────
A busy control stays where it is, keeps its size, shows the ring, and its label names what is being made
("Reading your taste…"). A long generation (a course, a reading: ~15 s) gets a working island: the large ring,
a kicker naming the thing, a note with the expected time that JS updates. Never a bare spinner without words.
Reduced motion: the ring stands still with its arc; the words carry the state. */
@keyframes sl-spin{to{transform:rotate(360deg)}}
.spin{display:inline-block;width:var(--spin);height:var(--spin);flex:0 0 auto;box-sizing:border-box;border-radius:50%;border:var(--spin-stroke) solid var(--line-strong);border-top-color:var(--amber);animation:sl-spin .8s linear infinite;vertical-align:-3px}
.spin--sm{width:var(--spin-sm);height:var(--spin-sm);vertical-align:-2px}
.spin--lg{width:var(--spin-lg);height:var(--spin-lg);border-width:var(--spin-stroke-lg)}
.btn.is-busy{pointer-events:none;cursor:progress;color:var(--ink);gap:var(--s-2)}
.btn.is-busy::before{content:"";display:inline-block;width:var(--spin-sm);height:var(--spin-sm);box-sizing:border-box;border-radius:50%;border:var(--spin-stroke) solid var(--white-a22);border-top-color:currentColor;animation:sl-spin .8s linear infinite}
.btn--primary.is-busy{color:var(--ink-on-amber)}
.btn--primary.is-busy::before{border-color:var(--ink-on-amber-a25);border-top-color:var(--ink-on-amber)}
.pill.is-busy{pointer-events:none;color:var(--ink)}
.pill.is-busy::before{content:"";display:inline-block;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--amber);animation:sl-spin .8s linear infinite}
.busy-line{display:inline-flex;align-items:center;gap:var(--s-2)} /* a note with a small ring: "Refining…" */
.island--working{align-items:center;gap:var(--s-3);border-color:var(--amber-a35);background:var(--amber-wash)}
.island--working .spin{flex:0 0 auto}
.island--working .working-text{display:flex;flex-direction:column;gap:3px;flex:1 1 240px;min-width:0}
.island--working .working-text p{margin:0}
.island--working .t-kicker{color:var(--amber)}
.island--working.is-done{border-color:var(--line);background:var(--card)}
.island--working.is-done .spin{animation:none;border-color:var(--amber);border-top-color:var(--amber)}
@media (prefers-reduced-motion: reduce){.spin,.btn.is-busy::before,.pill.is-busy::before{animation:none}}
.pill{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--ctl-h);box-sizing:border-box;padding:0 var(--s-3);border-radius:var(--radius-pill);background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;text-decoration:none;font:var(--fw-regular) var(--fs-13)/1 var(--sans);white-space:nowrap}
.pill i{font-style:normal;color:var(--dim);opacity:.75}
.pill:hover{border-color:var(--amber-soft);color:var(--ink)}
.pill.is-on{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)}
.pill.is-on i{color:var(--amber)}
.pill--sm{min-height:28px;padding:0 var(--s-2);font-size:var(--fs-12)} /* the sidebar's dense facet lists */
.tab{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--ctl-h);box-sizing:border-box;padding:0 2px;margin-right:var(--s-3);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--dim);cursor:pointer;font:var(--fw-medium) var(--fs-14)/1 var(--sans);white-space:nowrap}
.tab i{font-style:normal;color:var(--dim)}
.tab:hover{color:var(--ink)}
.tab.is-set{color:var(--amber-soft)} /* a dimension with a filter on: colour only — a state never changes a tab's width */
.tab.is-empty,.tab.is-empty:hover{color:var(--dim);opacity:.45;cursor:default} /* a dimension the current narrowing has emptied stays in its place, dimmed */
.tab.is-on{color:var(--ink);border-bottom-color:var(--amber)}
.tabs{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line);margin:0 0 var(--s-4)}
/* a page's lenses (the film page's Cinephile · Lineage · Kindred & Sideways · …): the one tab row that has to say "there are
several pages here" — bigger type, brighter resting colour, a firmer baseline, and air above it so it is not read as part of
the island or strip before it (Adrian, 2026-09-18: "the navigation for the pages in the film page do get lost"). Filter tabs
(Narrow by) keep the quiet .tab treatment. */
.tabs--lenses{gap:var(--s-2) var(--s-5);margin:var(--s-7) 0 var(--s-5);border-bottom-color:var(--line-strong)}
.tabs--lenses .t-kicker{margin-right:var(--s-2);align-self:center}
.tabs--lenses .tab{min-height:var(--btn-h);margin-right:0;padding:0 2px var(--s-1);color:var(--ink-body);font:var(--fw-medium) var(--fs-16)/1 var(--sans)}
.tabs--lenses .tab.is-on{color:var(--ink)}
.select{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;min-height:var(--ctl-h);box-sizing:border-box;padding:0 var(--s-5) 0 var(--s-3);border-radius:var(--radius-pill);background:var(--bg) url("data:image/svg+xml;utf8,") no-repeat right 11px center;border:1px solid var(--line);color:var(--ink);cursor:pointer;font:var(--fw-regular) var(--fs-13)/1 var(--sans)}
.select:hover{border-color:var(--amber-soft)}
.field{display:block;width:100%;height:var(--field-h);box-sizing:border-box;padding:0 var(--s-3);border-radius:var(--radius);background:var(--bg2);color:var(--ink);border:1px solid var(--line-strong);outline:none;font:var(--fw-regular) var(--fs-14)/1 var(--sans)}
.field::placeholder{color:var(--dim);opacity:1}
.field:focus{border-color:var(--amber-soft);box-shadow:0 0 0 3px var(--amber-wash)}
.field-row{display:flex;gap:var(--s-2);align-items:stretch;min-width:0}
.field-row .field{flex:1 1 auto;min-width:0}
.field-row .btn{flex:0 0 auto;min-height:var(--field-h)}
.field-row .field-clear{flex:0 0 auto;width:30px;min-height:var(--field-h);margin:0 -2px 0 -4px;padding:0;border:0;background:none;color:var(--dim);font:var(--fw-regular) var(--fs-24)/1 var(--sans);cursor:pointer} /* the × that clears the field */
.field-row .field-clear:hover{color:var(--ink)}
.field-row--lg .field{height:var(--field-h-lg);font-size:var(--fs-14)}
.field-row--lg .btn{min-height:var(--field-h-lg);padding:0 var(--s-5)}
/* ── 2e · the island: the only bordered box — an interactive thing that is not the page's main content ──────── */
/* the search field's dropdown (nav.js slTypeahead injects the live site's colors after this sheet; `html #` outranks it) in the v2 tokens:
a card with the frame's line and radius, the title in the card face, year and director in the note voice, the amber wash on the row under the pointer (Adrian, 2026-09-16) */
html #sl-ta{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);margin-top:2px}
html #sl-ta .sl-ta-i{padding:var(--s-2) var(--s-3);color:var(--ink);font:var(--fw-regular) var(--fs-14)/var(--lh-snug) var(--sans);border-bottom:1px solid var(--line)}
html #sl-ta .sl-ta-i:last-child{border-bottom:0}
html #sl-ta .sl-ta-i:hover,html #sl-ta .sl-ta-i.on{background:var(--amber-wash)}
html #sl-ta .sl-ta-t{font:var(--fw-medium) var(--fs-14)/var(--lh-snug) var(--sans);color:var(--ink)} /* one face for the whole list, titles and names alike (Adrian, 2026-09-17: "we are using two typefaces in the typeahead") */
html #sl-ta .sl-ta-y{color:var(--dim);font:var(--fw-regular) var(--fs-13)/var(--lh-snug) var(--sans)}
html #sl-ta .sl-ta-d{color:var(--dim);font:var(--fw-regular) var(--fs-12)/var(--lh-body) var(--sans);margin-top:2px}
html #sl-ta .sl-ta-act{color:var(--amber-soft);background:transparent;font:var(--fw-medium) var(--fs-13)/var(--lh-body) var(--sans)}
html #sl-ta .sl-ta-person .sl-ta-d{color:var(--amber-soft)} /* a director's row (2026-09-17): the second line names what it opens */
/* Back to top (components/totop.js, 2026-09-16): a quiet pill at the bottom center — the Feedback button holds the left corner, the list pill the right.
Off the page until it is wanted (opacity + no pointer events), rising 8px as it comes in; still for reduced motion; above the list pill on phones, where the pill can span the bottom. */
.totop{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);z-index:990;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--btn-h);box-sizing:border-box;padding:0 var(--s-4) 0 var(--s-3);border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--line-strong);color:var(--ink);font:var(--fw-medium) var(--fs-13)/1 var(--sans);cursor:pointer;opacity:0;pointer-events:none;box-shadow:var(--shadow-float);transition:opacity .18s,transform .18s,border-color .12s}
.totop.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.totop:hover,.totop:focus-visible{border-color:var(--amber-soft);outline:none}
.totop svg{width:14px;height:14px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
@media (max-width:640px){.totop{bottom:calc(66px + env(safe-area-inset-bottom,0px))}}
.island{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card)}
.island ~ .island{margin-top:var(--s-5)} /* two islands stacked (Ask's refine field over the control center, a hidden strip between them) keep air between them (2026-09-13) */
.island > .t-body,.island > .t-note{flex:1 1 320px;margin:0}
.island .field{flex:1 1 320px;width:auto;max-width:640px}
.island .field-row{flex:1 1 320px;max-width:640px} /* a field with its button inside an island (the Ask refine) takes the field's width — was an inline style on two templates (2026-09-17) */
.island--feel{display:block;padding:var(--s-2) var(--s-4) var(--s-2);margin:0 0 var(--s-5);--ctl-h:30px} /* a wall's control center: tight — the films must stay in view while you slide */
/* the control center keeps its height as the page gains room (2026-09-13): its pills and tabs are 30px, its type one
step smaller — a panel of eleven sliders and three rows of pills must not grow with the spacing around it */
.island--feel .tab{font-size:var(--fs-13)}
.island--feel .pill{font-size:var(--fs-12)}
.island--feel .t-note,.island--feel .orgdesc{font-size:var(--fs-12)}
.island--feel .slider span{font-size:var(--fs-11)}
.island--feel .group-h{padding:0;cursor:default;width:auto}
.island--feel .panel-h{margin:0 0 2px}
.island--feel .panel-h > .pill{margin-left:auto} /* the block's Reset, right-aligned; the Lean pills inside .vs-lean stay by the kicker */
.island--feel .vs-lean{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:var(--s-4)}
.island--feel .vs-lean .t-meta{margin-right:2px}
.vs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--s-1);vertical-align:0}
.vs-dot.a{background:var(--vs-a)}
.vs-dot.b{background:var(--vs-b)}
.island--feel .panel-row{align-items:center;gap:var(--s-1)}
.island--feel .panel-row .t-kicker{margin-right:var(--s-1)}
.island--feel .ring-row{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.island--feel .tabs .t-kicker{margin:0 var(--s-3) 0 0;align-self:center}
.island--feel .tabs .tab{margin-right:var(--s-2)} /* a little tighter than a page's tabs: thirteen dimensions on one line at a wide window */
.island--feel .tabs .taste-pill{margin-right:var(--s-3);align-self:center} /* "In my taste": a toggle FIRST in the row (2026-09-14), not a dimensiontab */
.island--feel .tabs .panel-reset{margin-left:auto;align-self:center}
.island--feel .tabs .panel-reset.is-idle{visibility:hidden} /* keeps its slot when no filter is on, so the row never moves (2026-09-16) */
.island--feel > div + div{border-top:1px solid var(--line);margin-top:var(--s-1);padding-top:var(--s-1)} /* the blocks of the control center share one island */
.island--feel .orgdesc{margin:3px 0 0}
.island--feel .feel-toggle{margin:0}
.island--feel .feel-toggle .pill{margin-left:0} /* the toggle stands alone at the left (its description line went, 2026-09-13) */
.island--feel.is-collapsed > :not(.feel-toggle){display:none} /* Browse lands on posters: the panel is one line until "Tune the wall" */
.island--feel .tabs{margin:0 0 var(--s-1)}
.island--door{margin:0 0 var(--s-3);border-color:var(--amber-a35);background:var(--amber-wash)} /* the AI-arrival door: one strip naming what the visitor was sent for and what else the page holds */
.strip .field{flex:1 1 320px;width:auto;max-width:640px} /* a field in a strip (an index's own search) keeps the field width */
/* ── 2e′ · the door: a landing page's panel — one promise and the action that keeps it. The one bordered box besides
the island; a page of doors (Your Films) is the visitor's invitation, not a reading page. ─────────────────────── */
.doors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-grid)} /* six tracks: a door takes three (half), the taste door four with the threads door beside it on two (2026-09-13) */
.door{grid-column:span 3}
/* the one page grid (2026-09-17): six tracks, and any child can take a third, a half or the full row — Your Films' doors, the
reading's tiles and cards, a course row all divide the same width; on narrower windows a third becomes a half, then everything stacks */
.doors > .third{grid-column:span 2}
.doors > .half{grid-column:span 3}
.doors > .full{grid-column:1 / -1}
@media (max-width:1240px){.doors > .third{grid-column:span 3}}
@media (max-width:640px){.doors > .third,.doors > .half{grid-column:1 / -1}}
.door.door--wide{grid-column:span 4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;column-gap:var(--s-5);row-gap:var(--s-2)} /* the taste door: text and actions left, the chooser's picture right (element+variant: .door's flex rule comes later in this file) */
.door--wide > .t-kicker,.door--wide > h3,.door--wide > .t-body,.door--wide > #dpickstate,.door--wide > .strip{grid-column:1}
.door--wide > .t-body{align-self:start}
.door--wide > .strip{align-self:end;margin:0}
.door--wide > .door-shot{grid-column:2;grid-row:1 / span 5;align-self:start;margin:0;aspect-ratio:auto}
.door--wide > .door-shot img{height:auto}
.door--narrow{grid-column:span 2}
/* the full door (2026-09-14): a fifth door on six tracks would leave one alone, so the course door takes a whole row —
text, tabs and actions on the left, its flight of posters on the right; on a phone it stacks like every door */
.door.door--full{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto;column-gap:var(--s-6);row-gap:var(--s-2)}
.door--full > .t-kicker,.door--full > h3,.door--full > .tabs,.door--full > .t-body,.door--full > .door-how,.door--full > .strip{grid-column:1}
.door--full > .t-body{align-self:start}
.door--full > .strip{align-self:end;margin:0}
.door--full > .door-posters{grid-column:2;grid-row:1 / span 6;align-self:start;margin:0}
.door--full > .door-posters.is-many{grid-template-columns:repeat(6,1fr)}
@media (max-width:640px){.door.door--full{display:flex}}
@media (max-width:1240px){.door,.door--narrow{grid-column:span 3}.door.door--wide{grid-column:1 / -1}}
@media (max-width:640px){.door,.door--narrow,.door.door--wide,.door.door--full{grid-column:1 / -1}.door.door--wide{display:flex}.door--wide > .door-shot{aspect-ratio:16/10}.door--wide > .door-shot img{height:100%}} /* two classes: the door's own .door.door--wide{grid-column:span 4} outranked the one-class phone rule and left the taste door at four of six tracks on a phone (2026-09-14, Adrian's screenshot) */
.door-shot{display:block;width:100%;aspect-ratio:16/10;margin:var(--s-1) 0 2px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg2);cursor:pointer;transition:border-color .14s} /* a picture of the thing itself (the chooser), where a door has no posters: the top of the card, cropped by the frame */
.door-shot:hover{border-color:var(--amber-soft)}
.door-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.door{display:flex;flex-direction:column;gap:var(--s-2);min-width:0;padding:var(--s-5) var(--s-5) var(--s-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);transition:border-color .14s}
.door:hover{border-color:var(--amber-soft)}
.door h3{margin:0}
.door > p{margin:0;max-width:none}
.door .strip{margin:auto 0 0;padding-top:var(--s-2)}
.door-posters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-1);margin:var(--s-1) 0 2px}
.door-posters img,.door-posters span{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;display:block;background:var(--bg2)}
.door-posters:empty{display:none}
/* the course door's two kinds (2026-09-13, Adrian: "there is room in the panel for a Quick course / Full course choice"):
a tab row without the page-tabs rule — the door's own border frames it; a full course shows its twelve on six tracks;
a live flight's posters are tappable (a tap swaps the film for the next closest on the bench) */
.door .tabs{margin:2px 0 0;border-bottom:0}
.door .tab{margin-right:var(--s-4)}
.door-posters.is-many{grid-template-columns:repeat(6,1fr)}
.door-posters.is-live img{cursor:pointer;transition:opacity .12s,outline-color .12s;outline:2px solid transparent;outline-offset:-2px}
.door-posters.is-live img:hover{opacity:.72;outline-color:var(--amber-soft)}
.door .door-how{margin:0}
/* the tools strip (2026-09-14): a set of films' actions sit ABOVE the films on every page, in one order — Save list ·
Share · Print / PDF · Export to Letterboxd · Save as image — never in a foot row (it collided with the My stuff pill).
Share carries a link glyph everywhere. */
.strip--tools{margin:0 0 var(--s-3)}
.sec-h.doors-h{margin:var(--s-7) 0 var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)} /* element+variant: outranks .sec-h's margin, which follows in this file. 2026-09-18, Adrian: "too cramped" — air above the rule (44) and between the rule and the heading (24) */ /* Your Films: the heading between the films brought and the doors that act on them — a rule marks the turn from "these films" to "a choice" (2026-09-15) */
.island--pages{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)} /* Your Films: the pages this device has made (2026-09-14) */
.island.island--pages > *,.island.island--pages > .t-note,.island.island--pages > .t-body{flex:0 0 auto} /* a column island: the island's "text fills 320px" basis (.island > .t-note, two classes) would become 320px of HEIGHT on the last link (it did: a 411px panel, Adrian's screenshot) — match its specificity */
.island--pages .pills{margin:0;padding:0;list-style:none}
.island--pages .pills li{list-style:none}
.island.island--pages > .pages-head{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);align-items:center;align-self:stretch} /* kicker · count · Show/Hide at the right (2026-09-15) */
.pages-head .pill{margin-left:auto}
.pages-line{margin:0} /* one line across the panel (Adrian's copy, 2026-09-15: "we can save room here") */
.island.island--pages > .pages-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2);align-self:stretch}
.pages-row{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);align-items:baseline;min-width:0}
.pages-kind{flex:0 0 auto;min-width:84px}
.pages-name{min-width:0} /* an ink link (.lk-ink): the name is the link, the kind kicker is the amber */
.pages-meta{white-space:nowrap}
.pages-views{display:inline-flex;flex-wrap:wrap;gap:var(--s-1)}
/* the taste toggle on a wall (2026-09-14, Adrian: "a very small toggle for a huge feature… it should be more obvious"):
a button with the reading's dial glyph, amber when on; with no reading on this device, the same spot offers it */
.btn--taste{border-color:var(--amber-a55);color:var(--amber-soft);gap:var(--s-2)}
.btn--taste::before{content:"";display:inline-block;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.btn--taste:hover{border-color:var(--amber);color:var(--amber)}
.btn--taste.is-on{background:var(--amber);border-color:var(--amber);color:var(--ink-on-amber)}
.btn--taste i{font-style:normal;opacity:.75}
.island--feel .tabs .btn--taste{margin-right:var(--s-4);min-height:var(--ctl-h);padding:0 var(--s-3);font-size:var(--fs-13)}
.strip--tools .field-row{flex:0 1 360px;min-width:220px}
.btn--share::before{content:"";display:inline-block;width:13px;height:13px;margin-right:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
/* ── 2f · text blocks, sections, lists, the wall ──────────────────────────────────────────────────────────────── */
.measure{max-width:var(--measure)}
.measure-read{max-width:var(--measure-read)}
.lede{margin:0 0 var(--s-3);max-width:var(--measure)} /* a page's one explanatory sentence: t-note, never a panel */
.kv{display:inline-flex;gap:var(--s-1);align-items:baseline} /* KICKER value */
.sec{margin:0 0 var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line)}
.sec:first-child{border-top:0;padding-top:0}
.sec-h{margin:0 0 var(--s-4);display:flex;flex-direction:column;gap:var(--s-1)}
.sec-h h2,.sec-h h3{margin:0}
.sec-h p{margin:0;max-width:var(--measure)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.list li{display:flex;justify-content:space-between;gap:var(--s-2);align-items:baseline;min-width:0}
.list li a{color:var(--ink);text-decoration:none}
.list li a:hover{color:var(--amber)}
.list li i{font-style:normal;white-space:nowrap}
.list--stack li{flex-direction:column;gap:2px;align-items:flex-start}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-5) var(--s-6)}
.cols h3{margin:0 0 var(--s-1)}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s-3) var(--s-3)} /* one column fewer than Explore's density, room between posters (2026-09-13) */
.wall--rail{grid-template-columns:repeat(3,1fr)} /* a poster row in the rail */
.group{padding:var(--s-3) 0 var(--s-2);border-top:1px solid var(--line)} /* a sidebar group */
.group:first-child{border-top:0;padding-top:0}
.group-h{display:block;width:100%;text-align:left;background:none;border:0;padding:var(--s-1) 0 var(--s-1);cursor:pointer;color:var(--amber-soft)}
.group.is-closed .group-h::after{content:" ▸";color:var(--dim)}
.pills{display:flex;flex-wrap:wrap;gap:var(--s-1);padding-bottom:var(--s-1)}
.group .pill{max-width:100%;white-space:normal;text-align:left;line-height:1.25;padding-top:var(--s-1);padding-bottom:var(--s-1)} /* a long label wraps inside the rail instead of running past it */
/* ── 2g · the foot: the constant action row of a collection or a result ─────────────────────────────────────── */
.pg-foot{position:sticky;bottom:0;z-index:5;display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-top:var(--gutter);padding:var(--s-2) 0 var(--s-3);border-top:1px solid var(--line);background:var(--bg)}
.pg-foot .field-row{flex:0 1 380px}
.pg-foot .t-note{margin:0 0 0 auto}
/* ── links inside text: one color ─────────────────────────────────────────────────────────────────────────────── */
.pg a:not(.btn):not(.pill):not(.tab):not(.gcard-poster):not(.rv-lf):not(.lk-ink){color:var(--amber-soft);text-decoration:none}
.pg a:not(.btn):not(.pill):not(.tab):not(.gcard-poster):not(.rv-lf):not(.lk-ink):hover{color:var(--amber)}
.pg a.lk-ink{color:var(--ink);text-decoration:none} /* an ink link: a title that is itself the link (an index entry, a card) */
.pg a.lk-ink:hover{color:var(--amber)}