/* Chroma Noir — the reels wall --------------------------------------------------------------------------- The third wall. Films are 16:9 posters, photographs are a contact sheet, reels are 9:16 — and the ratio is the only thing that genuinely differs. Everything else is deliberately the films wall's vocabulary, down to the class names, so the two stylesheets can be read side by side: .tile__a, .tile__still, .tile__img, .tile__edge, .tile__wait, .tile__dark, .tile__t, .tile__m, .tile__no, .len, .gate, .lede, .none, .cbtn, .sr. THREE THINGS THIS FILE DOES THAT films.css DOES NOT: 1. THE TRACK SIZE IS A FACT ABOUT THE LIBRARY. .wall--1 … .wall--4 give a 280px track and exactly as many columns as there are reels; five or more fall back to auto-fill at 168px. Three tiles sitting in the first three of eight phantom auto-fill tracks reads as a bug, and with four reels on the wall it would be the first thing anybody saw. 2. THREE ACROSS ON A PHONE, not two. A 9:16 object two across a 390px phone is 306px tall, and a wall of those is a list. 3. THE VIEWER IS TWO COLUMNS WHEREVER THERE IS ROOM, phone-landscape included. A vertical object leaves the band free, so the chrome goes beside the picture rather than over it. NO NEW GOLD. The tile keeps the films wall's gold hairline sweep — that is the tile vocabulary and not a new mark — and the focus rings stay gold because they are the house's and the television has nothing else. The viewer chrome, the share sheet and the follow row get none at all, and a copy confirmation is --ink. CHROME 79 (the wall TV, 1920x1070) IS THE FLOOR. No `inset` shorthand, no flex `gap` (grid gap is Chrome 66 and is fine), no :has(), no nesting, no dvh, every svh preceded by a plain fallback, no bare aspect-ratio, and :focus-visible NEVER in a selector list with a rule the television needs — a list is dropped whole when one selector in it cannot be parsed, so every focus rule is its own block with an .is-on or :focus twin beside it. */ :root{ --ink:#f4f3f1; --dim:#9a9894; --faint:#6a6764; --gold:#c9a14a; /* NEW, AND MEASURED. --faint is 3,75:1 on black and fails AA for body text. The lede and the empty state keep it to match the other two walls, which is a knowing, pre-existing failure of the house. Copy whose whole job is to be read — the honest sentence in the share sheet, the admin notice under the follow row — takes this instead: #7e7b77 is 4,99:1. */ --faint2:#7e7b77; --rule:rgba(244,243,241,.14); --rule2:rgba(244,243,241,.34); --sans:'Inter Tight',-apple-system,'Segoe UI',sans-serif; --serif:'Fraunces',Georgia,serif; --pad:clamp(16px,4vw,56px); --wide:1760px; --ease:cubic-bezier(.22,.61,.36,1); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; color-scheme:dark; } *{box-sizing:border-box} body{margin:0;background:#000;color:var(--ink);font-family:var(--sans); font-synthesis:none;-webkit-font-smoothing:antialiased} [hidden]{display:none !important} /* ---- the ground ----------------------------------------------------------- */ .scrim--flat{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none; background:linear-gradient(rgba(244,243,241,.035) 0%,rgba(0,0,0,0) 38%)} /* THE SAFE AREA, written as a pair every time: a plain value on the line before and the env() version after it. env() is Chrome 69 for this spelling and the television is 79, where an unsupported env() drops the WHOLE declaration — and a dropped padding is a layout touching the frame. */ .page{position:relative;z-index:2;max-width:var(--wide);margin:0 auto; padding:0 var(--pad) clamp(44px,9vh,96px); padding-left:calc(var(--pad) + env(safe-area-inset-left)); padding-right:calc(var(--pad) + env(safe-area-inset-right)); padding-bottom:calc(clamp(44px,9vh,96px) + env(safe-area-inset-bottom))} /* ---- chrome --------------------------------------------------------------- Margins on the children rather than flex gap, which is Chrome 84 and silently zero on the television. */ .bar{display:flex;flex-wrap:wrap;align-items:center;padding:17px 0; padding-top:calc(17px + env(safe-area-inset-top))} .bar > *{margin:5px 0} .bar > * + *{margin-left:18px} .link{display:inline-flex;align-items:center;border:0;padding:0;background:none; font:inherit;font-size:14px;font-weight:500;color:var(--dim);text-decoration:none; cursor:pointer;transition:color .25s} .link > span{margin-right:10px;transition:margin-right .25s} .link:hover{color:var(--ink)} .link:hover > span{margin-right:15px} .link:focus-visible{outline:2px solid var(--gold);outline-offset:4px} .bar__gap{flex:1 1 auto} .lede{margin:0 0 clamp(14px,2.4vh,30px);font-family:var(--serif);font-style:italic; font-weight:300;font-size:clamp(15px,1.6vw,19px);color:var(--faint); min-height:1.3em} .note{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--gold)} .none{margin:22px 0 0;font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(16px,1.8vw,20px);color:var(--faint)} /* ---- the wall -------------------------------------------------------------- FIVE OR MORE REELS: auto-fill at a 168px track. min(168px,100%) rather than a bare 168px — auto-fill cannot make a track narrower than its minimum, so on a window under about 200px the grid would be wider than the page and the whole document would scroll sideways. */ .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr)); gap:clamp(20px,2.6vw,34px) clamp(14px,1.8vw,24px)} /* FOUR OR FEWER: a bigger tile and EXACTLY as many columns as there are reels. auto-fill at 280px would still lay eight tracks across a 1760px measure and park three tiles in the first three of them, which reads as a grid that has lost something rather than as a wall with three reels on it. minmax(0,280px) and not a bare 280px: the tracks may shrink below their ideal on a narrow window, which is what stops four columns overflowing a 700px one. justify-content:start keeps them at the gutter instead of stretching one reel across the whole page. */ .wall--1{grid-template-columns:minmax(0,280px);justify-content:start} .wall--2{grid-template-columns:repeat(2,minmax(0,280px));justify-content:start} .wall--3{grid-template-columns:repeat(3,minmax(0,280px));justify-content:start} .wall--4{grid-template-columns:repeat(4,minmax(0,280px));justify-content:start} /* THREE ACROSS ON A PHONE, and the same reasoning one step further: a wall of one or two reels at a third of a 390px screen is three small stamps with a third of the row empty, so the count still decides. Explicit columns rather than a lower minmax, because deterministic beats whatever the tracks happen to add up to. */ @media (max-width:520px){ .wall{grid-template-columns:repeat(3,minmax(0,1fr))} .wall--1{grid-template-columns:minmax(0,1fr)} .wall--2{grid-template-columns:repeat(2,minmax(0,1fr))} .wall--3{grid-template-columns:repeat(3,minmax(0,1fr))} .wall--4{grid-template-columns:repeat(3,minmax(0,1fr))} } .tile__a{display:block;width:100%;text-align:left;text-decoration:none;color:inherit} /* .is-on IS NOT DECORATION, it is the television's focus ring. :focus-visible does not exist before Chrome 86 and the wall TV runs Chrome 79, where a selector containing it is thrown away whole — so a remote would walk an unmarked grid with nothing at all to say where it was. The class is set by the page in markOn(), and every rule below that answers focus answers it too. THE RING NEEDS A COMPANION OVER A PICTURE. Gold is 8,72:1 on black, but these rings sit over a FRAME, and gold on a blown-out one can fall under 3:1. The dark halo costs nothing on black and saves the ring on white. Two rules, never one list. */ .tile__a:focus-visible{outline:2px solid var(--gold);outline-offset:3px; box-shadow:0 0 0 4px rgba(0,0,0,.65)} .tile__a.is-on{outline:2px solid var(--gold);outline-offset:3px; box-shadow:0 0 0 4px rgba(0,0,0,.65)} /* THE RATIO IS A PADDING BOX FIRST. aspect-ratio arrived in Chrome 88 and the wall TV is Chrome 79, where the box would have no height at all and the whole grid would collapse into a column of captions. 177.78% is 16/9 the other way up. @supports hands the modern property to browsers that have it. */ .tile__still{display:block;position:relative;overflow:hidden; border:1px solid var(--rule);border-radius:2px;background:#050505; transition:border-color .3s} .tile__still::before{content:"";display:block;padding-top:177.78%} @supports (aspect-ratio:9/16){ .tile__still{aspect-ratio:9/16} .tile__still::before{display:none} } .tile__a:hover .tile__still{border-color:var(--rule2)} /* Longhand rather than `inset`, for the same Chrome 79 reason. */ .tile__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%; object-fit:cover;display:block; filter:grayscale(1) contrast(1.06) brightness(.78); transition:filter .45s ease,transform .45s var(--ease);transform:scale(1.005)} /* EVERY PAYOFF RULE IS WRITTEN TWICE, and it is not duplication for its own sake: a selector LIST is dropped whole when one selector in it cannot be parsed, so putting .is-on in the same list as the fallback it is meant to BE takes the fallback down with the thing it was covering for. */ .tile__a:hover .tile__img,.tile__a:focus-visible .tile__img{ filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)} .tile__a.is-on .tile__img{ filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)} /* The preview, over the still inside the same box. It fades in only once it is genuinely playing, so a slow connection shows the frame rather than black. */ .tile__vid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%; object-fit:cover;display:block;opacity:0;transition:opacity .45s ease} .tile__vid.on{opacity:1} /* THE ONE GOLD MARK ON A TILE, and it is the films wall's, unchanged. z-index because the preview is APPENDED AFTER these two, and among positioned siblings with no z-index the last one in the markup wins. */ .tile__edge{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2; background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .tile__a:hover .tile__edge,.tile__a:focus-visible .tile__edge{transform:scaleX(1)} .tile__a.is-on .tile__edge{transform:scaleX(1)} /* Fills while a preview loads, so resting on a tile says something is happening rather than nothing for half a second. Under the gold edge, deliberately: one is progress, the other is the answer. */ .tile__wait{position:absolute;left:0;bottom:0;height:1px;width:0;z-index:2; background:rgba(244,243,241,.5);transition:width .45s linear} .tile__a.loading .tile__wait{width:100%} /* A TILE WITH NO PICTURE. There is one honest reason for one here — the reel has no poster on file — and it says so rather than showing a broken image. MARGIN, NOT GAP: flex gap is Chrome 84 and silently zero on the television. */ .tile__dark{position:absolute;top:0;right:0;bottom:0;left:0;display:flex; flex-direction:column;align-items:center;justify-content:center; background:#070707} .tile__dark > * + *{margin-top:9px} /* text-indent cancels the trailing letter-space: tracking adds a gap AFTER the last character as well as between them, so a centred word sits half a letter-space to the left of where it looks like it should. */ .tile__none{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-indent:.22em; text-transform:uppercase;color:var(--dim)} .tile__t{display:block;font-family:var(--serif);font-weight:300;font-size:16.5px; line-height:1.18;letter-spacing:-.01em;color:var(--dim);margin-top:11px; overflow-wrap:break-word;transition:color .3s} .tile__a:hover .tile__t,.tile__a:focus-visible .tile__t{color:var(--ink)} .tile__a.is-on .tile__t{color:var(--ink)} /* AT THREE ACROSS ON A PHONE the measure is about 108px at 390. It has to sit AFTER the rule above: a media query adds no specificity, so the same selector later in the file wins wherever it is written. */ @media (max-width:520px){ .tile__t{font-size:14px;line-height:1.22;margin-top:8px} } .tile__m{display:flex;align-items:baseline;margin-top:7px} .tile__m > * + *{margin-left:9px} .tile__no{font-size:9.5px;letter-spacing:.2em;color:var(--dim); font-variant-numeric:tabular-nums;transition:color .35s} .tile__a:hover .tile__no,.tile__a:focus-visible .tile__no{color:var(--gold)} .tile__a.is-on .tile__no{color:var(--gold)} .tile__sp{flex:1 1 auto} /* --dim at rest rather than --faint: at twelve pixels this is the one label somebody may read before pressing anything, and --faint is about 3,7:1 on black — a size and a contrast agreeing with each other in the wrong direction. */ .len{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} /* ---- the gate ------------------------------------------------------------- The films wall's line, built from one integer. It does not advertise and it does not hide: someone who is meant to know already knows, and everyone else reads a sentence and moves on. NO PADLOCK — a padlock says "press me" and there is no form behind this one, only a permission on a portal account. */ .gate{margin:clamp(20px,3.5vh,44px) 0 0;padding-top:clamp(14px,2vh,22px); border-top:1px solid var(--rule)} .gate__say{margin:0;font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(14px,1.4vw,17px);color:var(--faint); text-shadow:0 1px 10px rgba(0,0,0,.95)} .gate__link{color:var(--dim);text-decoration:underline;text-underline-offset:.2em; text-decoration-thickness:1px;transition:color .25s} .gate__link:hover{color:var(--gold)} .gate__link:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ---- the follow row -------------------------------------------------------- Absent entirely when the owner has filled in no handle — the same precedent as the films page's featured hero, which is not there rather than empty when no film is flagged. NO GOLD: these are three links to somewhere else, not the page's own emphasis. */ .follow{margin:clamp(20px,3.5vh,44px) 0 0;padding-top:clamp(14px,2vh,22px); border-top:1px solid var(--rule)} .follow__k{margin:0 0 12px;font-size:9.5px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--dim)} .follow__row{display:flex;flex-wrap:wrap;align-items:center} .follow__row > *{margin:4px 0} .follow__row > * + *{margin-left:10px} /* The house ghost button: 2px radius, a hairline border, no fill. */ .fbtn{display:inline-flex;align-items:center;border:1px solid var(--rule); border-radius:2px;padding:8px 16px;background:none;color:var(--dim); font:inherit;font-size:12px;font-weight:500;letter-spacing:.06em; text-decoration:none;cursor:pointer; transition:color .22s,border-color .22s,background-color .22s} .fbtn:hover{color:var(--ink);border-color:var(--rule2);background:rgba(244,243,241,.05)} .fbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* THE ONE LINE ONLY THE ADMIN EVER SEES. --faint2 rather than --faint: it is a sentence whose whole job is to be read, by the one person who can act on it. */ .follow__admin{margin:0;font-size:12.5px;line-height:1.6;color:var(--faint2)} .follow__admin a{color:var(--dim);text-decoration:underline;text-underline-offset:.2em; text-decoration-thickness:1px;transition:color .25s} .follow__admin a:hover{color:var(--ink)} .follow__admin a:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ---- the viewer ------------------------------------------------------------ Longhand offsets, not the `inset` shorthand: that is Chrome 87 and the wall TV is Chrome 79, where a fixed element with no offsets at all sits at its static position and the player stops being an overlay. THE BASE IS THE STACKED LAYOUT — picture at the top, words under it — which is what a phone held upright needs and what every narrow window gets. The two-column composition is an enhancement added at 860px and, separately, in short landscape. Written this way round because the stacked case is the one that needs the simpler box: the film is capped in vh/svh, which are real lengths and need no containing block to resolve against. */ .reel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60; display:grid;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr); align-content:start;row-gap:clamp(10px,1.8vh,24px); overflow-y:auto; background:rgba(0,0,0,.94); padding:clamp(16px,3.2vh,44px) clamp(14px,3vw,40px); /* position:fixed over the whole viewport is exactly where the insets bite. Plain value first, env() after — see .page. */ padding:calc(clamp(16px,3.2vh,44px) + env(safe-area-inset-top)) calc(clamp(14px,3vw,40px) + env(safe-area-inset-right)) calc(clamp(16px,3.2vh,44px) + env(safe-area-inset-bottom)) calc(clamp(14px,3vw,40px) + env(safe-area-inset-left))} @supports ((-webkit-backdrop-filter:blur(18px)) or (backdrop-filter:blur(18px))){ .reel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} } .reel__stage{position:relative;min-width:0} /* THE PLAIN vh FIRST. Without it a browser with no svh drops the whole declaration and the reel gets no ceiling at all — a 9:16 object with no ceiling is taller than the window by construction. */ .reel__stage video{display:block;margin:0 auto;width:auto;height:auto; max-width:100%;max-height:62vh;max-height:62svh;background:#000; border-radius:2px} .reel__chrome{display:flex;flex-direction:column;min-width:0;min-height:0} .reel__chrome > * + *{margin-top:var(--s4)} .reel__id{display:flex;flex-wrap:wrap;align-items:baseline;min-width:0} .reel__id > *{margin:4px 0} .reel__id > * + *{margin-left:18px} /* --dim, not --faint: these are 11px and 12px, and --faint is 3,74:1 on black. */ .reel__no{font-size:11px;letter-spacing:.2em;color:var(--dim); font-variant-numeric:tabular-nums} .reel__t{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.3vw,28px); letter-spacing:-.01em;color:var(--ink);min-width:0;overflow-wrap:break-word} .reel__len{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} .reel__desc{margin:0;max-width:52ch;font-size:13px;line-height:1.6;color:var(--dim)} .reel__acts{display:flex;flex-wrap:wrap;align-items:center} .reel__acts > *{margin:4px 0} .reel__acts > * + *{margin-left:6px} /* NO GOLD IN THE VIEWER CHROME. The films player's .cbtn goes gold on hover; here the same box answers in --ink against a brighter hairline, because the gold on this page is spent on the tile's sweep and on the focus ring. The FOCUS ring stays gold: it is the house's, and the television has nothing else to show where it is. */ .cbtn{border:1px solid var(--rule);border-radius:999px;background:none;color:var(--dim); font:inherit;font-size:12px;font-weight:500;padding:7px 15px;cursor:pointer; transition:color .2s,border-color .2s,background-color .2s} .cbtn:hover:not(:disabled){color:var(--ink);border-color:var(--rule2)} .cbtn:disabled{opacity:.3;cursor:default} .cbtn[aria-expanded="true"]{color:var(--ink);border-color:var(--rule2); background:rgba(244,243,241,.06)} .cbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ---- how the wall is ordered ------------------------------------------------ THE FILMS WALL'S OWN CONTROL, copied rather than shared: these are two hand-written pages with no build step and no stylesheet between them, so the choice was a copy or a third file. Copied, and named the same, so the two walls stay recognisably one house — if one of them changes, change both. MARGIN, NOT GAP. Flex gap is Chrome 84 and the wall television is 79, where the row would close up into one unreadable string of words. */ .sortrow{margin:0 0 clamp(14px,2.2vh,26px)} .sortbox{display:inline-flex;flex-wrap:wrap;align-items:baseline} /* The vertical margin is for the wrapped case on a narrow phone, where two rows of buttons would otherwise touch. */ .sortbox > *{margin:3px 0} .sortbox > * + *{margin-left:9px} .rail__k{font-size:10.5px;font-weight:500;letter-spacing:.11em; text-transform:uppercase;color:var(--faint2)} .tbtn{border:0;padding:0;background:none;font:inherit;cursor:pointer; font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; color:var(--dim);transition:color .22s;white-space:nowrap} .tbtn:hover{color:var(--ink)} .tbtn[aria-pressed="true"]{color:var(--ink)} /* Two rules, never one list — the reason given over .tile__a:focus-visible. */ .tbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .tsep{color:var(--rule2);font-size:11px} /* A BIGGER TARGET, NOT A BIGGER BUTTON, and the type floor that goes with it. Both are the films wall's, to the pixel: 34px visual plus 5px top and bottom is 44px of target with no pixel of the design moved, and the row's own separation widens first so two neighbouring extenders cannot overlap. */ @media (pointer: coarse){ .sortbox > * + *{margin-left:14px} .tbtn{position:relative;min-height:34px;font-size:11px} .tbtn::after{content:"";position:absolute;top:-5px;right:0;bottom:-5px;left:0} .rail__k{font-size:10px} } /* ---- the admin's two ------------------------------------------------------- .cbtn is written for a