/* reset */
/* --- minimal reset (the artifact host normally supplies this) --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; }
img,canvas{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }

/* ==========================================================
   LOW T OPERATORS  —  FIELD MANUAL / GEOCITIES HYBRID
   ========================================================== */

:root{
  --bg:        #B3A87C;
  --camo1:#B3A87C; --camo2:#9A9068; --camo3:#6E7443; --camo4:#4A5320;
  --panel:     #E9E1C4;
  --panel-alt: #D6CBA2;
  --text:      #15170E;
  --dim:       #5C5A42;
  --rule:      #15170E;
  --accent:    #D4460F;
  --mil:       #48521F;
  --warn:      #8B2E17;
  --good:      #2F6B2A;
  --shadow:    rgba(21,23,14,.95);
  --bevel-lt:  #FFFBE8;
  --bevel-dk:  #8C8360;
  --tape:      #C9B24A;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:      #060806;
    --camo1:#060806; --camo2:#0C130C; --camo3:#12200F; --camo4:#1B2E16;
    --panel:     #0C110C;
    --panel-alt: #121A12;
    --text:      #A4E4A8;
    --dim:       #588A5C;
    --rule:      #2E5C33;
    --accent:    #FF6A26;
    --mil:       #35F05F;
    --warn:      #FF4530;
    --good:      #35F05F;
    --shadow:    rgba(0,0,0,.95);
    --bevel-lt:  #2C5A31;
    --bevel-dk:  #0A140A;
    --tape:      #6E6A24;
  }
}
:root[data-theme="light"]{
  --bg:#B3A87C; --camo1:#B3A87C; --camo2:#9A9068; --camo3:#6E7443; --camo4:#4A5320;
  --panel:#E9E1C4; --panel-alt:#D6CBA2; --text:#15170E; --dim:#5C5A42;
  --rule:#15170E; --accent:#D4460F; --mil:#48521F; --warn:#8B2E17; --good:#2F6B2A;
  --shadow:rgba(21,23,14,.95); --bevel-lt:#FFFBE8; --bevel-dk:#8C8360; --tape:#C9B24A;
}
:root[data-theme="dark"]{
  --bg:#060806; --camo1:#060806; --camo2:#0C130C; --camo3:#12200F; --camo4:#1B2E16;
  --panel:#0C110C; --panel-alt:#121A12; --text:#A4E4A8; --dim:#588A5C;
  --rule:#2E5C33; --accent:#FF6A26; --mil:#35F05F; --warn:#FF4530; --good:#35F05F;
  --shadow:rgba(0,0,0,.95); --bevel-lt:#2C5A31; --bevel-dk:#0A140A; --tape:#6E6A24;
}

/* ---------- base ---------- */
.lto{
  --disp: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", sans-serif;
  --body: Verdana, Geneva, Tahoma, sans-serif;
  --mono: "Courier New", Courier, monospace;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  min-height:100vh;
  padding:0 0 40px;
  position:relative;
  overflow-x:hidden;
}
.camo-bed{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--bg);
  background-repeat:repeat;
  image-rendering:pixelated;
  opacity:.9;
}
.scan{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.5;
}
:root[data-theme="dark"] .scan{ mix-blend-mode:normal; opacity:.35; }
@media (prefers-color-scheme: dark){ .scan{ mix-blend-mode:normal; opacity:.35; } }

.wrap{ position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:12px; }

