/* mikesploit: a terminal that powers on when you arrive.
   Off is true black. On is a lit panel. That difference is the design. */
:root {
  color-scheme: dark;
  --off: #000000;      /* screen off */
  --panel: #1b1c19;    /* screen lit */
  --text: #d6d2c4;     /* phosphor-warm body text */
  --dim: #8f8b7f;      /* secondary text, branches, markers */
  --user: #8cc084;     /* PS1 user@host, as in a default bash prompt */
  --dir: #7aa2d6;      /* directories and links, as in ls colours */
  --led: #d99a2b;      /* boot orb */
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--panel); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--panel); color: var(--text);
  font: 15px/1.65 var(--mono); font-variant-ligatures: none;
}
@media (max-width: 34rem) { body { font-size: 14px; } }
::selection { background: var(--text); color: var(--panel); }

a { color: var(--dir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); text-decoration-color: var(--dir); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--dir); outline-offset: 3px; }

.u { color: var(--user); font-weight: 700; }
.p { color: var(--dir); font-weight: 700; }

/* ---------- screen ---------- */
.screen {
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.1rem, 6vw, 5rem) 3rem;
  max-width: calc(78ch + 12vw);
}
.line { margin: 0; font-size: 1em; font-weight: 400; }
.cursor {
  display: inline-block; width: .6em; height: 1.15em; margin-left: 1px;
  vertical-align: -.2em; background: var(--text);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- home ---------- */
.motd { margin-bottom: 1.6em; }
.motd h1 { margin: 0; font-size: 1em; font-weight: 700; letter-spacing: .02em; }
.motd p { margin: 0; color: var(--dim); max-width: 62ch; }

.tree, .tree .sub { list-style: none; margin: 0; padding: 0; }
.tree { margin: 0 0 .2em; }
.tree li { white-space: pre; }
.tree .br, .tree .root, .tree .pad { color: var(--dim); }
.tree a { text-decoration: none; padding: .05em .15em; margin: 0 -.15em; border-radius: 2px; }
.tree a.d { font-weight: 700; }
.tree a.f { color: var(--text); }
.tree a:hover, .tree a:focus-visible { background: var(--text); color: var(--panel); outline: none; }
.tree .desc { color: var(--dim); white-space: normal; }
.tree .sub { white-space: normal; }
@media (max-width: 40rem) {
  .tree .pad { display: none; }
  .tree .desc { display: block; padding-left: 4ch; margin-bottom: .35em; }
  .tree .sub .desc { padding-left: 8ch; }
}

/* boot: only exists when JS is running; without JS the tree is simply there.
   A lo-fi orb blooms on true black, collapses into a scanline, and the panel
   powers on underneath. Every load of the home page; under a second. */
.boot { display: none; }
html.booting .home .boot {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 2;
  background: var(--off);
  background-image: repeating-linear-gradient(to bottom, rgba(255, 246, 224, .035) 0 1px, transparent 1px 3px);
  animation: boot-out .22s ease .68s forwards;
}
.boot .orb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #fff6e0 0%, #f2c46b 30%, var(--led) 55%, rgba(217, 154, 43, 0) 72%);
  box-shadow: 0 0 22px 8px rgba(217, 154, 43, .5), 0 0 70px 26px rgba(217, 154, 43, .16);
  filter: blur(.4px);
  animation: orb .72s cubic-bezier(.2, .8, .2, 1) forwards, flicker .09s steps(2) 6;
}
@keyframes orb {
  0%   { transform: scale(.15); opacity: 0; }
  30%  { transform: scale(1.5); opacity: 1; }
  62%  { transform: scale(1);   opacity: 1; }
  100% { transform: scaleX(60) scaleY(.06); opacity: 0; }
}
@keyframes flicker { 50% { filter: blur(.4px) brightness(1.35); } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
html.booting, html.booting body.home { background: var(--off); }

/* power on: the panel lights, the command types, the tree unfolds line by line */
html.js:not(.instant) .home .screen { animation: power .45s ease-out .62s both; }
@keyframes power {
  from { opacity: 0; filter: brightness(2.2) blur(1px); }
  to   { opacity: 1; filter: none; }
}
html.js .home .reveal { opacity: 0; transform: translateX(-.6ch); transition: opacity .18s ease, transform .18s ease; }
html.js.awake .home .reveal { opacity: 1; transform: none; }
html.instant .home .screen { animation: none; }
html.instant .home .reveal { transition: none; }
.reboot { color: var(--dim); }
/* ---------- inner pages ---------- */
.bar { padding: .9rem clamp(1.1rem, 6vw, 5rem); border-bottom: 1px solid #2c2d29; }
.bar nav { display: flex; flex-wrap: wrap; gap: .2em 2ch; }
.bar a { color: var(--text); text-decoration: none; padding: 0 .15em; margin: 0 -.15em; border-radius: 2px; }
.bar a.d { color: var(--dir); font-weight: 700; }
.bar a.home-link { color: var(--dim); }
.bar a:hover { background: var(--text); color: var(--panel); }
.bar a[aria-current="page"] { background: #34352f; }

.page .screen > h1.line { margin-bottom: 1.4em; }
.doc { max-width: 72ch; }
.doc h2 { font-size: 1em; font-weight: 700; margin: 2em 0 .6em; }
.doc .mk { color: var(--dim); font-weight: 400; }
.doc p { margin: 0 0 1em; }
.doc ul { list-style: none; margin: 0 0 1em; padding: 0; }
.doc li { padding-left: 2ch; text-indent: -2ch; margin-bottom: .55em; }
.doc li::before { content: "- "; color: var(--dim); }
.doc ol { list-style: none; margin: 0 0 1em; padding: 0; counter-reset: n; }
.doc ol > li { counter-increment: n; padding-left: 3ch; text-indent: -3ch; }
.doc ol > li::before { content: counter(n) ". "; }
.doc pre.art { background: none; padding: 0; margin: .4em 0 1.6em; font-size: .75em; line-height: 1.15; }
.art .ink { color: #000; }
.art-poppy { color: #d2453a; }
.doc strong { font-weight: 700; color: #efebdf; }
.doc em { font-style: italic; }
.doc code { color: var(--user); }
.end { margin-top: 2.2em; }
.err { font-size: 1em; font-weight: 400; margin: 0 0 1.4em; }
.foot { padding: 0 clamp(1.1rem, 6vw, 5rem) 2.5rem; color: var(--dim); font-size: .93em; }
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cursor, .boot .orb { animation: none; }
  html.js .home .screen { animation: none; }
  html.js .home .reveal { transition: none; transform: none; }
}

/* Listings and paper/post meta (papers, posts) */
.listing { list-style: none; padding: 0; }
.listing li { margin: 0.35rem 0; }
.listing .date, .meta { color: var(--dim); font-variant-numeric: tabular-nums; }
.empty { color: var(--dim); }
pre { overflow-x: auto; white-space: pre; }
.doc pre { margin: 0 0 1em; padding: .8em 1em; background: rgba(0, 0, 0, .35); border-radius: 6px; font-size: .9em; line-height: 1.45; }
.doc pre code { color: inherit; }


/* figures in posts (images under content/posts/img/) */
.doc figure { margin: 1.2rem 0; }
.doc figure img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.doc figcaption { color: var(--dim); font-size: 0.9em; margin-top: 0.4rem; }
.doc blockquote { margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--dim); }
.doc blockquote p { margin: 0.4rem 0; }