:root {
  color-scheme: dark;
  --navy: #101625;
  --champagne: #e9d9b9;
  --ivory: #f6eee0;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ivory);
  background: var(--navy);
  font: 1rem/1.55 var(--sans);
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #11162630, #11162626 38%, #11162655 71%, #111626bd),
    radial-gradient(ellipse at 50% 47%, #11162662, transparent 70%),
    url("sunset.webp") center 57% / cover no-repeat;
}
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(42px, 7vh, 90px) 20px 44px;
  text-shadow: 0 2px 24px #101625b0;
}
.brand { display: block; width: clamp(162px, 25vh, 270px); height: auto; }
h1 {
  font: italic 500 clamp(3.1rem, 7vw, 6.3rem)/.88 var(--serif);
  margin: clamp(25px, 4.5vh, 49px) 0 0;
  letter-spacing: -.025em;
}
.rule { width: min(190px, 45vw); height: 1px; background: linear-gradient(90deg, transparent, var(--champagne), transparent); margin: clamp(21px, 4vh, 38px) 0 17px; }
.chapter { margin: 0; color: var(--champagne); font-size: clamp(.69rem, 1.5vw, .91rem); letter-spacing: .24em; text-transform: uppercase; }
.intro { margin: 6px 0 24px; font: italic 500 clamp(1.28rem, 3.5vw, 1.9rem)/1.12 var(--serif); }
button, input { font: inherit; }
button { cursor: pointer; }
.outline, .filled {
  min-height: 46px;
  padding: 10px 28px;
  border: 1px solid var(--champagne);
  background: #10162545;
  color: var(--ivory);
  letter-spacing: .22em;
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
.outline:hover, .filled { background: var(--champagne); color: var(--navy); }
.filled:hover { background: var(--ivory); }
.filled:disabled { opacity: .7; cursor: wait; }
a { color: inherit; }
:focus-visible { outline: 2px solid #e9d9b9; outline-offset: 4px; }
footer { padding: 0 20px 23px; color: var(--champagne); }
.footer-content {
  max-width: 960px;
  margin: auto;
  padding-top: 15px;
  border-top: 1px solid #e9d9b97d;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 26px;
  font-size: .74rem;
  letter-spacing: .05em;
}
footer a, footer button { text-decoration: none; }
footer a:hover, footer button:hover { text-decoration: underline; }
footer button, .inline-link, .dismiss { border: 0; padding: 0; background: transparent; color: inherit; }
footer button, footer a { padding-block: 7px; }
dialog {
  color: var(--ivory);
  background: var(--navy);
  width: min(490px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow: auto;
  border: 1px solid #e9d9b9ab;
  padding: clamp(23px, 6vw, 42px);
  box-shadow: 0 20px 72px #0007;
  overscroll-behavior: contain;
}
dialog::backdrop { background: #080b13bb; }
body:has(dialog[open]) { overflow: hidden; }
dialog h2 { margin: 0 22px 10px 0; font: italic 500 clamp(2.35rem, 8vw, 3.15rem)/.98 var(--serif); }
dialog p { font-size: .92rem; }
.dismiss { position: absolute; top: 9px; right: 9px; width: 40px; height: 40px; font-size: 1.65rem; color: var(--champagne); }
.dialog-copy { margin: 0 0 24px; }
form { display: grid; gap: 8px; }
form > label { font-size: .82rem; font-weight: 600; }
input:not([type=checkbox]) { width: 100%; height: 44px; padding: 8px 11px; margin-bottom: 5px; border: 1px solid var(--champagne); border-radius: 0; color: var(--navy); background: var(--ivory); }
.consent { display: flex; gap: 8px; align-items: flex-start; padding-top: 4px; }
.consent input { flex: none; width: 17px; height: 17px; margin: 2px 0; accent-color: var(--champagne); }
form .privacy-note { margin: 3px 0 8px; color: #e0d5c3; font-size: .75rem; }
.inline-link { text-decoration: underline; }
#form-status { margin: 2px 0 0; color: #ffd3ba; }
@media (max-width: 600px) {
  body::before { background-position: center, center, 63% 58%; }
  .hero { padding-top: 39px; padding-bottom: 40px; }
  .footer-content { gap: 0 13px; line-height: 1.25; }
  .footer-content span { flex-basis: 100%; text-align: center; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}