/* ============================================================
   MASSA CHULA — DESIGN SYSTEM
   ============================================================ */

:root {
  /* Base palette — deep Ivorian earth, fired mineral surfaces */
  --ink:       #0a0806;
  --soot:      #131210;
  --ember:     #1c1916;
  --dust:      #2a2520;
  --ash:       #3d3630;
  --sand:      #8a7965;
  --pale:      #d4c9b8;
  --cream:     #ede5d8;
  --white:     #f5f1eb;

  /* Chromatic accents — vary per page via JS */
  --chroma-a:  #5c3d2e;   /* warm sienna */
  --chroma-b:  #3d2c1e;
  --chroma-glow: rgba(120, 80, 40, 0.12);
  --chroma-line: rgba(180, 140, 90, 0.15);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Helvetica Neue', 'Arial', sans-serif;

  --ease-silk:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slow:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo:  cubic-bezier(0.87, 0, 0.13, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

/* ── Custom cursor ── */
#cursor {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(237,229,216,0.92);
  box-shadow: 0 0 6px rgba(237,229,216,0.3);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.3s var(--ease-silk), height 0.3s var(--ease-silk),
              background 0.3s, opacity 0.25s;
}
#cursor.expand { width: 48px; height: 48px; background: rgba(237,229,216,0.18); }
#cursor.cursor-visible { opacity: 1; }
#cursor.expand { width: 48px; height: 48px; }
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(212,201,184,0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: transform 0.12s linear, width 0.4s var(--ease-silk),
              height 0.4s var(--ease-silk), opacity 0.25s;
}
#cursor-ring.cursor-visible { opacity: 1; }

/* ── Touch devices: the custom cursor is a mouse-only affordance.
   Touchscreens can synthesize a "mousemove" after a tap, which would
   otherwise leave the dot/ring stuck on screen after the first touch. ── */
@media (hover: none), (pointer: coarse) {
  #cursor, #cursor-ring { display: none !important; }
}

/* ── Navigation ── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 3rem;
  mix-blend-mode: normal;
}
#nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,8,6,0.7) 0%, transparent 100%);
  pointer-events: none;
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  position: relative;
  z-index: 1;
}
.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  transition: color 0.4s;
}
.nav-links a:hover, .nav-links a.active { color: var(--cream); }

/* ── Right-side nav cluster (links + language + mobile toggle) ── */
.nav-right {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Mobile nav toggle (hamburger) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 28px;
  height: 20px;
  margin-left: 1.2rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--cream);
  transition: transform 0.35s var(--ease-silk), opacity 0.25s, width 0.3s;
}
.nav-toggle span:nth-child(1) { width: 22px; }
.nav-toggle span:nth-child(2) { width: 28px; }
.nav-toggle span:nth-child(3) { width: 15px; }
.nav-toggle:hover span { width: 28px; }
#nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 24px; }
#nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
#nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 24px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10,8,6,0.98);
    backdrop-filter: blur(10px);
    padding: 6.5rem 2rem 3rem;
    max-height: 100vh;
    overflow-y: auto;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s var(--ease-silk), opacity 0.4s;
    pointer-events: none;
  }
  #nav.nav-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-links li { border-bottom: 1px solid rgba(212,201,184,0.1); }
  .nav-links a { display: block; padding: 1.15rem 0; font-size: 0.8rem; }
  .nav-mode { margin-left: 0; padding-left: 0; padding-top: 0.9rem; padding-bottom: 0.3rem; }
  .nav-mode::before { display: none; }
  .nav-mode-link { padding: 0.3rem 0 !important; }
}

/* ── Pages ── */
.page {
  display: none;
  min-height: 100vh;
}
.page.active { display: block; }

/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* PLACEHOLDER: HERO_ARTWORK_MAIN
     Replace with: background-image: url('/images/hero-main.jpg');
     The dominant color of this image should define --chroma-a and --chroma-b */
  background: 
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(74,46,28,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 80% 70%, rgba(45,30,15,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 20% 80%, rgba(20,14,8,0.8) 0%, transparent 50%),
    linear-gradient(135deg, #0f0b07 0%, #1a1208 30%, #2c1e0e 60%, #1a1208 100%);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: heroBreath 18s ease-in-out infinite alternate;
  filter: brightness(0.85) contrast(1.1);
}
@keyframes heroBreath {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1%, -0.5%); }
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,8,6,0.95) 0%, rgba(10,8,6,0.4) 30%, transparent 60%),
    linear-gradient(to right, rgba(10,8,6,0.5) 0%, transparent 40%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 3rem 5rem;
  max-width: 900px;
}
.hero-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.8rem;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-silk) 0.4s forwards;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 0.92;
  color: var(--cream);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-silk) 0.6s forwards;
}
.hero-title em {
  font-style: italic;
  color: var(--pale);
}
.hero-statement {
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--sand);
  max-width: 380px;
  opacity: 0;
  animation: fadeUp 1.4s var(--ease-silk) 0.9s forwards;
}
.hero-scroll-indicator {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  animation: fadeIn 1s var(--ease-silk) 2s forwards;
}
.hero-scroll-indicator span {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
  writing-mode: vertical-rl;
}
.scroll-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, var(--sand), transparent);
  animation: scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.4; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Intro section */
.section-intro {
  padding: 9rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 6rem;
  align-items: center;
  border-top: 1px solid var(--chroma-line);
  position: relative;
}
.section-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 30% 50%, var(--chroma-glow), transparent);
  pointer-events: none;
}
.section-intro > div:first-child {
  transform: translateY(-3rem);
}

.intro-label {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 2rem;
}
.intro-pull {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--pale);
}
.intro-pull em { font-style: italic; color: var(--cream); }
.intro-sub {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--sand);
  margin-top: 1rem;
}
.intro-body {
  font-size: 0.82rem;
  line-height: 2;
  color: var(--sand);
  font-weight: 300;
}
.intro-body p + p { margin-top: 1.5rem; }

.intro-speech {
  margin: 5rem -2rem 0;
  padding: 4rem 3.5rem;
  border-top: 1px solid rgba(212,201,184,0.18);
  border-bottom: 1px solid rgba(212,201,184,0.18);
  background: rgba(212,201,184,0.055);
  position: relative;
}
.intro-speech::before {
  content: '\201C';
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  color: rgba(212,201,184,0.12);
  position: absolute;
  top: 1.5rem;
  left: 2.5rem;
  pointer-events: none;
}
.intro-speech-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.95;
  color: var(--cream);
  margin: 0 0 2.5rem;
  position: relative;
}
.intro-speech-source {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(212,201,184,0.15);
}
.intro-speech-name {
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
  font-family: var(--font-sans);
}
.intro-speech-role {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  font-family: var(--font-sans);
}

/* Works preview grid */
.section-works-preview {
  padding: 0 3rem 8rem;
  position: relative;
}
.works-preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--pale);
}
.section-link {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid var(--ash);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.section-link:hover { color: var(--cream); border-color: var(--sand); }

.works-grid-home {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5px;
}
.work-cell {
  position: relative;
  overflow: hidden;
  cursor: none;
}
/* UNCROPPED: aspect-ratios removed. Work cells adapt to artwork proportions. */
.work-cell:nth-child(1) { grid-row: span 2; }
.work-cell:nth-child(2) { }
.work-cell:nth-child(3) { }
.work-cell:nth-child(4) { grid-column: 2; }
.work-cell:nth-child(5) { grid-column: 3; grid-row: 2; }

.work-img {
  width: 100%;
  height: auto;            /* UNCROPPED: natural artwork proportions */
  object-fit: contain;
  display: block;
  transition: transform 0.6s var(--ease-silk);
  filter: brightness(0.92) contrast(1.02);
}
.work-cell:hover .work-img { transform: scale(1.02); }

/* Placeholder artwork cells */
.work-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
/* PLACEHOLDER: WORK_01 */ .work-placeholder-1 { background: linear-gradient(145deg, #1e1208 0%, #3d2410 40%, #1a0e06 100%); }
/* PLACEHOLDER: WORK_02 */ .work-placeholder-2 { background: linear-gradient(135deg, #0e0e14 0%, #1e1a2c 50%, #0a080f 100%); }
/* PLACEHOLDER: WORK_03 */ .work-placeholder-3 { background: linear-gradient(160deg, #140c06 0%, #2e1c0e 60%, #0e0806 100%); }
/* PLACEHOLDER: WORK_04 */ .work-placeholder-4 { background: linear-gradient(120deg, #0c1010 0%, #1a2420 50%, #080e0c 100%); }
/* PLACEHOLDER: WORK_05 */ .work-placeholder-5 { background: linear-gradient(150deg, #180e06 0%, #3a2010 50%, #120a04 100%); }

.work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,0.85) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-silk);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}
.work-cell:hover .work-overlay { opacity: 1; }
.work-meta-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 0.3rem;
}
.work-meta-sub {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Immersive texture band */
.section-texture {
  position: relative;
  min-height: 55vh;
  height: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}
.texture-bg {
  position: absolute;
  inset: 0;
  /* PLACEHOLDER: HOME_TEXTURE_01
     Replace with a detail crop of an artwork — color gradient will spread across the section */
  background:
    radial-gradient(ellipse 120% 80% at 60% 50%, rgba(90,50,20,0.45) 0%, transparent 70%),
    linear-gradient(160deg, #0f0b07 0%, #241508 40%, #1a1008 70%, #0a0806 100%);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 0.1s linear;
  filter: brightness(0.7) saturate(1.2);
}
.texture-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,8,6,0.9) 0%, transparent 25%, transparent 75%, rgba(10,8,6,0.9) 100%),
    linear-gradient(to right, rgba(10,8,6,0.6) 0%, transparent 30%, transparent 70%, rgba(10,8,6,0.6) 100%);
}
.texture-quote {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
  padding: 2rem;
}
.texture-quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.8vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--pale);
  margin-bottom: 2rem;
}
.texture-quote cite {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pale);
  font-style: normal;
}
.texture-manifesto {
  margin-top: 3.5rem;
  max-width: 560px;
  text-align: center;
}
.tm-rule {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--sand), transparent);
  margin: 0 auto 2.5rem;
  opacity: 0.4;
}
.tm-line {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  font-weight: 300;
  color: var(--sand);
  line-height: 2;
  margin-bottom: 1.6rem;
  letter-spacing: 0.01em;
}
.tm-line em {
  font-style: italic;
  color: var(--pale);
  font-size: 1.05em;
}
.tm-closing {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.6;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200,180,140,0.12);
  letter-spacing: 0.03em;
}
.tm-closing strong {
  font-weight: 400;
  font-style: italic;
  color: var(--pale);
  display: block;
  font-size: 1.15em;
  margin-top: 0.3rem;
}

/* Collections preview */
.section-collections {
  padding: 8rem 3rem;
}
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 4rem;
}
.collection-card {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  cursor: none;
}
.collection-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s var(--ease-silk), filter 0.5s;
  filter: brightness(0.55) saturate(1.1);
}
/* PLACEHOLDER: COLLECTION_COVER_01 */
.collection-card:nth-child(1) .collection-card-bg {
  background: linear-gradient(145deg, #1c0e06 0%, #3c2010 50%, #180c04 100%);
}
/* PLACEHOLDER: COLLECTION_COVER_02 */
.collection-card:nth-child(2) .collection-card-bg {
  background: linear-gradient(135deg, #0a0a18 0%, #1a183a 50%, #080810 100%);
}
/* PLACEHOLDER: COLLECTION_COVER_03 */
.collection-card:nth-child(3) .collection-card-bg {
  background: linear-gradient(150deg, #0e1210 0%, #1e2c20 50%, #090e0a 100%);
}
.collection-card:hover .collection-card-bg {
  transform: scale(1.05);
  filter: brightness(0.7) saturate(1.2);
}
.collection-card-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}
.collection-number {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 1rem;
}
.collection-name {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 0.8rem;
  line-height: 1.2;
}
.collection-desc {
  font-size: 0.72rem;
  line-height: 1.8;
  color: var(--sand);
  font-weight: 300;
  max-width: 260px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s var(--ease-silk);
}
.collection-card:hover .collection-desc { opacity: 1; transform: translateY(0); }

/* CTA / Inquiry section */
.section-cta {
  position: relative;
  padding: 10rem 3rem;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--chroma-line);
}
.section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(60,35,15,0.25), transparent);
}
.cta-label {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 2rem;
  position: relative;
}
.cta-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--pale);
  margin-bottom: 3rem;
  position: relative;
}
.cta-title em { font-style: italic; color: var(--cream); }
.btn-primary {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--pale);
  padding: 1.1rem 3rem;
  text-decoration: none;
  position: relative;
  transition: background 0.4s, color 0.4s, transform 0.4s var(--ease-silk);
  cursor: none;
}
.btn-primary:hover {
  background: var(--cream);
  transform: translateY(-2px);
}
.btn-outline {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  border: 1px solid var(--ash);
  padding: 1.1rem 3rem;
  text-decoration: none;
  transition: color 0.4s, border-color 0.4s;
  cursor: none;
  margin-left: 1.5rem;
}
.btn-outline:hover { color: var(--cream); border-color: var(--sand); }

/* ============================================================
   WORKS PAGE
   ============================================================ */
.page-header {
  padding: 14rem 3rem 9rem;
  border-bottom: 1px solid var(--chroma-line);
}
.page-header-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.5rem;
}
.page-header-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 0.95;
  color: var(--pale);
}
.page-header-title em { font-style: italic; color: var(--cream); }

.works-filter-bar {
  padding: 2.5rem 3rem;
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid rgba(61,54,48,0.4);
}
.filter-btn {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  background: none;
  border: none;
  cursor: none;
  transition: color 0.3s;
  padding: 0;
}
.filter-btn.active, .filter-btn:hover { color: var(--cream); }

.works-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
.artwork-item {
  position: relative;
  overflow: hidden;
  cursor: none;
}
/* UNCROPPED: No forced aspect ratios on artwork items */
/* Each work displays at its natural proportion */

