/* johnnelsonvfx.com: one stylesheet for every page. */
:root{
  --bg:#0a0a0a;
  --bg-alt:#0d0d0d;
  --fg:#ffffff;
  --fg-dim:#cccccc;
  --fg-muted:#888888;
  --line:rgba(255,255,255,.08);
  --nav-h:56px;
  /* One left and right edge for the nav, the show text, the Projects intro and the contact band,
     growing with the screen (35px at 1024, 49 at 1440, 65 at 1920). Phones set their own. */
  --gutter:clamp(20px,3.4vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --fade:cubic-bezier(.2,.6,.2,1);
}
/* Arial (or Helvetica) sized like Outfit while Outfit is still on its way, so the words don't jump
   to new lines when it arrives. Measured against Outfit in Chrome (descriptions, bio, titles): its
   light and regular weights run about 98% as wide as Arial, its semibold 92% as wide as Arial Bold. */
@font-face{
  font-family:'Outfit Fallback';font-weight:100 500;
  src:local('Arial'),local('ArialMT'),local('Helvetica Neue'),local('Helvetica');
  size-adjust:97.9%;ascent-override:102.1%;descent-override:26.6%;line-gap-override:0%;
}
@font-face{
  font-family:'Outfit Fallback';font-weight:600 900;
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Neue Bold'),local('Helvetica Bold');
  size-adjust:92%;ascent-override:108.7%;descent-override:28.3%;line-gap-override:0%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Outfit','Outfit Fallback',system-ui,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
button{font-family:inherit}
[hidden]{display:none!important}
.keep{display:inline-block;max-width:100%}
/* A short hyphenated word (live-action, Five-0) is kept whole by the build, so a line never ends on "Five-". */
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-64px;z-index:100;
  background:#fff;color:#111;padding:10px 16px;border-radius:20px;
  font-size:13px;font-weight:500;
}
.skip-link:focus{top:8px}
.label{
  font-size:12px;font-weight:300;letter-spacing:.08em;
  color:var(--fg-muted);text-transform:uppercase;margin-bottom:14px;
}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--nav-h);padding:0 var(--gutter);
  background:rgba(10,10,10,.85);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:0.5px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.brand .name{font-size:15px;font-weight:600;letter-spacing:.01em}
.brand .dash{font-size:13px;font-weight:300;color:var(--fg-muted)}
.brand .title{font-size:13px;font-weight:300;letter-spacing:.05em;color:var(--fg-muted)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:300;color:var(--fg-dim);white-space:nowrap}
.nav-links a{padding:8px 0;transition:color .2s}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-divider{width:0.5px;height:16px;background:rgba(255,255,255,.15)}
.nav-icons{display:flex;align-items:center;gap:16px}
.nav-icons a{color:var(--fg-muted);display:flex;align-items:center;transition:color .2s}
.nav-icons svg{width:16px;height:16px;display:block}
.imdb-badge{
  display:inline-block;border:1px solid currentColor;border-radius:3px;
  padding:1px 5px;font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1.4;
}

/* ---------- shows (Work and Projects) ---------- */
.show{
  position:relative;
  min-height:92vh;
  min-height:92dvh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  scroll-margin-top:var(--nav-h);
}
.show.hero{min-height:calc(100vh - var(--nav-h));min-height:calc(100dvh - var(--nav-h))}
/* Shows meet like a fade to black and up again: each one fades down into the page colour at the
   bottom (the scrim) and up out of it at the top (this), with a short breath of black between. */
.show:not(.hero){margin-top:clamp(32px,4vh,56px)}
/* Eased, so the picture comes up out of the black without a visible edge, and above the scrim (but
   under the words), so the top row is exactly the page colour even where the scrim darkens. */
.show:not(.hero)::before{
  content:'';position:absolute;inset:0 0 auto;height:clamp(96px,18vh,200px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(10,10,10,.85) 20%,rgba(10,10,10,.5) 50%,rgba(10,10,10,.18) 75%,rgba(10,10,10,0) 100%);
}
.page-projects .intro + .show{margin-top:0}
.media{
  position:absolute;inset:0;
  overflow:hidden;
  background:#000;
  container-type:size;
}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media iframe{
  position:absolute;
  top:50%;left:50%;
  width:100vw;height:56.25vw;
  min-height:100%;min-width:177.77vh;
  transform:translate(-50%,-50%);
  pointer-events:none;
  border:0;
  opacity:0;
  transition:opacity 1.2s var(--fade);
}
/* The picture covers its box exactly. A clip with black bars (--lb, the real picture's shape inside
   the 16:9 video, e.g. 2.35) is drawn just large enough that the picture itself covers the box, so no
   bar (or a logo in a bar) shows, whatever the box's shape. The poster and the video loop are sized
   alike, so one dissolves into the other without a jump. A hair of extra zoom (--over) hides the soft
   grey rows at a bar's edge. Without container units this is skipped and the plain cover above stays. */
@supports (width:1cqw){
  .poster,.media iframe{
    top:50%;left:50%;right:auto;bottom:auto;
    width:calc(max(100cqw, var(--lb,1.7778) * 100cqh) * var(--over,1));
    height:calc(max(100cqw, var(--lb,1.7778) * 100cqh) * var(--over,1) * .5625);
    min-width:0;min-height:0;max-width:none;
    transform:translate(-50%,-50%);
  }
  .media[style*="--lb"]{--over:1.015}
}
.media iframe.is-playing{opacity:1}
/* Posters fade up from black once they have arrived whole (site.js marks them ready), instead of
   painting in strips. Only with JavaScript, and only for visitors who don't ask for less motion. If
   site.js never runs, they show anyway after a moment. */
@media (prefers-reduced-motion:no-preference){
  .js .poster{opacity:0;transition:opacity .9s var(--fade)}
  .js .poster.is-ready{opacity:1}
  .js:not(.js-run) .poster{animation:show-anyway .6s 3s forwards}
  .media.was-switched .poster{transition-duration:.45s}
  .media.is-switching .poster{opacity:0;transition:none}
}
@keyframes show-anyway{to{opacity:1}}
/* Darkness only where the words sit: behind the text on the left, and at the bottom, which ends in
   exactly the page colour (that layer is on top) so each show fades into the next without a seam.
   The pictures above stay as bright as graded. */
.scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.78) 12%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.14) 56%, rgba(0,0,0,0) 72%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.36) 34%, rgba(0,0,0,0) 62%);
}
.show.hero .scrim{
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.78) 12%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.14) 56%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 20%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.36) 34%, rgba(0,0,0,0) 62%);
}
/* Tablets and small laptops: the words take up more of the picture's height, so the dark reaches higher. */
@media (min-width:641px) and (max-width:1100px){
  .scrim,.show.hero .scrim{
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.8) 12%, rgba(0,0,0,.48) 40%, rgba(0,0,0,.32) 58%, rgba(0,0,0,.1) 72%, rgba(0,0,0,0) 82%),
      linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.36) 40%, rgba(0,0,0,0) 70%);
  }
}
/* Wide enough for a row of six clip buttons on a laptop; the description keeps its own shorter
   measure (36em), so the reading width doesn't change. */
