/* ============================================================================
   BMC SCHOOLS — ANIMATED EDUCATIONAL FILM SERIES
   Five sections: a storybook hero, the communication challenge, the five-story
   universe, the process, and the impact close.

   Written mobile-first for real: every rule outside a media query targets a
   ~390px canvas, and larger screens only ever ADD to it through min-width
   blocks. Nothing here is a desktop layout folded back down.

   Layered on top of style.css, which already supplies the design tokens, the
   topbar/footer chrome, the reveal system and the .btn set.

   ---------------------------------------------------------------------------
   GROUND — this is the portfolio's only page on PAPER, and that is deliberate.

   Six case studies sit on near-black. This one is a children's educational
   series, and a warm ivory ground is what lets flat, high-key vector artwork
   read as illustration rather than as footage in a dark cinema. The transition
   is made intentional by leaving the CHROME alone: the topbar and the footer
   keep their #070707 ground and their red mark, so the page opens and closes
   in the portfolio's own colour and the paper is clearly the case study, not
   a different website. Do not lighten the topbar or the footer here.

   COLOUR — one PORTFOLIO ACCENT and five STORY ACCENTS.

   #b162fe (--primary-red, aliased --cs-red) is the PORTFOLIO's mark. It carries
   the shared chrome and nothing else: the topbar arrow, the eyebrow rules,
   .btn--primary, the next-project arrow. It does not change per client, on
   this page or any other.

   The five story accents were SAMPLED off the films themselves, one per story,
   by quantising every second frame of each film and taking the most
   characteristic saturated colour:

     01 Self     #fd7600  the orange identity grid at 1:12
     02 Choices  #0070c3  the deep blue the balanced plate sits on
     03 Health   #a8442c  the brick boundary wall the whole story is set against
     04 Food     #00b678  the green half of the banana-versus-packet comparison
     05 Culture  #6a3d97  the violet of the mother's saree in the market

   Each also has an -ink variant, which is the same hue scaled toward black
   until it clears 4.5:1 on the paper ground. FILL uses the sampled value, TYPE
   and small marks use the ink value. Two of the five needed no darkening
   (#0070c3 is 4.79:1, #a8442c is 5.57:1); the orange and the green did.

   An accent tints one chapter's numerals, rules, meter and play control, and
   nothing else. It never becomes a chapter's ground and never sets a heading:
   five full-bleed colour blocks would turn a case study into a nursery. And
   colour is never the only signal — every active chapter also carries its
   numeral and its name.

     1  Page tokens & gutter
     2  Chrome adjustments
     3  Primitives — sr-only, paper, frames, hand-drawn marks
     4  Editorial furniture — eyebrow, headings, prose, section rhythm
     5  Hero
     6  The challenge
     7  The five-story universe — rail, chapter shell
     8  The five-story universe — chapter layouts & accents
     9  Play control & embeds
    10  The process
    11  Impact & close
    12  Film modal
    13  TABLET         min-width: 768px
    14  DESKTOP        min-width: 1024px
    15  LARGE DESKTOP  min-width: 1440px
    16  Reduced motion
   ========================================================================= */

/* --------------------------------------------------------- 1 tokens & gutter */
:root {
  /* carried from the other studies so the chrome matches exactly */
  --cs-red:   #b162fe;

  /* paper */
  --paper:    #fbf7f0;
  --paper-2:  #f4eee2;
  --paper-3:  #ece3d3;
  --ink:      #24221f;
  --ink-2:    #4b463f;
  --ink-3:    #756d63;
  --line:     rgba(36, 34, 31, .13);
  --line-2:   rgba(36, 34, 31, .26);

  /* five story accents, sampled per film — see the note above */
  --s1: #fd7600;  --s1-ink: #b15200;
  --s2: #0070c3;  --s2-ink: #0070c3;
  --s3: #a8442c;  --s3-ink: #a8442c;
  --s4: #00b678;  --s4-ink: #008155;
  --s5: #6a3d97;  --s5-ink: #6a3d97;

  /* the running chapter accent; each .bmc-story overrides both */
  --s:     var(--s1);
  --s-ink: var(--s1-ink);

  --bmc-space: clamp(4rem, 13vw, 8.5rem);
  --bmc-round: 3px;

  /* 22px of horizontal breathing room on mobile — style.css drops the global
     gutter to 18.4px under 640px, which is tighter than this page wants. */
  --gutter: 1.375rem;
}

