/* ============================================================================
   SACRVM — shared base. Every page links this file.

   Two colours, and nothing else: celadon paper, near-black ink. Every grey is
   the ink at reduced opacity, every hover is the two colours swapping places.
   Thin 1px boxes, zero radius anywhere.

   Fonts are served from this host on purpose — no request ever leaves for a
   third-party server, and the legal page says so out loud.
   ========================================================================== */

/* -- Fonts (variable; one file covers all weights) --------------------------- */

@font-face{
  font-family:'Martian Mono';
  font-style:normal;font-weight:100 800;font-display:swap;
  src:url(fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Martian Mono';
  font-style:normal;font-weight:100 800;font-display:swap;
  src:url(fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  /* Shade + block glyphs for the type portrait on the CV page. Hand-built
     (tools/make-blocks-font.py): Martian Mono itself has none, and the
     advance is matched to its measured 0.7em so the grid stays exact. */
  font-family:'Martian Mono';
  font-style:normal;font-weight:100 800;font-display:swap;
  src:url(fonts/sacrvm-blocks.woff2) format('woff2');
  unicode-range:U+2588,U+2591-2593;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* -- Tokens ------------------------------------------------------------------ */

:root{
  --paper: #A1C9C8;
  --ink:   #121211;
  --ink-70: rgba(18,18,17,.70);
  --ink-45: rgba(18,18,17,.45);
  --line:  var(--ink);
  --maxw:  960px;
  --sans:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'Martian Mono', 'Consolas', ui-monospace, monospace;
}

/* -- Base -------------------------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}

::selection{background:var(--ink);color:var(--paper)}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:0 28px;
}

a{color:inherit}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.page{max-width:var(--maxw);margin:0 auto}

/* -- Sections: a hairline, and the label as a tab sitting on it -------------- */

section{position:relative;border-top:1px solid var(--line);padding:56px 0}

.tab{
  position:absolute;top:0;left:0;transform:translateY(-50%);
  background:var(--paper);border:1px solid var(--line);
  padding:6px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;
}

/* -- Chips: thin boxed labels, used wherever a list needs naming ------------- */

.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  border:1px solid currentColor;padding:4px 10px;opacity:.75;
}

/* -- <site-nav>: the top navigation, mono and quiet -------------------------- */

site-nav{display:block;padding:24px 0}
site-nav .bar{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
site-nav a{
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;
  color:var(--ink-45);text-decoration:none;
}
site-nav a:hover{color:var(--ink)}
site-nav .brand{color:var(--ink-70);letter-spacing:.28em}
site-nav .links{display:flex;gap:24px;align-items:center}
site-nav .here{color:var(--ink);border:1px solid var(--ink);padding:5px 11px}

/* -- <site-footer>: hairline, copyright, the legal link ---------------------- */

site-footer{display:block}
site-footer .foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:20px 0 56px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-45);
}
site-footer .foot-nav{display:flex;gap:22px}
site-footer a{text-decoration:none;color:var(--ink-45)}
site-footer a:hover{color:var(--ink)}

/* -- Small screens ----------------------------------------------------------- */

@media (max-width:720px){
  body{padding:0 18px}
  section{padding:44px 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}