@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #1d1712;
  --coffee: #3a2418;
  --rust: #9c4b24;
  --terracotta: #b86034;
  --ochre: #c8892c;
  --olive: #667047;
  --paper: #efe2c2;
  --bone: #f6edd7;
  --blue: #5d9aa3;
  --shadow: rgba(29, 23, 18, 0.28);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(200, 137, 44, 0.22), transparent 32rem),
    radial-gradient(circle at 90% 30%, rgba(93, 154, 163, 0.18), transparent 34rem),
    linear-gradient(135deg, #f2e5c8 0%, #e1c796 48%, #c17a37 100%);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(47, 26, 13, 0.42);
  z-index: 2;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(0deg, transparent 0 94%, rgba(29, 23, 18, 0.18) 95%),
    linear-gradient(90deg, transparent 0 96%, rgba(29, 23, 18, 0.12) 97%);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: multiply;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  z-index: 9;
  background: linear-gradient(90deg, var(--coffee), var(--rust), var(--blue));
}

a { color: inherit; }
img { display: block; max-width: 100%; }

.nav {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 4;
}

.brand,
.nav-link {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 800;
}

.nav-link {
  padding: 10px 14px;
  border: 1px solid rgba(58, 36, 24, 0.22);
  background: rgba(246, 237, 215, 0.46);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}

.hero {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

.hero-grid,
.page-section {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(26px, 6vw, 78px);
  align-items: center;
  padding: 24px 0 80px;
}

.kicker,
.section-number,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--coffee);
}

.hero h1,
.poem h2,
.wide-text h2,
.return-copy h2,
.final-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 16px 0;
}

.hero h1 {
  font-size: clamp(4.1rem, 10vw, 9.2rem);
  max-width: 780px;
}

.lede {
  max-width: 560px;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.55;
  color: rgba(29, 23, 18, 0.78);
}

.image-card {
  margin: 0;
  background: rgba(239, 226, 194, 0.68);
  padding: clamp(10px, 1.4vw, 18px);
  box-shadow: 0 28px 80px var(--shadow);
  transform: rotate(-1deg);
  border: 1px solid rgba(58, 36, 24, 0.18);
}

.image-card:nth-child(even) { transform: rotate(1.25deg); }
.image-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: sepia(0.16) contrast(1.05) saturate(0.9);
}

.image-card.oversized img { aspect-ratio: 4 / 5; }
.image-card.cinematic img { aspect-ratio: 16 / 12; }
.image-card.tall img { aspect-ratio: 3 / 4.6; }
.image-card.return-image img { aspect-ratio: 4 / 5.2; }

figcaption {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.06rem;
  padding: 12px 4px 2px;
  color: rgba(29, 23, 18, 0.76);
}

.page-section {
  padding: clamp(54px, 10vw, 120px) 0;
}

.intro {
  display: grid;
  grid-template-columns: 70px 0.95fr 1.2fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
}

.poem h2 {
  font-size: clamp(2.8rem, 6vw, 6rem);
}

.poem p,
.text-panel p,
.wide-text p,
.return-copy p,
.final-text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1.12;
  margin: 0 0 24px;
}

.mood-strip {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 0.86fr;
  gap: 12px;
  align-items: end;
}

.mood-strip img {
  width: 100%;
  height: clamp(220px, 34vw, 480px);
  object-fit: cover;
  border: 10px solid rgba(246, 237, 215, 0.72);
  box-shadow: 0 18px 52px var(--shadow);
}

.mood-strip img:nth-child(2) { height: clamp(270px, 42vw, 600px); }

.memory-grid,
.truth-section {
  display: grid;
  grid-template-columns: 0.85fr 1.1fr 0.75fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

.text-panel {
  background: rgba(246, 237, 215, 0.58);
  border: 1px solid rgba(58, 36, 24, 0.18);
  padding: clamp(24px, 4vw, 54px);
  box-shadow: 0 18px 58px rgba(58, 36, 24, 0.16);
}

.quiet {
  min-height: 96vh;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
}

.quote-card {
  padding: clamp(32px, 5vw, 68px);
  border-top: 1px solid rgba(58, 36, 24, 0.4);
  border-bottom: 1px solid rgba(58, 36, 24, 0.4);
}

.quote-card p,
.quote-card strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 6vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin: 0;
}

.quote-card strong {
  display: block;
  margin-top: 18px;
  font-weight: 700;
}

.collage {
  min-height: 680px;
  position: relative;
}

.collage img {
  position: absolute;
  object-fit: cover;
  border: 12px solid rgba(246, 237, 215, 0.72);
  box-shadow: 0 26px 70px var(--shadow);
}

.collage .c1 { width: 48%; left: 0; top: 8%; transform: rotate(-3deg); }
.collage .c2 { width: 58%; right: 0; top: 28%; transform: rotate(2deg); }
.collage .c3 { width: 42%; left: 16%; bottom: 0; transform: rotate(4deg); }

.stay {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: clamp(24px, 6vw, 80px);
}

.wide-text h2 {
  font-size: clamp(3.2rem, 7vw, 7.4rem);
}

.four-notes {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.four-notes span {
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(58, 36, 24, 0.22);
  background: rgba(58, 36, 24, 0.08);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1;
  display: flex;
  align-items: flex-end;
}

.sea-spread {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

.return-section {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 0.72fr;
  gap: clamp(22px, 5vw, 72px);
  align-items: start;
}

.return-copy {
  max-width: 820px;
  padding: clamp(22px, 4vw, 56px);
  background: rgba(246, 237, 215, 0.52);
  border-left: 4px solid var(--rust);
  box-shadow: 0 18px 58px rgba(58, 36, 24, 0.14);
}

.return-copy h2 {
  font-size: clamp(3.1rem, 6vw, 6.8rem);
  margin-bottom: clamp(28px, 4vw, 54px);
}

.return-copy p {
  max-width: 720px;
}

.truth-section .large p,
.text-panel.large p {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.lived {
  display: grid;
  grid-template-columns: 70px 1fr 0.88fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

.finale {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(28px, 5vw, 78px);
  align-items: center;
}

.finale-images {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 12px;
  align-items: end;
}

.finale-images img {
  width: 100%;
  object-fit: cover;
  border: 12px solid rgba(246, 237, 215, 0.78);
  box-shadow: 0 22px 64px var(--shadow);
}

.finale-images img:first-child { grid-row: span 2; aspect-ratio: 3 / 4.2; }
.finale-images img:nth-child(2) { aspect-ratio: 4 / 5; }
.finale-images img:nth-child(3) { aspect-ratio: 4 / 3.6; }

.final-text {
  padding: clamp(22px, 4vw, 56px) 0;
}

.final-text h2 {
  font-size: clamp(3.2rem, 7vw, 7rem);
}

.last-line {
  border-left: 3px solid var(--rust);
  padding-left: 22px;
}

.footer {
  position: relative;
  z-index: 3;
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 60px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(58, 36, 24, 0.24);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.footer a { text-decoration: none; font-weight: 800; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms ease, transform 800ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .hero-grid,
  .intro,
  .memory-grid,
  .quiet,
  .stay,
  .sea-spread,
  .return-section,
  .truth-section,
  .lived,
  .finale {
    grid-template-columns: 1fr;
  }

  .section-number { margin-bottom: -14px; }
  .four-notes { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .collage { min-height: 560px; }
  .return-copy { padding: 28px; }
  .finale-images { grid-template-columns: 1fr; }
  .finale-images img:first-child { grid-row: auto; }
  .footer { flex-direction: column; }
}

@media (max-width: 560px) {
  .nav { width: min(100% - 22px, var(--max)); }
  .hero-grid,
  .page-section,
  .footer { width: min(100% - 22px, var(--max)); }
  .brand,
  .nav-link { font-size: 0.62rem; letter-spacing: 0.14em; }
  .hero h1 { font-size: clamp(3.35rem, 17vw, 5.6rem); }
  .poem h2,
  .wide-text h2,
  .return-copy h2,
  .final-text h2 { font-size: clamp(2.8rem, 15vw, 4.8rem); }
  .mood-strip { grid-template-columns: 1fr; }
  .mood-strip img,
  .mood-strip img:nth-child(2) { height: auto; aspect-ratio: 3 / 4; }
  .four-notes { grid-template-columns: 1fr; }
  .collage { min-height: auto; display: grid; gap: 12px; }
  .collage img { position: static; width: 100% !important; transform: none !important; aspect-ratio: 3 / 4; }
  .text-panel,
  .return-copy { padding: 24px; }
}

/* Language switch */
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(58, 36, 24, 0.22);
  background: rgba(246, 237, 215, 0.46);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  overflow: hidden;
}
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--coffee);
  cursor: pointer;
  text-transform: uppercase;
}
.lang-btn.active {
  background: var(--coffee);
  color: var(--bone);
}
@media (max-width: 560px) {
  .lang-btn { padding: 7px 10px; font-size: 0.62rem; letter-spacing: 0.14em; }
}