/*
Theme Name: Hardstyle DNA
Theme URI: https://www.hardstyle-dna.com
Author: Elemental Web
Author URI: https://www.eleweb.no
Description: Block theme for hardstyle-dna.com: black and white with red light, event names as title cards with the laser helix through them (decision 0004). Shared functionality comes from the plugin elemental-core.
Requires at least: 6.6
Requires PHP: 8.1
Version: 0.5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hardstyledna
*/

/* Design direction: docs/decisions/0004-design-direction.md (accepted 2026-11-11, round 3; fonts
   and the red provisional until the new brand package). Prototype: docs/prototypes/0004-laserhelix.html.
   - Black and white; the only colour is red light (the helix, focus, active states). Colour
     otherwise belongs to the events: their artwork, and --hardstyledna-event on event pages.
   - Square corners, no shadows, flat bone-white buttons that turn red (or the event's colour).
   - Photos on the site are black and white; artwork keeps its colour.
   Tokens live in theme.json; this file holds the layout classes and what theme.json can't
   express. Spacing comes from the layout classes, never per block. Only these breakpoints,
   always as max-width (width − 1px):
     xs  360px   small phones                            @media (max-width: 360px)
     sm  600px   phone / tablet                          @media (max-width: 599px)
     md  782px   WordPress stacks columns below this     @media (max-width: 781px)
     lg  1024px  tablet / desktop                        @media (max-width: 1023px)
     –   1280px  laptops: the header only                @media (max-width: 1279px)
     xl  1440px  fluid type and spacing stop growing (theme.json typography.fluid) */

/* Web fonts: Big Shoulders Display and Hanken Grotesk (OFL, variable, latin subset) are
   self-hosted in assets/fonts/ and declared in theme.json (fontFace). While they load, these
   fallbacks (local Arial Narrow Bold and Arial, resized with each font's metrics, measured with
   fontTools from the woff2 files) keep text at its size and line breaks. */
@font-face {
	font-family: "Big Shoulders Display Fallback";
	src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow");
	size-adjust: 88.29%;
	ascent-override: 111.45%;
	descent-override: 24.13%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Hanken Grotesk Fallback";
	src: local("Arial"), local("ArialMT");
	size-adjust: 97.87%;
	ascent-override: 102.18%;
	descent-override: 30.96%;
	line-gap-override: 0%;
}

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

html {
	background: var(--wp--preset--color--background);
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Boxes inside columns and query loops are padded by the width of that column, not the screen. */
.wp-block-column {
	container-type: inline-size;
}

/* Header, main and footer sit flush: sections bring their own spacing. */
.wp-site-blocks > *,
.hardstyledna-main > * {
	margin-block: 0;
}

h1,
h2 {
	text-wrap: balance;
}

/* Long Norwegian words in big type ("ARRANGEMENTER") stay inside small phones. */
h1,
h2,
h3 {
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (max-width: 599px) {
	h2 {
		font-size: min(var(--wp--preset--font-size--xx-large), 10.5vw);
	}
}

p,
li {
	text-wrap: pretty;
}

a {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Visible keyboard focus everywhere: the red light. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* For a heading that's there for screen readers and search engines, not for the eye. */
.hardstyledna-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Query Loops that are rows or strips, not lists to the eye. */
.hardstyledna-plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A photo from the media library shown in black and white (theme photos are exported grey). */
.hardstyledna-mono img {
	filter: grayscale(1) contrast(1.12) brightness(0.92);
}

/* ---------------------------------------------------------------------------------------
   Buttons: flat and square. Bone on black; red (or the event's colour) on hover. The outline
   style is the ghost button. `-small` for rows and the header; `-event` takes the event's
   colour (event pages).
   --------------------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control--height);
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--heading);
	border: 0;
	box-shadow: inset 0 0 0 1px #ffffff55;
	padding: var(--wp--custom--control--padding-block) var(--wp--custom--control--padding-inline);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--heading);
}

.wp-block-button.hardstyledna-button-small > .wp-block-button__link {
	min-height: var(--wp--custom--control--height-small);
	padding: var(--wp--custom--control--padding-small);
	font-size: 17px;
}

.wp-block-button.hardstyledna-button-event > .wp-block-button__link {
	background: var(--hardstyledna-event, var(--wp--preset--color--heading));
	color: var(--hardstyledna-event-ink, var(--wp--preset--color--black));
}

.wp-block-button.hardstyledna-button-event > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.wp-block-buttons {
	gap: 12px;
}

/* One width for "Tickets" and "Billetter", so the menu beside it doesn't move between
   languages. */
.hardstyledna-header__tickets .wp-block-button__link {
	min-width: 6.5em;
	justify-content: center;
	text-align: center;
}

/* ---------------------------------------------------------------------------------------
   Header: logo, menu, languages, tickets. Quiet; floats over the hero on the front page and
   event pages.
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 22px var(--wp--custom--gutter);
}

.home .wp-block-group.hardstyledna-header,
.single-events .wp-block-group.hardstyledna-header {
	position: absolute;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
}

/* WordPress's admin bar sets `width: auto` on everything in it, so the site icon by the site
   name shows at its file size. Keep it at the bar's 20px. */
#wpadminbar #wp-admin-bar-site-name img {
	width: 20px;
	height: 20px;
}

/* Imagify serves WebP through <picture> and moves the icon's class onto it: let the <img> be
   the admin bar's flex item again, so WordPress's align-items: center holds. */
#wpadminbar #wp-admin-bar-site-name > .ab-item picture {
	display: contents;
}

.hardstyledna-header > * {
	margin: 0;
}

.hardstyledna-header .hardstyledna-logo {
	margin-right: auto;
}

.hardstyledna-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.hardstyledna-logo--mark svg {
	width: 48px;
	height: 48px;
	color: var(--wp--preset--color--logo-red);
}

.hardstyledna-logo--mark span {
	font: 800 26px/1 var(--wp--preset--font-family--display);
	white-space: nowrap;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
}

.hardstyledna-header .hardstyledna-header__nav {
	font-size: var(--wp--preset--font-size--medium);
}

.hardstyledna-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 14px;
	transition: color 0.2s ease;
}

/* The red line slides in under the link from the left, and out to the right. */
.hardstyledna-header .wp-block-navigation-item__content::after,
.hardstyledna-langs a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.hardstyledna-header .wp-block-navigation-item__content:hover,
.hardstyledna-header .wp-block-navigation-item__content:focus-visible,
.hardstyledna-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--white);
}

.hardstyledna-header .wp-block-navigation-item__content:hover::after,
.hardstyledna-header .wp-block-navigation-item__content:focus-visible::after,
.hardstyledna-header .wp-block-navigation-item__content[aria-current="page"]::after,
.hardstyledna-langs a:hover::after,
.hardstyledna-langs a:focus-visible::after,
.hardstyledna-langs a[aria-current]::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* The phone menu's big links have no line. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.hardstyledna-langs {
	display: flex;
	gap: 2px;
	font: 600 15px/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.04em;
}

.hardstyledna-langs a {
	position: relative;
	padding: 14px 7px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.hardstyledna-langs a:hover,
.hardstyledna-langs a[aria-current] {
	color: var(--wp--preset--color--white);
}

/* The phone menu: black, the links big in the display face; 44px tap targets. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	box-sizing: content-box;
	padding: 10px;
	color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--wp--custom--gutter);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font: 800 var(--wp--preset--font-size--x-large)/1 var(--wp--preset--font-family--display);
	text-transform: uppercase;
	padding-block: 6px;
}

/* Laptops: the menu (six links), languages and tickets fit on one line with tighter gaps and
   a slightly smaller menu and name. */
@media (max-width: 1279px) {
	.wp-block-group.hardstyledna-header {
		gap: 20px;
	}

	.hardstyledna-header .hardstyledna-header__nav .wp-block-navigation__container {
		gap: 16px;
	}

	.hardstyledna-header .hardstyledna-header__nav {
		font-size: 16px;
	}

	.hardstyledna-logo--mark span {
		font-size: 22px;
	}
}

/* Tablets: the menu goes behind the menu button, as on phones (the Navigation block's own
   overlay only starts at 600px). */
@media (max-width: 1023px) {
	.hardstyledna-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hardstyledna-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-header {
		gap: 8px;
	}

	.wp-block-buttons.hardstyledna-header__tickets {
		display: none;
	}

	.hardstyledna-logo--mark span {
		display: none;
	}
}

/* ---------------------------------------------------------------------------------------
   Hero: a title card over a photo, with the laser helix (assets/js/helix.js) through the
   title. Layers, back to front: photo (−3), gradient (−2), back canvas (−1), the text, the
   front canvas (1), then the line above the title and the date/buttons row (2).
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 100svh;
	padding: 140px var(--wp--custom--gutter) var(--wp--preset--spacing--60);
	overflow: hidden;
}

.hardstyledna-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, #000c 0%, #0004 28%, #0000 45%, #000b 78%, #000 100%), linear-gradient(90deg, #000d 0%, #0000 62%);
}

.hardstyledna-hero > .hardstyledna-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hardstyledna-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.hardstyledna-helix__canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.hardstyledna-helix__canvas--front {
	z-index: 1;
}

.hardstyledna-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.hardstyledna-hero__inner * {
	margin-block: 0;
}

.hardstyledna-hero__next,
.hardstyledna-hero__meta {
	position: relative;
	z-index: 2;
}

.wp-block-group.hardstyledna-hero__next {
	gap: 6px;
	margin-bottom: var(--wp--preset--spacing--30);
	font: 500 var(--wp--preset--font-size--caption)/1 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--muted);
}

/* "Next:" without a ticket state after it says nothing. */
.hardstyledna-hero__next:not(:has(p + p)) {
	display: none;
}

.hardstyledna-hero__label {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.hardstyledna-hero__brand {
	margin: 0 0 0.5em 0.08em;
	font: 700 calc(var(--wp--preset--font-size--display) * 0.2)/1 var(--wp--preset--font-family--display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
}

.hardstyledna-hero__title {
	max-width: 11ch;
	/* "HARDSTYLE" is about 4em wide: on the narrowest phones the title shrinks so it fits on a line. */
	font-size: min(var(--wp--preset--font-size--display), calc((100vw - 2 * var(--wp--custom--gutter)) / 4.2));
	font-weight: 900;
	/* Never "HARD-STYLE": the brand and event names aren't hyphenated. */
	hyphens: manual;
}

.hardstyledna-hero__lead {
	max-width: 40ch;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--heading);
}

.wp-block-group.hardstyledna-hero__meta {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--50);
}

.hardstyledna-hero__date {
	font: 700 var(--wp--preset--font-size--large)/1.05 var(--wp--preset--font-family--display);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}

.hardstyledna-hero__place,
.hardstyledna-hero__state {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* Event pages: the event's own artwork, in colour; the title a little smaller (names are longer). */
.wp-block-group.hardstyledna-hero--event {
	min-height: 92svh;
}

.hardstyledna-hero--event::before {
	background: linear-gradient(180deg, #000b 0%, #0000 35%, #0008 70%, #000 100%), linear-gradient(90deg, #000e 0%, #0004 55%, #0000 100%);
}

.hardstyledna-hero--event .hardstyledna-hero__photo img {
	object-position: 70% 30%;
}

.hardstyledna-hero--event .hardstyledna-hero__title {
	max-width: 12ch;
	font-size: min(calc(var(--wp--preset--font-size--display) * 0.82), calc((100vw - 2 * var(--wp--custom--gutter)) / 4.2));
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-hero {
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

/* ---------------------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-section {
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
}

.hardstyledna-section > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* A section's title row: the heading, and a short line to the right of it. */
.wp-block-group.hardstyledna-section__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
}

.hardstyledna-section__head > * {
	margin: 0;
}

.hardstyledna-section__head p {
	max-width: 38ch;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-section__head {
		grid-template-columns: 1fr;
	}
}

/* Plain pages (page.html, the events archive's title, 404, the policies). */
.wp-block-group.hardstyledna-page {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) var(--wp--preset--spacing--80);
}

.hardstyledna-page__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Text pages (contact, privacy, cookies, terms): headings in the text's own scale. */
.hardstyledna-page .wp-block-post-content {
	margin-top: var(--wp--preset--spacing--60);
}
/* Long addresses written out as links (the cookie policy's browser help pages) break anywhere. */
.hardstyledna-page .wp-block-post-content a {
	overflow-wrap: anywhere;
}
.hardstyledna-page .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--large);
}

.hardstyledna-page .wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.02em);
}

