/*
	style.css
*/
/* view transition */
@view-transition { navigation: auto; }

:root{
	interpolate-size: allow-keywords;
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
	
	/* fonts */
	--font-sans: "messinasans", system-ui, sans-serif;
	--font-serif: "reckless", Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--font-mono: 'Nimbus Mono PS', 'Courier New', monospace;
	--font-condensed: "Oswald", Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
	
	--sf: 			 3.5vw; // scale factor
	--font-size-xs:  0.5rem;
	--font-size-s: 	 0.7rem;
	--font-size: 	 1rem;
	--font-size-m: 	 clamp(1.1rem, var(--sf), 1.5rem);
	--font-size-l: 	 clamp(1.5rem, var(--sf), 2.5rem);
	--font-size-xl:  clamp(1.7rem, var(--sf), 3.5rem);
	--font-size-xxl: clamp(2.5rem, 7vw, 4rem);
	--letter-spacing: 0.2em;
	
	/* colors */
	color-scheme: light;
	--white: #ffffff;
	--black: #000000;
	--cream: #fffbf7;
	--ecru: #efe3d8;
	--beige: #e7d5c1;
	--leather: #bea48d;
	--sand: #d5b391;
	--cocoa: #4f3c2b;
	--espresso: #201a19;
	
	/* color settings */
	--text: var(--espresso);
	--text-lighter: #838383;
	--bg: var(--cream);
	--paper: url("../img/paper.png?v=3.1"); /* beige-paper by transparenttextures.com, re-hosted */
	
	/* layout */
	--padding: clamp(20px, 7vw, 60px);
	--padding-s: 2.5vw;
	--padding-m: 7vw;
	--gap-half: 0.5rem;
	--gap-double: 2rem;
	--gap: 1rem;
	--gap-h: 5%;
	--gap-v: clamp(40px, 3vw, 60px);
	--gap-v2x: calc(var(--gap-v) * 1.5);
	--max-width: 1800px;
	
	/* aspect-ratios */
	--ratio-square: 1;
	--ratio-landscape: 4/3;
	--ratio-portrait: 3/4;
	--ratio-widescreen: 16/9;
	--ratio-ultrawide: 18/5;
	--ratio-golden: 1.6180/1;
}

html{
	text-size-adjust: none;
	scroll-behavior: smooth;
	scroll-padding-top: var(--gap-v2x);
	interpolate-size: allow-keywords;
	overflow-x: clip;
	width:100vw;
	font-size:16px;
	margin:0;
	padding:0;
	
	&:has(body.noscroll){
		overflow:hidden;
	}
}

body{
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	background:var(--bg) var(--paper) fixed;
	color: var(--text);
	tab-size: 4;
	margin:0;
	padding:0;
	border-bottom:1px solid transparent;
	
	/* serif font variation */
	font-variant-numeric: lining-nums;
	/* Fallback support for older browsers */
	font-feature-settings: "lnum" 1;
	-webkit-font-feature-settings: "lnum" 1;
	-moz-font-feature-settings: "lnum" 1;
	font-family: var(--font-sans);
	font-weight:300;
}

[data-theme="dark"]{ color-scheme:dark; }
[data--theme="light"]{ color-scheme:light; }

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

::selection{
	background-color:var(--espresso);
	color:#fff;
}

[columns]{
	display:flex;
	row-gap:var(--gap);
	column-gap:var(--gap);
	align-items:stretch;
	flex-wrap:wrap;
	
	&>*{
		display:flex;
		flex-direction:column;
		gap:var(--gap);
		flex:1;
		min-width:300px;
		max-width:1200px;
		margin-inline:auto; 
	}
	
	&>.fullwidth{ flex-basis:100%; max-width:unset;}
}

[spacer], spacer, .spacer{ 
	display:block;
	flex:1;
	min-width:unset !important; 
}

img, picture, video, canvas, svg {
	display: block;
	overflow:hidden;
	width:100%;
	height:auto;
}

img, video{
	object-fit:cover;
	object-position:center;
	height:100%;
	position:relative;
}

img{ /* pw wysiwyg image alignment classes */
	&.align_left{float:left;}
	&.align_right{float:right;}
	&.align_center{margin-inline:auto;}
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
	font-family: var(--font-serif);
	font-weight: 400;
	line-height:1;
}

	h1{ font-size: var(--font-size-xxl); }
	h2{ font-size: var(--font-size-xl);}
	h3{ font-size: var(--font-size-m); }
	h4{ font-size: calc(var(--font-size-m) * 0.8); font-family: var(--font-sans); text-transform: unset; }


