/* Website-owned snapshot of the photography brand palette.
 * Change colors, font stacks and type sizes here; layout.css contains structure.
 * Fonts are self-hosted; no Google Fonts API or external requests are used.
 * Font URLs are relative to the generated assets/css/theme.css (../fonts/...).
 */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --text: #242321;
  --text-muted: #625F5B;
  --accent: #B8745A;
  --accent-dark: #98543D;
  --accent-hover: #7F412E;
  --line: #D7D1C9;
  --cream: #FAF8F4;
  --paper: #FFFFFF;
  --image-placeholder: #e9e5e0;
  --header-background: rgba(255,255,255,0.97);
  --shadow-page: rgba(36,35,33,0.08);
  --photo-radius: 0.5rem;
  --photo-shadow: 0 4px 16px rgba(36,35,33,0.10);
  --card-shadow: 0 4px 20px rgba(36,35,33,0.06);
  --card-radius: 0.75rem;
  --shadow-menu: rgba(36,35,33,0.1);
  --hero-overlay: linear-gradient(90deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.48) 44%, rgba(255,255,255,0.03) 75%);
  --hero-overlay-mobile: linear-gradient(90deg, rgba(255,255,255,0.83), rgba(255,255,255,0.42));
  --display-font: "Playfair Display", Georgia, "Times New Roman", serif;
  --body-font: "Inter", "Segoe UI", Arial, sans-serif;
  --tracking-wordmark: -0.02em;
  --tracking-display: -0.015em;
  --tracking-heading: 0.005em;

  /* Unitless leading follows the fluid font size on every viewport. */
  --leading-display: 1.12;
  --leading-heading: 1.25;
  --leading-lead: 1.4;
  --leading-contact: 1.6;
  --space-heading-copy: clamp(0.875rem, 0.78125rem + 0.4167vi, 1.125rem);
  --space-contact-paragraph: 0.625rem;

  /* Continuous scale between approximately 360 and 1320 CSS px at a 16px root.
   * rem bounds preserve user font preferences; vi adds modest viewport scaling.
   * Breakpoints change layout, not typography. Do not fix the root font size.
   */
  --type-caption: clamp(0.75rem, 0.7266rem + 0.1042vi, 0.8125rem);
  --type-label: clamp(0.6875rem, 0.6641rem + 0.1042vi, 0.75rem);
  --type-small: clamp(0.8125rem, 0.7891rem + 0.1042vi, 0.875rem);
  --type-nav: clamp(0.875rem, 0.8516rem + 0.1042vi, 0.9375rem);
  --type-button: clamp(0.9375rem, 0.9141rem + 0.1042vi, 1rem);
  --type-body: clamp(1rem, 0.9766rem + 0.1042vi, 1.0625rem);
  --type-legal-lead: clamp(1rem, 0.9531rem + 0.2083vi, 1.125rem);
  --type-footer-brand: clamp(1.0625rem, 1.0391rem + 0.1042vi, 1.125rem);
  --type-contact-title: clamp(1.4375rem, 1.3906rem + 0.2083vi, 1.5625rem);
  --type-legal-heading: clamp(1.5rem, 1.4063rem + 0.4167vi, 1.75rem);
  --type-wordmark: clamp(1.375rem, 1.2344rem + 0.625vi, 1.75rem);
  --type-hero: clamp(2.25rem, 1.2891rem + 4.2708vi, 4.8125rem);
  --type-lead: clamp(1.0625rem, 0.8281rem + 1.0417vi, 1.6875rem);
  --type-section: clamp(1.6875rem, 1.5rem + 0.8333vi, 2.1875rem);
  --type-page-title: clamp(2.25rem, 1.7109rem + 2.3958vi, 3.6875rem);
}