/* ============================================================
   Sami Fekadu — personal site
   Palette derives from dual-energy inspection imagery:
   organic material reads amber, inorganic reads cyan,
   dense material reads near-black.
   ============================================================ */

:root{
  --void:      #05070E;
  --deep:      #080C17;
  --panel:     #0C1322;
  --panel-2:   #101A2C;
  --line:      rgba(126,158,200,.14);
  --line-2:    rgba(126,158,200,.28);

  --organic:   #F0873A;   /* dual-energy: organic */
  --inorganic: #2FD4E4;   /* dual-energy: inorganic */

  --ink:       #E9F0FA;
  --steel:     #9DB0CC;
  --steel-dim: #61738F;

  --display: "Saira", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1240px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--steel);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(.95rem,.55vw + .82rem,1.05rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }

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

/* ── ambient field ─────────────────────────────────────────── */
.field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58vw 44vw at 78% -6%, rgba(47,212,228,.09), transparent 62%),
    radial-gradient(48vw 40vw at 6% 26%, rgba(240,135,58,.07), transparent 64%),
    repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px);
  -webkit-mask-image:radial-gradient(120vw 110vh at 50% 12%, #000 8%, transparent 78%);
          mask-image:radial-gradient(120vw 110vh at 50% 12%, #000 8%, transparent 78%);
}

/* ── top bar ───────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--gut);
  border-bottom:1px solid var(--line);
  background:rgba(5,7,14,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mark{
  display:flex; align-items:baseline; gap:.6rem;
  text-decoration:none; margin-right:auto;
}
.mark-glyph{
  font-family:var(--display); font-weight:900; letter-spacing:.14em;
  font-size:.9rem; color:var(--void);
  background:linear-gradient(120deg,var(--organic),var(--inorganic));
  padding:.24rem .42rem .2rem; border-radius:2px;
}
.mark-text{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
}
.topnav{ display:flex; gap:1.6rem; }
.topnav a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--steel-dim);
  transition:color .25s ease;
}
.topnav a:hover{ color:var(--ink); }
.status{
  margin:0; display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel-dim); white-space:nowrap;
}
.pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--inorganic); box-shadow:0 0 0 0 rgba(47,212,228,.55);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(47,212,228,.5); }
  70%{ box-shadow:0 0 0 9px rgba(47,212,228,0); }
  100%{ box-shadow:0 0 0 0 rgba(47,212,228,0); }
}

/* ── shared layout ─────────────────────────────────────────── */
main{ position:relative; z-index:1; }

.band{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(4.5rem,9vw,8.5rem) var(--gut);
  border-top:1px solid var(--line);
}
.band-last{ border-bottom:1px solid var(--line); }

.label{
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--organic);
}
.label::before{ content:"▚ "; opacity:.55; }

.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.85rem,3.4vw,3rem);
  line-height:1.06; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 1rem;
}
.h2-dim{ color:var(--steel-dim); font-weight:300; }

.h3{
  font-family:var(--display); font-weight:500;
  font-size:1.12rem; line-height:1.3; letter-spacing:.005em;
  color:var(--ink); margin:0 0 .6rem;
}

.band-head{ max-width:62ch; }
.band-note{ margin:0; }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(7.5rem,15vh,11rem) var(--gut) clamp(3rem,6vw,5rem);
}
.eyebrow{
  margin:0 0 clamp(1.4rem,3vw,2.4rem);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--steel-dim);
}
.slash{ color:var(--organic); padding:0 .35em; }

.scanner{ position:relative; display:block; overflow:hidden; padding:.1em 0; }

