/* Blog UI kit — page-local styling that builds on top of ../../colors_and_type.css */

/* ============================================================
   ACCENT VARIABLES (local to the blog UI kit)
   - Single slate accent. No warm ember anywhere in this layer.
   - Re-derived from rain-* and ink-* tokens in colors_and_type.css.
   ============================================================ */
:root {
  --blog-accent:        var(--rain-500);
  --blog-accent-hover:  var(--rain-700);
  --blog-accent-faint:  color-mix(in oklab, var(--rain-500) 12%, transparent);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; }

body {
  background: var(--bg);
}

/* Page background patterns — picked via Tweaks panel. Fixed-attachment
   so they don't tile-jump as you scroll. Very low contrast on purpose. */

body.bg-dots {
  background-image: radial-gradient(
    circle,
    color-mix(in oklab, var(--ink-400) 32%, transparent) 0.85px,
    transparent 1.2px
  );
  background-size: 22px 22px;
  background-position: 11px 11px;
  background-attachment: fixed;
}

body.bg-rain {
  background-image: repeating-linear-gradient(
    100deg,
    transparent 0,
    transparent 16px,
    color-mix(in oklab, var(--ink-400) 16%, transparent) 16px,
    color-mix(in oklab, var(--ink-400) 16%, transparent) 17px,
    transparent 17px,
    transparent 64px
  );
  background-attachment: fixed;
}

body.bg-rings {
  /* Two ring clusters: a large one anchored just off top-right (8 rings,
     80–1020px), plus a small one in the lower-left at ~40–50% the scale
     (6 rings, 40–420px). Each ring is a 1px hard-stopped band. */
  background-image:
    /* lower-left small cluster */
    radial-gradient(
      circle at -60px calc(75% + 60px),
      transparent 39px,
      color-mix(in oklab, var(--ink-400) 22%, transparent) 40px,
      color-mix(in oklab, var(--ink-400) 22%, transparent) 41px,
      transparent 42px,
      transparent 79px,
      color-mix(in oklab, var(--ink-400) 18%, transparent) 80px,
      color-mix(in oklab, var(--ink-400) 18%, transparent) 81px,
      transparent 82px,
      transparent 139px,
      color-mix(in oklab, var(--ink-400) 15%, transparent) 140px,
      color-mix(in oklab, var(--ink-400) 15%, transparent) 141px,
      transparent 142px,
      transparent 219px,
      color-mix(in oklab, var(--ink-400) 12%, transparent) 220px,
      color-mix(in oklab, var(--ink-400) 12%, transparent) 221px,
      transparent 222px,
      transparent 309px,
      color-mix(in oklab, var(--ink-400) 9%, transparent) 310px,
      color-mix(in oklab, var(--ink-400) 9%, transparent) 311px,
      transparent 312px,
      transparent 419px,
      color-mix(in oklab, var(--ink-400) 6%, transparent) 420px,
      color-mix(in oklab, var(--ink-400) 6%, transparent) 421px,
      transparent 422px
    ),
    /* top-right large cluster */
    radial-gradient(
      circle at calc(100% + 80px) -80px,
      transparent 79px,
      color-mix(in oklab, var(--ink-400) 26%, transparent) 80px,
      color-mix(in oklab, var(--ink-400) 26%, transparent) 81px,
      transparent 82px,
      transparent 139px,
      color-mix(in oklab, var(--ink-400) 22%, transparent) 140px,
      color-mix(in oklab, var(--ink-400) 22%, transparent) 141px,
      transparent 142px,
      transparent 219px,
      color-mix(in oklab, var(--ink-400) 20%, transparent) 220px,
      color-mix(in oklab, var(--ink-400) 20%, transparent) 221px,
      transparent 222px,
      transparent 339px,
      color-mix(in oklab, var(--ink-400) 16%, transparent) 340px,
      color-mix(in oklab, var(--ink-400) 16%, transparent) 341px,
      transparent 342px,
      transparent 479px,
      color-mix(in oklab, var(--ink-400) 13%, transparent) 480px,
      color-mix(in oklab, var(--ink-400) 13%, transparent) 481px,
      transparent 482px,
      transparent 639px,
      color-mix(in oklab, var(--ink-400) 10%, transparent) 640px,
      color-mix(in oklab, var(--ink-400) 10%, transparent) 641px,
      transparent 642px,
      transparent 819px,
      color-mix(in oklab, var(--ink-400) 8%, transparent) 820px,
      color-mix(in oklab, var(--ink-400) 8%, transparent) 821px,
      transparent 822px,
      transparent 1019px,
      color-mix(in oklab, var(--ink-400) 6%, transparent) 1020px,
      color-mix(in oklab, var(--ink-400) 6%, transparent) 1021px,
      transparent 1022px
    );
  background-attachment: fixed;
}

/* Combined: rain streaks layered over the same concentric-ring set
   (top-right large + lower-left small). Rain on top so the streaks read
   clearly; rings sit quietly behind. */
body.bg-rain-rings {
  background-image:
    repeating-linear-gradient(
      100deg,
      transparent 0,
      transparent 16px,
      color-mix(in oklab, var(--ink-400) 14%, transparent) 16px,
      color-mix(in oklab, var(--ink-400) 14%, transparent) 17px,
      transparent 17px,
      transparent 64px
    ),
    /* lower-left small cluster */
    radial-gradient(
      circle at -60px calc(75% + 60px),
      transparent 39px,
      color-mix(in oklab, var(--ink-400) 19%, transparent) 40px,
      color-mix(in oklab, var(--ink-400) 19%, transparent) 41px,
      transparent 42px,
      transparent 79px,
      color-mix(in oklab, var(--ink-400) 16%, transparent) 80px,
      color-mix(in oklab, var(--ink-400) 16%, transparent) 81px,
      transparent 82px,
      transparent 139px,
      color-mix(in oklab, var(--ink-400) 13%, transparent) 140px,
      color-mix(in oklab, var(--ink-400) 13%, transparent) 141px,
      transparent 142px,
      transparent 219px,
      color-mix(in oklab, var(--ink-400) 10%, transparent) 220px,
      color-mix(in oklab, var(--ink-400) 10%, transparent) 221px,
      transparent 222px,
      transparent 309px,
      color-mix(in oklab, var(--ink-400) 8%, transparent) 310px,
      color-mix(in oklab, var(--ink-400) 8%, transparent) 311px,
      transparent 312px,
      transparent 419px,
      color-mix(in oklab, var(--ink-400) 6%, transparent) 420px,
      color-mix(in oklab, var(--ink-400) 6%, transparent) 421px,
      transparent 422px
    ),
    /* top-right large cluster */
    radial-gradient(
      circle at calc(100% + 80px) -80px,
      transparent 79px,
      color-mix(in oklab, var(--ink-400) 22%, transparent) 80px,
      color-mix(in oklab, var(--ink-400) 22%, transparent) 81px,
      transparent 82px,
      transparent 139px,
      color-mix(in oklab, var(--ink-400) 19%, transparent) 140px,
      color-mix(in oklab, var(--ink-400) 19%, transparent) 141px,
      transparent 142px,
      transparent 219px,
      color-mix(in oklab, var(--ink-400) 17%, transparent) 220px,
      color-mix(in oklab, var(--ink-400) 17%, transparent) 221px,
      transparent 222px,
      transparent 339px,
      color-mix(in oklab, var(--ink-400) 14%, transparent) 340px,
      color-mix(in oklab, var(--ink-400) 14%, transparent) 341px,
      transparent 342px,
      transparent 479px,
      color-mix(in oklab, var(--ink-400) 11%, transparent) 480px,
      color-mix(in oklab, var(--ink-400) 11%, transparent) 481px,
      transparent 482px,
      transparent 639px,
      color-mix(in oklab, var(--ink-400) 9%, transparent) 640px,
      color-mix(in oklab, var(--ink-400) 9%, transparent) 641px,
      transparent 642px,
      transparent 819px,
      color-mix(in oklab, var(--ink-400) 7%, transparent) 820px,
      color-mix(in oklab, var(--ink-400) 7%, transparent) 821px,
      transparent 822px,
      transparent 1019px,
      color-mix(in oklab, var(--ink-400) 5%, transparent) 1020px,
      color-mix(in oklab, var(--ink-400) 5%, transparent) 1021px,
      transparent 1022px
    );
  background-attachment: fixed;
}

.app {
  /* html, body height 100% chain → 정확히 viewport 와 동일 (sub-pixel 부동 없음).
     100dvh 는 Chrome 에서 945.5 같은 fractional 로 잡혀 0.5px overflow + ghost
     scrollbar 를 만든 적이 있어 % 로 통일. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Top header (not sticky in archive mode) --- */
.topnav {
  position: relative;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--paper-300);
}
.topnav .inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 24px 22px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
}
.topnav .photo {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--paper-200);
  border: 1px solid var(--paper-400);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  user-select: none;
}
.topnav .brand-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topnav .brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.topnav .brand img { height: 26px; display: block; }
.topnav .brand .wordmark {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  line-height: 1;
}
.topnav .flourish {
  display: block;
  height: 8px;
  width: 92px;
  color: var(--blog-accent);
  opacity: 0.55;
}
.topnav .flourish svg { display: block; width: 100%; height: 100%; }
.topnav nav { display: flex; gap: 0; align-items: center; }
.topnav nav a {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.topnav nav a:hover { color: var(--ink-900); background: var(--paper-200); }
.topnav nav a.active { color: var(--ink-900); }
.topnav nav a.active::after {
  content: "";
  display: block;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--blog-accent);
  margin: 2px auto 0;
}
.topnav nav .sep {
  color: var(--paper-400);
  font-size: 12px;
  user-select: none;
}

/* --- Content protection: a softly-blurred, slightly-elevated band
   that sits behind hero / archive / article so prose reads calmly
   against the busy bg pattern. Feathered on the horizontal edges. --- */
.hero, .section, .article {
  position: relative;
  isolation: isolate;
}
.hero::after,
.section::before,
.article::before {
  content: "";
  position: absolute;
  inset: 0 -32px;
  z-index: -1;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px) saturate(0.85);
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
  border-radius: 14px;
  pointer-events: none;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}
/* The hero already has its own ::after for the original ember wash slot;
   this re-assigns it to the protection layer above. Hero protection is
   slimmer than section / article — it only needs to feather the intro. */
.hero::after { inset: 6px -32px; border-radius: 10px; }

/* --- Hero (compact, archive-mode) --- */
.hero {
  position: relative;
  padding: 36px 0 18px;
  overflow: visible;
}
.hero .inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.hero p.intro {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  font-weight: 400;
  max-width: 64ch;
  margin: 0;
}
.hero .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero .meta .dot { display: inline-block; width: 3px; height: 3px; border-radius: 999px; background: var(--ink-400); }

/* --- Sections --- */
.section {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 18px;
  padding-bottom: 0;
  border-bottom: 0;
}
.section-header h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  margin: 0;
}
.section-header .right {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
}
.section-header .right a {
  color: var(--blog-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--blog-accent) 35%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.section-header .right a:hover { color: var(--blog-accent-hover); text-decoration-color: currentColor; }

/* --- Archive list (year-grouped, dense, notebook-index feel) --- */
.archive { margin-top: 8px; }
.archive .year {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  padding: 8px 0;
  border-top: 1px solid var(--paper-300);
  margin-top: 18px;
}
.archive .year:first-child { margin-top: 0; }
.archive .year-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.06em;
  padding-top: 14px;
  position: sticky;
  top: 0;
  align-self: start;
}
.archive ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.archive li {
  /* Extend the dashed separator (and hover background) left into the year-label
     column so the row visually starts at the year digit, while inner padding
     keeps content aligned with the entries grid. */
  margin-left: -80px;
  padding-left: 80px;
  border-bottom: 1px dashed var(--paper-300);
  border-radius: 4px;
  transition: background var(--dur-fast) var(--ease-out);
}
.archive li:last-child { border-bottom: 0; }
.archive li:hover { background: var(--paper-200); }
.archive li > a {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.archive li:hover .archive__title { color: var(--blog-accent-hover); }
.archive__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.archive__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
}
.archive__title .ko { font-weight: 500; }
.archive__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.archive__meta .sep { color: var(--ink-400); margin: 0 6px; }
.archive__meta .status-wip   { color: var(--ink-700); font-weight: 500; }
.archive__meta .status-draft { color: var(--ink-500); }
.archive__meta .status-essay { color: var(--blog-accent-hover); font-style: italic; }
.archive__meta .status-live  { color: var(--ink-400); }
.post-card {
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: 6px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: border-color var(--dur-medium) var(--ease-out),
              transform var(--dur-medium) var(--ease-out),
              box-shadow var(--dur-medium) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  border-color: var(--paper-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.post-card + .post-card { margin-top: 14px; }
.post-card .meta-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
}
.post-card .meta-row .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-400); }
.post-card h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.post-card p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  text-wrap: pretty;
}
.post-card .footer { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 10px; border-radius: 3px;
  background: var(--paper-200); color: var(--ink-700);
  border: 1px solid var(--paper-300);
  line-height: 1.55;
}
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 8px 2px 7px; border-radius: 3px; line-height: 1.4;
  background: var(--paper-200);
  border: 1px solid var(--paper-300);
  color: var(--ink-700);
}
.status::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--ink-500);
}

