/* ============================================================================
   dmooney.engineer

   The world is instrument recording: a trace on technical paper, and the question
   of what a flat line means. Amber is the instrumentation colour for "unknown",
   and it is the only loud colour on the site. Green means it ran, grey means it
   ran and had nothing to do, amber means we cannot tell. That is the argument the
   whole site makes, so it is also the colour system.
   ========================================================================== */

:root {
  --paper:   #E9ECEF;
  --sheet:   #F7F8F9;
  --ink:     #14181B;
  --muted:   #5A666E;
  --faint:   #8B979E;
  --rule:    #D3D9DD;
  --firm:    #6E7B83;
  --amber:   #A8680F;
  --amber-w: #F3E7D2;
  --live:    #12705A;
  --quiet:   #8B979E;

  --mono: "Cascadia Mono", "Cascadia Code", ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  --sans: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: Georgia, "Iowan Old Style", Palatino, serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#101416; --sheet:#171C1F; --ink:#E7ECEF; --muted:#94A2A9; --faint:#6B787F;
    --rule:#252D31; --firm:#4B575D; --amber:#E0A047; --amber-w:#2E2213;
    --live:#4CBE9B; --quiet:#6B787F;
  }
}
:root[data-theme="dark"] {
  --paper:#101416; --sheet:#171C1F; --ink:#E7ECEF; --muted:#94A2A9; --faint:#6B787F;
  --rule:#252D31; --firm:#4B575D; --amber:#E0A047; --amber-w:#2E2213;
  --live:#4CBE9B; --quiet:#6B787F;
}
:root[data-theme="light"] {
  --paper:#E9ECEF; --sheet:#F7F8F9; --ink:#14181B; --muted:#5A666E; --faint:#8B979E;
  --rule:#D3D9DD; --firm:#6E7B83; --amber:#A8680F; --amber-w:#F3E7D2;
  --live:#12705A; --quiet:#8B979E;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Two widths, on purpose. Pages that are scanned (home, projects, services) get
   room for cards and the run log. Pages that are read get a narrow column, because
   58rem of Georgia is a line length nobody can track back from. */
.sheet {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}
body.prose .sheet { max-width: 44rem; }

a { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

/* ---- nav ----------------------------------------------------------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark { text-decoration: none; color: var(--ink); display: block; }
.wordmark-name {
  display: block;
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.mark { display: block; margin-top: .45rem; color: var(--ink); }
.mark-gap { fill: var(--amber); }
.links {
  display: flex; gap: 1.1rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.links a { color: var(--muted); text-decoration: none; }
.links a:hover { color: var(--ink); }
.links a[aria-current] {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--amber);
  text-underline-offset: .35em; text-decoration-thickness: 2px;
}

/* ---- headings ------------------------------------------------------------ */
h1 {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.9rem, 5.6vw, 3.1rem);
  line-height: 1.05; letter-spacing: -.04em;
  margin: 0; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--amber); }

