/* Base: reset, typography, shared primitives (Button, Eyebrow, PhotoSlot, Logo). */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

p { margin: 0; max-width: 65ch; }

a { color: inherit; }

:focus-visible { outline: var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Eyebrow: mono uppercase label */
.eyebrow {
  display: block;
  font: 400 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Button: primary (gold fill) and secondary (outline) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font: 500 var(--fs-small)/1.2 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-contrast); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--accent); }

/* PhotoSlot: fixed aspect ratio; gradient stub + noise until a real photo is set.
   Usage: <div class="photo photo--rose" style="--ratio: 4/5"></div>
   Real photo: <div class="photo" style="--ratio: 4/5"><img src="…" alt="…" width="…" height="…" loading="lazy"></div> */
.photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 3 / 2);
  border-radius: var(--radius);
  background-image: var(--g, var(--g-beige));
  background-size: cover;
  background-position: center;
}
.photo--rose { --g: var(--g-rose); }
.photo--beige { --g: var(--g-beige); }
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.photo::after,
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: var(--noise);
}

/* Logo: the crown is img/logo/crown.svg (and crown-small.svg), used via <img> so the mark
   can be swapped in one place and pages also work when opened from disk.
   Variants: .logo--stacked (gate, footer), .logo--horizontal (header), .logo--mark (badge, avatar). */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { flex: none; }
.logo__word {
  font: 300 1.15rem/1 var(--font-display);
  letter-spacing: .28em;
  margin-right: -.28em; /* cancel trailing tracking */
  color: var(--ink);
  text-transform: uppercase;
}
.logo--horizontal { gap: .6rem; }
.logo--horizontal img { width: 40px; height: auto; aspect-ratio: 636 / 400; }
.logo--stacked { flex-direction: column; gap: .5rem; min-width: 120px; }
.logo--stacked img { width: 120px; height: auto; aspect-ratio: 636 / 400; }
.logo--mark img { width: 28px; height: auto; aspect-ratio: 656 / 420; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}