/* Razin blog: shared fonts and page chrome for the standalone research posts.
   Each post keeps its own colour tokens and figure styles; this file only adds
   the self-hosted type and the Razin top bar, staircase and footer. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/blog/_shared/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("/blog/_shared/fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/blog/_shared/fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/blog/_shared/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/blog/_shared/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* top bar: symbol home, Blog, the project repo. Static, never sticky. */
.rz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  font: 500 0.82rem/1.2 var(--body);
}
.rz-top .rz-home { display: inline-flex; align-items: center; gap: 1.1rem; }
.rz-top a { color: var(--ink); text-decoration: none; }
.rz-top a:hover { color: var(--accent); }
.rz-top .rz-mark { display: inline-flex; width: 30px; height: 30px; color: var(--ink); }
.rz-top .rz-mark:hover { color: var(--accent); }
.rz-top .rz-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rz-top nav { display: flex; gap: 1.4rem; }

/* the Razin staircase: five steps, saffron down to oxide, widening to the full column */
.rz-stair { display: grid; gap: 0; margin-top: 0.4rem; }
.rz-stair i { display: block; height: 7px; }
.rz-stair i:nth-child(1) { width: 34%; background: #f2c14e; }
.rz-stair i:nth-child(2) { width: 50.5%; background: #e0782e; }
.rz-stair i:nth-child(3) { width: 67%; background: #c8321e; }
.rz-stair i:nth-child(4) { width: 83.5%; background: #b02a17; }
.rz-stair i:nth-child(5) { width: 100%; background: #7a1e14; }

/* footer: repo, back to the blog, razin.ai */
.rz-foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); font: 500 0.85rem/1.4 var(--body); }
.rz-foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.rz-foot a:hover { color: var(--accent); }

@media (max-width: 448px) { .rz-stair i { height: 5px; } }