/*
 * Hotel Kuura - guest-facing brochure page. Page-scoped stylesheet.
 * ================================================================
 *
 * SCOPE. Every rule in this file is prefixed .kuura-hotel (the wrapper div in
 * page-kuura-hotel.php) or targets a .kuura-* / .hero-2026-* class that only this page emits.
 * Nothing here can reach another page. sass/style.scss, style.css and style.min.css are NOT
 * touched: they carry another writer's in-flight work and one marketing page has no business
 * forcing a site-wide CSS rebuild.
 *
 * TYPE. Inherited from the parent sheet via the neve-child-style dependency declared on the
 * enqueue - "Signifier Medium" for display, "Soehne Buch" for text, gold #E4C758. Verified
 * present in style.min.css on 2026-08-06:
 *   grep -o "font-family:[^;}]*" style.min.css | sort -u   -> Signifier Medium, Soehne Buch
 *   grep -o "#E4C758" style.min.css | wc -l                -> 7
 *
 * NO GRADIENT STANDS IN FOR A ROOM. The version this replaces drew CSS colour fields where the
 * rooms should have been and its own QA judge failed it for exactly that - "I cannot want a room
 * I cannot see." There is not one `background: linear-gradient` in this file that sits where a
 * picture belongs. The only gradients here are the hero scrim and the caption chip, both of which
 * darken a real image rather than replace one.
 *
 * CLS. Every <img> on the page carries width and height attributes, so the browser derives the
 * aspect ratio before the bytes arrive. The .kuura-figure__media box additionally pins
 * aspect-ratio so a failed or slow image still reserves its exact space. The page's measured CLS
 * budget is small - the site sits at 0.01085 and 0.00895 of that is a pre-existing HubSpot iframe.
 */

/* --------------------------------------------------------------------------
 * Local tokens
 * -------------------------------------------------------------------------- */

.kuura-hotel {
	--k-ink: #14100c;
	--k-ink-soft: #3d372f;
	--k-ink-faint: #6d6559;
	--k-paper: #f7f4ee;
	--k-paper-warm: #efe9df;
	--k-night: #100d0a;
	--k-night-soft: #1c1712;
	--k-gold: #e4c758;
	--k-rule: rgba(20, 16, 12, 0.14);
	--k-rule-dark: rgba(247, 244, 238, 0.18);

	--k-display: "Signifier Medium", Georgia, "Times New Roman", serif;
	--k-text: "Söehne Buch", Geograph, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--k-shell: 76rem;
	--k-shell-narrow: 44rem;
	--k-gap: clamp(1.1rem, 2.6vw, 2.1rem);
	/*
	 * K7b, 2026-08-19. Was clamp(3.5rem, 6vw, 6rem) — 12rem of air between two sections at a
	 * desktop width, which on a page of eleven sections is over a full viewport of nothing. Pulled
	 * to a still-generous 4.5rem cap. This single token is most of the compactness pass; the rest
	 * is copy that was saying the same thing twice.
	 */
	--k-section-y: clamp(2.5rem, 4.4vw, 4.5rem);

	background: var(--k-paper);
	color: var(--k-ink);
	font-family: var(--k-text);
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
 * Shell + section rhythm
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-section {
	padding-block: var(--k-section-y);
}

.kuura-hotel .kuura-section--tight {
	padding-block: clamp(2rem, 3.8vw, 3.5rem);
}

.kuura-hotel .kuura-shell {
	width: min(100% - 2.5rem, var(--k-shell));
	margin-inline: auto;
}

/*
 * ONE SPINE, NOT TWO. Measured 2026-08-06 at 1440px: the first seven sections put their content at
 * x=112 (the 76rem shell, centred) and the last four put it at x=368 (the 44rem shell, also centred)
 * - so the page silently changed axis at `getting-here`, and stayed changed through `who-runs-it`,
 * `enquire` and the footer. It lost its grid exactly where the conversion ask lives.
 *
 * A narrow measure is correct for those sections - 44rem is a readable line length and the wide
 * shell would set 76rem of running text. The error was CENTRING it. Hanging the narrow column off
 * the wide shell's own left edge keeps the measure and restores the single vertical axis.
 *
 * The max() floor keeps the 1.25rem gutter below ~1216px, where the wide shell is itself gutter-bound.
 */
.kuura-hotel .kuura-shell--narrow {
	width: min(100% - 2.5rem, var(--k-shell-narrow));
	margin-inline: max(1.25rem, calc((100% - var(--k-shell)) / 2)) auto;
}

.kuura-hotel .kuura-section--dark {
	background: var(--k-night);
	color: var(--k-paper);
}

.kuura-hotel .kuura-section--warm {
	background: var(--k-paper-warm);
}

/* --------------------------------------------------------------------------
 * Type
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-eyebrow {
	font-family: var(--k-text);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-faint);
	margin: 0 0 0.85rem;
}

.kuura-hotel .kuura-section--dark .kuura-eyebrow {
	color: var(--k-gold);
}

.kuura-hotel .kuura-h2 {
	font-family: var(--k-display);
	font-weight: 400;
	/* h1:h2 goes 1.53 -> ~2.2. One dominant voice on the page, not two competing ones. */
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0 0 1.1rem;
	text-wrap: balance;
}

