/* tryhecate.com — values mirror hecate-app/theme/tokens.json (color.world, color.card,
   the four-role type system). Change them there first, then here. */
:root {
  --night: #0c0a12;          /* world.ground */
  --night-raised: #13101c;   /* world.groundRaised */
  --nebula: #2c2840;         /* world.nebula */
  --starlight: #f4ecd8;      /* world.star */
  --ember: #e0a94a;          /* world.gold — glow, never text */
  --gold-ink: #caa96a;       /* world.goldLine — gold you can read */
  --card: #ffffff;           /* card.ground */
  --card-border: #e2d8c4;    /* card.border */
  --ink: #2a2416;            /* card.borderInk */
  --ink-soft: #5a5040;

  --wordmark: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --label: "Cinzel", Georgia, serif;
  --title: "Spectral", Georgia, serif;
  --body: "Tiro Bangla", Georgia, serif;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--night);
  color: var(--starlight);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* The sky: the app's own galaxy fog, dimmed, with a canvas starfield over it. Fixed behind
   every page so inner pages read as the same world as the home page. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(12, 10, 18, 0.55) 70%, var(--night) 100%),
    url("fog.webp") center / cover no-repeat,
    var(--night);
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 18, 0.45);
}
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus { left: 16px; top: 16px; background: var(--card); color: var(--ink); padding: 8px 12px; }

/* ---------- Home ---------- */

.threshold {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 16px;
}

.threshold-center {
  align-self: center;
  justify-self: center;
  text-align: center;
  max-width: 34rem;
  padding: 12vh 0 8vh;
}

.wordmark {
  font-family: var(--wordmark);
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  margin: 0;
  text-shadow: 0 0 40px rgba(224, 169, 74, 0.25);
}

.lede {
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  line-height: 1.5;
  margin: 1.75rem auto 0;
  max-width: 26em;
  text-wrap: balance;
}

.soon {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
  margin: 2.5rem 0 0;
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  padding: 1.5rem 0 2rem;
  font-size: 0.95rem;
}
.site-foot a {
  color: rgba(244, 236, 216, 0.72);
  text-decoration: none;
}
.site-foot a:hover { color: var(--starlight); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Inner pages: the card surfacing from the dark ---------- */

.top {
  display: flex;
  justify-content: center;
  padding: 2.25rem 16px 1.5rem;
}
.top a {
  font-family: var(--wordmark);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  text-decoration: none;
}

/* Double frame: outer hairline in card.border, inner in ink — the engraved card edge,
   simplified. */
.page {
  max-width: 44rem;
  margin: 0 auto 3rem;
  padding: 0 16px;
}
.card {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 80px rgba(0, 0, 0, 0.55);
}
.card-inner {
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3.25rem);
}

.card h1 {
  font-family: var(--title);
  font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.card .meta {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 2rem;
}
.card h2 {
  font-family: var(--title);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.5rem;
}
.card h3 {
  font-family: var(--title);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 1.5rem 0 0.25rem;
}
.card p, .card li { max-width: 66ch; }
.card p { margin: 0 0 1rem; }
.card ul, .card ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.card li { margin-bottom: 0.4rem; }
.card a { color: var(--ink); text-underline-offset: 3px; }
.card a:focus-visible { outline-color: var(--ink); }
.card strong { font-family: var(--title); font-weight: 600; }

/* Drafts are marked in the page, not hidden — these pages go live before legal review. */
.draft-note {
  border-left: 3px solid var(--ember);
  background: #fbf5e8;
  padding: 0.75rem 1rem;
  margin: 0 0 2rem;
  font-size: 1rem;
}
mark.todo {
  background: #fbe7b8;
  color: var(--ink);
  padding: 0 0.2em;
  border-radius: 2px;
}

.inner-foot {
  max-width: 44rem;
  margin: 0 auto;
}

@media (max-width: 480px) {
  body { font-size: 1.0625rem; }
  .card { border-radius: 10px; padding: 4px; }
  .card-inner { border-radius: 7px; }
}

@media print {
  .sky, .top, .site-foot { display: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .card-inner { border: 0; padding: 0; }
}