/* ==========================================================================
   Yoof — Havgapet
   Zimna morska czerń, antyczne złoto, chłodny papier.
   Marcellus (grawerowane kapitaliki) + Schibsted Grotesk (norweski grotesk).
   ========================================================================== */

/* --- Fonty ------------------------------------------------------------- */
@font-face {
	font-family: "Marcellus";
	src: url("../fonts/marcellus-regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* --- Tokeny ------------------------------------------------------------ */
:root {
	/* Paleta „Havgapet” */
	--hav: #0a0d10;        /* morska czerń — tło ciemne */
	--kull: #12161b;       /* panel na ciemnym */
	--gull: #c6a55c;       /* antyczne złoto (logo) */
	--gull-lys: #e3c98a;   /* złoto rozświetlone (hover) */
	--papir: #f2f1ee;      /* chłodny papier — tło jasne */
	--skifer: #22272d;     /* tekst na jasnym */
	--taake: #97a0a9;      /* mgła — tekst drugorzędny na ciemnym */
	--grafitt: #5c646c;    /* tekst drugorzędny na jasnym */

	--font-display: "Marcellus", "Times New Roman", serif;
	--font-body: "Schibsted Grotesk", -apple-system, "Helvetica Neue", sans-serif;

	--marg: clamp(20px, 5vw, 72px);
	--maks: 1560px;

	--fart: 640ms;
	--kurve: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset / baza ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	background: var(--hav);
	color: var(--papir);
	-webkit-font-smoothing: antialiased;
}
body.tone-lys {
	background: var(--papir);
	color: var(--skifer);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a, .prosa a { color: inherit; text-decoration: underline; text-decoration-color: var(--gull); text-underline-offset: 3px; }
p a:hover, .prosa a:hover { color: var(--gull); }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--gull); outline-offset: 3px; }

.hopp {
	position: absolute; left: -9999px; top: 0;
	background: var(--gull); color: var(--hav); padding: 10px 18px; z-index: 200;
}
.hopp:focus { left: var(--marg); }

/* --- Sygnatura: złoty horyzont ----------------------------------------- */
.horisont {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--gull) 18%, var(--gull) 82%, transparent 100%);
	opacity: 0.85;
}

/* --- Animacja otwarcia --------------------------------------------------- */
.aapning {
	position: fixed; inset: 0; z-index: 170;
	background: var(--hav);
	display: flex; align-items: center; justify-content: center;
	opacity: 1;
	transition: opacity 700ms var(--kurve), visibility 0s 700ms;
}
.aapning__logo {
	width: clamp(180px, 26vw, 300px); height: auto;
	opacity: 0; transform: scale(0.94);
}
.aapning__linje {
	position: absolute; left: 0; top: 50%; height: 1px; width: 100%;
	background: linear-gradient(90deg, transparent, var(--gull), transparent);
	box-shadow: 0 0 24px 1px rgba(198, 165, 92, 0.5);
	transform: scaleX(0);
}
.aapning.aapning--spiller .aapning__logo { animation: aapning-logo 1400ms var(--kurve) 250ms forwards; }
.aapning.aapning--spiller .aapning__linje { animation: aapning-linje 1100ms var(--kurve) forwards; }
.aapning.aapning--ferdig { opacity: 0; visibility: hidden; pointer-events: none; }
.aapning[hidden] { display: none; }
@keyframes aapning-linje {
	0% { transform: scaleX(0); }
	60% { transform: scaleX(1); }
	100% { transform: scaleX(1); opacity: 0.25; }
}
@keyframes aapning-logo {
	to { opacity: 1; transform: scale(1); }
}

/* --- Kurtyna przejść stron --------------------------------------------- */
.kappe {
	position: fixed; inset: 0; z-index: 150;
	background: var(--hav);
	transform: translateY(101%);
	pointer-events: none;
}
.kappe__linje {
	position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: var(--gull);
	box-shadow: 0 0 24px 1px rgba(198, 165, 92, 0.55);
}
.kappe.kappe--inn { transition: transform 560ms var(--kurve); transform: translateY(0); pointer-events: all; }
.kappe.kappe--ut  { transition: transform 640ms var(--kurve); transform: translateY(-101%); }
.kappe.kappe--klar { transform: translateY(0); transition: none; }

/* --- Nagłówek ----------------------------------------------------------- */
.topp {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; justify-content: space-between; align-items: center;
	padding: 18px var(--marg);
	transition: background 400ms var(--kurve), box-shadow 400ms var(--kurve), padding 400ms var(--kurve);
}
/* Tło paska po przewinięciu — treść nigdy nie koliduje z nawigacją. */
.topp--scrollet {
	background: rgba(10, 13, 16, 0.88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(198, 165, 92, 0.28);
	padding-top: 12px; padding-bottom: 12px;
}
/* Na jasnych stronach pasek jest ciemny od początku (odwrotność tła). */
.tone-lys .topp {
	background: rgba(10, 13, 16, 0.94);
	box-shadow: 0 1px 0 rgba(198, 165, 92, 0.45);
	color: var(--papir);
}
.tone-lys .topp .topp__ornament {
	filter: drop-shadow(0 0 6px rgba(198, 165, 92, 0.25));
}
.topp__merke { display: inline-flex; gap: 0.45em; align-items: baseline; }
.topp__ornament {
	width: 58px; height: auto; align-self: center;
	margin-right: 6px;
	filter: drop-shadow(0 0 6px rgba(198, 165, 92, 0.25));
}
.topp__navn {
	font-family: var(--font-display);
	font-size: 1.15rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.topp__navn--gull { color: var(--gull); font-size: 0.72rem; letter-spacing: 0.34em; }
.topp__nav { display: flex; gap: clamp(18px, 3vw, 44px); }
.topp__nav a {
	font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
	padding-bottom: 4px; position: relative;
}
.topp__nav a::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
	background: var(--gull);
	transform: scaleX(0); transform-origin: right;
	transition: transform 360ms var(--kurve);
}
.topp__nav a:hover::after, .topp__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* --- Etykiety ----------------------------------------------------------- */
.merkelapp {
	font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--gull); margin: 0 0 18px;
}
.merkelapp a { color: inherit; }
.merkelapp a:hover { color: var(--gull-lys); }
.merkelapp__aar { color: var(--taake); margin-left: 1.2em; letter-spacing: 0.18em; }
.tone-lys .merkelapp__aar { color: var(--grafitt); }

/* --- Strona główna ------------------------------------------------------ */
.hjem {
	min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end;
	position: relative;
	padding: 0 0 8svh;
	overflow: hidden;
}
.hjem__tittel {
	position: relative; z-index: 3;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 7.2vw, 6.4rem);
	line-height: 1.04;
	letter-spacing: 0.015em;
	padding: 16svh var(--marg) 0;
	text-wrap: balance;
}
.hjem__tittel-linje { display: block; }
.hjem__tittel em { font-style: normal; color: var(--gull); }
.hjem__ingress {
	position: relative; z-index: 3;
	margin: 26px 0 6svh; padding: 0 var(--marg);
	color: var(--taake); max-width: 46ch;
}
.hjem__paneler {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: repeat(3, 1fr);
}
.hjem__panel {
	position: relative;
	min-height: 38svh;
	padding: 30px 28px;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
	border-right: 1px solid rgba(242, 241, 238, 0.1);
	overflow: hidden;
	isolation: isolate;
}
.hjem__panel:last-child { border-right: 0; }
.hjem__panel::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--panel-bilde);
	background-size: cover; background-position: center;
	filter: grayscale(35%) brightness(0.42);
	transform: scale(1.04);
	transition: filter 700ms var(--kurve), transform 900ms var(--kurve);
}
.hjem__panel::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(10, 13, 16, 0.15) 30%, rgba(10, 13, 16, 0.82) 100%);
}
.hjem__panel:hover::before, .hjem__panel:focus-visible::before {
	filter: grayscale(0%) brightness(0.62);
	transform: scale(1);
}
.hjem__panel-etikett {
	font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--taake);
	transition: color 400ms;
}
.hjem__panel:hover .hjem__panel-etikett { color: var(--gull); }
.hjem__panel-tittel {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	letter-spacing: 0.04em;
}
.horisont--hjem {
	position: absolute; left: 0; right: 0; top: 0;
	z-index: 4;
	box-shadow: 0 0 18px 1px rgba(198, 165, 92, 0.45);
	grid-column: 1 / -1;
}