.kuura-hotel .kuura-h3 {
	font-family: var(--k-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.2;
	margin: 2.15rem 0 0.85rem;
}

.kuura-hotel .kuura-lede {
	font-size: clamp(1.1rem, 1.9vw, 1.375rem);
	line-height: 1.55;
	color: var(--k-ink-soft);
	margin: 0 0 1.1rem;
	max-width: 42ch;
}

.kuura-hotel .kuura-lede--wide {
	max-width: 56ch;
}

.kuura-hotel .kuura-body {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--k-ink-soft);
	margin: 0 0 0.95rem;
	max-width: 62ch;
}

.kuura-hotel .kuura-section--dark .kuura-lede,
.kuura-hotel .kuura-section--dark .kuura-body {
	color: rgba(247, 244, 238, 0.82);
}

.kuura-hotel .kuura-body em,
.kuura-hotel .kuura-lede em {
	font-style: italic;
}

.kuura-hotel .kuura-note {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--k-ink-faint);
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--k-rule);
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
 * Figures. THE INTEGRITY DEVICE OF THIS PAGE.
 *
 * .kuura-figure--render puts a permanently visible chip ON the image reading
 * "Architect's visualisation". Not a footnote, not a hover state, not alt text - a guest looking
 * at the picture sees the label at the same moment they see the picture. Every CGI image on this
 * page carries it; the real photographs do not, so the distinction is legible at a glance.
 *
 * Hotel Kuura opens for winter 2026-27 and does not yet exist in photographable form. Renders are
 * the correct asset class for a pre-opening property. Passing one off as a photograph would not be.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-figure {
	margin: 0;
}

.kuura-hotel .kuura-figure__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--k-paper-warm);
	border-radius: 2px;
}

.kuura-hotel .kuura-section--dark .kuura-figure__media {
	background: var(--k-night-soft);
}

.kuura-hotel .kuura-figure__media img {
	display: block;
	width: 100%;
	height: auto;
}

.kuura-hotel .kuura-figure__tag {
	position: absolute;
	inset-inline-start: 0.75rem;
	inset-block-end: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.4rem 0.7rem;
	background: rgba(16, 13, 10, 0.82);
	color: #f2ede3;
	font-family: var(--k-text);
	font-size: 0.6875rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid rgba(228, 199, 88, 0.5);
	border-radius: 2px;
}

@supports (backdrop-filter: blur(6px)) {
	.kuura-hotel .kuura-figure__tag {
		background: rgba(16, 13, 10, 0.66);
		backdrop-filter: blur(6px);
	}
}

.kuura-hotel .kuura-figure__tag::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	background: var(--k-gold);
	border-radius: 50%;
	flex: none;
}

.kuura-hotel .kuura-figure__cap {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--k-ink-faint);
	margin: 0.85rem 0 0;
	max-width: 58ch;
}

.kuura-hotel .kuura-section--dark .kuura-figure__cap {
	color: rgba(247, 244, 238, 0.6);
}

/*
 * Full-bleed is permitted ONLY for sources wider than 1500px. The manifest's own rule, and it is
 * a real one: bar, restaurant and food are 736px originals and visibly soften above ~700 CSS px.
 * They are card-only and are never given this class.
 */
.kuura-hotel .kuura-figure--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/*
 * The bleed caption hangs off the SAME left axis as every other block (see the --narrow note above).
 * It previously set `width: min(100% - 2.5rem, var(--k-shell))` + `margin-inline: auto`, but a
 * generic `.kuura-figure__cap` measure cap (max-width ~506px) won over the width, and auto margins
 * then centred that 506px band - landing the caption at x=467 under a full-bleed plate whose image
 * starts at x=0, aligned to neither the image edge nor the page grid. Measured 2026-08-06 at 1440.
 */
.kuura-hotel .kuura-figure--bleed .kuura-figure__cap {
	width: min(100% - 2.5rem, var(--k-shell));
	margin-inline: max(1.25rem, calc((100% - var(--k-shell)) / 2)) auto;
	padding-top: 0.85rem;
}

/*
 * A BLEED PLATE IS A PLATE, NOT A SECTION. At 78vh the landscape read as a second hero and stole
 * the frame from the one above it. Capped so it punctuates the scroll instead of interrupting it.
 */
