@import url('./tokens-primitive.css');
@import url('./tokens-semantic.css');

/* -------------- */
/* # Simple Reset */

html,
body {
    font-size: 112.5%;
    margin: 0;
    padding: 0;
}

ul,
li {
    margin-left: 0;
    padding-left: 0;
}

ul,
ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Global focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

* {
    box-sizing: border-box;
}

/* Inline code */
code {
    font-family: var(--font-family-mono);
    color: var(--coral-700);
    background: var(--neutral-100);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] code {
    color: var(--coral-400);
    background: var(--neutral-800);
}

/* Code blocks */
pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-xs);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--neutral-100);
    padding: var(--space-xl);
    margin: var(--space-lg) 0;
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-ink-faint);
}

[data-theme="dark"] pre {
    background: var(--neutral-800);
}

/* Reset code inside pre */
pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    border-radius: 0;
}

/* ----------- */
/* # Utilities */

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-lg);
  z-index: 999;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  color: var(--color-link);
  font-family: var(--font-family-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.u-skip-link:focus {
  top: var(--space-lg);
}

/* --------- */
/* # Globals */

input,
button,
textarea,
select {
    font-family: var(--font-family-body);
    font-size: var(--font-md);
    color: var(--color-text);
}

/* ---------------------- */
/* # Headers & Typography */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: 1.1;
  color: var(--color-text);
  padding: 0;
  letter-spacing: -1px;
  font-weight: 800;
}

h1 { font-size: var(--font-xxxl); margin-block: 0 var(--space-xl); }
h2 { font-size: var(--font-xxl); margin-block: 0 var(--space-lg); }
h3 { font-size: var(--font-xl); margin-block: 0 var(--space-lg); }
h4 { font-size: var(--font-lg); margin-block: 0 var(--space-md); }
h5 { font-size: var(--font-md); margin-block: 0 var(--space-md); }
h6 { font-size: var(--font-sm); margin-block: 0 var(--space-md); }

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
  margin-block-start: 0;
}

/* Paragraphs and Lists */

p,
ul,
ol,
dl,
blockquote {
    font-family: var(--font-family-body);
    margin-block: 0 var(--space-lg);
    padding: 0;
    line-height: 1.6;
    color: var(--color-text);
    font-size: var(--font-md);
}

/* Lists */
ul,
ol {
  padding-inline-start: var(--space-lg);
}

/* Avoid double-spacing between similar blocks */
ul + ul,
ol + ol,
blockquote + blockquote {
  margin-block-start: var(--space-sm);
}


/* Blockquotes */
blockquote {
  margin-inline-start: 0;
  padding-inline-start: var(--space-lg);
  border-inline-start: 4px solid var(--color-ink-faint);
  color: var(--color-text-weak);
}

/* Images, videos, tables, code blocks */
img,
video,
figure,
pre,
table {
  display: block;
  max-width: 100%;
  margin-block: var(--space-lg);
}

figcaption {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin-block-start: var(--space-sm);
  line-height: 1.4;
  text-align: center;
}

figure img {
  margin-block: 0;
}

/* Horizontal rule */
hr {
  margin-block: var(--space-xl);
  border: none;
  border-top: 1px solid var(--neutral-300, #9FA8A6);
}

/* Layout */

.l-main {
    margin: 0;
    padding-inline: var(--space-lg);
    padding-top: calc(44px + var(--space-xl)); /* Account for fixed header */
    min-height: 100vh;
    min-height: 100dvh;
    transition: transform 0.3s ease;
    background: var(--color-surface);
    position: relative;
    z-index: 101;
}

/* Scroll lock when drawer is open */
.l-shell[data-drawer="left"],
.l-shell[data-drawer="right"] {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

.l-shell[data-drawer="left"] .l-main,
.l-shell[data-drawer="right"] .l-main {
    overflow: hidden;
}

.l-shell[data-drawer="left"] .c-footer,
.l-shell[data-drawer="right"] .c-footer {
    display: none;
}



/* Grids */

.l-grid {
    display: grid;
    align-items: top;
    grid-template-columns: repeat(1, 1fr);
}

.l-grid--2-col {
    grid-gap: var(--space-xl);
    grid-template-columns: repeat(12, 1fr);
}

.l-grid--2-col .l-grid__item {
    grid-column: span 6;
}


.l-grid--2-col .l-grid__item--xl {
    grid-column: span 9;
}

.l-grid--2-col .l-grid__item--lg {
    grid-column: span 7;
}

.l-grid--2-col .l-grid__item--sm {
    grid-column: span 5;
}

.l-grid--2-col .l-grid__item--xs {
    grid-column: span 3;
}



/* ------------ */
/* # Dark Theme */

[data-theme="dark"] {
  --color-text: var(--neutral-0);
  --color-text-weak: var(--neutral-200);
  --color-text-weakest: var(--neutral-400);
  --color-text-reverse: var(--neutral-900);
  --color-text-reverse-weak: var(--neutral-600);

  --color-ink: var(--neutral-0);
  --color-ink-weak: var(--neutral-300);
  --color-ink-weakest: var(--neutral-600);
  --color-ink-faint: var(--neutral-700);

  --color-ink-reverse: var(--neutral-900);
  --color-ink-reverse-weak: var(--neutral-600);
  --color-ink-reverse-weakest: var(--neutral-300);
  --color-ink-reverse-faint: var(--neutral-100);

  --color-surface: var(--neutral-900);
  --color-surface-reverse: var(--neutral-0);
  --color-surface-dark: var(--neutral-1000);
  --color-surface-alt: var(--neutral-800);
  --color-surface-alt-reverse: var(--neutral-100);

  --color-link: var(--coral-400);
  --color-hover: var(--coral-500);
  --color-focus: var(--coral-300);
  --color-press: var(--coral-0);
}

/* ---------------------- */
/* # Shell & Drawer Layout */

.l-shell {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Left drawer - entirely hidden by default, slides in */
.l-drawer--left {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: calc(var(--drawer-bar-width) + var(--drawer-nav-width));
  z-index: 100;
  display: flex;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.l-drawer--left .c-toolbar {
  order: -1; /* Keep toolbar visually first (left) despite DOM order */
  width: var(--drawer-bar-width);
  max-width: 4rem;
  height: 100%;
  background: var(--gradient-brand);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-lg);
  flex-shrink: 0;
}

.l-drawer--left .c-toolbar__logo {
  display: flex;
  justify-content: center;
}

.l-drawer--left .c-toolbar__logo a {
  display: block;
}

.l-drawer--left .c-toolbar__logo svg {
  width: 40px;
  height: auto;
}

.l-drawer--left .c-toolbar__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.l-drawer--left .c-toolbar__list li {
  list-style: none;
}

.l-drawer--left .c-toolbar .c-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-0);
  border-radius: var(--radius-md);
  transition: background var(--transition-sm) ease, transform var(--transition-sm) ease;
}

.l-drawer--left .c-toolbar .c-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Theme Toggle Icons - show based on preference */
.c-theme-toggle__icon {
  display: none;
}

/* Default to system icon */
.c-theme-toggle__icon--system {
  display: block;
}

[data-theme-pref="light"] .c-theme-toggle__icon--system,
[data-theme-pref="dark"] .c-theme-toggle__icon--system {
  display: none;
}

[data-theme-pref="light"] .c-theme-toggle__icon--light {
  display: block;
}

[data-theme-pref="dark"] .c-theme-toggle__icon--dark {
  display: block;
}

.l-drawer--left .c-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-surface-alt);
  position: relative;
}

.l-drawer--left .c-nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), transparent);
  pointer-events: none;
  z-index: 200;
}

.l-drawer--left .c-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.l-drawer ul,
.l-drawer ol {
  padding-inline-start: 0;
}

.l-drawer--left .c-nav__item {
  list-style: none;
  border-top: 1px solid var(--color-ink-weakest);
}

.l-drawer--left .c-nav__item:last-child {
  border-bottom: 1px solid var(--color-ink-weakest);
}

.l-drawer--left .c-nav__item a {
  display: block;
  padding: var(--space-lg);
  font-family: var(--font-family-ui);
  font-size: var(--font-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-sm) ease, color var(--transition-sm) ease;
}

.l-drawer--left .c-nav__item a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Right drawer - slides in from right */
.l-drawer--right {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 280px;
  background: var(--color-surface-alt);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 100;
  padding: 0;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.l-drawer--right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
  pointer-events: none;
  z-index: 200;
}

/* Author Bio */
.c-author-bio {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-author-bio__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: var(--space-lg);
}

.c-author-bio__text {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-text-weak);
  margin: 0;
}

/* Related Posts */
.c-related-posts {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-related-posts__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-weak);
  padding: 0 var(--space-xl) var(--space-md);
  margin: 0;
  border: none;
}

.c-related-posts__list {
  display: flex;
  flex-direction: column;
}

.c-related-posts__list li {
  border-top: 1px solid var(--color-ink-faint);
}

.c-related-posts__list a {
  display: block;
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--font-md);
  color: var(--color-text-weak);
  text-decoration: none;
  transition: background var(--transition-sm) ease, color var(--transition-sm) ease;
}

.c-related-posts__list a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Drawer Tags */
.c-drawer-tags {
  padding: var(--space-lg) var(--space-xl);
}

.c-drawer-tags__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-weak);
  padding: 0 0 var(--space-md);
  margin: 0;
  border: none;
}

.c-drawer-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0;
}

.c-drawer-tag {
  font-size: var(--font-sm);
  list-style: none;
}

.c-drawer-tag a {
  color: var(--color-text);
  text-decoration: none;
  text-transform: lowercase;
  transition: color var(--transition-sm) ease;
}

.c-drawer-tag a:hover {
  color: var(--color-text-weak);
  text-decoration: underline;
}

/* Drawer states */
.l-shell[data-drawer="left"] .l-drawer--left {
  transform: translateX(0);
  z-index: 102;
}

.l-shell[data-drawer="left"] .l-main,
.l-shell[data-drawer="left"] .c-site-header {
  transform: translateX(calc(var(--drawer-bar-width) + var(--drawer-nav-width)));
}

.l-shell[data-drawer="right"] .l-drawer--right {
  transform: translateX(0);
  z-index: 102;
}

.l-shell[data-drawer="right"] .l-main,
.l-shell[data-drawer="right"] .c-site-header {
  transform: translateX(-280px);
}

/* Overlay for closing drawers */
.l-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}

.l-shell[data-drawer="left"] .l-drawer-overlay,
.l-shell[data-drawer="right"] .l-drawer-overlay {
  opacity: 1;
  visibility: visible;
}

/* Drawer/content dim overlays driven by --drawer-progress (0 = closed, 1 = open) */
/* Drawer dim: dark overlay that starts at 50% and fades to 0% as drawer opens */
.l-drawer--left::after,
.l-drawer--right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: black;
  opacity: calc(0.25 * (1 - var(--drawer-progress, 1)));
  pointer-events: none;
  z-index: 201;
  transition: opacity 0.3s ease;
}

/* Main content wash: lightens in light mode, darkens in dark mode */
.l-main::after {
  content: '';
  position: fixed;
  inset: 0;
  background: white;
  opacity: calc(0.25 * var(--drawer-progress, 0));
  pointer-events: none;
  z-index: 101;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.l-shell[data-drawer="left"] .l-main::after,
.l-shell[data-drawer="right"] .l-main::after,
.is-dragging .l-main::after {
  visibility: visible;
}

[data-theme="dark"] .l-main::after {
  background: black;
}

/* Suppress transitions on dim overlays during drag */
.is-dragging .l-drawer--left::after,
.is-dragging .l-drawer--right::after,
.is-dragging .l-main::after {
  transition: none !important;
}

/* Drag mode: disable transitions during touch gesture */
.is-dragging,
.is-dragging .l-drawer--left,
.is-dragging .l-drawer--right,
.is-dragging .l-main,
.is-dragging .c-site-header,
.is-dragging .l-drawer-overlay {
  transition: none !important;
}

.is-dragging .l-drawer--left,
.is-dragging .l-drawer--right,
.is-dragging .l-main,
.is-dragging .c-site-header {
  will-change: transform;
}

.is-dragging .l-drawer-overlay {
  will-change: opacity;
}

/* ---------------------- */
/* # Article Layout */

.l-container--lg {
  max-width: var(--max-width-lg);
  margin: 0 auto;
}

.c-article--single {
  padding-block: 0;
}

.c-article--single .c-heading--lg {
  font-size: var(--font-xxxxl);
  letter-spacing: -1.44px;
  margin-block-end: var(--space-lg);
}

.c-article--single .c-subtitle {
  font-family: var(--font-family-body);
  font-size: var(--font-xxl);
  color: var(--color-text-weak);
  margin-block-end: var(--space-xl);
  line-height: 1.3;
}

/* Article Meta */
.c-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin-block-start: var(--space-xl);
}

.c-article-meta__byline::before {
  content: "·";
  margin-inline-end: var(--space-md);
  color: var(--color-text-weakest);
}

