/* AMBER MAX */
/* variant C++ — MONOCHROME AMBER PHOSPHOR: one hue, four intensities, CRT tube */
/* public static final KITTEN — recovered-archive aesthetic.
   Paper, ink, and the blue that every WordPress blog was in 2007.
   Deliberately single-look light. No JS anywhere on this site. */

:root {
  --paper:  #100901;
  --panel:  #251803;
  --ink:    #ffb733;
  --dim:    #c08a2e;
  --rule:   #6b4a10;
  --blue:   #ffb000;
  --blue-d: #ffd98a;
  --moss:   #ffb000;
  --ochre:  #ffb000;
  --rust:   #c98f37;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DejaVu Sans Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
}

main {
  max-width: 74ch;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}

pre {
  margin: 1rem 0;
  font-family: inherit;
  font-size: 0.86em;
  line-height: 1.25;
  overflow-x: auto;
  max-width: 100%;
}

/* ---------- masthead ---------- */

.masthead { margin-bottom: 2rem; }

.modifiers {
  margin: 0 0 0.1rem;
  color: var(--dim);
  font-size: 0.95em;
  letter-spacing: 0.34em;
  text-transform: lowercase;
}

.banner {
  margin: 0;
  padding-top: 0.3em;
  color: var(--blue);
  font-size: 0.82em;
  font-weight: bold;
  line-height: 1.34;
}

.tagline {
  margin: 1.1rem 0 0;
  color: var(--ink);
  font-style: italic;
}

.cat { margin: 1.5rem 0 0; color: var(--dim); font-size: 0.95em; line-height: 1.2; }

.archivebox {
  margin: 1.6rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--panel);
  border-left: 3px solid var(--blue);
  color: var(--ink);
}

/* ---------- structure ---------- */

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4rem 0;
}

h2 {
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-d);
  margin: 0 0 1.2rem;
}

h3.ptitle {
  font-size: 1em;
  font-weight: bold;
  color: var(--blue);
  margin: 0 0 0.25rem;
}

.post.nf h3.ptitle { color: var(--ink); }

h3.sub {
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--blue-d);
  margin: 2.2rem 0 0.8rem;
}

.body-copy p { margin: 0.9rem 0; }

/* ---------- posts ---------- */

.post { margin: 0 0 2.2rem; }

.post.later, .post.nf { padding-left: 0.9rem; border-left: 2px solid var(--rule); }

.meta {
  margin: 0 0 0.6rem;
  color: var(--dim);
  font-size: 0.86em;
}

.note { margin: 0.7rem 0; }

.note.last { color: var(--dim); margin-top: 1.6rem; }

.mono { background: var(--panel); padding: 0 0.25em; }

/* ---------- quotes ---------- */

blockquote.q {
  margin: 0.9rem 0 0.9rem 0.4rem;
  padding: 0.45rem 0 0.45rem 0.9rem;
  border-left: 3px solid var(--blue);
  color: var(--ink);
}

blockquote.q.big {
  border-left-width: 5px;
  font-weight: bold;
}

blockquote.q.attrib { border-left-color: var(--dim); }

blockquote.q .attr {
  display: block;
  margin-top: 0.5rem;
  color: var(--dim);
  font-size: 0.85em;
  font-weight: normal;
}

em { font-style: italic; }

/* ---------- status labels ---------- */

.status {
  display: inline-block;
  padding: 0.05em 0.5em;
  font-size: 0.82em;
  font-weight: bold;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
}

.st-cited { color: var(--moss); }
.st-self  { color: var(--ochre); }
.st-lost  { color: var(--rust); }
.st-nf    { color: var(--rust); }

/* ---------- categories + colophon blocks ---------- */

.cats, .colo {
  padding: 0.85rem 1rem;
  background: var(--panel);
  color: var(--ink);
}

/* ---------- bios ---------- */

.bios { margin: 1.2rem 0; }
.bio { margin: 0 0 1.4rem; }
.bio .meta { margin-bottom: 0.3rem; }

/* ---------- links ---------- */

a { color: var(--blue); text-decoration: underline; }
a:visited { color: var(--blue-d); }
a:hover, a:focus { color: var(--paper); background: var(--blue); text-decoration: none; }

/* ---------- 404 ---------- */

.center-ish { text-align: center; }

