/**
 * [RS] Rogue Soldiers - Core Styles
 * Global design tokens, resets, typography, containers and shared section primitives.
 */

:root {

  --bg: #0c0c0c;
  --bg-dark: #080808;
  --panel: #101010;
  --panel-light: #141414;

  --text:
    rgba(255,255,255,.86);

  --red: #bd0000;

  --red-bright: #e00000;

  --red-border:
    rgba(189,0,0,.32);

  --red-soft:
    rgba(189,0,0,.08);

  --muted:
    rgba(255,255,255,.48);

  --faint:
    rgba(255,255,255,.25);

  --border:
    rgba(255,255,255,.08);

  --border-soft:
    rgba(255,255,255,.05);

  --container-max:
    1400px;

  /* Shared surfaces and layout rhythm */
  --section-dark: #090909;
  --surface: #0d0d0d;
  --surface-deep: #0b0b0b;
  --surface-soft: rgba(255,255,255,.015);

  --text-soft: rgba(255,255,255,.42);
  --text-dim: rgba(255,255,255,.34);

  --layout-gap: 70px;
  --component-gap: 17px;
  --header-offset: 110px;

  --transition-fast: .2s ease;

}


/* =====================================================
   GLOBAL
====================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    "Inter",
    sans-serif;

  overflow-x: hidden;

}


a {
  color: inherit;
  text-decoration: none;
}


img {
  max-width: 100%;
}


::selection {

  background:
    rgba(189,0,0,.35);

  color: #fff;

}


/* =====================================================
   CONTAINER
====================================================== */

.site-container {

  width:
    min(
      calc(100% - 32px),
      var(--container-max)
    );

  margin-inline: auto;

}


/* =====================================================
   SECTIONS
====================================================== */

.section {

  position: relative;

  padding:
    120px
    0;

}


.section-dark {

  background:
    var(--section-dark);

}


/* =====================================================
   SECTION TYPOGRAPHY
====================================================== */

.section-title {

  margin: 0;

  max-width: 100%;

  color: #fff;

  font-size:
    clamp(
      2.7rem,
      6vw,
      5.5rem
    );

  line-height: .94;

  font-weight: 900;

  letter-spacing: -.05em;

  text-transform: uppercase;

}


.section-kicker {

  display: flex;

  align-items: center;

  gap: 12px;

  max-width: 100%;

  margin-bottom: 24px;

  color:
    var(--red-bright);

  font-size: .70rem;

  font-weight: 800;

  letter-spacing: .28em;

  text-transform: uppercase;

}


.section-kicker::before {

  content: "";

  width: 40px;
  height: 1px;

  flex:
    0
    0
    40px;

  background:
    linear-gradient(
      to right,
      var(--red-bright),
      transparent
    );

}


.lead-copy {

  max-width: 760px;

  color:
    rgba(255,255,255,.54);

  font-size: 1.02rem;

  line-height: 1.85;

}


.section-copy {

  max-width: 760px;

  margin-top: 22px;

  color:
    var(--muted);

  font-size: .94rem;

  line-height: 1.82;

}


/* =====================================================
   RESPONSIVE CORE
====================================================== */

@media (max-width: 767.98px) {

  .section {

    padding:
      85px
      0;

  }


  /*
   * Keep shared section headings fluid on mobile.
   *
   * At a 320px viewport the standard site-container
   * provides 288px of usable width. A 32px/900-weight
   * "STRAIGHTFORWARD." measured 319px wide, so section
   * titles must be allowed to scale below 2rem.
   */

  .section-title {

    font-size:
      clamp(
        1.75rem,
        8.75vw,
        2.7rem
      );

  }


  /*
   * Kickers use wide letter spacing, so reduce their
   * footprint on mobile as well.
   */

  .section-kicker {

    gap: 9px;

    font-size: .62rem;

    letter-spacing: .20em;

  }


  .section-kicker::before {

    width: 28px;

    flex-basis: 28px;

  }

}


/* =====================================================
   EXTRA SMALL SCREENS
====================================================== */

@media (max-width: 374.98px) {

  .section-kicker {

    font-size: .58rem;

    letter-spacing: .16em;

  }

}