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

/* Fonts: served from our own server (fonts/), nothing is loaded from Google.
   Syne is one variable file that covers every weight from 400 to 800.
   "latin" is English and most Western letters; "latin-ext" adds letters such as č, ł, ő.
   The browser only downloads latin-ext if the page actually uses one of those letters.
   Licences: fonts/OFL-Syne.txt and fonts/OFL-InstrumentSans.txt */
@font-face {
	font-family: 'Syne';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(../fonts/syne-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Syne';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(../fonts/syne-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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.75rem, 7vw + 1rem, 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   { grid-column: 3; 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;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
}
.email:hover { text-decoration-thickness: 2px; }
.email:focus { outline: none; }
.email:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* "Copied" note: appears just above the email for 3 seconds after a click (made by js/insoliti.js) */
.email-note {
	position: absolute;
	left: 0;
	bottom: calc(100% + .5rem);
	font-size: .8rem;
	color: var(--mute);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(.25rem);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.email-note.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .email-note { transition: none; } }