/* ---------------- themes ---------------- */
:root, [data-theme="creme"]{
  --bg:#f4f1ea; --bg-hf:#ece8dd;
  --paper:#fbf9f3; --paper-hf:#f2efe6;
  --ink:#16130f; --muted:#6a6258; --faint:#8a8175;
  --line:#d9d2c3; --line-strong:#bfb6a3; --accent:#a8411b; --max-width:1600px; --gutter:40px;
}
[data-theme="purple"]{
  --bg:#130a24; --bg-hf:#0c0617;
  --paper:#1e1136; --paper-hf:#180d2b;
  --ink:#f0e6ff; --muted:#a38fc4; --faint:#755c94;
  --line:#2e1a4a; --line-strong:#4a2c73; --accent:#ff2b7a;
}
[data-theme="night"]{
  --bg:#0f1115; --bg-hf:#0b0c0f;
  --paper:#161920; --paper-hf:#12141a;
  --ink:#e2e8f0; --muted:#94a3b8; --faint:#64748b;
  --line:#272c36; --line-strong:#3e4554; --accent:#38bdf8;
}
[data-theme="pink"]{
  --bg:#fff0f5; --bg-hf:#fce1eb;
  --paper:#ffffff; --paper-hf:#fdf2f6;
  --ink:#4a1c2c; --muted:#8c5a6d; --faint:#cfa1b2;
  --line:#f8d6e3; --line-strong:#f4b8cd; --accent:#e0568a;
}
[data-theme="army"]{
  --bg:#141a14; --bg-hf:#0f140f;
  --paper:#1e271e; --paper-hf:#192119;
  --ink:#e0ebd4; --muted:#8ea37a; --faint:#5b6e4b;
  --line:#2b382b; --line-strong:#405440; --accent:#7cb342;
}
[data-theme="brown"]{
  --bg:#140e0c; --bg-hf:#0a0706;
  --paper:#241a16; --paper-hf:#1c1411;
  --ink:#ebdcd3; --muted:#ae9587; --faint:#7a6256;
  --line:#382821; --line-strong:#4f3a30; --accent:#e07a3e;
}
/* Lightened Cherry Theme */
[data-theme="cherry"]{
  --bg:#fae6e6; --bg-hf:#f2cdcd;
  --paper:#fffafa; --paper-hf:#fcedec;
  --ink:#3b0707; --muted:#701f1f; --faint:#923333;
  --line:#e8a0a0; --line-strong:#b83a3a; --accent:#111111;
}
[data-theme="matrix"]{
  --bg:#000000; --bg-hf:#0a0a0a;
  --paper:#111111; --paper-hf:#1a1a1a;
  --ink:#00ff41; --muted:#008f11; --faint:#004d09;
  --line:#003b00; --line-strong:#005c00; --accent:#00ff41;
}
[data-theme="vapor"]{
  --bg:#1a0b2e; --bg-hf:#120720;
  --paper:#261144; --paper-hf:#1d0d33;
  --ink:#ff71ce; --muted:#01cdfe; --faint:#05ffa1;
  --line:#4a1b7a; --line-strong:#7b2cbf; --accent:#b967ff;
}
[data-theme="paper"]{
  --bg:#ffffff; --bg-hf:#f0f0f0;
  --paper:#ffffff; --paper-hf:#f9f9f9;
  --ink:#000000; --muted:#555555; --faint:#999999;
  --line:#dddddd; --line-strong:#bbbbbb; --accent:#0000ee;
}
[data-theme="terminal"]{
  --bg:#1a1100; --bg-hf:#100a00;
  --paper:#2b1d00; --paper-hf:#1f1500;
  --ink:#ffb000; --muted:#cc8800; --faint:#995500;
  --line:#4a3300; --line-strong:#664400; --accent:#ff7b00;
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease, color .3s ease;
}

a{color:inherit;text-decoration:none;transition:color .15s ease}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input{font:inherit;border:none;background:none;outline:none}

