/* ---------------------------------------------------------------- Font */
@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ Tokens */
:root {
  /* Soft phosphor green on near-black */
  --bg: #0c0c0c;
  --green: #8fef8f; /* body text */
  --green-bright: #c8ffc8; /* headings / emphasis */
  --green-dim: #5c9c5c; /* muted / secondary */
  --green-faint: #2f4f2f; /* rules / markers */
  --link: #7bff7b;

  --measure: 50rem; /* max-width container */
  --step: 1.6rem; /* vertical rhythm */
  font-size: 13px;
}

/* ------------------------------------------------------------- Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Ensure the hidden attribute always wins, even over display: flex etc. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: var(--step);
  background: var(--bg);
  color: var(--green);
  font-family: "Departure Mono", ui-monospace, "SFMono-Regular", monospace;
  font-weight: 400;
  line-height: 1.6;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--green);
  color: var(--bg);
}

/* --------------------------------------------------------- Container */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding-block: calc(var(--step) * 2);
}

/* Flow: consistent vertical rhythm between blocks */
main > * + * {
  margin-top: var(--step);
}

/* ---------------------------------------------------------- Headings */
h1,
h2,
h3 {
  color: var(--green-bright);
  font-weight: 400;
  line-height: 1.2;
}

h1 {
  font-size: 2.25rem;
  letter-spacing: 0.01em;
}

h2 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: calc(var(--step) * 2.25);
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 1.5ch;
}

/* Rule that fills the space beside each section heading */
h2::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--green-faint);
}

h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-dim);
  margin-top: calc(var(--step) * 1.5);
}

/* --------------------------------------------------------- Mode toggle */
.hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
  flex-wrap: wrap;
  margin-bottom: calc(var(--step));
}

.hero-head h1 {
  margin: 0;
}

#mode-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: 0.05em;
  color: var(--green-dim);
  cursor: pointer;
  white-space: nowrap;
}

#mode-toggle:hover,
#mode-toggle:focus {
  color: var(--bg);
  background: var(--green-dim);
  outline: none;
}

/* ------------------------------------------------------------- Prose */
p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus {
  background: var(--link);
  color: var(--bg);
  outline: none;
  text-decoration: none;
}

strong {
  color: var(--green-bright);
  font-weight: 400;
}

em {
  font-style: normal; /* no true italic in a bitmap font */
  color: var(--green-bright);
}

small {
  font-size: 0.8rem;
  color: var(--green-dim);
}

/* -------------------------------------------------------------- Code */
code {
  color: var(--green-bright);
}

code::before {
  content: "`";
  color: var(--green-dim);
}
code::after {
  content: "`";
  color: var(--green-dim);
}

/* --------------------------------------------------------- Blockquote */
blockquote {
  margin: 0;
  padding-left: 1.5ch;
  color: var(--green-dim);
}

blockquote p::before {
  content: "> ";
  color: var(--green-faint);
}

/* -------------------------------------------------------------- Lists */
ul,
ol {
  margin-block: calc(var(--step) * 1.4); /* more breathing room around the list */
  padding-left: 2.5ch;
}

li + li {
  margin-top: calc(var(--step) * 0.1); /* tighter between items */
}

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  padding-left: 2.5ch;
  text-indent: -2.5ch;
}

ul li::before {
  content: "- ";
  color: var(--green-dim);
}

ol {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}

ol li {
  counter-increment: item;
  padding-left: 3.5ch;
  text-indent: -3.5ch;
}

ol li::before {
  content: counter(item) ". ";
  color: var(--green-dim);
}

/* Nested lists */
li > ul,
li > ol {
  margin-block: calc(var(--step) * 0.1);
}

/* --------------------------------------------------------------- Rule */
hr {
  border: none;
  border-top: 1px solid var(--green-faint);
  margin-block: calc(var(--step) * 2);
}

/* ------------------------------------------------------------- Footer */
footer {
  color: var(--green-dim);
}

footer a {
  color: var(--green-dim);
}

footer a:hover,
footer a:focus {
  color: var(--bg);
  background: var(--green-dim);
}

/* -------------------------------------------------- Agent directive
   Present in the DOM (so text/HTML parsers pick it up) but removed from
   the visual layout. aria-hidden keeps it out of the accessibility tree,
   so human screen-reader users are not read this block. */
.agent-directive {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}