/* Stories That Inspire (/stories/). Loads after /css/bevp-shell.css and /css/readability.css and never restyles the shell.
   Breakpoints match the shell: 900 stacked sections, 700 phone; short landscape (700 to 899 wide, 500 tall or less) keeps the desktop splits.

   Three publications, three environments, one BEVP type system (Anton titles, Russo One labels, Barlow text, Spectral decks):
   1. The Legacy Jump, ink. A premiere stage: full-height photograph under a dark scrim, meta row and oversized title on the
      left, the film's one-sheet layered on the right; then film credits beside the story, and a row of trailer stills.
      Adapted from eventes/eventes/index3.html L88-167 (.slider-bg3 stage: css/style.css L720-735, L812-828, L984-990; the
      layered right-hand .booking-form L898-960) and asata/asata/portfolio-detail2.html L185-230 (.port-detail-info2 credits
      split and gallery: assets/css/style.css L3786-3820).
   2. Sons of the Flag, paper. An off-grid magazine spread: the cover is lifted over the edge of the ink section above and
      nudged off the grid, the copy set as an editorial column with a colophon.
      Adapted from asata/asata/blog3.html L193-230 (.post-style1 spread and nth-child nudge: style.css L1750-1800) and
      asata/asata/about-freelancer.html L181-205 (.mt-overlap220 lift: style.css L326, L3559-3587).
   3. True North, ink over glacier ice. A photographic band with the copy in the left half and the manual cover anchored to
      the band's lower right edge, bleeding past it; then the 7X route as a field-guide strip of pinned photographs.
      Adapted from uevent/uevent/index.html L313-336 (.event-access band and corner .mockup: assets/css/style.css L1581-1627)
      and saasten/saasten/index-6.html L620-710 (.h6-about-img-sec pinned images: style.css L6850-6914).
   4. Closing, red. A single compact strip: label and title left, copy and action right.
      Adapted from saasten/saasten/index-4.html L1525 (.newsletter-area: style.css L3635-3690).
   Reveal on scroll follows the AOS "fade-up, once" settings in saasten/saasten/js/custom.js L191-197 (stories.js). */

