/* Public portfolio - film-led layout. Private tools keep their own styles. */
.public-page{--paper:#f4f6f5;--ink:#202927;--muted:#535e60;--line:#b9c4c6;--gutter:clamp(24px,4vw,72px);background:var(--paper);color:var(--ink)}
.public-page .header{grid-template-columns:1fr auto;min-height:96px;padding-block:24px}
.public-page .brand{width:88px}
.public-page .desktop-nav{justify-content:flex-end;gap:clamp(24px,3.5vw,64px)}
.public-page .desktop-nav a{font-size:.875rem;letter-spacing:.025em;min-height:44px;display:flex;align-items:center}
.public-page .menu-toggle{min-height:44px;font-size:.875rem}
.public-page .header-overlay{background:linear-gradient(#10191899,transparent)}
.public-page .footer{background:linear-gradient(180deg,#e4ecee,#cbdde3);border-color:#a7b7bb;padding-block:48px;gap:40px;font-size:.875rem;line-height:1.65}
.public-page .footer h2{font-size:.75rem;color:#475557;letter-spacing:.06em;font-weight:600}
.public-page .footer a{width:fit-content}
.public-page .footer a:not(.footer-brand>a){padding-block:5px}
.public-page .footer-brand p,.public-page .footer-note>span{font-size:.8125rem;color:#475557}
.public-page .footer-brand>a{width:88px}
.public-page .eyebrow,.public-page .back-link{font-size:.875rem}
.public-page .page-heading>p{font-size:.8125rem}
.public-page .about-image figcaption,.public-page .project-heading>div,.public-page .project-description>a{font-size:.875rem}
.public-page .page-heading h1,.public-page .project-heading h1,.public-page .about-intro h2,.public-page .contact-email{overflow-wrap:break-word;word-break:normal;letter-spacing:-.035em}

/* The image stays open; the film title anchors the lower third. */
.hero-cinema{height:100svh;min-height:700px;background:#101918}
.hero-cinema:after{background:linear-gradient(180deg,#10191840 0%,#10191805 35%,#10191838 50%,#080e10eb 100%)}
.hero-cinema .hero-image{transform:none;transition:opacity .7s ease}
.hero-cinema .hero-note{top:140px;bottom:auto;left:var(--gutter);font-size:.875rem;letter-spacing:.025em;color:#fff}
.hero-cinema .hero-bottom{bottom:126px;grid-template-columns:minmax(0,1fr) auto;gap:24px 60px;align-items:end}
.hero-cinema .hero-caption{grid-column:1;grid-row:1;gap:18px;max-width:1000px}
.hero-cinema .hero-caption>span{font-size:1rem;opacity:1;letter-spacing:.03em}
.hero-cinema .hero-caption>a{font-family:var(--font-display);font-weight:600;font-synthesis:none;font-size:clamp(36px,4.6vw,76px);line-height:1.17;letter-spacing:-.045em;max-width:1050px;text-wrap:balance;overflow-wrap:break-word}
.hero-cinema .hero-caption>a:hover{text-decoration:none;opacity:.85}
.hero-cinema .hero-category{display:flex;align-items:center;gap:14px;grid-column:1;grid-row:2;font-size:.875rem;line-height:1.6}
.hero-cinema .hero-category>span:first-child{font-size:.75rem;opacity:1;color:#d1dcdf;letter-spacing:.06em}
.hero-cinema .watch-film{grid-column:2;grid-row:1;align-self:end;justify-self:end}
.hero-cinema .slide-controls{grid-column:2;grid-row:2;justify-content:flex-end;align-items:center}
.hero-cinema .slide-controls button{width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;margin-left:5px;font-size:20px}
.hero-cinema .slide-controls [data-pause]{font-size:15px}
.hero-cinema .slide-count{font-size:.8125rem;opacity:1;margin-right:12px}
.hero-cinema .slide-indicators{bottom:24px;gap:24px}
.hero-cinema .slide-indicators button{height:auto;min-height:54px;padding:8px 0;text-align:left;min-width:0;flex:1;color:#d1dcdf}
.hero-cinema .slide-indicators span{height:auto;background:none}
.hero-cinema .slide-indicators .indicator-track{height:1px;background:#ffffff55;margin-bottom:13px}
.hero-cinema .slide-indicators .indicator-caption{display:flex;align-items:baseline;gap:14px;font-size:.875rem;line-height:1.3}
.hero-cinema .indicator-caption b{font-size:.75rem;font-weight:400;font-variant-numeric:tabular-nums}
.hero-cinema .slide-indicators button[aria-pressed=true],.hero-cinema .slide-indicators button:hover{color:#fff}
.hero-cinema .slide-indicators button[aria-pressed=true] .indicator-track{background:#fff;box-shadow:0 -1px #fff}
.hero-cinema .slide-indicators button:hover .indicator-track{background:#fff}
.public-page .all-work{padding-block:64px;gap:40px}
.public-page .all-work>a{display:flex;align-items:center;gap:32px;font-weight:500;font-size:clamp(24px,2.6vw,42px);letter-spacing:-.04em}
.public-page .all-work>a span{margin-left:0}
.public-page .all-work>a:hover span{transform:none}
.public-page .all-work>a:hover>span:last-child{transform:translateX(6px)}
.public-page .all-work>span{font-size:.875rem;line-height:1.6;max-width:210px}

/* One consistent play control; external-link arrows are not used for playback. */
.public-page .watch-film{border:0;border-radius:0;background:transparent;backdrop-filter:none;padding:0;gap:16px;min-height:64px;font-size:1rem;transition:opacity .2s}
.public-page .watch-film:hover{background:transparent;color:inherit;transform:none;opacity:.85}
.public-page .watch-film:after,.public-page .play-circle:before,.public-page .play-circle:after,.public-page .poster-play:before,.public-page .poster-play:after{content:none}
.public-page .play-circle{width:64px;height:64px;border:1px solid #ffffffad;flex-shrink:0;font-size:15px;background:#10191840;backdrop-filter:blur(5px)}
.public-page .watch-film:hover .play-circle{background:white;color:#17201f;border-color:white}
.public-page .project-poster .poster-play{padding:16px 24px;gap:16px;border:1px solid #ffffff70;background:#111b;border-radius:0;box-shadow:none;font-size:1rem}
.public-page .project-poster .poster-play>span:first-child{width:44px;height:44px;font-size:13px;border-color:#ffffffad}
.public-page .project-poster .poster-play>span:first-child:after{content:none}
.public-page .project-poster:hover .poster-play{transform:translate(-50%,-50%);background:#111e}
.public-page .project-poster img{object-fit:contain;background:#0d1112}
.public-page .project-poster:hover img{transform:none;opacity:.9}

/* A wide cinema screen, not a logo-shaped crop. */
.work-cinema.work-directory{padding-top:24px;padding-bottom:88px;min-height:calc(100svh - 96px)}
.work-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px 38px}
.work-heading h1{font-family:var(--font-display);font-size:clamp(32px,3.4vw,52px);font-weight:600;line-height:1.25;letter-spacing:-.04em;margin:0;display:flex;align-items:flex-start;gap:16px}
.work-total{font-family:Arial,Helvetica,sans-serif;font-size:.8125rem;font-weight:400;letter-spacing:0;padding-top:5px;color:var(--muted);font-variant-numeric:tabular-nums}
.work-heading-note{font-size:.875rem;color:var(--muted)}
.work-cinema.work-directory .work-layout{display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,3.1fr);gap:clamp(28px,3.5vw,64px);align-items:start}
.work-cinema.work-directory .filters{gap:8px 16px;padding:0 0 14px;border-color:var(--line);min-height:58px}
.work-cinema.work-directory .filters button{font-size:.875rem;letter-spacing:0;text-transform:none;min-height:44px;color:var(--muted)}
.work-cinema.work-directory .filters button[aria-pressed=true]{color:var(--ink);font-weight:400;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.work-cinema.work-directory .work-list{padding-top:0}
.work-cinema .work-item{border-bottom:1px solid var(--line)}
.work-cinema.work-directory .work-row{width:100%;text-align:left;padding:23px 12px 23px 0;color:#535e60;gap:12px;align-items:start;transition:color .2s,background .2s}
.work-cinema.work-directory .work-row strong{font-family:var(--font-display);font-size:clamp(17px,1.3vw,22px);font-weight:500;line-height:1.45;text-transform:none;letter-spacing:-.025em;overflow-wrap:break-word}
.work-cinema.work-directory .work-name{font-size:.875rem;margin-top:8px;line-height:1.4}
.work-cinema.work-directory .work-row:hover,.work-cinema.work-directory .work-row.is-selected{color:var(--ink);background:#dce7e84d}
.work-cinema.work-directory .work-arrow{font-size:11px;color:var(--red);margin-top:8px}
.work-cinema.work-directory .work-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;color:var(--ink)}
.work-cinema.work-directory .work-preview{display:block;position:sticky;top:28px;margin:0;min-width:0}
.work-cinema .preview-film{position:relative;display:block;width:100%;padding:0;background:#0d1112;overflow:hidden;aspect-ratio:16/9}
.work-cinema.work-directory .work-preview img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;-webkit-mask:none;mask:none;transition:opacity .3s}
.work-cinema .preview-film:hover img{opacity:.88}
.work-cinema .preview-play{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:14px;color:white;font-size:1rem;background:#0c141ae6;padding:10px 20px 10px 10px}
.work-cinema .preview-play .play-circle{width:48px;height:48px;font-size:12px;background:none;backdrop-filter:none}
.work-cinema.work-directory .work-preview figcaption{margin-top:24px;align-items:flex-end;gap:24px}
.work-cinema.work-directory .work-preview figcaption>div{gap:8px;min-width:0}
.work-cinema #preview-client{font-size:.875rem;color:var(--muted)}
.work-cinema #preview-title{font-family:var(--font-display);font-size:clamp(20px,1.9vw,30px);line-height:1.4;color:var(--ink);font-weight:500;letter-spacing:-.025em;overflow-wrap:break-word}
.work-cinema.work-directory .preview-open{font-size:.875rem;min-height:44px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.mobile-work-detail{display:none}
.work-empty{font-size:1rem;color:var(--muted);padding-top:24px}

/* The player can use most of a desktop screen without cropping on short screens. */
.public-page .film-dialog{width:min(1680px,96vw);max-height:96dvh;padding:20px 24px;overflow:auto}
.public-page .film-toolbar{margin-bottom:12px}
.public-page .film-toolbar h2{font-size:1rem}
.public-page .film-toolbar button{min-height:44px;font-size:.875rem}
.public-page #film-player{width:min(100%,calc((100dvh - 164px) * 16 / 9));max-height:none;aspect-ratio:16/9;margin-inline:auto}
.public-page .youtube-fallback{font-size:.875rem;min-height:44px;display:inline-flex;align-items:center;margin-top:8px}

@media(min-width:1800px){.hero-cinema .hero-caption>a{font-size:76px;max-width:1150px}}
@media(max-width:1100px){
  .hero-cinema .hero-bottom{gap:24px 36px}
  .hero-cinema .hero-caption>a{font-size:clamp(34px,5vw,56px)}
  .hero-cinema .indicator-caption{gap:8px!important}
  .hero-cinema .indicator-label{font-size:.75rem}
  .work-cinema.work-directory .work-layout{grid-template-columns:minmax(220px,1fr) minmax(0,2.5fr);gap:28px}
  .work-cinema.work-directory .work-preview figcaption{flex-wrap:wrap;gap:10px}
}
@media(max-width:850px){
  .work-cinema.work-directory .work-layout{display:block}
  .work-cinema.work-directory .work-preview{display:none}
  .work-cinema.work-directory .work-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding-top:24px}
  .work-cinema .work-item{padding-bottom:16px}
  .work-cinema.work-directory .work-row{padding:0;color:var(--ink);background:none;gap:14px;align-items:center}
  .work-cinema.work-directory .work-row strong{font-size:18px}
  .work-cinema.work-directory .mobile-work-image{display:block;grid-row:1;grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0d1112;margin:0}
  .work-cinema.work-directory .work-arrow{opacity:1;grid-row:1;grid-column:1/-1;z-index:1;justify-self:center;align-self:center;margin:0;display:grid;place-items:center;width:52px;height:52px;background:#0c141adb;border:1px solid #ffffff80;border-radius:50%;color:white;font-size:14px}
  .work-cinema .work-label{grid-row:2;grid-column:1/-1}
  .mobile-work-detail{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;margin-top:8px;color:var(--muted)}
  .mobile-work-detail:hover{text-decoration:underline}
}
@media(max-width:700px){
  .public-page{--gutter:24px}
  .public-page .header{padding-block:16px;min-height:80px}
  .public-page .brand{width:80px}
  .public-page .desktop-nav{display:none}
  .public-page .menu-toggle{display:flex}
  .hero-cinema{height:100svh;min-height:650px}
  .hero-cinema .hero-note{top:112px;left:var(--gutter);font-size:.8125rem}
  .hero-cinema .hero-bottom{bottom:108px;gap:24px 8px;grid-template-columns:1fr auto}
  .hero-cinema .hero-caption{grid-column:1/-1;grid-row:1;gap:14px}
  .hero-cinema .hero-caption>a{font-size:clamp(30px,7.9vw,48px);max-width:100%;line-height:1.23;letter-spacing:-.04em}
  .hero-cinema .hero-caption>span{font-size:.875rem}
  .hero-cinema .hero-category{display:none}
  .hero-cinema .watch-film{grid-column:1;grid-row:2;justify-self:start;min-height:48px;gap:12px;font-size:.875rem}
  .hero-cinema .watch-film .play-circle{width:48px;height:48px;font-size:12px}
  .hero-cinema .slide-controls{grid-column:2;grid-row:2;gap:4px}
  .hero-cinema .slide-controls button{width:44px;height:44px;margin:0}
  .hero-cinema .slide-count{display:none}
  .hero-cinema .slide-indicators{bottom:20px;gap:12px}
  .hero-cinema .slide-indicators button{min-height:48px}
  .hero-cinema .slide-indicators .indicator-label{display:none}
  .hero-cinema .slide-indicators .indicator-caption{font-size:.75rem}
  .public-page .all-work{padding-block:40px;display:block}
  .public-page .all-work>a{font-size:24px;gap:20px;line-height:1.4}
  .public-page .all-work>span{max-width:none;margin-top:16px}
  .public-page .footer{gap:30px 20px;padding-block:36px}
  .public-page .footer-note{display:block}
  .public-page .footer-note p{display:block}
  .public-page .footer-note>span{margin-top:14px}
  .work-cinema.work-directory{padding-top:12px;padding-bottom:48px}
  .work-heading{padding-block:12px 24px;align-items:baseline}
  .work-heading h1{font-size:32px}
  .work-heading-note{display:none}
  .work-cinema.work-directory .work-list{grid-template-columns:1fr;gap:28px}
  .work-cinema.work-directory .work-row strong{font-size:21px}
  .public-page .project-heading{flex-direction:column;align-items:flex-start;gap:20px}
  .public-page .project-heading h1{font-size:clamp(28px,7.5vw,42px);line-height:1.3}
  .public-page .project-heading>div{white-space:normal}
  .public-page .project-description{flex-direction:column;gap:20px;padding-bottom:40px}
  .public-page .project-poster .poster-play{gap:10px;padding:10px 14px;font-size:.875rem;white-space:nowrap}
  .public-page .film-dialog{width:100vw;max-height:100dvh;padding:12px 16px}
  .public-page .film-toolbar h2{font-size:.875rem}
  .public-page #film-player{width:min(100%,calc((100dvh - 148px) * 16 / 9))}
}
@media(prefers-reduced-motion:reduce){.public-page *,.public-page *:before,.public-page *:after{transition:none!important;animation:none!important}}