/* ==========================================================================
   DAVID OKOYE — design system
   Space Grotesk (display) / Inter (body) / IBM Plex Mono (metadata) / Newsreader (quotes)
   ========================================================================== */
:root{
  --background:#F7F3EA; --surface:#FBF8F1; --foreground:#1B1912;
  --muted:#6E6858; --muted-2:#8C8672; --accent:#2440E0; --accent-soft:#E4E8FB;
  --border:#DCD5C1; --border-strong:#B9B096; --invert-bg:#17150F; --invert-fg:#F3EFE4;

  --font-display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --font-serif:'Newsreader',Georgia,serif;

  --step-mono:0.72rem; --step-sm:0.875rem; --step-base:1rem; --step-md:1.25rem;
  --step-lg:1.75rem; --step-xl:2.5rem; --step-2xl:4rem; --step-3xl:6.5rem;

  --space-2xs:0.5rem; --space-xs:0.75rem; --space-sm:1.25rem; --space-md:2rem;
  --space-lg:3.5rem; --space-xl:6rem; --space-2xl:9rem;

  --container:1240px; --gutter:clamp(1.25rem, 4vw, 3rem);
  --duration-fast:150ms; --duration-medium:400ms; --duration-slow:900ms;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --radius-sm:2px; --radius-md:4px; --hairline:1px solid var(--border);
  color-scheme: light;
}
html.dark{
  --background:#131209; --surface:#1A180F; --foreground:#F3EFE4;
  --muted:#A79F8B; --muted-2:#837C69; --accent:#6E85FF; --accent-soft:#262B4A;
  --border:#322E20; --border-strong:#4A4530; --invert-bg:#F3EFE4; --invert-fg:#17150F;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-medium:0ms; --duration-slow:0ms; }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-body);
  font-size:var(--step-base); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background var(--duration-medium) var(--ease), color var(--duration-medium) var(--ease);
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-0.01em;}
p{margin:0;} a{color:inherit; text-decoration:none;} button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; padding:0;}
input,textarea,select{font-family:inherit; font-size:inherit; color:inherit;} ul{margin:0; padding:0; list-style:none;}
img,svg{display:block; max-width:100%;} ::selection{background:var(--accent); color:#fff;}

.skip-link{position:absolute; left:-999px; top:0; z-index:9999; background:var(--accent); color:#fff; padding:0.75rem 1.25rem;}
.skip-link:focus{left:1rem; top:1rem;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.wrap{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.section{padding:var(--space-xl) 0;}
.mono{font-family:var(--font-mono); font-size:var(--step-mono); letter-spacing:0.02em; color:var(--muted);}
.serif-quote{font-family:var(--font-serif); font-style:italic;}
.lede{font-size:var(--step-md); color:var(--muted); max-width:60ch;}
.eyebrow{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); display:flex; align-items:center; gap:10px;}
.rule{border:none; border-top:var(--hairline); margin:0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md);}
@media (max-width:800px){ .grid-2,.grid-3{grid-template-columns:1fr;} }

.reveal{opacity:0; transform:translateY(16px); transition:opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- scroll progress ---------- */
#scroll-progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:1000; transition:width 80ms linear;}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:500;
  background:color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:var(--hairline);
}
.header-inner{max-width:var(--container); margin:0 auto; padding:1.1rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);}
.site-header.scrolled .header-inner{padding-top:0.6rem; padding-bottom:0.6rem;}
.wordmark{font-family:var(--font-display); font-weight:600; font-size:var(--step-sm); letter-spacing:0.02em; white-space:nowrap;}
.wordmark span{color:var(--accent); margin-left:0.3em;}
.main-nav ul{display:flex; gap:var(--space-md);}
.main-nav a{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); position:relative; padding-bottom:3px;}
.main-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--foreground); transition:right var(--duration-fast) var(--ease);}
.main-nav a:hover, .main-nav a.active{color:var(--foreground);}
.main-nav a:hover::after, .main-nav a.active::after{right:0;}
.nav-right{display:flex; align-items:center; gap:var(--space-sm);}
.availability{display:flex; align-items:center; gap:0.4rem; font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); white-space:nowrap;}
.availability .dot{width:6px; height:6px; border-radius:50%; background:#3FA35A; animation:pulse-dot 2.2s infinite;}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(63,163,90,.4);}70%{box-shadow:0 0 0 6px rgba(63,163,90,0);}100%{box-shadow:0 0 0 0 rgba(63,163,90,0);}}
.icon-btn{padding:0.4rem; color:var(--muted); display:inline-flex; align-items:center;}
.icon-btn:hover{color:var(--foreground);}
.icon-btn svg{width:19px; height:19px;}
.icon-sun[hidden]{display:none;}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--step-mono); padding:0.5rem 0.9rem; border-radius:var(--radius-sm); border:1px solid var(--border);}
.btn-primary{background:var(--foreground); color:var(--background); border-color:var(--foreground);}
.btn-ghost-light{color:var(--invert-fg); border-color:rgba(243,239,228,.35);}
.btn-block{width:100%; justify-content:center;}
.btn-ghost{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); border:1px solid var(--border); padding:0.5rem 0.8rem; border-radius:var(--radius-sm);}
.btn-ghost:hover{color:var(--foreground); border-color:var(--border-strong);}
.menu-btn{display:none; flex-direction:column; gap:5px; width:26px; padding:4px;}
.menu-btn span{display:block; height:1px; background:var(--foreground); width:100%;}

@media (max-width:980px){
  .main-nav, .availability{display:none;}
  .menu-btn{display:flex;}
  .nav-right .icon-btn{display:none;}
  .header-inner{padding:0.9rem var(--gutter);}
  .nav-right{gap:0.6rem;}
}

/* full-screen mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:2200; background:var(--invert-bg); color:var(--invert-fg);
  display:flex; flex-direction:column; justify-content:space-between; padding:1.6rem var(--gutter) 2.5rem;
  transform:translateY(-100%); transition:transform var(--duration-medium) var(--ease); overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu-top{display:flex; justify-content:space-between; align-items:center;}
.mobile-menu-top .wordmark{color:var(--invert-fg);}
.mobile-menu-close{font-size:28px; background:none; border:0; color:inherit; line-height:1; padding:0.3rem;}
.mobile-menu-items{display:flex; flex-direction:column; gap:0.3rem; margin-top:10vh;}
.mobile-menu-items a{font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.7rem,8vw,2.6rem); line-height:1.25;}
.mobile-menu-items a.active{color:var(--accent);}
.mobile-menu-bottom{display:flex; flex-direction:column; gap:1rem;}
.mobile-menu-bottom .meta{font-family:var(--font-mono); font-size:0.7rem; color:var(--muted-2);}

/* ==========================================================================
   PAGE TRANSITION (real navigation)
   ========================================================================== */
.page-transition{
  position:fixed; inset:0; z-index:3000; background:var(--invert-bg);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(100%); pointer-events:none;
}
.page-transition.active{transform:translateY(0); transition:transform var(--duration-medium) var(--ease); pointer-events:all;}
.page-transition span{font-family:var(--font-mono); text-transform:uppercase; color:var(--invert-fg); font-size:0.85rem; letter-spacing:0.2em; opacity:0;}
.page-transition.active span{opacity:1; transition:opacity 250ms ease 120ms;}

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */
.search-overlay{
  position:fixed; inset:0; z-index:2500; background:var(--invert-bg); color:var(--invert-fg);
  transform:translateY(-100%); transition:transform var(--duration-medium) var(--ease); overflow-y:auto;
}
.search-overlay.open{transform:translateY(0);}
.search-top{display:flex; justify-content:space-between; align-items:center; padding:1.6rem var(--gutter);}
.search-top .wordmark{color:var(--invert-fg);}
.search-close{font-size:26px; background:none; border:0; color:inherit; line-height:1; padding:0.3rem;}
.search-input-row{padding:2rem var(--gutter) 1.2rem; border-bottom:1px solid rgba(243,239,228,.2);}
.search-input-row input{width:100%; background:none; border:0; color:var(--invert-fg); font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.5rem,6vw,3rem); outline:none;}
.search-input-row input::placeholder{color:rgba(243,239,228,.35);}
.search-results{padding:2rem var(--gutter) 5rem;}
.search-group{margin-bottom:2.5rem;}
.search-group h4{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:0.7rem; color:var(--muted-2); margin-bottom:1rem;}
.search-result-row{display:flex; justify-content:space-between; padding:1rem 0; border-bottom:1px solid rgba(243,239,228,.1); cursor:pointer; font-family:var(--font-display); font-size:1.1rem;}
.search-result-row:hover{color:var(--accent);}
.search-result-row .meta{font-family:var(--font-mono); font-size:0.7rem; color:var(--muted-2);}
.search-empty{padding:3rem 0; text-align:center;}
.search-empty p:first-child{font-family:var(--font-display); text-transform:uppercase; font-size:1.6rem; margin-bottom:0.8rem;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{min-height:86vh; display:flex; flex-direction:column; justify-content:center; position:relative; padding:var(--space-xl) 0 var(--space-lg);}
.hero-line{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border);}
.hero h1{font-size:clamp(2.6rem,9vw,6.2rem); line-height:0.95; letter-spacing:-0.02em;}
.hero-sub{font-family:var(--font-display); font-size:clamp(2.6rem,9vw,6.2rem); line-height:0.95; color:var(--muted); margin-top:0.2em;}
.hero-meta{display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-lg);}
.hero-meta span{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted);}
.hero-scroll{position:absolute; bottom:var(--space-md); left:var(--gutter); font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
.hero-swap{min-height:50vh; display:flex; align-items:center; justify-content:center; text-align:center;}
.hero-swap h2{font-size:clamp(2rem,7vw,4.2rem); position:relative; height:1.2em; overflow:hidden; width:100%;}
.hero-swap-word{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 700ms var(--ease), transform 700ms var(--ease); transform:translateY(12px); font-family:var(--font-display);}
.hero-swap-word.active{opacity:1; transform:translateY(0);}

.manifesto{position:relative;}
.manifesto blockquote{font-family:var(--font-serif); font-style:italic; font-size:clamp(1.6rem,4vw,2.5rem); max-width:16ch; line-height:1.25; margin:0;}
.manifesto .accent-quote{color:var(--accent); margin-top:0.3em;}
.side-annotation{writing-mode:vertical-rl; text-orientation:mixed; position:absolute; right:0; top:0; letter-spacing:0.1em;}
@media (max-width:800px){ .side-annotation{display:none;} }

.counter-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-md);}
.counter-item .num{font-family:var(--font-display); font-size:clamp(2.2rem,6vw,3.6rem); font-weight:600;}
.counter-item .label{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); margin-top:0.3em;}
.counter-item .infinity{display:inline-block; animation:pulse-scale 2.4s ease-in-out infinite;}
@keyframes pulse-scale{0%,100%{opacity:1;}50%{opacity:.4;}}
@media (max-width:900px){ .counter-grid{grid-template-columns:repeat(2,1fr);} }

.start-here-list{border-top:var(--hairline);}
.start-here-item{display:flex; align-items:center; justify-content:space-between; padding:var(--space-sm) 0; border-bottom:var(--hairline); transition:padding-left var(--duration-fast) var(--ease);}
.start-here-item:hover{padding-left:var(--space-xs); background:var(--accent-soft);}
.start-here-item .idx{width:3ch;} .start-here-item .title{font-family:var(--font-display); font-size:clamp(1.1rem,3vw,1.8rem); flex:1; margin-left:var(--space-sm);}
.start-here-item .arrow{transition:transform var(--duration-fast) var(--ease);}
.start-here-item:hover .arrow{transform:translateX(6px);}

/* ==========================================================================
   DETAILS / SUMMARY — used for timelines, accordions, disclosures everywhere
   ========================================================================== */
details > summary{list-style:none; cursor:pointer;}
details > summary::-webkit-details-marker{display:none;}
.disclosure-arrow{font-family:var(--font-mono); color:var(--muted); flex-shrink:0;}

.timeline{border-top:var(--hairline);}
.timeline-item{border-bottom:var(--hairline);}
.timeline-item summary{display:grid; grid-template-columns:140px 1fr auto; gap:var(--space-md); padding:var(--space-md) 0; align-items:start;}
.timeline-item.static{display:grid; grid-template-columns:140px 1fr; gap:var(--space-md); padding:var(--space-md) 0;}
.timeline-item .year{font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem); color:var(--muted); transition:color var(--duration-fast);}
.timeline-item:hover .year, .timeline-item[open] .year{color:var(--accent);}
.timeline-item .tag{color:var(--accent); display:block; margin-bottom:0.3em;}
.timeline-item h3{font-size:var(--step-md);}
.timeline-item p{color:var(--muted); margin-top:0.4em; max-width:60ch;}
.timeline-item[open] summary .disclosure-arrow{transform:rotate(45deg);}
.timeline-detail-body{padding:0 0 var(--space-md) 0; animation:detail-in var(--duration-medium) var(--ease);}
@keyframes detail-in{from{opacity:0;} to{opacity:1;}}
.detail-field{border-top:var(--hairline); padding:var(--space-sm) 0;}
.detail-field.inline{display:flex; gap:0.5rem; border:none; padding:0.2rem 0;}
.detail-field .k{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted);}
.detail-field .v{font-size:var(--step-md); margin-top:0.3em; font-family:var(--font-display);}
.detail-field .v.body{font-family:var(--font-body); font-size:var(--step-base); font-weight:400; color:var(--foreground); margin-top:0.3em;}
.bullet-list{padding-left:1.2rem; list-style:disc; margin-top:0.3em;}
@media (max-width:700px){
  .timeline-item summary{grid-template-columns:1fr auto; gap:0.3rem;}
  .timeline-item.static{grid-template-columns:1fr;}
}

/* ==========================================================================
   PROJECT / BROWSER MOCKUP
   ========================================================================== */
.browser-window{border:var(--hairline); border-radius:var(--radius-md); overflow:hidden; background:var(--surface);}
.browser-chrome{display:flex; align-items:center; gap:0.4rem; padding:0.6rem 0.8rem; border-bottom:var(--hairline); background:var(--background);}
.browser-chrome .dot-set{display:flex; gap:5px;}
.browser-chrome .dot-set span{width:8px; height:8px; border-radius:50%; background:var(--border-strong);}
.browser-chrome .url{flex:1; text-align:center; font-family:var(--font-mono); font-size:0.68rem; color:var(--muted); background:var(--surface); border:var(--hairline); border-radius:20px; padding:0.2rem 0.8rem; margin-left:0.6rem;}
.browser-body{padding:var(--space-sm); display:grid; gap:0.6rem;}
.browser-row{display:flex; gap:0.6rem;}
.browser-block{flex:1; border:var(--hairline); border-radius:var(--radius-sm); padding:0.7rem;}
.browser-block .b-label{font-family:var(--font-mono); font-size:0.62rem; color:var(--muted); display:block; margin-bottom:0.4rem;}
.browser-bar{height:6px; border-radius:3px; background:var(--border); margin-top:0.3rem; overflow:hidden;}
.browser-bar span{display:block; height:100%; background:var(--accent);}

