/* ─────────────────────────────────────────────────────────────
   candiedbrain.com
   A committed single-theme design: amber phosphor on warm black.
   Every colour is stated explicitly so the page never borrows a
   host's ground. No dark/light swap — this is one world.
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

:root{
  --ground:#0d0c0a;
  --surface:#15120d;
  --line:#38301f;
  --line-soft:#241e15;
  --amber:#ffb000;
  --amber-dim:#c98a1e;
  --text:#e9dcc4;
  --muted:#8d7f66;
  --faint:#6a5f4c;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
}

html{background:var(--ground)}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}

/* Scanlines. Static, not animated — texture, not a gimmick. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,176,0,.030) 0px,
    rgba(255,176,0,.030) 1px,
    transparent 1px,
    transparent 3px
  );
}

.shell{
  max-width:44rem;
  margin:0 auto;
  padding:3rem 1.5rem 4rem;
  position:relative;
  z-index:1;
}

/* ── masthead ─────────────────────────────────────────────── */
.rule-double{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  height:3px;
}
.masthead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:.9rem 0;
}
h1{
  margin:0;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--amber);
  text-shadow:0 0 20px rgba(255,176,0,.32);
}
h1 a{color:inherit;text-decoration:none}
h1 .dot{color:var(--faint);font-weight:400}
.since{
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ── the human voice, in serif against all this mono ──────── */
.tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  line-height:1.5;
  color:var(--text);
  margin:2.75rem 0 3.25rem;
  max-width:30rem;
  text-wrap:balance;
}
.cursor{
  display:inline-block;
  width:.5em;
  height:1.05em;
  margin-left:.12em;
  background:var(--amber);
  vertical-align:-.14em;
  animation:blink 1.15s step-end infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cursor{animation:none;opacity:.85}
}

/* ── the index ────────────────────────────────────────────── */
.label{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 .85rem;
}
.index{
  list-style:none;
  margin:0 0 3rem;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.index li{border-bottom:1px solid var(--line-soft)}

.entry{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.95rem .25rem;
  text-decoration:none;
  color:inherit;
}
a.entry:hover,a.entry:focus-visible{background:var(--surface);outline:none}
a.entry:hover .name,a.entry:focus-visible .name{color:var(--amber)}
a.entry:focus-visible{box-shadow:inset 2px 0 0 var(--amber)}

.name{
  font-weight:700;
  font-size:1.02rem;
  color:var(--text);
  white-space:nowrap;
  transition:color .12s;
}
.name::before{content:"[ ";color:var(--faint);font-weight:400}
.name::after{content:" ]";color:var(--faint);font-weight:400}

/* Dotted leader — the seam made visible. */
.leader{
  flex:1 1 auto;
  min-width:1.5rem;
  border-bottom:1px dotted var(--line);
  transform:translateY(-.28em);
}
.desc{color:var(--muted);font-size:.88rem;white-space:nowrap}
.status{
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--faint);
}
.status.live{color:var(--amber-dim)}
.status.live::before{content:"● "}
.status.soon::before{content:"○ "}

/* An empty slot is a promise, not a bug. */
.entry.slot{cursor:default}
.entry.slot .name{color:var(--faint)}
.entry.slot .name::before,.entry.slot .name::after{content:""}

@media (max-width:34rem){
  .entry{flex-wrap:wrap;gap:.25rem .6rem}
  .leader{display:none}
  .desc{white-space:normal;flex:1 1 100%;order:3}
  .status{margin-left:auto}
}

/* ── 404 ──────────────────────────────────────────────────── */
.oops{margin:4rem 0 3.5rem}
.oops .code{
  font-size:4.5rem;
  font-weight:700;
  line-height:1;
  color:var(--amber);
  letter-spacing:-.04em;
  text-shadow:0 0 26px rgba(255,176,0,.3);
  margin:0 0 1rem;
}
.oops p{margin:0 0 .4rem;color:var(--muted)}
.oops .back{
  display:inline-block;
  margin-top:1.75rem;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
.oops .back::before{content:"[ ";color:var(--faint);font-weight:400}
.oops .back::after{content:" ]";color:var(--faint);font-weight:400}
.oops .back:hover,.oops .back:focus-visible{color:var(--amber)}

/* ── footer ───────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line);
  padding-top:1.1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.76rem;
  color:var(--faint);
  letter-spacing:.06em;
}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line)}
footer a:hover,footer a:focus-visible{color:var(--amber);border-bottom-color:var(--amber-dim)}