/* ==========================================================================
   Holding page
   --------------------------------------------------------------------------
   Loaded only on the "Holding page" template (inc/holding.php). Measurements
   come from the 1920 × 1080 artboards in design-files/holding-page; sizes are
   fixed on desktop and step down on small screens, gutters scale with the
   viewport through --wpd-gutter.

     1. Page
     2. Sign-up panel
   ========================================================================== */


/* 1. Page
   ==========================================================================
   The logo, strapline and subline are centred on the screen as a group (on
   the artboard their middle sits 5px above the middle of the screen); the
   early access pill and "Launching soon" hang below them in the lower half.
   The supplier link is pinned to the bottom left. */

.curate-holding {
	position: relative;
	background: var(--wpd-white);
}

.curate-holding__main {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	min-block-size: 100vh;
	min-block-size: 100dvh;
	padding: 3.5rem var(--wpd-gutter) 4.125rem;
	text-align: center;
}

.curate-holding__brand {
	grid-row: 2;
}

.curate-holding__logo .wpd-logo {
	inline-size: min(14.125rem, 50vw);
	margin-inline: auto;
}

/* Times New Roman, 55.5px on desktop, tracked in to match the artboard's line
   lengths, and scaling down so the first line still fits a phone. Each
   sentence group is its own line. */
.curate-holding__tagline {
	margin-block-start: clamp(2rem, 4.9vh, 3.3125rem);
	font-family: var(--wpd-font-serif);
	font-size: clamp(1.75rem, 7.4vw, 3.46875rem);
	line-height: 0.94;
	letter-spacing: -0.035em;
}

.curate-holding__tagline > span {
	display: block;
}

.curate-holding__subline {
	max-inline-size: 16rem;
	margin: 2.125rem auto 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.36;
	letter-spacing: -0.015em;
}

.curate-holding__cta {
	grid-row: 3;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block-start: clamp(2.5rem, 14.9vh, 10.0625rem);
}

.curate-holding__trigger {
	display: inline-flex;
	align-items: center;
	block-size: 2.334rem;
	padding-inline: 1.75rem;
	border-radius: 999px;
	background: var(--wpd-stone);
	color: var(--wpd-ink);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.curate-holding__trigger:hover {
	background: var(--wpd-ink);
	color: var(--wpd-white);
}

/* The artboards show the pill without its fill while its panel is open, and
   the supplier line greyed out while the supplier panel is. */
.curate-holding:has(#signup[open]) .curate-holding__trigger {
	background: transparent;
	color: var(--wpd-ink);
	border: 1px solid;
}

.curate-holding:has(#supplier-signup[open]) .curate-holding__footer {
	color: var(--wpd-muted);
}

.curate-holding__soon {
	margin-block-start: 2rem;
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* 30px from the edges at 1920 — closer in than the panel's 70px gutter. */
.curate-holding__footer {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 0 clamp(1.25rem, 1.5625vw, 1.875rem) 1.5625rem;
	font-size: 0.75rem;
	line-height: 1.3;
	letter-spacing: -0.02em;
	transition: color 0.2s;
}

/* On a phone the link drops to its own line whole rather than breaking. */
.curate-holding__footer a {
	white-space: nowrap;
}


/* 2. Sign-up panel
   ==========================================================================
   A modal <dialog>, sliding in from the right. 570px of 1920 on desktop, never
   narrower than 30rem, full width on phones. Content sits at the bottom.

   The open and close slide use @starting-style and transition-behavior:
   allow-discrete. Browsers without them open and close without the slide. */

.curate-signup {
	position: fixed;
	inset: 0 0 0 auto;
	inline-size: min(100vw, max(30rem, 29.6875vw));
	max-inline-size: 100vw;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wpd-stone);
	color: var(--wpd-ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	translate: 100% 0;
	transition:
		translate 0.5s var(--wpd-ease-out),
		overlay 0.5s allow-discrete,
		display 0.5s allow-discrete;
}

.curate-signup[open] {
	display: flex;
	translate: 0 0;
}

@starting-style {
	.curate-signup[open] {
		translate: 100% 0;
	}
}

/* The panel itself takes focus when someone clicks its background; it is not a
   control, so no ring. Its contents keep theirs. */
.curate-signup:focus {
	outline: none;
}

/* The design shows the page undimmed beside the panel. */
.curate-signup::backdrop {
	background: transparent;
}

/* Without JavaScript the Sign-up link targets the panel instead of opening it
   as a modal. holding.js sets data-enhanced, which switches this off. */
.curate-signup:not([data-enhanced]):target {
	display: flex;
	translate: 0 0;
}

.curate-signup__close {
	position: absolute;
	inset-block-start: calc(var(--wpd-gutter) - 0.625rem);
	inset-inline-end: calc(var(--wpd-gutter) - 0.625rem);
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--wpd-graphite);
}

.curate-signup__close svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	overflow: visible;
	transition: rotate 0.3s var(--wpd-ease-out);
}

