/* ============================================================================
   css/app.css
   ----------------------------------------------------------------------------
   One dark identity for the whole site. Variation between pages comes from
   surface tone, composition and imagery, never from switching to a light page.

   SPACING SCALE
   Everything uses --s1 to --s9. If you need a gap, take it from the scale
   instead of inventing a number, and the rhythm stays consistent.
   ========================================================================== */

:root{
  /* surfaces, darkest to lightest */
  --bg:       #0E1416;   /* page */
  --bg-2:     #151D20;   /* raised panels, cards, logo rows */
  --bg-3:     #1C2629;   /* secondary surface, hover, tiles */
  --line:     rgba(242,239,232,.14);
  --line-2:   rgba(242,239,232,.075);

  /* text */
  --fg:       #F2EFE8;
  --fg-2:     #AEB5B4;
  --fg-3:     #838C8C;

  /* accent, for emphasis only */
  --flare:    #DD5327;
  --flare-2:  #F2805C;
  --deep:     #1B7A72;

  /* the tile colour that keeps every logo legible on a dark page */
  --plate:    #F1EEE6;

  /* type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* SPACING SCALE */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  /* rhythm between big blocks, fluid */
  --section: clamp(48px, 5.4vw, 88px);
  --gap:     clamp(24px, 3.4vw, 56px);

  --pad:  clamp(18px, 4vw, 72px);
  --max:  1280px;
  --head: 64px;
}

/* Pages carry data-theme. Both values are dark. "slate" is a slightly cooler,
   slightly lighter surface used by the reading pages, so navigating between
   sections feels like a change of room, not a change of building. */
body[data-theme="slate"]{
  --bg:   #121A1D;
  --bg-2: #192327;
  --bg-3: #202C31;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + var(--s5)); }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--text); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.025em; }
p{ margin:0 0 var(--s4); }
p:last-child{ margin-bottom:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2.5px solid var(--flare); outline-offset:3px; }
::selection{ background:var(--flare); color:#fff; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--pad); top:10px; z-index:200; background:var(--flare); color:#fff; padding:var(--s3) var(--s4); }

/* --- type ------------------------------------------------------------------ */
.mega{ font-family:var(--display); font-size:clamp(44px,6.3vw,92px); line-height:.94; letter-spacing:-.035em; }
.h1{ font-size:clamp(32px,4.8vw,62px); }
.h2{ font-size:clamp(26px,3.2vw,40px); }
.h3{ font-size:clamp(19px,2.1vw,26px); }
.eyebrow{ font-family:var(--text); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.lead{ font-size:clamp(17px,1.45vw,19.5px); line-height:1.55; color:var(--fg); }
.body p{ color:var(--fg-2); max-width:60ch; }
.meta{ font-size:13.5px; line-height:1.5; color:var(--fg-3); }
.num{ font-variant-numeric:tabular-nums; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================================
   HEADER
   ========================================================================== */
.head{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2);
}
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); height:var(--head); }
.brand{ display:flex; align-items:center; gap:var(--s3); text-decoration:none; white-space:nowrap; }
.brand-dot{ width:9px; height:9px; background:var(--flare); border-radius:50%; flex:none; }
.brand b{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{ text-decoration:none; font-size:14.5px; color:var(--fg-2); padding:var(--s2) var(--s3); border-radius:3px; }
.nav a:hover{ color:var(--fg); background:var(--bg-3); }
.nav a[aria-current="page"]{ color:var(--fg); font-weight:600; }
.nav a[aria-current="page"]::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--flare); border-radius:50%; margin-right:7px; vertical-align:1px; }
.head-cv{ display:inline-flex; align-items:center; margin-left:var(--s3); padding:9px var(--s4); font-size:14px; font-weight:600; text-decoration:none; background:var(--fg); color:var(--bg); border-radius:3px; }
.head-cv:hover{ background:var(--flare); color:#fff; }
.burger{ display:none; padding:9px var(--s3); border:1px solid var(--line); border-radius:3px; font-size:13.5px; font-weight:600; }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6); }
.btn{
  display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none;
  font-size:15px; font-weight:600; padding:13px 20px; border-radius:3px;
  border:1px solid var(--line); color:var(--fg);
}
.btn:hover{ border-color:var(--fg-2); background:var(--bg-3); }
.btn-key{ background:var(--flare); border-color:var(--flare); color:#fff; }
.btn-key:hover{ background:#C7431C; border-color:#C7431C; color:#fff; }

/* ============================================================================
   LOGO SYSTEM
   Every logo sits on a light plate. Source files have different aspect ratios,
   backgrounds and padding; the plate plus object-fit makes them read as one set
   without touching the original files.
   ========================================================================== */
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:84px; min-width:150px; padding:14px 20px;
  background:var(--plate); border-radius:4px; text-decoration:none;
  border:1px solid rgba(14,20,22,.08); overflow:hidden;
}
.logo img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
.logo-word{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em; color:#1A2224; text-align:center; line-height:1.2; }
a.logo:hover{ box-shadow:0 0 0 2px var(--flare); }
.logo-dark{ background:var(--bg-3); border-color:var(--line); }
.logo-dark .logo-word{ color:var(--fg); }
.logo-sm{ height:62px; min-width:110px; padding:10px 15px; }
.logo-sm .logo-word{ font-size:13px; }
.logo-lg{ height:128px; min-width:220px; padding:20px 28px; }
.logo-lg .logo-word{ font-size:19px; }

.logos{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.logo-set + .logo-set{ margin-top:var(--s5); }
.logo-set h4{ font-family:var(--text); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--s3); }
.logo-note{ margin-top:var(--s3); font-size:13px; line-height:1.5; color:var(--fg-3); max-width:60ch; }

/* ============================================================================
   HOME
   ========================================================================== */
.hero-in{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.74fr); gap:var(--gap); align-items:center; padding-block:clamp(32px,4.6vw,76px) clamp(28px,3.6vw,56px); }
.hero-name{ margin-bottom:var(--s5); }
.hero-name span{ display:block; }
.hero-name .l2{ padding-left:.07em; }
.hero-hook{ font-family:var(--display); font-size:clamp(21px,2.5vw,33px); line-height:1.15; letter-spacing:-.02em; color:var(--fg); margin:0 0 var(--s5); max-width:22ch; }
.hero-hook em{ font-style:normal; color:var(--flare-2); }
.hero-roles{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s5); }
.hero-roles li{ font-size:13px; font-weight:500; color:var(--fg-2); border:1px solid var(--line); padding:5px 11px; border-radius:100px; }
.hero-lede{ max-width:54ch; }
.hero-lede p{ color:var(--fg-2); }

.portrait{ position:relative; }
.portrait::after{ content:""; position:absolute; inset:auto -12px -12px auto; width:60%; height:56%; background:var(--flare); z-index:0; border-radius:2px; }
.portrait-box{ position:relative; z-index:1; aspect-ratio:4/5; overflow:hidden; background:var(--bg-2); border-radius:2px; }
.portrait-box img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.portrait-cap{ position:absolute; z-index:2; left:0; bottom:0; background:var(--bg); padding:var(--s3) var(--s4) 0 0; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }

.facts{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fact{ padding:var(--s5) var(--s5) var(--s5) 0; border-right:1px solid var(--line-2); }
.fact:last-child{ border-right:0; }
.fact b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(24px,2.8vw,36px); letter-spacing:-.03em; line-height:1; }
.fact span{ display:block; margin-top:var(--s2); font-size:13.5px; line-height:1.45; color:var(--fg-3); max-width:24ch; }

.sect{ padding-block:var(--section); }
.sect + .sect{ border-top:1px solid var(--line-2); }
.sect-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--gap); }
.sect-head p{ max-width:44ch; margin:0; }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.tile{ display:block; text-decoration:none; }
.tile-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); border-radius:2px; }
.tile-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .tile-media img{ transform:scale(1.04); }
.tile-kind{ position:absolute; left:0; top:0; background:var(--flare); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; }
.tile h3{ margin-top:var(--s4); font-size:clamp(19px,1.8vw,24px); }
.tile p{ margin-top:var(--s2); font-size:14.5px; line-height:1.5; color:var(--fg-3); max-width:40ch; }
.tile-go{ display:inline-block; margin-top:var(--s3); font-size:13.5px; font-weight:600; color:var(--flare-2); }

.photoband{ position:relative; }
.band-img{ position:relative; aspect-ratio:21/9; overflow:hidden; background:var(--bg-2); border-radius:2px; }
.band-img img{ width:100%; height:100%; object-fit:cover; }
.band-note{ display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:var(--gap); margin-top:var(--s5); }

.routes{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:3px; }
.route{ background:var(--bg); padding:var(--s5); text-decoration:none; }
.route:hover{ background:var(--bg-2); }
.route b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(18px,1.8vw,23px); letter-spacing:-.02em; }
.route span{ display:block; margin-top:var(--s2); font-size:14.5px; line-height:1.5; color:var(--fg-3); max-width:44ch; }

/* ============================================================================
   PAGE HEADERS
   ========================================================================== */
.phead{ padding-block:clamp(30px,4vw,62px) clamp(20px,2.4vw,34px); }
.phead-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:var(--gap); align-items:end; }
.phead .eyebrow{ display:block; margin-bottom:var(--s3); }
.phead p{ color:var(--fg-2); max-width:50ch; margin:0; }

/* ============================================================================
   PROJECTS INDEX
   ========================================================================== */
.group{ padding-block:clamp(30px,3.4vw,56px); border-top:1px solid var(--line); }
.group-head{ display:flex; align-items:baseline; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s6); }
.group-head h2{ font-size:clamp(23px,2.7vw,36px); }
.group-head .meta{ max-width:40ch; }

.pcard{ display:block; text-decoration:none; }
.pcard + .pcard{ margin-top:var(--s8); }
.pcard-media{ position:relative; aspect-ratio:16/7; overflow:hidden; background:var(--bg-2); border-radius:2px; }
.pcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard-media img{ transform:scale(1.03); }
.pcard-play{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:var(--s2); background:var(--flare); color:#fff; font-size:12.5px; font-weight:700; padding:8px 13px; border-radius:2px; }
.pcard-foot{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto; gap:var(--gap); align-items:start; padding-top:var(--s5); }
.pcard-foot h3{ font-size:clamp(24px,2.9vw,38px); }
/* metadata sits tight under the title so it reads as one block */
.pcard-kind{ margin-top:6px; color:var(--fg-2); font-size:15px; }
.pcard-line{ margin-top:4px; font-size:13.5px; color:var(--fg-3); }
.pcard-blurb{ color:var(--fg-2); font-size:15.5px; line-height:1.55; margin:0; }
.pcard-go{ font-size:14px; font-weight:700; color:var(--flare-2); white-space:nowrap; padding-top:6px; }
.tagline{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--flare-2); border:1px solid var(--flare); padding:4px 9px; border-radius:2px; margin-bottom:var(--s3); }

.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-top:var(--s8); }
.mini{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:3px; padding:var(--s6); }
.mini h3{ font-size:clamp(19px,2vw,25px); }
.mini .pcard-kind{ font-size:14.5px; }
.mini-body{ margin-top:var(--s4); }
.mini-body p{ color:var(--fg-2); font-size:15px; line-height:1.55; }
.mini .logos{ margin-top:var(--s4); }

/* ============================================================================
   PROJECT DETAIL
   ========================================================================== */
.back{ display:inline-block; padding-top:var(--s5); font-size:13.5px; font-weight:600; color:var(--fg-3); text-decoration:none; }
.back:hover{ color:var(--fg); }
.dhead{ padding-block:var(--s6) var(--s6); }
.dhead h1{ max-width:20ch; }
.dhead-line{ display:flex; flex-wrap:wrap; gap:6px var(--s3); margin-top:var(--s3); font-size:14px; color:var(--fg-3); }
.dhead-blurb{ margin-top:var(--s4); max-width:50ch; }
.dhead .logos{ margin-top:var(--s5); }
.dhead .cta-row{ margin-top:var(--s5); }

.stage{ position:relative; background:#000; border-radius:3px; overflow:hidden; margin-top:var(--s4); }
.stage-note{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3); }
.stage-16{ aspect-ratio:16/9; }
.stage video,.stage img{ width:100%; height:100%; object-fit:cover; }
.stage-cover img{ object-fit:contain; background:var(--bg-2); }
.stage-cap{ margin-top:var(--s3); }

.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--s6); }
.strip > div{ background:var(--bg); padding:var(--s5) var(--s5) var(--s5) 0; }
.strip b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(21px,2.4vw,32px); letter-spacing:-.03em; line-height:1; }
.strip span{ display:block; margin-top:var(--s2); font-size:13px; line-height:1.45; color:var(--fg-3); }

.dbody{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:var(--gap); }
.story section + section{ margin-top:var(--s7); }
.story h2{ font-size:clamp(21px,2.4vw,30px); margin-bottom:var(--s3); }
.story p{ color:var(--fg-2); max-width:58ch; }
.aside-b{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:3px; padding:var(--s5); }
.aside-b + .aside-b{ margin-top:var(--s4); }
.aside-b h3{ font-family:var(--text); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--s4); }
.kv div{ display:grid; grid-template-columns:minmax(0,104px) 1fr; gap:var(--s3); padding:6px 0; font-size:14px; }
.kv div + div{ border-top:1px solid var(--line-2); }
.kv dt{ color:var(--fg-3); }
.kv dd{ margin:0; }
.linkcol li + li{ border-top:1px solid var(--line-2); }
.linkcol a{ display:block; padding:10px 0; font-size:15px; font-weight:600; text-decoration:none; }
.linkcol a:hover{ color:var(--flare-2); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips li{ font-size:12.5px; color:var(--fg-2); background:var(--bg-3); border:1px solid var(--line-2); padding:5px 10px; border-radius:100px; }

.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); }
.gal button{ padding:0; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); border-radius:2px; border:1px solid var(--line-2); }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal button:hover img{ transform:scale(1.05); }
.gal .lead{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gal-more{ display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:18px; color:var(--fg-2); background:var(--bg-2); border:1px solid var(--line); border-radius:2px; aspect-ratio:16/10; }
.gal-more:hover{ color:var(--flare-2); border-color:var(--flare); }

.clip-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.clip h3{ font-size:18px; margin-bottom:var(--s1); }
.clip .meta{ margin-bottom:var(--s3); }
.clip-frame{ aspect-ratio:16/9; background:#000; border-radius:2px; overflow:hidden; }
.clip-frame video{ width:100%; height:100%; }

.dia + .dia{ margin-top:var(--s4); }
.dia h3{ font-size:19px; margin-bottom:var(--s1); }
.dia button{ display:block; width:100%; padding:0; background:#fff; border:1px solid var(--line); border-radius:3px; }
.dia img{ width:100%; height:auto; }
.dia-hint{ margin-top:var(--s2); }

.dnav{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border-top:1px solid var(--line); }
.dnav a{ background:var(--bg); padding-block:var(--s6); text-decoration:none; }
.dnav a:last-child{ text-align:right; }
.dnav span{ display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:6px; }
.dnav b{ font-family:var(--display); font-weight:700; font-size:clamp(18px,2vw,25px); letter-spacing:-.02em; }
.dnav a:hover b{ color:var(--flare-2); }

/* ============================================================================
   EXPERIENCE
   ========================================================================== */
.jobs{ border-top:1px solid var(--line); }
.job{ border-bottom:1px solid var(--line-2); }
.job.on{ background:var(--bg-2); }
.job-btn{
  display:grid; grid-template-columns:76px minmax(0,150px) minmax(0,1.05fr) minmax(0,.95fr) auto;
  gap:var(--s5); align-items:center; width:100%; text-align:left;
  padding:var(--s5) var(--s4) var(--s5) var(--s4);
}
.job-btn:hover .job-role{ color:var(--flare-2); }
.job .logo{ height:76px; min-width:76px; width:76px; padding:10px; }
.job-when{ font-size:13.5px; font-weight:600; line-height:1.35; }
.job-tag{ display:block; margin-top:3px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--flare); }
.job-role{ font-family:var(--display); font-weight:700; font-size:clamp(18px,1.9vw,23px); letter-spacing:-.02em; line-height:1.15; }
.job-org{ margin-top:4px; font-size:14px; color:var(--fg-2); }
.job-sum{ font-size:14.5px; line-height:1.5; color:var(--fg-3); margin:0; }
.job-open{ font-size:12.5px; font-weight:700; color:var(--fg-3); white-space:nowrap; }
.job.on .job-open{ color:var(--flare); }
.job-panel{ display:none; padding:0 var(--s4) var(--s7); }
.job.on .job-panel{ display:block; }
.job-grid{ display:grid; grid-template-columns:calc(76px + var(--s5)) minmax(0,1.1fr) minmax(0,.85fr); gap:var(--s5); }
.job-grid > .spacer{ display:block; }
.job-body p{ color:var(--fg-2); max-width:58ch; }
.did{ margin-top:var(--s4); }
.did li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3); padding:5px 0; font-size:15px; line-height:1.5; color:var(--fg-2); }
.did i{ font-style:normal; color:var(--flare); font-weight:700; }
.callout{ margin-top:var(--s4); padding-left:var(--s3); border-left:2px solid var(--flare); font-size:14px; color:var(--fg-3); max-width:56ch; }
.job-photo{ margin-top:var(--s5); border-radius:2px; overflow:hidden; }
.job-photo img{ width:100%; height:auto; }

