/* ============================================================
   TOKENS: inherited from the Almost a Lab design system
   ============================================================ */
:root{
  color-scheme: dark;
  --bg:#0a0a0a;
  --surface:#101014;
  --raised:#17171c;
  --text:#f0f0f0;
  --muted:#9a9aa4;          /* 7.1:1 on --bg */
  --accent:#d1ff4c;         /* 17.1:1 on --bg */
  --line:rgba(240,240,240,.10);
  --line-strong:rgba(240,240,240,.20);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --r-sm:8px; --r-md:14px; --r-lg:20px;   /* concentric: inner = outer - padding */
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

/* Grain + lime bloom, purely decorative */
body{position:relative}
body::before{
  content:""; position:absolute; top:0; left:0; right:0; height:min(1100px,120vh);
  z-index:0; pointer-events:none;
  background:
    radial-gradient(70ch 50ch at 78% -8%, rgba(209,255,76,.10), transparent 62%),
    radial-gradient(50ch 40ch at 4% 4%, rgba(209,255,76,.045), transparent 60%);
}

.wrap{position:relative; z-index:1; max-width:940px; margin:0 auto;
  padding:0 max(var(--pad), env(safe-area-inset-left)) 0 max(var(--pad), env(safe-area-inset-right))}

/* Focus: visible on every interactive element */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm);
}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec{padding:clamp(52px,9vw,88px) 0; border-top:1px solid var(--line)}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:26px; flex-wrap:wrap}
.sec-head h2{
  font-family:var(--display); font-size:clamp(1.4rem,3.4vw,1.9rem);
  font-weight:600; letter-spacing:-.02em; margin:0;
}
.sec-num{
  font-family:var(--mono); font-size:.7rem; color:var(--accent);
  letter-spacing:.14em; font-variant-numeric:tabular-nums;
}
.sec-note{font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.08em; margin-left:auto}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(30px,7vw,58px) 0 clamp(44px,7vw,72px)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 clamp(34px,7vw,66px)}
.mark{display:flex; align-items:center; gap:11px; min-height:44px}
.mark img{width:26px; height:auto; filter:invert(1)}
.mark span{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--muted)}

.status{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--muted); white-space:nowrap}
/* Below this the status pill and the menu button fight for the same row and the
   text wraps into itself. It reappears inside the menu instead. */
@media(max-width:719px){ .topbar .status{display:none} }
.menu-status{display:none; align-items:center; gap:8px; margin-bottom:22px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--muted)}
@media(max-width:719px){ .menu-status{display:inline-flex} }
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(209,255,76,.5); animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(209,255,76,.45)}70%{box-shadow:0 0 0 7px rgba(209,255,76,0)}100%{box-shadow:0 0 0 0 rgba(209,255,76,0)}}

.hero-grid{display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,52px); align-items:center}
@media(min-width:820px){.hero-grid{grid-template-columns:1.35fr .65fr}}

.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--accent); margin:0 0 16px}
h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(3.1rem,11.5vw,6.4rem); line-height:.92; letter-spacing:-.045em;
  margin:0 0 20px;
}
h1 .ln{display:block; overflow:hidden; padding-bottom:.04em}
h1 .ln > i{display:block; font-style:normal}
/* Masked line reveal: cancel the generic fade, slide each line up instead */
.js h1.rv{opacity:1; transform:none}
.js h1.rv .ln > i{transform:translateY(104%)}
.js h1.rv.in .ln > i{transform:none; transition:transform .85s var(--ease)}
.js h1.rv.in .ln:nth-child(2) > i{transition-delay:.09s}
.role{font-size:clamp(1.02rem,2.4vw,1.22rem); color:var(--text); margin:0 0 10px; font-weight:500}
.role b{color:var(--accent); font-weight:600}
.bio{color:var(--muted); max-width:46ch; margin:0 0 16px; font-size:1rem}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:0 17px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface);
  font-size:.9rem; font-weight:500; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .12s var(--ease);
}
.chip svg{width:16px; height:16px; flex:none}
.chip:hover{background:var(--raised); border-color:var(--line-strong); color:#fff}
.chip:active{transform:scale(.96)}
.chip.primary{background:var(--accent); color:#0a0a0a; border-color:var(--accent); font-weight:600}
.chip.primary:hover{background:#dcff70; color:#0a0a0a}

.portrait{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.portrait img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:64% 34%; filter:grayscale(1) contrast(1.06)}
.portrait::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.55))}
@media(max-width:819px){
  .portrait{border-radius:var(--r-md)}
  .portrait img{aspect-ratio:4/3}
}

/* ============================================================
   VENTURES
   ============================================================ */
.ventures{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:760px){.ventures{grid-template-columns:1fr 1fr}}
.venture{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:26px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.venture:hover{border-color:rgba(209,255,76,.42); background:var(--raised); transform:translateY(-3px)}
.venture:active{transform:translateY(-1px) scale(.995)}
.v-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.v-tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:var(--accent); border:1px solid rgba(209,255,76,.3); padding:4px 9px; border-radius:999px}
.v-name{font-family:var(--display); font-size:clamp(1.3rem,3.4vw,1.62rem); font-weight:600; letter-spacing:-.025em; margin:0}
.v-desc{color:var(--muted); font-size:.93rem; margin:0; line-height:1.55}
.v-meta{font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.06em; margin-top:2px}
.arrow{width:19px; height:19px; color:var(--muted); flex:none; transition:transform .3s var(--ease), color .3s var(--ease)}
.venture:hover .arrow{transform:translate(3px,-3px); color:var(--accent)}

/* ============================================================
   LINK INDEX: the signature lime wipe
   ============================================================ */
.rows{border-top:1px solid var(--line)}
.row{
  position:relative; display:flex; align-items:center; gap:16px;
  min-height:64px; padding:16px 18px; border-bottom:1px solid var(--line);
  overflow:hidden; cursor:pointer; isolation:isolate;
}
.row::before{
  content:""; position:absolute; inset:0; background:var(--accent); z-index:-1;
  transform:scaleX(0); transform-origin:left;
  transition:transform .44s var(--ease);
}
.row:hover::before,.row:focus-visible::before{transform:scaleX(1)}
.row:focus-visible{outline:2px solid var(--bg); outline-offset:-3px}
.r-num{
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; flex:none; width:26px;
  transition:color .3s var(--ease);
}
.r-icon{width:19px; height:19px; flex:none; color:var(--muted); transition:color .3s var(--ease)}
.r-label{font-size:1.02rem; font-weight:500; transition:color .3s var(--ease)}
.r-val{
  margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--muted);
  transition:color .3s var(--ease); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:42vw;
}
.r-go{width:16px; height:16px; flex:none; color:var(--muted); transition:transform .3s var(--ease), color .3s var(--ease)}
.row:hover .r-num,.row:hover .r-icon,.row:hover .r-label,.row:hover .r-val,.row:hover .r-go,
.row:focus-visible .r-num,.row:focus-visible .r-icon,.row:focus-visible .r-label,
.row:focus-visible .r-val,.row:focus-visible .r-go{color:var(--bg)}
.row:hover .r-go,.row:focus-visible .r-go{transform:translateX(3px)}
.row{transition:transform .12s var(--ease)}
.row:active{transform:scale(.994)}
@media(max-width:560px){ .r-val{display:none} }

/* ============================================================
   PRESS
   ============================================================ */
.press{display:grid; gap:12px}
.item{
  display:flex; align-items:flex-start; gap:18px;
  padding:20px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.item:hover{border-color:rgba(209,255,76,.4); background:var(--raised); transform:translateX(4px)}
.item:active{transform:translateX(2px) scale(.995)}
.i-year{font-family:var(--mono); font-size:.72rem; color:var(--accent); flex:none; padding-top:3px; font-variant-numeric:tabular-nums}
.i-body{flex:1; min-width:0}
.i-outlet{font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; color:var(--muted); display:block; margin-bottom:6px}
.i-title{font-size:1rem; font-weight:500; margin:0 0 5px; line-height:1.42}
.i-sub{font-size:.87rem; color:var(--muted); margin:0; max-width:72ch}
.item .arrow{align-self:center}

/* ============================================================
   CLIENT LOGO WALL
   ============================================================ */
.logos{padding:6px 0 0; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3.4vw,34px)}
.logos img{
  height:auto;
  filter:brightness(0) invert(1) opacity(.42);
  transition:filter .45s var(--ease);
}
.logos .lr1{width:100%}
.logos .lr2{width:56%}
.logos:hover img{filter:brightness(0) invert(1) opacity(.72)}
@media(max-width:560px){ .logos{gap:16px} .logos .lr2{width:72%} }

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line); padding:clamp(44px,7vw,64px) 0 46px}
.f-cta{font-family:var(--display); font-size:clamp(1.7rem,5.4vw,2.7rem); font-weight:600; letter-spacing:-.03em; line-height:1.1; margin:0 0 12px; max-width:15ch; text-wrap:balance}
/* inline-block + padding gives a 44px tap target; the negative margin keeps
   the text where it was, and the underline is redrawn at the old baseline. */
.f-cta a{position:relative; display:inline-block; padding:8px 0; margin:-8px 0; transition:color .25s var(--ease)}
.f-cta a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:2px;
  background:rgba(209,255,76,.35); transition:background .25s var(--ease)}
.f-cta a:hover{color:var(--accent)}
.f-cta a:hover::after{background:var(--accent)}
.f-sub{color:var(--muted); margin:0 0 32px; max-width:44ch}
.f-bot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.06em}
.f-bot a{display:inline-flex; align-items:center; min-height:44px}
.f-bot a:hover{color:var(--accent)}

/* ============================================================
   ENTRANCE: only applied when JS is present
   ============================================================ */
.js .rv{opacity:0; transform:translateY(16px)}
.js .rv.in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .rv.in{transition-delay:var(--d,0ms)}

/* ============================================================
   CREDENTIALS GRID (speaking, teaching, advising)
   ============================================================ */
.creds{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:600px){.creds{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.creds{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   PRINCIPLES: how I work
   ============================================================ */
.principles{display:grid; grid-template-columns:1fr; gap:0}
@media(min-width:760px){.principles{grid-template-columns:repeat(3,1fr); gap:0}}
.pr{padding:22px 0 22px 20px; border-top:1px solid var(--line); border-left:2px solid var(--accent)}
@media(min-width:760px){
  .pr{border-top:0; border-left:2px solid var(--accent); padding:4px 26px 4px 20px}
}
.pr h3{
  font-family:var(--display); font-size:clamp(1.22rem,2.9vw,1.5rem); font-weight:600;
  letter-spacing:-.025em; margin:0 0 8px; text-wrap:balance;
}
.pr p{color:var(--muted); font-size:.9rem; margin:0; line-height:1.55}
.cred{
  padding:20px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cred:hover{border-color:rgba(209,255,76,.32); background:var(--raised)}
.c-tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:10px}
.c-title{font-family:var(--display); font-size:1.04rem; font-weight:600; letter-spacing:-.015em; margin:0 0 5px; text-wrap:balance}
@media(min-width:900px){.c-title{min-height:2.6em}}
.c-sub{font-size:.85rem; color:var(--muted); margin:0; line-height:1.5}

/* Location strip */
.places{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 18px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; color:var(--muted)}
.places b{color:var(--accent); font-weight:400}

/* ============================================================
   PRIVATE FLAG banner (injected server-side by functions/_middleware.js)
   ============================================================ */
.private-flag{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line);
  background:rgba(209,255,76,.05);
  font-size:.86rem; color:var(--muted);
}
.pf-tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--accent);
  border:1px solid rgba(209,255,76,.35); padding:4px 9px; border-radius:999px; flex:none;
}

/* ============================================================
   FEATURED LINKS  (add a card by copying one <a class="feat">)
   ============================================================ */
.feats{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:680px){
  .feats{grid-template-columns:1fr 1fr}
  /* an odd final card would otherwise sit alone beside dead space */
  .feats > :last-child:nth-child(odd){grid-column:1 / -1}
}
.feat{
  position:relative; display:flex; flex-direction:column; gap:9px; padding:22px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  cursor:pointer; overflow:hidden;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.feat:hover{border-color:rgba(209,255,76,.42); background:var(--raised); transform:translateY(-3px)}
.feat:active{transform:translateY(-1px) scale(.995)}
.f-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.f-kind{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--accent)}
.f-title{font-family:var(--display); font-size:1.1rem; font-weight:600; letter-spacing:-.02em; margin:0; text-wrap:balance}
.f-desc{color:var(--muted); font-size:.9rem; margin:0; line-height:1.55}
.f-src{font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.05em; margin-top:2px}

/* ============================================================
   ABOUT
   ============================================================ */
.about{max-width:64ch}
.about p{color:var(--muted); font-size:1.02rem; line-height:1.72; margin:0 0 18px}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--text); font-weight:600}
.about a{color:var(--accent); border-bottom:1px solid rgba(209,255,76,.3); transition:border-color .2s var(--ease)}
.about a:hover{border-color:var(--accent)}

