html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: #0A0A0A;
  color: #F4F1EA;
  font-family: Archivo, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  /* Locked until the loader (2.3s below) finishes, then released — see
     the loader's own comment for why this lock exists. Zero-duration,
     pure-delay animation: nothing to interpolate, it just flips
     overflow-y to auto the instant the delay ends, in lockstep with
     camLoaderOut's own 2.3s. */
  overflow-y: hidden;
  animation: camScrollUnlock 0s 2.3s forwards;
}
@keyframes camScrollUnlock {
  to { overflow-y: auto; }
}

a { color: inherit; text-decoration: none; }
a:hover { color: #E8863C; }

/* Explicit paint order for the top-level sections. Once a panel is pinned
   it becomes position:fixed, and a positioned element always paints above
   later static-flow content regardless of DOM order — z-index here forces
   each section to still cover the ones before it as it scrolls up. */
body > section { position: relative; }
body > section:nth-of-type(1) { z-index: 1; }
body > section:nth-of-type(2) { z-index: 2; }
body > section:nth-of-type(3) { z-index: 3; }
body > section:nth-of-type(4) { z-index: 4; }
body > section:nth-of-type(5) { z-index: 5; }
body > section:nth-of-type(6) { z-index: 6; }
body > section:nth-of-type(7) { z-index: 7; }
body > section:nth-of-type(8) { z-index: 8; }

/* Loader — lifts on pure CSS, never gated on JS */
#cam-loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: camLoaderOut 2.3s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  /* Fixed, full-viewport, above everything (z-index 120), opaque for the
     first ~1.4s (see camLoaderOut below) — this is what was producing the
     "first scroll freezes, then jumps" report. body's overflow-y is locked
     for these same 2.3s (see body, above) specifically because of this
     element: without that lock, an impatient swipe during the opaque hold
     still scrolls the real page underneath — just invisibly, since this
     div is covering it — and when the loader then slides away, the page
     is suddenly already scrolled, which reads as a stuck-then-jump. The
     lock stops that scroll from happening at all until the loader is
     actually gone, so there's nothing to reveal mid-scroll.
     pointer-events: none is a secondary precaution so this div can never
     swallow a click/tap as a target in its own right either. */
  pointer-events: none;
}
#cam-loader-mark {
  font-family: Archivo, sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.62em;
  color: #F4F1EA;
  opacity: 0;
  padding-left: 0.62em;
  animation: camMarkIn 2s ease forwards;
}
@keyframes camLoaderOut {
  0%, 62% { transform: translateY(0); }
  100% { transform: translateY(-100%); visibility: hidden; }
}
@keyframes camMarkIn {
  0% { opacity: 0; }
  30%, 52% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #cam-loader { display: none; }
  body { overflow-y: auto; animation: none; }
}

/* Custom cursor */
#cam-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #F4F1EA;
  opacity: 0;
}
#cam-cursor-label {
  position: absolute;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0A0A0A;
  opacity: 0;
}
@media (hover: none) {
  #cam-cursor { display: none !important; }
}

/* Header
   Nav/logo color adapts to whichever section currently sits behind the
   fixed header — .site-header gets an is-on-light class from JS (see
   the "Header contrast" block in assets/js/main.js), driven by
   data-header-theme="dark"/"light" attributes on every top-level
   section across every template. An earlier version used
   mix-blend-mode: difference to fake this with pure CSS; that had a
   real, confirmed bug — it rendered the nav completely invisible
   whenever the backdrop was a flat color close to the nav's own color,
   which describes most of this theme's own light #F4F1EA sections. This
   explicit, JS-driven version can't fail that way, since every section
   says outright which color it needs; a section that's missing the
   attribute just keeps whatever theme was last set rather than going
   invisible. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px clamp(20px, 5vw, 56px);
  color: #F4F1EA;
  transition: color 0.35s ease;
}
.site-header.is-on-light { color: #0A0A0A; }
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-logo-mark {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 30px);
  font-size: 10px;
  letter-spacing: 0.26em;
  font-weight: 300;
}

/* Hamburger — a plain three-bar button that morphs into an X. Buttons
   don't inherit color from the page by default (a browser UA-stylesheet
   quirk — they use a form-control default instead), so without the
   explicit `color: inherit` below, its spans' `background: currentColor`
   would always resolve to that default rather than following
   .site-header's light/dark state. */