/* ============================================================================
   EDUCATION
   ========================================================================== */
.school{ padding-block:clamp(32px,3.8vw,64px); border-top:1px solid var(--line); }
.school-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:var(--gap); align-items:start; }
.school-logos{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s6); }
.school-when{ font-size:13.5px; color:var(--fg-3); }
.school-title{ margin-top:var(--s2); max-width:24ch; }
.school-name{ margin-top:var(--s3); font-size:clamp(16px,1.4vw,18.5px); color:var(--fg); }
.school-extra{ margin-top:4px; }
.badge{ display:inline-block; margin-top:var(--s4); font-size:13px; font-weight:600; color:#fff; background:var(--deep); padding:6px 12px; border-radius:2px; }

.school-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:var(--gap); margin-top:var(--s7); }
.block + .block{ margin-top:var(--s7); }
.block-h{ display:block; margin-bottom:var(--s3); }

.hon{ border-top:1px solid var(--line); }
.hon-row{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s4); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--line-2); }
.hon-row.lead{ background:linear-gradient(90deg, rgba(221,83,39,.12), transparent 70%); box-shadow:inset 3px 0 0 var(--flare); padding-left:var(--s3); }
.hon-sub{ font-size:15px; }
.hon-g{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.hon-a{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--flare-2); white-space:nowrap; }

/* the full transcript, dense but calm */
.trans{ margin-top:var(--s7); }
.trans .tr-rows{ columns:3; }
.tr-year + .tr-year{ margin-top:var(--s5); }
.tr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding-bottom:6px; border-bottom:1px solid var(--line); }
.tr-head b{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.tr-rows{ columns:2; column-gap:var(--gap); }
.tr-row{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s3); align-items:baseline; padding:5px 0; border-bottom:1px solid var(--line-2); break-inside:avoid; font-size:14px; }
.tr-sub{ color:var(--fg-2); }
.tr-g{ font-variant-numeric:tabular-nums; font-weight:600; }
.tr-m{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--fg-3); min-width:22px; text-align:right; }
.tr-row.mh .tr-sub,.tr-row.mh .tr-g{ color:var(--fg); }
.tr-row.mh .tr-m{ color:var(--flare-2); }
.tr-key{ margin-top:var(--s4); font-size:12px; color:var(--fg-3); }

.subj{ display:flex; flex-wrap:wrap; gap:6px; }
.subj li{ font-size:13.5px; background:var(--bg-3); border:1px solid var(--line-2); padding:6px 11px; border-radius:2px; }
.notes li{ position:relative; padding:5px 0 5px var(--s4); font-size:14px; line-height:1.5; color:var(--fg-3); max-width:56ch; }
.notes li::before{ content:""; position:absolute; left:0; top:.95em; width:9px; height:2px; background:var(--flare); }
.docs{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.doc{ display:inline-flex; align-items:center; gap:var(--s2); padding:12px 18px; background:var(--fg); color:var(--bg); font-size:14.5px; font-weight:600; text-decoration:none; border-radius:3px; }
.doc:hover{ background:var(--flare); color:#fff; }
.doc-alt{ background:transparent; color:var(--fg); border:1px solid var(--line); }
.doc-alt:hover{ background:var(--bg-3); color:var(--fg); border-color:var(--fg-2); }

/* ============================================================================
   COMPETENCIES
   ========================================================================== */
.skills{ padding-block:clamp(30px,3.4vw,56px); border-top:1px solid var(--line); }
.skills.quiet{ opacity:.92; }
.skills-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:baseline; margin-bottom:var(--s6); }
.skills-head h2{ font-size:clamp(23px,2.6vw,34px); }
.skills-head p{ margin:0; color:var(--fg-3); font-size:14.5px; line-height:1.5; max-width:52ch; }

/* conceptual competencies: a few strong panels, not dozens of rows */
.cluster-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.cluster{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:3px; padding:var(--s5); }
.cluster h3{ font-size:19px; }
.cluster .chips{ margin-top:var(--s3); }
.cluster p{ margin-top:var(--s3); font-size:14.5px; line-height:1.55; color:var(--fg-3); }

/* software: one row per tool, level kept small and secondary */
.tool-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:3px; }
.tool{ background:var(--bg); display:grid; grid-template-columns:88px 1fr; gap:var(--s5); padding:var(--s5); align-items:center; }
.tool .logo{ width:88px; height:88px; min-width:0; padding:12px; }
.tool-line{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.tool-name{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.tool-txt{ margin-top:5px; font-size:14px; line-height:1.5; color:var(--fg-3); }
.lvl{ display:inline-flex; align-items:center; gap:var(--s2); font-size:13px; color:var(--fg-2); }
.lvl b{ font-family:var(--display); font-weight:700; font-size:14px; }
.lvl i{ display:block; width:54px; height:2px; background:var(--line); position:relative; }
.lvl i span{ position:absolute; inset:0 auto 0 0; background:var(--flare); }
.band{ font-size:12.5px; font-weight:600; color:var(--fg-2); }

.srow-list{ border-top:1px solid var(--line); }
.srow{ display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:var(--s5); align-items:baseline; padding:var(--s3) 0; border-bottom:1px solid var(--line-2); }
.srow-n{ font-size:15.5px; font-weight:600; }
.srow-b{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--flare-2); }
.srow-t{ font-size:14.5px; line-height:1.5; color:var(--fg-3); max-width:62ch; }
.two-col{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gap); }

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--gap); align-items:start; }
.mailto{ display:inline-block; font-family:var(--display); font-weight:700; font-size:clamp(25px,4.2vw,56px); letter-spacing:-.035em; line-height:1.05; text-decoration:none; word-break:break-word; }
.mailto:hover{ color:var(--flare-2); }
.dir{ border-top:1px solid var(--line); margin-top:var(--s6); }
.dir div{ display:grid; grid-template-columns:minmax(0,160px) 1fr; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--line-2); font-size:15.5px; }
.dir dt{ font-size:13.5px; color:var(--fg-3); padding-top:3px; }
.dir dd{ margin:0; }
.dir a{ text-decoration:none; border-bottom:1px solid var(--line); }
.dir a:hover{ color:var(--flare-2); border-color:var(--flare); }
.contact-side .portrait-box{ aspect-ratio:1/1; }

/* ============================================================================
   LIGHTBOX
   ========================================================================== */
.lb{ position:fixed; inset:0; z-index:120; display:none; background:rgba(8,11,12,.96); }
.lb[open]{ display:grid; grid-template-rows:auto 1fr auto; }
.lb-top{ display:flex; justify-content:space-between; align-items:center; padding:var(--s4) var(--pad); color:var(--fg); }
.lb-stage{ display:grid; place-items:center; min-height:0; padding-inline:var(--pad); }
.lb-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lb.paper .lb-stage img{ background:#fff; }
.lb-bot{ display:flex; justify-content:center; align-items:center; gap:var(--s3); padding:var(--s4) var(--pad) var(--s6); color:var(--fg-2); }
.lb-bot button,.lb-top button{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg); border:1px solid var(--line); padding:8px 14px; border-radius:2px; }
.lb-bot button:hover,.lb-top button:hover{ border-color:var(--fg); }
.lb-cap{ font-size:13.5px; max-width:56ch; text-align:center; }
.hide{ display:none !important; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--line); padding-block:var(--s8) var(--s7); }
.foot-in{ display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,auto)); gap:var(--gap); align-items:start; }
.foot-name{ font-family:var(--display); font-weight:700; font-size:clamp(19px,1.9vw,24px); letter-spacing:-.02em; }
.foot h4{ font-family:var(--text); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--s3); }
.foot li{ padding:3px 0; }
.foot a{ font-size:14.5px; color:var(--fg-2); text-decoration:none; }
.foot a:hover{ color:var(--fg); }
.foot-end{ margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--line-2); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; }

/* media not yet in place still looks intentional */
.ph{ position:absolute; inset:0; display:grid; place-items:center; background:
  repeating-linear-gradient(135deg, rgba(242,239,232,.04) 0 1px, transparent 1px 9px), var(--bg-2); }
