:root{
  /* Henry strict A: warm monochrome. Paper carries, ink inverts. */
  --paper:#fafafa;--ink:#2a2722;--sepia:#3e3b36;
  --hairline:#eeeeee;--ash:#57534c;
  --bg:var(--paper);--surface:var(--paper);--surface-2:var(--paper);
  --border:var(--ink);--border-soft:var(--hairline);
  --text:var(--ink);--text-2:var(--sepia);--text-3:var(--ash);
  --accent:var(--ink);--accent-soft:var(--paper);
  --accent-ink:var(--ink);
  --font-ui:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --font-stamp:"Antonio",var(--font-ui);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Design tokens: single source of truth (4/8 base, 1.25-ish type steps) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:16px;--text-lg:17px;--text-xl:22px;--text-2xl:24px;--text-3xl:32px;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-editorial:cubic-bezier(.7,0,.2,1);
  --dur-micro:200ms;--dur-fill:420ms;--radius:12px;
  --motion-ok:1;
  /* Spring tokens for the magnetic cursor (stiffness, damping, mass) */
  --spring-ui-stiff:700;--spring-ui-damp:45;--spring-ui-mass:0.35;
}
@media (prefers-reduced-motion: reduce){
  :root{--motion-ok:0;}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: no-preference) and (min-width:640px){
  html{scroll-snap-type:y proximity}
  .tile, .section-heading{scroll-snap-align:start;scroll-margin-top:100px}
}
/* Scroll progress: single motivated motion, hierarchy feedback only. transform-only. */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:20;pointer-events:none}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .progress{animation:progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes progress{to{transform:scaleX(1)}}
body{margin:0;padding-bottom:76px;background:var(--paper);background-image:none;color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
/* Ink surfaces: ink outline is 1:1 invisible, flip to paper (WCAG 2.4.7). */
.tile-contact :focus-visible,#work-heading :focus-visible,#tile-now :focus-visible,#tile-vibe :focus-visible{outline-color:var(--paper)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-48px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:var(--radius);z-index:50;transition:top 200ms}
.skip-link:focus{top:12px;color:var(--bg);text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.topbar{position:sticky;top:0;height:64px;background:var(--paper);border-bottom:1px solid var(--ink);z-index:10}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;text-decoration:none}
.brand:hover{text-decoration:none}
.monogram{width:32px;height:32px;border-radius:12px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;overflow:hidden;flex-shrink:0}
.monogram img{width:32px;height:32px;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1)}
.brand-name{font-size:15px}
.ticker{border-bottom:1px solid var(--ink);background:var(--paper);overflow:hidden}
.ticker-inner{
  display:inline-flex;
  white-space:nowrap;
  animation:marquee 20s linear infinite;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 0;
  max-width:none;
  margin:0;
  width:max-content;
}
@keyframes marquee{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
.ticker:hover .ticker-inner,.ticker:focus-within .ticker-inner{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .ticker-inner{animation:none}
}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* ============ EDITORIAL BUTTON REDESIGN ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;height:44px;padding:0 16px;border-radius:var(--radius);font-size:14px;font-weight:700;border:1px solid var(--ink);cursor:pointer;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;background:var(--paper);color:var(--ink);transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out);text-decoration:none}
.btn::before{content:"";position:absolute;inset:0;transform:translateY(101%);z-index:-1;transition:transform var(--dur-fill) var(--ease-editorial)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{text-decoration:none}
.btn:active{transform:none}
@media (prefers-reduced-motion: no-preference){
.btn-glyph{display:inline-block;transition:transform var(--dur-micro) var(--ease-editorial)}
.btn-glyph svg{width:14px;height:14px;display:block}
.btn:hover .btn-glyph,.btn:focus-visible .btn-glyph{transform:translateX(5px);text-decoration:none}
}
.btn-icon{width:40px;padding:0}

/* Primary: ink fill */
.btn--primary::before{background:var(--ink)}
.btn--primary:hover,.btn--primary:focus-visible{color:var(--paper);border-color:var(--ink)}

/* Ghost: transparent -> ink fill */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--paper);border-color:var(--ink)}

/* Reduced motion: instant transitions */
@media (prefers-reduced-motion: reduce){
.btn,.btn::before,.btn-glyph{transition-duration:0s !important;animation:none !important}
}

/* Icon links: same fill animation */
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);color:var(--text);background:var(--paper);border:1px solid var(--ink);position:relative;isolation:isolate;overflow:hidden;transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.icon-link::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);z-index:-1;transition:transform var(--dur-fill) var(--ease-editorial)}
.icon-link:hover::before,.icon-link:focus-visible::before{transform:translateY(0)}
.icon-link:hover,.icon-link:focus-visible{color:var(--paper);border-color:var(--ink);text-decoration:none}
.icon-link svg{width:22px;height:22px;display:block}
@media (prefers-reduced-motion: reduce){
.icon-link,.icon-link::before,.icon-link svg{transition-duration:0s !important}
}

.grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;padding:24px 0 8px}
.contents{display:contents}
.span-2{grid-column:span 2}.span-4{grid-column:1/-1}.row-2{grid-row:span 2}
.tile{background:var(--paper);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px;min-width:0;min-height:120px}
.tile.in{opacity:1;transition:opacity 400ms cubic-bezier(.2,.8,.2,1)}
a.tile:hover,.tile-linked:hover{text-decoration:none}
.tile.in:hover{transition-delay:0ms}
.tile-title{font-size:var(--text-md);line-height:1.35;font-weight:700;letter-spacing:-.01em;margin:0 0 var(--space-2);color:var(--text)}
/* On-ink variant: same scale, paper text (contact closer). */
.tile-title--on-ink{color:var(--paper)}
.proj-tag{font-size:var(--text-xs);line-height:1.4;font-weight:400;color:var(--ink);margin:0 0 var(--space-2);text-transform:uppercase;letter-spacing:.08em}
.tile h3{font-size:var(--text-lg);line-height:1.35;font-weight:700;letter-spacing:-.01em;margin:0 0 var(--space-2);text-wrap:balance}
.tile p{font-size:var(--text-base);line-height:1.55;margin:0 0 var(--space-2);color:var(--text);text-wrap:pretty}
.tile p.muted,.muted{color:var(--text-2)}
.section-heading{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:16px 4px 0}
/* profile: statement hero, avatar docked right with live ring */
.profile{display:flex;gap:20px}
.profile-statement{gap:32px;align-items:flex-start;justify-content:space-between}
.profile-main{flex:1 1 auto;min-width:0}
.avatar{width:168px;height:168px;border-radius:12px;object-fit:cover;border:1px solid var(--ink);flex-shrink:0;background:var(--paper);filter:grayscale(1) contrast(1.08);transition:filter 600ms cubic-bezier(.2,.8,.2,1),transform 600ms cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: no-preference){
  .avatar:hover{filter:grayscale(0) contrast(1.05);transform:scale(1.02)}
  .avatar.tapped{filter:grayscale(0) contrast(1.05);transform:scale(1.02)}
}
.profile h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem,5.5vw,4.5rem);line-height:.9;letter-spacing:0;margin:0 0 8px;text-wrap:balance;font-variation-settings:'wght' 300}
.profile .title{font-size:18px;line-height:1.4;font-weight:400;color:var(--text-2);margin:0 0 8px}
.meta-row{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-2);margin-bottom:10px}
.loc-primary{font-weight:700;color:var(--ink)}
.loc-stack{display:inline-flex;column-gap:6px;align-items:baseline;min-width:0}
.loc-sub{font-size:13px;font-weight:400;color:var(--text-2)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius);background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:13px;font-weight:700;margin-bottom:12px}
.badge .dot{width:8px;height:8px;border-radius:0;background:currentColor;animation:blink 2s steps(2,start) infinite}
.badge.off .dot{background:transparent;border:1px solid currentColor;animation:none}
@keyframes blink{50%{opacity:.25}}
.badge.off{background:var(--paper);color:var(--ink)}
.tile p.bio{max-width:56ch;font-size:16px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chips--flush{margin:0}
.chip{display:inline-flex;align-items:center;padding:6px 10px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius);font-size:13px;font-weight:400;color:var(--text)}
.chip-accent{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.actions .btn{flex:0 0 auto;min-width:148px;padding:0 18px}
#top-book{min-width:148px}
/* hero grid: avatar left, statement middle, availability right */
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) 240px;gap:32px;align-items:start}
.hero-avail{border-left:1px solid var(--border);padding-left:32px;min-width:0}
.avail-eyebrow{font-size:11px;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin:0 0 12px}
.avail-verdict{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);margin:0 0 16px;min-height:44px}
.avail-verdict .dot{width:8px;height:8px;border-radius:0;background:currentColor;flex-shrink:0;animation:blink 2s steps(2,start) infinite}
.avail-verdict.off .dot{background:transparent;border:1px solid currentColor;animation:none}
.avail-verdict.off{color:var(--ink)}

