/* ============================================================
   DJZS-Terminal — Terminal Brutalism template for Planet
   Reskin of Plain. Targets Plain's existing class contract.
   Tokens locked to the DST web pages.
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --bg-raised:#0d0d0d;
  --accent:#3dff88;
  --accent-dim:rgba(61,255,136,0.10);
  --accent-line:rgba(61,255,136,0.32);
  --text:#e6e6e6;
  --muted:#6e6e6e;
  --border:#1c1c1c;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--mono);font-weight:400;line-height:1.7;font-size:15px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;}
::selection{background:var(--accent);color:#06150c;}

/* ---- layout ---- */
.wrapper{max-width:820px;margin:0 auto;padding:0 24px;}
.main{padding:0 0 96px;position:relative;}
/* top accent rule across the whole page */
body::before{content:"";display:block;height:2px;background:var(--accent);
  box-shadow:0 0 24px var(--accent-line);}

/* ---- breadcrumb (article back-nav) ---- */
.breadcrumb{border-bottom:1px solid var(--border);margin:0 0 8px;}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;padding:14px 0;
  font-size:12px;color:var(--muted);letter-spacing:0.02em;}
.breadcrumb a{color:var(--muted);} .breadcrumb a:hover{color:var(--accent);}
.breadcrumb-avatar-image{border-radius:2px;vertical-align:middle;}
.chevron{color:var(--accent);opacity:.6;}

/* ============================================================
   BOOT SEQUENCE HEADER  (injected in modules/top.html)
   ============================================================ */
.boot{
  border:1px solid var(--border);background:var(--bg-raised);
  padding:18px 20px;margin:28px 0 26px;
  font-size:12.5px;line-height:1.95;color:var(--muted);letter-spacing:0.02em;
}
.boot .k{color:var(--accent);}
.boot .v{color:var(--text);}
.boot .ok{color:var(--accent);font-weight:600;}
.boot .cursor{display:inline-block;width:8px;height:14px;background:var(--accent);
  margin-left:4px;transform:translateY(2px);animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* ---- site header ---- */
.top{display:flex;align-items:center;gap:18px;padding:6px 0 4px;}
.avatar{border-radius:3px;border:1px solid var(--border);}
.site-info{min-width:0;}
.site-title{font-size:clamp(24px,5vw,38px);font-weight:800;letter-spacing:-0.02em;
  line-height:1.1;color:var(--text);}
.site-about{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.55;max-width:64ch;}
.site-about a{color:var(--accent);}

/* ---- nav ---- */
.nav-container{border-bottom:1px solid var(--border);margin:22px 0 0;}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:14px 0;}
.nav-item,.nav-current{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  font-weight:600;padding:3px 0;}
.nav-item{color:var(--muted);} .nav-item:hover{color:var(--text);text-decoration:none;}
.nav-current{color:var(--accent);border-bottom:1px solid var(--accent);}
.social-icon{vertical-align:middle;width:15px;height:15px;
  /* tint monochrome svgs toward muted, accent on hover */
  filter:brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg);
  opacity:.75;transition:opacity .15s,filter .15s;}
.nav a:hover .social-icon{opacity:1;
  filter:brightness(0) saturate(100%) invert(82%) sepia(46%) saturate(900%) hue-rotate(75deg);}

/* ============================================================
   INDEX — list of issues
   ============================================================ */
.items{margin:8px 0 0;}
.item{padding:24px 0;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr;gap:6px;}
.item-hero-image img{border:1px solid var(--border);border-radius:4px;margin-bottom:10px;}
.item-title{font-size:clamp(16px,2.6vw,20px);font-weight:700;letter-spacing:-0.01em;
  line-height:1.25;}
.item-title a{color:var(--text);}
.item-title a:hover{color:var(--accent);text-decoration:none;}
.item-info{display:flex;align-items:center;gap:10px;margin-top:2px;}
.item-date{font-size:12px;color:var(--muted);letter-spacing:0.04em;}
.item-date::before{content:"// ";color:var(--accent);opacity:.6;}
.item-video-icon,.item-audio-icon{opacity:.7;}

/* pagination */
.pages-container{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:26px 0 0;font-size:12px;color:var(--muted);letter-spacing:0.04em;}
.pages-container a{color:var(--accent);}
.pages-info{color:var(--muted);}

/* ============================================================
   ARTICLE (issue) PAGE
   ============================================================ */
.main > h1{font-size:clamp(26px,5vw,42px);font-weight:800;letter-spacing:-0.02em;
  line-height:1.12;margin:30px 0 10px;color:var(--text);}
.main > .date{font-size:12.5px;color:var(--muted);letter-spacing:0.04em;
  margin-bottom:28px;}
.main > .date::before{content:"// ";color:var(--accent);opacity:.6;}