.menu-btn {
  display: none;
  position: relative;
  width: 26px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-btn span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: top 0.3s cubic-bezier(0.76, 0, 0.24, 1), transform 0.3s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.25s ease, background-color 0.35s ease;
}
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: 7px; }
.menu-btn span:nth-child(3) { top: 14px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
.menu-btn--close span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-btn--close span:nth-child(2) { top: 7px; transform: rotate(-45deg); }

/* Mobile menu overlay — reuses the Doorways section's own language
   (numbered rooms, Instrument Serif, orange-on-hover) so it reads as
   part of the same house rather than a bolted-on nav pattern. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: #0A0A0A;
  color: #F4F1EA;
  padding: 26px clamp(20px, 5vw, 56px) clamp(28px, 5vh, 48px);
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  visibility: hidden;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
}
/* Closing removes .is-open, so the transform transitions straight back
   to the base translateY(-100%) — sliding up and out through the top,
   the same path it came in on. .is-closing only keeps visibility
   "visible" for that exit; without it, visibility would snap to hidden
   the instant .is-open is removed and cut the slide-up off mid-motion. */
.mobile-menu.is-closing {
  visibility: visible;
}
.mobile-menu-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-shrink: 0;
}
.mobile-menu-logo {
  font-family: Archivo, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
}
.mobile-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2px, 1vh, 10px);
}
.mobile-menu-row { overflow: hidden; }
.mobile-menu-link {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 4vw, 26px);
  padding: 8px 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(32px, 12vw, 60px);
  line-height: 1.1;
  color: #F4F1EA;
  text-transform: uppercase;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  color: #E8863C;
}
.mobile-menu-num {
  font-family: Archivo, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.4);
  min-width: 2.1em;
}
.mobile-menu-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 234, 0.14);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(244, 241, 234, 0.55);
}
body.menu-open { overflow: hidden; }
body.enquiry-open { overflow: hidden; }

@media (max-width: 700px) {
  .site-nav { display: none; }
  .menu-btn { display: block; }
}
@media (min-width: 701px) {
  .mobile-menu { display: none; }
}

/* Full-screen image panels */
.panel {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #0A0A0A;
}
#top.panel { min-height: 560px; }

/* The outer .panel never transforms — while pinned it stays fixed and
   exactly fills its slot, so the panel behind can only ever be fully
   covered or fully visible, never leak through at an edge. Only this
   inner layer shrinks/dims/rounds as the next panel covers it. */
.panel-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.panel-img {
  position: absolute;
  inset: -12% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.panel-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.1) 45%, rgba(10, 10, 10, 0.7) 100%);
}
.panel-gradient--hero {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.15) 40%, rgba(10, 10, 10, 0.78) 100%);
}
/* Scrubbed by the pin/stack recede animation in main.js. A plain opacity
   fade on a flat layer, not a CSS `filter` on the whole panel — filter
   can't stay compositor-only and forces a repaint every scroll frame,
   which on mobile is exactly the kind of main-thread cost that makes
   browsers abort momentum scrolling mid-gesture (the pinned section
   "gets stuck" until a fresh touch restarts it). Opacity is cheap. */
.panel-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.line-clip { overflow: hidden; }

.hero-text {
  position: absolute;
  left: clamp(20px, 5vw, 56px);
  right: clamp(20px, 5vw, 56px);
  bottom: clamp(48px, 11vh, 120px);
}
.hero-sub-clip { margin-top: clamp(18px, 3vh, 34px); }
.hero-heading {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.22em;
  font-weight: 400;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(52px, 11vw, 168px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: #F4F1EA;
}
.hero-sub {
  margin: 0;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.3em;
  font-weight: 300;
  color: rgba(244, 241, 234, 0.82);
  text-transform: uppercase;
}
.hero-scroll {
  position: absolute;
  right: clamp(20px, 5vw, 56px);
  bottom: clamp(48px, 11vh, 120px);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(244, 241, 234, 0.5);
  opacity: 0;
}

.panel-text {
  position: absolute;
  left: clamp(20px, 5vw, 56px);
  bottom: clamp(56px, 12vh, 128px);
  overflow: hidden;
}
.panel-heading {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.26em;
  font-weight: 400;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(40px, 7.6vw, 124px);
  line-height: 1;
  letter-spacing: -0.015em;
}
/* Word-by-word reveal: each word sits in its own clipping box so the
   word inside it can slide up from beneath without spilling into its
   neighbors — the same curtain technique as the hero line, per word. */
.word-clip {
  display: inline-block;
  overflow: hidden;
}
.panel-word {
  display: inline-block;
}

/* About / meaning */
.about {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(88px, 18vh, 200px) clamp(20px, 5vw, 56px);
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.about-col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 52px);
}
.kicker {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(10, 10, 10, 0.45);
}
.kicker--dark {
  color: rgba(244, 241, 234, 0.42);
  margin-bottom: clamp(32px, 6vh, 70px);
}
.about-heading {
  margin: 0;
  font-weight: 400;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(28px, 3.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.about-body {
  margin: 0;
  max-width: 46ch;
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.72);
  text-wrap: pretty;
}
.about-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.about-caption {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(10, 10, 10, 0.5);
}
.link-accent { color: #E8863C; }

/* Doorways */
.doorways {
  position: relative;
  background: #0A0A0A;
  padding: clamp(88px, 18vh, 200px) clamp(20px, 5vw, 56px);
}
.doorways-inner { max-width: 1500px; margin: 0 auto; }
.doorways-list { display: flex; flex-direction: column; }
.door-row {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 4vw, 60px);
  padding: clamp(18px, 2.6vh, 30px) 0;
  border-top: 1px solid rgba(244, 241, 234, 0.14);
  color: #F4F1EA;
}
.door-row--last { border-bottom: 1px solid rgba(244, 241, 234, 0.14); }
.door-num {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.4);
  min-width: 2.4em;
}
.door-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(28px, 4.4vw, 72px);
  line-height: 1.05;
}
.door-meta {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.4);
  text-align: right;
}
#cam-door-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: min(24vw, 320px);
  height: min(30vw, 400px);
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
}

/* Visit / footer */
.visit {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(88px, 18vh, 200px) clamp(20px, 5vw, 56px) clamp(36px, 6vh, 64px);
}
.visit-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 10vh, 120px);
}
.visit-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 64px);
}
.visit-top-text { display: flex; flex-direction: column; gap: 14px; }
.visit-heading {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.2em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.visit-meta {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(10, 10, 10, 0.55);
}
.visit-cta {
  align-self: flex-end;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #E8863C;
  border-bottom: 1px solid #E8863C;
  padding-bottom: 8px;
}
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.visit-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
}
.visit-form {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.25);
  padding-bottom: 10px;
}
.visit-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: Archivo, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #0A0A0A;
  padding: 0;
}
.visit-form button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: Archivo, sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(10, 10, 10, 0.6);
  padding: 0;
}
.visit-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(10, 10, 10, 0.42);
  padding-top: clamp(24px, 5vh, 60px);
  border-top: 1px solid rgba(10, 10, 10, 0.14);
}

/* Generic WordPress Page (page.twig) — any regular Page created in
   wp-admin that isn't the front page. Own section, not part of the
   panel/pin scroll system those templates use. */
