/*
 * Insights design tokens — the one foundation for all four surfaces
 * (panelist, staff, buyer, club). Direction "Ledger", approved 2026-10-03;
 * the full system is insights-md-plan/redesign/03-SYSTEM.md.
 *
 * One rule does most of the work: the accent is reserved for the primary
 * action and for money. Anything else that wants attention gets weight or
 * position, not colour — selection is ink, not accent — so a glance at any
 * screen finds the next action and the amount it pays in the same place.
 *
 * Light only, by owner directive (2026-10-05). There is no dark theme to keep
 * in step: no prefers-color-scheme rule, no [data-theme="dark"] block, no
 * theme switch, on any Insights page. Every HTML entry pins
 * <html data-theme="light"> and <meta name="color-scheme" content="light">.
 * A selector on the attribute is always :root[data-theme=…], never a bare
 * [data-theme]: the staff qual view uses data-theme="<id>" on its checkboxes.
 *
 * Neutrals carry no blue: blue minus red stays at 2 or below (owner directive,
 * no navy grounds on any surface). Every text pair is AA, and --line-2, the
 * border of anything you can operate, is 3:1 (WCAG 1.4.11).
 *
 * System type, on purpose: no webfont request on a phone that just opened an
 * email, and no FOIT. Numbers are tabular everywhere they line up.
 *
 * Nothing outside this file may hold a colour literal.
 */

:root {
  color-scheme: light;
  --paper:         #F5F5F2;
  --surface:       #FFFFFF;
  --surface-2:     #F9F9F7;
  --ink:           #17181A;
  --ink-2:         #47494E;
  --ink-3:         #62646A;   /* 5.4:1 on paper, 5.6:1 on surface-2 */
  --line:          #E5E5E0;   /* hairlines: dividers, card edges */
  --line-2:        #888984;   /* control boundaries: 3:1 or better on every ground */

  --accent:        #203C8C;   /* primary action fill, nothing else */
  --accent-hover:  #1A3173;
  --accent-pressed:#152860;
  --accent-ink:    #FFFFFF;
  --accent-text:   #203C8C;   /* money on offer, links */
  --accent-wash:   #EDF0F7;   /* the keyboard-focused row */
  --ring:          #3F67D6;   /* the one focus ring: 4.7:1 on paper */

  --ok:            #0A6B4A;   /* paid, completed, feasible */
  --ok-wash:       #EAF5EF;
  --ok-line:       #9CCDB6;
  --warn:          #8A4A0B;   /* deadlines, SLA, behind */
  --warn-wash:     #FBF2E4;
  --warn-line:     #E2BF8C;
  --bad:           #B0261B;   /* errors, destructive, infeasible */
  --bad-wash:      #FCEEEC;
  --bad-line:      #EDB0A9;
  --info:          #36445E;   /* neutral information: a slate ink, not a blue ground */
  --info-wash:     #F0F1F2;
  --info-line:     #C9CCD1;


  --overlay:       rgba(10, 10, 10, .42);
  --on-ink:        #FFFFFF;   /* text on an ink or bad fill (toasts) */
  --media-bg:      #000000;   /* behind video */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 12.5px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 19px;
  --t-xl: 24px;
  --t-2xl: 32px;
  --t-display: 40px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;

  /* Radii step down as they nest: the sheet holds cards, cards hold controls. */
  --r-sheet: 22px;
  --r-card: 16px;
  --r-ctl: 11px;
  --r-sm: 8px;
  --r-xs: 6px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, .18);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .18);

  --dur: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --tap: 44px;
}

/* Display layer: decorative tokens shared by all surfaces; spectrum never for
   text, buttons or solid grounds (06-DISPLAY-ROLLOUT §2, shared/display.css).
   The --l-* names are the landing's, kept to avoid churn. The four spectrum
   colours are sampled from the logo and are for moments only (art, lights,
   glows, icons), never real data. check-tokens.mjs enforces it on every
   sheet. The precision scale (--g-*) and the one control height (--h-ctl)
   came from the landing too, and are now everyone's. */
:root {
  --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 24px; --g-6: 32px; --g-7: 48px; --g-8: 64px; --g-9: 96px;
  --h-ctl: 32px;

  --l-ground:   #FFFFFF;
  --l-band:     #F7F7F5;
  --l-dot:      #D8D8D3;
  /* Night: the landing's two dark sections (.d-sec--night, display.css). A
     neutral near-black, never navy (brand directive). */
  --l-night:        #141414;
  --l-night-2:      #1E1E1D;
  --l-night-ink:    #F5F5F2;
  --l-night-ink-2:  #C6C6C1;
  --l-night-ink-3:  #A3A39E;
  --l-night-line:   #30302E;
  --l-night-dot:    #2B2B29;
  --l-night-ok:     #6FD3A6;
  --l-hatch:    rgba(23, 24, 26, .035);
  --l-glass:    rgba(255, 255, 255, .72);

  --l-cyan:     #4FB6E8;
  --l-blue:     #3A78CF;
  --l-violet:   #6448C2;
  --l-pink:     #D3498F;
  --l-spectrum: linear-gradient(90deg, var(--l-cyan), var(--l-blue) 35%, var(--l-violet) 68%, var(--l-pink));
  --l-glow:     radial-gradient(60% 70% at 50% 100%, rgba(79,182,232,.20) 0%, rgba(100,72,194,.12) 45%, rgba(211,73,143,.06) 70%, transparent 100%);
  --l-tint:     linear-gradient(180deg, rgba(79,182,232,.08), rgba(100,72,194,.07) 60%, rgba(211,73,143,.05));
  --l-grid-line: rgba(79,182,232,.12);

  --l-shadow-card:  0 0 0 1px rgba(23,24,26,.06), 0 1px 3px -1px rgba(23,24,26,.16), 0 4px 12px -1px rgba(23,24,26,.04);
  --l-shadow-float: 0 0 0 1px rgba(23,24,26,.07), 0 16px 32px -4px rgba(23,24,26,.10), 0 4px 4px -4px rgba(23,24,26,.05);
  --l-shadow-hero:  0 0 0 1px rgba(23,24,26,.08), 0 50px 100px -20px rgba(23,24,26,.10), 0 30px 60px -30px rgba(23,24,26,.22);
  --l-btn-ink-shadow: inset 0 .5px 0 rgba(255,255,255,.14), 0 1.5px 1.5px rgba(0,0,0,.25);

  --l-ease-out: cubic-bezier(0, 0, 0, 1);
  --l-ease-io:  cubic-bezier(.65, 0, .35, 1);
}

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

/* Every native checkbox, radio and range on every surface: ink, because
   "chosen" is ink and the accent is reserved for the action. */
:root { accent-color: var(--ink); }

/* ── Ledger money: the one way an amount is typeset, on every surface ───────
   <span class="money"><span class="cur">$</span>12</span> — the sign small and
   raised to the cap height, tabular figures, tight tracking. Colour comes from
   the context (offer = --accent-text, earned = --ok, staff = ink). */
.money { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.money .cur { font-size: .58em; font-weight: 600; position: relative; top: -.62em; margin-right: .04em; letter-spacing: 0; }

/* The mark. Never in a box: it is circular and shown as it is. */
.brand-mark { display: block; flex: none; width: 28px; height: 28px; }

/* ── The button: one component for all four surfaces (03-SYSTEM §7) ─────────
   <button class="btn btn--primary">. Variants: primary (the one action, the
   only accent fill), secondary (neutral, everything else), quiet (text only),
   danger, link. Sizes: --sm, --lg, --block. A surface sets its density with
   --btn-h / --btn-h-sm / --btn-fs / --btn-h-primary, never by restyling.
   Variant rules are .btn.btn--x so a surface's link colour (`.table a`,
   `.buyer a`) cannot repaint a button's label. */
:root {
  --btn-h: var(--tap);
  --btn-h-primary: var(--btn-h);
  --btn-h-sm: 36px;
  --btn-h-lg: 52px;
  --btn-fs: 15px;
  --btn-fs-sm: var(--t-sm);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 16px; border-radius: var(--r-ctl);
  border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer;
  font: 600 var(--btn-fs)/1.2 var(--font); text-decoration: none; text-align: center;
  /* Short labels stay on one line; a sentence-long one wraps instead of
     pushing the page sideways. */
  max-width: 100%; text-wrap: balance;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn.btn--primary { background: var(--accent); color: var(--accent-ink); min-height: var(--btn-h-primary); }
.btn.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.btn--primary:active:not(:disabled) { background: var(--accent-pressed); }

.btn.btn--secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn.btn--secondary:hover:not(:disabled) { border-color: var(--ink); }
.btn.btn--secondary:active:not(:disabled) { background: var(--surface-2); }
/* Selected / current — a filter toggle or a segment: ink, never accent. */
.btn.btn--secondary[aria-pressed="true"], .btn.btn--secondary[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Ink: a non-requesting action that still wants weight, on any surface ("Run
   the drop", "Next", "Talk to us about it"). The accent stays reserved for
   the one primary action. */
.btn.btn--ink { background: var(--ink); color: var(--paper); box-shadow: var(--l-btn-ink-shadow, none); }
.btn.btn--ink:hover:not(:disabled) { background: var(--ink-2); }

.btn.btn--quiet { color: var(--ink-2); }
.btn.btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.btn.btn--danger { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad); }
.btn.btn--danger:hover:not(:disabled) { border-color: var(--bad); }

/* A button that reads as a link: underlined text, no box. With --danger, red. */
.btn.btn--link { min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--ink-3); font-weight: 500;
  font-size: var(--t-xs); text-decoration: underline; text-underline-offset: 3px; }
.btn.btn--link:hover:not(:disabled) { color: var(--ink); }
.btn.btn--link.btn--danger { color: var(--bad); }
@media (pointer: coarse) { .btn.btn--link { min-height: var(--tap); padding: 8px; } }

.btn.btn--sm { min-height: var(--btn-h-sm); padding: 0 12px; font-size: var(--btn-fs-sm); border-radius: var(--r-sm); }
.btn.btn--lg { min-height: var(--btn-h-lg); padding: 0 26px; font-size: var(--t-lg); }
.btn.btn--block { display: flex; width: 100%; }
@media (pointer: coarse) { .btn.btn--sm { min-height: var(--tap); } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active:not(:disabled) { transform: none; } }

/* The /brands/ hero (2026-10-17, insights-md-plan/redesign/18-BRANDS-HERO-v3-board.html,
   DEVIATIONS §31): the campus desk's grounds, paper, shadows and type. Used by
   buyer/brands.css only. The owner approved the spectrum on the headline's
   second line and on the selected switch button for this page; both use the
   deeper --bh-* shades below so text stays AA (4.5:1 on white, 4.3:1 or better
   on the cream for the 40px+ headline). */
:root {
  --bh-cream:   #FBF9F3;
  --bh-sheet:   #FDFCF8;
  --bh-paper:   #FFFEFB;
  --bh-ink-4:   #8C8D88;
  --bh-rule:    #B9BAB5;
  --bh-bar-l:   #B5B6B1;
  --bh-tape:    rgba(214, 184, 138, .5);
  --bh-tape-line: rgba(169, 131, 79, .25);
  --bh-answers: #6448C2;
  --bh-reach:   #167AAE;
  --bh-both:    #C2357F;
  --bh-spectrum-text: linear-gradient(90deg, #167AAE, #2F67B8 35%, #6448C2 68%, #C2357F);
  --bh-pools: radial-gradient(60% 50% at 88% 18%, rgba(224, 82, 155, .12), transparent 70%),
              radial-gradient(50% 50% at 70% 95%, rgba(63, 177, 232, .16), transparent 70%),
              radial-gradient(45% 45% at 10% 100%, rgba(122, 92, 214, .10), transparent 70%);
  --bh-sh-paper: 0 0 0 .5px rgba(23, 24, 26, .10), 0 1px 1px rgba(23, 24, 26, .06), 0 6px 14px -4px rgba(23, 24, 26, .14), 0 22px 40px -18px rgba(23, 24, 26, .22);
  --bh-sh-sheet: 0 0 0 .5px rgba(23, 24, 26, .08), 0 2px 2px rgba(23, 24, 26, .04), 0 30px 60px -24px rgba(23, 24, 26, .22), 0 60px 90px -50px rgba(23, 24, 26, .18);
  --bh-sh-pop:   0 0 0 1px rgba(23, 24, 26, .07), 0 10px 24px -8px rgba(23, 24, 26, .24), 0 30px 50px -30px rgba(23, 24, 26, .30);
  --bh-sh-box:   drop-shadow(0 10px 14px rgba(23, 24, 26, .22)) drop-shadow(0 2px 2px rgba(23, 24, 26, .12));
  --bh-sh-reply: drop-shadow(0 3px 5px rgba(23, 24, 26, .16));
  --bh-fold-dark: rgba(23, 24, 26, .05);
  --bh-fold-light: rgba(255, 255, 255, .9);
  --bh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bh-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
}

/* The brand site's type (2026-10-18, redesign/20-BRANDS-UNIFY-PLAN.md D15):
   Bricolage Grotesque headlines, Geist text, Geist Mono for kickers, prices
   and references, on the brand pages only (body.bs-page in buyer/site.css
   points --font and --mono at these). App screens, the request form and the
   buyer app keep the system font. */
/* Self-hosted (2026-10-18): the Latin subsets from the @fontsource-variable
   5.3.0 packages, SIL Open Font Licence (the licences sit beside the files in
   shared/fonts/). A browser downloads a face only when a page uses it, so
   the pages that never set these families pay nothing. The file names carry
   the package version: /insights/** files are cached for a year, so a new
   version gets a new name. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/insights/shared/fonts/bricolage-grotesque-latin-opsz-5.3.0.woff2") format("woff2-variations"), url("/insights/shared/fonts/bricolage-grotesque-latin-opsz-5.3.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/insights/shared/fonts/geist-latin-wght-5.3.0.woff2") format("woff2-variations"), url("/insights/shared/fonts/geist-latin-wght-5.3.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/insights/shared/fonts/geist-mono-latin-wght-5.3.0.woff2") format("woff2-variations"), url("/insights/shared/fonts/geist-mono-latin-wght-5.3.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --b-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --b-text: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --b-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The Delibity for startups landing, /hire/ (2026-10-20, jobs-md-plan
   DECISIONS D-51, D-56). Used by public/hire/landing.css only: the hero's
   glow, the coloured light behind the fanned applicant cards, the floating
   nav and glass tiles, and the cards' shadows. Text and buttons never take
   these; the turning word uses --bh-spectrum-text, as the /brands/ headline
   does. */
:root {
  --jl-hero-glow: radial-gradient(closest-side, rgba(79, 182, 232, .20), rgba(100, 72, 194, .10) 50%, transparent 72%);
  --jl-fan-glow: radial-gradient(40% 36% at 30% 30%, rgba(79, 182, 232, .22), transparent 70%),
                 radial-gradient(42% 38% at 72% 34%, rgba(211, 73, 143, .16), transparent 70%),
                 radial-gradient(44% 40% at 50% 80%, rgba(100, 72, 194, .14), transparent 70%);
  --jl-band-glow: radial-gradient(50% 80% at 100% 0%, rgba(211, 73, 143, .10), transparent 70%),
                  radial-gradient(50% 80% at 0% 100%, rgba(79, 182, 232, .14), transparent 70%);
  --jl-glass: rgba(255, 255, 255, .78);
  --jl-nav: rgba(255, 255, 255, .84);
  --jl-dim-card: brightness(.975);
  --jl-sh-card: 0 0 0 1px rgba(23, 24, 26, .06), 0 1px 3px -1px rgba(23, 24, 26, .16), 0 4px 12px -1px rgba(23, 24, 26, .04);
  --jl-sh-pop: 0 0 0 1px rgba(23, 24, 26, .07), 0 10px 24px -8px rgba(23, 24, 26, .24), 0 30px 50px -30px rgba(23, 24, 26, .30);
  --jl-sh-btn: 0 8px 20px -10px rgba(23, 24, 26, .5);
  --jl-sh-nav: 0 1px 2px rgba(0, 0, 0, .04);
  /* The redesign (2026-10-20, D-58): the orb is the logo's swirl, large. A
     white heart where the D sits, a slow sheen, a soft glow. */
  --jl-orb: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .96) 0 16%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, 0) 52%),
            conic-gradient(from 200deg, #4FB6E8, #3A78CF 25%, #6448C2 50%, #D3498F 72%, #E58DB9 84%, #4FB6E8);
  --jl-orb-sheen: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 6%, rgba(255, 255, 255, .38) 12%, rgba(255, 255, 255, 0) 22% 40%,
            rgba(255, 255, 255, .3) 47%, rgba(255, 255, 255, 0) 58% 72%, rgba(255, 255, 255, .34) 80%, rgba(255, 255, 255, 0) 90%);
  --jl-orb-rim: inset 0 0 40px 6px rgba(255, 255, 255, .55);
  --jl-orb-glow: 0 0 140px 30px rgba(100, 72, 194, .16), 0 0 80px 10px rgba(79, 182, 232, .18);
  --jl-orb-glow-night: 0 0 160px 50px rgba(100, 72, 194, .30), 0 0 90px 20px rgba(79, 182, 232, .24);
  --jl-sh-window: 0 0 0 1px rgba(23, 24, 26, .08), 0 2px 4px rgba(23, 24, 26, .04), 0 40px 80px -24px rgba(23, 24, 26, .22), 0 24px 48px -28px rgba(23, 24, 26, .28);
  --jl-fade-white: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  --jl-sticky: rgba(255, 255, 255, .94);
  /* D-70, D-71 (2026-10-20): white, navy and charcoal, no gradients. Cool
     hairlines for the product windows, a navy-tinted line for the chips,
     and one quiet shadow for windows and cards. */
  --jl-line: #E4E4E7;
  --jl-chip-line: #C6CFE6;
  --jl-sh-mock: 0 1px 2px rgba(24, 24, 27, .05), 0 20px 40px -22px rgba(24, 24, 27, .22);
  --jl-sh-soft: 0 1px 2px rgba(24, 24, 27, .05), 0 10px 24px -14px rgba(24, 24, 27, .16);
  /* D-74 (2026-10-20), "Night shift": a charcoal first screen and close lit in
     electric blue; the page between stays white with a brighter blue for
     actions. The charcoal is a near-neutral, never a navy ground. */
  --jl-night: #0F1116;
  --jl-night-2: #161922;
  --jl-night-3: #1D212B;
  --jl-night-line: #2E3442;
  --jl-night-ink: #F3F4F7;
  --jl-night-ink-2: #B4B9C5;
  --jl-night-ink-3: #8E94A2;
  --jl-volt: #6E95FF;        /* light on the dark: the dots, the ripple */
  --jl-volt-text: #9DB7FF;   /* text on the dark: 9.6:1 on --jl-night */
  --jl-blue: #3A62F0;        /* actions on white: 5.0:1 with white text */
  --jl-blue-hover: #2E50D4;
  --jl-blue-ink: #2442B8;    /* blue text on white or the wash */
  --jl-blue-wash: #EEF2FF;
  --jl-blue-line: #C9D3F5;
  /* D-76 (2026-10-21): the drawings. Example students are drawn as faceless
     busts, never initials; club work is drawn as the things clubs print. One
     warm colour, the 5 PM sun, against the blues; flat fills only. */
  --jl-art-sun: #F2A65A;
  --jl-art-sun-wash: #FCEBDA;
  --jl-art-sage: #DCEBE2;
  --jl-art-sage-ink: #2F6B4F;
  --jl-art-stone: #ECEDF1;
  --jl-art-sky: #262B38;
  --jl-art-hill: #1A1E28;
  --jl-art-skin-1: #F4D7BF;
  --jl-art-skin-2: #E4B48F;
  --jl-art-skin-3: #C98D63;
  --jl-art-skin-4: #9B6545;
  --jl-art-skin-5: #6E452F;
  --jl-art-hair-1: #1F1B18;
  --jl-art-hair-2: #3D2B20;
  --jl-art-hair-3: #6E4A2D;
  --jl-art-hair-4: #B07A42;
  --jl-art-hair-5: #2B2F3A;
  /* D-77 (2026-10-21): the verification doorway at night. Stone, a painted
     panel door, the warm room behind it, and the students who can't apply,
     drawn in greys. */
  --jl-art-mortar: #0E1016;
  --jl-art-stone-1: #1B1F28;
  --jl-art-stone-2: #1D212B;
  --jl-art-stone-3: #191C25;
  --jl-art-stone-4: #20242F;
  --jl-art-jamb-1: #272C38;
  --jl-art-jamb-2: #2B303D;
  --jl-art-key: #353B49;
  --jl-art-door: #273042;
  --jl-art-door-2: #2D374B;
  --jl-art-door-3: #1E2534;
  --jl-art-door-hi: #3A4560;
  --jl-art-iron: #101319;
  --jl-art-rivet: #3B4254;
  --jl-art-room: #F7DDC0;
  --jl-art-room-2: #E3BF98;
  --jl-art-room-3: #EFCFAB;
  --jl-art-room-4: #FBE6CF;
  --jl-art-lamp: #FFD7A3;
  --jl-art-ground: #14161D;
  --jl-art-slab-1: #171A22;
  --jl-art-slab-2: #181B23;
  --jl-art-step: #2A2F3B;
  --jl-art-step-2: #1E222B;
  --jl-art-grey-skin: #8A90A0;
  --jl-art-grey-hair: #454B57;
  --jl-art-grey-shirt: #666C7A;
  --jl-art-grey-pants: #3E4450;
  --jl-art-grey-shoe: #8E94A2;
  --jl-art-pants: #262C3B;
}