/* =====================================================================
   VARIANT: Muncie — "Utility Blue"
   ---------------------------------------------------------------------
   Direction: industrial-practical. Cool slate blue, tight radii, hard
   rules, condensed sans display. Reads like a working restoration crew
   rather than a marketing brochure. Densest of the three layouts.

   Load AFTER tokens.css, BEFORE base.css:
     <link rel="stylesheet" href="../_shared/css/tokens.css">
     <link rel="stylesheet" href="../_shared/css/variants/muncie.css">
     <link rel="stylesheet" href="../_shared/css/base.css">
     <link rel="stylesheet" href="../_shared/css/components.css">

   Only tokens and documented hooks are overridden here — no component
   rewrites, so shared updates keep flowing through.
   ===================================================================== */

:root {
  /* Brand: cool slate blue */
  --brand-050: #eef3f7;
  --brand-100: #d3e0ea;
  --brand-300: #86a5bd;
  --brand-500: #2e5b7a;
  --brand-700: #1b3b52;
  --brand-900: #0f2432;

  /* Urgent: signal red-orange, high contrast against the slate */
  --urgent-100: #fce0d5;
  --urgent-500: #c33f16;
  --urgent-600: #a53310;
  --urgent-700: #7d260b;

  /* Slightly cool neutrals to sit with the slate */
  --ink-900: #14181c;
  --ink-700: #313840;
  --ink-500: #59626c;
  --ink-300: #97a1ab;
  --ink-150: #d5dbe1;
  --ink-075: #ebeef1;
  --paper: #ffffff;
  --paper-alt: #f4f6f8;

  /* Type: condensed grotesque display, neutral sans body */
  --font-display: "Archivo Narrow", "Arial Narrow", "Helvetica Neue Condensed", Impact, system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);
  --fw-display: 700;
  --tracking-display: 0.005em;

  /* Form: tight, engineered */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --btn-radius: 3px;
  --btn-transform: uppercase;
  --btn-tracking: 0.06em;
  --brand-mark-radius: 3px;
  --card-radius: 4px;
  --card-border: 1px solid var(--ink-150);
  --card-shadow: none;

  /* Denser rhythm than the other two cities */
  --section-y: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --wrap: 1120px;

  /* Hero: hard vertical gradient, no softness */
  --hero-overlay: linear-gradient(180deg, rgba(15,36,50,0.62) 0%, rgba(15,36,50,0.86) 100%);
  --callpanel-bg: var(--brand-050);

  /* Faint diagonal hatch, kept under 4% so text contrast is untouched */
  --surface-texture:
    repeating-linear-gradient(135deg, rgba(46,91,122,0.030) 0 2px, transparent 2px 9px);
}

/* Muncie hook: section headings sit above a short accent rule. */
.section > .wrap > h2:first-child,
.section > .wrap > .u-center > h2 {
  padding-top: var(--s-3);
  border-top: 4px solid var(--c-action);
  display: inline-block;
}

/* Muncie hook: steps use a solid left bar instead of the shared top rule. */
.steps li {
  border-top: 0;
  border-left: 4px solid var(--brand-500);
  padding: 0 0 0 var(--s-4);
}

/* Muncie hook: squared placeholder frames to match the tight radii. */
.ph { border-radius: 4px; }

/* Muncie-only compact logo mark, cropped visually from the preserved source PNG. */
.brand__mark--logo {
  background: var(--paper);
  overflow: hidden;
  padding: 3px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-rule);
}

.brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* Muncie-only source imagery: originals remain intact in assets/originals. */
.muncie-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}