/* www.padv.no */

:root {
	--ink: #16212b;
	--ink-soft: #4a5763;
	--paper: #fbf9f6;
	--line: #e4ded5;
	--accent: #9a4f14;
	--scrim: 10, 18, 26;
	--measure: 36rem;
	--pad: clamp(1rem, 4vw, 3rem);
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Front page title only. Cormorant Garamond SemiBold Italic, SIL Open Font
   License 1.1, served from this host; the file is fetched only where the
   family is used. Registered at the title's weight (500) so the fallback
   serif stays regular instead of going bold. */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("cormorant-garamond-600-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* always show the scrollbar, so short pages don't shift sideways */
	overflow-y: scroll;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
}

main { flex: 1; }

img, iframe { max-width: 100%; }
picture { display: contents; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #e8a23d; outline-offset: 3px; }

.skip {
	position: absolute;
	left: -999rem;
	z-index: 10;
	padding: 0.5rem 1rem;
	color: #fff;
	background: var(--ink);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* Header */

/* Narrow screens: name and language switch on the first row, the menu on
   its own row below. Wide screens: everything on one row. */

.site-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.35rem 1.5rem;
	padding: 0.9rem var(--pad);
	color: #fff;
	background: var(--ink);
}

.brand {
	grid-area: 1 / 1;
	font-family: var(--serif);
	font-size: clamp(1.05rem, 4.5vw, 1.25em);
	line-height: 1.25;
	color: inherit;
	text-decoration: none;
	text-wrap: balance;
}

/* line-height 0 makes the flag's bottom edge the link's baseline, so the
   flag stands on the same baseline as the name and the menu text */
.site-header .lang {
	grid-area: 1 / 2;
	line-height: 0;
}

.site-header .lang img {
	width: auto;
	height: 1rem;
}

.site-header nav {
	grid-area: 2 / 1 / 3 / -1;
	font-size: clamp(0.875rem, 3.7vw, 1em);
}

.site-header ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem clamp(0.75rem, 4vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header nav a,
.site-header .lang {
	display: inline-block;
	padding: 0.4rem 0;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"],
.site-header .lang:hover { border-bottom-color: currentColor; }

@media (min-width: 64rem) {
	.site-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.25rem 2rem;
	}
	.brand { margin-right: auto; font-size: 1.25em; }
	.site-header nav { font-size: 1em; }
	/* next to the menu text the flag reads as too high when it stands on
	   the baseline; lowered to sit centred on the letters */
	.site-header .lang img { position: relative; top: 2px; }
}

/* Front page */

.front .site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	justify-content: flex-end;
	padding-bottom: 3rem;
	background: linear-gradient(rgba(var(--scrim), 0.6), rgba(var(--scrim), 0));
	text-shadow: 0 1px 3px rgba(var(--scrim), 0.6);
}

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	align-content: end;
	gap: 1.5rem 2rem;
	min-height: 100vh;
	min-height: 100svh;
	padding: 7rem var(--pad) var(--pad);
	color: #fff;
	background: #2a3540;
	text-shadow: 0 1px 4px rgba(var(--scrim), 0.7);
}

.hero img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% 55%;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(var(--scrim), 0.65), rgba(var(--scrim), 0) 50%);
}

.hero p { margin: 0; }

.hero h1 {
	margin: 0;
	font-family: "Cormorant Garamond", var(--serif);
	font-size: clamp(2.25rem, 1.2rem + 4.8vw, 5.5rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.05;
	/* Optical alignment with the tagline above: the foot of the italic A
	   hangs out to the left of the text edge */
	text-indent: 0.04em;
	text-wrap: balance;
}
/* ...while the italic T that starts the English title sits in from it */
html:lang(en) .hero h1 { text-indent: -0.05em; }

/* The name is kept on one line, so a narrow screen breaks beside it */
.hero h1 em { white-space: nowrap; }

.tagline {
	font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hero-credit { text-align: right; }
.photo-credit { font-size: 0.8em; opacity: 0.9; }

@media (max-width: 44rem) {
	.hero { grid-template-columns: 1fr; }
}

/* Text pages */

.banner {
	height: clamp(7rem, 24vh, 17rem);
	background: #2a3540;
}

.banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% 60%;
}

.page {
	width: 100%;
	max-width: calc(var(--measure) + 2 * var(--pad));
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 4.5rem) var(--pad) clamp(3rem, 8vw, 6rem);
	overflow-wrap: break-word;
	hyphens: auto;
}

.page h1 {
	margin: 0 0 1em;
	font-family: var(--serif);
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.875rem);
	font-weight: 500;
	line-height: 1.1;
	text-wrap: balance;
	hyphens: manual;
}

.page h1::after {
	content: "";
	display: block;
	width: 3.5rem;
	margin-top: 0.55em;
	border-bottom: 3px solid var(--accent);
}

.page h2 {
	margin: 2em 0 0.6em;
	font-family: var(--serif);
	font-size: 1.4em;
	font-weight: 500;
	line-height: 1.25;
}

.page p { margin: 0 0 1.15em; }
.page ul { margin: 0 0 1.15em; padding-left: 1.2em; }
.page li { margin-bottom: 0.4em; }

.lead {
	font-family: var(--serif);
	font-size: 1.4em;
	line-height: 1.35;
}

/* Contact */

.page.contact { max-width: calc(68rem + 2 * var(--pad)); }

.contact-grid {
	display: grid;
	gap: 1.5rem 3rem;
}

.contact-grid iframe {
	display: block;
	width: 100%;
	height: auto;
	min-height: 18rem;
	aspect-ratio: 4 / 3;
	border: 0;
}

@media (min-width: 52rem) {
	.contact-grid { grid-template-columns: minmax(15rem, 1fr) 2fr; }
}

/* Map: a notice until the visitor asks for the map, then the map itself */

.map:not(.map-loaded) {
	align-self: start;
	padding: 1.25rem 1.5rem;
	background: #f1ece4;
	border-left: 3px solid var(--ink);
}

.map p:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0;
}

.map button {
	padding: 0.6rem 1.2rem;
	font: inherit;
	color: #fff;
	background: var(--ink);
	border: 0;
	border-radius: 0.2rem;
	cursor: pointer;
}
.map button:hover { background: #2a3a49; }

/* Footer */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 2rem;
	padding: 1.25rem var(--pad);
	font-size: 0.875em;
	color: var(--ink-soft);
	border-top: 1px solid var(--line);
}
.site-footer a { color: inherit; }

/* Print */

@media print {
	body {
		display: block;
		min-height: 0;
		font-size: 11pt;
		color: #000;
		background: #fff;
	}
	.skip, .site-header nav, .site-header .lang, .banner, .site-footer { display: none; }
	.site-header {
		padding: 0 0 0.6rem;
		color: #000;
		background: none;
		border-bottom: 1px solid #999;
	}
	.page, .page.contact { max-width: none; padding: 1.5rem 0 0; }
	.page a { color: inherit; text-decoration: none; }
	.contact-grid iframe { break-inside: avoid; }
	.map:not(.map-loaded) { display: none; }
	.hero { min-height: 0; aspect-ratio: 3 / 2; padding-top: var(--pad); }
}