/* =========================================================
   BITÁCORA TEOLÓGICA — hoja de estilos compartida
   Fuente real usada por el sitio modelo (cyberspace.online):
   Departure Mono, de Helena Zhang (SIL OFL) — auto-hospedada
   en /assets/fonts. La tipografía y el tamaño se mantienen
   fijos en los 11 temas; solo cambia la paleta de color,
   igual que en el sitio modelo.
   ========================================================= */

@font-face{
  font-family:'Departure Mono';
  src:url('fonts/DepartureMono-Regular.woff2') format('woff2'),
      url('fonts/DepartureMono-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-base: 'Departure Mono', 'Courier New', monospace;
  --font-size-base: 16px;
  --line-height: 1.6;
  --radius: 10px;
  --border-w: 1px;
  --letter-spacing: 0;
}

/* ---------- THEME: DARK (default — calco del sitio modelo) ---------- */
html[data-theme="dark"]{
  --bg:#000000; --bg-alt:#0a0a0a; --panel:#0a0a0a;
  --fg:#e9e2c9; --fg-dim:#8f8a76; --accent:#f2ecd4; --accent-2:#c9c2a4;
  --link:#e9e2c9; --border:#3a3626; --glow:none;
}

/* ---------- THEME: LIGHT ---------- */
html[data-theme="light"]{
  --bg:#f5f3ec; --bg-alt:#ffffff; --panel:#ffffff;
  --fg:#141310; --fg-dim:#5c584a; --accent:#141310; --accent-2:#4a4636;
  --link:#141310; --border:#d8d3bf; --glow:none;
}

/* ---------- THEME: LCD ---------- */
html[data-theme="lcd"]{
  --bg:#9bab8f; --bg-alt:#a6b699; --panel:#a6b699;
  --fg:#1c2a17; --fg-dim:#42523a; --accent:#12220f; --accent-2:#1c2a17;
  --link:#12220f; --border:#7f8f73; --glow:none;
  --radius:0px;
}

/* ---------- THEME: C64 ---------- */
html[data-theme="c64"]{
  --bg:#40318d; --bg-alt:#4a3ba0; --panel:#4a3ba0;
  --fg:#a8a0ff; --fg-dim:#8478d6; --accent:#e8e4ff; --accent-2:#b8b0ff;
  --link:#e8e4ff; --border:#7869c4; --glow:0 0 8px rgba(184,176,255,.4);
}

/* ---------- THEME: VT320 ---------- */
html[data-theme="vt320"]{
  --bg:#0c0c0c; --bg-alt:#111; --panel:#111;
  --fg:#f2a663; --fg-dim:#a56c37; --accent:#ffe0bb; --accent-2:#ffcc99;
  --link:#ffe0bb; --border:#3a2413; --glow:0 0 8px rgba(255,176,102,.4);
}

/* ---------- THEME: MATRIX ---------- */
html[data-theme="matrix"]{
  --bg:#000000; --bg-alt:#030a03; --panel:#030a03;
  --fg:#33ff66; --fg-dim:#1c8a3a; --accent:#c8ffd8; --accent-2:#33ff66;
  --link:#c8ffd8; --border:#0f3a1c; --glow:0 0 8px rgba(51,255,102,.5);
}

/* ---------- THEME: POETRY ---------- */
html[data-theme="poetry"]{
  --bg:#f6f0e4; --bg-alt:#fbf7ee; --panel:#fbf7ee;
  --fg:#2c2416; --fg-dim:#6b5f47; --accent:#8a5a3b; --accent-2:#5c6b47;
  --link:#8a5a3b; --border:#e3d9c2; --glow:none;
  --radius:16px;
}

/* ---------- THEME: BRUTALIST ---------- */
html[data-theme="brutalist"]{
  --bg:#ffffff; --bg-alt:#ffffff; --panel:#ffffff;
  --fg:#000000; --fg-dim:#000000; --accent:#000000; --accent-2:#ff0000;
  --link:#000000; --border:#000000; --glow:none;
  --border-w:3px; --radius:0px;
}

/* ---------- THEME: GRiD ---------- */
html[data-theme="grid"]{
  --bg:#1a1006; --bg-alt:#201408; --panel:#201408;
  --fg:#ffb000; --fg-dim:#a06e00; --accent:#ffe8b0; --accent-2:#ff9500;
  --link:#ffe8b0; --border:#4a3007; --glow:0 0 8px rgba(255,176,0,.4);
}

/* ---------- THEME: CRYPT ---------- */
html[data-theme="crypt"]{
  --bg:#0b0505; --bg-alt:#120808; --panel:#120808;
  --fg:#c9a9a9; --fg-dim:#7a5555; --accent:#eecccc; --accent-2:#d94040;
  --link:#eecccc; --border:#3a1414; --glow:0 0 8px rgba(138,20,20,.45);
}

/* ---------- THEME: BUBBLEGUM ---------- */
html[data-theme="bubblegum"]{
  --bg:#ffe6f2; --bg-alt:#fff0f8; --panel:#fff0f8;
  --fg:#5a2140; --fg-dim:#a05a80; --accent:#d6217e; --accent-2:#5ec8d8;
  --link:#d6217e; --border:#ffc2e0; --glow:none;
  --radius:18px;
}

/* ============ base ============ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-base);
  font-size:var(--font-size-base);
  line-height:var(--line-height);
  letter-spacing:var(--letter-spacing);
}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
a:hover{opacity:.8;}
h1,h2,h3,h4{
  font-family:var(--font-base);
  font-weight:400;
  color:var(--fg);
  line-height:1.3;
}
html[data-theme="brutalist"] h1, html[data-theme="brutalist"] h2, html[data-theme="brutalist"] h3{
  text-transform:uppercase;
}

.wrap{max-width:860px;margin:0 auto;padding:0 20px;}

/* ---- header / hero box (calco del panel principal del sitio modelo) ---- */
.hero{
  max-width:820px;margin:28px auto 0;padding:0 20px;
}
.hero-box{
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-alt);
  padding:26px 30px 20px;
}
.brand-title{
  font-size:1.6rem;
  letter-spacing:.03em;
  color:var(--accent);
  text-shadow:var(--glow);
  margin:0 0 4px;
}
.brand-sub{color:var(--fg-dim);font-size:.85rem;margin:0 0 18px;}

nav.mainnav{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;margin-bottom:16px;}
nav.mainnav a{color:var(--fg-dim);}
nav.mainnav a.active{color:var(--link);font-weight:700;text-decoration:none;}

.theme-row{
  border-top:var(--border-w) solid var(--border);
  padding-top:14px;margin-top:16px;
  font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;
}
.theme-row .label{color:var(--fg-dim);margin-right:2px;}
.theme-row button{
  background:none;border:none;padding:0;margin:0;
  font-family:var(--font-base);font-size:.85rem;cursor:pointer;
  color:var(--fg-dim);text-decoration:underline;text-underline-offset:3px;
}
.theme-row button.active{
  color:var(--link);font-weight:700;text-decoration:none;cursor:default;
}

/* ---- layout blocks ---- */
main{padding:32px 0 64px;}
.intro{
  border:var(--border-w) solid var(--border);
  background:var(--panel);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:32px;
}
.intro p{margin:.6em 0;}
.intro .tag{
  display:inline-block;color:var(--accent);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px;
}

.section-title{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
  margin:36px 0 14px;border-bottom:var(--border-w) solid var(--border);padding-bottom:8px;
}

.cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
}
.cat-card{
  display:block;border:var(--border-w) solid var(--border);background:var(--panel);
  border-radius:var(--radius);padding:16px 18px;color:var(--fg);text-decoration:none;
}
.cat-card:hover{border-color:var(--accent);opacity:.9;}
.cat-card .num{color:var(--fg-dim);font-size:.72rem;letter-spacing:.1em;}
.cat-card h3{margin:6px 0 6px;font-size:1.02rem;color:var(--fg);text-decoration:underline;text-underline-offset:3px;}
.cat-card p{margin:0;color:var(--fg-dim);font-size:.82rem;line-height:1.5;}

.links-list{display:flex;flex-direction:column;gap:10px;}
.link-row{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  border:var(--border-w) solid var(--border);background:var(--panel);
  border-radius:var(--radius);padding:12px 16px;
}
.link-row .lname{color:var(--fg);}
.link-row .ldesc{color:var(--fg-dim);font-size:.8rem;}
.link-row a.go{color:var(--link);font-size:.82rem;white-space:nowrap;}

.article header.meta{
  border-bottom:var(--border-w) solid var(--border);
  padding-bottom:16px;margin-bottom:24px;
}
.article .kicker{color:var(--accent);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;}
.article h1{font-size:1.6rem;margin:.3em 0 .2em;}
.article .byline{color:var(--fg-dim);font-size:.82rem;}
.article .content p{margin:1em 0;}
.article .content h2{font-size:1.05rem;margin-top:1.8em;color:var(--accent-2);}
.article .content blockquote{
  margin:1.2em 0;padding:10px 16px;border-left:3px solid var(--accent);
  background:var(--bg-alt);color:var(--fg-dim);font-style:italic;
}

.editable{
  border:1px dashed var(--fg-dim);
  padding:2px 6px;color:var(--fg-dim);font-size:.85em;
}

footer.site-footer{
  border-top:var(--border-w) solid var(--border);
  padding:24px 0;color:var(--fg-dim);font-size:.78rem;
}

.breadcrumb{font-size:.78rem;color:var(--fg-dim);margin-bottom:18px;}

.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.img-card{border:var(--border-w) solid var(--border);background:var(--panel);border-radius:var(--radius);padding:14px;}
.img-card .ph{
  height:130px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--fg-dim);font-size:.75rem;margin-bottom:10px;
}
.img-card h4{margin:0 0 4px;font-size:.9rem;}
.img-card p{margin:0;color:var(--fg-dim);font-size:.78rem;}

code{
  font-family:var(--font-base);
  background:var(--bg-alt);
  border:1px solid var(--border);
  padding:1px 5px;
  border-radius:4px;
  font-size:.85em;
}

@media (max-width:600px){
  .hero-box{padding:20px 18px 16px;}
}