/* ============================================================
   VESTIGE — Antiquités & Objets Rares
   Al Mokhtar Antiquités · Baabda, Lebanon · est. 2016
   Design system — "Archival & Majesty"
   Strict Zero-White Policy: #FFFFFF never appears.
   ============================================================ */

:root{
  /* ---- Substrate ---- */
  --obsidian:      #0B0907;
  --obsidian-deep: #070605;
  --surface:       #16110C;
  --surface-2:     #1E1710;
  --surface-3:     #261D14;

  /* ---- Metals ---- */
  --gold:          #D4AF37;
  --gold-soft:     #C5A059;
  --gold-pale:     #E6C594;
  --brass:         #A98B4B;

  /* ---- Heritage accents ---- */
  --crimson:       #671618;
  --plum:          #2D1E2F;

  /* ---- Illuminated text ---- */
  --parchment:     #F0E6D2;
  --parchment-dim: #B5A593;
  --muted:         #8C7E6D;

  /* ---- Lines ---- */
  --filigree:      rgba(212,175,55,.20);
  --filigree-lit:  rgba(212,175,55,.48);

  /* ---- Channels for the frosted surfaces ----
     The navigation pill, the drawer and the scrims are a colour at partial
     alpha. Writing them as literals froze them to the Midnight substrate,
     so on a light theme the menu floated over the page as a black slab.
     The theme block overrides these; these are the fallbacks that keep the
     sheet correct on its own. */
  --obsidian-rgb:      11,9,7;
  --obsidian-deep-rgb: 7,6,5;
  --surface-rgb:       22,17,12;
  --parchment-rgb:     240,230,210;
  --gold-pale-rgb:     230,197,148;

  --serif-display: 'Cormorant Garamond', 'Cinzel', 'Times New Roman', serif;
  --serif-body:    'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --serif-ui:      'Cinzel', 'Cormorant Garamond', serif;
  --arabic:        'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  --ease-vault:    cubic-bezier(.22,1,.36,1);
  --ease-drape:    cubic-bezier(.16,.84,.32,1);

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --rule: 1px solid var(--filigree);
}

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

html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--obsidian);
  color:var(--parchment-dim);
  font-family:var(--serif-body);
  font-size:clamp(1rem,.94rem + .28vw,1.1rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden}

/* Ambient grain + warm bloom over the whole document */
body::before{
  content:'';
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,55,.055), transparent 62%),
    radial-gradient(90% 60% at 50% 110%, rgba(103,22,24,.05), transparent 60%);
  mix-blend-mode:screen;
}
body::after{
  content:'';
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2%,3%)}
  40%{transform:translate(3%,-2%)}
  60%{transform:translate(-3%,-3%)}
  80%{transform:translate(2%,2%)}
}

img,video{max-width:100%;display:block}

::selection{background:rgba(212,175,55,.28);color:var(--parchment)}

/* Scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--obsidian-deep)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--brass),var(--surface-3));border-radius:0}

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--serif-display);
  color:var(--parchment);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
}

.eyebrow{
  font-family:var(--serif-ui);
  font-size:.68rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-soft);
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.5rem;
  font-weight:500;
}
.eyebrow::before,
.eyebrow::after{
  content:''; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--filigree-lit),transparent);
  max-width:6rem;
}
.eyebrow.is-left::before{display:none}
.eyebrow.is-left::after{max-width:none}

.display{
  font-size:clamp(2.9rem,1.4rem + 6.6vw,7rem);
  letter-spacing:-.025em;
}
.section-title{
  font-size:clamp(2rem,1.2rem + 3.4vw,4.2rem);
}
.lede{
  font-size:clamp(1.05rem,.98rem + .42vw,1.32rem);
  color:var(--parchment-dim);
  max-width:56ch;
  line-height:1.72;
}

/* Gilded text — foil sheen that sweeps on reveal.

   The gradient was written in literal golds, with a near-white highlight at
   the middle of the sweep. Clipped to the text on obsidian that reads as
   struck foil. On the warm stone theme the same gradient is pale metal on a
   pale ground and the headline all but disappears — `-webkit-text-fill-color:
   transparent` leaves nothing to fall back to. The stops are tokens now, so
   they darken with the theme, and on a light theme the effect is dropped
   altogether in favour of solid ink. A headline that cannot be read is not a
   headline. */
.gilded{
  background:linear-gradient(100deg,
    var(--brass) 0%, var(--gold-soft) 18%, var(--gold-pale) 34%,
    var(--gold) 46%, var(--gold-pale) 58%, var(--gold-soft) 74%, var(--brass) 100%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.is-inview .gilded{
  animation:foil 2.6s var(--ease-vault) .2s forwards;
}
@keyframes foil{to{background-position:0 0}}

.theme-light .gilded{
  background:none;
  color:var(--gold-pale);
  -webkit-text-fill-color:var(--gold-pale);
  animation:none;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{
  width:min(100% - (var(--gutter) * 2), 1520px);
  margin-inline:auto;
}
.shell-narrow{
  width:min(100% - (var(--gutter) * 2), 1080px);
  margin-inline:auto;
}
section{position:relative; z-index:3}
.band{padding:clamp(5rem,10vh + 3rem,11rem) 0}
.band-tight{padding:clamp(3.5rem,7vh,6rem) 0}

.hairline{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--filigree),var(--filigree-lit),var(--filigree),transparent);
  border:0; margin:0;
}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--rise,34px),0);
  transition:
    opacity 1.05s var(--ease-drape) var(--delay,0s),
    transform 1.15s var(--ease-vault) var(--delay,0s),
    filter 1.15s var(--ease-vault) var(--delay,0s);
  filter:blur(6px);
  will-change:opacity,transform;
}
[data-reveal].is-inview{
  opacity:1; transform:none; filter:blur(0);
}
/* "Drape lift" — a curtain slides off the frame.
   NB: deliberately NOT clip-path on the observed node; Chromium
   folds self-clipping into IntersectionObserver visibility, so a
   fully-clipped element never reports as intersecting and the
   reveal would never fire. The curtain is a child instead. */
