/* ================================================================
   DESIGN TOKENS
   ================================================================ */

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #101111;
  --muted: #6a6d67;
  --line: #dddeda;
  --line-strong: #cbcdc7;
  --accent: #21385f;
  --radius: 0px;
  --radius-sm: 0px;
  --max: 108rem;
  --c-border: transparent;
  --c-border-w: 0px;

  /* Theme-driven nav/footer colors — defaults for light pages */
  --nav-color: var(--muted);
  --nav-hover: var(--ink);
  --nav-opacity: 1;
  --title-color: inherit;
  --footer-color: var(--muted);
  --footer-social-color: var(--muted);
}

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

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  color: var(--ink);
  font-family: "Lexend", "Avenir Next", "Segoe UI", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  padding: 2rem;
}

a {
  color: white;
}

img {
  display: block;
  height: auto;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* ================================================================
   SITE SHELL — header, main, footer
   ================================================================ */

.site-header,
.site-main,
.site-footer {
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.site-header {
  align-items: center;
  border: var(--c-border-w) solid var(--c-border);
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  background-color: inherit;
  padding: 0.85rem 1rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.site-title {
  color: var(--title-color);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 1.3rem;
  margin-left: auto;
}

.site-nav a {
  color: var(--nav-color);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: var(--nav-opacity);
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--nav-hover);
  opacity: 1;
}

.site-main {
  min-height: auto;
  padding-top: 0;
}

.site-footer {
  border: var(--c-border-w) solid var(--c-border);
  margin-top: 0;
  padding: 0.85rem 1rem;
  background-color: inherit;
  bottom: 0px;
  position: sticky;
  z-index: 20;
}

.footer-block {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1rem;
  color: var(--footer-color);
}

.footer-kicker {
  color: var(--footer-color);
  font-size: 0.84rem;
  max-width: 42ch;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social a,
.footer-meta {
  color: var(--footer-social-color);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ================================================================
   DARK THEME — home, projects, project, about
   ================================================================ */

body.template-home,
body.template-projects,
body.template-project {
  --c-border: #ffffff;
  --c-border-w: 2px;
  --home-cell-h: clamp(400px, 27vw, 560px);
  --accent: #f4f6f8;
  --nav-color: #f4f6f8;
  --nav-hover: #f4f6f8;
  --nav-opacity: 0.82;
  --title-color: #f4f6f8;
  --footer-color: var(--muted);
  --footer-social-color: #f4f6f8;
  background: #282323;
  color: #f4f6f8;
}

body.template-about {
  --c-border: #ffffff;
  --c-border-w: 2px;
  --nav-color: #f4f6f8;
  --nav-hover: #f4f6f8;
  --nav-opacity: 0.82;
  --title-color: #f4f6f8;
  --footer-color: var(--muted);
  --footer-social-color: #f4f6f8;
  background: #282323;
  color: #f4f6f8;
}

/* Footer border-top:0 for about, blog, post */

body.template-about .site-footer,
body.template-blog .site-footer,
body.template-post .site-footer {
  border-top: 0;
}

/* ================================================================
   BLOG THEME — blog, post
   ================================================================ */

body.template-blog {
  --c-border: #4c5054;
  --c-border-w: 2px;
  --blog-cell-h: clamp(17rem, 24vw, 24rem);
  --nav-color: #4c535a;
  --nav-hover: #121518;
  --title-color: #121518;
  --footer-color: #121518;
  --footer-social-color: #121518;
  background: #ebe4d6;
  color: #121518;
}

body.template-post {
  --c-border: #4c5054;
  --c-border-w: 2px;
  --nav-color: #4c535a;
  --nav-hover: #121518;
  --title-color: #121518;
  --footer-color: #121518;
  --footer-social-color: #121518;
  background: #ebe4d6;
  color: #121518;
}

/* ================================================================
   SHARED TEXT PATTERNS
   ================================================================ */

/* Kicker / date label — used across home, blog, projects */

.home-editorial-kicker,
.page-kicker,
.project-card-kicker,
.journal-date {
  color: #2f4265;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.template-home .home-editorial-kicker,
body.template-projects .home-editorial-kicker {
  color: #f4f6f8;
}

/* Accent links — shared across sections */

.section-link,
.project-meta a,
.post-source a,
.project-nav a,
.contact-rail a,
.footer-social a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18rem;
}

/* Page titles — shared across all detail pages */

.page-intro h1,
.project-hero h1,
.post-hero h1,
.contact-intro h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-top: 0.45rem;
}

/* Lead text */

.page-lead,
.hero-lead {
  color: #2a2e33;
  font-size: 0.95rem;
  margin-top: 0.8rem;
  max-width: 52ch;
}

/* Section headings */

.section-block {
  margin-top: 3rem;
}

.section-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}

.section-head h2,
.project-gallery-wrap h2 {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Richtext blocks */

.text > * + * {
  margin-top: 0.9rem;
}

.text h2,
.text h3,
.text h4 {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.text ul,
.text ol {
  padding-left: 1.2rem;
}

/* Captions — shared pattern */

.img-caption,
.gallery figcaption,
.project-gallery figcaption {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.35rem;
}

/* Label style — shared across about + contact forms */

.about-contact-label,
.about-contact-kicker,
.about-contact-form label,
.contact-rail strong,
.contact-form label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-contact-label,
.about-contact-kicker,
.about-contact-form label {
  color: #d2d8df;
}

/* Page intro */

.page-intro {
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.35rem;
  padding-bottom: 1rem;
}

/* ================================================================
   BLOG EDITORIAL — listing page
   ================================================================ */

.blog-editorial {
  padding-bottom: 0;
}

.blog-editorial-grid {
  border-left: var(--c-border-w) solid var(--c-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-editorial-grid > li {
  border-bottom: var(--c-border-w) solid var(--c-border);
  border-right: var(--c-border-w) solid var(--c-border);
  min-width: 0;
  overflow: hidden;
}

.blog-editorial-intro,
.blog-editorial-post {
  min-height: var(--blog-cell-h);
}

.blog-editorial-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: flex-start;
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.blog-editorial-intro h1 {
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.96;
  margin-top: 0.35rem;
  max-width: 12ch;
}

body.template-blog .page-kicker,
body.template-blog .journal-date,
body.template-post .page-kicker,
body.template-post .journal-date {
  color: #4e5a63;
}

body.template-blog .page-lead {
  color: #30353a;
  line-height: 1.55;
  margin-top: 0.15rem;
  max-width: 34ch;
}

.blog-editorial-card {
  color: inherit;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  height: 100%;
  min-height: var(--blog-cell-h);
  padding: 20px;
  text-decoration: none;
  transition: background-color 250ms ease;
}

.blog-editorial-card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.blog-editorial-card h2 {
  font-size: clamp(1.02rem, 1.4vw, 1.26rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.14;
  max-width: 18ch;
  transition: color 250ms ease;
}

.blog-editorial-card .journal-date {
  transition: color 250ms ease;
}

.blog-editorial-teaser {
  color: #4b5157;
  font-size: 0.88rem;
  margin-top: auto;
  max-width: 36ch;
  transition: color 250ms ease;
}

.blog-editorial-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

.blog-editorial-card-media img,
.blog-editorial-card-placeholder {
  display: block;
  height: 100%;
  width: 100%;
}

.blog-editorial-card-media img {
  object-fit: contain;
  transition: transform 280ms ease;
}

.blog-editorial-card-placeholder {
  background:
    linear-gradient(135deg, rgba(250, 248, 242, 0.8), rgba(223, 218, 207, 0.9)),
    repeating-linear-gradient(
      -45deg,
      rgba(81, 86, 91, 0.12),
      rgba(81, 86, 91, 0.12) 8px,
      rgba(255, 255, 255, 0.18) 8px,
      rgba(255, 255, 255, 0.18) 16px
    );
}

.blog-editorial-card:hover,
.blog-editorial-card:focus-visible {
  background: #282323;
}

.blog-editorial-card:hover h2,
.blog-editorial-card:focus-visible h2,
.blog-editorial-card:hover .journal-date,
.blog-editorial-card:focus-visible .journal-date,
.blog-editorial-card:hover .blog-editorial-teaser,
.blog-editorial-card:focus-visible .blog-editorial-teaser {
  color: #ffffff;
}

.blog-editorial-card:hover .blog-editorial-card-media img,
.blog-editorial-card:focus-visible .blog-editorial-card-media img {
  transform: scale(1.04);
}

/* ================================================================
   BLOG POST — detail page
   ================================================================ */

.post-article {
  display: block;
  margin: 0;
}

.post-article > * {
  border-bottom: var(--c-border-w) solid var(--c-border);
  border-left: var(--c-border-w) solid var(--c-border);
  border-right: var(--c-border-w) solid var(--c-border);
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.post-hero {
  border-bottom: 0;
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 1.8vw, 1.6rem);
}

.post-article > .post-cover,
.post-article > .post-body {
  padding: 0;
}

.post-cover img {
  border: 0;
  border-radius: 0;
  max-height: 80vh;
  object-fit: cover;
}

.post-article .project-gallery-wrap,
.post-article .post-source {
  border-top: 0;
  padding-top: 0;
}

.post-meta {
  color: #4e5a63;
}

.post-source a {
  color: #121518;
}

.post-body > .grid {
  margin-top: 0;
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.post-body > .grid.grid--fullwidth {
  padding-left: 0;
  padding-right: 0;
}

/* ================================================================
   PROJECT FILTER BAR
   ================================================================ */

.project-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}

.project-filter-btn {
  background: transparent;
  border: 1px solid rgba(244, 246, 248, 0.35);
  color: #f4f6f8;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  padding: 0.35rem 0.65rem;
  text-transform: uppercase;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.project-filter-btn:hover,
.project-filter-btn:focus-visible {
  background: rgba(244, 246, 248, 0.12);
}

.project-filter-btn.is-active {
  background: #f4f6f8;
  color: #121518;
}

/* — Filter animations — */

.project-filterable {
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

.project-filterable.is-hidden {
  display: none;
}

.project-filterable.is-shown {
  animation: filter-in 320ms ease both;
}

@keyframes filter-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-filterable.is-shown {
    animation: none;
  }
}

/* ================================================================
   HOME / PROJECTS EDITORIAL GRID
   ================================================================ */

.home-editorial {
  padding-bottom: 0;
}

.home-editorial-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: flex-start;
  padding: clamp(1rem, 1.8vw, 1.6rem);
  position: static;
}

.home-editorial-intro h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0.35rem;
  max-width: 11ch;
}

.home-editorial-lead {
  color: #f4f6f8;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-top: 0.2rem;
  opacity: 0.92;
  max-width: 400px;
}

.home-editorial-grid {
  border-left: var(--c-border-w) solid var(--c-border);
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-editorial-grid > li {
  border-bottom: var(--c-border-w) solid var(--c-border);
  border-right: var(--c-border-w) solid var(--c-border);
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 1101px) {
  body.template-home
    .home-editorial-grid
    > li:nth-child(3n + 1):nth-last-child(-n + 3),
  body.template-home
    .home-editorial-grid
    > li:nth-child(3n + 1):nth-last-child(-n + 3)
    ~ li,
  body.template-projects
    .home-editorial-grid
    > li:nth-child(3n + 1):nth-last-child(-n + 3),
  body.template-projects
    .home-editorial-grid
    > li:nth-child(3n + 1):nth-last-child(-n + 3)
    ~ li {
    border-bottom: 0;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  body.template-home
    .home-editorial-grid
    > li:nth-child(2n + 1):nth-last-child(-n + 2),
  body.template-home
    .home-editorial-grid
    > li:nth-child(2n + 1):nth-last-child(-n + 2)
    ~ li,
  body.template-projects
    .home-editorial-grid
    > li:nth-child(2n + 1):nth-last-child(-n + 2),
  body.template-projects
    .home-editorial-grid
    > li:nth-child(2n + 1):nth-last-child(-n + 2)
    ~ li {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  body.template-home .home-editorial-grid > li:last-child,
  body.template-projects .home-editorial-grid > li:last-child {
    border-bottom: 0;
  }
}

/* JS-driven: remove border-bottom from last visible row during filtering */
.home-editorial-grid > li.is-last-row {
  border-bottom: 0;
}

.home-editorial-cell {
  height: var(--home-cell-h);
  min-height: var(--home-cell-h);
}

/* ================================================================
   PROJECT CARDS — shared + variant styles
   ================================================================ */

.project-card {
  background: var(--panel);
  border-radius: var(--radius);
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.project-card:hover,
.project-card:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 12px 22px rgba(14, 15, 16, 0.08);
  transform: translateY(-2px);
}

.project-card-media {
  margin: 0;
}

.project-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.86rem 0.92rem;
}

.project-card h3 {
  font-size: clamp(0.98rem, 1.35vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.project-card-text {
  color: var(--muted);
  font-size: 0.9rem;
}

.project-card-tags {
  color: #4f627f;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin-top: auto;
  text-transform: uppercase;
}

.project-card-arrow {
  color: #f5f6fb;
  display: none;
  font-size: 0.8rem;
  margin-top: auto;
}

/* — Home variant — */

.project-card--home {
  --cell-pad: clamp(1rem, 1.8vw, 1.6rem);
  background: transparent;
  border-radius: 0;
  display: block;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: var(--cell-pad);
  position: relative;
  transition: background-color 250ms ease;
}

.project-card--home:hover,
.project-card--home:focus-visible {
  background: #ebe4d6;
  box-shadow: none;
  transform: none;
}

.project-card--home .project-card-media {
  align-items: center;
  display: flex;
  height: calc(100% - (var(--cell-pad) * 2));
  inset: var(--cell-pad);
  justify-content: center;
  margin: 0;
  position: absolute;
  width: calc(100% - (var(--cell-pad) * 2));
}

.project-card--home img {
  display: block;
  height: 75%;
  max-height: 75%;
  max-width: 75%;
  object-fit: contain;
  object-position: center;
  width: 75%;
}

.project-card--home h3,
.project-card--home .project-card-tags {
  color: #f4f6f8;
}

.project-card--home h3 {
  font-size: 20px;
  font-weight: 350;
  line-height: 1.2;
  left: var(--cell-pad);
  margin: 0;
  max-width: min(65%, 28ch);
  position: absolute;
  top: var(--cell-pad);
  transition: color 250ms ease;
  z-index: 1;
}

.project-card--home .project-card-tags {
  font-size: 0.64rem;
  margin-top: 0;
  opacity: 0.88;
  position: absolute;
  right: var(--cell-pad);
  text-transform: uppercase;
  text-align: right;
  bottom: var(--cell-pad);
  transition: color 250ms ease;
  z-index: 1;
}

.project-card--home .project-card-text {
  display: none;
}

.project-card--home:hover h3,
.project-card--home:focus-visible h3 {
  color: #2f2a20;
}

.project-card--home:hover .project-card-tags,
.project-card--home:focus-visible .project-card-tags {
  color: #3b3528;
}

/* — Masonry variant — */

.projects-masonry {
  columns: 3 18rem;
  column-gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.projects-masonry li {
  break-inside: avoid;
  margin-bottom: 1.35rem;
}

.project-card--masonry .project-card-text {
  display: none;
}

.project-card--masonry img {
  aspect-ratio: auto;
}

/* — Stream variant — */

.project-card--stream {
  display: grid;
  grid-template-columns: minmax(15rem, 24rem) 1fr;
}

.project-card--stream img {
  height: 100%;
}

/* ================================================================
   BLOG CARDS (secondary grid style)
   ================================================================ */

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 160px;
  padding: 0.8rem;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.blog-card:hover,
.blog-card:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.blog-card h2 {
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.16;
}

.blog-card p {
  color: var(--muted);
  font-size: 0.84rem;
}

/* ================================================================
   EXPERIMENT CARDS
   ================================================================ */

.experiment-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.experiment-card {
  background: rgba(254, 254, 252, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
  min-height: 210px;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.experiment-card::before {
  background:
    radial-gradient(
      circle at 15% 22%,
      rgba(126, 153, 189, 0.17),
      transparent 56%
    ),
    radial-gradient(
      circle at 78% 20%,
      rgba(182, 167, 196, 0.15),
      transparent 58%
    );
  content: "";
  filter: blur(13px);
  inset: -24%;
  opacity: 0.72;
  position: absolute;
  transform: scale(1.04);
}

.experiment-card::after {
  background-image: radial-gradient(
    rgba(0, 0, 0, 0.07) 0.7px,
    transparent 0.7px
  );
  background-size: 3px 3px;
  content: "";
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
}

.experiment-card > * {
  position: relative;
  z-index: 1;
}

.experiment-card h2,
.experiment-card h3 {
  font-size: clamp(1.04rem, 1.45vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.experiment-card p {
  color: #2c3238;
  font-size: 0.9rem;
}

.experiment-card:hover,
.experiment-card:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 10px 22px rgba(22, 31, 44, 0.1);
  transform: translateY(-2px);
}

/* ================================================================
   JOURNAL LIST
   ================================================================ */

.journal-list {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.journal-list li {
  border-bottom: 1px solid var(--line);
}

.journal-list a {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0;
  text-decoration: none;
}

.journal-list h2,
.journal-list h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

.journal-list p {
  color: var(--muted);
}

/* ================================================================
   PROJECT + POST DETAIL — shared article structure
   ================================================================ */

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

.post-article > * {
  min-width: 0;
  width: 100%;
}

.project-hero {
  /* border-bottom: 1px solid var(--line); */
  padding-bottom: 0.95rem;
}

.project-meta,
.post-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0.45rem 0.85rem;
  margin-top: 0.8rem;
}

.project-meta p,
.post-meta span,
.post-meta time {
  margin: 0;
}

.project-summary {
  border-left: 2px solid var(--accent);
  font-size: 1rem;
  line-height: 1.45;
  margin: 1rem 0 0;
  padding-left: 0.75rem;
}

/* Video embeds — shared */

.post-article .post-body .video,
.post-article .post-body .block-video,
.post-article .post-body .block-video-frame {
  display: block;
  height: 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}

.post-article .post-body .video iframe,
.post-article .post-body .block-video iframe,
.post-article .post-body .block-video-frame iframe,
.post-article .post-body .video video,
.post-article .post-body .block-video video,
.post-article .post-body .block-video-frame video {
  display: block;
  height: 100% !important;
  inset: 0;
  max-width: 100% !important;
  position: absolute;
  width: 100% !important;
}

.post-article .video-embed-frame {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.post-article .post-body iframe {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

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

/* ================================================================
   PROJECT GALLERY — shared across project detail
   ================================================================ */

.project-gallery-wrap {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.project-gallery {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}

.project-gallery li {
  grid-column: span 6;
}

.project-gallery li:nth-child(4n + 1) {
  grid-column: span 12;
}

.project-gallery figure,
.post-cover {
  margin: 0;
}

.project-gallery img,
.post-cover img {
  /* border: 1px solid var(--line); */
  /* border-radius: var(--radius-sm); */
}

.project-nav {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  justify-content: space-between;
  padding-top: 0.85rem;
}

/* ================================================================
   PROJECT DETAIL — layout structure
   (These classes only exist in the project template)
   ================================================================ */

.project-article,
.post-article {
  display: block;
  gap: 0;
  margin: 0;
}

.project-detail-rows {
  border-left: var(--c-border-w) solid var(--c-border);
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-detail-row {
  border-bottom: var(--c-border-w) solid var(--c-border);
  border-right: var(--c-border-w) solid var(--c-border);
  min-width: 0;
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.project-detail-row--nav {
  border-bottom: 0;
}

.project-detail-row--story,
.project-detail-row--hero {
  padding: 0;
}

.project-article .project-hero {
  border-bottom: 0;
  padding-bottom: 0;
}

/* — Project header grid — */

.project-header-grid {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-header-grid-media {
  grid-column: 1 / span 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
}

.project-header-grid-media img,
.project-header-grid-media video,
.project-header-grid-media iframe {
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
}

.project-header-grid-media img {
  object-fit: cover;
}

.project-header-grid-media video {
  background: #101217;
}

.project-header-grid-media iframe {
  border: 0;
}

.project-header-grid-media--empty {
  background: rgba(16, 18, 23, 0.24);
  border: 1px dashed var(--c-border);
  min-height: clamp(12rem, 30vw, 20rem);
}

.project-header-grid-intro {
  border-left: var(--c-border-w) solid var(--c-border);
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-header-date {
  color: rgba(244, 246, 248, 0.72);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.project-header-grid-intro h1 {
  margin: 0;
  padding-bottom: 1rem;
}

.project-summary--header {
  border-left: 0;
  margin-top: 0.75rem;
  padding-left: 0;
}

.project-header-grid-cell {
  border-top: var(--c-border-w) solid var(--c-border);
  min-width: 0;
  padding: 48px 24px;
}

.project-header-grid-cell--col-1 {
  border-right: var(--c-border-w) solid var(--c-border);
  grid-column: 1;
  grid-row: 2;
  padding-right: clamp(0.6rem, 1.2vw, 1rem);
}

.project-header-grid-cell--col-2 {
  border-right: var(--c-border-w) solid var(--c-border);
  grid-column: 2;
  grid-row: 2;
  padding-left: clamp(0.6rem, 1.2vw, 1rem);
  padding-right: clamp(0.6rem, 1.2vw, 1rem);
}

.project-header-grid-cell--col-3 {
  grid-column: 3;
  grid-row: 2;
  padding-left: clamp(0.6rem, 1.2vw, 1rem);
}

.project-header-grid-label {
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.3rem;
  text-transform: uppercase;
}

.project-header-grid-value {
  margin: 0;
}

/* — Project detail theme overrides — */

.project-article .project-meta {
  color: rgba(244, 246, 248, 0.78);
}

.project-article .page-kicker,
.project-article .project-gallery-wrap h2,
.project-article .project-meta a,
.project-article .project-nav a {
  color: #f4f6f8;
}

.project-article .project-summary {
  border-left-color: var(--c-border);
}

.project-article .project-gallery-wrap,
.project-article .project-nav {
  border-top: 0;
  padding-top: 0;
}

.project-article .project-gallery figcaption {
  color: rgba(244, 246, 248, 0.78);
}

/* — Project layout rows — */

.project-layout-rows {
  display: grid;
}

.project-layout-rows > .grid {
  margin-top: 0;
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.project-detail-row--story .project-layout-rows > .grid.grid--fullwidth {
  padding-left: 0;
  padding-right: 0;
}

.project-detail-row--story .project-layout-rows > .grid.grid--cell-borders {
  --gutter: 0;
  border-bottom: var(--c-border-w) solid var(--c-border);
  border-top: var(--c-border-w) solid var(--c-border);
  padding-bottom: 0;
  padding-top: 0;
}

.project-detail-row--story
  .project-layout-rows
  > .grid.grid--cell-borders
  > .column {
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.project-detail-row--story
  .project-layout-rows
  > .grid.grid--cell-borders
  > .column
  + .column {
  border-left: var(--c-border-w) solid var(--c-border);
}

.project-layout-rows > .grid:last-child {
  border-bottom: 0;
}

.project-layout-rows .column {
  min-width: 0;
}

.project-article .project-layout-rows figure,
.project-article .project-layout-rows .gallery,
.project-article .project-layout-rows .gallery ul {
  margin: 0;
}

.project-article .project-layout-rows img,
.project-article .project-layout-rows iframe,
.project-article .project-layout-rows video {
  display: block;
  width: 100%;
}

.project-article .project-layout-rows .video {
  display: block;
  max-width: 100%;
  width: 100%;
}

.project-article .project-layout-rows .video iframe,
.project-article .project-layout-rows .video video {
  width: 100%;
}

/* — Variant switcher — */

.project-variant-switcher {
  align-items: center;
  border: var(--c-border-w) solid var(--c-border);
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  justify-content: space-between;
  margin: 0;
  padding: 0.75rem 1rem;
}

.project-variant-switcher-label {
  color: rgba(244, 246, 248, 0.78);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.project-variant-switcher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-variant-switcher-list a {
  border: 1px solid rgba(244, 246, 248, 0.35);
  color: #f4f6f8;
  display: inline-flex;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  padding: 0.35rem 0.55rem;
  text-decoration: none;
  text-transform: uppercase;
}

.project-variant-switcher-list a:hover,
.project-variant-switcher-list a:focus-visible,
.project-variant-switcher-list a[aria-current="page"] {
  background: #f4f6f8;
  color: #121518;
}

/* ================================================================
   PROJECT VARIANTS (1–5)
   ================================================================ */

/* — Variant 1 — */

.project-article--variant-1 .project-detail-row--hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  max-width: 11ch;
}

.project-article--variant-1 .project-meta {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.project-article--variant-1 .project-summary {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  max-width: 64ch;
}

.project-article--variant-1 .project-layout-rows > .grid {
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
}

.project-article--variant-1 .project-layout-rows > .grid img,
.project-article--variant-1 .project-gallery img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.project-article--variant-1 .project-gallery {
  gap: clamp(0.7rem, 1.5vw, 1.1rem);
}

.project-article--variant-1 .project-gallery li,
.project-article--variant-1 .project-gallery li:nth-child(4n + 1) {
  grid-column: span 12;
}

/* — Variant 2 — */

.project-article--variant-2 .project-detail-rows {
  border-left: 0;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
}

.project-article--variant-2 .project-detail-row {
  border-left: var(--c-border-w) solid var(--c-border);
  padding: clamp(1rem, 1.8vw, 1.5rem);
}

.project-article--variant-2 .project-detail-row--hero {
  align-self: start;
  border-right: 0;
  grid-column: 1;
  grid-row: 1 / span 8;
  position: sticky;
  top: 1.2rem;
}

.project-article--variant-2 .project-detail-row:not(.project-detail-row--hero) {
  grid-column: 2;
}

.project-article--variant-2 .project-detail-row--hero h1 {
  font-size: clamp(2rem, 3.7vw, 3.2rem);
  line-height: 0.92;
}

.project-article--variant-2 .project-layout-rows {
  border-left: 0;
}

.project-article--variant-2 .project-layout-rows > .grid {
  border-left: var(--c-border-w) solid var(--c-border);
  margin-left: 0;
}

.project-article--variant-2 .project-layout-rows > .grid img,
.project-article--variant-2 .project-gallery img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-article--variant-2 .project-gallery li,
.project-article--variant-2 .project-gallery li:nth-child(4n + 1) {
  grid-column: span 12;
}

/* — Variant 3 — */

.project-article--variant-3 .project-detail-rows {
  border-left: 0;
  display: grid;
  gap: clamp(0.8rem, 1.5vw, 1.1rem);
}

.project-article--variant-3 .project-detail-row {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1),
    rgba(21, 23, 27, 0.66)
  );
  border: 1px solid rgba(255, 255, 255, 0.33);
  border-radius: 0.85rem;
  padding: clamp(1.1rem, 1.8vw, 1.55rem);
}

.project-article--variant-3 .project-detail-row--hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 0.9;
}

.project-article--variant-3 .project-layout-rows {
  border-left: 0;
  gap: clamp(0.7rem, 1.3vw, 1rem);
}

.project-article--variant-3 .project-layout-rows > .grid {
  background: rgba(11, 14, 19, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.75rem;
}

.project-article--variant-3 .project-layout-rows > .grid:nth-child(even) {
  transform: translateX(0.85rem);
}

.project-article--variant-3 .project-layout-rows > .grid img,
.project-article--variant-3 .project-gallery img {
  border-radius: 0.42rem;
  min-height: clamp(14rem, 28vw, 24rem);
  object-fit: cover;
}

.project-article--variant-3 .project-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-article--variant-3 .project-gallery li,
.project-article--variant-3 .project-gallery li:nth-child(4n + 1) {
  grid-column: span 1;
}

/* — Variant 4 — */

.project-article--variant-4 {
  background: #f4f2ee;
  color: #1b1d20;
}

.project-article--variant-4 .project-detail-rows {
  border-left: 1px solid #1b1d20;
}

.project-article--variant-4 .project-detail-row {
  border-bottom: 1px solid #1b1d20;
  border-right: 1px solid #1b1d20;
  color: #1b1d20;
}

.project-article--variant-4 .project-hero h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.86;
}

.project-article--variant-4 .project-meta,
.project-article--variant-4 .project-gallery figcaption {
  color: rgba(21, 23, 26, 0.78);
}

.project-article--variant-4 .project-summary {
  border-left: 2px solid #1b1d20;
  font-size: 1.08rem;
}

.project-article--variant-4 .page-kicker,
.project-article--variant-4 .project-gallery-wrap h2,
.project-article--variant-4 .project-meta a,
.project-article--variant-4 .project-nav a {
  color: #1b1d20;
}

.project-article--variant-4 .project-layout-rows {
  border-left: 1px solid #1b1d20;
}

.project-article--variant-4 .project-layout-rows > .grid {
  border-bottom: 1px solid #1b1d20;
  border-right: 1px solid #1b1d20;
}

.project-article--variant-4 .project-layout-rows > .grid img,
.project-article--variant-4 .project-gallery img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.project-article--variant-4 .project-gallery li {
  grid-column: span 4;
}

.project-article--variant-4 .project-gallery li:nth-child(4n + 1) {
  grid-column: span 8;
}

/* — Variant 5 — */

.project-article--variant-5 .project-detail-rows {
  border-left: 0;
  display: grid;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
}

.project-article--variant-5 .project-detail-row {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(132, 160, 190, 0.22),
      rgba(22, 23, 26, 0.82) 65%
    ),
    #101217;
  border: 1px solid rgba(183, 203, 226, 0.42);
  padding: clamp(1.1rem, 1.9vw, 1.6rem);
}

.project-article--variant-5 .project-detail-row--hero h1 {
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 0.88;
}

.project-article--variant-5 .project-layout-rows {
  border-left: 0;
  gap: clamp(0.8rem, 1.3vw, 1rem);
}

.project-article--variant-5 .project-layout-rows > .grid {
  background: rgba(12, 15, 19, 0.86);
  border: 1px solid rgba(183, 203, 226, 0.35);
}

.project-article--variant-5 .project-layout-rows > .grid img,
.project-article--variant-5 .project-gallery img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.project-article--variant-5 .video-grid,
.project-article--variant-5 .video-embed-grid {
  gap: 1rem;
}

.project-article--variant-5 .project-gallery li,
.project-article--variant-5 .project-gallery li:nth-child(4n + 1) {
  grid-column: span 12;
}

/* ================================================================
   ABOUT PAGE
   ================================================================ */

.about-layout {
  margin: 0;
  max-width: none;
  padding-top: 0;
  width: 100%;
}

.about-top-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: clamp(20rem, 50vh, 36rem);
  border: var(--c-border-w) solid var(--c-border);
  border-top: 0;
}

.about-top-image {
  align-self: end;
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  justify-self: start;
  margin: 0;
  padding-bottom: clamp(0.6rem, 1.2vw, 1rem);
  width: min(100%, 13rem);
}

.about-top-image img {
  aspect-ratio: 4 / 5;
  border-radius: 0.2rem;
  object-fit: cover;
  width: 100%;
}

.about-bottom-grid {
  column-gap: clamp(0.9rem, 1.6vw, 1.2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(0.7rem, 1.5vw, 1rem);
  border: var(--c-border-w) solid var(--c-border);
  border-top: 0;
}

.about-bottom-contacts {
  min-width: 0;
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.about-bottom-text {
  grid-column: 2 / 3;
  min-width: 0;
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.about-contact-list {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-contact-item {
  display: grid;
  gap: 0.18rem;
}

.about-contact-item a,
.about-contact-value {
  color: #f4f6f8;
  font-size: 0.9rem;
  margin: 0;
  text-decoration: none;
}

.about-contact-item a:hover,
.about-contact-item a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16rem;
}

.about-bottom-text .text {
  max-width: 800px;
}

.about-bottom-text .grid:first-child {
  margin-top: 0;
}

/* — About contact form — */

.about-contact-form-row {
  border: var(--c-border-w) solid var(--c-border);
  border-top: 0;
  column-gap: clamp(0.9rem, 1.6vw, 1.2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(0.7rem, 1.5vw, 1rem);
  padding-bottom: 5rem;
}

.about-contact-form-intro {
  align-self: start;
  display: grid;
  gap: 0.45rem;
  grid-column: 1 / 2;
}

.about-contact-form-intro h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.about-contact-form-body {
  grid-column: 2 / 3;
  min-width: 0;
}

.about-contact-form {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-contact-field {
  display: grid;
  gap: 0.35rem;
}

.about-contact-field--full {
  grid-column: 1 / -1;
}

.about-contact-form input,
.about-contact-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #f4f6f8;
  font: inherit;
  padding: 0.6rem 0.68rem;
  width: 100%;
}

.about-contact-form textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.about-contact-form input:focus-visible,
.about-contact-form textarea:focus-visible {
  border-color: #f4f6f8;
  outline: 0;
}

.about-contact-submit {
  background: #f4f6f8;
  border: 1px solid #f4f6f8;
  color: #121518;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  justify-self: start;
  letter-spacing: 0.08em;
  padding: 0.62rem 0.9rem;
  text-transform: uppercase;
}

.about-contact-submit:hover,
.about-contact-submit:focus-visible {
  background: transparent;
  color: #f4f6f8;
}

.about-contact-field-error {
  color: #ffb9b9;
  font-size: 0.78rem;
  margin: 0;
}

/* ================================================================
   ALERTS — shared across about + contact forms
   ================================================================ */

.about-contact-alert,
.contact-alert {
  border: 1px solid;
  margin: 0;
  padding: 0.75rem 0.82rem;
}

.contact-alert {
  margin-top: 1rem;
}

.about-contact-alert--success,
.contact-alert--success {
  background: rgba(180, 216, 180, 0.16);
  border-color: #b4d8b4;
}

.contact-alert--success {
  background: #f3faf3;
}

.about-contact-alert--error,
.contact-alert--error {
  background: rgba(246, 181, 181, 0.16);
  border-color: #e3b0b0;
}

.contact-alert--error {
  background: #fff5f5;
  border-color: #e2b6b6;
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */

.contact-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
}

.contact-intro {
  grid-column: 1 / -1;
}

.contact-main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-column: 1;
  padding: 1rem;
}

.contact-rail {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-column: 2;
  padding: 0.95rem;
  position: sticky;
  top: 1rem;
}

.contact-rail strong {
  display: block;
  margin-bottom: 0.3rem;
}

.contact-rail p {
  margin: 0;
}

.contact-rail ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.contact-rail li + li {
  margin-top: 0.45rem;
}

.contact-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.contact-form-field {
  display: grid;
  gap: 0.35rem;
}

.contact-form input,
.contact-form textarea {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: inherit;
  padding: 0.55rem 0.65rem;
  width: 100%;
}

.contact-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-color: var(--accent);
  outline: 0;
}

.contact-form-submit {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  justify-self: start;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.95rem;
  text-transform: uppercase;
}

.contact-form-submit:hover,
.contact-form-submit:focus-visible {
  background: #fff;
  color: var(--ink);
}

.contact-field-error {
  color: #9c1d1d;
  font-size: 0.78rem;
  margin: 0;
}

.honeypot {
  left: -9999px;
  position: absolute;
}

/* ================================================================
   GALLERY — shared masonry columns
   ================================================================ */

.gallery ul {
  columns: var(--gallery-cols, 3);
  column-gap: clamp(0.55rem, 1.4vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery li {
  break-inside: avoid;
  margin-bottom: clamp(0.55rem, 1.4vw, 1rem);
}

/* ================================================================
   VIDEO — shared blocks
   ================================================================ */

.block-video,
.block-video-frame,
.block-video-media {
  max-width: 100%;
  width: 100%;
}

.block-video-frame,
.block-video-media {
  display: block;
}

.video-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.video-grid li,
.video-embed-grid > * {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.video-grid video,
.video-embed-grid iframe {
  aspect-ratio: 16 / 9;
  background: #121515;
  display: block;
  width: 100%;
}

.video-embed-frame + .video-embed-frame {
  margin-top: 0.75rem;
}

.video-embed-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0.75rem;
  width: 100%;
}

.post-source {
  border-top: 1px solid var(--line);
  margin: 0;
  padding-top: 0.8rem;
}

/* ================================================================
   LAYOUT BUILDER GRID
   ================================================================ */

.grid {
  display: grid;
  gap: var(--gutter, 1rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid--valign-start {
  align-items: start;
}

.grid--valign-center {
  align-items: center;
}

.grid--valign-end {
  align-items: end;
}

.column {
  grid-column: span var(--columns, 12);
}

.margin-xl {
  margin-top: 1rem;
}

/* ================================================================
   BLOCK: LINE
   ================================================================ */

hr {
  border: none;
  border-top: var(--c-border-w) solid var(--c-border);
}


/* ================================================================
   BLOCK: SPACER
   ================================================================ */

.block-spacer {
  --spacer-height-desktop: 7rem;
  --spacer-height-mobile: 4rem;
  display: block;
  height: var(--spacer-height-desktop);
  margin: 0;
  position: relative;
  width: 100%;
}

.block-spacer-slider {
  display: block;
  height: clamp(1.35rem, 2.2vw, 2rem);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.block-spacer-slider-track {
  fill: none;
  opacity: 0.34;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.block-spacer-slider-thumb {
  fill: currentColor;
  opacity: 0.72;
}

@media (max-width: 760px) {
  .block-spacer {
    height: var(--spacer-height-mobile);
  }
}

/* ================================================================
   BLOCK: CAROUSEL
   ================================================================ */

.block-carousel {
  margin: 0;
  width: 100%;
}

.block-carousel-stage {
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.block-carousel-toggle {
  block-size: 1px;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.block-carousel-slide {
  display: none;
}

.block-carousel-toggle:checked + .block-carousel-slide {
  display: block;
}

.block-carousel[data-animated="true"][data-direction="next"]
  .block-carousel-toggle:checked
  + .block-carousel-slide {
  animation: carousel-slide-in-next 0.36s cubic-bezier(0.23, 1, 0.32, 1);
}

.block-carousel[data-animated="true"][data-direction="prev"]
  .block-carousel-toggle:checked
  + .block-carousel-slide {
  animation: carousel-slide-in-prev 0.36s cubic-bezier(0.23, 1, 0.32, 1);
}

.block-carousel-slide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.block-carousel-thumbs {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(4.8rem, 1fr));
  margin-top: 0.5rem;
}

.block-carousel-thumb {
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.5;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.block-carousel-thumb.is-active {
  opacity: 1;
}

.block-carousel-thumb img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

@keyframes carousel-slide-in-next {
  from {
    opacity: 0;
    transform: translateX(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes carousel-slide-in-prev {
  from {
    opacity: 0;
    transform: translateX(-1.2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-carousel[data-animated="true"][data-direction="next"]
    .block-carousel-toggle:checked
    + .block-carousel-slide,
  .block-carousel[data-animated="true"][data-direction="prev"]
    .block-carousel-toggle:checked
    + .block-carousel-slide {
    animation: none;
  }
}

/* ================================================================
   SHARED PORTFOLIO
   ================================================================ */

.contact,
.note,
.note-footer,
.note-header {
  margin-top: 1rem;
}

.shared-shell {
  margin: 0 auto;
  max-width: 72rem;
}

.shared-header {
  display: grid;
  gap: 0.8rem;
  max-width: 52rem;
}

.shared-intro,
.shared-meta {
  color: var(--muted);
  margin: 0;
}

.shared-entry-list {
  display: grid;
  gap: 0.8rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.shared-entry-list a {
  align-items: baseline;
  background: rgba(8, 14, 24, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  display: flex;
  font-weight: 500;
  gap: 0.7rem;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  text-decoration: none;
}

.shared-entry-list small {
  color: var(--muted);
}

.shared-project-grid {
  display: grid;
  gap: 1.15rem;
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}

.shared-project-card {
  background: rgba(8, 14, 24, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.shared-project-media img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.shared-project-body {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
}

.shared-project-body h2,
.shared-project-body p {
  margin: 0;
}

.shared-project-meta {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shared-empty {
  color: var(--muted);
  margin-top: 1.2rem;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   RESPONSIVE — tablet (≤1100px)
   ================================================================ */

@media (max-width: 1100px) {
  .home-editorial-intro {
    position: static;
  }

  .home-editorial-lead {
    margin-top: 0;
    max-width: 40ch;
  }

  .home-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-editorial-cell,
  .project-card--home {
    height: var(--home-cell-h);
    min-height: var(--home-cell-h);
  }

  .projects-masonry {
    columns: 2 18rem;
  }

  .blog-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: clamp(16rem, 44vh, 28rem);
  }

  .about-top-image {
    grid-column: 2 / 3;
    width: min(100%, 11rem);
  }

  .about-contact-form-row {
    grid-template-columns: 1fr;
  }

  .project-card--stream,
  .project-gallery li,
  .project-gallery li:nth-child(4n + 1),
  .video-grid,
  .contact-layout {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .contact-rail {
    position: static;
  }
}

/* ================================================================
   RESPONSIVE — project header collapse (≤1024px)
   ================================================================ */

@media (max-width: 1024px) {
  .project-header-grid {
    grid-template-columns: 1fr;
  }

  .project-header-grid-media,
  .project-header-grid-intro,
  .project-header-grid-cell,
  .project-header-grid-cell--col-1,
  .project-header-grid-cell--col-2,
  .project-header-grid-cell--col-3 {
    grid-column: 1;
    grid-row: auto;
  }

  .project-header-grid-media {
    padding-right: 0;
  }

  .project-header-grid-intro {
    border-left: 0;
    padding: clamp(1rem, 4vw, 1.6rem);
  }

  .project-header-grid-cell {
    padding: clamp(1rem, 4vw, 1.6rem);
  }

  .project-header-grid-cell--col-1,
  .project-header-grid-cell--col-2,
  .project-header-grid-cell--col-3 {
    padding-left: clamp(1rem, 4vw, 1.6rem);
    padding-right: clamp(1rem, 4vw, 1.6rem);
  }

  .project-header-grid-cell--col-1,
  .project-header-grid-cell--col-2 {
    border-right: 0;
  }

  .project-article--variant-2 .project-detail-rows {
    border-left: var(--c-border-w) solid var(--c-border);
    grid-template-columns: 1fr;
  }

  .project-article--variant-2 .project-detail-row,
  .project-article--variant-2
    .project-detail-row:not(.project-detail-row--hero),
  .project-article--variant-2 .project-detail-row--hero {
    border-left: 0;
    grid-column: 1;
    grid-row: auto;
    position: static;
  }

  .project-article--variant-3 .project-layout-rows > .grid:nth-child(even) {
    transform: none;
  }
}

/* ================================================================
   RESPONSIVE — gallery collapse (≤820px)
   ================================================================ */

@media (max-width: 820px) {
  .project-variant-switcher {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-article .project-layout-rows .gallery ul {
    columns: 1;
  }

  .project-article--variant-3 .project-gallery,
  .project-article--variant-4 .project-gallery,
  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-gallery li,
  .project-gallery li:nth-child(4n + 1),
  .project-article--variant-4 .project-gallery li,
  .project-article--variant-4 .project-gallery li:nth-child(4n + 1),
  .project-article--variant-3 .project-gallery li,
  .project-article--variant-3 .project-gallery li:nth-child(4n + 1) {
    grid-column: span 1;
  }
}

/* ================================================================
   RESPONSIVE — mobile (≤760px)
   ================================================================ */

@media (max-width: 760px) {
  body {
    padding: 1rem;
  }

  .site-header {
    align-items: start;
    flex-direction: column;
    position: relative;
  }

  .site-footer {
    position: relative;
  }

  .site-nav {
    flex-wrap: wrap;
    width: 100%;
    margin-left: unset;
    justify-content: space-between;
  }

  .gallery ul {
    columns: 1;
  }

  .home-editorial-grid {
    grid-template-columns: 1fr;
  }

  .home-editorial-lead {
    max-width: 34ch;
  }

  .home-editorial-cell,
  .project-card--home {
    height: clamp(260px, 65vw, 360px);
    min-height: clamp(260px, 65vw, 360px);
  }

  .project-card--home {
    padding: 1rem;
  }

  .projects-masonry {
    columns: 1;
  }

  .blog-editorial-grid,
  .blog-card-grid,
  .experiment-grid {
    grid-template-columns: 1fr;
  }

  .blog-editorial-intro,
  .blog-editorial-post,
  .blog-editorial-card {
    min-height: clamp(14rem, 48vw, 18rem);
  }

  .blog-editorial-card {
    grid-template-columns: 1fr;
  }

  .blog-editorial-card-media {
    min-height: clamp(10rem, 40vw, 14rem);
  }

  .about-layout {
    gap: 1rem;
    padding-bottom: 2.4rem;
  }

  .about-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(6rem, auto));
    min-height: clamp(14rem, 40vh, 18rem);
  }

  .about-top-image {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: min(100%, 9.5rem);
  }

  .about-bottom-grid {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .about-bottom-contacts,
  .about-bottom-text {
    grid-column: 1 / -1;
  }

  .about-contact-form-row,
  .about-contact-form {
    grid-template-columns: 1fr;
  }

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

  .column {
    grid-column: 1 / -1;
  }

  .footer-block {
    align-items: flex-start;
    flex-direction: row;
  }

  .shared-entry-list a {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ================================================================
   ONE-OFFS
   ================================================================ */

.ray-video--grid .block-video {
  padding-bottom: 24px;
}