/* VAST Site – components */
:root {
	--vast-ink: #000;
	--vast-paper: #fff;
	--vast-font: "Suisse BP Intl", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Home layout helpers (classes set in Elementor) ---------- */
.vast-home {
	position: relative;
	overflow: hidden;
}
/* Stacking as in Figma: gallery above logo + side labels, below menu / contact / footer */
.vast-home .vast-above { position: relative; z-index: 10; }
.vast-home .vast-vcol {
	flex: 0 0 15px !important;
	width: 15px !important;
	padding: 0 !important;
	position: relative;
}
.vast-home .vast-vcol:first-child { margin-left: 16px; }
.vast-home .vast-ccol { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
@media (max-width: 767px) { .vast-home .vast-vcol:first-child { margin-left: 0; } }
.vast-home .vast-trail-widget {
	position: absolute !important;
	inset: 0;
	z-index: 5;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	--margin-top: 0; --margin-bottom: 0;
}
.vast-home .vast-trail-widget > .elementor-widget-container,
.vast-home .vast-trail-widget .elementor-shortcode {
	height: 100%;
}
/* Rows that only position things should not block the cursor over images */
.vast-home .vast-passthrough { pointer-events: none; }
.vast-home .vast-passthrough a,
.vast-home .vast-passthrough button,
.vast-home .vast-passthrough .vast-pmenu { pointer-events: auto; }

.vast-home .vast-vlabel {
	position: absolute !important;
	top: 50%;
	left: 50%;
	width: max-content !important;
	max-width: none !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) rotate(90deg);
}
.vast-home .vast-vlabel--left { transform: translate(-50%, -50%) rotate(-90deg); }
.vast-vlabel .elementor-heading-title { white-space: nowrap; }

.vast-home .elementor-heading-title a,
.vast-contact a {
	color: inherit;
	text-decoration: none;
}
.vast-home .elementor-heading-title a:hover,
.vast-contact a:hover,
.vast-home .elementor-heading-title a:focus-visible,
.vast-contact a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1.5px;
}

/* ---------- Contact ---------- */
.vast-contact {
	margin: 0;
	font-family: var(--vast-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 0.96;
	text-transform: uppercase;
	color: var(--vast-ink);
}
.vast-contact--right { text-align: right; }
.vast-contact--center { text-align: center; }
@media (max-width: 1024px) { .vast-contact { font-size: 15px; } }
@media (max-width: 767px)  { .vast-contact { font-size: 14px; } }

/* ---------- Cursor gallery ---------- */
.vast-trail {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.vast-trail__img {
	position: absolute;
	display: block;
	max-width: none;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Projects menu ---------- */
.vast-pmenu-wrap { position: relative; width: 148px; height: 64px; z-index: 20; }
.vast-pmenu-wrap > .vast-pmenu { position: absolute; top: 0; left: 0; }
.vast-pmenu {
	--w: 148px;
	--h: 64px;
	position: relative;
	width: var(--w);
	height: var(--h);
	background: var(--vast-paper);
	color: var(--vast-ink);
	font-family: var(--vast-font);
	transition: width var(--dur) var(--ease) var(--delay), height var(--dur) var(--ease) var(--delay);
}
.vast-pmenu::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--vast-ink);
	pointer-events: none;
	z-index: 3;
}
.vast-pmenu.is-open { --w: 236px; --h: 222px; --delay: 0s; }

.vast-pmenu .vast-pmenu__toggle,
.vast-pmenu .vast-pmenu__toggle:hover,
.vast-pmenu .vast-pmenu__toggle:focus,
.vast-pmenu .vast-pmenu__toggle:active {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0;
	padding: 10px 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--vast-font);
	font-weight: 500;
	font-style: normal;
	font-size: 16px;
	line-height: 0.96;
	letter-spacing: 0;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	min-height: 0;
	text-decoration: none;
	transition: padding var(--dur) var(--ease) var(--delay);
}
.vast-pmenu.is-open .vast-pmenu__toggle, .vast-pmenu.is-open .vast-pmenu__toggle:hover, .vast-pmenu.is-open .vast-pmenu__toggle:focus { padding: 9.7px 10.2px; bottom: auto; right: auto; width: 50%; height: 50%; }
.vast-pmenu .vast-pmenu__toggle:focus-visible { outline: 2px solid var(--vast-ink); outline-offset: 3px; }

