/* leeashcroft.dev. Hand-written. Tokens first, then layout, then the few animated bits. */
@font-face{font-family:Fraunces;font-weight:600;font-display:swap;src:url('fonts/Fraunces-600.woff2') format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-weight:400 600;font-display:swap;src:url('fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500.woff2') format('woff2')}

:root {
  --ink: #1c1f26; --blue: #233d8f; --blue-ink: #233d8f; --muted: #5e6675; --rule: #d8dce4;
  --paper: #ffffff; --tint: #f3f5fa;
  --term-bg: #0f1320; --term-fg: #d8def0; --term-dim: #7d879c; --term-ok: #7fd1a8; --term-warn: #f2c76a; --term-cmd: #ffffff;
  --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #e6e8ee; --blue: #9db0f0; --blue-ink: #c3cffa; --muted: #9aa3b5; --rule: #2a2f3b; --paper: #121419; --tint: #191c24; --term-bg: #0a0d16; }
}
:root[data-theme="dark"] { --ink: #e6e8ee; --blue: #9db0f0; --blue-ink: #c3cffa; --muted: #9aa3b5; --rule: #2a2f3b; --paper: #121419; --tint: #191c24; --term-bg: #0a0d16; }

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
.wide { max-width: 60rem; margin: 0 auto; padding: 0 16px; }
.mono { font-family: var(--mono); font-size: .82rem; }
h1 { font: 600 clamp(2.2rem, 6vw, 3.1rem)/1.04 Fraunces, Georgia, serif; letter-spacing: -0.02em; margin: 0 0 .6rem; }
h2 { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 3.2rem 0 1rem; display: flex; align-items: center; gap: .8rem; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
h3 { font: 600 1.2rem/1.3 var(--sans); margin: 1.8rem 0 .4rem; }
p { margin: 0 0 1rem; }
.intro { font-size: 1.1rem; }

/* top */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0 0; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.topbar a { color: inherit; text-decoration: none; }
.theme { background: none; border: 1px solid var(--rule); color: var(--muted); border-radius: 999px; padding: .25rem .7rem; font: inherit; cursor: pointer; }
.theme:hover { color: var(--ink); border-color: var(--muted); }
header.top { padding: 2.2rem 0 2rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2.5rem; align-items: end; border-bottom: 1.5px solid var(--ink); }

/* the sketch sits in a circle on a pale disc, so it reads the same in light and dark (inverting a face goes wrong) */
.sketch { display: block; width: 176px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #eef1f8;
          box-shadow: inset 0 0 0 1px rgba(35,61,143,.12); }
.sketch img { width: 100%; height: 100%; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sketch { background: #e4e9f6; box-shadow: 0 12px 30px -16px rgba(0,0,0,.9); } }
:root[data-theme="dark"] .sketch { background: #e4e9f6; box-shadow: 0 12px 30px -16px rgba(0,0,0,.9); }
.lede { margin: 0; font-size: 1.1rem; }
.tags { color: var(--blue); margin-top: .4rem; }
.eyebrow { font-family: var(--mono); font-size: .8rem; color: var(--blue); margin: 0 0 .8rem; }
.contact-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1rem 0 0; font-family: var(--mono); font-size: .84rem; }
.contact-row a { text-decoration: none; }
.contact-row a.dl { color: var(--paper); background: var(--blue); padding: .25rem .8rem; border-radius: 999px; }
.contact-row a.dl:hover { filter: brightness(1.1); }
@media print { .contact-row a.dl { display: none; } }

/* terminal */
.term { background: var(--term-bg); color: var(--term-fg); border-radius: 10px; padding: 1rem 1.2rem 1.2rem; margin: 2rem 0 .6rem;
        font-family: var(--mono); font-size: .86rem; line-height: 1.55; box-shadow: 0 20px 50px -30px rgba(10,15,40,.6); overflow: hidden; }
.term .bar { display: flex; gap: .45rem; margin-bottom: .9rem; align-items: center; }
.term .bar .hint { margin-left: auto; color: var(--term-dim); font-size: .74rem; }
.term .bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a4154; display: block; }
.term .bar i:first-child { background: #d97a74; } .term .bar i:nth-child(2) { background: #e0b86a; } .term .bar i:nth-child(3) { background: #7fd1a8; }
.term pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; min-height: 14.5em; }
.term .c { color: var(--term-cmd); } .term .d { color: var(--term-dim); } .term .ok { color: var(--term-ok); } .term .w { color: var(--term-warn); }
.term .cur { display: inline-block; width: .6em; height: 1.05em; background: var(--term-fg); vertical-align: -0.15em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-in { margin: 0; } .term-in label { display: flex; align-items: baseline; gap: 0; }
.term-in input { flex: 1; background: none; border: 0; color: var(--term-fg); font: inherit; outline: none; padding: 0; caret-color: var(--term-fg); min-width: 0; }
.term-cap { color: var(--muted); font-size: .85rem; margin: 0 0 2rem; }

/* numbers */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 1.5rem 0 0; }
.numbers div { background: var(--paper); padding: 1rem 1rem .9rem; }
.numbers b { display: block; font: 600 2rem/1 Fraunces, Georgia, serif; color: var(--blue-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.numbers span { display: block; font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-top: .5rem; line-height: 1.4; }

/* diagram */
figure { margin: 1.5rem 0 0; width: min(58rem, 100vw - 32px); position: relative; left: 50%; transform: translateX(-50%); }
figure .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
figure svg { width: 100%; height: auto; display: block; font-family: var(--mono); min-width: 720px; }
figure svg .box { fill: var(--tint); stroke: currentColor; stroke-width: 1.2; }
figure svg .box.hot { fill: color-mix(in srgb, var(--blue) 12%, var(--paper)); stroke: var(--blue); stroke-width: 1.5; }
figure svg text { fill: currentColor; font-size: 12px; }
figure svg .t { font-size: 13px; font-weight: 500; } figure svg .s { font-size: 11px; fill: var(--muted); }
figure svg .lbl { font-size: 11px; fill: var(--muted); }
figure svg .flow { stroke: currentColor; stroke-width: 1.2; fill: none; }
figure svg .dr { stroke: var(--blue); stroke-width: 1.8; fill: none; stroke-dasharray: 6 5; animation: march 1.4s linear infinite; }
figure svg .arrow { fill: currentColor; } figure svg .arrow.dr { fill: var(--blue); stroke: none; animation: none; }
@keyframes march { to { stroke-dashoffset: -22; } }
figcaption { font-size: .9rem; color: var(--muted); margin-top: .7rem; }
figure svg .node { cursor: pointer; }
figure svg .node:hover .box, figure svg .node:focus-visible .box { stroke: var(--blue); stroke-width: 2; }
figure svg .node:focus-visible { outline: none; }
figure svg .node.active .box { fill: color-mix(in srgb, var(--blue) 22%, var(--paper)); stroke: var(--blue); stroke-width: 2; }
.diag-note { background: var(--tint); border-left: 3px solid var(--blue); padding: .8rem 1rem; margin: .8rem 0 0; min-height: 3.4rem; font-size: .95rem; }
.print { background: none; border: 1px solid var(--rule); color: var(--muted); border-radius: 999px; padding: .35rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; }
.print:hover { color: var(--ink); border-color: var(--muted); }

/* thirty-second brief */
.brief { margin-top: .5rem; }
.brief-list { margin: 0; padding-left: 1.2rem; font-size: 1.05rem; }
.brief-list li { margin: 0 0 .45rem; } .brief-list li::marker { color: var(--blue); }
.practical { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1.5rem; margin: 1.4rem 0 0; background: var(--tint); padding: 1rem 1.1rem; }
.practical dt { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.practical dd { margin: 0; font-size: .95rem; }

/* faq */
.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 1rem; }
.faq dd { margin: .2rem 0 0; color: var(--ink); }

/* links */
.links { margin: 0; padding: 0; list-style: none; }
.links li { display: grid; grid-template-columns: 14rem 1fr; gap: .3rem 1.2rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.links li:last-child { border-bottom: 1px solid var(--rule); }
.links a { font-family: var(--mono); font-size: .85rem; }
.links span { color: var(--muted); }

/* matches */
.match { border-top: 1px solid var(--rule); padding: 1rem 0; display: grid; grid-template-columns: 11rem 1fr; gap: .4rem 1.5rem; }
.match:last-child { border-bottom: 1px solid var(--rule); }
.match .ask { font-family: var(--mono); font-size: .8rem; color: var(--muted); padding-top: .25rem; }
.match .ask::before { content: "✓ "; color: var(--blue); }
.match .done { margin: 0; }
.note { background: var(--tint); border-left: 3px solid var(--blue); padding: .9rem 1.1rem; margin: 1.5rem 0; }
.note p:last-child { margin: 0; }

/* stories */
.story { border-left: 2px solid var(--rule); padding-left: 1.2rem; margin: 0 0 .5rem; }
.story h3 { margin-top: 1.4rem; }

/* timeline */
.rail { display: grid; grid-template-columns: 9.5rem 1fr; gap: .4rem 1.2rem; margin: 0; position: relative; }
.rail dt { font-family: var(--mono); font-size: .8rem; color: var(--muted); padding-top: .25rem; white-space: nowrap; position: relative; }
.rail dt::after { content: ""; position: absolute; right: -0.95rem; top: .55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.rail dd { margin: 0; padding-bottom: .8rem; border-left: 1px solid var(--rule); padding-left: 1.1rem; margin-left: -1.2rem; }
.rail dd .org { color: var(--muted); }

footer { margin: 4rem 0 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }
footer p { margin: 0 0 .4rem; }

/* reveal on scroll: visible by default. JS hides only what is below the fold at load and reveals it as it scrolls in,
   so screenshots, print and no-JS readers always see the whole page. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity .6s ease, transform .6s ease; }
  .reveal.pending { opacity: 0; transform: translateY(14px); }
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) { .term .cur, figure svg .dr { animation: none; } }

@media (max-width: 640px) {
  header.top { grid-template-columns: 1fr; padding-top: 1.4rem; }
  header.top .sketch { width: 128px; order: -1; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .rail, .match { grid-template-columns: 1fr; gap: .1rem; }
  .rail dt { padding-top: .8rem; } .rail dt::after { display: none; } .rail dd { border: 0; margin-left: 0; padding-left: 0; }
  .match .ask { padding-bottom: .2rem; }
  .term { font-size: .72rem; padding: .8rem .9rem 1rem; border-radius: 8px; }
  figure { width: auto; left: auto; transform: none; }
  .practical { grid-template-columns: 1fr; }
  .links li { grid-template-columns: 1fr; }
}

@media print {
  .topbar, .theme, .print, .term-in, .diag-note, .term .hint { display: none; }
  body { font-size: 11pt; }
  .term { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .reveal.pending { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: .75em; color: var(--muted); }
}

/* og.html: the 1200x630 social preview, screenshotted by build.py --og */
.og-page, .og-page body { margin: 0; width: 1200px; height: 630px; overflow: hidden; background: #fff; }
.og { display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 40px; padding: 70px 80px; height: 630px; box-sizing: border-box; }
.og h1 { font-size: 84px; margin: 0 0 18px; }
.og .lede { font-size: 30px; line-height: 1.35; color: #1c1f26; }
.og .tags { font-size: 20px; margin-top: 22px; }
.og .site { font-family: var(--mono); font-size: 22px; color: #5e6675; margin-top: 44px; }
.og .sketch { width: 340px; }
.og-bar { position: absolute; left: 0; top: 0; width: 100%; height: 14px; background: #233d8f; }