/* Slavevals landing prototype: textures are pure CSS, no images.
   Colours follow the Slavevals Visual Style Guide (UI palette + heraldic tinctures). */
:root {
  --bg: #121011;            /* page base, darker than Sable for the site; see judgment calls */
  --bg-2: #1E1C1A;          /* Sable */
  --iron: #3D3B3A;          /* Wrought iron */
  --forged: #4A4846;        /* Forged iron (frames) */
  --granite: #7A7670;       /* Granite (input borders) */
  --bronze: #B8913A;        /* Gilt (rank, accents, links) */
  --bronze-dim: #8C6A3A;    /* Bronze */
  --blood: #8B1E1E;         /* Wax red (seals, confirm) */
  --blood-hi: #9E2B25;      /* Gules */
  --blood-deep: #6E2320;    /* Sanguine */
  --ember: #C2562B;         /* Ember (alerts) */
  --parchment: #E6DCC6;     /* Bone (text on iron/dark) */
  --parchment-dim: #B9AE98; /* Raw wool (secondary text) */
  --muted: #8C8070;         /* Weathered wood (placeholder, fine print) */
  --wax-rgb: 139,30,30;     /* Wax red as rgb for glows */
  --gilt-rgb: 184,145,58;   /* Gilt as rgb for hairlines */
  --display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --body: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --ui: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --logo: 'Uncial Antiqua', 'Cinzel', serif;
  --max: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--bg);
  /* grain + faint vertical weathering */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 0%, var(--bg-2) 0%, var(--bg) 60%);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 1.25rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .eyebrow, .ladder li, .numeral {
  font-family: var(--display);
}
.btn, .sticky-cta, label, input, select, .error, .form-note, .footer, .skip-link {
  font-family: var(--ui);
}

a { color: var(--bronze); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--parchment); color: var(--bg); padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* Top bar */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  padding: 1.25rem 1.5rem;
}
.brand {
  color: var(--parchment); text-decoration: none;
  font-family: var(--logo);
  font-weight: 400; letter-spacing: .06em; font-size: 1.35rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 2.25rem;
  font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--parchment); text-decoration: none;
  background: linear-gradient(180deg, var(--blood-hi), var(--blood) 55%, var(--blood-deep));
  border: 1px solid var(--bronze);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.6);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }

.sticky-cta {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  padding: .85rem 1.4rem;
  font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--parchment); text-decoration: none;
  background: linear-gradient(180deg, var(--blood-hi), var(--blood));
  border: 1px solid var(--bronze);
  box-shadow: 0 8px 24px rgba(0,0,0,.7);
  transition: opacity .25s ease, transform .25s ease;
}
.sticky-cta.is-hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; }

/* Hero */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 6rem 1.5rem 7rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(30,28,26,.55), transparent 72%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #161412 0%, var(--bg-2) 55%, var(--bg) 100%);
}
/* soft edge only — style guide: no heavy vignette, no glow */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 80px 8px rgba(0,0,0,.35);
}
.hero-inner { position: relative; max-width: 52rem; }
.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--bronze);
  font-size: .9rem; font-weight: 600; letter-spacing: .35em; text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: ""; display: inline-block; width: 2.5rem; height: 1px;
  background: var(--bronze-dim); vertical-align: middle; margin: 0 .9rem;
}
h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.6rem, 9vw, 6.25rem);
  font-weight: 900; line-height: 1.05; letter-spacing: .02em;
  color: var(--parchment);
  text-shadow: 0 2px 0 rgba(0,0,0,.85);
}
.lead {
  margin: 0 auto 2.5rem; max-width: 38rem;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  color: var(--parchment-dim);
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6rem;
  background: linear-gradient(transparent, var(--bg));
}

/* Feature sections */
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.feature {
  position: relative;
  padding: 6rem 0;
  border-top: 1px solid rgba(var(--gilt-rgb),.18);
}
.feature.alt {
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 70%, rgba(0,0,0,.25)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 8px),
    var(--bg-2);
}
.numeral {
  display: block;
  color: var(--blood-hi);
  font-size: 1rem; font-weight: 700; letter-spacing: .3em;
  margin-bottom: .75rem;
}
.numeral::after {
  content: ""; display: block; width: 3rem; height: 2px; margin-top: .75rem;
  background: linear-gradient(90deg, var(--bronze), transparent);
}
h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  font-weight: 700; line-height: 1.15;
  color: var(--parchment);
}
.feature p { margin: 0; color: var(--parchment-dim); }

