@import url("/assets/css/work-grid.css");

/* A project page. The shot establishes it, the facts rail answers the three
   questions everybody has (what was your role, what is it, when), and the prose
   does the rest at reading width. */

.project__head { position: relative; }

.project__shot {
  position: relative; margin-top: -68px;
  aspect-ratio: 16 / 7; max-height: 62svh; overflow: hidden;
  background: var(--bg-sunk);
}
.project__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.project__shot-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(4,5,8,.90) 0px, rgba(4,5,8,.62) 92px, rgba(4,5,8,.20) 210px),
    /* Solid by the time the title block starts, or the screenshot's own
       headline reads through the page's headline. */
    linear-gradient(to top, var(--bg) 0%, var(--bg) 30%, rgba(4,5,8,.72) 52%, transparent 88%);
}

.project__title-block {
  position: relative; z-index: 2;
  margin-top: clamp(-140px, -9vw, -80px);
  display: grid; gap: var(--s-4);
  padding-bottom: var(--s-7);
}
.project__title-block h1 {
  /* The floor is set by the longest single word a title can contain, not by
     taste: "ConsumerWatchdog.org" at 28px measured 351px inside a 350px box on
     a 390px phone, and broke off one letter. 24px leaves real clearance. */
  font-size: clamp(24px, 3.4vw, 52px);
  max-width: 24ch;            /* wide enough that the last-resort break never fires */
  min-width: 0;
}
.project__standfirst { max-width: 56ch; color: var(--ink-2); }

.project__body {
  display: grid; gap: clamp(var(--s-6), 5vw, var(--s-9));
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: start;
  padding-block: var(--s-7) var(--s-9);
  border-top: 1px solid var(--line);
}

.project__facts { position: sticky; top: 92px; display: grid; gap: var(--s-5); }
.project__facts dl { display: grid; gap: var(--s-4); margin: 0; }
.project__facts dt {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 4px;
}
.project__facts dd {
  margin: 0; font-family: var(--font-display); font-size: var(--t-sm);
  font-weight: 500; color: var(--ink);
}
.project__facts-stack dd { display: flex; flex-wrap: wrap; gap: 6px; }
.project__visit { justify-self: start; }

.project__prose { max-width: var(--measure); }
.project__prose > p:first-child {
  font-size: var(--t-md); line-height: 1.5; color: var(--ink);
}
.project__prose h2 {
  font-size: var(--t-lg); margin-top: var(--s-8);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}

/* ── next project ─────────────────────────────────────────────────────── */

.project__next { border-top: 1px solid var(--line); background: var(--bg-sunk); }
.project__next a {
  display: grid; align-items: center; gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr auto;
  max-width: var(--wide); margin-inline: auto;
  padding: clamp(var(--s-6), 5vw, var(--s-8)) var(--gutter);
  transition: background var(--dur-2) var(--ease-io);
}
.project__next a:hover { background: var(--bg-raised); }
.project__next-label { grid-column: 1; color: var(--ink-4); }
.project__next-title {
  grid-column: 1; font-size: clamp(24px, 3.2vw, 44px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.03; color: var(--ink);
}
.project__next-kicker { grid-column: 1; color: var(--gold-ink); }
.project__next-go {
  grid-column: 2; grid-row: 1 / span 3;
  font-size: clamp(28px, 3vw, 44px); color: var(--ink-4);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-io);
}
.project__next a:hover .project__next-go { transform: translateX(10px); color: var(--gold); }

@media (max-width: 860px) {
  .project__body { grid-template-columns: 1fr; }
  .project__facts { position: static; }
  .project__facts dl { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}