:root{--bg:#000;--panel:#0b0f14;--line:#1f2a36;--ink:#e8eef4;--mut:#8a9bad;--blue:#6DB3F2;--green:#3DDC97;--amber:#F2B84B;
  --sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"Share Tech Mono",ui-monospace,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--ink);font:400 1.05rem/1.65 var(--sans)}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Banner with idle telemetry traces */
.intro{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:0 1.5rem}
.traces{position:absolute;inset:0;width:100%;height:100%}
.traces path{fill:none;stroke:var(--blue);stroke-width:1.2}
.traces .base{opacity:.2}
.traces .run{stroke-width:2.4}
@keyframes sweep{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.title{position:relative;z-index:2;background:#000;padding:clamp(1.75rem,4vw,3rem) clamp(1.75rem,6vw,4.5rem);box-shadow:0 0 50px 24px rgba(0,0,0,.92)}
.title h1{font:600 clamp(3rem,10vw,7.5rem)/.95 var(--sans);letter-spacing:-.03em;margin:0 0 1rem}
.title .role{font-size:clamp(1.05rem,2.2vw,1.5rem);color:var(--blue);margin:0 0 1.5rem}
.status{font:400 1.01rem var(--mono);color:var(--mut);margin:0}
.status::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--green);margin-right:.6rem;animation:blink 3s ease-in-out infinite}
.cue{position:absolute;bottom:1.5rem;left:0;right:0;font:400 0.9rem var(--mono);color:var(--mut)}
@keyframes blink{50%{opacity:.35}}

/* Pipeline rail */
.rail{position:sticky;top:0;z-index:10;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding:.75rem 1rem;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.rail a{font:500 0.95rem var(--mono);color:var(--mut);text-decoration:none;padding:.4rem .8rem;border:1px solid var(--line);border-radius:6px;transition:color .3s,border-color .3s}
.rail a::before{content:"○ "}
.rail a[data-s=run]{color:var(--blue);border-color:var(--blue)}
.rail a[data-s=run]::before{content:"● ";animation:blink 2s ease-in-out infinite}
.rail a[data-s=pass]{color:var(--green);border-color:#1e5a42}
.rail a[data-s=pass]::before{content:"✓ "}

/* Stages */
.stage{max-width:56rem;margin:0 auto;padding:6rem 1.5rem;scroll-margin-top:3.5rem;position:relative}
#contact{min-height:60vh}
.label{font:500 0.95rem var(--mono);color:var(--mut);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .75rem}
.stage h2{font:600 clamp(1.8rem,4vw,2.6rem)/1.1 var(--sans);letter-spacing:-.01em;margin:0 0 1.2rem}
.stage p{max-width:62ch}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr);margin:0}
.grid div{padding:1.2rem 1.4rem}
.grid dt{font:400 1rem var(--mono);color:var(--green);margin-bottom:.5rem;letter-spacing:.04em}
.grid dd{margin:0;font:400 1.02rem/1.6 var(--mono);color:#cfe3f3}

/* Postmortems */
.bx{position:relative;margin-bottom:1.1rem}
.bx:has(details[open]){--c:var(--blue)}
details[open]{--c:var(--blue)}
summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;display:flex;gap:1rem;align-items:baseline;font-weight:600}
summary::-webkit-details-marker{display:none}
summary .id{font:500 0.9rem var(--mono);color:var(--mut)}
summary::after{content:"+";margin-left:auto;font:500 1.34rem var(--mono);color:var(--blue)}
details[open] summary::after{content:"\2212"}
.pm{padding:0 1.25rem 1.25rem;display:grid;gap:1rem}
.pm h3{font:500 0.9rem var(--mono);color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .2rem}
.pm p{margin:0}
.todo{color:var(--amber)}
.links{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font:500 1.12rem var(--mono)}

footer{padding:2rem 1.5rem 4rem;text-align:center;color:var(--mut);font:400 0.95rem var(--mono)}

/* Build log readout */
.log{position:fixed;left:1rem;bottom:1rem;z-index:10;margin:0;padding:.6rem .8rem;font:400 .75rem/1.5 var(--mono);color:var(--mut);
  background:rgba(0,0,0,.85);border:1px solid var(--line);border-radius:8px;white-space:pre}
.log:empty{display:none}
@media(max-width:60rem){.log{display:none}}
@media(prefers-reduced-motion:reduce){.traces .run,.status::before,.rail a::before{animation:none}html{scroll-behavior:auto}}

/* Matrix-style stack text */
.grid dt::before{content:"> "}
.grid dt::after{content:"_";animation:cursor 1.2s steps(2) infinite}
@keyframes cursor{50%{opacity:0}}
@media(max-width:40rem){.grid{grid-template-columns:1fr}}


/* Section dividers: short solid lead-in, then dashes */
.stage+.stage::before{content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;
  background:linear-gradient(var(--blue),var(--blue)) left/5rem 100% no-repeat,repeating-linear-gradient(90deg,#2a3a4a 0 8px,transparent 8px 16px)}

@media(prefers-reduced-motion:reduce){.grid dt::after{animation:none}}

/* Cursor dot field */
.mesh{position:absolute;inset:0;width:100%;height:100%}

/* Contact tiles: corner brackets that close into a full box on hover */
.prompt{font:400 1.1rem var(--mono);color:var(--green);margin:2.5rem 0 0}
.prompt::after{content:"_";animation:cursor 1.2s steps(2) infinite}
.tiles{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}
@media(max-width:48rem){.tiles{grid-template-columns:1fr}}
.tile .k{font:400 1rem var(--mono);color:var(--green);text-transform:uppercase;letter-spacing:.1em}
.tile .v{font:400 1.15rem/1.35 var(--mono);color:#cfe3f3;overflow-wrap:anywhere}
.tile .go{font:400 1.4rem var(--mono);color:var(--blue);transition:transform .25s}
.tile:hover .go,.tile:focus-visible .go{transform:translateX(8px)}
@media(prefers-reduced-motion:reduce){.prompt::after{animation:none}.tile,.tile .go{transition:none}}

/* Open-corner boxes: line weight --t, tapered line ends --tp (outer edge runs longer than the inner edge) */
:root{--t:2px;--tp:6px}
.grid div,.bx{position:relative;--c:#5f9bd0}
.grid div::before,.bx::before{content:"";position:absolute;inset:0;background:var(--c);pointer-events:none;
  clip-path:polygon(0 0,28% 0,calc(28% - var(--tp)) var(--t),var(--t) var(--t),var(--t) calc(100% - var(--t)),calc(100% - var(--tp)) calc(100% - var(--t)),100% 100%,0 100%)}
.grid div:nth-child(even)::before{
  clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,calc(72% + var(--tp)) calc(100% - var(--t)),calc(100% - var(--t)) calc(100% - var(--t)),calc(100% - var(--t)) var(--t),var(--tp) var(--t))}
/* Corner brackets: top-right and bottom-left, arm length --A */
.title,.tile{--A:26px}
.title{--A:44px;--c:var(--blue)}
.title::before,.tile::before{content:"";position:absolute;inset:auto;top:0;right:0;width:var(--A);height:var(--A);background:var(--c);pointer-events:none;
  clip-path:polygon(100% 0,0 0,var(--tp) var(--t),calc(100% - var(--t)) var(--t),calc(100% - var(--t)) calc(100% - var(--tp)),100% 100%)}
.title::after,.tile::after{content:"";position:absolute;left:0;bottom:0;width:var(--A);height:var(--A);background:var(--c);pointer-events:none;
  clip-path:polygon(0 100%,100% 100%,calc(100% - var(--tp)) calc(100% - var(--t)),var(--t) calc(100% - var(--t)),var(--t) var(--tp),0 0)}
.tile{--c:#5f9bd0;position:relative;display:grid;gap:.6rem;align-content:start;padding:1.5rem 1.6rem;text-decoration:none;color:var(--ink);transition:background-color .3s,box-shadow .3s}
.tile:hover,.tile:focus-visible{--c:var(--blue);background-color:rgba(109,179,242,.07);box-shadow:inset 0 0 0 1px rgba(109,179,242,.3)}

/* Circuit nodes on the banner traces */
.nodes{position:absolute;inset:0;pointer-events:none;z-index:1}
.node{position:absolute;transform:translate(-50%,-50%);border-radius:50%}
.node.ring{width:var(--s);aspect-ratio:1;background:#000;border:1.5px solid var(--blue)}
.node.ring::after{content:"";position:absolute;inset:34%;border-radius:50%;background:rgba(109,179,242,.35)}
.node.dot{width:7px;height:7px;background:var(--blue);box-shadow:0 0 10px rgba(109,179,242,.55)}

/* About + photo */
.about{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center}
.photo{width:168px;height:168px;border-radius:50%;object-fit:cover;background:var(--panel);border:2px solid var(--blue);box-shadow:0 0 0 8px #000,0 0 0 9px #2a4a66}
@media(max-width:44rem){.about{grid-template-columns:1fr}.photo{order:-1;width:140px;height:140px}}

/* Contact: full-width rows so nothing wraps or misaligns */
.tiles{grid-template-columns:1fr;gap:1rem}
.tile{grid-template-columns:9rem 1fr auto;align-items:center;align-content:center;gap:1.25rem;padding:1.3rem 1.6rem}
.tile .v{font-size:clamp(1rem,2.4vw,1.25rem);overflow-wrap:break-word}
@media(max-width:40rem){.tile{grid-template-columns:1fr auto}.tile .k{grid-column:1/-1}}

/* Banner polish: soft tube glow, breathing nodes, telemetry labels */
.traces .glow{stroke-width:8;opacity:.2}
@keyframes ping{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes dim{0%,100%{opacity:.45}50%{opacity:1}}
.node.ring::after{animation:ping 4s ease-in-out infinite;animation-delay:var(--pd,0s)}
.node.dot{animation:dim 5s ease-in-out infinite;animation-delay:var(--pd,0s)}
.node:nth-child(3n){--pd:-1.3s}.node:nth-child(3n+1){--pd:-2.6s}
.nlabel{position:absolute;font:400 .85rem var(--mono);letter-spacing:.06em;color:#6f8fa8;white-space:nowrap}
.nlabel.l{transform:translate(calc(-100% - 22px),-50%)}
.nlabel.r{transform:translate(22px,-50%)}
@media(max-width:60rem){.nlabel{display:none}}
@media(prefers-reduced-motion:reduce){.node,.node::after{animation:none}}

/* Contact CTA: closed terminal box with a square button. --k scales the whole thing. */
:root{--k:.7;--ch:calc(7.5rem*var(--k))}
.cta{display:grid;grid-template-columns:1fr auto;gap:calc(1rem*var(--k));align-items:start;margin:1.75rem 0 0}
.term{min-height:var(--ch);padding:calc(1.2rem*var(--k)) calc(1.5rem*var(--k));border:2px solid #5f9bd0;background:#05090d;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 0 calc(40px*var(--k)) rgba(61,220,151,.06);display:flex;flex-direction:column;justify-content:center;gap:calc(.4rem*var(--k));
  font:400 calc(clamp(1.1rem,2.5vw,1.55rem)*var(--k))/1.35 var(--mono)}
.term p{margin:0;max-width:none}
.term .pr{color:var(--green)}
.t1{color:#9fb6c9}
.t2{color:var(--ink)}
.caret{display:inline-block;width:.55em;height:1.05em;background:var(--green);vertical-align:-.15em;margin-left:.15em;animation:cursor 1s steps(2) infinite}
.cta-btn{width:var(--ch);height:var(--ch);display:grid;place-content:center;gap:calc(.4rem*var(--k));text-align:center;text-decoration:none;
  background:var(--blue);color:#000;border:2px solid var(--blue);font:400 calc(1.15rem*var(--k))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,color .2s}
.cta-btn b{font:400 calc(1.6rem*var(--k)) var(--mono);transition:transform .25s}
.cta-btn:hover,.cta-btn:focus-visible{background:#000;color:var(--blue)}
.cta-btn:hover b,.cta-btn:focus-visible b{transform:translateX(6px)}
@media(max-width:40rem){:root{--k:.85;--ch:calc(7.5rem*var(--k))}.t2{min-height:2.7em}}
@media(prefers-reduced-motion:reduce){.caret{animation:none}.cta-btn,.cta-btn b{transition:none}}

/* Postmortem outlines by position: 1 bottom-left L, 2 top-right L, 3 corner brackets (top-left + bottom-right), 4 bottom-left L */
.bx:nth-of-type(2)::before{clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,calc(72% + var(--tp)) calc(100% - var(--t)),calc(100% - var(--t)) calc(100% - var(--t)),calc(100% - var(--t)) var(--t),var(--tp) var(--t))}
.bx:nth-of-type(3){--A:26px}
.bx:nth-of-type(3)::before{inset:auto;top:0;left:0;width:var(--A);height:var(--A);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--tp)) var(--t),var(--t) var(--t),var(--t) calc(100% - var(--tp)),0 100%)}
.bx:nth-of-type(3)::after{content:"";position:absolute;right:0;bottom:0;width:var(--A);height:var(--A);background:var(--c);pointer-events:none;
  clip-path:polygon(100% 100%,0 100%,var(--tp) calc(100% - var(--t)),calc(100% - var(--t)) calc(100% - var(--t)),calc(100% - var(--t)) var(--tp),100% 0)}