:root {
  --paper: #faf9f4;
  --ink: #0b0b0b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

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

a:focus-visible {
  outline: 3px solid #8bd735;
  outline-offset: 5px;
}

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: min(calc(100% - 96px), 1184px);
  margin: 27px auto 0;
}

.logo {
  display: block;
  width: 61px;
  height: 58px;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
}

nav {
  display: flex;
  gap: 48px;
  padding-top: 8px;
  font-size: 19px;
}

nav a {
  position: relative;
}

nav a::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

nav a:hover::after,
nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

nav a.active {
  z-index: 0;
  font-weight: 700;
}

nav a.active::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 102px;
  height: 60px;
  border-radius: 999px;
  background: #bdff70;
  content: "";
  transform: translate(-50%, -50%);
}

nav a.active::after {
  display: none;
}

.hero {
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  width: min(calc(100% - 96px), 1184px);
  margin: 194px auto 0;
}

.portrait {
  display: block;
  overflow: hidden;
  width: 265px;
  height: 354px;
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro {
  padding-bottom: 2px;
}

h1 {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.25;
}

.roles {
  margin: 0 0 28px;
  font-size: 26px;
  line-height: 1.35;
}

.bio {
  max-width: 875px;
  margin: 0;
  line-height: 2.06;
}

.bird-line {
  width: 100%;
  height: 140px;
  margin-top: 88px;
  overflow: hidden;
}

.bird-line img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.case-content ul,
.case-content ol,
.ptai-content ul,
.ptai-content ol,
.design-content section > ul,
.design-content section > ol {
  padding-left: 1.45em;
}

.case-content li::marker,
.ptai-content li::marker,
.design-content li::marker {
  color: #75ba24;
  font-weight: 700;
}

.case-content li + li,
.ptai-content li + li,
.design-content section > ul > li + li,
.design-content section > ol > li + li {
  margin-top: 0.35em;
}

.case-content ul li::marker,
.ptai-content ul li::marker,
.design-content ul li::marker {
  font-size: 1.15em;
}

.about-page nav {
  padding-top: 0;
  transform: translateY(8px);
}

.about-content {
  width: calc(100% - 108px);
  max-width: 1172px;
  margin: 91px auto 120px;
}

.about-content h1,
.about-content h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
}

.about-copy {
  font-size: 17px;
  line-height: 2.06;
}

.about-copy p {
  margin: 0;
}

.bring-copy {
  margin-top: 54px;
}

.story {
  margin-top: 54px;
}

.technical-expertise {
  margin-top: 54px;
}

.technical-expertise ul {
  margin: 45px 0 0;
  padding-left: 1.35em;
  font-size: 17px;
  line-height: 2.06;
}

.technical-expertise li::marker {
  color: #75ba24;
}

.story-copy {
  margin-top: 55px;
}

.work-page nav {
  padding-top: 0;
  transform: translateY(8px);
}

.work-content {
  width: min(calc(100% - 90px), 1190px);
  margin: 91px auto 80px;
}

.work-content > h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 13px;
  margin-top: 44px;
}

.project-card {
  display: grid;
  grid-template-rows: 104px 1fr auto;
  row-gap: 8px;
  min-width: 0;
  height: 500px;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.project-card h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.project-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
}

.project-card {
  overflow: hidden;
  box-shadow: 0 4px 14px rgb(24 32 28 / 7%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.project-card img {
  filter: grayscale(1);
  transform-origin: center;
  transition: filter 240ms ease, transform 240ms ease;
}

.project-card:hover img,
.project-card:focus-within img,
.project-link:focus-visible img {
  filter: grayscale(0);
  transform: scale(1.045);
}

.project-card:hover,
.project-card:focus-within,
.project-link:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 14%);
}

.project-link:focus-visible {
  outline: 3px solid #75ba24;
  outline-offset: 4px;
}

