/* Whale’s Tales: native film colour, composed imagery, one viewing journey. */
/* The title’s existing serif family carries through the film page; the studio wordmark keeps its brand type. */
.tales-page { --paper:#090d0c; --ink:#f1ede4; --blue:#d1b987; --film-muted:#b4bdb7; --film-line:#d9dbc32c; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:1.125rem; line-height:1.6; }
.tales-page h1,.tales-page h2 { font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:-.035em; }
.tales-page h3 { font:400 1.35rem/1.3 var(--serif); text-transform:none; letter-spacing:0; }
.tales-page figure,.tales-page p { margin:0; }
.tales-page img { display:block; max-width:100%; height:auto; }
.tales-page a { color:inherit; }
.tales-page button,.tales-page select,.tales-page input,.tales-page textarea { font-family:var(--serif); }
.tales-page [hidden] { display:none!important; }
.film-icon { display:block; flex:none; width:20px; height:20px; }
.tales-page button:focus-visible,.tales-page a:focus-visible,.tales-page select:focus-visible,.tales-page input:focus-visible,.tales-page textarea:focus-visible,.gallery-track:focus-visible { outline:2px solid #edd6a9; outline-offset:5px; }
.tales-page main [id] { scroll-margin-top:2rem; }
.tales-nav { position:absolute; inset:0 0 auto; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:1.75rem 5vw; color:#fff; }
.tales-nav nav { display:flex; align-items:center; gap:2rem; font:400 1rem/1.4 var(--serif); }
.tales-nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
.tales-nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.tales-opening { position:relative; isolation:isolate; min-height:780px; height:100svh; max-height:1100px; overflow:hidden; }
.opening-poster,#opening-film { position:absolute; inset:0; z-index:-2; width:100%; height:100%; }
.opening-poster img,#opening-film { width:100%; height:100%; object-fit:cover; object-position:65% center; }
#opening-film { opacity:0; transition:opacity .7s; }.tales-page #opening-film.is-ready { opacity:1; }
.tales-opening::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#060b0bee, #060b0b8c 35%,transparent 76%),linear-gradient(0deg,#090d0c,transparent 50%,#05070638); }
.tales-title { position:absolute; left:7vw; bottom:110px; width:min(560px,46vw); }
.tales-title h1 { display:flex; flex-direction:column; align-items:flex-start; font-size:clamp(6rem,10vw,10rem); line-height:.82; margin:0 0 1.75rem; letter-spacing:-.055em; }
.tales-title h1 em { padding-left:.45em; font-weight:400; }
.director-credit { font:400 1.1rem/1.5 var(--serif); color:#dedfd4; }
.tales-title .opening-premise { font:400 1.35rem/1.5 var(--serif); max-width:430px; margin-top:1.6rem; text-wrap:pretty; }
.tales-title .opening-meta { margin-top:1rem; font:.95rem/1.6 var(--serif); color:#c7cec3; }
.opening-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2rem; margin-top:1.8rem; }
.tales-play { display:inline-flex; align-items:center; gap:.9rem; min-height:56px; text-decoration:none; font:400 1.125rem/1.3 var(--serif); }
.tales-play svg { width:56px; height:56px; padding:18px; border:1px solid #f0eee6a0; border-radius:50%; transition:background .2s,transform .2s; }
.tales-play:hover svg { background:#e3d8ba26; transform:scale(1.05); }
.tales-play small { display:block; margin-top:.35rem; font:400 .9rem/1.4 var(--serif); color:#cad1c6; }
.film-text-link { display:inline-flex; align-items:center; gap:.75rem; padding:.7rem 0; min-height:44px; border:0; border-bottom:1px solid #dcdcc36b; background:none; color:inherit; font:400 1.05rem/1.5 var(--serif); text-decoration:none; cursor:pointer; }
.film-text-link:hover { border-color:#f1ede4; }
.opening-foot { position:absolute; inset:auto 7vw 1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font:.95rem/1.5 var(--serif); color:#c5cdc2; }
.opening-foot a { min-height:44px; display:flex; align-items:center; gap:1rem; text-decoration:none; }
.opening-foot button { display:inline-flex; align-items:center; gap:.65rem; padding:.7rem 1rem; min-height:44px; color:inherit; border:1px solid #e0e4d242; background:#0a100b66; font:inherit; cursor:pointer; }
.film-invitation { max-width:1600px; margin:auto; padding:6rem 7vw 3rem; }
.story-copy { display:grid; grid-template-columns:1fr 2fr; gap:6vw; align-items:start; margin-bottom:2.8rem; }
.story-copy h2 { margin:0; font-size:clamp(2.8rem,4.5vw,4.5rem); line-height:1; }
.film-synopsis { font:400 1.35rem/1.65 var(--serif); max-width:740px; color:#c8d0c9; text-wrap:pretty; }
.story-frame { overflow:hidden; }.story-frame img { width:100%; aspect-ratio:16/9; object-fit:contain; }
.image-reveal { opacity:.55; transform:translateY(18px); transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1); }.image-revealed { opacity:1; transform:none; }
.film-gallery { padding:3rem 0 5rem; max-width:1700px; margin:auto; }
.gallery-top,.gallery-bottom { margin:0 7vw; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.gallery-top { margin-bottom:1.8rem; }.gallery-top h2 { font-size:clamp(2.3rem,3.4vw,3.5rem); margin:0; }.gallery-top > span { font:.95rem/1.5 var(--serif); color:var(--film-muted); }
.gallery-track { display:flex; gap:18px; overflow-x:auto; padding:0 7vw; scroll-snap-type:x mandatory; scroll-padding:0 7vw; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain; }
.gallery-track::-webkit-scrollbar { display:none; }.gallery-track.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.gallery-item { flex:0 0 100%; min-width:0; position:relative; scroll-snap-align:center; }
.gallery-slide { display:block; width:100%; min-width:0; padding:0; position:relative; border:0; background:#101510; color:inherit; cursor:zoom-in; }
.gallery-slide img { width:100%; aspect-ratio:16/9; object-fit:contain; user-select:none; }
.gallery-slide > span { display:inline-flex; align-items:center; gap:.6rem; position:absolute; z-index:2; right:1rem; bottom:1rem; min-height:44px; padding:.55rem .8rem; background:#090d0ccc; font:.95rem/1.4 var(--serif); }
.gallery-moment { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; transition:opacity .3s; }
.gallery-moment.is-ready { opacity:1; }
.gallery-moment-toggle { position:absolute; z-index:3; left:1rem; bottom:1rem; display:flex; align-items:center; gap:.6rem; min-height:44px; padding:.55rem .8rem; border:1px solid #e3d8ba55; background:#090d0cdd; color:var(--ink); font:.95rem/1.4 var(--serif); cursor:pointer; }
.gallery-moment-toggle:hover { background:#252820; border-color:#e3d8ba; }
.gallery-thumbnails { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; width:min(620px,86vw); margin:1.4rem 7vw 0; }
.frame-thumbnail { position:relative; min-width:0; min-height:44px; padding:0 0 9px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink); cursor:pointer; opacity:.57; transition:opacity .2s,border-color .2s; }
.frame-thumbnail img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.frame-thumbnail span { position:absolute; left:6px; top:5px; font:.8rem/1.2 var(--serif); text-shadow:0 1px 5px #000; }
.frame-thumbnail:hover,.frame-thumbnail[aria-current=true] { opacity:1; }
.frame-thumbnail[aria-current=true] { border-color:#ddc694; }
.viewer-thumbnails { width:min(540px,90vw); margin:0; flex-shrink:0; }
.tales-page main { background:linear-gradient(180deg,transparent 18%,#0b151c 37%,#161810 62%,#090d0c 86%); }
.scene-motion .story-frame { transform:translateY(calc((1 - var(--scene-progress,1))*24px)) scale(calc(.94 + var(--scene-progress,1)*.06)); transform-origin:50% 60%; }
.scene-motion .gallery-track { transform:translateY(calc((1 - var(--scene-progress,1))*16px)) scale(calc(.98 + var(--scene-progress,1)*.02)); transform-origin:50% 50%; }
.gallery-bottom { padding-top:1rem; }.gallery-bottom p { font:1rem/1.5 var(--serif); color:#c3cec5; }.gallery-bottom > div { display:flex; gap:.6rem; }
.gallery-bottom button,.fullscreen-controls button { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid #dddcc35c; border-radius:50%; color:inherit; background:transparent; font:1.2rem/1 var(--serif); cursor:pointer; }
.gallery-bottom button:hover,.fullscreen-controls button:hover { background:#d7dbc218; }
.film-people { display:grid; grid-template-columns:1fr 1.12fr; gap:7vw; padding:5rem 7vw; border-top:1px solid var(--film-line); border-bottom:1px solid var(--film-line); max-width:1600px; margin:auto; }
.director-heading { display:flex; align-items:center; gap:1.8rem; }.director-heading img { width:130px; height:auto; }.director-heading h2 { font-size:clamp(2.2rem,3vw,3.5rem); line-height:1.1; margin:.6rem 0; }.director-heading p { font:.95rem/1.5 var(--serif); color:var(--film-muted); }.director-heading .film-label { color:#d5bd8e; }
.director-bio { padding:1.8rem 0 .75rem; font:1.125rem/1.7 var(--serif); color:#c3cec4; max-width:480px; }
.film-dossier { display:grid; grid-template-columns:minmax(110px,.6fr) 1fr; gap:1.5rem 2rem; align-items:start; }.dossier-poster { width:100%; }.film-dossier h3 { margin:0 0 .65rem; }.film-dossier p { font:.95rem/1.65 var(--serif); color:var(--film-muted); }.film-dossier dl { display:grid; gap:.8rem; margin:1.25rem 0; }.film-dossier dt { font:.9rem/1.5 var(--serif); color:var(--film-muted); }.film-dossier dd { margin:.2rem 0 0; font:1.05rem/1.5 var(--serif); }.press-kit { grid-column:1/-1; }.press-kit p { padding-top:.65rem; }
.film-contact { max-width:1600px; margin:auto; padding:4.5rem 7vw; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.film-contact h2 { font-size:clamp(3rem,4.5vw,4.8rem); line-height:1.1; margin:0; }
.film-contact > a { flex-shrink:0; }
.film-submit { display:inline-flex; justify-content:center; align-items:center; gap:.6rem; min-height:48px; padding:.85rem 1.5rem; border:1px solid #ded1ad; background:#ded1ad; color:#152017!important; text-decoration:none; cursor:pointer; font:400 1.05rem/1.4 var(--serif); transition:background .2s; }.film-submit:hover { background:#f2e5c3; }.film-submit:disabled { opacity:.55; cursor:wait; }
.tales-footer { display:flex; justify-content:space-between; gap:1.5rem; padding:2rem 7vw 6rem; border-top:1px solid var(--film-line); font:.95rem/1.65 var(--serif); color:var(--film-muted); }
.tales-footer > a { display:inline-flex; align-items:center; align-self:flex-start; gap:.6rem; }
.persistent-watch { position:fixed; z-index:25; right:1.5rem; bottom:max(1.25rem,env(safe-area-inset-bottom)); min-height:48px; display:flex; align-items:center; gap:.75rem; border:1px solid #c5cdae7a; border-radius:100px; padding:.75rem 1.2rem; background:#111913f0; color:#f3eee2; font:1rem/1.4 var(--serif); cursor:pointer; box-shadow:0 6px 30px #0004; backdrop-filter:blur(12px); }.persistent-watch small { font:inherit; color:#c0c8b6; }
body:has(.cinema-dialog[open]) { overflow:hidden; }
.cinema-dialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; margin:0; padding:5rem 5vw 2rem; background:#060a08f7; color:#eee8dc; overflow:auto; }.cinema-dialog::backdrop { background:#000; }.cinema-dialog[open] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.dialog-close { display:inline-flex; align-items:center; gap:.6rem; position:absolute; top:1.3rem; right:4vw; min-height:44px; padding:.6rem 1rem; border:1px solid #d6d9c760; background:#0e150f; color:inherit; cursor:pointer; font:1rem/1.4 var(--serif); }
.cinema-dialog video { width:min(100%,1200px); max-height:72dvh; object-fit:contain; min-height:0; background:#000; }.cinema-dialog:has(.teaser-next:not([hidden])) video { max-height:42dvh; }
.dialog-context,.zoom-help { font:1rem/1.6 var(--serif); color:#b5c1b3; text-align:center; }
.teaser-next { max-width:1000px; text-align:center; }.teaser-next h2 { font-size:clamp(1.8rem,3vw,3rem); margin:.5rem 0; }.teaser-next p { font:1.05rem/1.6 var(--serif); color:#c0caba; }.teaser-next > div { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.2rem; }
.teaser-error { text-align:center; font:1.05rem/1.6 var(--serif); }.teaser-error button,.teaser-error a { min-height:44px; display:inline-flex; align-items:center; margin:.7rem; padding:.5rem 1rem; border:1px solid currentColor; background:none; color:inherit; cursor:pointer; }
.teaser-transcript { width:min(100%,850px); color:#b4c1b0; font:1rem/1.7 var(--serif); }.teaser-transcript summary { cursor:pointer; min-height:44px; padding:.65rem 0; }.teaser-transcript p { margin:.75rem 0; }.cinema-dialog:has(.teaser-transcript[open]) { justify-content:flex-start; }
.still-viewport { display:flex; align-items:center; justify-content:center; width:100%; max-height:70dvh; overflow:auto; touch-action:pan-x pan-y pinch-zoom; }.tales-page #fullscreen-still { width:min(90vw,calc(54dvh * 16 / 9)); max-width:none; height:auto; object-fit:contain; flex-shrink:0; transform-origin:top left; }.still-viewport.is-zoomed { display:block; height:70dvh; }.still-viewport.is-zoomed #fullscreen-still { width:1920px; max-width:none; }
.fullscreen-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(90vw,1200px); font:1rem/1.4 var(--serif); }.zoom-help { max-width:600px; }
.tales-page .analytics-consent { color:#e9eadf; background:#162018; border-color:#c6c9a952; z-index:40; }.tales-page .analytics-consent h2 { font:400 1.2rem/1.4 var(--serif); letter-spacing:0; }.tales-page .analytics-consent p { font-size:.95rem; line-height:1.5; }.tales-page .analytics-consent button { font:400 .875rem/1.3 var(--serif); letter-spacing:0; text-transform:none; }.tales-page:has(.analytics-consent:not([hidden])) .persistent-watch { display:none; }
html[lang=ja] .tales-title h1 { font-family:"Bodoni 72",Didot,Baskerville,"Times New Roman",serif; }
@media(min-width:701px) and (prefers-reduced-motion:no-preference) { .tales-title { animation:film-arrive .8s cubic-bezier(.2,.7,.2,1) both; } }
@keyframes film-arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media(max-width:700px) { .gallery-thumbnails { width:88vw; gap:7px; margin:1.2rem 6vw 0; }.viewer-thumbnails { width:94vw; margin:0; }.frame-thumbnail img { min-height:35px; }.frame-thumbnail span { font-size:.75rem; top:4px; left:4px; }.gallery-moment-toggle { left:.6rem; bottom:.6rem; font-size:.875rem; gap:.35rem; padding:.5rem; }.gallery-slide > span { padding:.5rem; gap:.35rem; }.scene-motion .story-frame { transform:translateY(calc((1 - var(--scene-progress,1))*14px)) scale(calc(.97 + var(--scene-progress,1)*.03)); } }
@media(max-width:1050px) { .tales-title { width:51vw; }.opening-actions { gap:1rem; }.film-people { gap:4vw; }.director-heading { gap:1rem; }.director-heading img { width:100px; }.film-dossier { grid-template-columns:120px 1fr; gap:1.5rem; } }
@media(max-width:800px) { .film-people { grid-template-columns:1fr; gap:3.5rem; }.director-bio { max-width:none; }.film-dossier { grid-template-columns:minmax(110px,220px) 1fr; gap:1.5rem 2.5rem; } }
@media(max-width:700px) {
 .tales-nav { padding:1.15rem 6vw; }.tales-nav .wordmark { font-size:.65rem; letter-spacing:.12em; }.tales-nav nav { gap:.85rem; font-size:.875rem; }
 .tales-opening { min-height:820px; height:100svh; max-height:1000px; }.opening-poster img,#opening-film { object-position:50% 20%; }
 .tales-opening::after { background:linear-gradient(0deg,#090d0c 2%,#090d0ce8 27%,#090d0c66 55%,transparent 82%),linear-gradient(0deg,transparent 80%,#090d0c6b); }
 .tales-title { bottom:95px; left:6vw; width:88vw; }.tales-title h1 { font-size:clamp(5.5rem,22vw,8rem); margin-bottom:1.3rem; }.tales-title .director-credit { font-size:1rem; }.tales-title .opening-premise { font-size:1.2rem; line-height:1.5; margin-top:1.15rem; max-width:360px; }.tales-title .opening-meta { font-size:.875rem; margin-top:.8rem; }.opening-actions { margin-top:1.1rem; gap:.6rem 1.3rem; }.tales-play { font-size:1.05rem; min-height:48px; }.tales-play svg { width:48px; height:48px; padding:15px; }.tales-play small { font-size:.875rem; }.opening-actions .film-text-link { font-size:1rem; }.opening-foot { left:6vw; right:6vw; bottom:1.2rem; font-size:.875rem; }
 .film-invitation { padding:3.5rem 6vw 1.5rem; }.story-copy { grid-template-columns:1fr; gap:1.25rem; margin-bottom:2rem; }.story-copy h2 { font-size:2.6rem; }.film-synopsis { font-size:1.2rem; line-height:1.65; }.story-frame { margin:0 -6vw!important; }
 .film-gallery { padding:2rem 0 3.5rem; }.gallery-top,.gallery-bottom { margin:0 6vw; }.gallery-top { margin-bottom:1.25rem; }.gallery-top h2 { font-size:2.3rem; }.gallery-top > span { display:none; }.gallery-track { padding:0 3vw; scroll-padding:0 3vw; gap:10px; }.gallery-slide > span { bottom:.6rem; right:.6rem; font-size:.875rem; }.gallery-bottom { padding-top:.85rem; }.gallery-bottom p { font-size:.95rem; }
 .film-people { padding:3.5rem 6vw; }.director-heading img { width:106px; }.director-heading h2 { font-size:2.5rem; }.film-dossier { grid-template-columns:minmax(105px,.65fr) 1fr; gap:1.5rem; }.film-dossier p { font-size:.95rem; }.film-dossier dd { font-size:1.05rem; }
 .film-contact { padding:3.5rem 6vw; flex-direction:column; align-items:flex-start; gap:1.2rem; }.film-contact h2 { font-size:3rem; }.tales-footer { flex-direction:column; padding:1.5rem 6vw 6rem; }.persistent-watch { right:1rem; bottom:max(1rem,env(safe-area-inset-bottom)); font-size:1rem; }
 .cinema-dialog { padding:5rem 3vw 1.5rem; }.cinema-dialog video { max-height:55dvh; }.cinema-dialog:has(.teaser-next:not([hidden])) { justify-content:flex-start; }.teaser-next > div { gap:.4rem 1rem; }.teaser-next .film-submit { width:100%; }.dialog-close { right:4vw; }.tales-page #fullscreen-still { width:94vw; }.zoom-help { font-size:.875rem; }
 .tales-page .analytics-consent { left:3vw; right:3vw; bottom:1rem; }
}
@media(max-height:540px) and (orientation:landscape) { .cinema-dialog { padding:3.5rem 3vw .5rem; gap:.35rem; }.dialog-close { top:.5rem; }.zoom-help { display:none; }.cinema-dialog video { max-height:68dvh; }.tales-page #fullscreen-still { width:calc(67dvh * 16 / 9); }.viewer-thumbnails { display:none; }.fullscreen-controls { position:absolute; top:50%; width:94vw; }.fullscreen-controls span { align-self:end; font-size:.875rem; }.teaser-next h2 { font-size:1.5rem; }.cinema-dialog:has(.teaser-next:not([hidden])) { justify-content:flex-start; } }
@media(prefers-reduced-motion:reduce) { .tales-page * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }.image-reveal,.scene-motion .story-frame,.scene-motion .gallery-track { opacity:1; transform:none; }#opening-film { display:none; } }