:root{
  --bg: #000000;
  --bg-alt: #0A0A0A;
  --panel: #0D0D0D;
  --ink: #F3F3F1;
  --ink-dim: #9A9A9A;
  --ink-faint: #545454;
  --accent: #FFFFFF;
  --accent-soft: rgba(255,255,255,0.08);
  --accent-glow: rgba(255,255,255,0.45);
  --patina: #C7C7C7;
  --patina-soft: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.18);
  --line-faint: rgba(255,255,255,0.08);
  --dot: rgba(255,255,255,0.07);
  --header-bg: rgba(0,0,0,0.72);
  --modal-overlay: rgba(0,0,0,0.7);
  --radius: 3px;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
  color-scheme: dark;
}
html[data-theme="light"]{
  --bg: #FFFFFF;
  --bg-alt: #F6F6F4;
  --panel: #FAFAF9;
  --ink: #121212;
  --ink-dim: #5C5C5C;
  --ink-faint: #9C9C9C;
  --accent: #111111;
  --accent-soft: rgba(0,0,0,0.05);
  --accent-glow: rgba(0,0,0,0.25);
  --patina: #454545;
  --patina-soft: rgba(0,0,0,0.05);
  --line: rgba(0,0,0,0.15);
  --line-faint: rgba(0,0,0,0.08);
  --dot: rgba(0,0,0,0.07);
  --header-bg: rgba(255,255,255,0.72);
  --modal-overlay: rgba(255,255,255,0.7);
  color-scheme: light;
}
*{box-sizing:border-box;}
::selection{ background: var(--accent); color:var(--bg); }
html{ scroll-behavior:smooth; }
html, body{ transition: background-color .5s ease, color .5s ease; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); overflow-x:hidden;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 28px 28px;
}
body.reduced-motion, body.reduced-motion *{ transition-duration: .05s !important; animation-duration: .05s !important; scroll-behavior:auto !important; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- custom cursor ---------- */
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  transition: opacity .2s ease;
}
#cursor-dot{ width:6px; height:6px; background:var(--accent); }
#cursor-ring{ width:34px; height:34px; border:1px solid var(--line); transition: transform .12s ease-out, border-color .2s, width .2s, height .2s; }
body.cursor-active #cursor-ring{ border-color: var(--patina); }
@media (pointer:coarse){ #cursor-dot,#cursor-ring{ display:none !important; } }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 40px; backdrop-filter: blur(10px);
  background: var(--header-bg);
  border-bottom:1px solid var(--line-faint);
  transition: background-color .5s ease, border-color .5s ease;
}
.brand{ font-family:var(--mono); font-size:14px; letter-spacing:.12em; display:flex; align-items:center; gap:8px; }
.brand-dot{ width:8px; height:8px; background:var(--accent); border-radius:50%; box-shadow:0 0 10px var(--accent-glow); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

nav{ display:flex; gap:2px; position:relative; }
nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-dim);
  padding:8px 13px; position:relative; text-transform:uppercase;
  transition: color .25s ease; white-space:nowrap;
}
nav a:hover{ color:var(--ink); }
nav a.active{ color:var(--accent); }
#nav-trace{
  position:absolute; bottom:0; height:1px; background:var(--accent);
  transition: left .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1);
  box-shadow:0 0 8px var(--accent-glow);
}
.nav-toggle{ display:none; font-family:var(--mono); color:var(--ink); background:none; border:1px solid var(--line); padding:8px 12px; cursor:pointer; }

.header-right{ display:flex; align-items:center; gap:14px; }
#theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:transparent; cursor:pointer; position:relative; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition: border-color .25s ease;
}
#theme-toggle:hover{ border-color:var(--accent); }
#theme-toggle svg{ width:16px; height:16px; position:absolute; transition: opacity .35s ease, transform .5s cubic-bezier(.4,0,.2,1); }
#theme-toggle .icon-sun{ opacity:0; transform: rotate(-90deg) scale(.5); }
#theme-toggle .icon-moon{ opacity:1; transform: rotate(0) scale(1); }
html[data-theme="light"] #theme-toggle .icon-sun{ opacity:1; transform: rotate(0) scale(1); }
html[data-theme="light"] #theme-toggle .icon-moon{ opacity:0; transform: rotate(90deg) scale(.5); }

@media (max-width: 980px){
  nav{ position:fixed; top:60px; left:0; right:0; background:var(--bg-alt); flex-direction:column; padding:10px 0; border-bottom:1px solid var(--line-faint); transform:translateY(-140%); visibility:hidden; pointer-events:none; transition: transform .35s ease, visibility 0s linear .35s; max-height:80vh; overflow-y:auto; }
  nav.open{ transform:translateY(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
  nav a{ padding:14px 28px; }
  #nav-trace{ display:none; }
  .nav-toggle{ display:block; }
  header{ padding:16px 20px; }
}

/* ---------- page transition wipe ---------- */
#wipe{
  position:fixed; inset:0; z-index:4000; background:var(--accent);
  transform: scaleY(0); transform-origin: bottom; pointer-events:none;
}
#wipe.run{ animation: wipeUp .6s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes wipeUp{
  0%{ transform:scaleY(0); transform-origin:bottom; }
  48%{ transform:scaleY(1); transform-origin:bottom; }
  52%{ transform-origin:top; }
  100%{ transform:scaleY(0); transform-origin:top; }
}

/* ---------- pages ---------- */
main{ padding-top:78px; min-height:100vh; }
.page{ padding: 60px 24px 120px; max-width:1080px; margin:0 auto; }
@media (min-width:640px){ .page{ padding: 60px 40px 120px; } }
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }

.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--patina); text-transform:uppercase; margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--patina); }

h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0; color:var(--ink); }
p{ line-height:1.7; color:var(--ink-dim); }
.nigeria-highlight{
  color:#18A558;
  font-weight:500;
  background:linear-gradient(90deg, #18A558 0%, #FFFFFF 50%, #18A558 100%);
  background-size:200% 100%;
  background-position:0 0;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:nigeria-pulse 2.4s ease-in-out infinite;
}
html[data-theme="light"] .nigeria-highlight{
  background-image:linear-gradient(90deg, #16803C 0%, #4A4A4A 50%, #16803C 100%);
}
body.reduced-motion .nigeria-highlight{
  animation:none;
  background-position:0 0;
}
@media (forced-colors:active){
  .nigeria-highlight{
    background:none;
    -webkit-text-fill-color:currentColor;
    color:LinkText;
  }
}
@keyframes nigeria-pulse{
  0%,100%{ background-position:0 0; }
  50%{ background-position:100% 0; }
}

/* ---------- HERO / HOME ---------- */
.hero{ min-height:56vh; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:639px){ .hero{ min-height:42vh; } }
.hero h1{ font-size: clamp(34px, 8vw, 76px); line-height:1.05; letter-spacing:-0.01em; }
.hero h1 .accent-word{ color:var(--accent); font-style:italic; }
.hero-sub{ font-family:var(--mono); font-size:13.5px; color:var(--ink-dim); margin-top:22px; max-width:560px; min-height:20px; }
#typecursor{ display:inline-block; width:8px; height:16px; background:var(--accent); margin-left:2px; animation: blink 1s steps(1) infinite; vertical-align:-2px; }
@keyframes blink{ 50%{ opacity:0; } }
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.btn{
  position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 22px; border-radius:var(--radius); cursor:pointer; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px; border:1px solid transparent;
}
.btn-solid{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--patina); color:var(--patina); }
.btn .arrow{ transition: transform .25s ease; }
.btn:hover .arrow{ transform:translateX(4px); }

.intro-video{ margin-top:56px; }
.video-frame{ position:relative; aspect-ratio:16 / 9; overflow:hidden; border:1px solid var(--line-faint); border-radius:var(--radius); background:var(--panel); }
.video-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- HOME: Featured Project (single project, image carousel) ---------- */
.featured-wrap{ margin-top:56px; }
.featured-head{ margin-bottom:18px; }
.featured-head h2{ font-size:clamp(20px,3vw,28px); }
.featured-card{
  display:grid; grid-template-columns:1fr; border:1px solid var(--line-faint); border-radius:var(--radius);
  background:var(--panel); overflow:hidden;
}
@media (min-width:760px){ .featured-card{ grid-template-columns: 1.1fr 1fr; } }

.carousel{ position:relative; overflow:hidden; background:var(--bg-alt); min-height:220px; }
@media (min-width:760px){ .carousel{ min-height:auto; } }
.carousel-track{ display:flex; height:100%; transition: transform .5s cubic-bezier(.65,0,.35,1); }
.carousel-slide{ flex:0 0 100%; min-width:0; position:relative; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; min-height:220px; }
.carousel-slide .media-fallback{ display:flex; align-items:center; justify-content:center; height:100%; min-height:220px; font-family:var(--mono); color:var(--ink-faint); font-size:12px; letter-spacing:.06em; text-align:center; padding:20px; }
.carousel-caption{
  position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent);
  font-family:var(--mono); font-size:11px; color:#fff; letter-spacing:.05em;
}
html[data-theme="light"] .carousel-caption{ background:linear-gradient(to top, rgba(255,255,255,.75), transparent); color:#111; }

.carousel-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-faint); background:var(--header-bg);
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s;
  font-size:16px; backdrop-filter:blur(6px);
}
.carousel-nav-btn:hover{ border-color:var(--accent); color:var(--accent); }
.carousel-nav-btn.prev{ left:10px; }
.carousel-nav-btn.next{ right:10px; }

