/* Anas Nafees · portfolio
   fixmyvibe: direction=Ledger (Editorial Minimal, paper and ink) macro=Long Document
   Brand adjectives: precise, grounded, unhurried. He builds ledgers, transactions and audit
   trails, so the page is typeset like a statement: warm paper, ink, hairline rules, numbered
   sections, entries as rows instead of cards, tabular figures. One superfamily (IBM Plex):
   Condensed for the masthead and headings, Sans for reading, Mono for dates and numbers.
   One brand accent (vermilion). The build crew's tool chrome keeps its own blue and pink so
   building never reads as the brand. Shared values live in tokens.css.
   fixmyvibe: sec5 correct5 maint4 honest5 | hier5 spec5 restraint5 craft5 truth4
   Evidence: structural verifier, real-browser matrix, keyboard and reduced-motion checks,
   Lighthouse 98/100/100/100, no overflow from 320 to 1440, and verified source claims. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  font: 400 var(--step-0) / 1.6 var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; }
::selection { background: var(--color-selection); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

.page { width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: var(--space-3); top: -60px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--color-ink); color: var(--color-paper); }
.skip:focus { top: var(--space-3); }

/* ------------------------------------------------------------------ bar */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; }
.mark { font: 600 var(--step-1) / 1 var(--font-display); text-decoration: none; letter-spacing: 0.005em; }
nav { display: flex; gap: var(--space-5); }
nav a { font-size: var(--step--1); color: var(--color-ink-muted); text-decoration: none; padding-block: var(--space-3); }
nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 6px; }

/* ------------------------------------------------------------------ masthead */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: var(--space-8);
  align-items: start;
  padding-block: clamp(36px, 5vw, 64px) var(--space-9);
}
h1 {
  font: 600 var(--step-mast) / 0.9 var(--font-display);
  letter-spacing: -0.015em;
  margin-left: -0.04em; /* optical: the A's diagonal starts inside its box */
}
.role { margin-top: var(--space-5); font: 500 var(--step-2) / 1.25 var(--font-display); }
.intro { margin-top: var(--space-4); max-width: 58ch; color: var(--color-ink-muted); }
.avail { margin-top: var(--space-4); font: 400 var(--step--1) / 1.5 var(--font-mono); color: var(--color-ink-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-5);
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius);
  font-weight: 500; text-decoration: none; overflow-wrap: anywhere; min-width: 0;
  transition: background var(--dur) var(--ease-out);
}
.btn:hover { background: var(--color-accent-strong); }
.btn:active { background: var(--color-accent); }
.link {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--color-accent); overflow-wrap: anywhere; min-width: 0;
  transition: color var(--dur) var(--ease-out);
}
.link:hover { color: var(--color-accent-strong); text-decoration-thickness: 2px; }
.link:active { color: var(--color-accent); }

.mast-proof { display: grid; gap: var(--space-5); min-width: 0; }
.hero-photo { border-top: 2px solid var(--color-rule-strong); }
.hero-photo img {
  display: block; width: 100%; height: clamp(320px, 34vw, 460px); object-fit: cover; object-position: 50% 46%;
  background: var(--color-paper-sunk);
}
figcaption { margin-top: var(--space-2); font: 400 var(--step--1) / 1.5 var(--font-mono); color: var(--color-ink-muted); }

.summary { background: var(--color-paper-sunk); border-top: 2px solid var(--color-rule-strong); padding: var(--space-2) var(--space-5) var(--space-3); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-rule); }
.sum-row:last-child { border-bottom: 0; }
.sum-row dt { font-size: var(--step--1); color: var(--color-ink-muted); white-space: nowrap; }
.sum-row dd { font: 500 var(--step-1) / 1.2 var(--font-mono); text-align: right; }

/* ------------------------------------------------------------------ sections */
.sec { padding-bottom: var(--space-9); scroll-margin-top: 72px; } /* clears the sticky bar on anchor jumps */
.rule { height: 1px; margin: 0 0 var(--space-5); border: 0; background: var(--color-rule-strong); }
h2 { font: 600 var(--step-3) / 1.05 var(--font-display); letter-spacing: -0.01em; margin-bottom: var(--space-6); }
.num { font: 500 0.42em / 1 var(--font-mono); color: var(--color-accent); letter-spacing: 0; vertical-align: 0.7em; margin-right: 0.35em; }

