/* ARTON FILM — charcoal, warm silver, and the original supplied artwork. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;padding:0!important;margin:-1px!important;border:0}
.brand-symbol{position:relative;display:block;width:88px;aspect-ratio:1.35;overflow:hidden;flex-shrink:0}
.brand-symbol img,.hero-logo>img{position:absolute;width:130%;max-width:none;height:auto;left:-15%;top:-40%;mix-blend-mode:screen}
.hero-heading{align-items:center;padding-top:17px;padding-bottom:35px;min-height:330px}
.hero-heading h1.hero-logo{position:relative;width:58%;max-width:530px;aspect-ratio:1.35;overflow:hidden;font-size:0;line-height:0;flex-shrink:0}
.hero-intro{width:30%;max-width:350px;padding-right:20px}
.hero-wordmark{display:block;font-family:var(--display);font-weight:600;font-size:31px;letter-spacing:1px;margin-bottom:25px}
@media screen{
  :root{color-scheme:dark;--paper:#151618;--ink:#e9e5dd;--muted:#aaa7a0;--line:#3b3d40;--orange:#c4ae8c}
  body{background:var(--paper)}
  ::selection{background:#b9a182;color:#141517}
  .header{border-color:var(--line)}
  .language button{color:#aaa7a0}.language span{color:#66696d}
  .hero-eyebrow{color:#b6b2aa}.hero-wordmark{color:#c7b7a0}
  .hero-intro p{color:#d6d1c9}
  .hero-film-title,.still-interlude>div{color:#f2eee5}
  .round-arrow:hover{background:#8d775a}
  .recognition a+a{border-color:var(--line)}.laurel{color:#c3b49d}
  .button.outline{border-color:#656466}.button.outline:hover{background:#2d2f32}
  .button.dark:hover{background:#c4ae8c;color:#151618}
  .work-section{background:#202225}.work-section .section-kicker{border-color:#484b4e}
  .print-button{border-color:#7e7c76}.filters button{border-color:#626366}
  .credits-head{color:#b6b3ab;border-color:#55575a}
  .credit-row{border-color:#414448}.credit-row:hover{background:#ffffff06}
  .credit-number{color:#a9a69f}.credit-sub,.filter-status{color:#b5b1a9}
  .portrait>img{filter:saturate(.65)}
  .record-type{border-color:#626365}
  .contact{background:#0b0c0e;color:var(--ink)}
  .contact .section-kicker,.contact-bottom{border-color:#37393c}
  .contact .section-kicker>span:last-child,.contact-bottom p{color:#b4b0a8}
  .contact h2 em{color:#c4ae8c}
  .contact-arrow{border-color:#626264}.contact-arrow:hover{background:#7f6b51}
  #copy-email{border-color:#686766}#copy-status{color:#d0bda2}
  dialog{border:1px solid #45474a}.dialog-top{background:#1b1d20}
  .dialog-poster{box-shadow:0 10px 25px #0007}
  .skip-link{background:#e9e5dd;color:#151618}
}
@media(max-width:1000px){.hero-heading{min-height:290px}.hero-heading h1.hero-logo{width:60%;max-width:480px}.hero-intro{width:31%;padding-right:0}.hero-wordmark{font-size:25px;letter-spacing:.5px}.brand-symbol{width:78px}}
@media(max-width:680px){
  .header{height:89px}.brand{gap:8px}.brand-symbol{width:66px}.brand>span:last-child{font-size:9px;letter-spacing:.6px}.brand small{font-size:7px;letter-spacing:0}.header-right{gap:13px}
  .mobile-nav{top:89px}
  .hero-heading{display:block;padding:16px 0 25px;min-height:0}
  .hero-heading h1.hero-logo{width:100%;max-width:450px;margin:0 auto;aspect-ratio:1.35}
  .hero-intro{width:100%;max-width:none;padding-top:15px;gap:14px}
  .hero-wordmark{display:none}
  .hero-intro p{font-size:10px}
}
@media(max-width:360px){.brand-symbol{width:56px}.brand>span:last-child{font-size:8px;letter-spacing:.4px}.brand small{font-size:6.5px}.brand{gap:5px}.header-right{gap:9px}}
@media print{.brand-symbol{display:none}.header .brand{font-size:12px}}

/* Keep each still intact in the gallery; center the selected hero frames. */
.hero-film>img{object-position:50% 50%}
.dialog-stills img{aspect-ratio:1920/1012;object-fit:contain;background:#000}
.dialog-stills figcaption{display:flex;justify-content:space-between;gap:12px}
.gallery-frame-label{color:var(--orange);letter-spacing:1px}

/* Filmmaking statement and the academic degree beneath the existing school. */
.education-details{display:grid;gap:7px;line-height:1.7;min-width:0}
.about-notes .education-degree{font-size:10px;color:var(--muted);letter-spacing:.1px}
.director-statement{display:grid;grid-template-columns:.7fr 1.3fr;gap:10%;border-top:1px solid var(--line);margin-top:64px;padding-top:37px}
.statement-heading h3{font-family:var(--display);font-size:clamp(35px,3.3vw,52px);line-height:.98;font-weight:600;letter-spacing:.3px;margin:20px 0 0}
.statement-copy{max-width:760px}
.statement-copy p{font-size:14px;line-height:2;color:var(--muted);word-break:keep-all;margin:0 0 22px}
.statement-copy p:last-child{margin-bottom:0}
@media(max-width:1000px){.director-statement{grid-template-columns:.65fr 1.35fr;gap:7%;margin-top:48px}.statement-copy p{font-size:13px}}
@media(max-width:680px){.director-statement{grid-template-columns:1fr;gap:26px;margin-top:36px;padding-top:28px}.statement-heading .tiny-label{font-size:8px}.statement-heading h3{font-size:38px;margin-top:15px}.statement-copy p{font-size:12px;line-height:1.95;margin-bottom:20px}.about-notes .education-degree{font-size:9px}}
@media print{.director-statement{margin-top:24px;padding-top:20px;gap:30px;break-inside:avoid}.statement-heading h3{font-size:28px}.statement-copy p{font-size:10px;line-height:1.8}}

/* Mudskipper: original poster and all ten supplied stills. */
.mudskipper-facts{margin:28px 0 0;display:grid;gap:17px}
.mudskipper-facts>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:baseline}
.mudskipper-facts dt{font-size:9px;letter-spacing:1px;color:var(--muted)}
.mudskipper-facts dd{font-size:13px;line-height:1.7;margin:0}
.dialog-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.dialog-section-heading h3{font-family:var(--display);font-weight:600;font-size:34px;line-height:1;margin:0}
.dialog-section-heading>span{font-size:9px;letter-spacing:1px;color:var(--muted)}
.mudskipper-stills img{aspect-ratio:auto;height:auto;object-fit:contain}
@media(max-width:680px){.mudskipper-intro{grid-template-columns:1fr;gap:27px}.mudskipper-intro .dialog-poster{width:min(240px,75%);margin-inline:auto}.mudskipper-intro h2{font-size:38px;margin-top:20px}.mudskipper-facts{margin-top:22px;gap:12px}.mudskipper-facts dt{font-size:8px}.mudskipper-facts dd{font-size:11px}.dialog-section-heading{margin-bottom:20px;padding-bottom:14px}.dialog-section-heading h3{font-size:29px}.dialog-section-heading>span{font-size:8px}}

