/* Section rhythm: light editorial space between the navy listening area and mint CTA. */
.about{background:var(--cream);color:var(--ink)}
.about .eyebrow{color:#257d7e}
.about h2 em{color:#248f90}
.about-copy p{color:#435d68}
.about-copy .text-link{color:#146b70;border-color:#278f8e}
.about-copy .text-link span{color:#278f8e}
.about-grid{border-top:1px solid #b7c9c7;padding-top:40px}
.work .section-heading{margin-bottom:48px}
.project-grid{gap:32px;margin-top:32px}
.project-card{border-top:2px solid #a8c8c4;background:#e8eeea}
.project-card .project-meta,.portfolio-index{line-height:1.6}
.project-card .tag-list{gap:8px;margin-bottom:16px}
.project-card .project-card-link{margin-top:8px}
.portfolio-entry{padding-bottom:90px}
.portfolio-entry+.portfolio-entry{padding-top:32px}
.portfolio-entry-detail .entry-lead{max-width:540px}
.portfolio-entry dt,.film-details dt{line-height:1.6}
.portfolio-entry dd,.film-details dd{line-height:1.65}
@media(min-width:1025px){
  .portfolio-entry:nth-child(even) .portfolio-entry-grid{grid-template-columns:.88fr 1.12fr}
  .portfolio-entry:nth-child(even) .portfolio-entry-heading{grid-column:2;grid-row:1}
  .portfolio-entry:nth-child(even) .portfolio-entry-detail{grid-column:1;grid-row:1}
  .reels-grid{row-gap:64px;column-gap:30px}
}
/* Captions share a clear title, project label and contribution hierarchy. */
.reel-caption{padding-top:22px}
.reel-caption>span{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;color:#47646d}
.reel-caption h2{margin:12px 0 16px;font-size:30px;line-height:1.08;max-width:22ch}
.reel-caption p{border-top:1px solid #bdcdc6;padding-top:13px;margin:0;font-size:13px;line-height:1.65;color:#435d68;max-width:40ch}
.reel-video{box-shadow:0 8px 24px #071b2d0d}
/* Interaction accents never move the surrounding layout. */
.header-inner nav a{position:relative}
.header-inner nav a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform 180ms ease}
.header-inner nav a[aria-current="page"]:after,.header-inner nav a:focus-visible:after{transform:scaleX(1)}
.button .arrow-icon,.text-link .arrow-icon,.project-link .arrow-icon,.project-card-link .arrow-icon,.header-link .arrow-icon,.work-still .arrow-icon{transition:transform 200ms ease}
.work-still img{transition:transform 450ms cubic-bezier(.2,.65,.3,1)}
.work-still:focus-visible img{transform:scale(1.035)}
:is(a,button,input,textarea,select,video):focus-visible{outline:3px solid #2fbcb8;outline-offset:5px;box-shadow:0 0 0 2px var(--cream)}
.work-still:focus-visible{outline-offset:6px}
@media(hover:hover) and (pointer:fine){
  .header-inner nav a:hover:after{transform:scaleX(1)}
  .work-still:hover img{transform:scale(1.035)}
  :is(.button,.text-link,.project-link,.project-card-link,.header-link,.work-still):hover .arrow-icon{transform:translate(2px,-2px)}
  .text-link:hover,.project-link:hover,.project-card-link:hover{border-bottom-color:var(--mint2)}
}
:is(.button,.text-link,.project-link,.project-card-link,.header-link,.work-still):focus-visible .arrow-icon{transform:translate(2px,-2px)}
@media(max-width:600px){
  .about-grid{padding-top:28px}
  .project-grid{gap:24px;margin-top:24px}
  .portfolio-entry{padding-bottom:60px}
  .reel-caption{padding-top:18px}
  .reel-caption h2{font-size:28px;margin-bottom:13px}
}
@media(prefers-reduced-motion:reduce){
  .header-inner nav a:after,.work-still img,.button,.arrow-icon{transition:none!important}
  .work-still:hover img,.work-still:focus-visible img,.button:hover{transform:none}
  :is(.button,.text-link,.project-link,.project-card-link,.header-link,.work-still):is(:hover,:focus-visible) .arrow-icon{transform:none}
}

/* Playable documentary excerpt, with native YouTube controls. */
.spiral-preview{aspect-ratio:16/9;min-height:200px;margin-top:30px;background:var(--navy);border:1px solid #91b6b0}
.spiral-preview iframe{display:block;width:100%;height:100%;min-height:200px;border:0}
.spiral-preview-label{font-size:10px;font-weight:700;letter-spacing:.13em;color:#47646d;margin-top:12px}