/* First focused iteration: metadata placement and intro colour only. */
.immersive-case{--editorial-label-size:12px;--overlay-caption-bottom:min(24px,var(--gutter))}
.immersive-case>header,
.immersive-case .fileline,
.immersive-case .opening{
  --ink:#fff;
  --paper:#111;
  color:var(--ink);
  background:var(--paper);
}
.immersive-case .fileline{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  isolation:isolate;
}
.immersive-case .fileline>span:nth-child(2){text-align:center}
.immersive-case .fileline>time{text-align:right;text-transform:uppercase;white-space:nowrap}
.immersive-case .opening{position:relative;isolation:isolate;padding-block:88px}
.immersive-case .fileline::after,
.immersive-case .opening::before{
  content:"";
  position:absolute;
  inset-block:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background:var(--paper);
  pointer-events:none;
}
.immersive-case .opening .byline a[href="#credits"]{background:var(--paper);color:var(--ink)}
.immersive-case .opening .byline a[href="#credits"]:hover,
.immersive-case .opening .byline a[href="#credits"]:focus-visible,
.immersive-case .opening .credit-link:hover,
.immersive-case .opening .credit-link:focus-visible{background:var(--ink);color:var(--paper)}
.immersive-case>header a:focus-visible,
.immersive-case .opening a:focus-visible{outline-color:var(--ink)}

/* Keep reading progress below the fixed header, as on the other pages. */
.immersive-case>header{--progress-track:rgba(255,255,255,.2);border-bottom-color:transparent}
.immersive-case>header.is-light-section{--ink:#111;--paper:#fff;--progress-track:rgba(17,17,17,.18)}
.immersive-case>header .reading-progress{top:auto;bottom:calc(-1 * var(--primary-rule));background:var(--progress-track);opacity:1}
.immersive-case>header .reading-progress::-webkit-progress-bar{background:transparent}

/* Keep the introduction on the left and group project details on the right. */
.immersive-case .opening .intro{
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px);
}
.immersive-case .intro-details{min-width:0}
.immersive-case .intro-details .project-meta{width:100%;max-width:none;margin-top:0}
.immersive-case .intro-details .project-meta dl>div{grid-template-columns:minmax(100px,.85fr) minmax(0,1.5fr);border-bottom-color:rgba(255,255,255,.22)}
.immersive-case .opening .metadata-filter{text-decoration:underline;text-underline-offset:3px}
.immersive-case .opening .metadata-filter:hover,
.immersive-case .opening .metadata-filter:focus-visible{background:var(--ink);color:var(--paper);text-decoration:none}
.immersive-case .intro-details .byline{margin-top:24px;text-align:left;justify-self:start}
@media(max-width:700px){
  .immersive-case .opening{padding-block:56px}
  .immersive-case .opening .intro{grid-template-columns:1fr;gap:30px}
  .immersive-case .intro-details .project-meta dl>div{grid-template-columns:110px minmax(0,1fr)}
}

