/* slightlydistracted.dev — Design4_Merged, extracted to one shared sheet.
   Light is base; both dark states redefine tokens only. */
:root{
  --ink:#0E1714; --panel:#14201B; --emerald:#0F6B4C; --emerald-br:#1FA37A;
  --mint:#B7D3C5; --wall:#C9B8A0; --paper:#F3EDE3; --rust:#C45C3E;

  --ground:var(--paper);
  --surface:#FBF7F0;
  --surface-2:#EFE7DA;
  --text:var(--ink);
  --text-2:#4A5B54;
  --text-3:#77877F;
  --hairline:#D8C9B4;
  --hairline-2:#E7DDCC;
  --accent:var(--emerald);
  --accent-hi:var(--emerald-br);
  --ok:#2C7F5E;
  --flag:var(--rust);
  --parked:#9A8A73;
  --wall-tex:.05;
  --led:0 0 0 3px rgba(15,107,76,.14);
  --shadow:0 1px 0 rgba(14,23,20,.05),0 14px 34px -24px rgba(14,23,20,.55);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:var(--ink); --surface:var(--panel); --surface-2:#18261F;
    --text:#E8F0EB; --text-2:var(--mint); --text-3:#7E9689;
    --hairline:rgba(183,211,197,.16); --hairline-2:rgba(183,211,197,.09);
    --accent:var(--emerald-br); --accent-hi:#38C79A; --ok:var(--mint);
    --flag:#E0745A; --parked:#9A8A73;
    --wall-tex:.028;
    --led:0 0 0 3px rgba(31,163,122,.22);
    --shadow:0 1px 0 rgba(0,0,0,.4),0 16px 40px -26px #000;
  }
}
:root[data-theme="dark"]{
  --ground:var(--ink); --surface:var(--panel); --surface-2:#18261F;
  --text:#E8F0EB; --text-2:var(--mint); --text-3:#7E9689;
  --hairline:rgba(183,211,197,.16); --hairline-2:rgba(183,211,197,.09);
  --accent:var(--emerald-br); --accent-hi:#38C79A; --ok:var(--mint);
  --flag:#E0745A; --parked:#9A8A73;
  --wall-tex:.028;
  --led:0 0 0 3px rgba(31,163,122,.22);
  --shadow:0 1px 0 rgba(0,0,0,.4),0 16px 40px -26px #000;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:"Schibsted Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ─── primitives ─── */
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem;width:100%}
.wrap-read{max-width:44rem;margin:0 auto;padding:0 1.5rem;width:100%}

.lbl{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

a{color:inherit}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:2px;
}

/* ─── nav ─── */
.nav{
  position:sticky;top:0;z-index:20;
  background:var(--ground);
  border-bottom:1px solid var(--hairline);
}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;height:3rem}
.nav a{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);text-decoration:none;transition:color .14s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.nav .brand{color:var(--text);font-weight:700;letter-spacing:.1em}
.nav .spacer{margin-left:auto}
.toggle{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;color:var(--text-3);
  border:1px solid var(--hairline);border-radius:2px;
  padding:.3rem .6rem;cursor:pointer;
  transition:color .14s ease,border-color .14s ease;
}
.toggle:hover{color:var(--accent);border-color:var(--accent)}

/* ─── masthead ─── */
.mast{padding:4.5rem 0 2.25rem;position:relative}
.mast::before{
  content:"";position:absolute;inset:-2rem -1.5rem auto;height:22rem;
  background:radial-gradient(120% 80% at 18% 0%,var(--wall),transparent 68%);
  opacity:var(--wall-tex);pointer-events:none;
}
.mast>*{position:relative}

.wordmark{
  font-family:Bungee,"Arial Black",Impact,sans-serif;
  font-size:clamp(1.9rem,6.4vw,3.5rem);
  line-height:1.02;letter-spacing:-.005em;margin:0;text-wrap:balance;
}
.wordmark span{display:block}
.wordmark span:last-child{color:var(--accent)}

.thesis{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:600;
  font-size:clamp(1.5rem,4vw,2.15rem);
  line-height:1.1;
  color:var(--text-2);
  margin:1.1rem 0 0;
  max-width:22ch;
  text-wrap:balance;
}

.byline{margin-top:1.35rem;display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.byline .name{font-weight:600;font-size:.95rem}

/* ─── readout ─── */
.readout{
  background:var(--surface);border:1px solid var(--hairline);
  box-shadow:var(--shadow);margin-top:2.5rem;
}
.readout-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:.7rem 1.15rem;border-bottom:1px solid var(--hairline);flex-wrap:wrap;
}
.readout-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cell{padding:1.15rem 1.25rem 1.35rem;border-right:1px solid var(--hairline-2)}
.cell:last-child{border-right:0}
.cell h3{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:700;font-size:1.32rem;line-height:1.12;
  margin:.5rem 0 0;text-wrap:balance;
}
.cell p{margin:.5rem 0 0;font-size:.9rem;line-height:1.5;color:var(--text-2)}
.cell .chip{margin-top:.7rem}

.verdict{
  border-top:1px solid var(--hairline);padding:.95rem 1.25rem;font-size:.96rem;
  display:flex;gap:.85rem;align-items:baseline;flex-wrap:wrap;
}

