/* 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.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  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;
}

/* Button: primary (pink, fades to ink on hover) and secondary (outline, fades to ink) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .9rem 1.8rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font: 500 var(--fs-label)/1.2 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-button) var(--ease), color var(--t-button) var(--ease), border-color var(--t-button) var(--ease);
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--secondary { background: transparent; color: var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible,
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper-raised); }

/* 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>
   Real photos zoom with the scroll position: js/site.js sets --z on the <img>. */
.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); }
/* No transition: the zoom follows the scroll directly. Only photos near the screen (.is-near) get their own layer. */
.photo > img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); }
.photo > img.is-near { will-change: transform; }
/* Behind a real photo, a quiet neutral while it loads instead of the bright stub gradient. */
.photo:has(> img) { background: var(--line); }
.photo:not(:has(> img))::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: 400 1rem/1 var(--font);
  letter-spacing: .32em;
  margin-right: -.32em; /* 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; }
  .photo > img { transform: none; }
}