/* Tooltip for availability dots */
.avail-verdict .dot, .avail-badge .dot{position:relative;}
.avail-verdict .dot::after, .avail-badge .dot::after{
  content:attr(title);
  position:absolute;
  bottom:100%; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  font-size:11px; font-weight:400; text-transform:none; letter-spacing:0;
  padding:4px 8px; border-radius:4px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 150ms;
  margin-bottom:4px;
}
.avail-verdict .dot:hover::after, .avail-badge .dot:hover::after{
  opacity:1;
}

.avail-rows{display:flex;flex-direction:column;gap:14px}
.avail-row[hidden]{display:none}
.avail-time{font-family:var(--font-ui);font-size:var(--text-3xl);font-weight:700;letter-spacing:0;line-height:1.1;font-variant-numeric:tabular-nums}
.avail-label{font-size:13px;color:var(--text-2);margin-top:2px}
.avail-change{background:none;border:none;padding:0 4px;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.avail-change:hover{text-decoration:underline}
.avail-select{width:100%;min-height:44px;margin-top:12px;border-radius:12px;background:var(--paper);border:1px solid var(--ink);color:var(--text);font-size:16px}
.avail-select[hidden]{display:none}
.avail-foot{font-size:12px;color:var(--text-3);margin:16px 0 0}
/* impact */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.stat-value{font-family:var(--font-ui);font-size:var(--text-3xl);font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1}
.stat-label{font-size:13px;color:var(--text-2);margin-top:4px}
/* github */
.gh-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gh-head img{width:40px;height:40px;border-radius:12px;border:1px solid var(--ink);filter:grayscale(1) contrast(1.08)}
.gh-head a{font-weight:700;color:var(--text)}
.langbar{display:flex;gap:2px;height:10px;border-radius:0;overflow:hidden;background:var(--paper);border:1px solid var(--ink);padding:2px;margin:8px 0}
.langbar i{display:block;height:100%;background:var(--ink)}
.lang-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.lang-legend s{display:inline-block;width:12px;height:12px;border-radius:0;margin-right:6px;text-decoration:none;vertical-align:-1px}
.repo{padding:10px 0;border-top:1px solid var(--border-soft)}
.repo-name{font-size:14px;font-weight:700;color:var(--text)}
.repo-desc{font-size:13px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 4px}
.repo-meta{font-size:12px;color:var(--text-3)}
.cached-note{font-size:11px;color:var(--text-3);margin-top:8px}
.view-all{display:inline-block;margin-top:10px;font-size:14px;font-weight:700}
.skel{background:var(--paper);border:1px solid var(--border-soft);border-radius:12px;min-height:14px;margin:8px 0}
/* experience (old vertical rail retired; flat ruled rows below win) */
.tl-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tl-role{font-size:17px;font-weight:700;margin:0}
.tl-org{color:var(--text-2);font-size:14px;margin:2px 0 8px}
.tl-dates{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);white-space:nowrap}
.tl-item ul{margin:0;padding-left:18px;font-size:14px}
.tl-item li{margin-bottom:4px}
/* projects */
.proj{display:flex;flex-direction:column;position:relative;text-decoration:none;color:inherit}
.proj:hover{text-decoration:none}
.proj:hover h3{
  transform:translateX(4px);
  transition:transform 200ms cubic-bezier(.2,.8,.2,1);
}
.proj:hover .ext{
  opacity:1;
  transform:translate(-4px, -4px);
  transition:opacity 200ms, transform 200ms cubic-bezier(.2,.8,.2,1);
}
.proj .ext{position:absolute;top:20px;right:20px;color:var(--text-3);opacity:0.4;transform:translate(0,0);}
.proj-feat:hover h3{
  transform:translateX(4px);
  transition:transform 200ms cubic-bezier(.2,.8,.2,1);
}
.proj-feat:hover .ext{
  opacity:1;
  transform:translate(-4px, -4px);
  transition:opacity 200ms, transform 200ms cubic-bezier(.2,.8,.2,1);
}
.chip:hover{border-color:var(--ink);}
.checks{list-style:none;margin:8px 0;padding:0;font-size:13px;color:var(--text-2)}
.checks li::before{content:"- ";color:var(--ink);font-weight:700}
.proj-outcome{font-size:15px;font-weight:700;color:var(--text);margin:8px 0}
.proj-visual{margin:0 0 12px}
.proj-visual img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--border-soft)}
/* stack / certs */
.stack-group{margin-bottom:12px}
.stack-lede{font-size:14px;line-height:1.55;color:var(--text-2);margin:0 0 12px;max-width:56ch}
.stack-legend{font-size:12px;color:var(--text-3);margin:-8px 0 12px}
.stack-group:last-child{margin-bottom:0}
.stack-name{font-size:12px;font-weight:700;color:var(--text-3);margin-bottom:6px}
.cert-row{padding:8px 0;border-top:1px solid var(--border-soft)}
.cert-row:first-of-type{border-top:none}
.cert-name{font-size:14px;font-weight:700;margin:0}
.cert-meta{font-size:13px;color:var(--text-2);margin:0}
/* vibe: inverted letter */
#tile-vibe{background:var(--ink);border-color:var(--ink);color:var(--paper);text-align:center;display:flex;align-items:center;justify-content:center}
#tile-vibe .vibe-text{color:var(--paper);font-family:var(--font-display);font-weight:400;font-size:clamp(24px,7vw,32px);line-height:1.2}
#tile-vibe:hover{transform:none}
/* contact: ink drenched */
.tile-contact{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tile-contact .tile-title--on-ink{color:var(--paper)}
.tile-contact .contact-title{color:var(--paper);font-family:var(--font-display);font-weight:400}
.tile-contact p{color:var(--paper)}
.tile-contact .muted{color:var(--paper);opacity:.7}
.tile-contact a{color:var(--paper)}

/* Contact tile primary: paper fill so hierarchy survives inversion
   (ghost stays outline). */
.tile-contact .btn--primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tile-contact .btn--primary::before{background:var(--ink)}
.tile-contact .btn--primary:hover,.tile-contact .btn--primary:focus-visible{color:var(--paper);border-color:var(--paper)}
/* Contact tile ghost buttons */
.tile-contact .btn--ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
.tile-contact .btn--ghost::before{background:var(--paper)}
.tile-contact .btn--ghost:hover,.tile-contact .btn--ghost:focus-visible{color:var(--ink);border-color:var(--paper)}

/* Contact tile icon links */
.tile-contact .icon-link{background:transparent;border-color:var(--paper);color:var(--paper)}
.tile-contact .icon-link::before{background:var(--paper)}
.tile-contact .icon-link:hover,.tile-contact .icon-link:focus-visible{color:var(--ink);border-color:var(--paper)}

/* Contact exception removed: social marks inherit text color, single accent only. */
/* Shape rule: icon targets 44px with 12px hover wash, matching buttons. */
.icon-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.btn-icon{width:44px;padding:0}
.contact-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,3.5rem);line-height:.95;margin:0 0 8px;letter-spacing:0;text-wrap:balance}
.footer{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:32px 24px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-top:1px solid var(--ink);margin-top:24px}

