@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/InstrumentSans-VF.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/InstrumentSans-Italic-VF.woff2) format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url(/assets/fonts/Outfit-VF.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Outfit", "Instrument Sans", system-ui, sans-serif;
  --bg: #0c0b0a;
  --bg-2: #141311;
  --fg: #efeae2;
  --fg-2: #b6afa5;
  --fg-3: #7d776f;
  --line: #26231f;
  --accent: #ffffff;
  --gap-section: clamp(48px, 8vw, 112px);
  --page-top: clamp(32px, 5vw, 64px);
  --pad: clamp(16px, 4vw, 48px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
}

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

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 { font-family: var(--font-display); }
h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
}
h3 { font-size: 1rem; font-weight: 500; line-height: 1.35; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--fg-3);
}
a:hover { text-decoration-color: var(--accent); }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  background: #fff;
  color: #000;
  padding: 8px 16px;
  z-index: 10;
}
.skip:focus { top: 8px; }

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  line-height: 1.5;
}

/* Header and footer */
.site-header { height: 56px; }
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lockup { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; text-decoration: none; letter-spacing: -0.01em; }
.nav { display: flex; gap: clamp(12px, 3vw, 32px); font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--fg-2); }
.nav a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }

.site-footer {
  margin-top: var(--gap-section);
  padding-block: 32px 48px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 0.875rem;
}
.site-footer a { color: var(--fg-2); }

/* Home */
.hero { padding-top: var(--page-top); }
.hero h1 { margin-top: 16px; }
.strip, .anchors__inner {
  color: var(--fg-2);
  font-weight: 500;
}
.strip { margin-top: 24px; }
.strip a, .anchors a { color: var(--fg-2); text-decoration: none; }
.strip a:hover, .anchors a:hover { color: var(--fg); }

.reel { margin-top: clamp(32px, 5vw, 56px); }
.facade-reel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  color: var(--fg);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.facade-reel picture, .facade-reel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.facade-reel img { object-fit: cover; }
.facade-reel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); pointer-events: none; }
.facade-reel .play, .facade-reel .reel__label { position: relative; z-index: 1; }
.facade-reel.is-playing::after, .facade-reel.is-playing .reel__dur { display: none; }
.reel__dur { position: absolute; right: 12px; bottom: 12px; z-index: 1; font-size: 0.75rem; line-height: 1; padding: 5px 7px; background: rgba(0,0,0,0.7); color: var(--fg); border-radius: 3px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.reel__label { position: relative; }
.reel__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.15), rgba(10,10,10,0.75)); pointer-events: none; }
.reel__panel .play, .reel__panel .reel__label { z-index: 1; }
.facade-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facade-reel .play, .facade-reel .reel__label { position: relative; }
.reel__label { font-size: 0.9375rem; color: var(--fg-2); }
.facade-reel:hover .reel__label { color: var(--fg); }

.about {
  display: grid;
  gap: 32px;
  margin-top: var(--gap-section);
  align-items: start;
}
.about__photo { width: min(50vw, 240px); }
.about__photo img { width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.about__text { max-width: 62ch; display: grid; gap: 16px; }
.about__p3 { color: var(--fg-2); }
@media (min-width: 900px) {
  .about { grid-template-columns: 280px 1fr; gap: 56px; }
  .about__photo { width: 280px; }
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.awards { margin-top: 16px; font-size: 0.875rem; color: var(--fg-2); }
.awards__sep { margin-inline: 0.6em; color: var(--fg-3); }

.experience { margin-top: var(--gap-section); }
.experience h2 { margin-top: 8px; margin-bottom: 24px; }
.xp { list-style: none; padding: 0; margin: 0; }
.xp__row { display: grid; gap: 4px; padding-block: 24px; border-top: 1px solid var(--line); }
.xp__years { font-variant-numeric: tabular-nums; color: var(--fg-3); font-size: 0.9375rem; }
.xp__title { font-size: 1.125rem; font-weight: 500; }
.xp__employer { color: var(--fg); }
.xp__employer a { text-decoration-color: var(--fg-3); }
.xp__line { color: var(--fg-2); max-width: 62ch; margin-top: 4px; }
@media (min-width: 700px) {
  .xp__row { grid-template-columns: 160px 1fr; gap: 24px; }
}

.preview { margin-top: var(--gap-section); }
.preview h2 { margin-bottom: 24px; }
.preview h2 a { text-decoration: none; }
.preview h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.more { margin-top: 32px; }

/* Cards */
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card__title { margin-top: 12px; }
.card__meta { margin-top: 4px; font-size: 0.875rem; color: var(--fg-3); }

.facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  cursor: pointer;
  overflow: visible;
  color: inherit;
}
.card .facade img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: filter 0.2s ease;
}
.card .facade picture { width: 100%; height: 100%; }
.card .facade::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.card .facade:hover img, .card .facade:focus-visible img { filter: brightness(1.08); }
.card .facade:hover::after, .card .facade:focus-visible::after { opacity: 1; }
.card .facade .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.facade.is-playing { cursor: default; }
.facade.is-playing::after { display: none; }

