/* ============================================================
   Kitandwe Arthur — portfolio
   Palette: indigo-black ground, amber = money, teal = signal.
   ============================================================ */

:root{
  --ink:        #0A0C12;
  --ink-2:      #0D1018;
  --surface:    #141824;
  --surface-2:  #1B2030;
  --line:       rgba(255,255,255,.075);
  --line-2:     rgba(255,255,255,.14);

  --text:       #E9EAEF;
  --text-2:     #B9BFCF;
  --muted:      #848CA1;

  --amber:      #E8A33D;
  --amber-dim:  rgba(232,163,61,.14);
  --teal:       #43C6B0;
  --teal-dim:   rgba(67,198,176,.13);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  --shell: 1120px;
  --pad: clamp(20px, 5vw, 48px);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15.5px, .55vw + 14px, 17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

::selection{ background:var(--teal); color:#04120F; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--amber); color:#12100A; padding:10px 16px;
  font-family:var(--mono); font-size:13px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------------- hero ---------------- */

.hero{
  position:relative;
  min-height:min(100svh, 900px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:clamp(80px,14vh,150px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.mesh{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.55;
  pointer-events:none;
}

/* vignette so type stays readable over the mesh */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 15% 45%, rgba(10,12,18,.94) 30%, rgba(10,12,18,.35) 70%, transparent 100%),
    linear-gradient(to bottom, rgba(10,12,18,.7), transparent 30%, rgba(10,12,18,.85));
}

.hero__inner{
  position:relative; z-index:2;
  padding-bottom:clamp(40px,7vh,72px);
}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex; align-items:center; gap:10px;
  margin:0 0 clamp(20px,4vh,34px);
}

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(67,198,176,.6);
  animation:ping 2.6s ease-out infinite;
  flex:none;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(67,198,176,.55); }
  70%{ box-shadow:0 0 0 11px rgba(67,198,176,0); }
  100%{ box-shadow:0 0 0 0 rgba(67,198,176,0); }
}

h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(52px, 12.5vw, 148px);
  line-height:.86;
  letter-spacing:-.035em;
  margin:0 0 clamp(22px,4vh,34px);
}
.h1-accent{
  color:transparent;
  -webkit-text-stroke:1.6px var(--amber);
  text-stroke:1.6px var(--amber);
}

.lede{
  font-size:clamp(17px, 1.15vw + 14px, 22px);
  line-height:1.5;
  color:var(--text-2);
  max-width:56ch;
  margin:0 0 clamp(28px,5vh,40px);
  text-wrap:pretty;
}

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.02em;
  padding:13px 22px;
  border:1px solid var(--line-2);
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,.02);
  transition:border-color .2s, background .2s, transform .2s, color .2s;
}
.btn:hover{ border-color:var(--teal); background:var(--teal-dim); transform:translateY(-1px); }

.btn--primary{
  background:var(--amber);
  border-color:var(--amber);
  color:#14100A;
  font-weight:500;
}
.btn--primary:hover{ background:#F2B052; border-color:#F2B052; color:#14100A; }

/* ---------------- telemetry strip ---------------- */

.telemetry{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  background:rgba(13,16,24,.72);
  backdrop-filter:blur(9px);
}
.telemetry__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  padding-block:0;
}
.tel{
  padding:20px 14px 22px 0;
  display:flex; flex-direction:column; gap:3px;
}
.tel b{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.02em;
  color:var(--amber);
  line-height:1;
}
.tel span{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.03em;
  line-height:1.4;
}

/* ---------------- sections ---------------- */

.section{ padding-block:clamp(72px,11vh,132px); }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }

.kicker{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal);
  margin:0 0 14px;
}

.section__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(34px,5.2vw,62px);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 20px;
}

.section__sub{
  color:var(--text-2);
  max-width:62ch;
  margin:0 0 34px;
  font-size:clamp(16px,.6vw+14px,18.5px);
  text-wrap:pretty;
}

/* ---------------- chips ---------------- */

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(38px,6vh,58px); }

