/* ============================================================
   work.css — project pages, SIGNAL system
   Loaded AFTER styles-v2.css; inherits its tokens, grid substrate,
   nav, buttons and footer. Everything here is page-specific.
   Per-project variation is one thing only: --accent.
   ============================================================ */

.work{max-width:var(--container);margin:0 auto;padding:0 var(--pad) 90px;position:relative;z-index:1}
/* styles-v2 puts 96px of padding on every <section>; these are bordered blocks,
   so they set their own spacing via margin-top instead */
.work section{padding:0}

/* back link — a readout, not a button */
.back{display:inline-flex;align-items:center;gap:9px;margin:26px 0 40px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.back svg{width:13px;height:13px}
.back:hover{color:var(--accent)}

/* ---- hero ---- */
.work-hero{display:grid;grid-template-columns:1fr;gap:34px;align-items:start;
  padding-bottom:44px;border-bottom:1px solid var(--line)}
.work-hero.has-media{grid-template-columns:1fr .82fr;gap:52px}
.work-hero .eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.work-hero .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}
.work-hero h1{font-size:clamp(2.3rem,5.2vw,3.6rem);letter-spacing:-.035em;margin-bottom:16px}
.tagline{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--accent);
  letter-spacing:-.015em;margin-bottom:18px}
.what{font-size:1.02rem;color:var(--ink-soft);max-width:52ch}

.work-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:4px 10px}
.chip.plain{color:var(--muted);border-color:var(--line-2)}
.chip.gold{color:var(--gold);border-color:rgba(244,196,48,.4)}
.work-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.work-actions .btn-primary{background:var(--accent);color:#07100C}
.work-actions .btn-primary:hover{background:#fff;color:#07100C}
.work-actions .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* rotating hero media — bracketed frame, same language as the triptych */
.wh-media{position:relative}
.rot{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-2);background:#0a0c0d}
.rot::before,.rot::after{content:"";position:absolute;width:11px;height:11px;border-color:var(--accent);
  border-style:solid;z-index:2;opacity:.7}
.rot::before{top:6px;left:6px;border-width:1px 0 0 1px}
.rot::after{bottom:6px;right:6px;border-width:0 1px 1px 0}
.rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.rot img.on{opacity:1}
.rot-cap{margin-top:11px;font-size:.82rem;color:var(--muted);line-height:1.5}

/* ---- UI screenshot ---- */
.ui-shot{margin-top:52px}
.shot{border:1px solid var(--line);background:var(--s1)}
.shot img{width:100%;display:block;border-bottom:1px solid var(--line)}
.shot figcaption{padding:14px 16px;font-size:.86rem;color:var(--muted);line-height:1.6}

/* ---- narrative: the 4-slot case study ---- */
.narrative-wrap{margin-top:64px}
.narrative{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.slot{background:var(--bg);padding:30px 28px}
.slot .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.slot .lbl::before{content:"";width:16px;height:1px;background:var(--accent)}
.slot p{font-size:.97rem;color:var(--ink-soft);line-height:1.72}

/* ---- devlog: a terminal feed ---- */
.devlog{margin-top:64px;border:1px solid var(--line);background:var(--s1)}
.devlog .head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.devlog .head h3{font-size:1rem;letter-spacing:-.01em}
.devlog .src{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px}
.devlog .src::before{content:"";width:6px;height:6px;background:var(--accent)}
.feed{list-style:none;margin:0;padding:6px 0}
.feed li{display:flex;gap:20px;padding:9px 20px;align-items:baseline}
.feed li + li{border-top:1px solid rgba(255,255,255,.035)}
.feed time{font-family:var(--mono);font-size:.66rem;color:var(--muted);flex:0 0 84px;letter-spacing:.04em}
.feed .msg{font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.feed .empty{color:var(--muted);font-size:.9rem;padding:14px 20px}

/* ---- closing CTA ---- */
.cta{margin-top:64px}
.cta-box{border:1px solid var(--line-2);background:var(--s1);padding:46px 42px;position:relative}
.cta-box::before,.cta-box::after{content:"";position:absolute;width:12px;height:12px;
  border-color:var(--accent);border-style:solid}
.cta-box::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.cta-box::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.cta-box .hook{font-size:.95rem;color:var(--ink-soft);max-width:56ch;margin-bottom:16px}
.cta-box h3{font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.025em;margin-bottom:26px;max-width:24ch}
.cta-box .btn-primary{background:var(--accent);color:#07100C}
.cta-box .btn-primary:hover{background:#fff;color:#07100C}

@media (max-width:900px){
  .work-hero.has-media{grid-template-columns:1fr;gap:32px}
  .narrative{grid-template-columns:1fr}
  .cta-box{padding:34px 24px}
  .slot{padding:26px 22px}
  .feed li{flex-direction:column;gap:4px}
  .feed time{flex:none}
}