h2.section {
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 3.5rem 0 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.deck {
  font-size: 1.08rem; color: var(--muted);
  max-width: 46ch; margin: 1.4rem 0 0; line-height: 1.62;
}

/* ---- hero ---------------------------------------------------------------- */
.hero { padding: 3.5rem 0 0; }

/* ---- the signature: a run log where the gap is the point ------------------ */
.runlog {
  margin: 2.75rem 0 0;
  border-top: 1px solid var(--firm); border-bottom: 1px solid var(--firm);
  padding: 1.1rem 0;
}
.runlog-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  margin-bottom: .85rem;
}
.ticks { display: flex; align-items: flex-end; gap: .28rem; height: 2.4rem; }
.ticks i {
  flex: 1; background: var(--live); border-radius: 1px; opacity: .85;
  transform-origin: bottom;
  animation: rise .5s cubic-bezier(.2,.8,.3,1) both;
}
.ticks i.quiet { background: var(--quiet); opacity: .5; }
.ticks i.missing {
  background: transparent; border: 1px dashed var(--amber);
  animation-delay: 1.15s;
}
@keyframes rise { from { transform: scaleY(.05); opacity: 0 } to { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .ticks i { animation: none } }

.runlog-key {
  display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .9rem;
  font-family: var(--mono); font-size: .66rem; color: var(--muted);
}
.runlog-key span { display: flex; align-items: center; gap: .4rem; }
.runlog-key b { display: block; width: .6rem; height: .6rem; border-radius: 1px; }
.k-did b { background: var(--live); }
.k-quiet b { background: var(--quiet); opacity: .5; }
.k-missing { color: var(--amber); font-weight: 700; }
.k-missing b { border: 1px dashed var(--amber); }

/* ---- entry list (writing + open source) ---------------------------------- */
.entries {
  display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
}
.entry {
  background: var(--sheet); padding: 1.1rem 1.2rem;
  display: grid; gap: .3rem; text-decoration: none; color: var(--ink);
}
a.entry:hover { background: var(--amber-w); }
.entry .meta {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.entry .title { font-family: var(--mono); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.entry .blurb { font-size: .92rem; color: var(--muted); }

.more {
  display: inline-block; margin-top: 1.1rem;
  font-family: var(--mono); font-size: .78rem;
}

/* ---- projects ------------------------------------------------------------ */
.projects { display: grid; gap: 1.5rem; }
@media (min-width: 42rem) { .projects { grid-template-columns: 1fr 1fr; } }
.proj {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.25rem 1.35rem; display: grid; gap: .4rem; align-content: start;
}
.proj .meta {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.proj h3 { font-family: var(--mono); font-size: 1.05rem; margin: 0; letter-spacing: -.02em; }
.proj .blurb { margin: 0; font-size: .93rem; color: var(--muted); }
.proj .stack {
  margin: .3rem 0 0; font-family: var(--mono); font-size: .7rem; color: var(--faint);
}
.proj .proj-link { margin: .5rem 0 0; font-family: var(--mono); font-size: .76rem; }

/* ---- offer --------------------------------------------------------------- */
.offer { display: grid; gap: 1.5rem; }
@media (min-width: 38rem) { .offer { grid-template-columns: 1fr 1fr; } }
.offer .item h3 { font-family: var(--mono); font-size: .95rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.offer .item p { margin: 0; font-size: .94rem; color: var(--muted); }
.offer .item.wide { grid-column: 1 / -1; border-left: 2px solid var(--amber); padding-left: 1rem; }

/* ---- contact ------------------------------------------------------------- */
.contact { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--firm); }
.contact p { color: var(--muted); max-width: 46ch; margin: 0 0 1.1rem; }
.mail {
  font-family: var(--mono); font-size: 1.05rem; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: .15rem;
}
.aside { margin-top: 1.4rem; font-size: .86rem; color: var(--faint); }
.aside a { color: var(--muted); text-decoration-color: var(--rule); }

/* ---- long-form prose ----------------------------------------------------- */
/* The container is the measure here, so nothing needs an individual cap. */
body.prose main { font-family: var(--serif); font-size: 17px; line-height: 1.72; }
body.prose main p { margin: 0 0 1.4rem; }
body.prose main h2 {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700;
  letter-spacing: .02em; margin: 3rem 0 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--rule); max-width: none; text-wrap: balance;
}
body.prose main h3 { font-family: var(--mono); font-size: .95rem; margin: 2rem 0 .6rem; }
body.prose main code {
  font-family: var(--mono); font-size: .86em;
  background: var(--sheet); padding: .08em .32em; border-radius: 2px;
}
body.prose main pre {
  font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1rem 1.1rem; overflow-x: auto; max-width: none;
}
body.prose main pre code { background: none; padding: 0; }
body.prose main blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--amber); font-style: italic; color: var(--muted);
}
body.prose main blockquote p:last-child { margin-bottom: 0; }
body.prose main ul, body.prose main ol { margin: 0 0 1.4rem; padding-left: 1.2rem; }
body.prose main li { margin-bottom: .5rem; }
body.prose main hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.article-head { padding: 3.5rem 0 0; }
.eyebrow {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
  margin: 0 0 1.25rem;
}

/* Tables: figures are the content, so they get tabular numerals and a rule. */
.table-wrap { overflow-x: auto; margin: 2rem 0; max-width: none; }
table {
  border-collapse: collapse; width: 100%;
  font-family: var(--mono); font-size: .82rem; font-variant-numeric: tabular-nums;
}
th, td { padding: .55rem .8rem; text-align: left; white-space: nowrap; }
thead th {
  border-bottom: 1px solid var(--firm); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
tbody tr { border-bottom: 1px solid var(--rule); }
tbody tr:last-child { border-bottom: none; }
td:nth-child(n+3), th:nth-child(n+3) { text-align: right; }

/* The one figure that is the point of the piece: a sum where the hidden line is
   amber, because amber is this site's colour for "you could not see this". */
.discrepancy {
  margin: 2.5rem 0; max-width: none;
  border-top: 1px solid var(--firm); border-bottom: 1px solid var(--firm);
  padding: 1.25rem 0;
}
.discrepancy .cap {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 1rem;
}
.discrepancy .row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  padding: .4rem 0; font-size: clamp(.82rem, 2.4vw, .95rem);
}
.discrepancy .row .k { color: var(--muted); }
.discrepancy .row .v { font-weight: 700; font-size: 1.1em; }
.discrepancy .row.hidden { color: var(--amber); }
.discrepancy .row.hidden .k, .discrepancy .row.hidden .v { color: var(--amber); }
.discrepancy .row.total {
  border-top: 1px solid var(--firm); margin-top: .3rem; padding-top: .7rem;
}
.discrepancy .row.total .k { color: var(--ink); font-weight: 700; letter-spacing: .04em; }
.discrepancy .row.total .v { font-size: 1.5em; }
.discrepancy .note {
  font-family: var(--mono); font-size: .72rem; line-height: 1.6;
  color: var(--muted); margin-top: 1rem;
}
.reveal { animation: drop .55s cubic-bezier(.2,.75,.3,1) both; animation-delay: 1.1s; }
.reveal-late { animation-delay: 1.35s; }
@keyframes drop { from { opacity: 0; transform: translateY(-.4rem) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none } }

.statement {
  max-width: none; margin: 3rem 0; padding: 1.75rem 0;
  border-top: 1px solid var(--firm); border-bottom: 1px solid var(--firm);
  font-family: var(--mono); font-size: clamp(1.05rem, 3vw, 1.35rem);
  line-height: 1.4; letter-spacing: -.015em; font-weight: 700; text-wrap: balance;
}

.signoff {
  max-width: none; margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--firm);
  font-family: var(--mono); font-size: .82rem; line-height: 1.75; color: var(--muted);
}
.signoff strong { color: var(--ink); }

/* ---- footer -------------------------------------------------------------- */
.foot {
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
}
.foot p { margin: 0 0 .35rem; }
.foot .fine { color: var(--faint); margin-top: .8rem; }