/* Ahmad Bilal — AI-Native Product Designer
   Swiss / mono / instrument aesthetic — MONOCHROME (grayscale shades only). */

:root {
  --canvas: #e7e7e7;     /* neutral light gray page */
  --well:   #fbfbfb;     /* framed content well */
  --ink:    #111111;     /* near-black text + "marker" */
  --ink-2:  #2c2c2c;
  --muted:  #5f5f5f;
  --faint:  #9a9a9a;     /* crosshairs, ticks, hairlines text */
  --line:   #cfcfcf;
  --line-2: #e0e0e0;
  --knock:  var(--well); /* knockout text on the black marker */
  --maxw:   1280px;
  --pad:    clamp(1.1rem, 4vw, 3.25rem);
  --grid:   54px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--canvas);
  /* faint engineering grid */
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--knock); }

.skip {
  position: fixed; left: -999px; top: 0; z-index: 60;
  background: var(--ink); color: var(--knock); padding: 10px 16px;
  font-weight: 700; letter-spacing: 0.06em;
}
.skip:focus { left: 0; }

mark {
  background: var(--ink);
  color: var(--knock);
  padding: 0 0.18em;
  position: relative;
}

/* registration ticks at page corners */
.tick {
  position: fixed; z-index: 40; color: var(--faint);
  font-family: "JetBrains Mono", monospace; font-size: 18px; line-height: 1;
  user-select: none; pointer-events: none;
}
.tick.tl { top: 14px; left: 14px; }
.tick.tr { top: 14px; right: 14px; }
.tick.bl { bottom: 14px; left: 14px; }
.tick.br { bottom: 14px; right: 14px; }

.nm {
  font-family: "JetBrains Mono", monospace;
  color: var(--faint);
  letter-spacing: 0.04em;
}

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem var(--pad);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: "Archivo", sans-serif; font-weight: 800;
  letter-spacing: 0.02em; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.brand-mk { color: var(--faint); font-family: "JetBrains Mono", monospace; }
.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); font-size: 0.82rem; }
.nav-links a { color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links .nm { font-size: 0.7rem; margin-right: 2px; }
.nav-cta {
  border: 1px solid var(--ink); color: var(--ink) !important;
  padding: 6px 12px; font-weight: 700; letter-spacing: 0.03em;
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--ink); color: var(--knock) !important; }
@media (max-width: 620px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- WELL ---------- */
.well {
  max-width: var(--maxw);
  margin: clamp(1rem, 3vw, 2.25rem) auto;
  background: var(--well);
  border: 1px solid var(--line);
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--pad) clamp(2rem, 5vw, 4rem);
}
/* crosshair markers at the well's corners */
.well::before, .well::after {
  content: "+ +"; position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-between;
  color: var(--faint); font-size: 16px; padding: 0 6px; pointer-events: none;
}
.well::before { top: -9px; }
.well::after { bottom: -9px; }

.rule { height: 1px; background: var(--line); margin: clamp(2rem, 5vw, 3.5rem) 0; }

/* ---------- HERO ---------- */
.eyebrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.pill {
  font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted);
  border: 1px solid var(--line); padding: 4px 9px;
}
.pill-strong { background: var(--ink); color: var(--knock); border-color: var(--ink); font-weight: 700; }
.pill.ghost { border-style: dashed; color: var(--faint); }

.display {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 8.4vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.4rem, 4vw, 2.6rem);
  position: relative;
}
.display .ix {
  position: absolute; left: -0.2rem; top: -1.6rem;
  font-family: "JetBrains Mono", monospace; font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.1em; color: var(--faint);
}
@media (min-width: 900px) { .display .ix { left: -3.2rem; top: 0.4rem; } }

.caret {
  display: inline-block; width: 0.5ch; height: 0.82em;
  background: var(--knock); margin-left: 0.08em; transform: translateY(0.08em);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } }

.lede { font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.lede strong { color: var(--ink); font-weight: 700; }

.readout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); margin: 0; }
.readout > div { padding: 0.7rem 0.85rem; border: 1px solid var(--line-2); }
.readout dt { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--faint); }
.readout dd { margin: 2px 0 0; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.btn {
  font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 0.85rem 1.2rem; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; gap: 0.6rem; transition: all 0.2s;
}
.btn-solid { background: var(--ink); color: var(--knock); }
.btn-solid:hover { background: var(--well); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--knock); }
.btn-n { font-size: 0.62rem; color: currentColor; opacity: 0.6; letter-spacing: 0.1em; }