.carousel-dots{ display:flex; gap:8px; justify-content:center; padding:14px 0; flex-wrap:wrap; }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:.2s; flex-shrink:0; }
.carousel-dots button.active{ background:var(--accent); width:20px; border-radius:5px; }

.featured-body{ padding:26px 22px; display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0; }
@media (min-width:760px){ .featured-body{ padding:34px 36px; } }
.featured-body .card-tag{ font-family:var(--mono); font-size:11px; color:var(--patina); text-transform:uppercase; letter-spacing:.08em; }
.featured-body h3{ font-size:clamp(20px,4vw,26px); }
.featured-body p{ font-size:14.5px; }
.featured-body .meta-row{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

/* ---------- HOME: Open Source strip (links out to Work) ---------- */
.oss-strip{ margin-top:56px; border:1px solid var(--line-faint); border-radius:var(--radius); padding:28px 26px; background:var(--panel); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.oss-strip h3{ font-size:18px; margin-bottom:6px; }
.oss-strip p{ margin:0; font-size:13.5px; }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns: 1fr; gap:40px; margin-top:20px; }
@media (min-width:760px){ .about-grid{ grid-template-columns: 1.2fr 1fr; gap:60px; } }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tag{ font-family:var(--mono); font-size:12px; padding:7px 14px; border:1px solid var(--line); border-radius:20px; color:var(--ink-dim); transition:.25s; }
.tag:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.focus-card{ background:var(--panel); border:1px solid var(--line-faint); padding:24px; border-radius:var(--radius); }
.focus-item{ margin-bottom:18px; }
.focus-item:last-child{ margin-bottom:0; }
.focus-item .flabel{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-bottom:8px; }
.bar{ height:4px; background:var(--bg); border-radius:4px; overflow:hidden; }
.bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--patina),var(--accent)); width:0%; transition: width 1.4s cubic-bezier(.2,.7,.3,1); }
.focus-note{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:20px; font-style:italic; }
.about-section{ margin-top:64px; }
.about-section > .eyebrow{ margin-bottom:10px; }
.about-section > h3{ font-size:clamp(22px,3vw,30px); }
.section-intro{ max-width:560px; margin:10px 0 24px; font-size:14px; }
.language-status{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:10px; }
.language-status a{ color:var(--accent); }
.language-top-label{ display:flex; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:13px; color:var(--ink); margin-bottom:8px; }
.language-top-label strong, .language-item strong{ color:var(--patina); font-weight:500; }
.language-bar{ height:8px; background:var(--bg-alt); border:1px solid var(--line-faint); overflow:hidden; }
.language-bar i{ display:block; height:100%; background:var(--accent); transition:width 1.2s cubic-bezier(.2,.7,.3,1); }
.language-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin-top:24px; border-top:1px solid var(--line-faint); }
.language-item{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-faint); font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
@media (max-width:520px){ .language-grid{ grid-template-columns:1fr; } }

