:root {
  --cream: #FBF5EC;
  --cream-hi: #FFFBF4;
  --ink: #1B1616;
  --ink-soft: #4A3E38;
  --ink-mid: #5B4C44;
  --muted: #6E5C50;
  --muted-2: #8C7A6B;
  --pink: #E5237D;
  --pink-deep: #B3155F;
  --red: #EE3124;
  --red-dark: #D11D12;
  --amber: #F3901A;
  --teal: #2E9E96;
  --paper: #FFF6EC;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: Archivo, Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1120px;
  --sectionY: clamp(56px, 8vw, 104px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--pink-deep); text-decoration: none; }
a:hover { color: var(--red); }

/* ---------- shared bits ---------- */

.eyebrow {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8C6A55;
}
.eyebrow--onDark { color: #C99A7C; }

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -.01em;
}

.link {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(27, 22, 22, .16);
  background: rgba(251, 245, 236, .7);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.btn__label, .btn__arrow { position: relative; }
.btn__arrow { font-size: 17px; line-height: 1; }

.btn--dark {
  flex: 0 0 auto;
  padding: 11px clamp(15px, 3vw, 22px);
  background: var(--ink);
  color: var(--cream);
  font-size: clamp(12px, 2.6vw, 13px);
}
.btn--dark:hover { background: var(--red); color: #fff; }

.btn--primary {
  padding: 17px clamp(22px, 5vw, 30px);
  background: var(--red);
  color: #FFF9F0;
  font-size: clamp(14px, 3.4vw, 15px);
}
.btn--primary:hover { background: var(--red-dark); color: #FFF9F0; }

.btn--light {
  padding: 18px clamp(22px, 5vw, 32px);
  background: var(--paper);
  color: var(--pink-deep);
  font-weight: 700;
  font-size: clamp(14.5px, 3.4vw, 15.5px);
}
.btn--light:hover { background: var(--ink); color: var(--paper); }

.btn--pulse { animation: ctaPulse 3.4s cubic-bezier(.4, 0, .3, 1) infinite; will-change: transform; }
.btn--pulseLight { animation: ctaPulseLight 3.4s cubic-bezier(.4, 0, .3, 1) infinite; will-change: transform; }

.btn__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
  animation: ctaSheen 3.4s linear infinite;
}
.btn__sheen--dark {
  background: linear-gradient(100deg, rgba(179, 21, 95, 0), rgba(179, 21, 95, .15), rgba(179, 21, 95, 0));
}

@keyframes ctaPulse {
  0%   { transform: scale(1);     box-shadow: 0 14px 34px -14px rgba(238, 49, 36, .7), 0 0 0 0 rgba(238, 49, 36, .5); }
  45%  { transform: scale(1.035); box-shadow: 0 18px 40px -14px rgba(238, 49, 36, .8), 0 0 0 16px rgba(238, 49, 36, 0); }
  100% { transform: scale(1);     box-shadow: 0 14px 34px -14px rgba(238, 49, 36, .7), 0 0 0 0 rgba(238, 49, 36, 0); }
}
@keyframes ctaPulseLight {
  0%   { transform: scale(1);    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 246, 236, .55); }
  45%  { transform: scale(1.03); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .5),  0 0 0 16px rgba(255, 246, 236, 0); }
  100% { transform: scale(1);    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 246, 236, 0); }
}
@keyframes ctaSheen {
  0%   { transform: translateX(-160%) skewX(-12deg); opacity: 0; }
  8%   { opacity: 1; }
  34%  { transform: translateX(320%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(320%) skewX(-12deg); opacity: 0; }
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: rgba(251, 245, 236, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(27, 22, 22, 0);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nav.is-stuck {
  border-bottom-color: rgba(27, 22, 22, .12);
  box-shadow: 0 10px 30px -22px rgba(60, 20, 30, .65);
}
.nav__brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__name {
  font-family: var(--serif);
  font-size: clamp(17px, 4vw, 21px);
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.nav__role {
  font-size: clamp(9px, 2.2vw, 10.5px);
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(60px, 8vw, 110px);
}
.hero__glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__blob { position: absolute; border-radius: 50%; display: block; }
.hero__blob--warm {
  top: -22%; right: -18%;
  width: 78vw; height: 78vw;
  max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle at 42% 38%, rgba(229, 35, 125, .30), rgba(238, 49, 36, .22) 42%, rgba(248, 168, 27, .16) 66%, rgba(251, 245, 236, 0) 76%);
  filter: blur(10px);
}
.hero__blob--cool {
  bottom: -32%; left: -16%;
  width: 66vw; height: 66vw;
  max-width: 820px; max-height: 820px;
  background: radial-gradient(circle at 55% 45%, rgba(46, 158, 150, .22), rgba(243, 144, 26, .16) 48%, rgba(251, 245, 236, 0) 74%);
  filter: blur(14px);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.hero__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.hero__subtitle {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.3;
  color: var(--pink-deep);
}
.hero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.68;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.hero__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }

.hero__cover { position: relative; display: flex; justify-content: center; min-width: 0; }
.hero__coverGlow {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 35, 125, .20), rgba(251, 245, 236, 0) 70%);
  filter: blur(6px);
}
.hero__coverImg {
  position: relative;
  width: min(100%, 400px, 68vh);
  border-radius: 3px 7px 7px 3px;
  box-shadow:
    -2px 0 0 rgba(255, 255, 255, .35) inset,
    28px 34px 70px -26px rgba(60, 20, 30, .55),
    8px 10px 26px -14px rgba(60, 20, 30, .35);
  animation: floatCover 9s ease-in-out infinite;
}
@keyframes floatCover {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* ---------- quote ---------- */

.quote {
  background: var(--ink);
  color: #F6EDE2;
  padding: var(--sectionY) var(--gutter);
}
.quote__inner {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.quote__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(25px, 3.6vw, 45px);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.quote__text::before { content: '\201C'; }
.quote__text::after { content: '\201D'; }
.quote__author { margin: 0; font-size: 13px; letter-spacing: .06em; color: #A08E80; }

/* ---------- chapters ---------- */

.chapters { padding: var(--sectionY) var(--gutter); }
.chapters__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 52px);
}
.chapters__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.chapters__intro {
  margin: 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.chapters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 230px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--cream);
  border: 1px solid rgba(27, 22, 22, .14);
  transition: background .25s ease;
}
.card:hover { background: var(--cream-hi); }
.card__num { font-family: var(--serif); font-size: 30px; line-height: 1; }
.card__num--pink  { color: var(--pink); }
.card__num--red   { color: var(--red); }
.card__num--amber { color: var(--amber); }
.card__num--teal  { color: var(--teal); }
.card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.card__text { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ink-mid); text-wrap: pretty; }

