/* Bartow County as a case study on paper — scaffolding for tests/bartow.html.

   The whole page inverts the site's usual figure/ground: instead of type sitting
   on a coloured ground, a sheet of paper sits on the ground and carries the type.
   So every option needs its own local light palette, because --fg / --bg here
   belong to the page behind the paper, not to the paper itself. */

.testpage { --paper: #FAF8F4; --ink: #171310; --ink-60: rgba(23,19,16,.62); --ink-35: rgba(23,19,16,.36); --ink-rule: rgba(23,19,16,.14); }

/* ── The sheet ──────────────────────────────────────────────────────────── */

.sheet {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-14) var(--s-12);
  /* two shadows: a tight one for the paper's own thickness, a wide soft one for
     the distance between the sheet and the surface under it */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .16),
    0 24px 60px -20px rgba(0, 0, 0, .35);
}
@media (min-width: 768px) { .sheet { padding: var(--s-20) var(--s-14); } }

/* A4-ish proportion, capped so it never gets so wide the measure breaks down */
.sheet--letter { max-width: 860px; margin-inline: auto; }

.sheet__masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-rule);
}
.sheet__kicker {
  font-family: var(--font-mono, var(--font));
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.sheet__meta { font-size: var(--t-micro); color: var(--ink-35); }

.sheet__title { margin: var(--s-8) 0 var(--s-8); max-width: 22ch; }

.sheet__cols { display: grid; gap: var(--s-8); }
@media (min-width: 768px) {
  .sheet__cols { grid-template-columns: 1.6fr 1fr; gap: var(--s-12); }
}

.sheet__body p { color: var(--ink-60); line-height: 1.65; max-width: 58ch; }
.sheet__body p + p { margin-top: var(--s-4); }

/* the opening paragraph carries the reader in, so it gets the larger setting */
.sheet__drop { font-size: var(--t-h2); line-height: 1.5 !important; color: var(--ink) !important; }
.sheet__turn { color: var(--ink) !important; font-size: var(--t-h2); line-height: 1.45 !important; }

.sheet__side { border-top: 1px solid var(--ink-rule); padding-top: var(--s-4); }
@media (min-width: 768px) {
  .sheet__side { border-top: 0; border-left: 1px solid var(--ink-rule); padding: 0 0 0 var(--s-8); }
}
.sheet__sidetitle {
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: var(--s-6);
}
.sheet__stat + .sheet__stat { margin-top: var(--s-8); }
.sheet__num { font-size: clamp(38px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; }
.sheet__lab { font-size: var(--t-caption); line-height: 19.5px; color: var(--ink-60); margin-top: var(--s-2); max-width: 24ch; }

.sheet__quote {
  margin: var(--s-12) 0 0;
  padding-top: var(--s-8);
  border-top: 1px solid var(--ink-rule);
  font-size: var(--t-h2);
  line-height: 1.5;
  max-width: 54ch;
  text-wrap: pretty;
}
.sheet__quote--tight { margin-top: var(--s-8); }
.sheet__quote cite {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  font-size: var(--t-caption);
  color: var(--ink-35);
}

.sheet__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-12);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-rule);
  font-size: var(--t-micro);
  color: var(--ink-35);
}

/* ── 02 · folded ────────────────────────────────────────────────────────── */

.sheet--folded { max-width: 1040px; margin-inline: auto; overflow: hidden; }

/* the creases: a bright edge where the fold peaks, a shadow where it valleys */
.fold { position: absolute; inset: 0; pointer-events: none; }
.fold span {
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  transform: translateX(-50%);
}
.fold span:nth-child(1) { left: 33.333%; }
.fold span:nth-child(2) { left: 66.666%; }
.fold span {
  background: linear-gradient(to right,
    rgba(23,19,16,0) 0%,
    rgba(23,19,16,.055) 46%,
    rgba(255,255,255,.85) 52%,
    rgba(23,19,16,0) 100%);
}