.name{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(3.4rem,14.5vw,11.5rem);
  line-height:.86;
  letter-spacing:-.035em;
  color:var(--ink);
  text-transform:uppercase;
}
.name-line{ display:block; }
.name-line:last-child{
  background:linear-gradient(96deg,var(--ink) 0%,var(--ink) 42%,var(--steel-dim) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* the scan pass: a beam and a matching false-colour reveal */
.beam{
  position:absolute; left:-10%; right:-10%; top:0;
  height:26%;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(47,212,228,.05) 34%,
      rgba(240,135,58,.20) 49%,
      rgba(47,212,228,.05) 64%,
      transparent 100%);
  border-top:1px solid rgba(240,135,58,.55);
  border-bottom:1px solid rgba(47,212,228,.35);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:sweep 9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sweep{
  0%,58%   { transform:translateY(-120%); opacity:0; }
  62%      { opacity:1; }
  96%      { transform:translateY(420%); opacity:1; }
  100%     { transform:translateY(430%); opacity:0; }
}

.lede{
  max-width:56ch;
  margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;
  font-size:clamp(1.02rem,1vw + .82rem,1.3rem);
  line-height:1.52;
  color:var(--steel);
}

.cta-row{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin:clamp(1.9rem,3.5vw,2.6rem) 0 0;
}
.cta{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.82rem 1.4rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  border:1px solid var(--line-2);
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
.cta-primary{
  color:var(--void);
  background:linear-gradient(115deg,var(--organic),#F5A85E 55%,var(--inorganic));
  border-color:transparent;
  font-weight:500;
}
.cta-primary:hover{ transform:translateY(-2px); }
.cta-meta{ font-size:.66rem; opacity:.62; letter-spacing:.1em; }
.cta-ghost{ color:var(--steel); }
.cta-ghost:hover{ color:var(--ink); border-color:var(--inorganic); }

/* instrument readout */
.readout{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin:clamp(3rem,6vw,4.5rem) 0 0;
  background:var(--line);
  border:1px solid var(--line);
}
.readout-cell{ background:var(--deep); padding:1.15rem 1.25rem 1.05rem; }
.readout dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel-dim); margin:0 0 .45rem;
}
.readout dd{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.readout-text{
  font-weight:500;
  font-size:clamp(1.05rem,1.9vw,1.5rem) !important;
  letter-spacing:-.005em;
  padding-top:.28em;
}

/* ── lanes figure ──────────────────────────────────────────── */
.lanes{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
  margin-top:clamp(3rem,6vw,4.5rem);
}
.lanes-copy p{ margin:0 0 .9rem; }
.lanes-caption{
  font-family:var(--mono); font-size:.72rem; line-height:1.7;
  letter-spacing:.04em; color:var(--steel-dim);
  border-left:2px solid var(--organic); padding-left:.85rem;
}
.lanes-figure{ margin:0; }
.lanes-figure canvas{
  display:block; width:100%; height:auto;
  background:linear-gradient(180deg,var(--panel),var(--deep));
  border:1px solid var(--line-2);
}
.lanes-figure figcaption{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  margin-top:.8rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel-dim);
}
.fig-item{ display:inline-flex; align-items:center; gap:.45rem; }
.swatch{ width:9px; height:9px; display:inline-block; }
.swatch-a{ background:var(--organic); }
.swatch-b{ background:var(--inorganic); }
.fig-live{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ── cards ─────────────────────────────────────────────────── */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.card{
  background:var(--deep); padding:1.7rem 1.5rem 1.8rem;
  transition:background .3s ease;
}
.card:hover{ background:var(--panel); }
.card p:last-child{ margin-bottom:0; }
.card-tag{
  margin:0 0 1.5rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--inorganic);
}

/* ── stack ─────────────────────────────────────────────────── */
.stack-grid{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.stack-row{
  display:grid; grid-template-columns:minmax(120px,180px) 1fr;
  gap:1.5rem; align-items:baseline;
  padding:1.15rem 0;
  border-top:1px solid var(--line);
}
.stack-row:last-child{ border-bottom:1px solid var(--line); }
.stack-key{
  margin:0;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel-dim);
}
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:0; padding:0; }
.chips li{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.02em;
  color:var(--ink);
  padding:.28rem .62rem;
  border:1px solid var(--line-2);
  background:rgba(16,26,44,.55);
}

.creds{
  display:flex; flex-wrap:wrap; gap:1.75rem;
  list-style:none; margin:clamp(2.25rem,4vw,3rem) 0 0; padding:0;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  color:var(--steel);
}
.creds li{ display:flex; align-items:center; gap:.6rem; }
.cred-mark{
  font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.1em; color:var(--organic);
  border:1px solid rgba(240,135,58,.4); padding:.18rem .4rem;
}

/* ── timeline ──────────────────────────────────────────────── */
.timeline{ list-style:none; margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0; }
.tl-item{
  display:grid; grid-template-columns:minmax(90px,140px) 1fr;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px solid var(--line);
  position:relative;
}
.tl-item:last-child{ border-bottom:1px solid var(--line); }
.tl-item::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:linear-gradient(90deg,var(--organic),var(--inorganic));
  transition:width .55s cubic-bezier(.2,.7,.3,1);
}
.tl-item:hover::before{ width:100%; }
.tl-year{
  margin:0;
  font-family:var(--mono); font-size:.9rem; letter-spacing:.1em;
  color:var(--steel-dim); font-variant-numeric:tabular-nums;
}
.tl-now{
  display:inline-block; margin-left:.5rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--void); background:var(--inorganic);
  padding:.1rem .34rem; vertical-align:middle;
}
.tl-body p{ margin:0; max-width:64ch; }
.tl-role{
  font-family:var(--display); font-weight:500; font-size:1.08rem;
  color:var(--ink); margin:0 0 .4rem;
}
.tl-org{
  display:block;
  font-family:var(--mono); font-weight:400; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--organic);
  margin-top:.28rem;
}

