/* Every eight uses the same upright display type as the page. */
.identity b { width: auto; height: auto; overflow: visible; color: var(--paper); background: none; mask: none; }
.opening,html[data-motion="full"] .opening { height: 185svh; position: relative; }
.opening-stage { height: 100svh; min-height: 520px; position: sticky; top: 0; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 48%,#1b2021 0%,#101415 36%,var(--ink) 72%); }
.opening-art { position: absolute; left: 4%; top: -7%; width: 58%; height: 118%; opacity: .72; display: flex; align-items: center; justify-content: center; }
.opening-art .display { font-size: 116svh; line-height: 1; color: #1c2021; -webkit-text-stroke: 1px #ffffff18; }
.face-stage { position: absolute; inset: 0; mask-image: linear-gradient(#000 0%,#000 72%,transparent 100%); }
.face-placement { position: absolute; left: 50%; top: 46%; width: min(66vw,78svh); transform: translate(-49.2%,-33.6%); transform-origin: 49.2% 33.6%; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(#000 0%,#000 73%,transparent 100%); mask-composite: intersect; }
.face-edge { width: 100%; height: auto; filter: brightness(.88) saturate(.9); }
.face-detail { position: absolute; inset: 0; mask-image: radial-gradient(ellipse 19% 25% at 49% 41.5%,#000 87%,transparent 100%),linear-gradient(0deg,#000 0%,#000 26%,transparent 34%); }
.face-detail img { width: 100%; height: 100%; mask: url('assets/v4-face-mask.png') center / 100% 100% no-repeat; mask-mode: luminance; }
.helmet-stage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; }
html[data-motion="full"] .helmet-stage { opacity: 1; }
.helmet-photo { filter: saturate(.82) brightness(.83); }
.opening-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,var(--ink),transparent 24%,transparent 82%,#0c0e0f88),linear-gradient(90deg,#0c0e0f55,transparent 20%,transparent 80%,#0c0e0f55); }
.opening-name { z-index: 4; bottom: 5.5%; gap: 0; }
.opening-name>span.display { display: block; font-size: clamp(34px,4.6vw,72px); line-height: .98; max-width: none; color: var(--paper); }
.introduction { min-height: 105svh; padding-top: calc(var(--header) + 30px); padding-bottom: 100px; background: var(--ink); }
.preparation-atmosphere { position: absolute; z-index: -2; inset: -5% -3%; background: url('assets/v4-preparation-atmosphere.webp') 65% center / cover no-repeat; opacity: .34; filter: saturate(.5); mask-image: linear-gradient(90deg,transparent,#000 40%,#000 76%,transparent),linear-gradient(transparent,#000 18%,#000 68%,transparent); mask-composite: intersect; }
.preparation-atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0c0e0fb8,transparent 62%),linear-gradient(0deg,var(--ink),transparent 40%); }
.preparation-image { inset: 8% -9% 0 16%; }
.preparation-image img { filter: saturate(.88); mask-image: linear-gradient(#000 0%,#000 calc(100% - 100px),transparent 100%); }
.name { font-size: clamp(100px,15.5vw,260px); }
.intro-bottom { margin-top: 46px; gap: 30px; }
.intro-eight { flex-shrink: 0; font-size: clamp(105px,11.5vw,178px); line-height: .95; color: var(--orange); }
.intro-bottom p { font-size: clamp(18px,1.8vw,28px); }
.orange-rule { margin-bottom: 16px; }
.track-section,html[data-motion="full"] .track-section { scroll-margin-top: calc(-1 * var(--header)); height: auto; margin-top: -28px; z-index: 2; background: transparent; }
.track-sticky,html[data-motion="full"] .track-sticky { position: relative; height: calc(56.25vw + 95px); min-height: 0; max-height: 110svh; }
.track-frame { background: transparent; }
.track-frame video { position: absolute; top: 0; width: 100%; height: auto; aspect-ratio: 16/9; mask-image: none; -webkit-mask-image: none; }
.track-frame::after { content: none; }
.track-title { bottom: 7%; font-size: clamp(90px,12.5vw,220px); }
.film-keyboard-control { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.film-keyboard-control:focus-visible { width: auto; height: auto; clip-path: none; bottom: 24px; right: var(--gutter); padding: 12px 18px; color: var(--paper); background: var(--ink); z-index: 5; }
.story { position: relative; padding-block: 70px 85px; align-items: center; gap: 8vw; grid-template-columns: .9fr 1.1fr; }
.story-marker { display: flex; justify-content: center; padding: 0; }
.story-marker>span { display: block; margin: 0; font-size: clamp(280px,38vw,550px); line-height: .95; color: #202526; -webkit-text-stroke: 1px #ffffff1a; }
.story-copy p:last-child { margin-bottom: 0; }
.jaguar { padding-top: 100px; border-top: 1px solid var(--line); }
.jaguar h2 { margin-top: 0; }
.footer-bottom { gap: 28px; }
.footer-bottom .motion-toggle { margin-left: auto; }

/* Mobile keeps the gaze transition but shortens its travel. Photography remains wide. */
@media (max-width:1000px) and (min-width:701px) {
 .preparation-image { inset: 14% -42% 0 -17%; }
 .preparation-image img { height: auto; }
 .preparation-atmosphere { background-position: 60% center; opacity: .42; }
 .name { font-size: 15.5vw; }
 .intro-bottom { gap: 23px; }
}
@media (max-width:700px) {
 .identity b { width: auto; height: auto; }
 .opening,html[data-motion="full"] .opening { height: 165svh; }
 .opening-stage { min-height: 480px; }
 .opening-art { left: -24%; top: 1%; height: 95%; width: 115%; opacity: .72; }
 .face-placement { width: min(110vw,78svh); }
 .opening-name { bottom: 40px; }
 .opening-name>span.display { font-size: 34px; }
 .introduction { min-height: 110svh; padding-top: 100px; padding-bottom: 100px; }
 .name { font-size: 25vw; }
 .preparation-atmosphere { inset: 15% -70% 0 -40%; background-position: 55% center; opacity: .4; }
 .preparation-image { inset: 25% -42% 0 -68%; }
 .preparation-image img { position: absolute; bottom: 0; height: auto; }
 .intro-bottom { margin-top: clamp(310px,45svh,400px); gap: 22px; align-items: center; }
 .intro-eight { font-size: 104px; }
 .intro-bottom p { font-size: 17px; padding: 0; }
 .track-section,html[data-motion="full"] .track-section { margin-top: -16px; }
 .track-sticky,html[data-motion="full"] .track-sticky { height: calc(56.25vw + 230px); min-height: 0; max-height: none; }
 .track-frame video { top: 0; }
 .track-title { bottom: 10%; font-size: 21vw; flex-direction: column; gap: 0; }
 .story { padding-top: 30px; padding-bottom: 80px; }
 .story-marker { display: none; }
 .jaguar { padding-top: 65px; }
 .footer-bottom { gap: 20px; }
}
@media (max-height:700px) and (min-width:701px) {
 .opening-stage { min-height: 0; }
 .opening-name>span.display { font-size: 32px; }
 .introduction { min-height: 760px; }
 .preparation-image img { height: 100%; object-fit: cover; }
 .track-sticky,html[data-motion="full"] .track-sticky { max-height: none; }
}
html:not([data-motion="full"]) .opening { height: 100svh; }
html:not([data-motion="full"]) .opening-stage { position: relative; }
html[data-motion="reduced"] .helmet-stage { display: none; }
@media (prefers-reduced-motion:reduce) {
 .opening,html[data-motion="full"] .opening { height: 100svh; }
 .opening-stage { position: relative; }
 .helmet-stage { display: none; }
}

/* A quieter reading rhythm between the photographic sections. */
.story-copy p:not(.lead) { font-weight: 400; }
.story-copy .lead { font-weight: 600; }
.between { padding-block: 90px 100px; }
.between-heading h2 { font-size: clamp(68px,9vw,148px); }
.between-layout { min-height: 350px; padding-top: 70px; }
.candid-photo img { object-position: 60% top; }
.between-copy p { font-size: clamp(21px,1.85vw,28px); font-weight: 400; line-height: 1.5; }
.jaguar { padding-block: 90px 100px; }
.jaguar-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7vw; align-items: center; margin-bottom: 60px; }
.jaguar .jaguar-heading h2 { font-size: clamp(76px,11vw,176px); margin: 0; }
.jaguar-brand { width: clamp(160px,17vw,230px); height: auto; filter: invert(1); mix-blend-mode: screen; opacity: .9; }
.jaguar-body { gap: 8vw; }
.jaguar-statement { font-size: clamp(22px,2vw,30px); font-weight: 400; line-height: 1.5; }
.jaguar blockquote { border-left-width: 2px; }
.jaguar blockquote p { font-size: clamp(21px,1.85vw,28px); font-weight: 400; line-height: 1.5; }
.footer { padding-top: 80px; }
.footer h2 { margin-block: 32px 40px; }
@media (max-width:700px) {
 .opening-art .display { font-size: 103svh; }
 .between { padding-block: 60px 70px; }
 .between-heading h2 { font-size: 12.7vw; }
 .between-layout { padding-top: clamp(270px,40svh,350px); min-height: 0; }
 .between-copy p { font-size: 21px; }
 .candid-photo { inset: 115px 0 190px; }
 .jaguar { padding-block: 60px 70px; }
 .jaguar-heading { grid-template-columns: 1fr; gap: 36px; margin-bottom: 42px; }
 .jaguar .jaguar-heading h2 { font-size: 20vw; }
 .jaguar-brand { width: 145px; }
 .jaguar-body { gap: 32px; }
 .jaguar-statement { font-size: 23px; }
 .jaguar blockquote p { font-size: 21px; }
 .footer { padding-top: 60px; }
}
/* Mobile reads as one composition: name, portrait, then the Senna line. */
@media (max-width:700px) {
 .introduction { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; padding-bottom: 75px; }
 .intro-content { display: contents; }
 .name { grid-column: 1; grid-row: 1; }
 .preparation-image { position: relative; inset: auto; grid-column: 1; grid-row: 2; width: 100%; height: clamp(380px,110vw,470px); margin-top: 48px; }
 .preparation-image img { width: 230%; max-width: none; left: -80%; bottom: -6%; }
 .intro-bottom { grid-column: 1; grid-row: 3; margin-top: -15px; }
}

/* V7 — the garage is the section's architecture, with the subject unobscured. */
.between {
  min-height: max(800px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 100px var(--gutter) 72px;
}
.between .candid-photo { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: clip; }
.between .candid-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%;
  opacity: 1; filter: saturate(.9); mask: none;
}
.between .candid-photo::after {
  background: linear-gradient(90deg, transparent 52%, #07090b6e 100%), #07090b1a;
}
.between-heading { position: relative; z-index: 2; }
.between .between-heading h2 { font-size: clamp(68px, 9vw, 148px); text-shadow: 0 2px 32px #00000025; }
.between .between-layout { display: contents; min-height: 0; padding: 0; }
.between .between-copy {
  position: absolute; top: 100px; right: var(--gutter); z-index: 2;
  width: min(29vw, 430px); margin: 0; max-width: none;
}
.between .between-copy p { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.5; }
@media (max-width:1000px) and (min-width:701px) {
  .between { min-height: 900px; }
  .between .between-copy { width: 31vw; }
}
@media (max-width:700px) {
  .between { min-height: max(860px, 108svh); justify-content: flex-start; padding-top: 54px; padding-bottom: 50px; }
  .between .between-heading h2 { font-size: 12.7vw; }
  .between .candid-photo img { object-position: 40% top; }
  .between .candid-photo::after { background: linear-gradient(0deg, #080b0dd9, transparent 42%, transparent 78%, #080b0d66); }
  .between .between-copy { top: auto; bottom: 52px; left: var(--gutter); right: var(--gutter); width: auto; }
  .between .between-copy p { font-size: 21px; max-width: 30ch; }
}
@media (max-width:700px) {
  .between { justify-content: flex-end; padding-bottom: 310px; }
}