/* ============================================================
   martinthexr.dev — project detail pages (/work/*.html)
   Loaded only by the per-project pages. Same tokens as styles.css.
   ============================================================ */

.project-page { padding:calc(var(--nav-h) + 56px) 0 96px; }

/* ---- Breadcrumb ---- */
.crumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--muted-2); margin-bottom:30px;
}
.crumb a { color:var(--muted); }
.crumb a:hover, .crumb a:focus-visible { color:var(--accent); }
.crumb [aria-current="page"] { color:var(--fg); }

/* ---- Head ---- */
.project-page .eyebrow { margin-bottom:12px; }
.project-page h1 {
  /* mono 600 khớp skin technical.css (heading index cũng mono 600) */
  font-family:var(--font-mono);
  font-size:clamp(1.7rem, 4vw, 2.4rem);
  font-weight:600; letter-spacing:-.01em; line-height:1.15;
  margin-bottom:14px; max-width:26ch;
}
.project-page .project-tagline { font-size:1.12rem; margin-bottom:36px; }

/* ---- Media ---- */
.pp-media { margin-bottom:44px; }

/* ---- Body ---- */
.pp-body { max-width:74ch; }
.pp-body .project-desc { font-size:1.06rem; margin-bottom:26px; }
.pp-body .project-tech { margin-bottom:4px; }

/* ---- Pipeline flow strip (project 02 only) ---- */
.project-page .pipeline-flow { margin:0 0 36px; }

/* ---- Prev / next ---- */
.pp-nav {
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:72px; padding-top:30px; border-top:1px solid var(--border);
}
.pp-nav .lbl {
  display:block; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2);
  margin-bottom:5px;
}
.pp-nav a { color:var(--muted); font-weight:500; max-width:34ch; }
.pp-nav a:hover, .pp-nav a:focus-visible { color:var(--accent); }
.pp-nav .next { text-align:right; margin-left:auto; }

@media (max-width: 720px) {
  .project-page { padding:calc(var(--nav-h) + 34px) 0 72px; }
  .pp-nav .next { text-align:left; margin-left:0; }
}
@media print {
  .pp-nav, .crumb { display:none !important; }
}