/*
 * Bravely — one scout, one enormous adventure.
 *
 * Dark, because the Baltic in the evening is dark and because a fifteen-year-old
 * showing this to his friends wants something that looks like a poster, not like
 * a newsletter. High contrast, because the pictures have to be the brightest
 * thing on the page.
 *
 * The colours: deep sea, a colder blue for the water, and amber for the fire.
 * Change these six lines and it is a different expedition.
 */

:root {
	--sea-deep:  #071523;   /* the page */
	--sea:       #0d2438;   /* panels */
	--sea-lift:  #143650;   /* edges and hovers */
	--wave:      #3fa9c9;   /* the cold blue */
	--fire:      #ffab2e;   /* the accent, and the countdown */
	--fire-deep: #e0871a;

	--ink:       #eaf2f8;
	--ink-soft:  #9db3c4;

	--measure: 68rem;
	--radius: 10px;
}

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

body {
	margin: 0;
	background: var(--sea-deep);
	color: var(--ink);
	font: 1.05rem/1.7 "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-text-size-adjust: 100%;

	/*
	 * A horizon behind everything: colder at the top, deeper at the bottom.
	 * Fixed so it does not slide past while reading, which would turn a
	 * background into an effect.
	 */
	background-image: radial-gradient(120% 80% at 50% 0%, #10314b 0%, var(--sea-deep) 60%);
	background-attachment: fixed;
}

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

a { color: var(--wave); text-underline-offset: 3px; }
a:hover { color: var(--fire); }

.layout { max-width: var(--measure); margin-inline: auto; padding-inline: 1.25rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; padding: 0.5rem; }

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

/*
 * Nothing runs out of its box.
 *
 * A Polish place name or a long link is one word to a line breaker. `anywhere`
 * rather than `break-word`: only `anywhere` also lowers the minimum width, which
 * is what a grid or flex parent measures itself by — and that is what makes a
 * phone need a sideways scroll.
 */
main, main p, main li, main h1, main h2, main h3 { overflow-wrap: anywhere; }

/* ---- header ---- */

.masthead {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(7, 21, 35, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sea-lift);
}

.masthead .layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 0.7rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); min-width: 0; }
.brand__mark { width: 2.4rem; height: 2.4rem; color: var(--fire); flex: none; }
.brand__name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }

.mainnav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem; }

.mainnav a {
	display: block;
	padding: 0.4rem 0.75rem;
	color: var(--ink-soft);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 999px;
}

.mainnav a:hover { color: var(--ink); background: var(--sea-lift); }
.mainnav .is-active > a { color: var(--sea-deep); background: var(--fire); }
.mainnav .is-open > a { color: var(--fire); }

/*
 * The menu button is a checkbox, and that is the whole trick.
 *
 * No script means no state to get stuck in — the failure this project keeps
 * running into is a menu that binds touchmove while it animates and forgets to
 * let go, which kills scrolling until the page is reloaded.
 */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-button { display: none; }

@media (max-width: 52rem) {
	.menu-button {
		display: inline-block;
		padding: 0.3rem 0.55rem;
		font-size: 1.5rem;
		line-height: 1;
		color: var(--fire);
		cursor: pointer;
		user-select: none;
	}

	.mainnav {
		flex-basis: 100%;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.2s ease;
	}

	.mainnav > ul { overflow: hidden; display: block; }
	.menu-toggle:checked ~ .mainnav { grid-template-rows: 1fr; }
	.menu-toggle:focus-visible + .menu-button { outline: 2px solid var(--fire); outline-offset: 2px; }

	.mainnav a { border-top: 1px solid var(--sea-lift); border-radius: 0; padding-block: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mainnav { transition: none; }
}

.subnav { background: var(--sea); border-bottom: 1px solid var(--sea-lift); }
.subnav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 0.3rem; }
.subnav a { display: block; padding: 0.5rem 0.7rem; color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.subnav a:hover { color: var(--fire); }
.subnav .is-active > a { color: var(--fire); box-shadow: inset 0 -3px 0 var(--fire); }

/* ---- the front page ---- */

.hero { padding-block: 3rem 2rem; text-align: center; }

.hero__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wave);
}

