/*
Theme Name: PuLau Reiste
Theme URI: https://pulau-reiste.de
Author: SurIT
Author URI: https://sur-it.de
Description: Eigentheme für den Karnevalsverein 1998 PULAU Reiste e.V. Kein Child-Theme, keine Seitenbauer, keine Schriften von fremden Servern.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pulau
*/

/* -------------------------------------------------------------------------
 * Tokens
 *
 * The three reds are not a taste question, they are measured. #EF3236 is the
 * brand, taken from the crest over 474.869 opaque pixels, and it reaches only
 * 4,05:1 against white: it carries surface and large type, never body text.
 * #D9232A is what goes under white body text (4,97:1), #C01F26 is red text on
 * white. Yellow is never a text colour except on black.
 * ---------------------------------------------------------------------- */

:root {
	--red: #EF3236;
	--red-deep: #D9232A;
	--red-text: #C01F26;
	--red-hover: #A8181E;
	--yellow: #FAEA3E;
	--black: #141210;
	--ink: #221F1C;
	--ink-soft: #45403A;
	--ink-mute: #6B655C;
	--line: #E2DED6;
	--sand: #F6F3EC;
	--paper: #FFFFFF;
	--footer-ink: #EFEBE3;
	--footer-line: #4A443E;

	--display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;
	--body: 'Manrope', 'Trebuchet MS', sans-serif;

	/* The artboards are drawn at 1280 px. Every clamp below hits its artboard
	   value exactly at that width and stops growing above it. */
	--page: 1280px;
	--gutter: clamp(16px, 4.5313vw, 58px);
	--gutter-bar: clamp(16px, 3.4375vw, 44px);
	/* Eine farbige Flaeche laeuft randlos, was darin steht behaelt die Breite
	   des Artboards. Ueber 1280 px waechst der Innenabstand mit, statt dass die
	   Flaeche aufhoert und daneben Weiss steht. */
	--bleed: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
	--bleed-bar: max(var(--gutter-bar), calc((100% - var(--page)) / 2 + var(--gutter-bar)));
	--radius: 6px;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-weight: 400;
	/* Images that arrive late must not push the read line around. */
	overflow-anchor: none;
	overflow-x: hidden;
	/* Kurze Seiten wie das Impressum fuellen den Schirm nicht. Ohne das haengt
	   der schwarze Fuss mitten im Bild und darunter steht Weiss bis zum Rand. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#content {
	flex: 1;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--red-text);
}

a:hover {
	color: var(--red-hover);
}

:focus-visible {
	outline: 3px solid var(--red-text);
	outline-offset: 3px;
}

/* The ring is red and so are three of the surfaces, so on those there was no
   ring: #C01F26 against #D9232A measures 1,22:1, and WCAG 1.4.11 asks for 3,0:1.
   It was invisible on the whole main navigation. Paper against the same red
   measures 4,97:1.
   The rule names the surface, not the components that happen to sit on it
   today: the red is what the ring cannot be seen against. */
.masthead :focus-visible,
.page-head :focus-visible,
.hero :focus-visible {
	outline-color: var(--paper);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--yellow);
	color: var(--black);
	padding: 12px 20px;
	font-weight: 800;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

.icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Every band that carries the club's colours runs edge to edge; what stands in
   it keeps the width of the artboard and centres above 1280 px. */
.hero,
.welcome,
.news,
.prince,
.prose,
.cry,
.page-head,
.regent-head,
.clasp,
.ways,
.board,
.facts,
.post,
.masthead,
.site-footer {
	--inner: min(100%, var(--page));
}

/* -------------------------------------------------------------------------
 * Masthead
 *
 * The red of the bar and the red of the page head below it are one surface.
 * There is no line between them, and nothing in this file may draw one.
 * ---------------------------------------------------------------------- */

.masthead {
	background: var(--red-deep);
	padding: 16px var(--bleed-bar);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	flex-shrink: 0;
}

.brand__crest {
	width: 58px;
	height: 58px;
	display: block;
	object-fit: contain;
}

.brand__crest--empty {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 50%;
}

.brand__name {
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--paper);
	line-height: 1.6;
}

.nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav a {
	font-family: var(--display);
	font-size: clamp(20px, 2.1094vw, 27px);
	letter-spacing: 0.07em;
	color: var(--paper);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 3px solid transparent;
	display: block;
}

.nav a:hover {
	color: var(--yellow);
}