.hardstyledna-page .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* No image in page content is wider than the page (old content kept fixed widths). Zero
   specificity, so the theme's own image rules win. */
:where(.wp-block-post-content) img {
	max-width: 100%;
	height: auto;
}

.wp-block-group.hardstyledna-page--head {
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--gutter));
	margin-inline: auto;
	padding-bottom: 0;
}

.wp-block-group.hardstyledna-page--head + .hardstyledna-section {
	padding-top: var(--wp--preset--spacing--40);
}

/* On the events pages (/events/, Arrangementer) the h1 already says "Events". */
.hardstyledna-page--head + .hardstyledna-section--events .hardstyledna-section__head h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* ---------------------------------------------------------------------------------------
   Lineup: billed like film credits, centred, no boxes (block hardstyledna/lineup).
   --------------------------------------------------------------------------------------- */

.hardstyledna-credits {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) var(--wp--preset--spacing--40);
	text-align: center;
}

.hardstyledna-credits h2 {
	margin: 0 0 var(--wp--preset--spacing--50);
	font: 500 var(--wp--preset--font-size--caption)/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.hardstyledna-credits ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.55em;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}

.hardstyledna-credits li {
	white-space: nowrap;
}

.hardstyledna-credits__tier-1 {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
	line-height: 1.05;
}

.hardstyledna-credits .hardstyledna-credits__tier-2 {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--text);
}

.hardstyledna-credits .hardstyledna-credits__tier-3 {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------------------
   Upcoming events: big rows. Pointing at a row brings the event's artwork, in colour, into it.
   --------------------------------------------------------------------------------------- */

.hardstyledna-events .wp-block-post-template {
	border-top: 1px solid var(--wp--preset--color--line);
}

.hardstyledna-events .wp-block-post-template > li {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: clamp(200px, 24%, 340px) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
}

.hardstyledna-events li > * {
	margin: 0;
}

.hardstyledna-events .hardstyledna-event__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.5s ease, transform 1.2s ease;
}

.hardstyledna-event__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hardstyledna-events li::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, #000 0%, #000c 40%, #0008 100%);
	opacity: 0;
	transition: opacity 0.5s;
}

.hardstyledna-events li:hover .hardstyledna-event__art,
.hardstyledna-events li:focus-within .hardstyledna-event__art {
	opacity: 0.9;
	transform: none;
}

.hardstyledna-events li:hover::after,
.hardstyledna-events li:focus-within::after {
	opacity: 1;
}

.hardstyledna-event__date > *,
.hardstyledna-event__name > * {
	margin: 0;
}

.hardstyledna-event__day {
	font: 800 var(--wp--preset--font-size--x-large)/0.9 var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}

.hardstyledna-event__year {
	margin-top: 8px !important;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1;
	color: var(--wp--preset--color--muted);
}

.hardstyledna-events h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* The whole row is the link to the event page. */
.hardstyledna-events h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hardstyledna-event__place {
	margin-top: 10px !important;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

.wp-block-group.hardstyledna-event__act {
	position: relative;
	z-index: 1;
	gap: var(--wp--preset--spacing--40);
}

.hardstyledna-event__state {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1;
	color: var(--wp--preset--color--muted);
}

.hardstyledna-event__state.is-status-few-left {
	color: var(--wp--preset--color--heading);
}

/* Few tickets left: a small red light. */
.is-status-few-left::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	vertical-align: 2px;
	background: var(--hardstyledna-event, var(--wp--preset--color--accent));
	box-shadow: 0 0 10px var(--hardstyledna-event, var(--wp--preset--color--accent));
}

.hardstyledna-events__empty {
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.hardstyledna-events .wp-block-post-template > li {
		grid-template-columns: 1fr;
		padding: var(--wp--preset--spacing--40) 0;
	}

	/* No pointer on phones: the artwork shows faintly all the time. */
	.hardstyledna-events .hardstyledna-event__art {
		opacity: 0.35;
		transform: none;
	}

	.hardstyledna-events li::after {
		opacity: 1;
	}

	.wp-block-group.hardstyledna-event__act {
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------------------------------
   Statement: a full-bleed black-and-white crowd and one sentence (pattern statement).
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-statement {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: 92svh;
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
	overflow: hidden;
}

.hardstyledna-statement > .hardstyledna-statement__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hardstyledna-statement__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.hardstyledna-statement::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 80% 70% at 30% 55%, #000a 0%, #0006 55%, #000 100%), linear-gradient(180deg, #000 0%, #0000 18%, #0000 82%, #000 100%);
}

/* A colour photo (the flag, decision 0004) is brighter than the black-and-white ones: dark
   from the left behind the text, open on the right where the photo carries the section. */
.hardstyledna-statement:has(.hardstyledna-statement__photo:not(.hardstyledna-mono))::before {
	background: linear-gradient(90deg, #000 0%, #000d 28%, #0007 52%, #0000 78%), linear-gradient(180deg, #000 0%, #0000 20%, #0000 85%, #000 100%);
}

.hardstyledna-statement__photo:not(.hardstyledna-mono) img {
	object-position: 62% 50%;
}

@media (max-width: 781px) {
	.hardstyledna-statement:has(.hardstyledna-statement__photo:not(.hardstyledna-mono))::before {
		background: linear-gradient(180deg, #000 0%, #0009 25%, #000c 60%, #000 100%);
	}
}

.hardstyledna-statement__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.hardstyledna-statement h2 {
	max-width: 8ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 900;
}

/* The outlined words: letters drawn as light, not filled. */
.hardstyledna-statement h2 em {
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--heading);
}

.hardstyledna-statement p {
	max-width: 46ch;
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--heading);
}

/* Sections in page content (front pages, wide pages) follow one another flush. */
.hardstyledna-sections > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------------------
   Past events: posters hung on one red strand, scrolling sideways.
   --------------------------------------------------------------------------------------- */

.hardstyledna-section--past:not(:has(.wp-block-post-template > li)) {
	display: none;
}

.wp-block-group.hardstyledna-section--past {
	padding-top: var(--wp--preset--spacing--70);
}

.hardstyledna-strand {
	max-width: none !important;
	margin-inline: calc(-1 * var(--wp--custom--gutter)) !important;
}

.hardstyledna-strand .wp-block-post-template {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(240px, 26vw, 380px);
	gap: var(--wp--preset--spacing--40);
	max-width: none;
	padding: 28px var(--wp--custom--gutter) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--custom--gutter);
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wp--custom--gutter), #000 calc(100% - 80px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--wp--custom--gutter), #000 calc(100% - 80px), transparent);
}

.hardstyledna-strand .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* The strand itself: one line of red light the posters hang on. */
.hardstyledna-strand .wp-block-post-template::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 300%;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-deep) 60%, transparent);
}

.hardstyledna-strand li {
	position: relative;
	margin: 0;
	scroll-snap-align: start;
}

.hardstyledna-strand li::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 0;
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
	box-shadow: 0 0 12px var(--wp--preset--color--accent);
}

.hardstyledna-strand li > * {
	margin: 0;
}

.hardstyledna-strand__year {
	margin-bottom: 14px !important;
	font: 800 var(--wp--preset--font-size--large)/1 var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
}

.hardstyledna-strand .wp-block-post-featured-image {
	margin-bottom: 14px;
	overflow: hidden;
}

.hardstyledna-strand .wp-block-post-featured-image img {
	transition: transform 0.8s ease;
}

.hardstyledna-strand li:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.hardstyledna-strand h3 {
	font-size: var(--wp--preset--font-size--large);
}

.hardstyledna-strand h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hardstyledna-strand__place {
	margin-top: 6px !important;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------------------
   Event page body: facts, information and FAQ, the ticket bar on phones.
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-section--facts {
	padding-block: var(--wp--preset--spacing--50) 0;
}

.wp-block-group.hardstyledna-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border-block: 1px solid var(--wp--preset--color--line);
}

.hardstyledna-facts > * {
	margin: 0;
}

/* A fact without a value (its value paragraph rendered nothing) is left out. */
.hardstyledna-fact:not(:has(.hardstyledna-fact__value)) {
	display: none;
}

.wp-block-group.hardstyledna-fact {
	padding: var(--wp--preset--spacing--40);
	padding-left: 0;
}

.hardstyledna-fact + .hardstyledna-fact {
	padding-left: var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--line);
}

.hardstyledna-fact > * {
	margin: 0;
}

.hardstyledna-fact__label {
	margin-bottom: 8px !important;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

.hardstyledna-fact__value {
	font: 700 var(--wp--preset--font-size--large)/1.05 var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-facts {
		grid-template-columns: 1fr 1fr;
	}

	.hardstyledna-fact + .hardstyledna-fact {
		border-left: 0;
		padding-left: 0;
	}

	.wp-block-group.hardstyledna-fact {
		padding-right: var(--wp--preset--spacing--30);
	}
}

.wp-block-group.hardstyledna-info {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--wp--preset--spacing--70);
}

.hardstyledna-info > *,
.hardstyledna-info__aside > * {
	margin-block: 0;
}

.hardstyledna-info h2 {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-large);
}

.hardstyledna-info__text h2,
.hardstyledna-info__text h3 {
	margin-top: var(--wp--preset--spacing--60);
}

.hardstyledna-info__text > :first-child {
	margin-top: 0;
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-info {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* Questions and answers: the Details block, a plus that turns into a cross. */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-details + .wp-block-details {
	margin-top: 0;
}

.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--heading);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font: 500 26px/0.8 var(--wp--preset--font-family--body);
	color: var(--hardstyledna-event, var(--wp--preset--color--accent));
	transition: transform 0.2s;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-top: 0;
	padding-bottom: 20px;
}

.wp-block-group.hardstyledna-ticket-bar {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-ticket-bar:has(.wp-block-button) {
		position: sticky;
		bottom: 0;
		z-index: 5;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 12px;
		padding: 10px var(--wp--custom--gutter) calc(10px + env(safe-area-inset-bottom));
		background: #000e;
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.hardstyledna-ticket-bar > *,
	.hardstyledna-ticket-bar__text > * {
		margin: 0;
	}

	.hardstyledna-ticket-bar__title {
		font: 700 19px/1.1 var(--wp--preset--font-family--display);
		text-transform: uppercase;
		color: var(--wp--preset--color--white);
	}

	.hardstyledna-ticket-bar__state {
		font-size: 13px;
		line-height: 1.3;
		color: var(--wp--preset--color--muted);
	}
}

/* ---------------------------------------------------------------------------------------
   Footer: the full logo, the menu, the profiles; a line with © and the privacy policy.
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-footer {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--caption);
}

.hardstyledna-footer > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.wp-block-group.hardstyledna-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.hardstyledna-footer-grid > *,
.hardstyledna-footer-grid > * > * {
	margin-block: 0;
}

.hardstyledna-logo--full svg {
	/* Wide enough that the tagline ("It's in your blood") can be read. */
	width: clamp(320px, 34vw, 500px);
	max-width: 100%;
	height: auto;
	color: var(--wp--preset--color--heading);
}

