/*
  Story template: the long-form layout shared by case studies (Figma "CASE STUDY TEMPLATE" 147:2) and articles
  (Figma "ARTICLE TEMPLATE" 147:155). Page-level blocks; each maps to one content block, and a page uses the ones it
  needs in any order (<body class="story-page">):

    .story-hero      full-bleed top image under the transparent header           (image, alt, focal point)
    .story-head      title, dek, byline, read time, share, rule, italic intro    (title, dek, author, readTime, intro)
    .story-figure    wide image from the text column to the right edge          (image, alt, caption? or label?, height?)
    .story-figure--carousel  the same frame holding several images that slide    (images[], caption?)
    .prose        rich text: h2, p, ul, a, strong                             (rich text)
    .story-rule   an edge-to-edge rule between sections                       (divider)
    .gallery      stacked gallery: one or several images, one caption         (/shared/gallery.css)
    .split        image + "Questions worth asking" Q&A accordion              (/shared/split.css + accordion.css)
    .client-quote client quote                                                (/shared/quote.css)
    .story-note   closing italic line under a rule from the column to the edge (note)
    .story-footnote  a small grey italic aside on the text column               (footnote)
    .related      "Related insights": linked teasers on the text column        (/shared/related.css)
    <ekko-footer> site footer                                                 (/shared/footer.css)

  Text column: starts at 25.86rem and is 82.6rem wide (Figma x 258.6, w 826). Rules are white hairlines.
  A page whose content file says "design": 2 (Figma Great Dane 416:990) adds story-page--design-2: 560px figures,
  78px caption strips, 72px from a figure to the text after it. The others keep the earlier frames' 555 / 43 / 47.
*/
.story-page{--col:25.86rem;--col-w:82.6rem}

