:root {
  color-scheme: light;
  --warm-paper: #f3f0e9;
  --warm-ink: #292825;
  --muted: #6d6963;
  --line: #d1cdc5;
  --panel: #e8e4dc;
  --warm-gray: #d9d6d0;
  --theme-accent: #80523d;
  --media-ink: #292825;
  --media-paper: #f3f0e9;
  --pad: clamp(20px, 4vw, 68px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --warm-paper: #1d1d1b;
  --warm-ink: #f3f0e9;
  --muted: #b9b5ae;
  --line: #41403c;
  --panel: #292825;
  --warm-gray: var(--panel);
  --theme-accent: #d9a589;
}
:root {
  --ink: var(--warm-ink);
  --paper: var(--warm-paper);
  --panel-2: var(--panel);
  --accent: var(--theme-accent);
  --terracotta: #a16f56;
  background: var(--warm-paper);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--warm-paper);color:var(--warm-ink);font-family:"Helvetica Neue",Arial,"PingFang SC",sans-serif}
img{max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--theme-accent);outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section-index{margin:0 0 22px;color:var(--muted);font-size:10px;letter-spacing:.2em}
.site-header{position:absolute;z-index:30;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:25px var(--pad);font-size:10px;letter-spacing:.11em}
.site-brand{font-weight:700}.site-brand sup{font-size:6px}.site-status{justify-self:center}.site-nav{justify-self:end;display:flex;gap:clamp(10px,2vw,26px);font-size:13px;letter-spacing:0}.site-nav a{transition:opacity .25s}.site-nav a:hover{opacity:.5}

/* Hero composition */
.intro-sequence{position:relative;isolation:isolate}
.hero-stage{position:relative;z-index:0;height:84svh;min-height:560px;overflow:hidden;background:#aaa9a4}
.hero-stage__wash{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#c9c7c0 0,#aaa9a4 48%,#85857f 100%)}
.hero-stage__wash:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(0 0 0/.2),transparent 35%,transparent 65%,rgb(0 0 0/.18))}
.name-marquee{position:absolute;z-index:1;inset:15vh 0 auto;overflow:hidden;color:#efeee9}
.name-marquee__track{display:flex;width:max-content;white-space:nowrap;font-size:clamp(88px,20vh,220px);font-weight:600;line-height:.84;letter-spacing:-.07em}
.name-marquee__track span{padding-right:4vw}
.hero-stage__portrait{position:absolute;z-index:3;left:50%;bottom:-1.5vh;width:min(54vw,760px);height:90svh;transform:translateX(-50%);pointer-events:none}
.hero-stage__portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 16px rgb(0 0 0/.12))}
.hero-stage__role{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:30px;display:flex;justify-content:space-between;align-items:end;padding-top:16px;border-top:2px solid var(--paper);font-size:12px;line-height:1.45}
.hero-stage__role p{margin:0}.hero-stage__role p:last-child{text-align:right}
.hero-stage__meta{position:absolute;z-index:5;right:var(--pad);top:29%;display:grid;gap:6px;text-align:right;font-size:8px;letter-spacing:.15em}
.hero-stage__scroll{position:absolute;z-index:5;left:var(--pad);bottom:112px;font-size:8px;letter-spacing:.16em}
.intro-panel{position:relative;z-index:4;margin-top:0;overflow:hidden;border-radius:clamp(26px,3.5vw,56px) clamp(26px,3.5vw,56px) 0 0;background:var(--panel);box-shadow:0 -30px 90px rgb(0 0 0/.52)}
.intro-panel:before{content:"";position:absolute;z-index:5;left:50%;top:18px;width:48px;height:3px;transform:translateX(-50%);border-radius:20px;background:rgb(232 230 223/.3)}

.section-heading{display:grid;grid-template-columns:.55fr 1.3fr .65fr;gap:35px;align-items:end;padding:clamp(110px,12vw,180px) var(--pad) clamp(60px,7vw,100px)}
.section-heading h2{margin:0;font-size:clamp(58px,8.4vw,132px);font-weight:500;line-height:.83;letter-spacing:-.075em}
.section-heading>p:last-child{max-width:310px;margin:0;color:var(--muted);font-size:11px;line-height:1.8}

.work-section{padding-bottom:clamp(100px,10vw,160px);overflow:hidden}.section-heading--work{padding-top:clamp(100px,10vw,150px)}

/* experience, capabilities, about */
.experience-section,.capabilities-section,.about-section,.contact-section{padding:clamp(110px,12vw,190px) var(--pad);border-top:1px solid var(--line)}
.experience-section .section-heading,.capabilities-section .section-heading{padding:0 0 clamp(60px,7vw,100px)}
.timeline{border-top:1px solid var(--line)}.timeline article{display:grid;grid-template-columns:.35fr 1fr;gap:30px;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .35s,background .35s}.timeline article:hover{padding-inline:20px;background:#111}.timeline time{color:var(--muted);font-size:9px;letter-spacing:.13em}.timeline h3{margin:0;font-size:clamp(18px,2.2vw,32px);font-weight:500}.timeline p{margin:7px 0 0;color:var(--muted);font-size:11px}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.capability-grid article{min-height:300px;padding:28px;border-right:1px solid var(--line);transition:background .3s}.capability-grid article:last-child{border-right:0}.capability-grid article:hover{background:#151514}.capability-grid span{color:var(--muted);font-size:9px}.capability-grid h3{margin:90px 0 18px;font-size:clamp(19px,2vw,28px);font-weight:500}.capability-grid p{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.about-section{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(55px,9vw,150px);align-items:end}.about-section h2{margin:25px 0 40px;font-size:clamp(54px,7.5vw,120px);font-weight:500;line-height:.87;letter-spacing:-.07em}.about-section__copy>p:last-child{max-width:700px;color:#abab a4;font-size:13px;line-height:1.9}.education-list{border-top:1px solid var(--line)}.education-list article{padding:25px 0;border-bottom:1px solid var(--line)}.education-list time{color:var(--muted);font-size:9px}.education-list h3{margin:13px 0 6px;font-size:19px;font-weight:500}.education-list p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}

/* contact */
.contact-section{position:relative;min-height:88svh;display:flex;align-items:end;justify-content:space-between;gap:50px;overflow:hidden}.contact-section__ghost{position:absolute;left:-2%;top:8%;margin:0;white-space:nowrap;color:rgb(232 230 223/.045);font-size:clamp(80px,15vw,230px);font-weight:600;letter-spacing:-.08em}.contact-section h2{margin:28px 0;font-size:clamp(62px,9vw,145px);font-weight:500;line-height:.86;letter-spacing:-.075em}.contact-section p{color:var(--muted);font-size:10px;line-height:1.8}.contact-section__links{display:grid;gap:17px;justify-items:end;font-size:10px;letter-spacing:.08em}.site-footer{display:flex;justify-content:space-between;padding:25px var(--pad) 35px;border-top:1px solid var(--line);color:var(--muted);font-size:8px;letter-spacing:.12em}

/* project detail pages */
.wrap{width:min(100%,1600px);margin:auto;padding-inline:var(--pad)}.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-weight:700}.logo span{color:var(--muted)}.links{display:flex;gap:32px;font-size:10px;letter-spacing:.14em}.detail-hero{padding:100px 0}.back{display:inline-flex;margin-bottom:100px;color:var(--muted);font-size:10px}.eyebrow,.detail-label{color:var(--muted);font-size:10px;letter-spacing:.18em}.detail-title{font-size:clamp(56px,9vw,138px);line-height:.9;letter-spacing:-.08em}.detail-cover{aspect-ratio:14/9;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);background:var(--panel)}.detail-cover img{width:100%;height:100%;object-fit:contain}.detail-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;padding:70px 0 150px}.detail-copy{max-width:680px}.detail-copy h2{font-size:clamp(28px,4vw,52px)}.detail-copy p,.pending{color:var(--muted);line-height:1.9}.detail-copy h3{margin-top:38px}.media-list{padding:0;list-style:none;border-top:1px solid var(--line)}.media-list li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}.pending{margin-top:36px;padding:20px;border:1px solid var(--line)}.next-project{display:flex;justify-content:space-between;padding:34px 0 50px;border-top:1px solid var(--line)}


