/* ============================================================
   Afifa Ali — Portfolio
   Design concept: the page reads like a single evaluation trace —
   a log rail runs down the page connecting each section, dates and
   scores set in tabular mono, tech stacks tagged like trace labels.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root{
  --bg: #EFEEE2;
  --surface: #FBFAF3;
  --surface-2: #E6E4D6;
  --ink: #1A2019;
  --ink-soft: #333B32;
  --muted: #5B6459;
  --border: rgba(26,32,25,0.14);
  --accent: #B5741C;
  --accent-ink: #FBFAF3;
  --accent-2: #256F68;
  --accent-2-soft: rgba(37,111,104,0.13);
  --accent-soft: rgba(181,116,28,0.14);
  --shadow: 0 1px 2px rgba(20,24,18,0.04), 0 12px 32px -16px rgba(20,24,18,0.22);

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-h1: clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-mono: 0.78rem;

  --radius: 14px;
  --radius-sm: 8px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-pad: clamp(3.5rem, 8vw, 6.5rem);
  --rail-x: 2.75rem;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #10140F;
    --surface: #171C15;
    --surface-2: #1E251B;
    --ink: #EEEBDD;
    --ink-soft: #D6D2C1;
    --muted: #93A08D;
    --border: rgba(238,235,221,0.13);
    --accent: #E8A33D;
    --accent-ink: #171C15;
    --accent-2: #59C2B4;
    --accent-2-soft: rgba(89,194,180,0.14);
    --accent-soft: rgba(232,163,61,0.16);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 44px -20px rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"]{
  --bg: #10140F;
  --surface: #171C15;
  --surface-2: #1E251B;
  --ink: #EEEBDD;
  --ink-soft: #D6D2C1;
  --muted: #93A08D;
  --border: rgba(238,235,221,0.13);
  --accent: #E8A33D;
  --accent-ink: #171C15;
  --accent-2: #59C2B4;
  --accent-2-soft: rgba(89,194,180,0.14);
  --accent-soft: rgba(232,163,61,0.16);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 44px -20px rgba(0,0,0,0.55);
}

/* ---------- reset ---------- */
*,*::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(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p{ margin: 0; }
a{ color: inherit; }
img{ max-width: 100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* eyebrow / mono label */
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.eyebrow::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
}

.tabular{ font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 0.9rem;
}
.brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display:flex; align-items:center; gap:0.55rem;
}
.brand-mark{
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display:grid; place-items:center;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem;
}
.nav-links{
  display:flex; align-items:center; gap: clamp(1rem, 2vw, 1.9rem);
}
.nav-links a{
  text-decoration:none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.is-active{
  color: var(--ink);
  border-color: var(--accent);
}
.theme-toggle{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  width: 34px; height: 34px;
  border-radius: 50%;
  display:grid; place-items:center;
  cursor:pointer;
  flex: none;
}
.theme-toggle:hover{ border-color: var(--accent); }
.theme-toggle svg{ width:16px; height:16px; }
.icon-sun{ display:none; }
:root[data-theme="dark"] .icon-moon,
:root:not([data-theme="light"]) .icon-moon{ display:none; }
:root[data-theme="dark"] .icon-sun,
:root:not([data-theme="light"]) .icon-sun{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .icon-moon{ display:block; }
  :root:not([data-theme="dark"]) .icon-sun{ display:none; }
}
.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--surface);
  width:34px; height:34px; border-radius:8px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1.5px; background:var(--ink);
  position:relative; transition: transform .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-5px; }
.nav-toggle span::after{ position:absolute; top:5px; }
.nav-right{ display:flex; align-items:center; gap:0.9rem; }

/* ---------- trace rail (desktop) ---------- */
.trace-rail{
  position: fixed;
  left: calc(var(--rail-x) - 1px);
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border) 6%, var(--border) 94%, transparent);
  z-index: 1;
}
@media (max-width: 980px){ .trace-rail{ display:none; } }

/* ---------- section shell ---------- */
.section{
  position: relative;
  padding-block: var(--section-pad);
  border-bottom: 1px solid var(--border);
}
.section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex; flex-direction:column; gap:0.9rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  max-width: 46rem;
}
.section-head h2{ font-size: var(--fs-h2); }
.section-lede{ color: var(--muted); font-size: 1.05rem; max-width: 42ch; }

.node{
  position:absolute;
  left: calc(var(--rail-x) - 5px);
  top: calc(var(--section-pad) + 0.35rem);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-2);
}
@media (max-width: 980px){ .node{ display:none; } }

