/* =========================================================================
   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; }
/* Inter Light (300) — used only for the work metadata, so it reads distinct from
   the description (Lóri). Still Inter, so the "only two fonts" rule holds. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
  src:url("/assets/fonts/inter-300-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:300; font-display:swap;
  src:url("/assets/fonts/inter-300-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;

  /* No page width-cap (Lóri): the layout fills the viewport. Images are guarded
     against upscaling per-image in build.py (max-width = the file's own pixels). */
  --pad-x:clamp(20px, 5vw, 56px);
  --measure:38rem;
  /* The work title's font size, as a token so the play-icon can be derived from it.
     Item 4 fix: the icon used to have its own vw-curve (1.6vw) different from the
     title's (1.9vw) and the offset's (.6vw), so the three drifted apart at some
     widths → the icon slid up/down relative to the title. Now the icon size AND its
     top offset are pure fractions of --title-fs, so they scale together = zero drift. */
  --title-fs:clamp(20px, 1.9vw, 27px);
  --icon:calc(var(--title-fs) * 0.72);   /* title play-circle (cim-nyil.svg) ≈14–19px */
  --icon-gap:14px;                     /* icon → title-text gap; also the metadata indent */
  --indent:calc(var(--icon) + var(--icon-gap));  /* 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%;
  /* Image-save deterrence (matches Wix): block drag-to-save + text-selection of
     images. Right-click is blocked in site.js §5. Note: screenshots and DevTools
     can still capture any on-screen image — no website can prevent that. */
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
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; }

.wrap { 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;
  min-height:120px; padding-block:clamp(8px,1.5vw,14px); position:relative; }
.brand { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.avatar { position:relative; width:50px; height:50px;
  border-radius:50%; overflow:hidden; 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); }
/* :not(.pill) so the Contact button is left entirely to `.pill` — otherwise this
   rule's clamp font-size (up to 18px) overrode the pill's 15px and made the header
   Contact bigger than the footer one. Now header Contact === footer Contact (item 2). */
.nav--desktop > a:not(.pill) { font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.4vw,18px); }
.nav--desktop > a:not(.pill):hover { color:var(--hu); }
.nav-current { color:var(--nav-current); }
.nav-current:hover { color:var(--nav-current); }
/* Contact button: Lóri's fixed 86×28, Inter Regular 15px, WHITE-on-black; hover
   WHITE-on-#7A8283. (The :not(.pill) nav-hover rule above no longer steals the
   colour, which is why the hover text used to vanish — grey-on-grey.) */
.pill { display:inline-flex; align-items:center; justify-content:center; width:86px; height:28px;
  background:var(--pill-bg); color:#fff; border-radius:999px;
  font-family:var(--sans); font-weight:400; font-size:15px; }
.pill:hover { background:var(--hu); color:#fff; }
/* Lóri's hamburger (item 8): three LEFT-aligned bars of different lengths with
   rounded caps — top short, middle long, bottom medium. */
.nav-toggle { display:none; flex-direction:column; align-items:flex-start; gap:6px; padding:8px; margin:-8px; }
/* height 2px = a whole pixel, so all three bars render at the SAME thickness
   (item 10 — 2.5px was rounding to 2px on some bars, 3px on others) and match the
   lightbox line icons' stroke-width. */
.nav-toggle__bar { height:2px; border-radius:999px; background:var(--ink); display:block; }
.nav-toggle__bar:nth-child(1) { width:14px; }
.nav-toggle__bar:nth-child(2) { width:28px; }
.nav-toggle__bar:nth-child(3) { width:20px; }
.nav--mobile { display:none; }

/* ── Title block + Subjects dropdown ─────────────────────────────────────── */
/* Optically centre the Paintings/Subjects block between the "Tóth Lóránd" brand
   and the first image. Lóri: the block's top & bottom padding equal the page's
   left/right padding (--pad-x), so the margin is square at every width. The bottom
   gap now lives here (.works padding-top is zeroed) so top == bottom. */
/* Top gap = square page margin; bottom gap = 100px (Lóri item 1), fluid down on
   mobile. .works padding-top stays 0 so this is the only gap below the block. */
.titleblock { padding-top:var(--pad-x); padding-bottom:clamp(48px,8vw,100px); }
.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(28px,3.4vw,40px);
  line-height:1; letter-spacing:-.01em; margin:0; }