/* an entry is a row of the ledger: when | what | built with */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 11rem);
  gap: var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.when { font: 400 var(--step--1) / 1.6 var(--font-mono); color: var(--color-ink-muted); padding-top: 0.2em; }
.what { min-width: 0; }
h3, h4 { font: 600 var(--step-1) / 1.3 var(--font-body); letter-spacing: -0.005em; }
.lead h4 { font: 600 var(--step-3) / 1.05 var(--font-display); letter-spacing: -0.01em; }
.category-title {
  margin-top: var(--space-7);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-rule-strong);
  font: 500 var(--step--1) / 1.5 var(--font-mono);
  color: var(--color-accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.category-title:first-of-type { margin-top: 0; }
.sub { margin-top: var(--space-1); font-size: var(--step--1); color: var(--color-ink-muted); }
.what > p:not(.sub) { margin-top: var(--space-3); max-width: 64ch; }
.what ul { margin-top: var(--space-3); padding-left: 1.1em; list-style: square; max-width: 66ch; }
.what li + li { margin-top: var(--space-2); }
.what li::marker { color: var(--color-accent); }
.with { font: 400 var(--step--1) / 1.7 var(--font-mono); color: var(--color-ink-muted); padding-top: 0.2em; }
.with span { display: block; }
.project-feature { background: var(--color-paper-sunk); padding-inline: var(--space-5); }
.project-feature h4 a { text-decoration-color: var(--color-accent); text-underline-offset: 0.12em; }
.what h4 a { text-underline-offset: 0.16em; text-decoration-color: var(--color-rule-strong); }
.project-links { font: 500 var(--step--1) / 1.6 var(--font-mono); }
.project-links a { text-underline-offset: 0.25em; text-decoration-color: var(--color-accent); }

.skills { border-bottom: 1px solid var(--color-rule); }
.skills > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--color-rule); }
.skills dt { font: 500 var(--step--1) / 1.7 var(--font-mono); color: var(--color-ink-muted); }
.skills dd { max-width: 70ch; }

.about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); gap: var(--space-8); align-items: start; }
.portrait-single { max-width: 32rem; }
.portrait { min-width: 0; }
.portrait img { display: block; width: 100%; object-fit: cover; background: var(--color-paper-sunk); }
.portrait-tall img { height: clamp(360px, 44vw, 560px); object-position: 50% 35%; }
.about-copy { min-width: 0; }
.identity-answer { margin-bottom: var(--space-5); font-size: var(--step-1); line-height: 1.55; }
.answers { border-bottom: 1px solid var(--color-rule); }
.answers > div { padding-block: var(--space-4); border-top: 1px solid var(--color-rule); }
.answers dt { font: 500 var(--step--1) / 1.5 var(--font-mono); color: var(--color-ink-muted); }
.answers dd { margin-top: var(--space-2); }

/* Project case studies retain the ledger structure without imitating a product page. */
.case-head { padding-block: clamp(56px, 9vw, 112px) var(--space-8); }
.case-head h1 { max-width: 10ch; }
.case-deck { margin-top: var(--space-5); max-width: 56ch; font-size: var(--step-2); line-height: 1.4; color: var(--color-ink-muted); }
.case-facts { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--color-rule); }
.case-facts > div { padding: var(--space-4); border-right: 1px solid var(--color-rule); }
.case-facts > div:last-child { border-right: 0; }
.case-facts dt { font: 400 var(--step--1) / 1.5 var(--font-mono); color: var(--color-ink-muted); }
.case-facts dd { margin-top: var(--space-2); font-weight: 500; }
.case-copy { display: grid; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 0.65fr); gap: var(--space-7); padding-block: var(--space-6); border-top: 1px solid var(--color-rule); }
.case-copy h3 { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-ink-muted); }
.case-copy .prose { min-width: 0; max-width: 70ch; }
.case-copy .prose > * + * { margin-top: var(--space-4); }
.case-copy ul, .case-copy ol { padding-left: 1.2em; }
.case-copy li + li { margin-top: var(--space-2); }
.case-copy li::marker { color: var(--color-accent); }
.case-copy code { font-family: var(--font-mono); font-size: 0.9em; }

