/* Amber Prism — zlatko.hu */

body {
	background-color: #1a1510;
	/* triangular facet tessellation */
	background-image:
		linear-gradient(60deg,  rgba(212,135,10,0.07) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.07) 75%),
		linear-gradient(-60deg, rgba(212,135,10,0.07) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.07) 75%),
		linear-gradient(60deg,  rgba(212,135,10,0.04) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.04) 75%),
		linear-gradient(-60deg, rgba(212,135,10,0.04) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.04) 75%);
	background-size: 80px 138px, 80px 138px, 40px 69px, 40px 69px;
	background-position: 0 0, 0 0, 40px 69px, 40px 69px;
	font-family: "Arial CE", "Arial", "Helvetica", sans-serif;
	font-size: 10.5pt;
	color: #d4c89a;
	margin-top: 235px;
	margin-bottom: 100px;
}

a {
	color: #c87d00;
	text-decoration: none;
}
a:hover {
	color: #f2b84b;
	text-decoration: none;
}

h1 {
	background: rgba(212,135,10,0.13);
	border-left: 3px solid rgba(212,135,10,0.65);
	width: 100%;
	box-sizing: border-box;
	font-size: 10.5pt;
	font-weight: normal;
	padding: 4px 4px 4px 8px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #e4b860;
}

#main {
	margin-left: 282px;
	margin-right: 100px;
}

#logo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 210px;
	height: 560px;
	overflow: hidden;
}
html * > #logo { position: fixed; }
/* the mark now lives in logo.svg rather than inline on every page */
#logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* replaces the deprecated align="right" attribute */
.figright {
	float: right;
	margin: 0 0 10px 18px;
	max-width: 100%;
}

#head {
	color: #d4c89a;
	position: absolute;
	top: 0px;
	left: 210px;
	/* right rather than width:100% — with width the box ran 210px past the
	   viewport, which put the tail of the gradient and of the nav off-screen */
	right: 0;
	height: 230px;
	border-bottom: 1px solid rgba(212,135,10,0.45);
	box-shadow: 0 2px 24px rgba(212,135,10,0.18);
	/* visible so the nav dropdowns are not clipped by the header box */
	overflow: visible;
	z-index: 20;
	/* layered: ambient glow + main dark gradient */
	background:
		linear-gradient(160deg, rgba(212,135,10,0.28) 0%, rgba(212,135,10,0.06) 28%, transparent 55%),
		linear-gradient(to right, #1a1510 0%, #231a0e 38%, #1a1510 100%);
}
html * > #head { position: fixed; }

/* thin light-ray shafts */
#head::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(158deg, rgba(242,184,75,0.20) 0%, transparent 14%),
		linear-gradient(164deg, rgba(242,184,75,0.10) 0%, transparent 18%),
		linear-gradient(149deg, rgba(242,184,75,0.06) 0%, transparent 24%);
	pointer-events: none;
}

/* glowing bottom hairline sweep */
#head::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 55%; height: 2px;
	background: linear-gradient(to right, rgba(242,184,75,0.7), transparent);
	pointer-events: none;
}

#navbar {
	position: absolute;
	top: 175px;
	left: 80px;
	/* a definite width instead of shrink-to-fit: if the eight tabs ever do
	   outgrow the bar they wrap and stay clickable rather than running off
	   the edge of a fixed header nothing can scroll */
	right: 16px;
	font-size: 19pt;
	color: #d4c89a;
	text-shadow: 0 0 22px rgba(212,135,10,0.65), 1px 1px 4px rgba(0,0,0,0.9);
}
html * > #navbar { top: 157px; }

#head a {
	color: #c0a870;
}
#head a:hover {
	color: #f2b84b;
	text-decoration: none;
}

/* ---------- primary navigation with dropdowns ---------- */

#nav, #nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

#nav > li {
	position: relative;
	display: flex;
	align-items: baseline;
}

/* the old " | " separators, now drawn by CSS */
#nav > li + li::before {
	content: "|";
	padding: 0 6px;
	color: rgba(192,168,112,0.55);
	text-shadow: none;
}

#nav > li > a {
	white-space: nowrap;
}

/* caret button that opens a submenu — kept narrow so eight of them still
   fit on one line, with an invisible 30px hit area for touch */
.sub-toggle {
	position: relative;
	font: inherit;
	font-size: 10pt;
	line-height: 1;
	background: none;
	border: 0;
	margin: 0;
	padding: 0 0 0 4px;
	color: rgba(192,168,112,0.75);
	cursor: pointer;
	text-shadow: none;
}
.sub-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
}
.sub-toggle:hover,
#nav > li[data-open] > .sub-toggle {
	color: #f2b84b;
}
.sub-toggle:focus-visible,
#nav a:focus-visible {
	outline: 1px dotted #f2b84b;
	outline-offset: 3px;
}
.sub-caret {
	display: inline-block;
	transition: transform 0.15s ease;
}
#nav > li[data-open] > .sub-toggle .sub-caret {
	transform: rotate(180deg);
}

/* ---------- the dropdown panel ---------- */

#nav .sub {
	display: none;
	position: absolute;
	top: 100%;
	left: -10px;
	min-width: 210px;
	margin-top: 12px;
	padding: 5px 0;
	background: #1d1710;
	border: 1px solid rgba(212,135,10,0.38);
	box-shadow: 0 10px 34px rgba(0,0,0,0.75), 0 0 22px rgba(212,135,10,0.10);
	font-size: 9.5pt;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	text-shadow: none;
	z-index: 50;
}

/* invisible bridge so the pointer can cross the gap without closing */
#nav .sub::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

#nav > li[data-open] > .sub {
	display: block;
}

/* no-JS fallback: hover and keyboard focus alone open the menu */
html:not(.js) #nav > li:hover > .sub,
html:not(.js) #nav > li:focus-within > .sub {
	display: block;
}
html:not(.js) .sub-toggle {
	cursor: default;
}

#nav .sub li {
	display: block;
}

#nav .sub a {
	display: block;
	padding: 6px 15px;
	color: #b8a882;
	text-decoration: none;
}
#nav .sub a:hover,
#nav .sub a:focus {
	background: rgba(212,135,10,0.15);
	color: #f2b84b;
}
#nav .sub a.ittvagyunk {
	text-shadow: none;
}
#nav .sub .ext {
	color: rgba(192,168,112,0.6);
}

@media (prefers-reduced-motion: reduce) {
	.sub-caret { transition: none; }
}

/* ---------- the narrow-viewport bar ---------- */

/* Two menus — the section, then the page inside it — that nav.js builds from
   the markup already present in the page. Hidden until the header gives way
   to it in the phone block at the end of this file.

   They are not <select>s: a native picker hands the list to the OS, which
   draws it in its own colours and loses the marks, the rules and the ↗ on the
   links out. These are buttons over a panel of real links, dropped full width
   under the bar and dressed like the desktop dropdowns. */

#navmob {
	display: none;
	position: sticky;
	top: 0;
	z-index: 60;
	align-items: stretch;
	gap: 8px;
	padding: 6px 10px;
	border-bottom: 1px solid rgba(212,135,10,0.45);
	background: linear-gradient(to right, #1a1510 0%, #241b0f 45%, #1a1510 100%);
	box-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

/* the header's glowing hairline, kept so the bar reads as the same object */
#navmob::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 55%; height: 2px;
	background: linear-gradient(to right, rgba(242,184,75,0.7), transparent);
	pointer-events: none;
}

/* logo-h.svg again, cropped by its own preserveAspectRatio to the mark panel */
#navmob .navmob-mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
#navmob .navmob-mark img {
	display: block;
	width: 36px;
	height: 36px;
}

#navmob .navmob-menu {
	flex: 1 1 0;
	min-width: 0;
}
/* the page names are the long ones, so give that menu the larger share */
#navmob .navmob-page { flex-grow: 1.5; }

.navmob-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	height: 100%;
	font-family: inherit;
	font-size: 10.5pt;
	line-height: 1.2;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: left;
	color: #e4b860;
	background: rgba(212,135,10,0.10);
	border: 1px solid rgba(212,135,10,0.38);
	border-radius: 0;
	padding: 8px 9px;
	cursor: pointer;
}
.navmob-lbl {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.navmob-caret {
	flex: 0 0 auto;
	font-size: 8pt;
	color: rgba(192,168,112,0.8);
	transition: transform 0.15s ease;
}
.navmob-menu[data-open] .navmob-btn {
	background: rgba(212,135,10,0.22);
	border-color: rgba(212,135,10,0.75);
	color: #f2b84b;
}
.navmob-menu[data-open] .navmob-caret {
	transform: rotate(180deg);
	color: #f2b84b;
}
.navmob-btn:focus-visible,
.navmob-list a:focus-visible {
	outline: 1px dotted #f2b84b;
	outline-offset: -3px;
}

/* the panel: full width of the bar, so neither menu can collide with an edge */
.navmob-list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 61;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #1d1710;
	border-bottom: 1px solid rgba(212,135,10,0.38);
	box-shadow: 0 14px 34px rgba(0,0,0,0.8), 0 0 22px rgba(212,135,10,0.10);
	max-height: 72vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.navmob-menu[data-open] .navmob-list {
	display: block;
	animation: navmob-drop 0.16s ease-out;
}
@keyframes navmob-drop {
	from { opacity: 0; transform: translateY(-7px); }
	to   { opacity: 1; transform: none; }
}

.navmob-list li { line-height: inherit; }

.navmob-list a {
	display: block;
	position: relative;
	padding: 11px 14px 11px 32px;
	font-size: 10.5pt;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #b8a882;
	border-bottom: 1px solid rgba(212,135,10,0.12);
}
.navmob-list li:last-child a { border-bottom: none; }

/* the banner's diamond accent, one per row; filled on the page you are on */
.navmob-list a::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -4px;
	border: 1px solid rgba(212,135,10,0.45);
	transform: rotate(45deg);
}
.navmob-list a:hover,
.navmob-list a:focus {
	background: rgba(212,135,10,0.15);
	color: #f2b84b;
}
.navmob-list a.ittvagyunk::before {
	background: #d4870a;
	border-color: #d4870a;
}
.navmob-list .ext { color: rgba(192,168,112,0.6); }

@media (prefers-reduced-motion: reduce) {
	.navmob-caret { transition: none; }
	.navmob-menu[data-open] .navmob-list { animation: none; }
}

/* ---------- how the layout gives way as the window narrows ----------

   The five tabs measure 517px at 19pt in Arial (380px of text, 74px of "|"
   separators, 63px of carets — the ▾ is not in Arial and falls back, so it is
   the one part of that figure that is calibrated rather than read out of the
   font). The wide layout spends 210px on the banner strip plus another 80px
   indenting the bar, with a 16px gutter after, so the room for the row is
   (viewport − 306) and the tabs clear the strip down to 823px.

   It was eight tabs at 862px before plugins, apps and interaction were folded
   into home and inventions, which needed 1168px and is why this step used to
   sit at 1220px. Re-measure if the tabs or the type change.

   960px          both steps now happen here. The strip goes — the header takes
                  the full width and the mark comes back above the tabs as
                  logo-h.svg, the same design laid on its side — and #navmob
                  takes over the navigation (last block in the file).

   The tabs are no longer what forces the step: they would clear the strip for
   another 137px. Two other things stop it going lower. The 282px indent spends
   more of a sub-960px window than the tab row saves, and the no-JS path needs
   the horizontal lockup to exist at or above the width where #navmob would have
   replaced it, because the last block unpins that lockup rather than building
   it. So the two thresholds are held together deliberately: moving this one
   down means moving that one down with it. The tabs never change size. */

@media (max-width: 960px) {
	body { margin-top: 132px; }

	/* the tall strip becomes the horizontal lockup, laid over the header.
	   Painted as a background rather than swapping the <img> src, so it is in
	   place at the first paint instead of arriving with the deferred nav.js */
	#logo, html * > #logo {
		position: fixed;
		top: 14px;
		left: 24px;
		width: 210px;
		height: 60px;
		z-index: 25;
		background: url("logo-h.svg") no-repeat 0 0;
		background-size: 210px 60px;
	}
	#logo img { display: none; }

	#head, html * > #head {
		left: 0;
		height: 124px;
	}

	#navbar, html * > #navbar {
		left: 24px;
		right: 12px;
		top: 84px;
	}

	#main {
		margin-left: 24px;
		margin-right: 40px;
		/* non-binding now this block starts at 960px, but it is what keeps the
		   measure sane if the threshold is ever moved back up */
		max-width: 940px;
	}
}

/* index of subpages shown on each section landing page */
ul.secindex {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.secindex li {
	padding: 9px 0;
	border-bottom: 1px solid rgba(212,135,10,0.14);
	line-height: 1.6;
}
ul.secindex li:last-child { border-bottom: none; }
ul.secindex a {
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
ul.secindex .desc {
	display: block;
	color: #8e825f;
}
ul.secindex .ext {
	color: rgba(192,168,112,0.6);
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ittvagyunk {
	color: #d4870a !important;
	text-shadow: 0 0 12px rgba(212,135,10,0.55);
}

p {
	padding-top: 15px;
	padding-bottom: 10px;
	text-align: justify;
	line-height: 1.75;
}

ul li {
	line-height: 1.65;
	color: #b8a882;
}
ul li::marker {
	color: rgba(212,135,10,0.5);
}

/* publication list — text page */
ol.papers {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol.papers li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(212,135,10,0.14);
	line-height: 1.6;
	overflow: hidden;
}
ol.papers li:last-child { border-bottom: none; }

.yr {
	float: left;
	width: 46px;
	color: #d4870a;
	letter-spacing: 1px;
}
.rec { display: block; margin-left: 62px; }
.aut { color: #b8a882; }
.ven { color: #8e825f; font-style: italic; }

.print { display: none; }

@media print {
	@page { margin: 10%; }
	h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; }
	ul, ol, dl { page-break-before: avoid; }
	h1 { color: #000; padding: 0 20px 0 0; }
	.noprint { display: none; }
	.print { display: inline !important; }
	#nav .sub, .sub-toggle { display: none !important; }
	/* beats html.js #navmob { display: flex } when printing a narrow window */
	#navmob { display: none !important; }
}


/* ---------- track lists and the play bar ---------- */

/* player.js puts a button in front of every mp3 link and drops the run of
   &nbsp that used to indent the row, so the indent is restored here. */

.trkbtn {
	font-family: inherit;
	font-size: 8.5pt;
	line-height: 1;
	vertical-align: 1px;
	margin: 0 9px 0 3.2em;
	padding: 3px 0 4px;
	width: 24px;
	background: rgba(212,135,10,0.10);
	border: 1px solid rgba(212,135,10,0.38);
	color: #c87d00;
	cursor: pointer;
}
.trkbtn:hover {
	background: rgba(212,135,10,0.22);
	color: #f2b84b;
}
.trkbtn.on {
	background: rgba(212,135,10,0.28);
	border-color: rgba(212,135,10,0.75);
	color: #f2b84b;
}
.trkbtn:focus-visible,
.pb-btn:focus-visible,
.pb-seek:focus-visible {
	outline: 1px dotted #f2b84b;
	outline-offset: 2px;
}

a.trk {
	cursor: pointer;
}
a.trk[data-playing] {
	color: #f2b84b;
	text-shadow: 0 0 12px rgba(212,135,10,0.5);
}

#playbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	font-size: 10.5pt;
	color: #d4c89a;
	border-top: 1px solid rgba(212,135,10,0.45);
	background: linear-gradient(to right, #1a1510 0%, #241b0f 45%, #1a1510 100%);
	box-shadow: 0 -2px 18px rgba(0,0,0,0.75), 0 0 22px rgba(212,135,10,0.10);
}

.pb-btn {
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 9.5pt;
	line-height: 1;
	min-width: 32px;
	padding: 6px 7px;
	background: rgba(212,135,10,0.10);
	border: 1px solid rgba(212,135,10,0.38);
	color: #c87d00;
	cursor: pointer;
}
.pb-btn:hover { background: rgba(212,135,10,0.22); color: #f2b84b; }
.pb-ff.on {
	background: rgba(212,135,10,0.30);
	border-color: rgba(212,135,10,0.75);
	color: #f2b84b;
}

.pb-time {
	flex: 0 0 auto;
	font-size: 9pt;
	letter-spacing: 0.5px;
	color: #8e825f;
	font-variant-numeric: tabular-nums;
	min-width: 3.1em;
	text-align: center;
}

.pb-seek {
	flex: 1 1 auto;
	min-width: 50px;
	height: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(212,135,10,0.22);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.pb-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 15px;
	border: 0;
	border-radius: 0;
	background: #d4870a;
	box-shadow: 0 0 9px rgba(212,135,10,0.75);
	cursor: pointer;
}
.pb-seek::-moz-range-track {
	height: 4px;
	border: 0;
	background: rgba(212,135,10,0.22);
}
.pb-seek::-moz-range-thumb {
	width: 10px;
	height: 15px;
	border: 0;
	border-radius: 0;
	background: #d4870a;
	box-shadow: 0 0 9px rgba(212,135,10,0.75);
	cursor: pointer;
}

.pb-title {
	flex: 0 1 auto;
	max-width: 30%;
	font-size: 9.5pt;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #e4b860;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* the bar is fixed, so the tail of a page needs somewhere to end */
html.pb-on body { padding-bottom: 54px; }

@media (max-width: 700px) {
	#playbar { gap: 7px; padding: 7px 9px; }
	.pb-title { display: none; }
	.trkbtn { margin-left: 0.6em; }
}

/* Narrow viewports. Same 960px threshold as the block above, which is where the
   banner strip gives way to the horizontal lockup — the two are deliberately
   held together (see the note there). The five tabs would in fact still fit at
   this width; it is the measure of the page as a whole that has run out, not the
   row. So the header goes and #navmob carries the navigation in its two menus,
   and the no-JS path unpins the lockup the block above has already established.

   This block must stay last in the file — the base p { text-align: justify }
   would otherwise override the ragged-right rule below. */
@media (max-width: 960px) {
	body {
		margin-bottom: 40px;
		font-size: 11pt;
	}

	#main {
		margin-left: 14px;
		margin-right: 14px;
	}

	/* justification opens rivers at this measure */
	p { text-align: left; }

	.figright { float: none; display: block; margin: 12px 0 0; }

	/* the usual case: nav.js has built the compact bar, so the banner strip
	   and the header block are simply not drawn */
	html.js body { margin-top: 0; }
	html.js #logo, html.js #head { display: none; }
	html.js #navmob { display: flex; }

	/* no script: nothing has replaced the header, so unpin it and stack it
	   rather than leave the page with no navigation at all */
	html:not(.js) body { margin-top: 0; }

	/* already the horizontal lockup from the block above, which shares this
	   breakpoint; just unpin it and let it sit above the stacked header */
	html:not(.js) #logo {
		position: static;
		width: 210px;
		height: 60px;
		margin: 8px 0 0 14px;
	}

	html:not(.js) #head {
		position: static;
		left: 0;
		right: auto;
		height: auto;
		padding-bottom: 10px;
		box-shadow: none;
	}
	html:not(.js) #head::before,
	html:not(.js) #head::after { display: none; }

	html:not(.js) #navbar {
		position: static;
		left: 0;
		right: auto;
		top: 0;
		font-size: 12pt;
		padding: 0 12px;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
	}
	html:not(.js) #nav { row-gap: 4px; }

	/* wrapped rows make the inline pipes read as stray characters */
	html:not(.js) #nav > li + li::before { display: none; }
	html:not(.js) #nav > li { margin-right: 14px; }
}