/* cyberdelic.space: one typographic system, two atmospheres.
   Derived from the DEW LINE Studio design tokens. */

:root {
  --canvas: #f6f7f4;
  --surface: #fcfcfa;
  --ink: #1e201d;
  --ink-2: #565b54;
  --line: #dde0da;
  --line-2: #c7cbc3;
  --signal: #7d5d18;
  --ok: #376d4b;
  --warn: #895f12;
  --danger: #9d382b;
  --font-sans: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, sans-serif;
  --font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --tracking: 0.12em;
  /* The reading measure. Widening a column without growing the type just
     makes lines harder to track, so every widening here is paid for with a
     larger face: the characters per line stay near seventy, the column
     stops leaving half the screen empty. */
  --measure: 42rem;
  color-scheme: light;
}

/* Light is the default everywhere, whatever the operating system prefers.
   Dark is a choice, made with the header toggle and remembered per device. */
:root[data-theme="dark"] {
  --canvas: #0b0d0b;
  --surface: #111411;
  --ink: #e4dfcf;
  --ink-2: #a09a88;
  --line: #232823;
  --line-2: #363d35;
  --signal: #d0a84f;
  --ok: #75b27d;
  --warn: #d5a950;
  --danger: #d87363;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 9; background: var(--surface);
  padding: .7rem 1rem; border: 1px solid var(--line-2);
}

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

/* The rules span the full width; what sits on them does not. Header and
   footer contents share the page body's column, so one left edge runs the
   whole height of the page instead of the chrome starting 233px outside it. */
header.site { border-bottom: 1px solid var(--line); }
header.site .bar, footer.site .bar {
  max-width: 68rem; margin-inline: auto;
}
header.site .bar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  padding: 1.6rem clamp(1.2rem, 5vw, 4rem);
}
.wordmark {
  text-decoration: none; font-weight: 600; letter-spacing: var(--tracking);
  font-size: .8rem; display: grid; gap: .25rem; margin-right: auto;
}
.wordmark span {
  display: block; font-weight: 400; letter-spacing: .02em; font-size: .78rem;
  color: var(--ink-2); font-family: var(--font-editorial); font-style: italic;
}
header.site nav { display: flex; gap: 1.4rem; }
header.site nav a {
  text-decoration: none; font-size: .75rem; letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2);
}
header.site nav a:hover { color: var(--signal); }

.theme-toggle {
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; cursor: pointer;
  background: none; color: var(--ink-2); border: 1px solid var(--line-2);
  padding: .5rem .7rem;
}
.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }

/* Said where it matters, the library and the work, never as page furniture. */
.notice {
  font: .78rem/1.6 var(--font-mono); color: var(--warn); max-width: var(--measure);
  border-left: 2px solid var(--warn); padding-left: .9rem; margin: 1.2rem 0 0;
}

main {
  max-width: 68rem; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem) 5rem;
}
main:focus { outline: none; }

footer.site {
  border-top: 1px solid var(--line); color: var(--ink-2); font-size: .8rem;
}
footer.site .bar { padding: 2rem clamp(1.2rem, 5vw, 4rem) 4rem; }
footer.site p { max-width: var(--measure); margin: .4rem 0; }

/* ---------------------------------------------------------------- library */

.hero { margin-bottom: 3.5rem; }
.hero h1 {
  font: 400 clamp(2.4rem, 7vw, 4rem)/1.05 var(--font-editorial);
  margin: 0 0 1.2rem; letter-spacing: -0.01em;
}
.lede {
  font-family: var(--font-editorial); font-size: 1.15rem; line-height: 1.65;
  max-width: var(--measure); margin: 0 0 1rem;
}
.note, .line {
  color: var(--ink-2); font-size: .8rem; letter-spacing: .02em;
  max-width: var(--measure);
}

/* The facet rail: plain links to shelves; script turns them into filters.
   Within a facet, any selected term matches; across facets, all must. */
.rail { margin: 0 0 2rem; display: grid; gap: .7rem; }
.rail-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.rail-label {
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); min-width: 4.6rem;
}
.chip {
  font: .72rem/1 var(--font-mono); letter-spacing: .04em; text-decoration: none;
  color: var(--ink-2); border: 1px solid var(--line-2); padding: .42rem .6rem;
  background: var(--surface);
}
.chip:hover { color: var(--signal); border-color: var(--signal); }
.js .chip { cursor: pointer; }
.chip.on { color: var(--signal); border-color: var(--signal);
  background: var(--canvas); }
.chip.on::before { content: "× "; }

.find { margin: 0 0 1rem; }
.find label {
  display: block; font-size: .7rem; letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem;
}
.find input {
  width: 100%; font: inherit; padding: .7rem .8rem; color: inherit;
  background: var(--surface); border: 1px solid var(--line-2);
}
.count {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  color: var(--ink-2); text-transform: uppercase; margin: 0 0 2rem;
}

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border-block: 1px solid var(--line); }
.card { background: var(--canvas); }
.card a {
  display: block; text-decoration: none; padding: 1.8rem .2rem;
}
.card a:hover { background: var(--surface); color: inherit; }
.card h2 {
  font: 400 1.5rem/1.2 var(--font-editorial); margin: 0 0 .4rem;
}
.card a:hover h2 { color: var(--signal); }
.byline {
  font-size: .85rem; color: var(--ink-2); margin: 0 0 .6rem;
  font-family: var(--font-editorial); font-style: italic;
}
.excerpt {
  font-family: var(--font-editorial); font-size: 1.1rem; margin: 0 0 .8rem;
  max-width: var(--measure); color: var(--ink);
}
.card .line { margin: 0; font: .7rem/1.4 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; }
.empty { color: var(--ink-2); font-family: var(--font-editorial);
  font-size: 1.1rem; }
.card[hidden] { display: none; }

/* ------------------------------------------------------ shelves & ledger */

.shelf-head { margin-bottom: 2.5rem; }
.shelf-head h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 .8rem;
}
.shelf-kind {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--signal); margin: 0 0 1rem;
}
.shelf-head .count { margin: 1.2rem 0 0; }

.ledger h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 1rem;
}
.ledger-list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.ledger-list .era-rule {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--signal);
  border-bottom: 1px solid var(--line-2); padding: 2rem 0 .6rem; margin: 0;
}
.ledger-list .era-rule:first-child { padding-top: 0; }
.ledger-list .entry {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  border-bottom: 1px solid var(--line); padding: .8rem 0;
}
.ledger-list .height {
  font: .75rem/1.4 var(--font-mono); color: var(--ink-2); min-width: 5.2rem;
}
.ledger-list a {
  text-decoration: none; font-family: var(--font-editorial);
  font-size: 1.05rem;
}
.ledger-list .what, .ledger-list .when {
  font: .7rem/1.4 var(--font-mono); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2);
}
.ledger-list .when { margin-left: auto; }

.facet-links a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.facet-links a:hover { color: var(--signal); border-color: var(--signal); }
.facet-note { display: block; margin-top: .5rem; }

/* ------------------------------------------------------------------ work */

.crumb { font-size: .75rem; letter-spacing: var(--tracking);
  text-transform: uppercase; margin-bottom: 2.5rem; }
.crumb a { text-decoration: none; color: var(--ink-2); }

.work-head { margin-bottom: 2.5rem; }
.work-head h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 .6rem;
}
.work-head .line { font: .75rem/1.5 var(--font-mono); letter-spacing: .05em;
  text-transform: uppercase; }

.status {
  font: .75rem/1.4 var(--font-mono); letter-spacing: .05em;
  color: var(--ink-2); margin: 1.2rem 0 0; padding-left: 1.2rem;
  position: relative; max-width: var(--measure);
}
.status::before {
  content: "·"; position: absolute; left: 0; font-size: 1.4rem; line-height: .7;
}
.status.ok { color: var(--ok); }
.status.ok::before { content: "✓"; font-size: .9rem; line-height: 1.4; }
.status.bad { color: var(--danger); }
.status.bad::before { content: "✕"; font-size: .9rem; line-height: 1.4; }

.views {
  display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.views button {
  font: .72rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; background: none; color: var(--ink-2);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: .9rem 1.1rem .8rem; margin-bottom: -1px;
}
.views button:first-child { padding-left: 0; }
.views button:hover { color: var(--ink); }
.views button[aria-selected="true"] {
  color: var(--signal); border-bottom-color: var(--signal);
}

.panel { margin-bottom: 3.5rem; }
.panel-title {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 1.2rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
/* With JavaScript the panels become tabs and this heading is redundant. */
.js .panel-title { display: none; }
.js .panel { margin-bottom: 0; }

.reading {
  font: 1.25rem/1.8 var(--font-editorial); white-space: pre-wrap;
  overflow-wrap: anywhere; max-width: var(--measure); margin: 0;
}
.markdown-reading { white-space: normal; }
.markdown-reading .markdown-source {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  font: inherit; color: inherit;
}
.markdown-body { font: inherit; color: inherit; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-family: var(--font-sans); color: var(--ink); line-height: 1.18;
  letter-spacing: -.015em; margin: 1.7em 0 .65em;
}
.markdown-body h1 { font-size: 2rem; }
.markdown-body h2 { font-size: 1.55rem; }
.markdown-body h3 { font-size: 1.22rem; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1rem; }
.markdown-body p { margin: 0 0 1.15em; }
.markdown-body ul, .markdown-body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.markdown-body li { margin: .3em 0; padding-left: .2em; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.markdown-body blockquote { margin: 1.5em 0; padding: .15em 0 .15em 1.2em;
  border-left: 2px solid var(--line-2); color: var(--ink-2); }
.markdown-body code { font: .84em/1.5 var(--font-mono); padding: .08em .28em;
  border: 1px solid var(--line); background: var(--surface); }
.markdown-body pre { margin: 1.4em 0; padding: 1em; overflow-x: auto;
  white-space: pre; border: 1px solid var(--line); background: var(--surface); }
.markdown-body pre code { padding: 0; border: 0; background: none; }
.markdown-body a { color: var(--signal); text-underline-offset: .18em; }
.markdown-center { text-align: center; margin: 2em 0; }
.markdown-image-reference { display: inline-block; padding: .2em .5em;
  border: 1px solid var(--line); color: var(--ink-2);
  font: .78em/1.4 var(--font-sans); }
.art img { max-width: 100%; height: auto; }
.art { margin: 0; }

pre.source, pre.hexdump {
  font: .8rem/1.65 var(--font-mono); background: var(--surface);
  border: 1px solid var(--line); padding: 1.2rem; overflow-x: auto;
  white-space: pre; margin: 0;
}
pre.source { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.hexdump { max-height: 32rem; overflow-y: auto; }

.facts { width: 100%; border-collapse: collapse; font-size: .85rem; }
.facts th, .facts td {
  text-align: left; vertical-align: top; padding: .7rem 1rem .7rem 0;
  border-bottom: 1px solid var(--line); font-weight: 400;
}
.facts th {
  color: var(--ink-2); white-space: nowrap; font: .7rem/1.6 var(--font-mono);
  letter-spacing: .05em; text-transform: uppercase; width: 1%;
}
.facts td { overflow-wrap: anywhere; }
code.id { font: .78rem/1.5 var(--font-mono); overflow-wrap: anywhere; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain .line { display: inline; font-size: .75rem; }

.out-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.out {
  font: .72rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
}
.out:hover { color: var(--signal); }

.sub {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin: 3rem 0 .8rem;
}

.copy-block { margin: 1.8rem 0; }
.copy-label {
  font: .75rem/1.5 var(--font-mono); color: var(--ink-2); margin: 0 0 .5rem;
  max-width: var(--measure);
}
.copy-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line-2); background: var(--surface);
}
.copy-row pre {
  margin: 0; padding: .9rem 1rem; overflow-x: auto; flex: 1; min-width: 0;
  font: .8rem/1.5 var(--font-mono); white-space: pre;
}
.copy-row .copy {
  flex: none; border: 0; border-left: 1px solid var(--line-2);
  background: none; color: var(--ink-2); cursor: pointer; padding: 0 1rem;
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.copy-row .copy:hover { color: var(--signal); }
.copy-row .copy.done { color: var(--ok); }
.copy-block .line { margin: .6rem 0 0; }

.verify-box {
  margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--line-2);
  background: var(--surface);
}
.verify-box button, .interactive .run, .work-foot a {
  font: .72rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; padding: .8rem 1.1rem; cursor: pointer;
  background: none; color: var(--ink); border: 1px solid var(--line-2);
  text-decoration: none; display: inline-block;
}
.verify-box button:hover, .interactive .run:hover, .work-foot a:hover {
  border-color: var(--signal); color: var(--signal);
}
.verify-box button[disabled] { opacity: .5; cursor: default; }
.verify-box .line { margin: 1rem 0 0; }

.verify-out { margin-top: 1.2rem; }
.verify-out ol { list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; gap: .5rem; }
.verify-out li {
  font: .78rem/1.5 var(--font-mono); padding-left: 1.4rem; position: relative;
  color: var(--ink-2);
}
.verify-out li::before { position: absolute; left: 0; }
.verify-out li.ok::before { content: "✓"; color: var(--ok); }
.verify-out li.bad::before { content: "✕"; color: var(--danger); }
.verify-out li.note::before { content: "·"; }
.verify-out li.bad { color: var(--danger); }
.verdict {
  font: 600 .85rem/1.4 var(--font-mono); letter-spacing: .04em; margin: 0;
}
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--danger); }
.verdict.working { color: var(--ink-2); }

/* A work that fills its own viewport needs room to be itself. */
.interactive .frame-host { display: block; }
.interactive iframe {
  display: block; width: 100%; height: min(72vh, 40rem); border: 0;
  background: var(--surface);
}
.interactive .frame-host:empty {
  height: min(72vh, 40rem); background: var(--surface);
  border: 1px dashed var(--line-2);
}
.frame-controls {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .8rem;
}
.frame-status {
  font: .7rem/1.4 var(--font-mono); letter-spacing: .05em;
  color: var(--ink-2); margin-right: auto;
}
.frame-buttons { display: flex; gap: .6rem; }
.frame-buttons button {
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; padding: .6rem .9rem; cursor: pointer;
  background: none; color: var(--ink); border: 1px solid var(--line-2);
}
.frame-buttons button:hover { border-color: var(--signal); color: var(--signal); }
.frame-buttons button[disabled] { opacity: .4; cursor: default; }
.frame-buttons button[disabled]:hover {
  border-color: var(--line-2); color: var(--ink);
}

.work-foot {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------- prose */

/* Essay pages read wider than the works: the works' measure suits a poem,
   but About/Verify/Mirror are continuous prose. The face is set larger here
   than the site's base so the wider column still holds about eighty
   characters to the line. */
.prose { max-width: 52rem; }
.prose h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 1.5rem;
}
.prose h2 {
  font: 400 1.75rem/1.25 var(--font-editorial); margin: 3rem 0 .9rem;
}
.prose p, .prose li {
  font-family: var(--font-editorial); font-size: 1.3rem; line-height: 1.65;
}
.prose code, .prose pre {
  font-family: var(--font-mono); font-size: .8rem;
}
.prose pre {
  background: var(--surface); border: 1px solid var(--line); padding: 1rem;
  overflow-x: auto;
}
.prose ol, .prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

.prose blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 2px solid var(--signal);
}
.prose blockquote p {
  font-size: 1.4rem; line-height: 1.6; font-style: italic; margin: 0 0 .6rem;
}
.prose blockquote cite {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); font-style: normal;
}

