/*
Theme Name: Thala
Theme URI: https://thalabeach.com.au
Description: Lightweight, builder-free theme for Thala Beach Nature Reserve. One stylesheet, one small script, no jQuery.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Author: Thala Beach Nature Reserve
Text Domain: thala
*/

/* ---------------------------------------------------------------- Tokens */

:root {
	--bg: oklch(0.972 0.008 85);
	--paper: oklch(0.99 0.005 85);
	--ink: oklch(0.22 0.015 60);
	--ink-2: oklch(0.33 0.018 60);
	--ink-3: oklch(0.42 0.02 60);
	--muted: oklch(0.50 0.02 60);
	--line: oklch(0.22 0.015 60 / 0.12);
	--gold: oklch(0.60 0.105 72);
	--gold-2: oklch(0.72 0.13 72);
	--gold-3: oklch(0.85 0.09 72);
	--link: oklch(0.45 0.09 72);
	--plum: oklch(0.34 0.055 340);
	--dark: oklch(0.24 0.02 60);
	--darker: oklch(0.20 0.015 60);
	--on-dark: oklch(0.97 0.008 85);
	--on-dark-2: oklch(0.82 0.01 85);
	--placeholder: repeating-linear-gradient(135deg, oklch(0.90 0.012 85) 0 9px, oklch(0.94 0.010 85) 9px 18px);

	--serif: "Libre Baskerville", Georgia, serif;
	--sans: Jost, "Helvetica Neue", Arial, sans-serif;

	--wrap: 1280px;
	--gutter: 32px;
	--header-h: 82px;
}

/* ------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--plum); }
input, select, button, textarea { font: inherit; max-width: 100%; }
::selection { background: oklch(0.60 0.105 72 / 0.25); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--ink); color: var(--paper); padding: 10px 18px;
}
.skip-link:focus { top: 12px; color: var(--paper); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.wrap--narrow { max-width: 820px; }
.section { padding-top: 100px; padding-bottom: 96px; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--dark); color: var(--on-dark); }

/* ------------------------------------------------------------ Typography */

.eyebrow {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--gold);
}
.eyebrow--light { color: var(--gold-2); }
.eyebrow--pale { color: var(--gold-3); }

.h2, .h3 { font-family: var(--serif); font-weight: 400; text-wrap: pretty; }
.h2 {
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.14;
	letter-spacing: -0.01em;
	margin: 16px 0 0;
}
.h2--xl { font-size: clamp(32px, 4vw, 54px); line-height: 1.12; margin: 0 0 20px; }
.h3 { font-size: 30px; line-height: 1.2; margin: 14px 0 12px; }

.lede {
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--ink-2);
	font-weight: 300;
	margin: 22px 0 32px;
	max-width: 52ch;
}

.text-link {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--gold);
	padding-bottom: 4px;
}
.text-link--light { color: var(--paper); border-color: var(--gold-3); }
.text-link--light:hover { color: var(--gold-3); }

/* --------------------------------------------------------------- Buttons */

.btn {
	display: inline-block;
	padding: 13px 22px;
	font-size: 12px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	font-weight: 500;
	white-space: nowrap;
	text-align: center;
	border: 1px solid transparent;
	transition: background-color .15s, color .15s;
}
.btn--lg { padding: 16px 30px; font-size: 13px; }
.btn--xl { padding: 19px 44px; font-size: 14px; letter-spacing: 0.12em; }
.btn--block { display: block; }
.btn--gold { background: var(--gold); color: var(--paper); }
.btn--gold:hover { background: var(--plum); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--gold); color: var(--paper); }
.btn--ghost { border-color: oklch(0.99 0.005 85 / 0.45); color: var(--paper); }
.btn--ghost:hover { background: oklch(0.99 0.005 85 / 0.14); color: var(--paper); }
.section--dark .btn--gold:hover,
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; gap: 16px; }

/* ---------------------------------------------------------------- Header */

.site-header {
	position: sticky; top: 0; z-index: 60;
	border-bottom: 1px solid oklch(0.22 0.015 60 / 0.1);
}
/* The blur sits on a pseudo-element: backdrop-filter on the header itself
 * would trap the fixed-position phone menu inside the header's box. */
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: oklch(0.972 0.008 85 / 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.admin-bar .site-header { top: 32px; }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 36px; }
.site-logo { flex: 0 0 auto; display: block; }
.site-logo img { height: 54px; width: auto; display: block; }

.site-nav { margin-left: auto; }
.site-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 26px;
	font-size: 13.5px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.site-nav__list a { color: var(--ink); }
.site-nav__list a:hover,
.site-nav__list a[aria-current],
.site-nav__list .is-current > a { color: var(--link); }
.site-nav__contact { display: none; }