/* ---------- JOURNEY ---------- */
.timeline{ position:relative; margin-top:50px; padding-left:34px; }
.trace-svg{ position:absolute; left:0; top:0; height:100%; width:36px; }
.trace-path{ stroke:var(--line); stroke-width:2; fill:none; }
.trace-path.drawn{ stroke:var(--accent); }
.tl-item{ position:relative; padding: 6px 0 46px 24px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-node{ position:absolute; left:-4px; top:8px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--line-faint); transition: all .4s ease; }
.tl-item.is-visible .tl-node{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 14px var(--accent-glow); }
.tl-year{ font-family:var(--mono); font-size:12px; color:var(--patina); letter-spacing:.1em; }
.tl-item h3{ font-size:clamp(18px,3vw,22px); margin:6px 0 10px; }

/* ---------- WORK ---------- */
.filters{ display:flex; gap:10px; margin: 26px 0 20px; flex-wrap:wrap; }
.filter-btn{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:9px 16px; border:1px solid var(--line); background:transparent; color:var(--ink-dim); cursor:pointer; border-radius:20px; transition:.2s; }
.filter-btn.active, .filter-btn:hover{ border-color:var(--accent); color:var(--accent); }
.work-status{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.spinner{ width:12px; height:12px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; flex-shrink:0; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.work-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:700px){ .work-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
.card{
  background:var(--panel); border:1px solid var(--line-faint); border-radius:var(--radius); padding:24px;
  transition: transform .25s ease, border-color .25s ease, opacity .3s ease;
}
.card:hover{ border-color:var(--line); }
.card.hide{ display:none; }
.card-tag{ font-family:var(--mono); font-size:11px; color:var(--patina); text-transform:uppercase; letter-spacing:.08em; }
.card h3{ font-size:20px; margin:10px 0 10px; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); gap:10px; flex-wrap:wrap; }
.card-foot a{ color:var(--accent); }
.gh-profile-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-bottom:24px; border:1px solid var(--line); padding:8px 14px; border-radius:20px; transition:.2s; }
.gh-profile-link:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- SEARCH (shared by Notes/Blog) ---------- */
.search-wrap{ position:relative; margin: 20px 0 34px; }
#blog-search{ width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink); font-family:var(--mono); font-size:14px; padding:14px 18px; border-radius:var(--radius); outline:none; }
#blog-search:focus{ border-color:var(--accent); }

/* ---------- USES (accordion) ---------- */
.accordion{ border-top:1px solid var(--line-faint); margin-top:20px; }
.accordion-item{ border-bottom:1px solid var(--line-faint); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; padding:20px 2px; text-align:left;
  font-family:var(--serif); font-size:clamp(17px,2.4vw,20px); color:var(--ink);
}
.accordion-trigger .acc-sign{
  font-family:var(--mono); font-size:16px; color:var(--patina); width:22px; text-align:center; flex-shrink:0;
  transition: transform .25s ease;
}
.accordion-trigger .acc-label{ flex:1; display:flex; align-items:baseline; gap:12px; }
.accordion-trigger .acc-count{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .4s cubic-bezier(.2,.7,.3,1); }
.accordion-item.open .accordion-panel{ max-height:1200px; }
.accordion-item.open .acc-sign{ transform:rotate(0deg); }
.accordion-body{ padding:0 2px 26px; }