.tags-row .tag { font-size: 13px; padding: 2px 10px; }

/* --- Glint: slate droplet ornament with a translucent white "!".
   Color comes from currentColor (set by .glint), so it tracks the
   accent and never hardcodes a warm hue. --- */
.glint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  position: relative;
  color: var(--blog-accent);
  transition: transform var(--dur-medium) var(--ease-out), filter var(--dur-medium) var(--ease-out);
}
.post-card:hover .glint {
  transform: translateY(-0.5px) rotate(-2deg);
  filter: brightness(1.05);
}
.glint svg { display: block; }
.glint .drop    { fill: currentColor; opacity: 0.82; }
.glint .drop-hi { fill: var(--paper-50); opacity: 0.6; }
.glint .halo    { opacity: 0.85; mix-blend-mode: multiply; }
.glint .mark    { fill: var(--paper-50); opacity: 0.85; }
.status.wip::before   { background: var(--blog-accent); }
.status.draft::before { background: var(--ink-400); }
.status.live::before  { background: var(--moss-500); }
.status.essay::before { background: var(--blog-accent-hover); }

/* --- Article --- */
.article {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}
.article .back {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--blog-accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 22px;
  cursor: pointer;
}
.article .back:hover { color: var(--blog-accent-hover); }
.article h1 {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.article .meta-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
  margin-bottom: 32px;
}
.article .meta-row .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-400); }
.prose {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-900);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-top: 48px;
}
.prose p { text-wrap: pretty; }
.prose code {
  font-family: var(--font-mono);
  background: color-mix(in oklab, var(--blog-accent) 10%, var(--paper-200));
  color: var(--blog-accent-hover);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  border: 1px solid color-mix(in oklab, var(--blog-accent) 18%, transparent);
}
.prose pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 16px 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
}
.prose pre code { background: none; color: inherit; padding: 0; border: 0; font-size: inherit; }
.prose blockquote {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-800);
  border-left: 2px solid var(--blog-accent);
  padding-left: 20px;
  margin: 28px 0;
}
.prose hr {
  border: 0; height: 16px;
  background-image: radial-gradient(circle, var(--paper-400) 1px, transparent 1.4px);
  background-size: 14px 16px;
  background-position: center;
  background-repeat: repeat-x;
  margin: 40px 0;
  opacity: 0.45;
}
.callout {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  margin: 24px 0;
}
.callout .icon {
  width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  margin-top: 1px;
}
/* Callouts — cool slate variant only; warm tip retired with ember removal. */
.callout.note { background: var(--paper-200); border-color: var(--paper-300); color: var(--ink-800); }
.callout.note .icon { background: var(--blog-accent); color: var(--paper-50); }
.callout.tip  { background: var(--paper-200); border-color: var(--paper-300); color: var(--ink-800); }
.callout.tip  .icon { background: var(--ink-800); color: var(--paper-50); }
.callout b { color: var(--ink-900); }

/* GitHub-flavored alerts — Markdig native (UseAdvancedExtensions, 0.37+) emits:
     <div class="markdown-alert markdown-alert-{type}">
       <p class="markdown-alert-title"><svg/>Note</p>
       <p>body…</p>
     </div>
   Left accent border + title color define each kind; SVG octicon ships inline
   from Markdig so we only style its fill via `currentColor` cascade. */
