/* Supporting project pages — compact editorial project stories.
   The flagships breathe; these move. Global system from site.css,
   plus a small colour world per project (Colour = chapter transition). */

/* ── Project colour worlds (hard switch via site.js, never interpolated) ── */
body[data-env="apfog"] { --bg: #DEDAD3; --fg: var(--ink);   --ink-2: #57524A; --bgn: #DEDAD3; }   /* Apple: warm architectural grey */
body[data-env="apa"]   { --bg: #2A2A2C; --fg: var(--cream); --ink-2: rgba(243,236,222,.68); --bgn: #2A2A2C; } /* Apple Watch: graphite */
body[data-env="sgf"]   { --bg: #2F4E3D; --fg: var(--cream); --ink-2: rgba(243,236,222,.74); --bgn: #2F4E3D; } /* Sweetgreen formats: deep editorial green */
body[data-env="sgp"]   { --bg: #DCE8C3; --fg: var(--ink);   --ink-2: #4A5338; --bgn: #DCE8C3; }   /* Sweetgreen pickup: fresh light green */
body[data-env="sgh"]   { --bg: #E0DCC1; --fg: var(--ink);   --ink-2: #545038; --bgn: #E0DCC1; }   /* Sweetgreen hot prep: warm olive neutral */
body[data-env="vzx"]   { --bg: #23233A; --fg: var(--cream); --ink-2: rgba(243,236,222,.7); --bgn: #23233A; }  /* Verizon Express: deep blue-violet */
body[data-env="vzea"]  { --bg: #EAD7DA; --fg: var(--ink);   --ink-2: #5A4549; --bgn: #EAD7DA; }   /* Endless Aisle: muted rose, from the magenta form factors */

.pj-run { padding-left: 0; padding-right: 0; }
.pj-k { font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }

/* ── Hero ── */
.pj-head { padding-top: 112px; padding-bottom: clamp(36px, 4.5vw, 64px); }
.pj-head__grid { margin-top: var(--s-4); }
.pj-kicker { font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.pj-title { font-size: clamp(2.6rem, 5.4vw, 6.4rem); font-weight: 330; letter-spacing: -0.035em; line-height: .96; max-width: 18ch; }
.pj-title .ln { display: block; }
.pj-title em { font-weight: 300; }
.pj-sub { margin-top: var(--s-4); max-width: 40ch; }
.pj-meta { margin-top: var(--s-4); max-width: 720px; }
.pj-head--full .pj-head__i { margin-top: clamp(32px, 4vw, 56px); }
.pj-head--side .pj-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); align-items: end; }
.pj-head--side .pj-head__t { grid-column: 1 / span 7; }
.pj-head--side .pj-head__i { grid-column: 8 / span 5; }
.pj-head--side .pj-title { font-size: clamp(2.4rem, 4.4vw, 5.2rem); }

/* ── Sections: insight headline + one supporting line, then the work ── */
.pj-sec { padding-top: clamp(60px, 7.5vw, 116px); padding-bottom: clamp(28px, 3.5vw, 52px); }
.pj-sec__head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); row-gap: var(--s-3); align-items: end; }
.pj-sec__h { grid-column: 1 / span 7; font-weight: 340; font-size: clamp(2rem, 3.5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.028em; }
.pj-sec__p { grid-column: 8 / span 5; font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }

.pj-item { margin-top: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); row-gap: var(--s-3); align-items: start; }
.pj-item__t { grid-column: 1 / span 6; }
.pj-item__i { grid-column: 1 / -1; }
.pj-item__h { font-weight: 400; font-size: clamp(1.45rem, 2.1vw, 2.1rem); line-height: 1.08; letter-spacing: -0.015em; }
.pj-item__p { margin-top: 8px; font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); max-width: 42ch; }
.pj-item--side { align-items: center; }
.pj-item--side .pj-item__t { grid-column: 1 / span 4; grid-row: 1; }
.pj-item--side .pj-item__i { grid-column: 5 / span 8; grid-row: 1; }
.pj-item--text .pj-item__t { grid-column: 1 / span 5; }
.pj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: start; }

/* ── Figures ── */
.pj-fig { margin: 0; }
.pj-fig img { display: block; width: 100%; height: auto; }
.pj-shot img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(29,26,21,.08), 0 18px 40px -26px rgba(0,0,0,.4); background: #fff; }
.pj-fig .vid { box-shadow: 0 0 0 1px rgba(29,26,21,.08), 0 18px 40px -26px rgba(0,0,0,.4); }
.pj-fig figcaption { margin-top: 10px; font-family: var(--mono); font-size: var(--t-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }

/* locked (private) work — the blur is baked into the image file */
.pj-lock { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(29,26,21,.08); }
.pj-lock img { display: block; width: 100%; height: auto; }
.pj-lock__tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(243,236,222,.92); color: var(--ink); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ── Outcome ── */
.pj-out { padding-bottom: clamp(28px, 3vw, 44px); }
.pj-metrics { margin-top: var(--s-4); }
.pj-link { text-decoration: underline; text-underline-offset: 3px; }
.pj-private { margin-top: var(--s-4); max-width: 52ch; font-size: var(--t-body-s); line-height: 1.5; }
.pj-private .mono { display: block; font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.pj-todo { margin-top: var(--s-4); max-width: 60ch; padding: 12px 14px; border: 1px dashed currentColor; font-size: var(--t-caption); line-height: 1.5; color: var(--ink-2); }

/* ── Next: close the project, then step straight into the next one ── */
.pj-next { padding-top: clamp(48px, 6vw, 88px); }
.pj-nx { display: block; text-decoration: none; border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); padding-top: 14px; }
.pj-nx__k { display: block; font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pj-nx__row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto; column-gap: var(--g); align-items: center; margin-top: var(--s-3); padding-bottom: var(--s-5); }
.pj-nx__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, currentColor 8%, transparent); }
.pj-nx__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ed); }
.pj-nx__t .mono { display: block; font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.pj-nx__t b { display: block; font-weight: 340; font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; transition: transform .35s var(--ed); }
.pj-nx__t i { display: block; margin-top: 8px; font-size: var(--t-body-s); color: var(--ink-2); }
.pj-nx__go { font-size: clamp(1.6rem, 2.4vw, 2.4rem); transition: transform .35s var(--ed); }
.pj-nx:hover .pj-nx__t b, .pj-nx:focus-visible .pj-nx__t b { transform: translateX(8px); }
.pj-nx:hover .pj-nx__go, .pj-nx:focus-visible .pj-nx__go { transform: translateX(8px); }
.pj-nx:hover .pj-nx__img img { transform: scale(1.03); }

@media (max-width: 860px) {
  .pj-head { padding-top: 96px; }
  .pj-nx__row { grid-template-columns: 96px minmax(0,1fr); }
  .pj-nx__go { display: none; }
  .pj-head--side .pj-head__t, .pj-head--side .pj-head__i { grid-column: 1 / -1; }
  .pj-head--side .pj-head__i { margin-top: var(--s-5); }
  .pj-sec__h, .pj-sec__p { grid-column: 1 / -1; }
  .pj-item__t, .pj-item--side .pj-item__t, .pj-item--side .pj-item__i, .pj-item--text .pj-item__t { grid-column: 1 / -1; grid-row: auto; }
  .pj-pair { grid-template-columns: 1fr; }
  /* wide diagrams scroll sideways instead of shrinking past legibility */
  .pj-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .pj-scroll img { width: 760px; max-width: none; }
}
.pj-out__p { margin-top: var(--s-3); max-width: 44ch; font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); }

