/* ==========================================================================
   The State of Artificial Intelligence — design system
   One fixed-width poster, one style, screen and print alike.
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --paper:      oklch(0.93 0.006 90);
  --card:       oklch(0.99 0.004 90);
  --card-tint:  oklch(0.965 0.004 90);
  --ink:        oklch(0.24 0.015 260);
  --ink-soft:   oklch(0.42 0.02 260);
  --ink-muted:  oklch(0.45 0.02 260);
  --ink-faint:  oklch(0.55 0.02 260);
  --hairline:   oklch(0.9 0.006 90);
  --hairline-strong: oklch(0.88 0.006 90);
  --hairline-soft: oklch(0.91 0.006 90);

  --accent-link: oklch(0.52 0.15 250);
  --accent-link-hover: oklch(0.42 0.16 250);

  --hue-labs-na: 250;
  --hue-labs-eu: 148;
  --hue-labs-asia: 28;
  --hue-inference: 300;
  --hue-tools: 72;
  --hue-features: 205;
  --hue-local: 148;
  --hue-sdk: 258;
  --hue-security-risk: 28;
  --hue-security-mitigation: 148;
  --hue-terminology: 325;
  --hue-initiatives: 178;

  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --content-max: 1440px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-link); text-decoration: none; }
a:hover { color: var(--accent-link-hover); text-decoration: underline; }

/* Available to assistive tech, invisible on the page — used where a visual
   cue (a checkmark, a coloured cell) carries meaning that needs words. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 20px 80px;
}
@media (max-width: 1439px) {
  .page { padding: 20px; }
}

.poster {
  width: var(--content-max);
  max-width: 100%;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 64px -24px rgba(0, 0, 0, .25);
  border: 1px solid var(--hairline-strong);
}

/* ---------- Title block ---------- */

.title-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  padding: 44px 56px 32px;
  border-bottom: 2px solid var(--ink);
  background: var(--card-tint);
}

.eyebrow, .kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.title-main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.7vw, 82px);
  line-height: .88;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.title-main .dek {
  margin: 0;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.title-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  border-left: 1px solid var(--hairline-strong);
  padding-left: 32px;
}

.byline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  display: inline-block;
  border-bottom: 3px solid var(--accent-link);
  padding-bottom: 3px;
}
.byline:hover { color: var(--ink); text-decoration: none; }

.title-side-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-strong);
}

.edition {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.repo-link {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.repo-link:hover { color: var(--ink); }

@media (max-width: 760px) {
  .title-block { grid-template-columns: 1fr; }
  .title-side { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline-strong); padding-top: 24px; flex-direction: row; justify-content: space-between; }
}

/* Tiny: keep "Compiled by" stacked above "Rendered at" instead of side-by-side. */
@media (max-width: 640px) {
  .title-side { flex-direction: column; justify-content: flex-start; }
}

/* ---------- Panels (shared chrome) ---------- */

.panel {
  padding: 40px 56px 44px;
  border-top: 2px solid oklch(0.58 0.16 var(--accent, 250));
  scroll-margin-top: 24px;
}
.panel--labs-and-models {
  border-top: none;
}

.panel-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 6px;
}

.panel-head-link {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  color: inherit;
  text-decoration: none;
}
.panel-head-link:hover h2 { text-decoration: underline; }

.panel-num {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  color: oklch(0.7 0.02 260);
}

.panel-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: .9;
  margin: 0;
}

.panel-rule {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  background: oklch(0.58 0.16 var(--accent, 250));
}

.panel-intro {
  margin: 12px 0 26px;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 900px;
}

@keyframes panel-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .panel {
    opacity: 0;
    animation: panel-reveal .5s ease forwards;
    animation-delay: calc(var(--panel-index, 0) * 70ms);
  }
}

