/* ============================================================================
 MARK ZERO, the site's visual language.

 Written 23 October 2026 to replace the card-grid look. The problem it solves
 is not ugliness, it is recognition. Almost every AI-built personal site uses
 the same grammar: a centred hero, a gradient, three rounded cards with a
 coloured pill in each, and an icon on every bullet. A recruiter scrolling
 thirty of those remembers none of them.

 What this does instead is make the site look like an instrument rather than
 a brochure. The reasoning is the whole point of Taiwo's work: he keeps
 receipts. So the site measures instead of selling.

 Five rules, and they are the entire design:

 1. NO BOXES. Structure comes from hairlines and space. No card, no border
 box, no drop shadow, no pill. A rounded rectangle is the single
 strongest signal of a template and it is removed entirely.
 2. NUMBERS ARE THE HEADLINE. Every real figure he owns is set large in
 monospace, because the number is the claim and the prose is the
 footnote. Nothing decorative gets that size.
 3. TYPE DOES THE WORKING. Two families only, and an extreme size
 contrast between them. If a layout looks flat, the scale is wrong.
 4. ONE ACCENT, USED LIKE A MARKER PEN. Orange marks a decision or a
 fault. It is never a fill and never a decoration.
 5. ASYMMETRY IS THE POINT. Left-aligned, uneven columns, deliberately
 awkward. Centre alignment is what makes a page look generated.

 Everything here overrides the tokens in design-system.css rather than
 replacing that file, so the other pages keep working.
 ========================================================================== */

:root {
 --font: 'Space Grotesk', system-ui, sans-serif;
 --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, monospace;

 --bg: #f4f1ea;
 --bg-2: #ece8df;
 --bg-3: #e2ddd2;
 --surface: transparent;
 --text: #16150f;
 --text-2: #4d4941;
 --text-3: #8a847a;

 --accent: #c0451a;
 --accent-2: #a3370f;
 --live: #2c6b3c;
 --warn: #9a5b06;
 --error: #9c2418;

 --rule: #cdc7ba;
 --rule-2: #ded8cc;
 --border: var(--rule);
 --border-2: var(--rule-2);

 /* the scale is deliberately violent */
 --display: clamp(2.6rem, 1.2rem + 7.2vw, 7.5rem);
 --t2: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem);
 --t1: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
 --num: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem);

 --edge: clamp(1.25rem, 5vw, 5rem);
 --measure: 68ch;
}

/* dark: same grammar, inverted. No blue-grey "product dark mode" tint. */
:root[data-theme="dark"] {
 --bg: #100f0c;
 --bg-2: #1a1814;
 --bg-3: #24211b;
 --text: #f2efe6;
 --text-2: #b9b3a5;
 --text-3: #827c70;
 --accent: #ff6b32;
 --accent-2: #ff8b5c;
 --live: #63c07a;
 --warn: #d99b3a;
 --error: #ef6f5e;
 --rule: #34302a;
 --rule-2: #262320;
}

@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]):not([data-theme="dark"]) {
 --bg: #100f0c; --bg-2: #1a1814; --bg-3: #24211b;
 --text: #f2efe6; --text-2: #b9b3a5; --text-3: #827c70;
 --accent: #ff6b32; --accent-2: #ff8b5c;
 --live: #63c07a; --warn: #d99b3a; --error: #ef6f5e;
 --rule: #34302a; --rule-2: #262320;
 }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: var(--font);
 font-size: 17px;
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg); }

/*,, - nav: a strip of small type, not a bar of buttons,, - */

.util {
 position: sticky;
 top: 0;
 z-index: 90;
 display: flex;
 gap: var(--space-4);
 padding: 14px var(--edge);
 background: color-mix(in srgb, var(--bg) 88%, transparent);
 backdrop-filter: blur(14px) saturate(140%);
 border-bottom: 1px solid var(--rule);
 font-family: var(--font-mono);
 font-size: 0.72rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}

.util a {
 color: var(--text-3);
 text-decoration: none;
 border: 0;
 transition: color 0.15s ease;
}
.util a:hover { color: var(--text); }
.util a[aria-current="page"] { color: var(--accent); }

/* Narrow viewports: the nav is one row that scrolls sideways.
   Measured on a 360px viewport: the ten links need 491px and the strip
   is 345px wide, so CHANNELS, JOBS and CORPUS were clipped and could
   not be reached at all. A scrolling row keeps every link reachable and
   keeps the nav one line tall, which matters on a phone. */
@media (max-width: 768px) {
  .util {
    gap: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Room for the last link to breathe once scrolled to the end. */
    padding-right: var(--space-6);
  }

  .util::-webkit-scrollbar { display: none; }

  /* Links keep their width instead of being squeezed by the flex
     container, so nothing is cut in half. */
  .util a { flex: 0 0 auto; }
}

/*,, - shell,, - */

.wrap {
 max-width: 1180px;
 margin: 0 auto;
 padding: 0 var(--edge) var(--space-12);
}

/*,, - display type,, - */

.display {
 font-size: var(--display);
 line-height: 0.92;
 font-weight: 500;
 letter-spacing: -0.045em;
 margin: 0 0 var(--space-6);
 text-wrap: balance;
}

/* The one word that matters gets the accent and nothing else does. */
.display em {
 font-style: normal;
 color: var(--accent);
}

.lede {
 font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
 line-height: 1.6;
 color: var(--text-2);
 max-width: var(--measure);
 margin: 0 0 var(--space-6);
}

/*,, - the booking ask: sits directly under the claim,, - */

/* The headline is the claim. The ask comes next, before the explanation,
 so the reader knows what the page is for before it tells them why. The
 note under the button answers the question a reader has at this point,
 which is what happens after they click. */
.callcta {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: var(--space-2) var(--space-4);
 margin: 0 0 var(--space-5);
}

.callcta-note {
 margin: 0;
 font-family: var(--font-mono);
 font-size: 0.74rem;
 letter-spacing: 0.06em;
 color: var(--text-3);
}

/*,, - the number: the loudest element on the page,, - */

.figure {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-8) var(--space-10);
 padding: var(--space-6) 0;
 border-top: 1px solid var(--rule);
 border-bottom: 1px solid var(--rule);
 margin: 0 0 var(--space-10);
}

.fig { min-width: 0; }

.fig .n {
 display: block;
 font-family: var(--font-mono);
 font-size: var(--num);
 line-height: 0.9;
 font-weight: 500;
 letter-spacing: -0.04em;
 color: var(--text);
 font-variant-numeric: tabular-nums;
}

.fig.accent .n { color: var(--accent); }

.fig .k {
 display: block;
 margin-top: var(--space-2);
 font-size: 0.76rem;
 line-height: 1.4;
 color: var(--text-3);
 max-width: 22ch;
}

/*,, - section head: a rule with a number on it,, - */

.shead {
 display: flex;
 align-items: baseline;
 gap: var(--space-3);
 margin: var(--space-12) 0 var(--space-5);
 padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--text);
}

.shead .idx {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 color: var(--accent);
 letter-spacing: 0.1em;
}

.shead h2 {
 font-size: var(--t1);
 font-weight: 500;
 letter-spacing: -0.02em;
 margin: 0;
}

.shead .note {
 margin-left: auto;
 font-size: 0.76rem;
 color: var(--text-3);
 text-align: right;
 max-width: 34ch;
}

/*,, - entries: hairline rows, no cards,, - */

.entries { border-top: 1px solid var(--rule-2); }

.entry {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
 gap: var(--space-3) var(--space-6);
 padding: var(--space-6) 0;
 border-bottom: 1px solid var(--rule-2);
 align-items: start;
}

.entry:hover { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }

.entry .metric {
 font-family: var(--font-mono);
 font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
 line-height: 1.1;
 color: var(--accent);
 letter-spacing: -0.02em;
}

.entry .metric-note {
 display: block;
 margin-top: 6px;
 font-size: 0.76rem;
 line-height: 1.45;
 color: var(--text-3);
 max-width: 34ch;
}

.entry .name {
 font-size: var(--t1);
 font-weight: 500;
 letter-spacing: -0.02em;
 margin: 0 0 var(--space-2);
 display: flex;
 align-items: baseline;
 gap: var(--space-2);
 flex-wrap: wrap;
}

.tag {
 font-family: var(--font-mono);
 font-size: 0.66rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--live);
 border-bottom: 1px solid currentColor;
 padding-bottom: 1px;
}

.entry .desc {
 font-size: 0.95rem;
 line-height: 1.6;
 color: var(--text-2);
 margin: 0 0 var(--space-3);
 max-width: var(--measure);
}

.entry .go {
 font-family: var(--font-mono);
 font-size: 0.76rem;
 letter-spacing: 0.04em;
 color: var(--accent);
 text-decoration: none;
}
.entry .go:hover { text-decoration: underline; text-underline-offset: 3px; }

.entry .code {
 font-family: var(--font-mono);
 font-size: 0.7rem;
 color: var(--text-3);
 text-decoration: none;
 margin-left: var(--space-4);
}
.entry .code:hover { color: var(--accent); }

/*,, - links and buttons: underlined text, not filled pills,, - */

