/* The Long Insurgency — public pages. Tokens from the design system
   (TLI-FM-01). Anton shouts, Spectral reads, Courier Prime is the machinery.
   listmonk's own stylesheet paints .container.wrap white and sets its own
   type scale, so several rules here have to out-specify it. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --black: oklch(0.15 0.007 60);
  --board: oklch(0.21 0.012 55);
  --board-edge: oklch(0.28 0.015 55);
  --bone: oklch(0.87 0.02 80);
  --bone-muted: oklch(0.68 0.02 75);
  --paper: oklch(0.92 0.03 85);
  --red: oklch(0.52 0.21 25);
  --red-bright: oklch(0.58 0.22 25);
  --rule-dark: rgba(235, 220, 190, 0.16);
}

html { background: var(--black); }

body {
  background: var(--black) !important;
  color: var(--bone);
  font-family: Spectral, Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* The classification band that runs across the top of the archive. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  z-index: 30;
}

/* Film grain, same as the site. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* listmonk floats the content in a white card. Remove the card entirely. */
.container, .wrap, .container.wrap, body > div {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  max-width: 33rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  position: relative;
  z-index: 20;
}

.header {
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 1.6rem;
  margin-bottom: 2.75rem;
  background: transparent !important;
}

/* Logo. The PNG is 718x72; any fractional downscale smears the stencil
   strokes, so the wordmark is painted as a mask cut from the SVG instead —
   vector-crisp at any size, tinted to --bone because the file is
   authored as currentColor and would otherwise render black. */
.header .logo a {
  display: inline-block;
  background-color: var(--bone);
  -webkit-mask: url('https://longinsurgency.com/long-logo.svg') left center / contain no-repeat;
  mask: url('https://longinsurgency.com/long-logo.svg') left center / contain no-repeat;
  border-bottom: 0 !important;
}
.header .logo img, .logo img {
  visibility: hidden;
  display: block;
  height: 2.3rem;
  width: auto;
}

h1, h2, h3 {
  font-family: Anton, Impact, sans-serif !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bone) !important;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
h2 { font-size: 1.75rem; }

p { color: var(--bone); }

a { color: var(--red-bright); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--red-bright); }

label {
  display: block;
  font-family: 'Courier Prime', ui-monospace, monospace !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--bone-muted) !important;
  margin-bottom: 0.45rem;
}

input[type="text"], input[type="email"], input:not([type]), textarea, select {
  width: 100%;
  background: var(--board) !important;
  border: 1px solid var(--board-edge) !important;
  border-radius: 2px;
  color: var(--bone) !important;
  font-family: Spectral, Georgia, serif;
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  box-shadow: none;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--red) !important; }
::placeholder { color: var(--bone-muted); opacity: 0.55; }

/* Spam honeypot — listmonk hides it; make certain it stays hidden. */
.nonce { display: none !important; }

button, input[type="submit"], .button {
  background: var(--red) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 2px;
  font-family: Anton, Impact, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
button:hover, input[type="submit"]:hover, .button:hover { background: var(--red-bright) !important; }

.lists { list-style: none; padding: 0; margin: 1.75rem 0; }
.lists li { border-top: 1px solid var(--rule-dark); padding: 1rem 0; }
.lists h2 { font-size: 0.7rem; letter-spacing: 0.1em; font-family: 'Courier Prime', monospace !important; color: var(--bone-muted) !important; margin-bottom: 0.25rem; }
.lists label { display: inline; text-transform: none; font-family: Spectral, Georgia, serif !important; font-size: 1.05rem; letter-spacing: 0; color: var(--bone) !important; }
.lists .description { color: var(--bone-muted); font-size: 0.92rem; margin: 0.4rem 0 0 1.65rem; }
input[type="checkbox"] { accent-color: var(--red); margin-right: 0.6rem; }

.message, .error, .success, .box {
  border-left: 2px solid var(--red);
  background: var(--board) !important;
  color: var(--bone) !important;
  padding: 1.1rem 1.25rem;
  border-radius: 2px;
}

footer, .footer {
  margin-top: 3.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-dark);
  font-family: 'Courier Prime', ui-monospace, monospace !important;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--bone-muted) !important;
  opacity: 0.5;
  background: transparent !important;
}
footer a, .footer a { color: var(--bone-muted); }

/* Logo. The wordmark is multi-colour (bone letterforms, red mark), so it is
   embedded here as a vector data URI rather than masked or downscaled: the
   PNG at 718x72 smeared its stencil strokes at any fractional size, and a
   mask would have flattened the red mark away. currentColor is resolved to
   the --bone hex because an SVG loaded as an image has no inherited colour. */
