/* ==========================================================================
   TasteBasel — desktop layout
   Designed at 1920×1080. All sizes are design pixels × --u, so the layout
   keeps its proportions at any desktop width.
   ========================================================================== */

@font-face {
	font-family: "Coolvetica Cram";
	src: url("../fonts/coolvetica-rg-cram.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Minion Concept";
	src: url("../fonts/minion-variable-concept-roman.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Minion Concept";
	src: url("../fonts/minion-variable-concept-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Brand colours (from the logo files) */
	--tb-beige: #f1edde;
	--tb-persimmon: #e04c26;
	--tb-torf: #372e14;
	--tb-darkforest: #1e2614;
	--tb-jade: #a5be9b;

	--tb-font-display: "Coolvetica Cram", "Arial Narrow", sans-serif;
	--tb-font-text: "Minion Concept", "Minion Pro", Georgia, serif;

	/* 1 design pixel. Scales with the width on desktop; on tablets it stops
	   shrinking at 0.75 (unless the screen is very short, e.g. a phone on its side). */
	--u: max(calc(100vw / 1920), min(0.75px, calc(100vh / 1080)));

	--tb-header-h: calc(130 * var(--u));
	--tb-bar-h: calc(98.3 * var(--u));
	--tb-bars-h: var(--tb-bar-h); /* whole menu: 1 row, 2×2 on phones */
	--tb-pad: calc(34 * var(--u));
	--tb-rule: max(1px, calc(1.5 * var(--u)));

	/* Menu heading: title + underline, shared by bar and open panel */
	--tb-heading-top: calc(14 * var(--u));
	--tb-title-size: calc(30 * var(--u));
	--tb-title-lh: calc(36 * var(--u));
	--tb-rule-gap: calc(13 * var(--u));
	--tb-head-drop: calc(10 * var(--u)); /* open panel: heading sits a little lower than in the bar */
	--tb-content-gap: calc(22 * var(--u)); /* open panel: rule → first line of text */

	--tb-dur: 700ms;
	--tb-ease: cubic-bezier(0.7, 0, 0.3, 1);
}

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

html,
body {
	height: 100%;
}

body {
	margin: 0;
	overflow: hidden;
	background: var(--tb-darkforest);
	color: var(--tb-beige);
	font-family: var(--tb-font-text);
	/* The design uses Minion's text cut (opsz 11) at every size; browsers would
	   otherwise switch to the narrower display cut for large type. */
	font-optical-sizing: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tb-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	height: var(--tb-header-h);
	display: flex;
	align-items: center;
	/* Spacing measured from the 1920×1080 draft */
	gap: calc(42 * var(--u));
	padding: 0 calc(42 * var(--u)) 0 var(--tb-pad);
	color: var(--tb-beige);
	background: linear-gradient(90deg,
		#e04c26 0%,
		#a2411f 7%,
		#73381a 14%,
		#523216 21%,
		#3e2f14 30%,
		#372e14 42%,
		#3b3319 52%,
		#1e2614 62%,
		#1e2614 84%,
		#5b5d40 90%,
		#9bb18e 97%,
		#a5be9a 100%);
}

.tb-header__logo {
	flex: none;
	margin-right: calc(-10 * var(--u)); /* the SVG has its own margin */
	color: inherit;
}

.tb-header__logo-img {
	/* 87.54px letter height in the draft; the SVG adds a little margin around it */
	height: calc(90 * var(--u));
	width: auto;
}

/* No logo image: the name as text, same font as the date (70px → 46.49px capitals),
   scaled to the draft's 87.54px capitals. */
.tb-header__logo--text {
	margin-right: 0;
	font-family: var(--tb-font-display);
	font-size: calc(132 * var(--u));
	line-height: calc(132 * var(--u));
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}

.tb-header__rule {
	flex: 1 1 auto;
	height: var(--tb-rule);
	background: currentColor;
}

.tb-header__rule--short {
	flex: 0 0 calc(207 * var(--u));
	margin-right: calc(-6 * var(--u)); /* draft gaps: 46 / 42 / 37 px */
}

.tb-header__date {
	margin-left: calc(4 * var(--u));
}

.tb-header__date,
.tb-header__location {
	flex: none;
	font-family: var(--tb-font-display);
	font-size: calc(70 * var(--u));
	line-height: calc(74 * var(--u));
	letter-spacing: 0.01em;
	position: relative;
	top: calc(-2 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Hero (centre area)
   -------------------------------------------------------------------------- */

.tb-hero {
	position: fixed;
	top: var(--tb-header-h);
	left: 0;
	right: 0;
	bottom: var(--tb-bars-h);
	z-index: 1;
	overflow: hidden;
	background: var(--tb-darkforest);
}

.tb-slide {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tb-fade, 1200ms) ease;
}

.tb-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.tb-slide__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.tb-slide__tint {
	position: absolute;
	inset: 0;
	background: var(--tb-tint);
	opacity: var(--tb-tint-o);
}

.tb-slide__overlay {
	position: absolute;
	top: 50%;
	height: calc(var(--tb-ov-scale, 100) * 1%);
	width: auto;
	max-width: none;
	transform: translateY(-50%);
	pointer-events: none;
}
.tb-slide__overlay.is-left { left: var(--tb-pad); }
.tb-slide__overlay.is-right { right: var(--tb-pad); }
.tb-slide__overlay.is-center { left: 50%; transform: translate(-50%, -50%); }

.tb-slide__text {
	position: absolute;
	left: var(--tb-pad);
	bottom: calc(68 * var(--u));
	max-width: 50%;
	margin: 0;
	color: var(--tb-text-c);
	font-weight: 600;
	font-size: calc(50 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: 0.01em;
}

/* Sound on / off (video slides): bottom right, level with the slide text */
.tb-hero__sound {
	position: absolute;
	right: var(--tb-pad);
	bottom: calc(68 * var(--u));
	z-index: 2;
	display: grid;
	place-items: center;
	width: max(40px, calc(48 * var(--u)));
	height: max(40px, calc(48 * var(--u)));
	padding: 0;
	border: var(--tb-rule) solid currentColor;
	border-radius: 0;
	background: rgba(30, 38, 20, 0.35);
	color: var(--tb-beige);
	cursor: pointer;
	transition: background-color 200ms ease;
}
.tb-hero__sound[hidden] {
	display: none;
}
.tb-hero__sound:hover,
.tb-hero__sound:focus-visible {
	background: rgba(30, 38, 20, 0.6);
}
.tb-hero__sound svg {
	width: 60%;
	height: 60%;
}
.tb-hero__sound[aria-pressed="true"] .tb-hero__sound-off,
.tb-hero__sound[aria-pressed="false"] .tb-hero__sound-on {
	display: none;
}

/* --------------------------------------------------------------------------
   Bottom menu + panels
   -------------------------------------------------------------------------- */

.tb-stage {
	position: fixed;
	top: var(--tb-header-h);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	pointer-events: none;
}

/* Shared heading: title + underline. Identical in the bar and the panel, so
   the panel's heading starts exactly where the bar's was and rises from there. */
.tb-heading {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--tb-heading-top) var(--tb-pad) 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.tb-heading__title {
	display: block;
	font-weight: 600;
	font-size: var(--tb-title-size);
	line-height: var(--tb-title-lh);
	letter-spacing: 0.01em;
}

.tb-heading__rule {
	display: block;
	height: var(--tb-rule);
	margin-top: var(--tb-rule-gap);
	background: currentColor;
}

/* Bars: always on top of the panels */
.tb-bars {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(var(--tb-cols), minmax(0, 1fr));
	grid-auto-rows: var(--tb-bar-h);
	pointer-events: none;
}

.tb-bar {
	position: relative;
	container-type: inline-size;
	background: var(--tb-bg);
	color: var(--tb-fg);
	pointer-events: auto;
}

.tb-bar__toggle {
	height: 100%;
}

/* The open panel shows through its own bar; only the underline and icons stay */
.tb-bar.is-active {
	background: transparent;
}
.tb-bar.is-active .tb-heading__title {
	visibility: hidden;
}

/* Icons and the language switcher, top right of a menu item, sitting on the
   same line as the title: same top, line height and size, bottoms on its baseline. */
.tb-bar__tools {
	position: absolute;
	top: var(--tb-heading-top);
	right: var(--tb-pad);
	height: var(--tb-title-lh);
	display: flex;
	align-items: baseline;
	gap: calc(22 * var(--u));
	font-size: var(--tb-title-size);
	line-height: var(--tb-title-lh);
}
/* An invisible character on the title's line sets the baseline… */
.tb-bar__tools::before {
	content: "\200b";
	margin-right: calc(-1 * var(--tb-tools-gap, 22 * var(--u)));
}
/* …and the icons (taller than the text) don't push it down: their bottoms sit on it */
.tb-bar__tools > .tb-icons {
	margin-top: -200px;
}
.tb-icons {
	display: flex;
	gap: calc(16 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.tb-icons a {
	display: block;
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	color: inherit;
}

.tb-icons svg,
.tb-icons img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Built-in icons: lowest line on the baseline (the drawing has a little space below) */
.tb-icons svg {
	transform: translateY(var(--tb-icon-drop, 0%));
}

/* DE / EN: current language underlined like the menu titles */
.tb-lang {
	display: flex;
	gap: calc(12 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.tb-lang a {
	display: block;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.25em;
	text-decoration-thickness: var(--tb-rule);
}
.tb-lang a:hover,
.tb-lang a:focus-visible,
.tb-lang a[aria-current] {
	text-decoration: underline;
}
/* Narrow menu items (phones, small tablets): only the link to the other language */
@container (max-width: 280px) {
	.tb-lang .is-current {
		display: none;
	}
}

/* Panels: rise from their bar. Geometry is set in px by main.js:
   closed = the bar's own cell, open = the width worked out for this screen. */
.tb-panel {
	position: absolute;
	left: var(--tb-left, 0px);
	bottom: var(--tb-bottom, 0px);
	width: var(--tb-width, 25%);
	height: var(--tb-height, var(--tb-bar-h));
	z-index: 1;
	overflow: hidden;
	visibility: hidden;
	background: var(--tb-bg);
	color: var(--tb-fg);
	pointer-events: auto;
	transition:
		height var(--tb-dur) var(--tb-ease),
		width var(--tb-dur) var(--tb-ease),
		left var(--tb-dur) var(--tb-ease),
		bottom var(--tb-dur) var(--tb-ease);
}

/* Resizing with a panel open, or snapping onto the bar before opening: jump, don't animate */
.tb-stage.is-resizing .tb-panel,
.tb-stage.is-resizing .tb-panel__head,
.tb-panel.is-snapping,
.tb-panel.is-snapping .tb-panel__head {
	transition: none;
}

.tb-panel.is-visible {
	visibility: visible;
}

.tb-panel.is-open {
	z-index: 2;
}

.tb-panel.is-open .tb-panel__head {
	top: var(--tb-head-drop);
}

/* The heading stays above its own menu item, even when the panel extends left */
.tb-panel__head {
	position: absolute;
	top: 0;
	left: var(--tb-head-left, 0px);
	width: var(--tb-head-w, 100%);
	transition:
		top var(--tb-dur) var(--tb-ease),
		left var(--tb-dur) var(--tb-ease),
		width var(--tb-dur) var(--tb-ease);
}

.tb-panel__content {
	position: absolute;
	top: calc(var(--tb-head-drop) + var(--tb-heading-top) + var(--tb-title-lh) + var(--tb-rule-gap) + var(--tb-rule) + var(--tb-content-gap));
	bottom: var(--tb-bars-h);
	left: 0;
	/* Final width straight away, so text doesn't reflow while the panel grows */
	width: var(--tb-open-w, 100%);
	padding: 0 var(--tb-pad) calc(24 * var(--u));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: currentColor transparent;
	/* Soft edge where long content scrolls under the menu */
	mask-image: linear-gradient(to bottom, #000 calc(100% - 40 * var(--u)), transparent);
	opacity: 0;
	transition: opacity 200ms ease;
}

.tb-panel.is-open .tb-panel__content {
	opacity: 1;
	transition: opacity 400ms ease calc(var(--tb-dur) * 0.8);
}

/* Content columns: one per column of panel width; extra columns wrap below */
.tb-cols {
	display: grid;
	grid-template-columns: repeat(var(--tb-ccols, 1), minmax(0, 1fr));
	column-gap: calc(2 * var(--tb-pad));
	row-gap: calc(40 * var(--u));
	align-items: start;
}

.tb-col {
	--tb-col-gap: calc(24 * var(--u));
	display: flex;
	flex-direction: column;
	gap: var(--tb-col-gap);
	min-width: 0;
}

.tb-block {
	margin: 0;
}

.tb-block--text {
	font-weight: 500;
	font-size: max(13px, calc(20 * var(--u)));
	line-height: max(16px, calc(24 * var(--u)));
	letter-spacing: 0.025em;
	text-align: justify;
	hyphens: auto;
}
.tb-block--text { max-width: 40em; }
.tb-block--text p { margin: 0 0 1.2em; }
.tb-block--text > :last-child { margin-bottom: 0; }
.tb-block--text a { color: inherit; }

.tb-block--image img {
	width: 100%;
	height: auto;
}
/* Portrait crop, as in the draft (406 × 528 px) */
.tb-block--image.is-portrait img {
	aspect-ratio: 406 / 528;
	object-fit: cover;
}
.tb-block--image figcaption {
	margin-top: calc(8 * var(--u));
	font-size: max(12px, calc(16 * var(--u)));
}

/* A quote at the top of a side-by-side column starts lower, as in the draft.
   Not when the columns are stacked (narrow panels, phones). */
.tb-panel:not(.is-stacked) .tb-col + .tb-col > .tb-block--quote:first-child {
	/* draft: quote starts 98px below the image top and 21px into the column gap */
	margin-top: calc(96 * var(--u));
	margin-left: calc(-21 * var(--u));
}

.tb-block--quote p {
	margin: 0;
	font-weight: 400;
	font-size: calc(50 * var(--u));
	line-height: calc(60 * var(--u));
}
.tb-block--quote cite {
	display: block;
	margin-top: calc(20 * var(--u));
	font-style: italic;
	font-size: max(13px, calc(20 * var(--u)));
}

/* --------------------------------------------------------------------------
   Testimonials: one at a time, crossfading, with ← 1 / 3 → below the quote
   -------------------------------------------------------------------------- */

.tb-slider {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: calc(40 * var(--u));
}
.tb-slider__slides {
	display: grid; /* all slides in one cell: the tallest sets the height */
}
.tb-tslide {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.tb-tslide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 600ms ease;
}
/* Side by side: image | name, quote, text, bottom text, whatever the panel width.
   The image is as wide as the title's underline (its menu item minus the margins);
   the gap to the text is the same as the panel's side margins. */
.tb-panel:not(.is-stacked) .tb-tslide .tb-cols {
	grid-template-columns: min(calc(var(--tb-head-w, 50%) - 2 * var(--tb-pad)), 50%) minmax(0, 1fr);
	column-gap: var(--tb-pad);
}
/* Underline → image = title → underline (title baseline to the line: the line's gap
   plus the part of the title's line below its baseline, about 0.27 of its size). */
.tb-slider {
	margin-top: calc(var(--tb-rule-gap) + 0.27 * var(--tb-title-size) - var(--tb-content-gap));
}
/* Testimonials start at the top of the image, quote or not */
.tb-panel:not(.is-stacked) .tb-tslide .tb-col + .tb-col > .tb-block--quote:first-child {
	margin: 0;
}
/* Name: larger, like the panel titles */
.tb-tname {
	font-weight: 600;
	font-size: var(--tb-title-size);
	line-height: var(--tb-title-lh);
	letter-spacing: 0.01em;
}
/* Testimonial quote and bottom text (orange): 28 / 31 px at 1920, as in the design */
.tb-tslide .tb-block--quote p,
.tb-tbottom {
	font-weight: 400;
	font-size: calc(28 * var(--u));
	line-height: calc(31 * var(--u));
}
.tb-tbottom {
	color: var(--tb-persimmon);
}

/* ← 1 / 3 →
   Stacked (phones): at the end of the testimonial, after the text, left.
   Side by side: main.js moves it to the top of the
   panel (.is-top): right-aligned, squares' bottom level with the title's underline. */
.tb-slider__nav {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: calc(18 * var(--u));
}
.tb-slider__nav.is-top {
	top: calc(var(--tb-head-drop) + var(--tb-heading-top) + var(--tb-title-lh) + var(--tb-rule-gap) + var(--tb-rule) - max(40px, calc(48 * var(--u))));
	left: auto;
	right: calc(100% - var(--tb-open-w, 100%) + var(--tb-pad)); /* right edge of the content */
	z-index: 3;
	opacity: 0;
	transition: opacity 200ms ease;
}
/* Heading on the right (panel opened leftwards): arrows go left instead */
.tb-slider__nav.is-top.is-left {
	left: var(--tb-pad);
	right: auto;
}
.tb-panel.is-open > .tb-slider__nav.is-top {
	opacity: 1;
	transition: opacity 400ms ease calc(var(--tb-dur) * 0.8);
}
/* Stacked (phones): the arrows follow the whole testimonial, after the text. Only the
   shown testimonial sets the height (the others fade over it), so they sit right below it. */
.tb-panel.is-stacked .tb-slider__slides {
	position: relative;
}
.tb-panel.is-stacked .tb-tslide:not(.is-active) {
	position: absolute;
	inset: 0 0 auto;
}
.tb-panel.is-stacked .tb-slider__nav {
	position: static;
	margin-top: var(--tb-content-gap);
}
.tb-slider__btn {
	display: grid;
	place-items: center;
	width: max(40px, calc(48 * var(--u)));
	height: max(40px, calc(48 * var(--u)));
	padding: 0;
	border: var(--tb-rule) solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: max(18px, calc(24 * var(--u)));
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}
.tb-slider__btn:hover,
.tb-slider__btn:focus-visible {
	background: var(--tb-fg);
	color: var(--tb-bg);
}
.tb-slider__count {
	min-width: 3.5em;
	text-align: center;
	font-weight: 600;
	font-size: max(14px, calc(20 * var(--u)));
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Newsletter form (in the panel's colours)
   -------------------------------------------------------------------------- */

.tb-newsletter {
	margin-top: calc(32 * var(--u));
	font-size: max(14px, calc(20 * var(--u)));
	line-height: max(18px, calc(24 * var(--u)));
	letter-spacing: 0.025em;
}
.tb-newsletter p {
	margin: 0;
}
.tb-newsletter__fields {
	display: grid;
	gap: calc(22 * var(--u));
}

.tb-field label {
	display: block;
	margin-bottom: calc(4 * var(--u));
	font-weight: 600;
}
.tb-field input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: calc(6 * var(--u)) 0;
	border: 0;
	border-bottom: var(--tb-rule) solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 500;
	letter-spacing: inherit;
}
.tb-field input:focus {
	outline: none;
	border-bottom-width: calc(var(--tb-rule) * 2.5);
	margin-bottom: calc(var(--tb-rule) * -1.5);
}
.tb-newsletter.is-failed .tb-field input:invalid,
.tb-field input[aria-invalid="true"] {
	border-bottom-style: dashed;
}

.tb-newsletter__consent {
	font-size: max(12px, calc(16 * var(--u)));
	line-height: max(16px, calc(20 * var(--u)));
}
.tb-newsletter__consent a {
	color: inherit;
	text-underline-offset: 0.15em;
}

.tb-button {
	display: inline-block;
	padding: calc(10 * var(--u)) calc(26 * var(--u));
	border: var(--tb-rule) solid var(--tb-fg);
	border-radius: 0;
	background: var(--tb-fg);
	color: var(--tb-bg);
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}
.tb-button:hover,
.tb-button:focus-visible {
	background: transparent;
	color: var(--tb-fg);
}
.tb-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.tb-newsletter__message:empty {
	display: none;
}
.tb-newsletter__message {
	margin-top: calc(22 * var(--u)) !important;
	font-weight: 700;
	color: var(--tb-persimmon);
}
.tb-newsletter.is-done .tb-newsletter__fields {
	display: none;
}
.tb-newsletter.is-done .tb-newsletter__message {
	margin-top: 0 !important;
}
/* Signed up: the message follows the text at the same distance as between its paragraphs (1.2em) */
.tb-newsletter.is-done {
	margin-top: calc(1.2em - var(--tb-col-gap));
}

/* Spam trap: off screen for people, still in the form for bots */
.tb-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Tablet: drop the short header rule so everything fits
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.tb-header__rule--short { display: none; }
}

/* --------------------------------------------------------------------------
   Phones and portrait tablets (under 1000px): menu in two rows (2 × 2), so
   each item has room for its title, icons and the language switcher.
   Panels open full width here (main.js, STACKED_QUERY).
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
	:root {
		--tb-bars-h: calc(var(--tb-bar-h) * var(--tb-mrows, 2));
	}
	.tb-bars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Phone (under 768px): compact header, 2×2 menu, full-screen panels
   (keep in sync with MOBILE_QUERY in main.js)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--tb-header-h: 64px;
		--tb-bar-h: 56px;
		--tb-bars-h: calc(var(--tb-bar-h) * var(--tb-mrows, 2));
		--tb-pad: 16px;
		--tb-rule: 1px;
		--tb-heading-top: 10px;
		--tb-title-size: 18px;
		--tb-title-lh: 22px;
		--tb-rule-gap: 8px;
		--tb-head-drop: 0px;
		--tb-content-gap: 24px;
	}

	/* One line, as on desktop: logo — rule — date — rule — location. The date and
	   location keep their desktop size relative to the logo (70 : 132); on very narrow
	   phones everything shrinks together so it still fits. */
	.tb-header {
		--tb-logo-fs: min(64px, 16.4vw);
		gap: 10px;
		padding: 0 var(--tb-pad);
	}
	.tb-header__logo { margin-right: 0; }
	.tb-header__logo-img { height: 44px; }
	.tb-header__logo--text { font-size: var(--tb-logo-fs); line-height: 1; }
	.tb-header__rule { flex: 2 1 0; min-width: 8px; }
	.tb-header__rule--short { display: block; flex: 1 1 0; min-width: 8px; margin-right: 0; }
	.tb-header__date,
	.tb-header__location {
		top: 0;
		font-size: calc(var(--tb-logo-fs) * 70 / 132);
		line-height: 1;
	}
	.tb-header__date { margin-left: 0; }

	.tb-bars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 16px+ so iPhones don't zoom into the fields */
	.tb-newsletter {
		font-size: 17px;
		line-height: 23px;
	}
	.tb-newsletter__consent {
		font-size: 14px;
		line-height: 19px;
	}

	.tb-bar__tools {
		gap: 12px;
		--tb-tools-gap: 12px;
	}
	.tb-icons {
		gap: 10px;
	}
	.tb-icons a {
		width: 22px;
		height: 22px;
	}

	.tb-hero__sound {
		bottom: 20px;
	}
	.tb-slide__text {
		bottom: 20px;
		max-width: calc(100% - 2 * var(--tb-pad));
		font-size: 28px;
		line-height: 32px;
	}
	/* Room for the sound button while it shows */
	.tb-hero:has(.tb-hero__sound:not([hidden])) .tb-slide__text {
		max-width: calc(100% - 2 * var(--tb-pad) - 52px);
	}

	.tb-panel__content {
		padding-bottom: 24px;
	}

	.tb-block--text {
		font-size: 17px;
		line-height: 23px;
		letter-spacing: 0.01em;
		text-align: left;
	}
	.tb-block--quote p {
		font-size: 28px;
		line-height: 34px;
	}
	.tb-tslide .tb-block--quote p,
	.tb-tbottom {
		font-size: 24px; /* 1.4 × the 17px text, as 28 : 20 on desktop */
		line-height: 27px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root { --tb-dur: 0ms; }
	.tb-slide,
	.tb-tslide,
	.tb-tslide.is-active { transition: none; }
}

/* Very narrow menu items (phones): slightly smaller icons and gaps so two icons
   and EN still fit beside the title. Last in the file so it wins over the phone sizes. */
@container (max-width: 220px) {
	.tb-bar__tools { gap: 8px; --tb-tools-gap: 8px; }
	.tb-icons { gap: 8px; }
	.tb-icons a { width: 18px; height: 18px; }
}