/* Immersive Story: values come from the Immersive Story Design System. */
:root {
	--imms-ink: #0a0f14;
	--imms-plate: #10171e;
	--imms-wheel: #172029;
	--imms-line: #34414d;
	--imms-paper: #eef1f3;
	--imms-soft: #c8d0d7;
	--imms-mute: #a9b4be;
	--imms-brass: #e0b458;
	--imms-display: "Instrument Serif", Georgia, serif;
	--imms-body: "Source Serif 4", Georgia, serif;
	--imms-label: "Schibsted Grotesk", Arial, sans-serif;
	--imms-gutter: clamp(20px, 5vw, 72px);
}

/*
 * Story pages only: switches Blocksy's palette to the dark colors, including its header and footer.
 * Everything else on the site, including a future shop, keeps the palette set in the Customizer.
 */
:root:has(body.imms-dark-page) {
	color-scheme: dark;
	--theme-palette-color-1: #e0b458;
	--theme-palette-color-2: #e0b458;
	--theme-palette-color-3: #eef1f3;
	--theme-palette-color-4: #eef1f3;
	--theme-palette-color-5: #34414d;
	--theme-palette-color-6: #10171e;
	--theme-palette-color-7: #0a0f14;
	--theme-palette-color-8: #0a0f14;
}
body.imms-dark-page {
	background-color: var(--imms-ink);
	color: var(--imms-paper);
}

/*
 * Story pages only: the header shows just the site title. The plugin already stops Blocksy
 * rendering the other header items here; this catches any item added later, such as a shop cart.
 */
body.imms-dark-page #header [data-id]:not([data-id="logo"]),
body.imms-dark-page #offcanvas {
	display: none !important;
}

/* Opening */
.imms-opening {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	margin-block: 0;
	padding: clamp(32px, 6vw, 88px) 16px 0;
	background: var(--imms-ink);
	color: var(--imms-paper);
	text-align: center;
}
.imms-opening > * { margin-block: 0; }
.imms-opening .imms-kicker {
	color: var(--imms-brass);
	font: 600 14px/1.4 var(--imms-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.imms-opening .imms-headline {
	max-width: 1200px;
	color: var(--imms-paper);
	font: 400 clamp(58px, 11.5vw, 176px)/0.94 var(--imms-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.imms-opening .imms-summary {
	max-width: 640px;
	color: var(--imms-soft);
	font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--imms-body);
	text-wrap: pretty;
}
.imms-opening .imms-byline {
	color: var(--imms-mute);
	font: 400 14px/1.4 var(--imms-label);
}

.imms-opening .imms-kicker a { color: inherit; text-decoration: none; }
.imms-opening .imms-kicker a:hover { text-decoration: underline; }
.imms-opening .imms-kicker a:focus-visible { outline: 2px solid var(--imms-paper); outline-offset: 3px; }
.imms-opening .imms-headline-detail { font-size: clamp(54px, 9.5cqw, 144px); font-size: clamp(54px, 9.5vw, 144px); }

/* Opening image */
.wp-block-image.imms-hero {
	margin-block: 32px 0;
	background: var(--imms-ink);
}
.wp-block-image.imms-hero img {
	display: block;
	width: 100%;
	height: clamp(300px, 48vw, 690px);
	object-fit: cover;
	object-position: 50% 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent);
}
.imms-hero .wp-element-caption,
.imms-caption {
	color: var(--imms-mute);
	font: italic 400 16px/1.4 var(--imms-body);
}
.imms-hero .wp-element-caption {
	max-width: 680px;
	margin: 8px auto 0;
	padding-inline: 20px;
	text-align: center;
}

/* Reading column */
.imms-reading {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) 20px 0;
	color: var(--imms-paper);
	font: 400 clamp(19px, 1.5vw, 22px)/1.6 var(--imms-body);
}
.imms-reading p { margin: 0 0 24px; text-wrap: pretty; }
.imms-reading .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 8px 12px 0 0;
	color: var(--imms-brass);
	font: 400 104px/0.72 var(--imms-display);
	text-transform: none;
}