.project-section{border-top:var(--hairline); padding:var(--space-xl) 0; position:relative; overflow:hidden;}
.project-mono{position:absolute; right:-0.05em; top:-0.15em; font-family:var(--font-display); font-size:clamp(7rem,20vw,14rem); font-weight:700; opacity:0.05; line-height:1; pointer-events:none; user-select:none;}
.project-head{display:flex; align-items:baseline; gap:var(--space-sm); margin-bottom:var(--space-sm);}
.project-head .idx{font-family:var(--font-mono); color:var(--muted);}
.project-head h3{font-size:clamp(1.7rem,5vw,2.8rem);}
.project-tagline{color:var(--muted); margin-bottom:var(--space-md); max-width:50ch;}
.project-content{display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-lg); align-items:start;}
@media (max-width:900px){ .project-content{grid-template-columns:1fr;} }
.project-link{display:inline-flex; align-items:center; gap:0.4rem; margin-top:var(--space-sm); font-family:var(--font-mono); font-size:var(--step-mono);}
.project-link .go{transition:transform var(--duration-fast);}
.project-link:hover .go{transform:translateX(5px);}

.process-flow{display:flex; align-items:center; overflow-x:auto; gap:0.4rem; padding:var(--space-sm) 0;}
.process-step{font-family:var(--font-mono); font-size:var(--step-mono); border:var(--hairline); padding:0.6rem 0.9rem; border-radius:20px; white-space:nowrap; color:var(--muted);}
.process-step.active{color:var(--background); background:var(--foreground); border-color:var(--foreground);}
.process-sep{color:var(--muted-2);}

.block-dark{background:var(--invert-bg); color:var(--invert-fg); border-radius:var(--radius-md); padding:var(--space-xl) var(--gutter);}
.block-dark .eyebrow{color:var(--muted-2);}
.block-dark blockquote{font-family:var(--font-serif); font-style:italic; font-size:clamp(1.3rem,3vw,1.9rem); max-width:40ch; margin:0;}

.breadcrumbs{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); margin-bottom:1.5rem; display:flex; gap:0.4rem;}
.breadcrumbs a:hover{color:var(--accent);}

/* ==========================================================================
   SKILLS / LEARNING
   ========================================================================== */
.skill-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-sm);}
@media (max-width:900px){ .skill-card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .skill-card-grid{grid-template-columns:1fr;} }
.skill-card{border:var(--hairline); border-radius:var(--radius-md); padding:var(--space-sm); background:var(--surface);}
.skill-card summary{display:flex; flex-direction:column; gap:0.4rem; align-items:flex-start; position:relative;}
.skill-card summary .disclosure-arrow{position:absolute; top:0; right:0;}
.skill-card h3{font-size:var(--step-md);}
.skill-card-body{margin-top:0.8rem; padding-top:0.8rem; border-top:var(--hairline);}
.skill-pills{display:flex; flex-wrap:wrap; gap:0.4rem;}
.skill-pills span{font-family:var(--font-mono); font-size:var(--step-mono); border:var(--hairline); padding:0.3rem 0.7rem; border-radius:20px;}
.progress-path{display:flex; align-items:center; flex-wrap:wrap; gap:0.3rem;}
.progress-path .stage{font-family:var(--font-mono); font-size:var(--step-mono); padding:0.4rem 0.7rem; border:var(--hairline); border-radius:20px; color:var(--muted);}

.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-sm);}
@media (max-width:800px){ .cert-grid{grid-template-columns:1fr 1fr;} }
.cert-doc{border:var(--hairline); border-radius:var(--radius-sm); padding:var(--space-sm); background:var(--surface); position:relative;}
.cert-doc summary::before, .cert-doc.static::before{content:""; position:absolute; top:10px; right:10px; width:10px; height:10px; border:1px solid var(--border-strong); border-radius:50%;}
.cert-doc .issuer{font-family:var(--font-mono); font-size:0.65rem; color:var(--muted);}
.cert-doc .cname{font-family:var(--font-display); font-size:var(--step-sm); margin-top:0.4rem;}
.cert-doc-body{margin-top:0.8rem; padding-top:0.8rem; border-top:var(--hairline);}

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.journal-item{display:flex; gap:var(--space-md); border-top:var(--hairline); padding:var(--space-md) 0; align-items:baseline;}
.journal-item:last-child{border-bottom:var(--hairline);}
.journal-item .idx{width:3ch; color:var(--muted); font-family:var(--font-mono);}
.journal-item h3{font-size:clamp(1.1rem,3vw,1.6rem); font-weight:500;}
.journal-reader{max-width:680px; margin:0 auto;}
.journal-reader .meta-row{display:flex; gap:var(--space-md); margin-bottom:var(--space-md); flex-wrap:wrap;}
.journal-reader p{font-family:var(--font-serif); font-size:1.1rem; line-height:1.7; margin-bottom:1.2em;}

