/* ============================================================
   Josh Mellender — mellender.io
   "Engineering desk": spec-sheet structure, bold Archivo display,
   monospace as structure, one confident amber signal. Flat, sharp.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  --paper:#F2F1EC;
  --surface:#F8F7F3;
  --raised:#FFFFFF;
  --ink:#161719;
  --body:#31333A;
  --muted:#63666D;
  --faint:#9A9DA1;
  --line:#DBDAD2;
  --line-2:#E7E6DF;
  --amber:#C1521F;
  --amber-ink:#A6441A;
  --teal:#1C6B62;
  --ink-deep:#0E1214;
  --ink-deep-2:#161C20;
  --on-dark:#ECEBE4;
  --on-dark-mut:#9099A0;
  --display:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;
  --serif:'Newsreader', Georgia, serif;
  --r:3px;
  --maxw:1120px;
  --gutter:clamp(1.25rem, 5vw, 3.25rem);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--display); color:var(--ink); line-height:1.02; text-wrap:balance; font-weight:800; letter-spacing:-.025em; }
::selection { background:var(--amber); color:#fff; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow { font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.accent { color:var(--amber-ink); }
.mono { font-family:var(--mono); }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800; letter-spacing:-.03em; color:var(--ink); font-size:1.05rem; }
.brand .mk { width:26px; height:26px; border-radius:var(--r); background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:800; font-size:.74rem; display:flex; align-items:center; justify-content:center; letter-spacing:-.03em; }
.nav-links { display:flex; align-items:center; gap:1.7rem; }
.nav-links a { font-family:var(--mono); font-size:.8rem; letter-spacing:.02em; color:var(--muted); transition:color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--ink); }
.nav-links a[aria-current="page"] { color:var(--amber-ink); }
.nav-cta { color:var(--paper) !important; background:var(--amber); padding:.5rem .8rem; border-radius:var(--r); }
.nav-cta:hover { background:var(--ink); }
.nav-toggle { display:none; }
@media (max-width:760px){
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:absolute; top:62px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:.5rem var(--gutter) 1rem; }
  .nav-links.open a { padding:.8rem 0; width:100%; border-bottom:1px solid var(--line-2); }
  .nav-toggle { display:inline-flex; background:none; border:1px solid var(--line); border-radius:var(--r); padding:.4rem .6rem; font-family:var(--mono); font-size:.78rem; color:var(--ink); cursor:pointer; }
}

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; padding:.7rem 1.15rem; border-radius:var(--r); border:1px solid var(--ink); background:transparent; color:var(--ink); transition:.15s ease; cursor:pointer; }
.btn:hover { background:var(--ink); color:var(--paper); }
.btn.primary { background:var(--amber); border-color:var(--amber); color:#fff; }
.btn.primary:hover { background:var(--ink); border-color:var(--ink); }
.btn.dark { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn.dark:hover { background:var(--amber); border-color:var(--amber); color:#fff; }

/* ---------- section scaffold ---------- */
section { padding:clamp(3rem,7vw,5.5rem) 0; }
.section-top { border-top:1px solid var(--line); }
.sec-head { display:flex; align-items:baseline; gap:1.1rem; margin-bottom:2.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.sec-head .num { font-family:var(--mono); font-size:.75rem; color:var(--amber-ink); letter-spacing:.05em; font-weight:500; }
.sec-head .num::before { content:"["; color:var(--faint); } .sec-head .num::after { content:"]"; color:var(--faint); }
.sec-head h2 { font-size:clamp(1.7rem,1.2rem+1.8vw,2.5rem); letter-spacing:-.03em; font-weight:800; }
.lead { font-size:1.18rem; color:var(--muted); max-width:60ch; line-height:1.5; }

/* ---------- hero ---------- */
.hero { padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem); }
.hero .kick { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.8rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:.35rem .8rem; }
.hero .dot { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero h1 { font-size:clamp(2.7rem,1.5rem+5vw,5rem); font-weight:900; letter-spacing:-.045em; line-height:.98; }
.hero h1 .soft { color:var(--amber); }
.hero .sub { margin-top:1.7rem; max-width:48ch; font-size:1.24rem; color:var(--muted); line-height:1.5; }
.hero .sub strong { color:var(--ink); font-weight:600; }
.cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem; }
.hero-grid { display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(1.5rem,4vw,3rem); align-items:end; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; align-items:start; } }
.spec { border:1px solid var(--ink); border-radius:var(--r); overflow:hidden; align-self:end; }
.spec-head { background:var(--ink); color:var(--paper); padding:.55rem .9rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; display:flex; justify-content:space-between; }
.spec .row { display:flex; gap:1rem; padding:.72rem .9rem; border-bottom:1px solid var(--line); font-family:var(--mono); }
.spec .row:last-child { border-bottom:0; }
.spec .k { color:var(--faint); letter-spacing:.08em; text-transform:uppercase; font-size:.64rem; width:52px; flex:none; padding-top:.15rem; }
.spec .v { color:var(--body); font-size:.8rem; line-height:1.35; }
.spec .v .accent { color:var(--amber-ink); font-weight:600; }

