/* Shared stylesheet for the /projects/ pages. Same language as the home page:
   sand ground, ink outlines, sage accents, and the sticker treatment with a
   hard offset shadow. The home page keeps its CSS inline because it is one
   document; five prose pages are cheaper sharing this file. */

:root{
  --sand:#f2e7d3;
  --sand-2:#e9dbc0;
  --ink:#33281f;
  --ink-soft:#5f5142;
  --sage:#7d9376;
  --sage-deep:#4f6349;
  --wood:#c08d5a;
  --red:#c4482f;
  --yellow:#e2a92e;
  --shadow-sm:3px 3px 0 var(--ink);
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  color-scheme:light;
}

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

body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--body);font-size:17.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.wrap{width:min(100% - 40px,760px);margin:0 auto}

.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--sand);padding:10px 16px;z-index:99}
.skip:focus{left:10px;top:10px}

/* ── header ───────────────────────────────────────────────── */
.site-header{border-bottom:2.5px solid var(--ink);background:var(--sand-2)}
.nav{
  width:min(100% - 40px,1180px);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;min-height:62px;
}
.brand{
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1;
  font-weight:700;font-size:20px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.brand:hover{color:var(--red)}
.nav-links{display:flex;gap:20px;flex-wrap:wrap}
.nav-link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:13.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sage-deep);text-decoration:none;
}
.nav-link:hover,.nav-link[aria-current='page']{color:var(--red)}

/* back out of a project page without using the browser button */
.back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:13.5px;font-weight:600;color:var(--sage-deep);text-decoration:none;
}
.back:hover{color:var(--red)}
.back span{font-size:16px;line-height:1}
.more__back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;
  font-size:14.5px;font-weight:600;color:var(--red);text-decoration:none;
}
.more__back:hover{color:var(--ink)}

/* ── page head ────────────────────────────────────────────── */
.project-head{padding:clamp(40px,6vh,68px) 0 clamp(26px,3vh,36px)}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage-deep);margin:0 0 16px;display:flex;align-items:center;gap:11px;
}
.eyebrow::after{content:"";flex:1;height:2px;background:var(--sage);opacity:.45}
h1{
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1;
  font-weight:700;font-size:clamp(40px,7vw,72px);line-height:.96;
  letter-spacing:-.025em;margin:0 0 20px;
}
.standfirst{font-size:clamp(19px,2.1vw,22px);line-height:1.5;margin:0 0 26px;max-width:46ch}

.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.facts li{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;
  background:var(--sand-2);border:2px solid var(--ink);padding:4px 11px;
}

/* ── body ─────────────────────────────────────────────────── */
main{padding-bottom:clamp(56px,8vh,90px)}
article{padding-top:26px;border-top:2.5px solid var(--ink)}
article h2{
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1;
  font-weight:700;font-size:clamp(26px,3.6vw,38px);line-height:1.06;
  letter-spacing:-.02em;margin:42px 0 14px;
}
article h3{
  font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1;
  font-weight:700;font-size:20px;margin:28px 0 8px;
}
article p{margin:0 0 18px}
article ul{margin:0 0 18px;padding-left:22px}
article li{margin-bottom:9px}
article li::marker{color:var(--sage-deep)}
article strong{font-weight:600}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--sand-2);border:1.5px solid var(--ink);padding:1px 5px;
}

.callout{
  background:var(--sage);color:var(--sand);
  border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  padding:20px 22px;margin:0 0 26px;
}
.callout p{margin:0}
.callout code{background:rgba(0,0,0,.22);border-color:rgba(242,231,211,.5);color:var(--sand)}

.table-scroll{overflow-x:auto;margin:0 0 26px}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:420px}
th,td{text-align:left;padding:11px 13px;border-bottom:2px solid var(--ink);vertical-align:top}
thead th{
  border-bottom-width:2.5px;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sage-deep);
}
tbody tr:last-child td{border-bottom:0}
td strong{font-weight:600}

.repo-line{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;
  border-top:2.5px solid var(--ink);margin-top:42px;padding-top:20px;
}
.repo-line .tech{font-size:13px;font-weight:600;color:var(--sage-deep);letter-spacing:.04em}
.mono-link{font-size:14px;font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* ── sibling projects ─────────────────────────────────────── */
.more{margin-top:52px}
.more__head{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage-deep);margin:0 0 16px;display:flex;align-items:center;gap:11px;
}
.more__head::after{content:"";flex:1;height:2px;background:var(--sage);opacity:.45}
.more__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.more__item{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--sand-2);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
  padding:15px 17px;transition:transform .16s ease,box-shadow .16s ease;
}
.more__item:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);color:var(--ink)}
.more__item b{
  display:block;font-family:var(--display);font-variation-settings:'SOFT' 100,'WONK' 1;
  font-weight:700;font-size:18px;margin-bottom:4px;
}
.more__item span{font-size:14.5px;color:var(--ink-soft);line-height:1.45}

/* ── footer ───────────────────────────────────────────────── */
.site-footer{border-top:2.5px solid var(--ink);padding:26px 0 40px;font-size:14.5px}
.foot{
  width:min(100% - 40px,1180px);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:baseline;
}
.foot a{font-weight:600;display:inline-block;padding:9px 0}