/* =========================================================================
   Scrollytelling layer, loaded only by story.php.
   The pattern throughout: a picture is held still with position:sticky while
   the words move past it, and each block of words lights up as it arrives.
   Everything that moves is transform or opacity, so nothing here can make the
   page stutter.
   ========================================================================= */

.st-open{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(70px,10vw,130px);overflow:hidden;color:#FFF6E7;background:var(--night);
}
.st-open-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;
}
.st-open-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(12,9,6,.95),rgba(14,10,7,.55) 45%,rgba(16,11,7,.7)),
    radial-gradient(100% 70% at 15% 100%,rgba(180,85,42,.27),transparent 60%);
}
.st-open-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.st-open-copy{position:relative;z-index:2;}
.st-open .eyebrow{color:var(--olive-lt);}
.st-open h1{
  font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:18ch;margin:0 0 1.2rem;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.st-lede{color:rgba(255,246,231,.78);font-size:1.05rem;margin:0;}
.st-cue{
  position:absolute;left:50%;bottom:26px;width:1px;height:56px;
  background:linear-gradient(to bottom,transparent,rgba(255,246,231,.75));
}

/* ---------------------------------------------------------------- a scene */

.st-scene{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  /* these are <section> elements, which carry the site wide vertical padding.
     A scene is edge to edge, and that padding was showing as a band of
     background between the hero and the first photo. */
  gap:0;padding:0;background:var(--cream);
}
.st-scene-dark{background:var(--night);color:#FFF6E7;}
.st-scene-quiet{background:var(--paper);}

.st-visual{
  position:sticky;top:0;height:100svh;overflow:hidden;
}
.st-visual img,
.st-visual video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* These are portraits in a full height frame, so cover throws away the top
     and the bottom. The top is where the face is. Holding the crop near the
     top of the photo keeps the whole head, and still leaves the face well
     below the fixed header. */
  object-position:50% 8%;
  transform:scale(1.04);transition:transform 1.2s var(--ease-out);
}
.st-visual-veil{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(12,9,6,.5),transparent 55%);
}
.st-visual-veil-soft{background:linear-gradient(to right,rgba(12,9,6,.25),transparent 60%);}

/* the sugar piece grows as its scene is read */
.st-visual-grow img{will-change:transform;}

.st-steps{
  display:flex;flex-direction:column;justify-content:center;
  /* One spacing for the whole story. These scenes used to hold their paragraphs
     38vh apart, which left most of a screen empty between one thought and the
     next and made the chef read looser than the chapters below him. Same 12vh
     as the chapters now, so the whole page keeps one rhythm. */
  gap:12vh;padding:18vh clamp(24px,4vw,64px);
}
.st-step{
  opacity:.34;transform:translateY(18px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  max-width:44ch;
}
.st-step.active{opacity:1;transform:none;}
/* read once, so it stays put and only the brightness changes from here on */
.st-step.seen{transform:none;}
.st-step h2{font-size:clamp(1.9rem,3.4vw,3rem);margin:0 0 .2rem;}
.st-step p{font-size:1.06rem;line-height:1.7;margin:0;}
.st-scene-dark .st-step p{color:rgba(255,246,231,.86);}
.st-scene-dark .eyebrow{color:var(--olive-lt);}
/* *** THE CHAPTER LABEL ON A DARK CHAPTER WAS CREAM, NOT OLIVE, at every width, and
   had been since the dark chapters were introduced. The eyebrow is a <p>, so
   `.st-scene-dark .st-step p` above, three classes, outranked both
   `.st-scene-dark .eyebrow` and `.st-step .eyebrow`, which are two. Chapters 2, 4,
   6 and 8 all had it. Naming the element as well as the class settles it. */
.st-scene-dark .st-step p.eyebrow{color:var(--olive-lt);}

.st-step-figures{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;max-width:none;}
.st-figure{display:flex;flex-direction:column;gap:.3rem;max-width:190px;}
.st-figure strong{font-family:'Fraunces',serif;font-size:2.4rem;color:var(--copper);line-height:1;}
.st-figure span{font-size:.86rem;color:var(--ink-soft);line-height:1.4;}
.st-scene-dark .st-figure span{color:rgba(255,246,231,.7);}

.st-dedication{
  font-family:'Fraunces',serif;font-style:italic;color:var(--copper);font-size:1.1rem;
}

/* ---------------------------------------------------------------- clips */

/* The clips are 576px wide at source. Shown at close to that size they are
   sharp; stretched across the window they are not. The blurred still behind
   fills the rest of the screen without pretending to be sharp. */
.st-clip{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;background:var(--night);color:#FFF6E7;
  padding:clamp(50px,8vw,90px) 0;margin:0;
}
.st-clip-wash{
  position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.4) saturate(1.1);transform:scale(1.1);
}
.st-clip-inner{
  position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.st-clip-frame{
  width:min(420px,42vw);aspect-ratio:9/16;flex:none;
  border-radius:10px;overflow:hidden;background:#0C0906;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9),0 0 70px -30px rgba(232,163,61,.3375);
  isolation:isolate;transform:translateZ(0);
}
.st-clip-video{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;
  opacity:0;transition:opacity 1s var(--ease-out);
}
.st-clip.playing .st-clip-video{opacity:1;}
.st-clip-copy{max-width:26ch;}

/* every second one mirrors, so the eye moves across the page rather than
   down one column */
.st-clip.flip .st-clip-inner{grid-template-columns:1fr auto;}
.st-clip.flip .st-clip-frame{order:2;}
.st-clip.flip .st-clip-copy{order:1;justify-self:end;text-align:right;}
.st-clip.flip .eyebrow{justify-content:flex-end;}
.st-clip.flip .eyebrow::before{order:2;}
.st-clip .eyebrow{color:var(--olive-lt);}
.st-clip-caption{
  font-family:'Fraunces',serif;font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.18;margin:0;text-shadow:0 4px 30px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- diary */

.st-diary{background:var(--cream-2);padding:clamp(70px,9vw,120px) 0;}
.st-diary h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 .6rem;}
.st-diary-intro{color:var(--ink-soft);max-width:52ch;margin:0 0 clamp(28px,4vw,44px);}

/* ---------------------------------------------------------------- close */

.st-close{
  background:linear-gradient(180deg,var(--cream),var(--cream-2));
  padding:clamp(80px,11vw,150px) 0;
}
/* Centred. Left aligned, the two short lines hung off the edge of a very wide
   band with nothing to balance them. */
.st-close{text-align:center;}
.st-close .eyebrow{justify-content:center;}
/* The line break is written into the markup, so the measure only has to be
   wide enough for the longer of the two lines (28 characters) to hold. At 16ch
   it broke itself a second time and the heading came out three lines deep. */
.st-close h2{
  font-size:clamp(2rem,4vw,3.2rem);margin:0 auto clamp(28px,4vw,46px);
  max-width:30ch;
}
.st-next{list-style:none;padding:0;margin:0 auto clamp(30px,4vw,48px);max-width:820px;text-align:left;}
.st-next li{
  display:grid;grid-template-columns:120px 1fr auto auto;gap:1rem;align-items:center;
  padding:1.05rem 0;border-top:1px solid var(--line);
}
.st-next li:last-child{border-bottom:1px solid var(--line);}
.st-next-when{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);font-weight:600;
}
.st-next-title{font-family:'Fraunces',serif;font-size:1.15rem;}
.st-next-price{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink-soft);}
.st-close-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;}
@media (max-width:720px){
  /* two buttons side by side end up cramped and off centre on a phone, so
     they stack, fill the column and sit under the list they belong to */
  .st-close{text-align:center;}
  /* The type has to come down with the screen or the second line wraps again
     and the two lines become three. 6.4vw keeps 28 characters inside a 360px
     phone. */
  .st-close h2{
    margin-left:auto;margin-right:auto;
    font-size:clamp(1.45rem,6.4vw,2rem);
  }
  .st-close .eyebrow{justify-content:center;}
  .st-close-actions{
    flex-direction:column;align-items:stretch;gap:.7rem;
    max-width:340px;margin:0 auto;
  }
  .st-close-actions .btn{
    width:100%;justify-content:center;padding:1.05rem 1.4rem;font-size:1rem;
  }
  /* Each row reads date, then title, then price and the button on one line,
     the button sized to its words and sitting against the right edge rather
     than stretched across a grid column. */
  .st-next li{
    text-align:left;grid-template-columns:1fr auto;
    row-gap:.45rem;padding:1.15rem 0;
  }
  .st-next-when{grid-column:1 / -1;}
  .st-next-title{grid-column:1 / -1;font-size:1.2rem;line-height:1.25;}
  .st-next-price{grid-column:1;justify-self:start;align-self:center;}
  .st-next li .btn{
    grid-column:2;justify-self:end;width:auto;
    padding:.72rem 1.6rem;font-size:.92rem;
  }
  .st-next li .seats{grid-column:2;justify-self:end;}
}