/* ---------- Footer morph (scroll-revealed destination) ---------- */
.footer-morph{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--paper);
  border-top:1px solid var(--ink);
  z-index:5;
  padding:24px;
}
/* Hidden pre-reveal only when JS runs; no-JS keeps copyright + trigger. */
.js .footer-morph{
  transform:translateY(100%);
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  .footer-morph{transition:transform 600ms cubic-bezier(.2,.8,.2,1);}
}
.footer-morph.is-revealed{transform:translateY(0);}

.footer-morph #foot-copy{
  display:inline-block;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
}
.footer-palette-hint{
  display:inline-block;
  margin-left:16px;
  font-size:11px;
  color:var(--text-3);
  font-family:var(--font-mono);
  background:none;border:0;padding:0;cursor:pointer;font-weight:400;
}
@media (max-width:639px){
  .footer-palette-hint{display:none;}
}

/* ---------- Magnetic cursor ---------- */
.magnetic-cursor{
  position:fixed;top:0;left:0;z-index:100;
  pointer-events:none;width:10px;height:10px;
  mix-blend-mode:difference;
}
.cursor-ring{position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%;transition:transform 150ms cubic-bezier(.2,.8,.2,1);}
.cursor-dot{position:absolute;inset:0;background:var(--ink);border-radius:50%;transition:transform 150ms cubic-bezier(.2,.8,.2,1);}
.magnetic-cursor.over-interactive .cursor-ring{transform:scale(3.4);border-color:var(--ink);}
.magnetic-cursor.over-interactive .cursor-dot{transform:scale(3.4);}

