/* ==========================================================================
   고지훈 · Software Engineer
   디자인 토큰은 레퍼런스 실측값을 기준으로 잡았습니다.
   - 섹션 리듬 96~128px, 읽기 폭 640~720px  (brittanychiang, paco, jakub.kr)
   - border-led 리스트, 상시 카드 최소화     (paco.me, emilkowal.ski)
   - opacity 단계로 위계 만들기              (brianlovin.com)
   - 모션 150~300ms cubic-bezier(.4,0,.2,1)  (전 사이트 공통)
   ========================================================================== */

:root{
  /* color */
  --bg:#0a0b0c;
  --bg-2:#0d0f11;
  --bg-3:#111315;
  --line:#1e2124;
  --line-2:#15181a;
  --fg:#e9eaea;
  --fg-2:#c7cdd2;
  --fg-3:#adb6bf;
  --fg-4:#9da8b2;
  --accent:#5eead4;
  --accent-2:rgba(94,234,212,.13);
  --bad:#f87171;
  --ok:#4ade80;
  --warn:#f0b429;

  /* type */
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,"Segoe UI",Roboto,"Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* spacing (4/8 기반) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --shell:1180px;
  --rail:264px;
  --read:720px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms;
  --t:200ms;
  --t-slow:300ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1;
  word-break:keep-all; overflow-wrap:anywhere;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.3}
figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none; transition:color var(--t) var(--ease)}
a:hover{color:var(--accent)}
::selection{background:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#04110e; padding:10px 14px; z-index:100}
.skip:focus{left:12px; top:12px}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(10,11,12,.86);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-2);
}
.topbar .inner{
  max-width:var(--shell); margin:0 auto; padding:14px 40px;
  display:flex; align-items:center; gap:var(--s5);
}
.topbar .who{display:flex; align-items:baseline; gap:10px; min-width:0}
.topbar .who b{font-size:15px; letter-spacing:-.01em}
.topbar .who span{font-family:var(--mono); font-size:11px; color:var(--fg-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .sp{flex:1}
.topbar .pdf-download{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:30px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2);
  color:var(--fg-3); font-family:var(--mono); font-size:11px; white-space:nowrap;
}
.topbar .pdf-download svg{width:14px; height:14px; flex:none}
.topbar .pdf-download:hover{color:var(--accent)}
.progress{position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent); opacity:.7}

