/* 06 — RASPBERRY, the chosen direction
   One Red's layout on raspberry (#B8325A, cream text at 5.1:1).

   TYPE: two things to read, one size. The title and the line under it
   are set at the same size; weight alone says which comes first. The
   series label is the only smaller text, and it is a label, not reading.

   BOTTOM: no footnote on the cover. A cream plate bottom right, the way
   Letters marks its cue, tells the reader there is more to swipe for. */

.th-raspberry { --red: #B8325A; --cream: #FBF1E6; --deep: #2B1510; }

.th-raspberry.cover {
  background: var(--red); color: var(--cream);
  --stage-mt: 52px; --pad-b: 76px;
  --photo-s: .9; --icon-s: .64;
}
.th-raspberry.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain-url); background-size: 240px 240px;
  mix-blend-mode: soft-light; opacity: .18;
}
.th-raspberry .series { color: var(--cream); }

.th-raspberry .hook,
.th-raspberry .stat {
  text-wrap: balance;   /* both lines break the same way, no word left alone */
  font-size: 54px;
  line-height: 1.2;
  letter-spacing: -.9px;
}
.th-raspberry .hook { font-weight: 600; }
.th-raspberry .stat { font-weight: 400; margin-top: 22px; }
.th-raspberry .stat b { font-weight: 600; }

.th-raspberry .plate .obj {
  transform: rotate(-2deg);
  box-shadow: 0 2px 6px rgba(50, 8, 20, .20), 0 28px 54px rgba(50, 8, 20, .34);
}
.th-raspberry .plate .obj.photo { border: 18px solid var(--cream); border-radius: 6px; }
.th-raspberry .plate .obj.icon { border: 18px solid var(--cream); }

.th-raspberry .cover-cue {
  position: relative; z-index: 3;
  flex: 0 0 auto;
  align-self: flex-end;
  margin-top: 40px;
  padding: 12px 26px 15px;
  background: var(--cream);
  color: var(--red);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.3px;
  line-height: 1.2;
  border-radius: 8px;
  transform: rotate(-1.15deg);
  box-shadow: 0 4px 14px rgba(50, 8, 20, .22);
}

.th-raspberry.origin { background: var(--cream); color: var(--deep); }

/* The Origin's cue: the cover's plate inverted for the cream slide, pinned to
   the same bottom-right spot so the swipe cue never moves between slides. */
.th-raspberry .story-cue {
  position: absolute; right: var(--pad-x); bottom: 76px;
  margin: 0;
  background: var(--red);
  color: var(--cream);
  box-shadow: 0 4px 14px rgba(43, 21, 16, .20);
}
/* keep the story clear of the cue: 76px foot + ~62px plate + a 30px gap */
.th-raspberry.origin.story { --st-pb: 168px; }
.th-raspberry.origin .kicker { color: var(--red); }

.th-raspberry.evolution { background: var(--red); color: var(--cream); }
.th-raspberry.evolution .kicker { color: var(--cream); opacity: .8; }

/* The chevron. Drawn, not typed: a glyph arrow sits on the baseline and
   varies by font, a drawn one matches the text's stroke and centres on
   the x-height. Sized to the lowercase letters, not the capitals. */
