/* =====================================================================
   Carlos & Jesse — shared styles
   One source of truth for the palette, navigation, footer and the
   recurring pieces (intro headers, mountain dividers, cards, buttons).
   Page-specific styles live in each page's own <style> block.
   ===================================================================== */

:root{
  /* Wedding colors */
  --spruce:#31424a;      /* Spruce   */
  --seaglass:#a3c4bc;    /* Seaglass */
  --ivory:#efe9da;       /* Ivory    */
  --copper:#c47a3d;      /* Copper   */

  /* Accessible text variants (WCAG AA ≥4.5:1, verified):
     --copper-text  4.67:1 on sand / 5.35:1 on cards — small copper type on light bg
     --muted-strong 4.68:1 on sand — small gray notes
     --copper-bright 4.77:1 on spruce-card — small copper type on dark cards
     True --copper stays for borders, badges and large display type. */
  --copper-text:#8d582c;
  --muted-strong:#60665e;
  --copper-bright:#f7b061;

  /* Supporting tints & neutrals */
  --copper-light:#d99a55;   /* copper on dark backgrounds */
  --spruce-dark:#28363d;    /* footer */
  --spruce-card:#3a4d56;    /* cards on the dark section */
  --pine:#5c7268;           /* deep seaglass */
  --sand:#eae5d4;           /* page background */
  --sand-card:#f7f4ea;      /* light cards */
  --ink:#253239;
  --ink-soft:#47534e;
  --muted:#6d746b;
  --line:#d0c9b2;           /* light hairline */
  --line-2:#d7d0ba;         /* light card border */
  --line-input:#c6bfa6;
  --hairline-dark:rgba(163,196,188,0.25);

  --shadow-card:0 12px 32px rgba(20,30,35,0.35);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--spruce);}
a:hover{color:var(--copper);}

.page{min-height:100vh;display:flex;flex-direction:column;}

/* ---- Navigation (sticky, frosted) ---- */
.site-nav{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:18px 48px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;position:sticky;top:0;z-index:50;
  background:rgba(234,229,212,0.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.brand{
  font-family:Lora,serif;font-size:20px;font-weight:600;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}
/* Echo of the hero headline's copper italic ampersand (brand mark —
   logo text is exempt from WCAG contrast requirements). */
.brand .brand-amp{color:var(--copper);font-style:italic;}
.brand:hover{color:var(--ink);}
.nav-links{display:flex;gap:26px;font-size:14px;letter-spacing:0.04em;flex-wrap:wrap;}
.nav-links a{position:relative;text-decoration:none;padding-bottom:3px;}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--copper);transform:scaleX(0);transform-origin:center;
  transition:transform .25s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--copper);font-weight:700;}
.nav-links a.active::after{transform:scaleX(1);}

/* ---- Intro header (interior pages) ---- */
.intro{text-align:center;padding:72px 24px 48px;}
.intro.tight{padding-bottom:32px;}
.eyebrow{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper-text);}
.eyebrow.on-dark{color:var(--copper-light);}
.intro h1{
  font-family:Lora,serif;font-weight:500;font-size:clamp(2.1rem,8vw,52px);
  margin:14px 0 10px;line-height:1.08;
}
.subtitle{font-family:Lora,serif;font-style:italic;font-size:18px;color:var(--muted-strong);}

/* ---- Section headings ---- */
.h-serif{font-family:Lora,serif;font-weight:500;}

/* ---- Width wrappers ---- */
.wrap{width:100%;margin:0 auto;padding:0 24px;}
.wrap-1100{max-width:1100px;}
.wrap-900{max-width:900px;}
.wrap-820{max-width:820px;}
.wrap-680{max-width:680px;}
.wrap-560{max-width:560px;}

/* ---- Mountain-range divider ---- */
.range{display:block;width:100%;height:120px;margin-bottom:-1px;}

/* ---- Dark (spruce) section ---- */
.dark{background:var(--spruce);}
/* Pages whose dark section grows to fill the viewport: center the content
   in the space instead of leaving a large empty void beneath it. */
.dark-center{display:flex;flex-direction:column;justify-content:center;}

/* ---- Cards ---- */
.card{
  border-radius:4px;background:var(--sand-card);border:1px solid var(--line-2);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card-pad{padding:26px;}
.card-eyebrow{font-size:11px;letter-spacing:0.18em;color:var(--copper-text);}
.card-title{font-family:Lora,serif;font-size:24px;margin:8px 0 6px;line-height:1.25;}
.card-body{font-size:14px;line-height:1.55;color:var(--muted-strong);}

/* Lift interactive cards on hover */
.card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--copper);}

/* ---- Buttons ---- */
.btn{
  display:inline-block;font-family:Karla,sans-serif;font-size:15px;cursor:pointer;
  border-radius:3px;padding:12px 18px;border:1px solid var(--line-input);
  background:transparent;color:var(--ink-soft);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  border:none;background:var(--spruce);color:var(--ivory);
  font-weight:700;letter-spacing:0.08em;padding:14px 18px;
}
.btn-primary:hover{background:#24333b;color:var(--ivory);}

/* ---- Footer ---- */
.site-footer{
  margin-top:auto;text-align:center;padding:24px 28px 26px;
  background:var(--spruce-dark);color:var(--seaglass);
  font-size:12px;letter-spacing:0.1em;
}
.foot-trail{display:block;width:220px;height:26px;margin:0 auto 10px;}

/* ---- Footer email-updates signup ----
   Lives inside the dark spruce footer. Email input + button on one row,
   stacking on narrow screens. Light-on-dark to sit on --spruce-dark. */
.footer-signup{max-width:440px;margin:0 auto 22px;}
.footer-signup .fs-label{
  font-family:Lora,serif;font-size:15px;letter-spacing:0.02em;
  color:var(--ivory);margin-bottom:10px;text-transform:none;
}
.footer-signup .fs-row{display:flex;gap:8px;}
.footer-signup input[type="email"]{
  flex:1;min-width:0;font-family:Karla,sans-serif;font-size:15px;letter-spacing:normal;
  padding:11px 12px;border-radius:3px;color:var(--ivory);
  border:1px solid rgba(163,196,188,0.35);background:rgba(255,255,255,0.06);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.footer-signup input[type="email"]::placeholder{color:rgba(239,233,218,0.5);}
.footer-signup input[type="email"]:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(196,122,61,0.22);
}
.footer-signup .fs-submit{
  flex:none;padding:11px 18px;font-family:Karla,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.08em;border:none;border-radius:3px;cursor:pointer;
  background:var(--copper);color:var(--ivory);
  transition:background .2s ease, transform .08s ease;
}
.footer-signup .fs-submit:hover{background:var(--copper-light);}
.footer-signup .fs-submit:active{transform:translateY(1px);}
.footer-signup .fs-submit[disabled]{opacity:0.65;cursor:wait;}
.footer-signup .fs-msg{
  min-height:1em;margin-top:9px;font-size:13px;letter-spacing:0.02em;text-align:center;
}
.footer-signup .fs-msg.fs-error{color:var(--copper-light);}
.footer-signup .fs-msg.fs-ok{color:var(--seaglass);}
@media (max-width:420px){
  .footer-signup .fs-row{flex-direction:column;}
}
/* Honeypot: invisible to people, irresistible to bots. */
.footer-signup .hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}
.footer-signup .is-hidden{display:none;}

/* ---- Scroll-reveal ----
   Hidden states only apply when JS has stamped <html class="js">, so a
   no-JS visitor sees everything immediately instead of blank sections. */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease;}
html.js .reveal.is-visible{opacity:1;transform:none;}
/* Stagger helper: children reveal one after another */
html.js .reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
html.js .reveal-stagger.is-visible > *{opacity:1;transform:none;}
html.js .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.08s;}
html.js .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s;}
html.js .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.24s;}
html.js .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.32s;}

/* ---- Keyboard focus ---- */
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px;}

/* ---- Cross-page transitions (progressive enhancement) ---- */
@view-transition{navigation:auto;}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none;}
}

/* ---- Mobile ---- */
@media (max-width:640px){
  .site-nav{padding:14px 20px;gap:12px;}
  .nav-links{gap:16px;}
  .intro{padding:48px 20px 32px;}
}
/* Small phones: keep all five links on one tidy row */
@media (max-width:420px){
  .site-nav{padding:12px 16px;}
  .nav-links{gap:11px;font-size:13px;letter-spacing:0.02em;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}