/**
 * Pine Sky Suites - page stylesheet.
 *
 * Loaded after assets/css/xw-stay.css and depends on it for every token, ground, face, rule colour
 * and rhythm. NOTHING in this file redefines a shared token: the section padding, the 704 px prose
 * measure, the 1216 px shell, the three inks, the two faces and the single gold accent all come
 * from xw-stay.css and stay there. Three agents are building three Stays pages in parallel and the
 * shared file is not a place to negotiate.
 *
 * Everything below exists because the content needed a device the shared grammar does not carry:
 *
 *   .xw-suites-spec      fixed-order specification block, the unflattering fact set apart
 *   .xw-suites-ruled     the ruled list for the three unphotographed apartments - NO IMAGE SLOT
 *   .xw-suites-gap       a labelled, designed absence: type on a gold rule, never a tile
 *   .xw-suites-figures   the three typographic figures of movement 5, which have no photographs
 *   .xw-suites-rail      the eight-row key/value rail of movement 8
 *
 * @package xwander
 */

/* Hero place line --------------------------------------------------------- */

.xw-stay .xw-suites-place {
	max-width: 40ch;
	margin: 0 0 1.35rem;
	color: rgba(247, 244, 238, 0.78);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Movement 3 - names, address, numeral strip ------------------------------ */

.xw-stay .xw-suites-address__figure {
	max-width: 26rem;
}

.xw-stay .xw-suites-address__pair {
	align-items: start;
}

/* "26-50 m²" is a range, not a count. It reads as a numeral only at a smaller size. */
.xw-stay .xw-suites-numeral--range {
	font-size: clamp(1.25rem, 2.2vw, 1.65rem);
}

/* The plate --------------------------------------------------------------- */

.xw-stay .xw-suites-plate {
	padding-block: 0;
	background: var(--xw-stay-night);
}

/* An unresolved slug renders nothing at all, so the hinge collapses to zero height rather than
   painting a reserved band. Movement 3 then runs straight into movement 5, which is the documented
   behaviour: omitted, never a grey box. */
.xw-stay .xw-suites-plate:empty {
	display: none;
}

.xw-stay .xw-suites-plate .xw-stay-figure__cap {
	padding-bottom: clamp(1.25rem, 2.4vw, 2rem);
	color: rgba(247, 244, 238, 0.6);
}

/* Movement 4 - the six ---------------------------------------------------- */

.xw-stay .xw-suites-unit {
	padding-top: clamp(2.25rem, 4.4vw, 3.75rem);
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
	margin-top: clamp(2.25rem, 4.4vw, 3.75rem);
}

.xw-stay .xw-suites-unit__pair {
	margin-top: 0;
}

.xw-stay .xw-suites-unit__frames {
	display: grid;
	gap: var(--xw-stay-gap);
}

/* The offset that makes a pair read as a pair rather than as a stack. */
@media (min-width: 56rem) {
	.xw-stay .xw-suites-unit__frame--offset {
		margin-inline-start: clamp(1.5rem, 4vw, 3.5rem);
	}

	.xw-stay .xw-suites-unit--mirror .xw-suites-unit__frame--offset {
		margin-inline: 0 clamp(1.5rem, 4vw, 3.5rem);
	}

	/* xw-stay-pair drops a top offset on its last child; the unit copy carries the specification
	   block and reads better level with the first frame. */
	.xw-stay .xw-suites-unit__pair > :last-child {
		padding-top: 0;
	}
}

.xw-stay .xw-suites-unit__copy .xw-stay-eyebrow {
	margin-bottom: 1.1rem;
	color: var(--xw-stay-ink-soft);
	letter-spacing: 0.02em;
	text-transform: none;
	font-family: var(--xw-stay-display);
	font-size: 1.0625rem;
}

/* Fixed-order specification block ----------------------------------------- */

.xw-stay .xw-suites-spec {
	margin: 1.75rem 0 0;
}

.xw-stay .xw-suites-spec__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem 1.5rem;
	padding: 0.7rem 0;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
}

.xw-stay .xw-stay-section--dark .xw-suites-spec__row {
	border-top-color: var(--xw-stay-rule-dark);
}

