/* ─────────────────────────────────────────────────────────
   Beata Karacsony — paintings
   The layout of each plate repeats the composition of the
   painting it presents. The white of the page does the work,
   as the raw canvas border does on the canvas.
   ───────────────────────────────────────────────────────── */

@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/cormorant-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/cormorant-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:'Cormorant Garamond'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('fonts/cormorant-italic-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('fonts/cormorant-italic-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:100 900; font-display:swap;
  src:url('fonts/inter-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+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:100 900; font-display:swap;
  src:url('fonts/inter-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;
}

:root{
  --ink:      #0a0a0a;   /* paint black */
  --paper:    #ffffff;
  --gesso:    #f4f4f2;   /* raw canvas */
  --rule:     #dedddb;   /* hairline */
  --mute:     #8a8a86;   /* captions */

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --serif:'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);   /* page margin */
  --gut: clamp(1rem, 3vw, 3.25rem);     /* grid gutter */
  --bar: 3.75rem;                        /* header height */

  --track: .26em;   /* letterspacing, controlled layer */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
[id]{ scroll-margin-top:calc(var(--bar) + 1.5rem); }   /* clear the fixed bar */
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

.skip{
  position:fixed; top:-100px; left:var(--pad); z-index:200;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font-size:.7rem; letter-spacing:var(--track); text-transform:uppercase;
}
.skip:focus{ top:.75rem; }

/* ── Type helpers ───────────────────────────────────────── */

.label,.eyebrow,.num,.stat,figcaption,dt,.bar__nav,.bar__name,.lang{
  font-size:.62rem;
  letter-spacing:var(--track);
  text-transform:uppercase;
  font-weight:400;
}
.dim{ color:var(--mute); }

/* ── Header ─────────────────────────────────────────────── */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--bar);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.bar.is-stuck{ border-bottom-color:var(--rule); }
.bar__name{ font-weight:400; }
.bar__right{ display:flex; align-items:baseline; gap:clamp(1rem,3.5vw,3rem); }
.bar__nav{ display:flex; gap:clamp(.9rem,2.6vw,2.2rem); }
.bar__nav a[aria-current]{ color:var(--ink); }
.bar__nav a[aria-current]::after{ transform:scaleX(1); }
.lang{ display:flex; gap:.55rem; color:var(--mute); }
.lang a{ color:var(--mute); transition:color .3s var(--ease); }
.lang a:hover,.lang a:focus-visible{ color:var(--ink); }
.lang a[aria-current]{ color:var(--ink); }
.lang span{ opacity:.4; }
.bar__nav a{ position:relative; padding-bottom:2px; }
.bar__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.bar__nav a:hover::after,.bar__nav a:focus-visible::after{ transform:scaleX(1); }

/* ── Hero ───────────────────────────────────────────────── */

.hero{
  padding:calc(var(--bar) + clamp(5rem,18vh,11rem)) var(--pad) clamp(4rem,12vh,8rem);
  border-bottom:1px solid var(--rule);
}
.eyebrow{ margin:0 0 clamp(2rem,7vh,4rem); color:var(--mute); }

/* bandeau : les œuvres à gauche, la phrase à leur droite */
.hero__band{
  display:flex; align-items:flex-start;
  gap:clamp(1.75rem,5vw,5rem);
}
.thumbs{
  display:flex; align-items:flex-end;      /* posées sur une même ligne */
  gap:clamp(.45rem,1vw,.8rem);
  flex:0 0 auto; list-style:none; margin:0; padding:0;
}
.thumbs a{ display:block; opacity:1; transition:opacity .45s var(--ease); }
.thumbs:hover a{ opacity:.32; }
.thumbs a:hover,.thumbs a:focus-visible{ opacity:1; }
.thumbs img{ height:clamp(54px,5.6vw,84px); width:auto; }
.hero__say{ flex:1 1 auto; min-width:0; }

.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.5rem,5.9vw,6rem);
  line-height:1.1;
  letter-spacing:-.012em;
  margin:0;
}
.hero__title span{ display:block; }
.hero__title-b{
  font-style:italic;
  padding-left:clamp(.9rem,6vw,5.5rem);   /* la phrase est elle-même en déséquilibre */
}

.hero__note{
  margin-top:clamp(1.75rem,4.5vh,3rem);
  max-width:40ch;
}
.hero__note p{ margin:0 0 .35rem; }

/* ── Checklist ──────────────────────────────────────────── */

.checklist{ padding:clamp(3rem,9vh,6rem) var(--pad) clamp(4rem,11vh,7rem); }
.label{ margin:0 0 2rem; color:var(--mute); font-family:var(--sans); }