/* Desktop dropdowns: open on hover or keyboard focus. */
.site-nav__list li { position: relative; }
.site-nav__list .has-sub > a::after {
	content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px;
	border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.sub-toggle { display: none; }
.sub-menu {
	list-style: none; margin: 0; padding: 10px 0;
	position: absolute; top: 100%; left: -20px; min-width: 210px;
	background: var(--bg); border: 1px solid var(--line);
	box-shadow: 0 12px 32px oklch(0.22 0.015 60 / 0.12);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sub-menu a { display: block; padding: 9px 20px; font-size: 12.5px; }
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.site-header__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.site-header__phone { font-size: 14px; letter-spacing: 0.02em; color: var(--ink-2); white-space: nowrap; }
.site-header__actions .btn { padding: 14px 26px; font-size: 13px; letter-spacing: 0.1em; }

.nav-toggle {
	display: none;
	background: none; border: 0; padding: 12px 8px; margin-left: auto; cursor: pointer; color: var(--ink);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block; width: 24px; height: 1.5px; background: currentColor; position: relative;
	transition: transform .2s, background-color .2s;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ Hero */

.hero {
	position: relative;
	min-height: 760px;
	display: flex; flex-direction: column; justify-content: flex-end;
	overflow: hidden;
	background: oklch(0.28 0.02 60);
}
.hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 78% 45%; /* keeps the headland in view */
}
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to bottom, oklch(0.22 0.015 60 / 0.42) 0%, oklch(0.22 0.015 60 / 0.15) 32%, oklch(0.22 0.015 60 / 0.72) 100%);
}
.hero__copy, .hero__booking { position: relative; z-index: 2; }
.hero__copy { padding-top: 120px; }
.hero__badge {
	display: inline-flex; align-items: center; gap: 10px;
	border: 1px solid oklch(0.99 0.005 85 / 0.45);
	padding: 7px 16px; margin: 0 0 28px;
	color: var(--paper); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.dot { width: 5px; height: 5px; background: var(--gold-2); border-radius: 50%; flex: none; }
.hero__title {
	font-family: var(--serif); font-weight: 400; color: var(--paper);
	font-size: clamp(42px, 5.6vw, 82px); line-height: 1.03; letter-spacing: -0.015em;
	margin: 0 0 22px; max-width: 17ch; text-wrap: pretty;
}
.hero__lede {
	color: oklch(0.93 0.008 85); font-size: 19px; line-height: 1.6;
	max-width: 52ch; margin: 0 0 40px; font-weight: 300;
}
.hero__booking { padding-bottom: 40px; }

/* Booking widget */
.booker { background: var(--paper); box-shadow: 0 24px 60px oklch(0.22 0.015 60 / 0.28); }
.booker__banner {
	margin: 0; background: var(--plum); color: var(--paper);
	padding: 11px 24px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
	font-size: 12.5px; letter-spacing: 0.04em; font-weight: 300; text-align: center;
}
.booker__guarantee { letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500; }
.booker__fields { display: grid; grid-template-columns: 1.1fr 1.1fr 0.9fr auto; }
.booker__field {
	display: flex; flex-direction: column; gap: 7px; min-width: 0;
	padding: 22px 26px; border-right: 1px solid var(--line); cursor: pointer;
}
.booker__label { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.booker__field input,
.booker__field select {
	border: 0; outline: 0; background: transparent; padding: 0; width: 100%;
	font-size: 17px; color: var(--ink); min-height: 26px; min-width: 0;
}
.booker__field select {
	appearance: none; -webkit-appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23776' stroke-width='1.2'/%3E%3C/svg%3E") right center no-repeat;
}
.booker__submit {
	background: var(--gold); color: var(--paper);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	padding: 18px 46px; font-size: 14px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500;
	transition: background-color .15s;
}
.booker__submit:hover { background: var(--plum); color: var(--paper); }
.booker__nights { font-size: 11px; letter-spacing: 0.05em; text-transform: none; font-weight: 300; opacity: 0.85; }

/* ----------------------------------------------------------- Proof bar */

.proof { background: var(--paper); border-bottom: 1px solid oklch(0.22 0.015 60 / 0.09); }
.proof__grid { padding-top: 30px; padding-bottom: 30px; display: grid; grid-template-columns: auto auto repeat(4, minmax(0, 1fr)); gap: 28px; align-items: center; }
.proof__item p { margin: 0; }
.proof__score { font-family: var(--serif); font-size: 30px; line-height: 1; display: flex; align-items: baseline; gap: 9px; }
.stars { color: var(--gold); font-family: var(--sans); font-size: 15px; letter-spacing: 0.12em; }
.proof__source { font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted); margin-top: 5px !important; }
.proof__source span::before { content: "\00b7\00a0"; }
/* Awards: logo above a two-line caption, centred. */
.proof__item--award {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	border-left: 1px solid oklch(0.22 0.015 60 / 0.1); padding-left: 28px; align-self: stretch;
	font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-align: center;
}
.proof__item--award img { width: auto; max-width: 100%; flex: none; object-fit: contain; }
.proof__logo--tc { height: 44px; }
.proof__logo--qld { height: 60px; }
.proof__logo--ospreys { height: 46px; width: auto; }
.proof__logo--eco { height: 50px; }
.proof__item--award strong { font-weight: 500; }

/* ---------------------------------------------------------- Why Thala */

.why { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; padding-top: 104px; padding-bottom: 88px; }
.why .h2 { margin-top: 18px; }
.why__body { font-size: 18.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 40px; font-weight: 300; max-width: 60ch; }
.why__body:has(+ .why__more) { margin-bottom: 16px; }
.why__more { margin: 0 0 40px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); margin: 0; }
.stats > div { background: var(--bg); padding: 24px 20px 22px; }
.stats__num { font-family: var(--serif); font-size: 34px; line-height: 1; }
.stats__num small { font-size: 19px; }
.stats dd { margin: 8px 0 0; font-size: 12.5px; letter-spacing: 0.08em; color: var(--muted); line-height: 1.4; }
.stats__label { font-size: 12.5px; letter-spacing: 0.08em; color: var(--muted); line-height: 1.4; }
.stats__list { list-style: none; margin: 0; padding: 0; font-family: var(--serif); font-size: 16px; letter-spacing: 0; line-height: 1.25; color: var(--ink); }
.stats__list li + li { margin-top: 6px; }

/* -------------------------------------------------------------- Rooms */

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; flex-wrap: wrap; }
.section-head__from { font-size: 16px; color: var(--ink-3); font-weight: 300; margin: 14px 0 0; }
.section-head__from strong { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); }
.section-head__aside { font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 38ch; margin: 0; font-weight: 300; }