.th-raspberry .cover-cue {
  display: flex;
  align-items: center;
  gap: 14px;
}
.th-raspberry .cover-cue::after {
  content: "";
  width: 12px;
  height: 12px;
  margin: 4px 5px 0 0;
  border-top: 4.5px solid currentColor;
  border-right: 4.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ── The people, on the Origin slide ──
   A small print set into the top right of the story. The text wraps
   around it and keeps its size, so the slide gets a face without the words
   getting smaller. Two people are two overlapping prints. */
.th-raspberry .people {
  float: right;
  margin: 6px 0 22px 40px;
  position: relative;
}
.th-raspberry .person {
  aspect-ratio: var(--ar);
  background: #fff;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(43, 21, 16, .14), 0 14px 30px rgba(43, 21, 16, .18);
}
.th-raspberry .person img { display: block; width: 100%; height: 100%; object-fit: cover; }

.th-raspberry .people.n1 .person { width: 330px; transform: rotate(1.6deg); }
.th-raspberry .people.n1 .person[style*="1.185"] { width: 350px; }

.th-raspberry .people.n2 { width: 380px; height: 330px; }
.th-raspberry .people.n2 .person { position: absolute; width: 215px; }
.th-raspberry .people.n2 .person:nth-child(1) { left: 0; top: 0; transform: rotate(-3deg); }
.th-raspberry .people.n2 .person:nth-child(2) { right: 0; top: 36px; transform: rotate(2.5deg); }


/* ════════════ Origin: five ways to set the people ════════════
   The text size never changes. Only where the photograph sits. */

/* B — PHOTO HEADER. Edge to edge across the top; two people split it. */
.th-raspberry.ov-band { --st-pt: 370px; --st-pb: 64px; justify-content: flex-start; }
.th-raspberry.ov-band .story-body,
.th-raspberry.ov-band .story-copy { position: static; }
.th-raspberry.ov-band .people.people {
  float: none; position: absolute; left: 0; right: 0; top: 0;
  width: auto; height: 314px; margin: 0; display: flex;
}
.th-raspberry.ov-band .people .person.person {
  position: relative; left: auto; right: auto; top: auto;
  flex: 1 1 0; width: auto; height: 100%; aspect-ratio: auto;
  padding: 0; box-shadow: none; transform: none;
}
.th-raspberry.ov-band .people .person + .person { border-left: 6px solid var(--cream); }
/* a wide strip needs its own crop, so faces sit in it rather than above it */
.th-raspberry.ov-band .person img { object-position: var(--band-pos, 50% 25%) !important; }
.th-raspberry.ov-band .kicker {
  position: absolute; z-index: 3; left: 88px; top: 286px; margin: 0;
  padding: 16px 22px 12px; background: var(--red); color: var(--cream); border-radius: 4px;
}

/* C — CORNER PRINT. Large, tilted, running off the top right edge. */
.th-raspberry.ov-corner { justify-content: flex-start; }
.th-raspberry.ov-corner .story-body { overflow: visible; }
.th-raspberry.ov-corner .people { margin: -112px -64px 26px 34px; }
/* only the print's corner leaves the slide, so a person on the right edge of
   a couple photo is never cut off */
.th-raspberry.ov-corner .people.n1 .person { width: 400px; transform: rotate(5deg); }
.th-raspberry.ov-corner .people.n1 .person[style*="1.185"] { width: 440px; }
.th-raspberry.ov-corner .people.n2 { width: 470px; height: 440px; }
.th-raspberry.ov-corner .people.n2 .person { width: 290px; }
.th-raspberry.ov-corner .people.n2 .person:nth-child(1) { transform: rotate(-4deg); }
.th-raspberry.ov-corner .people.n2 .person:nth-child(2) { top: 90px; transform: rotate(6deg); }

/* D and E share a header row: people first, the label beside them,
   then the story full width. */
.th-raspberry.ov-byline,
.th-raspberry.ov-header { --st-pt: 124px; --st-pb: 84px; }
.th-raspberry.ov-byline .story-body,
.th-raspberry.ov-header .story-body {
  display: grid; grid-template-columns: auto 1fr; column-gap: 30px; align-items: end;
}
.th-raspberry.ov-byline .story-copy,
.th-raspberry.ov-header .story-copy { display: contents; }
.th-raspberry.ov-byline .people,
.th-raspberry.ov-header .people { grid-column: 1; grid-row: 1; float: none; margin: 0; }
.th-raspberry.ov-byline .kicker,
.th-raspberry.ov-header .kicker { grid-column: 2; grid-row: 1; margin: 0 0 14px; }
.th-raspberry.ov-byline .story-copy > p,
.th-raspberry.ov-header .story-copy > p { grid-column: 1 / -1; }
.th-raspberry.ov-byline .story-copy > .people + p,
.th-raspberry.ov-header .story-copy > .people + p { margin-top: 42px; }
.th-raspberry.ov-byline .story-copy > p:first-child,
.th-raspberry.ov-header .story-copy > p:first-child { margin-top: 0; }

/* D — PORTRAIT BYLINE. Round portraits, overlapping when there are two. */
.th-raspberry.ov-byline .people.people { display: flex; width: auto; height: auto; }
.th-raspberry.ov-byline .people .person.person {
  position: relative; left: auto; right: auto; top: auto;
  width: 170px; height: 170px; aspect-ratio: 1; padding: 0;
  border-radius: 50%; overflow: hidden; border: 7px solid #fff; transform: none;
}
.th-raspberry.ov-byline .people .person + .person { margin-left: -38px; }
.th-raspberry.ov-byline .people .person[style*="1.185"] { width: 220px; height: 170px; border-radius: 85px; }

/* E — PRINT AND LABEL. Straight prints top left, the label beside them. */
.th-raspberry.ov-header .people.people { display: flex; gap: 16px; width: auto; height: auto; }
.th-raspberry.ov-header .people .person.person {
  position: relative; left: auto; right: auto; top: auto;
  height: 200px; width: auto; transform: rotate(-1.5deg);
}
.th-raspberry.ov-header .people .person + .person { transform: rotate(1.8deg); }