/* Minimal stylesheet. Deliberately plain: one column, no framework, no
   webfonts, no JavaScript anywhere on this site. */

:root {
  --bg: #000000;
  --bg-raised: #393939;
  --line: #1c1c20;
  --ink: #e6e2d8;
  --ink-dim: #9f9f9f;
  --ink-faint: #5c584f;
  --accent: #6cc9e8;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

/* The column is wide enough for the screenshots, but prose is capped well
   short of it -- long measures are what make a page tiring to read. */
p { margin: 0 0 1.1em; max-width: 62ch; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid #1a3540; }
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3 { letter-spacing: -0.01em; }

h1 { font-size: 46px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }

h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 56px 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* A little square instead of a bullet or icon font -- one shape, reused
   everywhere a heading needs a mark. */
h2::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--accent);
  flex: none;
}

h3 { font-size: 17px; font-weight: 600; margin: 32px 0 6px; }

/* The rules the pages are written with already separate sections; with the
   headings marked they only need to be a hairline. */
hr { border: none; border-top: 1px solid var(--line); margin: 56px 0; }
hr + h2 { margin-top: 0; }

/* Navigation: plain text links, separated by vertical bars. */
#nav { font-family: var(--mono); font-size: 13.5px; color: var(--ink-dim); }
#nav a { color: var(--ink-dim); border: 0; }
#nav a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

ul { max-width: 62ch; padding-left: 1.2em; }
li { margin-bottom: 0.5em; }

/* Monospace blocks: log lines, perception windows, JSON, config. */
pre {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 20px 22px;
  margin: 0;
  overflow-x: auto;
  color: var(--ink);
  tab-size: 2;
}
code { font-family: var(--mono); font-size: 0.88em; color: var(--ink); }

table { border-collapse: collapse; margin: 1em 0; font-size: 14.5px; }
th, td { border: 1px solid var(--line); padding: 0.4em 0.7em; text-align: left; vertical-align: top; }
th { background: var(--bg-raised); font-weight: 600; }

/* A verbatim quote from a bot, always followed by an attribution line. */
blockquote {
  margin: 1.4em 0;
  padding-left: 1em;
  border-left: 2px solid var(--line);
  color: var(--ink-dim);
  max-width: 62ch;
}
.attrib { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }

/* Holds an image, video or embed -- or nothing yet, in which case it stays
   as an empty lit box rather than collapsing. */
.placeholder {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 13px;
  margin: 24px 0;
  min-height: 72px;
  overflow: hidden;
  text-align: center;
}
/* Screen captures sit at their own size and only ever shrink. Stretching
   them to fill the column blows the small ones up several times over. */
.placeholder img { max-width: 100%; height: auto; margin: 0 auto; }

.note { font-size: 14.5px; color: var(--ink-dim); }

#footer {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding: 36px 0 60px;
  font-family: var(--mono);
  font-size: 13px;
}
#footer a { color: var(--ink-dim); border-bottom-color: var(--line); }

/* --------------------------------------------------------------------------
   Additions for the clip, obituary and about pages.
   -------------------------------------------------------------------------- */

/* A pull quote. Set wide and dim so it reads as a beat between sections. */
.tagline {
  margin: 56px auto;
  max-width: 48ch;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
}

.tagline .attrib { display: block; margin-top: 0.6em; }

/* Figures: clips and images, always with a caption underneath. */
figure { margin: 24px 0; }
figure video, figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
figcaption { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }

/* An autoplaying clip standing on its own, outside a figure. Fills the
   column but never exceeds it -- the files are 916px wide and the column
   is narrower than that once the page padding is taken off. */
.hero-clip {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}

/* A YouTube embed. The iframe's width/height attributes are a fixed
   560x315 -- fine on desktop, but wider than the column on a phone. This
   ignores those attributes and holds the real 16:9 ratio at any width. */
.yt-embed {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 24px 0;
  border: 1px solid var(--line);
}

/* One observed moment: the capture beside the note explaining it. The
   captures are all different sizes, so the image column is fixed and each
   one sits at its own size inside it rather than being stretched to fit. */
.moment {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin: 40px 0;
}
.moment img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
}
/* Prose, not a filename -- so this caption opts out of the mono treatment
   the figure captions elsewhere on the site use. */
.moment figcaption {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-top: 0;
}

/* A bot's field of view, reproduced exactly as the bot received it.
   Letter-spaced so the grid reads as a grid rather than as prose. */
.window {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.35;
  letter-spacing: 0.25em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 20px 22px;
  display: inline-block;
  overflow-x: auto;
  max-width: 100%;
  color: var(--ink);
}

/* Two views of the same instant, side by side where there is room. */
.pair { display: flex; flex-wrap: wrap; gap: 22px; margin: 24px 0; align-items: start; }
.pair > * { flex: 1 1 15em; min-width: 0; margin: 0; }

/* Related reading. Separated by hairlines instead of bullets, so a mixed
   bag of papers, projects and a TV episode still reads as one register. */
.works { list-style: none; margin: 0; padding: 0; max-width: 66ch; }
.works li { padding: 20px 0; border-top: 1px solid var(--line); margin: 0; }
.works li:first-child { border-top: 0; padding-top: 0; }
.works p { margin: 0; max-width: none; }

/* The bare URL, kept verbatim, set as its own line above the note. */
.work-url {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 8px;
  word-break: break-all;
}

/* The work's name, sitting at the head of its note as its own line --
   heavier and a size up from the body copy so it reads as a label, the
   way the URL above it does. */
.work-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

/* One entry in the register of the dead. */
.obit { border-top: 1px solid var(--line); padding-top: 1em; margin-top: 2em; }
.obit h3 { margin: 0 0 0.2em 0; }
.obit .life { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin: 0 0 1em 0; }

@media (max-width: 720px) {
  body { font-size: 16px; padding: 28px 20px 0; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; margin-top: 48px; gap: 11px; }
  h2::before { width: 11px; height: 11px; }
  hr { margin: 48px 0; }
  .tagline { font-size: 18px; margin: 48px auto; }
  /* Tight enough that the widest window still clears a phone screen. */
  .window { letter-spacing: 0.12em; font-size: 12.5px; padding: 16px 18px; }
  /* The capture and its note stack rather than fighting over the width. */
  .moment { grid-template-columns: 1fr; gap: 14px; margin: 32px 0; }
  .moment figcaption { font-size: 14.5px; }
}