/* ==========================================================================
   MWENDA JAYMOH — PORTFOLIO
   Concept: the page is framed like a topographic map sheet — grid margins,
   coordinate readouts, contour-line dividers. Grounded in GIS, not decoration.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* -- color tokens: lifted from real topographic-map conventions,
        not a generic SaaS palette -- */
  --paper:      #EDEAE0;   /* survey-paper putty, not cream */
  --paper-soft: #E2DECF;
  --graphite:   #23211B;   /* warm near-black ink, not blue-black */
  --fog:        #6E695B;
  --line:       rgba(35,33,27,0.15);

  --ink:        #14171B;
  --ink-soft:   #1C2025;
  --bone:       #EDEAE0;
  --mist:       #8D897A;
  --line-dark:  rgba(237,234,224,0.13);

  --survey:     #2E4E75;   /* primary UI accent — map-ink blue, desaturated */
  --survey-dim: #223a58;
  --contour:    #A15A32;   /* contour-line graphics only — real topo sienna/brown */
  --signal:     #456045;   /* live/status indicator only — moss green */

  --bg:         var(--paper);
  --bg-soft:    var(--paper-soft);
  --fg:         var(--graphite);
  --fg-mute:    var(--fog);
  --hairline:   var(--line);
  --surface:    #F7F5EE;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    'Source Serif 4', serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg: var(--ink);
  --bg-soft: var(--ink-soft);
  --fg: var(--bone);
  --fg-mute: var(--mist);
  --hairline: var(--line-dark);
  --surface: #101722;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:0.005em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.mono{ font-family:var(--font-mono); }

.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--survey); margin-bottom:18px;
}
[data-theme="dark"] .eyebrow{ color:#8FADCD; }
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; display:inline-block; }

.section{ padding:120px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(30px,3.8vw,46px); line-height:1.1; text-transform:uppercase; font-weight:700; }
.section-head .lede{ margin-top:16px; color:var(--fg-mute); font-size:17px; }

/* -------------------- ruler margin (signature element) -------------------- */
.ruler{
  position:fixed; left:0; top:0; bottom:0; width:34px; z-index:40;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:96px 0 40px;
  pointer-events:none;
}
.ruler span{
  font-family:var(--font-mono); font-size:9.5px; color:var(--fg-mute);
  opacity:0.5; transform:translateX(6px); writing-mode:vertical-rl;
}
.ruler::before{
  content:''; position:absolute; left:16px; top:0; bottom:0; width:1px; background:var(--hairline);
}
@media (max-width:1024px){ .ruler{ display:none; } }

