/* ==========================================================================
   Hugo Casino — huvudstilmall
   Ordning: typsnitt · tokens · bas · komponenter · verktyg
   ========================================================================== */

/* --- typsnitt (egen hosting) ---------------------------------------------- */
@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/letters/exo-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('/letters/exo-latin-800-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/letters/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/letters/inter-latin-600-normal.woff2') format('woff2');
}

/* --- tokens --------------------------------------------------------------- */
:root {
	/* färger */
	--tone-core: #fa9704;
	--tone-beacon: #794415;
	--tone-press: #5e3012;
	--tone-ground: #131516;
	--tone-surface-2: #1c1f21;
	--tone-type: #ffffff;
	--tone-quiet: #bdbdbd;
	--tone-rule: rgba(255, 255, 255, 0.11);
	--tone-line-strong: rgba(255, 255, 255, 0.24);
	--tone-blend-a: #dc7f35;
	--tone-ramp-end: #a65b1e;
	--tone-caution: #dc2626;

	/* rytm */
	--rhythm-2xs: 4px;
	--rhythm-xs: 12px;
	--rhythm-sm: 20px;
	--rhythm-md: 36px;
	--rhythm-lg: 56px;
	--rhythm-xl: 84px;
	--rhythm-2xl: 120px;
	--rhythm-3xl: 180px;

	/* geometri */
	--corner-2xs: 2px;
	--corner-xs: 4px;
	--corner-sm: 10px;
	--corner-md: 16px;
	--corner-lg: 28px;
	--corner-xl: 36px;
	--corner-2xl: 44px;
	--corner-3xl: 56px;
	--corner-pill: 9999px;
	--corner-orb: 50%;
	--depth-2xs: 0 1px 2px rgba(0, 0, 0, 0.18);
	--depth-xs: 0 2px 4px rgba(0, 0, 0, 0.24);
	--depth-sm: 0 4px 10px rgba(0, 0, 0, 0.3);
	--depth-md: 0 10px 28px rgba(0, 0, 0, 0.36);
	--depth-lg: 0 20px 48px rgba(0, 0, 0, 0.42);
	--depth-xl: 0 28px 64px rgba(0, 0, 0, 0.48);
	--depth-2xl: 0 34px 80px rgba(0, 0, 0, 0.52);
	--depth-3xl: 0 40px 96px rgba(0, 0, 0, 0.58);
	--hair-light: 1px;
	--hair-medium: 2px;
	--hair-wide: 3px;

	/* typografi */
	--font-lead: 'Exo', 'Trebuchet MS', sans-serif;
	--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--size-title: 60px;
	--size-display-2: 34px;
	--size-lg-2: 24px;
	--size-h4: 19px;
	--size-sm-2: 16px;
	--size-micro-head: 14px;
	--size-base: 16px;
	--size-small: 13px;
	--size-mini: 10px;
	--leading-dense: 1.16;
	--leading-normal: 1.5;
	--leading-loose: 1.65;
	--ls-packed: -0.02em;
	--ls-base: 0;
	--ls-open: 0.06em;
	--font-weight-normal: 400;
	--font-weight-medium: 600;
	--font-weight-heavy: 800;

	/* rörelse */
	--beat-snap: 101ms;
	--beat-steady: 210ms;
	--beat-calm: 438ms;
	--glide-release: cubic-bezier(0.16, 0.74, 0.48, 0.97);
	--glide-smooth: cubic-bezier(0.42, 0.08, 0.4, 0.89);
	--glide-spring: cubic-bezier(0.34, 1.4, 0.63, 1.25);

	/* mått */
	--bounds-page: 1420px;
	--bounds-text: 1420px;
	--bounds-inset-desktop: 48px;
	--bounds-edge-mid: 24px;
	--bounds-edge-narrow: 16px;
	--header-tall: 54px;
	--header-short: 54px;

	/* egna */
	--nook: 440px;
	--sec-y: 44px;
	--shell-w: calc(var(--bounds-page) + 2 * var(--bounds-inset-desktop));
	--gutter: var(--bounds-inset-desktop);
	--ink-warm: #f4d7b2;
}

@media (max-width: 940px) {
	:root {
		--gutter: var(--bounds-edge-mid);
		--sec-y: 38px;
	}
}

@media (max-width: 620px) {
	:root {
		--size-title: 36px;
		--size-display-2: 26px;
		--size-lg-2: 20px;
		--size-h4: 17px;
		--size-sm-2: 14px;
		--size-micro-head: 12px;
		--size-base: 15px;
		--size-small: 12px;
		--size-mini: 9px;
		--gutter: var(--bounds-edge-narrow);
		--sec-y: 34px;
	}
}

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

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
	scroll-padding-block-start: 120px;
}

