/*
 * Gods of Pushups — the whole visual system for the site, in one file.
 *
 * It is the app's theme (`src/theme.ts`) ported to CSS, and the two rules that
 * hold that look together hold here too:
 *
 *   1. Black is warm, never neutral. Every surface is a brown-black, so gold on
 *      it reads as lit metal rather than yellow-on-grey. A #000 panel anywhere
 *      looks like a hole punched in the page.
 *   2. Gold is a light source, not a fill. Hairlines, rules, small caps and
 *      glyphs. Large gold areas flatten instantly — even the primary button is
 *      dark inside with a lit edge.
 *
 * The fonts are the app's own, subset to Latin and served from this origin.
 * Nothing here loads from a third party: no CDN, no Google Fonts, no analytics.
 * That is a promise the privacy policy makes, so it has to stay true — adding
 * one <script src="https://…"> to this site makes that page a lie.
 */

/* Cinzel is an inscriptional Roman capital: NAMES, TITLES and SMALL CAPS only,
   always with letter spacing. EB Garamond is the reading face. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Cinzel-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Cinzel-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/EBGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/EBGaramond-Italic.woff2') format('woff2');
}

:root {
  --bg: #0a0806;
  --panel: #120e0a;
  --card: #171109;
  --ink: #efe3cc;
  --dim: #9a876a;
  --faint: #6b5c46;
  --gold: #c9973f;
  --lit: #e8bc6a;
  --pale: #f6dfae;
  --gold-dim: #9c7433;
  --line: rgba(201, 151, 63, 0.22);
  --rule: rgba(201, 151, 63, 0.13);
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --serif: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  /* The bloom behind the masthead: what makes the page read as lit from above
     rather than as a flat dark rectangle. */
  background-image: radial-gradient(88% 46% at 50% -6%, rgba(201, 151, 63, 0.15), transparent 62%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 61rem; margin: 0 auto; padding: 0 1.4rem; }
.narrow { max-width: 41rem; margin: 0 auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }

h1 {
  font-size: clamp(2.1rem, 6.4vw, 3.4rem);
  line-height: 1.09;
  letter-spacing: 0.005em;
  color: var(--pale);
}
h2 {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lit);
}
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lit);
}

p { margin: 0 0 1rem; }
a { color: var(--lit); text-decoration-color: rgba(232, 188, 106, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--pale); }
a:focus-visible { outline: 1px solid var(--lit); outline-offset: 3px; }
b { font-weight: 400; color: var(--ink); }
em { font-style: italic; }

/* --- Masthead and footer ------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lit);
  text-decoration: none;
}
.top nav { display: flex; gap: 1.3rem; }
.top nav a {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.top nav a:hover, .top nav a[aria-current] { color: var(--lit); }

footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 1.6rem 0 3.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: baseline;
  justify-content: space-between;
  color: var(--faint);
  font-size: 0.86rem;
}
footer a { color: var(--dim); }
footer nav { display: flex; gap: 1.3rem; }

/* --- The hero ------------------------------------------------------------ */

.hero { text-align: center; padding: 3.6rem 0 1rem; }
.hero .narrow { max-width: 38rem; }

.seal {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.7rem;
  border-radius: 50%;
  border: 1px solid rgba(232, 188, 106, 0.45);
  display: grid;
  place-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(232, 188, 106, 0.15), rgba(232, 188, 106, 0.02));
  box-shadow: 0 0 38px rgba(201, 151, 63, 0.15), inset 0 0 20px rgba(201, 151, 63, 0.09);
}

.kicker {
  font-family: var(--display);
  font-size: 0.71rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 1rem;
}

.lede { color: var(--dim); font-size: 1.13rem; margin: 1.2rem auto 0; }
.fine { color: var(--faint); font-size: 0.85rem; margin: 1.4rem 0 0; }

.cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

a.btn {
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.95rem 1.75rem;
  border-radius: 3px;
  text-decoration: none;
  color: var(--lit);
  border: 1px solid rgba(232, 188, 106, 0.5);
  background: linear-gradient(180deg, rgba(232, 188, 106, 0.12), rgba(232, 188, 106, 0.02));
  box-shadow: 0 0 22px rgba(201, 151, 63, 0.1);
  transition: border-color 0.18s, box-shadow 0.18s, color 0.18s;
}
a.btn:hover {
  color: var(--pale);
  border-color: rgba(232, 188, 106, 0.9);
  box-shadow: 0 0 28px rgba(201, 151, 63, 0.26);
}

.soon {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.9rem 1.6rem;
  display: inline-block;
  margin-top: 2rem;
}

/* --- Rules and sections -------------------------------------------------- */

.div { display: flex; align-items: center; gap: 1rem; margin: 3.6rem 0; }
.div::before, .div::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.head { text-align: center; margin-bottom: 2.2rem; }
.head p { color: var(--dim); margin: 0.7rem auto 0; max-width: 32rem; font-size: 1rem; }

