:root {
  --navy: #0f2340;
  --navy-deep: #0a1830;
  --gold: #c9a24a;
  --gold-light: #e8c877;
  --cream: #fbf5e8;
  --parchment: #f3e7cc;
  --text: #1f2a3a;
  --muted: #5a5347;
  --radius: 6px;
  --serif-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --footer-height: clamp(320px, 33.3vw, 640px); /* the footer pictures' 3:1 shape where it fits */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
}

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

.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 860px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 24, 48, 0.92);
  backdrop-filter: blur(6px);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand {
  font-family: var(--serif-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  text-decoration: none;
}
.nav nav a { margin-left: 22px; color: #e9e2d2; text-decoration: none; }
.nav nav a:hover { color: var(--gold-light); }

/* Hero */
.hero {
  padding: 72px 0 80px;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(255, 226, 150, 0.85), rgba(255, 226, 150, 0) 60%),
    linear-gradient(180deg, #fdf3dc 0%, #f6e3b8 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.hero-book {
  width: 100%;
  max-width: 380px;
  justify-self: center;
  filter: drop-shadow(0 24px 30px rgba(15, 35, 64, 0.35));
}
.hero h1 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 20px;
}
.lead { font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--navy); margin: 0 0 8px; }

.ornament {
  width: 220px;
  height: 14px;
  margin: 20px 0 28px;
  background:
    linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 42%, transparent 42%, transparent 58%, var(--gold) 58%, var(--gold) 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) center / 14px 14px no-repeat;
}

.button {
  display: inline-block;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: var(--radius);
  padding: 14px 28px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 35, 64, 0.2);
}
.button:hover { filter: brightness(1.06); }
.button[hidden] { display: none; }
.button-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  box-shadow: none;
  padding: 13px 27px;
}
.button-outline:hover { background: rgba(15, 35, 64, 0.06); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Band */
.band {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #f4ecdc;
  text-align: center;
  padding: 56px 0;
}
.band p { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.35; }
.band .accent { font-style: italic; color: var(--gold-light); margin-top: 6px; }

/* Cards */
.section { padding: 72px 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card {
  margin: 0;
  background: var(--navy);
  border: 1px solid rgba(201, 162, 74, 0.55);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 35, 64, 0.18);
}
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card figcaption { padding: 18px 12px 20px; text-align: center; }
.card-title {
  display: block;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--gold-light);
  text-transform: uppercase;
}
.card-sub {
  display: block;
  font-family: var(--serif-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9e2d2;
}

/* Story */
.story {
  padding-top: 24px;
  background: linear-gradient(180deg, var(--cream), #f7ecd3);
  color: var(--navy);
}
.story-text { text-align: center; }
.story-text p { font-size: clamp(1.15rem, 2.2vw, 1.35rem); margin: 0 0 18px; }
.story .story-eyebrow {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.story h2 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 4px 0 28px;
}
.story .story-accent { font-style: italic; color: #8a6a22; margin-top: 26px; }
.story .story-close { font-family: var(--serif-display); font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin-top: 26px; }
.story .story-close cite { font-style: normal; font-weight: 700; }

/* Two covenants overlapping: two circles, text in each part. */
.venn {
  position: relative;
  display: grid;
  grid-template-columns: 38fr 24fr 38fr;
  align-items: center;
  max-width: 780px;
  aspect-ratio: 100 / 62;
  margin: 36px auto 44px;
  text-align: center;
}
.venn::before,
.venn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.venn::before {
  left: 0;
  background: radial-gradient(circle at 40% 40%, rgba(232, 200, 119, 0.35), rgba(201, 162, 74, 0.22));
  border: 1px solid rgba(201, 162, 74, 0.8);
}
.venn::after {
  right: 0;
  background: radial-gradient(circle at 60% 40%, rgba(120, 170, 215, 0.3), rgba(40, 90, 150, 0.2));
  border: 1px solid rgba(60, 110, 170, 0.6);
}
.venn-part { position: relative; z-index: 1; padding: 0 8%; }
.venn-part:first-child { padding-left: 16%; }
.venn-part:last-child { padding-right: 16%; }
.venn h3 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 10px;
}
.venn p { font-size: clamp(0.95rem, 1.7vw, 1.1rem); line-height: 1.35; margin: 0; }
.venn-overlap { padding: 0; }
.venn-overlap h3 { color: #7a5a14; }
.venn-overlap p { font-style: italic; }

/* Trailer */
.trailer { background: var(--parchment); }
.trailer h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--navy);
  text-align: center;
  margin: 0 0 28px;
}
.video-frame {
  border: 1px solid rgba(201, 162, 74, 0.7);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 36px rgba(15, 35, 64, 0.25);
}
.video-frame video { width: 100%; aspect-ratio: 16 / 9; }

/* Pre-order (preorder.js, api/preorder.js) */
.preorder {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #f4ecdc;
}
.preorder h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--gold-light);
  text-align: center;
  margin: 0 0 12px;
}
.preorder-intro { max-width: 40rem; margin: 0 auto 32px; text-align: center; }
.preorder-form {
  background: var(--cream);
  color: var(--text);
  border: 1px solid rgba(201, 162, 74, 0.7);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
  padding: 32px;
}
.preorder-form,
.preorder-address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.preorder-form { position: relative; }
.preorder-address {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}
.preorder-address legend {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  padding: 0;
  margin-bottom: 14px;
}
.field { display: grid; gap: 6px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field span {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.field em {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 0; /* so "(optional)" doesn't make its label taller than its neighbour's */
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(15, 35, 64, 0.3);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.preorder-submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 6px;
}
.preorder-form button { border: 0; cursor: pointer; }
.preorder-form button:disabled { cursor: progress; opacity: 0.7; }
.preorder-status { margin: 0; font-style: italic; color: var(--muted); }
.preorder-status.is-error { font-style: normal; color: #9a2c1c; }
/* Spam trap: off screen for people, still in the form for bots. */
.preorder-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Without JavaScript, a pre-order that didn't go through comes back to #preorder-failed. */
.preorder-failed {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid #9a2c1c;
  background: rgba(154, 44, 28, 0.08);
  color: #7a2416;
  scroll-margin-top: 90px;
}
.preorder-failed:target { display: block; }
/* Room under the form for the top of the city, which rises out of the footer (below). */
.preorder { padding-bottom: calc(var(--footer-height) * 0.15); }
.preorder .container { position: relative; z-index: 1; }

/* Closing */
.closing {
  text-align: center;
  padding: 88px 0 200px;
  background:
    linear-gradient(180deg, var(--cream) 0%, rgba(251, 245, 232, 0.55) 55%, rgba(251, 245, 232, 0) 100%),
    url("assets/landscape.webp") center bottom / cover no-repeat;
}
.closing .eyebrow {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0;
}
.closing .title {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 12px;
}
.closing .subtitle { font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--navy); margin: 0; }
.closing .ornament { margin: 22px auto; }
.closing .author {
  font-family: var(--serif-display);
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.closing .author-role {
  font-family: var(--serif-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6a22;
  margin: 6px 0 0;
}
.closing .closing-button { margin-top: 28px; }

/* Footer: the golden city in the distance, and in front of it the dry seabed running
   down to the bottom of the page, with the footer's text on the ground. Both pictures
   have transparent skies and the same shape, so they scale alike at every width. */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: var(--footer-height);
  background: var(--navy-deep);
  color: #f4ecdc;
  text-align: center;
  padding: 0 0 22px;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.7);
}
.site-footer-city,
.site-footer-ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Raised so its lower edge sits just behind the rocks: their ground is solid from 64%
   of the way down, and this puts the city's edge at 67%. */
.site-footer-city { transform: translateY(-33%); }
/* Shade the ground behind the text so it stays readable. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(rgba(10, 24, 48, 0), rgba(10, 24, 48, 0.75));
}
.site-footer .container { position: relative; z-index: 1; }

/* The Red Sea (sea.js): the page opens under water, then the sea parts into
   two walls along the edges. --wall is each wall's width, set by sea.js. */
.sea { display: none; }
.sea-on .sea { display: block; }
.sea-on { --wall: clamp(22px, calc((100vw - 1080px) / 2 + 8px), 180px); }
.sea-on .container {
  padding-left: max(16px, calc(var(--wall) + 12px - max(0px, (100vw - 1080px) / 2)));
  padding-right: max(16px, calc(var(--wall) + 12px - max(0px, (100vw - 1080px) / 2)));
}

.sea-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
}
.sea-veil {
  position: fixed;
  inset: 0;
  z-index: 51;
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: pointer;
  visibility: hidden;
}
.sea-covered .sea-veil { visibility: visible; }
/* Until the first frame of water is drawn. */
.sea-on:not(.sea-ready) .sea-veil { background: radial-gradient(ellipse at 50% 30%, #1d5b64, #07222b 75%); }

.sea-on .site-header,
.sea-on main,
.sea-on .site-footer { transition: filter 1.8s ease; }
.sea-covered .site-header,
.sea-covered main,
.sea-covered .site-footer {
  filter: blur(2px) saturate(0.8);
  animation: sea-sway 7s ease-in-out infinite;
}
@keyframes sea-sway {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(4px, -3px); }
  66% { transform: translate(-3px, 2px); }
}

.sea-prompt {
  max-width: 30rem;
  text-align: center;
  color: #eaf6f3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.sea-prompt-on .sea-prompt { opacity: 1; transform: none; pointer-events: auto; }
.sea-part {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 4.2vw, 1.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(232, 200, 119, 0.55);
  background: rgba(4, 26, 34, 0.5);
  border: 1px solid rgba(232, 200, 119, 0.8);
  border-radius: 999px;
  padding: 16px 36px;
  cursor: pointer;
  animation: sea-pulse 2.8s ease-in-out infinite;
}
.sea-part:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
@keyframes sea-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 119, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(232, 200, 119, 0); }
}
.sea-hint {
  margin: 14px 0 28px;
  font-family: var(--serif-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 246, 243, 0.75);
}
.sea-verse {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0, 20, 26, 0.85);
}
.sea-verse cite {
  display: block;
  margin-top: 10px;
  font-family: var(--serif-display);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--gold-light);
}

/* Reduced motion keeps the sea (at half speed, in sea.js) but drops the extras. */
@media (prefers-reduced-motion: reduce) {
  .sea-covered .site-header,
  .sea-covered main,
  .sea-covered .site-footer,
  .sea-part { animation: none; }
}

@media (max-width: 760px) {
  .hero { padding: 40px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .hero-book { max-width: 260px; }
  .hero .ornament { margin-left: auto; margin-right: auto; }
  .actions { justify-content: center; }
  .cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .nav { display: grid; grid-template-columns: 1fr auto; } /* the title wraps before the links do */
  .brand { justify-self: start; font-size: 0.95rem; }
  .nav nav a { margin-left: 10px; font-size: 0.95rem; white-space: nowrap; }
  .closing { padding: 64px 0 140px; }
  .preorder-form,
  .preorder-address { grid-template-columns: 1fr; }
  .preorder-form { padding: 24px 18px; }

  /* The circles stack on phones, overlapping top to bottom. */
  .venn {
    grid-template-columns: 1fr;
    grid-template-rows: 38fr 24fr 38fr;
    aspect-ratio: 62 / 100;
    max-width: 340px;
  }
  .venn::before,
  .venn::after { width: 100%; left: 0; right: auto; }
  .venn::after { top: auto; bottom: 0; }
  .venn-part,
  .venn-part:first-child,
  .venn-part:last-child { padding: 0 14%; }
  .venn-part:first-child { align-self: end; padding-bottom: 6%; }
  .venn-part:last-child { align-self: start; padding-top: 6%; }
}