/* Pull quote */
.wp-block-pullquote.imms-pull {
	max-width: 1080px;
	margin: clamp(32px, 5vw, 72px) auto clamp(56px, 7vw, 104px);
	padding: 0 20px;
	border: 0;
	color: var(--imms-brass);
	text-align: center;
}
.wp-block-pullquote.imms-pull blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.wp-block-pullquote.imms-pull::before,
.wp-block-pullquote.imms-pull blockquote::before { content: none !important; }
.wp-block-pullquote.imms-pull p {
	margin: 0;
	color: inherit;
	font: italic 400 clamp(38px, 5.4vw, 78px)/1.04 var(--imms-display);
	text-wrap: balance;
}

/* Pinned sequence */
.imms-pin {
	position: relative;
	margin-block: 0;
	background: var(--imms-ink);
	color: var(--imms-paper);
}
.imms-stage {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	overflow: hidden;
	background: var(--imms-ink);
}
.imms-stage svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 58%;
	overflow: visible;
}
.imms-stage [data-part] { transition: opacity 0.3s; }
.imms-stage [data-part].is-dim { opacity: 0.2; }
.imms-steps {
	position: relative;
	z-index: 1;
	margin-top: calc(-100vh + var(--wp-admin--admin-bar--height, 0px));
	margin-top: calc(-100svh + var(--wp-admin--admin-bar--height, 0px));
	padding-inline: 20px;
}
.imms-step {
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: 24px;
}
.imms-card {
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 24px;
	background: var(--imms-plate);
	border: 1px solid var(--imms-line);
}
.imms-step .imms-step-label {
	margin: 0 0 8px;
	color: var(--imms-brass);
	font: 600 13px/1.4 var(--imms-label);
}
.imms-card h2,
.imms-card h3 {
	margin: 0 0 8px;
	color: var(--imms-paper);
	font: 400 clamp(32px, 3vw, 42px)/1.05 var(--imms-display);
}
.imms-card p,
.imms-card ul,
.imms-card ol {
	margin: 0 0 12px;
	color: var(--imms-paper);
	font: 400 18px/1.5 var(--imms-body);
}
.imms-card > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.imms-stage svg { left: calc(max(5vw, 20px) + 464px); width: calc(100% - max(5vw, 20px) - 464px); height: 100%; }
	.imms-steps { padding-left: max(5vw, 20px); }
	.imms-step { align-items: center; }
}

/* Side-by-side figures */
.wp-block-columns.imms-figures {
	box-sizing: border-box;
	align-items: center;
	gap: 40px clamp(32px, 6vw, 96px);
	max-width: 1296px;
	margin: 0 auto;
	padding: clamp(64px, 8vw, 120px) 20px;
	color: var(--imms-paper);
}
.imms-figures .wp-block-columns { gap: 12px; margin: 0 0 12px; }
.imms-figures .wp-block-image { margin: 0; }
.imms-figures img { display: block; width: 100%; height: auto; }
.imms-figures h2 {
	margin: 0 0 24px;
	color: var(--imms-paper);
	font: 400 clamp(38px, 4.2vw, 60px)/1 var(--imms-display);
}
.imms-figures p:not(.imms-caption) {
	margin: 0;
	font: 400 clamp(19px, 1.5vw, 22px)/1.6 var(--imms-body);
}
.imms-figures .imms-caption { margin: 0; }

/* Statement band */
.imms-statement {
	box-sizing: border-box;
	margin-block: 0;
	padding: clamp(64px, 9vw, 136px) 20px;
	background: var(--imms-brass);
	color: var(--imms-ink);
	text-align: center;
}
.imms-statement .imms-statement-line {
	max-width: 1100px;
	margin: 0 auto;
	color: inherit;
	font: 400 clamp(46px, 8vw, 120px)/1 var(--imms-display);
	text-wrap: balance;
}
.imms-statement .imms-statement-note {
	max-width: 560px;
	margin: 20px auto 0;
	color: inherit;
	font: 400 19px/1.45 var(--imms-body);
}

