/* AT6012 nine-square learning module, shared chrome.
   Extracted 30 August 2026 from infrared.city/index.html, which is where this
   visual language was worked out. Layout, the type scale and the palette live
   here so a page carries only its content, per the design-in-the-template rule.

   infrared.city still carries its own copy inline. Point it at this file when
   somebody next has reason to touch that page, and delete the inline block
   then. Until that happens the two are the same rules in two places, which is
   the drift risk this file exists to close.

   The coordinate colours are load-bearing: position in the grid carries
   meaning, so north, south, west, east and centre are not decoration. */

  :root{
    --ink:#101010; --paper:#FAFAF7; --muted:#444444; --faint:#888888; --line:#E6E6E6;
    --navy:#0f1b2a;            /* chrome ink, section grounds */
    --navy-2:#16263a;
    --orange:#e67e22;          /* chrome accent, the live thread */
    --peach:#ffd9b3;
    /* nine-square coordinate colours (position carries meaning) */
    --north:#3b3f8f;           /* principle band, indigo (abstract) */
    --south:#b07a16;           /* praxis band, amber (concrete) */
    --west:#2c6e7a;            /* definitions / setup, teal */
    --east:#a23b2e;            /* tools / metrics, rust */
    --centre:#0f1b2a;          /* the live probe, the nuclear vertex */
    --good:#1e6b3a; --bad:#a1242e;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --maxw:1100px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;
    font-size:16px;-webkit-font-smoothing:antialiased}
  a{color:var(--east)}
  h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em}
  code,kbd,pre{font-family:var(--mono)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .eyebrow{font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--orange)}

  /* ---------- hero ---------- */
  .hero{position:relative;background:var(--navy);color:#eef2f6;overflow:hidden;
    padding:64px 0 56px;border-bottom:3px solid var(--orange)}
  .hero .field{position:absolute;inset:0;opacity:.5;pointer-events:none}
  .hero .wrap{position:relative;z-index:2}
  .hero h1{font-size:clamp(30px,5vw,52px);font-weight:800;margin:14px 0 14px;max-width:18ch;color:#fff}
  .hero h1 .hot{color:var(--orange)}
  .hero .lede{font-size:clamp(17px,2.3vw,20px);max-width:60ch;color:#c7d3df;margin:0 0 10px}
  .hero .finding{margin:22px 0 26px;padding:14px 18px;border-left:4px solid var(--orange);
    background:rgba(255,255,255,.05);max-width:64ch;border-radius:0 8px 8px 0}
  .hero .finding b{color:#fff}
  .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
    padding:12px 20px;border-radius:10px;text-decoration:none;border:2px solid transparent;transition:.15s}
  .btn.primary{background:var(--orange);color:var(--navy)}
  .btn.primary:hover{filter:brightness(1.08)}
  .btn.ghost{border-color:#3a4a5e;color:#eef2f6}
  .btn.ghost:hover{border-color:var(--peach);color:#fff}
  .hero .meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:#9fb0c2}
  .hero .meta b{color:#eef2f6}

  /* ---------- section frame ---------- */
  section{padding:54px 0}
  .section-head{max-width:64ch;margin:0 auto 30px;text-align:center}
  .section-head h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin:10px 0 8px}
  .section-head p{color:var(--muted);font-size:17px;margin:0}

  /* ---------- the nine-square ---------- */
  .ns-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--muted);margin:0 auto 22px;max-width:760px}
  .ns-legend span{display:inline-flex;align-items:center;gap:6px}
  .ns-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
  .axis-note{text-align:center;color:var(--faint);font-size:12.5px;margin:0 0 24px;letter-spacing:.02em}

  .grid{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:600px){.grid{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}}

  .cell{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:18px 18px 16px;text-decoration:none;color:var(--ink);
    box-shadow:0 1px 0 rgba(16,16,16,.03);transition:transform .14s, box-shadow .14s, border-color .14s}
  .cell:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,16,16,.10);border-color:#cfd8e2}
  .cell .tag{font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:#fff;
    align-self:flex-start;padding:4px 9px;border-radius:999px;margin-bottom:11px}
  .cell .coord{position:absolute;top:14px;right:15px;font:700 12px var(--mono);color:var(--faint)}
  .cell h3{font-size:18.5px;margin:2px 0 7px;font-weight:750}
  .cell p{margin:0 0 8px;font-size:14.5px;color:var(--muted)}
  .cell .plain{font-size:13px;color:var(--ink);background:#f4f6f9;border-radius:8px;padding:8px 11px;margin-top:auto}
  .cell .plain b{color:var(--north)}
  /* row tints */
  .r-n .tag{background:var(--north)} .r-n{border-top:3px solid var(--north)}
  .r-s .tag{background:var(--south)} .r-s{border-top:3px solid var(--south)}
  .c-w .tag{background:var(--west)}
  .c-e .tag{background:var(--east)}
  .c-mid .tag{background:var(--centre)} .c-mid{border:2px solid var(--centre);background:#fbfcfe}
  .c-mid h3::after{content:" ●";color:var(--orange)}

  /* ---------- lesson body ---------- */
  .lesson{border-top:1px solid var(--line);padding-top:30px;margin-top:8px}
  .step{display:grid;grid-template-columns:1fr;gap:18px;padding:30px 0;border-bottom:1px solid var(--line)}
  @media(min-width:860px){.step{grid-template-columns:300px 1fr;gap:34px}}
  .step:last-child{border-bottom:0}
  .step .side{position:relative}
  @media(min-width:860px){.step .side{position:sticky;top:84px;align-self:start}}
  .step .num{font:800 13px/1 var(--mono);color:#fff;background:var(--centre);padding:5px 10px;border-radius:7px;display:inline-block}
  .step .num.n{background:var(--north)} .step .num.s{background:var(--south)}
  .step .num.w{background:var(--west)} .step .num.e{background:var(--east)}
  .step h3{font-size:22px;margin:12px 0 8px}
  .step .side p{font-size:14px;color:var(--muted);margin:0 0 8px}
  .step .cites{font-size:12px;color:var(--faint)}
  .step .cites b{color:var(--muted)}
  .body p{margin:0 0 14px}
  .body ul{margin:0 0 14px;padding-left:20px}.body li{margin:5px 0}
  .body h4{font-size:15px;margin:18px 0 8px;color:var(--navy)}

  pre{background:var(--navy);color:#e6edf5;border-radius:11px;padding:16px 18px;overflow-x:auto;
    font-size:13px;line-height:1.62;margin:0 0 12px;border:1px solid #20303f}
  pre .c{color:#7e93a8}      /* comment */
  pre .k{color:#ffcaa3}      /* keyword/name */
  pre .s{color:#9fe0b0}      /* string */
  pre .n{color:#e6c07b}      /* number */
  .codecard{margin:12px 0}
  .codecard .bar{display:flex;align-items:center;gap:10px;background:#0b1622;border:1px solid #20303f;border-bottom:0;
    border-radius:11px 11px 0 0;padding:8px 14px;font:600 12px var(--mono);color:#9fb0c2}
  .codecard .bar .pill{margin-left:auto;font:700 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
    padding:4px 9px;border-radius:999px}
  .pill.free{background:#163a26;color:#7fe0a3}
  .pill.bill{background:#3a1f16;color:#ffb38a}
  .codecard pre{border-radius:0 0 11px 11px;margin:0}
  .callout{border-left:4px solid var(--orange);background:#fff7ef;border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 14px;font-size:14.5px}
  .callout.warn{border-color:var(--bad);background:#fbeeec}
  .callout b{color:var(--navy)}

  /* UTCI band strip */
  .bands{display:flex;border-radius:9px;overflow:hidden;margin:6px 0 12px;border:1px solid var(--line);font-size:11px}
  .bands div{flex:1;padding:9px 6px;text-align:center;color:#fff;font-weight:600;line-height:1.25}
  .bands .lo{flex:.6}
  .b1{background:#3a5a9e}.b2{background:#2c6e7a}.b3{background:#1e6b3a}
  .b4{background:#caa23a;color:#1b2733}.b5{background:#e67e22}.b6{background:#c0392b}.b7{background:#7a1f17}

  /* results table */
  table.res{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0 10px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  table.res th,table.res td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
  table.res thead th{background:var(--navy);color:#eef2f6;font-size:13px;letter-spacing:.02em}
  table.res tbody tr:last-child td{border-bottom:0}
  table.res .worse{color:var(--bad);font-weight:700}
  table.res .held{color:var(--good);font-weight:700}
  .verdict{font-size:13px;color:var(--muted)}

  .deeper{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
  @media(min-width:680px){.deeper{grid-template-columns:1fr 1fr}}
  .dlink{display:block;border:1px solid var(--line);border-radius:11px;padding:16px 18px;text-decoration:none;color:var(--ink);background:#fff;transition:.14s}
  .dlink:hover{border-color:var(--orange);transform:translateY(-2px)}
  .dlink b{display:block;font-size:16px;margin-bottom:3px;color:var(--navy)}
  .dlink span{font-size:13.5px;color:var(--muted)}

  .endnote{max-width:64ch;margin:0 auto;color:var(--muted);font-size:14px}
  .endnote h4{color:var(--navy);margin:18px 0 6px}