.rooms { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* relative: keeps the hidden "Book …" labels inside the phone swipe row */
.rooms__hint { display: none; margin: 18px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.room { display: flex; flex-direction: column; background: var(--bg); border: 1px solid oklch(0.22 0.015 60 / 0.1); }
.room__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.room__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder { background: var(--placeholder); }
.room__img.placeholder { height: 100%; }
.room__tag {
	position: absolute; top: 14px; left: 14px;
	background: var(--paper); padding: 5px 11px;
	font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--ink-2);
}
.room__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.room__name { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
.room__name a { color: inherit; }
.room__name a:hover { color: var(--link); }
.room__blurb { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin: 0 0 18px; font-weight: 300; }
.room__meta {
	display: flex; gap: 18px; margin: 0 0 20px; padding-bottom: 20px;
	font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted);
	border-bottom: 1px solid oklch(0.22 0.015 60 / 0.1);
}
.room__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.room__foot .btn { margin-left: auto; }
.room__price { display: flex; flex-direction: column; }
.room__from { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.room__amount { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin-top: 3px; }
.room__per { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------- Offers */

.offers { padding-top: 92px; }
.offers__head { text-align: center; margin-bottom: 52px; }
.offers .h2 { color: var(--on-dark); }
.offers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: oklch(0.97 0.008 85 / 0.18); }
.offers__grid:not(.offers__grid--three) { max-width: 920px; margin: 0 auto; }
.offers__grid--three { grid-template-columns: repeat(3, 1fr); }
.offer { background: var(--dark); padding: 38px 32px 36px; display: flex; flex-direction: column; }
.offer--feature { background: var(--plum); }
.offer__num { font-family: var(--serif); font-size: 15px; color: var(--gold-2); letter-spacing: 0.06em; }
.offer--feature .offer__num { color: var(--gold-3); }
.offer__title { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--on-dark); margin: 16px 0 12px; }
.offer__text { font-size: 15px; line-height: 1.6; color: var(--on-dark-2); font-weight: 300; margin: 0 0 24px; }
.offer__btn {
	margin-top: auto; border: 1px solid oklch(0.97 0.008 85 / 0.35); padding: 14px 18px; text-align: center;
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark); font-weight: 500;
	transition: background-color .15s, color .15s;
}
.offer__btn:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.offer__btn--solid { background: var(--paper); color: var(--plum); border-color: var(--paper); padding: 15px 18px; font-weight: 600; }
.offer__btn--solid:hover { background: var(--gold-2); color: var(--ink); border-color: var(--gold-2); }
.offer__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; color: oklch(0.94 0.01 340); font-weight: 300; }
.offer__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 13.5px; color: oklch(0.90 0.01 340); font-weight: 300; }
.offer__price span { font-family: var(--serif); font-size: 36px; line-height: 1; color: var(--paper); }
.offer__note { font-size: 12px; line-height: 1.5; color: oklch(0.86 0.015 340); margin: 0 0 20px; font-weight: 300; }

/* -------------------------------------------------------- Experiences */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.experiences { padding-bottom: 92px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid oklch(0.22 0.015 60 / 0.14); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid oklch(0.22 0.015 60 / 0.14); }
.steps__num { font-family: var(--serif); font-size: 14px; color: var(--gold); padding-top: 4px; }
.steps h3 { font-size: 18px; font-weight: 500; margin: 0 0 6px; letter-spacing: 0.01em; }
.steps p { font-size: 15px; line-height: 1.55; color: var(--ink-3); margin: 0; font-weight: 300; }
.experiences__extra { font-size: 14px; color: var(--muted); margin: 26px 0 0; font-weight: 300; }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; }
.mosaic > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic__wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------ Ospreys */

.ospreys { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ospreys__media { position: relative; min-height: 100%; }
.ospreys__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ospreys__dish {
	position: absolute; left: 40px; bottom: 40px; width: 34%; max-width: 250px; aspect-ratio: 1 / 1; object-fit: cover;
	border: 8px solid var(--paper); box-shadow: 0 18px 40px oklch(0.20 0.015 60 / 0.28);
}
.ospreys__panel { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(32px, 6vw, 96px); }
.ospreys__panel > * { max-width: 500px; }
.ospreys__logo { width: clamp(260px, 26vw, 380px); height: auto; margin: 0 0 34px -6px; }
.ospreys .eyebrow { margin-bottom: 12px; }
.ospreys .h2 { font-size: clamp(30px, 3vw, 42px); color: var(--ink); margin: 0 0 18px; }
.ospreys__text { font-size: 17px; line-height: 1.65; color: var(--ink-3); font-weight: 300; margin: 0 0 30px; }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }

/* ----------------------------------------------------------- Location */

.location { grid-template-columns: 1.05fr 0.95fr; }
.location .lede { margin-bottom: 30px; }
.distances { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin: 0 0 30px; }
.distances > div { background: var(--paper); padding: 20px 22px; }
.distances dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.distances dd { font-family: var(--serif); font-size: 24px; margin: 6px 0 0; }
.location__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* Route map (inline SVG): the coast road from Cairns Airport to the Daintree. */
.route-map { margin: 0; background: var(--paper); border: 1px solid var(--line); }
.route-map svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.route-map__sea { fill: oklch(0.90 0.03 215); }
.route-map__coast { fill: none; stroke: oklch(0.72 0.05 215); stroke-width: 1.5; }
.route-map__water { font-family: var(--serif); font-style: italic; font-size: 17px; fill: oklch(0.45 0.05 220); }
.route-map__road { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.route-map__span path { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.route-map__span text { font-size: 15px; font-weight: 500; fill: var(--ink); }
.route-map__place circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.route-map__place text { font-size: 15px; fill: var(--ink-2); }
.route-map__home circle:first-child { fill: oklch(0.34 0.055 340 / 0.18); }
.route-map__home circle:last-of-type { fill: var(--plum); stroke: var(--paper); stroke-width: 2; }
.route-map__home text { font-family: var(--serif); font-size: 18px; font-weight: 700; fill: var(--plum); }
.route-map__home .route-map__sub { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--muted); }
.route-map__north path { fill: var(--ink-3); }
.route-map__north text { font-size: 12px; font-weight: 600; fill: var(--ink-3); }

/* --------------------------------------------------- Story & vouchers */

.story { display: grid; grid-template-columns: 1.15fr 1fr 0.85fr; gap: 28px; }
.story__card { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; background: oklch(0.30 0.02 60); }
.story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__card::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, oklch(0.20 0.015 60 / 0.9) 0%, oklch(0.20 0.015 60 / 0.25) 70%);
}
.story__copy { position: relative; z-index: 2; padding: 44px 44px 40px; max-width: 46ch; }
.story__copy .h3 { color: var(--paper); }
.story__copy p:not(.eyebrow) { font-size: 16px; line-height: 1.6; color: oklch(0.90 0.008 85); font-weight: 300; margin: 0 0 22px; }
.vouchers { background: var(--paper); border: 1px solid var(--line); padding: 44px 40px; display: flex; flex-direction: column; }
.vouchers .h3 { margin-bottom: 14px; }
.vouchers p:not(.eyebrow) { font-size: 16px; line-height: 1.62; color: var(--ink-3); font-weight: 300; margin: 0 0 28px; }
.vouchers__foot { border-top: 1px solid var(--line); padding-top: 22px; margin-top: auto; }