.generic-page {
  min-height: 100vh;
  background: #F4F1EA;
  color: #0A0A0A;
  display: flex;
  justify-content: center;
  padding: clamp(120px, 20vh, 200px) clamp(20px, 5vw, 56px) clamp(60px, 10vh, 120px);
}
.generic-page-inner {
  width: 100%;
  max-width: 760px;
}
.generic-page-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.08;
  margin: 0 0 0.6em;
}
.generic-page-body {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.78);
}
.generic-page-body p { margin: 0 0 1.3em; }
.generic-page-body a { color: #E8863C; text-decoration: underline; }

/* ===================================================================
   Camraas Art — artist index, single artist page, artwork enquiry
   =================================================================== */

/* Artist index (/art/) */
.artist-index {
  min-height: 100vh;
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(120px, 20vh, 200px) clamp(20px, 5vw, 56px) clamp(80px, 12vh, 140px);
}
.artist-index-inner { max-width: 1500px; margin: 0 auto; }
.artist-index-title {
  margin: 0.5em 0 0.35em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.artist-index-intro {
  margin: 0 0 clamp(48px, 7vh, 90px);
  max-width: 46ch;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  color: rgba(10, 10, 10, 0.72);
}
.artist-index-empty {
  font-size: 14px;
  color: rgba(10, 10, 10, 0.55);
}
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 3.6vw, 48px);
}
.artist-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.artist-card-image {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.artist-card:hover .artist-card-image { transform: scale(1.03); }
.artist-card-text {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.artist-card-name {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
}
.artist-card-discipline {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(10, 10, 10, 0.5);
}

/* Single artist — hero */
.artist-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background: #0A0A0A;
  overflow: hidden;
}
.artist-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.artist-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.75) 100%);
}
.artist-hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(110px, 16vh, 160px) clamp(20px, 5vw, 56px) clamp(40px, 6vh, 64px);
  color: #F4F1EA;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.artist-back {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.7);
}
.artist-back:hover { color: #E8863C; }
.artist-name {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.artist-discipline {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.6);
}

/* Single artist — bio */
.artist-bio {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px);
}
.artist-bio-inner { max-width: 700px; margin: 0 auto; }
.artist-bio-body {
  margin-top: 20px;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(10, 10, 10, 0.78);
}
.artist-bio-body p { margin: 0 0 1.3em; }
.artist-bio-body p:last-child { margin-bottom: 0; }

