/* ============================================
   FONTS
   ============================================ */


/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  /* Colours */
  --color-bg: hsl(20 37% 98.5%);
  --color-text: #111111;
  --color-text-muted: #888888;
  --color-accent: hsl(9 88% 55%);
  --color-border: #e2e2e2;
  --color-card-bg: hsl(20 15% 94%);
  --color-bento-bg: #000000;
  --color-text-on-dark: rgb(244, 238, 230);
  --floating-nav-bg: hsl(20 37% 98.5%);
  --floating-nav-border: #ffffff;
  --floating-nav-shadow: color-mix(in srgb, var(--color-text) 20%, transparent);
  --floating-nav-panel-shadow: color-mix(in srgb, var(--color-text) 20%, transparent);

  /* Typography */
  --text-caption: 1rem;
  --text-body: 1.25rem;
  --text-heading-sm: 1.5rem;
  --text-heading-md: 2.25rem;
  --text-heading-lg: 3rem;

  --leading-tight: 1.25;
  --leading-base: 1.625;
  --leading-compact: 1.35;

  --font-regular: 450;
  --font-medium: 550;
  --font-semibold: 650;
  --font-bold: 750;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;
  --space-2xl: 6rem;

  --stack-xs: var(--space-xs);
  --stack-sm: var(--space-sm);
  --stack-md: var(--space-md);
  --stack-lg: var(--space-lg);
  --section-gap: 2.5rem;
  --page-gap: 4rem;

  /* Layout */
  --gutter-width: 14rem;
  --gutter-gap: 2rem;
  --prose-width: 48rem;
  --sidenote-width: var(--gutter-width);
  --sidenote-offset: var(--gutter-gap);
  --content-overhang: 2rem;
  --content-overhang-wide: 4rem;
  --radius: 9px;
  --floating-nav-size: 2.5rem;
  --floating-nav-width: 5rem;
  --floating-nav-panel-width: 6.75rem;
  --floating-nav-expanded-h: 12.65rem;
  --floating-nav-panel-inset: 0.35rem;
  --floating-nav-offset: 1.5rem;
  --floating-nav-expand-inset: 6px;
  --floating-nav-inner-pad: 17px;
  --floating-nav-inner-pad-top: -2px;
  --floating-nav-rule-width: 2.7rem;
  --floating-nav-desktop-gap: var(--space-xl);
  --floating-nav-desktop-y: 0.65rem;
  --content-top-clearance: var(--space-lg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(20 11% 7%);
    --color-text: rgb(244, 238, 230);
    --color-text-muted: rgb(149, 143, 135);
    --color-accent: hsl(9 88% 62%);
    --color-border: hsl(20 8% 12%);
    --color-card-bg: hsl(20 8% 10%);
    --floating-nav-bg: hsl(20 11% 8%);
    --floating-nav-border: hsl(20 8% 12%);
    --floating-nav-shadow: color-mix(in srgb, #000000 40%, transparent);
    --floating-nav-panel-shadow: color-mix(in srgb, #000000 40%, transparent);
  }
}

/* ============================================
   RESET & BASE
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background-color: var(--color-bg);
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  margin: 0;
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-heading-lg); }
h2 { font-size: var(--text-heading-md); }
h3 { font-size: var(--text-heading-sm); }

p {
  margin: 0;
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.3s;
}

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

strong {
  font-weight: var(--font-bold);
}

ul, ol {
  margin: 0;
  padding-left: var(--space-lg);
}

li {
  margin: 0;
}

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

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

blockquote {
  margin: 0;
  padding: var(--space-md) 1.25rem;
  background: var(--color-card-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  line-height: var(--leading-compact);
}

blockquote p {
  margin: 0;
}

blockquote p + p {
  margin-top: var(--stack-sm);
}

/* ============================================
   FLOATING NAVIGATION
   ============================================ */

.floating-nav {
  position: fixed;
  top: var(--floating-nav-offset);
  left: max(var(--floating-nav-offset), calc((100vw - var(--prose-width)) / 2 + var(--floating-nav-offset)));
  z-index: 100;
}

@media (min-width: 64rem) {
  .floating-nav {
    top: calc(var(--floating-nav-offset) + var(--floating-nav-desktop-y));
    left: max(
      calc((((100vw - var(--prose-width)) / 2 + var(--floating-nav-offset)) - var(--floating-nav-width)) / 2),
      calc((100vw - var(--prose-width)) / 2 + var(--floating-nav-offset) - var(--floating-nav-width) - var(--floating-nav-desktop-gap))
    );
  }
}

/* Outer: the overflow mask. Animates width/height to reveal inner content. */
.floating-nav-outer {
  position: relative;
  width: var(--floating-nav-width);
  height: var(--floating-nav-size);
  overflow: hidden;
  background: var(--floating-nav-bg);
  border: 1px solid var(--floating-nav-border);
  border-radius: calc(var(--floating-nav-size) / 2);
  box-shadow: 0 0 0.95rem var(--floating-nav-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    width 655ms cubic-bezier(0.22, 1, 0.36, 1),
    height 475ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 475ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 216ms cubic-bezier(0.2, 0, 0, 1),
    background 132ms ease,
    border-color 132ms ease,
    box-shadow 216ms ease;
}

.floating-nav-outer.is-open {
  width: var(--floating-nav-panel-width);
  height: var(--floating-nav-expanded-h);
  transform: translate(calc(-1 * var(--floating-nav-expand-inset)), calc(-1 * var(--floating-nav-expand-inset)));
  border-radius: calc(var(--floating-nav-size) / 2 + var(--floating-nav-panel-inset));
}

.floating-nav-outer.is-instant,
.floating-nav-outer.is-instant .floating-nav-inner,
.floating-nav-outer.is-instant .floating-nav-trigger,
.floating-nav-outer.is-instant .floating-nav-link {
  transition: none;
}

/* Inner: always full expanded size, anchored top-left. Items live in final positions. */
.floating-nav-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--floating-nav-panel-width);
  display: flex;
  flex-direction: column;
  padding: 0 var(--floating-nav-inner-pad) calc(var(--floating-nav-panel-inset) + 0.5rem);
  box-sizing: border-box;
  transition: transform 475ms cubic-bezier(0.22, 1, 0.36, 1);
}