.kuura-hotel .kuura-figure--bleed .kuura-figure__media {
	border-radius: 0;
	max-height: clamp(19rem, 46vh, 30rem);
	/*
	 * width:100% IS LOad-BEARING - measured 2026-08-06. This div carries an inline
	 * `aspect-ratio: 2000/1332` from the figure partial. With a max-height cap and no explicit
	 * width, the cap drives the WIDTH down instead of cropping the height: at 1440x900 the
	 * "full-bleed" plate rendered 622px wide inside a 1440px band - 818px of dead cream, with the
	 * figcaption orphaned at x=467, aligned to neither the image edge nor the page grid.
	 * It could only reach full width when viewport height >= 0.666 x width, which is never true on
	 * a 16:9 or 16:10 desktop, so it was broken at EVERY normal desktop size, not an edge case.
	 * (Mobile was unaffected - at 390px the media was already 390px.)
	 * The declaration below makes the width authoritative and lets object-fit do the cropping.
	 */
	width: 100%;
}

.kuura-hotel .kuura-figure--bleed .kuura-figure__media img {
	width: 100%;
	height: 100%;
	max-height: clamp(19rem, 46vh, 30rem);
	object-fit: cover;
}

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

.kuura-hotel .kuura-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(100svh, 56rem);
	background: var(--k-night);
	color: var(--k-paper);
	isolation: isolate;
}

.kuura-hotel .kuura-hero .hero-2026-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.kuura-hotel .kuura-hero .hero-2026-still,
.kuura-hotel .kuura-hero .hero-2026-still img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 46%;
}

/*
 * TWO scrims, not one, and the second is a contrast fix rather than decoration.
 *
 * RETUNED 2026-08-06 for the night exterior. The values this replaces were built for the pale
 * golden-mist landscape and would have crushed the lit windows of the render that now leads the
 * page. The horizontal gradient still grounds the left-hand text column; it now clears by 84% so
 * the building's warm glazing keeps its contrast. The .38 stop at the TOP of the vertical gradient
 * is not decoration either - the theme header's white logo and nav overlay the hero and need
 * something to sit on.
 */
.kuura-hotel .kuura-hero .hero-2026-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, rgba(10, 9, 8, 0.70) 0%, rgba(10, 9, 8, 0.42) 36%, rgba(10, 9, 8, 0.10) 66%, rgba(10, 9, 8, 0) 84%),
		linear-gradient(to top, rgba(10, 9, 8, 0.68) 0%, rgba(10, 9, 8, 0.26) 36%, rgba(10, 9, 8, 0.04) 64%, rgba(10, 9, 8, 0.38) 100%);
}

.kuura-hotel .kuura-hero .hero-2026-content {
	position: relative;
	z-index: 2;
	width: min(100% - 2.5rem, var(--k-shell));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 5.2vw, 4.25rem);
}

/*
 * BONE, NOT GOLD, and this is a contrast decision rather than a taste one. Measured 2026-08-06,
 * gold #e4c758 at 12px over the old pale-mist hero failed contrast outright. Gold cannot be
 * guaranteed over any frame containing snow; bone is unconditional at every crop, and reserving
 * gold for the CTA hairline means the page has exactly one gold accent instead of three.
 */
.kuura-hotel .kuura-hero .hero-2026-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #f7f4ee;
	margin: 0 0 1.1rem;
}

/*
 * THE KEYLINE FRAME. A thin inset rule around the hero - the cheapest luxury signal in the
 * category and the one device hotelkuura.fi does better than we did. z-index 3 so it sits over
 * the scrim (1) and under the content column (2 is the content; the frame must not eat clicks,
 * hence pointer-events:none).
 */
.kuura-hotel .kuura-hero::after {
	content: "";
	position: absolute;
	inset: clamp(0.9rem, 1.7vw, 1.6rem);
	z-index: 3;
	border: 1px solid rgba(242, 237, 227, 0.26);
	pointer-events: none;
}

/*
 * The hero's visualisation chip is the ONLY instance of .kuura-figure__tag that moves. Everywhere
 * else it stays bottom-left on the image, where it was measured reading as deliberate rather than
 * apologetic. In the hero, bottom-left is the h1 column, so it goes top-right - diagonally opposite
 * the coordinates, inside the keyline.
 */
.kuura-hotel .kuura-hero .kuura-hero-tag {
	position: absolute;
	z-index: 4;
	/*
	 * MEASURED, NOT CHOSEN. At the specified 3.2rem the chip landed at y=51 with the theme's nav
	 * row ending at y~75 - screenshotted 2026-08-06 at 1440x900, it sat directly under the "EN"
	 * dropdown and read as part of the navigation rather than as a label on the picture. Pushed
	 * clear of the header band. Still top-right, still inside the keyline, still diagonally
	 * opposite the coordinates.
	 */
	inset-block-start: clamp(5rem, 7.5vw, 7rem);
	inset-inline-end: clamp(2.2rem, 3.6vw, 3.2rem);
	inset-inline-start: auto;
	inset-block-end: auto;
}

/*
 * COORDINATES AS TYPOGRAPHY. Bottom-right, because .kuura-hero is align-items:flex-end and the
 * bottom-LEFT corner is the headline column. Hidden below 44rem, where there is no spare corner.
 */
.kuura-hotel .kuura-hero-coords {
	position: absolute;
	z-index: 4;
	inset-block-end: clamp(2.2rem, 3.6vw, 3.2rem);
	inset-inline-end: clamp(2.2rem, 3.6vw, 3.2rem);
	margin: 0;
	font-family: var(--k-text);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(242, 237, 227, 0.68);
	text-align: right;
}

@media (max-width: 44rem) {
	.kuura-hotel .kuura-hero-coords {
		display: none;
	}
}

/* Echoes the hero keyline at the foot of the page so the frame device reads as intentional. */
.kuura-hotel .kuura-pagefoot {
	position: relative;
}

.kuura-hotel .kuura-pagefoot::before {
	content: "";
	position: absolute;
	inset-inline: clamp(0.9rem, 1.7vw, 1.6rem);
	inset-block-start: 0;
	height: 1px;
	background: rgba(242, 237, 227, 0.18);
}

.kuura-hotel .kuura-hero .hero-2026-heading {
	font-family: var(--k-display);
	font-weight: 400;
	font-size: clamp(2.6rem, 7.2vw, 5.75rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--k-paper);
	margin: 0 0 1.35rem;
	max-width: 18ch;
	text-wrap: balance;
}

.kuura-hotel .kuura-hero .hero-2026-subhead {
	font-size: clamp(1rem, 1.7vw, 1.2rem);
	line-height: 1.55;
	color: rgba(247, 244, 238, 0.86);
	margin: 0 0 2rem;
	max-width: 46ch;
}

.kuura-hotel .kuura-hero-credit {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(247, 244, 238, 0.62);
	margin: 1.75rem 0 0;
	max-width: 52ch;
}

/*
 * Reserved box - drawn only when the hero image is missing from disk. A visible, labelled gap is
 * better than a broken <img>, and it is deliberately not a decorative gradient standing in for a
 * photograph.
 */
.kuura-hotel .kuura-hero-reserved {
	position: absolute;
	inset: 0;
	background: var(--k-night-soft);
}

/* --------------------------------------------------------------------------
 * Facts strip
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-name__intro {
	max-width: var(--k-shell-narrow);
}

.kuura-hotel .kuura-body--after {
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

.kuura-hotel .kuura-facts {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--k-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kuura-hotel .kuura-facts li {
	border-top: 1px solid var(--k-rule-dark);
	padding-top: 1rem;
}

.kuura-hotel .kuura-facts b {
	display: block;
	font-family: var(--k-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1;
	color: var(--k-paper);
	margin-bottom: 0.45rem;
}

.kuura-hotel .kuura-facts span {
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(247, 244, 238, 0.6);
}

/* --------------------------------------------------------------------------
 * K1, 2026-08-19: .kuura-standing (the page-level disclaimer banner) was removed from
 * 02-name.php on owner order, so its three rules are deleted here rather than left as dead
 * selectors that would invite the banner back. The per-image chip .kuura-figure__tag is the
 * device that carries the disclosure now, and it is untouched.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Rooms. Two named characters, NOT a symmetrical comparison.
 *
 * The two renders show different things - Kuru's is a bedroom, Rakka's is a seating corner - so
 * the layout stacks them as two separate portraits rather than a side-by-side that would imply
 * they are the same view of two rooms. There is no image of a Rakka bed anywhere in existence.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-room {
	display: grid;
	gap: var(--k-gap);
	align-items: center;
	margin-top: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 56rem) {
	.kuura-hotel .kuura-room {
		grid-template-columns: 1.35fr 1fr;
	}

	.kuura-hotel .kuura-room--flip .kuura-room__text {
		order: -1;
	}
}

.kuura-hotel .kuura-room__label {
	font-family: var(--k-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.1;
	margin: 0 0 0.35rem;
}

.kuura-hotel .kuura-room__count {
	font-family: var(--k-text);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-faint);
	margin: 0 0 1.1rem;
}

/* --------------------------------------------------------------------------
 * Spaces grid (lounge / bar / restaurant). Card-only sources live here.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-spaces {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--k-gap);
	margin-top: clamp(1.75rem, 3.6vw, 2.5rem);
}

/* --------------------------------------------------------------------------
 * Owner photographs. The 4:3 roofline spans the shell above the two matching 2:3 portraits:
 * every image keeps its native ratio, the portrait baselines align, and nothing is cropped at
 * any viewport.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--k-gap);
	margin-top: clamp(1.75rem, 3.6vw, 2.5rem);
}

@media (min-width: 44rem) {
	.kuura-hotel .kuura-gallery__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.kuura-hotel .kuura-gallery__lead {
	grid-column: 1 / -1;
}

.kuura-hotel .kuura-gallery__grid .kuura-figure__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--k-rule-dark);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Split (image beside text) - used by the table and the surroundings
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-split {
	display: grid;
	gap: var(--k-gap);
	align-items: center;
	margin-top: clamp(1.5rem, 3.6vw, 2.5rem);
}

@media (min-width: 56rem) {
	.kuura-hotel .kuura-split {
		grid-template-columns: 1fr 1fr;
	}

	.kuura-hotel .kuura-split--portrait {
		grid-template-columns: 0.8fr 1.2fr;
	}
}

/* --------------------------------------------------------------------------
 * K4, 2026-08-19: the plan is now the property's OWN architectural floor plan, shipped as
 * assets/img/kuura/layout-fifteen-rooms.svg and referenced with <img>. The rules that styled the
 * fifteen inline <rect>s and their <text> labels are deleted rather than left behind - dead
 * selectors for a drawing that no longer exists are how a page grows a second, stale idiom.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-plan {
	margin: 1.5rem 0 0;
}

.kuura-hotel .kuura-plan-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
}

/*
 * min-width keeps the plan legible instead of letting a phone shrink a 635px drawing to thumbnail
 * width; the scroll container above is what makes that safe. aspect-ratio is the SVG's own
 * intrinsic box, read off the file, so the space is reserved before the bytes arrive.
 *
 * max-width is a K7b correction and it is also the right call on its own terms. The drawing is
 * nearly square (635x538) where the old abstraction was a wide strip (660x232), so stretched to
 * the full 76rem shell it stood over a thousand pixels tall - a floor plan dominating a page whose
 * argument is the rooms. Capped at 44rem it is still larger than its own intrinsic width and still
 * fully legible, and the section stops being the tallest thing on the page.
 */
.kuura-hotel .kuura-plan-img {
	display: block;
	width: 100%;
	min-width: 34rem;
	max-width: 44rem;
	height: auto;
	aspect-ratio: 635 / 538;
}

.kuura-hotel .kuura-plan-caption {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--k-ink-faint);
	margin-top: 1rem;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
 * Distance rail
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-rail {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 34rem;
}

.kuura-hotel .kuura-rail li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--k-rule);
}

.kuura-hotel .kuura-rail li:first-child {
	border-top: 1px solid var(--k-rule);
}

.kuura-hotel .kuura-rail-k {
	font-size: 0.9375rem;
	color: var(--k-ink-soft);
}

.kuura-hotel .kuura-rail-v {
	font-family: var(--k-display);
	font-size: 1.05rem;
	color: var(--k-ink);
	white-space: nowrap;
}

/*
 * Dark-section inversions. Everything above is written for the warm-paper sections; the three dark
 * ones (the name, getting here, the enquiry) need the rules and the rail flipped or the text
 * renders near-black on near-black. Kept in one block so it is obvious what a new dark section
 * inherits.
 */
.kuura-hotel .kuura-section--dark .kuura-rail li {
	border-bottom-color: var(--k-rule-dark);
}

.kuura-hotel .kuura-section--dark .kuura-rail li:first-child {
	border-top-color: var(--k-rule-dark);
}

.kuura-hotel .kuura-section--dark .kuura-rail-k {
	color: rgba(247, 244, 238, 0.72);
}

.kuura-hotel .kuura-section--dark .kuura-rail-v {
	color: var(--k-paper);
}

.kuura-hotel .kuura-section--dark .kuura-note {
	color: rgba(247, 244, 238, 0.6);
	border-top-color: var(--k-rule-dark);
}

/* --------------------------------------------------------------------------
 * Enquiry
 *
 * NO FAKE FORM AND NO FAKE FIELDS. The version this replaces rendered three inert <li> elements
 * that read as form inputs, and a QA judge tried to click them. There is no Kuura-specific
 * enquiry endpoint yet, so this block is a paragraph and one real link to a real Xwander
 * destination. Being visibly unfinished beats being deceptively broken.
 * -------------------------------------------------------------------------- */

/*
 * ONE CTA SYSTEM, AND IT IS A RULE, NOT A SLAB.
 *
 * The version this replaces painted every call to action as a solid #e4c758 block with near-black
 * text. Measured on the built page 2026-08-06 that reads as a warning banner / discount retail, and
 * it was the single most damaging element on a boutique brochure. Gold survives here as a HAIRLINE
 * accent under a letter-spaced label; the rule extends on hover. No new hue was introduced - a
 * fourth colour would not have fixed a saturation problem.
 */
.kuura-hotel .kuura-cta,
.kuura-hotel .kuura-hero .hero-2026-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 0.5rem;
	padding: 0 0 0.7rem;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(228, 199, 88, 0.45);
	border-radius: 0;
	color: #e4c758;
	font-family: var(--k-text);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: border-color 220ms ease, color 220ms ease;
}

.kuura-hotel .kuura-cta::after,
.kuura-hotel .kuura-hero .hero-2026-cta::after {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	transition: width 220ms ease;
}

.kuura-hotel .kuura-cta:hover,
.kuura-hotel .kuura-cta:focus-visible,
.kuura-hotel .kuura-hero .hero-2026-cta:hover,
.kuura-hotel .kuura-hero .hero-2026-cta:focus-visible {
	background: none;
	color: #f2ede3;
	border-bottom-color: #f2ede3;
}

.kuura-hotel .kuura-cta:hover::after,
.kuura-hotel .kuura-cta:focus-visible::after,
.kuura-hotel .kuura-hero .hero-2026-cta:hover::after {
	width: 2.5rem;
}