/* Work pages */
.page-head { padding-top: var(--page-top); display: grid; gap: 16px; }
.lede, .section-intro { color: var(--fg-2); max-width: 62ch; }

.anchors {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  margin-top: 32px;
  border-bottom: 1px solid var(--line);
}
.anchors__inner {
  padding-block: 12px;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.9375rem;
}
@media (max-width: 899px) {
  .anchors { position: static; }
}

.work-section {
  margin-top: var(--gap-section);
  scroll-margin-top: 72px;
  display: grid;
  gap: 12px;
}
.work-section .grid { margin-top: 12px; }
.work-section h2 a { text-decoration: none; }
.work-section h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.more-work { margin-top: var(--gap-section); padding-top: 24px; border-top: 1px solid var(--line); }
.more-work ul { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 12px; }

/* Connect */
.is-minimal .site-header__inner { justify-content: center; }
.connect {
  max-width: 420px;
  margin: clamp(8px, 1.5vw, 16px) auto 0;
  padding-inline: 16px 16px;
  text-align: center;
  display: grid;
  gap: 8px;
}
.connect h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); }
.connect h2 { font-size: 1.125rem; font-weight: 500; color: var(--fg-2); letter-spacing: 0; }
.connect__at { color: var(--fg-2); }
.connect__at a { color: var(--fg-2); }
.connect__buttons { display: grid; gap: 12px; margin-block: 24px; }
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid var(--fg-2);
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: #fff; color: #000; }

/* 404 */
.notfound { padding-top: var(--page-top); display: grid; gap: 16px; }

/* Motion plays regardless of the OS "animation effects" setting (Mike, 2026-10-02): every sequence is short, runs once and never loops.
   Windows users who switch animation effects off for performance report prefers-reduced-motion, and they are this site's audience. */
html { scroll-behavior: auto; }

.more-list { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); padding-top: 24px; }
.more-list summary { cursor: pointer; font-weight: 500; color: var(--fg-2); list-style: none; display: flex; align-items: center; gap: 8px; }
.more-list summary::-webkit-details-marker { display: none; }
.more-list summary::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: rotate(-45deg); transition: transform 0.2s; }
.more-list[open] summary::before { transform: rotate(45deg); }
.more-list summary:hover { color: var(--fg); }
.more-list ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px 32px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.more-list li a { color: var(--fg); text-decoration: none; }
.more-list li a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* reel facade overrides (declared last so they win over the generic .facade block rule) */
.reel .facade-reel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.reel .facade-reel .play { position: relative; transform: none; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)); transition: transform 0.2s ease; }
.reel .facade-reel:hover .play, .reel .facade-reel:focus-visible .play { transform: scale(1.06); }
.reel .facade-reel .reel__label { color: var(--fg); font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,0.8); }

