/* Hlavní menu (tmavá lišta, všechny stránky), úvodní stránka (main/{cz,en}/aaa.jsp, třída hf-home),
   levé menu, list pergamenu pro pravidla, Pána hry a bestiář (body.hf-sheet hf-read) i pro stránky aplikace
   (postava, profil, přihlášení: body.hf-sheet hf-app-page).
   Barvy a písma podle návrhu A "Brána" (2026-10-12). Písma Cinzel a Fira Sans jsou v /fonts/home (OFL). */

/* Cinzel 700 latin-ext */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/home/cinzel-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Cinzel 700 latin */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/home/cinzel-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fira Sans 400 latin-ext */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/home/firasans-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fira Sans 400 latin */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/home/firasans-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fira Sans 500 latin-ext */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/home/firasans-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fira Sans 500 latin */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/home/firasans-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fira Sans 600 latin-ext */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/home/firasans-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fira Sans 600 latin */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/home/firasans-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--hf-ink: #13110e;
	--hf-panel: #1c1914;
	--hf-line: #3b342a;
	--hf-line2: #574b3a;
	--hf-brass: #c9a35c;
	--hf-brass-hi: #ecd08f;
	--hf-text: #ece3d1;
	--hf-muted: #a99f8b;
	--hf-disp: "Cinzel", Georgia, serif;
	--hf-ui: "Fira Sans", "Segoe UI", system-ui, sans-serif;
	--hf-head: 56px;
}

/* ---------- menu ---------- */
#header-container {
	padding: 0;
	min-height: var(--hf-head);
	background: var(--hf-ink);
	border-bottom: 1px solid var(--hf-line2);
}
#header-container .header { display: flex; align-items: center; }
#header-container .header > .d-flex { flex: 1; align-items: center; }
#header-container #menu-switch { margin: 0 0 0 14px; font-size: 1.45em; line-height: 1; color: var(--hf-brass-hi); }
#sidebar-wrapper { top: var(--hf-head); }

.hf-nav { flex: 1; position: relative; display: flex; align-items: center; gap: 14px; min-height: var(--hf-head); padding: 0 20px; background: var(--hf-ink); color: var(--hf-text); font: 15px/1.4 var(--hf-ui); }
.hf-nav a { text-decoration: none; }
.hf-brand { display: flex; align-items: center; gap: 9px; color: var(--hf-brass-hi); font: 700 19px var(--hf-disp); letter-spacing: .04em; white-space: nowrap; }
.hf-brand:hover { color: #fff3cc; }
.hf-brand svg { width: 22px; height: 26px; flex: none; }
.hf-menu { flex: 1; display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.hf-menu > a, .hf-dd-b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 6px; background: none; color: var(--hf-text); font: 500 15px var(--hf-ui); cursor: pointer; white-space: nowrap; }
.hf-menu > a:hover, .hf-dd-b:hover, .hf-dd.open .hf-dd-b { color: var(--hf-brass-hi); background: rgba(201,163,92,.1); }
.hf-dd-b i { font-size: 11px; color: var(--hf-brass); }
.hf-dd { position: relative; }
.hf-dd-m { display: none; position: absolute; top: 100%; left: -12px; z-index: 1100; padding-top: 8px; min-width: 260px; }
.hf-dd-in { display: grid; gap: 2px; padding: 8px; border: 1px solid #7d6236; border-radius: 10px; background: linear-gradient(180deg, #221d16, #16130f); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.hf-dd.open .hf-dd-m { display: block; }
.hf-dd-in a { display: grid; padding: 7px 10px; border-radius: 6px; color: var(--hf-text); font-weight: 500; }
.hf-dd-in a small { color: var(--hf-muted); font-weight: 400; font-size: 12.5px; }
.hf-dd-in a:hover { background: rgba(201,163,92,.12); color: var(--hf-brass-hi); }
.hf-dd-in hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--hf-line); opacity: 1; }
.hf-menu .hf-user { margin-left: auto; color: var(--hf-muted); }
.hf-menu .hf-user + .hf-user { margin-left: 0; }
.hf-menu .hf-user:hover { color: var(--hf-text); background: none; }
.hf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 6px; font: 600 15px var(--hf-ui); letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.hf-btn.gold { color: #21170a; background: linear-gradient(180deg, #f0d593, #c9a35c 55%, #a8843f); border: 1px solid #f3dca4; box-shadow: 0 6px 18px rgba(201,163,92,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.hf-btn.gold:hover { color: #21170a; filter: brightness(1.07); }
.hf-btn.line { color: var(--hf-brass-hi); border: 1px solid var(--hf-brass); background: rgba(19,17,14,.45); }
.hf-btn.line:hover { color: var(--hf-brass-hi); background: rgba(201,163,92,.14); }
.hf-nav .hf-play { padding: 7px 16px; }
.hf-burger { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--hf-line2); border-radius: 8px; background: none; color: var(--hf-brass-hi); font-size: 22px; cursor: pointer; }

