:root {
--color-ink: #172017;
--color-muted: #647067;
--color-bg: #fffaf1;
--color-surface: #ffffff;
--color-alt: #f4efe5;
--color-green: #26382a;
--color-green-2: #36543e;
--color-accent: #b98c43;
--radius: 22px;
--shadow: 0 20px 60px rgba(23, 32, 23, .10);
--container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--color-ink); background:var(--color-bg); line-height:1.6; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
img { max-width:100%; height:auto; display:block; }
.container { width:min(var(--container), calc(100% - 32px)); margin-inline:auto; }
.content-narrow { max-width: 820px; }
.skip-link { position:absolute; left:-999px; top:10px; background:#fff; padding:.6rem 1rem; z-index:20; }
.skip-link:focus { left:10px; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,250,241,.92); backdrop-filter: blur(14px); border-bottom:1px solid rgba(38,56,42,.10); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; }
.brand { display:flex; flex-direction:column; gap:2px; }
.site-title { font-family: Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight:700; text-decoration:none; }
.site-tagline { color:var(--color-muted); font-size:.95rem; }
.primary-nav ul { display:flex; gap:22px; align-items:center; list-style:none; margin:0; padding:0; }
.primary-nav a { text-decoration:none; font-weight:650; color:var(--color-green); }
.primary-nav a:hover { color:var(--color-accent); }
.menu-toggle { display:none; border:1px solid rgba(38,56,42,.20); background:#fff; border-radius:999px; padding:.55rem .9rem; }
.hero { padding: clamp(64px, 8vw, 124px) 0; background: radial-gradient(circle at 80% 20%, rgba(185,140,67,.22), transparent 32%), linear-gradient(135deg, #fffaf1 0%, #eef3e8 100%); }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap:44px; align-items:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; font-weight:800; color:var(--color-accent); margin:0 0 .7rem; }
h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; line-height:1.08; margin:0 0 1rem; color:var(--color-green); }
h1 { font-size: clamp(2.8rem, 7vw, 5.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.hero-copy p:not(.eyebrow) { font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 680px; color:#304235; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.button, button, input[type="submit"] { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:.88rem 1.2rem; background:var(--color-green); color:#fff; font-weight:800; text-decoration:none; cursor:pointer; transition:.18s ease; }
.button:hover, input[type="submit"]:hover { background:var(--color-green-2); transform:translateY(-1px); }
.button-secondary { background:#fff; color:var(--color-green); box-shadow: inset 0 0 0 1px rgba(38,56,42,.20); }
.hero-card, .card, .side-card, .form-card, .fallback-contact-box { background:var(--color-surface); border:1px solid rgba(38,56,42,.10); border-radius:var(--radius); box-shadow:var(--shadow); }
.hero-card { padding:28px; }
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section.alt { background:var(--color-alt); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.cards-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; }
.listing-card { overflow:hidden; }
.listing-card img { width:100%; aspect-ratio: 4 / 3; object-fit:cover; }
.card-body { padding:24px; }
.card-body h3 a { text-decoration:none; }
.entry-card { padding:24px; margin-bottom:22px; }
.meta-list { display:grid; gap:8px; margin:18px 0; }
.meta-list div { display:flex; justify-content:space-between; gap:16px; padding:.55rem 0; border-bottom:1px solid rgba(38,56,42,.10); }
.meta-list dt { font-weight:800; color:var(--color-green); }
.meta-list dd { margin:0; text-align:right; color:var(--color-muted); }
.amenities { padding-left:1.15rem; }
.amenities li { margin:.35rem 0; }
.text-link { color:var(--color-green); font-weight:800; }
.page-header { padding: clamp(48px, 7vw, 86px) 0; background:linear-gradient(135deg, #eef3e8, #fffaf1); border-bottom:1px solid rgba(38,56,42,.10); }
.page-header h1 { font-size: clamp(2.3rem, 5vw, 4.8rem); }
.page-content { font-size:1.06rem; }
.page-content > *:first-child { margin-top:0; }
.detail-grid { display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:36px; align-items:start; }
.detail-image { width:100%; border-radius:var(--radius); margin-bottom:28px; box-shadow:var(--shadow); }
.side-card { padding:26px; position:sticky; top:108px; }
.price, .price-large { color:var(--color-accent); font-weight:900; }
.price-large { font-size:1.35rem; }
.contact-section { background:var(--color-green); color:#fff; }
.contact-section h2, .contact-section .eyebrow { color:#fff; }
.contact-section p { color:rgba(255,255,255,.82); }
.contact-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap:36px; align-items:start; }
.form-card { padding:26px; color:var(--color-ink); }
.form-card input, .form-card textarea, .form-card select { width:100%; border:1px solid rgba(38,56,42,.18); border-radius:14px; padding:.8rem .95rem; font:inherit; background:#fff; }
.form-card label { font-weight:700; }
.site-footer { padding:54px 0 26px; background:#111811; color:#fff; }
.site-footer a { color:#fff; }
.site-footer h2 { color:#fff; font-size:1.3rem; }
.site-footer p { color:rgba(255,255,255,.78); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:28px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; align-items:center; border-top:1px solid rgba(255,255,255,.14); padding-top:22px; margin-top:32px; }
.footer-bottom ul { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
@media (max-width: 880px) {
.menu-toggle { display:inline-flex; }
.primary-nav { display:none; position:absolute; left:16px; right:16px; top:76px; background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:16px; }
.primary-nav.is-open { display:block; }
.primary-nav ul { flex-direction:column; align-items:flex-start; gap:12px; }
.hero-grid, .contact-grid, .detail-grid, .footer-grid { grid-template-columns:1fr; }
.cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.side-card { position:static; }
}
@media (max-width: 620px) {
.cards-grid { grid-template-columns: 1fr; }
.footer-bottom { align-items:flex-start; flex-direction:column; }
h1 { font-size:2.65rem; }
} .hero.joeranna-inspired {
padding: clamp(42px, 6vw, 92px) 0 clamp(58px, 8vw, 118px);
background:
linear-gradient(180deg, rgba(255,250,241,.94), rgba(244,239,229,.66)),
radial-gradient(circle at 18% 16%, rgba(185,140,67,.18), transparent 30%),
linear-gradient(135deg, #fffaf1 0%, #edf3e8 100%);
}
.hero-media-wrap { position:relative; min-height: 520px; }
.hero-media {
width:100%;
height: clamp(380px, 48vw, 620px);
object-fit:cover;
border-radius: 30px;
box-shadow: 0 28px 80px rgba(23,32,23,.16);
border: 1px solid rgba(38,56,42,.12);
}
.hero-media-placeholder {
display:flex;
align-items:center;
justify-content:center;
background: linear-gradient(135deg, rgba(38,56,42,.14), rgba(185,140,67,.16));
color: var(--color-green);
font-weight:800;
}
.floating-contact {
position:absolute;
left: clamp(14px, 3vw, 34px);
right: clamp(14px, 3vw, 34px);
bottom: -34px;
background: rgba(255,255,255,.94);
backdrop-filter: blur(14px);
}
.split-intro {
display:grid;
grid-template-columns: .82fr 1.18fr;
gap: clamp(28px, 7vw, 88px);
align-items:start;
}
.intro-copy {
font-size: clamp(1.08rem, 1.4vw, 1.24rem);
color:#334338;
padding-top:.5rem;
}
.feature-band {
padding-top: 0;
background: var(--color-bg);
}
.section-heading.centered {
text-align:center;
display:block;
max-width:760px;
margin-inline:auto;
}
.feature-grid.compact {
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:14px;
margin-top:30px;
}
.feature-pill {
background:#fff;
border:1px solid rgba(38,56,42,.12);
border-radius:999px;
padding:1rem 1.15rem;
text-align:center;
font-weight:800;
color:var(--color-green);
box-shadow: 0 10px 30px rgba(23,32,23,.06);
}
.large-cards.cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.large-cards .listing-card img { aspect-ratio: 16 / 10; }
.why-section {
background:
linear-gradient(rgba(17,24,17,.78), rgba(17,24,17,.78)),
linear-gradient(135deg, var(--color-green), #111811);
color:#fff;
}
.why-section h2, .why-section .eyebrow { color:#fff; }
.why-grid {
display:grid;
grid-template-columns: .75fr 1.25fr;
gap: clamp(28px, 6vw, 80px);
align-items:start;
}
.why-list {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:14px;
}
.why-list li {
position:relative;
padding:1.05rem 1.1rem 1.05rem 2.7rem;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
border-radius:18px;
}
.why-list li:before {
content:"";
position:absolute;
left:1.1rem;
top:1.55rem;
width:.58rem;
height:.58rem;
border-radius:999px;
background:var(--color-accent);
}
@media (max-width: 880px) {
.hero-media-wrap { min-height:auto; padding-bottom: 52px; }
.split-intro, .why-grid { grid-template-columns:1fr; }
.feature-grid.compact, .large-cards.cards-grid, .why-list { grid-template-columns:1fr; }
}