/* Concept: a royal invitation. Deep navy and gold, the mandala from the loading screen behind a large
   elephant, and one centred axis running down the whole page. */
:root {
  --ink: #050f24;
  --night: #071631;
  --navy: #0a1f44;
  --royal: #143a7c;
  --gold: #ebcb7a;
  --gold-soft: #c9a960;
  --ivory: #f7f1df;
  --mist: #bcd0e8;
  --line: rgba(235, 203, 122, 0.3);

  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --body: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* The hero's layout. The loading screen uses these to land exactly on the hero's logo. */
  --logo-width: clamp(236px, 24vw, 344px);
  --hero-top: clamp(128px, 13vw, 168px);

  /* Where the logo starts: the middle of the screen, and larger by this constant factor. */
  --screen-middle: 50vh;
  --intro-travel: calc(var(--screen-middle) - var(--hero-top) - var(--logo-width) * 0.3142);
  --intro-zoom: 1.25;
  color-scheme: dark;
}

@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font: 400 1.0625rem/1.65 var(--body);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 500; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.16; }
h3 { font: 600 1.16rem/1.28 var(--display); color: var(--gold); text-wrap: balance; }
figure { margin: 0; }
figcaption { font-size: 0.875rem; color: var(--mist); text-align: center; text-wrap: balance; }
a { color: inherit; }
code { font: 500 0.94em/1.4 var(--mono); overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.section { padding-block: clamp(56px, 8vw, 112px); }
.section h2 { text-align: center; margin-inline: auto; max-width: 17em; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 25;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* Opening. There is one logo and one mandala, and they are the hero's own. They start at the centre of
   the screen, the logo unfolds, and they travel to their place in the hero. Nothing is swapped, so
   nothing can jump. Everything else fades in around them. --intro-start can shift the whole timeline. */
html.intro-skip { --intro-start: -1.4s; }
/* A link to a section goes straight there. */
html:has(:target) { --intro-start: -5s; }
html.intro-wait *, html.intro-wait *::before, html.intro-wait *::after { animation-play-state: paused !important; }
html.intro-wait .logo-unfold { visibility: hidden; }
html.intro-skip .logo-unfold { display: none; }

.halo {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: calc(var(--hero-top) + var(--logo-width) * 0.3142);
  width: calc(var(--logo-width) * 4.2);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: rise-halo 600ms cubic-bezier(0.65, 0, 0.2, 1) calc(1.46s + var(--intro-start, 0s)) both;
}
.halo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/unfold-bg.webp") center / cover;
  animation: halo-in 1.44s cubic-bezier(0.22, 0.61, 0.36, 1) var(--intro-start, 0s) both;
}
@keyframes halo-in {
  from { opacity: 0; transform: rotate(-14deg) scale(1.12); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes rise-halo {
  from { transform: translate(-50%, -50%) translateY(var(--intro-travel)) scale(var(--intro-zoom)); }
  to { transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@keyframes rise-logo {
  from { transform: translateY(var(--intro-travel)) scale(var(--intro-zoom)); }
  to { transform: translateY(0) scale(1); }
}

/* The page appears as the logo arrives, top to bottom. */
.site-header,
.hero-text > *,
main > section:not(.hero),
.site-footer {
  animation: page-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.82s + var(--intro-start, 0s) + var(--page-delay, 0ms)) both;
}
.hero-text > h1 { --page-delay: 70ms; }
.hero-text > .lead { --page-delay: 160ms; }
.hero-text > .soon { --page-delay: 240ms; }
.hero-text > .text-link { --page-delay: 300ms; }
main > section:not(.hero), .site-footer { --page-delay: 300ms; animation-name: page-fade; }
/* The mandala dims behind the words gradually, as they arrive. */
.hero::before, .hero-text::before { animation: page-fade 800ms ease-out calc(1.66s + var(--intro-start, 0s)) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Header */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  padding: 22px var(--gutter) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 600 1.16rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
}
.brand img { width: 36px; height: auto; }
/* Two links on each side of the logo. The equal outer columns keep the logo in the exact middle. */
.site-header nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--nav-gap);
  --nav-gap: 28px;
}
.nav-side { display: flex; gap: 0 var(--nav-gap); }
.nav-left { justify-content: flex-end; }
.nav-side a {
  padding-block: 3px;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  color: var(--mist);
  text-decoration: none;
}
.nav-side a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 5px; }

/* Hero. The mandala is sized from the elephant, so its gold ring always frames the whole logo. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--hero-top) clamp(56px, 7vw, 96px);
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 190px;
  background: linear-gradient(rgba(5, 15, 36, 0.92) 28%, rgba(5, 15, 36, 0.62) 60%, rgba(5, 15, 36, 0));
}
.hero-inner { display: grid; justify-items: center; }
.hero-text { position: relative; display: grid; justify-items: center; }
/* The mandala fades out just above the words, wherever they fall. */
.hero-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px -100vw -400px;
  background: linear-gradient(rgba(5, 15, 36, 0), rgba(5, 15, 36, 0.86) 110px, var(--ink) 270px);
}
.emblem {
  position: relative;
  width: var(--logo-width);
  margin-bottom: clamp(50px, 6vw, 78px);
  transform-origin: 50.04% 37.9%;
  will-change: transform;
  animation: rise-logo 600ms cubic-bezier(0.65, 0, 0.2, 1) calc(1.46s + var(--intro-start, 0s)) both;
}
/* The unfolding animation lies exactly under the finished logo, which appears as it comes to rest. */
.logo-unfold {
  position: absolute;
  left: 50.04%;
  top: 37.9%;
  width: 128.82%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  animation: logo-unfold-out 1ms ease-in calc(1.56s + var(--intro-start, 0s)) both;
}
.logo-final {
  position: relative;
  width: 100%;
  animation: page-fade 120ms linear calc(1.4s + var(--intro-start, 0s)) both;
}
@keyframes logo-unfold-out {
  to { visibility: hidden; }
}
h1 { font-size: clamp(2.1rem, 5.6vw, 5.3rem); line-height: 1.12; }
h1 em { display: block; font-style: normal; color: var(--gold); }
.lead {
  max-width: 37rem;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: clamp(1.1rem, 1.6vw, 1.24rem);
  line-height: 1.55;
  color: var(--mist);
}
.soon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 12px 22px;
  border-block: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.soon i { width: 7px; height: 7px; flex: none; background: var(--gold); transform: rotate(45deg); }