/* Motion. Resting state is the finished page; animations start from hidden only under .is-ready. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mark { display: block; height: 22px; aspect-ratio: 16 / 9; width: auto; overflow: visible; color: var(--fg-2); --u: 1; --t: 1; }
.lockup .mark { --u: 4.09; }
.connect__mark { width: 160px; margin: 0 auto 8px; }
.connect__mark .mark { width: 160px; height: auto; --t: 1.5; }
.connect__photo { position: relative; width: 160px; aspect-ratio: 4 / 5; margin: 0 auto 24px; background: #000; }
.connect__photo picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.connect__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.connect__photo .corners { opacity: 0.9; --d: 10px; }
.connect__photo .corners i { border-color: var(--fg-2); }
.mark .c, .mark__text { transform-box: fill-box; transform-origin: center; }
.mark .c { transition: transform 0.2s ease-out; }
.mark .c1 { --dx: -1; --dy: -1; } .mark .c2 { --dx: 1; --dy: -1; }
.mark .c3 { --dx: -1; --dy: 1; } .mark .c4 { --dx: 1; --dy: 1; }
.mark__grid { opacity: 0; transition: opacity 0.2s; }
.lockup:hover .mark__grid, .lockup:focus-visible .mark__grid { opacity: 1; }
.lockup:hover .c, .lockup:focus-visible .c { transform: translate(calc(var(--dx) * var(--u) * 1px), calc(var(--dy) * var(--u) * 1px)); }

.h1__name, .h1__title { display: inline-block; }
.h1__pipe { display: inline-block; width: 2px; height: 0.9em; margin-left: 0.04em; background: var(--fg-2); vertical-align: -0.06em; transform-origin: top; }

.publishers { margin-top: clamp(24px, 4vw, 40px); text-align: center; }
.publishers__names { margin-top: 8px; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); text-wrap: balance; }
.publishers__name { white-space: nowrap; }
.publishers__dot { margin-inline: 0.7em; }

.reel { position: relative; }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 12.81%; background: var(--bg); pointer-events: none; z-index: 3; transform: scaleY(0); }
.reel::before { top: 0; transform-origin: top; }
.reel::after { bottom: 0; transform-origin: bottom; }
.reel:has(.is-playing)::before, .reel:has(.is-playing)::after { display: none; }

.corners { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; --d: 10px; transition: opacity 0.22s ease-out; }
.corners i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--fg); transform: translate(calc(var(--sx) * var(--d)), calc(var(--sy) * var(--d))); transition: transform 0.22s ease-out; }
.corners i:nth-child(1) { top: 0; left: 0; --sx: -1; --sy: -1; border-width: 2px 0 0 2px; }
.corners i:nth-child(2) { top: 0; right: 0; --sx: 1; --sy: -1; border-width: 2px 2px 0 0; }
.corners i:nth-child(3) { bottom: 0; left: 0; --sx: -1; --sy: 1; border-width: 0 0 2px 2px; }
.corners i:nth-child(4) { bottom: 0; right: 0; --sx: 1; --sy: 1; border-width: 0 2px 2px 0; }
.card .facade:hover .corners, .card .facade:focus-visible .corners, .facade-reel:not(.is-playing):hover .corners, .facade-reel:not(.is-playing):focus-visible .corners, .hl:hover .corners, .hl:focus-within .corners { opacity: 0.9; --d: -8px; }

.highlights { margin-top: var(--gap-section); }
.highlights h2 { margin-top: 8px; margin-bottom: 24px; }
.highlights__grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.hl { position: relative; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 24px; }
.hl h3 { margin-top: 12px; font-size: 1.25rem; }
.hl__body { margin-top: 12px; color: var(--fg-2); }
.hl__link { margin-top: auto; padding-top: 20px; }
@media (max-width: 799px) { .highlights__grid { grid-template-columns: 1fr; } }

@keyframes fade { from { opacity: 0; } }
@keyframes fade-u { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade-r { from { opacity: 0; transform: translateX(-6px); } }
@keyframes pipe-in { from { transform: scaleY(0); } }
@keyframes bar-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes c-in { from { transform: translate(calc(var(--dx) * var(--u) * 6px), calc(var(--dy) * var(--u) * 6px)); } }
@keyframes resolve { from { opacity: 0; filter: blur(10px); transform: translate(10px, 3px) skewX(-7deg); } 55% { opacity: 1; filter: blur(2px); transform: translate(2px, 0) skewX(-1.5deg); } }
@keyframes rack { from { opacity: 0; filter: blur(calc(6px * var(--u))); } }
@keyframes grid-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes frame-open { from { opacity: 0.9; } to { opacity: 0; } }
@keyframes bracket-open {
  from { transform: translate(calc(var(--sx) * -8px), calc(var(--sy) * -8px)); }
  to { transform: translate(calc(var(--sx) * 14px), calc(var(--sy) * 14px)); }
}
.is-ready .mark .c { animation: c-in calc(0.5s * var(--t)) ease-out backwards; }
.is-ready .mark .c2 { animation-delay: calc(0.1s * var(--t)); }
.is-ready .mark .c3 { animation-delay: calc(0.2s * var(--t)); }
.is-ready .mark .c4 { animation-delay: calc(0.3s * var(--t)); }
.is-ready .mark__text { animation: rack calc(0.45s * var(--t)) ease-out calc(0.25s * var(--t)) backwards; }
.is-ready .mark__grid { animation: grid-flash calc(0.4s * var(--t)) linear calc(0.7s * var(--t)); }
.is-ready .hero .eyebrow { animation: fade 0.45s ease-out backwards; }
.is-ready .h1__pipe { animation: pipe-in 0.35s ease-out backwards; }
.is-ready .h1__name { animation: fade-r 0.45s ease-out 0.2s backwards; }
.is-ready .h1__title { animation: resolve 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s backwards; }
.is-ready .strip { animation: fade 0.45s ease-out 0.6s backwards; }
.facade-reel.is-playing .corners { animation: frame-open 0.5s ease-out; }
.facade-reel.is-playing .corners i { animation: bracket-open 0.5s ease-out; }
.is-ready .connect h1 { animation: fade-u 0.45s ease-out 0.5s backwards; }
.is-ready .connect h2 { animation: fade-u 0.45s ease-out 0.58s backwards; }
.is-ready .connect__at { animation: fade-u 0.45s ease-out 0.66s backwards; }
.is-ready .connect__buttons { animation: fade-u 0.45s ease-out 0.74s backwards; }
.is-ready .connect__buttons ~ p { animation: fade-u 0.45s ease-out 0.82s backwards; }
.is-ready .connect__buttons ~ p + p { animation: fade-u 0.45s ease-out 0.9s backwards; }

.mark .mark__text { fill: var(--fg); }
.preview { margin-top: var(--gap-section); }

.more-list li { display: flex; flex-direction: column; gap: 2px; }
.more-list__credit { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }

/* Direction (decided 2026-10-02): Kojima type discipline, Newton grayscale-until-hover grid, Wright horizontals on a warm black, grey only. */
h1 { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; font-size: clamp(1.6rem, 0.9rem + 2.4vw, 2.9rem); line-height: 1.1; }
.h1__name { font-weight: 500; }
.h1__title { font-weight: 300; }
.h1__pipe { width: 1px; }
h2, .page-head h1 { text-transform: uppercase; }
h2 { font-weight: 400; letter-spacing: 0.14em; font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); line-height: 1.3; color: var(--fg-2); }
.page-head h1 { font-weight: 400; letter-spacing: 0.1em; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); }
.eyebrow, .publishers__names, .card__meta, .xp__years, .more-list__credit, .reel__dur { letter-spacing: 0.2em; font-size: 0.7rem; font-weight: 400; text-transform: uppercase; }
.card__meta { letter-spacing: 0.12em; }
.strip, .anchors__inner { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 400; }
.anchors__inner { letter-spacing: 0.1em; font-size: 0.72rem; }
.card__title { font-weight: 400; font-size: 0.95rem; letter-spacing: 0.01em; margin-top: 12px; }
.hl h3 { font-weight: 400; letter-spacing: 0; }
.xp__title { font-weight: 500; letter-spacing: 0.01em; }
.lockup { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; }
/* Wright: every section sits on a long hairline with a short heavier rule at its head */
.publishers, .about, .highlights, .preview, .experience, .work-section, .more-work { position: relative; border-top: 1px solid var(--line); padding-top: 32px; }
.hero { padding-bottom: clamp(32px, 4vw, 48px); }
.about::before, .highlights::before, .preview::before, .experience::before, .work-section::before { content: ""; position: absolute; left: 0; top: -1px; width: 96px; height: 2px; background: var(--fg-2); }
.highlights h2, .experience h2, .preview h2 { margin-top: 0; }
.hl { border-radius: 0; }
/* Newton: the work grid rests as a contact sheet and comes up in color under the cursor */
.grid { gap: 24px 16px; }
/* Posters stay in full color (Mike, 2026-10-02): the work carries the color, the portrait carries the black and white. */