hgroup{
	display:flex;
	flex-direction:column;
	gap:var(--gap);
	
	p{ 
		font-family:var(--font-condensed);
		font-weight:400;
		text-transform:uppercase;
		font-size:var(--font-size-s);
		letter-spacing: var(--letter-spacing);
		line-height:1.3;
		color:inherit;
	}
}

p{
	overflow-wrap: break-word;
	text-wrap: balance;
	hyphens: auto;
	line-height:1.7;
	color:var(--text);
	font-family:var(--font-serif);
}

blockquote{
	overflow-wrap: break-word;
	text-wrap: pretty;
	hyphens: auto;
	color:inherit;
}

ul, ol{
	padding-inline-start:1.5rem;
	
	li{}
	
	/* remove list styling */
	&[unlist]{ 
		display:flex;
		margin:0;padding:0;list-style-type:none; 
		li{ margin:0;padding:0; }
	}
	
	&.spaced{
		--space: clamp(0.1rem, 1vw, 1rem);
		li{ padding:var(--space) 0; }
	}
}

a, a:active, a:visited, a:hover{
	color: inherit;
	text-decoration:underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: all 0.36s ease;
}

hr{
	border-top:1px dotted var(--ecru);
	margin:var(--gap-v2x) auto;
	opacity:0.5;
}

/* respect high-contrast mode */
:focus{ outline: var(--outline-off);  }
:focus-visible{ outline: var(--outline-on); }

