:root{
/* 6 Aug. Gold and grey, for words.
The gold below is not a new brand colour. --brass and the rest are
untouched and still draw every border, dot and button on the site.
These two exist only for text, because the original gold on cream is
2.25:1 where the standard asks 4.5:1, and small gold type on a cream
page is genuinely hard to read. Both values clear 4.5:1 against the
darkest of the nine light backgrounds in use, so they are safe
wherever they are used. */
--brass-ink:#7A5F2A;
--smoke-ink:#6D6154;
}
/* ============================================================
THE CHIMES · shared stylesheet · Suffix Studio
Every page loads this file. It holds everything the pages share:
type, color, buttons, the top menu, the footer, the inquiry form,
the FAQ and the photo viewer.
Each page picks its accent color with a class on the tag,
and keeps only its own unique styling in its own file.
Change something here once and it changes on every page.
============================================================ */
/* accent color, chosen per page by the class on */
.theme-oxblood{ --accent:#5A222C; --accent-deep:#3C131B; }
.theme-rose { --accent:#8E4A56; --accent-deep:#6E3641; }
.theme-forest { --accent:#283F51; --accent-deep:#192A37; }
.todo{display:inline-block;background:#FDF1CE;border:1px dashed #B58A22;border-radius:3px;
padding:.2rem .55rem;margin-top:.5rem;font-family:"Hanken Grotesk",sans-serif;
font-size:.78rem;font-style:normal;font-weight:600;color:#6E5410;letter-spacing:.02em;line-height:1.5;}
.todo::before{content:"NEEDS INFO · ";font-weight:700;letter-spacing:.08em;}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
img{max-width:100%;height:auto;}
svg{max-width:100%;}
video{max-width:100%;}
html{scroll-behavior:smooth;background:#F3ECDD;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body.no-scroll{overflow:hidden;}
h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.05;margin:0;color:var(--ink);}
h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.05;margin:0;color:var(--ink);}
h2{font-size:clamp(2.1rem,4.3vw,3.3rem);}
h3{font-size:1.55rem;}
p{margin:0 0 1.1rem;}
a{color:inherit;}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
.dd-toggle:hover{color:var(--accent);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.5rem 2.4rem 1.5rem 0;font-family:"Cormorant Garamond",serif;font-size:1.45rem;font-weight:600;color:var(--ink);position:relative;line-height:1.2;}
.faq-item.open .faq-q::after{content:"–";}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.g-tile{aspect-ratio:3/4;margin:0;border:1px solid var(--line);background:var(--parchment-2);position:relative;overflow:hidden;}
.g-tile .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:1rem;}
.g-tile .ph svg{width:30px;height:30px;stroke:var(--brass);fill:none;stroke-width:1.3;}
.g-tile .ph span{font-family:"Cinzel",serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);line-height:1.5;}
.g-tile::after{content:"";position:absolute;inset:10px;border:1px solid rgba(194,155,78,.32);pointer-events:none;}
.foot-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;}
.foot-mark .name{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.2em;color:#F1E6D3;font-size:1.1rem;}
.foot-mark .tag{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.05rem;color:rgba(241,230,211,.6);margin-top:.5rem;}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 2.6rem;align-items:start;}
.foot-col h3,.foot-col h4{font-family:"Cinzel",serif;font-size:.62rem;font-weight:700;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-light);margin:0 0 .9rem;}
.foot-col a{display:block;text-decoration:none;color:rgba(241,230,211,.72);font-size:.85rem;margin-bottom:.55rem;transition:color .2s;}
.foot-col a:hover{color:var(--brass-light);}
.foot-base{border-top:1px solid rgba(217,186,119,.18);margin-top:2.6rem;padding-top:1.4rem;font-size:.74rem;letter-spacing:.04em;color:rgba(241,230,211,.56);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.4rem;}
/* footer on small screens: two even columns, then one, so nothing sits ragged */
@media(max-width:900px){
.foot-inner{flex-direction:column;gap:2.4rem;}
.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.6rem;}
}
@media(max-width:700px){
.foot-cols{grid-template-columns:1fr;gap:1.7rem;}
.foot-base{flex-direction:column;align-items:flex-start;text-align:left;}
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal{background:var(--parchment);width:min(540px,100%);max-height:92vh;overflow-y:auto;border:1px solid var(--brass);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:translateY(14px) scale(.99);transition:transform .25s;position:relative;}
.modal-overlay.open .modal{transform:none;}
.modal-head .eyebrow{color:var(--brass-light);}
.modal-head .eyebrow::before{background:var(--brass-light);}
.modal-head h3{color:#F6ECDA;font-size:1.9rem;margin:.5rem 0 .2rem;}
.modal-head p{color:rgba(244,233,214,.75);font-size:.9rem;margin:0;}
.modal-close:hover{background:rgba(217,186,119,.2);}
.modal-body{padding:1.8rem 2rem 2rem;}
.field{margin-bottom:1.1rem;}
.field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.03em;color:#4a3f36;margin-bottom:.4rem;text-transform:uppercase;}
.field input{width:100%;font-family:"Hanken Grotesk",sans-serif;font-size:.95rem;padding:.8rem .9rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px;}
.field select{width:100%;font-family:"Hanken Grotesk",sans-serif;font-size:.95rem;padding:.8rem .9rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px;}
.field textarea{width:100%;font-family:"Hanken Grotesk",sans-serif;font-size:.95rem;padding:.8rem .9rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px;}
.field input:focus{outline:2px solid var(--brass);outline-offset:0;border-color:var(--brass);}
.field select:focus{outline:2px solid var(--brass);outline-offset:0;border-color:var(--brass);}
.field textarea:focus{outline:2px solid var(--brass);outline-offset:0;border-color:var(--brass);}
.field textarea{resize:vertical;min-height:90px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.modal .btn{width:100%;text-align:center;margin-top:.4rem;}
.form-success{display:none;text-align:center;padding:1rem 0 .4rem;}
.form-success.show{display:block;}
.form-success .check{width:54px;height:54px;border-radius:50%;background:var(--accent);color:#F4E9D6;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1rem;}
.form-success h4{font-family:"Cormorant Garamond",serif;font-size:1.7rem;color:var(--ink);margin:0 0 .5rem;}
.form-success p{color:#473c34;font-size:.95rem;margin:0;}
.reveal.in{opacity:1;transform:none;}
@media(max-width:1024px){
}
@media(max-width:520px){
.field-row{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
}
@media (prefers-color-scheme: dark){
html{background:#F3ECDD !important;}
.modal{background:#F3ECDD !important;}
.field input{background:#fff !important;color:#211A16 !important;}
.field select{background:#fff !important;color:#211A16 !important;}
.field textarea{background:#fff !important;color:#211A16 !important;}
}
/* ============================================================
NAVIGATION. One definition, used by every page. Nothing else
anywhere may style the bar. If it needs changing, change it here.
============================================================ */
header.nav{position:sticky;top:0;z-index:100;background:#F3ECDD;
border-bottom:1px solid #C9A45C;box-shadow:0 1px 0 rgba(201,164,92,.35);}
header.nav .nav-inner{max-width:1240px;margin:0 auto;padding:.42rem clamp(1rem,3vw,2rem);
display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2.4rem);}
/* name plate: double gold keyline, THE in gold, name in oxblood Prata */
header.nav .wordmark{text-decoration:none;flex:0 0 auto;}
header.nav .wm-frame{display:inline-block;padding:.38rem .85rem;text-align:center;
border:1px solid #C9A45C;outline:1px solid #C9A45C;outline-offset:3px;}
header.nav .wm-the{display:block;font-family:"Cinzel",serif;font-size:.56rem;font-weight:600;
letter-spacing:.34em;color:var(--brass-ink);line-height:1;margin-bottom:.16rem;}
header.nav .wm-name{display:block;font-family:"Prata",Georgia,serif;font-size:clamp(1.05rem,2.3vw,1.5rem);
letter-spacing:.03em;color:#5A222C;line-height:1.05;white-space:nowrap;}
header.nav .wm-est{display:block;font-family:"Cinzel",serif;font-size:.5rem;font-weight:600;
letter-spacing:.22em;color:var(--brass-ink);line-height:1;margin-top:.2rem;white-space:nowrap;}
header.nav .page-here{display:none;}
/* the four doors */
header.nav .nav-links{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.1rem);}
header.nav .nav-links>a,header.nav .nav-links>button{background:none;border:0;cursor:pointer;
padding:0;text-decoration:none;font-family:"Prata",Georgia,serif;font-size:.82rem;
letter-spacing:.02em;color:#3A2A22;white-space:nowrap;position:relative;transition:color .18s;}
header.nav .nav-links>a:hover{color:#5A222C;}
header.nav .nav-links>a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
background:#C9A45C;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
header.nav .nav-links>a:hover::after{transform:scaleX(1);}
/* right-hand controls */
header.nav .nav-right{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;}
header.nav .nav-call{display:inline-flex;align-items:center;color:#7E5F2C;transition:color .18s;}
header.nav .nav-call:hover{color:#5A222C;}
header.nav .nav-call svg{width:20px;height:20px;}
header.nav .lang-toggle{display:inline-flex;align-items:center;justify-content:center;
font-family:"Cinzel",serif;font-size:.6rem;font-weight:700;letter-spacing:.14em;
padding:.5rem .8rem;color:#7E5F2C;background:none;cursor:pointer;
border:1px solid #C9A45C;outline:1px solid #C9A45C;outline-offset:2px;border-radius:0;
transition:background .2s,color .2s;}
header.nav .lang-toggle:hover,header.nav .lang-toggle:focus-visible{background:#C9A45C;color:#2B1A14;}
header.nav .nav-book{display:inline-flex;align-items:center;justify-content:center;
font-family:"Cinzel",serif;font-size:.62rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;padding:.72rem 1.15rem;background:#5A222C;color:#E7C377;
border:1px solid #5A222C;border-radius:2px;cursor:pointer;white-space:nowrap;
transition:background .2s,color .2s;}
header.nav .nav-book:hover{background:#43171F;color:#F3D89A;}
header.nav .menu-btn{display:none;align-items:center;justify-content:center;text-align:center;
font-family:"Cinzel",serif;font-size:.62rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;line-height:1;
padding:.68rem 1rem;min-height:42px;
color:#5A222C;background:none;cursor:pointer;
border:1px solid #C9A45C;outline:1px solid #C9A45C;outline-offset:3px;border-radius:0;
transition:background .2s,color .2s,letter-spacing .2s;}
header.nav .menu-btn:hover,header.nav .menu-btn:focus-visible{background:#C9A45C;color:#2B1A14;}
header.nav .nav-mobile-controls{display:none;align-items:center;gap:.8rem;padding-right:3px;}
header.nav .nav-call-mobile{display:inline-flex;align-items:center;color:#7E5F2C;}
header.nav .nav-call-mobile svg{width:21px;height:21px;}
/* ---- phone and tablet ---- */
@media(max-width:1024px){
header.nav .nav-inner{gap:.7rem;}
header.nav .nav-right{display:none;}
header.nav .nav-mobile-controls{display:flex;}
header.nav .menu-btn{display:inline-flex;align-items:center;justify-content:center;}
header.nav .lang-toggle{padding:.45rem .6rem;font-size:.55rem;letter-spacing:.1em;outline-offset:1px;}
header.nav .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 1rem;
background:#F3ECDD;border-bottom:1px solid #C9A45C;
box-shadow:0 22px 40px -22px rgba(43,26,20,.45);max-height:calc(100vh - 72px);overflow-y:auto;}
header.nav .nav-links.open{display:flex;}
header.nav .nav-links>a,header.nav .nav-links>button{
font-family:"Playfair Display SC","Prata",Georgia,serif;font-size:.95rem;letter-spacing:.04em;
padding:.85rem clamp(1.2rem,5vw,2rem);width:100%;text-align:left;
border-bottom:1px solid rgba(201,164,92,.28);}
header.nav .nav-links>a::after{display:none;}
header.nav .nav-links>a:active{background:rgba(201,164,92,.14);}
header.nav .nav-links .nav-call{display:flex;justify-content:center;gap:.5rem;
margin:.8rem clamp(1.2rem,5vw,2rem) 0;padding:.8rem 1rem;
background:#5A222C;color:#E7C377;border-radius:2px;font-family:"Cinzel",serif;
font-size:.68rem;font-weight:700;letter-spacing:.12em;}
header.nav .nav-links .nav-call svg{width:17px;height:17px;}
header.nav .nav-links .nav-book{margin:.55rem clamp(1.2rem,5vw,2rem) 0;width:auto;}
header.nav .nav-links .lang-toggle{display:none;}
}
@media(max-width:420px){
header.nav .wm-name{font-size:.98rem;}
header.nav .menu-btn{padding:.55rem .7rem;}
}
/* the four doors, and the groups beneath them on a phone */
header.nav .doors{display:flex;align-items:flex-start;gap:clamp(1.1rem,3vw,2.6rem);}
header.nav .grp{display:flex;flex-direction:column;}
header.nav .door{display:block;text-decoration:none;position:relative;padding-bottom:2px;}
header.nav .door .dt{display:block;font-family:"Prata",Georgia,serif;font-size:.84rem;
letter-spacing:.02em;color:#3A2A22;line-height:1.15;white-space:nowrap;transition:color .18s;}
header.nav .door .dd{display:block;font-family:"Old Standard TT",Georgia,serif;font-style:italic;
font-size:.62rem;letter-spacing:.01em;color:#8A7460;line-height:1.2;margin-top:.16rem;white-space:nowrap;}
header.nav .door::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
background:#C9A45C;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
header.nav .door:hover .dt{color:#5A222C;}
header.nav .door:hover::after{transform:scaleX(1);}
/* the dropdown: opens under its door on hover or keyboard focus, and on
click for the More button. positioned so it never widens the bar. */
header.nav .grp{position:relative;}
header.nav .sub{display:none;position:absolute;top:calc(100% + 10px);left:-.9rem;z-index:120;
min-width:210px;flex-direction:column;padding:.5rem 0;
background:#F3ECDD;border:1px solid #C9A45C;outline:1px solid #C9A45C;outline-offset:2px;
box-shadow:0 18px 34px -18px rgba(43,26,20,.45);}
header.nav .grp:hover>.sub,
header.nav .grp:focus-within>.sub,
header.nav .grp.open>.sub,
header.nav .grp--more.open>.sub{display:flex;}
/* One panel at a time. The rules above open a submenu on :hover OR .open, so a
panel opened by a click stayed up while a second opened under the pointer and
the two overlapped (reported from a laptop, 16 Aug). JS marks every group the
pointer is not in, and this outranks both of the rules above. */
header.nav .grp.nav-dismissed>.sub{display:none !important;}
header.nav .sub a{display:block;padding:.5rem 1.1rem;white-space:nowrap;
font-family:"Prata",Georgia,serif;font-size:.82rem;letter-spacing:.01em;
color:#3A2A22;text-decoration:none;transition:background .15s,color .15s;}
header.nav .sub a:hover{background:rgba(201,164,92,.16);color:#5A222C;}
/* a hover bridge so the menu does not close in the gap under the label */
header.nav .grp>.sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}
header.nav .door-more{background:none;border:0;padding:0;cursor:pointer;
display:inline-flex;align-items:baseline;gap:.3rem;font:inherit;}
header.nav .door-more .caret{font-size:.7rem;color:#8A7460;transition:transform .2s;}
header.nav .grp--more.open .door-more .caret{transform:rotate(180deg);}
@media(max-width:1024px){
header.nav .doors{flex-direction:column;align-items:stretch;gap:0;width:100%;}
header.nav .grp{border-bottom:1px solid rgba(201,164,92,.28);padding:.9rem clamp(1.2rem,5vw,2rem);}
header.nav .door::after{display:none;}
header.nav .door .dt{font-family:"Playfair Display SC","Prata",Georgia,serif;
font-size:.95rem;letter-spacing:.05em;color:#5A222C;white-space:normal;}
header.nav .door .dd{font-size:.66rem;color:#8A7460;white-space:normal;}
header.nav .sub{display:flex;position:static;min-width:0;padding:0;margin-top:.5rem;
background:none;border:0;outline:0;box-shadow:none;}
header.nav .grp>.sub::before{display:none;}
header.nav .door-more{width:100%;justify-content:space-between;}
header.nav .sub a{font-family:"Playfair Display SC","Prata",Georgia,serif;font-size:.82rem;
letter-spacing:.03em;color:#3A2A22;text-decoration:none;padding:.5rem 0 .5rem .9rem;
border-left:1px solid rgba(201,164,92,.4);margin-left:.2rem;}
header.nav .sub a:active{color:#5A222C;}
}
/* ============================================================
Nav controls. Text only, with a hairline that grows on hover.
The booking button is the only filled element in the bar.
============================================================ */
header.nav .menu-btn,header.nav .lang-toggle{
position:relative;background:none;background-image:none;border:0;outline:0;
box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;
font-family:"Cinzel",serif;font-weight:600;text-transform:uppercase;
letter-spacing:.22em;line-height:1;color:#6E5230;
padding:.8rem .25rem .78rem;min-height:44px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:color .3s cubic-bezier(.22,1,.36,1);}
header.nav .menu-btn{font-size:.6rem;}
header.nav .lang-toggle{font-size:.58rem;}
header.nav .menu-btn::before,header.nav .lang-toggle::before{
content:"";position:absolute;left:.25rem;right:.25rem;bottom:.5rem;height:1px;
background:#A9843F;transform:scaleX(0);transform-origin:left;
transition:transform .4s cubic-bezier(.22,1,.36,1);}
header.nav .menu-btn::after,header.nav .lang-toggle::after{content:none;}
header.nav .menu-btn:hover,header.nav .menu-btn:focus-visible,
header.nav .lang-toggle:hover,header.nav .lang-toggle:focus-visible{color:#2B1A14;}
header.nav .menu-btn:hover::before,header.nav .menu-btn:focus-visible::before,
header.nav .lang-toggle:hover::before,header.nav .lang-toggle:focus-visible::before{
transform:scaleX(1);}
/* the one filled element */
header.nav .nav-book{display:inline-flex;align-items:center;justify-content:center;
font-family:"Cinzel",serif;font-size:.62rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:.8rem 1.15rem;background:#5A222C;color:#E7C377;
border:0;border-radius:2px;cursor:pointer;white-space:nowrap;
transition:background .3s cubic-bezier(.22,1,.36,1);}
header.nav .nav-book:hover,header.nav .nav-book:focus-visible{background:#43171F;}
header.nav .nav-call,header.nav .nav-call-mobile{
display:inline-flex;align-items:center;justify-content:center;color:#7E5F2C;
transition:color .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),
filter .3s cubic-bezier(.22,1,.36,1);}
header.nav .nav-call:hover,header.nav .nav-call:focus-visible,
header.nav .nav-call-mobile:hover,header.nav .nav-call-mobile:focus-visible{
color:#A9843F;transform:translateY(-2px);filter:drop-shadow(0 4px 7px rgba(122,94,44,.4));}
/* list marker, option E "Embossed" as chosen. This is the Unicode fleur de lis
character rather than a drawn shape, with a two-sided text shadow that lifts
it off the surface: a dark edge below and a faint light edge above.
The emboss was picked against the dark oxblood band, so on light backgrounds
the shadows are softened to suit. */
.vo-points span::before,.vo-feats li::before,.feat-list li::before,.tick-list li::before,
.vo-list li::before,li.feat::before,.spear::before,.ticks li::before,.why-list li::before,
.plan-list li::before,.bors-services li::before{
content:"\269C" !important;
display:inline-block;flex:none;
width:auto !important;height:auto !important;
background:none !important;
font-size:1.15rem !important;
line-height:inherit !important;
color:var(--marker-ink,#8A6420) !important;
text-shadow:var(--marker-emboss,0 1px 0 rgba(255,255,255,.65),0 -1px 0 rgba(70,46,10,.30)) !important;
border:0 !important;outline:0 !important;box-shadow:none !important;
clip-path:none !important;transform:translateY(-0.14em) !important;
margin:0 .7rem 0 0 !important;
/* flex-start, not center: where a row wraps to two lines the marker must sit
on the first line, not float in the middle of the block */
align-self:flex-start;position:static;}
/* two lists need their own nudge: the travel services grid and the virtual
office points band both center their rows differently from the rest. */
/* the travel services list is a grid whose rows stretch to equal height, and
the row centers its text. so the marker must center too, not sit at the top. */
.bors-services li::before{align-self:center !important;transform:none !important;}
.vo-points span::before{transform:translateY(-0.30em) !important;}
/* dark bands opt back in to the pale gold and the dark-side emboss, which is
how option E was chosen. everything else uses the darker brass above so the
ornament is actually visible on parchment. */
.theme-forest,.final,.contact,.modal,footer,.hero{
--marker-ink:#D9BA77;
--marker-emboss:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.18);}
/* theme-forest sits on , so it would tint every list on the page. only
the genuinely dark bands inside it should inherit the pale gold. */
.theme-forest .section,.theme-forest .container,.theme-forest main,
.theme-forest .bors-band,.theme-forest .vo-band{
--marker-ink:#8A6420;
--marker-emboss:0 1px 0 rgba(255,255,255,.65),0 -1px 0 rgba(70,46,10,.30);}
.theme-forest .final,.theme-forest .contact,.theme-forest footer,
.theme-forest .hero,.theme-forest .modal{
--marker-ink:#D9BA77;
--marker-emboss:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.18);}
/* nothing else may decorate these list rows */
.vo-points span::after,.vo-feats li::after,.feat-list li::after,
.tick-list li::after,.vo-list li::after{content:none !important;
border:0 !important;background:none !important;}
.vo-points span,.vo-feats li,.feat-list li,.tick-list li,.vo-list li{
border-left:0 !important;border:0 !important;align-items:center !important;}
/* ---- phone and tablet menu: a panel, not the whole page ---- */
@media(max-width:1024px){
header.nav .nav-links{
left:auto;right:0;width:min(88vw,400px);
border-left:1px solid #C9A45C;border-bottom:1px solid #C9A45C;
box-shadow:-18px 22px 44px -24px rgba(43,26,20,.5);
padding:.2rem 0 1.2rem;}
/* group heading: bigger, oxblood, letterspaced, with a rule beneath it */
header.nav .grp{padding:1rem clamp(1rem,4vw,1.4rem) .9rem;}
header.nav .door{padding-bottom:.55rem;margin-bottom:.55rem;
border-bottom:1px solid rgba(201,164,92,.55);}
header.nav .door .dt{
font-family:"Cinzel",serif;font-weight:700;font-size:.74rem;
letter-spacing:.2em;text-transform:uppercase;color:#5A222C;}
header.nav .door .dd{
font-family:"Old Standard TT",Georgia,serif;font-style:italic;
font-size:.66rem;color:#9A8672;margin-top:.22rem;}
/* the services under it: smaller, quieter, clearly subordinate */
header.nav .sub{margin-top:.15rem;border-left:0;}
header.nav .sub a{
font-family:"Prata",Georgia,serif;font-size:.86rem;letter-spacing:.01em;
color:#4A3A30;padding:.52rem 0 .52rem 1rem;border-left:0;margin-left:0;
position:relative;}
header.nav .sub a::before{content:"";position:absolute;left:0;top:50%;
width:6px;height:1px;background:rgba(201,164,92,.8);}
}
/* ---- the open panel stays put and owns its own scrolling ---- */
@media(max-width:1024px){
header.nav .nav-links{position:fixed;top:var(--navh,66px);bottom:0;right:0;left:auto;
width:min(88vw,400px);max-height:none;height:auto;overflow-y:auto;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
body.no-scroll{overflow:hidden;position:fixed;width:100%;}
/* dim the page behind, so the panel reads as sitting over it */
header.nav .nav-links.open::after{content:"";position:fixed;inset:var(--navh,66px) min(88vw,400px) 0 0;
background:rgba(43,26,20,.28);z-index:-1;pointer-events:none;}
/* hover and touch highlight, so you always know what you are on */
header.nav .sub a,header.nav .door{transition:background .22s ease,color .22s ease,padding-left .22s ease;}
header.nav .sub a:hover,header.nav .sub a:focus-visible,header.nav .sub a:active{
background:rgba(201,164,92,.18);color:#5A222C;padding-left:1.35rem;}
header.nav .sub a:hover::before{width:12px;background:#A9843F;}
header.nav .door:hover .dt,header.nav .door:focus-visible .dt{color:#43171F;}
header.nav .grp:hover{background:rgba(201,164,92,.07);}
}
/* hero copy on the dark green bands: raise it well clear of the background */
.theme-forest .hero .lead,.hero .lead{color:#F7F1E4 !important;
font-weight:400;letter-spacing:.004em;line-height:1.68;
text-shadow:0 1px 3px rgba(9,19,27,.55);}
.theme-forest .hero .eyebrow,.hero .eyebrow--light{color:#F0D9A0 !important;}
/* (was #2B4459 - removed 16 Aug: silently overridden 13 lines below, and
not the Prussian blue that was actually chosen. Noted so nobody re-adds
it wondering why the hero will not change colour.) */
/* house ornament used as a section divider, the way the Mission Inn uses its bell */
.orn{display:block;width:100%;max-width:240px;height:24px;margin:clamp(1rem,2vw,1.8rem) auto;
background:url("data:image/svg+xml,") no-repeat center/contain;opacity:.9;}
.orn--tight{margin:clamp(1.4rem,3vw,2.2rem) auto;}
.theme-forest .orn{filter:brightness(1.25);}
/* ============================================================
Morris wallpaper on the interior hero bands.
Pattern at 24%, then a scrim that fades it out under the text
so the words sit on near-solid green and stay legible.
============================================================ */
.theme-forest .hero{position:relative;isolation:isolate;background:#283F51 !important;}
/* The wallpaper is an olive green. At .24 it was invisible under the old 93%
overlay, but with the overlay now light it shows through strongly and drags
the whole panel toward green: measured, the blue lead over green fell from
18 to 8. Eased back so the pattern still reads without tinting the brand. */
.theme-forest .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:url("images/morris-wallpaper.jpg") repeat;background-size:760px auto;opacity:.16;}
/* the scrim: strong on the left where the copy lives, clearing to the right */
/* Kept in the brand blue, not a neutral: the hero background here is solid
#283F51, so anything warm laid over it turns the panel muddy black and the
Prussian blue stops reading. Kept light, too. Measured on the solid colour
plus the wallpaper, with no darkening at all, the gold italic already sits
at 4.74:1 against a 3.0 requirement. This layer is for depth, not rescue. */
.theme-forest .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(14,34,60,.45) 0%,rgba(14,34,60,.36) 26%,
rgba(14,34,60,.22) 52%,rgba(14,34,60,.08) 78%,rgba(14,34,60,.02) 100%),
linear-gradient(0deg,rgba(10,26,48,.22),transparent 55%);}
.theme-forest .hero .container,.theme-forest .hero .hero-split{position:relative;z-index:2;}
/* type lifted well clear of the pattern */
.theme-forest .hero .lead{color:#FBF6EA !important;text-shadow:0 1px 4px rgba(7,16,23,.75) !important;}
.theme-forest .hero h1,.theme-forest .hero h2{color:#FDF8EC !important;text-shadow:0 2px 9px rgba(7,16,23,.7);}
.theme-forest .hero .eyebrow{color:#F0D9A0 !important;text-shadow:0 1px 3px rgba(7,16,23,.6);}
.theme-forest .hero .tour-facts{color:#F0D9A0 !important;text-shadow:0 1px 3px rgba(7,16,23,.6);}
/* ---- Weddings: same Morris wallpaper, black ground instead of green ---- */
.theme-rose .hero{position:relative;isolation:isolate;background:#171313 !important;}
.theme-rose .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:url("images/morris-wallpaper-black.jpg") repeat;background-size:760px auto;opacity:.24;}
/* Same reasoning as theme-forest above: the hero base here is a solid #171313,
so the layer stays in that family and stays light. */
.theme-rose .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(23,19,19,.45) 0%,rgba(23,19,19,.36) 26%,
rgba(23,19,19,.22) 52%,rgba(23,19,19,.08) 78%,rgba(23,19,19,.02) 100%),
linear-gradient(0deg,rgba(12,9,9,.22),transparent 55%);}
.theme-rose .hero .container,.theme-rose .hero .hero-split{position:relative;z-index:2;}
.theme-rose .hero .lead{color:#FBF6EA !important;text-shadow:0 1px 4px rgba(0,0,0,.8) !important;}
.theme-rose .hero h1,.theme-rose .hero h2{color:#FDF8EC !important;text-shadow:0 2px 9px rgba(0,0,0,.75);}
.theme-rose .hero .eyebrow{color:#F0D9A0 !important;text-shadow:0 1px 3px rgba(0,0,0,.7);}
/* nav phone bar: a framed block inside the mobile menu panel only. on desktop
it is plain text beside the other controls, with no border and no full width. */
@media(max-width:1024px){
header.nav .nav-links .nav-call{align-self:center;width:calc(100% - 2.4rem);
margin:.9rem auto .2rem !important;padding:.7rem 1rem !important;
border-radius:2px;border:1px solid rgba(231,195,119,.55);}
}
header.nav .nav-inner{align-items:center;}
header.nav .nav-right{align-self:center;}
/* page name inside the name plate, so you always know where you are */
header.nav .wm-page{display:block;font-family:"Prata",Georgia,serif;
font-size:.74rem;letter-spacing:.02em;line-height:1.2;color:var(--brass-ink);
margin-top:.22rem;padding-top:.22rem;border-top:1px solid rgba(201,164,92,.45);
text-transform:none;}
@media(max-width:1024px){header.nav .wm-page{font-size:.66rem;margin-top:.16rem;padding-top:.16rem;}}
@media(max-width:400px){header.nav .wm-page{font-size:.6rem;}}
/* virtual office plan tiers */
.plan-stack{display:grid;gap:1.15rem;text-align:left;margin-top:.6rem;}
.plan{background:#FBF6EC;border:0;border-radius:14px;overflow:hidden;padding:0 0 1.35rem;
box-shadow:0 18px 40px -28px rgba(26,20,10,.55);}
.plan--day{background:#F4EEE1;}
.plan--top{background:#FCF8F0;}
.plan-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;
background:linear-gradient(165deg,#2A2118,#171208);padding:.92rem 1.2rem;margin:0 0 1.05rem;}
.plan--day .plan-top{background:linear-gradient(165deg,#B7A78B,#A2926F);}
.plan--day .plan-top h3{color:#2A2118;}
.plan--day .plan-price{color:#2A2118;}
.plan--mid .plan-top{background:linear-gradient(165deg,#1A3348,#0F2130);}
.plan--top .plan-top{background:linear-gradient(165deg,#4A1C24,#2C0F15);}
.plan-top h3{margin:0;font-family:"Cinzel",serif;font-size:.92rem;letter-spacing:.11em;
text-transform:uppercase;color:#E4CE97;}
.plan-price{font-family:"Prata",Georgia,serif;font-size:.86rem;color:rgba(228,206,151,.82);}
.plan p{margin:0 1.2rem;font-size:.96rem;color:#473C34;line-height:1.6;}
.plan-list{list-style:none;margin:.75rem 1.2rem 0;padding:0;}
.plan-list li{display:flex;gap:0;align-items:flex-start;margin:.34rem 0;font-size:.93rem;color:#4E443B;line-height:1.55;}
.plan-note{font-size:.95rem;color:#473C34;margin:1.1rem 0 0;padding-top:.9rem;
border-top:1px solid rgba(201,164,92,.35);}
/* All four plans run full width and stack, the way Day Pass already did.
Two columns made the monthly plans read as boxes beside each other while
Day Pass sat across the top, which looked like two different components. */
/* accessibility notice, required because the upper floor cannot be retrofitted */
.ada-note{max-width:70ch;margin:2.2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem;line-height:1.7;color:#6A6058;text-align:center;}
/* Victorian rule under section titles. The heading shrinks to the width of its
own text, so the rule ends where the words end rather than running on to the
edge of the column. A brass hairline with a small diamond set in a gap. */
.section h2{position:relative;width:fit-content;max-width:100%;}
.section h2::after{content:"";display:block;width:100%;height:9px;margin-top:.9rem;
background-image:
linear-gradient(to right, rgba(169,132,63,.55) 0 calc(50% - 15px),
transparent calc(50% - 15px) calc(50% + 15px),
rgba(169,132,63,.55) calc(50% + 15px) 100%),
url("data:image/svg+xml,");
background-repeat:no-repeat,no-repeat;
background-size:100% 1px, 9px 9px;
background-position:left center, center center;}
/* a shrunk block still needs centering where the wrapper centers its text */
.section h2[style*="text-align:center"],
.section .head h2,.section .faq-head h2,.section .gallery-intro h2,
.section .inner h2,.section .contact-inner h2,
.steps h2,.final h2,.contact h2,.amenities h2,.quote-band h2{margin-inline:auto;}
/* on the dark bands the brass needs lifting */
.theme-forest .section h2::after{filter:brightness(1.35);}
/* card headings and pull quotes keep their own rhythm, no rule */
.quote-band h2::after,.pkg h3::after,.space-body h3::after{display:none;}
/* footer call to action: a quiet brass outline, not a browser default button */
.foot-cta{display:inline-block;margin-top:.5rem;padding:.55rem 1rem;
font-family:"Cinzel",serif;font-size:.6rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--brass-light);background:none;cursor:pointer;
border:1px solid rgba(217,186,119,.45);border-radius:2px;
transition:background .2s,color .2s,border-color .2s;}
.foot-cta:hover{background:rgba(217,186,119,.14);color:#F1E6D3;border-color:rgba(217,186,119,.8);}
/* skip to content: invisible until a keyboard user tabs to it, then it is the
first thing they reach on the page */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;
background:#5A222C;color:#F1E6D3;padding:.75rem 1.25rem;
font-family:"Cinzel",serif;font-size:.72rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
border:1px solid #C9A45C;border-radius:0 0 3px 0;}
.skip-link:focus{left:0;outline:2px solid #C9A45C;outline-offset:2px;}
/* ---------- required fields on the inquiry forms ----------
The star hangs off the wrapper, never inside the label. Switching the page to
Spanish replaces a label's entire contents, so anything placed inside one
would silently disappear the moment somebody pressed ESPAÑOL. */
.field.req > label::after{content:" *";color:#A9843F;font-weight:700;}
.field input.invalid,.field textarea.invalid,.field select.invalid{
border-color:#8C2D2D !important;
box-shadow:0 0 0 2px rgba(140,45,45,.15);}
#formError{margin-top:1rem;color:#8C2D2D;font-weight:600;font-size:.92rem;}
/* ---------- headings with nothing beside them ----------
These sections have no photo or second column, so the heading was pinned to
the left with 600px of empty page next to it, which read like a missing
image. Centring the block makes the emptiness look deliberate. Sections that
genuinely do have something alongside are left alone. */
.sec-center{text-align:center;margin-inline:auto;}
.sec-center > h2{margin-inline:auto;}
.sec-center > p{margin-left:auto;margin-right:auto;}
.sec-center .eyebrow{justify-content:center;}
/* ---- 5 Aug. Two more ways the page could be dragged sideways ----------
privacy@thecrescenthouse1887.com is one unbreakable word 331px wide. On a
320px phone it pushed the page 51px wider than the screen. A long address
is one unbreakable word to a browser unless you say otherwise. */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere;}
/* Steven remembers the page being locked sideways and the lock going missing.
Checking the history: it never was a lock. Every version up to 13 July had
nothing wider than the screen, and the 4 August form split introduced a
contact card 53px too wide. The width fix above restores that. This line is
the belt: it stops the sideways rubber band that lets a diagonal swipe drag
the page off center. It does not touch pinch zoom. */
html{overscroll-behavior-x:none;}
/* Below 360px the logo, the phone, Espanol and Menu together were 6px wider
than the header. Only bites on the very narrowest phones, so nothing that
a common handset renders today is touched. */
@media (max-width:360px){
header.nav .nav-inner{padding-left:.6rem;padding-right:.6rem;gap:.4rem;}
header.nav .nav-mobile-controls{gap:.45rem;padding-right:0;}
}
/* ---- 6 Aug. Heard but not seen ----------------------------------------
WCAG 2.5.3 says a control's name has to contain the words printed on it,
so that somebody driving the page by voice can say what they can see.
The wordmark needed the word "home" in its name without it appearing in
the logo. This is the standard way to say something to a screen reader
only. Not display:none and not visibility:hidden, because both of those
hide it from the screen reader too. */
.a11y-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
border:0;}
/* ==========================================================
TOUCH · added 8 August
========================================================== */
/* No hover on a touch screen. See fix_touch.py for why the first tap
was being eaten. !important is needed only here: four pages declare
their own .btn-primary:hover in an inline style block that loads
after this file, and it is scoped to the transform, nothing else. */
@media (hover: none) {
.btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-brass:hover,
.card-btn:hover, .path-card:hover, .space-card:hover, .evt-card:hover,
.pkg:hover, .g-tile:hover img, .space-card:hover .space-media img,
header.nav .nav-call:hover, header.nav .nav-call-mobile:hover {
transform: none !important;
}
/* Nothing worth hiding behind a hover that is never going to happen.
Both selectors are deliberately one step longer than the rules they
are overriding. A media query adds no specificity, and the rules that
hide these live in each page's own inline block, which loads after
this file, so an equal-specificity override would quietly lose. The
first version of this did lose, and the caption test caught it. */
.g-tile .g-cap { opacity: 1; transform: none; }
.space-card .space-media .zoom { opacity: 1; }
}
/* The press. A brass ring around the edge, not a colour across the
label, so the words stay readable while it is held down. */
.btn:active, .card-btn:active, .faq-q:active,
header.nav .menu-btn:active, header.nav .lang-toggle:active,
.modal-close:active, .g-tile:active, .space-media:active {
box-shadow: 0 0 0 3px rgba(194,155,78,.6), 0 2px 7px -2px rgba(33,26,22,.55);
transition-duration: 0s;
}
.btn:active, .card-btn:active { transform: translateY(1px); }
/* Safari draws this the instant a finger lands, before any transition
can run, so it is the fastest confirmation available. */
a, button, .btn, .card-btn, .g-tile, .space-media, .faq-q,
[data-modal-open], summary, label {
-webkit-tap-highlight-color: rgba(194,155,78,.32);
}
/* The date field. It gave itself a width from its own contents and a
grid child will not shrink below that unless told it may, so the box
grew out of line with the others the moment a date went in. And it
centres its value while every other field reads from the left. */
.field-row > * { min-width: 0; }
.field input[type="date"] { min-width: 0; width: 100%; }
.field input[type="date"]::-webkit-date-and-time-value {
text-align: left;
min-height: 1.25em;
margin: 0;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
margin-inline-start: auto;
opacity: .55;
}
/* ==========================================================
PHONE MENU TYPE · option A, 8 August
==========================================================
Headings 11.8 -> 13.8px, links 13.8 -> 16px, and the row a finger has
to hit goes 39 -> 45px, clearing the 44 point minimum for the first
time. Appended at the end of this file on purpose: the rules being
raised are earlier in the same sheet at the same specificity, so
ordering does the work and no !important is needed. */
@media (max-width: 1024px) {
header.nav .door .dt { font-size: .86rem; }
header.nav .sub a {
font-size: 1rem;
padding-top: .58rem;
padding-bottom: .58rem;
}
}
/* ==========================================================
PHONE MENU SPACING · 8 August
==========================================================
See fix_menu_gap.py. Three things: the empty space under Weddings,
which is the only heading with no links beneath it; tighter section
spacing so more of the menu is visible before you scroll; and a
real tap target on the phone icon in the header. */
@media (max-width: 1024px) {
/* a heading with nothing under it is a menu item, not a section */
header.nav .grp:not(:has(.sub)) {
padding-top: .9rem;
padding-bottom: .9rem;
}
header.nav .grp:not(:has(.sub)) .door {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
/* space between the groups, not inside the rows a finger has to hit */
header.nav .grp { padding-top: .55rem; padding-bottom: .45rem; }
header.nav .grp .door { padding-bottom: .28rem; margin-bottom: .28rem; }
header.nav .sub { margin-top: .04rem; }
header.nav .nav-links { padding-bottom: .45rem; }
header.nav .nav-links .nav-call {
margin-top: .45rem !important;
padding-top: .62rem !important;
padding-bottom: .62rem !important;
}
/* The handset in the header is the one route to the phone number that
needs no menu and no scrolling, and it was a 21 point target. Padded
to 44 with a negative margin so the header does not move: the icon
stays exactly where it is and only the area that answers a thumb
grows around it. */
header.nav .nav-call-mobile {
padding: 12px;
margin: -12px;
border-radius: 50%;
}
}
/* ==========================================================
HOLDING THE PAGE STILL · 9 August
==========================================================
See fix_ramp_and_faults.py. The body is held at minus the reader's
scroll offset while an overlay is open, so their place is not lost.
That leaves header.nav, which is sticky, with nothing to stick to, so
it is pinned to the viewport for the duration and the body is given its
height back as padding so nothing underneath appears to move. */
@media (max-width: 1024px) {
body.no-scroll { padding-top: var(--navh, 66px); }
body.no-scroll header.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
}
}