/* ============================================================
   VOCALISE — CASE STUDY PAGE STYLES
   Layout specific to work/*.html pages. Shared tokens, base
   elements, buttons, nav and footer live in assets/css/site.css,
   loaded alongside this file.
   ============================================================ */

h1,h2,h3,h4{font-weight:700;letter-spacing:-0.02em;line-height:1.15;}
.lede{color:var(--ink-soft);font-size:17px;line-height:1.65;}

/* ── NAV (this page's #navbar treatment) ───────────── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}

/* ── BACK LINK ──────────────────────────────────────── */
.back-link{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-bottom:22px;}
.back-link:hover{color:var(--ink);}

/* ── HERO ───────────────────────────────────────────── */
.work-hero{padding:118px 0 0;background:var(--alt-bg);border-bottom:1px solid var(--line);}
.work-hero-inner{padding-bottom:48px;}
.work-hero-logo-badge{display:inline-flex;align-items:center;padding:9px 14px;background:#fff;border:1px solid var(--alt-border);border-radius:8px;margin-bottom:22px;}
.work-hero-logo{height:35px;width:auto;max-width:226px;object-fit:contain;}
.work-hero h1{font-size:clamp(32px,4.4vw,48px);margin:14px 0 10px;max-width:760px;}
.work-hero .lede{max-width:640px;}
.work-hero-meta{display:flex;flex-wrap:wrap;gap:32px;margin-top:36px;padding-top:28px;border-top:1px solid var(--alt-border);}
.work-hero-meta-item .label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;}
.work-hero-meta-item .val{font-size:14.5px;font-weight:600;color:var(--ink);}

/* ── OVERVIEW: ABOUT CLIENT + IMAGE ─────────────────── */
.overview-row{display:grid;grid-template-columns:1fr 2fr;gap:44px;align-items:start;margin-top:40px;padding-top:32px;border-top:1px solid var(--alt-border);}
.about-copy .eyebrow{margin-bottom:14px;}
.about-copy .eyebrow.skills-eyebrow{margin-top:28px;}
.about-copy p{color:var(--ink-soft);font-size:15px;line-height:1.7;}
.overview-image{aspect-ratio:16/10;width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.overview-image img{width:100%;height:100%;object-fit:cover;}

/* ── SKILLS ─────────────────────────────────────────── */
.skills-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.skill-tag{font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;background:var(--alt-bg);border:1px solid var(--alt-border);color:var(--ink);}

/* ── NARRATIVE SECTIONS ─────────────────────────────── */
.narrative-section{padding:56px 0;border-bottom:1px solid var(--line);}
.narrative-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;}
.narrative-grid .narrative-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding-top:2px;}
.narrative-grid h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:16px;}
.narrative-grid p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;max-width:680px;}
.narrative-grid p + p{margin-top:14px;}

/* ── CTA ────────────────────────────────────────────── */
.work-cta{padding:64px 0;text-align:center;}
.work-cta h2{font-size:clamp(24px,3vw,32px);margin-bottom:16px;}
.work-cta .lede{max-width:520px;margin:0 auto 28px;}
.work-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:820px){
  .narrative-grid{grid-template-columns:1fr;gap:12px;}
  .overview-row{grid-template-columns:1fr;gap:28px;}
  .overview-image{order:-1;}
  .nav-links{display:none;}
}