/* ---------- a11y ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--blue); color: var(--paper); }


/* ============ variant C++ : MONOCHROME AMBER PHOSPHOR ============
   One phosphor, four intensities. Status is encoded by BRIGHTNESS,
   not by hue, the way an amber CRT actually worked: the things that
   can be verified burn brightest, the absences are barely lit. */

/* CRT tube: scanlines + corner falloff. Both pure CSS, no assets. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.14) 3px
  );
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
}

/* Everything glows. That is the whole point of a phosphor. */
.banner {
  color: #ffc21f;
  text-shadow: 0 0 18px rgba(255,176,0,.6), 0 0 4px rgba(255,176,0,.95);
}
.modifiers { color: #a8752e; }
.tagline   { color: #ffd98a; text-shadow: 0 0 10px rgba(255,176,0,.25); }
.cat       { color: #b07f38; text-shadow: 0 0 8px rgba(255,176,0,.2); }

h2 {
  background: #ffb000;
  color: #0a0704;
  padding: 0.42rem 0.75rem;
  margin: 0 0 1.4rem;
  border: 0;
  box-shadow: 0 0 18px rgba(255,176,0,.35);
}

h3.ptitle { color: #ffc21f; text-shadow: 0 0 10px rgba(255,176,0,.3); }
h3.sub    { color: #ffb000; text-shadow: 0 0 8px rgba(255,176,0,.25); }

/* --- intensity ladder: verified burns brightest, absence is dim --- */
.status { border: 2px solid #ffb000; padding: 0.1em 0.55em; text-shadow: none; }

.st-cited {                       /* highest intensity: check it yourself */
  background: #ffb000; color: #0a0704;
  box-shadow: 0 0 14px rgba(255,176,0,.5);
}
.st-self {                        /* mid: lit, but not filled in */
  background: transparent; color: #ffb000;
}
.st-lost, .st-nf {                /* barely lit: it is not there */
  background: transparent; color: #b8802c; border-color: #8a5f22;
}

blockquote.q { border-left-width: 4px; border-left-color: #ffb000; }
blockquote.q.big {
  border-left-width: 7px;
  color: #ffe4a3;
  text-shadow: 0 0 10px rgba(255,176,0,.3);
}
blockquote.q.attrib { border-left-color: #7a5218; }

.archivebox { border-left-width: 5px; border-left-color: #ffb000; }
.rule { border-top: 2px solid #4a3315; }
.post.later, .post.nf { border-left-color: #3d2a11; }
.post.nf h3.ptitle { color: var(--ink); text-shadow: none; }
.cats, .colo { border-left: 3px solid #4a3315; }
.mono { background: #2a1c08; }

/* Static block cursor on the last line. No animation by default. */
.note.last::after {
  content: " \2588";
  color: #ffb000;
  text-shadow: 0 0 10px rgba(255,176,0,.6);
}


/* ================= AMBER MAX =================
   The tube is warm. Ambient phosphor wash behind the whole column,
   a faint bloom on body copy, and every remaining neutral pulled
   into the amber family. */

html { background: #100901; }

body {
  background:
    radial-gradient(ellipse 80% 55% at 50% 22%, rgba(255,150,0,.10), rgba(255,150,0,0) 70%),
    radial-gradient(ellipse 60% 40% at 50% 78%, rgba(255,150,0,.06), rgba(255,150,0,0) 70%),
    #100901;
  background-attachment: fixed;
  text-shadow: 0 0 12px rgba(255,150,0,.18);
}

/* corner falloff has to sit over the warmer field */
body::after {
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 48%, rgba(0,0,0,.62) 100%);
}

.archivebox, .cats, .colo {
  background: #251803;
  box-shadow: inset 0 0 40px rgba(255,150,0,.06);
}

.meta   { color: #c08a2e; }
.dim    { color: #c08a2e; }
.mono   { background: #3a2506; color: #ffcf6b; }
.st-lost, .st-nf { color: #c98f37; border-color: #96661c; }
.rule   { border-top: 2px solid #6b4a10; }
.post.later, .post.nf { border-left-color: #5a3d0d; }
blockquote.q.attrib { border-left-color: #96661c; }

/* amber furniture right down to the scrollbar */
html { scrollbar-color: #ffb000 #100901; }
::selection { background: #ffb000; color: #100901; text-shadow: none; }