/* project.css - shared styles for /projects/ build-log pages.
   Consolidated from the per-page <style> blocks. Loaded after store.css. */

.detail{ max-width:960px; }
.back-link{ display:inline-block; font-family:var(--font-mono); font-size:.76rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; }
.draft-banner{ margin:0 0 22px; padding:12px 16px; border:1px dashed var(--pink); border-left:3px solid var(--pink); background:rgba(255,91,200,0.06); font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); line-height:1.6; }
.draft-banner strong{ color:var(--pink); }
.detail-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; margin-bottom:8px; }
.detail-hero .hero-media{ position:relative; border:1px solid var(--border); border-left:2px solid var(--border-glow); background:#000; }
.detail-hero .hero-media img{ display:block; width:100%; height:auto; }
.detail-hero .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
.detail-hero h1{ margin:0 0 10px; font-family:var(--font-mono); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; line-height:1; font-size:clamp(30px,5vw,52px); color:var(--text); }
.detail-hero .lede{ color:var(--ink-dim); font-size:16px; }
.status-line{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; }
.status-line .tag{ display:inline-flex; align-items:center; padding:6px 12px; font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; border-radius:0; }
.tag.type{ color:var(--accent); background:rgba(0,255,204,0.06); border:1px solid rgba(0,255,204,0.30); }
.tag.fresh{ color:var(--pink); background:rgba(255,91,200,0.08); border:1px solid rgba(255,91,200,0.45); }
.quick-specs{ list-style:none; margin:16px 0 0; padding:0; font-family:var(--font-mono); font-size:.82rem; }
.quick-specs li{ display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--hairline); }
.quick-specs li:last-child{ border-bottom:1px solid var(--hairline); }
.quick-specs .k{ color:var(--ink-soft); min-width:104px; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; }
.quick-specs .v{ color:var(--ink-dim); }
.detail-section{ margin-top:20px; }
.detail-section p{ color:var(--ink-dim); }
.build-shots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:16px; }
.build-shots figure{ margin:0; }
.build-shots img{ display:block; width:100%; height:auto; border:1px solid var(--border); border-left:2px solid var(--border-glow); background:#000; }
.build-shots figcaption{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); margin-top:6px; line-height:1.5; }
.controls{ margin:0; }
.controls div:last-child{ border-bottom:1px solid var(--hairline); }
.controls dt{ font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:.8rem; color:var(--accent); }
.controls dd{ margin:0; color:var(--ink-dim); font-size:.95rem; }
.spec-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.82rem; }
.spec-table th, .spec-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.spec-table th{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; font-size:.7rem; width:150px; font-weight:700; }
.spec-table td{ color:var(--ink-dim); }
.build-callout{ margin-top:20px; padding:16px 18px; border:1px solid var(--border); border-left:2px solid var(--border-glow); background:var(--bg-alt); color:var(--ink-dim); font-size:.95rem; }
.build-callout a{ font-family:var(--font-mono); }
.credit{ margin-top:28px; padding-top:16px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); }
@media (max-width:720px){ .detail-hero{ grid-template-columns:1fr; gap:18px; } .controls div{ grid-template-columns:1fr; gap:4px; } }
.mods{ list-style:none; padding:0; margin:8px 0 0; }
.mods li{ padding:11px 0; border-bottom:1px solid var(--hairline); color:var(--ink-dim); font-size:.95rem; }
.mods li:last-child{ border-bottom:none; }
.mods strong{ color:var(--text); font-family:var(--font-mono); }
.mods .next{ display:inline-block; margin-right:9px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:2px 8px; color:var(--pink); background:rgba(255,91,200,0.08); border:1px solid rgba(255,91,200,0.40); vertical-align:middle; }
.video-note{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); margin-top:8px; }
.tag.avail{ color:var(--accent); background:rgba(0,255,204,0.12); border:1px solid rgba(0,255,204,0.50); }
.store-cta{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
.store-cta .btn{ min-width:180px; }

/* ----- Demo video: shared frame + per-clip aspect modifier ----- */
.demo-video{ display:block; width:100%; height:auto; background:#000; border:1px solid var(--border); border-left:2px solid var(--border-glow); }
.demo-video.ar-square{ aspect-ratio:1 / 1; max-width:520px; }
.demo-video.ar-wide{ aspect-ratio:1920 / 822; }

/* ----- Controls list: all project build-logs use the 150px label column ----- */
.controls div{ padding:12px 0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:baseline; }


/* ===== Projects index page (moved from its inline <style>) ===== */
/* Projects page - terminal image gallery + build list */
  .proj-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:14px;
    margin-top:16px;
    counter-reset:scan;
  }
  .proj-gallery figure{
    margin:0;
    border-radius:0;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--bg-alt);
    transition:border-color .2s steps(4),box-shadow .2s steps(4);
  }
  .proj-gallery figure:hover{ border-color:var(--accent); box-shadow:0 0 20px rgba(0,255,204,0.08); }
  .proj-gallery .frame{ position:relative; aspect-ratio:1/1; overflow:hidden; counter-increment:scan; isolation:isolate; }
  /* Pedal + circuit-bent photos are 3:4 portrait - give them a matching frame so nothing gets cropped */
  #pedals .proj-gallery .frame,
  #circuit-bent .proj-gallery .frame{ aspect-ratio:3/4; }
  .proj-gallery img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.3) contrast(1.1); opacity:.78; transition:filter .3s ease,opacity .3s ease; }
  .proj-gallery figure:hover img{ filter:saturate(1) contrast(1); opacity:1; }
  .proj-gallery .frame::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.18) 50%),
      linear-gradient(90deg,rgba(255,0,0,.04),rgba(0,255,0,.02),rgba(0,0,255,.04));
    background-size:100% 3px,3px 100%;
  }
  .proj-gallery .frame::after{
    content:"SCAN_00" counter(scan); position:absolute; top:5px; right:7px; z-index:3;
    font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--accent); opacity:.55;
  }
  .proj-gallery figcaption{ padding:10px 12px 13px; font-size:.82rem; color:var(--ink-dim); }
  .proj-gallery figcaption strong{
    display:block; font-family:var(--font-mono); color:var(--text); font-weight:700; font-size:.9rem; margin-bottom:4px;
  }
  .proj-gallery figcaption .desc{ display:block; line-height:1.55; }
  .proj-log-link{
    display:inline-block; margin-top:9px;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.5px;
    color:var(--accent);
  }
  .bench-list{ list-style:none; padding:0; margin:14px 0 0; }
  .bench-list li{
    padding:14px 0; border-bottom:1px solid var(--border);
    color:var(--ink-dim); font-size:15.5px;
  }
  .bench-list li:last-child{ border-bottom:none; }
  .bench-list li strong{ color:var(--text); font-family:var(--font-mono); }
  .tag{
    display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
    font-weight:700; padding:3px 9px; border-radius:0; margin-right:10px; vertical-align:middle;
    border:1px solid rgba(0,255,204,0.40); color:var(--accent); background:rgba(0,255,204,0.07);
  }
  .tag::before{ content:"[ "; }
  .tag::after{ content:" ]"; }
  .tag--planned{ border-color:rgba(255,91,200,0.40); color:var(--pink); background:rgba(255,91,200,0.07); }
  .empty-note{
    margin-top:14px; padding:16px; border-radius:0;
    border:1px dashed rgba(255,255,255,0.18); color:var(--ink-soft); font-size:.95rem; font-family:var(--font-mono);
  }