/* Primmortal.org – Landing Page Styles */
/* Brand colors: purple #492279, gold #DFAB2C (updated 2026-09) */

:root {
  --purple: #492279;
  --purple-dark: #311755;
  --purple-light: #6e449d;
  --gold: #DFAB2C;
  --gold-dark: #b8891c;
  --gold-soft: #f8ecd0;
  --purple-pale: #f3eff8; /* very pale tint of --purple, used for the top bar */
  --white: #ffffff;
  --off-white: #faf9f7;
  --text: #2a2a2a;
  --text-muted: #5a5a5a;
  --border: #e8e4dc;
  --shadow: 0 4px 24px rgba(73, 34, 121, 0.08);
  --radius: 10px;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--purple);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--purple-light);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 239, 248, 0.97); /* var(--purple-pale) */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e3dcee;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--purple);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.brand:hover {
  color: var(--purple);
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.nav a:hover {
  color: var(--purple);
}

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

.hero {
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  /* translucent so the fixed background watermark shows through */
  background: linear-gradient(180deg, rgba(250, 249, 247, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero-logo {
  width: 160px;
  margin: 0 auto 1.75rem;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.15rem);
  font-weight: 700;
  color: var(--purple);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

.hero-divider {
  width: 48px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 1.25rem;
  border-radius: 2px;
}

.hero-sub {
  max-width: 540px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}

.btn-primary:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  color: var(--white);
}

.btn-secondary {
  background: transparent;
  color: var(--purple);
  border-color: var(--gold);
}

.btn-secondary:hover {
  background: var(--gold-soft);
  color: var(--purple-dark);
}

/* ---------- Features ---------- */

.features {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  border-color: #d4c4a8;
  box-shadow: 0 6px 28px rgba(73, 34, 121, 0.1);
}

.feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--gold);
}

.feature-card h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--purple);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.feature-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- Oath band ---------- */

.oath {
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}

.oath-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--off-white);
}

.oath-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--gold);
}

.oath-text h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--purple);
  margin-bottom: 0.25rem;
}

.oath-text p {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Sections (Mission, etc.) ----------
   Each nav-linked section is an "entry card": a thin light border, a gold bar
   across the top, and a purple block down the left side with the text to its
   right. The card is transparent so the fixed background watermark shows
   through behind the text. */

.section {
  --card-pad-y: 2.75rem;
  --card-pad-x: 2.75rem;
  --card-bar: 60px;
  --card-gap: 1.75rem;
  position: relative;
  width: min(900px, 100% - 3rem);
  margin: 0 auto 2rem;
  padding: var(--card-pad-y) var(--card-pad-x) var(--card-pad-y)
    calc(var(--card-pad-x) + var(--card-bar) + var(--card-gap));
  background: transparent;
  border: 1px solid var(--border);
  border-top: 6px solid var(--gold);
  border-radius: 4px;
  scroll-margin-top: 6rem; /* clears the sticky header when jumped to from the nav */
}

/* Purple side block: inset from the left edge, spanning the text block */
.section::before {
  content: "";
  position: absolute;
  top: var(--card-pad-y);
  bottom: var(--card-pad-y);
  left: var(--card-pad-x);
  width: var(--card-bar);
  background: var(--purple);
}

.section h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--purple);
  margin-bottom: 0.9rem;
}

/* The gold top bar replaces the small gold rule under the heading */
.section .section-divider {
  display: none;
}

.section p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

.section > :last-child {
  margin-bottom: 0;
}

.section ul {
  margin: 1rem 0 1rem 1.25rem;
  color: var(--text-muted);
}

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

/* White Paper download: the button and its note (draft status and the
   archived previous version) are centred together as one unit; the card's
   heading and paragraph stay left-aligned. */
.section .section-cta {
  margin-top: 1.5rem;
  text-align: center;
}

.section .section-note {
  font-size: 0.9rem;
  margin-top: 0.75rem;
  text-align: center;
}

/* Breathing room around the mailing band, which sits between two cards */
.mailing {
  margin: 3rem 0;
  scroll-margin-top: 6rem;
}

/* ---------- Mailing list ---------- */

.mailing {
  background: rgba(250, 249, 247, 0.7); /* var(--off-white), translucent for the watermark */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.mailing h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--purple);
  margin-bottom: 0.5rem;
}

.mailing p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.mailing-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 440px;
  margin: 0 auto;
}

.mailing-form input[type="email"] {
  flex: 1 1 220px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.mailing-form input[type="email"]:focus {
  border-color: var(--purple);
}

.mailing-form .btn {
  flex: 0 0 auto;
}

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

.site-footer {
  padding: 2.25rem 1.5rem;
  text-align: center;
  background: transparent; /* lets the watermark show; page is white underneath */
}

.footer-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 0.35rem;
}

.site-footer p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 800px) {
  .features {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .nav {
    gap: 1rem;
  }

  .nav a {
    font-size: 0.88rem;
  }

  .oath-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .header-inner {
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    padding-top: 3rem;
  }

  .hero-logo {
    width: 130px;
  }

  /* Entry cards: no purple side bar on phones, so the text gets the full width */
  .section {
    --card-pad-y: 1.75rem;
    --card-pad-x: 1.2rem;
    padding: var(--card-pad-y) var(--card-pad-x);
    width: calc(100% - 2rem);
    margin-bottom: 1.5rem;
    scroll-margin-top: 10.5rem; /* the header wraps to ~147px here */
  }

  .section::before {
    display: none;
  }

  .section h2 {
    font-size: 1.5rem;
  }

  .mailing {
    scroll-margin-top: 10.5rem;
  }
}

/* ---------- Background watermark ----------
   One flat light-purple copy of the logo, fixed in the middle of the
   viewport behind all content. It does not scroll, cannot be clicked or
   selected, and is hidden when printing and in forced-colors mode. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("primmortal-watermark.svg") center calc(50% + 2rem) / min(60vmin, 620px) no-repeat;
}

@media (max-width: 560px) {
  body::before {
    background-size: min(78vw, 60vmin + 60px);
  }
}

@media print, (forced-colors: active) {
  body::before {
    display: none;
  }
}