/* A single editorial field: subject, practice, navigation and research stream. */
.most6-home .opening {
  position:relative; isolation:isolate; overflow:clip; min-height:max(740px,100svh); height:auto;
  color:#fff; background:#151515; --opening-scroll:0;
}
.opening-images { position:absolute; inset:0; z-index:0; }
/* Cut the photograph and its reading preset on the same committed frame. A
   crossfade would show the previous photograph under the new caption/layout. */
.opening-slide { position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; }
.opening-slide.is-current { opacity:1; visibility:visible; }
.opening-slide img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--position); transform:translateY(calc(var(--opening-scroll) * 35px)) scale(1.04); }
.opening::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,var(--opening-shade,.4)); }
.opening-composition { position:relative; z-index:2; min-height:inherit; height:auto; padding:clamp(130px,16vh,190px) var(--gutter) 120px; display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto 1fr auto; column-gap:7vw; row-gap:30px; align-items:end; }
.opening-title { grid-column:1/-1; align-self:start; }
.opening-eyebrow { margin:0 0 18px; font-size:14px; font-weight:500; line-height:1.4; letter-spacing:.015em; }
.opening h1 { margin:0; font-weight:500; line-height:.94; letter-spacing:-.065em; color:inherit; }
.opening h1 span { display:block; margin-bottom:9px; font-size:clamp(40px,4.7vw,84px); font-weight:400; }
.opening h1 strong { display:block; font-size:clamp(76px,11.8vw,210px); font-weight:500; }
.opening-argument { grid-column:2; grid-row:2; align-self:center; max-width:32rem; margin-left:auto; }
.opening-argument > p { font-size:var(--most6-body-size); line-height:1.85; margin:0; }
.opening-inquiry { display:flex; align-items:center; gap:28px; width:fit-content; min-height:48px; margin-top:12px; font-size:14px; }
.opening-inquiry span { font-size:32px; transition:transform .2s; }
.opening-inquiry:hover span { transform:translate(4px,4px); }
.opening-project { grid-column:1; grid-row:3; max-width:36rem; }
.opening-project .opening-eyebrow { display:flex; gap:25px; margin-bottom:12px; }
.opening-project > a { display:block; width:fit-content; font-size:clamp(20px,2.1vw,36px); font-weight:500; line-height:1.25; letter-spacing:-.025em; }
.opening-project > a:hover { text-decoration:underline; text-underline-offset:5px; }
.opening-project > [data-opening-credit] { font-size:14px; min-height:21px; margin:12px 0 0; }
/* Pentagram's white dot pagination; one compact pause control retains user control.
   Keep the old desktop row height so the headline and copy do not move. */
.opening-navigation { grid-column:2; grid-row:3; align-self:end; margin-left:auto; width:min(100%,400px); min-height:106px; display:flex; align-items:flex-end; justify-content:flex-end; gap:18px; }
.opening-sequence { display:flex; gap:0; }
.opening-sequence button { display:grid; place-items:center; flex:none; width:24px; height:44px; padding:0; background:none; border:0; color:inherit; opacity:.5; }
.opening-sequence button[aria-pressed=true],.opening-sequence button:hover { opacity:1; }
.opening-sequence button::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:currentColor; }
.opening-transport { display:flex; align-items:center; justify-content:flex-end; height:44px; }
.opening-transport [data-opening-toggle] { display:grid; place-items:center; width:24px; height:24px; padding:0; background:none; border:1px solid currentColor; border-radius:50%; color:inherit; font-family:"Inter","Noto Sans JP",sans-serif; font-size:11px; line-height:1; }
.opening-stream { position:absolute; inset:auto 0 0; display:flex; height:64px; background:#ff5f43; color:#0a0a0a; border:0; z-index:3; }
.opening-stream-window { flex:1; overflow:hidden; display:flex; align-items:center; min-width:0; }
.opening-track { display:flex; width:max-content; flex:none; font-size:clamp(17px,1.5vw,25px); line-height:1; font-weight:600; letter-spacing:-.015em; }
.opening-period { flex:none; white-space:pre; }
.opening-scroll { display:flex; gap:25px; align-items:center; padding:0 var(--gutter); border-left:1px solid #0a0a0a; flex:none; font-size:14px; }
.opening-scroll > span:last-child { font-size:32px; transition:transform .3s; }
.opening-scroll:hover > span:last-child { transform:translateY(5px); }
.opening-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.opening :focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.most6-home #research { scroll-margin-top:0px; }
html { scroll-behavior:smooth; }
@media(min-width:1800px) { .opening-composition { grid-template-columns:1fr 1fr; } .opening-argument { margin-left:0; } }
@media(max-width:1199px) {
  /* Koto and Studio.Build deliberately change the narrow composition instead
     of scaling a desktop grid. Keep the subject as two complete English lines;
     stack the explanation and project before they can collide. */
  .most6-home .opening { min-height:100svh; height:auto; }
  .opening-composition { min-height:100svh; height:auto; padding:112px var(--gutter) 94px; display:flex; flex-direction:column; align-items:stretch; gap:22px; }
  .opening-title { flex:none; }
  .opening h1 span { font-size:clamp(34px,5.6vw,48px); }
  .opening h1 strong { font-size:13.5vw; white-space:nowrap; }
  .opening-argument { max-width:34rem; margin:0 0 auto; }
  .opening-project { max-width:38rem; margin-top:16px; }
  .opening-project > a { font-size:24px; text-wrap:balance; }
  .opening-navigation { width:100%; min-height:44px; margin:0; gap:18px; align-items:center; }
  .opening-stream { height:56px; }
}
@media(max-width:600px) {
  .opening-composition { padding:104px var(--gutter) 82px; gap:20px; }
  .opening h1 span { font-size:clamp(30px,8.5vw,42px); }
  .opening h1 strong { font-size:16.5vw; letter-spacing:-.06em; }
  .opening-title .opening-eyebrow { font-size:12px; margin-bottom:18px; }
  .opening-argument { max-width:27rem; }
  .opening-argument > p { max-width:28em; }
  .opening-inquiry { margin-top:4px; }
  .opening-project { margin-top:12px; }
  .opening-project > a { font-size:clamp(20px,5.4vw,26px); }
  .opening-project .opening-eyebrow { margin-bottom:6px; }
  .opening-project > [data-opening-credit] { margin-top:6px; font-size:12px; }
  /* Twelve photos: preserve the simple dot form, with 6px of visible spacing.
     This compact width is a Most adaptation, not a measured mobile reference. */
  .opening-sequence button { width:18px; }
  .opening-sequence button::after { width:12px; height:12px; }
  .opening-stream { height:50px; }
  .opening-scroll { padding:0 18px; gap:0; }
  .opening-scroll > span:first-child { display:none; }
  .opening-slide img { object-position:var(--mobile-position,var(--position)); }
}
@media(max-width:600px) and (max-height:740px) {
  .opening-composition { padding-top:96px; padding-bottom:73px; gap:14px; }
  .opening-title .opening-eyebrow { margin-bottom:12px; }
  .opening h1 span { font-size:30px; }
  .opening h1 strong { font-size:16vw; }
  .opening-argument { margin-top:0; }
  .opening-argument > p { line-height:1.6; }
  .opening-project { margin-top:0; }
  .opening-project > a { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .opening-slide,.opening-slide img,.opening-inquiry span,.opening-scroll span { transition:none; transform:none; } }
html[data-motion-preference=reduce] { scroll-behavior:auto; }
html[data-motion-preference=reduce] .opening-slide img { transform:none; }