/* ---------- PILLARS ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }
.pillars article { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.pillars h3 { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; margin: 0.4rem 0 0.5rem; }
.pillars p { font-size: 0.9rem; color: var(--muted); margin: 0; }
.pillars strong { color: var(--ink); }

/* ---------- SECTION HEADS ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--line); padding-bottom: 0.7rem; }
.sec-head h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.01em; margin: 0; }
.sec-head .nm { font-size: 0.72rem; }

/* ---------- WORK / CASES ---------- */
.case {
  display: grid; grid-template-columns: 130px 1fr 220px; gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: start; padding: clamp(1.3rem, 3vw, 2rem) 0; border-top: 1px solid var(--line);
  transition: background 0.25s;
}
.case:first-of-type { border-top: none; }
.case:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.case-id { display: flex; flex-direction: column; gap: 0.5rem; }
.case-id .nm { font-size: 1rem; color: var(--ink); font-weight: 700; }
.case-tag { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--faint); }
.case-body h3 { font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(1.15rem, 2.3vw, 1.6rem); letter-spacing: -0.01em; margin: 0 0 0.6rem; }
.case-body p { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.9rem; max-width: 62ch; }
.metrics-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; padding: 0; margin: 0; }
.metrics-inline li { font-size: 0.78rem; color: var(--muted); border-left: 2px solid var(--ink); padding-left: 0.5rem; }
.metrics-inline b { font-family: "Archivo", sans-serif; font-size: 0.95rem; color: var(--ink); }

.case-viz { position: relative; border: 1px solid var(--line); background: var(--canvas); color: var(--ink-2); aspect-ratio: 200/120; }
.case-viz svg { width: 100%; height: 100%; display: block; }
.case-viz .vz { font-family: "JetBrains Mono", monospace; font-size: 8px; fill: var(--faint); letter-spacing: 0.1em; }
.open {
  position: absolute; right: 8px; top: 8px; font-size: 0.62rem; letter-spacing: 0.1em;
  background: var(--ink); color: var(--knock); padding: 3px 7px; opacity: 0; transform: translateY(-3px);
  transition: opacity 0.25s, transform 0.25s;
}
.case:hover .open { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; gap: 0.8rem; }
  .case-id { flex-direction: row; align-items: center; gap: 0.8rem; }
  .case-viz { max-width: 280px; }
}

.more { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.more > .nm { font-size: 0.72rem; }
.more-list { list-style: none; padding: 0; margin: 0.7rem 0 0; border-top: 1px solid var(--line); }
.more-list a {
  display: grid; grid-template-columns: 1fr auto 1.4rem; align-items: baseline; gap: 1rem;
  padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--line-2); transition: background 0.2s, padding 0.2s;
}
.more-list a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); padding-left: 0.7rem; }
.ml-t { font-weight: 500; font-size: 0.88rem; }
.ml-m { font-size: 0.74rem; color: var(--faint); letter-spacing: 0.02em; }
.ml-x { color: var(--faint); text-align: right; }
@media (max-width: 620px) { .more-list a { grid-template-columns: 1fr 1.2rem; } .ml-m { grid-column: 1 / -1; } }

/* ---------- METRICS ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 760px) { .metrics { grid-template-columns: 1fr 1fr; } }
.metric { background: var(--well); padding: clamp(1.2rem, 3vw, 2rem) 1rem; }
.big { display: block; font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cap { display: block; margin-top: 0.6rem; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; }

/* ---------- ABOUT ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }
.statement { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.about-body p { font-size: 0.98rem; color: var(--ink-2); margin: 0 0 1rem; }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(1.6rem, 4vw, 2.6rem); }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr 1fr; } }
.principles > div { background: var(--well); padding: 1.2rem 1rem; }
.principles .nm { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.principles h4 { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.03em; margin: 0.5rem 0 0.4rem; }
.principles p { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* ---------- PROOF ---------- */
.logos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; padding: 0; margin: 0 0 clamp(1.6rem,4vw,2.4rem); }
.logos li {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(0.95rem, 2vw, 1.25rem);
  letter-spacing: -0.01em; color: var(--ink); border: 1px solid var(--line);
  padding: 0.5rem 0.9rem; background: var(--canvas);
}
.quote { margin: 0; border-left: 3px solid var(--ink); padding: 0.4rem 0 0.4rem 1.2rem; }
.quote blockquote { font-family: "Archivo", sans-serif; font-weight: 600; font-size: clamp(1.1rem, 2.5vw, 1.7rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.quote figcaption { margin-top: 0.7rem; font-size: 0.74rem; color: var(--faint); letter-spacing: 0.04em; }
.proof-note { font-size: 0.68rem; margin-top: 1.1rem; }

/* ---------- TESTIMONIALS ---------- */
.tt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0.9rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.tt-head .nm { font-size: 0.72rem; }
.tt-flag { color: var(--faint); border: 1px dashed var(--line); padding: 3px 8px; letter-spacing: 0.06em; }
.tlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 820px) { .tlist { grid-template-columns: 1fr; } }
.tcard { background: var(--well); margin: 0; padding: 1.4rem 1.3rem 1.2rem; display: flex; flex-direction: column; position: relative; }
.tq { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 2.4rem; line-height: 0.6; color: var(--ink); height: 1.1rem; }
.tcard blockquote { margin: 0.4rem 0 1.1rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); flex: 1; }
.tcard figcaption { border-top: 1px solid var(--line-2); padding-top: 0.7rem; display: flex; flex-direction: column; gap: 2px; }
.tn { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em; color: var(--ink); }
.tr { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }

/* ---------- END / FOOTER ---------- */
.end { text-align: left; }
.end-display { font-size: clamp(2rem, 6.5vw, 5rem); margin-bottom: clamp(1.4rem,4vw,2.2rem); }

.foot { max-width: var(--maxw); margin: clamp(1rem,3vw,2rem) auto clamp(2rem,5vw,3.5rem); padding: 0 var(--pad); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; }
.foot-row + .foot-row { border-top: 1px solid var(--line); }
.foot-brand { font-family: "Archivo", sans-serif; font-weight: 900; letter-spacing: 0.04em; }
.foot-links { display: flex; gap: 1.2rem; font-size: 0.74rem; letter-spacing: 0.06em; }
.foot-links a { color: var(--muted); } .foot-links a:hover { color: var(--ink); }
.foot-meta { font-size: 0.68rem; color: var(--faint); letter-spacing: 0.08em; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 4px; vertical-align: middle; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .caret { animation: none; opacity: 1; }
  .dot { animation: none; }
}

/* ---------- PURPOSE PAGE ---------- */
.purpose-lede { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; margin: 0 0 clamp(1.5rem,4vw,2.5rem); }
.purpose-lede mark { background: var(--ink); color: var(--knock); padding: 0 0.12em; }
.purpose-body { font-size: clamp(1rem,1.7vw,1.18rem); line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.prin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: clamp(1.6rem,4vw,2.4rem) 0; }
@media (max-width: 720px) { .prin { grid-template-columns: 1fr; } }
.prin > article { background: var(--well); padding: clamp(1.3rem,3vw,1.9rem); }
.prin .nm { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.prin h3 { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem,2.4vw,1.5rem); letter-spacing: 0.01em; margin: 0.5rem 0 0.6rem; }
.prin p { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin: 0; }
.prin p strong { color: var(--ink); }

/* ---------- WRITING / BLOG ---------- */
.posts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.posts > li { border-bottom: 1px solid var(--line-2); }
.posts a { display: grid; grid-template-columns: 140px 1fr; gap: clamp(0.8rem, 2.5vw, 2rem); align-items: start; padding: clamp(1.2rem,3vw,1.8rem) 0.25rem; transition: background 0.2s, padding 0.2s; }
.posts a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); padding-left: 0.6rem; }
.post-meta { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--faint); display: flex; flex-direction: column; gap: 0.35rem; }
.post-cluster { color: var(--ink); border: 1px solid var(--line); padding: 3px 7px; width: fit-content; }
.post-cluster.draft { border-style: dashed; color: var(--faint); }
.post-h { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(1.15rem,2.6vw,1.7rem); letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 0.5rem; color: var(--ink); }
.post-dek { font-size: 0.92rem; line-height: 1.55; color: var(--muted); margin: 0; max-width: 64ch; }
.post-x { color: var(--faint); }
@media (max-width: 620px) { .posts a { grid-template-columns: 1fr; } }

.cluster-head { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--faint); margin: clamp(2rem,5vw,3rem) 0 0.4rem; }
.cluster-head b { color: var(--ink-2); }

/* article byline + author block (used on writing posts; complements work/case.css) */
.byline { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--faint); margin: 0 0 clamp(1.5rem,4vw,2.5rem); padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.byline b { color: var(--ink); font-weight: 700; }
.draft-flag { border: 1px dashed var(--line); padding: 3px 8px; color: var(--faint); }
.author-block { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; align-items: start; margin-top: clamp(2rem,5vw,3rem); padding-top: 1.3rem; border-top: 2px solid var(--ink); }
.author-block .ab-mk { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.6rem; line-height: 1; }
.author-block .ab-name { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem; }
.author-block .ab-bio { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin: 0.3rem 0 0; max-width: 60ch; }
.author-block .ab-links { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.05em; margin-top: 0.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.author-block .ab-links a { color: var(--muted); } .author-block .ab-links a:hover { color: var(--ink); }