/* Serj Goldman — personal site (preview). Type: IBM Plex Serif / Sans / Mono, self-hosted.
   Iteration 1: warm brass accent on three roles, blue demoted to service colour,
   service type raised to 12-13px, atmospheric background over the whole document,
   article sidebar replaced with a horizontal fact band.
   Iteration 2: each competency page gets its own diagram shape (ring / funnel / scale / dual
   circuit) instead of one shared flow component, a contact block replaces the CV-only card
   before the footer, remaining service type raised to 12px.
   Iteration 3: three new diagram shapes (branch / depts / cnv) for the three new competency
   pages, gamification ring centred, production scale carries two-colour meaning instead of a
   bare tick count, remaining 11.5-11.8px service type raised to 12px across the board.
   Iteration 4: nav moved to its own full-width strip below the logo/tools row on every
   desktop width (no more cramming 9 labels into whatever space was left, no hidden
   scrollbar); branch and cnv diagrams centred the same way the gamification ring was
   in iteration 3, closing the same dead-zone bug in new code.
   Iteration 5: .hdr-in no longer zeroes its side padding, so the header sits on the
   same grid as the content on every width down to 390px; new ledger diagram shape for
   the business/planning competency (four rows plus a closing line); index hub map gets
   a lead line (.idx-lead) and moves right under the first screen.
   Iteration 7: new harmon diagram (Dan Harmon's story circle, eight steps on all eight
   outer cells of a 3x3 grid, same trick the four-item gamification ring already used on
   its corners) embedded inside a narrative.html text block, not at the top of the page;
   the sticky-header static breakpoint widens from 980px to 1024px so the 981-1024px
   laptop band stops holding a two-row nav in place through the whole scroll. */

