/*
 * The design foundation: Castle. Dark concrete surfaces so 91 thumbnails carry
 * the page, the series' own orange for identity, and metadata set like a
 * briefing document.
 *
 * Every later view is expected to reach for a token here rather than name a
 * colour or a size of its own.
 */

:root {
  /* ---- Surfaces --------------------------------------------------------
   * Concrete, lit from nowhere. Each step up is a surface closer to the
   * viewer: the page, a card at rest, a card under the pointer.
   */
  /* Two of them are declared as channels first, because scrims have to fade
     into the exact colour of the surface behind them and a hand-copied hex is
     a drift waiting to happen. */
  --surface-page-channels: 13 15 17;
  --surface-sunk-channels: 8 9 11;

  --surface-page: rgb(var(--surface-page-channels));
  --surface-raised: #171b1f;
  --surface-lifted: #1f242a;
  --surface-sunk: rgb(var(--surface-sunk-channels));
  --edge: #272d34;
  --edge-strong: #3b444e;

  /* ---- Ink -------------------------------------------------------------
   * Three weights, and nothing between them. Titles, supporting metadata,
   * and text that is present but not being read.
   */
  --ink: #eceff2;
  --ink-dim: #a4aeb8;
  --ink-faint: #737d88;

  /* ---- Colour roles ----------------------------------------------------
   * Orange is the series and what you do with it; cyan is the page answering
   * you. Two accents, each with a role stated below and nothing outside it.
   */

  /* Brand: identity, which view you are in, the play action — and a favourite.
   *
   * The first three are the show and the page's own navigation: the current
   * season tab takes the brand rather than the interaction colour because
   * marking a tab says where you are rather than what you could do, which is
   * also why hovering a tab brightens its ink instead of colouring it.
   *
   * A favourite is the fourth, and it was deliberately not orange before this:
   * the roles were held disjoint so that opinion would not become a second
   * meaning for the brand, and the heart wore the interaction cyan instead.
   * That is reversed on purpose. A favourite in a library about one series is a
   * judgement about *this show*, and the heart is the mark the whole library is
   * filtered by — it belongs in the show's own colour. Nothing is lost by the
   * overlap, because a heart is a drawn mark and the other three are a tab, a
   * button and a plate: none of them is ever mistaken for another. The thumbs
   * down stays a muted neutral, so only one of the pair is coloured.
   *
   * `--brand` is sampled from the wordmark plate in Chuck/banner.jpg — the
   * modal colour of those pixels, not an eyeballed approximation. It carries
   * the plate and the current season tab.
   * `--brand-text` is that hue lifted until it reads as text on concrete
   * (6.5:1), which is also the tone an icon needs to survive on a dark
   * surface — the sampled colour goes muddy at the size a heart is drawn — so
   * it carries the heart and the Favourites chip's own.
   * `--brand-deep` is it pushed the other way until a white label sits on it
   * safely (5.8:1), which is what the play button rests on — brightening to the
   * sampled colour under the pointer. */
  --brand: #da4203;
  --brand-text: #f2703a;
  --brand-deep: #b83802;
  --on-brand: #ffffff;

  /* Interaction: hover affordances, focus, links, and the
   * page answering you — a search highlight is the library saying "this is the
   * part you asked about", which is the same voice as the play status.
   * Declared as channels first because the highlight is a wash of it rather than
   * the colour itself, and a hand-copied hex is a drift waiting to happen. */
  --interaction-channels: 45 212 232;
  --interaction: rgb(var(--interaction-channels));

  /* Progress: nothing wears this. It spoke for the watched tick, the season tabs'
   * hairline and the watch count; the first two left the library and the count
   * moved to the faint ink the runtime used, beside the code it replaced. Left
   * defined rather than deleted, so that the one green this page has ever used is
   * still written down. */
  --progress: #43cd7d;

  /* ---- Type ------------------------------------------------------------
   * System fonts only — nothing is bundled, downloaded or built.
   */
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Display: titles. Heavy and tightly tracked, the way a title card is set. */
  --display-weight: 800;
  --display-tracking: -0.025em;
  --text-title: 1.375rem;
  --text-card-title: 0.9375rem;

  /* Dossier: metadata labels. Wide-tracked uppercase mono, small, like a
   * field name stamped on a briefing document. */
  --dossier-tracking: 0.18em;
  /* Numerals only. A rating tracked out to 0.18em stops reading as a number. */
  --dossier-tracking-numeric: 0.08em;
  --text-dossier: 0.6875rem;
  --text-dossier-small: 0.625rem;

  /* Body: synopses. Comfortable rather than dense. */
  --text-body: 1rem;
  --text-body-small: 0.8125rem;
  --leading-body: 1.6;
  --leading-tight: 1.25;

  /* ---- Space, shape, depth --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 8px;
  /* Controls — the play button, the drawer's steps, a chip — carry a tighter
     corner than a surface does. */
  --radius-tight: 5px;

  --page-gutter: clamp(1rem, 3vw, 2.5rem);

  /* Every thumbnail beside the media is 400×225, and both the card and the
     drawer hold their frame to that shape whether the image has arrived or not. */
  --thumb-aspect: 16 / 9;
  /* And 400 wide is the whole of what there is. No derivative is generated —
     that would mean a build step and something written beside the media — so
     this is the point past which an image on this page would only be enlarging
     itself. A statement of fact about the media and nothing else: what it does
     for the page is stand as the ceiling the drawn width below may not pass. */
  --thumb-native-width: 400px;
  /* And how wide the Up next card's picture is actually drawn, which is a choice
     and not a consequence: deliberately under the fact above, because the offer
     needs to be the easiest thing in the hero to hit and not the whole of what is
     up there. The one number the card's size comes from — the picture holds 16/9,
     so a narrower picture is a shorter card. */
  --up-next-thumb-width: 300px;

  /* The order things stack in, in one place: the page, a season heading pinned
     over the cards it belongs to, the bar the hero rolls up into over that
     (it is the header, so nothing the page scrolls may pass in front of it),
     the scrim over that, the drawer over that, and the library's own voice over
     all of it — a failure has to be readable from wherever the press was. The
     player is a modal dialog, drawn in the top layer above every one of these. */
  --layer-sticky: 1;
  --layer-chrome: 2;
  --layer-scrim: 3;
  --layer-drawer: 4;
  --layer-status: 5;

  /* The narrowest an episode card may be before the grid drops a column. About
     five columns at a 1600px window. */
  --card-min-width: 260px;

  /* ---- The hero --------------------------------------------------------
   * How much of the window the library opens on before the grid starts.
   * Better than half, so arriving is the series rather than a toolbar, and
   * well short of all of it, so the first row of cards is already showing and
   * one gesture of the wheel is enough to be in the library.
   *
   * The bar it rolls up into measures itself: its height depends on how the
   * six season tabs and the search field happen to wrap, so the page is told
   * what it came to rather than a number here being kept in step by hand. It
   * is what a season heading pins underneath, and it is `0px` rather than `0`
   * so that a `top` reading it before the first measurement is still a length.
   */
  --hero-height: 55vh;
  --chrome-height: 0px;

  --shadow-lift: 0 14px 30px -12px rgb(0 0 0 / 0.75);
  /* Under the sticky bar, once there is page rather than hero beneath it.
     Shallower than the lift: the bar has not risen towards anything, it is
     simply the thing the library scrolls under. */
  --shadow-chrome: 0 14px 26px -20px rgb(0 0 0 / 0.9);

  /* ---- The detail drawer -----------------------------------------------
   * How wide the dossier is, and what the page does with the rest of the
   * width. Above 1100px the body's own right padding is widened by exactly
   * this, so the grid reflows to fewer columns instead of losing cards
   * behind the drawer; below it there is not room for both and the drawer
   * becomes an overlay over a dimmed page.
   *
   * That 1100px is written literally in styles.css: a media query cannot
   * read a custom property, so it cannot be a token however much it wants
   * to be one. It is the only breakpoint in the page.
   */
  --drawer-width: min(32rem, 34vw);
  --shadow-drawer: -18px 0 46px -18px rgb(0 0 0 / 0.85);
  /* The page's own colour, deep enough to put the grid behind the drawer. */
  --scrim: rgb(var(--surface-sunk-channels) / 0.72);

  /* ---- Motion ----------------------------------------------------------
   * Named for what moves. Two durations are the whole of the page's motion —
   * its transitions and its one animation, the pop a mark makes when it is
   * set, which borrows the reveal rather than asking for a third. The system
   * reduced-motion setting zeroes them below, which is what turns that
   * animation off as well; there is no manual override, by design.
   */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-hover: 180ms;
  --duration-reveal: 220ms;
  /* How far anything rises towards the pointer. One distance, so a card and
     whatever lifts next agree. */
  --lift: 4px;

  /* ---- Focus -----------------------------------------------------------
   * One ring, in the interaction role, for everything focusable.
   */
  --focus-ring: 2px solid var(--interaction);
  --focus-offset: 3px;

  /* ---- The wordmark: the plate ------------------------------------------
   * The series' half of the mark. Measured off Chuck/banner.jpg (758×140):
   * the orange plate occupies the box at (13, 9) sized 279×121, tilted about
   * 11°, on a white field. The box is cropped with background positioning
   * and the tilt is clipped to the plate's four corners, so the white never
   * reaches the page and no image file is produced. All of it is
   * proportional, so setting a width on .wordmark is enough to scale it.
   */
  --wordmark-aspect: 279 / 121;
  --wordmark-size: 271.685%;
  --wordmark-position: 2.714% 47.368%;
  --wordmark-plate: polygon(0.72% 42.26%, 94.34% 0.72%, 98.93% 58.55%, 5.31% 98.47%);

  /* ---- The wordmark: the suffix -----------------------------------------
   * The library's own half. flix.svg is a 1068×754 canvas whose lettering
   * sits well inside it. That margin is not slack: the mark carries a
   * dx=-15 dy=15 σ=25 drop shadow reaching left and down, which the export
   * already clips slightly at the canvas edge. So the file is drawn whole
   * and the canvas's own aspect ratio is stated below — tightening the
   * viewBox onto the letters would cut the shadow off square, and stating
   * any other ratio would letterbox the drawing inside its box.
   *
   * The three placements are multiples of the plate's width, so the whole
   * lockup still scales from the one number on .wordmark. Their target came
   * from Chuck/flix mockup.png, measured at the pixel: the plate's orange
   * bounding box there, the plate's CSS box recovered from the clip path's
   * own extremes above, and the suffix's ink including its outline. That
   * recovered box comes out at aspect 2.3051 against the 2.3058 stated above
   * — a 0.03% agreement, which is what says the mockup's plate is this plate
   * and its fractions can be trusted against it.
   *
   * The numbers themselves are then calibrated against a real render rather
   * than computed from the file's own geometry, because the export's
   * declared ink box is not quite where its ink is: placing the canvas by
   * that box put the lettering 1.8px narrow and 1.3px too far out at the
   * ceiling. What the width and the gap below are is that render, measured
   * the same way the mockup was, and solved back. The rise is left as first
   * derived — it landed 0.2px out, which is inside the measurement's own
   * noise, and a number tuned to noise is worse than one left alone.
   *
   * What they come to at the 280px ceiling: the lettering about 74×50 inside
   * an 84.1×59.4 canvas, standing about 8.5px clear of the plate with its
   * tops about 6px below the plate box's own, for a lockup about 366px wide.
   * At the 160px floor the lockup is 209px, inside the 212px column a 480px
   * window leaves for it.
   *
   * The mockup itself is about 11% larger throughout — its plate is 21vw of
   * a 1512px display under the 320px ceiling that stood before the viewer
   * looked at it and brought it to 280px. These are its ratios, not its
   * sizes.
   */
  --wordmark-suffix-aspect: 1068 / 754;
  --wordmark-suffix-width: 0.3005;
  --wordmark-suffix-gap: 0.0074;
  --wordmark-suffix-rise: 0.0124;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 0ms;
    --duration-reveal: 0ms;
  }
}