/* Tags */
.c-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block: var(--space-xl);
  padding-inline-start: 0;
}

.c-tag {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  list-style: none;
}

.c-tag a {
  color: var(--color-link);
  text-decoration: none;
  text-transform: lowercase;
  transition: color var(--transition-sm) ease;
}

.c-tag a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

.c-tag--primary a {
  font-weight: 700;
}

/* Dinkus / End Mark */
.c-dinkus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-block: var(--space-xxl);
}

.c-dinkus::before,
.c-dinkus::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-ink-faint);
}

.c-dinkus svg {
  width: 28px;
  height: auto;
  flex-shrink: 0;
  color: var(--color-ink-faint);
}

/* Article Navigation */
.l-article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-block: var(--space-xl);
}

.l-article-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.l-article-nav__item--prev {
  grid-column: 1;
}

.l-article-nav__item--next {
  grid-column: 2;
  text-align: right;
}

.c-eyebrow {
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-weak);
}

.c-link--nav {
  font-family: var(--font-family-heading);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-sm) ease, text-decoration-color var(--transition-sm) ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.c-link--nav:hover {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
}

/* ---------------------- */
/* # Bottom Drawers */

.l-bottom-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-ink-faint);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  transform: translateY(100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 200;
  max-height: 70vh;
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
}

.l-bottom-drawer.is-open {
  transform: translateY(0);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

/* Dark overlay behind open bottom drawers */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: black;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 199;
  pointer-events: none;
}

body:has(.l-bottom-drawer.is-open)::before {
  opacity: 0.25;
  visibility: visible;
  pointer-events: auto;
}

.l-bottom-drawer__header {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-md) var(--space-xl) 0;
}

.l-bottom-drawer__content {
  padding: 0 var(--space-xl) var(--space-xl);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.l-bottom-drawer__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-weak);
  border-radius: var(--radius-round);
  transition: background var(--transition-sm) ease;
}

.l-bottom-drawer__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.l-bottom-drawer__close:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.l-bottom-drawer h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-xl);
  font-weight: 700;
  margin-block-end: var(--space-lg);
}

.l-bottom-drawer p {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text);
}

/* Text Controls */
.c-text-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.c-text-controls__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.c-text-controls__label,
.c-text-controls__group > label,
.c-text-controls__group > legend {
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-weak);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Theme Picker */
.c-theme-picker {
  border: none;
  padding: 0;
  margin: 0;
}

.c-theme-picker__options {
  display: flex;
  gap: var(--space-md);
}

.c-theme-picker__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.c-theme-picker__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text-weak);
  background: transparent;
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-sm) ease;
}

.c-theme-picker__option:hover {
  border-color: var(--color-ink-weak);
  color: var(--color-text);
}

.c-theme-picker__input:checked + .c-theme-picker__option {
  background: linear-gradient(135deg, var(--coral-400) 0%, var(--coral-600) 100%);
  color: var(--color-surface);
  border-color: transparent;
}

.c-theme-picker__input:focus-visible + .c-theme-picker__option {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.c-theme-picker__option svg {
  flex-shrink: 0;
}

/* Font Size Slider */
.c-font-size-slider__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.c-font-size-slider__icon {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-text-weak);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-sm) ease, background var(--transition-sm) ease;
}

.c-font-size-slider__icon:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

.c-font-size-slider__icon:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.c-font-size-slider__icon--small {
  font-size: 0.778rem;
}

.c-font-size-slider__icon--large {
  font-size: 1.333rem;
}

.c-font-size-slider__input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-ink-faint);
  border-radius: 3px;
  cursor: pointer;
}

.c-font-size-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--coral-400) 0%, var(--coral-600) 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(252, 70, 101, 0.4);
  transition: transform var(--transition-sm) ease, box-shadow var(--transition-sm) ease;
}

.c-font-size-slider__input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--coral-400) 0%, var(--coral-600) 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(252, 70, 101, 0.4);
  transition: transform var(--transition-sm) ease, box-shadow var(--transition-sm) ease;
}

.c-font-size-slider__input:hover::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(252, 70, 101, 0.5);
}

.c-font-size-slider__input:hover::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(252, 70, 101, 0.5);
}

.c-font-size-slider__input:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 4px;
}

/* Line Height Picker - 3 Button Options */
.c-line-height-picker__options {
  display: flex;
  gap: var(--space-md);
}

.c-line-height-picker__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-weak);
  background: transparent;
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-sm) ease;
}

.c-line-height-picker__option:hover {
  border-color: var(--color-ink-weak);
  color: var(--color-text);
}

.c-line-height-picker__option.is-active {
  background: linear-gradient(135deg, var(--coral-400) 0%, var(--coral-600) 100%);
  color: var(--color-surface);
  border-color: transparent;
}

.c-line-height-picker__option:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* Search Form */
.c-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.c-search-form__input {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 2px solid var(--color-ink-weak);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-sm) ease;
}

.c-search-form__input:focus {
  outline: none;
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 40%, transparent);
}

/* Search Results */

.c-search-results {
  margin-top: var(--space-lg);
}

.c-search-results__count {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-search-results__list {
  display: flex;
  flex-direction: column;
  padding-inline-start: 0;
}

.c-search-results__item {
  list-style: none;
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-search-results__link {
  display: block;
  padding: var(--space-lg) var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-sm) ease;
}

.c-search-results__link:hover {
  background: var(--color-surface-alt);
}

.c-search-results__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.c-search-results__title {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  transition: color var(--transition-sm) ease;
}

.c-search-results__link:hover .c-search-results__title {
  color: var(--color-link);
}

.c-search-results__meta {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  white-space: nowrap;
  flex-shrink: 0;
}

.c-search-results__excerpt {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-weak);
}

.c-search-results__excerpt mark {
  background: transparent;
  color: var(--color-link);
  font-weight: 600;
}

.c-search-results__empty,
.c-search-results__loading {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  padding: var(--space-lg) 0;
}

.c-search-results__load-more {
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-link);
  background: none;
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-sm) ease, border-color var(--transition-sm) ease;
}

.c-search-results__load-more:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-link);
}

/* ---------------------- */
/* # Archive Banner */

.c-archive-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-surface-dark);
  border-bottom: 1px solid var(--color-ink-light-faint);
  cursor: pointer;
}

.c-archive-banner.is-dismissed {
  display: none;
}

.c-archive-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}

.c-archive-banner__text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-text-light-weak);
}

.c-archive-banner__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-light-weak);
  opacity: 0.7;
}

.c-archive-banner__text strong {
  color: var(--color-text-light);
  font-weight: 600;
}