/* Film files share a quiet editorial layout; each supplied image stays intact. */
.portfolio-intro{align-items:start;margin-bottom:35px}
.portfolio-intro h2{font-size:clamp(31px,4vw,52px);line-height:1.25;letter-spacing:-1.5px;overflow-wrap:anywhere;word-break:keep-all}
.film-poster{margin:0;min-width:0}
.film-poster img{height:auto;display:block}
.film-poster figcaption{margin-top:12px;color:var(--muted);font-size:8px;letter-spacing:1px}
.poster-none{aspect-ratio:2/3;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;color:var(--muted);background:#ffffff02}
.poster-none>span{font-size:9px;letter-spacing:1.5px}
.poster-none strong{font-family:var(--display);font-size:38px;font-weight:400;letter-spacing:1px;color:var(--ink)}
.film-synopsis{border-top:1px solid var(--line);padding:26px 0 31px;margin-bottom:10px}
.film-synopsis h3{font-size:9px;font-weight:500;margin:0 0 16px;letter-spacing:1.5px}
.film-synopsis p{max-width:760px;font-size:14px;line-height:2;color:var(--ink);word-break:keep-all;margin:0}
.portfolio-stills{align-items:start}
.portfolio-stills img{aspect-ratio:auto;height:auto;object-fit:contain;display:block}
.portfolio-stills figcaption{line-height:1.7}
.portfolio-film .dialog-credit{line-height:1.9}
.film-sources{border-top:1px solid var(--line);margin-top:24px;padding-top:22px;display:grid;gap:15px;color:var(--muted)}
.film-sources>.tiny-label{font-size:8px;letter-spacing:1px}
.film-sources>div{display:flex;flex-wrap:wrap;gap:12px 25px}
.film-sources a{font-size:10px;line-height:1.7;text-decoration:underline;text-underline-offset:5px}
.film-sources a:hover{color:var(--ink)}
@media(max-width:680px){.portfolio-intro{grid-template-columns:1fr;gap:28px}.portfolio-intro h2{font-size:34px;letter-spacing:-1px;margin-top:20px}.portfolio-intro .film-poster{width:min(240px,75%);margin-inline:auto}.portfolio-intro .mudskipper-facts{margin-top:22px}.film-synopsis{padding:22px 0 28px;margin-bottom:4px}.film-synopsis p{font-size:12px;line-height:1.95}.film-synopsis h3{font-size:8px}.film-sources{padding-top:20px}.film-sources a{font-size:9px}}

/* Localized hero title and filmography heading. */
html[lang=ko] .hero-film-title{--hero-ko-size:clamp(40px,7vw,108px)}
html[lang=ko] .hero-film-title .hero-film-name{font-size:var(--hero-ko-size);line-height:1.08;letter-spacing:-.045em;white-space:nowrap}
.work-section .section-heading h2{font-size:clamp(36px,7vw,92px)}
@media(min-width:681px){html[lang=ko] .hero-film-title .round-arrow{left:calc(var(--hero-ko-size)*4 + 24px)}}


/* Begin with the filmmaker, followed by the selected directing frames. */
.about-first{padding-top:38px;padding-bottom:70px}
.about-first .about-layout{padding-top:34px}
.about-links{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px}
.about-links .text-link{min-height:36px}
.selected-film{padding-top:0}
@media(max-width:1000px){.about-first{padding-top:32px;padding-bottom:56px}.about-first .about-layout{padding-top:30px}.about-links{gap:16px 24px}}
@media(max-width:680px){.about-first{padding-top:26px;padding-bottom:44px}.about-first .about-layout{padding-top:24px;gap:34px}.about-first .about-copy{grid-row:1}.about-first .portrait{grid-row:2}.about-links{gap:15px 23px}.about-links .text-link{font-size:10px;min-height:40px}.selected-film{padding-top:0}}
@media print{.about-links{display:none}}

/* Include the pale JPEG fringe so no white hairline survives display scaling. */
#fluorescent-light-dialog .film-poster .dialog-poster{clip-path:inset(.5% .4% 0 .8%)}

/* Festival records sit between the synopsis and stills, with named award recipients. */
.film-festivals{padding:20px 0 34px}
.film-festivals h3{font-size:9px;font-weight:500;letter-spacing:1.5px;margin:0 0 20px}
.film-festivals ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.film-festivals li{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:18px;align-items:start;padding:19px 0;border-bottom:1px solid var(--line)}
.festival-year{font-family:monospace;font-size:11px;color:var(--muted);line-height:1.7}
.festival-info a{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.festival-info a:hover{text-decoration:underline;text-underline-offset:4px}
.festival-info a span{font-size:12px;color:var(--orange)}
.festival-info p{font-size:11px;line-height:1.8;color:var(--muted);margin:5px 0 0;word-break:keep-all}
.festival-type{font-size:8px;letter-spacing:.8px;line-height:1.7;padding:4px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.festival-award{color:var(--orange);border-color:#74634c}
@media(max-width:680px){.film-festivals{padding-top:12px;padding-bottom:28px}.film-festivals li{grid-template-columns:38px minmax(0,1fr);gap:8px 12px;padding:16px 0}.festival-info a{font-size:12px}.festival-info p{font-size:10px}.festival-type{grid-column:2;justify-self:start}.festival-year{font-size:10px}}
