/* =========================================================================
   Tóth Lóránd — site.css
   Faithfully reproduces the Lóri-approved Claude Design "All Paintings" export
   (Design/handoff/). Every value below is taken from that export. Change a
   token in :root and the whole site follows.
   ========================================================================= */

/* ── Self-hosted fonts (woff2 in /assets/fonts; no font CDN) ─────────────── */
/* Latin + Latin-Extended subsets so Hungarian ő/ű render correctly (D10). */

@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/inter-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/inter-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/inter-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Libre Baskerville"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/librebaskerville-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Libre Baskerville"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/librebaskerville-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Libre Baskerville"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/librebaskerville-400italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Libre Baskerville"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/librebaskerville-400italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ── Tokens (exact values from the approved export) ──────────────────────── */
:root {
  --bg:#F7F4EC; --ink:#1A1A1A; --hu:#7A8283;
  --nav-current:#A3A59F;
  --pill-bg:#111111; --pill-hover:#2C2C28; --pill-ink:#F7F4EC;
  --dd-bg:#FBF9F2; --dd-border:#E3DDCD; --dd-hover:#F1ECDD;
  --dd-shadow:0 18px 40px -22px rgba(40,38,30,0.45);
  --img-bg:#E7E1D2;
  --similar:#9FA09A;
  --chip-bg:#E7E3D9; --chip-ink:#57574F; --chip-hover-bg:#DCD7C9;
  --rule:#D8D3C4; --muted:#57574F; --focus:#7A8283;

  --serif:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw:1320px;
  --pad-x:clamp(20px, 5vw, 56px);
  --measure:38rem;
  --indent:clamp(38px, 3.8vw, 44px);   /* aligns metadata/desc/similar under the title text */

  --reveal-dist:48px;
  --reveal-dur:0.85s;
  --reveal-ease:cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:clamp(13px,1.2vw,15px); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
ul { list-style:none; margin:0; padding:0; }
p { margin:0; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
/* A "Show more"-appended card is briefly focused for screen-reader/keyboard
   continuity (it gets tabindex="-1"). It's a non-interactive container, so never
   paint a focus ring on it — Safari shows one for this programmatic focus, Chrome
   doesn't. Higher specificity than the :focus-visible rule above, so it wins. */
.work[tabindex="-1"]:focus { outline:none; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--bg);
  padding:.6rem 1rem; border:1px solid var(--rule); }
.skip-link:focus { left:1rem; top:1rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:clamp(20px,3vw,34px); position:relative; }
.brand { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.avatar { position:relative; width:clamp(38px,3.4vw,46px); height:clamp(38px,3.4vw,46px);
  border-radius:50%; overflow:hidden; border:1px solid #D8D1BF; display:block; flex-shrink:0; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.avatar__hover { opacity:0; transition:opacity .25s ease; }
.avatar:hover .avatar__hover { opacity:1; }
.brand__name { font-family:var(--serif); font-size:clamp(15px,1.4vw,18px); letter-spacing:.01em;
  line-height:1; white-space:nowrap; }
.nav--desktop { display:flex; align-items:center; gap:clamp(22px,3vw,44px); }
.nav--desktop > a { font-size:clamp(13px,1.1vw,15px); }
.nav--desktop > a:hover { color:var(--hu); }
.nav-current { color:var(--nav-current); }
.nav-current:hover { color:var(--nav-current); }
.pill { display:inline-flex; align-items:center; background:var(--pill-bg); color:var(--pill-ink);
  border-radius:999px; padding:clamp(9px,.9vw,11px) clamp(18px,2vw,26px); font-size:clamp(13px,1.1vw,14px); }
.pill:hover { background:var(--pill-hover); color:var(--pill-ink); }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; margin:-8px; }
.nav-toggle__bar { width:26px; height:2px; background:var(--ink); display:block; }
.nav--mobile { display:none; }

/* ── Title block + Subjects dropdown ─────────────────────────────────────── */
.titleblock { padding-top:clamp(28px,5vw,60px); }
.titleblock__row { display:flex; flex-wrap:wrap; align-items:center; gap:10px clamp(9px,1.08vw,14.5px); }
.titleblock__title { font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.6vw,48px);
  line-height:1; letter-spacing:-.01em; margin:0; }
.titleblock__title [lang="hu"] { color:var(--hu); }
.titleblock__sub { line-height:1.45; }
.titleblock__sub p { font-size:clamp(13px,1vw,14.5px); }
.titleblock__sub p[lang="hu"] { color:var(--hu); }

.subjects { position:relative; display:inline-block; margin-top:clamp(22px,3.2vw,40px);
  margin-left:auto; margin-right:auto; }
.titleblock .subjects { margin-left:0; }
.subjects__btn { display:inline-flex; align-items:center; gap:10px; font-size:clamp(14px,1.25vw,16px); }
.subjects__caret { font-size:11px; color:var(--hu); transform:translateY(1px); transition:transform .2s ease; }
.subjects__btn[aria-expanded="true"] .subjects__caret { transform:translateY(1px) rotate(180deg); }
.dropdown { position:absolute; left:0; top:calc(100% + 14px); min-width:220px; background:var(--dd-bg);
  border:1px solid var(--dd-border); box-shadow:var(--dd-shadow); padding:8px; z-index:30; list-style:none;
  margin:0; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; }
.subjects__btn[aria-expanded="true"] + .dropdown { opacity:1; visibility:visible; transform:none; }
.dropdown__item { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 12px; border-radius:3px; }
.dropdown__item:hover { background:var(--dd-hover); }
.dropdown__item [lang="en"] { font-size:15px; }
.dropdown__hu { font-size:13px; color:var(--hu); }

/* ── Works list & card ───────────────────────────────────────────────────── */
.works { padding-top:clamp(32px,5vw,60px); }
.work { display:flex; flex-direction:column; padding-bottom:clamp(40px,6vw,80px); }

.work__hero { margin:0; }
.frame { width:100%; overflow:hidden; background:var(--img-bg); }
.frame img { width:100%; height:100%; object-fit:cover; display:block; }
.frame--circle { border-radius:50%; }
.hero-twoup { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,340px),1fr));
  gap:clamp(16px,2vw,28px); }

.work__titlerow { display:flex; align-items:flex-start; gap:14px; margin-top:clamp(22px,2.6vw,34px);
  max-width:var(--measure); }
.play { flex-shrink:0; width:clamp(24px,2.4vw,30px); height:clamp(24px,2.4vw,30px); border-radius:50%;
  background:var(--ink); display:flex; align-items:center; justify-content:center; margin-top:clamp(4px,.6vw,7px); }
.play__tri { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:8px solid var(--bg); margin-left:2px; }
.work__title { font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.9vw,27px);
  line-height:1.25; letter-spacing:-.005em; margin:0; }
.work__title [lang="hu"] { color:var(--hu); }

.work__meta { margin-top:clamp(14px,1.8vw,20px); padding-left:var(--indent); max-width:var(--measure);
  font-size:clamp(13px,1.2vw,15px); line-height:1.5; }
.work__meta p { margin:0; }

.work__desc { margin-top:clamp(20px,2.6vw,30px); }
.work__desc .desc-col { padding-left:var(--indent); max-width:var(--measure); }
.work__desc p { font-size:clamp(13px,1.2vw,15px); line-height:1.7; white-space:pre-line; }
.work__desc p[lang="hu"] { color:var(--hu); margin-top:clamp(16px,2vw,22px); }
.work__desc--beside { display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px); align-items:start; }
.work__desc--beside .desc-col { flex:1 1 300px; }
.work__desc--beside .desc-fig { flex:1 1 300px; max-width:560px; margin:0; }

.work__grid { margin-top:clamp(28px,4vw,52px); display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr)); gap:clamp(16px,2vw,28px); align-items:start; }
.grid-fig { margin:0; }
.cap { margin-top:clamp(12px,1.5vw,16px); max-width:36rem; font-family:var(--serif);
  font-size:clamp(14px,1.4vw,17px); line-height:1.35; }
.cap [lang="hu"] { color:var(--hu); }

.work__similar { margin-top:clamp(34px,5vw,60px); padding-left:var(--indent); }
.similar-label { font-family:var(--sans); font-weight:500; font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--similar); margin:0 0 clamp(14px,1.8vw,18px); }
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip { display:inline-flex; align-items:center; padding:clamp(8px,1vw,11px) clamp(16px,1.8vw,22px);
  background:var(--chip-bg); color:var(--chip-ink); border-radius:4px; font-size:clamp(12px,1.1vw,13.5px);
  transition:background-color .2s ease, color .2s ease; }
.chip:hover { background:var(--chip-hover-bg); color:var(--ink); }

.work__divider { height:1px; background:var(--rule); margin-top:clamp(40px,6vw,80px); }
.empty { color:var(--muted); padding-block:2rem; }
.empty [lang="hu"] { color:var(--hu); }

/* ── Show more ───────────────────────────────────────────────────────────── */
.showmore { display:flex; justify-content:center; padding:clamp(44px,7vw,80px) 0 clamp(8px,1.5vw,16px); }
.showmore__btn { display:inline-flex; align-items:center; gap:12px;
  padding:clamp(13px,1.5vw,16px) clamp(30px,3.4vw,42px); background:transparent; color:var(--ink);
  border:1px solid var(--ink); border-radius:999px; font-family:var(--sans); font-size:clamp(12px,1.1vw,13.5px);
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .2s ease, color .2s ease; }
.showmore__btn:hover { background:var(--ink); color:var(--bg); }
.showmore__hu { color:var(--hu); }
.showmore__btn:hover .showmore__hu { color:var(--bg); }
.showmore__chevron { display:inline-block; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); }

/* ── About ───────────────────────────────────────────────────────────────── */
.about-hero { width:100%; height:clamp(420px,68vh,760px); overflow:hidden; background:#161514; }
.about-hero img { width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.about { max-width:980px; margin-inline:auto; padding:clamp(44px,6vw,80px) clamp(24px,5vw,44px) clamp(40px,5vw,80px); }
.about__title { font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,60px);
  line-height:1; letter-spacing:-.01em; margin:0 0 clamp(36px,5vw,64px); }
.about__title [lang="hu"] { color:#9A9C96; }
.about__bio { display:flex; flex-direction:column; gap:clamp(20px,2.4vw,28px);
  font-size:clamp(15px,1.45vw,19px); line-height:1.65; }
.about__bio--hu { margin-top:clamp(52px,7vw,96px); color:var(--hu); }
.about__exh { margin-top:clamp(34px,4.4vw,52px); display:flex; flex-direction:column; gap:clamp(26px,3.2vw,38px); }
.about__exh-group h2 { font-weight:400; font-size:clamp(16px,1.5vw,19px); margin:0 0 14px; }
.about__exh--hu .about__exh-group h2 { color:var(--hu); }
.bio-list { display:flex; flex-direction:column; gap:9px; font-size:clamp(15px,1.45vw,18px); line-height:1.5; }
.bio-list li { position:relative; padding-left:24px; }
.about__exh--hu .bio-list li { color:var(--hu); }
.bio-list li::before { content:"•"; position:absolute; left:5px; top:0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { margin-top:clamp(20px,4vw,40px); }
.footer__rule { height:1px; background:var(--rule); }
.footer__inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding-block:clamp(28px,4vw,44px); }
.copyright { font-size:clamp(11px,1.2vw,13px); letter-spacing:.08em; color:var(--muted);
  text-transform:uppercase; margin:0; }
.footer__ig { justify-self:center; display:inline-flex; color:var(--ink); }
.footer__ig:hover { color:var(--hu); }
.site-footer .pill { justify-self:end; }

/* ── D24 scroll-reveal (active only with JS → fails to visible) ──────────── */
html.js .reveal { opacity:0; transform:translateY(var(--reveal-dist));
  transition:opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
  will-change:opacity, transform; }
html.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
}

/* ── Image lightbox / viewer (D26) ───────────────────────────────────────── */
.work .frame img { cursor:pointer; }     /* inline painting → opens the viewer */

.lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:var(--bg); opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease; }
.lightbox.is-open { opacity:1; visibility:visible; }
/* Reserve a column on each side for the arrows so a wide (landscape) image never
   slides under them — the fit-to-screen image sits between the arrows, not below.
   The reserve tracks the arrows' own size+offset (≈48px + edge gap). */
