/* Home-page case study cards, copied verbatim from index.html (cards, art, reveal). */
:root { --shot-border: 1px solid rgba(26, 22, 17, 0.05); --shot-radius: 16px; --elev-md: 0px 2px 16px rgba(21, 17, 13, 0.09); }
.projects { --paper: #FFFFFF; }

.projects { display: flex; flex-direction: column; gap: 48px; }
.project {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  background: var(--paper); border: var(--shot-border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev-md);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
/* `display: grid` above outranks the UA `[hidden]` rule, so restore it. */
.project[hidden] { display: none; }
/* Specificity must beat `.reveal.in { transform: none }` (same 0,2,0, later
   in source) — qualify with .projects so the hover lift actually applies. */
.projects .project:hover { transform: translateY(-4px); }
.project .art { position: relative; min-height: 360px; overflow: hidden; }
.project .body { padding: var(--s-9); display: flex; flex-direction: column; align-items: flex-start; }
.project.flip .art { order: 2; }
@media (max-width: 880px) {
  .project, .project.flip { grid-template-columns: 1fr; }
  .project.flip .art { order: 0; }
  .project .art { min-height: 240px; }
  .project .body { padding: 32px 28px; }
}

.project .timeline {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--marigold-600); margin-bottom: 18px;
}
/* "Selected work"-style label (marigold eyebrow) without the divider line */
.eyebrow--plain::before { display: none; }
.project .eyebrow { color: var(--accent-text); margin-bottom: 18px; }
.project h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.14; letter-spacing: 0; color: var(--ink);
  margin: 0 0 16px;
}
.project p { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 0 0 22px; }
.project .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.project .body .btn { margin-top: auto; }

/* Hover-to-play video artwork (case study hero):
   inset 24px from the top/bottom of the art panel; height-driven so the
   bottom margin stays 24px, width follows aspect ratio and bleeds off the
   outer page edge — the project gradient frames it on three sides, with the
   24px padding gap surfacing toward the card body. */
.project .art-video {
  position: absolute; z-index: 1;
  top: 24px; left: 24px; height: calc(100% - 48px); width: auto; max-width: none;
  border-radius: 16px; box-shadow: 0 4px 14px rgba(21,17,13,0.06), 0 18px 44px rgba(21,17,13,0.10);
  display: block;
}
/* Non-flipped cards keep the art on the left, so the video bleeds off the
   left (outer) edge and the gradient padding surfaces on the right. */
.project:not(.flip) .art-video { left: auto; right: 24px; }

/* Whole-card link overlay */
.project-link { position: absolute; inset: 0; z-index: 6; cursor: pointer; }

/* Gradient artwork + glass UI hint */
.art-grad { position: absolute; inset: 0; }
.art-grad.sunset { background: linear-gradient(135deg, #F1B232 0%, #E45A93 100%); }
.art-grad.aurora { background: linear-gradient(45deg, #CDEFEF 0%, #5EC4C7 100%); }
.art-grad.muted  { background: linear-gradient(150deg, #F5C65B 0%, #F08AB7 100%); opacity: 0.55; }
.art-grad.dusk   { background: linear-gradient(135deg, #5EC4C7 0%, #E45A93 100%); }
.art-card {
  position: absolute; left: 36px; right: 36px; top: 64px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 16px;
  box-shadow: 0 8px 40px rgba(21,17,13,0.16); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.art-card .bar { display: flex; align-items: center; gap: 7px; }
.art-card .bar i { width: 9px; height: 9px; border-radius: 50%; }
.art-card .bar i:nth-child(1){ background: var(--magenta-300); }
.art-card .bar i:nth-child(2){ background: var(--marigold-300); }
.art-card .bar i:nth-child(3){ background: var(--teal-300); }
.art-card .ln { height: 9px; border-radius: 999px; background: var(--neutral-200); }
.art-card .ln.accent { background: var(--marigold-200); height: 26px; border-radius: 8px; width: 38%; }
.art-card .ln.s1 { width: 90%; } .art-card .ln.s2 { width: 72%; } .art-card .ln.s3 { width: 54%; }
.soon-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-4deg);
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: var(--ls-snug); color: var(--ink-2);
  background: rgba(255,255,255,0.9); padding: 12px 24px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
}

#work { padding-top: var(--s-12); }
#testimonials { padding-top: var(--s-12); }
@media (max-width: 720px) { #work, #testimonials { padding-top: var(--s-10); } }