@charset "utf-8";
/* ==========================================================================
   Arkadia Wicca
   A világ anyaga a kézzel rajzolt térkép és a festmények — a lap ezekből
   épül. Minden felület fölött ott ül az éjszaka: a képek nem dobozban
   ülnek, hanem a sötétből merülnek elő és abba is vesznek vissza.
   ========================================================================== */

:root {
  color-scheme: dark;

  --ej:        #090a10;
  --ej-mely:   #05060b;
  --papir:     #ddd8cb;
  --papir-vil: #f4efe2;
  --halk:      #7c8394;
  --arany:     #d4a862;
  --arany-halk:#8a6d3a;
  --hold:      #93a3e8;
  --vesz:      #c8564a;
  --vesz-vil:  #e8776a;

  --vonal:     rgba(212, 168, 98, .20);
  --vonal-halk:rgba(221, 216, 203, .10);

  --iras:  "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "URW Palladio L", Georgia, serif;
  --proza: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style",
           Georgia, serif;
  --jel:   "Avenir Next Condensed", "Roboto Condensed", "Segoe UI", system-ui,
           sans-serif;

  /* A teljes olvasószélesség. Ugyanaz, mint a fejlécsáv szélessége, hogy a
     szöveg jobb széle pontosan a fejléc alá essen. */
  --oszlop: 82rem;
  --keret:  2rem;

  /* finom papírszemcse, hogy a nagy sötét felület ne legyen üveg-sima */
  --szemcse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ej);
  color: var(--papir);
  font: 400 1.075rem/1.78 var(--proza);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {           /* szemcse az egész lapon */
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: var(--szemcse); pointer-events: none;
}
body > * { position: relative; z-index: 1; }

img, svg { max-width: 100%; }
img { height: auto; }
.lap, .sav { min-width: 0; }
.lap { overflow-wrap: break-word; }

a { color: var(--hold); text-decoration: none; }
.lap p a, .lap dd a, .lap li a {
  color: var(--papir-vil); border-bottom: 1px solid var(--arany-halk);
}
.lap p a:hover, .lap dd a:hover, .lap li a:hover {
  color: var(--arany); border-bottom-color: var(--arany);
}
:focus-visible { outline: 2px solid var(--arany); outline-offset: 3px; }

.ugras { position: absolute; left: -100vw; }
.ugras:focus {
  left: .5rem; top: .5rem; z-index: 99; background: var(--ej-mely);
  color: var(--papir); padding: .6rem 1rem; font: 600 .8rem/1 var(--jel);
}

/* ------------------------------------------------------------- fejléc */

.fejlec {
  position: sticky; top: 0; z-index: 30;
  background: rgba(5, 6, 11, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--vonal);
}
.sav {
  max-width: var(--oszlop); margin: 0 auto; padding: .85rem var(--keret);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem;
}
.logo { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.logo-fo { font: 400 1.2rem/1 var(--iras); letter-spacing: .1em; color: var(--papir-vil); }
.logo-alcim {
  font: 400 .62rem/1 var(--jel); letter-spacing: .18em;
  text-transform: uppercase; color: var(--halk);
}
.logo:hover .logo-fo { color: var(--arany); }
.fomenu { margin-left: auto; display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.fomenu a {
  font: 400 .72rem/1.9 var(--jel); letter-spacing: .19em;
  text-transform: uppercase; color: var(--halk);
}
.fomenu a:hover { color: var(--papir); }
.fomenu a.aktiv { color: var(--arany); }

/* némítógomb: az eredeti lapok háttérzenéjének kapcsolója */
.hang {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0; padding: .3rem 0 .3rem 1.4rem;
  background: none; border: 0; cursor: pointer; color: var(--arany);
  font: 400 .68rem/1 var(--jel); letter-spacing: .19em; text-transform: uppercase;
  border-left: 1px solid var(--vonal);
}
.hang svg { width: 1.05rem; height: 1.05rem; flex: none; }
.hang .kurt { fill: currentColor; }
.hang .hullam, .hang .kereszt {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}
.hang .kereszt { display: none; }
.hang:hover { color: var(--papir-vil); }
.hang.nema { color: var(--halk); }
.hang.nema .hullam { display: none; }
.hang.nema .kereszt { display: block; }
.hang[hidden] { display: none; }

/* ========================================================== CÍMLAPI HŐS
   A világ térképe, sötétbe merítve, ráírt címmel. */

.hos {
  position: relative;
  min-height: min(88vh, 46rem);
  display: grid; align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--vonal);
}
/* A háttérkép mindig inline `background-image`, mert a custom property-be
   írt relatív url()-t a böngészők a stíluslaphoz mérik, nem a laphoz. */
.hos-kep {
  position: absolute; inset: 0;
  background-color: var(--ej-mely);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: saturate(.82) contrast(1.02) brightness(.82);
  transform: scale(1.04);
}
.hos-fatyol {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 78% at 20% 68%, rgba(5,6,11,.72), transparent 72%),
    linear-gradient(to top, var(--ej) 0%, rgba(9,10,16,.72) 26%, rgba(9,10,16,.10) 78%, transparent 100%);
}
.hos-szoveg {
  position: relative;
  max-width: var(--oszlop); width: 100%; margin: 0 auto;
  padding: 6rem var(--keret) 3.5rem;
}
.hos-szoveg .fo {
  margin: 0;
  font: 400 clamp(3.6rem, 13vw, 9rem)/.88 var(--iras);
  letter-spacing: -.03em; color: var(--papir-vil);
  text-shadow: 0 .06em .5em rgba(0,0,0,.75);
}
.hos-szoveg .also {
  margin: .9rem 0 0;
  font: 400 clamp(1.3rem, 4.4vw, 2.3rem)/1 var(--iras);
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--arany); padding-left: .3em;
  text-shadow: 0 .06em .5em rgba(0,0,0,.8);
}
.hos-szoveg .ev {
  margin: 2.4rem 0 0;
  font: 400 .7rem/1.9 var(--jel); letter-spacing: .28em;
  text-transform: uppercase; color: var(--papir);
}
.hos-szoveg .ev span { color: var(--arany-halk); }

/* fejléckép a belső lapokon */
.lapkep {
  position: relative; height: clamp(12rem, 26vw, 20rem);
  margin: 0; overflow: hidden;
  border-bottom: 1px solid var(--vonal);
}
.lapkep-kep {
  position: absolute; inset: 0;
  background-color: var(--ej-mely);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: saturate(.8) contrast(1.02) brightness(.8);
}
.lapkep::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ej) 1%, rgba(9,10,16,.55) 45%, rgba(9,10,16,.12) 100%);
}

/* --------------------------------------------------------------- lap */

/* --- törzs: ragadós oldalmenü + olvasóhasáb ---------------------------- */

.torzs {
  max-width: var(--oszlop); margin: 0 auto;
  padding: 0 var(--keret);
  display: grid; gap: 0 3.5rem;
  grid-template-columns: 14rem minmax(0, 1fr);
  align-items: start;
}
/* a hasáb kitölti, ami az oldalmenü után marad */
.torzs > .lap { max-width: none; padding-left: 0; padding-right: 0; }

