/* project.css — single journey */
.project__hero{min-height:60dvh;display:grid;align-items:end;padding:calc(var(--nav-h) + 40px) 0 clamp(40px,7vh,80px)}
.project__hero-inner{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.project__hero-text{max-width:26ch}
.project__eyebrow{font-size:13px;color:#fff;opacity:.82;font-weight:600}
.project__title{color:#fff;font-size:clamp(2.4rem,7vw,5rem);letter-spacing:-.04em;margin-top:10px}
.project__tagline{color:#fff;opacity:.9;margin-top:16px;font-size:1.1rem;max-width:40ch;line-height:1.5}
.project__body{max-width:var(--container);margin:clamp(40px,8vh,96px) auto 0;padding:0 var(--gutter);}
/* .project__reading{max-width:var(--reading-width);} */
.project__body p{margin-bottom:var(--space-4);color:var(--text-secondary);line-height:1.6}
.project__placeholder{color:var(--text-muted)}
.project__placeholder code{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:6px;font-size:.9em}
.project__back{max-width:var(--container);margin-inline:auto;padding:0 var(--gutter) clamp(40px,8vh,96px)}
.project__back a{color:var(--blue);font-weight:600}

/* ========================================================================
   journey body — structured case-study vocabulary used by content/projects/*
   ======================================================================== */
.project__body .pj { margin-block: clamp(40px, 7vh, 72px); }
.project__body .pj:first-of-type { margin-top: 0; }
.pj__step { display: block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.pj__h { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.12; color: var(--text-primary); margin: 0 0 18px; }
.project__body .pj p { margin: 0 0 18px; color: var(--text-secondary); line-height: 1.7; font-size: 1.05rem; }
.project__body .pj p strong { color: var(--text-primary); font-weight: 600; }
.pj__lead { font-size: 1.22rem; color: var(--text-primary); line-height: 1.55; }

/* meta row */
.pj__meta {display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 18px 28px;margin: -30px 0 clamp(40px, 6vh, 64px);padding-bottom: clamp(26px, 4vh, 38px);border-bottom: 1px solid var(--border);}
.pj__meta div { display: flex; flex-direction: column; gap: 4px; }
.pj__meta dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pj__meta dd { margin: 0; font-weight: 600; color: var(--text-primary); }

/* outcomes */
.pj__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 24px; margin: 8px 0 26px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--border); border-radius: var(--radius-md, 14px); background: var(--bg-elevated); }
.pj__metric b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -.03em; color: var(--text-primary); line-height: 1; }
.pj__metric span { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.35; }

/* lists */
.pj__list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pj__list li { position: relative; padding-left: 26px; color: var(--text-secondary); line-height: 1.6; }
.pj__list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.pj__list li strong { color: var(--text-primary); font-weight: 600; }

/* tension / call */
.pj__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 8px 0 24px; }
@media (max-width: 620px) { .pj__cols { grid-template-columns: 1fr; } }
.pj__cols section { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md, 14px); }
.pj__cols h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.pj__cols p { font-size: 1rem; margin: 0; color: var(--text-secondary); line-height: 1.6; }

/* pull quote / principle */
.pj__quote { margin: clamp(30px, 5vh, 46px) 0; padding-left: 24px; border-left: 3px solid var(--blue); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.65rem); line-height: 1.3; letter-spacing: -.02em; color: var(--text-primary); }

/* note */
.pj__note { margin: 8px 0 18px; padding: 16px 18px; border-radius: var(--radius-md, 14px); background: var(--bg-elevated); border: 1px solid var(--border); font-size: .95rem; color: var(--text-muted); line-height: 1.55; }

/* closing + next link */
.pj__close { margin-top: clamp(46px, 7vh, 78px); padding-top: clamp(26px, 4vh, 38px); border-top: 1px solid var(--border); }
.pj__next { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 600; }
.pj__next svg { width: 18px; height: 18px; }

/* reveal */
.project__body [data-reveal] {opacity: 0;transform: translateY(16px);transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-spring, ease);}
.project__body [data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .project__body [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* hero tone background — the eyebrow/title/tagline are white by design, so the
   hero must carry its dark tone in BOTH themes (tone-N defines --tone here too,
   since work-rail.css isn't loaded on project pages) */
.tone-0 { --tone: #14161d; }
.tone-1 { --tone: #1c1a16; }
.tone-2 { --tone: #0f1a20; }
.tone-3 { --tone: #1a141c; }
.tone-4 { --tone: #15181b; }
.project__hero { background: var(--tone, #14161d); }

/* hero media column — shown only when public/img/work/{slug}.webp exists */
.project__hero.has-media { align-items: center; }
.project__hero-inner.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.project__hero-media { margin: 0; }
.project__hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 820px) {
  .project__hero-inner.has-media { grid-template-columns: 1fr; }
  .project__hero-media img { aspect-ratio: 16 / 10; }
}