.hardstyledna-logo--full .hdna-mark {
	fill: var(--wp--preset--color--logo-red);
}

.hardstyledna-logo--full .hdna-tagline {
	fill: var(--wp--preset--color--muted);
}

.hardstyledna-footer .hardstyledna-footer__heading {
	margin-bottom: 18px;
	font: 500 var(--wp--preset--font-size--caption)/1 var(--wp--preset--font-family--body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.hardstyledna-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2.2;
}

.hardstyledna-footer a,
.hardstyledna-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.hardstyledna-footer a:hover,
.hardstyledna-footer a:focus-visible {
	color: var(--wp--preset--color--white);
}

.hardstyledna-footer__nav {
	gap: 0;
	line-height: 2.2;
}

.hardstyledna-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.hardstyledna-footer .hardstyledna-footer__legal a {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1023px) {
	.wp-block-group.hardstyledna-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hardstyledna-footer-grid > .hardstyledna-footer__brand {
		grid-column: 1 / -1;
	}

	.hardstyledna-footer__brand .hardstyledna-logo--full svg {
		width: min(100%, 500px);
	}
}

/* ---------------------------------------------------------------------------------------
   Holding page until launch (decision 0007): the front page hero alone, with the profiles
   under it and one line of open pages. The header floats as on the front page.
   --------------------------------------------------------------------------------------- */

.elemental-holding .wp-block-group.hardstyledna-header {
	position: absolute;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
}

/* Two rows (the event, the profiles), kept together at the bottom of the photo. */
.wp-block-group.hardstyledna-holding {
	align-content: end;
}

/* The holding page's photo is in colour (red fireworks, decision 0004) and brighter than the
   black-and-white hero: darker where the text stands. */
.hardstyledna-holding::before {
	background: linear-gradient(180deg, #000c 0%, #0003 22%, #0006 45%, #000d 68%, #000 100%), linear-gradient(90deg, #000d 0%, #0000 62%);
}

@media (max-width: 781px) {
	.hardstyledna-holding::before {
		background: linear-gradient(180deg, #000c 0%, #0003 18%, #000a 36%, #000d 60%, #000 100%);
	}
}

.hardstyledna-holding__follow {
	z-index: 2;
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-group.hardstyledna-holding__footer {
	padding-block: var(--wp--preset--spacing--40);
}

.hardstyledna-holding__footer .hardstyledna-footer__legal {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------------------
   Two worlds (front page, decision 0004): Outdoor and Indoor as two tall photos side by
   side, each name huge on its photo, a short text under it. The photos are black and white;
   pointing at one brings its colour back and draws a red line of light along its top.
   Full bleed under a gradient (the image edge). Phones: stacked.
   --------------------------------------------------------------------------------------- */

.wp-block-group.hardstyledna-worlds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--80);
}

.wp-block-group.hardstyledna-world {
	display: grid;
	grid-template-rows: auto auto;
	align-content: start;
	margin: 0;
}

.hardstyledna-world > * {
	margin-block: 0;
}

.hardstyledna-world > .hardstyledna-world__photo {
	position: relative;
	grid-area: 1 / 1;
	height: clamp(420px, 78svh, 860px);
	overflow: hidden;
}

.hardstyledna-world__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.12) brightness(0.92);
	transition: filter 0.6s ease, transform 1.2s ease;
}

.hardstyledna-world__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #000 0%, #0000 22%, #0000 45%, #000d 82%, #000 100%);
	pointer-events: none;
}

.hardstyledna-world__photo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 2px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 14px 1px var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s ease;
}

.hardstyledna-world > h2 {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	align-self: end;
	padding: 0 var(--wp--custom--gutter) var(--wp--preset--spacing--30);
	/* The longest name ("INNENDØRS") is about 4.2em: it follows the column's width. */
	font-size: min(calc(var(--wp--preset--font-size--display) * 0.72), calc((50vw - 2 * var(--wp--custom--gutter)) / 4.4));
	font-weight: 900;
	hyphens: manual;
	overflow-wrap: normal;
}

.hardstyledna-world > p {
	max-width: 40ch;
	padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter) 0;
	color: var(--wp--preset--color--text);
}