/* -------------------------------- nav -------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--hairline); }
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-mark{
  width:34px; height:34px; border:1.5px solid var(--fg); border-radius:50%;
  position:relative; flex:none;
}
.nav-mark::before,.nav-mark::after{
  content:''; position:absolute; background:var(--survey);
}
.nav-mark::before{ left:50%; top:50%; width:16px; height:1.5px; transform:translate(-50%,-50%); }
.nav-mark::after{ left:50%; top:50%; width:1.5px; height:16px; transform:translate(-50%,-50%); }
.nav-brand-text{ line-height:1.15; }
.nav-brand-text b{ display:block; font-family:var(--font-display); font-size:15px; font-weight:700; }
.nav-brand-text small{ font-family:var(--font-mono); font-size:10.5px; color:var(--fg-mute); letter-spacing:.04em; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:13.5px; font-family:var(--font-mono); color:var(--fg-mute);
  position:relative; padding:4px 0; transition:color .25s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--survey);
  transition:right .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--fg); }
.nav-links a.active::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.theme-toggle{
  display:flex; align-items:center; gap:8px; border:1px solid var(--hairline); background:transparent;
  color:var(--fg-mute); border-radius:100px; padding:6px 12px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.06em; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.theme-toggle:hover{ color:var(--fg); border-color:var(--fg-mute); }
.theme-dot{ width:6px; height:6px; border-radius:50%; background:var(--survey); }

.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-burger span{ width:20px; height:1.5px; background:var(--fg); display:block; }

@media (max-width:840px){
  .nav-links{
    position:fixed; inset:0 0 auto auto; top:64px; right:0; width:min(78vw,320px);
    background:var(--surface); border-left:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    flex-direction:column; align-items:flex-start; gap:0; padding:12px 0;
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ width:100%; padding:14px 24px; }
  .nav-links a::after{ display:none; }
  .nav-burger{ display:flex; }
}

/* -------------------------------- hero -------------------------------- */
.hero{
  min-height:100svh; display:flex; align-items:center; position:relative;
  padding-top:120px; padding-bottom:80px;
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 60% 30%, black 10%, transparent 75%);
}
.hero-contours{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-contours svg{ width:100%; height:100%; }
.hero-contours path{ fill:none; stroke:var(--contour); stroke-width:1; opacity:.22; }
[data-theme="dark"] .hero-contours path{ stroke:#C1815A; opacity:.28; }

.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.hero-coord{
  position:absolute; top:0; right:0; font-family:var(--font-mono); font-size:11px; color:var(--fg-mute);
  text-align:right; line-height:1.6; opacity:.85;
}
.hero-coord b{ color:var(--survey); }

.hero-kicker{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.hero-kicker .pulse{ width:7px; height:7px; border-radius:50%; background:var(--signal); position:relative; }
.hero-kicker .pulse::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--signal); animation:pulse-ring 2.4s var(--ease) infinite; }
@keyframes pulse-ring{ 0%{transform:scale(.5); opacity:.9;} 100%{transform:scale(1.8); opacity:0;} }

.hero h1{ font-size:clamp(40px, 6.4vw, 88px); line-height:.94; letter-spacing:0.002em; max-width:15ch; text-transform:uppercase; font-weight:700; }
.hero h1 em{ font-style:normal; color:var(--survey); }
.hero .role{ margin-top:26px; font-family:var(--font-mono); font-size:clamp(14px,1.7vw,18px); color:var(--fg-mute); max-width:52ch; }
.hero .role strong{ color:var(--fg); font-weight:600; }
.hero .lede{ margin-top:22px; font-size:17px; color:var(--fg-mute); max-width:56ch; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:42px; }
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:3px;
  font-size:12.5px; font-weight:500; font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
  border:1px solid var(--fg); transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn-primary{ background:var(--fg); color:var(--bg); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--survey); border-color:var(--survey); color:#fff; }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--hairline); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--fg); }
.btn svg{ width:15px; height:15px; }

.hero-scroll{ position:absolute; bottom:36px; left:var(--gutter); display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; color:var(--fg-mute); z-index:1;}
.hero-scroll .line{ width:32px; height:1px; background:var(--fg-mute); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:''; position:absolute; inset:0; background:var(--survey); animation:line-sweep 2.2s var(--ease) infinite; }
@keyframes line-sweep{ 0%{ transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%);} }

/* -------------------------- contour divider -------------------------- */
.contour-divider{ height:64px; width:100%; overflow:hidden; opacity:.5; }
.contour-divider svg{ width:100%; height:100%; }
.contour-divider path{ fill:none; stroke:var(--hairline); stroke-width:1; }

/* -------------------------------- about -------------------------------- */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:72px; align-items:start; }
.about-text p{ margin-bottom:18px; color:var(--fg-mute); font-size:16.5px; }
.about-text strong{ color:var(--fg); font-weight:600; }
.about-cred{ margin-top:32px; display:flex; gap:28px; flex-wrap:wrap; }
.cred-item{ border-left:2px solid var(--survey); padding-left:14px; }
.cred-item b{ display:block; font-family:var(--font-display); font-size:15px; }
.cred-item span{ font-family:var(--font-mono); font-size:12px; color:var(--fg-mute); }

.about-panel{
  border:1px solid var(--hairline); border-radius:6px; padding:28px; background:var(--surface);
}
.about-panel h4{ font-size:13px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--fg-mute); margin-bottom:18px; }
.principle{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--hairline); }
.principle:first-of-type{ border-top:none; }
.principle .num{ font-family:var(--font-mono); color:var(--survey); font-size:13px; flex:none; width:28px; }
.principle p{ font-size:14.5px; color:var(--fg-mute); }
.principle strong{ color:var(--fg); }

/* -------------------------------- skills -------------------------------- */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.skill-card{ background:var(--bg); padding:28px; transition:background .3s var(--ease); }
.skill-card:hover{ background:var(--bg-soft); }
.skill-card h4{ font-size:16px; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.skill-card h4 .tag{ font-family:var(--font-mono); font-size:10px; color:var(--fg-mute); font-weight:400; }
.skill-row{ margin-bottom:14px; }
.skill-row:last-child{ margin-bottom:0; }
.skill-row-top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.skill-row-top span:first-child{ color:var(--fg); }
.skill-row-top span:last-child{ font-family:var(--font-mono); color:var(--fg-mute); font-size:11.5px; }
.meter{ height:3px; background:var(--hairline); border-radius:2px; overflow:hidden; }
.meter i{ display:block; height:100%; background:var(--survey); width:0; transition:width 1.1s var(--ease); border-radius:2px; }
[data-theme="dark"] .meter i{ background:#8FADCD; }

/* --------------------------- technical expertise --------------------------- */
.expertise-list{ display:flex; flex-direction:column; }
.expertise-item{
  display:grid; grid-template-columns:220px 1fr; gap:32px; padding:26px 0; border-top:1px solid var(--hairline);
  align-items:start;
}
.expertise-item:last-child{ border-bottom:1px solid var(--hairline); }
.expertise-name{ font-family:var(--font-display); font-size:19px; display:flex; align-items:baseline; gap:8px; }
.expertise-name span{ font-family:var(--font-mono); font-size:11px; color:var(--survey); }
.expertise-item p{ color:var(--fg-mute); font-size:15px; }
@media (max-width:700px){ .expertise-item{ grid-template-columns:1fr; gap:8px; } }

/* -------------------------------- architecture -------------------------------- */
.flow{ display:flex; flex-direction:column; max-width:520px; margin-inline:auto; }
.flow-step{
  display:flex; align-items:center; gap:18px; padding:16px 20px; border:1px solid var(--hairline);
  border-radius:6px; background:var(--surface); position:relative; z-index:1;
}
.flow-step .idx{ font-family:var(--font-mono); font-size:11px; color:var(--survey); width:20px; flex:none; }
.flow-step b{ font-family:var(--font-display); font-size:16px; display:block; }
.flow-step span{ font-size:13px; color:var(--fg-mute); }
.flow-connector{ height:34px; width:1px; background:var(--hairline); margin-left:38px; position:relative; }
.flow-connector::after{
  content:''; position:absolute; top:0; left:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--signal);
  animation:flow-dot 3.2s linear infinite;
}
@keyframes flow-dot{ 0%{ top:0; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ top:100%; opacity:0;} }

.process-row{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--hairline); border-radius:6px; overflow:hidden; }
.process-step{ flex:1 1 140px; padding:22px 18px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); position:relative; }
.process-step:nth-last-child(1), .process-step:nth-last-child(2){ border-bottom:none; }
.process-step .n{ font-family:var(--font-mono); font-size:11px; color:var(--fg-mute); }
.process-step b{ display:block; margin-top:8px; font-family:var(--font-display); font-size:15px; }

/* -------------------------------- projects -------------------------------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-btn{
  border:1px solid var(--hairline); background:transparent; color:var(--fg-mute); padding:8px 16px; border-radius:100px;
  font-family:var(--font-mono); font-size:12.5px; transition:all .25s var(--ease);
}
.filter-btn:hover{ border-color:var(--fg-mute); color:var(--fg); }
.filter-btn.active{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:28px; }
.project-card{
  border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background:var(--surface);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
  display:flex; flex-direction:column;
}
.project-card:hover{ transform:translateY(-6px); border-color:var(--survey); }
.project-media{
  height:170px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, var(--hairline) 10px 11px),
    var(--bg-soft);
}
.project-media svg{ width:46px; height:46px; color:var(--survey); opacity:.9; }
.project-body{ padding:24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.project-cat{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); }
.project-body h3{ font-size:20px; }
.project-body .desc{ font-size:14.5px; color:var(--fg-mute); }
.project-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.project-tags span{ font-family:var(--font-mono); font-size:10.5px; padding:4px 8px; border:1px solid var(--hairline); border-radius:4px; color:var(--fg-mute); }
.project-meta{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--fg-mute); border-top:1px solid var(--hairline); padding-top:14px; margin-top:auto; }
.project-meta b{ color:var(--fg); font-weight:600; }
.project-links{ display:flex; gap:16px; padding:0 24px 24px; }
.project-links a{ font-family:var(--font-mono); font-size:12.5px; display:flex; align-items:center; gap:6px; color:var(--fg-mute); transition:color .25s var(--ease); }
.project-links a:hover{ color:var(--survey); }
.project-links svg{ width:13px; height:13px; }

/* -------------------------------- timeline -------------------------------- */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--hairline); }
.t-item{ position:relative; padding-bottom:44px; }
.t-item:last-child{ padding-bottom:0; }
.t-item::before{ content:''; position:absolute; left:-32px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--survey); }
.t-date{ font-family:var(--font-mono); font-size:12px; color:var(--survey); margin-bottom:6px; display:block; }
.t-item h4{ font-size:18px; margin-bottom:4px; }
.t-item .org{ font-size:13.5px; color:var(--fg-mute); font-family:var(--font-mono); margin-bottom:10px; display:block; }
.t-item p{ font-size:14.5px; color:var(--fg-mute); max-width:60ch; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
@media (max-width:820px){ .two-col, .about-grid{ grid-template-columns:1fr; gap:48px; } }

.edu-item{ border-top:1px solid var(--hairline); padding:20px 0; }
.edu-item:last-child{ border-bottom:1px solid var(--hairline); }
.edu-item .t-date{ margin-bottom:4px; }
.edu-item h4{ font-size:17px; }
.edu-item span.school{ color:var(--fg-mute); font-size:13.5px; }
.cert-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.cert-list span{ font-family:var(--font-mono); font-size:12px; padding:8px 14px; border:1px solid var(--hairline); border-radius:100px; color:var(--fg-mute); }

/* -------------------------------- research -------------------------------- */
.research-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px; }
.research-tags span{
  font-family:var(--font-mono); font-size:12.5px; padding:9px 16px; border:1px solid var(--hairline); border-radius:4px;
  color:var(--fg-mute); transition:border-color .25s var(--ease), color .25s var(--ease);
}
.research-tags span:hover{ border-color:var(--survey); color:var(--fg); }
.pub-placeholder{ border:1px dashed var(--hairline); border-radius:8px; padding:36px; text-align:center; color:var(--fg-mute); font-size:14.5px; }
.pub-placeholder b{ display:block; color:var(--fg); font-family:var(--font-display); font-size:16px; margin-bottom:6px; }

