/* Eye Dew Weddings — Southern Garden
   Sorts Mill Goudy (400 + italic only) / Alegreya Sans (no 600 — 600 renders Light) */

/* --- fonts --------------------------------------------------------------- */
@font-face{font-family:"Sorts Mill Goudy";src:url(../fonts/SortsMillGoudy-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sorts Mill Goudy";src:url(../fonts/SortsMillGoudy-400-italic.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/AlegreyaSans-300.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/AlegreyaSans-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/AlegreyaSans-400-italic.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/AlegreyaSans-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(../fonts/AlegreyaSans-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* --- tokens -------------------------------------------------------------- */
:root{
  --parchment:#FBF8F2; --cream:#F6F1E7; --magnolia:#FFFFFF;
  --sage:#7C8C6F; --sage-deep:#4F5D46; --forest:#26301F; --forest-deep:#1A2115;
  --bark:#6B5847; --rose:#B08D8D; --ink:#2B2A26; --muted:#6E6A61; --rule:#E4DDCE;
  --display:"Sorts Mill Goudy","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Alegreya Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wide:76rem; --read:38rem;
  --s40:2rem; --s50:clamp(2.5rem,5vw,4rem); --s60:clamp(4rem,8vw,7rem);
}

*{box-sizing:border-box}
/* This is a deliberately single, light theme — never a dark visitor's OS
   preference. Without this, native form chrome (radio buttons, the date
   picker's calendar popup, scrollbars) silently follows the OS instead of
   the page: radios render as solid black-filled circles (indistinguishable
   from "selected"), and the date picker opens as a fully dark popup
   against this cream design. Verified both in a real dark-mode Chrome
   session before adding this. */
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--body);
  font-size:clamp(1.05rem,1.01rem + .2vw,1.15rem);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--forest);
  line-height:1.12;letter-spacing:-.004em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
p,ul,ol{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--sage-deep)}
a:hover{color:var(--bark)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--cream);color:var(--forest);
  padding:.75rem 1.25rem;border-radius:2px}

.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
section{padding-block:var(--s60)}

.eyebrow{font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 1.1rem}
.eyebrow::after{content:"";display:block;width:2.2rem;height:1px;background:var(--rose);margin-top:.7rem}
.center .eyebrow::after,.eyebrow.center::after{margin-inline:auto}

/* --- header / nav -------------------------------------------------------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--parchment)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding-block:1.5rem}
.mark{font-family:var(--display);font-weight:400;font-size:1.42rem;letter-spacing:.03em;
  color:var(--forest);text-decoration:none}
.mark span{display:block;font-family:var(--body);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.nav{display:flex;gap:.2rem 1.5rem;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  font-size:.86rem;letter-spacing:.04em}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;padding-inline:.15rem}
.nav a::after{content:"";position:absolute;left:.15rem;right:.15rem;bottom:10px;height:1px;background:transparent}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{background:var(--rose)}
.nav a[aria-current="page"]{color:var(--forest)}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;background:var(--forest-deep);isolation:isolate;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,16,7,.93) 0%,rgba(11,16,7,.78) 38%,rgba(11,16,7,.24) 72%,rgba(11,16,7,.12) 100%)}
/* Both ends of these clamps were already pinned at their max on any screen
   >=1280px wide (verified), producing a ~1020px hero with no relationship
   to viewport HEIGHT. On an ordinary laptop that doesn't fit one screen, so
   scrolling any amount can land you in the plain bottom-padding band — pure
   dark foliage, no bloom, no text — which reads as a broken background.
   Lower ceilings so the hero comfortably fits a typical viewport. */