.markdown-alert {
  margin: 22px 0;
  padding: 12px 16px;
  border: 1px solid var(--paper-300);
  border-left: 4px solid var(--paper-400);
  border-radius: 6px;
  background: var(--paper-200);
  color: var(--ink-800);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
}
.markdown-alert > p { margin: 0; }
.markdown-alert > p + p { margin-top: 8px; }
.markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
}
.markdown-alert-title svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

.markdown-alert-note      { border-left-color: var(--rain-500); }
.markdown-alert-note .markdown-alert-title      { color: var(--rain-700); }

.markdown-alert-tip       { border-left-color: var(--moss-500); }
.markdown-alert-tip .markdown-alert-title       { color: var(--moss-700); }

.markdown-alert-important { border-left-color: var(--rain-700); }
.markdown-alert-important .markdown-alert-title { color: var(--rain-900); }

.markdown-alert-warning   { border-left-color: var(--honey-500); }
.markdown-alert-warning .markdown-alert-title   { color: var(--honey-700); }

.markdown-alert-caution   { border-left-color: var(--honey-700); }
.markdown-alert-caution .markdown-alert-title   { color: var(--honey-700); }

/* --- Links page --- */
.link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--paper-300);
  cursor: pointer;
}
.link-row:hover .link-row__title { color: var(--blog-accent-hover); }
.link-row__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-row__note {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-600);
  margin: 0;
  line-height: 1.55;
  text-wrap: pretty;
}
.link-row__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  white-space: nowrap;
  align-self: center;
}

/* --- Footer --- */
.footer {
  margin-top: auto;
  padding: 40px 24px 56px;
  border-top: 0;
  position: relative;
}
.footer::before {
  content: "";
  display: block;
  height: 16px;
  margin-bottom: 24px;
  background-image: radial-gradient(circle, var(--paper-400) 1px, transparent 1.4px);
  background-size: 14px 16px;
  background-position: center;
  background-repeat: repeat-x;
  opacity: 0.45;
}
.footer .inner {
  max-width: 880px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.footer .left { display: flex; flex-direction: column; gap: 4px; }
.footer .left img { height: 18px; }
.footer .copyright { font-family: var(--font-sans); font-size: 12px; color: var(--ink-500); }
.footer .right { display: flex; gap: 16px; }
.footer .right a {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink-600); text-decoration: none;
  cursor: pointer;
}
.footer .right a:hover { color: var(--blog-accent-hover); }

/* --- About --- */
.about { max-width: 600px; }
.about p { font-size: 17px; line-height: 1.7; color: var(--ink-800); margin: 0 0 18px; }
.about .signature {
  font-family: var(--font-sans); font-weight: 500;
  color: var(--ink-700);
}

/* ============================================================
   Responsive — two breakpoints.
   960px: viewport approaches body max-width (880); widen the side
          padding so columns stop kissing the edges.
   640px: mobile. Topnav stacks; archive grid collapses date col.
   ============================================================ */
@media (max-width: 960px) {
  .topnav .inner,
  .hero .inner,
  .section,
  .article,
  .footer {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 640px) {
  .topnav .inner {
    grid-template-columns: 1fr !important;
    padding: 22px 18px 16px;
    gap: 14px;
  }
  .topnav .photo {
    width: 40px; height: 40px;
  }
  .topnav nav {
    flex-wrap: wrap;
    gap: 2px;
    margin-left: -10px;
  }
  .topnav nav a { padding: 6px 10px; }

  .section { padding: 24px 18px 64px; }
  .article { padding: 36px 18px 64px; }
  .hero .inner { padding: 0 18px; }

  .archive .year {
    grid-template-columns: 1fr;
  }
  .archive .year-label {
    padding-top: 0;
    padding-bottom: 6px;
    position: static;
  }
  .archive li {
    /* Year-label stacks above the entries on mobile, so the desktop
       negative-margin trick would push li off the left edge. Reset. */
    margin-left: 0;
    padding-left: 0;
  }
  .archive li > a {
    grid-template-columns: 56px 1fr;
    gap: 12px;
    row-gap: 4px;
  }
  .archive__meta {
    grid-column: 1 / -1;
    padding-left: 68px;
    font-size: 10.5px;
  }

  /* Wider protection band on mobile so the patterns don't crowd text. */
  .hero::after,
  .section::before,
  .article::before {
    inset: 0 -8px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--bg) 80%, transparent);
  }

  .footer .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}