.artwork-img-wrap {
  width: 100%;
  height: auto;            /* UNCROPPED: no clipping */
  overflow: visible;
  background: var(--soot); /* dark background for contain letterboxing */
}
.artwork-placeholder {
  width: 100%;
  height: auto;            /* UNCROPPED: natural proportions */
  min-height: 280px;       /* only for empty placeholder state */
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: var(--soot);
  aspect-ratio: 3/4;       /* placeholder only — removed when real img added */
}
/* Individual artwork placeholders — WORK_01 through WORK_09 */
.ap1 { background: linear-gradient(145deg, #1e1208, #3d2410, #1a0e06); }
.ap2 { background: linear-gradient(135deg, #0e0e14, #1e1a2c, #0a080f); }
.ap3 { background: linear-gradient(160deg, #140c06, #2e1c0e, #0e0806); }
.ap4 { background: linear-gradient(120deg, #0c1010, #1a2420, #080e0c); }
.ap5 { background: linear-gradient(150deg, #180e06, #3a2010, #120a04); }
.ap6 { background: linear-gradient(140deg, #101408, #202c10, #080e04); }
.ap7 { background: linear-gradient(130deg, #16080a, #301015, #100608); }
.ap8 { background: linear-gradient(155deg, #0a1016, #102030, #06090f); }
.ap9 { background: linear-gradient(145deg, #141008, #2c2010, #0a0c06); }

.placeholder-label {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(138,121,101,0.3);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.artwork-info-bar {
  padding: 1.2rem 1.5rem;
  background: var(--soot);
  border-top: 1px solid rgba(61,54,48,0.3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.artwork-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--pale);
}
.artwork-year {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--ash);
}

/* ============================================================
   ARTIST PAGE
   ============================================================ */
.artist-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.artist-portrait-side {
  position: relative;
  background-image: url("Artiste Chula.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 80vh;
}
.artist-portrait-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.05) 50%, rgba(10,8,6,0.45) 100%);
  pointer-events: none;
}
.artist-content-side {
  padding: 14rem 3rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.artist-name-large {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--pale);
  margin-bottom: 0.8rem;
  line-height: 1.1;
}
.artist-subtitle {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 3.5rem;
}
.artist-bio {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--sand);
  font-weight: 300;
  max-width: 480px;
}
.artist-bio p + p { margin-top: 1.5rem; }
.artist-stats {
  display: flex;
  gap: 3.5rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--chroma-line);
}
.stat-item {}
.stat-number {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--pale);
  display: block;
}
.stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sand);
}

.artist-statement-section {
  padding: 8rem 3rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  border-top: 1px solid var(--chroma-line);
}
.artist-statement-label {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: 0.4rem;
}
.artist-statement-text {
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 1.3vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--pale);
}

/* ============================================================
   COLLECTIONS PAGE
   ============================================================ */
.collections-editorial {
  padding: 3rem;
}
.collection-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-bottom: 1px solid rgba(61,54,48,0.3);
  overflow: hidden;
}
.collection-row:nth-child(even) { direction: rtl; }
.collection-row:nth-child(even) > * { direction: ltr; }
.collection-row-img {
  position: relative;
  overflow: hidden;
  background: var(--soot);
  /* UNCROPPED: aspect-ratio removed, adapts to artwork */
}
.collection-row-bg {
  /* UNCROPPED: converted to img-based — see HTML for <img> replacement */
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0.92);
  transition: transform 0.9s var(--ease-silk);
}
/* Container for collection row image — adapts to artwork proportions */
.collection-row-img {
  position: relative;
  overflow: hidden;
  background: var(--soot);
}
.collection-row:hover .collection-row-bg { transform: scale(1.04); }
/* PLACEHOLDER: COLLECTION_COVER_01,02,03 */
.cr1 { background: linear-gradient(145deg, #1c0e06, #3c2010, #180c04); }
.cr2 { background: linear-gradient(135deg, #0a0a18, #1a183a, #080810); }
.cr3 { background: linear-gradient(150deg, #0e1210, #1e2c20, #090e0a); }

.collection-row-content {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--soot);
}
.collection-series-num {
  font-size: 3.5rem;
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--dust);
  line-height: 1;
  margin-bottom: 1rem;
}
.collection-row-name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--pale);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.collection-row-desc {
  font-size: 0.78rem;
  line-height: 2;
  color: var(--sand);
  font-weight: 300;
  max-width: 360px;
  margin-bottom: 2.5rem;
}
.collection-row-count {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ============================================================
   INQUIRIES PAGE
   ============================================================ */
.inquiries-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.inquiries-bg-side {
  position: relative;
  background-image: url("logo-chula.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0a0806;
  min-height: 100vh;
  overflow: hidden;
}
.inquiries-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.1) 50%, rgba(10,8,6,0.55) 100%);
  pointer-events: none;
}
.inquiries-form-side {
  padding: 14rem 4rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--soot);
}
.inquiries-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 1.5rem;
}
.inquiries-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--pale);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.inquiries-subtitle {
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--sand);
  font-weight: 300;
  margin-bottom: 3.5rem;
  max-width: 380px;
}
.form-field {
  margin-bottom: 1.5rem;
}
.form-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 0.7rem;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: none;
  border-bottom: 1px solid var(--ash);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.9rem 0;
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--sand);
}
.form-select { cursor: none; background-image: none; }
.form-select option {
  background: #1c1610;
  color: #d4c9b8;
}
.form-textarea { resize: none; height: 100px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-submit {
  margin-top: 2.5rem;
  background: var(--pale);
  color: var(--ink);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 1.2rem 3rem;
  cursor: none;
  transition: background 0.4s;
  width: 100%;
}
.form-submit:hover { background: var(--cream); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 5rem 3rem 3rem;
  border-top: 1px solid var(--chroma-line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  background: var(--ink);
}
.footer-brand {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 1.5rem;
}
.footer-tagline {
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--pale);
  font-weight: 300;
}
.footer-col-title {
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 1.5rem;
}
.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.footer-nav a {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-nav a:hover { color: var(--cream); }
.footer-nav-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.55;
}
.footer-bottom {
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(61,54,48,0.25);
  background: var(--ink);
}
.footer-copyright {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--dust);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-silk), transform 0.9s var(--ease-silk);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.35s; }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
#page-curtain {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-silk);
}
#page-curtain.closing { opacity: 1; pointer-events: all; }

/* ============================================================
   CHROMATIC THEMES — applied via JS on page switch
   ============================================================ */
body.chroma-sienna   {
  --chroma-a: #5c3d2e; --chroma-b: #3d2c1e;
  --chroma-glow: rgba(120,80,40,0.12); --chroma-line: rgba(180,140,90,0.15);
}
body.chroma-indigo   {
  --chroma-a: #2e2e5c; --chroma-b: #1e1e3d;
  --chroma-glow: rgba(60,60,140,0.1); --chroma-line: rgba(100,100,180,0.12);
}
body.chroma-slate    {
  --chroma-a: #2e3c3e; --chroma-b: #1e2c2e;
  --chroma-glow: rgba(40,80,70,0.1); --chroma-line: rgba(80,130,110,0.12);
}
body.chroma-umber    {
  --chroma-a: #3c2412; --chroma-b: #2c180a;
  --chroma-glow: rgba(100,55,20,0.1); --chroma-line: rgba(160,100,50,0.12);
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 900px) {
  #nav { padding: 1.5rem 1.5rem; }
  .nav-links { gap: 1.5rem; }
  .nav-links a { font-size: 0.6rem; }
  .hero-content { padding: 0 1.5rem 4rem; }
  .section-intro { grid-template-columns: 1fr; gap: 2.5rem; padding: 5rem 1.5rem; }
  .section-works-preview { padding: 0 1.5rem 5rem; }
  .works-grid-home { grid-template-columns: 1fr 1fr; }
  .works-grid-home .work-cell:nth-child(1) { grid-column: span 2; aspect-ratio: 16/9; }
  .works-grid-home .work-cell:nth-child(5) { display: none; }
  .works-full-grid { grid-template-columns: 1fr 1fr; }
  .section-collections { padding: 5rem 1.5rem; }
  .collections-grid { grid-template-columns: 1fr; }
  .artist-hero { grid-template-columns: 1fr; }
  .artist-portrait-side { min-height: 50vh; }
  .artist-content-side { padding: 3rem 1.5rem 5rem; }
  .artist-statement-section { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.5rem; }
  .inquiries-page { grid-template-columns: 1fr; }
  .inquiries-bg-side { display: none; }
  .inquiries-form-side { padding: 10rem 1.5rem 5rem; }
  .collection-row { grid-template-columns: 1fr; }
  .collections-editorial { padding: 1.5rem; }
  .collection-row-img { aspect-ratio: 16/9; }
  footer { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1.5rem 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; padding: 2rem 1.5rem; }
  .section-cta { padding: 6rem 1.5rem; }
  .page-header { padding: 10rem 1.5rem 3rem; }
  .works-filter-bar { padding: 1.5rem; flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   MODE NAV — separate external destination
   ════════════════════════════════════════ */
.nav-mode {
  position: relative;
  margin-left: 0.6rem;
  padding-left: 1.2rem;
}
.nav-mode::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 0.75em;
  background: var(--ash);
  opacity: 0.6;
}
.nav-mode-link {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
}
.nav-mode-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sand);
  flex-shrink: 0;
  animation: modeDotPulse 3.2s ease-in-out infinite;
  transition: background 0.4s, transform 0.4s var(--ease-silk);
}
@keyframes modeDotPulse {
  0%,100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.5); }
}
.nav-mode-link:hover .nav-mode-dot {
  background: var(--cream);
  animation: none;
  transform: scale(1.6);
}
.nav-mode-tag {
  font-size: 0.44rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid rgba(61,54,48,0.55);
  padding: 0.12rem 0.42rem;
  line-height: 1;
  transition: color 0.35s, border-color 0.35s;
}
.nav-mode-link:hover .nav-mode-tag {
  color: var(--sand);
  border-color: rgba(138,121,101,0.6);
}

/* ════════════════════════════════════════
   LANGUAGE SWITCHER
   ════════════════════════════════════════ */
.nav-lang {
  position: relative;
  z-index: 2;
  margin-left: 0.6rem;
  padding-left: 1.2rem;
}
.nav-lang::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 12px;
  background: rgba(212,201,184,0.18);
}
#lang-current-btn {
  background: none;
  border: 1px solid rgba(212,201,184,0.45);
  border-radius: 2px;
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
#lang-current-btn:hover {
  color: #fff;
  border-color: rgba(212,201,184,0.8);
  background: rgba(212,201,184,0.08);
}
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  background: rgba(14,11,8,0.96);
  border: 1px solid rgba(212,201,184,0.12);
  padding: 0.4rem 0;
  min-width: 3.5rem;
  z-index: 500;
  backdrop-filter: blur(8px);
}
#lang-switcher.open .lang-dropdown { display: block; }
.lang-opt {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--ash);
  font-family: var(--font-sans);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.lang-opt:hover { color: var(--cream); background: rgba(212,201,184,0.06); }

/* ════════════════════════════════════════
   MODE DEPARTURE OVERLAY
   ════════════════════════════════════════ */
#mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-silk);
}
#mode-overlay.open {
  opacity: 1;
  pointer-events: all;
}
#mode-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(6,5,4,0.97);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Ambient glow */
#mode-overlay-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(60,40,20,0.18), transparent 70%);
}
#mode-overlay-panel {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 520px;
  width: 90%;
  padding: 4.5rem 3.5rem;
  transform: translateY(18px);
  transition: transform 0.65s var(--ease-silk);
}
#mode-overlay.open #mode-overlay-panel { transform: translateY(0); }

/* Corner rules */
#mode-overlay-panel::before, #mode-overlay-panel::after {
  content: '';
  position: absolute;
  width: 2rem; height: 2rem;
  border-style: solid;
  border-color: rgba(61,54,48,0.4);
}
#mode-overlay-panel::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
#mode-overlay-panel::after  { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.mo-eyebrow {
  font-size: 0.56rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.mo-eyebrow::before, .mo-eyebrow::after {
  content: '';
  flex: 1; max-width: 2.5rem;
  height: 1px; background: var(--ash);
}
.mo-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  font-weight: 300;
  line-height: 0.88;
  color: var(--pale);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.mo-wordmark-sub {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--sand);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0;
}
.mo-rule {
  width: 2rem; height: 1px;
  background: linear-gradient(to right, transparent, var(--sand), transparent);
  margin: 2.5rem auto;
}
.mo-desc {
  font-size: 0.74rem;
  line-height: 2.1;
  color: var(--sand);
  font-weight: 300;
  margin-bottom: 2.5rem;
  font-family: var(--font-sans);
}
.mo-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 3rem;
}
.mo-cat {
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.3s;
}
.mo-cat:hover { color: var(--sand); }
.mo-actions {
  display: flex;
  gap: 1.8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.mo-cta {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--pale);
  padding: 0.95rem 2.4rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.35s;
  display: inline-block;
}
.mo-cta:hover { background: var(--cream); }
.mo-dismiss {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ash);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(61,54,48,0.4);
  padding-bottom: 2px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.3s, border-color 0.3s;
}
.mo-dismiss:hover { color: var(--sand); border-color: var(--sand); }

/* ════════════════════════════════════════
   COOKIE NOTICE — analytics disclosure
   ════════════════════════════════════════ */
#cookie-notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.1rem 2rem;
  background: rgba(19,18,16,0.96);
  border-top: 1px solid var(--ash);
  backdrop-filter: blur(6px);
  animation: cookieNoticeIn 0.5s var(--ease-silk);
}
@keyframes cookieNoticeIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
#cookie-notice.cookie-notice-hide {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s var(--ease-silk), opacity 0.4s;
}
.cookie-notice-text {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--pale);
}
.cookie-notice-btn {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--pale);
  border: none;
  padding: 0.8rem 1.8rem;
  cursor: pointer;
  transition: background 0.3s;
}
.cookie-notice-btn:hover { background: var(--cream); }
@media (max-width: 640px) {
  #cookie-notice { padding: 1rem 1.25rem; gap: 1rem; }
  .cookie-notice-text { font-size: 0.68rem; }
}

/* ════════════════════════════════════════
   MODE TEASER STRIP — homepage footer
   ════════════════════════════════════════ */
.mode-teaser {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(61,54,48,0.35);
  cursor: pointer;
}
.mode-teaser-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 2.8rem 3rem;
  transition: background 0.45s;
  position: relative;
}
.mode-teaser-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 200% at 50% 50%, rgba(30,20,10,0.6), transparent);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.mode-teaser:hover .mode-teaser-inner::after { opacity: 1; }
.mode-teaser-left { display: flex; align-items: baseline; gap: 2rem; flex-shrink: 0; }
.mode-teaser-badge {
  font-size: 0.54rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
.mode-teaser-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--pale);
}
.mode-teaser-title em { font-style: italic; }
.mode-teaser-text {
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--sand);
  font-weight: 300;
  flex: 1;
  max-width: 400px;
}
.mode-teaser-arrow {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--ash);
  flex-shrink: 0;
  transition: color 0.4s, transform 0.4s var(--ease-silk);
}
.mode-teaser:hover .mode-teaser-arrow { color: var(--pale); transform: translateX(7px); }

@media (max-width: 900px) {
  .mode-teaser-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 2.5rem 1.5rem; }
  .mode-teaser-arrow { display: none; }
  .mode-teaser-left  { flex-direction: column; gap: 0.4rem; }
  #mode-overlay-panel { padding: 3rem 1.8rem; }
  .mo-categories { gap: 1rem; }
}





/* ════════════════════════════════════════════════════════════
   ART SITE HERO v2 — Dual Mask Campaign
   Image: two Termite masks, red earth / teal mineral split
   
   Chromatic palette (from image):
     Sienna-red:    #8B2A0A / #C4401A  (left, fire)
     Teal-mineral:  #0F4A58 / #1A7090  (right, water)
     Dark valley:   #1A1208 / #0A0806  (centre divide)
   
   Design philosophy:
     The image already IS the drama. The diagonal fire/ice
     split is the composition. Overlays serve readability only —
     they must not fight the chromatic power of the work.
   
   Layer stack (back → front):
     L0  .art-bg        Image              slowest parallax
     L1  .art-fog-base  Bottom read fog    medium
     L2  .art-fog-left  Left vignette      slight drift
     L3  .art-chroma    Chromatic echo     mouse drift
     L4  .art-grain     Mineral grain      static
     L5  .art-veil      Top seal           scroll
     L6  hero-content   Title              foreground fastest
   ════════════════════════════════════════════════════════════ */

/* 3D stage */
.hero {
  perspective: 1400px;
  perspective-origin: 50% 40%;
  overflow: hidden;
  isolation: isolate;
}

/* ── L0: Full-cover image ── */
.art-bg {
  position: absolute;
  inset: -8%;                     /* room for parallax travel */
  background-size: cover;
  background-position: center 45%; /* keeps both masks visible */
  background-repeat: no-repeat;
  filter: brightness(0.82) contrast(1.12) saturate(1.18);
  will-change: transform;
  transform: translate3d(0, 0, -2px) scale(1.1);
  transform-origin: center 45%;
}

/* ── L1: Base readability fog — bottom-up ── */
/* Strong enough to hold white text, restrained enough
   that the mask composition remains dominant */
.art-fog-base {
  position: absolute;
  inset: 0;
  will-change: transform;
  background:
    /* Bottom: text area — needs solid ground */
    linear-gradient(to top,
      rgba(10,8,6,0.97)  0%,
      rgba(10,8,6,0.82)  18%,
      rgba(10,8,6,0.38)  42%,
      transparent        62%
    ),
    /* Top seal — thin, prevents blow-out */
    linear-gradient(to bottom,
      rgba(10,8,6,0.55)  0%,
      transparent        22%
    );
}

/* ── L2: Left vignette — where the Massa Chula text lives ── */
/* Uses warm sienna echo from the red-earth left half */
.art-fog-left {
  position: absolute;
  inset: 0;
  will-change: transform;
  background:
    linear-gradient(to right,
      rgba(8,4,2,0.78)    0%,
      rgba(12,6,4,0.42)   28%,
      rgba(10,5,3,0.08)   52%,
      transparent         68%
    );
}

/* ── L3: Chromatic echo overlays ──
   Barely visible tonal "bleed" that ties the text zone
   to the image's fire/ice drama without overwhelming it */
.art-chroma {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  background:
    /* Sienna warmth bled into lower-left text zone */
    radial-gradient(ellipse 60% 55% at 8% 88%,
      rgba(120,36,10,0.22) 0%,
      transparent          70%
    ),
    /* Teal cool echo on right edge */
    radial-gradient(ellipse 45% 60% at 92% 55%,
      rgba(15,74,88,0.18) 0%,
      transparent          72%
    );
  mix-blend-mode: multiply;
}

/* ── L4: Mineral grain — raw surface quality ── */
.art-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ── L5: Scroll veil — dark well at very top ── */
.art-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  will-change: transform;
  background: radial-gradient(ellipse 100% 30% at 50% 0%,
    rgba(10,8,6,0.35) 0%, transparent 100%
  );
}

/* ── Chroma separator line at hero base ──
   Uses both palette colours — echoes the fire/ice split */
.art-chroma-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 5;
  background: linear-gradient(to right,
    rgba(180,60,20,0.6)  0%,
    rgba(140,40,10,0.8)  22%,
    rgba(10,8,6,0.4)     50%,
    rgba(20,100,120,0.7) 78%,
    rgba(15,74,88,0.5)   100%
  );
}

/* ── Ambient drift particles ── one per chromatic world */
.art-particle {
  position: absolute; border-radius: 50%;
  pointer-events: none; will-change: transform, opacity;
}
/* Sienna — left world */
.art-p1 { width:2px;height:2px; left:12%; top:32%;
  background:rgba(196,64,26,0.5); filter:blur(1px);
  animation: artDrift 22s ease-in-out infinite; }
.art-p2 { width:1px;height:1px; left:24%; top:58%;
  background:rgba(160,50,14,0.4); filter:blur(.5px);
  animation: artDrift 28s ease-in-out infinite; animation-delay:-10s; }
/* Teal — right world */
.art-p3 { width:2px;height:2px; left:74%; top:25%;
  background:rgba(20,120,150,0.5); filter:blur(1px);
  animation: artDrift 18s ease-in-out infinite; animation-delay:-6s; }
.art-p4 { width:1px;height:1px; left:85%; top:50%;
  background:rgba(15,90,110,0.4); filter:blur(.5px);
  animation: artDrift 24s ease-in-out infinite; animation-delay:-14s; }

@keyframes artDrift {
  0%,100% { transform:translate(0,0);         opacity:0; }
  8%       {                                   opacity:1; }
  88%      {                                   opacity:1; }
  100%     { transform:translate(-10px,-80px); opacity:0; }
}

/* ── L6: Foreground content ── */
.hero-content {
  position: relative;
  z-index: 6;
  padding: 0 3rem 5rem;
  max-width: 900px;
  will-change: transform;
  transform: translate3d(0, 0, 12px);
}

/* ── Typography treatment ── */
.hero-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.8rem;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-silk) 0.4s forwards;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 0.92;
  color: var(--cream);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: artTitleIn 1.6s var(--ease-silk) 0.65s forwards;
  /* Depth-separated shadow — warm on left, cool undertone */
  text-shadow:
    0 6px 52px rgba(0,0,0,0.75),
    0 2px 4px  rgba(0,0,0,0.85),
    0 0 140px  rgba(120,36,10,0.12);
}
.hero-title em {
  font-style: italic;
  color: var(--pale);
}

.hero-statement {
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--sand);
  max-width: 380px;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-silk) 1.1s forwards;
}

/* Entrance keyframes */
@keyframes artTitleIn {
  from { opacity:0; transform: translate3d(0, 32px, 12px); }
  to   { opacity:1; transform: translate3d(0, 0, 12px); }
}

/* ── Scroll indicator ── */
.hero-scroll-indicator {
  position: absolute;
  bottom: 3rem; right: 3rem; z-index: 6;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease 1.6s forwards;
}
.hero-scroll-indicator span {
  font-size: 0.5rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--ash); writing-mode: vertical-rl;
}
.scroll-line {
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, var(--sand), transparent);
  animation: scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine {
  0%,100% { opacity:.4; transform:scaleY(.6); transform-origin:top; }
  50%     { opacity:1;  transform:scaleY(1); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero { perspective: 700px; }
  .art-bg { background-position: 52% 38%; inset: -4%; }
  .hero-content { padding: 0 1.5rem 4rem; }
  .art-p1, .art-p2, .art-p3, .art-p4 { display: none; }
  .hero-scroll-indicator { right: 1.5rem; }
}


/* ════════════════════════════════════════════════════════════
   KINGDOM COLLECTION — CSS
   
   Chromatic palette (from image):
     Amber-gold:   #C8912A / #E8A830   (crown ornament, veins)
     Warm ochre:   #B07820 / #8A5A14   (mask skin, fabric)
     Void black:   #0E0C08 / #1A1510   (gallery walls, crown)
     Pearl cream:  #F0E8D8 / #D8CEB8   (beads, negative space)
   ════════════════════════════════════════════════════════════ */

/* ── Kingdom featured reveal — Collections page ── */
.kingdom-reveal {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: none;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Cinematic 90vh cover — this is the entrance, not a card */
.kingdom-cover {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
}

.kingdom-img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center 18%;  /* keeps crown + face in frame */
  background-repeat: no-repeat;
  filter: brightness(0.78) contrast(1.1) saturate(1.08);
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s ease;
  will-change: transform;
}
.kingdom-reveal:hover .kingdom-img {
  transform: scale(1.08);
  filter: brightness(0.85) contrast(1.08) saturate(1.12);
}

/* Multi-layer fog — derived from image palette */
.kingdom-fog {
  position: absolute;
  inset: 0;
  background:
    /* Bottom — where text lives. Warm amber-void. */
    linear-gradient(to top,
      rgba(14,12,8,1)     0%,
      rgba(14,12,8,0.88)  20%,
      rgba(18,14,6,0.55)  42%,
      rgba(14,10,4,0.15)  62%,
      transparent         75%
    ),
    /* Left — partial vignette */
    linear-gradient(to right,
      rgba(10,8,4,0.6)  0%,
      rgba(10,8,4,0.12) 35%,
      transparent       58%
    ),
    /* Amber glow radiating from the crown/face area */
    radial-gradient(ellipse 55% 60% at 50% 28%,
      rgba(160,100,20,0.12) 0%,
      transparent           72%
    );
}

/* Grain — slightly heavier here for gallery texture */
.kingdom-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* Amber chroma line — references the gold crown detail */
.kingdom-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(200,145,42,0.35) 20%,
    rgba(232,168,48,0.7)  50%,
    rgba(200,145,42,0.35) 80%,
    transparent 100%
  );
}

/* Text overlay */
.kingdom-content {
  position: absolute;
  bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 5rem 3rem 4.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.kingdom-meta {}

.kingdom-eyebrow {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,145,42,0.75);   /* amber, low opacity */
  margin-bottom: 1.2rem;
}

.kingdom-title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 300;
  line-height: 0.88;
  color: var(--cream);
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0;
  /* Depth shadow referencing amber tones */
  text-shadow:
    0 6px 48px rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.85),
    0 0 120px rgba(180,120,20,0.08);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.kingdom-title em {
  font-style: italic;
  color: rgba(232,200,140,0.9);  /* warm cream-gold */
}
.kingdom-reveal:hover .kingdom-title {
  transform: translateY(-4px);
}

.kingdom-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.85;
  color: var(--sand);
  max-width: 380px;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s 0.1s, transform 0.6s 0.1s cubic-bezier(0.16,1,0.3,1);
}
.kingdom-reveal:hover .kingdom-sub {
  opacity: 1; transform: translateY(0);
}

/* CTA arrow — right side */
.kingdom-enter {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.kingdom-enter-label {
  font-size: 0.58rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ash);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.kingdom-enter-arrow {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: italic;
  color: rgba(200,145,42,0.55);
  line-height: 1;
  transition: color 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.kingdom-reveal:hover .kingdom-enter-arrow {
  color: rgba(232,168,48,0.9);
  transform: translateX(6px);
}

/* Series numbering */
.kingdom-series {
  position: absolute;
  top: 3rem; left: 3rem; z-index: 4;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.kingdom-series-num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(200,145,42,0.08);   /* barely visible amber ghost */
  user-select: none;
  letter-spacing: -0.02em;
}
.kingdom-series-label {
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0.6;
}


/* ── Kingdom dedicated PAGE ── */
#page-kingdom { background: var(--ink); }

.kg-page-hero {
  position: relative;
  height: 100vh; min-height: 640px;
  overflow: hidden; display: flex;
  flex-direction: column; justify-content: flex-end;
}
.kg-page-img {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center 15%;
  filter: brightness(0.72) contrast(1.12) saturate(1.1);
  transform: scale(1.08);
  animation: heroBreath 20s ease-in-out infinite alternate;
}
.kg-page-fog {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(14,12,8,1)    0%,
      rgba(14,12,8,0.85) 22%,
      rgba(14,12,8,0.38) 50%,
      transparent        68%
    ),
    linear-gradient(to right,
      rgba(10,8,4,0.65) 0%,
      transparent 55%
    ),
    radial-gradient(ellipse 50% 55% at 50% 25%,
      rgba(160,100,20,0.14) 0%, transparent 70%
    );
}
.kg-page-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.kg-page-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    transparent, rgba(232,168,48,0.65) 35%,
    rgba(232,168,48,0.65) 65%, transparent
  );
}
.kg-page-content {
  position: relative; z-index: 4;
  padding: 0 3rem 5rem;
  text-align: center;
}
.kg-page-eyebrow {
  font-size: 0.6rem; letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,145,42,0.7);
  margin-bottom: 1.5rem; display: block;
  opacity: 0; animation: fadeUp 1s var(--ease-silk) 0.3s forwards;
}
.kg-page-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 300; line-height: 0.9;
  color: var(--cream); letter-spacing: -0.02em;
  margin-bottom: 2rem;
  text-shadow: 0 4px 48px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.85);
  opacity: 0; animation: fadeUp 1.2s var(--ease-silk) 0.5s forwards;
}
.kg-page-title em { font-style: italic; color: rgba(232,200,140,0.9); }
.kg-page-stmt {
  font-size: 0.82rem; font-weight: 300;
  letter-spacing: 0.08em; line-height: 1.9;
  color: var(--sand); max-width: 480px;
  text-align: center; margin: 0 auto;
  opacity: 0; animation: fadeUp 1s var(--ease-silk) 0.8s forwards;
}