/* ---------- shared panel ---------- */
.panel{
  background:var(--panel);
  border:3px solid var(--rule);
  box-shadow:5px 5px 0 var(--shadow);
  padding:14px;
  margin:0;
  position:relative;
}
.panel-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  background:var(--rule); color:var(--panel);
  margin:-14px -14px 12px; padding:5px 10px;
  font-family:var(--mono); font-size:11px; font-weight:bold;
  letter-spacing:.14em; text-transform:uppercase;
}
:root[data-theme="dark"] .panel-hd{ background:var(--mil); color:#050805; }
@media (prefers-color-scheme: dark){ .panel-hd{ background:var(--mil); color:#050805; } }
.form-no{ font-weight:normal; opacity:.85; letter-spacing:.08em; white-space:nowrap; }
.panel h2{
  font-family:var(--disp); font-size:30px; line-height:.95; letter-spacing:.02em;
  text-transform:uppercase; margin:0 0 4px; text-wrap:balance;
}
.panel h3{
  font-family:var(--disp); font-size:19px; letter-spacing:.03em;
  text-transform:uppercase; margin:0 0 6px;
}
.lead{ font-size:13px; color:var(--dim); margin:0 0 12px; max-width:62ch; }

/* ---------- banner ---------- */
.banner{
  background:var(--rule); color:var(--panel);
  border:3px solid var(--rule); box-shadow:5px 5px 0 var(--shadow);
  padding:0; margin-bottom:12px; overflow:hidden;
}
:root[data-theme="dark"] .banner{ background:#000; color:var(--mil); border-color:var(--mil); }
@media (prefers-color-scheme: dark){ .banner{ background:#000; color:var(--mil); border-color:var(--mil);} }
.banner-top{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:4px 10px; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  border-bottom:2px solid currentColor; text-transform:uppercase;
}
.banner-core{ padding:16px 14px 12px; text-align:center; }
.wordmark{
  font-family:var(--disp); text-transform:uppercase; line-height:.82;
  font-size:clamp(44px,11vw,116px); letter-spacing:-.01em;
  margin:0; text-wrap:balance;
  color:var(--panel);
  text-shadow:4px 4px 0 var(--accent), 8px 8px 0 rgba(0,0,0,.55);
}
:root[data-theme="dark"] .wordmark{ color:var(--mil); text-shadow:4px 4px 0 var(--accent), 0 0 24px rgba(53,240,95,.35); }
@media (prefers-color-scheme: dark){ .wordmark{ color:var(--mil); text-shadow:4px 4px 0 var(--accent), 0 0 24px rgba(53,240,95,.35);} }
.wordmark .t{ color:var(--accent); text-shadow:4px 4px 0 rgba(0,0,0,.6); }
.motto{
  font-family:var(--mono); font-size:clamp(10px,2.2vw,13px);
  letter-spacing:.34em; text-transform:uppercase; margin:10px 0 0; opacity:.9;
}
.est{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  margin:6px 0 0; opacity:.65; text-transform:uppercase;
}
.strike{ text-decoration:line-through; }

/* marquee (css, not the tag — same look, respects reduced motion) */
.marquee{
  border-top:2px solid currentColor;
  /* #000 not #0B0B06: measures 4.68:1 on the accent, clearing WCAG AA (4.5) */
  background:var(--accent); color:#000;
  overflow:hidden; white-space:nowrap;
  font-family:var(--mono); font-weight:bold; font-size:12px; letter-spacing:.1em;
  padding:4px 0; text-transform:uppercase;
}
.marquee-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee-run{ display:block; padding-right:2em; flex:0 0 auto; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------- construction bar ---------- */
.construction{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:3px solid var(--rule); box-shadow:5px 5px 0 var(--shadow);
  background:repeating-linear-gradient(45deg,var(--tape) 0 14px,var(--rule) 14px 28px);
  padding:8px 12px; margin-bottom:12px;
}
.construction b{
  background:var(--panel); color:var(--text); border:2px solid var(--rule);
  padding:3px 9px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- layout ---------- */
.cols{ display:grid; grid-template-columns:206px minmax(0,1fr); gap:12px; align-items:start; }
@media (max-width:820px){ .cols{ grid-template-columns:1fr; } }
.rail{ display:flex; flex-direction:column; gap:12px; position:sticky; top:12px; }
@media (max-width:820px){ .rail{ position:static; } }
.main{ display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ---------- nav ---------- */
.nav{ display:flex; flex-direction:column; gap:5px; }
.nav a{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  background:var(--panel-alt); color:var(--text); text-decoration:none;
  border:2px solid var(--rule);
  border-top-color:var(--bevel-lt); border-left-color:var(--bevel-lt);
  border-right-color:var(--bevel-dk); border-bottom-color:var(--bevel-dk);
  padding:5px 8px;
  font-family:var(--mono); font-size:11px; font-weight:bold;
  letter-spacing:.06em; text-transform:uppercase;
}
.nav a:hover{ background:var(--accent); color:#0B0B06; }
.nav a:active{
  border-top-color:var(--bevel-dk); border-left-color:var(--bevel-dk);
  border-right-color:var(--bevel-lt); border-bottom-color:var(--bevel-lt);
  transform:translate(1px,1px);
}
.nav a span{ opacity:.5; font-weight:normal; }
.nav a:hover span{ opacity:.8; }

/* ---------- gauge ---------- */
.gauge-val{
  font-family:var(--disp); font-size:38px; line-height:1; color:var(--accent);
  display:flex; align-items:baseline; gap:5px;
}
.gauge-val small{ font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.1em; }
.bars{ display:flex; gap:2px; margin:8px 0 6px; }
.bars i{ flex:1; height:16px; border:2px solid var(--rule); background:var(--panel-alt); }
.bars i.on{ background:var(--accent); }
.bars i.crit{ background:var(--warn); }
.tiny{ font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.06em; line-height:1.5; }

/* ---------- counter ---------- */
.counter{ display:flex; gap:2px; justify-content:center; margin:6px 0 8px; }
.counter b{
  background:#08090A; color:#4CE05F; border:2px solid var(--rule);
  font-family:var(--mono); font-size:21px; font-weight:bold;
  padding:2px 5px; min-width:19px; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ---------- news ---------- */
.news{ display:flex; flex-direction:column; gap:10px; }
.post{ border-left:6px solid var(--accent); padding:0 0 0 10px; }
.post .meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:2px;
}
.post p{ margin:0; font-size:13px; }
.post .hl{ font-family:var(--disp); font-size:17px; letter-spacing:.02em; text-transform:uppercase; }

/* ---------- roster ---------- */
.roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:12px; }
.dossier{
  border:3px solid var(--rule); background:var(--panel-alt);
  box-shadow:4px 4px 0 var(--shadow);
  display:flex; flex-direction:column;
}
.dossier:hover{ box-shadow:4px 4px 0 var(--accent); }
.dos-hd{
  display:flex; gap:10px; align-items:stretch;
  border-bottom:3px solid var(--rule); background:var(--panel); padding:8px;
}
.mug{
  width:64px; flex:0 0 64px; border:2px solid var(--rule);
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),var(--rule) 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom left ,transparent calc(50% - 1px),var(--rule) 50%,transparent calc(50% + 1px)),
    var(--panel-alt);
  display:flex; align-items:flex-end; justify-content:center;
  font-family:var(--mono); font-size:7px; letter-spacing:.06em;
  text-align:center; color:var(--dim); padding:2px; min-height:80px;
}
.mug.has{
  background:var(--mil);
  color:var(--panel); align-items:center; font-family:var(--disp); font-size:30px; letter-spacing:.04em;
}
.mug.photo{ background:#CFCABA; padding:0; position:relative; overflow:hidden; }
.mug.photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.22) brightness(1.04);
}
.mug.photo::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
}
.founder{
  display:inline-block; background:var(--accent); color:#0B0B06;
  border:2px solid var(--rule); padding:0 5px; margin-left:4px;
  font-family:var(--mono); font-size:8px; font-weight:bold; letter-spacing:.1em; vertical-align:2px;
}
:root[data-theme="dark"] .mug.has{ color:#050805; }
@media (prefers-color-scheme: dark){ .mug.has{ color:#050805; } }
.dos-id{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.callsign{
  font-family:var(--disp); font-size:29px; line-height:.9; letter-spacing:.01em;
  text-transform:uppercase; word-break:break-word;
}
.realname{ font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.08em; }
.status{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  border:2px solid var(--rule); padding:1px 6px; margin-top:3px;
  font-family:var(--mono); font-size:9px; font-weight:bold;
  letter-spacing:.1em; text-transform:uppercase; background:var(--panel-alt);
}
.dot{ width:7px; height:7px; background:var(--good); display:inline-block; }
.dot.amber{ background:var(--tape); animation:blink 1.1s steps(1) infinite; }
.dot.red{ background:var(--warn); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

.dos-body{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:1px; }
.row{ display:flex; align-items:baseline; gap:4px; font-family:var(--mono); font-size:11px; }
.row .k{ color:var(--dim); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.row .fill{ flex:1; border-bottom:1px dotted var(--dim); min-width:8px; transform:translateY(-3px); }
.row .v{ text-align:right; font-weight:bold; }
.row .v.bad{ color:var(--warn); }
.tbar{ display:flex; gap:1px; margin:7px 0 2px; }
.tbar i{ flex:1; height:9px; border:1px solid var(--rule); background:var(--panel); }
.tbar i.on{ background:var(--accent); }
.note{
  margin-top:8px; border-top:2px dashed var(--rule); padding-top:6px;
  font-size:11.5px; font-style:italic; color:var(--dim); line-height:1.45;
}

/* ---------- record ---------- */
.record-big{
  font-family:var(--disp); font-size:clamp(56px,13vw,104px); line-height:.85;
  text-align:center; letter-spacing:-.02em; color:var(--warn);
  text-shadow:5px 5px 0 var(--shadow);
}
.record-sub{
  text-align:center; font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin:6px 0 14px;
}
.aar{ display:flex; flex-direction:column; gap:0; border:2px solid var(--rule); }
.aar div{
  display:flex; gap:10px; justify-content:space-between; align-items:baseline;
  padding:6px 9px; font-family:var(--mono); font-size:11.5px;
  border-bottom:1px solid var(--rule);
}
.aar div:last-child{ border-bottom:0; }
.aar div:nth-child(odd){ background:var(--panel-alt); }
.aar em{ color:var(--dim); font-style:normal; text-align:right; }
.aar b{ color:var(--warn); white-space:nowrap; }

/* ---------- medals ---------- */
.medals{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:10px; }
.medal{
  border:2px solid var(--rule); background:var(--panel-alt);
  padding:8px; display:flex; gap:8px; align-items:flex-start;
}
.ribbon{
  width:34px; flex:0 0 34px; height:26px; border:2px solid var(--rule);
}
.medal b{ font-family:var(--disp); font-size:14px; letter-spacing:.03em; text-transform:uppercase; display:block; line-height:1.1; }
.medal span{ font-family:var(--mono); font-size:10px; color:var(--dim); line-height:1.4; }

/* ---------- quotes ---------- */
.quote-box{
  border:3px double var(--rule); background:var(--panel-alt);
  padding:16px; text-align:center; min-height:112px;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.quote-txt{ font-family:var(--disp); font-size:clamp(19px,3.4vw,29px); line-height:1.06; letter-spacing:.01em; text-wrap:balance; }
.quote-src{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.btn{
  background:var(--accent); color:#0B0B06; border:3px solid var(--rule);
  border-top-color:var(--bevel-lt); border-left-color:var(--bevel-lt);
  font-family:var(--disp); font-size:17px; letter-spacing:.07em; text-transform:uppercase;
  padding:7px 18px; cursor:pointer; box-shadow:3px 3px 0 var(--shadow);
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.center{ text-align:center; margin-top:12px; }

/* ---------- afk ---------- */
.afk{ display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:10px; }
.stone{
  border:3px solid var(--rule); background:var(--panel-alt);
  padding:12px 10px; text-align:center;
}
.stone b{ font-family:var(--disp); font-size:22px; text-transform:uppercase; letter-spacing:.02em; display:block; }
.stone .yr{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim); margin:2px 0 6px; }
.stone .cause{ font-size:11.5px; font-style:italic; color:var(--text); }

/* ---------- form ---------- */
.fields{ display:flex; flex-direction:column; gap:9px; }
.field label{
  display:block; font-family:var(--mono); font-size:10px; font-weight:bold;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; color:var(--dim);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select, .field textarea{
  width:100%; background:var(--panel); color:var(--text);
  border:2px solid var(--rule);
  border-top-color:var(--bevel-dk); border-left-color:var(--bevel-dk);
  border-right-color:var(--bevel-lt); border-bottom-color:var(--bevel-lt);
  font-family:var(--mono); font-size:12.5px; padding:6px 7px;
}
.field textarea{ min-height:64px; resize:vertical; }
.checks{ display:flex; flex-direction:column; gap:4px; font-family:var(--mono); font-size:11.5px; }
.checks label{ display:flex; gap:7px; align-items:flex-start; cursor:pointer; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media (max-width:560px){ .two{ grid-template-columns:1fr; } }

/* ---------- guestbook ---------- */
.gb{ display:flex; flex-direction:column; gap:9px; }
.entry{ border:2px solid var(--rule); background:var(--panel-alt); padding:8px 10px; }
.entry .who{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); margin-bottom:3px;
}
.entry .who b{ color:var(--accent); }
.entry p{ margin:0; font-size:12.5px; }

/* ---------- morale note ---------- */
.sticky{
  font-family:"Comic Sans MS","Comic Sans",cursive,var(--body);
  background:var(--tape); color:#1A1608;
  border:2px solid var(--rule); box-shadow:4px 4px 0 var(--shadow);
  padding:12px 14px; font-size:14px; transform:rotate(-1.2deg); margin:4px 0;
}
.sticky b{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }

/* ---------- footer ---------- */
.ring{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; font-family:var(--mono); font-size:11px; }
.ring a{ color:var(--accent); display:inline-block; padding:5px 7px; }
.buttons{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:12px 0; }
.b88{
  width:88px; height:31px; border:2px solid var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:8px; font-weight:bold; line-height:1.1;
  text-align:center; letter-spacing:.04em; text-decoration:none; padding:1px;
}
.b88.dead{ opacity:.45; text-decoration:line-through; }
.footnote{
  text-align:center; font-family:var(--mono); font-size:10px; color:var(--dim);
  letter-spacing:.08em; line-height:1.7; margin-top:14px;
}
.blinky{ animation:blink 1.05s steps(1) infinite; color:var(--warn); font-weight:bold; }

/* ---------- theme switch ---------- */
.opswitch{ display:flex; gap:0; }
.opswitch button{
  flex:1; background:var(--panel-alt); color:var(--text);
  border:2px solid var(--rule);
  font-family:var(--mono); font-size:10px; font-weight:bold;
  letter-spacing:.08em; text-transform:uppercase; padding:6px 4px; cursor:pointer;
}
.opswitch button[aria-pressed="true"]{ background:var(--mil); color:var(--panel); }
:root[data-theme="dark"] .opswitch button[aria-pressed="true"]{ color:#050805; }
@media (prefers-color-scheme: dark){ .opswitch button[aria-pressed="true"]{ color:#050805; } }

/* ---------- hero additions ---------- */
.subopt{
  font-family:var(--disp); text-transform:uppercase; line-height:1;
  font-size:clamp(15px,3.2vw,26px); letter-spacing:.03em;
  margin:12px 0 6px; color:var(--accent); text-wrap:balance;
}

/* ---------- tech grid (night ops only) ---------- */
.gridlay{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background-image:
    linear-gradient(var(--mil) 1px, transparent 1px),
    linear-gradient(90deg, var(--mil) 1px, transparent 1px);
  background-size:52px 52px;
}
:root[data-theme="dark"] .gridlay{ opacity:.09; }
@media (prefers-color-scheme: dark){ .gridlay{ opacity:.09; } }
:root[data-theme="light"] .gridlay{ opacity:0; }

/* ---------- mission stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.stat{ border:2px solid var(--rule); background:var(--panel-alt); padding:10px; text-align:center; }
.stat b{
  display:block; font-family:var(--disp); font-size:clamp(28px,5vw,40px);
  line-height:1; color:var(--accent); font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-top:5px; line-height:1.4;
}

/* ---------- SOP ---------- */
.sop{ list-style:none; counter-reset:sop; display:flex; flex-direction:column; gap:0; border:2px solid var(--rule); }
.sop li{
  counter-increment:sop; display:flex; gap:12px; align-items:flex-start;
  padding:10px 12px; border-bottom:1px solid var(--rule);
}
.sop li:last-child{ border-bottom:0; }
.sop li:nth-child(even){ background:var(--panel-alt); }
.sop li::before{
  content:"SOP " counter(sop); flex:0 0 auto;
  font-family:var(--mono); font-size:10px; font-weight:bold; letter-spacing:.08em;
  background:var(--rule); color:var(--panel); padding:3px 7px; margin-top:2px; white-space:nowrap;
}
:root[data-theme="dark"] .sop li::before{ background:var(--mil); color:#050805; }
@media (prefers-color-scheme: dark){ .sop li::before{ background:var(--mil); color:#050805; } }
.sop b{ font-family:var(--disp); font-size:16px; letter-spacing:.03em; text-transform:uppercase; display:block; }
.sop p{ font-size:12.5px; margin-top:2px; }

/* ---------- PX / store ---------- */
.px{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:12px; }
.px-item{ border:3px solid var(--rule); background:var(--panel-alt); display:flex; flex-direction:column; box-shadow:4px 4px 0 var(--shadow); }
.px-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; background:var(--panel); border-bottom:2px solid var(--rule); padding:5px 8px; }
.sku{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--dim); }
.px-tag{
  font-family:var(--mono); font-size:9px; font-weight:bold; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 6px; border:2px solid var(--rule); white-space:nowrap;
}
.px-tag.out{ background:var(--warn); color:#FFF3EC; }
.px-tag.back{ background:var(--tape); color:#1A1608; }
.px-tag.in{ background:var(--good); color:#03120A; }

/* product photo: on-theme half-tone treatment, restored on hover */
.shot{
  position:relative; background:#fff; border-bottom:2px solid var(--rule);
  aspect-ratio:4/3; overflow:hidden;
}
.shot img{
  width:100%; height:100%; object-fit:contain; padding:8px; display:block;
  filter:saturate(.55) contrast(1.12);
  transition:filter .18s steps(3);
}
.px-item:hover .shot img{ filter:none; }
:root[data-theme="dark"] .shot{ background:#D8D4C4; }
@media (prefers-color-scheme: dark){ .shot{ background:#D8D4C4; } }
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px);
}
.shot .oos{
  position:absolute; top:50%; left:-14%; right:-14%; transform:translateY(-50%) rotate(-11deg);
  background:var(--warn); color:#FFF3EC; border-top:3px solid var(--rule); border-bottom:3px solid var(--rule);
  font-family:var(--disp); font-size:22px; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; padding:3px 0; opacity:.93;
}

.px-body{ padding:9px 10px 10px; display:flex; flex-direction:column; gap:4px; flex:1; }
.px-body b{ font-family:var(--disp); font-size:18px; line-height:1.05; letter-spacing:.02em; text-transform:uppercase; }
.nsn{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--dim); }
.px-body p{ font-size:11.5px; color:var(--dim); line-height:1.45; flex:1; margin-top:3px; }
.px-buy{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.price{ font-family:var(--mono); font-size:17px; font-weight:bold; color:var(--accent); font-variant-numeric:tabular-nums; }
.add{
  background:var(--mil); color:var(--panel); border:2px solid var(--rule);
  border-top-color:var(--bevel-lt); border-left-color:var(--bevel-lt);
  font-family:var(--mono); font-size:10px; font-weight:bold; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 9px; cursor:pointer; white-space:nowrap;
}
:root[data-theme="dark"] .add{ color:#050805; }
@media (prefers-color-scheme: dark){ .add{ color:#050805; } }
.add:hover{ background:var(--accent); color:#0B0B06; }
.add:active{ transform:translate(1px,1px); }
.add[disabled]{ background:var(--panel); color:var(--dim); cursor:not-allowed; opacity:.65; }
.add[disabled]:hover{ background:var(--panel); color:var(--dim); }

/* footlocker (cart) */
.locker{
  border:3px solid var(--rule); background:var(--panel-alt);
  box-shadow:4px 4px 0 var(--shadow); margin-bottom:14px;
}
.locker-hd{
  background:var(--rule); color:var(--panel); padding:5px 10px;
  font-family:var(--mono); font-size:11px; font-weight:bold;
  letter-spacing:.14em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:8px;
}
:root[data-theme="dark"] .locker-hd{ background:var(--mil); color:#050805; }
@media (prefers-color-scheme: dark){ .locker-hd{ background:var(--mil); color:#050805; } }
.locker-body{ padding:10px 12px; }
.lline{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font-family:var(--mono); font-size:11.5px; padding:3px 0;
  border-bottom:1px dotted var(--dim);
}
.lline span{ font-variant-numeric:tabular-nums; }
.ltotal{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:8px; padding-top:8px; border-top:2px solid var(--rule);
  font-family:var(--mono); font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:.08em;
}
.ltotal span{ color:var(--accent); font-size:19px; font-variant-numeric:tabular-nums; }
.credits{
  margin-top:14px; padding-top:10px; border-top:2px dashed var(--rule);
  font-family:var(--mono); font-size:9px; color:var(--dim); line-height:1.7; letter-spacing:.02em;
}
.credits a{ color:var(--dim); }

/* ---------- injury manifest ---------- */
.injlist{ list-style:none; margin:3px 0 0; padding:0 0 0 2px; display:flex; flex-direction:column; gap:1px; }
.injlist li{
  font-family:var(--mono); font-size:10.5px; color:var(--warn);
  display:flex; gap:6px; align-items:baseline;
}
.injlist li::before{ content:"\25AA"; color:var(--warn); flex:0 0 auto; }
.injlist li em{ color:var(--dim); font-style:normal; }

/* ---------- comms directory ---------- */
.dir{ display:flex; flex-direction:column; gap:0; }
.dir div{ padding:6px 0; border-bottom:1px dotted var(--dim); font-family:var(--mono); font-size:10px; line-height:1.5; }
.dir div:last-child{ border-bottom:0; }
.dir b{ color:var(--accent); display:block; }
.dir span{ color:var(--dim); }

/* ---------- a11y ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  /* system asks for no motion: hold the ticker, but keep it legible (not clipped) */
  .marquee{ white-space:normal; }
  .marquee-track{ animation:none; width:auto; display:block; }
  .marquee-run{ padding-right:0; }
  .marquee-run + .marquee-run{ display:none; }
  .dot.amber, .dot.red, .blinky{ animation:none; }
}

/* ==========================================================
   FRAME ROUTER + SHOP  (added for the multi-page build)
   ========================================================== */

/* the content frame fades out/in on navigation */
.main{ transition:opacity .16s ease-out, transform .16s ease-out; }
.main.swapping{ opacity:0; transform:translateY(6px); }
@media (prefers-reduced-motion: reduce){
  .main{ transition:none; }
  .main.swapping{ opacity:1; transform:none; }
}
.loadbar{
  position:fixed; top:0; left:0; height:4px; width:0;
  background:var(--accent); z-index:99; transition:width .18s ease-out, opacity .3s;
  box-shadow:0 0 10px var(--accent);
}

/* active nav item */
.nav a.on{
  background:var(--rule); color:var(--panel);
  border-top-color:var(--bevel-dk); border-left-color:var(--bevel-dk);
  border-right-color:var(--bevel-lt); border-bottom-color:var(--bevel-lt);
}
:root[data-theme="dark"] .nav a.on{ background:var(--mil); color:#050805; }
@media (prefers-color-scheme: dark){ .nav a.on{ background:var(--mil); color:#050805; } }
.nav a.on span{ opacity:.75; }
.navbadge{
  background:var(--accent); color:#0B0B06; border:1px solid var(--rule);
  font-family:var(--mono); font-size:9px; font-weight:bold;
  padding:0 5px; min-width:16px; text-align:center;
}

.golink{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:bold;
  letter-spacing:.08em; color:var(--accent); padding:7px 2px; margin-bottom:2px;
}

/* quantity stepper */
.qty{ display:inline-flex; border:2px solid var(--rule); background:var(--panel); }
.qbtn{
  background:var(--panel-alt); color:var(--text); border:0;
  border-right:2px solid var(--rule);
  font-family:var(--mono); font-weight:bold; font-size:13px;
  width:26px; min-height:26px; cursor:pointer; line-height:1;
}
.qty .qbtn:last-child{ border-right:0; border-left:2px solid var(--rule); }
.qbtn:hover{ background:var(--accent); color:#0B0B06; }
.qin{
  width:30px; border:0; background:transparent; color:var(--text);
  font-family:var(--mono); font-size:12px; font-weight:bold;
  text-align:center; padding:4px 0; font-variant-numeric:tabular-nums;
}
.qin:focus{ outline:2px solid var(--accent); outline-offset:-2px; }
.px-buy{ flex-wrap:wrap; gap:6px; }

/* empty state */
.empty-box{
  border:3px dashed var(--rule); background:var(--panel-alt);
  padding:26px 20px; text-align:center;
}
.empty-box b{ font-family:var(--disp); font-size:26px; text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:6px; }
.empty-box p{ font-size:12.5px; color:var(--dim); max-width:46ch; margin:0 auto; }

/* cart table */
.cart{ border:3px solid var(--rule); background:var(--panel-alt); overflow-x:auto; }
.cart-hd, .cline{
  display:grid; grid-template-columns:minmax(150px,3fr) 78px 104px 84px 34px;
  gap:8px; align-items:center; padding:8px 10px;
}
.cart-hd{
  background:var(--rule); color:var(--panel);
  font-family:var(--mono); font-size:9.5px; font-weight:bold;
  letter-spacing:.12em; text-transform:uppercase;
}
:root[data-theme="dark"] .cart-hd{ background:var(--mil); color:#050805; }
@media (prefers-color-scheme: dark){ .cart-hd{ background:var(--mil); color:#050805; } }
.cart-hd span:nth-child(2), .cart-hd span:nth-child(4){ text-align:right; }
.cline{ border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:12px; }
.cline:last-child{ border-bottom:0; }
.cline:nth-child(even){ background:var(--panel); }
.cline .nm{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cline .nm b{ font-family:var(--disp); font-size:15px; letter-spacing:.02em; text-transform:uppercase; line-height:1.1; }
.cline .nm em{ font-style:normal; font-size:9px; letter-spacing:.08em; color:var(--dim); }
.cline .u, .cline .l{ text-align:right; font-variant-numeric:tabular-nums; }
.cline .l{ font-weight:bold; color:var(--accent); }
.rm{
  background:var(--panel-alt); border:2px solid var(--rule); color:var(--warn);
  font-family:var(--mono); font-weight:bold; font-size:12px;
  width:26px; height:26px; cursor:pointer; line-height:1;
}
.rm:hover{ background:var(--warn); color:#FFF3EC; }

/* totals */
.totals{
  margin-top:12px; border:3px solid var(--rule); background:var(--panel);
  padding:10px 12px; display:flex; flex-direction:column; gap:4px;
}
.totals div{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--mono); font-size:12px;
}
.totals em{ font-style:normal; color:var(--dim); font-size:10px; }
.totals span:last-child{ font-variant-numeric:tabular-nums; font-weight:bold; }
.totals .grand{
  border-top:2px solid var(--rule); margin-top:5px; padding-top:7px;
  font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:.08em;
}
.totals .grand span:last-child{ color:var(--accent); font-size:20px; }

/* payment block */
.pay{ border:2px solid var(--rule); background:var(--panel); margin-top:6px; }
.pay-hd{
  background:var(--panel-alt); border-bottom:2px solid var(--rule); padding:5px 10px;
  font-family:var(--mono); font-size:10px; font-weight:bold;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.payopt{ display:flex; gap:9px; align-items:flex-start; padding:9px 10px; cursor:pointer; border-bottom:1px solid var(--rule); }
.payopt:last-child{ border-bottom:0; }
.payopt.disabled{ opacity:.5; cursor:not-allowed; }
.payopt span{ display:flex; flex-direction:column; gap:1px; }
.payopt b{ font-family:var(--disp); font-size:15px; letter-spacing:.02em; text-transform:uppercase; }
.payopt em{ font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--dim); }

/* receipt */
.receipt{ border:3px solid var(--rule); background:var(--panel); box-shadow:5px 5px 0 var(--shadow); }
.receipt-hd{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--rule); color:var(--panel); padding:6px 12px;
  font-family:var(--mono); font-size:10px; font-weight:bold; letter-spacing:.12em; text-transform:uppercase;
}
:root[data-theme="dark"] .receipt-hd{ background:var(--mil); color:#050805; }
@media (prefers-color-scheme: dark){ .receipt-hd{ background:var(--mil); color:#050805; } }
.receipt-body{ padding:14px 16px 18px; }
.rline{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font-family:var(--mono); font-size:11.5px; padding:3px 0;
  border-bottom:1px dotted var(--dim);
}
.rline b{ font-variant-numeric:tabular-nums; }
.rline.grand{
  border-bottom:0; border-top:2px solid var(--rule); margin-top:8px; padding-top:8px;
  font-size:14px; text-transform:uppercase; letter-spacing:.08em;
}
.rline.grand b{ color:var(--accent); font-size:19px; }
#rc-items{ margin:10px 0; border-top:2px solid var(--rule); padding-top:8px; }
#rc-items .ri{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:11px; padding:2px 0; color:var(--dim);
}
#rc-items .ri b{ color:var(--text); }

@media (max-width:560px){
  .cart-hd{ display:none; }
  .cline{ grid-template-columns:1fr auto; grid-template-areas:"nm rm" "u l" "q q"; gap:5px; }
  .cline .nm{ grid-area:nm; } .cline .u{ grid-area:u; text-align:left; }
  .cline .l{ grid-area:l; } .rm{ grid-area:rm; }
  .cline .qwrap{ grid-area:q; }
}

/* memorial stones carry a name and a year, nothing else */
.stone{ padding:18px 10px 16px; }
.stone .yr{ margin:4px 0 0; font-size:11px; letter-spacing:.22em; }

/* ==========================================================
   FORM CONTROLS — checkboxes & radios
   These sit inside .field, which sets width:100% on text inputs.
   That rule is now scoped away from them; below is the real styling.
   ========================================================== */

.checks{ gap:0; border:2px solid var(--rule); background:var(--panel); }
.checks label{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 10px;
  align-items:start;
  padding:9px 11px;
  border-bottom:1px solid var(--rule);
  line-height:1.5;
}
.checks label:last-child{ border-bottom:0; }
.checks label:nth-child(even){ background:var(--panel-alt); }
.checks label:hover{ background:var(--accent); color:#0B0B06; }
.checks label:hover .box{ border-color:#0B0B06; }

/* the box itself: a square you X on a paper form */
.box{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; flex:0 0 16px;
  margin:1px 0 0;                 /* kills the UA 3px/4px margin */
  border:2px solid var(--rule);
  background:var(--panel);
  display:grid; place-content:center;
  cursor:pointer; position:relative;
}
.box::after{
  content:"\2715";
  font-family:var(--mono); font-weight:bold; font-size:13px; line-height:1;
  color:#0B0B06; opacity:0; transform:scale(.5);
  transition:opacity .12s steps(2), transform .12s steps(2);
}
.box:checked{ background:var(--accent); border-color:var(--rule); }
.box:checked::after{ opacity:1; transform:scale(1); }
.box:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.checks label:has(.box:checked){ background:var(--mil); color:var(--panel); }
:root[data-theme="dark"] .checks label:has(.box:checked){ color:#050805; }
@media (prefers-color-scheme: dark){ .checks label:has(.box:checked){ color:#050805; } }
.checks label:has(.box:checked):hover{ background:var(--accent); color:#0B0B06; }

/* radio variant, same chassis, round-ish dot */
.dotbox{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; flex:0 0 16px; margin:2px 0 0;
  border:2px solid var(--rule); background:var(--panel);
  display:grid; place-content:center; cursor:pointer;
}
.dotbox::after{
  content:""; width:8px; height:8px; background:var(--accent);
  opacity:0; transition:opacity .12s steps(2);
}
.dotbox:checked::after{ opacity:1; }
.dotbox:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.dotbox:disabled{ opacity:.4; cursor:not-allowed; }
.payopt{ align-items:center; }

@media (prefers-reduced-motion: reduce){
  .box::after, .dotbox::after{ transition:none; }
}

/* a two-column form row should collapse cleanly, not squash */
@media (max-width:520px){ .two{ grid-template-columns:1fr; } }

/* ==========================================================
   HERO — unit crest replaces the old CTA buttons
   ========================================================== */
.banner-core{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,3vw,34px); text-align:left;
  padding:18px 16px 16px;
}
.banner-text{ min-width:0; }
@media (max-width:700px){
  .banner-core{ flex-direction:column; text-align:center; gap:12px; }
}

.crest{ flex:0 0 auto; width:clamp(96px,15vw,164px); }
.crest svg{ width:100%; height:auto; display:block; }
.c-disc{  fill:var(--rule); stroke:var(--accent); stroke-width:4; }
.c-inner{ fill:var(--mil);  stroke:var(--accent); stroke-width:3; }
.c-ring{
  fill:var(--panel);
  font-family:var(--mono); font-size:15px; font-weight:bold; letter-spacing:.14em;
}
.c-t{
  fill:var(--accent);
  font-family:var(--disp); font-size:92px; letter-spacing:.01em;
}
.c-arrow{ fill:var(--accent); }
:root[data-theme="dark"] .c-disc{ fill:#000; }
:root[data-theme="dark"] .c-inner{ fill:#0d2410; }
:root[data-theme="dark"] .c-ring{ fill:var(--mil); }
@media (prefers-color-scheme: dark){
  .c-disc{ fill:#000; }
  .c-inner{ fill:#0d2410; }
  .c-ring{ fill:var(--mil); }
}

/* the wordmark no longer needs to carry the whole banner alone */
.banner-core .wordmark{ font-size:clamp(38px,8.5vw,92px); }
.banner-core .motto{ letter-spacing:.28em; }


/* ---------- skip link: nine nav items sit before the content ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#000; border:3px solid var(--rule);
  font-family:var(--mono); font-size:12px; font-weight:bold;
  letter-spacing:.1em; text-transform:uppercase; padding:10px 16px;
  text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }