@layer variables, reset, elements, classes, layout, mixins;

@layer variables {
	/* TODO tilling wms? */
	@media (min-width: 0) {
		:root {
			--_breakpoint: var(--is-mobile) var(--is-phone);
		}
	}

	@media (min-width: 640px) {
		:root {
			--_breakpoint: var(--is-mobile) var(--is-tablet);
		}
	}

	@media (min-width: 1920px) {
		:root {
			--_breakpoint: var(--is-desktop);
		}
	}

	:root {
		/* BREAKPOINTS */

		--is-mobile: var(--_breakpoint,);
		--is-phone: var(--_breakpoint,);
		--is-tablet: var(--_breakpoint,);
		--is-desktop: var(--_breakpoint,);

		/* SPACINGS */

		--spacing-gap: 48px;
		--spacing-relative: 1em;
		--padding: var(--is-mobile, 24px) var(--is-desktop, 96px);

		/* WIDTHS */

		--width: 960px;
		--half: calc((var(--width) - 1 * var(--spacing-gap)) / 2);
		--third: calc((var(--width) - 2 * var(--spacing-gap)) / 3);

		/* COLORS */
		/* TODO use wider color gamut? */

		--light: white;
		--lighter-grey: #ccc;
		--light-grey: #999;
		--grey: #666;
		--dark-grey: #444;
		--dark: #222;
		--darker: #111;
		--transparent-black: #0a0a0a;

		--purple: #5f5cf4;
		--red: #fab0ac;
		--orange: #ffd0ad;
		--yellow: #faef8a;
		--green: #8fffd7;
		--blue: #a2e2eb;

		/* FONTS */

		--font-weight-medium: 500;
		--font-weight-semi-bold: 600;
		--font-weight-bold: 700;

		--line-height-0-8: 0.8;
		--line-height-1-2: 1.2;
		--line-height-1-5: 1.5;

		--font-family-serif: 'Crimson Pro', ui-serif, serif;
		--font-family-sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

		--font-title: italic var(--font-weight-semi-bold) var(--is-mobile, 40px) var(--is-desktop, 128px / var(--line-height-0-8)) var(--font-family-serif);

		--font-section-title: italic var(--font-weight-semi-bold) var(--is-mobile, 40px) var(--is-desktop, 64px) var(--font-family-serif);
		--font-section-title-alternate: var(--font-weight-bold) var(--is-mobile, 16px) var(--is-desktop, 24px) / var(--line-height-1-5) var(--font-family-sans);
		--font-section-description: var(--is-mobile, 20px) var(--is-desktop, 24px) / var(--line-height-1-5) var(--font-family-sans);
		--font-section: var(--is-mobile, 16px) var(--is-desktop, 24px) / var(--line-height-1-5) var(--font-family-sans);

		--font-article-title: var(--font-weight-bold) var(--is-mobile, 24px) var(--is-desktop, 32px) / var(--line-height-1-2) var(--font-family-sans);
		--font-article-subtitle: var(--is-mobile, 20px) var(--is-desktop, 20px) / var(--line-height-1-5) var(--font-family-sans);
		--font-article-subtitle-alternate: italic var(--font-weight-medium) var(--is-mobile, 24px) var(--is-desktop, 32px) var(--font-family-sans);
		--font-article: var(--is-mobile, 16px) var(--is-desktop, 18px) / var(--line-height-1-5) var(--font-family-sans);

		--font-sidenote: var(--is-mobile, 18px) var(--is-desktop, 18px) / var(--line-height-1-5) var(--font-family-sans);

		--font-input: var(--is-mobile, 16px) var(--is-desktop, 18px) / var(--line-height-1-5) var(--font-family-sans);
		--font-author: var(--font-weight-semi-bold) var(--is-mobile, 18px) var(--is-desktop, 18px) / var(--line-height-1-5) var(--font-family-sans);
		--font-date: var(--is-mobile, 14px) var(--is-desktop, 16px) / var(--line-height-1-5) var(--font-family-sans);
		--font-contact: var(--font-weight-bold) var(--is-mobile, 14px) var(--is-desktop, 18px) var(--font-family-sans);

		/* BORDERS */

		--border-thin: 1px solid currentcolor;
		--border-thick: 4px solid currentcolor;

		--border-radius: 6px;
		--border-radius-round: 100vmax;
	}

	*, ::before, ::after {
		/* MIXINS */

		--full-bleed: var(--mixins,);
		--_full-bleed-off: var(--mixins,);

		--mixins: var(--_full-bleed-off);
	}
}

