/* ===== Project pages: one product each, in that product's own colours ===== */

/* The background takes the colour of the section under the middle of the screen.
   Registered colours let the gradient itself transition; tone.js only swaps two
   values when the section changes, never per scroll frame. */
@property --tA { syntax: "<color>"; inherits: true; initial-value: rgba(124,92,255,.14); }
@property --tB { syntax: "<color>"; inherits: true; initial-value: rgba(65,102,255,.08); }
.tone {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 18%, var(--tA), transparent 72%),
    radial-gradient(55% 55% at 92% 88%, var(--tB), transparent 72%);
  transition: --tA 1.1s ease, --tB 1.1s ease;
}

.project { --project: #d7aa70; --project-ink: #17130f; }
/* Phones fade the homepage's violet space texture up for the journey; a project
   page wears its product's colours instead, so it stays off here. */
.project .sky { --sky-texture-opacity: 0; }

.project-main {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
  padding: 7rem clamp(1.25rem, 4vw, 3.5rem) 4rem;
}

.project-hero {
  display: grid;
  grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  min-height: 78svh;
}
.crumb { font-size: .85rem; color: var(--dim); margin-bottom: 1.4rem; }
.crumb a { color: var(--dim); }
.project-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.project-brand img { width: 46px; height: 46px; border-radius: 12px; background: #f4ede0; padding: 6px; }
.project-brand h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.project-what { font-size: 1.2rem; color: #d6d4e3; margin-top: 1rem; line-height: 1.45; }
.project-stand { font-size: .95rem; color: var(--dim); margin-top: 1.4rem; }
.project-stand strong { color: var(--text); font-weight: 500; }
.project-links { margin-top: 1.3rem; }
.project-links a { color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--project); padding-bottom: 2px; }

/* Three screens at a size you can read: the middle one in front, the side ones
   tucked behind it. No rotation and no scaling, so every pixel stays sharp. */
.trio { --mid: clamp(16rem, 24vw, 22rem); display: flex; justify-content: center; align-items: center; padding: 1rem 0; }
.shot {
  position: relative;
  flex: none;
  aspect-ratio: 780 / 1688;
  padding: 6px;
  border-radius: 38px;
  background: #0b0a10;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
.trio .shot { width: calc(var(--mid) * .8); z-index: 1; filter: brightness(.82); }
.trio .shot:nth-child(2) {
  width: var(--mid);
  z-index: 2;
  margin: 0 calc(var(--mid) * -.13);
  filter: none;
  box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 80px rgba(214,170,112,.18);
}

.project-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 4rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--hair);
}
.project-facts h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.project-facts ul { list-style: none; display: grid; gap: .7rem; }
.project-facts li { color: #c3c1d2; padding-left: 1.2rem; position: relative; }
.project-facts li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--project); }
.project-facts p { color: #c3c1d2; }
.project-facts p + p { margin-top: .9rem; }

.project-out {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.6rem 1.8rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(215,170,112,.35);
  background: linear-gradient(110deg, rgba(215,170,112,.14), transparent 70%);
  transition: border-color .3s ease, background .3s ease;
}
.project-out:hover { border-color: rgba(215,170,112,.7); background: linear-gradient(110deg, rgba(215,170,112,.22), transparent 75%); }
.project-out span { color: #d6d4e3; font-size: 1.05rem; }
.project-out b { font-size: 1.3rem; font-weight: 600; color: #e9c48f; }
.project-legal { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); font-size: .88rem; }
.project-legal a { color: var(--dim); }

.project .site-footer { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .project-main { padding-top: 6rem; }
  .project-hero { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; }
  /* The middle screen stays big enough to read; the side ones run off the
     edges of the screen instead of shrinking everything to fit. */
  .trio { --mid: 54vw; margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3.5rem)); overflow: hidden; }
  .project-facts { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tone { transition: none; }
}