/* Shop banner */
.imms-shop {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px 48px;
	box-sizing: border-box;
	max-width: 1264px;
	margin: clamp(40px, 5vw, 72px) auto;
	padding: 32px;
	background: var(--imms-plate);
	color: var(--imms-paper);
}
.imms-shop > * { margin-block: 0; }
.imms-shop .imms-shop-line {
	flex: 1 1 320px;
	min-width: 0;
	color: inherit;
	font: 400 34px/1.1 var(--imms-display);
}
.imms-shop .wp-block-button__link {
	display: flex;
	align-items: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 24px;
	border-radius: 0;
	background: var(--imms-brass);
	color: var(--imms-ink);
	font: 700 16px/1.2 var(--imms-label);
	text-decoration: none;
}
.imms-shop .wp-block-button__link:focus-visible {
	outline: 2px solid var(--imms-paper);
	outline-offset: 3px;
}

/* Content sections */
.imms-section {
	box-sizing: border-box;
	padding: clamp(56px, 7vw, 104px) 20px 0;
	color: var(--imms-paper);
	font: 400 clamp(19px, 1.5vw, 22px)/1.6 var(--imms-body);
}
.imms-section > * { max-width: 720px; margin-inline: auto; }
.imms-section > p { margin-block: 0 24px; }
.imms-section.imms-wide > * { max-width: 1120px; }
.imms-section h2,
.imms-detail h2 {
	margin-block: 0 24px;
	color: var(--imms-paper);
	font: 400 clamp(38px, 4.2vw, 60px)/1 var(--imms-display);
	text-wrap: balance;
}
.imms-section a,
.imms-detail a,
.imms-sources a { color: var(--imms-brass); text-underline-offset: 3px; }
.imms-section a:focus-visible,
.imms-detail a:focus-visible,
.imms-sources a:focus-visible,
.imms-demo :focus-visible,
.imms-question summary:focus-visible { outline: 2px solid var(--imms-paper); outline-offset: 3px; }

/* Side-by-side panels */
.wp-block-columns.imms-compare { gap: 16px; margin-block: 0 24px; }
.imms-panel {
	box-sizing: border-box;
	padding: 24px;
	background: var(--imms-plate);
	border: 1px solid var(--imms-line);
}
.imms-panel h3 {
	margin: 0 0 16px;
	color: var(--imms-brass);
	font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--imms-display);
}
.imms-panel ul { margin: 0; padding-left: 22px; font-size: 18px; line-height: 1.5; }
.imms-panel li { margin-bottom: 10px; }
.imms-panel li:last-child { margin-bottom: 0; }

/* Tables */
.wp-block-table.imms-table { margin-block: 0 24px; overflow-x: auto; }
.imms-table table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	background: var(--imms-plate);
	font: 400 17px/1.4 var(--imms-body);
}
.imms-table th,
.imms-table td {
	padding: 14px 16px;
	border: 1px solid var(--imms-line);
	color: var(--imms-paper);
	text-align: left;
	vertical-align: top;
}
.imms-table thead th {
	color: var(--imms-brass);
	font: 600 14px/1.4 var(--imms-label);
}
.imms-table tbody td:first-child { font-weight: 600; }

/* Expandable questions */
.wp-block-details.imms-question {
	box-sizing: border-box;
	margin-block: 0 12px;
	padding: 16px 20px;
	background: var(--imms-plate);
	border: 1px solid var(--imms-line);
}
.imms-question summary {
	min-height: 28px;
	color: var(--imms-paper);
	font: 600 18px/1.5 var(--imms-label);
	cursor: pointer;
}
.imms-question > summary { margin: 0 !important; padding: 0 !important; }
.wp-block-details.imms-question:not([open]) { padding-bottom: 16px !important; }
.imms-question > :last-child:not(summary) { margin-bottom: 0 !important; }
.imms-question p { margin: 12px 0 0; font-size: 18px; line-height: 1.5; }