.uses-list{ display:flex; flex-direction:column; gap:0; }
.uses-item{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line-faint); }
.uses-item:last-child{ border-bottom:none; }
.uses-item .u-name{ color:var(--ink); font-weight:500; }
.uses-item .u-note{ color:var(--ink-faint); font-size:13px; text-align:right; max-width:55%; }
@media (max-width:600px){ .uses-item{ flex-direction:column; gap:4px; } .uses-item .u-note{ text-align:left; max-width:100%; } }


/* ---------- RESUME ---------- */
.resume-block{ margin-bottom:38px; }
.resume-block h3{ font-size:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); margin-bottom:20px; }
.resume-entry{ padding:18px 0; border-bottom:1px solid var(--line-faint); }
.resume-entry:last-child{ border-bottom:none; }
.resume-entry-head{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.resume-entry-head strong{ font-family:var(--serif); font-size:17px; color:var(--ink); font-weight:600; }
.resume-entry-head span{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
.resume-entry .org{ font-family:var(--mono); font-size:12px; color:var(--patina); margin-bottom:8px; display:block; }
.resume-entry p{ font-size:14px; margin:0; }

/* ---------- TESTIMONIALS ---------- */
.testimonial-marquee{ margin:96px calc(50% - 50vw) 0; padding:56px 0 18px; border-top:1px solid var(--line-faint); overflow:hidden; }
.testimonial-heading{ max-width:620px; margin:0 auto 38px; padding:0 24px; text-align:center; }
.testimonial-badge{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--patina); border:1px solid var(--line); border-radius:20px; padding:7px 12px; margin-bottom:16px; }
.testimonial-heading h2{ font-size:clamp(26px,4vw,42px); line-height:1.1; }
.marquee-viewport{ display:flex; flex-direction:column; gap:18px; }
.marquee-row{ overflow:hidden; width:100%; }
.marquee-track{ display:flex; width:max-content; gap:18px; animation:testimonial-left 42s linear infinite; }
.marquee-right .marquee-track{ animation-name:testimonial-right; }
.marquee-row:hover .marquee-track{ animation-play-state:paused; }
.marquee-row:focus .marquee-track, .marquee-row:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-row:focus-visible{ outline:1px solid var(--accent); outline-offset:6px; }
.marquee-card{ width:min(360px,78vw); min-height:210px; flex:0 0 auto; padding:22px; border:1px solid var(--line-faint); border-radius:var(--radius); background:var(--panel); display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.quote-icon{ color:var(--accent); font-family:var(--serif); font-size:38px; line-height:.7; }
.marquee-card p{ margin:0; color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.5; }
.testimonial-author{ display:flex; align-items:center; gap:10px; }
.testimonial-author img{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--bg-alt); border:1px solid var(--line); }
.testimonial-author span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.testimonial-author strong{ color:var(--ink); font-family:var(--mono); font-size:11px; font-weight:500; }
.testimonial-author small{ color:var(--ink-faint); font-family:var(--mono); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.marquee-card[role="button"]{ cursor:pointer; }
.marquee-card:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }
.marquee-card[role="button"]:hover{ border-color:var(--patina); }
#toast{ position:fixed; left:50%; bottom:24px; z-index:6000; transform:translate(-50%,14px); opacity:0; pointer-events:none; padding:11px 15px; border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:var(--radius); background:var(--panel); color:var(--ink); box-shadow:0 10px 26px var(--accent-soft); font-family:var(--mono); font-size:11px; transition:opacity .2s ease, transform .2s ease, background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
#toast.show{ opacity:1; transform:translate(-50%,0); }
@keyframes testimonial-left{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 9px)); } }
@keyframes testimonial-right{ from{ transform:translateX(calc(-50% - 9px)); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation-play-state:paused; } }

