/* alna.css — ALNA Spa */
/* Last updated: August 19, 2026 */
/*
 * The one layer. Depends on colors_and_type.css, which is enqueued first and
 * holds every literal colour, family and size. Nothing below writes one.
 *
 * There is no parent theme, so nothing loads after this file to override it.
 * That is the whole reason for going standalone.
 */

/* ==========================================================================
   Fonts — self-hosted, latin subset
   ========================================================================== */

/*
 * Declared at 400, its only real weight. Rules ask for 900, so the browser
 * synthesises the bold exactly as it does today with the Google-hosted file.
 * Changing this to a range would suppress the synthesis and visibly lighten
 * every heading on the site.
 */
@font-face {
	font-family: 'Yeseva One';
	src: url('fonts/yeseva-one-latin-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Variable — one file covers 300 through 900. */
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-latin-var.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
	padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

input, button, textarea, select { font: inherit; color: inherit; }

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

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background: var(--alna-page-bg);
	color: var(--alna-text);
	font-family: var(--alna-font-body);
	font-size: var(--alna-size-body);
	font-weight: var(--alna-weight-body);
	line-height: var(--alna-lh-body);
	-webkit-font-smoothing: antialiased;
}

/*
 * Yeseva One is a display face, and reads poorly at the smaller heading
 * sizes — reserved for Display and Section (H1, H2) as of August 14, 2026.
 * H1 and H2 default to it; H3/H4 default to Roboto (Sub-section, Card title).
 * The handful of H2-tagged components that are actually Card-title-size
 * content (.alna-card__title, .alna-columns__title, .alna-footer__heading)
 * opt back into Roboto explicitly, further down.
 */
h1, h2, h3, h4 {
	font-family: var(--alna-font-display);
	font-weight: var(--alna-weight-display);
	line-height: var(--alna-lh-heading);
	letter-spacing: var(--alna-ls-heading);
	color: var(--alna-text);
}

h1 {
	font-size: var(--alna-size-h2);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
}

/*
 * No text-transform here on purpose. The kit's H2 token specifies capitalize,
 * but Elementor used <h2> for everything from eyebrow labels to body copy, so
 * binding a transform to the tag would rewrite real sentences — "No jargon, no
 * pressure, no judgment" would render as "No Jargon, No Pressure, No Judgment".
 * Capitalisation is opted into per component instead.
 */
h2 { font-size: var(--alna-size-h3); }

.alna-u-capitalize { text-transform: capitalize; }
.alna-u-center { text-align: center; }

h3,
h4 {
	font-family: var(--alna-font-body);
	/* Card size (22/20) read too large next to body copy for a sub-heading
	   like the "Why ALNA" reasons — Body size, distinguished from the
	   copy under it by weight alone rather than size, reads calmer. */
	font-size: var(--alna-size-body);
	/* --alna-weight-display-light (300) was a Yeseva-era holdover: on that
	   face it rendered as true 400 (a synthesis quirk), so it read as normal
	   weight. On Roboto it's a real thin 300. --alna-weight-bold (900) went
	   too far the other way — reads as heavy, not just present. Medium (700,
	   the same weight nav links and labels already use) is the middle step. */
	font-weight: var(--alna-weight-medium);
	letter-spacing: normal;
}

a {
	color: var(--alna-cta);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--alna-transition);
}

a:hover,
a:focus { color: var(--alna-cta-hover); }

:focus-visible {
	outline: 2px solid var(--alna-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.alna-main { display: block; }

.alna-section { padding-block: var(--alna-space-section); }

/* Alternating section fill down the Design Guidelines page — a deliberately
   subtle separation (Bone against Page, 1.05:1) rather than a strong colour
   shift, so the rhythm reads as quiet structure, not banding. */
.alna-section--alt { background: var(--alna-light); }

.alna-section__inner,
.alna-header__inner,
.alna-footer__inner,
.alna-page,
.alna-post,
.alna-archive,
.alna-404 {
	max-width: var(--alna-measure);
	margin-inline: auto;
	padding-inline: var(--alna-gutter);
}

.alna-page,
.alna-post,
.alna-archive,
.alna-404 { padding-block: var(--alna-space-section); }

.alna-section__heading {
	font-size: var(--alna-size-h2);
	letter-spacing: var(--alna-ls-display);
	text-transform: none;
	margin-block-end: var(--alna-space-lg);
}

.alna-eyebrow {
	font-family: var(--alna-font-body);
	font-size: var(--alna-size-label);
	font-weight: var(--alna-weight-bold);
	letter-spacing: var(--alna-ls-eyebrow);
	line-height: var(--alna-lh-label);
	text-transform: uppercase;
	margin-block-end: var(--alna-space-sm);
}

/* ==========================================================================
   Prose — the only place bare tags are styled, for editor content
   ========================================================================== */

.alna-prose > * + * { margin-block-start: 1em; }

.alna-prose h2,
.alna-prose h3,
.alna-prose h4 { margin-block-start: 1.5em; }

.alna-prose ul,
.alna-prose ol { padding-inline-start: 1.5em; }

.alna-prose ul { list-style: disc; }
.alna-prose ol { list-style: decimal; }

.alna-prose blockquote {
	border-inline-start: 2px solid var(--alna-secondary);
	padding-inline-start: var(--alna-space-md);
	font-style: italic;
}

.alna-prose img { margin-block: var(--alna-space-md); }

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.alna-header {
	background: var(--alna-light);
	position: relative;
	z-index: 10;
}

.alna-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--alna-space-md);
	padding-block: var(--alna-space-md);
}

.alna-header__title {
	font-family: var(--alna-font-display);
	font-size: var(--alna-size-card);
	color: var(--alna-text);
	text-decoration: none;
}

/*
 * The wordmark is a 1732x542 file. Left unconstrained it renders ~800px wide and
 * swallows the whole header, so it is capped here rather than relying on the
 * uploaded dimensions.
 */
.alna-header__brand .custom-logo-link { display: block; }

.alna-header__brand img {
	width: auto;
	max-width: 220px;
	height: auto;
}

@media (max-width: 767px) {
	.alna-header__brand img { max-width: 160px; }
}

.alna-nav__list {
	display: flex;
	gap: var(--alna-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alna-nav__list a,
.alna-nav .menu-item a {
	font-family: var(--alna-font-body);
	font-size: var(--alna-size-label);
	font-weight: var(--alna-weight-medium);
	letter-spacing: 1.5px;
	line-height: var(--alna-lh-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--alna-nav);
}

/* Hover and current-page both read as Terracotta — the CTA colour, not the
   gold (--alna-nav-active is still used for the footer link focus ring). */
.alna-nav__list a:hover,
.alna-nav__list a:focus,
.alna-nav .menu-item a:hover,
.alna-nav .menu-item a:focus,
.alna-nav .current-menu-item > a,
.alna-nav .current_page_item > a,
.alna-nav__list a[aria-current='page'] { color: var(--alna-cta); }

.alna-nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: var(--alna-space-sm);
	cursor: pointer;
}

.alna-nav-toggle__bar,
.alna-nav-toggle__bar::before,
.alna-nav-toggle__bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--alna-nav);
	transition: transform var(--alna-transition);
}

.alna-nav-toggle__bar::before,
.alna-nav-toggle__bar::after {
	content: '';
	position: relative;
}

.alna-nav-toggle__bar::before { top: -7px; }
.alna-nav-toggle__bar::after  { top: 5px; }

@media (max-width: 767px) {
	.alna-nav-toggle { display: block; }

	.alna-has-js .alna-nav {
		display: none;
		width: 100%;
	}

	.alna-has-js .alna-nav.is-open { display: block; }

	.alna-header__inner { flex-wrap: wrap; }

	.alna-nav__list {
		flex-direction: column;
		gap: var(--alna-space-md);
		padding-block: var(--alna-space-md);
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.alna-button {
	display: inline-block;
	background: var(--alna-cta);
	color: var(--alna-light);
	font-family: var(--alna-font-body);
	font-size: var(--alna-size-label);
	font-weight: var(--alna-weight-bold);
	letter-spacing: var(--alna-ls-label);
	line-height: var(--alna-lh-label);
	text-transform: uppercase;
	text-decoration: none;
	padding: var(--alna-space-sm) var(--alna-space-lg);
	border: 0;
	border-radius: var(--alna-radius-button);
	cursor: pointer;
	transition: background var(--alna-transition), transform var(--alna-transition);
}

.alna-button:hover,
.alna-button:focus {
	background: var(--alna-cta-hover);
	color: var(--alna-light);
	transform: translateY(-2px);
}

.alna-button:active { transform: translateY(0); }

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

/* ==========================================================================
   Sections
   ========================================================================== */

.alna-columns__list {
	display: grid;
	gap: var(--alna-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.alna-columns--2 .alna-columns__list { grid-template-columns: repeat(2, 1fr); }
	.alna-columns--3 .alna-columns__list { grid-template-columns: repeat(3, 1fr); }
}

/* Sized explicitly rather than inheriting from the tag — the heading level is
   chosen for document structure, not for how big the text should be. */
.alna-columns__title {
	font-family: var(--alna-font-body); /* Card title size, despite sitting on h2 or h3 depending on context */
	font-size: var(--alna-size-card);
	font-weight: var(--alna-weight-medium); /* see the h3/h4 rule's note on why not -display-light or -bold */
	letter-spacing: normal;
	margin-block: var(--alna-space-md) var(--alna-space-sm);
}

.alna-lottie {
	width: 80px;
	height: 80px;
}

.alna-photo__inner {
	display: grid;
	gap: var(--alna-space-lg);
	align-items: center;
}

@media (min-width: 768px) {
	.alna-photo__inner { grid-template-columns: 1fr 1fr; }
	.alna-photo--right .alna-photo__media { order: 2; }
}

.alna-photo__heading {
	font-size: var(--alna-size-h2);
	letter-spacing: var(--alna-ls-display);
	text-transform: none;
	margin-block-end: var(--alna-space-md);
}

.alna-callout { text-align: center; }

.alna-callout--dark {
	background: var(--alna-text);
	color: var(--alna-light);
}

.alna-callout--dark .alna-callout__heading,
.alna-callout--dark .alna-eyebrow { color: var(--alna-light); }

.alna-callout--light { background: var(--alna-light); }

.alna-callout__heading {
	font-size: var(--alna-size-hero);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
	text-transform: none;
}

.alna-callout__text { margin-block: var(--alna-space-md); }

.alna-callout__actions { margin-block-start: var(--alna-space-lg); }

/* ==========================================================================
   About
   ========================================================================== */

.alna-about__title {
	font-size: var(--alna-size-hero);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
}

.alna-about__lede {
	font-size: var(--alna-size-card);
	font-weight: var(--alna-weight-display-light);
	letter-spacing: normal;
	margin-block: var(--alna-space-md) var(--alna-space-lg);
}

.alna-about__image {
	width: 100%;
	margin-block: var(--alna-space-lg);
}

.alna-about__pair {
	display: grid;
	gap: var(--alna-space-md);
	margin-block: var(--alna-space-lg);
}

@media (min-width: 768px) {
	.alna-about__pair { grid-template-columns: 1fr 1fr; }
}

.alna-about h2 { margin-block-start: var(--alna-space-lg); }

.alna-about__science { background: var(--alna-light); }

/* ==========================================================================
   Home
   ========================================================================== */

/*
 * Hero. Reproduces the Elementor section: background video at cover, 49%
 * overlay, 50vh minimum, content centred. The poster sits under the video so
 * something meaningful is on screen before Vimeo loads — and stays there for
 * reduced motion, or if Vimeo is blocked.
 */
.alna-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: 78vh;
	overflow: hidden;
	background: var(--alna-text);
}

@media (max-width: 767px) {
	.alna-hero { min-height: 62vh; }
}

.alna-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.alna-hero__poster,
.alna-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/*
 * 16:9 kept covering at any aspect ratio.
 *
 * `inset: auto` MUST come before top/left. Written the other way round it
 * resets them back to auto, and the iframe then sits at its natural position
 * covering only part of the hero — which read as a dark overlay on one half.
 */
.alna-hero__video {
	inset: auto;
	top: 50%;
	left: 50%;
	width: 177.78vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.alna-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--alna-veil-strong);
}

@media (prefers-reduced-motion: reduce) {
	.alna-hero__video { display: none; }
}

.alna-hero__inner {
	max-width: var(--alna-measure);
	margin-inline: auto;
	padding: var(--alna-space-section) var(--alna-gutter);
	width: 100%;
}

/* Content sits in the left half, as it does on live. */
@media (min-width: 768px) {
	.alna-hero__content { max-width: 55%; }
}

.alna-hero__title {
	font-size: var(--alna-size-hero);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
	color: var(--alna-light);
}

.alna-hero__actions,
.alna-why__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alna-space-md);
	margin-block-start: var(--alna-space-lg);
}

.alna-home__image {
	width: 100%;
	margin-block-end: var(--alna-space-lg);
}

/* "Start here." is an action, not a headline — it earns the same treatment
   as the Why ALNA reason headings (below), not the Yeseva/Section size it
   had before, which put it in visual competition with the H2 above it.
   Orange marks it as actionable, same logic as the eyebrows. */
.alna-home__standfirst {
	font-family: var(--alna-font-body);
	font-size: var(--alna-size-body);
	font-weight: var(--alna-weight-medium);
	color: var(--alna-cta);
	margin-block-start: var(--alna-space-sm);
}

/* A downward arrow reinforces "this is a click/scroll cue", same logic as
   the footer list arrows — not underlined, for the same reason theirs
   isn't: a line through the glyph reads as a mistake, not a choice. */
.alna-home__standfirst::after {
	content: '\2193';
	margin-inline-start: 6px;
	text-decoration: none;
}

/* This heading's own margin-block-end (--alna-space-lg, from the shared
   .alna-section__heading component) put ~45px between it and "Start here."
   — appropriate as a gap to body copy, too much to a follow-on action one
   line below it. Scoped to this instance only, not the shared component. */
.alna-home__cta-heading { margin-block-end: var(--alna-space-sm); }

.alna-why__block { margin-block-start: var(--alna-space-lg); }

/* Defined explicitly rather than left to inherit the generic h3,h4 fallback
   — these are a distinct component (the "Why ALNA" reasons), not a bare
   heading tag, and shouldn't drift if that shared rule changes later.
   Deliberately smaller and lighter than a blog card title: a supporting
   point inside a section reads calmer than the thing that gets you to
   click into an article. */
.alna-why__block h3 {
	font-family: var(--alna-font-body);
	font-size: var(--alna-size-body);
	font-weight: var(--alna-weight-medium);
	letter-spacing: normal;
	margin-block-end: var(--alna-space-sm);
}

/*
 * One architectural drawing split across three files, left to right. Laid out
 * edge to edge on desktop so it reads continuously, stacked below 768px, and
 * allowed to scroll rather than forcing the page to.
 */
.alna-plan__figure {
	display: grid;
	margin: var(--alna-space-lg) 0;
	background: var(--alna-light);
}

@media (min-width: 768px) {
	.alna-plan__figure {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		overflow-x: auto;
	}
}

.alna-plan__panel { width: 100%; }

/* ==========================================================================
   Booking pages — Purchase, Book, Account
   ========================================================================== */

.alna-booking__title,
.alna-contact__title {
	font-size: var(--alna-size-hero);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
}

.alna-booking__lede,
.alna-contact__lede {
	font-family: var(--alna-font-display);
	font-size: var(--alna-size-card);
	font-weight: var(--alna-weight-display-light);
	margin-block-start: var(--alna-space-md);
}

.alna-contact__map {
	aspect-ratio: 4 / 3;
	background: var(--alna-light);
	margin-block-end: var(--alna-space-md);
}

/* The intro heading now sits above the split, so the form needs no top offset. */
.alna-contact__main { padding-block-start: 0; }

.alna-contact__where { font-size: var(--alna-size-small); }

.alna-contact__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ==========================================================================
   Services
   ========================================================================== */

.alna-services__title {
	font-size: var(--alna-size-hero);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
}

.alna-services__image {
	width: 100%;
	margin-block-end: var(--alna-space-lg);
}

.alna-services h2 { margin-block-end: var(--alna-space-md); }

/* Offering cards — title sits over a cover image, per the live layout. */
.alna-offerings__list {
	display: grid;
	gap: var(--alna-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.alna-offerings__list { grid-template-columns: repeat(3, 1fr); }
}

.alna-offerings__item {
	display: grid;
	position: relative;
	isolation: isolate;
	min-height: 320px;
	overflow: hidden;
}

.alna-offerings__media,
.alna-offerings__item::after {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.alna-offerings__media { object-fit: cover; }

.alna-offerings__item::after {
	content: '';
	background: var(--alna-veil-soft);
	transition: background var(--alna-transition);
}

.alna-offerings__item:hover::after { background: var(--alna-veil); }

.alna-offerings__title {
	grid-area: 1 / 1;
	z-index: 1;
	align-self: center;
	color: var(--alna-light);
	padding: var(--alna-space-md);
	margin: 0;
}

/* Benefits */
.alna-benefits {
	display: grid;
	gap: var(--alna-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.alna-benefits { grid-template-columns: repeat(2, 1fr); }
}

.alna-benefits__item {
	display: flex;
	align-items: center;
	gap: var(--alna-space-md);
}

.alna-benefits__icon { flex: 0 0 auto; }

/* What to expect */
/*
 * Three columns, aligned to the top and left-aligned.
 *
 * The copy was centre-aligned, which gives a ragged left edge — the eye loses
 * the line start on every wrap, and these are 40-60 word paragraphs, not
 * pull quotes. Headings stay centred over their column.
 */
.alna-expect__grid {
	display: grid;
	gap: var(--alna-space-lg);
	/* stretch (the grid default), not start — the three cards below need to
	   match height regardless of which one's copy runs longest. */
	margin-block-start: var(--alna-space-lg);
}

@media (min-width: 768px) {
	.alna-expect__grid { grid-template-columns: repeat(3, 1fr); }
}

.alna-expect__block {
	margin-block-start: 0;
	padding: var(--alna-space-lg) var(--alna-space-md);
	border: 1px solid var(--alna-primary);
	border-radius: var(--alna-radius);
	transition: border-color var(--alna-transition), transform var(--alna-transition);
}

.alna-expect__block:hover {
	border-color: var(--alna-cta);
	transform: translateY(-4px);
}

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

.alna-expect__block h3 {
	margin-block-end: var(--alna-space-sm);
	text-align: center;
}

.alna-expect__block .alna-prose { text-align: left; }

.alna-expect__block .alna-prose p { font-size: var(--alna-size-small); }

/* The image fills its column rather than sitting short of it. */
.alna-services__image--fill {
	height: 100%;
	object-fit: cover;
}

/* FAQ — headings and paragraphs, deliberately not an accordion. */
.alna-faq { background: var(--alna-light); }

.alna-faq__item { margin-block-start: var(--alna-space-lg); }

.alna-faq__question { margin-block-end: var(--alna-space-sm); }

/* Mariana Tek mount point. Height is unknown until its script renders. */
.alna-mariana { min-height: 200px; }

/* ==========================================================================
   Cards
   ========================================================================== */

.alna-card-grid {
	display: grid;
	gap: var(--alna-space-lg);
}

@media (min-width: 768px) {
	.alna-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.alna-card {
	background: var(--alna-light);
	/* Column so every card body starts at the same y, whatever the title runs to. */
	display: flex;
	flex-direction: column;
	transition: transform var(--alna-transition), box-shadow var(--alna-transition);
}

.alna-card:hover,
.alna-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px var(--alna-veil-soft);
}

.alna-card__media { display: block; overflow: hidden; }

/*
 * A fixed ratio is what makes the heights match. object-fit: cover alone does
 * nothing without a constrained box, so each thumbnail was keeping its own
 * aspect ratio and no two cards lined up.
 */
.alna-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--alna-transition);
}

.alna-card:hover .alna-card__media img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.alna-card,
	.alna-card__media img { transition: none; }
}

