/* Project detail pages. Loads after style.css and uses its tokens.

   The page is a neutral frame and the work carries the colour. That is the
   Nothin' Utopia mechanism: paper ground, ink text, one stamp accent, and every
   screenshot allowed to be as loud as the site it came from. A project page
   that competes with the project is a portfolio about the designer.

   There is no results section, no testimonial, no client count and no number
   describing the client's business. See dropped-pin.md section 15.3. The reason
   is not modesty: zero of seven Houston trades competitors show the work, so
   craft-led is the only differentiated format left in this market. */

/* ── Head ─────────────────────────────────────────────────────── */
.work { padding-bottom: clamp(3rem, 8vw, 5.5rem); }

.workhead { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

.backlink {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  font-family: var(--display); font-weight: 600; font-size: 0.88rem;
  color: var(--ink-soft); text-decoration: none;
}
.backlink:hover { color: var(--ink); }

.workhead h1 { margin-top: 0.5rem; }

.work__descriptor {
  font-size: var(--step-1); color: var(--ink-soft);
  max-width: 46ch; line-height: 1.45; margin-bottom: 0;
}

/* ── Status row ───────────────────────────────────────────────── */
/* Snellenberg's mechanism. Facts about the engagement, hairline-ruled, sitting
   where a stat block would sit on a competitor's page. Everything in it is
   checkable, which is exactly what a results claim is not. */
.statusrow {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.statusrow__cell { padding: 0.9rem 1rem 0.95rem 0; }
/* 2x2 on a phone. The vertical rule belongs between columns only, so it goes on
   the even cells rather than on every cell after the first, which would draw a
   rule down the left edge of the second row. */
.statusrow__cell:nth-child(even) { border-left: 1px solid var(--hair); padding-left: 1rem; }
.statusrow__cell:nth-child(n + 3) { border-top: 1px solid var(--hair); }
.statusrow dt {
  font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
}
.statusrow dd {
  margin: 0.35rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: 0.98rem; letter-spacing: -0.01em; color: var(--ink);
}
/* `Concept` is stated, not whispered. A reader who works out for themselves
   that a project was invented has caught you hiding it. */
.statusrow__cell--flag dd { color: var(--stamp-deep); }

/* Four across once there is room, which is the Snellenberg proportion: a single
   quiet band of facts, not a stack. */
@media (min-width: 46rem) {
  .statusrow { grid-template-columns: repeat(4, 1fr); }
  .statusrow__cell:nth-child(n + 3) { border-top: 0; }
  .statusrow__cell + .statusrow__cell { border-left: 1px solid var(--hair); padding-left: 1rem; }
}

/* `Build` spans the full width under the other four rather than making the band
   five columns wide. It is a compound string where the others are two or three
   words, and at the 46rem breakpoint a fifth column is about 147px, which wraps
   `Base build + brand tokens + photography direction` to four lines. A band of
   facts that is four lines tall in one cell has stopped being a band.

   The doubled class is deliberate. It has to outrank `.statusrow__cell +
   .statusrow__cell` above, which is the same specificity, so it wins on order
   instead. */
.statusrow__cell.statusrow__cell--wide {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hair);
  border-left: 0;
  padding-left: 0;
}

/* ⭐ `Site` sits in the band beside `Build` rather than dangling under it.
   Until 2026-08-25 this was a bare <p class="work__site"> below the row, which
   put the only actionable link on the page outside the one element a reader
   scans. A fact that happens to be clickable belongs with the other facts.

   Full width on a phone: at two columns a hostname plus a 44px target has
   nothing to sit beside. One column from 46rem, where `Build` gives up the
   fourth column it never used. */
.statusrow__cell.statusrow__cell--site {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hair);
  border-left: 0;
  padding-left: 0;
}
@media (min-width: 46rem) {
  .statusrow__cell.statusrow__cell--wide { grid-column: span 3; }
  .statusrow__cell.statusrow__cell--site {
    grid-column: span 1;
    border-left: 1px solid var(--hair);
    padding-left: 1rem;
  }
}
/* inline-flex with a real min-height, not inline-block with padding. As plain
   inline text this measured 35px, and this audience is tapping one-handed.
   dd's top margin is dropped here because the 44px target already supplies the
   spacing the other cells get from the margin. */
.statusrow__cell--site dd { margin-top: 0; }
.statusrow__cell--site a {
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.01em; text-underline-offset: 4px;
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ── Brief ────────────────────────────────────────────────────── */
.work__brief {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
.work__brief p { max-width: 58ch; font-size: 1.09rem; }
.work__brief p:last-child { margin-bottom: 0; }

/* ── Image sequence ───────────────────────────────────────────── */
.shots { margin-top: clamp(2.5rem, 6vw, 4rem); }

.shot { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.shot__grid { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }

/* A hairline and a near-white ground, so a screenshot with a pale edge does not
   bleed into the paper and lose its own boundary. */
.shot__frame {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 18px 40px -32px oklch(0.215 0.013 30 / 0.5);
}
.shot__frame img { display: block; width: 100%; height: auto; }

.shot__cap {
  margin-top: 0.85rem; font-size: 0.92rem; color: var(--ink-soft);
  max-width: 62ch; line-height: 1.5;
}

/* The pair splits only when there is room for both to stay readable. Below
   that it stacks, which is the correct answer on a phone and not a fallback.

   ⚠️ Only ever pair PHONE captures. Two 1440px desktop screenshots side by side
   land at about 566px each inside a 72rem wrap, which is 39% scale, and 16px
   body text inside the screenshot renders at roughly 6px. Legible at that size
   is a composition, not a craft argument, and craft is what this page is for.
   Desktop captures get the full column. */
@media (min-width: 46rem) {
  .shot--pair .shot__grid { grid-template-columns: 1fr 1fr; }
}

/* ── Decision notes ───────────────────────────────────────────── */
/* OPX's mechanism, and the part of this page that actually sells, because it
   demonstrates judgment where a competitor asserts an outcome.

   Offset right on desktop so the note reads as commentary on the image above
   rather than as the next section. Build facts belong inside these paragraphs
   at body size, absolute figures only, never as a row of large numbers.
   See dropped-pin.md section 15.3a for why that distinction carries weight. */
.note { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.note__body {
  max-width: 48ch;
  border-left: 3px solid var(--stamp);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
}
.note h3 {
  font-family: var(--display); font-weight: 600; font-size: var(--step-1);
  line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 0.7rem;
}
.note p { margin-bottom: 0.9rem; }
.note p:last-child { margin-bottom: 0; }

@media (min-width: 60rem) {
  .note { display: flex; justify-content: flex-end; }
  .note__body { margin-right: 6%; }
}

/* ── Next project ─────────────────────────────────────────────── */
.worknext {
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hair);
}
.worknext__label {
  font-family: var(--display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.worknext__link {
  font-family: var(--display); font-weight: 800; font-size: var(--step-2);
  letter-spacing: -0.025em; color: var(--ink); text-decoration: none;
  display: inline-block; padding-block: 0.3rem;
}
.worknext__link:hover { color: var(--stamp-deep); }

/* ── Index placeholder ────────────────────────────────────────── */
/* ⚠️ Undesigned on purpose. The 3-up grid with the hover pan is A2 and is a
   separate piece of work. Replace this block wholesale rather than growing it. */
.worklist { margin-top: 2.5rem; }
.worklist ul { list-style: none; margin: 0; padding: 0; }
.worklist li {
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: baseline; gap: 1rem; justify-content: space-between;
}
.worklist a {
  font-family: var(--display); font-weight: 700; font-size: var(--step-2);
  letter-spacing: -0.025em; color: var(--ink); text-decoration: none;
  display: block; padding-block: 1rem;
}
.worklist a:hover { color: var(--stamp-deep); }
.worklist span {
  font-family: var(--display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
}