.hero-in{padding-block:clamp(5rem,15vw,6.5rem);max-width:34rem}
.hero h1{color:var(--cream);font-size:clamp(3.05rem,7.6vw,4.5rem);letter-spacing:-.008em;margin-bottom:1.4rem}
.hero .lede{color:#E3DDCC;font-size:clamp(1.06rem,1.5vw,1.2rem);max-width:27rem}
.hero .role{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:#A8B49C;
  font-weight:700;margin-bottom:1.6rem}
.hero .role::after{content:"";display:block;width:2.6rem;height:1px;background:var(--rose);margin-top:.8rem}
@media(max-width:52rem){
  .hero::after{background:linear-gradient(180deg,rgba(11,16,7,.82) 0%,rgba(11,16,7,.70) 45%,rgba(11,16,7,.86) 100%)}
  .hero>img{object-position:62% 45%}
  .hero .role{letter-spacing:.15em;font-size:.7rem}
}

/* --- page header (interior pages) ---------------------------------------- */
.page-head{background:var(--forest);color:var(--cream);padding-block:clamp(3rem,7vw,5rem)}
.page-head h1{color:var(--cream)}
.page-head .eyebrow{color:#A8B49C}
.page-head p{color:#D9D3C3;max-width:40rem;margin-top:1rem}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-block;background:var(--forest);color:var(--cream);font-size:.78rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:700;padding:1.05rem 2.3rem;
  text-decoration:none;border-radius:2px;border:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--sage-deep);color:var(--cream);transform:translateY(-1px)}
.btn-light{background:var(--cream);color:var(--forest)}
.btn-light:hover{background:var(--magnolia);color:var(--forest)}
.btn-o{background:transparent;color:var(--cream);border:1px solid rgba(246,241,231,.42)}
.btn-o:hover{background:rgba(246,241,231,.1)}

/* --- prose --------------------------------------------------------------- */
.prose{max-width:var(--read)}
/* Nested inside .wrap (never combined with it on the same element — that was
   the bug: .wrap centers in the full viewport, so a page's body text ended up
   independently centered narrower than, and misaligned with, its own heading
   above). Compound selector for a guaranteed override, not source order. */
.prose.article{max-width:46.5rem}
.prose p+p,.prose ul+p,.prose p+ul,.prose p+h2,.prose ul+h2,.prose p+h3,.prose ul+h3{margin-top:1.35rem}
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:2rem;font-size:1.35rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.55rem}
.prose li::marker{color:var(--sage)}
.prose .big{font-family:var(--display);font-size:clamp(1.4rem,2.5vw,1.72rem);
  line-height:1.42;color:var(--forest)}
.prose strong{font-weight:700}

/* --- layout helpers ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media(min-width:56rem){.split{grid-template-columns:21rem 1fr}}
.portrait{width:100%;height:auto;max-width:21rem;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 12%;border-radius:2px;filter:saturate(.94)}
@media(max-width:56rem){.portrait{max-width:19rem;margin-inline:auto}}
.feature{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  margin-bottom:clamp(2.5rem,5vw,4rem)}
@media(min-width:56rem){.feature{grid-template-columns:1fr 1fr}}
.feature img{border-radius:2px;filter:saturate(.96)}

/* --- callout ------------------------------------------------------------- */
.callout{background:var(--magnolia);border:1px solid var(--rule);border-left:3px solid var(--sage);
  border-radius:3px;padding:1.5rem 1.7rem;margin-top:2rem}
.callout.key{border-left-color:var(--rose)}
.callout h3{font-family:var(--body);font-size:1.02rem;font-weight:700;color:var(--forest);margin-bottom:.6rem}
.callout p+p,.callout ul{margin-top:.8rem}
.callout ul{padding-left:1.2rem}

/* --- awards -------------------------------------------------------------- */
.awards{background:var(--magnolia);border-block:1px solid var(--rule)}
.award-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);margin-top:2.5rem}
.award{border-top:1px solid var(--rule);padding-top:1.15rem}
.award .yr{font-family:var(--display);font-size:2rem;color:var(--sage-deep);display:block;
  line-height:1;margin-bottom:.5rem}
.award p{font-size:.95rem;color:var(--muted)}

