/*
  collectivepropertyholdings.com: the public landing page.
  Colors come from Lantern's design/tokens.css. No inline styles or scripts (see _headers CSP), no JS.

  Two moments, both built from the CPH roofline:
  1. On load, the mark draws itself on a street line and one window lights at dusk (about 2.5 s).
  2. On scroll, a long street of rooflines draws across the page while the sky turns from dusk to
     night and the windows light one by one (CSS scroll-driven animations).
  Where scroll-driven animations are unsupported, or the visitor prefers reduced motion, everything
  renders in a finished, still state.
*/

:root {
	--surface-0: #f6f5f2;
	--surface-1: #ffffff;
	--border: #e6e4df;
	--border-strong: #8e8b83;
	--ink: #1d1c1a;
	--ink-muted: #66635c;
	--brand: #1f3a56;
	--on-brand: #ffffff;
	--glow: #d99a3a;
	--focus: #3d6fb6;

	--grain: url(/grain.svg);
	--dusk-core: 0.42;
	--dusk-mid: 0.14;
	--sky-dusk: 0.24;
	--sky-night-color: #c3d0df;
	--sky-night: 0.75;
	--masthead-bg: rgba(246, 245, 242, 0.84);

	--gutter: 16px;
	--wrap: 1200px;
	--ease-draw: cubic-bezier(0.55, 0.08, 0.3, 1);
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--surface-0: #141413;
		--surface-1: #1c1c1a;
		--border: #2e2d2a;
		--border-strong: #6f6c65;
		--ink: #ecebe7;
		--ink-muted: #a3a099;
		--brand: #a3bedd;
		--on-brand: #10202f;
		--glow: #e6b161;
		--focus: #93b6ea;

		--grain: url(/grain-dark.svg);
		--dusk-core: 0.34;
		--dusk-mid: 0.1;
		--sky-dusk: 0.16;
		--sky-night-color: #0a1826;
		--sky-night: 0.95;
		--masthead-bg: rgba(20, 20, 19, 0.82);
	}
}

@media (min-width: 640px) {
	:root {
		--gutter: 32px;
	}
}

@media (min-width: 1100px) {
	:root {
		--gutter: 48px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 88px;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* A faint paper grain: a 180 px SVG noise tile, a few hundred bytes. */
	background: var(--surface-0) var(--grain) repeat;
	color: var(--ink);
	font-family:
		'Instrument Sans',
		system-ui,
		-apple-system,
		'Segoe UI',
		sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

main {
	flex: 1;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

a {
	color: var(--brand);
	overflow-wrap: anywhere;
}

a:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Text links: a quiet resting underline, and a firmer one that draws in from the left on hover or focus. */
.draw {
	text-decoration: none;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(var(--border-strong), var(--border-strong));
	background-size:
		0% 2px,
		100% 1px;
	background-position:
		0 100%,
		0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
	transition: background-size 380ms var(--ease-out);
}

.draw:hover,
.draw:focus-visible {
	background-size:
		100% 2px,
		100% 1px;
}

/* ---------- Masthead (appears after the hero) ---------- */

.masthead {
	display: none;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	background: var(--masthead-bg);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid var(--border);
}

.masthead-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.masthead-home {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--brand);
	text-decoration: none;
}

.masthead-mark {
	display: block;
	width: 92px;
	height: auto;
	overflow: hidden;
}

.masthead-mark path {
	fill: none;
	stroke: var(--brand);
	stroke-width: 22;
	stroke-linejoin: miter;
}

.masthead-name {
	display: none;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.masthead-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 0.9375rem;
	font-weight: 500;
}

.masthead-nav .draw {
	display: none;
	color: var(--ink);
}

.masthead-signin {
	padding: 7px 16px;
	border: 1px solid var(--brand);
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition:
		background-color 200ms ease,
		color 200ms ease;
}

.masthead-signin:hover,
.masthead-signin:focus-visible {
	background: var(--brand);
	color: var(--on-brand);
}

.masthead-signin:focus-visible {
	border-radius: 999px;
}

@media (min-width: 520px) {
	.masthead-name {
		display: inline;
	}
}

@media (min-width: 760px) {
	.masthead-nav .draw {
		display: inline;
	}
}

/* ---------- Hero ---------- */

.hero {
	padding-top: clamp(40px, 9vh, 112px);
}

.scene {
	padding: 0 var(--gutter);
}

.roofline {
	display: block;
	width: 100%;
	max-width: 920px;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.roof path {
	fill: none;
	stroke: var(--brand);
	stroke-width: 15;
	stroke-linejoin: miter;
	stroke-miterlimit: 4;
	stroke-linecap: butt;
}

.dusk-core {
	stop-color: var(--glow);
	stop-opacity: var(--dusk-core);
}
.dusk-mid {
	stop-color: var(--glow);
	stop-opacity: var(--dusk-mid);
}
.dusk-edge {
	stop-color: var(--glow);
	stop-opacity: 0;
}

/* Three nested layers so the hover response, the one-time bloom and the slow breathing never fight
   over the same property: .sky (hover) > .bloom (on load) > .glow (ambient). */
.sky,
.bloom,
.glow {
	transform-box: view-box;
	transform-origin: 400px 140px;
}

.sky {
	opacity: 0.85;
	transition:
		transform 900ms var(--ease-out),
		opacity 900ms var(--ease-out);
}

.pane {
	fill: var(--glow);
}

.muntin {
	fill: none;
	stroke: var(--surface-0);
	stroke-width: 2.5;
}

/* The street the houses stand on: a hairline across the whole page. */
.street-line {
	height: 1px;
	background: var(--border-strong);
	transform-origin: 50% 50%;
}

.nameplate {
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(28px, 5vh, 48px) var(--gutter) 0;
	text-align: center;
}

h1 {
	margin: 0;
	font-family: 'Newsreader', Georgia, serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(2.375rem, 1.3rem + 4.4vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.022em;
	color: var(--brand);
	text-wrap: balance;
}

.tagline {
	margin: 0.875rem auto 0;
	max-width: 30ch;
	font-family: 'Newsreader', Georgia, serif;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	line-height: 1.4;
	color: var(--ink-muted);
	text-wrap: balance;
}

.action {
	margin: 2rem 0 0;
}

.button {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	border-radius: 8px;
	background: var(--brand);
	color: var(--on-brand);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	text-decoration: none;
	transition:
		background-color 200ms ease,
		transform 120ms ease;
}

.button:hover,
.button:focus-visible {
	background: color-mix(in srgb, var(--brand) 86%, var(--ink));
}

.button:active {
	transform: translateY(1px);
}

.button:focus-visible {
	outline-offset: 4px;
	border-radius: 8px;
}

.hint {
	margin: 1rem auto 0;
	max-width: 36ch;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-muted);
	text-wrap: balance;
}

/* Hovering or focusing the sign-in button turns the porch light up a little. */
.hero:has(.button:hover, .button:focus-visible) .sky {
	opacity: 1;
	transform: scale(1.06);
}

/* ---------- Section headings ---------- */

.display {
	margin: 0;
	max-width: 13ch;
	font-family: 'Newsreader', Georgia, serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: clamp(2.125rem, 1.3rem + 3.2vw, 3.75rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ink);
	text-wrap: balance;
}

/* ---------- How renting with us works ---------- */

.renting {
	padding-top: clamp(112px, 18vh, 200px);
}

.street {
	margin-top: clamp(32px, 5vw, 64px);
	view-timeline-name: --street;
	view-timeline-axis: block;
}

.street-art {
	display: block;
	width: 100%;
	height: clamp(128px, 15vw, 236px);
}

.sky-top {
	stop-color: var(--sky-night-color);
	stop-opacity: 0;
}
.sky-dusk {
	stop-color: var(--glow);
	stop-opacity: var(--sky-dusk);
}
.sky-night {
	stop-color: var(--sky-night-color);
	stop-opacity: var(--sky-night);
}

/* Still state: night has fallen and a few windows are lit. */
.dusk-layer {
	opacity: 0;
}

.rooftops {
	fill: none;
	stroke: var(--brand);
	stroke-width: 6;
	stroke-linejoin: miter;
	stroke-miterlimit: 4;
}

.ground {
	fill: none;
	stroke: var(--border-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.frame {
	fill: none;
	stroke: var(--brand);
	stroke-opacity: 0.35;
	stroke-width: 1.5;
}

.lamp {
	fill: var(--glow);
}

.bar {
	fill: none;
	stroke: var(--surface-0);
	stroke-width: 1.6;
}

.win .lamp,
.win .bar {
	opacity: 0;
}

.win.keep .lamp,
.win.keep .bar {
	opacity: 1;
}

.w1 {
	--i: 0;
}
.w2 {
	--i: 1;
}
.w3 {
	--i: 2;
}
.w4 {
	--i: 3;
}
.w5 {
	--i: 4;
}
.w6 {
	--i: 5;
}
.w7 {
	--i: 6;
}
.w8 {
	--i: 7;
}
.w9 {
	--i: 8;
}
.w10 {
	--i: 9;
}
.w11 {
	--i: 10;
}

.steps {
	list-style: none;
	margin: clamp(40px, 6vw, 72px) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: step;
}

.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 12px;
	padding: 24px 0 28px;
	border-top: 1px solid var(--border-strong);
}

.steps li::before {
	content: counter(step);
	grid-row: 1 / span 2;
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 300;
	font-size: 2.5rem;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--brand);
}

.step-title {
	margin: 0;
	font-family: 'Newsreader', Georgia, serif;
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}

.step-note {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--ink-muted);
}

.soon {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.5;
}

@media (min-width: 860px) {
	.steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
	}
	.steps li {
		display: block;
		padding-top: 20px;
	}
	.steps li::before {
		display: block;
		margin-bottom: 28px;
		font-size: 3.5rem;
	}
}

/* ---------- Contact ---------- */

.contact {
	padding-top: clamp(72px, 12vh, 128px);
}

.contact-list {
	margin: clamp(20px, 3vw, 32px) 0 0;
}

.contact-row {
	padding: 16px 0;
	border-top: 1px solid var(--border-strong);
}

.contact-row:last-child {
	border-bottom: 1px solid var(--border-strong);
}

dt {
	margin-bottom: 6px;
	font-size: 0.9375rem;
	color: var(--ink-muted);
}

dd {
	margin: 0;
	font-family: 'Newsreader', Georgia, serif;
	font-size: clamp(1.0625rem, 0.8rem + 1.1vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

address {
	font-style: normal;
}

dd .draw {
	overflow-wrap: normal;
}

@media (min-width: 760px) {
	.contact-row {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		align-items: baseline;
		gap: 24px;
		padding: 28px 0 32px;
	}
	dt {
		margin: 0;
	}
}

/* ---------- Footer ---------- */

.footer {
	margin-top: clamp(48px, 8vh, 80px);
}

/* The name, set large as a sign-off. It repeats the h1, so it is hidden from screen readers. */
.wordmark {
	margin: 0 0 clamp(24px, 4vw, 48px);
	font-family: 'Newsreader', Georgia, serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 10.5vw;
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--brand);
	text-wrap: balance;
}

@media (min-width: 760px) {
	.wordmark {
		white-space: nowrap;
		font-size: calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 17);
	}
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 20px 0 32px;
	border-top: 1px solid var(--border);
	font-size: 0.875rem;
	color: var(--ink-muted);
}

.footer-row p {
	margin: 0;
}

.footer-row .draw {
	color: var(--ink-muted);
}

/* ---------- Motion: page load (only when the visitor has not asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.street-line {
		animation: street 1100ms var(--ease-out) both;
	}

	.roof path[pathLength] {
		stroke-dasharray: 1 1;
		stroke-dashoffset: 1;
	}

	.house {
		animation: draw 1300ms var(--ease-draw) 250ms forwards;
	}

	.leg {
		animation: draw 700ms var(--ease-out) 1050ms forwards;
	}

	/* The two legs meet at the peak; the joined path then takes over so the peak has a clean point. */
	.peak {
		opacity: 0;
		animation: appear 1ms linear 1760ms forwards;
	}

	.window {
		opacity: 0;
		animation: switch-on 650ms ease-out 1850ms forwards;
	}

	.bloom {
		animation: bloom 1600ms var(--ease-out) 1950ms both;
	}

	.glow {
		animation: breathe 9s ease-in-out 3600ms infinite alternate;
	}

	.nameplate > * {
		animation: rise 900ms var(--ease-out) both;
	}
	.nameplate > :nth-child(1) {
		animation-delay: 250ms;
	}
	.nameplate > :nth-child(2) {
		animation-delay: 420ms;
	}
	.nameplate > :nth-child(3) {
		animation-delay: 580ms;
	}
	.nameplate > :nth-child(4) {
		animation-delay: 700ms;
	}

	@keyframes street {
		from {
			transform: scaleX(0);
		}
		to {
			transform: scaleX(1);
		}
	}

	@keyframes draw {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes appear {
		to {
			opacity: 1;
		}
	}

	/* A lamp coming on: a quick warm-up with one soft settle, not a blink. */
	@keyframes switch-on {
		0% {
			opacity: 0;
		}
		45% {
			opacity: 0.8;
		}
		60% {
			opacity: 0.55;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes bloom {
		from {
			opacity: 0;
			transform: scale(0.7);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes breathe {
		from {
			opacity: 1;
			transform: scale(1);
		}
		to {
			opacity: 0.72;
			transform: scale(0.95);
		}
	}

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

/* ---------- Motion: scroll-driven (supported browsers only) ---------- */

@supports (animation-timeline: scroll()) {
	/* The masthead fades in once the sign-in button has scrolled away. visibility keeps its links
	   out of the tab order while it is hidden. Under reduced motion it fades without sliding. */
	.masthead {
		display: block;
		animation: masthead-fade linear both;
		animation-timeline: scroll(root block);
		animation-range: 360px 460px;
	}

	@keyframes masthead-fade {
		from {
			opacity: 0;
			visibility: hidden;
		}
		to {
			opacity: 1;
			visibility: visible;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.masthead {
			animation-name: masthead-in;
		}

		.rooftops {
			stroke-dasharray: 1 1;
			animation: draw-on-scroll linear both;
			animation-timeline: --street;
			animation-range: cover 4% cover 52%;
		}

		.dusk-layer {
			animation: dusk-out linear both;
			animation-timeline: --street;
			animation-range: cover 18% cover 62%;
		}

		.night-layer {
			animation: night-in linear both;
			animation-timeline: --street;
			animation-range: cover 18% cover 62%;
		}

		/* Lamplighter: left to right, one window at a time. */
		.win .lamp,
		.win .bar,
		.win.keep .lamp,
		.win.keep .bar {
			animation: lamp-on linear both;
			animation-timeline: --street;
			animation-range: cover calc(24% + var(--i) * 3.4%) cover calc(27% + var(--i) * 3.4%);
		}

		@keyframes masthead-in {
			from {
				opacity: 0;
				visibility: hidden;
				transform: translateY(-100%);
			}
			to {
				opacity: 1;
				visibility: visible;
				transform: none;
			}
		}

		@keyframes draw-on-scroll {
			from {
				stroke-dashoffset: 1;
			}
			to {
				stroke-dashoffset: 0;
			}
		}

		@keyframes dusk-out {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes night-in {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}

		@keyframes lamp-on {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	}
}