/* ==========================================================================
   Pier One Sydney Harbour Weddings landing page
   Design tokens, fonts, base styles. See brand-guide.md.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --slate: #323e48;
  --slate-deep: #29262f;
  --bronze: #8d644b;
  --bronze-light: #a67b60;
  --sand: #f4f1ec;
  --paper: #ffffff;
  --ink: #1c1c1c;
  --ink-muted: #5a5f63;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-h: 74px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--slate);
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.3rem); }
h3 { font-size: clamp(1.4rem, 2.1vw, 1.85rem); }

p { max-width: 62ch; }

.label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.15rem;
}

.lede {
  font-size: 1.075rem;
  color: var(--ink-muted);
  line-height: 1.85;
}

/* ---------- Layout ---------- */

.container { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 3rem); margin-inline: auto; }

section { padding: 7rem 0; }
.section--sand { background: var(--sand); }
.section--slate { background: var(--slate); color: #fff; }
.section--slate h2, .section--slate h3 { color: #fff; }
.section--slate .lede { color: rgba(255, 255, 255, 0.72); }

/* Centred section headers: base p has a max-width that would offset
   block-level children even when text-align is centre. Reset both. */
.section-head { text-align: center; margin-bottom: 4rem; }
.section-head .label,
.section-head h2,
.section-head .lede { max-width: none; }
.section-head .lede { max-width: 60ch; margin-inline: auto; margin-top: 1.4rem; }

.rule {
  width: 46px; height: 1px; background: var(--bronze);
  border: 0; margin: 0 0 1.6rem;
}
.section-head .rule { margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.05rem 2.3rem;
  background: var(--bronze); color: #fff;
  border: 1px solid var(--bronze);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.btn:hover { background: var(--bronze-light); border-color: var(--bronze-light); transform: translateY(-2px); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: #fff; color: var(--slate); border-color: #fff; }

/* ---------- Scroll animation ---------- */

.fade-up {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.fade-up.visible { opacity: 1; transform: none; }
.stagger > * { transition-delay: calc(var(--i, 0) * 110ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive base ---------- */

@media (max-width: 900px) {
  section { padding: 5rem 0; }
  .section-head { margin-bottom: 3rem; }
}

@media (max-width: 600px) {
  body { font-size: 0.95rem; }
  section { padding: 3.5rem 0; }
  .container, .container--narrow { width: calc(100% - 2.5rem); }
  .section-head { margin-bottom: 2.25rem; }
  .lede { font-size: 1rem; }
  .btn { width: 100%; justify-content: center; font-size: 0.7rem; padding: 0.95rem 1.4rem; }
}