/* A still photographic canvas; scroll changes opacity only. */
.coating-story{background:var(--ink);text-align:center;position:relative}
.coating-intro{padding:clamp(100px,12vw,180px) 24px 80px;max-width:900px;margin:auto}
.coating-intro h2{margin:0 auto 32px;font-size:clamp(3rem,6.7vw,7rem)}
.coating-intro>p{max-width:660px;margin:0 auto;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.75;color:#c4c8cb}
.coat-skip{display:inline-block;margin-top:24px;padding:8px;color:#b9bec2;font-size:.8125rem;text-decoration:underline;text-underline-offset:5px}
.coat-scroll{height:900vh;height:900svh;position:relative}
.coat-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:78px 0 24px}
.coat-photo{position:relative;isolation:isolate;flex:none;width:min(78vw,1400px,calc((100svh - var(--coat-reserve,300px))*1.333333));aspect-ratio:4/3;margin:0 auto 22px;background:#777579;overflow:hidden}
.coat-frame{position:absolute;inset:0;pointer-events:none;mix-blend-mode:plus-lighter;will-change:opacity}
.coat-frame img{position:absolute;width:var(--frame-width);max-width:none;height:auto;left:var(--frame-x);top:var(--frame-y);user-select:none}
/* The desaturation is fixed per photograph: gloss and clear-coat highlights stay intact. */
.coat-steel-blue{filter:saturate(.68)}
.coat-captions{display:grid;flex:none;width:min(680px,85vw);min-height:124px}
.coat-caption{grid-area:1/1;pointer-events:none;align-self:start}
.coat-number{display:block;font-size:.75rem;font-weight:500;letter-spacing:.22em;color:#b7bdc2;line-height:1.5}
.coat-caption h3{font-family:Impact,"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-size:clamp(1.7rem,2.5vw,2.5rem);font-weight:700;line-height:1.08;letter-spacing:.025em;margin:9px 0 12px}
.coat-caption p{max-width:620px;font-size:1rem;line-height:1.55;color:#c4c8cb;margin:0 auto}
.coat-progress{width:min(520px,84vw);margin-top:20px;flex:none}
.coat-progress-line{height:1px;background:#424a50;overflow:hidden}
.coat-progress-line span{display:block;width:0;height:100%;background:#d0d3d4}
.coat-progress ol{display:flex;justify-content:space-between;list-style:none;padding:10px 0 0;margin:0}
.coat-progress li{font-size:.75rem;font-variant-numeric:tabular-nums;color:#747e86;line-height:1.5}
.coat-progress li[data-past]{color:#a1a9af}
.coat-progress li[aria-current]{color:var(--paper);font-weight:700}
.coat-progress li[aria-current] span{display:inline-block;transform:scale(1.12)}
.coat-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.coat-outro{height:38vh;height:38svh}
.coat-static{max-width:1100px;margin:auto;padding:0 20px}.coat-static figure{margin:0 0 80px}.coat-static p{line-height:1.6}
@media(max-width:700px){
 .coating-intro{padding:100px 22px 60px}.coating-intro h2{font-size:clamp(2.6rem,10vw,4rem)}
 .coat-scroll{height:1150vh;height:1150svh}
 .coat-sticky{padding-top:66px;padding-bottom:24px}
 .coat-photo{width:min(95vw,calc((100svh - var(--coat-reserve,285px))*1.333333));margin-bottom:24px}
 .coat-captions{min-height:150px;width:85vw}
 .coat-caption h3{font-size:clamp(1.55rem,6vw,2rem);margin:9px 0 12px}
 .coat-progress{margin-top:18px}.coat-outro{height:30svh}
}
@media(max-height:560px) and (orientation:landscape){
 .coat-sticky{padding-top:64px;padding-bottom:12px}
 .coat-photo{width:min(54vw,calc((100svh - var(--coat-reserve,220px))*1.333333));margin-bottom:12px}
 .coat-captions{min-height:94px;width:85vw}.coat-caption h3{font-size:1.3rem;margin:4px 0}.coat-caption p{font-size:.875rem;line-height:1.35}
 .coat-progress{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.coat-frame{will-change:auto}}
/* A short/tall-text viewport remains scrollable instead of clipping the caption. */
.coat-scroll.coat-natural{height:auto}.coat-natural .coat-sticky{position:relative;height:auto;min-height:100svh}.coat-natural .coat-photo{width:min(95vw,900px)}
.coat-composite{position:absolute;inset:0;isolation:isolate}
/* Shared studio surround stays still; this feathered crop retains the tank and contact shadow. */
.coat-photo{background:linear-gradient(180deg,#79787a 0%,#777679 70%,#858386 100%)}
.coat-frame{-webkit-mask-image:url('/assets/tank-sequence/frame-mask.svg');mask-image:url('/assets/tank-sequence/frame-mask.svg');-webkit-mask-size:100% 100%;mask-size:100% 100%}