/* ============================================================
   BUREAU OF PROPAGANDA INTELLIGENCE — v5
   Website Machine V2 build. Hexon-grammar, themeable.
   Dark = Monument register (default). Light = Document register.
   ============================================================ */

:root[data-theme="dark"]{
  --bg:#0D0D0F; --surface:#141417; --elev:#1A1A1E;
  --ink:#EDEAE3; --muted:#8F8C85; --faint:#5C5952;
  --border:rgba(237,234,227,.12); --border-strong:rgba(237,234,227,.22);
  --accent:#FF564B; --accent-ink:#0D0D0F;
  --chip:rgba(237,234,227,.06);
  --grain-op:.07;
  --shade:rgba(13,13,15,.78);
}
:root[data-theme="light"]{
  --bg:#F5F2EB; --surface:#FBF9F3; --elev:#FFFFFF;
  --ink:#16161A; --muted:#5F5C56; --faint:#8C887F;
  --border:rgba(22,22,26,.14); --border-strong:rgba(22,22,26,.26);
  --accent:#E8402F; --accent-ink:#F8F5EE;
  --chip:rgba(22,22,26,.05);
  --grain-op:.045;
  --shade:rgba(245,242,235,.85);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family:"Source Serif 4",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  font-size:17px;line-height:1.6;
  transition:background .35s ease,color .35s ease;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--grain-op);
  background-image:url("assets/grain.png");background-size:160px 160px;
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.05}
img{max-width:100%;display:block}
a{color:inherit}

/* selection + focus */
::selection{background:var(--accent);color:var(--accent-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

/* ---------- skip ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:600;background:var(--accent);color:var(--accent-ink);
  font-family:"IBM Plex Mono",monospace;font-size:12px;padding:10px 16px;text-transform:uppercase;letter-spacing:.14em}
.skip:focus{left:0}

/* ---------- announcement ---------- */
.annc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:center;gap:10px;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--border)}
.annc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- floating island nav ---------- */
.navwrap{position:fixed;top:50px;left:0;right:0;z-index:300;display:flex;justify-content:center;padding:0 14px;
  pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  padding:10px 12px 10px 20px;border-radius:999px;border:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;max-width:1080px;width:100%}
.nav.scrolled{background:color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-color:var(--border);box-shadow:0 10px 40px rgba(0,0,0,.18)}
.nav .brand{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:13px;letter-spacing:.05em;text-decoration:none;white-space:nowrap;margin-right:auto}
.nav .links{display:flex;gap:clamp(10px,1.6vw,22px);font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.nav .links a{text-decoration:none;color:var(--muted);transition:color .2s ease,transform .2s ease}
.nav .links a:hover{color:var(--ink);transform:translateY(-1px)}
@media(max-width:860px){.nav .links{display:none}}
.theme-btn{background:var(--chip);border:1px solid var(--border);color:var(--ink);cursor:pointer;
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:none}
.theme-btn:hover{border-color:var(--border-strong)}
.theme-btn svg{width:15px;height:15px}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 24px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);
  transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
.btn:hover{transform:scale(1.03)}
.btn.sm{padding:11px 18px;font-size:10.5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn.ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px dashed var(--border-strong);border-radius:999px;padding:9px 16px}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- type ---------- */
.h-display{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.95}
.h-serif{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-weight:600;
  text-transform:none;letter-spacing:-.01em}
.microlabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.microlabel b{color:var(--accent);font-weight:400}

/* ---------- cards ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:1.6rem;
  overflow:hidden;transition:border-color .3s ease,transform .3s ease}
.card:hover{border-color:var(--border-strong)}
.card .spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%)}
.card:hover .spot{opacity:1}

/* ---------- media panel apparatus ---------- */
.plate-chip{position:absolute;z-index:2;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#CFCBC2;background:rgba(13,13,15,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(237,234,227,.16);border-radius:999px;padding:7px 14px}
.split-hair{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:1;
  background:color-mix(in srgb, var(--accent) 75%, transparent)}

/* ---------- manifesto ---------- */
.manifesto{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(26px,3.4vw,46px);
  line-height:1.32;margin:0}
.manifesto .w{color:var(--faint);transition:color .3s ease}
.manifesto .w.on{color:var(--ink)}
.manifesto .w.hot{font-style:italic}
.manifesto .w.hot.on{color:var(--accent)}

/* ---------- jurisdiction lists ---------- */
.jur-list{list-style:none;margin:18px 0 0;padding:0;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:2.4}
.jur-list li::before{content:"+ ";color:var(--accent)}

/* ---------- sticky stack ---------- */
.stack-zone{position:relative}
.stack-card{position:sticky;top:110px;margin-bottom:26px}

/* ---------- forms ---------- */
label{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input,textarea{width:100%;background:var(--elev);border:1px solid var(--border);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;font-size:16px;padding:13px 15px;border-radius:.9rem}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
textarea{min-height:96px;resize:vertical}

/* ---------- memo ---------- */
.memo-head{font-family:"Courier Prime",monospace;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.memo-body{font-family:"Courier Prime",monospace;font-size:16px;line-height:1.75;margin:0}

/* ---------- marquee ---------- */
.marq{overflow:hidden;white-space:nowrap}
.marq-inner{display:inline-flex;align-items:center;gap:64px;will-change:transform;color:var(--faint)}
.marq-inner svg{flex:none}

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

/* ============ v5.1 revisions ============ */

/* brand mark + responsive wordmark */
.nav .brand{display:inline-flex;align-items:center;gap:9px}
.nav .brand .mark{width:22px;height:22px;flex:none;object-fit:contain}
:root[data-theme="dark"] .nav .brand .mark-light{display:none}
:root[data-theme="light"] .nav .brand .mark-dark{display:none}
.nav .brand .short{display:none}
@media(max-width:520px){
  .nav .brand .word{display:none}
  .nav .brand .short{display:inline}
}

/* hero rotator */
.rot-line{min-height:1.05em}
@media(max-width:760px){.rot-line{min-height:2.05em}}
@media(max-width:480px){.rot-line{min-height:3.1em}}
.caret{display:inline-block;width:3px;height:.82em;background:var(--accent);
  margin-left:6px;vertical-align:baseline;animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.caret{display:none}}

/* mobile pass */
@media(max-width:640px){
  .annc{font-size:9px;letter-spacing:.12em}
  .plate-chip{font-size:8.5px;padding:5px 10px;letter-spacing:.12em}
  .stack-card{top:84px}
  .nav{padding:8px 10px 8px 14px}
  .btn{padding:14px 18px;font-size:11px}
  .btn.sm{padding:10px 14px;font-size:10px}
  .manifesto{font-size:clamp(22px,6.4vw,28px)}
}