:root{
  --bg:#f4f5f6; --ink:#1d2024; --muted:#6b7178; --line:#d9dcdf; --ph:#e3e5e7;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#1b1c1e; --ink:#eceef0; --muted:#9aa0a6; --line:#33363a; --ph:#2a2c2f}
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px 32px;padding:28px clamp(16px,4vw,48px) 8px}
.logo{display:block;align-self:center}
.logo img{display:block;height:auto;width:clamp(130px,16vw,190px)}
@media (prefers-color-scheme:dark){.logo img{filter:invert(1)}}
nav{display:flex;flex-wrap:wrap;gap:6px 26px}
nav a{color:var(--muted);padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a[aria-current]{color:var(--ink);border-color:var(--ink)}

.intro{padding:20px clamp(16px,4vw,48px) 8px;max-width:760px}
.intro p{font:400 clamp(20px,2.6vw,28px)/1.35 var(--serif)}


.grid{columns:3 280px;column-gap:10px;padding:0 clamp(16px,4vw,48px) 60px}
.grid figure{break-inside:avoid;margin:0 0 10px;background:var(--ph);min-height:160px;
  overflow:hidden;cursor:zoom-in;position:relative}
.grid img{display:block;width:100%;height:auto;transition:transform .5s,opacity .5s}
.grid figure:hover img{transform:scale(1.03)}
.grid figcaption{position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;color:#fff;font-size:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .25s}
.grid figure:hover figcaption,.grid figure:focus-visible figcaption{opacity:1}
.grid.in figure{animation:rise .7s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (hover:none){.grid figcaption{opacity:1}}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding:24px clamp(16px,4vw,48px) 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer a:hover{color:var(--ink)}
footer div{display:flex;gap:20px}

.lb{position:fixed;inset:0;background:rgba(10,11,12,.94);display:none;align-items:center;
  justify-content:center;z-index:10;padding:48px 16px 64px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb p{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#d5d8db;font-size:15px}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;
  padding:12px 18px;line-height:1;opacity:.75}
.lb button:hover{opacity:1}
.lb .x{top:6px;right:6px}.lb .pv{left:4px;top:50%}.lb .nx{right:4px;top:50%}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}html{scroll-behavior:auto}
}

/* Aloldalak */
.page{padding:24px clamp(16px,4vw,48px) 72px;max-width:760px}
.page h1{font:600 clamp(28px,4vw,40px)/1.15 var(--serif);margin-bottom:28px}
.page p{font:400 clamp(18px,2vw,21px)/1.7 var(--serif);margin-bottom:1.1em;max-width:62ch}
.page .sign{font:600 15px/1.4 var(--sans);letter-spacing:.14em;margin-top:2em}
.page .lead{color:var(--muted)}
.form{display:grid;gap:18px;margin-top:28px;max-width:560px}
.form label{display:grid;gap:6px;font-size:15px;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:4px;padding:11px 12px;width:100%}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.form button{font:inherit;justify-self:start;background:var(--ink);color:var(--bg);border:0;
  border-radius:999px;padding:12px 30px;cursor:pointer}
.form button[disabled]{opacity:.5;cursor:default}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.status{min-height:1.5em;font-size:16px}
.direct{margin-top:36px;font:400 18px/1.8 var(--serif)}
.direct a{border-bottom:1px solid var(--line)}

.gt{font:600 clamp(26px,3.6vw,36px)/1.2 var(--serif)}
.msg{color:var(--muted);padding:12px 0}
.intro{padding-bottom:24px}

/* Bemutatkozás: fotó + szöveg */
.page.about{max-width:1100px;margin-inline:auto;display:grid;gap:28px 56px;align-items:start}
.portrait{display:block;width:100%;height:auto;background:var(--ph)}
@media (min-width:820px){
  .page.about:has(.portrait){grid-template-columns:minmax(0,1fr) var(--pw,41.6%)}
  .about .portrait{grid-column:2;grid-row:1;align-self:stretch;height:100%;object-fit:cover;object-position:center 22%}
  .about>div{grid-column:1;grid-row:1;align-self:start}
}
.page.about p{font-size:var(--fs,clamp(18px,2vw,21px))}

/* Képmentés nehezítése */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.grid img{pointer-events:none}

/* Fejléc: középen a logó, két oldalán a menü */
header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:0 clamp(24px,5vw,72px);padding:28px clamp(16px,4vw,48px) 12px}
.logo img{width:clamp(150px,18vw,220px)}
.nl{justify-self:end;justify-content:flex-end}
.nr{justify-self:start}
@media (max-width:820px){
  header{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px}
  .logo{order:-1;flex-basis:100%;display:flex;justify-content:center}
  .nl,.nr{justify-content:center}
}

/* Betűtípus a menühöz és a galériacímekhez (régi oldal hangulata): Dosis */
@font-face{font-family:"Dosis";font-weight:300;font-display:swap;
  src:local("Dosis Light"),url("fonts/Dosis-Light.ttf") format("truetype")}
@font-face{font-family:"Dosis";font-weight:400;font-display:swap;
  src:local("Dosis Regular"),local("Dosis"),url("fonts/Dosis-Regular.ttf") format("truetype")}
:root{--cim:"Dosis","Avenir Next Condensed",Bahnschrift,"Arial Narrow",system-ui,sans-serif}
nav a{font:400 16px/1.4 var(--cim);text-transform:uppercase;letter-spacing:.12em}
.intro:has(.gt){max-width:none;text-align:center;padding-top:36px;padding-bottom:36px}
.gt{font:300 clamp(30px,4.4vw,52px)/1.15 var(--cim);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* Galéria: középen álló, 3 oszlopos rács a képernyő kb. kétharmadán, mint a régi oldalon. */
.grid{columns:3;column-gap:9px;width:66.5%;margin:0 auto;padding:0 0 60px}
.grid figure{margin:0 0 9px}
@media (max-width:1000px){.grid{columns:2;width:calc(100% - 48px)}}
@media (max-width:560px){.grid{columns:2;width:calc(100% - 32px)}.grid figcaption{display:none}}

/* Főoldal: kis hely a fejléc alatt, mert nincs bevezető mondat */
.home{padding-top:36px}

/* Kapcsolat: középre igazítva, a galériaoldalak címével egyező címmel */
.page.contact{max-width:760px;margin-inline:auto;text-align:center;padding-top:8px}
.page.contact h1{font:300 clamp(30px,4.4vw,52px)/1.15 var(--cim);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin:12px 0 22px}
.page.contact p{margin-inline:auto}
.page.contact .form{margin-inline:auto;text-align:left}
.page.contact .form button{justify-self:center}
.page.contact .status{text-align:center}

/* Képek betöltése: kaszkád (egymás utáni beúszás) */
.grid.in figure{animation:none}
.grid figure{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.grid figure.show{opacity:1;transform:none}

/* Vékony elválasztóvonal a menü alatt, a galéria szélességében */
header::after{content:"";grid-column:1/-1;justify-self:center;width:66.5vw;height:1px;
  background:var(--line);opacity:.8;margin-top:20px}
@media (max-width:1000px){header::after{width:calc(100vw - 48px)}}
@media (max-width:820px){header::after{flex:0 0 calc(100vw - 48px);width:calc(100vw - 48px)}}
@media (max-width:560px){header::after{flex-basis:calc(100vw - 32px);width:calc(100vw - 32px)}}