/*
 * INTERSOUL — the launch page.
 *
 * Plain CSS, no build step, no dependencies. This page has to still work
 * untouched a year from now, on a phone, with JavaScript off.
 *
 * ## Where the colours come from
 *
 * They are the app's DAY tokens, measured from the Sanctuary Day asset and
 * recorded in design/visual-spec.md §3.1 — not approximations of them. A
 * landing page in a slightly different blue is worse than a plain one, because
 * a visitor who installs the app should recognise the place they arrive in.
 *
 * ## Living Gold, and the rule this file keeps
 *
 * Visual spec §3.3: gold is not paint. It flows at an edge or inside a vessel,
 * and it always means "active, live energy". A flat gold fill is forbidden. So
 * on this page gold appears as a 1px rule, a left border, a link underline and
 * the wordmark's glow — and nowhere as a filled block. There is no button on
 * this page precisely because there is nothing yet to press.
 */

/* ---- Fonts -----------------------------------------------------------------
 *
 * Self-hosted, and the reason is the privacy page.
 *
 * These three families used to arrive from fonts.googleapis.com, which meant
 * every visitor's browser made a request to Google — including on the page that
 * says Supabase and Resend are the only processors that ever touch anything.
 * The sentence was not true while a font request was going out beside it. The
 * files now sit in `fonts/`, served by the same host as the page, and there is
 * no longer a third party in the picture at all.
 *
 * Only the faces the pages actually use are here: Cinzel 700 for the two
 * heading levels, Cormorant Garamond 600 for the ceremonial line, and Inter for
 * everything else. Inter's file is a VARIABLE font, so one file covers 400, 500
 * and 600 and the weight is declared as the range it is asked for; Google was
 * already serving the same single file behind three separate declarations.
 * Cormorant Garamond's 400 italic was being fetched and never used anywhere on
 * any of the three pages, so it is simply gone.
 *
 * `latin` and `latin-ext` are split exactly as Google splits them, so an
 * English page downloads the `latin` file alone and the second one costs
 * nothing until a character needs it.
 *
 * `font-display: swap` on every face: the text is readable in a fallback serif
 * or sans from the first paint, and it re-renders when the real face lands. A
 * legal page that is invisible while a font loads is worse than one in Georgia.
 *
 * Provenance and licence: fonts.google.com, SIL Open Font License 1.1. The
 * three licence files sit beside the fonts in `fonts/`.
 */

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Day sky, measured (visual spec §3.1) */
  --sky-top: #b6cbdc;
  --sky-mid: #c5d1de;
  --sky-low: #aebccc;

  /* Frosted glass */
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);

  /* Ink. 1D1815 on the glass is 13.6:1 — well past AA. */
  --ink: #1d1815;
  --ink-soft: #4a4744;

  /* Living Gold */
  --gold-deep: #9a7b44;
  --gold-base: #c6a061;
  --gold-light: #edd7a8;
  /*
   * Gold that TEXT is allowed to be.
   *
   * The app's own ribbon label (#996F3F) and the first draft of this
   * (#7D5A2C) both fail WCAG AA against the day sky: measured in the browser
   * they come out at 3.3:1 and 4.0:1 against the lightest part of the
   * gradient, and normal-size text needs 4.5:1. #6D4C24 is the lightest gold
   * that clears it everywhere on this page — 4.64:1 on the palest sky, 6.41:1
   * on the glass — and it still reads as gold rather than brown.
   *
   * Decorative gold below (rules, borders, the wordmark's glow) stays at
   * --gold-base: it carries no information, so the text threshold does not
   * apply to it, and lightening it is what keeps the page feeling like the app.
   */
  --gold-ink: #6d4c24;

  --measure: 34rem;
  --gap: clamp(1.25rem, 4vw, 2rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Skip link: the first thing a keyboard reaches. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus {
  left: 0;
}

.wrap {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

/* ---- Type ------------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* The wordmark's light, as a glow rather than a fill (§3.3). */
  text-shadow: 0 0 26px rgba(237, 215, 168, 0.85), 0 1px 0 rgba(255, 255, 255, 0.6);
}

h2 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ceremonial {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  line-height: 1.45;
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

.lede {
  font-size: 1.125rem;
}

.muted {
  color: var(--ink-soft);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.5rem;
}

a {
  color: var(--gold-ink);
  text-decoration-color: var(--gold-base);
  text-underline-offset: 0.2em;
  /* The contact address is 27 unbreakable characters. On a 320px screen that
     is the one string on these pages long enough to push the page sideways. */
  overflow-wrap: anywhere;
}
a:hover {
  color: var(--gold-deep);
}
a:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* ---- Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  /*
   * Generous on a phone, and not endless on anything taller. 78vh alone is
   * right at 812px and absurd on a 1400px window or a headless capture, where
   * it becomes a screen and a half of empty sky before the first sentence.
   */
  min-height: min(78vh, 40rem);
  display: grid;
  align-content: center;
  padding: clamp(3rem, 12vh, 6rem) 0;
  text-align: center;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  z-index: -2;
}

/* The sky's own light, lifted so the type has a ground to stand on. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(198, 214, 228, 0.15) 0%,
    rgba(198, 214, 228, 0.5) 55%,
    var(--sky-mid) 100%
  );
}

.hero p {
  margin-inline: auto;
}

/* ---- Glass ------------------------------------------------------------ */

.panel {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: var(--gap);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 24px rgba(29, 24, 21, 0.06);
}

section {
  padding: clamp(2.5rem, 8vh, 4.5rem) 0;
}

.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .cards--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card p:last-child {
  margin-bottom: 0;
}

/* Living Gold as an EDGE. Never a fill. */
.card {
  border-left: 2px solid var(--gold-base);
}

.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-base) 20%,
    var(--gold-light) 50%,
    var(--gold-base) 80%,
    transparent
  );
  margin: 0;
}

/* ---- The list of what the app refuses --------------------------------- */

.refusals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  max-width: var(--measure);
}

.refusals li {
  padding-left: 1.4rem;
  position: relative;
}

.refusals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 1px;
  background: var(--gold-base);
}

/* ---- Legal pages ------------------------------------------------------ */

.doc {
  padding: clamp(2rem, 6vh, 3.5rem) 0 4rem;
}

.doc h2 {
  margin-top: 2.25rem;
}

.doc h2:first-of-type {
  margin-top: 1rem;
}

.doc p,
.doc li {
  max-width: var(--measure);
}

.doc ul {
  padding-left: 1.15rem;
  margin: 0 0 1rem;
}

.doc li {
  margin-bottom: 0.4rem;
}

.draft {
  border-left: 2px solid var(--gold-base);
  margin-bottom: 2rem;
}

.draft p:last-child {
  margin-bottom: 0;
}

/* ---- Footer ----------------------------------------------------------- */

footer {
  padding: 2.5rem 0 3rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

footer nav {
  margin-bottom: 0.75rem;
}

footer nav a + a::before {
  content: " · ";
  color: var(--gold-base);
  text-decoration: none;
}

footer p {
  max-width: var(--measure);
  margin-bottom: 0.35rem;
}

/* ---- Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}