/* Styling for the whole site.
   One typeface throughout: Inter, a local copy in docs/fonts/. Headings differ
   by weight and tighter tracking, not by family.
   Responsive: a single column on phones, grids on tablets and desktops.
   Edited by hand; build.py never overwrites this file. */

:root {
	--paper: #faf9f7;
	--card: #ffffff;
	--ink: #1c1b19;
	--ink-soft: #6b675f;
	--line: #e3dfd7;
	--accent: #8c5a3c;

	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* the site column is 1000px: exactly the width of the largest photograph in
	   the galleries, so tiles, photos and text share one edge and nothing is
	   ever scaled up */
	--content: 1000px;
	--wrap: calc(var(--content) + 6rem);
	--measure: 36rem;          /* one text measure for the whole site */
	--pad: clamp(1.25rem, 4vw, 3rem);
	--radius: 3px;
	--shadow: 0 1px 2px rgba(28, 27, 25, .06), 0 14px 40px -18px rgba(28, 27, 25, .35);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scrollbar-gutter: stable;      /* room for the scrollbar is always reserved,
	                                  otherwise moving to a long page shifts the layout */
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: clamp(.9375rem, .91rem + .15vw, 1rem);   /* 15 → 16px */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .22em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: #ede4d9; }

h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

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

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: var(--paper); padding: .7em 1.2em; z-index: 20;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- header: logotype left, phone and email right ---------- */

.site-header {
	position: sticky; top: 0; z-index: 10;
	background: rgba(250, 249, 247, .9);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	/* flex-wrap rather than a breakpoint: the contacts drop to their own line
	   as soon as there is no room for them beside the logotype */
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .35rem 1.75rem;
	padding-block: .75rem;
}

.brand { display: inline-flex; }
.brand img { display: block; height: 33px; width: auto; }

/* phone and email, top right */
.contacts {
	margin-left: auto;                     /* always at the right edge of its line */
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem 1.25rem;
	font-size: .8rem;
}
.contacts a { text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }

.langs { display: flex; gap: .9rem; }
.langs a {
	font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink-soft); text-decoration: none;
}
.langs a:hover { color: var(--accent); }
.langs a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--accent); }

/* ---------- home page ---------- */

/* tiles sit in the middle of the window: spare room is split top and bottom */
.main--home { display: grid; align-content: center; }

.projects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3.5vw, 2.5rem);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	list-style: none; margin: 0;
}
.project { display: block; text-decoration: none; }
.project img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: var(--radius); background: var(--card);
	box-shadow: var(--shadow);
	transition: transform .35s ease, box-shadow .35s ease;
}
.project:hover img { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(28,27,25,.08), 0 22px 50px -20px rgba(28,27,25,.45); }
.project span {
	display: block; margin-top: .7rem;
	font-size: .95rem; font-weight: 400; line-height: 1.4;
	color: var(--ink);
}
.project:hover span { color: var(--accent); }

@media (max-width: 60rem) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .projects { grid-template-columns: minmax(0, 1fr); } }

/* ---------- project page ---------- */

.page-head { padding-block: clamp(1.6rem, 4.5vw, 2.75rem) clamp(.75rem, 2vw, 1.25rem); }
.page-head h1 {
	margin: 0;
	max-width: 38ch;
	font-size: clamp(1.4rem, 3vw, 2rem);
}

.intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1em;
	max-width: var(--measure);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	color: #4b473f;
}
.intro p { margin: 0 0 1em; }
.intro > div > :last-child { margin-bottom: 0; }

/* ---------- gallery ---------- */

.gallery {
	display: grid;
	gap: clamp(2.25rem, 6vw, 4.5rem);
	justify-items: start;
	padding-bottom: clamp(3rem, 7vw, 5rem);
}
.gallery figure { margin: 0; max-width: 100%; }
.gallery img {
	display: block; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
}
.gallery figcaption { color: var(--ink-soft); font-size: .85rem; line-height: 1.6; }
.gallery figcaption p { margin: 0 0 .5em; }
.gallery figcaption p:last-child { margin-bottom: 0; }

/* captioned gallery: caption beside the photo when wide, below it when narrow */
.gallery--captions figure {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(11rem, 15rem);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: end;
	max-width: 100%;
}
@media (max-width: 55rem) {
	.gallery--captions figure { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.gallery--captions figcaption { padding-top: .25rem; }
}

/* ---------- footer: the biography in small type, languages beside it ---------- */

.site-footer { border-top: 1px solid var(--line); margin-top: auto; }
.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.25rem 3rem;
	align-items: end;
	min-height: 5.3rem;
	padding-block: 2rem;
	font-size: .8rem; line-height: 1.65; color: var(--ink-soft);
}
.site-footer__bio { max-width: var(--measure); }
.site-footer__bio p { margin: 0; }
.site-footer__meta { justify-self: end; align-self: end; white-space: nowrap; }
.site-footer a { text-decoration: none; border-bottom: 1px solid var(--line); }

@media (max-width: 45rem) {
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 404 ---------- */

.notfound { padding-block: clamp(4rem, 15vh, 8rem); }
.notfound h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); margin: 0 0 1rem; }
.notfound p { color: var(--ink-soft); }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}