/* ---------------- header & nav ---------------- */
.header{
  position:sticky; top:0; z-index:50; background:var(--bg-hf);
  border-bottom:1px solid var(--line); transition:background-color .3s ease, border-color .3s ease;
}
.header-inner{
  max-width:var(--max-width); margin:0 auto; padding:0 var(--gutter); height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
}
.brand::before{
  content:""; width:8px; height:8px; background:var(--accent); border-radius:1px; flex-shrink:0;
}

.header-actions {
  display: flex; align-items: center; gap: 24px;
  margin-left: auto; margin-right: 24px;
}
.header-link {
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.header-link:hover { color: var(--accent); }
.header-rss { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-rss:hover { stroke: var(--accent); }
.header-btn {
  padding: 8px 16px; background: var(--ink); color: var(--bg-hf);
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; border-radius: 4px;
  transition: background .15s, color .15s;
}
.header-btn:hover { background: var(--accent); color: var(--bg-hf); }

.menu-toggle{
  position:relative; z-index:60; width:40px; height:40px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:4px; transition:background .15s ease;
}
.menu-toggle:hover{background:rgba(128,128,128,.1)}
.menu-toggle span{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .18s ease,background-color .3s ease;
  transform-origin:center;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-panel{
  position:absolute; top:64px; left:0; right:0; z-index:40;
  display:grid; grid-template-rows:0fr; visibility:hidden;
  background:var(--bg-hf); border-bottom:1px solid transparent;
  transition:grid-template-rows .35s cubic-bezier(.2,.7,.3,1),visibility 0s .35s,border-color 0s .35s,background-color .3s ease;
}
.nav-panel.open{
  grid-template-rows:1fr; visibility:visible; border-bottom-color:var(--line);
  transition:grid-template-rows .35s cubic-bezier(.2,.7,.3,1),visibility 0s 0s,border-color 0s 0s,background-color .3s ease;
}
.nav-panel-inner{overflow:hidden;min-height:0}

.nav-list{
  list-style:none; max-width:var(--max-width); margin:0 auto; padding:16px var(--gutter) 24px;
  display:flex; flex-direction:column;
}

.nav-search-item {
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.nav-search-box {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 4px;
}
.nav-search-box svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; }
.nav-search-box input { flex: 1; font-size: 16px; color: var(--ink); }
.nav-search-box input::placeholder { color: var(--faint); }

.nav-list > li.nav-item{
  border-bottom:1px solid var(--line); transition:border-color .3s ease;
}
.nav-list > li.nav-item:last-child{border-bottom:0}

.nav-list > li.nav-item > a,
.nav-list > li.nav-item > .nav-toggle{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; width:100%;
  padding:16px 0; font-size:17px; letter-spacing:-0.005em; text-align:left;
  transition:padding-left .2s ease,color .15s ease;
}
.nav-list > li.nav-item > a:hover,
.nav-list > li.nav-item > .nav-toggle:hover{padding-left:10px;color:var(--accent)}

.nav-list .num{
  font-family:ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em; color:var(--faint); flex-shrink:0;
}
.nav-toggle .chevron{
  display:inline-block; font-size:11px; margin-left:6px; color:var(--faint); transition:transform .25s ease;
}
.nav-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}

.nav-sub{
  display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .3s ease,visibility 0s .3s;
}
.nav-sub.open{grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .3s ease,visibility 0s 0s;}
.nav-sub-inner{overflow:hidden;min-height:0}
.nav-sub-inner a{
  display:block; padding:11px 0 11px 22px; font-size:15px; color:var(--muted);
  border-bottom:1px solid var(--line); transition:padding-left .2s ease,color .15s ease,border-color .3s ease;
}
.nav-sub-inner a:hover,
.nav-sub-inner a:focus-visible{padding-left:28px;color:var(--accent)}
.nav-sub-inner a:last-child{border-bottom:0}

/* ---------------- hero slider ---------------- */
main{min-height:60vh}
.container{max-width:var(--max-width); margin:0 auto; padding:0 var(--gutter)}

.hero {
  border-bottom: 1px solid var(--line); 
  position: relative; 
  transition: border-color .3s ease;
}
.slider-container {
  position: relative;
  min-height: 420px;
  padding: 80px 0 100px;
}
.slide {
  position: absolute; top: 80px; left: 0; width: 100%;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.kicker{
  display:flex; align-items:center; gap:12px; 
  font-family:ui-monospace,monospace; font-size:11px; 
  text-transform:uppercase; letter-spacing:.18em; 
  color:var(--accent); margin-bottom:24px;
}
.kicker::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--accent); border-radius:50%; }
.slide h1{ font-size:clamp(34px,4.4vw,58px); line-height:1.06; letter-spacing:-0.025em; font-weight:600; max-width:820px; }
.slide .lede{ margin-top:26px; font-size:18px; line-height:1.55; color:var(--muted); max-width:600px; }

.slider-nav { position: absolute; bottom: 48px; left: 0; display: flex; gap: 10px; z-index: 10; }
.slider-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong); border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s;
}
.slider-dot:hover { background: var(--muted); }
.slider-dot.active { background: var(--accent); transform: scale(1.2); }

/* ---------------- app controls ---------------- */
.app-controls{
  padding:32px 0 24px; display:flex; flex-direction:column; gap:20px;
  border-bottom:1px solid var(--line); margin-bottom:32px;
}
.search-bar{
  display:flex; align-items:center; gap:12px; width:100%; max-width:500px;
  padding:12px 16px; background:var(--paper); border:1px solid var(--line);
}
.search-bar svg{width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:2; flex-shrink:0;}
.search-bar input{flex:1; color:var(--ink); font-size:15px;}
.search-bar input::placeholder{color:var(--faint)}

.filter-tags{display:flex; flex-wrap:wrap; gap:8px;}
.filter-btn{
  font-family:ui-monospace,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  padding:6px 12px; border:1px solid var(--line); color:var(--muted); background:transparent; transition:.15s;
}
.filter-btn:hover{border-color:var(--line-strong); color:var(--ink);}
.filter-btn.active{background:var(--ink); border-color:var(--ink); color:var(--bg);}

/* ---------------- card grid ---------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; padding-bottom:80px; }
.card{
  display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  transition:border-color .15s ease, transform .15s ease, background-color .3s ease;
  position:relative; animation:fadeIn .4s ease forwards; opacity:0;
}
@keyframes fadeIn { to { opacity: 1; } }
.card:hover{border-color:var(--line-strong); transform:translateY(-2px);}

.card-topbar{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:var(--paper-hf); }
.card-num{
  display:flex; align-items:center; justify-content:center; width:36px; height:32px;
  font-family:ui-monospace,monospace; font-size:12px; font-weight:700; color:#fff;
  background:var(--card-accent, var(--ink));
}
.card-category{ padding-right:16px; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }

.card-image{height:180px; position:relative; border-bottom:1px solid var(--line);}
.card-image-inner{
  position:absolute; inset:0; background:var(--card-accent, var(--line));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-image-inner::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 10px, transparent 10px 20px); }
.card-icon{
  position:absolute; bottom:-28px; left:20px; width:56px; height:56px;
  background:var(--card-accent, var(--ink)); border:3px solid var(--paper); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,monospace; font-size:24px; font-weight:700; color:#fff;
  z-index:10; box-shadow:0 4px 12px rgba(0,0,0,0.08); transition:border-color .3s ease;
}
.card-body{padding:36px 20px 20px; display:flex; flex-direction:column; flex:1;}
.card-title{font-size:22px; font-weight:600; letter-spacing:-0.02em; line-height:1.2; margin-bottom:8px;}
.card-title span{color:var(--card-accent, var(--accent));}
.card-desc{font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:20px; flex:1;}

.card-badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px;}
.badge{
  font-family:ui-monospace,monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 8px; border:1px solid var(--line-strong); color:var(--muted); background:transparent;
}
.badge.highlight { border-color:var(--card-accent, var(--accent)); color:var(--card-accent, var(--accent)); }
.card-footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--line);}
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink); font-weight:600; transition:color .15s ease;
}
.card:hover .card-link{color:var(--card-accent, var(--accent));}
.card-link svg{width:10px; height:10px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

/* ---------------- footer & newsletter ---------------- */
footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
  background: var(--bg-hf);
  transition: background-color .3s ease, border-color .3s ease;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

@media (min-width: 900px) {
  .footer-main {
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
  }
}

/* Left Column: Brand & Newsletter */
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.footer-logo-row .brand {
  font-size: 20px;
}

/* Newsletter Box */
.newsletter-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 16px;
}
.newsletter-label strong {
  color: var(--ink);
  font-weight: 600;
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newsletter-form-row {
  display: flex;
  width: 100%;
  max-width: 500px;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-right: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--accent);
}
.newsletter-form .action-link {
  padding: 12px 24px;
  border-radius: 0 4px 4px 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.newsletter-form .action-link:hover {
  opacity: 0.9;
}
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.5;
  margin-top: 8px;
}
.newsletter-consent input {
  margin-top: 3px;
}

/* Right Column: Expanded Nav (Desktop Only) */
.footer-nav-expanded {
  display: none; /* Hidden on mobile */
}
@media (min-width: 900px) {
  .footer-nav-expanded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.footer-nav-group h4 {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-bottom: 20px;
  font-weight: 500;
}
.footer-nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav-group a {
  font-size: 15px;
  color: var(--ink);
  transition: color 0.15s ease;
}
.footer-nav-group a:hover {
  color: var(--accent);
}

/* Bottom Row */
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the rows on mobile */
  gap: 24px;
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between; /* Pushes them to edges on desktop */
    align-items: center;
  }
}

.footer-nav-basic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers links on mobile */
  gap: 16px 24px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.footer-nav-basic a {
  color: var(--muted);
}
.footer-nav-basic a:hover {
  color: var(--accent);
}

.footer-meta {
  display: flex;
  justify-content: center; /* Centers text on mobile */
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.footer-meta a {
  color: inherit;
  transition: color 0.15s ease;
}
.footer-meta a:hover {
  color: var(--accent);
}

/* ---------------- responsive tweaks ---------------- */
@media (max-width:1024px){:root{--gutter:28px}}
@media (max-width:768px){
  .header-actions { display: none; }
  .slider-container { min-height: 480px; padding: 60px 0 80px; }
  .slide { top: 60px; }
  .slider-nav { bottom: 32px; }
  .slide h1 { font-size: 32px; }
}
@media (max-width:640px){
  :root{--gutter:20px}
  .app-controls{padding:24px 0 16px}
  .grid{grid-template-columns:1fr}
  .card-icon {width: 48px; height: 48px; font-size: 20px; bottom: -24px;}
  .card-body {padding-top: 32px;}
  .footer-meta{flex-direction:column; align-items:center}
}

/* Mobile Newsletter & Footer Tweaks */
/* Mobile Newsletter & Footer Tweaks */
@media (max-width: 899px) {
  /* Hides the dot and "tinyfiles.tv" brand */
  .footer-logo-row {
    display: none; 
  }
  
  /* Centers "The Dispatch" and the text underneath it */
  .newsletter-label {
    justify-content: center;
    text-align: center;
  }
  
  /* Center the form and KEEP it inline */
  .newsletter-form-row {
    flex-direction: row; 
    margin: 0 auto;
  }
  
  .newsletter-form input[type="email"] {
    border-right: none;
    border-bottom: 1px solid var(--line);
    border-radius: 4px 0 0 4px;
    min-width: 0; 
  }
  
  .newsletter-form .action-link {
    border-radius: 0 4px 4px 0;
    width: auto; 
    white-space: nowrap; 
  }
  
  /* Center the checkbox block */
  .newsletter-consent {
    margin: 8px auto 0 auto; /* Centers the block horizontally */
    flex-direction: row;
    align-items: flex-start;
    justify-content: center; /* Centers the checkbox + text */
    text-align: center; /* Centers the text */
    max-width: 500px; /* Matches form width for perfect alignment */
  }
  
  .newsletter-consent input {
    margin-top: 3px;
    margin-bottom: 0;
    width: auto;
    height: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}