.xw-stay .xw-suites-spec__key {
	margin: 0;
	color: var(--xw-stay-ink-faint);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.xw-stay .xw-suites-spec__val {
	margin: 0;
	color: var(--xw-stay-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/*
 * The unflattering fact.
 *
 * It is the last field on every photographed unit and it is the sentence a booking engine would
 * delete. It is set in the display face at body size, on the same hairline as every other field,
 * so it reads as specification rather than as an apology. It is not smaller, not greyer, and not
 * folded into a footnote.
 */
.xw-stay .xw-suites-spec__row--blunt .xw-suites-spec__val {
	color: var(--xw-stay-ink);
	font-family: var(--xw-stay-display);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.xw-stay .xw-suites-spec--includes .xw-suites-spec__val {
	font-size: 1rem;
}

@media (min-width: 40rem) {
	.xw-stay .xw-suites-spec__row {
		grid-template-columns: 11rem minmax(0, 1fr);
	}

	.xw-stay .xw-suites-spec__key {
		padding-top: 0.2rem;
	}
}

/* The ruled list - the three we wrote out instead --------------------------
 *
 * There is no image rule in this block and that is deliberate. Adding one would recreate the
 * six-equal-cards failure: Riverside has no photograph anywhere on the estate, so a slot for one
 * can only ever be a hole.
 */

.xw-stay .xw-suites-written {
	margin-top: clamp(2.75rem, 5.2vw, 4.5rem);
	padding-top: clamp(2rem, 3.8vw, 3rem);
	border-top: 2px solid var(--xw-stay-ink);
}

.xw-stay .xw-suites-ruled {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.xw-stay .xw-suites-ruled__row {
	padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
	list-style: none;
}

.xw-stay .xw-suites-ruled__row:last-child {
	border-bottom: var(--xw-stay-hair) solid var(--xw-stay-rule);
}

.xw-stay .xw-suites-ruled__name {
	margin: 0 0 0.75rem;
	color: var(--xw-stay-ink);
	font-family: var(--xw-stay-display);
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	font-weight: 400;
	line-height: 1.15;
}

.xw-stay .xw-suites-ruled__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.65rem 1.5rem;
	margin: 0;
}

.xw-stay .xw-suites-ruled__field dt {
	margin: 0 0 0.2rem;
	color: var(--xw-stay-ink-faint);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.xw-stay .xw-suites-ruled__field dd {
	margin: 0;
	color: var(--xw-stay-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* What we have not recorded is printed at the same weight as what we have. */
.xw-stay .xw-suites-ruled__field--unrecorded dd {
	color: var(--xw-stay-ink-faint);
	font-style: italic;
}

.xw-stay .xw-suites-written__close {
	margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}

@media (min-width: 48rem) {
	.xw-stay .xw-suites-ruled__fields {
		grid-template-columns: 7rem 7rem minmax(0, 1fr);
	}

	.xw-stay .xw-suites-ruled__field--wide {
		grid-column: 3;
	}

	.xw-stay .xw-suites-ruled__row {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: 1.5rem;
		align-items: start;
	}

	.xw-stay .xw-suites-ruled__name {
		margin-bottom: 0;
	}
}

/* Labelled, designed absence ---------------------------------------------- */

/*
 * A gap is TYPE, never a tile. It carries the question and the one fact that closes it, on a gold
 * rule that matches the honesty-credit device already in the shared grammar. It has no width, no
 * aspect ratio and no background, so it can never be mistaken for a picture that failed to load.
 */
.xw-stay .xw-suites-gap {
	display: block;
	max-width: 52ch;
	margin: 1.25rem 0 0;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--xw-stay-gold);
	color: var(--xw-stay-ink-faint);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.xw-stay .xw-stay-section--dark .xw-suites-gap {
	color: rgba(247, 244, 238, 0.68);
}

.xw-stay .xw-suites-gap__label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--xw-stay-ink);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.xw-stay .xw-stay-section--dark .xw-suites-gap__label {
	color: var(--xw-stay-gold);
}

.xw-stay .xw-suites-gap__q {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--xw-stay-ink-soft);
	font-family: var(--xw-stay-display);
	font-size: 1rem;
	line-height: 1.4;
}

.xw-stay .xw-stay-section--dark .xw-suites-gap__q {
	color: rgba(247, 244, 238, 0.86);
}

.xw-stay .xw-suites-gap__closes {
	display: block;
}

/* Movement 5 - the three typographic figures -------------------------------
 *
 * "Figure" here is the content file's word for a numbered part of the building, not a photograph.
 * We hold no frame of the sauna, the counter, the laundry or the corridor, so these are set in
 * type: numeral, rule, heading, text.
 */

.xw-stay .xw-suites-figures {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: clamp(1.75rem, 3.6vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

.xw-stay .xw-suites-figure {
	padding-top: 1rem;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
	list-style: none;
}

.xw-stay .xw-suites-figure__num {
	display: block;
	margin-bottom: 0.55rem;
	color: var(--xw-stay-ink-faint);
	font-family: var(--xw-stay-display);
	font-size: 1.5rem;
	line-height: 1;
}

.xw-stay .xw-suites-figure__head {
	margin-top: 0;
}

.xw-stay .xw-suites-house-rules {
	margin: clamp(1.75rem, 3.2vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.xw-stay .xw-suites-house-rules li {
	max-width: 62ch;
	padding: 0.55rem 0;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
	color: var(--xw-stay-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
	list-style: none;
}

@media (min-width: 56rem) {
	.xw-stay .xw-suites-figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.xw-stay .xw-suites-house-rules {
		columns: 2;
		column-gap: var(--xw-stay-gap);
	}

	.xw-stay .xw-suites-house-rules li {
		break-inside: avoid;
	}
}

/* Movement 6 - what it includes ------------------------------------------- */

.xw-stay .xw-suites-includes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.xw-stay .xw-suites-absences {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xw-stay .xw-suites-absences li {
	padding: 0.8rem 0;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
	color: var(--xw-stay-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
	list-style: none;
}

/* The absence itself is set in the display face, at the same weight as an inclusion. It is not a
   disclaimer and it is not smaller than the thing it qualifies. */
.xw-stay .xw-suites-absences__claim {
	display: block;
	color: var(--xw-stay-ink);
	font-family: var(--xw-stay-display);
	font-size: 1.0625rem;
	line-height: 1.4;
}

@media (min-width: 56rem) {
	.xw-stay .xw-suites-includes__grid {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* Movement 8 - the rail ---------------------------------------------------- */

.xw-stay .xw-suites-rail {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.xw-stay .xw-suites-rail__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem 1.5rem;
	padding: 0.85rem 0;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule-dark);
}

.xw-stay .xw-suites-rail__row:last-child {
	border-bottom: var(--xw-stay-hair) solid var(--xw-stay-rule-dark);
}

.xw-stay .xw-suites-rail__key {
	margin: 0;
	color: var(--xw-stay-gold);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.xw-stay .xw-suites-rail__val {
	margin: 0;
	color: rgba(247, 244, 238, 0.82);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.xw-stay .xw-suites-rail__val .xw-suites-gap {
	margin-top: 0;
}

.xw-stay .xw-suites-getting__close {
	margin-top: clamp(1.5rem, 2.8vw, 2rem);
}

@media (min-width: 40rem) {
	.xw-stay .xw-suites-rail__row {
		grid-template-columns: 13rem minmax(0, 1fr);
	}
}

/* Movement 10 - the weeks that sleep here ---------------------------------- */

.xw-stay .xw-suites-weeks__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: 0;
	list-style: none;
}

.xw-stay .xw-suites-weeks__cards li {
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
	list-style: none;
}

.xw-stay .xw-suites-weeks__cards li:last-child {
	border-bottom: var(--xw-stay-hair) solid var(--xw-stay-rule);
}

.xw-stay .xw-suites-weeks__cards a {
	display: block;
	padding: 1.1rem 0;
	color: var(--xw-stay-ink);
	text-decoration: none;
}

.xw-stay .xw-suites-weeks__cards a:focus-visible {
	outline: 1px solid var(--xw-stay-ink);
	outline-offset: 6px;
}

.xw-stay .xw-suites-weeks__name {
	display: block;
	font-family: var(--xw-stay-display);
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	line-height: 1.2;
}

.xw-stay .xw-suites-weeks__meta {
	display: block;
	margin-top: 0.35rem;
	color: var(--xw-stay-ink-faint);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

@media (min-width: 56rem) {
	.xw-stay .xw-suites-weeks__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--xw-stay-gap);
	}

	.xw-stay .xw-suites-weeks__cards li:last-child {
		border-bottom: 0;
	}
}

/* Movement 11 - the stay strip and the page's one CTA ---------------------- */

/*
 * Three cards, name and one line each, never a full listing. Built to lose a card without leaving
 * a hole: delete the third <li> and the grid becomes two.
 */
.xw-stay .xw-suites-strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 1.25rem 0 clamp(2.25rem, 4.4vw, 3.5rem);
	padding: 0;
	list-style: none;
}

.xw-stay .xw-suites-strip li {
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule-dark);
	list-style: none;
}

.xw-stay .xw-suites-strip li:last-child {
	border-bottom: var(--xw-stay-hair) solid var(--xw-stay-rule-dark);
}

.xw-stay .xw-suites-strip a {
	display: block;
	padding: 1.1rem 0;
	color: var(--xw-stay-paper);
	text-decoration: none;
}

.xw-stay .xw-suites-strip a:focus-visible {
	outline: 1px solid rgba(247, 244, 238, 0.7);
	outline-offset: 6px;
}

.xw-stay .xw-suites-strip__name {
	display: block;
	font-family: var(--xw-stay-display);
	font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	line-height: 1.2;
}

.xw-stay .xw-suites-strip__line {
	display: block;
	margin-top: 0.3rem;
	color: rgba(247, 244, 238, 0.62);
	font-size: 0.875rem;
	line-height: 1.5;
}

.xw-stay .xw-suites-enquire__ask .xw-stay-h2 {
	max-width: 20ch;
}

@media (min-width: 56rem) {
	.xw-stay .xw-suites-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--xw-stay-gap);
	}

	.xw-stay .xw-suites-strip li:last-child {
		border-bottom: 0;
	}
}

/* Pagefoot ---------------------------------------------------------------- */

.xw-stay .xw-suites-pagefoot .xw-stay-pagefoot-name {
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

@media (forced-colors: active) {
	.xw-stay .xw-suites-gap {
		border-inline-start-color: CanvasText;
	}
}

/* The value points that replaced the ownership paragraph. A ruled list on cream, type only —
   sections 04 and 05 own the interiors and there is no frame of a shared room. */
.xw-stay--suites .xw-suites-value {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.xw-stay--suites .xw-suites-value__item {
	padding-top: 0.9rem;
	border-top: var(--xw-stay-hair) solid var(--xw-stay-rule);
}

.xw-stay--suites .xw-suites-value__title {
	margin: 0 0 0.55rem;
	font-family: var(--xw-stay-display);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.35;
}

.xw-stay--suites .xw-suites-value__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.62;
}