/* shdw.work · the one token file. Every font, colour, spacing, radius and shadow lives here. */
/* the site's faces (his pick 10-15, D1 Cut, mockup WSibbyfnpX4mA246yULX1j): Archivo, its narrow cut for titles and its regular for lines;
   IBM Plex Mono for the small marks. The app's own UI inside the panels keeps the app's faces (--sans, --mono) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..100,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root {
  /* site */
  --site-bg: #050506;
  /* D1 Cut: warm white; the lines at 72%, the small marks at 56%; amber only on numbers and the download */
  --site-txt: #eee8da;
  --site-line: rgba(238, 232, 218, .72);
  --site-mark: rgba(238, 232, 218, .56);
  --site-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --ttl-stretch: 62%;   /* the titles' narrow cut: capitals, set like a film's title cards */
  --site-nav-gap: calc(26px * var(--zt));
  --surface-a: #121216;
  --surface-b: #08080a;
  --surface-line: #1c1c22;
  /* SIZES ON EVERY SCREEN (his call 10-15): the site is designed at 1920 x 1080 and every --b- size is its size there. The page sets --z, how
     big the scene draws against that design (the app's scale over its scale at 1920 x 1080; past the size cap it stops growing, the rest
     of a big screen is the page's black), and --zt, how far the type follows it (the size cap's FOLLOW: 1 all the way, 0 not at all). Each
     size below is its design size times --zt, never under its floor (--f-, the same name), so a small screen stays readable. A phone has its own sizes (below) */
  --z: 1;
  --zt: 1;
  --ttl-xs: .07;     /* the site's left margin, a share of the width */
  --ttl-x: calc(var(--bw, 100vw) * var(--ttl-xs));
  --b-ttl-w: 450px;  /* a title column's width */
  --b-ttl-gap: 56px; /* a title column's gap to its window */
  --ttl-w: calc(var(--b-ttl-w) * var(--zt));
  --ttl-gap: calc(var(--b-ttl-gap) * var(--zt));
  /* the type, one size per job: --ttl-size the section and feature titles; --ttl-hero the intro title; --ttl-line the lines under a title;
     --cl-ttl the row titles (an open card's chapters, the map's list, the cards' own titles, an update's title); --cl-line the smaller lines
     (a chapter's line, a card's line, an update's lines); --t-brand a name in a mark (the map's corner, the play buttons); --t-body long
     text (terms, privacy); --t-small the cards' subtitles; --t-label the small marks in mono (indexes, dates, tags, captions, the tooltip);
     --t-nav the nav, the pills, the footer; --t-mark the nav's mark and the icons beside text. --cl-others = how strong the chapters not
     being shown sit (his picks, mockup A1, 10-12) */
  /* the floors, one per size (his tweak panel sets them too) */
  --f-ttl: 44px; --f-hero: 56px; --f-ttl-line: 14px; --f-cl-ttl: 20px; --f-cl-line: 13px; --f-brand: 15px; --f-wordmark: 15px; --f-body: 15px; --f-small: 12px; --f-label: 11px; --f-nav: 11px; --f-mark: 16px;
  --b-ttl: 96px;     --ttl-size: max(var(--f-ttl), calc(var(--b-ttl) * var(--zt)));
  --b-hero: 150px;   --ttl-hero: max(var(--f-hero), calc(var(--b-hero) * var(--zt)));
  --b-ttl-line: 20px; --ttl-line: max(var(--f-ttl-line), calc(var(--b-ttl-line) * var(--zt)));
  --b-cl-ttl: 30px;  --cl-ttl: max(var(--f-cl-ttl), calc(var(--b-cl-ttl) * var(--zt)));
  --b-cl-line: 15px; --cl-line: max(var(--f-cl-line), calc(var(--b-cl-line) * var(--zt)));
  --b-cl-gap: 20px;  --cl-gap: calc(var(--b-cl-gap) * var(--zt));
  --cl-others: .55;
  --b-brand: 21px;   --t-brand: max(var(--f-brand), calc(var(--b-brand) * var(--zt)));
  --b-wordmark: 17px; --t-wordmark: max(var(--f-wordmark), calc(var(--b-wordmark) * var(--zt))); /* the nav's wordmark, in its pre-Cut face (his call 10-15) */
  --b-body: 17px;    --t-body: max(var(--f-body), calc(var(--b-body) * var(--zt)));
  --b-small: 14px;   --t-small: max(var(--f-small), calc(var(--b-small) * var(--zt)));
  --b-label: 13px;   --t-label: max(var(--f-label), calc(var(--b-label) * var(--zt)));
  --b-nav: 12px;     --t-nav: max(var(--f-nav), calc(var(--b-nav) * var(--zt)));
  --b-mark: 22px;    --t-mark: max(var(--f-mark), calc(var(--b-mark) * var(--zt)));
  --b-pad: 28px;     --site-pad: calc(var(--b-pad) * var(--zt));
  /* one-offs drawn in a frame (Connections, Download, Updates, the footer), grown with the frame (--kt: its scale for type): the one big
     download; Connections' supplier names and marks, a model's mark; the footer's SHDW mark */
  --dl-cta: 44px;
  --cn-name: 34px;
  --cn-mark: 56px;
  --cn-mark-s: 24px;
  --ft-mark: 44px;
  /* the app's own type inside the panels and the card UIs: the app's sizes, its half sizes (9.5, 10.5, 11.5, 12.5, 13.5) taken down to
     the whole size below, 8 and 8.5 up to 9; --a-title a window's title, --a-head a page heading */
  --a-xs: 9px;
  --a-s: 10px;
  --a-m: 11px;
  --a-l: 12px;
  --a-xl: 13px;
  --a-title: 15px;
  --a-head: 17px;
  /* motion: how every piece of text comes on (his pick 10-15, M1 Focus pull, softened): each line racks into focus, from a little soft, a
     little large and a little loose to sharp; --rise its time; and the site's ease-out */
  --rise: .95s;
  --fp-blur: 6px;
  --fp-zoom: 1.02;
  --fp-spread: .02;  /* em */
  --ease-focus: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* the app's own look (Video Dancer defaults, vidancer-ui styles.css) */
  --bg0: #0c0c0f;
  --bg: #0e0e11;
  --bg2: #16161a;
  --panel: #1d1d22;
  --panel2: #26262d;
  --raised: #141418;
  --raised2: #1b1b20;
  --field: #101014;
  --header: #000;
  --line: #33333c;
  --line2: #444450;
  --txt-hi: #e8e8ee;
  --txt: #e6e6ea;
  --body: #cfcfd6;
  --muted: #9a9aa6;
  --dim: #6c6c78;
  --amber: #e7a93c;
  --amber-dim: #8a6a2a;
  --on-accent: #000;
  --ok: #5fbf6a;
  --gold: #e7c98c;
  --music: #6aa86a;
  --alink: #5b8fd6;
  --score: #f5781e;
  --b1: #3fb6a8;
  --b2: #e7a93c;
  --b3: #c264c2;
  --b4: #5fa8e0;
  --b5: #e0795f;
  /* the app's native sliders (Chrome's own range): Enhance's scrub and Topaz sliders */
  --range-on: #1a73e8;
  --range-off: #e3e3e3;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* shape: --r-sm thumbnails and small tags, --r-field fields, chips and menus, --r-btn buttons, --r-panel panels, --r-tile boxes and tiles,
     --r-win the app's dialogs, --r-card the cards, --r-surface the surface, --r-pill pills */
  --r-sm: 3px;
  --r-field: 4px;
  --r-btn: 5px;
  --r-panel: 5px;
  --r-tile: 6px;
  --r-win: 8px;
  --r-card: 10px;
  --r-surface: 14px;
  --r-pill: 999px;
  --card-gap: calc(30px * var(--z));
  --card-pad: calc(16px * var(--z));
  /* shadows: a panel; a popup (menus, fans, a dragged picture); something floating well clear (a dialog, the Screen); the amber glow of a
     scan line */
  --shadow-panel: 0 22px 50px rgba(0, 0, 0, .62), 0 2px 6px rgba(0, 0, 0, .5);
  --shadow-pop: 0 14px 34px rgba(0, 0, 0, .55);
  --shadow-float: 0 30px 90px rgba(0, 0, 0, .62);
  --glow: 0 0 8px var(--amber);
  /* amber marks: a selection ring; a lit row's tint; a selected word */
  --ring: 2px solid var(--amber);
  --amber-tint: color-mix(in srgb, var(--amber) 15%, transparent);
  --amber-mark: color-mix(in srgb, var(--amber) 35%, transparent);
}
/* a phone (700 px and under): the titles and labels at the phone's sizes; nothing on the glass under 14px (--z is 1 here) */
@media (max-width: 700px) {
  :root { --b-ttl: 56px; --b-hero: 64px; --b-ttl-line: 16px; --b-cl-ttl: 24px; --b-brand: 18px; --b-label: 14px; --b-nav: 14px; }
}