/* Cross lines: they follow the growing box from the closed to the open layout
   (frames 146×64 → 236×222). */
/* Motion as on ol.studio: ease-out expo, 0.4s; closing waits for the icons */
.vast-pmenu { --ease: cubic-bezier(0.19, 1, 0.22, 1); --dur: 0.4s; --delay: 0.15s; }
.vast-pmenu__lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.vast-pmenu__lines .l {
	position: absolute;
	display: block;
	transition: left var(--dur) var(--ease) var(--delay), top var(--dur) var(--ease) var(--delay), width var(--dur) var(--ease) var(--delay), height var(--dur) var(--ease) var(--delay);
}
.vast-pmenu__lines .l img { display: block; width: 100%; height: 100%; max-width: none; }
.vast-pmenu__lines .l-vtop,
.vast-pmenu__lines .l-vbot { width: 3px; }
.vast-pmenu__lines .l-hleft,
.vast-pmenu__lines .l-hright { height: 3px; }

/* closed, exactly as Figma: only the left horizontal line touches the border */
.vast-pmenu__lines .l-vtop   { left: 116.4px; top: 4.8px;  height: 23.5px; }
.vast-pmenu__lines .l-vbot   { left: 116.4px; top: 37.5px; height: 24px; }
.vast-pmenu__lines .l-hleft  { left: 0;       top: 30.5px; width: 115.1px; }
.vast-pmenu__lines .l-hright { left: 120.7px; top: 30.5px; width: 24.4px; }

.vast-pmenu.is-open .l-vtop   { left: 116.5px; top: 10.7px;  height: 94.8px; }
.vast-pmenu.is-open .l-vbot   { left: 116.6px; top: 122.4px; height: 91.2px; }
.vast-pmenu.is-open .l-hleft  { left: 8.3px;   top: 109.5px; width: 102.1px; }
.vast-pmenu.is-open .l-hright { left: 128.7px; top: 109.5px; width: 99.9px; }

/* Icons appear once the lines have stretched */
.vast-pmenu__panel {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.vast-pmenu.is-open .vast-pmenu__panel {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease 0.15s, visibility 0s;
}

.vast-pmenu__list { margin: 0; padding: 0; list-style: none; }
.vast-pmenu__item { position: absolute; margin: 0; }
.vast-pmenu__item a { display: block; line-height: 0; transition: transform 0.2s ease; }
.vast-pmenu__item a:hover,
.vast-pmenu__item a:focus-visible { transform: scale(1.06); }
.vast-pmenu__item a:focus-visible { outline: 2px solid var(--vast-ink); outline-offset: 4px; }
.vast-pmenu__item img { display: block; max-width: none; }
.vast-pmenu__item--arch      { left: 139px;   top: 23.7px; }
.vast-pmenu__item--discourse { left: 139.2px; top: 136px; }
.vast-pmenu__item--food      { left: 31.1px;  top: 136px; }

.vast-pmenu .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.vast-pmenu .vast-pmenu__toggle,
	.vast-pmenu .vast-pmenu__toggle:hover,
	.vast-pmenu .vast-pmenu__toggle:focus,
	.vast-pmenu .vast-pmenu__toggle:active { font-size: 12.2px; }
	.vast-pmenu::before { border-width: 1.74px; }
}

/* ---------- About card ("Johanna Roth") ---------- */
.vast-about { text-align: center; }
.vast-about .vast-about__trigger,
.vast-about__card .vast-about__close {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--vast-ink);
	font-family: var(--vast-font);
	font-weight: 500;
	font-style: normal;
	font-size: 16px;
	line-height: 0.96;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 0;
}
.vast-about .vast-about__trigger:hover,
.vast-about .vast-about__trigger:focus,
.vast-about__card .vast-about__close:hover,
.vast-about__card .vast-about__close:focus { background: none; color: var(--vast-ink); outline: none; }
.vast-about .vast-about__trigger:hover,
.vast-about__card .vast-about__close:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1.5px; }
.vast-about .vast-about__trigger:focus-visible,
.vast-about__card .vast-about__close:focus-visible { outline: 2px solid var(--vast-ink); outline-offset: 4px; }

.vast-about__card {
	position: fixed;
	z-index: 1000;
	top: 17px;
	bottom: 18px;
	left: 50%;
	width: min(500px, calc(100vw - 32px));
	display: flex;
	flex-direction: column;
	background: #d9d9d9;
	color: #000;
	font-family: var(--vast-font);
	transform: translateX(-50%);
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.vast-about__card[hidden] { display: none; }
.vast-about__card.is-open { clip-path: inset(0 0 0 0); }
.vast-about__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(16px, 7.4vh, 72.6px) 11.3px 20px 11.8px;
	scrollbar-width: thin;
}
.vast-about__media { margin: 0; }
.vast-about__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 477 / 426;
	object-fit: cover;
}
.vast-about__text {
	margin-top: 21px;
	font-size: 20px;
	font-weight: 500;
	line-height: 0.96;
}
.vast-about__text p { margin: 0 0 0.96em; }
.vast-about__text p:last-child { margin-bottom: 0; }
.vast-about__card .vast-about__close { flex: 0 0 auto; align-self: center; margin: 8px 0 12px; }

@media (max-width: 1024px) {
	.vast-about .vast-about__trigger, .vast-about__card .vast-about__close { font-size: 15px; }
	.vast-about__text { font-size: 18px; }
}
@media (max-width: 767px) {
	.vast-about .vast-about__trigger, .vast-about__card .vast-about__close { font-size: 14px; }
	.vast-about__card { top: 12px; bottom: 12px; width: calc(100vw - 24px); }
	.vast-about__scroll { padding: 10px 10px 16px; }
	.vast-about__text { margin-top: 14px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.vast-about__card { transition: none !important; }
	.vast-pmenu, .vast-pmenu *, .vast-trail__img { transition: none !important; }
}

/* =====================================================================
   Projects listing (Figma 68:1193 – 1512px frame)
   ===================================================================== */
.vast-page { position: relative; }
.vast-page > .elementor-element,
.vast-page > .e-con-inner > .elementor-element { flex-shrink: 0; width: 100%; max-width: 100%; }

/* I / II / III */
.vast-size { display: flex; justify-content: center; align-items: center; gap: 28.46px; }
.vast-size .vast-size__btn,
.vast-size .vast-size__btn:hover,
.vast-size .vast-size__btn:focus {
	margin: 0; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: var(--vast-ink); font-family: var(--vast-font); font-weight: 500; font-size: 16px; line-height: 0.96;
	line-height: 0; cursor: pointer; min-height: 0; outline: none;
	opacity: 0.3; transition: opacity 0.2s ease;
}
.vast-size .vast-size__btn img { display: block; max-width: none; height: 16.3828px; width: auto; }
.vast-size .vast-size__btn:hover,
.vast-size .vast-size__btn[aria-pressed="true"] { opacity: 1; }
.vast-size .vast-size__btn:focus-visible { outline: 2px solid var(--vast-ink); outline-offset: 4px; }

/* Grid: II is the Figma layout (5 columns, 114 / 115px gaps at 1512px) */
.vast-projects {
	--cols: 5;
	--cg: 7.54vw;
	--rg: max(115px, 7.6vw);
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--cg);
	row-gap: var(--rg);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vast-projects[data-size="1"] { --cols: 6; --cg: 5.5vw; --rg: max(100px, 6.6vw); }
.vast-projects[data-size="3"] { --cols: 3; --cg: 7.54vw; --rg: max(120px, 7.6vw); }

.vast-project { position: relative; margin: 0; padding: 0; }
.vast-project__link { display: block; color: inherit; }
.vast-project__media {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 118.82%; /* 203.4 × 241.69 frame; padding instead of aspect-ratio so flex parents size it right */
	overflow: hidden;
	background: #eee;
}
.vast-projects .vast-project__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vast-project__link:focus-visible { outline: 2px solid var(--vast-ink); outline-offset: 4px; }

/* Hover: the image gives way to mini description, place and tags, in its place */
.vast-project__media { transition: opacity 0.2s ease; }
.vast-project__info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	font-family: var(--vast-font);
	font-weight: 500;
	font-size: 13px;
	line-height: 0.96;
	color: var(--vast-ink);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.vast-project__info p { margin: 0; }
.vast-project__mini { margin-bottom: 1.92em !important; } /* one empty line, as in the design */
.vast-project__meta { text-transform: uppercase; } /* place + project name */
.vast-project__meta > span { display: block; }
.vast-project:hover .vast-project__media,
.vast-project:focus-within .vast-project__media { opacity: 0; }
.vast-project:hover .vast-project__info,
.vast-project:focus-within .vast-project__info { opacity: 1; }
.vast-project--noinfo:hover .vast-project__media,
.vast-project--noinfo:focus-within .vast-project__media { opacity: 1; }
@media (max-width: 1024px) { .vast-project__info { font-size: 12px; } }
@media (hover: none) { .vast-project__info { display: none; } .vast-project__media { opacity: 1 !important; } }

/* View transition when switching I / II / III */
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

@media (max-width: 1024px) {
	.vast-projects { --cols: 4; --cg: 5vw; --rg: 110px; }
	.vast-projects[data-size="1"] { --cols: 5; --cg: 4vw; }
	.vast-projects[data-size="3"] { --cols: 2; --cg: 6vw; }
}
@media (max-width: 767px) {
	/* Mobile design: one image per row, full width */
	.vast-projects,
	.vast-projects[data-size="1"],
	.vast-projects[data-size="3"] { --cols: 1; --cg: 0; --rg: 11.4px; }
	.vast-size { display: none; }
}

/* =====================================================================
   Footer (Figma component 99:448)
   ===================================================================== */
.vast-footer {
	position: relative;
	height: 617px;
	font-family: var(--vast-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--vast-ink);
}
.vast-footer a,
.vast-footer .vast-footer__about { color: inherit; text-decoration: none; }
.vast-footer a:hover,
.vast-footer .vast-footer__about:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.vast-footer .vast-footer__about,
.vast-footer .vast-footer__about:hover,
.vast-footer .vast-footer__about:focus {
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	font: inherit; letter-spacing: 0; text-transform: none; color: inherit; cursor: pointer; min-height: 0;
}
.vast-footer__nav { position: absolute; top: 137px; left: calc(58.33% + 73.6px); } /* Figma frame starts 20px left of the page container */
.vast-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.vast-footer__nav li { margin: 0 0 20px; }
.vast-footer__nav li:last-child { margin-bottom: 0; }
.vast-footer__contact { position: absolute; top: 137px; left: calc(83.33% - 36.5px); margin: 0; }
.vast-footer__row { display: grid; grid-template-columns: 89px 150px; margin: 0 0 22px; }
.vast-footer__row:last-child { margin-bottom: 0; }
.vast-footer__row dt { margin: 0; font-weight: inherit; }
.vast-footer__row dd { margin: 0; }
.vast-footer__row dd p { margin: 0 0 10px; }
.vast-footer__row dd p:last-child { margin-bottom: 0; }
.vast-footer__logo { position: absolute; left: 3px; bottom: 29px; width: min(510.6px, 34vw); line-height: 0; }
.vast-footer__logo img { display: block; width: 100%; height: auto; }
.vast-footer__copy { position: absolute; right: 17px; bottom: 26px; margin: 0; } /* same right margin as the header contact */

@media (max-width: 1024px) {
	.vast-footer { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 80px 0 24px; }
	.vast-footer__nav, .vast-footer__contact, .vast-footer__logo, .vast-footer__copy { position: static; }
	.vast-footer__logo { grid-column: 1 / -1; width: min(510.6px, 70vw); margin-top: 40px; }
	.vast-footer__copy { grid-column: 1 / -1; text-align: right; }
	.vast-footer__row { grid-template-columns: 24px 1fr; }
}
@media (max-width: 767px) {
	.vast-footer { grid-template-columns: 1fr; gap: 32px; }
	.vast-footer__logo { width: 100%; }
	.vast-footer__copy { text-align: left; }
}

/* "Johanna Roth" stays fixed at the bottom; the projects scroll underneath */
.vast-page .vast-about-fixed { height: 0; margin: 0 !important; position: static !important; z-index: auto !important; }
.vast-page .vast-about-fixed .vast-about__trigger,
.vast-page .vast-about-fixed .vast-about__trigger:hover,
.vast-page .vast-about-fixed .vast-about__trigger:focus {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 50;
	transform: translateX(-50%);
	color: #fff;
	mix-blend-mode: difference; /* black on white, white over dark photos */
}
@media (max-width: 767px) { .vast-page .vast-about-fixed .vast-about__trigger { bottom: 20px; } }