/* ============================================================================
   BREACH PROTOCOL — public site stylesheet
   breachprotocol.info

   Self-contained on purpose: no CDN, no webfont, no external request of any
   kind. Every face below is a system stack. The site must render identically
   on a machine with no network beyond the document itself.

   Owned by: the public-site pass. Nothing here is imported by the game
   bundle (src/) and nothing in src/ imports this.
   ========================================================================= */

:root{
  /* Ground */
  --bg:        #07090c;
  --bg-2:      #0b0f14;
  --panel:     #10151c;
  --panel-2:   #161d26;
  --line:      #1e2733;
  --line-2:    #2a3543;

  /* Type */
  --text:      #e9eff6;
  --dim:       #93a3b5;
  --faint:     #64748b;

  /* Accents. Gold is the house colour — it is the boot screen's #d8a44a.
     Outbreak gets its own sick green so the two modes read apart at a glance,
     exactly as they do in the in-game menus. */
  --gold:      #d8a44a;
  --gold-dim:  #8a6a2e;
  --outbreak:  #7fae4a;
  --blue:      #5b8fd0;
  --red:       #c9524a;
  --green:     #4ea86b;

  --max:       1320px;
  --radius:    10px;
  --shadow:    0 18px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* Condensed display face for headings — system stack, no download. */
.display,h1,h2,h3,.nav a,.btn,.tag,.kicker{
  font-family:"Barlow Condensed","Oswald","Segoe UI Semibold",
              "Helvetica Neue Condensed",Impact,system-ui,sans-serif;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
h1{font-size:clamp(30px,5.2vw,58px);letter-spacing:.1em}
h2{font-size:clamp(20px,2.6vw,30px)}
h3{font-size:17px;letter-spacing:.09em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:860px}

.kicker{
  color:var(--gold);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  margin:0 0 10px;font-weight:600;
}
.lede{color:var(--dim);font-size:17px;max-width:70ch}
.muted{color:var(--faint)}
.small{font-size:13.5px}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
      color:#12100a;padding:10px 16px;border-radius:0 0 6px 0;font-weight:700}
.skip:focus{left:0}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:60;
  background:rgba(7,9,12,.92);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.mast .bar{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand svg{display:block}
.brand b{
  font-family:"Barlow Condensed","Oswald",system-ui,sans-serif;
  font-size:19px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--text);
}
.brand:hover{text-decoration:none}

.nav{display:flex;gap:4px;align-items:center;margin-left:auto;flex-wrap:wrap}
.nav a{
  color:var(--dim);font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 12px;border-radius:6px;font-weight:600;
}
.nav a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.nav a.on{color:var(--gold);background:rgba(216,164,74,.1)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);
           color:var(--text);border-radius:6px;padding:7px 12px;font-size:14px;cursor:pointer}

@media (max-width:900px){
  .navtoggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:62px;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:8px 14px 16px;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 10px;border-radius:0;border-bottom:1px solid var(--line)}
}

/* ⚠ MEASURED: at 390 px the wordmark plus the 26 px bar gap plus the Menu
   button came to 394 px and pushed the document 4 px wide on EVERY page.
   The masthead is the only row on the site that cannot wrap, so it is the
   only row that can do this. Tighten the three contributors together. */
@media (max-width:520px){
  .mast .bar{gap:12px}
  .brand b{font-size:16px;letter-spacing:.15em}
  .brand svg{width:22px;height:22px}
  .navtoggle{padding:7px 10px;font-size:13px}
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero .shot{position:absolute;inset:0;background-size:cover;background-position:center;
            filter:saturate(.85) contrast(1.05)}
/* Two layers, not one. A flat vertical scrim dims the whole capture to keep the
   headline legible and takes the artwork down with it. The horizontal pass does
   the legibility work under the text column only, so the right two-thirds of the
   frame stays as bright as it was captured. */
.hero .veil{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,7,10,.90) 0%,rgba(5,7,10,.72) 34%,rgba(5,7,10,.12) 72%,rgba(5,7,10,0) 100%),
    linear-gradient(180deg,rgba(7,9,12,.30) 0%,rgba(7,9,12,.10) 40%,rgba(7,9,12,.86) 88%,var(--bg) 100%);}
@media (max-width:760px){
  /* Narrow: the text sits over the middle of the frame, so the horizontal pass
     no longer covers it and the vertical one has to carry the contrast. */
  .hero .veil{background:linear-gradient(180deg,rgba(7,9,12,.72) 0%,rgba(7,9,12,.80) 55%,var(--bg) 100%);}
}
/* padding-block, NOT the four-value shorthand: .inner is also a .wrap, and a shorthand
   here silently zeroes .wrap's 22px gutter, putting the headline against pixel 0. */
.hero .inner{position:relative;padding-block:clamp(56px,10vw,132px) clamp(40px,7vw,86px)}
.hero h1{text-shadow:0 4px 26px rgba(0,0,0,.6)}
.hero .lede{margin-top:18px;font-size:clamp(15px,1.6vw,19px)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Page header (non-landing pages) */
.pagehead{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));padding:52px 0 40px}
.pagehead .lede{margin-top:14px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;padding:12px 26px;border-radius:6px;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;border:1px solid transparent;
  cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--gold);color:#141007;border-color:var(--gold)}
.btn.primary:hover{background:#e8b75f}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.outbreak{background:var(--outbreak);color:#0e1407;border-color:var(--outbreak)}
.btn.outbreak:hover{background:#93c25c}

/* ── Sections & grids ────────────────────────────────────────────────────── */
section{padding:56px 0}
section.tight{padding:34px 0}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
         flex-wrap:wrap;margin-bottom:8px}
.sechead h2{color:var(--text)}
.sechead a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.secnote{color:var(--faint);font-size:14px;margin:0 0 26px;max-width:78ch}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.card .body{padding:20px 22px 22px}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--dim);font-size:14.5px}
.card p + p{margin-top:10px}
a.card{color:inherit}
a.card:hover{border-color:var(--gold-dim);text-decoration:none}
a.card:hover h3{color:var(--gold)}
.card .thumb{aspect-ratio:16/9;background:#0d1218 center/cover no-repeat;border-bottom:1px solid var(--line)}
.card .meta{color:var(--faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
            margin:0 0 9px;font-weight:600}

/* ── Tags / pills ────────────────────────────────────────────────────────── */
.tag{
  display:inline-block;padding:3px 11px;border-radius:99px;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--dim);
}
.tag.live{color:#8ddba6;border-color:rgba(78,168,107,.45);background:rgba(78,168,107,.12)}
.tag.vault{color:var(--faint);border-color:rgba(100,116,139,.4);background:rgba(100,116,139,.1)}
.tag.gold{color:var(--gold);border-color:rgba(216,164,74,.45);background:rgba(216,164,74,.1)}
.tag.ob{color:#a9d47c;border-color:rgba(127,174,74,.45);background:rgba(127,174,74,.12)}
.tag.att{color:#8ab4e8;border-color:rgba(91,143,208,.45);background:rgba(91,143,208,.12)}
.tag.def{color:#e0975f;border-color:rgba(201,120,60,.45);background:rgba(201,120,60,.12)}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
           background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
th{
  text-align:left;color:var(--faint);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;
}
td{padding:12px 16px;border-bottom:1px solid #18202b;color:var(--dim);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--text);font-weight:600}
tbody tr:hover td{background:#141b24}

/* ── Notes / callouts ────────────────────────────────────────────────────── */
.note{
  border:1px solid var(--line);border-left:3px solid var(--gold);
  background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px;color:var(--dim);font-size:14.5px;
}
.note b,.note strong{color:var(--text)}
.note.warn{border-left-color:var(--red)}
.note.ok{border-left-color:var(--green)}
.note.ob{border-left-color:var(--outbreak)}
.note h3{margin-bottom:8px;color:var(--text)}
.note + .note{margin-top:16px}
.note ul{margin:10px 0 0;padding-left:20px}
.note li{margin-bottom:7px}

/* ── Stat strip ──────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.stat b{display:block;font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;
        letter-spacing:.02em;line-height:1.15}
.stat span{color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
           font-weight:600}

/* ── Timeline (roadmap) ──────────────────────────────────────────────────── */
.timeline{position:relative;margin-top:10px}
.timeline::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line);
}
.tl{position:relative;padding:0 0 30px 44px}
.tl::before{
  content:"";position:absolute;left:4px;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--panel);border:2px solid var(--line-2);
}
.tl.now::before{border-color:var(--green);background:rgba(78,168,107,.25)}
.tl.next::before{border-color:var(--gold);background:rgba(216,164,74,.25)}
.tl h3{margin-bottom:4px}
.tl .when{color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
          font-weight:700;margin-bottom:6px}
.tl p{margin:0;color:var(--dim);font-size:14.5px;max-width:76ch}
.tl ul{margin:10px 0 0;padding-left:20px;color:var(--dim);font-size:14.5px}
.tl li{margin-bottom:6px}

/* ── Media strip ─────────────────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
       overflow:hidden}
figure img{width:100%;display:block}
figcaption{padding:12px 16px;color:var(--faint);font-size:13px}

/* ── Search (support) ────────────────────────────────────────────────────── */
.searchbox{position:relative;margin:26px 0 8px}
.searchbox input{
  width:100%;padding:16px 18px 16px 46px;font-size:16px;color:var(--text);
  background:var(--panel);border:1px solid var(--line-2);border-radius:8px;
  font-family:inherit;
}
.searchbox input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,164,74,.14)}
.searchbox svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:.55}
.searchmeta{color:var(--faint);font-size:13px;margin:10px 0 22px;min-height:20px}
.kb article{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:16px;
}
.kb article[hidden]{display:none}
.kb article h3{margin-bottom:6px;color:var(--text)}
.kb article .meta{color:var(--faint);font-size:11.5px;letter-spacing:.16em;
                  text-transform:uppercase;font-weight:700;margin-bottom:10px}
.kb article p{margin:0 0 12px;color:var(--dim);font-size:15px}
.kb article p:last-child{margin-bottom:0}
.kb article ol,.kb article ul{color:var(--dim);font-size:15px;margin:0 0 12px;padding-left:22px}
.kb article li{margin-bottom:7px}
.kb article code{background:#0a0e13;border:1px solid var(--line);border-radius:4px;
                 padding:1px 7px;font-size:13.5px;color:var(--gold)}
.noresults{color:var(--dim);background:var(--panel);border:1px dashed var(--line-2);
           border-radius:var(--radius);padding:26px;text-align:center}

/* ── Q&A ─────────────────────────────────────────────────────────────────── */
details.qa{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;margin-bottom:10px;
}
details.qa summary{
  cursor:pointer;padding:16px 20px;font-weight:600;color:var(--text);list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:15.5px;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";color:var(--gold);font-size:22px;line-height:1;flex:0 0 auto}
details.qa[open] summary::after{content:"–"}
details.qa .ans{padding:0 20px 18px;color:var(--dim);font-size:15px}
details.qa .ans p{margin:0 0 11px}
details.qa .ans p:last-child{margin-bottom:0}

/* ── Legal prose ─────────────────────────────────────────────────────────── */
.legal{max-width:80ch}
.legal h2{margin:38px 0 12px;font-size:19px;color:var(--gold)}
.legal h3{margin:24px 0 8px;font-size:15.5px}
.legal p,.legal li{color:var(--dim);font-size:15px}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin-bottom:8px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:48px 0 40px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px}
.fcol h4{margin:0 0 12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
         color:var(--faint);font-weight:700}
.fcol a{display:block;color:var(--dim);font-size:14px;padding:4px 0}
.fcol a:hover{color:var(--gold)}
.fbase{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
       color:var(--faint);font-size:13px;display:flex;gap:18px;flex-wrap:wrap;
       justify-content:space-between}
.attrib{max-width:74ch;color:var(--faint);font-size:13px;line-height:1.7}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.center{text-align:center}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mt32{margin-top:32px}.mt40{margin-top:40px}
.mb0{margin-bottom:0}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.hide{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}