/* Interactive demo */
.imms-demo {
	box-sizing: border-box;
	padding: 24px;
	background: var(--imms-plate);
	border: 1px solid var(--imms-line);
	font: 400 17px/1.4 var(--imms-label);
}
.imms-demo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.imms-demo-form[hidden] { display: none; }
.imms-demo-field { flex: 1 1 150px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.imms-demo-field label { color: var(--imms-soft); font-size: 14px; font-weight: 600; }
.imms-demo-field input,
.imms-demo-field select {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--imms-mute);
	border-radius: 0;
	background: var(--imms-ink);
	color: var(--imms-paper);
	font: 400 17px/1.2 var(--imms-label);
}
.imms-demo button {
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--imms-brass);
	border-radius: 0;
	background: var(--imms-brass);
	color: var(--imms-ink);
	font: 700 16px/1.2 var(--imms-label);
	cursor: pointer;
}
.imms-demo .imms-demo-reset { background: transparent; color: var(--imms-paper); border-color: var(--imms-mute); }
.imms-demo-message { min-height: 24px; margin: 0 0 16px; color: var(--imms-brass); font-weight: 600; }
.imms-demo-table { overflow-x: auto; }
.imms-demo table { width: 100%; border-collapse: collapse; color: var(--imms-paper); }
@media (max-width: 520px) {
	.imms-demo { padding: 16px; }
	.imms-demo table { font-size: 15px; }
	.imms-demo th,
	.imms-demo td { padding: 10px 4px; }
}
.imms-demo caption { margin-bottom: 8px; color: var(--imms-mute); font-size: 14px; text-align: left; }
.imms-demo th,
.imms-demo td { padding: 12px 8px; border-bottom: 1px solid var(--imms-line); text-align: right; vertical-align: top; }
.imms-demo th:first-child { text-align: left; }
.imms-demo thead th { color: var(--imms-mute); font-size: 14px; }
.imms-demo tfoot th,
.imms-demo tfoot td { font-weight: 700; border-bottom: 0; }
.imms-demo-bar { display: block; height: 4px; margin-top: 8px; background: var(--imms-line); }
.imms-demo-bar span { display: block; width: 0; height: 100%; background: var(--imms-brass); transition: width 0.2s; }
.imms-demo tr.is-over td[data-left] { color: var(--imms-brass); font-weight: 700; }
.imms-demo-note { margin: 12px 0 0; color: var(--imms-mute); font-size: 14px; }

/* 50/30/20 calculator */
.imms-splitter {
	box-sizing: border-box;
	margin-block: 0 24px;
	padding: 24px;
	background: var(--imms-plate);
	border: 1px solid var(--imms-line);
	font: 400 17px/1.4 var(--imms-label);
}
.imms-splitter-field { display: flex; flex-direction: column; gap: 6px; max-width: 280px; margin-bottom: 20px; }
.imms-splitter-field[hidden] { display: none; }
.imms-splitter label { color: var(--imms-soft); font-size: 14px; font-weight: 600; }
.imms-splitter input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--imms-mute);
	border-radius: 0;
	background: var(--imms-ink);
	color: var(--imms-paper);
	font: 400 17px/1.2 var(--imms-label);
}
.imms-splitter input:focus-visible { outline: 2px solid var(--imms-paper); outline-offset: 3px; }
.imms-splitter-bar { display: grid; grid-template-columns: 50fr 30fr 20fr; gap: 3px; margin-bottom: 12px; }
.imms-splitter-bar span { height: 14px; }
.imms-splitter-bar span:nth-child(1) { background: var(--imms-brass); }
.imms-splitter-bar span:nth-child(2) { background: var(--imms-soft); }
.imms-splitter-bar span:nth-child(3) { background: var(--imms-line); }
.imms-splitter-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin: 0; }
.imms-splitter-results div { margin: 0; }
.imms-splitter-results dt { color: var(--imms-mute); font-size: 14px; }
.imms-splitter-results dd { margin: 4px 0 0; color: var(--imms-paper); font: 400 34px/1.1 var(--imms-display); }