/* Kingdom page works grid area — for future artworks */
.kg-works-section {
  padding: 7rem 3rem;
  border-top: 1px solid var(--chroma-line);
}
.kg-works-header {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 4rem;
}
.kg-works-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300; color: var(--pale);
}
.kg-works-count {
  font-size: 0.62rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ash);
}

/* Kingdom works grid — ready for artworks, shows placeholder state */
.kg-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--chroma-line);
}
.kg-work-slot {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--soot);
  overflow: hidden;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kg-work-slot-label {
  font-size: 0.55rem; letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(138,121,101,0.25);
  text-align: center;
  line-height: 2.2;
}
.kg-work-slot:hover .kg-work-slot-label { color: rgba(138,121,101,0.4); }

/* Coming soon state */
.kg-coming-soon {
  padding: 8rem 3rem;
  text-align: center;
  border-top: 1px solid var(--chroma-line);
  position: relative;
}
.kg-coming-soon::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(200,145,42,0.06), transparent
  );
  pointer-events: none;
}
.kg-cs-eyebrow {
  font-size: 0.58rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--ash);
  margin-bottom: 2rem; position: relative;
}
.kg-cs-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300; font-style: italic;
  color: var(--pale); max-width: 500px;
  margin: 0 auto 3rem; line-height: 1.45;
  position: relative;
}

/* ── Home collections grid: Kingdom featured card ── */
/* Kingdom card stands out — takes more vertical space */
.kingdom-home-card {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  cursor: none;
  grid-column: 1 / -1;   /* full width on home preview */
  aspect-ratio: 21/9;     /* wide cinematic ratio */
}
.kingdom-home-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 18%;
  filter: brightness(0.6) saturate(1.1);
  transition: transform 0.9s var(--ease-silk), filter 0.5s;
}
.kingdom-home-card:hover .kingdom-home-img {
  transform: scale(1.03);
  filter: brightness(0.75) saturate(1.15);
}
.kingdom-home-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(14,12,8,0.9) 0%,
    rgba(14,12,8,0.3) 35%,
    transparent 65%
  );
}
.kingdom-home-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2.5rem 3rem;
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
}
.kingdom-home-badge {
  font-size: 0.52rem; letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(200,145,42,0.7);
  display: block; margin-bottom: 0.8rem;
}
.kingdom-home-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300; line-height: 0.9;
  color: var(--cream);
}
.kingdom-home-title em {
  font-style: italic; color: rgba(232,200,140,0.9);
}
.kingdom-home-arrow {
  font-family: var(--font-serif);
  font-size: 1.8rem; font-style: italic;
  color: rgba(200,145,42,0.55);
  flex-shrink: 0;
  transition: color 0.4s, transform 0.5s var(--ease-silk);
}
.kingdom-home-card:hover .kingdom-home-arrow {
  color: rgba(232,168,48,0.9);
  transform: translateX(8px);
}

/* Responsive */
@media (max-width: 900px) {
  .kingdom-content { padding: 3rem 1.5rem 3.5rem; flex-direction: column; gap: 2rem; }
  .kingdom-enter { display: none; }
  .kingdom-series { top: 2rem; left: 1.5rem; }
  .kg-page-content { padding: 0 1.5rem 4rem; }
  .kg-works-section, .kg-coming-soon { padding: 5rem 1.5rem; }
  .kg-works-grid { grid-template-columns: repeat(2, 1fr); }
  .kingdom-home-content { padding: 1.5rem; flex-direction: column; gap: 1rem; }
  .kingdom-home-card { aspect-ratio: 4/3; }
}


/* ════════════════════════════════════════════════════════════
   KINGDOM COLLECTION — Expanded Works Layout
   Editorial sequence: Statement → Intimate → Centrepiece → Closing
   ════════════════════════════════════════════════════════════ */

/* ── Shared work block base ── */
.kg-work {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: none;
}
.kg-work-img {
  width: 100%;
  height: auto;            /* UNCROPPED: full artwork visible */
  display: block;
  object-fit: contain;
  filter: brightness(0.92) contrast(1.05) saturate(1.05);
  transition: filter 1.2s cubic-bezier(0.16,1,0.3,1);
}
.kg-work:hover .kg-work-img {
  filter: brightness(1.0) contrast(1.03) saturate(1.08);
}

/* Work label — bottom-aligned, minimal */
.kg-work-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3.5rem 2.5rem 2rem;
  background: linear-gradient(to top,
    rgba(10,8,6,0.88) 0%,
    rgba(10,8,6,0.35) 55%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1);
}
.kg-work:hover .kg-work-label { opacity: 1; }

.kg-work-label-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  display: block;
  margin-bottom: 0.4rem;
}
.kg-work-label-meta {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
}
.kg-work-label-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(200,145,42,0.2);
  line-height: 1;
}

/* ── Interlude text blocks — breathing space between works ── */
.kg-interlude {
  padding: 6rem 3rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: center;
  border-top: 1px solid rgba(180,140,60,0.1);
  border-bottom: 1px solid rgba(180,140,60,0.1);
}
.kg-interlude-index {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  color: rgba(200,145,42,0.06);
  line-height: 1;
  user-select: none;
}
.kg-interlude-body {}
.kg-interlude-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(200,145,42,0.55);
  display: block;
  margin-bottom: 1.5rem;
}
.kg-interlude-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--pale);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.kg-interlude-title em { font-style: italic; color: var(--cream); }
.kg-interlude-text {
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 2.1;
  color: var(--sand);
  max-width: 400px;
}

/* ─────────────────────────────────────────
   WORK 1: "The New Era Folks" — STATEMENT
   Full viewport width. Ultra-wide cinematic.
   Text overlay left, colourful masks right.
   ───────────────────────────────────────── */
.kg-w1 {
  border-top: 1px solid rgba(180,140,60,0.15);
}
.kg-w1 .kg-work-img {
  aspect-ratio: 4/5;      /* portrait — shows all 7 masks */
  background-position: center top;
  filter: brightness(0.78) contrast(1.1) saturate(1.12);
}

/* Full-bleed left+right split layout */
.kg-w1-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr; /* text narrower, image dominant */
  min-height: 85vh;
}
/* Reverse: image LEFT (wider) / text RIGHT (narrower) */
.kg-w1-layout.reverse {
  grid-template-columns: 1.25fr 0.75fr;
}
.kg-w1-layout.reverse .kg-w1-text-side { order: 2; }
.kg-w1-layout.reverse .kg-w1-img-side  { order: 1; }
.kg-w1-text-side {
  background: var(--soot);
  padding: 5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.kg-w1-text-side::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 100%,
    rgba(200,145,42,0.07), transparent 70%
  );
  pointer-events: none;
}
.kg-w1-img-side {
  position: relative;
  overflow: hidden;
}
.kg-w1-img-side .kg-work-img {
  width: 100%;
  height: auto;            /* UNCROPPED: full artwork */
  object-fit: contain;
}
.kg-w1-eyebrow {
  font-size: 0.56rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,145,42,0.6);
  display: block;
  margin-bottom: 2rem;
}
.kg-w1-num {
  font-family: var(--font-serif);
  font-size: clamp(6rem, 12vw, 11rem);
  font-weight: 300;
  line-height: 0.85;
  color: rgba(200,145,42,0.07);
  display: block;
  margin-bottom: -2rem;
  user-select: none;
}
.kg-w1-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--pale);
  line-height: 1.15;
  margin-bottom: 1.5rem;
  position: relative;
}
.kg-w1-title em { font-style: italic; color: var(--cream); }
.kg-w1-body {
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 2.1;
  color: var(--sand);
  max-width: 340px;
  margin-bottom: 2.5rem;
}
.kg-w1-meta {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
  border-top: 1px solid rgba(180,140,60,0.15);
  padding-top: 1.5rem;
}

/* ─────────────────────────────────────────
   WORK 2: 4 masks on textile — INTIMATE
   Asymmetric: image 60% + text column 40%
   ───────────────────────────────────────── */
.kg-w2-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  min-height: 75vh;
  border-top: 1px solid rgba(180,140,60,0.08);
}
.kg-w2-img-side {
  position: relative;
  overflow: hidden;
}
.kg-w2-img-side .kg-work-img {
  width: 100%;
  height: auto;            /* UNCROPPED: full artwork */
  object-fit: contain;
}
.kg-w2-text-side {
  background: var(--ember);
  padding: 5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.kg-w2-text-side::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 100% 0%,
    rgba(180,120,30,0.08), transparent 70%
  );
  pointer-events: none;
}

/* ─────────────────────────────────────────
   WORK 3: Crowned leather masks — CENTREPIECE
   Full-width immersive. The defining object.
   Text floats below the image.
   ───────────────────────────────────────── */
.kg-w3 {
  border-top: 1px solid rgba(180,140,60,0.12);
}
.kg-w3-img {
  width: 100%;
  height: auto;            /* UNCROPPED: natural proportions of the artwork */
  display: block;
  object-fit: contain;
  filter: brightness(0.92) contrast(1.05) saturate(1.05);
  transition: filter 1.4s cubic-bezier(0.16,1,0.3,1);
}
.kg-w3:hover .kg-w3-img {
  filter: brightness(1.0) contrast(1.03);
}
.kg-w3-caption {
  background: var(--soot);
  padding: 4rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  border-bottom: 1px solid rgba(180,140,60,0.1);
}
.kg-w3-cap-left {}
.kg-w3-cap-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ─────────────────────────────────────────
   WORK 4: Ceramic masks on slate — CLOSING
   Two-column editorial split.
   Dark, architectural. Closes the chapter.
   ───────────────────────────────────────── */
.kg-w4 {
  border-top: 1px solid rgba(180,140,60,0.1);
}
.kg-w4-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
.kg-w4-img-side {
  position: relative; overflow: hidden;
}
.kg-w4-img-side .kg-work-img {
  width: 100%;
  height: auto;            /* UNCROPPED: full artwork */
  object-fit: contain;
}
.kg-w4-text-side {
  background: var(--carbon);
  padding: 5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative; overflow: hidden;
}
.kg-w4-text-side::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 100% 100%,
    rgba(180,80,20,0.06), transparent 70%
  );
  pointer-events: none;
}

/* ── Closing artist statement ── */
.kg-series-close {
  padding: 9rem 3rem;
  text-align: center;
  border-top: 1px solid rgba(180,140,60,0.12);
  position: relative; overflow: hidden;
}
.kg-series-close::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 50%,
    rgba(200,145,42,0.06), transparent 70%
  );
  pointer-events: none;
}
.kg-close-roman {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300;
  color: rgba(200,145,42,0.18);
  display: block;
  margin-bottom: -2rem;
  user-select: none;
}
.kg-close-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--pale);
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  position: relative;
}
.kg-close-cite {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sand);
  display: block;
  margin-bottom: 3.5rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .kg-w1-layout, .kg-w2-layout, .kg-w4-layout {
    grid-template-columns: 1fr;
  }
  /* Reset reverse layout on mobile — single column, default stack order */
  .kg-w1-layout.reverse { grid-template-columns: 1fr; }
  .kg-w1-layout.reverse .kg-w1-img-side,
  .kg-w1-layout.reverse .kg-w1-text-side { order: 0; }
  .kg-w1-text-side, .kg-w2-text-side, .kg-w4-text-side {
    padding: 3rem 1.5rem;
    min-height: auto;
  }
  .kg-w1-img-side, .kg-w2-img-side, .kg-w4-img-side {
    min-height: 60vw;
  }
  .kg-w1-img-side .kg-work-img,
  .kg-w2-img-side .kg-work-img,
  .kg-w4-img-side .kg-work-img {
    aspect-ratio: 4/3;
    height: auto;
  }
  .kg-w3-img { aspect-ratio: 4/3; }
  .kg-w3-caption { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .kg-interlude { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1.5rem; }
  .kg-interlude-index { display: none; }
  .kg-series-close { padding: 6rem 1.5rem; }
}


/* ════════════════════════════════════════════════════════════
   ARTWORK INTEGRITY RULE — Applied site-wide
   
   All artwork images on this site must be:
   - Fully visible (no cropping)
   - Natural proportions preserved
   - object-contain or height:auto (not object-cover for artworks)
   - Containers adapt to artwork, not vice versa
   
   This rule applies to:
     .work-img, .artwork-placeholder, .artwork-item
     .kg-work-img, .kg-w3-img
     .collection-row-bg (when real images are added)
   
   Exceptions (decorative/atmospheric, keep as-is):
     .art-bg, .hero-img-bg, .kg-page-img, .kingdom-img
     .collection-card-bg (home mood cards)
     .lb-teaser-bg, .campaign-bg
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   TERMITE COLLECTION — CSS
   Sister collection to Kingdom. Same architecture, distinct identity.
   
   Chromatic palette (termite_violet.jpg):
     Violet-grey:   #2a1f35   (stone ground)
     Hot magenta:   #c0266a / #e0408a  (vein highlight)
     Dark teal:     #1a3832   (mask flesh)
     Purple:        #4a3560   (ambient)
   ════════════════════════════════════════════════════════════ */

/* ── Termite featured reveal — Collections page ── */
/* Mirrors .kingdom-reveal exactly — new palette only */
.termite-reveal {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  overflow: hidden;
  cursor: none;
  display: block;
  text-decoration: none;
  color: inherit;
}
.termite-cover {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
}
.termite-img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  filter: brightness(0.72) contrast(1.12) saturate(1.15);
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1),
              filter 1.2s ease;
  will-change: transform;
}
.termite-reveal:hover .termite-img {
  transform: scale(1.08);
  filter: brightness(0.85) contrast(1.1) saturate(1.2);
}

/* Fog — violet/magenta instead of Kingdom's amber */
.termite-fog {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(8,4,10,1)      0%,
      rgba(10,5,14,0.9)   18%,
      rgba(18,8,28,0.52)  42%,
      rgba(14,6,20,0.12)  62%,
      transparent         76%
    ),
    linear-gradient(to right,
      rgba(8,4,10,0.75)    0%,
      rgba(14,6,20,0.38)   25%,
      rgba(10,4,16,0.08)   52%,
      transparent          68%
    ),
    radial-gradient(ellipse 52% 58% at 55% 30%,
      rgba(80,20,110,0.14) 0%,
      transparent 72%
    );
}
.termite-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* Magenta vein line — references the mask's vein pattern */
.termite-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(192,38,106,0.35) 20%,
    rgba(224,64,138,0.72)  50%,
    rgba(192,38,106,0.35) 80%,
    transparent 100%
  );
}

/* Text overlay — mirrors Kingdom layout */
.termite-content {
  position: absolute;
  bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 5rem 3rem 4.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}
.termite-eyebrow {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(192,38,106,0.7);   /* magenta — Termite signature */
  margin-bottom: 1.2rem;
}
.termite-title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 300;
  line-height: 0.88;
  color: var(--cream);
  letter-spacing: -0.01em;
  display: block;
  text-shadow:
    0 6px 48px rgba(0,0,0,0.75),
    0 2px 4px rgba(0,0,0,0.85),
    0 0 120px rgba(140,20,80,0.1);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.termite-title em { font-style: italic; color: rgba(220,170,220,0.9); }
.termite-reveal:hover .termite-title { transform: translateY(-4px); }
.termite-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.85;
  color: var(--sand);
  max-width: 380px;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s 0.1s, transform 0.6s 0.1s cubic-bezier(0.16,1,0.3,1);
}
.termite-reveal:hover .termite-sub { opacity: 1; transform: translateY(0); }
.termite-enter {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.termite-enter-label {
  font-size: 0.58rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--ash); writing-mode: vertical-rl; transform: rotate(180deg);
}
.termite-enter-arrow {
  font-family: var(--font-serif);
  font-size: 2rem; font-style: italic;
  color: rgba(192,38,106,0.5);
  line-height: 1;
  transition: color 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.termite-reveal:hover .termite-enter-arrow {
  color: rgba(224,64,138,0.9);
  transform: translateX(6px);
}
.termite-series {
  position: absolute;
  top: 3rem; left: 3rem; z-index: 4;
  display: flex; align-items: center; gap: 1.2rem;
}
.termite-series-num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300; line-height: 1;
  color: rgba(192,38,106,0.06);   /* magenta ghost */
  user-select: none; letter-spacing: -0.02em;
}
.termite-series-label {
  font-size: 0.55rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--ash); opacity: 0.6;
}

/* ── Termite home card ── */
.termite-home-card {
  position: relative;
  overflow: hidden;
  cursor: none;
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.termite-home-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 28%;
  filter: brightness(0.58) saturate(1.15);
  transition: transform 0.9s var(--ease-silk), filter 0.5s;
}
.termite-home-card:hover .termite-home-img {
  transform: scale(1.03);
  filter: brightness(0.75) saturate(1.2);
}
.termite-home-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,4,12,0.92) 0%, rgba(8,4,12,0.28) 38%, transparent 65%
  );
}
.termite-home-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2.5rem 3rem;
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
}
.termite-home-badge {
  font-size: 0.52rem; letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(192,38,106,0.7);
  display: block; margin-bottom: 0.8rem;
}
.termite-home-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300; line-height: 0.9;
  color: var(--cream);
}
.termite-home-title em { font-style: italic; color: rgba(220,170,220,0.9); }
.termite-home-arrow {
  font-family: var(--font-serif);
  font-size: 1.8rem; font-style: italic;
  color: rgba(192,38,106,0.5);
  flex-shrink: 0;
  transition: color 0.4s, transform 0.5s var(--ease-silk);
}
.termite-home-card:hover .termite-home-arrow {
  color: rgba(224,64,138,0.9);
  transform: translateX(8px);
}

/* ── Termite dedicated PAGE ── */
#page-termite { background: var(--ink); }

.tm-page-hero {
  position: relative;
  height: 100vh; min-height: 640px;
  overflow: hidden; display: flex;
  flex-direction: column; justify-content: flex-end;
}
.tm-page-img {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center 28%;
  filter: brightness(0.68) contrast(1.14) saturate(1.15);
  transform: scale(1.08);
  animation: heroBreath 20s ease-in-out infinite alternate;
}
.tm-page-fog {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(8,4,12,1)    0%,
      rgba(8,4,12,0.88) 22%,
      rgba(12,5,20,0.4) 48%,
      transparent       68%
    ),
    linear-gradient(to right,
      rgba(8,4,10,0.68) 0%, transparent 55%
    ),
    radial-gradient(ellipse 48% 55% at 50% 26%,
      rgba(100,15,80,0.14) 0%, transparent 70%
    );
}
.tm-page-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.tm-page-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    transparent, rgba(224,64,138,0.65) 35%,
    rgba(224,64,138,0.65) 65%, transparent
  );
}
.tm-page-content {
  position: relative; z-index: 4;
  padding: 0 3rem 5rem;
  text-align: center;
}
.tm-page-eyebrow {
  font-size: 0.6rem; letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(192,38,106,0.7);
  margin-bottom: 1.5rem; display: block;
  opacity: 0; animation: fadeUp 1s var(--ease-silk) 0.3s forwards;
}
.tm-page-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 300; line-height: 0.9;
  color: var(--cream); letter-spacing: -0.02em;
  margin-bottom: 2rem;
  text-shadow: 0 4px 48px rgba(0,0,0,0.75), 0 2px 4px rgba(0,0,0,0.85),
               0 0 120px rgba(140,20,80,0.1);
  opacity: 0; animation: fadeUp 1.2s var(--ease-silk) 0.5s forwards;
}
.tm-page-title em { font-style: italic; color: rgba(220,170,220,0.9); }
.tm-page-stmt {
  font-size: 0.82rem; font-weight: 300;
  letter-spacing: 0.08em; line-height: 1.9;
  color: var(--sand); max-width: 480px;
  text-align: center; margin: 0 auto;
  opacity: 0; animation: fadeUp 1s var(--ease-silk) 0.8s forwards;
}

/* Termite works — same kg-w* classes but re-mapped
   We reuse the Kingdom work CSS (kg-w1-layout etc.) — it's already defined.
   Only need distinct accent colors for interlude/close. */
.tm-interlude-kicker {
  font-size: 0.58rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: rgba(192,38,106,0.55);
  display: block; margin-bottom: 2rem;
}
.tm-series-close {
  padding: 9rem 3rem; text-align: center;
  border-top: 1px solid rgba(192,38,106,0.12);
  position: relative; overflow: hidden;
}
.tm-series-close::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 50%,
    rgba(140,20,80,0.07), transparent 70%
  );
  pointer-events: none;
}
.tm-close-roman {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300;
  color: rgba(192,38,106,0.18);
  display: block; margin-bottom: -2rem;
  user-select: none;
}
.tm-close-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 300; font-style: italic;
  color: var(--pale); line-height: 1.5;
  max-width: 620px; margin: 0 auto 2.5rem;
  position: relative;
}
.tm-close-cite {
  font-size: 0.6rem; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--sand);
  display: block; margin-bottom: 3.5rem;
}

/* ── Termite work img — UNCROPPED rule ── */
.tm-work-img {
  width: 100%;
  height: auto;            /* UNCROPPED: natural proportions */
  display: block;
  object-fit: contain;
  filter: brightness(0.92) contrast(1.05) saturate(1.05);
  transition: filter 1.2s cubic-bezier(0.16,1,0.3,1);
}
.tm-work-img:hover { filter: brightness(1.0) contrast(1.03); }

/* Responsive */
@media (max-width: 900px) {
  .termite-content { padding: 3rem 1.5rem 3.5rem; flex-direction: column; gap: 2rem; }
  .termite-enter { display: none; }
  .termite-series { top: 2rem; left: 1.5rem; }
  .tm-page-content { padding: 0 1.5rem 4rem; }
  .tm-series-close { padding: 6rem 1.5rem; }
  .termite-home-content { padding: 1.5rem; flex-direction: column; gap: 1rem; }
  .termite-home-card { aspect-ratio: 4/3; }
}


/* ════════════════════════════════════════════════════════════
   TERMITE WORKS — expanded layout CSS
   ════════════════════════════════════════════════════════════ */

/* ── Shared uncropped artwork image rule for Termite ── */
.tm-artwork-img {
  width: 100%;
  height: auto;              /* UNCROPPED: natural proportions preserved */
  display: block;
  object-fit: contain;
  filter: brightness(0.92) contrast(1.06) saturate(1.05);
  transition: filter 1.2s cubic-bezier(0.16,1,0.3,1);
}
.tm-artwork-img:hover {
  filter: brightness(1.0) contrast(1.03) saturate(1.08);
}

/* ── Single centred work (for INTIMATE/STATEMENT single-image blocks) ── */
.tm-solo-block {
  padding: 5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid rgba(192,38,106,0.1);
  background: var(--soot);
}
.tm-solo-img-wrap {
  width: 100%;
  max-width: 620px;          /* limits portrait works — generous breathing room */
  background: var(--ember);
}
.tm-solo-caption {
  width: 100%;
  max-width: 620px;
  padding: 2rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(192,38,106,0.1);
  margin-top: 0.5rem;
}
.tm-solo-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--pale);
}
.tm-solo-meta {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ── Wide atmospheric block ── */
.tm-wide-block {
  border-top: 1px solid rgba(192,38,106,0.08);
  background: var(--carbon);
  padding: 4rem 3rem;
}
.tm-wide-img-wrap {
  width: 100%;
  background: var(--ember);
}
.tm-wide-caption {
  padding: 2rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  border-top: 1px solid rgba(192,38,106,0.1);
  margin-top: 0.5rem;
}

/* ── Centrepiece full treatment ── */
.tm-centrepiece {
  border-top: 1px solid rgba(192,38,106,0.14);
  background: var(--deep);
}
.tm-centrepiece-img-wrap {
  width: 100%;
  background: var(--deep);
  padding: 3rem;
  display: flex;
  justify-content: center;
}
.tm-centrepiece-img-wrap .tm-artwork-img {
  max-width: 780px;          /* generous but bounded for very wide works */
  filter: brightness(0.88) contrast(1.1) saturate(1.1);
}
.tm-centrepiece-caption {
  padding: 3.5rem 3rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  border-top: 1px solid rgba(192,38,106,0.12);
  background: var(--soot);
}

/* ── Termite interlude — magenta accent ── */
.tm-interlude {
  padding: 6rem 3rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: center;
  border-top: 1px solid rgba(192,38,106,0.08);
  border-bottom: 1px solid rgba(192,38,106,0.08);
}
.tm-interlude-index {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  color: rgba(192,38,106,0.05);
  line-height: 1;
  user-select: none;
}
.tm-interlude-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--pale);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.tm-interlude-title em { font-style: italic; color: var(--cream); }
.tm-interlude-text {
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 2.1;
  color: var(--sand);
  max-width: 400px;
}

/* ── Works counter ── */
.tm-works-count-bar {
  padding: 2.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(192,38,106,0.1);
}
.tm-works-count-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--pale);
}
.tm-works-count-num {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
}

@media (max-width: 900px) {
  .tm-wide-caption { grid-template-columns: 1fr; gap: 1.5rem; }
  .tm-centrepiece-caption { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 3rem; }
  .tm-centrepiece-img-wrap { padding: 1.5rem; }
  .tm-solo-block { padding: 3rem 1.5rem; }
  .tm-wide-block { padding: 3rem 1.5rem; }
  .tm-interlude { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1.5rem; }
  .tm-interlude-index { display: none; }
}


/* ════════════════════════════════════════════════════════════
   HOME — BENTO COLLECTIONS SHOWCASE
   Two featured collections: Termite (large, left) + Kingdom (right)
   Below: three placeholder series as compact editorial tiles
   
   Grid anatomy (desktop):
     ┌─────────────────┬──────────┐
     │                 │ Kingdom  │
     │    Termite      │          │
     │    (tall)       ├──────────┤
     │                 │ Series   │
     │                 │ tiles    │
     └─────────────────┴──────────┘
   ════════════════════════════════════════════════════════════ */

.bento-section {
  padding: 7rem 3rem 8rem;
}

.bento-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3.5rem;
}

.bento-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--sand);
}

.bento-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--cream);
  margin-top: 0.5rem;
}

.bento-view-all {
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--pale);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,201,184,0.4);
  padding-bottom: 0.2rem;
  transition: color 0.3s, border-color 0.3s;
}
.bento-view-all:hover {
  color: var(--cream);
  border-color: var(--cream);
}

/* ── Bento grid ── */
/* ══ HOME BENTO — 4-collection editorial grid ══
   Layout:
     col 1 (1.1fr) | col 2 (1fr) | col 3 (1fr)
     ─────────────────────────────────────────
     Termite (c1, r1-2, tall portrait)
                     Kingdom (c2, r1)   Uniques (c3, r1)
                     Supremacies (c2-3, r2, landscape)
*/
.bento-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: 52vh 38vh;
  gap: 3px;
  background: rgba(30,24,18,0.6);
}

/* ── Featured collection tile ── */
.bento-tile {
  position: relative;
  overflow: hidden;
  cursor: none;
  text-decoration: none;
  color: inherit;
  background: var(--soot);
  display: block;
}

/* Termite — tall left column, spans both rows
   Image: termite violet.jpg 615×928 = 0.663 (portrait ~2/3) */
.bento-tile-termite {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Kingdom — center top
   Image: output_xo09a9.png 840×768 = 1.094 (slightly landscape) */
.bento-tile-kingdom {
  grid-column: 2;
  grid-row: 1;
}

/* Uniques — right top
   Image: ensemble.png 1024×1024 = 1:1 */
.bento-tile-uq {
  grid-column: 3;
  grid-row: 1;
}

/* Supremacies — spans cols 2-3, row 2 (landscape banner)
   Image: supremacies cover.png 1536×1024 = 3:2 */
.bento-tile-sp {
  grid-column: 2 / 4;
  grid-row: 2;
}

/* Series strip — bottom right */
.bento-series-strip {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  background: rgba(30,24,18,0.6);
}

/* ── Tile image layer ── */
.bento-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.72) contrast(1.08) saturate(1.05);
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1),
              filter 0.8s ease;
  will-change: transform, filter;
}
.bento-tile:hover .bento-img {
  transform: scale(1.07);
  filter: brightness(0.85) contrast(1.05) saturate(1.1);
}

/* ── Tile fog ── */
.bento-fog {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(8,6,4,0.95) 0%,
      rgba(8,6,4,0.6)  22%,
      rgba(8,6,4,0.12) 50%,
      transparent      70%
    ),
    linear-gradient(to right,
      rgba(8,6,4,0.5) 0%,
      transparent 50%
    );
  transition: opacity 0.6s ease;
}
.bento-tile:hover .bento-fog {
  opacity: 0.8;
}

/* ── Tile label ── */
.bento-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.5rem 2rem 2rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.bento-label-text {}

.bento-label-tag {
  font-size: 0.72rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,200,180,0.5);
  display: block;
  margin-bottom: 0.6rem;
  transition: color 0.4s;
}
.bento-tile:hover .bento-label-tag { color: rgba(200,200,180,0.75); }

.bento-label-name {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--cream);
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.bento-tile:hover .bento-label-name { transform: translateY(-3px); }

.bento-label-name em {
  font-style: italic;
  color: rgba(220,200,200,0.9);
}

.bento-label-arrow {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: rgba(180,160,140,0.35);
  line-height: 1;
  transition: color 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
  padding-bottom: 0.2rem;
}
.bento-tile:hover .bento-label-arrow {
  color: rgba(220,200,180,0.8);
  transform: translateX(5px);
}

/* Termite — magenta accent */
.bento-tile-termite .bento-label-tag { color: rgba(192,38,106,0.6); }
.bento-tile-termite:hover .bento-label-tag { color: rgba(224,64,138,0.85); }
.bento-tile-termite .bento-label-arrow { color: rgba(192,38,106,0.3); }
.bento-tile-termite:hover .bento-label-arrow { color: rgba(224,64,138,0.75); }

/* Kingdom — amber accent */
.bento-tile-kingdom .bento-label-tag { color: rgba(200,145,42,0.6); }
.bento-tile-kingdom:hover .bento-label-tag { color: rgba(232,168,48,0.85); }
.bento-tile-kingdom .bento-label-arrow { color: rgba(200,145,42,0.3); }
.bento-tile-kingdom:hover .bento-label-arrow { color: rgba(232,168,48,0.75); }

/* Kingdom — slightly shorter fog */
.bento-tile-kingdom .bento-fog {
  background:
    linear-gradient(to top,
      rgba(8,6,4,0.95) 0%,
      rgba(8,6,4,0.5)  20%,
      rgba(8,6,4,0.1)  45%,
      transparent      65%
    );
}
.bento-tile-kingdom .bento-label { padding: 2rem 1.8rem 1.8rem; }
.bento-tile-kingdom .bento-label-name { font-size: clamp(1.4rem, 2.2vw, 2rem); }

/* ── Series tiles — compact editorial ── */
.bento-series-tile {
  position: relative;
  overflow: hidden;
  cursor: none;
  text-decoration: none;
  color: inherit;
  background: var(--soot);
  aspect-ratio: 3/4;
  display: block;
}
.bento-series-tile .bento-img {
  filter: brightness(0.45) saturate(0.8);
}
.bento-series-tile:hover .bento-img {
  filter: brightness(0.62) saturate(1.0);
  transform: scale(1.06);
}
.bento-series-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.2rem 1.2rem;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(8,6,4,0.9) 0%, rgba(8,6,4,0.4) 55%, transparent 100%
  );
}
.bento-series-num {
  font-size: 0.45rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ash);
  display: block;
  margin-bottom: 0.4rem;
}
.bento-series-name {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--pale);
  display: block;
  line-height: 1.2;
}
.bento-series-name em { font-style: italic; }
.bento-series-tile:hover .bento-series-name { color: var(--cream); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .bento-section { padding: 5rem 1.5rem 6rem; }
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento-tile-termite {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 615/928;
  }
  .bento-tile-kingdom {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: 840/768;
  }
  .bento-tile-uq {
    grid-column: 1;
    grid-row: 3;
    aspect-ratio: 1/1;
  }
  .bento-tile-sp {
    grid-column: 1;
    grid-row: 4;
  }
  .bento-series-strip {
    grid-column: 1;
    grid-row: 5;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .bento-series-tile { aspect-ratio: 1/1; }
  .bento-header { flex-direction: column; gap: 1rem; }
  .bento-view-all { align-self: flex-start; }
}


/* ════════════════════════════════════════════════════════════
   SUPREMACIES COLLECTION — CSS
   Third sister collection alongside Kingdom and Termite.
   
   Chromatic palette (supremacies_cover.png):
     Yellow:      #E8B820 / #C8980A   (ceremony, identity)
     Blue:        #1A4AD4 / #2456E0   (authority, depth)
     Red:         #C42020 / #E03030   (power, presence)
     Burlap:      #6A4A20             (earth, material)
     Smoke:       #2A2A30             (atmosphere)
   ════════════════════════════════════════════════════════════ */

/* ── Supremacies featured reveal — Collections page ── */
.sp-reveal {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  overflow: hidden;
  cursor: none;
  display: block;
  text-decoration: none;
  color: inherit;
}
.sp-cover {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
}
.sp-img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  filter: brightness(0.7) contrast(1.1) saturate(1.1);
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1),
              filter 1.2s ease;
  will-change: transform;
}
.sp-reveal:hover .sp-img {
  transform: scale(1.08);
  filter: brightness(0.85) contrast(1.08) saturate(1.15);
}

/* Fog — dark smoke atmospheric, references the background */
.sp-fog {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(8,6,6,1)      0%,
      rgba(8,6,6,0.88)   18%,
      rgba(10,8,8,0.48)  42%,
      rgba(8,6,6,0.1)    62%,
      transparent        76%
    ),
    linear-gradient(to right,
      rgba(8,6,6,0.72)    0%,
      rgba(10,8,8,0.3)    30%,
      rgba(8,6,6,0.05)    55%,
      transparent         70%
    ),
    /* Subtle three-colour radial echo from the masks */
    radial-gradient(ellipse 70% 60% at 50% 40%,
      rgba(30,20,10,0.15) 0%,
      transparent          72%
    );
}
.sp-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* Three-colour seam — the yellow/blue/red primaries */
.sp-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    rgba(232,184,32,0.7)  0%,
    rgba(232,184,32,0.4)  22%,
    rgba(26,74,212,0.6)   35%,
    rgba(26,74,212,0.7)   50%,
    rgba(196,32,32,0.6)   65%,
    rgba(224,48,48,0.8)   78%,
    rgba(196,32,32,0.5)   100%
  );
}

/* Text overlay */
.sp-content {
  position: absolute;
  bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 5rem 3rem 4.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}
.sp-eyebrow {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(232,184,32,0.7);  /* yellow — first mask colour */
  margin-bottom: 1.2rem;
}
.sp-title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 300;
  line-height: 0.88;
  color: var(--cream);
  letter-spacing: -0.01em;
  display: block;
  text-shadow:
    0 6px 48px rgba(0,0,0,0.8),
    0 2px 4px rgba(0,0,0,0.9),
    0 0 120px rgba(196,32,32,0.1);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.sp-title em { font-style: italic; color: rgba(240,220,180,0.9); }
.sp-reveal:hover .sp-title { transform: translateY(-4px); }
.sp-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.85;
  color: var(--sand);
  max-width: 380px;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s 0.1s, transform 0.6s 0.1s cubic-bezier(0.16,1,0.3,1);
}
.sp-reveal:hover .sp-sub { opacity: 1; transform: translateY(0); }
.sp-enter {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.sp-enter-label {
  font-size: 0.58rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--ash); writing-mode: vertical-rl; transform: rotate(180deg);
}
.sp-enter-arrow {
  font-family: var(--font-serif);
  font-size: 2rem; font-style: italic;
  color: rgba(196,32,32,0.45);
  line-height: 1;
  transition: color 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.sp-reveal:hover .sp-enter-arrow {
  color: rgba(224,48,48,0.9);
  transform: translateX(6px);
}
.sp-series {
  position: absolute;
  top: 3rem; left: 3rem; z-index: 4;
  display: flex; align-items: center; gap: 1.2rem;
}
.sp-series-num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300; line-height: 1;
  color: rgba(26,74,212,0.07);  /* blue ghost numeral */
  user-select: none; letter-spacing: -0.02em;
}
.sp-series-label {
  font-size: 0.55rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--ash); opacity: 0.6;
}

/* ══ UNIQUES COLLECTION — cover tile (collections page) ══
   Mirrors sp-reveal / kingdom-reveal structure.
   Palette: warm amber-orange (200,120,48) */
.uq-reveal {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  overflow: hidden;
  cursor: none;
  display: block;
  text-decoration: none;
  color: inherit;
}
.uq-cover {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
}
.uq-cover-img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  filter: brightness(0.72) contrast(1.1) saturate(1.05);
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1), filter 1.2s ease;
  will-change: transform;
}
.uq-reveal:hover .uq-cover-img {
  transform: scale(1.08);
  filter: brightness(0.85) contrast(1.08) saturate(1.1);
}
.uq-cover-fog {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(10,6,2,1)    0%,
      rgba(10,6,2,0.88) 18%,
      rgba(14,8,2,0.5)  42%,
      rgba(10,6,2,0.1)  62%,
      transparent       76%
    ),
    linear-gradient(to right,
      rgba(10,6,2,0.6) 0%, rgba(10,6,2,0.12) 35%, transparent 58%
    ),
    radial-gradient(ellipse 55% 60% at 50% 38%,
      rgba(200,120,48,0.1) 0%, transparent 72%
    );
}
.uq-cover-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.uq-cover-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(200,120,48,0.4) 20%,
    rgba(232,144,64,0.75) 50%,
    rgba(200,120,48,0.4) 80%,
    transparent 100%
  );
}
.uq-cover-series {
  position: absolute; top: 3rem; left: 3rem; z-index: 4;
  display: flex; align-items: center; gap: 1.2rem;
}
.uq-cover-series-num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300; line-height: 1;
  color: rgba(200,120,48,0.07);
  user-select: none; letter-spacing: -0.02em;
}
.uq-cover-series-label {
  font-size: 0.55rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--ash); opacity: 0.6;
}
.uq-cover-content {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 5rem 3rem 4.5rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;
}
.uq-cover-eyebrow {
  display: block;
  font-size: 0.58rem; letter-spacing: 0.55em; text-transform: uppercase;
  color: rgba(200,120,48,0.8);
  margin-bottom: 1.2rem;
}
.uq-cover-title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 300; line-height: 0.88;
  color: var(--cream); letter-spacing: -0.01em; display: block;
  text-shadow: 0 6px 48px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.85);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.uq-cover-title em { font-style: italic; color: rgba(232,184,120,0.9); }
.uq-reveal:hover .uq-cover-title { transform: translateY(-4px); }
.uq-cover-sub {
  display: block;
  font-size: 0.78rem; font-weight: 300; letter-spacing: 0.1em; line-height: 1.85;
  color: var(--sand); max-width: 380px; margin-top: 1.5rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s 0.1s, transform 0.6s 0.1s cubic-bezier(0.16,1,0.3,1);
}
.uq-reveal:hover .uq-cover-sub { opacity: 1; transform: translateY(0); }
.uq-cover-enter {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 1rem; padding-bottom: 0.5rem;
}
.uq-cover-enter-label {
  font-size: 0.58rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--ash); writing-mode: vertical-rl; transform: rotate(180deg);
}
.uq-cover-enter-arrow {
  font-family: var(--font-serif); font-size: 2rem; font-style: italic;
  color: rgba(200,120,48,0.5); line-height: 1;
  transition: color 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.uq-reveal:hover .uq-cover-enter-arrow { color: rgba(232,144,64,0.95); transform: translateX(6px); }

@media (max-width: 900px) {
  .uq-cover-content { padding: 3rem 1.5rem 3.5rem; flex-direction: column; gap: 2rem; }
  .uq-cover-enter { display: none; }
  .uq-cover-series { top: 2rem; left: 1.5rem; }
}

/* ── Supremacies bento label colors ── */
.bento-tile-sp .bento-label-tag  { color: rgba(196,32,32,0.65); }
.bento-tile-sp:hover .bento-label-tag { color: rgba(224,48,48,0.9); }
.bento-tile-sp .bento-label-arrow { color: rgba(196,32,32,0.3); }
.bento-tile-sp:hover .bento-label-arrow { color: rgba(224,48,48,0.85); }

/* ── Supremacies dedicated PAGE ── */
#page-supremacies { background: var(--ink); }

.sp-page-hero {
  position: relative;
  height: 100vh; min-height: 640px;
  overflow: hidden; display: flex;
  flex-direction: column; justify-content: flex-end;
}
.sp-page-img {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center 42%;
  filter: brightness(0.68) contrast(1.1) saturate(1.1);
  transform: scale(1.08);
  animation: heroBreath 20s ease-in-out infinite alternate;
}
.sp-page-fog {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(8,6,6,1)    0%,
      rgba(8,6,6,0.88) 22%,
      rgba(10,8,8,0.4) 48%,
      transparent      68%
    ),
    linear-gradient(to right,
      rgba(8,6,6,0.65) 0%, transparent 55%
    ),
    radial-gradient(ellipse 70% 55% at 50% 42%,
      rgba(26,20,10,0.15) 0%, transparent 70%
    );
}
.sp-page-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.sp-page-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right,
    rgba(232,184,32,0.5) 0%,
    rgba(26,74,212,0.6) 33%,
    rgba(196,32,32,0.7) 66%,
    rgba(196,32,32,0.5) 100%
  );
}
.sp-page-content {
  position: relative; z-index: 4;
  padding: 0 3rem 5rem;
  text-align: center;
}
.sp-page-eyebrow {
  font-size: 0.6rem; letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(232,184,32,0.7);
  margin-bottom: 1.5rem; display: block;
  opacity: 0; animation: fadeUp 1s var(--ease-silk) 0.3s forwards;
}
.sp-page-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 300; line-height: 0.9;
  color: var(--cream); letter-spacing: -0.02em;
  margin-bottom: 2rem;
  text-shadow: 0 4px 48px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.9);
  opacity: 0; animation: fadeUp 1.2s var(--ease-silk) 0.5s forwards;
}
.sp-page-title em { font-style: italic; color: rgba(240,220,180,0.9); }
.sp-page-stmt {
  font-size: 0.82rem; font-weight: 300;
  letter-spacing: 0.08em; line-height: 1.9;
  color: var(--sand); max-width: 480px;
  text-align: center; margin: 0 auto;
  opacity: 0; animation: fadeUp 1s var(--ease-silk) 0.8s forwards;
}

/* Supremacies works — reuses kg-w1/w3 layouts, distinct accent */
.sp-interlude-kicker {
  font-size: 0.58rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: rgba(196,32,32,0.55);
  display: block; margin-bottom: 2rem;
}
.sp-series-close {
  padding: 9rem 3rem; text-align: center;
  border-top: 1px solid rgba(196,32,32,0.12);
  position: relative; overflow: hidden;
}
.sp-series-close::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 50%,
    rgba(196,32,32,0.06), transparent 70%
  );
  pointer-events: none;
}
.sp-close-roman {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300;
  color: rgba(196,32,32,0.18);
  display: block; margin-bottom: -2rem;
  user-select: none;
}
.sp-close-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 300; font-style: italic;
  color: var(--pale); line-height: 1.5;
  max-width: 620px; margin: 0 auto 2.5rem;
  position: relative;
}
.sp-close-cite {
  font-size: 0.6rem; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--sand);
  display: block; margin-bottom: 3.5rem;
}

/* Responsive */
@media (max-width: 900px) {
  .sp-content { padding: 3rem 1.5rem 3.5rem; flex-direction: column; gap: 2rem; }
  .sp-enter { display: none; }
  .sp-series { top: 2rem; left: 1.5rem; }
  .sp-page-content { padding: 0 1.5rem 4rem; }
  .sp-series-close { padding: 6rem 1.5rem; }
  .bento-tile-sp { aspect-ratio: 3/2; }
}


/* ── Supremacies artwork image — UNCROPPED rule ── */
.sp-artwork-img {
  width: 100%;
  height: auto;            /* UNCROPPED: natural proportions preserved */
  display: block;
  object-fit: contain;
  filter: brightness(0.92) contrast(1.05) saturate(1.05);
  transition: filter 1.2s cubic-bezier(0.16,1,0.3,1);
}
.sp-artwork-img:hover { filter: brightness(1.0) contrast(1.03); }


/* ════════════════════════════════════════════════════════════
   UNIQUES COLLECTION — full page system
   Private viewing room. Alternating portrait gallery.
   ════════════════════════════════════════════════════════════ */
.uq-intro{padding:7rem 3rem 6rem;display:grid;grid-template-columns:1fr 1.55fr;gap:6rem;align-items:start;border-bottom:1px solid rgba(200,120,48,0.1);}
.uq-intro-ghost{font-family:var(--font-serif);font-size:clamp(5rem,11vw,9rem);font-weight:300;color:rgba(200,120,48,0.05);line-height:1;user-select:none;}
.uq-intro-kicker{font-size:0.55rem;letter-spacing:0.55em;text-transform:uppercase;color:rgba(200,120,48,0.6);display:block;margin-bottom:2rem;}
.uq-intro-pull{font-family:var(--font-serif);font-size:clamp(0.95rem,1.5vw,1.25rem);font-weight:300;font-style:italic;line-height:1.8;color:var(--pale);margin-bottom:2rem;}
.uq-intro-body{font-size:0.78rem;font-weight:300;letter-spacing:0.05em;line-height:2;color:var(--sand);max-width:440px;}
.uq-works{padding:0;}
/* vrai masques 888×1200 = 0.740 (portrait ~3/4) — image drives row height */
.uq-work{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(200,120,48,0.07);overflow:hidden;}
.uq-work:nth-child(even){direction:rtl;}
.uq-work:nth-child(even)>*{direction:ltr;}
.uq-img-side{position:relative;overflow:hidden;background:var(--deep);}
.uq-artwork{width:100%;height:auto;/* natural 888×1200 ratio */display:block;object-position:center top;filter:brightness(0.93) contrast(1.03);transition:transform 1.4s cubic-bezier(0.16,1,0.3,1),filter 1s ease;}
.uq-work:hover .uq-artwork{transform:scale(1.022);filter:brightness(0.98);}
.uq-img-side::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(200,120,48,0);transition:box-shadow 0.8s ease;pointer-events:none;}
.uq-work:hover .uq-img-side::after{box-shadow:inset 0 0 60px rgba(200,120,48,0.06);}
.uq-text-side{background:var(--soot);padding:5rem 4rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.uq-text-side::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 75% 55% at 8% 90%,rgba(200,120,48,0.05),transparent 70%);pointer-events:none;}
.uq-work-roman{font-family:var(--font-serif);font-size:clamp(4rem,9vw,7.5rem);font-weight:300;line-height:0.85;color:rgba(200,120,48,0.05);display:block;margin-bottom:-1.2rem;user-select:none;}
.uq-label{font-size:0.48rem;letter-spacing:0.55em;text-transform:uppercase;color:rgba(200,120,48,0.55);border:1px solid rgba(200,120,48,0.18);padding:0.28rem 0.75rem;margin-bottom:1.8rem;align-self:flex-start;display:inline-block;}
.uq-work-title{font-family:var(--font-serif);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:300;line-height:0.95;color:var(--cream);margin-bottom:2rem;}
.uq-work-line{font-size:0.82rem;font-weight:300;font-style:italic;line-height:1.9;color:var(--sand);max-width:300px;padding-left:1.1rem;border-left:1px solid rgba(200,120,48,0.2);margin-bottom:auto;}
.uq-work-meta{font-size:0.55rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--ash);padding-top:2rem;margin-top:2.5rem;border-top:1px solid rgba(200,120,48,0.1);}
.uq-work-reveal{opacity:0;transform:translateY(30px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.uq-work-reveal.is-visible{opacity:1;transform:none;}
.uq-breath{position:relative;height:48vh;min-height:260px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.uq-breath-bg{position:absolute;inset:0;background:radial-gradient(ellipse 65% 65% at 50% 50%,rgba(200,120,48,0.07) 0%,rgba(10,8,4,0.55) 45%,rgba(8,6,2,1) 100%);animation:uqPulse 14s ease-in-out infinite alternate;}
@keyframes uqPulse{from{opacity:0.65;transform:scale(1.0);}to{opacity:1.0;transform:scale(1.06);}}
.uq-breath-grain{position:absolute;inset:0;pointer-events:none;opacity:0.32;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");}
.uq-breath-vein{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1px;height:110px;background:linear-gradient(to bottom,transparent,rgba(200,120,48,0.28) 38%,rgba(200,120,48,0.28) 62%,transparent);}
.uq-breath-line-text{position:relative;z-index:2;font-family:var(--font-serif);font-size:clamp(0.9rem,1.8vw,1.3rem);font-weight:300;font-style:italic;color:rgba(240,225,185,0.25);text-align:center;max-width:480px;padding:0 3rem;}
.uq-close-strip{position:relative;background:var(--deep);display:flex;align-items:center;justify-content:center;padding:6rem 3rem;overflow:hidden;}
.uq-close-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(200,120,48,0.07),transparent 68%);pointer-events:none;}
.uq-close-img{width:100%;max-width:420px;height:auto;display:block;object-fit:contain;position:relative;z-index:2;filter:brightness(0.9) contrast(1.05);}
.uq-close-fog{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(8,6,2,0.5) 0%,transparent 16%,transparent 84%,rgba(8,6,2,0.65) 100%);}
.uq-close-caption{padding:4rem 3rem 5rem;text-align:center;background:var(--soot);border-top:1px solid rgba(200,120,48,0.1);}
.uq-close-caption-line{font-family:var(--font-serif);font-size:clamp(1.1rem,2.2vw,1.8rem);font-weight:300;font-style:italic;color:var(--pale);display:block;margin-bottom:0.9rem;}
.uq-close-caption-sub{font-size:0.55rem;letter-spacing:0.42em;text-transform:uppercase;color:var(--ash);}
/* bento tile label colors — layout defined in bento-grid section above */
.bento-tile-uq .bento-label-tag{color:rgba(200,120,48,0.65);}
.bento-tile-uq:hover .bento-label-tag{color:rgba(232,144,64,0.9);}
.bento-tile-uq .bento-label-arrow{color:rgba(200,120,48,0.3);}
.bento-tile-uq:hover .bento-label-arrow{color:rgba(232,144,64,0.85);}
.bento-tile-uq .bento-fog{background:linear-gradient(to top,rgba(10,6,2,0.97) 0%,rgba(10,6,2,0.82) 20%,rgba(14,8,2,0.32) 48%,transparent 68%),radial-gradient(ellipse 60% 55% at 0% 70%,rgba(180,100,20,0.12) 0%,transparent 70%);}
.bento-uq-micro{font-size:0.48rem;letter-spacing:0.38em;text-transform:uppercase;color:rgba(200,180,140,0.45);display:block;margin-top:0.55rem;line-height:1.6;max-width:220px;opacity:0;transform:translateY(4px);transition:opacity 0.5s 0.15s,transform 0.5s 0.15s cubic-bezier(0.16,1,0.3,1);}
.bento-tile-uq:hover .bento-uq-micro{opacity:1;transform:translateY(0);}
/* page */
#page-uniques{background:var(--ink);}
.uq-page-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;}
.uq-page-img{position:absolute;inset:-6%;background-size:cover;background-position:center 38%;filter:brightness(0.72) contrast(1.12) saturate(1.05);transform:scale(1.08);animation:heroBreath 20s ease-in-out infinite alternate;}
.uq-page-fog{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,2,1) 0%,rgba(10,6,2,0.88) 22%,rgba(14,8,2,0.42) 48%,transparent 68%),linear-gradient(to right,rgba(10,6,2,0.65) 0%,transparent 55%);}
.uq-page-grain{position:absolute;inset:0;pointer-events:none;opacity:0.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");}
.uq-page-line{position:absolute;bottom:0;left:0;right:0;height:1px;z-index:3;background:linear-gradient(to right,transparent,rgba(200,120,48,0.55) 35%,rgba(212,184,112,0.65) 50%,rgba(200,120,48,0.55) 65%,transparent);}
.uq-page-content{position:relative;z-index:4;padding:0 3rem 5rem;text-align:center;}
.uq-page-eyebrow{font-size:0.6rem;letter-spacing:0.55em;text-transform:uppercase;color:rgba(200,120,48,0.7);margin-bottom:1.5rem;display:block;opacity:0;animation:fadeUp 1s var(--ease-silk) 0.3s forwards;}
.uq-page-title{font-family:var(--font-serif);font-size:clamp(3rem,8vw,7rem);font-weight:300;line-height:0.9;color:var(--cream);letter-spacing:-0.02em;margin-bottom:2rem;text-shadow:0 4px 48px rgba(0,0,0,0.8),0 2px 4px rgba(0,0,0,0.9),0 0 120px rgba(180,100,20,0.1);opacity:0;animation:fadeUp 1.2s var(--ease-silk) 0.5s forwards;}
.uq-page-title em{font-style:italic;color:rgba(240,225,185,0.9);}
.uq-page-stmt{font-size:0.82rem;font-weight:300;letter-spacing:0.08em;line-height:1.9;color:var(--sand);max-width:480px;text-align:center;margin:0 auto;opacity:0;animation:fadeUp 1s var(--ease-silk) 0.8s forwards;}
.uq-series-close{padding:9rem 3rem;text-align:center;border-top:1px solid rgba(200,120,48,0.12);position:relative;overflow:hidden;}
.uq-series-close::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(200,120,48,0.06),transparent 70%);pointer-events:none;}
.uq-close-roman{font-family:var(--font-serif);font-size:clamp(5rem,12vw,10rem);font-weight:300;color:rgba(200,120,48,0.18);display:block;margin-bottom:-2rem;user-select:none;}
.uq-close-quote{font-family:var(--font-serif);font-size:clamp(1.4rem,3vw,2.5rem);font-weight:300;font-style:italic;color:var(--pale);line-height:1.5;max-width:620px;margin:0 auto 2.5rem;position:relative;}
.uq-close-cite{font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--sand);display:block;margin-bottom:3.5rem;}
@media(max-width:900px){
  .uq-intro{grid-template-columns:1fr;gap:2rem;padding:4rem 1.5rem;}
  .uq-intro-ghost{display:none;}
  .uq-work{grid-template-columns:1fr;min-height:auto;direction:ltr !important;}
  .uq-work>*{direction:ltr !important;}
  .uq-img-side{/* height driven by 888×1200 image at width:100% */}
  .uq-text-side{padding:3rem 1.5rem;}
  .uq-breath{height:30vh;}
  .uq-close-strip{padding:4rem 1.5rem;}
  .uq-close-img{max-width:88%;}
  .uq-close-caption{padding:3rem 1.5rem 4rem;}
  .bento-tile-uq{grid-column:1;grid-row:3;aspect-ratio:1/1;}
  .uq-page-content{padding:0 1.5rem 4rem;}
  .uq-series-close{padding:6rem 1.5rem;}
  .bento-uq-micro{display:none;}
}


/* ════════════════════════════════════════════════════════════
   SELECTED WORKS — institutional prestige layer
   
   NOT a collection. NOT a portfolio grid.
   A curatorial selection of 6 major exhibition works.
   
   Layout strategy:
     W1 gallerie  — Opening Masterwork   — full-width landscape
     W2 bustres   — Dialogue Panel       — split portrait, text dominant
     W3 panthere  — Monumental Statement — full-height portrait + chroma bleed
     W4 femme     — Centrepiece          — centred sovereign portrait
     W5 pensif    — Intimate Chamber     — contained landscape, muted
     W6 zombie    — Closing Masterwork   — diptych-aware full-width
   ════════════════════════════════════════════════════════════ */

/* ── page ── */
#page-selected { background: var(--ink); }

/* ── hero / entry ── */
.sw-entry {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 3rem 5rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sw-entry-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 15% 100%,
    rgba(140,122,90,0.1) 0%,
    transparent 65%);
  pointer-events: none;
}
.sw-entry-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.25; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.sw-entry-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.6);
  display: block;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease-silk) 0.3s forwards;
}
.sw-entry-title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--cream);
  letter-spacing: -0.02em;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-silk) 0.5s forwards;
  margin-bottom: 2.5rem;
}
.sw-entry-title em { font-style: italic; color: rgba(240,228,190,0.9); }
.sw-entry-stmt {
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 2;
  color: var(--sand);
  max-width: 480px;
  opacity: 0;
  animation: fadeUp 1s var(--ease-silk) 0.75s forwards;
}
.sw-entry-count {
  position: absolute;
  right: 3rem;
  bottom: 5rem;
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  color: rgba(200,168,84,0.05);
  letter-spacing: -0.02em;
  user-select: none;
  line-height: 1;
}

/* ── curatorial preface ── */
.sw-preface {
  padding: 6rem 3rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 6rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sw-preface-index {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 300;
  color: rgba(200,168,84,0.06);
  line-height: 1;
  user-select: none;
}
.sw-preface-kicker {
  font-size: 0.52rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.55);
  display: block;
  margin-bottom: 1.8rem;
}
.sw-preface-pull {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: var(--pale);
  margin-bottom: 1.8rem;
}
.sw-preface-body {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 2;
  color: var(--sand);
  max-width: 480px;
}

/* ════════════════════════════════════════════════════════════
   THE 6-WORK SEQUENCE
   Each work has its own block — deliberately different scale,
   layout, and emotional register. Not a uniform grid.
   ════════════════════════════════════════════════════════════ */
.sw-works { padding: 0; }

/* shared: every work block uses this reveal */
.sw-work-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
              transform 1s cubic-bezier(0.16,1,0.3,1);
}
.sw-work-reveal.sw-visible { opacity: 1; transform: none; }

/* shared: chroma fog overlay (per-work atmospheric color) */
.sw-chroma-field {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity 1s ease;
}

/* ── W1: La Galerie — Opening Masterwork ──
   Full width. Landscape. Dominant. The room.
   Image top, text below. Maximum impact opening.
   ─────────────────────────────────────────── */
.sw-w1 {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* gallerie.jpg 1120×928 = 1.207 (landscape) */
.sw-w1-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--deep);
}
.sw-w1-img {
  width: 100%;
  height: auto;          /* natural 1120×928 ratio, no black bars */
  display: block;
  filter: brightness(0.88) contrast(1.06) saturate(1.05);
  transition: transform 2s cubic-bezier(0.16,1,0.3,1), filter 1.5s ease;
}
.sw-w1:hover .sw-w1-img { transform: scale(1.012); filter: brightness(0.94); }
.sw-w1-fog {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8,6,2,0.0) 0%, rgba(8,6,2,0.0) 60%,
    rgba(8,6,2,0.85) 100%);
}
.sw-w1-caption {
  padding: 4rem 3rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: end;
}
.sw-w1-num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  color: rgba(200,168,84,0.06);
  line-height: 0.85;
  user-select: none;
}
.sw-work-label {
  font-size: 0.48rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.5);
  border: 1px solid rgba(200,168,84,0.15);
  padding: 0.28rem 0.75rem;
  margin-bottom: 1.5rem;
  display: inline-block;
}
.sw-work-role {
  font-size: 0.48rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(180,150,80,0.35);
  display: block;
  margin-bottom: 0.8rem;
}
.sw-work-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 0.95;
  color: var(--cream);
  margin-bottom: 1.8rem;
  letter-spacing: -0.01em;
}
.sw-work-line {
  font-size: 0.82rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.9;
  color: var(--sand);
  max-width: 380px;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(200,168,84,0.2);
  margin-bottom: 2.5rem;
}
.sw-work-meta {
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(200,168,84,0.08);
}
.sw-inquire {
  font-size: 0.5rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.4);
  cursor: none;
  border-bottom: 1px solid rgba(200,168,84,0.15);
  padding-bottom: 0.2rem;
  transition: color 0.4s, border-color 0.4s;
  display: inline-block;
  margin-top: 1.5rem;
}
.sw-inquire:hover { color: rgba(200,168,84,0.85); border-color: rgba(200,168,84,0.5); }

/* ── W2: Les Trois Bustes — Dialogue Panel ──
   Split: image left (portrait), text right.
   Intimate, close, ancestral. Narrower image.
   ─────────────────────────────────────────── */
/* 3bustres.jpg 864×1184 = 0.730 (portrait) */
.sw-w2 {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr; /* text left (narrow) / image right (dominant) */
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
}
.sw-w2-img-side {
  position: relative;
  overflow: hidden;
  background: var(--deep);
}
.sw-w2-img {
  width: 100%;
  height: auto;          /* natural 864×1184 ratio, image drives row height */
  display: block;
  filter: brightness(0.88) contrast(1.05);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1), filter 1s ease;
}
.sw-w2:hover .sw-w2-img { transform: scale(1.02); filter: brightness(0.94); }
.sw-w2-text-side {
  background: var(--soot);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sw-w2-text-side::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 100% 80%,
    rgba(180,80,30,0.07), transparent 68%);
  pointer-events: none;
}

/* ── W3: La Panthere — Monumental Statement ──
   Full height portrait. Left column image, right text.
   Image fills height. Warm terracotta chroma.
   ─────────────────────────────────────────── */
/* Vrai panthère.png 912×1152 = 0.792 (portrait) */
.sw-w3 {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr; /* image left (dominant) / text right (narrow) */
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
}
.sw-w3-img-side {
  position: relative;
  overflow: hidden;
  background: #1A1208;
}
.sw-w3-img {
  width: 100%;
  height: auto;          /* natural 912×1152 ratio, image drives row height */
  display: block;
  filter: brightness(0.9) contrast(1.06) saturate(1.08);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1), filter 1s ease;
}
.sw-w3:hover .sw-w3-img { transform: scale(1.018); filter: brightness(0.95); }
/* warm chroma bleed from the terracotta gallery walls */
.sw-w3-chroma {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 65% 65% at 50% 50%,
    rgba(180,110,20,0.1) 0%, transparent 72%);
}
.sw-w3-text-side {
  background: var(--soot);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sw-w3-text-side::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 0% 50%,
    rgba(180,110,20,0.06), transparent 70%);
  pointer-events: none;
}

/* ── W4: La Femme Totale — Centrepiece ──
   Centred. Portrait. Maximum breathing room.
   Dark field behind. The work floats.
   Polyphonic chroma (purple/magenta).
   ─────────────────────────────────────────── */
.sw-w4 {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: var(--deep);
  padding: 6rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sw-w4::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(140,50,120,0.1) 0%, transparent 72%),
    radial-gradient(ellipse 40% 30% at 30% 70%,
      rgba(80,30,100,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.sw-w4-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative; z-index: 2;
}
.sw-w4-img-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  z-index: 2;
}
.sw-w4-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;   /* UNCROPPED */
  filter: brightness(0.92) contrast(1.04) saturate(1.06);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1), filter 1s ease;
}
.sw-w4:hover .sw-w4-img { transform: scale(1.015); filter: brightness(0.97); }
.sw-w4-footer {
  margin-top: 4rem;
  text-align: center;
  position: relative; z-index: 2;
}
/* centrepiece title larger */
.sw-w4-header .sw-work-title {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  margin-bottom: 1.2rem;
}
.sw-w4-header .sw-work-line {
  max-width: 380px;
  margin: 0 auto 0;
  border-left: none;
  padding-left: 0;
  text-align: center;
  border-top: 1px solid rgba(140,50,120,0.2);
  border-bottom: 1px solid rgba(140,50,120,0.2);
  padding: 1.2rem 0;
}

/* ── W5: Le Pensif — Intimate Chamber ──
   Landscape. Contained. The thinker under glass.
   Narrower max-width. Left-aligned in dark field.
   ─────────────────────────────────────────── */
.sw-w5 {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: #0C0A06;
  padding: 6rem 3rem;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr; /* text left (narrow) / image right (dominant) */
  gap: 5rem;
  align-items: center;
}
.sw-w5::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 25% 50%,
    rgba(160,120,50,0.07) 0%, transparent 68%);
  pointer-events: none;
}
.sw-w5-img-wrap {
  position: relative;
  overflow: hidden;
  background: #0A0806;
}
.sw-w5-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;   /* UNCROPPED */
  filter: brightness(0.88) contrast(1.05);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1), filter 1s ease;
}
.sw-w5:hover .sw-w5-img { transform: scale(1.018); filter: brightness(0.94); }
.sw-w5-text { position: relative; z-index: 2; }

/* ── W6: Les Zombies — Closing Masterwork ──
   Full width. Square/diptych feel. The end.
   Dark dominates. Minimal text. Maximum gravity.
   ─────────────────────────────────────────── */
.sw-w6 {
  position: relative;
  background: #0A0A0C;
}
/* zombie.jpg 1024×1024 = 1:1 (square) */
.sw-w6-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.sw-w6-img {
  width: 100%;
  max-width: 900px;
  height: auto;          /* natural 1:1 ratio */
  display: block;
  margin: 0 auto;
  filter: brightness(0.82) contrast(1.1) saturate(0.88);
  transition: transform 2s cubic-bezier(0.16,1,0.3,1), filter 1.5s ease;
}
.sw-w6:hover .sw-w6-img { transform: scale(1.012); filter: brightness(0.9); }
.sw-w6-fog {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8,8,10,0.6) 0%, transparent 18%,
      transparent 80%, rgba(8,8,10,0.9) 100%),
    linear-gradient(to right, rgba(8,8,10,0.4) 0%, transparent 20%,
      transparent 80%, rgba(8,8,10,0.4) 100%);
}
.sw-w6-caption {
  padding: 4rem 3rem 6rem;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.sw-w6-num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  color: rgba(100,100,110,0.06);
  line-height: 0.85;
  user-select: none;
}

/* ── Atmospheric transition between W3 and W4 ── */
.sw-breath {
  position: relative;
  height: 30vh;
  min-height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-breath-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(140,122,90,0.06) 0%, rgba(8,6,2,0.5) 50%, rgba(8,6,2,1) 100%);
  animation: swPulse 16s ease-in-out infinite alternate;
}
@keyframes swPulse {
  from { opacity: 0.6; transform: scale(1.0); }
  to   { opacity: 1.0; transform: scale(1.04); }
}
.sw-breath-text {
  position: relative; z-index: 2;
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(240,228,190,0.2);
  text-align: center;
  max-width: 440px;
  padding: 0 3rem;
}

/* ── Series close ── */
.sw-close {
  padding: 8rem 3rem;
  text-align: center;
  border-top: 1px solid rgba(200,168,84,0.08);
  position: relative;
  overflow: hidden;
}
.sw-close::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 55% at 50% 50%,
    rgba(200,168,84,0.05), transparent 70%);
  pointer-events: none;
}
.sw-close-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  color: rgba(200,168,84,0.18);
  display: block;
  margin-bottom: -2rem;
  user-select: none;
}
.sw-close-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--pale);
  line-height: 1.55;
  max-width: 580px;
  margin: 0 auto 2rem;
  position: relative;
}
.sw-close-cite {
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pale);
  display: block;
  margin-bottom: 3.5rem;
}

/* ── HOME teaser — Selected Works strip ──
   Appears on Home between Works preview and CTA.
   Not a collection tile. A distinct prestige strip.
   ─────────────────────────────────────────── */
.sw-home-teaser {
  padding: 6rem 3rem;
  border-top: 1px solid rgba(200,168,84,0.1);
  border-bottom: 1px solid rgba(200,168,84,0.06);
  position: relative;
  overflow: hidden;
}
.sw-home-teaser::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(200,168,84,0.04), transparent 70%);
  pointer-events: none;
}
.sw-home-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  margin-bottom: 3.5rem;
}
.sw-home-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.85);
  display: block;
  margin-bottom: 0.8rem;
}
.sw-home-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 300;
  color: var(--cream);
}
.sw-home-link {
  font-size: 0.52rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.45);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,168,84,0.18);
  padding-bottom: 0.2rem;
  transition: color 0.35s, border-color 0.35s;
  cursor: none;
}
.sw-home-link:hover { color: var(--cream); border-color: var(--cream); }
/* The 3-work teaser strip (shows W1, W4, W6)
   Justified gallery: columns proportional to each image's actual ratio
   gallerie 1120×928=1.207 / femme 896×1152=0.778 / zombie 1024×1024=1.000
   → all tiles are mathematically the same height at any viewport width */
.sw-home-strip {
  display: grid;
  grid-template-columns: 1.207fr 0.778fr 1fr;
  gap: 3px;
  background: rgba(30,24,14,0.5);
}
.sw-home-tile {
  position: relative;
  overflow: hidden;
  cursor: none;
  text-decoration: none;
  color: inherit;
  background: var(--deep);
  display: block;
}
/* No per-tile aspect-ratio overrides — image drives height */
.sw-home-tile-img {
  width: 100%;
  height: auto;          /* image defines tile height at its natural ratio */
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.72) contrast(1.06);
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), filter 0.8s ease;
}
.sw-home-tile:hover .sw-home-tile-img {
  transform: scale(1.04);
  filter: brightness(0.85);
}
.sw-home-tile-fog {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,6,2,0.9) 0%, rgba(8,6,2,0.4) 30%, transparent 60%);
}
.sw-home-tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.8rem 1.6rem;
  z-index: 2;
}
.sw-home-tile-name {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 300;
  color: var(--cream);
  display: block;
  line-height: 1;
}
.sw-home-tile-name em { font-style: italic; }
.sw-home-tile-sub {
  font-size: 0.45rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(200,168,84,0.45);
  display: block;
  margin-top: 0.5rem;
}

/* nav link for Selected Works */
#nav-selected { /* no special treatment — inherits nav-links style */ }

/* ── responsive ── */
@media (max-width: 900px) {
  .sw-entry { padding: 0 1.5rem 4rem; min-height: 50vh; }
  .sw-entry-count { display: none; }
  .sw-preface { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1.5rem; }
  .sw-preface-index { display: none; }
  .sw-w1-caption { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .sw-w2 { grid-template-columns: 1fr; }
  .sw-w2-img-side { /* image 864×1184 drives height on mobile */ }
  .sw-w2-text-side { padding: 3rem 1.5rem; }
  .sw-w3 { grid-template-columns: 1fr; }
  .sw-w3-img-side { /* image 912×1152 drives height on mobile */ }
  .sw-w3-text-side { padding: 3rem 1.5rem; }
  .sw-w4 { padding: 4rem 1.5rem; }
  .sw-w4-img-wrap { max-width: 90%; }
  .sw-w5 { grid-template-columns: 1fr; padding: 4rem 1.5rem; gap: 3rem; }
  .sw-w6-caption { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .sw-close { padding: 5rem 1.5rem; }
  .sw-home-teaser { padding: 5rem 1.5rem; }
  .sw-home-strip { grid-template-columns: 1fr; }
  .sw-home-strip { grid-template-columns: 1fr; }
  .sw-home-tile { /* single column on mobile, image still drives height */ }
}