/* Screen-fit ladder. Screens in window.ceScreens.fit (inc/screens.php) get
   --ce-fit from assets/js/fit.js: 0 is the design size, 1 is most compressed.
   Width, type and space rungs and the floors (body 16px, secondary 14px, titles
   28px desktop / 22px phone) are below. There is no phone zoom and no fitTitle;
   Phase 7a removed that path. The phone .ce-section / .ce-next block stays
   because Home #organisations and #everyone are off the ladder. */

@media (max-width: 599px) {
	.ce-section__title {
		margin-bottom: 1rem;
		font-size: clamp(1.625rem, 8.4vw, 2.25rem);
	}

	.ce-section {
		--ce-paragraph-gap: 1rem;
	}

	.ce-section p {
		line-height: 1.4;
	}

	.ce-section .wp-block-buttons {
		gap: 0.5rem 0.75rem;
		margin-top: 1.25rem;
	}

	.ce-section .wp-block-button__link {
		padding-block: 0.6em;
		font-size: 1rem;
	}

	.ce-next {
		min-height: 0;
		margin-bottom: clamp(0.5rem, 2svh, 1rem);
		padding: 0.5rem 1.5rem;
	}

	.ce-next svg {
		width: min(1.5rem, 3.4svh);
	}
}

/* Coaching & Mentoring: What you get, and Your six months. */
@media (max-width: 47.99rem) {
	.ce-program-screen .ce-program-pillars {
		gap: calc(1rem * var(--ce-fit-k-gap, 1));
		padding-top: calc(0.25rem * var(--ce-fit-k-gap, 1));
	}

	.ce-program-pillars .ce-fact {
		padding-top: calc(0.75rem * var(--ce-fit-k-gap, 1));
	}

	.ce-program-pillars .ce-fact h3 {
		--ce-fs: 1.25rem;
	}

	.ce-program-pillars .ce-fact p {
		margin-top: calc(0.375rem * var(--ce-fit-k-gap, 1));
		--ce-fs: 1rem;
		line-height: 1.35;
	}

	.ce-program-aside {
		margin-top: calc(0.75rem * var(--ce-fit-k-gap, 1));
	}

	/* The size of the lead on a phone is --ce-fs: 1.0625rem, set for every lead below. */
	.ce-page .ce-program-aside .ce-program-lead {
		padding-bottom: calc(0.5rem * var(--ce-fit-k-gap, 1));
	}

	.ce-program-timeline .ce-timeline__item {
		padding-block: calc(0.25rem * var(--ce-fit-k-gap, 1));
		row-gap: 0;
	}

	.ce-page .ce-program-lead {
		--ce-fs: 1.0625rem;
	}
}

/* The screens with badges. The badges fall into a pile that is laid out from
   their measured size (assets/js/motion.js), so they cannot be scaled with the
   rest of the screen. They get smaller on a short window instead, and the pile
   takes less room. */
@media (max-width: 47.99rem) {
	.ce-program-for .ce-badge {
		--ce-fs: clamp(0.8125rem, 2.3svh, 1rem);
	}

	.ce-page .ce-org-how:not(.ce-org-up) .ce-badges--detail .ce-badge {
		--ce-fs: 0.875rem;
	}
}

/* ==========================================================================
   The fit ladder (assets/js/fit.js, the screens in window.ceScreens.fit)

   fit.js gives each screen that is too tall one number between 0 and 1,
   --ce-fit, inline on the screen (0 or missing is the design size). These
   tokens cut it into the rungs of the ladder, in order: the text takes more of
   the line (width, 0 to 0.4), the type gets smaller (0.4 to 0.7), the gaps get
   smaller (0.7 to 1). A screen's own CSS builds on them, keeping its existing
   clamp() as the design size:

     font-size: max(var(--ce-fit-floor-body), calc(clamp(...) * var(--ce-fit-k-type)));
     max-width: calc(16em + 12em * var(--ce-fit-w));
     gap:       calc(1.5rem * var(--ce-fit-k-gap));

   The tokens hang on the screen, not on :root, because a custom property that
   holds var() is worked out where it is declared. Nothing in this block may
   animate: fit.js measures the screen right after it changes a number.
   --ce-screen-gap (the room under the header) is never touched.
   ========================================================================== */
[data-ce-screen] {
	--ce-fit-w: clamp(0, var(--ce-fit, 0) / 0.4, 1);
	--ce-fit-t: clamp(0, (var(--ce-fit, 0) - 0.4) / 0.3, 1);
	--ce-fit-s: clamp(0, (var(--ce-fit, 0) - 0.7) / 0.3, 1);
	--ce-fit-k-type: calc(1 - var(--ce-fit-t) * 0.22);
	--ce-fit-k-gap: calc(1 - var(--ce-fit-s) * 0.5);

	/* The smallest type, in rem so it follows the reader's settings. */
	--ce-fit-floor-body: 1rem;
	--ce-fit-floor-small: 0.875rem;
	--ce-fit-floor-title: 1.75rem;
}

@media (max-width: 599px) {
	[data-ce-screen] {
		--ce-fit-floor-title: 1.375rem;
	}
}

/* Contact and Newsletter join the ladder from 600px wide. On a phone the form is exempt from fit (Noemi's decision,
   Step I): it scrolls, and its fields and taps keep their size. The script still gives the screen a number, so the
   rungs are held at the design size here (class and attribute, so this wins over the block above). */
@media (max-width: 599px) {
	.ce-contact-page[data-ce-screen] {
		--ce-fit-w: 0;
		--ce-fit-t: 0;
		--ce-fit-s: 0;
		--ce-fit-k-type: 1;
		--ce-fit-k-gap: 1;
	}
}

/* How much of its lean a badge in a pile keeps (assets/js/motion.js, layout()
   reads it from the badge list). A tilted card takes more height than it has,
   which on a phone is what keeps four stacked cards from fitting. 1 is the lean
   as built; on a phone it goes down with the space rung (0.7 to 1) to 0.2, so
   the cards still look tilted. It is registered, so the browser works out the
   number (the calc) and the script can read it; where @property is not known
   the script reads no number and the lean stays as built. Every screen that
   is not on the ladder has no --ce-fit, so no space rung, so 1. */