/* ============================================================
   AWARDS
   ============================================================ */
.awards{border-top:1px solid var(--line)}
.aw{display:flex; align-items:baseline; gap:18px; padding:17px 4px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.aw-year{font-family:var(--mono); font-size:.74rem; color:var(--accent); font-variant-numeric:tabular-nums; flex:none; width:44px}
.aw-body{flex:1; min-width:220px}
.aw-name{font-size:1rem; font-weight:500; margin:0 0 3px; color:var(--text)}
.aw-org{font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.06em}
.aw-rank{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; flex:none;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted);
}
.aw-rank.gold{color:var(--accent); border-color:rgba(209,255,76,.4)}
@media(max-width:560px){ .aw-year{width:100%} .aw-rank{margin-top:4px; max-width:100%} }

/* ============================================================
   FAQ  (native details, so answers stay in the HTML for crawlers)
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:19px 4px; min-height:44px;
  font-size:1.01rem; font-weight:500; color:var(--text);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}
.qa .plus,.fold .plus{
  margin-left:auto; flex:none; width:15px; height:15px; position:relative;
  transition:transform .32s var(--ease);
}
.qa .plus::before,.qa .plus::after,.fold .plus::before,.fold .plus::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px;
}
.qa .plus::before,.fold .plus::before{left:0; right:0; top:6.5px; height:2px}
.qa .plus::after,.fold .plus::after{top:0; bottom:0; left:6.5px; width:2px; transition:opacity .32s var(--ease), transform .32s var(--ease)}
.qa[open] .plus::after,.fold[open] .plus::after{opacity:0; transform:rotate(90deg)}
.qa .ans{padding:0 4px 22px; color:var(--muted); font-size:.96rem; line-height:1.68; max-width:66ch}
.qa .ans p{margin:0 0 12px}
.qa .ans p:last-child{margin:0}
.qa .ans a{color:var(--accent); border-bottom:1px solid rgba(209,255,76,.3)}

/* ============================================================
   FOLD  (collapsed long lists; content stays in the DOM so crawlers
   and the Markdown route still see every row)
   ============================================================ */
.fold{border-top:1px solid var(--line)}
.fold>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px;
  padding:20px 4px; min-height:44px;
  color:var(--muted); font-size:.95rem; line-height:1.55;
  transition:color .2s var(--ease);
}
.fold>summary::-webkit-details-marker{display:none}
.fold .fold-txt{max-width:64ch}
.fold>summary:hover{color:var(--text)}
.fold>summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}
.fold[open]>summary{color:var(--text); border-bottom:1px solid var(--line)}
.fold .awards,.fold .press{padding-top:2px}
.fold .awards .aw:last-child{border-bottom:none}
@media(max-width:560px){ .fold>summary{font-size:.9rem; gap:12px} }

/* Under-construction note */
.wip{
  display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap;
  padding:15px 18px; margin-top:26px;
  border:1px dashed rgba(209,255,76,.3); border-radius:var(--r-md);
  background:rgba(209,255,76,.035); font-size:.9rem; color:var(--muted); max-width:60ch;
}
.wip b{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--accent);
  border:1px solid rgba(209,255,76,.35); padding:4px 9px; border-radius:999px; flex:none}


/* ============================================================
   NAV + MENU
   ============================================================ */