/* ---------- BLOG / NOTES (premium standalone pages) ---------- */
.blog-grid{ display:flex; flex-direction:column; margin-top:20px; }
.blog-card{ display:block; padding:28px 0; border-bottom:1px solid var(--line-faint); transition: padding-left .25s ease; }
.blog-card:hover{ padding-left:10px; }
.blog-card:hover h3{ color:var(--accent); }
.blog-card .b-date{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block; }
.blog-card h3{ font-size:clamp(20px,3.4vw,26px); margin-bottom:10px; transition:color .2s; }
.blog-card p{ font-size:14.5px; margin:0; }
.blog-card .b-readmore{ font-family:var(--mono); font-size:11.5px; color:var(--patina); margin-top:12px; display:inline-block; }

.blog-post-head{ margin-bottom:36px; }
.blog-post-body p{ font-size:16px; line-height:1.85; color:var(--ink); margin-bottom:20px; max-width:680px; }
.blog-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-bottom:30px; }
.blog-back:hover{ color:var(--accent); }

.note-row{ padding:20px 0; border-bottom:1px solid var(--line-faint); display:flex; justify-content:space-between; gap:16px; cursor:pointer; transition: padding-left .25s ease; }
.note-row:hover{ padding-left:8px; }
.note-row:hover h3{ color:var(--accent); }
.note-row h3{ font-size:18px; margin-bottom:6px; transition:color .2s; }
.note-date{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.no-notes{ font-family:var(--mono); color:var(--ink-faint); padding:30px 0; }
.note-detail{ max-height:0; overflow:hidden; transition: max-height .4s ease; }
.note-row.open .note-detail{ max-height:220px; }
.note-row .note-detail p{ margin:12px 0 0; font-size:14px; }
.note-main{ flex:1; min-width:0; }
.note-chevron{ transition: transform .3s ease; color:var(--ink-faint); font-family:var(--mono); font-size:18px; line-height:1; }
.note-row.open .note-chevron{ transform:rotate(90deg); color:var(--accent); }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:40px; margin-top:20px; }
@media (min-width:760px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:60px; } }
.field{ position:relative; margin-bottom:26px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--sans); font-size:15px; padding:10px 2px; outline:none; resize:none;
}
.field label{ position:absolute; left:2px; top:10px; color:var(--ink-faint); font-size:15px; pointer-events:none; transition: all .2s ease; }
.field input:focus ~ label, .field input:valid ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:-14px; font-size:11px; color:var(--patina); letter-spacing:.05em;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.social-list a{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line-faint); font-family:var(--mono); font-size:13px; color:var(--ink-dim); transition:.2s; }
.social-list a:hover{ color:var(--accent); padding-left:8px; }
#toast{ position:fixed; bottom:20px; left:50%; transform:translate(-50%,140%); background:var(--patina); color:#0D0F12; font-family:var(--mono); font-size:13px; padding:14px 22px; border-radius:var(--radius); transition: transform .4s cubic-bezier(.2,.8,.3,1); z-index:3000; max-width:90vw; text-align:center; }
#toast.show{ transform:translate(-50%,0); }

footer{ text-align:center; padding:40px 20px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); border-top:1px solid var(--line-faint); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 1px solid var(--accent); outline-offset: 3px;
}

