/* Shared stylesheet for the generated project case-study pages (/work/<id>.html).
   Clean, fast, dark + cyan — the brand, but content-first (no WebGL). */
@font-face { font-family:'Clash Display'; src:url('fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('fonts/ClashDisplay-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --ink:#05080b; --panel:#0a1015; --text:#ECEEF3; --muted:#93A9B0;
  --cyan:#4FE3FF; --cyan-glow:rgba(79,227,255,0.35); --green:#5be08c;
  --disp:'Clash Display',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--ink); color:var(--text); }
body {
  font-family:var(--disp); line-height:1.6; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(10,60,72,0.35) 0%, rgba(5,8,11,0) 60%),
    var(--ink);
  min-height:100vh;
}
.wrap { max-width:760px; margin:0 auto; padding:40px clamp(20px,5vw,40px) 100px; }

.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(48px,9vh,90px); }
.home { font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:0.18em; color:var(--text); text-decoration:none; text-shadow:0 0 20px rgba(79,227,255,0.25); }
.back { font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--cyan); }

.role { font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); margin:0 0 16px; text-shadow:0 0 14px var(--cyan-glow); }
h1 { font-family:var(--disp); font-weight:600; font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.05; letter-spacing:-0.01em; margin:0 0 18px;
     background:linear-gradient(172deg,#F7FCFD,#C6EAF4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tagline { font-size:clamp(1.1rem,2vw,1.35rem); color:rgba(196,222,230,0.92); margin:0 0 22px; }
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 8px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.status { padding:4px 12px; border:1px solid rgba(120,150,160,0.28); border-radius:999px; letter-spacing:0.04em; }
.live { display:inline-flex; align-items:center; gap:7px; color:var(--green); }
.live .d { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

.body { margin-top:clamp(40px,7vh,64px); font-size:1.05rem; color:rgba(208,224,230,0.9); }
.body p { margin:0 0 20px; }

.section-k { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cyan); margin:clamp(40px,6vh,56px) 0 18px; padding-bottom:12px; border-bottom:1px solid rgba(79,227,255,0.12); }
.hl { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.hl li { position:relative; padding-left:22px; color:rgba(200,220,226,0.9); }
.hl li::before { content:''; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan-glow); }
.stack { display:flex; flex-wrap:wrap; gap:8px; }
.stack span { font-family:var(--mono); font-size:11.5px; color:rgba(160,186,196,0.9); padding:5px 11px; border-radius:7px; background:rgba(79,227,255,0.07); border:1px solid rgba(79,227,255,0.14); }
.links { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.links a { font-family:var(--mono); font-size:12.5px; letter-spacing:0.03em; color:#06222b; background:var(--cyan); padding:10px 18px; border-radius:999px; text-decoration:none; box-shadow:0 0 26px -8px var(--cyan-glow); }
.links a.ghost { color:var(--cyan); background:transparent; border:1px solid rgba(79,227,255,0.3); box-shadow:none; }
.foot { margin-top:clamp(56px,9vh,90px); padding-top:24px; border-top:1px solid rgba(79,227,255,0.1); font-family:var(--mono); font-size:12px; color:var(--muted); }
.foot a { color:var(--cyan); text-decoration:none; }