/* =========================================================
   HOME: editorial portfolio layout
   Project evidence carries the visual weight; typography and
   spacing keep the surrounding interface quiet.
   ========================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:     #101012;
  --ink:    #eceef0;
  --muted:  #9aa0a8;
  --faint:  #7a808a;
  --rule:   rgba(236,238,240,0.1);
  --rule-h: rgba(236,238,240,0.28);
  --ice:    #aac6de;
  --panel:  rgba(24,24,27,0.66);
  --display:'Inter Tight', system-ui, sans-serif;
  --body:   'Inter', system-ui, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, monospace;
}

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

body {
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--ice); outline-offset:3px; }

.skip-link {
  position:fixed; top:16px; left:16px; z-index:3000;
  padding:10px 14px; background:var(--ice); color:var(--bg);
  font-family:var(--mono); font-size:.72rem;
  border-radius:4px; transform:translateY(-240%);
  transition:transform .2s ease;
}
.skip-link:focus-visible { transform:translateY(0); outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- Chrome ---------- */
/* Geometry is shared with music.css / case.css / sidar.css. */
.site-header {
  position:sticky; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  padding:14px clamp(20px,5vw,72px);
  border-bottom:1px solid rgba(236,238,240,.12);
  background:rgba(11,11,13,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-header__name,
.site-header nav a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  white-space:nowrap;
  text-decoration:none;
}
.site-header nav { display:flex; gap:clamp(8px,1.6vw,24px); align-items:center; }
.site-header nav a { min-width:24px; transition:color .15s; }

.content { position:relative; z-index:10; display:block; }
.wrap { max-width:1160px; margin:0 auto; padding:0 40px; }

@media (min-width:1360px) {
  /* At 1440 there were 188px of unused margin on each side. Spending some of
     it lets the project list and its preview both keep a comfortable size.
     The matching .work-split override lives next to that rule, further down:
     placing it here would lose to the later base declaration. */
  .wrap { max-width:1280px; }
  .panel__inner { max-width:1280px; }
}

/* ---------- Hero ---------- */
.hero {
  min-height:calc(100vh - 72px); min-height:calc(100svh - 72px);
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(36px,4vw,64px); align-items:center; position:relative;
}
.hero__copy { min-width:0; }
.hero__copy { grid-column:1; grid-row:1; align-self:end; }
.hero-proof { grid-column:2; grid-row:1 / span 2; }
.hero > .hero__cta { grid-column:1; grid-row:2; align-self:start; margin-top:0; }
.hero__kicker {
  font-family:var(--mono); font-size:.72rem; color:var(--ice);
  letter-spacing:.14em; margin-bottom:22px;
}
.hero h1 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.75rem, 4.1vw, 4rem);
  letter-spacing:-.035em; line-height:1.0;
  max-width:14ch;
}
.hero__sub {
  margin-top:28px; max-width:46ch; color:var(--muted); font-size:1.08rem;
}
.hero__cta { margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__cta a {
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:.72rem; padding:13px 24px; border-radius:999px;
  transition:background .15s, border-color .15s, color .15s;
}
.hero__cta a.primary { background:var(--ink); color:var(--bg); }
.hero__cta a.primary:hover { background:#fff; }
.hero__cta a.ghost {
  border:1px solid rgba(236,238,240,0.14); color:var(--muted);
  background:rgba(24,24,27,0.4);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.hero__cta a.ghost:hover { color:var(--ink); border-color:var(--ink); }
.hero-proof {
  display:block; min-width:0; border:1px solid rgba(170,198,222,.18);
  background:#0b0b0d; overflow:hidden;
}
.hero-proof img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; filter:saturate(.9) brightness(.96); transition:filter .2s, transform .45s; }
.hero-proof span { display:block; padding:14px 16px; color:var(--muted); font-size:.82rem; }
.hero-proof strong { color:var(--ink); margin-right:8px; }
.hero-proof:hover img { filter:saturate(1) brightness(1); transform:scale(1.015); }

/* ---------- Showreel ---------- */
.showreel {
  padding:110px 0 130px;
  scroll-margin-top:72px;
}
.showreel__head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,430px);
  gap:32px 64px;
  align-items:end;
  margin-bottom:34px;
}
.showreel__head .sec-kicker { margin-bottom:14px; }
.showreel__head .sec-title {
  max-width:17ch;
  margin-bottom:0;
}
.showreel__head > p {
  max-width:43ch;
  color:var(--muted);
  padding-bottom:5px;
}
.showreel__figure { margin:0; }
.showreel__player {
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  background:#08080a;
  border:1px solid rgba(170,198,222,.22);
  box-shadow:0 32px 90px rgba(0,0,0,.38);
}
.showreel__player video {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#08080a;
}
.showreel figcaption {
  display:flex;
  justify-content:space-between;
  gap:18px 32px;
  padding-top:14px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--faint);
}

/* ---------- Sections ---------- */
section { padding:130px 0; }
.sec-kicker {
  font-family:var(--mono); font-size:.7rem; color:var(--ice);
  letter-spacing:.14em; margin-bottom:14px;
}
.sec-title {
  font-family:var(--display); font-weight:600; font-size:2.6rem;
  letter-spacing:-.025em; margin-bottom:48px;
}

/* ---------- Work panel: near-black slab, typography does the work ---------- */
section.panel { padding:0; }
.panel {
  width:100%; margin-left:0;
  background:#0b0b0d;
  border-top:1px solid rgba(170,198,222,0.22);
}
.panel__inner { max-width:1160px; margin:0 auto; padding:110px 40px 140px; }

/* ---------- Project list: big type index, cursor image preview ---------- */
.plist { border-top:1px solid var(--rule); }
.plist__group {
  font-family:var(--mono); font-size:12px; color:var(--ice);
  letter-spacing:.14em;
  padding:64px 6px 14px;
  border-bottom:1px solid var(--rule);
}
.plist__group:first-child { padding-top:30px; }
.prow {
  display:grid; grid-template-columns:64px minmax(0,1fr) 200px;
  gap:30px; align-items:baseline;
  padding:34px 6px;
  border-bottom:1px solid var(--rule);
  transition:opacity .25s;
}
/* The active row changes its heading colour below; other rows retain their
   full contrast while the pointer moves through the list. */
.prow__idx { font-family:var(--mono); font-size:12px; color:var(--faint); }
.prow h3 {
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  letter-spacing:-.03em; line-height:1.05;
  transition:color .15s;
}
.prow:hover h3,
.prow:focus-visible h3 { color:var(--ice); }
.prow p { color:var(--muted); font-size:.9rem; margin-top:10px; max-width:56ch; }
.prow__meta {
  font-family:var(--mono); font-size:12px; color:var(--faint);
  letter-spacing:.05em; line-height:1.9; text-align:right;
}
/* Split preview: home-list.js wraps the list in .work-split and builds the
   sticky .pview panel from the hidden in-row thumbs. Hovering a row
   crossfades the panel image; no layout ever shifts. */
.prow__thumb { display:none; }

.prow--featured {
  min-height:150px;
  align-items:center;
}
.prow--featured h3,
.work-split .prow--featured h3 { font-size:clamp(2rem, 2.8vw, 2.85rem); }
.prow--tool {
  min-height:0;
  padding-block:22px;
}
.prow--tool h3,
.work-split .prow--tool h3 { font-size:clamp(1.45rem, 2.2vw, 2.05rem); }
.prow--tool p { max-width:62ch; }
.earlier-work { border-bottom:1px solid var(--rule); }
.earlier-work summary {
  display:flex; justify-content:space-between; gap:24px; align-items:center;
  padding:28px 6px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:clamp(1.35rem, 2.2vw, 2rem); font-weight:600;
}
.earlier-work summary::-webkit-details-marker { display:none; }
.earlier-work summary::after { content:'+'; margin-left:auto; color:var(--ice); font-family:var(--mono); }
.earlier-work[open] summary::after { content:'-'; }
.earlier-work summary span { color:var(--faint); font-family:var(--mono); font-size:11px; font-weight:400; }
.earlier-work nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 6px 28px 6px; }
.earlier-work nav a {
  display:grid; gap:3px; align-content:center;
  min-height:68px; padding:11px 0;
  border-top:1px solid var(--rule); color:var(--muted);
}
.earlier-work nav a:nth-child(odd) { margin-right:22px; }
.earlier-work nav a:hover { color:var(--ink); }
.archive-project-link__name {
  color:var(--ink); font-family:var(--display); font-size:.94rem; font-weight:500;
  line-height:1.35;
}
.archive-project-link__desc {
  max-width:44ch; color:var(--faint); font-size:.76rem; line-height:1.45;
  transition:color .15s;
}
.archive-project-link:hover .archive-project-link__desc { color:var(--muted); }
.archive-project-link:focus-visible .archive-project-link__desc { color:var(--muted); }

