@font-face {
  font-family: "Universal Sans Display 400";
  src: url("/fonts/universal-sans-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0e0e08;
  --paper: #e5e5d9;
  --color-bg-dark: var(--ink);
  --color-bg-light: var(--paper);
  --color-accent: #fa6147;
  --color-muted: #545268;
  --color-line: #3f3f37;
  --color-border: rgba(84, 82, 104, 0.3);
  --color-border-strong: rgba(84, 82, 104, 0.4);
  --color-border-hover: rgba(84, 82, 104, 0.8);
  /* Base RGB values for reusable alpha colors. */
  --ink-rgb: 14, 14, 8; /* deep charcoal */
  --paper-rgb: 229, 229, 217; /* warm paper */
  /* UI hover tint (light mode). */
  --ui-hover-bg: rgba(var(--ink-rgb), 0.08);
  /* Accent tints for copy feedback. */
  --accent-rgb: 250, 97, 71;
  --accent-soft: rgba(var(--accent-rgb), 0.2);
  --accent-border: rgba(var(--accent-rgb), 0.5);
  /* Link styling (light mode). */
  --link-color: #d4764a;
  --link-hover-color: #fa6147;
  /* Landing floor overlay base (RGB for RGBA stops). */
  --hero-floor-rgb: var(--ink-rgb);
  /* Home hero floor background (desktop uses image; mobile overrides to CSS lines). */
  --hero-floor-bg-image: url("/backgroundlines.png");
  --hero-floor-bg-size: cover;
  --hero-floor-bg-position: center bottom;
  --hero-floor-bg-repeat: no-repeat;
  /* Code block palette (light mode). */
  --code-bg: #292923;
  --code-bar-bg: #1c1c16;
  --code-border: #3a3a32;
  --code-text: #f1ede4;
  --code-title: rgba(241, 237, 228, 0.72);
  --code-copy: rgba(241, 237, 228, 0.9);
  --code-copy-hover-text: var(--code-text);
  --code-copy-border: rgba(241, 237, 228, 0.2);
  --code-copy-hover-bg: rgba(241, 237, 228, 0.16);
  --code-copy-hover-border: rgba(241, 237, 228, 0.5);
  --code-linenum: rgba(241, 237, 228, 0.45);
  --font-display: "Universal Sans Display 400", Arial, sans-serif;
}

[data-theme="dark"] {
  --color-bg-dark: var(--paper);
  --color-bg-light: var(--ink);
  --color-muted: #a5a39a;
  --color-line: #6a6a5e;
  --color-border: rgba(var(--paper-rgb), 0.2);
  --color-border-strong: rgba(var(--paper-rgb), 0.32);
  --color-border-hover: rgba(var(--paper-rgb), 0.55);
  /* UI hover tint (dark mode). */
  --ui-hover-bg: rgba(var(--paper-rgb), 0.08);
  /* Link styling (dark mode). */
  --link-color: #f88f76;
  --link-hover-color: #fa6147;
  /* Code block palette (dark mode). */
  --code-bg: #171610;
  --code-bar-bg: #12110c;
  --code-border: #2a2921;
  --code-text: #eae7dc;
  --code-title: rgba(234, 231, 220, 0.72);
  --code-copy: rgba(234, 231, 220, 0.9);
  --code-copy-border: rgba(234, 231, 220, 0.24);
  --code-copy-hover-bg: rgba(234, 231, 220, 0.14);
  --code-copy-hover-border: rgba(234, 231, 220, 0.5);
  --code-linenum: rgba(234, 231, 220, 0.45);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-light);
  color: var(--color-bg-dark);
  font-family: var(--font-display);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.highlight,
.highlight pre,
pre.chroma,
.chroma {
  background-color: var(--code-bg) !important;
}

.code-block {
  margin: 28px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  box-shadow: 0 18px 36px rgba(var(--ink-rgb), 0.16);
}

.code-block__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: var(--code-bar-bg);
  border-bottom: 1px solid var(--code-border);
}