/* Rank ladder */
.ladder {
  list-style: none; margin: 2.75rem 0 0; padding: 0;
  display: flex; flex-direction: column-reverse; gap: .4rem;
  counter-reset: rank;
}
.ladder li {
  counter-increment: rank;
  position: relative;
  padding: .55rem 1rem .55rem 3.25rem;
  font-size: .95rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--parchment);
  background: linear-gradient(90deg, rgba(61,59,58,.85), rgba(61,59,58,.15));
  border-left: 3px solid var(--bronze-dim);
}
.ladder li::before {
  content: counter(rank, upper-roman);
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  font-size: .75rem; color: var(--bronze); letter-spacing: .05em;
}
/* widths grow toward the top of the hierarchy */
.ladder li:nth-child(1) { width: 52%; }
.ladder li:nth-child(2) { width: 58%; }
.ladder li:nth-child(3) { width: 64%; }
.ladder li:nth-child(4) { width: 70%; }
.ladder li:nth-child(5) { width: 76%; }
.ladder li:nth-child(6) { width: 82%; }
.ladder li:nth-child(7) { width: 88%; }
.ladder li:nth-child(8) { width: 94%; }
.ladder li:nth-child(9) {
  width: 100%;
  border-left-color: var(--blood-hi);
  background: linear-gradient(90deg, rgba(var(--wax-rgb),.65), rgba(var(--wax-rgb),.1));
}
.ladder li:nth-child(1) { border-left-color: var(--bronze); }

/* CTA */
.cta {
  padding: 7rem 0 8rem;
  text-align: center;
  border-top: 1px solid rgba(var(--gilt-rgb),.25);
  background:
    linear-gradient(180deg, var(--bg), #0a0808);
}
.narrow { max-width: 34rem; }
.cta h2 { font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 900; margin-bottom: .5rem; }
.cta-sub { margin: 0 0 2.5rem; color: var(--parchment-dim); font-size: 1.3rem; }

.waitlist {
  text-align: left;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(61,59,58,.45), rgba(26,23,22,.8));
  border: 1px solid rgba(var(--gilt-rgb),.4);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.6);
}
.field { margin-bottom: 1.4rem; }
label {
  display: block; margin-bottom: .45rem;
  font-size: .9rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--parchment);
}
.optional { color: var(--parchment-dim); text-transform: none; letter-spacing: .02em; font-size: .95rem; font-weight: 400; }
input, select {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit; font-family: var(--ui); font-size: 1.1rem;
  color: var(--parchment);
  background: #0d0b0b;
  border: 1px solid var(--granite);
  border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
input::placeholder { color: var(--muted); }
select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bronze) 50%),
    linear-gradient(135deg, var(--bronze) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%;
  background-size: .35rem .35rem; background-repeat: no-repeat;
  padding-right: 2.5rem;
}
select option { background: #0d0b0b; color: var(--parchment); }
input:focus, select:focus { border-color: var(--bronze); outline: none; box-shadow: 0 0 0 2px rgba(var(--gilt-rgb),.45); }
input[aria-invalid="true"] { border-color: var(--ember); }
.error { margin: .5rem 0 0; padding-left: .6rem; border-left: 3px solid var(--ember); color: var(--parchment); font-size: 1rem; }

.thanks {
  padding: 2.5rem 2rem;
  border: 1px solid var(--bronze-dim);
  background: linear-gradient(180deg, rgba(var(--wax-rgb),.22), rgba(26,23,22,.85));
}
.thanks:focus { outline: none; }
.thanks h3 { margin: 0 0 .5rem; font-size: 1.6rem; line-height: 1.2; color: var(--parchment); }
.thanks p { margin: 0; color: var(--parchment-dim); }

.footer {
  padding: 2rem 1.5rem 6rem;
  text-align: center;
  font-size: .95rem; color: var(--muted);
  border-top: 1px solid rgba(var(--gilt-rgb),.15);
  background: #0a0808;
}
.footer p { margin: 0; }

[hidden] { display: none !important; }

@media (max-width: 600px) {
  body { font-size: 1.15rem; }
  .feature { padding: 4.25rem 0; }
  .cta { padding: 5rem 0 6rem; }
  .waitlist { padding: 1.5rem 1.25rem; }
  .eyebrow::before, .eyebrow::after { width: 1.25rem; margin: 0 .5rem; }
  .eyebrow { letter-spacing: .25em; font-size: .8rem; }
  .btn { padding: 1rem 1.6rem; }
  .ladder li { font-size: .85rem; padding-left: 2.9rem; }
  .ladder li:nth-child(1) { width: 60%; }
  .ladder li:nth-child(2) { width: 65%; }
  .ladder li:nth-child(3) { width: 70%; }
  .ladder li:nth-child(4) { width: 75%; }
  .ladder li:nth-child(5) { width: 80%; }
  .ladder li:nth-child(6) { width: 85%; }
  .ladder li:nth-child(7) { width: 90%; }
  .ladder li:nth-child(8) { width: 95%; }
  .sticky-cta { left: 1rem; right: 1rem; bottom: 1rem; text-align: center; }
}

/* Hosting-ready additions */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 1rem 0 0; font-size: .95rem; color: var(--parchment-dim); text-align: center; }
#form-error { margin: 0 0 1rem; }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.cf-turnstile { margin-bottom: 1.2rem; }
.footer-links { margin-top: .5rem !important; }
.footer a { color: var(--bronze); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Simple content pages (privacy, 404) */
.page { min-height: 70vh; padding: 7rem 0 5rem; }
.page h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); }
.page h2 { font-size: 1.5rem; margin-top: 2.25rem; }
.page p, .page li { color: var(--parchment-dim); }
.page .btn { margin-top: 1.5rem; }
.page-404 { display: grid; place-items: center; text-align: center; }
.page-404 { min-height: 85vh; min-height: 85svh; }
.page-404 .numeral::after { margin-left: auto; margin-right: auto; }