/* fadein */
@keyframes fadeIn {
	from { opacity:0; filter:blur(6px); transform:translateY(-10px); }
	to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

@keyframes caretBlink {
	50% { opacity:0; }
}

@keyframes fadeInPlain {
	from { opacity:0; }
	to { opacity:1; }
}

/* long, soft ease-out with overlapping delays so the items flow in as one cascade */
[fadein],
.fadein{
	opacity:0;
	filter:blur(6px);
	transform: translateY(-10px);
	animation: fadeIn 1.68s var(--ease-out-soft) forwards 0.74s;

	/* variations */
	&[fadein='1']{ animation-delay: 0.74s;  }
	&[fadein='2']{ animation-delay: 1.04s;  }
	&[fadein='3']{ animation-delay: 1.34s;  }
	&[fadein='4']{ animation-delay: 1.64s;  }
	&[fadein='5']{ animation-delay: 1.94s;  }
	&[fadein='6']{ animation-delay: 2.24s;  }

	/* opacity only, no blur or drift */
	&[fadein-plain]{
		filter:none;
		transform:none;
		animation-name: fadeInPlain;
	}

	@media (prefers-reduced-motion: reduce){
		animation: none;
		opacity:1;
		filter:none;
		transform:none;
	}
	
}

/*----------------------------------------
  dialog
  ----------------------------------------*/
@starting-style {
	dialog[open] {
		opacity: 0;
		transform: scale(0.95);
	}
}
dialog{
	margin:auto;
	inset:0;
	z-index:3 !important;
	max-width:90%;
	width:800px;
	background:var(--cream);
	color:var(--text);
	padding:var(--padding-m);
	border:1px solid transparent;
	max-height: 90dvh;
	overflow-x: clip;
	overflow-y: auto;
	opacity:0;
	transition:all 0.6s ease;
	
	&[open]{
		position:absolute;
		display:flex;
		flex-direction:column;
		gap:var(--gap-double);
		opacity:1;
		scale:1;
	}
	
	/* body */
	body:has(&){
		&:before{
			opacity:0;
			backdrop-filter: blur(0px);
			transition:all 0.6s ease;
		}
	}
	body:has(&[open]){
		overflow:clip;
		height:100dvh;
		&>*{z-index:-1;}
		&:before{
			content:'';
			position:fixed;
			inset:0;
			background: rgba(from var(--ecru) r g b / 50%);
			backdrop-filter: blur(8px);
			opacity:1;
			z-index:2;
		}
	}
}

[closer]{
	display:none;
	position:fixed;
	top: 10px;
	right:10px;	
	padding:10px;
	cursor: pointer;
	transition: all 0.36s ease;
	font-size:1.5rem;

	&:hover{ color:var(--cocoa); }
	
	body:has(dialog[open]) &{
		display:inline-block;
		z-index:5;
	}
}

/* element animation */
@keyframes scroller {
	0%{ opacity: 0; translate: 0 60px; }
	100%{ opacity:1; translate: 0 0; }
}
	body>*:not(dialog){
		animation: scroller backwards;
		animation-range-start: cover 0%;
		animation-range-end: cover 30%;
		animation-timeline: view();
	}
	[columns]>*>*:not([nofade]){
		animation: scroller backwards;
		animation-range-start: cover 0%;
		animation-range-end: cover 10%;
		animation-timeline: view();
	}

/*----------------------------------------
  Utility
  ----------------------------------------*/
 .hide, [hide]{ display:none; }
.prevent-select{-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;}
.prevent-select a{cursor:pointer;}
.pointer-events-off{pointer-events:none;}
.pointer-events-off a{pointer-events:all;}
.hide-scrollbars::-webkit-scrollbar{display:none;}
.hide-scrollbars{-ms-overflow-style:none;scrollbar-width:none;}
.overflow-horizontal{flex-wrap:nowrap;overflow:hidden;overflow-x:auto;}
.noscroll{overflow:hidden;}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.align_left{text-align:left;}
.align_right{text-align:right;}
.align_center{text-align:center;}

/* aspect-ratio classes */
.ratio-square{ 		aspect-ratio: var(--ratio-square); 		}
.ratio-landscape{ 	aspect-ratio: var(--ratio-landscape);  	}
.ratio-portrait{ 	aspect-ratio: var(--ratio-portrait);   	}
.ratio-widescreen{ 	aspect-ratio: var(--ratio-widescreen); 	}
.ratio-ultrawide{ 	aspect-ratio: var(--ratio-ultrawide); 	}
.ratio-golden{ 		aspect-ratio: var(--ratio-golden); 		}

/* 
	Alpine
	- https://alpinejs.dev/directives/cloak
*/
[x-cloak]{ display: none !important; } 

/*----------------------------------------
  layout
  ----------------------------------------*/
[logo]{display:inline-block;}

.eyebrow{
	text-transform:uppercase;
	font-size:var(--font-size-s);
	letter-spacing: var(--letter-spacing);
	font-family:var(--font-sans);
}

body{
	display:flex;
	flex-direction:column;
	min-height:100dvh;
	padding:0;
}

/* spacing scales with viewport height so the top of the footer stays in view */
[hero]>header{
	--icon-height: clamp(189px, 29vh, 310px);
	display:grid;
	grid-template-columns:minmax(0, 1fr); /* a single column capped to the viewport, not the logo */
	align-items:center;
	text-align:center;
	padding:clamp(60px, 9vh, 120px) 20px 0 20px;
	margin-bottom:clamp(60px, 11vh, 133px);

	/* the icon sits behind the logo, stacked in the same grid cell */
	[icon], h1{ grid-area:1 / 1; }

	[icon]{
		position:relative;
		height:var(--icon-height);
		width:calc(var(--icon-height) * 1157 / 4000);
		margin:0 auto;
		color:var(--sand);
		pointer-events:none;

		/* opacity on the children, the fadein animation drives the wrapper's opacity */
		svg, canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
		svg{ opacity:0.15; }
		canvas{ opacity:0.3; }

		/* copper.js draws the lit copper foil on a canvas; the flat svg stays as the fallback */
		&[copper] svg{ visibility:hidden; }
	}
	h1{ position:relative; display:flex; margin:0; }
	[logo]{ max-width:80%;width:550px;margin:0 auto;}
	a{display:inline-block; margin-inline:auto;}
}

section{
	max-width: 700px;
	margin:max(100px, 9%) auto 100px auto;
}

section[poem]{
	text-align:center;
	padding:0 20px;
	margin:0 auto;

	p{
		hyphens:manual;
		@media (max-width: 640px){ font-size:0.9em; }
	}

	h2{font-size:var(--font-size-m); font-weight: 300; font-style:italic;margin-top:clamp(25px, 4vh, 50px);}
}

section[emailform]{
	width:100%;
	padding-inline:20px;
	margin-block:clamp(40px, 6vh, 80px) clamp(40px, 6vh, 100px);
	place-content: center;
	transition:all 0.36s ease;
	text-align:center;
	
	form{
		display:flex;
		flex-direction:column;
		gap:1rem;
		
		/* the field and the success message share one grid cell, so one can replace the other */
		[field]{
			display:grid;
			width:min(420px, 100%);
			margin-inline:auto;

			> *{ grid-area:1 / 1; }
		}

		label{
			position:relative;
			display:flex;
			align-items:center;
			border-bottom:1px solid var(--leather);

			input, button{ transition:opacity 0.36s ease; }

			/* underline darkens from the center on focus */
			&::after{
				content:'';
				position:absolute;
				inset:auto 0 -1px 0;
				height:1px;
				background:var(--text);
				scale:0 1;
				transition:scale 0.72s var(--ease-out-soft);
			}
			&:focus-within::after{ scale:1 1; }
		}

		/* blinking caret while the field is empty and unfocused */
		[caret]{
			position:absolute;
			left:1rem;
			width:1px;
			height:1.2em;
			background:var(--text);
			pointer-events:none;
			animation:caretBlink 1.1s steps(1) infinite;
		}
		label:has(input:focus, input:not(:placeholder-shown)) [caret]{ display:none; }

		/* success: the field fades out, the underline draws in dark, the thank-you rises in its place */
		[success]{
			display:flex;
			align-items:center;
			justify-content:center;
			gap:0.5rem;
			align-self:center;
			margin:0;
			font-family:var(--font-serif);
			font-size:17px;
			font-style:italic;
			font-weight:300;
			color:var(--text);
			opacity:0;
			translate:0 8px;
			pointer-events:none;
			transition:opacity 0.84s var(--ease-out-soft) 0.3s, translate 0.84s var(--ease-out-soft) 0.3s;

			i{ font-style:normal; font-size:1.2em; color:var(--cocoa); scale:0.4; transition:scale 0.72s var(--ease-pop) 0.55s; }
		}

		&.submitted{
			label{
				input, button{ opacity:0; pointer-events:none; }
				[caret]{ display:none; }
				&::after{ scale:1 1; }
			}
			[success]{ opacity:1; translate:0 0; i{ scale:1; } }
		}

		.cf-turnstile:empty{ display:none; }
	}
	
	input{
		&[type=text],
		&[type=email],
		&[type=number]{
			border:none;
			outline:none;
			font-family:var(--font-serif);
			font-size:17px;
			color:inherit;
			caret-color:var(--text);
			background:transparent;
			padding:1rem;
			line-height:1.2;
			flex:1;
			max-width:100%;
			min-width:0;
		}

		&::placeholder{
			color:inherit;
			opacity:0.5;
			font-style: italic;
			font-weight:300; /* reckless regular italic is registered at 300 */
		}
	}

	button{
		all:unset;
		appearance: none;
		-webkit-appearance: none;
		bordeR:1px solid transparent;
		cursor: pointer;
		display:flex;
		align-items:center;
		gap:0.4rem;
		padding:1rem;
		line-height:1;
		flex:0;
		white-space:nowrap;

		i{ font-size:1rem; transition:translate 0.48s var(--ease-out-soft); }
		&:hover i, &:focus-visible i{ translate:4px 0; }
		&:disabled{ cursor:default; opacity:0.5; }
	}
}

[divider]{
	display:flex;
	justify-content: center;
	background-image: url('../img/line-pattern.svg?v=3.1');
	background-size: 8px 1px;
	padding:2.5rem 0.5rem;
	color:var(--sand);
	
	[logo]{ width: 200px; max-width:60%;padding:1.5rem 1.5rem; background:var(--bg) var(--paper) fixed; }
	
	/* large */
	&[divider="large"]{
		padding: 7vw 0.5rem 10vw 0.5rem;
		[logo]{ width:300px; }
	}
}

body>footer{
	width:90%;
	padding:10% 20px 5% 20px;
	margin:auto auto 0 auto;
	font-size:calc(var(--font-size-s) * 1.1);
	text-transform: uppercase;
	background-image: url('../img/line-pattern.svg?v=3.1');
	background-size: 8.8px 1px;
	text-align:center;

	[inside]{
		display:inline-flex;
		flex-wrap:wrap;
		gap:0;
		justify-content:center;
		margin:auto;

		*{ background:var(--bg) var(--paper) fixed;padding: 0.25rem 0.5rem; }
	}

	address{font-style: normal; text-transform: none;}
	a,a:hover{text-decoration:none;color:inherit; }
	[byline]{ opacity:0.6; }
	[social]{ font-size:var(--font-size-m);}
	
	/* full-bleed stripes on phones */
	@media (max-width: 640px){ width:100%; }
}