.lightbox__img { max-width:calc(100vw - 2 * clamp(76px, 8vw, 104px)); max-height:90vh; display:block;
  cursor:zoom-in; touch-action:pinch-zoom; user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  transform:translate(0,0) scale(1); transition:transform .25s ease; will-change:transform; }
.lightbox.is-zoomed .lightbox__img { cursor:zoom-out; }
body.lb-open { overflow:hidden; }

/* Controls: the site's dark ink circles with a cream glyph (same language as the
   play-circle and the Contact pill) — clean and legible on the cream background. */
.lightbox__close, .lightbox__nav { position:fixed; z-index:1; display:inline-flex; align-items:center;
  justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--ink);
  color:var(--bg); line-height:1; transition:background-color .2s ease; }
.lightbox__close:hover, .lightbox__nav:hover { background:var(--pill-hover); }
.lightbox__close { top:clamp(14px,2vw,24px); right:clamp(14px,2vw,24px); font-size:26px; }
.lightbox__nav { top:50%; transform:translateY(-50%); font-size:30px; }
.lightbox__prev { left:clamp(10px,2vw,28px); }
.lightbox__next { right:clamp(10px,2vw,28px); }
.lightbox__nav[hidden], .lightbox__count[hidden] { display:none; }
.lightbox__count { position:fixed; bottom:clamp(14px,2.4vw,28px); left:50%; transform:translateX(-50%); margin:0;
  color:var(--muted); font-size:clamp(12px,1.2vw,14px); letter-spacing:.08em; background:var(--chip-bg);
  padding:6px 14px; border-radius:999px; }
@media (prefers-reduced-motion:reduce) { .lightbox, .lightbox__img { transition:none; } }

/* ── Responsive: < 760px ─────────────────────────────────────────────────── */
@media (max-width:759px) {
  .nav--desktop { display:none; }
  .nav-toggle { display:flex; }
  .nav--mobile { display:none; list-style:none; margin:0; position:absolute; right:var(--pad-x);
    top:calc(100% - 6px); min-width:230px; background:var(--dd-bg); border:1px solid var(--dd-border);
    box-shadow:var(--dd-shadow); padding:10px; z-index:30; }
  .nav--mobile.is-open { display:block; }
  .nav--mobile a { display:block; padding:11px 12px; font-size:16px; border-radius:3px; }
  .nav--mobile a:hover { background:var(--dd-hover); }
  .hero-twoup { grid-template-columns:1fr; }
  .work__desc--beside { flex-direction:column; }
  .footer__inner { display:flex; flex-direction:column; align-items:center; gap:22px; }
  .copyright { order:3; text-align:center; }
  .footer__ig { order:1; }
  .site-footer .pill { order:2; justify-self:center; }
  /* lightbox: on phones, give the image nearly the full width (arrows overlay the
     edges; swipe is the primary nav on touch) rather than the desktop side-reserve. */
  .lightbox__img { max-width:calc(100vw - 20px); max-height:84vh; }
}