/* Per-section accent hues */
.panel--inference-providers { --accent: var(--hue-inference); }
.panel--development-tools { --accent: var(--hue-tools); }
.panel--tooling-features { --accent: var(--hue-features); }
.panel--local-inference { --accent: var(--hue-local); }
.panel--sdk-application-layer { --accent: var(--hue-sdk); }
.panel--security-and-failure-modes { --accent: var(--hue-security-risk); }
.panel--security-and-failure-modes .panel-rule {
  background: linear-gradient(90deg, oklch(0.58 0.17 var(--hue-security-risk)), oklch(0.55 0.14 var(--hue-security-mitigation)));
}
.panel--terminology-and-theory { --accent: var(--hue-terminology); }
.panel--initiatives-and-experiments { --accent: var(--hue-initiatives); }
.panel--labs-and-models .panel-rule {
  background: linear-gradient(90deg, oklch(0.58 0.16 var(--hue-labs-na)), oklch(0.58 0.16 var(--hue-labs-eu)), oklch(0.6 0.17 var(--hue-labs-asia)));
}

/* ---------- 01 Labs & Models ---------- */

.lab-region { margin-bottom: 22px; }

.lab-region-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: oklch(0.58 0.16 var(--region-hue, 250));
  padding: 7px 14px;
  border-radius: 4px 4px 0 0;
}
.lab-region-name {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 17px;
  color: #fff;
}
.lab-region-tally {
  flex: 1;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
  text-transform: uppercase;
}

/* The grid itself carries the border/background instead of each card: a
   1px gap on that background reads as hairlines between cards, and the
   border always wraps the actual occupied rows/columns — including a
   trailing partial row (e.g. a region with just one lab) — since it's the
   container's edge, not a sum of per-card edges. */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lab-grid { grid-template-columns: 1fr; }
}

.lab-card {
  background: var(--card);
  padding: 13px 15px 15px;
  min-height: 192px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Ghost cells pad a region's trailing row out to a full row, so the empty
   space reads as tint rather than bare hairline color — while still getting
   a hairline on every side from the grid's own gap technique. Column count
   changes per breakpoint, so each region carries filler counts for both the
   4-col and 2-col cases; .lab-card-filler--keep-2col marks the subset still
   needed once the grid drops to 2 columns (1-col never needs any, since
   every card already fills its own row). */
.lab-card-filler { background: var(--card-tint); }
@media (max-width: 1024px) {
  .lab-card-filler:not(.lab-card-filler--keep-2col) { display: none; }
}
@media (max-width: 640px) {
  .lab-card-filler { display: none; }
}

.lab-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--card-tint);
  padding-bottom: 7px;
}
.lab-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.lab-cc {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: oklch(0.58 0.16 var(--region-hue, 250));
  letter-spacing: .08em;
}
.lab-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.lab-chip {
  display: inline-block;
  padding: 3.5px 9px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}
.lab-chip--main {
  background: var(--ink);
  color: var(--card);
  font-weight: 500;
}
.lab-chip--secondary {
  background: var(--card-tint);
  border: 1px dashed oklch(0.8 0.01 260);
  color: var(--ink-muted);
}
.lab-chip--addendum {
  background: var(--card);
  border: 1px solid oklch(0.88 0.01 260);
  color: oklch(0.38 0.02 260);
}
.lab-chip-mark { font-size: 9px; opacity: .8; margin-left: 2px; }

/* Vendor/company logo, shown when a data entry has a `key`. A missing file
   is hidden via onerror (js/app.js logoImg), degrading to the pre-existing
   text-only look rather than a broken-image icon. */
.vendor-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.lab-footnote {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.35;
}

.lab-addendum {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card-tint);
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  padding: 11px 15px;
}
.lab-addendum-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.lab-addendum-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 02 Inference Providers ---------- */

.hyperscaler-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.hyperscaler-card {
  background: var(--ink);
  color: var(--card-tint);
  border-radius: 4px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hyperscaler-head { display: flex; align-items: center; gap: 9px; }
.hyperscaler-head .vendor-logo { opacity: .85; }
.hyperscaler-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}
.hyperscaler-product {
  font-family: var(--font-mono);
  font-size: 19px;
  color: oklch(0.78 0.09 var(--hue-inference));
}

.host-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.host-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.provider-card .host-chip {
  background: oklch(0.96 0.012 var(--hue-inference));
  color: oklch(0.4 0.09 var(--hue-inference));
}
.host-chip--ellipsis { opacity: .6; }

/* Grid carries the border/background instead of each card — see .lab-grid
   for why: a 1px gap on that background reads as hairlines between cards,
   with no double-width seams. */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
