/* ==========================================================================
   5th Brigade, Texas Division SCV - 2026 refresh
   Maintained by Digital Pipelines, LLC (https://digitalpipelines.net)
   Single stylesheet. No external fonts, no frameworks, no tracking.
   ========================================================================== */

:root{
  --navy:#101c3d;
  --navy-deep:#0a122a;
  --navy-soft:#1b2c56;
  --gold:#b0862f;
  --gold-light:#d9ad55;
  --crimson:#7c1f26;
  --paper:#f6f4ef;
  --paper-alt:#ece8de;
  --ink:#24262b;
  --ink-soft:#54585f;
  --line:#d8d2c5;
  --white:#fff;
  --shadow:0 1px 2px rgba(16,28,61,.06),0 8px 24px rgba(16,28,61,.08);
  --shadow-lg:0 2px 4px rgba(16,28,61,.08),0 18px 48px rgba(16,28,61,.14);
  --wrap:1140px;
  --radius:4px;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%}
.wrap,.content,.hero,.pagehead{min-width:0}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 var(--sans);
}
img{max-width:100%;height:auto}
a{color:var(--navy-soft)}
a:hover{color:var(--crimson)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--white);padding:10px 14px;z-index:999}

/* ---------- masthead ---------------------------------------------------- */
.masthead{background:var(--navy);color:var(--white);border-bottom:3px solid var(--gold)}
.masthead .wrap{
  display:flex;align-items:center;gap:20px;
  padding-top:14px;padding-bottom:14px;
}
.masthead .crest{flex:0 0 auto}
.masthead .crest img{display:block;width:64px;height:64px}
.masthead .wordmark{flex:1 1 auto;min-width:0;text-decoration:none;color:inherit}
.masthead .wordmark .kicker{
  display:block;font:600 11px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-light);margin-bottom:6px;
}
.masthead .wordmark .title{
  display:block;font:700 clamp(19px,3.4vw,30px)/1.15 var(--serif);letter-spacing:.01em;
}
.masthead .wordmark .sub{
  display:block;font-size:12.5px;color:#b9c2d8;margin-top:4px;letter-spacing:.04em;
}

/* ---------- navigation -------------------------------------------------- */
.mainnav{background:var(--navy-deep);position:relative;z-index:50}
.mainnav ul{list-style:none;margin:0;padding:0}
.mainnav > .wrap{display:flex;align-items:center;padding:0}
.navtoggle{
  display:none;background:none;border:0;color:var(--white);
  font:600 15px/1 var(--sans);padding:14px 4px;cursor:pointer;gap:9px;align-items:center;
}
.navtoggle .bars{display:inline-block;width:18px;height:2px;background:currentColor;position:relative}
.navtoggle .bars::before,.navtoggle .bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
}
.navtoggle .bars::before{top:-6px}.navtoggle .bars::after{top:6px}
.navlist{display:flex;flex-wrap:wrap}
.navlist > li{position:relative}
.navlist > li > a{
  display:block;padding:15px 16px;color:#e8ebf3;text-decoration:none;
  font:600 13.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:3px solid transparent;
}
.navlist > li > a:hover,.navlist > li:focus-within > a{background:var(--navy-soft);color:var(--white)}
.navlist > li.current > a{border-bottom-color:var(--gold);color:var(--white)}
.navlist li ul{
  position:absolute;left:0;top:100%;min-width:230px;background:var(--white);
  box-shadow:var(--shadow-lg);border-top:3px solid var(--gold);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s ease;
}
.navlist li:hover > ul,.navlist li:focus-within > ul{opacity:1;visibility:visible;transform:none}
.navlist li ul a{
  display:block;padding:11px 16px;color:var(--ink);text-decoration:none;font-size:14.5px;
  border-bottom:1px solid var(--line);
}
.navlist li ul li:last-child a{border-bottom:0}
.navlist li ul a:hover{background:var(--paper-alt);color:var(--crimson)}
.navlist .has-sub > a::after{content:" \25BE";font-size:10px;opacity:.75}

