:root {
  --color-bg: oklch(0.17 0.005 90);
  --color-bg-dark: oklch(0.13 0.005 90);
  --color-bg-darker: oklch(0.1 0.005 90);
  --color-card: oklch(0.22 0.005 90);
  --color-border: oklch(0.32 0.005 90);
  --color-text: oklch(0.92 0.015 75);
  --color-text-bright: oklch(0.94 0.015 75);
  --color-text-muted: oklch(0.85 0.015 70);
  --color-text-soft: oklch(0.85 0.01 75);
  --color-text-dim: oklch(0.72 0.015 65);
  --color-text-dimmer: oklch(0.65 0.015 60);
  --color-text-body: oklch(0.78 0.015 70);
  --color-accent: oklch(0.54 0.19 45);
  --color-accent-hover: oklch(0.58 0.19 45);
  --color-accent-shadow: oklch(0.5 0.16 45);
  --color-accent-text: oklch(0.78 0.19 50);
  --color-error: var(--color-accent-hover);
  --color-label: oklch(0.68 0.15 45);
  --color-input-bg: oklch(0.15 0.005 90);
  --color-input-border: oklch(0.4 0.005 90);
  --font-display: Anton, sans-serif;
  --font-mono: 'Special Elite', monospace;
  --font-body: Inter, sans-serif;
}

body { margin: 0; background: var(--color-bg); }
::selection { background: var(--color-accent); color: white; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-bg-darker); color: var(--color-text-bright); padding: 12px 20px; font-weight: 600; text-decoration: none; border-radius: 0 0 4px 0; }
.skip-link:focus { left: 0; }

/* Page shell */
.site { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }
.site--home { background-image: radial-gradient(var(--color-card) 1px, transparent 1px); background-size: 3px 3px; }
.site--page { min-height: 100vh; }

/* Layout containers, grouped by shared max-width */
.site-nav-inner, .hero, .wanted { max-width: 1100px; margin: 0 auto; }
.divider-inset, .faq, .details { max-width: 780px; margin: 0 auto; }
.about-inner, .privacy-section { max-width: 720px; margin: 0 auto; }

/* Nav */
.site-nav { max-width: 100%; padding: 20px 32px; background: var(--color-bg-darker); border-bottom: 1px solid var(--color-border); }
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { font-family: var(--font-display); font-size: 26px; letter-spacing: 1px; color: var(--color-text-bright); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { color: var(--color-text-muted); text-decoration: none; font-weight: 600; font-size: 14px; transition: color 0.15s ease; }
.nav-link:hover { color: var(--color-text-bright); }
.footer-link { color: var(--color-text-dimmer); text-decoration: underline; }

/* Buttons */
.btn-primary { color: white; text-decoration: none; font-weight: 700; background: var(--color-accent); border: none; border-radius: 4px; box-shadow: 0 3px 0 var(--color-accent-shadow); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: 0 5px 0 var(--color-accent-shadow); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-accent-shadow); }
.btn-primary--nav { padding: 10px 22px; font-size: 14px; }
.btn-primary--hero { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; font-size: 16px; box-shadow: 0 4px 0 var(--color-accent-shadow); }
.btn-primary--submit { margin-top: 6px; width: 100%; padding: 14px; font-size: 16px; box-shadow: 0 4px 0 var(--color-accent-shadow); }

/* Hero */
.hero { padding: 60px 32px 20px; display: flex; align-items: center; justify-content: flex-start; gap: 0px; flex-wrap: wrap; }
.hero-copy { max-width: 620px; text-align: left; position: relative; z-index: 1; margin-right: -160px; }
.hero-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); line-height: 0.95; margin: 0 0 10px; letter-spacing: 4px; color: var(--color-accent-text); text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero-subtitle { font-family: var(--font-mono); font-size: clamp(26px, 4vw, 42px); letter-spacing: 3px; color: var(--color-accent-text); margin-bottom: 18px; line-height: 1.1; }
.hero-text { font-family: var(--font-mono); font-size: 17px; line-height: 1.6; margin: 0; color: var(--color-text-muted); text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.hero-media { position: relative; width: 100%; max-width: 560px; flex: none; }
.hero-glow { position: absolute; inset: -15%; background: radial-gradient(ellipse 55% 55% at 50% 55%, oklch(0.5 0.15 45 / 0.35), transparent 70%); filter: blur(10px); }
.hero-image { position: relative; width: 100%; height: auto; opacity: 0.5; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.5)); }