/* ---------- instrument readout (stat strip) ---------- */
.console { margin-top:clamp(2.5rem,5vw,3.75rem); border:1px solid var(--ink); border-radius:var(--r); background:var(--surface); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.stat { padding:1.3rem 1.4rem; border-right:1px solid var(--line); position:relative; }
.stat:last-child { border-right:0; }
.stat::before { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.stat:hover::before { transform:scaleX(1); }
.stat .n { font-family:var(--display); font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.stat .n small { font-size:1rem; color:var(--amber-ink); font-weight:700; }
.stat .l { font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-top:.55rem; line-height:1.4; letter-spacing:.01em; }
@media (max-width:720px){ .console{grid-template-columns:repeat(2,1fr)} .stat:nth-child(2){border-right:0} .stat:nth-child(-n+2){border-bottom:1px solid var(--line)} }
@media (max-width:400px){ .console{grid-template-columns:1fr} .stat{border-right:0;border-bottom:1px solid var(--line)} }

/* ---------- grids ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
@media (max-width:820px){ .grid-3{grid-template-columns:1fr} }
@media (max-width:680px){ .grid-2{grid-template-columns:1fr} }

/* ---------- ledger cards (flat, hairline, indexed) ---------- */
.card { border-bottom:1px solid var(--line); border-right:1px solid var(--line); background:transparent; padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; transition:background .18s ease; position:relative; }
.grid-2 .card:nth-child(2n){ border-right:0; }
.grid-3 .card:nth-child(3n){ border-right:0; }
.card.link:hover { background:var(--surface); }
.card.link:hover h3 { color:var(--amber-ink); }
.card h3 { font-size:1.22rem; letter-spacing:-.02em; transition:color .15s; }
.card p { color:var(--muted); font-size:.98rem; margin:0; line-height:1.55; }
.card .tag { font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.card .tag::before { content:""; width:6px; height:6px; border-radius:1px; background:currentColor; display:inline-block; }
.tag.sells{ color:var(--amber-ink) } .tag.ships{ color:var(--teal) } .tag.both{ color:var(--muted) }
.stackline { margin-top:auto; display:flex; flex-wrap:wrap; gap:.4rem; padding-top:.4rem; }
.stackline span { font-family:var(--mono); font-size:.68rem; color:var(--faint); border:1px solid var(--line); border-radius:2px; padding:.14rem .44rem; }

/* poles (what I do) */
.pole { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:1.7rem 1.6rem; background:transparent; }
.grid-3 .pole:nth-child(3n){ border-right:0; }
.pole .tg { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; }
.pole.a .tg{color:var(--amber-ink)} .pole.b .tg{color:var(--teal)} .pole.c .tg{color:var(--ink)}
.pole h3 { font-size:1.28rem; margin:.7rem 0 .5rem; letter-spacing:-.02em; }
.pole p { color:var(--muted); font-size:.98rem; line-height:1.55; }

/* artifact tiles (screenshot-led, flat) */
.artifact { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); transition:.16s ease; }
.artifact:hover { border-color:var(--ink); }
.artifact:hover h3 { color:var(--amber-ink); }
.shot { border-bottom:1px solid var(--line); background:var(--raised); overflow:hidden; }
.shot img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; display:block; transition:transform .3s ease; }
.artifact:hover .shot img { transform:scale(1.02); }
.artifact .body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; }
.artifact h3 { font-size:1.14rem; letter-spacing:-.02em; transition:color .15s; }
.artifact p { color:var(--muted); font-size:.92rem; margin:0; line-height:1.5; }
.artifact .meta { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); display:flex; gap:.7rem; align-items:center; }
.artifact .live { color:var(--teal); }
/* live-artifact grid keeps gaps for tiles */
#work-artifacts { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; border-top:0; }
@media (max-width:680px){ #work-artifacts{grid-template-columns:1fr} }

/* ---------- dark band ---------- */
.band-dark { background:var(--ink-deep); color:var(--on-dark); }
.band-dark h2, .band-dark h3 { color:#fff; }
.band-dark .lead, .band-dark p { color:var(--on-dark-mut); }
.band-dark .eyebrow, .band-dark .sec-head .num { color:var(--on-dark-mut); }
.band-dark .sec-head { border-bottom-color:rgba(255,255,255,.12); }
.band-dark .grid-2 { border-top-color:rgba(255,255,255,.12); }
.band-dark .card { border-color:rgba(255,255,255,.12); background:transparent; }
.band-dark .card.link:hover { background:var(--ink-deep-2); }
.band-dark .card p { color:var(--on-dark-mut); }

/* ---------- article / long-form ---------- */
.article { max-width:42rem; }
.article .kicker { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink); }
.article h1 { font-family:var(--display); font-size:clamp(2.1rem,1.4rem+2.6vw,3.2rem); font-weight:900; letter-spacing:-.035em; margin-top:.9rem; line-height:1.02; }
.article .dek { font-family:var(--serif); font-size:1.35rem; font-style:italic; color:var(--muted); margin-top:1.1rem; line-height:1.4; }
.article .byline { font-family:var(--mono); font-size:.76rem; color:var(--faint); margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.article .prose { font-family:var(--serif); font-size:1.26rem; line-height:1.72; color:#24262A; margin-top:2.2rem; }
.article .prose p { margin-bottom:1.4rem; }
.article .prose p:first-of-type::first-letter { font-family:var(--display); font-weight:800; font-size:3.4rem; float:left; line-height:.8; padding:.1rem .6rem .1rem 0; color:var(--amber); }

/* ---------- footer ---------- */
.footer { background:var(--ink-deep); color:var(--on-dark-mut); padding:3.5rem 0 2.5rem; }
.footer-in { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; }
.footer .brand { color:#fff; }
.footer .brand .mk { background:var(--amber); color:#fff; }
.footer a { color:var(--on-dark-mut); }
.footer a:hover { color:#fff; }
.footer .fcol h4 { font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mut); font-weight:500; margin-bottom:.8rem; }
.footer .fcol a { display:block; font-family:var(--mono); font-size:.82rem; margin-bottom:.5rem; color:#C4C7C2; }
.footer .fcols { display:flex; gap:3rem; flex-wrap:wrap; }
.footer .legal { font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); width:100%; }

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto} }