/* ==========================================================================
   Education & Development — page stylesheet
   Loaded only on /education-development/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it.

   THE MOTIF IS WIDENING. This page argues about scope — that education
   is bigger than the school day — so the composition grows: rules that
   get longer, type that gets larger, an idea that opens out. It is the
   only internal page with a deep-green field, and the only one built
   entirely without photographs; the dark band is what a photograph would
   otherwise have done for contrast, and it earns its place by carrying
   the argument rather than decorating it.

   Sections
     1. Opening
     2. THE SIGNATURE MOMENT — four widening beats, on deep green
     3. When it has already gone wrong
     4. The whole 5–17 range
     5. Plans and professionals
     6. Interests and strengths
     7. Growing up
     8. Next
     9. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening. Two display lines, the second stepped in and dropped. Every
      other heading on the site is flush left, so the indent is doing real
      work here — it enacts the "not this / not that either" rhythm rather
      than describing it.
   -------------------------------------------------------------------------- */
.oasis-edu-open__inner { max-width: var(--oasis-w-wide); }
.oasis-edu-open h1 { margin-top: 0.4rem; }
.oasis-edu-open__l1,
.oasis-edu-open__l2 { display: block; }
.oasis-edu-open__l1 { max-width: 16ch; }
.oasis-edu-open__l2 {
	max-width: 18ch;
	margin-top: 0.12em;
	color: var(--oasis-green-deep);
}
@media (min-width: 800px) {
	.oasis-edu-open__l2 {
		/* the step. Held in ch rather than % so it scales with the type and
		   never opens a gulf at very wide viewports. */
		margin-left: 7ch;
		margin-top: 0.2em;
	}
}

.oasis-edu-open__body { margin-top: clamp(2rem, 4vw, 3.25rem); }
.oasis-edu-open__lede {
	margin: 0;
	font-family: var(--oasis-font-display);
	/* raised: the first viewport is type only, so the lede has to carry
	   real weight rather than read as a caption to the headline */
	font-size: clamp(1.32rem, 1.02rem + 1.35vw, 2.1rem);
	line-height: 1.36;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	max-width: 24ch;
}
.oasis-edu-open__para {
	margin-top: 1.2rem;
	color: var(--oasis-ink-soft);
	max-width: 52ch;
}
@media (min-width: 900px) {
	.oasis-edu-open__body {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-edu-open__para { margin-top: 0.55rem; }
}

/* --------------------------------------------------------------------------
   2. THE SIGNATURE MOMENT — four widening beats on deep green.

      Four rules that get longer and four labels that get larger, so the
      block itself widens as the idea does. Only the first belongs to the
      school, and the composition says that before the closing line does.

      Deliberately not four cards, four icons, a progress bar, a chart or
      a dashboard: there is nothing here to measure. The subject is scope,
      and scope is a shape.
   -------------------------------------------------------------------------- */
.oasis-edu-widen__head { max-width: var(--oasis-w-wide); }
.oasis-edu-widen__head h2 { margin-top: 0.35rem; max-width: 24ch; text-wrap: balance; }

.oasis-edu-widen__list {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	max-width: var(--oasis-w-wide);
	counter-reset: none;
}
.oasis-edu-beat {
	/* the widening: each beat's rule reaches further across the field than
	   the one above it, and its label is set larger. Four steps, driven by
	   a custom property the template sets per item. */
	--oasis-beat-w: calc(28% + var(--oasis-beat) * 24%);
	position: relative;
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.oasis-edu-beat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	width: min(100%, var(--oasis-beat-w));
	background: linear-gradient(to right,
		rgba(180, 236, 81, 0.9) 0%,
		rgba(180, 236, 81, 0.78) 82%,
		rgba(180, 236, 81, 0) 100%);
}
.oasis-edu-beat:first-child { margin-top: 0; }
.oasis-edu-beat__label {
	display: block;
	font-family: var(--oasis-font-display);
	/* grows with the rule: 1.35rem at the school day, 2.3rem by the fourth */
	font-size: calc(clamp(1.28rem, 1.04rem + 1vw, 1.68rem) + var(--oasis-beat) * clamp(0.14rem, 0.62vw, 0.3rem));
	line-height: 1.14;
	letter-spacing: -0.018em;
	color: #fff;
	max-width: 26ch;
}
.oasis-edu-beat__text {
	display: block;
	margin-top: 0.7rem;
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
}
@media (min-width: 1000px) {
	/* the text hangs to the right of the label, so the widening rule is
	   read against a column of type rather than a stack of paragraphs */
	.oasis-edu-beat {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: baseline;
	}
	.oasis-edu-beat__text { margin-top: 0; }
}
/* the first beat is the school's, and it is the quietest thing in the
   field — the point of the composition is what comes after it */
.oasis-edu-beat:first-child .oasis-edu-beat__label { color: rgba(255, 255, 255, 0.66); }

.oasis-edu-widen__close {
	margin: clamp(2.75rem, 5.5vw, 4.5rem) 0 0;
	max-width: 46ch;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem);
	line-height: 1.44;
	letter-spacing: -0.012em;
	color: #fff;
}

/* Motion: the rules draw across as the block arrives. It is the one
   animation on the page, it takes 900ms, and it is doing the explaining —
   the whole idea is that each line reaches further than the last. */
.js .oasis-edu-beat::before {
	transform-origin: left center;
	transition: transform var(--oasis-dur-image) var(--oasis-ease-out),
		opacity var(--oasis-dur-reveal) var(--oasis-ease-out);
}
.js .oasis-edu-widen__list.is-pending .oasis-edu-beat::before {
	transform: scaleX(0.06);
	opacity: 0;
}
.js .oasis-edu-beat:nth-child(2)::before { transition-delay: 110ms; }
.js .oasis-edu-beat:nth-child(3)::before { transition-delay: 220ms; }
.js .oasis-edu-beat:nth-child(4)::before { transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
	.js .oasis-edu-beat::before { transition: none; }
	.js .oasis-edu-widen__list.is-pending .oasis-edu-beat::before {
		transform: none;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   3. When it has already gone wrong. Heading in the margin, argument
      beside it, and the continuity point marked as an aside because it is
      the opposite instruction to everything above it.
   -------------------------------------------------------------------------- */
.oasis-edu-repair__inner { max-width: var(--oasis-w-wide); }
.oasis-edu-repair h2 { margin-top: 0.35rem; max-width: 17ch; text-wrap: balance; }
.oasis-edu-repair__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-edu-repair__body p { color: var(--oasis-ink-soft); max-width: 56ch; }
.oasis-edu-repair__note {
	margin-top: 1.6rem;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-green-leaf);
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
}
.oasis-edu-repair__note strong { color: var(--oasis-ink); font-weight: 600; }
@media (min-width: 960px) {
	.oasis-edu-repair__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-edu-repair__body { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   4. The whole 5–17 range.

      The professionally load-bearing section. The span is stated once as
      a RANGE MARK — two numerals on one rule — which is the page's only
      numeric moment and is deliberately not a chart: no ticks, no scale,
      no data encoded in the distance. The nine arrangements are then
      grouped by the source's own distinction rather than tiled.
   -------------------------------------------------------------------------- */
.oasis-edu-span__head { max-width: var(--oasis-w-wide); }
.oasis-edu-span__head h2 { margin-top: 0.35rem; max-width: 26ch; text-wrap: balance; }
.oasis-edu-span__head .oasis-lede { margin-top: 1.1rem; max-width: 52ch; }

.oasis-edu-range {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	max-width: var(--oasis-w-wide);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	line-height: 1;
	color: var(--oasis-green-deep);
}
.oasis-edu-range__rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(to right,
		var(--oasis-green-leaf) 0%,
		rgba(66, 147, 33, 0.28) 50%,
		var(--oasis-green-leaf) 100%);
}

.oasis-edu-span__groups {
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
	max-width: var(--oasis-w-wide);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
}
.oasis-edu-group__title {
	margin: 0 0 0.35rem;
	font-family: var(--oasis-font-body);
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-edu-stages { margin: 0; }
.oasis-edu-stage {
	padding: 1.05rem 0;
	border-top: 1px solid var(--oasis-rule-soft);
}
.oasis-edu-stage dt {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.1rem, 1.01rem + 0.4vw, 1.3rem);
	line-height: 1.3;
	color: var(--oasis-green-deep);
}
.oasis-edu-stage dd {
	margin: 0.45rem 0 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	max-width: 52ch;
}
@media (min-width: 960px) {
	/* six items against three, so the right column runs out first. The
	   closing line moves into the space it leaves rather than sitting under
	   both groups with a void above it. */
	.oasis-edu-span__groups {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
	.oasis-edu-span__note {
		margin-top: clamp(2rem, 4vw, 3rem);
		padding-top: clamp(1.5rem, 3vw, 2rem);
		border-top: 1px solid var(--oasis-rule);
	}
}

.oasis-edu-span__note {
	margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
	max-width: 56ch;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.14rem, 1.02rem + 0.5vw, 1.4rem);
	line-height: 1.46;
	color: var(--oasis-ink);
}

/* --------------------------------------------------------------------------
   5. Plans and professionals. Two prose columns under a wide heading —
      the plainest section on the page, on purpose: it is the one a
      placement officer reads for content rather than for tone.
   -------------------------------------------------------------------------- */
.oasis-edu-plans__inner { max-width: var(--oasis-w-wide); }
.oasis-edu-plans h2 { margin-top: 0.35rem; max-width: 28ch; text-wrap: balance; }
.oasis-edu-plans__cols { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-edu-plans__cols p { color: var(--oasis-ink-soft); max-width: 54ch; }
@media (min-width: 960px) {
	.oasis-edu-plans__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
	}
	.oasis-edu-plans__cols p + p { margin-top: 0; }
}
.oasis-edu-plans__close {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--oasis-rule);
	max-width: 62ch;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.66;
}

/* --------------------------------------------------------------------------
   6. Interests and strengths. The lightest ground and the warmest copy on
      the page — the section that stops the whole thing reading as
      academic. One display-scale line does most of the work.
   -------------------------------------------------------------------------- */
.oasis-edu-interests__inner { max-width: var(--oasis-w-wide); }
.oasis-edu-interests h2 { margin-top: 0.35rem; max-width: 18ch; text-wrap: balance; }
.oasis-edu-interests__statement {
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.36rem, 1.05rem + 1.35vw, 2.2rem);
	line-height: 1.34;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	max-width: 28ch;
}
.oasis-edu-interests__body { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-edu-interests__body p { color: var(--oasis-ink-soft); max-width: 50ch; }
@media (min-width: 1000px) {
	.oasis-edu-interests__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-edu-interests__lead,
	.oasis-edu-interests__statement { grid-column: 1 / -1; }
	.oasis-edu-interests__statement {
		max-width: 34ch;
		font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.65rem);
		margin-top: clamp(2rem, 4vw, 3rem);
	}
	.oasis-edu-interests__body {
		grid-column: 1 / -1;
		margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-edu-interests__body p + p { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   7. Growing up. Heading in the margin, argument beside it — mirrored
      from section 3 so the page's two "explanatory" sections bracket the
      warm one between them.
   -------------------------------------------------------------------------- */
.oasis-edu-indep__inner { max-width: var(--oasis-w-wide); }
.oasis-edu-indep h2 { margin-top: 0.35rem; max-width: 19ch; text-wrap: balance; }
.oasis-edu-indep__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-edu-indep__body p { color: var(--oasis-ink-soft); max-width: 56ch; }
@media (min-width: 960px) {
	.oasis-edu-indep__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	/* the reverse of section 3: argument left, heading right, so the two
	   do not read as the same spread twice */
	.oasis-edu-indep__lead { grid-column: 2; grid-row: 1; }
	.oasis-edu-indep__body { grid-column: 1; grid-row: 1; margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   8. Next. Two routes side by side with the arrow inline after the
      description — a fourth variation on the chapter close.
   -------------------------------------------------------------------------- */
.oasis-edu-next__inner { max-width: var(--oasis-w-wide); }
.oasis-edu-next h2 { margin-top: 0.35rem; max-width: 18ch; }
.oasis-edu-next__routes {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.oasis-edu-next__routes a {
	display: block;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
	border-top: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: inherit;
}
.oasis-edu-next__routes a:first-child { border-top: 2px solid var(--oasis-green-leaf); }
.oasis-edu-next__routes a:last-child { border-bottom: 1px solid var(--oasis-rule); }
.oasis-edu-next__label {
	display: block;
	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-edu-next__desc {
	display: block;
	margin-top: 0.5rem;
	max-width: 44ch;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-ink-soft);
}
.oasis-edu-next__routes a .oasis-arc-arrow {
	display: block;
	width: 1.75rem;
	height: auto;
	margin-top: 0.9rem;
	color: var(--oasis-green-deep);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
@media (hover: hover) {
	.oasis-edu-next__routes a:hover .oasis-edu-next__label { color: var(--oasis-green-deep-hover); }
	.oasis-edu-next__routes a:hover .oasis-arc-arrow { transform: translateX(6px); }
}
.oasis-edu-next__routes a:focus-visible {
	outline: 3px solid var(--oasis-focus);
	outline-offset: 4px;
}
.oasis-edu-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-edu-next__prof > span {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.05rem, 1rem + 0.28vw, 1.22rem);
	color: var(--oasis-ink);
}
@media (min-width: 860px) {
	.oasis-edu-next__routes {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-edu-next__routes a:last-child { border-bottom: 0; }
	.oasis-edu-next__routes a:last-child { border-top: 2px solid var(--oasis-green-leaf); }
}

/* --------------------------------------------------------------------------
   9. Narrow widths. Measures set to hold a column open have to be
      released once there is only one column, and the widening rules have
      to keep widening on a phone — that composition is the page, so it
      does not get flattened into four identical rows.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.oasis-edu-open__lede,
	.oasis-edu-open__para,
	.oasis-edu-beat__text,
	.oasis-edu-repair__body p,
	.oasis-edu-span__head .oasis-lede,
	.oasis-edu-stage dd,
	.oasis-edu-span__note,
	.oasis-edu-plans__cols p,
	.oasis-edu-plans__close,
	.oasis-edu-interests__body p,
	.oasis-edu-indep__body p,
	.oasis-edu-widen__close { max-width: none; }
	.oasis-edu-beat__label { max-width: 20ch; }
	/* the rules start further across so four steps are still legible in a
	   narrow field: 46% to 100% rather than 34% to 100% */
	.oasis-edu-beat { --oasis-beat-w: calc(46% + var(--oasis-beat) * 18%); }
	.oasis-edu-range { max-width: none; }
}
@media (max-width: 599px) {
	.oasis-edu-interests__statement { max-width: none; }
	/* the indent of the second headline line collapses: at this width it
	   would read as a mistake rather than as a step */
	.oasis-edu-open__l1,
	.oasis-edu-open__l2 { max-width: none; }
}