/* Golden ratio (φ) — spacing, grid, measure, and image proportions.
   Type stays at least as large as the original; headings use φ to scale up. */

:root {
  --phi: 1.6180339887;
  --phi-inv: 0.6180339887;
  --phi-half: 1.2720196495; /* √φ */

  /* Layout */
  --max-width: 970px; /* 600px × φ */
  --header-h: 4.75rem;

  /* φ spacing scale (rem) — breathing room */
  --s1: calc(1rem * var(--phi));
  --s2: calc(1rem * var(--phi) * var(--phi));
  --s3: calc(1rem * var(--phi) * var(--phi) * var(--phi));
  --s4: calc(1rem * var(--phi) * var(--phi) * var(--phi) * var(--phi));

  --space-section: clamp(var(--s3), 15vw, var(--s4));
  --space-section-tight: clamp(var(--s2), 11vw, var(--s3));

  /* Type: same floor as original — never smaller */
  --text-sm: 1rem;
  --text-base: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --leading: 1.75;
  --leading-tight: 1.65;

  /* Headings scale up with φ^½ */
  --type-h1: clamp(2.5rem, 5.8vw, calc(3.25rem * var(--phi-half)));
  --type-h2: clamp(calc(1.75rem * var(--phi-half)), 4vw, calc(2.375rem * var(--phi-half)));
  --type-h3: calc(1.125rem * var(--phi-half));
  --type-label: 0.8125rem;
  --type-ui: 0.875rem;

  /* Golden line lengths */
  --measure: calc(24rem * var(--phi));
  --measure-narrow: calc(18rem * var(--phi));

  /* Hero portrait column ≈ 1/(1+φ) of content width */
  --hero-aside: calc(var(--max-width) / (1 + var(--phi)));
}

.container {
  width: min(100% - clamp(var(--s1), 8vw, var(--s2)), var(--max-width));
}

.header-inner {
  gap: var(--s1);
  min-height: var(--header-h);
}

.brand img {
  height: calc(50px * var(--phi-half));
}

.nav,
.nav-links {
  gap: var(--s1);
}

.nav-links a,
.menu-toggle,
.btn,
.work-link,
.case-back,
.footer-inner,
.footer-legal a {
  font-size: var(--type-ui);
}

.btn {
  padding: calc(0.85rem * var(--phi-inv) + 0.15rem) calc(1.6rem * var(--phi-inv) + 0.35rem);
}

.section {
  scroll-margin-top: calc(var(--header-h) + var(--s1));
}

.section-cta {
  padding-bottom: calc(var(--space-section) + var(--s2));
}

.section-title,
.case-title {
  font-size: var(--type-h2);
  margin-bottom: var(--s1);
}

.section-lead,
.case-lead {
  max-width: var(--measure-narrow);
  font-size: var(--text-md);
}

.section-header {
  margin-bottom: clamp(var(--s2), 9vw, var(--s3));
}

/* Hero: φ column ratio + portrait sized to aside */
.hero {
  padding: clamp(var(--s2), 15vw, var(--s3)) 0 clamp(var(--s2), 13vw, var(--s3));
}

.hero-grid {
  grid-template-columns: 1.618fr 1fr;
  gap: clamp(var(--s2), 9vw, var(--s3));
}

.hero h1 {
  font-size: var(--type-h1);
  margin-bottom: var(--s1);
  line-height: 1.12;
}

.hero-lead {
  margin-bottom: var(--s2);
  max-width: calc(21rem * var(--phi));
  font-size: var(--text-lg);
}

.hero-actions,
.cta-actions {
  gap: calc(0.85rem * var(--phi-inv) + 0.25rem);
}

.hero-portrait {
  max-width: var(--hero-aside);
  margin-inline: auto;
}

.hero-portrait img {
  width: 100%;
  max-width: min(var(--hero-aside), calc(16.25rem * var(--phi-half)));
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  object-position: center top;
}

.strip {
  padding: clamp(var(--s2), 11vw, var(--s3)) 0;
}

.strip-grid {
  gap: var(--s2) var(--s3);
}

.strip-item {
  font-size: var(--text-sm);
}

.strip-item strong {
  margin-bottom: calc(0.6rem * var(--phi-inv) + 0.2rem);
  font-size: var(--type-label);
}

.card-grid {
  gap: clamp(var(--s1), 3.5vw, var(--s2));
}

.card {
  padding: clamp(var(--s1), 4.5vw, var(--s2));
}

.card h3,
.steps h3 {
  font-size: var(--type-h3);
  margin-bottom: calc(0.75rem * var(--phi-inv) + 0.15rem);
}

.card p,
.steps p,
.work-summary,
.work-facts dd {
  font-size: var(--text-sm);
}

.work-list {
  gap: clamp(var(--s2), 6vw, var(--s3));
}

.work-card {
  grid-template-columns: minmax(calc(9rem * var(--phi)), calc(12.5rem * var(--phi-half))) 1fr;
  gap: clamp(var(--s1), 4vw, var(--s2));
  padding: clamp(var(--s1), 4vw, var(--s2));
}

.work-list--compact {
  gap: var(--s1);
}

.work-card--compact {
  grid-template-columns: minmax(calc(6rem * var(--phi)), calc(8rem * var(--phi-half))) 1fr;
  gap: var(--s1);
  padding: var(--s1) calc(var(--s1) * var(--phi-inv) + 0.35rem);
}

.work-card--compact .work-body h3 {
  font-size: var(--text-base);
}

.work-thumb-preview img {
  height: calc(72px * var(--phi-half));
  max-height: calc(72px * var(--phi-half));
}

.work-meta,
.case-prose h2 {
  font-size: var(--type-label);
}

.work-body h3 {
  font-size: calc(1.25rem * var(--phi-half));
}

.work-facts dt {
  font-size: var(--type-label);
}

.work-tags li {
  font-size: var(--type-label);
  padding: calc(0.35rem * var(--phi-inv) + 0.1rem) calc(0.65rem * var(--phi-inv) + 0.15rem);
}

.steps {
  gap: clamp(var(--s1), 4vw, var(--s2));
}

.steps li {
  padding-top: var(--s1);
}

.steps li::before {
  margin-bottom: calc(0.85rem * var(--phi-inv) + 0.15rem);
  font-size: var(--type-label);
}

.about-copy p {
  max-width: var(--measure);
  margin-bottom: var(--s1);
  font-size: var(--text-md);
}

.cta-block {
  padding: clamp(var(--s2), 11vw, var(--s3)) clamp(var(--s1), 5vw, var(--s2));
}

.cta-block h2 {
  font-size: var(--type-h2);
  margin-bottom: var(--s1);
}

.cta-block p {
  margin-bottom: var(--s2);
  max-width: calc(18.5rem * var(--phi));
  font-size: var(--text-md);
}

.site-footer {
  padding: clamp(var(--s2), 8vw, var(--s3)) 0;
}

.case {
  padding: clamp(var(--s2), 10vw, var(--s3)) 0 clamp(var(--s2), 12vw, var(--s3));
}

.case-header,
.case-prose {
  max-width: var(--measure);
}

.case-figure {
  margin-bottom: var(--s2);
}

.case-figure--portrait {
  max-width: calc(16.25rem * var(--phi));
}

.case-figure figcaption {
  font-size: var(--type-label);
  padding: calc(0.85rem * var(--phi-inv) + 0.1rem) var(--s1);
}

.case-prose p {
  font-size: var(--text-sm);
}

.case-actions {
  margin-top: var(--s2);
  gap: calc(0.85rem * var(--phi-inv) + 0.25rem);
}

.case-figure--landscape img {
  width: 100%;
}

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

  .hero-portrait img {
    max-width: min(200px, calc(12.5rem * var(--phi-half)));
  }
}

@media (max-width: 720px) {
  .hero {
    padding: clamp(var(--s2), 12vw, var(--s3)) 0 clamp(var(--s2), 10vw, var(--s3));
  }

  .strip {
    padding: clamp(var(--s2), 12vw, var(--s3)) 0;
  }

  .section-cta {
    padding-bottom: calc(var(--space-section-tight) + var(--s1));
  }
}