/* ============================================================
   VESTIGE — additions of 18 October 2026
   The client's notes of 13 October, the phone experience, and the
   pieces the new features add to every page. Tokens only, so every
   theme the client builds in Appearance carries them.
   ============================================================ */

/* ------------------------------------------------------------------
   1. "Eliminate the shadow" (note 3)
   The footer faded to a hard-coded near-black, rgba(7,6,5,.9), which on the
   light themes the client now uses (Pearl Gallery, Silver Museum …) read as
   a dark smear across the bottom of every page. It follows the theme now, and
   with "Flat finish" on (the default; Appearance) the drop shadows and dark
   fades go altogether.
   ------------------------------------------------------------------ */
footer{background:linear-gradient(180deg,transparent,rgba(var(--obsidian-deep-rgb),.9))}
.theme-light footer{background:var(--obsidian-deep)}
.is-flat footer{background:var(--obsidian-deep)}
.is-flat .marquee{background:var(--surface)}
.is-flat .piece:hover{box-shadow:none;transform:translateY(-3px)}
.is-flat .nav.is-stuck .navpill,
.is-flat.theme-light .nav.is-stuck .navpill{box-shadow:none}
.is-flat .wa{box-shadow:none}
.is-flat .piece{background:var(--surface)}
.is-flat .piece-frame::after{opacity:.35}

/* ------------------------------------------------------------------
   2. The header links answer the pointer (note 5)
   The hover was a faint gold glow under the word — invisible on a light
   theme, so The Collection / Our Story / Heritage looked dead. Now the word
   takes the accent colour and a rule draws in under it; the page you are on
   keeps the rule.
   ------------------------------------------------------------------ */
.navpill a{transition:color .35s ease, background-color .35s ease}
.navpill a::after{
  content:''; position:absolute; inset-inline:1.05rem; bottom:.32rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease-vault);
}
.navpill a:hover,
.navpill a:focus-visible{color:var(--gold);background:var(--filigree)}
.navpill a:hover::after,
.navpill a:focus-visible::after,
.navpill a.is-live::after,
.navpill a[aria-current]::after{transform:scaleX(1)}
.navpill a.is-live,
.navpill a[aria-current]{color:var(--gold)}
.theme-light .navpill a:hover{color:var(--gold-pale)}
.foot-grid a:hover,.foot-social a:hover{color:var(--gold)}

/* ------------------------------------------------------------------
   3. Arabic, larger (Arabic_text.pdf)
   The small wide-tracked capitals that suit Latin are far too small set in
   Amiri, whose letters sit lower and finer: the menu, the line under the
   wordmark, the eyebrows, the moving ticker, the buttons, the card labels and
   the whole footer. Arabic only — French and English are unchanged.
   ------------------------------------------------------------------ */
html[dir="rtl"] .navpill a{font-size:1rem;letter-spacing:0;padding:.5rem 1rem}
@media (min-width:1121px){ html[dir="rtl"] .navpill a{font-size:1.06rem} }
html[dir="rtl"] .brandmark .wordmark span{font-size:.86rem;letter-spacing:0;margin-top:.3rem}
html[dir="rtl"] .eyebrow{font-size:1rem;letter-spacing:0}
html[dir="rtl"] .marquee span{font-size:1rem;letter-spacing:.04em}
html[dir="rtl"] .btn{font-size:.95rem;letter-spacing:0;font-family:var(--arabic)}
html[dir="rtl"] .btn.btn-sm{font-size:.92rem;letter-spacing:0}
html[dir="rtl"] .ccard span{font-size:.92rem;letter-spacing:0}
html[dir="rtl"] .ccard em{font-size:1.05rem}
html[dir="rtl"] .foot-grid h4{font-size:.98rem;letter-spacing:0}
html[dir="rtl"] .foot-grid a{font-size:1.08rem}
html[dir="rtl"] .foot-blurb{font-size:1.05rem}
html[dir="rtl"] .foot-social a{font-size:.9rem;letter-spacing:0}
html[dir="rtl"] .foot-base{font-size:.88rem;letter-spacing:0}
html[dir="rtl"] .hero-meta{font-size:1rem;letter-spacing:0}
html[dir="rtl"] .hero-meta b,
html[dir="rtl"] .hero-meta span{letter-spacing:0;font-family:var(--arabic)}
html[dir="rtl"] .piece-cat{font-size:.9rem;letter-spacing:0}
html[dir="rtl"] .piece-go{font-size:.9rem;letter-spacing:0}
html[dir="rtl"] .piece-price{font-size:1.05rem}
html[dir="rtl"] .filters-label,
html[dir="rtl"] .results-bar,
html[dir="rtl"] .crumbs{font-size:.92rem;letter-spacing:0}
html[dir="rtl"] .record-pricenote,
html[dir="rtl"] .record-grade{font-size:1rem}
html[dir="rtl"] .lang a{font-size:.95rem}
/* Latin inside an Arabic line keeps its own order: the footer printed the
   telephone as "909 708 78 961+". */