.ph b{ font-family:var(--display); font-weight:700; font-size:clamp(20px,3vw,40px); color:rgba(242,239,232,.16); letter-spacing:-.03em; }

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

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .trans .tr-rows{ columns:2; }
  .gal{ grid-template-columns:repeat(3,1fr); }
  .job-btn{ grid-template-columns:64px minmax(0,128px) minmax(0,1fr) minmax(0,.8fr) auto; gap:var(--s4); }
  .job .logo{ height:64px; width:64px; min-width:64px; }
  .job-grid{ grid-template-columns:calc(64px + var(--s4)) minmax(0,1.05fr) minmax(0,.9fr); }
}
@media (max-width:1000px){
  .hero-in,.phead-in,.dbody,.school-top,.school-main,.skills-head,.contact,.band-note{ grid-template-columns:minmax(0,1fr); }
  .portrait{ order:-1; max-width:400px; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .fact:nth-child(2){ border-right:0; }
  .fact:nth-child(-n+2){ border-bottom:1px solid var(--line-2); }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .tiles{ grid-template-columns:1fr; gap:var(--s7); }
  .pcard-foot{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .pcard-go{ padding-top:0; }
  .pcard-media{ aspect-ratio:16/9; }
  .job-grid{ grid-template-columns:minmax(0,1fr); }
  .job-grid > .spacer{ display:none; }
  .tool-grid,.cluster-grid,.clip-grid,.mini-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .tr-rows,.trans .tr-rows{ columns:1; }
  .foot-in{ grid-template-columns:minmax(0,1fr) minmax(0,auto); }
}
@media (max-width:720px){
  body{ font-size:16.5px; }
  .nav{
    position:fixed; top:var(--head); left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:var(--s1) var(--pad) var(--s4);
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 0; font-size:17px; border-bottom:1px solid var(--line-2); border-radius:0; }
  .burger{ display:block; }
  .head-cv{ display:none; }

  .routes{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .gal .lead{ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
  .dhead h1{ max-width:none; }

  /* experience becomes a readable stack, logo stays as the visual anchor */
  .job-btn{ grid-template-columns:60px minmax(0,1fr) auto; gap:var(--s3) var(--s4); align-items:start; padding-inline:0; }
  .job .logo{ height:60px; width:60px; min-width:60px; grid-row:span 2; }
  .job-when{ grid-column:2 / -1; }
  .job-sum{ grid-column:1 / -1; margin-top:var(--s2); }
  .job-open{ align-self:start; padding-top:2px; }
  .job-panel{ padding-inline:0; }

  .hon-row{ grid-template-columns:1fr auto; row-gap:2px; }
  .hon-a{ grid-column:1 / -1; }
  .srow{ grid-template-columns:minmax(0,1fr); gap:4px; padding:var(--s3) 0; }
  .tool{ grid-template-columns:68px 1fr; gap:var(--s4); padding:var(--s4); }
  .tool .logo{ width:68px; height:68px; padding:9px; }
  .dir div,.kv div{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .dnav{ grid-template-columns:1fr; }
  .dnav a:last-child{ text-align:left; }
  .foot-in{ grid-template-columns:1fr; }
  .cta-row .btn{ flex:1 1 auto; justify-content:center; }
  .logo-lg{ height:88px; min-width:150px; padding:14px 18px; }
}
@media (max-width:430px){
  :root{ --pad:16px; }
  .facts{ grid-template-columns:1fr; }
  .fact{ border-right:0; border-bottom:1px solid var(--line-2); padding-right:0; }
  .fact:last-child{ border-bottom:0; }
  .strip{ grid-template-columns:1fr; }
  .strip > div{ padding-right:0; }
  .portrait::after{ width:56%; height:50%; }
  .logo{ height:70px; min-width:120px; padding:11px 15px; }
  .logo-sm{ height:56px; min-width:98px; }
  .tr-row{ grid-template-columns:1fr auto auto; font-size:13.5px; }
}
@media (hover:none){
  .tile:hover .tile-media img,.pcard:hover .pcard-media img,.gal button:hover img{ transform:none; }
}

/* print --------------------------------------------------------------------- */
@media print{
  :root{ --bg:#fff; --bg-2:#fff; --bg-3:#fff; --fg:#111; --fg-2:#333; --fg-3:#555; --line:#ccc; --line-2:#e3e3e3; --plate:#fff; }
  body{ background:#fff; color:#111; }
  .head,.burger,.nav,.cta-row,.lb,.dnav,.back,.job-open{ display:none !important; }
  .job-panel{ display:block !important; }
  .sect,.group,.school,.skills,.tr-year{ break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:#666; word-break:break-all; }
}