/* Shared styles for /projects/<slug>/ detail pages. Loaded alongside the
   page's own inline design tokens (same palette/fonts as index.html). */

.detail-wrap{max-width:820px;margin:0 auto;padding:0 32px}

.detail-back{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:#8A8276;text-decoration:none;margin-top:28px}
.detail-back:hover{color:#BE4A2E}

.detail-meta{display:flex;align-items:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.detail-year{font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.14em;color:#8A8276}
.detail-status{font-family:'Archivo',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#8A8276;background:#EFEBE3;border:1px solid #E0D8CA;border-radius:999px;padding:4px 11px}

.detail-title{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(34px,7vw,56px);line-height:1.08;letter-spacing:-0.015em;margin:16px 0 0;color:#1C1A17}
.detail-tagline{font-size:19px;line-height:1.55;color:#5A554C;margin:14px 0 0;max-width:640px}

.detail-tech{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.detail-tech span{font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.02em;color:#5A554C;background:#F1EDE5;border:1px solid #E0D8CA;border-radius:7px;padding:6px 12px}

.detail-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.detail-btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;text-decoration:none;padding:11px 20px;border-radius:6px;transition:background .15s,border-color .15s,color .15s}
.detail-btn--primary{background:#BE4A2E;color:#FBF9F4}
.detail-btn--primary:hover{background:#8F3620}
.detail-btn--ghost{background:#F1EDE5;color:#1C1A17;border:1px solid #E0D8CA}
.detail-btn--ghost:hover{background:#E7E0D3}

.detail-frame{margin-top:44px;border:1px solid #DAD3C6;border-radius:14px;overflow:hidden;background:#F1EDE5;box-shadow:0 24px 56px rgba(28,26,23,0.12)}
.detail-chrome{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #E4DDD0;background:#EFEBE3}
.detail-chrome i{width:10px;height:10px;border-radius:50%;display:block;background:#D6CDBD}
.detail-frame img{width:100%;height:auto;display:block}
.detail-frame--placeholder{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:14.5px;color:#8A8276;text-align:center;padding:24px}

/* Live app embeds — used in place of static screenshots on project pages
   whose demo is an actual interactive app (Argus, Aurora). The bar is
   functional (live indicator + open-in-new-tab), not a decorative
   fake-browser chrome. --wide breaks out of .detail-wrap for a desktop app;
   --phone stays narrow and centered for a phone-shaped app. */
.detail-embed-wrap{margin:44px auto 0}
.detail-embed-wrap--wide{max-width:1200px;padding:0 24px}
/* The phone demo renders a fixed 390x812 device frame plus its preview button,
   so it cannot reflow. Scale it down instead of letting a narrow viewport
   crop it — 390x895 is the measured size of the embedded document. */
.detail-embed-wrap--phone{--embed-scale:1;max-width:438px;padding:0 24px}

.detail-embed{border:1px solid #DAD3C6;border-radius:14px;overflow:hidden;background:#14110F;box-shadow:0 28px 64px rgba(28,26,23,0.16)}
.detail-embed-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:10px 16px;border-bottom:1px solid #E4DDD0;background:#EFEBE3}
.detail-embed-label{display:flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#5A554C}
.detail-embed-dot{width:7px;height:7px;border-radius:50%;background:#3FA85C;flex:none;animation:detail-live-pulse 2s infinite}
.detail-embed-open{font-size:12.5px;color:#8A8276;text-decoration:none;white-space:nowrap}
.detail-embed-open:hover{color:#BE4A2E}
.detail-embed iframe{display:block;width:100%;border:0}
.detail-embed-wrap--wide .detail-embed iframe{aspect-ratio:16/9}
.detail-embed-wrap--phone .detail-embed iframe{
  width:390px;height:895px;
  transform:scale(var(--embed-scale));transform-origin:top left;
  /* Transforms don't shrink the layout box, so reclaim the scaled-off height. */
  margin-bottom:calc((var(--embed-scale) - 1) * 895px);
}

/* Shown instead of the embed where the live app cannot be used (see ≤700px). */
.detail-embed-fallback{display:none}
.detail-embed-fallback .detail-frame{margin-top:0}
.detail-embed-fallback .detail-actions{margin-top:18px}

@keyframes detail-live-pulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
@media(prefers-reduced-motion:reduce){
  .detail-embed-dot{animation:none}
}
@media(max-width:700px){
  .detail-embed-wrap--wide{padding:0 20px}
  /* A desktop dashboard at ~350px is unreadable; offer the real thing instead. */
  .detail-embed-wrap--wide{display:none}
  .detail-embed-fallback{display:block;margin-top:44px}
}

.detail-section{margin-top:60px}
.detail-h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(24px,4vw,30px);line-height:1.2;letter-spacing:-0.01em;color:#1C1A17;margin:0 0 18px;border-bottom:1px solid #DAD3C6;padding-bottom:14px}
.detail-h3{font-family:'Newsreader',serif;font-weight:500;font-size:19px;line-height:1.3;color:#1C1A17;margin:28px 0 0}
.detail-section p{font-size:16.5px;line-height:1.66;color:#5A554C;margin:14px 0 0;max-width:680px}
.detail-section ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.detail-section li{font-size:16.5px;line-height:1.6;color:#5A554C}
.detail-section li strong{color:#1C1A17}

.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.detail-gallery img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #DAD3C6}
.detail-gallery--single{grid-template-columns:1fr}

.detail-footer-space{height:80px}

@media(max-width:700px){
  .detail-wrap{padding:0 20px}
  .detail-gallery{grid-template-columns:1fr}
}

/* ------------------------------------------------------ figures & diagrams
   Added for the ROCNIK-1 connection graph and the Argus system drawings. Both
   are SVG rather than screenshots: a captured window full of small type is
   unreadable at page width, and the source flow charts are 456px wide, which
   is a blurry thumbnail however it is scaled. */
.detail-figure{margin:44px 0 0}
.detail-figure img{width:100%;height:auto;display:block;border:1px solid #DAD3C6;border-radius:14px;background:#0D1117}
.detail-figure figcaption{margin-top:12px;font-size:13.5px;line-height:1.55;color:#8A8276}

.detail-diagram{margin:34px 0 0;padding:26px 22px;border:1px solid #DAD3C6;border-radius:14px;background:#FBF9F4}
.detail-diagram svg{width:100%;height:auto;display:block}
.detail-diagram figcaption{margin-top:14px;font-size:13.5px;line-height:1.55;color:#8A8276}
/* The drawings carry their own type, so it has to survive being scaled down
   with the SVG. Nothing here is below 11px at 640px of page width. */
.detail-diagram .dg-box{fill:#F1EDE5;stroke:#C9C0AE;stroke-width:1.4}
.detail-diagram .dg-box--accent{fill:#FBEDE7;stroke:#BE4A2E}
.detail-diagram .dg-box--safe{fill:#FBE9E4;stroke:#C0473A}
.detail-diagram .dg-line{fill:none;stroke:#A79E90;stroke-width:1.4}
.detail-diagram .dg-line--safe{stroke:#C0473A}
.detail-diagram .dg-line--dash{stroke-dasharray:5 4}
.detail-diagram .dg-t{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:13px;fill:#2A2721}
.detail-diagram .dg-t--sm{font-size:11px;fill:#8A8276;letter-spacing:0.04em}
.detail-diagram .dg-t--hd{font-size:13px;font-weight:600;fill:#2A2721}