/* Reuse this class on photographs that should span the browser width. */
.immersive-case .full-width-image{
  position:relative;
  left:50%;
  width:100vw;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  transform:translateX(-50%);
  isolation:isolate;
}
.immersive-case .full-width-image::before{content:none}
.immersive-case .full-width-image>img{display:block;width:100%;height:auto}
.immersive-case .full-width-image::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:clamp(80px,18%,180px);
  background:linear-gradient(transparent,rgba(0,0,0,.55));
  pointer-events:none;
}
.immersive-case .full-width-image>figcaption{
  position:absolute;
  z-index:1;
  left:var(--gutter);
  right:var(--gutter);
  bottom:var(--overlay-caption-bottom);
  padding:0;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* Opening photograph: metadata stays at the top; project lettering parts
   with native scrolling, revealing the image before the introduction. */
.case-cover{
  --cover-progress:0;
  --mask-top:0%;
  --mask-right:0%;
  --mask-bottom:0%;
  --mask-left:0%;
  --cover-height:calc(100svh - var(--header-height));
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:var(--cover-height);
  min-height:400px;
  background:#111;
  color:#fff;
}
.cover-stage{position:relative;height:var(--cover-height);min-height:400px;overflow:hidden;isolation:isolate}
.immersive-case .cover-stage .full-width-image{left:0;width:100%;height:100%;transform:none;clip-path:inset(var(--mask-top) var(--mask-right) var(--mask-bottom) var(--mask-left))}
.immersive-case .cover-stage .full-width-image>img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
.immersive-case .cover-stage .full-width-image>figcaption{
  left:calc(var(--mask-left) + var(--gutter));
  right:calc(var(--mask-right) + var(--gutter));
  bottom:calc(var(--mask-bottom) + var(--overlay-caption-bottom));
}
.immersive-case .cover-stage .full-width-image::after{bottom:var(--mask-bottom)}
.immersive-case .cover-stage .full-width-image::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:180px;
  border:0;
  transform:none;
  width:100%;
  background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.25) 50%,transparent);
  pointer-events:none;
}
.immersive-case .cover-stage .fileline{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  margin:0;
  padding:15px max(var(--gutter),calc((100vw - var(--page-max))/2 + var(--gutter)));
  border:0;
  background:transparent;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.immersive-case .cover-stage .fileline::before,
.immersive-case .cover-stage .fileline::after{content:none}
.cover-lettering{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-family:var(--heading),Arial,sans-serif;
  /* Footer outline: 5745 units wide, drawn from this same 1000-unit Trim
     font. Match its scale across the shared page width and gutters. */
  font-size:calc((min(100vw, var(--page-max)) - var(--gutter) - var(--gutter)) / 5.745);
  line-height:.87;
  letter-spacing:-.035em;
  pointer-events:none;
}
.cover-lettering>span{display:block;padding-inline:var(--gutter);white-space:nowrap}
.cover-lettering>span:last-child{text-align:right}
.cover-motion .case-cover{
  height:calc(var(--cover-height) + 60svh);
  --mask-top:calc(12% * (1 - var(--cover-progress)));
  --mask-right:calc(8% * (1 - var(--cover-progress)));
  --mask-bottom:calc(14% * (1 - var(--cover-progress)));
  --mask-left:calc(28% * (1 - var(--cover-progress)));
}
.cover-motion .cover-stage{position:sticky;top:var(--header-height)}
.cover-motion .cover-lettering>span:first-child{transform:translateX(calc(var(--cover-progress) * -105%))}
.cover-motion .cover-lettering>span:last-child{transform:translateX(calc(var(--cover-progress) * 105%))}
@media(max-width:700px){
  .cover-lettering{line-height:.95}
  .cover-motion .case-cover{height:calc(var(--cover-height) + 45svh)}
  .cover-motion .case-cover{--mask-left:calc(18% * (1 - var(--cover-progress)))}
}
@media(prefers-reduced-motion:reduce){
  .cover-motion .case-cover{height:var(--cover-height);--mask-top:0%;--mask-right:0%;--mask-bottom:0%;--mask-left:0%}
  .cover-motion .cover-stage{position:relative;top:auto}
  .cover-motion .cover-lettering>span{transform:none}
}
@media print{
  .case-cover,.cover-motion .case-cover,.cover-stage{height:75vh;min-height:0}
  .cover-motion .case-cover{--mask-top:0%;--mask-right:0%;--mask-bottom:0%;--mask-left:0%}
  .cover-motion .cover-stage{position:relative;top:auto}
  .cover-motion .cover-lettering>span{transform:none}
}

/* A small, selectable object study alongside the existing editorial copy. */
.object-section,.material-section,.photography-section,.perspective-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:24px;align-items:start;padding-block:64px}
.object-section>aside,.material-section>aside,.photography-section>aside,.perspective-section>aside{grid-column:1 / -1}
.object-section>h2,.material-section>h2,.photography-section>h2,.perspective-section>h2{grid-column:1;font-size:28px;line-height:1.08;letter-spacing:-.025em;margin:0}
.material-section>.prose,.photography-section>.prose,.perspective-section>.prose{grid-column:2;grid-row:2}
.photography-chapter{--paper:#111;--ink:#fff;position:relative;isolation:isolate;background:var(--paper);color:var(--ink);margin-top:64px}
.photography-chapter::before{content:"";position:absolute;inset-block:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--paper);z-index:-1}
.photography-chapter .film-controls{border-color:rgba(255,255,255,.22)}
.photography-chapter .film-controls button:hover{background:var(--ink);color:var(--paper)}
.photography-chapter .film-controls button:focus-visible,.photography-chapter .film-controls input:focus-visible,.photography-chapter .case-film-overlay:focus-visible{outline-color:var(--ink)}
.photography-chapter .film-seek{accent-color:var(--ink);height:28px;background:linear-gradient(to right,#fff 0%,#fff var(--film-progress,0%),#737373 var(--film-progress,0%),#737373 100%) center/100% 2px no-repeat}
.photography-chapter .film-seek::-webkit-slider-runnable-track{height:2px}
.photography-chapter .film-seek::-webkit-slider-thumb{width:7px;height:14px;margin-top:-6px;background:#fff;border:0;border-radius:0}
.photography-chapter .film-seek::-moz-range-track{height:2px}
.photography-chapter .film-seek::-moz-range-thumb{width:7px;height:14px;background:#fff;border:0;border-radius:0}
.photography-chapter+.visitor-gallery{padding-top:64px}
.immersive-case .visitor-gallery{padding-bottom:64px}
.immersive-case .gallery-heading>p{font-size:var(--editorial-label-size);margin:0 0 24px}
.perspective-section{position:relative}
.perspective-section::before{content:"";position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);border-top:var(--primary-rule) solid var(--ink);pointer-events:none}
.immersive-case .credits{row-gap:24px}
.immersive-case .credits>aside{grid-column:1 / -1;font-size:var(--editorial-label-size)}
.immersive-case .credit-groups dd{font-size:var(--editorial-credit-size)}
/* Match the existing CMS thumbnail hover and keyboard-focus treatment. */
.visitor-window{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);overscroll-behavior-x:contain}
.visitor-window:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
.visitor-track{display:flex;align-items:flex-start;gap:24px;width:max-content;padding-right:var(--gutter)}
.visitor-track>figure{flex:none;width:min(85vw,520px);scroll-snap-align:start}
.visitor-track img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.visitor-track figcaption{display:block;padding:12px 0 0;font-size:var(--editorial-label-size)}
@media screen and (min-width:701px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
  .visitor-motion .visitor-gallery{--visitor-image-height:calc(100svh - var(--header-height) - 252px);height:calc(100svh - var(--header-height) + var(--visitor-scroll-distance,0px));padding:0}
  .visitor-motion .visitor-stage{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));padding-block:64px 32px}
  .visitor-motion .visitor-window{overflow:clip;scroll-snap-type:none;margin-left:var(--gutter);padding-left:0}
  .visitor-motion .visitor-track{transform:translateX(var(--visitor-shift,0px))}
  .visitor-motion .visitor-track>figure{width:calc(var(--visitor-image-height) * .8)}
  .visitor-motion .visitor-track img{height:var(--visitor-image-height);width:100%}
}
@media print{
  .visitor-window{overflow:visible}
  .visitor-track{width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .visitor-track>figure{width:auto}
}
.factory-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0 var(--gutter) 64px}
.factory-images figure{min-width:0;margin:0}
.factory-images img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.factory-images>figure:nth-child(2) img{object-position:15% center}
.factory-images figcaption{padding:12px 0 0}

/* The film takes over from the lettering within ordinary page scrolling. */
.film-scene{--film-progress:0;position:relative}
.film-stage{position:relative;padding:64px var(--gutter) 0}
.film-section-label{font-size:var(--editorial-label-size);text-transform:uppercase;margin:0 0 40px}
.film-lettering{font-family:var(--heading),Arial,sans-serif;font-size:calc((min(100vw,var(--page-max)) - var(--gutter) - var(--gutter)) / 5.745);font-weight:400;line-height:.9;letter-spacing:-.035em;margin:0 0 40px}
.film-stage .case-film{position:relative;margin:0 auto;width:100%}
.film-stage .case-film video{aspect-ratio:1468/1080;object-fit:contain}
@media screen and (min-width:701px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  .film-motion .film-scene{height:calc(180svh - var(--header-height))}
  .film-motion .film-stage{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));padding:80px var(--gutter) 28px;display:flex;align-items:center;justify-content:center;overflow:clip}
  .film-motion .film-section-label{position:absolute;top:32px;left:var(--gutter);margin:0}
  .film-motion .film-lettering{position:absolute;left:var(--gutter);top:50%;width:calc(100% - var(--gutter) * 2);margin:0;white-space:nowrap;transform:translate(calc(var(--film-progress) * -110vw),-50%);pointer-events:none}
  .film-motion .film-stage .case-film{width:min(100%,calc((100svh - var(--header-height) - 180px) * 1468 / 1080));flex-shrink:0;transform:translateX(calc((1 - var(--film-progress)) * 48vw)) scale(calc(.62 + var(--film-progress) * .38));transform-origin:center}
  .film-motion .film-stage:focus-within .case-film{transform:none}
  .film-motion .film-stage:focus-within .film-lettering{visibility:hidden}
}
@media(max-width:700px){
  .film-stage{padding-top:56px}
  .factory-images{grid-template-columns:1fr;gap:32px;padding-bottom:56px}
}
.film-stage .case-film:fullscreen{transform:none;width:100%;background:#111;display:flex;flex-direction:column;justify-content:center}
.film-stage .case-film:fullscreen video{max-height:calc(100vh - 110px)}
.material-details{grid-template-columns:repeat(3,minmax(0,1fr))}
@media screen and (min-width:701px) and (prefers-reduced-motion:no-preference){
  .material-details>img:first-of-type{transform:translateY(calc(-1 * var(--material-first-offset,0px)))}
  .material-details>img:nth-of-type(2){transform:translateY(calc(-1 * var(--material-second-offset,0px)))}
  .material-details>img:last-of-type,.material-details>figcaption{transform:translateY(var(--material-third-offset,0px))}
  .factory-images>figure:first-child{transform:translateY(calc(-1 * var(--material-first-offset,0px)))}
  .factory-images>figure:nth-child(2){transform:translateY(calc(-1 * var(--material-second-offset,0px)))}
  .factory-images>figure:last-child{transform:translateY(var(--material-third-offset,0px))}
}
.object-gallery{grid-column:1}
.object-section>.prose{grid-column:2;grid-row:3}
.object-images{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--grey)}
.object-images img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.object-images img:first-child{object-fit:cover}
.object-images img[hidden]{display:none}
.object-controls:not([hidden]){display:flex;gap:8px;margin-top:12px}
.object-controls button{border:1px solid var(--ink);border-radius:0;background:var(--paper);padding:10px 14px;font-size:var(--editorial-label-size);line-height:1.4;text-transform:uppercase;color:var(--ink)}
.object-controls button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.object-controls button[aria-pressed="false"]:hover{background:var(--grey)}
.object-controls button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.object-gallery figcaption{padding:12px 0 0;line-height:1.4}
@media(max-width:700px){
  .object-section,.material-section,.photography-section,.perspective-section{grid-template-columns:minmax(0,1fr);padding-block:56px}
  .material-section>.prose,.photography-section>.prose,.perspective-section>.prose{grid-column:1;grid-row:auto}
  .photography-chapter{margin-top:56px}
  .photography-chapter+.visitor-gallery{padding-top:56px}
  .immersive-case .visitor-gallery{padding-bottom:56px}
  .material-details{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .object-section>.prose{grid-column:1;grid-row:auto;margin-top:8px}
}

.object-displacement{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.object-displacement[hidden]{display:none}