.c-archive-banner__dismiss {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-ink-light-faint);
  border-radius: 0;
  color: var(--color-text-light-weak);
  transition: all var(--transition-sm) ease;
}

.c-archive-banner:hover .c-archive-banner__dismiss {
  background: var(--color-ink-light-faint);
  color: var(--color-text-light);
}

/* Push header down when banner is present */
body:has(.c-archive-banner:not(.is-dismissed)) .c-site-header {
  top: var(--archive-banner-height, 0px);
}

/* Push main content down when banner is present */
body:has(.c-archive-banner:not(.is-dismissed)) .l-main {
  padding-top: calc(44px + var(--space-xl) + var(--archive-banner-height, 0px));
}

/* ---------------------- */
/* # Home Nav */

.c-home-nav {
  margin-block: var(--space-xl);
}

.c-home-nav__list {
  display: flex;
  gap: var(--space-lg);
  padding: 0;
  margin: 0;
  justify-content: center;
}

.c-home-nav__link {
  font-family: var(--font-family-heading);
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-lg);
  transition: all var(--transition-sm) ease;
}

.c-home-nav__link:hover {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-text-reverse);
}

/* ---------------------- */
/* # Home Coda */

.c-home-coda {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  border-top: 1px solid var(--color-ink-faint);
}

.c-home-coda__text {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  color: var(--color-text-weak);
  font-style: italic;
  margin-bottom: var(--space-md);
}

.c-home-coda__link {
  font-family: var(--font-family-ui);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-sm) ease;
}

.c-home-coda__link:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

/* ---------------------- */
/* # Site Footer */

.c-footer {
  background: var(--color-surface-dark);
  color: var(--color-text-light);
  padding: var(--space-lg);
}

.c-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width-lg);
  margin: 0 auto;
}

.c-footer__copyright {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-light-weak);
}

.c-footer__greeting {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-light-weak);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------------------- */
/* # Site Header */

.c-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  pointer-events: none;
  transition: transform 0.3s ease;
}

.c-site-header > * {
  pointer-events: auto;
}

.c-site-header__logo {
  display: block;
}

.c-site-header__logo svg {
  display: block;
  width: 130px;
  height: 35px;
}

.c-site-header__logo svg .logo-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.c-site-header__logo:hover svg .logo-hover,
.c-site-header__logo:focus-visible svg .logo-hover {
  opacity: 1;
}

/* Logo Wrap + Mini Menu */
.c-site-header__logo-wrap {
  position: relative;
}

.c-mini-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 130px;
  background: var(--color-surface);
  border: 1px solid var(--color-ink-faint);
  border-top: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.c-site-header__logo-wrap:hover,
.c-site-header__logo-wrap:focus-within,
.c-site-header__logo-wrap:has(.is-open) {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
}

.c-site-header__logo-wrap:hover .c-mini-menu,
.c-site-header__logo-wrap:focus-within .c-mini-menu,
.c-mini-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-site-header__logo-wrap:hover .c-site-header__logo svg .logo-hover,
.c-site-header__logo-wrap:focus-within .c-site-header__logo svg .logo-hover {
  opacity: 1;
}

.c-mini-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-mini-menu__item a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-family-body);
  font-size: 0.9rem;
  text-align: right;
  border-top: 1px solid var(--color-ink-faint);
}

.c-mini-menu__item a:hover,
.c-mini-menu__item a:focus-visible {
  background: var(--color-surface-alt);
}

/* Menu Button */
.c-menu-button {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-ink-faint);
  border-radius: 0;
  transition: all var(--transition-sm) ease;
}

.c-menu-button:hover {
  background: var(--color-surface-alt);
}

.c-menu-button svg {
  width: 20px;
  height: 20px;
}

/* Hide menu button when drawer is open (optional) */
.l-shell[data-drawer="left"] .c-menu-button {
  opacity: 0;
  pointer-events: none;
}

/* Feature Image */
.c-feature-image {
  position: relative;
  margin-inline: calc(-1 * var(--space-lg)); /* Full bleed left/right */
  top: calc(-1 * (44px + var(--space-xl) + var(--space-lg))); /* Pull up to top of viewport */
  margin-block-end: calc(-44px - var(--space-lg)); /* Compensate for position offset, maintain spacing */
}

.c-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------- */
/* # Body Background */

body {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Links */
a {
  color: var(--color-link);
  transition: color var(--transition-sm) ease;
}

a:hover {
  color: var(--color-hover);
}

/* Article body content */
.c-article__body {
  font-size: var(--font-md);
  line-height: 1.54;
}

.c-article__body a:hover {
  color: var(--coral-500);
}

.c-article__body p {
  line-height: 1.54;
}

/* Article lists */
.c-article__body ul,
.c-article__body ol {
  margin-block: var(--space-lg);
  padding-inline-start: var(--space-xl);
}

.c-article__body ul {
  list-style: none;
}

.c-article__body ul > li {
  position: relative;
  padding-inline-start: var(--space-sm);
  margin-block-end: var(--space-md);
}

.c-article__body ul > li::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(-1 * var(--space-lg));
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--coral-500);
  border-radius: 50%;
}

.c-article__body ol {
  list-style: none;
  counter-reset: ol-counter;
}

.c-article__body ol li {
  position: relative;
  padding-inline-start: var(--space-sm);
  margin-block-end: var(--space-md);
  counter-increment: ol-counter;
}

.c-article__body ol li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: calc(-1 * var(--space-xl));
  font-family: var(--font-family-ui);
  font-weight: 600;
  color: var(--color-text-weak);
}

/* Nested lists */
.c-article__body ul ul,
.c-article__body ol ol,
.c-article__body ul ol,
.c-article__body ol ul {
  margin-block: var(--space-md) 0;
}

.c-article__body ul ul > li::before {
  width: 4px;
  height: 4px;
  background: var(--color-ink-weak);
}

/* Last items don't need bottom margin */
.c-article__body li:last-child {
  margin-block-end: 0;
}

/* Prevent overflow on shell */
html, body {
  overflow-x: hidden;
}

/* ---------------------- */
/* # Text Size Variations (5 steps) */

[data-text-size="1"] .l-main p,
[data-text-size="1"] .l-main ul,
[data-text-size="1"] .l-main ol,
[data-text-size="1"] .l-main dd,
[data-text-size="1"] .l-main dt,
[data-text-size="1"] .l-main blockquote {
  font-size: 0.8125rem;
}

