/* ==========================================================================
   North Light Path — brand.css
   The site-wide system in code. Same names as the North Light Path design
   system: tokens are CSS variables, components are nlp- classes.

   1. Put this file in the same folder as index.html, on your computer
      and on the server.
   2. In every page's <head>, add these lines (fonts first, then this file).
      A page in a subfolder, such as resonance/index.html, links
      ../brand.css instead, and puts ../ in front of the header and
      footer links too.

      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap">
      <link rel="stylesheet" href="brand.css">

   3. Paste the shared header and footer from site-shell.html.
   4. In the page's own <style>, keep layout rules only: no colours,
      fonts or spacing values of its own (use the tokens below).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals */
  --ink: #121a26;          /* headings, text, wordmark, selected edges */
  --slate: #4a5361;        /* secondary text */
  --muted: #646c79;        /* captions, counters, footer, field borders; never on linen */
  --mist: #b4bcc8;         /* secondary text on ink sections only */
  --gesso: #f6f3ec;        /* the page */
  --paper: #fbfaf6;        /* raised surfaces: panels, tool areas, fields */
  --linen: #ece7dd;        /* tags, meter tracks */
  --rule: #d5cfc3;         /* hairlines (decorative) */
  --tile: #fdfcf9;         /* hexagon tiles */
  --tile-edge: #cfc7b8;    /* a tile's resting outline (decorative) */

  /* Accent: one gold per view */
  --honey: #e3a230;        /* fills: 00 hexagon, primary button, callout edge */
  --honey-deep: #8c5a08;   /* honey as text on light grounds: eyebrows, links, current page */
  --honey-edge: #c98b1f;   /* outline of a honey fill; primary button hover */
  --cream: #fbf1dc;        /* the box behind an action */
  --on-honey: var(--ink);  /* text on a honey fill */
  --focus: var(--ink);     /* keyboard focus ring */

  /* Tools only: the four readings, always beside their names, in this order */
  --el-roots: #008300;     /* Roots · Stability */
  --el-currents: #2a78d6;  /* Currents · Bandwidth */
  --el-winds: #4a3aa7;     /* Winds · Clarity */
  --el-flames: #e34948;    /* Flames · Momentum */

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: Newsreader, "Iowan Old Style", Georgia, serif;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-7: 28px; --space-10: 40px; --space-12: 48px; --space-24: 96px;

  /* Radius */
  --radius-sm: 4px; --radius-md: 6px; --radius-pill: 999px;

  /* Size */
  --page-max: 72rem;
  --measure: 34rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 5.0625rem;   /* the shared header is 81px tall on a computer */
  --hex-w: clamp(104px, 10.5vw, 170px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gesso);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;          /* body: 17px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display, .h1, .h2, .h3 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; }
.display { font-size: clamp(2.75rem, 2rem + 3.333vw, 4.5rem); line-height: 1.05; letter-spacing: -.02em; }   /* 44 → 72px, Home only */
h1, .h1 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.015em; }      /* 32 → 44px */
h2, .h2 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.01em; }   /* 28 → 36px */
h3, .h3 { font-size: 1.625rem; line-height: 1.2; letter-spacing: 0; }                                       /* 26px */
p { margin: 0 0 1rem; }
p, li, dd { text-wrap: pretty; }   /* no one-word last lines where the browser supports it */
.lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
.small { font-size: .9375rem; line-height: 1.45; }
.caption { font-size: .875rem; line-height: 1.45; }
.secondary { color: var(--slate); }
.secondary :where(b, strong) { color: var(--ink); font-weight: 600; }   /* run-in heads stay ink */

a { color: var(--honey-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--honey); color: var(--on-honey); }
img { max-width: 100%; height: auto; }
.nlp-painting { border: 1px solid var(--rule); }

/* Long reading (essays such as 0.02%) */
.essay { max-width: 66ch; }
.essay p { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.65; }
.quote { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--ink); }

/* Layout */
.nlp-page { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.nlp-measure { max-width: var(--measure); }
.nlp-section { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 7vw, var(--space-24)); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--gutter); top: .5rem; z-index: 10; background: var(--paper); padding: .5rem .75rem; }

/* Ink sections: cover-style bands */
.nlp-ink { background: var(--ink); color: var(--gesso); }
.nlp-ink :where(h1, h2, h3, .display) { color: var(--gesso); }
.nlp-ink :where(p) { color: var(--mist); }
.nlp-ink .nlp-eyebrow, .nlp-ink a { color: var(--honey); }
.nlp-ink :focus-visible { outline-color: var(--gesso); }

/* --------------------------------------------------------------------------
   Components (the design system's components/bundle.css is made from here)
   -------------------------------------------------------------------------- */
/* @components */

