/* ─── Tokens ─────────────────────────────────────────── */
:root {
  --bg:        #fafaf8;
  --text:      #131310;
  --muted:     #858574;
  --border:    rgba(19, 19, 16, 0.1);
  --nav-bg:    rgba(250, 250, 248, 0.96);
  --container: 1280px;
  --pad:       48px;
  --nav-h:     64px;
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
html { scroll-behavior: smooth; }
body { font-family: 'Karla', sans-serif; font-weight: 400; background: var(--bg); color: var(--text); }

/* ─── Layout ─────────────────────────────────────────── */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sec-border { border-top: 0.727px solid var(--border); }

/* ─── Helpers ────────────────────────────────────────── */
.eyebrow {
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── Nav ────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--nav-bg);
  border-bottom: 0.727px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.nav__logo {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.96px;
  text-transform: uppercase;
  color: var(--text);
}
.nav__links { display: flex; gap: 40px; }
.nav__links a {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.56px;
  color: var(--muted);
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--text); }

/* ─── Project Hero ───────────────────────────────────── */
.project-page { padding-top: var(--nav-h); }

.project-hero .wrap { padding-top: 96px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s;
}
.back-link:hover { color: var(--text); }

.project-eyebrow { margin-top: 48px; }

.project-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 92.487px;
  line-height: 1;
  letter-spacing: -0.9249px;
  color: var(--text);
  margin-top: 24px;
}

/* ─── Meta bar ───────────────────────────────────────── */
.meta-bar {
  margin-top: 56px;
  border-top: 0.727px solid var(--border);
  padding: 28px 0;
  display: flex;
}
.meta-item { flex: 1; }
.meta-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-value {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  margin-top: 6px;
}

/* ─── Hero image ─────────────────────────────────────── */
.project-hero-img { height: 464px; }
.project-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─── Summary ────────────────────────────────────────── */
.summary .wrap { padding-top: 80px; padding-bottom: 80px; }
.summary-text {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 30px;
  line-height: 46.4px;
  color: var(--text);
  max-width: 700px;
}

/* ─── Case Study Sections ────────────────────────────── */
.cs-section .wrap { padding-top: 112px; padding-bottom: 112px; }

.section-rule {
  display: flex;
  align-items: center;
  gap: 24px;
}
.section-rule .eyebrow { flex-shrink: 0; }
.rule-line {
  flex: 1;
  height: 0.727px;
  background: var(--border);
}

/* Text content indented 320px from content-left */
.cs-content {
  margin-top: 64px;
  margin-left: 320px;
  max-width: 608px;
}
.cs-heading {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 26.4px;
  line-height: 38.28px;
  color: var(--text);
}
.cs-body {
  font-size: 16px;
  line-height: 28.48px;
  color: var(--muted);
  margin-top: 28px;
}

/* ─── Section images ─────────────────────────────────── */
.cs-image {
  margin-top: 64px;
  overflow: hidden;
}
.cs-image img {
  width: 100%;
  height: 462px;
  object-fit: contain;
}

.image-pair {
  margin-top: 64px;
  display: flex;
  gap: 16px;
}
.image-pair img {
  flex: 1;
  min-width: 0;
  height: 342px;
  object-fit: cover;
}
.image-pair img:last-child { object-fit: contain; }

/* ─── Process ────────────────────────────────────────── */
.process-intro {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 26.4px;
  line-height: 38.28px;
  color: var(--text);
  max-width: 560px;
  margin-top: 64px;
}

.process-steps { margin-top: 80px; }

.process-step {
  display: flex;
  padding: 56px 0;
  border-bottom: 0.727px solid var(--border);
}
.process-step:last-child { border-bottom: none; }

.step-num {
  width: 320px;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.step-body { max-width: 580px; }
.step-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--text);
}
.step-desc {
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
  margin-top: 16px;
}
.step-image {
  margin-top: 32px;
  background: #fff;
  padding: 32px;
}
.step-image img {
  width: 100%;
  max-height: 290px;
  object-fit: contain;
}

/* ─── Dark placeholder ───────────────────────────────── */
.dark-placeholder {
  background: var(--text);
  min-height: 400px;
}

/* ─── Next Project ───────────────────────────────────── */
.next-project {
  background: var(--text);
  border-top: 0.727px solid rgba(19, 19, 16, 0.1);
}
.next-project .wrap {
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.next-label {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.4);
}
.next-link {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 51.382px;
  line-height: 1;
  color: #fafaf8;
  transition: opacity 0.15s;
}
.next-link:hover { opacity: 0.75; }

/* ─── Footer ─────────────────────────────────────────── */
.footer .wrap {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy {
  font-size: 12px;
  letter-spacing: 0.24px;
  color: var(--muted);
}
.footer__links { display: flex; gap: 32px; }
.footer__links a {
  font-size: 12px;
  letter-spacing: 0.48px;
  color: var(--muted);
  transition: color 0.15s;
}
.footer__links a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   768px  – tablet: scale project title, reduce section padding
   600px  – mobile: stack all layouts, remove 320px offset
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root { --pad: 32px; }

  .project-title     { font-size: 64px; }
  .cs-section .wrap  { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 600px) {
  :root {
    --pad:   20px;
    --nav-h: 88px;
  }

  /* ── Nav – stack ── */
  .nav__inner {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 10px;
  }
  .nav__links       { gap: 18px; }
  .nav__links a     { font-size: 13px; }

  /* ── Project hero ── */
  .project-hero .wrap  { padding-top: 40px; }
  .project-title       { font-size: 40px; letter-spacing: -0.4px; margin-top: 16px; }
  .project-eyebrow     { margin-top: 24px; }
  .meta-bar            { flex-wrap: wrap; margin-top: 32px; }
  .meta-item           { min-width: 50%; flex: none; padding-bottom: 16px; }
  .project-hero-img    { height: 240px; }

  /* ── Summary ── */
  .summary .wrap    { padding-top: 40px; padding-bottom: 40px; }
  .summary-text     { font-size: 20px; line-height: 30px; max-width: 100%; }

  /* ── Case study sections ── */
  .cs-section .wrap { padding-top: 56px; padding-bottom: 56px; }

  /* Remove the 320px left indent – content goes full width */
  .cs-content       { margin-left: 0; max-width: 100%; margin-top: 40px; }
  .cs-heading       { font-size: 20px; line-height: 30px; }
  .cs-body          { font-size: 15px; }

  /* ── Section images ── */
  .cs-image img     { height: auto; max-height: 260px; }
  .image-pair       { flex-direction: column; gap: 12px; }
  .image-pair img   { flex: none; width: 100%; height: 220px; }

  /* ── Process ── */
  .process-intro    { font-size: 20px; line-height: 30px; margin-top: 32px; max-width: 100%; }
  .process-steps    { margin-top: 40px; }

  /* Stack number above content instead of side-by-side */
  .process-step     { flex-direction: column; gap: 8px; padding: 36px 0; }
  .step-num         { width: auto; }
  .step-body        { max-width: 100%; }
  .step-image       { padding: 16px; }

  /* ── Dark placeholder ── */
  .dark-placeholder { min-height: 160px; }

  /* ── Next project ── */
  .next-project .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .next-link        { font-size: 28px; }

  /* ── Footer ── */
  .footer .wrap     { flex-direction: column; align-items: flex-start; gap: 16px; }
}