/* Hero with portrait (2026-10-02): type left, portrait right in a capture frame, grayscale until hover */
.hero { display: grid; gap: 32px; align-items: end; }
.hero__photo { position: relative; width: min(60vw, 300px); aspect-ratio: 4 / 5; background: #000; }
.hero__photo picture { width: 100%; height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero__photo .corners { opacity: 0.9; --d: 10px; color: var(--fg-2); }
.hero__photo .corners i { border-color: var(--fg-2); }
.hero__photo:hover .corners { --d: 16px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr auto; gap: 48px; }
  .hero__photo { width: 300px; }
}
.about { grid-template-columns: 1fr; }
.about__text { max-width: 68ch; }

/* Logo sting (2026-10-02, rebuilt same day): the header mark itself starts large at center and travels to its own resting place.
   One element, ending at transform: none, so there is no overlay to hand off to and nothing to snap. */
.is-sting .site-header { position: relative; z-index: 20; }
.is-sting .lockup .mark {
  --u: 1.6; --t: 1.6; --k: 10.7;
  --mx: calc(50vw - max(var(--pad), calc((100vw - 1200px) / 2 + var(--pad))) - 19.55px);
  transform-origin: center;
  animation: mark-fly 1.8s backwards;
}
@media (max-width: 699px) { .is-sting .lockup .mark { --k: 6; } }
@keyframes mark-fly {
  from { transform: translate(var(--mx), calc(42vh - 28px)) scale(var(--k)); }
  61% { transform: translate(var(--mx), calc(42vh - 28px)) scale(var(--k)); animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
  to { transform: none; }
}
.is-sting .lockup__name { animation: fade 0.4s ease-out 1.75s backwards; }
.is-sting .nav { animation: fade 0.45s ease-out 1.5s backwards; }
.is-sting .hero .eyebrow { animation-delay: 1.2s; }
.is-sting .h1__pipe { animation-delay: 1.25s; }
.is-sting .h1__name { animation-delay: 1.4s; }
.is-sting .h1__title { animation-delay: 1.55s; }
.is-sting .strip { animation-delay: 1.8s; }
.is-sting .publishers, .is-sting .reel, .is-sting .about { animation: fade 0.6s ease-out 1.9s backwards; }
.lockup__name { white-space: nowrap; }
@media (max-width: 479px) { .nav { font-size: 0.85rem; gap: 10px; } .lockup { font-size: 0.8rem; } }

/* Hero balance and portrait reveal (2026-10-02): type centered against the portrait and scaled up so no dead space sits under the header;
   the portrait gets the mark's own entrance: corners draw in, then the image racks into focus. */
.hero { align-items: center; padding-top: clamp(24px, 4vw, 56px); }
h1 { font-size: clamp(1.7rem, 0.8rem + 3.1vw, 3.6rem); line-height: 1.08; }
.hero h1 { margin-top: 16px; }
.hero .strip { margin-top: 32px; }
.hero__photo { --pd: 0.7s; overflow: visible; }
.hero__photo picture { display: block; overflow: hidden; }
@keyframes photo-corner { from { opacity: 0; transform: translate(calc(var(--sx) * 44px), calc(var(--sy) * 44px)); } }
@keyframes photo-rack { from { opacity: 0; filter: blur(18px); transform: scale(1.06); } 60% { opacity: 1; } }
.is-ready .hero__photo .corners i { animation: photo-corner 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pd) backwards; }
.is-ready .hero__photo .corners i:nth-child(2) { animation-delay: calc(var(--pd) + 0.08s); }
.is-ready .hero__photo .corners i:nth-child(3) { animation-delay: calc(var(--pd) + 0.16s); }
.is-ready .hero__photo .corners i:nth-child(4) { animation-delay: calc(var(--pd) + 0.24s); }
.is-ready .hero__photo img { animation: photo-rack 0.8s ease-out calc(var(--pd) + 0.35s) backwards; }
.is-ready .hero__photo { background: transparent; }
.is-sting .hero__photo { --pd: 1.85s; }

/* Publisher strip (2026-10-02): no dot separators, so a wrapped line never ends on a stray dot; spacing does the separating. */
.publishers__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(16px, 2.6vw, 32px); margin-top: 12px; color: var(--fg-2); }