@media (max-width: 1024px) {
  .provider-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .provider-grid { grid-template-columns: 1fr; }
}
.provider-card {
  background: var(--card);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provider-head {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--card-tint);
  padding-bottom: 6px;
}
.provider-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.05;
  text-transform: uppercase;
}
.provider-note { font-size: 12px; font-style: italic; color: var(--ink-faint); }

.router-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--card-tint);
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  padding: 13px 16px;
}
.router-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: oklch(0.45 0.13 var(--hue-inference));
}
.router-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.router-item { display: flex; flex-direction: column; gap: 5px; }
.router-item-head { display: flex; align-items: center; gap: 6px; }
.router-item-head .vendor-logo { width: 15px; height: 15px; }
.router-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.router-hosts { font-size: 13px; color: var(--ink-muted); line-height: 1.35; }

@media (max-width: 900px) {
  .hyperscaler-grid { grid-template-columns: 1fr; }
  .router-row { grid-template-columns: 1fr; }
  .router-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 03 Development Tools & Harnesses ---------- */

.tools-icon { display: inline-flex; color: oklch(0.52 0.11 var(--hue-tools)); }
.tools-icon svg { width: 21px; height: 21px; display: block; }

.tools-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Wide enough that no name or vendor ever wraps or clips — the widest pair
   today measures 118px including the logo, so this leaves ~40px of headroom
   for longer entries before the column would need revisiting. */
.tools-corner {
  width: 176px;
  text-align: left;
  vertical-align: bottom;
  padding: 0 16px 12px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tools-col { vertical-align: bottom; padding: 0 6px 11px; }
.tools-col-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tools-col-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: oklch(0.38 0.08 var(--hue-tools));
}

.tools-stub {
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
  padding: 6px 16px 6px 0;
}
/* Name over vendor rather than side by side: two short lines cost less width
   than one long one, and the columns get what's left. */
.tools-identity { display: flex; align-items: center; gap: 9px; }
.tools-identity .vendor-logo { width: 18px; height: 18px; }
/* Sized to the column rather than to its text, and clipped: an entry longer
   than the column reads as cut off at the edge instead of spilling into the
   matrix. The fade is the cut — a hard chop mid-glyph looks like a bug.
   Today's widest entry stops ~40px short of it. */
.tools-identity-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.tools-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: oklch(0.26 0.02 260);
}
.tools-vendor {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ink-faint);
}

.tools-cell { text-align: center; vertical-align: middle; padding: 6px 4px; }

/* The mark: a solid tile in the section accent carrying a white check.
   Solid fill is what makes a sparse matrix scannable — a bare glyph in
   the accent colour disappears against the paper. */
.tools-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 4px;
  background: oklch(0.58 0.16 var(--hue-tools));
  color: #fff;
}
.tools-mark svg { width: 13px; height: 13px; display: block; }

/* Icon + label pill; the narrow layout's stand-in for a mark in a column. */
.tools-tag {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 3px;
  background: oklch(0.96 0.03 var(--hue-tools));
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(0.36 0.08 var(--hue-tools));
  white-space: nowrap;
}
.tools-tag .tools-icon svg { width: 15px; height: 15px; }

.tools-head-row { border-bottom: 2px solid oklch(0.7 0.11 var(--hue-tools)); }

/* Wide: banded rows carry the horizontal scan, so no row rules are needed —
   one vertical rule fences the stub column off from the matrix. */
@media (min-width: 861px) {
  .tools-row:nth-child(even) { background: oklch(0.977 0.008 var(--hue-tools)); }
  .tools-row:hover { background: oklch(0.962 0.019 var(--hue-tools)); }
  .tools-corner,
  .tools-stub { border-right: 1px solid var(--hairline-soft); }
}

/* Narrow: the header row goes to assistive tech only and each row becomes its
   own block — tool, then the forms it comes in, as tags. Same DOM, so nothing
   scrolls sideways and print follows the viewport. */
@media (max-width: 860px) {
  .tools-table,
  .tools-matrix tbody,
  .tools-row,
  .tools-stub { display: block; }
  .tools-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tools-row { padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); }
  .tools-row:first-child { border-top: 1px solid var(--hairline-soft); }
  .tools-stub { padding: 0 0 7px; }
  .tools-cell { display: none; }
  .tools-cell.is-on {
    display: inline-block;
    padding: 0 6px 0 0;
    margin-bottom: 4px;
  }
  .tools-mark { display: none; }
  .tools-tag { display: inline-flex; }
}

/* ---------- 04 Tooling Features ---------- */

.features-wrap { display: flex; flex-direction: column; border-top: 1px solid var(--hairline-soft); }

.feature-row {
  display: grid;
  grid-template-columns: 46px 250px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.feature-num { align-self: center; font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1; color: oklch(0.55 0.13 var(--hue-features)); }
.feature-term {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.feature-body { display: flex; flex-direction: column; gap: 4px; }
.feature-def { font-size: 16px; line-height: 1.4; color: oklch(0.28 0.02 260); text-wrap: pretty; }
.feature-footnote { font-size: 12.5px; font-style: italic; line-height: 1.4; color: var(--ink-faint); text-wrap: pretty; }

@media (max-width: 760px) {
  .feature-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "num term" "body body";
    gap: 4px 10px;
  }
  .feature-num { grid-area: num; }
  .feature-term { grid-area: term; }
  .feature-body { grid-area: body; }
}

/* ---------- 05 Local Inference ---------- */

.local-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }

.lane-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lane-card {
  border: 1px solid oklch(0.88 0.03 var(--hue-local));
  border-radius: 4px;
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lane-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: oklch(0.38 0.1 var(--hue-local));
}
.lane-items { display: flex; flex-wrap: wrap; gap: 5px; }
.lane-chip {
  padding: 3.5px 9px;
  border-radius: 3px;
  background: oklch(0.96 0.02 var(--hue-local));
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: oklch(0.32 0.05 var(--hue-local));
  white-space: nowrap;
}

.local-notes {
  border-left: 1px solid var(--hairline-soft);
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.local-notes-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.local-note {
  font-size: 13px;
  line-height: 1.45;
  color: oklch(0.34 0.02 260);
  padding-bottom: 12px;
  border-bottom: 1px dotted oklch(0.85 0.01 260);
  text-wrap: pretty;
}
.local-note:last-child { border-bottom: none; padding-bottom: 0; }

@media (max-width: 900px) {
  .local-wrap { grid-template-columns: 1fr; }
  .local-notes { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline-soft); padding-top: 16px; }
}
@media (max-width: 600px) {
  .lane-grid { grid-template-columns: 1fr; }
}

/* ---------- 06 SDK & Application Layer ---------- */

.sdk-wrap { display: flex; flex-direction: column; gap: 8px; }
.sdk-layer {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 22px;
  align-items: center;
  background: oklch(0.97 0.012 var(--hue-sdk));
  border: 1px solid oklch(0.9 0.03 var(--hue-sdk));
  border-radius: 4px;
  padding: 12px 16px;
}
.sdk-layer-head { display: flex; flex-direction: column; gap: 2px; }
.sdk-layer-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.05;
  text-transform: uppercase;
  color: oklch(0.34 0.11 var(--hue-sdk));
}
.sdk-layer-tier { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: oklch(0.55 0.06 var(--hue-sdk)); }
.sdk-layer-items { display: flex; flex-wrap: wrap; gap: 6px; }
.sdk-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--card);
  border: 1px solid oklch(0.88 0.03 var(--hue-sdk));
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: oklch(0.3 0.05 var(--hue-sdk));
  max-width: 100%;
}

@media (max-width: 700px) {
  .sdk-layer { grid-template-columns: 1fr; }
}

/* ---------- 07 Security & Failure Modes ---------- */

.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.sec-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sec-col-head--risk { color: oklch(0.42 0.15 var(--hue-security-risk)); }
.sec-col-head--mitigation { color: oklch(0.38 0.12 var(--hue-security-mitigation)); }
.sec-dot { width: 10px; height: 10px; border-radius: 2px; }
.sec-col-head--risk .sec-dot { background: oklch(0.58 0.17 var(--hue-security-risk)); }
.sec-col-head--mitigation .sec-dot { background: oklch(0.55 0.14 var(--hue-security-mitigation)); }