@media(max-width:720px){
  :root{--pad:18px}.site-header{grid-template-columns:1fr auto;padding-top:18px}.site-status{display:none}.site-nav{gap:10px;font-size:11px;letter-spacing:0}
  .hero-stage{height:80svh;min-height:540px}.name-marquee{top:19vh}.name-marquee__track{font-size:14vh}.hero-stage__portrait{width:106vw;height:79svh}.hero-stage__meta{display:none}.hero-stage__role{font-size:9px}.hero-stage__scroll{bottom:100px}.intro-panel{border-radius:27px 27px 0 0}
  .section-heading{display:block;padding-block:95px 52px}.section-heading h2{font-size:clamp(55px,18vw,84px)}.section-heading>p:last-child{margin-top:28px}
  .experience-section,.capabilities-section,.about-section,.contact-section{padding:95px var(--pad)}.timeline article{grid-template-columns:1fr;gap:10px}.capability-grid{grid-template-columns:1fr}.capability-grid article{min-height:230px;border-right:0;border-bottom:1px solid var(--line)}.capability-grid h3{margin-top:60px}.about-section{grid-template-columns:1fr}.about-section__copy>p:last-child{font-size:12px}.contact-section{min-height:80svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}.contact-section__links{justify-items:start}.site-footer{flex-direction:column;gap:8px}.detail-hero{padding:64px 0}.back{margin-bottom:64px}.detail-grid{grid-template-columns:1fr;padding:45px 0 90px}.links{gap:14px}
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.about-section__copy>p:last-child{color:#ababa4}


/* Phase 1: static hero typography and selected portfolio. */
/* A static, centered single-line title behind the mid-shot portrait. */
.hero-stage .name-marquee{top:25%;left:0;right:0;overflow:visible;text-align:center}
.hero-stage .name-marquee__track{display:block;width:100%;font-size:16.5vw;line-height:.9;letter-spacing:-.035em;opacity:.74;transform:none;animation:none}
.hero-stage .name-marquee__track span{display:block;padding:0}
.hero-stage .hero-stage__portrait{left:50%;top:calc(17% + 30px);bottom:auto;height:131.75%;width:min(85vw,935px);overflow:visible}
.hero-stage .hero-stage__portrait img{object-position:center top;filter:none}
.hero-stage .hero-stage__role{bottom:25px;align-items:center;font-size:clamp(10px,1.05vw,15px);gap:20px}
.hero-stage .hero-stage__scroll{left:var(--pad);bottom:104px;font-size:14px;letter-spacing:.04em;padding:12px 0;border-bottom:1px solid currentColor;z-index:6}
.hero-stage__scroll span{margin-left:32px}
.selected-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 28px;padding:0 var(--pad)}
.selected-card{display:block;min-width:0}
.selected-card__image{aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.selected-card--kama .selected-card__image{background:radial-gradient(ellipse at center,#63564a,#292622 85%)}
.selected-card__image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s ease,opacity .3s ease}

.selected-card__caption{display:flex;justify-content:space-between;align-items:start;gap:20px;padding-top:18px}
.selected-card__caption h3{margin:0;font-size:clamp(18px,2vw,27px);font-weight:500;letter-spacing:-.025em}
.selected-card__caption p{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.selected-card__caption>span{font-size:23px}
@media (min-width: 721px) and (max-width: 1000px) {
  .hero-stage .hero-stage__portrait { width: 85vw; }
}
@media(max-width:720px){
 .hero-stage .name-marquee{top:29%}
 .hero-stage .name-marquee__track{font-size:16.5vw;line-height:.9}
 .hero-stage .hero-stage__portrait{width:127.5vw;max-width:629px;height:127.5%;top:calc(24% + 30px);bottom:auto;left:50%}
 .hero-stage .hero-stage__role{display:grid;gap:6px;bottom:28px;font-size:10px}
 .hero-stage .hero-stage__role p:last-child{text-align:left}
 .hero-stage .hero-stage__role{isolation:isolate}
 .hero-stage .hero-stage__scroll{bottom:112px;font-size:12px}
 .selected-grid{grid-template-columns:1fr;gap:34px}
 .selected-card__caption h3{font-size:17px}.selected-card__caption p{font-size:11px}
}

/* Warm editorial surfaces on the portfolio homepage. */
.portfolio-home {
  background: var(--warm-paper);
}
.portfolio-home :is(.intro-panel, .experience-section, .capabilities-section, .about-section) {
  color: var(--warm-ink);
  background: var(--warm-paper);
}
.portfolio-home .intro-panel { box-shadow: 0 -18px 50px rgb(41 40 37 / 16%); }
.portfolio-home .intro-panel::before { background: rgb(41 40 37 / 28%); }
.portfolio-home .about-section,
.portfolio-home .career-capabilities,
.portfolio-home .timeline article:hover,
.portfolio-home .capability-grid article:hover { background: var(--warm-gray); }
.portfolio-home .about-section__copy > p:last-child { color: var(--muted); }
.portfolio-home .selected-card__image { background: var(--panel); }
.portfolio-home .selected-card--kama .selected-card__image { background: var(--panel); }
.portfolio-home .selected-card__caption > span { color: var(--theme-accent); }
.portfolio-home :is(.contact-section, .site-footer) {
  --muted: #d9d6d0;
  --line: #55514b;
  color: var(--media-paper);
  background: var(--media-ink);
}
.portfolio-home :is(.intro-panel, .experience-section, .capabilities-section, .about-section) :focus-visible {
  outline-color: var(--theme-accent);
}

.phoenix-film__player {
  display: block;
  width: min(100%, 880px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--media-ink);
  color-scheme: dark;
}
.phoenix-film__notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(95px, 160px);
  gap: clamp(16px, 4vw, 54px);
  align-items: start;
  width: min(100%, 880px);
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.phoenix-film__notes h2 { margin: 0 0 6px; font-size: 14px; }
.phoenix-film__notes p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.phoenix-film__notes strong { color: var(--warm-ink); }
.phoenix-film__notes figure { margin: 0; }
.phoenix-film__notes img { display: block; width: 100%; height: auto; }
.phoenix-film__notes figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; }

/* Shared project page typography and media collection. */
.project-page {
  color: var(--warm-ink);
}
.project-page :focus-visible { outline-color: var(--theme-accent); }
.project-page .links { gap: clamp(12px, 3vw, 32px); }
.project-intro { padding-block: clamp(42px, 8vw, 104px); }
.project-page .back { margin-bottom: clamp(28px, 5vw, 66px); }
.project-intro .detail-title { margin: 16px 0 36px; }
.project-intro__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
  max-width: 980px;
}
.project-intro__copy h2 { margin: 0 0 8px; font-size: 16px; }
.project-intro__copy p { margin: 0; color: var(--muted); line-height: 1.8; }
.film-group { padding: clamp(34px, 5vw, 66px) 0; border-top: 1px solid var(--line); }
.film-group > h2 { margin: 0 0 26px; font-size: clamp(26px, 4vw, 52px); font-weight: 500; }
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.film-grid--portrait { max-width: 780px; }
.film-card { min-width: 0; }
.film-card__media { position: relative; background: var(--warm-ink); }
.film-card__media--landscape { aspect-ratio: 16 / 9; }
.film-card__media--portrait { aspect-ratio: 9 / 16; }
.film-card__trigger,
.film-card__media video { width: 100%; height: 100%; }
.film-card__trigger[hidden], .film-card__media video[hidden] { display: none; }
.film-card__trigger {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--warm-ink);
}
.film-card__trigger img,
.film-card__media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-card__media video { color-scheme: dark; }
.film-card__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--media-ink);
  color: var(--media-paper);
}
.film-card__trigger:hover .film-card__play { background: #80523d; }
.film-card__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.film-card__caption h3 { margin: 0; font-size: clamp(16px, 2vw, 23px); font-weight: 500; }
.film-card__caption span, .film-card__error { color: var(--muted); font-size: 13px; }
.project-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: end;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
}
.project-pagination small { display: block; margin-bottom: 6px; color: var(--muted); }
.project-pagination a:last-child { text-align: right; }