@media(prefers-reduced-motion:reduce){
  .magnetic-cursor{display:none !important;}
}

/* ---------- Command palette ---------- */
.palette{
  position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);
  width:min(90vw, 600px);max-height:70vh;
  background:var(--paper);border:1px solid var(--ink);border-radius:16px;
  padding:20px;z-index:100;
}
.palette::backdrop{background:rgba(42,39,34,0.5);}
.palette:not([open]){display:none;}
#palette-search{width:100%;font:inherit;font-size:18px;padding:12px 16px;
  border:1px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);}
#palette-search:focus{outline:2px solid var(--ink);outline-offset:2px;}
#palette-results{list-style:none;padding:0;margin:12px 0 0;overflow-y:auto;max-height:50vh;}
#palette-results li{display:flex;align-items:baseline;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:15px;}
#palette-results li:hover, #palette-results li[aria-selected]{background:var(--ink);color:var(--paper);}
#palette-results li .palette-meta{margin-left:auto;font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;flex-shrink:0;}
#palette-results li:hover .palette-meta, #palette-results li[aria-selected] .palette-meta{color:var(--paper);opacity:.7;}
.palette-hint{font-size:11px;color:var(--text-3);margin-left:8px;font-family:var(--font-mono);}

.toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 14px;font-size:14px;z-index:50}
.toast[hidden]{display:none}
.repo-desc,.chip,.bio{overflow-wrap:anywhere}
@media(max-width:1023px){.grid{grid-template-columns:repeat(2,1fr)}.span-4{grid-column:1/-1}.row-2{grid-row:span 1}.stats{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:auto minmax(0,1fr)}.hero-avail{grid-column:1/-1;border-left:none;border-top:1px solid var(--ink);padding-left:0;padding-top:16px}.hero-avail .avail-rows{flex-direction:row;gap:32px}.avatar{width:128px;height:128px}.profile h1{font-size:clamp(2.5rem,6vw,3.5rem)}}
@media(max-width:639px){.container{padding:0 16px}.grid{grid-template-columns:1fr;gap:12px}.span-2{grid-column:1/-1}.tile{padding:16px}.profile{flex-direction:column}.profile-statement{display:contents}.hero-grid{grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:start}.hero-avail{border-left:none;border-top:1px solid var(--ink);padding-left:0;padding-top:16px;grid-column:1/-1}.avatar{grid-column:1;grid-row:1/span 2;align-self:center;width:132px;height:132px;border-radius:12px}.profile-main{display:contents}.bio{grid-column:1/-1;grid-row:4;border-top:1px solid var(--ink);padding-top:16px}.profile h1{grid-column:2;grid-row:1;align-self:center;min-width:0;max-width:100%;text-align:left;font-size:clamp(1.3rem,calc(16.7vw - 35px),2.1rem);line-height:1.05;letter-spacing:-.01em}.profile .title{grid-column:2;grid-row:2;align-self:center;text-align:left;font-size:15px;line-height:1.45;letter-spacing:-.01em;text-wrap:balance}.contact-title{font-size:2rem}.hero-avail .avail-rows{flex-direction:column;gap:14px}.actions{flex-wrap:nowrap;gap:8px;grid-column:1/-1;grid-row:5}.actions .btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 10px;font-size:13px}.ticker-inner{font-size:11px;padding:4px 0}#work-heading{padding:12px;text-align:center;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.tile{opacity:1}#tile-profile{filter:none !important}html{scroll-behavior:auto}}

/* ---------- broadside: entrance without color ---------- */
.js #tile-profile:not(.in){filter:none}
#tile-profile.tile.in{transition:opacity 400ms cubic-bezier(.2,.8,.2,1),transform 400ms cubic-bezier(.2,.8,.2,1)}
/* Hero: no ambient color wash in strict A */
#tile-profile{position:relative;overflow:hidden;border-color:var(--ink);border-width:1px}
#tile-profile::before{display:none}
.profile-statement{position:relative;z-index:1}
@keyframes hero-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .js #tile-profile.tile.in .hero-el{opacity:0;animation:hero-rise 600ms cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--hi,0)*60ms)}
}
/* Now: paper tile (inversion dropped - content duplicates bio/Experience,
   masthead/vibe/contact keep the three earned inversions). */
#tile-now{background:var(--paper);border-color:var(--border-soft);color:var(--text)}
#tile-now .tile-title{color:var(--text)}
#tile-now p{color:var(--text)}
.now-text{font-size:17px;font-weight:700;margin:0}
/* Experience: flattened rows, no card-in-card. */
.timeline{position:relative;padding-left:0}
.timeline::before{display:none}
.tl-item{background:var(--paper);border-top:1px solid var(--ink);padding:14px 0;margin-bottom:4px}
.tl-item:first-child{border-top:none}
.tl-item::before{display:none}
.tl-item:last-child{margin-bottom:0}
/* Selected work: stamped masthead band */
.section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:20px 4px 0}
#work-heading{background:var(--ink);color:var(--paper);border-radius:12px;padding:20px;margin-top:16px}
#work-heading .work-title{font-family:var(--font-stamp);font-size:clamp(3rem,10vw,7rem);line-height:.8;text-transform:uppercase;color:var(--paper);margin:0;letter-spacing:0}
#work-heading .filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#work-heading .filter-row .filter-btn{background:transparent;border:1px solid var(--paper);color:var(--paper);border-radius:var(--radius);padding:8px 16px;font-size:13px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
#work-heading .filter-row .filter-btn.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#work-heading .filter-row .fcount{font-size:11px;font-weight:400;opacity:.65;font-variant-numeric:tabular-nums}
.proj h3{font-family:var(--font-display);font-weight:700}
.proj-feat h3{font-size:24px}
.proj-feat .muted{font-size:15px}
/* Filter hides via [hidden]; author display:flex beats UA hidden without this */
.proj[hidden]{display:none}
.proj .muted{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.proj .chips{margin-top:auto;padding-top:4px}
.proj .ext{position:absolute;top:20px;right:20px;color:var(--text-3)}
@media(max-width:639px){#work-heading .work-title{font-size:clamp(2.5rem,13vw,4.5rem);max-width:100%}#work-heading .filter-row{display:flex;flex-wrap:nowrap;gap:6px;width:100%;margin:8px 0 0}#work-heading .filter-row .filter-btn{flex:1 1 0;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:6px 4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pill-row{grid-column:1/-1;grid-row:3;display:flex;gap:8px;align-items:stretch;min-width:0}.pill-row .meta-row,.pill-row .badge{flex:1 1 0;min-width:0;margin:0;margin-bottom:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;text-align:center;font-size:13px;font-weight:700;line-height:1.35;color:var(--ink);border:1px solid var(--ink);border-radius:12px;text-wrap:balance}.pill-row .loc-stack{display:flex;flex-direction:column;gap:2px;align-items:center;min-width:0}.pill-row .loc-sub{display:block;font-size:11px;font-weight:400;color:var(--text-2)}.proj-feat h3{font-size:20px}.proj-feat .muted{font-size:14px}.proj-outcome{font-size:14px}}