/* ===========================================================
   DHEE — portfolio scaffold
   Layout logic borrowed from a reference site's structure:
   3-way nav (link / mark / link), full-bleed hero reel,
   edge-to-edge two-column work grid, split about layout.
   Dark theme: near-black surfaces, pure-white primary text, and
   a gold accent, with a system-font stack.

   ---------------------------------------------------------------
   QUICK-EDIT GUIDE — most manual tweaks only need this :root block.
   - Colors: change the hex values below; every component references
     these variables, so one edit re-themes the whole site.
   - Fonts: swap the family names in --serif/--sans/--mono. If you
     add a new Google Font, also update the <link href="fonts...">
     tag near the top of each .html file to actually load it.
   - Hero "2026" numeral: --hero-year-size (how big), --hero-year-
     stretch (vertical stretch factor, 1 = no stretch).
   - Glass panels (nav bar, reel box): --glass-blur / --glass-sat
     control the frosted-glass strength everywhere at once.
   - Page text content (headlines, bio, captions) lives directly in
     the .html files — look for "EDIT:" comments marking the spots
     meant to be edited by hand.
   --------------------------------------------------------------- */

:root {
  /* colors */
  --void:      #0b0a08;
  --void-2:    #17140f;
  --void-3:    #211d16;
  --bone:      #ffffff;
  --bone-dim:  #b9b3a6;
  --gold:      #c6a15b;
  --gold-soft: #d8bb84;
  --crack:     #3a352c;

  /* fonts */
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* layout */
  --nav-h: 110px;
  --edge: clamp(20px, 5vw, 64px);

  /* hero "2026" numeral */
  --hero-year-size: clamp(48px, 22vw, 420px);
  --hero-year-stretch: 1.8;

  /* frosted-glass strength, used by the nav bar + reel box */
  --glass-blur: 20px;
  --glass-sat: 170%;
}

* { box-sizing: border-box; }

html { background: var(--void); }

/* ambient glow behind the whole page — the glass elements (nav bar,
   reel plate, "2026" text-clip) have nothing to reveal without this,
   since they'd otherwise just be blurring a single flat color. this
   scrolls with the document (not fixed), so different glow patches
   drift past the sticky nav's blur as you scroll down the page. */
body {
  margin: 0;
  background:
    radial-gradient(60% 32% at 18% 6%, rgba(198, 161, 91, 0.22), transparent 70%),
    radial-gradient(48% 28% at 88% 40%, rgba(154, 51, 36, 0.16), transparent 70%),
    radial-gradient(55% 36% at 25% 85%, rgba(198, 161, 91, 0.14), transparent 70%),
    radial-gradient(45% 30% at 80% 95%, rgba(154, 51, 36, 0.12), transparent 70%),
    var(--void);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* looping background on every page — soft gold/red glow blobs that
   slowly drift and breathe behind everything (the <div class="bg-glow">
   at the top of each page's <body>). each blob's color, size, start
   spot and loop length are set on its nth-child below; raise/lower the
   opacities there to make the effect stronger/subtler. */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* everything below the nav bar eases in from 0 to 100% opacity on
   load, after a short delay (it stays hidden until then); the nav and
   background glow stay put. change the duration, easing and delay here
   (blog posts use their own entrance — see .blog-page) */
main,
.site-footer {
  position: relative;
  z-index: 1;
  animation: page-in 0.6s ease-in 0.3s backwards;
}

@keyframes page-in {
  from { opacity: 0; }
}

/* ...and fades back out when leaving for another page (script.js adds
   .is-leaving, then navigates once this has played) */
body.is-leaving main,
body.is-leaving .site-footer {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.bg-glow span {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color) 0%, transparent 65%);
  animation: bg-glow-drift var(--dur) ease-in-out infinite alternate;
  will-change: transform;
}

.bg-glow span:nth-child(1) { --color: rgba(198, 161, 91, 0.32); --size: 70vmax; --x: 15%; --y: 10%; --dur: 12s; --dx: 30vw;  --dy: 35vh; }
.bg-glow span:nth-child(2) { --color: rgba(154, 51, 36, 0.30);  --size: 60vmax; --x: 88%; --y: 35%; --dur: 15s; --dx: -35vw; --dy: 30vh; animation-delay: -5s; }
.bg-glow span:nth-child(3) { --color: rgba(198, 161, 91, 0.24); --size: 55vmax; --x: 30%; --y: 90%; --dur: 17s; --dx: 40vw;  --dy: -35vh; animation-delay: -9s; }
.bg-glow span:nth-child(4) { --color: rgba(154, 51, 36, 0.24);  --size: 50vmax; --x: 75%; --y: 95%; --dur: 14s; --dx: -30vw; --dy: -40vh; animation-delay: -3s; }

@keyframes bg-glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(calc(var(--dx) * 0.6), calc(var(--dy) * -0.4), 0) scale(1.25); }
  100% { transform: translate3d(var(--dx), var(--dy), 0) scale(0.85); }
}

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

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

:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--edge);
  background: rgba(11, 10, 8, 0.7);
  background: color-mix(in srgb, var(--void) 70%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-nav__link {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.2s ease;
  position: relative;
  width: max-content;
  padding-bottom: 3px;
}

.site-nav__group {
  display: flex;
  align-items: center;
  gap: 72px;
  justify-self: start;
}

.site-nav__link:last-child { justify-self: end; }

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.25s ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--bone);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  right: 0;
}

/* sliding underline (script.js) — once it's running, it replaces the
   current page's static underline, and on click it glides to the
   clicked link before the next page opens */
.site-nav__indicator {
  position: absolute;
  height: 1px;
  background: var(--gold);
  pointer-events: none;
  transition: left 0.45s cubic-bezier(.65, 0, .35, 1), width 0.45s cubic-bezier(.65, 0, .35, 1), opacity 0.3s ease;
}

.site-nav--indicator .site-nav__link[aria-current="page"]::after,
.site-nav--sliding .site-nav__link::after {
  right: 100%;
}

/* logo mark */
.mark {
  position: relative;
  width: 95px;
  height: 95px;
  display: grid;
  place-items: center;
}

.mark__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* shine that sweeps across the letters every few seconds, cut to the
   logo's shape by using the logo itself as a mask */
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  -webkit-mask: url("images/brand/dr-logo.png") center / contain no-repeat;
  mask: url("images/brand/dr-logo.png") center / contain no-repeat;
  animation: mark-shine 5s ease-in-out infinite;
}

@keyframes mark-shine {
  0%, 55% { background-position: 130% 0; }
  100%    { background-position: -30% 0; }
}

/* ---------- reusable crack divider ---------- */

.crack {
  width: 100%;
  height: 18px;
  color: var(--crack);
}

.crack--gold { color: var(--gold); opacity: 0.5; }

/* ---------- footer credential line, used on about ---------- */

.credit-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}

.credit-line a { color: var(--bone); border-bottom: 1px solid var(--crack); }
.credit-line a:hover { border-color: var(--gold); color: var(--gold-soft); }

/* ===========================================================
   HOME
   =========================================================== */

.hero-wrap {
  padding: clamp(8px, 1.5vh, 18px) var(--edge) 0;
}

.hero-frame {
  position: relative;
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vh, 12px);
  padding: clamp(32px, 6vh, 64px) 0;
  border-radius: 18px;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    repeating-linear-gradient(115deg, rgba(198,161,91,0.05) 0px, rgba(198,161,91,0.05) 1px, transparent 1px, transparent 5px);
  opacity: 0.5;
  pointer-events: none;
}

/* full-bleed reel stage — plate + numerals sized together off its aspect ratio */
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 2.7 / 1;
  background: #000;
  border-radius: 24px;
}

.hero-plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 60%);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 50px rgba(255,255,255,0.04),
    0 24px 70px rgba(0,0,0,0.5);
}

.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.16) 0%, transparent 35%, transparent 65%, rgba(255,255,255,0.06) 100%);
  pointer-events: none;
}

/* sits on top of the glass plate; the video iframe is injected into it
   on page load (see script.js) */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}

.hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-year-row {
  position: relative;
  top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 70px);
  font-size: var(--hero-year-size);
  line-height: 1;
  /* the digits are stretched upward past this box, and the mask below
     clips anything outside it — so grow the box up by the stretch amount
     (it tucks behind the reel) and pull it back with an equal negative
     margin, leaving the layout unchanged but the digit tops uncut */
  padding-top: calc((var(--hero-year-stretch) - 1) * 1em);
  margin-top: calc((1 - var(--hero-year-stretch)) * 1em);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

/* glass look built from a light-sheen gradient + stroke + shadow rather
   than backdrop-filter-through-text-clip, which doesn't render reliably
   across browsers. color must be fully transparent (not just dim) or it
   paints over the clipped gradient wherever the clip does work. */
.year-digit {
  z-index: 0;
  font-family: "Anton", var(--sans);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(155deg,
    rgba(216, 187, 132, 0.95) 0%,
    rgba(198, 161, 91, 0.3) 32%,
    rgba(198, 161, 91, 0.12) 52%,
    rgba(198, 161, 91, 0.55) 72%,
    rgba(216, 187, 132, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 26px rgba(198, 161, 91, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

/* higher specificity than the shared .kinetic-letter rule below (which sets
   animation-name: kinetic-in), so the vertical stretch survives */
.year-digit.kinetic-letter {
  animation-name: kinetic-in-year-digit;
}

@keyframes kinetic-in-year-digit {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0) rotateX(70deg) rotateZ(calc(var(--dir, 1) * 10deg)) scale(0.7) scaleY(var(--hero-year-stretch));
    filter: blur(8px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0) scale(1) scaleY(var(--hero-year-stretch));
    filter: blur(0);
  }
}

/* ---------- kinetic typography intro ---------- */

.kinetic-word {
  perspective: 700px;
}

.kinetic-letter {
  display: inline-block;
  transform-origin: 50% 100%;
}

.kinetic-letter:nth-child(odd)  { --dir: 1; }
.kinetic-letter:nth-child(even) { --dir: -1; }

@keyframes kinetic-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0) rotateX(70deg) rotateZ(calc(var(--dir, 1) * 10deg)) scale(0.7);
    filter: blur(8px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0) scale(1);
    filter: blur(0);
  }
}

.kinetic-letter {
  animation: kinetic-in 0.9s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i) * 90ms + 150ms);
}

.intro-block {
  padding: clamp(48px, 9vh, 100px) var(--edge) clamp(60px, 10vh, 120px);
  max-width: 68ch;
}

.intro-block p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.45;
  color: var(--bone);
  margin: 0;
}

.intro-block p + p { margin-top: 18px; color: var(--bone-dim); font-family: var(--sans); font-size: 15px; line-height: 1.7; }

/* ===========================================================
   WORK GRID
   =========================================================== */

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--crack);
}

@keyframes work-tile-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.work-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-right: 1px solid var(--crack);
  border-bottom: 1px solid var(--crack);
  display: block;
  animation: work-tile-in 0.8s cubic-bezier(.16, 1, .3, 1) both;
}

.work-tile:nth-child(1) { animation-delay: 0.05s; }
.work-tile:nth-child(2) { animation-delay: 0.15s; }
.work-tile:nth-child(3) { animation-delay: 0.25s; }
.work-tile:nth-child(4) { animation-delay: 0.35s; }
.work-tile:nth-child(5) { animation-delay: 0.45s; }
.work-tile:nth-child(6) { animation-delay: 0.55s; }
.work-tile:nth-child(7) { animation-delay: 0.65s; }
.work-tile:nth-child(8) { animation-delay: 0.75s; }
.work-tile:nth-child(9) { animation-delay: 0.85s; }
.work-tile:nth-child(10) { animation-delay: 0.95s; }
.work-tile:nth-child(n+11) { animation-delay: 1.05s; }

.work-tile:nth-child(2n) { border-right: none; }

.work-tile--wide { grid-column: 1 / -1; aspect-ratio: 16 / 6; }

.work-tile__surface {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: no-preference) {
  .work-tile:hover .work-tile__surface { transform: scale(1.045); }
}

.work-tile__info {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 22px clamp(18px, 3vw, 34px);
  background: linear-gradient(0deg, rgba(11,10,8,0.92) 0%, rgba(11,10,8,0.55) 55%, transparent 100%);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover-preview video — added by script.js on tiles with [data-hover-video-id].
   Sits above the poster image, below the title/eyebrow overlay; fades in on
   hover and is torn down on mouse-leave so it actually stops playing. */
.work-tile__hover-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.work-tile__hover-video.is-visible { opacity: 1; }

.work-tile__hover-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .work-tile__info { transform: translateY(14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .work-tile__info { transform: none; opacity: 1; }
}

.work-tile:hover .work-tile__info,
.work-tile:focus-visible .work-tile__info { transform: translateY(0); opacity: 1; }

.work-tile__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--bone);
  margin: 6px 0 0;
}

/* per-project placeholder textures, standing in for renders */

.tile-caesar .work-tile__surface {
  background-image: url("images/work/ordinary/ender_1.Redshift_ROP2.0196.png");
  background-size: cover;
  background-position: center;
}
.tile-startalk .work-tile__surface {
  background-image: url("https://i.vimeocdn.com/video/2202692629-80c9230a93ba77db6a446bab8094be84ff507ed59a7311efc3cf3e759cde9ea3-d_1920x1080?region=us");
  background-size: cover;
  background-position: center;
}
.tile-mpm .work-tile__surface {
  background-image: url("https://i.vimeocdn.com/video/2202692168-47a91e04a0aadc1eaef9b44dbdf85e773bee6c01548ec9a10fc55cc3eb2fc116-d_1920x1080?region=us");
  background-size: cover;
  background-position: center;
}
.tile-pyro .work-tile__surface {
  background-image: url("https://i.vimeocdn.com/video/2205993569-da19ab455ca366a5be943cb370d88c25bf699eb976a1b8529c096cac4da60857-d_1920x1080?region=us");
  background-size: cover;
  background-position: center;
}
.tile-fish .work-tile__surface {
  background-image: url("https://i.vimeocdn.com/video/2205993961-ae418e8c0f5670a4e81df8dd48f02d665ff01b92e39508f99f8080d2ec602403-d_1920x1080?region=us");
  background-size: cover;
  background-position: center;
}
.tile-comp .work-tile__surface {
  background-image: url("https://i.vimeocdn.com/video/2205993180-08f87853a7fb2930cbce29f02238b4c3d318fe236238a84c7a9e630c47b6838c-d_1920x1080?region=us");
  background-size: cover;
  background-position: center;
}
.tile-wine .work-tile__surface {
  background-image: url("https://i.vimeocdn.com/video/2205992296-410a66fb18f9e4cedd4051b5da47d5d339093ac7d6d8da2e6ca7ac94fc84da4d-d_1920x1080?region=us");
  background-size: cover;
  background-position: center;
}

/* blog placeholder textures, standing in for real post images */

.tile-vfx72801 .work-tile__surface {
  background-image: url("https://img.youtube.com/vi/tTRTYe555nc/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}
.tile-post1 .work-tile__surface {
  background:
    radial-gradient(70% 90% at 70% 15%, rgba(198,161,91,0.3), transparent 60%),
    linear-gradient(150deg, #0d0b08, #221c15 55%, #3a2f20);
}

/* ---------- blog post page (blog-post.html) ---------- */

@keyframes blog-page-in {
  0% {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.blog-page {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) var(--edge) clamp(60px, 10vh, 120px);
  /* backwards, not both — a held end state would override the fade-out
     when leaving the page (body.is-leaving) */
  animation: blog-page-in 0.7s cubic-bezier(.16, 1, .3, 1) 0.3s backwards;
}

.blog-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}

.blog-back:hover { color: var(--gold-soft); }

/* ---------- work-tile project popup ---------- */

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--edge);
}

.project-modal[hidden] { display: none; }

.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 8, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.project-modal__frame {
  position: relative;
  z-index: 1;
  width: min(1080px, 94%);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 18px;
  padding: clamp(32px, 6vw, 72px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 60%), var(--void-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.project-modal.is-open .project-modal__backdrop { opacity: 1; }
.project-modal.is-open .project-modal__frame { opacity: 1; transform: scale(1); }

.project-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--crack);
  background: rgba(11, 10, 8, 0.7);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.project-modal__close:hover,
.project-modal__close:focus-visible {
  border-color: var(--gold);
  color: var(--gold-soft);
}

.project-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--bone);
  margin: 6px 0 0;
}

.project-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-dim);
  margin: 18px 0 0;
  max-width: 60ch;
}

.project-section-heading {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 30px 0 0;
}

.project-bullets {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 60ch;
  margin: 10px 0 0;
  padding-left: 20px;
}

.project-bullets li { margin-top: 4px; }
.project-bullets li::marker { color: var(--gold); }

.project-section-heading + .project-body { margin-top: 8px; }

.project-media {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}

.project-media__placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--crack);
}

/* real embeds go here once added — see the EDIT comment in work.html */
.project-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}

.project-video iframe,
.project-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

/* never upscale past the image's own size, and cap tall screenshots
   so they don't tower over the page */
.project-media img {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  justify-self: center;
  border-radius: 12px;
}

/* ===========================================================
   ABOUT
   =========================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(20px, 4vh, 40px) var(--edge) clamp(60px, 10vh, 120px);
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 90% at 30% 10%, #241d13 0%, var(--void) 65%);
  overflow: hidden;
}

.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: clamp(8px, 2vh, 30px);
}

.about-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  margin: 0;
  color: var(--bone);
}

.about-name em {
  font-style: italic;
  color: var(--gold-soft);
}

.about-role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 6px 0 0;
}

.about-bio {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--bone-dim);
  max-width: 58ch;
}

.about-bio strong { color: var(--bone); font-weight: 600; }

.about-resume-btn {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--gold);
  padding: 12px 22px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.about-resume-btn:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.social-row { display: flex; gap: 18px; }

.social-row > a,
.mail-pop__toggle {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--crack);
  background: none;
  color: var(--bone-dim);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.social-row > a:hover,
.mail-pop__toggle:hover,
.mail-pop__toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-soft); }
.social-row svg { width: 22px; height: 22px; }

/* email popup, opened from the mail icon in the social row */
.mail-pop { position: relative; }

.mail-pop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 14px;
  min-width: max-content;
  padding: 16px 18px;
  background: var(--void);
  border: 1px solid var(--crack);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.mail-pop__menu[hidden] { display: none; }

.mail-pop__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 18px;
  align-items: center;
}

.mail-pop__label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.mail-pop__addr {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--bone);
}

.mail-pop__addr:hover { color: var(--gold-soft); }

.mail-pop__copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: none;
  border: 1px solid var(--crack);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mail-pop__copy:hover { border-color: var(--gold); color: var(--gold-soft); }

@media (max-width: 480px) {
  .mail-pop__addr { font-size: 12px; }
}

.about-credits {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

/* ---------- responsive ----------
   the site is fluid by default (clamp()/vw-based sizing throughout, so
   most things already scale smoothly between breakpoints); these two
   queries handle the spots that need an actual layout change rather
   than just getting smaller — the reel box's very wide aspect ratio,
   and grids that need to drop from multi-column to single-column. */

@media (max-width: 900px) {
  .hero-stage { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-tile { border-right: none !important; aspect-ratio: 4/3; }
  .work-tile--wide { aspect-ratio: 4/3; }
  .about-grid { grid-template-columns: 1fr; }
  .about-credits { align-items: flex-start; text-align: left; }
  .project-media { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-stage { aspect-ratio: 4 / 3; }
  .hero-year-row { top: 8px; }
}

/* ===========================================================
   FOOTER
   =========================================================== */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px var(--edge) 40px;
  border-top: 1px solid var(--crack);
}

.site-footer--home {
  margin-top: clamp(40px, 10vh, 140px);
}

.site-footer__links {
  display: flex;
  gap: 28px;
}

.site-footer__links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.2s ease;
}

.site-footer__links a:hover { color: var(--gold-soft); }

.site-footer__copy {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone-dim);
  margin: 0;
}

@media (max-width: 480px) {
  .site-footer { flex-direction: column; align-items: flex-start; }
}