/* ==========================================================================
   Project pages: one board per project, same tokens as the homepage
   ========================================================================== */

.case { display: block; padding: 0 var(--m); }

/* ---------- head: the name, one line, the spec table ---------- */
.case__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: end;
  padding-top: clamp(120px, 15vh, 168px);
}
.case__title { grid-column: 1 / span 8; }
.case__name {
  font-size: clamp(2.75rem, 1rem + 5.4vw, 6.5rem);
  line-height: 0.92; letter-spacing: -0.05em;
}
.case__name--long { font-size: clamp(2rem, 0.6rem + 4.6vw, 5rem); }
.case__line {
  margin-top: 28px; max-width: 30ch;
  font-size: var(--step-lead); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
.spec {
  grid-column: 9 / span 4; align-self: end;
  width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow: hidden;
}
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 16px; }
.spec th { width: 40%; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.spec td { font-weight: 600; }
.spec tr + tr th, .spec tr + tr td { border-top: 1px solid #ecebe6; }
.spec strong { font-weight: 800; color: var(--blue-ink); }
.spec a { text-underline-offset: 4px; }

/* ---------- the big picture ---------- */
.case__hero { margin-top: clamp(56px, 6vw, 96px); }
.case__hero .frame__body { background: #d9d9d4; }
.case__hero img { width: 100%; height: auto; }

/* ---------- the brief, with what it was built on ---------- */
.case__brief {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; margin-top: var(--gap-section);
}
.case__copy { grid-column: 1 / span 7; }
.case__copy h2 { margin-bottom: 32px; }
.case__copy p { max-width: 60ch; font-size: var(--step-body); }
.case__copy p + p { margin-top: 18px; }
.case__stack { grid-column: 9 / span 4; margin-top: 12px; }
.case__stack h3 { margin-bottom: 16px; }
.case__role { margin-top: 36px; padding: 22px; font-size: var(--step-body); line-height: 1.4; transform: rotate(var(--r)); }
.case__role strong { display: block; margin-bottom: 6px; font-weight: 800; }

/* ---------- what I did: the dark shape ---------- */
.case__did { margin-top: var(--gap-section); }
.did {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(32px, 5vw, 80px); border-radius: var(--radius);
  background: var(--ink); color: #fff;
}
.did h2 { grid-column: 1 / span 4; }
.did__list { grid-column: 5 / span 8; display: grid; gap: 18px; }
.did__list li { position: relative; padding-left: 32px; font-size: var(--step-body); }
.did__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 14px; border-radius: 50%; background: var(--green); }

/* ---------- the impact: four figures on a white panel ---------- */
.case__impact { margin-top: var(--gap-section); }
.case__impact h2 { margin-bottom: clamp(32px, 4vw, 48px); }
.impact {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  padding: clamp(28px, 4vw, 56px); border-radius: 16px; background: var(--paper);
}
.impact li { display: flex; flex-direction: column; gap: 10px; }
.impact__n { font-size: var(--step-head); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; color: var(--ink); }
.impact li:nth-child(4n + 1) .impact__n { color: var(--blue-ink); }
.impact li:nth-child(4n + 3) .impact__n { color: #c2185b; }
.impact__l { max-width: 24ch; font-size: var(--step-body); line-height: 1.4; }

/* ---------- the call I made: one decision, on a sticky ---------- */
.case__call { margin-top: var(--gap-section); }
.call {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(28px, 4.5vw, 64px); transform: rotate(-0.6deg);
}
.call h2 { grid-column: 1 / span 4; }
.call__body { grid-column: 6 / span 7; }
.call__body h3 { margin-bottom: 14px; }
.call__body p { max-width: 58ch; font-size: var(--step-body); }
.js .call[data-in] { transform: translateY(24px) rotate(-0.6deg); }
.js .call[data-in].is-in { transform: rotate(-0.6deg); }

@media (max-width: 1080px) {
  .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .call h2, .call__body { grid-column: 1 / -1; }
  .call h2 { margin-bottom: 24px; }
}
@media (max-width: 720px) {
  .impact { padding: 24px 20px; gap: 28px 16px; }
  .call { padding: 26px 22px; transform: none; }
  .js .call[data-in], .js .call[data-in].is-in { transform: none; }
}

/* ---------- what shipped: stickies on the board ---------- */
.case__shipped { margin-top: var(--gap-section); }
.case__shipped h2 { margin-bottom: clamp(36px, 4vw, 56px); }
.shipped { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; }
.shipped li {
  grid-column: span 4; min-height: 150px; padding: 22px;
  font-size: var(--step-body); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  transform: rotate(var(--r));
}
.shipped li:nth-child(3n + 2) { margin-top: 40px; }
.shipped li:nth-child(3n) { margin-top: 12px; }
.js .shipped li[data-in] { transform: translateY(24px) rotate(var(--r)); }
.js .shipped li[data-in].is-in { transform: rotate(var(--r)); }

/* ---------- on screen: frames of the work ---------- */
.case__gallery { margin-top: var(--gap-section); }
.case__gallery h2 { margin-bottom: clamp(36px, 4vw, 56px); }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) var(--gap); align-items: start; grid-auto-flow: dense; }
.gal { grid-column: span 6; }
.gal:nth-child(4n + 1) { grid-column: span 7; }
.gal:nth-child(4n + 2) { grid-column: span 5; margin-top: 64px; }
.gal--phone, .gal--phone:nth-child(n) { grid-column: span 3; margin-top: 0; }
.gal .frame__body img { width: 100%; height: auto; }
.gal--phone .frame__body { border-radius: 18px; }

/* ---------- next project ---------- */
.case__next { margin-top: var(--gap-section); }
.next {
  position: relative; display: block; padding: clamp(32px, 5vw, 72px); border-radius: var(--radius);
  background: var(--st-yellow); color: var(--ink);
  transition: background-color 200ms var(--ease-out);
}
.next:hover, .next:focus-within { background: var(--yellow); }
.next__name::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.next__name { color: inherit; text-decoration: none; }
.next__label { display: block; font-size: var(--step-body); font-weight: 700; }
.next__name {
  display: block; margin-top: 10px;
  font-size: var(--step-head); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98;
}
.next__name span { display: inline-block; transition: transform 260ms var(--ease-out); }
.next:hover .next__name span { transform: translateX(12px); }
.case__more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; font-weight: 700; }
.case__more a { text-underline-offset: 4px; }