body {
	margin: 0;
	background: var(--tone-ground);
	color: var(--tone-type);
	font-family: var(--font-body);
	font-size: var(--size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.trunk {
	flex: 1 0 auto;
	animation: trunkFade var(--beat-calm) var(--glide-release) backwards;
}

@keyframes trunkFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1 {
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: clamp(28px, 4.6vw, var(--size-title));
	line-height: var(--leading-dense);
	letter-spacing: var(--ls-packed);
	text-transform: uppercase;
}

h2 {
	font-family: var(--font-lead);
	font-weight: var(--font-weight-medium);
	font-size: clamp(23px, 2.4vw, var(--size-display-2));
	line-height: 1.24;
	letter-spacing: var(--ls-base);
}

h3 {
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: clamp(18px, 1.6vw, var(--size-lg-2));
	line-height: 1.3;
}

h4 {
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: var(--size-h4);
	line-height: 1.35;
}

p {
	margin: 0 0 var(--rhythm-sm);
}

a {
	color: var(--tone-blend-a);
}

img {
	max-width: 100%;
}

ul,
ol {
	margin: 0 0 var(--rhythm-sm);
	padding-inline-start: var(--rhythm-sm);
}

li {
	margin-block-end: var(--rhythm-2xs);
}

.trunk {
	display: block;
}

/* --- tillgänglighet ------------------------------------------------------- */
.skip-href {
	position: absolute;
	left: var(--rhythm-xs);
	top: -200px;
	z-index: 200;
	padding: var(--rhythm-xs) var(--rhythm-sm);
	background: var(--tone-core);
	color: var(--tone-ground);
	border-radius: var(--corner-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

.skip-href:not(:focus) {
	top: -200px !important;
}

.skip-href:focus {
	top: var(--rhythm-xs);
}

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

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

/* --- sigil: shapkan (HEAD-PILL) ------------------------------------------- */
.sigil {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--tone-ground);
	padding-block: 9px;
	padding-inline: var(--rhythm-sm);
	transition: padding-block var(--beat-steady) var(--glide-release);
}

.sigil.is-shrunk {
	padding-block: 4px;
	box-shadow: var(--depth-sm);
}

.sigil-pod {
	position: relative;
	height: 54px;
	max-width: var(--shell-w);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 18px;
	padding-inline: 18px;
	background: var(--tone-surface-2);
	color: var(--tone-type);
	border: var(--hair-light) solid var(--tone-rule);
	border-radius: var(--corner-pill);
	transition: height var(--beat-steady) var(--glide-release);
}

.sigil.is-shrunk .sigil-pod {
	height: 46px;
}

.sigil-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--tone-type);
	background: var(--tone-surface-2);
}

.sigil-brand-orb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--corner-orb);
	background: var(--tone-ground);
	border: var(--hair-medium) solid var(--tone-core);
	overflow: hidden;
}

.sigil-brand-media {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	object-fit: contain;
}

.sigil.is-shrunk .sigil-brand-orb {
	width: 38px;
	height: 38px;
}

.sigil.is-shrunk .sigil-brand-media {
	width: 32px;
	height: 32px;
}

.sigil-brand-words {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	background: var(--tone-surface-2);
	color: var(--tone-type);
}

.sigil-brand-top {
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: 19px;
	letter-spacing: var(--ls-packed);
	text-transform: uppercase;
}

.sigil-brand-kicker {
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tone-core);
	background: var(--tone-surface-2);
}

.sigil-menu-tap {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	margin-inline-start: auto;
	padding: 0;
	background: var(--tone-surface-2);
	color: var(--tone-type);
	border: var(--hair-light) solid var(--tone-line-strong);
	border-radius: var(--corner-pill);
	cursor: pointer;
}

.sigil-lines {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: var(--tone-type);
	border-radius: var(--corner-pill);
}

.sigil-lines::before {
	content: '';
	position: absolute;
	left: 0;
	top: -6px;
	width: 18px;
	height: 2px;
	background: var(--tone-type);
	border-radius: var(--corner-pill);
}

.sigil-index {
	flex: 0 1 auto;
	overflow: visible;
}

.sigil-set {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sigil-piece {
	position: relative;
	margin: 0;
	flex-shrink: 0;
}

.sigil-piece[hidden] {
	display: none;
}

.sigil-piece-href {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 34px;
	white-space: nowrap;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--tone-type);
	background: var(--tone-surface-2);
	letter-spacing: var(--ls-base);
}

.sigil-piece-href::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 4px;
	height: 2px;
	background: var(--tone-core);
	transition: right var(--beat-steady) var(--glide-release);
}

.sigil-piece-href:hover::after,
.sigil-piece-href[aria-current='page']::after {
	right: 0;
}

.sigil-more {
	position: relative;
	margin: 0;
	flex-shrink: 0;
}

.sigil-more[hidden] {
	display: none;
}

.sigil-more-tap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--tone-type);
	background: var(--tone-ground);
	border: var(--hair-light) solid var(--tone-rule);
	border-radius: var(--corner-pill);
	cursor: pointer;
}

.sigil-more-tap::after {
	content: '';
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--tone-core);
	border-bottom: 2px solid var(--tone-core);
	transform: rotate(45deg) translate(-2px, -2px);
}

.sigil-more-pane {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 30;
	min-width: 240px;
	max-height: 62vh;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--tone-surface-2);
	color: var(--tone-type);
	border: var(--hair-light) solid var(--tone-rule);
	border-radius: var(--corner-md);
	box-shadow: var(--depth-md);
}

.sigil-more-pane.is-open {
	display: block;
}

.sigil-more-pane .sigil-piece {
	display: block;
	width: 100%;
}

.sigil-more-pane .sigil-piece-href {
	display: flex;
	width: 100%;
	height: auto;
	padding: 10px 12px;
	border-radius: var(--corner-sm);
	white-space: normal;
	background: var(--tone-surface-2);
}

.sigil-more-pane .sigil-piece-href::after {
	content: none;
}

.sigil-more-pane .sigil-piece-href:hover {
	background: var(--tone-ground);
	color: var(--tone-core);
}

