/* ── THE ATELIER ───────────────────────────────────────────────────────────
   One moment at a time. Nothing to press but her own answers. Her ground
   fills behind her as she goes.
   ─────────────────────────────────────────────────────────────────────── */
.atelier-page {
	position: relative;
	min-height: 86vh;
	display: grid;
	place-items: center;
	padding: 4rem 1.4rem 6rem;
	overflow: hidden;
}

/* her ground, filling behind the words */
.at-plot {
	position: absolute; inset: auto 0 0; height: 46%;
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
	gap: .9rem; padding: 0 1.4rem 2.6rem;
	pointer-events: none;
	opacity: 0; transition: opacity .9s ease;
}
.at-plot.has-ground { opacity: 1; }
.at-patch {
	position: relative;
	width: clamp(5.4rem, 12vw, 8.4rem);
	height: clamp(3.4rem, 8vw, 5rem);
	border-radius: .7rem;
	background: #4FB07A;
	box-shadow: inset 0 -10px 0 rgba(0,0,0,.08);
	animation: at-grow .8s cubic-bezier(.2,.9,.25,1) both;
	animation-delay: calc(var(--i) * .06s);
}
.at-patch span {
	position: absolute; left: 50%; bottom: calc(100% + .3rem);
	transform: translateX(-50%);
	font: 600 .7rem/1.2 var(--body);
	color: var(--ink); background: rgba(255,255,255,.9);
	padding: .18rem .45rem; border-radius: 999px; white-space: nowrap;
	max-width: 9rem; overflow: hidden; text-overflow: ellipsis;
}
.at-orchard { background: #3E9C6B; }
.at-people  { background: #E8306F; }
.at-glass   { background: #CFEAF0; }
.at-bed     { background: #F5C518; }
.at-shed    { background: #4A8C68; }
@keyframes at-grow { from { transform: translateY(26px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.at-stage { position: relative; z-index: 2; max-width: 40rem; text-align: left; }

.at-say {
	font-family: var(--head);
	font-size: clamp(2.1rem, 5.4vw, 3.5rem);
	line-height: 1.12;
	color: var(--ink);
	margin: 0 0 1.8rem;
	opacity: 0;
}
.at-say.is-in { animation: at-in .8s ease both; }
@keyframes at-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.at-lines {
	display: grid;
	gap: 0;
	max-width: 34rem;
	margin: 0 auto;
	border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
	text-align: left;
}
/* HERS, 14 OCT 2026: "the way you've got the choices and how unprofessional
   that looks is really bad". They were generic rounded pills. A choice here is
   a line in a list you read, set the way the rest of her type is set, with the
   mark filling as you come to it. */
.at-line {
	position: relative;
	display: flex; align-items: baseline; gap: 1rem;
	width: 100%;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
	background: transparent;
	color: var(--ink);
	font-family: var(--head);
	font-size: clamp(1.28rem, 3.1vw, 1.72rem);
	line-height: 1.3;
	text-align: left;
	padding: 1.25rem .4rem 1.25rem 0;
	cursor: pointer;
	animation: at-in .6s ease both;
	animation-delay: calc(.2s + var(--i) * .09s);
	transition: color .25s ease, padding-left .25s ease;
}
.at-line::before {
	content: '';
	flex: 0 0 auto;
	width: .52rem; height: .52rem;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--ink) 34%, transparent);
	transform: translateY(-.12em);
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.at-line:hover, .at-line:focus-visible {
	color: var(--signal);
	padding-left: .5rem;
	outline: none;
}
.at-line:hover::before, .at-line:focus-visible::before {
	background: var(--signal);
	border-color: var(--signal);
	transform: translateY(-.12em) scale(1.25);
}

.at-own { margin: 1.6rem auto 0; max-width: 34rem; animation: at-in .7s .5s ease both; }
.at-own-why { margin: 0 0 .5rem; font-size: 1rem; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.at-own-row { display: flex; gap: .5rem; }
.at-own-row input {
	flex: 1; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--ink) 26%, transparent);
	background: transparent; padding: .45rem .2rem;
	font: 500 1.14rem/1.35 var(--body); color: var(--ink);
}
.at-own-row input:focus { outline: none; border-bottom-color: var(--signal); }
.at-own-row button {
	border: 0; background: var(--signal); color: var(--on-signal);
	font: 600 .88rem/1 var(--body);
	padding: .62rem 1.1rem; border-radius: 999px; cursor: pointer;
}

.at-gave {
	font-family: var(--head);
	text-align: left;
	font-size: clamp(1.25rem, 3vw, 1.7rem);
	line-height: 1.42;
	color: var(--signal-deep);
	margin: 1.6rem 0 0;
	max-width: 34rem;
	padding-left: 1.1rem;
	border-left: 3px solid var(--signal);
	opacity: 0;
}
.at-gave.is-in { animation: at-in .9s ease both; }

.at-on { margin: 2rem 0 0; animation: at-in .9s .5s ease both; }
.at-go {
	display: inline-block;
	background: var(--signal); color: var(--on-signal);
	font: 600 1rem/1 var(--body);
	padding: .95rem 2rem; border-radius: 999px;
	text-decoration: none;
}
.at-go:hover { background: var(--ink); color: var(--ground); }

@media (prefers-reduced-motion: reduce) {
	.at-say, .at-line, .at-gave, .at-own, .at-on, .at-patch { animation: none !important; opacity: 1 !important; transform: none !important; }
}