.st{
  --st-lift:clamp(64px,7vw,104px);
  --st-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --st-gap:var(--rd-gap);
  --st-pad:var(--rd-section);
  background:var(--u-paper);
}
.st section{position:relative}
.st-mono{margin:0;font-family:var(--st-mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.st p{text-wrap:pretty}

/* ============================================================
   1. THE LEGACY JUMP
   ============================================================ */
.st-film{background:var(--u-ink);color:var(--u-bone)}
.st-film__stage{
  position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(600px,calc(100svh - var(--u-header-h)),900px);
}
/* The canopy photograph under a scrim that is darkest behind the copy (eventes .slider-bg3::before) */
.st-film__bg{position:absolute;inset:0;z-index:-1;margin:0}
.st-film__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:grayscale(1) contrast(1.05)}
.st-film__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.82) 42%,rgba(14,13,11,.5) 100%)}
.st-film__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap);align-items:center;
  padding-block:clamp(40px,5vw,72px);
}
.st-film__copy{grid-column:1 / span 7;position:relative;z-index:1}
.st-film__page{color:var(--u-bone-soft)}
.st-film__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--u-s5);color:#ff9a8c}
.st-film__title{
  margin:var(--u-s4) 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;
  font-size:clamp(76px,9.6vw,156px);line-height:.88;letter-spacing:.005em;
}
.st-film__deck{margin-top:var(--u-s5);max-width:30em;font-family:var(--u-ff-edit);font-style:italic;font-size:var(--rd-deck);line-height:1.32}
.st-film__actions{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--u-s6);row-gap:var(--u-s4);margin-top:var(--u-s6)}
.st-film__actions .u-btn{margin-top:0}
.st-film__release{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--u-ff-label);font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.st-film__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--u-red)}
/* The film's one-sheet, layered over the stage and reaching past the grid edge (eventes .booking-form margin-right:-100px) */
.st-film__frame{
  grid-column:8 / -1;position:relative;margin:0 calc(-1 * var(--u-pad-x)) 0 0;justify-self:end;
  width:min(100%,460px);aspect-ratio:3 / 4;
  box-shadow:0 40px 80px rgba(0,0,0,.55);
}
.st-film__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* Credits beside the story, then the stills (asata .port-detail-info2 split and gallery) */
.st-film__reel{padding-block:clamp(40px,4.4vw,64px) clamp(48px,5vw,80px)}
.st-film__reel-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap);row-gap:clamp(40px,4.4vw,64px);align-items:start}
.st-film__facts{grid-column:1 / span 4;display:grid;row-gap:var(--u-s6);margin:0}
.st-br-phone{display:none}
.st-film__facts dt{font-family:var(--u-ff-label);font-size:var(--rd-label);letter-spacing:.1em;text-transform:uppercase;color:var(--u-bone-soft)}
.st-film__facts dd{margin:var(--u-s2) 0 0;font-family:var(--u-ff-title);font-size:clamp(40px,4vw,60px);line-height:1;text-transform:uppercase}
.st-film__story{grid-column:5 / -1}
.st-film__h3{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:var(--rd-h2-md);line-height:1;text-wrap:balance}
.st-film__lead{margin-top:var(--u-s5);font-size:var(--rd-lead);line-height:1.6;max-width:none}
.st-film__note{margin-top:var(--u-s4);font-size:var(--rd-body);line-height:1.6;color:var(--u-bone-soft)}
.st-film__link{display:inline-flex;align-items:center;gap:10px;min-height:var(--u-tap);margin-top:var(--u-s4);color:var(--u-bone);font-weight:600;text-decoration:underline;text-decoration-color:var(--u-red);text-decoration-thickness:2px;text-underline-offset:6px}
.st-film__link svg{width:18px;height:18px}
.st-film__stills{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--u-s4);margin:0;padding:0;list-style:none}
.st-film__stills img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover}
.st-film :focus-visible{outline-color:var(--u-bone)}

/* ============================================================
   2. SONS OF THE FLAG
   ============================================================ */
/* The section starts at the top of the cover, so its anchor lands the cover below the header; the first --st-lift of it stays ink */
.st-book{padding-bottom:var(--st-pad);background:linear-gradient(var(--u-ink) 0 var(--st-lift),var(--u-paper) var(--st-lift))}
.st-book__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap);align-items:start}
/* The cover lifts over the ink section above (asata .mt-overlap220) and sits off the grid (.post-style1:nth-child transform) */
.st-book__aside{grid-column:1 / span 4;justify-self:end;width:min(100%,348px);transform:translateX(clamp(0px,1.6vw,28px))}
.st-book__cover{position:relative;z-index:1;margin:0;transform:rotate(-1.5deg)}
.st-book__cover img{display:block;width:100%;height:auto;box-shadow:0 2px 0 rgba(0,0,0,.08),0 30px 60px rgba(14,13,11,.4)}
/* Spine shading on the left edge of the printed cover */
.st-book__cover::after{content:"";position:absolute;inset:0 auto 0 0;width:12px;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0));pointer-events:none}
.st-book__copy{grid-column:6 / -1;padding-top:calc(var(--st-lift) + clamp(48px,5vw,80px))}
.st-book__kicker{color:var(--u-red)}
.st-book__title{margin:var(--u-s4) 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(60px,7.2vw,116px);line-height:.9;letter-spacing:.005em}
.st-book__deck{margin-top:var(--u-s5);font-family:var(--u-ff-edit);font-style:italic;font-size:clamp(26px,2.6vw,40px);line-height:1.2;text-wrap:balance}
.st-book__lead{margin-top:var(--u-s5);font-size:var(--rd-lead);line-height:1.6;color:var(--u-text-soft)}
.st-book__colophon{display:grid;row-gap:var(--u-s5);margin:var(--u-s7) 0 0}
.st-book__colophon dt{font-family:var(--u-ff-label);font-size:var(--rd-label);letter-spacing:.1em;text-transform:uppercase;color:var(--u-red)}
.st-book__colophon dd{margin:var(--u-s2) 0 0;font-size:var(--rd-body);line-height:1.5}
.st-book__actions{margin-top:var(--u-s6)}
.st-book__actions .u-btn{margin-top:0}

