/* ===========================================================================
   Project page styling, shared with the portfolio at aaronsteele.vercel.app.

   Same palette, same type pairing, same radius pole, same motion character, so
   clicking through from the portfolio does not feel like landing on a different
   person's site. The only difference is density: a project page has to carry
   endpoints, a tool table and a bug log, so it runs tighter than the portfolio.
   =========================================================================== */

@font-face{font-family:'Clash';src:url('/fonts/clash-display-var.woff2') format('woff2-variations');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/satoshi-var.woff2') format('woff2-variations');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Mono';src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Mono';src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Fallback';src:local('Segoe UI Semibold'),local('Helvetica Neue'),local('Arial');size-adjust:94%;ascent-override:96%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Satoshi Fallback';src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');size-adjust:99%;ascent-override:97%;descent-override:24%;line-gap-override:0%}

:root{
  --brand-h:58; --brand-c:0.155;

  --ink:        oklch(0.158 0.019 252);
  --ink-2:      oklch(0.205 0.021 252);
  --ink-line:   oklch(0.330 0.020 252);
  --ink-sunk:   oklch(0.132 0.017 252);
  --bone:       oklch(0.958 0.008 84);
  --bone-line:  oklch(0.855 0.014 84);

  --amber:      oklch(0.760 var(--brand-c) var(--brand-h));
  --amber-deep: oklch(0.590 0.140 calc(var(--brand-h) - 12));
  --amber-soft: oklch(0.860 0.090 var(--brand-h));

  --on-ink:      oklch(0.968 0.006 84);
  --on-ink-dim:  oklch(0.800 0.012 84);
  --on-ink-mute: oklch(0.645 0.014 252);
  --on-bone:     oklch(0.205 0.018 252);
  --on-bone-dim: oklch(0.420 0.016 252);
  --on-bone-mute:oklch(0.545 0.014 252);

  --fg:var(--on-ink); --fg-dim:var(--on-ink-dim); --fg-mute:var(--on-ink-mute);
  --line:var(--ink-line); --accent:var(--amber);

  /* Status sits outside the one-accent budget: one L, one C, hue only varies. */
  --st-l:0.780; --st-c:0.095;
  --ok:oklch(var(--st-l) var(--st-c) 150);
  --wait:oklch(var(--st-l) var(--st-c) 80);
  --bad:oklch(var(--st-l) var(--st-c) 27);
  --ok-wash:oklch(0.268 0.038 150); --wait-wash:oklch(0.272 0.042 80); --bad-wash:oklch(0.268 0.034 27);

  --display:'Clash','Clash Fallback',sans-serif;
  --body:'Satoshi','Satoshi Fallback',system-ui,sans-serif;
  --mono:'Mono',ui-monospace,Consolas,monospace;

  --t--1:clamp(0.80rem,0.78rem + 0.10vw,0.875rem);
  --t-0: clamp(1.02rem,0.97rem + 0.26vw,1.16rem);
  --t-1: clamp(1.18rem,1.06rem + 0.55vw,1.55rem);
  --t-2: clamp(1.52rem,1.26rem + 1.20vw,2.50rem);
  --t-3: clamp(1.95rem,1.45rem + 2.30vw,3.70rem);
  --t-4: clamp(2.50rem,1.60rem + 4.20vw,5.80rem);

  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --act:clamp(80px,11vh,140px);
  --gut:clamp(20px,5vw,72px);
  --r:0px;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--body); font-size:var(--t-0); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; accent-color:var(--amber);
}
::selection{background:var(--amber); color:oklch(0.16 0.02 252)}
img{max-width:100%; display:block}

h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; line-height:0.94; letter-spacing:-0.026em; text-wrap:balance}
h1{font-size:var(--t-4)}
h2{font-size:var(--t-3)}
h3{font-size:var(--t-1); line-height:1.06; letter-spacing:-0.022em}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:4px}

.tag{font-family:var(--mono); font-size:0.6875rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin:0}
.wrap{max-width:1360px; margin-inline:auto; padding-inline:var(--gut)}
.measure{max-inline-size:60ch}

