/* ==========================================================================
   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 */
	--u: calc(100vw / 1920);

	--tb-header-h: calc(130 * var(--u));
	--tb-bar-h: calc(98.3 * var(--u));
	--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-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);
	-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;
	gap: calc(32 * var(--u));
	padding: 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;
	color: inherit;
}

.tb-header__logo-img {
	height: calc(87.54 * var(--u));
	width: auto;
}

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

.tb-header__rule--short {
	flex: 0 0 calc(160 * var(--u));
}

.tb-header__date,
.tb-header__location {
	flex: none;
	font-family: var(--tb-font-display);
	font-size: calc(70 * var(--u));
	line-height: 1;
	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-bar-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(52 * var(--u));
	max-width: 50%;
	margin: 0;
	color: var(--tb-text-c);
	font-weight: 600;
	font-size: calc(46 * var(--u));
	line-height: calc(52 * var(--u));
	letter-spacing: 0.01em;
}

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

.tb-stage {
	--tb-colw: calc(100vw / var(--tb-cols));
	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;
	height: var(--tb-bar-h);
	display: grid;
	grid-template-columns: repeat(var(--tb-cols), minmax(0, 1fr));
	pointer-events: none;
}

.tb-bar {
	position: relative;
	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;
}

.tb-icons {
	position: absolute;
	top: calc(10 * var(--u));
	right: var(--tb-pad);
	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;
}

/* Panels: rise from their bar. Closed geometry = the bar's own cell. */
.tb-panel {
	position: absolute;
	bottom: 0;
	left: calc(var(--tb-start) * var(--tb-colw));
	width: calc(var(--tb-span) * var(--tb-colw));
	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);
}

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

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

/* The heading stays above its own column, even when the panel extends left */
.tb-panel__head {
	position: absolute;
	top: 0;
	left: calc((var(--tb-col) - var(--tb-start)) * var(--tb-colw));
	width: var(--tb-colw);
	transition: left var(--tb-dur) var(--tb-ease);
}

.tb-panel__content {
	position: absolute;
	top: calc(var(--tb-heading-top) + var(--tb-title-lh) + var(--tb-rule-gap) + var(--tb-rule) + 40 * var(--u));
	bottom: var(--tb-bar-h);
	left: 0;
	/* Final width straight away, so text doesn't reflow while the panel grows */
	width: calc(var(--tb-span) * var(--tb-colw));
	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-span), minmax(0, 1fr));
	column-gap: calc(2 * var(--tb-pad));
	row-gap: calc(40 * var(--u));
	align-items: start;
}

.tb-col {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
	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 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;
}
.tb-block--image figcaption {
	margin-top: calc(8 * var(--u));
	font-size: max(12px, calc(16 * var(--u)));
}

.tb-block--quote p {
	margin: 0;
	font-weight: 400;
	font-size: calc(46 * var(--u));
	line-height: calc(56 * 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)));
}

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