@font-face{font-family:'Plex Serif';src:url('../fonts/IBMPlexSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Serif';src:url('../fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#0c0f14;
  --bg-soft:#11151c;
  --panel:rgba(18,22,29,.62);
  --rule:#242c37;
  --rule-soft:#1a212a;
  --ink:#eae7e0;
  --ink-2:#b7bec8;
  --ink-3:#8e98a6;
  --ink-4:#7c8695;
  --brass:#c9a257;
  --brass-dim:#6d5730;
  --blue:#7f9dbe;
  --navy:#17456e;
  --measure:640px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:'Plex Sans','Helvetica Neue',sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* film grain over the whole page: the texture that carries "expensive" without photography */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
.page{position:relative;z-index:1;isolation:isolate}
/* atmosphere runs the full height of the document, not only the first screen */
.page::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(115% 42% at 4% 0%, rgba(23,69,110,.52), transparent 62%),
    radial-gradient(70% 22% at 100% 4%, rgba(201,162,87,.09), transparent 64%),
    radial-gradient(95% 26% at 62% 38%, rgba(23,69,110,.17), transparent 72%),
    radial-gradient(85% 24% at 18% 72%, rgba(94,72,48,.20), transparent 70%),
    radial-gradient(90% 26% at 80% 96%, rgba(23,69,110,.20), transparent 72%);
}

a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- header ----------
   iteration 4: nav moved off the brand/tools row entirely. Two lines always
   (logo+tools on top, nav as its own full-width strip below, wrap allowed)
   instead of forcing 9 labels into whatever space was left of the logo.
   No horizontal scroll, no hidden scrollbar, no fade mask: what does not fit
   on one line wraps to a second inside the nav strip, still fully visible. */
.hdr{position:sticky;top:0;z-index:30;background:rgba(12,15,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;column-gap:clamp(14px,2.2vw,26px);row-gap:10px;padding:14px clamp(20px,4vw,48px)}
.brand{display:flex;align-items:center;gap:11px}
.mono{width:31px;height:31px;flex:none;display:grid;place-items:center;border:1px solid var(--brass-dim);color:var(--brass);font-family:'Plex Mono',monospace;font-size:12px;letter-spacing:.04em}
.brand b{font-family:'Plex Serif',serif;font-weight:600;font-size:1rem;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.nav{order:3;width:100%;margin:0;padding-top:12px;border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px clamp(14px,2vw,26px);align-items:center;min-width:0}
.nav a{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--brass);border-bottom-color:var(--brass)}
.tools{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.lang{display:flex;border:1px solid var(--rule);font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em}
.lang a{padding:6px 11px;color:var(--ink-3);transition:color .18s ease,background .18s ease}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--ink);color:#0c0f14}
.cv{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brass-dim);color:var(--brass);font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px;transition:background .2s ease,color .2s ease,border-color .2s ease}
.cv:hover{background:var(--brass);border-color:var(--brass);color:#0c0f14}
.cv svg{width:12px;height:12px;flex:none}

/* ---------- masthead ---------- */
.masthead{padding-top:clamp(44px,7vw,84px);padding-bottom:clamp(34px,5vw,58px)}
.mast-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.status{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass-dim);padding:8px 14px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.status::before{content:'';width:5px;height:5px;background:var(--brass);border-radius:50%;flex:none}
.eyebrow{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
h1.name{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(2.9rem,9.5vw,6.2rem);line-height:.94;letter-spacing:-.025em;color:var(--ink);margin-top:22px}
.role{font-family:'Plex Serif',serif;font-size:clamp(1.05rem,2.5vw,1.55rem);line-height:1.4;color:#cdd5df;margin-top:20px;max-width:30ch}
.role em{font-style:normal;color:var(--brass)}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);margin-top:clamp(36px,6vw,64px)}
.lead p{font-family:'Plex Serif',serif;font-size:1.14rem;line-height:1.7;color:#d5d1c9;max-width:56ch}
.lead p + p{margin-top:16px}
.facts{border-top:1px solid var(--rule)}
.facts .f{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.facts dt{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.facts dd{font-size:.95rem;line-height:1.5;color:var(--ink)}

/* photo pass: hero portrait, a narrow framed figure in the facts column, not full width */
.hero-side{display:flex;flex-direction:column;gap:24px}
.portrait{max-width:260px;border:1px solid var(--brass-dim);padding:7px;background:var(--panel)}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;filter:saturate(.92)}

/* ---------- proof numbers ---------- */
.statband{padding-top:clamp(26px,4vw,40px);padding-bottom:clamp(40px,6vw,70px)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.st{border-top:1px solid var(--rule);padding-top:16px}
.stn{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1;letter-spacing:-.02em;color:var(--brass)}
.stc{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:12px;line-height:1.5}
.stats-cap{margin-top:clamp(20px,3vw,30px);font-family:'Plex Serif',serif;font-size:1rem;color:var(--ink-3);max-width:56ch}

/* ---------- sections ---------- */
.sec{padding-top:clamp(46px,7vw,88px);padding-bottom:clamp(46px,7vw,88px);border-top:1px solid var(--rule)}
.sec.tint{position:relative}
.sec.tint::before{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(143,179,217,.045),rgba(143,179,217,.008) 46%,rgba(143,179,217,0))}
.sec-label{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:14px;margin-bottom:clamp(24px,3vw,40px)}
.sec-label::before{content:'';width:26px;height:1px;background:var(--brass);flex:none}
h2.sec-title{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.14;color:var(--ink);letter-spacing:-.01em;margin-bottom:clamp(20px,3vw,32px)}

/* ---------- competency index (hub, moved right under the first screen in iteration 5) ---------- */
.idx-lead{font-family:'Plex Serif',serif;font-size:1.05rem;line-height:1.6;color:var(--ink-2);max-width:56ch;margin-top:-6px;margin-bottom:clamp(16px,2.4vw,26px)}
.idx{border-top:1px solid var(--rule)}
.idx .row{display:grid;grid-template-columns:56px minmax(0,1.05fr) minmax(0,1.25fr) 30px;gap:clamp(14px,2.4vw,28px);align-items:baseline;padding:26px 14px;margin:0 -14px;border-bottom:1px solid var(--rule);transition:background .22s ease}
.idx .row:hover{background:linear-gradient(90deg,rgba(201,162,87,.08),rgba(201,162,87,0) 72%)}
.idx .row:last-child{border-bottom:0}
.idx .num{font-family:'Plex Mono',monospace;font-size:.82rem;letter-spacing:.1em;color:var(--blue)}
.idx .rt{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(1.25rem,2.7vw,1.72rem);line-height:1.16;color:var(--ink);letter-spacing:-.01em}
.idx .rd{font-size:.94rem;line-height:1.55;color:var(--ink-3)}
.idx .row:hover .rd{color:var(--ink-2)}
.idx .ar{font-family:'Plex Mono',monospace;color:var(--ink-3);justify-self:end;transition:transform .22s ease,color .22s ease}
.idx .row:hover .ar{color:var(--brass);transform:translateX(5px)}

/* ---------- case strip (agent) ---------- */
.case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,44px);align-items:center;
  margin-top:clamp(28px,4vw,44px);padding:clamp(22px,3vw,30px);border:1px solid var(--rule);
  background:linear-gradient(115deg,rgba(201,162,87,.05),rgba(201,162,87,0) 62%);
  transition:border-color .22s ease,background .22s ease}
.case:hover{border-color:var(--brass-dim);background:linear-gradient(115deg,rgba(201,162,87,.09),rgba(201,162,87,0) 68%)}
.case-k{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.case h3{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.2;color:var(--ink);margin-top:12px;letter-spacing:-.01em}
.case p{margin-top:10px;font-size:.95rem;line-height:1.55;color:var(--ink-3);max-width:62ch}
.case:hover p{color:var(--ink-2)}
.case .go{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;transition:color .22s ease}
.case .go i{font-style:normal;display:inline-block;transition:transform .22s ease}
.case:hover .go{color:var(--brass)}
.case:hover .go i{transform:translateX(5px)}

/* cross-link between related pages */
.quiet.xlink{margin-top:clamp(30px,4vw,46px)}

/* ---------- track record ---------- */
.tl{border-top:1px solid var(--rule)}
.tl-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(16px,3vw,36px);padding:26px 0;border-bottom:1px solid var(--rule-soft)}
.tl-when{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:6px}
.tl-role{font-family:'Plex Serif',serif;font-weight:600;font-size:1.22rem;color:var(--ink);line-height:1.3}
.tl-org{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-top:7px}
.tl-body{margin-top:12px;font-size:.97rem;max-width:var(--measure)}

/* game titles: serif plates, deliberately unlike the mono skill lists */
.tcards{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tcard{border:1px solid var(--rule);border-left:2px solid var(--brass-dim);padding:13px 19px;font-family:'Plex Serif',serif;font-size:1.04rem;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.014),transparent)}

/* ---------- article pages ---------- */
.pghead{padding-top:clamp(46px,8vw,100px);padding-bottom:clamp(24px,3.5vw,40px)}
.pgnum{font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
h1.pgtitle{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(2.1rem,6vw,3.9rem);line-height:1.02;letter-spacing:-.022em;color:var(--ink);margin-top:16px;max-width:18ch}
.pglead{font-family:'Plex Serif',serif;font-size:clamp(1.08rem,2.2vw,1.32rem);line-height:1.6;color:#d5d1c9;margin-top:24px;max-width:58ch;border-left:2px solid var(--blue);padding-left:22px}

/* fact band: what used to hang in a dead right column */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(10px,2vw,18px)}
.band > *{background:var(--panel);padding:20px}
/* personal.html carries six facts, not the usual three or four: auto-fit at
   minmax(200px,1fr) leaves five columns on desktop and strands one lone cell
   alone in an 80%-empty second row. A fixed 3x2 grid closes it (photo pass). */
.band.band-6{grid-template-columns:repeat(3,1fr)}
.band .bk{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.band .bv{font-size:.95rem;color:var(--ink);margin-top:8px;line-height:1.45}
.band .bs{background:linear-gradient(150deg,rgba(201,162,87,.10),rgba(201,162,87,.01) 70%),var(--panel)}
.band .bs .stn{font-size:clamp(2.1rem,3.6vw,2.9rem)}
.band .bs .stc{margin-top:10px}

/* page anchor diagram: lines and type only, no clip art */
.dia{margin-top:clamp(26px,4vw,40px);padding:clamp(20px,3vw,28px);border:1px solid var(--rule);
  background:linear-gradient(160deg,rgba(201,162,87,.05),rgba(201,162,87,0) 58%)}
.dia-l{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.dflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:22px;border-top:1px solid var(--rule)}
.dstep{position:relative;padding:20px 18px 4px 0;font-family:'Plex Serif',serif;font-size:1.06rem;line-height:1.3;color:var(--ink)}
.dstep::before{content:'';position:absolute;top:-1px;left:0;width:26px;height:2px;background:var(--brass)}
.dstep i{display:block;font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;color:var(--ink-3);margin-bottom:10px}
.dloop-back{position:relative;height:30px;margin-top:2px;border-left:1px dashed var(--brass-dim);border-right:1px dashed var(--brass-dim);border-bottom:1px dashed var(--brass-dim)}
.dloop-back span{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:var(--bg);padding:0 10px;color:var(--brass);font-size:1rem;line-height:1}
.dloop-back span::after{content:'\21ba'}
.dgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dcell{border:1px solid var(--rule);padding:9px 15px;font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.05em;color:var(--ink-2);background:rgba(255,255,255,.014)}

/* gamification: a closed loop, four stops around a return icon, not a row with a dashed box */
.ring{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px auto 0;max-width:520px}
.ring .rstep{border:1px solid var(--rule);border-top:2px solid var(--brass-dim);padding:15px 16px;font-family:'Plex Serif',serif;font-size:.98rem;line-height:1.3;color:var(--ink);background:rgba(255,255,255,.014);display:flex;flex-direction:column;justify-content:center;min-height:74px}
.ring .rstep i{font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;color:var(--ink-3);margin-bottom:6px}
.ring .rstep:nth-child(1){grid-column:1;grid-row:1}
.ring .rstep:nth-child(2){grid-column:3;grid-row:1}
.ring .rstep:nth-child(4){grid-column:3;grid-row:3}
.ring .rstep:nth-child(5){grid-column:1;grid-row:3}
.ring-core{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center}
.ring-core span{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px dashed var(--brass-dim);border-radius:50%;color:var(--brass);font-size:1.4rem;line-height:1}

/* marketing: sources feed a narrowing funnel, top to bottom */
.funnel{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:22px}
.fstep{width:var(--fw);max-width:100%;text-align:center;padding:13px 12px;border:1px solid var(--rule);border-top:2px solid var(--brass-dim);background:rgba(201,162,87,.045);font-family:'Plex Serif',serif;font-size:.98rem;color:var(--ink);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
.fstep i{display:block;font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;color:var(--ink-3);margin-bottom:5px}

/* production: a horizontal release scale, not four equal cells */
.scale{margin-top:28px}
.scale-row{position:relative;display:flex;justify-content:space-between;padding-top:30px}
.scale-row::before{content:'';position:absolute;left:0;right:0;top:24px;height:1px;background:var(--rule)}
.tick{position:relative;display:flex;flex-direction:column;align-items:center}
.tick i{order:1;font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;color:var(--ink-3);margin-bottom:8px}
.tick::after{content:'';order:2;width:2px;height:14px;background:var(--brass)}
.tick-b::after{background:var(--blue)}
.scale-ends{display:flex;justify-content:space-between;margin-top:12px;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.scale-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.sleg{display:flex;align-items:center;gap:8px;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.06em;color:var(--ink-3)}
.sleg::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--brass);flex:none}
.sleg-b::before{background:var(--blue)}
.scale-cap{margin-top:18px;font-family:'Plex Serif',serif;font-size:1rem;color:var(--ink)}

/* ai: two parallel circuits side by side, mine and the one deployed for someone else */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px);margin-top:24px}
.lane{border-top:1px solid var(--rule);padding-top:16px}
.lane+.lane{border-left:1px solid var(--rule-soft);padding-left:clamp(18px,3vw,32px)}
.lane-h{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.lflow{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.lstep{font-family:'Plex Serif',serif;font-size:.94rem;color:var(--ink);display:flex;gap:10px;align-items:baseline}
.lstep i{font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;color:var(--ink-3);min-width:20px}

/* narrative: a trunk of the story, a gate where the player chooses, two forks after it */
.branch{margin:24px auto 0;max-width:460px}
.btrunk{display:flex;flex-direction:column;gap:12px;max-width:300px}
.bstep{font-family:'Plex Serif',serif;font-size:.98rem;line-height:1.3;color:var(--ink);display:flex;gap:10px;align-items:baseline}
.bstep i{font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;color:var(--ink-3);min-width:20px}
.bgate{display:flex;align-items:center;gap:14px;margin:18px 0;max-width:460px;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.bgate::before,.bgate::after{content:'';flex:1;height:1px;background:var(--rule)}
.bforks{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:460px}
.bfork{border:1px solid var(--rule);border-top:2px solid var(--brass-dim);padding:14px 16px;font-family:'Plex Serif',serif;font-size:.96rem;color:var(--ink);background:rgba(255,255,255,.014)}
.branch-note{margin-top:16px;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.06em;color:var(--ink-3)}

/* teams: departments built from zero as ladders, analytics as an embedded dashed line, not a tower */
.depts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,28px);margin-top:26px;align-items:end}
.dcol{display:flex;flex-direction:column;align-items:center;text-align:center}
.drungs{display:flex;flex-direction:column;gap:6px;width:100%}
.drung{border:1px solid var(--rule);border-top:2px solid var(--brass-dim);padding:10px 6px;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.05em;color:var(--ink-2);background:rgba(255,255,255,.014)}
.dcol-name{margin-top:10px;font-family:'Plex Serif',serif;font-size:.94rem;color:var(--ink)}
.dcol-thin{justify-content:flex-end}
.dthin{width:100%;height:0;border-top:1px dashed var(--brass-dim);margin-bottom:12px}
.dcol-note{font-family:'Plex Mono',monospace;font-size:.75rem;color:var(--ink-3);line-height:1.4;margin-top:4px}

/* creative: four audience motives converge into one formula */
.cnv{margin:24px auto 0;max-width:440px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmot{border:1px solid var(--rule);border-top:2px solid var(--blue);padding:12px 14px;text-align:center;font-family:'Plex Mono',monospace;font-size:.78rem;letter-spacing:.05em;color:var(--ink-2);background:rgba(255,255,255,.014)}
.cline{width:1px;height:26px;background:var(--rule);margin:0 auto}
.cout{border:1px solid var(--brass-dim);border-top:2px solid var(--brass);padding:14px 18px;text-align:center;font-family:'Plex Serif',serif;font-size:1rem;color:var(--ink);background:linear-gradient(160deg,rgba(201,162,87,.09),rgba(201,162,87,0) 70%)}

/* business: a boardroom ledger, four lines any pitch or budget has to answer for */
.ledger{max-width:var(--measure);margin:22px auto 0;border-top:1px solid var(--rule)}
.lg-row{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.lg-mark{width:2px;height:100%;min-height:34px;background:var(--brass-dim);align-self:stretch}
.lg-k{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.lg-v{font-family:'Plex Serif',serif;font-size:.98rem;line-height:1.42;color:var(--ink);margin-top:6px}
.ledger-foot{margin-top:18px;font-family:'Plex Serif',serif;font-size:1rem;color:var(--ink)}

/* narrative: Dan Harmon's story circle, drawn as a ring, not just named in prose.
   Same trick the gamification ring uses on four corners of a 3x3 grid, extended to
   all eight outer cells; the centre keeps only the schematic return arrow, no
   per-step icons and no genre examples inside the diagram itself. */
.harmon{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(74px,auto));gap:10px;margin:26px auto 0;max-width:560px}
.harmon .hstep{border:1px solid var(--rule);border-top:2px solid var(--brass-dim);padding:13px 14px;font-family:'Plex Serif',serif;font-size:.92rem;line-height:1.28;color:var(--ink);background:rgba(255,255,255,.014);display:flex;flex-direction:column;justify-content:center}
.harmon .hstep i{font-style:normal;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;color:var(--ink-3);margin-bottom:6px}
.harmon .hstep:nth-child(1){grid-column:1;grid-row:1}
.harmon .hstep:nth-child(2){grid-column:2;grid-row:1}
.harmon .hstep:nth-child(3){grid-column:3;grid-row:1}
.harmon .hstep:nth-child(4){grid-column:3;grid-row:2}
.harmon .hstep:nth-child(5){grid-column:3;grid-row:3}
.harmon .hstep:nth-child(6){grid-column:2;grid-row:3}
.harmon .hstep:nth-child(7){grid-column:1;grid-row:3}
.harmon .hstep:nth-child(8){grid-column:1;grid-row:2}
.harmon-core{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center}
.harmon-core span{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px dashed var(--brass-dim);border-radius:50%;color:var(--brass);font-size:1.2rem;line-height:1}

/* single measured column, no dead half of the screen */
.longread{max-width:var(--measure);margin:0 auto;padding:clamp(34px,5vw,58px) 0 clamp(18px,3vw,28px)}
.block + .block{margin-top:clamp(34px,4.5vw,52px)}
.block h2{font-family:'Plex Serif',serif;font-weight:600;font-size:1.42rem;color:var(--ink);letter-spacing:-.008em}
.block h3{font-family:'Plex Serif',serif;font-weight:600;font-size:1.16rem;color:var(--ink);margin-top:4px}
.block p{margin-top:14px}
.meta{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.job{border-top:1px solid var(--rule);padding-top:22px;margin-top:32px}
ul.bul{list-style:none;margin-top:16px}
ul.bul li{position:relative;padding-left:24px;margin-top:12px;font-size:1rem;line-height:1.58}
ul.bul li::before{content:'';position:absolute;left:0;top:.78em;width:12px;height:1px;background:var(--blue)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.card{border:1px solid var(--rule-soft);border-top:2px solid var(--brass-dim);padding:16px;font-size:.92rem;line-height:1.52;color:var(--ink-2);background:rgba(255,255,255,.014)}

ol.numlist{list-style:none;counter-reset:n;margin-top:18px}
ol.numlist li{position:relative;counter-increment:n;padding-left:42px;margin-top:16px;font-size:1rem;line-height:1.56}
ol.numlist li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:'Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;color:var(--brass)}

.pull{position:relative;margin-top:clamp(34px,5vw,54px);padding-top:30px}
.pull::before{content:'';position:absolute;top:0;left:0;width:58px;height:2px;background:var(--brass)}
.pull p{font-family:'Plex Serif',serif;font-size:clamp(1.15rem,2.4vw,1.48rem);line-height:1.45;color:var(--ink)}

.skills{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:clamp(32px,4vw,46px);padding-top:20px;border-top:1px solid var(--rule-soft)}
.skills span{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.05em;color:var(--ink-3);padding-bottom:3px;border-bottom:1px solid var(--rule)}
.stackwrap{margin-top:clamp(32px,4vw,46px)}
.stack{display:flex;flex-wrap:wrap;font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.04em;color:var(--ink-2);line-height:2}
.stack span+span::before{content:'\00b7';color:var(--brass);margin:0 10px}

/* contact block: the one thing a hiring manager needs, at full size, before the footer */
.contact{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 26px;
  margin-top:clamp(36px,5vw,56px);padding:clamp(22px,3.2vw,32px);border:1px solid var(--rule);
  background:linear-gradient(115deg,rgba(201,162,87,.07),rgba(201,162,87,0) 62%)}
.contact-label{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);width:100%}
.contact-email{font-family:'Plex Serif',serif;font-weight:600;font-size:clamp(1.4rem,3.4vw,1.9rem);color:var(--ink);letter-spacing:-.01em;border-bottom:1px solid var(--rule);padding-bottom:4px;transition:color .2s ease,border-color .2s ease}
.contact-email:hover{color:var(--brass);border-color:var(--brass-dim)}
.contact-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.contact-links a:not(.cv){font-family:'Plex Mono',monospace;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:3px;transition:color .18s ease,border-color .18s ease}
.contact-links a:not(.cv):hover{color:var(--brass);border-color:var(--brass-dim)}

.pager{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--rule);padding:26px 0}
.pager a{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);transition:color .18s ease}
.pager a:hover{color:var(--brass)}

/* ---------- quiet personal strip ---------- */
.quiet{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:24px 0;margin-top:8px}
.quiet p{font-size:.96rem;color:var(--ink-3);max-width:62ch}
.quiet a{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule);padding-bottom:3px;white-space:nowrap;transition:color .18s ease,border-color .18s ease}
.quiet a:hover{color:var(--brass);border-color:var(--brass-dim)}

/* ---------- photos (kept for the day real photos exist; no empty frames are rendered) ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,32px);margin-top:26px}
.solo{max-width:420px;margin:26px 0 0}
.ph{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--rule)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.ph.wide{aspect-ratio:4/3}
.ph-cap{margin-top:10px;font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.06em;color:var(--ink-3);line-height:1.5;max-width:46ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:44px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:end}
.foot .who{font-family:'Plex Serif',serif;font-size:1.24rem;color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s ease,border-color .18s ease}
.foot .who:hover{color:var(--brass);border-color:var(--brass-dim)}
.foot .con{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.94rem}
.foot .con a{color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:2px;transition:color .18s ease,border-color .18s ease}
.foot .con a:hover{color:var(--brass);border-color:var(--brass-dim)}
.foot .fine{font-family:'Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-top:22px}

/* ---------- entrance ---------- */
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.rise{animation:rise .64s cubic-bezier(.2,.72,.2,1) both}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.3s}.d5{animation-delay:.4s}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .brand b{display:none}
}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:34px}
  .idx .row{grid-template-columns:44px minmax(0,1fr);row-gap:8px;padding:22px 0;margin:0}
  .idx .rd{grid-column:2}
  .idx .ar{display:none}
  .tl-item{grid-template-columns:1fr;gap:8px}
  .tl-when{padding-top:0}
}
@media (max-width:1024px){
  /* iteration 6 set this at 980px; iteration 7 widens it to 1024px. Between 981
     and 1024 the nav strip still wraps to two rows (finding 5, iter 6 critic),
     so a sticky header there held 166px, about a fifth of an 800px-tall laptop
     window, on every scroll. Same fix as the phone case below: nothing hidden,
     the header just stops chasing the scroll and moves with the content. */
  .hdr{position:static}
}
@media (max-width:800px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:720px){
  body{font-size:16px}
  .brand b{font-size:.94rem}
  .facts .f{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .quiet{grid-template-columns:1fr;gap:14px}
  .case{grid-template-columns:1fr;gap:16px;align-items:start}
  .cards{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .cv{padding:8px 12px;font-size:.75rem;letter-spacing:.1em}
  .dflow{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .dual{grid-template-columns:1fr}
  .lane+.lane{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);margin-top:18px;padding-top:18px}
  .bforks{grid-template-columns:1fr}
  .depts{grid-template-columns:1fr;gap:20px;justify-items:center}
  .dcol{max-width:220px}
  .cgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* no hidden nav items on a phone: two columns, everything reachable */
  .nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;overflow:visible;width:100%}
  .nav a{white-space:normal;padding:4px 0}
  .band{grid-template-columns:1fr}
  .band.band-6{grid-template-columns:1fr}
  .pglead{padding-left:16px}
  .dstep{padding-right:0}
  .ring{grid-template-columns:repeat(2,1fr)}
  .ring .rstep:nth-child(1){grid-column:1;grid-row:1}
  .ring .rstep:nth-child(2){grid-column:2;grid-row:1}
  .ring .rstep:nth-child(4){grid-column:2;grid-row:3}
  .ring .rstep:nth-child(5){grid-column:1;grid-row:3}
  .ring-core{grid-column:1/3;grid-row:2}
  .contact-email{width:100%}
  /* the 3x3 ring reads fine at eight cells on a laptop but not at 390px; below
     640px it becomes a plain numbered list, same content and order, just no
     longer trying to look circular in a column this narrow. */
  .harmon{display:flex;flex-direction:column;gap:8px;max-width:100%}
  .harmon .hstep{flex-direction:row;align-items:baseline;gap:10px;min-height:0;padding:12px 14px}
  .harmon .hstep i{margin-bottom:0;min-width:26px}
  .harmon-core{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}