/* ---------------------------------------------------------------- narrow */

@media (max-width:900px){
  /* On a phone the two column scene collapses, and a sticky photo with text in
     the same column means the words scroll straight over the picture with
     nothing behind them. So the phone gets the proper version of the pattern:
     the photo is held full screen, and each block of words takes a screen of
     its own over the top of it, on a scrim dark enough to read against. */

  .st-scene{display:block;position:relative;}

  .st-visual{
    position:sticky;top:0;height:100svh;width:100%;z-index:0;
  }
  /* A slight, even tint on the picture itself. No panel, no edges: the whole
     photo simply sits back a little so light type reads over it. */
  .st-visual img,
.st-visual video{
    width:100%;height:100%;object-fit:cover;object-position:50% 8%;
    filter:brightness(.72) contrast(1.03);
  }
  /* The words are light and some of the photos are too, the empty kitchen and
     the white plates especially, so the scrim has to hold up against a bright
     picture rather than just frame a dark one. Never lighter than .5 anywhere. */
  /* A gentle gradient over the tinted photo, heavier at the foot where the words
     are. Nothing here has a hard edge. */
  .st-visual-veil,
  .st-visual-veil-soft{
    background:linear-gradient(to bottom,
      rgba(10,7,5,.6) 0%,
      rgba(10,7,5,.3) 28%,
      rgba(10,7,5,.42) 58%,
      rgba(10,7,5,.82) 100%);
  }

  /* the sugar scene has no veil of its own, so give it one */
  .st-visual-grow::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(10,7,5,.6),rgba(10,7,5,.35) 35%,rgba(10,7,5,.9));
  }

  .st-steps{
    position:relative;z-index:1;margin-top:-100svh;
    padding:0;gap:0;max-width:none;display:block;
  }
  .st-step{
    /* A full screen per paragraph made the page enormous to scroll. Two thirds
       still gives each block its own moment without the long empty stretches. */
    min-height:50svh;max-width:none;margin:0;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 clamp(22px,6vw,34px) 6vh;
    color:#FFF6E7;opacity:.25;transform:translateY(24px);
  }
  /* the first block of a scene starts lower so it clears the held photo */
  .st-step:first-child{min-height:72svh;}
  .st-step.active{opacity:1;transform:none;}
  .st-step.seen{transform:none;}
  .st-step.seen:not(.active){opacity:.4;}