/* --- Home: wybrane prace -------------------------------------------------- */
.utvalgt { padding: 12vh var(--marg) 4vh; max-width: var(--maks); margin: 0 auto; }
.utvalgt__tittel {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.6vw, 3.8rem);
}
.galleri--kollasj { margin-top: 7vh; }
.utvalgt__kort { display: block; position: relative; }
.utvalgt__kort-kat {
	display: block;
	margin-top: 14px;
	font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--gull);
}
.utvalgt__kort-tittel {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	margin-top: 4px;
	position: relative;
}
.utvalgt__kort-tittel::after {
	content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
	background: var(--gull);
	transform: scaleX(0); transform-origin: right;
	transition: transform 420ms var(--kurve);
}
.utvalgt__kort:hover .utvalgt__kort-tittel::after { transform: scaleX(1); transform-origin: left; }
.utvalgt__kort-tekst {
	border: 1px solid rgba(198, 165, 92, 0.35);
	padding: clamp(26px, 3vw, 46px);
	display: flex; flex-direction: column; gap: 20px;
}
.utvalgt__sitat {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
	line-height: 1.4;
	margin: 0;
	color: var(--papir);
}
.utvalgt__lenke {
	font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--gull);
}
.utvalgt__lenke:hover { color: var(--gull-lys); }

/* --- Home: pasek kategorii ------------------------------------------------ */
.hjemkat { padding: 8vh var(--marg) 10vh; max-width: var(--maks); margin: 0 auto; }
.hjemkat__indre {
	margin-top: 8vh;
	display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 90px);
	align-items: start;
}
.hjemkat__tittel {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.6vw, 3.8rem);
}
.hjemkat__liste li { border-bottom: 1px solid rgba(242, 241, 238, 0.12); }
.hjemkat__liste li:first-child { border-top: 1px solid rgba(242, 241, 238, 0.12); }
.hjemkat__lenke {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 16px 6px;
	transition: padding-left 380ms var(--kurve);
}
.hjemkat__lenke:hover { padding-left: 20px; }
.hjemkat__navn { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.7rem); }
.hjemkat__lenke:hover .hjemkat__navn { color: var(--gull-lys); }
.hjemkat__antall { font-size: 0.78rem; letter-spacing: 0.2em; color: var(--taake); }

/* --- Home: zajawka bio ---------------------------------------------------- */
.hjembio { padding: 0 var(--marg) 14vh; max-width: var(--maks); margin: 0 auto; }
.hjembio__indre { max-width: 720px; }
.hjembio__tekst {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.6vw, 2.2rem);
	line-height: 1.35;
	margin: 0 0 34px;
}
.knapp.knapp--gull {
	display: inline-block;
	background: transparent; color: var(--gull);
	border: 1px solid var(--gull);
	text-decoration: none;
}
.knapp.knapp--gull:hover { background: var(--gull); color: var(--hav); }