.show .content{
  position:relative;z-index:2;
  padding:40px var(--gutter) clamp(56px,8vh,96px);
  width:100%;max-width:min(1120px,72vw);
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.tag{
  font-size:12px;font-weight:400;letter-spacing:.08em;
  color:#e6e6e6;text-transform:uppercase;margin-bottom:12px;
  max-width:46em;text-wrap:balance;overflow-wrap:anywhere;
}
.show h2{
  font-size:clamp(32px,4.4vw,76px);
  font-weight:600;line-height:1;letter-spacing:-.015em;margin-bottom:14px;
  text-wrap:balance;overflow-wrap:anywhere;
}
.show.hero h2{font-size:clamp(44px,5.6vw,88px);letter-spacing:-.022em;line-height:.96;margin-bottom:18px}
.awards-line{
  font-size:14px;font-weight:500;letter-spacing:.02em;color:#fff;
  margin:2px 0 16px;
}
.desc{font-size:clamp(15px,1.05vw,17px);font-weight:300;color:#e2e2e2;line-height:1.6;max-width:36em;text-wrap:pretty;overflow-wrap:anywhere}
.desc + .desc{margin-top:10px}
.clips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
/* Clip links (to the clip on Vimeo) that site.js turns into buttons; .is-current marks the first
   clip until it does. They are laid out exactly as the <button>s they replace. */
.clips a{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;line-height:normal;text-align:center;
  font-size:12px;font-weight:400;
  color:var(--fg-dim);
  background:rgba(255,255,255,.06);
  border:0.5px solid rgba(255,255,255,.15);
  padding:8px 14px;border-radius:20px;
  transition:background .25s,color .25s,border-color .25s,transform .12s;
  text-shadow:none;cursor:pointer;
}
/* The chosen clip's caption sits beside Watch, in the row the button already makes 48px tall (two
   lines fit), so choosing a clip with or without one moves nothing. Without JavaScript every caption
   is shown on its own line under Watch, starting with its clip's name. */
.actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.caption{flex:1 1 100%;font-size:13px;line-height:1.5;color:var(--fg-dim);max-width:36em;text-wrap:pretty;overflow-wrap:anywhere}
.caption-for{font-weight:400;color:#fff}
.js .caption,.js .caption-for{display:none}
.js .caption.is-current{display:block;flex:0 1 30em;min-width:min(12em,100%)}
html:not(.js) .actions{display:block}
html:not(.js) .caption{margin-top:10px}
html:not(.js) .btn-watch + .caption{margin-top:14px}
.btn-watch{
  display:inline-flex;align-items:center;gap:12px;
  min-height:48px;padding:0 22px 0 6px;border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:15px;font-weight:500;letter-spacing:.01em;
  transition:background .25s,color .25s,border-color .25s,transform .12s;
  text-shadow:none;
}
.btn-watch .play{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:#fff;color:#111;
  transition:background .25s,color .25s;
}
.btn-watch .play svg{width:14px;height:14px;margin-left:2px}
.watch-meta{font-weight:300;color:var(--fg-dim);transition:color .25s}
.empty-state{max-width:900px;margin:0 auto;padding:40px var(--gutter) 80px;color:var(--fg-muted);font-size:14px}

/* The hero's words rise in once, one after another, as the page opens (tablets and desktops). */
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  .show.hero .content > *{animation:rise .7s var(--ease) both;animation-delay:.46s}
  .show.hero .content > :nth-child(1){animation-delay:.1s}
  .show.hero .content > :nth-child(2){animation-delay:.16s}
  .show.hero .content > :nth-child(3){animation-delay:.22s}
  .show.hero .content > :nth-child(4){animation-delay:.28s}
  .show.hero .content > :nth-child(5){animation-delay:.34s}
  .show.hero .content > :nth-child(6){animation-delay:.4s}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ---------- Projects intro ---------- */
.intro{padding:clamp(48px,8vh,88px) var(--gutter) clamp(24px,4vh,40px)}
.intro .label{margin-bottom:10px}
.intro p{font-size:clamp(16px,1.2vw,19px);font-weight:300;color:#e2e2e2;line-height:1.6;max-width:34em;text-wrap:pretty;overflow-wrap:anywhere}

/* ---------- contact band ---------- */
.contact-band{
  padding:clamp(88px,12vh,144px) var(--gutter) clamp(80px,10vh,120px);text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.contact-band .label{margin-bottom:16px}
.cred{
  font-size:clamp(24px,3.2vw,44px);font-weight:500;letter-spacing:-.012em;line-height:1.15;
  text-wrap:balance;max-width:18em;margin-bottom:32px;
}
.btn-email{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:26px;
  background:#fff;color:#111;font-size:16px;font-weight:500;
  transition:background .2s,transform .12s;max-width:100%;
}
.btn-email svg{width:18px;height:18px;flex:none}
.btn-email span{overflow:hidden;text-overflow:ellipsis}
.social{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 28px;margin-top:32px;font-size:13px;color:var(--fg-dim)}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:40px;transition:color .2s}
.social svg{width:16px;height:16px}
.social .imdb-badge{font-size:11px;padding:2px 6px}
.resume-link{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:8px;
  font-size:13px;color:var(--fg-dim);transition:color .2s;
}
.resume-link svg{width:16px;height:16px}
.resume-link span{border-bottom:0.5px solid rgba(255,255,255,.35);padding-bottom:1px}

/* ---------- footer ---------- */
footer{background:var(--bg-alt);border-top:0.5px solid rgba(255,255,255,.06)}
.footer-bottom{padding:24px var(--gutter);text-align:center;font-size:12px;color:var(--fg-muted);font-weight:300}

/* ---------- About ---------- */
.about-main{max-width:1100px;margin:0 auto;padding:64px 32px 40px}
.intro-row{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start;margin-bottom:72px}
.intro-row.no-photo{grid-template-columns:1fr;max-width:760px}
.anchor-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--bg-alt)}
.bio p{font-size:18px;font-weight:300;color:#e6e6e6;line-height:1.75;text-wrap:pretty;overflow-wrap:anywhere}
.bio p + p{margin-top:16px}
.status{margin-top:18px;font-size:16px;font-weight:400;color:var(--fg);line-height:1.6;overflow-wrap:anywhere}
.contact-block{margin-top:40px;padding-top:32px;border-top:0.5px solid var(--line)}
.contact-list{display:flex;gap:4px 24px;flex-wrap:wrap;font-size:14px;font-weight:300;color:var(--fg-dim)}
.contact-list a{
  display:inline-flex;align-items:center;min-height:32px;transition:color .2s;
  text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.35);
}
.location{margin-top:10px;font-size:14px;color:var(--fg-muted)}
.about-section{
  display:grid;grid-template-columns:380px 1fr;gap:56px;
  padding:40px 0 44px;border-top:0.5px solid var(--line);
}
.about-section .label{margin:4px 0 0}
/* Awards: one thin rule beside each, white for a win. */
.award-list{display:grid;gap:32px}
.award{padding-left:20px;border-left:1px solid rgba(255,255,255,.14)}
.award.is-winner{border-left-color:#fff}
.award-result{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.award h3{font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.2;margin:6px 0 8px;text-wrap:balance;overflow-wrap:anywhere}
.award p{font-size:15px;line-height:1.6;color:#e2e2e2;text-wrap:pretty}
.award .award-work,.award .award-with{color:var(--fg-muted)}
.award-link{
  display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-top:6px;
  font-size:13px;color:var(--fg-dim);border-bottom:0.5px solid rgba(255,255,255,.3);transition:color .2s;
}
/* Credits as ruled rows, like end credits: title on the left, network on the right. */
.credit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.credit-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-top:0.5px solid var(--line);
}
.credit-title{font-size:16px;font-weight:400;color:var(--fg);line-height:1.35;overflow-wrap:anywhere;min-width:0}
.credit-meta{font-size:13px;color:var(--fg-muted);line-height:1.4;text-align:right;white-space:nowrap}
.whatido-list{display:grid;gap:8px}
.whatido-list li{font-size:15px;line-height:1.6;color:#e2e2e2}
.press-list{display:grid;gap:18px}
.press-list li{font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.press-list a{color:var(--fg);border-bottom:0.5px solid rgba(255,255,255,.3);transition:border-color .2s}
.press-meta{display:block;margin-top:6px;font-size:13px;color:var(--fg-muted)}
.gallery-section{padding:40px 0 48px;border-top:0.5px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:4px;background:var(--bg-alt)}
.gallery figcaption{margin-top:10px;font-size:13px;line-height:1.4;color:var(--fg-dim);text-wrap:pretty;overflow-wrap:anywhere}
/* The section names stay in view beside their lists on wide screens. */
@media (min-width:901px){
  .about-section .label{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start}
}

/* ---------- 404 ---------- */
.page-404{min-height:100vh;display:flex;flex-direction:column}
.page-404 main{flex:1;width:100%}
.notfound{max-width:720px;margin:0 auto;padding:120px 32px 140px}
.notfound h1{font-size:clamp(32px,6vw,56px);font-weight:600;line-height:1.05;margin-bottom:16px;text-wrap:balance;overflow-wrap:anywhere}
.notfound p{font-size:16px;color:#e2e2e2;line-height:1.6;max-width:520px;text-wrap:pretty}
.notfound .label{font-size:12px;margin-bottom:14px;color:var(--fg-muted)}
.notfound-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn-pill{
  display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:22px;
  background:#fff;color:#111;font-size:14px;font-weight:500;border:1px solid #fff;
  transition:background .2s,border-color .2s,transform .12s;
}
.btn-pill.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* ---------- Watch overlay ---------- */
html.watch-open{overflow:hidden}
/* As big as the screen allows, leaving room for the title above and Previous / Next below. */
.watch-dialog{
  margin:auto;padding:0;border:0;background:transparent;color:var(--fg);
  width:min(1760px, calc(100vw - 96px), calc((100vh - 196px) * 16 / 9));
  width:min(1760px, calc(100vw - 96px), calc((100dvh - 196px) * 16 / 9));
  min-width:min(300px, calc(100vw - 24px));
  max-width:none;max-height:none;overflow:visible;
}
.watch-dialog::backdrop{background:#050505}
@media (prefers-reduced-motion:no-preference){
  .watch-dialog[open]{animation:watch-in .32s var(--ease) both}
  .watch-dialog[open]::backdrop{animation:watch-fade .24s ease-out both}
}
@keyframes watch-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes watch-fade{from{opacity:0}}
.watch-box:focus{outline:none}
.watch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.watch-names{flex:1;min-width:0}   /* a long title wraps instead of pushing the X off the screen */
.watch-title{font-size:22px;font-weight:600;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
.watch-clip{margin-top:4px;font-size:13px;color:var(--fg-dim)}
.watch-close{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.08);border:0.5px solid rgba(255,255,255,.25);
  transition:background .2s;
}
.watch-close svg{width:18px;height:18px}
/* While Vimeo loads, the clip's still shows dimmed under the player instead of a black void. */
.watch-frame{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;border-radius:4px;overflow:hidden}
.watch-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:14px;min-height:44px}
.watch-caption{font-size:14px;line-height:1.5;color:#e2e2e2;max-width:640px;padding-top:11px;text-wrap:pretty;overflow-wrap:anywhere;min-width:0}
.watch-steps{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.watch-count{font-size:12px;color:var(--fg-muted);min-width:44px;text-align:center}
.watch-steps button{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:20px;cursor:pointer;
  font-size:12px;font-weight:400;color:var(--fg-dim);
  background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.2);
  transition:background .2s,color .2s;
}

/* ---------- hover (only on screens with a real pointer: on a touch screen the last tapped thing
   keeps :hover, which would hide which clip is selected) ---------- */
@media (hover:hover){
  .nav-links a:hover,.nav-icons a:hover{color:var(--fg)}
  .clips a:not([aria-pressed="true"]):not(.is-current):hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
  .btn-watch:hover{background:#fff;color:#111;border-color:#fff}
  .btn-watch:hover .play{background:#111;color:#fff}
  .btn-watch:hover .watch-meta{color:#444}
  .btn-email:hover{background:#e6e6e6}
  .social a:hover,.resume-link:hover,.contact-list a:hover,.award-link:hover{color:var(--fg)}
  .press-list a:hover{border-color:#fff}
  .btn-pill.ghost:hover{border-color:#fff}
  .watch-close:hover{background:rgba(255,255,255,.18)}
  .watch-steps button:hover{background:rgba(255,255,255,.14);color:var(--fg)}
}
/* The selected clip is always the white one, whatever the pointer is doing. */
.clips a[aria-pressed="true"],.clips a.is-current,
.clips a[aria-pressed="true"]:hover{background:#fff;color:#111;border-color:#fff}
.btn-watch:active,.clips a:active,.btn-email:active,.btn-pill:active{transform:scale(.97)}

/* ---------- bigger screens ---------- */
@media (min-width:1280px){
  .clips a{font-size:13px;padding:9px 16px}
}
/* Big screens (1920 and up): the words grow with the picture, so they don't sit small in a corner of it. */
@media (min-width:1920px){
  .brand .name{font-size:17px}
  .brand .dash,.brand .title{font-size:14px}
  .nav-links{font-size:14px;gap:32px}
  .nav-icons svg{width:18px;height:18px}
  .show .content{max-width:min(1360px,72vw)}
  .tag{font-size:13px}
  .show h2{font-size:clamp(76px,3.9vw,92px)}
  .show.hero h2{font-size:clamp(88px,4.4vw,112px)}
  .awards-line{font-size:15px}
  .desc{font-size:clamp(17px,.75vw,19px)}
  .clips a{font-size:14px;padding:10px 18px}
  .caption{font-size:14px}
  .btn-watch{min-height:52px;border-radius:26px;font-size:16px}
  .btn-watch .play{width:40px;height:40px}
  .intro p{font-size:clamp(19px,.85vw,22px)}
  .about-main{max-width:1240px}
  .intro-row,.about-section{grid-template-columns:420px 1fr;gap:64px}
  .bio p{font-size:19px}
  .status{font-size:17px}
  .credit-title{font-size:17px}
  .credit-meta,.gallery figcaption,.press-meta{font-size:14px}
  .award p{font-size:16px}
}

/* ---------- smaller screens ---------- */
/* Tablets held upright (and narrow windows): a full-height picture would show only a third of a wide
   clip, much enlarged, so each show stacks as on phones: the picture at its own shape on top, the
   words under it. */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .show,.show.hero{display:block;min-height:0;overflow:visible}
  .show:not(.hero){margin-top:48px}
  .show:not(.hero)::before{display:none}
  .page-projects .intro + .show{margin-top:8px}
  .media{position:relative;inset:auto;width:100%;aspect-ratio:var(--lb,16/9);transition:aspect-ratio .35s var(--ease)}
  .media::after{content:'';position:absolute;inset:auto 0 0;height:18%;z-index:1;pointer-events:none;background:linear-gradient(rgba(10,10,10,0),var(--bg))}
  .scrim,.show.hero .scrim{display:none}
  .show .content{padding:24px var(--gutter) 40px;max-width:780px;text-shadow:none}
  .tag{color:var(--fg-dim)}
  .show h2{font-size:clamp(36px,6vw,56px)}
  .show.hero h2{font-size:clamp(40px,7vw,64px)}
  .desc{font-size:16px}
}
/* Tablets: a wider column for the words, so a row of clip buttons doesn't break into three. */
@media (min-width:641px) and (max-width:900px){
  .show .content{max-width:min(780px,92vw)}
}
@media (max-width:900px){
  .intro-row{grid-template-columns:320px 1fr;gap:40px}
  /* Each section's name goes above its list, so the list gets the full width. */
  .about-section{grid-template-columns:1fr;gap:16px}
}
/* Touch screens (tablets): every button and link at least 40px tall, as on phones. */
@media (pointer:coarse){
  .clips a{min-height:40px}
  .nav-links a{display:inline-flex;align-items:center;min-height:40px}
  .contact-list a,.award-link{min-height:40px}
}
@media (max-width:800px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .intro-row{grid-template-columns:1fr;gap:32px;margin-bottom:56px}
  .anchor-photo{max-width:340px;width:100%;margin:0 auto}
  .about-section{grid-template-columns:1fr;gap:14px;padding:32px 0 36px}
  .credit-list{grid-template-columns:1fr}
  .gallery-section{padding:32px 0 40px}
}

/* Phones: each show stacks, the picture on top and the text right under it. A clip with black bars
   gets a box of its picture's own shape (2.35:1, say), so nothing is cropped and no bar shows. */
@media (max-width:640px){
  :root{--nav-h:52px}
  .site-nav{padding:0 10px 0 16px;gap:8px}
  .brand{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.2;min-height:44px}
  .brand .dash{display:none}
  .brand .name{font-size:14px}
  .brand .title{font-size:10px;letter-spacing:.06em}
  .nav-links{gap:0;font-size:12px}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 7px}
  .nav-divider,.nav-icons{display:none}

  .show,.show.hero{display:block;min-height:0;overflow:visible}
  .show:not(.hero){margin-top:28px}
  .show:not(.hero)::before{display:none}
  .page-projects .intro + .show{margin-top:20px}
  .media{position:relative;inset:auto;width:100%;aspect-ratio:var(--lb,16/9);transition:aspect-ratio .35s var(--ease)}
  /* The bottom of the picture melts into the page, into the words under it. */
  .media::after{content:'';position:absolute;inset:auto 0 0;height:16%;z-index:1;pointer-events:none;background:linear-gradient(rgba(10,10,10,0),var(--bg))}
  .scrim{display:none}
  .show .content{padding:18px 20px 30px;max-width:100%;text-shadow:none}
  .tag{font-size:11px;margin-bottom:8px;color:var(--fg-dim)}
  .show h2{font-size:clamp(26px,8vw,40px);margin-bottom:10px}
  .show.hero h2{font-size:clamp(30px,9vw,40px);margin-bottom:12px}
  .awards-line{font-size:12px;margin:0 0 10px}
  .desc{font-size:14px;max-width:100%}
  .clips{gap:6px;margin-top:16px}
  .clips a{font-size:12px;padding:0 14px;min-height:40px}
  .actions{margin-top:18px;gap:10px 16px}
  /* On phones the caption goes under Watch: the words are read top down, so nothing above it moves. */
  .js .caption.is-current{flex-basis:100%}
  .btn-watch{min-height:44px;font-size:14px;gap:10px;padding:0 20px 0 6px;border-radius:22px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn-watch .play{width:32px;height:32px}

  .intro{padding:36px 20px 4px}
  .intro p{font-size:15px}
  .contact-band{padding:64px 20px 56px}
  .cred{font-size:clamp(24px,7vw,30px)}
  /* One credential per line, with no dots, so a dot never ends a line. */
  .cred .keep{display:block}
  .cred .sep{display:none}
  .btn-email{min-height:48px;padding:0 24px;font-size:15px}
  .footer-bottom{padding:20px}
  .about-main{padding:36px 20px 32px}
  .gallery{gap:10px}
  .bio p{font-size:16px}
  .contact-list{flex-direction:column;gap:0}
  .contact-list a{min-height:40px}
  .award-link{min-height:40px}
  .award{padding-left:16px}
  .notfound{padding:72px 20px 96px}

  .watch-dialog{width:100vw;min-width:0;margin:auto 0}
  .watch-dialog::backdrop{background:#050505}
  .watch-head{padding:0 16px}
  .watch-frame{border-radius:0}
  .watch-foot{flex-direction:column;gap:10px;padding:0 16px}
  .watch-caption{padding-top:0}
  .watch-steps{margin-left:0}
}
/* Narrow phones: the hero's awards one per line too, and credits wrap under their titles. */
@media (max-width:420px){
  .awards-line .keep{display:block}
  .awards-line .sep{display:none}
  .credit-list li{flex-wrap:wrap;gap:2px 16px}
  .credit-meta{white-space:normal;text-align:left}
}
/* A phone turned sideways: the video takes the height, with one slim row of title and buttons above it. */
@media (max-height:500px) and (min-width:480px){
  .watch-dialog{width:min(calc(100vw - 24px), calc((100vh - 64px) * 16 / 9));width:min(calc(100vw - 24px), calc((100dvh - 64px) * 16 / 9));min-width:0;margin:auto}
  .watch-box{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"names steps close" "frame frame frame";align-items:center;column-gap:10px;row-gap:6px}
  .watch-head,.watch-foot{display:contents}
  .watch-names{grid-area:names;min-width:0;padding:0}
  .watch-title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .watch-clip{margin-top:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .watch-steps{grid-area:steps;margin:0}
  .watch-steps button{min-height:40px;padding:0 12px}
  .watch-close{grid-area:close;width:40px;height:40px}
  .watch-frame{grid-area:frame;border-radius:4px}
  .watch-caption{display:none}
}
@media (max-width:360px){
  .site-nav{padding:0 6px 0 12px}
  .brand .name{font-size:13px}
  .nav-links a{padding:0 6px}
}
@media (max-width:330px){
  .brand .title{display:none}
  .nav-links a{padding:0 5px}
}

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

/* ---------- printing (the About page, mostly; the résumé PDF is the proper printout) ----------
   Dark text on white paper, no nav or buttons, and photos, awards and credits never split by a page. */
@media print{
  :root{--line:rgba(0,0,0,.18);--fg:#000;--fg-dim:#333;--fg-muted:#555}
  html,body{background:#fff!important;color:#000}
  *{text-shadow:none!important;animation:none!important;transition:none!important}
  .site-nav,.skip-link,footer,.contact-band,.clips,.actions,.scrim,.media iframe{display:none!important}
  .bio p,.desc,.award p,.whatido-list li,.intro p,.notfound p,.tag,.awards-line{color:#222}
  .award{border-left-color:#bbb}
  .award.is-winner{border-left-color:#000}
  .contact-list a,.award-link,.press-list a{text-decoration-color:#888;border-bottom-color:#888}
  .about-main{max-width:none;padding:0}
  .intro-row{grid-template-columns:180px 1fr;gap:28px;margin-bottom:24px}
  .anchor-photo{max-width:none;margin:0}
  .about-section{grid-template-columns:1fr;gap:10px;padding:18px 0 20px}
  .about-section .label{position:static}
  .gallery-section{padding:18px 0 20px}
  .gallery{grid-template-columns:repeat(4,1fr);gap:10px}
  .gallery figure,.award,.credit-list li,.press-list li,.intro-row{break-inside:avoid}
  .label{break-after:avoid}
  .show,.show.hero{display:block;min-height:0;break-inside:avoid;margin:0 0 24px}
  .show:not(.hero)::before,.media::after{display:none}
  .media{position:relative;inset:auto;aspect-ratio:var(--lb,16/9)}
  .show .content{max-width:none;padding:12px 0}
  .intro{padding:0 0 16px}
}