/* ==========================================================================
   ARCHIVE
   ========================================================================== */
.pill-filters{display:flex; flex-wrap:wrap; gap:0.5rem;}
.pill{font-family:var(--font-mono); font-size:var(--step-mono); padding:0.4rem 0.9rem; border:var(--hairline); border-radius:20px; color:var(--muted);}
.pill.active, .pill:hover{background:var(--foreground); color:var(--background); border-color:var(--foreground);}
.archive-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-sm);}
@media (max-width:900px){ .archive-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .archive-grid{grid-template-columns:1fr;} }
.archive-doc{border:var(--hairline); border-radius:var(--radius-sm); padding:var(--space-sm); background:repeating-linear-gradient(var(--surface), var(--surface) 22px, var(--border) 23px); min-height:150px;}
.archive-doc summary{display:flex; flex-direction:column; height:100%; justify-content:space-between; gap:0.6rem;}
.archive-doc .cat{font-family:var(--font-mono); font-size:0.65rem; color:var(--accent);}
.archive-doc .title{font-family:var(--font-display); font-size:var(--step-sm); margin-top:0.4rem;}
.archive-doc .status{font-family:var(--font-mono); font-size:0.65rem; color:var(--muted);}
.archive-doc-body{margin-top:0.8rem; padding-top:0.8rem; border-top:var(--hairline);}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.page-intro{padding:var(--space-lg) 0 var(--space-md); border-bottom:var(--hairline);}
.page-intro h1{font-size:clamp(2.4rem,8vw,4.6rem); line-height:0.98;}
.page-intro .sub{font-family:var(--font-serif); font-style:italic; font-size:var(--step-md); color:var(--muted); max-width:42ch; margin-top:var(--space-sm);}
.section-label{display:flex; align-items:center; gap:0.6rem; margin-bottom:var(--space-sm);}
.section-label .n, .section-label .l{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); text-transform:uppercase;}
.section-label .rule-flex{flex:1; border-top:var(--hairline);}
.bio-section{border-top:var(--hairline); padding:var(--space-lg) 0;}
.bio-section h3{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--accent); margin-bottom:var(--space-sm);}
.bio-section p{max-width:60ch; font-size:var(--step-md); line-height:1.6;}
.pull-quote{font-family:var(--font-serif); font-style:italic; font-size:clamp(1.3rem,3.5vw,1.9rem); max-width:30ch; margin:var(--space-lg) 0; padding-left:var(--space-md); border-left:2px solid var(--accent);}

.value-item{border-top:var(--hairline); padding:var(--space-md) 0;}
.value-item:last-child{border-bottom:var(--hairline);}
.value-item summary{display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;}
.value-item h3{font-size:clamp(1.4rem,4.5vw,2.2rem); line-height:1.1;}
.value-item .explain{margin-top:0.8rem; color:var(--muted); max-width:60ch;}
.achievement-item{border-top:var(--hairline); padding:var(--space-sm) 0;}
.achievement-item h3{font-size:var(--step-md);}
.achievement-body{margin-top:0.6rem; color:var(--muted);}

.now-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-md);}
@media (max-width:700px){ .now-grid{grid-template-columns:1fr;} }
.now-card{border:var(--hairline); border-radius:var(--radius-md); padding:var(--space-md);}
.now-card h4{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--accent); margin-bottom:0.5rem;}
.now-card p{font-family:var(--font-display); font-size:var(--step-md);}

