/* ============================================================
   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}
/* The UA's `[hidden]{display:none}` is not an author rule, so any author
   `display:` beats it. That silently unhid the brief dialog's success panel,
   which put an "Open the calendar" button on screen before the form was
   submitted. Make hidden mean hidden. */
[hidden]{display:none !important}
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(--sans); font-size:.7rem; color:var(--muted); letter-spacing:.01em; margin-left:auto; font-weight:500}

/* ============================================================
   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(--sans); font-size:.76rem; letter-spacing:.01em; color:var(--muted); white-space:nowrap; font-weight:500}
/* 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(--sans); font-size:.74rem; letter-spacing:.01em; color:var(--muted); font-weight:500}
@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.12fr .88fr}}

.eyebrow{font-family:var(--sans); font-size:.80rem; letter-spacing:.01em; color:var(--accent); margin:0 0 16px; font-weight:500}
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:4/5; object-fit:cover; object-position:50% 12%; filter:grayscale(1) contrast(1.06)}
/* Hover swap, mirroring the Almost Impossible team page: two stacked frames
   cross-fading on opacity, both desaturated. The second frame is referenced
   only inside the hover query, so a phone never downloads the extra 64KB. */
@media (hover:hover) and (pointer:fine){
  .p-alt{
    position:absolute; inset:0; opacity:0;
    background:url("/assets/hero-portrait-hover.jpg") 50% 12%/cover no-repeat;
    filter:grayscale(1) contrast(1.06);
    transition:opacity .5s cubic-bezier(.4,0,.2,1);
  }
  .portrait:hover .p-alt{opacity:1}
  @media(prefers-reduced-motion:reduce){ .p-alt{transition:none} }
}
.portrait::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.55))}
@media(max-width:819px){
  /* Cap the width too, or the square grows with the column: at 819px it hit
     739x739 and pushed the link index 1.42 viewports down, which is the exact
     scroll cost the 1:1 crop below was chosen to avoid. Phones are unaffected
     (the portrait is 335px at 375px wide), so this only bites the tablet band. */
  .portrait{border-radius:var(--r-md); max-width:420px}
  /* Square, not 4:3. The source is a 4:5 portrait, so a landscape frame left
     dead black either side and shrank the face. Full 4:5 would be truest but
     adds ~400px of scroll between the CTAs and the link index, which is the one
     thing a link-in-bio cannot afford on its primary surface. */
  .portrait img{aspect-ratio:1/1}
}

/* ============================================================
   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(--sans); font-size:.72rem; letter-spacing:.01em; color:var(--accent); border:1px solid rgba(209,255,76,.3); padding:4px 9px; border-radius:999px; font-weight:500}
.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(--sans); font-size:.68rem; color:var(--muted); letter-spacing:.01em; margin-top:2px; font-weight:500}
.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(--sans); font-size:.74rem; letter-spacing:.01em; color:var(--muted); display:block; margin-bottom:6px; font-weight:500}
.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)}
/* Measured, not calculated. The artwork's own maximum alpha is about .44, so
   the filter never produces white: at opacity(.42) the brightest logo pixel
   rendered at 53 on a bg of 10, which is 1.6:1, under the 3:1 floor for
   meaningful non-text content. The .72 hover lift was the only thing that ever
   cleared it, and a phone has no hover. .85 measures 3.2:1, and the wall still
   sits far below the 17:1 body text. */
.logos img{
  height:auto;
  filter:brightness(0) invert(1) opacity(.85);
  transition:filter .45s var(--ease);
}
.logos .lr1{width:100%}
.logos .lr2{width:56%}
.logos:hover img{filter:brightness(0) invert(1) opacity(1)}
@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}
/* 15ch is 270px on a phone, narrow enough that balance broke the line into four
   and stranded "almost" on its own. 17ch is still inside the column and holds
   it to three. */
@media(max-width:560px){ .f-cta{max-width:17ch} }
/* 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}
  /* five cards in two columns leaves the last one beside a hole */
  .creds > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media(min-width:900px){
  .creds{grid-template-columns:repeat(3,1fr)}
  .creds > :last-child:nth-child(odd){grid-column:auto}
  /* and in three columns the fifth card leaves the hole instead */
  .creds > :last-child:nth-child(3n+2){grid-column:span 2}
}