.code-block__title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--code-title);
}

.code-block__copy {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--code-copy-border);
  background: transparent;
  color: var(--code-copy);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.code-block__copy:hover {
  background: var(--code-copy-hover-bg);
  border-color: var(--code-copy-hover-border);
  color: var(--code-copy-hover-text);
}

.code-block__copy[data-copied="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: #fddbd4;
}

.code-block__body {
  position: relative;
}

.code-block .highlight {
  margin: 0;
}

.code-block pre {
  margin: 0;
  padding: 18px 20px 22px;
  overflow-x: auto;
  color: var(--code-text);
  font-size: 14px;
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

.code-block code {
  font-family: inherit;
}

.code-block .lntable {
  width: 100%;
  border-spacing: 0;
}

.code-block .lntd {
  padding: 0;
}

.code-block .lnt {
  padding-right: 16px;
  color: var(--code-linenum);
}

.site-header {
  position: relative;
  width: 100%;
  z-index: 10;
}

.site-header.is-home {
  position: absolute;
  top: 0;
  left: 0;
}

.nav-contain {
  max-width: 1512px;
  margin: 0 auto;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 15px;
}

.logo-mark {
  width: 28px;
  height: 28px;
}

.nav-links {
  display: flex;
  gap: 40px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: center;
}

.nav-link:hover {
  opacity: 0.7;
}

.nav-menu {
  display: none;
  position: relative;
}

.nav-menu__toggle {
  list-style: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.nav-menu__toggle::-webkit-details-marker {
  display: none;
}

.nav-menu__toggle:hover {
  opacity: 0.7;
  border-color: var(--color-border);
  background: var(--ui-hover-bg);
}

.nav-menu__icon {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-menu__icon::before,
.nav-menu__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
  opacity: 0.9;
}

.nav-menu__icon::before {
  top: 0;
  box-shadow: 0 5px 0 currentColor;
}

.nav-menu__icon::after {
  bottom: 0;
}

.nav-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 180px;
  padding: 10px;
  border-radius: 14px;
  /* Keep the menu panel readable and consistent across themes. */
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(var(--paper-rgb), 0.18);
  box-shadow: 0 18px 40px rgba(var(--ink-rgb), 0.45);
  z-index: 20;
}

.nav-menu__link {
  display: block;
  padding: 12px 12px;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-menu__link:hover {
  background: rgba(var(--paper-rgb), 0.12);
}

.theme-toggle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle--placeholder {
  visibility: hidden;
  pointer-events: none;
}

.theme-toggle:hover {
  opacity: 0.7;
  border-color: var(--color-border);
  background: var(--ui-hover-bg);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.page-kind-home .nav-contain,
.page-kind-home .logo-link,
.page-kind-home .nav-links {
  color: var(--color-bg-light);
}

.page-kind-home .logo-mark {
  filter: brightness(0) invert(92%) sepia(8%) saturate(200%)
    hue-rotate(12deg) brightness(101%) contrast(95%);
}

[data-theme="dark"] .logo-mark {
  filter: brightness(0) invert(92%) sepia(8%) saturate(200%)
    hue-rotate(12deg) brightness(101%) contrast(95%);
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-light);
  position: relative;
  overflow: hidden;
}

.hero-top {
  background: var(--color-bg-dark);
  color: var(--color-bg-light);
  position: relative;
  flex: 1 1 auto;
}

.hero-content {
  height: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: clamp(120px, 12svh, 180px) 40px 72px;
  display: flex;
  align-items: center;
}

.hero-title {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  font-weight: 400;
  max-width: 640px;
}

.hero-floor {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-light);
  isolation: isolate;
  flex: 0 0 auto;
  height: clamp(240px, 35svh, 420px);
}

.hero-floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-floor-bg-image);
  background-size: var(--hero-floor-bg-size);
  background-position: var(--hero-floor-bg-position);
  background-repeat: var(--hero-floor-bg-repeat);
}