.text-link { margin-top: 20px; font-weight: 500; color: var(--ivory); text-underline-offset: 5px; text-decoration-color: var(--gold); }
.text-link:hover { color: var(--gold); }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.ornament::before, .ornament::after {
  content: "";
  width: min(26vw, 190px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.ornament::after { transform: scaleX(-1); }
.ornament i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }

.phone {
  padding: 8px;
  border-radius: 40px;
  background: linear-gradient(160deg, var(--gold), #7c6329 42%, #2c2412);
  box-shadow: 0 0 90px rgba(60, 130, 230, 0.32);
}
.phone img { width: 100%; border-radius: 32px; }

/* Signing */
.intro-line { margin-top: 16px; text-align: center; color: var(--mist); }
.signing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(30px, 4.6vw, 64px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 52px); }
.notes-left { text-align: right; justify-items: end; }
.notes li { display: grid; gap: 6px; max-width: 21rem; }
.notes-left li { justify-items: end; }
.notes p { color: var(--mist); }
.num, .pin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font: 500 0.86rem/1 var(--mono);
}
.annotated { position: relative; display: grid; gap: 14px; }
.pin { position: absolute; left: -15px; border: 2px solid var(--ink); }
/* Positions match the screenshot: address, warning, addresses, Confirm. */
.pin-1 { top: 4.5%; }
.pin-2 { top: 13%; }
.pin-3 { top: 31%; left: auto; right: -15px; }
.pin-4 { top: 87.5%; left: auto; right: -15px; }
.closing-note {
  width: fit-content;
  max-width: 100%;
  margin: clamp(30px, 4vw, 48px) auto 0;
  padding-block: 12px;
  border-block: 1px solid var(--line);
  text-align: center;
  color: var(--ivory);
  font-weight: 500;
}

