/* ===========================================================================
   Effektivt Landbrug e-avis - prototype

   Bootstrap does the plumbing: reboot, grid, utilities, buttons, forms, list
   groups and the modal the reading sheet is built on. This file is the theme
   on top of it - the brand handed to Bootstrap through its own --bs- variables
   so components inherit it, plus the parts a newspaper needs that no framework
   has: the page stage, the spread track and the article layer.

   Two surfaces, deliberately different:
     kiosk  = newsprint stock, light, the paper as an object you pick up
     reader = press ink, dark, so the page is the brightest thing on screen
   Type is one grotesque (Archivo, used across its width axis the way a paper
   uses condensed folios) plus one serif (Newsreader) for journalism only.
   =========================================================================== */

:root {
	--ink: #10312f;
	--ink-raised: #17403d;
	--ink-line: #26564f;
	--ink-soft: #8fb3ae;

	--teal: #036d76;
	--teal-lift: #14a0ab;

	--stock: #efe9dd;
	--stock-2: #e5dccb;
	--stock-line: #cfc2ab;

	--paper: #ffffff;
	--soil: #33291f;
	--soil-soft: #6d6152;

	/* Reserved for the article layer, so "text we hold" never looks like navigation. */
	--ochre: #b0722a;

	--sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
	--serif: "Newsreader", Georgia, "Times New Roman", serif;

	--rail: 104px;
	--panel: 440px;
	--bar: 58px;

	/* Frame padding, and the inset reader.js fits the spread inside. Keep them equal or a
	   page turn lands a few pixels off where the drag left it. */
	--frame-pad: 22px;

	/* Handed to Bootstrap, so .btn, .form-control, .list-group and .modal are ours
	   without restyling each of them. */
	--bs-primary: #036d76;
	--bs-primary-rgb: 3, 109, 118;
	--bs-body-font-family: var(--sans);
	--bs-body-font-size: 15px;
	--bs-body-line-height: 1.5;
	--bs-body-color: var(--soil);
	--bs-body-bg: var(--stock);
	--bs-border-color: var(--stock-line);
	--bs-link-color: var(--teal);
	--bs-link-hover-color: var(--teal-lift);
	--bs-border-radius: 2px;
	--bs-border-radius-sm: 2px;
	--bs-border-radius-lg: 3px;
	--bs-focus-ring-color: rgba(20, 160, 171, 0.45);
}

html,
body {
	height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 2px solid var(--teal-lift);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Headings are focused on navigation for screen readers; they are not interactive,
   so they should not draw a focus ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
	outline: none;
}

/* Numerals that behave like folios: condensed, aligned, never reflowing. */
.folio {
	font-variation-settings: "wdth" 70;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* A button on the dark reader chrome. Bootstrap's own variant variables carry it, so
   .btn keeps its sizing, focus ring and disabled handling. */
.btn-chrome {
	--bs-btn-color: #dcebe8;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.07);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: rgba(255, 255, 255, 0.12);
	--bs-btn-active-border-color: transparent;
	--bs-btn-font-size: 14px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- kiosk --- */

.kiosk {
	max-width: 1180px;
	margin: 0 auto;
	padding: 48px 32px 96px;
}

.masthead {
	padding-bottom: 18px;
	border-bottom: 2px solid var(--soil);
}

.masthead h1 {
	margin: 0;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.masthead time {
	font-size: 14px;
	color: var(--soil-soft);
}

.lead {
	margin-top: 40px;
}

.lead-cover {
	display: block;
	background: var(--paper);
	box-shadow:
		0 1px 2px rgba(51, 41, 31, 0.2),
		0 18px 40px -18px rgba(51, 41, 31, 0.5);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.lead-cover img {
	display: block;
	width: 100%;
	height: auto;
}

.lead-cover:hover {
	transform: translateY(-3px);
	box-shadow:
		0 2px 4px rgba(51, 41, 31, 0.22),
		0 24px 50px -18px rgba(51, 41, 31, 0.55);
}

.lead-story h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.lead-story .standfirst {
	margin: 18px 0 0;
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.45;
	max-width: 46ch;
	color: #4a3f33;
}

.lead-story .byline {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--soil-soft);
}

.lead-actions {
	margin-top: 28px;
}

.btn-read {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: var(--teal);
	--bs-btn-border-color: var(--teal);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #025a62;
	--bs-btn-hover-border-color: #025a62;
	--bs-btn-padding-x: 22px;
	--bs-btn-padding-y: 11px;
	--bs-btn-font-weight: 600;
}

.issue-facts {
	font-size: 13px;
	line-height: 1.5;
	color: var(--soil-soft);
	max-width: 40ch;
}

.plan {
	margin-top: 72px;
	padding-top: 26px;
	border-top: 1px solid var(--stock-line);
}

.plan-head h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.plan-head p {
	margin: 5px 0 0;
	font-size: 14px;
	color: var(--soil-soft);
}

.spreads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 30px 26px;
	margin-top: 28px;
}

.spread {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--paper);
	box-shadow: 0 1px 3px rgba(51, 41, 31, 0.18);
}

/* The cover and the back page are printed alone, so they hang on their own half. */
.spread.single {
	grid-template-columns: 1fr;
	width: 50%;
}

.plan-page {
	display: block;
	padding: 8px;
	text-decoration: none;
	color: inherit;
}

.plan-page img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--stock-2);
	transition: opacity 130ms ease;
}

.plan-page:hover img {
	opacity: 0.82;
}

.plan-meta {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin-top: 6px;
	font-size: 11px;
	color: var(--soil-soft);
}

.plan-meta .n {
	font-weight: 700;
	color: var(--soil);
}

.spread .plan-page + .plan-page {
	border-left: 1px solid var(--stock-line);
}

/* --------------------------------------------------------------- reader --- */

.reader {
	position: fixed;
	inset: 0;
	background: var(--ink);
	color: #e8f1ef;
	overflow: hidden;
}

.topbar {
	flex: none;
	height: var(--bar);
	min-width: 0;
	border-bottom: 1px solid var(--ink-line);
	background: var(--ink-raised);
}

.topbar .title {
	font-weight: 600;
	font-size: 15px;
}

.topbar .date {
	font-size: 13px;
	color: var(--ink-soft);
}

.tool[aria-pressed="true"] {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: var(--ochre);
	--bs-btn-hover-bg: #c07f30;
	--bs-btn-hover-color: #ffffff;
}

.search-field {
	flex: 0 1 244px;
	min-width: 96px;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid var(--ink-line);
	border-radius: 2px;
	color: var(--ink-soft);
}

.search-field svg {
	flex: none;
}

.search-field .form-control {
	min-width: 0;
	padding: 7px 0;
	font-size: 14px;
	color: #eaf3f1;
	background: none;
	border: 0;
	box-shadow: none;
}

.search-field .form-control::placeholder {
	color: #6f948f;
}

/* minmax(0, 1fr) pins the stage column to the window: without it the top bar's minimum
   content width can push the whole reader wider than the screen. */
.stagerow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	min-height: 0;
	min-width: 0;
}

.stagerow.with-panel {
	grid-template-columns: auto minmax(0, 1fr) var(--panel);
}

/* rail ---------------------------------------------------------------- */

.rail {
	width: var(--rail);
	overflow-y: auto;
	padding: 12px 0 24px;
	border-right: 1px solid var(--ink-line);
	scrollbar-width: thin;
	scrollbar-color: var(--ink-line) transparent;
}

.rail-item {
	display: block;
	width: 100%;
	padding: 6px 14px;
	text-align: center;
	text-decoration: none;
}

.rail-item img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--paper);
	opacity: 0.62;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transition: opacity 130ms ease, box-shadow 130ms ease;
}

.rail-item:hover img {
	opacity: 0.9;
}

.rail-item[aria-current="page"] img {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--teal-lift), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.rail-item span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--ink-soft);
}

.rail-item[aria-current="page"] span {
	color: #eaf3f1;
	font-weight: 600;
}

/* stage --------------------------------------------------------------- */

.stage-wrap {
	position: relative;
	min-width: 0;
	min-height: 0;
}

.viewport {
	position: relative;
	overflow: hidden;
	min-height: 0;
	touch-action: none;
	cursor: grab;
}

.viewport.dragging {
	cursor: grabbing;
}

/* The spread you are reading, with the one behind and the one ahead parked either side.
   reader.js slides the track; the frames never move relative to it. */
.track {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 150ms ease;
	will-change: transform;
}

.frame {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.frame:first-child {
	left: -100%;
}

.frame:last-child {
	left: 100%;
}

/* The neighbours are laid out in CSS while the read spread is placed by transform. Both
   land in the same place: min(half the width, the full height), inset by --frame-pad. */
.pair {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--frame-pad);
}

.pair img {
	max-width: 100%;
	max-height: 100%;
	background: var(--paper);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 24px 60px -18px rgba(0, 0, 0, 0.75);
}

.pair:has(img + img) img {
	max-width: 50%;
}

/* Placed entirely by reader.js - flow layout would fight the pan/zoom transform. */
.stage {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	transform-origin: 0 0;
	will-change: transform;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 24px 60px -18px rgba(0, 0, 0, 0.75);
}

.leaf {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* The gutter, where the two printed pages meet. */
.leaf + .leaf {
	box-shadow: inset 1px 0 0 rgba(51, 41, 31, 0.22);
}

.stage img.page {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--paper);
}

/* article layer ------------------------------------------------------- */

.hotspot {
	position: absolute;
	border: 0;
	padding: 0;
	background: rgba(176, 114, 42, 0);
	transition: background 120ms ease, box-shadow 120ms ease;
}

.layer-on .hotspot {
	box-shadow: inset 0 0 0 1px rgba(176, 114, 42, 0.55);
	background: rgba(176, 114, 42, 0.07);
}

.hotspot:hover,
.hotspot.active {
	background: rgba(176, 114, 42, 0.16);
	box-shadow: inset 0 0 0 2px var(--ochre);
}

.pagebar {
	flex: none;
	padding: 10px 16px 16px;
}

.step {
	--bs-btn-color: #dcebe8;
	--bs-btn-bg: var(--ink-raised);
	--bs-btn-border-color: var(--ink-line);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--teal);
	--bs-btn-hover-border-color: var(--teal);
	--bs-btn-disabled-color: #dcebe8;
	--bs-btn-disabled-bg: var(--ink-raised);
	--bs-btn-disabled-border-color: var(--ink-line);
	--bs-btn-disabled-opacity: 0.32;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
}

.pagenum {
	min-width: 108px;
	text-align: center;
	font-size: 15px;
	color: #dcebe8;
}

.pagenum em {
	font-style: normal;
	color: var(--ink-soft);
}

.zoomset {
	position: absolute;
	right: 18px;
	bottom: 22px;
	gap: 1px;
	background: var(--ink-line);
	border-radius: 2px;
	overflow: hidden;
}

.zoomset .btn {
	--bs-btn-color: #dcebe8;
	--bs-btn-bg: var(--ink-raised);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--teal);
	--bs-btn-hover-border-color: transparent;
	width: 36px;
	height: 34px;
	padding: 0;
	border-radius: 0;
	font-size: 17px;
	line-height: 1;
}

/* panel --------------------------------------------------------------- */

.panel {
	background: var(--paper);
	color: var(--soil);
	overflow-y: auto;
	border-left: 1px solid var(--ink-line);
}

.panel-head {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 14px 20px;
	background: var(--paper);
	border-bottom: 1px solid var(--stock-line);
}

.panel-head .where {
	font-size: 13px;
	color: var(--soil-soft);
}

/* reading sheet ------------------------------------------------------- */

/* The article lifted off the page. The page stays visible around it, so you never
   lose track of where the story sits in the paper. */
.reading {
	background: rgba(8, 30, 28, 0.66);
	animation: reading-in 140ms ease-out;
}

.sheet {
	border: 0;
	border-radius: 0;
	background: var(--paper);
	color: var(--soil);
	box-shadow: 0 24px 70px -14px rgba(0, 0, 0, 0.62);
	animation: sheet-in 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sheet-head {
	flex: none;
	padding: 12px 16px 12px 26px;
	border-bottom: 1px solid var(--stock-line);
	border-radius: 0;
	background: var(--stock);
}

.sheet-head .where {
	font-size: 13px;
	color: var(--soil-soft);
}

.sheet-goto {
	--bs-btn-color: var(--teal);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--teal);
	--bs-btn-hover-bg: rgba(3, 109, 118, 0.1);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-font-size: 13px;
	--bs-btn-font-weight: 600;
}

.sheet-close {
	--bs-btn-color: var(--soil-soft);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--soil);
	--bs-btn-hover-bg: var(--stock-2);
	--bs-btn-hover-border-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
}

@keyframes reading-in {
	from {
		opacity: 0;
	}
}

@keyframes sheet-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.99);
	}
}

.article {
	padding: 40px 56px 64px;

	/* The photos load after first paint and add height above the reading position;
	   scroll anchoring would compensate and open the article halfway down. */
	overflow-anchor: none;
}

.article h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 22ch;
}

.article .standfirst {
	margin: 20px 0 0;
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.45;
	max-width: 44ch;
	color: #4a3f33;
}

.article .byline {
	gap: 6px 18px;
	margin: 22px 0 0;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--stock-line);
	font-size: 13px;
	color: var(--soil-soft);
}

.article figure {
	margin: 22px 0;
}

.article figure img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--stock-2);
}

.article figcaption {
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--soil-soft);
}

.body {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.68;
	max-width: 64ch;
}

.body p {
	margin: 0 0 1em;
}

.body h2,
.body h3 {
	margin: 1.8em 0 0.45em;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

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

.provenance {
	margin: 26px 0 0;
	padding: 12px 14px;
	background: var(--stock);
	font-size: 13px;
	line-height: 1.5;
	color: var(--soil-soft);
}

/* search results ------------------------------------------------------ */

.results {
	padding-bottom: 40px;
}

.result {
	--bs-list-group-item-padding-x: 20px;
	--bs-list-group-item-padding-y: 14px;
	--bs-list-group-action-hover-bg: var(--stock);
	--bs-list-group-bg: transparent;
	text-align: left;
}

.result.current {
	background: var(--stock);
	box-shadow: inset 3px 0 0 var(--teal);
}

.result .rh {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.25;
}

.result .rm {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--soil-soft);
}

.empty {
	padding: 30px 20px;
	font-size: 14px;
	color: var(--soil-soft);
}

/* --------------------------------------------------------------- small --- */

@media (max-width: 991.98px) {
	:root {
		--frame-pad: 10px;
	}
}

@media (max-width: 940px) {
	.kiosk {
		padding: 32px 20px 72px;
	}

	.lead-cover {
		max-width: 260px;
	}

	.stagerow,
	.stagerow.with-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.stagerow.with-panel .stage-wrap {
		display: none !important;
	}

	.panel {
		border-left: 0;
	}

	.article {
		padding: 26px 22px 56px;
	}

	.article .standfirst {
		font-size: 19px;
	}

	.body {
		font-size: 18px;
	}

	.search-field {
		flex: 0 1 170px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}