.header .logo a {
  display: block;
  width: 15.4rem;
  height: 1.55rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20718%2072%22%20width%3D%22718%22%20height%3D%2272%22%20role%3D%22img%22%20aria-label%3D%22The%20Long%20Insurgency%22%3E%20%3Ctitle%3EThe%20Long%20Insurgency%3C%2Ftitle%3E%20%3Cg%20fill%3D%22%23DDD3C6%22%3E%20%3Cpath%20d%3D%22M0%2C11%2012%2C11%2012%2C54%2043%2C54%2043%2C66%200%2C66Z%22%2F%3E%20%3Cpath%20d%3D%22M113%2C11%20125%2C11%20126%2C18%20143%2C35%20144%2C35%20144%2C11%20156%2C11%20156%2C65%20144%2C65%20144%2C54%20126%2C36%20125%2C36%20125%2C65%20113%2C65Z%22%2F%3E%20%3Cpath%20d%3D%22M164%2C11%20207%2C11%20207%2C23%20176%2C23%20176%2C52%20177%2C53%20195%2C53%20195%2C32%20207%2C32%20207%2C65%20164%2C65Z%22%2F%3E%20%3Cpath%20d%3D%22M243%2C11%20255%2C11%20255%2C65%20243%2C65ZM264%2C11%20276%2C11%20277%2C18%20294%2C35%20295%2C35%20295%2C11%20307%2C11%20307%2C65%20295%2C65%20295%2C54%20277%2C36%20276%2C36%20276%2C65%20264%2C65ZM315%2C11%20358%2C11%20359%2C23%20327%2C23%20327%2C31%20328%2C32%20359%2C32%20359%2C65%20315%2C65%20315%2C53%20346%2C53%20346%2C44%20315%2C44ZM367%2C11%20379%2C11%20379%2C53%20398%2C53%20398%2C11%20410%2C11%20410%2C65%20367%2C65ZM418%2C11%20461%2C11%20461%2C65%20449%2C65%20449%2C47%20431%2C65%20418%2C65%20418%2C57%20431%2C45%20431%2C44%20418%2C44ZM469%2C11%20512%2C11%20512%2C23%20481%2C23%20481%2C52%20482%2C53%20500%2C53%20500%2C32%20512%2C32%20512%2C65%20469%2C65ZM520%2C11%20563%2C11%20563%2C23%20532%2C23%20532%2C31%20533%2C32%20553%2C32%20553%2C44%20533%2C44%20532%2C52%20533%2C53%20563%2C53%20563%2C65%20520%2C65ZM572%2C11%20584%2C11%20585%2C18%20602%2C35%20603%2C35%20603%2C11%20615%2C11%20615%2C65%20603%2C65%20603%2C54%20585%2C36%20584%2C36%20584%2C65%20572%2C65ZM623%2C11%20666%2C11%20666%2C23%20635%2C23%20635%2C52%20636%2C53%20666%2C53%20666%2C65%20623%2C65ZM674%2C11%20686%2C11%20686%2C31%20687%2C32%20705%2C32%20705%2C11%20718%2C11%20718%2C65%20674%2C65%20674%2C53%20705%2C53%20705%2C44%20674%2C44ZM430%2C23%20430%2C32%20449%2C32%20449%2C23Z%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%2278.5%22%20cy%3D%2238.5%22%20r%3D%2227.0%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M77.17%2C53.84C75.15%2C53.63%2073.16%2C53.01%2071.49%2C52.06L70.69%2C51.6L71.87%2C50.25C72.51%2C49.51%2073.11%2C48.81%2073.18%2C48.71C73.29%2C48.55%2073.47%2C48.57%2074.09%2C48.82C74.72%2C49.07%2075.17%2C49.13%2076.53%2C49.12C78.41%2C49.1%2079.77%2C48.83%2081.21%2C48.19C82.25%2C47.72%2084.03%2C46.58%2084.03%2C46.39C84.03%2C46.24%2081.08%2C42.81%2080.08%2C41.8L79.34%2C41.05L79.88%2C40.37C80.17%2C40%2080.76%2C39.27%2081.2%2C38.75L81.98%2C37.81L84.57%2C40.48L87.17%2C43.15L87.87%2C41.72C89.33%2C38.73%2089.62%2C35.73%2088.77%2C32.21L88.3%2C30.27L88.77%2C29.59C89.02%2C29.22%2089.56%2C28.52%2089.95%2C28.05L90.67%2C27.19L90.97%2C27.67C93.5%2C31.87%2094.41%2C35.74%2093.82%2C39.74C93.47%2C42.03%2093.11%2C43.12%2091.98%2C45.28L91.02%2C47.12L92.21%2C48.36L93.4%2C49.6L91.59%2C51.3C90.59%2C52.23%2089.75%2C52.97%2089.73%2C52.94C89.7%2C52.91%2089.32%2C52.4%2088.89%2C51.8C88.45%2C51.2%2088%2C50.71%2087.87%2C50.71C87.75%2C50.71%2087.26%2C50.97%2086.79%2C51.29C85.01%2C52.49%2083.61%2C53.04%2081.15%2C53.55C79.36%2C53.91%2078.48%2C53.97%2077.17%2C53.84ZM58.98%2C52.18C58.69%2C51.82%2058.21%2C51.09%2057.9%2C50.54L57.35%2C49.54L58.76%2C48.72C60.5%2C47.7%2061.84%2C46.77%2062.65%2C46.02C63.19%2C45.53%2063.27%2C45.37%2063.27%2C44.81L63.27%2C44.16L64.02%2C44.23C64.63%2C44.29%2064.95%2C44.22%2065.84%2C43.81L66.92%2C43.32L68.47%2C44.81C69.32%2C45.62%2070.04%2C46.34%2070.06%2C46.4C70.09%2C46.46%2069.6%2C47.12%2068.97%2C47.86L67.84%2C49.22L67.03%2C48.4C66.14%2C47.5%2065.56%2C47.21%2064.93%2C47.34C64.39%2C47.46%2063.24%2C48.67%2062.22%2C50.19C61.29%2C51.58%2060.64%2C52.3%2060.06%2C52.6C59.84%2C52.72%2059.62%2C52.81%2059.58%2C52.81C59.54%2C52.81%2059.27%2C52.53%2058.98%2C52.18ZM74.49%2C35.39C73.2%2C33.91%2072.06%2C32.66%2071.95%2C32.62C71.85%2C32.58%2070.84%2C33.39%2069.71%2C34.4C68.24%2C35.72%2067.54%2C36.25%2067.28%2C36.25C67.03%2C36.25%2066.19%2C35.7%2064.8%2C34.62L62.71%2C32.99L65.91%2C30.14C67.67%2C28.58%2069.77%2C26.65%2070.57%2C25.87C72%2C24.48%2072.06%2C24.44%2072.85%2C24.37C73.59%2C24.31%2079.02%2C24.72%2079.14%2C24.85C79.21%2C24.91%2078.33%2C25.9%2076.11%2C28.27C75.3%2C29.13%2074.64%2C29.89%2074.64%2C29.95C74.64%2C30.01%2075.72%2C31.18%2077.05%2C32.54L79.47%2C35.02L78.25%2C36.5C77.57%2C37.32%2076.98%2C38.01%2076.93%2C38.03C76.88%2C38.06%2075.78%2C36.87%2074.49%2C35.39ZM86.07%2C25.35C84.45%2C22.71%2082.69%2C20.46%2080.49%2C18.23C79.65%2C17.39%2079.06%2C16.69%2079.16%2C16.69C80.1%2C16.69%2084.41%2C19.95%2087.27%2C22.82L88.47%2C24.02L87.56%2C25.15L86.64%2C26.28L86.07%2C25.35Z%22%2F%3E%20%3Cpath%20fill%3D%22%23E10600%22%20d%3D%22M76.3%2C65.76C71.9%2C65.12%2069.22%2C64.38%2066.35%2C63.01C64.13%2C61.95%2063.55%2C61.57%2061.37%2C59.76C58.98%2C57.78%2057.16%2C55.84%2055.78%2C53.79C53.66%2C50.64%2052.5%2C47.91%2051.51%2C43.75C51.11%2C42.03%2051.09%2C41.77%2051.09%2C38.28C51.09%2C34.17%2051.23%2C33.22%2052.29%2C30.06C53.72%2C25.83%2056.85%2C20.96%2059.92%2C18.18C61.65%2C16.62%2064.65%2C14.54%2066.38%2C13.7C68.27%2C12.79%2070.98%2C11.86%2073.01%2C11.42C74.39%2C11.12%2074.99%2C11.08%2078.42%2C11.08C81.85%2C11.08%2082.46%2C11.12%2083.76%2C11.41C88.99%2C12.57%2094.23%2C15.62%2098.43%2C19.94C101.2%2C22.79%20103.84%2C27.6%20104.79%2C31.57C105.51%2C34.58%20105.75%2C39.52%20105.32%2C42.35C104.37%2C48.59%20101.62%2C53.91%2097.11%2C58.21C96.38%2C58.92%2095.47%2C59.73%2095.09%2C60.01C94.72%2C60.29%2094.38%2C60.56%2094.33%2C60.61C94.11%2C60.87%2091.04%2C62.66%2089.84%2C63.23C86.87%2C64.64%2084.5%2C65.29%2081.15%2C65.62C79.86%2C65.75%2078.56%2C65.88%2078.27%2C65.91C77.98%2C65.95%2077.1%2C65.88%2076.3%2C65.76ZM82.43%2C62.03C86.18%2C61.12%2090.44%2C59.27%2092.44%2C57.68C96.16%2C54.73%2096.89%2C53.93%2098.5%2C51.09C100.2%2C48.08%20101.08%2C45.76%20101.71%2C42.66C101.92%2C41.65%20101.98%2C40.58%20101.98%2C37.98C101.98%2C34.74%20101.97%2C34.54%20101.56%2C33.03C100.81%2C30.29%2099.57%2C27.34%2098.45%2C25.63C97.73%2C24.53%2095.79%2C21.87%2095.63%2C21.76C95.21%2C21.46%2095.19%2C21.48%2091.08%2C26.57C90.33%2C27.5%2089.38%2C28.71%2088.98%2C29.26C88.58%2C29.81%2088.15%2C30.31%2088.03%2C30.38C87.83%2C30.49%2084.94%2C34%2082.7%2C36.85C82.18%2C37.51%2081.12%2C38.81%2080.35%2C39.73C76.61%2C44.24%2075.21%2C45.96%2074.23%2C47.27C73.65%2C48.05%2072.5%2C49.46%2071.67%2C50.39C69.86%2C52.44%2065.09%2C58.23%2065.09%2C58.38C65.09%2C58.53%2067.58%2C59.9%2068.7%2C60.37C69.77%2C60.81%2072.15%2C61.5%2074.11%2C61.94C74.86%2C62.1%2075.61%2C62.27%2075.77%2C62.31C76.33%2C62.44%2081.64%2C62.22%2082.43%2C62.03ZM64.06%2C53.96C65.03%2C52.71%2066.93%2C50.37%2068.27%2C48.77C69.62%2C47.16%2071.94%2C44.33%2073.45%2C42.47C76.31%2C38.93%2078.33%2C36.49%2081.81%2C32.32C82.97%2C30.94%2084.7%2C28.8%2085.67%2C27.56C86.64%2C26.32%2088.62%2C23.91%2090.06%2C22.19C91.51%2C20.47%2092.67%2C19.05%2092.64%2C19.03C91.57%2C18.22%2089.06%2C16.87%2087.49%2C16.26C84.94%2C15.27%2080.49%2C14.45%2077.64%2C14.45C72.35%2C14.45%2065.65%2C17.31%2061.31%2C21.43C59.17%2C23.46%2057.65%2C25.79%2056.4%2C28.91C54.81%2C32.9%2054.05%2C39.03%2054.73%2C42.29C55.4%2C45.49%2057.71%2C50.85%2059.04%2C52.28C59.37%2C52.63%2059.64%2C53%2059.64%2C53.1C59.64%2C53.3%2062.05%2C56.26%2062.2%2C56.25C62.25%2C56.24%2063.08%2C55.21%2064.06%2C53.96Z%22%2F%3E%20%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  border-bottom: 0 !important;
}
.header .logo img, .logo img { display: none !important; }

/* Supersede the earlier mask attempt: a cross-origin mask that fails to load
   hides the element outright, which is what blanked the wordmark. */
.header .logo a {
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
}

/* Larger wordmark, and a hover state that cannot vanish. listmonk's own
   stylesheet sets a dark a:hover colour, which on this dark ground turned
   links black on hover; these have to out-specify it. */
.header .logo a {
  width: 18.5rem;
  height: 1.86rem;
}

a { color: var(--red-bright) !important; }
a:hover {
  color: var(--bone) !important;
  border-bottom-color: var(--bone) !important;
}
footer a, .footer a { color: var(--bone-muted) !important; }
footer a:hover, .footer a:hover { color: var(--bone) !important; }