[data-reveal="mask"]{opacity:1; transform:none; filter:none}
[data-reveal="mask"]::before{
  content:''; position:absolute; inset:-1px; z-index:5;
  background:linear-gradient(180deg,var(--obsidian-deep) 88%,rgba(212,175,55,.35));
  transform:translateY(0);
  transition:transform 1.4s var(--ease-vault) var(--delay,0s);
}
[data-reveal="mask"].is-inview::before{transform:translateY(-101%)}

/* word-by-word kinetic type */
.kinetic{display:block}
.kinetic .ln{display:block; overflow:hidden; padding-bottom:.06em}
.kinetic .wd{
  display:inline-block;
  transform:translate3d(0,110%,0) rotate(3deg);
  transition:transform 1.25s var(--ease-vault);
}
.is-inview .kinetic .wd{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none;filter:none;clip-path:none}
  .kinetic .wd{transform:none}
}

/* ============================================================
   PRELOADER — the vault opening
   ============================================================ */
#vault{
  position:fixed; inset:0; z-index:9999;
  background:var(--obsidian-deep);
  display:grid; place-items:center;
  transition:opacity .9s ease .35s, visibility .9s .35s;
}
#vault.is-open{opacity:0; visibility:hidden}
#vault .seal{width:118px;height:118px}
#vault .seal path,#vault .seal circle{
  fill:none; stroke:var(--gold); stroke-width:1.1;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:draw 2s var(--ease-vault) forwards;
}
#vault .seal .m{animation-delay:.55s}
@keyframes draw{to{stroke-dashoffset:0}}
#vault .vword{
  margin-top:1.6rem; font-family:var(--serif-ui);
  letter-spacing:.62em; font-size:.68rem; text-indent:.62em;
  color:var(--brass); opacity:0;
  animation:fadein 1.1s ease 1s forwards;
}
@keyframes fadein{to{opacity:1}}
.vault-curtain{
  position:fixed; left:0; right:0; height:50vh; z-index:9998;
  background:var(--obsidian-deep);
  transition:transform 1.1s var(--ease-vault) .25s;
}
.vault-curtain.t{top:0}
.vault-curtain.b{bottom:0}
.is-open ~ .vault-curtain.t{transform:translateY(-100%)}
.is-open ~ .vault-curtain.b{transform:translateY(100%)}

/* ============================================================
   NAVIGATION — floating gold-trimmed pill
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:1.6rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  transition:padding .6s var(--ease-vault);
}
.nav.is-stuck{padding-top:.85rem; padding-bottom:.85rem}

.brandmark{
  display:flex; align-items:center; gap:.85rem;
  text-decoration:none; color:var(--parchment);
  position:relative; z-index:2;
}
.brandmark svg{width:38px;height:38px;flex:none;transition:transform .8s var(--ease-vault)}
.brandmark:hover svg{transform:rotate(-8deg) scale(1.06)}
.brandmark .wordmark{line-height:1.05}
.brandmark .wordmark b{
  display:block; font-family:var(--serif-ui); font-weight:500;
  letter-spacing:.34em; font-size:.92rem; color:var(--gold-pale);
}
.brandmark .wordmark span{
  display:block; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:.18rem;
}

.navpill{
  display:flex; align-items:center; gap:.25rem;
  padding:.42rem .5rem;
  border:var(--rule); border-radius:999px;
  /* Over the hero the pill sits on a photograph, so it needs enough of its
     own ground to hold the type. .42 was too thin: the video showed through
     and the labels swam. */
  background:rgba(var(--obsidian-rgb),.62);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:background .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.nav.is-stuck .navpill{
  background:rgba(var(--obsidian-rgb),.92);
  border-color:var(--filigree-lit);
  box-shadow:0 16px 44px rgba(var(--obsidian-deep-rgb),.55), inset 0 1px 0 rgba(var(--gold-pale-rgb),.16);
}
/* On a light theme the shadow under the pill has to be a shadow, not a
   smear of the substrate — and the glass wants to be more opaque, because
   dark ink on a half-transparent stone ground over a photograph is worse
   than the reverse. */
.theme-light .navpill{background:rgba(var(--surface-rgb),.82)}
.theme-light .nav.is-stuck .navpill{
  background:rgba(var(--surface-rgb),.97);
  box-shadow:0 14px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(var(--gold-pale-rgb),.14);
}
.navpill a{
  position:relative;
  padding:.55rem 1.05rem;
  font-family:var(--serif-ui); font-size:.66rem;
  /* Was .66rem at .2em tracking in the dimmed ink. Small, wide-tracked,
     all-caps type over a moving photograph is the hardest thing on the page
     to read, and it was set in the *secondary* colour. It now uses the full
     ink colour at a slightly larger size — the client's "is there a
     possibility to make it clearer". */
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--parchment); text-decoration:none;
  border-radius:999px;
  transition:color .45s ease;
  white-space:nowrap;
}
@media (min-width:1121px){ .navpill a{font-size:.7rem} }
.navpill a::before{
  content:''; position:absolute; inset:0; border-radius:999px;
  background:radial-gradient(60% 120% at 50% 120%, rgba(212,175,55,.22), transparent 70%);
  opacity:0; transition:opacity .45s ease;
}
.navpill a:hover{color:var(--gold-pale)}
.navpill a:hover::before{opacity:1}
.navpill a.is-live{color:var(--gold-pale)}

.nav-right{display:flex;align-items:center;gap:.9rem;position:relative;z-index:2}

/* The language switcher.

   The prototype built this from <button>s driven by JavaScript. The real
   site builds it from <a>s, because a language ought to be a real address a
   search engine can follow — but the stylesheet was never told, so `.lang a`
   matched nothing and the switcher rendered as three unstyled scraps of
   browser-default blue. That is the second "is there a possibility to make
   it clearer" in the client's notes: it was not dim, it was unstyled.

   Both selectors are carried so neither markup can lose its styling again. */
.lang{
  display:flex; border:var(--rule); border-radius:999px; overflow:hidden;
  background:rgba(var(--obsidian-rgb),.62); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.theme-light .lang{background:rgba(var(--surface-rgb),.82)}
.lang button,
.lang a{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.35rem; text-decoration:none;
  font-family:var(--serif-ui); font-size:.66rem; letter-spacing:.14em;
  padding:.55rem .72rem; color:var(--parchment-dim); line-height:1;
  transition:color .4s ease, background .4s ease;
}
.lang button:hover,
.lang a:hover{color:var(--gold-pale); background:rgba(var(--gold-pale-rgb),.12)}
.lang button:focus-visible,
.lang a:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.lang button.on,
.lang a.on{
  color:var(--obsidian); font-weight:600;
  background:linear-gradient(180deg,var(--gold-pale),var(--brass));
}
/* Arabic is set in a different face; at this size it needs a touch more room. */
.lang a[hreflang="ar"]{font-family:var(--arabic); font-size:.85rem; letter-spacing:0}

.btn{
  --btn-fg:var(--gold-pale);
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.9rem;
  font-family:var(--serif-ui); font-size:.64rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--btn-fg); text-decoration:none;
  border:1px solid var(--filigree-lit);
  background:transparent; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:color .55s var(--ease-vault), border-color .55s ease;
  white-space:nowrap;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,var(--gold-pale),var(--gold) 45%,var(--brass));
  transform:translateY(101%);
  transition:transform .7s var(--ease-vault);
}
.btn:hover{color:var(--obsidian); border-color:var(--gold)}
.btn:hover::after{transform:translateY(0)}
.btn.btn-sm{padding:.7rem 1.3rem;font-size:.6rem;letter-spacing:.2em}
.btn.btn-solid{color:var(--obsidian);border-color:var(--gold)}
.btn.btn-solid::after{transform:translateY(0)}
.btn.btn-solid:hover::after{transform:translateY(-101%)}
.btn.btn-solid:hover{color:var(--gold-pale)}

.navtoggle{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:end;
  overflow:hidden;
  padding-bottom:clamp(3rem,9vh,7rem);
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.hero-media video,
.hero-media img{
  width:100%; height:118%; object-fit:cover;
  filter:brightness(.46) contrast(1.16) saturate(.82) sepia(.16);
  transform:translate3d(0,0,0) scale(1.06);
  will-change:transform;
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(var(--obsidian-rgb),.82) 0%, rgba(var(--obsidian-rgb),.24) 34%, rgba(var(--obsidian-rgb),.72) 76%, var(--obsidian) 100%),
    radial-gradient(78% 62% at 50% 44%, transparent 0%, rgba(var(--obsidian-rgb),.72) 100%);
}
/* The hero on a light theme.

   The treatment above is built for pale text on a darkened photograph:
   brightness(.46) pushes the image down so white type sits on it. On Ivory
   Warm the tokens invert — the type becomes dark ink — and the same darkened
   photograph becomes a mid-grey ground under dark letters. Measured on the
   live theme, the headline and the line above it were sitting at roughly the
   same luminance as the picture behind them.

   So the veil is turned the other way up: the photograph is lifted rather
   than sunk, and the scrim is a pale wash that gets stronger towards the
   text, exactly as the dark version gets darker. Same idea, opposite
   direction. */
.theme-light .hero-media video,
.theme-light .hero-media img{
  filter:brightness(1.0) contrast(.94) saturate(.72) sepia(.10);
}
.theme-light .hero-media::after{
  background:
    linear-gradient(180deg,
      rgba(var(--surface-rgb),.62) 0%,
      rgba(var(--surface-rgb),.40) 26%,
      rgba(var(--surface-rgb),.86) 72%,
      var(--obsidian) 100%),
    radial-gradient(80% 64% at 34% 62%, rgba(var(--surface-rgb),.90) 0%, rgba(var(--surface-rgb),.30) 100%);
}
/* The small tracked line above the headline is the hardest thing on the page
   to read; on a light ground it needs the ink colour, not the metal. */
.theme-light .hero .eyebrow{color:var(--brass)}

.hero-inner{position:relative; z-index:3}
.hero .display{margin-bottom:1.8rem}
.hero-lede{max-width:44ch; margin-bottom:2.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

.hero-meta{
  position:absolute; z-index:3; bottom:clamp(3rem,9vh,7rem); right:var(--gutter);
  text-align:right; font-family:var(--serif-ui);
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); line-height:2.4;
}
.hero-meta b{display:block;color:var(--gold-soft);font-weight:500}

.scrollcue{
  position:absolute; z-index:3; left:50%; bottom:2rem; transform:translateX(-50%);
  width:1px; height:64px; background:linear-gradient(var(--filigree-lit),transparent);
  overflow:visible;
}
.scrollcue::after{
  content:''; position:absolute; left:-2px; top:0;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px var(--gold);
  animation:cue 2.4s var(--ease-vault) infinite;
}
@keyframes cue{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{transform:translateY(60px);opacity:0}
}

/* Floating gold motes */
.motes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mote{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,rgba(240,230,210,.9),rgba(212,175,55,.28) 45%,transparent 70%);
  animation:drift linear infinite;
  opacity:0;
}
@keyframes drift{
  0%{transform:translate3d(0,20px,0) scale(.6);opacity:0}
  12%{opacity:var(--peak,.5)}
  88%{opacity:var(--peak,.5)}
  100%{transform:translate3d(var(--dx,20px),-120px,0) scale(1.1);opacity:0}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-top:var(--rule); border-bottom:var(--rule);
  padding:1.15rem 0; overflow:hidden;
  background:linear-gradient(180deg,rgba(30,23,16,.5),transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-family:var(--serif-ui); font-size:.66rem;
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--brass); padding:0 2.2rem;
  display:inline-flex; align-items:center; gap:2.2rem;
  white-space:nowrap;
}
.marquee span::after{content:'✦'; color:var(--gold); font-size:.55rem; opacity:.7}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.sec-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:2rem; align-items:end; margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.sec-head .lede{margin-top:1.3rem}
@media(max-width:820px){
  .sec-head{grid-template-columns:1fr}
}

/* ============================================================
   COLLECTION GRID
   ============================================================ */
.collection{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(1rem,2vw,1.9rem);
}
.piece{
  position:relative; display:block; text-decoration:none;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid rgba(212,175,55,.13);
  overflow:hidden; isolation:isolate;
  transition:border-color .7s ease, transform .9s var(--ease-vault), box-shadow .9s var(--ease-vault);
}
.piece:hover{
  border-color:var(--filigree-lit);
  transform:translateY(-7px);
  box-shadow:0 26px 60px rgba(0,0,0,.62);
}
/* filigree corner brackets that draw in on hover */
.piece .bracket{
  position:absolute; width:26px; height:26px; z-index:4;
  border:0 solid var(--gold); opacity:0;
  transition:opacity .6s ease .05s, width .7s var(--ease-vault), height .7s var(--ease-vault);
  pointer-events:none;
}
.piece .bracket.tl{top:11px;left:11px;border-top-width:1px;border-left-width:1px}
.piece .bracket.br{bottom:11px;right:11px;border-bottom-width:1px;border-right-width:1px}
.piece:hover .bracket{opacity:1;width:38px;height:38px}

/* The plate a piece is shown on.

   This was `object-fit:cover` in a locked 4/5 box. A portrait photograph
   filled it; a landscape one — a painting, a long console, a wide mirror —
   had roughly two fifths of its width cut away and what survived was blown
   up to fill the height. That is the client's "photos in landscape mode are
   not complete and bad quality": the object was being cropped out of its own
   picture, and the surviving strip was upscaled.

   The frame keeps its 4/5 rhythm, because a grid of mixed shapes needs one,
   but the photograph is now contained inside it. Nothing is cut. This is how
   an auction catalogue has always done it: the object entire, on a plain
   ground, at whatever shape it happens to be. */
.piece-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--obsidian-deep);
}
.piece-frame img{
  width:100%;height:100%;object-fit:contain;
  padding:clamp(.5rem,2%,1.1rem);
  transform:scale(1.02);
  transition:transform 1.5s var(--ease-vault), filter 1.1s ease;
  filter:brightness(.94) saturate(.94);
}
.piece:hover .piece-frame img{transform:scale(1.11); filter:brightness(1.06) saturate(1.02)}
.piece-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(var(--obsidian-rgb),.78) 100%);
  transition:opacity .8s ease; opacity:.85;
}
.piece:hover .piece-frame::after{opacity:.6}

/* light sweep across the glass */
.piece-frame::before{
  content:''; position:absolute; top:0; left:-70%; z-index:3;
  width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(240,230,210,.14),transparent);
  transform:skewX(-18deg);
  transition:left .95s var(--ease-vault);
}
.piece:hover .piece-frame::before{left:130%}

.piece-body{padding:1.5rem 1.5rem 1.7rem; position:relative}
.piece-cat{
  font-family:var(--serif-ui); font-size:.58rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--brass); display:block; margin-bottom:.7rem;
}
.piece-name{
  font-family:var(--serif-display); font-size:1.28rem; line-height:1.28;
  color:var(--parchment); margin:0 0 1rem; font-weight:400;
}
.piece-foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.95rem; border-top:1px solid rgba(212,175,55,.13);
}
.piece-price{
  font-family:var(--serif-display); font-size:1.12rem;
  color:var(--gold-pale); letter-spacing:.02em;
}
.piece-price.por{
  font-family:var(--serif-ui); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.piece-go{
  font-family:var(--serif-ui); font-size:.58rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-soft);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:gap .5s var(--ease-vault);
}
.piece:hover .piece-go{gap:.95rem}

/* ============================================================
   CATEGORY CLOISONNÉ
   ============================================================ */
.cats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));
  gap:1px; background:var(--filigree);
  border:var(--rule);
}
.cat{
  position:relative; display:flex; flex-direction:column;
  justify-content:space-between; gap:2.6rem;
  min-height:172px; padding:1.5rem 1.4rem;
  background:var(--surface); text-decoration:none;
  overflow:hidden; isolation:isolate;
  transition:background .7s ease;
}
.cat::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(150deg,rgba(212,175,55,.16),rgba(103,22,24,.14));
  opacity:0; transition:opacity .7s ease;
}
.cat:hover::after{opacity:1}
.cat:hover{background:var(--surface-3)}
.cat-idx{
  font-family:var(--serif-ui); font-size:.56rem; letter-spacing:.22em;
  color:var(--brass); opacity:.65;
}
.cat-name{
  font-family:var(--serif-display); font-size:1.42rem; line-height:1.1;
  color:var(--parchment-dim);
  transition:color .6s ease, transform .8s var(--ease-vault);
}
.cat:hover .cat-name{color:var(--gold-pale); transform:translateX(5px)}
.cat-arrow{
  position:absolute; right:1.3rem; bottom:1.4rem;
  color:var(--gold); opacity:0; transform:translate(-8px,8px);
  transition:opacity .6s ease, transform .7s var(--ease-vault);
  font-size:1rem;
}
.cat:hover .cat-arrow{opacity:1;transform:none}

/* ============================================================
   SPLIT / PARALLAX FEATURE
   ============================================================ */
.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5.5rem); align-items:center;
}
.split.flip{grid-template-columns:.95fr 1.05fr}
.split.flip .split-media{order:2}
.split.flip .split-copy{order:1}
@media(max-width:900px){
  .split,.split.flip{grid-template-columns:1fr}
  .split.flip .split-media,.split.flip .split-copy{order:initial}
}
.split-media{
  position:relative; overflow:hidden;
  aspect-ratio:4/3.05;
  border:1px solid rgba(212,175,55,.16);
}
.split-media img{
  width:100%; height:126%; object-fit:cover;
  will-change:transform;
}
.split-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(var(--obsidian-rgb),.1),rgba(var(--obsidian-rgb),.6));
}
.split-media .plate{
  position:absolute; z-index:3; left:1.4rem; bottom:1.4rem;
  padding:.7rem 1.1rem; border:1px solid var(--filigree-lit);
  background:rgba(var(--obsidian-rgb),.68); backdrop-filter:blur(8px);
  font-family:var(--serif-ui); font-size:.56rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-soft);
}

/* ============================================================
   SERVICES — hover-reveal index
   ============================================================ */
.svc-list{border-top:var(--rule)}
.svc{
  position:relative; display:grid;
  grid-template-columns:4.5rem minmax(0,1fr) auto;
  gap:1.6rem; align-items:center;
  padding:clamp(1.5rem,3vw,2.5rem) 0;
  border-bottom:var(--rule);
  text-decoration:none; overflow:hidden;
  transition:padding-left .8s var(--ease-vault);
}
.svc::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,rgba(212,175,55,.09),transparent 62%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .85s var(--ease-vault);
}
.svc:hover::before{transform:scaleX(1)}
.svc:hover{padding-left:1.6rem}
.svc > *{position:relative;z-index:1}
.svc-no{
  font-family:var(--serif-ui); font-size:.62rem; letter-spacing:.18em;
  color:var(--brass);
}
.svc-name{
  font-family:var(--serif-display);
  font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem);
  color:var(--parchment-dim); line-height:1.15;
  transition:color .6s ease;
}
.svc:hover .svc-name{color:var(--gold-pale)}
.svc-desc{
  display:block; font-size:.94rem; color:var(--muted);
  margin-top:.5rem; max-width:62ch; line-height:1.65;
}
.svc-tag{
  font-family:var(--serif-ui); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-soft);
  border:1px solid var(--filigree); padding:.45rem .85rem;
  white-space:nowrap;
  transition:border-color .6s ease,color .6s ease;
}
.svc:hover .svc-tag{border-color:var(--filigree-lit)}
@media(max-width:760px){
  .svc{grid-template-columns:2.6rem minmax(0,1fr); gap:1rem}
  .svc-tag{grid-column:2;justify-self:start;margin-top:.9rem}
}

/* ============================================================
   INVESTMENT — editorial statement
   ============================================================ */
.statement{
  position:relative; padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,5rem);
  border:var(--rule);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(103,22,24,.18), transparent 60%),
    linear-gradient(180deg,var(--surface),var(--obsidian));
  overflow:hidden;
}
.statement::before{
  content:'“'; position:absolute; top:-3rem; left:1rem;
  font-family:var(--serif-display); font-size:22rem; line-height:1;
  color:rgba(212,175,55,.055); pointer-events:none;
}
.statement q{
  quotes:none;
  font-family:var(--serif-display); font-weight:300;
  font-size:clamp(1.4rem,1rem + 1.9vw,2.5rem);
  line-height:1.42; color:var(--parchment);
  display:block; max-width:34ch;
}
.figures{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.5rem,3vw,3rem); margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:2.4rem; border-top:1px solid var(--filigree);
}
.fig b{
  display:block; font-family:var(--serif-display); font-weight:300;
  font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem);
  color:var(--gold-pale); line-height:1;
}
.fig span{
  display:block; margin-top:.7rem;
  font-family:var(--serif-ui); font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   THE SALEROOM — auction module (toggleable)
   ============================================================ */
.saleroom{
  position:relative; overflow:hidden;
  border:1px solid rgba(212,175,55,.22);
  background:
    radial-gradient(100% 120% at 15% 0%, rgba(212,175,55,.1), transparent 55%),
    linear-gradient(160deg,var(--surface-2),var(--obsidian-deep));
}
.saleroom-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,4.5vw,4rem);
}
@media(max-width:900px){.saleroom-grid{grid-template-columns:1fr}}

.live-dot{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--serif-ui);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--crimson);
  filter:brightness(1.9);
}
.live-dot i{
  width:7px;height:7px;border-radius:50%;background:#B8322F;
  box-shadow:0 0 0 0 rgba(184,50,47,.65);
  animation:pulse 2.1s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 11px rgba(184,50,47,0)}
  100%{box-shadow:0 0 0 0 rgba(184,50,47,0)}
}