[data-text-size="2"] .l-main p,
[data-text-size="2"] .l-main ul,
[data-text-size="2"] .l-main ol,
[data-text-size="2"] .l-main dd,
[data-text-size="2"] .l-main dt,
[data-text-size="2"] .l-main blockquote {
  font-size: 0.9375rem;
}

/* data-text-size="3" is default, no override needed */

[data-text-size="4"] .l-main p,
[data-text-size="4"] .l-main ul,
[data-text-size="4"] .l-main ol,
[data-text-size="4"] .l-main dd,
[data-text-size="4"] .l-main dt,
[data-text-size="4"] .l-main blockquote {
  font-size: 1.125rem;
}

[data-text-size="5"] .l-main p,
[data-text-size="5"] .l-main ul,
[data-text-size="5"] .l-main ol,
[data-text-size="5"] .l-main dd,
[data-text-size="5"] .l-main dt,
[data-text-size="5"] .l-main blockquote {
  font-size: 1.25rem;
}

/* ---------------------- */
/* # Line Height Variations (3 options) */

[data-line-height="compact"] .l-main p:not(.c-subtitle),
[data-line-height="compact"] .l-main ul,
[data-line-height="compact"] .l-main ol,
[data-line-height="compact"] .l-main dd,
[data-line-height="compact"] .l-main dt,
[data-line-height="compact"] .l-main blockquote {
  line-height: 1.4;
}

/* data-line-height="normal" is default (~1.6), no override needed */

[data-line-height="relaxed"] .l-main p:not(.c-subtitle),
[data-line-height="relaxed"] .l-main ul,
[data-line-height="relaxed"] .l-main ol,
[data-line-height="relaxed"] .l-main dd,
[data-line-height="relaxed"] .l-main dt,
[data-line-height="relaxed"] .l-main blockquote {
  line-height: 1.9;
}

/* ---------------------- */
/* # Font Family Variations */

[data-font="serif"] {
  --font-family-body: Georgia, 'Times New Roman', serif;
}

/* ---------------------- */
/* # Sections */

.c-section {
  margin-block-end: var(--space-xxl);
}

.c-section__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-xxl);
  font-weight: 700;
  line-height: 1.3;
  margin-block-end: var(--space-lg);
}

.c-section__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-xl);
  font-weight: 700;
  margin-block-end: var(--space-lg);
  color: var(--color-text);
}

.c-section__body {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text-weak);
}

/* ---------------------- */
/* # Post List */

.c-post-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-end: var(--space-xl);
  padding-inline-start: 0;
}

.c-post-list__item {
  list-style: none;
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-post-list__item:first-child {
  border-top: 1px solid var(--color-ink-faint);
}

.c-post-list__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-sm);
  text-decoration: none;
  transition: background var(--transition-sm) ease;
}

.c-post-list__link:hover {
  background: var(--color-surface-alt);
}

.c-post-list__title {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--color-text);
  flex: 1;
}

.c-post-list__link:hover .c-post-list__title {
  color: var(--color-link);
}

.c-post-list__date {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  white-space: nowrap;
}

.c-link--more {
  font-family: var(--font-family-ui);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.c-link--more:hover {
  text-decoration: underline;
}

/* ---------------------- */
/* # Archive Header */

.c-archive-header {
  margin-block-end: var(--space-xxl);
}

.c-archive-header__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-xxxxl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-block-end: var(--space-md);
  color: var(--color-text);
}

.c-archive-header__description {
  font-size: var(--font-lg);
  line-height: 1.5;
  color: var(--color-text-weak);
  margin-block-end: var(--space-md);
}

.c-archive-header__count {
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  color: var(--color-text-weakest);
}

/* ---------------------- */
/* # Year Timeline */

.c-year-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

.c-year-timeline__group {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.c-year-timeline__bar {
  width: 8px;
  background: var(--gradient-brand);
  border-radius: var(--radius-sm);
}

.c-year-timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.c-year-timeline__year {
  font-family: var(--font-family-heading);
  font-size: var(--font-xxl);
  font-weight: 800;
  letter-spacing: normal;
  color: var(--color-text);
  margin: 0;
  padding-block-end: var(--space-sm);
  border-bottom: 1px solid var(--color-ink-faint);
  display: flex;
  align-items: center;
}

.c-year-timeline__posts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-year-timeline__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--color-ink-faint);
  overflow: hidden;
}

.c-year-timeline__item::before {
  content: "";
  position: absolute;
  inset: 0;
  right: -24px;
  background: linear-gradient(to right, var(--color-surface-alt) calc(100% - 24px), transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}

.c-year-timeline__item:last-child {
  border-bottom: none;
}

.c-year-timeline__item:hover::before {
  transform: scaleX(1);
}

.c-year-timeline__date {
  font-family: var(--font-family-mono);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  white-space: nowrap;
  min-width: 50px;
}

.c-year-timeline__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.c-year-timeline__subtitle {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  line-height: 1.4;
}

.c-year-timeline__link {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-sm) ease;
}

/* Stretch the link to cover the entire row for a larger click target */
.c-year-timeline__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-year-timeline__item:hover .c-year-timeline__link,
.c-year-timeline__item:has(.c-year-timeline__link:focus-visible) .c-year-timeline__link {
  color: var(--color-link);
  text-decoration: underline;
}

.c-year-timeline__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.c-year-timeline__item:has(.c-year-timeline__link:focus-visible) {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
}

.c-year-timeline__item:has(.c-year-timeline__link:focus-visible) .c-year-timeline__link:focus-visible {
  outline: none;
}

.c-year-timeline__item:has(.c-year-timeline__link:focus-visible)::before {
  transform: scaleX(1);
}

/* ---------------------- */
/* # Work List */

.c-work-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-work-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-work-entry:first-child {
  border-top: 1px solid var(--color-ink-faint);
}

/* Logo */
.c-work-entry__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.c-work-entry__logo img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-ink-faint);
  margin: 0;
}

.c-work-entry__logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-weak);
}

/* Content */
.c-work-entry__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.c-work-entry__header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-work-entry__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text);
}

.c-work-entry__meta {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.c-work-entry__company {
  font-weight: 700;
  color: var(--color-ink);
}

.c-work-entry__company::after {
  content: "·";
  margin-left: var(--space-sm);
  color: var(--color-text-weakest);
}

.c-work-entry__dates {
  font-family: var(--font-family-body);
}

.c-work-entry__summary {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

/* Toggle button */
.c-work-entry__toggle {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-link);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-sm) ease;
}

.c-work-entry__toggle:hover,
.c-work-entry__toggle:focus {
  color: var(--color-hover);
}

