@font-face {
  font-family: "Cormorant Infant";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-infant-light-italic.woff") format("woff");
}

:root {
  --black: #151312;
  --black-soft: #211d1b;
  --champagne: #f4eee7;
  --powder: #ead6d4;
  --ink: #332b27;
  --gold: #c0954e;
  --line-dark: rgba(244, 238, 231, .2);
  --line-light: rgba(51, 43, 39, .18);
  --transition-inset: clamp(44px, 7vw, 118px);
  --transition-axis: calc(100% - max(18.75%, 170px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--champagne); color: var(--ink); font-family: "Manrope", Arial, sans-serif; font-size: 16px; font-weight: 300; }
a { color: inherit; }

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 30px clamp(24px, 5vw, 78px);
  color: #f5eee7;
}
.wordmark { font: 300 1.3rem "Cormorant Infant", Georgia, serif; font-style: italic; letter-spacing: .08em; text-decoration: none; }
nav { display: flex; gap: clamp(18px, 3vw, 46px); }
nav a, .scroll-link { font-size: .69rem; letter-spacing: .17em; text-decoration: none; text-transform: uppercase; }
nav a { opacity: .74; transition: opacity .2s ease; }
nav a:hover, nav a:focus-visible { opacity: 1; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  overflow: hidden;
  background: radial-gradient(ellipse at 22% 42%, #2a2421 0%, var(--black) 48%, #0e0d0c 100%);
  color: var(--champagne);
}
.hero::after {
  content: "";
  position: absolute;
  top: -4%;
  right: -4%;
  width: min(54vw, 820px);
  aspect-ratio: 1;
  background: url("chantilly-corner.png") top right / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(90%) sepia(12%) saturate(430%) hue-rotate(306deg) brightness(101%) contrast(91%);
  opacity: .72;
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 150px var(--transition-inset) 100px; }
.eyebrow { margin: 0 0 26px; color: var(--gold); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "Cormorant Infant", Georgia, serif; font-style: italic; font-weight: 300; font-synthesis: none; letter-spacing: -.015em; }
h1 { max-width: 850px; font-size: clamp(4rem, 7.4vw, 8rem); line-height: .88; }
h1 em, h2 em { color: var(--gold); font: inherit; }
.lead { max-width: 590px; margin: 44px 0 38px; color: rgba(244, 238, 231, .72); font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.8; }
.scroll-link { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; font-size: .875rem; padding-bottom: 9px; border-bottom: 1px solid rgba(192, 149, 78, .7); }
.scroll-link > span { position: absolute; left: calc(100% + 18px); top: calc(50% - 5px); transform: translateY(-50%); }
.manifesto > .section-next, .capsule > .section-next, .contacts > .section-next { position: absolute; z-index: 2; left: var(--transition-axis); transform: translateX(-50%); bottom: 48px; }
.hero-signature { position: relative; z-index: 3; align-self: center; justify-self: stretch; display: grid; justify-items: center; align-content: center; padding-inline: var(--transition-inset); margin-top: 26px; }
.hero-next { justify-self: center; max-width: 100%; margin-top: 36px; text-align: center; }
.logo-wrap { position: relative; width: clamp(112px, 11vw, 164px); aspect-ratio: 1290 / 1140; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.logo-crop { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.logo-crop img { display: block; width: 100%; height: auto; transform: translateY(-10.94%); }
.logo-wrap sup { position: absolute; right: -18px; top: 0; color: var(--gold); font: 500 1rem "Manrope", sans-serif; }
.hero-signature > p { margin: 22px 0 0; color: rgba(244, 238, 231, .7); font: italic 300 1.15rem "Cormorant Infant", Georgia, serif; letter-spacing: .08em; }
.hero-number { position: absolute; z-index: 3; right: clamp(24px, 4vw, 65px); bottom: 24px; margin: 0; color: rgba(244, 238, 231, .3); font-size: .68rem; letter-spacing: .2em; }

.section-label { margin: 7px 0 0; color: #89766d; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
.manifesto {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: end;
  padding: clamp(110px, 14vw, 210px) clamp(28px, 8vw, 140px);
  background: linear-gradient(118deg, #f7f2ec 0%, var(--champagne) 45%, #e9ded3 100%);
  overflow: hidden;
}
.manifesto::after { content: ""; position: absolute; top: 0; right: 0; width: min(42vw, 540px); aspect-ratio: 1; background: url("chantilly-corner.png") top right / contain no-repeat; opacity: .38; pointer-events: none; }
.manifesto > * { position: relative; z-index: 1; }
.manifesto h2, .capsule h2, .contacts h2, .closing h2 { font-size: clamp(3.2rem, 5.8vw, 6.4rem); line-height: .94; }
.manifesto-copy { margin: 0; padding-top: 30px; border-top: 1px solid var(--line-light); color: #65574f; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.85; }

.capsule {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(55px, 9vw, 150px);
  padding: clamp(110px, 13vw, 190px) clamp(28px, 8vw, 140px);
  overflow: hidden;
  background: linear-gradient(132deg, #191615 0%, #292321 52%, #12100f 100%);
  color: var(--champagne);
}
.capsule::before { content: ""; position: absolute; left: 0; bottom: 0; width: min(42vw, 560px); aspect-ratio: 1; background: url("chantilly-corner.png") top right / contain no-repeat; filter: brightness(0) saturate(100%) invert(90%) sepia(12%) saturate(430%) hue-rotate(306deg) brightness(101%) contrast(91%); opacity: .52; transform: rotate(180deg); pointer-events: none; }
.capsule-heading, .capsule-copy { position: relative; z-index: 1; }
.capsule .section-label { margin-bottom: 90px; color: rgba(244, 238, 231, .48); }
.capsule-copy { align-self: end; }
.capsule-copy > p { margin: 0 0 52px; color: rgba(244, 238, 231, .68); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.85; }
.details { margin: 0; border-top: 1px solid var(--line-dark); }
.details div { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 19px 0; border-bottom: 1px solid var(--line-dark); }
.details dt { color: rgba(244, 238, 231, .48); font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; }
.details dd { margin: 0; font: italic 300 1.35rem "Cormorant Infant", Georgia, serif; }

.contacts { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: clamp(32px, 7vw, 115px); padding: clamp(105px, 13vw, 185px) clamp(28px, 8vw, 140px); overflow: hidden; background: linear-gradient(116deg, #f0dfdd 0%, var(--powder) 48%, #dcbfbd 100%); }
.contacts::after { content: ""; position: absolute; right: 0; bottom: 0; width: min(43vw, 560px); aspect-ratio: 1; background: url("chantilly-corner.png") top right / contain no-repeat; opacity: .4; transform: rotate(90deg); transform-origin: center; pointer-events: none; }
.contacts-main { position: relative; z-index: 1; max-width: 980px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 22px 42px; margin-top: 58px; }
.contact-links a { padding-bottom: 6px; border-bottom: 1px solid rgba(51, 43, 39, .38); font: italic 300 clamp(1.35rem, 2.4vw, 2rem) "Cormorant Infant", Georgia, serif; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.contact-links a:hover, .contact-links a:focus-visible { color: #966d2f; border-color: #966d2f; outline: none; }

.closing { position: relative; min-height: 76svh; display: grid; place-content: center; padding: 100px 28px; overflow: hidden; background: linear-gradient(145deg, #eee5dc 0%, #faf6f1 48%, #eadfd5 100%); text-align: center; }
.closing::before { content: ""; position: absolute; left: 0; bottom: 0; width: min(42vw, 540px); aspect-ratio: 1; background: url("chantilly-corner.png") top right / contain no-repeat; opacity: .36; transform: rotate(180deg); pointer-events: none; }
.closing > * { position: relative; z-index: 1; }
.closing .eyebrow { margin-bottom: 30px; }
.domain { margin: 46px 0 0; color: #76635a; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
footer { position: relative; display: flex; justify-content: space-between; gap: 24px; padding: 25px clamp(24px, 5vw, 78px); overflow: hidden; background: var(--black); color: rgba(244, 238, 231, .58); font-size: .68rem; letter-spacing: .09em; }
footer::before { content: ""; position: absolute; right: 0; top: 0; width: 160px; aspect-ratio: 1; background: url("chantilly-corner.png") top right / contain no-repeat; filter: brightness(0) saturate(100%) invert(90%) sepia(12%) saturate(430%) hue-rotate(306deg) brightness(101%) contrast(91%); opacity: .42; pointer-events: none; }
footer > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  :root { --transition-inset: 35px; --transition-axis: 50%; }
  nav a:not(:last-child) { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-bottom: 50px; }
  .hero::after { display: none; }
  .hero-copy { padding: 130px var(--transition-inset) 40px; }
  h1 { font-size: clamp(3.5rem, 15vw, 6.3rem); }
  .hero-signature { min-height: 300px; margin: 0; }
  .hero-number { display: none; }
  .manifesto { grid-template-columns: 1fr; align-items: start; gap: 34px; padding: 100px 36px; }
  .manifesto::after { top: 0; right: 0; width: 72vw; opacity: .3; }
  .manifesto-copy { max-width: 620px; }
  .capsule { grid-template-columns: 1fr; gap: 65px; padding: 100px 36px; }
  .capsule::before { left: 0; bottom: 0; width: 72vw; opacity: .45; }
  .capsule .section-label { margin-bottom: 50px; }
  .contacts { grid-template-columns: 1fr; gap: 34px; padding: 100px 36px; }
  .contacts::after { right: 0; bottom: 0; width: 72vw; opacity: .34; }
}

@media (max-width: 540px) {
  :root { --transition-inset: 24px; }
  .topbar { padding: 22px 20px; }
  .wordmark { font-size: 1.1rem; }
  .hero-copy { padding-inline: var(--transition-inset); }
  .hero-signature { min-height: 250px; }
  .logo-wrap { width: 108px; }
  .manifesto, .capsule, .contacts { padding-inline: 25px; }
  .manifesto h2, .capsule h2, .contacts h2, .closing h2 { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .details div { grid-template-columns: 1fr; gap: 7px; }
  .contact-links { flex-direction: column; align-items: flex-start; }
  footer { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }