@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/overpass-regular.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/overpass-italic.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/overpass-bold.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/overpass-bold-italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-regular.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/newsreader-bold.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/newsreader-bold-italic.woff2") format("woff2"); }

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #000;
  --muted: #595959;            /* WCAG AA on white (>= 7:1) */
  --img: 96px;                 /* page image size */
  --gap: 24px;                 /* space between content column and image gutter */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Overpass", sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
a { color: var(--ink); text-decoration: underline; }
a:focus-visible, .lang:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
img { max-width: 100%; }

/* shared wrapper for home/about/blog. Right padding reserves the image gutter so the
   content column (header text, body, footer) is the same width, image excluded. */
.wrap { position: relative; min-height: var(--img); max-width: 720px; margin: 40px auto; padding: 0 calc(20px + var(--img) + var(--gap)) 0 20px; }

/* hybrid index-card header bar */
.pagebar { font-family: var(--mono); display: flex; justify-content: space-between; font-size: 13px; }
.rule { border: none; border-top: 1px solid var(--ink); margin: 4px 0 16px; }
.descriptor { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* shared site nav, top of every page */
.site-nav { font-family: var(--mono); font-size: 12px; line-height: 1.9; margin: 0 0 20px; }
.site-nav a { margin-right: 14px; white-space: nowrap; }
.site-nav a:last-child { margin-right: 0; }
.site-nav a.here { color: var(--muted); text-decoration: none; }

/* header: text column on the left; the swappable image sits in the fixed right gutter
   (absolutely positioned), so header text / body / footer all share the same width. */
.page-head { margin-bottom: 20px; }
.page-head .site-nav { margin-bottom: 0; }
.page-image { position: absolute; top: 0; right: 20px; width: var(--img); height: var(--img); object-fit: cover; filter: grayscale(100%); transition: filter .3s ease; }
.page-image:hover { filter: grayscale(0%); }

/* homepage */
/* body text fills the shared content column (same width as the header text) */
.rows { font-family: var(--mono); font-size: 13px; line-height: 2; margin-top: 32px; clear: both; }
.rows .lbl { display: block; color: var(--muted); }

/* prose pages (home + blog posts) */
.prose p { margin: 0 0 1em; }
.prose h2 { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 26px 0 4px; }
.posttitle { font-size: 22px; margin: 14px 0 6px; }

/* blog post body only: serif reading face. Section labels stay mono via .prose h2. */
.post-body { font-family: "Newsreader", Georgia, serif; font-size: 17px; line-height: 1.65; }

/* blog list */
.postlist { list-style: none; padding: 0; font-family: var(--mono); font-size: 14px; line-height: 2.1; }
.postlist time { color: var(--muted); margin-right: 12px; }
.feed, .back { font-family: var(--mono); font-size: 12px; }

/* footer + lang toggle */
.site-footer { max-width: 720px; margin: 36px auto 28px; padding: 0 calc(20px + var(--img) + var(--gap)) 0 20px; }
.foot-inner { border-top: 1px solid #ddd; padding-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.lang-toggle .lang { margin-left: 8px; }
.lang-toggle .current { color: var(--ink); }

/* ---- resume: man-page aesthetic (ported, scramble removed) ---- */
.resume { position: relative; min-height: var(--img); max-width: 720px; margin: 40px auto; padding: 0 calc(20px + var(--img) + var(--gap)) 0 20px; font-size: 13px; }
.resume h1 { font-size: 15px; font-weight: 700; margin: 22px 0 0; }
.resume .category { margin: 4px 0 10px 30px; font-size: 14px; }
.resume .place { margin: 10px 0 4px 50px; font-size: 14px; }
.resume .place time { color: var(--muted); }
.resume .description { margin: 0 0 6px 70px; font-size: 13px; }
.resume .description .b { display: inline-block; width: 14px; margin-left: -14px; }
.resume .description .grp { font-size: 13px; }
.resume-links { font-family: var(--mono); font-size: 13px; margin: 24px 0 0; }
@media (max-width: 720px) {
  .resume .category { margin-left: 6px; }
  .resume .place { margin-left: 14px; }
  .resume .description { margin-left: 20px; }
}

/* mobile: gutter collapses to full-width and the image is dropped entirely.
   Placed last so these overrides win over the unconditional .site-footer/.wrap/.resume rules. */
@media (max-width: 560px) {
  .wrap, .resume, .site-footer { padding-right: 20px; }
  .page-image { display: none; }
}