/* Blog index and long-form technical writing use the same editorial ledger. */
.blog-head { padding-block: clamp(40px, 6vw, 72px) var(--space-8); }
.blog-head h1 { max-width: 13ch; }
.blog-deck { margin-top: var(--space-4); max-width: 62ch; font-size: var(--step-1); color: var(--color-ink-muted); }
.post-list { border-bottom: 1px solid var(--color-rule); }
.post-row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
.post-row h2 { margin: 0; font-size: var(--step-2); line-height: 1.15; }
.post-row h2 a { text-underline-offset: 0.16em; text-decoration-color: var(--color-accent); }
.post-row p + p { margin-top: var(--space-3); }
.post-meta { font: 400 var(--step--1) / 1.6 var(--font-mono); color: var(--color-ink-muted); }

.article-head { padding-block: clamp(40px, 7vw, 88px) var(--space-7); }
.article-head h1 { max-width: 14ch; font-size: clamp(3rem, 8vw, 7rem); line-height: 0.94; }
.article-deck { margin-top: var(--space-5); max-width: 58ch; font-size: var(--step-2); line-height: 1.42; color: var(--color-ink-muted); }
.article-meta { margin-top: var(--space-5); font: 400 var(--step--1) / 1.6 var(--font-mono); color: var(--color-ink-muted); }
.article-layout { display: grid; grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 0.72fr); gap: var(--space-8); align-items: start; }
.article-nav { position: sticky; top: 88px; border-top: 2px solid var(--color-rule-strong); }
.article-nav p { padding-block: var(--space-3); font: 500 var(--step--1) / 1.5 var(--font-mono); color: var(--color-ink-muted); }
.article-nav ol { padding: 0 0 var(--space-4) 1.2em; font-size: var(--step--1); }
.article-nav li + li { margin-top: var(--space-2); }
.article-nav a { text-underline-offset: 0.2em; text-decoration-color: var(--color-rule-strong); }
.prose { min-width: 0; max-width: 72ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-8); margin-bottom: 0; scroll-margin-top: 84px; }
.prose h3 { margin-top: var(--space-6); margin-bottom: 0; scroll-margin-top: 84px; }
.prose p, .prose li { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-accent); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-paper-sunk); padding: 0.08em 0.25em; }
.direct-answer { padding: var(--space-5); border-block: 2px solid var(--color-rule-strong); background: var(--color-paper-sunk); font-size: var(--step-1); }
.direct-answer strong { font-family: var(--font-display); }
.step-list { counter-reset: request-step; list-style: none; padding: 0 !important; }
.step-list > li { counter-increment: request-step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--color-rule); }
.step-list > li::before { content: counter(request-step, decimal-leading-zero); font: 500 var(--step--1) / 1.6 var(--font-mono); color: var(--color-accent); }
.diagram-shell { margin-inline: calc(-1 * min(5vw, 4rem)); }
.diagram-shell figcaption { margin-inline: min(5vw, 4rem); }
.diagram-frame { display: block; width: 100%; min-height: 760px; border: 1px solid var(--color-rule-strong); background: #0d1117; }
.source-list a { overflow-wrap: anywhere; text-underline-offset: 0.2em; }

.contact-note { color: var(--color-ink-muted); }
.email {
  display: inline-block; margin-top: var(--space-3);
  font: 600 var(--step-email) / 1.05 var(--font-display); letter-spacing: -0.01em;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em;
  text-decoration-color: var(--color-accent); overflow-wrap: anywhere; min-width: 0; max-width: 100%;
  transition: color var(--dur) var(--ease-out);
}
.email:hover { color: var(--color-accent-strong); }
.email:active { color: var(--color-accent); }
.contact .actions { margin-top: var(--space-5); }

.foot { border-top: 1px solid var(--color-rule); padding: var(--space-5) 0 var(--space-7); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font: 400 var(--step--1) / 1.5 var(--font-mono); color: var(--color-ink-muted); }
.foot p { margin: 0; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 880px) {
  .masthead { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .mast-proof { grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr); align-items: end; }
  .entry { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
  .with { grid-column: 2; padding-top: 0; }
  .with span { display: inline; }
  .with span + span::before { content: " · "; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-nav { position: static; }
}
@media (max-width: 600px) {
  nav { gap: var(--space-4); }
  nav a[href="#experience"], nav a[href="#skills"], nav a[href="#about"] { display: none; }
  .mast-proof { grid-template-columns: minmax(0, 1fr); }
  .hero-photo img { height: min(110vw, 460px); }
  .entry, .skills > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .with { grid-column: auto; }
  .summary { padding-inline: var(--space-4); }
  .sum-row dd { font-size: var(--step-0); }
  .project-feature { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .portrait-tall img { height: min(120vw, 480px); }
  .post-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .article-head h1 { font-size: clamp(3rem, 17vw, 5.2rem); }
  .diagram-shell { margin-inline: calc(-1 * var(--gutter)); }
  .diagram-shell figcaption { margin-inline: var(--gutter); }
  .diagram-frame { min-height: 680px; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-facts > div:nth-child(2) { border-right: 0; }
  .case-facts > div:nth-child(-n + 2) { border-bottom: 1px solid var(--color-rule); }
  .case-copy { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* ------------------------------------------------------------------ print: it is a resume */
@media print {
  .bar, .skip, .actions, #crew, .hero-photo, .portrait-single, .article-nav, .diagram-shell { display: none !important; }
  body { font-size: 11pt; }
  .masthead { padding-block: 0 24pt; }
  .mast-proof, .about-grid { display: block; }
  .sec { padding-bottom: 18pt; }
  .entry { break-inside: avoid; }
}

/* ------------------------------------------------------------------ the build
   While the crew works (html.building), pieces wait invisible until a cursor
   starts on them. Content is real HTML the whole time, so it's crawlable and
   readable by screen readers, and without JS none of this applies. */
.building [data-b]:not(.b-on) { opacity: 0; }

#crew {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  overflow-x: clip; overflow-y: visible;
  pointer-events: none; z-index: 60;
}
#crew > * { position: absolute; left: 0; top: 0; will-change: transform; }

.cur { transition: opacity 0.4s var(--ease-out); }
.cur svg { overflow: visible; filter: drop-shadow(0 1px 1.5px var(--color-shadow)); }
.cur .sh { transform-origin: 0 0; }
.cur .edge { stroke: var(--color-cursor-edge); }
.cur .halo { stroke: var(--color-cursor-halo); }
.cur.press .sh { animation: press 0.22s var(--ease-out); }
@keyframes press { 40% { transform: scale(0.8); } }
.cur .nm {
  position: absolute; left: 12px; top: 16px; padding: 1px 6px; border-radius: 2px;
  font: 500 10.5px / 1.5 var(--font-mono); color: var(--color-paper); white-space: nowrap;
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.cur.work .nm { opacity: 1; }

.mq { border: 1px dashed var(--color-tool); background: var(--color-tool-wash); }
.hd { position: absolute; width: 7px; height: 7px; background: var(--color-paper); border: 1.5px solid var(--color-tool); }
.hd.tl { left: -4px; top: -4px; } .hd.tr { right: -4px; top: -4px; } .hd.bl { left: -4px; bottom: -4px; } .hd.br { right: -4px; bottom: -4px; }
.bd {
  position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);
  padding: 0 5px; border-radius: 2px; background: var(--color-tool); color: var(--color-paper);
  font: 500 10px / 1.7 var(--font-mono); white-space: nowrap;
}
.sel { border: 1.5px solid var(--color-tool); animation: fadeout 0.9s var(--ease-in) 0.25s forwards; }
.guide { background: var(--color-guide); animation: fadeout 0.7s var(--ease-in) 0.2s forwards; }
.caret { width: 2px; background: var(--color-tool); }
.ripple { border: 1.5px solid var(--color-tool); border-radius: 50%; }
.ring { border: 1.5px solid var(--color-tool); border-radius: 50%; animation: ring 0.5s var(--ease-out) forwards; }
/* `scale`, not `transform`: transform carries the ring's position */
@keyframes ring { from { scale: 0.4; opacity: 0.9; } to { scale: 1.5; opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}