:root {
  --paper: #f5f0e3;
  --ink: #131210;
  --yellow: #ffe600;
  --red: #d8402a;
  --hand: "Caveat Brush", "Marker Felt", cursive;
  --type: "Courier Prime", "Courier New", monospace;
  --scribble: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font: 17px/1.5 var(--type);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden; min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
h2, .h2 { font: 400 clamp(2.6rem, 7vw, 4.6rem)/1 var(--hand); margin: 0 0 .25em; display: inline-block; transform: rotate(-2deg);
  background: linear-gradient(transparent 62%, var(--yellow) 62% 90%, transparent 90%); padding: 0 .25em; }
.lead { margin: 0 0 2.2rem; font-style: italic; }
.sec { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 6vw, 6rem); position: relative; }
html[lang=en] .ketnyelvu [lang=hu], html:not([lang=en]) .ketnyelvu [lang=en] { display: none; }

/* oldalváltás: szétfutó tus */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: tus .55s cubic-bezier(.6,0,.3,1); }
@keyframes tus { from { clip-path: circle(0 at 50% 40%); } to { clip-path: circle(150vmax at 50% 40%); } }

/* tusvonal a lap szélén */
.inkline { position: fixed; left: 0; top: 0; width: 46px; height: 100vh; z-index: 5; pointer-events: none; mix-blend-mode: multiply; }
.inkline path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 900px) { .inkline { display: none; } }

.lang { position: fixed; right: 14px; top: 14px; z-index: 20; font: 700 14px var(--type); background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--scribble); padding: 6px 12px; cursor: pointer; transform: rotate(3deg); }
.lang i { font-style: normal; }
html:not([lang=en]) .lang b, html[lang=en] .lang i { background: var(--yellow); padding: 0 3px; }

/* ---------- nyitó ---------- */
.hero { min-height: 100svh; display: grid; place-items: center; align-content: center; gap: .8rem; padding: 2.5rem 1rem 1.5rem; }
.blot { position: relative; width: min(820px, 96vw, 92svh); aspect-ratio: 800/420; display: grid; place-items: center; align-content: center; transform: rotate(-2deg); }
.blot svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ink); filter: url(#wob); }
.blot h1 { position: relative; margin: 0; line-height: .8; text-align: center; }
.nev { display: block; font: 400 clamp(3.2rem, 15vw, 9rem)/.85 var(--hand); color: var(--yellow); }
.alnev { display: inline-block; font: 400 clamp(1.4rem, 6vw, 3.6rem)/1 var(--hand); color: #fff; letter-spacing: .12em; transform: rotate(-6deg) translate(18%, -8%); border-bottom: 3px solid #fff; border-radius: 50%; padding: 0 .3em; }
.sub { position: relative; color: #fff; margin: .2rem 0 0; font-size: clamp(.62rem, 2.1vw, 1rem); text-align: center; }
@media (max-height: 560px) { .nev { font-size: 4rem; } .alnev { font-size: 1.6rem; } }

/* ---------- tolltartó ---------- */
.case { --tw: clamp(25px, 6.2vw, 48px); position: relative; display: flex; gap: clamp(7px, 2.2vw, 24px); padding: 22px clamp(16px, 4vw, 38px) 18px; background: var(--red);
  border: 3px solid var(--ink); border-radius: var(--scribble); outline: 2px dashed var(--yellow); outline-offset: -9px; transform: rotate(1.5deg); box-shadow: 7px 9px 0 rgba(0,0,0,.18); }
.case::after { content: ""; position: absolute; left: -3px; right: -3px; top: 58%; height: 12%; max-height: 18px; background: var(--ink); z-index: 3; pointer-events: none; }
.tool { position: relative; width: var(--tw); text-decoration: none; color: inherit; transform: rotate(var(--r)); transition: transform .35s cubic-bezier(.3,1.7,.5,1); }
.tool svg { display: block; width: 100%; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.hero .tool svg { filter: url(#wob); }
.tool:hover, .tool:focus-visible { transform: translateY(-46px) rotate(calc(var(--r) * -2)); outline: none; z-index: 4; }
.tag { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 8px; white-space: nowrap; font: 400 1.35rem var(--hand); background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--scribble); padding: 0 .6em; opacity: 0; transition: .2s; pointer-events: none; z-index: 6; }
.tool:hover .tag, .tool:focus-visible .tag { opacity: 1; translate: -50% 0; }
.hint { font: 400 1.25rem var(--hand); opacity: .65; margin: 0; }
@media (hover: none) {   /* érintőképernyőn a címkék mindig látszanak, ferdén lelógva */
  .hero .case { margin-bottom: 7.5rem; }
  .hero .tag { opacity: 1; bottom: auto; top: calc(100% + 24px); left: auto; right: 40%; font-size: .9rem; transform-origin: 100% 0; rotate: -58deg; translate: 0 0; padding: 0 .5em; }
  .hero .tool:hover .tag { translate: 0 0; }
  .hint { display: none; }
}

/* belső oldalak fejléce: kis tolltartó */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; padding: 1.1rem clamp(1rem, 6vw, 6rem) 0; padding-right: 7rem; }
.logo { font: 400 2.1rem/1 var(--hand); color: var(--yellow); background: var(--ink); text-decoration: none; padding: .25em .7em .3em; border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; transform: rotate(-3deg); transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.logo:hover { transform: rotate(2deg) scale(1.06); }
.top .case { --tw: 21px; gap: 12px; padding: 12px 18px 9px; outline-offset: -6px; outline-width: 1.5px; border-width: 2.5px; box-shadow: 4px 5px 0 rgba(0,0,0,.18); margin-top: 1.6rem; }
.top .tool:hover, .top .tool:focus-visible, .top .tool.itt { transform: translateY(-20px) rotate(calc(var(--r) * -2)); }
.top .tag { font-size: 1.05rem; bottom: auto; top: calc(100% + 10px); }
.top .tool.itt .tag { opacity: 1; translate: -50% 0; background: var(--ink); color: var(--yellow); }
.top .tool:hover .tag { z-index: 7; }
@media (hover: none), (max-width: 640px) {   /* telefonon sima, görgethető szöveges menü */
  .top { padding-right: 1rem; }
  .top .case { background: none; border: 0; outline: 0; box-shadow: none; transform: none; padding: 4px 0 8px; margin: 0; width: 100%; overflow-x: auto; gap: 8px; }
  .top .case::after, .top .tool svg { display: none; }
  .top .tool, .top .tool:hover, .top .tool.itt { width: auto; transform: none; flex: none; }
  .top .tag, .top .tool.itt .tag, .top .tool:hover .tag { position: static; opacity: 1; translate: 0 0; display: block; font-size: 1.1rem; pointer-events: auto; }
}

/* ---------- rajzok fala ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 3vw, 2.6rem); align-items: center; }
.card { --rot: 0deg; --tape: 0deg; position: relative; display: block; background: #fff; border: 2.5px solid var(--ink); border-radius: var(--scribble); padding: 10px 10px 4px; cursor: zoom-in; text-decoration: none; color: inherit;
  transform: rotate(var(--rot)); transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; box-shadow: 4px 5px 0 rgba(0,0,0,.14); }
.card:nth-child(4n+1) { --rot: -2.2deg; --tape: 3deg; } .card:nth-child(4n+2) { --rot: 1.4deg; --tape: -4deg; }
.card:nth-child(4n+3) { --rot: -.8deg; --tape: 2deg; } .card:nth-child(4n) { --rot: 2.6deg; --tape: -2deg; }
.card:nth-child(7n) { --rot: -3deg; } .card:nth-child(5n) { --tape: 6deg; }
.card::before { content: ""; position: absolute; top: -13px; left: 50%; width: 86px; height: 24px; translate: -50% 0; rotate: var(--tape); background: rgba(255,230,0,.8); border-left: 2px dotted rgba(0,0,0,.25); border-right: 2px dotted rgba(0,0,0,.25); }
.card:hover, .card:focus-visible { transform: rotate(0) scale(1.04); box-shadow: 9px 12px 0 rgba(0,0,0,.2); z-index: 2; outline: none; }
.card img { width: 100%; object-fit: contain; background: #fff; }
.card span { display: block; font: 400 1.45rem/1.25 var(--hand); padding: .25em 0 .2em; }
.card.poenos::after { content: "…"; position: absolute; right: -10px; bottom: 34px; width: 36px; height: 30px; display: grid; place-items: center; font: 700 1.1rem/1 var(--type); padding-bottom: 8px;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 50% 50% 50% 10%; rotate: 8deg; }
.card.album { cursor: pointer; }
.card small { display: block; font-size: .8rem; opacity: .7; padding-bottom: .4em; }
.card small i { font-style: normal; }
.albumok { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 280px)); }
.tovabb { text-align: center; margin: 3rem 0 0; }
.kedv { padding-top: 0; }
.kavar { font: 400 1.5rem var(--hand); background: var(--ink); color: var(--yellow); border: 0; border-radius: var(--scribble); padding: .1em .9em; cursor: pointer; margin: 0 0 2.2rem 1.5rem; rotate: 2deg; transition: rotate .25s cubic-bezier(.3,1.8,.5,1), scale .25s; vertical-align: middle; }
.kavar:hover { rotate: -3deg; scale: 1.08; }
.vissza { font: 400 1.4rem var(--hand); color: inherit; }

/* ---------- nagyító + poén-időzítés ---------- */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; overflow: hidden; color: var(--ink); }
.lb[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.lb::backdrop { background: rgba(245,240,227,.97); }
.lb figure { margin: 0; display: grid; justify-items: center; gap: .6rem; padding: 3rem .25rem 1rem; max-height: 100dvh; overflow-y: auto; }
.lb img { max-height: 62dvh; max-width: 100%; width: auto; border: 3px solid var(--ink); border-radius: 4px; background: #fff; box-shadow: 10px 12px 0 rgba(0,0,0,.15); }
.lb figcaption { width: min(700px, 100%); min-height: 9.5rem; text-align: center; }
.lb h3 { font: 400 2.2rem/1 var(--hand); margin: .2rem 0 .5rem; }
.cap p { margin: 0 0 .2rem; font-size: 1.1rem; min-height: 1.5em; }
.cap p.punch { font-weight: 700; }
.cap p.punch.done { animation: badum .45s; background: linear-gradient(transparent 55%, var(--yellow) 55% 92%, transparent 92%); display: inline-block; padding: 0 .3em; }
@keyframes badum { 0% { transform: scale(1); } 35% { transform: scale(1.09) rotate(-1.5deg); } 70% { transform: scale(.98) rotate(1deg); } 100% { transform: none; } }
.lb .nav, .lb .x { font: 400 3.4rem/1 var(--hand); background: none; border: 0; cursor: pointer; color: var(--ink); padding: .2em .3em; transition: transform .2s; }
.lb .nav:hover, .lb .x:hover { color: var(--red); transform: scale(1.2); }
.lb .x { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 2; }
@media (max-width: 640px) { .lb .nav { font-size: 2.4rem; padding: .2em .12em; } }
::view-transition-group(zoom) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3,1.3,.5,1); }

/* ---------- kisplasztikák: éjszakai tárlat ---------- */
body.tarlat main { background: #100e0c; color: #efe6d2; overflow: hidden; }
body.tarlat .h2 { background: none; color: var(--yellow); position: relative; z-index: 2; }
body.tarlat .lead { position: relative; z-index: 2; }
.museum { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); align-items: end; gap: 3.5rem 2.5rem; }
.museum .card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 14px; transform: none; text-align: center; color: inherit; }
.museum .card::before, .museum .card::after { display: none; }
.museum .card img { height: 360px; aspect-ratio: auto !important; object-fit: cover; border-radius: 3px; filter: sepia(.25) contrast(1.05); background: #000; transition: transform .35s cubic-bezier(.3,1.5,.5,1); transform-origin: 50% 100%; }
.museum .card:hover img { transform: scale(1.05); }
.museum .card span { margin: 0 -14px; min-height: 58px; display: grid; place-items: center; background: linear-gradient(#3a332b, #1d1915); border-top: 5px solid #54493d; padding: 6px; }
.museum .card span { font: 700 .72rem/1.25 var(--type); letter-spacing: .08em; text-transform: uppercase; color: #e9d48f; }
.torch { position: absolute; inset: 0; pointer-events: none; display: none;
  background: radial-gradient(circle 250px at var(--mx, 50%) var(--my, 320px), transparent 0 35%, rgba(8,7,6,.92) 100%); }
@media (hover: hover) { .torch { display: block; } }

/* ---------- életrajz: képregénycsík ---------- */
.strip { display: grid; gap: clamp(1.8rem, 4vw, 3rem); max-width: 900px; margin-top: 1.5rem; }
.panel { position: relative; width: min(100%, 560px); background: #fff; border: 3px solid var(--ink); border-radius: var(--scribble); padding: 12px; box-shadow: 6px 7px 0 rgba(0,0,0,.16); transform: rotate(var(--rot)); }
.js .panel { opacity: 0; transform: translateY(40px) rotate(var(--rot)) scale(.92); transition: opacity .5s, transform .6s cubic-bezier(.3,1.5,.5,1); }
.js .panel.in { opacity: 1; transform: rotate(var(--rot)); }
.panel:nth-child(even) { justify-self: end; }
.panel p { position: relative; margin: -26px 0 0 -24px; width: fit-content; max-width: 96%; background: var(--yellow); border: 2.5px solid var(--ink); padding: .3em .7em; font: 700 .95rem/1.3 var(--type); transform: rotate(-1.5deg); }
.panel img { width: 100%; max-height: 400px; object-fit: contain; margin-top: .8rem; }
.panel .no { position: absolute; right: 10px; bottom: 2px; font: 400 1.3rem var(--hand); opacity: .5; }
.utoszo { max-width: 620px; margin-top: 4rem; border-left: 4px solid var(--ink); padding-left: 1.4rem; }
.utoszo h3 { font: 400 2.2rem/1 var(--hand); margin: 0 0 .6rem; }
.utoszo p { margin: 0 0 1rem; }

/* ---------- rendelés ---------- */
.order { background: var(--yellow); text-align: center; }
.order h2 { background: none; }
.order p { max-width: 620px; margin: 1rem auto 1.4rem; font-size: 1.1rem; }
.order .email { font-size: .9rem; margin-top: 1.2rem; }
.btn { display: inline-block; font: 400 2rem var(--hand); color: var(--yellow); background: var(--ink); text-decoration: none; padding: .15em 1em; border-radius: var(--scribble); transform: rotate(-2deg); transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.btn:hover { transform: rotate(2deg) scale(1.08); }

/* ---------- 404 ---------- */
.nincs { text-align: center; }
.nincs p { margin: 1rem auto 2rem; max-width: 30rem; }
.tabla { width: 170px; aspect-ratio: 1; margin: 0 auto 1.5rem; display: grid; place-items: center; font: 400 4rem var(--hand); background: #fff; border: 18px solid var(--red); border-radius: 50%; outline: 3px solid var(--ink); rotate: -8deg; box-shadow: 6px 8px 0 rgba(0,0,0,.18); }

footer { background: var(--ink); color: var(--paper); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding: 1.2rem clamp(1rem, 6vw, 6rem); font-size: .85rem; }
footer a { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .blot svg, .hero .tool svg { filter: none; }
  .js .panel { opacity: 1; transform: rotate(var(--rot)); }
  @view-transition { navigation: none; }
}