/* ===== LH Movement — Gravitas Theme (v1) =====
   Focus: credibility, legibility, discipline.
   Notes: same HTML, stronger typographic system, calmer palette,
   better mobile nav, accessible focus states, print styles.
*/

:root{
  /* Palette: charcoal + paper with restrained crimson accent */
  --bg:#0c0e12;         /* page background */
  --card:#121620;       /* panels/cards */
  --ink:#e9edf3;        /* main text */
  --muted:#a7b0be;      /* secondary text */
  --rule:#252b3a;       /* dividers/borders */
  --accent:#c94f4f;     /* disciplined red (not neon) */
  --accent-quiet:#b64646;
  --brand:#e6e9ef;      /* brand text */
  --btn-ink:#080a0f;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (min-width:1100px){ html{ font-size:17px; } }

a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
a:hover{ text-decoration:underline; }

.container{ max-width:960px; margin:0 auto; padding:0 20px; }

/* ----- Nav ----- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,14,18,.9);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; }
.brand .logo{
  width:28px; height:28px; border-radius:6px;
  background:conic-gradient(from 140deg, #7b1d1d, #c94f4f, #7b1d1d);
  box-shadow:0 0 0 2px #0003, inset 0 0 0 1px #ffffff14;
}
.menu{ display:flex; align-items:center; gap:20px; }

.dropdown{ position:relative; }
.drop-btn{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 10px; border-radius:8px; border:1px solid transparent;
  font-variant-caps:all-small-caps; letter-spacing:.4px;
}
.drop-btn:hover{ background:#171b24; border-color:var(--rule); }
.drop-list{
  position:absolute; top:110%; left:0; min-width:260px;
  background:var(--card); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); padding:6px; display:none;
}
.dropdown:hover .drop-list{ display:block; }
.drop-item{ display:block; padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none; }
.drop-item:hover{ background:#171c27; }

.hamb{
  display:none; background:#161a22; border:1px solid var(--rule);
  border-radius:10px; padding:8px 10px; color:var(--ink);
}

@media (max-width:860px){
  .menu{ display:none; }
  .hamb{ display:block; }
  .menu.mobile{
    display:flex; flex-direction:column; gap:8px; padding:10px;
    border-top:1px solid var(--rule); background:rgba(12,14,18,.96);
  }
  .dropdown:hover .drop-list{ display:none; }
  .dropdown.open .drop-list{ display:block; position:relative; top:auto; left:auto; }
}

/* ----- Header ----- */
.header{
  padding:56px 0 24px;
  border-bottom:1px solid var(--rule);
  background:
    radial-gradient(1200px 420px at 50% -20%, #141a28 10%, transparent 60%);
}
.header h1{
  margin:0 0 6px; font-size:38px; line-height:1.15;
  letter-spacing:.2px; font-weight:800;
}
.header h1 em{ font-style:normal; font-variant-caps:all-small-caps; letter-spacing:.6px; color:var(--accent); }
.header p{ color:var(--muted); margin:0; max-width:60ch; }

/* ----- Buttons ----- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-quiet));
  color:var(--btn-ink); padding:10px 14px; border-radius:12px;
  font-weight:800; border:1px solid #00000066; text-decoration:none;
  box-shadow:0 2px 0 #0006, inset 0 0 0 1px #ffffff16;
}
.btn:hover{ filter:saturate(110%); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.secondary{
  background:#171c27; color:var(--ink); border:1px solid var(--rule);
  box-shadow:none; font-weight:700;
}

/* ----- Document ----- */
section{
  padding:36px 0;
  border-bottom:1px solid var(--rule);
}
.prose{
  /* Tighter max width for long-form seriousness */
  max-width:75ch; margin:0 auto;
}
.prose h2{
  margin:0 0 10px; font-size:26px; line-height:1.25;
  font-weight:800; letter-spacing:.2px;
  border-left:4px solid var(--accent);
  padding-left:.6rem;
}
.prose h3{
  margin:22px 0 6px; font-size:19px; font-weight:800; color:var(--ink);
  text-transform:uppercase; letter-spacing:.06em;
}
.prose p{ margin:12px 0; }
.prose strong{ font-weight:800; }


/* Guardian’s Oath — elevate as a pledge card */
#oath ul{
  list-style:none; margin:14px 0; padding:0;
  background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:14px 16px;
}
#oath li{
  padding:8px 6px; border-bottom:1px dashed #ffffff12;
}
#oath li:last-child{ border-bottom:0; }

/* Epilogue pull line emphasis */
#epilogue strong{
  background:linear-gradient(transparent 60%, #c94f4f33 60%);
  padding:0 .15em;
}

/* Cards & grids if you add them later */
.card{ background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:18px; }
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }

footer{ padding:30px 0; color:var(--muted); }

/* ----- Focus & interactions (accessibility) ----- */
:focus-visible{
  outline:3px solid #ffffff33; outline-offset:2px; border-radius:6px;
}

/* ----- Print: export manifesto as a clean PDF ----- */
@media print{
  :root{ --bg:#ffffff; --ink:#111; --muted:#444; --rule:#ddd; --accent:#7a1515; }
  body{ background:#fff; color:#111; font:12pt/1.6 Georgia, "Times New Roman", serif; }
  .nav, .header .btn, .hamb{ display:none !important; }
  .header{ padding:0 0 10px; border:0; background:none; }
  .prose{ max-width: none; }
  section{ page-break-inside:avoid; border:0; padding:14pt 0; }
  a{ color:inherit; text-decoration:none; }
}

/* ----- Motion respect ----- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ----- Minor utilities ----- */
.header{ background:
  radial-gradient(1200px 420px at 50% -20%, #141a28 10%, transparent 60%),
  linear-gradient(#0c0e12, #0c0e12);
}