.hero-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(var(--hero-floor-rgb), 0.99) 1%,
      rgba(var(--hero-floor-rgb), 0.95) 3%,
      rgba(var(--hero-floor-rgb), 0.90) 5%,
      rgba(var(--hero-floor-rgb), 0.70) 28%,
      rgba(var(--hero-floor-rgb), 0.55) 42%,
      rgba(var(--hero-floor-rgb), 0.0) 100%
    ),
    radial-gradient(ellipse at center top,
      rgba(var(--hero-floor-rgb), 0.22) 0%,
      rgba(var(--hero-floor-rgb), 0) 70%
    );
}



.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 40px;
}

.page-title {
  margin: 0 0 24px 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
}

.page-intro {
  max-width: 720px;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1.4;
}

.blog-list {
  list-style: none;
  margin: 40px 0 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.blog-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.blog-title {
  font-size: 20px;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.blog-title:hover {
  opacity: 0.7;
}

.blog-meta {
  display: flex;
  gap: 16px;
  color: var(--color-muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-header {
  margin-bottom: 32px;
}

.post-title {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 400;
  margin: 0 0 12px 0;
}

.post-meta {
  display: flex;
  gap: 16px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
}

.post-content {
  font-size: 18px;
  line-height: 1.6;
  max-width: 900px;
}

.post-content a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-content a:hover,
.post-content a:focus-visible {
  color: var(--link-hover-color);
}

.post-content a:focus-visible {
  outline: 2px solid var(--link-hover-color);
  outline-offset: 3px;
}

.post-content h2 {
  font-weight: 400;
  margin-top: 32px;
}

.post-content table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  font-size: 16px;
}

.post-content thead th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-strong);
  vertical-align: bottom;
}

.post-content tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.post-content tbody tr:hover {
  background: var(--ui-hover-bg);
}

.not-found {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  background: var(--color-bg-light);
  color: var(--color-bg-dark);
}

.not-found__eyebrow {
  margin: 0 0 12px 0;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.not-found__title {
  margin: 0 0 16px 0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
}

.not-found__copy {
  margin: 0 0 28px 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-muted);
}

.not-found__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border-strong);
}

.not-found__link:hover {
  border-color: var(--color-border-hover);
}

@media (max-width: 900px) {
  .nav-contain {
    padding: 28px 24px;
  }

  .nav-right {
    gap: 18px;
  }

  .nav-links {
    gap: 20px;
    font-size: 13px;
  }

  .hero-content {
    padding: 112px 24px 64px;
  }

  .container {
    padding: 64px 24px;
  }

  .blog-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  .nav-right {
    gap: 12px;
  }

  .logo-link {
    font-size: 13px;
    letter-spacing: 0.2em;
  }

  .post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .post-content thead th {
    white-space: nowrap;
  }

  :root {
    /* Crisp floor lines on mobile (avoid moire from scaling the PNG). */
    --hero-floor-bg-image: repeating-linear-gradient(
      to bottom,
      rgba(var(--ink-rgb), 0.55) 0px,
      rgba(var(--ink-rgb), 0.55) 1px,
      rgba(var(--ink-rgb), 0.0) 1px,
      rgba(var(--ink-rgb), 0.0) 9px
    );
    --hero-floor-bg-size: auto;
    --hero-floor-bg-position: center top;
    --hero-floor-bg-repeat: repeat;
  }

  .hero-floor {
    height: clamp(160px, 30svh, 260px);
  }

  .hero-floor::after {
    /* Less "hard band" at the seam when the floor is short. */
    background:
      linear-gradient(to bottom,
        rgba(var(--hero-floor-rgb), 0.92) 0%,
        rgba(var(--hero-floor-rgb), 0.62) 18%,
        rgba(var(--hero-floor-rgb), 0.28) 42%,
        rgba(var(--hero-floor-rgb), 0.0) 78%
      ),
      radial-gradient(ellipse at center top,
        rgba(var(--hero-floor-rgb), 0.18) 0%,
        rgba(var(--hero-floor-rgb), 0) 70%
      );
  }
}