/* Single artist — works galleries */
.artist-works {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px);
}
.artist-works--available { background: #0A0A0A; color: #F4F1EA; }
.artist-works-inner { max-width: 1500px; margin: 0 auto; }
.artist-works-inner .kicker { margin-bottom: clamp(32px, 5vh, 56px); }
.artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 3.6vw, 52px);
}
.artwork-card-image {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.artwork-card-info {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.artwork-card-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.2;
}
.artwork-card-meta {
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}
.artwork-enquire {
  align-self: flex-start;
  margin-top: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: Archivo, sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: #E8863C;
  padding: 0 0 3px;
  border-bottom: 1px solid #E8863C;
}
.artwork-enquire:hover { opacity: 0.75; }

/* Enquiry modal */
.enquiry-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.enquiry-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}
.enquiry-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
}
.enquiry-modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(32px, 5vw, 48px);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.enquiry-modal.is-open .enquiry-modal-panel { transform: translateY(0) scale(1); }
.enquiry-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: rgba(10, 10, 10, 0.5);
}
.enquiry-modal-close:hover { color: #0A0A0A; }
.enquiry-modal-title {
  margin: 0.4em 0 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.15;
}
.enquiry-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.enquiry-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(10, 10, 10, 0.5);
}
.enquiry-field input,
.enquiry-field textarea {
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.25);
  background: transparent;
  outline: none;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #0A0A0A;
  padding: 4px 0 8px;
  resize: vertical;
}
.enquiry-field input:focus,
.enquiry-field textarea:focus { border-color: #E8863C; }
.enquiry-submit {
  align-self: flex-start;
  margin-top: 4px;
  border: 1px solid #0A0A0A;
  background: transparent;
  cursor: pointer;
  font-family: Archivo, sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: #0A0A0A;
  padding: 12px 26px;
  transition: background 0.3s ease, color 0.3s ease;
}
.enquiry-submit:hover { background: #0A0A0A; color: #F4F1EA; }
.enquiry-submit:disabled { opacity: 0.5; cursor: default; }
.enquiry-status {
  margin: 0;
  font-size: 12px;
  min-height: 1.4em;
}
.enquiry-status.is-error { color: #b5442f; }
.enquiry-status.is-success { color: #2f7a4a; }

/* Art Tours — inline booking form (not a modal, so it reuses the
   .enquiry-field/.enquiry-submit/.enquiry-status look but lays out its
   own section rather than a floating panel). */
.tour-booking-section {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px);
}
.tour-booking-inner { max-width: 560px; margin: 0 auto; }
.tour-booking-heading {
  margin: 0.5em 0 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
}
.tour-booking-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.6);
}
.tour-booking-form { margin-top: 36px; }
.tour-booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
@media (max-width: 560px) {
  .tour-booking-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .artist-hero { min-height: 62vh; }
  .artist-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
}

/* ===================================================================
   Camraas Salons — editorial archive index + single salon page
   =================================================================== */

/* Salon index (/salons/) */
.salon-index {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(120px, 20vh, 200px) clamp(20px, 5vw, 56px) clamp(80px, 12vh, 140px);
}
.salon-index-inner { max-width: 1400px; margin: 0 auto; }
.salon-index-title {
  margin: 0.5em 0 0.35em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.salon-index-intro {
  margin: 0 0 clamp(56px, 9vh, 110px);
  max-width: 48ch;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  color: rgba(10, 10, 10, 0.72);
}
.salon-index-empty {
  font-size: 14px;
  color: rgba(10, 10, 10, 0.55);
}
.salon-list { display: flex; flex-direction: column; }
.salon-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vh, 76px) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.14);
  color: inherit;
  text-decoration: none;
}
.salon-list a.salon-row:last-child { border-bottom: 1px solid rgba(10, 10, 10, 0.14); }
.salon-row--reverse { grid-template-columns: 1fr 1.15fr; }
.salon-row--reverse .salon-row-image { order: 2; }
.salon-row--reverse .salon-row-text { order: 1; }
.salon-row-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.salon-row:hover .salon-row-image { transform: scale(1.02); }
.salon-row-text { display: flex; flex-direction: column; gap: 10px; }
.salon-row-meta {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(10, 10, 10, 0.5);
}
.salon-row-title {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.12;
}
.salon-row-participants {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(10, 10, 10, 0.55);
}
.salon-row-excerpt {
  margin: 6px 0 0;
  max-width: 46ch;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.72);
}