/* ---------- modal ---------- */
#modalOverlay{
  position:fixed; inset:0; z-index:2500; background:var(--modal-overlay);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition: opacity .3s ease, background-color .5s ease;
}
#modalOverlay.show{ opacity:1; pointer-events:auto; }
#modalCard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  max-width:520px; width:100%; padding:28px; position:relative;
  transform: translateY(18px) scale(.98); opacity:0; transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease;
  max-height:82vh; overflow-y:auto;
}
@media (min-width:600px){ #modalCard{ padding:36px; } }
#modalOverlay.show #modalCard{ transform:translateY(0) scale(1); opacity:1; }
#modalClose{
  position:absolute; top:16px; right:16px; background:none; border:1px solid var(--line);
  color:var(--ink-dim); width:30px; height:30px; border-radius:50%; cursor:pointer; transition:.2s;
}
#modalClose:hover{ border-color:var(--accent); color:var(--accent); }
#modalTitle{ font-size:24px; margin:12px 0 14px; }
#modalDetail{ margin-bottom:20px; }
.modal-stack{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.modal-stack span{ font-family:var(--mono); font-size:11px; padding:5px 12px; border:1px solid var(--line); border-radius:14px; color:var(--ink-dim); }
dialog#testimonialDialog{ width:min(440px,calc(100% - 40px)); padding:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--ink); }
dialog#testimonialDialog::backdrop{ background:var(--modal-overlay); }
.testimonial-dialog-card{ position:relative; padding:30px; }
.testimonial-dialog-card .eyebrow{ margin-bottom:18px; }
.testimonial-dialog-card h2{ font-size:clamp(24px,5vw,32px); margin-bottom:12px; }
.testimonial-dialog-card p:not(.eyebrow){ margin:0 0 24px; }
.dialog-close{ position:absolute; top:14px; right:14px; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:none; color:var(--ink-dim); font-size:20px; line-height:1; cursor:pointer; }
.dialog-close:hover{ border-color:var(--accent); color:var(--accent); }
.dialog-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- MARKDOWN RENDERING (notes pipeline) ---------- */
.blog-post-lede{ font-family:var(--mono); font-size:13.5px; color:var(--ink-dim); max-width:600px; margin-top:16px; }
.b-tags{ margin-top:14px; }
.b-tags .tag{ font-size:10.5px; padding:4px 10px; cursor:default; transform:none; }
.markdown-body{ font-size:16px; line-height:1.85; color:var(--ink); max-width:680px; }
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{
  font-family:var(--serif); font-weight:600; color:var(--ink); margin:1.7em 0 .5em; line-height:1.25;
}
.markdown-body h1{ font-size:26px; }
.markdown-body h2{ font-size:22px; }
.markdown-body h3{ font-size:19px; }
.markdown-body h4,.markdown-body h5,.markdown-body h6{ font-size:16px; }
.markdown-body p{ margin:0 0 18px; color:var(--ink); font-size:16px; line-height:1.85; max-width:none; }
.markdown-body strong{ color:var(--ink); font-weight:600; }
.markdown-body em{ color:var(--patina); }
.markdown-body a{ color:var(--accent); border-bottom:1px solid var(--line); transition:border-color .2s ease; }
.markdown-body a:hover{ border-color:var(--accent); }
.markdown-body code{
  font-family:var(--mono); font-size:.86em;
  background:var(--accent-soft); color:var(--ink);
  padding:2px 6px; border-radius:var(--radius);
}
.markdown-body pre{
  background:var(--panel); border:1px solid var(--line-faint); border-radius:var(--radius);
  padding:16px 18px; overflow-x:auto; margin:0 0 20px;
}
.markdown-body pre code{ background:none; padding:0; font-size:13px; line-height:1.65; }
.markdown-body blockquote{
  margin:0 0 20px; padding:4px 0 4px 18px;
  border-left:2px solid var(--patina); color:var(--ink-dim); font-style:italic;
}
.markdown-body ul,.markdown-body ol{ margin:0 0 20px; padding-left:24px; color:var(--ink-dim); line-height:1.8; }
.markdown-body li{ margin-bottom:6px; }
.markdown-body li::marker{ color:var(--patina); }
.markdown-body img{
  max-width:100%; display:block; margin:22px 0;
  border:1px solid var(--line-faint); border-radius:var(--radius);
}
.markdown-body hr{ border:none; border-top:1px solid var(--line-faint); margin:34px 0; }
.markdown-body table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; }
.markdown-body th,.markdown-body td{ border:1px solid var(--line-faint); padding:9px 12px; text-align:left; }
.markdown-body th{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--patina); background:var(--panel);
}