/* Aunt Tea's tokens. Edited here, shipped inside the hashed sheet. */

:root {
	/* ---------- the palette · four colours, and no others ---------- */
	--tea-orange:  #E9612C;
	--tea-pink:    #FCE4F7;
	--tea-ink:     #333333;
	--tea-magenta: #CC3366;

	/* ---------- the two faces ---------- */
	--font-head: 'Cinzel', 'Times New Roman', serif;
	--font-util: 'Bellefair', Georgia, serif;

	/* ---------- reading ---------- */
	--measure: 62ch;

	/* ---------- grounds and ink ---------- */
	--ground:      var(--tea-orange);
	--cream:       var(--tea-pink);
	--satin:       var(--tea-pink);
	--lift:        var(--tea-orange);
	--focus:       var(--tea-pink);

	--top-ground:  transparent;
	--top-rule:    rgba(252, 228, 247, 0.45);

	--foot-ground: var(--tea-magenta);
	--foot-ink:    var(--tea-pink);

	--anchor-ink:   var(--tea-pink);
	--anchor-space: 0.06em;
	--door-ink:     var(--tea-pink);
	--org-ink:      var(--tea-pink);
	--live-ink:     var(--tea-pink);
	--pill-ink:     var(--tea-orange);

	/* the light carried through every section */
	--bloom:      radial-gradient(120% 80% at 50% 0%, rgba(252, 228, 247, 0.16), transparent 62%);
	--bloom-soft: radial-gradient(120% 80% at 50% 0%, rgba(252, 228, 247, 0.08), transparent 62%);
	--arrival:    radial-gradient(130% 90% at 50% 8%, rgba(252, 228, 247, 0.20), transparent 66%);

	/* ---------- the empty screen, full of possibility ---------- */
	--ma-ground: rgba(252, 228, 247, 0.10);

	/* ---------- a note ---------- */
	--note-ground: rgba(252, 228, 247, 0.12);
	--note-ink:    var(--tea-pink);

	/* ---------- a row ---------- */
	--row-ground:   rgba(252, 228, 247, 0.08);
	--row-ink:      var(--tea-pink);
	--row-ink-soft: rgba(252, 228, 247, 0.78);

	/* ---------- a number ---------- */
	--num-ground:   var(--tea-pink);
	--num-ink:      var(--tea-orange);
	--count-figure: var(--tea-pink);
	--count-ink:    var(--tea-pink);
	--count-note:   rgba(252, 228, 247, 0.75);

	/* ---------- a card ---------- */
	--card-ink:          var(--tea-ink);
	--card-title-ink:    var(--tea-magenta);
	--card-body-ink:     var(--tea-ink);
	--card-meta-ink:     var(--tea-magenta);
	--card-pay-ink:      var(--tea-magenta);
	--card-rule:         var(--tea-pink);
	--card-shadow:       0 2px 18px rgba(51, 51, 51, 0.14);
	--card-shadow-lift:  0 8px 30px rgba(51, 51, 51, 0.22);
	--surface-shadow:      0 2px 20px rgba(51, 51, 51, 0.16);
	--surface-shadow-soft: 0 1px 10px rgba(51, 51, 51, 0.10);

	/* ---------- a chip ---------- */
	--chip-ink:        var(--tea-pink);
	--chip-ink-hover:  var(--tea-orange);
	--chip-rule:       rgba(252, 228, 247, 0.55);
	--chip-rule-hover: var(--tea-pink);
	--chip-current:    var(--tea-pink);

	/* ---------- searching ---------- */
	--seek-ground:      var(--tea-pink);
	--seek-ink:         var(--tea-ink);
	--seek-placeholder: rgba(51, 51, 51, 0.55);
	--seek-rule:        var(--tea-pink);
	--seek-sheen:       0 2px 16px rgba(51, 51, 51, 0.14);
	--seek-button:      var(--tea-magenta);
	--seek-button-ink:  var(--tea-pink);

	/* ---------- an action ---------- */
	--act-ground:     var(--tea-pink);
	--act-ink:        var(--tea-magenta);
	--act-shadow:     0 3px 0 var(--tea-orange);
	--act-quiet-rule: rgba(252, 228, 247, 0.6);

	--skip-ground: var(--tea-pink);
	--skip-ink:    var(--tea-orange);

	/* ---------- a mark ---------- */
	--mark-image:  none;
	--mark-ratio:  4 / 3;
	--mark-space:  clamp(14px, 4vw, 26px);
	--mark-shadow: 0 6px 26px rgba(51, 51, 51, 0.20);

	/* ---------- the arriving page ---------- */
	--float-rise:    26px;
	--float-time:    2.6s;
	/*
	 * ONE CURVE FOR EVERYTHING THAT MOVES.
	 *
	 * Her words, 23 August: it's not smooth, not as perfect as it could be.
	 *
	 * Measured on the live page rather than guessed. A round picture was
	 * fading on cubic-bezier(0.42, 0.02, 0.22, 1) and travelling on
	 * cubic-bezier(0.36, 0.02, 0.2, 1) at the same moment — **two curves on
	 * one element**, so the picture arrived before its own fade finished and
	 * the eye caught the disagreement without being able to name it.
	 *
	 * This is now the Juice Bar's own curve, the one every travel already
	 * used, so a fade and a travel are the same gesture wherever they meet.
	 */
	--float-ease:    cubic-bezier(0.36, 0.02, 0.2, 1);
	--float-stagger: 0.30s;

	/* Aunt Tea's own: how far a piece travels sideways */
	--slide-run: 40px;

	/* ---------- the entrance, held off unless a screen asks ---------- */
	--entrance:             var(--tea-orange);
	--entrance-fade:        linear-gradient(to bottom, var(--tea-orange), rgba(233, 97, 44, 0));
	--entrance-fade-height: 120px;
	--entrance-gap:         clamp(28px, 6vw, 64px);

	/* ---------- rhythm ---------- */
	--second: 0.13s;
	--after:  0.13s;
	--later:  0.26s;
}
/* ─────────────────────────────────────────────────────────────
   THE HANDWRITING FIELD — the mechanism, stripped of Matri Pair.
   Found on The Don't Hold Back Project. Carried into Matri Pair
   20 August 2026, packaged for sharing 21 August 2026.

   Every colour and every typeface below is a placeholder. Set your own.
   ───────────────────────────────────────────────────────────── */

.hw-field {
	position: relative;
	max-width: 68rem;
	margin-inline: auto;
	padding-block: clamp(3rem, 8vh, 6rem);
	min-height: 44rem;          /* rem, never vh — see NOTES.md */
	overflow: hidden;
}

.hw-note {
	position: absolute;
	margin: 0;
	line-height: 1.34;
	text-wrap: balance;
	opacity: 0;
	will-change: transform, opacity;
	animation: hw-round 19s linear infinite both;
	animation-play-state: paused;
}

.hw-field.is-live .hw-note { animation-play-state: running; }

/* One note's whole life inside one round. It travels, it holds a long
   while, it leaves, and then it waits its turn off-screen. */