.section > .wrap{ padding-left: max(var(--gutter), calc(var(--rail-x) + 2.4rem)); }
@media (max-width: 980px){ .section > .wrap{ padding-left: var(--gutter); } }

/* ---------- reveal (progressive enhancement: visible by default, JS opts in to animating) ---------- */
html.js-anim .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
html.js-anim .reveal.is-visible{ opacity: 1; transform: none; }

/* ============ HERO ============ */
.hero{
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--border);
}
.hero > .wrap{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
@media (max-width: 900px){ .hero > .wrap{ grid-template-columns: 1fr; } }

.hero-name{
  font-size: var(--fs-h1);
  line-height: 1.02;
  margin-top: 0.9rem;
}
.hero-role{
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 1rem;
  margin-top: 1.1rem;
  max-width: 34rem;
}
.hero-role strong{ color: var(--ink-soft); font-weight: 600; }

.hero-actions{
  display:flex; flex-wrap:wrap; gap: 0.8rem;
  margin-top: 2rem;
}
.btn{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
:root[data-theme="dark"] .btn-primary, :root:not([data-theme="light"]) .btn-primary{
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ border-color: var(--accent-2); }

.eval-chip{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
  transform: rotate(-1.4deg);
  width: fit-content;
  margin-left: auto;
}
.eval-chip .row{ display:flex; justify-content:space-between; gap:1.5rem; padding-block:0.15rem; }
.eval-chip .k{ color: var(--muted); }
.eval-chip .v{ color: var(--accent-2); font-weight:600; }
.eval-chip .v.warn{ color: var(--accent); }
.eval-chip .hd{
  color: var(--muted); text-transform:uppercase; letter-spacing:0.1em; font-size:0.62rem;
  border-bottom: 1px dashed var(--border); padding-bottom:0.45rem; margin-bottom:0.4rem;
}

.hero-stats{
  display:flex; gap: clamp(1.4rem, 4vw, 2.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  flex-wrap: wrap;
}
.stat b{
  display:block; font-family: var(--font-display); font-size: 1.7rem; font-weight:700;
}
.stat span{
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ============ ABOUT ============ */
.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem);
}
@media (max-width: 800px){ .about-grid{ grid-template-columns: 1fr; } }
.about-grid p + p{ margin-top: 1rem; }
.about-grid .lede{ font-size: 1.18rem; color: var(--ink-soft); }
.pillar-list{ display:flex; flex-direction:column; gap:1.1rem; }
.pillar{
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; background: var(--surface);
}
.pillar h4{ font-size: 0.95rem; display:flex; align-items:center; gap:0.55rem; }
.pillar h4 .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.pillar p{ color: var(--muted); font-size: 0.92rem; margin-top: 0.4rem; }

/* ============ EXPERIENCE ============ */
.timeline{ display:flex; flex-direction:column; }
.tl-item{
  display:grid; grid-template-columns: 9rem 1fr; gap: 1.6rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--border);
}
.tl-item:first-child{ border-top:1px solid var(--border); }
@media (max-width: 700px){ .tl-item{ grid-template-columns: 1fr; gap:0.4rem; } }
.tl-date{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); padding-top:0.2rem; }
.tl-body h3{ font-size: var(--fs-h3); }
.tl-org{
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-2);
  margin-top:0.3rem; display:block;
}
.tl-body ul{ margin-top: 0.7rem; display:flex; flex-direction:column; gap:0.4rem; }
.tl-body li{
  color: var(--ink-soft); font-size: 0.96rem; padding-left: 1.1rem; position:relative;
}
.tl-body li::before{
  content: "—"; position:absolute; left:0; color: var(--muted);
}

/* ============ PROJECTS ============ */
.project-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display:flex; flex-direction:column;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color: var(--accent-2); transform: translateY(-2px); }
.card-media{
  aspect-ratio: 16/10;
  background: var(--surface-2);
  position: relative;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.card-media img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.card-media.tint{ align-items:center; justify-content:center; }
.card-glyph{
  font-family: var(--font-display); font-weight:700; font-size:2.6rem;
  color: var(--accent-ink); opacity:0.92;
}
.card-cat{
  position:absolute; top:0.7rem; left:0.7rem;
  font-family: var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.55rem; border-radius: 999px; border:1px solid var(--border);
}
.card-body{ padding: 1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.card-body h3{ font-size: 1.08rem; }
.card-body .native-name{ font-family: var(--font-mono); font-size:0.72rem; color:var(--muted); }
.card-body p{ color: var(--muted); font-size: 0.9rem; }
.tag-row{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:auto; padding-top:0.5rem; }
.tag{
  font-family: var(--font-mono); font-size: 0.66rem; text-transform:uppercase; letter-spacing:0.04em;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.28rem 0.6rem;
  color: var(--ink-soft);
}

/* ============ EVAL / AI SPECIALTY ============ */
.eval-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
}
.eval-cell{ background: var(--surface); padding: 1.4rem 1.5rem; }
.eval-cell .tag-label{
  font-family: var(--font-mono); font-size:0.66rem; color: var(--accent-2);
  text-transform:uppercase; letter-spacing:0.1em;
}
.eval-cell h4{ font-size:1rem; margin-top:0.5rem; }
.eval-cell p{ color: var(--muted); font-size:0.88rem; margin-top:0.45rem; }

/* ============ WRITING ============ */
.post-list{ display:flex; flex-direction:column; }
.post{
  display:grid; grid-template-columns: 6.5rem 1fr auto;
  gap: 1.4rem; align-items:baseline;
  padding-block: 1.15rem;
  border-top: 1px solid var(--border);
  text-decoration:none;
  transition: background .15s ease;
}
.post:first-child{ border-top: 1px solid var(--border); }
.post:hover{ background: var(--surface); }
.post:hover .post-title{ color: var(--accent-2); }
@media (max-width: 640px){ .post{ grid-template-columns: 1fr; gap:0.3rem; } }
.post-date{ font-family: var(--font-mono); font-size:0.76rem; color: var(--muted); }
.post-title{ font-weight:600; font-size:1rem; transition: color .15s ease; }
.post-pub{ font-family: var(--font-mono); font-size:0.7rem; color: var(--muted); white-space:nowrap; }
@media (max-width: 640px){ .post-pub{ display:none; } }

/* ============ OPEN SOURCE ============ */
.repo-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 0.7rem;
}
.repo{
  display:block; text-decoration:none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.9rem 1rem; background: var(--surface);
  transition: border-color .15s ease;
}
.repo:hover{ border-color: var(--accent); }
.repo b{ font-size:0.92rem; }
.repo p{ margin-top:0.3rem; color:var(--muted); font-size:0.8rem; }

/* ============ SKILLS ============ */
.skill-groups{ display:flex; flex-direction:column; gap: 1.6rem; }
.skill-group h4{
  font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.1em; color: var(--muted); margin-bottom:0.7rem;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:0.55rem; }
.chip{
  font-size:0.86rem; padding:0.45rem 0.85rem; border-radius:999px;
  background: var(--accent-2-soft); color: var(--ink-soft);
  border: 1px solid transparent;
}
.chip.alt{ background: var(--accent-soft); }

/* ============ EDUCATION ============ */
.edu-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 800px){ .edu-grid{ grid-template-columns:1fr; } }
.edu-item + .edu-item{ margin-top:1.4rem; }
.edu-item .tl-date{ display:block; margin-bottom:0.2rem; }
.lang-row{ display:flex; gap:1.6rem; margin-top:0.6rem; flex-wrap:wrap; }
.lang-row div b{ display:block; font-size:0.95rem; }
.lang-row div span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--muted); }

/* ============ CONTACT / FOOTER ============ */
.contact-section{ border-bottom:none; }
.contact-inner{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;
}
.contact-links{ display:flex; flex-direction:column; gap:0.9rem; }
.contact-links a{
  font-family: var(--font-display); font-weight:600; font-size:1.4rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:0.6rem;
}
.contact-links a .arrow{ color: var(--accent-2); transition: transform .15s ease; }
.contact-links a:hover .arrow{ transform: translateX(4px); }
.contact-note{ color: var(--muted); max-width: 26rem; font-size:0.95rem; }

footer{
  padding-block: 1.6rem;
  border-top: 1px solid var(--border);
}
footer .wrap{
  padding-left: var(--gutter) !important;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.foot-note{ font-family: var(--font-mono); font-size:0.72rem; color: var(--muted); }

/* ---------- mobile nav ---------- */
@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; inset: 60px 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items:flex-start;
    padding: 1rem var(--gutter) 1.5rem;
    gap: 1rem;
    transform: translateY(-8px);
    opacity: 0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-links.is-open{ opacity:1; pointer-events:auto; transform:none; }
}