.sheet__thirds { display: grid; gap: var(--s-8); position: relative; }
@media (min-width: 768px) {
  .sheet__thirds { grid-template-columns: repeat(3, 1fr); gap: var(--s-12); }
}
.sheet__thirds p { color: var(--ink-60); line-height: 1.6; font-size: var(--t-caption); }
.sheet__thirds p + p { margin-top: var(--s-4); }
.sheet__step {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-35);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-rule);
}
.sheet__pair { color: var(--ink) !important; }
.sheet__pair span {
  display: inline-block;
  min-width: 3.4em;
  font-size: var(--t-h2);
  letter-spacing: -.01em;
}

/* ── 03 · index card stack ──────────────────────────────────────────────── */

.cardstack { display: grid; gap: var(--s-8); max-width: 640px; margin-inline: auto; }
@media (min-width: 900px) { .cardstack { gap: var(--s-6); } }

.icard {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-8) var(--s-8) var(--s-8) var(--s-12);
  border-radius: 2px;
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 14px 30px -14px rgba(0,0,0,.32);
  /* the ruled lines and the red margin rule of a real index card */
  background-image:
    linear-gradient(to bottom, transparent calc(2rem - 1px), var(--ink-rule) calc(2rem - 1px), var(--ink-rule) 2rem),
    linear-gradient(to right, transparent calc(var(--s-8) - 1px), rgba(255,77,0,.4) calc(var(--s-8) - 1px), rgba(255,77,0,.4) var(--s-8), transparent var(--s-8));
  background-size: 100% 2rem, 100% 100%;
}
.icard:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 4px rgba(0,0,0,.16), 0 26px 50px -18px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .icard, .icard:hover { transition: none; transform: none; } }

.icard__tab {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: var(--s-4);
}
.icard__title { font-size: var(--t-h2); line-height: 1.3; margin-bottom: var(--s-4); }
.icard p { color: var(--ink-60); line-height: 2rem; font-size: var(--t-caption); }
.icard p + p { margin-top: 0; }
.icard__src { color: var(--ink-35) !important; font-size: var(--t-micro) !important; }
.icard__big { color: var(--ink) !important; font-size: var(--t-h2); }
.icard__big strong { font-weight: 400; }

/* ── 06 / 10 · the dossier — cards that do different jobs ───────────────── */

/* The fix for 03 was never the paper, it was that every card was the same card.
   Here the stack is typed: a cover, text cards, two photo plates, a quote and a
   results card, each sized to its content, on one shared 12-column ruler. */
.dossier {
  display: grid;
  gap: var(--s-6);
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .dossier { grid-template-columns: repeat(12, 1fr); gap: var(--s-6); }
  .dcard--cover   { grid-column: 1 / -1; }
  .dcard--photo   { grid-column: span 6; }
  .dcard--text    { grid-column: span 6; }
  .dcard--quote   { grid-column: 2 / span 10; }
  .dcard--results { grid-column: 1 / -1; }
}

.dcard {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-8);
  border-radius: 3px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 16px 34px -16px rgba(0,0,0,.3);
  /* a shared, tiny rotation instead of 03's scatter — a set, not a spill */
  transform: rotate(var(--rot, -.35deg));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dcard:nth-child(even) { --rot: .35deg; }
.dcard:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.16), 0 26px 48px -18px rgba(0,0,0,.36); }

.dcard__tab {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: var(--s-4);
}
.dcard--cover { padding: var(--s-12) var(--s-8); }
.dcard__title { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -.022em; max-width: 22ch; }
.dcard__standfirst { margin-top: var(--s-5); font-size: var(--t-h2); line-height: 1.45; color: var(--ink-60); max-width: 44ch; }
.dcard__meta { margin-top: var(--s-6); font-size: var(--t-micro); color: var(--ink-35); }

.dcard p { color: var(--ink-60); line-height: 1.6; font-size: var(--t-caption); }
.dcard p + p { margin-top: var(--s-4); }
.dcard__turn { color: var(--ink) !important; font-size: var(--t-h2) !important; line-height: 1.45 !important; }

/* the two image plates — a real frame with its own caption, not a filler block */
.dcard--photo { padding: var(--s-4) var(--s-4) var(--s-6); }
.dcard__img {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  border-radius: 2px;
  overflow: hidden;
}
.dcard__img span { font-size: var(--t-micro); color: var(--ink-35); }
.dcard--photo figcaption {
  margin-top: var(--s-4);
  padding-inline: var(--s-4);
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--ink-35);
}

