/* ==========================================================================
   Mobile layer.

   screen_default.css is the original desktop stylesheet and is left untouched,
   so the desktop rendering stays exactly as it was. Everything here either
   applies at every width (small, safe additions) or overrides the fixed-width
   desktop layout below 1024px.

   The desktop canvas is 986px + 17px body padding, so 1024px is the first width
   at which the original layout no longer fits.
   ========================================================================== */

/* ### Applies at all widths ############################################### */

/* Images must never push the layout wider than its container. */
img {
	max-width: 100%;
	height: auto;
}

/* Content tables (e.g. tour dates) scroll instead of stretching the page. */
div.column_text table {
	max-width: 100%;
}

/* The archive year pages open with the same small grey heading the original
   site used. That styling only ever existed for h2, but these pages need a
   real h1, so the h1 is dressed to match h2.heading_section exactly. */
h1.heading_section {
	margin-bottom: 15px;
	padding-bottom: 0;
	line-height: 23px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: lighter;
	color: #888;
	letter-spacing: normal;
}

/* div.canvas is a fixed 220x220 plate (canvas_220.jpg).
 *
 * The original pages centred each image on that plate by hand, with an inline
 * margin-top worked out per file (margin-top:50px on a 113px-tall image,
 * 34px on a 149px-tall one — both simply (220 - height) / 2). Centring the
 * image properly does the same job for every image, including ones added later,
 * and needs no per-file arithmetic.
 *
 * The size bound matters too: the stylesheet never constrained the image, so it
 * only fitted as long as the file happened to be small enough — true of the book
 * covers, but not of taller images elsewhere, which spilled over the content
 * below. */
div.listingItem div.column_images div.canvas {
	display: flex;
	align-items: center;
	justify-content: center;
}

div.listingItem div.column_images div.canvas img {
	margin: 0;
	max-width: 202px;
	max-height: 202px;
}

/* The membership logos on Bio/Bibliografie. The three marks share no
   proportion at all — a square badge, an upright monogram, and a wordmark more
   than four times as wide as it is tall — so sizing them by width alone would
   let the wordmark tower over the badge. Each is given a box to fit inside
   instead, which evens them out optically and keeps any future logo in line
   without per-file arithmetic. The row wraps rather than overflowing. */
div.logo_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin-bottom: 15px;
}

div.logo_row img {
	max-width: 200px;
	max-height: 78px;
}

.skip_link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 10px 16px;
	background: #fff;
	color: #333;
}

.skip_link:focus {
	left: 10px;
	top: 10px;
}

/* The burger button and the submenu disclosure only exist on small screens. */
#navi_toggle,
.navi_sub_toggle {
	display: none;
}

.visually_hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Submenus are rendered for every nav item so mobile can expand them without
   navigating first. Collapsed by default; each breakpoint opts back in. */
ul.navi_sub {
	display: none;
}

@media (min-width: 1024px) {
	/* Only the active page carries the bare id, so the desktop flyout keeps
	   behaving exactly as it always did. */
	ul#navi_sub {
		display: block;
	}

	/* The sitemap grid was built for five columns: 5 x (160 + 20) = 900 inside
	   986px. Adding Archiv makes six, which no longer fits and wrapped the last
	   column onto its own row. 6 x (144 + 20) = 984 keeps them on one line. */
	div#sitemap div.column {
		width: 144px;
	}
}

/* Highlighted home teaser (the Facebook tile). These rules used to sit in an
   inline <style> block inside the page template; they belong here now. */
#home div#stage div.content ul li.first-elem a.first-elem-link,
#home div#stage div.content ul li.first-elem a.first-elem-link:link,
#home div#stage div.content ul li.first-elem a.first-elem-link:visited,
#home div#stage div.content ul li.first-elem a.first-elem-link:hover,
#home div#stage div.content ul li.first-elem a.first-elem-link:active {
	background-color: #333;
}

/* The Facebook glyph is a flat logo, so it keeps the sizing the old inline
   style gave it rather than the drop-shadowed thumbnail treatment. The
   margin-top:7px it also carried is gone: the plate centres its image now. */
#home div#stage div.content ul li.first-elem a span.canvas img {
	width: 45px;
	height: 45px;
	box-shadow: none;
}

/* span.canvas is the 60x60 plate at the left of a teaser tile. The images in it
   are 45px, and margin:1px left them sitting against the top edge with 14px of
   air underneath — the Facebook tile only looked right because its inline style
   fudged a margin-top of 7px. Centring the image works for every tile and for
   any image height, the same fix div.listingItem's plate already uses. */
#home div#stage div.content ul li a span.canvas {
	display: flex;
	align-items: center;
	justify-content: center;
}

#home div#stage div.content ul li a span.canvas img {
	margin: 0;
}

