@font-face{font-family:"Fraunces";src:url(assets/fonts/fraunces-300-soft.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/ibm-plex-mono-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:#fff}
a{color:#000}
.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:10px 14px;background:#000;color:#fff}
.skip:focus{top:16px}

/* ---- Tokens: existing names re-valued for the new default look, plus additions ---- */
.xd{
  --bg:#ffffff;--panel-2:#f3f3f3;--text:#000000;--muted:#555555;--line:#000000;--silver:#e4e4e4;
  --highlight:#FFE45C;
  --font-display:"Fraunces",Cambria,Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Courier,monospace;
  --fs-body:14px;--lh-body:20px;--tracking:-0.2px;
  --fs-small:12px;--lh-small:16px;
  --fs-title:24px;--lh-title:32px;
  --fs-lede:32px;--lh-lede:40px;
  --fs-mega:clamp(56px,11vw,152px);
  --rule-1:1px;--rule-2:2px;--rule-4:4px;
  --container:1320px;--gutter:16px;--col-pad:12px;--block:24px;
  --dur-sweep:.25s;--dur-fade:.33s;--ease:ease;
  
  background:var(--bg);color:var(--text);
  font-family:var(--font-mono);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tracking);
  -webkit-font-smoothing:antialiased;
}
.xd *{box-sizing:border-box}
.xd ::selection{background:#000;color:#fff}
.page{max-width:var(--container);margin:0 auto;padding:32px var(--gutter) 0}
.display{font-family:var(--font-display);font-weight:300;letter-spacing:-0.01em}
:where(.xd) :where(h1,h2,h3,p,ul,figure){margin:0}
:where(.xd) :where(ul){padding:0;list-style:none}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small);line-height:var(--lh-small)}

/* ---- Rules ---- */
.rule{border:0;height:var(--rule-1);background:var(--line);margin:16px 0}
.rule-2{height:var(--rule-2)}
.rule-double{border:0;height:9px;background:transparent;border-top:var(--rule-2) solid var(--line);border-bottom:var(--rule-1) solid var(--line);margin:56px 0 16px}
.flex-rule{flex:1 1 auto;border:0;height:var(--rule-1);background:var(--line);margin:0}

/* ---- Links: highlighter sweep (transform only) ---- */
.hl{position:relative;z-index:0;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hl::before{content:"";position:absolute;z-index:-1;left:-2px;right:-2px;top:1px;bottom:1px;background:var(--highlight);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-sweep) var(--ease)}
.hl:hover::before,.hl:focus-visible::before{transform:scaleX(1)}
.xd a:focus-visible,.xd button:focus-visible{outline:2px solid #000;outline-offset:3px}
.ext{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ext svg,.ln{flex:none;width:24px;height:24px}
.edu-mark .ln{width:28px;height:28px}

/* ---- Masthead ---- */
.mast{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.mast-side{display:flex;align-items:center;gap:16px;min-width:0}
.ticker{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;max-width:100%}
.ticker-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;transition:transform var(--dur-sweep) var(--ease)}
.ticker.is-fading .ticker-text{transform:translateY(-160%)}
.ticker-dot{width:8px;height:8px;background:#000;flex:none}
.wordmark{font-size:var(--fs-title);line-height:var(--lh-title);white-space:nowrap}
.nav{display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav-sep{color:var(--muted)}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.handle-row{position:relative;display:flex;justify-content:center;margin:20px 0 28px}
.handle-row .xthick{position:absolute;left:0;right:0;top:50%;margin:0;border:0;height:var(--rule-4);background:#000;transform:translateY(-50%)}
.handle{position:relative;background:#fff;border:var(--rule-1) solid #000;padding:8px 16px}

/* ---- Profile ---- */
.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;align-items:center}
.avatar{aspect-ratio:1;border:var(--rule-1) solid #000;border-radius:50%;overflow:hidden;background:var(--panel-2);display:grid;place-items:center}
.avatar img{width:62%;height:auto;filter:grayscale(1);transition:filter var(--dur-fade) var(--ease)}
.avatar:hover img{filter:none}
.lede{font-size:var(--fs-lede);line-height:var(--lh-lede);padding:0 8px}
.cta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;padding:0 8px}

/* ---- Section heading ---- */
.sh{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.sh svg{width:24px;height:24px;flex:none}
.sh h2{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:500}
.sh-note{margin:0 0 20px 32px;color:var(--muted)}

/* ---- Columns with hairline dividers (equal tracks, divider centred in the gap) ---- */
.cols{display:grid;column-gap:calc(var(--col-pad) * 2);row-gap:var(--block);margin:0 0 var(--block)}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.col{position:relative;min-width:0}
.col::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--col-pad) * -1);width:var(--rule-1);background:var(--line)}
.c2>.col:nth-child(2n)::after,.c3>.col:nth-child(3n)::after,.c5>.col:nth-child(5n)::after,.cols>.col:last-child::after{display:none}
.title{font-size:var(--fs-title);line-height:var(--lh-title);margin:16px 0 8px}
.meta{color:var(--muted);margin-top:8px}
.title.flush{margin-top:0}
.title.tight{margin-top:4px}
.edu-title{margin:2px 0 0}
.meta.gap{margin-top:12px}
.meta.flush{margin-top:0}
.spaced{margin-top:16px}
.foot-rule{margin-top:40px}
.note{margin-top:8px}

/* ---- Media: grayscale until hover ---- */
.media{position:relative;overflow:hidden;border:var(--rule-1) solid #000;background:var(--panel-2)}
.media > *{filter:grayscale(1);transition:filter var(--dur-fade) var(--ease)}
.card:hover .media > *,.media:hover > *{filter:none}


.count{display:inline-block;vertical-align:middle;line-height:20px;border:var(--rule-1) solid #000;padding:0 6px;margin-left:8px;font-size:var(--fs-small)}

.r16x9{aspect-ratio:16/9}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.credit{margin-top:6px;font-size:11px;line-height:16px;color:var(--muted)}
.more-row{display:flex;justify-content:flex-end;border-top:var(--rule-1) solid var(--line);padding-top:4px}

/* ---- Logos (Simple Icons, CC0): black until hover, then brand colour ---- */
.si{width:var(--logo,24px);height:var(--logo,24px);flex:none;filter:grayscale(1) brightness(0);transition:filter var(--dur-fade) var(--ease)}
.lettermark{width:var(--logo,24px);height:var(--logo,24px);flex:none;display:grid;place-items:center;border:var(--rule-1) solid #000;font-size:9px;line-height:1;font-weight:500;letter-spacing:0;text-transform:uppercase}
.tool:hover .si,.cert:hover .si,.edu:hover .si,.edu:hover .edu-mark img,.grp:hover .si{filter:none}

/* ---- Working with ---- */
.tool-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr);gap:24px;border-top:var(--rule-1) solid var(--line);padding:16px 0}
.tool-group:last-child{border-bottom:var(--rule-1) solid var(--line)}
.tool-group h3{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding-top:12px}
.tools-list{display:flex;flex-wrap:wrap;gap:8px}
.tool{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 10px;border:var(--rule-1) solid #000;background:#fff}

/* ---- Education ---- */
.edu{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:var(--rule-1) solid var(--silver)}
.edu:last-child{border-bottom:0}
.edu-mark{width:56px;height:56px;border:var(--rule-1) solid #000;display:grid;place-items:center;background:#fff;--logo:28px}
.edu-mark img{width:40px;height:40px;filter:grayscale(1);transition:filter var(--dur-fade) var(--ease)}

/* ---- Certificates ---- */
.cert-mark{width:56px;height:56px;border:var(--rule-1) solid #000;display:grid;place-items:center;--logo:28px}
.cert-mark .lettermark{border:0;font-size:14px;letter-spacing:-.02em;text-transform:none;font-weight:500;width:auto}

/* ---- Badges (real badge art) ---- */
.grp{display:flex;align-items:center;gap:10px;--logo:22px}
.badges li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:var(--rule-1) solid var(--silver)}
.badges li:last-child{border-bottom:0}
.badge{width:44px;height:44px;flex:none;object-fit:contain;filter:grayscale(1);transition:filter var(--dur-fade) var(--ease)}
.badges li:hover .badge{filter:none}

/* ---- Partners ---- */
.wordmark-box{border:var(--rule-1) solid #000;min-height:88px;display:grid;place-items:center;text-align:center;padding:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-small);line-height:var(--lh-small)}
.kicker{font-size:var(--fs-small);line-height:var(--lh-small);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:12px}

/* ---- Contact ---- */
.mega{font-size:var(--fs-mega);line-height:.95;letter-spacing:-0.03em;display:inline-block;margin:8px 0 24px}
.socials{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-small);line-height:var(--lh-small);padding:4px 0 24px}

/* ---- Static band ---- */
.static{height:56px;background:#000;overflow:hidden;margin-top:24px}
.static-tex{height:200%;width:calc(100% + 96px);background-image:url(assets/static-noise.png);background-size:480px 160px;image-rendering:pixelated}
.static-tex{animation:xd-static .4s steps(1) infinite}
@keyframes xd-static{0%{transform:translate(0,0)}20%{transform:translate(-37px,-23px)}40%{transform:translate(-71px,-9px)}60%{transform:translate(-13px,-41px)}80%{transform:translate(-59px,-31px)}}

/* ---- Responsive (container queries so every width preview is true) ---- */
@media (max-width: 1100px){
  .c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c5>.col:nth-child(5n)::after{display:block}
  .c5>.col:nth-child(3n)::after,.c5>.col:last-child::after{display:none}
}
@media (max-width: 848px){
  .mast{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  .mast-side{justify-content:center;width:100%}
  .mast-side .flex-rule{display:none}
  .nav{flex-wrap:wrap;justify-content:center;white-space:normal}
  .profile{grid-template-columns:1fr;justify-items:center}
  .avatar{width:min(60%,280px)}
  .lede{font-size:24px;line-height:32px;padding:0}
  .cta{padding:0}
  .c2,.c3,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols>.col::after{display:block}
  .cols>.col:nth-child(2n)::after,.cols>.col:last-child::after{display:none}
  .tool-group{grid-template-columns:1fr;gap:8px}
  .tool-group h3{padding-top:0}
}
@media (max-width: 600px){
  .page{padding-top:20px}
  .c2,.c3,.c5{grid-template-columns:1fr}
  .cols>.col::after{display:none}
  .cols>.col:not(:last-child){border-bottom:var(--rule-1) solid var(--line);padding-bottom:var(--block)}
  .tool{padding:6px 12px 6px 8px;gap:8px}
  .wordmark{font-size:22px}
  .rule-double{margin-top:40px}
  .sh-note{margin-left:0}
  .foot{flex-direction:column;align-items:center;text-align:center}
  .mast-side{flex-direction:column;gap:4px}
  .nav,.socials{gap:0 16px}
  .nav .nav-sep,.socials .nav-sep{display:none}
}
@media (prefers-reduced-motion: reduce){
  .xd *,.xd *::before{transition:none!important;animation:none!important}
}

.more-badges{margin-top:4px}
.more-badges summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.more-badges summary::-webkit-details-marker{display:none}
.more-badges summary::after{content:" +";white-space:pre}
.more-badges[open] summary::after{content:" \2212"}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}