/* ============================================================
   Shared styles for all project case-study pages
   Edit once here and all three project pages update.
   ============================================================ */
:root{
  --bg:#2b2b2d; --panel:#1f1f21; --ink:#f5f3f0; --muted:#9a9a9e;
  --line:#444447; --pink:#f06ba8;
  --display:'Sniglet',system-ui,sans-serif;   /* main page title only */
  --heading:'Outfit',system-ui,sans-serif;    /* section subheadings — more legible */
  --script:'Caveat',cursive;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}

.frame{max-width:1060px;margin:24px auto;padding:22px 30px 60px;border:1px solid var(--line);border-radius:22px;}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;margin-bottom:44px;}
/* combined "← Back to Kira Sun" link: label in body font, name in display font */
.homelink{display:inline-flex;align-items:baseline;gap:8px;color:var(--muted);transition:color .2s;}
.homelink .label{font-size:13px;font-weight:600;letter-spacing:.5px;}
.homelink .name{font-family:var(--display);font-size:22px;color:var(--ink);transition:color .2s;}
.homelink:hover{color:var(--pink);}
.homelink:hover .name{color:var(--pink);}

/* ---------- title block ---------- */
.eyebrow{font-size:12px;letter-spacing:2px;color:var(--pink);font-weight:700;text-transform:uppercase;margin-bottom:14px;}
h1{font-family:var(--display);font-size:clamp(40px,8vw,80px);line-height:.95;letter-spacing:-1px;margin-bottom:10px;}
.script{font-family:var(--script);color:var(--pink);font-size:clamp(28px,5vw,52px);display:inline-block;transform:rotate(-4deg);}
.lead{max-width:660px;color:#d9d7d3;font-size:17px;margin:16px 0 32px;}

/* ---------- hero media ---------- */
.hero{width:100%;border-radius:18px;overflow:hidden;margin-bottom:14px;border:1px solid var(--line);}
.hero img,.hero video{width:100%;}
.caption{font-size:12.5px;color:var(--muted);letter-spacing:.3px;margin-bottom:44px;}

/* ---------- 3-column project overview ---------- */
.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:48px;}
.overview .cell{padding:26px 28px;border-right:1px solid var(--line);}
.overview .cell:last-child{border-right:0;}
.overview .k{font-size:11px;letter-spacing:1.6px;color:var(--pink);text-transform:uppercase;font-weight:700;margin-bottom:10px;}
.overview .v{font-size:14.5px;color:var(--ink);}
.overview .v span{display:block;color:var(--muted);font-size:13px;margin-top:4px;}
@media(max-width:760px){
  .overview{grid-template-columns:1fr;}
  .overview .cell{border-right:0;border-bottom:1px solid var(--line);}
  .overview .cell:last-child{border-bottom:0;}
}

/* ---------- impact stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 56px;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;}
.stat .n{font-family:var(--heading);font-weight:700;font-size:36px;color:var(--pink);line-height:1;letter-spacing:-.5px;margin-bottom:8px;}
.stat .l{font-size:13px;color:#cfcdc9;}
@media(max-width:760px){.stats{grid-template-columns:1fr;}}

/* ---------- sections ---------- */
section{margin-bottom:60px;}
.snum{font-size:11px;letter-spacing:2px;color:var(--pink);font-weight:700;text-transform:uppercase;margin-bottom:10px;}
h2{font-family:var(--heading);font-size:31px;font-weight:600;letter-spacing:-.3px;margin-bottom:16px;}
h3{font-size:17px;font-weight:700;margin:30px 0 10px;}
p.body{color:#cfcdc9;font-size:15.5px;max-width:720px;margin-bottom:16px;}
ul.body{color:#cfcdc9;font-size:15.5px;max-width:720px;margin:0 0 16px 20px;}
ul.body li{margin-bottom:8px;}

/* pull quote / key insight */
.quote{border-left:3px solid var(--pink);padding:6px 0 6px 22px;margin:28px 0;
  font-family:var(--script);font-size:26px;color:var(--ink);max-width:700px;line-height:1.4;}

/* ---------- figures & image grids ---------- */
.figure{margin:26px 0;}
.figure img,.figure video{width:100%;border-radius:14px;border:1px solid var(--line);}
.figure .cap{font-size:12.5px;color:var(--muted);margin-top:10px;}

.imggrid{display:grid;gap:20px;margin:26px 0;}
.imggrid.two{grid-template-columns:1fr 1fr;}
.imggrid.three{grid-template-columns:repeat(3,1fr);}
.imggrid img{width:100%;border-radius:14px;border:1px solid var(--line);}
.imggrid .cap{font-size:12.5px;color:var(--muted);margin-top:8px;}
@media(max-width:760px){.imggrid.two,.imggrid.three{grid-template-columns:1fr;}}

/* placeholder box — swap for a real <img> when assets are ready */
.ph{width:100%;aspect-ratio:16/10;border-radius:14px;border:1px dashed #5a5a5e;
  background:linear-gradient(140deg,#3a2130,#241722);
  display:flex;align-items:center;justify-content:center;
  color:#8d8790;font-size:13px;letter-spacing:1px;text-align:center;padding:16px;}
.ph.tall{aspect-ratio:4/5;}
.ph.wide{aspect-ratio:21/9;}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0;}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;}
.step .i{font-family:var(--heading);font-weight:700;font-size:16px;color:var(--pink);margin-bottom:8px;}
.step .t{font-size:14.5px;font-weight:600;margin-bottom:6px;}
.step .d{font-size:13px;color:var(--muted);}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}

/* ---------- next project nav ---------- */
.nextnav{border-top:1px solid var(--line);padding-top:34px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.nextnav .hint{font-size:11px;letter-spacing:2px;color:var(--pink);text-transform:uppercase;font-weight:700;margin-bottom:6px;}
.nextnav .t{font-family:var(--display);font-size:26px;}
.nextnav a.btn{border:1px solid var(--ink);border-radius:30px;padding:13px 32px;
  font-size:13px;font-weight:600;letter-spacing:1px;transition:background .25s,color .25s;}
.nextnav a.btn:hover{background:var(--ink);color:#1a1a1a;}