.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-parent > a {
	color: var(--yellow);
	border-bottom-color: var(--yellow);
}

/* The narrow menu. <details> carries the open state, so nothing here needs
   JavaScript and nothing breaks when it is switched off. */
.nav-toggle {
	display: none;
	position: relative;
}

.nav-toggle__button {
	list-style: none;
	cursor: pointer;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-toggle__button::-webkit-details-marker {
	display: none;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 28px;
	height: 3px;
	background: var(--paper);
	content: "";
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before {
	position: absolute;
	top: -9px;
}

.nav-toggle__bars::after {
	position: absolute;
	top: 9px;
}

.nav-toggle[open] .nav-toggle__bars {
	background: var(--yellow);
}

.nav--narrow {
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	z-index: 40;
	background: var(--black);
	padding: 14px 22px;
	border-radius: var(--radius);
	min-width: 240px;
}

.nav--narrow .nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.nav--narrow a {
	padding: 10px 0;
	border-bottom-width: 0;
}

/* -------------------------------------------------------------------------
 * Confetti
 *
 * The scatter is the design that was approved, not decoration generated at
 * runtime. Positions come from the artboards, one set per page head.
 * ---------------------------------------------------------------------- */

.confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.confetti__bit {
	position: absolute;
	display: block;
}

.confetti__bit--round {
	border-radius: 50%;
}

.confetti__bit--yellow {
	background: var(--yellow);
}

.confetti__bit--black {
	background: var(--black);
}

.confetti__bit--white {
	background: var(--paper);
}

/* -------------------------------------------------------------------------
 * Red page head
 * ---------------------------------------------------------------------- */

.page-head {
	position: relative;
	background: var(--red-deep);
	padding: 68px var(--gutter) 76px;
	overflow: hidden;
}

.page-head > *:not(.confetti) {
	position: relative;
	max-width: var(--page);
	margin-inline: auto;
}

.page-head__title {
	margin: 0 0 10px;
	font-family: var(--display);
	font-size: clamp(48px, 10vw, 128px);
	line-height: 0.86;
	letter-spacing: 0.01em;
	color: var(--paper);
}

.page-head__subtitle {
	margin: 0;
	font-family: var(--body);
	/* Never below 20 px: yellow on red reaches 4,0:1, which carries as large
	   type (3:1 from 19 px bold) and fails as body text (4,5:1). */
	font-size: clamp(20px, 1.875vw, 24px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--yellow);
	max-width: 760px;
}

.page-head--contact {
	padding: 60px var(--gutter) 64px;
}

.page-head--contact .page-head__title {
	margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
 * Front page: hero
 * ---------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--red-deep);
	height: 810px;
	overflow: hidden;
}

.hero__inner {
	position: relative;
	height: 100%;
	max-width: var(--page);
	margin-inline: auto;
}

.hero__title {
	font-weight: 400;
	position: absolute;
	left: 40px;
	top: 200px;
	margin: 0;
	width: 620px;
	max-width: calc(100% - 80px);
	font-family: var(--display);
	font-size: clamp(56px, 11.5625vw, 148px);
	line-height: 0.85;
	letter-spacing: 0.004em;
	color: var(--paper);
	z-index: 2;
}

.hero__title span {
	color: var(--yellow);
}

.hero__figure {
	margin: 0;
}

/* Right of .hero, not of .hero__inner: above 1280 px the column is centred and
   the picture would stop at its edge with a red strip beside it. It belongs at
   the edge of the screen and grows with it. */
.hero__frame {
	position: absolute;
	right: 0;
	top: 122px;
	width: 660px;
	height: 460px;
	max-width: 48%;
	overflow: hidden;
	/* The arch of the crest reappears here as a cut corner: the effect comes
	   from what is not filled in, so it sits over the red, never inside it. */
	clip-path: polygon(11% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
}

.hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to left, rgba(217, 35, 42, 0) 88%, rgba(217, 35, 42, 0.32) 100%);
}

.hero__caption {
	position: absolute;
	right: 24px;
	top: 598px;
	margin: 0;
	width: 460px;
	max-width: 46%;
	text-align: right;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper);
}

/* -------------------------------------------------------------------------
 * Front page: welcome
 * ---------------------------------------------------------------------- */

.welcome {
	background: var(--paper);
	padding: 84px var(--gutter) 0;
	max-width: var(--page);
	margin-inline: auto;
}

.welcome__text > *:first-child {
	margin-top: 0;
}

.welcome__text h2 {
	margin: 0 0 22px;
	font-family: var(--display);
	font-size: clamp(34px, 4.5313vw, 58px);
	line-height: 0.94;
	letter-spacing: 0.02em;
	color: var(--black);
	font-weight: 400;
}

/* Der Absatz laeuft von der linken Kante los, gedeckelt bei 68 Zeichen: ueber
   die volle Spalte waeren es 110 je Zeile, und ab etwa 75 findet das Auge den
   Zeilenanfang nicht mehr. Die Ueberschrift und der Schlachtruf haben keinen
   Deckel, sie sind Plakat und keine Lesestrecke. */
.welcome__text p {
	margin: 0 0 26px;
	max-width: 68ch;
	font-family: var(--body);
	font-size: clamp(18px, 1.6406vw, 21px);
	font-weight: 500;
	line-height: 1.64;
	color: var(--ink);
}

.welcome__text strong {
	font-weight: 800;
}

.welcome__cry {
	margin-top: 0;
	margin-bottom: 0;
	font-family: var(--display);
	font-size: clamp(32px, 4.8438vw, 62px);
	line-height: 0.96;
	letter-spacing: 0.02em;
	color: var(--red-deep);
}

/* -------------------------------------------------------------------------
 * Front page: Aktuelles
 *
 * A strand, not cards. The two posts the club has are invitations with date,
 * time and place: a strand with two points looks whole, a grid built for twelve
 * cards with two in it looks like a fault.
 * ---------------------------------------------------------------------- */

.news {
	padding: 0 var(--gutter);
	margin: 88px auto 0;
	max-width: var(--page);
}

.news--archive {
	margin-top: 62px;
	padding-bottom: 40px;
}

.news__title {
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 5px solid var(--black);
	font-family: var(--display);
	font-size: clamp(38px, 6.4063vw, 82px);
	line-height: 0.9;
	letter-spacing: 0.02em;
	color: var(--black);
	font-weight: 400;
}

.news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.news__item {
	margin-left: var(--stagger, 0px);
}

.news__link {
	display: flex;
	align-items: baseline;
	gap: 34px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}

.news__link:hover .news__headline {
	color: var(--red-text);
}

.news__date {
	font-family: var(--display);
	font-size: clamp(30px, 3.4375vw, 44px);
	line-height: 0.9;
	letter-spacing: 0.03em;
	color: var(--red-deep);
	width: 150px;
	flex-shrink: 0;
}

.news__year {
	font-size: clamp(20px, 2.0313vw, 26px);
	color: var(--ink-mute);
}

.news__body {
	flex-grow: 1;
}

.news__headline {
	display: block;
	font-family: var(--display);
	font-size: clamp(26px, 3.125vw, 40px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--black);
}

.news__excerpt {
	display: block;
	margin-top: 8px;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-soft);
}

.news__empty {
	font-size: 19px;
	line-height: 1.7;
	color: var(--ink-soft);
	padding: 28px 0 40px;
}

.news__search {
	margin-bottom: 28px;
}

/* -------------------------------------------------------------------------
 * Front page: the regent in office
 * ---------------------------------------------------------------------- */

.prince {
	display: flex;
	align-items: stretch;
	text-decoration: none;
	margin-top: 88px;
}

/* 560 von 1280 px: das Verhaeltnis des Artboards, nicht die Zahl. Sonst waere
   das Bild auf einem breiten Schirm ein Briefmarkenrand am schwarzen Band. */
.prince__image {
	width: 43.75%;
	max-width: 720px;
	height: 360px;
	object-fit: cover;
	object-position: 50% 42%;
	display: block;
	flex-shrink: 0;
}

.prince__text {
	flex-grow: 1;
	background: var(--black);
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.prince__eyebrow {
	display: block;
	margin-bottom: 6px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--yellow);
}

.prince__name {
	display: block;
	margin-bottom: 10px;
	font-family: var(--display);
	font-size: clamp(32px, 4.5313vw, 58px);
	line-height: 0.94;
	color: var(--paper);
}

.prince__person {
	display: block;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--paper);
}

/* -------------------------------------------------------------------------
 * Reading text
 * ---------------------------------------------------------------------- */

.prose {
	padding: 64px var(--gutter) 0;
	max-width: var(--page);
	margin-inline: auto;
}