.lot{
  border:1px solid var(--filigree);
  background:rgba(var(--obsidian-rgb),.55);
  backdrop-filter:blur(10px);
  padding:1.5rem;
}
.lot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
.lot-no{font-family:var(--serif-ui);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.lot-name{font-family:var(--serif-display);font-size:1.3rem;color:var(--parchment);margin:.4rem 0 0;font-weight:400}
.lot-img{width:78px;height:78px;object-fit:contain;background:var(--obsidian-deep);border:1px solid var(--filigree);flex:none}
.lot-row{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid rgba(212,175,55,.12);font-size:.9rem}
.lot-row span{color:var(--muted);font-family:var(--serif-ui);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
.lot-row b{color:var(--gold-pale);font-family:var(--serif-display);font-size:1.15rem;font-weight:400}

.clock{display:flex;gap:.55rem;margin:1.3rem 0 1.1rem}
.clock div{
  flex:1; text-align:center; padding:.7rem .3rem;
  border:1px solid var(--filigree); background:rgba(30,23,16,.6);
}
.clock b{
  display:block;font-family:var(--serif-display);font-size:1.55rem;
  color:var(--gold-pale);line-height:1;font-weight:300;
  font-variant-numeric:tabular-nums;
}
.clock span{
  display:block;margin-top:.4rem;font-family:var(--serif-ui);
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.admin-note{
  margin-top:1.6rem;padding:.9rem 1.1rem;
  border-left:2px solid var(--gold);
  background:rgba(212,175,55,.06);
  font-size:.84rem;color:var(--parchment-dim);
}
.admin-note b{color:var(--gold-pale);font-family:var(--serif-ui);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:.35rem}

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
/* The four contact cards.

   The minimum track was `min(100%, 240px)`. Inside repeat(auto-fit), that
   percentage resolves against a size the grid does not know yet, and the
   tracks came out fractionally wider than the grid — enough to make the whole
   document 21px wider than the window between about 1010 and 1200 pixels, so
   the page could be dragged sideways at exactly the width a small laptop uses.
   Nothing was visibly out of place, which is why it survived.

   A plain length for the minimum cannot do that. The single-column rule below
   does the job the percentage was there for: stop a 240px track being wider
   than a narrow phone. */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--filigree); border:var(--rule);
}
@media (max-width:560px){ .contact-grid{grid-template-columns:1fr} }
.ccard{
  background:var(--surface); padding:clamp(1.6rem,3vw,2.4rem);
  text-decoration:none; display:block;
  /* A grid item's automatic minimum is its min-content width, so without this
     a card refuses to be narrower than its longest word. */
  min-width:0;
  transition:background .7s ease;
}
.ccard:hover{background:var(--surface-3)}
.ccard span{
  display:block;font-family:var(--serif-ui);font-size:.56rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:.9rem;
}
.ccard b{
  display:block;font-family:var(--serif-display);font-weight:400;
  font-size:1.22rem;color:var(--parchment);line-height:1.35;
  transition:color .5s ease;
  /* A social account pasted in as a full web address, or a long email, is one
     unbreakable word. Without this it sets the card's minimum width, the grid
     track grows to fit it, and the document ends up wider than the window —
     which is what let these pages be dragged sideways at several common
     widths. The email card carried an inline patch for its own version of
     this; the rule belongs on every card. */
  overflow-wrap:anywhere;
}
.ccard:hover b{color:var(--gold-pale)}
.ccard em{display:block;font-style:normal;color:var(--muted);font-size:.88rem;margin-top:.45rem}

footer{
  border-top:var(--rule);
  padding:clamp(3rem,6vw,5rem) 0 2.5rem;
  background:linear-gradient(180deg,transparent,rgba(7,6,5,.9));
  position:relative;z-index:3;
}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(2rem,4vw,4rem);margin-bottom:3.5rem;
}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{
  font-family:var(--serif-ui);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1.3rem;font-weight:500;
}
.foot-grid a{
  display:block;color:var(--parchment-dim);text-decoration:none;
  padding:.34rem 0;font-size:.95rem;
  transition:color .45s ease,transform .55s var(--ease-vault);
}
.foot-grid a:hover{color:var(--gold-pale);transform:translateX(6px)}
.foot-blurb{color:var(--muted);max-width:38ch;font-size:.95rem;margin-top:1.2rem}
/* The social accounts filled in on Site details. Inline, not a stacked list,
   so the first footer column stays a paragraph and not a second menu. */
.foot-social{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:1.1rem}
.foot-social a{
  display:inline-block;padding:.2rem 0;font-family:var(--serif-ui);
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);text-decoration:none;transition:color .45s ease;
}
.foot-social a:hover{color:var(--gold-pale);transform:none}
.foot-base{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--filigree);
  font-family:var(--serif-ui);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

/* WhatsApp pill */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:800;
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.85rem 1.35rem;border:1px solid var(--filigree-lit);
  background:rgba(var(--obsidian-rgb),.86);backdrop-filter:blur(14px);
  font-family:var(--serif-ui);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-pale);text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  transition:border-color .5s ease,transform .6s var(--ease-vault);
}
.wa:hover{border-color:var(--gold);transform:translateY(-3px)}
.wa i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ============================================================
   RESPONSIVE / NAV DRAWER
   ============================================================ */
@media(max-width:1120px){
  .navpill{display:none}
  .navtoggle{
    display:inline-flex;flex-direction:column;gap:5px;
    background:transparent;border:1px solid var(--filigree);
    padding:.75rem .8rem;cursor:pointer;
  }
  /* The bars are painted with background, but the button still inherits a
     colour, and a <button> with no colour set resolves to the browser's own
     white under a dark colour-scheme. Nothing draws with it — it is set here
     so the zero-white rule stays literally true of every computed style, not
     only of the pixels that happen to be painted. */
  .navtoggle{color:var(--gold-pale)}
  .navtoggle i{display:block;width:20px;height:1px;background:var(--gold-pale);transition:transform .5s var(--ease-vault),opacity .3s}
  .navtoggle.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle.on i:nth-child(2){opacity:0}
  .navtoggle.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* The client's note: "the names of the department are too big". They were —
     every link in here was 2rem, including the six departments nested under
     The Collection, so eleven lines of display serif ran off the bottom of a
     phone and the ones that fitted looked like headlines. The tabs are now
     the size of a tab and the departments read as what they are: a list
     underneath one of them.

     place-content:center was the other half of it. Centred grid content that
     is taller than its box overflows in *both* directions and the top is
     unreachable — so a long menu lost its first item with no way to scroll to
     it. Start-aligned and scrollable instead. */
  .drawer{
    position:fixed;inset:0;z-index:880;
    background:linear-gradient(160deg,var(--obsidian-deep),var(--surface));
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.1rem;text-align:center;
    padding:5.5rem 1.25rem 2.5rem;
    overflow-y:auto;overscroll-behavior:contain;
    clip-path:circle(0% at 92% 5%);
    transition:clip-path .95s var(--ease-vault);
  }
  .drawer.on{clip-path:circle(150% at 92% 5%)}
  .drawer a{
    font-family:var(--serif-display);font-size:1.45rem;line-height:1.25;
    color:var(--parchment-dim);text-decoration:none;
    padding:.42rem 1rem;transition:color .4s ease;
  }
  .drawer a:hover{color:var(--gold-pale)}

  /* The departments, under The Collection. Sans, small, two columns when
     there is room for two — six of these stacked is most of a phone screen. */
  .drawer__subs{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:.1rem .4rem;max-width:22rem;margin:.1rem 0 .7rem;
  }
  .drawer__sub{
    font-family:var(--sans,system-ui,sans-serif);
    font-size:.82rem!important;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted)!important;padding:.3rem .55rem!important;
  }
  .drawer__sub:hover{color:var(--gold-pale)!important}

  /* Taller than the screen: stop centring, so nothing is stranded above the
     top edge, and let it scroll. */
  @media (max-height:640px){
    .drawer{justify-content:flex-start}
    .drawer a{font-size:1.25rem;padding:.34rem 1rem}
  }
}
@media(min-width:1121px){.drawer{display:none}}

@media(max-width:760px){
  /* the Enquire button lives in the drawer at this width — keeping it in the
     bar pushes the hamburger off-screen on a 390px viewport */
  .nav-right > .btn{display:none}
  .nav{padding-left:1.1rem;padding-right:1.1rem}
  .lang button, .lang a{padding:.5rem .55rem; min-width:2rem}
}
@media(max-width:640px){
  .hero-meta{display:none}
  .brandmark .wordmark span{display:none}
  .brandmark .wordmark b{font-size:.8rem;letter-spacing:.26em}
}

/* ============================================================
   ARABIC / RTL
   ============================================================ */
html[dir="rtl"] body{font-family:var(--arabic)}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .piece-name,
html[dir="rtl"] .svc-name,
html[dir="rtl"] .cat-name,
html[dir="rtl"] .statement q{font-family:var(--arabic);line-height:1.5}
html[dir="rtl"] .display{font-size:clamp(2.4rem,1.2rem + 5.2vw,5.4rem);line-height:1.28}
html[dir="rtl"] .eyebrow{letter-spacing:0}
html[dir="rtl"] .btn,
html[dir="rtl"] .navpill a,
html[dir="rtl"] .piece-cat,
html[dir="rtl"] .svc-tag,
html[dir="rtl"] .ccard span,
html[dir="rtl"] .foot-grid h4,
html[dir="rtl"] .fig span,
html[dir="rtl"] .clock span{letter-spacing:.06em;font-family:var(--arabic)}
html[dir="rtl"] .marquee-track{animation-direction:reverse}
/* hero-meta stays on the left in RTL, but the WhatsApp pill deliberately
   does NOT mirror — it would land on top of it, and bottom-right is the
   convention users expect in both directions. */
html[dir="rtl"] .hero-meta{text-align:left;right:auto;left:var(--gutter)}
html[dir="rtl"] .svc:hover{padding-left:0;padding-right:1.6rem}
html[dir="rtl"] .svc::before{transform-origin:right;background:linear-gradient(270deg,rgba(212,175,55,.09),transparent 62%)}
html[dir="rtl"] .foot-grid a:hover{transform:translateX(-6px)}
html[dir="rtl"] .cat:hover .cat-name{transform:translateX(-5px)}
html[dir="rtl"] .cat-arrow{right:auto;left:1.3rem;transform:translate(8px,8px) scaleX(-1)}
html[dir="rtl"] .cat:hover .cat-arrow{transform:scaleX(-1)}
html[dir="rtl"] .statement::before{left:auto;right:1rem}

/* --------------------------------------------------------------------------
   Heritage & Engineering — service cards and the two galleries   2026-09-07
   Built to the client's appendices. Tokens only, so both themes carry it.
   -------------------------------------------------------------------------- */
.heritage-hero{
  position:relative;margin-top:clamp(2rem,4vw,3.4rem);overflow:hidden;
  border:var(--rule);
}
.heritage-hero img{
  display:block;width:100%;height:clamp(260px,42vw,540px);object-fit:cover;
}

.sec-head--centred{justify-content:center;text-align:center;flex-direction:column}
.sec-head--centred .section-title{margin-inline:auto}
.sec-rule{
  display:block;width:64px;height:1px;background:var(--brass);
  margin:1rem auto 0;opacity:.7;
}

/* the seven cards --------------------------------------------------------- */
.svc-cards{
  display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  margin-top:clamp(1.4rem,3vw,2.4rem);
}
.svc-card{
  background:var(--surface);border:var(--rule);
  padding:clamp(1.5rem,2.6vw,2.2rem);
  display:flex;flex-direction:column;gap:.85rem;
  text-align:center;
  transition:background .7s ease,border-color .7s ease;
}
.svc-card:hover{background:var(--surface-3);border-color:var(--filigree-lit)}
.svc-card h3{
  font-family:var(--serif-display);font-weight:400;
  font-size:clamp(1.12rem,1rem + .5vw,1.32rem);line-height:1.25;
  color:var(--brass);margin:0;text-wrap:balance;
}
.svc-card p{
  margin:0;color:var(--muted);font-size:.94rem;line-height:1.62;
}
.svc-card__tag{
  margin-top:auto;font-family:var(--serif-ui);font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}

/* the collaboration line --------------------------------------------------- */
.collab{padding-block:clamp(1.6rem,3vw,2.6rem)}
.collab__line{
  margin:0;text-align:center;color:var(--parchment-dim);
  font-size:1rem;line-height:1.75;
  padding-block:clamp(1.2rem,2.4vw,1.9rem);
  border-top:var(--rule);border-bottom:var(--rule);
}
.collab__line b{color:var(--parchment);font-weight:500}

/* the carousels ------------------------------------------------------------ */
.gallery{padding-top:clamp(1.4rem,3vw,2.2rem)}
.carousel{
  position:relative;margin-top:clamp(1.2rem,2.5vw,2rem);
  border:var(--rule);background:var(--surface);
}
.carousel__track{position:relative;aspect-ratio:16/10;overflow:hidden}
@media(max-width:640px){ .carousel__track{aspect-ratio:4/3} }
.carousel__slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease-vault),visibility .7s;
  display:flex;align-items:center;justify-content:center;
  background:var(--obsidian-deep);
}
.carousel__slide.is-on{opacity:1;visibility:visible}
.carousel__slide img{width:100%;height:100%;object-fit:contain;display:block}
.carousel__slide figcaption{
  position:absolute;inset-inline:0;bottom:0;
  padding:.7rem 1rem;text-align:center;
  font-size:.86rem;color:var(--parchment-dim);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));
}
.carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:56px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:var(--rule);background:var(--surface);
  color:var(--brass);font-size:1.5rem;line-height:1;
  transition:background .4s ease,color .4s ease;
}
.carousel__nav:hover{background:var(--surface-3);color:var(--gold-pale)}
.carousel__nav:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.carousel__nav--prev{inset-inline-start:-1px}
.carousel__nav--next{inset-inline-end:-1px}
.carousel__count{
  margin:0;padding:.7rem 1rem;text-align:center;
  border-top:var(--rule);
  font-family:var(--serif-ui);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
html[dir="rtl"] .carousel__nav--prev,
html[dir="rtl"] .carousel__nav--next{transform:translateY(-50%) scaleX(-1)}

.prose--centred{text-align:center}
.prose--centred .prose-cta{justify-content:center}

/* The social handle on a contact card. The client's note was about the
   letters stranded on their own line: the cards used to print the whole
   address, which is too long to fit and broke mid-word. The address is now
   reduced to the account name (see social_links in bootstrap.php) and this
   keeps a long one on one line rather than letting it break at all — a name
   is not a sentence and has no sensible place to break. */
.ccard__handle{
  font-size:.92rem;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;max-width:100%;
}
@media (max-width:900px){ .ccard__handle{font-size:.86rem} }

/* A sold piece keeps its place in the catalogue and loses its price.
   Asked for on 20 September, confirmed on the 21st, and reworked on the 27th:
   "the text sold is small so difficult to view it, and if it is possible to put
   sold items in grey color".

   Both halves of that are the same point. The word was set in place of a price
   and smaller than one, so on a page of thirty pieces it read as an absence
   rather than as a state — and the card around it looked exactly like a card
   you could still buy from. So the word is now a plate with a rule round it,
   set at the size of the price it replaces, and the card itself steps back:
   the photograph loses its colour and the title its brightness, which is how
   a dealer's window separates what is gone from what is for sale without
   anybody having to read a word. */
.piece-price.sold,
.record-price.sold {
  display: inline-block;
  font-family: var(--serif-ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  border: 1px solid var(--filigree);
  border-radius: 1px;
  padding: .34em .7em .3em;
  line-height: 1;
  background: rgba(var(--parchment-rgb), .04);
}
.record-price.sold { font-size: .8rem; padding: .42em .9em .38em; }

/* The card, stepped back. Greyscale rather than a grey overlay: a wash would
   dull the frame and the brackets too, and the photograph is the only part
   that should lose its colour. */
.piece--sold .piece-frame img {
  filter: grayscale(1) contrast(.92);
  opacity: .66;
}
.piece--sold:hover .piece-frame img { opacity: .78; }
.piece--sold .piece-name { color: var(--parchment-dim); }
.piece--sold .piece-cat  { color: var(--muted); }

/* And the piece's own page, where the photograph is the point and is left
   alone — a buyer who has followed a link to a sold piece wants to see it
   properly. Only the plate under the title says so. */
.piece-detail--sold .record-title { color: var(--parchment-dim); }

@media (prefers-reduced-motion: no-preference) {
  .piece--sold .piece-frame img { transition: opacity .6s var(--ease-vault); }
}

/* A telephone number on a desktop is not a link — see the note in site.js.
   It keeps the card's look and loses the promise that clicking it will ring. */
a.ccard.is-flat { cursor: default; }
a.is-flat { text-decoration: none; cursor: default; }

/* Latin text on an Arabic page.
   A value written in English — "20 cm width and 25 cm height", a maker's name,
   a title nobody has translated yet — sits inside a right-to-left page, and
   without being told otherwise the browser lays its words out right to left:
   the owner's screenshot of 28 September shows "cm width and 25 cm height 20".
   Each of those elements now carries its own direction (bidi_dir(): right to
   left when it holds Arabic letters, left to right when it is purely Latin);
   this keeps them all aligned with the rest of the page whichever it is. */
html[dir="rtl"] .spec td[dir],
html[dir="rtl"] .record-title[dir],
html[dir="rtl"] .record-lede[dir],
html[dir="rtl"] .piece-name[dir] { text-align: right; }

/* Text arrows point the way the reader moves: in Arabic, "next" is to the left. */
.arr { display: inline-block; }
html[dir="rtl"] .arr { transform: scaleX(-1); }