/* --- Indeks kategorii ---------------------------------------------------- */
.indeks { padding: calc(14svh + 40px) var(--marg) 12vh; max-width: var(--maks); margin: 0 auto; position: relative; }
.indeks__topp { margin-bottom: 8vh; }
.indeks__tittel {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 5vw, 4.4rem);
	line-height: 1.08;
}
.indeks__liste { border-top: 1px solid rgba(242, 241, 238, 0.12); }
.indeks__rad { border-bottom: 1px solid rgba(242, 241, 238, 0.12); }
.indeks__lenke {
	display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
	padding: clamp(18px, 3.4vh, 34px) 8px;
	transition: padding-left 420ms var(--kurve);
}
.indeks__lenke:hover { padding-left: 26px; }
.indeks__navn {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 4.4vw, 3.6rem);
	letter-spacing: 0.02em;
	transition: color 300ms;
}
.indeks__lenke:hover .indeks__navn { color: var(--gull-lys); }
.indeks__antall {
	font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--taake); white-space: nowrap;
}
.indeks__forhaand {
	position: fixed; z-index: 5;
	width: clamp(220px, 24vw, 380px); aspect-ratio: 3 / 4;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 300ms var(--kurve), transform 300ms var(--kurve);
	overflow: hidden;
}
.indeks__forhaand img { width: 100%; height: 100%; object-fit: cover; }
.indeks__forhaand.er-synlig { opacity: 1; transform: scale(1); }

/* --- Kategoria ----------------------------------------------------------- */
.kategori { padding: calc(14svh + 40px) var(--marg) 12vh; max-width: var(--maks); margin: 0 auto; position: relative; }
.kategori__tittel {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 5.2rem);
	line-height: 1.05;
}
.kategori__antall { color: var(--taake); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 14px; }
.kategori__spokelse {
	position: absolute; top: 9svh; right: calc(-1 * var(--marg));
	font-family: var(--font-display);
	font-size: clamp(9rem, 24vw, 22rem);
	line-height: 1;
	color: var(--kull);
	z-index: -1;
	white-space: nowrap;
	user-select: none;
}

/* Asymetryczny grid sesji: rytm 6 kart */
.sesjonsgrid {
	margin-top: 9vh;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(20px, 3.4vw, 56px);
	align-items: start;
}
.sesjonskort { grid-column: span 5; }
.sesjonskort--0 { grid-column: 1 / span 5; margin-top: 0; }
.sesjonskort--1 { grid-column: 7 / span 6; margin-top: 12vh; }
.sesjonskort--2 { grid-column: 2 / span 6; margin-top: -4vh; }
.sesjonskort--3 { grid-column: 9 / span 4; margin-top: 8vh; }
.sesjonskort--4 { grid-column: 1 / span 4; margin-top: 2vh; }
.sesjonskort--5 { grid-column: 6 / span 6; margin-top: 10vh; }
.sesjonskort__ramme { overflow: hidden; }
.sesjonskort__bilde {
	width: 100%;
	transition: transform 800ms var(--kurve);
}
.sesjonskort__lenke:hover .sesjonskort__bilde { transform: scale(1.035); }
.sesjonskort__tittel {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.8vw, 1.65rem);
	margin-top: 16px;
	letter-spacing: 0.02em;
	position: relative; display: inline-block;
}
.sesjonskort__tittel::after {
	content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
	background: var(--gull);
	transform: scaleX(0); transform-origin: right;
	transition: transform 420ms var(--kurve);
}
.sesjonskort__lenke:hover .sesjonskort__tittel::after { transform: scaleX(1); transform-origin: left; }
.sesjonskort__meta { color: var(--taake); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 8px 0 0; }

/* --- Sesja (jasna) ------------------------------------------------------- */
.sesjon { padding: calc(14svh + 40px) var(--marg) 10vh; max-width: var(--maks); margin: 0 auto; position: relative; }
.sesjon__vertikal {
	position: fixed; left: clamp(6px, 1vw, 18px); top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl; rotate: 180deg;
	margin: 0;
	font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
	color: rgba(92, 100, 108, 0.55);
	pointer-events: none;
	z-index: 50;
}
.tone-moerk .sesjon__vertikal { color: rgba(151, 160, 169, 0.45); }
.sesjon__topp { max-width: 900px; }
.sesjon__tittel {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1.06;
}
.sesjon__under { color: var(--grafitt); margin: 16px 0 0; font-size: 1.05rem; }
.horisont--sesjon { margin-top: 42px; max-width: 520px; }
.sesjon__video { margin-top: 8vh; aspect-ratio: 16 / 9; }
.sesjon__video iframe { width: 100%; height: 100%; border: 0; }

.galleri {
	margin-top: 8vh;
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3.6vw, 60px);
	align-items: start;
	/* Kolumny z parallaxem nie mogą wyjeżdżać na stopkę. */
	overflow: clip;
}
.galleri__kolonne { display: grid; gap: clamp(20px, 3.6vw, 60px); }
.galleri__kolonne[data-fart="0.82"] { margin-top: 10vh; }
.galleri__figur { overflow: hidden; }
.galleri__bilde { width: 100%; transition: transform 900ms var(--kurve); }
.galleri__lenke:hover .galleri__bilde { transform: scale(1.02); }

.sesjon__tekst { margin-top: 8vh; max-width: 62ch; }
.prosa { line-height: 1.75; }
.prosa p { margin: 0 0 1.2em; }

.sesjon__nabo {
	margin-top: 12vh;
	display: flex; justify-content: space-between; gap: 24px;
	border-top: 1px solid rgba(34, 39, 45, 0.14);
	padding-top: 36px;
}
.tone-moerk .sesjon__nabo { border-top-color: rgba(242, 241, 238, 0.12); }
.sesjon__nabo-lenke { display: flex; flex-direction: column; gap: 6px; max-width: 44%; }
.sesjon__nabo-lenke--neste { text-align: right; margin-left: auto; }
.sesjon__nabo-etikett { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grafitt); }
.sesjon__nabo-tittel { font-family: var(--font-display); font-size: 1.35rem; }
.sesjon__nabo-lenke:hover .sesjon__nabo-tittel { color: var(--gull); }

/* Galeria kliencka na ciemnym */
.sesjon--klient .sesjon__nabo { display: none; }
/* Ochrona proofów: bez zaznaczania i przeciągania obrazków. */
.single-klientgalleri .galleri__bilde,
.single-klientgalleri .lysboks__bilde {
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}
.klient__laas { max-width: 52ch; margin-top: 7vh; }
.passordskjema { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 24px; }
.passordskjema label { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gull); }
.passordskjema input[type="password"] {
	background: var(--kull); border: 1px solid rgba(242, 241, 238, 0.18); color: var(--papir);
	padding: 12px 14px; font: inherit; width: 100%; max-width: 320px;
}
.passordskjema input[type="submit"] {
	background: var(--gull); border: 0; color: var(--hav);
	padding: 12px 26px; font: inherit; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem;
	cursor: pointer; margin-top: 8px;
	transition: background 250ms;
}
.passordskjema input[type="submit"]:hover { background: var(--gull-lys); }

/* --- Om meg -------------------------------------------------------------- */
.ommeg { padding: calc(14svh + 40px) var(--marg) 10vh; max-width: var(--maks); margin: 0 auto; }
.ommeg__tittel {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 6.4vw, 5.4rem);
	line-height: 1.05;
}
.ommeg__indre {
	margin-top: 9vh;
	display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 7.5fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}
.ommeg__indre--tekst { grid-template-columns: minmax(0, 66ch); }
.ommeg__portrett img {
	width: 100%;
	/* Wycinanka bez tła: miękkie wygaszenie dolnej krawędzi. */
	-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.ommeg__tekst { max-width: 66ch; }
.ommeg__tekst { font-size: 1.13rem; }
.ommeg__tekst p:first-child::first-letter {
	font-family: var(--font-display);
	font-size: 3.4em; float: left; line-height: 0.86;
	padding: 4px 12px 0 0; color: var(--gull);
}
.ommeg__soyler {
	margin-top: 11vh;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 64px);
	border-top: 1px solid rgba(34, 39, 45, 0.14);
	padding-top: 44px;
}
.ommeg__soyle-tittel {
	font-family: var(--font-display);
	font-size: 1.4rem; letter-spacing: 0.06em;
	margin-bottom: 10px;
}
.ommeg__soyle p { color: var(--grafitt); margin: 0; }

/* --- Kontakt ------------------------------------------------------------- */
.kontakt { padding: calc(14svh + 40px) var(--marg) 10vh; max-width: var(--maks); margin: 0 auto; }
.kontakt__tittel {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 6.4vw, 5.4rem);
}
.kontakt__indre {
	margin-top: 9vh;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 90px);
	align-items: start;
}
.kontakt__data { margin-top: 34px; }
.kontakt__data dt {
	font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--gull); margin-top: 20px;
}
.kontakt__data dd { margin: 4px 0 0; font-size: 1.05rem; }

.skjema__felt { display: flex; flex-direction: column; gap: 7px; margin: 0 0 22px; }
.skjema__felt label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grafitt); }
.skjema__valgfri { text-transform: none; letter-spacing: 0; }
.skjema__felt input, .skjema__felt select, .skjema__felt textarea {
	font: inherit; color: inherit;
	background: transparent;
	border: 0; border-bottom: 1px solid rgba(34, 39, 45, 0.3);
	padding: 9px 2px;
	border-radius: 0;
	transition: border-color 300ms;
}
.skjema__felt input:focus, .skjema__felt select:focus, .skjema__felt textarea:focus {
	outline: none; border-bottom-color: var(--gull);
}
.skjema__felt--skjult { position: absolute; left: -9999px; }
.knapp {
	font: inherit; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase;
	background: var(--skifer); color: var(--papir);
	border: 1px solid var(--skifer);
	padding: 15px 42px;
	cursor: pointer;
	transition: background 300ms, color 300ms;
}
.knapp:hover { background: var(--gull); border-color: var(--gull); color: var(--hav); }
.skjema__melding { padding: 14px 18px; margin-bottom: 26px; font-size: 0.95rem; }
.skjema__melding--ok { border: 1px solid var(--gull); color: var(--skifer); }
.skjema__melding--feil { border: 1px solid #b4523c; color: #b4523c; }

/* --- 404 ----------------------------------------------------------------- */
.feil404 { min-height: 82svh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--marg); max-width: var(--maks); margin: 0 auto; }
.feil404__tittel { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4.2rem); }
.feil404__tekst { color: var(--taake); max-width: 44ch; }
.feil404 .horisont { margin-top: 7vh; max-width: 520px; }

/* --- Stopka -------------------------------------------------------------- */
.bunn { margin-top: 4vh; }
.tone-lys .bunn { background: var(--hav); color: var(--papir); }
.bunn__indre { padding: 8vh var(--marg) 6vh; max-width: var(--maks); margin: 0 auto; }
.bunn__merke { font-family: var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; font-size: 1rem; margin: 0 0 6px; color: var(--gull); }
.bunn__tekst { color: var(--taake); margin: 2px 0; font-size: 0.95rem; }
.bunn__tekst a:hover { color: var(--gull); }
.bunn__copy { color: var(--taake); opacity: 0.6; font-size: 0.8rem; margin-top: 26px; }

