/* Megyeri Zsófi — white, quiet, the works first. Tokens on :root; wide layout from 1000px (INV-0433); 1 mm sides on phone (INV-0335). */
:root{--bg:#fff;--ink:#1d1d1b;--muted:#5f5f5a;--line:#e6e4df;--accent:#1d1d1b;--side:1mm;--max:1240px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
a{color:inherit}
main{max-width:var(--max);margin:0 auto;padding:8px calc(var(--side) + 12px) 40px}
h1{font-weight:400;font-size:22px;letter-spacing:.14em;text-transform:uppercase;margin:18px 0 14px}
h2{font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin:28px 0 10px}
h2 a{text-decoration:none}
/* ── header ── */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:none;padding:14px calc(var(--side) + 12px)}
.name{font-size:19px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
#nav ul{list-style:none;margin:0;padding:0}
#nav a{text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;padding:6px 0}
#nav li.on>a,#nav a:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;width:42px;height:38px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.5px;background:var(--ink)}
/* top menu: one row, sub-menus drop down */
body.menu-top #nav>ul{display:flex;flex-wrap:wrap;gap:4px 22px}
body.menu-top #nav li{position:relative}
body.menu-top #nav li ul{display:none;position:absolute;left:-12px;top:100%;background:var(--bg);border:1px solid var(--line);padding:6px 12px;min-width:160px;z-index:30}
body.menu-top #nav li:hover>ul,body.menu-top #nav li:focus-within>ul{display:block}
/* hamburger: always folded; opens downwards with the sub-menus indented */
body.menu-burger .burger{display:flex}
body.menu-burger #nav{display:none;flex-basis:100%}
body.menu-burger #nav.open{display:block}
body.menu-burger #nav li ul{padding-left:16px}
body.menu-burger #nav>ul>li{border-top:1px solid var(--line)}
/* the top menu on a narrow phone wraps under the name, sub-menus inline */
@media (max-width:700px){
  body.menu-top #nav{flex-basis:100%}
  body.menu-top #nav>ul{gap:0 16px}
  body.menu-top #nav li ul{position:static;border:0;padding:0 0 0 10px;min-width:0}
  body.menu-top #nav li.has-kids:not(.on)>ul{display:none}
}
/* ── banner (Csillag Kuckó's slideshow) ── */
.slideshow{position:relative;width:100%;overflow:hidden;background:var(--bg);margin:10px 0 6px}
.slides{display:flex;transition:transform .45s ease;touch-action:pan-y}
.slides figure{flex:0 0 100%;margin:0;width:100%}
.slides img{display:block;width:100%;height:clamp(260px,52vw,560px)}
.fit-contain .slides img{object-fit:contain}
.fit-cover .slides img{object-fit:cover}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--ink);background:var(--bg);cursor:pointer;opacity:.7}
.dots button.on{background:var(--ink);opacity:1}
/* ── works ── */
.intro{max-width:60ch;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:block;text-decoration:none;cursor:zoom-in}
.tile img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#f4f3f0}
.tile span{display:block;font-size:13px;color:var(--muted);padding:5px 0 0}
.sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-4px 0 6px}
.sub a,.crumb a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.crumb{margin:-6px 0 14px}
.empty{color:var(--muted)}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr);gap:22px} main{padding-left:28px;padding-right:28px} .top{padding-left:28px;padding-right:28px}}
/* ── about / contact ── */
.about{display:grid;gap:22px}
.portrait{width:100%;max-width:420px;height:auto}
.text{max-width:62ch}
@media (min-width:1000px){.about{grid-template-columns:minmax(0,420px) 1fr;align-items:start}}
.contact{display:grid;gap:12px;max-width:520px;margin-top:16px}
.contact label{display:grid;gap:4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contact input,.contact textarea{font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink)}
.contact button{justify-self:start;font:inherit;letter-spacing:.14em;text-transform:uppercase;padding:10px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.hp{position:absolute;left:-9999px}
.ok{color:#1f6b3a}.err{color:#a3271f}
/* ── lightbox ── */
.lb{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.98);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:94vw;text-align:center}
.lb img{max-width:94vw;max-height:82vh;width:auto;height:auto;display:block;margin:0 auto}
.lb figcaption{font-size:14px;color:var(--muted);padding:10px 8px 0;white-space:pre-line}
.lb button{position:absolute;background:none;border:0;font-size:40px;line-height:1;color:var(--ink);cursor:pointer;padding:10px 14px}
.lb-x{top:6px;right:6px}.lb-p{left:2px;top:50%;transform:translateY(-50%)}.lb-n{right:2px;top:50%;transform:translateY(-50%)}
.foot{max-width:var(--max);margin:0 auto;padding:24px 28px 40px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
.langs{display:flex;gap:10px;font-size:12px;letter-spacing:.12em;margin-left:auto}
.langs a{text-decoration:none;color:var(--muted)}
.langs b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--ink)}
body.menu-top .langs{order:2}
body.menu-top #nav{order:3}
@media (min-width:1000px){body.menu-top #nav{order:1;margin-left:auto}body.menu-top .langs{margin-left:0}}