/* ---------------------------------------------------------- Final CTA */

.final-cta { text-align: center; padding-top: 104px; padding-bottom: 108px; }
.final-cta__text { font-size: 18.5px; line-height: 1.62; color: oklch(0.84 0.01 85); font-weight: 300; margin: 0 0 40px; }
.final-cta .btn-row { margin-bottom: 34px; }
.final-cta .btn--ghost { border-color: oklch(0.97 0.008 85 / 0.4); }
.final-cta__small { font-size: 13.5px; color: oklch(0.72 0.012 85); font-weight: 300; margin: 0; }

/* ------------------------------------------------------------- Footer */

/* Light sand so the full-colour logo and eco badge show as designed. */
.site-footer { background: oklch(0.935 0.018 82); border-top: 3px solid var(--gold); padding: 64px 0 40px; color: var(--ink-3); }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--link); }
.site-footer__grid {
	display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px;
	padding-bottom: 48px; border-bottom: 1px solid var(--line);
}
.site-footer__logo { height: 78px; width: auto; margin: -6px 0 22px; display: block; }
.site-footer__address { font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.site-footer__phone { display: block; font-size: 15px; margin-bottom: 4px; }
.site-footer .site-footer__phone { color: var(--ink); font-weight: 500; }
.site-footer__heading { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--link); font-weight: 500; margin: 0 0 18px; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.site-footer__social { display: flex; gap: 18px; font-size: 13px; letter-spacing: 0.05em; margin: 26px 0 0; }
.site-footer__base { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.site-footer__base img { height: 52px; width: auto; }

/* --------------------------------------------------------- Sticky bar */

.sticky-book {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
	background: var(--paper);
	border-top: 1px solid oklch(0.22 0.015 60 / 0.14);
	box-shadow: 0 -8px 30px oklch(0.22 0.015 60 / 0.12);
	transform: translateY(110%);
	transition: transform .25s ease;
}
.sticky-book.is-visible { transform: none; }
.sticky-book__inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 24px; }
.sticky-book__text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.sticky-book__name { font-family: var(--serif); font-size: 16px; line-height: 1.2; }
.sticky-book__note { font-size: 12.5px; color: var(--muted); font-weight: 300; }
.sticky-book__phone { font-size: 13.5px; color: var(--ink-2); }
.sticky-book .btn { padding: 14px 30px; font-size: 13px; }
body:has(.sticky-book) .site-footer { padding-bottom: 120px; }

/* ------------------------------------------------------ Page header */

.page-hero {
	position: relative; min-height: 480px;
	display: flex; align-items: flex-end;
	overflow: hidden; background: oklch(0.28 0.02 60);
}
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to bottom, oklch(0.22 0.015 60 / 0.35) 0%, oklch(0.22 0.015 60 / 0.1) 40%, oklch(0.22 0.015 60 / 0.7) 100%);
}
.page-hero__copy { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 56px; text-shadow: 0 1px 14px oklch(0.2 0.015 60 / 0.45); }
.page-hero__title {
	font-family: var(--serif); font-weight: 400; color: var(--paper);
	font-size: clamp(36px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.015em;
	margin: 12px 0 0; max-width: 20ch; text-wrap: balance;
}
.page-hero--plain { min-height: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.page-hero--plain::before { display: none; }
.page-hero--plain .page-hero__copy { padding-top: 72px; padding-bottom: 48px; text-shadow: none; }
.page-hero--plain .page-hero__title { color: var(--ink); }

/* ------------------------------------------------------- Page content
 * Content written in the page editor. Text sits in a readable column;
 * the blocks below (feature, cards, band...) span the full layout. */

.page-body { padding-bottom: 104px; font-size: 17.5px; line-height: 1.7; color: var(--ink-2); font-weight: 300; overflow-wrap: break-word; }
.page-body > * { max-width: calc(760px + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page-body > :first-child { margin-top: 80px; }
.page-body p { margin-top: 0; margin-bottom: 1.1em; }
.page-body p:empty { display: none; }
.page-body strong, .page-body b { font-weight: 500; color: var(--ink); }
.page-body h2, .page-body h3, .page-body h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.2; text-wrap: pretty; }
.page-body h2 { font-size: clamp(28px, 2.6vw, 36px); margin-top: 1.6em; margin-bottom: 0.55em; letter-spacing: -0.01em; }
.page-body h3 { font-size: 23px; margin-top: 1.5em; margin-bottom: 0.5em; }
.page-body h4 { font-family: var(--sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin-top: 1.6em; margin-bottom: 0.6em; }
.page-body section > h2:first-child { margin-top: 0; }
.page-body a:not(.btn) { border-bottom: 1px solid oklch(0.60 0.105 72 / 0.4); }
.page-body ul, .page-body ol { margin-top: 0; margin-bottom: 1.2em; }
.page-body ul, .page-body ol { padding-left: 1.2em; }
.page-body > ul, .page-body > ol { padding-left: calc(var(--gutter) + 1.2em); }
.page-body li { margin-bottom: 0.35em; }
.page-body figure { margin: 2em auto; }
.page-body figure img { display: block; width: 100%; }
.page-body figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.page-body table { width: 100%; border-collapse: collapse; margin-top: 0; margin-bottom: 1.2em; font-size: 16px; }
.page-body th, .page-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.page-body th { font-weight: 500; color: var(--ink); }
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 600px; }
.page-body [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.page-body .btn { margin: 4px 0; }
.page-body .eyebrow { margin-bottom: 10px; }
.page-body .eyebrow + h2 { margin-top: 0; }

/* Blocks that use the full layout width. */
.page-body > .feature,
.page-body > .cards,
.page-body > .columns,
.page-body > .gallery,
.page-body > .stay,
.page-body > .reviews,
.page-body > .wide { max-width: calc(var(--wrap) + 2 * var(--gutter)); }

/* Intro: a large heading and lede to open a page. */
.intro h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.14; margin: 0 0 22px; }
.intro p { font-size: 19px; line-height: 1.65; }

/* Feature: photo beside text. Add "feature--flip" to put the photo on the right. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-top: 88px; margin-bottom: 88px; }
.feature > figure { margin: 0; }
.feature > figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.feature > figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature > figure.pair img { aspect-ratio: 3 / 4; width: 100%; height: 100%; }
.feature--flip > figure { order: 2; }
.feature h2 { margin-top: 0; }
.feature > div > :last-child { margin-bottom: 0; }

/* Cards: two to four photo cards in a row. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 88px; margin-bottom: 88px; }
.card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card > figure { margin: 0; }
.card > figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 0 0 10px; }
.card p { font-size: 16px; line-height: 1.6; }
.card__body > :last-child { margin-top: auto; margin-bottom: 0; }

/* Band: a full-width dark strip for a call to action. */
.page-body > .band {
	max-width: none; position: relative; overflow: hidden;
	background: var(--dark); color: var(--on-dark-2);
	padding-top: 96px; padding-bottom: 96px; margin-top: 96px; margin-bottom: 96px; text-align: center;
}
.page-body > .band:last-child { margin-bottom: -104px; }
.band > * { position: relative; z-index: 2; max-width: 760px; margin-left: auto; margin-right: auto; }
.band h2 { color: var(--paper); margin-top: 0; }
.band strong { color: var(--paper); }
.band a:not(.btn) { color: var(--gold-3); }
.band--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(0.20 0.015 60 / 0.72); }
.band > .band__img { position: absolute; inset: 0; z-index: 0; max-width: none; margin: 0; }
.band__img img { width: 100%; height: 100%; object-fit: cover; }

/* Columns: main text with a side panel (a form, contact details...). */
.columns { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; margin-top: 80px; margin-bottom: 80px; }
.columns > :first-child > :first-child { margin-top: 0; }
.columns--narrow-first { grid-template-columns: 1fr 1.35fr; }
.panel { background: var(--paper); border: 1px solid var(--line); padding: 36px; }
.panel h2, .panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* Facts: label and value pairs (contact details, times). */
.facts { margin-top: 0; margin-bottom: 1.2em; }
.facts dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.facts dd { margin: 4px 0 22px; font-size: 18px; color: var(--ink); }
.facts dd:last-child { margin-bottom: 0; }

/* Gallery: a swipeable strip of photos ([gallery] in the editor). */
.page-body > .gallery, .page-body > .gallery-wrap { max-width: none; padding: 0; margin-top: 48px; margin-bottom: 48px; }
.gallery {
	position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__img, .gallery > img {
	flex: 0 0 auto; height: clamp(240px, 30vw, 420px); width: auto; max-width: 85vw;
	object-fit: cover; scroll-snap-align: start; display: block;
}
.gallery-wrap { position: relative; }
.gallery-nav {
	position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
	width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
	background: oklch(0.99 0.005 85 / 0.92); color: var(--ink); box-shadow: 0 4px 16px oklch(0.22 0.015 60 / 0.2);
	display: grid; place-items: center; font-size: 20px; line-height: 1;
}
.gallery-nav:hover { background: var(--paper); }
.gallery-nav[disabled] { opacity: 0; pointer-events: none; }
.gallery-nav--prev { left: 16px; }
.gallery-nav--next { right: 16px; }

/* Button grid: several links as buttons (menus, downloads). */
.page-body .btn-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 1.2em; padding: 0; }
.page-body .btn-grid li { margin: 0; }
.btn-grid .btn { display: block; margin: 0; white-space: normal; }
.btn--line { border-color: oklch(0.22 0.015 60 / 0.3); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }

.ospreys-logo { height: 72px; width: auto; }

/* Three cards per row on wide screens (six cards make two even rows). */
.cards--three { grid-template-columns: repeat(3, 1fr); }
.facts small { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 4px; }

/* Tiles: a grid of text panels (<div class="tiles"><div class="tile"><h3>…</h3><p>…</p></div>…</div>).
 * Add "tiles--numbered" to number them. */
.page-body > .tiles { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px; margin-bottom: 72px; counter-reset: tile; }
.tile { background: var(--paper); border: 1px solid var(--line); padding: 28px 28px 26px; font-size: 16px; line-height: 1.6; }
.page-body .tile h3 { margin: 0 0 8px; font-size: 21px; }
.tile > :last-child { margin-bottom: 0; }
.tiles--numbered .tile { counter-increment: tile; }
.tiles--numbered .tile h3::before { content: counter(tile, decimal-leading-zero); display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 10px; }

/* How-to: a numbered how-it-works row in page content (<ol class="howto">). */
.page-body > .howto { max-width: calc(var(--wrap) + 2 * var(--gutter)); list-style: none; padding-left: var(--gutter); counter-reset: howto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 40px; margin-bottom: 64px; }
.page-body .howto li { margin: 0; counter-increment: howto; font-size: 16px; line-height: 1.6; }
.howto li::before { content: counter(howto); display: block; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--gold); margin-bottom: 12px; }
.howto strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; margin-bottom: 6px; }