.prose--story {
	padding-top: 76px;
}

/* 900 px is the width of the artboard's article, gutter included. What stands
   in it is 784 px wide, and that is the read line. */
.prose > *,
.prose__title {
	max-width: 784px;
}

.prose__title {
	margin: 0 0 40px;
	font-family: var(--display);
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 0.88;
	letter-spacing: 0.01em;
	color: var(--black);
	font-weight: 400;
}

.prose p,
.prose li {
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.76;
	color: var(--ink);
}

.prose p {
	margin: 0 0 40px;
}

.prose h2 {
	margin: 0 0 18px;
	font-family: var(--display);
	font-size: clamp(28px, 4.0625vw, 52px);
	line-height: 0.98;
	letter-spacing: 0.02em;
	color: var(--red-deep);
	font-weight: 400;
}

.prose h3 {
	margin: 0 0 14px;
	font-family: var(--display);
	font-size: clamp(24px, 2.8125vw, 36px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--black);
	font-weight: 400;
}

.prose--legal p,
.prose--legal li {
	font-size: 19px;
	line-height: 1.7;
}

.page-impressum .prose--legal p,
.page-impressum .prose--legal li {
	font-size: 20px;
}

/* Ein Platzhalter muss sich vom fertigen Text abheben, sonst liest ihn jemand
   als Inhalt. */
.prose .is-gap {
	color: var(--ink-mute);
}

.prose--legal h2 {
	font-size: clamp(26px, 3.75vw, 48px);
	line-height: 0.96;
	margin-bottom: 16px;
}

.prose--legal p {
	margin-bottom: 40px;
}

.prose ul,
.prose ol {
	margin: 0 0 40px;
	padding-left: 26px;
}

.prose li {
	margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
 * The battle cry as a closing band
 * ---------------------------------------------------------------------- */

.cry {
	background: var(--red-deep);
	padding: 44px var(--gutter);
	margin-top: 44px;
}

.cry__text {
	margin: 0 auto;
	max-width: var(--page);
	font-family: var(--display);
	font-size: clamp(32px, 4.8438vw, 62px);
	line-height: 0.96;
	letter-spacing: 0.02em;
	color: var(--paper);
}

/* -------------------------------------------------------------------------
 * Tollitäten: head and clasp
 * ---------------------------------------------------------------------- */

.regent-head {
	position: relative;
	background: var(--red-deep);
	padding: 60px var(--bleed) 64px;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 48px;
}

.regent-head > *:not(.confetti) {
	position: relative;
}

.regent-head__frame {
	width: 260px;
	height: 360px;
	overflow: hidden;
	border-radius: var(--radius);
	flex-shrink: 0;
}

/* The cut-out from the artboard, kept in proportion instead of in pixels so it
   survives a narrow screen. */
.regent-head__image {
	width: 246.2%;
	max-width: none;
	height: auto;
	display: block;
	margin: -45.4% 0 0 -65.4%;
}

.regent-head__eyebrow {
	margin: 0 0 8px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	/* White, not the yellow of the artboard: at 13 px this is body text and
	   needs 4,5:1, yellow on red reaches 4,0:1. White reaches 4,97:1. The same
	   line on the front page stands on black, where yellow carries 16,9:1. */
	color: var(--paper);
}

.regent-head__name {
	margin: 0 0 14px;
	font-family: var(--display);
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 0.88;
	letter-spacing: 0.01em;
	color: var(--paper);
	font-weight: 400;
}

.regent-head__person {
	margin: 0;
	font-family: var(--body);
	font-size: clamp(18px, 1.6406vw, 21px);
	font-weight: 500;
	line-height: 1.55;
	color: var(--paper);
}

.clasp {
	padding: 62px var(--gutter) 0;
	max-width: var(--page);
	margin-inline: auto;
}

.clasp__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 5px solid var(--black);
	padding-bottom: 12px;
	margin-bottom: 36px;
}

.clasp__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(38px, 6.4063vw, 82px);
	line-height: 0.9;
	letter-spacing: 0.02em;
	color: var(--black);
	font-weight: 400;
}

.clasp__count {
	margin: 0 0 6px;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
	flex-shrink: 0;
}

.clasp__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 34px;
}

.clasp__figure {
	margin: 0;
	position: relative;
	/* The one deliberate interaction on the site. Everything else stays quiet:
	   it is not movement that gives away the machine, it is the same movement
	   over and over. */
	transition: transform 180ms ease-out;
}

.clasp__figure:hover {
	transform: translateY(-8px);
}

.clasp__portrait {
	width: 157px;
	height: 218px;
	max-width: 100%;
	display: block;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(20, 18, 16, 0.16);
	object-fit: cover;
}

.clasp__portrait--empty {
	background: var(--line);
}

.clasp__item--first .clasp__portrait {
	outline: 4px solid var(--yellow);
}

/* The session, laid over the portrait while it is lifted. Hidden from
   assistive technology: the same text stands in the caption below. */
.clasp__session {
	position: absolute;
	left: 0;
	top: 88px;
	width: 157px;
	max-width: 100%;
	text-align: center;
	font-family: var(--display);
	font-size: 34px;
	letter-spacing: 0.04em;
	color: var(--black);
	background: var(--yellow);
	padding: 4px 0;
	opacity: 0;
	transition: opacity 180ms ease-out;
}

.clasp__figure:hover .clasp__session {
	opacity: 1;
}

.clasp__caption {
	margin-top: 10px;
	width: 170px;
	max-width: 100%;
}

.clasp__year {
	display: block;
	font-family: var(--body);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--ink-mute);
}

.clasp__item--current .clasp__year {
	color: var(--red-text);
}

.clasp__name {
	display: block;
	margin-top: 3px;
	font-family: var(--display);
	font-size: 21px;
	line-height: 1.06;
	color: var(--black);
}

.clasp__person {
	display: block;
	margin-top: 3px;
	font-family: var(--body);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-soft);
}

.clasp__note {
	margin-top: 40px;
	max-width: 860px;
}

.clasp__note p {
	margin: 0;
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink-soft);
}

.clasp__note a {
	color: var(--red-text);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid #E9BEC0;
}

/* -------------------------------------------------------------------------
 * Kontakt
 * ---------------------------------------------------------------------- */

.mail-badge {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	background: var(--yellow);
	text-decoration: none;
	padding: 16px 30px;
	border-radius: 4px;
	color: var(--black);
	max-width: 100%;
}

.mail-badge .icon {
	width: 34px;
	height: 34px;
}

.mail-badge__address {
	font-family: var(--display);
	font-size: clamp(24px, 3.75vw, 48px);
	line-height: 1.02;
	letter-spacing: 0.02em;
	color: var(--black);
	overflow-wrap: anywhere;
}

.ways {
	padding: 60px var(--gutter) 0;
	max-width: var(--page);
	margin-inline: auto;
}

.ways__title,
.board__title {
	margin: 0 0 30px;
	font-family: var(--display);
	font-size: clamp(32px, 4.8438vw, 62px);
	line-height: 0.92;
	letter-spacing: 0.02em;
	color: var(--black);
	font-weight: 400;
}

.ways__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 22px;
}

.ways__row {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 26px;
}

.card {
	display: flex;
	align-items: center;
	gap: 20px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 26px;
	text-decoration: none;
	height: 100%;
}

.card:hover {
	border-color: var(--red-text);
}

.card__icon {
	color: var(--red-text);
	display: flex;
	flex-shrink: 0;
}

.card__icon .icon {
	width: 30px;
	height: 30px;
}

.card__label {
	display: block;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.card__value {
	display: block;
	margin-top: 3px;
	font-family: var(--display);
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1.04;
	color: var(--black);
	overflow-wrap: anywhere;
}

.card--wide {
	flex-grow: 1;
}

.card--tight {
	padding: 22px 30px;
	gap: 16px;
}

.card--tight .card__value {
	margin-top: 0;
}

.board {
	padding: 62px var(--gutter) 0;
	max-width: var(--page);
	margin-inline: auto;
}

.board__title {
	border-bottom: 5px solid var(--black);
	padding-bottom: 12px;
}

.board__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
}

.board__figure {
	margin: 0;
}

.board__portrait {
	width: 100%;
	height: 218px;
	object-fit: cover;
	object-position: 50% 32%;
	display: block;
	border-radius: var(--radius);
}

.board__portrait--empty {
	background: var(--line);
}

.board__office {
	display: block;
	margin-top: 12px;
	font-family: var(--body);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red-text);
}

.board__name {
	display: block;
	margin-top: 3px;
	font-family: var(--display);
	font-size: clamp(20px, 2.0313vw, 26px);
	line-height: 1.04;
	color: var(--black);
}

.facts {
	padding: 0 var(--gutter);
	max-width: var(--page);
	margin: 44px auto 0;
}

/* The block of addresses in the editor becomes the sand coloured box. */
.facts .wp-block-columns,
.facts > .wp-block-group {
	background: var(--sand);
	border-radius: var(--radius);
	padding: 28px 32px;
	gap: 60px;
}

/* Columns as wide as what stands in them, not in equal shares: the club's name
   must not break across two lines because a third of the box is empty. */
.facts .wp-block-column {
	flex-basis: auto;
	flex-grow: 0;
}

.facts p {
	margin: 0;
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink);
}

.facts h2,
.facts h3 {
	margin: 0 0 6px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* -------------------------------------------------------------------------
 * One post
 * ---------------------------------------------------------------------- */

.post {
	padding: 54px var(--gutter) 0;
	max-width: var(--page);
	margin-inline: auto;
}

.post__back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: 18px;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red-text);
	text-decoration: none;
}

.post__back:hover {
	text-decoration: underline;
}

.post__columns {
	display: flex;
	gap: 52px;
	align-items: flex-start;
}

.post__main {
	max-width: 760px;
	flex-grow: 1;
}

.post__date {
	margin: 0 0 10px;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.post__title {
	margin: 0 0 30px;
	font-family: var(--display);
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 0.88;
	letter-spacing: 0.01em;
	color: var(--black);
	font-weight: 400;
}

.post__main p {
	margin: 0 0 26px;
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.7;
	color: var(--ink);
}

/* Steht nach der allgemeinen Absatzregel, sonst gewinnt die. */
.post__main .post__date {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.post__main > .post__date + h1 + p,
.post__main > h1 + p {
	font-size: clamp(18px, 1.6406vw, 21px);
	font-weight: 500;
	line-height: 1.68;
	margin-bottom: 30px;
}

.post__main h2 {
	margin: 0 0 16px;
	font-family: var(--display);
	font-size: clamp(26px, 3.4375vw, 44px);
	line-height: 0.96;
	letter-spacing: 0.02em;
	color: var(--red-deep);
	font-weight: 400;
}

.post__main ol,
.post__main ul {
	margin: 0 0 30px;
	padding-left: 26px;
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.9;
	color: var(--ink);
}

.post__aside {
	width: 340px;
	flex-shrink: 0;
}

.facts-card {
	background: var(--yellow);
	border-radius: var(--radius);
	padding: 26px 28px;
}

.facts-card__label {
	margin: 0 0 4px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
}

.facts-card__value {
	margin: 0 0 20px;
	font-family: var(--display);
	font-size: clamp(28px, 3.125vw, 40px);
	line-height: 0.98;
	color: var(--black);
}

.facts-card__value:last-child {
	margin-bottom: 0;
}

.post__more {
	margin-top: 56px;
	border-top: 5px solid var(--black);
	padding-top: 26px;
}

.post__more-label {
	margin: 0 0 18px;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.post__more .news__link {
	border-bottom: 0;
	padding-top: 0;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.rule-yellow {
	height: 10px;
	background: var(--yellow);
	margin-top: 56px;
}

/* On the front page the band with the regent runs straight into the yellow
   rule. Nothing white between them, the way the artboard has it. */
.home .rule-yellow {
	margin-top: 0;
}

/* Die gelbe Linie trennt einen weissen Lesetext vom schwarzen Fuss, und nur
   den. Endet die Seite mit dem roten Schlachtruf, trennt schon der Farbwechsel:
   die Linie entfaellt, das Rot stoesst direkt an das Schwarz. Faellt :has() aus,
   bleibt die Linie stehen, und das ist der harmlose Fall. */
main:has(> .cry:last-child) + .rule-yellow {
	display: none;
}

.site-footer {
	background: var(--black);
	padding: 30px var(--gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.site-footer__address {
	margin: 0;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--footer-ink);
}

.site-footer__nav {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.social {
	color: var(--yellow);
	display: flex;
	/* 24 px Zeichen plus 2 x 10 px sind 44 px, die Untergrenze fuer ein Ziel,
	   das mit dem Daumen getroffen wird. */
	padding: 10px;
}

.social:hover {
	color: var(--paper);
}

.site-footer__divider {
	width: 1px;
	height: 26px;
	background: var(--footer-line);
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
}

.site-footer__legal a,
.site-footer__legal-link {
	font-family: var(--body);
	font-size: 15px;
	font-weight: 500;
	color: var(--footer-ink);
	text-decoration: none;
	/* WCAG 2.5.8 asks for 24 x 24 px wherever a target does not sit inside a
	   sentence, and these two stand on their own in the footer. At 15 px the
	   line box is 21 px high. The target grows, the type stays. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.site-footer__legal a:hover,
.site-footer__legal-link:hover {
	color: var(--yellow);
	text-decoration: underline;
}

.site-footer__legal .current-menu-item > a,
.site-footer__legal .current_page_item > a {
	color: var(--yellow);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Editor blocks inside the content
 * ---------------------------------------------------------------------- */

.entry-content figure {
	margin: 0 0 40px;
}

.entry-content figcaption {
	margin-top: 12px;
	font-family: var(--body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-soft);
}

.entry-content img {
	border-radius: 4px;
	height: auto;
}

/* The prince who gave the club its name stands beside the paragraph that
   explains it, framed in the club's yellow. */
.entry-content .wp-block-image.is-style-pulau-framed {
	float: left;
	width: 177px;
	margin: 0 34px 20px 0;
}

.entry-content .wp-block-image.is-style-pulau-framed img {
	/* Der Rahmen liegt aussen: 157 x 218 px ist das Bild, nicht die Box. */
	box-sizing: content-box;
	width: 157px;
	height: 218px;
	border: 8px solid var(--yellow);
	border-radius: 4px;
	object-fit: cover;
}

.entry-content .wp-block-image.is-style-pulau-framed figcaption {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink-soft);
}

/* Der Ordensname traegt die Zeile, der Rest steht leichter darunter. */
.entry-content .wp-block-image.is-style-pulau-framed figcaption strong {
	font-weight: 700;
}

/* Aus dem Archiv: the club's own posters, set off by the same rule that
   separates every other block of the site. */
/* Wider than the read line: the posters are pictures, not text. */
.prose > .pulau-archive {
	max-width: none;
}

.pulau-archive {
	clear: both;
	border-top: 5px solid var(--black);
	padding-top: 30px;
	margin-top: 34px;
}

.pulau-archive h2 {
	color: var(--black);
	margin-bottom: 8px;
}

.pulau-archive p {
	margin-bottom: 28px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 820px;
}

/* The posters keep their own proportions and stand next to each other, the way
   they hang on a board. WordPress' own gallery CSS stretches every tile to the
   same height with object-fit: cover, which would crop a poster's date away, so
   these rules have to match its specificity. */
.entry-content .wp-block-gallery {
	margin-bottom: 40px;
	align-items: flex-start;
	gap: 26px;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0;
	display: block;
	width: auto;
	max-width: 400px;
	/* Nicht schrumpfen: sonst faellt das Plakat unter seine Artboard-Groesse,
	   und das Datum darauf wird kleiner als es gezeichnet war. */
	flex: 0 0 auto;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image > img {
	width: auto;
	/* 400 px deckelt die Breite, 533 px die Hoehe. Beides zusammen trifft die
	   Artboard-Masse: das hohe Plakat wird 300 x 533, das quadratische 400 x 500.
	   ⚠️ Das !important steht hier gegen eines: WordPress setzt auf Bilder in
	   einer Galerie max-width: 100% !important, und dagegen hilft keine
	   Spezifitaet. Ohne das faellt jedes Plakat auf Kachelbreite und wird
	   kleiner, als es gezeichnet war. */
	max-width: 400px !important;
	max-height: 533px;
	height: auto;
	object-fit: contain;
	flex: 0 0 auto;
	display: block;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	padding: 0;
	margin-top: 12px;
	color: var(--ink-soft);
	font-size: 15px;
	text-align: left;
}

.entry-content .has-pulau-yellow-background-color {
	border-radius: var(--radius);
	padding: 24px 28px;
}

.entry-content .has-pulau-red-deep-background-color,
.entry-content .has-pulau-black-background-color {
	border-radius: var(--radius);
	padding: 24px 28px;
	color: var(--paper);
}

.entry-content a {
	color: var(--red-text);
}

.prose--legal a {
	color: var(--red-text);
	font-weight: 700;
	text-decoration: none;
}

/* Telefon und Mail stehen untereinander in einem Absatz. Ohne eigene Hoehe
   liegen die beiden Ziele 7 px auseinander, und ein Daumen trifft das falsche. */
.prose--legal p > a[href^="tel:"],
.prose--legal p > a[href^="mailto:"] {
	display: inline-block;
	padding: 8px 0;
}

.prose--legal a:hover {
	text-decoration: underline;
}

.prose strong {
	font-weight: 800;
}

.searchform {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.searchform__label {
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.searchform__field {
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 16px;
	font-family: var(--body);
	font-size: 17px;
	min-height: 48px;
	flex-grow: 1;
	max-width: 420px;
}

.searchform__button {
	border: 0;
	background: var(--red-deep);
	color: var(--paper);
	font-family: var(--display);
	font-size: 22px;
	letter-spacing: 0.06em;
	padding: 0 24px;
	min-height: 48px;
	border-radius: var(--radius);
	cursor: pointer;
}

.searchform__button:hover {
	background: var(--red-hover);
}

.pagination {
	margin-top: 36px;
	font-family: var(--body);
	font-size: 17px;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 10px 14px;
	min-width: 44px;
	text-align: center;
	text-decoration: none;
	color: var(--red-text);
}

.pagination .current {
	background: var(--red-deep);
	color: var(--paper);
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Narrow screens
 *
 * The masthead does not shrink below 761 px, the narrow menu takes over there.
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.clasp__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.board__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.post__columns {
		flex-direction: column;
		gap: 32px;
	}

	.post__aside {
		width: 100%;
		max-width: 420px;
	}
}

@media (max-width: 760px) {
	.nav--wide {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

	/* Die Marke darf schrumpfen, sonst wird die Kopfleiste breiter als der
	   Schirm: bei 320 px waren es 60 px zu viel, und die ganze Seite scrollte
	   seitwaerts. Das Wappen wird kleiner, die Sperrung enger, der Name bleibt.
	   ⛔ Nicht unter 12 px: darunter ist es auf einem Handy nicht mehr lesbar. */
	.masthead {
		gap: 12px;
	}

	.brand {
		flex-shrink: 1;
		min-width: 0;
		gap: 10px;
	}

	.brand__crest {
		width: 44px;
		height: 44px;
	}

	.brand__name {
		font-size: 12px;
		letter-spacing: 0.08em;
		line-height: 1.4;
	}

	.hero {
		height: auto;
		padding-bottom: 40px;
	}

	.hero__inner {
		height: auto;
	}

	.hero__title {
		position: static;
		width: auto;
		max-width: none;
		padding: 0 var(--gutter);
		margin-top: 28px;
	}

	.hero__frame {
		position: static;
		width: 100%;
		max-width: none;
		height: 260px;
		clip-path: none;
	}

	.hero__caption {
		position: static;
		width: auto;
		max-width: none;
		text-align: left;
		padding: 10px var(--gutter) 0;
	}

	.clasp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.board__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ways__grid {
		grid-template-columns: 1fr;
	}

	.ways__row {
		flex-direction: column;
	}

	.prince {
		flex-direction: column;
	}

	.prince__image {
		width: 100%;
		height: 240px;
	}

	.regent-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.clasp__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.news__link {
		flex-direction: column;
		gap: 6px;
	}

	.news__date {
		width: auto;
	}

	/* The stagger is an ornament for a wide screen. On a phone it would only
	   eat the line length. */
	.news__item {
		margin-left: 0;
	}

	.facts .wp-block-columns,
	.facts > .wp-block-group {
		gap: 24px;
		padding: 24px;
	}

	/* Auf dem Handy darf kein Plakat breiter sein als der Schirm. Am Schreib-
	   tisch gilt weiter die Artboard-Breite von 400 px: ein min(400px, 100%)
	   fuer beide rechnet gegen die Kachelbreite und macht das Plakat kleiner,
	   als es gezeichnet war. */
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image > img {
		max-width: 100% !important;
	}

	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
		max-width: 100%;
	}

	/* Fewer pieces, so none of them lands on the headline. */
	.confetti__bit:nth-child(2n) {
		display: none;
	}

	.site-footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 430px) {
	.clasp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}

	.clasp__portrait {
		width: 100%;
		height: auto;
		aspect-ratio: 157 / 218;
	}

	.clasp__caption {
		width: 100%;
	}

	.board__portrait {
		height: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.clasp__figure:hover {
		transform: none;
	}
}