/* 0x2F — public site.
   Two type systems, one surface: IBM Plex Serif carries human intent,
   IBM Plex Mono carries system state. #2F2F2F is the structural graphite. */

@font-face{font-family:"Plex Serif";src:url("assets/fonts/plex-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url("assets/fonts/plex-serif-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Surface */
  --ground:#e4e8ec;
  --sheet:#f6f8fa;
  --graphite:#2f2f2f;
  --accent:#7fb0e8;

  /* Type on the sheet */
  --body:#37424c;
  --num:#67717a;
  --rule:#b9c3cb;
  --link-hover:#2f5fa8;
  --foot-key:#67717a;
  --foot-val:#5c6771;

  /* Type on the ink */
  --key:#8e98a1;
  --val:#eef2f6;
  --path:#dfe5ea;
  --why:#a9b3bb;
  --act:#b7c0c8;
  --act-rule:#6c757e;
  --closed:#9aa4ad;

  /* Geometry — desktop */
  --headPad:42px 46px 0;
  --sheetX:46px;
  --sheetPad:48px 0 0 40px;
  --gap1:100px;
  --gap2:80px;
  --gap3:92px;
  --bandGap:18px;
  --bleed:-46px;
  --descSize:18px;
  --numW:42px;
  --keySize:10.5px;
  --valSize:13px;
  --fieldGap:28px;
  --inkPadL:26px;
  --inkPadR:92px;
  --inkVPad:14px;
  --whySize:13.5px;
  --actGap:26px;
  --footPad:22px 46px 30px 0;
  --footGap:16px 40px;
  --slotScale:1;
  --intentScale:1;
  --bangSize:19px;
  --bangX:11px;

  --serif:"Plex Serif",Georgia,"Times New Roman",serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (max-width:779px){
  :root{
    --headPad:30px 20px 0;
    --sheetX:18px;
    --sheetPad:34px 0 0 20px;
    --gap1:62px;
    --gap2:52px;
    --gap3:54px;
    --bandGap:14px;
    --bleed:-18px;
    --descSize:16.5px;
    --numW:30px;
    --keySize:10px;
    --valSize:12px;
    --fieldGap:16px;
    --inkPadL:20px;
    --inkPadR:30px;
    --inkVPad:12px;
    --whySize:12.5px;
    --actGap:18px;
    --footPad:18px 20px 26px 0;
    --footGap:14px 24px;
    --slotScale:0.76;
    --intentScale:0.84;
    --bangSize:16px;
    --bangX:7px;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{overflow-x:clip}
html,body{margin:0;background:var(--ground)}
body{
  font-family:var(--serif);
  color:var(--graphite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:#cddcf5;color:var(--graphite)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Frame ─────────────────────────────────────────────── */

.frame{
  min-height:100vh;
  min-height:100svh;
  background:var(--ground);
  display:flex;
  flex-direction:column;
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  html{overflow-x:hidden}
  .frame{overflow-x:hidden}
}

/* ── System mark ───────────────────────────────────────── */

.head{
  padding:var(--headPad);
  padding-bottom:var(--gap1);
  display:flex;
  align-items:center;
  gap:14px;
}
.mark{
  display:flex;
  flex-direction:column-reverse;
  gap:2px;
  width:30px;
  flex:none;
}
.mark i{
  display:block;
  height:3px;
  width:8px;
  margin-left:0;
  background:var(--graphite);
  transition:width .6s linear,margin-left .4s cubic-bezier(.22,.84,.2,1),background .4s linear;
}
.mark i.halt{background:var(--accent)}
.wordmark{
  font-family:var(--mono);
  font-size:16px;
  font-weight:500;
  letter-spacing:.015em;
  color:var(--graphite);
}

/* ── Sheet ─────────────────────────────────────────────── */

.sheet{
  flex:1;
  margin-left:var(--sheetX);
  background:var(--sheet);
  border-top:1px solid var(--graphite);
  border-left:1px solid var(--graphite);
  padding:var(--sheetPad);
  display:flex;
  flex-direction:column;
}
.sheet-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding-bottom:var(--gap3);
}
.lede{
  margin:0;
  max-width:44ch;
  font-size:var(--descSize);
  line-height:1.62;
  letter-spacing:-.002em;
  color:var(--body);
  text-wrap:pretty;
}

/* ── The advancing front ───────────────────────────────── */

.front{
  list-style:none;
  margin:var(--gap2) 0 0;
  margin-right:var(--bleed);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--bandGap);
}

.band{
  position:relative;
  overflow:hidden;
  min-height:calc(var(--slot-h) * var(--slotScale));
  transition:height .68s cubic-bezier(.22,.84,.2,1);
}
html.js .band{min-height:0;height:var(--h)}

.band[data-slot="0"]{--slot-h:66px;--slot-indent:0px;--slot-size:24px;--slot-track:-.012em}
.band[data-slot="1"]{--slot-h:52px;--slot-indent:72px;--slot-size:18.5px;--slot-track:-.006em}
.band[data-slot="2"]{--slot-h:86px;--slot-indent:24px;--slot-size:30px;--slot-track:-.018em}
.band[data-slot="3"]{--slot-h:48px;--slot-indent:120px;--slot-size:17.5px;--slot-track:-.004em}

.band-text{
  display:flex;
  align-items:center;
  min-height:calc(var(--slot-h) * var(--slotScale));
  /* The indent is capped so a narrow viewport can never squeeze the
     intent out of the band; the asymmetry survives, the text stays. */
  padding-left:min(calc(var(--slot-indent) * var(--slotScale)),30%);
  transition:padding-left .68s cubic-bezier(.22,.84,.2,1);
}
.band.is-closed .band-text{padding-left:0}

.num{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--num);
  width:var(--numW);
  flex:none;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.intent{
  font-size:calc(var(--slot-size) * var(--intentScale));
  font-weight:400;
  line-height:1.28;
  letter-spacing:var(--slot-track);
  color:var(--graphite);
  text-wrap:pretty;
  min-width:0;
}

/* Execution state. The ink is the front: it advances right-to-left and
   takes the intent with it. */
.ink{
  position:absolute;
  top:0;bottom:0;right:0;
  width:0;
  background:var(--graphite);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  padding:0 var(--inkPadR) 0 var(--inkPadL);
  overflow:hidden;
  transition:width .62s linear;
}
.band.is-snap .ink{transition:none}

.edge{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0;
  background:var(--accent);
  transition:width .3s linear,background .3s linear;
}
.band.is-held .edge{background:var(--sheet)}

.bang{
  position:absolute;
  left:var(--bangX);
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:var(--bangSize);
  line-height:1;
  color:var(--accent);
  display:none;
  animation:halt 1.3s ease-in-out infinite;
}
.band.is-halt .bang{display:block}
@keyframes halt{0%,100%{opacity:1}48%{opacity:.25}}

.stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  max-width:100%;
}
.band.is-halt .stack{gap:calc(var(--inkVPad) - 3px)}

.record{
  display:flex;
  gap:var(--fieldGap);
  font-family:var(--mono);
  white-space:nowrap;
  align-items:baseline;
}
.record .f{display:flex;gap:9px;align-items:baseline}
.record .k{color:var(--key);letter-spacing:.16em;font-size:var(--keySize)}
.record .v{color:var(--val);font-variant-numeric:tabular-nums;font-size:var(--valSize)}
.record .v.accent{color:var(--accent)}
.record .v.quiet{color:var(--closed)}

.path{
  font-family:var(--mono);
  font-size:var(--valSize);
  color:var(--path);
  letter-spacing:-.004em;
  display:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.band.is-halt .path{display:block}
@media (max-width:779px){
  .path{white-space:normal;overflow-wrap:anywhere;text-align:right}
}

.why{
  margin:0;
  font-family:var(--serif);
  font-size:var(--whySize);
  color:var(--why);
  display:none;
  max-width:52ch;
  text-align:right;
  line-height:1.5;
}
.band.is-halt.is-insp .why{display:block}

.acts{
  display:none;
  gap:var(--actGap);
  font-family:var(--mono);
  font-size:var(--keySize);
  letter-spacing:.16em;
}
.band.is-halt .acts{display:flex}

.act{
  appearance:none;
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  padding:0 0 2px;
  margin:0;
  font:inherit;
  letter-spacing:inherit;
  color:var(--act);
  cursor:pointer;
}
.act-allow{color:var(--sheet);border-bottom-color:var(--act-rule)}
.act:hover{color:var(--sheet);border-bottom-color:var(--act-rule)}
.act-allow:hover{border-bottom-color:var(--sheet)}
.act:focus-visible{outline:2px solid var(--sheet);outline-offset:3px}

/* Hold. Present only while a piece of work is running — a halted band
   is answered with ALLOW / INSPECT / REJECT instead. */
.hold{
  position:absolute;
  inset:0;
  z-index:2;
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:default;
  color:inherit;
}
.hold:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--sheet),inset 0 0 0 4px var(--graphite);
}

/* ── Footer ────────────────────────────────────────────── */

.foot{
  margin-top:auto;
  border-top:1px solid var(--graphite);
  padding:var(--footPad);
  display:flex;
  flex-wrap:wrap;
  gap:var(--footGap);
  align-items:baseline;
  font-family:var(--mono);
  font-size:13px;
}
.foot-link{
  color:var(--graphite);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  letter-spacing:.01em;
}
.foot-link:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
.foot-link:focus-visible{outline:2px solid var(--link-hover);outline-offset:3px;border-radius:1px}
.foot-field{display:flex;gap:11px;align-items:baseline}
.foot-field .k{color:var(--foot-key);letter-spacing:.16em;font-size:10.5px}
.foot-field .v{color:var(--foot-val)}

/* ── Reduced motion ────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  .bang{opacity:1}
  .hold{display:none}
}