/* ============================================================
   Unique East Art — strict replica of www.unique-east-art.com
   Built on Bootstrap 5 (grid/utilities/offcanvas/dropdown)
   ============================================================ */
:root {
  --serif: 'averia-serif-libre', 'Averia Serif Libre', Georgia, serif;
  --sans: 'sora', 'Sora', Arial, sans-serif;
  --red: #8d0f0f;
  --pad-x: 23px;
}

/* Anchor offset clears the compact bar: full height + 8px breathing room */
html { scroll-behavior: smooth; scroll-padding-top: calc(11.596vw + 48px); }
body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  background: #fff;
  overflow-x: clip;
}
img { max-width: 100%; }

.big-title {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}
.intro-text { font-size: 18px; line-height: 28.8px; margin: 0; }
.text-link {
  font-size: 18px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.text-link:hover { text-decoration: underline; color: #000; }
.text-link.text-white:hover { color: #fff; }

/* ============ HEADER (sticky; hides on scroll down, returns on scroll up) ===
   The logo is sized in vw so the bar keeps the original 207/159/70px heights
   at 1440/1024/390 (logo height + 20px top/bottom). `global.js` slides the
   whole bar out of view when scrolling down and back in when scrolling up. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  transform: translateY(0);
  transition: transform .35s ease;
  will-change: transform;
}
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.header-inner {
  height: calc(11.596vw + 40px);          /* logo height + 20px top/bottom */
  padding: 20px 23px 20px 1px;
}
.site-logo { flex: 0 0 auto; }
.site-logo img {
  width: 49.792vw;                        /* 717px at 1440 */
  height: auto;
  display: block;
}
/* Right cluster: nav links + language toggle + burger share one row so the
   flag stays visible on mobile (as on the original) */
.header-right { gap: 2.083vw; padding-top: 10px; }
.main-nav { gap: 2.083vw; }
/* 与原站一致：导航在 logo 与右侧图标之间均匀分布（仅桌面端） */
@media (min-width: 992px) {
  .header-right { flex: 1 1 auto; }
  .main-nav { flex: 1 1 auto; justify-content: space-between; padding: 0 2.083vw; }
}
.nav-link-item {
  font-size: max(11px, 1.111vw);          /* 16px at 1440, 11.4px at 1024 */
  font-weight: 400;
  letter-spacing: 0;
  color: #000;
  text-decoration: none;
  padding: 4px 0;
}
.nav-link-item:hover { text-decoration: underline; color: #000; }
/* current page (shared by every page — do not redefine in page CSS) */
.nav-link-item.is-active,
.mobile-link.is-active { text-decoration: underline; }
.nav-link-item.is-active { text-underline-offset: 4px; }
/* ---------- language switcher (boxed, as original) ---------- */
.lang-dropdown { margin-left: 14px; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  background: #fff;
  line-height: 1;
}
.lang-toggle::after { display: none; }
.lang-toggle:hover { border-color: #b5b5b5; }
.lang-toggle img {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.lang-chevron {
  width: 11px;
  height: 11px;
  display: block;
  color: #0d7bd6;
  transition: transform .2s;
}
.lang-dropdown.show .lang-chevron { transform: rotate(180deg); }
.lang-dropdown .dropdown-menu {
  margin-top: 6px;
  min-width: 0;
  width: 50px;
  padding: 2px 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.lang-dropdown .dropdown-menu li + li { border-top: 1px solid rgba(0, 0, 0, .1); }
.lang-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-size: 0;
  line-height: 0;
}
.lang-dropdown .dropdown-item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
}
.lang-dropdown .dropdown-item:hover { background: #f5f5f5; }
.nav-burger { padding: 8px; }
.nav-burger span { display: block; width: 26px; height: 2px; background: #000; margin: 6px 0; }

.offcanvas-top { height: 100vh; }
.mobile-link {
  font-family: var(--serif);
  font-size: 28px;
  color: #000;
  text-decoration: none;
  padding: 10px 0;
}

/* ============ MARQUEE shared ============ */
.strip-track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: strip-scroll linear infinite;
}
.strip-track img { height: 100%; width: auto; display: block; flex: 0 0 auto; }
/* <picture> wraps the hero / design images for mobile <source> switching;
   it must not produce its own box so the flex sizing still targets the img. */
.hero-strip picture,
.design-slides picture { display: contents; }
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ HERO (786px strip) ============ */
.hero-strip { height: 786px; overflow: hidden; }
.hero-strip .strip-track { animation-duration: 60s; }

/* ============ CAPTION BAND ============ */
.caption-band { padding: 3px 22px 26px; }
.uea-wordmark {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 31.2px;
  margin: 0 0 20px;
}
.caption-row { gap: 20px; }
.caption-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 46.8px;
  margin: 0;
}
.caption-text { font-size: 18px; line-height: 25.2px; margin: 0; }

/* ============ ARTISTS ============ */
.artists { padding: 0 23px 40px; }
.artists .section-head { margin-bottom: 46px; }
.artists-intro { max-width: 908px; margin-top: 5px; }
/* Three equal columns — the original renders every portrait at exactly
   258x336 (viewport 1022), so images must never size to their caption.
   Gap is clamped so it does not balloon on ultra-wide screens. */
.artist-row { padding: 0 12px; gap: min(8vw, 110px); }
.artist-item { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; }
.artist-item a { display: block; line-height: 0; }
.artist-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 369 / 481;
  object-fit: cover;
  display: block;
}
.artist-item figcaption { font-family: Arial, Helvetica, sans-serif; font-size: 1.3em; padding: 14px 0 0; }
/* Mouse-driven 3D tilt: the ARTISTS album tilts as one block, each GALLERY
   icon tilts on its own axis (perspective + rotateX/rotateY, 500ms ease-out) */
.artist-row, .collage {
  --rot: 0deg;
  transform-origin: 50% 50%;
  transition: transform .5s ease-out;
  will-change: transform;
}

/* ============ GALLERY (black collage, full-bleed) ============
   Replicates the original Wix scaling: band height, icon sizes and positions
   all scale linearly with the container width (viewport minus scrollbar) and
   freeze at the 1920 max viewport. Live-measured @1760: band 1745x682, quote
   705px wide, 28.74px font, dead-centered; title 64px fixed. */
.gallery-sec {
  position: relative;
  z-index: 1;
  height: min(39.03vw, 743px);
  min-height: 320px;
  background: #000;
  overflow: visible;
  padding: 23px var(--pad-x) 0;
}
.gallery-quote {
  font-family: var(--serif);
  font-size: min(2.81vw, 28.74px); /* fixed 28.74px on the original desktop */
  line-height: 1.4;
  color: #fff;
  text-align: center;
  width: 40.4%;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* original centers it both axes */
  z-index: 2;
}
/* Movable layer holding the collage — positioned relative to .gallery-sec. */
.collage-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Icon width = % of the band (our band matches the original container width),
   capped at each icon's 1920-viewport size. Positions converted from the
   original margin coefficients; right/bottom edges anchored like the original. */
.collage { position: absolute; z-index: 1; transform: rotate(var(--rot)); }
.c-dress  { left: 3.95%;  top: 38.34%;    width: min(8.03%, 153px);  --rot: 4deg; z-index: 2; }
.c-stone  { left: 15.22%; top: 22.08%;    width: min(7.58%, 144px); }
.c-cube   { left: 9.77%;  bottom: -3.01%; width: min(17.30%, 330px); --rot: 15deg; }
.c-shapes { right: 7.65%; top: -4.74%;    width: min(18.94%, 361px); --rot: -10deg; }
.c-globe  { right: 0.15%; bottom: -0.12%; width: min(21.16%, 403px); }
.c-boat   { right: 18.06%; top: 64.23%;   width: min(15.44%, 294px); --rot: -6deg; }

/* ============ EXHIBITION (full-bleed, exact original ratios @1022) ============ */
.exhibition-sec { position: relative; height: 42.86vw; overflow: hidden; }
.ex-big { position: absolute; left: 0; top: 0; width: 66.05vw; height: 100%; object-fit: cover; }
/* Anchored to the right edge so the pair can never overlap. */
.ex-small {
  position: absolute;
  right: 0;
  bottom: 2.18vw;
  width: 31.11vw;
  height: 29.55vw;
  object-fit: cover;
}
.ex-link { position: absolute; right: 22.2vw; top: 4.89vw; }

/* ============ DESIGN (red, slideshow — one slide at a time) ============ */
.design-sec {
  position: relative;
  height: 59.2vw;
  min-height: 520px;
  background: var(--red);
  overflow: hidden;
}
.design-text {
  position: relative;
  z-index: 2;
  width: 513px;
  max-width: 90%;
  padding: 23px 0 0 var(--pad-x);
  color: #fff;
}
.design-para { font-size: 18px; line-height: 28.8px; margin: 5px 0 26px; }
.design-slideshow {
  position: absolute;
  left: 36.9%;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}
.design-slides {
  display: flex;
  height: 100%;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.design-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Translucent prev/next controls, as on the original slideshow */
.design-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .75;
  transition: opacity .3s ease, background .3s ease;
  z-index: 3;
}
.design-nav:hover { opacity: 1; background: rgba(255, 255, 255, .62); }
.design-nav svg { width: 18px; height: 18px; }
.design-prev { left: 18px; }
.design-next { right: 18px; }

/* ============ ABOUT (bg image 800px) ============ */
.about-sec {
  min-height: 800px;
  background: url('../images/bg-about-gallery.webp') center / cover no-repeat;
  padding: 23px var(--pad-x) 60px;
}
.about-text { margin-left: 35.6%; max-width: 872px; }
.about-text p { font-size: 18px; line-height: 28.8px; margin: 0 0 28px; }

/* ============ BLOGS (marquee 637px) ============ */
.blogs-sec { padding: 23px 0 0; }
.blogs-sec .big-title { padding: 0 var(--pad-x); }
.blogs-sec .intro-text { padding: 0 var(--pad-x); margin-top: 5px; }
.blogs-link { display: inline-block; padding: 0 var(--pad-x); margin: 26px 0 24px; }
.blog-marquee { height: 637px; overflow: hidden; }
.blog-track { animation-duration: 50s; }

/* ============ SUPPORT (floral bg 617px) ============ */
.support-sec {
  min-height: 617px;
  background: #deb9b9 url('../images/bg-floral.webp') center / cover no-repeat;
  padding: 23px var(--pad-x) 60px;
}
.support-text { margin-left: 19.3%; max-width: 838px; }
.support-subtitle {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 46.8px;
  margin: 0 0 34px;
}
.support-text p { font-size: 18px; line-height: 28.8px; margin: 0 0 28px; }

/* ============ FOOTER (single source for every page; geometry from ABOUT) ============ */
.site-footer { background: #000; color: #fff; padding: 23px var(--pad-x) 0; }

/* Unified content-to-footer gap across pages (home keeps the internal
   bottom padding of its final SUPPORT section instead). */
.site-footer { margin-top: 40px; }
.support-sec + .site-footer { margin-top: 0; }

.footer-main {
  display: grid;
  grid-template-columns: 50% 28.264% 21.736%;
  align-items: start;
}
.footer-contact, .footer-social, .footer-nav { padding-left: 0; }
.site-footer h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 31.2px;
  margin: 0 0 23px;
}
.footer-contact p { font-size: 18px; line-height: 28.8px; margin: 0 0 22px; }
.footer-contact p:last-child { margin-bottom: 0; }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.social-icons { display: flex; align-items: center; column-gap: 15px; }
.social-icons img { display: block; width: 36px; height: 27px; object-fit: contain; }
.social-nav { margin: 79px 0 0; }
.social-nav a { color: #fff; text-decoration: none; font-size: 18px; line-height: 28.8px; }
.social-nav a:hover { text-decoration: underline; }
.footer-nav ul { margin: 0; }
.footer-nav li { height: 32px; }
.footer-nav a { color: #fff; text-decoration: none; font-size: 18px; line-height: 32px; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 19px; padding: 0 0 20px; }
.legal-links { padding-left: 6px; column-gap: clamp(24px, 9.6vw, 138px); }
.legal-links a { color: #fff; text-decoration: none; font-size: 14px; }
.legal-links a:hover { text-decoration: underline; }
.copyright { font-size: 14px; line-height: 22px; text-align: right; }

/* ============ ARTWORK GALLERY (shared: DESIGN + ARTIST) ============
   Markup is one flat list (single FTL loop); masonry.js splits it into
   `.ag-col` / `.dg-col` columns with shortest-column packing, which
   reproduces the original Wix collage. Without JS the list stacks in a
   single column. Page files only add their own caption skin/geometry. */
.artist-gallery, .design-grid { background: #fff; }
.artist-gallery.is-masonry, .design-grid.is-masonry {
  display: flex;
  gap: 2px;
  align-items: flex-start;
}
.artist-gallery:not(.is-masonry) .ag-item,
.design-grid:not(.is-masonry) .dg-item { width: 100%; margin-bottom: 2px; }
.ag-col, .dg-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 calc(50% - 1px);
  min-width: 0;
}
.ag-item, .dg-item {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.ag-item img, .dg-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}

/* Hover caption overlay: white text pinned to the bottom-left of the item */
.ag-cap {
  align-items: flex-start;
  padding: 30px;
  transform-origin: 50% 50%;
  transition: opacity .4s ease, transform .4s ease;
}
@media (hover: hover) {
  .ag-item:hover .ag-cap { transform: scale(.985); }
}
.ag-item:focus-visible .ag-cap { transform: scale(.985); }

.ag-cap, .dg-info {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.ag-cap-title, .dg-info-title {
  width: 100%;
  font: 700 18px/23.4px var(--sans);
  color: #fff;
  margin: 0 0 2px;
}
.ag-cap-desc, .dg-info-desc {
  width: 100%;
  font: 400 18px/28.8px var(--sans);
  color: #fff;
  margin: 0;
  white-space: pre-line;
}

/* The original shrinks the image to 98.5% on hover (mouse only,
   so a tap on touch devices does not leave it stuck scaled) */
@media (hover: hover) {
  .ag-item:hover img, .dg-item:hover img { transform: scale(.985); }
  .ag-item:hover .ag-cap, .dg-item:hover .dg-info { opacity: 1; }
}
.ag-item:focus-visible img, .dg-item:focus-visible img { transform: scale(.985); }
.ag-item:focus-visible .ag-cap, .dg-item:focus-visible .dg-info { opacity: 1; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .ex-link { right: 30px; }
}
@media (max-width: 991px) {
  /* Mobile bar: logo height + 17px top / 4px bottom = 70px at 390 (as original) */
  html { scroll-padding-top: 78px; }
  .header-inner { height: auto; padding: 17px 8px 4px; }
  .site-logo img { width: min(53.85vw, 480px); height: auto; }
  /* Mobile typography only — the desktop sizes above stay untouched.
     The original mobile theme uses 14px body copy and ~20px display titles. */
  body { font-size: 14px; }
  .big-title { font-size: min(64px, 3.344vw); }
  .intro-text, .caption-text, .design-para,
  .about-text p, .support-text p { font-size: 14px; line-height: 22.4px; }
  .text-link { font-size: 14px; }
  .uea-wordmark { font-size: 20px; line-height: 26px; }
  .caption-title { font-size: max(22px, min(36px, 3.6vw)); line-height: 1.3; }
  .support-subtitle { font-size: max(24px, min(36px, 3.6vw)); line-height: 1.3; }
  .hero-strip { height: 56vw; min-height: 300px; }
  .caption-band { padding-top: 14px; }
  .caption-row { flex-direction: column; align-items: flex-start !important; gap: 6px; }
  .artist-row { flex-direction: column; align-items: center; }
  .artist-item img { height: auto; width: min(100%, 420px); }
  .gallery-sec { height: auto; min-height: 420px; padding-bottom: 60px; }
  .gallery-quote { font-size: 26px; line-height: 1.35; margin: 0; width: 86%; }
  .collage { display: none; }
  .exhibition-sec { height: auto; }
  .ex-big, .ex-small, .ex-link { position: static; }
  .ex-big { width: 100%; height: auto; }
  .ex-link { display: inline-block; margin: 18px 23px; }
  .ex-small { width: 80%; height: auto; margin: 0 auto 30px; display: block; }
  .design-sec { height: auto; min-height: 0; }
  .design-text { width: auto; padding: 40px 23px; }
  .design-slideshow { position: relative; left: 0; height: 480px; }
  .about-sec { min-height: 0; }
  .about-text { margin-left: 0; max-width: none; margin-top: 24px; }
  .blog-marquee { height: 420px; }
  .support-text { margin-left: 0; max-width: none; }
  .support-subtitle { font-size: 28px; }

  .footer-main { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer-nav { grid-column: 1 / -1; }
  .social-nav { margin-top: 16px; }
  .footer-nav ul { columns: 2; }
  .footer-bottom { padding-top: 18px; row-gap: 12px; }
  .copyright { text-align: left; }
}

@media (max-width: 767.98px) {
  .artist-gallery.is-masonry, .design-grid.is-masonry { flex-direction: column; }
  .ag-col, .dg-col { flex: 0 0 auto; width: 100%; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-nav { grid-column: auto; }
}

/* ============ PAGINATION (site-wide, minimal square style) ============ */
/* Overrides Bootstrap's default rounded/gray pagination to match the
   store's black & white aesthetic on every page that lists content. */
.pagination {
  --bs-pagination-padding-x: 0.55rem;
  --bs-pagination-padding-y: 0.4rem;
  --bs-pagination-font-size: 16px;
  --bs-pagination-border-radius: 0;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: rgba(0, 0, 0, .25);
  --bs-pagination-color: #000;
  --bs-pagination-bg: #fff;
  --bs-pagination-hover-color: #000;
  --bs-pagination-hover-bg: #fff;
  --bs-pagination-hover-border-color: #000;
  --bs-pagination-focus-color: #000;
  --bs-pagination-focus-bg: #fff;
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #000;
  --bs-pagination-active-border-color: #000;
  --bs-pagination-disabled-color: rgba(0, 0, 0, .35);
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: rgba(0, 0, 0, .25);
  gap: 8px;
  margin: 36px 0 0;
}
.pagination .page-link {
  border-radius: 0;
  font-family: var(--sans);
  transition: none;
}
/* separated squares via gap instead of Bootstrap's joined borders */
.pagination .page-item + .page-item { margin-left: 0; }