@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   hudco.lighting — design system
   Dark house, tungsten accent. Photos carry the page; chrome stays quiet.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:          #0b0b0d;
  --bg-elev:     #131317;
  --bg-elev-2:   #1a1a20;
  --bg-sunk:     #08080a;

  /* lines */
  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);

  /* text */
  --fg:          #f3f3f5;
  --fg-muted:    #a6a6b0;
  --fg-dim:      #71717d;

  /* tungsten */
  --accent:      #f59422;
  --accent-hi:   #ffb555;
  --accent-soft: rgba(245, 148, 34, .13);
  --accent-line: rgba(245, 148, 34, .38);

  /* type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* metrics */
  --page:      1280px;
  --page-wide: 1600px;
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --header-h:  70px;
  --radius:    14px;
  --radius-sm: 8px;

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

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--accent); color: #16120a; }

/* --- typography ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.05rem; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--fg-muted);
  font-weight: 300;
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.muted { color: var(--fg-muted); }
.dim   { color: var(--fg-dim); }

.link-underline {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-underline:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--page-wide); }
.wrap--narrow { max-width: 820px; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4rem); }
.section--sunk { background: var(--bg-sunk); border-block: 1px solid var(--line); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head > div { min-width: 0; }
.section-head .eyebrow { display: block; margin-bottom: .85rem; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* --- skip link ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 200;
  background: var(--accent);
  color: #16120a;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: translate .18s var(--ease);
}
.skip:focus { translate: -50% 0; }

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(11, 11, 13, .72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  max-width: var(--page-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}
.brand__mark { height: 28px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .26em;
  color: var(--fg-dim);
  margin-top: .3rem;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: .35rem; }

.nav a {
  position: relative;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .3rem;
  height: 1px;
  background: var(--accent);
  scale: 0 1;
  transform-origin: left;
  transition: scale .25s var(--ease);
}
.nav a:hover { color: var(--fg); background: rgba(255, 255, 255, .04); }
.nav a:hover::after,
.nav a[aria-current='page']::after { scale: 1 1; }
.nav a[aria-current='page'] { color: var(--fg); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--fg);
  position: relative;
  transition: background .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--fg);
  transition: translate .22s var(--ease), rotate .22s var(--ease);
}
.nav-toggle span::before { translate: 0 -5.5px; }
.nav-toggle span::after  { translate: 0 5.5px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { translate: 0 0; rotate: 45deg; }
body.nav-open .nav-toggle span::after  { translate: 0 0; rotate: -45deg; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(11, 11, 13, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.5rem;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s var(--ease), visibility .3s;
  }
  body.nav-open .nav {
    max-height: 80vh;
    visibility: visible;
    overflow-y: auto;
  }
  .nav a {
    padding: 1rem .25rem;
    font-size: .82rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav a::after { display: none; }
  .nav a[aria-current='page'] { color: var(--accent); }
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .95rem 1.6rem;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), translate .2s var(--ease);
}
.btn:hover { border-color: var(--fg-muted); background: rgba(255, 255, 255, .05); translate: 0 -2px; }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #16120a;
  font-weight: 500;
}
.btn--accent:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #16120a; }

.btn--ghost { border-color: transparent; padding-inline: .25rem; color: var(--accent); }
.btn--ghost:hover { background: none; border-color: transparent; color: var(--accent-hi); }

.btn .arr { transition: translate .2s var(--ease); }
.btn:hover .arr { translate: 3px 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(560px, 88svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.92) contrast(1.05);
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 72% 22%, rgba(245, 148, 34, .16), transparent 62%),
    linear-gradient(180deg, rgba(11, 11, 13, .82) 0%, rgba(11, 11, 13, .38) 34%, rgba(11, 11, 13, .93) 88%, var(--bg) 100%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  max-width: var(--page-wide);
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero h1 { margin-block: 1.1rem .9rem; }
.hero__roles {
  font-family: var(--font-mono);
  font-size: clamp(.78rem, 1.3vw, .95rem);
  letter-spacing: .1em;
  color: var(--fg-muted);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin-bottom: 2rem;
}
.hero__roles span { display: inline-flex; align-items: center; gap: 1rem; }
.hero__roles span:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.hero .btn-row { margin-top: .5rem; }

/* --- now-playing bar ------------------------------------------------------ */

.now {
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunk);
}
.now .wrap {
  max-width: var(--page-wide);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.75rem;
  padding-block: 1.1rem;
}
.now__label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.now__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-line);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 148, 34, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 148, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 148, 34, 0); }
}
.now__text { font-size: .92rem; color: var(--fg-muted); }
.now__text strong { color: var(--fg); font-weight: 500; }

/* --- page header (interior pages) ----------------------------------------- */

.page-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 88% -20%, rgba(245, 148, 34, .09), transparent 60%),
    var(--bg);
}
.page-head .wrap { max-width: var(--page-wide); }
.page-head h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); margin-block: .9rem .9rem; }
.page-head .lede { max-width: 58ch; }

/* --- production grid ------------------------------------------------------ */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2rem);
}

.prod {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prod[hidden] { display: none; }

.prod__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s var(--ease), filter .4s var(--ease);
}
.prod:hover .prod__media img { scale: 1.045; filter: brightness(1.06); }

.prod__year {
  position: absolute;
  top: .7rem;
  left: .7rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  padding: .28rem .55rem;
  border-radius: 5px;
  background: rgba(8, 8, 10, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  color: var(--fg-muted);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 100px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-hi);
  white-space: nowrap;
}
.tag--flat { background: rgba(255, 255, 255, .05); border-color: var(--line-strong); color: var(--fg-muted); }

.prod__flags {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
}

.prod__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin-bottom: .45rem;
}
.prod__role {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: .3rem;
}
.prod__venue {
  font-size: .88rem;
  color: var(--fg-dim);
  margin-bottom: .85rem;
}

/* credits disclosure */
.credits { margin-top: auto; border-top: 1px solid var(--line); }
.credits > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0 .2rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .18s var(--ease);
}
.credits > summary::-webkit-details-marker { display: none; }
.credits > summary:hover { color: var(--accent); }
.credits > summary .chev { transition: rotate .25s var(--ease); }
.credits[open] > summary { color: var(--accent); }
.credits[open] > summary .chev { rotate: 180deg; }

.credits dl {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: .3rem .9rem;
  padding: .55rem 0 .85rem;
  font-size: .84rem;
}
.credits dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: .28rem;
}
.credits dd { color: var(--fg-muted); }

/* --- filter bar ----------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-block: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
}
.filters__label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-right: .5rem;
}
.chip {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.chip:hover { color: var(--fg); border-color: var(--fg-dim); }
.chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #16120a;
}
.filters__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--fg-dim);
  letter-spacing: .06em;
}

.empty-state {
  padding: 4rem 0;
  text-align: center;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- feature (spotmon / project hero) ------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .feature { grid-template-columns: 1.05fr .95fr; }
  .feature--flip .feature__body { order: -1; }
}
.feature__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  aspect-ratio: 16 / 10;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__body h3 { margin-block: .9rem 1rem; }
.feature__body .lede { margin-bottom: 1.5rem; }

.spec-list {
  display: grid;
  gap: .1rem;
  margin: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.spec-list > div {
  display: grid;
  grid-template-columns: minmax(110px, 26%) 1fr;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.spec-list dt,
.spec-list .k {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: .25rem;
}
.spec-list dd,
.spec-list .v { color: var(--fg-muted); }

/* --- breadcrumb ----------------------------------------------------------- */

.crumb {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.crumb a { color: var(--fg-dim); transition: color .18s var(--ease); }
.crumb a:hover { color: var(--accent); }

/* --- standalone figure ---------------------------------------------------- */

.shot-figure {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.shot-figure img { width: 100%; }
.shot-figure figcaption {
  padding: .95rem 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--fg-dim);
}
/* diagrams read better on a light card than inverted on the dark page */
.shot-figure--diagram { background: #fff; }
.shot-figure--diagram img { padding: 1rem; }

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.figure-grid .shot-figure { display: flex; flex-direction: column; }
.figure-grid .shot-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.figure-grid .shot-figure figcaption { margin-top: auto; }

/* two-part project split */
.part-label {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: .8rem;
}
.part-label .n {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  padding: .2rem .7rem;
}
.part-label span:last-child {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* --- cards ---------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .22s var(--ease), translate .22s var(--ease), background .22s var(--ease);
}
.card:hover { border-color: var(--line-strong); translate: 0 -3px; background: var(--bg-elev-2); }

.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.card:hover .card__media img { scale: 1.04; }

.card__body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.card__body p { font-size: .92rem; color: var(--fg-muted); }
.card__meta {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: .7rem;
}
.card__foot { margin-top: auto; padding-top: 1.2rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }

/* a whole card that is a link */
a.card:hover .card__go { color: var(--accent-hi); }
a.card:hover .card__go .arr { translate: 3px 0; }
.card__go {
  margin-top: auto;
  padding-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color .18s var(--ease);
}
.card__go .arr { transition: translate .2s var(--ease); }

/* --- project feature ------------------------------------------------------ */

.project-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
  transition: border-color .22s var(--ease);
}
.project-feature:hover { border-color: var(--line-strong); }
@media (min-width: 940px) {
  .project-feature { grid-template-columns: 1.15fr .85fr; }
}
.project-feature__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 940px) {
  .project-feature__media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
}
.project-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.project-feature:hover .project-feature__media img { scale: 1.03; }
.project-feature__body {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-feature__body h2 { margin-block: .8rem 1rem; }

/* --- org list ------------------------------------------------------------- */

.org-list { border-top: 1px solid var(--line); }
.org {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
@media (min-width: 760px) {
  .org {
    grid-template-columns: minmax(200px, 1.1fr) minmax(180px, 1fr) minmax(140px, .8fr) auto;
    align-items: baseline;
  }
}
.org__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; }
.org__role { color: var(--fg-muted); font-size: .93rem; }
.org__sup  { color: var(--fg-dim); font-size: .87rem; }
.org__sup span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; display: block; }
.org__years {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--accent);
  letter-spacing: .05em;
  white-space: nowrap;
}

/* --- credentials (awards / certifications) -------------------------------- */

.cred-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 4vw, 3.5rem);
}
@media (min-width: 860px) { .cred-cols { grid-template-columns: 1fr 1fr; } }

.cred-cols > section > h3 {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.cred-list { border-top: 1px solid var(--line); }

.cred {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.cred__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.012em;
  line-height: 1.3;
}
.cred__meta { grid-column: 1; font-size: .88rem; color: var(--fg-dim); }
.cred__year {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--accent);
  white-space: nowrap;
  padding-top: .18rem;
}

/* Obvious, deletable stub rows — styled so they can't be mistaken for real
   credentials if one is left in by accident. */
.cred--stub {
  border-bottom-style: dashed;
  border-bottom-color: var(--line-strong);
}
.cred--stub .cred__name { color: var(--fg-dim); font-weight: 500; }
.cred--stub .cred__meta { font-style: italic; }
.cred--stub .cred__year {
  color: var(--fg-dim);
  border: 1px dashed var(--line-strong);
  border-radius: 100px;
  padding: .1rem .55rem;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- resume tables -------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  -webkit-overflow-scrolling: touch;
}
table.credits-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: .9rem;
}
.credits-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: left;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.credits-table td {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
  vertical-align: top;
}
.credits-table tbody tr:last-child td { border-bottom: 0; }
.credits-table tbody tr:hover td { background: rgba(255, 255, 255, .022); }
.credits-table td:first-child { color: var(--fg); font-weight: 500; }
.credits-table .yr { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); white-space: nowrap; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--fg-dim);
}

/* --- gallery -------------------------------------------------------------- */

.masonry {
  column-count: 1;
  column-gap: clamp(.75rem, 1.4vw, 1.1rem);
}
@media (min-width: 560px)  { .masonry { column-count: 2; } }
@media (min-width: 900px)  { .masonry { column-count: 3; } }
@media (min-width: 1400px) { .masonry { column-count: 4; } }

.shot {
  break-inside: avoid;
  margin-bottom: clamp(.75rem, 1.4vw, 1.1rem);
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  cursor: zoom-in;
  text-align: left;
}
.shot img { width: 100%; transition: scale .5s var(--ease), filter .3s var(--ease); }
.shot:hover img { scale: 1.03; filter: brightness(.75); }
.shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(8, 8, 10, .92));
  opacity: 0;
  translate: 0 8px;
  transition: opacity .25s var(--ease), translate .25s var(--ease);
  pointer-events: none;
}
.shot:hover .shot__cap,
.shot:focus-visible .shot__cap { opacity: 1; translate: 0 0; }
.shot__cap b { display: block; font-weight: 500; font-size: .9rem; }
.shot__cap span {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.load-more { display: flex; justify-content: center; padding-top: 2.5rem; }

/* --- case study ------------------------------------------------------------
   Long-form project pages. A sticky rail fills the left margin with navigation
   and metadata so body copy can run at a proper measure instead of a lonely
   column floating in the middle of a wide page. Figures are height-capped —
   most of the source photography is portrait, and full-width portrait images
   swallow the screen.
   -------------------------------------------------------------------------- */

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 1040px) {
  .case {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.case-rail { min-width: 0; }
@media (min-width: 1040px) {
  .case-rail { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.case-rail h4 {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: .9rem;
}

.case-rail ol { list-style: none; margin-bottom: 2.25rem; }
.case-rail ol a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: .3rem;
  padding: .6rem 0 .6rem .8rem;
  border-left: 2px solid var(--line);
  font-size: .88rem;
  color: var(--fg-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.case-rail ol a span:first-child { font-family: var(--font-mono); font-size: .66rem; padding-top: .18rem; }
.case-rail ol a:hover { color: var(--fg); border-left-color: var(--fg-dim); }
.case-rail ol a.is-active { color: var(--accent); border-left-color: var(--accent); }

.case-rail dl {
  display: grid;
  gap: .1rem;
  border-top: 1px solid var(--line);
}
.case-rail dt {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: .8rem;
}
.case-rail dd { font-size: .85rem; color: var(--fg-muted); padding-bottom: .8rem; border-bottom: 1px solid var(--line); }

/* body: prose runs at a readable measure, everything else uses the full column.
   Scoped to top-level flow children only — text already inside a .case-split
   column is narrow enough and must not be capped twice. */
.case-body { min-width: 0; }

.case-body > p,  .case-section > p,
.case-body > ul, .case-section > ul,
.case-body > ol, .case-section > ol,
.case-body > h3, .case-section > h3,
.case-body > .note, .case-section > .note,
.case-body > .lede, .case-section > .lede { max-width: 78ch; }

.case-body > p + p, .case-section > p + p { margin-top: 1.15rem; }

.case-body > h3, .case-section > h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  margin: 2.75rem 0 1rem;
}
.case-body > h3:first-child, .case-section > h3:first-child { margin-top: 0; }

.case-body > ul, .case-section > ul { margin: 1rem 0 1rem 1.15rem; color: var(--fg-muted); }
.case-body > ul li, .case-section > ul li { margin-bottom: .6rem; padding-left: .3rem; }
.case-body > ul li::marker, .case-section > ul li::marker { color: var(--accent); }

.case-body > .note, .case-section > .note { margin-block: 1.75rem; }
.case-section > .lede { margin-bottom: 1.25rem; }
.case-body code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .12em .42em;
  color: var(--accent-hi);
}

.case-section + .case-section { margin-top: clamp(3.5rem, 7vw, 6rem); }
.case-section > h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

/* Heading block for reference-style sections (résumé). Supplies the rhythm the
   alternating section backgrounds used to give, now that everything sits in one
   continuous column beside the rail. */
.case-section__head {
  padding-bottom: 1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--line-strong);
}
.case-section__head .eyebrow { display: block; margin-bottom: .7rem; }
.case-section__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0; }
.case-section__head .muted { margin-top: .8rem; font-size: .92rem; }

/* figures ------------------------------------------------------------------ */

.fig {
  margin-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}
.fig__img {
  display: grid;
  place-items: center;
  background: var(--bg-sunk);
  overflow: hidden;
}
.fig__img img {
  max-height: 56svh;
  width: auto;
  max-width: 100%;
}
.fig figcaption {
  padding: .85rem 1.15rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--fg-dim);
}
/* diagrams: dark-on-white line art needs a light plate, and width beats height */
.fig--diagram .fig__img { background: #fff; padding: clamp(.75rem, 2vw, 1.5rem); }
.fig--diagram .fig__img img { max-height: none; width: 100%; }

/* text beside a figure */
.case-split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: center;
}
@media (min-width: 820px) {
  .case-split { grid-template-columns: 1.05fr .95fr; }
  .case-split--wide-media { grid-template-columns: .9fr 1.1fr; }
}
.case-split .fig { margin-block: 0; }
.case-split .fig__img img { max-height: 46svh; }
.case-split h3 { margin-top: 0; }
.case-split ul { margin: 0 0 0 1.15rem; color: var(--fg-muted); }
.case-split li { margin-bottom: .55rem; padding-left: .3rem; }
.case-split li::marker { color: var(--accent); }

