/* The ad landing page (/sanctuary, served from sanctuary.html): the key art, the line, and two ways through.
   Same storm palette and rain as letter.css; no inline style (CSP style-src 'self'). */

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+FFFD;
}

:root {
  --storm: #11151a;
  --rule: #2e3842;
  --ivory: #ede6d6;
  --bone: #a9a396;
  --lamp: #e0a85a;
  --serif: "EB Garamond", Iowan Old Style, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--storm); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(224, 168, 90, .06), transparent 70%),
    var(--storm);
  color: var(--ivory);
  font: 18px/1.6 var(--serif);
  padding: clamp(16px, 4vw, 48px) 16px 28px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Rain: twenty slow hairlines, as on the letter pages. Off for reduced motion. */
.rain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .16; overflow: hidden; }
.rain i {
  position: absolute; top: -20vh; width: 1px; height: 16vh;
  background: linear-gradient(to bottom, transparent, var(--bone));
  transform: rotate(12deg);
  animation: fall 2s linear infinite;
}
@keyframes fall { to { transform: translate(-22vh, 130vh) rotate(12deg); } }
.rain i:nth-child(1)  { left: 4vw;   animation-duration: 1.9s; animation-delay: -0.2s; }
.rain i:nth-child(2)  { left: 11vw;  animation-duration: 2.6s; animation-delay: -1.1s; }
.rain i:nth-child(3)  { left: 17vw;  animation-duration: 1.6s; animation-delay: -2.0s; }
.rain i:nth-child(4)  { left: 24vw;  animation-duration: 2.3s; animation-delay: -0.7s; }
.rain i:nth-child(5)  { left: 31vw;  animation-duration: 2.9s; animation-delay: -1.6s; }
.rain i:nth-child(6)  { left: 38vw;  animation-duration: 1.7s; animation-delay: -2.4s; }
.rain i:nth-child(7)  { left: 45vw;  animation-duration: 2.4s; animation-delay: -0.4s; }
.rain i:nth-child(8)  { left: 52vw;  animation-duration: 2.0s; animation-delay: -1.3s; }
.rain i:nth-child(9)  { left: 58vw;  animation-duration: 2.7s; animation-delay: -2.2s; }
.rain i:nth-child(10) { left: 65vw;  animation-duration: 1.8s; animation-delay: -0.9s; }
.rain i:nth-child(11) { left: 72vw;  animation-duration: 2.5s; animation-delay: -1.8s; }
.rain i:nth-child(12) { left: 79vw;  animation-duration: 2.1s; animation-delay: -0.1s; }
.rain i:nth-child(13) { left: 86vw;  animation-duration: 2.8s; animation-delay: -2.6s; }
.rain i:nth-child(14) { left: 93vw;  animation-duration: 1.6s; animation-delay: -1.0s; }
.rain i:nth-child(15) { left: 100vw; animation-duration: 2.2s; animation-delay: -1.9s; }
.rain i:nth-child(16) { left: 107vw; animation-duration: 2.6s; animation-delay: -0.5s; }
.rain i:nth-child(17) { left: 114vw; animation-duration: 1.9s; animation-delay: -2.3s; }
.rain i:nth-child(18) { left: 121vw; animation-duration: 2.4s; animation-delay: -1.4s; }
.rain i:nth-child(19) { left: 128vw; animation-duration: 2.0s; animation-delay: -0.3s; }
.rain i:nth-child(20) { left: 135vw; animation-duration: 2.7s; animation-delay: -1.7s; }
@media (prefers-reduced-motion: reduce) { .rain { display: none; } }

main, .foot { position: relative; z-index: 1; }
main {
  align-self: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The key art carries the title, so the h1 is the picture. */
.key { margin: 0; width: 100%; font-size: 0; line-height: 0; }
/* Hero A/B (ab.js sets <html data-hero>): a background, so only the version shown is
   downloaded. A shows when the script never ran. */
.key {
  aspect-ratio: 1200 / 670;
  background: #1b2128 center / cover no-repeat;
  background-image: url("/sanctuary/capsule.jpg");
  background-image: image-set(url("/sanctuary/capsule.webp") type("image/webp"), url("/sanctuary/capsule.jpg") type("image/jpeg"));
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px var(--rule);
}
[data-hero="b"] .key {
  aspect-ratio: 16 / 9;
  background-image: url("/sanctuary/hero-ingame.jpg");
  background-image: image-set(url("/sanctuary/hero-ingame.webp") type("image/webp"), url("/sanctuary/hero-ingame.jpg") type("image/jpeg"));
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.line { margin: 1.4rem 0 .3rem; font-style: italic; font-size: 1.25rem; }
.what { margin: 0 0 1.6rem; max-width: 30rem; color: var(--bone); text-wrap: balance; }

/* The one big button. */
.steam {
  display: block;
  width: 100%;
  max-width: 22rem;
  padding: .95rem 1.2rem;
  background: var(--ivory);
  color: var(--storm);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms ease;
}
.steam:hover, .steam:focus-visible { background: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
.note { margin: .55rem 0 0; font-size: .88rem; color: var(--bone); }

.or {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; max-width: 22rem; margin: 1.5rem 0 1.2rem;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--bone);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* The phone path: one field, no login. */
.later { width: 100%; max-width: 26rem; }
.later label { display: block; margin: 0 0 .7rem; font-size: .98rem; text-wrap: balance; }
.row { display: flex; border-bottom: 1px solid var(--ivory); }
.row:focus-within { box-shadow: 0 1px 0 0 var(--ivory); }
.later input, .later button {
  font: inherit; color: inherit; background: transparent;
  border: 0; border-radius: 0; padding: .6rem .2rem;
}
.later input { flex: 1; min-width: 0; text-align: left; font-size: 16px; } /* 16px: no zoom on iOS focus */
.later input::placeholder { color: var(--bone); opacity: 1; }
.later input:focus { outline: none; }
.later button {
  flex: none; cursor: pointer; padding-left: .9rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.later button:hover { color: var(--lamp); }
.fine { margin: .7rem 0 0; font-size: .78rem; color: var(--bone); }
.fine a, .foot a { color: inherit; text-underline-offset: 3px; }

.foot { padding-top: 2.4rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ivory); }