/**
 * Main layout styles for ASAP WP Template.
 * Loaded on the front end and in the block editor (add_editor_style).
 */

/* ---------- Base ---------- */
:root {
	--asap-navy: var(--wp--preset--color--primary, #1c3a5e);
	--asap-accent: var(--wp--preset--color--accent, #dce9f5);
	--asap-muted: var(--wp--preset--color--muted, #8a8a8a);
	/* Customizer key colors (overridden by inline style from theme_mods). */
	--asap-text: var(--wp--preset--color--contrast, #1a1a1a);
	--asap-header-bg: var(--asap-navy);
	--asap-menu-bg: var(--asap-navy);
	--asap-maxw: 1000px;
}

body {
	margin: 0;
	color: var(--asap-text);
	background: #fff;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	/* Sticky footer: stack full-height so the footer can be pinned to the bottom. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Main grows to fill remaining height → footer sits at the bottom on short pages. */
.asap-main { flex: 1 0 auto; }

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

a { color: var(--asap-navy); }

.asap-container {
	max-width: var(--asap-maxw);
	margin-inline: auto;
	padding: 3rem 1.25rem;
}

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: #fff; padding: .5rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.asap-header {
	position: relative;
	background: var(--asap-header-bg);
	color: #fff;
}
.asap-header--sticky { position: sticky; top: 0; z-index: 100; }
.asap-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1.25rem;
}
.asap-header__brand { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.asap-header__title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }
.asap-header__title a { color: #fff; text-decoration: none; }
.asap-header__tagline { margin: 0; font-size: .7rem; color: #cdd8e6; }
.custom-logo-link img { max-height: 44px; width: auto; }

.asap-nav ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.asap-nav a { color: #fff; text-decoration: none; font-size: .9rem; }
.asap-nav a:hover { opacity: .75; }

/* Hamburger (shown on all breakpoints per comp).
   Stays above the drawer (z-index 95) so the ×-state doubles as the close button. */
.asap-nav-toggle {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 40px; height: 40px; padding: 8px;
	background: transparent; border: 0; cursor: pointer;
	order: 3;
	position: relative; z-index: 105;
}
.asap-nav-toggle__bar { display: block; height: 2px; width: 100%; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.asap-nav-toggle[aria-expanded="true"] .asap-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.asap-nav-toggle[aria-expanded="true"] .asap-nav-toggle__bar:nth-child(2) { opacity: 0; }
.asap-nav-toggle[aria-expanded="true"] .asap-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop: the header content caps at 1200px while the drawer hugs the
   viewport edge, so in the flex flow the toggle drifts toward the drawer's
   centre. Anchor the toggle to the full-width header in BOTH states so the
   closed hamburger and the open × share one spot — at the drawer's right
   edge (1.5rem in) and vertically centred within the header bar. min-height
   keeps the header from shrinking once the toggle leaves the flex flow. */
@media (min-width: 1200px) {
	.asap-header__inner { min-height: 40px; }
	.asap-nav-toggle {
		position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%);
	}
}

.asap-nav {
	position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw);
	background: var(--asap-menu-bg);
	transform: translateX(100%); transition: transform .25s ease;
	padding: 5rem 1.5rem 2rem; z-index: 95;
}
.asap-nav.is-open { transform: translateX(0); box-shadow: -8px 0 30px rgba(0,0,0,.25); }
.asap-nav ul { flex-direction: column; gap: 1rem; }

/* Anchor targets (menu jump links): offset by the sticky header height so a
   jumped-to section's heading isn't hidden under the fixed header. */
:where(.asap-hero, .asap-section)[id] { scroll-margin-top: 4.5rem; }

/* ---------- Section color schemes (module-level) ---------- */
.asap-section { padding: 4rem 1.25rem; }
.asap-section > :where(.wp-block-columns, .wp-block-query, .wp-block-heading, .asap-media__query) {
	max-width: var(--asap-maxw); margin-inline: auto;
}
.is-style-section-navy { background: var(--asap-navy); color: #fff; }
.is-style-section-navy :where(h1,h2,h3,h4,p) { color: #fff; }
.is-style-section-accent { background: var(--asap-accent); }
.is-style-section-light { background: #fff; }

/* ---------- Scroll reveal (front page sections) ----------
   Gated on html.asap-js (set in <head> before first paint) + body.asap-anim-on
   (added only when the Customizer toggle is on), so sections are never hidden
   for no-JS visitors or when the effect is disabled. reveal.js adds .is-visible
   when each section scrolls into view. */
.asap-js .asap-anim-on .asap-section {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
}
.asap-js .asap-anim-on .asap-section.is-visible {
	opacity: 1;
	transform: none;
}
/* Safety net: never keep content hidden for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
	.asap-js .asap-anim-on .asap-section {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Section title (script/serif display) ---------- */
.asap-section-title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	text-align: center;
	margin: 0 0 2.5rem;
	color: var(--asap-navy);
}

/* ---------- Placeholder boxes ---------- */
.asap-placeholder {
	display: flex; align-items: center; justify-content: center;
	min-height: 280px; background: #d7d7d7; color: #fff;
}
.asap-placeholder__label { font-size: .8rem; letter-spacing: .2em; }

/* ---------- Hero ---------- */
/* Full-bleed art-directed banner image (PC / SP swapped via <picture>). */
.asap-hero { padding: 0; line-height: 0; background: var(--asap-navy); }
.asap-hero__picture { display: block; }
.asap-hero__img { display: block; width: 100%; height: auto; }

/* ---------- Information (news) ---------- */
.asap-news { max-width: 760px; margin-inline: auto; }
.asap-news__row {
	display: flex; gap: 1.5rem; align-items: baseline;
	padding: .6rem 0; border-bottom: 1px dotted #cbcbcb;
}
.asap-news__date { color: var(--asap-navy); font-size: .9rem; white-space: nowrap; margin: 0; }
.asap-news__new {
	display: inline-block; flex-shrink: 0;
	padding: .15em .6em; border-radius: 3px;
	font-size: .75rem; font-weight: 700; line-height: 1.5;
	white-space: nowrap;
}
.asap-news__title { margin: 0; font-family: var(--wp--preset--font-family--base); font-style: normal; font-size: .95rem; font-weight: 400; }
.asap-news__title a { text-decoration: none; color: inherit; }
.asap-news__more { text-align: center; margin: 1.75rem 0 0; }

/* ---------- Media / Event ---------- */
/* Flex + centre so the row balances by count:
   1 card centred, 2 cards evenly balanced, 3 cards fill the row. */
.asap-media__grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	max-width: 1000px;
	margin-inline: auto;
	padding: 0;
}
/* The post-template renders each card in an <li>; that <li> is the flex item. */
.asap-media__grid > li {
	flex: 0 1 280px;
	max-width: 300px;
	margin: 0;
	list-style: none;
}
.asap-media__card {
	height: 100%;
	background: #fff;
	padding: 0 0 1.25rem;
}
.asap-media__thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.asap-media__thumb .wp-block-post-featured-image { margin: 0; }
.asap-media__thumb a { display: block; }
/* Placeholder shown when a media card has no featured image. */
.asap-media__noimg {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16/10; background: #cfd8e3; color: #fff;
	font-size: .72rem; letter-spacing: .15em;
}
/* Title and excerpt share the same horizontal padding so neither hugs the edge. */
.asap-media__date { margin: .9rem 0 0; padding-inline: 1.1rem; color: var(--asap-navy); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.asap-media__title { margin: .9rem 0 .3rem; padding-inline: 1.1rem; font-style: normal; font-family: var(--wp--preset--font-family--base); font-size: .95rem; font-weight: 700; }
/* When a date precedes the title, tighten the gap between them. */
.asap-media__date + .asap-media__title { margin-top: .15rem; }
.asap-media__title a { text-decoration: none; color: var(--asap-navy); }
.asap-media__excerpt { margin: 0; padding-inline: 1.1rem; font-size: .85rem; color: #444; }
/* Cards already carry their own bottom padding inside a white box, so it
   doesn't read as open space the way Information's borderless rows do —
   add extra margin here to match that section's perceived gap above the link. */
.asap-media__more { text-align: center; margin: 2.5rem 0 0; }

/* Media archive: explicit 3-column grid (same .asap-media__card box as the
   front-page section), paginated 5 rows at a time via posts_per_page=15. */
.asap-archive-media__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 782px) {
	.asap-archive-media__grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

/* ---------- Profile ---------- */
/* Balanced two-up: photo hugs centre in the left column, text block hugs
   centre in the right column, so the outer margins are mirrored. */
.asap-profile__inner {
	max-width: 940px;
	margin-inline: auto;
	gap: 2.5rem;
	align-items: center;
}
.asap-profile__inner > .wp-block-column { flex-basis: 50% !important; }
.asap-profile__photo {
	min-height: 300px;
	max-width: 400px;
	margin-left: auto;
	margin-right: 0;
}
/* When a real photo is set, drop the placeholder box styling. */
.asap-profile__photo--img { min-height: 0; background: none; }
.asap-profile__photo--img img { display: block; width: 100%; height: auto; }
.asap-profile__name,
.asap-profile__inner > .wp-block-column:last-child > p,
.asap-profile__data {
	max-width: 400px;
	margin-left: 0;
	margin-right: auto;
}
.asap-profile__name { font-style: normal; font-family: var(--wp--preset--font-family--base); font-size: 1.3rem; font-weight: 700; margin: 0 0 .5rem; }
.asap-profile__title { font-size: .9rem; margin: 0 0 1.5rem; }
.asap-profile__data table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.asap-profile__data th, .asap-profile__data td { text-align: left; padding: .2rem .5rem; border: 0; vertical-align: top; }
.asap-profile__data th { width: 8em; padding-left: 0; color: var(--asap-navy); font-weight: 600; white-space: nowrap; }

/* ---------- Biography ---------- */
/* Same balancing as Profile: cap each column's content and pull both toward
   the centre, so the outer margins are mirrored. */
.asap-biography__inner {
	max-width: 1000px;
	margin-inline: auto;
	gap: 2.5rem;
}
/* Left column: content sits toward the centre (its original position).
   Right column: content sits toward the outer-right, away from the centre. */
.asap-biography__inner > .wp-block-column:first-child > * {
	max-width: 390px;
	margin-left: auto;
	margin-right: 0;
}
.asap-biography__inner > .wp-block-column:last-child > * {
	max-width: 370px;
	margin-left: auto;
	margin-right: 0;
}
.asap-biography h4 {
	font-style: normal; font-family: var(--wp--preset--font-family--base);
	font-size: 1rem; font-weight: 700; margin: 0 0 .4rem;
}
/* Zero the UA default so the heading-to-list gap is controlled by h4's own
   margin-bottom alone (adjoining margins collapse to the larger of the two,
   which otherwise made the browser's default UL top margin win). The bottom
   margin here — not the heading's top margin — carries the gap before the
   next subheading, so each group reads as heading+list tight, group-to-group loose. */
.asap-biography ul { font-size: .88rem; padding-left: 1.1rem; margin: 0 0 1.75rem; }
/* Nested sub-list ("- " prefixed items): indented one more level, circle
   markers, tighter margins so it reads as a child of the line above. */
.asap-biography .asap-bio__sublist { margin: .25rem 0 .6rem; list-style-type: circle; }

/* ---------- Story ---------- */
.asap-story__inner { gap: 3rem; }
/* Match Biography's left-column text start: that section right-aligns a
   390px block inside its 480px column (1000px maxw, 2.5rem gap, 2 equal
   columns), leaving ~90px of empty space before the text. Story's column
   isn't capped/right-aligned the same way, so pad the text in by the same
   amount to line up the two sections' start positions. */
.asap-story__inner > .wp-block-column:first-child { font-size: .9rem; padding-left: 70px; }
.asap-story__photo { min-height: 360px; }
.asap-story__photo--img { min-height: 0; background: none; }
.asap-story__photo--img img { display: block; width: 100%; height: auto; }

/* ---------- Contact ---------- */
.asap-contact__inner { gap: 2rem; }
.asap-contact__box { background: #f2f2f2; padding: 2rem 1.5rem; height: 100%; }
.asap-contact__box .wp-block-button__link { background: var(--asap-navy); border-radius: 2px; }
/* Image variant: the image itself is the whole box, so drop the grey
   background/padding and let it fill the column edge-to-edge. */
.asap-contact__box--image { background: none; padding: 0; }
.asap-contact__image-link { display: block; height: 100%; }
.asap-contact__image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Sponsors: two static logos, centred, normalised to a common cap height. */
.asap-sponsors {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 2.5rem 3.5rem; margin-top: 3rem;
}
.asap-sponsors__item { display: inline-flex; }
.asap-sponsors__logo { display: block; width: auto; height: auto; max-height: 48px; max-width: 100%; }

/* ---------- Archive / Single ---------- */
.asap-archive__item { display: flex; gap: 1.5rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px dotted #cbcbcb; }
.asap-archive__date { color: var(--asap-navy); font-size: .9rem; white-space: nowrap; }
.asap-archive__title { margin: 0; font-size: 1rem; }
.asap-archive__title a { text-decoration: none; color: inherit; }
.asap-single__title { font-style: normal; }
.asap-single__date { color: var(--asap-muted); font-size: .85rem; }
.asap-back { margin-top: 2rem; font-size: .85rem; }
.asap-back a { color: var(--asap-navy); text-decoration: none; }
.asap-back a:hover { text-decoration: underline; }

/* ---------- Page hero (secondary-page header) ----------
   Background & text colour are injected as inline style from the Customizer
   (see asap_pagehero_css); defaults render the navy + hexagon motif. */
.asap-page-hero {
	color: #fff;
	background-color: var(--asap-navy);
	text-align: center;
	padding: clamp(2.75rem, 7vw, 4.5rem) 1.25rem;
}
.asap-page-hero__inner { max-width: 1000px; margin-inline: auto; }
.asap-page-hero__kicker {
	display: inline-block;
	margin: 0 0 1.1rem;
	padding-bottom: .5rem;
	font-size: .72rem;
	letter-spacing: .35em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
	border-bottom: 2px solid rgba(255, 255, 255, .5);
}
.asap-page-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-style: normal;
	font-weight: 500;
	color: #fff;
	font-size: clamp(1.7rem, 4vw, 2.8rem);
	line-height: 1.3;
	word-break: break-word;
}
.asap-page-hero__meta {
	margin: 1.1rem 0 0;
	font-size: .82rem;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .72);
}

/* ---------- Secondary pages: page header ---------- */
.asap-page-header { text-align: center; margin: 0 0 2.5rem; }
.asap-page-header__title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	color: var(--asap-navy);
	margin: 0;
	word-break: break-word;
}
.asap-page-header__title span { font-style: normal; }
.asap-page-header__desc { margin-top: .75rem; color: #555; font-size: .95rem; }

/* ---------- Entry (single post / page) ---------- */
.asap-entry__header { margin: 0 0 1.75rem; }
.asap-entry__title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--asap-navy);
	margin: 0 0 .6rem;
}
.asap-entry__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; color: var(--asap-muted); }
.asap-entry__cats a { color: var(--asap-navy); text-decoration: none; }
.asap-entry__thumb { margin: 0 0 2rem; }
.asap-entry__thumb img { width: 100%; height: auto; display: block; }
.asap-entry__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 2rem 0 0; }
.asap-entry__tags li a {
	display: inline-block; font-size: .78rem; color: #555;
	background: #f0f0f0; padding: .2rem .7rem; border-radius: 999px; text-decoration: none;
}

/* Content flow (posts / pages) */
.entry-content { font-size: .9rem; }
.entry-content > * { margin-top: 0; margin-bottom: 1.4em; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2 { font-size: 1.4rem; margin-top: 2em; margin-bottom: 0.5em; }
/* Fixed pages only: "masking tape" heading treatment. */
.asap-entry--page .entry-content h2 {
	display: inline-block;
	padding: 0.5em 1em;
	color: #555555;
	background: #f0f0f0;
	border-left: 4px dotted rgba(0, 0, 0, 0.1);
	border-right: 4px dotted rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transform: rotate(-2deg);
}
.entry-content h3 { font-size: 1.15rem; margin-top: 1.6em; }
.entry-content blockquote {
	margin-inline: 0; padding: .4rem 0 .4rem 1.2rem;
	border-left: 3px solid var(--asap-accent); color: #444;
}
.asap-page-links { margin-top: 1.5rem; font-size: .85rem; }
.asap-page-links a { padding: 0 .35rem; }

/* ---------- Post listing (blog / archive / search) ---------- */
.asap-postlist { display: grid; gap: 2rem; }
.asap-postlist__item {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.5rem;
	align-items: start;
	padding-bottom: 2rem;
	border-bottom: 1px solid #eee;
}
.asap-postlist__item--nothumb { grid-template-columns: 1fr; }
.asap-postlist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.asap-postlist__thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.asap-postlist__date { font-size: .8rem; color: var(--asap-navy); }
.asap-postlist__title { font-size: 1.2rem; margin: .3rem 0 .5rem; line-height: 1.4; }
.asap-postlist__title a { color: var(--wp--preset--color--contrast, #1a1a1a); text-decoration: none; }
.asap-postlist__title a:hover { color: var(--asap-navy); }
.asap-postlist__excerpt { font-size: .9rem; color: #555; margin: 0 0 .6rem; }
.asap-more { font-size: .85rem; color: var(--asap-navy); text-decoration: none; font-weight: 600; }
.asap-more:hover { text-decoration: underline; }
.asap-list__empty { text-align: center; color: #666; padding: 2rem 0; }
.asap-list__search { max-width: 480px; margin: 1.5rem auto 0; }

/* ---------- Post navigation (prev / next) ---------- */
.asap-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; font-size: .85rem; }
.asap-post-nav a { color: var(--asap-navy); text-decoration: none; }
.asap-post-nav a:hover { text-decoration: underline; }
.asap-post-nav__next { margin-left: auto; text-align: right; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.2rem; height: 2.2rem; padding: 0 .5rem;
	border: 1px solid #ddd; color: var(--asap-navy); text-decoration: none; font-size: .85rem;
}
.pagination .page-numbers.current { background: var(--asap-navy); color: #fff; border-color: var(--asap-navy); }
.pagination .page-numbers.dots { border-color: transparent; }

/* ---------- Search form ---------- */
.search-form { display: flex; gap: .5rem; }
.search-form .search-field { flex: 1; padding: .5rem .7rem; border: 1px solid #ccc; }
.search-form .search-submit { padding: .5rem 1rem; background: var(--asap-navy); color: #fff; border: 0; cursor: pointer; }

/* ---------- Comments ---------- */
.asap-comments { margin-top: 3rem; }
.asap-comments__title { font-size: 1.2rem; margin: 0 0 1.5rem; }
.asap-comments__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.asap-comments__list ol { list-style: none; }
.asap-comments .comment-body { padding: 1rem 0; border-bottom: 1px solid #eee; }
.asap-comments .comment-meta { font-size: .75rem; color: var(--asap-muted); }
.asap-comments__closed { color: var(--asap-muted); font-size: .85rem; }

/* ---------- 404 ---------- */
.asap-404 { text-align: center; }
.asap-404__lead { font-size: 1.1rem; margin: 0 0 .5rem; }
.asap-404__sub { color: #666; font-size: .9rem; }
.asap-404__search { max-width: 480px; margin: 2rem auto; }
.asap-btn-navy {
	display: inline-block; background: var(--asap-navy); color: #fff;
	padding: .7rem 1.6rem; border-radius: 2px; text-decoration: none; font-size: .9rem;
}
.asap-btn-navy:hover { opacity: .9; color: #fff; }

@media (max-width: 600px) {
	.asap-postlist__item { grid-template-columns: 1fr; }
	.asap-post-nav { flex-direction: column; }
	.asap-post-nav__next { margin-left: 0; text-align: left; }
}

/* ---------- Footer ---------- */
.asap-footer { background: var(--asap-navy); color: #fff; }
.asap-footer__inner { max-width: 1200px; margin-inline: auto; padding: 1.5rem 1.25rem; }
.asap-footer__copyright { margin: 0; font-size: .8rem; color: #cdd8e6; text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.asap-media__grid { gap: 2.5rem; }
	.asap-media__grid > li { flex-basis: 100%; max-width: 400px; }
	.asap-profile__inner, .asap-biography__inner, .asap-story__inner, .asap-contact__inner { display: block; }
	.asap-profile__inner > .wp-block-column,
	.asap-biography__inner > .wp-block-column,
	.asap-story__inner > .wp-block-column,
	.asap-contact__inner > .wp-block-column { margin-bottom: 2rem; }
	.asap-story__inner > .wp-block-column:first-child { padding-left: 0; }
	/* Reset the desktop centring caps when the columns stack. */
	.asap-profile__photo,
	.asap-profile__name,
	.asap-profile__inner > .wp-block-column:last-child > p,
	.asap-profile__data,
	.asap-biography__inner > .wp-block-column:first-child > *,
	.asap-biography__inner > .wp-block-column:last-child > * { max-width: none; margin-left: 0; margin-right: 0; }
	.asap-footer__copyright { text-align: center; }
}

@media (min-width: 783px) {
	/* Keep the hamburger drawer behaviour on desktop too (per comp). */
	.asap-nav { width: 200px; }
	.asap-story__inner > .wp-block-column:first-child { padding-left: 50px; }
}