.oldalmenu {
  position: sticky; top: 3.4rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4rem 0 2rem;
  scrollbar-width: thin; scrollbar-color: var(--arany-halk) transparent;
}
.oldalmenu::-webkit-scrollbar { width: 3px; }
.oldalmenu::-webkit-scrollbar-thumb { background: var(--arany-halk); }
.oldalmenu-cim {
  font: 400 .64rem/1 var(--jel); letter-spacing: .24em;
  text-transform: uppercase; color: var(--halk);
  margin: 0 0 1rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--vonal);
}
.oldalmenu ol { list-style: none; margin: 0; padding: 0; }
.oldalmenu li { margin: 0; }
.oldalmenu a {
  display: block; padding: .36rem 0 .36rem .7rem;
  border-left: 1px solid transparent;
  font: 400 .85rem/1.4 var(--proza); color: var(--halk);
  /* egy sor, egy szint — hosszú cím sem törhet meg */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oldalmenu a:hover { color: var(--papir-vil); border-left-color: var(--arany-halk); }
.oldalmenu a.itt {
  color: var(--arany); border-left-color: var(--arany);
}

/* Csoportos lapokon a menü kétszintű: a csoport neve halvány fejléc, alatta
   behúzva a hozzá tartozó egységek. Alegység sosem kerül a menübe. */
.oldalmenu .csoport + .csoport { margin-top: .9rem; }
.oldalmenu .csoport > a {
  font: 400 .64rem/1.4 var(--jel); letter-spacing: .18em;
  text-transform: uppercase; color: var(--arany-halk);
  padding-top: .5rem; padding-bottom: .3rem;
}
.oldalmenu .csoport > a:hover { color: var(--arany); }
.oldalmenu .csoport > a.itt,
.oldalmenu .csoport > a.itt-csoport { color: var(--arany); }
.oldalmenu ol ol a { padding-left: 1.5rem; }

/* a ragadós fejléc ne takarja el a célfejezetet */
.lap .szakasz, .lap .egyseg, .lap .alegyseg { scroll-margin-top: 4.5rem; }

.lap { max-width: var(--oszlop); margin: 0 auto; padding: 4rem var(--keret) 6rem; }
.lap.szeles { max-width: var(--oszlop); }
.lap.cimlap { max-width: var(--oszlop); padding-top: 4.5rem; }

.morzsa {
  font: 400 .66rem/1.6 var(--jel); letter-spacing: .2em;
  text-transform: uppercase; color: var(--halk); margin: 0 0 2.25rem;
}
.morzsa a { color: var(--halk); }
.morzsa a:hover { color: var(--arany); }
.morzsa b { color: var(--arany-halk); font-weight: 400; margin: 0 .45em; }
.morzsa span { color: var(--papir); }
.morzsa:empty { display: none; }

/* ---- címsorok --------------------------------------------------------- */

/* A címsorok szintje (h2/h3/h4) a jelentést követi, a megjelenést viszont a
   szerep adja — így egy lap tematikai egysége ugyanúgy néz ki akkor is, ha
   csoport alá tartozik (h3), és akkor is, ha nem (h2).

     h1         a lap címe          „Istenek"
     .szakasz   csoporthatár        „Az Ászok", „A Jöttünök"
     .egyseg    a lap egysége       „Hermész, a Világalkotó…", „Canara szigete"
     .alegyseg  egységen belüli rész „Hermész és a Troll legendája", „Harc:"

   Mind a négy ugyanabban a szerif betűben, egyenletesen fogyó méretben
   (kb. 1,4-szeres lépcsőkkel), hogy a rangsor ránézésre is stimmeljen. A
   szinteket a méreten túl a szín és a csoportok fölötti vonal különbözteti. */

.lap h1 {
  font: 400 clamp(2.3rem, 5.6vw, 3.4rem)/1.08 var(--iras);
  letter-spacing: -.02em; color: var(--papir-vil); margin: 0 0 2.75rem;
}
.lap .szakasz {
  font: 400 2.15rem/1.2 var(--iras); letter-spacing: -.01em;
  color: var(--papir-vil);
  /* Alsó margó kell: a csoportcímsort nem mindig egység követi, hanem
     bevezető bekezdés is — anélkül az rátapadna a címre. */
  margin: 5rem 0 1.3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--vonal);
}
.lap .szakasz + .egyseg { margin-top: 2.2rem; }

.lap .egyseg { font: 400 1.5rem/1.28 var(--iras); color: var(--arany); margin: 3.5rem 0 1.1rem; }
.lap .alegyseg {
  /* a folyószöveg 1.075rem — ennél érezhetően nagyobbnak kell lennie,
     különben nem olvasódik címsornak */
  font: 400 1.22rem/1.4 var(--iras); color: var(--arany-halk);
  margin: 2.5rem 0 .7rem;
}
.lap .szakasz a, .lap .egyseg a, .lap .alegyseg a { color: inherit; border: 0; }
.lap .szakasz a:hover, .lap .egyseg a:hover, .lap .alegyseg a:hover { color: var(--papir-vil); }

/* Átvezető link egy másik lapra. Az eredetiben ezek címsorként álltak, ezért
   szakaszként kerültek a jegyzékbe, holott nem a lap részei — csak mutatnak
   valahová. */
.lap p.tovabb { margin: 2.5rem 0; }
/* Ha több átvezető link áll egymás után (kalandok.html), az listát alkot —
   ott a bekezdésköz sok. A :has()-t nem ismerő böngésző a mostani, tágabb
   közt kapja, ami nem hibás, csak levegősebb. */
.lap p.tovabb + p.tovabb { margin-top: .55rem; }
.lap p.tovabb:has(+ p.tovabb) { margin-bottom: .55rem; }
.lap p.tovabb a {
  display: inline-block; color: var(--arany);
  font: 400 .95rem/1.5 var(--proza);
  border-bottom: 1px solid var(--vonal); padding-bottom: .15rem;
}
.lap p.tovabb a::before { content: "→"; margin-right: .6em; color: var(--arany-halk); }
.lap p.tovabb a:hover { color: var(--papir-vil); border-bottom-color: var(--arany); }

/* Forrásmegjelölés vagy aláírás a szöveg végén — szintén címsor volt. */
.lap p.alairas {
  margin: 1.6rem 0 0; text-align: right;
  font: 400 .82rem/1.6 var(--proza); font-style: italic; color: var(--halk);
}
.lap p.alairas + p.alairas { margin-top: 0; }

/* ---- folyószöveg ------------------------------------------------------ */

.lap p { margin: 0 0 1.35rem; }

/* Sorkizárás az olvasmányos szövegen. Ilyen széles hasábnál elválasztás
   nélkül nagy szóközlyukak nyílnának a sorokban; a lapok lang="hu"-k, ezért
   a böngésző magyar mintakészlettel választ el. Az egysoros bekezdések és
   listaelemek változatlanok maradnak — az utolsó sort a sorkizárás nem nyújtja. */
.lap p, .lap dd, .lap li { text-align: justify; hyphens: auto; }

.lap p.kozep { text-align: center; hyphens: manual; }
.bevezeto { font: 400 1.25rem/1.68 var(--proza); color: var(--papir-vil); margin-bottom: 2.5rem; }
p.nyito::first-letter {
  float: left; font: 400 4.1rem/.8 var(--iras);
  color: var(--arany); padding: .3rem .6rem 0 0;
}
b.k { color: var(--papir-vil); font-weight: 400; font-style: italic; }
.lap strong { color: var(--papir-vil); font-weight: 600; }
.halvany { color: var(--halk); font-size: .92rem; }
.motto {
  font: 400 .72rem/1 var(--jel); letter-spacing: .3em;
  text-transform: uppercase; color: var(--arany-halk); margin: 0 0 3rem;
}

/* iránytű-elválasztó — a térkép saját szélrózsája nyomán */
hr {
  border: 0; height: 2.25rem; margin: 3.5rem 0;
  background:
    linear-gradient(to right, transparent, var(--vonal) 12%, var(--vonal) 88%, transparent) center/100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%238a6d3a' stroke-width='1'%3E%3Cpath d='M17 2 20 14 32 17 20 20 17 32 14 20 2 17 14 14Z'/%3E%3C/g%3E%3Cpath d='M17 6 19 15 17 17 15 15Z' fill='%23d4a862'/%3E%3C/svg%3E") center/34px no-repeat;
  background-color: transparent;
}
hr::after { content: ""; display: block; height: 100%; background: var(--ej); width: 46px; margin: 0 auto; }
hr { position: relative; }
hr::after { position: absolute; inset: 0 0 0 50%; transform: translateX(-50%); z-index: -1; }

/* ---- adatlap ---------------------------------------------------------- */

.adatlap { margin: 2rem 0 2.75rem; display: grid; grid-template-columns: 10rem 1fr; }
.adatlap dt {
  font: 400 .68rem/2 var(--jel); letter-spacing: .18em;
  text-transform: uppercase; color: var(--arany);
  padding: .75rem 1.5rem .75rem 0; border-top: 1px solid var(--vonal-halk);
}
.adatlap dd { margin: 0; padding: .68rem 0; border-top: 1px solid var(--vonal-halk); }
.adatlap dt:first-of-type, .adatlap dd:first-of-type { border-top: 0; }

/* ---- képek ------------------------------------------------------------ */

figure { margin: 3.25rem 0; }
/* A képek 1996–2002-ben készültek: a felük 640–768 képpont széles. A hasáb
   ennél szélesebb, ezért nem szabad rájuk `width: 100%`-ot engedni — felnagyítva
   pixelesek lennének. Eredeti méretben állnak, a hasáb közepén; csak akkor
   kicsinyítünk, ha a kép szélesebb, mint a hely. */
figure img {
  display: block; width: auto; max-width: 100%; margin-inline: auto;
  filter: saturate(.94) contrast(1.03) brightness(.92);
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
figcaption {
  margin-top: .9rem; text-align: center;
  font: 400 .68rem/1.6 var(--jel); letter-spacing: .2em;
  text-transform: uppercase; color: var(--halk);
}

/* ---- listák, táblák ---------------------------------------------------- */

.lap ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.lap li { margin-bottom: .45rem; }
.lap li::marker { color: var(--arany-halk); }
.tablazat { overflow-x: auto; margin: 2.5rem 0; }
.tablazat table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tablazat td { padding: .6rem 1rem .6rem 0; border-top: 1px solid var(--vonal-halk); vertical-align: top; }
.tablazat td p { margin: 0; }

.linksor { margin: 1.5rem 0 2.75rem; line-height: 2.1; }
.linksor a {
  color: var(--papir); font: 400 .74rem/1 var(--jel);
  letter-spacing: .17em; text-transform: uppercase;
}
.linksor a:hover { color: var(--arany); }
.linksor a + a::before { content: "·"; color: var(--arany-halk); margin: 0 .85em; }

.gomb {
  display: inline-block; margin-right: 2rem;
  font: 400 .72rem/1 var(--jel); letter-spacing: .2em; text-transform: uppercase;
  color: var(--arany); border-bottom: 1px solid var(--arany-halk); padding-bottom: .35rem;
}
.gomb:hover { color: var(--papir-vil); border-bottom-color: var(--papir-vil); }

/* ========================================================== KÉPGALÉRIA
   Birodalmak: kép + név, keret nélkül, a sötétből előmerülve. */

.galeria {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin: 2.5rem 0 3rem;
  background: var(--vonal-halk);
}
.galeria a {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ej-mely); color: inherit;
}
.galeria img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.72) brightness(.62) contrast(1.04);
  transition: filter .45s ease, transform .45s ease;
}
.galeria a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,11,.94) 6%, rgba(5,6,11,.35) 52%, transparent 88%);
}
.galeria span {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: .9rem; z-index: 2;
  font: 400 1.1rem/1.22 var(--iras); color: var(--papir-vil);
  text-shadow: 0 .05em .45em rgba(0,0,0,.9);
}
.galeria a:hover img { filter: saturate(1) brightness(.86) contrast(1.02); transform: scale(1.045); }
.galeria a:hover span { color: var(--arany); }

/* ---- címlapi jegyzék ---------------------------------------------------- */

.fojegyzek { list-style: none; margin: 0; padding: 0; }
.fojegyzek > li { border-top: 1px solid var(--vonal); }
.fojegyzek > li:last-child { border-bottom: 1px solid var(--vonal); }
.fojegyzek a {
  display: grid; grid-template-columns: 3.5rem 1fr; align-items: baseline;
  gap: 0 1.5rem; padding: 1.55rem .5rem 1.65rem 0; color: inherit;
}
.fojegyzek .szam { font: 400 1.05rem/1 var(--iras); letter-spacing: .1em; color: var(--arany); padding-top: .5rem; }
.fojegyzek .cim { font: 400 1.85rem/1.15 var(--iras); color: var(--papir-vil); }
.fojegyzek .alcim { grid-column: 2; margin-top: .5rem; font: 400 .95rem/1.6 var(--proza); color: var(--halk); }
.fojegyzek a:hover .cim, .fojegyzek a:hover .szam { color: var(--arany); }
.fojegyzek a:hover .alcim { color: var(--papir); }

/* ---- tartalomjegyzék ---------------------------------------------------- */

.jegyzekek { display: grid; gap: 3.5rem; }
.jegyzek h2 {
  font: 400 .72rem/1 var(--jel); letter-spacing: .26em;
  text-transform: uppercase; color: var(--arany); margin: 0 0 1.3rem;
}
.jegyzek ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.jegyzek li { margin: 0; break-inside: avoid; border-top: 1px solid var(--vonal-halk); }
.jegyzek a { display: block; padding: .55rem 0; color: var(--papir); }
.jegyzek a:hover { color: var(--arany); }

/* ---- térkép ------------------------------------------------------------ */