.kuura-hotel .kuura-cta:focus-visible,
.kuura-hotel .kuura-hero .hero-2026-cta:focus-visible {
	outline: 1px solid rgba(242, 237, 227, 0.7);
	outline-offset: 6px;
}

/* THE one filled element on the page. Conversion point only, never above the fold. */
.kuura-hotel .kuura-enquire .kuura-cta {
	padding: 1.05rem 2.1rem;
	background: #f2ede3;
	color: #14100c;
	border: 1px solid #f2ede3;
	border-radius: 1px;
	letter-spacing: 0.16em;
}

.kuura-hotel .kuura-enquire .kuura-cta::after {
	background: #14100c;
}

.kuura-hotel .kuura-enquire .kuura-cta:hover,
.kuura-hotel .kuura-enquire .kuura-cta:focus-visible {
	background: none;
	color: #f2ede3;
	border-color: #f2ede3;
}

.kuura-hotel .kuura-enquire .kuura-cta:hover::after {
	background: #f2ede3;
}

/* Now inert; kept so the --ghost class on 11-footer.php:33 is harmless rather than a dead selector. */
.kuura-hotel .kuura-cta--ghost {
	background: none;
	color: #e4c758;
}

.kuura-hotel .kuura-alt-contact {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(247, 244, 238, 0.68);
	margin: 1.75rem 0 0;
	max-width: 52ch;
}

.kuura-hotel .kuura-alt-contact a {
	color: var(--k-gold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
 * Page foot
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-pagefoot {
	background: var(--k-night);
	color: var(--k-paper);
	padding-block: clamp(2.25rem, 4.4vw, 3.75rem);
}

.kuura-hotel .kuura-pagefoot-name {
	font-family: var(--k-display);
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.1;
	margin: 0 0 0.85rem;
}

.kuura-hotel .kuura-pagefoot-addr,
.kuura-hotel .kuura-pagefoot-op {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(247, 244, 238, 0.68);
	margin: 0 0 0.4rem;
}

.kuura-hotel .kuura-pagefoot-op {
	margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
 * Motion + forced colours
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kuura-hotel * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.kuura-hotel .kuura-figure__tag {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
		backdrop-filter: none;
	}
}

/* --------------------------------------------------------------------------
 * Three spaces, three columns. auto-fit at minmax(17rem, 1fr) wrapped the third card onto a
 * ragged second row between about 56rem and 64rem. Above 64rem there is room for all three, and
 * three equal thirds crop none of the renders - a fixed row height would behead a pendant lamp.
 * -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
	.kuura-hotel .kuura-spaces {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
 * THEME CRUFT SUPPRESSION - page-scoped twice over.
 *
 * This sheet is enqueued only by page-kuura-hotel.php AND every selector below is gated on that
 * template's body class, so neither half can leak onto another page. Measured 2026-08-06: the
 * "Partnering With" partner-logo wall rendered TWICE at the foot of this page (two .partner-section
 * nodes, 118px and 0px). A boutique brochure carries no logo wall at all, let alone the same one
 * twice. The HubSpot chat bubble was obscuring the ends of four consecutive lines of body copy in
 * the rooms section at 1440x900.
 *
 * The site footer is RECOLOURED, never removed - Privacy and Terms have to survive.
 * -------------------------------------------------------------------------- */

.page-template-page-kuura-hotel .partner-section {
	display: none;
}

body.page-template-page-kuura-hotel .site-footer {
	background: var(--k-night, #100d0a);
	color: rgba(247, 244, 238, 0.72);
	border-top: 1px solid rgba(247, 244, 238, 0.18);
}

body.page-template-page-kuura-hotel .site-footer a {
	color: #e4c758;
}

body.page-template-page-kuura-hotel #hubspot-messages-iframe-container,
body.page-template-page-kuura-hotel #hs-web-interactives-floating-container {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * WINTER WEEKS - added 2026-08-19 on owner order.
 *
 * APPENDED, NOT FORKED. Every rule below is prefixed .kuura-hotel like the rest of this file, uses
 * the local tokens declared at the top (--k-gold, --k-ink-faint, --k-rule, --k-display, --k-gap,
 * --k-text) and introduces NO new colour, NO new font and NO new asset. The three cards are the
 * only new component; everything around them - the section padding, the shell, the eyebrow, the h2,
 * the lede, the body, the closing .kuura-note and the .kuura-cta hairline rule - is inherited
 * unchanged from the blocks above.
 *
 * THE CARD IS NOT A PRODUCT TILE. No shadow, no filled button, no badge, no strikethrough, no
 * "from only", no border radius beyond the 2px this page already uses. It is a ruled column, which
 * is what the rest of this page does with a list (see .kuura-rail). The one filled element on the
 * page is still the enquiry CTA at the bottom, and this section deliberately does not compete with
 * it - its own CTA is the inherited hairline rule.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-pkgs {
	list-style: none;
	margin: clamp(1.75rem, 3.6vw, 2.5rem) 0 0;
	padding: 0;
	display: grid;
	gap: var(--k-gap);
	/*
	 * MOBILE-FIRST SINGLE COLUMN. The three-up only appears where three columns can hold a readable
	 * measure - matching .kuura-spaces, which learned the same lesson: auto-fit wrapped the third
	 * card onto a ragged second row between about 56rem and 64rem, so the breakpoint is explicit.
	 */
	grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
	.kuura-hotel .kuura-pkgs {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * A hairline above each card rather than a box around it. Cards are equal-height columns via the
 * grid, and the link is pushed to the foot with margin-top:auto so the three CTAs sit on one line
 * regardless of how long each editorial sentence runs - which they do not, but the provisional card
 * carries two extra lines and would otherwise drag its own link out of alignment.
 */
.kuura-hotel .kuura-pkg {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--k-rule);
	padding-top: 1.5rem;
}

.kuura-hotel .kuura-pkg__name {
	font-family: var(--k-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.15;
	margin: 0 0 0.4rem;
	color: var(--k-ink);
}

.kuura-hotel .kuura-pkg__len {
	font-family: var(--k-text);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-faint);
	margin: 0 0 1.1rem;
}

.kuura-hotel .kuura-pkg__line {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--k-ink-soft);
	margin: 0 0 1.35rem;
	max-width: 40ch;
}

/*
 * The price is set in the display face at body-ish size, not blown up. On a page whose h1 is 5.75rem
 * a large price would read as retail; the point of the line is that the number is stated plainly and
 * once, and that the tier it belongs to is attached to it rather than left to a footnote.
 */
.kuura-hotel .kuura-pkg__price {
	font-family: var(--k-display);
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--k-ink);
	margin: auto 0 0;
	padding-top: 0.5rem;
}

.kuura-hotel .kuura-pkg__tier {
	display: block;
	font-family: var(--k-text);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-faint);
	margin-top: 0.4rem;
}

/*
 * THE PROVISIONAL TREATMENT, and it is the same integrity idiom as .kuura-figure__tag: a visible
 * chip beside the thing it qualifies, not a footnote. The gold hairline is the page's existing
 * caveat signal, so a reader who has already met the "Architect's visualisation" chip reads this
 * one without being taught it. (It used to cite .kuura-standing as the other user of the idiom;
 * K1 deleted that block on 2026-08-19, so the citation went with it rather than dangling.)
 *
 * The chip is NOT colour-only: it carries its own word, "Provisional", followed by a full sentence.
 * A user who cannot distinguish the gold, and a screen-reader user who gets no styling at all, both
 * receive exactly the same caveat in exactly the same place.
 */
.kuura-hotel .kuura-pkg__prov {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--k-ink-soft);
	margin: 0.9rem 0 0;
	padding-left: 1rem;
	border-left: 2px solid var(--k-gold);
	max-width: 40ch;
}

.kuura-hotel .kuura-pkg__chip {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.25rem 0.5rem;
	background: rgba(16, 13, 10, 0.82);
	color: #f2ede3;
	font-family: var(--k-text);
	font-size: 0.625rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid rgba(228, 199, 88, 0.5);
	border-radius: 2px;
	vertical-align: 0.1em;
}

.kuura-hotel .kuura-pkg__kids {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--k-ink-faint);
	margin: 0.75rem 0 0;
}

/*
 * The card link is the hairline rule again, at card scale. Kept as its own class rather than reusing
 * .kuura-cta so that the section's single .kuura-cta at the foot stays the section's one CTA and
 * the three card links read as navigation, which is what they are.
 */
.kuura-hotel .kuura-pkg__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	align-self: flex-start;
	margin-top: 1.25rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--k-rule);
	color: var(--k-ink);
	font-family: var(--k-text);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: border-color 220ms ease, color 220ms ease;
}

.kuura-hotel .kuura-pkg__link::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1px;
	background: currentColor;
	transition: width 220ms ease;
}

.kuura-hotel .kuura-pkg__link:hover,
.kuura-hotel .kuura-pkg__link:focus-visible {
	color: var(--k-ink);
	border-bottom-color: var(--k-gold);
}

.kuura-hotel .kuura-pkg__link:hover::after,
.kuura-hotel .kuura-pkg__link:focus-visible::after {
	width: 2.1rem;
}

.kuura-hotel .kuura-pkg__link:focus-visible {
	outline: 1px solid var(--k-ink);
	outline-offset: 6px;
}

/*
 * The section's closing note and CTA sit on the warm ground, where the gold-on-cream hairline of
 * .kuura-cta is the one place on this page that colour is load-bearing at small size. Darkened to
 * the page's own ink for the label so it clears contrast on #efe9df; the hairline stays gold, which
 * is decoration and not the information.
 */
.kuura-hotel .kuura-packages .kuura-cta {
	color: var(--k-ink);
	border-bottom-color: rgba(228, 199, 88, 0.85);
	margin-top: 1.5rem;
}

