/* Studio identity and gallery layouts. The shared form and offer styles live in styles.css. */
body[data-studio] {
  --paper: #f7f5ed;
  --white: #fffdf7;
  --ink: #232a20;
  --olive: #2e3927;
  --muted: #555d4d;
  --line: #d9dccf;
  --clay: #85432c;
  --intro-bg: #202a1f;
  --intro-ink: #f8f6e9;
  --intro-accent: #d5e59c;
  --intro-rule: #6a765d;
  --feature-bg: #e8dfc7;
  --feature-ink: #30382b;
  --gallery-first: #eae5d4;
  --gallery-second: #ddc4af;
  --pricing-bg: #edeee3;
}

body[data-studio="florist"] {
  --paper: #fbf6f7;
  --white: #fffafa;
  --ink: #381f34;
  --olive: #46243f;
  --muted: #664f61;
  --line: #dfced8;
  --clay: #7d3859;
  --intro-bg: #eedfe9;
  --intro-ink: #381f34;
  --intro-accent: #7d3859;
  --intro-rule: #bda6b8;
  --feature-bg: #43213a;
  --feature-ink: #fbecf3;
  --gallery-first: #e5e6d5;
  --gallery-second: #e9d5de;
  --pricing-bg: #f0e6ed;
}

.header-inner {
  min-height: 76px;
}

.primary-nav {
  gap: clamp(14px, 2vw, 29px);
}

.primary-nav a[aria-current="page"] {
  border-bottom: 1px solid currentColor;
  font-weight: 700;
}

.primary-nav .nav-cta {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  margin-left: 0;
  padding: 9px 13px;
}

.primary-nav .nav-cta:hover {
  background: var(--paper);
  color: var(--ink);
}

.primary-nav .nav-cta span {
  margin-left: 8px;
}

.studio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "intro feature";
  margin-top: clamp(18px, 3vw, 44px);
}

[data-studio="florist"] .studio-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "feature intro";
}

.studio-intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(28px, 4.4vw, 70px);
  color: var(--intro-ink);
  background: var(--intro-bg);
}

.studio-intro .eyebrow {
  color: var(--intro-accent);
  font-size: 11px;
  letter-spacing: .16em;
}

.studio-intro h1 {
  font-size: clamp(2.85rem, 5.45vw, 5.55rem);
  letter-spacing: -.065em;
  line-height: .98;
  margin-block: .3em;
}

.studio-intro h1 em {
  color: var(--intro-accent);
}

.studio-description {
  color: inherit;
  font-size: 15px;
  max-width: 39ch;
  margin-top: 0;
  line-height: 1.6;
}

.studio-intro .hero-actions {
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 25px;
}

.studio-intro .button-dark {
  color: var(--intro-bg);
  background: var(--intro-ink);
  border-color: var(--intro-ink);
}

.studio-intro .button-dark:hover {
  color: var(--intro-ink);
  background: transparent;
}

.studio-intro .text-link {
  color: inherit;
}

.studio-intro :focus-visible {
  outline-color: var(--intro-accent);
}

.studio-meta {
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--intro-rule);
  font-size: 11px;
  letter-spacing: .035em;
}

.studio-feature {
  grid-area: feature;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
  background: var(--feature-bg);
  color: var(--feature-ink);
}

.studio-poster {
  display: block;
  width: min(100%, 338px);
  height: auto;
  box-shadow: 0 14px 32px #1e132326;
}

.studio-feature-caption {
  width: min(100%, 338px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
}

.studio-feature-caption strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.studio-feature-caption span,
.studio-purpose {
  font-size: 9px;
  letter-spacing: .12em;
}

.studio-purpose {
  text-transform: uppercase;
}

.service-strip {
  margin-top: 22px;
}

.work-section {
  padding-block: clamp(56px, 7vw, 96px);
}

.work-heading {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.work-grid {
  gap: clamp(22px, 3vw, 44px);
}

.work-item {
  min-width: 0;
}

.sample-button {
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid var(--line);
}

.sample-breakfast {
  background: var(--gallery-first);
}

.sample-cake {
  background: var(--gallery-second);
}

.sample-button img {
  width: min(100%, 318px);
}

.work-item figcaption {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.work-item .studio-purpose {
  color: var(--clay);
  font-weight: 700;
}

.pricing-section {
  background: var(--pricing-bg);
  border-color: var(--line);
}

.price-card {
  border-color: var(--line);
}

.trial-card {
  border-top-color: var(--olive);
}

@media (max-width: 880px) {
  .studio-intro {
    padding: 28px;
  }

  .studio-feature {
    padding: 24px;
  }
}

@media (max-width: 680px) {
  .studio-hero,
  [data-studio="florist"] .studio-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "feature";
  }

  .studio-intro h1 {
    font-size: clamp(2.7rem, 10.5vw, 4.25rem);
  }

  .studio-description {
    font-size: 14px;
  }

  .studio-feature {
    padding: 22px;
  }

  .studio-poster,
  .studio-feature-caption {
    width: min(100%, 300px);
  }
}

@media (max-width: 600px) {
  .header-inner {
    min-height: 72px;
  }

  .primary-nav .nav-cta {
    flex-basis: auto;
  }

  .studio-intro .hero-actions {
    align-items: flex-start;
  }

  .work-item figcaption {
    margin-top: 14px;
  }
}