/* A/B review controls are local-only unless explicitly requested via ?compare=1. */
.title-review{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:6px;background:#f3f0e9;color:#292723;padding:7px;border:1px solid #29272330;box-shadow:0 3px 18px #0002;border-radius:4px;white-space:nowrap}
.title-review[hidden]{display:none}.title-review button{font:13px var(--sans);padding:10px 15px;border:0;background:transparent;color:inherit;cursor:pointer}.title-review button[aria-pressed="true"]{background:#292723;color:#fff}.title-review button:focus-visible{outline:2px solid #785443;outline-offset:2px}
html[lang="en"] .title-wrap{padding-top:20svh}
html[lang="en"] h1{width:min(680px,85vw);margin:auto;font-family:"gardein",sans-serif;font-weight:800;font-size:clamp(70px,9.2vw,145px);line-height:.84;letter-spacing:-.055em;white-space:normal;text-shadow:none;transform:rotate(-3deg)}
html[lang="en"] h1 .title-line{display:block;padding:0;margin:0;white-space:nowrap}
html[lang="en"] h1 .title-line:first-child{text-align:left;transform:scaleY(.82);transform-origin:left bottom}
html[lang="en"] h1 .title-line:last-child{text-align:right;transform:scaleY(.82);transform-origin:right top}
html[lang="en"] h1 .title-d{font-style:normal;color:inherit;display:inline-block;transform:rotate(9deg);margin-left:.02em}
html[lang="en"][data-title-study="b"] h1{font-family:"cooper-black-std",serif;font-weight:400;font-size:clamp(65px,8.6vw,132px);letter-spacing:-.065em;line-height:.94;transform:rotate(-5deg)}
html[lang="en"][data-title-study="b"] h1 .title-line:first-child{transform:rotate(3deg);text-align:center}
html[lang="en"][data-title-study="b"] h1 .title-line:last-child{transform:rotate(-2deg);text-align:center}
html[lang="en"][data-title-study="b"] h1 .title-line:first-child span:nth-child(2n){display:inline-block;transform:translateY(-.05em) rotate(5deg)}
html[lang="en"][data-title-study="b"] h1 .title-d{transform:rotate(12deg) translateY(.035em)}
/* C: poster-scale, fixed-baseline title. Its rounded bowls stay, but the bounce does not. */
html[lang="en"][data-title-study="c"] .title-wrap{padding-top:23svh}
html[lang="en"][data-title-study="c"] h1{width:min(1100px,91vw);margin:auto;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(76px,10.5vw,166px);line-height:.82;letter-spacing:-.095em;text-align:left;text-transform:uppercase;transform:none}
html[lang="en"][data-title-study="c"] h1 .title-line{display:block;padding:0;margin:0;white-space:nowrap;transform:none}
html[lang="en"][data-title-study="c"] h1 .title-line:first-child{font-size:.56em;letter-spacing:-.075em;line-height:1;text-align:left;transform:none}
html[lang="en"][data-title-study="c"] h1 .title-line:last-child{margin-top:.09em;text-align:left;transform:none}
html[lang="en"][data-title-study="c"] h1 .title-d{display:inline-block;margin-left:.025em;color:#e86948;font-style:normal;transform:none}
html[lang="en"][data-title-study="c"] .release-date{margin-top:32px;letter-spacing:.3em}
/* D: image-spanning type, translated from the director's rough sense of scale.
   The sketch's hand-drawn strokes and red hue are not treated as specifications. */
html[lang="en"][data-title-study="d"] .title-wrap{padding:0 4%;align-items:stretch;overflow:hidden}
html[lang="en"][data-title-study="d"] .title-lockup{position:relative;height:100%;width:100%}
html[lang="en"][data-title-study="d"] .title-lockup::before{content:"COKE SPIDER D";position:absolute;top:13svh;left:-16vw;font:800 clamp(145px,18vw,340px)/1 gardein,Arial,sans-serif;letter-spacing:-.09em;white-space:nowrap;color:transparent;-webkit-text-stroke:clamp(1.5px,.17vw,3px) #ffffffb8;transform:rotate(-8deg) scaleY(1.65);transform-origin:left top;opacity:.86}
html[lang="en"][data-title-study="d"] h1{position:absolute;inset:0;width:100%;height:100%;margin:0;font-family:"cooper-black-std","Arial Black",serif;font-weight:400;font-size:clamp(74px,9.3vw,165px);line-height:1;letter-spacing:-.075em;text-shadow:0 3px 15px #0005;transform:none}
html[lang="en"][data-title-study="d"] h1 .title-line{display:block;padding:0;margin:0;white-space:nowrap}
html[lang="en"][data-title-study="d"] h1 .title-line:first-child{position:absolute;top:20svh;left:45%;font-family:gardein,Arial,sans-serif;font-weight:800;font-size:.45em;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-.16em;text-align:center;transform:none}
html[lang="en"][data-title-study="d"] h1 .title-line:last-child{position:absolute;left:26%;bottom:12svh;text-align:left;transform:rotate(-4deg)}
html[lang="en"][data-title-study="d"] h1 .title-d{color:inherit;font-style:normal;transform:none}
html[lang="en"][data-title-study="d"] .release-date{position:absolute;bottom:7svh;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
html[lang="en"] .release-date{margin-top:24px}
@media(max-width:700px){html[lang="en"] .title-wrap{padding-top:25svh}html[lang="en"] h1{width:87vw;font-size:13vw}html[lang="en"][data-title-study="b"] h1{font-size:12.3vw}html[lang="en"][data-title-study="c"] .title-wrap{padding-top:30svh}html[lang="en"][data-title-study="c"] h1{width:94vw;font-size:12.8vw;letter-spacing:-.105em}html[lang="en"][data-title-study="c"] .release-date{margin-top:26px}html[lang="en"][data-title-study="d"] .title-wrap{padding:0 2%}html[lang="en"][data-title-study="d"] .title-lockup::before{top:21svh;left:-35vw;font-size:28vw;-webkit-text-stroke:1.5px #ffffffad}html[lang="en"][data-title-study="d"] h1{width:100%;font-size:12vw}html[lang="en"][data-title-study="d"] h1 .title-line:first-child{top:29svh;left:45%;font-size:.7em}html[lang="en"][data-title-study="d"] h1 .title-line:last-child{left:8%;bottom:15svh}html[lang="en"][data-title-study="d"] .release-date{bottom:10svh}.title-review{bottom:15px}.title-review button{font-size:11px;padding:8px 7px}}

/* E: the director's spatial sketch translated into typeset layers, not traced handwriting. */
.title-echo{display:none}
html[lang="en"][data-title-study="e"] .title-wrap{padding:0;align-items:stretch;overflow:hidden}
html[lang="en"][data-title-study="e"] .title-lockup{position:relative;width:100%;height:100%;text-align:left;isolation:isolate}
html[lang="en"][data-title-study="e"] .title-echo{display:block;position:absolute;z-index:0;white-space:nowrap;color:transparent;font-family:"Bodoni 72","Didot","Times New Roman",serif;font-style:italic;font-weight:400;line-height:1;letter-spacing:-.15em;-webkit-text-stroke:clamp(2px,.22vw,4px) rgba(255,239,222,.82);text-shadow:none;opacity:.95}
html[lang="en"][data-title-study="e"] .title-echo-left{top:10svh;left:4vw;font-size:clamp(260px,37vw,700px);transform:rotate(-5deg) scaleX(.78) scaleY(1.25);transform-origin:left top}
html[lang="en"][data-title-study="e"] .title-echo-right{top:18svh;left:55vw;font-size:clamp(250px,32vw,610px);transform:rotate(-4deg) scaleX(.73) scaleY(1.3);transform-origin:left top}
html[lang="en"][data-title-study="e"] h1{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;font-family:"cooper-black-std","Arial Black",serif;font-size:clamp(86px,8vw,152px);font-weight:400;line-height:1;letter-spacing:-.075em;text-shadow:0 4px 20px #0007;transform:none}
html[lang="en"][data-title-study="e"] h1 .title-line{display:block;position:absolute;padding:0;margin:0;white-space:nowrap}
html[lang="en"][data-title-study="e"] h1 .title-line:first-child{top:20svh;left:49%;font-size:.58em;line-height:.94;writing-mode:vertical-rl;text-orientation:upright;text-align:center;letter-spacing:-.21em;transform:translateX(-50%)}
html[lang="en"][data-title-study="e"] h1 .title-line:first-child span{display:inline;transform:none}
html[lang="en"][data-title-study="e"] h1 .title-line:last-child{left:36%;bottom:20svh;transform:rotate(-5deg)}
html[lang="en"][data-title-study="e"] h1 .title-d{color:inherit;font-style:normal;transform:none}
html[lang="en"][data-title-study="e"] .release-date{position:absolute;z-index:2;bottom:10svh;left:50%;margin:0;transform:translateX(-50%);white-space:nowrap}
@media(max-width:700px){
  html[lang="en"][data-title-study="e"] .title-echo{-webkit-text-stroke:1.6px rgba(255,239,222,.67)}
  html[lang="en"][data-title-study="e"] .title-echo-left{top:20svh;left:-12vw;font-size:64vw;transform:rotate(-6deg) scaleX(.85) scaleY(1.4)}
  html[lang="en"][data-title-study="e"] .title-echo-right{top:49svh;left:17vw;font-size:39vw;transform:rotate(-5deg) scaleX(.8) scaleY(1.25)}
  html[lang="en"][data-title-study="e"] h1{width:100%;font-size:14vw}
  html[lang="en"][data-title-study="e"] h1 .title-line:first-child{top:26svh;left:51%;font-size:.92em;letter-spacing:-.22em}
  html[lang="en"][data-title-study="e"] h1 .title-line:last-child{left:8%;bottom:21svh;font-size:1.04em}
  html[lang="en"][data-title-study="e"] .release-date{bottom:13svh}
  .title-review{max-width:96vw;overflow-x:auto}
}

/* F: one title lockup only; the E outline duplicate remains review-only. */
html[lang="en"][data-title-study="f"] .title-wrap{padding:0;align-items:stretch;overflow:hidden}
html[lang="en"][data-title-study="f"] .title-lockup{position:relative;width:100%;height:100%;text-align:left}
html[lang="en"][data-title-study="f"] h1{position:absolute;inset:0;width:100%;height:100%;margin:0;font-family:"cooper-black-std","Arial Black",serif;font-size:clamp(92px,9vw,168px);font-weight:400;line-height:1;letter-spacing:-.075em;text-shadow:0 4px 20px #0008;transform:none}
html[lang="en"][data-title-study="f"] h1 .title-line{display:block;position:absolute;padding:0;margin:0;white-space:nowrap}
html[lang="en"][data-title-study="f"] h1 .title-line:first-child{top:17svh;left:49%;font-size:.68em;line-height:.94;writing-mode:vertical-rl;text-orientation:upright;text-align:center;letter-spacing:-.21em;transform:translateX(-50%)}
html[lang="en"][data-title-study="f"] h1 .title-line:first-child span{display:inline;transform:none}
html[lang="en"][data-title-study="f"] h1 .title-line:last-child{left:35%;bottom:19svh;transform:rotate(-5deg)}
html[lang="en"][data-title-study="f"] h1 .title-d{color:inherit;font-style:normal;transform:none}
html[lang="en"][data-title-study="f"] .release-date{position:absolute;bottom:10svh;left:50%;margin:0;transform:translateX(-50%);white-space:nowrap}
@media(max-width:700px){
  html[lang="en"][data-title-study="f"] h1{width:100%;font-size:15vw}
  html[lang="en"][data-title-study="f"] h1 .title-line:first-child{top:24svh;left:51%;font-size:1em}
  html[lang="en"][data-title-study="f"] h1 .title-line:last-child{left:6%;bottom:21svh;font-size:1.08em}
  html[lang="en"][data-title-study="f"] .release-date{bottom:13svh}
}

/* G: one uninterrupted, image-spanning title. The white B/F lettering under the rough sketch was not the design target. */
html[lang="en"][data-title-study="g"] .title-wrap{padding:0;align-items:stretch;overflow:hidden}
html[lang="en"][data-title-study="g"] .title-lockup{position:relative;width:100%;height:100%;text-align:left}
html[lang="en"][data-title-study="g"] h1{position:absolute;top:13svh;left:6vw;width:max-content;height:auto;margin:0;font-family:"Bodoni 72","Didot","Times New Roman",serif;font-style:italic;font-size:clamp(250px,24vw,460px);font-weight:400;line-height:1;letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:clamp(2px,.23vw,4px) rgba(255,246,232,.96);text-shadow:none;transform:rotate(-4deg) scaleX(.76) scaleY(1.43);transform-origin:left top}
html[lang="en"][data-title-study="g"] .release-date{position:absolute;bottom:7svh;left:50%;margin:0;transform:translateX(-50%);white-space:nowrap}
@media(max-width:700px){
  html[lang="en"][data-title-study="g"] h1{top:36svh;left:2vw;font-size:30vw;letter-spacing:-.045em;-webkit-text-stroke:1.7px rgba(255,246,232,.96);transform:rotate(-4deg) scaleX(.40) scaleY(1.2)}
  html[lang="en"][data-title-study="g"] .release-date{bottom:12svh}
}

/* H: one image-wide title, turned into a typographic graphic along a loose arc. */
html[lang="en"][data-title-study="h"] .title-wrap{padding:0;overflow:hidden;align-items:stretch}
html[lang="en"][data-title-study="h"] .title-lockup{position:relative;width:100%;height:100%}
html[lang="en"][data-title-study="h"] h1{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;transform:none;line-height:1;text-shadow:none}
html[lang="en"][data-title-study="h"] .h-title-art{display:block;width:100%;height:100%;overflow:visible}
html[lang="en"][data-title-study="h"] .h-title-art text{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-size:255px;font-weight:900;letter-spacing:-.07em;filter:drop-shadow(0 8px 14px #0009)}
html[lang="en"][data-title-study="h"] .h-title-solid{fill:#fff7e9;stroke:#fff7e9;stroke-width:2}
html[lang="en"][data-title-study="h"] .h-title-outline{fill:transparent;stroke:#fff7e9;stroke-width:6;stroke-linejoin:round;paint-order:stroke}
html[lang="en"][data-title-study="h"] .h-title-mobile{display:none}
html[lang="en"][data-title-study="h"] .release-date{position:absolute;bottom:8svh;left:50%;margin:0;transform:translateX(-50%);white-space:nowrap}
@media(max-width:700px){
  html[lang="en"][data-title-study="h"] .h-title-desktop{display:none}
  html[lang="en"][data-title-study="h"] .h-title-mobile{display:block}
  html[lang="en"][data-title-study="h"] .h-title-art text{font-size:69px;letter-spacing:-.08em;filter:drop-shadow(0 3px 7px #0009)}
  html[lang="en"][data-title-study="h"] .h-title-solid{stroke-width:1}
  html[lang="en"][data-title-study="h"] .h-title-outline{stroke-width:2}
  html[lang="en"][data-title-study="h"] .release-date{bottom:12svh}
}

/* The Japanese title begins a little taller, then contracts as it rises on scroll. */
html[lang="ja"] #film-title{transform:scaleX(var(--jp-title-width,1)) scaleY(var(--jp-title-stretch,2.5));transform-origin:center top;margin-bottom:calc(2.25em + 24px)}
html[lang="ja"] #film-title .jp-glyph{display:inline-block;padding:0;margin:0;white-space:pre}
@media(max-width:700px){
  html[lang="ja"] #film-title{font-size:6.4vw;letter-spacing:0;--jp-title-width:.68}
  html[lang="ja"] #film-title{margin-bottom:calc(2.25em + 20px)}
}

/* I: independently scaled and tilted glyphs, not a sentence bent onto one baseline. */
html[lang="en"][data-title-study="i"] .title-wrap{padding:0;overflow:visible;align-items:stretch}
html[lang="en"][data-title-study="i"] .title-lockup{position:relative;width:100%;height:100%}
html[lang="en"][data-title-study="i"] h1{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;transform:none;line-height:1;text-shadow:none}
html[lang="en"][data-title-study="i"] .i-title-art{display:block;width:100%;height:100%;overflow:visible}
html[lang="en"][data-title-study="i"] .i-title-art .outline{fill:none;stroke:#fff6e7;stroke-width:6;stroke-linejoin:round;paint-order:stroke}
html[lang="en"][data-title-study="i"] .i-title-art .solid{fill:#fff6e7}
html[lang="en"][data-title-study="i"] .i-title-art .serif{font-family:"Bodoni 72","Didot","Times New Roman",serif;font-style:italic}
html[lang="en"][data-title-study="i"] .i-title-art .sans{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900}
html[lang="en"][data-title-study="i"] .release-date{position:absolute;bottom:8svh;left:50%;margin:0;transform:translateX(-50%);white-space:nowrap}
@media(max-width:700px){html[lang="en"][data-title-study="i"] .release-date{bottom:12svh}}

@keyframes title-glyph-arrive{
  from{opacity:0;transform:translate(var(--fly-x,0px),var(--fly-y,0px)) rotate(var(--fly-r,0deg)) scale(.72)}
  to{opacity:1;transform:none}
}
@keyframes title-art-arrive{
  from{opacity:0;transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--fly-r))}
  25%{opacity:1}
  62%{transform:translate(var(--bend-x),var(--bend-y)) rotate(var(--bend-r))}
  to{opacity:1;transform:none}
}
#film-title.language-arrival .jp-glyph,
#film-title.language-arrival .i-arrival{
  animation:title-glyph-arrive 780ms cubic-bezier(.18,.78,.27,1) both;
  animation-delay:calc(var(--order) * 18ms);
  transform-origin:center;
  transform-box:fill-box;
}
html[lang="en"][data-title-study="i"] #film-title.language-arrival{transition:none}
html[lang="en"][data-title-study="i"] #film-title.language-arrival .i-arrival{
  animation:title-art-arrive var(--arrival-duration) cubic-bezier(.16,.7,.24,1) both;
  animation-delay:var(--arrival-delay);
}
#film-title.language-arrival .jp-glyph:nth-child(odd){--fly-x:-45px;--fly-y:40px;--fly-r:-13deg}
#film-title.language-arrival .jp-glyph:nth-child(even){--fly-x:50px;--fly-y:-50px;--fly-r:11deg}
@media(prefers-reduced-motion:reduce){
  #film-title.language-arrival .jp-glyph,
  #film-title.language-arrival .i-arrival{animation:none}
}