:root { --sister-sites-height: 44px; }
.sister-sites { --sister-paper:#edede9; --sister-ink:#35332f; --sister-line:#cecec7; position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--sister-sites-height); padding:0 4.2%; box-shadow:inset 0 -1px var(--sister-line); background:var(--sister-paper); color:var(--sister-ink); font-family:var(--studio-sans,var(--sans,Raleway,Arial,sans-serif)); text-align:left; }
.sister-sites--events { --sister-paper:#fff6e9; --sister-ink:#493c36; --sister-line:#e7d4c3; }
.sister-sites__hint { font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.65; }
.sister-sites__links { display:flex; align-items:center; gap:28px; }
.sister-sites .sister-sites__link { position:static; display:flex; align-items:center; gap:8px; height:var(--sister-sites-height); color:inherit; font-size:10px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.sister-sites__label { position:relative; }
.sister-sites__label::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.sister-sites__link[aria-current=page] .sister-sites__label::after,.sister-sites__link:hover .sister-sites__label::after,.sister-sites__link:focus-visible .sister-sites__label::after { transform:scaleX(1); }
.sister-sites__arrow { font-size:13px; opacity:.65; }
.sister-sites__link[aria-current=page] .sister-sites__arrow { display:none; }
.sister-sites .sister-sites__link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.sister-sites__backdrop { position:fixed; inset:var(--sister-sites-height) 0 0; z-index:-1; background:#221a151c; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility .3s; }
.sister-sites__preview { position:absolute; top:100%; left:0; right:0; display:block; width:100%; height:auto; aspect-ratio:3/1; overflow:hidden; background:var(--sister-paper); color:#fffaf3; box-shadow:0 15px 35px #29211b20; opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; transition:opacity .3s ease,transform .3s ease,visibility .3s; white-space:normal; text-transform:none; letter-spacing:normal; }
.sister-sites__preview::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#221a15a6, #221a1526 60%,transparent); }
.sister-sites__preview img { display:block; width:100%; height:100%; object-fit:contain; }
.sister-sites__preview-copy { position:absolute; z-index:1; left:4.2%; top:50%; display:block; max-width:40%; transform:translateY(-50%); }
.sister-sites__name { display:block; font-family:var(--studio-serif,var(--serif,Georgia,serif)); font-size:clamp(42px,5vw,76px); font-weight:400; line-height:1.1; }
.sister-sites__description { display:block; margin-top:16px; font-size:13px; font-weight:400; line-height:1.6; }
.sister-sites__link:not([aria-current=page]):not([data-preview-dismissed]):hover .sister-sites__preview,.sister-sites__link:not([aria-current=page]):not([data-preview-dismissed]):focus-visible .sister-sites__preview { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.sister-sites:has(.sister-sites__link:not([aria-current=page]):not([data-preview-dismissed]):hover) .sister-sites__backdrop,.sister-sites:has(.sister-sites__link:not([aria-current=page]):not([data-preview-dismissed]):focus-visible) .sister-sites__backdrop { opacity:1; visibility:visible; }
.sister-sites--weddings ~ .header { top:var(--sister-sites-height); }
.sister-sites--weddings ~ main .hero { height:calc(100vh - var(--sister-sites-height)); height:calc(100svh - var(--sister-sites-height)); }
@media(max-width:600px) { .sister-sites { justify-content:center; padding:0 20px; } .sister-sites__hint { display:none; } .sister-sites__links { gap:30px; } .sister-sites .sister-sites__link { font-size:9px; } .sister-sites__preview-copy { left:20px; max-width:50%; } .sister-sites__name { font-size:32px; } .sister-sites__description { margin-top:8px; font-size:10px; } }
@media(hover:none) { .sister-sites__preview,.sister-sites__backdrop { display:none; } }
@media(prefers-reduced-motion:reduce) { .sister-sites__preview,.sister-sites__backdrop,.sister-sites__label::after { transition:none; } }