@media (hover: hover) {
	.hardstyledna-world:hover .hardstyledna-world__photo img {
		filter: none;
		transform: scale(1.03);
	}

	.hardstyledna-world:hover .hardstyledna-world__photo::before {
		transform: scaleX(1);
	}
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-worlds {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	.hardstyledna-world > .hardstyledna-world__photo {
		height: 64svh;
	}

	.hardstyledna-world > h2 {
		font-size: min(calc(var(--wp--preset--font-size--display) * 0.9), calc((100vw - 2 * var(--wp--custom--gutter)) / 4.6));
	}
}

/* ---------------------------------------------------------------------------------------
   Pages with a big title (templates/page-feature.html): the page's name as a title card, over
   the page's featured image when it has one (black and white, full bleed under a gradient).
   The header floats over it, as on the front page.
   --------------------------------------------------------------------------------------- */

body:has(.hardstyledna-pagehero) .wp-block-group.hardstyledna-header {
	position: absolute;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
}

.wp-block-group.hardstyledna-pagehero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	padding: calc(92px + var(--wp--preset--spacing--70)) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.hardstyledna-pagehero:has(.hardstyledna-pagehero__photo) {
	min-height: min(72svh, 760px);
	border-bottom: 0;
}

.hardstyledna-pagehero > .hardstyledna-pagehero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hardstyledna-pagehero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.hardstyledna-pagehero:has(.hardstyledna-pagehero__photo)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, #000c 0%, #0005 30%, #0003 50%, #000c 82%, #000 100%), linear-gradient(90deg, #000b 0%, #0000 60%);
}

.hardstyledna-pagehero__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

/* The longest word of a title ("ARRANGEMENTER", "INFORMASJONSKAPSLER") fits the phone: the
   size follows the screen before it reaches the display size. */
.hardstyledna-pagehero__title {
	margin: 0;
	font-size: min(calc(var(--wp--preset--font-size--display) * 0.72), 13.5vw);
	font-weight: 900;
	line-height: var(--wp--custom--line-height--display);
	hyphens: manual;
}

/* The first section after a title card starts closer to it (as after every hero). */
.hardstyledna-pagehero + .hardstyledna-sections > .hardstyledna-section:first-child {
	padding-top: var(--wp--preset--spacing--60);
}

/* Sections in a page follow each other at half the front page's distance: they are parts of
   one page, not scenes. */
.hardstyledna-sections > .hardstyledna-section + .hardstyledna-section {
	padding-top: 0;
}

.hardstyledna-sections > .hardstyledna-section {
	padding-bottom: var(--wp--preset--spacing--70);
}

.hardstyledna-sections > .hardstyledna-section:last-child {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* A section's heading sits one step (60) above its content. */
.hardstyledna-section > h2 {
	margin-block: 0 var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--x-large);
}

/* Story: the heading on the left, the text on the right, the first paragraph larger. */
.hardstyledna-story .hardstyledna-info__text {
	max-width: 62ch;
}

.hardstyledna-story .hardstyledna-info__text > p:first-child {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--heading);
}

.hardstyledna-info__text > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* Photo and text side by side; every other one mirrored. */
.wp-block-group.hardstyledna-feature__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--70);
}

.hardstyledna-feature__grid > *,
.hardstyledna-feature__text > * {
	margin-block: 0;
}

.hardstyledna-feature__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hardstyledna-feature__text {
	max-width: 52ch;
}

.hardstyledna-feature__text h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.hardstyledna-feature__text > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.hardstyledna-feature--flip .hardstyledna-feature__photo {
	order: 2;
}

/* Three short texts hanging on one line of red light. */
.wp-block-group.hardstyledna-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--accent);
}

.hardstyledna-pillars__grid > *,
.hardstyledna-pillar > * {
	margin-block: 0;
}

.hardstyledna-pillar h3 {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
}

.hardstyledna-pillar p {
	max-width: 40ch;
}

/* Quotes: two columns, each quote under a short red line. */
.wp-block-group.hardstyledna-voices__list {
	columns: 2;
	column-gap: var(--wp--preset--spacing--70);
}

.hardstyledna-voices__list > .wp-block-quote {
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40) 0 0;
	border: 0;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left top / 56px 2px no-repeat;
}

.hardstyledna-voices__list .wp-block-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--normal);
	color: var(--wp--preset--color--heading);
}

.hardstyledna-voices__list .wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

/* Questions: a group's heading on the left, its questions on the right. */
.hardstyledna-faq .hardstyledna-info__text > * + * {
	margin-top: 0;
}

.hardstyledna-faq .wp-block-details summary {
	font-size: var(--wp--preset--font-size--lead);
}

.hardstyledna-faq .wp-block-details > :not(summary) {
	max-width: 60ch;
}

/* Two lists side by side; the marks are short red lines. */
.wp-block-group.hardstyledna-checklist__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--70);
}

.hardstyledna-checklist__grid > *,
.hardstyledna-checklist__group > * {
	margin-block: 0;
}

.hardstyledna-checklist__group h3 {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
}

.hardstyledna-checklist__group ul {
	padding: 0;
	list-style: none;
}

.hardstyledna-checklist__group li {
	position: relative;
	padding: 14px 0 14px 34px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.hardstyledna-checklist__group li::before {
	content: "";
	position: absolute;
	top: calc(14px + 0.75em);
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

.hardstyledna-checklist__group li strong {
	color: var(--wp--preset--color--heading);
}

/* Call to action: one sentence in big type between two lines. */
.wp-block-group.hardstyledna-callout__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60);
	border-block: 1px solid var(--wp--preset--color--line);
}

.hardstyledna-callout__inner > * {
	margin: 0;
}

.hardstyledna-callout__inner h2 {
	max-width: 14ch;
	font-size: var(--wp--preset--font-size--xx-large);
}

.hardstyledna-callout__inner p {
	grid-column: 1;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--lead);
}

.hardstyledna-callout__inner .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* Contact: the address is the page. */
.hardstyledna-contact > * {
	margin-block: 0;
}

/* The lead keeps the section's width (and its left edge); the text itself stays short. */
.hardstyledna-contact__lead {
	padding-right: max(0px, calc(100% - 60ch));
	font-size: var(--wp--preset--font-size--lead);
}

.hardstyledna-contact .hardstyledna-contact__mail {
	margin-top: var(--wp--preset--spacing--50);
	font: 800 min(var(--wp--preset--font-size--xx-large), 7.4vw)/1 var(--wp--preset--font-family--display);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.hardstyledna-contact__mail a {
	color: var(--wp--preset--color--heading);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.14em;
}

.hardstyledna-contact__mail a:hover {
	color: var(--wp--preset--color--accent-hover);
}

.hardstyledna-contact .hardstyledna-contact__heading {
	margin-block: var(--wp--preset--spacing--60) 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
	font: 500 var(--wp--preset--font-size--caption)/1.2 var(--wp--preset--font-family--body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.hardstyledna-contact .hardstyledna-contact__profiles {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

.hardstyledna-contact__profiles a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 700 var(--wp--preset--font-size--large)/1 var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.hardstyledna-contact__profiles a:hover,
.hardstyledna-contact__profiles a:focus-visible {
	color: var(--wp--preset--color--accent-hover);
}

@media (max-width: 781px) {
	.wp-block-group.hardstyledna-pagehero {
		padding-top: calc(92px + var(--wp--preset--spacing--60));
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.wp-block-group.hardstyledna-pagehero:has(.hardstyledna-pagehero__photo) {
		min-height: 62svh;
	}

	.wp-block-group.hardstyledna-feature__grid,
	.wp-block-group.hardstyledna-pillars__grid,
	.wp-block-group.hardstyledna-checklist__grid,
	.wp-block-group.hardstyledna-callout__inner {
		grid-template-columns: 1fr;
	}

	.wp-block-group.hardstyledna-feature__grid,
	.wp-block-group.hardstyledna-checklist__grid {
		gap: var(--wp--preset--spacing--50);
	}

	.hardstyledna-feature--flip .hardstyledna-feature__photo {
		order: 0;
	}

	/* The photo runs to the screen edges. */
	.hardstyledna-feature__photo {
		margin-inline: calc(-1 * var(--wp--custom--gutter)) !important;
	}

	.wp-block-group.hardstyledna-voices__list {
		columns: 1;
	}

	.hardstyledna-callout__inner .wp-block-buttons,
	.hardstyledna-callout__inner p {
		grid-column: 1;
		grid-row: auto;
	}

	.hardstyledna-callout__inner .wp-block-button,
	.hardstyledna-callout__inner .wp-block-button__link {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------------------
   Image edges: no image sits on the page as a bare rectangle. Every image uses one of
   - the edge line (posters on the strand, artwork tiles: `.hardstyledna-edge`),
   - full bleed under a gradient (heroes, the statement, event rows' artwork),
   - a fade into the page (photos on the page ground: `.hardstyledna-fade`).
   Logos are cut-outs and need none.
   --------------------------------------------------------------------------------------- */

.hardstyledna-edge {
	position: relative;
}

.hardstyledna-edge::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: var(--wp--preset--shadow--edge);
	pointer-events: none;
}

.hardstyledna-fade img {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 80%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 80%, transparent);
	mask-composite: intersect;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}

	html {
		scroll-behavior: auto;
	}
}