/* ---------- hero -------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--white);text-align:center;padding:64px 0 56px;
}
.hero .emblem{width:min(300px,72vw);height:auto;margin:0 auto 26px;display:block}
.hero h1{
  font:700 clamp(23px,6vw,46px)/1.18 var(--serif);margin:0 0 14px;letter-spacing:.01em;
  overflow-wrap:break-word;

}
.hero .lede{
  max-width:680px;margin:0 auto;color:#c6cee1;font-size:17.5px;line-height:1.7;
}
.hero .rule{width:70px;height:3px;background:var(--gold);margin:22px auto 26px;border:0}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:6px}

.btn{
  display:inline-block;padding:13px 26px;border-radius:var(--radius);text-decoration:none;
  font:600 14px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  border:2px solid transparent;transition:.15s ease;cursor:pointer;
}
.btn-gold{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:#1a1405}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-soft);border-color:var(--navy-soft);color:var(--white)}

/* ---------- page banner (interior pages) -------------------------------- */
.pagehead{
  background:var(--navy);color:var(--white);padding:34px 0;border-bottom:3px solid var(--gold);
}
.pagehead h1{margin:0;font:700 clamp(24px,4vw,36px)/1.2 var(--serif)}
.pagehead .crumbs{margin:9px 0 0;font-size:13px;color:#b9c2d8;letter-spacing:.04em}
.pagehead .crumbs a{color:var(--gold-light);text-decoration:none}
.pagehead .crumbs a:hover{text-decoration:underline}

/* ---------- sections ---------------------------------------------------- */
.section{padding:56px 0}
.section-alt{background:var(--paper-alt)}
.section-navy{background:var(--navy);color:var(--white)}
.section-navy a{color:var(--gold-light)}
.section h2{
  font:700 clamp(22px,3.2vw,31px)/1.25 var(--serif);margin:0 0 8px;color:var(--navy);
}
.section-navy h2{color:var(--white)}
.section .eyebrow{
  font:600 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;
}
.section > .wrap > p{max-width:76ch}
.center{text-align:center}
.center > p{margin-left:auto;margin-right:auto}

/* ---------- cards ------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;margin-top:30px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.card h3{margin:0 0 10px;font:700 19px/1.3 var(--serif);color:var(--navy)}
.card p{margin:0 0 18px;color:var(--ink-soft);font-size:15.5px}
.card .more{
  margin-top:auto;font:600 13px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--crimson);text-decoration:none;
}
.card .more:hover{text-decoration:underline}
.card .icon{
  width:42px;height:42px;border-radius:50%;background:var(--paper-alt);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font:700 18px/1 var(--serif);
  margin-bottom:16px;border:1px solid var(--line);
}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;background:var(--line)}
.stats div{background:var(--white);padding:26px 18px;text-align:center}
.stats .n{display:block;font:700 34px/1 var(--serif);color:var(--navy)}
.stats .l{
  display:block;margin-top:8px;font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* the Charge */
.charge{
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:32px 34px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 168px;gap:30px;align-items:start;
}
.charge blockquote{margin:0;font:italic 18.5px/1.75 var(--serif);color:var(--ink)}
.charge cite{display:block;margin-top:16px;font:400 14px/1.6 var(--sans);color:var(--ink-soft);font-style:normal}
.charge img{border-radius:var(--radius);border:1px solid var(--line)}

/* ---------- interior content ------------------------------------------- */
.content{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 38px;box-shadow:var(--shadow);margin:40px 0}
.content > :first-child{margin-top:0}
.content > :last-child{margin-bottom:0}
.content h1{font:700 clamp(23px,3.6vw,32px)/1.25 var(--serif);color:var(--navy);margin:0 0 18px}
.content h2{font:700 22px/1.3 var(--serif);color:var(--navy);margin:34px 0 12px}
.content h3{font:700 18px/1.35 var(--serif);color:var(--navy-soft);margin:26px 0 10px}
.content p{margin:0 0 15px}
.content hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.content ul,.content ol{padding-left:22px}
.content li{margin-bottom:7px}

/* neutralise the legacy 2014 markup that still lives inside page bodies */
.content font{font-size:inherit !important;color:inherit !important;font-family:inherit !important}
.content table{border-collapse:collapse;width:auto;max-width:100%;margin:0 0 20px;background:transparent !important;border:0 !important}
.content table td{padding-right:26px}
.content table tr+tr td{border-top:1px solid var(--line)}
.content table td,.content table th{border:0;padding:9px 10px;vertical-align:top;text-align:left}
.content table[border]{border:0 !important}
.content > div[align],.content div[align="center"]{text-align:left !important}
.content img[align="right"]{float:right;margin:0 0 16px 22px}
.content img[align="left"]{float:left;margin:0 22px 16px 0}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- footer ------------------------------------------------------ */
.sitefoot{background:var(--navy-deep);color:#c2cadd;margin-top:10px;
  border-top:3px solid var(--gold);font-size:14.5px}
.sitefoot .cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:34px;padding:46px 0 34px;
}
.sitefoot h4{
  margin:0 0 14px;font:600 11.5px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-light);
}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin-bottom:9px}
.sitefoot a{color:#c2cadd;text-decoration:none}
.sitefoot a:hover{color:var(--white);text-decoration:underline}
.sitefoot .legal{
  border-top:1px solid rgba(255,255,255,.12);padding:20px 0 30px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:13px;color:#8e99b4;
}
.flagstrip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.flagstrip img{height:34px;width:auto;border:1px solid rgba(255,255,255,.18)}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:860px){
  .charge{grid-template-columns:1fr}
  .charge img{justify-self:center}
  .content{padding:26px 20px}
  .masthead .wordmark .sub{display:none}
}
@media (max-width:760px){
  .navtoggle{display:flex}
  .navlist{
    display:none;flex-direction:column;width:100%;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .mainnav > .wrap{flex-direction:column;align-items:stretch}
  .mainnav.open .navlist{display:flex}
  .navlist > li > a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  .navlist li ul{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border-top:0;min-width:0;
  }
  .navlist li ul a{color:#c2cadd;border-bottom:1px solid rgba(255,255,255,.06);padding-left:20px}
  .navlist li ul a:hover{background:rgba(255,255,255,.06);color:var(--white)}
  .navlist .has-sub > a::after{content:""}
  .hero{padding:44px 0 40px}
  .section{padding:42px 0}
}
@media print{
  .mainnav,.hero .cta-row,.sitefoot .cols{display:none}
  body{background:#fff}
  .content{border:0;box-shadow:none;padding:0}
}

/* ---------- nav: the Join call to action -------------------------------- */
.navlist .join{margin-left:auto}
.navlist .join > a{
  background:var(--gold);color:#1a1405;margin:8px 0 8px 10px;padding:11px 20px;
  border-radius:var(--radius);border-bottom:0;
}
.navlist .join > a:hover{background:var(--gold-light);color:#1a1405}
@media (max-width:760px){
  .navlist .join{margin-left:0}
  .navlist .join > a{margin:10px 0;text-align:center}
}

/* legacy table cells that used to rely on nowrap / fixed widths */
.content table td strong{font-weight:600}
.content table img{border-radius:3px}
.content td:first-child img{max-width:96px}