@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Work+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Work Sans', sans-serif;
  color: #1b1c19;
  background: #faf9f4;
}

h1, h2, h3, .font-serif {
  font-family: 'Newsreader', serif;
}

.font-label {
  font-family: 'Space Grotesk', sans-serif;
}

/* Side nav links */
.nav-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #737785;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #1b1c19;
}

.nav-link.active {
  color: #A08FEF;
  font-weight: 600;
}

/* Right margin callouts */
.margin-callout {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #c2c6d6;
  transition: color 0.3s;
}

.margin-callout.active {
  color: #A08FEF;
}

/* Section subtitle (one-liner under section title) */
.section-subtitle {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #c2c6d6;
  line-height: 1.5;
  margin-bottom: 1.75rem;
  transition: color 0.3s;
}

.section-subtitle.active {
  color: #A08FEF;
}

/* Timeline */
.timeline-step {
  display: flex;
  gap: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.timeline-step::before {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: 1.25rem;
  bottom: -1rem;
  width: 1px;
  background: #c2c6d6;
}

.timeline-step:last-child::before {
  display: none;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #A08FEF;
  flex-shrink: 0;
}

/* Stat blocks */
.stat-block {
  background: #faf9f4;
  padding: 2rem 1.75rem;
}

.stat-number {
  font-family: 'Newsreader', serif;
  font-size: 3.5rem;
  color: #A08FEF;
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* Status tags */
.tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

.tag-shipped {
  color: #A08FEF;
  background: #e3eeff;
}

.tag-backlog {
  color: #737785;
  background: #e9e8e3;
}

.tag-dev {
  color: #424654;
  background: #e9e8e3;
  border-left: 2px solid #A08FEF;
}

/* Stretched link — makes entire positioned parent clickable */
.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Placeholder blocks */
.placeholder-block {
  background: #e9e8e3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section layout */
.section-grid {
  margin-bottom: 6rem;
}

/* Top nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 244, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(194, 198, 214, 0.2);
}

.site-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-nav-logo {
  font-family: 'Newsreader', serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 600;
  color: #1b1c19;
  text-decoration: none;
}

.site-nav-links {
  display: flex;
  gap: 2.5rem;
}

.site-nav-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #737785;
  text-decoration: none;
  transition: color 0.2s;
}

.site-nav-link:hover {
  color: #1b1c19;
}

.site-nav-link.active {
  color: #A08FEF;
  font-weight: 600;
  border-bottom: 1.5px solid #A08FEF;
  padding-bottom: 2px;
}

/* ─── Case study pages ──────────────────────────────────────────── */

/* Layout */
.cs-main          { max-width:1400px; margin:0 auto; padding:0 3rem; }
.cs-hero          { padding:5rem 0 4rem; }
.cs-layout        { display:flex; gap:4rem; align-items:flex-start; }
.cs-content       { flex:1; min-width:0; padding-bottom:8rem; }

/* Hero */
.cs-company       { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:#A08FEF; }
.cs-hero-title    { font-size:clamp(3.5rem,8vw,7rem); line-height:1.0; font-style:italic; color:#1b1c19; margin:0.5rem 0 2rem; letter-spacing:-0.02em; }
.cs-hero-grid     { display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:end; }
.cs-hero-desc     { font-size:1.2rem; color:#424654; line-height:1.65; }
.cs-meta          { display:flex; flex-direction:column; gap:0.75rem; white-space:nowrap; }
.cs-meta-row      { display:flex; justify-content:space-between; gap:3rem; border-bottom:1px solid rgba(194,198,214,0.3); padding-bottom:0.5rem; }
.cs-meta-row:last-child { border-bottom:none; padding-bottom:0; }
.cs-meta-label    { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#737785; }
.cs-meta-value    { font-size:0.65rem; font-weight:600; color:#1b1c19; }

/* Side nav */
.cs-sidenav       { width:160px; flex-shrink:0; position:sticky; top:5rem; height:fit-content; }
.cs-sidenav-title { font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:#1b1c19; font-weight:600; margin-bottom:1.25rem; line-height:1.3; }
.cs-sidenav-links { display:flex; flex-direction:column; gap:0.6rem; }
.nav-link-sub     { padding-left:1rem; font-size:0.75rem; }
.nav-link-sub-sub { padding-left:1.75rem; font-size:0.68rem; color:#9ca3af; }
.cs-subsubsection-title { font-size:1.15rem; font-weight:500; margin-bottom:0.6rem; }

/* Section typography */
.cs-part-label      { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#675974; margin-bottom:0.4rem; }
.cs-section-title   { font-size:2.25rem; margin-bottom:0.4rem; }
.cs-subsection-title { font-size:1.5rem; font-weight:500; margin-bottom:0.75rem; }
.cs-subsection-block { margin-top:3rem; }
.body-text          { font-size:1.05rem; color:#424654; line-height:1.75; }
.body-text-sm       { font-size:0.9rem; color:#424654; line-height:1.6; }
.cs-field-label     { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#737785; margin-bottom:0.5rem; }
.cs-stat-label      { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:#737785; }
.cs-caption         { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:#737785; margin-top:0.75rem; }

/* Timeline */
.cs-timeline-box    { margin-top:2.5rem; padding:1.75rem; background:#f4f4ef; }
.cs-timeline-header { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#737785; margin-bottom:1.5rem; }
.cs-timeline-items  { display:flex; flex-direction:column; gap:1.25rem; }
.cs-month-label     { font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:#737785; }
.cs-timeline-text   { font-size:0.9rem; margin-top:0.2rem; color:#1b1c19; }

/* Grids */
.cs-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#e3e3de; }
.cs-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:#e3e3de; }

/* Cards (personas, etc) */
.cs-card       { background:#f4f4ef; padding:1.5rem; }
.cs-card-label { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#A08FEF; margin-bottom:0.75rem; }

/* Scope compare */
.cs-compare-original   { background:#f4f4ef; padding:1.75rem; }
.cs-compare-rescoped   { background:#faf9f4; padding:1.75rem; }
.cs-compare-label      { font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:#737785; border-bottom:2px solid #e3e3de; padding-bottom:0.75rem; margin-bottom:1rem; }
.cs-compare-label-blue { font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:#A08FEF; border-bottom:2px solid #A08FEF; padding-bottom:0.75rem; margin-bottom:1rem; }
.cs-quote              { font-family:'Newsreader',serif; font-size:1.1rem; font-style:italic; color:#1b1c19; line-height:1.5; }

/* Deliverables */
.cs-deliverables     { display:flex; flex-direction:column; gap:1rem; }
.cs-deliverable      { padding:1.25rem 1.5rem; background:#f4f4ef; display:flex; gap:1.5rem; align-items:flex-start; }
.cs-deliverable-title { font-weight:600; font-size:0.95rem; margin-bottom:0.25rem; }

/* Decisions */
.cs-decisions              { display:flex; flex-direction:column; gap:2rem; margin-bottom:2.5rem; }
.cs-decision               { border-left:2px solid #A08FEF; padding-left:1.5rem; }
.cs-decision-secondary     { border-left:2px solid #c2c6d6; padding-left:1.5rem; }
.cs-validation             { border-right:2px solid #A08FEF; padding-right:1.5rem; text-align:right; }
.cs-validation-red         { border-right:2px solid #ba1a1a; padding-right:1.5rem; text-align:right; }
.cs-decision-label         { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#A08FEF; margin-bottom:0.5rem; }
.cs-decision-label-secondary { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#737785; margin-bottom:0.5rem; }
.cs-validation-label       { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#A08FEF; margin-bottom:0.5rem; }
.cs-validation-label-red   { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#ba1a1a; margin-bottom:0.5rem; }
.cs-decision-title         { font-weight:600; font-size:1rem; margin-bottom:0.5rem; }

/* Placeholder inner content */
.cs-placeholder-inner   { text-align:center; padding:1rem; }
.cs-placeholder-label   { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:#737785; margin-bottom:0.4rem; }
.cs-placeholder-caption { font-family:'Newsreader',serif; font-size:1rem; font-style:italic; color:#1b1c19; }

/* Validation stat blocks (larger) */
.stat-block-lg  { padding:2.5rem 2rem; }
.stat-number-lg { font-size:4rem; }

/* Outcome */
.cs-outcome-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.cs-outcome-item { padding:1.5rem; background:#f4f4ef; display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.cs-outcome-text { font-size:1rem; color:#1b1c19; line-height:1.5; }

/* Footer */
.site-footer {
  background: #f4f4ef;
  margin-top: 4rem;
  padding: 3rem;
  text-align: center;
}

.site-footer-name {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #1b1c19;
  margin-bottom: 1.25rem;
}

.site-footer-links {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.site-footer-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #737785;
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer-link:hover {
  color: #1b1c19;
}