/* ==========================================================================
   Salsabeel Kobattey — portfolio
   --------------------------------------------------------------------------
   Direction: luxury engineering. Precision hardware presented with the visual
   restraint of a fine instrument.

   Two accents, not eight. Champagne gold (warm, human, the person) and a cool
   instrument cyan (measurement, data, the machine). A duotone reads as a
   decision; a rainbow reads as decoration.

   Glass appears on exactly three surface types — the nav, the spec readouts,
   and the evidence panels. Never more than three layers deep, and never
   under body copy: refraction is what makes glass illegible.

   NAMING NOTE — do not reintroduce a variable called --pad here or in
   pcb.css. It previously existed in BOTH files, once as the page gutter and
   once as a copper colour. pcb.css loads second, so the gutter resolved to a
   hex colour, `padding: 0 #0A1420` was invalid, and every browser silently
   dropped it. Result: zero side margin on any screen under 1240px.
   The gutter is now --gutter; the copper colour is --copper.
   ========================================================================== */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  /* ink */
  --ink:      #04080F;
  --ink-2:    #070D18;
  --ink-3:    #0C1524;

  /* type */
  --fg:       #F2EFE7;
  --fg-2:     #9FAAB9;
  --fg-3:     #5F6B7C;

  /* warm accent — the person */
  --gold:     #C9A45C;
  --gold-hi:  #EBD298;
  --gold-lo:  #8F6F35;

  /* cool accent — the measurement */
  --cyan:     #6FB6C4;
  --cyan-hi:  #9FD8E2;

  /* glass */
  --glass-bg:     linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 46%, rgba(255,255,255,.05));
  --glass-edge:   rgba(255,255,255,.11);
  --glass-spec:   inset 0 1px 0 rgba(255,255,255,.2);
  --glass-glow:   inset 0 0 40px rgba(120,175,235,.05);
  --glass-drop:   0 24px 60px rgba(0,0,0,.46), 0 2px 8px rgba(0,0,0,.3);

  --hair:     rgba(255,255,255,.07);
  --hair-2:   rgba(255,255,255,.13);

  /* Container width scales with the display — see the large-screen block at
     the end of this file. A fixed 1240px leaves ~660px of dead margin each
     side on a 27" screen. */
  --max:      1240px;

  /* THE PAGE GUTTER. Never below 22px: at 20px the cards sat almost against
     the bezel on a phone, which reads as broken rather than edge-to-edge. */
  --gutter:   clamp(22px, 5vw, 56px);

  --sec:      clamp(72px, 10vw, 160px);

  /* Fixed nav height, so anchored sections can clear it. */
  --navh:     clamp(64px, 8vw, 84px);

  --serif:    'Instrument Serif', Georgia, serif;
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                 /* safety net, not the fix */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Visible keyboard focus everywhere. Without this the whole site is
   unusable by keyboard, since every interactive element is a bare <a>. */
:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: #000; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding-left:  var(--gutter);
  padding-right: var(--gutter);
}
.mono { font-family: var(--mono); }

/* Anchored sections must clear the fixed nav, or "Work" scrolls the heading
   underneath it. */
[id] { scroll-margin-top: calc(var(--navh) + 24px); }

/* ------------------------------------------------------------- background
   Four independent layers. Glass needs something behind it or it is just
   tinted flat colour — but the structure stays low-contrast so it never
   competes with text. */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg-grad {
  position: absolute; inset: 0;
  background: linear-gradient(174deg, #04080F 0%, #071021 30%, #050B16 58%, #08101F 82%, #04080F 100%);
}
/* engineering substrate — circuit geometry, barely there */
.bg-mesh {
  position: absolute; inset: 0;
  background-image:
    url('../assets/img/circuit.svg'),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 1500px 1125px, 80px 80px, 80px 80px;
  opacity: .42;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 26%, #000 10%, rgba(0,0,0,.5) 58%, transparent 88%);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 26%, #000 10%, rgba(0,0,0,.5) 58%, transparent 88%);
}
.bg-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.bg-glow-a { top: -18%; right: -8%; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
             background: radial-gradient(circle, rgba(201,164,92,.13), transparent 66%); }
.bg-glow-b { top: 42%; left: -14%; width: 58vw; height: 58vw; max-width: 820px; max-height: 820px;
             background: radial-gradient(circle, rgba(64,124,180,.14), transparent 66%); }
/* grain stops the gradients from banding on wide screens */
.bg-grain {
  position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- glass */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-spec), var(--glass-glow), var(--glass-drop);
}