/* Single salon — hero */
.salon-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background: #0A0A0A;
  overflow: hidden;
}
.salon-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.salon-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.75) 100%);
}
.salon-hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(110px, 16vh, 160px) clamp(20px, 5vw, 56px) clamp(40px, 6vh, 64px);
  color: #F4F1EA;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.salon-back {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.7);
}
.salon-back:hover { color: #E8863C; }
.salon-title {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.salon-hero-meta {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(244, 241, 234, 0.6);
}

/* Single salon — participants + editorial body */
.salon-body-section {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px);
}
.salon-body-inner { max-width: 700px; margin: 0 auto; }
.salon-participants { margin-bottom: clamp(32px, 5vh, 56px); }
.salon-participants-names {
  margin-top: 10px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(18px, 1.8vw, 23px);
}
.salon-body {
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(10, 10, 10, 0.78);
}
.salon-body p { margin: 0 0 1.3em; }
.salon-body p:last-child { margin-bottom: 0; }

/* Single salon — pull-quote */
.salon-pullquote-section {
  background: #0A0A0A;
  color: #F4F1EA;
  padding: clamp(88px, 14vh, 160px) clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: center;
}
.salon-pullquote-inner { max-width: 900px; text-align: center; }
.salon-pullquote {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.salon-pullquote-attribution {
  margin-top: clamp(24px, 4vh, 40px);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(244, 241, 234, 0.55);
}

/* Single salon — selected images gallery */
.salon-gallery-section {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(64px, 10vh, 110px) clamp(20px, 5vw, 56px);
}
.salon-gallery-inner { max-width: 1400px; margin: 0 auto; }
.salon-gallery-inner .kicker { margin-bottom: clamp(32px, 5vh, 56px); }
.salon-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.salon-gallery-item { margin: 0; }
.salon-gallery-image {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.salon-gallery-item figcaption {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(10, 10, 10, 0.55);
}

@media (max-width: 780px) {
  .salon-hero { min-height: 62vh; }
  .salon-row,
  .salon-row--reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .salon-row--reverse .salon-row-image,
  .salon-row--reverse .salon-row-text { order: initial; }
}

/* ===================================================================
   Camraas Bespoke / Advisory / Beyond / Coming Soon — single "info"
   pages, shared structure and classes across all three plus the
   reusable Coming Soon placeholder.
   =================================================================== */

/* Hero */
.info-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background: #0A0A0A;
  overflow: hidden;
}
.info-hero-image {
  position: absolute;
  inset: -6% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.info-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.22) 0%, rgba(10, 10, 10, 0.2) 40%, rgba(10, 10, 10, 0.86) 100%);
}
.info-hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  padding: clamp(110px, 16vh, 160px) clamp(20px, 5vw, 56px) clamp(48px, 7vh, 76px);
  color: #F4F1EA;
}
.info-hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(244, 241, 234, 0.65);
  margin-bottom: 16px;
}
.info-hero-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: #E8863C;
}
.info-heading {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.22em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.info-heading--tight { font-size: clamp(28px, 4vw, 54px); }

/* Body */
.info-body-section {
  position: relative;
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(72px, 11vh, 120px) clamp(20px, 5vw, 56px);
}
.info-body-inner {
  max-width: 700px;
  margin: 0 auto;
  border-left: 2px solid rgba(232, 134, 60, 0.35);
  padding-left: clamp(22px, 3vw, 36px);
}
.info-body-eyebrow {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(10, 10, 10, 0.4);
  margin-bottom: 18px;
}
.info-body {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(10, 10, 10, 0.78);
}
.info-body p { margin: 0 0 1.3em; }
.info-body p:last-child { margin-bottom: 0; }
.info-body p:first-of-type::first-letter {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 3.4em;
  line-height: 0.75;
  font-weight: 400;
  color: #E8863C;
  float: left;
  padding: 0.04em 0.09em 0 0;
}

/* Tag-style list (Bespoke's "brings together", Beyond's focus areas) */
.info-list-section {
  position: relative;
  background: radial-gradient(130% 160% at 50% 0%, #17140f 0%, #0A0A0A 62%);
  color: #F4F1EA;
  padding: clamp(72px, 11vh, 120px) clamp(20px, 5vw, 56px);
}
.info-list-inner { max-width: 1100px; margin: 0 auto; }
.info-list-inner .kicker--dark { margin-bottom: clamp(28px, 4vh, 44px); }
.info-tag-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.7em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.5;
}
.info-tag-list li {
  transition: color 0.35s ease;
}
.info-tag-list li:hover { color: #E8863C; }
.info-tag-list li:not(:last-child)::after {
  content: '\00b7';
  margin-left: 0.7em;
  font-style: normal;
  color: rgba(244, 241, 234, 0.4);
}

/* Standalone statement (Bespoke's closing line, Beyond's India/U.A.E.
   highlight) */
.info-statement-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 180% at 50% 100%, #191510 0%, #0A0A0A 60%);
  color: #F4F1EA;
  padding: clamp(96px, 15vh, 170px) clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: center;
}
.info-statement-mark {
  position: absolute;
  top: clamp(-10px, -2vh, 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(160px, 24vw, 320px);
  line-height: 1;
  color: rgba(232, 134, 60, 0.09);
  pointer-events: none;
  user-select: none;
}
.info-statement-inner { position: relative; z-index: 1; max-width: 820px; text-align: center; }
.info-statement {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.info-statement-flags {
  margin-bottom: clamp(20px, 3vh, 32px);
  font-family: Archivo, sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #E8863C;
}
.info-statement-section--beyond { background: radial-gradient(130% 180% at 50% 100%, #201a11 0%, #16130f 60%); }

/* Two-column list section (Advisory's "for" + "services") */
.info-columns-section {
  background: #F4F1EA;
  color: #0A0A0A;
  padding: clamp(72px, 11vh, 120px) clamp(20px, 5vw, 56px);
}
.info-columns-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(48px, 6vw, 96px);
}
.info-column {
  position: relative;
  padding-left: clamp(24px, 3vw, 36px);
}
.info-column:not(:first-child) {
  border-left: 1px solid rgba(10, 10, 10, 0.12);
}
.info-column::before {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: #E8863C;
  margin-bottom: 20px;
}
.info-column .kicker { margin-bottom: clamp(20px, 3vh, 32px); }
.info-plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: info-list;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(19px, 1.8vw, 24px);
}
.info-plain-list li {
  counter-increment: info-list;
  transition: transform 0.3s ease, color 0.3s ease;
}
.info-plain-list li::before {
  content: counter(info-list, decimal-leading-zero);
  font-family: Archivo, sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(10, 10, 10, 0.35);
  margin-right: 12px;
  vertical-align: middle;
}
.info-plain-list li:hover {
  color: #E8863C;
  transform: translateX(6px);
}

/* CTA */
.info-cta-section {
  position: relative;
  background: radial-gradient(130% 180% at 50% 100%, #17140f 0%, #0A0A0A 60%);
  color: #F4F1EA;
  padding: clamp(72px, 11vh, 120px) clamp(20px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.info-cta-eyebrow {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(244, 241, 234, 0.45);
  margin-bottom: 20px;
}
.info-cta {
  position: relative;
  display: inline-block;
  font-size: clamp(12px, 1.2vw, 13px);
  letter-spacing: 0.3em;
  color: #E8863C;
  padding-bottom: 12px;
}
.info-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #E8863C;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.info-cta:hover::after { transform: scaleX(1); }

/* Coming Soon — generic reusable placeholder */
.coming-soon {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0A;
  color: #F4F1EA;
  text-align: center;
  padding: 120px 20px;
  background-size: cover;
  background-position: center;
}
.coming-soon-gradient {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
}
.coming-soon-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.coming-soon-mark {
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  opacity: 0.92;
}
.coming-soon-kicker {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.34em;
  color: #E8863C;
}
.coming-soon-heading {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.1;
}
.coming-soon-body {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(244, 241, 234, 0.75);
}
.coming-soon-body p { margin: 0; }
.coming-soon-scroll-cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(28px, 5vh, 48px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(244, 241, 234, 0.55);
  transition: color 0.3s ease;
}
.coming-soon-scroll-cue svg { animation: coming-soon-bounce 2.2s ease-in-out infinite; }
.coming-soon-scroll-cue:hover { color: #F4F1EA; }
@keyframes coming-soon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.coming-soon-foot {
  padding: 32px 20px 44px;
  background: #F4F1EA;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(10, 10, 10, 0.45);
}
.coming-soon-foot a { color: rgba(10, 10, 10, 0.45); }
.coming-soon-foot a:hover { color: #E8863C; }