/* Reel label (2026-10-02): the caption under the play button sat on the brightest part of the frame and vanished.
   It is now a chip at bottom left, matching the duration chip at bottom right, so it reads on any poster. */
.reel .facade-reel .reel__label { position: absolute; left: 12px; bottom: 12px; z-index: 1; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; padding: 7px 10px; background: rgba(0, 0, 0, 0.72); color: var(--fg); text-shadow: none; border-radius: 3px; }
.reel .reel__dur { padding: 7px 10px; font-weight: 500; }
.reel .facade-reel .play circle { fill: rgba(0, 0, 0, 0.6); }
.facade-reel.is-playing .reel__label { display: none; }

/* Reel reveal on scroll (2026-10-02): the letterbox holds until the reel is on screen, then the bars retreat and the controls come up.
   Without IntersectionObserver or JS the reel simply shows finished. */
.has-io .reel:not(.in-view)::before, .has-io .reel:not(.in-view)::after { transform: scaleY(1); }
.has-io .reel:not(.in-view) .play, .has-io .reel:not(.in-view) .reel__label, .has-io .reel:not(.in-view) .reel__dur { opacity: 0; }
.has-io .reel.in-view::before, .has-io .reel.in-view::after { animation: bar-out 0.7s cubic-bezier(0.65, 0, 0.2, 1) 0.1s backwards; }
.has-io .reel.in-view .play, .has-io .reel.in-view .reel__label, .has-io .reel.in-view .reel__dur { animation: fade 0.35s ease-out 0.55s backwards; }

