/* ==========================================================================
   EMH — Engineer Muhammad Hamza
   Visual material system: graphite · warm ivory · copper
   Technical paper + drafting film + precision linework, translated to the web.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Graphite family — warm-biased darks */
  --gr-950: #101010;
  --gr-900: #171614;
  --gr-850: #1C1B18;
  --gr-800: #24221E;
  --gr-700: #302D28;
  --gr-600: #423E38;

  /* Stone — mid neutrals */
  --st-500: #5F5952;
  --st-400: #8C857C;
  --st-300: #A9A199;

  /* Ivory family — warm lights (ink on graphite, brand marks) */
  --iv-050: #FBF9F5;
  --iv-100: #F5F1EA;
  --iv-200: #EDE7DD;
  --iv-300: #E2DACD;
  --iv-400: #D2C8B8;

  /* Warm stone — the light SURFACE family.
     Paper stock rather than paper white: keeps the drafting feel while
     dropping the glare behind long-form text. */
  --sn-050: #EFEAE1;
  --sn-100: #E8E2D7;
  --sn-200: #DFD8CB;
  --sn-300: #D3CABB;
  --sn-400: #C2B8A6;

  /* Signature accent — copper */
  --cu:      #C2683A;   /* base */
  --cu-lift: #E0894F;   /* on graphite */
  --cu-deep: #8A4A2A;   /* small text on ivory */
  --cu-wash: rgba(194,104,58,.10);

  /* Supporting accent, used sparingly */
  --tl: #3F6B66;

  /* Semantic — light surface (default) */
  --bg:        var(--sn-100);
  --bg-raise:  var(--sn-050);
  --bg-sink:   var(--sn-200);
  --tx:        var(--gr-900);
  --tx-2:      var(--gr-600);
  --tx-3:      var(--st-500);
  --rule:      var(--sn-400);
  --rule-soft: var(--sn-300);
  --accent:    var(--cu);
  --accent-tx: var(--cu-deep);

  /* Technical figures — these tokens flip with the surface so diagram ink and
     labels keep their contrast on both stone and graphite. */
  --fig-ink:  #6E6862;
  --fig-alt:  #7A736B;
  --fig-node: #57524C;
  --fig-lbl:  var(--st-500);

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Measure */
  --wrap: 1240px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(4.5rem, 11vh, 9rem);

  /* Motion language — three speeds, one easing family */
  --t-fast: 160ms cubic-bezier(.32,.72,0,1);
  --t-med:  420ms cubic-bezier(.32,.72,0,1);
  --t-slow: 900ms cubic-bezier(.22,.61,.36,1);
  --t-draw: 1400ms cubic-bezier(.65,0,.35,1);
}

/* Dark surface — applied per section, not per page */
.dark {
  --bg:        var(--gr-900);
  --bg-raise:  var(--gr-850);
  --bg-sink:   var(--gr-950);
  --tx:        var(--iv-100);
  --tx-2:      #B9B2A8;
  --tx-3:      #8A837A;
  --rule:      rgba(245,241,234,.14);
  --rule-soft: rgba(245,241,234,.08);
  --accent:    var(--cu-lift);
  --accent-tx: var(--cu-lift);
  --fig-ink:  #8F8880;
  --fig-alt:  #A9A199;
  --fig-node: #837C73;
  --fig-lbl:  #8F8880;
  background: var(--bg);
  color: var(--tx);
}

/* --------------------------------------------------------------------------
   02 · Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--sn-100);
  color: var(--gr-900);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
svg { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--cu); color: #fff; }

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

.skip {
  position: fixed; left: 1rem; top: -5rem; z-index: 300;
  background: var(--gr-900); color: var(--iv-100);
  padding: .8rem 1.2rem; font-size: .9rem; font-weight: 600;
  text-decoration: none; transition: top var(--t-fast);
}
.skip:focus { top: 1rem; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   03 · Texture — grain, drafting grid, technical rules
   -------------------------------------------------------------------------- */
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .026;
  mix-blend-mode: multiply;
}
.dark.grain::before { opacity: .045; mix-blend-mode: overlay; }

.draft::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245,241,234,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,234,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 95% at 82% 18%, #000 0%, rgba(0,0,0,.45) 38%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 95% at 82% 18%, #000 0%, rgba(0,0,0,.45) 38%, transparent 72%);
}

/* --------------------------------------------------------------------------
   04 · Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--pad);
  position: relative; z-index: 1;
}

section { position: relative; }
.band { padding-block: var(--sec); position: relative; overflow: hidden; }
.band > .wrap { position: relative; z-index: 2; }

/* ONE editorial column axis for the whole document.
   Every two-column section divides the wrap 5 : 7 with the same gutter, so
   the second column starts on the same vertical line in every section and
   the page reads as one grid rather than a stack of separate layouts. */
.split > * { min-width: 0; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
}
/* Figure-led sections balance their two tracks against each other. */
.split--fig { align-items: center; }
@media (max-width: 900px) {
  .split, .split--fig { grid-template-columns: 1fr; gap: 2rem; }
}

.stack > * + * { margin-top: 1.15em; }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.5; color: var(--tx); letter-spacing: -.014em; }
.body { font-size: clamp(.98rem, 1.15vw, 1.06rem); color: var(--tx-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   05 · Engineering linework — section markers
   -------------------------------------------------------------------------- */
.marker {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.marker__no { color: var(--accent-tx); font-weight: 500; flex: none; }
.marker__rule { flex: 1 1 auto; height: 1px; background: var(--rule); transform-origin: left; }
.marker__label { flex: none; }
@media (max-width: 480px) {
  /* A long marker label is worth two lines; it is not worth an overflow. */
  .marker { flex-wrap: wrap; row-gap: .4rem; }
  .marker__rule { order: 3; flex-basis: 100%; }
  .marker__label { flex: 1 1 auto; min-width: 0; }
}

h2.title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  letter-spacing: -.038em;
  margin-bottom: .5em;
}
h3.sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  letter-spacing: -.012em;
  margin-bottom: .55em;
}

.tick {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3);
}
.tick--accent { color: var(--accent-tx); }
#cvNote { text-transform: none; letter-spacing: .01em; font-size: .78rem; max-width: 46ch; }

/* --------------------------------------------------------------------------
   06 · Loader
   -------------------------------------------------------------------------- */
#loader {
  position: fixed; inset: 0; z-index: 500;
  background: var(--gr-900);
  display: grid; place-items: center;
  transition: opacity 450ms ease, visibility 450ms;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; color: var(--iv-100); }
.loader__mark { width: 176px; margin: 0 auto 1.6rem; color: var(--cu-lift); }
.loader__mark path {
  stroke-dasharray: var(--len, 720);
  stroke-dashoffset: var(--len, 720);
  animation: draw 620ms cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.loader__name {
  font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  opacity: 0; animation: fadeUp 500ms ease 480ms forwards;
}
.loader__spec {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cu-lift);
  margin-top: .5rem;
  opacity: 0; animation: fadeUp 500ms ease 620ms forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   07 · Scroll progress
   -------------------------------------------------------------------------- */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  pointer-events: none;
}
#progress span {
  display: block; height: 100%; width: 100%;
  background: var(--cu);
  transform: scaleX(0); transform-origin: left;
}

/* --------------------------------------------------------------------------
   08 · Header / navigation
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  /* Opaque from the first pixel of scroll: the bar is a surface of its own,
     never a window onto the hero behind it. */
  background: var(--gr-850);
  border-bottom: 1px solid rgba(245, 241, 234, .12);
  transition: background var(--t-med), border-color var(--t-med), color var(--t-med);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; }

/* Over the dark hero the nav is light; once past it, it inverts. */
.hdr { color: var(--iv-100); }
/* The bar reads the theme of whatever band is under it. Both states are
   fully opaque; only the palette changes. */
