.projects {
  --stack-top: 112px;
  padding: 80px 5% 100px;
  background: #f4f2ee;
  color: #0c0d0f;
  color-scheme: light;
  scroll-margin-top: 24px;
}
.projects-inner { max-width: 1720px; margin-inline: auto; }
.projects-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; margin-bottom: 52px; }
.projects-heading h2 { margin: 0; font-size: clamp(54px, 5.2vw, 100px); font-weight: 600; line-height: 1.04; letter-spacing: -.065em; }
.projects-count { display: inline-block; vertical-align: top; margin: 8px 0 0 16px; color: #767a80; font-size: 16px; font-weight: 450; line-height: 1.4; letter-spacing: -.02em; }
.projects-heading p { flex: 0 0 260px; margin: 8px 0 0; text-align: right; font-size: 16px; line-height: 1.5; }
.project-stack { position: relative; }
.project-card { position: sticky; top: var(--stack-top); padding-bottom: 24px; }
.project-card:last-child { padding-bottom: 0; }
.project-surface {
  position: relative;
  display: grid;
  grid-template-columns: 41% 59%;
  min-height: clamp(680px, calc(100svh - 160px), 820px);
  padding: 10px;
  border: 1px solid #e7e5e1;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  transform-origin: center top;
}
.project-surface::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #000; opacity: var(--stack-shade, 0); border-radius: inherit; }
.project-info { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; padding: 28px 32px 24px 24px; }
.project-meta { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: #66696d; font-variant-numeric: tabular-nums; }
.project-copy h3 { margin: 0 0 16px; font-size: clamp(36px, 3.35vw, 64px); font-weight: 600; line-height: 1.04; letter-spacing: -.06em; text-wrap: balance; }
.project-category { margin: 0; color: #66696d; font-size: 13px; line-height: 1.5; }
.project-description { max-width: 500px; margin: 24px 0 0; color: #2a2927; font-size: 16px; line-height: 1.55; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
.project-tags li { border: 1px solid #d1d1d1; border-radius: 99px; padding: 7px 12px; font-size: 12px; line-height: 1.2; }
.project-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 24px; border-top: 1px solid #e7e5e1; }
.project-outcome { min-width: 0; }
.project-outcome strong { display: block; color: #e0171f; font-size: clamp(22px, 1.7vw, 32px); letter-spacing: -.05em; font-weight: 550; line-height: 1.08; }
.project-outcome > span { display: block; margin-top: 8px; font-size: 12px; color: #66696d; line-height: 1.4; }
.project-action { flex: none; text-align: center; }
.project-action small { display: block; margin-top: 8px; color: #66696d; font-size: 10px; }
.project-cta { --red: #111; font-size: 12px; }
.project-cta:disabled { pointer-events: none; }
.project-visual { position: relative; min-width: 0; border-radius: 12px; overflow: hidden; background: #e6e3de; }
.project-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.project-card-dark { color: #fafafa; }
.project-card-dark .project-surface { background: #111; border-color: #222; }
.project-card-dark .project-description { color: #ffffffb8; }
.project-card-dark .project-meta, .project-card-dark .project-category { color: #b1b2b5; }
.project-card-dark .project-footer { border-color: #363638; }
.project-card-dark .project-outcome strong { color: #fafafa; }
.project-card-dark .project-outcome > span, .project-card-dark .project-action small { color: #b1b2b5; }
.project-card-dark .project-tags li { border-color: #515154; }
.project-card-dark .project-cta { --red: #e0171f; }
.project-card-dark .project-visual { background: #27282a; color: #c0c0c2; }
.project-card-warm .project-surface { background: #ebe7e1; }
.project-card-warm .project-visual { background: #d9d3ca; }
.project-card-warm .project-footer { border-color: #d3cec7; }
@media(max-width:1100px) {
  .projects { padding-inline: 4%; }
  .projects-heading { gap: 24px; }
  .projects-heading p { flex-basis: 200px; }
  .project-info { padding: 24px 24px 20px 18px; }
  .project-footer { align-items: flex-start; flex-direction: column; }
}
@media(max-width:900px), (max-height:849px) {
  .project-card { position: relative; top: auto; }
  .project-surface { transform: none !important; --stack-shade: 0 !important; }
}
@media(max-width:900px) {
  .projects { padding: 64px 4% 64px; scroll-margin-top: 16px; }
  .projects-heading { flex-direction: column; gap: 20px; margin-bottom: 32px; }
  .projects-heading h2 { max-width: 560px; font-size: clamp(48px, 9vw, 68px); }
  .projects-heading p { flex-basis: auto; text-align: left; font-size: 16px; margin: 0; }
  .projects-count { font-size: 13px; margin: 5px 0 0 10px; }
  .project-surface { min-height: 0; grid-template-columns: 1fr; border-radius: 18px; padding: 8px; }
  .project-info { padding: 24px 12px 20px; gap: 28px; }
  .project-copy h3 { font-size: clamp(34px, 8.6vw, 52px); text-wrap: initial; }
  .project-description { margin-top: 20px; }
  .project-footer { flex-direction: row; align-items: center; gap: 12px; padding-top: 20px; }
  .project-outcome strong { font-size: 25px; }
  .project-cta { font-size: 11px; padding-left: 16px; }
  .project-visual { order: -1; aspect-ratio: 4 / 3; }
  .project-tags { margin-top: 22px; }
}
@media(max-width:360px) { .project-footer { flex-direction: column; align-items: flex-start; } .project-action { text-align: left; } }
@media(prefers-reduced-motion:reduce) {
  .project-card { position: relative; top: auto; }
  .project-surface { transform: none !important; --stack-shade: 0 !important; }
}