:root {
  --paper: #F5F2EA;
  --ink: #171717;
  --muted: #74746F;
  --line: #D8D5CD;
  --sea: #427068;
  --sun: #D44A1C;
  --forest: #5A7848;
  --white: #fffdf8;
  --sans: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --jp-serif: "Source Han Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --shell: min(1360px, calc(100vw - clamp(52px, 10vw, 164px)));
  --text-width: 760px;
  --section-space: clamp(124px, 11vw, 184px);
  --ease: cubic-bezier(.2,.68,.24,1);
  --ease-slow: cubic-bezier(.18,.67,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ja"] body { font-family: var(--jp-serif); line-height: 1.88; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.ui, .site-header, .chapter-label, .meta, .eyebrow, .film-year, .credential h3,
.language-menu, .text-link, .footer-links, .hero-kicker, .hero-subline, .play-label {
  font-family: var(--sans);
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  transform: translateY(-160%); background: var(--paper); color: var(--ink);
  padding: 10px 14px; border: 1px solid var(--ink);
}
.skip-link:focus { transform: none; }
.page-shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-space); }

/* Header */
.site-header {
  --header-progress: 0;
  position: fixed; inset: 0 0 auto 0; z-index: 120; height: 76px;
  display: flex; align-items: center;
  padding-inline: max(26px, calc((100vw - var(--shell))/2));
  color: var(--white); border-bottom: 1px solid rgba(216,213,205,0);
  background: rgba(245,242,234, calc(.96 * var(--header-progress)));
  -webkit-backdrop-filter: blur(calc(10px * var(--header-progress)));
  backdrop-filter: blur(calc(10px * var(--header-progress)));
  transition: color .18s ease, border-color .12s linear;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-bottom: 1px solid rgba(216,213,205, calc(.80 * var(--header-progress)));
}
.site-header.has-dark-text { color: var(--ink); }
.brand-link { position: relative; display: block; width: clamp(148px, 13vw, 190px); height: 28px; flex: 0 0 auto; }
.brand-link img { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand-white { opacity: calc(1 - var(--header-progress)); }
.brand-black { opacity: var(--header-progress); }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.main-nav > a, .menu-toggle, .language-menu summary {
  font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .105em; text-transform: uppercase;
}
.main-nav > a { position: relative; }
.main-nav > a::after {
  content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.main-nav > a:hover::after, .main-nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.language-menu { position: relative; }
.language-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-globe { width: 15px; height: 15px; display: inline-flex; flex: 0 0 auto; }
.language-globe svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.language-chevron { font-size: 12px; line-height: 1; transform: translateY(-1px); opacity: .78; }
.language-list {
  position: absolute; right: 0; top: 26px; min-width: 118px; padding: 12px 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
}
.language-list a { display: block; padding: 9px 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.language-list a:hover { background: rgba(66,112,104,.08); }
.menu-toggle { display: none; margin-left: auto; border: 0; background: transparent; padding: 8px 0; cursor: pointer; }

/* Hero */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: #111; color: var(--white); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 47%; }
.hero::before {
  content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 30vh;
  background: linear-gradient(to bottom, rgba(0,0,0,.58), rgba(0,0,0,.18) 52%, rgba(0,0,0,0));
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; z-index: 2; inset: 34% 0 0;
  background: linear-gradient(to top, rgba(0,0,0,.46), rgba(0,0,0,.04) 68%, transparent);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 3; min-height: 100svh; width: var(--shell); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding-bottom: clamp(58px, 7vh, 94px);
}
.hero-kicker {
  margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.hero-logo { width: min(760px, 58vw); margin-bottom: 22px; }
.hero-logo img { width: 100%; height: auto; }
.hero-subline { margin: 0; font-size: clamp(15px, 1.4vw, 19px); font-weight: 500; letter-spacing: .03em; }
.scroll-cue {
  position: absolute; z-index: 4; right: max(26px, calc((100vw - var(--shell))/2)); bottom: 28px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72; writing-mode: vertical-rl;
}

/* Opening film */
.visual-field { position: relative; background: #0b0b0b; overflow: hidden; }
.opening-video-wrap {
  position: relative; width: 100%; height: clamp(520px, 45vw, 820px); min-height: 580px; overflow: hidden; background: #101010;
}
.opening-video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center; background: #101010;
}
.opening-video-control {
  position: absolute; z-index: 3; right: max(18px, calc((100vw - var(--shell))/2)); bottom: 18px;
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.66);
  background: rgba(12,12,12,.24); color: #fff; cursor: pointer;
  display: grid; place-items: center; opacity: .58;
  backdrop-filter: blur(3px); transition: opacity .25s ease, background .25s ease, transform .25s ease;
}
.opening-video-control:hover, .opening-video-control:focus-visible { opacity: 1; background: rgba(12,12,12,.46); transform: scale(1.035); }
.opening-video.is-ready { opacity: 1; }
.opening-control-icon { position: relative; display: block; width: 12px; height: 14px; }
.opening-video-control:not(.is-paused) .opening-control-icon::before,
.opening-video-control:not(.is-paused) .opening-control-icon::after {
  content: ""; position: absolute; top: 0; width: 3px; height: 14px; background: currentColor; border-radius: 1px;
}
.opening-video-control:not(.is-paused) .opening-control-icon::before { left: 1px; }
.opening-video-control:not(.is-paused) .opening-control-icon::after { right: 1px; }
.opening-video-control.is-paused .opening-control-icon::before {
  content: ""; position: absolute; left: 2px; top: 0;
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor;
}

/* Chapter marker */
.chapter-marker { display: flex; align-items: center; gap: 15px; margin-bottom: clamp(46px, 5vw, 72px); }
.frame-bars { display: flex; align-items: stretch; gap: 4px; height: 18px; }
.frame-bars span {
  width: 2px; height: 100%; background: var(--sea);
  opacity: 0; filter: blur(5px); transform: translateY(3px) scaleY(.55);
}
.chapter-marker.is-active .frame-bars span { animation: materialize .28s var(--ease) forwards; }
.chapter-marker.is-active .frame-bars span:nth-child(2) { animation-delay: .14s; }
.chapter-marker.is-active .frame-bars span:nth-child(3) { animation-delay: .28s; }
.chapter-marker.is-active .frame-bars span:nth-child(4) { animation-delay: .42s; }
.chapter-marker.is-active .frame-bars span:nth-child(5) { animation-delay: .56s; }
.chapter-label {
  font-size: 14px; font-weight: 700; letter-spacing: .115em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateX(-3px); transition: opacity .38s ease .68s, transform .38s ease .68s;
}
.chapter-marker.is-active .chapter-label { opacity: 1; transform: none; }
@keyframes materialize { to { opacity: 1; filter: blur(0); transform: translateY(0) scaleY(1); } }

/* Shared editorial */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { font-family: var(--jp-serif); font-weight: 600; letter-spacing: -.015em; }
.intro-serif { font-family: var(--serif); }
html[lang="ja"] .intro-serif { font-family: var(--jp-serif); }
html[lang="ja"] .chapter-label {
  font-family: var(--jp-serif);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: none;
}

.text-link {
  display: inline-flex; gap: 9px; align-items: center; padding-bottom: 4px;
  border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 700; letter-spacing: .045em;
  transition: color .28s ease, border-color .28s ease;
}
.text-link:hover { color: var(--sea); border-color: var(--sun); }

.contact-email {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: .015em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color .28s ease, border-color .28s ease;
}
.contact-email:hover, .contact-email:focus-visible { color: var(--sea); border-color: var(--sun); }

/* Distribution */
.distribution { background: var(--paper); }
.distribution-head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 7vw, 110px); align-items: end; margin-bottom: 50px; }
.distribution h1 { margin: 0; font-size: clamp(52px, 6.4vw, 92px); line-height: .94; }
.distribution-intro { margin: 0 0 5px; max-width: 530px; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.47; }
.trailer-link { position: relative; display: block; overflow: hidden; background: #111; cursor: pointer; }
.trailer-link img { width: 100%; aspect-ratio: 1.85/1; object-fit: cover; object-position: 56% 47%; transform: scale(1); transition: transform 1.8s var(--ease-slow), filter 1.1s ease; }
.trailer-link::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.08); transition: background 1.1s ease; }
.trailer-link:hover img, .trailer-link:focus-visible img { transform: scale(1.025); filter: saturate(.98); }
.trailer-link:hover::after { background: rgba(0,0,0,.18); }
.play-mark {
  position: absolute; z-index: 2; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  width: clamp(64px, 6vw, 88px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.88); border-radius: 50%;
  display: grid; place-items: center; color: #fff; transition: transform .55s var(--ease), background .55s ease;
}
.play-mark::before { content: ""; margin-left: 5px; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.trailer-link:hover .play-mark { transform: translate(-50%,-50%) scale(1.05); background: rgba(0,0,0,.15); }
.play-label { position: absolute; z-index: 3; left: 22px; bottom: 18px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.film-meta-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; margin-top: 26px; align-items: start; }
.meta { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.meta strong { color: var(--ink); font-weight: 700; }

/* Credentials */
.credentials { background: #ece9e0; }
.credentials-intro { max-width: 850px; margin: -8px 0 clamp(70px, 7vw, 104px); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.25; }
.credential-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 50px); }
.credential { border-top: 1px solid var(--ink); padding-top: 18px; }
.credential h3 { margin: 0 0 30px; font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.credential strong { display: block; margin-bottom: 14px; font-family: var(--serif); font-size: clamp(21px, 2vw, 30px); line-height: 1.16; font-weight: 500; letter-spacing: -.025em; }
html[lang="ja"] .credential strong { font-family: var(--jp-serif); }
.credential p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; }

/* Selected work */
.selected-work { background: var(--paper); }
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(40px, 4vw, 72px); }
.film-card { min-width: 0; }
.image-link { display: block; overflow: hidden; background: #ddd9cf; }
.image-link img { width: 100%; aspect-ratio: 1.85/1; object-fit: cover; transform: scale(1); transition: transform 1.75s var(--ease-slow), filter .8s ease; }
.film-card.ugoku img { object-position: 59% 49%; }
.film-card.building img { object-position: 52% 48%; }
.image-link:hover img, .image-link:focus-visible img { transform: scale(1.025); filter: brightness(.97); }
.film-copy { padding-top: 25px; }
.film-year { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 13px; }
.film-copy h2 { margin: 0 0 18px; font-size: clamp(33px, 3.7vw, 54px); line-height: 1.02; }
.festival-line { margin: 0 0 26px; color: var(--muted); font-size: 16px; line-height: 1.62; }
.festival-line em { color: var(--ink); font-style: normal; }
.filmography-note { display: grid; grid-template-columns: 1fr 5fr; gap: 30px; margin-top: clamp(76px, 7vw, 112px); padding-top: 24px; border-top: 1px solid var(--line); }
.filmography-note > span { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); font-weight: 800; }
.filmography-note p { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.55vw, 23px); line-height: 1.47; }
html[lang="ja"] .filmography-note p { font-family: var(--jp-serif); }

/* Development */
.development { background: #141615; color: var(--paper); }
.development .chapter-label { color: #bab7ae; }
.development .frame-bars span { background: var(--forest); }
.development-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(38px, 4vw, 70px); }
.development-card { min-width: 0; }
.development-visual { position: relative; overflow: hidden; margin-bottom: 26px; background: #20221f; }
.development-visual img { width: 100%; aspect-ratio: 1.55/1; object-fit: cover; transition: transform 1.8s var(--ease-slow), filter 1s ease; }
.development-card:hover .development-visual img { transform: scale(1.02); filter: brightness(.95); }
.development-card.wind img { object-position: 66% 48%; }
.future-visual { aspect-ratio: 1.55/1; position: relative; overflow: hidden; background: #1c2422; }
.future-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.43) saturate(.65); opacity: .6; }
.future-veil { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(66,112,104,.64), rgba(10,13,12,.25)); }
.future-word { position: absolute; z-index: 2; left: 8%; bottom: 10%; font-family: var(--serif); font-size: clamp(43px, 5vw, 74px); line-height: .82; letter-spacing: -.05em; color: #f2eee4; }
.future-lines { position: absolute; z-index: 2; right: 8%; top: 13%; bottom: 13%; display: flex; gap: clamp(10px, 1.2vw, 18px); opacity: .48; }
.future-lines span { width: 2px; background: var(--sun); }
.development-card h2 { margin: 0 0 15px; font-size: clamp(39px, 4vw, 60px); line-height: 1; }
.development-card .project-type { margin: 0 0 11px; color: #aaa79f; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.development-card > p:last-child { max-width: 590px; margin: 0; color: #c3c0b7; font-size: 16px; line-height: 1.68; }

/* About */
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(72px, 10vw, 160px); align-items: start; }
.about-company h2 { margin: 0 0 34px; font-size: clamp(45px, 5.2vw, 76px); line-height: 1.02; }
.about-company > p { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.65vw, 25px); line-height: 1.55; }
html[lang="ja"] .about-company > p { font-family: var(--jp-serif); }
.eyebrow { margin: 0 0 20px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about-founder { border-top: 1px solid var(--ink); padding-top: 20px; }
.about-founder h3 { margin: 0 0 23px; font-size: clamp(31px, 3vw, 45px); }
.about-founder p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.72; }

/* Principles */
.values { background: #ece9e0; }
.values-intro { max-width: 980px; margin-bottom: clamp(74px, 8vw, 114px); }
.values-intro h2 { margin: 0; font-size: clamp(44px, 5.1vw, 74px); line-height: 1.03; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(38px, 4vw, 68px); }
.value { border-top: 1px solid var(--ink); padding-top: 22px; }
.value h3 { margin: 0 0 19px; font-size: clamp(29px, 2.8vw, 42px); line-height: 1.03; }
.value p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.66; }

/* Contact + footer */
.contact { background: var(--sea); color: #f8f5ed; }
.contact .frame-bars span { background: var(--sun); }
.contact .chapter-label { color: rgba(248,245,237,.78); }
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 70px; align-items: end; }
.contact h2 { margin: 0; font-size: clamp(68px, 9vw, 130px); line-height: .84; }
.contact-copy { padding-bottom: 5px; }
.contact-copy p { margin: 0 0 22px; color: rgba(248,245,237,.8); }
.contact-placeholder { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid rgba(248,245,237,.55); font-family: var(--serif); font-size: clamp(22px, 2.6vw, 38px); }
html[lang="ja"] .contact-placeholder { font-family: var(--jp-serif); }
.contact-place { margin-top: 33px !important; font-family: var(--sans); font-size: 14px; letter-spacing: .05em; }
.site-footer { background: var(--ink); color: var(--paper); padding: 74px 0 66px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: end; }
.footer-logo { width: clamp(180px, 19vw, 270px); margin-bottom: 25px; }
.site-footer p, .footer-note, .footer-links { margin: 0; font-family: var(--sans); font-size: 14px; color: #c8c5bc; }
.footer-links { display: flex; gap: 19px; }
.footer-note { text-align: right; }

.reveal { opacity: 0; transform: translateY(9px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }

@media (max-width: 980px) {
  :root { --shell: calc(100vw - 48px); --section-space: 112px; }
  .site-header { padding-inline: 24px; }
  .menu-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; left: 0; right: 0; top: 75px; margin: 0;
    background: var(--paper); color: var(--ink); padding: 30px 24px 36px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 27px;
  }
  .main-nav.is-open { display: flex; }
  .language-menu { width: 100%; }
  .language-list { position: static; margin-top: 12px; box-shadow: none; border: 0; border-top: 1px solid var(--line); padding: 9px 0 0; }
  .language-list a { padding-left: 0; }
  .hero-logo { width: min(770px, 72vw); }
  .distribution-head, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .credential-grid { grid-template-columns: repeat(2, 1fr); row-gap: 58px; }
  .film-grid { gap: 34px; }
  .development-grid { gap: 34px; }
  .values-grid { grid-template-columns: 1fr; gap: 62px; }
  .footer-grid { grid-template-columns: 2fr 1fr; }
  .footer-note { grid-column: 1/-1; text-align: left; margin-top: 28px; }
}

@media (max-width: 680px) {
  :root { --shell: calc(100vw - 36px); --section-space: 90px; }
  body { font-size: 16px; }
  .site-header { height: 64px; padding-inline: 18px; }
  .brand-link { width: 145px; height: 24px; }
  .main-nav { top: 63px; padding-inline: 18px; }
  .hero-media img { object-position: 64% 48%; }
  .hero::before { height: 26vh; background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.10) 70%, transparent); }
  .hero-content { padding-bottom: 50px; }
  .hero-kicker { margin-bottom: 16px; font-size: 10px; }
  .hero-logo { width: min(88vw, 560px); margin-bottom: 17px; }
  .hero-subline { max-width: 280px; font-size: 14px; }
  .scroll-cue { display: none; }
  .opening-video-wrap { height: min(125vw, 76svh); min-height: 470px; }
  .opening-video-control { right: 18px; bottom: 16px; width: 36px; height: 36px; }
  html[lang="ja"] .chapter-label { font-size: 15px; letter-spacing: .025em; }
  .chapter-marker { margin-bottom: 42px; }
  .distribution h1 { font-size: clamp(45px, 13vw, 66px); }
  .distribution-head { margin-bottom: 32px; }
  .film-meta-row { grid-template-columns: 1fr; gap: 12px; }
  .credential-grid, .film-grid, .development-grid { grid-template-columns: 1fr; }
  .credential strong { max-width: 500px; }
  .film-grid { gap: 72px; }
  .filmography-note { grid-template-columns: 1fr; gap: 15px; }
  .development-grid { gap: 78px; }
  .values-intro { margin-bottom: 66px; }
  .contact h2 { font-size: clamp(58px, 18vw, 86px); }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-note { margin-top: 0; }
  .footer-links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Contact form and legal layer */
.future-visual::after, .future-veil, .future-lines, .future-word { display: none !important; }
.future-visual img { filter: none !important; }
.contact-layout { display:grid; grid-template-columns:minmax(0,5fr) minmax(360px,4fr); gap:clamp(70px,8vw,130px); align-items:start; }
.contact-intro h2 { margin:0 0 30px; font-size:clamp(64px,8vw,122px); line-height:.86; }
.contact-intro > p:first-of-type { margin:0 0 25px; color:rgba(248,245,237,.82); }
.contact-email { display:inline-block; color:#fff; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.55); font-family:var(--serif); font-size:clamp(23px,2.3vw,34px); }
html[lang="ja"] .contact-email { font-family:var(--jp-serif); }
.contact-form { position:relative; border-top:1px solid rgba(248,245,237,.55); padding-top:24px; }
.form-field { display:block; margin-bottom:24px; }
.form-field > span { display:block; margin-bottom:8px; font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:rgba(248,245,237,.78); }
html[lang="ja"] .form-field > span { font-family:var(--jp-serif); font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:none; }
.form-field input, .form-field textarea { width:100%; box-sizing:border-box; border:0; border-bottom:1px solid rgba(248,245,237,.52); background:transparent; color:#fff; border-radius:0; padding:10px 0 12px; outline:none; font:400 16px/1.5 var(--sans); }
.form-field textarea { resize:vertical; min-height:130px; }
.form-field input:focus, .form-field textarea:focus { border-bottom-color:#fff; }
.form-privacy-note { margin:4px 0 22px; max-width:520px; font-size:13px; line-height:1.55; color:rgba(248,245,237,.72); }
.form-privacy-note a { color:inherit; border-bottom:1px solid rgba(248,245,237,.45); }
.form-submit { border:1px solid rgba(248,245,237,.68); background:transparent; color:#fff; padding:14px 21px; font:700 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .25s ease,color .25s ease; }
.form-submit:hover, .form-submit:focus-visible { background:#fff; color:var(--sea); }
.form-status { min-height:1.5em; margin:0 0 14px; font-size:14px; color:#fff; }
.form-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.footer-links a { color:inherit; }
@media(max-width:980px){ .contact-layout{grid-template-columns:1fr; gap:58px;} }


/* Prototype 0.5 refinements */
html[lang="ja"] .chapter-label {
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
}
html[lang="ja"] .credentials-intro,
html[lang="ja"] .about-company > p,
html[lang="ja"] .about-founder p,
html[lang="ja"] .value p,
html[lang="ja"] .development-card > p:last-child,
html[lang="ja"] .distribution-intro,
html[lang="ja"] .contact-intro > p:first-of-type,
html[lang="ja"] .form-privacy-note,
html[lang="ja"] .filmography-note p { line-height: 1.82; }
html[lang="ja"] .contact h2,
html[lang="ja"] .contact-intro h2 { font-size: clamp(38px, 6vw, 68px); line-height: 1.05; }
html[lang="ja"] .about-founder h3 { font-size: clamp(28px, 2.8vw, 40px); }
.contact-email:hover, .contact-email:focus-visible { color:#fff; border-color: var(--sun); }
.contact-email { transition: border-color .25s ease, color .25s ease; }
.future-visual { background:#161816; }
.future-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; filter:none !important; }
.development-card.wind img { object-position: 50% 50%; }
@media (max-width: 680px) {
  .opening-video-wrap { height: min(136vw, 84svh); min-height: 540px; }
  html[lang="ja"] .chapter-label { font-size: 16px; }
}

:root{font-synthesis:none;}
.intro-serif,h1,h2,.film-copy h2,.about-company h2,.development-card h2{font-optical-sizing:auto;}

/* Prototype 0.6.1 — progressive header and language selector */
@media (max-width: 980px) {
  .language-menu summary { width: max-content; }
}


/* Prototype 0.6.2 — legibility and festival emphasis */
.hero-kicker { font-size: 12px; }
.festival-label {
  display:block; margin:0 0 7px; color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.25; font-weight:800; letter-spacing:.085em; text-transform:uppercase;
}
html[lang="ja"] .festival-label { font-family:var(--jp-serif); font-size:16px; letter-spacing:.025em; text-transform:none; }
html[lang="ja"] .credential h3 { font-family:var(--jp-serif); font-size:17px; letter-spacing:.025em; text-transform:none; }
html[lang="ja"] .credential p { font-size:16px; }
.filmography-note { grid-template-columns:minmax(90px,1fr) minmax(0,5fr); align-items:start; }
.filmography-copy h3 { margin:0 0 10px; font-family:var(--serif); font-size:clamp(30px,3vw,45px); line-height:1.05; font-weight:500; letter-spacing:-.025em; }
html[lang="ja"] .filmography-copy h3 { font-family:var(--jp-serif); }
.filmography-meta { margin:0 0 17px; color:var(--muted); font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.filmography-festivals { margin:0; color:var(--muted); font-family:var(--sans); font-size:16px; line-height:1.62; }
.filmography-festivals em { color:var(--ink); font-style:normal; }
html[lang="ja"] .filmography-meta { font-family:var(--sans); text-transform:none; letter-spacing:.04em; }
html[lang="ja"] .filmography-festivals { font-family:var(--jp-serif); text-transform:none; letter-spacing:.02em; }
@media (max-width:680px) {
  .hero-kicker { font-size:10px; }
  .filmography-note { grid-template-columns:1fr; gap:12px; }
  .filmography-copy h3 { font-size:clamp(28px,9vw,40px); }
}


/* Prototype 0.6.5 — cinematic self-hosted trailer transitions */
.trailer-modal[hidden] { display:none; }
.trailer-modal {
  position:fixed; inset:0; z-index:900; overflow:hidden;
  visibility:visible; pointer-events:auto; background:transparent;
}
.trailer-backdrop {
  position:absolute; inset:0; background:#000; opacity:0;
  will-change:opacity;
}
.trailer-modal.is-black .trailer-backdrop { opacity:1; }
.trailer-stage {
  position:relative; z-index:1; width:100vw; height:100svh;
  display:flex; align-items:center; justify-content:center; background:transparent;
}
.trailer-video {
  display:block; width:100vw; height:auto; max-height:100svh; object-fit:contain;
  background:#000; opacity:0;
  will-change:opacity;
}
.trailer-modal.is-playing .trailer-video { opacity:1; }
.trailer-error {
  position:absolute; inset:0; display:grid; place-items:center; padding:32px;
  color:#fff; font:600 16px/1.5 var(--sans); text-align:center;
  opacity:0; transition:opacity .3s ease;
}
.trailer-modal.is-error .trailer-error { opacity:1; }
.trailer-error[hidden] { display:none; }
.trailer-controls {
  position:absolute; z-index:3; right:clamp(18px,3vw,44px); bottom:clamp(18px,3vw,38px);
  display:flex; gap:10px; opacity:0; transform:translateY(5px);
  transition:opacity .35s ease .16s, transform .35s ease .16s;
}
.trailer-modal.is-playing .trailer-controls { opacity:.7; transform:none; }
.trailer-modal.is-playing .trailer-stage:hover .trailer-controls,
.trailer-controls:focus-within { opacity:1; }
.trailer-control {
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.58);
  background:rgba(0,0,0,.28); color:#fff; display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(3px); transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.trailer-control:hover,.trailer-control:focus-visible {
  background:rgba(0,0,0,.58); border-color:#fff; transform:scale(1.04); outline:none;
}
.trailer-control .control-icon { display:block; position:relative; width:16px; height:16px; }
.trailer-play:not(.is-paused) .control-icon::before,.trailer-play:not(.is-paused) .control-icon::after {
  content:""; position:absolute; top:1px; width:4px; height:14px; background:currentColor; border-radius:1px;
}
.trailer-play:not(.is-paused) .control-icon::before { left:2px; }
.trailer-play:not(.is-paused) .control-icon::after { right:2px; }
.trailer-play.is-paused .control-icon::before {
  content:""; position:absolute; left:4px; top:1px; border-top:7px solid transparent;
  border-bottom:7px solid transparent; border-left:11px solid currentColor;
}
.trailer-sound .control-icon::before { content:""; position:absolute; left:1px; top:5px; width:5px; height:7px; background:currentColor; }
.trailer-sound .control-icon::after {
  content:""; position:absolute; left:6px; top:3px; width:8px; height:10px; border:2px solid currentColor;
  border-left:0; border-top-color:transparent; border-bottom-color:transparent; border-radius:0 50% 50% 0;
}
.trailer-sound.is-muted .control-icon::after {
  width:9px; height:2px; left:6px; top:7px; border:0; background:currentColor; transform:rotate(-45deg); border-radius:1px;
}
.trailer-exit .control-icon::before,.trailer-exit .control-icon::after {
  content:""; position:absolute; left:7px; top:0; width:2px; height:16px; background:currentColor; border-radius:1px;
}
.trailer-exit .control-icon::before { transform:rotate(45deg); }
.trailer-exit .control-icon::after { transform:rotate(-45deg); }
body.trailer-open { overflow:hidden; }
@media(max-width:680px) {
  .trailer-controls { right:14px; bottom:14px; gap:8px; }
  .trailer-control { width:38px; height:38px; }
}


/* Prototype 0.6.5 — The Island uses exactly the featured-film metadata/festival typography. */
.filmography-copy .film-year {
  margin:0 0 13px;
  color:var(--muted);
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:normal;
  text-transform:uppercase;
}
.filmography-copy .festival-line {
  margin:0;
  color:var(--muted);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
}
.filmography-copy .festival-line em { color:var(--ink); font-style:normal; }
html[lang="ja"] .filmography-copy .film-year {
  font-family:var(--sans);
  text-transform:none;
  letter-spacing:.04em;
}
html[lang="ja"] .filmography-copy .festival-line {
  font-family:var(--jp-serif);
  letter-spacing:.02em;
}


/* Prototype 0.6.6 — trailer fullscreen, dynamic landscape sizing and unobtrusive mobile controls */
.form-status { scroll-margin-top: clamp(88px, 12vh, 140px); }
.form-status:not(:empty) {
  padding: 11px 13px;
  border-left: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.055);
}

.trailer-modal::backdrop { background: transparent; }
.trailer-stage {
  width: 100dvw;
  height: 100dvh;
  min-width: 100vw;
  min-height: 100vh;
}
.trailer-video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.trailer-fullscreen .control-icon::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(currentColor,currentColor) left top / 6px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left top / 2px 6px no-repeat,
    linear-gradient(currentColor,currentColor) right top / 6px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right top / 2px 6px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom / 6px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom / 2px 6px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom / 6px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom / 2px 6px no-repeat;
}
.trailer-fullscreen.is-fullscreen .control-icon { transform: scale(.72); }
.trailer-fullscreen .control-icon { transition: transform .2s ease; }

/* Touch devices: controls stay out of the picture until the viewer taps the trailer. */
@media (hover:none), (pointer:coarse) {
  .trailer-controls,
  .trailer-modal.is-playing .trailer-controls {
    opacity:0;
    pointer-events:none;
    transform:translateY(6px);
    transition:opacity .24s ease, transform .24s ease;
  }
  .trailer-modal.is-playing.controls-visible .trailer-controls,
  .trailer-modal.is-error.controls-visible .trailer-controls {
    opacity:.88;
    pointer-events:auto;
    transform:none;
  }
  .trailer-control { width:44px; height:44px; }
}

/* Fullscreen API mode: consume the available display, independent of browser chrome. */
.trailer-modal:fullscreen,
.trailer-modal:-webkit-full-screen {
  width:100vw;
  height:100vh;
  background:#000;
}
.trailer-modal:fullscreen .trailer-stage,
.trailer-modal:-webkit-full-screen .trailer-stage {
  width:100vw;
  height:100vh;
  min-width:100vw;
  min-height:100vh;
}