:root{color-scheme:light}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}

  /* Light only, deliberately. The artefact was authored light-first and carried a
     prefers-color-scheme block plus [data-theme] hooks so it could sit inside a
     host that has both modes. Here the pages are sent as a link, so a reader's OS
     setting decided which of two documents they saw and the sender could not know
     which. `color-scheme: light` also keeps form controls and scrollbars light on
     a device set to dark. */
  :root {
    color-scheme: light;
    --plane: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e;
    --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7; --ring: rgba(11,11,11,.10);
    --f2: #2a78d6; --f3: #eb6834; --f1: #898781;
    --fable: #1baf7a; --opus: #4a3aa7;
    --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b;
    --good-text: #006300;
  }

  body {
    background: var(--plane); color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    line-height: 1.5; margin: 0; padding: 0 16px 64px;
  }
  .wrap { max-width: 1080px; margin: 0 auto; }
  .wrap.narrow { max-width: 760px; }
  .mono { font-family: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", monospace; }
  a { color: var(--f2); }
  [hidden] { display: none !important; }

  /* top nav */
  nav.top {
    position: sticky; top: 0; z-index: 10; background: var(--plane);
    border-bottom: 1px solid var(--grid); margin: 0 -16px; padding: 0 16px;
  }
  nav.top .in { max-width: 1080px; margin: 0 auto; display: flex; align-items: baseline; gap: 20px; }
  nav.top .brand { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 0; margin-right: auto; }
  .navtab { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 12px 2px 10px;
    border-bottom: 2px solid transparent; }
  .navtab.active { color: var(--ink); border-bottom-color: var(--f3); }
  .navtab:hover { color: var(--ink); }
  .langswitch { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px;
    letter-spacing: .08em; color: var(--muted); padding-left: 20px;
    border-left: 1px solid var(--grid); }
  .langswitch a { color: var(--muted); text-decoration: none; }
  .langswitch a:hover { color: var(--ink); text-decoration: underline; }
  .langswitch .cur { color: var(--ink); font-weight: 700; }

  header.mast { padding: 34px 0 8px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
  .eyebrow {
    font-family: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
    margin: 0 0 6px;
  }
  header.mast h1 { font-size: clamp(26px, 4.5vw, 38px); font-weight: 650; letter-spacing: -.015em; margin: 0 0 6px; text-wrap: balance; }
  header.mast p.sub { color: var(--ink-2); margin: 0 0 12px; max-width: 76ch; }
  .cta { font-size: 13.5px; margin: 0 0 18px; }

  section { margin-top: 44px; }
  h2 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 4px; }
  .sect-note { color: var(--ink-2); font-size: 13.5px; margin: 0 0 16px; max-width: 82ch; }
  h2 .idx { color: var(--muted); font-weight: 500; font-size: 13px; vertical-align: 2px; margin-right: 8px;
    font-family: "Cascadia Code", Consolas, monospace; }

  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-top: 20px; }
  .tiles.four { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tile { background: var(--surface); border: 1px solid var(--ring); border-radius: 6px; padding: 14px 14px 12px; }
  .tile .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    font-family: "Cascadia Code", Consolas, monospace; }
  .tile .v { font-size: 24px; font-weight: 650; letter-spacing: -.01em; margin-top: 2px; }
  .tile .d { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

  .phases { display: grid; grid-template-columns: 1fr 1.15fr 1.6fr; gap: 8px; }
  @media (max-width: 720px) { .phases { grid-template-columns: 1fr; } }
  .phase { background: var(--surface); border: 1px solid var(--ring); border-radius: 6px; padding: 14px; border-top: 3px solid var(--pc); }
  .phase h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
  .phase .when { font-size: 11.5px; color: var(--muted); font-family: "Cascadia Code", Consolas, monospace; margin: 2px 0 8px; }
  .phase p { font-size: 13px; color: var(--ink-2); margin: 0; }
  .phase .pnum { float: right; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--pc); }

  .chip { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
    font-family: "Cascadia Code", Consolas, monospace; padding: 1px 7px 2px; border-radius: 999px;
    border: 1px solid currentColor; line-height: 1.5; white-space: nowrap; }
  .chip.f1 { color: var(--f1); } .chip.f2 { color: var(--f2); } .chip.f3 { color: var(--f3); }

  .scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--ring); border-radius: 6px; }
  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    font-weight: 600; padding: 10px 12px 6px; border-bottom: 1px solid var(--grid); white-space: nowrap;
    font-family: "Cascadia Code", Consolas, monospace; }
  td { padding: 8px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .sid { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
  .tstamp { font-family: "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
  .cellnote { font-size: 12px; color: var(--ink-2); }

  .bar { display: flex; align-items: center; gap: 8px; min-width: 140px; }
  .bar .track { flex: 1; height: 12px; position: relative; }
  .bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; min-width: 2px; }
  .bar .val { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .vbadge { display: inline-block; font-family: "Cascadia Code", Consolas, monospace; font-size: 10.5px; font-weight: 700;
    background: var(--ink); color: var(--plane); border-radius: 3px; padding: 0 5px; margin-right: 3px; }

  .gen { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .gcard { flex: 1 0 118px; background: var(--surface); border: 1px solid var(--ring); border-radius: 6px; padding: 10px 12px; }
  .gcard.sub { border-color: var(--good-text); }
  .gcard .gv { font-family: "Cascadia Code", Consolas, monospace; font-weight: 700; font-size: 15px; }
  .gcard .gd { font-family: "Cascadia Code", Consolas, monospace; font-size: 10.5px; color: var(--muted); margin: 1px 0 5px; }
  .gcard .gt { font-size: 12px; color: var(--ink-2); }
  .glegend { font-size: 12px; color: var(--ink-2); margin-top: 10px; }

  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
  .fig { background: var(--surface); border: 1px solid var(--ring); border-radius: 6px; padding: 16px; }
  .fig h3 { margin: 0 0 2px; font-size: 14px; font-weight: 650; }
  .fig .fnote { font-size: 12px; color: var(--ink-2); margin: 0 0 14px; }

  .hrow { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
  .hrow .hl { font-size: 12.5px; }
  .hbar { height: 14px; display: flex; align-items: center; gap: 8px; }
  .hbar .seg { height: 14px; border-radius: 0 4px 4px 0; }
  .hbar .hv { font-family: "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: var(--ink-2);
    font-variant-numeric: tabular-nums; }

  .stack { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--surface); }
  .stack .s { min-width: 3px; }
  .slegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
  .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

  .quote { border-left: 2px solid var(--axis); margin: 10px 0 0; padding: 2px 0 2px 12px; font-size: 12.5px; color: var(--ink-2); font-style: italic; }

  .st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    font-family: "Cascadia Code", Consolas, monospace; white-space: nowrap; }
  .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .st.crit { color: var(--crit); } .st.serious { color: var(--serious); }
  .st.warn { color: var(--warn); } .st.good { color: var(--good-text); }

  .foot { margin-top: 56px; border-top: 1px solid var(--grid); padding-top: 16px; font-size: 12px; color: var(--muted); }
  .foot p { max-width: 90ch; margin: 0 0 8px; }

  /* case-study view */
  .cs h1 { font-size: clamp(26px, 4.5vw, 36px); }
  .cs p.sub { font-size: 15.5px; }
  .cs section > p { color: var(--ink); font-size: 14.5px; margin: 0 0 12px; max-width: 68ch; }
  /* Justified in the reading column only. The narrow things on these pages, phase
     and regime cards, figure notes, tile captions and table cells, would open
     rivers of white space if justified, and worse in Portuguese, whose words are
     longer. hyphens:auto does the real work and picks its dictionary from the
     lang attribute on <html>, which is set per document. */
  .cs section > p,
  ul.tight li { text-align: justify; text-justify: inter-word; hyphens: auto; }
  .cs .lede { font-size: 15.5px; }
  .regimes { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 16px 0 4px; }
  .regime { background: var(--surface); border: 1px solid var(--ring); border-left: 3px solid var(--pc);
    border-radius: 6px; padding: 12px 16px; }
  .regime h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 650; }
  .regime .tag { float: right; font-family: "Cascadia Code", Consolas, monospace; font-size: 10.5px; color: var(--pc); }
  .regime p { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: none; }
  ul.tight { padding-left: 20px; margin: 8px 0 12px; }
  ul.tight li { font-size: 14px; margin-bottom: 8px; max-width: 66ch; }
  ul.tight li::marker { color: var(--muted); }
  blockquote { border-left: 2px solid var(--axis); margin: 14px 0; padding: 2px 0 2px 14px;
    font-size: 14px; color: var(--ink-2); font-style: italic; max-width: 62ch; }
  blockquote .who { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 4px;
    font-family: "Cascadia Code", Consolas, monospace; }
  .cs .fig { margin: 18px 0 4px; padding: 16px 18px; }
  .cs .fig .fnote { max-width: none; margin-bottom: 12px; }
  .treewrap { overflow-x: auto; }
  pre.tree { font-family: "Cascadia Code", "Cascadia Mono", Consolas, monospace; font-size: 12px;
    line-height: 1.75; margin: 0; color: var(--ink); }
  pre.tree .dim { color: var(--muted); }
  pre.tree .lab { color: var(--ink-2); }
  pre.tree .n { color: var(--ink); font-weight: 600; }
  .treetotal { border-top: 1px solid var(--grid); margin-top: 10px; padding-top: 10px;
    font-size: 13px; color: var(--ink-2); }
  .cs .scroll { margin: 14px 0; }
  .cs td { vertical-align: top; }