.cta,
a.cta {
 display: inline-block;
 font-family: var(--font-mono);
 font-size: 0.78rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--text);
 text-decoration: none;
 border-bottom: 2px solid var(--accent);
 padding: 4px 0 6px;
 margin: 0 var(--space-5) 0 0;
 transition: color 0.15s ease, border-color 0.15s ease;
}

/* the hero and contact rows hold three of these; on a phone they wrap, and an
 inline-block row can drop the next item on top of the previous underline.
 A flex row wraps with a real row gap instead. */
.cta-row {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: var(--space-3) var(--space-5);
 margin: var(--space-6) 0 var(--space-8);
}
.cta-row .cta.cta-row a.cta { margin-right: 0; }
a.cta:hover { color: var(--accent); border-bottom-color: var(--accent-2); }

.cta-ghost { border-bottom-color: var(--rule); color: var(--text-2); }
.cta-ghost:hover { border-bottom-color: var(--text-3); color: var(--text); }

.cta-sub { color: var(--text-3); font-size: 0.68rem; margin-left: 4px; }

/*,, - prose block,, - */

.prose { max-width: var(--measure); }

.prose p {
 font-size: 0.98rem;
 line-height: 1.68;
 color: var(--text-2);
 margin: 0 0 var(--space-4);
}

.prose strong { color: var(--text); font-weight: 600; }

.prose ol { margin: 0; padding: 0; list-style: none; counter-reset: c; }

.prose ol li {
 counter-increment: c;
 position: relative;
 padding: var(--space-4) 0 var(--space-4) var(--space-8);
 border-top: 1px solid var(--rule-2);
 font-size: 0.95rem;
 line-height: 1.6;
 color: var(--text-2);
}

.prose ol li::before {
 content: counter(c, decimal-leading-zero);
 position: absolute;
 left: 0;
 top: var(--space-4);
 font-family: var(--font-mono);
 font-size: 0.76rem;
 color: var(--accent);
}

/*,, - contact strip,, - */

.meta {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2) var(--space-4);
 font-family: var(--font-mono);
 font-size: 0.72rem;
 color: var(--text-3);
 padding-top: var(--space-5);
 border-top: 1px solid var(--rule);
}

.meta a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/*,, - footer,, - */

footer {
 margin-top: var(--space-12);
 padding-top: var(--space-5);
 border-top: 1px solid var(--rule);
 font-family: var(--font-mono);
 font-size: 0.72rem;
 color: var(--text-3);
}

.util-footer { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.util-footer a { color: var(--text-3); text-decoration: none; }
.util-footer a:hover { color: var(--accent); }

/*,, - theme toggle: a square, because a circle is a template,, - */

.theme-toggle {
 position: fixed;
 right: var(--space-4);
 bottom: var(--space-4);
 z-index: 100;
 width: 34px;
 height: 34px;
 display: grid;
 place-items: center;
 background: var(--bg);
 color: var(--text-2);
 border: 1px solid var(--rule);
 border-radius: 0;
 font-size: 0.9rem;
 cursor: pointer;
 transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* The half-moon character did not exist in the page font and rendered as a stray
 arrow. Draw the mark instead: a square, half filled. */
.theme-toggle {
 font-size: 0;
 background: linear-gradient(90deg, var(--text-2) 50%, transparent 50%) center / 12px 12px no-repeat, var(--bg);
}
.theme-toggle:hover { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%) center / 12px 12px no-repeat, var(--bg); }

/*,, - small screens,, - */

@media (max-width: 820px) {
 body { font-size: 16px; }
 .entry { grid-template-columns: 1fr; gap: var(--space-2); }
 .entry .metric-note { max-width: none; }
 .shead { flex-wrap: wrap; }
 .shead .note { margin-left: 0; text-align: left; max-width: none; }
 .figure { gap: var(--space-6); }
 .util { gap: var(--space-3); font-size: 0.66rem; }
}

/* Content never depends on motion, so this costs nothing and breaks nothing. */
@media (prefers-reduced-motion: reduce) {
 * { animation: none !important; transition: none !important; }
}
/*,, - masthead: the portrait is a plate, not a circular hero,, - */

.masthead {
 display: grid;
 grid-template-columns: 210px minmax(0, 1fr);
 gap: var(--space-8);
 align-items: start;
 padding-top: var(--space-8);
}

.masthead-text { min-width: 0; }

.stamp {
 font-family: var(--font-mono);
 font-size: 0.74rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--text-3);
 margin: 0 0 var(--space-5);
 padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--rule);
}

/* No rounded frame, no shadow. A hairline and a caption, like a plate in a
 printed report. Greyscale is deliberate: the accent is the only colour on
 the page and it belongs to the numbers, not to a photograph. */