.dcard--quote {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  padding: var(--s-12) var(--s-12);
  text-wrap: pretty;
}
.dcard--quote cite { display: block; margin-top: var(--s-6); font-style: normal; font-size: var(--t-caption); color: var(--ink-35); }

.dcard--results { padding: var(--s-12) var(--s-8); }
.dcard__nums { display: grid; gap: var(--s-8); }
@media (min-width: 600px) { .dcard__nums { grid-template-columns: 1fr 1fr; gap: var(--s-14); } }
.dcard__num { font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -.022em; color: var(--ink); }
.dcard__lab { margin-top: var(--s-2); font-size: var(--t-caption) !important; color: var(--ink-60) !important; max-width: 26ch; }
.dcard__kicker {
  margin-top: var(--s-8) !important;
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-rule);
  font-size: var(--t-h2) !important;
  color: var(--ink) !important;
}

/* 10 · the same stack, straightening as it enters the viewport */
.dossier--assemble .dcard {
  opacity: 0;
  transform: rotate(var(--rot0, -2.4deg)) translateY(26px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.dossier--assemble .dcard:nth-child(even) { --rot0: 2.1deg; }
.dossier--assemble .dcard.is-settled { opacity: 1; transform: rotate(var(--rot, -.35deg)) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .dcard, .dcard:hover { transform: none; transition: none; }
  .dossier--assemble .dcard { opacity: 1; transform: none; }
}

/* ── 07 · pinned board ──────────────────────────────────────────────────── */

.pinboard { display: grid; gap: var(--s-8); max-width: 1000px; margin-inline: auto; }
@media (min-width: 768px) { .pinboard { grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: start; } }

.pcard {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-8);
  margin: 0;
  border-radius: 2px;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 18px 36px -16px rgba(0,0,0,.32);
  transition: transform .35s var(--ease);
}
.pcard:hover { transform: rotate(0deg) scale(1.015); }
@media (min-width: 768px) { .pcard--wide { grid-column: 1 / -1; } }
.pcard p { color: var(--ink-60); line-height: 1.6; font-size: var(--t-caption); }
.pcard p + p { margin-top: var(--s-4); }
/* the photos sit slightly larger than the text cards, so they lead */
.pcard--img { padding: var(--s-3); }
.pcard--img .dcard__img { aspect-ratio: 3 / 2; }
.pcard--nums p { color: var(--ink) !important; }
.pcard--nums span { display: block; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
.pcard--nums p + p { margin-top: var(--s-6); }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard:hover { transform: none; } }

/* ── 08 · dealt deck ────────────────────────────────────────────────────── */

.dealrail { padding-block: var(--s-8); }
.dealrail .rail__track { gap: var(--s-6); align-items: stretch; }

/* the deck's own 5:7, so the case study is told in the brand's existing object */
.tcard {
  flex: 0 0 260px;
  aspect-ratio: 5 / 7;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-6);
  margin: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 14px 30px -14px rgba(0,0,0,.34);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tcard:hover { transform: translateY(-10px); box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 30px 54px -20px rgba(0,0,0,.42); }
.tcard__no { font-size: var(--t-micro); color: var(--ink-35); }
.tcard p { color: var(--ink-60); font-size: var(--t-caption); line-height: 1.55; }
.tcard h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; margin-top: auto; }
.tcard__meta { color: var(--ink-35) !important; font-size: var(--t-micro) !important; }
.tcard--cover { background: #FF4D00; color: #FFFFFF; }
.tcard--cover .tcard__no, .tcard--cover .tcard__meta { color: rgba(255,255,255,.72) !important; }
.tcard--turn p { color: var(--ink) !important; font-size: var(--t-h2) !important; line-height: 1.35 !important; }
.tcard--photo { padding: var(--s-3); }
.tcard--photo .dcard__img { aspect-ratio: auto; height: 100%; }
.tcard--num { justify-content: center; }
.tcard--num .dcard__num { font-size: 40px; }
@media (prefers-reduced-motion: reduce) { .tcard, .tcard:hover { transform: none; } }

/* ── 09 · one sheet, two plates ─────────────────────────────────────────── */

.sheet--plates { max-width: 900px; margin-inline: auto; }
.sheet--plates > p { color: var(--ink-60); line-height: 1.7; max-width: 56ch; }
.sheet--plates > p + p { margin-top: var(--s-5); }

/* tipped-in plates: the caption hangs in the margin beside the image, the way a
   printed report sets them, rather than sitting centred underneath */
.plate { margin: var(--s-12) 0; display: grid; gap: var(--s-4); }
@media (min-width: 768px) {
  .plate { grid-template-columns: 1fr 180px; gap: var(--s-8); align-items: end; }
  .plate--right { grid-template-columns: 180px 1fr; }
  .plate--right figcaption { order: -1; text-align: right; }
}
.plate .dcard__img { aspect-ratio: 16 / 10; }
.plate figcaption { font-size: var(--t-micro); line-height: 1.45; color: var(--ink-35); }
.plate__no { display: block; color: var(--ink); margin-bottom: var(--s-2); }

.plates__results {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-14);
  padding-top: var(--s-8);
  border-top: 1px solid var(--ink-rule);
}
@media (min-width: 600px) { .plates__results { grid-template-columns: 1fr 1fr; gap: var(--s-14); } }