.seg{display:flex; align-items:center; gap:1px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2)}
.seg button{
  appearance:none; border:0; background:transparent; color:var(--fg-3);
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  padding:5px 11px; border-radius:5px; cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.seg button:hover{color:var(--fg-2)}
.seg button[aria-pressed="true"]{background:var(--accent-2); color:var(--accent)}
@media(max-width:760px){
  .topbar .inner{padding:12px 20px; gap:var(--s3)}
  .topbar .who span{display:none}
}
@media(max-width:380px){
  .topbar .inner{padding-inline:12px; gap:8px}
  .topbar .who b{font-size:14px}
  .topbar .seg{padding:2px}
  .topbar .seg button{padding-inline:7px; font-size:10px}
  .topbar .pdf-download{gap:4px; font-size:10px}
  .topbar .pdf-download svg{width:13px; height:13px}
}

/* ------------------------------------------------------------------- hero */
main{position:relative; padding-top:0}
#graph{position:fixed; z-index:0; inset:0; display:block; width:100%; height:100%; opacity:1; pointer-events:none; filter:brightness(1.28) saturate(1.12) contrast(1.04)}
.hero,.shell{position:relative; z-index:1}
.hero{overflow:hidden; border-bottom:1px solid var(--line-2); min-height:100svh; background:rgba(3,6,8,.18)}
.hero::before{content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:
  radial-gradient(circle at 28% 50%, rgba(0,143,174,.17), transparent 32%),
  radial-gradient(circle at 58% 46%, rgba(17,41,54,.20), transparent 48%);}
.graph-label{position:fixed; z-index:5; top:0; left:0; padding:4px 8px; border:1px solid rgba(94,234,212,.48); background:rgba(3,9,12,.82); color:var(--accent); font:500 11px/1.2 var(--mono); letter-spacing:.05em; pointer-events:none; transform:translate3d(-999px,-999px,0); box-shadow:0 0 20px rgba(0,183,255,.16)}
.graph-label[hidden]{display:none}
.graph-hint{display:none}
.hero::after{
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(3,6,8,.02) 0%, rgba(3,6,8,.02) 40%, rgba(3,6,8,.12) 54%,
    rgba(3,6,8,.3) 72%, rgba(3,6,8,.42) 100%);
}
.hero-in{position:relative; z-index:2; max-width:var(--shell); min-height:100svh; display:flex; align-items:center; margin:0 auto; padding:calc(57px + var(--s8)) 40px var(--s8); pointer-events:none}
.hero-copy{width:50%; margin-left:auto; transform:translateX(clamp(24px,3vw,56px)); pointer-events:auto}
.hero-copy .kpis{max-width:none}
.hero-copy .kpi .v{font-size:13px; white-space:normal; word-break:keep-all; line-height:1.35}
.hero .lead{margin-top:var(--s5); max-width:38ch; font-size:16.5px; line-height:1.7; color:var(--fg-2)}
.kpis{margin-bottom:var(--s4)}
@media(max-width:900px){
  .hero{min-height:100svh}
  .hero::after{background:linear-gradient(180deg, rgba(3,6,8,.08) 0%, rgba(3,6,8,.10) 34%, rgba(3,6,8,.65) 56%, rgba(3,6,8,.98) 82%, rgba(3,6,8,1) 100%)}
  .graph-hint{right:20px; bottom:18px}
  .hero .lead{max-width:none}
  .hero-in{min-height:100svh; align-items:flex-end; padding:45.8svh 20px var(--s7)}
  .hero-copy{width:100%; margin:0; transform:none}
}
.eyebrow{padding-left:2px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.hero h1{
  margin-top:var(--s5);
  font-size:clamp(32px,4.6vw,54px); line-height:1.14; letter-spacing:-.035em; font-weight:650;
  max-width:22ch;
}
.hero h1 em{font-style:normal; color:var(--fg-2); font-weight:500}
.hero-copy h1,.hero-copy .lead,.hero-copy .kpis,.hero-copy .depth-hint{text-shadow:0 3px 18px rgba(0,0,0,.82)}
.hero .lead{margin-top:var(--s5); max-width:64ch; font-size:16.5px; line-height:1.76; color:var(--fg-2)}
.hero .lead strong{color:var(--fg); font-weight:600}
.hero .lead b{color:var(--accent); font-weight:500}

.kpis{
  margin-top:var(--s7); display:grid; gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.kpi{padding:var(--s4) var(--s4) var(--s4) 0}
.kpi + .kpi{border-left:1px solid var(--line-2); padding-left:var(--s4)}
.kpi:nth-child(odd){border-left:0; padding-left:0}
.kpi:nth-child(n+3){border-top:1px solid var(--line-2)}
.kpi .v{font-family:var(--mono); font-size:15px; color:var(--fg); letter-spacing:-.015em; white-space:nowrap}
.kpi .v i{color:var(--accent); font-style:normal}
.kpi .k{margin-top:6px; font-size:12px; color:var(--fg-4); line-height:1.55; word-break:keep-all}
.depth-hint{margin-top:var(--s5); font-family:var(--mono); font-size:11.5px; line-height:1.85; color:var(--fg-4); max-width:72ch}

@media(max-width:520px){
  .hero-in{padding:43.8svh 20px var(--s7)}
  .hero .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .kpi{padding:10px 8px}
  .hero .kpi:nth-child(odd){padding-left:0}
  .hero h1{font-size:clamp(26px,7vw,36px)}
  .hero .lead{font-size:14px}
  .graph-hint{display:none}
}

/* ------------------------------------------------------------------ shell */
.shell{
  --shell:1400px;
  --rail:220px;
  --read:1040px;
  position:relative;
  max-width:var(--shell); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:var(--s7);
  align-items:start;
}
.shell::before{content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:rgba(10,11,12,.92)}
.content{font-size:17px; position:relative; z-index:1; min-width:0; max-width:var(--read)}
@media(max-width:1000px){
  .shell{grid-template-columns:1fr; gap:0; padding:0 20px}
  .content{max-width:none}
}

/* rail */
.rail{position:sticky; top:80px; padding:var(--s8) 0 var(--s9)}
.rail{z-index:1}
.rail .lbl{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4); padding:0 var(--s2) var(--s3)}
.rail ol{display:flex; flex-direction:column}
.rail li a{
  display:flex; align-items:center; gap:10px;
  font-size:15px; color:var(--fg-3); padding:5px var(--s2); border-radius:6px;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.rail li a .n{font-family:var(--mono); font-size:13px; color:var(--fg-4); transition:color var(--t-fast) var(--ease)}
.rail li a:hover{color:var(--fg-2); background:rgba(255,255,255,.028)}
.rail li a.on{color:var(--fg)}
.rail li a.on .n{color:var(--accent)}
.rail .links{margin-top:var(--s5); padding:0 var(--s2); display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:13px}
.rail .links a{color:var(--fg-3)}
@media(max-width:1000px){
  .shell::before{inset:0}
  .rail{position:sticky; top:53px; z-index:50; padding:8px 0 0; margin:0 -20px; padding-left:20px; padding-right:20px;
    background:linear-gradient(180deg,rgba(10,11,12,.97),rgba(10,11,12,.80) 65%,transparent); overflow-x:auto}
  .rail .lbl,.rail .links{display:none}
  .rail ol{flex-direction:row; gap:2px}
  .rail li a{white-space:nowrap; font-size:14px; padding:5px 9px; background:rgba(255,255,255,.03)}
}

/* --------------------------------------------------------------- sections */
section{padding-top:var(--s9); scroll-margin-top:88px}
section + section{border-top:1px solid var(--line-2); margin-top:var(--s9)}
@media(max-width:1000px){ section{padding-top:var(--s8)} section + section{margin-top:var(--s8)} }

.sec-head{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.sec-head .n{font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.06em}
.sec-head h2{font-size:15px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2)}
.sec-head .sub{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--fg-4); letter-spacing:.04em}
.sec-intro{margin-top:var(--s4); font-size:17px; line-height:1.78; color:var(--fg-3); max-width:64ch}
.sec-intro b{color:var(--fg-2); font-weight:500}
@media(max-width:640px){ .sec-head .sub{display:none} }

/* ------------------------------------------------------ record (project) */
.rec{padding-top:var(--s8); border-top:1px solid var(--line-2); margin-top:var(--s8)}
.rec:first-child{border-top:0; margin-top:var(--s6); padding-top:0}

.rec-head{display:block}
.rec-title{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.rec-no{font-family:var(--mono); font-size:13px; color:var(--fg-4); letter-spacing:.04em}
.rec h3{font-size:clamp(22px,2.2vw,28px); letter-spacing:-.025em; line-height:1.3}
.rec-meta{
  margin-top:8px; display:flex; flex-wrap:wrap; gap:4px 14px;
  font-family:var(--mono); font-size:13px; color:var(--fg-4);
}
.rec-meta b{color:var(--fg-3); font-weight:400}

/* thesis */
.thesis{
  margin-top:var(--s5); padding-left:var(--s4); border-left:2px solid var(--accent);
  font-size:20px; line-height:1.66; letter-spacing:-.012em; color:var(--fg);
  max-width:100%; word-break:keep-all; overflow-wrap:break-word;
}
.thesis-k{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4); display:block; margin-bottom:6px}

/* Keep sentences and short summaries readable at different widths. */
.sentence{display:block; text-wrap:balance}
.thesis,.sec-intro,.hero .lead,.about-grid li,.steps li,.metric .v,.metric .k,
.rec h3,.record-dialog h2,.alt .why{ text-wrap:balance }

/* story rows: label | list or short explanation */
.story{margin-top:var(--s6); display:flex; flex-direction:column; gap:var(--s4)}
.row{display:grid; grid-template-columns:100px minmax(0,1fr); gap:var(--s4)}
.row .k{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-4); padding-top:5px;
}
.row .p{font-size:17px; line-height:1.78; color:var(--fg-2)}
.row .p ul{margin:0; padding-left:1.15em; list-style:disc}
.row .p li + li{margin-top:6px}
.row .p b{color:var(--fg); font-weight:600}
.row .p em{font-style:normal; color:var(--fg); background:linear-gradient(transparent 62%, rgba(94,234,212,.18) 62%)}
@media(max-width:620px){
  .row{grid-template-columns:1fr; gap:5px}
  .row .k{padding-top:0}
}