/* iPad wrapper — product UI shown on the device it ran on */
.pj-fig--ipad { max-width: var(--fig-max, 1040px); margin: 0 auto; }
.pj-fig--ipad .pj-ipad > img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pj-ipad { padding: 3.4% 3.4%; border-radius: 4.5% / 6%; background: #1a1b1d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(29,26,21,.12), 0 30px 60px -30px rgba(0,0,0,.45); }
.pj-ipad .vid, .pj-fig .pj-ipad .vid { border-radius: 6px; box-shadow: none; }
.pj-sec__p--solo { grid-column: 1 / span 6; font-size: var(--t-lede); line-height: 1.35; color: var(--fg); }
.pj-item .pj-fig[style*="--fig-max"]:not(.pj-fig--ipad) { max-width: var(--fig-max); }

/* Mobile edit pass: wide diagrams don't read on a phone, and the hero meta repeats the intro */
@media (max-width: 860px) {
  .pj-scroll:not(:has(img[src*="vzea"])):not(.pj-zoom) { display: none; }
  .pj-item:not(:has(.pj-item__t)):has(.pj-scroll):not(:has(img[src*="vzea"])):not(:has(.pj-zoom)) { display: none; }
  .pj-meta { display: none; }
}

/* Mobile: a readable zoom of a wide diagram instead of hiding it */
.pj-zoom picture { display: block; }
@media (max-width: 860px) {
  .pj-scroll.pj-zoom { display: block; overflow: visible; padding-bottom: 0; }
  .pj-scroll.pj-zoom img { width: 100%; max-width: 100%; }
}