/* src/styles/main.css */
:root {
  color-scheme: light dark;
  --bg: #fff;
  --bg-alt: #f1ece3;
  --bg-glow: #ffffff;
  --bg-glow-soft: rgba(255, 255, 255, 0.6);
  --text: #0d0d0d;
  --muted: #4b4b4b;
  --accent: #0b4f6c;
  --accent-strong: #062e3f;
  --accent-soft: #d6e6ee;
  --border: #d7d1c6;
  --shadow: 0 12px 30px rgba(11, 10, 8, 0.12);
  --surface: #fffdfa;
  --surface-strong: #efe9df;
  --selection-text: #fff;
  --code-bg: #11100e;
  --code-text: #f8f5ef;
  --code-comment: #a3998b;
  --code-keyword: #f6ae2d;
  --code-string: #44bba4;
  --code-number: #f19c79;
  --code-title: #f26457;
  --code-built-in: #5aa9e6;
  --code-variable: #f9c784;
  --font-serif:
    "Source Serif VF","Source Serif VF-Fallback",Georgia,serif;
  --font-sans:
    -apple-system,BlinkMacSystemFont,"Segou UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe U Symbol";
  --font-mono:
    ui-monospace,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New",monospace;
  --font-serif-heading:
    "Source Serif VF","Source Serif VF-Fallback-Bold",Georgia,serif;
  --font-w-bold: 800;
  --page-pad: clamp(20px, 6vw, 72px);
  --content-width: 86ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1113;
    --bg-alt: #14181b;
    --bg-glow: rgba(30, 44, 54, 0.9);
    --bg-glow-soft: rgba(22, 34, 42, 0.65);
    --text: #f2eee6;
    --muted: #b3aba0;
    --accent: #7dc2e0;
    --accent-strong: #bfe7ff;
    --accent-soft: #1c2b35;
    --border: #2f353a;
    --shadow: 0 12px 30px rgba(2, 6, 8, 0.6);
    --surface: #14171a;
    --surface-strong: #1c1f23;
    --selection-text: #0b0f14;
    --code-bg: #0a0c0f;
    --code-text: #f8f5ef;
    --code-comment: #8f8b83;
    --code-keyword: #f6c35b;
    --code-string: #58d1b4;
    --code-number: #f3a982;
    --code-title: #ff8b7e;
    --code-built-in: #7ab7f2;
    --code-variable: #f4cf8d;
  }
  ::selection {
    color: var(--selection-text);
  }
}
:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}
:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}
:root {
  --grid-max-width: 77.50rem;
  --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem));
  --grid-columns: 12;
}
.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}
.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}
@font-face {
  font-family: "Source Serif VF";
  font-weight: 200 900;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("./SourceSerif4Variable-Roman.ttf-HQKAS6CU.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif VF";
  font-weight: 200 900;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
  src: url("./SourceSerif4Variable-Italic.ttf-UB3ONQTY.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif VF-Fallback";
  size-adjust: 105.5%;
  src: local("Georgia");
}
@font-face {
  font-family: "Source Serif VF-Fallback-Bold";
  size-adjust: 97.5%;
  src: local("Georgia");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  background:
    radial-gradient(
      1200px 600px at 8% -10%,
      var(--bg-glow) 0%,
      var(--bg-glow-soft) 45%,
      transparent 65%),
    linear-gradient(
      120deg,
      var(--bg) 0%,
      var(--bg-alt) 100%);
  position: relative;
  isolation: isolate;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
::selection {
  background: var(--accent);
  color: var(--selection-text);
}
.section-header {
  font-size: var(--step-1);
}
.site-header,
.site-footer,
main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  position: relative;
  z-index: 1;
}
.site-header {
  padding-top: var(--page-pad);
  padding-bottom: var(--space-s-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs-s);
  border-bottom: 1px solid var(--border);
}
.site-header__title {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: var(--step-0);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.site-header__title:hover,
.site-header__title:focus-visible {
  background-color: transparent;
  color: var(--text);
}
.site-header__logo {
  display: block;
  height: 34px;
  width: auto;
  transform: scale(1);
  transform-origin: center;
  transition: transform 180ms ease;
  will-change: transform;
}
.site-header__title:hover .site-header__logo,
.site-header__title:focus-visible .site-header__logo {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__logo {
    transition: none;
  }
}
@media (prefers-color-scheme: dark) {
  .site-header__logo {
    filter: invert(1);
  }
}
.site-nav {
  display: flex;
  gap: var(--space-s-m);
  font-family: var(--font-sans);
  font-size: var(--step-0);
}
.site-nav__link {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: calc(var(--space-3xs) * 0.4);
  color: var(--text);
}
.site-nav__link:hover {
  background-color: transparent;
  border-color: currentColor;
}
main {
  padding-top: var(--space-l);
  padding-bottom: var(--space-xl);
  flex: 1;
}
.site-footer {
  padding-top: var(--space-s-m);
  padding-bottom: var(--page-pad);
  border-top: 1px solid var(--border);
}
.site-footer__text {
  margin: 0;
  font-size: var(--step--2);
  font-family: var(--font-sans);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  line-height: 1.15;
  margin: var(--space-s) 0 var(--space-2xs);
}
.entry-article :is(h1, h2, h3, h4) {
  font-family: var(--font-serif-heading);
  font-weight: 800;
}
h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-1);
}
p {
  margin: 0 0 var(--space-s);
}
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 160ms ease, background-color 160ms ease;
}
a:hover {
  color: var(--accent-strong);
  background-color: var(--accent-soft);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
section + section {
  margin-top: var(--space-l-xl);
}
.entry-index {
  display: grid;
  gap: var(--space-s-m);
}
.entry-index > h1 {
  margin-bottom: 0;
}
.entry-index .entry-list {
  margin-top: 0;
}
.entry-list {
  list-style: none;
  padding: 0;
  margin: var(--space-s-m) 0 0;
  display: grid;
}
.entry-item {
  display: grid;
  grid-template-columns: minmax(8ch, 10ch) 1fr;
  grid-template-areas: "date title" "date excerpt";
  column-gap: var(--space-s);
  row-gap: calc(var(--space-3xs) * 0.8);
  align-items: baseline;
  animation: rise 520ms ease-out both;
  margin-bottom: var(--space-3xs);
}
.entry-item:nth-child(2) {
  animation-delay: 60ms;
}
.entry-item:nth-child(3) {
  animation-delay: 120ms;
}
.entry-item:nth-child(4) {
  animation-delay: 180ms;
}
.entry-item:nth-child(5) {
  animation-delay: 240ms;
}
.entry-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.entry-link {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  text-decoration: none;
  color: var(--text);
}
.entry-title-row {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: baseline;
  gap: var(--space-2xs);
}
.entry-date-col {
  grid-area: date;
  align-self: baseline;
}
.entry-excerpt {
  grid-area: excerpt;
  color: var(--muted);
  p {
    margin: 0;
  }
}
article ul,
article ol {
  margin: 0 0 var(--space-s);
  padding-left: var(--space-s-m);
}
article li {
  margin-bottom: var(--space-3xs);
}
.entry-label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: calc(var(--space-3xs) * 0.6);
}
.entry-date,
time {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.entry-date--empty {
  visibility: hidden;
}
.entry-subtext {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
article img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
blockquote {
  margin: var(--space-s-m) 0;
  padding: var(--space-2xs) var(--space-s);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text);
}
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-m-l) 0;
}
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-strong);
  padding: calc(var(--space-3xs) / 2) var(--space-3xs);
  border-radius: 4px;
}
pre,
pre.hljs,
code.hljs {
  background: var(--code-bg);
  color: var(--code-text);
  padding: var(--space-s);
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: var(--shadow);
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.excerpt-text {
  font-size: var(--step--1);
}
.hljs-comment,
.hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {
  color: var(--code-keyword);
}
.hljs-string,
.hljs-doctag {
  color: var(--code-string);
}
.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: var(--code-number);
}
.hljs-title,
.hljs-section,
.hljs-function,
.hljs-attr {
  color: var(--code-title);
}
.hljs-built_in,
.hljs-type,
.hljs-attribute {
  color: var(--code-built-in);
}
.hljs-variable,
.hljs-template-variable,
.hljs-params {
  color: var(--code-variable);
}
.hljs-meta {
  color: var(--code-comment);
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-s-m) 0;
  font-size: var(--step--1);
}
th,
td {
  text-align: left;
  padding: var(--space-3xs-2xs) var(--space-2xs-xs);
  border-bottom: 1px solid var(--border);
}
main > * {
  animation: fadeIn 520ms ease-out both;
}
main > *:nth-child(2) {
  animation-delay: 80ms;
}
main > *:nth-child(3) {
  animation-delay: 140ms;
}
main > *:nth-child(4) {
  animation-delay: 200ms;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 720px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .site-nav {
    gap: var(--space-xs-s);
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .entry-item {
    grid-template-columns: 1fr;
    grid-template-areas: "date" "title" "excerpt";
  }
  .entry-date-col {
    text-align: left;
  }
}
@media (min-width: 721px) {
  .entry-index {
    grid-template-columns: minmax(8ch, 10ch) 1fr;
    column-gap: var(--space-s);
  }
  .entry-index > h1 {
    grid-column: 2;
  }
  .entry-index .entry-list {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}