/* The Weddings Dot - premium visual refinement (quiet luxury).
   Additive layer for the pages built on the homepage design system (index.html, our-venues.html).
   Loaded after the page's own styles; remove the <link> to revert. Glass is limited to the scrolled
   header (site-header.css) and the hero slider arrows. */
:root{
 --twd-navy:#1d2742;--twd-ivory:#f8f5ef;--twd-champagne:#c8a66a;--twd-champagne-soft:#e2cca1;--twd-stone:#d8d2c8;
 --ivory:#f8f5ef;--dark:#1d2742;--gold:#b8985d;
}
body{background:var(--twd-ivory);-webkit-font-smoothing:antialiased}

/* Typography: editorial hierarchy, controlled widths, no awkward wraps */
h1,h2,h3{text-wrap:balance;letter-spacing:-.005em}
h1{font-weight:400}
.eyebrow{letter-spacing:.2em;font-weight:500}
.section-head p,.hero p,.venue-copy p,.experience-card p{max-width:62ch}
.section{padding:clamp(64px,8vw,112px) 0}
.gold-line{border-top-color:var(--twd-champagne)}

/* Hero: cinematic, text stays readable, photograph leads */
.hero:after{background:linear-gradient(90deg,rgba(18,22,38,.70),rgba(18,22,38,.10) 70%),linear-gradient(0deg,rgba(18,22,38,.42),transparent 60%)}
.hero .eyebrow{color:var(--twd-champagne-soft)}
.hero-arrow{background:rgba(29,39,66,.45);border-color:rgba(255,255,255,.4);transition:background-color .25s,border-color .25s}
@supports((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){
 .hero-arrow{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.hero-arrow:hover{background:rgba(29,39,66,.85);border-color:var(--twd-champagne)}

/* Buttons: precise, consistent height; navy for primary, gold as accent */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border-color:var(--twd-champagne);letter-spacing:.12em;transition:background-color .25s,border-color .25s,color .25s}
.button:hover{background:var(--twd-navy);border-color:var(--twd-champagne);color:#fff}
.button-dark{background:var(--twd-navy);border-color:var(--twd-navy)}
.button-dark:hover{background:#2a3658;border-color:var(--twd-champagne)}
.button-light{border-color:rgba(226,204,161,.85)}
.button-light:hover{background:rgba(255,255,255,.12);border-color:var(--twd-champagne-soft)}
.text-link{border-bottom-color:var(--twd-champagne);transition:color .2s,border-color .2s}
.text-link:hover{color:#8f7440;border-bottom-color:#8f7440}

/* Cards and imagery: consistent ratios, quieter hover */
.experiences{background:#fff}
.experience-card .image{height:auto;aspect-ratio:4/3}
.experience-card img{transition:transform .5s ease}
.experience-card:hover img,.hospitality-card:hover>img{transform:scale(1.03)}
.experience-card h3{font-size:1.6rem}
.venue-feature{background:var(--twd-stone)}
.venue-list{border-bottom-color:var(--twd-stone)}
.venue-list a{border-right-color:var(--twd-stone)}
.hospitality-card:after{background:linear-gradient(0deg,rgba(18,22,38,.82),transparent 78%)}
.wedding-feature:after{background:linear-gradient(90deg,rgba(18,22,38,.78),rgba(18,22,38,.08))}

/* Enquiry: navy surface, solid readable fields, visible focus */
.enquiry{background:var(--twd-navy)}
.form-grid input,.form-grid select,.form-grid textarea{background:rgba(255,255,255,.07);border-color:rgba(226,204,161,.35);padding:14px;transition:border-color .2s,background-color .2s}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid var(--twd-champagne);outline-offset:1px;border-color:var(--twd-champagne);background:rgba(255,255,255,.11)}
.form-grid ::placeholder{color:#b9b6ad;opacity:1}
a:focus-visible,button:focus-visible{outline:2px solid var(--twd-champagne);outline-offset:3px}

@media(max-width:620px){
 h1{font-size:clamp(2.4rem,11vw,3.2rem)}
 .button{width:100%}
 .hero-actions{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 .experience-card img,.hospitality-card>img,.button,.text-link,.hero-arrow{transition:none}
 .experience-card:hover img,.hospitality-card:hover>img{transform:none}
}

/* ===== Liquid-glass accents (frosted panels over photography; solid fallbacks above) ===== */
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .hero-actions .button-light,.hero-arrow{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(10,14,28,.18);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
 }
 .hero-actions .button-light:hover,.hero-arrow:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.7)}
 .hospitality-copy{
  margin:18px;padding:22px 26px;width:calc(100% - 36px);
  background:rgba(29,39,66,.38);border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
 }
 .wedding-content{
  padding:44px 48px;margin:75px 0;
  background:rgba(29,39,66,.34);border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
 }
 .venue-list{
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 30px rgba(29,39,66,.08);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 }
 .form-grid input,.form-grid select,.form-grid textarea{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
 }
}
@media(max-width:620px){
 .wedding-content{padding:28px 22px;margin:48px 0}
 .hospitality-copy{padding:18px 20px}
}

/* ===== Glass visibility pass 2: layered depth, edge highlights, readable labels ===== */
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .hospitality-copy,.wedding-content{
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(29,39,66,.46) 55%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.08),0 18px 40px rgba(10,14,28,.3);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
 }
 .hero-actions .button-light{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);min-height:48px;transition:background-color .3s,border-color .3s,transform .25s}
 .hero-actions .button-light:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.85);transform:translateY(-1px)}
 .hero-arrow{width:48px;height:48px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
}
.hospitality-copy .eyebrow,.wedding-content .eyebrow{color:#f3e3c3}
.hospitality-copy p,.wedding-content p{color:#fff;text-shadow:0 1px 8px rgba(10,14,28,.35)}
@media(prefers-reduced-motion:reduce){.hero-actions .button-light{transition:none}.hero-actions .button-light:hover{transform:none}}