/* small photo row */
.fig-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.fig-row .fig { margin: 0; display: flex; flex-direction: column; }
.fig-row .fig__img { aspect-ratio: 3 / 4; }
.fig-row .fig__img img { max-height: none; width: 100%; height: 100%; object-fit: cover; }
.fig-row .fig figcaption { margin-top: auto; font-size: .78rem; padding: .7rem .9rem; }

/* --- document groups (paperwork) ------------------------------------------ */

.doc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}

.doc-group + .doc-group { margin-top: clamp(3.25rem, 6vw, 5rem); }

.doc-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--line-strong);
}
.doc-group__head h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.doc-group__head .num {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--accent);
}
.doc-group__blurb { font-size: .92rem; color: var(--fg-dim); max-width: 48ch; margin-top: .45rem; }
.doc-group__count {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.doc {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .22s var(--ease), translate .22s var(--ease);
}
.doc:hover { border-color: var(--accent-line); translate: 0 -3px; }

/* Documents get contained, never cropped — a magic sheet with its edge cut
   off is worse than useless. */
.doc__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: .75rem;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.doc__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  transition: scale .4s var(--ease);
}
.doc:hover .doc__media img { scale: 1.03; }

.doc__body { padding: .95rem 1.1rem 1.15rem; }
.doc__title { font-weight: 500; font-size: .95rem; line-height: 1.35; margin-bottom: .3rem; }
.doc__meta {
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.doc-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: .6rem;
  min-height: 190px;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .012);
}
.doc-empty__icon { height: 30px; width: auto; opacity: .3; }
.doc-empty p {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.doc-empty span { font-size: .84rem; color: var(--fg-dim); opacity: .75; font-family: var(--font-body); letter-spacing: 0; text-transform: none; }

/* --- lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(6, 6, 8, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox figure {
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100svh - 12rem);
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox figcaption { text-align: center; font-size: .92rem; color: var(--fg-muted); }
.lightbox figcaption span {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .35rem;
}
.lb-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(19, 19, 23, .8);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lb-btn:hover { background: var(--bg-elev-2); border-color: var(--fg-dim); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev  { left: clamp(.5rem, 2vw, 2rem);  top: 50%; translate: 0 -50%; }
.lb-next  { right: clamp(.5rem, 2vw, 2rem); top: 50%; translate: 0 -50%; }
.lb-count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--fg-dim);
}
body.lb-open { overflow: hidden; }

/* --- prose ---------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.15rem; }
.prose h3 { margin: 2.5rem 0 1rem; }
.prose ul { margin: 1rem 0 1rem 1.15rem; color: var(--fg-muted); }
.prose li { margin-bottom: .5rem; padding-left: .3rem; }
.prose li::marker { color: var(--accent); }
.prose code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .12em .42em;
  color: var(--accent-hi);
}

.kit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.kit > div { background: var(--bg-elev); padding: 1.4rem; }
.kit h4 {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .8rem;
}
.kit ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.kit li { font-size: .9rem; color: var(--fg-muted); }

/* --- CTA ------------------------------------------------------------------ */

.cta {
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(245, 148, 34, .1), transparent 62%),
    var(--bg-sunk);
  border-block: 1px solid var(--line);
}
.cta h2 { margin-bottom: 1rem; }
.cta .lede { margin: 0 auto 2rem; }
.cta .btn-row { justify-content: center; }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.site-footer .wrap { max-width: var(--page-wide); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 780px) {
  .footer-grid { grid-template-columns: minmax(180px, 1fr) 2fr; gap: 4rem; }
}
.footer-logo { width: 108px; opacity: .92; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
}
.footer-cols h4 {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1rem;
}
.footer-cols ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-cols a { font-size: .92rem; color: var(--fg-muted); transition: color .18s var(--ease); }
.footer-cols a:hover { color: var(--accent); }

.footer-bar {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* --- reveal on scroll ----------------------------------------------------- */

.reveal { opacity: 0; translate: 0 18px; }
.reveal.in { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease), translate .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; }
}
.no-js .reveal { opacity: 1; translate: 0 0; }

/* --- misc ----------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.note {
  border-left: 2px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9rem;
  color: var(--fg-muted);
}

@media print {
  .site-header, .site-footer, .filters, .cta, .btn-row { display: none !important; }
  body { background: #fff; color: #000; }
  .credits-table td, .credits-table thead th { color: #000; }
}