/* ── 04 · torn spread ───────────────────────────────────────────────────── */

.spread {
  display: grid;
  max-width: 1040px;
  margin-inline: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 28px 64px -22px rgba(0,0,0,.38);
}
@media (min-width: 900px) { .spread { grid-template-columns: .82fr 1.18fr; } }

.spread__cover {
  background: #FF4D00;
  color: #FFFFFF;
  padding: var(--s-14) var(--s-12);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.spread__cover .sheet__kicker { color: rgba(255,255,255,.7); }
.spread__title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; max-width: 18ch; }
.spread__sub { font-size: var(--t-caption); color: rgba(255,255,255,.72); }
.spread__nums { margin-top: auto; display: grid; gap: var(--s-4); }
.spread__nums p { font-size: var(--t-caption); color: rgba(255,255,255,.8); }
.spread__nums span { display: block; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; color: #FFFFFF; }

.spread__text {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-14) var(--s-12);
}
.spread__text p { color: var(--ink-60); line-height: 1.65; max-width: 54ch; }
.spread__text p + p { margin-top: var(--s-4); }

/* the torn edge where the two stocks meet — a repeating wedge mask, not an image */
.deckle {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 7px, #000 7px 13px, transparent 13px 14px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 7px, #000 7px 13px, transparent 13px 14px);
  transform: translateX(-100%);
}

/* ── 05 · continuous roll ───────────────────────────────────────────────── */

.sheet--roll { max-width: 900px; margin-inline: auto; padding-left: var(--s-20); }
@media (min-width: 768px) { .sheet--roll { padding-left: var(--s-27); } }
.sheet--roll > * { position: relative; }
.sheet--roll p { color: var(--ink-60); line-height: 1.7; max-width: 56ch; }
.sheet--roll p + p { margin-top: var(--s-5); }

/* the printer's margin rule the marginal notes hang off */
.roll__margin {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--s-14);
  width: 1px;
  background: rgba(255,77,0,.3);
}
@media (min-width: 768px) { .roll__margin { left: var(--s-20); } }

.roll__note {
  font-size: var(--t-micro) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-35) !important;
  margin-top: var(--s-8) !important;
}

.roll__table { width: 100%; border-collapse: collapse; margin-top: var(--s-12); }
.roll__table caption {
  text-align: left;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-35);
  padding-bottom: var(--s-4);
}
.roll__table th,
.roll__table td {
  text-align: left;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--ink-rule);
  font-weight: 400;
  font-size: var(--t-caption);
}
.roll__table th { color: var(--ink-60); }
.roll__table td { text-align: right; color: var(--ink); font-size: var(--t-h2); font-variant-numeric: tabular-nums; }