.hero__name {
	margin: 0.3rem 0 0;
	font-size: clamp(2.6rem, 11vw, 5.5rem);
	line-height: 0.95;
	font-weight: 900;
	letter-spacing: -0.03em;
	/* The name reads as the horizon: fire at the top, water at the bottom. */
	background: linear-gradient(180deg, var(--ink) 30%, var(--wave) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__motto { margin: 0.6rem 0 0; font-size: 1.15rem; color: var(--ink-soft); }

/*
 * The countdown.
 *
 * Worked out on the server, in days. A ticking clock in JavaScript shows nothing
 * while the page loads and nothing at all with scripting off — and this is
 * measured in months, so seconds would be a distraction from what somebody came
 * to read.
 */
.counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.2rem;
	flex-wrap: wrap;
}

.counter__number {
	font-size: clamp(3.5rem, 16vw, 7rem);
	line-height: 0.85;
	font-weight: 900;
	color: var(--fire);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 40px rgba(255, 171, 46, 0.25);
}

.counter__words {
	text-align: left;
	font-size: 1.1rem;
	font-weight: 700;
	max-width: 11rem;
}

.counter__place { display: block; font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); }

/* The three chapters, with the one we are in lit. */
.phases {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: phase;
}

.phases__item {
	padding: 0.45rem 1rem;
	border: 1px solid var(--sea-lift);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink-soft);
}

.phases__item.is-now {
	color: var(--sea-deep);
	background: var(--fire);
	border-color: var(--fire);
}

/* ---- content ---- */

.breadcrumbs { padding-top: 1.2rem; font-size: 0.85rem; color: var(--ink-soft); }
.breadcrumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "/ "; color: var(--sea-lift); }

main { padding-block: 2.5rem 4rem; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 6vw, 3rem); margin-top: 0; font-weight: 900; }
h2 { font-size: 1.6rem; margin-top: 2.5rem; font-weight: 800; color: var(--fire); }
h3 { font-size: 1.2rem; font-weight: 700; color: var(--wave); }

main p img, main figure img {
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

blockquote {
	margin-inline: 0;
	padding: 0.8rem 1.2rem;
	border-left: 4px solid var(--fire);
	background: var(--sea);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.1rem;
}

hr { border: 0; border-top: 1px solid var(--sea-lift); margin-block: 2.5rem; }

table { border-collapse: collapse; width: 100%; margin-block: 1.2rem; }
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--sea-lift); text-align: left; vertical-align: top; }
th { color: var(--fire); }
main > table { display: block; overflow-x: auto; }

/* A row of photographs inside a page. */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1rem;
	margin-block: 1.5rem;
}

.tiles figure { margin: 0; min-width: 0; }

.tiles img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.tiles figcaption { margin-top: 0.4rem; font-size: 0.85rem; text-align: center; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---- the blog, which is what this site is ---- */

.blog-embed--summaries { display: grid; gap: 1.5rem; margin-top: 1rem; }

@media (min-width: 46rem) {
	.blog-embed--summaries { grid-template-columns: 1fr 1fr; }
}

.blog-embed--summaries .blog-post {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--sea);
	border: 1px solid var(--sea-lift);
	border-radius: var(--radius);
	overflow: hidden;
}

.blog-embed--summaries .blog-post > * { padding-inline: 1.3rem; }

.blog-embed--summaries .blog-post__thumb { display: block; padding-inline: 0; line-height: 0; }

.blog-embed--summaries .blog-post__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.blog-embed--summaries .blog-post h2 {
	margin: 1rem 0 0.2rem;
	font-size: 1.35rem;
	color: var(--ink);
}

.blog-embed--summaries .blog-post h2 a { color: inherit; text-decoration: none; }
.blog-embed--summaries .blog-post h2 a:hover { color: var(--fire); }

.blog-embed--summaries .blog-post__meta {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wave);
}

/*
 * Cards in a row stretch to the tallest, so a short post leaves a gap under its
 * text. Pushing the link to the end puts that gap above it, and the links line
 * up across the row.
 */
.blog-embed--summaries .blog-post__more { margin-top: auto; padding-bottom: 1.3rem; }

.blog-embed--summaries .blog-post__more a {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	background: var(--fire);
	color: var(--sea-deep);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 800;
}

.blog-embed--summaries .blog-post__more a:hover { background: var(--fire-deep); color: var(--sea-deep); }

.blog-embed__more { margin-top: 1.5rem; }

/* Posts stacked down a page, which is a different thing from the cards. */
.blog-post + .blog-post:not(.blog-post--summary) {
	border-top: 1px solid var(--sea-lift);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

.blog-post__meta { color: var(--ink-soft); font-size: 0.85rem; }
.blog-post h2 a { color: inherit; text-decoration: none; }

/* ---- albums, forms, search ---- */

.album-list, .album {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem;
}

.album-list a { display: block; color: inherit; text-decoration: none; }
.album-list img, .album__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.album__item { margin: 0; }

.contact-form .field, .reaction-form .field { margin-block: 0 1.1rem; }

.contact-form label, .reaction-form label {
	display: inline-block;
	margin-bottom: 0.3rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wave);
}

.contact-form input, .contact-form textarea,
.reaction-form input, .reaction-form textarea {
	width: 100%;
	max-width: 32rem;
	padding: 0.6rem 0.7rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--sea-deep);
	border: 2px solid var(--sea-lift);
	border-radius: var(--radius);
}