.hdr[data-theme="light"] {
  background: var(--sn-050);
  border-bottom-color: var(--sn-400);
  color: var(--gr-900);
}

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.brand__mark {
  width: 54px; flex: none; color: var(--cu-lift);
  transition: transform var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.hdr[data-theme="light"] .brand__mark { color: var(--cu); }
.brand:hover .brand__mark { transform: translateY(-1px); opacity: .82; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__nm { font-size: .84rem; font-weight: 600; letter-spacing: .01em; }
.brand__ds { font-family: var(--mono); font-size: .56rem; letter-spacing: .19em; text-transform: uppercase; opacity: .68; margin-top: .18rem; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  position: relative; display: block;
  padding: .45rem .7rem;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; color: inherit; opacity: .72;
  transition: opacity var(--t-fast);
}
.nav a::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .18rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-fast);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a.on { opacity: 1; color: var(--cu-lift); }
.hdr[data-theme="light"] .nav a.on { color: var(--cu-deep); }
.nav a.on::after { transform: scaleX(1); }

.burger {
  display: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid currentColor; color: inherit;
  cursor: pointer; place-items: center;
}
.burger i, .burger i::before, .burger i::after {
  display: block; width: 16px; height: 1.5px; background: currentColor;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger i { position: relative; }
.burger i::before { content: ""; position: absolute; top: -5px; }
.burger i::after  { content: ""; position: absolute; top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: grid; }
  .navwrap {
    position: fixed; inset: 4.75rem 0 auto 0;
    background: var(--gr-850); color: var(--iv-100);
    border-bottom: 1px solid rgba(245,241,234,.14);
    padding: .5rem var(--pad) 1.5rem;
    display: none; max-height: calc(100dvh - 4.75rem); overflow-y: auto;
  }
  .navwrap.open { display: block; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .95rem .1rem; font-size: .8rem; border-bottom: 1px solid rgba(245,241,234,.1); opacity: .9; }
  .nav a::after { display: none; }
  .hdr[data-theme="light"] .navwrap { background: var(--sn-050); color: var(--gr-900); border-bottom-color: var(--sn-400); }
  .hdr[data-theme="light"] .nav a { border-bottom-color: var(--sn-300); }
}

/* --------------------------------------------------------------------------
   09 · Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .82rem 1.3rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid currentColor; background: none; color: inherit;
  border-radius: 2px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn .ar { display: inline-block; transition: transform var(--t-fast); }
.btn:hover .ar { transform: translateX(4px); }

.btn--fill { background: var(--cu); border-color: var(--cu); color: #fff; }
.btn--fill:hover { background: var(--cu-deep); border-color: var(--cu-deep); }
.dark .btn--fill { background: var(--cu-lift); border-color: var(--cu-lift); color: var(--gr-900); }
.dark .btn--fill:hover { background: #EFA268; border-color: #EFA268; }

.btn--line { border-color: var(--rule); color: var(--tx); }
.btn--line:hover { border-color: var(--accent); color: var(--accent-tx); background: var(--cu-wash); }

.btn--sm { padding: .55rem .9rem; font-size: .64rem; }

.btns { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Inline arrow link — the site's main text link */
.alink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--accent-tx);
  padding-bottom: .25rem;
  border-bottom: 1px solid currentColor;
  transition: gap var(--t-fast), color var(--t-fast);
}
.alink:hover { gap: .85rem; }

/* --------------------------------------------------------------------------
   10 · Hero
   -------------------------------------------------------------------------- */