/* metric strip */
.metrics{
  margin-top:var(--s6); display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line); padding-top:var(--s4); gap:var(--s4);
}
.metric .v{font-family:var(--mono); font-size:17px; color:var(--accent); letter-spacing:-.01em}
.metric .k{margin-top:4px; font-size:14px; color:var(--fg-4); line-height:1.5}

/* diagram plate */
.plate{
  margin:var(--s6) 0 0; border:1px solid var(--line); border-radius:10px; background:var(--bg-2);
  padding:var(--s5) var(--s5) var(--s4); overflow:hidden;
}
.plate .cap-top{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-4); display:flex; gap:10px; align-items:center; margin-bottom:var(--s5);
}
.plate .cap-top .qn{color:var(--accent)}
.plate .cap-bot{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line-2); font-size:14px; line-height:1.7; color:var(--fg-4)}
.plate figcaption{font-size:14px}

/* svg diagram */
.diagram-viewport{min-width:0}
#sys-01 .diagram-viewport,#sys-03 .plate:first-of-type .diagram-viewport{overflow-x:auto}
#sys-01 .dg,#sys-03 .plate:first-of-type .dg{min-width:640px}
#sys-01 .cap-top,#sys-01 .cap-bot{word-break:keep-all}
#sys-01 .cap-top .qn,#sys-03 .plate:first-of-type .cap-top .qn{white-space:nowrap; flex-shrink:0}
.dg{width:100%; min-width:0; height:auto; display:block; overflow:visible}
@media(max-width:620px){.plate{padding:var(--s4) var(--s3)}}
.dg text{font-family:var(--sans); font-size:14px; fill:var(--fg-2); letter-spacing:-.01em}
.dg .nd rect{fill:var(--bg-3); stroke:var(--line); stroke-width:1}
.dg .nd text{fill:var(--fg-2)}
.dg .nd.category text{font-size:15px; font-weight:600}
.dg .diagram-logo{cursor:help}
.dg .nd.t-dim rect{stroke:var(--line-2); fill:#0b0d0e}
.dg .nd.t-dim text{fill:var(--fg-4)}
.dg .grp rect{fill:none; stroke:var(--line); stroke-dasharray:4 4}
.dg .grp text{fill:var(--fg-3); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase}
.dg .e{fill:none; stroke:#33383d; stroke-width:1; marker-end:url(#ar)}
.dg .e-a{fill:none; stroke:#33383d; stroke-width:1.2; marker-end:url(#ar)}
.dg .e-d{fill:none; stroke:#33383d; stroke-width:1.2; stroke-dasharray:5 4; marker-end:url(#ar)}
.dg .diagram-control{fill:none; stroke:#64727b; stroke-width:1.2; stroke-dasharray:4 4; marker-end:url(#ar)}
.dg .e-a2{fill:none; stroke:#33383d; stroke-width:1; marker-end:url(#ar)}
.dg .elab{fill:var(--fg-3); font-size:11.5px; letter-spacing:.02em}
.dg .anno{fill:var(--fg-3); font-size:11.5px}
.dg .anno-w{fill:var(--fg-3); font-size:11.5px}
.dg .bar-bg{fill:#15181a}
.dg .bar-old{fill:#3d3f42}
.dg .bar-new{fill:rgba(94,234,212,.75)}
.dg .strike{stroke:var(--bad); stroke-width:1.4}

/* 도식 자동 재생 (순차 처리 흐름) */
.dg .pkt{
  fill:var(--accent); opacity:0; pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(94,234,212,.95));
  will-change:transform, opacity;
}
.dg .pkt.error{fill:var(--bad); filter:drop-shadow(0 0 6px rgba(248,113,113,.95))}
.dg path.flowing{
  stroke:rgba(94,234,212,.9); stroke-width:1.7;
  stroke-dasharray:none; opacity:1; marker-end:url(#ar-a);
}
.dg path.flowing.e-d{stroke:rgba(248,113,113,.9); marker-end:url(#ar-d)}
.dg g.nd.act > rect{stroke:rgba(94,234,212,.7); fill:rgba(94,234,212,.10)}
.dg g.nd.act > text{fill:#ccfbf1}
.dg g.grp.act > rect{stroke:rgba(94,234,212,.7)}
.dg g.nd.t-bad.act > rect{stroke:var(--bad); fill:rgba(248,113,113,.12)}
.dg g.nd.t-bad.act > text{fill:#fecaca}
@media (prefers-reduced-motion:reduce){
  .dg .pkt{display:none}
}

/* tags + related */
.foot{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.foot .sep{width:1px; height:14px; background:var(--line); margin:0 6px}
.tag{font-family:var(--mono); font-size:13px; color:var(--fg-4); border:1px solid var(--line-2); border-radius:4px; padding:2px 7px}
.ref{
  font-family:var(--mono); font-size:13px; color:var(--accent);
  border:1px solid rgba(94,234,212,.24); background:rgba(94,234,212,.05);
  border-radius:4px; padding:2px 8px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ref:hover{background:rgba(94,234,212,.16); color:var(--accent)}
.flash{animation:flash 1.8s var(--ease)}
@keyframes flash{0%,22%{background:rgba(94,234,212,.10)}100%{background:transparent}}

/* ------------------------------------------------------- decision dialog */
body.dialog-open{overflow:hidden}
.record-trigger{cursor:pointer; text-align:left; line-height:1.6}
.record-dialog{font-size:17px; width:min(760px,calc(100% - 32px)); max-height:calc(100dvh - 48px); margin:auto; padding:28px; overflow:auto; overscroll-behavior:contain; color:var(--fg); background:var(--bg-2); border:1px solid #39434a; border-radius:14px; box-shadow:0 24px 90px rgba(0,0,0,.6)}
.record-dialog::backdrop{background:rgba(0,0,0,.76); backdrop-filter:blur(5px)}
.record-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}
.record-close{flex-shrink:0; padding:8px 12px; border:1px solid #46515a; border-radius:6px; color:var(--fg); background:var(--bg-3); font:inherit; font-size:15px; cursor:pointer}
.record-close:hover{border-color:var(--accent); color:var(--accent)}
.record-dialog h2{font-size:clamp(20px,3vw,26px); line-height:1.45; letter-spacing:-.025em}
.record-summary{padding-left:16px; border-left:2px solid var(--accent); margin:24px 0; color:var(--fg-2); line-height:1.75}
.record-dialog .kv{row-gap:24px; grid-template-columns:80px minmax(0,1fr)}
.record-dialog .alt:first-child{margin-top:0}
.record-dialog .alt b{display:block; font-weight:500; color:var(--fg); text-wrap:balance}
.record-dialog .alt.win b{color:var(--accent)}
.record-dialog .foot{margin-top:28px}
@media(max-width:620px){
  .record-dialog{padding:20px; max-height:calc(100dvh - 24px)}
  .record-dialog .kv{grid-template-columns:1fr; row-gap:10px}
  .record-dialog .kv dt:not(:first-child){margin-top:14px}
}

/* ------------------------------------------------------------ adr / inc */
.entry{padding-top:var(--s7); border-top:1px solid var(--line-2); margin-top:var(--s7)}
.entry:first-of-type{border-top:0; margin-top:var(--s6); padding-top:0}
.entry-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.entry-id{font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.04em}
.entry h3{font-size:19px; letter-spacing:-.02em; line-height:1.45}
.pill{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:4px; border:1px solid; white-space:nowrap;
}
.pill.ok{color:var(--ok); border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.06)}
.pill.high{color:var(--bad); border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.07)}
.pill.mid{color:var(--warn); border-color:rgba(240,180,41,.3); background:rgba(240,180,41,.07)}
.entry .sum{margin-top:var(--s3); font-size:17px; color:var(--fg-2); max-width:66ch}
.entry .sum b{color:var(--fg); font-weight:600}

.alt{margin-top:8px; display:grid; grid-template-columns:16px minmax(0,1fr); gap:var(--s3); font-size:17px; line-height:1.72; color:var(--fg-3)}
.alt .x{font-family:var(--mono); color:var(--fg-4); font-size:14px; padding-top:2px}
.alt.win{color:var(--fg-2)}
.alt.win .x{color:var(--ok)}
.alt .why{display:block; color:var(--fg-4); margin-top:2px}

.kv{display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px var(--s4); margin-top:var(--s4)}
.kv dt{font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); padding-top:5px}
.kv dd{margin:0; font-size:17px; line-height:1.75; color:var(--fg-2)}
.kv dd.dim{color:var(--fg-3)}
@media(max-width:620px){ .kv{grid-template-columns:1fr} .kv dt{padding-top:0} }

.steps{counter-reset:s; display:flex; flex-direction:column; gap:7px}
.steps li{counter-increment:s; position:relative; padding-left:26px; font-size:17px; line-height:1.7; color:var(--fg-2)}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:13px; color:var(--fg-4);
}
.steps.accent li::before{color:var(--accent)}

/* -------------------------------------------------------------- runbooks */
.rb{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7) var(--s8); margin-top:var(--s6)}
@media(max-width:820px){ .rb{grid-template-columns:1fr; gap:var(--s7)} }
.rb article h3{font-size:17px; letter-spacing:-.01em}
.rb article .k{font-family:var(--mono); font-size:13px; color:var(--fg-4); margin-top:3px}
.rb article ol{margin-top:var(--s3)}

/* ----------------------------------------------------------------- stack */
.stack{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:var(--s7) var(--s7); margin-top:var(--s6)}
.stack .g-head{display:flex; align-items:baseline; gap:8px; margin-bottom:12px}
.stack .g-head h4{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3)}
.stack .g-head .note{font-family:var(--mono); font-size:13px; color:var(--fg-4); margin-left:auto}

.logo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:8px}
.logo{
  position:relative; display:grid; place-items:center; height:46px;
  border:1px solid var(--line-2); border-radius:10px; background:rgba(255,255,255,.028);
  cursor:default;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.logo svg{width:22px; height:22px; display:block}
.logo:hover, .logo:focus-visible{background:rgba(255,255,255,.06); border-color:var(--line); transform:translateY(-1px)}
.logo:focus{outline:none}
.logo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.logo-fallback .mono-fb{font-family:var(--mono); font-size:13px; color:var(--fg-4)}
.logo .tip{
  position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(3px);
  background:#0f1113; border:1px solid var(--line); color:var(--fg);
  font-family:var(--mono); font-size:13px; line-height:1; white-space:nowrap;
  padding:6px 9px; border-radius:6px;
  opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index:5;
}
.logo:hover .tip, .logo:focus-visible .tip{opacity:1; transform:translateX(-50%) translateY(0)}

.chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.chip{font-size:14px; color:var(--fg-3); border:1px solid var(--line-2); border-radius:5px; padding:2px 8px}
.chip.hi{color:var(--accent); border-color:rgba(94,234,212,.26); background:rgba(94,234,212,.05)}

/* ----------------------------------------------------------------- about */
.about-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s7) var(--s8); margin-top:var(--s6)}
.about-grid h4{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4); margin-bottom:12px}
.about-grid ul{display:flex; flex-direction:column; gap:9px}
.about-grid li{font-size:17px; line-height:1.72; color:var(--fg-2); padding-left:14px; position:relative}
.about-grid li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--fg-4)}
.about-grid li b{color:var(--fg); font-weight:600}
.career-column{container:career / inline-size}
#careerList{gap:24px}
#careerList > li{padding-left:0}
#careerList > li::before{content:none}
#careerList .career-period{display:block; margin:3px 0 8px; font-size:14px; color:var(--fg-3)}
#careerList .career-duties{gap:2px}
#careerList .career-duties li{font-size:15px}
@container career (min-width:464px){
  #careerList{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  #careerList > li:last-child{grid-column:1 / -1}
  #careerList > li:last-child .career-duties{flex-direction:row; flex-wrap:wrap; column-gap:16px}
}

/* Reading depth only changes content within the systems section. */
body[data-depth="3"] #systems .d30{display:none !important}
body[data-depth="30"] #systems .story-summary{display:none !important}

/* reveal */
.rv{opacity:0; transform:translateY(10px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------------------------------------------------------------- footer */
footer{margin-top:var(--s10); border-top:1px solid var(--line-2); padding:var(--s6) 0 var(--s9)}
.frow{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-family:var(--mono); font-size:13px; color:var(--fg-4)}
.note{margin-top:var(--s5); font-size:14px; line-height:1.8; color:var(--fg-4); max-width:74ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
  .rv{opacity:1; transform:none}
}

/* ----------------------------------------------------------------- print */
@media print{
  @page{size:A4; margin:15mm 14mm}
  :root{color-scheme:light; --bg:#fff; --bg-2:#fff; --bg-3:#fff; --fg:#111; --fg-2:#2c2c2c; --fg-3:#555; --fg-4:#777; --line:#ddd; --line-2:#e8e8e8; --accent:#0a7d6b; --accent-2:rgba(10,125,107,.08)}
  body{font-size:10pt; line-height:1.55; print-color-adjust:exact; -webkit-print-color-adjust:exact}
  body::before,#graph,.graph-label,.topbar,.rail,.skip,.hero::before,.hero::after,.shell::before,
  .record-dialog,.record-trigger,.foot .sep,.dg .pkt,.logo .tip{display:none !important}
  body[data-depth] #systems .story-detail{display:block !important}
  body[data-depth] #systems .row,body[data-depth] #systems .metrics{display:grid !important}
  body[data-depth] #systems .foot{display:flex !important}
  body[data-depth] #systems .plate{display:block !important}
  body[data-depth] #systems .story-summary{display:none !important}
  .rv{opacity:1 !important; transform:none !important}
  *{text-shadow:none !important; animation:none !important; transition:none !important}
  main{padding-top:0}
  .hero{min-height:0; background:none; overflow:visible}
  .hero-in{min-height:0; display:block; padding:0 0 18px}
  .hero-copy{width:100%; margin:0; transform:none}
  .hero .eyebrow{font-size:8pt}
  .hero h1{font-size:24pt; margin-top:12px; max-width:none}
  .hero .lead{font-size:11pt; margin-top:14px}
  .hero .kpis{margin:18px 0 0}
  .hero .kpi{padding:8px 12px}
  .hero .kpi .v{font-size:9pt}
  .hero .kpi .k{font-size:8pt; margin-top:3px}
  .shell{display:block; padding:0}
  .content{max-width:none; font-size:10pt}
  section{padding-top:18px}
  section + section{margin-top:0; border:0; break-before:page}
  .sec-head{break-after:avoid}
  .sec-head h2{font-size:11pt}
  .sec-head .n,.sec-head .sub{font-size:8pt}
  .sec-intro{font-size:10pt; margin-top:10px; max-width:none}
  .about-grid{grid-template-columns:1fr 1fr; gap:22px; margin-top:16px}
  .about-grid h4{font-size:9pt; margin-bottom:8px}
  .about-grid li,#careerList .career-duties li{font-size:9pt; line-height:1.6}
  #careerList{gap:14px}
  #careerList .career-period{font-size:8pt}
  .rec{break-before:page; break-inside:auto; padding:0; margin:0; border:0}
  .rec:first-child{break-before:auto; margin-top:20px}
  .rec-head{break-inside:avoid; break-after:avoid}
  .rec h3{font-size:17pt}
  .rec-meta,.rec-no{font-size:8pt}
  .thesis{font-size:12pt; margin:16px 0; padding-left:12px; break-inside:avoid}
  .story{margin-top:18px; gap:12px}
  .row{grid-template-columns:76px minmax(0,1fr); gap:12px; break-inside:avoid}
  .row + .row{margin-top:12px}
  .row .k{font-size:8pt; padding-top:3px}
  .row .p{font-size:10pt; line-height:1.6}
  .metrics{margin-top:18px; padding-top:10px; break-inside:avoid}
  .metric .v{font-size:11pt}
  .metric .k{font-size:8pt}
  .plate{border-color:#ddd; padding:14px; margin-top:18px; break-inside:avoid}
  .plate .cap-top{font-size:8pt; margin-bottom:8px}
  .plate .cap-bot{font-size:8pt; line-height:1.5; margin-top:8px; padding-top:6px}
  .plate:last-of-type{break-after:avoid}
  #systems .dg{min-width:0}
  #systems .diagram-viewport{overflow:visible}
  .dg .nd rect,.dg .nd.t-dim rect{fill:#fff; stroke:#bbb}
  .dg .grp rect{stroke:#bbb}
  .dg text,.dg .nd text,.dg .nd.t-dim text,.dg g.nd.act > text{fill:#333}
  .foot{margin-top:10px; padding-top:6px; break-inside:avoid}
  .tag,.chip{font-size:8pt}
  .rb{grid-template-columns:1fr 1fr; gap:24px; margin-top:18px}
  .rb article,.stack > div{break-inside:avoid}
  .rb article h3{font-size:11pt}
  .rb article .k,.stack .g-head h4,.stack .g-head .note{font-size:8pt}
  .steps li{font-size:10pt}
  .stack{grid-template-columns:1fr 1fr; gap:24px; margin-top:18px}
  footer{margin-top:24px; padding:12px 0; font-size:9pt}
}

/* Incident references remain distinct from design decisions. */
.ref.incident-trigger{color:#fca5a5; border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.08)}
.ref.incident-trigger:hover{color:#fecaca; background:rgba(248,113,113,.16)}
.record-dialog[data-kind="incident"] .entry-id{color:#fca5a5}
.record-dialog[data-kind="incident"] .record-summary{border-left-color:var(--bad)}
.record-dialog[data-kind="incident"] .steps.accent li::before{color:#fca5a5}