/* ------------------------------------------------------- 2 chrome adjustments */
/* style.css makes the topbar transparent under 640px because the homepage hero
   sits behind it. Here it is a dark bar over a paper canvas and it has to keep
   its own ground or the white page shows through the type. */
@media (max-width: 640px) {
  .topbar { background: var(--background); }
}

.cs-brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.cs-brand__arrow {
  width: 1.3rem; height: .6rem; color: var(--text-grey);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.cs-brand:hover .cs-brand__arrow,
.cs-brand:focus-visible .cs-brand__arrow { transform: translateX(-5px); color: var(--cs-red); }

.bmc-body {
  background: var(--paper);
  color: var(--ink-2);
  /* CLIP, NOT HIDDEN: overflow-x:hidden on the body makes it a scroll
     container, and a scroll container between the viewport and a
     position:sticky element stops that element ever sticking. The chapter
     rail depends on this staying `clip`. */
  overflow-x: clip;
}

/* The global grain is tuned for a near-black ground; at .035 with overlay it
   turns to mud on paper. Screen at a third of the strength reads as tooth. */
.bmc-body .grain { opacity: .05; mix-blend-mode: multiply; }

/* Focus rings: the global red ring is for the dark ground. On paper it needs
   the ink underneath it to stay visible over pale artwork. */
.bmc-body :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.topbar :focus-visible, .foot :focus-visible, .bmc-modal :focus-visible {
  outline-color: var(--cs-red);
}

/* .btn--text is written for white-on-black; on paper it needs the ink. */
.bmc-body .btn--text { color: var(--ink-2); border-bottom-color: var(--line-2); }
.bmc-body .btn--text:hover { color: var(--ink); border-bottom-color: var(--cs-red); }
.bmc-body .btn--primary { color: var(--ink); background: rgba(177, 98, 254, .07); }
.bmc-body .btn--primary:hover { color: #fff; background: var(--cs-red); }

/* ============================================================= 3 primitives */
.bmc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* THE frame. One mount, used by every still on the page, so there is a single
   border, a single corner and a single shadow to maintain. The white mount is
   what makes a flat vector frame read as something laid on a table rather than
   as a coloured rectangle bleeding into the paper.

   No aspect-ratio anywhere: every <img> carries real width/height attributes,
   so the box's ratio comes off the file before it loads. That is what keeps
   this page free of layout shift and free of crops. */
.bmc-frame,
.bmc-chal__frames figure,
.bmc-story__frame,
.bmc-story__portrait,
.bmc-panel figure,
.bmc-build li,
.bmc-cycle li,
.bmc-cast li {
  margin: 0;
}

.bmc-chal__frames figure img,
.bmc-story__frame img,
.bmc-story__portrait img,
.bmc-panel figure img,
.bmc-build li img,
.bmc-cycle li img,
.bmc-cast li img,
.bmc-play__poster,
.bmc-room__board img {
  display: block;
  width: 100%; height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
  box-shadow: 0 12px 30px -22px rgba(36, 34, 31, .55);
}

figcaption,
.bmc-build span,
.bmc-cast span {
  margin-top: .65rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
}

/* Hand-drawn marks. Two of them on the whole page — one under the hero's
   impact line and one under the closing statement — drawn as a stroke that
   writes itself in once. Sparingly is the point. */
.bmc-underline {
  display: block;
  width: 100%; height: .7rem;
  margin-top: .35rem;
  overflow: visible;
}
.bmc-underline path {
  fill: none;
  stroke: var(--cs-red);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.is-in .bmc-underline path,
.bmc-underline.is-in path { animation: bmc-draw 1.3s var(--ease-out) .35s forwards; }
@keyframes bmc-draw { to { stroke-dashoffset: 0; } }

/* =================================================== 4 editorial furniture */
.bmc-eyebrow { color: var(--ink-3); }
.bmc-eyebrow .cs-eyebrow__rule { background: var(--cs-red); }
.cs-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
}
.cs-eyebrow__rule { width: 1.6rem; height: 1px; flex: none; }
.bmc-eyebrow--centre { justify-content: center; }

.bmc-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 12.5vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-top: 1rem;
}
.bmc-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.95rem, 8vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-top: .85rem;
  max-width: 20ch;
}
.bmc-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 5.2vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
}

.bmc-lede {
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: 1rem; line-height: 1.62;
  color: var(--ink-2);
}

