/* ==========================================================================
   Quartermaster Site Services
   Single stylesheet. No build step, no framework, no preprocessor.

   Colour works by band. :root holds the light values; .inverse overrides the
   same variable names with dark values. Every component reads the variables,
   so any section can be flipped by adding or removing one class.

   Contents
     1. Tokens
     2. Reset and base
     3. Lockup component  <- the wordmark lives here
     4. Masthead and nav
     5. Hero, ticks, manifest
     6. Bands
     7. Statement band
     8. Record table
     9. Contact band
    10. Footer
    11. Print
   ========================================================================== */


/* 1. TOKENS ================================================================ */

:root {
  --bg:       #EDEEE9;
  --bg-lift:  #F6F7F3;
  --fg:       #14191B;
  --fg-mid:   #454D50;
  --fg-soft:  #5F6765;
  --rule:     #C9CCC4;
  --rule-soft:#DCDED7;
  --accent:   #1F4D5E;

  --flag:    #B4472A;
  --flag-bg: #F3DFD8;

  --sans:   "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --narrow: "Archivo Narrow", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Lockup box. Change these and the wordmark rescales everywhere. */
  --lockup-h: 48px;
  --lockup-name: 1.4375rem;
  --lockup-sub-track: 0.325em;

  --shell:   78rem;
  --measure: 62ch;
}

/* Dark bands. Same variable names, different values. */
.inverse {
  --bg:       #14191B;
  --bg-lift:  #1B2124;
  --fg:       #EDEEE9;
  --fg-mid:   #A9B2B0;
  --fg-soft:  #8A9391;
  --rule:     #2E3639;
  --rule-soft:#232A2D;
  --accent:   #6BA9BC;

  --flag:    #E9835C;
  --flag-bg: #38221A;
}


/* 2. RESET AND BASE ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd { margin: 0; }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #14191B;
  color: #EDEEE9;
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

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

@media (min-width: 40rem) {
  .shell { padding-inline: 2.5rem; }
}


/* 3. LOCKUP COMPONENT ======================================================
   The typographic wordmark. Single point of change when a real logo arrives:
   swap the two spans in index.html for <img class="lockup__img"> and the box
   below keeps its dimensions.
   ========================================================================== */

.lockup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--lockup-h);
  text-decoration: none;
  color: inherit;
  flex: none;
}

.lockup__name {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: var(--lockup-name);
  line-height: 1;
  letter-spacing: 0.028em;
  text-transform: uppercase;
  color: var(--fg);
}

.lockup__sub {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: calc(var(--lockup-name) * 0.405);
  line-height: 1;
  letter-spacing: var(--lockup-sub-track);
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-top: 0.36em;
  margin-right: calc(var(--lockup-sub-track) * -1);
}

/* Pre-styled for the eventual SVG. Drop the img in and it fills the box. */
.lockup__img { display: block; height: 100%; width: auto; }

.lockup--sm { --lockup-h: 42px; --lockup-name: 1.1875rem; }


/* 4. MASTHEAD AND NAV ====================================================== */

.hero-block { background: var(--bg); color: var(--fg); }

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }

.nav a {
  font-family: var(--narrow);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mid);
  text-decoration: none;
  padding-block: 0.375rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a:focus-visible { color: var(--fg); border-bottom-color: var(--accent); }


/* 5. HERO, TICKS, MANIFEST ================================================= */

.hero { padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 8vw, 5.5rem); }

.hero__head {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(3rem, 12.5vw, 8.5rem);
  line-height: 0.88;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  max-width: 13ch;
  text-wrap: balance;
}

.hero__lede {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--fg-mid);
}

/* Measurement ticks. One instance only, as the hero-to-manifest transition. */
.ticks {
  height: 14px;
  border-top: 3px solid var(--accent);
  background-image: repeating-linear-gradient(
    to right,
    var(--rule) 0 1px,
    transparent 1px 14px
  );
}

.manifest__inner {
  display: grid;
  gap: 0;
  padding-block: 0;
}

.manifest__item {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

.manifest__item:first-child { border-top: 0; }

.manifest__name {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.manifest__cadence {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

@media (min-width: 52rem) {
  .manifest__inner { grid-template-columns: repeat(3, 1fr); }
  .manifest__item {
    border-top: 0;
    border-left: 1px solid var(--rule);
    padding-inline: clamp(1.25rem, 2.5vw, 2rem);
    padding-block: clamp(2rem, 3.5vw, 2.75rem);
  }
  .manifest__item:first-child { border-left: 0; padding-left: 0; }
}


/* 6. BANDS ================================================================= */

.band {
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.band--lift { background: var(--bg-lift); }

.band__inner { display: grid; gap: 2rem; }

@media (min-width: 58rem) {
  .band__inner {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 4rem;
  }
}

.band__head {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding-top: 1rem;
  border-top: 3px solid var(--accent);
  max-width: 14ch;
}

.band__body {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.band__body p { color: var(--fg-mid); }

.band__body .lead {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.45;
  color: var(--fg);
}

.entry { padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.entry:first-child { padding-top: 0; border-top: 0; }

.entry__head {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 1.4375rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.fineprint {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-soft);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}


/* 7. STATEMENT BAND ======================================================== */

.band--statement { padding-block: clamp(4rem, 9vw, 7rem); }

.statement {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(1.875rem, 7.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.002em;
  text-transform: uppercase;
}

.statement__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.statement__body p { color: var(--fg-mid); }


/* 8. RECORD TABLE ========================================================== */

.record { border-top: 3px solid var(--accent); width: 100%; }

.record__row {
  display: grid;
  gap: 0.125rem 1.5rem;
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 34rem) {
  .record__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.record dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--fg-soft);
}

.record dd {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}


/* 9. CONTACT BAND ========================================================== */

.band--contact { padding-block: clamp(4rem, 9vw, 7rem); }

.contact__head {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding-top: 1rem;
  border-top: 3px solid var(--accent);
}

.contact__list { margin-top: clamp(2rem, 4vw, 3rem); }

.contact__row {
  display: grid;
  gap: 0.375rem 2rem;
  padding-block: clamp(1rem, 2vw, 1.375rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 46rem) {
  .contact__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.contact__row dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
}

.contact__row dd {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: clamp(1.375rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.contact__row dd a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.contact__note {
  margin-top: 1.75rem;
  max-width: 52ch;
  color: var(--fg-mid);
  font-size: 0.9375rem;
}

.tbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--flag);
  background: var(--flag-bg);
  border: 1px dashed var(--flag);
  border-radius: 2px;
  padding: 0.25rem 0.625rem;
  vertical-align: middle;
}


/* 10. FOOTER =============================================================== */

.foot { background: var(--bg); color: var(--fg); padding-block: 2.75rem; }

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

.foot__legal {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--fg-soft);
}


/* 11. PRINT ================================================================ */

@media print {
  .inverse {
    --bg: #fff; --fg: #000; --fg-mid: #000; --fg-soft: #333;
    --rule: #999; --accent: #000;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip, .nav, .ticks { display: none; }
  .band, .hero, .manifest { break-inside: avoid; padding-block: 1.25rem; }
  .hero__head { font-size: 30pt; }
  .statement { font-size: 20pt; }
  .contact__row dd { font-size: 14pt; }
  a { color: #000; }
}