/* -------------------------------- github -------------------------------- */
.gh-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; }
.gh-card{ border:1px solid var(--hairline); border-radius:8px; padding:20px; background:var(--surface); overflow:hidden; }
.gh-card img{ width:100%; border-radius:4px; }
.gh-full{ grid-column:1 / -1; }
@media (max-width:760px){ .gh-grid{ grid-template-columns:1fr; } }

/* -------------------------------- blog / testimonials -------------------------------- */
.placeholder-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.placeholder-card{ border:1px solid var(--hairline); border-radius:8px; padding:26px; background:var(--surface); }
.placeholder-card .tag{ font-family:var(--font-mono); font-size:10.5px; color:var(--signal); text-transform:uppercase; letter-spacing:.08em; }
.placeholder-card h4{ font-size:17px; margin:12px 0 8px; }
.placeholder-card p{ font-size:14px; color:var(--fg-mute); }
.quote-card{ border:1px solid var(--hairline); border-radius:8px; padding:28px; background:var(--surface); }
.quote-card p{ font-size:15.5px; font-style:normal; color:var(--fg); margin-bottom:18px; }
.quote-card .who{ font-family:var(--font-mono); font-size:12.5px; color:var(--fg-mute); }

/* -------------------------------- contact -------------------------------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; }
.contact-info .row{ display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid var(--hairline); }
.contact-info .row:first-child{ border-top:none; }
.contact-info .row svg{ width:17px; height:17px; color:var(--survey); flex:none; }
.contact-info .row a, .contact-info .row span{ font-size:14.5px; }
.contact-info .row small{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.07em; margin-bottom:2px; }

.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-mute); margin-bottom:8px; }
.form-row input, .form-row textarea{
  width:100%; background:var(--surface); border:1px solid var(--hairline); border-radius:4px; padding:12px 14px;
  color:var(--fg); font-family:var(--font-body); font-size:14.5px; transition:border-color .25s var(--ease);
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--survey); }
.form-row textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:12.5px; color:var(--fg-mute); margin-top:10px; }

/* -------------------------------- footer -------------------------------- */
footer{ border-top:1px solid var(--hairline); padding:40px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-row p{ font-family:var(--font-mono); font-size:12px; color:var(--fg-mute); }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ font-family:var(--font-mono); font-size:12px; color:var(--fg-mute); transition:color .25s var(--ease); }
.footer-links a:hover{ color:var(--survey); }

/* -------------------------------- reveal utility -------------------------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *{ transition-delay:calc(var(--i,0) * 70ms); }

/* -------------------------------- cursor coord badge -------------------------------- */
.coord-badge{
  position:fixed; z-index:60; pointer-events:none; font-family:var(--font-mono); font-size:10.5px;
  color:var(--survey); background:var(--surface); border:1px solid var(--hairline); padding:3px 8px; border-radius:3px;
  transform:translate(14px,14px); opacity:0; transition:opacity .2s var(--ease); white-space:nowrap;
}
.coord-badge.show{ opacity:.95; }
@media (max-width:1024px){ .coord-badge{ display:none; } }

/* -------------------------------- responsive type scale -------------------------------- */
@media (max-width:600px){
  .section{ padding:80px 0; }
  .hero{ padding-top:110px; }
  .hero-coord{ position:static; margin-bottom:28px; text-align:left; }
  .hero-inner{ grid-template-columns:1fr; }
  .about-cred{ gap:20px; }
}