@media (min-width: 861px) {
	.hf-dd:hover .hf-dd-m { display: block; }
}
@media (max-width: 1100px) {
	.hf-menu > a, .hf-dd-b { padding: 6px 8px; }
}
@media (max-width: 860px) {
	.hf-nav { padding: 0 12px; gap: 10px; }
	.hf-brand { font-size: 17px; }
	.hf-burger { display: grid; }
	.hf-menu { display: none; }
	.hf-nav .hf-play { margin-left: auto; }
	.hf-nav.open .hf-menu { display: grid; position: absolute; top: 100%; left: 0; right: 0; z-index: 1100; margin: 0; padding: 10px 16px 16px; gap: 2px; background: #15120f; border-bottom: 1px solid var(--hf-line2); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
	.hf-nav.open .hf-menu > a, .hf-nav.open .hf-dd-b { width: 100%; justify-content: space-between; padding: 10px 6px; font-size: 17px; }
	.hf-nav.open .hf-dd-b i { display: none; }
	.hf-nav.open .hf-dd-m { display: block; position: static; min-width: 0; padding: 0; }
	.hf-nav.open .hf-dd-in { margin: 0 0 6px; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--hf-line2); border-radius: 0; background: none; box-shadow: none; }
	.hf-nav.open .hf-menu .hf-user { margin-left: 0; color: var(--hf-text); }
}
@media (max-width: 420px) {
	.hf-brand { gap: 7px; font-size: 15px; letter-spacing: .02em; }
}
@media (max-width: 350px) {
	.hf-brand span { display: none; }
}

/* ---------- úvodní stránka: celá šířka, tmavé pozadí i patička ---------- */
body:has(.hf-home) { background: var(--hf-ink); }
body:has(.hf-home) #wrapper { padding-left: 0; transition: none; }
body:has(.hf-home) #main-article { padding: var(--hf-head) 0 0; }
body:has(.hf-home) .footer { color: var(--hf-muted); }
body:has(.hf-home) .footer hr { border-color: var(--hf-line2); opacity: 1; }
body:has(.hf-home) .footer a { color: var(--hf-brass-hi); }
body:has(.hf-home) .footer b { color: var(--hf-text); }

.hf-home { background: var(--hf-ink); color: var(--hf-text); font: 16px/1.55 var(--hf-ui); padding-bottom: 24px; }
.hf-home a { text-decoration: none; }
.hf-home img { max-width: 100%; }
.hf-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--hf-brass); font: 600 13px var(--hf-ui); letter-spacing: .14em; text-transform: uppercase; }
.hf-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--hf-brass); }
.hf-home h1 { margin: 14px 0 0; font: 700 clamp(34px, 5.4vw, 60px)/1.06 var(--hf-disp); letter-spacing: .01em; color: #f6ecd6; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.hf-lead { max-width: 33rem; margin: 18px 0 0; color: #d9cfbb; font-size: 17.5px; }
.hf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hf-guest { margin-top: 10px; color: var(--hf-muted); font-size: 13.5px; }
.hf-guest b { color: var(--hf-brass-hi); font-weight: 600; }

/* hero: čtyři šikmé portréty nestvůr, text dole uprostřed */
.hf-hero { position: relative; overflow: hidden; background: var(--hf-ink); border-bottom: 1px solid var(--hf-line2); }
.hf-panels { display: flex; height: 560px; margin: 0 -7%; }
.hf-panel { position: relative; flex: 1 1 0; overflow: hidden; transform: skewX(-9deg); border-right: 5px solid var(--hf-ink); }
.hf-panel:last-child { border-right: 0; }
/* max-width 100 % (výš) ořízne obrázek: proto je pán démonů vidět jen z půlky, je to záměr */
.hf-panel img { position: absolute; top: 0; left: -30%; width: 160%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: skewX(9deg); }
.hf-hero-txt { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; padding: 140px 32px 46px; text-align: center; background: linear-gradient(0deg, var(--hf-ink) 22%, rgba(19,17,14,.86) 56%, transparent); }
.hf-hero-txt .hf-lead { margin-inline: auto; }
.hf-hero-txt .hf-ctas { justify-content: center; }
/* pán démonů vlevo: střed obličeje vždy přesně na levém okraji stránky (půl obličeje), při každé šířce.
   Okraj stránky leží v prvním panelu na 7 % šířky stránky, tj. asi 24,8 % šířky panelu; střed obličeje je na 50,7 % šířky obrázku.
   Obrázek má aspoň 376 px (celá výška 560 px), na širokých obrazovkách roste s panelem; vpravo zůstává tmavý pruh jako u ostatních. */
@media (min-width: 761px) {
	.hf-panel:first-child img { width: max(376px, 97%); max-width: none; left: calc(24.8% - max(190.6px, 49.2%)); }
}
/* na mobilu (panely 330 px vysoké, okraj stránky na 14 % = asi 45,4 % šířky panelu) obrázek 222 x 330 */
@media (max-width: 760px) {
	.hf-panel:first-child img { width: 222px; max-width: none; left: calc(45.4% - 112.4px); }
}

/* sekce */
.hf-sec { max-width: 1180px; margin: 0 auto; padding: 56px 32px 0; }
.hf-h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.hf-h2 h2 { margin: 0; font: 700 30px/1.15 var(--hf-disp); color: #f2e6cc; letter-spacing: .02em; }
.hf-h2 a { color: var(--hf-brass-hi); font-weight: 500; }
.hf-h2 a:hover { color: var(--hf-brass-hi); text-decoration: underline; }

/* pravidla na webu: karty s kulatým portrétem */
.hf-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hf-rule { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--hf-line2); border-radius: 12px; background: var(--hf-panel); color: var(--hf-text); }
.hf-rule:hover { border-color: var(--hf-brass); color: var(--hf-text); }
.hf-rule img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hf-line2); }
.hf-rule b { font: 700 19px var(--hf-disp); color: var(--hf-brass-hi); letter-spacing: .02em; }
.hf-rule small { display: block; color: var(--hf-muted); font-size: 14px; }