.led{
  display:inline-block;width:.44rem;height:.44rem;border-radius:50%;
  background:var(--accent-hi);box-shadow:var(--led);
  vertical-align:.08em;margin-right:.45rem;
}

/* ─── state chips ─── */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;
}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.chip.running{color:var(--accent)}
.chip.running i{animation:breathe 3.6s ease-in-out infinite}
.chip.shipped{color:var(--ok)}
.chip.parked{color:var(--parked)}
.chip.failed{color:var(--flag)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.28}}

.tag{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--hairline);
  border-radius:2px;padding:.1rem .4rem;
}
.tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.7rem}

/* ─── section heads ─── */
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;flex-wrap:wrap;padding-top:3.5rem;
}
.sec-title{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:800;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1;
  margin:.35rem 0 0;
}

/* ─── stream index ─── */
.idx{display:flex;flex-direction:column;margin-top:1.6rem}
.entry{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);
  gap:0 2rem;border-top:1px solid var(--hairline);
  padding:1.6rem 0;text-decoration:none;
}
.entry:hover .entry-title{color:var(--accent)}
.entry-title{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:700;font-size:1.72rem;line-height:1.06;letter-spacing:.005em;
  margin:0;transition:color .14s ease;text-wrap:balance;
}
.entry-dek{margin:.5rem 0 0;color:var(--text-2);font-size:.96rem;max-width:56ch}

.strip{
  display:inline-flex;align-items:stretch;margin-top:.9rem;
  border:1px solid var(--hairline);background:var(--surface);
}
.strip b{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;padding:.32rem .68rem;
  border-right:1px solid var(--hairline);color:var(--text-3);
}
.strip b:last-child{border-right:0}
.strip b i{font-style:normal;color:var(--text);font-weight:700}
.strip b.is-ok i{color:var(--ok)}
.strip b.is-diverged i{color:var(--flag)}

.draft-tag{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hairline);padding:.14rem .42rem;
  color:var(--text-3);vertical-align:.3em;margin-left:.55rem;
  white-space:nowrap;font-weight:400;
}

/* ─── lab board ─── */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem;margin-top:1.6rem}
.lab{
  background:var(--surface);border:1px solid var(--hairline);border-radius:4px;
  padding:1.1rem 1.15rem 1rem;
  display:flex;flex-direction:column;
}
.lab h3{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:700;font-size:1.32rem;line-height:1.1;margin:0;text-wrap:balance;
}
.lab .hyp{margin:.5rem 0 0;font-size:.9rem;color:var(--text-2);line-height:1.5}
.lab-foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:.75rem;margin-top:auto;padding-top:.9rem;flex-wrap:wrap;
}

/* ─── callouts + empty state ─── */
.call{
  border-left:3px solid var(--accent);background:var(--surface);
  padding:1rem 1.25rem;margin-top:1.4rem;
}
.call.rule{border-left-color:var(--flag)}
.call.tangent{border-left-color:var(--wall)}
.call b{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);display:block;
}
.call p{margin:.3rem 0 0;font-size:.94rem}

/* ─── reading view ─── */
.post-head{padding:3.5rem 0 0}
.post-title{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:700;font-size:clamp(2.3rem,6.6vw,3.6rem);
  line-height:.98;letter-spacing:.004em;margin:.9rem 0 0;
  max-width:19ch;text-wrap:balance;
}
.post-standfirst{font-size:1.1875rem;color:var(--text-2);margin:1.1rem 0 0;max-width:58ch}

.prose{max-width:65ch}
.prose p{margin:1.1rem 0 0}
.prose>*:first-child{margin-top:0}
.prose h2{
  font-family:"Big Shoulders Display","Arial Narrow",sans-serif;
  font-weight:600;font-size:1.62rem;line-height:1.1;margin:2.4rem 0 0;text-wrap:balance;
}
.prose strong{font-weight:600}
.prose code{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.875em;background:var(--surface-2);
  border:1px solid var(--hairline-2);padding:.05em .34em;
}
.prose a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}

.scroller{overflow-x:auto;margin-top:1.4rem;border:1px solid var(--hairline);background:var(--surface)}

table{border-collapse:collapse;width:100%;font-size:.9rem}
caption{
  text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--hairline);
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
}
th,td{text-align:left;padding:.6rem 1rem;border-bottom:1px solid var(--hairline-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.75rem;font-weight:700;letter-spacing:.04em}
td.num{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.held{color:var(--ok)}
.diverged{color:var(--flag)}

pre{
  margin:0;padding:1rem 1.15rem;
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.8125rem;line-height:1.65;overflow-x:auto;color:var(--text-2);
}
pre .out{color:var(--accent)}

/* ─── 404 ─── */
.four{padding:5rem 0 6rem}
.four h1{
  font-family:Bungee,"Arial Black",Impact,sans-serif;
  font-size:clamp(1.8rem,5.6vw,3.1rem);line-height:1.08;margin:.6rem 0 1.8rem;
}

/* ─── footer ─── */
.status{
  border-top:1px solid var(--hairline);margin-top:auto;padding:.85rem 0 2.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

@media (max-width:44rem){
  .entry{grid-template-columns:minmax(0,1fr);gap:.55rem}
  .cell{border-right:0;border-bottom:1px solid var(--hairline-2)}
  .cell:last-child{border-bottom:0}
  .nav .wrap{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}