/* About moved below Selected Work (2026-10-02): reel, campaigns and work run uninterrupted; bio and career form one block. */
.about { margin-top: var(--gap-section); display: block; }
.about h2 { margin-bottom: 24px; }
.reel + .highlights { margin-top: var(--gap-section); }
.publishers + .preview { margin-top: clamp(40px, 5vw, 56px); }

/* Name and title smoothing (2026-10-02): the title's two-stage keyframe changed speed mid-flight and its tail overlapped the portrait's
   heavy blur, which read as choppy. Now one continuous decelerating move, a lighter blur, and it finishes before the portrait starts. */
@keyframes resolve2 { from { opacity: 0; filter: blur(7px); transform: translate3d(12px, 0, 0) skewX(-6deg); } }
@keyframes name-in { from { opacity: 0; transform: translate3d(-10px, 0, 0); } }
.is-ready .h1__name { animation: name-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
.is-ready .h1__title { animation: resolve2 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }
.is-sting .h1__name { animation-delay: 1.55s; }
.is-sting .h1__title { animation-delay: 1.67s; }
.is-sting .hero__photo { --pd: 2.15s; }
.is-sting .hero .eyebrow { animation-delay: 1.5s; }
.is-sting .h1__pipe { animation-delay: 1.5s; }
.is-sting .strip { animation-delay: 2.05s; }
.h1__name, .h1__title { backface-visibility: hidden; }

/* Franchise pages: every other public trailer for that franchise, role shown on each card (2026-10-02). */
.more-trailers { position: relative; margin-top: var(--gap-section); border-top: 1px solid var(--line); padding-top: 32px; }
.more-trailers::before { content: ""; position: absolute; left: 0; top: -1px; width: 96px; height: 2px; background: var(--fg-2); }
.more-trailers h2 { margin-bottom: 24px; }
.page-head + .grid { margin-top: 32px; }

/* Motion finesse pass (2026-10-02). One easing curve for entrances; sections, cards and career rows arrive as they scroll into view;
   posters and links respond to the cursor; pages cross-fade. Everything runs once and settles on the plain finished state. */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: ease; }

/* Section heads: the short rule draws out, then the heading settles */
.has-io :is(.highlights, .preview, .about, .experience, .work-section, .more-trailers)::before { transform-origin: left; transition: transform 0.9s var(--ease); }
.has-io :is(.highlights, .preview, .about, .experience, .work-section, .more-trailers):not(.in-view)::before { transform: scaleX(0); }
.has-io :is(.highlights, .preview, .about, .experience, .work-section, .more-trailers) > :is(h2, .eyebrow, .about__text, .section-intro, .more) { transition: opacity 0.7s ease-out 0.1s, transform 0.8s var(--ease) 0.1s; }
.has-io :is(.highlights, .preview, .about, .experience, .work-section, .more-trailers):not(.in-view) > :is(h2, .eyebrow, .about__text, .section-intro, .more) { opacity: 0; transform: translate3d(0, 10px, 0); }

