/**
 * Doorway chrome
 *
 * The parts every doorway concept shares: the shell, the wordmark and
 * quiet way in, the statement block, the footer and the language
 * popover. Concepts add only what distinguishes them - a light field,
 * a framed photograph, a mosaic - and never restate this.
 *
 * Extracted from concept A once the composition settled, so the three
 * concepts differ in what carries the page and in nothing else.
 */
@layer layout {
	/**
	 * Doorway shell
	 *
	 * Core reserves the flexible row for `main`, so the page
	 * fills the viewport without stretching the chrome. The
	 * shell is its own container so every element below reads
	 * the doorway's width rather than the viewport's.
	 */
	body.doorway {
		container-type: inline-size;
		container-name: doorway;
		min-height: 100dvh;
		isolation: isolate;
		background: var(--color-surface);
	}

	

	

	

	

	

	

	

	

	/**
	 * Header
	 *
	 * The wordmark and the way in. Signing in is a quiet
	 * offer, not the point of the page, so it is a link with
	 * a rule under it rather than a filled button competing
	 * with the family name.
	 */
	body > header.doorway {
		grid-column: content;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-m);
		padding-block: var(--space-m);
	}

	p.wordmark {
		font-family: var(--font-header);
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-on-surface);
		margin: 0;
	}

	a.enter {
		font-size: var(--font-size-s);
		color: var(--color-on-surface-variant);
		text-decoration: none;
		border-block-end: 1px solid var(--color-outline-variant);
		padding-block-end: 0.15em;
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		transition: color var(--duration-short-4) var(--easing-standard),
			border-color var(--duration-short-4) var(--easing-standard);
	}

	a.enter:hover,
	a.enter:focus-visible {
		color: var(--color-on-surface);
		border-color: var(--color-on-surface);
	}

	/**
	 * The statement
	 *
	 * Held to the left half on wide screens so the light
	 * field is visible beside it rather than behind the text.
	 */
	main.doorway {
		grid-column: content;
		display: grid;
		align-content: center;
		gap: var(--space-s);
		padding-block: var(--space-xl);
	}

	main.doorway h1 {
		font-family: var(--font-header);
		font-size: var(--font-size-6xl);
		font-weight: var(--font-weight-regular);
		line-height: 0.92;
		letter-spacing: -0.02em;
		color: var(--color-on-surface);
		margin: 0;
		max-inline-size: 12ch;
	}

	p.statement {
		max-inline-size: 46ch;
		font-size: var(--font-size-l);
		line-height: var(--line-height-relaxed);
		color: var(--color-on-surface-variant);
		margin: 0;
	}

	p.statement em {
		font-style: normal;
		color: var(--color-on-surface);
	}

	/**
	 * Footer
	 *
	 * The language control is a popover rather than a row of
	 * links, so adding Polish or German later costs nothing
	 * in layout. `details` gives the behaviour with no script.
	 */
	body > footer.doorway {
		grid-column: content;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		padding-block: var(--space-m);
		padding-block-end: calc(var(--space-m) + env(safe-area-inset-bottom));
	}

	p.tagline {
		font-size: var(--font-size-s);
		color: var(--color-on-surface-variant);
		margin: 0;
	}

	details.language {
		position: relative;
	}

	details.language > summary {
		list-style: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: var(--space-3xs);
		min-block-size: 44px;
		padding-inline: var(--space-2xs);
		font-size: var(--font-size-s);
		color: var(--color-on-surface-variant);
		border-radius: var(--radius-full, 999px);
	}

	details.language > summary::-webkit-details-marker {
		display: none;
	}

	details.language > summary:hover,
	details.language > summary:focus-visible {
		color: var(--color-on-surface);
	}

	details.language > summary > svg {
		inline-size: 0.7em;
		block-size: 0.7em;
		transition: transform var(--duration-short-4) var(--easing-standard);
	}

	details.language[open] > summary > svg {
		transform: rotate(180deg);
	}

	details.language > ul {
		position: absolute;
		inset-block-end: calc(100% + var(--space-2xs));
		inset-inline-end: 0;
		margin: 0;
		padding: var(--space-2xs);
		list-style: none;
		min-inline-size: 12ch;
		background: var(--color-surface-container-lowest);
		border: 1px solid var(--color-outline-variant);
		border-radius: var(--radius-m, 0.75rem);
		box-shadow: 0 1px 2px oklch(0 0 0 / 0.06),
			0 8px 24px oklch(0 0 0 / 0.10);
	}

	details.language a {
		display: flex;
		align-items: center;
		min-block-size: 44px;
		padding-inline: var(--space-2xs);
		border-radius: var(--radius-s, 0.5rem);
		font-size: var(--font-size-s);
		color: var(--color-on-surface);
		text-decoration: none;
	}

	details.language a[aria-current="true"] {
		color: var(--color-tertiary);
	}

	details.language a:hover,
	details.language a:focus-visible {
		background: var(--color-surface-container-high);
	}

	@container doorway (max-width: 40rem) {
		main.doorway h1 {
			font-size: var(--font-size-5xl);
			max-inline-size: 9ch;
		}

		body > footer.doorway {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2xs);
		}

		details.language > ul {
			inset-inline: 0 auto;
		}
	}

	/* A single settling entrance. Nothing loops in the text. */
	p.wordmark, a.enter, main.doorway h1, p.statement,
	p.tagline, details.language {
		animation: settle var(--duration-long-2, 500ms)
			var(--easing-decelerate, cubic-bezier(0, 0, 0, 1)) both;
	}

	p.wordmark { animation-delay: 40ms; }
	a.enter { animation-delay: 80ms; }
	main.doorway h1 { animation-delay: 140ms; }
	p.statement { animation-delay: 220ms; }
	p.tagline, details.language { animation-delay: 300ms; }

	@keyframes settle {
		from { opacity: 0; transform: translateY(0.5rem); }
		to { opacity: 1; transform: none; }
	}

	@media (prefers-reduced-motion: reduce) {
		div.light.field > span { animation: none; }

		p.wordmark, a.enter, main.doorway h1, p.statement,
		p.tagline, details.language { animation: none; }
	}
}