/* 13 June case-study template (L3, 11/11/2026). Built from option 3 (chapters with a tracker) as Amy described it on 11/11/2026.
   Only tokens from ../shared/paper-base.css (colour, type, spacing, radius, motion); no new colour, font or size.
   Parts: hero on black (title, hero line, cover animation on the black), the four story steps on black with the tracker,
   side notes on paper sheets that come in from either side, related work and the closing sheet on paper. */

/* ---------------------------------------------------------------- hero on black */
.cs-hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--strip-h) + var(--sp-8)) 0 var(--sp-6);color:var(--color-on-black);text-align:center}
.cs-hero__text{position:relative;z-index:2;padding-inline:var(--margin);width:100%}
.cs-hero__title{margin:0 auto;max-width:15em;color:var(--color-on-black);text-wrap:balance}
.cs-hero__line{margin:var(--sp-5) auto 0;max-width:var(--measure-lead);color:var(--color-on-black-2);text-wrap:balance}
/* the animation sits straight on the black: no box, frame or border; it fills the room left in the first screen */
.cs-hero__anim{position:relative;z-index:1;width:100%;margin-top:calc(-1 * var(--sp-5));pointer-events:none}
.cs-hero__anim canvas{display:block;width:100%;aspect-ratio:4 / 3;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 97%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 97%,transparent);
  mask-composite:intersect}
@media (min-width:768px){.cs-hero__anim canvas{aspect-ratio:16 / 9;width:min(100%,1180px);margin-inline:auto}}
@media (min-width:1024px){
  /* the hero fills the first screen; the animation takes the height that is left, always 16:9 */
  .cs-hero{min-height:100vh;min-height:100svh;padding-bottom:var(--sp-5)}
  .cs-hero__anim{flex:1 1 0;min-height:240px;container-type:size}
  .cs-hero__anim canvas{width:min(100cqw,1180px,calc(100cqh * 16 / 9));height:auto;margin:0 auto}
}

/* ---------------------------------------------------------------- the story: steps on black with the tracker */
.cs-story{position:relative;z-index:1;padding-block:var(--sp-10) var(--sp-9)}
.cs-rail-wrap{position:absolute;z-index:5;top:var(--sp-10);bottom:var(--sp-9);left:var(--margin);width:calc(3 * var(--col) + 2 * var(--gutter))}
.cs-rail{position:sticky;top:calc(var(--sp-10) + var(--sp-3));margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-1);border-left:1px solid var(--color-line-black)}
.cs-rail a{position:relative;display:flex;gap:var(--sp-3);align-items:baseline;padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-size);line-height:var(--type-ui-lh);color:var(--color-on-black-muted);
  transition:color var(--dur-colour) var(--ease)}
.cs-rail a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--color-on-black);transform:scaleY(0);transform-origin:top;
  transition:transform var(--dur-small) var(--ease)}
.cs-rail a::after{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--color-on-black);
  transform:scale(0);transition:transform var(--dur-small) var(--ease)}
.cs-rail a:hover,.cs-rail a.is-on{color:var(--color-on-black)}
.cs-rail a.is-on::before{transform:scaleY(1)}
.cs-rail a.is-on::after{transform:scale(1)}
.cs-rail a:focus-visible{outline:2px solid var(--color-on-black);outline-offset:2px}
.cs-rail__num{font-family:var(--font-label);font-weight:500;font-size:var(--type-label-size);letter-spacing:var(--type-label-track);color:var(--color-on-black-2)}

.cs-step{position:relative;z-index:1;scroll-margin-top:calc(var(--strip-h) + var(--sp-6))}
.cs-row{position:relative;z-index:1}
.cs-row+.cs-row{margin-top:var(--sp-10)}
.cs-sheet--note+.cs-row{margin-top:var(--sp-9)}
.cs-step__num{display:block;margin-bottom:var(--sp-3);font-family:var(--font-label);font-weight:500;font-size:var(--type-label-size);
  line-height:var(--type-label-lh);letter-spacing:var(--type-label-track);color:var(--color-on-black-2)}
.cs-step .section-title{color:var(--color-on-black);margin:0 0 var(--sp-5)}
.cs-step__body{font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-on-black-2);max-width:var(--measure-body)}
.cs-step__body p+p{margin-top:var(--sp-4)}
/* the result reads one step larger: it is where the journey ends */
.cs-step--result .cs-step__body{font-family:var(--font-text);font-weight:500;font-size:var(--type-lead-size);line-height:var(--type-lead-lh);
  letter-spacing:var(--type-lead-track);color:var(--color-on-black);max-width:24em}

/* ---------------------------------------------------------------- side notes and closing sheets (paper, drawn by ../shared/paper-base.js) */
.cs-sheet{margin-bottom:0}
.cs-story .cs-sheet--note{margin-top:var(--sp-9);margin-bottom:0}
.cs-after{position:relative;z-index:1;padding-bottom:var(--sp-10)}
.cs-after>.cs-sheet+.cs-sheet{margin-top:var(--sp-10)}
.cs-sheet .section-title{margin:0 0 var(--sp-5)}
.cs-note__label{display:block;margin-bottom:var(--sp-4);font-family:var(--font-label);font-weight:500;font-size:var(--type-label-size);
  line-height:var(--type-label-lh);letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--color-ink-2)}
.cs-note__text{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh);
  letter-spacing:var(--type-h3-track);color:var(--color-ink);text-wrap:balance}
.cs-quote{margin:0}
.cs-quote__text{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--type-h2-size);line-height:1.1;letter-spacing:var(--type-h2-track);color:var(--color-ink)}
.cs-quote__by{display:block;margin-top:var(--sp-5);font-style:normal;font-family:var(--font-label);font-weight:500;font-size:var(--type-label-size);
  letter-spacing:var(--type-label-track);color:var(--color-ink-2)}
.cs-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.cs-gallery figure{margin:0;border-radius:var(--radius-frame);overflow:hidden;aspect-ratio:4 / 3;background:var(--color-grey-1);
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 14px 24px -6px rgba(0,0,0,.35)}
.cs-gallery figure:only-child{grid-column:1 / -1;aspect-ratio:16 / 10}
.cs-gallery img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.cs-related{display:flex;flex-wrap:wrap;gap:var(--sp-7) var(--sp-8)}
.cs-related .circle-item{width:clamp(150px,13.5vw,200px);text-align:left}
.cs-related .circle-item__face img{object-fit:contain}
.cs-related .circle-item__name{display:block;margin-top:var(--sp-4);font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-l-size);
  line-height:var(--type-ui-l-lh);color:var(--color-ink)}
.cs-related__line{display:block;margin-top:var(--sp-2);font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--color-ink-2)}
.cs-sheet--close .text-block__body{margin-top:0}
.cs-sheet--close .actions{margin-top:var(--sp-6)}

/* ---------------------------------------------------------------- tablet: the tracker keeps two columns of the 8 */
@media (max-width:1023px){
  .cs-rail-wrap{width:calc(2 * var(--col) + var(--gutter))}
  .cs-rail a{flex-direction:column;gap:var(--sp-1)}
}
/* ---------------------------------------------------------------- phone: the tracker becomes a small bar at the foot of the screen */
@media (max-width:767px){
  .cs-story{padding-bottom:calc(var(--sp-9) + 56px)}
  .cs-rail-wrap{left:0;right:0;width:auto;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
  .cs-rail{position:sticky;top:auto;bottom:var(--sp-3);display:flex;gap:var(--sp-1);margin-inline:auto;width:max-content;max-width:calc(100% - 2 * var(--margin));
    padding:var(--sp-1) var(--sp-2);border:1px solid var(--color-line-black);border-radius:var(--radius-control);background:rgba(10,10,10,.88);pointer-events:auto}
  .cs-rail a{flex-direction:row;padding:var(--sp-2) var(--sp-3);min-height:44px;align-items:center;border-radius:var(--radius-control)}
  .cs-rail a::before,.cs-rail a::after{display:none}
  .cs-rail a.is-on{background:var(--color-on-black);color:var(--color-black)}
  .cs-rail a.is-on .cs-rail__num{color:var(--color-black)}
  .cs-rail a:not(.is-on) .cs-rail__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cs-gallery{grid-template-columns:1fr}
  .cs-related{gap:var(--sp-6)}
  .cs-related .circle-item{width:calc(50% - var(--sp-6) / 2);min-width:0}
}
@media (prefers-reduced-motion:reduce){.cs-rail a,.cs-rail a::before,.cs-rail a::after{transition:none}}
/* the hero and the story are one black run: no gap from the shared black-section margin */
.cs-hero.black-section,.cs-story.black-section{margin-bottom:0}