.sigil-mark {
	display: inline-block;
	width: 26px;
	height: 17px;
	flex-shrink: 0;
	border-radius: var(--corner-2xs);
	background-color: #005293;
	background-image: linear-gradient(90deg, transparent 0 8px, #fecb00 8px 12px, transparent 12px),
		linear-gradient(180deg, transparent 0 7px, #fecb00 7px 11px, transparent 11px);
}

.sigil-buttons {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	flex-shrink: 0;
}

.sigil-quiet-btn {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	white-space: nowrap;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--tone-type);
	background: var(--tone-surface-2);
	border: var(--hair-light) solid var(--tone-line-strong);
	border-radius: var(--corner-pill);
	transition: background var(--beat-snap) var(--glide-release), color var(--beat-snap) var(--glide-release);
}

.sigil-quiet-btn:hover {
	transform: scale(1.015);
	background: var(--tone-beacon);
	color: var(--tone-type);
	border-color: var(--tone-core);
}

.sigil-btn {
	white-space: nowrap;
	flex-shrink: 0;
	font-size: 14px;
	min-height: 44px;
	padding-inline: var(--rhythm-sm);
}

.sigil-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90;
	margin-block-start: 8px;
	padding: var(--rhythm-xs);
	background: var(--tone-surface-2);
	color: var(--tone-type);
	border: var(--hair-light) solid var(--tone-rule);
	border-radius: var(--corner-lg);
	box-shadow: var(--depth-lg);
	max-height: 72vh;
	overflow-y: auto;
}

.sigil-panel.is-open {
	display: block;
}

.sigil-panel-set {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sigil-panel-piece {
	margin: 0;
	border-block-end: var(--hair-light) solid var(--tone-rule);
}

.sigil-panel-piece:last-child {
	border-block-end: 0;
}

.sigil-panel-href {
	display: block;
	padding: 13px 14px;
	min-height: 44px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	color: var(--tone-type);
	background: var(--tone-surface-2);
}

.sigil-panel-href[aria-current='page'] {
	color: var(--tone-core);
	background: var(--tone-ground);
}

@media (max-width: 1200px) {
	.sigil-quiet-btn {
		display: none;
	}

	.sigil-set {
		gap: 18px;
	}
}

@media (max-width: 940px) {
	.sigil-index,
	.sigil-mark {
		display: none;
	}

	.sigil-menu-tap {
		display: inline-flex;
		order: 3;
	}

	.sigil-buttons {
		order: 2;
		margin-inline-start: auto;
	}

	.sigil-pod {
		gap: 12px;
	}
}

@media (max-width: 620px) {
	.sigil {
		padding-inline: var(--rhythm-xs);
	}

	.sigil-brand-words {
		display: none;
	}

	.sigil-pod {
		padding-inline: 10px;
		gap: 8px;
	}

	.sigil-btn {
		font-size: 13px;
		padding-inline: var(--rhythm-xs);
	}
}

@media (max-width: 430px) {
	.sigil-btn-tail {
		display: none;
	}
}

/* --- hutch: första skärmen (HERO-08) -------------------------------------- */
.hutch {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(540px, calc(100vh - 96px), 720px);
	background-color: var(--tone-ground);
	background-image: url('/gallery/picture.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.hutch-veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(0deg, rgba(19, 21, 22, 0.94) 0%, rgba(19, 21, 22, 0.58) 55%, rgba(19, 21, 22, 0.78) 100%);
}

.hutch-guts {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--rhythm-lg);
	text-align: center;
}

.hutch-kicker {
	display: inline-block;
	margin-block-end: var(--rhythm-xs);
	font-size: var(--size-mini);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	color: var(--ink-warm);
	background: rgba(19, 21, 22, 0.75);
	padding: 6px 14px;
	border-radius: var(--corner-pill);
	border: var(--hair-light) solid var(--tone-line-strong);
}

.hutch-top {
	max-width: 18ch;
	margin-inline: auto;
	color: var(--tone-type);
}

.hutch-deck {
	max-width: var(--nook);
	margin: var(--rhythm-sm) auto 0;
	font-size: var(--size-sm-2);
	line-height: var(--leading-loose);
	color: var(--ink-warm);
}

.hutch-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rhythm-xs);
	margin-block-start: var(--rhythm-sm);
	font-size: var(--size-small);
	color: var(--tone-quiet);
}

.hutch-extra span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tone-quiet);
	background: rgba(19, 21, 22, 0.7);
	padding: 4px 12px;
	border-radius: var(--corner-pill);
}

.hutch-hint {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 2;
	width: 14px;
	height: 14px;
	margin-inline-start: -7px;
	border-right: 2px solid var(--tone-core);
	border-bottom: 2px solid var(--tone-core);
	transform: rotate(45deg);
}

@media (max-width: 940px) {
	.hutch {
		min-height: clamp(460px, calc(100svh - 90px), 620px);
	}

	.hutch-top {
		max-width: none;
	}
}

/* --- tile: brödsmulor (BREAD-02) ------------------------------------------ */
.tile {
	background: var(--tone-ground);
	padding-block: var(--rhythm-sm);
}

.tile-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tile-set {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile-piece {
	margin: 0;
}

.tile-href,
.tile-now {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: var(--corner-pill);
	font-size: var(--size-mini);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	text-decoration: none;
}

.tile-href {
	color: var(--tone-quiet);
	background: var(--tone-surface-2);
}

.tile-href:hover {
	color: var(--tone-ground);
	background: var(--tone-core);
}

.tile-now {
	color: var(--tone-type);
	background: var(--tone-beacon);
}

/* --- mast: sidhuvud för текст-sidor (PHEAD-04) ---------------------------- */
.mast {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
	border-block-end: var(--hair-light) solid var(--tone-rule);
}

.mast-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--rhythm-lg);
	align-items: end;
}

