/* Abdullah Akbar Khalid: shared styles. Dark is the default; light is opt-in via [data-theme="light"]. */

:root{
  --paper:#131418;
  --paper-2:#0E0F12;
  --ink:#EDEBE5;
  --red:#FF5A38;
  --rule:#2B2D34;
  --muted:#9B9A94;
  --card:#191B21;
  --card-2:#20232A;
  --band-a:#4FBF8B;
  --band-c:#E0A445;
  --shadow:0 1px 0 rgba(255,255,255,.03);
  --serif:"IBM Plex Serif",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --paper:#FBFAF7;
  --paper-2:#F2F1EC;
  --ink:#17181A;
  --red:#EC3013;
  --rule:#E3E1DA;
  --muted:#6E6C66;
  --card:#FFFFFE;
  --card-2:#F7F6F2;
  --band-a:#1E7A52;
  --band-c:#B4700F;
  --shadow:0 1px 2px rgba(0,0,0,.03);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;
}
.wrap{max-width:47.5rem;margin:0 auto;padding:0 1.5rem}
.wrap-wide{max-width:58rem;margin:0 auto;padding:0 1.5rem}
a{color:inherit}

/* ---------- masthead ---------- */
header.masthead{
  border-bottom:2px solid var(--ink);padding:1.1rem 0;
  position:sticky;top:0;z-index:50;background:var(--paper);
  transition:background .4s ease,border-color .4s ease;
}
.masthead-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.masthead h1,.masthead .brand{
  font-family:var(--mono);font-weight:600;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
}
.masthead nav{font-family:var(--mono);font-size:.8125rem;display:flex;gap:1.25rem;align-items:center}
.masthead nav a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s,color .2s}
.masthead nav a:hover{border-bottom-color:var(--red);color:var(--red)}
.masthead nav a:focus-visible,.masthead .brand:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* theme toggle */
.theme-toggle{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--card);color:var(--muted);border:1px solid var(--rule);
  border-radius:2px;padding:.3rem .55rem;cursor:pointer;display:inline-flex;gap:.45rem;align-items:center;
  transition:border-color .2s,color .2s,background .3s;
}
.theme-toggle:hover{border-color:var(--red);color:var(--red)}
.theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.theme-toggle .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--red);flex:none;transition:transform .3s}
.theme-toggle:hover .dot{transform:scale(1.35)}

/* ---------- thesis ---------- */
.thesis{padding:4.5rem 0 3.75rem;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.thesis h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5.4vw,3.125rem);
  line-height:1.16;letter-spacing:-.01em;margin:1.1rem 0 1.6rem;max-width:17em;
}
.thesis h2 em{font-style:italic}
.thesis p{max-width:36em}
.thesis p + p{margin-top:.9rem}
.thesis .method{color:var(--muted);font-size:.9375rem;max-width:38em}
.thesis .repos{
  font-family:var(--mono);font-size:.8125rem;color:var(--muted);max-width:44em;line-height:2.1;
}
.thesis .repos a{
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:1px;transition:border-color .2s,color .2s;
}
.thesis .repos a:hover{color:var(--red);border-bottom-color:var(--red)}
.thesis .repos a:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}

