@font-face {
  font-family: "Relik Grotesque VF";
  src: url("/fonts/RelikGrotesqueVF.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@layer reset, tokens, themes, type, layout, blocks, gallery;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.5;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  picture {
    display: contents;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    line-height: 1.15;
  }

  p {
    text-wrap: pretty;
  }

  :focus-visible {
    outline: 3px solid var(--theme-accent);
    outline-offset: 3px;
  }

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

@layer tokens {
  :root {
    color-scheme: light;

    --neutral: oklch(0.6 0.05 80);
    --red: oklch(0.6 0.2 27);
    --green: oklch(0.6 0.085 150);
    --mustard: oklch(0.6 0.165 88);
    --blue: oklch(0.6 0.1 240);

    --neutral-50: oklch(from var(--neutral) 0.97 calc(c * 0.3) h);
    --neutral-100: oklch(from var(--neutral) 0.93 calc(c * 0.45) h);
    --neutral-200: oklch(from var(--neutral) 0.87 calc(c * 0.6) h);
    --neutral-300: oklch(from var(--neutral) 0.8 calc(c * 0.8) h);
    --neutral-400: oklch(from var(--neutral) 0.7 calc(c * 0.95) h);
    --neutral-500: oklch(from var(--neutral) 0.6 c h);
    --neutral-600: oklch(from var(--neutral) 0.52 c h);
    --neutral-700: oklch(from var(--neutral) 0.45 calc(c * 0.95) h);
    --neutral-800: oklch(from var(--neutral) 0.37 calc(c * 0.85) h);
    --neutral-900: oklch(from var(--neutral) 0.29 calc(c * 0.7) h);
    --neutral-950: oklch(from var(--neutral) 0.21 calc(c * 0.5) h);

    --red-50: oklch(from var(--red) 0.97 calc(c * 0.3) h);
    --red-100: oklch(from var(--red) 0.93 calc(c * 0.45) h);
    --red-200: oklch(from var(--red) 0.87 calc(c * 0.6) h);
    --red-300: oklch(from var(--red) 0.8 calc(c * 0.8) h);
    --red-400: oklch(from var(--red) 0.7 calc(c * 0.95) h);
    --red-500: oklch(from var(--red) 0.6 c h);
    --red-600: oklch(from var(--red) 0.52 c h);
    --red-700: oklch(from var(--red) 0.45 calc(c * 0.95) h);
    --red-800: oklch(from var(--red) 0.37 calc(c * 0.85) h);
    --red-900: oklch(from var(--red) 0.29 calc(c * 0.7) h);
    --red-950: oklch(from var(--red) 0.21 calc(c * 0.5) h);

    --green-50: oklch(from var(--green) 0.97 calc(c * 0.3) h);
    --green-100: oklch(from var(--green) 0.93 calc(c * 0.45) h);
    --green-200: oklch(from var(--green) 0.87 calc(c * 0.6) h);
    --green-300: oklch(from var(--green) 0.8 calc(c * 0.8) h);
    --green-400: oklch(from var(--green) 0.7 calc(c * 0.95) h);
    --green-500: oklch(from var(--green) 0.6 c h);
    --green-600: oklch(from var(--green) 0.52 c h);
    --green-700: oklch(from var(--green) 0.45 calc(c * 0.95) h);
    --green-800: oklch(from var(--green) 0.37 calc(c * 0.85) h);
    --green-900: oklch(from var(--green) 0.29 calc(c * 0.7) h);
    --green-950: oklch(from var(--green) 0.21 calc(c * 0.5) h);

    --mustard-50: oklch(from var(--mustard) 0.97 calc(c * 0.3) h);
    --mustard-100: oklch(from var(--mustard) 0.93 calc(c * 0.45) h);
    --mustard-200: oklch(from var(--mustard) 0.87 calc(c * 0.6) h);
    --mustard-300: oklch(from var(--mustard) 0.8 calc(c * 0.8) h);
    --mustard-400: oklch(from var(--mustard) 0.7 calc(c * 0.95) h);
    --mustard-500: oklch(from var(--mustard) 0.6 c h);
    --mustard-600: oklch(from var(--mustard) 0.52 c h);
    --mustard-700: oklch(from var(--mustard) 0.45 calc(c * 0.95) h);
    --mustard-800: oklch(from var(--mustard) 0.37 calc(c * 0.85) h);
    --mustard-900: oklch(from var(--mustard) 0.29 calc(c * 0.7) h);
    --mustard-950: oklch(from var(--mustard) 0.21 calc(c * 0.5) h);

    --blue-50: oklch(from var(--blue) 0.97 calc(c * 0.3) h);
    --blue-100: oklch(from var(--blue) 0.93 calc(c * 0.45) h);
    --blue-200: oklch(from var(--blue) 0.87 calc(c * 0.6) h);
    --blue-300: oklch(from var(--blue) 0.8 calc(c * 0.8) h);
    --blue-400: oklch(from var(--blue) 0.7 calc(c * 0.95) h);
    --blue-500: oklch(from var(--blue) 0.6 c h);
    --blue-600: oklch(from var(--blue) 0.52 c h);
    --blue-700: oklch(from var(--blue) 0.45 calc(c * 0.95) h);
    --blue-800: oklch(from var(--blue) 0.37 calc(c * 0.85) h);
    --blue-900: oklch(from var(--blue) 0.29 calc(c * 0.7) h);
    --blue-950: oklch(from var(--blue) 0.21 calc(c * 0.5) h);

    --font-body: "Relik Grotesque VF", system-ui, sans-serif;
    --font-heading: var(--font-body);

    --step--1: 0.9375rem;
    --step-0: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2262rem + 0.55vw, 1.6663rem);
    --step-2: clamp(1.62rem, 1.3848rem + 1.0454vw, 2.2211rem);
    --step-3: clamp(1.944rem, 1.5461rem + 1.7682vw, 2.9607rem);
    --step-4: clamp(2.3328rem, 1.7013rem + 2.8067vw, 3.9467rem);
    --step-5: clamp(2.5555rem, 1.7724rem + 3.4803vw, 4.5567rem);

    --space-3xs: clamp(0.2813rem, 0.269rem + 0.0543vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.538rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.8438rem, 0.8071rem + 0.163vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6141rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1522rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2283rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3043rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4565rem + 1.3043vw, 7.5rem);

    --gutter: clamp(1.25rem, 4vw, 2rem);
    --wide: 72rem;
    --measure: 65ch;

    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 1rem;
    --radius-pill: 999px;
    --border-width: 2px;

    --control-height: 2.75rem;
    --control-pad-block: 0.6em;
    --control-pad-inline: 1.2em;

    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 600ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@layer themes {
  :root,
  .theme-paper {
    --theme-bg: var(--neutral-50);
    --theme-fg: var(--neutral-950);
    --theme-muted: var(--neutral-700);
    --theme-accent: var(--red-700);
    --theme-on-accent: var(--neutral-50);
    --theme-line: var(--neutral-200);
    --theme-link: var(--theme-accent);
  }

  .theme-ink {
    --theme-bg: var(--neutral-900);
    --theme-fg: var(--neutral-50);
    --theme-muted: var(--neutral-200);
    --theme-accent: var(--mustard-300);
    --theme-on-accent: var(--neutral-950);
    --theme-line: var(--neutral-800);
    --theme-link: var(--theme-accent);
  }

  .theme-bush {
    --theme-bg: var(--green-800);
    --theme-fg: var(--neutral-50);
    --theme-muted: var(--neutral-200);
    --theme-accent: var(--mustard-300);
    --theme-on-accent: var(--neutral-950);
    --theme-line: var(--green-700);
    --theme-link: var(--theme-accent);
  }

  .theme-mustard {
    --theme-bg: var(--mustard-200);
    --theme-fg: var(--neutral-950);
    --theme-muted: var(--neutral-700);
    --theme-accent: var(--red-800);
    --theme-on-accent: var(--neutral-50);
    --theme-line: var(--mustard-400);
    --theme-link: var(--theme-accent);
  }

  .theme-paper,
  .theme-ink,
  .theme-bush,
  .theme-mustard {
    background: var(--theme-bg);
    color: var(--theme-fg);
  }

  ::selection {
    background: var(--mustard-300);
    color: var(--neutral-950);
  }
}

@layer type {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.6;
    font-variation-settings: "ital" 0, "opsz" 16;
    font-feature-settings: "ss02" 1, "ss04" 1, "ss06" 1, "ss10" 1, "liga" 1;
    em {
      font-style: normal;
      font-variation-settings: "opsz" 16, "ital" 1;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-heading);
    font-weight: 700;
  }

  h1 {
    font-size: var(--step-4);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
  }

  .hero h1 {
    font-size: var(--step-5);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  h2 {
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.015em;
  }

  h3 {
    font-size: var(--step-2);
    line-height: 1.15;
  }

  h4 {
    font-size: var(--step-1);
    line-height: 1.2;
  }

  .lead {
    font-size: var(--step-1);
    line-height: 1.45;
  }

  .eyebrow {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-muted);
  }

  small,
  .caption {
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--theme-muted);
  }

  strong {
    font-weight: 700;
  }

  p,
  ul,
  ol {
    max-inline-size: var(--measure);
  }

  a {
    color: var(--theme-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness var(--dur-1) var(--ease-out);
  }

  a:hover {
    text-decoration-thickness: 3px;
  }

  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: var(--control-height);
    padding: var(--control-pad-block) var(--control-pad-inline);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--theme-accent);
    color: var(--theme-on-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
      translate var(--dur-2) var(--ease-spring),
      box-shadow var(--dur-2) var(--ease-out);
  }

  .button::after {
    content: "→" / "";
    transition: translate var(--dur-2) var(--ease-spring);
  }

  .button:hover {
    translate: 0 -2px;
    box-shadow: 0 4px 0 oklch(from var(--theme-fg) l c h / 0.25);
  }

  .button:hover::after {
    translate: 0.2em 0;
  }

  .button:active {
    translate: 0 0;
    box-shadow: none;
  }

  .button--ghost {
    background: transparent;
    color: var(--theme-fg);
    border-color: currentColor;
  }
}

@layer layout {
  body {
    display: flex;
    flex-direction: column;
    background: var(--theme-bg);
    color: var(--theme-fg);
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: var(--space-s);
    transform: translateY(-150%);
    padding: 0.4rem 0.7rem;
    background: var(--theme-fg);
    color: var(--theme-bg);
    z-index: 2;

    &:focus {
      transform: none;
    }
  }

  .site-header,
  .site-footer {
    padding-inline: var(--gutter);
  }

  .site-header {
    border-block-end: 1px solid var(--theme-line);
  }

  .site-footer {
    border-block-start: 1px solid var(--theme-line);
  }

  .site-footer__contact {
    width: min(100%, var(--wide));
    margin-inline: auto;
    padding-block: var(--space-2xl);
    border-block-end: 1px solid var(--theme-line);
  }

  .site-header__inner,
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    width: min(100%, var(--wide));
    margin-inline: auto;
    padding-block: var(--space-m);
  }

  .site-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
  }

  .site-title__badge {
    display: block;
    flex: none;
    inline-size: 3rem;
    block-size: 3rem;
    min-block-size: 0;
  }

  .site-title__badge svg,
  .site-title__badge img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    transform-box: fill-box;
    transform-origin: center;
    transition: rotate var(--dur-3) var(--ease-spring);
  }

  .site-title:hover .site-title__badge svg,
  .site-title:hover .site-title__badge img,
  .site-title:focus-visible .site-title__badge svg,
  .site-title:focus-visible .site-title__badge img {
    rotate: 1turn;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    transition: text-decoration-color var(--dur-1) var(--ease-out);

    &:hover,
    &:focus-visible {
      text-decoration-color: currentColor;
    }

    &[aria-current="page"] {
      text-decoration-color: currentColor;
    }
  }

  .grid {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
      [content-start] min(100% - var(--gutter) * 2, var(--measure)) [content-end]
      minmax(0, calc((var(--wide) - var(--measure)) / 2))
      [wide-end] minmax(var(--gutter), 1fr) [full-end];
  }

  .grid > * {
    grid-column: content;
  }

  .grid > .wide {
    grid-column: wide;
  }

  .grid > .bleed {
    grid-column: full;
  }

  .grid > * + *,
  .flow > * + *,
  .lead > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  :where(h2) {
    --flow-space: var(--space-xl);
  }

  :where(h3, h4) {
    --flow-space: var(--space-l);
  }

  :where(h2, h3, h4) + * {
    --flow-space: var(--space-2xs);
  }

  .grid > :is(.bleed, .wide),
  .grid > :is(.bleed, .wide) + * {
    margin-block-start: var(--space-2xl);
  }

  .grid > .bleed + .bleed {
    margin-block-start: 0;
  }

  iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  .site-main {
    flex: 1;
    width: 100%;
    padding-block-end: var(--space-3xl);
  }

  .site-main > :first-child:not(.bleed) {
    margin-block-start: var(--space-2xl);
  }

  .site-main > .hero:first-child {
    margin-block-start: 0;
  }

  .drive {
    position: fixed;
    inset-inline: var(--gutter);
    inset-block-end: 0;
    z-index: 3;
    container-type: inline-size;
    pointer-events: none;
  }

  .drive__car {
    position: relative;
    inline-size: clamp(8rem, 12vw, 10rem);
    aspect-ratio: 2 / 1;
  }

  .drive__body,
  .drive__wheel {
    position: absolute;
  }

  .drive__body {
    inset: 0;
    transform-origin: 50% 82%;
  }

  .drive__wheel {
    inline-size: 20%;
    aspect-ratio: 1;
    inset-block-end: 0;
    transform-origin: center;
  }

  .drive__wheel--rear {
    inset-inline-start: 13%;
  }

  .drive__wheel--front {
    inset-inline-start: 72%;
  }

  .drive__body img,
  .drive__wheel img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
}
@layer blocks {
  .band {
    padding-block: var(--space-2xl);
  }

  .split {
    display: grid;
  }

  .split > * {
    margin: 0;
  }

  .split__media img,
  .split__media--placeholder {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: var(--crop, center);
  }

  .split__media--placeholder,
  .hero__image--placeholder {
    background:
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        oklch(from var(--theme-fg) l c h / 0.08) 10px,
        oklch(from var(--theme-fg) l c h / 0.08) 20px
      ),
      oklch(from var(--theme-fg) l c h / 0.14);
  }

  .split__body {
    align-self: center;
    padding: var(--space-2xl) clamp(var(--space-l), 5vw, var(--space-3xl));
  }

  .split__body > * {
    max-inline-size: var(--measure);
  }

  @media (min-width: 48rem) {
    .split {
      grid-template-columns: 1fr 1fr;
      min-block-size: 32rem;
    }

    .split__media img,
    .split__media--placeholder {
      aspect-ratio: auto;
      min-block-size: 32rem;
    }

    .split--right .split__media {
      order: 2;
    }
  }

  .hero {
    overflow: hidden;
  }

  .hero > * {
    margin: 0;
  }

  .hero__body {
    grid-row: 1;
    grid-column: full;
    padding: var(--space-2xl) clamp(var(--space-l), 5vw, var(--space-3xl)) var(--space-xl);
  }

  .hero__image {
    grid-row: 2;
    grid-column: full;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: var(--crop, center);
  }

  @media (min-width: 48rem) {
    .hero {
      min-block-size: min(85svh, 50rem);
      grid-template-rows: 1fr;
    }

    .hero__image {
      grid-row: 1;
      block-size: 100%;
      aspect-ratio: auto;
    }

    .hero__body {
      --theme-fg: var(--neutral-950);
      --theme-muted: var(--neutral-700);
      --theme-link: var(--neutral-950);
      grid-row: 1;
      align-self: center;
      justify-self: start;
      inline-size: 50%;
      position: relative;
      color: var(--theme-fg);
    }

    .hero--inverted .hero__body {
      --theme-fg: var(--neutral-50);
      --theme-muted: var(--neutral-200);
      --theme-link: var(--neutral-50);
      --theme-accent: var(--neutral-50);
      --theme-on-accent: var(--neutral-950);
    }
  }

  .feature {
    display: grid;
    gap: var(--space-l);
    align-items: center;
    border-radius: var(--radius-l);
    padding: var(--space-l);
  }

  .feature__media img {
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  @media (min-width: 40rem) {
    .feature:not(.feature--text) {
      grid-template-columns: minmax(10rem, 16rem) 1fr;
    }
  }

  .site-main > .post:first-child,
  .post-header,
  .post-header + :not(.bleed) {
    margin-block-start: 0;
  }

  .post-header {
    padding-block: var(--space-2xl) var(--space-l);
  }

  .post-header > * + * {
    --flow-space: var(--space-2xs);
  }

  .post-header__image {
    grid-column: content;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-m);
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
    max-inline-size: none;
  }

  .card {
    --theme-link: var(--neutral-950);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);
    background: var(--neutral-100);
    color: var(--neutral-950);
    transition:
      translate var(--dur-2) var(--ease-spring),
      box-shadow var(--dur-2) var(--ease-out);
  }

  .card :is(h2, h3, p) {
    max-inline-size: none;
    margin: 0;
  }

  .card__media {
    overflow: hidden;
  }

  .card__media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale var(--dur-2) var(--ease-spring);
  }

  .card__body {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-m);
  }

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

  .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .card:hover,
  .card:focus-within {
    translate: 0 -4px;
    box-shadow: 0 8px 0 oklch(from var(--neutral-950) l c h / 0.12);
  }

  .card:hover img,
  .card:focus-within img {
    scale: 1.04;
  }

  .card--media {
    background: var(--mustard-100);
  }

  .tag {
    justify-self: start;
    width: fit-content;
    margin: 0;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-pill);
    background: var(--mustard-300);
    color: var(--neutral-950);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    margin-block-end: var(--space-m);
  }

  .contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
    max-inline-size: none;
  }
}

@layer gallery {
  .gallery__track {
    max-width: none;
    max-inline-size: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .gallery button {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: zoom-in;
    overflow: hidden;
  }

  .gallery img {
    display: block;
    transition: scale var(--dur-2) var(--ease-spring);
  }

  .gallery button:hover img,
  .gallery button:focus-visible img {
    scale: 1.03;
  }

  .gallery--filmstrip .gallery__track {
    display: flex;
    gap: var(--space-s);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-block-end: var(--space-xs);
  }

  .gallery--filmstrip li {
    flex: none;
    scroll-snap-align: start;
  }

  .gallery--filmstrip img {
    width: auto;
    max-width: none;
    height: 8.5rem;
  }

  .gallery--masonry .gallery__track {
    columns: 1;
    column-gap: var(--space-s);
  }

  @media (min-width: 40rem) {
    .gallery--masonry .gallery__track {
      columns: 2;
    }
  }

  @media (min-width: 64rem) {
    .gallery--masonry .gallery__track {
      columns: 3;
    }
  }

  .gallery--masonry li {
    break-inside: avoid;
    margin-block-end: var(--space-s);
  }

  .gallery--masonry img {
    width: 100%;
    height: auto;
  }

  .lightbox {
    width: min(100% - 2rem, 72rem);
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    overflow: auto;
    background: transparent;
    color: var(--theme-bg);
  }

  .lightbox::backdrop {
    background: oklch(from var(--neutral-950) l c h / 0.92);
  }

  .lightbox img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 5.5rem);
    margin-inline: auto;
  }

  .lightbox__bar {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
    margin-block-end: var(--space-s);
  }

  .lightbox__bar button {
    padding: 0.35rem 0.7rem;
    border: 0;
    background: var(--theme-bg);
    color: var(--theme-fg);
    cursor: pointer;
  }

  .lightbox__bar [data-prev] {
    margin-inline-end: auto;
  }
}