/* ==========================================================================
   INSOLITI Architects: one-page site
   
   ========================================================================== */

:root {
	--paper: #ffffff;
	--ink: #000000;
	--mute: #6f6e69;
	--pad: clamp(1.25rem, 4vw, 3rem);
	--logo-w: min(3.5rem, 12vw); /* resizes the logo and the studio name together */
	--display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
	--font: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

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

html { height: 100%; color-scheme: light; }

body {
	margin: 0;
	min-height: 100%;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

/* Text cannot be selected, highlighted or long-press copied. The email still opens on click. */
body, body * {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/* Page frame ------------------------------------------------------------ */
.page {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--pad);
	padding-top: max(var(--pad), env(safe-area-inset-top, 0px));
	padding-bottom: max(var(--pad), env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Static terrain, shown only when scripts are blocked */
	background: url(../images/terrain-fallback.svg) center / cover no-repeat;
}
.js .page { background: none; }

.page > header,
.page > main,
.page > footer { position: relative; z-index: 1; }

/* Terrain map: pinned to the whole screen, behind everything.
   Fixed + the largest viewport height, so it always fills the screen, even when a phone's
   address bar slides in and out or the page is pulled down to refresh. */
.terrain {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	z-index: 0;
	pointer-events: none;
}

/* Terrain draw animation (used by js/insoliti.js) ------------------------ */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes settle { from { stroke: #8f8f8f; } }

/* Top bar: logo + studio name ------------------------------------------- */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.logo { display: block; width: var(--logo-w); height: auto; }
.name {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: calc(var(--logo-w) * .357);
	line-height: 1;
	white-space: nowrap;
}

/* Headline -------------------------------------------------------------- */
main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 3rem 0;
}
h1 {
	margin: 0;
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(2.25rem, 8vw, 6.5rem);
	line-height: 1.02;
	letter-spacing: -.02em;
}

.sub {
	margin: clamp(.9rem, 2vw, 1.5rem) 0 0;
	font-family: var(--font);
	font-size: clamp(1.05rem, 2.2vw, 1.5rem);
	letter-spacing: .01em;
	color: var(--mute);
}

/* Bottom row: email left, "coming soon" in the center, location right ---- */
footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: .5rem 1.5rem;
	font-size: .95rem;
}
footer > * { margin: 0; }
footer .email { justify-self: start; text-align: left; }
footer .soon  { justify-self: center; text-align: center; color: var(--mute); }
footer .loc   { justify-self: end; text-align: right; }
footer .coords { display: block; margin-top: .2rem; font-size: .8rem; letter-spacing: .02em; color: var(--mute); font-variant-numeric: tabular-nums; }

a { color: var(--ink); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Phones and iPad portrait: email and location on one line, "coming soon" centered below */
@media (max-width: 48rem) {
	footer {
		grid-template-columns: 1fr auto;
		grid-template-areas: "email loc" "soon soon";
	}
	footer .email { grid-area: email; }
	footer .loc   { grid-area: loc; }
	footer .soon  { grid-area: soon; justify-self: center; }
}

/* Print: plain page, no terrain ----------------------------------------- */
@media print {
	.terrain { display: none; }
	.page { background: none; min-height: 0; }
}

span.F { unicode-bidi: bidi-override; direction: rtl; }
span.F.B80E:before { content: "moc.itilos"; }
span.F.B80E:after { content: "@ofni"; }
.email { cursor: pointer; }