.act{position:relative; padding-block:var(--act)}
.act--bone{
  background:var(--bone); color:var(--on-bone);
  --fg:var(--on-bone); --fg-dim:var(--on-bone-dim); --fg-mute:var(--on-bone-mute);
  --line:var(--bone-line); --accent:var(--amber-deep);
}
.act--deep{background:var(--ink); overflow:clip; isolation:isolate}
.act--deep::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 85% at 80% 12%, oklch(0.76 0.155 58 / 0.09), transparent 62%);
}

/* ---------- Hero: full-bleed plate, same parallax as the portfolio -------- */
.plate{overflow:clip; isolation:isolate}
.plate__media{position:absolute; inset:-14% 0; z-index:-2}
.plate__media img{width:100%; height:100%; object-fit:cover}
.plate__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, oklch(0.125 0.02 252 / 0.96) 0%, oklch(0.125 0.02 252 / 0.86) 48%, oklch(0.125 0.02 252 / 0.58) 100%),
    linear-gradient(to bottom, oklch(0.125 0.02 252 / 0.92) 0%, transparent 28%, transparent 62%, oklch(0.125 0.02 252 / 0.95) 100%);
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .plate__media{animation:drift linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
    @keyframes drift{from{transform:translate3d(0,-6%,0) scale(1.04)} to{transform:translate3d(0,6%,0) scale(1.04)}}
  }
}

.hero{min-height:min(88svh,860px); display:grid; align-content:center; padding-block:var(--s10) var(--s9)}
/* An auto margin in the inline axis stops a grid item stretching, so .wrap's
   own margin-inline:auto collapsed it to fit-content inside the hero grid and
   the whole masthead sat 500px narrower than the rest of the page. */
.hero > .wrap{width:100%}
.back{
  display:inline-flex; align-items:center; gap:0.55em; min-height:32px;
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:0.04em;
  text-decoration:none; color:var(--fg-mute); margin-bottom:var(--s7);
  transition:color 180ms var(--ease);
}
.back:hover{color:var(--amber)}
.back span{transition:transform 220ms var(--ease)}
.back:hover span{transform:translateX(-4px)}
.hero h1{margin-block:var(--s4) var(--s6)}
.hero__lede{font-size:var(--t-1); line-height:1.42; color:var(--fg-dim); max-inline-size:40ch}
.hero__lede b{color:var(--fg); font-weight:600}

.endpoints{
  display:grid; gap:1px; background:var(--ink-line); border:1px solid var(--ink-line);
  max-width:44rem; margin-top:var(--s7);
}
@media (min-width:40rem){.endpoints{grid-template-columns:auto 1fr}}
.endpoints dt{
  background:var(--ink-sunk); padding:var(--s3) var(--s5); display:flex; align-items:center;
  font-family:var(--mono); font-size:0.625rem; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-mute);
}
.endpoints dd{
  background:var(--ink-sunk); margin:0; padding:var(--s3) var(--s5);
  font-family:var(--mono); font-size:var(--t--1); word-break:break-word; overflow-wrap:anywhere;
}
/* Inline links in a sentence are exempt from the target-size rule, but these
   are the things a reader is most likely to reach for on a phone, so they get
   the height anyway without disturbing the row. */
.endpoints dd a{
  display:inline-block; padding-block:4px; text-decoration:none;
  box-shadow:inset 0 -1px 0 0 color-mix(in oklch, var(--amber) 55%, transparent);
}
.foot__grid .link{min-height:24px}
.endpoints dd a:hover{color:var(--amber); box-shadow:inset 0 -1px 0 0 var(--amber)}

.live{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s6); font-family:var(--mono); font-size:var(--t--1)}
.pill{
  display:inline-flex; align-items:center; gap:var(--s2); padding:5px var(--s4);
  border:1px solid var(--ink-line); background:var(--ink-sunk); color:var(--fg-mute); font-weight:500;
  transition:background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.pill[data-state="ok"]{background:var(--ok-wash); border-color:var(--ok); color:var(--ok)}
.pill[data-state="bad"]{background:var(--bad-wash); border-color:var(--bad); color:var(--bad)}
.pill[data-state="wait"]{background:var(--wait-wash); border-color:var(--wait); color:var(--wait)}

/* ---------- Section furniture -------------------------------------------- */
.head{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s7)}
.head .rule{flex:1; max-width:180px}
.rule{height:1px; background:var(--accent); border:0; margin:0}
.lead{color:var(--fg-dim); max-inline-size:56ch; margin-top:var(--s5)}
.lead b{color:var(--fg); font-weight:600}

pre{
  margin:var(--s5) 0 0; padding:var(--s5); overflow-x:auto;
  background:var(--ink-sunk); border:1px solid var(--ink-line);
  font-family:var(--mono); font-size:var(--t--1); line-height:1.7; color:var(--fg);
}
.act--bone pre{background:oklch(0.925 0.011 84); border-color:var(--bone-line); color:var(--on-bone)}
code{font-family:var(--mono)}
p code, li code, td code{font-size:0.9em; background:color-mix(in oklch, currentColor 10%, transparent); padding:1px 5px}

/* ---------- The tool ledger ---------------------------------------------- */
.ledger{margin-top:var(--s8); border-top:1px solid var(--line)}
.row{display:grid; gap:var(--s3) var(--s7); padding-block:var(--s6); border-bottom:1px solid var(--line)}
@media (min-width:58rem){.row{grid-template-columns:3rem 16rem minmax(0,1fr); gap:var(--s8)}}
.row > *{min-width:0}
.row__n{font-family:var(--mono); font-size:var(--t--1); font-weight:500; letter-spacing:0.1em; color:var(--accent); padding-top:0.35em}
.row__name{font-family:var(--mono); font-size:var(--t-0); font-weight:500; color:var(--fg); word-break:break-word}
.row__body{color:var(--fg-dim); line-height:1.62}
.wont{
  display:block; margin-top:var(--s4); padding-left:var(--s5);
  box-shadow:inset 1px 0 0 0 color-mix(in oklch, var(--accent) 60%, transparent);
  font-size:var(--t--1); color:var(--fg-mute);
}
.wont b{color:var(--fg-dim); font-weight:600}

/* ---------- Bugs ---------------------------------------------------------- */
.bugs{display:grid; gap:var(--s6); margin-top:var(--s8); padding:0; list-style:none}
@media (min-width:56rem){.bugs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s9)}}
.bugs li{border-top:1px solid var(--line); padding-top:var(--s5); min-width:0}
.bugs h3{margin-bottom:var(--s3)}
.bugs p{color:var(--fg-dim); font-size:var(--t--1); line-height:1.68; margin:0}
.bugs p b{color:var(--fg); font-weight:600}

ul.plain{margin:var(--s5) 0 0; padding-left:1.1em; max-inline-size:64ch; color:var(--fg-dim)}
ul.plain li{margin-bottom:var(--s4)}
ul.plain li::marker{color:var(--accent)}
ul.plain b{color:var(--fg); font-weight:600}

.links{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:center; margin-top:var(--s7)}
.link{
  display:inline-flex; align-items:center; gap:0.5em; min-height:32px;
  font-family:var(--mono); font-size:var(--t--1); text-decoration:none; color:var(--fg);
  box-shadow:inset 0 -1px 0 0 color-mix(in oklch, var(--accent) 55%, transparent);
  transition:color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.link:hover{color:var(--accent); box-shadow:inset 0 -1px 0 0 var(--accent)}

/* ---------- Reveal -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0; transform:translate3d(0,24px,0)}
  .rise.in{opacity:1; transform:none; transition:opacity 620ms var(--ease-out) var(--d,0ms), transform 620ms var(--ease-out) var(--d,0ms)}
  .wipe{transform:scaleX(0); transform-origin:left}
  .wipe.in{transform:scaleX(1); transition:transform 880ms var(--ease-out) var(--d,0ms)}
}

footer{border-top:1px solid var(--ink-line); background:var(--ink-sunk); padding-block:var(--s8)}
.foot__grid{display:flex; flex-wrap:wrap; gap:var(--s5) var(--s8); justify-content:space-between; align-items:baseline}
.foot__grid p{font-family:var(--mono); font-size:var(--t--1); color:var(--on-ink-mute); margin:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important}
  html:focus-within{scroll-behavior:auto}
}