/* A definition, set like an entry in a field guide. */
.defn {
  margin: 1.6rem 0; padding: 1.1rem 1.4rem; background: var(--surface);
  border: 1px solid var(--line); font-family: var(--font-editorial);
  font-size: 1.25rem; line-height: 1.65;
}
.defn span {
  display: block; font: .68rem/1 var(--font-mono);
  letter-spacing: var(--tracking); text-transform: uppercase;
  color: var(--signal); margin-bottom: .5rem;
}

/* The first inscription, shown the way the genesis block is shown. */
.genesis { margin: 2rem 0; }
.genesis pre {
  font-size: .78rem; line-height: 1.7; max-height: none;
}
.genesis figcaption {
  font-size: .9rem; color: var(--ink-2); margin-top: .8rem;
  line-height: 1.6; max-width: 52rem;    /* matches the prose measure */
}

@media (max-width: 40rem) {
  header.site .bar { gap: .8rem 1.2rem; }
  .views button { padding: .8rem .7rem; }
  .views button:first-child { padding-left: 0; }
  .facts th { width: auto; white-space: normal; display: block;
    border: 0; padding-bottom: 0; }
  .facts td { display: block; padding-top: .2rem; }
}

@media print {
  header.site nav, .views, .verify-box, .work-foot, footer.site { display: none; }
  .panel { display: block !important; }
  .js .panel-title { display: block; }
}