/* ==========================================================================
   Blog, /about, /resources and the 404 page
   Loaded after style.css on generated pages; reuses its tokens, glass nav,
   footer, hero light, breadcrumb and buttons. Reading happens on a warm paper
   surface (the light-surface treatment of the Education section, so the nav
   tints itself over it), with code on dark noir panels.
   ========================================================================== */

:root {
  --paper-ink: var(--noir);
  --paper-muted: var(--ink-dark-muted);        /* 7:1 on paper, 6:1 on cotton */
  --paper-link: var(--cherry);                 /* 10:1 on paper */
  --paper-accent: var(--red);                  /* 5.9:1 on paper, 6.2:1 on white */
  --paper-line: rgb(27 23 23 / 0.12);
  --paper-line-strong: rgb(27 23 23 / 0.26);
  --paper-radius: clamp(28px, 4vw, 64px);
  --card-radius: 24px;
  --measure: 44rem;
  --text-prose: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17px → 19px */

  /* Code panels: every token colour is at least 4.5:1 on --noir. */
  --code-bg: var(--noir);
  --code-ink: var(--cotton);
  --code-muted: #A39A92;
  --code-keyword: #FF7A8C;
  --code-string: #B9D99A;
  --code-number: #F5B971;
  --code-title: #FFD6A5;
  --code-type: #9CC8E8;
  --code-attr: #E3B8FF;
}

/* --------------------------------------------------------------------------
   Hero (dark), shared by every generated page
   -------------------------------------------------------------------------- */
/* The backlight is positioned, so the copy needs its own layer above it. */
.blog-hero-inner {
  position: relative;
  z-index: 1;
}

.blog-hero-copy {
  max-width: 54rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}

.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgb(197 0 34 / 0.9);
}

.blog-eyebrow a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgb(237 235 221 / 0.4);
  text-underline-offset: 0.3em;
}

.blog-eyebrow a:hover {
  text-decoration-color: currentColor;
}

.blog-title {
  margin-top: 1rem;
  color: var(--white);
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.post-hero .blog-title {
  max-width: 18em;
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 4rem);
  line-height: 1.04;
}

.blog-lead {
  margin-top: 1.5rem;
  color: var(--ink);
}

.blog-count,
.post-byline {
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.blog-count {
  font-family: var(--font-mono);
  font-size: var(--text-data);
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.post-byline span + span::before {
  content: "·";
  margin-right: 0.75rem;
  opacity: 0.7;
}

.post-byline a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Paper surface
   -------------------------------------------------------------------------- */
.paper {
  position: relative;
  margin: 0 clamp(0.5rem, 1vw, 1rem) clamp(0.5rem, 1vw, 1rem);
  border-radius: var(--paper-radius);
  background: var(--paper);
  color: var(--paper-ink);
  color-scheme: light;
}

.paper--top {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.paper--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.paper [hidden] {
  display: none !important;
}

/* Grid tracks never grow to fit unbreakable content (a long code line, a URL);
   that content scrolls or wraps inside its own box instead. */
.paper-inner,
.blog-browse,
.blog-tools,
.blog-search,
.blog-tags,
.post-main,
.author-copy {
  grid-template-columns: minmax(0, 1fr);
}

.paper-inner {
  display: grid;
  gap: clamp(3rem, 2rem + 3vw, 5.5rem);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}

.paper--bottom .paper-inner {
  padding-top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.paper h2,
.paper h3 {
  color: var(--paper-ink);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.paper .link {
  color: var(--paper-link);
}

.blog-section-title {
  margin-bottom: 1.5rem;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper-link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.draft-label {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: #FFB938;
  color: var(--noir);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.draft-banner {
  position: relative;
  z-index: 1;
  padding: 6rem var(--gutter) 1rem;
  background: #FFB938;
  color: var(--noir);
  font-size: var(--text-small);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Search and filters (shown only with JavaScript: the .js class is set in
   <head> before first paint, so there is no layout shift)
   -------------------------------------------------------------------------- */
.blog-tools {
  display: none;
  gap: 1.25rem;
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  border: 1px solid var(--paper-line);
  border-radius: var(--card-radius);
  background: var(--white);
}

.js .blog-tools {
  display: grid;
}

.blog-search {
  display: grid;
  gap: 0.625rem;
}

.blog-search-label {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.blog-search-row {
  display: flex;
  gap: 0.625rem;
}

.blog-search-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 1px solid var(--paper-line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 1rem;
}

.blog-search-input::placeholder {
  color: var(--paper-muted);
  opacity: 1;
}

.blog-search-input:hover {
  border-color: var(--paper-ink);
}

.blog-search .btn {
  min-height: 3rem;
}

.blog-tags {
  display: grid;
  gap: 0.625rem;
}

.blog-tags-label {
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-button {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--paper-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.tag-button:hover {
  border-color: var(--paper-ink);
}

.tag-button[aria-pressed="true"] {
  border-color: var(--noir);
  background: var(--noir);
  color: var(--white);
}

.blog-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.blog-status {
  color: var(--paper-muted);
  font-size: var(--text-small);
}

.blog-clear {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: rgb(27 23 23 / 0.07);
  color: var(--paper-ink);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}

.blog-clear:hover {
  background: rgb(27 23 23 / 0.12);
}

.blog-browse {
  display: grid;
  gap: clamp(3rem, 2rem + 3vw, 5rem);
}

.blog-empty {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.5rem;
  border: 1px dashed var(--paper-line-strong);
  border-radius: var(--card-radius);
  color: var(--paper-muted);
  text-align: center;
}

.blog-empty-title {
  color: var(--paper-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.blog-empty-state {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
  color: var(--paper-muted);
  font-size: var(--text-lead);
}

.blog-empty-state .blog-section-title {
  margin-bottom: 0;
}

.blog-empty-links {
  display: grid;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}

.post-grid > li {
  display: flex;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  border: 1px solid var(--paper-line);
  border-radius: var(--card-radius);
  background: var(--white);
  transition: border-color 0.2s, transform 0.35s var(--ease-out);
}

@media (hover: hover) {
  .post-card:hover {
    border-color: var(--paper-line-strong);
    transform: translateY(-2px);
  }
}

.post-card-category {
  color: var(--paper-accent);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paper .post-card-title {
  font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the whole card, so the card has a single link. */
.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.post-card-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.post-card-desc {
  color: var(--paper-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-top: auto;
  padding-top: 0.25rem;
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
}

.post-card-tags,
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.post-card-tags li,
.post-tags li {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: rgb(27 23 23 / 0.06);
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
}

.post-card--featured {
  gap: 1rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-color: transparent;
  background:
    radial-gradient(60% 90% at 100% 0%, rgb(197 0 34 / 0.35), rgb(197 0 34 / 0) 70%),
    var(--noir);
  color: var(--cotton);
}

.paper .post-card--featured .post-card-title {
  max-width: 22em;
  color: var(--white);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.post-card--featured .post-card-category {
  color: var(--code-keyword);
}

.post-card--featured .post-card-desc {
  max-width: 40em;
  color: var(--ink-muted);
  font-size: var(--text-lead);
}

.post-card--featured .post-card-meta {
  color: var(--ink-muted);
}

.post-card--featured .post-card-tags li {
  background: rgb(255 255 255 / 0.1);
  color: var(--ink-muted);
}

.paper .post-card--featured :focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------------------------------
   Category navigation and pagination
   -------------------------------------------------------------------------- */
.category-nav ul,
.pagination ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-nav a,
.pagination a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1px solid var(--paper-line-strong);
  border-radius: 999px;
  color: var(--paper-ink);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.category-nav a:hover,
.pagination a:hover {
  border-color: var(--paper-ink);
}

.category-nav a[aria-current="page"],
.pagination a[aria-current="page"] {
  border-color: var(--noir);
  background: var(--noir);
  color: var(--white);
}

.category-nav .count {
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  font-weight: 500;
}

.category-nav a[aria-current="page"] .count {
  color: rgb(255 255 255 / 0.75);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.pagination a {
  min-width: 44px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Author box
   -------------------------------------------------------------------------- */
.author-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--card-radius);
  background: var(--cotton);
}

.author-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
}

.author-copy {
  display: grid;
  gap: 0.625rem;
}

.author-label,
.author-projects-label {
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper .author-name {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.author-name a {
  color: inherit;
  text-decoration: none;
}

.author-name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.author-bio {
  max-width: 60ch;
  color: var(--paper-muted);
}

.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.author-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper-link);
  font-size: var(--text-small);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.author-projects {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-line);
  color: var(--paper-muted);
  font-size: var(--text-small);
}

.author-projects ul {
  display: grid;
  gap: 0.375rem;
}

/* --------------------------------------------------------------------------
   Article page
   -------------------------------------------------------------------------- */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure));
  justify-content: center;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}

.post-layout.has-toc {
  grid-template-columns: minmax(12rem, 15rem) minmax(0, var(--measure));
  justify-content: start;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}

.post-main {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  min-width: 0;
}

.post-toc {
  position: sticky;
  top: calc(var(--nav-offset) + 1rem);
  align-self: start;
  max-height: calc(100vh - var(--nav-offset) - 2rem);
  overflow-y: auto;
}

.paper .post-toc-title {
  margin-bottom: 1rem;
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-toc ol {
  display: grid;
  gap: 0.125rem;
  padding-left: 1rem;
  border-left: 1px solid var(--paper-line-strong);
  font-size: var(--text-small);
}

.post-toc ol ol {
  margin: 0.125rem 0 0.25rem;
  border-left: 0;
  padding-left: 0.875rem;
  font-size: 0.875rem;
}

.post-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-block: 0.25rem;
  color: var(--paper-muted);
  line-height: 1.35;
  text-decoration: none;
}

.post-toc a:hover {
  color: var(--paper-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-cover img {
  width: 100%;
  border-radius: var(--card-radius);
}

/* Long-form typography */
.prose {
  color: var(--paper-ink);
  font-size: var(--text-prose);
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.25em;
}

.paper .prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.15;
}

.paper .prose h3 {
  margin-top: 1.9em;
  font-size: 1.25em;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.prose h4 {
  margin-top: 1.75em;
  font-size: 1em;
  font-weight: 700;
}

.prose > :first-child,
.paper .prose > :first-child {
  margin-top: 0;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.75em;
}

.prose h2,
.prose h3,
.prose h4,
.post-references h2 {
  scroll-margin-top: var(--nav-offset);
}

.prose a {
  color: var(--paper-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose strong {
  font-weight: 700;
}

.prose em {
  font-style: italic;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li,
.prose li > ul,
.prose li > ol {
  margin-top: 0.5em;
}

.prose li::marker {
  color: var(--paper-accent);
}

.prose blockquote {
  padding-left: 1.25em;
  border-left: 3px solid var(--paper-accent);
  color: var(--paper-muted);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--paper-line-strong);
}

.prose :not(pre) > code {
  padding: 0.12em 0.38em;
  border-radius: 6px;
  background: rgb(27 23 23 / 0.07);
  font-family: var(--font-mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.prose .figure {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.prose .figure img {
  border-radius: 16px;
}

.prose figcaption {
  max-width: 36rem;
  color: var(--paper-muted);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: center;
}

/* Code */
.code {
  overflow: hidden;
  border-radius: 18px;
  background: var(--code-bg);
  color: var(--code-ink);
}

.prose .code {
  margin-top: 1.5em;
  margin-bottom: 0.25em;
}

.code .code-lang {
  max-width: none;
  padding: 0.875rem 1.25rem 0;
  text-align: left;
  color: rgb(237 235 221 / 0.72);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code pre {
  margin: 0;
  padding: 0.875rem 1.25rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}

.paper .code pre:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -4px;
  border-radius: 14px;
}

.code code {
  font: inherit;
}

.hljs-comment,
.hljs-quote {
  color: var(--code-muted);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag {
  color: var(--code-keyword);
}

.hljs-string,
.hljs-regexp,
.hljs-addition {
  color: var(--code-string);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable.constant_ {
  color: var(--code-number);
}

.hljs-title,
.hljs-section,
.hljs-name {
  color: var(--code-title);
}

.hljs-built_in,
.hljs-type,
.hljs-title.class_ {
  color: var(--code-type);
}

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-meta,
.hljs-selector-class,
.hljs-selector-id {
  color: var(--code-attr);
}

.hljs-deletion {
  color: var(--code-keyword);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

/* Tables scroll inside their own frame on narrow screens. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  background: var(--white);
}

.prose table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.875em;
  line-height: 1.5;
}

.prose th,
.prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--paper-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: rgb(27 23 23 / 0.04);
  font-weight: 700;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

/* After the body */
.post-tags {
  margin-top: -1rem;
}

.post-references {
  display: grid;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--paper-line-strong);
}

.paper .post-references h2 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.post-references ol {
  display: grid;
  gap: 0.625rem;
  padding-left: 1.4em;
  color: var(--paper-muted);
  font-size: var(--text-small);
  list-style: decimal;
}

.post-references a {
  font-weight: 600;
}

.post-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.post-pager-link {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--paper-line-strong);
  border-radius: 20px;
  color: var(--paper-ink);
  text-decoration: none;
  transition: border-color 0.2s;
}

.post-pager-link:hover {
  border-color: var(--paper-ink);
}

.post-pager-link--next {
  grid-column: 2;
  text-align: right;
}

.post-pager-label {
  color: var(--paper-muted);
  font-family: var(--font-mono);
  font-size: var(--text-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-pager-title {
  font-weight: 700;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Link cards (about page case studies, 404 page)
   -------------------------------------------------------------------------- */
.related-cards,
.not-found-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.related-cards a,
.not-found-links a {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  background: var(--white);
  color: var(--paper-ink);
  text-decoration: none;
  transition: border-color 0.2s;
}

.related-cards a:hover,
.not-found-links a:hover {
  border-color: var(--paper-ink);
}

.related-cards strong,
.not-found-links strong {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

.related-cards span,
.not-found-links span {
  color: var(--paper-muted);
  font-size: var(--text-small);
}

/* --------------------------------------------------------------------------
   Resources
   -------------------------------------------------------------------------- */
.resource-note {
  max-width: 46rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--paper-accent);
  border-radius: 0 12px 12px 0;
  background: var(--white);
  color: var(--paper-muted);
  font-size: var(--text-small);
}

.resource-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

.resource-group-head .blog-section-title {
  margin-bottom: 0;
}

.resource-group-head .link {
  font-size: var(--text-small);
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.resource {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  background: var(--white);
  transition: border-color 0.2s;
}

.resource:hover {
  border-color: var(--paper-line-strong);
}

.paper .resource-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.resource-title a {
  color: inherit;
  text-decoration: none;
}

.resource-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.resource-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  color: var(--paper-accent);
  font-family: var(--font-mono);
  font-size: var(--text-data);
}

.resource-desc {
  color: var(--paper-muted);
  font-size: var(--text-small);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-hero .blog-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 2rem;
}

.about-hero .blog-hero-inner > nav {
  grid-column: 1 / -1;
}

.about-avatar {
  width: clamp(6rem, 3rem + 7vw, 10rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 6px rgb(197 0 34 / 0.28);
}

.about-layout > .prose {
  max-width: var(--measure);
}

.about-contact {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  color: var(--paper-muted);
}

.about-contact .blog-section-title {
  margin-bottom: 0;
}

.about-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.about-topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
  color: var(--paper-muted);
}

/* --------------------------------------------------------------------------
   Navigation over paper
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .nav-on-light .nav-list a[aria-current="page"] {
    background: rgb(27 23 23 / 0.08);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .post-layout.has-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-toc {
    position: static;
    max-height: none;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--paper-line);
    border-radius: 20px;
    background: var(--white);
  }

  .post-toc ol {
    border-left: 0;
    padding-left: 0;
  }

  .post-toc a {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .author-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-pager-link--next {
    grid-column: auto;
    text-align: left;
  }

  .about-hero .blog-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-avatar {
    margin-top: 1.75rem;
  }

  .blog-search .btn {
    padding-inline: 1rem;
  }
}

@media print {
  .blog-tools,
  .blog-results,
  .post-toc,
  .post-pager {
    display: none !important;
  }

  .paper {
    margin: 0;
    border-radius: 0;
  }
}