.kuura-hotel .kuura-packages .kuura-cta:hover,
.kuura-hotel .kuura-packages .kuura-cta:focus-visible {
	color: var(--k-ink);
	border-bottom-color: var(--k-ink);
}

.kuura-hotel .kuura-packages .kuura-cta:focus-visible {
	outline: 1px solid var(--k-ink);
}

@media (forced-colors: active) {
	.kuura-hotel .kuura-pkg__chip {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	.kuura-hotel .kuura-pkg__prov {
		border-left-color: CanvasText;
	}
}

/* --------------------------------------------------------------------------
 * K2, 2026-08-19: the seasonal room-rate matrix (09c-pricing.php).
 *
 * APPENDED, NOT INTERLEAVED, and it introduces NO new custom property. Every colour, face and
 * rhythm below resolves to a token already declared on .kuura-hotel, so this block cannot drift
 * from the rest of the page and cannot leak off it.
 *
 * THE HEADLINE IS DELIBERATELY SET SMALLER THAN THE OTHER h2s. It carries a currency figure and
 * a parenthetical, which at the page's display size reads as a price banner rather than as a
 * section heading - the one register a boutique brochure must not slip into. clamp() keeps it
 * subordinate to the hero and to "Three weeks that sleep here." above it.
 *
 * THE TABLE SCROLLS INSIDE ITS OWN BOX. Six seasons will not fit a phone at a legible size, and
 * the alternative - shrinking the type until it does - is worse than a scroll a thumb already
 * knows. The page body itself never scrolls sideways.
 * -------------------------------------------------------------------------- */

.kuura-hotel .kuura-rates .kuura-h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.25;
	max-width: 30ch;
}

.kuura-hotel .kuura-rates__more {
	margin-top: 1.75rem;
	border-top: 1px solid var(--k-rule);
	padding-top: 1.25rem;
}

.kuura-hotel .kuura-rates__more > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	font-family: var(--k-text);
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	color: var(--k-ink);
	border-bottom: 1px solid rgba(228, 199, 88, 0.85);
	padding-bottom: 0.15rem;
}

.kuura-hotel .kuura-rates__more > summary::-webkit-details-marker {
	display: none;
}

/* The affordance is a glyph that flips, so the control never depends on colour alone. */
.kuura-hotel .kuura-rates__more > summary::after {
	content: "+";
	font-size: 1rem;
	line-height: 1;
	color: var(--k-ink-faint);
}

.kuura-hotel .kuura-rates__more[open] > summary::after {
	content: "\2212";
}

.kuura-hotel .kuura-rates__more > summary:focus-visible {
	outline: 1px solid var(--k-ink);
	outline-offset: 3px;
}

.kuura-hotel .kuura-rates__scroll {
	overflow-x: auto;
	margin-top: 1.25rem;
	-webkit-overflow-scrolling: touch;
}

.kuura-hotel .kuura-rates__scroll:focus-visible {
	outline: 1px solid var(--k-ink);
	outline-offset: 2px;
}

.kuura-hotel .kuura-rates__table {
	border-collapse: collapse;
	width: 100%;
	min-width: 46rem;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.kuura-hotel .kuura-rates__table th,
.kuura-hotel .kuura-rates__table td {
	text-align: right;
	padding: 0.5rem 0.7rem;
	border-bottom: 1px solid var(--k-rule);
	white-space: nowrap;
}

.kuura-hotel .kuura-rates__table thead th,
.kuura-hotel .kuura-rates__table tbody th {
	font-weight: 400;
	color: var(--k-ink-soft);
}

.kuura-hotel .kuura-rates__table thead th:first-child,
.kuura-hotel .kuura-rates__table tbody th {
	text-align: left;
	white-space: normal;
}

.kuura-hotel .kuura-rates__table thead th {
	vertical-align: bottom;
	border-bottom-color: var(--k-ink-faint);
}

.kuura-hotel .kuura-rates__season {
	display: block;
	font-family: var(--k-display);
	font-size: 0.9375rem;
	color: var(--k-ink);
	white-space: normal;
	max-width: 11ch;
	margin-left: auto;
}

.kuura-hotel .kuura-rates__dates {
	display: block;
	font-size: 0.75rem;
	color: var(--k-ink-faint);
	white-space: normal;
	max-width: 13ch;
	margin-left: auto;
	margin-top: 0.15rem;
}

/* The starting rate is the row the headline quotes, so it is the row the eye should find. */
.kuura-hotel .kuura-rates__table .kuura-rates__start td,
.kuura-hotel .kuura-rates__table .kuura-rates__start th {
	color: var(--k-ink);
	border-bottom-color: var(--k-ink-faint);
}

@media (forced-colors: active) {
	.kuura-hotel .kuura-rates__more > summary {
		border-bottom: 1px solid CanvasText;
	}
}

/* Owner fix 2026-08-19: the Neve site footer carries margin-top:60px, which paints a
   white body strip between the page's dark closing footer and the dark site footer.
   This sheet loads only on the Kuura template, so the rule is page-scoped. */
#site-footer { margin-top: 0; }