@property --ce-tilt-k {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@media (max-width: 47.99rem) {
	[data-ce-screen] {
		--ce-tilt-k: calc(1 - 0.8 * var(--ce-fit-s));
	}
}

/* Size x rung: titles, sentences and buttons on the ladder.

   Every heading, paragraph and button has its own clamp(), so a rule that scales
   "the type of a screen" has nothing to scale from. Each of them therefore keeps
   its design size next to its base rule, in two custom properties:
     --ce-fs   the font size (the clamp() it always had)
     --ce-mw   the max-width, where it has one
     --ce-mw-gain   optional: how much wider the line gets at the end of the
                    width rung (a default per kind below)
   and the rules here (the same selectors as those base rules, loaded after
   them) set font-size and max-width from them:
     width rung (--ce-fit-w):  max-width goes up by the gain
     type rung (--ce-fit-k-type): font size x 0.78 at the most, but never under
                    its floor, and never under the design size if that is already
                    smaller than the floor (so nothing is made bigger)
   Without --ce-fit (no script, a screen that fits, a screen that is not on the
   ladder) --ce-fit-w is 0 and --ce-fit-k-type is 1, so the result is the design
   size to the pixel. A rule with more weight that sets font-size or max-width
   itself (a statement line, a phone size of its own) still wins and is not
   scaled; to put it on the ladder, write its size into --ce-fs instead.
   A new kind of text joins by moving its font-size and max-width into those two
   properties in its base rule and adding its selector here.
   Gaps are not part of this: a screen sets its own, times --ce-fit-k-gap. */

/* A title: the floor is 28px, 22px on a phone. The line goes 16em to 28em. */
.ce-program__heading,
.ce-page .ce-org-facts__heading {
	max-width: calc(var(--ce-mw) + var(--ce-mw-gain, 12em) * var(--ce-fit-w, 0));
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The title of a split row has no max-width: its column is the line. Size only.
   The title of an offer screen (pages.css, the line there is the screen's text column). */
.ce-split__heading,
.ce-duo__heading,
.ce-offer__body .ce-offer__screen h2,
.ce-offer__body .ce-offer__aside h2,
.ce-offer .ce-offer__title .ce-page-title__heading,
.ce-about-screen .ce-about__heading,
#founded .ce-section__title {
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* Page heroes (.ce-first-screen): the heading has a max-width of its own. */
.ce-first-screen .ce-page-title__heading {
	max-width: calc(var(--ce-mw) + var(--ce-mw-gain, 4em) * var(--ce-fit-w, 0));
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* Home hero title: size only. white-space: nowrap stays (home.css). */
.ce-hero__title {
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The lead of a split row or a calm screen. Size only. */
.ce-page .ce-program-lead,
.ce-offer__title .ce-page-title__lead,
.ce-offer__body .ce-offer-lead,
.ce-offer__screen--schedule .ce-timeline__date,
.ce-offer__screen--schedule .ce-timeline__label,
.ce-offer__screen--schedule .ce-timeline__meta,
.ce-offer .ce-speaker__name,
.ce-offer-fact dd,
.ce-page .ce-a11y-copy,
.ce-page .ce-a11y-member__text,
.ce-page .ce-program-list li,
.ce-page .ce-program-list li:last-child,
.ce-program-pillars .ce-fact h3,
.ce-program-pillars .ce-fact p,
.ce-page .ce-program-cost__who,
.ce-page .ce-program-cost .ce-program-cost__note,
.ce-faq summary,
.ce-program-none,
.ce-program-facts .ce-offer-fact dt,
.ce-about-lead .ce-team--feature .ce-speaker__name,
.ce-page .ce-about-lead__cta {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The contact call-out (contact-cta.css, loaded before this file). Its heading is
   a title, its sentence and name are body text, its captions are secondary. */
.ce-cta .ce-cta__heading {
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

.ce-cta .ce-cta__text,
.ce-cta .ce-cta__name {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* Secondary text: the floor is 14px. */
.ce-cta .ce-cta__role,
.ce-cta .ce-cta__craft,
.ce-cta .ce-cta__note,
.ce-palette-story__card,
.ce-focus-story__note,
.ce-program-for .ce-badge,
.ce-offer .ce-offer__screen--badges .ce-badge,
.ce-page .ce-org-how:not(.ce-org-up) .ce-badges--detail .ce-badge,
.ce-about-end .ce-badge,
.ce-first-screen .ce-page-title__note,
.ce-about-lead .ce-team--feature .ce-speaker__role,
.ce-about-lead .ce-team--feature .ce-speaker__copy p:not(.ce-speaker__name, .ce-speaker__role) {
	font-size: max(min(var(--ce-fit-floor-small, 0.875rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* Home explainer hint: body floor. Design on a phone is 0.95rem (15.2px), already
   under 16px; the formula does not enlarge it. Not added to the secondary list. */
.ce-hero .ce-explain__hint {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* Home #founded (Step Q): paragraphs, hook and women* badge, size only. The
   column is the constrained layout (no --ce-mw). Phone .ce-section title/p
   font-size stays for #organisations and #everyone. */
#founded .ce-screen__body > p,
#founded .ce-women-badge {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* A sentence, a subtitle and a button: the floor is 16px. A sentence goes
   38rem to 60rem, "Topic, format and dates" 22em to 40em (its own gain). */
.ce-page .ce-program-center .ce-wrap > p,
.ce-page .ce-org-how__title,
.ce-page .ce-about-screen .ce-about__lead,
.ce-about-screen.ce-about-text .ce-wrap > :where(p),
.ce-first-screen .ce-page-title__lead,
.ce-hero .ce-lead {
	max-width: calc(var(--ce-mw) + var(--ce-mw-gain, 22rem) * var(--ce-fit-w, 0));
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

.ce-first-screen .ce-page-title__note {
	max-width: calc(var(--ce-mw) + var(--ce-mw-gain, 8em) * var(--ce-fit-w, 0));
}

/* People lines of the About inner screens only (never the hero feature). */
.ce-about-screen .ce-team .ce-speaker__name,
.ce-about-screen .ce-team .ce-speaker__role,
.ce-about-screen .ce-alumni__name strong,
.ce-about-screen .ce-alumni__role {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The statement under a calm screen is a title: the title floor (28px, 22px on a
   phone). It has more weight than the sentence rule above, so it wins there. */
.ce-page .ce-program-center .ce-wrap > .ce-program-statement {
	max-width: calc(var(--ce-mw) + var(--ce-mw-gain, 8em) * var(--ce-fit-w, 0));
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* A plain paragraph of a split row (no class of its own that sets a size): it
   has no clamp() of its own, it takes the page's text size (--ce-text,
   pages.css), so that is its design size. The selector has no weight but the p
   (:where holds the rest): any class that sets font-size, or --ce-fs, wins.
   Only the direct paragraphs of the text column: a paragraph in a wrapper that
   has a size of its own (the excerpt in .ce-page-title__lead) takes that size
   by inheritance, and a rule on every p would have made it the page size (the
   fingerprint showed it). The text column of an offer screen ("How it works") is
   the same kind: plain paragraphs that take the page's text size. */
:where(.ce-page [data-ce-screen] .ce-split__text, .ce-page [data-ce-screen] .ce-offer__screen-text, .ce-page [data-ce-screen] .ce-offer__lead-text, .ce-page [data-ce-screen] .ce-offer__aside-text, .ce-page.ce-offer [data-ce-screen] .ce-badges__copy, .ce-page.ce-offer [data-ce-screen] .ce-speaker__copy, .ce-page [data-ce-screen] .ce-faq) > p {
	--ce-fs: var(--ce-text);
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* A button: its padding is in em, so it follows the size. The space rung takes
   the block padding down, but the button stays 44px (2.75rem) high. */
.ce-page .wp-block-button__link,
.ce-hero .wp-block-button__link,
#founded .wp-block-button__link {
	padding-block: max(calc((2.75rem - 1.2em) / 2), calc(0.7em * var(--ce-fit-k-gap, 1)));
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The offer sign-up (signup.css, loaded before this file). Its sizes are in
   --ce-fs, as everywhere. The heading and the thank-you are titles (28px, 22px
   on a phone), the secondary lines are 14px (the step counter, the sticker, the
   code note, the small print, the title of the calendar links), the rest is
   body text (16px): labels, fields, buttons, cards, rows, links. Every selector
   here has a base rule in signup.css that sets --ce-fs; the label, fields and
   button of the form are scoped to .ce-signup there, so Contact and Newsletter
   (the same .ce-form classes) keep their own sizes. */
.ce-signup .ce-signup__heading,
.ce-signup .ce-signup__done-title {
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

.ce-signup .ce-signup__offer,
.ce-signup .ce-signup__facts,
.ce-signup .ce-form label,
.ce-signup .ce-signup__form :is(input[type="text"], input[type="email"], textarea),
.ce-signup .ce-form__submit,
.ce-signup .ce-signup__link,
.ce-signup__levels legend,
.ce-signup .ce-signup__card-name,
.ce-signup .ce-signup__card-price,
.ce-signup .ce-signup__total,
.ce-signup .ce-signup__total strong,
.ce-signup .ce-signup__hello,
.ce-signup .ce-signup__lead,
.ce-signup .ce-signup__row,
.ce-signup .ce-signup__consent label,
.ce-signup .ce-signup__done-text,
.ce-signup .ce-signup__cal-link {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

.ce-signup .ce-signup__places,
.ce-signup .ce-signup__step,
.ce-signup .ce-signup__note,
.ce-signup .ce-signup__done-note,
.ce-signup .ce-signup__cal-title {
	font-size: max(min(var(--ce-fit-floor-small, 0.875rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The Contact and Newsletter page (.ce-contact-page, the same screen: pages.css).
   Step I. Every selector has a base rule in pages.css that sets --ce-fs, scoped to
   .ce-contact-page, so the sign-up (the same .ce-form classes) keeps its own sizes.
   The title is a title (28px floor, 22px on a phone). */
.ce-contact-page .ce-page-title__heading {
	font-size: max(min(var(--ce-fit-floor-title, 1.75rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The lead is body text (16px floor). The column is the line, so no width rung. */
.ce-contact-page .ce-page-title__lead {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The fields of the form (16px floor, 44px to tap). The padding is in em and goes down with the space rung, but a
   field never gets under 44px (min-height). The message field shows 5 lines at the design size and 3 at the end of
   the space rung (height and not rows, the markup keeps rows="5"); it still scrolls inside and can be pulled larger. */
.ce-contact-page .ce-form :is(input[type="text"], input[type="email"], select, textarea) {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

.ce-contact-page .ce-form :is(input[type="text"], input[type="email"], select) {
	min-height: 2.75rem;
	padding-block: calc(0.8em * var(--ce-fit-k-gap, 1));
}

.ce-contact-page .ce-form textarea {
	min-height: 5rem;
	padding-block: calc(1.1em * var(--ce-fit-k-gap, 1));
	height: calc(1.3em * (5 - 2 * var(--ce-fit-s, 0)) + 2.2em * var(--ce-fit-k-gap, 1) + 4px);
}

/* The arrow of the topic select sits 1.55rem over the bottom of its row, which is the bottom of the select. When the
   select gets shorter (type and space rungs, 44px at the least) the arrow moves up by half of the difference, so it
   stays in the middle. --ce-sel-h repeats the height the rule above gives the select; at the design size both sides of
   the difference are the same number and the arrow stays where it was. */
.ce-contact-page .ce-form__row:has(> select) {
	--ce-sel-fs: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-text)), calc(var(--ce-text) * var(--ce-fit-k-type, 1)));
	--ce-sel-h: max(2.75rem, calc(var(--ce-sel-fs) * (1.3 + 1.6 * var(--ce-fit-k-gap, 1)) + 4px));
}

.ce-contact-page .ce-form__row:has(> select)::after {
	bottom: calc(1.55rem - (var(--ce-text) * 2.9 + 4px - var(--ce-sel-h)) / 2);
}

/* The send button: its padding is in em and goes down with the space rung, but the button (2px border) stays 44px
   (0.05px on top, so the line box, which is rounded down to 1/64px, never leaves it at 43.97). */
.ce-contact-page .ce-form__submit {
	padding-block: max(calc((2.75rem - 4px - 1.2em) / 2 + 0.05px), calc(0.7em * var(--ce-fit-k-gap, 1)));
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The context line: body floor. */
.ce-contact-page .ce-form__context {
	font-size: max(min(var(--ce-fit-floor-body, 1rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* Secondary text of the form (14px floor): the labels and the privacy line. Both listed by name in tests/fit/measure.js. */
.ce-contact-page .ce-form :is(label, .ce-form__privacy) {
	font-size: max(min(var(--ce-fit-floor-small, 0.875rem), var(--ce-fs)), calc(var(--ce-fs) * var(--ce-fit-k-type, 1)));
}

/* The room a phone reserves under the text for a decoration at the bottom
   (pages.css, 9rem). On the space rung it goes down to half; the shape keeps its
   place at the bottom edge and never reaches the text. */
@media (max-width: 781px) {
	.ce-page [data-ce-screen].ce-deco--bl,
	.ce-page [data-ce-screen].ce-deco--br {
		padding-bottom: calc(9rem - 4.5rem * var(--ce-fit-s, 0));
	}
}

/* Defaults for a screen that is compressed (data-ce-fit "on" or "max"; a
   screen that fits, or is left alone, is not touched). Only what every screen
   has in common and a known design size: the arrow. A screen's heading, text
   and buttons come with their own sizes, so those are scaled in the CSS of the
   screen (see above). */
@media (min-width: 600px) {
	:is([data-ce-fit="on"], [data-ce-fit="max"]) .ce-next {
		min-height: calc(4.5rem - 1.75rem * var(--ce-fit-s));
		margin-bottom: calc(clamp(1rem, 3svh, 2rem) * var(--ce-fit-k-gap));
		padding-block: calc(0.75rem - 0.25rem * var(--ce-fit-s));
	}
}

@media (max-width: 599px) {
	:is([data-ce-fit="on"], [data-ce-fit="max"]) .ce-next {
		margin-bottom: calc(clamp(0.5rem, 2svh, 1rem) * var(--ce-fit-k-gap));
	}
}

/* With the admin bar showing, the window is that much shorter than 100svh, so
   the first screen and the offer title, which sit under the bar, are too. */
body.admin-bar .ce-first-screen,
body.admin-bar .ce-offer__title {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}