.c-work-entry__toggle:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* Details */
.c-work-entry__details {
  padding-top: var(--space-sm);
}

.c-work-entry__details p {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

/* Related posts */
.c-work-entry__related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.c-work-entry__post {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-sm) ease, color var(--transition-sm) ease;
}

.c-work-entry__post:hover {
  background: var(--color-surface-alt);
}

.c-work-entry__post:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.c-work-entry__post-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  margin: 0;
}

.c-work-entry__post-title {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--color-link);
  line-height: 1.3;
}

.c-work-entry__post:hover .c-work-entry__post-title {
  color: var(--color-hover);
  text-decoration: underline;
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
  .c-work-entry {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .c-work-entry__logo {
    width: 40px;
    height: 40px;
  }

  .c-work-entry__logo img,
  .c-work-entry__logo-placeholder {
    width: 40px;
    height: 40px;
  }

}

/* ---------------------- */
/* # Bio with Photo */

.c-bio {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-block-end: var(--space-lg);
}

.c-bio__photo {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex-shrink: 0;
}

.c-bio__text .c-heading {
  margin-block-end: var(--space-md);
}

.c-bio__text .c-subtitle {
  font-size: var(--font-xl);
  line-height: 1.3;
  margin-block-end: 0;
}

@media (max-width: 480px) {
  .c-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .c-bio__photo {
    width: 140px;
    height: 140px;
  }
}

/* ---------------------- */
/* # Home List (shared component for Talks, Awards, Writing, Projects) */

.c-home-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-end: var(--space-xl);
  padding-inline-start: 0;
}

.c-home-list__item {
  list-style: none;
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-home-list__item:first-child {
  border-top: 1px solid var(--color-ink-faint);
}

.c-home-list__item:last-child {
  border-bottom: none;
}

.c-home-list__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-sm);
  text-decoration: none;
  transition: background var(--transition-sm) ease;
}

a.c-home-list__link:hover {
  background: var(--color-surface-alt);
}

.c-home-list__title {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--color-text);
  flex: 1;
}

a.c-home-list__link:hover .c-home-list__title {
  color: var(--color-link);
}

.c-home-list__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  white-space: nowrap;
}

.c-home-list__source {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
}

.c-home-list__source::after {
  content: ",";
}

/* Projects variant: description instead of source+year, no comma */
.c-home-list--projects .c-home-list__source::after {
  content: "";
}

.c-home-list__year {
  font-family: var(--font-family-mono);
  font-size: var(--font-sm);
  color: var(--color-text-weakest);
}

/* ---------------------- */
/* # Testimonials */

.c-testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-block-end: var(--space-xl);
}

.c-testimonial {
  margin: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-ink-faint);
  border-radius: 6px;
}

.c-testimonial__quote {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text);
  line-height: 1.6;
  margin-block-end: var(--space-md);
}

.c-testimonial__cite {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  font-style: normal;
  color: var(--color-text-weak);
}

.c-testimonial__cite a {
  color: var(--color-text-weak);
  text-decoration: none;
  transition: color var(--transition-sm) ease;
}

.c-testimonial__cite a:hover {
  color: var(--color-link);
}

/* Hide all testimonials by default when JS is available */
.js-testimonials-ready [data-testimonial] {
  display: none;
}

.js-testimonials-ready [data-testimonial].is-visible {
  display: block;
}

/* ---------------------- */
/* # Colophon */

.c-colophon {
  margin-block: var(--space-lg) 0;
}

.c-colophon__term {
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-block-end: var(--space-xs);
}

.c-colophon__term:not(:first-of-type) {
  margin-block-start: var(--space-md);
}

.c-colophon__detail {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin-inline-start: 0;
  line-height: 1.4;
}

/* ---------------------- */
/* # Footer Link */

.c-footer__link {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-light-weak);
  text-decoration: none;
  transition: color var(--transition-sm) ease;
}

.c-footer__link:hover {
  color: var(--color-text-light);
  text-decoration: underline;
}

/* ---------------------- */
/* # Responsive: Home List & Testimonials on mobile */

@media (max-width: 600px) {
  .c-home-list__link {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .c-home-list__meta {
    white-space: normal;
  }

  .c-testimonials {
    grid-template-columns: 1fr;
  }
}

/* -------------------- */
/* # Swipe Hint Overlay */

.c-swipe-hint {
  position: fixed;
  bottom: 5rem;
  left: 0;
  right: 0;
  z-index: 300;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding-inline: var(--space-lg);
}

.c-swipe-hint[hidden] {
  display: none;
}

.c-swipe-hint__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
}

.c-swipe-hint__item--left {
  align-items: flex-start;
}

/* The animated circle + trail */
.c-swipe-hint__graphic {
  position: relative;
  width: 80px;
  height: 44px;
}

.c-swipe-hint__circle {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-ink-weak);
  background: transparent;
  transform: translateY(-50%);
  opacity: 0;
}

.c-swipe-hint__trail {
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--color-ink-weakest);
  transform: translateY(-50%);
  opacity: 0;
  border-radius: 1px;
}

/* Left hint: circle starts at left edge, slides right */
.c-swipe-hint__item--left .c-swipe-hint__circle {
  left: 0;
}

.c-swipe-hint__item--left .c-swipe-hint__trail {
  left: 0;
  width: 0;
}

.c-swipe-hint__label {
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  white-space: nowrap;
}

/* Fade-in for hint items */
@keyframes swipeHintFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Left hint: circle slides right, trail extends */
@keyframes swipeCircleRight {
  0%   { left: 0; opacity: 0.7; }
  60%  { left: calc(100% - 44px); opacity: 1; }
  80%  { left: calc(100% - 44px); opacity: 0.6; }
  100% { left: 0; opacity: 0; }
}

@keyframes swipeTrailRight {
  0%   { left: 0; width: 0; opacity: 0; }
  60%  { left: 0; width: calc(100% - 44px); opacity: 0.6; }
  80%  { width: 0; left: calc(100% - 44px); opacity: 0; }
  100% { width: 0; left: 0; opacity: 0; }
}

@keyframes swipeHintFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Active animation states — applied via JS */
.c-swipe-hint__item.is-animating {
  animation: swipeHintFadeIn 0.4s ease forwards;
}

.c-swipe-hint__item--left.is-animating .c-swipe-hint__circle {
  animation: swipeCircleRight 1.4s ease-in-out 3;
}

.c-swipe-hint__item--left.is-animating .c-swipe-hint__trail {
  animation: swipeTrailRight 1.4s ease-in-out 3;
}

.c-swipe-hint__item.is-fading-out {
  animation: swipeHintFadeOut 0.4s ease forwards;
}

