/* ============================================================
   BASE — reset, typography, layout primitives, decorative system
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }

p { margin: 0; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Headings ---- */
.display,
h1, .h1 { font-family: var(--font-display); line-height: var(--leading-tight); color: var(--espresso); font-weight: 400; }
.display { font-size: var(--fs-display); font-weight: 300; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--leading-tight); color: var(--espresso); font-weight: 300; }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--leading-snug); color: var(--espresso); }
h4, .h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--leading-snug); color: var(--espresso); }
h5, .h5 { font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--leading-snug); color: var(--espresso); }

.serif { font-family: var(--font-display); }
.italic { font-style: italic; }

/* ---- Eyebrow / label ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-dark);
}
.eyebrow--light { color: var(--gold-light); }
.eyebrow--line::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 0.85em;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.7;
}

.lead { font-size: var(--fs-lead); line-height: var(--leading-snug); color: var(--ink); }

.muted { color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* ---- Layout primitives ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.bg-ivory     { background: var(--ivory); }
.bg-porcelain { background: var(--porcelain); }
.bg-sand      { background: var(--sand); }
.bg-night     { background: var(--night); color: var(--porcelain); }
.bg-espresso  { background: var(--espresso); color: var(--porcelain); }

.bg-night h1, .bg-night h2, .bg-night h3, .bg-night h4, .bg-night h5,
.bg-espresso h1, .bg-espresso h2, .bg-espresso h3, .bg-espresso h4, .bg-espresso h5 { color: var(--porcelain); }

.center { text-align: center; }
.measure { max-width: 56ch; }
.measure-narrow { max-width: 44ch; }
.mx-auto { margin-inline: auto; }

/* ---- Section heading block ---- */
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.bg-night .section-head p, .bg-espresso .section-head p { color: color-mix(in srgb, var(--porcelain) 80%, transparent); }

/* ============================================================
   DECORATIVE SYSTEM
   Film grain overlay (CSS-based) + arch shapes + dahlia motif
   ============================================================ */

/* Film grain — subtle, fixed, non-interactive. Spec §Design language */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Arch frame — capsule shape echoing logo, used on images */
.arch {
  border-radius: var(--radius-arch);
  overflow: hidden;
}
.capsule { border-radius: var(--radius-capsule); overflow: hidden; }

/* Image placeholder — marks where a real asset drops in.
   Labelled so the prototype is reviewable before photos arrive. */
.img-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.5), transparent 60%),
    var(--gold-gradient-soft);
  color: var(--gold-dark);
  isolation: isolate;
}
.img-slot::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(143, 106, 60, 0.3);
  border-radius: inherit;
  pointer-events: none;
}
.img-slot__label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  line-height: 1.5;
  max-width: 80%;
  opacity: 0.85;
}
.img-slot--dark {
  background:
    radial-gradient(120% 80% at 70% 10%, rgba(195,154,94,0.28), transparent 55%),
    linear-gradient(160deg, #241a10, #120c06);
  color: var(--gold-light);
}
.img-slot--dark::before { border-color: rgba(226, 196, 146, 0.28); }

/* Real image filling an arch/aspect-ratio frame */
.fill-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ratio-portrait  { aspect-ratio: 4 / 5; }
.ratio-tall      { aspect-ratio: 3 / 4.4; }
.ratio-square    { aspect-ratio: 1 / 1; }
.ratio-landscape { aspect-ratio: 4 / 3; }
.ratio-wide      { aspect-ratio: 16 / 10; }

/* Dahlia motif — recurring decorative element from logo (SVG below in markup) */
.dahlia {
  color: var(--champagne);
  opacity: 0.9;
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---- Utilities ---- */
.stack > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-3); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.wrap-gap { flex-wrap: wrap; }
.hr {
  height: 1px; border: 0; margin: 0;
  background: var(--line);
}
.bg-night .hr, .bg-espresso .hr { background: var(--line-light); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}