/* ============================================================
   DIRECTION B — CORRIDOR
   The site as a live map of trade corridors, on a white sheet.
   Green is the one colour in the room. Everything is movement
   along a path: origin → border → destination.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- colour ----
     Chalk: ink on a white sheet, no tint in the stock. The ground is
     within a hair of the surface, so the page reads as paper rather
     than as a tinted panel, and the only colour in the room is the
     green. The accent is a clean emerald rather than a stamp-ink
     green, because on a white sheet an ink green goes heavy.

     It was one of six candidates from the brief (§5.2), chosen on
     2026-09-28; the other five and the switch between them are gone.
     The brand book specifies the same values. */
  --ground:      #FAFBFA;
  --ground-2:    #F2F5F4;
  --surface:     #FFFFFF;
  --surface-2:   #F5F8F7;
  --ink:         #0E1513;
  --ink-2:       #414B48;
  --ink-3:       #5C6764;
  --accent:      #05704B;
  --accent-hi:   #089A68;
  --accent-dim:  #AFCEBF;
  --accent-wash: rgba(5, 112, 75, .07);
  --rule:        #E3E9E6;
  --rule-2:      #EEF2F0;
  --flag:        #8A5610;
  --flag-wash:   rgba(138, 86, 16, .10);

  /* the map pin — a second accent, deliberately not the brand green.
     A green dot on a green landmass is texture, not a mark: the whole
     point of marking a place is that the mark is not the surface it
     sits on. On a white sheet a saturated orange is the warmest thing
     in the room and reads as dirt rather than as a marker, so it is an
     oxide red — stamp-pad ink, which is what the marks are — at the
     saturation the rest of the page is drawn at. */
  --pin:         #A83D2B;
  --pin-hi:      #83291B;
  --pin-dim:     #E1C2BC;
  --pin-wash:    rgba(168, 61, 43, .09);

  /* the footage — Split's column and Spell's windows. Greyscale, then
     the accent laid back over it as hue, so the orange pallet trucks in
     both clips never spend the colour the map needs. It does not go
     high key: pushing it up puts the lit ceiling and the pale floor at
     the same value as the stock, which takes the ends off a bar, and
     the ends of the bar are its height. So it stays at the page's own
     brightness, keeps its contrast, and a hairline holds the edge where
     the picture cannot. No defocus either: nothing is read over it. */
  --bars-grade: grayscale(1) contrast(1.1) brightness(.98);
  --bars-tint:  .22;

  /* the photographs — the client's own, in photos.css. The footage's
     own grade and tint, so the pictures and the first screen's column
     read as one set: the colour that was left in (orange straps, a red
     pallet jack) spent the accent the way the footage is graded not to.
     The grain is film-strength, not texture: it makes forty phones in
     forty rooms read as one camera. */
  --ph-grade: var(--bars-grade);
  --ph-tint:  var(--bars-tint);
  --ph-grain: .22;

  /* text and hairlines that sit ON the accent */
  --on-accent:         #F6F8F7;
  --on-accent-wash:    rgba(246, 248, 247, .18);
  --on-accent-wash-hi: rgba(246, 248, 247, .30);
  --glow:              rgba(5, 112, 75, .06);
  --shadow:            rgba(14, 21, 19, .12);

  /* The floating header is glass: a film, a rim light, a specular and a
     drop. Over paper a black drop is the heavy shadow you notice before
     you notice the header, so the film is a bright wash, the rim light
     is ink, and the drop is short, soft and tinted. */
  --head-film: linear-gradient(180deg,
    rgba(255, 255, 255, .70), rgba(255, 255, 255, .52) 46%, rgba(255, 255, 255, .62));
  --head-film-stuck: linear-gradient(180deg,
    rgba(255, 255, 255, .86), rgba(255, 255, 255, .70) 46%, rgba(255, 255, 255, .80));
  --head-inset: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(16, 22, 20, .04);
  --head-inset-stuck: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(16, 22, 20, .05);
  --head-drop: 0 1px 1px rgba(16, 22, 20, .04), 0 6px 16px -8px rgba(16, 22, 20, .14);
  --head-drop-stuck: 0 1px 2px rgba(16, 22, 20, .05), 0 10px 24px -12px rgba(16, 22, 20, .18);
  --head-rim-a: rgba(16, 22, 20, .13);
  --head-rim-b: rgba(16, 22, 20, .03);
  --head-rim-c: rgba(16, 22, 20, .09);
  --head-spec: rgba(16, 22, 20, .05);
  --panel-sheen: rgba(255, 255, 255, .75);

  --focus:       var(--accent);
  --focus-w:     2px;
  --skip-bg:     var(--accent);
  --skip-fg:     var(--ground);

  /* ---- type ---- */
  --display: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.1rem + 4.6vw, 5rem);
  --fs-h2:      clamp(1.625rem, 1rem + 2vw, 2.625rem);
  --fs-h3:      clamp(1.15rem, 1rem + .55vw, 1.5rem);
  --fs-lede:    clamp(1.06rem, .98rem + .42vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-mono:    .8125rem;
  --fs-eyebrow: .6875rem;

  /* ---- layout ----
     The rhythm runs one step wider than it did. The client's note was
     "more clean, aired, more white space", and on a page whose whole
     argument is that this is a careful practice, air is not decoration:
     it is the difference between a document and a brochure. Every value
     below moved together, at the top of the clamp more than the bottom
     — small screens have no spare room to give, wide ones have nothing
     but. Nothing in the composition changed; only what is around it.

     The measure then went wider again. At 1280 the page sat in the
     middle of a laptop screen with a hand's width of ground on either
     side and read as compact — a column on a desk rather than a
     practice with reach. 1600 is chosen so that a 1440–1512pt laptop
     spends its whole width on the page (the viewport, not --maxw, is
     what clamps there) while a 24" desk display still stops short of a
     line no one can track. Air is not lost: the gutter grows with it,
     and every paragraph keeps its own ch measure, so the extra width
     goes to the grids and the diagrams, never to the prose. */
  --maxw:        1600px;
  --maxw-narrow: 860px;
  --maxw-wide:   1840px;
  --gutter:      clamp(20px, 4vw, 64px);
  /* one gap between any two sections: each pads half of it, so two
     sections side by side add up to the whole */
  --section-gap: clamp(128px, 15.5vw, 264px);
  --section-y:   calc(var(--section-gap) / 2);
  --section-y-tight: clamp(64px, 7.5vw, 112px);
  --gap:         clamp(24px, 3vw, 40px);
  --radius:      4px;
  --hair:        1px;
}

html { background: var(--ground); }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  /* the same note, applied inside the paragraph rather than around it */
  line-height: 1.72;
}

:root { --link: var(--accent); }