/* Eyebrow, and the label style it shares with the nav and footer */
.nlp-eyebrow {
  display: block; margin: 0 0 var(--space-3);
  font-family: var(--font-mono); font-size: .78125rem; line-height: 18px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--honey-deep);
}
.nlp-label { font-family: var(--font-mono); font-size: .78125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
a.nlp-label { color: var(--slate); text-decoration: none; }            /* "Where this started ↓" */
a.nlp-label:hover { color: var(--honey-deep); }

/* Header: 81px tall on a computer, so full-height layouts can subtract it */
.nlp-header, .nlp-footer { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.nlp-header {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: space-between;
  gap: var(--space-3) 32px; padding-block: var(--space-6); min-height: var(--header-h);
  border-bottom: 1px solid var(--rule);
}
.nlp-header-band { border-bottom: 1px solid var(--rule); }        /* full-width pages: the hairline runs edge to edge */
.nlp-header-band .nlp-header { border-bottom: 0; min-height: calc(var(--header-h) - 1px); }
.nlp-wordmark { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; font-weight: 500; color: var(--ink); text-decoration: none; }
.nlp-wordmark:hover { color: var(--ink); }
.nlp-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.nlp-nav a, .nlp-footer {
  font-family: var(--font-mono); font-size: .78125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.nlp-nav a { color: var(--ink); text-decoration: none; }
.nlp-nav a:hover { color: var(--honey-deep); }
.nlp-nav a[aria-current="page"] {
  color: var(--honey-deep);
  text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* Footer */
.nlp-footer { display: grid; gap: var(--space-4); padding: 32px 0 var(--space-12); border-top: 1px solid var(--rule); color: var(--muted); }
.nlp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-7); }
.nlp-footer p { margin: 0; }
.nlp-footer a { color: var(--muted); text-decoration: none; }
.nlp-footer a:hover { color: var(--honey-deep); }

/* Callout: the box behind an action */
.nlp-callout {
  display: block; max-width: var(--measure);
  background: var(--cream); border-left: 4px solid var(--honey); border-radius: var(--radius-md);
  padding: 14px 18px; text-decoration: none; color: var(--ink);
}
.nlp-callout:hover { color: var(--ink); }
.nlp-callout__label {
  display: block; margin-bottom: 2px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--honey-deep);
}
.nlp-callout__action { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; color: var(--ink); }
a.nlp-callout:hover .nlp-callout__action { text-decoration: underline; text-underline-offset: .2em; }
.nlp-callout > p { margin: 0; }   /* as a plain box (not a link) it holds a result, such as a case study's outcome */

/* Button */
.nlp-button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-size: 1rem; line-height: 1.25; font-weight: 600;
  padding: 12px 20px; border-radius: var(--radius-md);
  border: 1px solid var(--honey-edge); background: var(--honey); color: var(--on-honey);
  cursor: pointer; text-decoration: none;
}
.nlp-button:hover { background: var(--honey-edge); color: var(--on-honey); }
.nlp-button--quiet { background: var(--paper); border-color: var(--muted); color: var(--ink); }
.nlp-button--quiet:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.nlp-button:disabled, .nlp-button[aria-disabled="true"] { background: var(--linen); border-color: var(--rule); color: var(--slate); cursor: not-allowed; }
.nlp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Surface: a raised paper area for a tool's work, or a card */
.nlp-surface {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: clamp(var(--space-4), 3vw, var(--space-7));
}
.nlp-surface > :last-child { margin-bottom: 0; }

/* Card: a raised surface that opens something, such as a case study.
   The action inside it (a button or link) stretches over the whole card. */
