/* faiman.com - shared foundations. Single source of truth for tokens and type.
   Linked by index.html and by writing/*.html so the two can never drift apart. */
:root{
  --paper:#fcfbf9;
  --ink:#0e0f12;
  --ink-2:#43454c;
  --ink-3:#8d8f97;
  --rule:#e5e3dd;
  --ember:#9b3d21;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0c0d0f; --ink:#f4f3ef; --ink-2:#b9bbc2; --ink-3:#7d7f88;
    --rule:#212328; --ember:#e0714d;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--ink);text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}

.wrap{max-width:1160px;margin:0 auto;padding:0 48px}
@media (max-width:900px){.wrap{padding:0 24px}}

.site-head{border-bottom:1px solid var(--rule);position:relative;z-index:2}
.site-head .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;height:70px}
.wordmark{font-family:var(--serif);font-size:21px;letter-spacing:.01em;color:var(--ink);white-space:nowrap;flex:0 0 auto}
.site-head nav{display:flex;gap:30px;min-width:0}
.site-head nav a{color:var(--ink-3);font-size:13.5px}
.site-head nav a:hover{color:var(--ink)}
@media (max-width:640px){
  .site-head nav{gap:8px;overflow-x:auto;scrollbar-width:none}
  .site-head nav::-webkit-scrollbar{display:none}
  .site-head nav a{white-space:nowrap;font-size:13px}
}
@media (max-width:400px){
  .site-head .wrap{gap:10px}
  .site-head nav{gap:6px}
  .site-head nav a{font-size:12px}
}

/* Tracked sans overline. Replaces the old mono kicker and its rule. */
.overline{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin:0 0 34px;
}
hr.rule{border:0;border-top:1px solid var(--rule);margin:0}

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