/* Tag: a small label under a heading or at the end of a block ("Guests only"). */
.page-body .tag { display: inline-block; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); background: var(--paper); padding: 6px 12px; margin: 0 6px 6px 0; }

/* Section heading for a group of blocks, centred above them. */
.page-body > .section-intro { text-align: center; margin-top: 96px; margin-bottom: 8px; }
.section-intro h2 { margin-top: 0; }

/* Timeline: jump links to the chapters of a story (<ol class="timeline">). */
.page-body > .timeline {
	max-width: calc(var(--wrap) + 2 * var(--gutter)); list-style: none; padding-left: var(--gutter);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 64px; margin-bottom: 64px;
}
.page-body .timeline li { margin: 0; position: relative; padding: 22px 16px 0 0; border-top: 2px solid var(--line); }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.page-body .timeline a { display: block; border: 0; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.timeline__year { display: block; font-family: var(--serif); font-size: 30px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.page-body .timeline a:hover .timeline__year { color: var(--link); }

/* Wide photo with a caption, e.g. a before-and-after comparison. */
.page-body > .compare { margin-top: 56px; margin-bottom: 88px; }
.compare figcaption { text-align: center; }

/* Award badge beside a logo: <p class="award-row">logo <span class="award">Name <strong>Year</strong></span></p>. */
.page-body .award-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.award {
	display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px;
	border: 1px solid var(--gold); color: var(--ink); background: var(--paper);
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; line-height: 1.3;
}
.award::before {
	content: ""; width: 26px; height: 26px; flex: none; background: var(--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18h10v3H7zM6 16.5C3.8 16 2.5 14 2.5 12A4.5 4.5 0 0 1 8 7.6 4.5 4.5 0 0 1 12 5a4.5 4.5 0 0 1 4 2.6 4.5 4.5 0 0 1 5.5 4.4c0 2-1.3 4-3.5 4.5V17H6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18h10v3H7zM6 16.5C3.8 16 2.5 14 2.5 12A4.5 4.5 0 0 1 8 7.6 4.5 4.5 0 0 1 12 5a4.5 4.5 0 0 1 4 2.6 4.5 4.5 0 0 1 5.5 4.4c0 2-1.3 4-3.5 4.5V17H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-body .award strong { color: var(--link); font-weight: 500; }

/* Restaurant: hours and booking strip under the page header ([thala_restaurant_info]). */
.page-body > .dine-info { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.page-body > .dine-info:first-child { margin-top: -40px; position: relative; z-index: 3; }
.page-hero:has(+ .page-body > .dine-info:first-child) .page-hero__copy { padding-bottom: 80px; }
.dine-info__inner { display: flex; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 32px oklch(0.22 0.015 60 / 0.08); }
.dine-info__hours { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.dine-info__hours > div { padding: 24px 26px; border-right: 1px solid var(--line); }
.dine-info dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.dine-info dd { margin: 6px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--ink); }
.dine-info__actions { padding: 20px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.page-body .dine-info__actions p { margin: 0; }
.dine-info__note { font-size: 14px; }
.dine-info__btns { display: flex; gap: 10px; }
.page-body .dine-info__btns .btn { margin: 0; }

/* Notice: a note that must not be missed. */
.notice { border-left: 3px solid var(--gold); background: var(--paper); padding: 22px 26px; margin: 2em auto; font-size: 16px; }
.page-body > .notice { max-width: 760px; }
.notice > :last-child { margin-bottom: 0; }

/* A single package offer on its own. */
.page-body > .deal { max-width: 640px; text-align: center; margin-top: 64px; margin-bottom: 64px; }
.deal ul { list-style: none; padding: 0; text-align: left; display: inline-block; }
.deal li::before { content: "✓"; color: var(--gold); margin-right: 10px; }
.deal .btn { display: block; }
.offer-price small { font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }

/* Quote and reviews. */
.quote { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; color: var(--ink); text-align: center; margin: 72px auto; }
.feature .quote { text-align: left; margin: 0; }
.feature blockquote:not(.quote) { margin: 0 0 18px; padding-left: 18px; border-left: 2px solid var(--gold); font-size: 16px; }
.feature blockquote:not(.quote) p { font-style: italic; margin-bottom: 4px; }
.feature blockquote cite { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink); }
.quote cite { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 48px; margin-bottom: 72px; }
.reviews blockquote { margin: 0; background: var(--paper); border: 1px solid var(--line); padding: 26px; font-size: 16px; }
.reviews blockquote p { font-style: italic; }
.reviews cite { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink); }
.reviews cite::before { content: "★★★★★"; display: block; color: var(--gold); letter-spacing: 2px; margin-bottom: 4px; }

/* Jump links to the sections of a long page. */
.page-body > .toc { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding-left: var(--gutter); }
.page-body .toc li { margin: 0; }
.page-body .toc a { display: block; border: 1px solid var(--line); padding: 8px 16px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--ink); background: var(--paper); }
.page-body .toc a:hover { border-color: var(--gold); color: var(--link); }
.faq { margin-top: 64px; scroll-margin-top: calc(var(--header-h) + 24px); }
.faq h2 { margin: 0 0 18px; }

/* FAQ: <details> questions under a heading. */
.page-body details { border-bottom: 1px solid var(--line); }
.page-body details:first-of-type { border-top: 1px solid var(--line); }
.page-body summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 20px 44px 20px 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink);
}
.page-body summary::-webkit-details-marker { display: none; }
.page-body summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--sans); font-size: 24px; font-weight: 300; color: var(--gold);
}
.page-body details[open] summary::after { content: "−"; }
.page-body details > :not(summary) { font-size: 16.5px; }
.page-body details[open] { padding-bottom: 14px; }

/* Rooms ([thala_rooms]). */
.stay { margin-top: 72px; margin-bottom: 0; scroll-margin-top: calc(var(--header-h) + 24px); }
.stay + .stay { border-top: 1px solid var(--line); padding-top: 72px; }
.stay > .gallery, .stay > .gallery-wrap { margin: 0 0 40px; }
.stay__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px; align-items: start; }
.stay__name { font-size: clamp(30px, 3vw, 40px); margin: 0 0 18px; }
.stay__offer { background: var(--paper); border: 1px solid var(--line); padding: 30px; font-size: 16px; }
.stay__offer h3, .stay__offer h4 { margin-top: 0; }
.page-body .stay__offer h3 { font-family: var(--sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin-bottom: 0.6em; line-height: 1.4; }
.stay__offer > :last-child { margin-bottom: 0; }
.stay__offer .btn { display: block; }
.stay__offer hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.stay__offer ul { padding-left: 1.1em; }
.offer-price { font-family: var(--serif); font-size: 28px; color: var(--ink); margin: 0 0 4px; }

/* Embeds. */
.page-body iframe { display: block; width: 100%; border: 0; }
.embed iframe, .page-body iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto; }
.page-body video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.page-body > .embed { max-width: calc(980px + 2 * var(--gutter)); }
.giftup { min-height: 1100px; }
.map { height: 440px; }
.opentable { display: flex; justify-content: center; }

/* Contact Form 7. */
.wpcf7 p { margin: 0 0 14px; }
.wpcf7 label { display: block; font-size: 14px; color: var(--ink-3); }
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 select,
.wpcf7 textarea {
	width: 100%; padding: 13px 14px; border: 1px solid oklch(0.22 0.015 60 / 0.22);
	background: var(--paper); color: var(--ink); font-size: 16px; border-radius: 0;
}
.wpcf7 textarea { min-height: 140px; }
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.wpcf7 input[type="submit"] {
	background: var(--gold); color: var(--paper); border: 0; cursor: pointer;
	padding: 15px 30px; font-size: 13px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500;
}
.wpcf7 input[type="submit"]:hover { background: var(--plum); }

/* ---------------------------------------------------------- Popup */

.popup {
	border: 0; padding: 32px 30px 28px; max-width: 420px; width: calc(100% - 32px);
	background: var(--paper); color: var(--ink-2); font-size: 15.5px; line-height: 1.6; font-weight: 300;
	box-shadow: 0 24px 60px oklch(0.22 0.015 60 / 0.3);
}
.popup[open] { animation: popup-in .25s ease-out; }
.popup--corner { position: fixed; inset: auto 24px 24px auto; margin: 0; z-index: 90; }
.popup--centre::backdrop { background: oklch(0.20 0.015 60 / 0.55); }
.popup__close {
	position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
	border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--muted);
}
.popup__close:hover { color: var(--ink); }
.popup__title { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 0 28px 12px 0; }
.popup__body > :first-child { margin-top: 0; }
.popup__body p { margin: 0 0 0.8em; }
.popup__body strong { font-weight: 500; color: var(--ink); }
.popup__body ul { padding-left: 1.1em; margin: 0 0 1em; }
.popup__btn { margin-top: 18px; }
@keyframes popup-in { from { opacity: 0; transform: translateY(12px); } }

/* ------------------------------------------------- Inner pages & posts */

.content { min-height: 50vh; }
.content__head { margin-bottom: 40px; max-width: 760px; }
.content__hero { margin: 0 0 40px; }
.content__hero img { width: 100%; display: block; }
.prose { max-width: 760px; font-size: 17.5px; line-height: 1.7; color: var(--ink-2); font-weight: 300; }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.2; margin: 1.8em 0 0.6em; }
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 23px; }
.prose a { border-bottom: 1px solid oklch(0.60 0.105 72 / 0.4); }
.prose img, .prose figure { max-width: 100%; height: auto; }
.prose .alignwide, .prose .alignfull { max-width: none; }
.prose blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: 20px; color: var(--ink); }
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.post-card .h3 { font-size: 22px; margin: 18px 0 6px; }
.post-card .h3 a { color: var(--ink); }
.post-card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.post-card__date { font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; }
.nav-links { display: flex; gap: 12px; margin-top: 48px; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1440px) {
	.site-header__phone { display: none; }
	.site-nav__list { gap: 20px; }
}

@media (max-width: 1100px) {
	:root { --header-h: 68px; }
	.site-header__inner { gap: 16px; }
	.site-logo img { height: 44px; }
	.nav-toggle { display: block; order: 3; margin-left: 0; }
	.site-header__actions { margin-left: auto; }
	.site-header__actions .btn { padding: 11px 16px; font-size: 12px; }
	.site-nav {
		position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 59;
		background: var(--bg); padding: 8px var(--gutter) 40px;
		display: none; overflow-y: auto; overscroll-behavior: contain;
	}
	.admin-bar .site-nav { top: calc(var(--header-h) + 46px); }
	.nav-open .site-nav { display: block; }
	.nav-open { overflow: hidden; }
	.site-nav__list {
		flex-direction: column; align-items: stretch; gap: 0;
		font-size: 15px; letter-spacing: 0.09em; white-space: normal;
	}
	.site-nav__list > li { border-bottom: 1px solid var(--line); }
	.site-nav__list a { display: block; padding: 17px 0; }
	.site-nav__list .has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.site-nav__list .has-sub > a::after { display: none; }
	.site-header .sub-toggle,
	.site-header .sub-toggle:hover,
	.site-header .sub-toggle:focus {
		display: block; width: 52px; height: 52px; margin-right: -14px; padding: 0;
		background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); cursor: pointer; position: relative;
	}
	.sub-toggle::before, .sub-toggle::after {
		content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px;
		background: currentColor; transform: translate(-50%, -50%); transition: transform .2s;
	}
	.sub-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
	.sub-toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%); }
	.sub-menu {
		grid-column: 1 / -1; position: static; min-width: 0; padding: 0 0 12px 16px;
		background: none; border: 0; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none; display: none;
	}
	.sub-menu.is-open { display: block; }
	.sub-menu::before { display: none; }
	.sub-menu a { padding: 11px 0; font-size: 13.5px; color: var(--ink-2); }
	.site-nav__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
	.site-nav__phone { font-size: 18px; color: var(--ink); }
	.site-nav__contact .btn { width: 100%; text-align: center; padding: 16px; }

	.booker__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.booker__field:nth-child(2) { border-right: 0; }
	.booker__field:nth-child(3) { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--line); }
	.booker__submit { grid-column: 1 / -1; }

	/* Ratings share the top row, the four awards sit below. */
	.proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.proof__item:not(.proof__item--award) { grid-column: span 2; }
	.proof__item--award:nth-child(3) { border-left: 0; padding-left: 0; }

	.why, .split, .location, .story { grid-template-columns: 1fr; gap: 48px; }
	/* Story across the top, events and vouchers side by side below. */
	.story { grid-template-columns: 1fr 1fr; gap: 24px; }
	.story > :first-child { grid-column: 1 / -1; }
	.rooms { grid-template-columns: repeat(2, 1fr); }
	.offers__grid { grid-template-columns: 1fr; }
	.post-list { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.ospreys { grid-template-columns: 1fr; }
	.ospreys__media { min-height: 0; aspect-ratio: 16 / 10; }
	.ospreys__panel { padding: 56px var(--gutter) 64px; }

	.feature, .columns, .columns--narrow-first, .stay__body { grid-template-columns: 1fr; gap: 32px; }
	.feature--flip > figure { order: 0; }
	.feature { margin-top: 64px; margin-bottom: 64px; }
	.cards--three { grid-template-columns: repeat(2, 1fr); }
	.dine-info__inner { flex-direction: column; }
	.dine-info__hours > div:last-child { border-right: 0; }
	.dine-info__actions { border-top: 1px solid var(--line); }
	.page-hero:not(.page-hero--plain) { min-height: 400px; }
}

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