/* ============================================================
   3. TRUE NORTH
   ============================================================ */
.st-manual{background:var(--u-ink);color:var(--u-bone);padding-bottom:var(--st-pad);isolation:isolate}
/* Glacier photograph band under a dark scrim (uevent .event-access with its :after overlay) */
.st-manual__field{position:absolute;inset:0 0 auto 0;height:clamp(520px,62vw,820px);z-index:-1;overflow:hidden}
.st-manual__field img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.st-manual__field::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.55) 0%,rgba(14,13,11,.72) 55%,var(--u-ink) 100%),linear-gradient(90deg,rgba(14,13,11,.7) 0%,rgba(14,13,11,0) 70%)}
.st-manual__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap);align-items:end;padding-top:clamp(88px,10vw,150px)}
.st-manual__copy{grid-column:1 / span 7;grid-row:1}
.st-manual__kicker{color:#9fd3e6}
.st-manual__title{margin:var(--u-s4) 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(72px,9vw,148px);line-height:.88;letter-spacing:.01em}
.st-manual__deck{margin-top:var(--u-s5);font-family:var(--u-ff-edit);font-style:italic;font-size:var(--rd-deck);line-height:1.3;max-width:26em}
.st-manual__lead{margin-top:var(--u-s5);font-size:var(--rd-lead);line-height:1.6;color:var(--u-bone-soft);max-width:36em}
/* Field-guide index: subjects in two columns, dimensions and availability beside them */
.st-manual__index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--st-gap);margin-top:var(--u-s7)}
.st-manual__label{color:#9fd3e6;font-size:13px}
.st-manual__label + *{margin-top:var(--u-s3)}
.st-manual__index p + .st-manual__label{margin-top:var(--u-s5)}
.st-manual__subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--u-s5);row-gap:var(--u-s2);margin:var(--u-s3) 0 0;padding:0;list-style:none;font-family:var(--u-ff-title);font-size:clamp(22px,1.9vw,28px);line-height:1.15;text-transform:uppercase}
.st-manual__dims{margin:0;font-size:var(--rd-body);line-height:1.5}
.st-manual__actions{margin-top:var(--u-s6)}
.st-manual__actions .u-btn{margin-top:0}
/* The manual anchored to the band's lower right corner, bleeding past it (uevent .event-access .mockup) */
.st-manual__cover{grid-column:9 / -1;grid-row:1;align-self:start;justify-self:end;width:min(100%,380px);margin:0;transform:rotate(2deg)}
.st-manual__cover img{display:block;width:100%;height:auto;box-shadow:0 36px 70px rgba(0,0,0,.6)}
.st-manual :focus-visible{outline-color:var(--u-bone)}