/* read once, so it stays put and only the brightness changes from here on */
.st-step.seen{transform:none;}
  .st-step h2{
    font-size:clamp(1.9rem,8vw,2.6rem);color:#FFF6E7;
    text-shadow:0 1px 3px rgba(0,0,0,.6),0 4px 30px rgba(0,0,0,.8);margin-bottom:.4rem;
  }
  .st-step p,
  .st-scene-dark .st-step p{
    color:rgba(255,246,231,.96);font-size:1.05rem;line-height:1.65;
    /* a soft shadow rather than a hard one: it lifts the type off a bright
       photo without printing a visible outline around every letter */
    text-shadow:0 1px 2px rgba(0,0,0,.55),0 6px 24px rgba(0,0,0,.55);
    text-shadow:0 2px 20px rgba(0,0,0,.75);max-width:34ch;
  }
  .st-step .eyebrow{color:var(--olive-lt);}

  .st-step-figures{
    flex-direction:row;flex-wrap:wrap;gap:1.4rem 2rem;
    align-items:flex-start;justify-content:center;text-align:center;
  }
  .st-figure{align-items:center;}
  .st-figure strong{color:var(--olive-lt);font-size:2.1rem;}
  .st-figure span,
  .st-scene-dark .st-figure span{color:rgba(255,246,231,.78);}
  .st-dedication{color:var(--olive-lt);font-size:1.15rem;}

  /* the clips are already the same shape as the screen, so they simply fill it */
  .st-clip{height:100svh;min-height:0;padding:0;align-items:stretch;}
  .st-clip-wash{display:none;}
  .st-clip-inner{
    position:absolute;inset:0;display:block;
    width:auto;max-width:none;margin:0;padding:0;
  }
  .st-clip-frame{
    width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;
  }
  .st-clip-copy{
    position:absolute;left:0;right:0;bottom:0;max-width:none;z-index:2;
    padding:26vh clamp(22px,6vw,34px) clamp(38px,9vw,64px);
    background:linear-gradient(to top,rgba(10,7,5,.92),rgba(10,7,5,.6) 45%,transparent);
    text-align:left;
  }
  .st-clip.flip .st-clip-copy{text-align:left;justify-self:auto;}
  .st-clip.flip .eyebrow{justify-content:flex-start;}
  .st-clip.flip .eyebrow::before{order:0;}
  .st-clip-caption{font-size:clamp(1.6rem,7.5vw,2.2rem);max-width:15ch;}

  /* 9vw put "It started at a small table," over two lines on a phone, so the
     opener ran to three. Measured against the width the copy actually has: the
     longest of the two sentences fits on one line up to about 30px on a 390px
     screen, which is 7.4vw. Both sentences, two lines, nothing left hanging. */
  .st-open h1{font-size:clamp(1.9rem,7.4vw,3rem);}
  .st-next li{grid-template-columns:1fr auto;gap:.5rem 1rem;}
  .st-next-when{grid-column:1 / -1;}
}

@media (prefers-reduced-motion:reduce){
  .st-step{opacity:1;transform:none;}
  .st-visual img,
.st-visual video{transform:none;}
  .st-clip-video{opacity:1;}
}

/* ---------------------------------------------------------------- story
   The long version reads in the SAME language as the scenes above it: a sticky
   photo with the words stepping past. The only differences from .st-scene are a
   tighter rhythm, because there are eight chapters rather than two, and a lead
   in band before the first one. */

/* The title card. Centred and given room on both sides, so it reads as the
   cover of the chapters rather than a stray paragraph left over from a scene. */
.st-chapter-open{
  background:var(--cream);
  padding:clamp(84px,12vw,150px) 0 clamp(70px,10vw,120px);
  text-align:center;
}
/* The .shell keeps its own width and padding, exactly as .st-close does. An
   override here pushed the whole block off centre and past the edge on a phone. */
.st-chapter-open .eyebrow{justify-content:center;}
.st-chapter-open h2{
  font-size:clamp(1.7rem,4.2vw,3.4rem);margin:.5rem auto .9rem;
  /* min() so the measure can never be wider than the column it sits in */
  max-width:min(18ch,100%);text-wrap:balance;line-height:1.08;
  overflow-wrap:break-word;
}
.st-chapter-lede{
  font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink-soft);
  max-width:min(52ch,100%);margin:0 auto;text-wrap:pretty;
}
/* a hairline under the title card, drawn short and centred */
.st-chapter-open .shell::after{
  content:"";display:block;width:64px;height:2px;border-radius:2px;
  margin:clamp(26px,4vw,40px) auto 0;
  background:linear-gradient(to right,transparent,var(--copper),transparent);
}

/* The chapters have to end somewhere. Without this the last one ran straight
   into the sugar scene and the two read as one. */
.st-chapter-close{
  background:var(--cream);
  padding:clamp(70px,10vw,120px) 0;
  text-align:center;
}
.st-chapter-close::after{
  content:"";display:block;width:64px;height:2px;border-radius:2px;
  margin:0 auto;
  background:linear-gradient(to right,transparent,var(--copper),transparent);
}

/* Eight chapters at the full 38vh rhythm would run for ever, so the chapter
   scenes breathe a little less than the two hand built ones above. */
.st-scene-chapter .st-steps{gap:12vh;padding:18vh clamp(24px,4vw,64px);}
.st-scene-chapter .st-step h2{font-size:clamp(1.6rem,2.8vw,2.3rem);}

.st-pull{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;
  padding-left:1.2rem;border-left:3px solid var(--copper);
}
.st-scene-dark .st-pull{border-left-color:var(--olive-lt);color:#FFF6E7;}

/* Every other chapter turns around: photo on the right, words on the left. Done
   with grid order rather than by reordering the markup, so the DOM keeps
   photo-then-words for a screen reader, and so the phone layout below, where the
   scene collapses to a single block, is untouched. The veil is a left to right
   gradient, so it has to be mirrored too or the dark edge lands on the wrong side
   of the picture. */
.st-scene-chapter.flip .st-visual{order:2;}
.st-scene-chapter.flip .st-steps{order:1;}
.st-scene-chapter.flip .st-visual-veil{
  background:linear-gradient(to left,rgba(12,9,6,.5),transparent 55%);
}
.st-scene-chapter.flip .st-visual-veil-soft{
  background:linear-gradient(to left,rgba(12,9,6,.25),transparent 60%);
}

/* Phone. This has to come after the chapter rules above, not before them: the
   base max-width on the lede is 52ch, which is wider than a phone column, and an
   earlier media block loses to a later plain rule at the same specificity. */
@media (max-width:900px){
  .st-chapter-open{padding:clamp(60px,14vw,90px) 0 clamp(46px,10vw,70px);}
  .st-chapter-open h2{font-size:clamp(1.5rem,6.6vw,2.1rem);max-width:min(16ch,100%);}
  .st-chapter-lede{font-size:.98rem;max-width:min(34ch,100%);}
  .st-chapter-close{padding:clamp(54px,12vw,80px) 0;}
  /* every step sits on the photo's scrim here, so a pull quote in a light
     chapter would otherwise be dark type on a dark picture */
  .st-pull,
  .st-scene-dark .st-pull{color:#FFF6E7;border-left-color:var(--olive-lt);}
  .st-step .eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.7);}
  .st-pull{text-shadow:0 1px 3px rgba(0,0,0,.6),0 6px 24px rgba(0,0,0,.5);}
}










/* ------------------------------------------------- chapters shown in full

   Two of these are portraits of something held: the cakes in chapter two and
   the plate in chapter seven. A full height frame on a wide screen can only
   show a band across the middle of a portrait, so whichever way the crop was
   moved, something worth seeing fell outside it.

   These two are fitted whole instead of cropped. Fitting a tall picture into a
   wide frame would leave bars down the sides, so the same photograph is laid in
   behind, blown up and thrown out of focus, and fills them. Nothing is cut off
   and there is no empty space. */
#chapter-2 .st-visual,
#chapter-3 .st-visual,
#chapter-5 .st-visual,
#chapter-6 .st-visual,
#chapter-7 .st-visual{isolation:isolate;}

#chapter-2 .st-visual::before,
#chapter-3 .st-visual::before,
#chapter-5 .st-visual::before,
#chapter-6 .st-visual::before,
#chapter-7 .st-visual::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:50% 50%;
  filter:blur(42px) brightness(.5) saturate(.85);
  transform:scale(1.12);
}
#chapter-2 .st-visual::before{background-image:url("../img/st-young-nicolaas.jpg");}
#chapter-7 .st-visual::before{background-image:url("../img/st-chapter7.jpg");}

#chapter-2 .st-visual img,
#chapter-5 .st-visual img,
#chapter-6 .st-visual img,
#chapter-7 .st-visual img,
#chapter-3 .st-visual img{
  position:relative;z-index:1;
  object-fit:contain;object-position:50% 50%;transform:none;
}
#chapter-2 .st-visual-veil,
#chapter-3 .st-visual-veil,
#chapter-5 .st-visual-veil,
#chapter-6 .st-visual-veil,
#chapter-7 .st-visual-veil{z-index:2;}

/* Chapter six is a wide group photograph. Cropped to a full height frame the
   chefs at both ends fell outside it, so it is shown whole like the others. */
#chapter-6 .st-visual::before{background-image:url("../img/st-chapter6.jpg");}

/* Chapter five is the magazine spread, both pages side by side. It has to be
   shown whole or it stops being the thing it is, and the veil is eased off it
   so the printing is not dimmed. */
#chapter-5 .st-visual::before{background-image:url("../img/st-chapter5.jpg");}
#chapter-5 .st-visual-veil{background:linear-gradient(to right,rgba(12,9,6,.32),transparent 58%);}

/* Chapter three is a 720 wide photograph, which is small for a full height
   frame. Stretched to fill it, it would be blown up and it would show. Fitted
   whole it is drawn at roughly its own size, which is sharp, and it is the same
   shape as chapter two so the two sit at the same scale with no scaling needed.
   A blurred copy of itself fills the sides. */
#chapter-3 .st-visual::before{background-image:url("../img/st-chapter3.jpg");}

@media (max-width: 700px){
  /* The phone shows the spread the same way the desktop does: both pages, the
     written one laid over the portrait one. It is small at this width, so the
     tint that sits over the other chapters is taken off this one and the pages
     are given the full width of the screen. */
  #chapter-5 .st-visual img{
    object-fit:contain;object-position:50% 50%;transform:none;
    filter:none;
  }
  #chapter-5 .st-visual-veil{background:none;}
}

/* The chapter clip is decoration too: same treatment as the studio clips, so
   the phone does not draw a play triangle over it. See style.css. */
.st-visual video::-webkit-media-controls,
.st-visual video::-webkit-media-controls-panel,
.st-visual video::-webkit-media-controls-start-playback-button,
.st-visual video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0 !important;
}

/* ------------------------------------------------ one glow, everywhere

   On a phone the words sit directly on a photograph, and every kind of text had
   picked up its own shadow over time: the headings one, the paragraphs another,
   the eyebrows a third, the pull quotes a fourth, and the closing panel none at
   all. Some of them were single wide blurs, which spread too thin to hold an
   edge against a bright picture.

   One treatment for all of it: a tight shadow so the letters keep an outline,
   two mid blurs, and a wide pool that reads as a dark glow behind the block. */
@media (max-width: 900px){
  .st-scene .st-step h2,
  .st-scene .st-step p,
  .st-scene .st-step .eyebrow,
  .st-scene .st-step .st-pull,
  .st-scene .st-step li,
  .st-scene .st-figure strong,
  .st-scene .st-figure span,
  .st-scene .st-dedication,
  .st-chapter-open .eyebrow,
  .st-chapter-open h2,
  .st-chapter-open .st-chapter-lede,
  .st-open h1,
  .st-open p,
  .st-close .eyebrow,
  .st-close h2,
  .st-close p{
    text-shadow:
      0 1px 2px rgba(0,0,0,.85),
      0 2px 8px rgba(0,0,0,.8),
      0 5px 22px rgba(0,0,0,.7),
      0 10px 48px rgba(0,0,0,.55);
  }
}

/* --------------------------------------- no heading left with a lone word

   A heading that wraps its last word onto a line by itself reads as a mistake,
   and at phone width it happened on nearly every chapter. text-wrap:balance
   evens the lines out instead of filling the first and dropping whatever is
   left, and pretty is the fallback on anything that does not know balance:
   it will not leave a single word on the last line. */
@media (max-width: 900px){
  .st-open h1,
  .st-step h2,
  .st-chapter-open h2,
  .st-chapter-open .st-chapter-lede,
  .st-close h2,
  .st-step .st-pull{
    text-wrap:pretty;
    text-wrap:balance;
  }
  /* A touch smaller gives the balancing something to work with on the longest
     chapter titles, which ran to three words on the second line. */
  .st-step h2{font-size:clamp(1.8rem,7.4vw,2.5rem);}
}

