@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Manrope:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap');

:root {
  /* Site-wide colour tone, per the client's own implementation guide
     (Divisha_Bhatia_Sitewide_Color_Tone_Implementation_Guide.md) —
     exact hex values from that document, not approximated. 70/20/10
     balance: Warm Cream dominant, Deep Plum-Brown for text/dark
     sections, Powder Blue as a small accent only (never large fills,
     never small text — see the guide's contrast table). Replaces the
     earlier best-guess "Cool Fall Breeze" Pantone approximation. */
  --color-cream: #F8E7C9;
  --color-blue: #B6CBE0;
  --color-plum: #4F424C;
  --color-ivory: #FFFDF8;
  --color-blue-soft: #E6EFF7;
  --color-plum-muted: #776A72;
  --color-ink: #241F23;
  /* --color-charcoal was the old "primary text" token, referenced in
     many rules across styles.css — the guide wants Deep Plum for
     primary/heading text everywhere (Ink is reserved for the narrow
     "long-form body copy needing maximum readability" case only), so
     the alias points there rather than at Ink. */
  --color-charcoal: var(--color-plum);
  --color-paper: var(--color-ivory);
  --color-rule: rgba(79, 66, 76, 0.18);
  --color-rule-strong: rgba(79, 66, 76, 0.45);
  --color-photo-overlay: rgba(79, 66, 76, 0.42);
  --color-muted: var(--color-plum-muted);
  /* Aliases: every existing rule in styles.css references the site's
     accent color as --color-oxblood(-dark) and its secondary as
     --color-moss(-soft) — pointing those at the guide's tokens applies
     it everywhere without renaming every rule. Deep Plum is the
     primary accent (headings, buttons, nav, dark sections); Powder
     Blue is the secondary/decorative accent only (hover states,
     underlines, small highlights) per the guide's 70/20/10 rule. */
  --color-oxblood: var(--color-plum);
  --color-oxblood-dark: #3A3038;
  --color-moss: var(--color-blue);
  --color-moss-soft: var(--color-blue-soft);
  /* Per the client's final font-combination spec: Cormorant Garamond
     (500-600 weight) for the hero/display heading only, Manrope for
     everything else site-wide — logo, nav, body text, small captions
     — replacing the interim all-sans (Archivo) direction. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Manrope", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --page-gutter: clamp(1.5rem, 4vw, 4.5rem);
  --section-space: clamp(6rem, 10vw, 10.5rem);
  --grid-gap: clamp(1.5rem, 3vw, 3rem);
  --content-max: 90rem;
  --ease-editorial: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-plum); background: var(--color-cream); font-family: var(--font-ui); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.eyebrow, .meta { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.page-shell { width: min(100% - 2 * var(--page-gutter), var(--content-max)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.media { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }