/* ---------- Case study pages (/project/*) ---------- */
/* Loaded by the ten project pages after site.css. A case study is one screen: a headline and a
   one-line lede, one button to the working prototype with the prototype as the picture you
   click, three short cards (the brief, what was built, the outcome) and the next-project strip.
   The tag row, the gallery of remaining screens and the closing band went on 2026-10-22: the
   homepage tiles open the prototype directly now, so the case study is the shorter second
   visit. The old two-column layout (.project-layout and friends in site.css) is no longer used
   by these pages. The fixed back link and the next-project strip are the existing components. */
.cs { --cs-gap: clamp(44px, 5.5vw, 80px); padding-top: 108px; }
@media (max-width: 767px) { .cs { padding-top: 96px; } }
.cs-shell { max-width: 1320px; margin-inline: auto; padding: 0 clamp(16px, 5vw, 64px) 4rem; }
/* the fixed back link takes the left 110px from 1200, so the page keeps clear of it */
@media (min-width: 1200px) { .cs-shell { padding-inline: clamp(120px, 8.5vw, 168px); max-width: none; } }
@media (min-width: 1700px) { .cs-shell { max-width: 1640px; } }

/* ---- head: words on the left, the prototype as a picture on the right ---- */
.cs-head { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) {
  .cs-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); }
}
.cs-head .project-cats { margin: 0; font-size: 14px; letter-spacing: 0.01em; color: var(--color-secondary); max-width: none; }
.cs h1 { margin: 14px 0 0; font-size: clamp(2.1rem, 1.2vw + 1.7rem, 3.1rem); letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.cs-lede { max-width: 32em; margin-top: 20px; font-size: 1.2rem; line-height: 1.55; color: var(--color-text); text-wrap: pretty; }
.cs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.cs-hint { max-width: 34em; margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--color-secondary); }
.cs-hint__label {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-pill-bg);
  color: var(--color-black);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
@media (max-width: 767px) { .cs-cta .btn { width: 100%; } }

/* the lead screenshot is the way in: a browser frame that opens the prototype */
.cs-hero {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 16, 19, 0.08), 0 34px 64px -34px rgba(17, 16, 19, 0.45);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
}
.cs-hero__bar { position: relative; display: block; height: 30px; background: #f1f1f4; border-bottom: 1px solid rgba(17, 16, 19, 0.07); }
.cs-hero__bar::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d4d4da;
  box-shadow: 16px 0 #d4d4da, 32px 0 #d4d4da;
  transform: translateY(-50%);
}
.cs-hero img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }
.cs-hero__pill {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.95rem;
  box-shadow: 0 12px 24px -10px rgba(236, 22, 22, 0.6);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.25), background-color 0.2s;
}
.cs-hero:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .cs-hero:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(17, 16, 19, 0.08), 0 44px 72px -34px rgba(17, 16, 19, 0.5); }
  .cs-hero:hover .cs-hero__pill { transform: translateY(-2px) scale(1.04); background: var(--color-primary-hover); }
}

/* ---- three short cards ---- */
.cs-facts { display: grid; gap: 16px; margin-top: var(--cs-gap); }
@media (min-width: 900px) { .cs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.cs-fact { padding: 26px 28px 30px; border-radius: 18px; background: var(--color-plate); }
.cs-fact h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }
.cs-fact p { max-width: none; margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--color-text); }

.cs .project-outro { margin-top: 56px; }

/* ---- load-in: the page builds under the header ---- */
/* The header draws itself from 0.1s to about 2.1s (site.css), so the page follows it as a second
   voice instead of arriving whole: the back link and category line, the headline, the lede, the
   button and its hint, the screenshot frame and its pill, then the three cards and the
   next-project strip. Done by about 2s. The parts wait in their start state through their delay
   and return to their own styles when done. Movement uses translate and scale, never transform,
   so hover is untouched. */
@keyframes cs-soft { from { opacity: 0; translate: 0 24px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes cs-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes cs-pop { from { opacity: 0; translate: 0 10px; scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cs-card { from { opacity: 0; translate: 36px 28px; scale: 0.965; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
.cs .project-back { animation: cs-fade 0.6s ease 0.2s backwards; }
.cs-head .project-cats { animation: cs-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }
.cs h1 { animation: cs-soft 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s backwards; }
.cs-lede { animation: cs-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.52s backwards; }
.cs-cta .btn { animation: cs-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.74s backwards; }
.cs-hint { animation: cs-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s backwards; }
.cs-hero { animation: cs-card 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; }
.cs-hero__pill { animation: cs-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1.3s backwards; }
.cs-fact { animation: cs-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1s backwards; }
.cs-fact:nth-child(2) { animation-delay: 1.1s; }
.cs-fact:nth-child(3) { animation-delay: 1.2s; }
.cs .project-outro { animation: cs-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s backwards; }
/* stacked, the frame has nowhere to come in from sideways */
@media (max-width: 1023px) { .cs-hero { animation-name: cs-rise; } }