/* ==========================================================================
   HMRD Regiment Site — Design System v3
   Loud, dark, industrial-propaganda. Warden steel-blue + warning-siren
   amber on near-black gunmetal, with real texture (scanlines, grain,
   a stamped rotated slogan) instead of a flat quiet fill.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --void: #0a0c0d;              /* near-black base */
  --gunmetal: #14181a;          /* raised panel surface */
  --gunmetal-deep: #08090a;     /* recessed surface */
  --steel: #3d7a9e;             /* Warden steel-blue, brighter/louder than v2 */
  --steel-dim: #6b8fa3;         /* muted steel for secondary text */
  --bone: #d8dcd6;              /* primary text, cold off-white */
  --siren: #e8a13a;             /* warning amber — the loud accent */
  --siren-hot: #ff6b35;         /* hotter variant for the boldest moments */
  --blood: #c4342a;             /* reserved for danger/critical only */

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Oswald', sans-serif;

  --content-width: 720px;
  --wide-width: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Layered texture: fine scanlines + diagonal hazard hatch, both very
   low-opacity so content stays legible but the surface doesn't feel flat */
body {
  background-image:
    repeating-linear-gradient(0deg, rgba(61,122,158,0.04) 0px, rgba(61,122,158,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(135deg, rgba(232,161,58,0.025) 0px, rgba(232,161,58,0.025) 2px, transparent 2px, transparent 22px);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--bone);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

a { color: var(--steel); text-decoration: none; }
a:hover { color: var(--siren); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--siren);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Top navigation
   --------------------------------------------------------------------- */

.site-header {
  border-bottom: 3px solid var(--steel);
  background: var(--gunmetal-deep);
  position: relative;
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--siren) 0 14px, transparent 14px 28px);
  opacity: 0.7;
}

.site-header-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--bone);
  letter-spacing: 0.03em;
  text-decoration: none;
}
.wordmark:hover { color: var(--bone); }
.wordmark span { color: var(--siren); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-nav a {
  color: var(--steel-dim);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--bone);
  border-bottom-color: var(--steel);
}

.site-nav a[aria-current="page"] {
  color: var(--siren);
  border-bottom-color: var(--siren);
}

/* ---------------------------------------------------------------------
   Page structure
   --------------------------------------------------------------------- */

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  position: relative;
}

main.wide { max-width: var(--wide-width); }

.section {
  padding: 2.75rem 0;
  border-bottom: 1px solid rgba(61, 122, 158, 0.25);
}
.section:last-child { border-bottom: none; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--siren);
  margin-bottom: 0.5rem;
}

.kicker::before { content: '// '; opacity: 0.6; }

.section h2 {
  font-size: 2rem;
  margin-bottom: 0.9rem;
}

.lede {
  color: var(--steel-dim);
  max-width: 62ch;
  font-size: 1.02rem;
}

/* ---------------------------------------------------------------------
   Panels
   --------------------------------------------------------------------- */

.panel {
  background: var(--gunmetal);
  border-left: 3px solid var(--steel);
  padding: 1.25rem 1.5rem;
  position: relative;
}

.panel + .panel { margin-top: 0.85rem; }

.panel-meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--steel-dim);
  margin-top: 0.7rem;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--void);
  background: var(--siren);
  border: none;
  padding: 0.85rem 1.9rem;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.btn:hover { background: var(--siren-hot); color: var(--void); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--bone);
  border: 2px solid var(--steel);
  padding: 0.75rem 1.75rem;
}
.btn-secondary:hover {
  background: var(--steel);
  color: var(--void);
  border-color: var(--steel);
}

/* ---------------------------------------------------------------------
   Stamped rotated slogan — the one loud recurring motif
   --------------------------------------------------------------------- */

.stamp {
  display: inline-block;
  font-family: var(--font-display);
  color: var(--siren);
  border: 3px solid var(--siren);
  padding: 0.4rem 1rem;
  transform: rotate(-4deg);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

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

footer {
  text-align: center;
  padding: 2rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--steel-dim);
  border-top: 3px solid var(--steel);
}

/* ---------------------------------------------------------------------
   Utility
   --------------------------------------------------------------------- */

.empty-state {
  color: var(--steel-dim);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 1.5rem 0;
}

@media (max-width: 640px) {
  .site-header-inner { flex-direction: column; align-items: flex-start; }
  main { padding: 2rem 1.25rem 4rem; }
  .section h2 { font-size: 1.6rem; }
}