/* ==========================================================================
   Life at Oasis House — page stylesheet
   Loaded only on /life-at-oasis-house/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it. Reasoning in
   /DESIGN.md §19.11.

   THE MOTIF IS OVERLAP AND SCALE. This is the page the home's own
   photography carries, so the pictures are set at deliberately unequal
   sizes, offset against each other, with type in the gaps they leave.
   No other page on the site overlaps anything — and nothing here is
   allowed to line up into a gallery, a grid or three equal rectangles.

   Sections  (rebalanced 2 September 2026 — photography-first)
     1. Opening
     2. A real house — the pair
     3. Personal space — with its photograph
     4. Around the home — THE SIGNATURE, on the dark field
     5. Rhythm
     6. Having a say
     7. Outside
     8. Next
     9. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening. Type and photograph side by side at unequal weight, and the
      picture drops below the text block rather than aligning with it —
      the first statement of the page's offset.
   -------------------------------------------------------------------------- */
.oasis-life-open__inner { max-width: var(--oasis-w-wide); }
.oasis-life-open h1 {
	margin-top: 0.4rem;
	max-width: 17ch;
	text-wrap: balance;
}
.oasis-life-open__lede {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.28rem, 1.05rem + 1vw, 1.8rem);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 30ch;
}
.oasis-life-open__para {
	margin-top: 1.2rem;
	color: var(--oasis-ink-soft);
	max-width: 50ch;
}
.oasis-life-open__figure { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-life-open__figure .oasis-figure__frame img { aspect-ratio: 865 / 1160; }

@media (min-width: 1000px) {
	.oasis-life-open__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	/* the picture starts lower than the type it sits beside: an offset, not
	   a two-column layout with a picture in one of the columns */
	.oasis-life-open__figure { margin-top: clamp(3rem, 7vw, 6rem); }
}

/* --------------------------------------------------------------------------
   2. A real house. Prose in two columns with the smallest picture on the
      page hung beside them — the arched mirror is a detail, and it is
      sized like one.
   -------------------------------------------------------------------------- */
.oasis-life-house__head { max-width: var(--oasis-w-wide); }
.oasis-life-house__head h2 { margin-top: 0.35rem; max-width: 22ch; text-wrap: balance; }
.oasis-life-house__head .oasis-lede { margin-top: 1.1rem; max-width: 46ch; }
@media (min-width: 960px) {
	.oasis-life-house__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: end;
	}
	.oasis-life-house__head > .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-life-house__head .oasis-lede { margin-top: 0; padding-bottom: 0.35rem; }
}

/* The pair: the dining table large, the kitchen-in-its-mirror small and
   dropped lower — the same offset language as the opening, so two crops
   of one room read as two different subjects rather than a gallery row. */
.oasis-life-house__pair {
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
	max-width: var(--oasis-w-wide);
}
.oasis-life-house__table .oasis-figure__frame img { aspect-ratio: 930 / 940; }
.oasis-life-house__mirror { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 15rem; }
.oasis-life-house__mirror .oasis-figure__frame img { aspect-ratio: 460 / 670; }
.oasis-life-house__note {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	color: var(--oasis-ink-soft);
	max-width: 62ch;
}
.oasis-life-house__note strong { color: var(--oasis-ink); font-weight: 600; }
@media (min-width: 900px) {
	.oasis-life-house__pair {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}
	.oasis-life-house__mirror {
		margin-top: clamp(4rem, 9vw, 8rem);
		max-width: clamp(11rem, 20vw, 16rem);
	}
}

/* --------------------------------------------------------------------------
   3. Around the home. Four details form one irregular editorial field, with
      an anchor, a tall route through the house, a threshold and a low strip
      of sky. Their overlap prevents the section reading as a property grid.
   -------------------------------------------------------------------------- */
