/* ------------------------------------------------------------------
   Blue Bells Group of Schools - self-contained case study styles.
   Accent colours are sampled from the delivered KVs; replace with the
   official brand values when the client sends the guidelines.
   ------------------------------------------------------------------ */
:root {
  --ink: #13202E;
  --ink-soft: #3B4A5A;
  --muted: #5E6C7A;
  --ground: #F1F4F8;
  --surface: #FFFFFF;
  --rule: #DBE2EA;
  /* official Blue Bells brand colours */
  --accent: #003EAA;
  --bb-yellow: #FFE61C;

  --bbprep: #003EAA;
  --bbms: #14243F;
  --bdbbps: #E8791B;
  /* text-safe variant - the brand orange fails contrast on light grounds */
  --bdbbps-ink: #AE540B;
  --beansprouts: #5B2D96;
  --tbbs: #12325E;

  --display: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --prose: 720px;
  --wide: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 84px;
}

@media (max-width: 680px) {
  :root {
    --header-h: 64px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--header-h);
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}

.preloader.done {
  opacity: 0;
  visibility: hidden;
}

.preloader figure {
  margin: 0;
  text-align: center;
  padding-inline: 24px;
}

.preloader img {
  width: clamp(180px, 34vw, 280px);
  height: auto;
  margin: 0 auto;
}

.preloader .bar {
  width: clamp(140px, 26vw, 200px);
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
  margin: 26px auto 18px;
  overflow: hidden;
}

.preloader .bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: slide 1.2s ease-in-out infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(310%);
  }
}

.preloader figcaption {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- fixed site header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--gutter);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.site-header .brand img {
  height: clamp(26px, 3vw, 36px);
  width: auto;
}

.site-header .badge {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .site-header .badge {
    display: none;
  }
}

/* ---------- case title ----------
   On wide screens the fixed header carries this line as a badge, so here it
   is hidden visually but kept in the DOM for assistive tech and search.
   Below 860px the header badge is gone, so it appears under the banner. */
.tagline {
  background: var(--accent);
  padding-block: 17px 19px;
}

.tagline h1 {
  font-family: var(--display);
  font-size: clamp(15px, 4.3vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}

@media (min-width: 861px) {
  .tagline {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- banner ---------- */
.banner {
  background: var(--accent);
}

/* The five hoardings are not all the same ratio (1.78 to 2.08), so the
   banner fills its frame rather than fitting inside it: no bands, at the
   cost of a small crop on the squarer ones. */
/* The five hoardings are not all one ratio (1.78 to 2.08), so the banner
   fills its frame instead of fitting inside it - no blue bands, at the cost
   of a small crop on the squarer ones. */
.banner .slide-frame {
  aspect-ratio: 2 / 1;
  background: var(--accent);
}

.banner .slide-frame img {
  object-fit: fill;
}

.banner .slide-frame img {
  object-fit: fill;
}

/* ---------- slider ---------- */
.slider {
  position: relative;
}

/* the arrows anchor to this, so the dots row below cannot drag them off-centre */
.slider-viewport {
  position: relative;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  min-width: 0;
}

/* each school's banners share one ratio, so the frame is set to match and
   nothing letterboxes - see the --ar on each slider */
.slide-frame {
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A solid light disc with a drawn chevron: a translucent dark disc washed out
   over pale artwork, and a text chevron sat off-centre on its side bearings. */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(19, 32, 46, .22);
  transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.slider-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.slider-btn:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(19, 32, 46, .3);
}

.slider-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* still visible, plainly not available */
.slider-btn[disabled] {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 560px) {
  .slider-btn {
    width: 38px;
    height: 38px;
  }

  .slider-btn svg {
    width: 15px;
    height: 15px;
  }
}

.slider-btn.prev {
  left: 14px;
}

.slider-btn.next {
  right: 14px;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.slider-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  background: var(--rule);
  transition: background .25s ease, transform .25s ease;
}

.slider-dots button[aria-current="true"] {
  background: var(--accent);
  transform: scale(1.4);
}

/* the dots sit on the image itself, so the banner is image edge to edge and
   no blue band appears between it and the tagline below */
.banner .slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: none;
}

.banner .slider-dots button {
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  background: rgba(255, 255, 255, .55);
}

.banner .slider-dots button[aria-current="true"] {
  background: var(--bb-yellow);
}

/* without JS no arrows or dots are created at all, and the track stays a
   perfectly usable horizontal scroller on its own */

/* ---------- shared containers ---------- */
.prose,
.wide {
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

/* Every section shares one container width, so every section starts on the
   same left edge. Reading measure is capped on the children instead, which
   keeps prose comfortable without knocking the column out of alignment. */
.prose,
.wide {
  max-width: calc(var(--wide) + var(--gutter) * 2);
}

/* .prose > * { max-width: var(--prose); } */

.band {
  padding-block: clamp(56px, 9vw, 108px);
}

.band--tight {
  padding-block: clamp(40px, 6vw, 72px);
}

.band--ground {
  background: var(--ground);
}

.band--ink {
  background: var(--ink);
  color: #EEF2F7;
}

/* the accent is a deep blue, so on the ink band the eyebrow has to lighten
   or it disappears into the background */
.band--ink .eyebrow {
  color: #8FB4F5;
}

.band--ink .soft {
  color: #C3CFDE;
}

.band--blue {
  background: var(--accent);
  color: #fff;
}

.band--blue .eyebrow {
  color: var(--bb-yellow);
}

.band--blue strong {
  color: #fff;
}

.band--blue .soft {
  color: rgba(255, 255, 255, .82);
}

/* ---------- type ---------- */
h1,
h2,
h3,
h4,
.eyebrow,
.chip,
.stat,
.arch th,
.arch td strong,
.lede {
  font-family: var(--display);
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

h2 {
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}

h3 {
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

p {
  margin: 0 0 20px;
}

p:last-child {
  margin-bottom: 0;
}

.lede {
  font-size: clamp(19px, 2.3vw, 24px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.band--ink strong {
  color: #fff;
}

/* ---------- hero ---------- */
.hero {
  background: var(--accent);
  color: #fff;
  padding-block: clamp(64px, 11vw, 136px) clamp(48px, 8vw, 92px);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -55% 45%;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(0, 22, 74, .5), transparent 62%);
  pointer-events: none;
}

.hero>* {
  position: relative;
  z-index: 1;
}

.hero .eyebrow {
  color: var(--bb-yellow);
}

/* the group mark has no knockout version yet, so it sits on a white plate */
.hero-logo {
  display: inline-block;
  background: #fff;
  border-radius: 4px;
  padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2.2vw, 24px);
  margin-bottom: clamp(26px, 3.6vw, 40px);
}

.hero-logo img {
  height: clamp(28px, 3.4vw, 44px);
  width: auto;
  display: block;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  max-width: 17ch;
  text-wrap: balance;
}

.hero .lede {
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #DCE5F0;
}

/* ---------- pull quote ---------- */
.quote {
  margin: 0;
  padding: 30px 0 30px 28px;
  border-left: 3px solid var(--accent);
  font-family: var(--display);
  font-size: clamp(20px, 2.7vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.band--ink .quote {
  border-left-color: #6E9BEE;
  color: #fff;
}

.band--blue .quote {
  border-left-color: var(--bb-yellow);
  color: #fff;
}

/* inside a chapter the quote carries that school's accent */
.chapter .quote {
  border-left-color: var(--school);
}

/* ---------- the sameness chips ---------- */
.category-words {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.category-words li {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 6px 13px;
  background: var(--surface);
}

/* ---------- chapters ---------- */
.chapter {
  border-top: 1px solid var(--rule);
}

.chapter:first-of-type {
  border-top: 0;
}

.chapter-head {
  display: flex;
  gap: clamp(16px, 3vw, 30px);
  align-items: flex-start;
}

.chapter-num {
  font-family: var(--display);
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--school-ink, var(--school));
  padding-top: .45em;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.chapter-head h2 {
  margin-bottom: 10px;
}

.chapter-positioning {
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  color: var(--school-ink, var(--school));
  margin: 0;
  letter-spacing: -.01em;
}

.chapter-body {
  margin-top: clamp(34px, 5vw, 52px);
}

.block+.block {
  margin-top: 38px;
}

.block-label {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* the positioning statement that closes each chapter */
.positioning-card {
  margin-top: clamp(34px, 5vw, 52px);
  border-top: 4px solid var(--school);
  background: var(--ground);
  padding: clamp(26px, 4vw, 40px);
}

.positioning-card .block-label {
  color: var(--school-ink, var(--school));
}

.positioning-card h3 {
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
  line-height: 1.08;
  margin-bottom: 16px;
  text-wrap: balance;
}

.positioning-card p {
  color: var(--ink-soft);
  font-size: 17px;
}

.positioning-card p:last-child {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- the learning ladder (BD Blue Bells) ---------- */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.ladder li {
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  font-family: var(--display);
  font-size: clamp(14px, 1.7vw, 16px);
}

.ladder .from {
  color: var(--muted);
}

.ladder .arrow {
  color: var(--bdbbps-ink);
  font-weight: 700;
}

.ladder .to {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- content IPs (Beansprouts) ---------- */
.ips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ips li {
  border: 1px solid var(--rule);
  padding: 20px;
  background: var(--surface);
}

.ips h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 7px;
  letter-spacing: -.01em;
  color: var(--beansprouts);
}

.ips p {
  font-size: 15.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- KV galleries ---------- */
.kvs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(34px, 5vw, 54px);
}

.kvs figure {
  margin: 0;
  grid-column: span 12;
}

.kvs img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--ground);
}

.kvs figcaption {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 9px;
}

/* these must out-specify `.kvs figure` above, hence the `.kvs` prefix */
.kvs .s3 {
  grid-column: span 3;
}

.kvs .s4 {
  grid-column: span 4;
}

.kvs .s5 {
  grid-column: span 5;
}

.kvs .s6 {
  grid-column: span 6;
}

.kvs .s7 {
  grid-column: span 7;
}

.kvs .s8 {
  grid-column: span 8;
}

.kvs .s9 {
  grid-column: span 9;
}


/* two media carousels side by side in one row, each paging on its own */
.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}

.media-pair .media-label {
  margin-top: clamp(30px, 4vw, 46px);
}

@media (max-width: 760px) {
  .media-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- media group headings ---------- */
.media-label {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(30px, 4vw, 46px) 0 12px;
}

/* when everything already fits there is nothing to page through */
.slider.no-overflow .slider-btn,
.slider.no-overflow .slider-dots {
  display: none;
}

/* ---------- tactical ad grids ---------- */
/* Three across, dropping to two on tablets and one on phones. Cover rather
   than contain, so the cells stay uniform even where a set is a different
   ratio (Beansprouts is 3:4, the others 4:5). */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}

.media-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ground);
  display: block;
}

@media (max-width: 860px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .media-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- side-by-side media rows ---------- */
.media-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

.media-row img {
  width: 100%;
  height: auto;
  background: var(--ground);
}

/* ---------- brand architecture table ---------- */
.arch-scroll {
  overflow-x: auto;
  margin-top: 10px;
}

.arch {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
}

.arch th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 18px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}

.arch td {
  padding: 20px 18px 20px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
}

.arch td:first-child {
  padding-left: 16px;
  border-left: 4px solid var(--school);
}

.arch td strong {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
}

.arch .role {
  font-family: var(--display);
  font-weight: 600;
  color: var(--school-ink, var(--school));
}

/* ---------- activations ---------- */
.activations {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
}

.activation {
  border-top: 3px solid var(--school);
  padding-top: 18px;
}

.activation h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.activation p {
  font-size: 16px;
  color: var(--muted);
}

/* ---------- outcome ---------- */
.outcome-lines {
  margin: 0 0 28px;
}

.outcome-lines p {
  font-family: var(--display);
  font-size: clamp(26px, 4.6vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}

.outcome-lines p+p {
  margin-top: 4px;
}

.outcome-lines p:nth-child(2) {
  color: rgba(255, 255, 255, .74);
}

.outcome-lines p:nth-child(3) {
  color: var(--bb-yellow);
}

/* ---------- the five marks, shown as one family ---------- */
.family {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* sized so all five marks still hold one row across the content column */
  gap: clamp(22px, 3vw, 44px);
  margin-block: clamp(32px, 4.6vw, 48px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.family img {
  height: 64px;
  width: auto;
  display: block;
}

/* a roundel needs a little more height to feel the same size as a wordmark */
.family .m-round img {
  height: 86px;
}

/* BD Blue Bells is the one school with no knockout version in the brand kit,
   so it sits on the same white plate the group mark uses in the hero */
.family .m-plate {
  background: #fff;
  border-radius: 3px;
  padding: 8px 11px;
  display: inline-block;
}

.family .m-plate img {
  height: 47px;
}

@media (max-width: 680px) {
  .family {
    gap: 22px 26px;
  }

  .family img {
    height: 38px;
  }

  .family .m-round img {
    height: 52px;
  }

  .family .m-plate img {
    height: 28px;
  }
}

/* ---------- reveal on scroll (progressive enhancement) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .reveal.in {
    transition: none;
  }
}

/* ---------- back to sparkt ---------- */
.back-pill {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(19, 32, 46, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 9px 15px 9px 13px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  line-height: 1;
}

.back-pill span {
  color: #E0457E;
  font-size: 15px;
}

.back-pill:focus-visible,
a:focus-visible {
  outline: 2px solid #E0457E;
  outline-offset: 3px;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .activations {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 17px;
  }

  .kvs figure,
  .kvs .s3,
  .kvs .s4,
  .kvs .s5,
  .kvs .s6,
  .kvs .s7,
  .kvs .s8,
  .kvs .s9 {
    grid-column: span 12;
  }

  .ips {
    grid-template-columns: 1fr;
  }

  .ladder li {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 14px 16px;
  }

  .ladder .arrow {
    display: none;
  }

  .ladder .to::before {
    content: "\2192\00a0";
    color: var(--bdbbps-ink);
  }

  .chapter-head {
    flex-direction: column;
    gap: 8px;
  }

  .chapter-num {
    padding-top: 0;
  }

  .quote {
    padding-left: 20px;
  }
}