/* Bartow, five re-layouts — scaffolding for tests/bartow2.html.

   Each option re-arranges the whole section rather than restyling a part of
   it, so the CSS here is mostly grid: what changes between them is which
   element the layout is organised around. Shared bits first, then one block
   per option. Does not ship with the live page. */

.b2 { --shot: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
.b2__title {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-bottom: var(--s-12);
}
/* every option needs a photo slot; they differ only in proportion */
.b2 .photo__label {
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

/* ── 01 · The spine ─────────────────────────────────────────────────────── */

.spine {
  list-style: none;
  margin: 0 0 var(--s-14);
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--s-12);
}
/* the rule the beats hang from — drawn behind, and stopping at the last marker
   rather than running off the end of the list */
.spine::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 1px;
  background: var(--rule-strong);
}
@media (min-width: 900px) { .spine::before { left: 11px; } }

.spine__beat { position: relative; padding-left: var(--s-12); }
@media (min-width: 900px) { .spine__beat { padding-left: var(--s-14); } }
.spine__beat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
@media (min-width: 900px) { .spine__beat::before { width: 23px; height: 23px; } }
.spine__beat p { color: var(--fg-60); line-height: 1.6; max-width: 62ch; }

/* the turn is the one beat that fills its marker: the moment the story pivots */
.spine__beat--turn::before { background: var(--fg); box-shadow: none; }
.spine__beat--turn p {
  color: var(--fg);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

.spine__shot {
  margin: 0;
  aspect-ratio: 3 / 2;
  max-width: 560px;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}

.spine__beat--quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.35;
  max-width: 34ch;
}
.spine__beat--quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

.spine__num {
  font-size: clamp(44px, 7vw, 96px);
  line-height: .92;
  letter-spacing: -0.04em;
}
.spine__label { color: var(--fg-60); max-width: 32ch; }

/* ── 02 · Front page ────────────────────────────────────────────────────── */

.paper { border-top: 2px solid var(--fg); padding-top: var(--s-4); }
.paper__slug {
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-50);
}
.paper__head {
  margin-top: var(--s-4);
  font-size: clamp(34px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
.paper__standfirst {
  margin-top: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-quote);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.35;
  max-width: 52ch;
  color: var(--fg-60);
}

/* real columns: the insert and the photo are floated so the text runs around
   them the way a printed page would set it */
.paper__cols { margin-top: var(--s-8); }
@media (min-width: 900px) {
  .paper__cols { columns: 3; column-gap: var(--s-12); column-rule: 1px solid var(--rule); }
}
.paper__cols p {
  color: var(--fg-60);
  line-height: 1.62;
  text-wrap: pretty;
}
.paper__cols p + p { margin-top: var(--s-4); }
/* the drop: a first line that tells the eye where the story starts */
.paper__cols p:first-child::first-line { color: var(--fg); }

.paper__insert {
  margin: var(--s-6) 0;
  padding: var(--s-6) 0;
  border-block: 1px solid var(--rule-strong);
  break-inside: avoid;
}
.paper__insert blockquote {
  font-family: var(--font-quote);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.36;
  color: var(--fg);
}
.paper__insert figcaption {
  margin-top: var(--s-2);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

.paper__shot {
  margin: var(--s-6) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: var(--shot);
  display: grid;
  place-items: center;
  break-inside: avoid;
}

.paper__foot { margin-top: var(--s-12); border-top: 2px solid var(--fg); padding-top: var(--s-6); }
.paper__footTitle {
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: var(--s-5);
}
.paper__figs { display: grid; gap: var(--s-8); align-items: end; }
@media (min-width: 760px) { .paper__figs { grid-template-columns: 1fr 1fr auto; } }
.paper__figs span {
  display: block;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: .92;
  letter-spacing: -0.04em;
}
.paper__figs p { margin-top: var(--s-2); color: var(--fg-60); max-width: 30ch; }
.paper__cta { display: flex; align-items: end; }

/* ── 03 · Held photo ────────────────────────────────────────────────────── */

.held { display: grid; gap: var(--s-12); align-items: start; }
@media (min-width: 1000px) { .held { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-14); } }

/* sticky needs a start position and a parent tall enough to travel in — the
   flow column beside it supplies the height */
@media (min-width: 1000px) {
  .held__stick { position: sticky; top: var(--s-20); }
}
.held__shot {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}
.held__quote { margin: var(--s-6) 0 0; }
.held__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.35;
}
.held__quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