.oasis-life-around { overflow: hidden; }
.oasis-life-around__head {
	max-width: var(--oasis-w-wide);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.9rem clamp(2rem, 6vw, 5rem);
}
.oasis-life-around__head h2 {
	max-width: 16ch;
	text-wrap: balance;
}
.oasis-life-around__composition {
	margin-top: clamp(2.5rem, 6vw, 5rem);
	max-width: var(--oasis-w-wide);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
}
.oasis-life-around .oasis-figure__frame {
	border-radius: var(--oasis-radius-md);
	box-shadow: 0 28px 68px -34px rgba(0, 0, 0, 0.72);
}
.oasis-life-around figcaption { color: rgba(255, 255, 255, 0.68); }
/* Four DIFFERENT source photographs at four deliberately unequal sizes:
   the staircase anchors, the bathroom drops in beside it, the plant
   detail steps over the seam between them with a deep-green ring, and
   the hallway hangs lower still. The overlap is the page's motif — this
   is the signature composition, now on the dark field. */
.oasis-life-around__stairs {
	grid-column: 1 / 7;
	grid-row: 1;
}
.oasis-life-around__stairs img { aspect-ratio: 640 / 729; }
.oasis-life-around__bath {
	grid-column: 8 / 12;
	grid-row: 1;
	margin-top: clamp(3rem, 7vw, 6rem);
}
.oasis-life-around__bath img { aspect-ratio: 680 / 905; }
.oasis-life-around__plant {
	grid-column: 6 / 8;
	grid-row: 1;
	margin-top: clamp(11rem, 21vw, 18rem);
	position: relative;
	z-index: 2;
	box-shadow: 0 0 0 clamp(0.45rem, 0.9vw, 0.7rem) var(--oasis-green-deep);
	border-radius: var(--oasis-radius-md);
}
.oasis-life-around__plant img { aspect-ratio: 420 / 605; }
.oasis-life-around__hall {
	grid-column: 2 / 5;
	grid-row: 2;
	/* positive offset: the stairway's caption sits between the rows and
	   must never be climbed over */
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.oasis-life-around__hall img { aspect-ratio: 500 / 606; }

/* The closing line — a whole former section of prose, now one sentence
   set at display scale into the field's negative space. */
.oasis-life-around__line {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	max-width: 20ch;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem);
	line-height: 1.24;
	letter-spacing: -0.016em;
	color: #fff;
	text-wrap: balance;
}

@media (min-width: 900px) {
	.oasis-life-around__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		align-items: end;
	}
	.oasis-life-around__head > .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-life-around__stairs figcaption { padding-left: clamp(5.5rem, 8vw, 7rem); }
	/* the line sits IN the field at width: beside the hallway, centred in
	   the second row's negative space rather than below the composition */
	.oasis-life-around__line {
		grid-column: 6 / 12;
		grid-row: 2;
		align-self: center;
		justify-self: end;
		margin: clamp(2rem, 4vw, 3rem) clamp(0.5rem, 2vw, 2rem) 0 0;
	}
}

/* --------------------------------------------------------------------------
   6. Rhythm. Heading in the margin, argument beside it. The note at the
      end is the tense discipline made visible — it says out loud that no
      timetable is published here.
   -------------------------------------------------------------------------- */
.oasis-life-rhythm__inner { max-width: var(--oasis-w-wide); }
.oasis-life-rhythm h2 { margin-top: 0.35rem; max-width: 16ch; text-wrap: balance; }
.oasis-life-rhythm__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-life-rhythm__body p { color: var(--oasis-ink-soft); max-width: 56ch; }
.oasis-life-rhythm__note {
	margin-top: 1.6rem;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-sand);
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
}
.oasis-life-rhythm__note strong { color: var(--oasis-ink); font-weight: 600; }
@media (min-width: 960px) {
	.oasis-life-rhythm__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-life-rhythm__body { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   3. Personal space. Since the 2 September 2026 rebalance this section
      HAS its photograph: the bedroom-corner crop whose reversal is
      documented in ASSET_INVENTORY 7A.4. Statement left, picture right,
      offset below the heading line.
   -------------------------------------------------------------------------- */
.oasis-life-room__inner { max-width: var(--oasis-w-wide); }
.oasis-life-room h2 { margin-top: 0.35rem; max-width: 18ch; }
.oasis-life-room__statement {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.34rem, 1.05rem + 1.3vw, 2.05rem);
	line-height: 1.36;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	max-width: 26ch;
}
.oasis-life-room__para { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--oasis-ink-soft); max-width: 48ch; }
.oasis-life-room__para em { font-style: italic; font-synthesis: none; color: var(--oasis-ink); }
.oasis-life-room__figure { margin-top: clamp(2rem, 4vw, 2.75rem); max-width: 24rem; }
.oasis-life-room__figure .oasis-figure__frame img { aspect-ratio: 520 / 766; }
@media (min-width: 960px) {
	.oasis-life-room__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	/* the offset again: the photograph starts below the heading line */
	.oasis-life-room__figure { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: clamp(18rem, 28vw, 23rem); justify-self: end; }
}