.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--fire); }
.contact-form input[inputmode="numeric"], .reaction-form input[inputmode="numeric"] { width: 6rem; }

.contact-form button, .reaction-form button {
	padding: 0.7rem 1.8rem;
	font: inherit;
	font-weight: 800;
	color: var(--sea-deep);
	background: var(--fire);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.contact-form button:hover, .reaction-form button:hover { background: var(--fire-deep); }

.form-error { color: #ff8f6b; font-weight: 700; }
.form-done { padding: 1rem 0; font-weight: 800; color: var(--fire); }

.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.search-form input { flex: 1 1 14rem; padding: 0.55rem 0.7rem; font: inherit; color: var(--ink); background: var(--sea); border: 2px solid var(--sea-lift); border-radius: var(--radius); }
.search-form button { padding: 0.55rem 1.3rem; font: inherit; font-weight: 800; color: var(--sea-deep); background: var(--fire); border: 0; border-radius: 999px; cursor: pointer; }
.search-result + .search-result { border-top: 1px solid var(--sea-lift); padding-top: 1rem; margin-top: 1rem; }
mark { background: var(--fire); color: var(--sea-deep); }

/* ---- footer ---- */

.sitefooter { margin-top: 3rem; background: var(--sea); border-top: 1px solid var(--sea-lift); font-size: 0.95rem; }

.sitefooter .layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem;
	padding-block: 2.5rem 1.5rem;
}

.sitefooter ul { margin: 0; padding: 0; list-style: none; }
.sitefooter li { padding-block: 0.15rem; }
.sitefooter a { color: var(--ink-soft); }
.sitefooter a:hover { color: var(--fire); }
.sitefooter__name { margin: 0 0 0.3rem; font-size: 1.15rem; font-weight: 800; color: var(--ink); }

.sitefooter__legal {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--sea-lift);
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* ---- the progress bar ---- */

/*
 * How far along we are.
 *
 * Two elements and a width — no picture, no canvas, no script. The numbers are
 * in the markup as text, so the bar is decoration over an answer rather than
 * being the answer.
 */
.progress {
	margin-block: 2rem;
	padding: 1.4rem;
	background: var(--sea);
	border: 1px solid var(--sea-lift);
	border-radius: var(--radius);
}

.progress__label {
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wave);
}

.progress__amounts { margin: 0 0 0.9rem; font-size: 1.05rem; color: var(--ink-soft); }

.progress__current {
	display: block;
	font-size: clamp(2rem, 8vw, 3rem);
	line-height: 1;
	font-weight: 900;
	color: var(--fire);
	font-variant-numeric: tabular-nums;
}

.progress__track {
	height: 0.9rem;
	background: var(--sea-deep);
	border-radius: 999px;
	overflow: hidden;
}

.progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wave), var(--fire));
	border-radius: 999px;
}

.progress__percent { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* Target reached. Worth saying loudly — it usually took two years. */
.progress--done { border-color: var(--fire); }
.progress--done .progress__fill { background: var(--fire); }

.progress-empty { color: var(--ink-soft); font-style: italic; }

/* ---- the ledger ---- */

/*
 * What has come in, line by line.
 *
 * Deliberately a table and not a bar. A bar says how far along somebody is, and
 * that is the number you least want on a page you hope people will sponsor —
 * "83% gehaald" is a reason not to give. A list of what happened is both more
 * honest and more interesting.
 */
.cashbook { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }

.cashbook th, .cashbook td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--sea-lift);
	text-align: left;
}

.cashbook thead th {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wave);
}

.cashbook__amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cashbook tfoot th, .cashbook tfoot td {
	border-bottom: 0;
	border-top: 2px solid var(--fire);
	padding-top: 0.8rem;
	font-size: 1.2rem;
	font-weight: 900;
	color: var(--fire);
}

.cashbook-total { font-size: 1.15rem; color: var(--ink-soft); }
.cashbook-total strong { font-size: 1.6rem; color: var(--fire); font-variant-numeric: tabular-nums; }
.cashbook-empty { color: var(--ink-soft); font-style: italic; }

/* A table on a phone scrolls rather than crushing its columns. */
@media (max-width: 34rem) {
	.cashbook { display: block; overflow-x: auto; }
}

/* ---- the shop ---- */

.shop__intro { font-size: 1.1rem; color: var(--ink-soft); }

.shop__products { margin: 1.5rem 0; padding: 0; list-style: none; display: grid; gap: 1.2rem; }

@media (min-width: 46rem) {
	.shop__products { grid-template-columns: 1fr 1fr; }
}