@media (max-width: 620px) {
  .project-page .nav { min-height: 64px; }
  .project-page .logo { font-size: 11px; }
  .project-page .links { font-size: 8px; }
  .project-intro__copy, .film-grid { grid-template-columns: 1fr; }
  .film-grid--portrait { max-width: 360px; }
  .project-pagination { grid-template-columns: 1fr 1fr; }
  .project-pagination a:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
}

/* One-time homepage entrances. Layout transforms stay on their own layers. */
@keyframes home-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes home-rise {
  from { opacity: var(--entry-opacity, 0); transform: translateY(var(--entry-distance)); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .portfolio-home .hero-stage__wash {
    animation: home-fade 300ms ease-out both;
  }
  .portfolio-home .hero-stage__portrait img {
    --entry-distance: 30px;
    animation: home-rise 800ms cubic-bezier(.22, 1, .36, 1) 500ms both;
  }
  .portfolio-home .hero-stage__role {
    animation: home-fade 350ms ease-out 900ms both;
  }
  .portfolio-home .hero-stage__role p:last-child {
    animation: home-fade 450ms ease-out 1050ms both;
  }
  .portfolio-home .hero-stage__scroll {
    animation: home-fade 600ms ease-out 1200ms both;
  }
  .portfolio-home .hero-stage__scroll:focus,
  .selected-section .work-arriving:focus-within {
    animation: none;
  }
  .selected-section .work-arriving:not(:focus-within) {
    --entry-distance: 20px;
    --entry-opacity: .25;
    animation: home-rise 600ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms) both;
  }
  @media (min-width: 721px) {
    .section-arriving:not(:focus-within) {
      --entry-distance: 22px;
      --entry-opacity: .6;
      animation: home-rise 400ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .career-contact.section-arriving:not(:focus-within) { --entry-distance: 0px; }
  }
  .selected-card__caption > span { transition: transform 220ms ease-out; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .selected-card:hover .selected-card__image img { transform: scale(1.02); }
  .selected-card:hover .selected-card__caption > span { transform: translate(3px, -3px); }
}

.project-page .detail-title {
  font-size: clamp(36px, 7vw, 102px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.project-page .project-intro { padding-block: clamp(28px, 5vw, 72px); }
.project-page .project-intro .detail-title { margin-bottom: 16px; }
.project-page .film-card__trigger,
.project-page .film-card__media video {
  position: absolute;
  inset: 0;
}
.project-notes {
  max-width: 880px;
  padding-block: 24px 36px;
  border-top: 1px solid var(--line);
}
.project-notes h2, .project-notes h4 { margin: 0 0 12px; font-size: clamp(20px, 3vw, 32px); }
.project-notes p, .project-notes li { color: var(--muted); line-height: 1.8; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-gallery figure { min-width: 0; margin: 0; }
.project-gallery img { display: block; width: auto; max-width: 100%; height: auto; max-height: 580px; object-fit: contain; }
.project-gallery figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.project-gallery figcaption span, .project-gallery figcaption strong { display: block; }
.case-metrics { display: flex; flex-wrap: wrap; gap: 20px 34px; margin-top: 24px; }
.case-metrics span { color: var(--muted); }
.case-metrics b { display: block; color: var(--warm-ink); font-size: 26px; }
.related-project { margin: 24px 0; }
.related-project a, .legacy-links a { text-decoration: underline; text-underline-offset: .2em; }
.legacy-links li { padding-block: 8px; }
@media (max-width: 620px) {
  .phoenix-film__notes, .project-gallery { grid-template-columns: 1fr; }
  .phoenix-film__notes figure { max-width: 165px; }
}

/* Chinese career information, scoped to the four homepage sections. */
.portfolio-home :is(.career-about, .career-experience, .career-capabilities, .career-contact) {
  padding: clamp(48px, 7vw, 104px) var(--pad);
}
.portfolio-home .career-title {
  margin: 0 0 32px;
  font-size: clamp(44px, 7vw, 98px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1.06;
}
.portfolio-home .career-about {
  display: block;
  padding-block: clamp(40px, 5vw, 72px);
}
.career-about__intro,
.career-about__details {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(20px, 5vw, 72px);
  align-items: start;
}
.portfolio-home .career-about .career-title { margin-bottom: 12px; }
.career-about__bio > p:not(.section-index) {
  max-width: 43em;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.career-about__bio > .career-about__role:not(.section-index) {
  color: var(--warm-ink);
  font-weight: 600;
}
.career-about__bio > p:last-child { margin-bottom: 0; }
.career-about__details {
  margin-top: clamp(24px, 3.5vw, 48px);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.career-about__details h3 { margin: 0 0 14px; font-size: 16px; }
.career-education article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.career-education article + article { margin-top: 12px; }
.career-education h4 { margin: 0 0 3px; font-size: 15px; font-weight: 550; }
.career-education article p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.career-about__skills ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.career-about__skills li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.career-timeline article {
  grid-template-columns: minmax(0, 19%) minmax(0, 1fr);
  gap: 6px clamp(16px, 2vw, 28px);
  padding: 18px 0;
  transition: none;
}
.portfolio-home .career-timeline article:hover { padding-inline: 0; background: transparent; }
.career-timeline article h3 { font-size: clamp(18px, 2.5vw, 27px); font-weight: 600; line-height: 1.3; }
.career-timeline article p { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.career-timeline article .career-period { margin: 3px 0 0; }
.career-period time { font-size: inherit; letter-spacing: normal; }
.career-timeline .career-role { color: var(--muted); font-size: 14px; font-weight: 500; }
.career-timeline .career-role::before { content: " / "; }
.career-brand-projects > div { grid-column: -2 / -1; }
.career-brand-project { margin-top: 10px; }
.career-brand-project h4 { margin: 0; font-size: 15px; line-height: 1.5; }
.career-brand-project h4 span { display: inline-block; color: var(--muted); font-size: 13px; font-weight: 500; }
.career-brand-project time { font: inherit; }
.career-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 7px; font-size: 13px; }
.career-links a, .career-contact__links a { text-decoration: underline; text-underline-offset: .25em; }
.career-capabilities .capability-grid article { min-height: 0; padding: clamp(18px, 3vw, 32px); transition: none; }
.career-capabilities .capability-grid article:hover { background: transparent; }
.career-capabilities .capability-grid h3 { margin: 14px 0 8px; font-size: clamp(18px, 2vw, 25px); }
.career-capabilities .capability-grid p { font-size: 14px; line-height: 1.7; }
.portfolio-home .career-contact { min-height: 0; align-items: end; gap: 24px 40px; }
.career-contact .career-contact__intro { max-width: 590px; margin: 0; font-size: 15px; }
.career-contact__links { min-width: 0; gap: 12px; font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .career-about__intro, .career-about__details { grid-template-columns: minmax(0, 1fr); }
  .career-timeline article { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .career-capabilities .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-capabilities .capability-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
  .career-capabilities .capability-grid article:nth-last-child(-n+2) { border-bottom: 0; }
  .portfolio-home .career-contact { flex-direction: column; align-items: start; }
  .career-contact__links { justify-items: start; }
}

.video-detail > .wrap {
  width: min(100%, calc(1180px + 2 * var(--pad)));
}
.video-detail .film-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.video-detail .film-grid--portrait {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: none;
}
.video-detail .film-card__media {
  aspect-ratio: 16 / 9;
  background: transparent;
}
.video-detail .film-grid--portrait .film-card__media { aspect-ratio: 9 / 16; }
.video-detail .film-card__trigger { background: transparent; }
.video-detail .film-card__caption span { flex-shrink: 0; }
.video-detail .film-card__caption h3 { font-size: clamp(15px, 1.7vw, 20px); }
.film-dialog-open { overflow: hidden; }
.film-dialog {
  width: min(1080px, calc(100% - 24px));
  max-width: none;
  max-height: 96dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f3f0e9;
}
.film-dialog::backdrop { background: rgb(15 14 13 / 92%); }
.film-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.film-dialog h2 { margin: 0; font-size: 17px; }
.film-dialog button { flex-shrink: 0; padding: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.film-dialog__player video { display: block; width: 100%; max-height: 80dvh; object-fit: contain; color-scheme: dark; }
@media (max-width: 620px) {
  .video-detail .film-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .video-detail .film-grid--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .video-detail .film-grid--portrait .film-card__caption { flex-direction: column; gap: 3px; }
}

.selected-card__image { position: relative; }
.selected-card__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(22 21 19 / 28%);
  color: #fff;
  opacity: .72;
  pointer-events: none;
}
.selected-card:is(:hover, :focus-visible) .selected-card__play { opacity: 1; }
.career-about__portrait {
  display: block;
  width: min(100%, 300px);
  justify-self: center;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 12px;
}
.career-education__logo {
  display: block;
  width: 82px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}
.career-education__logo--northampton {
  padding: 6px;
  background: #292825;
}
@media (max-width: 760px) {
  .career-about__portrait { width: min(100%, 220px); }
}

/* Keep the portrait stage fixed and share theme tokens everywhere else. */
.site-header,
.hero-stage { color: var(--media-ink); }
.hero-stage__role { border-color: currentColor; }
.site-nav,
.nav .links { align-items: center; }
.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.theme-toggle:disabled { visibility: hidden; }
.theme-toggle::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.9 13.3A9 9 0 0 1 10.7 3.1 9 9 0 1 0 20.9 13.3Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="dark"] .theme-toggle::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.4 1.4m11.2 11.2L19 19M5 19l1.4-1.4M17.6 6.4 19 5'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-toggle:hover { opacity: .72; }
[data-theme="dark"] .career-education__logo:not(.career-education__logo--northampton) {
  background: var(--media-paper);
  border-radius: 3px;
}
@media (max-width: 480px) {
  .project-page .links { gap: 8px; font-size: 11px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle { transition: opacity 180ms ease-out; }
}

.ifeng-collection > .wrap { width: min(100%, calc(1100px + 2 * var(--pad))); }
.ifeng-collection .film-group > h2 { margin-bottom: 12px; }
.ifeng-description { max-width: 65ch; margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.ifeng-collection .phoenix-film__notes h3 { margin: 0 0 6px; font-size: 14px; }
.evidence-gallery { display: grid; gap: 22px; align-items: start; }
.ifeng-live-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 824px; }
.home-evidence-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 622px; }
@media (max-width: 740px) {
  .ifeng-live-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 542px; }
}
@media (max-width: 560px) {
  .evidence-gallery { grid-template-columns: 1fr; max-width: 300px; }
}
.evidence-gallery .brand-tile__media { display: block; aspect-ratio: auto; background: transparent; }
.evidence-gallery .brand-tile__media img { height: auto; }
.evidence-gallery .brand-tile:hover img { transform: none; }
.ifeng-live-caption { display: grid; gap: 4px; color: var(--muted); }
.ifeng-live-caption strong { color: var(--warm-ink); }

.ifeng-index > .wrap { width: min(100%, calc(880px + 2 * var(--pad))); }
.ifeng-index .nav { min-height: 64px; }
.ifeng-index__intro { padding: clamp(22px, 3vw, 36px) 0 20px; }
.ifeng-index__intro .detail-title { margin: 8px 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.12; }
.ifeng-index__intro .ifeng-description { margin: 0; }
.ifeng-index__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ifeng-card { display: block; min-width: 0; }
.ifeng-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ifeng-card__label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding-top: 8px; }
.ifeng-card__label h2 { margin: 0; font-size: clamp(15px, 2vw, 18px); font-weight: 550; line-height: 1.35; }
.ifeng-card__label p, .ifeng-card__label small { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.ifeng-card__label > span { color: var(--theme-accent); }
.ifeng-index .project-pagination { margin-top: 18px; }
@media (max-width: 620px) {
  .ifeng-index__grid { grid-template-columns: 1fr; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ifeng-card__label > span { transition: transform 180ms ease-out; }
  .ifeng-card:hover .ifeng-card__label > span { transform: translate(2px, -2px); }
}

.site-nav a, .project-page .links a { white-space: nowrap; }
@media (max-width: 360px) {
  .site-nav, .project-page .links { gap: 7px; }
  .project-page .logo { font-size: 13px; }
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .intro-sequence > .hero-stage { position: sticky; top: 0; }
  .portfolio-home .intro-panel { box-shadow: 0 -8px 24px rgb(41 40 37 / 10%); }
}

@media (max-width: 760px) {
  .career-contact__links > a { display: flex; align-items: center; min-height: 44px; }
}