.floating-nav-outer.is-open .floating-nav-inner {
  transform: translate(var(--floating-nav-expand-inset), var(--floating-nav-expand-inset));
}

/* Trigger: sits at top, always visible in collapsed pill. */
.floating-nav-trigger {
  display: flex;
  align-items: center;
  height: var(--floating-nav-size);
  padding: 0;
  transform: translateY(var(--floating-nav-inner-pad-top));
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-align: left;
  white-space: nowrap;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.floating-nav-outer.is-open .floating-nav-trigger {
  color: var(--color-text-muted);
}

.floating-nav-rule {
  height: 1px;
  background: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
  margin-bottom: 0.25rem;
  align-self: flex-start;
  width: var(--floating-nav-rule-width);
}

.floating-nav-trigger:focus,
.floating-nav-trigger:focus-visible {
  outline: none;
}

.floating-nav-trigger::before {
  content: "Menu";
}

.floating-nav-outer.is-open .floating-nav-trigger::before {
  content: "Close";
}

/* Links: muted by default, active page at full colour. */
.floating-nav-link {
  padding: 0.45rem 0;
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-muted);
  opacity: 0;
}

.floating-nav-link::before {
  content: attr(data-label);
}

.floating-nav-link.is-active {
  color: var(--color-text);
}

@media (hover: hover) {
  .floating-nav-link:hover {
    color: var(--color-text);
  }
}

.floating-nav-outer:not(.is-open) .floating-nav-link {
  pointer-events: none;
}

/* Staggered fade — close: bottom-first (base state sets closing delay) */
.floating-nav-link:nth-child(3) { transition: opacity 200ms ease 100ms, color 0.3s; }
.floating-nav-link:nth-child(4) { transition: opacity 200ms ease 75ms,  color 0.3s; }
.floating-nav-link:nth-child(5) { transition: opacity 200ms ease 50ms,  color 0.3s; }
.floating-nav-link:nth-child(6) { transition: opacity 200ms ease 25ms,  color 0.3s; }
.floating-nav-link:nth-child(7) { transition: opacity 200ms ease 0ms,   color 0.3s; }

.floating-nav-outer:not(:has(.floating-nav-link:nth-child(7))) .floating-nav-link:nth-child(3) { transition: opacity 200ms ease 75ms, color 0.3s; }
.floating-nav-outer:not(:has(.floating-nav-link:nth-child(7))) .floating-nav-link:nth-child(4) { transition: opacity 200ms ease 50ms, color 0.3s; }
.floating-nav-outer:not(:has(.floating-nav-link:nth-child(7))) .floating-nav-link:nth-child(5) { transition: opacity 200ms ease 25ms, color 0.3s; }
.floating-nav-outer:not(:has(.floating-nav-link:nth-child(7))) .floating-nav-link:nth-child(6) { transition: opacity 200ms ease 0ms,  color 0.3s; }

/* Staggered fade — open: top-first */
.floating-nav-outer.is-open .floating-nav-link:nth-child(3) { opacity: 1; transition: opacity 200ms ease 0ms,  color 0.3s; }
.floating-nav-outer.is-open .floating-nav-link:nth-child(4) { opacity: 1; transition: opacity 200ms ease 25ms, color 0.3s; }
.floating-nav-outer.is-open .floating-nav-link:nth-child(5) { opacity: 1; transition: opacity 200ms ease 50ms, color 0.3s; }
.floating-nav-outer.is-open .floating-nav-link:nth-child(6) { opacity: 1; transition: opacity 200ms ease 75ms, color 0.3s; }
.floating-nav-outer.is-open .floating-nav-link:nth-child(7) { opacity: 1; transition: opacity 200ms ease 100ms, color 0.3s; }

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
  max-width: var(--prose-width);
  margin: 0 auto;
  padding: 0 var(--floating-nav-offset);
}

@media (min-width: 80rem) {
  .main-content {
    overflow: visible;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  display: grid;
  gap: calc(var(--stack-md) * 2);
  padding-top: calc(var(--floating-nav-offset) + var(--floating-nav-size) + var(--content-top-clearance));
  padding-bottom: var(--section-gap);
}

@media (min-width: 64rem) {
  .hero {
    padding-top: var(--floating-nav-offset);
  }
}

.hero-profile {
  position: relative;
  display: inline-block;
  width: 5rem;
  height: 5rem;
  transform: translateX(-0.875rem);
}

.hero-profile-image {
  display: block;
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  border-radius: 50%;
}

.hero-profile::after {
  content: "🕶️";
  position: absolute;
  top: 41%;
  left: 59%;
  transform: translate(-50%, -50%);
  font-size: 2.3rem;
  line-height: 1;
  display: none;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .hero-profile::after {
    display: block;
  }
}

.hero-name {
  font-size: var(--text-heading-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}

.hero-link {
  /* color: var(--color-text-muted); */
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.hero-link:hover {
  color: var(--color-accent);
}

.hero-link:not(:last-child) {
  padding-right: var(--space-md);
}

.hero-summary {
  display: grid;
  gap: calc(var(--stack-md) * 2);
}

.hero-summary p {
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.hero-summary p:first-child {
  font-weight: var(--font-medium);
  color: var(--color-text);
}

/* ============================================
   HOME PAGE: SECTION HEADINGS
   ============================================ */

.projects,
.words-list,
.side-projects {
  display: grid;
  gap: var(--stack-sm);
}

.work-list-section {
  gap: var(--stack-md);
}

.side-projects.work-list-section {
  gap: var(--stack-sm);
}

.words-list,
.page--index-list {
  gap: var(--stack-md);
}

.page--index-list .home-section-label {
  padding-top: 0;
}

.thinking-link .words-list {
  gap: var(--stack-sm);
}

.work-list-heading {
  display: grid;
  gap: var(--stack-sm);
}

.home-section-label {
  color: var(--color-text-muted);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  transition: color 0.3s;
  padding-top: var(--space-lg);
}

a.home-section-label:hover {
  color: var(--color-accent);
}

.home-section-context {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}

.home-section-context a {
  color: var(--color-text-muted);
}

.home-section-context a:hover {
  color: var(--color-accent);
}

/* ============================================
   HOME PAGE: SHARED ROW LISTS
   ============================================ */

.project-list {
  margin-bottom: var(--section-gap);
}

.project-row {
  display: block;
  padding: var(--stack-md) 0;
  text-decoration: none;
  transition: opacity 0.3s, color 0.3s;
}

.project-list--compact .project-row {
  padding: var(--stack-xs) 0;
}

.project-row:hover {
  color: var(--color-text);
}

@media (hover: hover) {
  .project-list:has(.project-row:hover) .project-row:not(:hover) {
    opacity: 0.42;
  }
}

.project-row-main {
  display: grid;
  gap: var(--stack-xs);
}

.project-row-header {
  display: block;
}

.project-row-title {
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  transition: color 0.3s;
}

.project-row:hover .project-row-title {
  color: var(--color-accent);
}

.project-row-signal {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.project-row-signal-icon {
  color: var(--color-accent);
  font-size: var(--text-caption);
  line-height: 1;
}

.project-row-summary {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.project-row-external {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.project-row-points {
  display: grid;
  gap: var(--stack-xs);
}

.project-row-point {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
  padding-left: var(--space-sm);
}

/* ============================================
   HOME PAGE: OPTIONAL SECTIONS
   ============================================ */

.side-projects,
.thinking-link {
  /* padding-top: var(--section-gap); */
}

.thinking-link {
  padding-bottom: 0;
}

/* ============================================
   STANDARD PAGE
   ============================================ */

.page {
  display: grid;
  gap: var(--stack-lg);
  max-width: var(--prose-width);
  padding-top: calc(var(--floating-nav-offset) + var(--floating-nav-size) + var(--content-top-clearance));
}

@media (min-width: 64rem) {
  .page {
    padding-top: calc(var(--floating-nav-offset) + 0.48rem);
  }
}

.page-header {
  display: grid;
  gap: var(--stack-lg);
}

.page-title {
  font-size: var(--text-heading-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.page-summary {
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
}

.page-content {
  font-weight: var(--font-regular);
  margin-bottom: var(--page-gap);
}

.page-content a[href^="/"],
.project-content a[href^="/"] {
  text-decoration: none;
}

.page-content > * + *,
.project-content > * + * {
  margin-top: var(--stack-md);
}

.page-content :is(h2, h3),
.project-content :is(h2, h3) {
  margin-top: var(--page-gap);
}

.page-content :is(h2, h3) + *,
.project-content :is(h2, h3) + * {
  margin-top: var(--stack-md);
}

.page-content :is(ul, ol),
.project-content :is(ul, ol) {
  display: grid;
  gap: var(--stack-sm);
}

.page-content li > * + *,
.project-content li > * + * {
  margin-top: var(--stack-sm);
}

.page-content li strong {
  font-weight: var(--font-medium);
}

.page-content li >:last-child {
  color: var(--color-text);
}

.gif-comparison {
  display: grid;
  gap: var(--stack-sm);
  margin: 0;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.gif-comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
}

.gif-comparison-row img {
  width: 100%;
}

.gif-comparison-row strong {
  color: var(--color-text);
  font-size: var(--text-caption);
  text-transform: uppercase;
}

.gif-comparison figcaption {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

@media (max-width: 39.99rem) {
  .gif-comparison-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* ============================================
   PROJECT PAGE
   ============================================ */

.project-page {
  display: grid;
  max-width: var(--prose-width);
  padding-top: calc(var(--floating-nav-offset) + var(--floating-nav-size) + var(--content-top-clearance));
}

@media (min-width: 64rem) {
  .project-page {
    padding-top: calc(var(--floating-nav-offset) + 0.48rem);
  }
}

.project-page--continued {
  padding-top: 0;
}

@media (min-width: 80rem) {
  .project-page {
    overflow: visible;
  }
}

.project-header {
  display: grid;
  gap: var(--section-gap);
}

.project-page-title {
  font-size: var(--text-heading-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.project-page-summary {
  font-size: var(--text-body);
  font-weight: var(--font-regular);
}

.project-intro {
  display: grid;
  gap: var(--stack-md);
  font-weight: var(--font-regular);
}

.project-intro p {
  margin: 0;
}

.project-meta {
  display: grid;
  gap: var(--stack-lg);
}

.project-role,
.project-contribution {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs) var(--stack-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-regular);
  line-height: var(--leading-base);
}

.project-role strong,
.project-contribution strong {
  font-weight: var(--font-medium);
}

/* ============================================
   PAGE TOC
   ============================================ */

/* Page TOC for project pages */
.page-toc {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-md);
  margin: var(--stack-md) calc(-1 * var(--space-lg) + var(--space-sm)) 0;
}

@media (min-width: 40rem) {
  .page-toc {
    padding: var(--space-xl) var(--content-overhang);
    margin: var(--stack-md) calc(-1 * var(--content-overhang)) 0;
  }
}

.page-toc h2 {
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--stack-md);
}

.page-toc ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-toc li {
  margin: 0;
}

.page-toc a {
  font-size: var(--text-body);
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s;
}

.page-toc a:hover {
  color: var(--color-accent);
}

/* Hide nested TOC levels */
.page-toc ul ul {
  display: none;
}

/* ============================================
   PROJECT CONTENT
   ============================================ */

.project-content {
  position: relative;
  font-weight: var(--font-regular);
  --project-content-overhang: calc(var(--space-lg) - var(--space-sm));
  --project-quote-padding-block: 2rem;
  --project-quote-padding-inline: var(--project-content-overhang);
}

.project-content img {
  margin-left: calc(-1 * var(--project-content-overhang));
  max-width: calc(100% + var(--project-content-overhang) * 2);
  border-radius: var(--radius);
}

.project-content p:has(> img:only-child) {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

@media (min-width: 40rem) {
  .project-content {
    --project-content-overhang: var(--content-overhang);
    --project-quote-padding-inline: var(--content-overhang);
  }
}

.project-content p,
.project-content li {
  position: relative;
}

.project-content blockquote {
  background: var(--color-card-bg);
  border-left: none;
  border-radius: var(--radius);
  margin: var(--project-quote-padding-block) calc(-1 * var(--project-content-overhang));
  padding: var(--project-quote-padding-block) var(--project-quote-padding-inline);
}

.project-content blockquote p {
  margin: 0;
}

.project-content blockquote p + p {
  margin-top: var(--stack-md);
}

.project-content blockquote strong {
  color: var(--color-accent);
}

/* ============================================
   PROJECT LINKS
   ============================================ */

.project-links {
  display: grid;
  gap: var(--stack-md);
  font-weight: var(--font-regular);
  padding-top: var(--space-xl);
}

.project-links h2 {
  font-size: var(--text-body);
}

/* ============================================
   BENTO GRID (Testimonials)
   ============================================ */

.bento-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
  width: 100%;
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
  padding: 0 var(--space-sm);
  box-sizing: border-box;
}

@media (min-width: 40rem) {
  .bento-grid {
    padding: 0 var(--space-sm);
  }

  /* Auto-detect item count and apply tailored layouts */

  /* 1 item: full width */
  .bento-grid:has(> :nth-child(1)):not(:has(> :nth-child(2))) {
    grid-template-columns: 1fr;
  }

  /* 2 items: 2 equal columns */
  .bento-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 items: 3 equal columns */
  .bento-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4 items: 2×2 grid */
  .bento-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5 items: 3 on top, 2 spanning bottom */
  .bento-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(6, 1fr);
  }
  .bento-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(1),
  .bento-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(2),
  .bento-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(3) {
    grid-column: span 2;
  }
  .bento-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4),
  .bento-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5) {
    grid-column: span 3;
  }

  /* 6+ items: auto-fit fallback */
  .bento-grid:has(> :nth-child(6)) {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* ============================================
   TESTIMONIAL CARDS
   ============================================ */

.testimonial-card {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--stack-xs);
}

@media (min-width: 40rem) {
  .testimonial-card {
    padding: var(--space-lg);
  }
}

.testimonial-artists {
  font-size: var(--text-body);
  color: var(--color-accent);
  font-weight: var(--font-bold);
}

.testimonial-name {
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  transition: color 0.3s;
}

.testimonial-quote {
  align-self: end;
}

/* ============================================
   VIDEO CARD
   ============================================ */

.video-card {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  grid-column: span 2;
}

@media (max-width: 40rem) {
  .video-card {
    grid-column: span 1;
  }
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

/* ============================================
   IMAGE BENTO (Project pages)
   ============================================ */

.image-bento {
  display: grid;
  gap: 2px;
  padding: 2px;
  grid-template-columns: 1fr;
  background: var(--color-bento-bg);
  width: 100%;
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

@media (min-width: 30rem) {
  .image-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 40rem) {
  .image-bento {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 2 items: 2 columns */
  .image-bento:has(> img:nth-of-type(2)):not(:has(> img:nth-of-type(3))) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 4 items: 2×2 grid */
  .image-bento:has(> img:nth-of-type(4)):not(:has(> img:nth-of-type(5))) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.image-bento img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  /* border-radius: 0; */
  margin: 0;
  max-width: 100%;
}

.image-bento--fixed {
  grid-auto-rows: 1fr;
}

.image-bento--fixed img {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.image-bento img.span-2 {
  grid-column: span 2;
}

.image-bento img.rows-2 {
  grid-row: span 2;
  aspect-ratio: 8 / 10;
}

.image-bento img.fit-cover {
  object-fit: cover;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  justify-self: stretch;
  align-self: stretch;
}

/* ============================================
   SIDENOTES
   ============================================ */

.margin-note {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
  margin: var(--project-quote-padding-block, var(--space-lg)) calc(-1 * var(--project-content-overhang, 0px));
  padding: var(--project-quote-padding-block, var(--space-lg)) var(--project-quote-padding-inline, var(--space-lg));
  background: var(--color-card-bg);
  border-radius: var(--radius);
}

@media (min-width: 80rem) {
  .margin-note {
    position: absolute;
    top: calc((2.03125rem - 1.35rem) / 2);
    left: calc(100% + var(--gutter-gap));
    width: var(--sidenote-width);
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
}

.sidenote-wrapper {
  position: relative;
}

.sidenote {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  padding: var(--space-sm) 0.75rem;
  background: var(--color-card-bg);
  border-radius: var(--radius);
  margin: var(--stack-sm) 0;
  line-height: var(--leading-compact);
}

@media (min-width: 80rem) {
  .sidenote {
    position: absolute;
    left: 100%;
    margin-left: var(--gutter-gap);
    width: var(--sidenote-width);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: var(--text-caption);
    top: 0;
  }
}

/* ============================================
   SITE FOOTER
   ============================================ */

.site-footer {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  max-width: 48rem;
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) var(--floating-nav-offset);
  padding-bottom: var(--space-md);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.site-footer span:last-child {
  display: none;
}

@media (min-width: 40rem) {
  .site-footer {
    justify-content: space-between;
  }

  .site-footer span:last-child {
    display: inline;
  }
}

.site-footer a {
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent);
}

.site-footer a.footer-email::before {
  content: "→";
  display: inline-block;
  margin-right: 0.2em;
}