.alna-card__body {
	padding: var(--alna-space-md);
	flex: 1;
}

.alna-card__title {
	font-family: var(--alna-font-body); /* Card title size, on an h2 tag */
	font-size: var(--alna-size-card);
	font-weight: var(--alna-weight-medium); /* see the h3/h4 rule's note on why not -display-light or -bold */
	letter-spacing: normal;
	text-transform: none;
}

.alna-card__title a { color: var(--alna-text); text-decoration: none; }
.alna-card__title a:hover { color: var(--alna-cta-hover); }

/*
 * Metadata sits lowest in the hierarchy. It was inheriting --alna-text, the
 * same ink as the title, so size alone was carrying the whole hierarchy while
 * the button-weight tracking pushed the other way. --alna-primary steps down
 * and still clears AA at 7.34:1.
 */
.alna-card__meta,
.alna-post__meta {
	color: var(--alna-primary);
	font-size: var(--alna-size-label);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-block: 0 var(--alna-space-sm);
}

/* The date leads the card, so the title tightens up beneath it. */
.alna-card__meta + .alna-card__title { margin-block-start: 0; }

.alna-card__excerpt { font-size: var(--alna-size-small); }

/* ==========================================================================
   Page, post, archive
   ========================================================================== */

.alna-page__title,
.alna-post__title,
.alna-archive__title,
.alna-404__title {
	font-size: var(--alna-size-hero);
	line-height: var(--alna-lh-display);
	letter-spacing: var(--alna-ls-display);
}

.alna-page__header,
.alna-post__header,
.alna-archive__header { margin-block-end: var(--alna-space-lg); }

/* Every source photo is landscape except one portrait upload, which rendered
   dramatically taller than the rest at max-width:100%/height:auto — a fixed
   ratio + cover crops all of them to the same shape regardless of what
   dimensions the original file happens to be. */
.alna-post__image { margin-block-end: var(--alna-space-lg); }

.alna-post__image img {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alna-post__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--alna-space-md);
	margin-block-start: var(--alna-space-section);
	font-size: var(--alna-size-small);
}

.alna-post__nav-next { margin-inline-start: auto; text-align: right; }

/* Single post AND generic pages (Privacy Policy, Terms): two-thirds content,
   one-third sidebar. `.alna-post`/`.alna-page` already carry the page
   measure and section padding (shared with .alna-archive, .alna-404) —
   this just adds the grid on top of it, and .alna-post__sidebar is shared
   between both templates rather than duplicated. */
.alna-post__layout,
.alna-page__layout { display: grid; gap: var(--alna-space-lg); }

@media (min-width: 768px) {
	.alna-post__layout,
	.alna-page__layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.alna-post__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--alna-space-lg);
}

.alna-post__sidebar-block {
	padding: var(--alna-space-lg);
	background: var(--alna-light);
	border-radius: var(--alna-radius);
}

.alna-post__sidebar-title {
	font-size: var(--alna-size-card);
	margin-block-end: var(--alna-space-sm);
}

.alna-post__sidebar-block .alna-socials { margin-block-start: var(--alna-space-sm); }

.pagination,
.alna-page-links {
	display: flex;
	gap: var(--alna-space-md);
	justify-content: center;
	margin-block-start: var(--alna-space-section);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.alna-form { display: grid; gap: var(--alna-space-md); }

.alna-form__field { display: grid; gap: var(--alna-space-sm); }

.alna-form__field label {
	font-size: var(--alna-size-label);
	font-weight: var(--alna-weight-bold);
	letter-spacing: var(--alna-ls-eyebrow);
	text-transform: uppercase;
}

.alna-form input[type='text'],
.alna-form input[type='email'],
.alna-form textarea,
.alna-search__field {
	width: 100%;
	background: var(--alna-light);
	border: 1px solid var(--alna-primary);
	padding: var(--alna-space-sm) var(--alna-space-md);
	font-size: var(--alna-size-body);
	font-weight: var(--alna-weight-body);
}

.alna-form textarea { resize: vertical; }

/* Honeypot. Off-screen rather than display:none, which some bots detect. */
.alna-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.alna-form__message {
	padding: var(--alna-space-md);
	margin-block-end: var(--alna-space-md);
	border-inline-start: 4px solid var(--alna-primary);
	background: var(--alna-light);
}

.alna-form__message--error { border-inline-start-color: var(--alna-cta-hover); }

.alna-search { display: flex; gap: var(--alna-space-sm); }

/* ==========================================================================
   Footer
   ========================================================================== */

.alna-footer {
	background: var(--alna-text);
	color: var(--alna-light);
	padding-block: var(--alna-space-section);
	margin-block-start: var(--alna-space-section);
}

.alna-footer a { color: var(--alna-light); }
.alna-footer a:hover,
.alna-footer a:focus { color: var(--alna-nav-active); }

.alna-footer__inner {
	display: grid;
	gap: var(--alna-space-lg);
}

@media (min-width: 768px) {
	.alna-footer__inner {
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
	}
	.alna-footer__legal { grid-column: 1 / -1; }
}

.alna-socials,
.alna-footer__list {
	display: flex;
	gap: var(--alna-space-md);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alna-footer__legal {
	font-size: var(--alna-size-label);
	letter-spacing: var(--alna-ls-eyebrow);
	text-transform: uppercase;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

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

.alna-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--alna-light);
	color: var(--alna-text);
	padding: var(--alna-space-sm) var(--alna-space-md);
}

.alna-skip-link:focus {
	left: var(--alna-gutter);
	top: var(--alna-space-sm);
}

/* ==========================================================================
   Chrome and bands — added after comparing staging against live
   ========================================================================== */

/* Header utility strip */
.alna-topbar {
	background: var(--alna-nav);
	color: var(--alna-light);
}

.alna-topbar__inner {
	max-width: var(--alna-measure);
	margin-inline: auto;
	padding: var(--alna-space-sm) var(--alna-gutter);
}

/*
 * The address strip and the legal bar bookend the page and carry the least
 * important text on it. Both were at weight 900 with wide tracking, which gave
 * the furniture more visual mass than the content between them.
 */
.alna-topbar__address {
	display: flex;
	align-items: center;
	gap: var(--alna-space-sm);
	/* Matched to .alna-footer__legal's current values (micro, medium) — the
	   header and footer's least-important lines read as one treatment again,
	   at the smaller/bolder level the legal bar moved to. */
	font-size: var(--alna-size-micro);
	font-weight: var(--alna-weight-medium);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.alna-topbar__pin { color: var(--alna-cta); flex: 0 0 auto; }

.alna-header { background: var(--alna-light); }

.alna-header__inner { gap: var(--alna-space-lg); }

.alna-header .alna-nav { margin-inline-start: auto; }

/* Social pills, in the header and the footer */
.alna-socials { align-items: center; gap: var(--alna-space-sm); }

.alna-socials__link {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--alna-cta);
	color: var(--alna-light);
	transition: background var(--alna-transition);
}

.alna-socials__link:hover,
.alna-socials__link:focus { background: var(--alna-cta-hover); color: var(--alna-light); }

/* Two-column split. Media and body swap order via the modifier. */
.alna-split {
	display: grid;
	gap: var(--alna-space-lg);
	align-items: center;
}

@media (min-width: 768px) {
	.alna-split { grid-template-columns: 1fr 1fr; }
	.alna-split--body-first .alna-split__body { order: -1; }
}

.alna-split__media { margin: 0; }
.alna-split__media img { width: 100%; }

.alna-home__opening { font-family: var(--alna-font-display); }

/* Full-bleed colour bands */
.alna-band--accent { background: var(--alna-accent); }
.alna-band--accent h2 { text-transform: none; }

/*
 * The accent band carries very little content, so it needs more room than a
 * standard section or the copy sits jammed against the colour edges.
 */
.alna-band--accent { padding-block: calc(var(--alna-space-section) * 2); }

.alna-band--accent .alna-section__inner {
	padding-inline: var(--alna-space-lg);
	max-width: 74ch;
}

.alna-band--accent h2 { margin-block-end: var(--alna-space-md); }

/* The three pillar cards carry a hairline border on live */
.alna-columns__item {
	border: 1px solid var(--alna-primary);
	padding: var(--alna-space-lg) var(--alna-space-md);
	text-align: center;
	transition: border-color var(--alna-transition), transform var(--alna-transition);
}

.alna-columns__item:hover {
	border-color: var(--alna-cta);
	transform: translateY(-4px);
}

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

.alna-columns__item .alna-lottie { margin-inline: auto; }

/* Newsletter callout above the footer */
.alna-cta-band {
	background: var(--alna-secondary);
	padding-block: var(--alna-space-section);
	text-align: center;
}

.alna-cta-band__inner {
	max-width: var(--alna-measure);
	margin-inline: auto;
	padding-inline: var(--alna-gutter);
}

.alna-cta-band__title { color: var(--alna-light); text-transform: none; }
.alna-cta-band__text { color: var(--alna-light); margin-block: var(--alna-space-md); }
.alna-cta-band__actions { margin-block-start: var(--alna-space-lg); }

/* Footer */
.alna-footer {
	background: var(--alna-ink-deep);
	color: var(--alna-light);
	padding-block: var(--alna-space-section) 0;
	margin-block-start: 0;
}

.alna-footer__logo img { max-width: 170px; height: auto; }

.alna-footer__col > * + * { margin-block-start: var(--alna-space-md); }

.alna-footer__heading {
	font-size: var(--alna-size-card);
	color: var(--alna-light);
	text-transform: none;
}

.alna-footer__list { list-style: disc; padding-inline-start: 1.2em; }
.alna-footer__list li + li { margin-block-start: var(--alna-space-sm); }

/* Same logic as the "Getting Started" links and "Start here" — orange
   marks it as an action, not just footer furniture text. */
.alna-footer__story-link { color: var(--alna-cta); }
.alna-footer__story-link:hover,
.alna-footer__story-link:focus { color: var(--alna-cta-hover); }

.alna-footer__legal {
	background: var(--alna-primary);
	color: var(--alna-light);
	margin-block-start: var(--alna-space-section);
	padding: var(--alna-space-sm) var(--alna-gutter);
	text-align: center;
	font-size: var(--alna-size-label);
	font-weight: var(--alna-weight-bold);
	letter-spacing: var(--alna-ls-eyebrow);
}

.alna-footer__legal a { color: var(--alna-light); }


/* ==========================================================================
   Split — image beside text
   Added August 10, 2026. Replaces stacked image-over-text on SERVICES and
   CONTACT, which read as an accident rather than a layout.
   ========================================================================== */

.alna-split {
	display: grid;
	gap: var(--alna-space-lg);
	align-items: center;
}

@media (min-width: 768px) {
	.alna-split {
		grid-template-columns: 1fr 1fr;
		gap: var(--alna-space-lg);
	}

	/* Media on the right instead of the left. */
	.alna-split--reverse .alna-split__media { order: 2; }

	/* Heading in a narrow left rail, copy on the right. */
	.alna-split--tight { grid-template-columns: 1fr 2fr; align-items: start; }

	/* Columns aligned to the top, not centred — for a form beside a map,
	   where centring leaves the shorter column floating. */
	.alna-split--top { align-items: start; }
}

/* Unconstrained, a tall portrait crop renders at its full natural height and
   dwarfs the copy column beside it — cap it to a shorter, still-portrait
   ratio and crop to fill, rather than stretching to the source photo's own
   proportions. */
.alna-split__media img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }

/* The split already provides the gap; kill the stacked-layout margin. */
.alna-split .alna-services__image { margin-block-end: 0; }

/* Inside a split the benefits list is a single column — the split is the
   two columns. Outside one it stays two-up. */
.alna-benefits--stack { grid-template-columns: 1fr !important; }

/* ==========================================================================
   Image bands — full-bleed photo with copy laid over it
   Deliberately NOT called .alna-band: that name was already taken by the
   homepage's yellow accent band (.alna-band--accent). Reusing it applied this
   component's 49% navy veil over the yellow, rendering it olive.
   ========================================================================== */

/* A fixed height clipped these bands' own copy — Sauna's paragraph alone
   runs long enough to overflow 360px and get cut off mid-sentence. Fixed
   back to the hero's own pattern instead: the image and veil are
   absolutely positioned (out of flow, so they never influence the box's
   own height), and min-height is a floor, not a cap — the box grows to
   fit whatever text a given band actually carries, and the image fills
   however tall that turns out to be via object-fit: cover. */
.alna-imgband {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 360px;
	overflow: hidden;
}

/* A thin, light divider between bands — otherwise three full-bleed photos
   run edge to edge with nothing marking where one ends and the next
   starts. White (--alna-light), as suggested, since it's the one colour
   that reads against any of the three photos underneath it. */
.alna-imgband + .alna-imgband { border-top: 1px solid var(--alna-light); }

.alna-imgband__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.alna-imgband::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--alna-veil-strong);
	z-index: -1;
}

.alna-imgband__inner {
	max-width: var(--alna-measure);
	margin-inline: auto;
	padding: var(--alna-space-section) var(--alna-gutter);
	color: var(--alna-light);
	width: 100%;
}

.alna-imgband__title {
	color: var(--alna-light);
	margin-block-end: var(--alna-space-md);
}

.alna-imgband__text {
	color: var(--alna-light);
	font-size: var(--alna-size-small);
}

/* The bands carry the longest copy on the site, so they get a wider container
   than the 1140px used elsewhere — at 70ch the text stopped well short of the
   photograph's right edge and looked like a column that had lost its pair. */
.alna-imgband__inner { max-width: 1320px; }

/* ==========================================================================
   Inverted section — dark fill, accent heading
   ========================================================================== */

.alna-section--invert {
	background: var(--alna-text);
	color: var(--alna-light);
	padding-block: var(--alna-space-section);
}

.alna-section--invert h2,
.alna-section--invert .alna-split__aside {
	color: var(--alna-accent);
}

.alna-section--invert .alna-prose { color: var(--alna-light); }

/* ==========================================================================
   FAQ — two-column grid
   ========================================================================== */

.alna-faq__heading { margin-block-end: var(--alna-space-lg); }

.alna-faq__grid {
	display: grid;
	gap: var(--alna-space-lg) var(--alna-space-lg);
	align-items: start;
}

@media (min-width: 768px) {
	.alna-faq__grid { grid-template-columns: repeat(2, 1fr); }
}

/* The grid owns the rhythm now, so the stacked spacing has to go. */
.alna-faq__grid .alna-faq__item { margin-block-start: 0; }

.alna-faq__answer { font-size: var(--alna-size-small); }

/* ==========================================================================
   Footer sizing
   Three steps only, each shifted down one from the original pass: heading
   (small, was card), body (label, was small), legal (fine, was label —
   matched to .alna-topbar__address). Same three-step hierarchy, all smaller.
   ========================================================================== */

.alna-footer,
.alna-footer p,
.alna-footer a,
.alna-footer li {
	font-size: var(--alna-size-label);
	line-height: var(--alna-lh-body);
}

/* A column label, not a title. It was 22px at weight 900 — the same size as a
   blog card title — for three words of signposting. */
/*
 * Three real weight steps across the chrome: 900 for display headings, 700 for
 * navigation and labels, 300 for everything else. Nav, footer headings and the
 * copyright line were all at 900, so none of the furniture receded.
 */
.alna-footer__heading {
	font-family: var(--alna-font-body); /* label-like, not a display headline, despite the h2 tag */
	font-size: var(--alna-size-small); /* was Body — footer text overall sized down a step */
	font-weight: var(--alna-weight-medium);
	letter-spacing: 1px;
}

/* Align "Getting Started" with its own links: no list indent, and the first
   item's box starts where the heading's does. Block, not the flex-wrap row
   .alna-footer__list shares with .alna-socials — that flex gap was stacking
   with the li+li margin below and roughly tripling the space between links.
   margin-block-start is restored explicitly because margin: 0 here was also
   cancelling the heading-to-content gap the other two footer columns get
   from .alna-footer__col > * + *. */
.alna-footer__col--links .alna-footer__list {
	display: block;
	margin: 0;
	margin-block-start: var(--alna-space-md);
	padding: 0;
	list-style: none;
}

.alna-footer__col--links .alna-footer__list li + li {
	margin-block-start: var(--alna-space-sm);
}

/* Orange, not the default footer white — these are actions (they lead
   somewhere), same logic as the eyebrows and "Start here." Hover moves to
   the CTA hover shade rather than the unrelated nav-active gold, so the
   whole thing stays in the same colour family. */
.alna-footer__col--links .alna-footer__list a {
	line-height: var(--alna-lh-heading);
	color: var(--alna-cta);
}

.alna-footer__col--links .alna-footer__list a:hover,
.alna-footer__col--links .alna-footer__list a:focus {
	color: var(--alna-cta-hover);
}

/* The arrow is deliberately not underlined — a line drawn through the glyph
   itself reads as a rendering glitch, not a design choice, which is what
   made it look disconnected from the link rather than part of it. Making
   that explicit, plus a tight, fixed gap, is what reads as "one unit"
   instead of two. */
.alna-footer__col--links .alna-footer__list a::before {
	content: "→";
	display: inline-block;
	margin-inline-end: 6px;
	text-decoration: none;
}

.alna-footer__legal,
.alna-footer__legal p,
.alna-footer__legal a {
	/* Smaller and bolder than .alna-topbar__address after all — the two were
	   matched exactly for one round, but side by side the legal bar reads
	   better one step smaller (--alna-size-micro) and a step up in weight. */
	font-size: var(--alna-size-micro);
	font-weight: var(--alna-weight-medium);
	letter-spacing: 1px;
}


/* ==========================================================================
   Photo corners
   A small radius on every content photograph. Full-bleed elements — the hero
   and the image bands — stay square: a radius on something that runs edge to
   edge just looks like a mistake.
   ========================================================================== */

.alna-card__media img,
.alna-split__media img,
.alna-services__image,
.alna-post__thumb img,
.alna-page__thumb img,
.alna-prose img,
.alna-contact__map,
.alna-contact__map iframe {
	border-radius: var(--alna-radius);
}

/* Clip the child iframe to the rounded box. */
.alna-contact__map { overflow: hidden; }

/* ==========================================================================
   Design guidelines page
   Every swatch and specimen here is drawn with the theme's own custom
   properties, never a pasted hex, so the page cannot drift from the site.
   ========================================================================== */

.alna-dg__eyebrow {
	font-size: var(--alna-size-label);
	font-weight: var(--alna-weight-medium);
	letter-spacing: var(--alna-ls-label);
	text-transform: uppercase;
	color: var(--alna-cta);
	margin-block-end: var(--alna-space-sm);
}

.alna-dg__title { font-size: var(--alna-size-dg-hero); }

.alna-dg__lede {
	font-size: var(--alna-size-body);
	max-width: 62ch;
	margin-block-start: var(--alna-space-md);
}

.alna-dg__note {
	font-size: var(--alna-size-small);
	color: var(--alna-primary);
	max-width: 66ch;
	margin-block-start: var(--alna-space-sm);
}

.alna-dg__group {
	margin-block: var(--alna-space-lg) var(--alna-space-md);
	font-size: var(--alna-size-card);
}

.alna-dg__warn {
	margin-block-start: var(--alna-space-lg);
	padding: var(--alna-space-md);
	border-inline-start: 4px solid var(--alna-cta);
	background: var(--alna-light);
	font-size: var(--alna-size-small);
	max-width: 72ch;
}

/* ---- Hero: tagline + Draft/Built by/Sources meta row ---- */

.alna-dg__tagline {
	font-family: var(--alna-font-body);
	font-style: italic;
	font-size: var(--alna-size-body);
	color: var(--alna-primary);
	margin-block-start: var(--alna-space-md);
}

.alna-dg__link {
	color: var(--alna-cta);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.alna-dg__link:hover { color: var(--alna-cta-hover); }

.alna-dg__hero-meta {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: var(--alna-space-lg);
	margin-block-start: var(--alna-space-lg);
	padding-block-start: var(--alna-space-md);
	border-block-start: 1px solid var(--alna-primary);
}

/* The hero runs on the dark ink fill (.alna-section--invert, the same
   dark-section convention used sitewide) — its teal-on-light labels need
   to flip to light-on-dark, the same way .alna-dg__on-dark already
   flips .alna-dg__note further down this page. */
.alna-section--invert .alna-dg__eyebrow,
.alna-section--invert .alna-dg__tagline,
.alna-section--invert .alna-dg__hero-meta-label { color: var(--alna-light); }
/* The sitewide `h1 { color: var(--alna-text) }` rule targets the h1 element
   directly, so it wins over the section's own inherited light colour —
   inheritance only applies where nothing else directly matches. */
.alna-section--invert .alna-dg__title { color: var(--alna-light); }
.alna-section--invert .alna-dg__hero-meta { border-block-start-color: var(--alna-light); }
.alna-dg__hero-meta-col p { margin: 0; font-size: var(--alna-size-small); }
.alna-dg__hero-meta-label {
	font-size: var(--alna-size-fine);
	font-weight: var(--alna-weight-body);
	letter-spacing: var(--alna-ls-label);
	text-transform: uppercase;
	color: var(--alna-primary);
	margin-block-end: var(--alna-space-sm);
}
@media (max-width: 767px) {
	.alna-dg__hero-meta { grid-template-columns: 1fr; gap: var(--alna-space-sm); }
}

/* ---- Foundation: Purpose / Vision / Mission ---- */

.alna-dg__foundation-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--alna-space-lg);
	margin-block-start: var(--alna-space-lg);
	margin-block-end: var(--alna-space-lg);
}
.alna-dg__foundation-card {
	border-inline-start: 3px solid var(--alna-cta);
	padding-inline-start: var(--alna-space-md);
}
/* The card's own h3 would otherwise add .alna-dg__group's usual top margin —
   redundant here since it's the first thing in the card and the grid above
   already carries the gap down from the section heading. */
.alna-dg__foundation-card .alna-dg__group { margin-block-start: 0; }
@media (max-width: 767px) {
	.alna-dg__foundation-grid { grid-template-columns: 1fr; }
}

/* ---- Foundation: Core values — first card spans the row, the rest sit two across ---- */

/* 6 columns is the LCM of 2 and 3 — it's what lets a 2-card row and a
   3-card row both add up to the same full width instead of the shorter
   row trailing off short. */
.alna-dg__values-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--alna-space-md);
	margin-block-end: var(--alna-space-lg);
}
.alna-dg__value-card {
	background: var(--alna-page-bg);
	border: 1px solid var(--alna-veil-soft);
	border-radius: var(--alna-radius);
	padding: var(--alna-space-md);
}
.alna-dg__value-card--half  { grid-column: span 3; }  /* top row: 2 cards */
.alna-dg__value-card--third { grid-column: span 2; }  /* bottom row: 3 cards */
.alna-dg__value-title { font-weight: var(--alna-weight-medium); margin-block-end: var(--alna-space-sm); }
.alna-dg__value-desc { color: var(--alna-primary); font-size: var(--alna-size-small); }
@media (max-width: 900px) {
	.alna-dg__values-grid { grid-template-columns: repeat(2, 1fr); }
	.alna-dg__value-card--half,
	.alna-dg__value-card--third { grid-column: span 1; }
}
@media (max-width: 560px) { .alna-dg__values-grid { grid-template-columns: 1fr; } }

/* ---- Foundation: style & mood tags ---- */

.alna-dg__mood-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alna-space-sm);
	margin-block-start: var(--alna-space-md);
	margin-block-end: var(--alna-space-lg);
}
.alna-dg__mood-tag {
	background: var(--alna-light);
	border: 1px solid var(--alna-primary);
	border-radius: var(--alna-radius);
	padding: 6px var(--alna-space-md);
	font-size: var(--alna-size-small);
	color: var(--alna-primary);
}