/* ---------- citations ---------- */
a.cite{
  font-family:var(--mono);font-size:.72em;color:var(--red);text-decoration:none;
  vertical-align:super;line-height:0;font-weight:500;padding:0 .1em;
}
a.cite:hover{text-decoration:underline}
a.cite:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- exhibits ---------- */
.exhibit{padding:3.4rem 0;border-bottom:1px solid var(--rule)}
.ex-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.ex-label{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.ex-status{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.exhibit h3{font-family:var(--serif);font-weight:600;font-size:1.75rem;line-height:1.2;margin-bottom:.9rem;letter-spacing:-.005em}
.exhibit h3 a{text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.exhibit h3 a:hover{border-bottom-color:var(--red)}
.pitch{max-width:38em}
.pitch + .pitch{margin-top:.8rem}
.tags{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.tags span{
  font-family:var(--mono);font-size:.75rem;color:var(--muted);border:1px solid var(--rule);
  padding:.18rem .55rem;border-radius:2px;background:var(--card);transition:border-color .2s,color .2s;
}
.tags span:hover{border-color:var(--red);color:var(--red)}

/* the "read the full case" affordance */
.more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-family:var(--mono);font-size:.8125rem;text-decoration:none;color:var(--red);
  border:1px solid var(--rule);border-radius:2px;padding:.45rem .8rem;background:var(--card);
  transition:border-color .2s,transform .2s,background .3s;
}
.more:hover{border-color:var(--red);transform:translateX(3px)}
.more:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.more .arrow{transition:transform .2s}
.more:hover .arrow{transform:translateX(3px)}

/* ---------- shared visual frame ---------- */
.visual{
  margin-top:1.7rem;border:1px solid var(--rule);border-radius:3px;background:var(--card);
  overflow-x:auto;box-shadow:var(--shadow);transition:background .3s,border-color .3s;
}
.visual-caption{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:.55rem .9rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem;
}
.visual-caption .hint{color:var(--red);opacity:.75;font-size:.68rem;white-space:nowrap}

/* ---------- tooltips ----------
   Rendered into a single floating node on <body> by app.js, because .visual
   uses overflow-x:auto for scrollable diagrams and that clips absolute children. */
[data-tip]{cursor:help;outline:none;scroll-margin-top:6rem}
[data-tip]:focus-visible{box-shadow:0 0 0 2px var(--red);border-radius:2px}
.tip{
  position:fixed;top:0;left:0;z-index:9999;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:.78rem;line-height:1.5;font-weight:400;
  letter-spacing:0;text-transform:none;text-align:left;
  padding:.6rem .75rem;border-radius:4px;max-width:min(22rem,calc(100vw - 2rem));
  opacity:0;pointer-events:none;transform:translateY(5px);
  transition:opacity .15s ease,transform .15s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.tip.is-shown{opacity:1;transform:none}

/* ---------- A: funnel ---------- */
.funnel{padding:1.2rem .9rem 1.3rem;font-family:var(--mono);font-size:.8125rem}
.funnel .stage{display:flex;align-items:center;gap:.8rem;padding:.32rem 0;border-radius:2px;transition:background .2s}
.funnel .stage:hover{background:var(--card-2)}
.funnel .bar{
  height:.9rem;background:var(--ink);border-radius:1px;flex:0 1 auto;min-width:.35rem;opacity:.9;
  width:0;transition:width 1s cubic-bezier(.2,.7,.2,1);
}
.funnel .bar{width:var(--w)}
.js .funnel .bar{width:0}
.js .visual.is-in .funnel .bar{width:var(--w)}
.funnel .stage:last-child .bar{background:var(--red);opacity:1}
.funnel .lbl{color:var(--muted);white-space:nowrap;flex:none}
.funnel .stage:last-child .lbl{color:var(--ink);font-weight:600}

/* ---------- B: band comparison ---------- */
.bands{display:grid;grid-template-columns:1fr 1fr;font-family:var(--mono);font-size:.8125rem}
.band{padding:1.1rem 1rem 1.2rem;transition:background .2s}
.band:hover{background:var(--card-2)}
.band + .band{border-left:1px solid var(--rule)}
.band .co{font-weight:600;font-size:.8125rem;letter-spacing:.02em;min-height:2.4em}
.band .fact{color:var(--muted);margin-top:.35rem;font-size:.75rem;line-height:1.55}
.band .grade{margin-top:.9rem;font-size:1.5rem;font-weight:600}
.band.bad .grade{color:var(--band-c)}
.band.good .grade{color:var(--band-a)}
.band .verdict{font-size:.75rem;margin-top:.15rem;color:var(--muted)}
@media (max-width:540px){.bands{grid-template-columns:1fr}.band + .band{border-left:0;border-top:1px solid var(--rule)}}

/* ---------- C: terminal ---------- */
.term{
  background:var(--paper-2);color:#E8E6DF;font-family:var(--mono);font-size:.8125rem;line-height:1.7;
  padding:1.1rem 1.2rem;white-space:pre;border-radius:0 0 3px 3px;
}
:root[data-theme="light"] .term{background:#17181A}
.term .ok{color:#7CC7A1}
.term .warn{color:#E8A94E}
.term .dim{color:#8B8A85}
.term .row{display:block;border-radius:2px;transition:background .2s}
.term .row:hover{background:rgba(255,255,255,.06)}

/* ---------- D: status grid ---------- */
.grid-status{display:grid;grid-template-columns:repeat(3,1fr);font-family:var(--mono);font-size:.78rem}
.cell{padding:.85rem 1rem;border-top:1px solid var(--rule);display:flex;align-items:center;gap:.55rem;transition:background .2s}
.cell:hover{background:var(--card-2)}
.cell:nth-child(-n+3){border-top:0}
.cell:not(:nth-child(3n+1)){border-left:1px solid var(--rule)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--band-a);flex:none}
.cell.hot .dot{background:var(--red);animation:pulse 2.4s ease-in-out infinite}
.cell.hot strong{color:var(--red)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.cell.hot .dot{animation:none}}
@media (max-width:540px){
  .grid-status{grid-template-columns:1fr 1fr}
  .cell:not(:nth-child(3n+1)){border-left:0}
  .cell:not(:nth-child(2n+1)){border-left:1px solid var(--rule)}
  .cell:nth-child(3){border-top:1px solid var(--rule)}
}

/* ---------- E: relay ---------- */
.relay{padding:1.2rem 1rem 1.3rem;font-family:var(--mono);font-size:.78rem;display:flex;align-items:stretch;min-width:34rem}
.relay .col{flex:1;display:flex;flex-direction:column;gap:.45rem;justify-content:center}
.relay .node{
  border:1px solid var(--rule);background:var(--paper);padding:.4rem .6rem;border-radius:2px;text-align:center;
  transition:border-color .2s,transform .2s;
}
.relay .node:hover{border-color:var(--red);transform:translateY(-1px)}
.relay .core{border:1.5px solid var(--ink);font-weight:600;padding:.8rem .6rem}
.relay .core small{display:block;font-weight:400;color:var(--muted);margin-top:.25rem;font-size:.7rem}
.relay .arrows{flex:none;display:flex;align-items:center;color:var(--muted);padding:0 .7rem;font-size:.9rem}
.relay .out .node{border-color:var(--red);color:var(--red);font-weight:600}

/* ---------- tree ---------- */
.tree{padding:1.15rem 1rem 1.25rem;font-family:var(--mono);font-size:.8125rem;min-width:30rem}
.tree .row{display:flex;gap:1.2rem;align-items:baseline;padding:.26rem 0;border-radius:2px;transition:background .2s}
.tree .row:hover{background:var(--card-2)}
.tree .path{color:var(--ink);white-space:pre;flex:none;width:14.5rem}
.tree .ob{color:var(--muted);font-size:.75rem}
.tree .ob b{color:var(--red);font-weight:500}
.tree .root .path{font-weight:600}
.tree .crown{background:color-mix(in srgb,var(--red) 9%,transparent);margin:0 -1rem;padding-left:1rem;padding-right:1rem}

/* ---------- architecture flow ---------- */
.flow{padding:1.1rem 1rem 1.2rem;font-family:var(--mono);font-size:.75rem;min-width:37rem}
.lane{display:flex;align-items:stretch;margin-bottom:.5rem}
.lane:last-child{margin-bottom:0}
.lane-tag{
  font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
  width:5.4rem;flex:none;display:flex;align-items:center;line-height:1.35;
}
.chain{display:flex;align-items:stretch;flex:1}
.nd{
  border:1px solid var(--rule);background:var(--paper);border-radius:2px;padding:.45rem .5rem;flex:1;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  transition:border-color .2s,transform .2s,background .2s;
}
.nd:hover{border-color:var(--red);transform:translateY(-2px);background:var(--card-2)}
.nd b{font-size:.72rem;font-weight:600;line-height:1.25}
.nd small{color:var(--muted);font-size:.65rem;display:block;margin-top:.2rem;line-height:1.4}
.ar{flex:none;color:var(--muted);display:flex;align-items:center;padding:0 .38rem}
.nd.gate{border:1.5px solid var(--red)}
.nd.gate b{color:var(--red)}
.nd.io{background:var(--ink);border-color:var(--ink)}
.nd.io b{color:var(--paper)}
.nd.io small{color:var(--paper);opacity:.72}
.nd.out{border:1.5px solid var(--ink);background:color-mix(in srgb,var(--red) 8%,transparent)}

/* ---------- references ---------- */
.refs{padding:3.2rem 0 2.5rem}
.refs h4{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:1.3rem}
.refs ol{list-style:none;font-family:var(--mono);font-size:.8125rem;line-height:2.1}
.refs li{display:flex;gap:1rem}
.refs .n{color:var(--muted);flex:none;width:1.6rem}
.refs a{text-decoration:none;border-bottom:1px solid var(--rule);word-break:break-all;transition:border-color .2s}
.refs a:hover{border-bottom-color:var(--red)}
.refs .note{color:var(--muted)}

/* ---------- case pages ---------- */
.case-hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--rule)}
.case-hero h1{font-family:var(--serif);font-size:clamp(2rem,4.6vw,2.9rem);font-weight:600;line-height:1.12;margin:.9rem 0 1rem;letter-spacing:-.01em}
.case-hero .lede{font-size:1.15rem;max-width:40em;color:var(--ink)}
.case-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem;font-family:var(--mono);font-size:.78rem}
.case-meta div{display:flex;flex-direction:column;gap:.2rem}
.case-meta dt{color:var(--red);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem}
.case-meta dd{color:var(--ink)}
.case-meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.case-meta a:hover{border-bottom-color:var(--red)}

.sec{padding:2.8rem 0;border-bottom:1px solid var(--rule)}
.sec:last-of-type{border-bottom:0}
.sec h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:1rem;line-height:1.25}
.sec h3{font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:1.8rem 0 .7rem}
.sec p{max-width:38em}
.sec p + p{margin-top:.85rem}
.sec ul{margin:.9rem 0 0 1.1rem;max-width:38em}
.sec li{margin-bottom:.5rem}
.sec li::marker{color:var(--red)}

.decision{
  border-left:2px solid var(--red);background:var(--card);padding:.9rem 1.1rem;margin:1.2rem 0;
  border-radius:0 3px 3px 0;max-width:40em;
}
.decision b{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:.35rem}

.backlink{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.8125rem;
  text-decoration:none;color:var(--muted);margin-top:.4rem;transition:color .2s,transform .2s;
}
.backlink:hover{color:var(--red);transform:translateX(-3px)}

/* ---------- footer ---------- */
footer.site{border-top:2px solid var(--ink);padding:1.3rem 0 3.5rem;margin-top:1rem}
footer.site .wrap,footer.site .wrap-wide{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
footer.site a{text-decoration:none;border-bottom:1px solid var(--rule)}
footer.site a:hover{border-bottom-color:var(--red)}

/* ---------- narrow screens ----------
   The diagrams are laid out as horizontal chains, which needs a min-width and
   therefore a sideways drag on a phone. Below 640px they become vertical
   stacks instead, so the whole figure fits the screen and reads top to bottom.
   The arrows rotate to match the new reading direction. */
@media (max-width:640px){

  /* architecture flows: lane label becomes a heading, nodes stack under it */
  .visual{overflow:visible}
  .flow{min-width:0;padding:.9rem .8rem 1rem;font-size:.78rem}
  .lane{flex-direction:column;margin-bottom:1.3rem}
  .lane:last-child{margin-bottom:0}
  .lane-tag{
    width:auto;margin-bottom:.55rem;padding-bottom:.35rem;
    border-bottom:1px solid var(--rule);font-size:.66rem;
  }
  .chain{flex-direction:column}
  .nd{width:100%;padding:.55rem .6rem;text-align:left}
  .nd b{font-size:.78rem}
  .nd small{font-size:.7rem}
  .ar{padding:.28rem 0;justify-content:center;font-size:0}
  .ar::after{content:"\2193";font-size:.95rem;line-height:1}

  /* relay: three columns become three stacked groups */
  .relay{min-width:0;flex-direction:column;padding:.9rem .8rem 1rem;font-size:.8rem}
  .relay .col{gap:.4rem}
  .relay .arrows{padding:.35rem 0;justify-content:center;font-size:0}
  .relay .arrows::after{content:"\2193";font-size:1rem;line-height:1}
  .relay .core{padding:.7rem .6rem}

  /* compliance tree: path above its obligation, one record per row */
  .tree{min-width:0;padding:.85rem .8rem .95rem;font-size:.78rem}
  .tree .row{
    flex-direction:column;gap:.2rem;padding:.5rem 0;
    border-bottom:1px solid var(--rule);
  }
  .tree .row:last-child{border-bottom:0}
  .tree .path{width:auto;font-weight:600}
  .tree .ob{font-size:.72rem}
  .tree .crown{margin:0 -.8rem;padding:.5rem .8rem}

  /* funnel: let long labels wrap rather than force the card wider */
  .funnel{padding:1rem .8rem 1.1rem}
  .funnel .stage{gap:.6rem}
  .funnel .lbl{white-space:normal}

  /* status grid: one column reads better than two at this width */
  .grid-status{grid-template-columns:1fr}
  .cell:not(:nth-child(2n+1)){border-left:0}
  .cell:nth-child(2),.cell:nth-child(3){border-top:1px solid var(--rule)}

  /* terminal output wraps rather than scrolls. pre-wrap keeps the leading
     indentation that makes the validator output readable, while letting long
     lines fold instead of forcing a sideways drag. */
  .term{
    font-size:.72rem;padding:.9rem .95rem;line-height:1.6;
    white-space:pre-wrap;overflow-wrap:break-word;
  }

  /* the nav is the one thing that still overflowed a 320px screen */
  header.masthead{padding:.85rem 0}
  .masthead nav{gap:.85rem;flex-wrap:wrap;justify-content:flex-end;row-gap:.5rem}
  .masthead h1,.masthead .brand{font-size:.86rem;letter-spacing:.06em}
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .reveal.d1{transition-delay:.07s}
  .js .reveal.d2{transition-delay:.14s}
  .js .reveal.d3{transition-delay:.21s}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .funnel .bar{width:var(--w);transition:none}
}

/* ---------- ideas ---------- */
.post-card{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.post-card:first-child{padding-top:.4rem}
.post-card:last-of-type{border-bottom:0}
.post-card-link{display:block;text-decoration:none}
.post-card h2{
  font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.22;
  margin:.5rem 0 .55rem;letter-spacing:-.005em;transition:color .2s;
}
.post-card-link:hover h2{color:var(--red)}
.post-card p{color:var(--muted);max-width:40em}
.post-card-link:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:3px}
.post-meta{
  display:flex;gap:.85rem;align-items:baseline;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.05em;
}
.post-kicker{color:var(--red);text-transform:uppercase;letter-spacing:.13em;font-weight:500}

.figure{margin:1.7rem 0 0;border:1px solid var(--rule);border-radius:3px;background:var(--card);overflow:hidden}
.figure img{display:block;width:100%;height:auto}
.figure figcaption{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.5;
  padding:.7rem .9rem;border-top:1px solid var(--rule);
}
.sec code{
  font-family:var(--mono);font-size:.86em;background:var(--card-2);
  border:1px solid var(--rule);border-radius:2px;padding:.05em .35em;
}

/* ---------- live embeds ----------
   The interactive map is same-origin, so app.js measures its document and sets
   the iframe height to match. That keeps the embed free of an inner scrollbar. */
.figure.embed{background:var(--paper)}
.embed-slot{min-height:2rem}
.embed-slot iframe{display:block;width:100%;border:0;background:#fff}
.embed-slot img{display:block;width:100%;height:auto}
.figure figcaption a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--rule);white-space:nowrap}
.figure figcaption a:hover{border-bottom-color:var(--red)}
.embed-note{
  font-family:var(--mono);font-size:.7rem;color:var(--muted);
  padding:.55rem .9rem;border-top:1px solid var(--rule);
}

/* The live map wants more width than the reading column. On wide screens the
   embed breaks out of the 47.5rem measure and centres on the viewport instead,
   so the figure reads as a full-width instrument rather than a cramped inset. */
@media (min-width:1000px){
  .figure.embed{
    width:min(72rem,calc(100vw - 4rem));
    /* Centre with margin, not transform: .reveal.is-in sets transform:none at a
       higher specificity, which would silently cancel a translate here. */
    margin-left:calc(50% - min(36rem,calc(50vw - 2rem)));
  }
}

/* ---------- 2x2 quadrant figure ---------- */
.quad{display:grid;grid-template-columns:1fr 1fr;font-family:var(--mono)}
.quad .q{padding:1.15rem 1.1rem 1.25rem;border-top:1px solid var(--rule);transition:background .2s}
.quad .q:nth-child(-n+2){border-top:0}
.quad .q:nth-child(odd){border-right:1px solid var(--rule)}
.quad .q:hover{background:var(--card-2)}
.quad .q b{display:block;font-size:1.75rem;font-weight:600;line-height:1}
.quad .q span{display:block;font-size:.8rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;margin-top:.4rem}
.quad .q small{display:block;color:var(--muted);font-size:.72rem;margin-top:.3rem;line-height:1.5}
.quad .fort b,.quad .fort span{color:var(--band-a)}
.quad .cont b,.quad .cont span{color:var(--band-c)}
.quad .erod b,.quad .erod span{color:var(--red)}
.quad .inert b,.quad .inert span{color:var(--muted)}
@media (max-width:540px){
  .quad{grid-template-columns:1fr}
  .quad .q:nth-child(odd){border-right:0}
  .quad .q:nth-child(2){border-top:1px solid var(--rule)}
}

/* Butterfly mix chart (Exhibit H). Two bars grow outward from a centred label, so the
   inversion between the two regions reads as a shape before you read any number. */
.mix{font-family:var(--mono);padding:.35rem 0 .15rem}
.mix-head{display:flex;align-items:center;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:0 .9rem .5rem}
.mix-head span:first-child{flex:1;text-align:right}
.mix-head span:last-child{flex:1;text-align:left}
.mix-head .mix-mid{flex:0 0 12.5rem}
.mix-row{display:flex;align-items:center;gap:.45rem;padding:.5rem .9rem;
  border-top:1px solid var(--rule);transition:background .2s}
.mix-row:hover{background:var(--card-2)}
.mix-val{flex:0 0 3.1rem;font-size:.78rem;color:var(--muted)}
.mix-row .mix-val:first-child{text-align:right}
.mix-bar{flex:1;display:flex;height:.7rem}
.mix-bar.l{justify-content:flex-end}
.mix-bar i{display:block;height:100%;background:var(--muted);opacity:.55;transition:opacity .2s}
.mix-bar.r i{background:var(--red);opacity:.85}
.mix-row:hover .mix-bar i{opacity:1}
.mix-label{flex:0 0 11rem;text-align:center;font-size:.76rem;letter-spacing:.02em}
@media (max-width:640px){
  .mix-label{flex:0 0 6.5rem;font-size:.68rem}
  .mix-head .mix-mid{flex:0 0 7.5rem}
  .mix-val{flex:0 0 2.6rem;font-size:.7rem}
}