@media (max-width: 640px) {
	/* Logo and award badge: stacked and centred, the badge full width. */
	.page-body .award-row { flex-direction: column; align-items: stretch; gap: 18px; }
	/* Jump links: an even two-column grid instead of ragged rows. */
	.page-body > .toc { display: grid; grid-template-columns: 1fr 1fr; padding-right: var(--gutter); }
	.page-body > .toc li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.page-body .toc a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 48px; padding: 10px 8px; text-align: center; font-size: 12px; letter-spacing: 0.06em; line-height: 1.3; }
	.page-body .award-row img { align-self: center; }
	.page-body .award-row .award { justify-content: center; }
	/* Rooms: one swipeable row instead of six stacked cards. */
	.rooms { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
	.rooms::-webkit-scrollbar { display: none; }
	.room { flex: 0 0 84%; scroll-snap-align: start; }
	.rooms__hint { display: block; }
	.story { grid-template-columns: 1fr; }
	.hero picture .hero__img { object-position: 60% 40%; }
	:root { --gutter: 16px; --header-h: 64px; }
	.section { padding-top: 64px; padding-bottom: 64px; }
	.site-header__inner { gap: 10px; }
	.site-logo img { height: 40px; }
	.site-header__actions .btn { padding: 10px 14px; font-size: 11px; letter-spacing: 0.08em; }

	.hero { min-height: 0; }
	.hero__copy { padding-top: 96px; }
	.hero__badge { font-size: 10px; letter-spacing: 0.12em; padding: 6px 12px; }
	.hero__lede { font-size: 17px; margin-bottom: 28px; }
	.hero__booking { padding-bottom: 24px; }
	.booker__banner { font-size: 11.5px; padding: 10px 14px; }
		.booker__field { padding: 14px 14px; }
	.booker__field input, .booker__field select { font-size: 16px; }
	.booker__submit { padding: 18px; }

	/* Ratings on the top row, awards below; each item centred, logo above text. */
	.proof__grid { grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 26px; padding-bottom: 26px; text-align: center; }
	.proof__item:not(.proof__item--award) { grid-column: auto; }
	.proof__item { display: flex; flex-direction: column; align-items: center; }
	.proof__score { font-size: 28px; flex-direction: column; align-items: center; gap: 6px; }
	.stars { font-size: 13px; }
	.proof__source { font-size: 12px; letter-spacing: 0.04em; line-height: 1.45; }
	.proof__source span { display: block; }
	.proof__source span::before { content: none; }
	.proof__item--award {
		gap: 10px; border-left: 0; padding: 22px 0 0; margin-top: 22px;
		border-top: 1px solid oklch(0.22 0.015 60 / 0.1); font-size: 12px;
	}
	.proof__item--award img { height: 44px; max-width: 100%; object-fit: contain; }
	.proof__item--award .proof__logo--qld { height: 56px; }

	.why { padding-top: 64px; padding-bottom: 56px; }
	.stats { grid-template-columns: 1fr 1fr; }
	.rooms, .post-list { grid-template-columns: 1fr; }
	.section-head { margin-bottom: 32px; }
	.mosaic { grid-template-rows: 180px 140px; gap: 10px; }
	.ospreys__media { aspect-ratio: 4 / 3; }
	.ospreys__dish { left: 16px; bottom: -24px; width: 30%; border-width: 5px; }
	.ospreys__panel { padding-top: 56px; }
	.ospreys__logo { width: min(300px, 82%); margin-bottom: 26px; }
	.distances { grid-template-columns: 1fr; }
	.story__copy, .vouchers { padding: 32px 24px; }
	.h3 { font-size: 26px; }
	.btn--xl { padding: 17px 28px; width: 100%; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 36px; }

	.dine-info__hours { grid-template-columns: 1fr 1fr; }
	.dine-info__hours > div { padding: 16px 14px; }
	.dine-info__hours > div:nth-child(2n) { border-right: 0; }
	.dine-info__hours > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.dine-info dt { font-size: 11px; letter-spacing: 0.1em; }
	.dine-info dd { font-size: 16px; }
	.dine-info__actions { padding: 16px 12px; }
	.dine-info__btns .btn { flex: 1; padding-left: 12px; padding-right: 12px; text-align: center; }
	.page-body > .timeline { grid-template-columns: 1fr; padding-left: calc(var(--gutter) + 6px); margin-top: 48px; margin-bottom: 48px; }
	.page-body .timeline li { border-top: 0; border-left: 2px solid var(--line); padding: 0 0 22px 24px; }
	.page-body .timeline li:last-child { padding-bottom: 0; }
	.timeline li::before { top: 8px; left: -7px; }
	.timeline__year { font-size: 24px; }
	.cards--three { grid-template-columns: 1fr; }
	.page-body > .section-intro { margin-top: 72px; }
	.sticky-book__inner { gap: 12px; }
	.sticky-book__phone, .sticky-book__note { display: none; }
	.sticky-book .btn { padding: 13px 20px; }
	.popup--corner { inset: auto 16px 16px 16px; width: auto; max-width: none; }

	.page-hero:not(.page-hero--plain) { min-height: 340px; }
	.page-hero__copy { padding-top: 110px; padding-bottom: 36px; }
	.page-hero--plain .page-hero__copy { padding-top: 48px; padding-bottom: 32px; }
	.page-body { font-size: 16.5px; padding-bottom: 72px; }
	.page-body > :first-child { margin-top: 48px; }
	.intro p { font-size: 17.5px; }
	.feature, .cards, .columns { margin-top: 48px; margin-bottom: 48px; }
	.page-body > .band { padding-top: 64px; padding-bottom: 64px; margin-top: 64px; margin-bottom: 64px; }
	.page-body > .band:last-child { margin-bottom: -72px; }
	.panel, .stay__offer { padding: 24px 20px; }
	.stay { margin-top: 48px; }
	.stay + .stay { padding-top: 48px; }
	.stay > .gallery, .stay > .gallery-wrap { margin-bottom: 28px; }
	.gallery-nav { display: none; }
	.page-body summary { font-size: 17px; }
	.map { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}