/* Nightwork — design foundation (v3.1)
   Locked. Reference every colour, size and space through these variables.
   No literal hex values and no off-ladder px elsewhere in the stylesheet. */

:root {
  /* colour — dark ladder */
  --ink: #14181C;
  --surface: #1E242A;
  --raised: #2A3239;

  /* colour — light ladder */
  --paper: #F4F6F7;
  --sunk: #E7EAEC;

  /* colour — text and lines */
  --muted: #5C666E;
  --muted-on-ink: #939DA5;
  --border: #D8DDE1;
  --border-on-ink: #2C343B;

  /* colour — accent */
  --accent: #F0A02E;
  --accent-deep: #9C6404;

  /* type */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-display: 60px;  --lh-display: 1.1;
  --fs-h1: 44px;       --lh-h1: 1.1;
  --fs-h2: 30px;       --lh-h2: 1.25;
  --fs-h3: 22px;       --lh-h3: 1.3;
  --fs-lead: 21px;     --lh-lead: 1.5;
  --fs-body: 17px;     --lh-body: 1.6;
  --fs-small: 15px;    --lh-small: 1.5;
  --fs-caption: 13px;  --lh-caption: 1.5;
  --fs-eyebrow: 11px;  --lh-eyebrow: 1.4;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-eyebrow: 0.14em;

  /* spacing ladder */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-10: 128px;

  /* measure */
  --w-page: 1120px;
  --w-prose: 68ch;
  --w-narrow: 46ch;

  /* retained for the one existing reference; new work uses the ladder below */
  --radius-bubble: 10px;

  /* signal — deficiency figures in measured data. Dark surfaces only.
     7.81:1 on --ink, 6.86:1 on --surface. Never on --paper or --sunk. */
  --signal: #E99595;

  /* corner ladder. The phone and monitor illustrations are exempt —
     their radii describe device geometry, not system shapes. */
  --r-1: 2px;       /* tags, table chips */
  --r-2: 5px;       /* small cards, chips, bubble tails */
  --r-3: 10px;      /* panels, cards, inputs */
  --r-4: 17px;      /* message bubbles */
  --r-pill: 999px;  /* buttons and badges only — echoes the ring in the mark */
  --r-full: 50%;    /* circular elements only */

  /* elevation. Always color-mix on --ink — never raw rgba,
     never a coloured shadow, never a glow. */
  --shadow-1: 0 4px 8px color-mix(in srgb, var(--ink) 15%, transparent);
  --shadow-2: 0 8px 20px color-mix(in srgb, var(--ink) 20%, transparent);
  --shadow-3: 0 20px 45px color-mix(in srgb, var(--ink) 12%, transparent);

  /* interaction */
  --dur-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* base */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
p  { margin: 0; max-width: var(--w-prose); text-wrap: pretty; }

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
}

/* One per section, directly after the heading. Never two in sequence. */
.lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--w-narrow); }
.small   { font-size: var(--fs-small); line-height: var(--lh-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }

/* Evidence figures: timestamps, durations, prices, counts.
   Tabular numerals so columns align. Figures only — never words. */
.num, td.num, time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* measure helpers */

.prose  { max-width: var(--w-prose); }
.narrow { max-width: var(--w-narrow); }

/* sections */

.band { padding: var(--s-9) var(--s-5); }
.band--tall  { padding-block: var(--s-10); }
.band--tight { padding-block: var(--s-7); }

.container { width: 100%; max-width: var(--w-page); margin-inline: auto; }

.band--paper { background: var(--paper); color: var(--ink); }

.band--ink { background: var(--ink); color: var(--paper); }
.band--ink .caption,
.band--ink .secondary { color: var(--muted-on-ink); }
.band--ink hr,
.band--ink td,
.band--ink th { border-color: var(--border-on-ink); }

/* panel: one level in from the band it sits on */
.panel {
  background: var(--surface);
  color: var(--paper);
  border: 1px solid var(--border-on-ink);
  padding: var(--s-5);
}

.panel .caption,
.panel .secondary { color: var(--muted-on-ink); }

/* raised: one level in from a panel. Never placed directly on a band. */
.raised { background: var(--raised); color: var(--paper); }

/* sunk: the light-mode panel */
.panel--sunk {
  background: var(--sunk);
  color: var(--ink);
  border: 0;
}

/* --accent-deep on --sunk is 4.10 and fails AA, so links here are ink. */
.panel--sunk a { color: var(--ink); }
.panel--sunk .caption { color: var(--muted); font-size: var(--fs-small); }

.secondary { color: var(--muted); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }

/* links */

/* Links on dark surfaces. Buttons and logo lockups are links too, but carry their own
   colours. :where() keeps this rule at the weight of one class, so any component rule
   (.btn--primary, .site-header .wordmark) still wins. A bare `.band--ink a` outranked
   .btn--primary and set amber text on an amber button; a bare :not(.btn) outranked the
   site's lockup and turned it amber. Do not remove the :where(). */
a { color: var(--accent-deep); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--ink); }
.band--ink :where(a:not(.btn, .brand, .wordmark)),
.panel :where(a:not(.btn, .brand, .wordmark)) { color: var(--accent); }
.band--ink :where(a:not(.btn, .brand, .wordmark)):hover,
.panel :where(a:not(.btn, .brand, .wordmark)):hover { color: var(--paper); }

/* buttons */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  padding: var(--s-4) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* primary — amber fill, ink label. 8.30:1. The only amber permitted on paper. */
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-deep); color: var(--paper); }

/* secondary on paper */
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--ink); }

/* secondary on ink */
.band--ink .btn--secondary {
  color: var(--paper);
  border-color: var(--border-on-ink);
}
.band--ink .btn--secondary:hover { border-color: var(--muted-on-ink); }

.btn[aria-disabled="true"] {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
  cursor: default;
}

/* form controls — rounded, hairline, same height as buttons */

input, textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-3);
  min-width: 0;
  max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
input:hover, textarea:hover, select:hover,
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
textarea { width: 100%; resize: vertical; }

/* focus
   Amber against paper is 1.98:1 and fails the 3:1 non-text minimum,
   so the ring is ink on light surfaces and amber on dark. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.band--ink :focus-visible { outline-color: var(--accent); }

/* tables — horizontal hairlines only */

table { border-collapse: collapse; width: 100%; }
th {
  text-align: left;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
td {
  font-size: var(--fs-small);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
td.num { text-align: right; }
.band--ink th { color: var(--muted-on-ink); }

/* mobile */

@media (max-width: 767px) {
  :root {
    --fs-display: 38px;
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-h3: 19px;
    --fs-lead: 19px;
  }
  .band { padding: var(--s-7) var(--s-4); }
  .band--tall { padding-block: var(--s-8); }
  .band--tight { padding-block: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}