.titleblock__title [lang="hu"] { color:var(--hu); }
/* Title word-groups: "EN /" + "HU /". Inline on desktop (one line); each drops
   to its own line on mobile (item 4). nowrap keeps each group intact. */
.titleblock__title .tb-grp { white-space:nowrap; }
.titleblock__sub { line-height:1.2; }   /* tighter EN/HU pair (Lóri) */
.titleblock__sub p { font-size:clamp(14px,1.2vw,17px); }
.titleblock__sub p[lang="hu"] { color:var(--hu); }

.subjects { position:relative; display:inline-block; margin-top:clamp(22px,3.2vw,30px);
  margin-left:auto; margin-right:auto; }
.titleblock .subjects { margin-left:0; }
.subjects__btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-weight:400; font-size:clamp(15px,1.4vw,18px); }
.subjects__label [lang="hu"] { color:var(--hu); }   /* "/ Témák szerint" grey, EN black */
.subjects__caret { height:9px; width:auto; display:block; transition:transform .2s ease; }
.subjects__btn[aria-expanded="true"] .subjects__caret { transform:rotate(180deg); }
/* Dropdown (item 5): no border, 3px corners, page-background, grey text on hover */
.dropdown { position:absolute; left:0; top:calc(100% + 14px); min-width:220px; background:var(--bg);
  border-radius:3px; 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:center; gap:16px; padding:9px 12px; border-radius:3px;
  transition:color .15s ease; }
.dropdown__item:hover { color:var(--hu); }
.dropdown__item [lang="en"] { font-size:18px; }

/* ── Works list & card ───────────────────────────────────────────────────── */
.works { padding-top:0; }   /* below-gap now on .titleblock padding-bottom (square margin) */
.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); border-radius:3px; }
.frame img { width:100%; height:100%; object-fit:cover; display:block; }
.frame--circle { border-radius:50%; }
/* A transparent PNG (Vitrified detail, item 7) shows the page cream through it
   instead of the beige image-bg — "no background". object-fit:contain so the
   transparent artwork is never cropped. */
.frame--plain { background:var(--bg); }
.frame--plain img { object-fit:contain; }
.hero-twoup { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,340px),1fr));
  gap:clamp(16px,2vw,28px); }

/* 65px gap from the hero down to the title row (Lóri). */
.work__titlerow { display:flex; align-items:flex-start; gap:var(--icon-gap); margin-top:clamp(32px,5vw,65px);
  max-width:var(--measure); }
/* Title icon = Lóri's own play-circle (cim-nyil.svg), 12–20px, margin-top tuned so
   it centres on the title's first line. Metadata/desc/similar align to the title
   TEXT via --indent (= icon + gap), so nothing starts "further in" than the title. */
/* Offset = (first-line box − icon) / 2, all in --title-fs → the icon stays optically
   centred on the title's first line at every viewport width (item 4). */
.play-icon { flex-shrink:0; width:var(--icon); height:var(--icon);
  margin-top:calc((var(--title-fs) * 1.25 - var(--icon)) / 2); }
.work__title { font-family:var(--serif); font-weight:400; font-size:var(--title-fs);
  line-height:1.25; letter-spacing:-.005em; margin:0; }
.work__title [lang="hu"] { color:var(--hu); }

/* Per-work subtitle (item 8): directly under the title, caption style, aligned to
   the title text via --indent. EN black, HU grey. */
.work__subtitle { margin-top:clamp(10px,1.2vw,14px); padding-left:var(--indent); max-width:510px;
  font-family:var(--serif); font-size:clamp(14px,1.4vw,17px); line-height:1.35; }
.work__subtitle p { margin:0; }
.work__subtitle p[lang="hu"] { color:var(--hu); margin-top:.35em; }

.work__meta { margin-top:clamp(14px,1.8vw,20px); padding-left:var(--indent); max-width:var(--measure);
  font-weight:300; font-size:clamp(13px,1.2vw,15px); line-height:1.5; }   /* Inter Light (Lóri) */
.work__meta p { margin:0; }

.work__desc { margin-top:clamp(20px,2.6vw,30px); }
/* 510px reading column (item 6) — was 38rem/608px, which sat too close to a
   `beside` frame image; the narrower box opens the gap. */
.work__desc .desc-col { padding-left:var(--indent); max-width:510px; }
.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; }
/* Caption: a play-circle (item 4) + text, 30px below the image (item 5). The icon
   is sized in em so it tracks the caption text, and nudged down to sit on the
   first line. align-items:flex-start keeps it at the top when the text wraps. */
