/* Public desktop composition: the approved 1312 CSS-pixel viewport is 82rem
   at the browser's default text size. Grow the existing rem-based typography,
   rails and spacing together up to 150%, rather than letting fixed caps shrink
   the composition on wider screens. Phones/tablets keep the normal text base.
   No zoom/transform is applied; browser text enlargement and reflow still work.
   The admin does not have public-site and retains Django's own sizing. */
html.public-site { font-size: clamp(100%, calc(100vw / 82), 150%); }

:root {
  --color-ivory: #fcfaf7;
  --color-cream: #feedc8;
  --color-sage: #a4a482;
  --color-forest: #404115;
  --color-rice: #f1e8d7;
  --color-sand: #dbc6b5;
  --color-terracotta: #96472c;
  --color-coffee: #442d1d;
  --photo-coffee-overlay: rgb(68 45 29 / 30%);

  --surface-page: var(--color-ivory);
  --surface-soft: var(--color-rice);
  --surface-accent: var(--color-sage);
  --surface-dark: var(--color-forest);
  --surface-deep: var(--color-coffee);
  --text-primary: var(--color-coffee);
  --text-secondary: var(--color-forest);
  --text-on-dark: var(--color-ivory);
  --text-warm-on-dark: var(--color-cream);
  --action-primary: var(--color-terracotta);

  --font-display: "Siliphone Display", Georgia, "Times New Roman", serif;
  --font-script: "Siliphone Script", "Brush Script MT", "Segoe Script", cursive;
  --font-interface: "Forum", Georgia, "Lao Sangam MN", "Noto Serif Lao", "Times New Roman", serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  --brand-content-max: 86rem;
  --brand-content-gutter: clamp(var(--space-4), 4vw, var(--space-8));

  --radius-subtle: 0.25rem;
  --radius-soft: 0.75rem;
  --radius-pill: 999rem;

  --layer-base: 0;
  --layer-decoration: 1;
  --layer-content: 10;
  --layer-header: 100;
  --layer-overlay: 200;
  --layer-focus: 300;
}

/* Section background contract: base, photo opacity, then veil. Keep these
   owner-approved values together; page styles own geometry, not extra tints. */
.homepage-hero, .about-approach, .services-hero,
.services-contact, .weddings-hero, .contact-hero {
  --section-base: transparent; --section-photo-opacity: 1; --section-veil: transparent;
}
.homepage-contact { --section-base: transparent; --section-photo-opacity: 1; --section-veil: rgb(0 0 0 / 20%); }
.homepage-story { --section-base: var(--color-sage); --section-photo-opacity: .45; --section-veil: transparent; }
.homepage-testimonial { --section-base: var(--color-sage); --section-photo-opacity: .49; --section-veil: transparent; }
.about-intro { --section-base: var(--color-sage); --section-photo-opacity: .40; --section-veil: transparent; }
.about-connect { --section-base: var(--color-sage); --section-photo-opacity: .28; --section-veil: transparent; }
.services-values, .weddings-process { --section-base: var(--color-forest); --section-photo-opacity: .22; --section-veil: transparent; }
.testimonials-hero, .testimonials-contact { --section-base: transparent; --section-photo-opacity: 1; --section-veil: rgb(0 0 0 / 20%); }
.brand-shared-background { --section-base: var(--color-coffee, #442d1d); --section-photo-opacity: .58; --section-veil: transparent; }