@media (min-width: 1024px) {
	/* The title was centred by hand: height:40px plus padding-top:20px inside the
	   60px tile, which only ever centres a single line. A two-line title (the
	   twoLines option in the admin) started at the same 20px and ran out of the
	   bottom of the tile. Filling the tile and centring the box holds for one
	   line and for two, so twoLines is left to do just its own job — tightening
	   the line height so both lines fit. Mobile already worked this way: there
	   the tile is a flex row with align-items:center. */
	#home div#stage div.content ul li a span.linkTitle,
	#home div#stage div.content ul li a span.linkTitle.twoLines {
		display: flex;
		align-items: center;
		height: 60px;
		padding-top: 0;
	}
}

/* ### Mobile ############################################################## */

@media (max-width: 1023px) {

	/* --- Page shell ------------------------------------------------------ */

	body {
		/* The decorative header strip is sized for the 986px canvas. */
		padding-left: 0;
		background-image: none;
		background-color: #f5f5f5;
	}

	/* Two large fixed-attachment backgrounds (movie_reel.png alone is 275 KB).
	   background-attachment:fixed is also a known scroll-jank source on mobile. */
	div#videoReel,
	div.pane_back {
		display: none;
	}

	div#container_main {
		width: auto;
		height: auto;
		background-image: none;
	}

	div#container_page {
		position: static;
		width: auto;
		height: auto;
		padding-top: 0;
		background-image: none;
	}

	div#stage,
	div#sitemap,
	div#footer,
	div#footer_bottom {
		position: static;
		width: auto;
	}

	div#stage {
		width: auto;
		padding: 16px;
		background-image: none;
		background-color: #fff;
	}

	div#stage div.content {
		float: none;
		width: auto;
	}

	/* Purely decorative column — no content is lost by hiding it. */
	div#stage div.sidepane {
		display: none !important;
	}

	div#footer_bottom {
		height: 0;
		margin-bottom: 40px;
		background-image: none;
	}

	/* --- Navigation ------------------------------------------------------ */

	#navi_toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 14px 16px;
		border: 0;
		border-bottom: 1px solid #d6d6d6;
		background: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #333;
		text-align: left;
		cursor: pointer;
	}

	.navi_toggle_bars,
	.navi_toggle_bars::before,
	.navi_toggle_bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: #809bb7;
	}

	.navi_toggle_bars {
		position: relative;
	}

	.navi_toggle_bars::before,
	.navi_toggle_bars::after {
		position: absolute;
		left: 0;
		content: "";
	}

	.navi_toggle_bars::before { top: -7px; }
	.navi_toggle_bars::after  { top:  7px; }

	a#logo {
		position: static;
		display: block;
		width: 192px;
		height: 52px;
		margin: 18px auto;
	}

	div#navi_aux {
		position: static;
		width: auto;
		height: auto;
		padding: 0 16px 16px;
		background-image: none;
		text-align: center;
	}

	/* The sprite-based horizontal bar becomes a stacked, toggled panel. */
	ul#navi_main {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		border-bottom: 1px solid #d6d6d6;
		background: #fff;
	}

	ul#navi_main:not(.is_open) {
		display: none;
	}

	ul#navi_main li,
	ul#navi_main li.home {
		float: none;
		width: auto;
		height: auto;
		border-top: 1px solid #ececec;
	}

	ul#navi_main li:first-child {
		border-top: 0;
	}

	ul#navi_main li a,
	ul#navi_main li.home a,
	ul#navi_main li.home a:link,
	ul#navi_main li.home a:visited,
	ul#navi_main li.home a:hover,
	ul#navi_main li.home a:active {
		height: auto;
		background: none;
	}

	/* .home hides its label on desktop because the sprite carries the icon. */
	ul#navi_main li.home a span,
	ul#navi_main li a span,
	ul#navi_main li a span.left {
		display: block;
		float: none;
		width: auto;
		max-width: none;
		height: auto;
		padding: 14px 16px;
		background: none;
		font-size: 16px;
		color: #333;
	}

	ul#navi_main li a span.right {
		display: none;
	}

	ul#navi_main li.active > a span,
	ul#navi_main li.active > a span.left {
		background: #809bb7 !important;
		color: #fff;
	}

	ul#navi_main li a:hover span,
	ul#navi_main li a:hover span.left {
		background: #e0ecf4;
		color: #333;
	}

	/* The submenu flyout becomes an inline, collapsible sub-list. */
	ul.navi_sub,
	ul#navi_sub {
		position: static;
		width: auto;
		padding: 0;
		box-shadow: none;
		background: #f7f9fb;
	}

	li.is_expanded > ul.navi_sub {
		display: block;
	}

	ul.navi_sub li a,
	ul#navi_sub li a {
		width: auto;
		padding: 11px 16px 11px 32px;
	}

	/* Items with children get a separate disclosure control, so tapping the
	   label still goes straight to the page while the chevron expands. */
	ul#navi_main li.has_sub {
		position: relative;
	}

	ul#navi_main li.has_sub > a {
		padding-right: 56px;
	}

	.navi_sub_toggle {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 56px;
		height: 49px;
		padding: 0;
		border: 0;
		border-left: 1px solid #ececec;
		background: transparent;
		cursor: pointer;
	}

	/* Chevron drawn with a rotated border, so no extra image is needed. */
	.navi_sub_toggle::before {
		display: block;
		width: 8px;
		height: 8px;
		margin: 0 auto;
		border-right: 2px solid #809bb7;
		border-bottom: 2px solid #809bb7;
		transform: rotate(45deg);
		transition: transform .15s ease;
		content: "";
	}

	li.is_expanded > .navi_sub_toggle::before {
		transform: rotate(-135deg);
	}

	/* The active item's highlight covers only the label, not the toggle column,
	   so the chevron stays on white and keeps its default colour. */

	/* --- Content columns ------------------------------------------------- */

	div.column_text,
	div.column_images,
	div.listingItem div.column_text {
		float: none;
		width: auto;
	}

	div.column_images {
		padding-top: 14px;
	}

	/* Stacked layout puts the cover directly below the shop button. The button
	   is an inline element, so its vertical padding does not take up any layout
	   space and it overflows into whatever follows. inline-block makes the
	   padding count, and the margin then holds the cover clear of it. */
	.buy {
		display: inline-block;
		margin-bottom: 15px;
	}

	div.column_images img {
		margin: 0 auto;
	}

	div.listingItem {
		padding: 10px 0 18px;
	}

	div.listingItem div.column_text h2 {
		line-height: 26px;
		font-size: 19px;
	}

	/* Wide fixed-size panes from the desktop composition. */
	div.listingItem div.column_text div.imagePane,
	div.listingItem div.column_text div.imagePane div.canvas {
		width: auto;
		height: auto;
		background-image: none;
	}

	/* Date tables and any other wide block scroll on their own. */
	div.column_text table {
		display: block;
		overflow-x: auto;
		width: 100%;
	}

	/* --- Home page ------------------------------------------------------- */

	/* The desktop home page is an absolute composition over home.jpg.
	   On mobile it returns to normal flow. */
	#home div#stage div.content {
		position: static;
		width: auto;
		height: auto;
		background-image: none;
	}

	#home h1,
	#home h2.heading_section,
	#home p.intro,
	#home div#stage div.content ul,
	#home div#stage div.content ul.three,
	#home div#stage div.content ul.four,
	#home div#stage div.content ul li a span.canvas,
	#home div#stage div.content ul li a span.linkTitle {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
	}

	/* These sat on a dark photo; on white they need readable colours. */
	#home h2.heading_section { color: #888; }
	#home p.intro            { color: #333; }

	#home div#stage div.content ul li {
		padding-bottom: 8px;
	}

	#home div#stage div.content ul li a,
	#home div#stage div.content ul li a:link,
	#home div#stage div.content ul li a:visited {
		display: flex;
		align-items: center;
		gap: 12px;
		width: auto;
		height: auto;
		padding: 8px;
		background: #5b7085;
		color: #fff;
	}

	#home div#stage div.content ul li a:hover,
	#home div#stage div.content ul li a:active {
		background: #6d8399;
	}

	#home div#stage div.content ul li a span.canvas {
		flex: 0 0 auto;
		width: 60px;
	}

	#home div#stage div.content ul li a span.canvas img {
		margin: 0;
	}

	/* twoLines has to be named explicitly. Its rule in screen_default.css carries
	   an extra class and so outspecifies this one, and what it carries are
	   desktop measurements for the fixed 60px tile: 20px of padding above the
	   text and a 23px line height. Both leaked into the mobile tile, where the
	   padding alone made a two-line entry 21px taller than a one-line one. Here
	   the tile has no fixed height to centre inside, so the text simply starts at
	   the top of its box and the flex row centres it. */
	#home div#stage div.content ul li a span.linkTitle,
	#home div#stage div.content ul li a span.linkTitle.twoLines {
		padding-top: 0;
		font-size: 16px;
		line-height: 21px;
	}

	/* --- Sitemap --------------------------------------------------------- */

	/* sitemap.png is a 986x1 strip repeated down; #BCCEE0 is its colour, so the
	   flat fallback keeps the original link and heading contrast. */
	div#sitemap {
		padding-bottom: 10px;
		background-image: none;
		background-color: #bccee0;
	}

	div#sitemap h5 {
		padding: 18px 16px 14px;
	}

	div#sitemap div.column {
		float: none;
		width: auto;
		margin-left: 0;
		padding: 0 16px 18px;
	}

	div#sitemap div.bottom {
		display: none;
	}

	/* --- Footer ---------------------------------------------------------- */

	div#footer {
		background-image: none;
		background-color: #fff;
	}

	div#footer div.left,
	div#footer div.right {
		float: none;
		padding: 10px 16px;
	}
}

/* ### Small phones ######################################################## */

@media (max-width: 480px) {

	div#stage {
		padding: 12px;
	}

	h1 {
		line-height: 30px;
		font-size: 25px;
	}

	div.listingItem div.column_text h2 {
		line-height: 24px;
		font-size: 18px;
	}
}