/* aplikace */
.hf-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding: 34px; border: 1px solid var(--hf-line2); border-radius: 14px; background: radial-gradient(ellipse at 80% 20%, rgba(201,163,92,.12), transparent 60%), var(--hf-panel); }
.hf-app ul { list-style: none; display: grid; gap: 10px; margin: 18px 0 26px; padding: 0; }
.hf-app li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #ddd3bf; }
.hf-app li::before { content: "\25C6"; padding-top: 5px; color: var(--hf-brass); font-size: 11px; }
.hf-app li b { color: var(--hf-text); font-weight: 600; }
.hf-show { position: relative; min-height: 360px; }
.hf-show .shot { display: block; width: 88%; margin-left: auto; border: 1px solid var(--hf-line2); border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.hf-show .tag { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border: 1px solid var(--hf-line2); border-radius: 999px; background: rgba(19,17,14,.85); color: var(--hf-brass-hi); font-size: 12.5px; }
.hf-show .minv { position: absolute; left: 0; bottom: -10px; }

/* ukázka inventáře */
.minv { --s: 46px; --g: 5px; width: max-content; max-width: 100%; color: #ece3d1; font: 13px/1.35 var(--hf-ui); background: linear-gradient(180deg, #1d1a15, #15120f); border: 1px solid #574b3a; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,236,190,.06); }
.minv-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #574b3a; }
.minv-bar .t { font: 700 17px Georgia, serif; color: #e8c987; }
.minv-bar .s { color: #a99f8b; font-size: 12px; }
.minv-bar .ld { margin-left: auto; padding: 0 8px; border: 1px solid #574b3a; border-radius: 10px; background: #120f0c; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.minv-doll { display: grid; grid-template-columns: var(--s) 150px var(--s); gap: var(--g); padding: 9px 10px 6px; }
.minv-col { display: grid; grid-auto-rows: var(--s); gap: var(--g); }
.minv-stage { position: relative; overflow: hidden; border: 1px solid #3b342a; border-radius: 8px; background: #221d17; }
.minv-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.minv-stage::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 26px rgba(0,0,0,.65); }
.minv-row { display: flex; flex-wrap: wrap; gap: var(--g); padding: 4px 10px 10px; }
.minv-row .lbl { flex-basis: 100%; color: #a99f8b; font: 700 12px Georgia, serif; letter-spacing: .04em; }
.sl { position: relative; display: block; width: var(--s); height: var(--s); border-radius: 6px; }
.sl img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.sl.f { background: linear-gradient(160deg, #e9dcbd, #cbb68b); border: 2px solid #c9a35c; box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 10px rgba(232,201,135,.38); }
.sl.f img { mix-blend-mode: multiply; border-radius: 4px; }
.sl.e { border: 1px dashed #4a4033; background: linear-gradient(160deg, #1d1914, #120f0c); }
.sl.e img { opacity: .25; filter: invert(1) grayscale(1); mix-blend-mode: screen; }
.sl.h { background: linear-gradient(160deg, #e9dcbd, #cbb68b); border: 1px solid #6d5d43; }
.sl.h img { mix-blend-mode: multiply; }
.sl b { position: absolute; right: 3px; bottom: 0; color: #fff; font: 700 12px var(--hf-ui); text-shadow: 0 1px 2px #000, 0 0 3px #000; }

/* pás nestvůr */
.hf-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 170px; gap: 12px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-color: var(--hf-line2) transparent; }
.hf-beast { display: grid; gap: 8px; color: var(--hf-text); scroll-snap-align: start; }
.hf-beast:hover { color: var(--hf-brass-hi); }
.hf-beast img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--hf-line); border-radius: 8px; transition: border-color .2s, transform .2s; }
.hf-beast:hover img { border-color: var(--hf-brass); transform: translateY(-3px); }
.hf-beast span { font: 700 15px var(--hf-disp); letter-spacing: .02em; }

@media (max-width: 980px) {
	.hf-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.hf-panels { height: 330px; margin: 0 -14%; }
	.hf-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 200px; z-index: 1; height: 140px; background: linear-gradient(0deg, var(--hf-ink), transparent); pointer-events: none; }
	.hf-hero-txt { position: relative; z-index: 2; margin-top: -90px; padding: 0 18px 36px; background: none; }
	.hf-lead { font-size: 16px; }
	.hf-ctas .hf-btn { flex: 1 1 100%; padding: 13px 18px; font-size: 16px; }
	.hf-sec { padding: 40px 18px 0; }
	.hf-h2 h2 { font-size: 24px; }
	.hf-app { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px 18px; }
	.hf-app .hf-btn { width: 100%; }
	.hf-show { display: grid; gap: 14px; min-height: 0; }
	.hf-show .shot { width: 100%; }
	.hf-show .minv { position: static; }
	.hf-strip { grid-auto-columns: 140px; }
}

/* ---------- levé menu (všechny stránky s postranním panelem) ---------- */
#sidebar-wrapper { bottom: 0; padding: 14px 12px 10px; background: #15120f; border-right: 1px solid var(--hf-line2); }
#side-nav { padding: 6px 0 0; color: var(--hf-text); font: 14.5px/1.4 var(--hf-ui); }
#side-nav .sidebar-inner { scrollbar-color: var(--hf-line2) transparent; scrollbar-width: thin; }
#side-nav ul { list-style: none; }
#side-nav ul ul { margin: 0 0 0 5px; padding-left: 11px; border-left: 1px solid var(--hf-line); }
#side-nav li { padding: 2px 0; }
#side-nav a { color: #d9cfbb; text-decoration: none; }
#side-nav a:hover { color: var(--hf-brass-hi); }
#side-nav a.text-primary { color: var(--hf-brass-hi) !important; font-weight: 600; }
#side-nav h1, #side-nav h2, #side-nav h3, #side-nav h4, #side-nav h5, #side-nav h6 { color: var(--hf-brass); font: 600 13px var(--hf-ui); letter-spacing: .1em; text-transform: uppercase; }
#side-nav .form-control, #side-nav .form-select { background-color: #0f0d0b; border-color: var(--hf-line2); color: var(--hf-text); }
#side-nav .form-control::placeholder { color: var(--hf-muted); }
#side-nav .form-control:focus, #side-nav .form-select:focus { border-color: var(--hf-brass); box-shadow: 0 0 0 .2rem rgba(201,163,92,.25); }
#side-nav .btn-outline-primary { color: var(--hf-brass-hi); border-color: var(--hf-line2); }
#side-nav .btn-outline-primary:hover { color: var(--hf-brass-hi); background: rgba(201,163,92,.14); border-color: var(--hf-brass); }
#side-nav .btn-outline-danger { border-color: var(--hf-line2); }
#side-nav .alert-warning { color: #f2e6cc; background: rgba(201,163,92,.12); border: 1px solid #7d6236; }
#side-nav .alert-warning a { color: var(--hf-brass-hi); font-weight: 600; }

/* ---------- list pergamenu: pravidla, Pán hry a bestiář (body.hf-sheet hf-read) a stránky aplikace (body.hf-sheet hf-app-page),
   třídy nastavuje setPageContext v a.js, stránky uživatele (profil, přihlášení...) je mají přímo v <body> ---------- */
body.hf-sheet {
	--hf-sheet: #f6efe1;
	--hf-sheet-line: #dccba6;
	--hf-sheet-ink: #2b2218;
	--hf-sheet-head: #3d2b13;
	--hf-sheet-link: #8a5a14;
	background: var(--hf-ink);
}
body.hf-sheet :is(#main-article, body > #main-page) {
	flex: 0 1 auto;
	width: calc(100% - 40px);
	max-width: 1280px;
	margin: calc(var(--hf-head) + 18px) auto 0;
	padding: 30px 40px 40px;
	color: var(--hf-sheet-ink);
	font: 15px/1.5 var(--hf-ui);
	background: radial-gradient(ellipse at 50% 0%, #fbf7ee 0%, rgba(251,247,238,0) 60%), var(--hf-sheet);
	border: 1px solid #c9b48a;
	border-radius: 10px;
	box-shadow: 0 0 0 4px rgba(201,163,92,.08), 0 24px 60px rgba(0,0,0,.55);
}
body.hf-sheet .footer { color: var(--hf-muted); }
body.hf-sheet .footer hr { border-color: var(--hf-line2); opacity: 1; }
body.hf-sheet .footer a { color: var(--hf-brass-hi); }
body.hf-sheet .footer b { color: var(--hf-text); }

body.hf-sheet :is(#main-article, body > #main-page) h1 { margin: 0 0 14px; color: var(--hf-sheet-head); font: 700 34px/1.15 var(--hf-disp); letter-spacing: .01em; }
body.hf-sheet :is(#main-article, body > #main-page) h1::after { content: ""; display: block; width: 84px; height: 2px; margin-top: 12px; background: linear-gradient(90deg, #a8843f, rgba(168,132,63,0)); }
body.hf-sheet :is(#main-article, body > #main-page) h2 { margin: 26px 0 10px; color: var(--hf-sheet-head); font: 700 25px/1.2 var(--hf-disp); letter-spacing: .01em; }
body.hf-sheet :is(#main-article, body > #main-page) h1 + h2 { margin-top: 0; }
body.hf-sheet :is(#main-article, body > #main-page) h3 { margin: 22px 0 8px; color: #4a3518; font: 700 20px/1.25 var(--hf-disp); }
body.hf-sheet :is(#main-article, body > #main-page) h4 { margin: 18px 0 6px; color: #5a3f17; font: 600 18px/1.3 var(--hf-ui); }
body.hf-sheet :is(#main-article, body > #main-page) h5 { color: #5a3f17; font: 600 16px/1.3 var(--hf-ui); }
body.hf-read.hf-sheet #main-article { font-size: 16px; line-height: 1.6; }
body.hf-read #main-article p { margin-bottom: .85em; }
body.hf-sheet :is(#main-article, body > #main-page) a { color: var(--hf-sheet-link); text-decoration: none; }
body.hf-sheet :is(#main-article, body > #main-page) a:hover { color: #5e3c0b; text-decoration: underline; }
body.hf-sheet :is(#main-article, body > #main-page) .description { color: #4b3d2c; }
body.hf-sheet :is(#main-article, body > #main-page) hr { border-color: var(--hf-sheet-line); opacity: 1; }

/* tabulky */
body.hf-sheet :is(#main-article, body > #main-page) .table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--hf-sheet-ink);
	--bs-table-striped-bg: rgba(150,110,40,.07);
	--bs-table-striped-color: var(--hf-sheet-ink);
	--bs-table-hover-bg: rgba(150,110,40,.13);
	--bs-table-hover-color: var(--hf-sheet-ink);
	--bs-table-active-bg: rgba(150,110,40,.16);
	--bs-table-border-color: var(--hf-sheet-line);
	border-color: var(--hf-sheet-line);
}
body.hf-sheet :is(#main-article, body > #main-page) .table > thead > tr > *, body.hf-sheet :is(#main-article, body > #main-page) .table > tbody > tr > th { color: #4a3518; }
body.hf-sheet :is(#main-article, body > #main-page) .table > thead > tr > * { background-color: #ece0c3; }
body.hf-sheet :is(#main-article, body > #main-page) .table > thead > tr > th { border-bottom: 1px solid #c9b48a; }
body.hf-sheet :is(#main-article, body > #main-page) .table-dark, body.hf-sheet :is(#main-article, body > #main-page) .table > thead.table-dark { --bs-table-bg: #2a2218; --bs-table-color: #f2e6cc; --bs-table-border-color: #4a3d2c; background: #2a2218; }
body.hf-sheet :is(#main-article, body > #main-page) .table > thead.table-dark > tr > *, body.hf-sheet :is(#main-article, body > #main-page) .table-dark > tr > * { color: #f2e6cc; background-color: #2a2218; }
body.hf-sheet :is(#main-article, body > #main-page) caption { caption-side: top; padding: 10px 0 6px; color: #7a5a24; font: 700 15px var(--hf-disp); letter-spacing: .05em; text-align: center; }
body.hf-sheet tr > th:first-child, body.hf-sheet tr > td:first-child { background-color: var(--hf-sheet); }

/* rámečky: zelený = příklad, žlutý = důležité, červený = vzorec */
body.hf-sheet :is(#main-article, body > #main-page) .alert { color: var(--hf-sheet-ink); border: 1px solid transparent; border-left-width: 4px; border-radius: 6px; }
body.hf-sheet :is(#main-article, body > #main-page) .alert-success { background: #ebedd9; border-color: #c9cfa4 #c9cfa4 #c9cfa4 #6f7f3a; }
body.hf-sheet :is(#main-article, body > #main-page) .alert-warning { background: #f5e8c8; border-color: #e0cd9c #e0cd9c #e0cd9c #b98a3c; }
body.hf-sheet :is(#main-article, body > #main-page) .alert-danger { background: #f4e0d6; border-color: #e3c2b3 #e3c2b3 #e3c2b3 #8e2a22; }
body.hf-sheet :is(#main-article, body > #main-page) .alert h5 { margin-bottom: 6px; font: 700 13px var(--hf-ui); letter-spacing: .1em; text-transform: uppercase; }
body.hf-sheet :is(#main-article, body > #main-page) .alert-success h5 { color: #55632a; }
body.hf-sheet :is(#main-article, body > #main-page) .alert-warning h5 { color: #8a6427; }
body.hf-sheet :is(#main-article, body > #main-page) .alert-danger h5 { color: #8e2a22; }

/* obrázky, seznamy, formuláře */
body.hf-sheet :is(#main-article, body > #main-page) img.img-fluid { padding: 4px; background: #fbf7ee; border: 1px solid #cdb88c; box-shadow: 0 6px 18px rgba(60,40,10,.18); }
body.hf-sheet :is(#main-article, body > #main-page) .list-group { --bs-list-group-bg: rgba(255,255,255,.35); --bs-list-group-color: var(--hf-sheet-ink); --bs-list-group-border-color: var(--hf-sheet-line); }
body.hf-sheet :is(#main-article, body > #main-page) .list-group-item-danger { color: #6b1f18; background-color: #f0d6cb; }
body.hf-sheet :is(#main-article, body > #main-page) .form-control, body.hf-sheet :is(#main-article, body > #main-page) .form-select { background-color: #fffaf0; border-color: #d4c29a; color: var(--hf-sheet-ink); }
body.hf-sheet :is(#main-article, body > #main-page) .btn-outline-primary { color: #7a5a24; border-color: #c9b48a; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-outline-primary:hover { color: #3d2b13; background: rgba(201,163,92,.2); border-color: #a8843f; }

@media (max-width: 760px) {
	body.hf-sheet :is(#main-article, body > #main-page) { width: 100%; margin: var(--hf-head) 0 0; padding: 20px 16px 28px; border-radius: 0; border-left: 0; border-right: 0; }
	body.hf-sheet :is(#main-article, body > #main-page) h1 { font-size: 27px; }
	body.hf-sheet :is(#main-article, body > #main-page) h2 { font-size: 21px; }
}

/* ---------- stránky aplikace na pergamenu (body.hf-app-page): tlačítka, odznaky, upozornění, dialogy ---------- */
body.hf-app-page :is(#main-article, body > #main-page) h1 { font-size: 30px; }
body.hf-app-page :is(#main-article, body > #main-page) h3 { margin-top: 14px; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-primary, body.hf-sheet .modal .btn-primary {
	color: #1d150b; background: linear-gradient(180deg, #ecd08f, #c9a35c); border-color: #a8843f;
	--bs-btn-hover-color: #1d150b; --bs-btn-hover-bg: #ecd08f; --bs-btn-hover-border-color: #8a6a2f;
	--bs-btn-active-color: #1d150b; --bs-btn-active-bg: #c9a35c; --bs-btn-active-border-color: #8a6a2f;
}
body.hf-sheet :is(#main-article, body > #main-page) .btn-primary:hover, body.hf-sheet .modal .btn-primary:hover { color: #1d150b; background: linear-gradient(180deg, #f3dca6, #d4af69); border-color: #8a6a2f; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-secondary { color: #f6efe1; background: #5b4a33; border-color: #5b4a33; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-secondary:hover { color: #fff; background: #3d2b13; border-color: #3d2b13; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-outline-secondary { color: #5a3f17; border-color: #c9b48a; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-outline-secondary:hover { color: #3d2b13; background: rgba(201,163,92,.2); border-color: #a8843f; }
body.hf-sheet :is(#main-article, body > #main-page) .bg-danger.text-white { background-color: #8e2a22 !important; border-radius: 6px; }
body.hf-sheet :is(#main-article, body > #main-page) .bg-primary { background-color: #7a5a24 !important; }
body.hf-sheet :is(#main-article, body > #main-page) .text-primary { color: #7a5a24 !important; }
body.hf-sheet :is(#main-article, body > #main-page) .table-light, body.hf-sheet :is(#main-article, body > #main-page) .table-secondary { --bs-table-bg: #ece0c3; --bs-table-color: #3d2b13; --bs-table-border-color: #d4c29a; }
body.hf-sheet :is(#main-article, body > #main-page) .dropdown-menu { background: #fbf7ee; border-color: #c9b48a; }
body.hf-sheet :is(#main-article, body > #main-page) .form-check-input:checked { background-color: #a8843f; border-color: #8a6a2f; }
body.hf-sheet :is(#main-article, body > #main-page) .nav-tabs { border-color: var(--hf-sheet-line); }
body.hf-sheet :is(#main-article, body > #main-page) .nav-tabs .nav-link.active { color: #3d2b13; background: var(--hf-sheet); border-color: var(--hf-sheet-line) var(--hf-sheet-line) var(--hf-sheet); }
body.hf-sheet .modal-content { color: var(--hf-sheet-ink); background: #f6efe1; border: 1px solid #c9b48a; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
body.hf-sheet .modal-header, body.hf-sheet .modal-footer { border-color: var(--hf-sheet-line); }
body.hf-sheet .modal-title { color: var(--hf-sheet-head); font: 700 19px/1.3 var(--hf-disp); }
body.hf-sheet .modal .form-control, body.hf-sheet .modal .form-select { background-color: #fffaf0; border-color: #d4c29a; color: var(--hf-sheet-ink); }
body.hf-sheet :is(#main-article, body > #main-page) .btn-link { color: var(--hf-sheet-link); text-decoration: none; }
body.hf-sheet :is(#main-article, body > #main-page) .btn-link:hover { color: #5e3c0b; text-decoration: underline; }
/* stránky uživatele (profil, přihlášení, registrace, heslo): list pergamenu místo bílé stránky */
body.hf-sheet > #main-page { max-width: 1140px; margin-top: calc(var(--hf-head) + 18px) !important; margin-bottom: 28px !important; }
body.hf-sheet > #main-page.container-fluid { max-width: 1280px; }
body.hf-sheet > #main-page .card { --bs-card-bg: #fbf7ee; --bs-card-border-color: #c9b48a; --bs-card-cap-bg: #ece0c3; --bs-card-cap-color: #3d2b13; }
body.hf-sheet > #main-page .card-header { font: 700 18px/1.3 var(--hf-disp); }
/* hlavička okna přihlášení, registrace a obnovy hesla: tmavá jako horní lišta */
body.hf-sheet > #main-page .bg-primary { background: linear-gradient(180deg, #2a2218, #1c1914) !important; border-bottom: 1px solid #a8843f; }
body.hf-sheet > #main-page .bg-primary > .text-white { color: var(--hf-brass-hi) !important; font: 700 21px/1.3 var(--hf-disp) !important; letter-spacing: .02em; }
/* oznámení vpravo nahoře až pod tmavou lištou */
.right-alert { top: calc(var(--hf-head) + 12px); }
@media (max-width: 760px) {
	body.hf-sheet > #main-page { margin-top: var(--hf-head) !important; margin-bottom: 0 !important; }
}