.cap { display:flex; align-items:flex-start; gap:.5em;
  margin-top:clamp(20px,2.4vw,30px); max-width:36rem; font-family:var(--serif);
  font-size:clamp(14px,1.4vw,17px); line-height:1.35; }
.cap-icon { flex-shrink:0; width:.85em; height:.85em; margin-top:.25em; }
.cap [lang="hu"] { color:var(--hu); }

.work__similar { margin-top:clamp(34px,5vw,60px); padding-left:var(--indent); }
/* label max 12px; label→chip gap (8px) deliberately smaller than chip→chip (12px);
   chip padding 7/14 → smaller pills (all Lóri). */
.similar-label { font-family:var(--sans); font-weight:500; font-size:clamp(11px,1.2vw,12px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--similar); margin:0 0 8px; }
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip { display:inline-flex; align-items:center; padding:7px 14px;
  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); }

/* ── Pager (numbered — replaces "Show more", D32) ────────────────────────────
   active = filled dark circle (light number); hover = outlined circle — matches
   Lóri's mockup (1 = active, 2 = hover). Real links to each /page/N/ file. */
.pager { display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:clamp(10px,1.4vw,20px); padding:clamp(44px,7vw,80px) 0 clamp(8px,1.5vw,16px); }
.pager__num { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
  padding:0 8px; border-radius:999px; font-family:var(--sans); font-size:clamp(14px,1.2vw,16px);
  color:var(--ink); border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
a.pager__num:hover { border-color:var(--ink); }
.pager__num.is-active { background:var(--ink); color:var(--bg); }

/* ── 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 (items 10, 11): 690px reading column, title max 40, body max 17,
   65px gap from the hero photo down to the title (padding-top). */
.about { max-width:690px; margin-inline:auto; padding:clamp(40px,6vw,65px) clamp(24px,5vw,44px) clamp(40px,5vw,80px); }
.about__title { font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,40px);
  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.4vw,17px); 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.4vw,17px); 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; }

/* ── Legal / privacy notice ──────────────────────────────────────────────── */
.legal { max-width:690px; margin-inline:auto;
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,44px) clamp(40px,5vw,80px); }
.legal__title { font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,36px);
  line-height:1.1; letter-spacing:-.01em; margin:0 0 clamp(28px,4vw,44px); }
.legal__title-hu { color:#9A9C96; }
.legal__block { display:flex; flex-direction:column; gap:clamp(16px,2vw,22px);
  font-size:clamp(15px,1.4vw,17px); line-height:1.65; }
.legal__block--hu { margin-top:clamp(40px,6vw,72px); color:var(--hu); }
/* Links inside running text need to read as links. The global rule strips
   underlines (right for nav, chips, pager), which would leave a link in body
   copy — e.g. "back to the paintings" on the 404 — indistinguishable from text.
   Scoped to prose blocks so nothing else is affected. */
.legal__block a { text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px; }
.legal__block a:hover { opacity:.65; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Footer (items 12–15): 130px tall, black rule, 33px from the rule to the row,
   copyright 14px black; items centred to each other on one line. */
.site-footer { margin-top:clamp(20px,4vw,40px); }
.footer__rule { height:1px; background:var(--ink); }
.footer__inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; align-content:start;
  gap:16px; min-height:130px; padding-top:33px; }
.copyright { font-size:clamp(12px,1.1vw,14px); letter-spacing:.08em; color:var(--ink);
  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; }
/* Copyright now doubles as the Privacy link (Lóri: hide the separate label until
   he formats that page); it still looks like plain copyright, subtle hover only. */
.footer__legal { display:flex; align-items:center; }
.copyright:hover { color:var(--hu); }

/* ── Back-to-top button (item 9) — mobile only, reuses Lóri's play-circle ────
   The cim-nyil.svg is a dark disc with a triangle; rotated -90° the triangle
   points UP → a "back to top" glyph in the site's own icon language. Hidden on
   desktop; on mobile it fades in once the visitor has scrolled down. */
.to-top { display:none; }
.to-top img { display:block; width:100%; height:100%; transform:rotate(-90deg); }
@media (max-width:759px) {
  .to-top { display:block; position:fixed; right:16px; bottom:16px; z-index:40;
    width:46px; height:46px; padding:0; border-radius:50%;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
  .to-top.is-visible { opacity:1; visibility:visible; }
}

/* ── 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 (item 9): thin ink line-icons on the cream backdrop, no filled disc —
   a plain X and single chevrons, hover to grey. The SVG stroke-width (2) matches
   every other line icon on the site (item 10). */
.lightbox__close, .lightbox__nav { position:fixed; z-index:1; display:inline-flex; align-items:center;
  justify-content:center; width:48px; height:48px; background:none; color:var(--ink);
  line-height:1; transition:color .2s ease; }
.lightbox__close:hover, .lightbox__nav:hover { color:var(--hu); }
.lightbox__close svg { width:26px; height:26px; display:block; }
.lightbox__nav svg { width:32px; height:32px; display:block; }
.lightbox__close { top:clamp(14px,2vw,24px); right:clamp(14px,2vw,24px); }
.lightbox__nav { top:50%; transform:translateY(-50%); }
.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; }
  /* Item 11: the main-menu dropdown now matches the Subjects dropdown — page
     background, no border, 3px corners, grey-text hover (no hover fill). */
  .nav--mobile { display:none; list-style:none; margin:0; position:absolute; right:var(--pad-x);
    top:calc(100% - 6px); min-width:230px; background:var(--bg);
    border-radius:3px; box-shadow:var(--dd-shadow); padding:8px; z-index:30; }
  .nav--mobile.is-open { display:block; }
  .nav--mobile a { display:block; padding:11px 12px; font-size:16px; border-radius:3px;
    transition:color .15s ease; }
  .nav--mobile a:hover { color:var(--hu); }
  /* Item 5: the Subjects dropdown items match the main-menu items on mobile
     (both 16px) — one font size across the two dropdowns, not 18 vs 16. */
  .dropdown__item [lang="en"] { font-size:16px; }
  .hero-twoup { grid-template-columns:1fr; }
  /* Item 4: mobile title on 3 lines — "Paintings /", "Festmények /", then the
     subtitle (its own 2 lines) below. Each word-group drops to its own line, and
     the row stacks so the subtitle is always beneath the title (never beside). */
  .titleblock__title .tb-grp { display:block; }
  .titleblock__row { flex-direction:column; align-items:flex-start; gap:clamp(10px,3vw,16px); }
  /* Item 6: drop the EN/HU subtitle in the mobile header (Home "Chronological
     list…", Pentimenti "Regretted and repainted…") to de-clutter — desktop only.
     Also hide the trailing "/" that led into it, so the HU heading doesn't dangle. */
  .titleblock__sub, .tb-trail { display:none; }
  .work__desc--beside { flex-direction:column; }

  /* Item 7: paintings run edge-to-edge on mobile (the side margin is a luxury on a
     small screen). The works column keeps its padding for TEXT; each image block is
     pulled out to the viewport edges with a negative margin, and its caption is
     re-padded so caption text still lines up with the body text. */
  .work__hero, .work__grid, .work__desc--beside .desc-fig, .work__divider {
    margin-inline:calc(-1 * var(--pad-x)); }
  .work__desc--beside .desc-fig { max-width:none; }
  .work__grid .cap, .desc-fig .cap { padding-inline:var(--pad-x); }
  .work__hero .frame:not(.frame--circle), .work__grid .frame, .desc-fig .frame { border-radius:0; }

  /* Item 10: footer stacks as Copyright → Instagram, and the Contact button is
     hidden in this view. */
  .footer__inner { display:flex; flex-direction:column; align-items:center; gap:18px; }
  .footer__legal { order:1; align-items:center; text-align:center; gap:10px; }
  .footer__ig { order:2; }
  .site-footer .pill { display:none; }
  .lightbox__img { max-height:84vh; }
}

/* lightbox on narrow PORTRAIT phones: the side arrows overlapped the (near
   full-width) image, so move them below it — a [‹] [2 / 3] [›] row at the
   bottom — and give the image the full width. In landscape there's room at the
   sides, so the default side arrows are kept (they don't overlap there). */
@media (max-width:759px) and (orientation:portrait) {
  .lightbox__img { max-width:calc(100vw - 20px); max-height:78vh; }
  .lightbox__nav { top:auto; bottom:clamp(56px,9vw,80px); transform:none;
    width:44px; height:44px; font-size:26px; }
  .lightbox__prev { left:auto; right:calc(50% + 46px); }
  .lightbox__next { right:auto; left:calc(50% + 46px); }
  .lightbox__count { bottom:clamp(64px,10vw,90px); }
}