:root {
  --bg: #f3f0e6; --surface: #fffefa; --ink: #16251c; --muted: #55624f; --line: rgba(22,37,28,.15);
  --accent: #1d6b42; --accent-ink: #ffffff; --dark: #12241a; --dark-ink: #f3f0e6; --sun: #f2b705; --lake: #2f7fa6; --wood: #3a2a20;
  --radius: 14px; --btn-radius: 10px; --gutter: clamp(16px, 4vw, 48px);
  --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --f-body: 'Public Sans', system-ui, sans-serif;
  --hk-accent: var(--accent); --hk-accent-ink: #fff; --hk-bg: #fffefa; --hk-ink: var(--ink); --hk-muted: var(--muted); --hk-line: var(--line); --hk-font: var(--f-body); --hk-radius: 14px;
}
h1, h2, h3 { font-stretch: 100%; font-weight: 800; letter-spacing: -.02em; } .h2 { font-weight: 900; text-transform: none; }
.eyebrow { color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 6px var(--wood); }
.brand { gap: 10px; display: flex; align-items: center; font-weight: 900; letter-spacing: -.03em; } .brand i { width: 30px; height: 30px; border-radius: 6px; background: var(--wood); display: grid; place-items: center; } .brand i::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); }
/* hero */
.hero { position: relative; isolation: isolate; color: #fff; min-height: min(86vh, 760px); display: grid; align-items: end; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,24,16,.25) 0%, rgba(10,24,16,.15) 30%, rgba(10,24,16,.82) 100%); }
.hero__in { padding-block: clamp(80px, 12vw, 150px) clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr); gap: 40px; align-items: end; } @media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(42px, 7vw, 92px); font-weight: 900; line-height: .98; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero h1 em { font-style: normal; background: var(--sun); color: var(--wood); padding: 0 .12em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .eyebrow { color: #fff; } .hero .lead { color: rgba(255,255,255,.92); max-width: 52ch; } .hero .btn--ghost { color: #fff; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
/* wayfinding signs */
.signs { display: grid; gap: 10px; }
.sign { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--wood); color: #f6e9d3; padding: 14px 18px 14px 44px; border-radius: 6px 22px 22px 6px; position: relative; font: 800 17px/1.2 var(--f-display); box-shadow: 0 8px 22px rgba(0,0,0,.35); border: 2px solid #5b4333; } .sign::before { content: ''; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #e8742b; }
.sign b { font-size: 22px; color: var(--sun); white-space: nowrap; } .sign:nth-child(even) { margin-left: 22px; border-radius: 22px 6px 6px 22px; } .sign:nth-child(even)::before { background: var(--lake); }
/* facts strip */
.fx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 2px solid var(--ink); } .fx div { padding: 24px 22px; border-right: 1px solid var(--line); } .fx div:last-child { border-right: 0; } .fx h3 { font-size: 21px; margin: 0 0 6px; } .fx p { margin: 0; color: var(--muted); font-size: 15px; } @media (max-width: 860px) { .fx { grid-template-columns: 1fr 1fr; } .fx div:nth-child(2) { border-right: 0; } .fx div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
/* rooms + table */
.rm { border-radius: 12px; } .rm__body h3 { font-size: 22px; } .rm__price b { color: var(--accent); }
.rooms-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; margin-top: 36px; } @media (max-width: 1000px) { .rooms-layout { grid-template-columns: 1fr; } } .rooms-layout .rooms { margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } .rooms-layout aside { position: sticky; top: 96px; }
/* bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; margin-top: 30px; } .bento .a { grid-column: span 2; grid-row: span 2; } .bento .b { grid-column: span 2; } .bento .c, .bento .d { grid-column: span 1; } @media (max-width: 700px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .bento .b { grid-column: span 2; } }
.nat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; } .nat .photo { aspect-ratio: 4/3; position: relative; } .nat figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; color: #fff; font-weight: 800; background: linear-gradient(transparent, rgba(0,0,0,.7)); } @media (max-width: 700px) { .nat { grid-template-columns: 1fr; } }
.nature { background: var(--dark); color: var(--dark-ink); } .nature .eyebrow { color: var(--sun); } .nature .lead { color: rgba(243,240,230,.8); }
.here { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); } @media (max-width: 860px) { .here { grid-template-columns: 1fr; } } .bus { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; } .bus li { padding-left: 32px; position: relative; color: var(--muted); } .bus li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 4px var(--wood); }
.grp { background: var(--sun); color: var(--wood); border-radius: 20px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; } .grp .eyebrow { color: var(--wood); } .grp .btn { background: var(--wood); color: #fff; } @media (max-width: 760px) { .grp { grid-template-columns: 1fr; } }
.booking { background: var(--dark); color: var(--dark-ink); } .booking .eyebrow { color: var(--sun); } .booking .lead { color: rgba(243,240,230,.8); margin-inline: auto; } .booking .h2, .booking .eyebrow, .booking .lead { text-align: center; display: block; } .booking .eyebrow { display: flex; justify-content: center; } .booking .bk { color: var(--ink); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); } @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }