/* ==========================================================================
   HOUSE FÊTE — prototype
   Mobile-first. Everything scales with the browser width.

   HOW THE FLUID SCALE WORKS
   Every size is written as:   calc(MIN + GROWTH * var(--fluid))
     MIN    = the size on a 375px-wide phone (in rem; 1rem = 16px)
     GROWTH = how many px it gains by the time the window is 1440px wide
   e.g.  calc(1rem + 10 * var(--fluid))  →  16px on a phone, 26px at 1440px.
   Sizes keep growing past 1440px (up to --vw-max) at the same rate.
   ========================================================================== */

:root {
	/* ---- Fluid engine ---------------------------------------------------- */
	--vw-min: 430px;
	--vw-max: 2000px;
	--vw: clamp(var(--vw-min), 100vw, var(--vw-max));
	--fluid: calc((var(--vw) - 375px) / 1065); /* 0 at 375px, 1px at 1440px */

	/* ---- Colour ---------------------------------------------------------- */
	--ink: #231f20;
	--grey: #a9a295;
	--brown: #3b2f25;
	--rule: #b9a56f;
	--paper: #ffffff;
	--error: #8a2b1d;

	/* ---- Font families (Adobe Fonts first, then Mac, then Windows) -------- */
	--font-baskerville: baskerville-urw, Baskerville, "Hoefler Text", "Baskerville Old Face", Garamond, serif;
	--font-didot: linotype-didot, Didot, "Bodoni 72", "Bodoni MT", serif;
	--font-minerva: minerva-modern, Optima, "Gill Sans", Candara, sans-serif;
	--font-freight: freight-sans-pro, "Gill Sans", "Avenir Next", "Trebuchet MS", sans-serif;

	/* ---- Manifesto sizes                      phone → 1440px -------------- */
	--fs-sm: calc(1rem + 10 * var(--fluid)); /* 16 → 26 */
	--fs-md: calc(1.4375rem + 19 * var(--fluid)); /* 23 → 42 */
	--fs-lg: calc(1.75rem + 24 * var(--fluid)); /* 28 → 52 */
	--fs-xl: calc(2.0625rem + 29 * var(--fluid)); /* 33 → 62 */
	--manifesto-leading: calc(2.125rem + 32 * var(--fluid)); /* 34 → 66 (line spacing) */

	/* ---- Per-font optical scale (1 = exactly the size above) -------------- */
	--scale-baskerville: 1;
	--scale-didot: 1;
	--scale-minerva: 1;
	--scale-freight: 0.92;
	--scale-amp: 1.55; /* the grey ampersand */

	/* ---- Letter-spacing -------------------------------------------------- */
	--track-freight: 0.12em;
	--track-caps: 0.01em;
	--track-eyebrow: 0.32em;
	--track-caption: 0.16em;
	--track-label: 0.06em;

	/* ---- Other type ------------------------------------------------------ */
	--fs-eyebrow: calc(0.6rem + 9 * var(--fluid)); /* 11 → 20 */
	--fs-caption: calc(0.6rem + 5 * var(--fluid)); /* 11 → 16 */
	--fs-join-lead: calc(2.5rem + 30 * var(--fluid)); /* 40 → 70 */
	--fs-join-rest: calc(1.125rem + 10 * var(--fluid)); /* 18 → 28 */
	--fs-input: calc(1rem + 2 * var(--fluid)); /* 16 → 18 (never below 16: stops iOS zoom) */
	--fs-label: calc(0.6rem + 2 * var(--fluid)); /* 11 → 13 */
	--fs-submit: calc(1.0625rem + 3 * var(--fluid)); /* 17 → 20 */

	/* ---- Spacing --------------------------------------------------------- */
	--page-margin: calc(1.25rem + 70 * var(--fluid)); /* 20 → 90 */
	--space-top: calc(1.5rem + 28 * var(--fluid)); /* above "Autumn 2026" */
	--space-logo: calc(2rem + 88 * var(--fluid)); /* eyebrow → logo */
	--space-section: calc(2.5rem + 40 * var(--fluid)); /* between main blocks */
	--space-join: calc(4rem + 56 * var(--fluid)); /* media → "Join us!" */
	--space-footer: calc(4rem + 120 * var(--fluid)); /* form → monogram */
	--monogram-w: calc(4.5rem + 88 * var(--fluid)); /* 72 → 160 */
	--field-gap: calc(0.5rem + 8 * var(--fluid));

	/* ---- Load-in animation ------------------------------------------------ */
	--intro-gold: #a8935f; /* the dull gold each phrase starts as */
	--intro-ease: cubic-bezier(0.4, 0, 0.3, 1);
	--intro-logo-time: 2.3s; /* how long the logo takes to fade in */
	--intro-eyebrow-delay: 0.8s; /* when "Autumn 2026" starts */
	--intro-eyebrow-time: 1.8s;
	--intro-text-delay: 1s; /* when the first phrase starts — phones (desktop value is just below :root) */
	--intro-text-step: 0.15s; /* gap between one phrase starting and the next */
	--intro-text-time: 5.4s; /* how long each phrase takes (fade + gold → final colour) */
}

@media (min-width: 48em) {
	:root {
		--intro-text-delay: 1.8s; /* when the first phrase starts — tablet and desktop */
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0 var(--page-margin);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-baskerville);
	font-size: var(--fs-sm);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}
h1,
h2,
p {
	margin: 0;
	font-weight: 400;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
	padding-top: var(--space-top);
}

.eyebrow {
	font-family: var(--font-freight);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1;
}

.logo {
	margin-top: var(--space-logo);
}
.logo img {
	width: 100%;
}

/* ==========================================================================
   Manifesto — the mixed-type paragraph
   font class (f-*) + size class (s-*) + modifiers (is-*)
   ========================================================================== */

.manifesto {
	margin-top: var(--space-section);
	font-family: var(--font-baskerville);
	font-size: var(--fs-sm);
	line-height: var(--manifesto-leading); /* one fixed line spacing for every size */
	-webkit-hyphens: auto;
	hyphens: auto; /* plus hand-placed ­ breaks in index.html */
	hyphenate-limit-chars: 8 3 3; /* only break words of 8+ letters, 3+ letters each side */
	-webkit-hyphenate-limit-before: 3; /* Safari equivalents */
	-webkit-hyphenate-limit-after: 3;
	overflow-wrap: break-word;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
}

.manifesto span {
	font-size: calc(var(--fs, var(--fs-sm)) * var(--scale, 1));
}

/* Fonts */
.f-baskerville {
	font-family: var(--font-baskerville);
	--scale: var(--scale-baskerville);
}
.f-didot {
	font-family: var(--font-didot);
	--scale: var(--scale-didot);
}
.f-minerva {
	font-family: var(--font-minerva);
	--scale: var(--scale-minerva);
}
.f-freight {
	font-family: var(--font-freight);
	--scale: var(--scale-freight);
}

/* Sizes */
.s-sm {
	--fs: var(--fs-sm);
}
.s-md {
	--fs: var(--fs-md);
}
.s-lg {
	--fs: var(--fs-lg);
}
.s-xl {
	--fs: var(--fs-xl);
}

/* Modifiers */
.is-italic {
	font-style: italic;
}
.is-caps {
	text-transform: uppercase;
	letter-spacing: var(--track-caps);
}
.is-grey {
	color: var(--grey);
}
.is-tracked {
	letter-spacing: var(--track-freight);
}
.is-amp {
	--scale: var(--scale-amp);
	line-height: 0;
}

/* ==========================================================================
   Editor — portrait, caption, video
   Phone: portrait + caption side by side, video full width beneath.
   ========================================================================== */

.editor {
	margin-top: var(--space-section);
	display: grid;
	grid-template-columns: 4fr 3fr;
	column-gap: calc(1rem + 20 * var(--fluid));
	row-gap: calc(1rem + 20 * var(--fluid));
	align-items: start;
}

@media screen and (min-width: 60em) {
	.editor {
		grid-template-columns: 2fr 3fr;
	}
}

.editor__portrait {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.editor__caption {
	font-size: var(--fs-caption);
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	line-height: 1.2;
	padding-top: 0.4em;
}
.editor__name,
.editor__role {
	display: block;
}
.editor__role {
	font-style: italic;
	margin-top: 0.5em;
	font-size: 0.8em;
}

.video-container {
	position: relative;
	grid-column: 1 / -1; /* full width on phones (the wrapper is the grid item now) */
	aspect-ratio: 752 / 560;
	overflow: hidden;
	object-fit: cover;
	object-position: center;
}

.editor__video-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	/* background: rgba(0, 0, 0, 0.4); */
	color: #000;
	display: flex;
	justify-content: center;
	-webkit-flex-align: center;
	align-items: center;
	opacity: 1;
	/* transition: opacity 1.3s ease; */
	/* cursor: help; */
}

.editor__video {
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: 752 / 560;
	object-fit: cover;
	background: #e9e6e1;
	width: 200%;
	/* aspect-ratio: 752 / 560; */
	background: #e9e6e1;
	max-width: none;
	margin: -55% -50%;
}

/* ==========================================================================
   Join + form
   ========================================================================== */

.join {
	margin-top: var(--space-join);
	color: var(--brown);
}

.join__heading {
	line-height: 1.15;
}
.join__lead {
	font-size: var(--fs-join-lead);
	font-style: italic;
	margin-right: 0.12em;
	display: block;
}
@media screen and (min-width: 600px) {
	.join__lead {
		display: inline;
	}
}
.join__rest {
	font-size: var(--fs-join-rest);
}

.form {
	margin-top: var(--space-section);
	width: 100%;
	display: grid;
	row-gap: var(--field-gap);
}

.fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	display: grid;
	row-gap: var(--field-gap);
}

/* Label sits in the markup before the input (for screen readers)
   but is shown beneath the rule, as in the design. */
.field {
	display: flex;
	flex-direction: column-reverse;
	min-width: 0;
}

.field label {
	margin-top: 0.6em;
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-align: left;
	line-height: 1.2;
	cursor: pointer;
}
.optional {
	text-transform: none;
	font-style: italic;
	letter-spacing: 0.02em;
}

.field input,
.field textarea {
	width: 100%;
	margin: 0;
	padding: 0.35em 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-input);
	line-height: 1.3;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
}
.field textarea {
	display: block;
	resize: none; /* starts as one line; grows with the text (script.js) */
	overflow: hidden;
	field-sizing: content; /* same behaviour without JavaScript, where supported */
}

.field input:hover,
.field textarea:hover {
	border-bottom-color: var(--brown);
}

.field input:focus-visible,
.field textarea:focus-visible {
	outline: none;
	border-bottom-color: var(--ink);
	box-shadow: 0 1px 0 0 var(--ink);
}

/* Keep browser autofill from painting the field yellow/blue */
.field input:-webkit-autofill,
.field textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	box-shadow: 0 0 0 100px var(--paper) inset;
}

/* Only flag errors after someone has tried to submit */
.form.was-validated :invalid {
	border-bottom-color: var(--error);
}
.form.was-validated :invalid + label,
.form.was-validated .field:has(:invalid) label {
	color: var(--error);
}

.field-row {
	display: grid;
	grid-template-columns: 5fr 2fr 3fr;
	column-gap: 0.75rem;
}

.form__trap {
	display: none;
}

.form__submit {
	justify-self: start;
	margin-top: 0;
	padding: 0.6em 1.5em 0.6em 0;
	min-height: 44px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--fs-submit);
	font-style: italic;
	cursor: pointer;
	text-decoration: underline transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color 0.2s;
}
.form__submit:hover {
	text-decoration-color: var(--rule);
}
.form__submit[disabled] {
	opacity: 0.5;
	cursor: default;
}

.form__status {
	font-size: var(--fs-input);
	font-style: italic;
	text-align: left;
	line-height: 1.35;
}
.form__status:empty {
	display: none;
}
.form__status.is-error {
	color: var(--error);
}

/* Privacy notice above the Submit button */
.form__note {
	margin-top: 2rem;
	font-size: calc(0.9375rem + 2 * var(--fluid)); /* 15 → 17 */
	font-style: italic;
	line-height: 1.4;
}
.form__note a,
.legal a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s;
}
.form__note a:hover,
.legal a:hover {
	text-decoration-color: currentColor;
}

/* ==========================================================================
   Text pages (privacy.html)
   Same fonts, colours and fluid scale as the home page.
   ========================================================================== */

.legal-header {
	padding-top: var(--space-top);
}
.legal-header__logo {
	display: block;
	width: calc(9rem + 150 * var(--fluid)); /* 144 → 294 */
}
.legal-header__logo img {
	width: 100%;
}

.legal {
	margin-top: var(--space-join);
	font-size: calc(1rem + 3 * var(--fluid)); /* 16 → 19 */
	line-height: 1.55;
	color: var(--brown);
}

.legal__title {
	font-size: calc(2.125rem + 22 * var(--fluid)); /* 34 → 56 */
	font-style: italic;
	line-height: 1.2;
	color: var(--ink);
}
.legal__date {
	margin-top: 1.4em;
	margin-bottom: 4em !important;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
}
.legal__lede {
	margin-top: 1.2em;
	max-width: 28em; /* about 70 characters a line */
	font-size: calc(1.5rem + 5 * var(--fluid)); /* 18 → 23 */
	line-height: 1.4;
	color: var(--ink);
}

.legal section {
	margin-top: calc(2.25rem + 20 * var(--fluid));
	padding-top: calc(1.25rem + 8 * var(--fluid));
	border-top: 1px solid var(--rule);
}
.legal h2 {
	font-family: var(--font-didot);
	font-size: calc(0.875rem + 4 * var(--fluid)); /* 14 → 18 */
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--ink);
}
.legal p,
.legal ul,
.legal address {
	margin: 0.8em 0 0;
}
.legal ul {
	padding-left: 1.2em;
}
.legal li + li {
	margin-top: 0.3em;
}
.legal li::marker {
	color: var(--rule);
}
.legal address {
	font-style: normal;
}
.legal__back {
	margin-top: calc(3rem + 24 * var(--fluid)) !important;
	font-style: italic;
}

@media (min-width: 48em) {
	.legal {
		margin-left: 0; /* flush with the left margin */
		width: min(100%, 70vw);
	}
	.legal section > * {
		max-width: 38em; /* comfortable line length */
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
	margin-top: var(--space-footer);
	padding-bottom: calc(2.5rem + 80 * var(--fluid));
	display: flex;
	justify-content: flex-end;
}
.footer__monogram {
	width: var(--monogram-w);
}

/* ==========================================================================
   Wider screens — the offset desktop composition from the layout
   (percentages are of the 1260px text column in the 1440px design)
   ========================================================================== */

@media (min-width: 48em) {
	.editor {
		margin-left: 21.75%; /* portrait starts 274px in */
		width: 62.2%; /* 240 + 36 + 508 */
		grid-template-columns: 240fr 508fr;
		column-gap: 4.6%;
		row-gap: 0;
	}
	.editor__portrait {
		grid-row: 1 / 3;
	}
	.editor__caption {
		min-height: calc(var(--vw) * 0.1);
	} /* video starts 144px below the portrait's top at 1440 */
	.video-container {
		grid-column: 2;
	}

	.join__heading,                           /* heading shares the form's left edge */
  .form {
		margin-left: auto; /* lines run to the right gutter */
		width: min(100%, 70vw); /* up to 70% of the window width */
	}

	.footer {
		padding-right: 1.6%;
	}
}

/* ==========================================================================
   Load-in animation
   Logo fades in, then the eyebrow, then each manifesto phrase in order,
   warming from dull gold to its own colour (ink, or grey for .is-grey).
   Pure CSS: timings are the --intro-* variables at the top of this file.
   ========================================================================== */

@keyframes intro-fade {
	from {
		opacity: 0;
	}
}

/* No "to" colour: each phrase ends on whatever colour it is styled with. */
@keyframes intro-phrase {
	0% {
		opacity: 0;
		color: var(--intro-gold);
	}
	10% {
		color: var(--intro-gold);
	}
	45% {
		opacity: 1;
	}
}

.logo img {
	animation: intro-fade var(--intro-logo-time) 0.2s var(--intro-ease) both;
}

.eyebrow {
	animation: intro-fade var(--intro-eyebrow-time) var(--intro-ease) var(--intro-eyebrow-delay) both;
}

.manifesto span {
	animation: intro-phrase var(--intro-text-time) var(--intro-ease) both;
	animation-delay: calc(var(--intro-text-delay) + var(--i, 0) * var(--intro-text-step));
}
section.editor,
section.join {
	animation: intro-fade var(--intro-text-time) both;
	animation-delay: calc(var(--intro-text-delay) + 16 * var(--intro-text-step));
}

/* Order of the phrases (covers up to 25 spans) */
.manifesto span:nth-child(2) {
	--i: 1;
}
.manifesto span:nth-child(3) {
	--i: 2;
}
.manifesto span:nth-child(4) {
	--i: 3;
}
.manifesto span:nth-child(5) {
	--i: 4;
}
.manifesto span:nth-child(6) {
	--i: 5;
}
.manifesto span:nth-child(7) {
	--i: 6;
}
.manifesto span:nth-child(8) {
	--i: 7;
}
.manifesto span:nth-child(9) {
	--i: 8;
}
.manifesto span:nth-child(10) {
	--i: 9;
}
.manifesto span:nth-child(11) {
	--i: 10;
}
.manifesto span:nth-child(12) {
	--i: 11;
}
.manifesto span:nth-child(13) {
	--i: 12;
}
.manifesto span:nth-child(14) {
	--i: 13;
}
.manifesto span:nth-child(15) {
	--i: 14;
}
.manifesto span:nth-child(16) {
	--i: 15;
}
.manifesto span:nth-child(17) {
	--i: 16;
}
.manifesto span:nth-child(18) {
	--i: 17;
}
.manifesto span:nth-child(19) {
	--i: 18;
}
.manifesto span:nth-child(20) {
	--i: 19;
}
.manifesto span:nth-child(21) {
	--i: 20;
}
.manifesto span:nth-child(22) {
	--i: 21;
}
.manifesto span:nth-child(23) {
	--i: 22;
}
.manifesto span:nth-child(24) {
	--i: 23;
}
.manifesto span:nth-child(25) {
	--i: 24;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}