/* ============================================================
   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);
}
/* No :hover here. Every card on this site that lights its border lime on hover
   (.feat, .venture, .bridge) is a link; these are plain divs with nowhere to go,
   so the same treatment promised a click that does nothing. */
.c-tag{font-family:var(--sans); font-size:.70rem; letter-spacing:.01em; color:var(--accent); display:block; margin-bottom:10px; font-weight:500}
.c-title{font-family:var(--display); font-size:1.04rem; font-weight:600; letter-spacing:-.015em; margin:0 0 5px; text-wrap:balance}
/* No min-height. It reserved a second line to align titles across the row, but
   every title is one line, so all it produced was ~28px of dead air under each. */
.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(--sans); font-size:.78rem; letter-spacing:.01em; font-weight:500; color:var(--muted)}
/* The separator leads the word it belongs to rather than being its own flex
   item, so a wrap can never strand a slash at the end of a line. It did on a
   375px screen: "BARCELONA /" then "SERVING EMEA". */
.places span + span::before{content:"/"; color:var(--accent); margin-right:14px}

/* ============================================================
   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(--sans); font-size:.70rem; letter-spacing:.01em; font-weight:500; 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(--sans); font-size:.70rem; letter-spacing:.01em; color:var(--accent); font-weight:500}
.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}
/* margin-top:auto pins the source to the card floor. Without it a short
   description floated it up: in row one the two source lines sat 45px apart. */
.f-src{font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.05em; margin-top:auto; padding-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(--sans); font-size:.68rem; color:var(--muted); letter-spacing:.01em; font-weight:500}
.aw-rank{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.01em; flex:none;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted);
; font-weight:500}
.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} }

/* ============================================================
   COMPANY TOOLTIPS
   The two green company names in the hero are real links first. On a
   pointer device they also type out what the place is and what I do
   there. Touch devices get none of it: a hover cannot be dismissed with
   a finger, so the tap stays a plain navigation.

   The bubble text is injected from data-tip rather than living in the
   markup, so it never reaches the Markdown route and is never read
   twice by a screen reader.
   ============================================================ */
.role a.co{
  color:var(--accent); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(209,255,76,.3);
  transition:border-color .2s var(--ease);
}
.role a.co:hover{border-bottom-color:var(--accent)}
.role a.co:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Base state is display:none, so if the hover query never matches (touch, or a
   stylesheet that fails to load) the injected bubble is not in the layout at all
   rather than dumping its text into the paragraph. */
.tip{display:none}

@media (hover:hover) and (pointer:fine){
  /* The two company names sit on consecutive lines, so a bubble hung under the
     hovered word covers the other one. Anchor to the whole role block instead
     and slide it horizontally under the word it belongs to. left:0 is the
     default because an absolute box with no offset takes its static position,
     which pushed past the viewport before first hover. */
  .role{position:relative}
  .tip{
    display:block; position:absolute; left:0; top:calc(100% + 12px); z-index:40;
    width:max-content; max-width:min(330px, 74vw);
    padding:13px 15px; border-radius:var(--r-md);
    background:var(--raised); border:1px solid var(--line-strong);
    box-shadow:0 18px 42px rgba(0,0,0,.55);
    font-family:var(--mono); font-size:.72rem; line-height:1.65; color:var(--text);
    opacity:0; transform:translateY(-5px); pointer-events:none;
    transition:opacity .18s var(--ease), transform .18s var(--ease);
  }
  .tip::before{
    content:""; position:absolute; left:var(--tail,22px); margin-left:-4px; top:-5px; width:9px; height:9px;
    background:var(--raised);
    border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong);
    transform:rotate(45deg);
  }
  .tip.on{opacity:1; transform:translateY(0)}
  /* the ghost reserves the final box so typing fills it instead of resizing it */
  .tip-ghost{visibility:hidden; display:block}
  .tip-live{position:absolute; left:15px; right:15px; top:13px}
  .tip-caret{
    display:inline-block; width:7px; height:1.02em; margin-left:2px;
    background:var(--accent); vertical-align:-2px;
    animation:tipblink 1s steps(1) infinite;
  }
  @keyframes tipblink{0%,50%{opacity:1}51%,100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){
    .tip{transition:none}
    .tip-caret{animation:none}
  }
}

