:root {
  --bg: #ffffff;
  --fg: #1b1b1b;
  --muted: #9a9a9a;
  --accent: #b4532a;
  --rule: #ebebeb;
  --win-bar: #f7f7f7;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --garamond: "EB Garamond", Garamond, Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --quote-size: 19.5px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 16px 96px;
}

a { color: inherit; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--accent); }

/* header and quote share a column as wide as the terminal window */
.intro {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* ---------- terminal window ---------- */

.terminal {
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.12),
    0 2px 6px rgb(0 0 0 / 0.06),
    0 22px 48px -12px rgb(0 0 0 / 0.22);
}

.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: var(--win-bar);
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
  font: 13px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: rgb(0 0 0 / 0.5);
}
.lights {
  position: absolute;
  left: 12px;
  display: flex;
  gap: 8px;
}
.lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.15);
}
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.term-body {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px 28px 26px;
}

/* the photo and the canvas its pixel cascade draws on (logo.js), stacked */
.cascade {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
}
.propic,
.cascade canvas {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 10px;
}
.cascade canvas {
  position: absolute;
  inset: 0;
  display: none;
}
/* while the cascade runs, the canvas shows and the photo stays only for screen
   readers; without it (reduced motion, no JS) the plain photo shows */
.cascade-on .cascade canvas { display: block; cursor: pointer; /* click replays */ }
.cascade-on .cascade .propic { opacity: 0; }

.prompt { text-align: left; min-width: 13em; }
.prompt p { margin: 0; }
.ps1 { color: var(--muted); }
.out { margin-bottom: 8px !important; }
.name { font-weight: 500; font-size: 16px; }

/* typing intro: lines start hidden only while script.js is running it */
.typing .prompt > p { visibility: hidden; }
.typing .prompt > p.shown { visibility: visible; }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- sections ---------- */

section {
  width: min(440px, 100%);
  margin: 64px auto 0;
}

h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  position: relative;
  margin: 8px 0;
  padding-left: 1.4em;
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.5;
}
li::before {
  content: "–";
  position: absolute;
  left: 0.2em;
  color: var(--muted);
}
strong { font-weight: 500; }
.when { color: var(--muted); white-space: nowrap; }

/* ---------- quote ---------- */

/* width 0 + min-width 100%: fills the .intro column without widening it */
.quote {
  width: 0;
  min-width: 100%;
}
.quote figure { margin: 0; }
.quote blockquote {
  position: relative;
  margin: 0;
  padding-left: 0.85em; /* room for the opening mark, inside the column */
  font-family: var(--garamond);
  font-size: var(--quote-size);
  line-height: 1.38;
}
.quote blockquote p { margin: 0; }
/* both marks at the same size; line-height 0 keeps the closing one from
   pushing the last line down, vertical-align drops it to sit on that line */
.quote blockquote::before,
.quote blockquote p::after {
  font-size: 1.6em;
  line-height: 1;
  color: var(--accent);
}
.quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0.02em;
}
.quote blockquote p::after {
  content: "\201D";
  line-height: 0;
  vertical-align: -0.27em;
  margin-left: 0.03em;
}
.quote figcaption {
  margin-top: 14px;
  padding-left: calc(var(--quote-size) * 0.85); /* lines up with the quote text */
  font-family: var(--garamond);
  font-size: 16px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* ---------- phones ---------- */

@media (max-width: 520px) {
  .intro { width: 100%; }
  .term-body {
    flex-direction: column;
    gap: 20px;
    padding: 22px 16px;
  }
  .prompt { text-align: center; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}