@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Dark mode (default) - matching Figma design */
  --bg: #000000;
  --text: #ffffff;
  --muted: #cccccc;
  --muted-light: #dddddd;
  --hairline: rgba(255,255,255,0.3);
  --hairline-subtle: rgba(255,255,255,0.12);
  --bg-elevated: rgba(255,255,255,.03);

  /* Typography scale - matching Figma */
  --step--1: 0.95rem; /* 15.2px - small text */
  --step-0:  1rem;     /* 16px - body text */
  --step-1:  1.25rem;  /* 20px - navigation */
  --step-2:  1.375rem; /* 22px - subheadings */
  --step-3:  1.875rem; /* 30px - section labels */
  --step-4:  2.5rem;   /* 40px - large text blocks */

  /* Spacing - matching Figma */
  --page-pad-left: 210px;
  --page-pad-right: 80px;
  --content-left: 210px;
  --content-right: 759px;
  --content: 72ch;
  --content-wide: 92ch;
  --radius: 18px;
  --left-nav-width: 200px;
  
  /* Section spacing */
  --section-spacing: 200px;
}

/* Light mode - OS preference */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --text: #000000;
    --muted: #666666;
    --muted-light: #333333;
    --hairline: rgba(0,0,0,0.3);
    --hairline-subtle: rgba(0,0,0,0.12);
    --bg-elevated: rgba(0,0,0,.03);
  }
  
  /* Light mode placeholder images */
  .placeholder-image {
    background: #f5f5f5;
  }
}

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

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a{ color: inherit; }

/* Top Navigation - matching Figma */
.topNav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline-subtle);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: 1320px;
  margin: 0 auto;
}

.topNav-left{
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
}

.topNav-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.topNav-right{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
}

.topNav a{
  text-decoration: none;
  color: var(--muted-light);
  font-size: 1rem; /* 16px */
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.7px;
  transition: color 0.2s;
  padding: 4px 0;
  font-family: 'Inter', sans-serif;
}

.topNav-name{
  text-transform: none !important;
  color: var(--text) !important;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: normal;
}

.topNav a:hover{
  color: var(--text);
}

.topNav a.active{
  color: var(--text);
  font-weight: 500;
}

.topNav-social{
  text-transform: none !important;
  letter-spacing: normal;
  display: flex;
  align-items: center;
  padding: 4px;
  transition: opacity 0.2s;
}

.topNav-social:hover{
  opacity: 0.7;
}

.topNav-social svg{
  width: 20px;
  height: 20px;
  color: var(--muted-light);
}

/* Responsive Navigation */
@media (max-width: 767px) {
  .topNav {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 16px;
  }

  .topNav-left {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .topNav-center {
    order: -1;
  }

  .topNav-right {
    justify-content: center;
  }

  .topNav a {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .topNav {
    padding: 20px var(--page-pad-left);
  }
}

.caseStudy{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(18px, 3vw, 40px);
  padding: 40px 20px;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .caseStudy {
    padding: 60px 40px;
  }
}

@media (min-width: 1024px) {
  .caseStudy {
    padding: 80px var(--page-pad-right) 80px var(--page-pad-left);
  }
}

@media (max-width: 980px){
  .caseStudy{ 
    grid-template-columns: 1fr; 
  }
}

.toc{
  position: sticky;
  top: 100px;
  align-self: start;
  border-left: 1px solid var(--hairline-subtle);
  padding-left: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

@media (max-width: 980px){
  .toc{ 
    position: relative; 
    top: 0;
    border-left: none; 
    padding-left: 0;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 18px;
    margin-bottom: 24px;
    max-height: none;
  }
}

.toc-item{
  margin-bottom: 4px;
}

.toc-link{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--muted);
  font-size: var(--step--1);
  padding: 6px 0;
  transition: color 0.2s;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.toc-link:hover{ 
  color: var(--text); 
}

.toc-link.active{
  color: var(--text);
  font-weight: 500;
}

.toc-back-to-top{
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline-subtle);
}

.toc-icon{
  font-size: 0.9em;
}

.toc-children{
  margin-left: 16px;
  margin-top: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--hairline-subtle);
}

.main{ min-width: 0; }

.hero{
  max-width: var(--content-wide);
  padding-bottom: clamp(18px, 3vw, 36px);
  border-bottom: 1px solid var(--hairline);
}

.hero h1{
  font-size: var(--step-4); /* 40px */
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
}
.lede{
  font-size: var(--step-0); /* 16px */
  color: var(--muted);
  margin: 0 0 18px;
  font-weight: 400;
  line-height: 1.6;
}
.meta{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.content{
  padding-top: clamp(22px, 3vw, 34px);
}

.content section{
  padding-top: clamp(28px, 4vw, 56px);
  max-width: var(--content-wide);
  scroll-margin-top: 20px;
}

/* Two-column layout for case study sections */
.content section.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: var(--content-wide);
}

.content section.two-col .section-text {
  max-width: 100%;
}

.content section.two-col figure {
  margin: 0;
}

@media (max-width: 767px) {
  .content section.two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.content .label{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem; /* ~12.5px - smaller label */
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.content h2{
  font-size: var(--step-2); /* 22px */
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}
.content p{ 
  margin: 0 0 14px; 
  font-size: var(--step-0); /* 16px */
  line-height: 1.6;
  font-weight: 400;
}
.content ul{ 
  margin: 0 0 14px 1.2em; 
  font-size: var(--step-0);
  line-height: 1.6;
}

figure{
  margin: 18px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline-subtle);
}
figure img{ display:block; width:100%; height:auto; }
.placeholder-image{
  width: 100%;
  height: 400px;
  background: #242627;
  display: block;
}

/* Light mode placeholder */
@media (prefers-color-scheme: light) {
  .placeholder-image {
    background: #f5f5f5;
  }
}
figcaption{
  padding: 10px 12px;
  font-size: var(--step--1);
  color: var(--muted);
  border-top: 1px solid var(--hairline-subtle);
  font-family: 'Inter', sans-serif;
}

/* Pull Quote */
.pullQuote{
  margin: 28px 0;
  padding: 24px 0;
  border-left: 3px solid var(--hairline-subtle);
  padding-left: 20px;
  max-width: var(--content);
}

.pullQuote blockquote{
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}

.pullQuote cite{
  display: block;
  margin-top: 12px;
  font-size: var(--step--1);
  color: var(--muted);
  font-style: normal;
}

/* Callout */
.callout{
  margin: 28px 0;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-subtle);
  background: var(--bg-elevated);
  max-width: var(--content);
}

.callout p{
  margin: 0;
  font-size: var(--step-0);
}

.callout p:not(:last-child){
  margin-bottom: 12px;
}

.callout strong{
  display: block;
  margin-bottom: 8px;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Metrics Grid */
.metricsGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 28px 0;
  max-width: var(--content);
}

.metric{
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-subtle);
  background: var(--bg-elevated);
}

.metricValue{
  font-size: var(--step-2);
  line-height: 1.1;
  margin: 0 0 8px;
  font-weight: 600;
}

.metricLabel{
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}

/* ========================================
   Two-column section layout (global)
   ======================================== */
.two-col-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid var(--hairline);
}

.two-col-section:first-child {
  border-top: none;
  padding-top: 0;
}

.col-left {
  position: sticky;
  top: 100px;
  align-self: start;
}

.col-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-label {
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--text);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  margin: 0 0 24px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Work cards (Case Studies & Stories) */
.work-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--hairline);
  align-items: start;
}

.work-card.stacked {
  grid-template-columns: 1fr;
  gap: 20px;
}

.work-card:first-child {
  border-top: none;
  padding-top: 0;
}

.work-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
}

.work-card-image .placeholder-image {
  width: 100%;
  height: 100%;
}

.work-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-card-title {
  font-size: var(--step-2);
  line-height: 1.15;
  margin: 0;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.work-card-title a {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s;
}

.work-card-title a:hover {
  color: var(--muted-light);
}

.work-card-lede {
  font-size: var(--step-0);
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.work-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--step--1);
}

/* Bottom section */
.bottom-section {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.bottom-text {
  font-size: var(--step-4);
  line-height: 1.4;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}

.bottom-text:last-child {
  margin-bottom: 0;
}

/* Two-col & work-card responsive */
@media (max-width: 767px) {
  .two-col-section {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .col-left {
    position: static;
  }

  .section-label {
    font-size: var(--step-2);
  }

  .work-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .work-card-lede {
    max-width: 100%;
  }

  .bottom-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .bottom-text {
    font-size: var(--step-2);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .two-col-section {
    gap: 40px;
  }

  .work-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}