.work-split {
  /* The preview and the meta column used to squeeze the description down to
     about 38 characters a line, which is too narrow to read comfortably. */
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:0 48px; align-items:start;
  /* On wide screens there is spare room on both sides, so the preview grows
     back to its original size instead of taking it from the description. */
  border-top:1px solid var(--rule);
}
.work-split .plist { border-top:none; min-width:0; }
.work-split .prow { grid-template-columns:44px minmax(0,1fr) 132px; gap:20px; }

@media (min-width:1360px) {
  /* Pairs with the wider .wrap above: the extra room goes to the preview so
     it is not the description that pays for it. */
  .work-split { grid-template-columns:minmax(0,1fr) 400px; }
}
.pview { position:sticky; top:104px; padding-top:34px; }
.pview__frame {
  position:relative; aspect-ratio:16/11;
  border-radius:14px; overflow:hidden;
  background:#0b0b0d;
  border:1px solid rgba(170,198,222,0.22);
  box-shadow:0 24px 70px rgba(0,0,0,0.45);
}
.pview__frame img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.07);
  transition:opacity .35s ease, transform .35s ease;
}
/* Active image: quick fade in, then a slow drift so the panel feels alive */
.pview__frame img.on {
  opacity:1;
  animation:pview-drift 9s ease-out forwards;
}
.pview__frame img.pview__image--tool {
  object-fit:contain;
  padding:14px;
  background:#151517;
  transform:scale(1);
}
.pview__frame img.pview__image--tool.on {
  animation:none;
  transform:scale(1);
}
@keyframes pview-drift {
  from { transform:scale(1); }
  to   { transform:scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .pview__frame img.on { transform:scale(1); }
}
.pview__caption {
  display:flex; justify-content:space-between; gap:16px;
  margin-top:14px;
  font-family:var(--mono); font-size:12px; color:var(--faint);
  letter-spacing:.05em;
}
.more {
  display:inline-flex; min-height:44px; align-items:center; margin-top:36px;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  border-bottom:1px solid var(--rule-h); padding-bottom:3px;
  transition:color .15s, border-color .15s;
}
.more:hover { color:var(--ink); border-color:var(--ink); }

/* ---------- Music entry ----------
   44 tracks used to sit behind a single small link at the end of the list,
   which read as a footnote rather than half of the portfolio. */
.music-cta { margin-top:56px; padding-top:26px; border-top:1px solid var(--rule); }

.music-cta__label {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}

.music-cta__link {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:12px 32px;
  margin-top:14px; padding:6px 0;
  text-decoration:none; color:var(--ink);
}

.music-cta__body { display:flex; flex-direction:column; gap:8px; min-width:0; }

.music-cta__body strong {
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem, 2.4vw, 2.05rem);
  line-height:1.1; letter-spacing:-.02em;
}

.music-cta__link:hover .music-cta__body strong { color:var(--ice); }

.music-cta__body span { max-width:56ch; font-size:.9rem; color:var(--muted); }

.music-cta__meta {
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint);
}

@media (max-width:700px) {
  .music-cta__link { grid-template-columns:minmax(0,1fr); align-items:start; }
  .music-cta__meta { white-space:normal; }
}