.failure-item{border-top:1px solid rgba(255,255,255,0.12); padding:var(--space-md) 0;}
.failure-item h3{font-size:clamp(1.2rem,3.5vw,1.9rem); color:var(--invert-fg);}
.failure-item .lesson{font-family:var(--font-serif); font-style:italic; color:var(--muted-2); margin-top:0.5rem;}

.scorecard{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg);}
@media (max-width:700px){ .scorecard{grid-template-columns:1fr;} }
.scorecard-col h4{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); margin-bottom:var(--space-sm);}
.scorecard-row{display:flex; justify-content:space-between; padding:0.5rem 0; border-top:var(--hairline);}

.now-hero-date{font-family:var(--font-display); font-size:clamp(2.6rem,10vw,5.5rem); line-height:0.9; margin-top:1rem;}
.compass-wrap{display:grid; grid-template-columns:260px 1fr; gap:var(--space-lg); align-items:center;}
@media (max-width:800px){ .compass-wrap{grid-template-columns:1fr;} }
.compass{position:relative; width:260px; height:260px; border:var(--hairline); border-radius:50%; margin:0 auto;}
.compass-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--step-sm);}
.compass-dir{position:absolute; font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); background:var(--background); padding:0.3rem 0.6rem; border:var(--hairline); border-radius:20px;}
.compass-dir:hover, .compass-dir.active{color:var(--accent); border-color:var(--accent);}
.compass-dir.build{top:-14px; left:50%; transform:translateX(-50%);}
.compass-dir.learn{top:50%; right:-46px; transform:translateY(-50%);}
.compass-dir.work{bottom:-14px; left:50%; transform:translateX(-50%);}
.compass-dir.explore{top:50%; left:-50px; transform:translateY(-50%);}
.compass-detail{border-left:var(--hairline); padding-left:var(--space-lg);}
@media (max-width:800px){ .compass-detail{border-left:none; border-top:var(--hairline); padding-left:0; padding-top:var(--space-md);} }

.career-map{display:flex; flex-direction:column; align-items:center;}
.career-node-row{display:flex; align-items:center; flex-direction:column;}
.career-node{font-family:var(--font-mono); font-size:var(--step-sm); border:var(--hairline); border-radius:20px; padding:0.5rem 1.1rem; background:var(--surface);}
.career-node.current{border-color:var(--accent); color:var(--accent); animation:node-pulse 2.2s infinite;}
.career-node.dest{border-style:dashed; color:var(--muted);}
@keyframes node-pulse{0%,100%{box-shadow:0 0 0 0 rgba(36,64,224,.25);}50%{box-shadow:0 0 0 8px rgba(36,64,224,0);}}
.career-connector{width:1px; height:var(--space-md); background:var(--border);}

/* ==========================================================================
   CV
   ========================================================================== */
.cv-header{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--space-md); border-bottom:var(--hairline); padding-bottom:var(--space-md);}
.cv-controls{display:flex; gap:0.5rem; flex-wrap:wrap;}
.cv-section{border-top:var(--hairline); padding:var(--space-xs) 0;}
.cv-section summary{display:flex; justify-content:space-between; align-items:center; padding:0.6rem 0;}
.cv-section summary h3{font-size:var(--step-md);}
.cv-section-body{padding-bottom:var(--space-sm);}
.cv-row{display:grid; grid-template-columns:1fr auto; gap:var(--space-sm); padding:0.6rem 0; border-top:var(--hairline);}
.cv-row:first-child{border-top:none;}
.cv-row .r-title{font-family:var(--font-display);}
.cv-row .r-meta{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); text-align:right;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.field{margin-bottom:1.6rem; max-width:640px;}
.field label{display:block; font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); margin-bottom:0.5rem;}
.field input, .field textarea{width:100%; background:transparent; border:none; border-bottom:var(--hairline); padding:0.6rem 0; font-size:var(--step-md); font-family:var(--font-display); outline:none;}
.field input:focus, .field textarea:focus{border-color:var(--accent);}
.field .error{display:none; font-size:0.75rem; color:#B3261E; margin-top:0.4rem; font-family:var(--font-mono);}
.field.invalid input, .field.invalid textarea{border-color:#B3261E;}
.field.invalid .error{display:block;}
.reason-pills{display:flex; flex-wrap:wrap; gap:0.5rem;}
.reason-pills button{font-family:var(--font-mono); font-size:var(--step-mono); border:var(--hairline); padding:0.4rem 0.8rem; border-radius:20px; color:var(--muted);}
.reason-pills button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.submit-btn{font-family:var(--font-mono); font-size:var(--step-sm); background:var(--foreground); color:var(--background); padding:0.8rem 1.6rem; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:0.5rem;}
.submit-btn .go{transition:transform var(--duration-fast);}
.submit-btn:hover .go{transform:translateX(5px);}
.contact-success{text-align:center; padding:var(--space-xl) 0;}
.contact-success h2{font-size:clamp(2.2rem,8vw,4rem);}
.check-mark{margin:var(--space-md) auto;}
.contact-alt{border-top:var(--hairline); margin-top:var(--space-xl); padding-top:var(--space-lg);}
.contact-alt-link{display:flex; justify-content:space-between; align-items:center; padding:var(--space-sm) 0; border-bottom:var(--hairline); font-family:var(--font-display); font-size:clamp(1.3rem,4vw,2rem);}
.contact-alt-link .go{font-family:var(--font-mono); font-size:var(--step-sm); transition:transform var(--duration-fast);}
.contact-alt-link:hover .go{transform:translateX(8px);}

.coord-wrap{display:flex; align-items:center; gap:var(--space-md); margin-top:var(--space-lg);}
.coord-grid{width:90px; height:90px; position:relative; border:var(--hairline); flex-shrink:0;}
.coord-grid::before, .coord-grid::after{content:""; position:absolute; background:var(--border);}
.coord-grid::before{left:50%; top:0; bottom:0; width:1px;} .coord-grid::after{top:50%; left:0; right:0; height:1px;}
.coord-dot{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent); top:38%; left:62%; animation:coord-move 5s ease-in-out infinite;}
@keyframes coord-move{0%,100%{top:38%; left:62%;}50%{top:45%; left:58%;}}

/* ==========================================================================
   TOAST / FOOTER / ERROR
   ========================================================================== */
.toast-region{position:fixed; bottom:1.5rem; right:1.5rem; z-index:3500; display:flex; flex-direction:column; gap:0.5rem;}
.toast{background:var(--invert-bg); color:var(--invert-fg); font-family:var(--font-mono); font-size:var(--step-mono); padding:0.7rem 1rem; border-radius:var(--radius-sm); animation:toast-in var(--duration-medium) var(--ease);}
@keyframes toast-in{from{transform:translateY(10px); opacity:0;} to{transform:translateY(0); opacity:1;}}

.site-footer{border-top:var(--hairline); margin-top:var(--space-2xl); background:var(--surface); padding-top:var(--space-2xl);}
.footer-big{font-size:clamp(2.4rem,8vw,5.2rem); line-height:0.95;}
.footer-big.accent{color:var(--accent);}
.footer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:var(--hairline);}
.footer-grid h4{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted); margin-bottom:var(--space-xs); font-weight:400;}
.footer-grid li{margin-bottom:0.4rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{display:flex; justify-content:space-between; padding:var(--space-sm) 0; border-top:var(--hairline); margin-top:var(--space-md); flex-wrap:wrap; gap:1rem;}
.footer-bottom span{font-family:var(--font-mono); font-size:var(--step-mono); color:var(--muted);}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} }

.error-page{min-height:60vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:var(--space-xl) 0;}
.error-page h1{font-size:clamp(2.4rem,8vw,4.6rem);}

@media print{
  .site-header, .site-footer, #scroll-progress, .toast-region, .search-overlay,
  .page-transition, .mobile-menu, .cv-controls, .btn-ghost{ display:none !important; }
  body{ background:#fff; color:#111; }
  .cv-section-body{ display:block !important; }
  * { animation:none !important; transition:none !important; }
}