/* Shared section header */
.section-header { text-align: center; margin-bottom: 36px; }
.section-header--wanted { margin-bottom: 40px; }
.section-header--contact { margin-bottom: 32px; }
.section-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--color-label); margin-bottom: 8px; }
.section-heading { font-family: var(--font-display); font-size: 34px; margin: 0; color: var(--color-text-bright); }
.section-heading--lg { font-size: 40px; }
.section-heading--about { margin-bottom: 20px; }
.section-heading--accent { color: var(--color-accent-text); }

/* Wanted listings */
.wanted { padding: 56px 32px 60px; }
.wanted-group-heading { text-align: left; font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; color: var(--color-text-bright); margin: 0 0 24px; }
.wanted-divider { max-width: 780px; margin: 48px auto; padding: 0 32px; }
.wanted-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.wanted-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 2px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.wanted-card-photo { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 12px; }
.wanted-card-photo--warm { background: repeating-linear-gradient(135deg, oklch(0.88 0.02 45), oklch(0.88 0.02 45) 10px, oklch(0.84 0.02 45) 10px, oklch(0.84 0.02 45) 20px); }
.wanted-card-photo--cool { background: repeating-linear-gradient(135deg, oklch(0.88 0.02 250), oklch(0.88 0.02 250) 10px, oklch(0.84 0.02 250) 10px, oklch(0.84 0.02 250) 20px); }
.wanted-card-photo--warm-alt { background: repeating-linear-gradient(135deg, oklch(0.88 0.02 45), oklch(0.88 0.02 45) 10px, oklch(0.88 0.02 45) 10px, oklch(0.84 0.02 45) 20px); }
.wanted-card-photo--image { padding: 0; background: white; }
.wanted-card-photo-label { font-family: monospace; font-size: 11px; text-align: center; color: oklch(0.4 0.02 60); background: rgba(255,255,255,0.6); padding: 4px 8px; }
.wanted-card-photo a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.wanted-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wanted-card-body { padding: 16px; text-align: center; }
.wanted-card-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--color-label); margin-bottom: 6px; }
.wanted-card-title { font-family: var(--font-display); font-size: 19px; line-height: 1.15; color: var(--color-text-bright); }
.wanted-card-sub { font-size: 14px; color: var(--color-text-dimmer); margin-top: 4px; }

/* Dividers */
.divider { border-top: 1px solid var(--color-border); }
.divider-inset { padding: 0 32px; }

/* About */
.about, .faq, .privacy-section { padding: 64px 32px; }
.about { background: var(--color-bg-dark); color: var(--color-text-bright); }
.about-inner { text-align: center; }
.about-text { font-size: 16px; line-height: 1.75; color: var(--color-text-soft); }
.about-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--color-label); margin-top: 28px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 20px; }
.faq-item { border-left: 3px solid var(--color-accent); padding-left: 18px; }
.faq-question { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--color-text-bright); }
.faq-answer { font-size: 15px; line-height: 1.6; color: var(--color-text-dim); }

/* Contact */
.contact { background: var(--color-bg-dark); padding: 64px 32px 72px; }
.contact-inner { max-width: 560px; margin: 0 auto; }
.success-message, .contact-form-wrap { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 4px; padding: 32px; }
.success-message { display: none; text-align: center; }
.success-title { font-family: var(--font-display); font-size: 22px; color: var(--color-text-bright); margin-bottom: 8px; }
.success-sub { font-size: 15px; color: var(--color-text-dim); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--color-input-border); border-radius: 3px; background: var(--color-input-bg); color: var(--color-text-bright); }
.form-field textarea { resize: vertical; }
.form-error { display: none; font-size: 13px; color: var(--color-error); text-align: center; }

/* Details / footer */
.details { padding: 48px 32px; text-align: center; border-top: 1px solid var(--color-border); }
.details-text { font-size: 14px; line-height: 1.7; color: var(--color-text-dimmer); margin: 0; }
.site-footer { background: var(--color-bg-dark); color: var(--color-text-dimmer); text-align: center; padding: 24px; font-size: 13px; border-top: 1px solid var(--color-border); }

/* Privacy page */
.privacy-heading { font-family: var(--font-display); font-size: 34px; margin: 0 0 28px; color: var(--color-text-bright); }
.privacy-body { font-size: 15px; line-height: 1.75; color: var(--color-text-body); }
.privacy-body h2 { font-family: var(--font-display); font-size: 20px; color: var(--color-text-bright); margin-top: 32px; }