/* ── equinox ───────────────────────────────────────────────── */
.equinox-panel{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  padding:clamp(1.75rem,4vw,3rem);
  border:1px solid var(--line-2);
  background:linear-gradient(140deg,var(--panel-2),var(--deep) 65%);
}
.equinox-copy p{ margin:0 0 1.5rem; max-width:52ch; }
.equinox-facts{ list-style:none; margin:0; padding:0; align-self:center; }
.equinox-facts li{
  display:grid; grid-template-columns:minmax(80px,110px) 1fr; gap:1rem;
  padding:.75rem 0; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.76rem; color:var(--ink);
}
.equinox-facts li:last-child{ border-bottom:1px solid var(--line); }
.equinox-facts span{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel-dim);
}

/* ── contact ───────────────────────────────────────────────── */
.contact-wrap{ max-width:70ch; }
.contact-h2{ font-size:clamp(2.1rem,5.2vw,4rem); letter-spacing:-.025em; }
.contact-lede{ max-width:50ch; margin:0 0 clamp(2rem,4vw,2.75rem); }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{
  display:grid; grid-template-columns:minmax(90px,130px) 1fr;
  gap:1rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--line);
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-key{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel-dim);
}
.contact-list a{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(90deg,var(--organic),var(--inorganic));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .4s cubic-bezier(.2,.7,.3,1);
  padding-bottom:.15rem;
}
.contact-list a:hover{ background-size:100% 1px; }
.contact-note{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  color:var(--steel-dim);
}

/* ── footer ────────────────────────────────────────────────── */
.footer{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:2rem var(--gut) 3rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel-dim);
}
.footer p{ margin:0; }
.footer-sig{ color:rgba(97,115,143,.6); }

/* ── reveal ────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:940px){
  .lanes{ grid-template-columns:1fr; }
  .equinox-panel{ grid-template-columns:1fr; }
  .readout{ grid-template-columns:repeat(2,1fr); }
  .topnav{ display:none; }
}
@media (max-width:620px){
  .stack-row{ grid-template-columns:1fr; gap:.75rem; }
  .tl-item{ grid-template-columns:1fr; gap:.5rem; }
  .contact-list li{ grid-template-columns:1fr; gap:.3rem; }
  .equinox-facts li{ grid-template-columns:1fr; gap:.2rem; }
  .status{ display:none; }
  .cta{ width:100%; justify-content:center; }
}

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .beam{ animation:none; opacity:0; }
  .pulse{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .cta-primary:hover{ transform:none; }
  *{ transition-duration:.01ms !important; }
}