.plate { margin: 0; }

.plate img {
 display: block;
 width: 100%;
 height: auto;
 filter: grayscale(1) contrast(1.06);
 border: 1px solid var(--rule);
}

.plate:hover img { filter: grayscale(0.4) contrast(1.06); }

.plate figcaption {
 margin-top: 6px;
 font-family: var(--font-mono);
 font-size: 0.66rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--text-3);
}

@media (max-width: 820px) {
 .masthead { grid-template-columns: 1fr; gap: var(--space-5); }
 .plate { max-width: 190px; }
}

/*,, - skim page: the 60-second read,, - */

.skim-grid {
 border-top: 1px solid var(--rule-2);
 margin-top: var(--space-6);
}

.skim-entry {
 border-bottom: 1px solid var(--rule-2);
 padding: var(--space-6) 0;
 display: grid;
 gap: var(--space-3);
}

.skim-head {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: var(--space-3);
}

.skim-head h2 {
 font-size: var(--text-xl);
 font-weight: 700;
 letter-spacing: -0.01em;
 margin: 0;
}

.skim-private {
 font-size: var(--text-sm);
 font-weight: 400;
 color: var(--text-3);
}

.skim-tag {
 margin: 0;
 font-size: var(--text-sm);
}

.skim-tag a { color: var(--accent); }

.skim-line {
 margin: 0;
 font-size: var(--text-lg);
 color: var(--text);
 max-width: 62ch;
}

.skim-failure.skim-cost.skim-headline.skim-limit {
 margin: 0;
 max-width: 68ch;
 color: var(--text-2);
}

.skim-failure strong.skim-cost strong.skim-headline strong.skim-limit strong {
 color: var(--text);
 font-weight: 600;
}

/* the cost line sits between the failure and the numbers, one step muted,
 so it reads as context rather than as the claim */
.skim-cost {
 color: var(--text-3);
}

.skim-limit {
 color: var(--text-3);
}

.skim-stack {
 margin: 0;
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
}

.skim-stack code {
 font-family: var(--font-mono, ui-monospace, monospace);
 font-size: var(--text-xs);
 color: var(--text-3);
 border: 1px solid var(--rule-2);
 padding: 0.1em 0.5em;
}

.skim-links {
 margin: 0;
 font-size: var(--text-sm);
}

.skim-links a { color: var(--accent); }

.skim-meta {
 margin-top: var(--space-8);
 max-width: 68ch;
 display: grid;
 gap: var(--space-3);
}

.skim-footnote {
 margin-top: var(--space-8);
 padding-top: var(--space-4);
 border-top: 1px solid var(--rule-2);
 max-width: 68ch;
 font-size: var(--text-sm);
 color: var(--text-3);
}

.skim-footnote p { margin: 0; }

.skim-footnote strong { color: var(--text-2); font-weight: 600; }

.skim-footnote a { color: var(--accent); }

.skim-meta h2 {
 font-size: var(--text-lg);
 font-weight: 700;
 margin: 0 0 var(--space-2);
}

.skim-meta p { margin: 0; color: var(--text-2); }

.skim-meta strong { color: var(--text); font-weight: 600; }

.skim-foot {
 margin-top: var(--space-8);
 padding-top: var(--space-4);
 border-top: 1px solid var(--rule-2);
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: var(--space-3);
 font-size: var(--text-sm);
 color: var(--text-3);
}

.skim-foot p { margin: 0; }

.skim-credit {
 font-family: var(--font-mono, ui-monospace, monospace);
 font-size: var(--text-xs);
 letter-spacing: 0.04em;
}

.page-head { margin-top: var(--space-6); }
.page-head .display { margin-bottom: var(--space-3); }

.page-head .lede { max-width: 62ch; }

/*,, - homepage: the keyword strip and the closing claim,, - */

/* Recruiters match on proper nouns. The homepage had four projects and a
 Huawei card but no list of technologies, so a keyword scan found nothing. */
.toolstack {
 margin: var(--space-4) 0 0;
 font-family: var(--font-mono, ui-monospace, monospace);
 font-size: var(--text-xs);
 line-height: 1.9;
 color: var(--text-3);
 max-width: 70ch;
}

.toolstack-label {
 color: var(--accent);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin-right: 0.6em;
}

/* The last thing on the page is what a reader who scrolled all the way
 carries out of it, so the strongest claim is repeated here. */
.recency {
 margin: 0 0 var(--space-5);
 max-width: 58ch;
 font-size: var(--text-lg);
 line-height: 1.45;
 color: var(--text);
 border-left: 2px solid var(--accent);
 padding-left: var(--space-4);
}