.terkep { width: 100%; margin: 2.5rem 0 0; }
.terkep svg { display: block; width: 100%; height: auto; }
.terkep a > * { fill: transparent; stroke: transparent; stroke-width: 5; transition: fill .2s ease, stroke .2s ease; }
.terkep a:hover > *, .terkep a:focus > * { fill: rgba(212,168,98,.26); stroke: var(--arany); }
.terkep a:focus { outline: none; }

/* ---- lábrészek --------------------------------------------------------- */

.kapcsolodo, .zenelo { margin-top: 4.5rem; padding-top: 1.75rem; border-top: 1px solid var(--vonal); }
.kapcsolodo h2, .zenelo h2 {
  font: 400 .68rem/1 var(--jel); letter-spacing: .24em;
  text-transform: uppercase; color: var(--halk); margin: 0 0 1.1rem;
}
.kapcsolodo ul { list-style: none; margin: 0; padding: 0; line-height: 2.1; }
.kapcsolodo li { display: inline; }
.kapcsolodo li + li::before { content: "·"; color: var(--arany-halk); margin: 0 .8em; }
.kapcsolodo a { color: var(--papir); }
.kapcsolodo a:hover { color: var(--arany); }
.zenelo audio { width: 100%; max-width: 22rem; }

.lablec {
  border-top: 1px solid var(--vonal); background: var(--ej-mely);
  padding: 3rem var(--keret); text-align: center;
}
.lablec p {
  margin: 0 0 .5rem; font: 400 .7rem/1.7 var(--jel);
  letter-spacing: .2em; text-transform: uppercase; color: var(--halk);
}
.lablec b { color: var(--arany); font-weight: 400; }

/* --------------------------------------------------------------- keskeny */

/* keskenyebb ablakban a menü a tartalom fölé kerül, és nem ragad */
@media (max-width: 62rem) {
  .torzs { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: var(--oszlop); }
  .oldalmenu {
    position: static; max-height: 17rem; padding: 2.5rem 0 0;
    border-bottom: 1px solid var(--vonal);
  }
  .torzs > .lap { padding-top: 2rem; }
}

@media (max-width: 46rem) {
  :root { --keret: 1.4rem; }
  body { font-size: 1.02rem; }
  .hos { min-height: 78vh; }
  .hos-szoveg { padding: 4rem var(--keret) 2.5rem; }
  .lap { padding-top: 2.75rem; }
  .sav { padding-top: .7rem; padding-bottom: .7rem; }
  .fomenu { margin-left: 0; width: 100%; gap: .1rem 1.1rem; }
  .fomenu a { white-space: nowrap; }
  .adatlap { grid-template-columns: 1fr; }
  .adatlap dt { padding-bottom: 0; border-top: 1px solid var(--vonal-halk); }
  .adatlap dd { padding-top: .15rem; border-top: 0; }
  .adatlap dd:first-of-type { border-top: 0; }
  .jegyzek ul { columns: 1; }
  .fojegyzek a { grid-template-columns: 2.5rem 1fr; gap: 0 1rem; padding: 1.3rem 0; }
  .fojegyzek .cim { font-size: 1.5rem; }
  p.nyito::first-letter { font-size: 3.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .galeria a:hover img { transform: none; }
}

/* ---- ellentmondás-tábla ------------------------------------------------ */

/* A fejlécsávban, a Zene gomb után: figyelmeztető háromszög. Szöveg helyett
   ikon, mert a sáv tele van — a nevet a title és az aria-label hordozza. */
.tabla-link {
  display: inline-flex; align-items: center;
  margin-left: .8rem; padding: .2rem 0 .2rem .8rem;
  border-left: 1px solid var(--vonal);
  color: var(--vesz);
}
.tabla-link svg { width: 1.15rem; height: 1.15rem; display: block; }
.tabla-link svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabla-link:hover { color: var(--vesz-vil); }
.tabla-link.aktiv { color: var(--vesz-vil); }

.tetel {
  margin: 0 0 1rem; padding: 0 0 .5rem;
  border-bottom: 1px solid var(--vonal-halk);
}
.tetel:last-of-type { border-bottom: 0; }
.tetel > .egyseg { margin-top: 2.75rem; }
.tetel-szoveg { white-space: pre-line; }   /* a jegyzék tördelése maradjon meg */
.tetel-eredet {
  font: 400 .72rem/1.6 var(--jel); letter-spacing: .16em;
  text-transform: uppercase; color: var(--halk); margin: -.6rem 0 1.4rem;
}

/* A hozzászólások folyamként állnak a bejegyzés alatt: egyetlen szál,
   időrendben, behúzva. Nincs válasz-válaszra, nincs szavazás, nincs törlés. */
.kommentek {
  list-style: none; margin: 1.75rem 0 0; padding: 0 0 0 1.4rem;
  border-left: 1px solid var(--vonal);
}
.komment { margin: 0 0 1.4rem; }
.komment-szoveg { margin: 0; white-space: pre-line; }
.komment-ido {
  display: block; margin-top: .25rem;
  font: 400 .68rem/1.6 var(--jel); letter-spacing: .14em;
  text-transform: uppercase; color: var(--halk);
}
.komment.ures { color: var(--halk); font-style: italic; }
.komment.ures::first-line { font-style: italic; }

/* Lezart pont: latszik, de nem fogad tobb hozzaszolast. */
.tetel.lezart > .egyseg { color: var(--halk); }
.egyseg .jelzo {
  margin-left: .8rem; vertical-align: .18em;
  font: 400 .6rem/1 var(--jel); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ej); background: var(--halk); padding: .28em .6em;
}
.lezaras {
  margin: 1.4rem 0 0 1.4rem; padding-left: 1rem;
  border-left: 2px solid var(--arany-halk);
  font: 400 .88rem/1.7 var(--proza); color: var(--halk);
}