.hero {
  /* The hero paints its own graphite ground rather than carrying .dark, so it
     has to opt into the dark figure palette explicitly. */
  --fig-ink:  #8F8880;
  --fig-alt:  #A9A199;
  --fig-node: #837C73;
  --fig-lbl:  #8F8880;
  position: relative; overflow: hidden;
  padding-block: clamp(8rem, 18vh, 12rem) clamp(3.5rem, 8vh, 6rem);
  min-height: 100svh;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 90% at 78% 8%, #23211D 0%, transparent 55%),
    linear-gradient(175deg, #1B1A17 0%, #131211 100%);
}
.hero__grid {
  display: grid;
  /* The drawing is a primary hero element, not an ornament: it gets the
     wider track. Row 2 carries the data strip across both columns. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; width: 100%;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cu-lift);
  margin-bottom: 2rem;
}
.hero__eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--cu-lift);
}

.hero__name {
  font-size: clamp(2.5rem, 7vw, 5.1rem);
  /* Inter's ascender + descender is ~1.115em. At line-height .93 the
     descender of "Engineer" physically landed on the cap height of
     "Muhammad" below it, which is what made the g read as broken. The
     minimum that clears it is (descender .22em + cap .735em) = .955em;
     1.04 keeps the display-tight feel and leaves ~7% optical air. */
  line-height: 1.04; letter-spacing: -.045em; color: #fff;
  margin-bottom: .3em;
}
.hero__name .ln {
  display: block; overflow: hidden;
  /* The reveal mask still has to be taller than the line box, or it clips
     the same descender it no longer collides with. */
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.hero__name .ln > span { display: block; }
/* The travel has to clear the padded box, or the glyph tops peek out
   before the reveal starts. */
.hero__name .mask > span { transform: translateY(125%); }
.hero__name .mask.in > span { transform: none; }

.hero__spec {
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 400; letter-spacing: -.02em; line-height: 1.2;
  color: var(--cu-lift);
  /* Two lines in the hero's text track, not three. */
  max-width: 24ch; margin-bottom: 1.5rem;
}
.hero__dom {
  font-family: var(--mono); font-size: clamp(.62rem, 1.3vw, .72rem);
  letter-spacing: .18em; text-transform: uppercase; color: #8A837A;
  padding-block: .9rem; margin-bottom: 1.6rem;
  border-top: 1px solid rgba(245,241,234,.13);
  border-bottom: 1px solid rgba(245,241,234,.13);
  max-width: 46ch;
}
.hero__dom b { color: var(--iv-100); font-weight: 500; }
.hero__say {
  color: #B9B2A8; font-size: clamp(.95rem, 1.2vw, 1.05rem);
  max-width: 48ch; margin-bottom: 2.2rem;
}
.hero__btns { margin-bottom: 0; }
.hero .btn { color: var(--iv-100); border-color: rgba(245,241,234,.28); }
.hero .btn:hover { border-color: var(--iv-100); background: rgba(245,241,234,.07); }
.hero .btn--fill { color: var(--gr-900); }

.hero__stats {
  /* One measured data strip on the page grid rather than a ragged wrap
     inside the text column. */
  grid-column: 1 / -1;
  display: grid;
  /* Explicit tracks, not auto-fit: five items must not leave ragged empty
     cells at the end of the strip. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.5vw, 2.25rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: clamp(1.15rem, 2.5vw, 1.6rem);
  border-top: 1px solid rgba(245, 241, 234, .13);
}
@media (max-width: 359px)  { .hero__stats { grid-template-columns: 1fr; } }
@media (min-width: 700px)  { .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .hero__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.hero__stat dt {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: #8F8880;
  margin-bottom: .35rem;
}
.hero__stat dd { margin: 0; color: var(--iv-100); font-size: 1rem; font-weight: 500; }
.hero__stat dd b { color: var(--cu-lift); font-weight: 600; }

/* Hero technical figure */
.figwrap { position: relative; }
/* A block diagram has a legible minimum scale. Below it the figure scrolls
   in its own track rather than shrinking the annotation type into noise. */
.figscroll {
  min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: .5rem;
}
.figscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.fig { width: 100%; height: auto; color: var(--fig-ink); }
.fig .stroke { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.fig .stroke-2 { fill: none; stroke: var(--fig-alt); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fig .hot { stroke: var(--cu-lift); }
.fig .lbl {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  fill: var(--fig-lbl); text-transform: uppercase;
}
.fig .lbl-hot { fill: var(--cu-lift); }
.fig .node { fill: none; stroke: var(--fig-node); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig .dot { fill: var(--cu-lift); }

/* Path draw animation */
.draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.in .draw { animation: draw var(--t-draw) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
.fade { opacity: 0; }
.in .fade { animation: fadeUp 520ms ease forwards; animation-delay: calc(var(--d, 0) * 1ms); }

/* Signal pulse travelling the control loop */
.pulse { opacity: 0; }
.in .pulse { animation: pulseRun 3.6s linear 1.6s infinite; }
@keyframes pulseRun {
  0%   { opacity: 0; offset-distance: 0%; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* Minimum rendered widths: chosen so the smallest label in each figure stays
   at ~9px on screen instead of scaling away with the drawing. */
@media (max-width: 900px) { .fig--loop { min-width: 800px; } }
@media (max-width: 620px) { .fig--uav  { min-width: 440px; } }

/* --------------------------------------------------------------------------
   11 · Statement rule (between hero and about)
   -------------------------------------------------------------------------- */
.motto {
  background: var(--gr-950); color: var(--iv-100);
  border-top: 1px solid rgba(245,241,234,.1);
  padding-block: 1.35rem;
  overflow: hidden;
}
.motto__in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.motto__w {
  font-family: var(--mono); font-size: clamp(.72rem, 1.5vw, .9rem);
  letter-spacing: .24em; text-transform: uppercase; margin: 0;
}
.motto__w em { font-style: normal; color: var(--cu-lift); }

/* --------------------------------------------------------------------------
   12 · Reveal system
   -------------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.rv-l { opacity: 0; transform: translateX(-14px); }
.rv-l.in { opacity: 1; transform: none; transition: opacity var(--t-slow), transform var(--t-slow); transition-delay: calc(var(--d,0) * 1ms); }
.rv-line { transform: scaleX(0); }
.rv-line.in { transform: scaleX(1); transition: transform 800ms cubic-bezier(.65,0,.35,1); }

/* Masked text line reveal */
.mask { overflow: hidden; display: block; }
.mask > span { display: block; transform: translateY(105%); }
.mask.in > span { transform: none; transition: transform 780ms cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--d,0) * 1ms); }

/* --------------------------------------------------------------------------
   13 · Capability system map
   -------------------------------------------------------------------------- */
/* The stack is the left half of one idea, so it stays beside the
   competencies it introduces instead of ending in an empty column. */
@media (min-width: 1000px) {
  .flowwrap { position: sticky; top: calc(4.75rem + clamp(1.5rem, 4vh, 3rem)); }
}

.chain { display: grid; gap: 0; margin-top: 1rem; }
.chain__row {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(1rem, 3vw, 2.25rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  position: relative;
}
.chain__row:last-child { border-bottom: 1px solid var(--rule-soft); }
.chain__k {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  color: var(--tx-3); padding-top: .3rem;
}
.chain__row.on .chain__k { color: var(--accent-tx); }
.chain__t { font-size: 1.06rem; font-weight: 600; letter-spacing: -.014em; margin-bottom: .4rem; }
.chain__d { font-size: .95rem; color: var(--tx-2); max-width: 60ch; }
.chain__tags { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .75rem; }
.chain__tags li { font-family: var(--mono); font-size: .66rem; letter-spacing: .07em; color: var(--tx-3); }
@media (max-width: 640px) { .chain__row { grid-template-columns: 1fr; gap: .35rem; } }

/* Vertical flow: MATHEMATICS → … → UAV */
.flowmap { display: grid; gap: 0; }
.flowmap__n {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
  padding: .85rem 0;
}
.flowmap__b {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: .5rem .85rem; color: var(--tx-2);
  transition: border-color var(--t-med), color var(--t-med), background var(--t-med);
  white-space: nowrap;
}
.flowmap__n.on .flowmap__b { border-color: var(--accent); color: var(--accent-tx); background: var(--cu-wash); }
.flowmap__n:last-child.on .flowmap__b { background: var(--cu); border-color: var(--cu); color: #fff; }
.dark .flowmap__n:last-child.on .flowmap__b { background: var(--cu-lift); border-color: var(--cu-lift); color: var(--gr-900); }
.flowmap__c { font-size: .85rem; color: var(--tx-3); }
.flowmap__v { width: 1px; height: 18px; background: var(--rule); margin-left: 1.4rem; transform: scaleY(0); transform-origin: top; }
.flowmap__v.on { transform: scaleY(1); transition: transform 320ms ease; background: var(--accent); }

/* --------------------------------------------------------------------------
   14 · Workflow ladder
   -------------------------------------------------------------------------- */
.ladder { position: relative; }
.ladder::before {
  content: ""; position: absolute; left: 2.4rem; top: 1.4rem; bottom: 1.4rem;
  width: 1px; background: var(--rule-soft);
}
.ladder__s {
  display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.35rem; position: relative;
}
.ladder__n {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em;
  color: var(--tx-3); position: relative; z-index: 1;
  transition: color var(--t-med);
}
.ladder__s.on .ladder__n { color: var(--accent-tx); }
.ladder__s::before {
  content: ""; position: absolute; left: 2.4rem; top: 1.85rem;
  width: 7px; height: 7px; margin-left: -3px;
  background: var(--bg); border: 1px solid var(--rule);
  transform: scale(.4); opacity: 0;
  transition: transform var(--t-med), opacity var(--t-med), border-color var(--t-med), background var(--t-med);
}
.ladder__s.on::before { transform: scale(1); opacity: 1; border-color: var(--accent); background: var(--accent); }
.ladder__h { font-size: 1.08rem; font-weight: 600; letter-spacing: -.014em; margin-bottom: .3rem; }
.ladder__p { font-size: .95rem; color: var(--tx-2); max-width: 58ch; }
@media (max-width: 640px) {
  .ladder::before, .ladder__s::before { display: none; }
  .ladder__s { grid-template-columns: 1fr; gap: .3rem; }
}

/* --------------------------------------------------------------------------
   15 · Experience numerals
   -------------------------------------------------------------------------- */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.num { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.num__v {
  font-size: clamp(3.6rem, 11vw, 7rem); line-height: .82;
  letter-spacing: -.06em; font-weight: 600; color: var(--tx);
  display: flex; align-items: baseline; gap: .2em;
}
.num__v small { font-size: .2em; letter-spacing: .1em; color: var(--accent-tx); font-family: var(--mono); font-weight: 400; }
.num__k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-tx); margin: 1.1rem 0 .5rem;
}
.num__d { font-size: .95rem; color: var(--tx-2); max-width: 34ch; }

/* --------------------------------------------------------------------------
   16 · Projects — editorial
   -------------------------------------------------------------------------- */
.prj__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-bottom: 1rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.filters button {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .42rem .75rem; border: 1px solid var(--rule); background: none;
  color: var(--tx-3); cursor: pointer; border-radius: 2px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.filters button:hover { color: var(--accent-tx); border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--gr-900); border-color: var(--gr-900); color: var(--iv-100); }
.prj__count { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--tx-3); }

/* Featured case-study block */
.feat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.feat:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }
.feat__no {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  color: var(--accent-tx); margin-bottom: .9rem;
}
.feat__t { font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.03em; margin-bottom: .5rem; }
.feat__t a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-med); }
.feat__t a:hover { background-size: 100% 1px; }
.feat__d { color: var(--tx-2); font-size: 1rem; max-width: 52ch; margin-bottom: 1.25rem; }
.feat__meta { display: grid; gap: .55rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; }
.feat__meta div { display: flex; gap: 1rem; border-top: 1px solid var(--rule-soft); padding-top: .55rem; }
.feat__meta dt { color: var(--tx-3); min-width: 6rem; }
.feat__meta dd { margin: 0; color: var(--tx-2); }
.feat__side { position: relative; }

/* Repository plate — a drawn technical panel instead of a stock image */
.plate {
  position: relative; aspect-ratio: 16 / 10;
  border: 1px solid var(--rule);
  background:
    linear-gradient(180deg, var(--bg-raise), var(--bg-sink));
  overflow: hidden;
  transition: border-color var(--t-med);
}
.plate::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .45;
}
.plate__cn {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 1.5rem; text-align: center;
}
.plate__ini {
  font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .12em; color: var(--tx-2);
  transition: transform var(--t-med), color var(--t-med);
}
.plate__c {
  position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--tx-3); opacity: .55;
}
.plate__c:nth-child(1) { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.plate__c:nth-child(2) { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.plate__c:nth-child(3) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.plate__c:nth-child(4) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.plate__lang {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}
.plate__acc {
  position: absolute; right: 0; top: 0; width: 3px; height: 100%;
  background: var(--cu); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-med);
}
a.prjlink:hover .plate, .feat:hover .plate { border-color: var(--accent); }
a.prjlink:hover .plate__acc, .feat:hover .plate__acc { transform: scaleY(1); }
a.prjlink:hover .plate__ini, .feat:hover .plate__ini { transform: scale(1.04); color: var(--accent-tx); }

/* Secondary project rows */
.rows { border-top: 1px solid var(--rule); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
a.prjlink {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 15rem) 8rem 1.4rem;
  gap: clamp(.75rem, 2vw, 1.75rem); align-items: baseline;
  padding-block: 1.15rem; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: inherit;
  transition: background var(--t-fast), padding-inline var(--t-fast);
}
a.prjlink:hover { background: var(--bg-raise); padding-inline: .6rem; }
.prjlink__no { font-family: var(--mono); font-size: .66rem; color: var(--tx-3); }
.prjlink__n { font-size: 1.02rem; font-weight: 600; letter-spacing: -.014em; }
.prjlink__d { font-size: .88rem; color: var(--tx-3); }
.prjlink__m { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--tx-3); text-transform: uppercase; }
.prjlink__a { font-family: var(--mono); color: var(--tx-3); transition: transform var(--t-fast), color var(--t-fast); }
a.prjlink:hover .prjlink__a { transform: translateX(4px); color: var(--accent-tx); }
@media (max-width: 860px) {
  a.prjlink { grid-template-columns: 2.5rem 1fr 1.2rem; }
  .prjlink__d, .prjlink__m { display: none; }
}

/* States */
.state {
  border: 1px dashed var(--rule);
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center; color: var(--tx-2);
}
.state h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.state p { max-width: 52ch; margin-inline: auto; font-size: .95rem; }
.skel { display: grid; gap: 1rem; }
.skel i { display: block; height: 74px; border: 1px solid var(--rule-soft); background: linear-gradient(100deg, var(--bg-raise) 30%, var(--bg-sink) 50%, var(--bg-raise) 70%); background-size: 220% 100%; animation: shim 1.5s ease-in-out infinite; }
@keyframes shim { to { background-position: -120% 0; } }

/* --------------------------------------------------------------------------
   17 · Contact
   -------------------------------------------------------------------------- */
.chan { border-top: 1px solid var(--rule); }
.chan a, .chan div.ch {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 1.5rem;
  gap: 1.25rem; align-items: baseline;
  padding-block: 1.5rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: padding-inline var(--t-fast), background var(--t-fast);
}
.chan a:hover { padding-inline: .7rem; background: rgba(245,241,234,.04); }
.chan__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-tx); }
.chan__v { font-size: clamp(1rem, 2.2vw, 1.4rem); letter-spacing: -.02em; word-break: break-word; }
.chan__v small { display: block; font-size: .8rem; color: var(--tx-3); letter-spacing: 0; margin-top: .3rem; font-family: var(--sans); }
.chan__a { font-family: var(--mono); color: var(--tx-3); transition: transform var(--t-fast), color var(--t-fast); }
.chan a:hover .chan__a { transform: translateX(6px); color: var(--accent-tx); }
@media (max-width: 640px) { .chan a, .chan div.ch { grid-template-columns: 1fr 1.5rem; } .chan__k { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   18 · Footer
   -------------------------------------------------------------------------- */
.ftr { background: var(--gr-950); color: #8A837A; padding-block: clamp(3rem, 6vw, 4.5rem); font-size: .88rem; }
.ftr a { color: #B9B2A8; text-decoration: none; }
.ftr a:hover { color: var(--iv-100); }
.ftr__top { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; padding-bottom: 2rem; border-bottom: 1px solid rgba(245,241,234,.1); }
.ftr__id { display: flex; gap: 1rem; align-items: flex-start; }
.ftr__mk { width: 76px; flex: none; color: var(--cu-lift); }
.ftr__nm { color: var(--iv-100); font-weight: 600; font-size: 1rem; display: block; }
.ftr__ds { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cu-lift); margin-top: .35rem; display: block; }
.ftr__dm { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #8F8880; margin-top: .2rem; display: block; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.ftr__bot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.5rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: #8F8880; }

/* --------------------------------------------------------------------------
   19 · Document pages (CV / project detail)
   -------------------------------------------------------------------------- */
.doc { padding-block: clamp(7rem, 14vh, 9rem) var(--sec); }
.doc__hd { border-bottom: 1px solid var(--rule); padding-bottom: 2.25rem; margin-bottom: 2.75rem; }
.doc h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); letter-spacing: -.04em; margin-bottom: .3em; }
.blk { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.blk__t {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-tx); padding-bottom: .6rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem;
}
.dl { display: grid; }
.dl__r { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(.4rem, 2vw, 2rem); padding-block: 1rem; border-top: 1px solid var(--rule-soft); }
.dl__r:last-child { border-bottom: 1px solid var(--rule-soft); }
.dl__k { font-weight: 600; font-size: .97rem; }
.dl__v { color: var(--tx-2); font-size: .95rem; }
@media (max-width: 700px) { .dl__r { grid-template-columns: 1fr; gap: .25rem; } }

/* Capability list — Contribution (04). Editorial rules + columns, no cards. */
.cap { display: grid; grid-template-columns: minmax(0, 1fr); }
.cap__i { padding-block: 1.35rem; border-top: 1px solid var(--rule-soft); }
.cap__i:last-child { border-bottom: 1px solid var(--rule-soft); }
.cap__t { font-weight: 600; font-size: 1rem; letter-spacing: -.005em; margin-bottom: .38rem; }
.cap__p { color: var(--tx-2); font-size: .95rem; max-width: 46ch; }
@media (min-width: 1080px) {
  .cap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.75rem); }
  .cap__i:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}