.curate-signup__close:hover svg {
	rotate: 90deg;
}

.curate-signup__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	inline-size: 100%;
	min-block-size: 100%;
	/* Clear the close button at the top when the panel scrolls on short screens. */
	padding: calc(var(--wpd-gutter) + 3rem) var(--wpd-gutter) var(--wpd-gutter);
	container-type: inline-size;
}

.curate-signup__intro,
.curate-signup__done {
	max-inline-size: 23rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3125;
	letter-spacing: -0.01em;
}

/* The supplier panel's first line: "Your products. More designers. One
   platform." 18px bold, allowed the panel's full width, on the same 21.6px
   line spacing as the paragraph under it. */
.curate-signup__intro strong {
	display: block;
	inline-size: max-content;
	max-inline-size: 100cqi;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.curate-signup--supplier {
	background: var(--wpd-cloud);
}

.curate-signup--supplier .curate-signup__intro {
	max-inline-size: 22rem;
	line-height: 1.35;
}

.curate-signup__done:focus {
	outline: none;
}

.curate-signup__form,
.curate-signup__done {
	margin-block-start: 1.625rem;
}

/* No interests row on the supplier form, so the email field sits closer. */
.curate-signup--supplier .curate-signup__form {
	margin-block-start: 1.125rem;
}

.curate-signup__form[hidden],
.curate-signup__done[hidden] {
	display: none;
}

/* "I'm interested in Curate as a:" — then the options, pushed to the right
   edge on one line, or wrapped under the label when the panel is too narrow. */
.curate-signup__interests {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.625rem;
	margin-block-end: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	letter-spacing: -0.01em;
}

.curate-signup__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.125rem;
	margin-inline-start: auto;
}

@container (max-width: 26.5rem) {
	.curate-signup__options {
		margin-inline-start: 0;
	}
}

.curate-signup__option {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	font-family: var(--wpd-font-serif);
	font-size: 1rem;
	font-style: italic;
	letter-spacing: 0;
	cursor: pointer;
}

.curate-signup__option input {
	appearance: none;
	flex: none;
	inline-size: 0.65625rem;
	block-size: 0.65625rem;
	margin: 0;
	border: 0.5px solid var(--wpd-ink);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s;
}

.curate-signup__option input:checked {
	background: var(--wpd-ink);
}

.curate-signup__option input:focus-visible {
	outline: 1px solid var(--wpd-ink);
	outline-offset: 2px;
}

.curate-signup__email {
	display: block;
	inline-size: 100%;
	block-size: 2.334rem;
	padding: 0 0.6875rem;
	border: 0.5px solid var(--wpd-ink);
	border-radius: 0;
	background: transparent;
	appearance: none;
	/* 16px on phones: anything smaller makes iOS zoom the page on focus. */
	font-size: 1rem;
}

.curate-signup__email::placeholder {
	color: var(--wpd-ink);
	opacity: 1;
	font-size: 0.75rem;
	font-weight: 500;
}

.curate-signup__email:focus-visible {
	outline: 1px solid var(--wpd-ink);
	outline-offset: 0;
}

@media (min-width: 48em) {
	.curate-signup__email {
		font-size: 0.875rem;
	}
}

.curate-signup__submit {
	display: block;
	inline-size: 100%;
	block-size: 2.334rem;
	margin-block-start: 0.5rem;
	border: 0.5px solid var(--wpd-ink);
	background: var(--wpd-ink);
	color: var(--wpd-white);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	transition: background-color 0.2s;
}

.curate-signup__submit:hover {
	background: var(--wpd-graphite);
}

.curate-signup__submit:disabled {
	cursor: progress;
	opacity: 0.6;
}

.curate-signup__submit:focus-visible {
	outline-offset: 2px;
}

.curate-signup__status {
	margin-block-start: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.curate-signup__status:empty {
	display: none;
}

.curate-signup__hp {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}