.held__flow p { color: var(--fg-60); line-height: 1.6; max-width: 58ch; }
.held__flow p + p { margin-top: var(--s-6); }
.held__turn {
  color: var(--fg) !important;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 24ch !important;
}
/* the paragraphs are spaced far enough apart that the sticky panel has room to
   hold while the reader moves through them */
@media (min-width: 1000px) { .held__flow p + p { margin-top: var(--s-14); } }

.held__results { margin-top: var(--s-14); display: grid; gap: var(--s-8); }
@media (min-width: 600px) { .held__results { grid-template-columns: 1fr 1fr; } }
.held__resultsTitle {
  grid-column: 1 / -1;
  font-size: var(--t-micro) !important;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-50) !important;
}
.held__results span {
  display: block;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .92;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.held__results p { margin-top: var(--s-2); max-width: 26ch; }

/* ── 04 · Numbers first ─────────────────────────────────────────────────── */

.first__eyebrow {
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: var(--s-6);
}
.first__nums {
  display: grid;
  gap: var(--s-8);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) { .first__nums { grid-template-columns: 1fr 1fr; gap: var(--s-14); } }
.first__num {
  font-size: clamp(64px, 13vw, 190px);
  line-height: .84;
  letter-spacing: -0.05em;
}
.first__label { margin-top: var(--s-4); color: var(--fg-60); max-width: 26ch; }

.first__body { margin-top: var(--s-14); display: grid; gap: var(--s-12); align-items: start; }
@media (min-width: 1000px) { .first__body { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-14); } }
.first__title {
  grid-column: 1 / -1;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.first__copy p { color: var(--fg-60); line-height: 1.6; max-width: 56ch; }
.first__copy p + p { margin-top: var(--s-5); }
.first__turn { color: var(--fg) !important; }

.first__figure { margin: 0; }
.first__shot {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}
.first__figure figcaption {
  margin-top: var(--s-5);
  font-family: var(--font-quote);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.4;
  color: var(--fg-60);
}
.first__figure figcaption span {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

/* ── 05 · Four chapters ─────────────────────────────────────────────────── */

.chap { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .chap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .chap { grid-template-columns: repeat(3, 1fr); } }

.chap__card {
  padding: var(--s-8);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  display: grid;
  gap: var(--s-6);
  align-content: start;
}
.chap__no {
  font-size: var(--t-caption);
  line-height: 19.5px;
  letter-spacing: .1em;
  color: var(--fg-50);
  font-variant-numeric: tabular-nums;
}
.chap__card p:last-child { color: var(--fg-60); line-height: 1.6; }
/* the turn card is the one that inverts, so the pivot is findable at a glance */
.chap__card--turn { background: var(--fg); }
.chap__card--turn .chap__no { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.chap__card--turn p:last-child {
  color: var(--bg);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.chap__shot {
  margin: 0;
  border-radius: var(--r-md);
  background: var(--shot);
  min-height: 240px;
  display: grid;
  place-items: center;
}

.chap__quote {
  margin: 0;
  padding: var(--s-8);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  display: grid;
  align-content: center;
  gap: var(--s-4);
}
@media (min-width: 760px) { .chap__quote { grid-column: span 2; } }
.chap__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.34;
}
.chap__quote figcaption { font-size: var(--t-caption); line-height: 19.5px; color: var(--fg-50); }

.chap__band {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: var(--s-8);
  align-items: end;
}
@media (min-width: 900px) { .chap__band { grid-template-columns: auto 1fr 1fr auto; gap: var(--s-12); } }
.chap__bandTitle {
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-50);
  max-width: 14ch;
}
.chap__band span {
  display: block;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .92;
  letter-spacing: -0.04em;
}
.chap__band > div p { margin-top: var(--s-2); color: var(--fg-60); max-width: 26ch; }
.chap__band .btn { justify-self: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   06–10 · plain arrangements. No organising conceit in these — they are the
   ordinary ways to put a heading, a run of copy, a photo, a quote and two
   numbers on a page, so the conceptual options above have something to be
   measured against.
   ═════════════════════════════════════════════════════════════════════════ */

/* shared: every plain option sets its numbers the same way */
.two__foot span, .mid__nums span, .top__nums span, .rail2__nums span, .zig__nums span {
  display: block;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .92;
  letter-spacing: -0.04em;
}
.two__foot p, .mid__nums p, .top__nums p, .rail2__nums p, .zig__nums p {
  margin-top: var(--s-2);
  color: var(--fg-60);
  max-width: 28ch;
}
.two__copy p, .mid p, .top__cols p, .rail2__main p, .zig__text p {
  color: var(--fg-60);
  line-height: 1.6;
}
/* the pivot line is the one piece of emphasis they all keep */
.two__turn, .mid__turn, .top__turn, .rail2__turn, .zig__turn {
  color: var(--fg) !important;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 26ch;
}

/* ── 06 · Two columns, photo right ──────────────────────────────────────── */

.two__grid { display: grid; gap: var(--s-12); align-items: start; }
@media (min-width: 900px) { .two__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-14); } }
.two__title {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-8);
  max-width: 16ch;
}
.two__copy p + p { margin-top: var(--s-5); }
.two__shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}
.two__quote { margin: var(--s-6) 0 0; }
.two__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.36;
}
.two__quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}
.two__foot {
  margin-top: var(--s-14);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-8);
  align-items: end;
}
@media (min-width: 900px) { .two__foot { grid-template-columns: 1fr 1fr auto; gap: var(--s-12); } }