.bmc-prose { margin-top: 1.4rem; max-width: 52ch; }
.bmc-prose p + p { margin-top: .9rem; }
.bmc-prose p { font-size: .95rem; line-height: 1.72; color: var(--ink-2); }
.bmc-prose--wide { max-width: 58ch; }
.bmc-prose--centre { margin-inline: auto; text-align: center; }

.bmc-sec { padding-block: var(--bmc-space); }
.bmc-sec__head--centre { text-align: center; }
.bmc-sec__head--centre .bmc-h2 { margin-inline: auto; }

/* ==================================================================== 5 hero */
.bmc-hero {
  position: relative;
  padding-top: clamp(2.2rem, 9vw, 4rem);
  padding-bottom: clamp(3rem, 10vw, 5rem);
  /* the ground lifts very slightly toward the top, like a lit page */
  background:
    radial-gradient(120% 70% at 50% 0%, #fffdf8 0%, rgba(255, 253, 248, 0) 60%),
    var(--paper);
}

.bmc-impact-line {
  margin-top: 1.6rem;
  max-width: 26ch;
  font-family: var(--font-serif);
  font-weight: 500; font-style: italic;
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink);
}

.bmc-tags {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-top: 1.9rem;
}
.bmc-tags li {
  padding: .42rem .75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}

/* the composition ---------------------------------------------------------
   On a phone this is the centre frame with two cards tucked into its corners.
   The other three are display:none rather than shrunk — five cards at 390px
   is confetti, which this page is explicitly not. */
.bmc-stage { margin-top: 2.4rem; }
.bmc-stage__field {
  position: relative;
  padding-block: 1.2rem 2.2rem;
}
.bmc-stage__path { display: none; }

.bmc-stage__centre {
  margin: 0;
  transform: rotate(-.6deg);
}
.bmc-stage__centre img {
  display: block; width: 100%; height: auto;
  background: #fff;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
  box-shadow: 0 26px 50px -34px rgba(36, 34, 31, .8);
}

.bmc-stage__card {
  position: absolute;
  width: 42%;
  padding: .3rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
  box-shadow: 0 16px 34px -24px rgba(36, 34, 31, .8);
  /* --px/--py are written by the parallax handler; they stay 0 without JS */
  transform:
    translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0)
    rotate(var(--rot, 0deg));
  transition: transform .8s var(--ease-out);
}
.bmc-stage__card img { display: block; width: 100%; height: auto; border-radius: 2px; }

.bmc-stage__card--self    { --rot: -4deg; left: -3%;  top: 0; }
.bmc-stage__card--culture { --rot: 5deg;  right: -3%; bottom: 0; }
.bmc-stage__card--choices,
.bmc-stage__card--health,
.bmc-stage__card--food { display: none; }

/* facts ------------------------------------------------------------------- */
.bmc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.6rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
  overflow: hidden;
}
.bmc-fact {
  display: flex; flex-direction: column-reverse; gap: .2rem;
  padding: 1.1rem 1rem 1.2rem;
  background: var(--paper);
}
.bmc-fact dt {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.bmc-fact dd { margin: 0; }
.bmc-fact__fig {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--ink);
}
.bmc-fact__text {
  display: block;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(.95rem, 3.7vw, 1.3rem);
  line-height: 1.2;
  color: var(--ink);
}
/* Four facts in a 2x2 grid. The fourth is NOT spanned across the bottom row:
   spanning it leaves an empty cell beside the third, and a hole in a
   four-figure block reads as a missing statistic. */

/* scroll indicator --------------------------------------------------------- */
.bmc-scroll {
  display: flex; align-items: center; gap: .7rem;
  width: max-content;
  margin: 2.4rem auto 0;
  padding: .5rem .2rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color .3s var(--ease);
}
.bmc-scroll:hover { color: var(--ink); }
.bmc-scroll__line {
  display: block; width: 1px; height: 2.2rem;
  background: linear-gradient(var(--line-2), transparent);
}
.bmc-scroll:hover .bmc-scroll__line { animation: bmc-drop 1.4s var(--ease) infinite; }
@keyframes bmc-drop {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50%      { transform: scaleY(.6); transform-origin: top; }
}

/* =========================================================== 6 the challenge */
.bmc-chal { background: var(--paper-2); border-block: 1px solid var(--line); }

