:root { --tm-marquee-h: 42px; }
.top-marquee { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: var(--tm-marquee-h); overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--amber); color: var(--ink); }
.top-marquee div { width: max-content; height: 100%; display: flex; align-items: center; animation: tmTopMarquee 25s linear infinite; }
.top-marquee span { white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
@keyframes tmTopMarquee { to { transform: translateX(-50%); } }
.site-header { top: var(--tm-marquee-h); grid-template-columns: 245px 1fr 245px; padding-top: 20px; padding-bottom: 20px; }
.header-logo { width: 214px; overflow: hidden; border: 3px solid var(--paper); box-shadow: 7px 7px 0 #10161565; transform: rotate(-1deg); animation: tmLogoWobble 2.6s steps(2,end) infinite; }
.header-logo img { width: 100%; height: auto; }
.site-loader img { width: min(520px,78vw); border: 8px solid var(--paper); animation: tmLogoWobble 1.6s steps(2,end) infinite; }
@keyframes tmLogoWobble { 0%,100% { transform: rotate(-.45deg); } 50% { transform: rotate(.45deg) translateY(-2px); } }
.instagram-header { width: 34px; height: 34px; display: grid; place-content: center; border: 1px solid #ffffff65; border-radius: 50%; }
.instagram-header svg, .footer-instagram svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.instagram-header svg circle:last-child, .footer-instagram svg circle:last-child { fill: currentColor; stroke: none; }
.mobile-menu-shell { position: fixed; z-index: 80; inset: 0; pointer-events: none; visibility: hidden; transition: visibility .4s; }
.mobile-menu-shell.is-open { pointer-events: auto; visibility: visible; }
.mobile-menu-backdrop { position: absolute; inset: 0; border: 0; background: #0017199e; opacity: 0; transition: opacity .35s; }
.mobile-menu-shell.is-open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu { position: absolute; z-index: 2; top: 56px; right: 14px; bottom: 14px; left: auto; width: min(360px,calc(100vw - 28px)); height: auto; display: flex; flex-direction: column; overflow: auto; padding: 18px 22px 20px; border: 1px solid var(--ink); background: var(--coral); color: var(--ink); box-shadow: -16px 16px 0 #f5b51b75; transform: translateX(calc(100% + 38px)); transition: transform .42s cubic-bezier(.72,0,.22,1); }
.mobile-menu-shell.is-open .mobile-menu { transform: none; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #10161555; text-transform: uppercase; letter-spacing: .15em; font-size: 8px; }
.mobile-menu__close { margin: 0; padding: 7px 0 7px 12px; font-size: 9px; }
.mobile-menu nav { height: auto; flex: 1; padding: 12px 0; }
.mobile-menu a { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 12px 0; font-size: inherit; }
.mobile-menu a b { font-family: Georgia,'Times New Roman',serif; font-size: clamp(24px,7vw,34px); font-weight: 400; font-style: italic; line-height: 1; }
.mobile-menu__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #10161555; text-transform: uppercase; letter-spacing: .12em; font-size: 8px; }
.language-switch--mobile button { color: #10161580; }
.language-switch--mobile button.is-current { color: var(--ink); font-weight: 700; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { background: linear-gradient(90deg,#001a1dec 0%,#001a1d8c 42%,#001a1d38 74%,#001a1db0 100%),linear-gradient(0deg,#001a1dbb,transparent 52%); }
.hero-content { padding-top: 180px; }
.hero-content h1 { max-width: 1080px; font-size: clamp(58px,8.2vw,132px); line-height: .84; }
.score-section { display: grid; grid-template-columns: 1.05fr .95fr; gap: 7vw; align-items: center; background: var(--coral); color: var(--ink); }
.score-copy h2, .portrait-copy h2 { margin: 30px 0 36px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(54px,7.8vw,126px); font-weight: 400; font-style: italic; line-height: .87; letter-spacing: -.055em; }
.score-copy h2 span:last-child, .portrait-copy h2 span:last-child { color: var(--paper); }
.score-body { max-width: 620px; margin: 0; font-family: Georgia,serif; font-size: clamp(18px,1.55vw,24px); line-height: 1.55; }
.score-credits { margin: 38px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.score-credits span { padding: 9px 12px; border: 1px solid #10161585; border-radius: 99px; text-transform: uppercase; letter-spacing: .11em; font-size: 8px; }
.editorial-link { display: inline-flex; align-items: center; gap: 28px; padding-bottom: 8px; border-bottom: 2px solid; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.score-poster { position: relative; isolation: isolate; min-height: min(680px,70vw); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(30px,5vw,75px); border: 1px solid var(--ink); background: var(--amber); box-shadow: 18px 18px 0 var(--petrol-deep); color: var(--ink); transform: rotate(1.2deg); }
.score-poster__top { position: absolute; top: 22px; left: 24px; right: 24px; padding-bottom: 12px; border-bottom: 1px solid; text-transform: uppercase; letter-spacing: .18em; font-size: 8px; }
.score-poster strong { position: relative; z-index: 2; font-size: clamp(52px,7vw,118px); line-height: .77; letter-spacing: -.08em; }
.score-poster small { position: relative; z-index: 2; max-width: 300px; margin-top: 34px; line-height: 1.65; letter-spacing: .13em; font-size: 8px; }
.score-poster > i { position: absolute; right: 8%; bottom: 6%; color: var(--coral); font-family: Georgia,serif; font-size: clamp(80px,12vw,180px); font-style: normal; transform: rotate(12deg); }
.score-poster__ring { position: absolute; z-index: 1; border: clamp(10px,1.4vw,24px) solid var(--coral); border-radius: 50%; }
.score-poster__ring--one { width: 52%; aspect-ratio: 1; top: 16%; right: -14%; }
.score-poster__ring--two { width: 36%; aspect-ratio: 1; left: -12%; bottom: 9%; border-color: var(--paper); }
.portrait-section { position: relative; min-height: 140vh; display: grid; grid-template-columns: .84fr 1.16fr; gap: 7vw; align-items: start; overflow: clip; background: #e35ddb; color: var(--ink); }
.portrait-copy { position: sticky; top: 130px; padding-top: 6vh; }
.portrait-copy h2 { font-size: clamp(52px,6.8vw,104px); }
.portrait-copy > p:last-of-type { max-width: 520px; font-family: Georgia,serif; font-size: 18px; line-height: 1.6; }
.scroll-meter { width: min(340px,100%); height: 4px; margin-top: 42px; overflow: hidden; border: 1px solid; }
.scroll-meter i { display: block; width: 0; height: 100%; background: var(--amber); }
.portrait-stage { position: sticky; top: 95px; align-self: start; aspect-ratio: 1; margin-top: 4vh; overflow: hidden; border: 2px solid; background: var(--paper); box-shadow: 24px 24px 0 var(--ink); transform-origin: 50% 70%; }
.portrait-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s steps(3,end),transform .7s; }
.portrait-face--expression { opacity: 0; transform: scale(.96) rotate(-2deg); }
.portrait-stage.is-expressive .portrait-face--neutral { opacity: 0; transform: scale(1.04) rotate(2deg); }
.portrait-stage.is-expressive .portrait-face--expression { opacity: 1; transform: scale(1); }
.hand-note { position: absolute; z-index: 5; color: var(--coral); font-family: Georgia,serif; font-weight: 700; line-height: 1; opacity: 0; filter: drop-shadow(3px 3px 0 var(--paper)); }
.hand-note--one { top: 8%; left: 4%; font-size: clamp(72px,9vw,150px); }
.hand-note--two { top: 14%; right: 5%; color: var(--petrol); font-size: clamp(58px,7vw,118px); }
.hand-note--three { right: 10%; bottom: 11%; font-size: clamp(74px,9vw,160px); }
.portrait-stage.is-expressive .hand-note { opacity: 1; animation: tmNotePop .45s cubic-bezier(.2,1.7,.3,1) both; }
.hand-stroke { position: absolute; z-index: 4; right: -3%; top: 54%; width: 38%; height: 11%; border-top: 15px solid var(--amber); border-radius: 50%; transform: rotate(-18deg); opacity: 0; }
.portrait-stage.is-expressive .hand-stroke { opacity: 1; }
@keyframes tmNotePop { from { opacity: 0; transform: translateY(28px) rotate(-22deg) scale(.2); } }
.portrait-readout { position: absolute; right: 20px; top: 50%; writing-mode: vertical-rl; letter-spacing: .18em; font-size: 8px; }
.works-v6__grid { grid-template-columns: 1.15fr .85fr; }
.works-v6 .film-card:nth-child(2) { margin-top: 0; }
.works-links { display: grid; grid-template-rows: repeat(3,1fr); border-top: 1px solid; }
.works-links a { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 26px 50px 26px 4px; border-bottom: 1px solid; }
.works-links a span { margin-bottom: 14px; text-transform: uppercase; letter-spacing: .17em; font-size: 8px; }
.works-links a strong { font-family: Georgia,serif; font-size: clamp(26px,3vw,48px); font-weight: 400; font-style: italic; line-height: .95; }
.works-links a p { margin: 9px 0 0; font-size: 12px; }
.works-links a b { position: absolute; right: 16px; top: 50%; font-size: 20px; font-weight: 400; }
.site-footer > img { border: 8px solid var(--paper); mix-blend-mode: multiply; }
.footer-instagram { display: inline-flex; align-items: center; gap: 8px; }
.film-card { position: relative; }
body.admin-bar .site-header { top: calc(var(--tm-marquee-h) + 32px); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .score-section { grid-template-columns: 1fr 1fr; gap: 5vw; }
  .score-poster { min-height: 590px; }
  .portrait-section { grid-template-columns: .9fr 1.1fr; }
  .works-v6__grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  :root { --tm-marquee-h: 36px; }
  .top-marquee span { font-size: 10px; }
  .site-header { padding: 12px 14px; }
  .header-logo { width: 144px; border-width: 2px; box-shadow: 4px 4px 0 #10161565; }
  .header-logo img { width: 100%; height: auto; }
  .instagram-header { width: 38px; height: 38px; }
  .header-actions { gap: 9px; }
  .header-actions > .language-switch:not(.language-switch--mobile) { display: none; }
  .mobile-menu { top: 48px; right: 10px; bottom: 10px; width: min(340px,calc(100vw - 20px)); padding: 16px 18px; box-shadow: -8px 8px 0 #f5b51b75; }
  .mobile-menu a { padding: 10px 0; }
  .mobile-menu a b { font-size: clamp(23px,7.4vw,30px); }
  .hero-video { object-position: 59% center; }
  .hero-content { padding-top: 140px; }
  .score-section { grid-template-columns: 1fr; }
  .score-copy h2, .portrait-copy h2 { font-size: clamp(48px,14vw,72px); }
  .score-poster { min-height: 510px; margin-top: 34px; box-shadow: 9px 9px 0 var(--petrol-deep); }
  .score-poster strong { font-size: clamp(58px,17vw,88px); }
  .portrait-section { min-height: auto; display: flex; flex-direction: column; gap: 42px; overflow: hidden; }
  .portrait-copy, .portrait-stage { position: relative; top: auto; }
  .portrait-copy { padding-top: 0; }
  .portrait-stage { width: calc(100% - 12px); margin: 0 0 12px; box-shadow: 12px 12px 0 var(--ink); }
  .portrait-readout { display: none; }
  .works-links a { min-height: 160px; }
  .site-footer > img { border-width: 4px; }
  body.admin-bar .site-header { top: calc(var(--tm-marquee-h) + 46px); }
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }