/* ── Slides from version B on the current site (his call, 2026-11-03): the
   shared slide rules of b/css/base.css, scoped to .b-sec so they don't touch
   the rest of the page (no html / body / img rules; the fonts and tokens come
   from css/site.css). Each slide's own look is its b/css/sNN.css, linked as is.
   On this site a cream slide has no ground of its own: the paper shows through. */
.b-sec {
  --black: #181818; --cream: #f7f3ee; --taupe: #7a5034; --navy: #2a4254; --oxblood: #2a4254;
  container-type: inline-size; position: relative; overflow: hidden; color: var(--navy); background: transparent;
}
.b-sec img { display: block; max-width: 100%; }
.b-sec :where(a) { color: inherit; }   /* :where keeps it at one class, so a slide's own link colours win */
.b-sec.on-oxblood { background: var(--oxblood); color: var(--cream); }
.b-sec.on-taupe   { background: var(--taupe);   color: var(--cream); }
.b-sec.on-navy    { background: var(--navy);    color: var(--cream); }
.b-sec.on-black   { background: var(--black);   color: var(--cream); }
.b-w { position: relative; height: 56.18cqw; }
.b-w > * { position: absolute; margin: 0; }

.b-corner { top: 3.2cqw; font: 400 1.13cqw / 1 var(--f-head); text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.b-corner--l { left: 4.146cqw; }
.b-corner--r { right: 3.723cqw; }
.b-page { left: 0; right: 1.6cqw; top: 53.41cqw; text-align: center; font: 400 .88cqw / 1 var(--f-head); }
.b-num { left: 0; right: 0; top: 2.0cqw; text-align: center; font: 400 .93cqw / 1 var(--f-head); letter-spacing: .15em; }
.b-title { left: 0; right: 0; top: 3.972cqw; text-align: center; font: 400 3.139cqw / 1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.b-pic { overflow: hidden; }
.b-pic img { width: 100%; height: 100%; object-fit: cover; }

.js-reveal .b-sec [data-in] { opacity: 0; translate: 0 3em; transition: opacity 1.1s var(--ease), translate 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js-reveal .b-sec [data-in].is-in { opacity: 1; translate: 0 0; }
.js-reveal .b-sec .b-pic[data-in] img { scale: 1.08; transition: scale 1.6s var(--ease); transition-delay: inherit; }
.js-reveal .b-sec .b-pic[data-in].is-in img { scale: 1; }
@media (prefers-reduced-motion: reduce) { .js-reveal .b-sec [data-in] { opacity: 1; translate: none; transition: none; } .js-reveal .b-sec .b-pic[data-in] img { scale: 1; } }

@media (max-width: 749px) {
  .b-w { height: auto; padding: 16cqw 5cqw 14cqw; }
  .b-w > * { position: relative; left: auto; right: auto; top: auto; }
  .b-corner { position: absolute; top: 5cqw; font-size: 2.8cqw; }
  .b-corner--l { left: 5cqw; } .b-corner--r { right: 5cqw; }
  .b-page { right: auto; margin-top: 8cqw; font-size: 2.6cqw; }
  .b-num { font-size: 2.8cqw; margin-bottom: 2.6cqw; }
  .b-title { font-size: 9cqw; white-space: normal; }
}