.mast-kicker {
	display: block;
	margin-block-end: var(--rhythm-xs);
	font-size: var(--size-mini);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	color: var(--tone-core);
	background: var(--tone-ground);
}

.mast-top {
	color: var(--tone-type);
}

.mast-words {
	margin: 0;
	font-size: var(--size-sm-2);
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

@media (max-width: 940px) {
	.mast-guts {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rhythm-sm);
	}
}

/* --- chevron: brödtext (PROSE-07) ----------------------------------------- */
.chevron {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
}

.chevron-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	counter-reset: section;
}

.chevron-top {
	margin-block-start: var(--rhythm-md);
	margin-block-end: var(--rhythm-xs);
	font-size: clamp(24px, 2.7vw, 39px);
	font-weight: var(--font-weight-heavy);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.chevron-top:first-child {
	margin-block-start: 0;
}

.chevron-top::before {
	counter-increment: section;
	content: counter(section, decimal-leading-zero);
	margin-inline-end: var(--rhythm-xs);
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	color: var(--tone-core);
}

.chevron-guts p {
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

.chevron-guts p strong {
	color: var(--tone-type);
	background: var(--tone-ground);
}

.chevron-guts p a,
.chevron-guts li a {
	color: var(--tone-blend-a);
	background: var(--tone-ground);
	background-image: linear-gradient(var(--tone-beacon), var(--tone-beacon));
	background-repeat: no-repeat;
	background-size: 100% 0;
	background-position: 0 100%;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: background-size var(--beat-steady) var(--glide-release);
}

.chevron-guts p a:hover,
.chevron-guts li a:hover {
	background-size: 100% 100%;
	color: var(--tone-type);
}

.chevron-set {
	margin-block-end: var(--rhythm-sm);
	color: var(--tone-quiet);
	background: var(--tone-ground);
	line-height: var(--leading-loose);
}

.chevron-set li {
	margin-block-end: var(--rhythm-2xs);
}

.chevron-set li::marker {
	color: var(--tone-core);
}

.chevron-figure {
	margin: var(--rhythm-md) 0;
	padding: 0;
	background: var(--tone-ground);
	text-align: center;
}

.chevron-figure img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 52vh;
	margin-inline: auto;
	border-radius: var(--corner-lg);
	border: var(--hair-light) solid var(--tone-rule);
}

/* --- nave: numrerad lista (GRID-02) --------------------------------------- */
.nave {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
	border-block-start: var(--hair-light) solid var(--tone-rule);
}

.nave-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nave-top {
	margin-block-end: var(--rhythm-sm);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.nave-set {
	display: block;
}

.nave-piece {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	gap: var(--rhythm-sm);
	padding-block: var(--rhythm-md);
	border-block-end: var(--hair-light) solid var(--tone-rule);
	background: var(--tone-ground);
}

.nave-piece:last-of-type {
	border-block-end: 0;
}

.nave-num {
	align-self: start;
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: clamp(34px, 4vw, 56px);
	line-height: 1;
	letter-spacing: var(--ls-packed);
	color: var(--tone-core);
	background: var(--tone-ground);
	transition: transform var(--beat-steady) var(--glide-release);
	transform-origin: left top;
}

.nave-piece:hover .nave-num {
	transform: scale(1.1);
}

.nave-piece:hover {
	box-shadow: var(--depth-md);
}

.nave-meat {
	min-width: 0;
}

.nave-piece-top {
	margin-block-end: var(--rhythm-2xs);
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.nave-words {
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

@media (max-width: 620px) {
	.nave-piece {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: var(--rhythm-xs);
		padding-block: var(--rhythm-sm);
	}
}

/* --- rafter: tabell (TABLE-04) -------------------------------------------- */
.rafter {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
}

.rafter-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.rafter-top {
	margin-block-end: var(--rhythm-2xs);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.rafter-say {
	margin-block-end: var(--rhythm-sm);
	font-size: var(--size-small);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

.rafter-scroll {
	overflow-x: auto;
	border-radius: var(--corner-md);
	border: var(--hair-light) solid var(--tone-rule);
	background: var(--tone-surface-2);
}

.rafter-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--size-small);
	background: var(--tone-surface-2);
	color: var(--tone-type);
}

.rafter-grid thead th {
	padding: var(--rhythm-xs) var(--rhythm-sm);
	text-align: start;
	font-family: var(--font-lead);
	font-size: var(--size-micro-head);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-type);
	background: var(--tone-beacon);
	border-block-end: var(--hair-medium) solid var(--tone-core);
}

.rafter-grid tbody th {
	width: 26%;
	padding: var(--rhythm-xs) var(--rhythm-sm);
	text-align: start;
	font-weight: var(--font-weight-medium);
	color: var(--tone-ground);
	background: var(--tone-core);
	border-inline-end: 4px solid var(--tone-press);
	border-block-end: var(--hair-light) solid rgba(19, 21, 22, 0.25);
}

.rafter-grid tbody td {
	padding: var(--rhythm-xs) var(--rhythm-sm);
	color: var(--tone-quiet);
	background: var(--tone-surface-2);
	border-block-end: var(--hair-light) solid var(--tone-rule);
}

@media (max-width: 620px) {
	.rafter-grid {
		font-size: var(--size-mini);
	}

	.rafter-grid thead th,
	.rafter-grid tbody th,
	.rafter-grid tbody td {
		padding: 8px 10px;
	}
}

/* --- cresset: omdömen (REV-02) -------------------------------------------- */
.cresset {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
	border-block-start: var(--hair-light) solid var(--tone-rule);
}

.cresset-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.cresset-top {
	margin-block-end: var(--rhythm-sm);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.cresset-piece {
	position: relative;
	padding-block: var(--rhythm-md);
	padding-inline-start: 64px;
	border-block-end: var(--hair-light) solid var(--tone-rule);
	background: var(--tone-ground);
}

.cresset-piece:last-of-type {
	border-block-end: 0;
}

.cresset-piece::before {
	content: '\201C';
	position: absolute;
	left: 0;
	top: 18px;
	font-family: var(--font-lead);
	font-size: 72px;
	line-height: 1;
	color: var(--tone-core);
	opacity: 0.55;
}

.cresset-quote {
	margin: 0;
	background: var(--tone-ground);
}

.cresset-quote p {
	margin: 0;
	font-family: var(--font-lead);
	font-style: italic;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.42;
	color: var(--tone-type);
	background: var(--tone-ground);
}

.cresset-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-xs);
	margin-block-start: var(--rhythm-xs);
	font-size: var(--size-small);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

.cresset-byname {
	font-style: normal;
	font-weight: var(--font-weight-medium);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.cresset-stars {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	gap: 2px;
	letter-spacing: 0.08em;
	color: var(--tone-core);
	background: var(--tone-ground);
}

.cresset-extra time {
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

@media (max-width: 620px) {
	.cresset-piece {
		padding-inline-start: 34px;
	}

	.cresset-piece::before {
		font-size: 44px;
		top: 22px;
	}
}

/* --- lectern: frågor (FAQ-01) --------------------------------------------- */
.lectern {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
}

.lectern-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.lectern-top {
	margin-block-end: var(--rhythm-sm);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.lectern-set {
	margin: 0;
	padding: 0;
	background: var(--tone-ground);
}

.lectern-piece {
	border-block-end: var(--hair-light) solid var(--tone-rule);
	background: var(--tone-ground);
}

.lectern-piece dt {
	margin: 0;
}

.lectern-ask-top {
	margin: 0;
	font-size: var(--size-sm-2);
}

.lectern-ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhythm-xs);
	width: 100%;
	min-height: 56px;
	padding: var(--rhythm-xs) 0;
	text-align: start;
	font-family: var(--font-body);
	font-size: var(--size-sm-2);
	font-weight: var(--font-weight-medium);
	color: var(--tone-type);
	background: var(--tone-ground);
	border: 0;
	cursor: pointer;
	transition: color var(--beat-snap) var(--glide-release);
}

.lectern-ask:hover {
	color: var(--tone-core);
}

.lectern-sign {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--tone-core);
	background: var(--tone-ground);
	transition: transform var(--beat-steady) var(--glide-release);
}

.lectern-sign::before,
.lectern-sign::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	background: var(--tone-core);
}

.lectern-sign::after {
	transform: rotate(90deg);
}

.lectern-ask[aria-expanded='true'] .lectern-sign {
	transform: rotate(45deg);
}

.lectern-answer {
	display: grid;
	grid-template-rows: 0fr;
	margin: 0;
	background: var(--tone-ground);
	transition: grid-template-rows var(--beat-steady) var(--glide-smooth);
}

.lectern-answer.is-open {
	grid-template-rows: 1fr;
}

.lectern-meat {
	overflow: hidden;
}

.lectern-meat p {
	margin: 0;
	padding-block: var(--rhythm-xs) var(--rhythm-sm);
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

/* --- quatrefoil: uppmaning (CTA-05) --------------------------------------- */
.quatrefoil {
	background-color: var(--tone-surface-2);
	background-image: linear-gradient(135deg, #1c1f21 0%, #2c1d11 100%);
	padding-block: var(--sec-y);
	border-block: var(--hair-light) solid var(--tone-rule);
}

.quatrefoil-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
}

.quatrefoil-top {
	color: var(--tone-type);
}

.quatrefoil-words {
	max-width: var(--nook);
	margin: var(--rhythm-xs) auto var(--rhythm-sm);
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
}

.quatrefoil-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rhythm-xs);
}

.quatrefoil-second {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--rhythm-md);
	text-decoration: none;
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: var(--size-micro-head);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-type);
	background: var(--tone-surface-2);
	border: var(--hair-light) solid var(--tone-line-strong);
	border-radius: var(--corner-md);
	transition: background var(--beat-snap) var(--glide-release), color var(--beat-snap) var(--glide-release);
}

