:root {
  color-scheme: light;
  --paper: #fafcfd;
  --ink: #1d252e;
  --heading: #32404f;
  --muted: rgba(29, 37, 46, 0.5);
  --line: rgba(29, 37, 46, 0.1);
  --page-gutter: max(24px, calc((100vw - 1392px) / 2));
  --site-header-height: 56px;
  --carousel-tail: 24px;
  --mono: "Geist Mono", "Courier New", monospace;
  --sans: "Geist", Arial, sans-serif;
  --serif: "Bitter", Georgia, serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
::selection { color: #32404f; background: #fcffb1; }
::-moz-selection { color: #32404f; background: #fcffb1; }
html { scroll-behavior: smooth; }
html.reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: opacity, transform;
}
html.reveal-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: reveal-enter 720ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms) both;
  will-change: auto;
}
@keyframes reveal-enter {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero h1[data-reveal] { --reveal-delay: 120ms; }
.projects .project-card:nth-child(2) { --reveal-delay: 80ms; }
.projects .project-card:nth-child(3) { --reveal-delay: 160ms; }
.projects .project-card:nth-child(4) { --reveal-delay: 240ms; }
body { min-width: 320px; margin: 0; background: var(--paper); }
button, a { color: inherit; }
a { text-decoration: none; }
button { font: inherit; }
.mobile-menu-toggle, .mobile-menu { display: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 56px;
  padding: 16px var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 280ms ease;
  will-change: transform;
}
.availability, .location, .wordmark, .eyebrow, .project-info > p, .other-work-heading > h2, .site-footer, .resume-link {
  font-family: var(--mono);
  text-transform: uppercase;
}
.availability, .location { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.availability { display: flex; gap: 10px; }
.availability a { color: inherit; transition: color .2s ease, text-decoration-color .2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.availability a:hover, .availability a:focus-visible { color: #424a52; text-decoration-color: currentColor; }
.wordmark { justify-self: center; font-size: 16px; letter-spacing: .01em; }
.wordmark:focus-visible { outline: 2px solid #424a52; outline-offset: 4px; }
.location { justify-self: end; text-align: right; }

.hero { padding: 112px 24px; text-align: center; }
.eyebrow { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.eyebrow span { padding: 0 2px; }
.hero h1 {
  --hero-bitter-size: 70px;
  --hero-script-size: 120px;
  max-width: 954px;
  margin: 0 auto;
  color: var(--heading);
  font-size: 0;
  line-height: 0;
  letter-spacing: normal;
}
.bitter-run { font-family: var(--serif); font-size: var(--hero-bitter-size); font-weight: 400; line-height: 1.1; letter-spacing: normal; }
.script-letter { font-family: "Mea Culpa", cursive; font-size: var(--hero-script-size); font-weight: 400; font-style: normal; line-height: 0; letter-spacing: normal; }

.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 24px var(--page-gutter) 112px;
}
.project-card { min-width: 0; }
.project-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #e8eef1; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.project-info { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 0; margin-top: 16px; }
.project-info h2 { margin: 0; color: var(--heading); font: 400 18px/1.2 var(--serif); }
.project-card { display: block; color: inherit; cursor: pointer; }
.project-card:hover .project-image img, .project-card:focus-within .project-image img { opacity: .8; }
.project-card:hover .project-info h2, .project-card:focus-within .project-info h2 { color: #424a52; text-decoration: underline; text-underline-position: from-font; }
.project-info > p { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: nowrap; }

.other-work { padding: 112px 0; border-top: 1px solid var(--line); }
.other-work-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-gutter); margin-bottom: 32px; }
.other-work-heading > h2 { margin: 0; color: var(--heading); font: 400 18px/1.2 var(--serif); text-transform: none; }
.carousel-controls { display: flex; gap: 2px; }
.carousel-button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.carousel-button:focus-visible { outline: 2px solid #424a52; outline-offset: 2px; }
.carousel-button img { position: absolute; inset: 0; display: block; width: 40px; height: 40px; }
.carousel-button .icon-hover { display: none; }
.carousel-button:hover .icon-default, .carousel-button:focus-visible .icon-default { display: none; }
.carousel-button:hover .icon-hover, .carousel-button:focus-visible .icon-hover { display: block; }
.carousel-window { overflow: hidden; margin-left: var(--page-gutter); margin-right: 0; }
.carousel-track { display: flex; gap: 24px; width: max-content; min-width: 100%; overflow: visible; padding: 0 var(--carousel-tail) 0 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; }
.carousel-track.is-dragging { cursor: grabbing; }
.carousel-track img { display: block; flex: 0 0 min(507px, 74vw); width: min(507px, 74vw); aspect-ratio: 507 / 380; object-fit: cover; background: #e8eef1; pointer-events: none; -webkit-user-drag: none; }

.contact-about { display: flex; justify-content: space-between; align-items: center; padding: 112px var(--page-gutter); border-top: 1px solid var(--line); }
.contact-block { flex: 0 0 auto; }
.contact-block h2 { margin: 0 0 32px; color: var(--heading); font: 400 56px/1.1 var(--serif); letter-spacing: normal; }
.contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 53px; padding: 0 32px; border: 0; border-radius: 999px; font: 400 14px/1.5 var(--mono); text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.button-dark { color: white; background: var(--ink); transition: background .2s ease; }
.button-dark:hover, .button-dark:focus-visible { background: #424a52; }
.email-copy { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 16px; width: max-content; max-width: 100%; height: 53px; padding: 8px 8px 8px 24px; border: 1px solid var(--line); border-radius: 999px; color: inherit; background: var(--paper); font: inherit; cursor: pointer; transition: border-color .2s ease; }
.email-copy:hover, .email-copy:focus-visible { border-color: rgba(29, 37, 46, .2); }
.email-copy:focus-visible { outline: 2px solid #424a52; outline-offset: 3px; }
.email-address { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 400 14px/1.5 var(--mono); white-space: nowrap; }
.email-address img { flex: 0 0 16px; width: 16px; height: 16px; }
.button-copy { display: grid; flex: 0 0 auto; place-items: center; width: max-content; min-width: 83px; height: 37px; min-height: 37px; padding: 0 16px; border-radius: 999px; color: white; background: var(--ink); font: 400 14px/1.5 var(--mono); text-transform: uppercase; transition: background-color .32s cubic-bezier(.22, 1, .36, 1); }
.email-copy:hover .button-copy, .email-copy:focus-visible .button-copy { background: #424a52; }
.copy-label { transition: opacity .22s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.about-block { display: flex; flex: 0 1 min(684px, calc(50vw - var(--page-gutter) - 12px)); max-width: min(684px, calc(50vw - var(--page-gutter) - 12px)); flex-direction: column; gap: 16px; }
.about-block > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.inline-icon { display: inline-block; width: 16px; height: 16px; margin: 0 2px; vertical-align: -2px; }
.resume-link { display: inline-block; color: var(--ink); font-size: 14px; line-height: 1.5; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
.resume-link:hover, .resume-link:focus-visible { color: #424a52; text-decoration-color: currentColor; }

.site-footer { min-height: 56px; padding: 16px var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.site-footer p { margin: 0; }
.site-footer p span { color: var(--ink); }
.site-footer nav { display: flex; gap: 32px; }
.site-footer a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: #424a52; text-decoration-color: currentColor; }

@media (max-width: 900px) {
  :root { --page-gutter: 16px; --carousel-tail: 16px; }
  .hero { padding-top: 88px; padding-bottom: 88px; }
  .hero h1 { --hero-bitter-size: clamp(42px, 7vw, 62px); --hero-script-size: calc(var(--hero-bitter-size) * 1.7142857); }
  .projects { gap: 28px 16px; }
  .project-info { align-items: flex-start; flex-direction: column; gap: 4px; }
  .project-info h2 { font-size: 16px; }
  .contact-about { align-items: stretch; flex-direction: column; gap: 52px; padding: 80px var(--page-gutter); }
  .about-block { flex-basis: auto; max-width: 684px; }
  .contact-block h2 { font-size: 48px; }
}

@media (max-width: 560px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 56px; padding: 16px var(--page-gutter); }
  .availability, .location { display: none; }
  .wordmark { grid-column: 1; grid-row: 1; justify-self: start; font-size: 16px; }
  .mobile-menu-toggle { display: block; grid-column: 2; grid-row: 1; padding: 0; border: 0; color: var(--muted); background: transparent; font: 400 14px/1.5 var(--mono); text-transform: uppercase; cursor: pointer; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--ink);
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease, visibility 0s linear 380ms;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0s; }
  .mobile-menu-header { display: flex; flex: 0 0 56px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); text-transform: uppercase; }
  .mobile-menu-wordmark { color: var(--ink); font-size: 16px; line-height: 1.5; }
  .mobile-menu-close { padding: 0; border: 0; color: var(--muted); background: transparent; font: 400 14px/1.5 var(--mono); text-transform: uppercase; cursor: pointer; }
  .mobile-menu-wordmark:focus-visible, .mobile-menu-close:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-actions a:focus-visible, .mobile-menu-copy:focus-visible { outline: 2px solid #424a52; outline-offset: 3px; }
  .mobile-menu-content { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: space-between; padding: 16px; }
  .mobile-menu-meta { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font: 400 14px/1.5 var(--mono); text-transform: uppercase; }
  .mobile-menu-meta p { margin: 0; }
  .mobile-menu-actions { display: flex; flex-direction: column; gap: 16px; width: 100%; }
  .mobile-menu-link, .mobile-menu-copy, .mobile-menu-resume { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 16px 32px; border-radius: 999px; font: 400 14px/1.5 var(--mono); text-align: center; text-decoration: none; text-transform: uppercase; }
  .mobile-menu-link { color: white; }
  .mobile-menu-copy { gap: 8px; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; }
  .mobile-menu-copy img { flex: 0 0 16px; width: 16px; height: 16px; }
  .mobile-menu-resume { color: var(--ink); }
  body.mobile-menu-open { overflow: hidden; }
  .location { display: none; }
  .hero { padding: 40px 24px; }
  .eyebrow { font-size: 14px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { --hero-bitter-size: 26px; --hero-script-size: 42px; max-width: 100%; }
  .bitter-run { line-height: 1.2; }
  .desktop-break { display: none; }
  .projects { grid-template-columns: 1fr; gap: 32px; padding: 16px var(--page-gutter) 56px; }
  .project-card:first-child .project-image { aspect-ratio: 343 / 184; }
  .project-info { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
  .project-info h2 { font-size: 18px; }
  .project-info > p { font-size: 14px; }
  .other-work { padding: 56px 0; }
  .other-work-heading { padding: 0 var(--page-gutter); }
  .other-work-heading > h2 { font-size: 18px; }
  .carousel-controls { display: flex; }
  .carousel-button { width: 44px; height: 44px; }
  .carousel-window { width: calc(100% - 16px); margin-left: 16px; }
  .carousel-track { gap: 24px; padding-right: 24px; }
  .carousel-track img { flex-basis: min(319px, calc(100vw - 56px)); width: min(319px, calc(100vw - 56px)); aspect-ratio: 319 / 239; }
  .contact-about { align-items: stretch; flex-direction: column; gap: 48px; padding: 56px 16px; }
  .contact-block { width: 100%; }
  .contact-block h2 { margin-bottom: 32px; font-size: 32px; }
  .contact-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 16px; }
  .button-dark { align-self: stretch; width: 100%; }
  .email-copy { align-self: stretch; width: 100%; max-width: 100%; justify-content: space-between; gap: 8px; padding-left: 14px; }
  .button-copy { min-width: 0; padding-right: 12px; padding-left: 12px; font-size: 12px; }
  .email-address { min-width: 0; font-size: clamp(9px, 3vw, 12px); }
  .about-block { gap: 16px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 16px; padding: 16px; }
  .site-footer nav { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.reveal-enabled [data-reveal] { opacity: 1; transform: none; animation: none; }
  .site-header, .mobile-menu { transition: none; }
  .case-enter { animation: none; }
}

/* Shared case template */
.case-page { min-height: 50vh; }
@keyframes case-enter {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.case-enter { animation: case-enter 680ms cubic-bezier(.22, 1, .36, 1) both; }
.case-enter--sidebar { animation-delay: 0ms; }
.case-enter--intro { animation-delay: 70ms; }
.case-enter--hero { animation-delay: 140ms; }
.case-enter--meta { animation-delay: 210ms; }
.reading-progress { position: sticky; top: 0; z-index: 4; display: flex; width: 100%; height: 6px; }
.has-visible-site-header .reading-progress { top: var(--site-header-height); }
.reading-progress-fill { display: block; width: 0; height: 100%; background: var(--ink); transition: width 80ms linear; }
.case-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; padding-inline: var(--page-gutter); }
.case-sidebar { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 24px; padding: 80px 0; }
.has-visible-site-header .case-sidebar { top: calc(var(--site-header-height) + 24px); }
.case-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--muted); font: 400 14px/1.5 var(--mono); text-transform: uppercase; }
.case-back img { width: 20px; height: 20px; }
.case-nav { display: flex; flex-direction: column; gap: 10px; }
.case-nav a { color: var(--muted); font-size: 16px; line-height: 1.5; text-decoration-line: underline; text-decoration-color: transparent; text-underline-position: from-font; transition: color .2s ease, text-decoration-color .2s ease; }
.case-nav a.is-active { color: var(--ink); }
.case-nav a:hover, .case-nav a:focus-visible { color: #424a52; text-decoration-color: currentColor; }
.case-nav a:focus-visible, .case-back:focus-visible { outline: 2px solid #424a52; outline-offset: 3px; }
.case-main { min-width: 0; padding: 80px 24px 112px; }
.case-content { display: flex; width: min(802px, 100%); flex-direction: column; gap: 40px; }
.case-introduction { display: flex; flex-direction: column; gap: 24px; }
.case-eyebrow, .case-meta dt { margin: 0; color: var(--muted); font: 400 14px/1.5 var(--mono); text-transform: uppercase; }
.case-eyebrow span { padding: 0 2px; }
.case-introduction h1 { margin: 0; color: var(--heading); font: 400 56px/1.1 var(--serif); text-wrap: pretty; }
.case-hero-image { width: 100%; aspect-ratio: 802 / 451.125; background: #e8eef1; }
.case-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-meta { display: grid; grid-template-columns: 1fr 1fr .55fr 1.5fr; gap: 24px; padding: 0 0 24px; margin: 0; border-bottom: 1px solid var(--line); }
.case-meta > div { min-width: 0; }
.case-meta dd { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.case-sections { display: flex; flex-direction: column; gap: 40px; }
.case-section { scroll-margin-top: 96px; }
.case-section h2 { margin: 0 0 12px; color: var(--heading); font: 400 20px/1.3 var(--serif); }
.case-section p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.case-section p + p { margin-top: 12px; }
.case-gallery { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.case-gallery-row { display: grid; gap: 24px; }
.case-gallery-row.is-single { grid-template-columns: 1fr; }
.case-gallery-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-gallery-row img { display: block; width: 100%; background: #e8eef1; object-fit: cover; }
.case-gallery-row.is-single img { aspect-ratio: 802 / 450; }
.case-gallery-row.is-pair img { aspect-ratio: 389 / 450; }
.case-section .case-gallery-caption { margin: 0; color: #1d252e; font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.case-deliverables { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.case-deliverables li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.case-deliverables img { flex: 0 0 16px; width: 16px; height: 16px; }

.case-root--artemis .case-content { gap: 0; }
.case-root--artemis .case-main { padding-left: 0; }
.case-root--artemis .case-introduction { margin-bottom: 40px; }
.case-root--artemis .case-hero-image { margin-bottom: 32px; }
.case-root--artemis .case-meta { margin-bottom: 40px; }
.case-root--artemis .case-meta dt { color: var(--heading); font: 400 18px/1.2 var(--serif); text-transform: none; }
.case-root--artemis .case-meta dd { margin-top: 8px; font-size: 15px; }
.case-root--artemis .case-section h2 { margin-bottom: 8px; font-size: 18px; line-height: 1.2; }
.case-root--artemis .case-gallery { margin-top: 24px; }

@media (max-width: 900px) {
  .case-layout { display: block; padding-inline: 0; }
  .case-sidebar { position: sticky; top: 6px; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .has-visible-site-header .case-sidebar { top: calc(var(--site-header-height) + 6px); }
  .case-nav { flex-direction: row; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .case-nav::-webkit-scrollbar { display: none; }
  .case-nav a { font-size: 14px; }
  .case-main { padding: 48px 24px 80px; }
  .case-root--artemis .case-main { padding-left: 24px; }
  .case-content { margin: 0 auto; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }

  .case-root--artemis .case-sidebar { position: static; display: block; padding: 16px; border: 0; background: transparent; }
  .case-root--artemis .case-back { gap: 8px; font-size: 14px; }
  .case-root--artemis .case-back img { width: 20px; height: 20px; }
  .case-root--artemis .case-nav { display: none; }
  .case-root--artemis .case-main { padding: 16px 16px 56px; }
  .case-root--artemis .case-introduction h1 { font-size: 24px; line-height: 1.2; }
  .case-root--artemis .case-eyebrow { font-size: 14px; }
  .case-root--artemis .case-meta { grid-template-columns: 1fr; gap: 24px; }
  .case-root--artemis .case-gallery-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .case-root--artemis .case-gallery-row.is-pair img { aspect-ratio: 389 / 450; }
  .case-root--artemis .case-deliverables li { font-size: 16px; }
}

@media (max-width: 560px) {
  .case-sidebar { gap: 14px; padding: 10px 16px; }
  .case-back { font-size: 11px; gap: 4px; }
  .case-back img { width: 16px; height: 16px; }
  .case-nav { gap: 16px; }
  .case-nav a { font-size: 13px; }
  .case-main { padding: 40px 16px 64px; }
  .case-content { gap: 32px; }
  .case-section { scroll-margin-top: 112px; }
  .case-introduction { gap: 16px; }
  .case-eyebrow, .case-meta dt { font-size: 11px; }
  .case-introduction h1 { font-size: clamp(38px, 10vw, 48px); }
  .case-meta { gap: 16px; }
  .case-meta dd { font-size: 13px; }
  .case-sections { gap: 32px; }
  .case-section h2 { font-size: 19px; }
  .case-section p, .case-deliverables li { font-size: 15px; }
  .case-gallery { gap: 16px; margin-top: 24px; }
  .case-gallery-row { gap: 16px; }
  .case-gallery-row.is-pair { grid-template-columns: 1fr; }
  .case-gallery-row.is-pair img { aspect-ratio: 802 / 450; }
  .case-gallery--portrait-pairs .case-gallery-row.is-pair img { aspect-ratio: 389 / 450; }
}

/* Mobile layout from the retrabalho case Figma frame (4326:693). */
@media (max-width: 560px) {
  .case-root--retrabalho .case-sidebar {
    position: static;
    display: block;
    padding: 16px 16px 0;
    border: 0;
    background: transparent;
  }
  .case-root--retrabalho .case-back { font-size: 14px; gap: 8px; }
  .case-root--retrabalho .case-back img { width: 20px; height: 20px; }
  .case-root--retrabalho .case-nav { display: none; }
  .case-root--retrabalho .case-main { padding: 24px 16px 56px; }
  .case-root--retrabalho .case-content { gap: 32px; }
  .case-root--retrabalho .case-introduction { gap: 24px; }
  .case-root--retrabalho .case-eyebrow { font-size: 14px; line-height: 1.5; }
  .case-root--retrabalho .case-introduction h1 { font-size: 24px; line-height: 1.2; }
  .case-root--retrabalho .case-hero-image { aspect-ratio: 802 / 451.125; }
  .case-root--retrabalho .case-hero-image picture { display: block; width: 100%; height: 100%; }
  .case-root--retrabalho .case-meta {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
  }
  .case-root--retrabalho .case-meta dt {
    color: var(--heading);
    font: 400 18px/1.2 var(--serif);
    text-transform: none;
  }
  .case-root--retrabalho .case-meta dd { margin-top: 8px; font-size: 15px; }
  .case-root--retrabalho .case-section { scroll-margin-top: 112px; }
  .case-root--retrabalho .case-sections { gap: 32px; }
  .case-root--retrabalho .case-section h2 { margin-bottom: 8px; font-size: 18px; line-height: 1.2; }
  .case-root--retrabalho .case-section p,
  .case-root--retrabalho .case-deliverables li { font-size: 16px; line-height: 1.5; }
  .case-root--retrabalho .case-section p + p { margin-top: 12px; }
  .case-root--retrabalho .case-gallery { gap: 16px; margin-top: 24px; }
  .case-root--retrabalho .case-gallery-row { gap: 16px; }
  .case-root--retrabalho .case-gallery-row picture { display: block; min-width: 0; width: 100%; }
  .case-root--retrabalho .case-gallery-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-root--retrabalho .case-gallery-row.is-single img { aspect-ratio: 343 / 193; }
  .case-root--retrabalho .case-gallery-row.is-pair picture { aspect-ratio: 163.5 / 193.4; }
  .case-root--retrabalho .case-gallery-row.is-pair img { width: 100%; height: 100%; aspect-ratio: auto; }
  .case-root--retrabalho .case-gallery-row.is-single picture { display: block; width: 100%; }
}

/* Mobile layout from the onboarding case Figma frame (4372:464). */
@media (max-width: 560px) {
  .case-root--onboarding .case-sidebar {
    position: static;
    display: block;
    padding: 16px 16px 16px;
    border: 0;
    background: transparent;
  }
  .case-root--onboarding .case-back { gap: 8px; font-size: 14px; }
  .case-root--onboarding .case-back img { width: 20px; height: 20px; }
  .case-root--onboarding .case-nav { display: none; }
  .case-root--onboarding .case-main { padding: 16px 16px 56px; }
  .case-root--onboarding .case-content { width: 100%; gap: 0; margin: 0; }
  .case-root--onboarding .case-introduction { gap: 24px; margin-bottom: 40px; }
  .case-root--onboarding .case-eyebrow { font-size: 14px; line-height: 1.5; }
  .case-root--onboarding .case-introduction h1 { font-size: 24px; line-height: 1.2; }
  .case-root--onboarding .case-hero-image { aspect-ratio: 343 / 192.9375; margin-bottom: 32px; }
  .case-root--onboarding .case-meta {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
    margin: 0 0 40px;
  }
  .case-root--onboarding .case-meta dt {
    color: var(--heading);
    font: 400 18px/1.2 var(--serif);
    text-transform: none;
  }
  .case-root--onboarding .case-meta dd { margin-top: 8px; font-size: 15px; }
  .case-root--onboarding .case-sections { gap: 40px; }
  .case-root--onboarding .case-section { scroll-margin-top: 112px; }
  .case-root--onboarding .case-section h2 { margin-bottom: 8px; font-size: 18px; line-height: 1.2; }
  .case-root--onboarding .case-section p,
  .case-root--onboarding .case-deliverables li { font-size: 16px; line-height: 1.5; }
  .case-root--onboarding .case-section p + p { margin-top: 12px; }
  .case-root--onboarding .case-gallery { gap: 16px; margin-top: 40px; }
  .case-root--onboarding .case-gallery-row { gap: 16px; }
  .case-root--onboarding .case-gallery-row.is-single img { aspect-ratio: 343 / 192.9375; }
  .case-root--onboarding .case-gallery-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-root--onboarding .case-gallery-row.is-pair img { aspect-ratio: 163.5 / 218; }
}

/* Mobile layout from the Discola case Figma frame (4445:413). */
@media (max-width: 560px) {
  .case-root--discola .case-sidebar {
    position: static;
    display: block;
    padding: 16px 16px 0;
    border: 0;
    background: transparent;
  }
  .case-root--discola .case-back { font-size: 14px; gap: 8px; }
  .case-root--discola .case-back img { width: 20px; height: 20px; }
  .case-root--discola .case-nav { display: none; }
  .case-root--discola .case-main { padding: 16px 16px 56px; }
  .case-root--discola .case-content { gap: 32px; }
  .case-root--discola .case-introduction { gap: 24px; }
  .case-root--discola .case-eyebrow { font-size: 14px; line-height: 1.5; }
  .case-root--discola .case-introduction h1 { font-size: 24px; line-height: 1.1; }
  .case-root--discola .case-hero-image { aspect-ratio: 802 / 451.125; }
  .case-root--discola .case-meta {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
  }
  .case-root--discola .case-meta dt {
    color: var(--heading);
    font: 400 18px/1.2 var(--serif);
    text-transform: none;
  }
  .case-root--discola .case-meta dd { margin-top: 8px; font-size: 15px; }
  .case-root--discola .case-sections { gap: 32px; }
  .case-root--discola .case-section h2 { margin-bottom: 8px; font-size: 18px; line-height: 1.2; }
  .case-root--discola .case-section p { font-size: 16px; line-height: 1.5; }
  .case-root--discola .case-section p + p { margin-top: 12px; }
  .case-root--discola .case-gallery { gap: 16px; margin-top: 32px; }
  .case-root--discola .case-gallery-row { gap: 16px; }
  .case-root--discola .case-gallery--solution .case-gallery-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-root--discola .case-gallery--solution .case-gallery-row.is-pair img { aspect-ratio: 389 / 450; }
  .case-root--discola .case-gallery--solution .case-gallery-row.is-single img { aspect-ratio: 802 / 450; }
  .case-root--discola .case-gallery--portrait-grid { gap: 24px; }
  .case-root--discola .case-gallery--portrait-grid .case-gallery-row.is-pair { grid-template-columns: 1fr; }
  .case-root--discola .case-gallery--portrait-grid .case-gallery-row.is-pair img { aspect-ratio: 389 / 450; }
}