/*
 * mosesfrost.com — text-mode (TUI/BBS) stylesheet
 * Amber phosphor, monospace, full-screen shell. Fast, Lynx-friendly, no web fonts.
 */

/* ---------- Tokens ---------- */
:root{
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --bg:#0c0b08;      /* screen background (warm black)      */
  --body-fg:#d6c6a4; /* body text (dim amber-white)         */
  --fg:#e8b24c;      /* primary amber (nav, links, accents) */
  --acc:#e8b24c;     /* semantic accent alias               */
  --acc2:#ffd583;    /* bright amber (titles, hotkeys, code)*/
  --dim:#7c6d49;     /* de-emphasized (meta, headers)       */
  --border:#3a2f1a;  /* rules, pane dividers, box-drawing   */
  --sel-bg:#e8b24c;  /* inverse-video selection background  */
  --sel-fg:#0c0b08;  /* inverse-video selection foreground  */
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg)}
img{max-width:100%;height:auto}
::selection{background:var(--acc);color:var(--bg)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- Shell ---------- */
.tui{font-family:var(--mono);height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--body-fg);position:relative;overflow:hidden;
  font-size:14px;line-height:1.35}

/* title bar */
.tbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.4rem .85rem;border-bottom:1px solid var(--border);color:var(--fg);font-size:.82rem;letter-spacing:.02em}
.tbar .brand{font-weight:700;color:var(--fg);text-decoration:none}
.tbar .brand b{color:var(--acc2)}
.tbar .right{color:var(--dim);font-size:.76rem}
.cur{color:var(--acc);animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* middle: menu + content */
.mid{flex:1 1 auto;display:flex;min-height:0}
.menu{flex:0 0 16rem;border-right:1px solid var(--border);padding:.7rem;overflow-y:auto;
  display:flex;flex-direction:column;gap:.15rem}
.mh{color:var(--dim);font-size:.72rem;letter-spacing:.12em;margin:.6rem 0 .35rem}
.mh:first-child{margin-top:0}
.mi{display:block;padding:.16rem .45rem;color:var(--fg);text-decoration:none;white-space:nowrap;border:1px solid transparent}
.mi::before{content:"  ";white-space:pre}
.mi:hover{border-color:var(--border)}
.mi.sel{background:var(--sel-bg);color:var(--sel-fg);font-weight:700}
.mi.sel::before{content:"\25BA ";white-space:pre}
.mi .k{color:var(--acc2);text-decoration:underline}
.mi.sel .k{color:var(--sel-fg)}
.rec{display:block;padding:.2rem .45rem;text-decoration:none;color:var(--body-fg);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.rec:hover{color:var(--acc2)}
.rec .rd{color:var(--dim)}
.menu .spacer{flex:1 1 auto}
.menu .links{display:flex;flex-wrap:wrap;gap:.1rem .7rem;padding:.15rem .45rem;margin-bottom:.3rem}
.menu .links a{color:var(--fg);text-decoration:none;font-size:.8rem}
.menu .links a:hover{color:var(--acc2);text-decoration:underline}
.badge{margin-top:.5rem;border:1px solid var(--border);padding:.35rem .5rem;color:var(--dim);font-size:.72rem;line-height:1.5}
.badge b{color:var(--acc)}

/* content pane */
.content{flex:1 1 auto;min-width:0;overflow-y:auto;padding:1.1rem 1.6rem 3rem}
.content-inner{max-width:82ch}
.prompt{color:var(--acc);font-size:.82rem;margin-bottom:1.5rem;white-space:pre-wrap;word-break:break-word}
.prompt .dim{color:var(--dim)}

/* article */
.kick{color:var(--acc);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.7rem}
.title{font-size:1.7rem;line-height:1.18;font-weight:700;color:var(--acc2);margin-bottom:.15rem;letter-spacing:.01em}
.sub{color:var(--fg);font-size:1.02rem;margin-bottom:.9rem}
.meta{color:var(--dim);font-size:.8rem;margin-bottom:1.6rem}
.meta::before{content:"\2500\2500 ";color:var(--border)}
.prose{font-size:13.5px}
.prose p{margin-bottom:1.1rem;line-height:1.75}
.prose h2{color:var(--acc2);font-size:1.15rem;margin:1.8rem 0 .7rem;letter-spacing:.01em}
.prose h3{color:var(--fg);font-size:1rem;margin:1.4rem 0 .6rem}
.prose a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--acc2)}
.prose ul,.prose ol{margin:0 0 1.1rem 1.4rem}
.prose li{margin-bottom:.35rem;line-height:1.7}
.prose code{font-family:var(--mono);color:var(--acc2);background:rgba(255,213,131,.12);padding:.05em .35em}
.prose pre{background:#000;border:1px solid var(--border);padding:1rem;overflow-x:auto;margin:0 0 1.1rem;font-size:12.5px}
.prose pre code{background:none;padding:0;color:var(--body-fg)}
.prose blockquote{border-left:2px solid var(--acc);padding:.25rem 0 .25rem 1rem;margin:1.4rem 0;color:var(--acc2);font-size:1rem}
.prose img{margin:1.2rem 0;border:1px solid var(--border)}
.prose hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
.rule{color:var(--border);margin:2rem 0 1.4rem;overflow:hidden;white-space:nowrap}
.backlink{display:inline-block;margin-top:1.6rem;color:var(--acc);text-decoration:underline;font-size:.85rem}
.post-tags{color:var(--dim);border-top:1px solid var(--border);margin-top:2rem;padding-top:1rem;font-size:.8rem}

/* podcast audio */
.podcast-player{margin:1.4rem 0}
.podcast-player audio{width:100%;max-width:640px;filter:sepia(.35) saturate(1.3) hue-rotate(4deg)}
.episode-meta{color:var(--dim);font-size:.8rem;margin-top:.4rem}
.video-embed{margin:1.4rem 0}

/* directory listing */
.lshead{color:var(--dim);font-size:.8rem;margin-bottom:.6rem}
.listing{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:1rem}
.listing th{text-align:left;color:var(--dim);font-weight:400;border-bottom:1px solid var(--border);
  padding:.3rem .7rem;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.listing td{padding:.4rem .7rem;border-bottom:1px solid var(--border);vertical-align:baseline}
.listing tbody tr{cursor:pointer}
.listing a{color:inherit;text-decoration:none;display:block}
.listing tbody tr:hover td{color:var(--acc2);background:rgba(232,178,76,.06)}
.listing .perm{color:var(--dim);white-space:nowrap}
.listing .c-date{color:var(--dim);white-space:nowrap}
.listing .c-size{color:var(--dim);white-space:nowrap;text-align:right}
.listing .c-cat{color:var(--acc);white-space:nowrap}
.listing .c-name{color:var(--body-fg)}
.listing tbody tr:hover .c-name{color:var(--acc2)}

/* welcome / about terminal output */
.term-line{margin-bottom:.15rem}
.term-cmd{color:var(--acc)}
.term-cmd::before{content:"moses@frost:~$ ";color:var(--dim)}
.term-out{color:var(--body-fg);margin:.15rem 0 1.2rem;line-height:1.7}
.term-out a{color:var(--acc);text-decoration:underline}
.term-out h2{color:var(--acc2);font-size:1rem;margin:1.2rem 0 .5rem}
.banner{color:var(--acc2);white-space:pre;font-size:12px;line-height:1;margin:.6rem 0 1.7rem;overflow-x:auto;text-shadow:0 0 8px rgba(232,178,76,.35)}

/* footer / status bar */
.fbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.35rem .85rem;border-top:1px solid var(--border);color:var(--dim);font-size:.75rem;white-space:nowrap;overflow:hidden}
.fkeys{display:flex;gap:.9rem;flex-wrap:wrap}
.fk{color:var(--dim);text-decoration:none}
.fk:hover{color:var(--acc)}
.fk b{color:var(--bg);background:var(--acc);padding:0 .3rem;margin-right:.25rem;font-weight:700}
.fnote{color:var(--dim)}
.fnote b{color:var(--acc)}

/* help overlay */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(4,3,1,.72);display:none;align-items:center;justify-content:center;padding:1rem}
.overlay.on{display:flex}
.help-box{background:var(--bg);border:1px solid var(--acc);
  box-shadow:0 0 0 1px var(--border),0 0 40px rgba(232,178,76,.15);padding:1.2rem 1.5rem;max-width:32rem;width:100%}
