/* ============================================================
THE CHIMES · interior page styles · Suffix Studio
Loaded by every page EXCEPT the home page, on top of styles.css.
It holds the parts that only the inner pages share: the dark hero,
the facts strip, the cards, the gallery, the photo viewer, and the
floating booking button.
The home page has its own look, so it does not load this file.
A new inner page needs only these two lines in its :
============================================================ */
.eyebrow{font-family:"Cinzel",serif;font-weight:600;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-ink);display:inline-flex;align-items:center;gap:.7rem;}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.05;margin:0;color:var(--ink);}
h1{font-size:clamp(2.9rem,7vw,5.4rem);letter-spacing:-.5px;}
.container{width:min(1180px,92vw);margin-inline:auto;}
.btn{position:relative;display:inline-block;font-family:"Cinzel",serif;font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;text-align:center;padding:1.02rem 1.9rem;border-radius:2px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;border:1px solid transparent;cursor:pointer;overflow:hidden;max-width:100%;}
.btn::after{content:"";position:absolute;inset:4px;border:1px solid rgba(43,36,30,.28);pointer-events:none;}
.btn:focus-visible{outline:2px solid #8F7132;outline-offset:3px;}
.btn-primary{background:linear-gradient(172deg,color-mix(in srgb,var(--accent),#fff 14%) 0%,var(--accent) 55%,color-mix(in srgb,var(--accent),#000 22%) 100%);color:#F6EFE2;border-color:color-mix(in srgb,var(--accent),#000 38%);box-shadow:0 1px 0 rgba(255,244,224,.28) inset,0 14px 28px -14px rgba(30,24,18,.55);}
.btn-primary::after{border-color:rgba(246,239,226,.32);}
.btn-primary:hover{transform:translateY(-2px);background:linear-gradient(172deg,color-mix(in srgb,var(--accent),#fff 22%) 0%,color-mix(in srgb,var(--accent),#fff 6%) 55%,color-mix(in srgb,var(--accent),#000 14%) 100%);}
.btn-ghost{background:transparent;color:var(--ink);border-color:currentColor;}
.btn-ghost::after{border-color:currentColor;opacity:.35;}
.btn-ghost:hover{background:var(--ink);color:var(--parchment);transform:translateY(-2px);}
.btn-brass{background:linear-gradient(172deg,#D9B671 0%,#C09A52 52%,#A9843F 100%);color:#231A10;border-color:#8F7132;box-shadow:0 1px 0 rgba(255,246,224,.55) inset,0 14px 28px -14px rgba(60,44,20,.55);text-shadow:0 1px 0 rgba(255,246,224,.35);}
.btn-brass::after{border-color:rgba(60,44,20,.35);}
.btn-brass::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,251,240,.55),transparent);transform:skewX(-18deg);transition:left .55s ease;}
.btn-brass:hover{transform:translateY(-2px);background:linear-gradient(172deg,#E3C382 0%,#CBA65E 52%,#B08A45 100%);}
.btn-brass:hover::before{left:125%;}
.caret{font-size:.8rem;line-height:1;position:relative;top:2px;}
.dd-label{font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);display:block;margin:.7rem 0 .35rem;}
.dd-label:first-child{margin-top:0;}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%, rgba(217,186,119,.14), transparent 45%);pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(3.5rem,7vw,6rem) 0;position:relative;z-index:1;}
.hero .eyebrow{color:var(--brass-light);margin-bottom:1.4rem;}
.hero .eyebrow::before{background:var(--brass-light);}
.hero h1{color:#F7EEDB;}
.hero h1 em{font-style:italic;color:var(--brass-light);}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:rgba(241,230,211,.85);margin:1.5rem 0 0;max-width:46ch;}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
.hero .btn-ghost{color:#F4E9D6;border-color:rgba(244,233,214,.5);}
.hero-photo{position:relative;border:10px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
.hero-badge{position:absolute;bottom:-18px;left:-18px;background:var(--brass);color:#231a10;font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1rem;border-radius:2px;line-height:1.4;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);z-index:2;}
.facts{border-bottom:1px solid var(--line);}
.facts-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem 1.4rem;padding:1.35rem 0;}
.fact{font-family:"Cinzel",serif;font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke-ink);display:inline-flex;align-items:center;gap:1.4rem;}
.fact + .fact::before{content:"";width:6px;height:6px;background:var(--brass);transform:rotate(45deg);flex:none;}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem);margin-top:3rem;text-align:center;}
.step .dot{width:40px;height:40px;margin:0 auto .9rem;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;color:var(--brass-ink);font-size:.9rem;}
.step h3{font-size:1.35rem;margin:0 0 .4rem;}
.step p{font-size:.92rem;color:#473c34;margin:0;}
.quote-inner{text-align:center;padding:clamp(3rem,5vw,4.2rem) 0;}
.quote-inner p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--accent);max-width:26ch;margin:0 auto;line-height:1.25;}
.setting{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:3rem;}
.set-card{background:var(--cream-card);border:1px solid var(--line);padding:clamp(1.8rem,2.5vw,2.4rem);}
.set-card .n{font-family:"Cinzel",serif;font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-ink);}
.set-card h3{font-size:1.5rem;margin:.7rem 0 .7rem;}
.set-card p{color:#473c34;font-size:.95rem;margin:0;}
.charm{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;}
.charm h2{margin-bottom:1rem;}
.charm p{color:#473c34;}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.4rem) clamp(2rem,5vw,4rem);margin-top:3rem;}
.why-item{display:flex;gap:1rem;align-items:flex-start;}
.why-item .dot{width:34px;height:34px;flex:none;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;color:var(--brass-ink);font-size:.85rem;}
.why-item h3{font-size:1.25rem;margin:.1rem 0 .4rem;}
.why-item p{font-size:.92rem;color:#473c34;margin:0;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:3rem;}
.g-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.faq-wrap{max-width:820px;margin:3rem auto 0;}
.faq-q::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-family:"Hanken Grotesk",sans-serif;font-size:1.5rem;color:var(--brass);}
.faq-a p{color:#473c34;font-size:1rem;padding:0 2.4rem 1.6rem 0;margin:0;}
.final::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 58px,rgba(217,186,119,.05) 58px,rgba(217,186,119,.05) 59px);pointer-events:none;}
.final .inner{position:relative;z-index:1;}
.final .eyebrow{color:var(--brass-light);justify-content:center;}
.final .eyebrow::before{background:var(--brass-light);}
.final h2{color:#F6ECDA;margin:.7rem auto 1.2rem;} /* auto, not 0. styles.css shrinks this heading to fit its text and then
centers it with margin-inline:auto. The shorthand here loaded later and
reset that to 0, so the heading sat flush left inside a centered block
on 4 of the 8 pages that have one. */
.final p{color:rgba(241,230,211,.8);max-width:46ch;margin:0 auto 2.2rem;}
.final .phone{margin-top:2rem;font-family:"Cinzel",serif;letter-spacing:.16em;font-size:.85rem;color:var(--brass-light);}
.final .phone a{color:#F1E6D3;text-decoration:none;border-bottom:1px solid rgba(217,186,119,.4);}
.modal-overlay{position:fixed;inset:0;background:rgba(24,13,17,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:100;}
.modal-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;
border:1px solid rgba(217,186,119,.85);background:rgba(217,186,119,.14);color:#F6ECDA;
cursor:pointer;line-height:1;font-size:0;
transition:background .2s ease,border-color .2s ease;}
/* The X is drawn, not typed. It used to be a font character, and different
fonts draw that character at wildly different weights, so on some machines
it came out hairline thin and looked like an empty circle. Two rotated bars
render the same everywhere. */
.modal-close::before,.modal-close::after{content:"";position:absolute;top:50%;left:50%;
width:16px;height:2px;background:#F6ECDA;border-radius:1px;}
.modal-close::before{transform:translate(-50%,-50%) rotate(45deg);}
.modal-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.modal-close:focus-visible{outline:2px solid #E4CE97;outline-offset:3px;}
.lightbox{position:fixed;inset:0;background:rgba(24,13,17,.92);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:120;}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{max-width:92vw;max-height:86vh;border:6px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);}
.lb-close{position:absolute;top:1.2rem;right:1.4rem;background:rgba(255,255,255,.14);border:none;color:#F4E9D6;width:44px;height:44px;border-radius:50%;font-size:1.3rem;cursor:pointer;line-height:1;}
.lb-cap{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:rgba(241,230,211,.85);font-family:"Cinzel",serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:0 1rem;}
.g-tile img{cursor:zoom-in;}
.sticky-cta{position:fixed;right:18px;bottom:18px;z-index:70;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s;pointer-events:none;}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto;}
.sticky-cta .btn{box-shadow:0 14px 34px -12px rgba(51,34,42,.6);}
.foot-legal a{color:var(--brass-light);text-decoration:none;}
.foot-legal a:hover{text-decoration:underline;}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
@media(max-width:1080px){
.hero-grid{grid-template-columns:1fr;}
.hero-photo{max-width:420px;margin:0 auto;}
.setting{grid-template-columns:1fr;}
.charm{grid-template-columns:1fr;}
.why-grid{grid-template-columns:1fr;}
.steps-grid{grid-template-columns:1fr;}
}
@media(max-width:1024px){
.hero-badge{left:8px;bottom:-14px;}
}
@media(max-width:520px){
}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;}
.btn{transition:none;}
.btn-brass::before{display:none;}
}
@media (prefers-color-scheme: dark){
.set-card{background:#FBF7EE !important;}
}
@media (max-width:520px){}
@media (min-width:1025px){
}
@media(min-width:1025px){}
@media(max-width:1024px){}
.doors{display:flex;align-items:flex-start;gap:1.85rem;}
.grp{display:block;}
a.door{display:block;text-decoration:none;text-align:center;white-space:nowrap;}
a.door .dt{display:block;font-family:"Prata",serif;font-size:.85rem;letter-spacing:.15em;
text-transform:uppercase;line-height:1;color:#241C17;transition:color .2s ease;}
a.door .dd{display:block;font-family:"Old Standard TT",serif;font-style:italic;font-size:.7rem;
color:#8A7B5F;margin-top:.44rem;line-height:1.25;}
a.door:hover .dt{color:#7A2333;}
a.door[aria-current] .dt{color:#7A2333;}
.sub{display:none;}
@media(max-width:1024px){
.doors{display:block;}
.grp{border-bottom:1px solid rgba(20,17,15,.08);}
a.door{text-align:left;white-space:normal;padding:.72rem .95rem .1rem;}
a.door .dt{font-size:.92rem;letter-spacing:.12em;}
a.door .dd{font-size:.8rem;margin-top:.16rem;}
.sub{display:block;padding:.35rem 0 .6rem;}
.sub a{display:block;text-decoration:none;color:#3D3428;font-family:"Playfair Display SC",serif;
font-weight:400;font-size:.92rem;letter-spacing:.05em;padding:.42rem .95rem .42rem 1.6rem;}
.sub a[aria-current]{color:#7A2333;}
}
@media(min-width:1025px){ }
/* ---- 5 Aug. Nothing may make the page wider than the phone -------------
A grid item defaults to min-width:auto, which means it will not shrink
below its longest unbreakable line. One long email address was enough to
push the contact card 60px wider than the screen, and a page wider than
the screen can be dragged sideways while you are trying to scroll. Three
rules: let the item shrink, let the rows wrap, let long strings break. */
.contact-grid > *{min-width:0;}
.contact-grid .info-row{flex-wrap:wrap;}
.contact-grid .info-row .k{min-width:0;flex:0 0 100px;}
.contact-grid .info-row > span,
.contact-grid .info-row a{min-width:0;overflow-wrap:anywhere;}