/* ---------- author ---------- */

.author { padding: 0 var(--gutter) var(--sectionY); }
.author__panel {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid rgba(27, 22, 22, .10);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(229, 35, 125, .10), rgba(248, 168, 27, .12) 55%, rgba(46, 158, 150, .12));
}
.author__bio { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.author__text { margin: 0; font-size: 15px; line-height: 1.7; color: #43382F; text-wrap: pretty; }
.author__text--small { font-size: 13.5px; color: var(--muted); }
.author__text--small strong { font-weight: 600; color: #43382F; }
.author__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 12px;
  min-width: 0;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 18px;
  background: rgba(251, 245, 236, .92);
  border: 1px solid rgba(27, 22, 22, .12);
}
.fact__key { font-family: var(--serif); font-size: 31px; line-height: 1; }
.fact__val { font-size: 11.5px; line-height: 1.45; letter-spacing: .02em; color: var(--muted); }

/* ---------- final cta ---------- */

.cta { padding: 0 var(--gutter) clamp(60px, 9vw, 120px); scroll-margin-top: 90px; }
.cta__panel {
  position: relative;
  overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(24px, 5vw, 64px);
  border-radius: 4px;
  background: var(--pink-deep);
  color: var(--paper);
}
.cta__glow {
  position: absolute;
  top: -45%;
  right: -10%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 168, 27, .55), rgba(238, 49, 36, .35) 45%, rgba(179, 21, 95, 0) 72%);
}
.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cta__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cta__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.04;
  text-wrap: balance;
}
.cta__text { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.65; color: #FFF0E4; }
.cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.cta__note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--paper); }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid rgba(27, 22, 22, .12);
  padding: 28px var(--gutter) 40px;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.footer__credit { font-size: 12.5px; color: var(--muted-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { font-size: 12.5px; color: var(--muted); }
.footer__links a:hover { color: var(--red); }

/* ---------- scroll reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  filter: blur(6px);
  will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translate3d(0, 26px, 0); }
.js [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
.js [data-reveal="cover"] { transform: translate3d(0, 34px, 0) scale(.965); }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .8s cubic-bezier(.22, .7, .24, 1) var(--revealDelay, 0ms),
    transform .9s cubic-bezier(.22, .7, .24, 1) var(--revealDelay, 0ms),
    filter .8s ease var(--revealDelay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}