/* Hero: 1440×808 full-bleed image; the site header floats over it */
.story-hero{position:relative;height:var(--story-hero-h);overflow:hidden;background:#000}   /* a photo ground: never flips */
.story-hero img{display:block;width:100%;height:100%;object-fit:cover}
/* Desktop: the image is framed as if it filled the screen and the hero shows its top 808px, so a page transition can
   hand a full-screen image over to the hero without the picture moving (page-transition.js, image mode). */
@media (min-width:768px){.story-hero img{height:max(100%,100vh);height:max(100%,100lvh)}}


/* Title block */
.story-head{position:relative;padding:7.17rem 4rem 0 var(--col)}
.story-head__title{width:var(--col-w);margin:0;font-family:"Cal Sans",Inter,sans-serif;font-weight:400;font-size:6rem;line-height:5.4rem;letter-spacing:.12rem}
.story-head__dek{width:var(--col-w);margin:2.24rem 0 0;font-weight:500;font-size:3.4rem;line-height:3.6rem}
.story-head__by{margin:4.47rem 0 0;font-family:"Cal Sans",Inter,sans-serif;font-size:1.4rem;line-height:2.2rem;letter-spacing:.028rem;text-transform:uppercase}
.story-head__time{margin:0;font-size:1.4rem;line-height:2.2rem;letter-spacing:.028rem}
.story-head__rule{margin:3.38rem 0 0;border:0;border-top:var(--rule) solid var(--fg)}
.story-head__intro{width:var(--col-w);margin:3.65rem 0 0;font-weight:500;font-style:italic;font-size:1.8rem;line-height:3rem}

/* Share: a vertical red tab with a white icon box (Figma 147:101). Shares the page, or copies its link. */
.share{position:absolute;left:10.96rem;top:8.76rem;display:flex;flex-direction:column;width:4.99rem;padding:0;color:#fff}   /* white on red: never flips */
.share__label{display:block;height:10.54rem;padding-top:2rem;background:var(--red);writing-mode:vertical-rl;font-weight:500;font-size:2.4rem;line-height:4.99rem;letter-spacing:.0014rem}
.share__icon{display:grid;place-items:center;width:5rem;height:5rem;background:var(--box)}
.share__icon img{width:2rem;height:2rem;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.share:hover .share__icon img{transform:rotate(-20deg)}

/* Wide figure: rules run edge to edge; the image starts at the text column (Figma 147:53, 130–132; article 147:236,
   147:241). The caption is optional. --h sets the image height (default 555px; the article's are 547 and 591):
     <figure class="story-figure" style="--h:54.68rem"><div class="story-figure__media"><img src alt></div>[<figcaption>…</figcaption>]</figure> */
.story-figure{margin:4.76rem 0 0;border-top:var(--rule) solid var(--fg);border-bottom:var(--rule) solid var(--fg)}
.story-figure__media{padding-left:var(--col)}
.story-figure__media:has(+ figcaption){border-bottom:var(--rule) solid var(--fg)}      /* the rule above a caption runs edge to edge */
.story-figure__media > img{display:block;width:100%;height:var(--h,55.5rem);object-fit:cover;border-left:var(--rule) solid var(--fg)}
.story-figure figcaption{display:flex;align-items:center;height:var(--cap-h,4.3rem);margin-left:var(--col);padding-left:3.8rem;border-left:var(--rule) solid var(--fg);font-weight:500;font-style:italic;font-size:1.6rem;line-height:3rem;color:var(--grey-3)}
/* --label: a small grey uppercase strip under the image instead of the italic caption
   (DFWB 274:1384):  <figure class="story-figure story-figure--label" style="--h:54.6rem">…<figcaption>Label</figcaption> */
.story-figure--label figcaption{--cap-h:4rem;font-weight:400;font-style:normal;font-size:1.2rem;line-height:1.7rem;color:var(--grey-2);text-transform:uppercase}

/* An image that must show whole (a storyboard's captions): on white, not cropped */
.story-figure__media > img.is-contain{object-fit:contain;background:#fff}   /* a paper ground: never flips */

/* Design 2 (Figma Great Dane 416:990): figures are 560 tall by default, with a 78px caption strip */
.story-page--design-2 .story-figure{--cap-h:7.8rem}
.story-page--design-2 .story-figure__media > img{height:var(--h,56rem)}
.story-page--design-2 .story-figure + .prose{margin-top:7.2rem}   /* 72px from the caption strip to the heading, as after a gallery */

/* Carousel figure (Great Dane 416:1085–1098): the figure's frame and caption around a row of images. The viewport
   runs from the text column's rule to the page's right edge; each image is 1104 wide at 1440, so the next one peeks
   in 53px after a 24px gap. Arrows and swiping come from the gallery (/shared/gallery.css, gallery.js):
     <figure class="story-figure story-figure--carousel is-multi" data-gallery aria-roledescription="carousel">
       <div class="story-figure__media"><div class="gallery__stage">…</div></div>[<figcaption>…</figcaption>]</figure> */
.story-figure--carousel{--media-h:var(--h,55.5rem);--gap:2.4rem;--peek:5.34rem}
.story-page--design-2 .story-figure--carousel{--media-h:var(--h,56rem)}
.story-figure--carousel .gallery__stage{border-left:var(--rule) solid var(--fg)}

/* Mosaic figure (DFWB 416:926): four images in the figure's frame, edge to edge. The first runs the full height down
   the left third; the second spans the top of the other two thirds; the two small ones share the bottom. A cell's
   image with fit "contain" shows whole on white, and a transcript is read out, as in other figures:
     <figure class="story-figure story-figure--mosaic"><div class="story-figure__media"><div class="story-mosaic">
       <div class="story-mosaic__tall"><img></div><div class="story-mosaic__wide"><img></div>
       <div class="story-mosaic__small"><img></div><div class="story-mosaic__small"><img></div>
     </div></div>[<figcaption>…</figcaption>]</figure>
   The small cells fill the bottom row in order. */
.story-mosaic{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,calc(var(--h,55.5rem) / 2));
  grid-template-areas:"tall wide wide" "tall . .";border-left:var(--rule) solid var(--fg);
}
.story-page--design-2 .story-mosaic{grid-template-rows:repeat(2,calc(var(--h,56rem) / 2))}
.story-mosaic > div{min-width:0;overflow:hidden}
.story-mosaic img{display:block;width:100%;height:100%;object-fit:cover}
.story-mosaic img.is-contain{object-fit:contain;background:#fff}   /* a paper ground: never flips */
.story-mosaic__tall{grid-area:tall}
.story-mosaic__wide{grid-area:wide}

/* Rich text */
.prose{width:var(--col-w);margin:4.68rem 0 0 var(--col)}
.prose h2{margin:0 0 2rem;font-weight:500;font-size:4.4rem;line-height:5rem}
.prose * + h2{margin-top:4rem}
.prose p,.prose li{margin:0 0 2rem;font-size:1.8rem;line-height:3rem}
.prose strong{font-weight:700}
.prose a{text-decoration:underline;text-underline-offset:.2em}
.prose a:hover{color:var(--grey)}
/* Lists read as paragraphs with a bold lead-in (Figma draws no bullets) */
.prose ul{margin:0 0 2rem;padding:0;list-style:none}
.prose li:last-child{margin-bottom:0}
/* <ul class="bullets">: a plain bulleted list (DFWB 274:1428), the items set close together */
.prose ul.bullets{padding-left:2.7rem;list-style:disc}
.prose ul.bullets > li{margin-bottom:0}
/* <ul class="bullets spaced">: bullets with the items 14px apart (Great Dane 416:1064) */
.prose ul.bullets.spaced > li{margin-bottom:1.4rem}
.prose ul.bullets.spaced > li:last-child{margin-bottom:0}
/* <ul class="dashes">: a list led by em dashes, the lines after the first hanging under the text; nested in a list
   item, it steps in under its lead-in (Great Dane 416:1062) */
.prose ul.dashes{padding:0;list-style:none}
.prose li > ul.dashes{margin:2rem 0 0 3.25rem}
.prose ul.dashes li{position:relative;margin-bottom:2rem;padding-left:2.4rem}
.prose ul.dashes li:last-child{margin-bottom:0}
.prose ul.dashes li::before{content:"—";position:absolute;left:0}
/* <p class="lead">: a larger opening line under a heading (Great Dane 416:1064) */
.prose p.lead{margin-bottom:3.2rem;font-size:2.4rem;line-height:3rem}

/* Divider: an edge-to-edge rule between sections (DFWB 274:1429) */
.story-rule{margin:4rem 0 0;border:0;border-top:var(--rule) solid var(--fg)}
.story-rule + .prose{margin-top:5.6rem}
.prose > :last-child{margin-bottom:0}

/* Note: a closing italic line (an article's "let's talk" sign-off), under a rule from the text column to the right
   edge (Figma Blue-Collar 233:260 + 233:210):  <aside class="story-note"><p>…</p></aside> */
.story-note{margin:5.6rem 0 0 var(--col);padding-top:6.7rem;border-top:var(--rule) solid var(--fg)}
.story-note p{width:var(--col-w);margin:0;font-style:italic;font-size:1.8rem;line-height:3rem;text-box:trim-both cap alphabetic}

/* Footnote: a small grey italic aside on the text column, such as a project's status (Great Dane 416:1063):
     <p class="story-footnote">…</p> */
.story-footnote{width:39.5rem;margin:3.3rem 0 0 var(--col);font-style:italic;font-size:1.4rem;line-height:2.1rem;color:var(--grey);text-box:trim-both cap alphabetic}
.story-footnote + .story-rule{margin-top:4.3rem}

/* Block spacing on the page */
.story-page .gallery:not(.gallery + .gallery){margin-top:5.6rem}   /* back-to-back galleries keep the component's 80 px */
.story-page .gallery + .prose{margin-top:7.2rem}   /* Figma GD: 72 px from the gallery's rule to the text */
.story-page .split{margin-top:6.7rem}
.story-page .client-quote + .split{margin-top:0}   /* the quote band runs straight into the Q&A's top rule */
.story-page .related{margin-top:8rem}
.story-page .story-note + .related{margin-top:6.7rem}

/* ═════════════════════════ PHONES ═════════════════════════ */
@media (max-width:767px){
  .story-page{--col:0rem;--col-w:auto}
  .story-hero{height:60svh;min-height:36rem}

  .story-head{display:flex;flex-direction:column;padding:4rem 2rem 0}
  .story-head__title{width:auto;font-size:4rem;line-height:4rem;letter-spacing:.08rem}
  .story-head__dek{margin-top:1.6rem;font-size:2.2rem;line-height:2.8rem}
  .story-head__by{margin-top:2.4rem}
  .share{position:static;order:1;flex-direction:row;width:max-content;height:4.8rem;margin-top:2.4rem}
  .share__label{height:100%;padding:0 1.6rem;writing-mode:horizontal-tb;font-size:1.8rem;line-height:4.8rem}
  .share__icon{width:4.8rem;height:4.8rem}
  .story-head__rule{order:2;margin-top:2.4rem}
  .story-head__intro{order:3;margin-top:2.4rem;font-size:1.7rem;line-height:2.8rem}

  .story-figure{margin-top:4rem}
  .story-figure__media > img,.story-page--design-2 .story-figure__media > img{height:24rem;border-left:0}
  .story-figure--carousel{--media-h:24rem;--gap:1rem;--peek:2.4rem}
  .story-page--design-2 .story-figure--carousel{--media-h:24rem}
  .story-figure--carousel .gallery__stage{border-left:0}
  .story-mosaic,.story-page--design-2 .story-mosaic{grid-template-rows:repeat(2,12rem);border-left:0}
  .story-figure figcaption{height:auto;min-height:4.4rem;padding:1rem 2rem;border-left:0;font-size:1.4rem;line-height:2rem}

  .prose{margin:4rem 2rem 0}
  .prose h2{font-size:2.8rem;line-height:3.4rem;margin-bottom:1.6rem}
  .prose * + h2{margin-top:3.2rem}
  .prose p,.prose li{margin-bottom:1.6rem;font-size:1.6rem;line-height:2.6rem}
  .prose ul.bullets{padding-left:2.2rem}
  .prose ul.bullets.spaced > li{margin-bottom:1.2rem}
  .prose li > ul.dashes{margin:1.6rem 0 0}
  .prose ul.dashes li{margin-bottom:1.6rem;padding-left:2rem}
  .prose p.lead{margin-bottom:2.4rem;font-size:2rem;line-height:2.8rem}
  .story-figure--label figcaption{min-height:4rem;font-size:1.2rem;line-height:1.7rem}
  .story-rule{margin-top:3.2rem}
  .story-rule + .prose{margin-top:3.2rem}

  .story-page .gallery:not(.gallery + .gallery){margin-top:4rem}
  .story-page .gallery + .prose,.story-page--design-2 .story-figure + .prose{margin-top:4rem}
  .story-page .split{margin-top:4.8rem}
  .story-note{margin:4rem 0 0;padding:3.2rem 2rem 0}
  .story-note p{font-size:1.6rem;line-height:2.6rem}
  .story-footnote{width:auto;margin:3.2rem 2rem 0}
  .story-footnote + .story-rule{margin-top:4rem}
  .story-page .story-note + .related{margin-top:4.8rem}
}