/* project.css: shared template for /projects/* detail pages and the 404 page */

.ph { padding: 140px 0 64px; }
@media (min-width: 768px) { .ph { padding: 180px 0 88px; } }
.ph-back {
  display: inline-flex; gap: 8px; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2);
  margin-bottom: 40px;
}
.ph-back:hover { color: var(--ink); }
.ph-kind {
  display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.ph-title { font-size: clamp(52px, 11vw, 132px); letter-spacing: -.045em; line-height: .95; margin-bottom: 24px; }
.ph-sum { font-size: clamp(19px, 2vw, 24px); color: var(--ink-2); max-width: 44ch; line-height: 1.45; }

.ph-meta {
  display: grid; gap: 20px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .ph-meta { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.ph-meta dt {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.ph-meta dd { font-family: var(--f-mono); font-size: 13px; color: var(--ink); line-height: 1.7; }
.ph-meta dd a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.ph-meta dd a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.ps { padding: 64px 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .ps .wrap { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
}
.ps h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
.ps-num { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--accent); margin-bottom: 10px; letter-spacing: .06em; }
.ps-body { max-width: 66ch; }
.ps-body p { color: var(--ink); opacity: .88; font-size: 18px; }
.ps-body p + p, .ps-body p + ul, .ps-body ul + p { margin-top: 18px; }
.ps-body ul { display: grid; gap: 10px; }
.ps-body li { position: relative; padding-left: 22px; color: var(--ink); opacity: .88; font-size: 17px; }
.ps-body li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }
.ps-body a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.ps-todo { color: var(--ink-3) !important; font-style: italic; }

.dg { margin-top: 32px; padding: 20px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--rule); overflow-x: auto; }
.dg svg { width: 100%; height: auto; min-width: 560px; }
.dg figcaption { margin-top: 14px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.dg .b { fill: var(--bg); stroke: var(--rule-2); }
.dg .b-a { fill: var(--accent-soft); stroke: var(--accent); }
.dg .t { fill: var(--ink); font-family: var(--f-head); font-size: 15px; }
.dg .s { fill: var(--ink-2); font-family: var(--f-mono); font-size: 11px; }
.dg .ln { stroke: var(--ink-3); fill: none; stroke-width: 1.25; }
.dg .ar { fill: var(--ink-3); }

.pn { padding: 72px 0 24px; border-top: 1px solid var(--rule); }
.pn-grid { display: grid; gap: 12px; }
@media (min-width: 768px) { .pn-grid { grid-template-columns: 1fr 1fr; } }
.pn a {
  display: grid; gap: 6px; padding: 24px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--rule);
  transition: border-color .3s var(--ease);
}
.pn a:hover { border-color: var(--rule-2); }
.pn-dir { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.pn-name { font-family: var(--f-head); font-size: 26px; }
.pn a:hover .pn-name { color: var(--accent); }
.pn a.pn-next { text-align: right; }

/* 404 */
.nf { min-height: 80svh; display: grid; align-content: center; padding: 140px 0 80px; }
.nf-code { font-family: var(--f-head); font-size: clamp(120px, 28vw, 300px); letter-spacing: -.06em; line-height: .85; color: var(--rule-2); }
.nf-code span { color: var(--accent); }
.nf h1 { font-size: clamp(28px, 4vw, 44px); margin: 24px 0 12px; }
.nf p { color: var(--ink-2); margin-bottom: 32px; }
.ps-body code { font-family: var(--f-mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--bg-3); }

/* live banner at the top of each project page (js/banners.js) */
.bn { padding: 0 0 24px; }
.bn-cv {
  width: 100%; height: 440px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--rule); cursor: crosshair; touch-action: pan-y;
}
.bn-cv[data-banner="sync"] { height: 340px; }
@media (max-width: 759px) {
  .bn-cv { height: 440px; }
  .bn-cv[data-banner="sync"] { height: 460px; }
  .bn-cv[data-banner="viewfinder"] { height: 380px; }
}
.bn-cap { margin-top: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); max-width: 80ch; }