.shop-product {
	display: flex;
	flex-direction: column;
	background: var(--sea);
	border: 1px solid var(--sea-lift);
	border-radius: var(--radius);
	overflow: hidden;
}

/*
 * A product photograph is shown whole.
 *
 * It was `aspect-ratio: 4/3` with `object-fit: cover`, which crops — and on a
 * square collage of four pictures that quietly threw a quarter away, including
 * one of the four things being sold.
 *
 * Cropping is right for a card in a grid, where an even row matters more than
 * any one picture. It is wrong for the picture somebody is deciding to buy from.
 * The card is a little uneven now; that is the cheaper of the two costs.
 */
.shop-product__photo {
	display: block;
	width: 100%;
	height: auto;
	/* Tall pictures do not push the price list off the screen. */
	max-height: 26rem;
	object-fit: contain;
	background: var(--sea-deep);
}
.shop-product__body { padding: 1.2rem; }
.shop-product__name { margin: 0 0 0.3rem; font-size: 1.25rem; color: var(--ink); }
.shop-product__what { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; }

.shop-product__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }

/*
 * One row per price step: what you get, what it costs, how many you want.
 *
 * Each step is orderable on its own, so somebody can take one bag of twenty and
 * two of five without the form having to understand anything about bulk.
 */
.shop-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.7rem;
	background: var(--sea-deep);
	border-radius: var(--radius);
}

.shop-step label { font-weight: 600; font-size: 0.95rem; min-width: 0; }
.shop-step__price { color: var(--fire); font-weight: 800; white-space: nowrap; }

.shop-step input {
	width: 4.5rem;
	flex: none;
	padding: 0.4rem 0.5rem;
	font: inherit;
	text-align: center;
	color: var(--ink);
	background: var(--sea);
	border: 2px solid var(--sea-lift);
	border-radius: var(--radius);
}

.shop-step input:focus { outline: 0; border-color: var(--fire); }

.shop-form__heading { margin-top: 2.5rem; color: var(--fire); }

.shop-form .field { margin-bottom: 1.1rem; }
.shop-form label { display: inline-block; margin-bottom: 0.3rem; font-weight: 700; font-size: 0.9rem; color: var(--wave); }

.shop-form input[type="text"],
.shop-form input[type="email"],
.shop-form input[type="tel"],
.shop-form textarea {
	width: 100%;
	max-width: 32rem;
	padding: 0.6rem 0.7rem;
	font: inherit;
	color: var(--ink);
	background: var(--sea-deep);
	border: 2px solid var(--sea-lift);
	border-radius: var(--radius);
}

.shop-form input:focus, .shop-form textarea:focus { outline: 0; border-color: var(--fire); }

.shop-form button {
	padding: 0.75rem 2rem;
	font: inherit;
	font-weight: 800;
	color: var(--sea-deep);
	background: var(--fire);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.shop-form button:hover { background: var(--fire-deep); }

.shop-empty { color: var(--ink-soft); font-style: italic; }

/* ---- did you know ---- */

/*
 * A few one-liners, different every visit.
 *
 * Deliberately not a list of bullets: these are meant to be read as remarks, not
 * as an inventory. The lead is in the accent so the eye catches the rhythm and
 * skips straight to what is new about each one.
 */
.wjd { margin-block: 2rem; padding: 0; list-style: none; display: grid; gap: 0.8rem; }

.wjd__line {
	padding: 1rem 1.2rem;
	background: var(--sea);
	border-left: 4px solid var(--fire);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.1rem;
}

.wjd__lead { color: var(--fire); font-weight: 800; }
.wjd-empty { color: var(--ink-soft); font-style: italic; }

/*
 * Two counts side by side.
 *
 * What came in and what has been paid over are different questions; neither is
 * subtracted from the other. The summary is the number that follows from both.
 */
.cashbook--uit tfoot th, .cashbook--uit tfoot td { border-top-color: var(--wave); color: var(--wave); }

.cashbook-summary {
	margin-block: 1.5rem;
	padding: 1.2rem 1.4rem;
	background: var(--sea);
	border: 1px solid var(--sea-lift);
	border-radius: var(--radius);
}

.cashbook-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--sea-lift);
}

.cashbook-summary__row:last-child { border-bottom: 0; padding-top: 0.8rem; }

.cashbook-summary dt { color: var(--ink-soft); }

.cashbook-summary dd {
	margin: 0;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The last row is what follows from the others, so it reads as the answer. */
.cashbook-summary__row:last-child dt { color: var(--ink); font-weight: 700; }
.cashbook-summary__row:last-child dd { color: var(--fire); font-size: 1.2rem; }

/* The bar of what has been paid, in the colder colour: a different question. */
.progress--uit .progress__fill { background: var(--wave); }
.progress--uit .progress__current { color: var(--wave); }