.checklist__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.checklist__list li{ border-bottom:1px solid var(--rule); }
.checklist__list a{
  display:grid;
  grid-template-columns:3.5rem 1fr 8rem 11rem;
  gap:var(--gut);
  align-items:baseline;
  padding:1.05rem 0;
  transition:padding-left .5s var(--ease), color .3s var(--ease);
}
.checklist .dim{ text-align:right; }
.checklist__list a:hover,.checklist__list a:focus-visible{ padding-left:1rem; }
.checklist .num{ color:var(--mute); }
.checklist .ttl{
  font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.4rem);
  font-weight:300; line-height:1.06;
}
.checklist .stat{ min-width:9rem; text-align:right; color:var(--mute); }

/* ── Works ──────────────────────────────────────────────── */

.work{ padding:clamp(4rem,14vh,10rem) var(--pad); }
.work + .work{ border-top:1px solid var(--rule); }

.plate{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut);
  align-items:start;
}
/* a canvas never grows past the eye: portrait works cap on viewport height */
.fig{ margin:0; max-width:min(100%, calc(78vh * .78)); justify-self:start; }
.fig__btn{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; -webkit-tap-highlight-color:transparent;
}
.fig__btn img{ width:100%; transition:opacity .5s var(--ease); }
.fig__btn:hover img{ opacity:.86; }
.fig figcaption{
  color:var(--mute);
  padding-top:.7rem; margin-top:.7rem;
  border-top:1px solid var(--rule);
}

/* 01 Paradox — the diagonal: mass upper left, mass lower right */
.work--diagonal .fig--a{ grid-column:1 / span 6; }
.work--diagonal .fig--b{ grid-column:7 / span 6; justify-self:end;
  margin-top:clamp(4rem,18vw,16rem); max-width:min(100%, calc(52vh * .78)); }

/* 02 Equilibrium — a small mass upper left against a large one */
.work--weighted .fig--b{ grid-column:1 / span 3; max-width:min(100%, calc(34vh * .78)); }
.work--weighted .fig--a{ grid-column:5 / span 8; justify-self:end;
  margin-top:clamp(2rem,8vw,7rem); }

/* 03 Void — an aperture at the centre */
.work--aperture .fig--a{ grid-column:1 / -1; justify-self:center; }
.work--aperture .fig--b{ grid-column:1 / -1; justify-self:center;
  margin-top:clamp(2rem,6vw,5rem); max-width:min(60%, calc(26vh * .78)); }

/* 04 Split — two equal fields meeting at one gutter, feet on one line */
.work--split .plate{ align-items:end; }
.work--split .fig--a{ grid-column:1 / span 6; justify-self:end; }
.work--split .fig--b{ grid-column:7 / span 6; justify-self:start; }
.work--split .fig{ max-width:min(100%, calc(62vh * .78)); }

/* 05 Fragments — staggered interruptions */
.work--staggered .fig--a{ grid-column:1 / span 7; margin-top:clamp(2rem,7vw,6rem); }
.work--staggered .fig--b{ grid-column:8 / span 5; justify-self:end;
  max-width:min(100%, calc(50vh * .78)); }

/* meta block */
.meta{
  display:grid;
  grid-template-columns:3.5rem 1fr 1fr;
  gap:var(--gut);
  margin-top:clamp(3rem,8vw,6rem);
  padding-top:1.25rem;
  border-top:1px solid var(--ink);
  align-items:start;
}
.meta__num{ margin:0; color:var(--mute); }
.meta__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; margin:0;
}
.meta__note{
  grid-column:2; margin:1.25rem 0 0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.45;
  max-width:34ch; color:var(--ink);
}
.meta__spec{ grid-column:3; grid-row:1 / span 2; margin:0; align-self:start; }
.meta__spec > div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:var(--gut);
  padding:.55rem 0; border-bottom:1px solid var(--rule);
}
.meta__spec > div:first-child{ border-top:1px solid var(--rule); }
.meta__spec dt{ color:var(--mute); margin:0; }
.meta__spec dd{ margin:0; }
.is-sold{ color:var(--mute); }

/* ── About ──────────────────────────────────────────────── */

.about{
  padding:clamp(5rem,15vh,10rem) var(--pad);
  border-top:1px solid var(--rule);
  background:var(--gesso);
}
/* version pleine page */
.about--page{
  border-top:0; background:var(--paper);
  padding-top:calc(var(--bar) + clamp(4rem,14vh,8rem));
}
.about__lead-block{
  max-width:20ch;
  margin:0 0 clamp(3.5rem,10vh,7rem);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,6.2vw,4.6rem); line-height:1.18; letter-spacing:-.008em;
}
.about--page .about__grid{ border-top:1px solid var(--rule); padding-top:clamp(2rem,5vw,3.5rem); }
.about--page .about__text .lead{ display:none; }
.backlink{
  display:inline-block; margin-top:2.5rem; padding-bottom:3px;
  border-bottom:1px solid var(--rule);
  font-size:.62rem; letter-spacing:var(--track); text-transform:uppercase;
  transition:border-color .4s var(--ease);
}
.backlink:hover,.backlink:focus-visible{ border-bottom-color:var(--ink); }
.about__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut);
  align-items:start;
}
.about__img{ grid-column:1 / span 5; margin:0; }
.about__text{ grid-column:7 / span 6; }
.about__text p{ margin:0 0 1.4rem; max-width:46ch; }
.about__text .lead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.25;
  margin-bottom:2rem; max-width:22ch;
}