/* The 7X route as a field-guide strip; alternate photographs are pinned high and low (saasten .h6-about-img-sec offsets) */
.st-route{margin-top:clamp(56px,6vw,96px)}
.st-route__label{color:var(--u-bone-soft)}
.st-route__list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--u-s3);margin:var(--u-s5) 0 0;padding:0;list-style:none}
.st-route__list li{display:flex;flex-direction:column;gap:var(--u-s2)}
.st-route__list li:nth-child(even){transform:translateY(var(--u-s5))}
.st-route__list img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover}
.st-route__list span{font-family:var(--st-mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* ============================================================
   4. CLOSING
   ============================================================ */
.st-close{background:var(--u-red);color:#fff;padding-block:clamp(48px,5vw,72px)}
.st-close__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap);align-items:center}
.st-close__head{grid-column:1 / span 6}
.st-close__kicker{color:rgba(255,255,255,.86)}
.st-close__title{margin:var(--u-s3) 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:var(--rd-h2-md);line-height:1}
.st-close__body{grid-column:7 / -1;display:flex;align-items:center;gap:var(--st-gap)}
.st-close__lead{margin:0;font-size:var(--rd-body);line-height:1.55;max-width:34em}
.st-close__body .rd-actions{margin:0;flex:none}
.st-close__body .u-btn{margin-top:0}
.st-close :focus-visible{outline-color:#fff}

/* Reveal (stories.js adds .st-reveal-on only when motion is allowed) */
.st-reveal-on [data-st-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s ease}
.st-reveal-on [data-st-reveal].is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1279px) and (min-width:900px){
  .st-film__copy{grid-column:1 / span 8}
  .st-film__frame{grid-column:9 / -1}
  .st-close__body{flex-direction:column;align-items:flex-start;gap:var(--u-s4)}
}
@media (max-width:1099px) and (min-width:900px){
  .st-film__title{font-size:clamp(68px,8.6vw,96px)}
  .st-book__copy{grid-column:5 / -1}
  .st-manual__copy{grid-column:1 / span 8}
  .st-manual__cover{grid-column:9 / -1}
}

/* Below 900px: one column. Phones follow the homepage reading model: title, photograph, information, action. */
@media (max-width:899px){
  /* The one-sheet becomes the stage: the photograph fills the top and the copy rises over its darkened lower part */
  .st-film__stage{display:block;min-height:0}
  .st-film__bg{display:none}
  .st-film__grid{display:block;padding-block:clamp(230px,52vw,400px) var(--u-s6)}
  .st-film__frame{position:absolute;inset:0;z-index:-1;width:auto;max-width:none;margin:0;aspect-ratio:auto;box-shadow:none}
  .st-film__frame img{object-position:50% 20%}
  .st-film__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.1) 0%,rgba(14,13,11,.5) 30%,rgba(14,13,11,.9) 52%,var(--u-ink) 70%)}
  .st-film__title{font-size:clamp(60px,13vw,112px)}
  .st-film__deck{max-width:34em}
  .st-film__actions{margin-top:var(--u-s5)}
  .st-film__reel{padding-block:var(--u-s8) var(--st-pad)}
  .st-film__facts,.st-film__story{grid-column:1 / -1}
  .st-film__facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--u-s4);order:2}
  .st-film__story{order:1}
  .st-film__stills{order:3}

  .st-book__grid{grid-template-columns:minmax(0,1fr)}
  .st-book{--st-lift:var(--u-s8)}
  /* Phones: cover, then the copy and action, then the colophon */
  .st-book__aside{display:contents}
  .st-book__cover{grid-row:1;justify-self:center;width:min(64vw,300px)}
  .st-book__copy{grid-column:1 / -1;grid-row:2;padding-top:var(--u-s7)}
  .st-book__colophon{grid-row:3;margin-top:var(--u-s6);row-gap:var(--u-s4)}

  .st-manual__field{height:clamp(360px,70vw,560px)}
  .st-manual__grid{grid-template-columns:minmax(0,1fr);padding-top:clamp(64px,12vw,120px)}
  .st-manual__copy,.st-manual__cover{grid-column:1 / -1;grid-row:auto}
  .st-manual__cover{order:-1;justify-self:start;width:min(56vw,280px);margin-bottom:var(--u-s6)}
  /* The route becomes a strip that scrolls sideways, four or so photographs in view */
  .st-route__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--u-pad-x));padding:0 var(--u-pad-x) var(--u-s6);scroll-padding-inline:var(--u-pad-x)}
  .st-route__list li{flex:0 0 26%;scroll-snap-align:start}

  .st-close__grid{grid-template-columns:minmax(0,1fr);row-gap:var(--u-s4)}
  .st-close__head,.st-close__body{grid-column:1 / -1}
  .st-close__body{flex-direction:column;align-items:flex-start;gap:var(--u-s4)}
}
@media (max-width:699px){
  .st-film__title{font-size:clamp(52px,17vw,84px)}
  .st-film__deck{font-size:20px}
  .st-film__actions{flex-direction:column;align-items:flex-start;gap:var(--u-s4)}
  .st-film__facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--u-s4);row-gap:var(--u-s6);text-align:center}
  .st-film__facts > div:last-child{grid-column:1 / -1}
  /* The story continues on the same dark ground as the hero, so the step between them is one block, not a section break */
  .st-film__reel{padding-top:var(--u-s6)}
  /* Two facts side by side and the third under both, each centred with its figure above its label,
     so the figures share a line and a label on two lines sits balanced under its figure */
  .st-film__facts > div{display:flex;flex-direction:column-reverse;justify-content:flex-end}
  .st-film__facts dd{margin:0 0 var(--u-s2)}
  /* Both labels in two lines, so the pair matches */
  .st-br-phone{display:inline}
  .st-film__stills{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--u-pad-x));padding-inline:var(--u-pad-x);scroll-padding-inline:var(--u-pad-x)}
  .st-film__stills li{flex:0 0 84%;scroll-snap-align:start}
  .st-book__title{font-size:clamp(54px,16vw,80px)}
  .st-manual__title{font-size:clamp(64px,19vw,96px)}
  .st-manual__index{grid-template-columns:minmax(0,1fr);row-gap:var(--u-s5)}
  .st-route__list li{flex-basis:42%}
  .st-close{padding-bottom:var(--u-s7)}
}
/* Short phones: less photograph above the title so the purchase action stays in the first screen */
@media (max-width:699px) and (max-height:740px){
  .st-film__grid{padding-top:150px}
  .st-film__title{font-size:52px}
  .st-film__deck{font-size:18px}
}
@media (max-width:699px) and (max-height:620px){
  .st-film__grid{padding-top:72px}
  .st-film__meta{margin-top:var(--u-s3)}
  .st-film__title{font-size:46px;margin-top:var(--u-s2)}
  .st-film__deck{font-size:17px;margin-top:var(--u-s3)}
  .st-film__actions{margin-top:var(--u-s4)}
}
/* Short landscape phones keep the desktop splits so photographs stay beside their text */
@media (max-width:899px) and (min-width:700px) and (max-height:500px){
  .st-film__stage{display:flex;min-height:0}
  .st-film__bg{display:block}
  .st-film__grid{display:grid}
  .st-film__copy{display:block;grid-column:1 / span 8}
  .st-film__title{font-size:64px}
  .st-film__grid{padding-block:var(--u-s4) var(--u-s5);align-items:start}
  /* Title, then the purchase action, then the deck, so the action clears the Donate/988 rail */
  .st-film__copy{display:flex;flex-direction:column}
  .st-film__meta{margin-top:var(--u-s3)}
  .st-film__title{font-size:50px;margin-top:var(--u-s2)}
  .st-film__actions{order:4;margin-top:var(--u-s4)}
  .st-film__deck{order:5;font-size:18px;margin-top:var(--u-s5)}
  .st-film__frame{position:relative;inset:auto;z-index:0;grid-column:9 / -1;width:100%;margin:0;aspect-ratio:3 / 4}
  .st-film__frame::after{display:none}
  .st-book__grid,.st-manual__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .st-book{--st-lift:64px}
  .st-book__aside{display:block;grid-column:1 / span 4;width:100%}
  .st-book__cover{width:100%;margin-top:0}
  .st-book__copy{grid-row:auto}
  .st-book__copy{grid-column:5 / -1;padding-top:calc(var(--st-lift) + var(--u-s5))}
  .st-manual__copy{grid-column:1 / span 8;grid-row:1}
  .st-manual__cover{grid-column:9 / -1;grid-row:1;order:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .st-reveal-on [data-st-reveal]{opacity:1;transform:none;transition:none}
}