/* ============================================================
   hiendm — shared stylesheet
   Instrument Serif for anything that matters, Instrument Sans
   for everything else. Cream ground, coral accent, pine dark.
   ============================================================ */

:root{
  --cream:#FCFAF2;
  --cream-2:#F5F2E7;
  --cream-3:#EFEBDC;
  --ink:#16150F;
  --ink-soft:#56534A;
  --muted:#74705F;        /* 4.8:1 on cream — was #948F81 at 3.1:1, failed AA */
  --muted-line:#948F81;   /* the old value, decorative use only (SVG strokes) */
  --rule:#E2DCCB;
  --accent:#D9503A;       /* decorative: strokes, borders, large type */
  --accent-text:#B83E29;  /* 5.3:1 on cream — for any accent-coloured text */
  --accent-soft:#F0C4B9;
  --accent-wash:#FBF1EE;
  --pine:#1B4034;
  --pine-2:#22493C;
  --pine-line:#2E5548;
  --pine-soft:#96B5A9;
  --r:40px;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--accent-soft);color:var(--ink)}

/* Ambient background: the site's own fork motif at page scale. Seven branch
   points are computed to sit exactly ON the spine curve and leave it at 58° from
   the tangent, same gesture as the Fork piece — they connect, they don't float. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg svg{position:absolute;top:0;right:0;height:100%;width:min(58vw,780px)}
.bg-spine{fill:none;stroke:var(--cream-3);stroke-width:2.6;stroke-linecap:round}
.bg-branch path{fill:none;stroke:var(--cream-3);stroke-width:1.9;stroke-linecap:round}
.bg-branch circle{fill:var(--cream);stroke:var(--cream-3);stroke-width:1.9}
@media (max-width:820px){ .bg svg{width:88vw;opacity:.7} }

.wrap{max-width:70rem;margin:0 auto;padding:0 1.75rem;position:relative;z-index:1}
.narrow{max-width:44rem}

/* ---------------- nav ---------------- */
nav{
  position:fixed;top:1.1rem;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:1.9rem;
  background:color-mix(in srgb,var(--cream) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--rule);border-radius:999px;
  padding:.55rem .65rem .55rem 1.35rem;font-size:.86rem;
  max-width:calc(100vw - 2rem);
}
nav .me{font-family:var(--serif);font-size:1.15rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
nav .sp{flex:1;min-width:1.2rem}
nav a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--ink)}
nav .pill{
  background:var(--accent-soft);border:1px solid #E4A897;color:var(--ink);
  border-radius:999px;padding:.38rem 1rem;font-weight:500;
}
nav .pill:hover{background:#EDB6A8}
@media(max-width:660px){nav .hide{display:none}}

/* ---------------- shared type ---------------- */
.eyebrow{font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3rem,8.5vw,6.6rem);line-height:.95;letter-spacing:-.025em;margin:0;
}
h1 em{font-style:italic;display:block}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.06;letter-spacing:-.02em;margin:0 0 1.2rem}
h3{font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.25;margin:0 0 .5rem}
a{color:var(--accent-text)}
a:hover{color:var(--ink)}

.lede{font-size:1.14rem;color:var(--ink-soft);max-width:34rem}
.lede b{font-weight:500;color:var(--ink)}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--rule);margin-top:6rem;padding:4.5rem 0 6rem;position:relative;z-index:1}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;max-width:56rem}
footer h4{font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 1rem}
footer ul{list-style:none;margin:0;padding:0;font-size:.95rem;line-height:2.05}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--accent-text)}
footer .sig{font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--ink);max-width:20rem}
footer .fine{margin-top:3.5rem;font-size:.78rem;color:var(--muted)}

@media (max-width:820px){
  body{font-size:16.5px}
  :root{--r:28px}
  .fgrid{grid-template-columns:1fr;gap:2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}