/* ── 07 · One centred measure ───────────────────────────────────────────── */

.mid { max-width: 68ch; margin-inline: auto; }
.mid__title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-8);
}
.mid > p + p { margin-top: var(--s-5); }
.mid__shot {
  margin: var(--s-10) 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}
.mid__quote {
  margin: var(--s-10) 0;
  padding-left: var(--s-6);
  border-left: 2px solid var(--rule-strong);
}
.mid__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.36;
}
.mid__quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}
.mid__nums {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 600px) { .mid__nums { grid-template-columns: 1fr 1fr; } }
.mid .cta-row { margin-top: var(--s-10); justify-content: flex-start; }

/* ── 08 · Photo on top ──────────────────────────────────────────────────── */

.top__shot {
  margin: 0;
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
  padding: var(--s-8);
}
.top__title {
  position: absolute;
  left: var(--s-8);
  bottom: var(--s-8);
  right: var(--s-8);
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.top__cols { margin-top: var(--s-12); display: grid; gap: var(--s-8) var(--s-12); }
@media (min-width: 900px) { .top__cols { grid-template-columns: 1fr 1fr; } }
.top__cols p + p { margin-top: var(--s-5); }
.top__row {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-12);
  align-items: start;
}
@media (min-width: 900px) { .top__row { grid-template-columns: 1fr 1fr; } }
.top__quote { margin: 0; }
.top__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.36;
}
.top__quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}
.top__nums { display: grid; gap: var(--s-8); }
@media (min-width: 600px) { .top__nums { grid-template-columns: 1fr 1fr; } }
.top__nums .btn { grid-column: 1 / -1; justify-self: start; }

/* ── 09 · Sidebar ───────────────────────────────────────────────────────── */

.rail2 { display: grid; gap: var(--s-12); align-items: start; }
@media (min-width: 1000px) { .rail2 { grid-template-columns: 320px 1fr; gap: var(--s-14); } }
.rail2__aside { display: grid; gap: var(--s-8); align-content: start; }
.rail2__title {
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.rail2__nums { display: grid; gap: var(--s-6); }
.rail2__aside .btn { justify-self: start; }
.rail2__main p + p { margin-top: var(--s-5); }
.rail2__shot {
  margin: var(--s-10) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}
.rail2__quote {
  margin: var(--s-10) 0;
  padding: var(--s-8);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
}
.rail2__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.36;
}
.rail2__quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

/* ── 10 · Alternating rows ──────────────────────────────────────────────── */

.zig__title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-bottom: var(--s-12);
}
.zig__row {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-10);
  border-top: 1px solid var(--rule);
  align-items: center;
}
@media (min-width: 900px) { .zig__row { grid-template-columns: 1fr 1fr; gap: var(--s-14); } }
/* the flip is only a source-order swap, so the markup stays in reading order
   and a phone still gets the copy before the picture */
@media (min-width: 900px) {
  .zig__row--flip .zig__text { order: 2; }
  .zig__row--flip .zig__quote { order: 1; }
}
.zig__text p + p { margin-top: var(--s-5); }
.zig__shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--shot);
  display: grid;
  place-items: center;
}
.zig__quote { margin: 0; }
.zig__quote blockquote {
  font-family: var(--font-quote);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.36;
}
.zig__quote figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}
.zig__nums { display: grid; gap: var(--s-8); }
@media (min-width: 600px) { .zig__nums { grid-template-columns: 1fr 1fr; } }
.zig__row--end { border-bottom: 1px solid var(--rule); }
.zig .cta-row { margin-top: var(--s-10); }