/* A rendszer hozzaszolasa: az uzemeltetes valasza a javitas utan. */
.komment.rendszer { border-left: 2px solid var(--arany); padding-left: .9rem; margin-left: -.9rem; }
.komment.rendszer .komment-szoveg { color: var(--papir-vil); }
.komment-ido b {
  color: var(--arany); font-weight: 400; margin-right: .7em;
}

/* ---- űrlapok ----------------------------------------------------------- */

.komment-urlap {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-start;
  margin: .4rem 0 0 1.4rem;
}
.komment-urlap textarea { flex: 1; }
.komment-urlap .urlap-uzenet { flex-basis: 100%; }

.tabla-urlap { display: grid; gap: 1.1rem; margin: 1.5rem 0 0; max-width: 44rem; }
.tabla-urlap label { display: grid; gap: .4rem; }
.tabla-urlap label > span {
  font: 400 .7rem/1.5 var(--jel); letter-spacing: .18em;
  text-transform: uppercase; color: var(--halk);
}
.tabla-urlap button { justify-self: start; }

textarea, input[type="text"], select {
  width: 100%; padding: .6rem .75rem;
  background: rgba(255,255,255,.035); color: var(--papir);
  border: 1px solid var(--vonal); border-radius: 0;
  font: 400 1rem/1.6 var(--proza);
}
textarea { resize: vertical; min-height: 2.9rem; }
textarea:focus, input[type="text"]:focus, select:focus {
  outline: none; border-color: var(--arany); background: rgba(255,255,255,.06);
}
::placeholder { color: var(--halk); opacity: 1; }

button[type="submit"] {
  padding: .6rem 1.4rem; cursor: pointer;
  background: none; color: var(--arany);
  border: 1px solid var(--arany-halk);
  font: 400 .72rem/1.5 var(--jel); letter-spacing: .19em; text-transform: uppercase;
}
button[type="submit"]:hover:not(:disabled) { color: var(--ej); background: var(--arany); }
button[type="submit"]:disabled { opacity: .45; cursor: default; }

.urlap-uzenet {
  margin: 0; min-height: 1.2rem;
  font: 400 .82rem/1.6 var(--proza); color: var(--arany);
}

@media (max-width: 46rem) {
  .komment-urlap { flex-wrap: wrap; margin-left: 0; }
  .kommentek { padding-left: 1rem; }
  .tabla-link { margin-left: .6rem; padding-left: .6rem; }
}

@media print {
  .fejlec, .morzsa, .zenelo, .kapcsolodo, .lablec, .lapkep { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .lap h1, .lap .szakasz, .lap .egyseg { color: #000; }
  .lap .szakasz { border-top-color: #999; }
  figure img { -webkit-mask-image: none; mask-image: none; filter: none; }
}