.sec-list { display: flex; flex-direction: column; gap: 8px; }
.sec-card { border-radius: 4px; padding: 11px 14px; }
.sec-card--risk { border: 1px solid oklch(0.88 0.04 var(--hue-security-risk)); background: oklch(0.985 0.008 var(--hue-security-risk)); }
.sec-card--mitigation { border: 1px solid oklch(0.88 0.04 var(--hue-security-mitigation)); background: oklch(0.985 0.008 var(--hue-security-mitigation)); }
.sec-term { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.sec-card--risk .sec-term { color: oklch(0.36 0.13 var(--hue-security-risk)); }
.sec-card--mitigation .sec-term { color: oklch(0.32 0.11 var(--hue-security-mitigation)); }
.sec-def { font-size: 12.5px; line-height: 1.45; color: oklch(0.34 0.02 260); text-wrap: pretty; }

@media (max-width: 760px) {
  .sec-grid { grid-template-columns: 1fr; }
}

/* ---------- 08 Terminology & Theory ---------- */

.term-wrap { columns: 4; column-gap: 22px; }
.term-category {
  break-inside: avoid;
  border-top: 3px solid oklch(0.55 0.15 var(--hue-terminology));
  padding-top: 9px;
  margin-bottom: 22px;
}
.term-category-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 9px;
  color: oklch(0.36 0.12 var(--hue-terminology));
}
.term-node { margin-bottom: 7px; }
.term-name { font-size: 13.5px; font-weight: 600; color: oklch(0.26 0.015 260); }
.term-child {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  padding-left: 11px;
  border-left: 1px solid oklch(0.88 0.03 var(--hue-terminology));
  margin-top: 3px;
  line-height: 1.35;
}

@media (max-width: 1100px) { .term-wrap { columns: 3; } }
@media (max-width: 800px) { .term-wrap { columns: 2; } }
@media (max-width: 500px) { .term-wrap { columns: 1; } }

/* ---------- 09 Initiatives & Experiments ---------- */

.init-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.init-card {
  border: 1px solid oklch(0.88 0.03 var(--hue-initiatives));
  background: oklch(0.985 0.008 var(--hue-initiatives));
  border-radius: 4px;
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.init-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.05;
  text-transform: uppercase;
  color: oklch(0.34 0.09 var(--hue-initiatives));
}
.init-def { font-size: 12.5px; line-height: 1.45; color: oklch(0.34 0.02 260); text-wrap: pretty; }

@media (max-width: 1000px) { .init-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .init-grid { grid-template-columns: 1fr; } }

/* ---------- Colophon ---------- */

.colophon {
  border-top: 2px solid var(--ink);
  padding: 22px 56px 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--card-tint);
}
.colophon-main, .colophon-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.colophon-links { align-items: flex-end; text-align: right; }
.colophon-title { font-weight: 600; color: var(--ink); }
.colophon a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.colophon a:hover { text-decoration: underline; }
.colophon-byline { font-weight: 600; color: var(--ink); }

@media (max-width: 640px) {
  .colophon { flex-direction: column; }
  .colophon-links { align-items: flex-start; text-align: left; }
}

/* ---------- General responsive fallback ---------- */

@media (max-width: 640px) {
  .title-block, .panel { padding-top: 12px; padding-left: 22px; padding-right: 22px; gap: 22px; }
  .colophon { padding-left: 22px; padding-right: 22px; }
}

/* ---------- Tiniest viewport ---------- */

@media (max-width: 400px) {
  .page { padding: 5px; }
  .title-block { padding-top: 10px; }
  .lab-card { min-height: 0; }
}

/* ---------- Print ---------- */

@media print {
  @page { margin: 10mm; }

  html, body { background: #fff; }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page { padding: 0; }
  .poster { box-shadow: none; border: none; background: #fff; }

  .panel { opacity: 1 !important; transform: none !important; transition: none !important; }

  .panel { break-inside: avoid; page-break-inside: avoid; }
  .lab-region { break-inside: avoid; }
  .lab-card { break-inside: avoid; }

  a[href]::after { content: ""; }
}