.chip{
  font-family:var(--mono); font-size:12px;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.015);
}
.chip--live{
  color:var(--teal);
  border-color:rgba(67,198,176,.4);
  background:var(--teal-dim);
  display:inline-flex; align-items:center; gap:7px;
}
.pulse{
  width:6px; height:6px; border-radius:50%; background:var(--teal);
  animation:blink 2s ease-in-out infinite; flex:none;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------------- the diagram ---------------- */

.diagram{
  margin:0 0 clamp(46px,7vh,72px);
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(67,198,176,.045), transparent 55%),
    var(--surface);
  overflow:hidden;
}
.diagram__cap{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.diagram__scroll{ overflow-x:auto; padding:12px 10px 6px; }
.diagram__scroll svg{ min-width:760px; width:100%; height:auto; display:block; }

.node__bg{ fill:var(--surface-2); }
.node__ring{ fill:none; stroke:var(--line-2); stroke-width:1.4; }
.node__ring--hot{ stroke:var(--teal); stroke-width:1.8; }
.node__ring--warm{ stroke:var(--amber); stroke-width:1.6; }
/* vector node icons: stroked, palette-bound, never emoji */
.ico{
  fill:none;
  stroke:var(--text-2);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ico--hot{ stroke:var(--teal); }
.ico--warm{ stroke:var(--amber); }
.ico .ico__fill{ fill:currentColor; stroke:none; }
.ico{ color:var(--text-2); }
.ico--hot{ color:var(--teal); }
.ico--warm{ color:var(--amber); }
.node__label{
  font-family:var(--mono); font-size:12.5px; fill:var(--text);
  text-anchor:middle; letter-spacing:.02em;
}
.node__label--warm{ fill:var(--amber); }
.node__meta{
  font-family:var(--mono); font-size:10.5px; fill:var(--muted);
  text-anchor:middle;
}
.edge{
  font-family:var(--mono); font-size:10.5px; fill:var(--muted);
  text-anchor:middle; letter-spacing:.08em; text-transform:uppercase;
}
.edge--teal{ fill:var(--teal); }
.edge--warm{ fill:var(--amber); }

.packet{ fill:var(--teal); }
.packet--warm{ fill:var(--amber); }

/* ---------------- cases ---------------- */

/* two up on wide screens: four cards read as a balanced 2x2,
   and the measure stays comfortable instead of narrow columns */
.cases{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,26px);
}
@media (min-width:860px){
  .cases{ grid-template-columns:repeat(2,1fr); }
}
.case{
  border:1px solid var(--line);
  border-left:2px solid var(--amber);
  border-radius:0 12px 12px 0;
  padding:clamp(22px,2.6vw,30px);
  background:var(--surface);
}
.case h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.2; letter-spacing:-.015em;
  margin:0 0 12px;
}
.case p{ margin:0 0 12px; color:var(--text-2); font-size:15.5px; }
.case b{ color:var(--amber); font-weight:500; }
.case code{
  font-family:var(--mono); font-size:13px;
  background:rgba(255,255,255,.05); padding:1px 6px; border-radius:4px;
  color:var(--teal);
}
.case__tag{
  font-family:var(--mono); font-size:12.5px;
  color:var(--muted); font-style:normal;
  border-top:1px solid var(--line);
  padding-top:12px; margin:16px 0 0 !important;
}

/* ---------------- cards ---------------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,22px);
}
.card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(22px,2.5vw,28px);
  background:var(--surface);
  transition:border-color .22s, transform .22s;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.card header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.card h3{
  font-family:var(--display); font-weight:600;
  font-size:20px; letter-spacing:-.015em; margin:0;
}
.card__year{ font-family:var(--mono); font-size:11.5px; color:var(--muted); flex:none; }
.card p{ margin:0 0 14px; color:var(--text-2); font-size:15px; }
.card__stack{
  font-family:var(--mono); font-size:12px; color:var(--teal);
  margin:0 !important; padding-top:13px; border-top:1px solid var(--line);
}

/* ---------------- layers ---------------- */

.layers{ margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
.layer{
  display:grid;
  grid-template-columns:minmax(200px,.32fr) 1fr;
  gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.6vw,28px) 0;
  border-bottom:1px solid var(--line);
}
.layer dt{
  font-family:var(--display); font-weight:600;
  font-size:clamp(17px,1.3vw,20px); letter-spacing:-.01em;
  color:var(--text);
}
.layer dd{
  margin:0; font-family:var(--mono); font-size:13.5px;
  line-height:1.85; color:var(--text-2);
}

/* ---------------- about ---------------- */

.about{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,52px); }
.about:has(.about__portrait:not([hidden])){ grid-template-columns:260px 1fr; }

.about__portrait img{
  width:100%; border-radius:14px;
  border:1px solid var(--line-2);
  filter:grayscale(1) contrast(1.06);
}

.about__text p{ color:var(--text-2); max-width:62ch; margin:0 0 18px; }

.facts{ margin:30px 0 0; display:grid; gap:0; border-top:1px solid var(--line); }
.facts > div{
  display:grid; grid-template-columns:minmax(110px,.24fr) 1fr;
  gap:16px; padding:13px 0; border-bottom:1px solid var(--line);
}
.facts dt{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); padding-top:2px;
}
.facts dd{ margin:0; font-size:15px; color:var(--text-2); }

/* ---------------- contact ---------------- */

.contact{ text-align:center; }
.contact__title{ font-size:clamp(38px,6.5vw,80px); }
.contact__sub{ margin-inline:auto; }
.contact__links{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---------------- footer ---------------- */

.foot{ border-top:1px solid var(--line); padding-block:28px; }
.foot__inner{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--muted);
}

/* ---------------- reveal ---------------- */

.reveal{
  opacity:0;
  transform:translateY(16px);
  animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards;
  animation-delay:calc(var(--d,0) * 110ms + 120ms);
}
@keyframes rise{ to{ opacity:1; transform:none; } }

.inview{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.inview.is-on{ opacity:1; transform:none; }

/* ---------------- responsive ---------------- */

@media (max-width:900px){
  .telemetry__grid{ grid-template-columns:repeat(3,1fr); }
  .about:has(.about__portrait:not([hidden])){ grid-template-columns:1fr; }
  .about__portrait{ max-width:220px; }
  .layer{ grid-template-columns:1fr; gap:8px; }
}
@media (max-width:560px){
  .telemetry__grid{ grid-template-columns:repeat(2,1fr); }
  .tel{ padding:16px 10px 18px 0; }
  .facts > div{ grid-template-columns:1fr; gap:2px; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .inview{ opacity:1; transform:none; }
  .mesh{ display:none; }
}