@layer mixins {
	*, ::before, ::after {
		background-color: var(--full-bleed, var(--background)) var(--_full-bleed-off, revert-layer) !important;

		box-shadow: var(--full-bleed, var(--background) 0 0 0 100vmax) var(--_full-bleed-off, revert-layer) !important;

		clip-path: var(--full-bleed, inset(-1px -100vmax 0 -100vmax)) var(--_full-bleed-off, revert-layer) !important;
	}
}

@layer reset {
	*, ::before, ::after {
		box-sizing: border-box;

		margin: 0;
		padding: 0;
	}

	::placeholder {
		opacity: 1;
	}

	body {
		overflow-wrap: break-word;
	}

	button {
		cursor: pointer;
	}
}

@layer elements {
	@media (prefers-reduced-motion: no-preference) {
		* {
			transition: none 0.1s;
			scroll-behavior: smooth;
		}
	}

	html,
	body {
		/* NOTE https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: greyscale;

		text-wrap: pretty;
	}

	/* SECTION */

	:is(section, footer) {
		font: var(--font-section);
	}

	:is(section, footer) > header {
		font: var(--font-section-description);
	}

	/* NOTE --width + column-gaps */
	@media (min-width: 1008px) {
		:is(main, section, footer) > header {
			max-width: calc(var(--third) * 2 + var(--spacing-gap));
		}
	}

	:is(section, footer) > header > h2 {
		font: var(--font-section-title);
	}

	:is(section, footer) > header > h2 > strong {
		text-decoration: underline;
	}

	:is(section, footer) > header > p {
		margin-top: var(--spacing-relative);
	}

	/* ARTICLE */

	:not(main) > article {
		font: var(--font-article);
	}

	:not(main) > article h3 {
		font: var(--font-article-title);
	}

	:not(main) > article hgroup > p {
		font: var(--font-article-subtitle);
	}

	/* FORM */

	form > textarea {
		margin-top: 48px;
	}

	form > input {
		margin-top: 24px;
	}

	form > button {
		margin-top: 48px;
	}

	/* OTHER */

	h1 {
		font: var(--font-title);
	}

	h1, h2, h3, h4, h5, h6,
	hgroup > p {
		text-wrap: balance;
	}

	:is(h1, h2, h3, h4, h5, h6):has(img:first-child, img:last-child) {
		/* NOTE avoid text layout */
		display: contents;
	}

	img {
		display: block;

		max-width: 100%;
		height: auto;
	}

	button,
	.button,
	input,
	textarea {
		display: block;

		width: 100%;

		padding-block: 16px;
		padding-inline: 24px;

		border: var(--border-thin);
		border-radius: var(--border-radius);

		color: inherit;
		background-color: transparent;

		font: var(--font-input);
	}

	button,
	.button {
		text-decoration: none;
		text-align: center;

		font-weight: var(--font-weight-bold);
	}

	textarea {
		resize: vertical;
	}

	address {
		font: var(--font-author);
	}

	time {
		font: var(--font-date);
	}

	ul, ol {
		list-style-position: inside;
	}

	a {
		color: inherit;
	}
}

@layer classes {
	/* ARROWS */

	.arrow-right::after {
		content: ' ->';
	}

	.arrow-up::after {
		content: ' ↑';
	}

	.arrow-down::after {
		content: ' ↓';
	}

	/* AUTHOR */

	.author {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.author > img {
		width: 48px;
		border-radius: var(--border-radius-round);
	}

	/* SEE MORE */

	.hide-after ~ * {
		display: none;
	}

	.see-more {
		max-width: 340px;

		margin-top: var(--is-mobile, 48px) var(--is-desktop, 96px);
		margin-inline: auto;

		color: var(--grey);

		transition-property: color;
	}

	.see-more:hover {
		color: var(--dark);
	}

	.see-more::after {
		content: ' ↑';
	}

	/* SIDENOTES */

	[class^='sidenote-'] {
		max-width: 340px;
		margin-inline: var(--is-mobile, 48px) var(--is-desktop, 96px);

		font: var(--font-sidenote);
		color: var(--dark-grey); 
	}

	/* NOTE give at least a --third of space */
	@media (max-width: 1919.5px) {
		[class^='sidenote-'] {
			display: none;
		}
	}

	@supports not (anchor-name: --the-spice-must-flow) {
		[class^='sidenote-']:not([style*="--anchor-"]) {
			visibility: hidden;
		}
	}

	[class^='sidenote-'] > :not(:first-child) {
		margin-top: var(--spacing-relative);
	}
}

@layer layout {
	body {
		display: grid;
		grid-template-columns: 1fr minmax(auto, var(--width)) 1fr;
		column-gap: var(--padding);
	}

	body > * {
		grid-column: 2;
	}

	/* LOGO */

	body > header,
	main > hgroup > h1 > img {
		padding-top: var(--is-mobile, 64px) var(--is-desktop, 192px);
		padding-bottom: var(--is-mobile, 24px) var(--is-desktop, 96px);
	}

	body > header > a > img,
	main > hgroup > h1 > img {
		width: var(--is-mobile, 64px) var(--is-desktop, 96px);
	}

	/* CONTACT */

	#contact {
		--background: var(--dark);
		--mixins: var(--full-bleed);

		padding-block: var(--is-mobile, 96px) var(--is-desktop, 192px);

		color: var(--light);
	}

	#contact > header > h2 {
		color: var(--purple);
	}

	#contact > div > div,
	#contact > div > div > form {
		display: contents;
	}

	#contact > div > div > form > :is(textarea, input) {
		border-color: var(--grey);
		background-color: var(--darker);
	}

	#contact > div > div > form > :is(textarea, input)::placeholder {
		color: var(--lighter-grey);
	}

	#contact > div > div > form > button {
		--background: var(--purple);

		border-color: var(--background);

		color: var(--dark);
		background-color: var(--background);

		transition-property: border-color, background-color;
	}

	#contact > div > div > form > button:hover {
		--background: var(--light);
	}

	#contact > div > address {
		margin-top: 48px;

		display: flex;
		align-items: center;
		gap: 24px;

		color: var(--purple);
	}

	@media (min-width: 640px) {
		#contact > div > address {
			gap: 48px;
		}
	}

	#contact > div > address > a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 16px;

		text-decoration: none;
	}

	/* NOTE --width + column-gaps */
	@media (max-width: 1007.5px) {
		#contact > div > address {
			justify-content: center;
		}
	}

	@media (min-width: 1008px) {
		#contact > div:has(> div) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: var(--spacing-gap);

			& > div > form > :is(textarea, input) {
				grid-column: 1 / -1;
			}

			& > div > form > button {
				grid-column: -2;
				align-self: center;
			}

			& > address {
				grid-row: 5;
				grid-column: 1 / -2;
			}
		}
	}

	/* FOOTER */

	#footer {
		padding-top: var(--is-mobile, 48px) var(--is-desktop, 96px);
		padding-bottom: 384px;

		color: var(--purple);
		font-weight: var(--font-weight-bold);
	}
	
	#footer > a {
		display: flex;
		align-items: center;
		gap: var(--is-mobile, 16px) var(--is-desktop, 24px);

		text-decoration: none;
	}

	#footer > a > img {
		width: var(--is-mobile, 48px) var(--is-desktop, 96px);
	}
}