/* ============================================================================
   LOS ANGELES ARMORED COMBAT — shared mockup design system
   "The Field & The Blazon"
   Tokens + base + common components. Page layout lives in each page's <style>.
   Fonts (link in each page head):
   https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Archivo:wght@400;500;600;700;800&display=swap
   ============================================================================ */

:root {
  /* ground & surfaces */
  --sable:      #0c0a09;
  --sable-2:    #14110e;
  --iron:       #1e1a16;
  --iron-2:     #2a241e;

  /* Or (gold) */
  --or:         #c79a3e;
  --or-light:   #e7c878;
  --or-deep:    #8a6a28;

  /* Gules (crimson) */
  --gules:      #b22230;
  --gules-light:#e0545f;
  --gules-deep: #7d1620;

  /* the lists — cold steel */
  --steel:      #4a6b86;
  --steel-light:#7fa1bb;

  /* Argent (text) */
  --argent:     #ece4d6;
  --argent-dim: #a89c88;
  --argent-mute:#6f665b;

  /* status */
  --ok:         #6bbf73;
  --err:        #e0655f;

  /* lines */
  --line:        rgba(199,154,62,0.16);
  --line-strong: rgba(199,154,62,0.42);

  /* accent (theme-able per house) */
  --accent:      var(--or);
  --accent-light:var(--or-light);
  --accent-deep: var(--or-deep);
  --accent-rgb:  199,154,62;

  --shadow:     0 22px 60px rgba(0,0,0,.6);
  --ease:       cubic-bezier(.2,.6,.2,1);
}

[data-house="knights"] { --accent:var(--or);    --accent-light:var(--or-light);    --accent-deep:var(--or-deep);    --accent-rgb:199,154,62; }
[data-house="blades"]  { --accent:var(--gules);  --accent-light:var(--gules-light); --accent-deep:var(--gules-deep); --accent-rgb:178,34,48; }
[data-house="ring"]    { --accent:var(--or);    --accent-light:var(--or-light);    --accent-deep:var(--or-deep);    --accent-rgb:199,154,62; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Spectral', Georgia, serif;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(var(--accent-rgb),0.10), transparent 62%),
    var(--sable);
  color: var(--argent);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint engraved grain — far subtler than the old noise */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
img { display: block; max-width: 100%; }
a { color: var(--accent-light); text-decoration: none; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, .display { font-family: 'Marcellus', 'Times New Roman', serif; font-weight: 400; line-height: 1.08; }

/* the aesthetic risk: titles struck/engraved into the surface, not glowing gold */
.engraved {
  color: var(--argent);
  text-shadow:
    0 1px 0 rgba(231,200,120,.16),
    0 2px 1px rgba(0,0,0,.55),
    0 -1px 1px rgba(0,0,0,.5);
}
.engraved-accent {
  color: var(--accent-light);
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 28px rgba(var(--accent-rgb),.18);
}

/* utility / data / money / labels — the grotesque does the hard-data work */
.u, .eyebrow, .blazon, .chip, .btn, label, .price, .num {
  font-family: 'Archivo', system-ui, sans-serif;
}

.eyebrow {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .34em;
  font-size: .72rem; color: var(--accent-light);
}
.blazon {
  font-family: 'Archivo', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .26em;
  font-size: .64rem; color: var(--argent-dim);
}

/* ── The Chief (signature heraldic band) ──────────────────── */
.chief {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; max-width: 760px; margin: 0 auto;
}
.chief .rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-deep), var(--accent));
  transform-origin: left center;
  animation: ruleDraw 1s var(--ease) both;
}
.chief .rule.r { background: linear-gradient(90deg, var(--accent), var(--accent-deep), transparent); transform-origin: right center; }
.chief .mark { font-size: .62rem; }
@keyframes ruleDraw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; font-size: .74rem;
  padding: 1.05rem 2.4rem; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-gold {
  color: var(--sable);
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 60%, var(--accent-deep));
  box-shadow: 0 10px 30px rgba(var(--accent-rgb),.28);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(var(--accent-rgb),.42); }
/* steel sheen sweep */
.btn-gold::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .6s var(--ease);
}
.btn-gold:hover::after { transform: translateX(130%); }
.btn-ghost {
  color: var(--argent); background: transparent; border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-light); transform: translateY(-2px); }

/* ── Chips ────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Archivo', sans-serif; font-weight: 500; font-size: .8rem;
  color: var(--argent); background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: 2px;
  padding: .55rem 1rem; backdrop-filter: blur(4px);
}
.chip strong { color: var(--accent-light); font-weight: 700; }

/* ── Section scaffolding ──────────────────────────────────── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: .6rem 0 0; }
.section-head .lead { color: var(--argent-dim); max-width: 620px; margin: 1rem auto 0; font-size: 1.08rem; }

/* ── Forms (shared, trustworthy) ──────────────────────────── */
label {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; font-size: .68rem;
  color: var(--accent-light); margin-bottom: .5rem;
}
label .req { color: var(--accent); }
input, select, textarea {
  width: 100%; padding: .85rem .95rem;
  background: #0a0807; color: var(--argent);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: 'Spectral', serif; font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--argent-mute); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16);
  background: #0d0a08;
}
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23c79a3e' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
textarea { resize: vertical; min-height: 96px; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-light); outline-offset: 3px; border-radius: 2px;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3rem 1.5rem; text-align: center;
  font-family: 'Archivo', sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep); font-size: .68rem;
}

/* ── Reveal on load / scroll ──────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}