.navwrap{display:flex; align-items:center; gap:14px}
.menu-btn{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 15px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:999px;
  color:var(--text); font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  cursor:pointer; transition:background .22s var(--ease), border-color .22s var(--ease), transform .12s var(--ease);
}
.menu-btn:hover{background:var(--raised); border-color:rgba(209,255,76,.4)}
.menu-btn:active{transform:scale(.96)}
.bars{width:15px; height:11px; position:relative; flex:none}
.bars i{position:absolute; left:0; right:0; height:2px; background:var(--accent); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease)}
.bars i:nth-child(1){top:0} .bars i:nth-child(2){top:4.5px} .bars i:nth-child(3){top:9px}
body.menu-open .bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body.menu-open .bars i:nth-child(2){opacity:0}
body.menu-open .bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:60; background:rgba(10,10,10,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
body.menu-open .menu{opacity:1; visibility:visible}
.menu-inner{max-width:940px; margin:0 auto; width:100%}

/* Explicit exit. The toggle button sits under the overlay (z-index 60 vs the
   page's 1), so its bars-to-X animation was never visible and there was no
   obvious way out. */
.menu-close{
  position:absolute; top:max(22px, env(safe-area-inset-top)); right:max(var(--pad), env(safe-area-inset-right));
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:0 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .12s var(--ease);
}
.menu-close:hover{background:var(--raised); border-color:rgba(209,255,76,.45); color:var(--accent)}
.menu-close:active{transform:scale(.96)}
.menu-close svg{width:13px; height:13px}
.menu a{
  display:flex; align-items:baseline; gap:18px; padding:14px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:clamp(1.7rem,6vw,2.7rem); font-weight:600;
  letter-spacing:-.03em; color:var(--text);
  transform:translateY(14px); opacity:0;
  transition:color .22s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
}
body.menu-open .menu a{transform:none; opacity:1}
.menu a:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--accent)}
.menu a[aria-current="page"] span{color:var(--accent)}
.menu a[aria-current="page"]::after{content:"CURRENT"; margin-left:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--muted); align-self:center}
.menu a span{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--muted); flex:none; width:34px}
.menu a:hover span{color:var(--accent)}
.menu-foot{margin-top:30px; font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.08em}
.menu-foot a{display:inline; border:0; padding:0; font-family:var(--mono); font-size:.68rem;
  font-weight:400; letter-spacing:.08em; transform:none; opacity:1; color:var(--accent)}

/* "Read more" bridge from the link hub to the about page */
.bridge{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:26px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.bridge:hover{border-color:rgba(209,255,76,.42); background:var(--raised); transform:translateY(-3px)}
.bridge:active{transform:translateY(-1px) scale(.995)}
.br-body{flex:1; min-width:240px}
.br-title{font-family:var(--display); font-size:clamp(1.2rem,3.2vw,1.5rem); font-weight:600;
  letter-spacing:-.025em; margin:0 0 6px}
.br-desc{color:var(--muted); font-size:.93rem; margin:0; line-height:1.55}
.br-go{flex:none; width:22px; height:22px; color:var(--accent); transition:transform .3s var(--ease)}
.bridge:hover .br-go{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .menu a{transform:none !important; opacity:1 !important}
}

/* Micro-label floor. These mono labels rendered between 9.9px and 11.5px, under
   the 12px minimum for label text, and the previous rule only applied below
   560px so tablet and desktop never got it. 0.75rem = 12px at every width. */
.f-kind,.c-tag,.v-tag,.sec-num,.aw-rank,.pf-tag,
.f-src,.i-outlet,.aw-org,.v-meta,.status,.menu-status,.menu-foot,.menu-foot a,
.sec-note,.r-val,.r-num,.mark span,.f-bot,.f-bot a,.i-year,.aw-year,.eyebrow,
.menu a[aria-current="page"]::after{
  font-size:.75rem;
}
@media(max-width:560px){ .menu-foot a{display:inline-block; padding:4px 0} }


/* ============================================================
   TRACK RECORD: the career spine. Roles and what was shipped in each,
   deliberately excluding awards and press so it does not restate them.
   ============================================================ */
.track{border-top:1px solid var(--line)}
.tr{display:flex; align-items:baseline; gap:20px; padding:18px 4px;
    border-bottom:1px solid var(--line); flex-wrap:wrap}
.tr-when{font-family:var(--mono); font-size:.75rem; color:var(--accent);
    font-variant-numeric:tabular-nums; flex:none; width:96px; letter-spacing:.04em}
.tr-body{flex:1; min-width:230px}
.tr-role{font-size:1.02rem; font-weight:500; margin:0 0 4px; color:var(--text)}
.tr-role b{color:var(--muted); font-weight:400}
.tr-did{font-size:.9rem; color:var(--muted); margin:0; line-height:1.55; max-width:62ch}
.tr-now{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--accent);
    border:1px solid rgba(209,255,76,.35); padding:3px 8px; border-radius:999px; flex:none; align-self:center}
@media(max-width:560px){ .tr-when{width:100%} }

/* Polish */
::selection{background:var(--accent); color:#0a0a0a}
h1,.f-cta,.v-name,.i-title{text-wrap:balance}
.qa summary,.aw-name,.tr-did{text-wrap:pretty}
#yr{font-variant-numeric:tabular-nums}
html{scroll-behavior:smooth; scrollbar-color:#2a2a30 var(--bg)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js .rv{opacity:1 !important; transform:none !important}
  .js h1.rv .ln > i{transform:none !important}
  .dot{animation:none}
  html{scroll-behavior:auto}
}