/* Galt Industry skin for /thoughts.
 *
 * Same job as /lab/report-skin.css, against a different set of token names.
 * The two are kept separate rather than merged so a change to one section
 * cannot break the other; the palette values below are deliberately identical
 * to the lab skin's, which is what makes the two sections read as one house.
 *
 * Linked at the END of the document's <body>, after its own <style> blocks,
 * because several of its rules live inside `@media (prefers-color-scheme:
 * dark)` and media queries add no specificity. Only source order settles it.
 *
 * The selector list matches every shape the document uses to set its tokens,
 * including the dark-mode variants, at equal or higher specificity.
 */

:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: light;

  /* Chrome, remapped onto the site's paper and ink. */
  --ground: #f2f1ec;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --ink: #131416;
  --ink-2: #4a4a47;
  --muted: #777770;
  --rule: #d6d3ca;
  --rule-soft: #e4e1d8;

  /* Copper. The site's #d77735 is only ~2.9:1 on white, so text takes the
     darker tone and the brighter one is kept for fills and large type. */
  --accent: #b85822;
  --accent-2: #d77735;
  --accent-soft: #f6e6d8;

  --shadow: 0 1px 2px #14140f0f, 0 12px 32px -18px #14140f24;

  /* The forecast-skill piece uses the 15 September lab token names. --brick
     is its accent (eyebrow, links, figure-caption rule, finding rail), so it
     takes copper. --line and --fig are page furniture. --green and --amber
     are statuses on the finding cards and must not flatten into copper. */
  --brick: #b85822;
  --line: #d6d3ca;
  --fig: #ffffff;
  --green: #2f7d52;
  --amber: #a3690a;

  /* Series colours are NOT remapped. In the dumbbell chart --eq is listed
     equity and --prop is residential property; recolouring either to brand
     copper would erase the distinction the chart exists to show. The same
     goes for --flag, which marks caveated rows. */
}

/* Body copy is serif and headings are Arial, matching the lab reports, so the
   two sections read as one series. Monospace is left alone: it is carrying
   the tabular figures and column labels, and is doing real work. */
body {
  background: #f2f1ec;
  color: #131416;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

h1,
h2,
h3,
h4,
h2.sec,
.callout h3,
.note h3,
.vcard h4 {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -0.01em;
}

/* The display serif carried the numerals in the stat tiles and callouts.
   Arial's tabular figures read better against the site's type anyway. */
.stat .v,
.bigline .b,
.kpi .v {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

/* The deck and the closing kicker are prose set in the document's display
   serif. Pointing them at the body stack keeps the page to two faces rather
   than three, since the headings above are already Arial. */
.deck,
.argument .kicker {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

/* The masthead's emphasised words used the teal accent. */
h1 em,
.deck em {
  color: #b85822;
}

/* The kicker's emphasis borrowed --prop, which is the chart's colour for
   residential property. Here it is ordinary prose emphasis, so it takes
   copper without disturbing the token the chart depends on. */
.argument .kicker em {
  color: #b85822;
}

/* Contents rail, same job as the NZ energy compare pages. Active state is
   copper, not the energy-section blue. */
.toc-label,
.toc a {
  font-family: Arial, Helvetica, sans-serif;
}
.toc a.is-active {
  color: #b85822;
  border-left-color: #b85822;
  background: #f6e6d8;
}

/* Google Fonts are still fetched by the document itself. Nothing here depends
   on them arriving, since every rule above names a system stack. */

/* The opening argument capped its measure at 74ch, and the kicker at 60ch,
   which left a band of empty card to the right. Both now run the full width
   of the box. Note this puts the measure past 150 characters on a wide
   desktop, the same trade the site's article pages already make. */
.argument p,
.argument .kicker {
  max-width: none;
}

/* Lifting the cap was not enough on its own. The kicker also carries
   `text-wrap: balance`, which asks the browser to even out line lengths
   across the block; it will happily leave the right-hand side short even
   when there is width available. Normal wrapping fills the box. */
.argument .kicker {
  text-wrap: wrap;
}