/* --------------------------------------------------------------------------
   8. Outside. Copy left, the largest picture on the page right and
      running lower than its column — the offset again, mirrored.
   -------------------------------------------------------------------------- */
.oasis-life-outside__inner { max-width: var(--oasis-w-wide); }
.oasis-life-outside h2 { margin-top: 0.35rem; max-width: 14ch; text-wrap: balance; }
.oasis-life-outside__text p { margin-top: 1.15rem; color: var(--oasis-ink-soft); max-width: 46ch; }
.oasis-life-outside__figure { margin-top: clamp(2rem, 4vw, 2.75rem); }
.oasis-life-outside__figure .oasis-figure__frame img { aspect-ratio: 1100 / 1160; }
@media (min-width: 1000px) {
	.oasis-life-outside__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	.oasis-life-outside__text { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
	.oasis-life-outside__figure { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   9. Having a say. Six short items, so this is the one place the page
      could have become a card grid. It does not: the items run in two
      columns with hairline rules and no boxes, and every heading sits at
      body scale so the section reads as a list of ordinary arrangements
      rather than as a feature matrix. Compressed to three items in the
      density pass; at width they sit in one row of three.
   -------------------------------------------------------------------------- */
.oasis-life-say__head { max-width: var(--oasis-w-wide); }
.oasis-life-say__head h2 { margin-top: 0.35rem; max-width: 24ch; text-wrap: balance; }
.oasis-life-say__run {
	margin-top: clamp(2rem, 4vw, 3rem);
	max-width: var(--oasis-w-wide);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(2.5rem, 6vw, 5rem);
}
.oasis-life-say__item {
	padding: 1.35rem 0;
	border-top: 1px solid var(--oasis-rule-soft);
}
.oasis-life-say__item h3 {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.12rem, 1.02rem + 0.42vw, 1.32rem);
	line-height: 1.3;
	color: var(--oasis-green-deep);
}
.oasis-life-say__item p {
	margin-top: 0.55rem;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	max-width: 46ch;
}
@media (min-width: 900px) {
	.oasis-life-say__run { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   10. Next. Stacked rows with a leaf rule opening them — a third
       treatment of the chapter close, not About's or Who We Support's.
   -------------------------------------------------------------------------- */
.oasis-life-next__inner { max-width: var(--oasis-w-wide); }
.oasis-life-next h2 { margin-top: 0.35rem; max-width: 18ch; }
.oasis-life-next__routes {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
}
.oasis-life-next__routes a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.25rem;
	align-items: center;
	gap: 0.35rem clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(1.4rem, 2.8vw, 2.1rem);
	border-top: 1px solid rgba(36, 92, 44, 0.22);
	text-decoration: none;
	color: inherit;
}
.oasis-life-next__routes a:first-child { border-top: 2px solid var(--oasis-green-leaf); }
.oasis-life-next__routes a:last-child { border-bottom: 1px solid rgba(36, 92, 44, 0.22); }
.oasis-life-next__label {
	grid-column: 1;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.42rem, 1.12rem + 1.25vw, 2rem);
	line-height: 1.16;
	letter-spacing: -0.018em;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-life-next__desc {
	grid-column: 1;
	max-width: 44ch;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-ink-soft);
}
.oasis-life-next__routes svg {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 1.75rem;
	height: auto;
	justify-self: end;
	color: var(--oasis-green-deep);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
@media (hover: hover) {
	.oasis-life-next__routes a:hover .oasis-life-next__label { color: var(--oasis-green-deep-hover); }
	.oasis-life-next__routes a:hover svg { transform: translateX(6px); }
}
.oasis-life-next__routes a:focus-visible {
	outline: 3px solid var(--oasis-focus);
	outline-offset: 4px;
}
.oasis-life-next__prof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem clamp(1rem, 2.5vw, 1.75rem);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.oasis-life-next__prof > span {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.05rem, 1rem + 0.28vw, 1.22rem);
	color: var(--oasis-ink);
}

/* --------------------------------------------------------------------------
   11. Narrow widths. Photography is RECOMPOSED here, not stacked: the
       tall frames become shallower so the page does not turn into a
       column of full-screen pictures, and the two details keep their
       overlap because that relationship is the point of the section.
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
	/* a 0.75 and a 0.95 frame at full phone width each own most of a
	   screen; re-cropped shallower, they stay pictures rather than
	   becoming interruptions */
	.oasis-life-open__figure .oasis-figure__frame img { aspect-ratio: 4 / 3; }
	.oasis-life-outside__figure .oasis-figure__frame img { aspect-ratio: 5 / 4; }
	.oasis-life-house__table .oasis-figure__frame img { aspect-ratio: 5 / 4; }
	.oasis-life-room__figure { max-width: min(70%, 20rem); }
}
@media (max-width: 899px) {
	.oasis-life-around__stairs {
		grid-column: 1 / 11;
		grid-row: 1;
	}
	.oasis-life-around__bath {
		grid-column: 6 / 13;
		grid-row: 2;
		margin-top: 1rem;
		position: relative;
		z-index: 1;
	}
	.oasis-life-around__hall {
		grid-column: 1 / 6;
		grid-row: 2;
		margin-top: clamp(1.5rem, 5vw, 2.5rem);
	}
	.oasis-life-around__plant {
		grid-column: 9 / 13;
		grid-row: 1;
		margin-top: clamp(9rem, 42vw, 14rem);
	}
	.oasis-life-open__lede,
	.oasis-life-open__para,
	.oasis-life-house__note,
	.oasis-life-rhythm__body p,
	.oasis-life-room__statement,
	.oasis-life-room__para,
	.oasis-life-outside__text p,
	.oasis-life-say__item p { max-width: none; }
	/* the arched mirror is a small detail and stays one: it is never
	   allowed to grow to full width just because the layout stacked */
	.oasis-life-house__mirror { max-width: min(58%, 13rem); margin-left: auto; }
}
@media (max-width: 599px) {
	.oasis-life-next__routes a { grid-template-columns: minmax(0, 1fr); }
	.oasis-life-next__routes svg {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: 0.85rem;
	}
}

/* --------------------------------------------------------------------------
   7b. Philosophy, in practice.

      Seven pairs, added 6 September 2026. The device is the pairing:
      the principle in display type, the ordinary thing it turns into
      beside it in body copy, with the domain as a small tracked label
      above. A principle alone is a value statement; a detail alone is a
      brochure — they only work adjacent.

      Deliberately NOT a service grid: no icons, no cards, no fills, no
      borders beyond the single hairline between rows, no numbering and
      no tick marks. On a wide screen the principle holds a fixed-width
      column so all seven line up vertically and the eye can run down
      them; on a phone the pair simply stacks in reading order.
   -------------------------------------------------------------------------- */
.oasis-life-practice__head { max-width: var(--oasis-w-wide); }
.oasis-life-practice__head h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-life-practice__head .oasis-lede { margin-top: 1.1rem; max-width: 52ch; }

.oasis-life-practice__list { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.oasis-life-practice__item + .oasis-life-practice__item {
	margin-top: clamp(1.85rem, 3.6vw, 2.6rem);
	padding-top: clamp(1.85rem, 3.6vw, 2.6rem);
	border-top: 1px solid var(--oasis-rule);
}

.oasis-life-practice__domain {
	margin: 0 0 0.6rem;
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}

.oasis-life-practice__principle {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.04rem + 0.85vw, 1.72rem);
	line-height: 1.28;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}

.oasis-life-practice__practice {
	margin: 0.75rem 0 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.64;
	max-width: 52ch;
}

@media (min-width: 900px) {
	.oasis-life-practice__item {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		column-gap: clamp(2.25rem, 5vw, 4.25rem);
		align-items: start;
		grid-template-areas:
			"domain    practice"
			"principle practice";
	}
	.oasis-life-practice__domain { grid-area: domain; }
	.oasis-life-practice__principle { grid-area: principle; max-width: 22ch; }
	.oasis-life-practice__practice {
		grid-area: practice;
		margin-top: 0;
		max-width: 46ch;
	}
}