.bmc-needs { margin-top: 2.2rem; }
.bmc-needs__title {
  font-family: var(--font-cond); font-weight: 500;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.bmc-needs__list { margin-top: .2rem; }
.bmc-needs__list li {
  display: flex; align-items: baseline; gap: .85rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem; line-height: 1.5;
  color: var(--ink);
}
.bmc-needs__num {
  flex: none;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .66rem; letter-spacing: .1em;
  color: var(--cs-red);
}

.bmc-chal__frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.8rem;
}
.bmc-pin--a { grid-column: 1 / -1; }

/* ===================================== 7 five-story universe — rail & shell */
.bmc-stories { position: relative; padding-bottom: 0; }
/* This head IS the .shell — it carries both classes — so it must not set a
   width or a margin of its own. Doing so takes it out of the shared content
   column and the block stops lining up with every other section on the page:
   at 1920px a narrowed shell sat 220px left of everything else, and at 2560px
   540px left of it. The measure belongs on the children, which already have
   one (.bmc-h2 is 20ch, .bmc-stories__note is 50ch), so there is nothing to
   constrain here. Do not reintroduce max-width or margin-inline on a .shell. */
.bmc-stories__note {
  margin-top: 1.2rem;
  max-width: 50ch;
  font-size: .95rem; line-height: 1.7;
  color: var(--ink-2);
}

/* The rail is a DESKTOP affordance. Below 1024px it is not rendered at all
   and each chapter carries its own numeral, name and meter instead — the
   mobile reader never depends on something staying stuck to the top. */
.bmc-rail { display: none; }

.bmc-story {
  --s: var(--s1);
  --s-ink: var(--s1-ink);
  padding-block: clamp(3.2rem, 11vw, 5.5rem);
  border-top: 1px solid var(--line);
}
.bmc-story:first-of-type { border-top: 0; }

.bmc-story__inner { display: grid; gap: 1.6rem; }

.bmc-story__head { position: relative; }
.bmc-story__index {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.bmc-story__num {
  font-size: 1.05rem; font-weight: 500; letter-spacing: .04em;
  color: var(--s-ink);
}
.bmc-meter {
  display: flex; gap: 4px;
  margin-top: .75rem;
}
.bmc-meter i {
  width: 1.5rem; height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.bmc-meter i.is-on { background: var(--s); }

.bmc-story__kicker {
  margin-top: 1.1rem;
  font-family: var(--font-cond); font-weight: 500;
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--s-ink);
}
.bmc-story__title {
  margin-top: .35rem;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 8.6vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--ink);
}
.bmc-story__theme {
  margin-top: .7rem;
  padding-left: .8rem;
  border-left: 2px solid var(--s);
  font-family: var(--font-cond); font-weight: 300;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.bmc-story__line {
  margin-top: 1rem;
  max-width: 38ch;
  font-size: .98rem; line-height: 1.62;
  color: var(--ink-2);
}

/* ================================ 8 chapter accents (order matters, not hue) */
.bmc-story--01 { --s: var(--s1); --s-ink: var(--s1-ink); }
.bmc-story--02 { --s: var(--s2); --s-ink: var(--s2-ink); }
.bmc-story--03 { --s: var(--s3); --s-ink: var(--s3-ink); }
.bmc-story--04 { --s: var(--s4); --s-ink: var(--s4-ink); }
.bmc-story--05 { --s: var(--s5); --s-ink: var(--s5-ink); }

/* Story 05 is the colourful one: the only chapter that changes the ground,
   and it does it with a 4% wash of its own violet rather than a block of it. */
.bmc-story--05 {
  background:
    radial-gradient(90% 60% at 82% 12%, rgba(106, 61, 151, .07), rgba(106, 61, 151, 0) 70%),
    radial-gradient(70% 50% at 10% 88%, rgba(253, 118, 0, .06), rgba(253, 118, 0, 0) 70%),
    var(--paper);
}

.bmc-story__portrait {
  width: 58%;
  max-width: 15rem;
}

/* ================================================== 9 play control & embeds */
.bmc-play {
  position: relative;
  display: block;
  width: 100%;
  margin: 0; padding: 0;
  border: 0; background: none;
  font: inherit; color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bmc-play__poster { transition: transform .7s var(--ease-out); }
.bmc-play:hover .bmc-play__poster { transform: scale(1.012); }

.bmc-play__badge {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--s);
  box-shadow: 0 10px 26px -10px rgba(36, 34, 31, .7);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.bmc-play__badge svg { width: 1.2rem; height: 1.2rem; fill: #fff; margin-left: 2px; }
.bmc-play:hover .bmc-play__badge,
.bmc-play:focus-visible .bmc-play__badge {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 30px -10px rgba(36, 34, 31, .8);
}

.bmc-play__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: .7rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-cond); font-weight: 400;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
}
.bmc-play__cta { color: var(--s-ink); }
.bmc-play__time { color: var(--ink-3); font-weight: 300; }
.bmc-play:hover .bmc-play__bar { border-bottom-color: var(--s); }

/* Responsive 16:9 box for the no-JS embeds and for the modal stage. */
.bmc-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #100f0e;
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
  overflow: hidden;
}
.bmc-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ============================================================= 10 the process */
.bmc-process { background: var(--paper-2); border-block: 1px solid var(--line); }

