@font-face {
  font-family: "Avencort Blackletter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/unifrakturcook-700.ttf") format("truetype");
}

:root {
  --font-heading: "Avencort Blackletter", "UnifrakturCook", "Times New Roman", serif;
  --font-body: "Inter", sans-serif;
  color-scheme: dark;
  --bg: #09090c;
  --surface: #141419;
  --line: #2a2a31;
  --text: #ece8e0;
  --muted: #a39ea0;
  --purple: #8b5cf6;
  --gold: #d99a3d;
  font-family: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; }
.site-header { align-items: center; background: #09090ce8; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 5vw, 5rem); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(14px); }
.brand { align-items: center; display: flex; font-size: .85rem; font-weight: 700; gap: .65rem; letter-spacing: .12em; text-decoration: none; }
.brand-mark { color: var(--purple); font-size: 1.5rem; }
nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
nav a { color: var(--muted); font-size: .9rem; text-decoration: none; }
nav a:hover { color: var(--gold); }
.hero { align-items: center; background: linear-gradient(90deg, #09090ce8 0%, #09090cb8 48%, #09090c66 100%), url("art/original-hero.jpg") center / cover; display: flex; justify-content: center; min-height: 78vh; overflow: hidden; padding: clamp(7rem, 18vw, 13rem) 1.25rem; position: relative; text-align: center; }
.hero::before { background: repeating-linear-gradient(115deg, transparent 0 7px, #ffffff05 8px 9px); content: ""; inset: 0; opacity: .45; pointer-events: none; position: absolute; }
.hero > * { position: relative; }
.hero-copy-wrap { max-width: 720px; }
.eyebrow { color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .22em; margin: 0 0 1rem; }
h1, h2, h3, .brand, .link-card strong { font-family: var(--font-heading); letter-spacing: .02em; line-height: 1.1; }
h1 { font-size: clamp(3.2rem, 9vw, 7rem); font-weight: 700; margin-bottom: 1.5rem; }
h1 em, h2 em { color: var(--gold); font-style: normal; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 400; }
h3 { color: var(--gold); font-size: 1.4rem; }
.hero-copy { color: var(--muted); font-size: 1.2rem; margin: 0 auto 2rem; max-width: 34rem; }
.hero-note { color: #77727a; font-size: .8rem; margin: 1rem auto 0; max-width: 34rem; }
.button { background: var(--purple); border-radius: 2px; box-shadow: 0 8px 30px #0006; display: inline-flex; font-weight: 700; gap: 1rem; padding: .9rem 1.4rem; text-decoration: none; }
.button:hover { background: #a78bfa; color: #09090c; }
.section { margin: 0 auto; max-width: 1180px; padding: clamp(5rem, 10vw, 9rem) 1.25rem; }
.split { display: grid; gap: 4rem; grid-template-columns: 1fr 1fr; }
.prose { color: var(--muted); font-size: 1.1rem; max-width: 34rem; }
.dark-section { max-width: none; background: var(--surface); }
.section-heading, .card-grid { margin-left: auto; margin-right: auto; max-width: 1180px; }
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.card { background: linear-gradient(145deg, #19191f, #101014); border: 1px solid var(--line); padding: 2rem; }
.card-number { color: var(--purple); font-family: var(--font-heading); font-size: 2rem; }
.card p, .join-section > p { color: var(--muted); }
.callout { border-left: 3px solid var(--gold); color: var(--text) !important; padding-left: 1rem; }
.principles { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1180px; }
.principles p { border-top: 1px solid var(--line); color: var(--muted); margin: 0; padding-top: 1rem; }
.principles strong { color: var(--text); display: block; margin-bottom: .35rem; }
.faq-section h2 { max-width: 42rem; }
details { border-bottom: 1px solid var(--line); max-width: 800px; padding: 1.25rem 0; }
summary { cursor: pointer; font-family: Georgia, serif; font-size: 1.25rem; }
details p { color: var(--muted); margin: 1rem 0 0; max-width: 44rem; }
.join-section { text-align: center; }
.join-section > p:not(.eyebrow) { margin: -1rem auto 2rem; max-width: 34rem; }
footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .8rem; justify-content: space-between; padding: 2rem clamp(1.25rem, 5vw, 5rem); }
.link-section { border-top: 1px solid var(--line); }
.link-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
.link-card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .7rem; min-height: 170px; overflow: hidden; padding: 1.5rem; text-decoration: none; transition: border-color .2s, transform .2s; }
.link-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.link-card img { height: 74px; margin: -1.5rem -1.5rem .3rem; object-fit: cover; object-position: center 35%; opacity: .8; width: calc(100% + 3rem); }
.link-card strong { color: var(--gold); font-size: 1.35rem; }
.link-card span { color: var(--muted); font-size: .95rem; }
.link-card span:last-child { color: var(--purple); font-weight: 700; margin-top: auto; }
@media (max-width: 700px) { .site-header, footer { align-items: flex-start; flex-direction: column; gap: 1rem; } nav { flex-wrap: wrap; } .split, .card-grid, .principles { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .link-grid { grid-template-columns: 1fr; } }