/* =============================================================
   Wedding Reception · Green Hills Country Club, Millbrae, CA
   Design system — RH-inspired quiet luxury.
   Two families: Cormorant Garamond (display/body), Jost (utility).
   ============================================================= */

/* ---- 1. Design tokens ---------------------------------------- */
:root {
  /* Palette — neutral, warm-leaning. No other colors. */
  --ivory:     #FAF8F3;
  --limestone: #EFEAE2;
  --greige:    #B9AE9F;
  --taupe:     #6E6459;
  --charcoal:  #2B2724;

  /* Hairline rule — greige at reduced opacity */
  --rule: rgba(185, 174, 159, 0.5);

  /* Type families */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (desktop) */
  --step--1: 0.78rem;   /* caps labels / eyebrows / nav */
  --step-0:  1.15rem;   /* body */
  --step-1:  1.5rem;
  --step-2:  2.25rem;
  --step-3:  3.25rem;
  --step-4:  clamp(3.5rem, 11vw, 7rem);  /* signature lockup */

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;
  --space-2xl: 11rem;

  /* Layout */
  --max-width: 1100px;
  --measure:   62ch;

  /* Caps letter-spacing */
  --track-caps: 0.2em;
}

/* ---- 2. Reset / base ----------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

/* ---- 3. Typographic primitives ------------------------------- */

/* Eyebrow / label / nav — Jost, all caps, wide tracking */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--taupe);
  margin: 0;
}

/* Display headings — Cormorant, light, never bold */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
}

h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-sm); }

/* Hairline rule */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 100%;
  margin: 0;
}

/* Quiet text link — underline + opacity, never a new hue */
.link {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
  padding-bottom: 0.2em;
  transition: opacity 0.4s ease;
}
.link:hover,
.link:focus-visible { opacity: 0.55; }

/* ---- 4. Layout helpers --------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.measure {
  max-width: var(--measure);
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }

/* ---- 5. Header ----------------------------------------------- */
.site-header {
  position: relative;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md) var(--space-sm);
}

/* Masthead lockup — small italic "The" (left), tracked caps line spanning
   the width of "RH", then the large "RH". Children are sized in em off the
   "RH" size so proportions hold and nothing overflows at any width. */
.masthead {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;     /* left-align every line to the "R" */
  line-height: 1;
  color: var(--charcoal);
  font-family: var(--serif);
  font-size: var(--step-4);    /* base unit for the em-scaled children */
}

/* The two small lines, grouped so they can shift together and sit close
   to the "RH" below them. */
.masthead__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0.06em;         /* nudge the top block slightly right */
  transform: translateY(-8px); /* lift the top block up off the "RH" */
}

.masthead__the {
  font-style: italic;
  font-weight: 400;
  font-size: 0.25em;
  margin-bottom: 0.02em;
}

.masthead__of {
  font-size: 0.265em;
  font-weight: 300;
  white-space: nowrap;
}

.masthead__caps {
  text-transform: uppercase;
  letter-spacing: 0.0283em;    /* keeps the top line flush with the tightened "RH" */
}

.masthead__of em {
  font-style: italic;
  font-size: 0.85em;
}

.masthead__rh {
  font-size: 1.12em;
  font-weight: 300;
  letter-spacing: -0.013em;    /* R's leg serif just touches H's bottom-left serif */
  margin-top: -0.22em;         /* pull "RH" up close under the top block */
}

.nav {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.nav a {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--taupe);
  padding-bottom: 0.2em;
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.nav a:hover,
.nav a:focus-visible { color: var(--charcoal); }
.nav a[aria-current="page"] {
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--charcoal);
  padding: var(--space-xs) 0;
}

/* ---- 6. Signature hero --------------------------------------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--limestone);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Soft scrim so the lockup stays legible over photography */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(43, 39, 36, 0.28) 0%,
    rgba(43, 39, 36, 0.14) 40%,
    rgba(43, 39, 36, 0.30) 100%
  );
}

/* The monumental type lockup — RH gallery title wall */
.lockup {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--ivory);
  padding: var(--space-md);
}

.lockup__meta {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 400;
}

.lockup__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0;
}

.lockup__amp {
  display: block;
  font-style: italic;
  font-size: 0.6em;
  color: var(--limestone);
  margin-block: 0.1em;
}

/* Hairline rules framing the meta lines, centered and short */
.lockup__rule {
  border: 0;
  border-top: 1px solid rgba(250, 248, 243, 0.6);
  width: clamp(3rem, 12vw, 7rem);
  margin: var(--space-md) auto;
}

/* ---- 7. Welcome / directional block -------------------------- */
.welcome {
  text-align: center;
}

.welcome p {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--taupe);
}

/* Quieter second paragraph — ceremony note, kids welcome */
.welcome .welcome__note {
  font-size: var(--step-0);
  margin-top: var(--space-md);
}

.directional {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* Closing directional link at the foot of a page */
.directional--foot {
  margin-top: 0;
  padding-block: var(--space-md) var(--space-xl);
}

/* ---- 8. Footer ----------------------------------------------- */
.site-footer {
  padding-block: var(--space-lg);
  text-align: center;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-lg);
}

.site-footer__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-1);
}

.site-footer__meta {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--taupe);
}

/* ---- 9. Scroll fade-in --------------------------------------- */
/* Gated on html.js (added by main.js) so content is never hidden
   if JavaScript fails to load. */
.js .fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.js .fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- 10. Subpage head ----------------------------------------- */
/* Restrained scale — the homepage lockup is the one monumental moment. */
.page-head {
  text-align: center;
  padding-block: var(--space-xl) var(--space-lg);
}

.page-head h1 {
  font-size: var(--step-3);
  margin-top: var(--space-sm);
}

/* ---- 11. Details (The Reception) ------------------------------ */
/* Short labeled blocks separated by hairline rules. */
.detail-block {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--rule);
}

.detail-block > .eyebrow { margin-bottom: var(--space-md); }

.detail-block p:last-child { margin-bottom: 0; }

.venue-name {
  font-size: var(--step-2);
  margin-bottom: var(--space-sm);
}

.venue-address {
  font-style: normal;
  color: var(--taupe);
  margin-bottom: var(--space-md);
}

/* Schedule — vertical timeline as a simple ruled list */
.schedule {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule li {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--rule);
}

.schedule li:last-child { border-bottom: 1px solid var(--rule); }

.schedule__time {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--taupe);
  flex: 0 0 9ch;
}

.schedule__event {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.3;
}

/* ---- 11b. Photo overlay sections ------------------------------ */
/* Full-bleed photograph behind a content block, hero-style scrim.
   Used for Venue/Schedule (details) and Stay/Eat (travel). */
.overlay-section {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 55vh;
  background: var(--limestone);
  padding-block: var(--space-xl);
  margin-block: var(--space-lg);
}

.overlay-section__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.overlay-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(43, 39, 36, 0.58) 0%,
    rgba(43, 39, 36, 0.46) 50%,
    rgba(43, 39, 36, 0.60) 100%
  );
}

.overlay-section__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  color: var(--ivory);
}

.overlay-section__content > .eyebrow { margin-bottom: var(--space-md); }

/* Light-on-photograph overrides — same palette, inverted */
.overlay-section .eyebrow,
.overlay-section .venue-address,
.overlay-section .schedule__time,
.overlay-section .place__note { color: var(--limestone); }

.overlay-section .place__name { color: var(--ivory); }

.overlay-section .link {
  color: var(--ivory);
  border-bottom-color: var(--ivory);
}

.overlay-section .schedule li,
.overlay-section .schedule li:last-child {
  border-color: rgba(250, 248, 243, 0.35);
}

/* ---- 12. Story ------------------------------------------------- */
.story-passage {
  padding-block: var(--space-xl);
  text-align: center;
}

.story-passage .eyebrow {
  display: block;
  margin-bottom: var(--space-md);
}

.story-passage p {
  text-align: left;
}

/* Large editorial photographs between passages */
.story-photo {
  margin: 0;
}

/* Portrait photographs sit in a centered column, not full-bleed */
.story-photo--portrait {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.story-photo img {
  width: 100%;
  height: auto;
}

/* ---- 13. Travel ------------------------------------------------ */
.travel-category {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--rule);
}

.travel-category > .eyebrow { margin-bottom: var(--space-md); }

.place-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.place-list li { padding-block: var(--space-sm); }

.place__name {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--charcoal);
  margin-bottom: 0.35em;
}

.place__note {
  color: var(--taupe);
  margin: 0;
}

/* ---- 14. Registry ---------------------------------------------- */
.registry {
  text-align: center;
  padding-block: var(--space-lg) var(--space-xl);
}

.registry p {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--taupe);
}

/* ---- 15. Accessibility ---------------------------------------- */
:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: var(--ivory);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  z-index: 100;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .fade-in { opacity: 1; transform: none; }
}

/* ---- 16. Mobile (≤ 720px) ------------------------------------ */
@media (max-width: 720px) {
  :root {
    --space-2xl: 6rem;
    --space-xl:  4.5rem;
  }

  .nav-toggle { display: block; }

  .nav {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding-block: var(--space-sm);
  }
  .nav.is-open { display: flex; }

  .hero { min-height: 80vh; }

  .directional {
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
  }
}