/* --- gallery ------------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:2.75rem}
@media(min-width:40rem){.gal{grid-template-columns:repeat(4,1fr);gap:.75rem}}
.gal img{aspect-ratio:1;object-fit:cover;border-radius:2px;filter:saturate(.9);
  transition:transform .35s ease,filter .35s ease}
.gal a{display:block;overflow:hidden;border-radius:2px}
.gal a:hover img{transform:scale(1.035);filter:saturate(1)}
.gal-note{font-size:.9rem;color:var(--muted);margin-top:1.5rem}

/* --- quotes -------------------------------------------------------------- */
.band{background:var(--forest);color:var(--cream)}
.band h2{color:var(--cream)}
.band .eyebrow{color:#A8B49C}
.quotes{display:grid;grid-template-columns:1fr;gap:clamp(2.25rem,4vw,3.5rem);margin-top:2.5rem}
@media(min-width:52rem){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{border-top:1px solid rgba(168,180,156,.3);padding-top:1.4rem}
.quote blockquote{margin:0;font-family:var(--display);font-weight:400;font-style:italic;
  font-size:1.12rem;line-height:1.5;color:var(--cream)}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.73rem;
  letter-spacing:.17em;text-transform:uppercase;color:#A8B49C}
.quote-list{display:grid;gap:2.2rem;margin-top:2.5rem}
@media(min-width:48rem){.quote-list{grid-template-columns:1fr 1fr;gap:2.2rem 3rem}}
.quote-list .quote{border-top:1px solid var(--rule)}
.quote-list blockquote{color:var(--forest)}
.quote-list cite{color:var(--muted)}

/* --- simple lists (partners, locations) ---------------------------------- */
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.5rem}
@media(min-width:44rem){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--magnolia);border:1px solid var(--rule);border-radius:3px;padding:1.4rem 1.6rem}
.card h3{font-size:1.15rem;margin-bottom:.3rem}
.card a{font-size:.92rem;word-break:break-word}

/* --- checks list --------------------------------------------------------- */
.checks{list-style:none;padding:0;margin:1.9rem 0 0;display:grid;gap:.8rem}
.checks li{padding-left:1.5rem;position:relative;margin:0}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;
  border-radius:50%;background:var(--rose)}