.quatrefoil-second:hover {
	transform: scale(1.015);
	background: var(--tone-beacon);
	color: var(--tone-type);
	border-color: var(--tone-core);
}

.quatrefoil-fine {
	display: block;
	max-width: 62ch;
	margin: var(--rhythm-sm) auto 0;
	font-size: var(--size-small);
	color: var(--tone-quiet);
}

.quatrefoil-fine b {
	color: var(--ink-warm);
}

/* --- mantle: erbjudandeblock (INLINE-CTA-07) ------------------------------ */
.mantle {
	display: block;
	margin-block: var(--rhythm-md);
	padding: var(--rhythm-md) var(--rhythm-sm);
	text-align: center;
	background: var(--tone-surface-2);
	border: var(--hair-light) solid var(--tone-rule);
	border-radius: var(--corner-lg);
}

.mantle-core {
	max-width: 540px;
	margin-inline: auto;
}

.mantle-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-block-end: var(--rhythm-xs);
	border-radius: var(--corner-orb);
	color: var(--tone-core);
	background: var(--tone-ground);
	border: var(--hair-light) solid var(--tone-rule);
}

.mantle-glyph svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.mantle-top {
	margin-block-end: var(--rhythm-2xs);
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	color: var(--tone-type);
	background: var(--tone-surface-2);
}