.ent { padding-block: 1.15rem; border-top: 1px solid var(--rule-soft); }
.ent:last-child { border-bottom: 1px solid var(--rule-soft); }
.ent__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: .3rem; }
.ent__t { font-weight: 600; font-size: 1rem; }
.ent__m { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--tx-3); }
.ent p { color: var(--tx-2); font-size: .95rem; }

.words { display: flex; flex-wrap: wrap; gap: .35rem .85rem; }
.words li { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--tx-2); }
.words li::after { content: " ·"; color: var(--tx-3); }
.words li:last-child::after { content: ""; }

/* --------------------------------------------------------------------------
   20 · Custom cursor — desktop, fine pointer only
   -------------------------------------------------------------------------- */
#cur, #curdot { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  html.cursor-on, html.cursor-on * { cursor: none !important; }
  #cur, #curdot {
    display: block; position: fixed; top: 0; left: 0; z-index: 400;
    pointer-events: none; will-change: transform;
  }
  #cur {
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border: 1px solid var(--cu); border-radius: 50%;
    transition: width 180ms ease, height 180ms ease, margin 180ms ease, opacity 180ms ease, background 180ms ease;
    opacity: .75;
  }
  #cur.hot { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--cu-wash); opacity: 1; }
  #curdot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--cu); border-radius: 50%; }
}

/* --------------------------------------------------------------------------
   21 · Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv, .rv-l, .fade, .mask > span { opacity: 1 !important; transform: none !important; }
  .rv-line { transform: scaleX(1) !important; }
  .draw { stroke-dashoffset: 0 !important; }
  .pulse { display: none !important; }
  .hero { min-height: auto; }
  #loader { display: none !important; }
  html.cursor-on, html.cursor-on * { cursor: auto !important; }
  #cur, #curdot { display: none !important; }
}

/* --------------------------------------------------------------------------
   22 · Print
   -------------------------------------------------------------------------- */
@media print {
  :root { --accent-tx: #000; --tx-2: #222; --tx-3: #444; }
  .hdr, #loader, #progress, #cur, #curdot, .motto, .btns, .btn, .prj__bar, .ftr__nav { display: none !important; }
  body, .dark, .hero { background: #fff !important; color: #000 !important; }
  .hero { min-height: auto; padding-block: 1rem; }
  .band, .doc { padding-block: 1rem; page-break-inside: avoid; }
  .rv, .rv-l, .fade, .mask > span { opacity: 1 !important; transform: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------------------------------
   23 · No-JS fallback — everything visible, nothing depends on motion
   -------------------------------------------------------------------------- */
html.no-js .rv, html.no-js .rv-l, html.no-js .fade, html.no-js .mask > span { opacity: 1 !important; transform: none !important; }
html.no-js .rv-line { transform: scaleX(1) !important; }
html.no-js .draw { stroke-dashoffset: 0 !important; }
html.no-js #loader { display: none !important; }
html.no-js .hdr { position: sticky; background: var(--sn-050); color: var(--gr-900); border-bottom-color: var(--sn-400); }
html.no-js .navwrap { display: block; }
html.no-js .chain__row .chain__k, html.no-js .ladder__s .ladder__n { color: var(--accent-tx); }
html.no-js .ladder__s::before { transform: scale(1); opacity: 1; }
html.no-js .flowmap__v { transform: scaleY(1); }

/* Project thumbnail — used when data/project-details.json supplies one.
   Same frame and proportions as the generated monogram plate. */
.plate--img { display: block; }
.plate--img::before { content: none; }
.plate--img img { width: 100%; height: 100%; object-fit: cover; }