bdi{unicode-bidi:isolate}

/* ------------------------------------------------------------------
   4. The contact cards, aligned (Arabic_text.pdf) and the map (18 Oct)
   Each card was a cell of one grid painted with the rule colour, so a row
   with fewer cards than columns left a grey block, and the numbers and
   addresses carried their own direction and sat against the opposite edge
   from their labels. Cards are separate tiles now, every line aligns to the
   same edge, and the map is a button that says so.
   ------------------------------------------------------------------ */
.contact-grid{background:none;border:0;gap:clamp(.7rem,1.4vw,1rem)}
.ccard{border:var(--rule);display:flex;flex-direction:column;align-items:flex-start;text-align:start}
.ccard b,.ccard em,.ccard span{width:100%;text-align:start}
.ccard__mail{font-size:.98rem !important;overflow-wrap:normal !important;word-break:normal}
.ccard__handle bdi{display:inline}
.mapbtn{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.1rem; padding:.62rem 1.05rem .58rem;
  border:1px solid var(--filigree-lit); border-radius:999px;
  font-style:normal; font-family:var(--serif-ui); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  background:rgba(var(--parchment-rgb),.03);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.mapbtn svg{width:1.05rem;height:1.05rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.ccard:hover .mapbtn{background:var(--gold);color:var(--obsidian);border-color:var(--gold)}
html[dir="rtl"] .mapbtn{font-family:var(--arabic);font-size:.92rem;letter-spacing:0}
.mapbtn{white-space:nowrap;max-width:100%}

/* ------------------------------------------------------------------
   5. The announcement line
   ------------------------------------------------------------------ */
.annbar{
  position:relative; z-index:900;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:.55rem 3rem; min-height:2.4rem;
  background:var(--gold); color:var(--obsidian);
  font-family:var(--serif-ui); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  text-align:center;
}
.annbar__t{color:inherit;text-decoration:none}
a.annbar__t:hover{text-decoration:underline}
.annbar__x{
  position:absolute; inset-inline-end:.6rem; top:50%; transform:translateY(-50%);
  background:none; border:0; color:inherit; font-size:1.3rem; line-height:1; cursor:pointer; padding:.3rem .5rem;
}
.annbar.is-gone{display:none}
html[dir="rtl"] .annbar{font-family:var(--arabic);font-size:.95rem;letter-spacing:0}
/* The header floats over the hero; with the line above it, it sits below. */
body:has(.annbar:not(.is-gone)) .nav:not(.is-stuck){top:2.4rem}

/* ------------------------------------------------------------------
   6. The house film (note 9)
   ------------------------------------------------------------------ */
.film{position:relative;aspect-ratio:16/9;border:var(--rule);background:var(--obsidian-deep);overflow:hidden}
.film video,.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.film__play{
  position:absolute; inset:0; width:100%; border:0; cursor:pointer;
  background:var(--surface) center/cover no-repeat;
}
.film__btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:5.2rem; height:5.2rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(var(--obsidian-rgb),.72); border:1px solid var(--gold);
  transition:transform .5s var(--ease-vault), background-color .4s ease;
}
.film__btn svg{width:1.8rem;height:1.8rem;fill:var(--gold);margin-inline-start:.25rem}
.film__play:hover .film__btn{transform:translate(-50%,-50%) scale(1.08);background:var(--gold)}
.film__play:hover .film__btn svg{fill:var(--obsidian)}

/* ------------------------------------------------------------------
   7. The phone (note 6: "a complete mobile experience")
   ------------------------------------------------------------------ */

/* 7a. Tab bar — Home, Collection, Search, Saleroom/Cart/Contact. */
.tabbar{display:none}
.searchsheet[hidden]{display:none}
@media (max-width:760px){
  .tabbar{
    display:flex; position:fixed; z-index:870; inset-inline:0; bottom:0;
    padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
    background:rgba(var(--surface-rgb),.96);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--filigree-lit);
  }
  .tabbar__a{
    flex:1 1 0; position:relative;
    display:flex; flex-direction:column; align-items:center; gap:.18rem;
    padding:.35rem .2rem .25rem; min-height:3.1rem;
    color:var(--muted); text-decoration:none;
    font-family:var(--serif-ui); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar__a svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .tabbar__a.is-on{color:var(--gold)}
  .tabbar__a.is-on::before{
    content:''; position:absolute; top:-.36rem; inset-inline:28%; height:2px; background:var(--gold);
  }
  .tabbar__badge{
    position:absolute; top:.15rem; inset-inline-start:calc(50% + .35rem);
    min-width:1.05rem; height:1.05rem; padding:0 .25rem; border-radius:999px;
    background:var(--gold); color:var(--obsidian);
    font:600 .62rem/1.05rem var(--serif-body); letter-spacing:0; text-align:center;
  }
  html[dir="rtl"] .tabbar__a{font-family:var(--arabic);font-size:.8rem;letter-spacing:0}

  body.has-tabbar{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}
  body.has-tabbar .wa{bottom:calc(4.9rem + env(safe-area-inset-bottom))}
  /* A piece page puts its own buying bar there instead. */
  body.is-piece .tabbar{display:none}
  body.is-piece .wa{display:none}

  /* Search, from the tab bar, as a sheet at the top of the screen. */
  .searchsheet{
    position:fixed; inset:0 0 auto 0; z-index:960;
    padding:calc(.8rem + env(safe-area-inset-top)) .9rem .8rem;
    background:var(--surface); border-bottom:1px solid var(--filigree-lit);
  }
  .searchsheet__f{display:flex;align-items:center;gap:.6rem}
  .searchsheet__f svg{width:1.3rem;height:1.3rem;flex:none;fill:none;stroke:var(--gold);stroke-width:1.6}
  .searchsheet__f input{
    flex:1; min-width:0; font:1.05rem var(--serif-body); color:var(--parchment);
    background:var(--obsidian-deep); border:1px solid var(--filigree); padding:.7rem .8rem;
  }
  .searchsheet__x{background:none;border:0;color:var(--parchment-dim);font-size:1.8rem;line-height:1;padding:.2rem .4rem}

  /* The header carries the brand, the languages and the menu; the bag lives
     in the tab bar. */
  .nav-right .hdr-icon--cart,.nav-right .shop-cart{display:none}
  .annbar{font-size:.58rem;letter-spacing:.12em;padding:.5rem 2.6rem}
}

/* 7b. The collection on a phone: chips and a filter sheet. */
.mcat{display:none}
@media (max-width:900px){
  .mcat{display:block;margin:0 0 1.1rem}
  .mcat__chips{
    display:flex; gap:.45rem; overflow-x:auto; scroll-snap-type:x proximity;
    margin-inline:calc(-1 * var(--gutter,1.25rem)); padding:.1rem var(--gutter,1.25rem) .55rem;
    scroll-padding-inline:var(--gutter,1.25rem);
    scrollbar-width:none;
  }
  .mcat__chips::-webkit-scrollbar{display:none}
  .mchip{
    flex:none; scroll-snap-align:start;
    padding:.5rem .95rem .45rem; border:1px solid var(--filigree-lit); border-radius:999px;
    font-family:var(--serif-body); font-size:.92rem; color:var(--parchment-dim); text-decoration:none;
    white-space:nowrap; background:rgba(var(--parchment-rgb),.02);
  }
  .mchip.on{background:var(--gold);border-color:var(--gold);color:var(--obsidian)}
  .mchip--sub{font-size:.84rem;padding:.38rem .8rem .34rem}
  html[dir="rtl"] .mchip{font-family:var(--arabic);font-size:1rem}
  .mcat__bar{
    position:sticky; top:4.4rem; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.6rem 0; background:var(--obsidian);
    border-bottom:1px solid var(--filigree);
  }
  .mcat__btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem 1rem; border:1px solid var(--filigree-lit); background:var(--surface);
    color:var(--parchment); font-family:var(--serif-ui); font-size:.66rem;
    letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  }
  .mcat__btn svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.6}
  .mcat__btn b{
    min-width:1.2rem; height:1.2rem; border-radius:999px; background:var(--gold); color:var(--obsidian);
    font:600 .7rem/1.2rem var(--serif-body); letter-spacing:0; text-align:center;
  }
  html[dir="rtl"] .mcat__btn{font-family:var(--arabic);font-size:.95rem;letter-spacing:0}
  .mcat__n{color:var(--muted);font-size:.9rem}
  .results .results-bar{display:none}

  /* The filters, as a sheet from the bottom. */
  .filters{
    position:fixed !important; z-index:980; inset:auto 0 0 0; top:auto;
    max-height:86vh; overflow-y:auto; overscroll-behavior:contain;
    background:var(--surface); border-top:1px solid var(--filigree-lit);
    padding:0 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
    transform:translateY(105%); visibility:hidden;
    transition:transform .45s var(--ease-vault), visibility 0s linear .45s;
  }
  .filters.is-open{transform:none;visibility:visible;transition:transform .45s var(--ease-vault)}
  .filters__head{
    position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
    padding:1rem 0 .8rem; margin-bottom:.8rem; background:var(--surface); border-bottom:1px solid var(--filigree);
  }
  .filters__head b{font-family:var(--serif-display);font-weight:400;font-size:1.3rem;color:var(--parchment)}
  .filters__x{background:none;border:0;font-size:2rem;line-height:1;color:var(--parchment-dim);cursor:pointer;padding:0 .3rem}
  .filters .btn-full{position:sticky;bottom:0}
  .filters-scrim{
    position:fixed; inset:0; z-index:975; background:rgba(var(--obsidian-deep-rgb),.6);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .filters-scrim.is-on{opacity:1;pointer-events:auto}
  body.sheet-open{overflow:hidden}
}
@media (min-width:901px){
  .filters__head,.filters-group--msort{display:none}
}
.filters-group--msort select{
  width:100%;background:var(--obsidian-deep);color:var(--parchment);
  border:1px solid var(--filigree);padding:.6rem .7rem;font:1rem var(--serif-body);
}