.mantle-words {
	margin-block-end: var(--rhythm-sm);
	font-size: var(--size-small);
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
	background: var(--tone-surface-2);
}

.mantle--slim {
	margin-block: var(--rhythm-sm);
	padding: var(--rhythm-sm);
	text-align: start;
	background: var(--tone-surface-2);
}

.mantle--slim .mantle-core {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhythm-sm);
	max-width: none;
}

.mantle--slim .mantle-words {
	margin-block-end: 0;
	font-size: var(--size-small);
}

@media (max-width: 620px) {
	.mantle--slim .mantle-core {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* --- arbor: författarrad (BYLINE-05) -------------------------------------- */
.arbor {
	display: block;
	background: var(--tone-beacon);
	border-block: var(--hair-light) solid var(--tone-rule);
}

.arbor-wrap {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--rhythm-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhythm-sm);
}

.arbor-who {
	display: flex;
	align-items: center;
	gap: var(--rhythm-xs);
	min-width: 0;
}

.arbor-pic {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--corner-orb);
	object-fit: cover;
	border: var(--hair-medium) solid var(--tone-core);
}

.arbor-words {
	min-width: 0;
	background: var(--tone-beacon);
}

.arbor-byname {
	display: block;
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: var(--size-h4);
	color: var(--tone-type);
	background: var(--tone-beacon);
}

.arbor-byname a {
	color: var(--tone-type);
	background: var(--tone-beacon);
	text-decoration: none;
}

.arbor-byname a:hover {
	color: var(--ink-warm);
}

.arbor-post {
	display: block;
	font-size: var(--size-small);
	color: var(--ink-warm);
	background: var(--tone-beacon);
}

.arbor-more-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--rhythm-sm);
	flex-shrink: 0;
	text-decoration: none;
	font-size: var(--size-small);
	font-weight: var(--font-weight-medium);
	color: var(--tone-ground);
	background: var(--ink-warm);
	border-radius: var(--corner-pill);
	transition: background var(--beat-snap) var(--glide-release);
}

.arbor-more-btn:hover {
	background: var(--tone-core);
	color: var(--tone-ground);
}

@media (max-width: 620px) {
	.arbor-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.arbor-more-btn {
		justify-content: center;
	}
}

/* --- strip: författarkort (AUTH-06) --------------------------------------- */
.strip {
	background-color: var(--tone-beacon);
	background-image: linear-gradient(135deg, #794415 0%, #131516 100%);
	padding-block: var(--sec-y);
}

.strip-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--rhythm-md);
	align-items: start;
}

.strip-pic {
	width: 240px;
	height: auto;
	max-width: 100%;
	align-self: start;
	border-radius: var(--corner-lg);
	box-shadow: var(--depth-lg);
	border: var(--hair-light) solid var(--tone-line-strong);
}

.strip-kicker {
	display: block;
	margin-block-end: var(--rhythm-2xs);
	font-size: var(--size-small);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--ink-warm);
}

.strip-top {
	margin-block-end: var(--rhythm-xs);
	font-size: clamp(30px, 4vw, 52px);
	color: var(--tone-type);
}

.strip-words {
	line-height: var(--leading-loose);
	color: var(--tone-type);
}

.strip-skill {
	margin: var(--rhythm-xs) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.strip-skill li {
	margin: 0;
	padding: 7px 14px;
	font-size: var(--size-small);
	border-radius: var(--corner-pill);
	color: var(--tone-ground);
	background: var(--ink-warm);
}

.strip-more {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
}

.strip-more-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.strip-more-top {
	margin-block-end: var(--rhythm-xs);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.strip-more-set {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--rhythm-xs);
}

.strip-more-set li {
	margin: 0;
}

.strip-more-href {
	display: block;
	height: 100%;
	padding: var(--rhythm-xs) var(--rhythm-sm);
	text-decoration: none;
	color: var(--tone-type);
	background: var(--tone-surface-2);
	border: var(--hair-light) solid var(--tone-rule);
	border-radius: var(--corner-md);
	transition: box-shadow var(--beat-steady) var(--glide-release);
}

.strip-more-href:hover {
	box-shadow: var(--depth-md);
	color: var(--tone-core);
}

@media (max-width: 940px) {
	.strip-guts {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.strip-pic {
		width: 200px;
	}
}

/* --- frame: juridiska sidor (LEGAL-01) ------------------------------------ */
.frame {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
}

.frame-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.frame-time {
	display: block;
	margin-block-end: var(--rhythm-sm);
	font-size: var(--size-mini);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

.frame-part {
	padding-block-start: var(--rhythm-sm);
	border-block-start: var(--hair-light) solid var(--tone-rule);
	background: var(--tone-ground);
}

.frame-part:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.frame-part-top {
	margin-block-end: var(--rhythm-xs);
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.frame-part p {
	line-height: var(--leading-loose);
	color: var(--tone-quiet);
	background: var(--tone-ground);
}

.frame-help {
	margin-block-start: var(--rhythm-md);
	padding: var(--rhythm-sm);
	border-radius: var(--corner-md);
	background: var(--tone-surface-2);
	border: var(--hair-light) solid var(--tone-rule);
}

.frame-help-top {
	margin-block-end: var(--rhythm-xs);
	color: var(--tone-type);
	background: var(--tone-surface-2);
}

.frame-help-set {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rhythm-xs);
}

.frame-help-set li {
	display: flex;
	align-items: flex-start;
	gap: var(--rhythm-xs);
	margin: 0;
	color: var(--tone-quiet);
	background: var(--tone-surface-2);
}

.frame-help-set svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-block-start: 2px;
	fill: var(--tone-core);
}

.frame-warn {
	margin-block-start: var(--rhythm-md);
	padding: var(--rhythm-sm);
	border-inline-start: var(--hair-wide) solid var(--tone-caution);
	border-radius: var(--corner-xs);
	font-size: var(--size-small);
	color: var(--ink-warm);
	background: #2a1414;
}

/* --- filigree: kontaktformulär (FORM-05) ---------------------------------- */
.filigree {
	background: var(--tone-ground);
	padding-block: var(--sec-y);
}

.filigree-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.filigree-top {
	margin-block-end: var(--rhythm-xs);
	color: var(--tone-type);
	background: var(--tone-ground);
}

.filigree-box {
	padding: var(--rhythm-md);
	border: var(--hair-medium) solid var(--tone-beacon);
	border-radius: var(--corner-md);
	background: var(--tone-ground);
}

.filigree-cell {
	display: block;
	margin-block-end: var(--rhythm-sm);
}

.filigree-mark {
	display: block;
	margin-block-end: 6px;
	font-size: var(--size-small);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-core);
	background: var(--tone-ground);
}

.filigree-cell input,
.filigree-cell textarea {
	width: 100%;
	padding: var(--rhythm-xs) 0;
	font-family: var(--font-body);
	font-size: var(--size-sm-2);
	color: var(--tone-type);
	background: var(--tone-ground);
	border: 0;
	border-block-end: var(--hair-light) solid var(--tone-line-strong);
	border-radius: 0;
}

.filigree-cell textarea {
	min-height: 130px;
	resize: vertical;
}

.filigree-cell input:focus,
.filigree-cell textarea:focus {
	outline: 2px solid var(--tone-core);
	outline-offset: 3px;
}

.filigree-send {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--rhythm-md);
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: var(--size-micro-head);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-ground);
	background: var(--tone-core);
	border: 0;
	border-radius: var(--corner-md);
	cursor: pointer;
	transition: transform var(--beat-snap) var(--glide-spring), background var(--beat-snap) var(--glide-release);
}

.filigree-send:hover {
	transform: scale(1.015);
	background: var(--ink-warm);
	color: var(--tone-ground);
}

.filigree-done {
	display: none;
	margin-block-start: var(--rhythm-sm);
	padding: var(--rhythm-xs) var(--rhythm-sm);
	border-radius: var(--corner-sm);
	color: var(--tone-ground);
	background: var(--tone-core);
}

.filigree-done.is-open {
	display: block;
}

/* --- deck: 404 (ERR-04) --------------------------------------------------- */
.deck {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(520px, calc(100vh - 200px), 700px);
	background-color: var(--tone-ground);
	background-image: url('/gallery/picture.webp');
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.deck-veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(19, 21, 22, 0.6) 0%, rgba(19, 21, 22, 0.92) 100%);
}

.deck-guts {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
}

.deck-top {
	max-width: var(--nook);
	margin-inline: auto;
	color: var(--tone-type);
}

.deck-words {
	max-width: var(--nook);
	margin: var(--rhythm-sm) auto;
	color: var(--ink-warm);
	background: rgba(19, 21, 22, 0.6);
	padding: var(--rhythm-xs);
	border-radius: var(--corner-sm);
}

.deck-home {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--rhythm-md);
	text-decoration: none;
	font-family: var(--font-lead);
	font-weight: var(--font-weight-heavy);
	font-size: var(--size-micro-head);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-ground);
	background: var(--tone-core);
	border-radius: var(--corner-md);
	transition: transform var(--beat-snap) var(--glide-spring);
}

.deck-home:hover {
	transform: scale(1.015);
	background: var(--ink-warm);
	color: var(--tone-ground);
}

/* --- canopy: sidfot (FOOT-09) --------------------------------------------- */
.canopy {
	flex-shrink: 0;
	background: var(--tone-core);
}

.canopy-warn {
	background: var(--tone-ground);
	color: var(--tone-type);
	padding-block: var(--rhythm-xs);
	text-align: center;
	font-size: var(--size-small);
	border-block-end: var(--hair-wide) solid var(--tone-press);
}

.canopy-warn-guts {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	background: var(--tone-ground);
	color: var(--tone-type);
}

.canopy-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 24px;
	margin-inline-end: 10px;
	padding: 0 8px;
	border-radius: var(--corner-xs);
	font-weight: var(--font-weight-medium);
	font-size: var(--size-small);
	color: var(--tone-type);
	background: var(--tone-caution);
}

.canopy-warn a {
	color: var(--ink-warm);
	background: var(--tone-ground);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.canopy-warn a:hover {
	color: var(--tone-core);
}

.canopy-band {
	width: 100%;
	max-width: var(--shell-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--rhythm-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhythm-sm);
	background: var(--tone-core);
	color: var(--tone-ground);
}

.canopy-brand {
	display: inline-flex;
	flex-shrink: 0;
	background: var(--tone-core);
}

.canopy-brand-media {
	height: 36px;
	width: auto;
	flex-shrink: 0;
}

.canopy-index {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-xs);
	background: var(--tone-core);
}

.canopy-index a {
	font-size: var(--size-small);
	letter-spacing: var(--ls-open);
	text-decoration: none;
	color: var(--tone-ground);
	background: var(--tone-core);
	border-block-end: var(--hair-medium) solid transparent;
}

.canopy-index a:hover {
	border-block-end-color: var(--tone-ground);
	color: var(--tone-ground);
}

.canopy-fine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-xs);
	background: var(--tone-core);
}

.canopy-fine a {
	font-size: var(--size-mini);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tone-ground);
	background: var(--tone-core);
}

.canopy-fine a:hover {
	text-decoration: underline;
}

.canopy-sign {
	flex-shrink: 0;
	font-size: var(--size-mini);
	letter-spacing: var(--ls-open);
	text-transform: uppercase;
	color: var(--tone-ground);
	background: var(--tone-core);
}

@media (max-width: 1200px) {
	.canopy-band {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

@media (max-width: 620px) {
	.canopy-band {
		gap: var(--rhythm-xs);
	}

	.canopy-brand-media {
		height: 30px;
	}
}

/* --- frieze: kakor (COOK-07) ---------------------------------------------- */
.frieze {
	position: fixed;
	z-index: 90;
	inset-block-end: var(--rhythm-sm);
	inset-inline-end: var(--rhythm-sm);
	width: 320px;
	max-width: calc(100vw - 2 * var(--rhythm-xs));
	padding: var(--rhythm-xs) var(--rhythm-sm);
	background: var(--tone-surface-2);
	color: var(--tone-type);
	border-inline-start: 4px solid var(--tone-core);
	border-radius: var(--corner-sm);
	box-shadow: var(--depth-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--beat-calm) var(--glide-release), inset-block-end var(--beat-calm) var(--glide-release),
		visibility var(--beat-calm) var(--glide-release);
}

.frieze.is-open {
	opacity: 1;
	visibility: visible;
}

.frieze.is-gone {
	opacity: 0;
	visibility: hidden;
	inset-block-end: -420px;
}

.frieze-say {
	margin: 0 0 var(--rhythm-xs);
	font-size: var(--size-small);
	line-height: 1.4;
	color: var(--tone-quiet);
	background: var(--tone-surface-2);
}

.frieze-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.frieze-ok,
.frieze-skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 var(--rhythm-xs);
	font-family: var(--font-body);
	font-size: var(--size-small);
	font-weight: var(--font-weight-medium);
	border: 0;
	border-radius: var(--corner-sm);
	cursor: pointer;
}

.frieze-ok {
	color: var(--tone-ground);
	background: var(--tone-core);
}

.frieze-ok:hover {
	background: var(--ink-warm);
	color: var(--tone-ground);
}

.frieze-skip {
	color: var(--tone-type);
	background: #2b3033;
	border: var(--hair-light) solid var(--tone-line-strong);
}

.frieze-skip:hover {
	background: var(--tone-ground);
	color: var(--tone-type);
}

@media (max-width: 700px) {
	.frieze {
		inset-inline: var(--rhythm-xs);
		inset-block-end: var(--rhythm-xs);
		width: auto;
		padding: 12px 14px;
	}

	.frieze-say {
		font-size: 13px;
		line-height: 1.35;
	}

	.frieze-ok,
	.frieze-skip {
		flex: 1 1 auto;
		min-height: 38px;
		font-size: 12px;
	}
}


/* --- erbjudandeknappar (cta-style.mjs) ------------------------------------ */
.beacon-dive{display:inline-flex;align-items:center;justify-content:center;padding:0 18px;min-height:38px;border-radius:var(--corner-pill);border:var(--hair-light) solid var(--tone-line-strong);font-size:14px;font-weight:600}
.beacon-dive{
  background:#7C3AED;color:#FFFFFF;text-decoration:none;font-family:var(--font-lead);
  transition:background 0.1s ease-out,color 0.1s ease-out,transform 0.1s ease-out;}
.beacon-dive.beacon-dive{color:#FFFFFF;text-decoration:none;font-family:var(--font-lead);}
.beacon-dive:hover{background:#6D28D9;color:#FFFFFF;animation:none}
.beacon-dive.beacon-dive:hover{color:#FFFFFF;text-decoration:none}
.beacon-dive:hover::after{animation:none}
.beacon-dive:active{background:#5B21B6;color:#FFFFFF}
.beacon-dive:focus-visible{outline:3px solid #131516;outline-offset:3px}
.beacon-dive{animation:beacon-sweep 1.83s linear infinite}
@keyframes beacon-sweep{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.8,.35,1)}15.301%{transform:scale(1.075);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}53.552%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.beacon-dive,.beacon-dive::after{animation:none!important;transition:none!important}}

.sigil-btn.beacon-dive {
	min-height: 44px;
	padding-inline: 20px;
}

.mantle-btn {
	min-height: 48px;
	padding-inline: 28px;
	flex-shrink: 0;
	font-size: var(--size-micro-head);
}

.quatrefoil-btn {
	min-height: 48px;
	padding-inline: 32px;
}

.strip-meat {
	min-width: 0;
}

@media (max-width: 952px) {
  .sigil-index,
  .sigil-set,
  .sigil-piece-href,
  .sigil-quiet-btn { display: none !important; }
  .sigil-menu-tap { display: flex !important; }
}