/* ============================================================
   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} }

/* ------------------------------------------------------------------
   24 Oct 2026 — contact cards on wide screens (client note "contact.pdf")
   On a large monitor the six cards sat in one row, each too narrow for the
   map button, whose label was set not to wrap — so "Voir sur la carte"
   ran out of its frame in every language. Two changes: never more than
   three cards to a row (six read as 3 × 2), and the button may wrap.
   ------------------------------------------------------------------ */
.contact-grid{
  grid-template-columns:repeat(auto-fill,minmax(max(15rem,calc((100% - 2 * clamp(.7rem,1.4vw,1rem)) / 3)),1fr));
}
.mapbtn{white-space:normal;text-align:start;line-height:1.35;max-width:100%;box-sizing:border-box}
.ccard{overflow:hidden}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .contact-grid{grid-template-columns:1fr} }

/* ------------------------------------------------------------------
   24 Oct 2026 — the announcement line, larger and held at the top
   (client note 7). It was .66rem capitals in a static strip that
   scrolled away with the page. Now it is fixed above the header at a
   readable size, and its height (--annh, set by site-x.js) pushes the
   header and the first section of every page down by exactly that much.
   ------------------------------------------------------------------ */
:root{--annh:0px}
.annbar{
  position:fixed; top:0; inset-inline:0; z-index:950;
  min-height:2.75rem; padding:.6rem 3.2rem;
  font-size:clamp(.82rem,.75rem + .3vw,.98rem); letter-spacing:.06em; text-transform:none;
  font-weight:500; line-height:1.35;
  box-shadow:0 1px 0 rgba(var(--obsidian-rgb),.18), 0 6px 18px rgba(var(--obsidian-rgb),.18);
}
.annbar__t{font-family:var(--serif-ui)}
a.annbar__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.annbar__x{font-size:1.5rem;padding:.35rem .6rem}
html[dir="rtl"] .annbar{font-size:clamp(1rem,.9rem + .35vw,1.15rem);letter-spacing:0}
body:has(.annbar:not(.is-gone)) .nav:not(.is-stuck){top:var(--annh,2.75rem)}
.nav{top:var(--annh,0px)}
.nav.is-stuck{top:var(--annh,0px)}
main > section:first-of-type{scroll-margin-top:var(--annh)}
html.has-annbar body:not(.is-home) main > section:first-of-type{padding-top:calc(clamp(7rem,9vh + 5rem,10rem) + var(--annh))}
html.has-annbar .hero{padding-top:var(--annh)}
@media (max-width:760px){
  .annbar{padding:.5rem 2.6rem .5rem 1rem;font-size:.84rem;min-height:2.5rem}
  html[dir="rtl"] .annbar{padding:.5rem 1rem .5rem 2.6rem}
}

/* ------------------------------------------------------------------
   24 Oct 2026 — the house film on the front page (client note 6)
   ------------------------------------------------------------------ */
.hero-film{
  display:flex; align-items:center; gap:1rem;
  margin-top:clamp(1.2rem,3vh,2rem); max-width:min(100%,32rem);
}
.filmcard{
  display:block; position:relative; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--filigree-lit); background:var(--obsidian-deep);
  aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:2px;
  transition:border-color .4s ease, transform .5s var(--ease-vault);
}
.filmcard--hero{width:clamp(10.5rem,15vw,15rem)}
.filmcard__img{position:absolute;inset:0;background:center/cover no-repeat var(--surface)}
.filmcard__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmcard__btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--obsidian-rgb),.72); border:1px solid var(--gold);
  transition:transform .45s var(--ease-vault), background-color .35s ease;
}
.filmcard__btn svg{width:1.1rem;height:1.1rem;fill:var(--gold);margin-inline-start:.15rem}
.filmcard:hover,.filmcard:focus-visible{border-color:var(--gold)}
.filmcard:hover .filmcard__btn,.filmcard:focus-visible .filmcard__btn{transform:translate(-50%,-50%) scale(1.1);background:var(--gold)}
.filmcard:hover .filmcard__btn svg,.filmcard:focus-visible .filmcard__btn svg{fill:var(--obsidian)}
.hero-film__txt{min-width:0}
.hero-film__eyebrow{margin:0;font-family:var(--serif-ui);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hero-film__title{margin:.25rem 0 .35rem;font-family:var(--serif-display);font-size:1.15rem;line-height:1.25;color:var(--parchment)}
.hero-film__all{font-family:var(--serif-ui);font-size:.78rem;letter-spacing:.08em;color:var(--gold-soft);text-decoration:none;border-bottom:1px solid var(--filigree-lit)}
.hero-film__all:hover{color:var(--gold);border-color:var(--gold)}
html[dir="rtl"] .hero-film__eyebrow{font-family:var(--arabic);font-size:.9rem;letter-spacing:0}
html[dir="rtl"] .hero-film__all{font-family:var(--arabic);font-size:.95rem;letter-spacing:0}
@media (max-height:760px) and (min-width:761px){ .filmcard--hero{width:9.5rem} .hero-film{margin-top:1rem} }
@media (max-width:760px){
  .hero-film{gap:.8rem}
  .filmcard--hero{width:9rem}
  .hero-film__title{font-size:1rem}
}

/* The viewer: the film at full size over a dimmed page. */
.filmbox{
  width:min(96vw, calc(88vh * 16 / 9)); max-width:none; max-height:none;
  padding:0; border:1px solid var(--filigree-lit); background:var(--obsidian-deep);
  overflow:visible;
}
.filmbox::backdrop{background:rgba(var(--obsidian-deep-rgb),.86)}
.filmbox__stage{position:relative;aspect-ratio:16/9;width:100%}
.filmbox__stage video,.filmbox__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--obsidian-deep)}
.filmbox__x{
  position:absolute; top:-2.8rem; inset-inline-end:0;
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
  background:rgba(var(--obsidian-rgb),.8); color:var(--gold); border:1px solid var(--gold);
  font-size:1.5rem; line-height:1;
}
html.filmbox-on{overflow:hidden}
@media (max-width:760px){ .filmbox__x{top:auto;bottom:-3rem} }

/* /films */
.filmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:clamp(1rem,2vw,1.6rem)}
.filmgrid__item{margin:0}
.filmgrid__item figcaption{margin-top:.75rem;display:flex;flex-direction:column;gap:.2rem}
.filmgrid__item figcaption b{font-family:var(--serif-display);font-weight:400;font-size:1.2rem;color:var(--parchment)}
.filmgrid__item figcaption span{color:var(--muted);font-size:.95rem}
.filmgrid .filmcard__btn{width:3.6rem;height:3.6rem}
.filmgrid .filmcard__btn svg{width:1.4rem;height:1.4rem}
.mcat__bar{top:calc(4.4rem + var(--annh,0px)) !important}

/* ------------------------------------------------------------------
   24 Oct 2026 — "Tell me when something similar arrives" and the
   monthly letter (client notes 9, 10)
   ------------------------------------------------------------------ */
.notify__box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  border:var(--rule);padding:clamp(1.3rem,3vw,2.2rem);background:var(--surface)}
.notify__h{margin:.3rem 0 .5rem;font-family:var(--serif-display);font-weight:400;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);color:var(--parchment)}
.notify__p{margin:0;color:var(--muted)}
.notify__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.notify__check{display:flex;gap:.55rem;align-items:flex-start;margin:.7rem 0 .9rem;font-size:.95rem;color:var(--muted)}
.notify__check input{margin-top:.25rem;accent-color:var(--gold)}
.notify__ok{margin:0;color:var(--gold-soft);font-size:1.05rem}
.notify__err{margin:0 0 .6rem;color:#b5603f}
@media (max-width:760px){ .notify__box{grid-template-columns:1fr} .notify__row{grid-template-columns:1fr} }
.foot-letter{margin:1.6rem 0 0;padding-top:1.4rem;border-top:var(--rule);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}
.foot-letter label{font-family:var(--serif-ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.foot-letter__row{display:flex;gap:.5rem;flex:1 1 18rem;max-width:30rem}
.foot-letter__row input{flex:1;min-width:0;padding:.55rem .75rem;background:transparent;border:1px solid var(--filigree-lit);color:var(--parchment);font:inherit}
.foot-letter p{margin:0;color:var(--gold-soft)}
html[dir="rtl"] .foot-letter label{font-family:var(--arabic);font-size:1rem;letter-spacing:0}
.alerts-page .narrow{max-width:40rem}
.foot-letter__err{flex-basis:100%;color:#b5603f}

/* ------------------------------------------------------------------
   24 Oct 2026 — QA fixes for laptop-height screens, phones and contrast
   ------------------------------------------------------------------ */
/* D3: the hero's words never slide under the header and the announcement,
   whatever the window's height; on short screens the type steps down. */
.hero{padding-top:calc(var(--annh,0px) + clamp(6.2rem,12vh,8rem))}
.display{font-size:min(clamp(2.9rem,1.4rem + 6.6vw,7rem),12.5vh)}
@media (max-height:820px) and (min-width:761px){
  .hero .display{margin-bottom:1.1rem}
  .hero-lede{margin-bottom:1.5rem;font-size:1.02rem}
  .hero-meta{display:none}
}
@media (max-height:700px) and (min-width:761px){
  .display{font-size:min(4.2rem,11vh)}
  .hero-lede{display:none}
}
/* D2: the footer letter row may not be wider than the phone. */
.foot-letter{min-width:0}
.foot-letter label{flex:1 1 100%;min-width:0}
.foot-letter__row{flex:1 1 100%;min-width:0;max-width:100%}
.foot-letter__row .btn{flex:none}
/* D9: contrast — the announcement text in the deepest ink, the film link in parchment,
   and visible focus on every new control. */
.annbar{color:var(--obsidian-deep)}
.hero-film__all{color:var(--parchment);border-bottom-color:var(--gold)}
.hero-film__eyebrow,.notify__check,.foot-letter label{font-size:max(.72rem,12px)}
.notify__check span{text-transform:none;letter-spacing:.01em;font-family:inherit;font-size:.95rem}
.filmcard:focus-visible,.annbar__x:focus-visible,.filmbox__x:focus-visible,
.hero-film__all:focus-visible,.foot-letter input:focus-visible,.notify__form input:focus-visible,
.notify__form button:focus-visible,.foot-letter button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (hover:none){ .filmcard:hover .filmcard__btn{transform:translate(-50%,-50%);background:rgba(var(--obsidian-rgb),.72)} }
/* D9: the line keeps the house brass, a shade deeper, with ivory ink — 6:1. */
.annbar{background:#6f5525;color:#f6f0e2}
.annbar a.annbar__t,.annbar__x{color:#f6f0e2}
/* D3 on short phones (≤ 760 px high): the lede steps aside, the buttons share a row. */
@media (max-width:760px) and (max-height:760px){
  .hero-lede{display:none}
  .hero-cta{flex-direction:row}
  .hero-cta .btn{flex:1 1 0;padding-inline:.5rem;min-width:0;white-space:normal;text-align:center;letter-spacing:.1em;line-height:1.3}
  .display{font-size:clamp(2rem,9.5vw,2.7rem)}
  .hero .display{margin-bottom:.8rem}
  .hero-film{margin-top:.9rem}
}
/* D9: error text and the footer label at full contrast. */
.notify__err,.foot-letter__err{color:#8f3f24}
.theme-dark .notify__err,.theme-dark .foot-letter__err{color:#e8a184}
.foot-letter label{color:var(--parchment)}