/* Features */
.features { background: linear-gradient(var(--ink), var(--night) 24%, var(--navy)); }
.phones { display: grid; gap: 14px; width: min(100%, 620px); margin: clamp(34px, 5vw, 60px) auto 0; }
.phones-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 36px); padding-bottom: 36px; }
.phone-low { transform: translateY(36px); }
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(36px, 5vw, 64px) 0 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.panel-grid > div {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  padding: clamp(24px, 3vw, 38px) clamp(18px, 2.4vw, 30px);
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel-grid dt { font: 600 1.14rem/1.28 var(--display); color: var(--ivory); }
.panel-grid dd { margin: 0; color: var(--mist); }

/* Networks */
.networks { background: var(--navy); padding-bottom: clamp(56px, 8vw, 104px); text-align: center; }
.networks h2 { font: 600 0.82rem/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.network-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
  font: 500 clamp(1.2rem, 2.9vw, 2.3rem)/1.4 var(--display);
}
/* Two rows of three. A forced break keeps a line from ever starting with a diamond. */
.network-list::before { content: ""; flex-basis: 100%; order: 2; }
.network-list li:nth-child(n + 4) { order: 3; }
.network-list li { display: flex; align-items: center; }
.network-list li::before {
  content: "";
  display: none;
  width: 7px;
  height: 7px;
  flex: none;
  margin-inline: clamp(12px, 1.8vw, 24px);
  background: var(--gold);
  transform: rotate(45deg);
}
.network-list li:not(:nth-child(3n + 1))::before { display: block; }
.network-more { margin-top: 8px; font: 500 clamp(1rem, 1.8vw, 1.35rem)/1.4 var(--display); color: var(--gold); }

/* Security */
.security { background: linear-gradient(var(--navy), var(--night) 34%, var(--ink)); }
.security-lead { max-width: 40rem; margin: 18px auto 0; text-align: center; font-size: clamp(1.08rem, 1.5vw, 1.2rem); color: var(--mist); }
.spec .value { order: -1; color: var(--gold); }
.spec code { color: var(--gold); }
.notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 4vw, 44px); }
.notice {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--gold);
  outline: 1px solid var(--line);
  outline-offset: 5px;
  text-align: center;
}
.notice p { color: var(--ivory); }

/* Questions */
.questions-inner { width: min(100% - 2 * var(--gutter), 760px); }
.faq { margin-top: clamp(26px, 3.6vw, 44px); border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
  font: 600 1.06rem/1.35 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 500 1.25rem/1 var(--mono); color: var(--gold); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--gold); }
.faq p { padding-bottom: 22px; color: var(--mist); }

/* Footer */
.site-footer { padding-block: 40px; border-top: 1px solid var(--line); text-align: center; }
.footer-inner { display: grid; justify-items: center; gap: 14px; }
.site-footer p { max-width: 42rem; font-size: 0.92rem; color: var(--mist); }

/* The 404 page */
.lost { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.lost-inner { display: grid; justify-items: center; gap: 16px; }
.lost img { width: min(60vw, 240px); }
.lost h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
.lost p { color: var(--mist); }
.lost a { color: var(--gold); font-weight: 600; }

@supports (height: 1dvh) {
  :root { --screen-middle: 50dvh; }
}

@media (max-width: 900px) {
  .signing-grid { grid-template-columns: minmax(0, 1fr); }
  .annotated { order: -1; width: min(100% - 30px, 320px); justify-self: center; }
  .notes { justify-items: stretch; }
  .notes-left, .notes-left li { text-align: left; justify-items: start; }
  .notes li { max-width: none; }
  .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No room for the name beside four links, so the header shows the elephant alone. */
@media (max-width: 660px) {
  .site-header .brand span { display: none; }
  .site-header .brand img { width: 30px; }
  .site-header nav { --nav-gap: clamp(9px, 3.6vw, 24px); }
  .nav-side a { font-size: clamp(0.76rem, 3.5vw, 0.94rem); letter-spacing: 0.01em; }
}

@media (max-width: 640px) {
  .brand { font-size: 1.06rem; }
  /* Small enough for "Know exactly what" to stay on one line. */
  h1 { font-size: min(8vw, 2.6rem); }
  :root { --hero-top: 112px; }
  .soon { gap: 10px; padding-inline: 8px; font-size: 0.76rem; letter-spacing: 0.1em; text-align: center; }
  .panel-grid, .notices { grid-template-columns: minmax(0, 1fr); }
  /* Three rows of two on a phone. */
  .network-list::after { content: ""; flex-basis: 100%; order: 4; }
  .network-list li:nth-child(n + 3) { order: 3; }
  .network-list li:nth-child(n + 5) { order: 5; }
  .network-list li:nth-child(odd)::before { display: none; }
  .network-list li:nth-child(even)::before { display: block; }
  .phone { border-radius: 26px; padding: 6px; }
  .phone img { border-radius: 21px; }
  .annotated .phone { border-radius: 36px; padding: 8px; }
  .annotated .phone img { border-radius: 29px; }
  .phones-row { padding-bottom: 24px; }
  .phone-low { transform: translateY(24px); }
}

/* On the narrowest phones the menu takes a second line. */
@media (max-width: 360px) {
  :root { --hero-top: 136px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-unfold { display: none; }
  .halo, .halo::before, .emblem, .logo-final, .site-header, .hero-text > *, main > section:not(.hero), .site-footer, .hero::before, .hero-text::before { animation: none; }
}