/* ---- Logo ---- */

.alna-dg__logos {
	display: grid;
	gap: var(--alna-space-md);
	margin-block-start: var(--alna-space-lg);
}

@media (min-width: 768px) { .alna-dg__logos { grid-template-columns: 1fr 1fr; } }

.alna-dg__logo {
	margin: 0;
	padding: var(--alna-space-lg);
	/* Page-bg was invisible here for the same reason noted on .alna-dg__swatch
	   below — Page and Bone read almost identically, so the stroke needs the
	   veil tint instead of either literal surface colour. */
	border: 1px solid var(--alna-veil-soft);
	border-radius: var(--alna-radius);
	text-align: center;
}

.alna-dg__logo img { margin-inline: auto; max-width: 220px; height: auto; }

.alna-dg__logo figcaption {
	margin-block-start: var(--alna-space-md);
	font-size: var(--alna-size-label);
}

/* Bone, not Page — so the border above actually reads against the fill. */
.alna-dg__logo--light { background: var(--alna-light); }

.alna-dg__logo--dark { background: var(--alna-ink-deep); }
.alna-dg__logo--dark figcaption { color: var(--alna-light); }

/* ---- Colour ---- */
/* Card layout: a full-bleed colour block on top, details stacked below —
   matches the LKI guidelines page's swatch pattern. */

.alna-dg__swatches {
	display: grid;
	/* auto-fit (not auto-fill) collapses unused tracks so a short row's cards
	   stretch to the full measure width, flush with the page margin either side. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--alna-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alna-dg__swatch {
	display: flex;
	flex-direction: column;
	/* Page and Bone are 1.05:1 apart — a border in either is invisible against
	   the other, so the stroke uses the veil tint (ink at 17%) instead: a
	   genuinely visible hairline that still reads as light, not a hard edge. */
	border: 1px solid var(--alna-veil-soft);
	border-radius: var(--alna-radius);
	overflow: hidden;
	background: var(--alna-light);
	font-size: var(--alna-size-small);
}

.alna-dg__chip {
	inline-size: 100%;
	block-size: 110px;
	flex: 0 0 auto;
	border-radius: 0;
	border: 0;
	border-block-end: 1px solid var(--alna-page-bg);
}

/* Veil chips sit over an image so the transparency is visible. */
.alna-dg__chip--veil {
	background-image: linear-gradient(45deg, var(--alna-secondary) 25%, transparent 25%, transparent 75%, var(--alna-secondary) 75%),
					  linear-gradient(45deg, var(--alna-secondary) 25%, transparent 25%, transparent 75%, var(--alna-secondary) 75%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

.alna-dg__swatch-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--alna-space-md);
}

.alna-dg__role   { font-weight: var(--alna-weight-medium); }
.alna-dg__name   { color: var(--alna-primary); }
.alna-dg__hex    { font-variant-numeric: tabular-nums; font-size: var(--alna-size-label); }
.alna-dg__use    { color: var(--alna-primary); font-size: var(--alna-size-label); }

.alna-dg__swatch code {
	font-size: var(--alna-size-label);
	color: var(--alna-text);
	word-break: break-all;
}

/* ---- Type ---- */

.alna-dg__specimens {
	display: grid;
	gap: var(--alna-space-lg);
	margin-block-start: var(--alna-space-lg);
}

@media (min-width: 768px) { .alna-dg__specimens { grid-template-columns: 1fr 1fr; } }

.alna-dg__aa { display: block; line-height: 1; font-size: 84px; }
.alna-dg__aa--display { font-family: var(--alna-font-display); font-weight: var(--alna-weight-display); }
.alna-dg__aa--body    { font-family: var(--alna-font-body);    font-weight: var(--alna-weight-body); }

.alna-dg__scale { margin: 0; padding: 0; list-style: none; }

.alna-dg__scale-row {
	display: grid;
	gap: var(--alna-space-sm);
	padding-block: var(--alna-space-md);
	border-block-end: 1px solid var(--alna-page-bg);
	align-items: baseline;
}

@media (min-width: 768px) { .alna-dg__scale-row { grid-template-columns: 1fr 1fr; } }

.alna-dg__sample {
	/* font-family is set inline per row now — it renders whatever that size
	   token actually uses, not a fixed display face. */
	line-height: var(--alna-lh-heading);
	display: block;
}

.alna-dg__meta { font-size: var(--alna-size-label); display: grid; gap: 2px; }
.alna-dg__meta code { color: var(--alna-primary); }

/* ---- Spacing ---- */

.alna-dg__space { margin: var(--alna-space-lg) 0 0; padding: 0; list-style: none; display: grid; gap: var(--alna-space-sm); }

.alna-dg__space li {
	display: grid;
	grid-template-columns: 60px 12rem 1fr;
	gap: var(--alna-space-md);
	align-items: center;
	font-size: var(--alna-size-label);
}

.alna-dg__bar { block-size: 16px; background: var(--alna-cta); border-radius: 2px; display: block; }

.alna-dg__radius { margin-block-start: var(--alna-space-md); }

.alna-dg__radius { list-style: none; padding: 0; display: grid; gap: var(--alna-space-sm); font-size: var(--alna-size-small); }
.alna-dg__radius li { display: flex; align-items: center; gap: var(--alna-space-md); }

.alna-dg__radius-box {
	inline-size: 44px; block-size: 44px;
	background: var(--alna-secondary);
	border-radius: var(--alna-radius);
	flex: 0 0 auto;
}

.alna-dg__radius-box--square { border-radius: 0; }

/* ---- Buttons ---- */

.alna-dg__buttons { display: grid; gap: var(--alna-space-md); margin-block-start: var(--alna-space-lg); }

@media (min-width: 768px) { .alna-dg__buttons { grid-template-columns: 1fr 1fr; } }

.alna-dg__on-light,
.alna-dg__on-dark {
	padding: var(--alna-space-lg);
	border: 1px solid var(--alna-veil-soft);
	border-radius: var(--alna-radius);
}

.alna-dg__on-light { background: var(--alna-page-bg); }
.alna-dg__on-dark  { background: var(--alna-ink-deep); }
.alna-dg__on-dark .alna-dg__note { color: var(--alna-light); }