/* 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(--sans); font-size:.78rem; letter-spacing:.01em; font-weight:500;
  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(--sans); font-size:.76rem; color:var(--muted); letter-spacing:.01em; font-weight:500}
.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;
}
/* 4px of padding left this at 27px tall, under the 44px floor, on the one
   contact link inside the menu. Same trick as .f-cta a: pad to the target and
   pull the margin back so the line sits where it did. */
@media(max-width:560px){ .menu-foot a{display:inline-block; padding:13px 0; margin:-13px 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(--sans); font-size:.70rem; letter-spacing:.01em; color:var(--accent);
    border:1px solid rgba(209,255,76,.35); padding:3px 8px; border-radius:999px; flex:none; align-self:center; font-weight:500}
@media(max-width:560px){ .tr-when{width:100%} }

/* ============================================================
   BRIEF DIALOG
   The gate in front of the calendar. Native <dialog> so the modal
   semantics, focus trap, Esc-to-close and inert background come from the
   platform rather than from us.
   ============================================================ */
.brief{
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  background:var(--surface); color:var(--text);
  padding:0; width:min(520px, calc(100vw - 32px)); max-height:min(88svh, 780px);
  overflow:auto; overscroll-behavior:contain;
}
.brief::backdrop{background:rgba(6,6,8,.72); backdrop-filter:blur(4px)}
.brief-in{padding:clamp(20px,4vw,30px); display:flex; flex-direction:column; gap:18px}
.brief-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.brief-eyebrow{font-family:var(--sans); font-size:.70rem; letter-spacing:.01em; color:var(--accent); margin:0 0 6px; font-weight:500}
.brief-title{font-family:var(--display); font-size:1.35rem; line-height:1.2; margin:0}
.brief-sub{font-size:.86rem; color:var(--muted); margin:8px 0 0; line-height:1.5}
.brief-x{background:none; border:none; color:var(--muted); cursor:pointer;
  padding:6px; margin:-6px -6px 0 0; border-radius:var(--r-sm); flex:none; line-height:0}
.brief-x svg{width:20px; height:20px}
.brief-x:hover{color:var(--text)}

.brief-field{display:flex; flex-direction:column; gap:7px}
.brief-field label{font-family:var(--sans); font-size:.6rem; letter-spacing:.01em; color:var(--accent); font-weight:500}
.brief-field input,.brief-field select,.brief-field textarea{
  width:100%; min-height:46px; padding:11px 13px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-family:var(--sans); font-size:16px; line-height:1.4;
}
.brief-field textarea{min-height:88px; resize:vertical}
.brief-field select{appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23d1ff4c' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center}
.brief-field input:focus-visible,.brief-field select:focus-visible,.brief-field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-color:transparent}
.brief-opt{color:var(--muted); text-transform:none; letter-spacing:0; font-size:.58rem}

.brief-send{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:50px; border:none; border-radius:999px;
  background:var(--accent); color:#0a0a0a; cursor:pointer;
  font-family:var(--sans); font-size:.95rem; font-weight:600;
  transition:background .22s var(--ease), transform .12s var(--ease);
}
.brief-send:hover:not(:disabled){background:#dcff70}
.brief-send:active:not(:disabled){transform:scale(.98)}
.brief-send:disabled{opacity:.55; cursor:progress}
.brief-err{color:#ff8a80; font-size:.82rem; margin:0; line-height:1.5}
.brief-note{font-family:var(--sans); font-size:.6rem; letter-spacing:.01em;
  color:var(--muted); margin:0; text-align:center; font-weight:500}

/* Success state: swapped in once the brief is saved. Relies on the global
   [hidden] rule above; this display:flex would otherwise override it. */
.brief-done{display:flex; flex-direction:column; gap:16px; text-align:center; align-items:center}
.brief-tick{width:52px; height:52px; border-radius:999px; display:grid; place-items:center;
  background:rgba(209,255,76,.14); border:1px solid rgba(209,255,76,.4); color:var(--accent)}
.brief-tick svg{width:26px; height:26px}

@media(max-width:480px){
  .brief{width:100vw; max-width:100vw; max-height:92svh; border-radius:var(--r-lg) var(--r-lg) 0 0;
    margin:auto auto 0; }
}

/* 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}
}