/* Cards, highlight cards and career rows rise in one after another */
.has-io :is(.card, .hl, .xp__row) { transition: opacity 0.6s ease-out, transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.has-io :is(.card, .hl, .xp__row):not(.in-view) { opacity: 0; transform: translate3d(0, 16px, 0); }
.grid > .card:nth-child(3n + 2), .highlights__grid > .hl:nth-child(2) { --i: 1; }
.grid > .card:nth-child(3n + 3), .highlights__grid > .hl:nth-child(3) { --i: 2; }
@media (max-width: 999px) { .grid > .card { --i: 0; } }

/* Hover: the poster eases in a touch, the play ring tightens, nav underlines draw from the left */
.card .facade picture { display: block; overflow: hidden; }
.card .facade img { transition: transform 0.9s var(--ease), filter 0.3s ease; }
.card .facade:hover img, .card .facade:focus-visible img { transform: scale(1.035); }
.card .facade .play { transition: transform 0.4s var(--ease), opacity 0.3s ease; opacity: 0.9; }
.card .facade:hover .play, .card .facade:focus-visible .play { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
.nav a { position: relative; }
.nav a:hover { text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* Sting: the thirds grid finishes its flash before the mark starts to travel; the travelling mark gets its own layer */
.is-sting .lockup .mark { will-change: transform; }
.is-sting .lockup .mark__grid { animation: grid-flash 0.5s linear 0.62s; }

/* Work page: the first franchise sits directly under the franchise strip. The strip's own rule is the divider, so the first section
   drops its top rule and most of its top margin (2026-10-02). */
.anchors + .container > .work-section:first-child { margin-top: clamp(32px, 4vw, 48px); border-top: 0; padding-top: 0; }
.anchors + .container > .work-section:first-child::before { display: none; }
.anchors { margin-top: 24px; }

/* Technician-era trailers on franchise pages are a plain list of linked titles, not posters (Mike, 2026-10-02). */
.title-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px 40px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.title-list a { color: var(--fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.45s var(--ease); padding-bottom: 2px; }
.title-list a:hover, .title-list a:focus-visible { background-size: 100% 1px; }
.more-trailers .grid + .title-list__role { margin-top: 40px; }

/* Reel page (2026-10-02): the reel on its own URL, so nav and the business card QR keep visitors on the site. */
.reel-page .reel { margin-top: 32px; }
.page-head__sub { line-height: 1.9; }
.reel-page__links { margin-top: 32px; display: flex; gap: 32px; font-size: 0.9375rem; }
.reel-page__links a { color: var(--fg-2); }
.reel-page__links a:hover { color: var(--fg); }
.title-list + .title-list__role { margin-top: 40px; }

/* Sting order (2026-10-02): corners, then the letters come fully sharp, then the thirds grid flashes behind them, then the mark travels.
   The grid no longer overlaps the letters while they are still soft, which read as lines drawn over the text. */
.is-sting .lockup .mark { --t: 1.2; animation: mark-fly2 2s backwards; }
@keyframes mark-fly2 {
  from { transform: translate(var(--mx), calc(42vh - 28px)) scale(var(--k)); }
  65% { transform: translate(var(--mx), calc(42vh - 28px)) scale(var(--k)); animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
  to { transform: none; }
}
.is-sting .lockup .mark__grid { animation: grid-flash 0.42s ease-out 0.88s; }
.is-sting .nav { animation-delay: 1.7s; }
.is-sting .lockup__name { animation-delay: 1.95s; }
.is-sting .hero .eyebrow, .is-sting .h1__pipe { animation-delay: 1.7s; }
.is-sting .h1__name { animation-delay: 1.75s; }
.is-sting .h1__title { animation-delay: 1.87s; }
.is-sting .strip { animation-delay: 2.25s; }
.is-sting .hero__photo { --pd: 2.35s; }
.is-sting .publishers, .is-sting .reel, .is-sting .about { animation-delay: 2.1s; }
/* Larger reel chips (Mike, 2026-10-02) */
.reel .facade-reel .reel__label, .reel .reel__dur { font-size: 0.9rem; padding: 10px 14px; letter-spacing: 0.18em; }
.reel .facade-reel .reel__label { left: 16px; bottom: 16px; }
.reel .reel__dur { right: 16px; bottom: 16px; }
@media (max-width: 599px) { .reel .facade-reel .reel__label, .reel .reel__dur { font-size: 0.72rem; padding: 7px 10px; } .reel .facade-reel .reel__label { left: 10px; bottom: 10px; } .reel .reel__dur { right: 10px; bottom: 10px; } }

/* About in two columns (2026-10-02): bio at reading width on the left, the facts a visitor scans for on the right. */
.about__cols { display: grid; gap: 40px; }
.facts { margin: 0; display: grid; gap: 24px; align-content: start; }
.facts dt { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.facts dd { margin: 0; color: var(--fg); font-size: 0.9375rem; line-height: 1.5; }
.facts dd + dd { margin-top: 8px; }
.facts__sub { display: block; color: var(--fg-2); }
.facts a { text-decoration-color: var(--fg-3); }
@media (min-width: 900px) {
  .about__cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; }
  .facts { border-left: 1px solid var(--line); padding-left: 40px; }
}
.has-io .about:not(.in-view) > .about__cols { opacity: 0; transform: translate3d(0, 10px, 0); }
.has-io .about > .about__cols { transition: opacity 0.7s ease-out 0.1s, transform 0.8s var(--ease) 0.1s; }
.about__text { align-content: start; }
.work-section > h2 + .grid { margin-top: 24px; }

/* Pre-launch audit (2026-10-02) */
/* Contrast: small grey labels were 4.43:1 on the page background; AA needs 4.5:1. */
:root { --fg-3: #8a847b; }
/* Tap targets: inline links get vertical padding so every target is at least 24px tall (WCAG 2.2, 2.5.8). */
.nav a, .strip a, .anchors a, .site-footer a, .more-work a, .facts a, .more a, .hl__link a, .reel-page__links a, .title-list a, .more-list li a, .crumb a, .xp__employer a { padding-block: 5px; }
.nav a::after { bottom: 2px; }
.lockup { min-height: 32px; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--fg); }
.crumb a::before { content: "\2190\00a0"; }
/* Footer navigation: every page links to every franchise page. */
.footer-nav { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--fg); text-decoration: underline; }
/* Additional trailers on the work page, grouped by franchise. */
.more-list__group { margin-top: 32px; }
.more-list__group h3 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: var(--fg-3); }
.more-list__group h3 a { color: inherit; text-decoration: none; padding-block: 5px; }
.more-list__group h3 a:hover { color: var(--fg); }
.more-list__group ul { margin-top: 12px; }
/* Intro pacing: the same sequence about half a second shorter, so the first screen is complete near 2s (LCP). */
.is-sting .lockup .mark { --t: 1; animation: mark-fly3 1.6s backwards; }
@keyframes mark-fly3 {
  from { transform: translate(var(--mx), calc(42vh - 28px)) scale(var(--k)); }
  60% { transform: translate(var(--mx), calc(42vh - 28px)) scale(var(--k)); animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
  to { transform: none; }
}
.is-sting .lockup .mark__grid { animation: grid-flash 0.28s ease-out 0.7s; }
.is-sting .nav { animation-delay: 1.3s; }
.is-sting .lockup__name { animation-delay: 1.55s; }
.is-sting .hero .eyebrow, .is-sting .h1__pipe { animation-delay: 1.3s; }
.is-sting .h1__name { animation-delay: 1.35s; }
.is-sting .h1__title { animation-delay: 1.47s; }
.is-sting .strip { animation-delay: 1.85s; }
.is-sting .hero__photo { --pd: 1.8s; }
.is-sting .hero__photo img { animation-delay: calc(var(--pd) + 0.2s); }
.is-sting .publishers, .is-sting .reel, .is-sting .about { animation-delay: 1.7s; }
.anchors a { padding-block: 8px; }
.about__text a, .connect p a, .connect__at a, .notfound a { padding-block: 4px; }
/* The portrait becomes fully opaque early in its focus pull, so the largest element on the first screen paints sooner. */
@keyframes photo-rack2 { from { opacity: 0; filter: blur(18px); transform: scale(1.06); } 22% { opacity: 1; } }
.is-ready .hero__photo img { animation-name: photo-rack2; }
@media (max-width: 899px) { .is-sting .hero__photo { --pd: 1.6s; } }
.anchors a { display: inline-block; padding-block: 6px; }
.anchors__inner { padding-block: 6px; }
/* The reel and the phone portrait finish their entrances sooner: the browser records the largest paint when the entrance ends. */
.is-sting .publishers, .is-sting .reel, .is-sting .about { animation: fade 0.4s ease-out 1.5s backwards; }
@media (max-width: 899px) { .is-sting .hero__photo { --pd: 1.4s; } .is-ready .hero__photo img { animation-duration: 0.6s; } }
.work-section h2 a { display: inline-block; padding-block: 4px; }
.card__title { text-transform: none; letter-spacing: 0.01em; color: var(--fg); font-size: 0.95rem; font-weight: 400; line-height: 1.35; }

/* About photo (2026-10-03): the controller portrait in the same capture corners as the hero, left of the bio. */
.about__photo { position: relative; width: min(60vw, 240px); aspect-ratio: 4 / 5; }
.about__photo picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.about__photo .corners { opacity: 0.9; --d: 10px; color: var(--fg-2); }
.about__photo .corners i { border-color: var(--fg-2); }
.about__photo:hover .corners { --d: 16px; }
@media (min-width: 900px) {
  .about__cols { grid-template-columns: 200px minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
  .about__photo { width: 200px; }
}
@media (min-width: 1200px) {
  .about__cols { grid-template-columns: 240px minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
  .about__photo { width: 240px; }
}

/* Spacing pass 2026-10-10: phone header, wrapping franchise strip, footer identity line */
@media (max-width: 599px) {
  .lockup__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .anchors__inner { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; gap: 0 16px; }
  .anchors__inner > span[aria-hidden] { display: none; }
  .footer-id__sep { display: none; }
  .footer-id__part { display: block; }
}
.footer-id__part { white-space: nowrap; }