/* ── Enquiries ──────────────────────────────────────────── */

.enquiries{ padding:clamp(5rem,14vh,9rem) var(--pad); }
.enquiries__grid{
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gut);
}
.enquiries__lead{
  grid-column:1 / span 5; margin:0;
  font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.3; max-width:24ch;
}
.enquiries__lines{ grid-column:7 / span 6; }
.mail{
  display:block; padding:.9rem 0; border-bottom:1px solid var(--rule);
  font-size:.62rem; letter-spacing:var(--track); text-transform:uppercase;
  transition:padding-left .5s var(--ease);
}
.enquiries__lines .mail:first-child{ border-top:1px solid var(--rule); }
.mail:hover,.mail:focus-visible{ padding-left:1rem; }
.fineprint{ color:var(--mute); margin:1.75rem 0 0; max-width:38ch; font-size:.8rem; line-height:1.7; }

/* ── Footer ─────────────────────────────────────────────── */

.foot{
  display:flex; justify-content:space-between; gap:var(--gut); flex-wrap:wrap;
  padding:1.75rem var(--pad);
  border-top:1px solid var(--rule);
  color:var(--mute);
  font-size:.62rem; letter-spacing:var(--track); text-transform:uppercase;
}
.foot p{ margin:0; }

/* ── Viewer ─────────────────────────────────────────────── */

.viewer{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--bar) + 1rem) var(--pad) 4.5rem;
  opacity:0; transition:opacity .4s var(--ease);
}
.viewer.is-open{ opacity:1; }
.viewer[hidden]{ display:none; }
.viewer__stage{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.viewer__stage img{ max-height:76vh; width:auto; object-fit:contain; }
.viewer__stage figcaption{
  display:flex; gap:1.25rem; align-items:baseline;
  font-size:.62rem; letter-spacing:var(--track); text-transform:uppercase;
}
.viewer__stage .sub{ color:var(--mute); }

.viewer__close{
  position:absolute; top:0; right:0; height:var(--bar);
  padding:0 var(--pad); border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.62rem; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ink);
}
.viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer; color:var(--ink);
  padding:1rem; line-height:0; opacity:.5; transition:opacity .3s var(--ease);
}
.viewer__nav svg{ width:22px; height:22px; display:block; }
.viewer__nav:hover,.viewer__nav:focus-visible{ opacity:1; }
.viewer__nav--prev{ left:max(.25rem, calc(var(--pad) - 2.5rem)); }
.viewer__nav--next{ right:max(.25rem, calc(var(--pad) - 2.5rem)); }
body.is-locked{ overflow:hidden; }

/* ── Reveal ─────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Narrow ─────────────────────────────────────────────── */

@media (max-width:900px){
  .meta{ grid-template-columns:2.5rem 1fr; }
  .meta__note{ grid-column:2; }
  .meta__spec{ grid-column:1 / -1; grid-row:auto; margin-top:2rem; }
  .about__img{ grid-column:1 / span 6; }
  .about__text{ grid-column:8 / span 5; }
  .enquiries__lead{ grid-column:1 / span 6; }
  .enquiries__lines{ grid-column:8 / span 5; }
}

@media (max-width:720px){
  body{ font-size:14px; }

  .bar{ height:3.25rem; }
  .bar__name,.bar__nav,.lang{ font-size:.53rem; letter-spacing:.1em; }
  .bar__nav{ gap:.85rem; }
  .bar__right{ gap:1.1rem; }
  .lang{ gap:.4rem; }
  .hero__band{ flex-direction:column; gap:1.9rem; }
  .checklist__list a{ grid-template-columns:2.25rem 1fr; row-gap:.25rem; }
  .checklist .dim{ grid-column:2; text-align:left; }
  .checklist .stat{ grid-column:2; text-align:left; min-width:0; }

  .plate{ grid-template-columns:1fr; row-gap:clamp(2rem,7vw,3.5rem); }
  .plate .fig{ grid-column:1 / -1 !important; margin-top:0 !important; }

  /* the compositions survive at one column, as offsets */
  .work--diagonal .fig--b{ width:72%; margin-left:auto !important; }
  .work--weighted .fig--b{ width:46%; }
  .work--aperture .fig--b{ width:52%; margin:0 auto !important; }
  .work--staggered .fig--b{ width:64%; margin-left:auto !important; }

  .about__grid{ grid-template-columns:1fr; row-gap:2.5rem; }
  .about__img{ grid-column:1 / -1; width:70%; }
  .about__text{ grid-column:1 / -1; }
  .enquiries__grid{ grid-template-columns:1fr; row-gap:2.5rem; }
  .enquiries__lead,.enquiries__lines{ grid-column:1 / -1; }

  .viewer__stage img{ max-height:64vh; }
}