/* --- Steps --------------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.steps li { counter-increment: step; padding-top: 2.7rem; position: relative; }
.steps li::before {
  content: counter(step, upper-roman);
  position: absolute;
  top: -0.2rem;
  left: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--gold);
  opacity: 0.8;
}
.steps li::after {
  content: '';
  position: absolute;
  top: 2rem;
  left: 0;
  width: 1.6rem;
  height: 1px;
  background: var(--line);
}
.steps b {
  display: block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lit);
  margin-bottom: 0.35rem;
}
.steps span { color: var(--dim); font-size: 0.98rem; }

/* --- Cards --------------------------------------------------------------- */

/* Four cards, so 2x2 rather than auto-fit — which packed three across and left
   the fourth sitting alone under them at most desktop widths. */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.4rem 1.35rem;
}
.card .tag {
  display: block;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}
.cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
/* The app's own tab glyphs — keep, blades, horns, sigil — at the weight they
   are drawn at in `src/components/orn/Glyph.tsx`. Stroked, never filled: gold
   is a light source here, not a fill. */
.glyph {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(201, 151, 63, 0.3));
}
.card h3 { margin-bottom: 0.55rem; }
.card p { color: var(--dim); font-size: 0.97rem; margin: 0; }

/* --- The six gates ------------------------------------------------------- */

.gates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
}
.gates li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.36rem 0.9rem;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
}
/* The aura ramp, straight from shared/game/tiers.ts. Six rungs, and the
   sequence every ARPG player already knows: grey, green, blue, teal, violet,
   ember. Defined here rather than inline so the page needs no style-src
   'unsafe-inline' in its CSP. */
.gates i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.gates .t1 { background: #8a8f98; box-shadow: 0 0 8px #8a8f98; }
.gates .t2 { background: #7ab52e; box-shadow: 0 0 8px #7ab52e; }
.gates .t3 { background: #8ec9f7; box-shadow: 0 0 8px #8ec9f7; }
.gates .t4 { background: #2fd6a8; box-shadow: 0 0 8px #2fd6a8; }
.gates .t5 { background: #b45cff; box-shadow: 0 0 8px #b45cff; }
.gates .t6 { background: #ff5e14; box-shadow: 0 0 8px #ff5e14; }

/* A line of prose that sits under a section rather than over it. */
.note { color: var(--dim); max-width: 34rem; margin: 0 auto; text-align: center; }

/* --- Adversaries --------------------------------------------------------- */

.foes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.foe {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--card);
  margin: 0;
}
.foe img {
  display: block;
  width: 100%;
  /* The width/height attributes on the tag are there to reserve the space
     before the image loads. `height: auto` is what stops the height one from
     winning outright — without it the card renders 1140px tall. */
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.foe figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.86) 42%, rgba(10, 8, 6, 0.97));
}
.foe b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pale);
}
.foe em { display: block; color: var(--gold-dim); font-size: 0.86rem; margin-bottom: 0.5rem; }
.foe span { color: var(--dim); font-size: 0.92rem; display: block; }

/* --- The privacy panel --------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2.2rem 1.8rem;
  text-align: center;
}
.panel p { color: var(--dim); margin: 0.9rem auto 0; max-width: 34rem; }

/* --- The invite page ----------------------------------------------------- */

.invite { max-width: 34rem; text-align: center; padding-top: 4rem; }
.invite h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.invite .seal { margin-bottom: 1.7rem; }
.invite .lede { margin-top: 0.9rem; }
.invite .cta { margin-top: 1.1rem; }
.invite .fine { margin-top: 2rem; letter-spacing: 0.08em; }
.invite footer { justify-content: center; margin-top: 3.5rem; }

/* --- Legal documents ----------------------------------------------------- */

.doc { padding-top: 2.8rem; font-size: 1.02rem; }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
.doc .updated {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 1rem 0 0;
}
.doc .lede { color: var(--dim); font-size: 1.08rem; margin: 0.9rem 0 0; }

.summary {
  border: 1px solid var(--line);
  border-left: 2px solid rgba(232, 188, 106, 0.5);
  background: var(--panel);
  border-radius: 0 4px 4px 0;
  padding: 1.5rem 1.5rem 1.6rem;
  margin: 2.4rem 0;
}
.summary h2 { font-size: 0.72rem; letter-spacing: 0.22em; color: var(--gold-dim); margin-bottom: 0.9rem; }
.summary p { color: var(--dim); font-size: 0.98rem; margin: 0 0 0.7rem; }
.summary p:last-child { margin-bottom: 0; }

.toc { list-style: none; padding: 0; margin: 0 0 3rem; column-width: 15rem; column-gap: 2rem; }
.toc li { margin: 0 0 0.35rem; break-inside: avoid; }
.toc a { font-size: 0.94rem; color: var(--dim); text-decoration: none; }
.toc a:hover { color: var(--lit); text-decoration: underline; }

.doc section { scroll-margin-top: 1.5rem; }
.doc section > h2 {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  margin: 3rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.doc ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.doc li { margin: 0.45rem 0; }
.doc li::marker { color: var(--gold-dim); }
.doc section p, .doc section li { color: var(--dim); }
.doc section b { color: var(--ink); }

@media (max-width: 34rem) {
  body { font-size: 18px; }
  .hero { padding-top: 2.6rem; }
  .foe figcaption { padding-top: 2.6rem; }
}