/* ----------------------- */
/* # Desktop Edge Handles  */

.c-edge-handle {
  position: fixed;
  bottom: var(--space-xxl);
  width: 12px;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: none;
  padding: var(--space-lg) 0;
  cursor: pointer;
  transition: width 0.25s var(--transition-easing),
              background 0.25s var(--transition-easing),
              color 0.25s var(--transition-easing);
}

.c-edge-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
}

.c-edge-handle[hidden] {
  display: none;
}

.c-edge-handle--left {
  left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 1px solid var(--color-ink-weakest);
}

.c-edge-handle--left::before {
  left: 0;
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
}

.c-edge-handle--right {
  right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: 1px solid var(--color-ink-weakest);
}

.c-edge-handle--right::before {
  left: 0;
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
}

.c-edge-handle__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: opacity 0.25s ease;
}

/* The thin vertical line */
.c-edge-handle__line {
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: currentColor;
  transition: height 0.25s ease;
}

.c-edge-handle__label {
  font-family: var(--font-family-ui);
  font-size: 0.611rem;
  font-weight: 600;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease 0.05s, max-height 0.25s ease;
}

/* Hover & focus states */
.c-edge-handle:hover,
.c-edge-handle:focus-visible {
  width: 24px;
  background: var(--color-ink-faint);
}

.c-edge-handle:hover .c-edge-handle__indicator,
.c-edge-handle:focus-visible .c-edge-handle__indicator {
  opacity: 1;
}

.c-edge-handle:hover .c-edge-handle__line,
.c-edge-handle:focus-visible .c-edge-handle__line {
  height: 28px;
}

.c-edge-handle:hover .c-edge-handle__label,
.c-edge-handle:focus-visible .c-edge-handle__label {
  opacity: 1;
  max-height: 80px;
}

.c-edge-handle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Slide edge handles with main content when drawer opens */
.c-edge-handle {
  transition: width 0.25s var(--transition-easing),
              background 0.25s var(--transition-easing),
              color 0.25s var(--transition-easing),
              transform 0.3s ease;
}

.l-shell[data-drawer="left"] .c-edge-handle {
  transform: translateX(calc(var(--drawer-bar-width) + var(--drawer-nav-width)));
}

.l-shell[data-drawer="right"] .c-edge-handle {
  transform: translateX(-280px);
}

/* Keep the active drawer's tab expanded */
.l-shell[data-drawer="left"] .c-edge-handle--left,
.l-shell[data-drawer="right"] .c-edge-handle--right {
  width: 24px;
}

.l-shell[data-drawer="left"] .c-edge-handle--left .c-edge-handle__indicator,
.l-shell[data-drawer="right"] .c-edge-handle--right .c-edge-handle__indicator {
  opacity: 1;
}

.l-shell[data-drawer="left"] .c-edge-handle--left .c-edge-handle__line,
.l-shell[data-drawer="right"] .c-edge-handle--right .c-edge-handle__line {
  height: 28px;
}

.l-shell[data-drawer="left"] .c-edge-handle--left .c-edge-handle__label,
.l-shell[data-drawer="right"] .c-edge-handle--right .c-edge-handle__label {
  opacity: 1;
  max-height: 80px;
}

/* -------------------------------- */
/* # Reduced Motion: Swipe Hints   */

@media (prefers-reduced-motion: reduce) {
  .c-swipe-hint {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------- */
/* # Archive Stats        */

.c-archive-caveat {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-weak);
  margin-block-end: var(--space-xl);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-ink-faint);
}

.c-archive-stats {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-family: var(--font-family-ui);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin-block-end: var(--space-xl);
}

.c-archive-stats__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.c-archive-stats__number {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--font-md);
}

/* ---------------------- */
/* # Heatmap              */

.c-heatmap {
  margin-block-end: var(--space-lg);
}

.c-heatmap__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-md);
}

.c-heatmap__grid {
  display: grid;
  grid-template-columns: 40px repeat(var(--heatmap-cols), 1fr);
  gap: 2px;
  min-width: fit-content;
}

.c-heatmap__month-label {
  font-family: var(--font-family-mono);
  font-size: 0.65rem;
  color: var(--color-text-weak);
  display: flex;
  align-items: center;
  padding-inline-end: var(--space-sm);
  justify-content: flex-end;
}

.c-heatmap__year-label {
  font-family: var(--font-family-mono);
  font-size: 0.65rem;
  color: var(--color-text-weak);
  text-align: center;
  padding-block-start: var(--space-sm);
}

.c-heatmap__corner {
  /* Empty top-left corner cell */
}

.c-heatmap__cell {
  aspect-ratio: 1;
  border-radius: 2px;
  cursor: pointer;
  transition: outline var(--transition-sm) ease, transform var(--transition-sm) ease;
  border: none;
  padding: 0;
  min-width: 14px;
  min-height: 14px;
}

.c-heatmap__cell:hover {
  outline: 2px solid var(--color-text-weak);
  outline-offset: 1px;
  transform: scale(1.2);
  z-index: 1;
  position: relative;
}

.c-heatmap__cell:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 1px;
}

/* Heatmap intensity levels using coral scale */
.c-heatmap__cell[data-level="0"] {
  background: var(--color-ink-faint);
}

.c-heatmap__cell[data-level="1"] {
  background: var(--coral-200);
}

.c-heatmap__cell[data-level="2"] {
  background: var(--coral-400);
}

.c-heatmap__cell[data-level="3"] {
  background: var(--coral-500);
}

[data-theme="dark"] .c-heatmap__cell[data-level="0"] {
  background: var(--neutral-700);
}

[data-theme="dark"] .c-heatmap__cell[data-level="1"] {
  background: var(--coral-900);
}

[data-theme="dark"] .c-heatmap__cell[data-level="2"] {
  background: var(--coral-700);
}

[data-theme="dark"] .c-heatmap__cell[data-level="3"] {
  background: var(--coral-500);
}

.c-heatmap__tooltip {
  position: fixed;
  background: var(--color-surface-dark);
  color: var(--color-text-light);
  font-family: var(--font-family-ui);
  font-size: 0.7rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-sm) ease;
  z-index: 100;
  white-space: nowrap;
}

.c-heatmap__tooltip--visible {
  opacity: 1;
}

.c-heatmap__legend {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  justify-content: flex-end;
  font-family: var(--font-family-mono);
  font-size: 0.65rem;
  color: var(--color-text-weak);
}

.c-heatmap__legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* ---------------------- */
/* # Year Timeline Count  */