.help-title{color:var(--acc2);letter-spacing:.1em;margin-bottom:1rem;font-size:.85rem}
.help-box table{width:100%;border-collapse:collapse;font-size:.85rem}
.help-box td{padding:.25rem .3rem}
.help-box .kc{color:var(--acc);white-space:nowrap;width:8rem}
.help-box .kc b{border:1px solid var(--border);padding:0 .35rem;color:var(--acc2)}
.help-foot{margin-top:1rem;color:var(--dim);font-size:.75rem}

/* CRT scanlines on the phosphor screen */
.tui::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);opacity:.5}

/* ---------- Motion / a11y ---------- */
@media (prefers-reduced-motion: reduce){
  .cur{animation:none}
  .tui::after{display:none}
}

/* ---------- Responsive ---------- */
/* Tablet/phone: stack the shell, collapse the pane to a compact nav bar */
@media (max-width:48em){
  .tui{height:auto;min-height:100dvh}
  .mid{flex-direction:column}
  .menu{flex:0 0 auto;border-right:none;border-bottom:1px solid var(--border);
    flex-direction:row;flex-wrap:wrap;gap:.3rem .45rem;align-items:center;padding:.55rem .7rem}
  .menu .mh,.menu .rec,.menu .links,.menu .spacer,.menu .badge{display:none}
  .menu .mi{padding:.3rem .6rem;border:1px solid var(--border)}
  .menu .mi::before,.menu .mi.sel::before{content:""}
  /* keep socials reachable: show CONNECT on its own line under the nav pills */
  .menu .links.connect{display:flex;flex-basis:100%;gap:.15rem .8rem;margin-top:.4rem;
    padding-top:.4rem;border-top:1px solid var(--border)}
  .content{overflow:visible;padding:1rem 1.1rem 3rem}
  .content-inner{max-width:100%}
  .tbar{flex-wrap:wrap;gap:.3rem}
  .fbar{flex-wrap:wrap;white-space:normal;gap:.3rem .8rem}
}
/* Phones: the ANSI wordmark is wider than the screen — drop it (title bar carries the brand) */
@media (max-width:40em){
  .banner{display:none}
}

/* ---------- Print ---------- */
@media print{
  .tui{height:auto;display:block;background:#fff;color:#111}
  .tbar,.menu,.fbar,.tui::after{display:none}
  .content{overflow:visible;padding:0}
  .title,.kick,.prose a{color:#111}
  .prose code{background:#eee;color:#111}
}