/* --------------------------------------------- THE TINT ARRIVES WITH THE WORDS

   A chapter picture is shown as it was shot. As the words reach it and roll over
   it, the WHOLE FRAME sinks back so the type can be read, and it lifts again once
   they have passed. Phone only: above 900px the words sit in their own column
   beside the photo and none of this applies.

   TWO SURFACES MOVE, AND THEY MOVE DIFFERENTLY, WHICH IS THE POINT:
     the photograph   a plain brightness on an unblurred image. Cheap to paint.
                      1 -> .72, and -> .62 on chapters 2 and 5.
     the surround     chapters 2, 3, 5, 6 and 7 show their photo CONTAINED, with a
                      blown up copy of it behind, blurred 42px. On a phone the
                      words lie mostly on THAT, so it has to darken too or the
                      effect is invisible where it matters most.

   *** THE SURROUND IS DARKENED BY THE OPACITY OF A FLAT SHADE, NOT BY ITS OWN
   FILTER. Animating a filter on an element that already carries a blur re-runs
   that blur every frame across a full screen surface: it was measurably laggy and
   it read as the frame going black behind the picture. An opacity is composited,
   costs nothing, and lands in the same place. IF THIS EVER NEEDS CHANGING, CHANGE
   THE OPACITY. Do not put brightness() back on ::before.

   The shade sits at z-index 0, above the blurred backdrop and BELOW the
   photograph, which those five chapters put at z-index 1. So it shades the
   surround only, and the picture keeps its own gentler treatment.

   .words-over is put on and taken off by story.js, on the type itself. */
@media (max-width:900px){

  /* resting: the picture as it was shot, and no shade at all */
  .st-scene .st-visual img,
  #chapter-2 .st-visual img,
  #chapter-5 .st-visual img{
    filter:brightness(1) contrast(1);
    transition:filter .9s cubic-bezier(.33,0,.2,1);
  }
  #chapter-2 .st-visual::before,
  #chapter-3 .st-visual::before,
  #chapter-5 .st-visual::before,
  #chapter-6 .st-visual::before,
  #chapter-7 .st-visual::before{
    filter:blur(42px) brightness(1) saturate(1);
  }

  /* THE SHADE. Opacity only, and it never animates anything else. */
  #chapter-2 .st-visual::after,
  #chapter-3 .st-visual::after,
  #chapter-5 .st-visual::after,
  #chapter-6 .st-visual::after,
  #chapter-7 .st-visual::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:#0A0705;opacity:0;
    transition:opacity .9s cubic-bezier(.33,0,.2,1);
  }

  /* the words are over it: the frame sinks */
  .st-scene .st-visual.words-over img{
    filter:brightness(.72) contrast(1.03);
  }
  #chapter-2 .st-visual.words-over img,
  #chapter-5 .st-visual.words-over img{
    filter:brightness(.62) contrast(1.04);
  }
  #chapter-3 .st-visual.words-over::after,
  #chapter-6 .st-visual.words-over::after,
  #chapter-7 .st-visual.words-over::after{opacity:.7;}
  /* the two Johan could not read comfortably go a step further */
  #chapter-2 .st-visual.words-over::after,
  #chapter-5 .st-visual.words-over::after{opacity:.85;}
}

/* Anyone who has asked for less movement gets the settled state, held still. */
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .st-scene .st-visual img{filter:brightness(.72) contrast(1.03);transition:none;}
  #chapter-2 .st-visual img,
  #chapter-5 .st-visual img{filter:brightness(.62) contrast(1.04);transition:none;}
  #chapter-3 .st-visual::after,
  #chapter-6 .st-visual::after,
  #chapter-7 .st-visual::after{opacity:.7;transition:none;}
  #chapter-2 .st-visual::after,
  #chapter-5 .st-visual::after{opacity:.85;transition:none;}
}