@font-face {
  font-family: "NimbusRegIta";
  src: url("fonts/NimbusRomNo9L-RegIta.woff2") format("woff2");
  font-display: swap;
}


/* ===== Vars ===== */
:root{
  --page-bg:#ffffff;
  --intro-bg:#bfbfbf;         /* grey intro background */
  --text:#000;
  --muted:#555;

  --page-max:1280px;          /* overall page width */
  --gutter:24px;              /* side padding */
  --edge: clamp(24px, 6vw, 96px);
  --col-left: 260px;
  --col-right: 260px;
  --gap:24px;                 /* grid gap */

  --carousel-max: none;       /* max width of carousel content */

  --font-ui: Arial, Helvetica, sans-serif;
}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--page-bg);
  color:var(--text);
  font: 16px/1.45 var(--font-ui);
  font-family: "NimbusRegIta";
}

/* ===== Intro overlay (click-to-enter) ===== */
body.intro-open{overflow:hidden}
#intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--intro-bg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:opacity .6s ease;
}
#intro.hide{opacity:0; pointer-events:none}
.intro-word{
  margin:0; color:#fff;
  font-weight:800; text-transform:lowercase; white-space:nowrap; line-height:.9;
  font-size:clamp(48px,60vmin,2000px);
}

/* ===== Grid container ===== */
.container-grid{
  width: 100%;
  max-width: none;                  /* was var(--page-max) */
  margin: 0;
  padding-left: var(--edge);
  padding-right: var(--edge);
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  column-gap: 24px;                 /* keep your gap */
}

:root{
  --edge: clamp(24px, 5vw, 72px);  /* distance from viewport edges */
}

.top-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px var(--edge) 0;
  gap: 24px;
}

/* Left block */
.top-left .logo{ font-weight: 700; margin-bottom: 6px; font-size: clamp(14px, 1.5vw, 18px); font-family: "NimbusRegIta"; }
.top-left .addr{ font-style: normal; line-height: 1.3; font-size: clamp(14px, 1.5vw, 18px); font-family: "NimbusRegIta"; }

/* Right block */
.top-right{
  text-align: right;
  white-space: normal;
  line-height: 1.3;
  font-size: clamp(14px, 1.5vw, 18px);
  font-family: "NimbusRegIta";
}
.top-right p{ margin: 0 0 4px; }
.top-right a{ color: inherit; text-decoration: none; }
.top-right a:hover{ text-decoration: underline; }

/* Exhibition row with text on left + carousel on right */
.exhibition-row {
  display: grid;
  grid-template-columns: var(--col-left) 1fr;
  column-gap: var(--gap);
  align-items: start;
  margin-top: 110px;   /* <-- adjust this value */
  padding-inline: var(--edge);
}


.left-text {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.5;
}

.exh-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(14px, 2.5vw, 20px);  /* 20–32px scaling */
}

.exh-meta { 
  margin: 0 0 10px;
  font-size: clamp(14px, 1.5vw, 18px);  /* 14–20px scaling */
  font-family: "NimbusRegIta";
}
.exh-label { 
  margin: 20px 0 20px; 
  font-family: "NimbusRegIta"; 
  font-size: clamp(14px, 1.5vw, 18px);  /* 14–20px scaling */
}
.exh-list {
  list-style: none;   /* 🔑 removes dots */
  margin: 0;
  padding: 0;
  font-family: "NimbusRegIta";
  font-size: clamp(14px, 1.5vw, 18px);  /* 14–18px scaling */
}

.exh-list li {
  margin: 0 0 4px;    /* small spacing between names */
}


/* Carousel on the right */
.carousel-wrap {
  grid-column: 2;              /* right-hand side of exhibition row */
  width: 100%;
  max-width: 100px;            /* 🔑 reduce size (adjust to taste) */
  margin-left: auto;           /* push to right edge */
  align-self: start;           /* align top with exhibition text */
}


.image-frame {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-frame img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #000;
  font-size: 32px;
  cursor: pointer;
  padding: 4px 8px;
}
.arrow.left { left: 6px; }
.arrow.right { right: 6px; }

.caption {
  margin-top: 8px;
  font-size: clamp(14px, 1.2vw, 18px); /* 12–16px scaling */
  color: var(--muted);
}


.image-frame{
  position:relative;
  width:100%;
  display:flex; align-items:center; justify-content:center;
}
.image-frame img{
  max-width:100%; height:auto;
  border:none; border-radius:0; box-shadow:none; object-fit:contain;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #000;
  font-size: 32px;
  cursor: pointer;
  padding: 4px 8px;

  z-index: 5;   /* 🔑 ensures arrows are on top of slides */
}

.arrow.left{left:6px}
.arrow.right{right:6px}
.caption{margin-top:8px; font-size: clamp(10px, 1.2vw, 16px); color:var(--muted)}

.large-image{
  width: 100%;
  max-width: none;
  margin: 40px 0;
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.large-image img{
  width: 100%;
  height: auto;
  display: block;
}


/* ===== Mobile ===== */
@media (max-width:900px){
  .container-grid{grid-template-columns:1fr}
  .tl,.tr,.left-text,.carousel-wrap{grid-column:1}
  .tr{text-align:left; justify-self:start; margin-top:8px}
  .carousel-wrap{margin-left:0; max-width:100%}
}

/* --- Smaller, right-aligned carousel in the exhibition row --- */
.exhibition-row {
  display: flex;                  /* use flexbox instead of grid */
  justify-content: space-between; /* left text stays left, carousel hugs right */
  align-items: flex-start;         /* top aligned */
  padding-inline: var(--edge);
  gap: var(--gap);
}

.exhibition-row .left-text {
  flex: 0 0 var(--col-left);      /* fixed width for left column */
}

.exhibition-row .carousel-wrap {
  flex: 0 0 auto;                 /* natural size */
  max-width: 900px;               /* 🔑 set size here */
  margin-left: auto;              /* ensure right alignment */
}


.exhibition-row .image-frame {
  width: 100%;
  max-width: 900px;      /* keep frame same as wrap */
}

.exhibition-row .image-frame img {
  width: 100%;           /* scale image inside the smaller frame */
  height: auto;
  object-fit: contain;
}

/* Sliding carousel */
.image-frame { overflow: hidden; }

.image-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0%);
  transition: transform 500ms ease;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .image-track { transition: none; }
}

/* bottom graphic aligned to the same edges as the layout */
.bottom-graphic{
  width: 100%;
  padding-left: var(--edge);
  padding-right: var(--edge);
  margin: 40px 0 60px; /* adjust vertical spacing as you like */
}

.bottom-graphic .graphic{
  display: block;
  width: 100%;     /* scales to fit between the edges */
  height: auto;    /* keeps aspect ratio */
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.bottom-note {
  text-align: center;
  font-size: clamp(16px, 2vw, 24px);  /* min 16px, grows with screen, max 24px */
  line-height: 1.5;
  font-family: "NimbusRegIta", serif;
  margin-top: 30px;
  padding-bottom: 8vh;                /* scales with viewport height */
}

.bottom-note a {
  color: inherit;
  text-decoration: none;
}

.bottom-note a:hover {
  text-decoration: underline;
}

/* ========= Responsive Carousel Overrides ========= */

/* 1) Responsive variables (tweak here) */
:root{
  /* Carousel width scales with viewport:
     - never smaller than 520px
     - ~46% of viewport on laptops
     - capped at 1100px on big screens
  */
  --carousel-max: clamp(520px, 50vw, 1100px);

  /* Arrow size & insets scale with viewport */
  --arrow-size:  clamp(18px, 3.2vw, 24px);
  --arrow-pad:   clamp(6px, 1vw, 12px);
  --arrow-inset: clamp(4px, 0.5vw, 10px);
}

/* 2) Keep the row layout you chose (flex) and lock carousel to the right */
.exhibition-row{
  display: flex;
  justify-content: space-between; /* left text on left, carousel on right */
  align-items: flex-start;        /* align tops */
  padding-inline: var(--edge);
  gap: var(--gap);
}

/* Fixed left column width you already use */
.exhibition-row .left-text{
  flex: 0 0 var(--col-left);
}

/* Right side: responsive carousel width + right alignment */
.exhibition-row .carousel-wrap{
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--carousel-max);  /* 🔑 responsive width */
  margin-left: auto;               /* hug right edge */
  align-self: flex-start;          /* top-align */
}

/* Frame tracks the same responsive width */
.exhibition-row .image-frame{
  width: 100%;
  max-width: var(--carousel-max);  /* 🔑 same as wrap */
  position: relative;
  overflow: hidden;
}

/* Image scales with container; keeps aspect ratio */
.exhibition-row .image-frame img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Arrows scale & stay on top */
.arrow{
  z-index: 5;
  font-size: var(--arrow-size);    /* 🔑 responsive size */
  padding: var(--arrow-pad);
  line-height: 1;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 34px;                 /* ensure decent tap target */
  min-height: 34px;
}

/* Keep arrows inside the frame but inset a bit */
.arrow.left  { left:  var(--arrow-inset); }
.arrow.right { right: var(--arrow-inset); }

/* Caption follows the carousel width and scales */
.caption{
  max-width: var(--carousel-max);
  font-size: clamp(12px, 1.2vw, 16px);
  margin-top: 8px;
  color: var(--muted);
  text-align: left;
}

/* 3) Mobile stacking: carousel goes full width below text */
@media (max-width: 900px){
  .exhibition-row{
    flex-direction: column;
    gap: 20px;
  }
  .exhibition-row .left-text{
    flex: none;
  }
  .exhibition-row .carousel-wrap,
  .exhibition-row .image-frame,
  .caption{
    max-width: 100%;
    margin-left: 0;
  }
}