@keyframes hw-round {
	0%   { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
	4%   { opacity: 1; }
	72%  { opacity: 1; }
	82%  { opacity: 0; transform: translate3d(0, -3.5vh, 0) rotate(var(--tilt, 0deg)); }
	100% { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
}

/* Each note is placed by hand: a position, a width, a hand, a size,
   a tilt, and a delay. Negative delays mean the field is already full
   the instant somebody arrives — no empty screen waiting to fill. */
.hw-note--1 { left:  2%; top:  3%; width: min(20ch, 40vw); font-family: var(--hand-1); font-size: clamp(1.5rem, 3.1vw, 2.3rem);  --tilt: -2.4deg; animation-delay: -13s; }
.hw-note--2 { right: 3%; top: 13%; width: min(17ch, 36vw); font-family: var(--hand-2); font-size: clamp(1.25rem, 2.4vw, 1.7rem); --tilt:  1.8deg; animation-delay: -11s; }
.hw-note--3 { left: 28%; top: 27%; width: min(19ch, 38vw); font-family: var(--hand-3); font-size: clamp(1.35rem, 2.7vw, 1.95rem);--tilt: -1.2deg; animation-delay: -10s; }
.hw-note--4 { left:  4%; top: 41%; width: min(21ch, 42vw); font-family: var(--hand-4); font-size: clamp(1.2rem, 2.3vw, 1.6rem);  --tilt:  2.9deg; animation-delay:  -8s; }
.hw-note--5 { right: 5%; top: 54%; width: min(16ch, 34vw); font-family: var(--hand-5); font-size: clamp(1.6rem, 3.3vw, 2.5rem);  --tilt: -3.1deg; animation-delay:  -6s; }
.hw-note--6 { left: 24%; top: 68%; width: min(18ch, 38vw); font-family: var(--hand-1); font-size: clamp(1.4rem, 2.8vw, 2rem);    --tilt:  1.4deg; animation-delay:  -4s; }
.hw-note--7 { left:  3%; top: 82%; width: min(20ch, 40vw); font-family: var(--hand-2); font-size: clamp(1.35rem, 2.7vw, 1.9rem); --tilt: -1.8deg; animation-delay:  -2s; }
.hw-note--8 { right: 4%; top: 34%; width: min(18ch, 36vw); font-family: var(--hand-3); font-size: clamp(1.05rem, 1.9vw, 1.35rem);--tilt:  2.2deg; animation-delay:   0s; }
.hw-note--9 { right: 6%; top: 74%; width: min(19ch, 38vw); font-family: var(--hand-4); font-size: clamp(1rem, 1.8vw, 1.3rem);    --tilt: -2.6deg; animation-delay:   2s; }
.hw-note--10{ left: 30%; top: 10%; width: min(18ch, 36vw); font-family: var(--hand-5); font-size: clamp(1.3rem, 2.6vw, 1.8rem);  --tilt:  1.1deg; animation-delay:   4s; }

/* NARROW — one column, alternating sides, and a shorter hold so the
   field turns over faster when only one or two fit on screen. */
@media (max-width: 40rem) {
	.hw-field { min-height: 40rem; padding-inline: 1.1rem; }
	.hw-note  { width: auto !important; max-width: 21ch; font-size: 1.5rem !important; }

	@keyframes hw-round {
		0%   { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
		5%   { opacity: 1; }
		42%  { opacity: 1; }
		52%  { opacity: 0; transform: translate3d(0, -3.5vh, 0) rotate(var(--tilt, 0deg)); }
		100% { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
	}

	.hw-note--1 { left: 0;   right: auto; top:  4%; }
	.hw-note--2 { right: 0;  left: auto;  top: 22%; text-align: right; }
	.hw-note--3 { left: 8%;  right: auto; top: 40%; }
	.hw-note--4 { left: 0;   right: auto; top: 58%; }
	.hw-note--5 { right: 0;  left: auto;  top: 76%; text-align: right; }
	.hw-note--6 { left: 6%;  right: auto; top: 12%; }
	.hw-note--7 { left: 0;   right: auto; top: 30%; }
	.hw-note--8 { right: 0;  left: auto;  top: 48%; text-align: right; }
	.hw-note--9 { right: 2%; left: auto;  top: 66%; text-align: right; }
	.hw-note--10{ left: 4%;  right: auto; top: 84%; }

	.hw-note { --tilt: -1deg; }
	.hw-note--2, .hw-note--4, .hw-note--6, .hw-note--8, .hw-note--10 { --tilt: 1deg; }
}

/* A LAPTOP IS NOT A STRETCHED PHONE — the notes get much larger,
   because the field is the page rather than a strip inside it. */
@media (min-width: 900px) {
	.hw-field { min-height: 46rem; max-width: 100%; padding-inline: clamp(30px, 4vw, 70px); }
	.hw-note  { font-size: clamp(2rem, 2.6vw, 3.1rem) !important; }
}

/* Somebody who asked for less motion gets them all at once, and still. */
@media (prefers-reduced-motion: reduce) {
	.hw-note {
		animation: none; opacity: 1; position: static;
		transform: rotate(var(--tilt, 0deg));
		width: auto; max-width: 24ch; margin: 0 0 1.4rem; font-size: 1.4rem;
	}
	.hw-field { min-height: 0; overflow: visible; }
}
/*
 * Aunt Tea's taste.
 *
 * Taken from Paige's own site, value for value. Bellefair carries the
 * headings in sentence case with no tracking; Cinzel appears only on the
 * three. Orange on the pink and pink on the orange, and nothing else.
 *
 * Sizes lead from the narrow end. Everything here is checked at 379px first.
 */

/* =========================================================
   TYPE
   ========================================================= */

body { color: var(--tea-pink); }

h1, h2, h3, .head {
	font-family: var(--font-util);   /* Bellefair */
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 0.45em;
}

/*
 * The hero.
 *
 * Bold with weight, and never raised. Bellefair ships one light weight, so
 * weight had to come from the face rather than a bolder cut of the same
 * one — Calistoga carries it warmly, in sentence case, and it is already
 * one of the four. Toned in from 55 so it sits rather than shouts.
 */
.at-vast {
	font-family: 'Calistoga', Georgia, serif;
	font-weight: 400;
	font-size: clamp(28px, 8.8vw, 46px);
	line-height: 1.16;
	letter-spacing: -0.005em;
	text-align: center;
	margin: 0 auto 0.55em;
	max-width: 18ch;
}

/* The big statements: 75 to 80 on her page. */
.at-grand {
	font-family: var(--font-util);
	font-size: clamp(52px, 19vw, 80px);
	line-height: 1.2;
	text-align: left;
	margin: 0 0 0.35em;
}

/* The turn of the page: 58 on 85, centred. */
.at-turn {
	font-family: var(--font-util);
	font-size: clamp(40px, 15vw, 58px);
	line-height: 1.45;
	text-align: center;
	margin: 0 0 0.6em;
}

/* The three: Cinzel, 35 on 42, left. */
.at-card-title {
	font-family: var(--font-head);   /* Cinzel */
	font-weight: 400;
	font-size: clamp(27px, 8vw, 35px);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	margin: 0 0 0.4em;
}

p, li {
	font-family: var(--font-util);
	font-size: clamp(18px, 4.6vw, 21px);
	line-height: 1.5;
	max-width: var(--measure);
}

.at-lede {
	font-size: clamp(19px, 5vw, 24px);
	line-height: 1.45;
	text-align: center;
	max-width: 30ch;
	margin: 0 auto 1.4em;
}

/* =========================================================
   THE GROUNDS
   Orange on the pink, and pink on the orange.
   ========================================================= */

.at-on-orange { background: var(--tea-orange); color: var(--tea-pink); }
.at-on-pink   { background: var(--tea-pink);   color: var(--tea-orange); }

.at-on-orange h1, .at-on-orange h2, .at-on-orange h3,
.at-on-orange p,  .at-on-orange li  { color: var(--tea-pink); }

.at-on-pink h1, .at-on-pink h2, .at-on-pink h3,
.at-on-pink p,  .at-on-pink li  { color: var(--tea-orange); }

.in { max-width: 1180px; margin: 0 auto; }

/* =========================================================
   THE CURVED PICTURES
   ========================================================= */

.at-mark { display: block; }

.at-mark img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* The hero: the full oval, with the double keyline. */
.at-hero { text-align: center; }
.at-hero .in { max-width: 900px; }

/*
 * The frame.
 *
 * `8px double` hands the browser the two line weights and the gap between
 * them, which is how it came out thick and uneven with no air in it. These
 * are two rings drawn separately, so the weight and the space are chosen
 * rather than inherited — and they are pink, because pink is what goes on
 * the orange.
 */
.at-hero-mark {
	position: relative;
	margin: clamp(20px, 4vw, 34px) auto clamp(26px, 5vw, 42px);
	max-width: 760px;
	width: 100%;
	padding: var(--ring-space, 26px);
}

.at-hero-mark img {
	border-radius: 9999px;
	border: 0;
	aspect-ratio: 16 / 9;
}

/* the ring nearest the picture */
.at-hero-mark::after {
	content: '';
	position: absolute;
	inset: calc(var(--ring-space, 26px) / 2);
	border: 1.5px solid var(--tea-pink);
	border-radius: 9999px;
	pointer-events: none;
}

/* the ring holding it all */
.at-hero-mark::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--tea-pink);
	border-radius: 9999px;
	pointer-events: none;
	opacity: 0.62;
}

.at-hero-mark { --ring-space: clamp(10px, 3vw, 20px); }

/* On a pink ground the rings turn orange, so the pairing always holds. */
.at-on-pink .at-hero-mark::before,
.at-on-pink .at-hero-mark::after { border-color: var(--tea-orange); }

/* The three: softly rounded. */
.at-card .at-mark img {
	border-radius: 12px;
	aspect-ratio: 3 / 4;
}

/* =========================================================
   THE ACTIONS
   ========================================================= */

.at-acts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}

.at-act {
	display: block;
	width: 100%;
	max-width: 330px;
	padding: 16px 30px;
	background: var(--tea-pink);
	color: var(--tea-magenta);
	font-family: var(--font-util);
	font-size: 19px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	border-radius: 2px;
	transition: background 0.25s ease, color 0.25s ease;
}

.at-act:hover,
.at-act:focus { background: #FFFFFF; color: var(--tea-orange); }

.at-on-pink .at-act { background: var(--tea-orange); color: var(--tea-pink); }
.at-on-pink .at-act:hover,
.at-on-pink .at-act:focus { background: var(--tea-magenta); color: var(--tea-pink); }

@media (min-width: 620px) {
	.at-acts { flex-direction: row; justify-content: center; }
	.at-act { width: auto; }
}

/* =========================================================
   THE THREE, COMING OUT FROM BEHIND THE MIDDLE
   Aunt Tea Parties holds still. Aunts and Darlings begin
   stacked behind her and travel out to their places.
   ========================================================= */

.at-three {
	display: grid;
	gap: clamp(30px, 5vw, 44px);
	align-items: start;
	--out-run: 62%;
}

.at-card { position: relative; }
.at-card .at-mark { margin-bottom: clamp(16px, 3vw, 24px); }
.at-card p { margin: 0; max-width: none; }

.at-card--mid { z-index: 2; }
.at-card--out { z-index: 1; }

.js-three .at-card--out {
	opacity: 0;
	transition:
		opacity 0.55s ease,
		transform 1.05s cubic-bezier(0.18, 0.78, 0.22, 1);
	transition-delay: 0.16s;
}

.js-three .at-card--left  { transform: translateX(var(--out-run)) scale(0.86); }
.js-three .at-card--right { transform: translateX(calc(var(--out-run) * -1)) scale(0.86); }

.js-three .at-card--mid {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.7s var(--float-ease);
}

.js-three .at-three.is-in .at-card--out.is-in,
.js-three .at-three.is-in .at-card--out { opacity: 1; transform: translateX(0) scale(1); }
.js-three .at-three.is-in .at-card--mid.is-in,
.js-three .at-three.is-in .at-card--mid { opacity: 1; transform: none; }

/* The group is marked only so the watcher sees it. The cards do the moving. */
/* Stacked, a card shows itself once it has arrived. */
/* the reveal is an animation now; see THE THREE, THE JUICE BAR WAY */

@media (min-width: 900px) {
	.at-three {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(24px, 3vw, 46px);
		--out-run: 104%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-float .at-card--out,
	.js-three .at-card--mid {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =========================================================
   THE WRITING
   ========================================================= */

.at-prose { max-width: var(--measure); margin: 0 auto; }
.at-prose p { margin: 0 0 1.1em; }
.at-prose p:last-child { margin-bottom: 0; }

/* Bellefair ships one weight, so a bold hands the browser a synthetic face
   that arrives looking like a different typeface altogether. */
.at-prose strong,
.body strong { font-weight: 400; color: var(--tea-magenta); }

/* =========================================================
   THE FOOT
   ========================================================= */

.foot {
	background: var(--tea-orange);
	color: var(--tea-pink);
	text-align: center;
	padding: 34px 20px;
	font-family: var(--font-util);
	font-size: 18px;
}


/* =========================================================
   THE PANEL
   The pale pink block sitting on the orange, and it is the
   move that makes the page. 30px corners, generous room
   inside, and everything in it reads orange.
   ========================================================= */

.at-panel-holder { padding-left: clamp(10px, 3vw, 40px); padding-right: clamp(10px, 3vw, 40px); }

.at-panel {
	background: var(--tea-pink);
	border-radius: 30px;
	padding: clamp(34px, 8vw, 76px) clamp(22px, 6vw, 60px);
	text-align: center;
}

.at-panel h2,
.at-panel p,
.at-panel .at-first { color: var(--tea-orange); }

.at-panel .at-turn { margin-bottom: 0.35em; }

/* Cinzel, 20px, centred — her line under the heading. */
.at-saucy {
	font-family: var(--font-head);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.45;
	text-align: center;
	max-width: 34ch;
	margin: 0 auto clamp(28px, 6vw, 44px);
}

.at-panel .at-prose { text-align: left; margin: 0 auto; }

.at-panel .at-first {
	font-family: var(--font-util);
	font-size: clamp(23px, 6vw, 34px);
	line-height: 1.3;
	margin-bottom: 0.9em;
}

/* =========================================================
   THE DIARY
   The gatherings still to come. A date to the left, the
   evening in the middle, and the way in on the right.
   ========================================================= */

.at-gatherings .at-grand { text-align: center; }

.at-diary {
	display: grid;
	gap: clamp(16px, 3vw, 22px);
	margin-top: clamp(28px, 6vw, 44px);
}

.at-diary-one {
	display: grid;
	gap: clamp(14px, 3vw, 20px);
	align-items: center;
	background: var(--tea-pink);
	border-radius: 30px;
	padding: clamp(24px, 5vw, 34px);
	text-align: center;
}

.at-diary-when {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.at-diary-date {
	font-family: var(--font-util);
	font-size: clamp(46px, 13vw, 68px);
	color: var(--tea-orange);
	line-height: 1;
}

.at-diary-month {
	font-family: var(--font-head);
	font-size: clamp(14px, 3.6vw, 17px);
	color: var(--tea-orange);
	margin-top: 4px;
}

.at-diary-title {
	font-family: var(--font-head);
	font-size: clamp(21px, 5.4vw, 27px);
	line-height: 1.25;
	color: var(--tea-orange);
	margin: 0 0 0.35em;
}

.at-diary-meta,
.at-diary-kind,
.at-diary-left {
	font-family: var(--font-util);
	color: var(--tea-orange);
	margin: 0;
	max-width: none;
}

.at-diary-meta { font-size: clamp(16px, 4.2vw, 19px); }
.at-diary-kind { font-size: clamp(15px, 4vw, 18px); opacity: 0.82; margin-top: 0.25em; }

.at-diary-take .at-act {
	background: var(--tea-orange);
	color: var(--tea-pink);
	margin: 0 auto 10px;
}

.at-diary-take .at-act:hover,
.at-diary-take .at-act:focus { background: var(--tea-magenta); color: var(--tea-pink); }

.at-diary-left { font-size: clamp(14px, 3.6vw, 16px); opacity: 0.85; }

@media (min-width: 800px) {
	.at-diary-one {
		grid-template-columns: 110px 1fr auto;
		text-align: left;
		gap: clamp(20px, 3vw, 38px);
	}
	.at-diary-take { text-align: right; }
	.at-diary-take .at-act { margin: 0 0 10px auto; }
}

/* MA — the space before, and full of possibility. */
.at-ma {
	margin-top: clamp(28px, 6vw, 44px);
	background: var(--tea-pink);
	border-radius: 30px;
	padding: clamp(30px, 7vw, 56px) clamp(22px, 6vw, 48px);
	text-align: center;
}

.at-ma p { color: var(--tea-orange); margin: 0 auto 1em; max-width: 40ch; }

.at-ma-line {
	font-family: var(--font-util);
	font-size: clamp(23px, 6vw, 32px);
	line-height: 1.3;
}

.at-ma .at-act { background: var(--tea-orange); color: var(--tea-pink); margin: 6px auto 0; }

/* =========================================================
   WHAT IT COSTS
   ========================================================= */

.at-costs {
	display: grid;
	gap: clamp(18px, 3.5vw, 26px);
	margin: clamp(24px, 5vw, 38px) 0 clamp(28px, 6vw, 44px);
	text-align: left;
}

.at-cost {
	border-top: 1.5px solid var(--tea-orange);
	padding-top: clamp(12px, 2.5vw, 18px);
}

.at-cost-what {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(16px, 4vw, 19px);
	color: var(--tea-orange);
}

.at-cost-sum {
	display: block;
	font-family: var(--font-util);
	font-size: clamp(28px, 7.5vw, 40px);
	line-height: 1.15;
	color: var(--tea-orange);
	margin: 0.12em 0 0.2em;
}

.at-cost-note {
	font-size: clamp(15px, 4vw, 17px);
	color: var(--tea-orange);
	opacity: 0.88;
	margin: 0;
	max-width: 46ch;
}

@media (min-width: 760px) {
	.at-costs { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
}

.at-founding {
	border-top: 1.5px solid var(--tea-orange);
	padding-top: clamp(20px, 4vw, 30px);
	text-align: left;
}

.at-founding-head {
	font-family: var(--font-head);
	font-size: clamp(18px, 4.6vw, 23px);
	color: var(--tea-orange);
	margin: 0 0 0.5em;
}

.at-founding p { color: var(--tea-orange); margin: 0 0 0.9em; }
.at-founding p:last-child { margin-bottom: 0; }

/* =========================================================
   WHAT SHE RECEIVES
   ========================================================= */

.at-points {
	list-style: none;
	margin: clamp(22px, 5vw, 34px) auto 0;
	padding: 0;
	max-width: var(--measure);
	display: grid;
	gap: clamp(14px, 3vw, 20px);
}

.at-points li {
	position: relative;
	padding-left: 30px;
	font-size: clamp(18px, 4.6vw, 21px);
	line-height: 1.5;
	color: var(--tea-orange);
	max-width: none;
}

.at-points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 14px;
	height: 1.5px;
	background: var(--tea-orange);
}

.at-rise-top .at-lede { max-width: 34ch; }


/* Two pale pink sections meeting read as one, so the join loses its seam. */
.at-purpose { padding-bottom: clamp(10px, 2vw, 18px); }
.at-purpose + .at-on-pink { padding-top: clamp(10px, 2vw, 18px); }


/* Two sections on the same ground meeting: the second keeps the ground and
   drops the light, so the join stops showing as a band. */
.at-on-orange + .at-on-orange::before,
.at-on-pink   + .at-on-pink::before { background: none; }


/* =========================================================
   HER FACES, WHERE SHE PUTS THEM
   Bellefair on the headings. Cinzel on the three and on the
   line under the panel. Calistoga on the three's writing.
   Cardo on the long paragraphs.
   ========================================================= */

.at-card-copy {
	font-family: 'Calistoga', Georgia, serif;
	font-size: clamp(16px, 4.2vw, 17px);
	line-height: 1.55;
	text-align: center;
	max-width: none;
	margin: 0;
}

.at-body p {
	font-family: 'Cardo', Georgia, serif;
	font-size: clamp(17px, 4.4vw, 18px);
	line-height: 1.6;
	max-width: var(--measure);
	margin: 0 0 1.05em;
}

.at-body p:last-child { margin-bottom: 0; }

/* =========================================================
   THE TWO STATEMENTS
   A round picture beside a large title and the writing.
   ========================================================= */

.at-statement-in {
	display: grid;
	gap: clamp(26px, 5vw, 48px);
	align-items: start;
}

.at-round img {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 9999px;
	border: 10px solid var(--tea-pink);
}

.at-on-pink .at-round img { border-color: var(--tea-orange); }

.at-grand--pink { color: var(--tea-orange); }

@media (min-width: 900px) {
	.at-statement-in { grid-template-columns: 380px 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
	.at-statement-in--flip .at-round { order: 2; }
}

/* The gatherings sit inside the panel, so the diary loses its own ground. */
.at-gatherings .at-diary-one { background: transparent; border-radius: 0; border-top: 1.5px solid var(--tea-orange); padding: clamp(18px, 4vw, 26px) 0 0; }
.at-gatherings .at-diary { margin-top: clamp(20px, 4vw, 30px); }
.at-gatherings .at-acts { margin-top: clamp(18px, 4vw, 26px); }

/* =========================================================
   DRAMA
   Three moves, taken off the Juice Bar: the picture breaks
   the column and runs to the edges, the oval is extreme
   rather than polite, and everything travels far enough to
   be felt.
   ========================================================= */

/* ---------- the hero oval, edge to edge ---------- */

.at-hero .in { max-width: none; }

.at-hero-mark {
	max-width: none;
	width: calc(100% + 2 * clamp(18px, 5vw, 72px));
	margin-left: calc(-1 * clamp(18px, 5vw, 72px));
	margin-right: calc(-1 * clamp(18px, 5vw, 72px));
	padding: clamp(8px, 2.4vw, 16px);
}

.at-hero-mark img {
	aspect-ratio: 5 / 3;
	border-radius: 50%;
}

.at-hero-mark::before,
.at-hero-mark::after { border-radius: 50%; }
.at-hero-mark::after { inset: clamp(4px, 1.2vw, 8px); }

@media (min-width: 900px) {
	.at-hero-mark img { aspect-ratio: 12 / 5; }
}

/* the heading and the words keep the reading column */
.at-hero .at-vast,
.at-hero .at-acts { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---------- the round pictures stay circles, the way you had them ---------- */

.at-round img {
	width: min(100%, 300px);
	max-width: 300px;
	aspect-ratio: 1 / 1;
	border-radius: 9999px;
	border-width: 10px;
	margin: 0 auto;
}

/* ---------- everything travels far enough to be felt ---------- */

.js-float .float--from-left  { transform: translateX(calc(var(--slide-run) * -1)); }
.js-float .float--from-right { transform: translateX(var(--slide-run)); }
.js-float .float--from-left.is-in,
.js-float .float--from-right.is-in { transform: none; }

/* the panel arrives with a little swell, the way a room fills */
.js-float .at-panel { transform: translateY(var(--float-rise)) scale(0.965); }
.js-float .at-panel.is-in { transform: none; }

/* The actions keep their weight beside a full-width oval. */
.at-acts { width: 100%; }
.at-act { flex: 0 0 auto; width: min(100%, 330px); }

/* The heading hands straight to the picture, the way the Juice Bar does. */
.at-hero .at-vast { margin-bottom: 0.28em; }
.at-hero-mark { margin-top: clamp(14px, 3vw, 26px); margin-bottom: clamp(22px, 4.5vw, 36px); }

/* =========================================================
   THE THREE, CENTRED AND LARGER
   ========================================================= */

.at-card-title { text-align: center; }
.at-card-copy  { text-align: center; }

.at-card .at-mark img { aspect-ratio: 4 / 5; }

@media (max-width: 899px) {
	/* stacked, each picture runs the full column */
	.at-card .at-mark img { aspect-ratio: 5 / 6; }
}

/* =========================================================
   THE TEA PARTY BAND
   Edge to edge, and the widest thing on the page — because
   the tea party is where it all begins.
   ========================================================= */

.at-band { padding-left: 0; padding-right: 0; }
.at-band .in { padding-left: clamp(18px, 5vw, 72px); padding-right: clamp(18px, 5vw, 72px); }

.at-band-mark {
	margin: clamp(24px, 5vw, 44px) 0 clamp(26px, 5vw, 42px);
	width: 100%;
}

.at-band-mark img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 42%;
}

@media (min-width: 760px) {
	.at-band-mark img { aspect-ratio: 21 / 9; }
}

.at-band .at-saucy { margin-bottom: 0; }

/* The band earns its size by losing the air around it. */
.at-band { padding-top: clamp(34px, 6vw, 70px); padding-bottom: clamp(30px, 5vw, 60px); }
.at-band .at-turn { margin-bottom: 0.3em; }
.at-band-mark { margin: clamp(18px, 3.5vw, 32px) 0 clamp(20px, 4vw, 34px); }
.at-band-mark img { aspect-ratio: 3 / 2; }

@media (min-width: 760px) {
	.at-band-mark img { aspect-ratio: 21 / 9; }
}

/* =========================================================
   THE OPENING
   Two lines, every screen. The picture carries the page.
   ========================================================= */

.at-vast {
	font-size: clamp(44px, 13vw, 96px);
	line-height: 1.04;
	max-width: none;
	margin-bottom: 0.24em;
}

.at-hero .at-lede {
	font-size: clamp(17px, 4.4vw, 24px);
	max-width: 34ch;
	margin-bottom: clamp(16px, 3vw, 26px);
}

/* the picture, as big as the screen will give */
.at-hero-mark img { aspect-ratio: 4 / 3; }

@media (min-width: 700px)  { .at-hero-mark img { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .at-hero-mark img { aspect-ratio: 2 / 1; } }

/* both actions side by side at every width */
.at-acts { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; }
.at-act  { width: auto; flex: 1 1 auto; min-width: 0; max-width: 320px; padding: 15px 22px; }

@media (max-width: 420px) {
	.at-act { font-size: 16px; padding: 14px 12px; }
}

/* =========================================================
   THE RINGS FIT THE PICTURE
   Drawn as spread shadows on the picture itself, so they
   follow its own curve exactly — whatever shape it is.
   An ellipse offset by a constant is not an ellipse, which
   is why insetting a box could never fit it.
   ========================================================= */

.at-hero-mark { padding: 0; }
.at-hero-mark::before,
.at-hero-mark::after { content: none; }

.at-hero-mark img {
	--ring: 1.5px;
	--gap: clamp(7px, 1.9vw, 13px);
	box-shadow:
		0 0 0 var(--gap) var(--tea-orange),
		0 0 0 calc(var(--gap) + var(--ring)) var(--tea-pink),
		0 0 0 calc(var(--gap) * 2 + var(--ring)) var(--tea-orange),
		0 0 0 calc(var(--gap) * 2 + var(--ring) * 2) rgba(252, 228, 247, 0.62);
}

/* room for the rings to sit inside the section */
.at-hero-mark { margin-left: auto; margin-right: auto; width: calc(100% - clamp(34px, 9vw, 60px)); }

.at-on-pink .at-hero-mark img {
	box-shadow:
		0 0 0 var(--gap) var(--tea-pink),
		0 0 0 calc(var(--gap) + var(--ring)) var(--tea-orange),
		0 0 0 calc(var(--gap) * 2 + var(--ring)) var(--tea-pink),
		0 0 0 calc(var(--gap) * 2 + var(--ring) * 2) rgba(233, 97, 44, 0.62);
}

/* =========================================================
   THE STEPS BETWEEN SIZES
   A large heading over small everything is a shout followed
   by a whisper. The steps close up.
   ========================================================= */

.at-vast { font-size: clamp(34px, 10.5vw, 62px); }

.at-hero .at-lede {
	font-size: clamp(19px, 5vw, 27px);
	max-width: 30ch;
	margin-bottom: clamp(18px, 3.5vw, 30px);
}

.at-act { font-size: clamp(17px, 4.4vw, 21px); padding: 17px 26px; }

.at-card-copy { font-size: clamp(17px, 4.4vw, 19px); }
.at-body p    { font-size: clamp(18px, 4.6vw, 20px); }
.at-saucy     { font-size: clamp(18px, 4.6vw, 22px); }

/* =========================================================
   HER WEIGHT, HER BUTTONS
   Measured off aunttea.com.au rather than guessed. Bellefair
   ships one cut, so the weight on her page is the browser
   thickening the face at 600 and 700 — the same instruction
   here gives the same look.
   ========================================================= */

:root { --tea-raspberry: #CE1F4D; }

.at-turn,
.at-hero .at-lede { font-weight: 400; }

.at-grand { font-weight: 400; }

.at-card-title,
.at-saucy { font-weight: 600; }

/* The opening: one voice, not a heading with a whisper after it. */
.at-vast { font-size: clamp(30px, 8.6vw, 58px); }

.at-hero .at-lede {
	font-family: var(--font-util);
	font-size: clamp(21px, 5.6vw, 40px);
	line-height: 1.2;
	max-width: 22ch;
	margin-bottom: clamp(20px, 3.6vw, 32px);
}

/* =========================================================
   THE BUTTONS
   Narrower, taller, and alive to the hand. Orange carrying
   pale pink, raspberry the moment she reaches for it.
   ========================================================= */

.at-act {
	max-width: 260px;
	padding: 20px 22px;
	flex: 0 1 auto;
	border: 1.5px solid var(--tea-pink);
	background: var(--tea-orange);
	color: var(--tea-pink);
	transition: background 0.25s ease, border-color 0.25s ease,
		color 0.25s ease, transform 0.25s var(--float-ease, ease);
	will-change: transform;
}

.at-act:hover,
.at-act:focus-visible {
	background: var(--tea-raspberry);
	border-color: var(--tea-raspberry);
	color: var(--tea-pink);
	transform: scale(1.035);
}

.at-on-pink .at-act,
.at-diary-take .at-act,
.at-ma .at-act {
	background: var(--tea-orange);
	border-color: var(--tea-orange);
	color: var(--tea-pink);
}

.at-on-pink .at-act:hover,
.at-on-pink .at-act:focus-visible,
.at-diary-take .at-act:hover,
.at-diary-take .at-act:focus-visible {
	background: var(--tea-raspberry);
	border-color: var(--tea-raspberry);
	color: var(--tea-pink);
}

@media (max-width: 420px) {
	.at-act { font-size: 16px; padding: 18px 14px; max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
	.at-act:hover,
	.at-act:focus-visible { transform: none; }
}

/* =========================================================
   THE TABLE
   The view walks; the table holds still. One pass takes 140
   seconds and the scene drifts in and out over 96, so the two
   never land together twice. Negative delays, so it began
   before anybody arrived.
   ========================================================= */

.at-world {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #2A1A14;
	--walk: 140s;
	--breathe: 96s;
}

.at-world-walk {
	position: absolute;
	inset: -8% -10%;
	animation: at-walk var(--walk) ease-in-out infinite alternate;
	animation-delay: calc(var(--walk) * -0.37);
}

.at-world-breathe {
	position: absolute;
	inset: 0;
	animation: at-breathe var(--breathe) ease-in-out infinite alternate;
	animation-delay: calc(var(--breathe) * -0.61);
}

.at-world-breathe img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes at-walk {
	from { transform: translate3d(-3.2%, 0, 0); }
	to   { transform: translate3d( 3.2%, 0, 0); }
}

@keyframes at-breathe {
	from { transform: scale(1.06); }
	to   { transform: scale(1.13); }
}

/* the hour, and the ground that lets type live on a photograph */
.at-world-hour {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% 108%, rgba(233, 97, 44, 0.34) 0%, rgba(233, 97, 44, 0) 62%),
		linear-gradient(180deg, rgba(42, 26, 20, 0.62) 0%, rgba(42, 26, 20, 0.14) 38%, rgba(42, 26, 20, 0.72) 100%);
}

/* the steam, drawn rather than filmed, so it never stops */
.at-steam { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.at-steam i {
	position: absolute;
	bottom: 14%;
	display: block;
	width: clamp(46px, 11vw, 88px);
	height: clamp(150px, 34vw, 280px);
	border-radius: 50% 50% 46% 46%;
	background: linear-gradient(180deg,
		rgba(255, 253, 251, 0.42) 0%,
		rgba(255, 253, 251, 0.16) 42%,
		rgba(255, 253, 251, 0) 100%);
	filter: blur(13px);
	opacity: 0;
	animation: at-steam 11s linear infinite;
}

.at-steam i:nth-child(1) { left: 16%; animation-duration: 12s; animation-delay: -3s; }
.at-steam i:nth-child(2) { left: 37%; animation-duration: 14s; animation-delay: -8s; bottom: 19%; }
.at-steam i:nth-child(3) { left: 54%; animation-duration: 10s; animation-delay: -5s; bottom: 11%; }
.at-steam i:nth-child(4) { left: 72%; animation-duration: 13s; animation-delay: -1s; bottom: 17%; }
.at-steam i:nth-child(5) { left: 88%; animation-duration: 11s; animation-delay: -6.5s; bottom: 13%; }

@keyframes at-steam {
	0%   { opacity: 0;    transform: translate3d(0, 26px, 0) scaleX(0.72); }
	18%  { opacity: 0.85; }
	55%  { transform: translate3d(16px, -96px, 0) scaleX(1.05); }
	100% { opacity: 0;    transform: translate3d(-10px, -210px, 0) scaleX(1.5); }
}

/* what travels through the world */
.at-through { position: relative; z-index: 2; }

.at-room {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14vh 20px;
	max-width: 379px;
	margin: 0 auto;
	text-align: center;
}

@media (min-width: 900px) {
	.at-room { max-width: 820px; padding: 16vh 40px; }
}

.at-said {
	font-family: 'Calistoga', Georgia, serif;
	font-weight: 400;
	font-size: clamp(34px, 10vw, 72px);
	line-height: 1.1;
	color: var(--tea-pink);
	margin: 0 0 0.34em;
	text-shadow: 0 2px 30px rgba(42, 26, 20, 0.55);
}

.at-under {
	font-family: var(--font-util);
	font-weight: 600;
	font-size: clamp(20px, 5.4vw, 32px);
	line-height: 1.28;
	color: var(--tea-pink);
	margin: 0 auto;
	max-width: 24ch;
	text-shadow: 0 2px 22px rgba(42, 26, 20, 0.6);
}

/* the one waiting place, with her name in her own hand */
.at-setting {
	display: inline-block;
	margin: clamp(26px, 6vw, 44px) auto 0;
	background: rgba(255, 253, 251, 0.94);
	color: var(--tea-orange);
	padding: 22px 30px 20px;
	border-radius: 2px;
	box-shadow: 0 18px 44px rgba(42, 26, 20, 0.42);
}

.at-setting b {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.at-setting span {
	display: block;
	font-family: 'Allura', cursive;
	font-size: clamp(30px, 8vw, 42px);
	line-height: 1.1;
	color: var(--tea-raspberry);
}

.at-room .at-act { margin-top: clamp(24px, 5vw, 34px); }

/* the tall picture takes the narrow pane, the wide one takes a desk */
.at-world-breathe img.at-world-tall { display: none; }

@media (max-aspect-ratio: 1 / 1) {
	.at-world-breathe img.at-world-wide { display: none; }
	.at-world-breathe img.at-world-tall { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.at-world-walk,
	.at-world-breathe { animation: none; }
	.at-steam i { animation: none; opacity: 0.34; transform: translate3d(0, -60px, 0); }
}

/* =========================================================
   WHAT SHE NAMED, 20 AUGUST
   The rubbed-out look was two faults stacking: the parent
   thins every stroke, and Bellefair ships one cut, so asking
   it for 600 makes the browser smear a fake bold. Together
   they eat the middle out of a letter on the orange.
   ========================================================= */

html { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

/* The opening, in one voice. The second line is the rest of
   the sentence rather than a caption under it. */
.at-vast { font-size: clamp(26px, 7.4vw, 54px); }

.at-hero .at-lede {
	font-family: 'Calistoga', Georgia, serif;
	font-weight: 400;
	font-size: clamp(19px, 5.4vw, 38px);
	line-height: 1.22;
	max-width: 20ch;
	margin-bottom: clamp(20px, 3.6vw, 32px);
}

/* The statement stays a statement, and comes down a little. */
.at-turn { font-size: clamp(32px, 11.5vw, 52px); line-height: 1.3; }

/* =========================================================
   THE OVAL
   Longer than it was. An ellipse rather than a circle.
   ========================================================= */

.at-hero-mark img { aspect-ratio: 3 / 2; }

@media (min-width: 700px)  { .at-hero-mark img { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .at-hero-mark img { aspect-ratio: 2.2 / 1; } }

/* =========================================================
   HER BUTTONS, PINK AGAIN
   Pink on the orange, as they always were, with the raspberry
   arriving under her hand.
   ========================================================= */

.at-act {
	background: var(--tea-pink);
	border-color: var(--tea-pink);
	color: var(--tea-raspberry);
}

.at-act:hover,
.at-act:focus-visible {
	background: var(--tea-raspberry);
	border-color: var(--tea-raspberry);
	color: var(--tea-pink);
	transform: scale(1.035);
}

/* =========================================================
   ONE HEADING
   It was never a heading with a line under it. It is one
   sentence, one size, one face, the way she wrote it.
   ========================================================= */

.at-vast {
	font-size: clamp(24px, 6.6vw, 44px);
	line-height: 1.18;
	max-width: 24ch;
	margin: 0 auto clamp(20px, 4vw, 34px);
}

/* =========================================================
   NOBODY GETS CUT OFF
   Every frame now takes the shape of the photograph inside
   it, so the whole of a woman is on the page. The circle was
   taking 46 per cent off a portrait's height, and the hero
   frame was taking 19 per cent off its sides.
   ========================================================= */

.at-hero-mark img { aspect-ratio: 1200 / 650; }

@media (min-width: 700px)  { .at-hero-mark img { aspect-ratio: 1200 / 650; } }
@media (min-width: 1100px) { .at-hero-mark img { aspect-ratio: 1200 / 650; } }

.at-round img { aspect-ratio: 650 / 1200; }

@media (min-width: 760px) {
	.at-round img { aspect-ratio: 650 / 1200; width: min(100%, 340px); max-width: 340px; }
}

/* =========================================================
   THE ACTIONS, PLACED THE WAY SHE HAD THEM
   One under the other on a phone, at a proper width, with air
   between them. Side by side only when there is room.
   ========================================================= */

.at-acts {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	flex-wrap: nowrap;
}

.at-act {
	width: 100%;
	max-width: 330px;
	flex: 0 0 auto;
	padding: 18px 30px;
	font-size: clamp(17px, 4.4vw, 20px);
}

@media (min-width: 620px) {
	.at-acts { flex-direction: row; justify-content: center; gap: 18px; }
	.at-act  { width: auto; min-width: 230px; }
}

@media (max-width: 420px) {
	.at-act { font-size: 17px; padding: 18px 24px; max-width: 300px; }
}

/* =========================================================
   THE THREE, ARRIVING ONE AT A TIME
   Stacked, the group was carrying the reveal, so all three
   were already out the moment the group was marked and the
   travel was never seen. A card now shows itself, and only
   itself. Side by side, the group still leads, because the
   middle holding still while the outer two come out from
   behind her only reads when all three are in view together.
   ========================================================= */

@media (max-width: 899px) {

	/* A card that has not arrived keeps its place behind the middle. */
	.js-three .at-three.is-in .at-card--left:not(.is-in) {
		opacity: 0;
		transform: translateX(var(--out-run)) scale(0.86);
	}

	.js-three .at-three.is-in .at-card--right:not(.is-in) {
		opacity: 0;
		transform: translateX(calc(var(--out-run) * -1)) scale(0.86);
	}

	.js-three .at-three.is-in .at-card--mid:not(.is-in) {
		opacity: 0;
		transform: translateY(14px);
	}

	/* And it arrives on its own, when she reaches it. */
	.js-three .at-three .at-card--out.is-in {
		opacity: 1;
		transform: translateX(0) scale(1);
	}

	.js-three .at-three .at-card--mid.is-in {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   SLOWER THAN ANYTHING ELSE
   Paige, 20 August: movement that juts out reads as danger.
   So nothing on this site launches. Every piece starts from
   rest, travels a short way, and settles for a long time.
   Distance is halved, the curve begins almost still, and the
   travel takes two and a half times as long as it did.
   ========================================================= */

.at-three { --out-run: 34%; }

@media (min-width: 900px) { .at-three { --out-run: 58%; } }

.js-three .at-card--out {
	transition:
		opacity 1.9s ease,
		transform 3.2s cubic-bezier(0.42, 0.02, 0.22, 1);
	transition-delay: 0.24s;
}

.js-three .at-card--left  { transform: translateX(var(--out-run)) scale(0.965); }
.js-three .at-card--right { transform: translateX(calc(var(--out-run) * -1)) scale(0.965); }

.js-three .at-card--mid {
	transform: translateY(10px);
	transition:
		opacity 1.7s ease,
		transform 2.6s cubic-bezier(0.42, 0.02, 0.22, 1);
}

@media (max-width: 899px) {
	.js-three .at-three.is-in .at-card--left:not(.is-in) {
		transform: translateX(var(--out-run)) scale(0.965);
	}

	.js-three .at-three.is-in .at-card--right:not(.is-in) {
		transform: translateX(calc(var(--out-run) * -1)) scale(0.965);
	}

	.js-three .at-three.is-in .at-card--mid:not(.is-in) { transform: translateY(10px); }
}

.js-float .at-panel { transform: translateY(var(--float-rise)) scale(0.99); }

/* =========================================================
   SHE IS NOT A MEDALLION
   The woman with the teacup takes the width she is given.
   ========================================================= */

.at-round img {
	width: 100%;
	max-width: 100%;
	border-width: 6px;
}

@media (min-width: 760px) {
	.at-round img { width: 100%; max-width: 100%; }
}

/* =========================================================
   THE HEADING, IN THREE LINES
   ========================================================= */

.at-vast {
	font-size: clamp(23px, 6.2vw, 42px);
	line-height: 1.24;
	max-width: 22ch;
	text-wrap: balance;
}

/* =========================================================
   NO FAKE BOLD ANYWHERE
   Bellefair ships one cut. Asked for 600 or 700 the browser
   draws an outline around the letter, which is the hollow,
   rubbed-out look on the statement. Weight now comes from
   size, and from Calistoga where a heading needs to carry.
   ========================================================= */

.at-turn,
.at-grand,
.at-saucy,
.at-under,
.at-hero .at-lede,
.at-vast { font-weight: 400; }

/* =========================================================
   THE THREE, THE JUICE BAR WAY
   Elementor slides these in with a keyframe animation rather
   than a transition, which is why they never stall. Same
   mechanism here, at a third of the speed and travelling out
   from behind the middle rather than in off the edge.
   ========================================================= */

.js-three .at-card { opacity: 0; }

.js-three .at-card--left.is-in {
	animation: at-float-left 2.9s cubic-bezier(0.36, 0.02, 0.2, 1) 0.15s both;
}

.js-three .at-card--right.is-in {
	animation: at-float-right 2.9s cubic-bezier(0.36, 0.02, 0.2, 1) 0.45s both;
}

.js-three .at-card--mid.is-in {
	animation: at-rise 2.2s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

@keyframes at-float-left {
	from { opacity: 0; transform: translateX(var(--out-run)) scale(0.975); }
	40%  { opacity: 1; }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes at-float-right {
	from { opacity: 0; transform: translateX(calc(var(--out-run) * -1)) scale(0.975); }
	40%  { opacity: 1; }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes at-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   THE HEADING GETS A MOMENT
   Three lines, arriving one after the other, so the sentence
   is spoken rather than posted.
   ========================================================= */

.at-vast span { display: block; opacity: 0; }

.js-float .at-vast.is-in span {
	animation: at-line 1.7s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.js-float .at-vast.is-in span:nth-child(1) { animation-delay: 0.25s; }
.js-float .at-vast.is-in span:nth-child(2) { animation-delay: 0.95s; }
.js-float .at-vast.is-in span:nth-child(3) { animation-delay: 1.65s; }

/* Scripts off, or motion refused: the whole sentence is simply there. */
html:not(.js-float) .at-vast span,
.at-vast:not(.is-in) span { opacity: 1; }

@keyframes at-line {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   THE STATEMENT GETS ITS OWN, SLOWER THAN ANYTHING
   ========================================================= */

.js-float .at-panel { transition-duration: 3.4s; }

/* =========================================================
   THE BUTTONS HOLD STILL
   They never scale. A button lifts a little under the hand,
   the way the Juice Bar does it, and that is all.
   ========================================================= */

.at-acts { gap: 22px; }

@media (min-width: 620px) { .at-acts { gap: 26px; } }

.at-act {
	transition: background 0.3s ease-out, border-color 0.3s ease-out,
		color 0.3s ease-out, transform 0.3s ease-out;
}

.at-act:hover,
.at-act:focus-visible { transform: translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
	.at-act:hover,
	.at-act:focus-visible { transform: none; }

	.js-three .at-card,
	.at-vast span { opacity: 1; animation: none; }
}

/* =========================================================
   MOVEMENT ABOVE, ANCHORED BELOW
   Paige, 21 August. The heading moves, so everything under it
   has to hold. The buttons anchor the hero and the pink panel
   anchors the whole section and closes it off from the next.
   Nothing below the heading moves at all.
   ========================================================= */

/* The picture fills its frame. */
.at-hero-mark {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	--ring-space: clamp(6px, 1.6vw, 12px);
}

.at-hero-mark img {
	--ring: 1.5px;
	--gap: clamp(5px, 1.3vw, 9px);
}

.at-hero .in { max-width: 1180px; }

/* The buttons anchor. They change colour and they do not move. */
.at-act {
	transition: background 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out;
}

.at-act:hover,
.at-act:focus-visible { transform: none; }

/* The pink panel is the anchor. An anchor holds still. */
.js-float .at-panel,
.js-float .at-panel.is-in { transform: none; }

.js-float .at-panel { transition: opacity 2.4s ease; }

/* =========================================================
   THE JUICE BAR, MEASURED RATHER THAN GUESSED
   Read off library.elementor.com/juice-bar 21 August.
   slideInLeft  = translate3d(-100%, 0, 0) -> 0
   slideInRight = translate3d( 100%, 0, 0) -> 0
   .animated 1.25s, .animated-slow 2s, held with visibility
   until it is reached, and the products alternate sides as
   you come down the page.
   The travel is a whole element width. Mine was a third of
   one, which is why it read as a twitch rather than a glide.
   Everything below runs slower than theirs.
   ========================================================= */

.at-three,
.at-hero .in { overflow: hidden; }

.at-vast { overflow: hidden; }

/* ---------- the three, floating across ---------- */

.js-three .at-card { opacity: 1; }

/* Stacked, they alternate sides, the way the Juice Bar does. */
@media (max-width: 899px) {
	.js-three .at-card { visibility: hidden; }

	.js-three .at-card.is-in { visibility: visible; }

	.js-three .at-card--left.is-in {
		animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}

	.js-three .at-card--mid.is-in {
		animation: at-in-from-right 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}

	.js-three .at-card--right.is-in {
		animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}
}

/* Side by side, the outer two come out from behind the middle. */
@media (min-width: 900px) {
	.js-three .at-card--out { visibility: hidden; }

	.js-three .at-three.is-in .at-card--out { visibility: visible; }

	.js-three .at-three.is-in .at-card--left {
		animation: at-out-from-middle-left 3s cubic-bezier(0.36, 0.02, 0.2, 1) 0.2s both;
	}

	.js-three .at-three.is-in .at-card--right {
		animation: at-out-from-middle-right 3s cubic-bezier(0.36, 0.02, 0.2, 1) 0.55s both;
	}

	.js-three .at-three.is-in .at-card--mid {
		animation: at-rise 2.2s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}
}

@keyframes at-in-from-left {
	from { visibility: visible; transform: translate3d(-100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

@keyframes at-in-from-right {
	from { visibility: visible; transform: translate3d(100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

@keyframes at-out-from-middle-left {
	from { visibility: visible; transform: translate3d(100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

@keyframes at-out-from-middle-right {
	from { visibility: visible; transform: translate3d(-100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* ---------- the heading, the same way ---------- */

.at-vast span { opacity: 1; visibility: hidden; }

.js-float .at-vast.is-in span { visibility: visible; }

.js-float .at-vast.is-in span:nth-child(1) {
	animation: at-in-from-left 2.4s cubic-bezier(0.36, 0.02, 0.2, 1) 0.2s both;
}

.js-float .at-vast.is-in span:nth-child(2) {
	animation: at-in-from-right 2.4s cubic-bezier(0.36, 0.02, 0.2, 1) 0.75s both;
}

.js-float .at-vast.is-in span:nth-child(3) {
	animation: at-in-from-left 2.4s cubic-bezier(0.36, 0.02, 0.2, 1) 1.3s both;
}

html:not(.js-float) .at-vast span,
.at-vast:not(.is-in) span { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.js-three .at-card,
	.js-three .at-card--out,
	.at-vast span {
		visibility: visible;
		animation: none;
		transform: none;
	}
}

/* =========================================================
   THE HEADING HOLDS STILL. THE PICTURES COME ACROSS.
   Paige, 21 August: keep it still, let it breathe, make it
   big, make it bold. The movement belongs to the images.
   ========================================================= */

/* ---------- the heading: still, big, bold ---------- */

.at-vast {
	font-size: clamp(30px, 8.4vw, 62px);
	line-height: 1.16;
	max-width: 20ch;
	margin: 0 auto clamp(30px, 6vw, 52px);
	overflow: visible;
}

.at-vast span,
.js-float .at-vast.is-in span,
.js-float .at-vast.is-in span:nth-child(1),
.js-float .at-vast.is-in span:nth-child(2),
.js-float .at-vast.is-in span:nth-child(3) {
	visibility: visible;
	opacity: 1;
	animation: none;
	transform: none;
}

.js-float .at-vast,
.js-float .at-vast.is-in {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ---------- every picture comes across ---------- */

.at-hero .in,
.at-band,
.at-statement,
.at-statement-in { overflow: hidden; }

.js-float .at-hero-mark { visibility: hidden; }

.js-float .at-hero-mark.is-in {
	visibility: visible;
	animation: at-in-from-right 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.js-float .at-band-mark { visibility: hidden; }

.js-float .at-band-mark.is-in {
	visibility: visible;
	animation: at-in-from-left 2.8s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.js-float .at-round { visibility: hidden; transform: none; }

.js-float .at-round.is-in {
	visibility: visible;
	transform: none;
	animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.js-float .at-statement-in--flip .at-round.is-in {
	animation-name: at-in-from-right;
}

/* ---------- the border, made properly ---------- */

.at-hero-mark img {
	--ring: 2px;
	--gap: clamp(10px, 2.6vw, 18px);
	box-shadow:
		0 0 0 var(--gap) var(--tea-orange),
		0 0 0 calc(var(--gap) + var(--ring)) var(--tea-pink);
}

.at-on-pink .at-hero-mark img {
	box-shadow:
		0 0 0 var(--gap) var(--tea-pink),
		0 0 0 calc(var(--gap) + var(--ring)) var(--tea-orange);
}

.at-round img { border-width: 3px; }

@media (prefers-reduced-motion: reduce) {
	.js-float .at-hero-mark,
	.js-float .at-band-mark,
	.js-float .at-round {
		visibility: visible;
		animation: none;
		transform: none;
	}
}

/* =========================================================
   THE PLAIN PAGES
   Read rather than admired, and still written with warmth.
   ========================================================= */

.at-plain-top { padding-bottom: clamp(26px, 5vw, 44px); }

.at-plain { padding-top: clamp(30px, 6vw, 56px); }

.at-plain-in { max-width: 760px; }

.at-plain-lede {
	font-size: clamp(19px, 5vw, 24px);
	line-height: 1.45;
	max-width: 34ch;
	margin: 0 0 clamp(28px, 5vw, 44px);
}

.at-plain h2 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(19px, 5vw, 25px);
	line-height: 1.24;
	letter-spacing: normal;
	text-transform: none;
	margin: clamp(30px, 5vw, 46px) 0 0.5em;
}

.at-plain p { margin: 0 0 1em; max-width: 62ch; }

.at-plain a { color: var(--tea-magenta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.at-plain a:hover, .at-plain a:focus-visible { color: var(--tea-raspberry); }

.at-plain strong { font-weight: 400; color: var(--tea-magenta); }


/* =========================================================
   NO OVERLAY ON A PHOTOGRAPH
   Her rule, 21 August. Her pictures are heroes. The warmth
   the table page had laid over the garden is gone.
   ========================================================= */

.at-world-hour { display: none; }

.at-said,
.at-under { text-shadow: 0 2px 26px rgba(42, 26, 20, 0.85); }

/* =========================================================
   EVERY PICTURE KEEPS ITS OWN SHAPE
   No frame decides a photograph's proportions any more, so
   swapping a picture can never crop a woman out of it again.
   ========================================================= */

.at-hero-mark img,
.at-round img,
.at-card .at-mark img,
.at-band-mark img,
.at-kal-one img {
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	object-fit: fill;
}

/* =========================================================
   A KALEIDOSCOPE OF CONNECTION
   Her heading, and her section of six. Three across on a
   wide screen, and every tile keeps its own height so
   nothing is cut. A woman in every one of them.
   ========================================================= */

.at-kal { padding-top: clamp(40px, 8vw, 80px); }

.at-kal .at-turn { margin-bottom: clamp(24px, 5vw, 44px); }

.at-kal-six {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 3vw, 22px);
	align-items: start;
}

@media (min-width: 620px) { .at-kal-six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .at-kal-six { grid-template-columns: repeat(3, 1fr); } }

.at-kal-one {
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 8px 26px rgba(51, 51, 51, 0.14);
}

.at-kal-one img { display: block; border-radius: 3px; }

/* they come across, alternating, the Juice Bar way */
.js-float .at-kal-one { visibility: hidden; }

.js-float .at-kal-one.is-in {
	visibility: visible;
	transform: none;
	animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.js-float .at-kal-one.float--from-right.is-in { animation-name: at-in-from-right; }

.at-kal-six { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.js-float .at-kal-one { visibility: visible; animation: none; transform: none; }
}

/* =========================================================
   THE SIX, TWO ROWS OF THREE
   Her instruction, 21 August: on a phone as well as a desk.
   ========================================================= */

.at-kal-six { grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.6vw, 20px); }

@media (min-width: 620px)  { .at-kal-six { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .at-kal-six { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   THE INTRODUCTION, AND THE TWO-WAY STREET
   The selling. What this is, and what each woman is holding
   when she arrives.
   ========================================================= */

.at-intro { padding-top: clamp(38px, 7vw, 76px); }

.at-intro-words { max-width: 62ch; margin: 0 auto; }

.at-intro-words p {
	font-size: clamp(18px, 4.7vw, 22px);
	line-height: 1.55;
	margin: 0 0 1em;
	max-width: none;
}

.at-intro-words p:last-child { margin-bottom: 0; }

.at-both { padding-top: clamp(38px, 7vw, 76px); }

.at-both .at-saucy { margin-bottom: clamp(26px, 5vw, 46px); }

.at-both-two {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 4vw, 40px);
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}

@media (min-width: 820px) { .at-both-two { grid-template-columns: 1fr 1fr; } }

.at-both-one {
	background: var(--tea-pink);
	color: var(--tea-orange);
	border-radius: 3px;
	padding: clamp(24px, 4vw, 38px);
}

.at-both-one h3 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(20px, 5.2vw, 27px);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 0.6em;
}

.at-both-one p {
	color: var(--tea-orange);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.5;
	margin: 0 0 0.9em;
	max-width: none;
}

.at-both-one p:last-child { margin-bottom: 0; }

/* =========================================================
   EXPERIENCE THE MAGIC, AND READY FOR SOME MAGIC
   ========================================================= */

.at-eyebrow {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 1.1em;
}

.at-magic .at-turn { margin-bottom: 0.5em; }

.at-ready { padding-top: clamp(34px, 6vw, 64px); padding-bottom: 0; text-align: center; }

.at-ready .at-turn { margin-bottom: 0.3em; }

/* =========================================================
   TELL EVERY WOMAN YOU KNOW
   ========================================================= */

.at-share {
	margin-top: clamp(30px, 6vw, 54px);
	padding-top: clamp(24px, 5vw, 40px);
	border-top: 1.5px solid var(--tea-pink);
	text-align: center;
}

.at-on-pink .at-share { border-top-color: var(--tea-orange); }

.at-share-line {
	margin: 0 auto clamp(18px, 3.5vw, 28px);
	max-width: 44ch;
	font-size: clamp(18px, 4.6vw, 22px);
	line-height: 1.45;
}

button.at-act {
	appearance: none;
	cursor: pointer;
	font-family: var(--font-util);
}

/* =========================================================
   HOW IT WORKS
   Community, then tea parties, then mentorship. Her order,
   and the order a woman actually moves through.
   ========================================================= */

.at-works { padding-top: clamp(40px, 7vw, 78px); overflow: hidden; }

.at-works .at-saucy { margin-bottom: clamp(26px, 5vw, 46px); }

.at-works-three {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 3vw, 26px);
	align-items: stretch;
}

@media (min-width: 880px) { .at-works-three { grid-template-columns: repeat(3, 1fr); } }

.at-works-one {
	position: relative;
	background: #FFFDFB;
	border-radius: 3px;
	padding: clamp(26px, 4vw, 38px) clamp(20px, 3vw, 30px) clamp(26px, 4vw, 34px);
	display: flex;
	flex-direction: column;
}

.at-works-no {
	display: block;
	font-family: 'Calistoga', Georgia, serif;
	font-size: clamp(34px, 8vw, 48px);
	line-height: 1;
	color: var(--tea-orange);
	opacity: 0.28;
	margin-bottom: 0.15em;
}

.at-works-one h3 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(21px, 5.4vw, 27px);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tea-orange);
	margin: 0 0 0.55em;
}

.at-works-one p {
	color: var(--tea-orange);
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.5;
	margin: 0 0 1.4em;
	max-width: none;
	flex: 1 1 auto;
}

.at-works-one .at-act {
	align-self: flex-start;
	width: auto;
	max-width: none;
	background: var(--tea-orange);
	border-color: var(--tea-orange);
	color: var(--tea-pink);
	padding: 15px 24px;
	font-size: 17px;
}

.at-works-one .at-act:hover,
.at-works-one .at-act:focus-visible {
	background: var(--tea-raspberry);
	border-color: var(--tea-raspberry);
}

/* =========================================================
   THE OFFERING PAGES, AND THE TWO DOORS
   ========================================================= */

.at-offer-top { padding-bottom: clamp(24px, 5vw, 44px); }
.at-offer-top .at-lede { font-family: var(--font-util); font-weight: 400; }

.at-offer { padding-top: clamp(34px, 6vw, 62px); }
.at-offer-in { max-width: 760px; }

.at-offer-words p {
	font-size: clamp(18px, 4.7vw, 21px);
	line-height: 1.55;
	margin: 0 0 1em;
	max-width: none;
}

.at-offer-list { list-style: none; margin: clamp(24px, 4vw, 38px) 0 0; padding: 0; }

.at-offer-list li {
	position: relative;
	background: #FFFDFB;
	border-radius: 3px;
	padding: 16px 18px 16px 52px;
	margin: 0 0 10px;
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.45;
	color: var(--tea-orange);
}

.at-offer-list li::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 1.05em;
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: var(--tea-raspberry);
}

.at-doors { padding-top: clamp(40px, 7vw, 78px); overflow: hidden; }
.at-doors .at-saucy { margin-bottom: clamp(24px, 5vw, 42px); }

.at-doors-two {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3.5vw, 30px);
	max-width: 900px;
	margin: 0 auto;
}

@media (min-width: 820px) { .at-doors-two { grid-template-columns: 1fr 1fr; } }

.at-doors-one {
	background: var(--tea-pink);
	color: var(--tea-orange);
	border-radius: 3px;
	padding: clamp(26px, 4vw, 40px);
	display: flex;
	flex-direction: column;
}

.at-doors-one h3 {
	font-family: 'Calistoga', Georgia, serif;
	font-weight: 400;
	font-size: clamp(24px, 6vw, 32px);
	line-height: 1.14;
	margin: 0 0 0.2em;
}

.at-doors-who {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 1.1em;
	color: var(--tea-raspberry);
}

.at-doors-one p {
	color: var(--tea-orange);
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.5;
	margin: 0 0 1.3em;
	max-width: none;
	flex: 1 1 auto;
}

.at-doors-one .at-act {
	align-self: flex-start;
	width: auto;
	max-width: none;
	background: var(--tea-orange);
	border-color: var(--tea-orange);
	color: var(--tea-pink);
}

.at-doors-one .at-act:hover,
.at-doors-one .at-act:focus-visible {
	background: var(--tea-raspberry);
	border-color: var(--tea-raspberry);
}

/* =========================================================
   THE MASTHEAD AND THE FOOTER
   Every page, reachable from every page.
   ========================================================= */

.at-top { background: var(--tea-orange); position: relative; z-index: 5; }

.at-top-in {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px clamp(16px, 4vw, 40px);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.at-mark-link { display: block; flex: 0 0 auto; }
.at-mark-link img { display: block; width: clamp(58px, 13vw, 76px); height: auto; }

.at-top-open {
	appearance: none;
	cursor: pointer;
	margin-left: auto;
	background: none;
	border: 1.5px solid var(--tea-pink);
	border-radius: 2px;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	gap: 9px;
}

/* The three flat rules are replaced by the deco mark below. */
.at-top-open span:not(.at-deco) { display: none; }
.at-top-open em {
	font-style: normal;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tea-pink);
}
.at-top-open:hover { border-color: var(--tea-raspberry); }

.at-nav { display: none; width: 100%; padding: 6px 0 10px; }
.at-nav.is-open { display: block; }

.at-nav a {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tea-pink);
	text-decoration: none;
	padding: 13px 2px;
	border-bottom: 1px solid rgba(252, 228, 247, 0.3);
}

.at-nav a:last-child { border-bottom: 0; }
.at-nav a:hover,
.at-nav a:focus-visible { color: #fff; }
.at-nav a[aria-current="page"] { color: #fff; }

@media (min-width: 1000px) {
	.at-top-open { display: none; }
	.at-nav { display: flex; width: auto; margin-left: auto; gap: clamp(14px, 2vw, 28px); padding: 0; flex-wrap: wrap; }
	.at-nav a { border-bottom: 0; padding: 6px 0; font-size: 12px; letter-spacing: 0.14em; }
	.at-nav a[aria-current="page"] { border-bottom: 1.5px solid var(--tea-pink); }
}

.at-foot { background: var(--tea-orange); color: var(--tea-pink); padding: clamp(38px, 6vw, 66px) 0 clamp(24px, 4vw, 36px); }

.at-foot-in {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 48px);
}

@media (min-width: 820px) { .at-foot-in { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.at-foot-mark img { display: block; width: clamp(70px, 16vw, 92px); height: auto; margin-bottom: 16px; }
.at-foot-word p { color: var(--tea-pink); font-size: clamp(17px, 4.4vw, 19px); line-height: 1.5; margin: 0; max-width: 40ch; }

.at-foot-nav { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 560px) { .at-foot-nav { grid-template-columns: 1fr 1fr; gap: 2px 24px; } }

.at-foot-nav a {
	color: var(--tea-pink);
	text-decoration: none;
	font-family: var(--font-util);
	font-size: 18px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(252, 228, 247, 0.22);
}
.at-foot-nav a:hover, .at-foot-nav a:focus-visible { color: #fff; }

.at-foot-small {
	max-width: 1180px;
	margin: clamp(28px, 5vw, 48px) auto 0;
	padding: 20px clamp(18px, 4vw, 40px) 0;
	border-top: 1px solid rgba(252, 228, 247, 0.28);
	color: var(--tea-pink);
	font-size: 15px;
}
.at-foot-small a { color: var(--tea-pink); }

.foot { display: none; }

/* =========================================================
   HER THREE, 21 AUGUST
   The two actions sit further apart and hold still. The
   statement carries her own line breaks and real weight.
   ========================================================= */

.at-hero .at-acts { gap: clamp(20px, 5vw, 34px); }

@media (min-width: 620px) { .at-hero .at-acts { gap: clamp(30px, 5vw, 52px); } }

.js-float .at-hero .at-acts,
.js-float .at-hero .at-acts.is-in {
	opacity: 1;
	transform: none;
	transition: none;
	visibility: visible;
	animation: none;
}

.at-panel .at-turn {
	font-family: 'Calistoga', Georgia, serif;
	font-weight: 400;
	font-size: clamp(27px, 8.2vw, 46px);
	line-height: 1.22;
	hyphens: none;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* =========================================================
   THE THREE SIT LEVEL
   Her instruction: the picture boxes are the same size, so
   the three headings and the three paragraphs line up.
   ========================================================= */

.at-card .at-mark img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 34%;
	width: 100%;
	height: auto;
}

.at-three { align-items: stretch; }
.at-card { display: flex; flex-direction: column; }
.at-card .at-mark { margin-bottom: clamp(16px, 3vw, 24px); }

/* the statement, bold without being heavy */
.at-panel .at-turn {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(25px, 7.4vw, 42px);
	line-height: 1.28;
	letter-spacing: normal;
	text-transform: none;
}

/* =========================================================
   THE THREE, PUT RIGHT
   Stacked, nothing is offset sideways while it waits — that
   is what was throwing them over one another. Each arrives
   from its own side when she reaches it. Side by side, the
   outer two sit behind the middle and travel out.
   ========================================================= */

@media (max-width: 899px) {
	.js-three .at-three .at-card,
	.js-three .at-three.is-in .at-card,
	.js-three .at-three .at-card--left,
	.js-three .at-three .at-card--right,
	.js-three .at-three .at-card--mid,
	.js-three .at-three.is-in .at-card--left:not(.is-in),
	.js-three .at-three.is-in .at-card--right:not(.is-in),
	.js-three .at-three.is-in .at-card--mid:not(.is-in) {
		transform: none;
		opacity: 1;
	}

	.js-three .at-three .at-card { visibility: hidden; }
	.js-three .at-three .at-card.is-in { visibility: visible; }

	.js-three .at-three .at-card--left.is-in {
		animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}

	.js-three .at-three .at-card--mid.is-in {
		animation: at-in-from-right 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}

	.js-three .at-three .at-card--right.is-in {
		animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
	}
}

@media (min-width: 900px) {
	.js-three .at-three { --out-run: 104%; }

	.js-three .at-three .at-card--left {
		transform: translateX(var(--out-run));
		opacity: 0;
	}

	.js-three .at-three .at-card--right {
		transform: translateX(calc(var(--out-run) * -1));
		opacity: 0;
	}

	.js-three .at-three .at-card--mid { opacity: 0; transform: translateY(10px); }

	.js-three .at-three.is-in .at-card--left,
	.js-three .at-three.is-in .at-card--right,
	.js-three .at-three.is-in .at-card--mid {
		opacity: 1;
		transform: none;
		animation: none;
		transition:
			opacity 1.9s ease 0.2s,
			transform 3s cubic-bezier(0.36, 0.02, 0.2, 1) 0.2s;
	}

	.js-three .at-three.is-in .at-card--right { transition-delay: 0.55s; }
}

@media (prefers-reduced-motion: reduce) {
	.js-three .at-three .at-card {
		visibility: visible;
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}

/* =========================================================
   NOTHING IS A FULL SCREEN TALL
   The parent sets three outright full-height rules, and her
   pane is 1400 tall, so a section became 1400 pixels with a
   few words floating in it. Capped here in the child only —
   the parent is untouched and the shared default stays hers
   to rule on.
   ========================================================= */

.js-entrance .entrance {
	height: min(100svh, 46rem);
	max-height: min(100svh, 46rem);
}

.hero { min-height: min(100svh, 46rem); }
.hero--second { min-height: min(86svh, 40rem); }

/* and my own, on the table page */
.at-room { min-height: min(100svh, 46rem); }

/* =========================================================
   THE MARK: THE TEAPOT, AND AUNT TEA UNDER IT
   ========================================================= */

.at-mark-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	flex: 0 0 auto;
}

.at-mark-link img {
	display: block;
	width: clamp(46px, 11vw, 58px);
	height: auto;
	border-radius: 9999px;
}

.at-mark-link span {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tea-pink);
	white-space: nowrap;
}

.at-foot-mark {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	text-decoration: none;
	margin-bottom: 16px;
}

.at-foot-mark img {
	width: clamp(58px, 14vw, 76px);
	height: auto;
	border-radius: 9999px;
	margin-bottom: 0;
}

.at-foot-mark span {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tea-pink);
}

/* =========================================================
   GLOOCK CARRIES THE HEADINGS
   Her choice, 21 August. A contemporary display serif with
   real contrast — fine hairlines and heavy stems, so it
   holds at a great size and stays elegant at a small one.
   Bellefair keeps the reading. Cinzel keeps the eyebrows.
   ========================================================= */

.at-vast,
.at-turn,
.at-grand,
.at-said,
.at-panel .at-turn,
.at-doors-one h3,
.mast h1 {
	font-family: 'Gloock', Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* Gloock reads larger than Calistoga at the same number, so the
   opening comes down a touch to sit where she had it. */
.at-vast { font-size: clamp(25px, 6.8vw, 46px); line-height: 1.2; }

.at-panel .at-turn { font-size: clamp(26px, 7.6vw, 44px); line-height: 1.24; }

.at-turn { line-height: 1.24; }

.at-grand { font-size: clamp(34px, 12vw, 64px); line-height: 1.14; }

.at-works-one h3,
.at-offer-list li,
.at-card-title {
	font-family: var(--font-head);
}

.at-doors-one h3 { font-size: clamp(23px, 5.8vw, 31px); line-height: 1.16; }

/* =========================================================
   ONE FACE DOES ALL THE READING
   Cardo was coming down from the parent and setting the long
   paragraphs while Bellefair set everything else, so two
   faces were doing the reading on one page. Bellefair takes
   all of it, which is the face she already had.
   ========================================================= */

body,
p, li, dd, dt,
.at-body p,
.at-offer-words p,
.at-intro-words p,
.at-works-one p,
.at-doors-one p,
.at-both-one p,
.at-plain p,
.at-lede,
.at-saucy,
.at-card-copy,
.at-diary-meta,
.at-diary-left,
.at-share-line,
.at-under,
input, textarea, select, button {
	font-family: var(--font-util);
}

.at-plain h2 { font-family: var(--font-head); }

/* =========================================================
   BELLEFAIR, AND BIGGER
   Her ruling, 21 August: Bellefair stays for the delicate,
   old-world charm against the bold heading, and it wants
   more size to be read comfortably. Bellefair sets small for
   its point size, so every reading line goes up a step and
   the leading opens with it.
   ========================================================= */

p, li, dd {
	font-size: clamp(20px, 5.2vw, 24px);
	line-height: 1.6;
}

.at-body p,
.at-offer-words p,
.at-intro-words p,
.at-plain p {
	font-size: clamp(20px, 5.2vw, 24px);
	line-height: 1.62;
}

.at-works-one p,
.at-doors-one p,
.at-both-one p,
.at-offer-list li,
.at-card-copy {
	font-size: clamp(19px, 4.9vw, 22px);
	line-height: 1.55;
}

.at-lede {
	font-size: clamp(21px, 5.6vw, 27px);
	line-height: 1.42;
}

.at-saucy,
.at-share-line,
.at-under {
	font-size: clamp(20px, 5.2vw, 25px);
	line-height: 1.45;
}

.at-plain-lede { font-size: clamp(21px, 5.4vw, 26px); line-height: 1.45; }

.at-diary-meta { font-size: clamp(17px, 4.4vw, 19px); }
.at-diary-left { font-size: clamp(16px, 4.2vw, 18px); }

.at-act { font-size: clamp(18px, 4.6vw, 21px); }

.at-foot-word p { font-size: clamp(19px, 4.9vw, 21px); }
.at-foot-nav a  { font-size: 20px; }

/* =========================================================
   GLOOCK NEEDS ITS SPACES BACK
   Negative tracking closed the word space at a large size,
   so Of Mentorship read as one word. Seen by looking rather
   than by measuring.
   ========================================================= */

.at-vast,
.at-turn,
.at-grand,
.at-said,
.at-panel .at-turn,
.at-doors-one h3,
.mast h1 {
	letter-spacing: 0;
	word-spacing: 0.06em;
}

/* =========================================================
   A TALL PICTURE STAYS ON THE SCREEN
   The oval frame suits a wide photograph. Given a portrait
   it grew into a giant that ran off the bottom of the page.
   Height is capped and the width follows, so nothing is
   cropped and nothing runs away.
   ========================================================= */

.at-offer-top .at-hero-mark {
	width: auto;
	max-width: 100%;
	display: flex;
	justify-content: center;
}

.at-offer-top .at-hero-mark img {
	max-height: 54svh;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.at-offer-top .at-hero-mark img { max-height: 60svh; }
}

/* =========================================================
   A CHOICE SHE TAPS, ON HER OWN PAGE
   Build site only. One tap moves one word and the rest of
   the page holds perfectly still.
   ========================================================= */

.at-choose {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 clamp(18px, 3vw, 28px);
	padding: 14px 16px;
	border: 1.5px dashed var(--tea-pink);
	border-radius: 3px;
}

.at-on-pink .at-choose { border-color: var(--tea-orange); }

.at-choose b {
	display: block;
	width: 100%;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 4px;
	opacity: 0.85;
}

.at-choose button {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: 2px;
	padding: 10px 14px;
	font-family: var(--font-util);
	font-size: 16px;
	line-height: 1.2;
	color: inherit;
}

.at-choose button:hover { border-color: var(--tea-raspberry); color: var(--tea-raspberry); }

.at-on-orange .at-choose button[aria-pressed="true"] { background: var(--tea-pink); color: var(--tea-orange); }
.at-on-pink .at-choose button[aria-pressed="true"]   { background: var(--tea-orange); color: var(--tea-pink); }

/* =========================================================
   THE LETTER
   Her six hands and seven inks on the real letter. One tap
   moves one thing, and the letter is the only part that
   changes.
   ========================================================= */

.at-letter-page { padding-top: clamp(30px, 5vw, 54px); }
.at-letter-in { max-width: 720px; }

.at-picker { margin: 0 0 clamp(18px, 3vw, 26px); }

.at-picker b {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.at-picker-row { display: flex; flex-wrap: wrap; gap: 8px; }

.at-pick {
	appearance: none;
	cursor: pointer;
	background: #FFFDFB;
	border: 1.5px solid rgba(233, 97, 44, 0.4);
	border-radius: 2px;
	padding: 10px 16px;
	font-size: 21px;
	line-height: 1.1;
	color: var(--tea-raspberry);
}

.at-pick:hover { border-color: var(--tea-orange); }
.at-pick[aria-pressed="true"] { border-color: var(--tea-orange); border-width: 2.5px; background: #fff; }

.at-picker-row--inks { gap: 12px; }

.at-ink {
	appearance: none;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 2px #FFFDFB;
}

.at-ink:hover { transform: scale(1.08); }
.at-ink[aria-pressed="true"] { border-color: var(--tea-orange); }

.at-picker-now {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 clamp(20px, 4vw, 32px);
	opacity: 0.9;
}

.at-letter {
	position: relative;
	background: #FFFDFB;
	border-radius: 3px;
	padding: clamp(28px, 6vw, 46px) clamp(22px, 5vw, 42px) clamp(34px, 6vw, 50px);
	box-shadow: 0 1px 0 rgba(51, 51, 51, 0.1), 0 14px 34px rgba(51, 51, 51, 0.1);
}

.at-letter::before {
	content: '';
	position: absolute;
	inset: 9px;
	border: 1px solid rgba(233, 97, 44, 0.28);
	border-radius: 2px;
	pointer-events: none;
}

.at-letter-from {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tea-orange);
	margin: 0 0 19px;
}

.at-letter-body {
	font-family: 'Allura', cursive;
	font-size: calc(clamp(20px, 5.2vw, 25px) * 1.42);
	line-height: 1.5;
	color: var(--tea-orange);
}

.at-letter-body p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 0.72em;
	max-width: none;
}

.at-letter-body p:last-of-type { margin-bottom: 0; }

.at-letter-sign {
	display: block;
	margin-top: 0.9em;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.at-letter-seal {
	position: absolute;
	right: clamp(18px, 4.6vw, 32px);
	bottom: clamp(-18px, -3.4vw, -14px);
	width: clamp(52px, 13vw, 68px);
	height: clamp(52px, 13vw, 68px);
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(51, 51, 51, 0.2);
}

.at-letter-seal img { display: block; width: 100%; height: 100%; object-fit: cover; }

.at-letter-under { margin: clamp(26px, 5vw, 40px) 0 0; font-size: 17px; }
.at-letter-under b { font-weight: 400; color: var(--tea-magenta); }

/* =========================================================
   ALL SIX AT ONCE
   The tap version answers which one she wants. This one
   answers how they stand against each other.
   ========================================================= */

.at-allsix { padding-top: clamp(38px, 6vw, 70px); }
.at-allsix .at-saucy { margin-bottom: clamp(24px, 4vw, 38px); }

.at-allsix-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(12px, 2.5vw, 20px);
}

@media (min-width: 640px)  { .at-allsix-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .at-allsix-grid { grid-template-columns: repeat(3, 1fr); } }

.at-allsix-one {
	margin: 0;
	background: #FFFDFB;
	border-radius: 3px;
	padding: 20px 20px 22px;
}

.at-allsix-one figcaption {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tea-orange);
	margin-bottom: 14px;
}

.at-allsix-words { color: var(--tea-raspberry); line-height: 1.45; }

.at-allsix-words p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 0.5em;
	max-width: none;
}

.at-allsix-words span {
	display: block;
	margin-top: 0.7em;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}


/* the box she types her own into */
.at-choose-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

.at-choose-own {
	width: 100%;
	margin-top: 4px;
	background: #FFFDFB;
	border: 1.5px solid rgba(233, 97, 44, 0.45);
	border-radius: 2px;
	padding: 13px 15px;
	font-family: var(--font-util);
	font-size: 19px;
	line-height: 1.25;
	color: var(--tea-ink);
}

.at-choose-own::placeholder { color: var(--tea-orange); opacity: 0.6; }
.at-choose-own:focus { outline: none; border-color: var(--tea-raspberry); border-width: 2.5px; }

/* =========================================================
   THE PAGE TITLE LEADS
   A section heading was rendering at 44 while the page's own
   title sat at 26, so every inner page read upside down.
   Seen by looking rather than measured.
   ========================================================= */

.at-offer-top .at-vast {
	font-size: clamp(34px, 9.4vw, 62px);
	line-height: 1.14;
	max-width: 18ch;
}

.at-offer .at-turn,
.at-letter-page .at-turn,
.at-allsix .at-turn {
	font-size: clamp(25px, 6.6vw, 38px);
	line-height: 1.2;
}

.at-doors .at-turn { font-size: clamp(26px, 7vw, 40px); }

/* the line under the big statement */
.at-grand-under {
	font-family: var(--font-util);
	font-size: clamp(21px, 5.6vw, 27px);
	line-height: 1.38;
	margin: -0.2em 0 1.1em;
	max-width: 30ch;
}

.at-on-pink .at-grand-under { color: var(--tea-orange); }
.at-on-orange .at-grand-under { color: var(--tea-pink); }

/* =========================================================
   WHAT WE ARE WORTH TO EACH OTHER
   The value women make for one another, rather than a list
   of what a membership contains.
   ========================================================= */

.at-worth { padding-top: clamp(38px, 6vw, 72px); }

.at-worth .at-eyebrow { color: var(--tea-pink); }

.at-worth-words p {
	font-size: clamp(20px, 5.2vw, 25px);
	line-height: 1.55;
	margin: 0 0 1em;
	max-width: 54ch;
}

.at-worth-list {
	list-style: none;
	margin: clamp(26px, 4vw, 40px) 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.at-worth-list li {
	position: relative;
	background: var(--tea-pink);
	color: var(--tea-orange);
	border-radius: 3px;
	padding: 18px 20px 18px 54px;
	font-size: clamp(18px, 4.7vw, 21px);
	line-height: 1.45;
}

.at-worth-list li::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 1.15em;
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: var(--tea-raspberry);
}

/* =========================================================
   THE RALLYING BAND
   Her own sentence, in capitals at the end of what she wrote
   on the community page, given the room it was asking for.
   ========================================================= */

.at-cry {
	padding-top: clamp(46px, 9vw, 96px);
	padding-bottom: clamp(46px, 9vw, 96px);
	text-align: center;
}

.at-cry-line {
	margin: 0 auto 0.7em;
	max-width: 34ch;
	font-size: clamp(20px, 5.2vw, 26px);
	line-height: 1.4;
}

.at-cry-shout {
	font-family: 'Gloock', Georgia, serif;
	font-weight: 400;
	font-size: clamp(30px, 9.2vw, 76px);
	line-height: 1.08;
	letter-spacing: 0;
	word-spacing: 0.06em;
	color: var(--tea-pink);
	margin: 0 auto;
	max-width: 16ch;
	text-wrap: balance;
}

/* =========================================================
   THE EVENTS, MADE A DRAWCARD
   A full-width picture over the dates, so the diary arrives
   as an invitation rather than a list.
   ========================================================= */

.at-gatherings { padding-top: 0; overflow: hidden; }

.at-gatherings-mark { margin: 0 0 clamp(28px, 5vw, 52px); }

.at-gatherings-mark img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 760px) { .at-gatherings-mark img { aspect-ratio: 21 / 9; } }

.at-gatherings .at-saucy { margin-bottom: clamp(24px, 4vw, 38px); }

/* =========================================================
   HOW AN AFTERNOON GOES
   Her four steps from the red screen, numbered, so nobody
   arrives wondering what happens.
   ========================================================= */

.at-steps { padding-top: clamp(40px, 7vw, 78px); overflow: hidden; }

.at-steps .at-eyebrow { color: var(--tea-pink); }
.at-steps .at-saucy { margin-bottom: clamp(26px, 4.5vw, 44px); }

.at-steps-four {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 2.5vw, 22px);
}

@media (min-width: 700px)  { .at-steps-four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .at-steps-four { grid-template-columns: repeat(4, 1fr); } }

.at-steps-one {
	background: var(--tea-pink);
	color: var(--tea-orange);
	border-radius: 3px;
	padding: clamp(22px, 3.4vw, 30px);
}

.at-steps-no {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--tea-raspberry);
	margin-bottom: 1em;
}

.at-steps-one h3 {
	font-family: 'Gloock', Georgia, serif;
	font-weight: 400;
	font-size: clamp(22px, 5.6vw, 27px);
	line-height: 1.18;
	letter-spacing: 0;
	word-spacing: 0.06em;
	margin: 0 0 0.45em;
	color: var(--tea-orange);
}

.at-steps-one p {
	color: var(--tea-orange);
	font-size: clamp(18px, 4.7vw, 20px);
	line-height: 1.5;
	margin: 0;
	max-width: none;
}

/* =========================================================
   THE COMMUNITY
   Ask The Room, I Know Somebody, What Happened Next,
   The Handing On, Teach Me Yours. Four colours, no others.
   Sized from 379 outward.
   ========================================================= */

/* ---------- a moment, never a form ---------- */

.at-moment {
	margin: clamp(44px, 8vw, 78px) 0 0;
	padding: clamp(26px, 6vw, 44px) clamp(20px, 5vw, 36px);
	background: rgba(233, 97, 44, 0.06);
	border-radius: 18px;
}

.at-on-orange .at-moment { background: rgba(252, 228, 247, 0.10); }

.at-moment-head {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(21px, 5.6vw, 28px);
	line-height: 1.2;
	margin: 0 0 0.4em;
}

.at-moment-lede {
	font-size: clamp(16px, 4.2vw, 19px);
	line-height: 1.5;
	max-width: 44ch;
	margin: 0 0 clamp(22px, 5vw, 34px);
}

.at-m-f { margin: 0 0 clamp(20px, 4.5vw, 28px); max-width: 46ch; }

.at-m-f label {
	display: block;
	font-family: var(--font-util);
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.35;
	color: var(--tea-magenta);
	margin: 0 0 9px;
}

.at-m-f input[type="text"],
.at-m-f input[type="number"],
.at-m-f input[type="date"],
.at-m-f textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	font: inherit;
	font-size: 16px;
	color: var(--tea-ink);
	background: var(--tea-pink);
	border: 1px solid rgba(204, 51, 102, 0.35);
	border-radius: 12px;
}

.at-m-f textarea { line-height: 1.5; resize: vertical; }

.at-m-f input:focus-visible,
.at-m-f textarea:focus-visible {
	outline: 2px solid var(--tea-magenta);
	outline-offset: 2px;
	border-color: var(--tea-magenta);
}

.at-m-h {
	display: block;
	margin: 7px 0 0;
	font-size: clamp(13px, 3.4vw, 15px);
	line-height: 1.45;
	opacity: 0.82;
}

/* the offered language she may take or overwrite */

.at-m-offer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.at-m-pick {
	font: inherit;
	font-size: clamp(13px, 3.4vw, 15px);
	line-height: 1.3;
	padding: 9px 14px;
	color: var(--tea-magenta);
	background: var(--tea-pink);
	border: 1px solid rgba(204, 51, 102, 0.4);
	border-radius: 999px;
	cursor: pointer;
	text-align: left;
}

.at-m-pick:hover,
.at-m-pick:focus-visible { border-color: var(--tea-magenta); }

.at-m-pick.is-taken {
	color: var(--tea-pink);
	background: var(--tea-magenta);
	border-color: var(--tea-magenta);
}

.at-m-go { margin: clamp(24px, 5vw, 34px) 0 0; }

.at-m-note {
	margin: 14px 0 0;
	font-size: clamp(13px, 3.4vw, 15px);
	opacity: 0.8;
}

/* the hidden line only a machine fills in */
.at-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.at-said {
	margin: 0 0 clamp(26px, 5vw, 38px);
	padding: 16px 18px;
	font-size: clamp(16px, 4.2vw, 19px);
	line-height: 1.5;
	color: var(--tea-pink);
	background: var(--tea-magenta);
	border-radius: 14px;
	text-shadow: none;
}

/* ---------- Ask The Room ---------- */

.at-room { list-style: none; margin: 0; padding: 0; }

.at-room-one {
	padding: clamp(18px, 4.5vw, 26px) 0;
	border-bottom: 1px solid rgba(233, 97, 44, 0.22);
}

.at-room-q {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(18px, 4.8vw, 23px);
	line-height: 1.28;
	text-decoration: none;
}

.at-room-by {
	margin: 8px 0 0;
	font-size: clamp(14px, 3.6vw, 16px);
	opacity: 0.82;
}

.at-room-one.is-settled .at-room-q { opacity: 0.72; }

/* ---------- I Know Somebody ---------- */

.at-declare {
	padding: clamp(18px, 4.5vw, 26px) clamp(18px, 4.5vw, 26px);
	margin: 0 0 clamp(30px, 6vw, 46px);
	background: rgba(204, 51, 102, 0.08);
	border-left: 3px solid var(--tea-magenta);
	border-radius: 0 14px 14px 0;
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.55;
	max-width: 52ch;
}

.at-names { list-style: none; margin: 0; padding: 0; }

.at-name {
	padding: clamp(22px, 5vw, 32px) 0;
	border-bottom: 1px solid rgba(233, 97, 44, 0.22);
}

.at-name-who {
	font-family: var(--font-head);
	font-size: clamp(19px, 5vw, 24px);
	line-height: 1.22;
	margin: 0 0 6px;
}

.at-name-does { margin: 0 0 12px; font-size: clamp(15px, 4vw, 17px); }
.at-name-town { display: block; opacity: 0.78; }

.at-name-how {
	display: inline-block;
	margin: 0 0 12px;
	padding: 10px 14px;
	background: rgba(204, 51, 102, 0.1);
	border-radius: 12px;
	font-size: clamp(14px, 3.7vw, 16px);
	line-height: 1.45;
	color: var(--tea-magenta);
	max-width: 44ch;
}

.at-name-how-tag {
	display: block;
	font-size: clamp(11px, 3vw, 12px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0 0 4px;
}

.at-name-words p { margin: 0 0 0.7em; font-size: clamp(15px, 4vw, 17px); }

.at-name-foot {
	margin: 10px 0 0;
	font-size: clamp(13px, 3.5vw, 15px);
	opacity: 0.82;
}

.at-name-foot span { display: block; }

/* ---------- What Happened Next ---------- */

.at-happened { padding: clamp(34px, 7vw, 64px) 0 clamp(50px, 9vw, 90px); }

.at-next {
	max-width: 640px;
	margin: 0 auto clamp(54px, 10vw, 96px);
}

.at-next:last-child { margin-bottom: 0; }

.at-next-head {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(22px, 6vw, 30px);
	line-height: 1.2;
	margin: 0 0 6px;
	text-align: center;
}

.at-next-when {
	margin: 0 0 clamp(22px, 5vw, 34px);
	text-align: center;
	font-size: clamp(13px, 3.4vw, 15px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
}

.at-next-said {
	margin: 0 0 clamp(18px, 4vw, 26px);
	padding: clamp(20px, 5vw, 30px) clamp(20px, 5vw, 30px);
	border-radius: 18px;
}

.at-next-said p {
	margin: 0 0 12px;
	font-size: clamp(17px, 4.6vw, 20px);
	line-height: 1.5;
}

.at-next-said cite {
	font-style: normal;
	font-size: clamp(13px, 3.5vw, 15px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.at-next-darling { background: rgba(204, 51, 102, 0.1); }
.at-next-aunt    { background: rgba(233, 97, 44, 0.12); }

/* ---------- The Handing On ---------- */

.at-pieces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(28px, 6vw, 44px);
}

.at-piece-pic { margin: 0 0 14px; }

.at-piece-pic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.at-piece-what {
	font-family: var(--font-head);
	font-size: clamp(19px, 5vw, 24px);
	line-height: 1.22;
	margin: 0 0 8px;
}

.at-piece-story { margin: 0 0 12px; font-size: clamp(15px, 4vw, 17px); line-height: 1.55; }

.at-piece-foot { margin: 0; font-size: clamp(13px, 3.5vw, 15px); opacity: 0.85; }
.at-piece-foot span { display: block; }
.at-piece-gone { color: var(--tea-magenta); }
.at-piece.is-gone { opacity: 0.66; }

@media (min-width: 720px) {
	.at-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Teach Me Yours ---------- */

.at-shape {
	margin: 0 0 clamp(32px, 6vw, 50px);
	padding: clamp(22px, 5vw, 32px);
	background: rgba(233, 97, 44, 0.07);
	border-radius: 18px;
}

.at-shape h3 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(18px, 4.8vw, 23px);
	line-height: 1.24;
	margin: 0 0 0.5em;
}

.at-shape-list { list-style: none; margin: 14px 0 0; padding: 0; }

.at-shape-list li {
	position: relative;
	padding: 0 0 0 22px;
	margin: 0 0 12px;
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.5;
}

.at-shape-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tea-magenta);
}

.at-teach-soon { list-style: none; margin: 0; padding: 0; }

.at-teach-soon li {
	padding: 16px 0;
	border-bottom: 1px solid rgba(233, 97, 44, 0.22);
}

.at-teach-soon a {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(17px, 4.5vw, 21px);
	line-height: 1.26;
	text-decoration: none;
}

.at-teach-soon span {
	display: block;
	margin: 6px 0 0;
	font-size: clamp(13px, 3.5vw, 15px);
	opacity: 0.82;
}

/* =========================================================
   ONE COLOUR THE WHOLE WAY DOWN
   Her ruling, 22 August: the header colour carries through
   the page. A seam between sections reads as two pages.
   ========================================================= */

.at-seamless { padding-top: 0; }
.at-hero.at-seamless { padding-top: clamp(26px, 6vw, 48px); }
.sec.at-seamless + .sec.at-seamless { border-top: 0; margin-top: 0; }

/* =========================================================
   THE HANDWRITING FIELD, IN AUNT TEA'S HANDS
   The mechanism is the shared one from The Don't Hold Back
   Project by way of Matri Pair. Only the hands and the ink
   below belong to Aunt Tea.
   ========================================================= */

.at-hands {
	--hand-1: 'Marck Script', cursive;
	--hand-2: 'Shadows Into Light', cursive;
	--hand-3: 'Nothing You Could Do', cursive;
	--hand-4: 'Zeyada', cursive;
	--hand-5: 'Allura', cursive;
}

.at-waiting { padding-bottom: clamp(40px, 8vw, 80px); }

.at-hands .hw-note { color: var(--tea-pink); }

/* Alternating warmth, so the field reads as many hands rather than one. */
.at-hands .hw-note--2,
.at-hands .hw-note--5,
.at-hands .hw-note--9 { color: rgba(252, 228, 247, 0.86); }

/* =========================================================
   THE JUICE BAR, EVERYWHERE
   Her ruling, 22 August: the flow runs all the way through.
   Anything wearing .at-across is held off-screen until it is
   reached, then travels a whole element width and settles.
   Same curve, same seconds, same recipe as the three.
   ========================================================= */

.at-across-holder { overflow: hidden; }

.js-float .float.at-across { visibility: hidden; opacity: 1; transform: none; transition: none; }

.js-float .float.at-across.is-in { visibility: visible; }

.js-float .float.at-across--left.is-in {
	animation: at-in-from-left 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.js-float .float.at-across--right.is-in {
	animation: at-in-from-right 2.6s cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.js-float .float.at-across { visibility: visible; animation: none !important; }
}

/* =========================================================
   AN INTERGENERATIONAL ACT OF JOYFUL REBELLION
   Her words, 22 August. The greater purpose, carried on
   every page of the community rather than said once.
   ========================================================= */

.at-rebellion {
	padding: clamp(52px, 10vw, 110px) 0;
	text-align: center;
}

.at-rebellion .in { max-width: 820px; }

.at-rebel-eyebrow {
	font-family: var(--font-head);
	font-size: clamp(12px, 3.2vw, 14px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 clamp(18px, 4vw, 26px);
	opacity: 0.9;
}

.at-rebel-line {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(27px, 8vw, 52px);
	line-height: 1.14;
	margin: 0 0 clamp(20px, 4.5vw, 30px);
}

.at-rebel-body {
	font-size: clamp(17px, 4.5vw, 21px);
	line-height: 1.5;
	max-width: 40ch;
	margin: 0 auto clamp(10px, 3vw, 18px);
}

.at-rebel-body:last-child { margin-bottom: 0; }

/* =========================================================
   THE HANDING ON — ITS OWN COMPONENT
   A piece is a photograph first. It keeps its own shape, it
   comes across as it is reached, and it alternates sides all
   the way down.
   ========================================================= */

.at-handing { padding: clamp(30px, 6vw, 60px) 0 clamp(50px, 9vw, 96px); }

.at-piece {
	display: grid;
	gap: clamp(18px, 4.5vw, 30px);
	align-items: center;
	margin: 0 0 clamp(48px, 9vw, 96px);
}

.at-piece:last-child { margin-bottom: 0; }

.at-piece-pic {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--surface-shadow);
	background: rgba(252, 228, 247, 0.12);
}

/* Her law: a frame takes the picture's shape, never the other way. */
.at-piece-pic img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 62svh;
	object-fit: contain;
}

.at-piece-said { min-width: 0; }

.at-piece-kind {
	display: inline-block;
	font-family: var(--font-head);
	font-size: clamp(11px, 3vw, 13px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--tea-magenta);
	color: var(--tea-pink);
	margin: 0 0 14px;
}

.at-piece-what {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(23px, 6.4vw, 36px);
	line-height: 1.16;
	margin: 0 0 0.45em;
}

.at-piece-story {
	font-size: clamp(17px, 4.5vw, 20px);
	line-height: 1.55;
	max-width: 40ch;
	margin: 0 0 clamp(16px, 3.5vw, 22px);
}

.at-piece-where {
	font-size: clamp(15px, 3.9vw, 17px);
	margin: 0 0 clamp(18px, 4vw, 26px);
	opacity: 0.88;
}

.at-piece-where span { display: block; }

.at-piece.is-gone .at-piece-pic { opacity: 0.55; }

.at-piece-gone {
	display: inline-block;
	font-family: var(--font-head);
	font-size: clamp(13px, 3.4vw, 15px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid currentColor;
	opacity: 0.8;
}

@media (min-width: 860px) {
	.at-piece { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 64px); }
	.at-piece--flip .at-piece-pic { order: 2; }
}

/* =========================================================
   TEACH — the two shapes, as pictures rather than a list
   ========================================================= */

.at-teach-shape {
	display: grid;
	gap: clamp(20px, 5vw, 34px);
	align-items: center;
	margin: 0 0 clamp(52px, 10vw, 104px);
}

.at-teach-shape:last-of-type { margin-bottom: 0; }

.at-teach-pic {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--surface-shadow);
	background: rgba(252, 228, 247, 0.12);
	aspect-ratio: 5 / 4;
}

.at-teach-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.at-teach-shape h3 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(23px, 6.2vw, 34px);
	line-height: 1.16;
	margin: 0 0 0.45em;
}

.at-teach-shape > div > p {
	font-size: clamp(17px, 4.5vw, 20px);
	line-height: 1.55;
	max-width: 40ch;
}

@media (min-width: 860px) {
	.at-teach-shape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 64px); }
	.at-teach-shape--flip .at-teach-pic { order: 2; }
}

/* what she teaches, and what she is taught back */

.at-swap {
	display: grid;
	gap: clamp(18px, 4vw, 28px);
	margin: clamp(30px, 6vw, 50px) 0 0;
}

.at-swap-half {
	padding: clamp(22px, 5vw, 32px);
	border-radius: 20px;
	background: rgba(252, 228, 247, 0.12);
}

.at-on-pink .at-swap-half { background: rgba(233, 97, 44, 0.08); }

.at-swap-half h4 {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(18px, 4.8vw, 22px);
	line-height: 1.2;
	margin: 0 0 0.6em;
}

.at-swap-list { list-style: none; margin: 0; padding: 0; }

.at-swap-list li {
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.45;
	padding: 9px 0;
	border-bottom: 1px solid rgba(252, 228, 247, 0.22);
}

.at-on-pink .at-swap-list li { border-bottom-color: rgba(233, 97, 44, 0.22); }

.at-swap-list li:last-child { border-bottom: 0; }

@media (min-width: 780px) {
	.at-swap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.at-rebel-said p {
	font-size: clamp(17px, 4.5vw, 21px);
	line-height: 1.5;
	max-width: 40ch;
	margin: 0 auto clamp(10px, 3vw, 18px);
}

.at-rebel-said p:last-child { margin-bottom: 0; }

/* =========================================================
   THE FIELD AT 379
   The shared arrangement packs ten notes into forty rem and
   two of them meet. Aunt Tea gives them a whole band each,
   so no two can ever occupy the same air whatever the
   timings do. Her law: nothing juts.
   ========================================================= */

@media (max-width: 40rem) {
	.at-hands.hw-field { min-height: 62rem; }

	.at-hands .hw-note {
		max-width: 19ch;
		font-size: 1.45rem !important;
	}

	.at-hands .hw-note--1  { top:  1%; }
	.at-hands .hw-note--2  { top: 11%; }
	.at-hands .hw-note--3  { top: 21%; }
	.at-hands .hw-note--4  { top: 31%; }
	.at-hands .hw-note--5  { top: 41%; }
	.at-hands .hw-note--6  { top: 51%; }
	.at-hands .hw-note--7  { top: 61%; }
	.at-hands .hw-note--8  { top: 71%; }
	.at-hands .hw-note--9  { top: 81%; }
	.at-hands .hw-note--10 { top: 91%; }
}

/* =========================================================
   THE MENU, DRAWN FROM HER TEAPOT
   Her instruction, 23 August. Three nested chevrons, a band
   of dots, and lines that taper as they fall — every one of
   them read off the teapot rather than invented.
   ========================================================= */

.at-top-open .at-deco {
	display: block;
	width: clamp(30px, 8vw, 38px);
	height: auto;
	color: var(--tea-pink);
}

.at-top-open .at-deco svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Each chevron is finer than the one above it, the way the teapot tapers. */
.at-deco-one   { stroke-width: 1.7; }
.at-deco-two   { stroke-width: 1.4; opacity: 0.88; }
.at-deco-three { stroke-width: 1.1; opacity: 0.72; }

.at-deco-dots { opacity: 0.85; }

/*
 * Slow, and never a snap. Her law: women are hypervigilant, and something
 * that juts reads as danger. So the mark unfolds rather than flips.
 */
.at-deco path,
.at-deco-dots {
	transform-origin: 20px 15px;
	transition: transform 620ms cubic-bezier(0.36, 0.02, 0.2, 1),
		opacity 620ms cubic-bezier(0.36, 0.02, 0.2, 1);
}

/* Open: the outer two lie down, the middle turns, and the dots rise. */
[aria-expanded="true"] .at-deco-one   { transform: translateY(4px) rotate(180deg); }
[aria-expanded="true"] .at-deco-two   { transform: rotate(90deg) scale(0.86); opacity: 1; }
[aria-expanded="true"] .at-deco-three { transform: translateY(-9px) rotate(180deg); opacity: 0.72; }
[aria-expanded="true"] .at-deco-dots  { transform: translateY(22px); opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
	.at-deco path,
	.at-deco-dots { transition: none; }
}

/* =========================================================
   THE ORANGE HAS DEPTH EVERYWHERE, NOT ONLY AT THE TOP
   Her words, 23 August: the beautiful orange behind the
   header is not the same as the one throughout the site,
   it's flat everywhere else.

   MEASURED BEFORE IT WAS CHANGED, off the rendered page at
   her width rather than off the stylesheet:

     header            #E9612C   dead flat
     hero, high        #EA6938   lifted
     hero, mid         #E9632F   fading
     hero, low         #E9612C   flat again by 430px
     everything below  #E9612C   flat

   So the lift she is seeing exists on one section, only at
   its top, and dies within four hundred pixels. Everything
   after it is a single solid fill.

   Now every orange ground carries the same body: warm and
   lit at the top, true in the middle, and a shade deeper at
   the foot so the section has a floor rather than an edge.
   ========================================================= */

:root {
	--orange-lit:  #F0703C;
	--orange-true: #E9612C;
	--orange-deep: #DC5622;

	--orange-body: linear-gradient(
		180deg,
		var(--orange-lit)  0%,
		var(--orange-true) 42%,
		var(--orange-true) 68%,
		var(--orange-deep) 100%
	);
}

.at-on-orange,
.jb-orange,
.at-top {
	background-color: var(--orange-true);
	background-image: var(--orange-body);
}

/*
 * The header sits on the hero, so the two must not each start their own
 * gradient and meet in a seam. The header takes the top of the body and the
 * hero carries on beneath it.
 */
.at-top {
	background-image: linear-gradient(
		180deg,
		var(--orange-lit) 0%,
		#EC6834 100%
	);
}

.at-hero.at-on-orange,
.jb-orange:first-of-type {
	background-image: linear-gradient(
		180deg,
		#EC6834 0%,
		var(--orange-true) 46%,
		var(--orange-true) 70%,
		var(--orange-deep) 100%
	);
}

/*
 * The parent's pink bloom sat on some sections and not others, which is half
 * of why one looked alive and the next looked dead. The body above replaces
 * it on orange, so the bloom is taken off rather than fighting it.
 */
.at-on-orange::before,
.jb-orange::before { background: none; }

/* The pink grounds get the same courtesy, far more gently. */
.at-on-pink,
.jb-pink {
	background-color: var(--tea-pink);
	background-image: linear-gradient( 180deg, #FDEAF9 0%, var(--tea-pink) 40%, #F7DCF1 100% );
}

/* =========================================================
   ONE READING SIZE, AND EVERYTHING IN PROPORTION TO IT
   Her words, 23 August: the writing is beautiful and she can
   barely read it. Her floor is twelve pixels — and twelve is
   a floor rather than a reading size.

   MEASURED AT 375 BEFORE IT WAS CHANGED. Eleven things sat
   under sixteen pixels and two of them sat at ELEVEN, which
   is below her own floor:

     11px  the masthead name, and the word Menu
     12px  every eyebrow
     13px  the skip link
     14px  the navigation, and a month in the diary
     15px  the footer

   So rather than nudging eleven rules, there is one reading
   size and three sizes derived from it. Nothing on this site
   is smaller than --small, and --small is fourteen.
   ========================================================= */

:root {
	/* The size a sentence is read at. Everything else follows it. */
	--read:  17px;
	--small: 14px;   /* a label, never a sentence. Her floor plus two. */
	--quiet: 15px;   /* the footer, the small print */
	--lift:  20px;   /* a line that wants to be met first */
}

@media (min-width: 600px) {
	:root { --read: 18px; --small: 15px; --quiet: 16px; --lift: 22px; }
}

/* ---------- the two that broke her floor outright ---------- */

.at-mark-link span {
	font-size: var(--small);
	letter-spacing: 0.24em;
}

.at-top-open,
.at-top-open em {
	font-size: var(--small);
	letter-spacing: 0.14em;
}

/* The footer carries her name too, and it was the last thing under her floor. */
.at-foot-mark span {
	font-size: var(--small);
	letter-spacing: 0.24em;
}

/* ---------- a label is never smaller than --small ---------- */

.at-eyebrow,
.jb-eyebrow,
.inv-kind,
.inv-house,
.at-diary-month,
.jb-mark-say,
.at-piece-kind {
	font-size: var(--small);
	letter-spacing: 0.2em;
}

.skip { font-size: var(--quiet); }

/* ---------- a sentence is read at --read ---------- */

.at-body p,
.at-prose p,
.at-card-copy,
.at-offer-words p,
.jb-body,
.jb-body p,
.jb-tile-body,
.at-plain p,
.at-m-h,
.inv-hours,
.inv-menu li,
.inv-bring {
	font-size: var(--read);
}

.at-plain-lede,
.jb-shout + .jb-body,
.at-lede { font-size: var(--lift); }

/* ---------- the ways through ---------- */

.at-foot-nav a,
.at-nav a,
.jb-link,
.at-act { font-size: var(--read); }

.at-foot-small,
.at-foot-small a,
.at-m-note,
.jb-who { font-size: var(--quiet); }

/* ---------- and a list is read, so it is read at --read ---------- */

.jb-list li,
.at-shape-list li,
.at-swap-list li,
.at-points li { font-size: var(--read); }

/* ---------------------------------------------------------------------------
 * HER WORDS CANNOT BE CUT — 23 August
 *
 * Eight blocks of her own writing were losing forty pixels off the right of
 * every line on the live home page, at the width she reads in. Eagle Eye and
 * A Paige's Heartbeat both measured it against the box that clips, which is
 * the honest measurement, and both got the same eight.
 *
 * THE CAUSE IS THE MOVEMENT ITSELF, not the observer that drives it.
 * `.float--from-right` parks a block forty pixels to the right of where it
 * belongs. Inside a container that is exactly as wide as the block and clips
 * its own overflow, those forty pixels have nowhere to be. The words are cut
 * for the whole of every slide, and cut permanently wherever a slide never
 * arrives — which on this page was twenty-eight blocks out of thirty-two.
 *
 * A timer that rescues it is a patch over a design with nowhere to move. At
 * 379 pixels there is no room to travel sideways inside a full-width box, so
 * below 600 the movement rises and warms instead of travelling across. It is
 * still movement and it is still hers; it simply cannot take a word with it.
 *
 * Above 600 there is room, so the sideways travel stays exactly as built.
 * ------------------------------------------------------------------------- */
@media (max-width: 599px) {

	.js-float .float--from-left,
	.js-float .float--from-right {
		transform: translateY(var(--lift-run, 18px));
	}

	.js-float .float--from-left.is-in,
	.js-float .float--from-right.is-in {
		transform: none;
	}

	/* The kaleidoscope reads its movement by name, so it is named again. */
	.js-float .at-kal-one.float--from-right.is-in {
		animation-name: at-in-from-below;
	}
}

@keyframes at-in-from-below {
	from { opacity: 0; transform: translateY(var(--lift-run, 18px)); }
	to   { opacity: 1; transform: none; }
}

/*
 * And a floor under the floor, owing nothing to JavaScript: a block held for
 * arrival never sits outside the box that holds it, whatever else fails.
 */
.js-float .float--from-left,
.js-float .float--from-right {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * THE LAST FOUR UNDER HER FLOOR — 24 August
 *
 * Measured the corrected way: the COMPUTED size at 375, never the floor
 * written inside a clamp. At her width a clamp always takes its minimum, so
 * the number written as a floor is the number she actually reads. Matri Pair
 * passed a floor audit on fourteen pages while she could not read the site.
 *
 * Aunt Tea reads at seventeen, which is comfortable. These four step numerals
 * were the only marks left under fourteen, and a numeral she cannot read is
 * a numeral doing nothing.
 * ------------------------------------------------------------------------- */
.at-steps-no {
	font-size: var(--small);
	letter-spacing: 0.14em;
}

/* ---------------------------------------------------------------------------
 * TWO DOORS — the choosing page, 24 August
 *
 * Her two grounds only. Raspberry was struck once and a cream would be the
 * same mistake by a gentler name.
 *
 * Sized from the narrow end. Everything here is checked at 375 first and
 * allowed to grow, rather than designed wide and squeezed.
 * ------------------------------------------------------------------------- */

.at-doorindex {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: clamp(20px, 5vw, 30px);
}

@media (min-width: 600px) {
	.at-doorindex { flex-direction: row; justify-content: center; }
}

.at-door .in { max-width: 640px; }

/* ---------- door one: one thing at a time ---------- */

.at-step {
	margin: 0 0 clamp(30px, 8vw, 48px);
}

.at-step-of {
	font-family: var(--font-util);
	font-size: var(--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.72;
	margin: 0 0 8px;
}

.at-step-ask {
	font-family: var(--font-util);
	font-weight: 400;
	font-size: clamp(24px, 7vw, 32px);
	line-height: 1.25;
	margin: 0 0 14px;
}

.at-step-say,
.at-card-say {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: var(--read);
	line-height: 1.5;
	padding: 14px 16px;
	border: 1.5px solid currentColor;
	border-radius: 14px;
	background: transparent;
	color: inherit;
	opacity: 0.9;
}

.at-step-say--long,
.at-card-say--long { border-radius: 18px; resize: vertical; }

.at-step-say::placeholder,
.at-card-say::placeholder { color: currentColor; opacity: 0.5; }

.at-step-note {
	font-size: var(--small);
	opacity: 0.78;
	margin: 10px 0 0;
}

.at-door-after {
	font-size: var(--quiet);
	opacity: 0.85;
	margin-top: clamp(24px, 6vw, 34px);
}

/* ---------- door two: all of it on one card ---------- */

.at-door-card {
	text-align: left;
	padding: clamp(26px, 7vw, 44px) clamp(20px, 6vw, 36px);
}

.at-card-head {
	font-family: var(--font-util);
	font-weight: 400;
	font-size: clamp(26px, 8vw, 36px);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 clamp(20px, 5vw, 28px);
}

.at-card-line { display: block; margin: 0 0 18px; }

.at-card-ask {
	display: block;
	font-size: var(--small);
	letter-spacing: 0.06em;
	margin: 0 0 7px;
	opacity: 0.86;
}

.at-card-act { display: block; text-align: center; margin: clamp(22px, 5vw, 30px) auto 0; }

.at-card-after {
	font-size: var(--small);
	text-align: center;
	opacity: 0.8;
	margin: 16px 0 0;
}

/*
 * A shown act rather than a working one. She can tap it and nothing happens,
 * which is the point -- she is choosing a door, never sending anything.
 */
.at-act--shown { cursor: default; }

/* ---------------------------------------------------------------------------
 * WHAT IS COMING UP — the band at the foot of every screen, 24 August
 *
 * Her instruction: once she publishes it, it must be available, and events
 * appear at the bottom of every screen.
 *
 * Sized from 375 first. A whole tea party has to be readable and tappable in
 * her pane without her turning the phone.
 * ------------------------------------------------------------------------- */

.at-coming .in { max-width: 720px; }

.at-coming-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: clamp(22px, 6vw, 32px);
}

.at-coming-one {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"when what"
		"act  act";
	gap: 4px clamp(14px, 4vw, 22px);
	align-items: center;
	padding: clamp(16px, 4.5vw, 22px) clamp(16px, 4.5vw, 24px);
	border: 1.5px solid currentColor;
	border-radius: 22px;
	text-decoration: none;
	color: inherit;
	transition: transform var(--float-time, 620ms) var(--float-ease);
}

@media (min-width: 600px) {
	.at-coming-one {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "when what act";
	}
}

@media (hover: hover) {
	.at-coming-one:hover { transform: translateY(-3px); }
}

.at-coming-when {
	grid-area: when;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	min-width: 3.2em;
}

.at-coming-day {
	font-family: var(--font-util);
	font-size: clamp(30px, 9vw, 40px);
}

.at-coming-month {
	font-size: var(--small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-top: 5px;
	opacity: 0.82;
}

.at-coming-what { grid-area: what; display: block; }

.at-coming-name {
	display: block;
	font-family: var(--font-util);
	font-size: clamp(19px, 5.4vw, 24px);
	line-height: 1.25;
}

.at-coming-where,
.at-coming-time {
	display: block;
	font-size: var(--small);
	opacity: 0.85;
	margin-top: 3px;
}

.at-coming-act {
	grid-area: act;
	display: block;
	font-size: var(--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 12px;
	opacity: 0.9;
	white-space: nowrap;
}

@media (min-width: 600px) {
	.at-coming-act { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
 * THE FULL LOGO IN THE FOOTER, AND THE LAST FLAT ORANGE — 24 August
 *
 * Her two asks together. The logo is pale pink on nothing, so the orange
 * footer is where it belongs and no other ground would hold it.
 *
 * And the footer was the one orange on the site with no light in it. Every
 * other orange section carries the same warm gradient; this sat flat beneath
 * them, which is exactly what she means by flat orange.
 * ------------------------------------------------------------------------- */

.at-foot {
	background:
		linear-gradient(
			180deg,
			var(--orange-lit, #F0703C) 0%,
			var(--tea-orange) 46%,
			var(--orange-deep, #DC5622) 100%
		);
}

.at-foot-logo {
	max-width: 1180px;
	margin: clamp(30px, 7vw, 48px) auto clamp(6px, 2vw, 12px);
	padding: 0 clamp(18px, 4vw, 40px);
	text-align: center;
}

.at-foot-logo img {
	display: block;
	width: min(210px, 56vw);
	height: auto;
	margin: 0 auto;
	opacity: 0.92;
}

/* What a place costs, said before she gives anything. */
.at-moment-cost {
	font-family: var(--font-util);
	font-size: clamp(18px, 5vw, 22px);
	line-height: 1.35;
	margin: 0 0 clamp(16px, 4vw, 22px);
	padding: 14px 18px;
	border: 1.5px solid currentColor;
	border-radius: 16px;
}

/* The door, and the word said back to her when she is in. */
.at-card-lede { font-size: var(--read); line-height: 1.5; text-align: center; margin: 0 0 clamp(20px, 5vw, 26px); }
.at-door-card .at-said {
	font-size: var(--read);
	line-height: 1.5;
	text-align: center;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1.5px solid currentColor;
	border-radius: 16px;
}
.at-door-card button.at-act { width: 100%; border: 0; cursor: pointer; font: inherit; }
/* =========================================================
   THE JUICE BAR KIT
   Read off library.elementor.com/juice-bar at 379 on
   22 August, section by section, rather than remembered.

   The vocabulary, in her four colours:

     the oval      a photograph in an ellipse with a solid
                   ellipse offset behind it. The signature.
     the card      an inset rounded panel of the opposite
                   colour, floating on a full-bleed ground
     the shout     an enormous centred display heading
     the underline a text link, ruled, letterspaced
     the marks     a strip of small marks with labels
     the tile      picture, heading, few words, link — the
                   pattern the juices are laid out in

   Every section changes ground. That alternation is the
   template, more than any single piece of it.
   ========================================================= */

/* ---------- grounds ---------- */

.jb { padding: clamp(48px, 11vw, 120px) clamp(18px, 5vw, 60px); }
.jb-in { max-width: 1080px; margin: 0 auto; }
.jb-narrow { max-width: 640px; margin: 0 auto; }

.jb-orange { background: var(--tea-orange); color: var(--tea-pink); }
.jb-pink   { background: var(--tea-pink);   color: var(--tea-magenta); }

.jb-tight { padding-top: clamp(30px, 7vw, 70px); }

/* ---------- the shout ---------- */

.jb-shout {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(30px, 9.2vw, 68px);
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-align: center;
	text-wrap: balance;
	margin: 0 0 clamp(20px, 4.5vw, 34px);
}

.jb-shout--small { font-size: clamp(25px, 7.4vw, 46px); }

.jb-eyebrow {
	font-family: var(--font-head);
	font-size: clamp(11px, 3vw, 13px);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 clamp(16px, 3.5vw, 24px);
	opacity: 0.92;
}

.jb-body {
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.62;
	text-align: center;
	max-width: 34ch;
	margin: 0 auto clamp(22px, 5vw, 34px);
}

.jb-body:last-child { margin-bottom: 0; }
.jb-body p { margin: 0 0 1em; }
.jb-body p:last-child { margin-bottom: 0; }

/* ---------- the underline ---------- */

.jb-link {
	display: inline-block;
	font-family: var(--font-head);
	font-size: clamp(14px, 3.8vw, 17px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-thickness: 1px;
	color: inherit;
	padding: 6px 2px;
}

.jb-link:hover,
.jb-link:focus-visible { text-underline-offset: 4px; }

.jb-middle { text-align: center; }

/* ---------- the card ---------- */

/*
 * HER HERO STATEMENT, COPIED RATHER THAN INTERPRETED
 *
 * Her words, 22 August: the hero section is pink, and it's curved, and that's
 * got orange writing on it. She built this panel herself on the home page and
 * it is the piece she says she loves, so every value below is read straight
 * off `.at-panel` and `.at-turn` rather than designed again.
 *
 * Pink ground. Thirty pixels of curve. Orange writing. Bellefair rather than
 * Cinzel — the reading face, set very large and given room to breathe.
 */
.jb-card {
	background: var(--tea-pink);
	color: var(--tea-orange);
	border-radius: 30px;
	padding: clamp(34px, 8vw, 76px) clamp(22px, 6vw, 60px);
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.jb-orange .jb-card,
.jb-pink   .jb-card { background: var(--tea-pink); color: var(--tea-orange); }

.jb-card h2,
.jb-card p { color: var(--tea-orange); }

.jb-quote {
	font-family: var(--font-util);
	font-weight: 400;
	font-size: clamp(32px, 11.5vw, 58px);
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	margin: 0 0 0.35em;
}

/* Her line under it: Cinzel, twenty on twenty-nine, centred. */
.jb-who {
	font-family: var(--font-head);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.45;
	text-align: center;
	max-width: 34ch;
	margin: 0 auto;
}

/* Her holder gives the card almost the whole pane at 379. */
.jb-card-holder {
	padding-left: clamp(10px, 3vw, 40px);
	padding-right: clamp(10px, 3vw, 40px);
}

/* ---------------------------------------------------------
   THE FRAME, COPIED OFF HER OWN HERO MARK

   Her words, 22 August: that frame is too heavy, too thick,
   and the image is on a curve. She is right — mine was a
   seven pixel solid ring with a second ellipse shoved out
   behind it.

   Hers is two fine rings with air between them, drawn
   separately so the weight and the space are chosen rather
   than inherited, and pink because pink is what goes on the
   orange. Read straight off `.at-hero-mark`.
   --------------------------------------------------------- */

.jb-oval {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin: clamp(20px, 4vw, 34px) auto clamp(26px, 5vw, 42px);
	padding: var(--ring-space, clamp(10px, 3vw, 20px));
}

.jb-oval img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border: 0;
	border-radius: 9999px;
	aspect-ratio: 16 / 9;
}

.jb-oval--tall img  { aspect-ratio: 4 / 5; }
.jb-oval--round img { aspect-ratio: 1 / 1; }

/* the ring nearest the picture */
.jb-oval::after {
	content: '';
	position: absolute;
	inset: calc(var(--ring-space, clamp(10px, 3vw, 20px)) / 2);
	border: 1.5px solid var(--tea-pink);
	border-radius: 9999px;
	pointer-events: none;
}

/* the ring holding it all */
.jb-oval::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--tea-pink);
	border-radius: 9999px;
	pointer-events: none;
	opacity: 0.62;
}

/* On a pink ground the rings turn orange, so the pairing always holds. */
.jb-pink .jb-oval::before,
.jb-pink .jb-oval::after { border-color: var(--tea-orange); }

/* ---------- the tile ---------- */

.jb-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(40px, 9vw, 76px);
}

.jb-tile { text-align: center; }

.jb-tile-pic {
	margin: 0 0 clamp(18px, 4vw, 28px);
	border-radius: clamp(16px, 4vw, 26px);
	overflow: hidden;
	background: rgba(252, 228, 247, 0.18);
}

.jb-pink .jb-tile-pic { background: rgba(233, 97, 44, 0.12); }

.jb-tile-pic img { display: block; width: 100%; height: auto; }

.jb-tile-head {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(20px, 5.6vw, 28px);
	line-height: 1.16;
	letter-spacing: 0.04em;
	margin: 0 0 0.5em;
}

.jb-tile-body {
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.55;
	max-width: 30ch;
	margin: 0 auto clamp(16px, 3.5vw, 22px);
}

@media (min-width: 800px) {
	.jb-tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jb-tiles--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the marks ---------- */

.jb-marks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 6vw, 44px) clamp(14px, 4vw, 30px);
	text-align: center;
}

.jb-mark-fig {
	display: block;
	width: clamp(38px, 10vw, 54px);
	height: clamp(38px, 10vw, 54px);
	margin: 0 auto clamp(10px, 2.5vw, 16px);
}

.jb-mark-fig svg { display: block; width: 100%; height: 100%; }

.jb-mark-say {
	font-family: var(--font-head);
	font-size: clamp(13px, 3.5vw, 16px);
	line-height: 1.3;
	letter-spacing: 0.06em;
}

@media (min-width: 700px) {
	.jb-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- a row: picture one side, words the other ---------- */

.jb-row {
	display: grid;
	gap: clamp(26px, 6vw, 54px);
	align-items: center;
}

.jb-row + .jb-row { margin-top: clamp(52px, 11vw, 110px); }

.jb-row .jb-shout,
.jb-row .jb-body { text-align: center; }

@media (min-width: 860px) {
	.jb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); }
	.jb-row--flip .jb-row-pic { order: 2; }
	.jb-row .jb-shout,
	.jb-row .jb-body { text-align: left; margin-left: 0; }
	.jb-row .jb-middle { text-align: left; }
	.jb-row .jb-oval { margin-left: 0; margin-right: auto; }
}

/* ---------- a list, the Juice Bar way ---------- */

.jb-list { list-style: none; margin: 0; padding: 0; max-width: 40ch; margin-inline: auto; }

.jb-list li {
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.5;
	padding: clamp(12px, 3vw, 16px) 0;
	border-bottom: 1px solid currentColor;
	text-align: center;
}

.jb-list li:first-child { border-top: 1px solid currentColor; }

.jb-orange .jb-list li { border-color: rgba(252, 228, 247, 0.34); }
.jb-pink .jb-list li   { border-color: rgba(204, 51, 102, 0.3); }

/* ---------- a moment, on a Juice Bar ground ---------- */

.jb .at-moment {
	background: transparent;
	padding: 0;
	margin: 0;
}

.jb-pink .at-moment-head,
.jb-pink .at-m-f label { color: var(--tea-magenta); }

.jb .at-moment-head {
	font-size: clamp(26px, 7.4vw, 44px);
	line-height: 1.1;
	text-align: center;
	letter-spacing: 0.005em;
}

.jb .at-moment-lede {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.6;
}

.jb .at-m-f { margin-inline: auto; }
.jb .at-m-go { text-align: center; }
.jb .at-m-note { text-align: center; }


/* A row whose picture has yet to arrive gives its whole width to the words. */
.jb-row-pic:empty { display: none; }
.jb-row:has(.jb-row-pic:empty) { grid-template-columns: minmax(0, 1fr); }

/* two voices, one after the other, on the same page */
.at-next { max-width: 780px; margin: 0 auto clamp(54px, 11vw, 110px); }
.at-next:last-child { margin-bottom: 0; }
.at-next .jb-card { margin-bottom: clamp(16px, 4vw, 24px); }
.at-next .jb-card:last-child { margin-bottom: 0; }
.at-next .jb-quote { font-size: clamp(23px, 6.6vw, 34px); line-height: 1.4; }
.jb-card--aunt { background: var(--tea-pink) !important; color: var(--tea-magenta) !important; }

/* the five sit under the one heading rather than beside it */
.at-foot-under { padding-left: clamp(16px, 5vw, 26px) !important; opacity: 0.86; }
/* =========================================================
   THE INVITATION
   Her spec, 22 August: beautiful script writing, pale pink
   paper, orange writing, the teapot and Aunt Tea at the top.
   Nothing about what to wear.

   A card rather than a page. Sized from 379 outward, and it
   prints on one sheet.
   ========================================================= */

.inv-room {
	background: var(--tea-orange);
	padding: clamp(24px, 6vw, 72px) clamp(12px, 4vw, 48px) clamp(46px, 9vw, 96px);
}

.inv-card {
	--inv-hand: 'Allura', cursive;

	max-width: 640px;
	margin: 0 auto;
	background: var(--tea-pink);
	color: var(--tea-orange);
	border-radius: 30px;
	padding: clamp(34px, 8vw, 76px) clamp(22px, 6vw, 60px) clamp(38px, 8vw, 66px);
	text-align: center;
	box-shadow: 0 10px 44px rgba(51, 51, 51, 0.22);
}

/* ---------- the crest ---------- */

.inv-crest { margin: 0 0 clamp(22px, 5vw, 34px); }

/*
 * Her teapot arrives on its own orange ground, which lands as a hard square
 * on pink paper. Rounded, it reads as a seal pressed into the card, which is
 * what an old-fashioned invitation wants at the top of it anyway.
 */
.inv-pot {
	display: block;
	width: clamp(64px, 17vw, 92px);
	height: auto;
	margin: 0 auto clamp(12px, 3vw, 18px);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(233, 97, 44, 0.35), 0 0 0 6px var(--tea-pink), 0 0 0 7px rgba(233, 97, 44, 0.35);
}

.inv-house {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(13px, 3.4vw, 16px);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	text-indent: 0.34em;
}

/* ---------- the hand ---------- */

.inv-hand {
	font-family: var(--inv-hand);
	line-height: 1.35;
}

/* ---------- the asking ---------- */

.inv-asks {
	font-family: var(--font-util);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.5;
	margin: 0 0 clamp(16px, 3.5vw, 24px);
}

.inv-asks .inv-hand {
	display: block;
	font-size: clamp(34px, 11vw, 54px);
	line-height: 1.15;
	margin: 0 0 0.12em;
}

.inv-what {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(24px, 7vw, 40px);
	line-height: 1.18;
	letter-spacing: 0.01em;
	margin: 0 0 0.3em;
	text-wrap: balance;
}

.inv-kind {
	font-family: var(--font-head);
	font-size: clamp(11px, 3vw, 13px);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.85;
}

/* ---------- a rule, drawn rather than borrowed ---------- */

.inv-rule {
	width: clamp(56px, 18vw, 96px);
	height: 1px;
	margin: clamp(22px, 5vw, 34px) auto;
	background: currentColor;
	opacity: 0.42;
}

/* ---------- the hours ---------- */

.inv-day {
	font-family: var(--font-util);
	font-size: clamp(23px, 6.4vw, 32px);
	line-height: 1.3;
	margin: 0 0 0.4em;
}

.inv-hours {
	margin: 0 0 clamp(16px, 3.5vw, 22px);
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.7;
}

.inv-hours span { display: block; }

.inv-place {
	font-family: var(--font-head);
	font-size: clamp(15px, 4vw, 18px);
	line-height: 1.5;
	letter-spacing: 0.04em;
	margin: 0;
}

/* ---------- the table ---------- */

.inv-served {
	font-family: var(--font-util);
	font-size: clamp(18px, 4.8vw, 22px);
	margin: 0 0 0.6em;
}

.inv-menu {
	list-style: none;
	margin: 0 auto clamp(18px, 4vw, 26px);
	padding: 0;
	max-width: 30ch;
}

.inv-menu li {
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.65;
}

.inv-bring {
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.55;
	max-width: 32ch;
	margin: 0 auto;
}

/* ---------- her note, in her hand ---------- */

.inv-note { margin: 0; }

.inv-note .inv-hand {
	font-size: clamp(24px, 7vw, 34px);
	line-height: 1.45;
	margin: 0 0 0.5em;
	max-width: 26ch;
	margin-inline: auto;
}

.inv-note cite {
	font-family: var(--font-head);
	font-style: normal;
	font-size: clamp(11px, 3vw, 13px);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* ---------- do say you will come ---------- */

.inv-rsvp { margin: 0 0 clamp(18px, 4vw, 26px); }

.inv-rsvp .inv-hand {
	display: block;
	font-size: clamp(30px, 9vw, 46px);
	line-height: 1.2;
}

.inv-by {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(12px, 3.2vw, 14px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0.5em 0 0;
}

.inv-act { margin: 0; }
.inv-act .jb-link { color: var(--tea-orange); }

/* ---------- the small print, where it belongs ---------- */

.inv-foot {
	margin: clamp(26px, 6vw, 40px) 0 0;
	padding: clamp(18px, 4vw, 24px) 0 0;
	border-top: 1px solid currentColor;
	text-align: left;
	font-size: clamp(13px, 3.4vw, 15px);
	line-height: 1.6;
	opacity: 0.9;
}

.inv-foot p { margin: 0 0 0.7em; }
.inv-foot p:last-child { margin: 0; }
.inv-foot strong { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.06em; }

/* ---------- the hands, offered to her alone ---------- */

.inv-hands {
	max-width: 640px;
	margin: clamp(26px, 6vw, 40px) auto 0;
	padding: clamp(20px, 5vw, 28px);
	border: 1px dashed rgba(252, 228, 247, 0.6);
	border-radius: 18px;
	color: var(--tea-pink);
	text-align: center;
}

.inv-hands-say,
.inv-hands-note {
	font-size: clamp(14px, 3.7vw, 16px);
	line-height: 1.5;
	margin: 0 0 clamp(14px, 3vw, 18px);
}

.inv-hands-note { margin: clamp(14px, 3vw, 18px) 0 0; opacity: 0.85; }

.inv-hands-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.inv-hand-pick {
	font-size: clamp(20px, 5.4vw, 26px);
	line-height: 1.2;
	padding: 10px 18px;
	color: var(--tea-orange);
	background: var(--tea-pink);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
}

.inv-hand-pick.is-taken { border-color: var(--tea-magenta); color: var(--tea-magenta); }

/* ---------- on paper ---------- */

@media print {
	.inv-room { background: #fff; padding: 0; }
	.inv-card { box-shadow: none; border-radius: 0; max-width: none; }
	.inv-hands, .at-top, .at-foot, .inv-act { display: none !important; }
}