/* DaughterBook */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
}

:root {
  --cream: #EAE2D8;   /* linen */
  --ivory: #F6F1E9;
  --sand: #DFD2BF;
  --espresso: #3A322D;
  --footer-bg: #2E2824;
  --paper: #FBF8F1;
  --ink: #3b3a38;
  --muted: #4f4a42;
  --gold: #B08D3E;
  --gold-deep: #5A4517;    /* gold text: 7:1 or better on ivory, linen and paper */
  --gold-deeper: #4E3C15;  /* gold text on sand and hover states */
  --gold-btn: #66501b;     /* button fill, with paper-colored text at 7:1 */
  --wide: 78rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --header: 5.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Cormorant Garamond", "Libre Caslon Text", Garamond, Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 40rem) {
  body {
    font-size: 1.4rem;
  }
}

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

p {
  margin: 0 0 1.15em;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
}

a {
  color: var(--gold-deep);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--gold-deeper);
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Every section: 56px top and bottom on mobile, 88px on desktop */
section {
  padding-block: 3.5rem;
}

@media (min-width: 60rem) {
  section {
    padding-block: 5.5rem;
  }
}

/* ---------- Header and nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid rgba(176, 141, 62, 0.28);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header);
}

/* Logo */
.logo {
  display: block;
  line-height: 0;
}

.logo img {
  width: auto;
  height: 3.8rem;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  border-bottom-color: var(--gold);
  color: var(--gold-deeper);
}

.site-nav .nav-cta {
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--gold-deep);
  color: var(--gold-deep);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta[aria-current="true"] {
  border-color: var(--gold-btn);
  background: var(--gold-btn);
  color: var(--paper);
}

.header-link {
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

.menu-toggle {
  display: none;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 59.99rem) {
  .js .menu-toggle {
    display: block;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem var(--gutter) 1.5rem;
    background: var(--ivory);
    border-bottom: 1px solid rgba(176, 141, 62, 0.28);
  }

  .js .site-nav.open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .site-nav a {
    padding: 0.5rem 0;
    font-size: 1.3rem;
  }

  .site-nav .nav-cta {
    margin-top: 0.6rem;
  }

  /* Without JS the links simply wrap under the logo */
  .header-inner {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }
}

/* ---------- Shared pieces ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  color: var(--gold-deep);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* the diamond from the logo */
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  margin-left: 0.2rem;
  background: var(--gold);
  transform: rotate(45deg);
}

.button {
  display: inline-block;
  padding: 1rem 2.4rem;
  border: 0;
  border-radius: 0;
  background: var(--gold-btn);
  color: var(--paper);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.button:hover {
  background: var(--gold-deeper);
  color: var(--paper);
}

/* ---------- 1. Hero ---------- */

/* Full-width color bands, one per section */
.hero {
  overflow-x: clip; /* the larger book stage can run past the edge on mid-size screens */
  background: var(--ivory);
}

.why {
  background: var(--cream);
}

.how {
  background: var(--sand);
}

.how .eyebrow {
  color: var(--gold-deeper);
}

.closing-band {
  background: var(--espresso);
  color: #EFE6D8;
}

.start {
  background: var(--ivory);
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.hero .lede {
  max-width: 33rem;
  margin: 1.75rem 0 2.5rem;
  font-size: 1.45rem;
  text-wrap: pretty;
}

/* The two books: clean cutouts with soft shadows */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.2 / 1;
}

.bk {
  position: absolute;
  top: 8%;
  width: 44%;
  height: auto;
  border-radius: 2px;
  filter:
    drop-shadow(0 2px 2px rgba(60, 45, 20, 0.22))
    drop-shadow(0 18px 22px rgba(60, 45, 20, 0.26));
}

.bk.t {
  left: 4%;
}

.bk.r {
  right: 4%;
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: 0.9fr 1.35fr;
    gap: 1rem;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 3.9vw, 3.3rem);
  }

  .stage {
    width: 118%;
    margin-left: -2%;
    aspect-ratio: 1.3 / 1;
  }

  .bk {
    top: 6%;
    width: 42%;
  }

  .bk.t {
    left: 6%;
  }

  .bk.r {
    right: 6%;
  }
}

/* ---------- 2. Why it matters ---------- */

/* The open book */
.book {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.8rem 0.9rem 1rem;
  border-radius: 4px;
}

.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  container-type: inline-size;
  background: var(--paper);
  /* soft shadow on the dark band, in place of a light border */
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.32),
    0 30px 60px -12px rgba(0, 0, 0, 0.55);
}

.leaf {
  position: relative;
  aspect-ratio: 5 / 7;
  display: flex;
  flex-direction: column;
  padding: 11cqw 8.5cqw 8cqw;
  color: #34322f;
  background-color: var(--paper);
}

.leaf-left {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 8cqw;
  box-shadow:
    -1px 1px 0 #e9e1d0,
    -2px 2px 0 #f7f2e7,
    -3px 3px 0 #ddd3bf,
    -4px 4px 0 #f3ede0,
    -5px 5px 0 #d8cdb8;
  /* paper grain, then shading that darkens into the gutter */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .28  0 0 0 0 .14  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(to right,
      rgba(90, 65, 25, 0.06) 0%,
      rgba(255, 255, 255, 0) 16%,
      rgba(255, 255, 255, 0) 80%,
      rgba(90, 65, 25, 0.11) 91%,
      rgba(50, 32, 10, 0.34) 100%);
}

.leaf-right {
  box-shadow:
    1px 1px 0 #e9e1d0,
    2px 2px 0 #f7f2e7,
    3px 3px 0 #ddd3bf,
    4px 4px 0 #f3ede0,
    5px 5px 0 #d8cdb8;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .28  0 0 0 0 .14  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(to left,
      rgba(90, 65, 25, 0.06) 0%,
      rgba(255, 255, 255, 0) 16%,
      rgba(255, 255, 255, 0) 80%,
      rgba(90, 65, 25, 0.11) 91%,
      rgba(50, 32, 10, 0.34) 100%);
}

/* Crease and soft light across the spread */
.spread::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 5px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(30, 18, 5, 0.3), transparent);
  pointer-events: none;
}

.spread::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%, rgba(60, 40, 10, 0.05) 100%);
  pointer-events: none;
}

.leaf p {
  margin: 0;
}

.leaf-title {
  max-width: 14ch;
  font-size: 4.1cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.leaf-orn {
  display: block;
  width: 1.1cqw;
  height: 1.1cqw;
  margin: 3.2cqw auto;
  background: var(--gold);
  transform: rotate(45deg);
}

.leaf-right p {
  font-size: 2.45cqw;
  line-height: 1.72;
  font-weight: 500;
  text-align: left;
  hyphens: manual;
}

.leaf-right p + p {
  text-indent: 1.7em;
}

@media (max-width: 47.99rem) {
  .book {
    padding: 0.5rem 0.55rem 0.7rem;
  }

  .spread {
    display: block;
  }

  .spread::before {
    display: none;
  }

  .leaf {
    aspect-ratio: auto;
    padding: 2.6rem 1.75rem 0;
  }

  .leaf-left,
  .leaf-right {
    box-shadow: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .28  0 0 0 0 .14  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .leaf-right {
    padding-bottom: 2.75rem;
    padding-top: 1.75rem;
  }

  .leaf-title {
    font-size: 1.9rem;
  }

  .leaf-orn {
    width: 7px;
    height: 7px;
    margin: 1.4rem auto 0;
  }

  .leaf-right p {
    font-size: 1.3rem;
  }
}

.closing {
  position: relative;
  margin: 0;
  padding-top: clamp(2rem, 5vw, 3rem);
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

.closing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 1px;
  background: var(--gold);
}

/* ---------- 3. How it works ---------- */

/* Three full-width rows. Each row: lettering and heading on the left,
   body copy and bold closing line on the right. */
.step {
  display: grid;
  gap: 1.75rem;
  padding-block: 3rem;
}

/* thin gold rule between rows, none after the last */
.step + .step {
  border-top: 1px solid #C9B48A;
}

.step:first-child {
  padding-top: 0;
}

.step:last-child {
  padding-bottom: 0;
}

.step-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* Didot italic numerals 01, 02, 03: one scale for all three, so they match.
   The files are 3x the size shown, for sharp screens. */
.step-word {
  display: block;
  max-width: 100%;
  height: auto;
}

.step-word-first {
  width: 70px;
}

.step-word-second {
  width: 73px;
}

.step-word-third {
  width: 73px;
}

.step h3 {
  font-size: clamp(1.9rem, 5.5vw, 2.25rem);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.step-body {
  max-width: 40rem;
}

.step-body p:last-child {
  margin-bottom: 0;
}

.emphasis {
  --emph: clamp(2.1rem, 4.4vw, 3.4rem);
  margin: 1.4rem 0 0 !important;
  font-size: var(--emph);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

/* The closing quote in step 3: a touch larger than the other two */
.emphasis-quote {
  font-size: calc(var(--emph) * 1.18);
}

/* Wide screens: left third for lettering and heading, right two thirds for the copy */
@media (min-width: 60rem) {
  .step {
    grid-template-columns: minmax(19rem, 1fr) 2fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
    padding-block: 4rem;
  }

  .step:first-child {
    padding-top: 0;
  }

  .step:last-child {
    padding-bottom: 0;
  }

  .step-word-first {
    width: 88px;
  }

  .step-word-second {
    width: 92px;
  }

  .step-word-third {
    width: 91px;
  }

  .step h3 {
    font-size: 2.25rem;
  }

  .emphasis {
    --emph: 2.4375rem;
  }
}

/* Closing moment after the steps */

.how-close {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

.book-slot {
  margin: 0;
}

/* If the placeholder is swapped for a real photo */
.book-slot > img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.close-copy {
  max-width: 30rem;
}

.close-copy .closing {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  color: #F6EEE2;
}

@media (min-width: 60rem) {
  .how-close {
    grid-template-columns: 7fr 4fr;
    gap: 4.5rem;
  }
}

/* ---------- Why it matters: lead, photo band, two columns ---------- */

.why .lead {
  max-width: 54rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

.story-band {
  position: relative;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.story-band img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  /* same soft shadow as the two books in the hero */
  filter:
    drop-shadow(0 2px 2px rgba(60, 45, 20, 0.22))
    drop-shadow(0 18px 22px rgba(60, 45, 20, 0.26));
}

/* A gentle lift of light on the left, where the foliage makes the photo darker */
.story-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 24% 42% at 28% 62%, rgba(255, 244, 228, 0.6), rgba(255, 244, 228, 0) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.story-cols {
  display: grid;
  gap: 0;
}

.story-col p:last-child {
  margin-bottom: 0;
}

.story-col p {
  text-wrap: pretty; /* avoids a lone word on the last line */
}

.story-cols .story-col .wins {
  margin: 1.6rem 0;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

@media (min-width: 60rem) {
  /* Two nearly equal columns. Tops line up at the first line, and the last item
     in each column ("Being their dad wins." and the signature) sits on the same
     bottom edge. */
  .story-cols {
    grid-template-columns: 1.04fr 0.96fr;
    gap: 0 5rem;
    align-items: stretch;
  }

  .story-col {
    display: flex;
    flex-direction: column;
  }

  .story-col p {
    margin-bottom: 1.15em;
  }

  .story-cols .story-col .wins {
    margin: auto 0 0;
  }

  .story-col:first-child p:nth-last-child(2) {
    margin-bottom: 1.6rem;
  }

  .story-col:last-child p:nth-last-child(2) {
    margin-bottom: 1.75rem;
  }

  .story-col .sig-row {
    margin-top: auto;
  }
}

/* Signature at the end of Why It Matters, with a small headshot beside it */
.sig-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.75rem;
}

.signature {
  display: block;
  width: 220px;
  height: auto;
  margin: 0 0 0.5rem;
}

.headshot {
  flex: none;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 2px 3px rgba(60, 45, 20, 0.22),
    0 8px 14px -4px rgba(60, 45, 20, 0.3);
}

.story-col .signature-line {
  margin: 0;
  color: var(--gold-deep);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 60rem) {
  .sig-row {
    gap: 1.25rem;
  }

  .signature {
    width: 280px;
  }

  .headshot {
    width: 80px;
    height: 80px;
  }
}

/* ---------- 5. Start the conversation ---------- */

.start-grid {
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: start;
}

.start h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  text-wrap: balance;
}

.start-copy {
  max-width: 36rem;
}

.start-copy p:last-child {
  margin-bottom: 0;
}

@media (min-width: 60rem) {
  .start-grid {
    grid-template-columns: 5fr 6fr;
    gap: 5.5rem;
  }
}

.form-wrap {
  scroll-margin-top: 6rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--paper);
  border-radius: 2px;
  /* same soft shadow as the books */
  box-shadow:
    0 2px 2px rgba(60, 45, 20, 0.14),
    0 18px 28px -10px rgba(60, 45, 20, 0.28);
}

.form-kicker {
  margin: 0 0 1.4rem;
}

.big-label {
  display: block;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

.helper {
  margin: 0.6rem 0 1.25rem;
  color: var(--muted);
  font-style: italic;
  font-size: 1.2rem;
}

textarea {
  display: block;
  width: 100%;
  min-height: 16rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid #C9B48A;
  border-radius: 0;
  background: #FFFDF9;
  color: var(--ink);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.65;
  resize: vertical;
}

@media (min-width: 40rem) {
  textarea {
    min-height: 19rem;
  }
}

textarea:focus {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.small-fields {
  display: grid;
  gap: 1.1rem 2rem;
  margin-top: 2.25rem;
}

.small-fields label {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.small-fields input {
  display: block;
  width: 100%;
  margin-top: 0.1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #C9B48A;
  border-radius: 0;
  background: #FFFDF9;
  color: var(--ink);
  font: inherit;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
}

.small-fields input:focus {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

@media (min-width: 40rem) {
  .small-fields {
    grid-template-columns: 1fr 1fr;
  }
}

.submit-row {
  margin-top: 2.5rem;
}

.fineprint {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.mom {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.15rem;
}

/* Honeypot: off-screen, never shown */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Thank-you */
.thanks[hidden] {
  display: none;
}

.thanks {
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
  outline: 0;
}

.thanks h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.thanks .sign {
  margin: 1.75rem 0 0;
  font-style: italic;
  font-size: 1.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 2.75rem var(--gutter) 3.25rem;
  background: var(--footer-bg);
  text-align: center;
  color: #E9E0D3;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: #E9E0D3;
}

.site-footer a:hover {
  color: #F6EEE2;
}

.site-footer .sep {
  padding-inline: 0.7em;
  color: #E9E0D3;
}

/* ---------- Privacy page ---------- */

.privacy {
  background: var(--ivory);
}

.privacy-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

.privacy h1 {
  margin-bottom: 1.75rem;
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
}

.privacy-intro p {
  max-width: 30rem;
}

.privacy h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: var(--gold-deep);
}

.privacy-section {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(176, 141, 62, 0.45);
}

.privacy-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.privacy-section p:last-child {
  margin-bottom: 0;
}

.privacy .updated {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.1rem;
}

@media (min-width: 60rem) {
  .privacy-grid {
    grid-template-columns: 4fr 7fr;
    gap: 6rem;
  }

  .privacy-intro {
    position: sticky;
    top: calc(var(--header) + 3rem);
  }

  .privacy-sections {
    max-width: 42rem;
  }
}