.c-year-timeline__count {
  font-family: var(--font-family-mono);
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--color-text-weak);
  margin-inline-start: var(--space-md);
}

/* ---------------------- */
/* # Year Timeline Details */

.c-year-timeline__details-wrapper {
  border: none;
  padding: 0;
  margin: 0;
}

.c-year-timeline__details-wrapper summary {
  cursor: pointer;
  list-style: none;
}

.c-year-timeline__details-wrapper summary::-webkit-details-marker {
  display: none;
}

.c-year-timeline__details-wrapper summary::marker {
  display: none;
  content: "";
}

.c-year-timeline__chevron {
  margin-inline-start: auto;
  flex-shrink: 0;
  color: var(--color-text-weak);
  transition: transform 0.3s ease;
}

.c-year-timeline__details-wrapper[open] .c-year-timeline__chevron {
  transform: rotate(180deg);
}

.c-year-timeline__details-wrapper .c-year-timeline__posts {
  animation: timeline-reveal 0.3s ease forwards;
}

@keyframes timeline-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------------------- */
/* # Topic Grid & Card    */

.c-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .c-topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .c-topic-grid {
    grid-template-columns: 1fr;
  }
}

.c-topic-card {
  position: relative;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--coral-500);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: background var(--transition-sm) ease;
}

.c-topic-card:hover {
  background: var(--color-ink-faint);
}


.c-topic-card__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-sm) 0;
}

.c-topic-card__name a {
  color: inherit;
  text-decoration: none;
}

/* Stretch the link to cover the card */
.c-topic-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-topic-card__description {
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  line-height: 1.5;
  margin-block-end: var(--space-md);
}

.c-topic-card__count {
  font-family: var(--font-family-mono);
  font-size: var(--font-sm);
  color: var(--color-text-weakest);
}

/* ---------------------- */
/* # Random Posts         */

.c-random-posts {
  margin-block-start: var(--space-xxl);
  padding-block-start: var(--space-xxl);
  border-top: 1px solid var(--color-ink-faint);
}

.c-random-posts__header {
  font-family: var(--font-family-heading);
  font-size: var(--font-xl);
  font-weight: 700;
  margin-block-end: var(--space-sm);
  color: var(--color-text);
}

.c-random-posts__description {
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin-block-end: var(--space-xl);
}

.c-random-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .c-random-posts__grid {
    grid-template-columns: 1fr;
  }
}


/* ---------------------- */
/* # Featured Post        */

.c-featured-post {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-block-end: var(--space-xxl);
  position: relative;
}


.c-featured-post__badge {
  display: inline-block;
  font-family: var(--font-family-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--coral-500);
  margin-block-end: var(--space-md);
}

.c-featured-post__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-xxl);
  font-weight: 800;
  line-height: 1.1;
  margin-block-end: var(--space-md);
}

.c-featured-post__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-sm) ease;
}

.c-featured-post__title a:hover {
  color: var(--color-link);
}

.c-featured-post__subtitle {
  font-size: var(--font-lg);
  color: var(--color-text-weak);
  line-height: 1.4;
  margin-block-end: var(--space-md);
}

.c-featured-post__meta {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  margin-block-end: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: baseline;
}

.c-featured-post__category {
  color: var(--color-text-weakest);
}

.c-featured-post__category::after {
  content: "·";
  margin-left: var(--space-md);
}

.c-featured-post__excerpt {
  font-size: var(--font-md);
  color: var(--color-text-weak);
  line-height: 1.6;
  margin-block-end: var(--space-lg);
}

.c-featured-post__read {
  font-family: var(--font-family-ui);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-sm) ease;
}

.c-featured-post__read:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

/* Compact variant for grid cards */
.c-featured-post--compact .c-featured-post__title {
  font-size: var(--font-lg);
}

.c-featured-post--compact .c-featured-post__subtitle {
  font-size: var(--font-md);
}

/* ---------------------- */
/* # Category Badge       */

.c-category-badge {
  display: inline-block;
  font-family: var(--font-family-ui);
  font-size: 0.65rem;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(135deg, #2a7fa3, #2d8f52);
  padding: 2px var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  position: relative;
  z-index: 1;
}

/* ---------------------- */
/* # Quick Links          */

.c-quick-links {
  margin-block-start: var(--space-xxl);
  padding-block-start: var(--space-xl);
  border-top: 1px solid var(--color-ink-faint);
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  font-family: var(--font-family-ui);
}

.c-quick-links a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-sm) ease;
}

.c-quick-links a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

/* ---------------------- */
/* # Pagination           */

.c-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-block-start: var(--space-xxl);
  padding-block-start: var(--space-xl);
  border-top: 1px solid var(--color-ink-faint);
  font-family: var(--font-family-ui);
}

.c-pagination a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-sm) ease;
}

.c-pagination a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

.c-pagination__current {
  font-family: var(--font-family-mono);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
}

/* ---------------------- */
/* # Post Feed            */

.c-post-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-inline-start: 0;
}

.c-post-feed__item {
  border-bottom: 1px solid var(--color-ink-faint);
}

.c-post-feed__item:first-child {
  border-top: 1px solid var(--color-ink-faint);
}

.c-post-feed__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-sm);
  text-decoration: none;
  transition: background var(--transition-sm) ease;
}

.c-post-feed__link:hover {
  background: var(--color-surface-alt);
}

.c-post-feed__link:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
}

.c-post-feed__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.c-post-feed__title {
  font-family: var(--font-family-body);
  font-size: var(--font-md);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text);
  margin: 0;
  transition: color var(--transition-sm) ease;
}

.c-post-feed__category {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weakest);
  order: 1;
}

.c-post-feed__date {
  order: 0;
}

.c-post-feed__category::before {
  content: "·";
  margin-right: var(--space-md);
}

.c-post-feed__link:hover .c-post-feed__title {
  color: var(--color-link);
}

.c-post-feed__subtitle {
  font-size: var(--font-sm);
  color: var(--color-text-weak);
  line-height: 1.4;
  margin: 0;
}

.c-post-feed__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-shrink: 0;
  white-space: nowrap;
}

.c-post-feed__date {
  font-family: var(--font-family-body);
  font-size: var(--font-sm);
  color: var(--color-text-weak);
}

@media (min-width: 769px) {
  .c-post-feed__category {
    order: -1;
  }

  .c-post-feed__category::before {
    content: none;
  }

  .c-post-feed__category::after {
    content: "·";
    margin-left: var(--space-md);
  }
}

@media (max-width: 768px) {
  .c-post-feed__link {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .c-post-feed__meta {
    flex-shrink: unset;
  }
}