.card-lavender {
  border-color: #dac9f5;
  background: linear-gradient(145deg, #f8f3ff 0%, #eadfff 100%);
}

.card-blue {
  border-color: #b9e4e8;
  background: linear-gradient(145deg, #effdff 0%, #d8f3f6 100%);
}

.card-peach {
  border-color: #f1cdbf;
  background: linear-gradient(145deg, #fff4ee 0%, #ffded1 100%);
}

.card-green {
  border-color: #c5e5c8;
  background: linear-gradient(145deg, #f3fff4 0%, #ddf5df 100%);
}

.card-pink {
  border-color: #ebc8e3;
  background: linear-gradient(145deg, #fff4fd 0%, #f8dff2 100%);
}

.card-slate {
  border-color: #a9c9ca;
  background: linear-gradient(145deg, #e8f3f3 0%, #bdd6d7 100%);
}

.compact-title {
  display: none;
}

.case-content {
  width: min(calc(100% - 96px), 1184px);
  margin: 132px auto 120px;
  font-size: 17px;
  line-height: 2.06;
}

.back-to-work {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #bdff70;
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.back-to-work span {
  font-size: 22px;
  transition: transform 180ms ease;
}

.back-to-work:hover span,
.back-to-work:focus-visible span {
  transform: translateX(-4px);
}

.back-to-work:hover {
  background: #aef15f;
  box-shadow: 0 6px 16px rgb(77 120 28 / 18%);
}

.case-hero h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
}

.case-hero p {
  margin: 12px 0 0;
  font-size: 26px;
  line-height: 1.35;
}

.case-content section {
  margin-top: 69px;
}

.case-content h2 {
  margin: 0 0 2px;
  font-size: 28px;
  line-height: 1.35;
}

.case-content p {
  margin: 0;
}

.case-content .impact {
  margin-top: 32px;
}

.method-list {
  margin: 0;
  padding-left: 24px;
}

.method-list ul {
  padding-left: 24px;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 9px;
}

.chart-grid picture,
.chart-grid img,
.wireframe-image {
  display: block;
  width: 100%;
}

.wireframe-image {
  margin-top: 9px;
}

.case-content .conclusion {
  margin-top: 49px;
}

.ptai-content {
  width: min(calc(100% - 76px), 1204px);
  margin: 128px auto 120px;
  font-size: 15px;
  line-height: 1.55;
}

.ptai-hero h1,
.ptai-content h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
}

.ptai-hero p {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.ptai-content section {
  margin-top: 35px;
}

.ptai-content p {
  margin: 0 0 16px;
}

.ptai-content ul {
  margin: 6px 0 0;
  padding-left: 28px;
}

.ptai-content li + li {
  margin-top: 5px;
}

.objective-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 50px;
  margin-top: 8px;
}

.wide-art,
.ptai-content picture,
.ptai-content picture img,
.ptai-content > section > img,
.design-stack img,
.persona-stack img,
.feedback-pair img,
.feedback-wide img {
  display: block;
  width: 100%;
}

.feedback-pair,
.gap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.feedback-pair > div p {
  min-height: 44px;
}

.center-title {
  text-align: center;
}

.gap-grid,
.persona-stack,
.design-stack,
.feedback-wide {
  margin-top: 14px;
}

.persona-stack,
.design-stack {
  display: grid;
  gap: 16px;
}

.design-content {
  width: min(calc(100% - 96px), 1184px);
  margin: 132px auto 120px;
  font-size: 17px;
  line-height: 2.06;
}

.design-hero h1,
.design-content h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.35;
}

.design-hero p {
  margin: 12px 0 0;
  font-size: 26px;
  line-height: 1.4;
}

.design-content section {
  margin-top: 55px;
}

.design-content p,
.design-content ul,
.design-content ol {
  margin-top: 4px;
  margin-bottom: 0;
}

.design-content ul,
.design-content ol {
  padding-left: 24px;
}

.approach-list > li > p {
  margin-left: 0;
}

.survey-section > h2 {
  text-align: center;
}

.survey-section > p {
  line-height: 1.2;
}

.survey-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.65fr;
  grid-template-areas:
    "total feedback guide opportunities"
    "compat satisfaction guide opportunities"
    "compat helpful frequency opportunities"
    "versions ease frequency opportunities"
    "versions saved benefits benefits";
  gap: 14px;
  margin-top: 14px;
  line-height: 1.15;
}

.metric-card {
  padding: 20px;
  background: #f4f4f4;
}

.metric-card h3,
.metric-card p {
  margin: 0;
}

.metric-card h3 {
  font-size: 21px;
  font-weight: 400;
}

.metric-card > strong {
  display: block;
  margin-top: 10px;
  font-size: 42px;
}

.total { grid-area: total; display:flex; flex-direction:column; justify-content:center; text-align:center; background:#c6e9b9; font-size:24px; }
.feedback-label { grid-area: feedback; background:#b9e4e9; }
.compatibility { grid-area: compat; }
.versions { grid-area: versions; }
.satisfaction { grid-area: satisfaction; }
.helpful { grid-area: helpful; }
.ease { grid-area: ease; }
.saved { grid-area: saved; }
.guide { grid-area: guide; }
.frequency { grid-area: frequency; }
.opportunities { grid-area: opportunities; background:#f2fae9; }
.benefits { grid-area: benefits; }
.satisfaction, .helpful, .ease, .saved { display:flex; flex-direction:column; justify-content:center; text-align:center; background:#b9e4e9; font-size:19px; }
.saved small { margin-top:28px; font-size:17px; }

.bar-chart,
.two-bars {
  display: flex;
  align-items: flex-end;
  height: 190px;
  margin-top: 18px;
}

.bar-chart i,
.two-bars i {
  position: relative;
  display: flex;
  width: 25%;
  height: var(--h);
  align-items: flex-end;
  justify-content: center;
  background: #afe0e6;
  font-style: normal;
}

.bar-chart i:nth-child(2), .two-bars i:nth-child(2) { background:#b8c0ea; }
.bar-chart i:nth-child(3) { background:#c6e9b9; }
.bar-chart i:nth-child(4) { background:#f3c9b6; }
.bar-chart small, .two-bars small { position:absolute; top:100%; margin-top:6px; }

.version-line {
  display: flex;
  justify-content: space-between;
  margin-top: 42px;
  border-top: 2px dotted #b8c0ea;
  transform: rotate(22deg);
}

.version-line span { transform: rotate(-22deg); }
.two-bars { height:150px; justify-content:center; }
.two-bars i { width:34%; height:72%; }
.opportunities li + li { margin-top:20px; }
.tag-list { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:14px; }
.tag-list span { padding:10px 12px; border-radius:8px; background:#b8c0ea; font-weight:700; }

.case-client {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
}

.process-flow,
.testing-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px !important;
  padding: 0 !important;
  list-style: none;
}

.process-flow li,
.testing-flow li,
.persona-summary article,
.result-grid article {
  padding: 22px;
  border-radius: 8px;
  background: #eefbfb;
}

.process-flow strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}

.process-flow span {
  display: block;
  line-height: 1.5;
}

.persona-summary,
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.persona-summary h3 {
  margin: 0;
  font-size: 20px;
}

.testing-flow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.testing-flow li {
  padding: 14px 10px;
  border: 2px solid #bdff70;
  background: transparent;
  text-align: center;
}

.result-grid article {
  background: #f2fae9;
}

.result-grid strong {
  color: #1e641f;
  font-size: 38px;
}

.case-facts {
  display: grid;
  grid-template-columns: 0.8fr 2fr 0.8fr;
  gap: 14px;
  margin-top: 24px;
}

.case-facts article {
  padding: 20px;
  border-radius: 8px;
  background: #effff1;
}

.case-facts strong,
.case-facts span {
  display: block;
}

.case-facts strong {
  margin-bottom: 5px;
}

.workshop-content h3 {
  margin: 22px 0 2px;
  font-size: 20px;
}

.case-study-image {
  display: block;
  width: 100%;
  margin-top: 24px;
  border-radius: 8px;
}

.workshop-gallery {
  columns: 3;
  column-gap: 18px;
  margin-top: 24px;
}

.workshop-gallery img {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  border-radius: 6px;
  box-shadow: 0 5px 18px rgb(0 0 0 / 10%);
  break-inside: avoid;
}

.tulane-design img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .site-header {
    width: calc(100% - 96px);
  }

  nav {
    gap: 48px;
  }

  .hero {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: calc(100% - 96px);
    margin-top: 65px;
  }

  .portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 426;
  }

  .intro {
    padding-top: 10px;
  }

  h1 {
    margin-bottom: 5px;
    font-size: 29px;
  }

  .roles {
    margin-bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
  }

  .bio {
    font-size: 17px;
    line-height: 2.06;
  }

  .bird-line {
    margin-top: 135px;
  }

  .about-content {
    width: calc(100% - 96px);
    margin-top: 67px;
  }

  .bring-copy {
    margin-top: 55px;
  }

  .story {
    margin-top: 55px;
  }

  .story-copy {
    margin-top: 56px;
  }

  .work-content {
    width: auto;
    margin: 67px 0 60px;
  }

  .work-content > h1 {
    margin-left: 48px;
  }

  .project-grid {
    display: flex;
    margin-top: 56px;
    flex-direction: column;
    gap: 16px;
  }

  .project-card {
    display: block;
    width: calc(100% - 60px);
    height: auto;
    margin: 0 auto;
    padding: 24px;
  }

  .project-card h2 {
    font-size: 28px;
  }

  .project-card p {
    margin-top: 14px;
    line-height: 1.2;
  }

  .project-card img {
    margin-top: 15px;
  }

  .desktop-title {
    display: none;
  }

  .compact-title {
    display: inline;
  }

  .case-content {
    width: calc(100% - 92px);
    margin-top: 67px;
  }

  .case-hero h1 {
    font-size: 25px;
  }

  .case-hero p {
    max-width: 690px;
    font-size: 26px;
    line-height: 2;
  }

  .case-content section {
    margin-top: 25px;
  }

  .case-content h2 {
    font-size: 28px;
  }

  .case-content .impact {
    margin-top: 31px;
  }

  .chart-grid {
    display: flex;
    flex-direction: column;
    gap: 43px;
  }

  .chart-grid picture:nth-child(2) { order: 1; }
  .chart-grid picture:nth-child(1) { order: 2; }
  .chart-grid picture:nth-child(3) { order: 3; }

  .case-content .conclusion {
    margin-top: 82px;
  }

  .ptai-content {
    width: calc(100% - 96px);
    margin-top: 67px;
    font-size: 15px;
  }

  .ptai-hero h1,
  .ptai-content h2 {
    font-size: 22px;
  }

  .ptai-hero p {
    font-size: 19px;
  }

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

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

  .design-content {
    width: calc(100% - 96px);
    margin-top: 67px;
  }

  .design-hero h1,
  .design-content h2 {
    font-size: 25px;
  }

  .design-hero p {
    font-size: 26px;
    line-height: 2;
  }

  .survey-dashboard {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "total compat versions"
      "feedback satisfaction helpful"
      "ease saved saved"
      "guide opportunities opportunities"
      "frequency opportunities opportunities"
      "benefits benefits benefits";
  }

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

  .testing-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .workshop-gallery {
    columns: 2;
  }
}

@media (max-width: 650px) {
  .site-header {
    display: block;
    width: auto;
    margin: 27px 0 0 36px;
  }

  nav {
    width: calc(100vw - 72px);
    justify-content: space-between;
    gap: 0;
    padding-top: 40px;
    font-size: 19px;
  }

  .hero {
    display: flex;
    width: auto;
    margin: 27px 32px 0 36px;
    flex-direction: column;
    gap: 34px;
  }

  .portrait {
    width: 100%;
    max-width: 307px;
    aspect-ratio: 307 / 410;
  }

  .intro {
    padding: 0;
  }

  h1 {
    margin-bottom: 8px;
    font-size: 29px;
  }

  .roles {
    margin-bottom: 31px;
    font-size: 17px;
    line-height: 2.05;
    white-space: normal;
  }

  .bio {
    font-size: 17px;
    line-height: 2.06;
  }

  .bird-line {
    display: none;
  }

  .about-page nav {
    padding-top: 40px;
    transform: none;
  }

  .about-content {
    width: auto;
    margin: 85px 36px 80px;
  }

  .about-content h1,
  .about-content h2 {
    font-size: 29px;
  }

  .bring-copy {
    margin-top: 51px;
  }

  .story {
    margin-top: 54px;
  }

  .story-copy {
    margin-top: 56px;
  }

  .work-page nav {
    padding-top: 40px;
    transform: none;
  }

  .work-content {
    margin-top: 85px;
  }

  .work-content > h1 {
    width: calc(100% - 48px);
    margin-left: 24px;
    font-size: 29px;
    line-height: 1.55;
  }

  .project-grid {
    margin-top: 20px;
    gap: 16px;
  }

  .project-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 0;
    width: calc(100% - 48px);
    height: auto;
    min-height: 484px;
    padding: 24px;
  }

  .project-card h2 {
    margin-bottom: 22px;
    font-size: 28px;
    line-height: 1.28;
  }

  .project-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.1;
  }

  .project-card img {
    margin: 0;
  }

  .case-content {
    width: auto;
    margin: 31px 60px 70px;
    font-size: 17px;
    line-height: 1.58;
  }

  .case-hero h1 {
    font-size: 21px;
    line-height: 1.9;
  }

  .back-to-work {
    margin-bottom: 20px;
    font-size: 15px;
  }

  .case-hero p {
    margin-top: 5px;
    font-size: 21px;
    line-height: 1.9;
  }

  .case-content section {
    margin-top: 38px;
  }

  .case-content h2 {
    margin-bottom: 3px;
    font-size: 22px;
  }

  .case-content .impact {
    margin-top: 34px;
  }

  .method-list,
  .method-list ul {
    padding-left: 18px;
  }

  .method-list li + li {
    margin-top: 7px;
  }

  .chart-grid {
    gap: 8px;
    margin-top: 18px;
  }

  .chart-grid picture:nth-child(1) { order: 1; }
  .chart-grid picture:nth-child(3) { order: 2; }
  .chart-grid picture:nth-child(2) { order: 3; }

  .wireframe-image {
    margin-top: 9px;
  }

  .case-content .conclusion {
    margin-top: 45px;
  }

  .ptai-content {
    width: auto;
    margin: 31px 20px 80px;
    font-size: 15px;
    line-height: 1.55;
  }

  .ptai-content .back-to-work {
    margin-bottom: 24px;
  }

  .ptai-hero h1,
  .ptai-content h2 {
    font-size: 20px;
  }

  .ptai-hero p {
    margin-top: 10px;
    font-size: 18px;
    line-height: 2;
  }

  .ptai-content section {
    margin-top: 30px;
  }

  .ptai-content ul {
    padding-left: 20px;
  }

  .objective-grid {
    gap: 26px;
  }

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

  .feedback-pair {
    gap: 28px;
  }

  .feedback-pair > div p {
    min-height: 0;
  }

  .center-title {
    text-align: left;
  }

  .design-content {
    width: auto;
    margin: 31px 43px 80px;
    font-size: 17px;
    line-height: 2.05;
  }

  .design-content .back-to-work {
    margin-bottom: 24px;
  }

  .design-hero h1,
  .design-content h2 {
    font-size: 20px;
  }

  .design-hero p {
    font-size: 20px;
    line-height: 2;
  }

  .design-content section {
    margin-top: 45px;
  }

  .survey-section > h2 {
    text-align: left;
    font-size: 26px;
  }

  .survey-section > p {
    font-size: 19px;
    line-height: 1.1;
  }

  .survey-dashboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .metric-card {
    min-height: 180px;
  }

  .feedback-label {
    min-height: 70px;
    text-align: center;
  }

  .saved {
    min-height: 260px;
  }

  .opportunities {
    min-height: 0;
  }

  .process-flow,
  .testing-flow,
  .persona-summary,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .process-flow li,
  .persona-summary article,
  .result-grid article {
    padding: 18px;
  }

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

  .workshop-gallery {
    columns: 1;
  }

  .case-facts article {
    padding: 16px;
  }
}

@media (max-width: 370px) {
  .site-header,
  .hero {
    margin-left: 24px;
  }

  .site-header {
    margin-right: 24px;
  }

  nav {
    width: 100%;
  }

  .hero {
    margin-right: 24px;
  }

  .work-content > h1,
  .project-card {
    width: calc(100% - 48px);
    margin-right: 24px;
    margin-left: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  nav a::after {
    transition: none;
  }

  .project-card {
    transition: none;
  }

  .project-card img {
    transition: none;
  }

  .back-to-work span {
    transition: none;
  }

  .back-to-work {
    transition: none;
  }
}