/* The seven stages, set in type. On a phone this is a two-column list; from
   the tablet up it becomes one horizontal run with rules between the steps. */
.bmc-chain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.6rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
  overflow: hidden;
}
.bmc-chain__step {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .9rem .85rem;
  background: var(--paper-2);
  font-family: var(--font-cond); font-weight: 400;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.bmc-chain__num {
  font-size: .62rem; font-weight: 300; letter-spacing: .1em;
  color: var(--cs-red);
}
.bmc-chain__step--last {
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--paper);
}
.bmc-chain__step--last .bmc-chain__num { color: var(--red-bright); }

.bmc-panel { margin-top: clamp(2.8rem, 9vw, 4.5rem); }
.bmc-panel__head { max-width: 46ch; }
.bmc-panel__head p {
  margin-top: .8rem;
  font-size: .92rem; line-height: 1.7;
  color: var(--ink-2);
}

.bmc-cast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
}
.bmc-cast li:last-child { grid-column: 1 / -1; width: calc(50% - .55rem); }
.bmc-cast span { display: block; }

.bmc-build {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
  counter-reset: build;
}
.bmc-build span { display: flex; align-items: baseline; gap: .45rem; }
.bmc-build b {
  font-weight: 400; font-size: .62rem;
  color: var(--s2-ink);
}

.bmc-cycle {
  display: grid;
  gap: .9rem;
  margin-top: 1.8rem;
}

.bmc-panel--pair {
  display: grid;
  gap: 1.4rem;
}

/* =========================================================== 11 impact & close */
.bmc-impact { padding-bottom: clamp(3rem, 9vw, 5rem); }

/* A board on a wall with a chalk rail under it. Three rules and a gradient —
   enough to place the artwork in a room without pretending to be a photograph
   of one. */
.bmc-room {
  position: relative;
  margin-top: 2.6rem;
  padding: clamp(1.1rem, 5vw, 2.4rem) clamp(1.1rem, 5vw, 2.4rem) 0;
  background:
    linear-gradient(180deg, #f7f1e6 0%, #efe6d6 100%);
  border: 1px solid var(--line);
  border-radius: var(--bmc-round);
}
.bmc-room__board {
  padding: .55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 30px 60px -40px rgba(36, 34, 31, .85);
}
.bmc-room__board img { border: 0; box-shadow: none; }
.bmc-room__rail {
  height: 10px;
  margin: 1rem calc(clamp(1.1rem, 5vw, 2.4rem) * -1) 0;
  background: linear-gradient(180deg, #ddd0ba, #c9b99f);
  border-top: 1px solid rgba(36, 34, 31, .08);
}
.bmc-room__cap {
  padding: .8rem 0 1rem;
  text-align: center;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}

.bmc-impact .bmc-prose--centre { margin-top: 2.6rem; }

.bmc-final {
  margin: 2.8rem auto 0;
  text-align: center;
}
/* The measure is set on the <p>, not on the <blockquote>: ch resolves against
   the element's OWN font-size, and the blockquote inherits body copy — 24ch
   there is a quarter of the width it is on the display type inside it. */
.bmc-final p {
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.5rem, 7vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
.bmc-underline--final { max-width: 22rem; margin-inline: auto; }

.bmc-credit {
  margin: 2.4rem auto 0;
  max-width: 30rem;
  text-align: center;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .7rem; letter-spacing: .12em;
  line-height: 1.7;
  color: var(--ink-3);
}

.bmc-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  justify-content: center;
  margin-top: 2.6rem;
}
/* The shared .btn is 40px tall at this font size. Raised to 44 here rather
   than in style.css, which six live pages depend on. */
.bmc-cta .btn { min-height: 44px; }

.bmc-next {
  display: flex; flex-direction: column; gap: .35rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.cs-next__label {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.cs-next__link {
  display: inline-flex; align-items: center; gap: .9rem;
  min-height: 44px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.25rem, 5.4vw, 1.6rem);
  color: var(--ink);
  transition: color .3s var(--ease);
}
.cs-next__link .arrow { width: 2.1rem; color: var(--cs-red); transition: transform .35s var(--ease); }
.cs-next__link:hover { color: var(--cs-red); }
.cs-next__link:hover .arrow { transform: translateX(6px); }

/* ============================================================= 12 film modal */
.bmc-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--gutter);
}
.bmc-modal[hidden] { display: none; }

.bmc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 11, 10, .88);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.bmc-modal.is-open .bmc-modal__backdrop { opacity: 1; }

.bmc-modal__panel {
  position: relative;
  width: 100%;
  max-width: min(100%, 1180px);
  opacity: 0;
  transform: translateY(10px) scale(.99);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.bmc-modal.is-open .bmc-modal__panel { opacity: 1; transform: none; }

.bmc-modal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .5rem 1rem;
  padding-bottom: .8rem;
}
.bmc-modal__index {
  grid-column: 1;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-grey);
}
.bmc-modal__title {
  grid-column: 1;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  line-height: 1.15;
  color: var(--text-white);
}
.bmc-modal__close {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(245, 245, 245, .3);
  border-radius: 50%;
  background: none;
  color: var(--text-white);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.bmc-modal__close svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.bmc-modal__close:hover { border-color: var(--cs-red); color: var(--cs-red); }

.bmc-modal__stage { position: relative; }
.bmc-modal__stage .bmc-embed { border-color: rgba(245, 245, 245, .16); }

/* Shown instead of the player when the page is opened straight off disk:
   YouTube will not configure a player for a page with no http(s) origin, and
   no markup or parameter changes that. It deliberately carries no link out. */
.bmc-modal__note {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  padding: 2rem;
  text-align: center;
  background: #100f0e;
  border: 1px solid rgba(245, 245, 245, .16);
  border-radius: var(--bmc-round);
  font-size: .9rem; line-height: 1.7;
  color: var(--text-grey);
}

/* ================================================= 13 TABLET  min-width 768px */
@media (min-width: 768px) {
  :root { --gutter: clamp(1.5rem, 3.2vw, 2.75rem); }

  .bmc-hero__inner { padding-top: 1rem; }

  .bmc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bmc-fact { padding: 1.4rem 1.2rem 1.5rem; }

  .bmc-stage__field { padding-block: 2rem 3rem; }
  .bmc-stage__card { width: 30%; }
  .bmc-stage__card--choices { display: block; --rot: 3deg; right: 2%; top: 4%; }
  .bmc-stage__card--health  { display: block; --rot: -3deg; left: 4%; bottom: 2%; }
  /* The two outer cards tuck into the gutter, and the tuck is measured in
     gutters rather than in per cent of the stage: a percentage here is wider
     than the shell's padding and pushed the cards past the viewport edge.
     0.6 rather than 1 leaves room for the rotation — a 4deg card's bounding
     box is several pixels wider than its layout box, and body overflow-x is
     `clip`, which Safari below 16 does not support and does not clip. */
  .bmc-stage__card--self    { left: calc(var(--gutter) * -.6); top: 8%; }
  .bmc-stage__card--culture { right: calc(var(--gutter) * -.6); bottom: 12%; }

  .bmc-chal__frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
  .bmc-pin--a { grid-column: 1 / 3; }
  .bmc-pin--b { align-self: end; }

  .bmc-story__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.8rem 1.6rem;
    align-items: start;
  }
  .bmc-story__head    { grid-column: 1 / 8; }
  .bmc-story__stage   { grid-column: 1 / 13; }
  .bmc-story__portrait{ grid-column: 9 / 13; grid-row: 1; width: 100%; max-width: none; }
  .bmc-story__frame--wide  { grid-column: 1 / 9; }
  .bmc-story__frame--tall  { grid-column: 9 / 13; }
  .bmc-story__frame--bleed { grid-column: 1 / 13; }

  .bmc-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bmc-chain__step--last { grid-column: auto; }

  .bmc-cast { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
  .bmc-cast li:last-child { grid-column: auto; width: auto; }
  .bmc-build { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
  .bmc-cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bmc-panel--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bmc-panel--split .bmc-panel__head { max-width: 40ch; }

  .bmc-next {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 1rem 2rem;
  }
}

/* ================================================ 14 DESKTOP  min-width 1024px */
@media (min-width: 1024px) {
  .bmc-hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - 4rem);
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  }
  .bmc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .bmc-h1 { font-size: clamp(3.4rem, 5.2vw, 4.9rem); }
  .bmc-lede { font-size: 1.05rem; }
  .bmc-stage { margin-top: 0; }
  .bmc-stage__field { padding-block: 1rem 1rem; }

  /* the pencil path only exists where there is room for the cards it joins */
  .bmc-stage__path {
    display: block;
    position: absolute; inset: -6% -6% 0;
    width: 112%; height: 106%;
    pointer-events: none;
  }
  .bmc-stage__path path {
    fill: none;
    stroke: rgba(36, 34, 31, .17);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
  }
  .bmc-stage.is-in .bmc-stage__path path { animation: bmc-draw 2.4s var(--ease-out) .3s forwards; }

  .bmc-stage__card { width: 27%; }
  .bmc-stage__card--food { display: block; --rot: -6deg; right: 6%; top: -6%; width: 22%; }
  /* same gutter-bounded tuck as the tablet block, for the same reason */
  .bmc-stage__card--self    { left: calc(var(--gutter) * -.8); top: 6%; }
  .bmc-stage__card--choices { right: calc(var(--gutter) * -.6); top: 26%; }
  .bmc-stage__card--health  { left: -5%; bottom: 4%; }
  .bmc-stage__card--culture { right: 2%; bottom: -4%; width: 24%; }

  .bmc-facts { margin-top: clamp(2rem, 4vw, 3.2rem); }
  .bmc-scroll { margin-top: 1.8rem; }

  .bmc-chal__inner {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .bmc-chal__frames { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bmc-pin--a { grid-column: 1 / -1; }
  .bmc-pin--c { margin-top: -2.5rem; }
  .bmc-pin--d { grid-column: 1 / -1; width: 72%; margin-left: auto; }

  /* ---- the chapter rail --------------------------------------------------
     Sticky under the topbar for the length of the section only. It is a list
     of links, so it works with JavaScript off; the JS only adds the active
     state as the reader scrolls. */
  .bmc-rail {
    display: block;
    position: sticky;
    top: clamp(48px, 4vw, 62px);
    z-index: 20;
    margin-top: 2.6rem;
    padding-block: .1rem;
    background: rgba(251, 247, 240, .93);
    backdrop-filter: blur(8px);
    border-block: 1px solid var(--line);
  }
  .bmc-rail__list { display: flex; gap: clamp(.5rem, 2vw, 2rem); }
  .bmc-rail__link {
    display: flex; align-items: baseline; gap: .5rem;
    /* 44px tall: the rail first appears at 1024px, which is a tablet in
       landscape as often as it is a laptop */
    padding: .78rem .3rem;
    border-bottom: 2px solid transparent;
    font-family: var(--font-cond); font-weight: 400;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-3);
    transition: color .3s var(--ease), border-color .3s var(--ease);
  }
  .bmc-rail__num { font-size: .62rem; font-weight: 300; letter-spacing: .1em; }
  .bmc-rail__link:hover { color: var(--ink); }
  /* Active chapter: colour AND weight AND an underline. Never colour alone. */
  .bmc-rail__link.is-active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--rail-accent, var(--cs-red));
  }
  .bmc-rail__link.is-active .bmc-rail__num { color: var(--rail-accent, var(--cs-red)); font-weight: 500; }

  .bmc-story { padding-block: clamp(4.5rem, 8vw, 7rem); }
  .bmc-story__inner { gap: 2.2rem 2rem; }
  .bmc-story__head { grid-column: 1 / 6; }
  .bmc-story__title { font-size: clamp(2.4rem, 3vw, 3.1rem); }

  /* Five layouts. Same markup in every chapter — only the placement moves,
     which is what keeps the section from reading as one card repeated. */
  .bmc-story--01 .bmc-story__stage    { grid-column: 6 / 13; grid-row: 1 / 3; }
  .bmc-story--01 .bmc-story__portrait { grid-column: 1 / 4; grid-row: 2; }
  .bmc-story--01 .bmc-story__frame--wide { grid-column: 4 / 10; }
  .bmc-story--01 .bmc-story__frame--tall { grid-column: 10 / 13; align-self: end; }

  .bmc-story--02 .bmc-story__frame--bleed { grid-column: 1 / 13; grid-row: 1; }
  .bmc-story--02 .bmc-story__head      { grid-column: 1 / 5; grid-row: 2; }
  .bmc-story--02 .bmc-story__stage     { grid-column: 5 / 11; grid-row: 2; }
  .bmc-story--02 .bmc-story__portrait  { grid-column: 11 / 13; grid-row: 2; }
  .bmc-story--02 .bmc-story__frame--tall { grid-column: 5 / 9; grid-row: 3; }

  .bmc-story--03 .bmc-story__stage     { grid-column: 1 / 8; grid-row: 1 / 3; }
  .bmc-story--03 .bmc-story__head      { grid-column: 8 / 13; grid-row: 1; }
  .bmc-story--03 .bmc-story__portrait  { grid-column: 8 / 11; grid-row: 2; align-self: start; }
  .bmc-story--03 .bmc-story__frame--wide { grid-column: 1 / 8; grid-row: 3; }
  .bmc-story--03 .bmc-story__frame--tall { grid-column: 8 / 13; grid-row: 3; align-self: end; }

  .bmc-story--04 .bmc-story__frame--bleed { grid-column: 1 / 9; grid-row: 1 / 3; }
  .bmc-story--04 .bmc-story__head      { grid-column: 9 / 13; grid-row: 1; }
  .bmc-story--04 .bmc-story__portrait  { grid-column: 9 / 13; grid-row: 2; align-self: start; }
  .bmc-story--04 .bmc-story__stage     { grid-column: 1 / 8; grid-row: 3; }
  .bmc-story--04 .bmc-story__frame--tall { grid-column: 8 / 13; grid-row: 3; align-self: end; }

  .bmc-story--05 .bmc-story__head      { grid-column: 1 / 5; grid-row: 1; }
  .bmc-story--05 .bmc-story__portrait  { grid-column: 1 / 5; grid-row: 2; align-self: start; }
  .bmc-story--05 .bmc-story__stage     { grid-column: 5 / 13; grid-row: 1 / 3; }
  .bmc-story--05 .bmc-story__frame--wide { grid-column: 1 / 9; grid-row: 3; }
  .bmc-story--05 .bmc-story__frame--tall { grid-column: 9 / 13; grid-row: 3; align-self: end; }

  .bmc-chain { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .bmc-chain__step { flex-direction: column; gap: .45rem; padding: 1.1rem 1rem 1.2rem; }

  .bmc-panel--split {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
    gap: 2.4rem;
    align-items: center;
  }
  .bmc-panel--split .bmc-cycle { margin-top: 0; }

  .bmc-room { padding-inline: clamp(2.4rem, 6vw, 5rem); }
  .bmc-room__board { max-width: 62rem; margin-inline: auto; }
  .bmc-room__rail { margin-inline: calc(clamp(2.4rem, 6vw, 5rem) * -1); }
  .bmc-final { max-width: 26ch; }
  .bmc-final p { font-size: clamp(2rem, 3vw, 2.8rem); }
}

/* ========================================== 15 LARGE DESKTOP  min-width 1440px */
@media (min-width: 1440px) {
  :root { --bmc-space: clamp(6rem, 8vw, 10rem); }
  .bmc-h1 { font-size: 5.2rem; }
  .bmc-h2 { font-size: 3rem; }
  .bmc-lede { font-size: 1.1rem; max-width: 42ch; }
  .bmc-story__inner { gap: 2.6rem 2.2rem; }
}

/* ========================================================= 16 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bmc-underline path,
  .bmc-stage__path path { stroke-dashoffset: 0; animation: none; }
  .bmc-stage__card { transition: none; transform: rotate(var(--rot, 0deg)); }
  .bmc-play__poster,
  .bmc-play:hover .bmc-play__poster { transform: none; transition: none; }
  .bmc-scroll:hover .bmc-scroll__line { animation: none; }
  .bmc-modal__panel,
  .bmc-modal__backdrop { transition: none; }
  .bmc-modal__panel { opacity: 1; transform: none; }
}