/* =========================================================
   Magnes Hill — landing page styles
   Mobile-first · neutral luxury palette · no frameworks
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* palette */
  --c-bg:            #f6f2ec;  /* off-white / warm paper */
  --c-bg-soft:       #ece4d7;  /* sand */
  --c-bg-deep:       #e0d5c2;  /* deeper sand for gradient end */
  --c-ink:           #2a2a2a;  /* charcoal */
  --c-ink-soft:      #6b6663;  /* muted text */
  --c-rule:          #c9bfae;  /* hairline divider */
  --c-accent:        #8a7a5c;  /* warm bronze for hover */

  /* type */
  --ff-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans:  "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* rhythm */
  --maxw: 640px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 900ms;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ff-sans);
  font-weight: 300;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Subtle multi-stop gradient — sits BEHIND the logo image.
     Radial warm glow over a soft linear sand wash. */
  background-image:
    radial-gradient(1200px 700px at 50% 10%, rgba(255,248,236,0.85), transparent 60%),
    radial-gradient(900px 600px at 80% 90%, rgba(224,213,194,0.55), transparent 65%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 70%, var(--c-bg-deep) 100%);
  background-attachment: fixed;

  display: flex;
  flex-direction: column;

  position: relative; /* establish stacking context for ::before */
}

/* ---------- Logo background image ----------
   Fixed to the viewport, centered, scaled to contain.
   Sits above the body gradient but behind all content.
   Opacity is the single dial to tweak — see comment. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("magnes_hill_logo_background.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(720px, 85vmin);  /* caps size on big screens, scales down on small */
  opacity: 0.6;          /* <-- adjust here (0.2 = 20%). Try 0.35–0.5 if too faint. */
  pointer-events: none;  /* never block clicks */
  z-index: 0;
}

/* Ensure hero/footer paint above the ::before layer */
.hero,
.footer { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 10vh, 6rem) var(--gutter) clamp(2rem, 6vh, 4rem);
  text-align: center;
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
}

/* ---------- Hero type ---------- */
.hero__eyebrow {
  margin: 0 0 1.75rem;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.hero__title {
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.hero__subtitle {
  margin: 0.75rem 0 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
  letter-spacing: 0.12em;
  #text-transform: uppercase;
  color: var(--c-ink);
}

.hero__divider {
  width: 56px;
  height: 1px;
  margin: 2.25rem auto;
  background: var(--c-rule);
}

.hero__status {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.hero__tagline {
  margin: 1.25rem 0 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--c-ink);
}

/* ---------- Contact ---------- */
.contact {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.contact__lead {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.contact__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.contact__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.25rem;
  color: var(--c-ink);
  text-decoration: none;
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}

.contact__link-label {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.contact__link-value {
  font-family: var(--ff-serif);
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}

.contact__link:hover .contact__link-value,
.contact__link:focus-visible .contact__link-value {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.contact__link:focus-visible {
  outline: none;
}

.contact__sep {
  display: block;
  width: 1px;
  height: 18px;
  background: var(--c-rule);
  opacity: 0.8;
}

/* Desktop: contact becomes a single row */
@media (min-width: 640px) {
  .contact__links {
    flex-direction: row;
    gap: 2.25rem;
  }
  .contact__sep {
    height: 24px;
  }
}

/* ---------- Footer ---------- */
.footer {
  padding: 1.75rem var(--gutter) 2.25rem;
  text-align: center;
}

.footer__inner {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  #text-transform: uppercase;
  color: var(--c-ink-soft);
}

.footer__dot {
  margin: 0 0.6em;
  opacity: 0.6;
}

/* ---------- Fade-in animation ---------- */
.fade {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* script.js toggles .is-loaded on <body>.
   Stagger children via data-delay. */
body.is-loaded .fade {
  opacity: 1;
  transform: none;
}

body.is-loaded .fade[data-delay="0"] { transition-delay: 100ms; }
body.is-loaded .fade[data-delay="1"] { transition-delay: 250ms; }
body.is-loaded .fade[data-delay="2"] { transition-delay: 400ms; }
body.is-loaded .fade[data-delay="3"] { transition-delay: 550ms; }
body.is-loaded .fade[data-delay="4"] { transition-delay: 700ms; }
body.is-loaded .fade[data-delay="5"] { transition-delay: 850ms; }
body.is-loaded .fade[data-delay="6"] { transition-delay: 1050ms; }
body.is-loaded .fade[data-delay="7"] { transition-delay: 1250ms; }

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; }
  .fade { opacity: 1 !important; transform: none !important; }
}