/* Ivory prints on the same plum surface as the hero. */
#projects {
  padding-block: clamp(80px, 8vw, 138px) clamp(104px, 10vw, 172px);
  color: var(--ivory);
  background: var(--plum);
}

#projects .projects-heading { margin-bottom: clamp(54px, 5vw, 88px); }
#projects .eyebrow { color: var(--champagne); }
#projects .heading-grid { grid-template-columns: 1.5fr 1fr; gap: clamp(44px, 7vw, 120px); }
#projects h2 { max-width: 820px; text-wrap: balance; }
#projects .section-intro { max-width: 360px; color: rgb(243 238 232 / 84%); }

#projects .project-table {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(60px, 5vw, 86px) clamp(28px, 3vw, 52px);
}

#projects .project-print {
  --print-tilt: -1.5deg;
  --print-drop: 0px;
  --print-padding: clamp(22px, 2vw, 34px);
  position: relative;
  min-width: 0;
  grid-column: span 4;
}
#projects .project-print:nth-child(1) { grid-column: span 7; --print-tilt: -2deg; }
#projects .project-print:nth-child(2) { grid-column: span 5; width: 96%; justify-self: end; --print-tilt: 2.3deg; --print-drop: 36px; }
#projects .project-print:nth-child(3) { --print-tilt: 1.4deg; --print-drop: 18px; }
#projects .project-print:nth-child(4) { width: 95%; justify-self: center; --print-tilt: -2deg; }
#projects .project-print:nth-child(5) { --print-tilt: 1.8deg; --print-drop: 24px; }
#projects .project-print:nth-child(6) { --print-tilt: -1.6deg; --print-drop: 8px; }
#projects .project-print:nth-child(7) { width: 97%; --print-tilt: 2.2deg; --print-drop: 24px; }
#projects .project-print:nth-child(8) { --print-tilt: -1.2deg; }
#projects .project-print:nth-child(9) { grid-column: span 6; width: 97%; --print-tilt: 1.2deg; --print-drop: 12px; }
#projects .project-print:nth-child(10) { grid-column: span 6; width: 96%; justify-self: end; --print-tilt: -1.8deg; --print-drop: 28px; }
#projects .project-print:is(:hover, :focus-within) { z-index: 3; }

#projects .project-print-sheet {
  color: var(--plum);
  background: var(--ivory);
  box-shadow: 0 2px 3px rgb(0 0 0 / 12%), 0 18px 32px rgb(0 0 0 / 22%);
  transform: translateY(var(--print-drop)) rotate(var(--print-tilt));
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
#projects .project-print-cover {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: var(--print-padding);
}
#projects .case-kicker { min-height: 34px; margin: 0; font-size: 12px; line-height: 1.45; letter-spacing: .025em; }
#projects h3 {
  flex: 1;
  margin-block: 18px 24px;
  font-family: Onest, Arial, sans-serif;
  font-size: clamp(22px, 1.7vw, 29px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.28;
  text-wrap: balance;
}
#projects .project-print-footer { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
#projects .project-print-number { font-family: Unbounded, Arial, sans-serif; font-size: 46px; font-weight: 700; letter-spacing: -.065em; line-height: 1; opacity: .2; }
#projects .details-action { min-width: 0; min-height: 44px; margin: 0; gap: 10px; font-size: 12px; }
#projects .details-plus { width: 24px; height: 24px; }
#projects .project-print:nth-child(-n+2) .project-print-cover { min-height: 340px; }
#projects .project-print:nth-child(-n+2) h3 { font-size: clamp(28px, 2.4vw, 40px); }
#projects .project-print:nth-child(-n+2) .project-print-number { font-size: 64px; }

#projects .case-body { max-width: none; padding: 0 var(--print-padding) var(--print-padding); font-size: 16px; }
#projects .case-body::before { content: ""; display: block; height: 1px; margin-bottom: 22px; background: var(--line-on-light); }
#projects .project-print-cover:focus-visible { outline-offset: -7px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #projects .project-print:is(:hover, :focus-within) .project-print-sheet:not([open]) {
    transform: translateY(calc(var(--print-drop) - 10px)) rotate(0deg) scale(1.025);
    box-shadow: 0 3px 6px rgb(0 0 0 / 12%), 0 30px 48px rgb(0 0 0 / 34%);
  }
}

/* An open print stays straight and still while its text is read. */
#projects .project-print-sheet[open] { transform: none; transition: none; }

@media (max-width: 1200px) {
  #projects .heading-grid { grid-template-columns: 1fr; gap: 28px; }
  #projects h2 { max-width: 780px; }
  #projects .section-intro { max-width: 620px; }
  #projects .project-table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 36px; }
  #projects .project-print:nth-child(n) { grid-column: span 1; width: 100%; justify-self: stretch; --print-tilt: -1deg; --print-drop: 0px; }
  #projects .project-print:nth-child(even) { --print-tilt: 1.2deg; --print-drop: 18px; }
  #projects .project-print:nth-child(-n+2) h3 { font-size: 28px; }
  #projects .project-print:nth-child(-n+2) .project-print-number { font-size: 46px; }
  #projects .project-print:nth-child(-n+2) .project-print-cover { min-height: 300px; }
}

@media (max-width: 767px) {
  #projects { padding-block: 70px 80px; }
  #projects .projects-heading { margin-bottom: 38px; }
  #projects .project-table { grid-template-columns: 1fr; gap: 24px; }
  #projects .project-print:nth-child(n) { --print-tilt: 0deg; --print-drop: 0px; --print-padding: 22px; }
  #projects .project-print-cover,
  #projects .project-print:nth-child(-n+2) .project-print-cover { min-height: 230px; }
  #projects h3, #projects .project-print:nth-child(-n+2) h3 { font-size: 24px; line-height: 1.3; }
  #projects .project-print-number,
  #projects .project-print:nth-child(-n+2) .project-print-number { font-size: 44px; }
  #projects .case-body { font-size: 16px; }
}

@media (max-width: 374px) {
  #projects .project-print:nth-child(n) { --print-padding: 18px; }
  #projects h3, #projects .project-print:nth-child(-n+2) h3 { font-size: 22px; }
  #projects .details-action { gap: 6px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #projects .project-print-sheet { transform: none; transition: none; }
}