/* STORY SEAM: three parallax sections. Pairs with templates/story.html and js/story.js.
   Each layer's position is set in the template as custom properties (--x --y --w --h desktop, --mx --mt --mw --mh phone). */
.story{position:relative;overflow:hidden;background:var(--night)}
.stack{position:absolute;inset:0}
/* nothing hard-cuts at a section edge: the stack fades out over its first and last 80px */
.story .stack{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%)}
.story .layer{position:absolute;will-change:transform;left:var(--x);top:var(--y);width:var(--w);height:var(--h,auto)}
.plate{box-shadow:0 40px 60px -30px rgba(0,0,0,.6),0 12px 20px -12px rgba(0,0,0,.45)}
.plate img{width:100%;height:100%;object-fit:cover}
.story h2{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;letter-spacing:-.035em;line-height:.92;font-size:clamp(48px,6vw,88px)}
.story .copy{position:absolute;z-index:2;left:var(--cx);top:var(--cy);width:var(--cw)}
.story .copy p{margin-top:28px;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.story .copy p b{color:var(--ink);font-weight:500}
.story .copy p.pull{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font:700 28px/1.15 "Archivo",sans-serif;font-stretch:112%;letter-spacing:-.02em;color:var(--ink);max-width:20ch}
.story .copy p.shown{margin-top:22px;font-size:13px;line-height:1.5}
.story .copy .btn{margin-top:30px}
/* chapters: the numeral sits back in the headline, his chapter subtitle under it, then his words */
.story h2 .num{color:var(--ink-3)}
.story .copy p.sub{margin-top:16px;font:600 22px/1.25 "Archivo",sans-serif;font-stretch:112%;letter-spacing:-.01em;color:var(--ink-2);max-width:26ch}
.story .copy p.sub+p{margin-top:22px}
.story .copy .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.story .copy .row .btn{margin-top:0}
/* the chapter's quiet way on to the full text (chapter I has the one solid button) */
.story .copy .more{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;font-size:16px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ctl);text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;transition:text-decoration-color .2s ease}
.story .copy .more:hover{text-decoration-color:var(--ink)}
.story .copy .row .more{margin-top:0}

/* 1: cascade. The band is a slow loop of poured paint, darkened in the file itself (no live filter), fading on all four sides. */
.s1{height:max(150vh,1180px)}
.s1 .band{background:var(--night);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.s1 .band video{display:block;width:100%;height:auto;object-fit:cover}

/* 2: loupe split. The detail is the canvas at 1.6x (source 1013px wide shown at 1285px: the 1.6x of the earlier 815px frame), drifting inside its mask. */
.s2{height:max(110vh,900px)}
.s2 h2{font-size:clamp(44px,5.2vw,76px)}
.s2 .detail{overflow:hidden}
.story .detail img{position:absolute;width:1285px;height:auto;max-width:none;left:-366px;top:-530px;object-fit:fill;will-change:transform}
.story .detail img{filter:brightness(.5)}   /* the detail sits back so the map and the copy lead (as in the approved still) */
.s2 .map{position:relative;overflow:hidden}
.s2 .map img{height:auto}
.s2 .loupe{position:absolute;left:28.3%;top:32.1%;width:55.8%;height:41.7%;outline:1px solid var(--ink);box-shadow:0 0 0 999px rgba(0,0,0,.5)}

/* 3: centred pair over the dim studio photo, copy underneath */
.s3{height:calc(9vh + 56vh + 56px + 720px)}
.s3 .copy h2{max-width:13ch}
.s3 .studio{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,#000 45%,transparent 92%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,#000 45%,transparent 92%);mask-composite:intersect}
.s3 .studio img{width:100%;height:74vh;object-fit:cover;object-position:50% 30%;filter:brightness(.36) saturate(.8)}

/* reveal: one entrance (story 1 copy), from an already-visible default (no flash if JS dies) */
.js [data-reveal]{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.js [data-reveal].in{opacity:1;translate:0 0}

/* below 1100px (phones, tablets, small laptops): copy first, layers drop into normal flow (no absolute voids);
   overlaps come from negative margins, so no text can land on a painting. js/story.js turns parallax off at the same width. */
@media (max-width:1099px){
  .story h2,.s2 h2{font-size:clamp(48px,6vw,64px)}
  .s1,.s2,.s3{height:auto;min-height:0;padding:96px var(--gut) 72px;display:flex;flex-direction:column}
  .story .copy{order:-1;position:relative;left:auto;top:auto;width:auto}
  .story .stack{position:relative;inset:auto;margin-top:40px;-webkit-mask-image:none;mask-image:none}
  .s1 .stack,.s3 .stack{max-width:600px}   /* plates stay at or under 1 CSS px per photo px */
  .story .layer{position:relative;left:auto;top:auto;margin-left:var(--mx,0);margin-top:var(--mt,0);width:var(--mw);height:var(--mh,auto)}
  .story .detail img{left:max(-366px,calc(100% - 1285px))}   /* the 1.6x detail always covers its full-bleed window */
  .layer.dsk{display:none}
}
@media (max-width:767px){
  .story .copy p{font-size:16px}
  .story .copy p.sub{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .story .copy .more{transition:none}
  .js [data-reveal]{translate:none;transition:opacity .2s var(--ease)}
}