/* --- cta / footer -------------------------------------------------------- */
.cta{background:var(--forest);color:var(--cream);text-align:center}
.cta h2{color:var(--cream);max-width:20ch;margin-inline:auto}
.cta p{max-width:36rem;margin:1.4rem auto 0;color:#D9D3C3}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.foot{background:var(--forest);color:#A8B49C;border-top:1px solid rgba(168,180,156,.22);
  padding-block:2.75rem;font-size:.85rem}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot a{color:#A8B49C}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* --- contact form --------------------------------------------------------
   Sarah's only enquiry channel, and most couples fill it in on a phone.
   The 13 fields are deliberate — they screen and they price the job — so the
   work here is making a long form feel light, not making it shorter.        */
.contact-form{max-width:38rem;margin-inline:auto}
.form-intro{color:var(--muted);margin-bottom:2rem}
.contact-form fieldset{border:0;margin:0 0 2.5rem;padding:0}
.contact-form>fieldset>legend{font-family:var(--display);font-size:1.5rem;color:var(--forest);
  padding:0 0 .9rem;margin-bottom:1.4rem;border-bottom:1px solid var(--rule);width:100%}
.contact-form .choices{margin:0 0 1.6rem}
.contact-form .choices legend{font-size:.83rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--forest);padding:0;margin-bottom:.55rem}
.field{margin:0 0 1.6rem}
.contact-form label{display:block;font-size:.83rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--forest);margin-bottom:.55rem}
.req,.opt{font-weight:400;letter-spacing:0;text-transform:none;font-size:.82rem}
.req{color:var(--rose)}
.opt{color:var(--muted)}
.hint{font-size:.92rem;color:var(--muted);margin:0 0 .8rem;text-transform:none;letter-spacing:0}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],
.contact-form input[type=date],.contact-form textarea{
  width:100%;font-family:var(--body);font-size:16px;   /* under 16px iOS zooms and never returns */
  line-height:1.5;color:var(--ink);background:var(--magnolia);border:1px solid #D9D2C2;
  border-radius:2px;padding:.85rem .95rem;-webkit-appearance:none;appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.contact-form textarea{resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(124,140,111,.22)}
/* Scoped under .contact-form: a bare .choice (0,1,0) loses to
   .contact-form label (0,1,1) and the options come out shouting in caps. */
.contact-form .choice{display:flex;align-items:center;gap:.65rem;font-size:1rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink);background:var(--magnolia);
  border:1px solid var(--rule);border-radius:2px;padding:.7rem .9rem;margin-bottom:.5rem;
  min-height:44px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.contact-form .choice:hover{border-color:var(--sage);background:var(--cream)}
.contact-form .choice input{width:1.05rem;height:1.05rem;accent-color:var(--sage-deep);
  margin:0;flex:none}
.contact-form .choice:has(input:checked){border-color:var(--sage-deep);background:var(--cream)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit-row{margin:2.5rem 0 0}
.form-foot{margin-top:1.4rem;font-size:.92rem;color:var(--muted)}
@media(max-width:600px){.contact-form .btn{width:100%}}

/* --- stat strip (reviews/awards proof points) --------------------------- */
.stat-strip{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4rem);justify-content:center;
  margin-top:2.5rem;padding:1.75rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat-strip .stat{text-align:center}
.stat-strip .stat b{display:block;font-family:var(--display);font-weight:400;
  font-size:2.6rem;color:var(--sage-deep);line-height:1}
.stat-strip .stat span{display:block;font-size:.85rem;color:var(--muted);margin-top:.4rem}

/* --- WeddingWire badge row (Awards page) ---------------------------------- */
.badge-row{display:flex;gap:1rem;overflow-x:auto;margin-top:2.5rem;padding-bottom:.5rem;
  -webkit-overflow-scrolling:touch}
.badge-row img{flex:none;width:6.5rem;height:6.5rem;border-radius:4px}
@media(min-width:44rem){.badge-row img{width:8rem;height:8rem}}

/* ===========================================================================
   Motion — deliberately restrained. Three additions, each hooked into
   `prefers-reduced-motion` via the existing global rule at the bottom of this
   file (`animation-duration:.01ms!important`), so nothing here needs its own
   reduced-motion guard.
   =========================================================================== */

/* --- 1. Hero entrance — plays once on load, pure CSS -----------------------
   A CSS animation, not a JS-triggered reveal: if the stylesheet fails to
   load at all, the HTML has no opacity:0 anywhere, so content is simply
   visible immediately. Nothing can get stuck hidden. */
.hero-in > *{animation:hero-rise .8s cubic-bezier(.16,.8,.3,1) backwards}
.hero-in > *:nth-child(1){animation-delay:.05s}
.hero-in > *:nth-child(2){animation-delay:.16s}
.hero-in > *:nth-child(3){animation-delay:.28s}
.hero-in > *:nth-child(4){animation-delay:.4s}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* --- 2. Hover states extended to elements that had none --------------------
   Matches the lift-and-shadow language already used by .btn, so this reads
   as "more of the same system," not a new effect. */
.award,.quote,.badge-row img{transition:transform .22s ease,box-shadow .22s ease}
.award:hover{transform:translateY(-3px)}
.quote:hover{transform:translateY(-3px)}
.badge-row img:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 8px 20px rgba(38,48,31,.18)}
.quote-list .quote:hover{box-shadow:0 8px 20px rgba(38,48,31,.08)}

/* --- 3. Sticky header with a shadow that appears once you've scrolled ------
   JS only ever ADDS a class name for a CSS transition already defined here;
   if the script fails for any reason, the header is still a normal static
   header at the top of the page — never broken, just not sticky. */
.site-head{position:sticky;top:0;z-index:40;transition:box-shadow .3s ease}
.site-head.is-scrolled{box-shadow:0 2px 16px rgba(38,48,31,.08)}