/* article body typography — styles rendered markdown in {{ content_html }} */
.content{font-size:15px;line-height:1.75;color:var(--text);max-width:72ch;}
.content > *:first-child{margin-top:0;}
.content p{margin:0 0 18px;}
.content h1,.content h2,.content h3,.content h4{
  letter-spacing:-0.015em;line-height:1.2;color:var(--text);font-weight:800;}
.content h1{font-size:1.7em;margin:38px 0 16px;}
.content h2{font-size:1.4em;margin:34px 0 14px;}
.content h3{font-size:1.18em;margin:28px 0 12px;font-weight:700;}
.content h4{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);margin:22px 0 10px;}
.content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.content strong{color:var(--text);font-weight:700;}
.content em{color:var(--accent);font-style:normal;}
.content hr{border:none;border-top:1px solid var(--border);margin:30px 0;}

.content ul,.content ol{margin:0 0 18px;padding-left:0;}
.content li{margin-bottom:9px;}
.content ul{list-style:none;}
.content ul > li{position:relative;padding-left:22px;}
.content ul > li::before{content:"\25B8";position:absolute;left:0;color:var(--accent);}
.content ol{list-style:none;counter-reset:item;}
.content ol > li{counter-increment:item;position:relative;padding-left:34px;}
.content ol > li::before{content:counter(item,decimal-leading-zero);position:absolute;
  left:0;top:0;color:var(--accent);font-weight:700;font-size:12px;}

/* blockquote -> invariant callout (matches the DST pages) */
.content blockquote{border-left:2px solid var(--accent);background:var(--accent-dim);
  padding:14px 18px;border-radius:0 4px 4px 0;margin:18px 0;color:var(--text);}
.content blockquote p{margin:0;}
.content blockquote p::before{content:"// ";color:var(--accent);font-weight:700;}

/* inline + block code -> terminal panel */
.content code{font-family:var(--mono);font-size:.88em;background:#111;
  border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:var(--accent);}
.content pre{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:4px;padding:16px 18px;overflow-x:auto;margin:18px 0;line-height:1.6;}
.content pre code{background:none;border:none;padding:0;color:var(--text);font-size:12.5px;}

.content img{border:1px solid var(--border);border-radius:4px;margin:18px 0;}
.content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px;}
.content th,.content td{border:1px solid var(--border);padding:8px 12px;text-align:left;}
.content th{color:var(--accent);font-weight:700;background:var(--bg-raised);}

/* task list checkboxes */
.content li:has(input[type="checkbox"]){list-style:none;}

/* video / audio */
.video-container,.audio-container{margin:18px 0;}
.video,.audio{width:100%;border:1px solid var(--border);border-radius:4px;}

/* article tags */
.tags-container{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:32px 0 0;padding-top:18px;border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag-item{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  border:1px solid var(--accent-line);color:var(--accent);
  padding:3px 9px;border-radius:3px;}
.tag-item:hover{background:var(--accent);color:#06150c;text-decoration:none;}

/* ============================================================
   ARCHIVE + TAGS pages
   ============================================================ */
.archive-container,.tag-container{padding:30px 0 8px;border-bottom:1px solid var(--border);
  margin-bottom:18px;}
.archive-title,.tag-title{font-size:clamp(20px,4vw,30px);font-weight:800;
  letter-spacing:-0.02em;color:var(--text);}
.archive-count,.tag-count{font-size:12px;color:var(--muted);letter-spacing:0.04em;margin-top:4px;}
.archive-count::before,.tag-count::before{content:"// ";color:var(--accent);opacity:.6;}
.tag-caption{font-size:12px;color:var(--muted);margin-bottom:6px;}
.tag-caption a{color:var(--accent);}

.archive-list{margin:0;}
.archive-list-header{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin:26px 0 10px;}
.archive-list-item{padding:8px 0;border-bottom:1px solid var(--border);}
.archive-list-item a{color:var(--text);}
.archive-list-item a:hover{color:var(--accent);text-decoration:none;}

.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.tag-cloud-item{border:1px solid var(--border);border-radius:3px;padding:6px 12px;
  font-size:13px;}
.tag-cloud-item a{color:var(--text);}
.tag-cloud-item:hover{border-color:var(--accent-line);}
.tag-cloud-item-count{color:var(--muted);font-size:11px;margin-left:6px;}

/* ============================================================
   BRAND FOOTER  (injected in base.html)
   ============================================================ */
.brand-footer{margin-top:48px;padding:22px 0 0;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  font-size:11.5px;color:var(--muted);letter-spacing:0.02em;}
.brand-footer .end{color:var(--accent);font-weight:600;}
.brand-footer .ens a{color:var(--accent);}
.brand-footer .wallet{font-size:10.5px;word-break:break-all;color:var(--muted);}

/* Plain's toggled footer — keep it quiet if it appears */
#footer .footer-inner{color:var(--muted);font-size:12px;padding:20px 0;}

/* ---- responsive ---- */
@media (max-width:560px){
  .wrapper{padding:0 18px;}
  .top{gap:14px;}
  .content{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .boot .cursor{animation:none;}
  html{scroll-behavior:auto;}
}