/* ---------- About ---------- */
.about-panel {
  max-width:68ch;
  background:transparent; border:0; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:24px 0 0;
  display:block;
}
.about-panel p { color:var(--muted); margin-bottom:16px; max-width:60ch; }
.about-panel p strong { color:var(--ink); font-weight:500; }

@media (min-width:900px) {
  /* A 68ch column pinned to the left of a 1080px container left the right
     half of the screen visibly empty. Centring the column keeps the reading
     measure and matches the centred contact section that follows. */
  #about .sec-kicker,
  #about .sec-title { text-align:center; }
  #about .about-panel { margin-inline:auto; }
}

/* ---------- Contact ---------- */
/* 160px here plus the colophon's own padding made the page trail off; 130px
   matches the section rhythm used everywhere else. */
.contact { text-align:center; padding-bottom:130px; }
.contact__mail {
  display:inline-block; max-width:100%;
  margin-top:32px;
  font-family:var(--display); font-weight:700;
  /* capped at 3rem: any larger and the address grows wider than the card,
     overflowing right instead of centring */
  /* The lower bound is sized so the whole address still fits on one line at
     320px; below that it may wrap, and it breaks after the @ when it does. */
  font-size:clamp(1.15rem, 4.2vw, 3rem); letter-spacing:-.03em;
  overflow-wrap:anywhere;
  border-bottom:2px solid var(--rule-h);
  transition:border-color .15s;
}
.contact__mail:hover { border-color:var(--ice); }
.contact__row {
  margin-top:44px; display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem;
}
.contact__row a { display:inline-flex; min-height:44px; align-items:center; color:var(--muted); transition:color .15s; }
.contact__row a:hover { color:var(--ink); }

/* ---------- Colophon ---------- */
.colophon {
  position:relative; z-index:10;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:1160px; margin:0 auto; padding:30px 40px 40px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.05em;
}
.colophon a { display:inline-flex; min-height:44px; align-items:center; }

/* Glass fallback for browsers without backdrop-filter support. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .hero__cta a.ghost { background:rgba(16,16,18,0.94); }
}

/* ---------- Responsive ---------- */
/* No hover / narrow screens: drop the sticky panel, give every row its own
   inline thumbnail instead so images are always visible. */
@media (max-width: 1179.98px), (hover: none), (pointer: coarse) {
  .work-split { display:block; border-top:none; }
  .work-split .plist { border-top:1px solid var(--rule); }
  .pview { display:none; }
  .prow,
  .work-split .prow { grid-template-columns:40px minmax(0,1fr) 104px; gap:20px; align-items:center; }
  /* The year and toolset used to be dropped on mobile. They are the strongest
     competence signal in the row, so keep them on a line of their own. */
  .prow__meta {
    grid-column:1 / -1;
    margin-top:4px;
    text-align:left;
    line-height:1.5;
    font-size:11px;
  }
  .prow__thumb { display:block; }
  .prow__thumb img {
    width:104px; height:104px; object-fit:cover; display:block;
    border-radius:12px; border:1px solid rgba(170,198,222,0.18);
  }
  .prow--tool .prow__thumb img {
    height:auto;
    aspect-ratio:16 / 11;
    object-fit:contain;
    padding:6px;
    background:#151517;
  }
}

@media (max-width: 820px) {
  /* Keep the identity, proof image and actions in a clear mobile sequence. */
  .hero { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:32px; padding:120px 0 72px; }
  .hero__copy { order:1; align-self:stretch; width:100%; }
  .hero > .hero__cta { order:2; align-self:stretch; width:100%; }
  .hero-proof { order:3; width:100%; }
  .site-header { padding:10px 20px; gap:12px; }
  .site-header nav { gap:8px; }
  .wrap { padding:0 20px; }
  .showreel { padding:72px 0 90px; }
  .showreel__head { grid-template-columns:1fr; gap:18px; margin-bottom:24px; }
  .showreel__head .sec-title { max-width:19ch; }
  .showreel figcaption { flex-direction:column; gap:4px; }
  .prow,
  .work-split .prow { grid-template-columns:30px minmax(0,1fr) 84px; gap:14px; padding:26px 2px; }
  .prow h3,
  .work-split .prow h3 { font-size:clamp(1.55rem, 3.8vw, 2rem); overflow-wrap:break-word; }
  .prow__thumb img { width:84px; height:84px; border-radius:10px; }
  .about-panel { padding:30px 0; }
  section { padding:90px 0; }
  .panel__inner { padding:70px 20px 100px; }
  section.panel { width:100%; margin-left:0; padding:0; }
  .colophon { padding:24px 20px 32px; }
  .earlier-work nav { grid-template-columns:1fr; }
  .earlier-work nav a:nth-child(odd) { margin-right:0; }
}

@media (max-width: 480px) {
  .site-header { padding:10px 20px; align-items:center; gap:12px; }
  /* No max-width here: the name is set to nowrap, so capping the box would
     push the text out over the navigation instead of wrapping it. */
  .site-header__name { line-height:1.25; }
  .site-header nav { gap:8px; }
  .site-header nav a { font-size:.7rem; }
  .hero__cta a { padding:12px 18px; }
  .colophon { flex-direction:column; gap:6px; }
}
/* Audit V4 — flat metadata and readable prose */
.hero__meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The 440px block that used to sit here rebuilt the project row as a two
   column grid with an 82px thumbnail. The mobile layer at the end of this
   file replaces that layout entirely, and its `display: contents` on the row
   body silently disabled any later rule that addressed it. */

@media (max-width: 380px) {
  /* Contact used to be dropped here. There is room for it once the header
     stops wrapping, and it is the one link a visitor is most likely to want. */
  .site-header { gap:10px; padding-inline:16px; }
  .site-header nav { gap:10px; }
}

/* Standalone 404 page, shared with the home shell to avoid another CSS payload. */
.error-page {
  min-height: calc(100svh - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(130px, 18vh, 210px) 40px 90px;
}

.error-page__code {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
}

.error-page h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -.055em;
  line-height: .92;
}

.error-page > p:not(.error-page__code) {
  max-width: 54ch;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.65;
}

.error-page__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 34px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-h);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.error-page__back:hover { border-color: var(--ice); }

@media (max-width: 620px) {
  .error-page { padding-right: 20px; padding-left: 20px; }
}

/* ---------- Header: alignment + type ----------
   The bar used to run full-bleed while every other element sat in the 1160px
   column, so the name never lined up with the text underneath it. The padding
   below resolves to the same left edge as .wrap and collapses to a plain
   gutter once the viewport is narrower than the column.

   Nav is set in Inter, not mono. Mono stays on things that are actually data
   (years, tool lists); in navigation it only costs legibility. */
.site-header {
  padding-inline: max(20px, calc((100% - 1160px) / 2 + 40px));
}
@media (min-width:1360px) {
  .site-header { padding-inline: max(20px, calc((100% - 1280px) / 2 + 40px)); }
}
.site-header__name {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.site-header nav a {
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
}
.site-header nav a:hover,
.site-header nav a[aria-current='page'] { color: var(--ink); }
.site-header nav a[aria-current='page'] { box-shadow: inset 0 -1px 0 0 var(--ink); }
@media (max-width:640px) {
  .site-header__name { font-size: .85rem; }
  .site-header nav a { font-size: .78rem; }
}

/* The narrow-screen header used to wrap onto two rows, which cost 32px of
   sticky height on exactly the screens with the least of it. The pill strip
   below keeps one row down to 320px. */

/* ---------- Header: mobile pill navigation ----------
   Identical in home.css, music.css, case.css and sidar.css, like the block
   above it. Change one, change all four.

   Below 820px the name and four links no longer fit on one comfortable line:
   the last item ended up pressed against the screen edge and the type had to
   shrink to .7rem to keep them apart. The links become pills in a horizontally
   scrollable strip instead, so nothing hides behind a menu button, nothing is
   squeezed, and a clipped pill at the right edge shows there is more to reach.
   The active page is a filled pill rather than a 1px underline, which is
   legible on a phone. */
@media (max-width: 820px) {
  .site-header {
    gap: 10px;
    padding-block: 7px;
    padding-inline:
      max(16px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-right));
  }

  .site-header__name {
    min-height: 40px;
    font-size: .82rem;
    letter-spacing: .015em;
  }

  .site-header nav {
    min-width: 0;
    gap: 6px;
    padding: 3px 2px 3px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site-header nav::-webkit-scrollbar { display: none; }

  /* Narrow enough that the strip always overflows: fading the trailing edge
     reads as "there is more" instead of a pill sliced by the screen edge.
     Above this width the four links fit and no fade is needed. */
  @media (max-width: 560px) {
    .site-header nav {
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    }
  }

  .site-header nav a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(236, 238, 240, 0.16);
    border-radius: 999px;
    background: rgba(236, 238, 240, 0.035);
    font-size: .75rem;
    letter-spacing: .015em;
    box-shadow: none;
  }

  /* case.css resets the nav border to 0 on hover for its underlined links;
     without this the pill outline disappears on a narrow desktop window. */
  .site-header nav a:hover { border: 1px solid rgba(236, 238, 240, 0.3); }

  .site-header nav a[aria-current='page'],
  .site-header nav a[aria-current='page']:hover {
    border-color: transparent;
    background: #eceef0;
    color: #101012;
    box-shadow: none;
  }
}

/* =========================================================
   MOBILE LAYER
   Everything below 820px. It sits at the end of the file on
   purpose: it is the last word on the rules it overrides, so
   the earlier narrow-screen patches keep working for the
   1180-820px band and only the phone layout changes here.

   Three problems it answers:
   1. Section headings kept their desktop 2.6rem with the body
      line-height of 1.6, so a two-line title on a phone read
      as two separate lines of text.
   2. Featured projects were a 2rem headline next to an 82px
      thumbnail. At that size the image proved nothing and the
      row looked like an unstyled list item.
   3. Padding was tuned for a 1160px column, so a phone spent
      most of its screen on empty space between sections.
   ========================================================= */
@media (max-width: 820px) {
  /* ---- Rhythm ---- */
  .wrap { padding-inline: clamp(18px, 5.2vw, 26px); }
  section { padding: 68px 0; }
  section.panel { padding: 0; }
  .panel__inner { padding: 58px clamp(18px, 5.2vw, 26px) 76px; }
  .colophon {
    padding: 24px clamp(18px, 5.2vw, 26px)
             calc(32px + env(safe-area-inset-bottom));
  }

  /* ---- Type ---- */
  .sec-title {
    margin-bottom: 22px;
    font-size: clamp(1.85rem, 7.4vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .sec-kicker {
    margin-bottom: 10px;
    font-size: .66rem;
    letter-spacing: .16em;
  }
  .hero__sub,
  .prow p,
  .about-panel p,
  .archive-project-link__desc { text-wrap: pretty; }

  /* ---- Hero ----
     120px of top padding was there to clear a header that is sticky, not
     fixed, so it only pushed the name of the site off the first screen. */
  .hero { gap: 26px; padding: 60px 0 64px; }
  .hero__kicker {
    margin-bottom: 16px;
    font-size: .66rem;
    letter-spacing: .16em;
  }
  .hero h1 {
    max-width: 18ch;
    font-size: clamp(2.15rem, 9.4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -.04em;
  }
  .hero__sub { margin-top: 18px; font-size: 1.02rem; line-height: 1.55; }
  .hero__meta { margin-top: 14px; font-size: 11px; line-height: 1.6; }
  /* Three pills used to wrap 2 + 1 and leave a ragged edge. A two-column
     grid with the primary action across the top reads as one block. */
  .hero__cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
  }
  .hero__cta a {
    justify-content: center;
    padding: 14px 10px;
    font-size: .7rem;
    text-align: center;
  }
  .hero__cta a.primary { grid-column: 1 / -1; }
  .hero-proof { border-radius: 16px; }
  .hero-proof span { padding: 13px 15px; font-size: .8rem; line-height: 1.45; }

  /* ---- Showreel ---- */
  .showreel { padding: 58px 0 74px; }
  .showreel__player { border-radius: 14px; }
  .showreel figcaption { padding-top: 12px; font-size: 10.5px; }

  /* ---- Featured projects: image-led cards ----
     The row becomes a single column and the thumbnail leads it at the width
     of the text. The reader sees the work before the description, and the
     16:9 crop is the one the images were made for. */
  .prow,
  .work-split .prow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
    padding: 24px 0 30px;
  }
  .prow > div:not(.prow__thumb) { display: block; }
  .prow__idx { display: none; }
  .prow__thumb { order: -1; }
  .prow__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(170, 198, 222, 0.16);
    background: #0b0b0d;
  }
  .prow h3,
  .work-split .prow h3 {
    font-size: clamp(1.6rem, 6.6vw, 2.1rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    text-wrap: balance;
  }
  .prow p {
    margin-top: 9px;
    font-size: .95rem;
    line-height: 1.55;
  }
  .prow__meta {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: .06em;
  }
  /* Touch has no hover, so the row needs a press state of its own. */
  .prow:active h3 { color: var(--ice); }

  /* ---- Tools: compact rows ----
     A REAPER script or a VST has no cinematic frame to show, so these keep a
     small square mark and stay dense enough to scan. */
  .prow--tool,
  .work-split .prow--tool {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 6px 16px;
    align-items: start;
    padding: 20px 0 22px;
  }
  .prow--tool .prow__thumb {
    order: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .prow--tool > div:not(.prow__thumb) { grid-column: 2; grid-row: 1; }
  .prow--tool .prow__meta { grid-column: 2; grid-row: 2; }
  .prow--tool .prow__thumb img {
    width: 62px;
    height: 62px;
    aspect-ratio: 1 / 1;
    padding: 7px;
    border-radius: 14px;
    object-fit: contain;
    background: #151517;
  }
  .prow--tool h3,
  .work-split .prow--tool h3 { font-size: clamp(1.32rem, 5.2vw, 1.6rem); }
  .prow--tool p { margin-top: 7px; font-size: .9rem; }

  .plist__group {
    padding: 44px 0 12px;
    font-size: 11px;
    letter-spacing: .16em;
  }
  .plist__group:first-child { padding-top: 20px; }

  /* ---- Earlier work ----
     The year range used to sit in a 39px column and broke as "2021-" / "2025".
     It gets its own line under the label, and the marker spans both. */
  .earlier-work summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 14px;
    padding: 22px 0;
    font-size: 1.28rem;
    line-height: 1.2;
  }
  .earlier-work summary span {
    grid-column: 1;
    grid-row: 2;
    white-space: nowrap;
    letter-spacing: .08em;
  }
  .earlier-work summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-left: 0;
    font-size: 1.3rem;
  }
  .earlier-work nav { padding: 0 0 22px; }
  .earlier-work nav a { min-height: 62px; padding: 13px 0; }

  /* ---- Music entry ---- */
  .music-cta { margin-top: 42px; padding-top: 24px; }
  .music-cta__body strong { font-size: clamp(1.45rem, 5.6vw, 1.8rem); }
  .music-cta__body span { font-size: .92rem; line-height: 1.55; }

  /* ---- About ---- */
  .about-panel { padding: 0; }
  .about-panel p { margin-bottom: 14px; }

  /* ---- Contact ----
     The address was clamped to 1.15rem on a phone, four times smaller than
     the heading above it, even though it is the point of the section. */
  .contact { padding-bottom: 86px; }
  .contact__mail {
    margin-top: 26px;
    font-size: clamp(1.45rem, 6.6vw, 2.2rem);
    line-height: 1.15;
  }
  .contact__row {
    gap: 9px;
    margin-top: 30px;
    font-size: .7rem;
  }
  .contact__row a {
    padding: 0 15px;
    min-height: 42px;
    border: 1px solid var(--rule);
    border-radius: 999px;
  }
}

@media (max-width: 400px) {
  .prow--tool,
  .work-split .prow--tool { grid-template-columns: 54px minmax(0, 1fr); gap: 5px 13px; }
  .prow--tool .prow__thumb img { width: 54px; height: 54px; }
}