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

:root {
  --ink: #0a0b0c;
  --paper: #f3f0ea;
  --white: #fff;
  --pink: #ff4f88;
  --violet: #a8a5ff;
  --muted: #8e8e8e;
  --max: 1180px;
}

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #cfd2d5; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.reading-progress { position: fixed; z-index: 999; top: 0; left: 0; height: 3px; width: 0; background: var(--pink); }

.page {
  width: min(var(--max), calc(100% - 300px));
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(0,0,0,.22);
}

.brand-slash {
  color: var(--pink) !important;
  font-weight: 400;
}

/* ==========================================================
   GLOBAL STORY AD RAILS
   The article stays centered; both rails consume the complete
   remaining viewport width up to an 8px breathing gap.
   ========================================================== */
.ad {
  position: fixed;
  top: 8px;
  width: calc(
    (100vw - min(var(--max), calc(100vw - 300px))) / 2 - 8px
  );
  height: calc(100vh - 16px);
  min-height: 560px;
  background: #0b0d10;
  color: white;
  overflow: hidden;
}

.ad-left { left: 0; }
.ad-right { right: 0; }
.ad-label { display: block; padding-top: 16px; text-align: center; font-size: 8px; letter-spacing: .35em; color: #777; }
.ad-copy {
  width: min(100%, 360px);
  height: calc(100% - 32px);
  margin-inline: auto;
  padding: 28px 14px 15px;
  display: flex;
  flex-direction: column;
}
.ad-copy small { color: var(--violet); letter-spacing: .12em; font-size: 8px; }
.ad-copy h3 { font-family: Georgia, serif; font-size: 21px; line-height: 1.05; font-weight: 400; }
.ad-copy a { margin-top: auto; border: 1px solid #777; border-radius: 999px; padding: 9px 10px; font-size: 9px; text-align: center; }
.ad-shape { flex: 1; margin: 22px -14px; position: relative; }
.phone {
  background:
    radial-gradient(circle at 35% 25%, #3c4f62 0 7%, transparent 8%),
    radial-gradient(circle at 61% 28%, #1a3852 0 7%, transparent 8%),
    linear-gradient(145deg, #06090b, #33404d 48%, #0b0d10);
  border-radius: 26px 0 0 26px;
  transform: translateX(26px) rotate(-4deg);
}
.horizon {
  background:
    radial-gradient(circle at 50% 30%, #fff5bf 0 3%, transparent 4%),
    linear-gradient(#8395a8 0 34%, #d7a778 35%, #323f4b 50%, #10171e 100%);
}
.ad-copy-right h3 { font-size: 19px; }


/* ==========================================================
   GLOBAL STORY IN-CONTENT ADS
   Desktop: hidden because the side rails are active.
   Tablet/mobile: shown after the side rails disappear.

   Editorial rule:
   Insert only at natural chapter boundaries.
   Never place inside REEL//LIFE PLÄDOYER, END//CREDITS,
   a quote that carries the emotional climax, or Sources.
   ========================================================== */
.story-ad-break {
  display: none;
}

.story-ad-break__label {
  display: block;
  margin-bottom: 10px;
  color: #777;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .28em;
  text-align: center;
}

.story-ad-break__creative {
  position: relative;
  min-height: 190px;
  padding: 28px 32px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,79,136,.18), transparent 24%),
    linear-gradient(120deg, #0b0e13, #171b24);
  border: 1px solid rgba(255,255,255,.08);
}

.story-ad-break__creative::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -100px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  pointer-events: none;
}

.story-ad-break__creative--light {
  color: #111;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,79,136,.20), transparent 22%),
    linear-gradient(125deg, #f7f1e8, #dce4ea);
  border-color: #d4cec5;
}

.story-ad-break__eyebrow {
  position: relative;
  z-index: 2;
  color: var(--violet);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}

.story-ad-break__creative--light .story-ad-break__eyebrow {
  color: #b32d60;
}

.story-ad-break__creative h3 {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 14px 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(30px, 4.7vw, 48px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.035em;
}

.story-ad-break__creative p {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 0 20px;
  color: #b9bec5;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.48;
}

.story-ad-break__creative--light p {
  color: #5c6166;
}

.story-ad-break__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}


.topbar {
  height: 88px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  color: white;
  background: rgba(8,10,12,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.brand { text-align: center; font-weight: 900; line-height: .95; font-size: clamp(33px, 4.2vw, 58px); letter-spacing: -.055em; grid-column: 2; color: inherit; text-decoration: none;}
.brand small { display: block; margin-top: 7px; font-size: 8px; letter-spacing: .16em; }
.back, .menu-button { font-size: 9px; letter-spacing: .15em; }
.menu-button { justify-self: end; border: 0; background: transparent; color: white; cursor: pointer; }

.chapter-nav {
  position: sticky;
  z-index: 95;
  top: 88px;
  height: 40px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  color: white;
  background: #121416;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.chapter-nav a:hover { color: var(--pink); }

.article-hero {
  position: relative;
  min-height: 720px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #111;
  color: white;
}
.reel-panel, .life-panel { min-height: 720px; position: relative; background-size: cover; background-position: center; }
.reel-panel {
  background-image:
    linear-gradient(90deg, rgba(14,17,32,.36), rgba(60,28,86,.05)),
    url("https://upload.wikimedia.org/wikipedia/commons/f/fe/Besuch_beim_Drachenlord.jpg");
  filter: saturate(.65) contrast(1.1);
}
.life-panel {
  background-image:
    linear-gradient(90deg, rgba(46,26,15,.04), rgba(0,0,0,.34)),
    url("https://upload.wikimedia.org/wikipedia/commons/6/61/Drachenschanze_Altschauerberg.jpg");
  filter: saturate(.62) contrast(1.08);
}
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.86), transparent 55%, rgba(0,0,0,.12));
  pointer-events: none;
}
.split-rip {
  position: absolute;
  z-index: 3;
  top: -2%;
  left: calc(50% - 7px);
  height: 104%;
  width: 18px;
  background: #e9e4db;
  clip-path: polygon(48% 0, 75% 5%, 28% 14%, 66% 24%, 24% 34%, 70% 43%, 30% 54%, 68% 64%, 25% 73%, 65% 82%, 31% 92%, 52% 100%, 0 100%, 5% 0);
}
.side-word {
  position: absolute; z-index: 4; top: 25px; font-weight: 900; font-size: 11px; letter-spacing: .3em;
  border: 1px solid rgba(255,255,255,.6); padding: 7px 9px;
}
.reel-panel .side-word { left: 24px; }
.life-panel .side-word { right: 24px; }
.scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(142,111,255,.05) 6px); }
.data-stack {
  position: absolute; z-index: 4; left: 28px; top: 10%; display: grid; gap: 5px;
  color: white; font-size: 9px; letter-spacing: .16em;
}
.data-stack b { font-size: 14px; }
.data-stack-right { left: auto; right: 28px; text-align: right; }
.hero-type {
  position: absolute; z-index: 5; left: 50%; bottom: 60px; transform: translateX(-50%);
  width: min(900px, 90%); text-align: center;
}
.issue { font-size: 9px; letter-spacing: .24em; color: #d3d0ff; }
.hero-type h1 { margin: 9px 0 0; font-size: clamp(32px, 10vw, 132px); line-height: .8; letter-spacing: -.07em; font-weight: 900; color: var(--pink); }
.hero-type h2 { margin: 14px 0 12px; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 63px); line-height: .92; font-weight: 400; letter-spacing: -.04em; }
.hero-type p { max-width: 760px; margin: 0 auto 18px; font-family: Georgia, serif; line-height: 1.4; font-size: 15px; }
.scroll-down { display: inline-block; padding: 11px 16px; background: white; color: black; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.image-credit {
  position: absolute; z-index: 6; bottom: 10px; right: 12px; left: 12px;
  font-size: 7px; color: rgba(255,255,255,.68); letter-spacing: .04em;
}
.hero-image-credit { text-align: right; }

.standfirst {
  padding: 72px 70px 80px; display: grid; grid-template-columns: 180px 1fr; gap: 60px; background: #f5f2eb;
}
.standfirst-meta { display: flex; flex-direction: column; gap: 13px; font-size: 8px; line-height: 1.4; letter-spacing: .12em; color: #65625d; }
.standfirst-copy { max-width: 720px; }
.standfirst-copy p { margin: 0 0 20px; font-family: Georgia, serif; font-size: 19px; line-height: 1.6; }
.standfirst-copy .lead { font-size: clamp(28px, 3.4vw, 43px); line-height: 1.13; letter-spacing: -.025em; }

.statement {
  min-height: 430px; position: relative; padding: 85px 70px; display: grid; place-items: center;
  color: white; background: #0b0d0f;
}
.statement-index { position: absolute; top: 28px; left: 32px; color: var(--pink); font-size: 11px; }
.statement blockquote { max-width: 880px; margin: 0; text-align: center; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 62px); line-height: 1.03; }

.chapter { position: relative; padding: 88px 70px; }
.chapter-white { background: white; }
.chapter-number { position: absolute; right: 38px; top: 28px; font-family: Georgia, serif; font-size: 48px; color: #d0ccc4; }
.chapter-copy { max-width: 720px; margin-left: 16%; }
.chapter-kicker { font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.chapter-copy h2, .timeline-section h2, .meme-section h2, .analysis-section h2, .sources-head h2 {
  margin: 10px 0 28px; font-family: Georgia, serif; font-weight: 400; font-size: clamp(42px, 5.3vw, 70px); line-height: .94; letter-spacing: -.04em;
}
.chapter-copy p { font-family: Georgia, serif; font-size: 18px; line-height: 1.65; }
.editor-note { margin: 40px 0; border-top: 1px solid #111; border-bottom: 1px solid #111; padding: 18px 0; }
.editor-note b { color: var(--pink); font-size: 9px; letter-spacing: .18em; }
.editor-note p { font-size: 15px; margin: 9px 0; }

.pull-photo { width: min(760px, 80%); margin: 52px auto 0; }
.pull-photo .photo {
  aspect-ratio: 16/9;
  background: linear-gradient(to top, rgba(0,0,0,.12), transparent),
    url("https://upload.wikimedia.org/wikipedia/commons/5/50/Altschauerberg.jpg") center/cover;
}
.pull-photo figcaption { padding: 10px 0; font-family: Georgia, serif; font-size: 13px; }
.pull-photo figcaption span { display: block; margin-top: 6px; font-family: Arial, sans-serif; color: #777; font-size: 8px; }

.timeline-section { padding: 88px 70px 100px; background: #e8e4dc; }
.timeline-section header { max-width: 760px; margin: 0 auto 55px; }
.timeline-section header > p { font-family: Georgia, serif; font-size: 17px; line-height: 1.55; }
.timeline { max-width: 850px; margin: 0 auto; position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 105px; width: 1px; background: #aaa59e; }
.timeline-item { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 45px; padding: 0 0 42px; }
.timeline-item::before {
  content: ""; position: absolute; left: 100px; top: 4px; width: 10px; height: 10px; transform: translateX(-50%);
  border-radius: 50%; background: #111; border: 3px solid #e8e4dc;
}
.timeline-item time { font-family: Georgia, serif; font-size: 23px; }
.timeline-item h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 25px; }
.timeline-item p { margin: 0; color: #56524d; font-family: Georgia, serif; line-height: 1.5; }
.timeline-item.accent h3, .timeline-item.final h3 { color: #d9346e; }
.timeline-item.final::before { background: var(--pink); }

.full-photo-section { height: 650px; position: relative; overflow: hidden; color: white; }
.full-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.old-house {
  background-image: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.12)),
    url("https://upload.wikimedia.org/wikipedia/commons/6/61/Drachenschanze_Altschauerberg.jpg");
}
.full-photo-copy { position: absolute; z-index: 3; left: 7%; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.full-photo-copy span { color: #c8c4ff; font-size: 10px; letter-spacing: .2em; }
.full-photo-copy b { font-family: Georgia, serif; font-size: clamp(38px, 5vw, 70px); font-weight: 400; }

.dark-chapter { color: white; background: #0b0d0f; }
.dark-chapter .chapter-number { color: #333; }
.dark-chapter .chapter-kicker { color: var(--violet); }
.dark-chapter .chapter-copy { margin-left: 10%; }
.big-line { margin-top: 42px !important; padding-top: 28px; border-top: 1px solid #444; font-size: 30px !important; line-height: 1.2 !important; }
.big-line strong { color: var(--pink); }

.before-after { min-height: 560px; position: relative; display: grid; grid-template-columns: 1fr 1fr; background: white; }
.before, .after { min-width: 0; padding: 24px; }
.before > span, .after > span { display: inline-block; margin-bottom: 12px; font-size: 9px; letter-spacing: .18em; }
.before-img, .after-img { height: 430px; background-size: cover; background-position: center; }
.before-img { background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/61/Drachenschanze_Altschauerberg.jpg"); }
.after-img { background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/73/ASB_8_2.jpg"); }
.before small, .after small { display: block; margin-top: 8px; color: #777; font-family: Georgia, serif; }
.ba-slash {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); font-size: 25px; font-weight: 900;
}

.meme-section { padding: 90px 70px; color: white; background: linear-gradient(115deg, #101216, #17131c); }
.meme-section h2 em { color: var(--pink); }
.meme-grid { margin: 50px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #3a3a3a; }
.meme-stat { min-height: 190px; padding: 32px 25px; background: #101216; display: flex; flex-direction: column; justify-content: space-between; }
.meme-stat strong { font-family: Georgia, serif; font-size: clamp(48px, 6vw, 76px); font-weight: 400; }
.meme-stat span { color: #aaa; font-size: 11px; line-height: 1.45; }
.meme-section > p { max-width: 760px; font-family: Georgia, serif; font-size: 18px; line-height: 1.65; }

.analysis-section { padding: 88px 70px 100px; background: #f4f1ea; }
.analysis-section header { max-width: 760px; }
.analysis-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: #c5c0b7; border: 1px solid #c5c0b7; }
.analysis-grid article { min-height: 300px; padding: 32px; background: #f9f7f2; }
.analysis-grid article > span { color: var(--pink); font-family: Georgia, serif; font-size: 20px; }
.analysis-grid h3 { font-family: Georgia, serif; font-size: 30px; line-height: 1.02; margin: 35px 0 12px; }
.analysis-grid p { color: #555; font-family: Georgia, serif; line-height: 1.55; }

.closing { padding: 110px 70px 100px; text-align: center; background: white; }
.closing > span { color: var(--pink); font-size: 9px; letter-spacing: .2em; }
.closing p { max-width: 680px; margin: 28px auto; font-family: Georgia, serif; font-size: 18px; line-height: 1.55; }
.closing h2 { margin: 30px auto; max-width: 900px; font-family: Georgia, serif; font-size: clamp(42px, 6vw, 76px); line-height: .95; font-weight: 400; }
.closing h2 em { color: #8d88e8; }
.closing-mark { margin-top: 65px; font-size: 44px; font-weight: 900; letter-spacing: -.07em; }
.closing-mark span { font-weight: 400; }

.sources { padding: 70px; color: white; background: #0b0d0f; }
.sources-head { max-width: 760px; }
.sources-head > span { color: var(--violet); font-size: 9px; letter-spacing: .2em; }
.sources-head p { color: #bbb; font-family: Georgia, serif; line-height: 1.55; }
.source-columns { margin-top: 45px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.source-columns h3 { padding-bottom: 10px; border-bottom: 1px solid #444; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.source-columns a { display: block; padding: 12px 0; border-bottom: 1px solid #272727; color: #d7d7d7; font-family: Georgia, serif; font-size: 14px; }
.source-columns a:hover { color: var(--pink); }
.source-note { margin-top: 40px; color: #777; font-size: 9px; line-height: 1.5; }

footer { padding: 28px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #fff; }
.footer-logo { font-size: 28px; font-weight: 900; letter-spacing: -.06em; }
footer p { font-size: 8px; letter-spacing: .16em; }
footer > a:last-child { justify-self: end; font-size: 9px; letter-spacing: .12em; }

@media (max-width: 1480px) {
  .ad-copy {
    padding-inline: 12px;
  }

  .ad-copy h3 {
    font-size: 19px;
  }
}

@media (max-width: 1280px) {
  .ad {
    display: none;
  }

  .page {
    width: 100%;
  }

  .story-ad-break {
    display: block;
    padding: 28px clamp(18px, 5vw, 52px);
    background: #e6e3dd;
    border-top: 1px solid #d3cfc7;
    border-bottom: 1px solid #d3cfc7;
  }
}

@media (max-width: 760px) {
  .topbar { height: 72px; padding: 0 12px; }
  .brand strong { font-size: 29px; }
  .brand small { display: none; }
  .chapter-nav {
    top: 72px; height: auto; display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px;
  }
  .chapter-nav.open { display: flex; }

  .article-hero, .reel-panel, .life-panel { min-height: 660px; }
  .hero-type { bottom: 50px; }
  /* .hero-type h1 { font-size: 17vw; } */
  .hero-type p { font-size: 13px; }
  .data-stack { display: grid; top: 12%; left: 14px; gap: 3px; font-size: 7px; letter-spacing: .10em;}
  .data-stack-right {left: auto; right: 14px;}

  .standfirst { padding: 48px 20px 58px; grid-template-columns: 1fr; gap: 28px; }
  .standfirst-meta { flex-direction: row; flex-wrap: wrap; }

  .statement { padding: 70px 22px; }
  .chapter, .timeline-section, .meme-section, .analysis-section, .closing, .sources { padding: 62px 20px; }

  .chapter-copy, .dark-chapter .chapter-copy { margin-left: 0; }
  .chapter-number { right: 20px; }
  .pull-photo { width: 100%; }

  .timeline::before { left: 66px; }
  .timeline-item { grid-template-columns: 55px 1fr; gap: 28px; }
  .timeline-item::before { left: 66px; }

  .full-photo-section { height: 560px; }
  .full-photo-copy { left: 20px; right: 20px; }

  .before-after { grid-template-columns: 1fr; }
  .before-img, .after-img { height: 330px; }
  .ba-slash { top: 50%; }

  .meme-grid, .analysis-grid, .source-columns { grid-template-columns: 1fr; }


  .story-ad-break {
    padding: 18px 0;
    background: #ece8e1;
  }

  .story-ad-break__label {
    margin: 0 0 9px;
  }

  .story-ad-break__creative {
    min-height: 250px;
    padding: 28px 20px;
    border-left: 0;
    border-right: 0;
  }

  .story-ad-break__creative h3 {
    max-width: 92%;
    font-size: clamp(32px, 10vw, 46px);
  }

  .story-ad-break__creative p {
    max-width: 88%;
  }

  footer { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  footer > a:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}


/* Emotional editorial plea */
.plea-section {
  padding: 0;
  color: #111;
  background: #f2efe8;
  border-top: 1px solid #d2cdc4;
  border-bottom: 1px solid #d2cdc4;
}

.plea-rule {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  color: white;
  background: #0b0d0f;
  font-size: 8px;
  letter-spacing: .17em;
}

.plea-rule span:last-child {
  color: #a8a5ff;
  text-align: right;
}

.plea-inner {
  max-width: 840px;
  margin: 0 auto;
  padding: 90px 54px 75px;
}

.plea-inner > p {
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.7;
}

.plea-lead {
  margin-top: 0;
  font-size: clamp(38px, 5vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em;
}

.plea-question {
  margin: 68px -8vw;
  padding: 56px 7vw;
  color: white;
  background: #0b0d0f;
}

.plea-question > span {
  color: #ff4f88;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.plea-question h2 {
  margin: 18px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(42px, 6vw, 74px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.04em;
}

.plea-question h2 em {
  color: #b8b5ff;
}

.plea-emotion {
  margin: 48px 0 !important;
  padding-left: 24px;
  border-left: 4px solid #ff4f88;
  font-size: 29px !important;
  line-height: 1.35 !important;
}

.home-wish {
  margin: 70px 0;
  padding: 55px 42px;
  color: white;
  background:
    linear-gradient(115deg, rgba(11,13,15,.96), rgba(22,18,27,.94));
  box-shadow: 0 30px 65px rgba(0,0,0,.12);
}

.home-wish > span {
  color: #a8a5ff;
  font-size: 9px;
  letter-spacing: .2em;
}

.home-wish h2 {
  margin: 18px 0;
  font-family: Georgia, serif;
  font-size: clamp(48px, 7vw, 84px);
  line-height: .88;
  font-weight: 400;
  letter-spacing: -.05em;
}

.home-wish h2 em {
  color: #ff4f88;
}

.home-wish p {
  max-width: 620px;
  margin: 25px 0 0;
  color: #ddd;
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
}

.peace {
  margin: 42px 0 !important;
  text-align: center;
  font-size: clamp(42px, 6vw, 72px) !important;
  line-height: 1 !important;
}

.peace strong {
  color: #ff4f88;
  font-weight: 400;
}

.biblical {
  margin: 65px 0;
  padding: 40px 30px;
  border-top: 1px solid #aaa49a;
  border-bottom: 1px solid #aaa49a;
  text-align: center;
  font-family: Georgia, serif;
  font-size: clamp(29px, 4vw, 47px);
  line-height: 1.15;
}

.biblical span {
  display: block;
  margin-top: 18px;
  color: #777;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
}

.plea-final {
  margin-top: 60px !important;
  text-align: center;
  font-size: 31px !important;
  line-height: 1.3 !important;
}

.verification-note {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 54px 40px;
  border-top: 1px solid #c7c1b7;
  color: #615d57;
}

.verification-note b {
  font-size: 8px;
  letter-spacing: .18em;
}

.verification-note p {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .plea-rule {
    flex-direction: column;
  }
  .plea-rule span:last-child {
    text-align: left;
  }
  .plea-inner {
    padding: 60px 20px;
  }
  .plea-question {
    margin: 50px -20px;
    padding: 45px 20px;
  }
  .home-wish {
    margin: 55px -5px;
    padding: 42px 22px;
  }
  .verification-note {
    padding: 22px 20px 35px;
  }
}


/* HATE//LOVE */
.duality-section { background: #0a0c0e; color: white; }
.duality-head { padding: 78px 70px 48px; max-width: 920px; }
.duality-head > span { color: var(--pink); font-size: 10px; font-weight: 900; letter-spacing: .24em; }
.duality-head h2 { margin: 10px 0 14px; font-family: Georgia, serif; font-size: clamp(50px, 6.5vw, 86px); line-height: .92; font-weight: 400; }
.duality-head p { max-width: 650px; color: #bdbdbd; font-family: Georgia, serif; font-size: 18px; line-height: 1.5; }

.duality-grid { display: grid; grid-template-columns: 1fr 1fr; }
.shadow-card, .light-card { min-height: 700px; padding: 54px 46px; }
.shadow-card { background: #121418; }
.light-card { color: #111; background: #eeeae2; }
.duality-label { font-size: 9px; letter-spacing: .18em; font-weight: 800; }
.shadow-card .duality-label { color: #ff6c9e; }
.light-card .duality-label { color: #6c65c7; }
.shadow-card h3, .light-card h3 {
  margin: 25px 0 28px; font-family: Georgia, serif; font-size: clamp(30px, 3.5vw, 47px); line-height: .98; font-weight: 400;
}
.shadow-card p, .light-card p { font-family: Georgia, serif; font-size: 16px; line-height: 1.65; }
.trigger-quote, .light-quote {
  margin: 42px 0; padding: 28px 0; border-top: 1px solid #555; border-bottom: 1px solid #555;
  font-family: Georgia, serif; font-size: clamp(27px, 3.4vw, 42px); line-height: 1.05;
}
.light-quote { border-color: #a7a198; color: #5f59bc; }
.trigger-quote { color: #ff6799; }
.trigger-quote span, .light-quote span {
  display: block; margin-top: 15px; color: #888; font-family: Arial, sans-serif; font-size: 8px; line-height: 1.4; letter-spacing: .1em;
}
.duality-bottom { margin-top: 46px; font-size: 22px !important; }

.love-story { display: grid; grid-template-columns: 180px 1fr; gap: 46px; padding: 82px 70px 92px; background: #f6f2eb; color: #111; }
.love-story-meta { display: flex; flex-direction: column; gap: 8px; color: #777; font-size: 9px; letter-spacing: .16em; }
.love-story-meta b { color: var(--pink); font-size: 15px; }
.love-story-copy { max-width: 740px; }
.love-story-copy h2 { margin: 12px 0 30px; font-family: Georgia, serif; font-size: clamp(46px, 6vw, 78px); line-height: .92; font-weight: 400; letter-spacing: -.04em; }
.love-story-copy p { font-family: Georgia, serif; font-size: 18px; line-height: 1.65; }
.love-story-copy blockquote {
  margin: 48px -40px; padding: 48px 40px; color: white; background: #111318;
  font-family: Georgia, serif; font-size: clamp(35px, 5vw, 62px); line-height: 1.02;
}
.love-thesis { margin-top: 45px !important; padding-left: 22px; border-left: 4px solid var(--pink); font-size: 25px !important; line-height: 1.35 !important; }

/* GAME//LIFE */
.game-life-section { padding: 88px 70px 95px; background: #f5f2ec; }
.game-life-section > header { max-width: 820px; margin-bottom: 46px; }
.game-life-section > header h2 { margin: 10px 0 20px; font-family: Georgia, serif; font-size: clamp(48px, 6vw, 80px); line-height: .92; font-weight: 400; }
.game-life-section > header p { font-family: Georgia, serif; font-size: 18px; line-height: 1.6; }
.game-life-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #888; }
.game-side, .life-side { padding: 42px 35px; }
.game-side { color: white; background: #101218; }
.life-side { background: white; }
.split-label { font-size: 10px; letter-spacing: .24em; font-weight: 900; color: var(--pink); }
.life-side .split-label { color: #6d67ca; }
.game-side h3, .life-side h3 { margin: 18px 0 30px; font-family: Georgia, serif; font-size: 39px; font-weight: 400; }
.game-side ol, .life-side ol { list-style: none; margin: 0; padding: 0; }
.game-side li, .life-side li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(128,128,128,.35); }
.game-side li b, .life-side li b { font-size: 10px; letter-spacing: .08em; }
.game-side li span, .life-side li span { font-family: Georgia, serif; line-height: 1.4; }
.game-note, .life-note { margin-top: 32px; padding: 18px; border: 1px solid #555; font-family: Georgia, serif; line-height: 1.45; }
.life-note { border-color: #bbb; color: #d53670; font-size: 19px; }

.why-play { margin-top: 70px; }
.why-play > span { font-size: 9px; font-weight: 800; letter-spacing: .2em; color: #6d67ca; }
.why-play > h3 { margin: 10px 0 30px; font-family: Georgia, serif; font-size: 46px; font-weight: 400; }
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #bbb7af; border: 1px solid #bbb7af; }
.why-grid article { min-height: 220px; padding: 26px 20px; background: #fff; }
.why-grid b { color: var(--pink); font-size: 10px; letter-spacing: .14em; }
.why-grid p { margin-top: 38px; font-family: Georgia, serif; font-size: 15px; line-height: 1.5; }
.game-question { margin: 68px 0 0; padding: 50px 32px; color: white; background: #0b0d0f; text-align: center; font-family: Georgia, serif; font-size: clamp(32px, 4.5vw, 58px); line-height: 1.08; }
.game-question strong { color: var(--pink); font-weight: 400; }

/* PSYCHOLOGY */
.psychology-section { padding: 90px 70px; color: white; background: linear-gradient(125deg,#17131c,#0c0e11); }
.psychology-head { max-width: 900px; }
.psychology-head h2 { margin: 12px 0 40px; font-family: Georgia, serif; font-size: clamp(47px, 6vw, 79px); line-height: .94; font-weight: 400; }
.psychology-copy { max-width: 820px; margin-left: 10%; }
.psychology-copy > p { font-family: Georgia, serif; font-size: 18px; line-height: 1.7; }
.psychology-equation {
  margin: 56px -7vw; padding: 42px 5vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  background: #f3efe8; color: #111; font-size: 11px; letter-spacing: .1em; font-weight: 800;
}
.psychology-equation i { color: var(--pink); font-family: Georgia, serif; font-size: 30px; font-style: normal; }
.psychology-equation strong { padding: 11px 15px; color: white; background: #111; }
.psychology-thesis { margin-top: 44px !important; padding-left: 23px; border-left: 4px solid var(--pink); font-size: 26px !important; line-height: 1.35 !important; }

/* New-generation meme light */
.meme-light { margin-top: 55px; padding: 43px; background: #f3efe8; color: #111; }
.meme-light > span { color: #716bd1; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.meme-light h3 { margin: 16px 0 22px; font-family: Georgia, serif; font-size: clamp(35px,4.5vw,56px); line-height: .98; font-weight: 400; }
.meme-light p { font-family: Georgia, serif; font-size: 17px; line-height: 1.6; }

@media (max-width: 900px) {
  .duality-grid, .game-life-split { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .duality-head, .game-life-section, .psychology-section { padding: 58px 20px; }
  .shadow-card, .light-card { min-height: 0; padding: 42px 22px; }
  .love-story { grid-template-columns: 1fr; padding: 60px 20px; gap: 25px; }
  .love-story-copy blockquote { margin: 40px -20px; padding: 38px 20px; }
  .game-side, .life-side { padding: 34px 20px; }
  .game-side li, .life-side li { grid-template-columns: 105px 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .psychology-copy { margin-left: 0; }
  .psychology-equation { margin: 45px -20px; padding: 34px 20px; }
  .meme-light { padding: 28px 20px; }
}


/* END//CREDITS */
.end-credits {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  color: white;
  background:
    radial-gradient(circle at 50% 0%, rgba(78,68,112,.18), transparent 42%),
    linear-gradient(#090a0c, #030405 74%, #000);
}

.credits-fade {
  height: 14vh;
  background: linear-gradient(to bottom, rgba(255,255,255,.03), transparent);
}

.credits-inner {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
  padding: 70px 0 95px;
  text-align: center;
}

.credits-kicker {
  display: inline-block;
  color: #a8a5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .32em;
}

.credits-title {
  margin-top: 56px;
}

.credits-title small {
  color: #777;
  font-size: 9px;
  letter-spacing: .2em;
}

.credits-title h2 {
  margin: 17px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(54px, 8vw, 108px);
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.05em;
}

.credits-title h2 em {
  color: #f0edf7;
  font-weight: 400;
}

.credits-dedication {
  max-width: 650px;
  margin: 70px auto 0;
}

.credits-dedication p {
  margin: 12px 0;
  color: #bcbcbc;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
}

.credits-dedication p:first-child {
  color: white;
  font-size: 25px;
}

.credits-line {
  width: 1px;
  height: 120px;
  margin: 58px auto;
  background: linear-gradient(to bottom, #555, #ff4f88);
}

.credits-thesis {
  margin: 0 auto 58px;
  font-family: Georgia, serif;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
}

.credits-thesis strong {
  color: #ff4f88;
  font-weight: 400;
}

.ending-video {
  max-width: 820px;
  margin: 0 auto 80px;
  text-align: left;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #2d2d2d;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.video-frame::before {
  content: "REEL//LIFE ENDING TRACK";
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  color: rgba(255,255,255,.68);
  font-size: 8px;
  letter-spacing: .16em;
  pointer-events: none;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  color: #777;
  font-size: 8px;
  letter-spacing: .12em;
}

.video-meta a {
  color: #aaa7ff;
}

.final-card {
  margin: 80px auto 0;
  padding: 68px 44px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.final-card > span {
  color: #ff4f88;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .24em;
}

.final-card h3 {
  margin: 18px 0 25px;
  font-family: Georgia, serif;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.05em;
}

.final-card p {
  max-width: 680px;
  margin: 0 auto;
  color: #aaa;
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
}

.credits-logo {
  margin-top: 95px;
  font-size: 49px;
  font-weight: 900;
  letter-spacing: -.07em;
}

.credits-logo span {
  font-weight: 400;
}

.credits-tagline {
  margin-top: 11px;
  color: #6f6f6f;
  font-size: 8px;
  letter-spacing: .22em;
}

@media (max-width: 760px) {
  .credits-inner {
    width: min(100% - 30px, 900px);
    padding: 45px 0 70px;
  }

  .credits-dedication p {
    font-size: 16px;
  }

  .video-meta {
    flex-direction: column;
    gap: 8px;
  }

  .final-card {
    padding: 48px 14px;
  }
}


.local-player-warning {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #5b566d;
  background: #15121b;
  color: #d5d1df;
  text-align: left;
}

.local-player-warning b {
  color: #ff4f88;
  font-size: 9px;
  letter-spacing: .18em;
}

.local-player-warning p {
  margin: 8px 0 0;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
}

.local-player-warning code {
  color: #aaa7ff;
}


/* ===========================================================
   STORY 002 // JP KRAEMER
   Scoped with body.jp-story so Story 001 remains untouched.
   =========================================================== */

.jp-story .jp-reel-panel {
  background-image:
    linear-gradient(90deg, rgba(11,14,21,.24), rgba(45,22,66,.08)),
    url("https://upload.wikimedia.org/wikipedia/commons/8/8e/EMS_2023%2C_Essen_%28P1160634-Verbessert-RR%29.jpg");
  background-position: center 28%;
  filter: saturate(.74) contrast(1.06);
}

.jp-story .jp-life-panel {
  background-image:
    linear-gradient(90deg, rgba(20,20,20,.08), rgba(0,0,0,.42)),
    url("https://upload.wikimedia.org/wikipedia/commons/d/d3/JP_Performance_-_Blick_auf_das_Hauptgeb%C3%A4ude_in_Dortmund_2017.JPG");
  background-position: center;
  filter: saturate(.72) contrast(1.06);
}

.jp-story .jp-statement {
  background:
    radial-gradient(circle at 75% 35%, rgba(168,165,255,.12), transparent 28%),
    #0b0d0f;
}

.jp-story .jp-brand-card {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,79,136,.08), transparent 25%),
    #111319;
}

.jp-story .jp-human-card {
  background: #ece8df;
}

.jp-story .jp-timeline {
  background: #e9e5dd;
}

.jp-story .jp-pace-photo {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.10)),
    url("https://upload.wikimedia.org/wikipedia/commons/c/c8/JP_Performance_-_PACE_Museum_-_2022_JD.jpg");
  background-position: center;
}

.jp-story .jp-break-section {
  position: relative;
  padding: 96px 70px;
  color: white;
  background:
    linear-gradient(125deg, rgba(18,10,14,.95), rgba(7,9,12,.98)),
    #0b0d0f;
}

.jp-story .jp-break-section .chapter-number {
  color: #3c3036;
}

.jp-story .jp-break-copy {
  max-width: 770px;
  margin-left: 10%;
}

.jp-story .jp-break-copy h2 {
  margin: 12px 0 32px;
  font-family: Georgia, serif;
  font-size: clamp(46px, 6vw, 78px);
  line-height: .93;
  font-weight: 400;
  letter-spacing: -.045em;
}

.jp-story .jp-break-copy > p {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
}

.jp-story .accountability-quote {
  margin: 50px -5vw;
  padding: 50px 5vw;
  border-top: 1px solid #4b3941;
  border-bottom: 1px solid #4b3941;
  color: #ff6f9f;
  font-family: Georgia, serif;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
}

.jp-story .accountability-quote span,
.jp-story .fallout-quote span {
  display: block;
  margin-top: 18px;
  color: #8e8e8e;
  font-family: Arial, sans-serif;
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: .10em;
}

.jp-story .jp-editor-note {
  border-color: #494949;
}

.jp-story .jp-responsibility {
  padding: 92px 70px 100px;
  background: #f4f1ea;
}

.jp-story .jp-responsibility > header {
  max-width: 820px;
}

.jp-story .jp-responsibility h2 {
  margin: 12px 0 45px;
  font-family: Georgia, serif;
  font-size: clamp(47px, 6vw, 78px);
  line-height: .94;
  font-weight: 400;
  letter-spacing: -.04em;
}

.jp-story .responsibility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid #c5c0b7;
  background: #c5c0b7;
}

.jp-story .responsibility-grid article {
  min-height: 300px;
  padding: 34px;
  background: #faf8f3;
}

.jp-story .responsibility-grid article > span {
  color: #d13c70;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

.jp-story .responsibility-grid h3 {
  margin: 38px 0 14px;
  font-family: Georgia, serif;
  font-size: 31px;
  line-height: 1;
  font-weight: 400;
}

.jp-story .responsibility-grid p {
  color: #555;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
}

.jp-story .jp-brand-fallout {
  padding: 96px 70px;
  color: white;
  background:
    radial-gradient(circle at 15% 5%, rgba(168,165,255,.12), transparent 25%),
    #0b0d0f;
}

.jp-story .jp-brand-fallout > h2 {
  margin: 12px 0 48px;
  max-width: 900px;
  font-family: Georgia, serif;
  font-size: clamp(48px, 6.5vw, 84px);
  line-height: .91;
  font-weight: 400;
  letter-spacing: -.045em;
}

.jp-story .jp-brand-fallout > h2 em {
  color: #ff5b91;
}

.jp-story .jp-brand-fallout > p {
  max-width: 800px;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
}

.jp-story .brand-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 55px;
  background: #333;
}

.jp-story .brand-stats > div {
  min-height: 210px;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #121419;
}

.jp-story .brand-stats strong {
  font-family: Georgia, serif;
  font-size: clamp(48px, 6vw, 75px);
  font-weight: 400;
}

.jp-story .brand-stats span {
  color: #aaa;
  font-size: 11px;
  line-height: 1.45;
}

.jp-story .fallout-quote {
  margin: 55px 0;
  padding: 44px 0;
  border-top: 1px solid #454545;
  border-bottom: 1px solid #454545;
  color: #aaa7ff;
  font-family: Georgia, serif;
  font-size: clamp(35px, 5vw, 60px);
  line-height: 1.03;
}

.jp-story .brand-thesis {
  margin-top: 65px;
  padding: 48px;
  color: #111;
  background: #efebe3;
}

.jp-story .brand-thesis > span {
  color: #766fd5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.jp-story .brand-thesis h3 {
  margin: 15px 0 16px;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
}

.jp-story .brand-thesis p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.3;
}

.jp-story .jp-community {
  padding: 95px 70px;
  background: #ebe7df;
}

.jp-story .community-copy {
  max-width: 820px;
  margin: 0 auto;
}

.jp-story .community-copy h2 {
  margin: 12px 0 35px;
  font-family: Georgia, serif;
  font-size: clamp(48px, 6vw, 80px);
  line-height: .93;
  font-weight: 400;
  letter-spacing: -.04em;
}

.jp-story .community-copy > p {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
}

.jp-story .community-equation {
  margin: 55px -7vw;
  padding: 40px 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  color: white;
  background: #0b0d0f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
}

.jp-story .community-equation i {
  color: #ff4f88;
  font-family: Georgia, serif;
  font-size: 30px;
  font-style: normal;
}

.jp-story .community-equation strong {
  color: #aaa7ff;
}

.jp-story .community-thesis {
  margin-top: 45px !important;
  padding-left: 24px;
  border-left: 4px solid #ff4f88;
  font-size: 27px !important;
  line-height: 1.35 !important;
}

.jp-story .jp-plea {
  background: #f3efe8;
}

.jp-story .jp-wish {
  background:
    radial-gradient(circle at 80% 15%, rgba(96,88,176,.20), transparent 30%),
    linear-gradient(125deg, #12141a, #080a0d);
}

.jp-story .jp-credits-dedication p:first-child {
  color: #aaa7ff;
  font-size: 25px;
}

.jp-story .source-micro {
  color: #8d8d8d;
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .jp-story .brand-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .jp-story .jp-break-section,
  .jp-story .jp-responsibility,
  .jp-story .jp-brand-fallout,
  .jp-story .jp-community {
    padding: 62px 20px;
  }

  .jp-story .jp-break-copy {
    margin-left: 0;
  }

  .jp-story .accountability-quote {
    margin: 42px -20px;
    padding: 40px 20px;
  }

  .jp-story .responsibility-grid {
    grid-template-columns: 1fr;
  }

  .jp-story .brand-thesis {
    padding: 34px 22px;
  }

  .jp-story .community-equation {
    margin: 45px -20px;
    padding: 34px 20px;
  }
}


/* ===========================================================
   STORY 003 // TANZVERBOT
   =========================================================== */

.tanzi-story .tanzi-reel-panel {
  background-image:
    linear-gradient(90deg, rgba(26,18,38,.28), rgba(0,0,0,.10)),
    url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Tanzverbot.jpg");
  background-position: center;
  filter: saturate(.62) contrast(1.08);
}

.tanzi-story .tanzi-life-panel {
  position: relative;
  background:
    radial-gradient(circle at 50% 43%, rgba(100,81,170,.22), transparent 22%),
    linear-gradient(135deg, #151421 0%, #080a0d 48%, #11151a 100%);
}

.tanzi-story .tanzi-life-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 26%;
  width: 52%;
  height: 38%;
  transform: translateX(-50%) perspective(700px) rotateX(2deg);
  border: 2px solid rgba(168,165,255,.24);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #050608;
  background-size: 26px 26px;
  box-shadow: 0 0 90px rgba(109,91,191,.18);
}

.tanzi-story .tanzi-screen {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 34%;
  transform: translate(-50%,-50%);
  width: 70%;
  color: white;
  text-align: center;
}

.tanzi-story .tanzi-screen span {
  display: block;
  margin-bottom: 15px;
  color: #ff4f88;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .25em;
}

.tanzi-story .tanzi-screen b {
  font-family: Georgia, serif;
  font-size: clamp(22px, 2.4vw, 35px);
  line-height: 1.05;
  font-weight: 400;
}

.tanzi-story .tanzi-statement {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,79,136,.08), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(168,165,255,.09), transparent 25%),
    #090b0e;
}

.tanzi-story .tanzi-shadow {
  background: #111216;
}

.tanzi-story .tanzi-light {
  background: #eae6de;
}

.tanzi-story .tanzi-hate-home {
  padding: 96px 70px;
  background: #f3f0e9;
}

.tanzi-story .tanzi-hate-home > h2 {
  margin: 12px 0 48px;
  font-family: Georgia, serif;
  font-size: clamp(48px, 6.4vw, 82px);
  line-height: .91;
  font-weight: 400;
  letter-spacing: -.045em;
}

.tanzi-story .hate-home-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 55px;
  align-items: stretch;
}

.tanzi-story .hate-home-copy p {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
}

.tanzi-story .hate-home-stat {
  min-height: 430px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  background: #0b0d0f;
}

.tanzi-story .hate-home-stat > span {
  color: #aaa7ff;
  font-size: 8px;
  letter-spacing: .18em;
}

.tanzi-story .hate-home-stat strong {
  margin: 22px 0 0;
  color: #ff4f88;
  font-family: Georgia, serif;
  font-size: 105px;
  line-height: .8;
  font-weight: 400;
}

.tanzi-story .hate-home-stat b {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .15em;
}

.tanzi-story .hate-home-stat small {
  margin-top: 28px;
  color: #888;
  line-height: 1.45;
}

.tanzi-story .home-invasion {
  margin: 75px 0 0;
  padding: 58px 30px;
  border-top: 1px solid #aaa49a;
  border-bottom: 1px solid #aaa49a;
  text-align: center;
  font-family: Georgia, serif;
  font-size: clamp(34px, 4.7vw, 60px);
  line-height: 1.04;
}

.tanzi-story .home-invasion strong {
  color: #d83a72;
  font-weight: 400;
}

.tanzi-story .tanzi-timeline {
  background: #e7e3db;
}

.tanzi-story .tanzi-money {
  padding: 95px 70px;
  color: white;
  background:
    radial-gradient(circle at 75% 15%, rgba(255,79,136,.11), transparent 25%),
    #0b0d0f;
}

.tanzi-story .money-head h2 {
  margin: 12px 0 48px;
  max-width: 880px;
  font-family: Georgia, serif;
  font-size: clamp(48px, 6.5vw, 82px);
  line-height: .92;
  font-weight: 400;
  letter-spacing: -.04em;
}

.tanzi-story .money-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #383838;
}

.tanzi-story .money-grid article {
  min-height: 310px;
  padding: 33px 27px;
  background: #121418;
}

.tanzi-story .money-grid article > span {
  color: #ff4f88;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.tanzi-story .money-grid h3 {
  margin: 50px 0 15px;
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 400;
}

.tanzi-story .money-grid p {
  color: #aaa;
  font-family: Georgia, serif;
  line-height: 1.55;
}

.tanzi-story .money-thesis {
  max-width: 820px;
  margin: 60px 0 0;
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1.35;
}

.tanzi-story .tanzi-love-loss {
  padding: 100px 70px;
  background: #eeeae2;
}

.tanzi-story .love-loss-inner {
  max-width: 820px;
  margin: 0 auto;
}

.tanzi-story .love-loss-inner h2 {
  margin: 12px 0 35px;
  font-family: Georgia, serif;
  font-size: clamp(52px, 7vw, 88px);
  line-height: .88;
  font-weight: 400;
  letter-spacing: -.05em;
}

.tanzi-story .love-loss-inner h2 em {
  color: #8a84df;
}

.tanzi-story .love-loss-inner > p {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
}

.tanzi-story .love-loss-inner blockquote {
  margin: 55px -8vw;
  padding: 55px 7vw;
  color: white;
  background: #0b0d0f;
  font-family: Georgia, serif;
  font-size: clamp(35px, 5vw, 62px);
  line-height: 1.03;
}

.tanzi-story .love-loss-inner blockquote span {
  display: block;
  margin-top: 18px;
  color: #858585;
  font-family: Arial, sans-serif;
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: .1em;
}

.tanzi-story .love-loss-card {
  margin-top: 48px;
  padding: 25px;
  border-left: 4px solid #ff4f88;
  background: #fff;
}

.tanzi-story .love-loss-card > span {
  color: #d43a70;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.tanzi-story .love-loss-card p {
  margin-bottom: 0;
  font-family: Georgia, serif;
  line-height: 1.55;
}

.tanzi-story .tanzi-internet-home {
  padding: 100px 70px;
  color: white;
  background:
    radial-gradient(circle at 50% 10%, rgba(102,86,174,.18), transparent 28%),
    #080a0d;
}

.tanzi-story .tanzi-internet-home > h2 {
  margin: 12px 0 40px;
  font-family: Georgia, serif;
  font-size: clamp(60px, 8vw, 105px);
  line-height: .84;
  font-weight: 400;
  letter-spacing: -.06em;
}

.tanzi-story .tanzi-internet-home > p {
  max-width: 790px;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
}

.tanzi-story .internet-paradox {
  margin: 58px 0;
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: stretch;
}

.tanzi-story .internet-paradox > div:not(.paradox-slash) {
  min-height: 250px;
  padding: 30px;
  background: #13151a;
}

.tanzi-story .internet-paradox span {
  color: #aaa7ff;
  font-size: 9px;
  letter-spacing: .2em;
}

.tanzi-story .internet-paradox strong {
  display: block;
  margin: 30px 0 15px;
  font-family: Georgia, serif;
  font-size: clamp(58px, 7vw, 90px);
  font-weight: 400;
}

.tanzi-story .internet-paradox p {
  color: #aaa;
  font-family: Georgia, serif;
}

.tanzi-story .paradox-slash {
  display: grid;
  place-items: center;
  color: #ff4f88;
  font-size: 40px;
  font-weight: 900;
}

.tanzi-story .internet-home-big {
  margin: 60px 0 30px !important;
  color: #aaa7ff;
  font-size: clamp(32px, 4vw, 50px) !important;
  line-height: 1.05 !important;
}

.tanzi-story .return-quote {
  margin: 65px 0;
  padding: 50px 0;
  border-top: 1px solid #3c3c3c;
  border-bottom: 1px solid #3c3c3c;
  color: #ff5d93;
  font-family: Georgia, serif;
  font-size: clamp(40px, 6vw, 76px);
  line-height: .98;
}

.tanzi-story .return-quote span {
  display: block;
  margin-top: 18px;
  color: #777;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .12em;
}

.tanzi-story .tanzi-psychology {
  background: linear-gradient(125deg, #17151d, #0a0c0f);
}

.tanzi-story .tanzi-equation strong {
  background: #6e67ca;
}

.tanzi-story .tanzi-plea {
  background: #f2eee7;
}

.tanzi-story .tanzi-plea-question {
  background:
    radial-gradient(circle at 75% 30%, rgba(115,102,208,.23), transparent 30%),
    #0b0d0f;
}

.tanzi-story .tanzi-wish {
  background:
    radial-gradient(circle at 25% 20%, rgba(168,165,255,.18), transparent 28%),
    linear-gradient(135deg,#11151c,#07090c);
}

.tanzi-story .tanzi-credits p:first-child {
  color: #aaa7ff;
}

.tanzi-story .tanzi-final-card h3 {
  color: #f1ede6;
}

@media (max-width: 900px) {
  .tanzi-story .hate-home-grid,
  .tanzi-story .money-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tanzi-story .tanzi-hate-home,
  .tanzi-story .tanzi-money,
  .tanzi-story .tanzi-love-loss,
  .tanzi-story .tanzi-internet-home {
    padding: 62px 20px;
  }

  .tanzi-story .love-loss-inner blockquote {
    margin: 45px -20px;
    padding: 42px 20px;
  }

  .tanzi-story .internet-paradox {
    grid-template-columns: 1fr;
  }

  .tanzi-story .paradox-slash {
    min-height: 65px;
  }
}

/* OWN ADS // JALO + CLIPSTAR */
.ad-copy--jalo{background:linear-gradient(160deg,#0c1019,#14213b 65%,rgba(77,124,255,.55));padding:34px 18px 18px}.ad-copy--jalo small{color:#91a9ff}.story-ad-logo{margin:auto 0 12px;line-height:.8}.story-ad-logo--jalo{font-size:clamp(48px,5vw,78px);font-weight:900;letter-spacing:-.08em}.story-ad-logo--jalo span{color:#4d7cff}.ad-copy--jalo h3{font-size:clamp(18px,1.5vw,25px)}.ad-copy--jalo>b{margin:0 0 18px;font-family:Georgia,serif;font-size:18px}.ad-copy--jalo a{border-color:#4d7cff;background:#4d7cff;color:#fff}
.ad-copy--clipstar{background:radial-gradient(circle at 50% 35%,rgba(255,79,145,.2),transparent 25%),linear-gradient(165deg,#101426,#090b13);padding:34px 18px 18px}.ad-copy--clipstar small{color:#ff7bad}.story-ad-logo--clipstar{margin:auto auto 10px;font-size:92px;color:#ff4f91;text-shadow:0 0 35px rgba(255,79,145,.4)}.ad-copy--clipstar h3{font-size:clamp(18px,1.45vw,24px)}.ad-copy--clipstar h3 strong{color:#ff6ca4}.ad-copy--clipstar>b{margin:0 0 18px;font-size:8px;letter-spacing:.12em;color:#aaa}.ad-copy--clipstar a{border-color:#ff4f91;background:#ff4f91;color:#08090d;font-weight:900}
.story-ad-actions{display:grid;gap:7px;margin-top:auto}.story-ad-actions a{margin-top:0}.story-ad-actions a:last-child{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}