/* Links to detail pages */
.imms-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.imms-links p { margin: 0; }
.imms-links a {
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: 24px;
	background: var(--imms-plate);
	border: 1px solid var(--imms-line);
	color: var(--imms-soft);
	font: 400 17px/1.45 var(--imms-label);
	text-decoration: none;
}
.imms-links a:hover { border-color: var(--imms-brass); }
.imms-links strong {
	display: block;
	margin-bottom: 8px;
	color: var(--imms-paper);
	font: 400 30px/1.1 var(--imms-display);
}
.imms-links br { display: none; }

/* About this guide */
.imms-sources {
	box-sizing: border-box;
	padding: clamp(48px, 6vw, 88px) 20px clamp(32px, 4vw, 56px);
	color: var(--imms-mute);
	font: 400 15px/1.5 var(--imms-label);
}
.imms-sources p { max-width: 720px; margin: 0 auto; }

/* Detail pages */
.imms-detail {
	box-sizing: border-box;
	padding: clamp(24px, 4vw, 56px) 20px clamp(48px, 6vw, 88px);
	color: var(--imms-paper);
	font: 400 clamp(19px, 1.5vw, 21px)/1.6 var(--imms-body);
}
.imms-detail > * { max-width: 840px; margin-inline: auto; }
.imms-detail > p,
.imms-detail > ul,
.imms-detail > ol { margin-block: 0 24px; }
.imms-detail li { margin-bottom: 12px; }
.imms-detail h1 {
	margin-block: 0 24px;
	color: var(--imms-paper);
	font: 400 clamp(52px, 7vw, 96px)/0.96 var(--imms-display);
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.imms-detail h2 { margin-top: clamp(48px, 5vw, 72px); }
.imms-detail .imms-lead { color: var(--imms-soft); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; }
.imms-detail .imms-back { margin-bottom: 32px; font: 600 15px/1.4 var(--imms-label); }

.imms-next { padding-top: 0; padding-bottom: clamp(48px, 6vw, 88px); }

/* Keeps theme content-width and spacing rules from narrowing the design's sections. */
.imms-section,
.imms-detail,
.imms-sources { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.imms-section > *,
.imms-detail > * { margin-left: auto !important; margin-right: auto !important; }
.imms-section > * { max-width: 720px !important; }
.imms-section.imms-wide > * { max-width: 1120px !important; }
.imms-detail > * { max-width: 840px !important; }
.imms-opening,
.imms-statement,
.imms-pin,
.wp-block-image.imms-hero { margin-bottom: 0 !important; }
.imms-opening,
.imms-statement,
.imms-pin { margin-top: 0 !important; }
.imms-opening .imms-kicker,
.imms-opening .imms-headline,
.imms-opening .imms-summary,
.imms-opening .imms-byline,
.imms-reading,
.imms-reading p,
.wp-block-pullquote.imms-pull,
.wp-block-columns.imms-figures,
.imms-statement .imms-statement-line,
.imms-statement .imms-statement-note,
.imms-shop,
.imms-card > * { margin-left: auto !important; margin-right: auto !important; width: auto; }
.imms-opening .imms-kicker,
.imms-opening .imms-headline,
.imms-opening .imms-summary,
.imms-opening .imms-byline { margin-top: 0 !important; margin-bottom: 0 !important; }
.imms-opening .imms-kicker,
.imms-opening .imms-byline,
.imms-reading p,
.imms-card > * { max-width: none !important; }
.imms-opening .imms-headline { width: 100%; max-width: 1200px !important; }
.imms-opening .imms-summary { max-width: 640px !important; }
.imms-reading { max-width: 720px !important; }
.wp-block-pullquote.imms-pull { max-width: 1080px !important; }
.wp-block-columns.imms-figures { max-width: 1296px !important; }
.imms-statement .imms-statement-line { max-width: 1100px !important; }
.imms-statement .imms-statement-note { max-width: 560px !important; }
.imms-shop { width: calc(100% - 40px); max-width: 1264px !important; }

@media (prefers-reduced-motion: reduce) {
	.imms-stage [data-part] { transition: none; }
}