/* 7c. Pieces two to a row on a phone, sized for a thumb. */
@media (max-width:760px){
  .collection{grid-template-columns:1fr 1fr;gap:.7rem}
  .collection .piece-body{padding:.85rem .85rem 1rem}
  .collection .piece-name{font-size:1rem;line-height:1.3}
  .collection .piece-cat{font-size:.5rem;letter-spacing:.14em;margin-bottom:.35rem}
  .collection .piece-go{display:none}
  .collection .piece-foot{margin-top:.55rem}
  .collection .bracket{display:none}
  .piece:hover{transform:none}
  html[dir="rtl"] .collection .piece-cat{font-size:.82rem}
}
@media (max-width:340px){ .collection{grid-template-columns:1fr} }

/* 7d. The piece page on a phone: swipe through the photographs, and keep the
   price and the next step under the thumb. */
.mbuy{display:none}
@media (max-width:760px){
  .plate-strip{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:.5rem;
    scrollbar-width:none; padding-bottom:.2rem;
  }
  .plate-strip::-webkit-scrollbar{display:none}
  .plate-strip > *{flex:none;scroll-snap-align:start}
  .mbuy{
    display:flex; align-items:center; gap:.7rem;
    position:fixed; z-index:870; inset-inline:0; bottom:0;
    padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(var(--surface-rgb),.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--filigree-lit);
  }
  .mbuy__p{flex:1;min-width:0;line-height:1.15}
  .mbuy__p small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.08em}
  .mbuy__p b{font-family:var(--serif-display);font-weight:400;font-size:1.25rem;color:var(--parchment)}
  .mbuy__p b.sold{font-size:.72rem}
  .mbuy form{margin:0}
  .mbuy .btn{padding:.85rem 1.2rem}
  .mbuy__wa{
    flex:none; width:2.9rem; height:2.9rem; border-radius:50%;
    display:grid; place-items:center; border:1px solid var(--filigree-lit); color:var(--gold);
  }
  .mbuy__wa svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.4}
  body.is-piece{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .record-cta{flex-wrap:wrap}
}

/* 7e. Smaller things that add up on a small screen. */
@media (max-width:760px){
  .hero{min-height:88svh}
  .scrollcue{display:none}
  .display{font-size:clamp(2.3rem,10vw,3.4rem)}
  .hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-cta .btn{justify-content:center}
  .sec-head{gap:1rem}
  .sec-head > .btn{align-self:flex-start}
  input,select,textarea{font-size:16px}  /* iOS zooms into anything smaller */
  .pubform-row{grid-template-columns:1fr !important}
  .contact-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:460px){ .contact-grid{grid-template-columns:1fr} }