.nlp-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  margin: 0; padding: var(--space-6); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md);
  transition: transform .18s ease, border-color .18s ease;
}
.nlp-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.nlp-card > * { margin: 0; }
.nlp-card__meta { font-size: .875rem; line-height: 1.45; color: var(--muted); }
.nlp-card__text { margin-top: var(--space-2); color: var(--slate); }
.nlp-card__action {
  margin-top: auto; padding: var(--space-4) 0 0; border: 0; background: none;
  font: inherit; font-size: .9375rem; font-weight: 600; text-align: left; color: var(--honey-deep);
  text-decoration: none; cursor: pointer;
}
.nlp-card__action::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the target */
.nlp-card:hover .nlp-card__action { color: var(--honey-deep); text-decoration: underline; text-underline-offset: .2em; }
@supports selector(:has(*)) {
  .nlp-card:has(.nlp-card__action:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
  .nlp-card__action:focus-visible { outline: none; }
}

/* Plate: one painting beside a page's intro, the site's signature.
   Flat, a hairline, its title underneath; never cropped, never behind text. */
.nlp-plate { margin: 0; }
.nlp-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.nlp-plate figcaption { margin-top: var(--space-3); font-size: .875rem; line-height: 1.45; color: var(--muted); }
.nlp-plate figcaption i { color: var(--ink); }

/* A page with a plate: put class="nlp-page nlp-with-plate" on <main>, the intro first and the
   plate second. On a computer the painting sits beside the intro; on a phone it closes the page. */
.nlp-with-plate { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(var(--space-10), 6vw, var(--space-24)); }
.nlp-with-plate > .nlp-plate { order: 99; max-width: var(--measure); padding-bottom: var(--space-12); }
@media (min-width: 900px) {
  .nlp-with-plate { grid-template-columns: minmax(0, 1fr) clamp(18rem, 30vw, 26rem); column-gap: clamp(var(--space-10), 6vw, var(--space-24)); }
  .nlp-with-plate > * { grid-column: 1 / -1; }
  .nlp-with-plate > :first-child { grid-column: 1; grid-row: 1; }
  .nlp-with-plate > .nlp-plate { grid-column: 2; grid-row: 1; order: 0; align-self: start; padding-bottom: var(--space-10); }
}

/* Filter: toggles that narrow a list. The selected one wears the nav's current-page mark. */
.nlp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); }
.nlp-filters__label, .nlp-filter {
  font-family: var(--font-mono); font-size: .78125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.nlp-filters__label { color: var(--muted); }
.nlp-filter { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nlp-filter:hover { color: var(--honey-deep); }
.nlp-filter[aria-pressed="true"] {
  color: var(--honey-deep);
  text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* Tag */
.nlp-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 1.25rem; padding: 0; }
.nlp-tag { background: var(--linen); border-radius: var(--radius-pill); padding: 3px 12px; font-size: .875rem; line-height: 1.43; color: var(--ink); }

/* Field */
.nlp-field { display: grid; gap: 6px; max-width: var(--measure); }
.nlp-field label { font-family: var(--font-mono); font-size: .78125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.nlp-field input, .nlp-field textarea, .nlp-field select {
  font: inherit; font-size: 1.0625rem; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--muted); border-radius: var(--radius-sm); padding: 10px 12px;
}
.nlp-field textarea { min-height: 120px; resize: vertical; }
.nlp-field input::placeholder, .nlp-field textarea::placeholder { color: var(--muted); }
.nlp-field :is(input, textarea, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.nlp-meta { font-family: var(--font-mono); font-size: .78125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Hexagon (pointy-top). Size it with --w on the tile or on its container. */
.nlp-hex {
  --fill: var(--tile); --edge: var(--tile-edge); --edge-w: 1.5px;
  position: relative; width: var(--w, 150px); height: calc(var(--w, 150px) * 1.1547005);
  padding: 0; border: 0; margin: 0;
  background: var(--edge);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-content: center; justify-items: center; text-align: center;
  font: inherit; color: var(--ink); cursor: pointer;
  transition: transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.nlp-hex::before { content: ""; position: absolute; inset: var(--edge-w); background: var(--fill); clip-path: inherit; }
.nlp-hex > span { position: relative; }
.nlp-hex__num { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; color: var(--slate); font-size: clamp(10px, calc(var(--w, 150px) * .075), 13px); margin-bottom: .2em; }
.nlp-hex__name { font-weight: 600; line-height: 1.2; font-size: clamp(12px, calc(var(--w, 150px) * .098), 16.5px); max-width: calc(var(--w, 150px) * .74); }
.nlp-hex--gold { --fill: var(--honey); --edge: var(--honey-edge); }
.nlp-hex--gold .nlp-hex__num { color: var(--on-honey); }
.nlp-hex[aria-pressed="true"] { --edge: var(--ink); --edge-w: 2px; }
.nlp-hex:focus-visible { outline: none; --edge: var(--focus); --edge-w: 3px; }
@media (hover: hover) {
  .nlp-hex:hover { transform: scale(1.04); --edge: var(--ink); }
}

/* Status key (Hourglass) */
.nlp-statuses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0 0 1.25rem; max-width: var(--measure); }
.nlp-statuses div { border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.nlp-statuses dt { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.nlp-statuses dd { margin: 2px 0 0; font-size: .875rem; line-height: 1.45; color: var(--slate); }

/* Element key (tools only) */
.nlp-elements { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: var(--measure); }
.nlp-element { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px var(--space-3); }
.nlp-element__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--el); }
.nlp-element__name { font-weight: 600; }
.nlp-element__name span { font-weight: 400; color: var(--slate); }
.nlp-element__value { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--ink); }
.nlp-meter { grid-column: 2 / -1; height: 8px; background: var(--linen); border-radius: var(--radius-pill); overflow: hidden; }
.nlp-meter > i { display: block; height: 100%; width: var(--v); background: var(--el); border-radius: var(--radius-pill); }

/* Reduced motion: no lift, no transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .nlp-hex:hover, .nlp-card:hover { transform: none; }
}