/* back to wherever you came from */
.nav__back {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  background: #2c2c2c; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.nav__back svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.nav__back:hover, .nav__back:focus-visible { background: var(--blue-ink); }
.nav__back:hover svg { transform: translateX(-3px); }
.nav__back:active { transform: scale(0.96); }
.is-case .nav { gap: 14px; }

/* the nav on project pages is already filled; no intro here */
.is-case .nav__proj { color: #c9c9c4; }

@media (max-width: 1080px) {
  .case__title { grid-column: 1 / -1; }
  .spec { grid-column: 1 / span 8; margin-top: 40px; }
  .case__copy { grid-column: 1 / -1; }
  .case__stack { grid-column: 1 / span 8; margin-top: 48px; }
  .did h2 { grid-column: 1 / -1; margin-bottom: 32px; }
  .did__list { grid-column: 1 / -1; }
  .shipped li { grid-column: span 6; }
  .shipped li:nth-child(n) { margin-top: 0; }
  .shipped li:nth-child(even) { margin-top: 32px; }
  .gal, .gal:nth-child(n) { grid-column: span 12; margin-top: 0; }
  .gal--phone, .gal--phone:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 720px) {
  .nav__back { padding: 0 10px; }
  .nav__back span { display: none; }
  .case__head { padding-top: 104px; }
  .spec { grid-column: 1 / -1; }
  .case__stack { grid-column: 1 / -1; }
  .did { padding: 28px 22px; }
  .shipped { grid-template-columns: 1fr; gap: 16px; }
  .shipped li, .shipped li:nth-child(n) { grid-column: auto; min-height: 0; margin-top: 0; }
  .js .shipped li[data-in], .js .shipped li[data-in].is-in { transform: rotate(var(--r)); }
  .gallery { gap: 28px 12px; }
  .next__name { font-size: var(--step-lead); letter-spacing: -0.02em; }
  .gal--phone .frame__size { display: none; }
}

/* ---------- NDA: the lock screen ---------- */
.nda { margin-top: clamp(56px, 6vw, 96px); transition: opacity 400ms var(--ease-out), transform 450ms var(--ease-out); }
.nda.is-open { opacity: 0; transform: translateY(-16px) scale(0.98); }
.nda__card {
  max-width: 640px; margin: 0 auto; padding: clamp(28px, 4vw, 56px);
  border-radius: 16px; background: var(--paper); text-align: center;
}
.nda__lock { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--ink); color: var(--yellow); margin-bottom: 22px; }
.nda__lock svg { width: 30px; height: 30px; }
.nda__card h2 { font-size: var(--step-lead); letter-spacing: -0.03em; }
.nda__card > p { margin: 14px auto 0; max-width: 46ch; }
.nda__form { margin-top: 28px; text-align: left; }
.nda__form label { font-size: var(--step-small); font-weight: 700; }
.nda__row { display: flex; gap: 10px; margin-top: 6px; }
.nda__row input { flex: 1; min-width: 0; padding: 0 16px; min-height: 52px; border-radius: 999px; border: 2px solid #dcdcdc; background: var(--canvas); font: inherit; }
.nda__row input:focus { outline: none; border-color: var(--blue); }
.nda__msg { min-height: 1.5em; margin-top: 8px; font-size: var(--step-small); font-weight: 600; color: #b3260b; }
.nda__form.is-wrong .nda__row { animation: nda-shake 380ms var(--ease-out); }
@keyframes nda-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.nda__ask { margin-top: 10px; }
#nda-content > :first-child { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 720px) { .nda__row { flex-direction: column; } }