/* ============================================================
   AMG Solution, interaktív brosúra-lapozó
   A lap egy önálló "papír": container-query egységekkel (cqw) méretezett
   tipográfia, így a nyomtatott oldal arányai minden képernyőn tartanak.
   ============================================================ */

@font-face { font-family:'Circular Std'; src:url('../fonts/CircularStd-Book.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face { font-family:'Circular Std'; src:url('../fonts/CircularStd-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Circular Std'; src:url('../fonts/CircularStd-Bold.woff2') format('woff2');   font-weight:700; font-display:swap; }
@font-face { font-family:'Circular Std'; src:url('../fonts/CircularStd-Black.woff2') format('woff2');  font-weight:900; font-display:swap; }

:root {
  --paper: #faf9f7;
  --paper-2: #f2f1ee;
  --ink: #1a1613;
  --red: #fc3341;
  --dark: #221f1f;
  --muted: rgba(26,22,19,0.62);
  --faint: rgba(26,22,19,0.40);
  --line: rgba(26,22,19,0.14);
  --line-soft: rgba(26,22,19,0.09);

  --sans: 'Circular Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --bar-h: 52px;
  --stage-pad: clamp(0.5rem, 2vw, 2rem);
  --page-ratio: 1.4167;      /* a nyomtatott 595x420 pont */
  --shell: #e8e6e1;
  --pad: 6cqw;               /* a lap margója, egy helyen */
}

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

html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--shell);
  color: var(--ink);
  line-height: 1.55;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: var(--red); color: #fff; }

/* ============================ Fejléc ============================ */
.bar {
  height: var(--bar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 30;
}
.bar__logo img { height: 24px; width: auto; }
.bar__title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
}
.bar__spacer { margin-left: auto; }

.langs { display: flex; gap: 1px; background: var(--line-soft); padding: 1px; flex: 0 0 auto; }
.langs button {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  padding: 0.32rem 0.46rem; color: var(--faint); background: var(--paper);
  line-height: 1; transition: background 0.18s, color 0.18s;
}
.langs button:hover { color: var(--ink); }
.langs button.is-active { background: var(--ink); color: #fff; }

.toc-btn {
  display: flex; align-items: center; gap: 0.42rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); padding: 0.36rem 0.5rem; border: 1px solid var(--line-soft);
  transition: color 0.18s, border-color 0.18s; flex: 0 0 auto;
}
.toc-btn:hover { color: var(--ink); border-color: var(--line); }
.toc-btn svg { width: 11px; height: 11px; }

/* ============================ Színpad ============================ */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stage-pad);
  perspective: 2600px;
  perspective-origin: 50% 50%;
  position: relative;
}

.book {
  position: relative;
  width: min(100%, calc((100svh - var(--bar-h) * 2 - var(--stage-pad) * 2) * var(--page-ratio)), 1180px);
  aspect-ratio: var(--page-ratio);
  transform-style: preserve-3d;
  background: var(--paper);
  box-shadow: 0 24px 60px -18px rgba(26,22,19,0.34), 0 2px 10px rgba(26,22,19,0.10);
}
/* A lapkötegre utaló élek a könyv alatt */
.book::before, .book::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--paper-2); border: 1px solid var(--line-soft);
}
.book::before { transform: translate(4px, 4px); }
.book::after  { transform: translate(8px, 8px); opacity: 0.6; }

/* ============================ A lap ============================
   .leaf hordozza a 3D forgatást, .page a tartalmat. Azért van két réteg,
   mert az overflow:hidden a .page-en LAPÍTANÁ a 3D-t (transform-style: flat),
   így a hátlap sosem jelenne meg. */
.leaf {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  display: none;
  will-change: transform;
}
.leaf.is-active { display: block; z-index: 3; }
.leaf.is-under  { display: block; z-index: 1; }
.leaf.is-turning { z-index: 5; }

.page {
  position: absolute; inset: 0;
  background: var(--paper);
  overflow: hidden;
  container-type: size;
  container-name: page;
  backface-visibility: hidden;
}
/* A lap hátoldala: üres papír, amikor átfordul */
.leaf__back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(26,22,19,0.10), rgba(26,22,19,0) 22%),
    var(--paper-2);
  border: 1px solid var(--line-soft);
}
/* A fordulás alatt a lap árnyékot vet a mögötte lévőre */
.leaf__shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,22,19,0.30), rgba(26,22,19,0) 42%);
  opacity: 0; pointer-events: none; z-index: 2;
}

.page__in {
  position: absolute; inset: 0;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}
.page--bleed .page__in { padding: 0; }

.page__folio {
  position: absolute;
  left: var(--pad); bottom: 3.4cqh;
  font-family: var(--mono); font-size: 1.02cqw; letter-spacing: 0.14em;
  color: var(--faint); z-index: 4;
}
.page--dark .page__folio, .page--bleed .page__folio { color: rgba(250,249,247,0.42); }

/* ---------- Tipográfia a lapon (cqw = a lap szélességének 1%-a) ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 1.02cqw; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); display: flex; align-items: center; gap: 1.2cqw;
  margin-bottom: 2.2cqw;
}
/* Piros vonal a felirat mellett: ez tagolja a lap tetejét */
.eyebrow::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.28; }

.p-title {
  font-weight: 400; letter-spacing: 0.04em; line-height: 1.14;
  font-size: 4.4cqw; margin-bottom: 2.6cqw; text-wrap: balance;
}
.p-title .pt { color: var(--red); }
.p-title--sm { font-size: 3.1cqw; }

.p-body { font-size: 1.5cqw; line-height: 1.62; color: var(--muted); max-width: 46ch; }
.p-body + .p-body { margin-top: 0.9em; }

/* Kiemelt állítás: ez adja a lapnak a hangsúlyt */
.pull {
  font-size: 2.7cqw; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--ink); font-weight: 400; max-width: 26ch;
  padding-left: 2.4cqw; border-left: 2px solid var(--red);
}
.page--dark .pull { color: var(--paper); }

.p-lead { font-size: 2cqw; line-height: 1.45; color: var(--ink); font-weight: 500; max-width: 34ch; }
.page--dark { background: var(--dark); }
.page--dark .p-title { color: var(--paper); }
.page--dark .p-body { color: rgba(250,249,247,0.66); }
.page--dark .p-lead { color: var(--paper); }

/* Aszimmetrikus hasábok, nem két egyforma tömb */
.cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.4cqw; }
.cols--wide { grid-template-columns: 1.35fr 0.65fr; }
.grow { flex: 1 1 auto; min-height: 0; }
.mt-auto { margin-top: auto; }

/* ---------- Borító ---------- */
.cover__art { position: absolute; inset: 0; overflow: hidden; }
.cover__art img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.cover__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(250,249,247,0.94) 12%, rgba(250,249,247,0.4) 48%, rgba(250,249,247,0) 80%);
}
.cover__body { position: absolute; inset: 0; padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; }
.cover__mark img { height: 5.6cqw; width: auto; }
.cover__title { font-size: 6cqw; font-weight: 400; letter-spacing: 0.02em; line-height: 1.06; max-width: 13ch; }
.cover__title .pt { color: var(--red); }
.cover__meta {
  font-family: var(--mono); font-size: 1.02cqw; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-top: 2.6cqw;
  display: flex; align-items: center; gap: 1.2cqw;
}
.cover__meta::before { content: ''; width: 4cqw; height: 1px; background: var(--red); }

/* ---------- Teljes lapos grafika ---------- */
.bleed { position: absolute; inset: 0; overflow: hidden; }
.bleed__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Ahol szöveg ül a grafikán, ott balra sötét fátyol kell: a világos beton
   fölött a fehér felirat olvashatatlan. Jobbra elengedjük a grafikát. */
.bleed--scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(34,31,31,0.86) 10%, rgba(34,31,31,0.42) 46%, rgba(34,31,31,0) 74%);
}

/* ---------- Tények: a szám a grafikai elem ---------- */
.facts { display: flex; flex-direction: column; gap: 1.6cqw; }
.fact { display: grid; grid-template-columns: 7.5cqw 1fr; align-items: baseline; gap: 1.6cqw; }
.fact__n {
  font-size: 4.4cqw; font-weight: 900; line-height: 0.9; letter-spacing: -0.03em;
  color: var(--ink); text-align: right;
}
/* Csak a + jel piros, a szám maga tinta. A span-t nem lehet célozni:
   a számláló is span, azt is elkapná. */
