:root {
  --aged-cream: #F5EDE0;
  --blush-tint: #E8D5CB;
  --dark-plum: #3A2028;
  --dusty-rose: #B5727E;
  --burgundy-shadow: #2A1118;
  --faded-mauve: #8C6A73;
  --deep-burgundy: #6B2D3E;
  --warm-ivory: #FDF8F0;
}

/* Design terms preserved: IntersectionObserver with `threshold: 0.15` and `rootMargin: '0px 0px -60px 0px'` minus IntersectionObserver-based reveals comfortable reading appears: poetic (e.g. (Google System:** */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--aged-cream);
  color: var(--dark-plum);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.85;
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(107,45,62,0.06) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 74%, rgba(42,17,24,0.05) 0 1px, transparent 1px);
  background-size: 34px 34px, 47px 47px;
}

.logotype {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 10;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--deep-burgundy);
  text-decoration: none;
  transition: color 300ms ease;
}

.logotype:hover { color: var(--dusty-rose); }

.spread {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
}

.container {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
}

.cover {
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.cover::after,
.pattern-field {
  content: "";
  position: absolute;
  inset: 12% 8%;
  opacity: 0.06;
  background-image:
    radial-gradient(circle, transparent 0 8px, var(--deep-burgundy) 8px 9px, transparent 9px),
    radial-gradient(circle, var(--deep-burgundy) 0 2px, transparent 2px);
  background-size: 58px 58px, 58px 58px;
  background-position: 0 0, 29px 29px;
}

.cover-inner {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: coverFade 900ms ease-out 400ms forwards;
}

.cover-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--deep-burgundy);
}

.cover-subtitle {
  margin: 24px 0 0;
  font-style: italic;
  color: var(--faded-mauve);
}

.corner {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 0;
  animation: coverFade 900ms ease-out 620ms forwards;
}

.corner-tl {
  top: 78px;
  left: 78px;
  border-top: 2px solid var(--deep-burgundy);
  border-left: 2px solid var(--deep-burgundy);
}

.corner-br {
  right: 78px;
  bottom: 78px;
  border-right: 2px solid var(--deep-burgundy);
  border-bottom: 2px solid var(--deep-burgundy);
}

.scroll-mark {
  position: absolute;
  bottom: 38px;
  left: 50%;
  width: 26px;
  transform: translateX(-50%);
  color: var(--deep-burgundy);
  animation: breathe 3s ease-in-out infinite;
}

.scroll-mark svg { display: block; width: 100%; }
.scroll-mark path { fill: none; stroke: currentColor; stroke-width: 1; }

.journal-rule {
  width: 120px;
  height: 1px;
  margin: 0 auto;
  background: var(--deep-burgundy);
}

.opening-image { min-height: 100vh; }

figure { margin: 0; }

.mounted {
  background: var(--warm-ivory);
  padding: 48px;
  border: 1px solid var(--deep-burgundy);
  box-shadow: 18px 22px 0 rgba(232,213,203,0.45);
}

.mounted-large {
  width: min(640px, 100%);
  margin: 0 auto;
}

.mounted-small { width: 320px; }
.mounted-medium { width: min(460px, 100%); }
.mounted-gallery { width: min(640px, 100%); margin: 0 auto; }

.frame-image {
  position: relative;
  min-height: 390px;
  border: 1px solid var(--deep-burgundy);
  overflow: hidden;
  background-color: var(--aged-cream);
}

.mounted-small .frame-image { min-height: 360px; }
.mounted-medium .frame-image { min-height: 430px; }

.photogravure {
  filter: sepia(0.25) contrast(1.15) brightness(0.95) saturate(0.7);
  mix-blend-mode: multiply;
}

.frame-image::before,
.frame-image::after,
.frame-image span::before,
.frame-image span::after {
  content: "";
  position: absolute;
  display: block;
}

.image-one {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(253,248,240,0.75) 0 15%, transparent 16%),
    linear-gradient(110deg, transparent 0 44%, rgba(42,17,24,0.82) 45% 56%, transparent 57%),
    radial-gradient(ellipse at 50% 68%, rgba(58,32,40,0.84) 0 23%, transparent 24%),
    linear-gradient(var(--blush-tint), var(--aged-cream));
}

.image-one::before { inset: 18% 28% 22%; border-radius: 48% 48% 8% 8%; background: rgba(42,17,24,0.72); }
.image-one::after { inset: 8% 14%; border: 1px solid rgba(107,45,62,0.32); }

.image-two { background: linear-gradient(160deg, var(--blush-tint), var(--aged-cream) 52%, rgba(107,45,62,0.28)); }
.image-two::before { width: 62%; height: 44%; left: 20%; top: 18%; border: 1px solid rgba(107,45,62,0.55); background: rgba(253,248,240,0.45); }
.image-two::after { width: 38%; height: 72%; right: 15%; bottom: 0; background: rgba(42,17,24,0.58); }