/* --- Viewer pełnoekranowy ------------------------------------------------- */
.lysboks {
	position: fixed; inset: 0; z-index: 160;
	background: var(--hav);
	display: flex; align-items: center; justify-content: center;
}
.lysboks[hidden] { display: none; }
.lysboks__figur {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 4svh clamp(64px, 8vw, 140px);
}
.lysboks__bilde {
	max-width: 100%; max-height: 92svh; width: auto; height: auto;
	object-fit: contain;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
	opacity: 1; transition: opacity 260ms var(--kurve);
}
.lysboks__bilde.er-bytter { opacity: 0; }
.lysboks__tittel {
	position: absolute; left: clamp(10px, 1.8vw, 28px); top: 44%;
	transform: translateY(-50%);
	writing-mode: vertical-rl; rotate: 180deg;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(0.95rem, 1.5vw, 1.3rem);
	letter-spacing: 0.16em; text-transform: uppercase;
	color: rgba(242, 241, 238, 0.5);
	pointer-events: none;
	max-height: 56svh; overflow: hidden; white-space: nowrap;
}
.lysboks__teller {
	position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
	margin: 0;
	font-size: 0.8rem; letter-spacing: 0.3em;
	color: var(--taake);
}
.lysboks__teller [data-lysboks-teller] { color: var(--gull); }
.lysboks__knapp {
	position: absolute;
	background: transparent; border: 0; color: var(--papir);
	font: inherit; font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
	cursor: pointer; padding: 18px;
	transition: color 250ms, letter-spacing 350ms var(--kurve);
}
.lysboks__knapp:hover { color: var(--gull); letter-spacing: 0.38em; }
.lysboks__knapp:focus-visible { outline: 1px solid var(--gull); outline-offset: 4px; }
.lysboks__knapp--forrige { left: clamp(16px, 3vw, 48px); bottom: 16px; }
.lysboks__knapp--neste { right: clamp(16px, 3vw, 48px); bottom: 16px; }
.lysboks__knapp--lukk {
	right: clamp(4px, 1vw, 16px); top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	letter-spacing: 0.3em;
}

/* --- Reveal / motion ------------------------------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--fart) var(--kurve), transform var(--fart) var(--kurve);
}
.reveal.er-inne { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.kappe { display: none; }
	.aapning { display: none; }
	.sesjonskort__bilde, .galleri__bilde, .hjem__panel::before { transition: none; }
	html { scroll-behavior: auto !important; }
}

/* --- Responsywność -------------------------------------------------------- */
@media (max-width: 1080px) {
	.sesjonskort--0, .sesjonskort--1, .sesjonskort--2,
	.sesjonskort--3, .sesjonskort--4, .sesjonskort--5 {
		grid-column: span 6; margin-top: 0;
	}
	.sesjonskort--1, .sesjonskort--3, .sesjonskort--5 { margin-top: 8vh; }
}
@media (max-width: 900px) {
	.hjem__paneler { grid-template-columns: 1fr; }
	.hjem__panel { min-height: 22svh; border-right: 0; border-bottom: 1px solid rgba(242, 241, 238, 0.1); }
	.horisont--hjem { display: none; }
	.ommeg__indre, .kontakt__indre { grid-template-columns: 1fr; }
	.ommeg__soyler { grid-template-columns: 1fr; gap: 30px; }
	.galleri { grid-template-columns: 1fr; }
	.galleri__kolonne[data-fart="0.82"] { margin-top: 0; }
	.indeks__forhaand { display: none; }
	.kategori__spokelse { display: none; }
	.sesjon__vertikal { display: none; }
	.hjemkat__indre { grid-template-columns: 1fr; }
	.lysboks__tittel { display: none; }
	.lysboks__figur { padding: 3svh 12px 64px; }
	.lysboks__knapp--lukk { writing-mode: horizontal-tb; top: 10px; right: 10px; transform: none; }
}
@media (max-width: 640px) {
	.topp { padding: 14px var(--marg); }
	.topp__nav { gap: 14px; }
	.topp__nav a { font-size: 0.72rem; letter-spacing: 0.08em; }
	.topp__navn--gull { display: none; }
	.topp__ornament { width: 42px; }
	.sesjonsgrid { grid-template-columns: 1fr; gap: 40px; }
	.sesjonskort--0, .sesjonskort--1, .sesjonskort--2,
	.sesjonskort--3, .sesjonskort--4, .sesjonskort--5 {
		grid-column: 1 / -1; margin-top: 0;
	}
	.sesjon__nabo { flex-direction: column; }
	.sesjon__nabo-lenke { max-width: 100%; }
	.sesjon__nabo-lenke--neste { text-align: left; margin-left: 0; }
}