/* ------------------------------------------------------------------- type */
h1, h2, h3 { font-weight: 400; line-height: 1.06; letter-spacing: -.02em; }

.eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5.5vw, 72px); }
.sec-head h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 6.4vw, 68px);
  letter-spacing: -.015em;
  margin-top: 10px;
}
/* The Approach heading is a full sentence rather than a title, so it needs a
   smaller size and a measure — a 68px sentence is a wall, not a headline. */
.approach .sec-head h2 { font-size: clamp(23px, 3.6vw, 40px); line-height: 1.24; max-width: 20ch; font-style: italic; }
.sec-lede { color: var(--fg-2); font-size: clamp(14.5px, 1.9vw, 17px); margin-top: 18px; max-width: 56ch; }

.section { padding: var(--sec) 0; position: relative; z-index: 2; }

/* -------------------------------------------------------------------- nav */
.nav { position: fixed; inset: 12px 0 auto; z-index: 100; }
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  /* The nav sits inside the same gutter as the content, so its left edge
     lines up with the page rather than floating independently. */
  width: calc(100% - (var(--gutter) * 2));
  padding: 0 clamp(14px, 2.4vw, 26px);
  height: clamp(52px, 6.4vw, 60px);
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 15px;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav.stuck .nav-inner { opacity: 1; transform: none; }
.nav-mark {
  font-family: var(--mono); font-size: 13px; letter-spacing: .2em; font-weight: 500;
  background: linear-gradient(105deg, var(--gold-lo), var(--gold) 30%, var(--gold-hi) 48%, #FFF6DE 52%, var(--gold-hi) 58%, var(--gold) 76%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
}
.nav-links { display: flex; gap: clamp(16px, 2.6vw, 32px); }
.nav-links a {
  font-size: 12.5px; letter-spacing: .07em; color: var(--fg-2);
  position: relative; padding: 4px 0; transition: color .3s var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .34s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 11px 7px; }
.nav-toggle span { display: block; height: 1.5px; background: var(--fg); border-radius: 2px; transition: transform .34s var(--ease), opacity .3s; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; z-index: 2; padding: clamp(112px, 16vw, 190px) 0 clamp(46px, 7vw, 80px); }
.hero-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
/* No portrait set (or the file failed to load) — collapse to one column
   rather than leaving a hole where an image should be. */
.hero-wrap.no-portrait { grid-template-columns: 1fr; max-width: 900px; }
.hero-wrap.no-portrait .portrait { display: none; }

.hero-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--fg-3); letter-spacing: .14em; text-transform: uppercase; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 9.2vw, 108px);
  line-height: .95; letter-spacing: -.028em;
  margin: 18px 0 0;
}
.hero h1 .l2 { display: block; color: var(--fg-2); }
.hero-role { font-size: clamp(15px, 2vw, 18px); color: var(--fg); margin-top: 20px; font-weight: 500; }

.lanes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lanes li {
  font-size: 11.5px; letter-spacing: .05em; color: var(--fg-2);
  padding: 5px 12px; border: 1px solid var(--hair); border-radius: 999px;
}

.hero-tagline {
  margin-top: clamp(22px, 3.4vw, 34px);
  font-size: clamp(15.5px, 2.1vw, 20px);
  line-height: 1.55; color: var(--fg-2); max-width: 40ch;
  padding-left: 18px; border-left: 2px solid rgba(201,164,92,.4);
}

.hero-cta { display: flex; gap: 10px; margin-top: clamp(26px, 4vw, 40px); flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 11px;
  font-size: 13px; letter-spacing: .05em; font-family: inherit; color: inherit;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,.035);
  cursor: pointer; transition: background .34s var(--ease), border-color .34s var(--ease), transform .34s var(--ease);
}
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(201,164,92,.5); transform: translateY(-2px); }
.btn-primary { border-color: rgba(201,164,92,.45); color: var(--gold-hi); background: rgba(201,164,92,.07); }
.btn-primary:hover { background: rgba(201,164,92,.13); border-color: var(--gold); }
.btn svg { width: 14px; height: 14px; flex: none; }

/* ==========================================================================
   PORTRAIT — THREE MODES. PICK ONE.
   --------------------------------------------------------------------------
   Exactly one of the three blocks below should be uncommented. Each needs a
   matching `portrait:` value in js/content.js. Nothing else changes.

     MODE A — CUT-OUT              portrait: "assets/portrait.webp"
       Background removed. No mask, no darkening, full contrast. The alpha
       channel ends the image where the subject ends, so there is nothing to
       hide. Needs a PNG or WebP with transparency.

     MODE B — DISSOLVED PHOTO      portrait: "assets/portrait.jpg"
       The whole photograph, edges feathered by two intersected masks and the
       background pushed back with a brightness cut. Works when the photo's
       backdrop is already near the page colour. Against a lit room the mask
       has to be pulled so tight it eats the subject, and the darkening needed
       to make the room recede also drains the face.

     MODE C — FRAMED PHOTO         portrait: "assets/portrait.jpg"
       The whole photograph, unmodified, inside the same glass card used by
       every project image on the site. No mask, no darkening — the frame does
       the work of separating the photo from the page instead of a gradient.
       Consistent with the rest of the page's material language.

   MODE C is active. To switch, comment it out and uncomment the one you want.
   ========================================================================== */

.portrait { position: relative; width: 100%; isolation: isolate; }
.portrait img { width: 100%; height: auto; display: block; }


/* ----------------------------------------------------- MODE A — CUT-OUT --
.portrait img {
  max-height: min(74vh, 640px);
  object-fit: contain;
  
  filter: contrast(1.03) drop-shadow(0 26px 44px rgba(0,0,0,.55));
}

.portrait::before {
  content: ''; position: absolute; inset: -12% -14% -6%; z-index: -1;
  background:
    radial-gradient(ellipse 46% 40% at 68% 22%, rgba(201,164,92,.30), transparent 68%),
    radial-gradient(ellipse 58% 50% at 30% 62%, rgba(64,124,180,.20), transparent 72%),
    radial-gradient(ellipse 40% 46% at 50% 46%, rgba(255,255,255,.05), transparent 70%);
  filter: blur(40px);
}
.portrait::after {
  content: ''; position: absolute; z-index: -1; right: -2%; top: 2%;
  width: 84%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(201,164,92,.28);
  border-bottom-color: transparent; border-left-color: transparent;
  transform: rotate(15deg);
}
------------------------------------------------------ end MODE A ---------- */


/* ----------------------------------------------- MODE B — DISSOLVED PHOTO --
.portrait img {
  max-height: min(72vh, 620px);
  object-fit: contain;
  filter: saturate(.74) contrast(1.06) brightness(.88);
  -webkit-mask-image:
    radial-gradient(ellipse 56% 72% at 50% 42%, #000 32%, rgba(0,0,0,.82) 60%, rgba(0,0,0,.2) 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 58%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 56% 72% at 50% 42%, #000 32%, rgba(0,0,0,.82) 60%, rgba(0,0,0,.2) 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.portrait::before {
  content: ''; position: absolute; inset: -14% -10%; z-index: -1;
  background:
    radial-gradient(ellipse 54% 44% at 72% 18%, rgba(201,164,92,.26), transparent 66%),
    radial-gradient(ellipse 60% 52% at 28% 68%, rgba(64,124,180,.18), transparent 70%);
  filter: blur(34px);
}
.portrait::after {
  content: ''; position: absolute; z-index: -1; right: 0; top: 3%;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(201,164,92,.26);
  border-bottom-color: transparent; border-left-color: transparent;
  transform: rotate(15deg);
}
------------------------------------------------------ end MODE B ---------- */


/* ---------------------------------------------------- MODE C — FRAMED PHOTO */
.portrait {
  border-radius: 20px; overflow: hidden;
  padding: clamp(9px, 1vw, 13px);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-spec), var(--glass-glow), 0 26px 60px rgba(0,0,0,.5);
}
.portrait img {
  border-radius: 12px;
  max-height: min(70vh, 600px);
  object-fit: cover;
  filter: saturate(.92) contrast(1.04) brightness(.96);
}
.portrait::after {
  content: ''; position: absolute; right: 16px; top: 16px; z-index: 2;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(111,182,196,.4);
}
/* ------------------------------------------------- end MODE C ------------- */

/* stat rail */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 20px);
  margin-top: clamp(40px, 6vw, 72px);
}
.stat-v {
  font-family: var(--mono); font-size: clamp(19px, 3vw, 30px); font-weight: 500; letter-spacing: -.02em;
  background: linear-gradient(105deg, var(--gold-lo), var(--gold) 28%, var(--gold-hi) 48%, #FFF6DE 53%, var(--gold-hi) 60%, var(--gold) 78%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
}
.stat-k { font-size: 10.5px; color: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; line-height: 1.4; }

/* --------------------------------------------------------------- evidence */
.evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.ev { border-radius: 18px; padding: clamp(22px, 2.8vw, 34px); position: relative; overflow: hidden; }
.ev::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}
.ev-metric {
  font-family: var(--mono); font-size: clamp(28px, 4.4vw, 46px); font-weight: 500;
  color: var(--cyan-hi); letter-spacing: -.03em; line-height: 1;
}
.ev-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 12px 0 18px; }
.ev-find { font-size: 14.5px; color: var(--fg-2); line-height: 1.68; }

/* ---------------------------------------------------------------- shared */
.row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.row-tags i {
  font-style: normal; font-size: 10.5px; letter-spacing: .05em;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hair); color: var(--fg-3);
}

.proj-num {
  font-family: var(--mono); font-weight: 400; line-height: 1;
  font-size: clamp(15px, 1.8vw, 19px);
  color: transparent; -webkit-text-stroke: 1px rgba(201,164,92,.45);
}
.proj-domain { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.proj-year { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); margin-left: auto; }
.proj-role { font-size: 12px; color: var(--fg-3); margin-top: 12px; letter-spacing: .05em; }
.proj-cap { font-size: 12.5px; color: var(--fg-3); margin: 12px auto 0; max-width: min(760px, 100%); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tag { font-size: 11px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hair); color: var(--fg-2); }

/* the finding pull-out — project pages only */
.finding { padding: 20px 22px; border-radius: 14px;
           border-left: 2px solid var(--cyan); background: rgba(111,182,196,.06); }
.finding-k { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.finding p { font-size: clamp(15px, 1.9vw, 17.5px); color: var(--fg); margin-top: 9px; line-height: 1.56; }

/* readout cells — ONE definition, used by both the home page readout and the
   case-study readout. Previously declared in two files with different sizes. */
.rd-k { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: #93A0B1; line-height: 1.4; }
.rd-v { font-family: var(--mono); font-size: clamp(12px, 1.4vw, 14.5px); color: var(--cyan-hi); margin-top: 6px; line-height: 1.35; }

/* ============================================================ case study == */
.is-project main { padding-top: clamp(92px, 12vw, 130px); position: relative; z-index: 2; }

.case-head { padding-bottom: clamp(24px, 3.4vw, 40px); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
        letter-spacing: .08em; color: var(--fg-3); transition: color .3s var(--ease); }
.back svg { width: 15px; height: 15px; }
.back:hover { color: var(--gold); }

.case-meta { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.case-meta .proj-num { font-size: clamp(26px, 4vw, 44px); }
.case-head h1 { font-family: var(--serif); font-size: clamp(30px, 6vw, 62px); margin: 16px 0 12px; letter-spacing: -.02em; }
.case-sub { font-size: clamp(15px, 2vw, 19px); color: var(--fg-2); max-width: 52ch; }

/* Case images show WHOLE — never cropped. They are simply given a narrower
   column than the text so a tall photograph does not dominate the screen. */
.case-hero {
  border-radius: 18px; overflow: hidden; background: var(--ink-2);
  border: 1px solid var(--hair);
  max-width: min(760px, 100%); margin: 0 auto;
}
.case-hero img { width: 100%; height: auto; display: block; }

/* SOLID readout, not glass. Glass over a photograph gave a translucent panel
   whose label text sat on whatever happened to be behind it. A readout is an
   instrument display: it needs a fixed dark backing so contrast is a
   constant, not a coincidence. */
.readout-solid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: clamp(16px, 2.4vw, 26px) auto 0; max-width: min(760px, 100%);
  background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden;
}
.rd { background: #060C16; padding: clamp(13px, 1.8vw, 20px); }

.case-finding { margin: clamp(26px, 4vw, 40px) auto; max-width: min(760px, 100%); }

.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.case-grid h4 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; font-weight: 500; }
.case-grid p { font-size: 15px; color: var(--fg-2); }

.shots { margin-top: clamp(40px, 6vw, 72px); }
.shots-h { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
           margin-bottom: 22px; font-weight: 500; }
.shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); background: var(--ink-2);
        margin: 0 auto 20px; max-width: min(700px, 100%); }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { font-size: 12.5px; color: var(--fg-3); padding: 14px 18px; border-top: 1px solid var(--hair); }

.case-note { margin-top: 26px; }
.proj-links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }
.note { font-size: 12.5px; color: var(--fg-3); font-style: italic; }

.case-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
            margin: clamp(46px, 7vw, 90px) 0 clamp(30px, 4vw, 50px);
            padding-top: clamp(24px, 3.4vw, 36px); border-top: 1px solid var(--hair); }
.case-nav a { display: block; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--hair);
              transition: border-color .35s var(--ease), background .35s var(--ease); }
.case-nav a:hover { border-color: rgba(201,164,92,.45); background: rgba(255,255,255,.03); }
.case-nav .ta-r { text-align: right; }
.case-nav-k { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.case-nav-t { display: block; font-family: var(--serif); font-size: clamp(15px, 2vw, 19px); margin-top: 7px; }

.case-miss { padding: 100px 0; text-align: center; }
.case-miss h1 { font-family: var(--serif); font-size: clamp(30px, 5vw, 50px); }
.case-miss .sec-lede { margin-left: auto; margin-right: auto; }
.case-miss .btn { margin-top: 26px; }

/* ------------------------------------------------------------- experience */
.track { position: relative; padding-left: clamp(20px, 3vw, 36px); }
.track::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px;
                 background: linear-gradient(to bottom, transparent, var(--hair-2) 12%, var(--hair-2) 88%, transparent); }
.exp { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: clamp(18px, 3.4vw, 44px); padding: clamp(24px, 3.6vw, 40px) 0; }
.exp + .exp { border-top: 1px solid var(--hair); }
.exp-dates { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: .06em; }
.exp-tag { font-size: 11.5px; color: var(--fg-3); margin-top: 10px; }
.exp-role { font-size: clamp(17px, 2.2vw, 20px); font-weight: 500; }
.exp-org { font-size: 13.5px; color: var(--fg-2); margin-top: 5px; }
.exp-pts { list-style: none; margin-top: 18px; }
.exp-pts li { font-size: 14px; color: var(--fg-2); position: relative; margin-bottom: 11px; }

/* ------------------------------------------------------------------ about */
.about-lede { font-family: var(--serif); font-size: clamp(20px, 3vw, 30px); line-height: 1.42; max-width: 30ch; color: var(--fg); margin-bottom: clamp(34px, 5vw, 60px); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 26px); align-items: start; }
.col { border: 1px solid var(--hair); border-radius: 16px; padding: clamp(20px, 2.6vw, 28px);
       background: linear-gradient(160deg, rgba(12,21,36,.7), rgba(5,11,22,.82)); }
.col h4 { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 500; }
.edu-deg { font-size: 15.5px; font-weight: 500; }
.edu-m { font-size: 13px; color: var(--fg-2); margin-top: 6px; }
.edu-c { font-size: 12px; color: var(--fg-3); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.edu-p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.edu-p-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.edu-p-top .mono { color: var(--cyan); }
.edu-p-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 3px; }
.sk + .sk { margin-top: 15px; }
.sk-g { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.sk-i { font-size: 13px; color: var(--fg-2); }

/* leadership list — replaced the named-competition table. Same via markers
   as the experience bullets, so the two columns read as one system. */
.lead { list-style: none; }
.lead li { font-size: 13px; color: var(--fg-2); line-height: 1.6; position: relative; }
.lead li + li { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--hair); }

/* ---------------------------------------------------------------- contact */
.contact { text-align: center; }
.contact h2 { margin-top: 0; }
.contact-h { font-family: var(--serif); font-size: clamp(32px, 7vw, 76px); margin: 18px 0 22px; }
.contact-p { color: var(--fg-2); max-width: 48ch; margin: 0 auto 34px; font-size: clamp(14.5px, 1.9vw, 16.5px); }
.contact-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.contact-note { font-size: 12px; color: var(--fg-3); margin-top: 18px; letter-spacing: .04em; }

.footer { border-top: 1px solid var(--hair); padding: 28px 0; position: relative; z-index: 2; }
.footer-in { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-3); }

/* ----------------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* registration marks — a quiet nod to PCB fiducials */
.approach { position: relative; }
.approach::before, .approach::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: rgba(201,164,92,.3); border-style: solid;
}
.approach::before { top: 34px; left: max(20px, calc(50% - var(--max)/2 + 12px)); border-width: 1px 0 0 1px; }
.approach::after  { bottom: 34px; right: max(20px, calc(50% - var(--max)/2 + 12px)); border-width: 0 1px 1px 0; }

/* ================================================================ responsive */
@media (max-width: 1080px) {
  .evidence { grid-template-columns: 1fr; }
  .cols { grid-template-columns: repeat(2, 1fr); }
  .cols .col:last-child { grid-column: 1 / -1; }
  .readout-solid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .hero { padding-top: clamp(100px, 22vw, 140px); }
  .hero-wrap { grid-template-columns: 1fr; gap: 30px; }
  /* Stacked, the bottom of the cut-out fades into the text below it, so it is
     pulled up rather than left sitting on empty space. */
  .portrait { order: -1; max-width: min(272px, 60vw); margin: 0 auto -18px; }
  .case-grid { grid-template-columns: 1fr; }
  .exp { grid-template-columns: 1fr; gap: 12px; }
  .approach::before, .approach::after { display: none; }

  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 16px; padding: 20px 22px;
    background: rgba(7,13,24,.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--hair); border-radius: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 14px; padding: 6px 0; }
  .nav-toggle { display: block; margin-right: -7px; }
  .nav .nav-inner { opacity: 1; transform: none; position: relative; }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .cols { grid-template-columns: 1fr; }
  .cols .col:last-child { grid-column: auto; }
  .case-nav { grid-template-columns: 1fr; }
  .case-nav .ta-r { text-align: left; }
  .hero-tagline { padding-left: 14px; }
  .shot figcaption { padding: 12px 14px; }
}

@media (max-width: 420px) {
  body { font-size: 15.5px; }
  .btn { width: 100%; justify-content: center; }
  .contact-links .btn { width: 100%; }
  .readout-solid { grid-template-columns: 1fr 1fr; }
}

@media (hover: none) {
  .band:hover .band-figure img { transform: none; }
  .btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  body { background: #fff; color: #111; }
  .bg, .nav, .hero-cta, .contact-links, .conn-wrap, .case-nav { display: none; }
  /* the hero frame is a screen treatment; on paper it is just a photo */
  .portrait { background: none !important; box-shadow: none !important; border: 1px solid #ccc; padding: 0 !important; }
  .portrait img { -webkit-mask-image: none; mask-image: none; filter: none !important; }
  .band, .col, .ev, .shot { page-break-inside: avoid; border: 1px solid #ccc; background: none; box-shadow: none; }
  .eyebrow, .proj-domain, .case-grid h4, .shots-h, .exp-dates, .finding-k { color: #8a6d2f !important; }
  p, .sk-i, .exp-pts li, .lead li { color: #333 !important; }
  .proj-num { -webkit-text-stroke: 1px #999; }
}

/* ==========================================================================
   Large displays — the container widens in steps rather than staying fixed,
   but stops well short of full width: a line of body text longer than about
   75 characters is measurably harder to read.
   ========================================================================== */
@media (min-width: 1440px) { :root { --max: 1340px; } }

@media (min-width: 1700px) {
  :root { --max: 1460px; --sec: clamp(110px, 9vw, 190px); }
  .hero h1 { font-size: 116px; }
  .sec-head h2 { font-size: 74px; }
  .sec-lede, .case-grid p, .exp-pts li { max-width: 68ch; }
  .band-sub { max-width: 46ch; }
}

@media (min-width: 2000px) {
  :root { --max: 1560px; }
  body { font-size: 17px; }
  .hero h1 { font-size: 128px; }
}