/* Refine the established film-first identity; imagery remains the colour source.
   Reference lock: OPX dark canvas/type, Pihl's precise project segmentation.
   Existing blue is retained for interaction only. No media or credits changed. */
:root { --muted:#b0afac; --line:#30302e; --type-section:clamp(36px,4.2vw,64px); }
.nav { height:80px; }
.nav nav { gap:clamp(20px,3.2vw,48px); }
.nav nav a { transition:color .18s,border-color .18s; }
.identity { align-items:flex-end; padding-top:clamp(35px,4vw,64px); padding-bottom:29px; }
.identity .identity-role { font-size:12px; line-height:1.5; letter-spacing:.015em; color:var(--muted); padding:0; margin-bottom:16px; }
.identity h1 { font-size:clamp(66px,8.5vw,134px); letter-spacing:-.065em; line-height:1.02; }
.portfolio-intro { grid-template-columns:minmax(0,1fr) minmax(190px,.44fr); gap:clamp(28px,5vw,80px); margin-bottom:46px; }
.intro-copy { max-width:66ch; min-width:0; }
.intro-lead { font-size:clamp(20px,2vw,27px); line-height:1.42; letter-spacing:-.02em; max-width:44ch; color:var(--fg); text-wrap:pretty; }
.intro-detail { font-size:14px; line-height:1.75; color:var(--muted); margin-top:18px; max-width:64ch; }
.intro-profile { display:flex; flex-direction:column; gap:22px; align-items:flex-start; justify-self:end; }
/* Source photograph is intact. This viewport excludes hand/waist, not facial pixels. */
.portrait-frame { position:relative; width:176px; aspect-ratio:4/5; overflow:hidden; margin:0; background:#c5c8cc; }
.portrait-frame img { position:absolute; width:138.08%; max-width:none; height:auto; left:-19.23%; top:-4.62%; object-fit:initial; }
.intro-contact { align-self:end; gap:12px; padding:0 0 2px; }
.intro-contact .eyebrow { font-size:9px; }
.intro-contact>a { font-size:13px; }
.intro-contact>a span { margin-left:10px; }
.intro-contact a:hover { color:var(--accent); }
.work-index-label { margin-bottom:14px; }
.project-index { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; margin-bottom:39px; }
.project-index a { display:grid; grid-template-columns:20px minmax(0,1fr); align-content:center; align-items:baseline; gap:7px 10px; padding:20px 14px; min-height:91px; border-right:1px solid var(--line); transition:background .18s,color .18s; }
.project-index a:first-child { padding-left:0; }
.project-index a:last-child { border-right:0; padding-right:0; }
.project-index a:hover { background:#ffffff04; }
.project-index a strong { grid-column:2; grid-row:1; font-size:12px; font-weight:400; line-height:1.45; }
.project-index a>span:not(.project-index-number) { grid-column:2; grid-row:2; font-size:10px; }
.project-index .project-index-number { display:block; grid-column:1; grid-row:1; font-size:9px; font-variant-numeric:tabular-nums; }
.project-index a:focus-visible { outline-offset:-3px; }
.project-heading,.role-heading { margin-bottom:25px; }
.project-heading h2,.role-heading h2 { letter-spacing:-.045em; }
.project-heading .working-title { display:inline-block; font-size:12px; line-height:1.5; letter-spacing:0; vertical-align:middle; color:var(--muted); }
.section-intro { max-width:70ch; line-height:1.75; }
.work-status { gap:7px 20px; }
.media-browser { --rail-width:264px; gap:clamp(24px,3vw,44px); }
.media-list .media-choice { min-height:88px; }
.media-list .media-choice.active { background:#ffffff05; }
.media-list .media-choice.active:before { top:21px; bottom:21px; }
.clip-copy strong { font-size:12px; line-height:1.5; }
.clip-duration,.clip-number { font-size:10px; }
.media-stage video,.youtube-film,.performer-cover { outline:1px solid #ffffff0d; outline-offset:-1px; }
.media-stage .scene-description p,.media-stage .vfx-caption>p { color:#bdbcb9; line-height:1.8; }
.campaign-context p { line-height:1.8; }
.campaign-section,.action-design-section { margin-top:clamp(60px,7vw,100px); }
.production-notes summary { font-size:12px; }
.partner-heading-arrow { display:inline-block; font-size:.55em; vertical-align:middle; margin-left:5px; color:var(--muted); }
.workflow-summary { display:grid; grid-template-columns:130px minmax(0,1fr); gap:24px; border-top:1px solid var(--line); padding:16px 0; }
.media-browser+.workflow-summary { margin-top:26px; }
.workflow-summary>.eyebrow { padding-top:3px; font-size:9px; }
.workflow-summary>p { font-size:13px; line-height:1.75; color:var(--muted); max-width:84ch; }
.workflow-summary+.vfx-reference { margin-top:8px; }
.case-notes { margin-top:28px; }
.case-notes .workflow-summary { grid-template-columns:var(--rail-width,264px) minmax(0,1fr); gap:clamp(24px,3vw,44px); }
.case-notes .workflow-summary>p { max-width:80ch; }
.aether-partnership { margin-top:70px; }
.aether-partnership .project-heading h2 { font-size:var(--type-subsection); }
.aether-copy>p+p { margin-top:18px; }
.aether-copy .aether-status { font-size:11px; color:var(--fg); }
.aether-copy>a { display:inline-block; margin-top:20px; padding-block:8px; font-size:12px; }
footer { margin-top:86px; padding-top:30px; padding-bottom:38px; }
@media (min-width:701px) and (max-width:1000px) {
  .media-browser { --rail-width:214px; gap:24px; }
  .project-index a { padding-inline:10px; column-gap:6px; grid-template-columns:15px minmax(0,1fr); }
  .project-index a strong { font-size:11px; }
}
@media (max-width:700px) {
  .nav { height:72px; gap:16px; }
  .nav nav { gap:16px; }
  .nav nav a { font-size:10px; }
  .identity { flex-direction:row; align-items:flex-end; gap:14px; padding-top:30px; padding-bottom:25px; }
  .identity .identity-role { font-size:11px; margin-bottom:13px; }
  .identity h1 { font-size:clamp(54px,13vw,88px); }
  .portfolio-intro { grid-template-columns:1fr; gap:24px; margin-bottom:30px; }
  .intro-lead { font-size:20px; line-height:1.45; }
  .intro-detail { font-size:13px; line-height:1.75; margin-top:14px; }
  .intro-profile { justify-self:stretch; display:flex; flex-direction:row; gap:24px; align-items:center; }
  .portrait-frame { width:104px; flex:none; }
  .intro-contact { align-self:center; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:0; min-width:0; }
  .intro-contact>.eyebrow { display:none; }
  .intro-contact>a { min-height:36px; display:inline-flex; align-items:center; font-size:12px; }
  .project-index { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:30px; }
  .project-index a { padding:16px 10px; min-height:78px; gap:5px 8px; grid-template-columns:18px minmax(0,1fr); }
  .project-index a:nth-child(2) { border-right:0; }
  .project-index a:nth-child(n+3) { border-top:1px solid var(--line); }
  .project-index a:nth-child(3) { padding-left:0; }
  .project-index a>span:not(.project-index-number) { display:block; font-size:9px; }
  .project-index a strong { font-size:12px; }
  .project-heading,.role-heading { margin-bottom:22px; }
  .media-browser { gap:24px; }
  .media-list .media-choice { min-height:0; }
  .media-list .media-choice.active { background:none; }
  .media-list .media-choice.active:before { top:0; bottom:auto; }
  .campaign-section,.action-design-section { margin-top:55px; }
  .aether-partnership { margin-top:50px; }
  .workflow-summary { grid-template-columns:1fr; gap:7px; padding:14px 0; }
  .case-notes { margin-top:24px; }
  .case-notes .workflow-summary { grid-template-columns:1fr; gap:7px; }
  .workflow-summary>p { font-size:12px; }
  footer { margin-top:56px; padding-bottom:28px; }
}
@media (prefers-reduced-motion:reduce) { .nav nav a,.project-index a { transition:none; } }