.fact__n i { color: var(--red); font-style: normal; }
.fact__l {
  font-family: var(--mono); font-size: 0.95cqw; letter-spacing: 0.1em;
  color: var(--faint); line-height: 1.4; text-transform: uppercase;
  padding-bottom: 0.5cqw; border-bottom: 1px solid var(--line-soft);
}

/* ---------- Logófal: valódi rács, arány szerinti magassággal ---------- */
.logos {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-wrap: wrap;
  align-content: center; justify-content: center;
  align-items: center;
  column-gap: 3.4cqw; row-gap: 2.6cqw;
  padding-block: 1cqw;
}
.logo {
  mix-blend-mode: multiply;
  width: auto;
  opacity: 0.82;
  filter: saturate(0.15);
  transition: opacity 0.28s, filter 0.28s, transform 0.28s;
  will-change: transform;
}
.logos:hover .logo { opacity: 0.4; }
.logos .logo:hover { opacity: 1; filter: saturate(1); transform: scale(1.09); }

/* ---------- Kulcsszó pillek ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 0.6cqw; }
.pill {
  font-family: var(--mono); font-size: 1.05cqw; letter-spacing: 0.05em;
  background: var(--ink); color: var(--paper);
  padding: 0.66cqw 1cqw; white-space: nowrap;
  transition: background 0.18s, transform 0.18s;
  will-change: transform;
}
.pill:hover { background: var(--red); transform: translateY(-3px); }
.pill--light { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.pill--light:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Statisztika lap ---------- */
.stats { display: flex; flex-direction: column; gap: 1.4cqw; }
.stat { display: grid; grid-template-columns: 9cqw 1fr; align-items: baseline; gap: 2cqw; }
.stat__n {
  font-size: 6cqw; font-weight: 900; line-height: 0.86; letter-spacing: -0.035em;
  color: var(--paper); text-align: right;
  text-shadow: 0 2px 24px rgba(34,31,31,0.5);
}
.stat__n i { color: var(--red); font-style: normal; }
.stat__l {
  font-family: var(--mono); font-size: 1.02cqw; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper);
  padding-bottom: 0.6cqw; border-bottom: 1px solid rgba(250,249,247,0.3);
  text-shadow: 0 1px 12px rgba(34,31,31,0.7);
}

/* ---------- Szöveg + kép: a kép KILÓG a lap széléig ---------- */
.split { display: grid; grid-template-columns: 1fr 0.8fr; gap: 4cqw; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.split--flip { grid-template-columns: 0.8fr 1fr; }
.split--flip .split__text { order: 2; }
.split--flip .split__img { order: 1; }
/* A kép melletti hasábba három hosszú bekezdés jut, és a német/magyar szöveg
   jóval hosszabb az angolnál. Itt szűkebb tipó kell, különben kilóg a lapból. */
.split__text { align-self: center; }
.split__text .p-body { font-size: 1.24cqw; line-height: 1.58; max-width: none; }
.split__text .p-title { margin-bottom: 1.8cqw; }
.split__img { min-height: 0; overflow: hidden; position: relative; }
.split__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* a lap jobb/bal széléig és aljáig fut ki */
.split .split__img { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) calc(var(--pad) * -1) 0; }
.split--flip .split__img { margin: calc(var(--pad) * -1) 0 calc(var(--pad) * -1) calc(var(--pad) * -1); }

/* ---------- Kártyarács ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw 2.8cqw; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; padding-top: 1.4cqw; border-top: 1px solid var(--line); transition: border-color 0.3s; }
.card:hover { border-color: var(--red); }
.card__i {
  font-family: var(--mono); font-size: 0.95cqw; color: var(--red);
  letter-spacing: 0.1em; display: block; margin-bottom: 1cqw;
}
.card h3 { font-size: 1.6cqw; font-weight: 500; line-height: 1.25; margin-bottom: 0.7cqw; }
.card p { font-size: 1.18cqw; line-height: 1.5; color: var(--muted); }
.page--dark .card { border-color: rgba(250,249,247,0.2); }
.page--dark .card p { color: rgba(250,249,247,0.6); }

/* ---------- Folyamat: interaktív idővonal ---------- */
.tl { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; justify-content: center; gap: 2.4cqw; }
.tl__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6cqw; position: relative; }
.tl__step {
  text-align: left; padding-top: 1.6cqw; position: relative;
  border-top: 2px solid var(--line);
  transition: border-color 0.32s;
}
.tl__step::before {
  content: ''; position: absolute; top: -5px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: background 0.32s, transform 0.32s;
}
.tl__step.is-on { border-color: var(--red); }
.tl__step.is-on::before { background: var(--red); transform: scale(1.5); }
.tl__n { font-family: var(--mono); font-size: 0.95cqw; color: var(--faint); letter-spacing: 0.1em; transition: color 0.32s; }
.tl__step.is-on .tl__n { color: var(--red); }
.tl__t { font-size: 1.3cqw; font-weight: 500; line-height: 1.25; margin-top: 0.5cqw; color: var(--muted); transition: color 0.32s; }
.tl__step.is-on .tl__t { color: var(--ink); }
.tl__panel { min-height: 9cqw; }
.tl__panel h3 { font-size: 2.4cqw; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 1cqw; }
.tl__panel p { font-size: 1.5cqw; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* ---------- Kapcsolat lap ---------- */
.contact__art { position: absolute; inset: 0; overflow: hidden; }
.contact__art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; opacity: 0.85; will-change: transform; }
.contact__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, var(--dark) 20%, rgba(34,31,31,0.86) 44%, rgba(34,31,31,0.12) 88%); }
.contact__body { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.contact__list { display: flex; flex-direction: column; margin-top: auto; max-width: 44cqw; }
.contact__row {
  display: flex; align-items: baseline; gap: 2cqw;
  padding: 1.2cqw 0; border-top: 1px solid rgba(250,249,247,0.18);
  transition: padding-left 0.26s;
}
.contact__row:last-child { border-bottom: 1px solid rgba(250,249,247,0.18); }
a.contact__row:hover { padding-left: 1.2cqw; }
.contact__row dt {
  font-family: var(--mono); font-size: 0.9cqw; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(250,249,247,0.42); flex: 0 0 7cqw;
}
.contact__row dd { font-size: 1.7cqw; color: var(--paper); transition: color 0.2s; }
a.contact__row:hover dd { color: var(--red); }

/* ---------- Hátsó borító ---------- */
.back__art { position: absolute; inset: 0; overflow: hidden; }
.back__art img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.back__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; text-align: center; }
.back__body img { height: 6cqw; width: auto; }
.back__meta { font-family: var(--mono); font-size: 1.02cqw; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ============================ Koreográfia ============================
   A lap megérkezésekor az elemei egymás után úsznak be. */
.page [data-in] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
/* Az is-under is kell: fordulás közben a mögötte felbukkanó lap tartalma
   már ússzon be, különben üres papírt látni a fordulás teljes ideje alatt. */
.leaf.is-active .page [data-in],
.leaf.is-under .page [data-in] { opacity: 1; transform: none; }
.leaf.is-active .page [data-in],
.leaf.is-under .page [data-in] { transition-delay: calc(var(--i, 0) * 55ms + 90ms); }

/* ============================ Vezérlés ============================ */
.bar--bottom { border-bottom: 0; border-top: 1px solid var(--line-soft); justify-content: center; gap: clamp(0.75rem, 2vw, 1.75rem); }

.nav {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line); color: var(--ink);
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
  flex: 0 0 auto;
}
.nav:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav:disabled { opacity: 0.28; cursor: default; }
.nav svg { width: 13px; height: 13px; }

.counter { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--faint); min-width: 8ch; text-align: center; }
.counter b { color: var(--ink); font-weight: 700; }

.railway { flex: 1 1 auto; max-width: 340px; height: 2px; background: var(--line-soft); position: relative; }
.railway__fill { position: absolute; inset: 0 auto 0 0; background: var(--red); transition: width 0.4s cubic-bezier(0.22,1,0.36,1); }

/* Húzható sáv a lap jobb szélén: itt fogod meg a lapot */
.grip {
  position: absolute; top: 0; bottom: 0; right: 0; width: 13%;
  z-index: 6; cursor: grab; touch-action: pan-y;
}
.grip:active { cursor: grabbing; }
.grip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(26,22,19,0.07), rgba(26,22,19,0));
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.grip:hover::after { opacity: 1; }
.grip--back { right: auto; left: 0; width: 9%; }
.grip--back::after { background: linear-gradient(90deg, rgba(26,22,19,0.07), rgba(26,22,19,0)); }
.book.is-dragging .grip { cursor: grabbing; }

/* Sarok-fül, ami jelzi, hogy meg lehet fogni */
.dogear {
  position: absolute; right: 0; bottom: 0; width: 4.4cqw; height: 4.4cqw;
  z-index: 5; pointer-events: none;
  background: linear-gradient(225deg, var(--paper-2) 50%, transparent 50%);
  box-shadow: -2px -2px 8px rgba(26,22,19,0.14);
  opacity: 0; transform: translate(6px, 6px);
  transition: opacity 0.3s, transform 0.3s;
}
.book:hover .dogear { opacity: 1; transform: none; }
.leaf:last-child .dogear, .book.is-dragging .dogear { opacity: 0 !important; }

/* Nagy oldalsó lapozó gombok */
.edge {
  position: absolute; top: 0; bottom: 0; width: clamp(40px, 7vw, 96px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.22s; z-index: 20;
}
.edge--prev { left: 0; }
.edge--next { right: 0; }
.stage:hover .edge:not(:disabled) { opacity: 0.55; }
.edge:hover:not(:disabled) { opacity: 1 !important; }
.edge:disabled { cursor: default; opacity: 0 !important; }
.edge__i { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); box-shadow: 0 4px 16px rgba(26,22,19,0.2); display: flex; align-items: center; justify-content: center; }
.edge__i svg { width: 14px; height: 14px; }

/* ============================ Tartalomjegyzék ============================ */
.toc {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(232,230,225,0.97);
  backdrop-filter: blur(8px);
  padding: calc(var(--bar-h) + 1.5rem) clamp(1rem, 4vw, 3rem) 2rem;
  overflow-y: auto; display: none;
}
.toc.is-open { display: block; }
.toc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); max-width: 1180px; margin-inline: auto; }
.toc__item { text-align: left; }
.toc__thumb {
  aspect-ratio: var(--page-ratio); background: var(--paper);
  border: 1px solid var(--line-soft); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.18s, transform 0.18s; margin-bottom: 0.5rem;
}
.toc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.toc__item:hover .toc__thumb { border-color: var(--red); transform: translateY(-3px); }
.toc__item.is-current .toc__thumb { border-color: var(--red); border-width: 2px; }
.toc__n { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--red); display: block; }
.toc__label { font-size: 0.76rem; color: var(--ink); line-height: 1.3; display: block; }
.toc__thumb__txt { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; padding: 0.5rem; text-align: center; }

/* ============================ Mobil: a lap állóra rendeződik ============================ */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  :root { --bar-h: 48px; --stage-pad: 0px; }

  .book { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
  .book::before, .book::after { display: none; }
  .stage { perspective: 1400px; }
  .dogear, .edge { display: none; }
  .grip { display: none; }        /* mobilon a teljes lapon húzol */

  .page { container-type: normal; }
  .page__in { padding: 1.5rem 1.15rem 3rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .page--bleed .page__in { padding: 0; overflow: hidden; }

  .page__folio { left: 1.15rem; bottom: 0.9rem; font-size: 0.58rem; }
  .page:not(.page--bleed) .page__folio {
    left: 0; right: 0; bottom: 0; padding: 1rem 1.15rem 0.75rem;
    background: linear-gradient(to top, var(--paper) 58%, rgba(250,249,247,0));
    pointer-events: none;
  }
  .page--dark:not(.page--bleed) .page__folio { background: linear-gradient(to top, var(--dark) 58%, rgba(34,31,31,0)); }

  .eyebrow { font-size: 0.6rem; margin-bottom: 0.8rem; gap: 0.6rem; }
  .p-title { font-size: clamp(1.5rem, 7vw, 2.1rem); margin-bottom: 1rem; letter-spacing: 0.02em; }
  .p-title--sm { font-size: clamp(1.15rem, 5.4vw, 1.5rem); }
  .p-body { font-size: 0.88rem; line-height: 1.65; max-width: none; }
  .pull { font-size: 1.1rem; padding-left: 0.9rem; max-width: none; }
  .p-lead { font-size: 1rem; max-width: none; }

  .cols, .cols--wide { grid-template-columns: 1fr; gap: 1rem; }

  .cover__body { padding: 1.5rem 1.15rem; }
  .cover__mark img { height: 34px; }
  .cover__title { font-size: clamp(1.9rem, 9vw, 2.8rem); max-width: none; }
  .cover__meta { font-size: 0.6rem; margin-top: 1rem; }
  .cover__meta::before { width: 1.6rem; }
  .cover__art::after { background: linear-gradient(to top, var(--paper) 8%, rgba(250,249,247,0.62) 52%, rgba(250,249,247,0.15) 92%); }

  .facts { margin-top: 1.5rem; gap: 0.9rem; }
  .fact { grid-template-columns: 3.4rem 1fr; gap: 0.9rem; }
  .fact__n { font-size: 1.9rem; }
  .fact__l { font-size: 0.56rem; }

  .logos { column-gap: 1.1rem; row-gap: 0.9rem; }
  .logos:hover .logo { opacity: 0.82; }   /* touch-on nincs hover */

  .pills { gap: 0.3rem; }
  .pill { font-size: 0.62rem; padding: 0.35rem 0.5rem; }

  .stats { gap: 0.7rem; }
  .stat { grid-template-columns: 3.6rem 1fr; gap: 0.8rem; }
  .stat__n { font-size: 2.2rem; }
  .stat__l { font-size: 0.56rem; letter-spacing: 0.1em; }

  .split, .split--flip { grid-template-columns: 1fr; gap: 1.1rem; }
  .split--flip .split__text, .split--flip .split__img { order: 0; }
  .split .split__img, .split--flip .split__img { margin: 0 -1.15rem; height: 32vh; max-height: 200px; }

  .cards, .cards--4 { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.4rem; }
  .card { padding-top: 0.7rem; }
  .card__i { font-size: 0.56rem; margin-bottom: 0.4rem; }
  .card h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
  .card p { font-size: 0.8rem; }

  .tl { gap: 1rem; }
  .tl__rail { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .tl__step { padding-top: 0.6rem; }
  .tl__n { font-size: 0.56rem; }
  .tl__t { font-size: 0.72rem; }
  .tl__panel { min-height: 6rem; }
  .tl__panel h3 { font-size: 1.15rem; }
  .tl__panel p { font-size: 0.85rem; }

  .contact__art img { object-position: 62% center; opacity: 0.4; }
  .contact__art::after { background: linear-gradient(to top, var(--dark) 30%, rgba(34,31,31,0.86)); }
  .contact__list { max-width: none; margin-top: 1.5rem; }
  .contact__row { padding: 0.7rem 0; gap: 0.3rem; flex-direction: column; }
  .contact__row dt { font-size: 0.55rem; flex: none; }
  .contact__row dd { font-size: 1rem; }

  .back__body img { height: 40px; }
  .back__meta { font-size: 0.6rem; }
  .back__body { gap: 1rem; }

  .bar__title { display: none; }
  .railway { max-width: none; }
}

@media (max-width: 360px) {
  .bar { gap: 0.4rem; padding-inline: 0.6rem; }
  .bar__logo img { height: 20px; }
  .langs button { padding: 0.28rem 0.3rem; font-size: 0.55rem; letter-spacing: 0.02em; }
  .toc-btn span { display: none; }
  .page__in { padding: 1.1rem 0.85rem 2.6rem; }
  .counter { min-width: 7ch; font-size: 0.6rem; }
  .tl__rail { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .page [data-in] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .leaf { transition: none !important; }
  .logo, .pill, .card, .tl__step { transition: none; }
  .cover__art img, .bleed__img, .contact__art img, .back__art img, .split__img img { transform: none !important; }
}

@media print {
  body { overflow: visible; display: block; background: #fff; }
  .bar, .edge, .toc, .dogear, .grip { display: none !important; }
  .stage { display: block; padding: 0; perspective: none; }
  .book { width: 100%; box-shadow: none; aspect-ratio: var(--page-ratio); }
  .book::before, .book::after { display: none; }
  .leaf { display: block !important; position: relative; page-break-after: always; break-after: page; transform: none !important; }
  .leaf__back, .leaf__shade { display: none; }
  .page [data-in] { opacity: 1 !important; transform: none !important; }
}