/* Alyosha — minimal editorial gallery theme
   ------------------------------------------------------------ */

:root {
	--ink: #111111;
	--paper: #ffffff;
	--muted: #6b6b6b;
	--line: #e6e6e6;
	--max: 1320px;
	--gutter: clamp(20px, 5vw, 64px);
	/* Tall header band (à la davidzwirner.com): the wordmark centers in it, so
	   this one value sets the whitespace above and below the brand. */
	--header-h: clamp(64px, 7vw, 88px);
	/* Inter — neutral UI grotesque, loaded as a webfont so it renders
	   identically on every device. Falls through to system Avenir Next /
	   Helvetica if the webfont fails. */
	--sans: "Inter", "Avenir Next", "Avenir", Roboto, "Helvetica Neue", Helvetica, sans-serif;
	--serif: var(--sans);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Header ----------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(180%) blur(8px);
}
/* Full-bleed: brand hugs the far-left of the window, menu the far-right,
   regardless of screen width (only a small fixed padding off each edge). */
.site-header__inner {
	width: 100%;
	padding-inline: clamp(16px, 2.5vw, 28px);
	height: var(--header-h);
	display: flex; align-items: center; justify-content: space-between;
	/* Lift the centerline a touch: all-caps wordmark has no descenders, so
	   dead-center reads as too much air above. Half of this value is the lift. */
	padding-bottom: clamp(8px, 1vw, 12px);
}
.site-brand {
	font-family: var(--sans); font-weight: 350;
	font-size: clamp(1.75rem, 3.2vw, 2.25rem); letter-spacing: 0.01em;
	text-transform: uppercase;
}
.site-brand:hover { text-decoration: none; }

.site-nav .menu {
	list-style: none; display: flex; gap: 2.4rem; margin: 0; padding: 0;
}
.site-nav a {
	font-family: var(--sans); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.04em;
}

.nav-toggle {
	display: none; background: none; border: 0; cursor: pointer;
	width: 40px; height: 40px; padding: 8px;
}
.nav-toggle span {
	display: block; height: 1px; background: var(--ink); margin: 6px 0;
	transition: transform .25s ease, opacity .25s ease;
}

/* Hero ------------------------------------------------------- */
/* The image always spans the full window width and keeps its aspect ratio, so
   the whole frame is shown uncropped. If that makes it taller than the screen,
   the visitor scrolls down to see the rest. */
/* No top padding: the image's top edge borders the header band exactly, so
   scrolling slides it straight under the navbar with no whitespace gap. */
.hero { position: relative; }
/* Small white margin down each side so the image sits inset, not edge-to-edge. */
.hero__media { width: 100%; padding-inline: clamp(8px, 1.2vw, 16px); }
.hero__img { width: 100%; height: auto; display: block; }
.hero__placeholder { width: 100%; height: calc(100svh - var(--header-h)); }
@supports not (height: 100svh) {
	.hero__placeholder { height: calc(100vh - var(--header-h)); }
}
.hero__placeholder {
	background: linear-gradient(135deg, #f3f3f3 0%, #e9e9e9 50%, #f6f6f6 100%);
}

/* Statement -------------------------------------------------- */
.statement { padding: clamp(40px, 6vw, 84px) 0; border-bottom: 1px solid var(--line); }
.statement__lead { max-width: 34rem; }
.statement__lead p {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 2.15rem);
	line-height: 1.28;
	margin: 0 0 .6em;
}
.statement__lead p:last-child { margin-bottom: 0; }

/* Pages ------------------------------------------------------ */
.page { padding-block: clamp(48px, 8vw, 120px); }
.page__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 2rem; }
.prose { max-width: 62ch; font-size: 1.05rem; }
.prose__lead { font-family: var(--serif); font-size: 1.4rem; line-height: 1.4; }
.prose p { margin: 0 0 1.4em; }
.page__empty { color: var(--muted); }

.contact__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); }
.contact__details dl { margin: 0; }
.contact__details dt { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--muted); margin-top: 1.4rem; }
.contact__details dd { margin: .25rem 0 0; }
.contact__note { color: var(--muted); font-size: .9rem; margin-top: 2rem; }

/* Archive ---------------------------------------------------- */
.archive { padding-block: clamp(48px, 8vw, 120px); }
.post-list__item { padding-block: 2rem; border-bottom: 1px solid var(--line); }
.post-list__title { font-family: var(--serif); font-weight: 400; }

/* Home galleries grid ---------------------------------------- */
/* Two landscape tiles per row, near full-bleed: the grid spans the window
   with the same small side margins as the hero. */
.galleries { padding-block: clamp(64px, 9vw, 144px) clamp(40px, 6vw, 96px); }
.galleries__grid {
	width: 100%;
	padding-inline: clamp(8px, 1.2vw, 16px);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(32px, 4.5vw, 72px) clamp(48px, 6.5vw, 104px);
}
.gallery-card:hover { text-decoration: none; }
/* Landscape crop: every tile is the same 3:2 frame regardless of the source
   image's orientation; `focus` (object-position) picks the visible band. */
.gallery-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: #f3f3f3; position: relative; }
/* Hover state on clickable tiles: dark translucent veil with a centered label.
   Scoped to a.gallery-card so the "coming soon" placeholder (a div) stays inert.
   text-indent offsets the trailing letter-space so the label centers optically. */
a.gallery-card, a.news__link { cursor: pointer; }
a.gallery-card .gallery-card__media::after,
a.news__link .news__media::after {
	content: "View";
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.8rem; font-weight: 400;
	letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
	opacity: 0; transition: opacity 0.25s ease;
}
a.gallery-card:hover .gallery-card__media::after,
a.news__link:hover .news__media::after { opacity: 1; }
.gallery-card__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.gallery-card:hover .gallery-card__img { transform: scale(1.03); }
.gallery-card__title {
	font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
	font-size: .8rem; margin: .8rem 0 0;
}
.gallery-card--placeholder .gallery-card__media {
	background: linear-gradient(135deg, #f3f3f3 0%, #e9e9e9 50%, #f6f6f6 100%);
}
.gallery-card--placeholder .gallery-card__title { color: var(--muted); }
@media (max-width: 700px) {
	.galleries__grid { grid-template-columns: 1fr; }
}

/* News (home teaser + archive) ------------------------------- */
/* Minimal, whitespace-driven sections: small uppercase section labels, no
   divider lines, sans captions under each image. */
.news { padding-block: clamp(48px, 7vw, 110px); }
.news__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.news__heading { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin: 0; }
.news__all { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--muted); }
/* Masonry via CSS columns: whole frames, never cropped, mixed orientations
   flow into aligned columns. */
.news__grid { column-count: 3; column-gap: clamp(20px, 3vw, 40px); }
.news__item { break-inside: avoid; margin-bottom: clamp(20px, 3vw, 40px); }
.news__link:hover { text-decoration: none; }
.news__media { overflow: hidden; margin-bottom: .9rem; background: #f3f3f3; position: relative; }
.news__img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .5s ease; }
.news__link:hover .news__img { transform: scale(1.03); }
.news__date { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--muted); }
.news__title { font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: .01em; margin: .5rem 0 0; }

/* Breadcrumb (subproject -> parent) -------------------------- */
.crumb { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); margin: 0 0 .6rem; }

/* Single post ------------------------------------------------ */
.single { padding-block: clamp(40px, 7vw, 96px); }
.single__header { max-width: 62ch; }
.single__date { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--muted); }
.single__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: .5rem 0 2rem; }
.single__media { margin: 0 0 2.5rem; }
/* Show the whole image on the post page (no cropping). */
.single__img { width: 100%; height: auto; display: block; }
.single__caption { font-size: .8rem; color: var(--muted); margin-top: .6rem; }
.single__content { font-size: 1.08rem; }
.single__content p { margin: 0 0 1.4em; }
.single__footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .85rem; }

@media (max-width: 1000px) {
	.news__grid { column-count: 2; }
}
@media (max-width: 600px) {
	.news__grid { column-count: 1; }
}

/* Footer ----------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 80px); margin-top: 4rem; }
.site-footer__inner {
	max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	font-size: .85rem; color: var(--muted);
}
.site-footer__brand { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.site-footer__meta { margin: .4rem 0 0; }
.site-footer__legal { text-align: right; }

/* Responsive ------------------------------------------------- */
@media (max-width: 800px) {
	.nav-toggle { display: block; position: relative; z-index: 110; }
	/* Full-screen overlay menu: hamburger opens a full-page takeover.
	   Explicit viewport size (not inset:0) because the header's backdrop-filter
	   makes fixed descendants anchor to the header box, not the viewport. */
	.site-nav {
		position: fixed; top: 0; left: 0; z-index: 90;
		width: 100vw; height: 100vh; height: 100dvh;
		background: var(--paper);
		display: flex; align-items: center; justify-content: center;
		opacity: 0; visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; }
	.site-nav .menu { flex-direction: column; align-items: center; gap: 1.75rem; }
	.site-nav a { font-size: 1.75rem; font-weight: 400; letter-spacing: .01em; }
	/* Hamburger morphs into an X while the menu is open. */
	.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
	.contact__grid { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__legal { text-align: left; }
}