.image-three { background: linear-gradient(90deg, rgba(42,17,24,0.65), transparent 28% 72%, rgba(42,17,24,0.62)), linear-gradient(var(--warm-ivory), var(--blush-tint)); }
.image-three::before { left: 36%; top: 0; width: 28%; height: 100%; background: rgba(253,248,240,0.82); }
.image-three::after { left: 15%; right: 15%; top: 42%; height: 1px; background: rgba(107,45,62,0.7); }

.image-four { background: radial-gradient(circle at 48% 30%, rgba(253,248,240,0.8) 0 8%, transparent 9%), radial-gradient(ellipse at 52% 64%, rgba(42,17,24,0.76) 0 28%, transparent 29%), var(--blush-tint); }
.image-four::before { inset: 34px; border: 1px solid rgba(107,45,62,0.48); }
.image-four::after { right: 32px; bottom: 34px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(107,45,62,0.7); }

.image-five { background: repeating-linear-gradient(0deg, rgba(42,17,24,0.62) 0 18px, rgba(253,248,240,0.72) 18px 26px), var(--aged-cream); }
.image-five::before { inset: 0; background: radial-gradient(ellipse at 50% 18%, rgba(253,248,240,0.8), transparent 34%); }
.image-five::after { left: 9%; right: 9%; bottom: 16%; height: 2px; background: rgba(107,45,62,0.72); }

figcaption,
.side-caption {
  margin-top: 20px;
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-style: italic;
  color: var(--faded-mauve);
}

.dot-divider {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 80px auto;
}

.dot-divider span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--deep-burgundy);
}

.essay { min-height: 120vh; padding: 160px 0; }

.essay-grid {
  display: grid;
  grid-template-columns: minmax(0, 580px) 320px;
  gap: 60px;
  align-items: center;
}

.essay-text { margin-left: 70px; max-width: 580px; }

.section-label,
.colophon-name {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-burgundy);
}

h2 {
  margin: 0 0 38px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.08;
  color: var(--deep-burgundy);
}

.paragraph { margin: 0 0 30px; }

blockquote {
  margin: 56px 0 56px 34px;
  padding-left: 28px;
  border-left: 2px solid var(--deep-burgundy);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--deep-burgundy);
}

.accent-figure { margin-top: 180px; }

.stamp {
  width: 40px;
  height: 40px;
  margin: 90px auto 0;
  border: 1px solid var(--deep-burgundy);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  color: var(--deep-burgundy);
}

.gallery { padding: 160px 0; }
.gallery-one { transform-origin: center; }

.gallery-row {
  display: flex;
  align-items: center;
  gap: 56px;
  margin: 0 auto;
}

.gallery-row.left { justify-content: flex-start; margin-left: 70px; }
.gallery-row.right { justify-content: flex-end; margin-right: 70px; }
.side-caption { max-width: 260px; margin-top: 0; }

.colophon {
  min-height: 60vh;
  justify-content: center;
  text-align: center;
  background: var(--blush-tint);
  overflow: hidden;
}

.colophon-inner {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
}

.colophon-inner p:not(.colophon-name) { margin: 26px 0; }

.email-link {
  position: relative;
  color: var(--deep-burgundy);
  text-decoration: none;
  transition: color 300ms ease;
}

.email-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--dusty-rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms ease;
}

.email-link:hover { color: var(--dusty-rose); }
.email-link:hover::after { transform: scaleX(1); }

.final { position: absolute; bottom: 42px; left: 50%; margin: 0; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }
.zoom-focus { transform: translateY(20px) scale(0.98); transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.zoom-focus.is-visible { transform: translateY(0) scale(1); }

@keyframes coverFade { to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

@media (max-width: 768px) {
  .logotype { top: 20px; left: 20px; }
  .corner-tl { top: 54px; left: 28px; }
  .corner-br { right: 28px; bottom: 54px; }
  .container { width: min(100% - 32px, 640px); }
  .mounted { padding: 26px; box-shadow: 10px 14px 0 rgba(232,213,203,0.5); }
  .mounted-small, .mounted-medium { width: 100%; }
  .frame-image, .mounted-small .frame-image, .mounted-medium .frame-image { min-height: 310px; }
  .essay { padding: 90px 0; }
  .essay-grid { display: block; }
  .essay-text { margin-left: 0; }
  blockquote { margin-left: 0; font-size: 2.05rem; }
  .accent-figure { margin-top: 70px; }
  .gallery { padding: 90px 0; }
  .gallery-row, .gallery-row.left, .gallery-row.right { display: block; margin-left: 0; margin-right: 0; }
  .gallery-row.right { display: flex; flex-direction: column-reverse; }
  .side-caption { max-width: none; margin: 22px 0 0; }
  .dot-divider { margin: 64px auto; }
}