/*
 * Vochti — the retail homepage.
 *
 * Loaded only where the retail homepage is drawn (in <head>, so the first paint is
 * already styled). Ivory ground, espresso type, brass for the one accent, the same
 * faces as the rest of the house. Logical properties throughout, so the right-to-left
 * page is the same page mirrored rather than a second layout.
 *
 * Type: every face is a variable, never a literal stack in a rule. The Arabic page
 * swaps the variables (Amiri for display, IBM Plex Sans Arabic for the rest), so a
 * component can no longer pin a Latin-only face over the site's Arabic rules.
 */

.vo{
  --rh-serif:'Fraunces',Georgia,serif;
  --rh-sans:'Archivo',system-ui,sans-serif;
  --rh-track:-.012em;       /* display tracking: tight for Fraunces, none for Arabic */
  --rh-lead:1.1;            /* display line-height: Arabic needs room for its marks */
  --rh-nav:76px;
}
html[dir="rtl"] .vo{
  --rh-serif:'Amiri','Fraunces',Georgia,serif;
  --rh-sans:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif;
  --rh-track:0;
  --rh-lead:1.45;
}
/* The bar is fixed, so the page starts below it. vochti-home.js measures it and overwrites --rh-nav;
   these are what it measures, so the first paint already sits where it will end up. */
@media (max-width:1040px){ .vo{ --rh-nav:129px; } }
@media (max-width:760px){ .vo{ --rh-nav:121px; } }

.vo .rh-home{ padding-top:var(--rh-nav); font-family:var(--rh-sans); }
.vo .rh-h1{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.vo .rh-sec{ max-width:1240px; margin:0 auto; padding:56px 34px 0; }
.vo .rh-sec ul{ list-style:none; margin:0; padding:0; }

/* Display type, one rule for all of it. */
.vo .rh-slide-title, .vo .rh-tile-name, .vo .rh-strip-title, .vo .rh-strip-items b,
.vo .rh-row-head h2, .vo .rh-campaign-copy h2, .vo .rh-tool h2{
  font-family:var(--rh-serif); font-weight:300; letter-spacing:var(--rh-track); line-height:var(--rh-lead); margin:0; }
html[dir="rtl"] .vo .rh-slide-title, html[dir="rtl"] .vo .rh-tile-name, html[dir="rtl"] .vo .rh-strip-title,
html[dir="rtl"] .vo .rh-strip-items b, html[dir="rtl"] .vo .rh-row-head h2,
html[dir="rtl"] .vo .rh-campaign-copy h2, html[dir="rtl"] .vo .rh-tool h2{ font-weight:400; font-variation-settings:normal; }

/* ---------- the banner slider ------------------------------- */
.vo .rh-hero{ position:relative; background:var(--espresso); color:var(--ivory); overflow:hidden; }
.vo .rh-slides{ position:relative; height:clamp(400px,42vw,580px); }
.vo .rh-slide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease), visibility 0s linear .8s; }
.vo .rh-slide.is-active{ opacity:1; visibility:visible; transition-delay:0s; }
.vo .rh-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vo .rh-slide::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(41,37,31,.84) 0%, rgba(41,37,31,.5) 44%, rgba(41,37,31,.06) 100%); }
html[dir="rtl"] .vo .rh-slide::after{ background:linear-gradient(to left, rgba(41,37,31,.84) 0%, rgba(41,37,31,.5) 44%, rgba(41,37,31,.06) 100%); }
.vo .rh-copy{ position:absolute; z-index:2; inset-inline-start:0; top:0; bottom:0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap:18px; max-width:min(640px,100%);
  padding:0 34px 36px; margin-inline-start:max(0px,calc((100vw - 1240px) / 2)); }
.vo .rh-slide-title{ font-variation-settings:'opsz' 120; font-size:clamp(32px,4.4vw,60px); text-wrap:balance; }
html[dir="rtl"] .vo .rh-slide-title{ font-size:clamp(34px,4.7vw,64px); }
.vo .rh-slide-text{ margin:0; max-width:46ch; font-size:16px; line-height:1.65; opacity:.94; text-wrap:pretty; }
html[dir="rtl"] .vo .rh-slide-text{ font-size:17px; line-height:1.85; }
.vo .rh-btn{ display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:0 26px; background:var(--ivory);
  color:var(--espresso); font-family:var(--rh-sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  transition:background .3s ease, color .3s ease; }
.vo .rh-btn:hover{ background:var(--brass); }
.vo .rh-btn:focus-visible{ outline-color:var(--ivory); }
.vo .rh-btn-ink{ background:var(--espresso); color:var(--ivory); }
.vo .rh-btn-ink:hover{ background:var(--oxide); }
.vo .rh-btn-ink:focus-visible{ outline-color:var(--espresso); }
html[dir="rtl"] .vo .rh-arrow-i{ display:inline-block; transform:scaleX(-1); }
.vo .rh-flip{ display:inline-block; }
html[dir="rtl"] .vo .rh-flip{ transform:scaleX(-1); }

.vo .rh-ctl{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0;
  background:rgba(41,37,31,.35); color:var(--ivory); border:1px solid rgba(244,240,231,.55); cursor:pointer; font-size:16px;
  transition:background .25s ease, color .25s ease; }
.vo .rh-ctl:hover{ background:var(--ivory); color:var(--espresso); }
.vo .rh-ctl:disabled{ opacity:.35; cursor:default; background:rgba(41,37,31,.35); color:var(--ivory); }
.vo .rh-hero .rh-ctl:focus-visible, .vo .rh-dot:focus-visible{ outline-color:var(--ivory); }
.vo .rh-pause{ font-size:11px; letter-spacing:0; }
.vo .rh-controls{ position:absolute; z-index:3; inset-inline-end:max(34px,calc((100vw - 1240px) / 2 + 34px)); bottom:28px; display:flex; gap:8px; }
.vo .rh-dots{ position:absolute; z-index:3; inset-inline-start:0; inset-inline-end:0; bottom:20px; display:flex;
  justify-content:center; gap:2px; pointer-events:none; }
.vo .rh-dot{ pointer-events:auto; width:28px; height:28px; padding:0; background:none; border:0; cursor:pointer; position:relative; }
.vo .rh-dot::before{ content:''; position:absolute; inset:9px; border-radius:50%; border:1px solid var(--ivory); transition:background .25s ease; }
.vo .rh-dot.is-active::before{ background:var(--ivory); }

/* ---------- circular category navigation -------------------- */
.vo .rh-circles{ max-width:1240px; margin:0 auto; padding:36px 34px 4px; }
.vo .rh-circles ul{ display:flex; gap:clamp(18px,3.2vw,44px); justify-content:center; overflow-x:auto; padding:6px 4px 14px;
  scrollbar-width:thin; scroll-snap-type:x proximity; }
.vo .rh-circles ul, .vo .rh-circles li{ list-style:none; margin:0; }
.vo .rh-circles li{ flex:0 0 auto; scroll-snap-align:center; }
.vo .rh-circles a{ display:flex; flex-direction:column; align-items:center; gap:12px; width:clamp(84px,9.4vw,118px); text-align:center; }
.vo .rh-circle{ display:block; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--bone);
  box-shadow:0 0 0 1px var(--rule); transition:box-shadow .35s ease, transform .6s var(--ease); }
.vo .rh-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.vo .rh-circle .rh-blank{ display:block; width:100%; height:100%; background:var(--bone); box-shadow:inset 0 0 0 14px var(--ivory); }
.vo .rh-circles a:hover .rh-circle, .vo .rh-circles a:focus-visible .rh-circle{ box-shadow:0 0 0 2px var(--brass); transform:translateY(-2px); }
.vo .rh-circle-name{ font-size:13px; line-height:1.4; font-weight:500; letter-spacing:.02em; text-wrap:balance; }
html[dir="rtl"] .vo .rh-circle-name{ font-size:14.5px; line-height:1.6; }

/* ---------- room tiles -------------------------------------- */
.vo .rh-tiles ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vo .rh-tile{ position:relative; display:block; height:100%; overflow:hidden; background:var(--espresso); color:var(--ivory); }
.vo .rh-tile:focus-visible{ outline-offset:3px; }
.vo .rh-tile-img{ display:block; }
.vo .rh-tile-img img{ width:100%; aspect-ratio:5/4; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.vo .rh-tile .rh-blank{ display:block; aspect-ratio:5/4; background:var(--bone); }
.vo .rh-tile::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(41,37,31,.9) 0%, rgba(41,37,31,.52) 34%, rgba(41,37,31,0) 62%); transition:opacity .3s ease; }
.vo .rh-tile:hover img{ transform:scale(1.04); }
.vo .rh-tile-cap{ position:absolute; z-index:1; inset-inline:0; bottom:0; display:flex; flex-direction:column; gap:4px; padding:16px 18px 16px; }
.vo .rh-tile-name{ font-size:22px; }
.vo .rh-tile-from{ font-size:12.5px; line-height:1.5; opacity:.96; }
html[dir="rtl"] .vo .rh-tile-name{ font-size:25px; }
html[dir="rtl"] .vo .rh-tile-from{ font-size:13.5px; }
.vo .rh-tile-from bdi{ color:#E3D3AE; font-weight:500; }

/* ---------- promotional strip (off until real terms are approved) -------- */
.vo .rh-strip-in{ background:var(--espresso); color:var(--ivory); padding:30px 34px; display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center; }
.vo .rh-strip-title{ font-size:clamp(24px,2.6vw,34px); flex:1 1 220px; }
.vo .rh-strip-items{ flex:3 1 480px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.vo .rh-strip-items li{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid rgba(244,240,231,.28); }
.vo .rh-strip-items b{ font-size:24px; }
.vo .rh-strip-items span{ font-size:13px; opacity:.86; }
.vo .rh-code{ display:inline-block; margin-top:4px; align-self:flex-start; padding:4px 10px; background:var(--brass); color:var(--espresso);
  font-size:11px; letter-spacing:.12em; font-weight:500; }

/* ---------- product rows ------------------------------------ */
.vo .rh-row-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid var(--rule); }
.vo .rh-row-head .lbl{ color:var(--brass-ink); }
.vo .rh-row-head h2{ font-size:clamp(25px,3vw,34px); margin-top:8px; }
html[dir="rtl"] .vo .rh-row-head h2{ font-size:clamp(28px,3.3vw,38px); margin-top:4px; }
.vo .rh-row-tools{ display:flex; align-items:center; gap:18px; }
.vo .rh-all{ font-family:var(--rh-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; padding:10px 0; border-bottom:1px solid currentColor; }
.vo .rh-all:hover{ color:var(--oxide); }
.vo .rh-nav{ display:inline-flex; gap:8px; }
.vo .rh-nav[hidden]{ display:none !important; }
.vo .rh-row .rh-ctl, .vo .rh-nav .rh-ctl{ background:transparent; color:var(--espresso); border-color:var(--espresso); }
.vo .rh-nav .rh-ctl:hover{ background:var(--espresso); color:var(--ivory); }
.vo .rh-nav .rh-ctl:disabled{ background:transparent; color:var(--espresso); }
.vo .rh-track{ position:relative; display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding:2px 2px 14px;
  scrollbar-width:thin; overscroll-behavior-x:contain; }
.vo .rh-item{ flex:0 0 clamp(210px,23%,280px); scroll-snap-align:start; min-width:0; }
.vo .rh-item .card{ height:100%; }
.vo .rh-item .card .p{ font-size:15px; }
.vo .rh-item .card-sale{ position:absolute; top:12px; inset-inline-end:12px; background:var(--oxide); color:var(--ivory);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; padding:5px 9px; }
.vo .rh-item .card .p del{ opacity:.55; font-size:.9em; margin-inline-end:6px; }
.vo .rh-item .card .p ins{ text-decoration:none; }
.vo .rh-item .card .p .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------- campaign banner (neutral: a photograph and a line of the house's own words) ---------- */
.vo .rh-campaign-in{ position:relative; overflow:hidden; background:var(--espresso); color:var(--ivory); min-height:clamp(230px,24vw,320px);
  display:flex; align-items:center; }
.vo .rh-campaign-in > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block; }
.vo .rh-campaign-in::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(41,37,31,.88) 0%, rgba(41,37,31,.5) 52%, rgba(41,37,31,.08) 100%); }
html[dir="rtl"] .vo .rh-campaign-in::after{ background:linear-gradient(to left, rgba(41,37,31,.88) 0%, rgba(41,37,31,.5) 52%, rgba(41,37,31,.08) 100%); }
.vo .rh-campaign-copy{ position:relative; z-index:2; padding:34px clamp(22px,5vw,64px); max-width:min(600px,100%);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.vo .rh-campaign-copy h2{ font-size:clamp(26px,3.2vw,42px); text-wrap:balance; }
html[dir="rtl"] .vo .rh-campaign-copy h2{ font-size:clamp(28px,3.5vw,46px); }
.vo .rh-campaign-copy p{ margin:0; max-width:44ch; opacity:.94; line-height:1.65; }

/* ---------- the ending: room tool, collection by type, journal, in one short band ---------- */
.vo .rh-end{ margin-top:64px; background:var(--bone); }
.vo .rh-end-in{ max-width:1240px; margin:0 auto; padding:44px 34px 40px; display:grid; gap:34px; }
.vo .rh-tool{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px 56px; align-items:center; }
.vo .rh-tool-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.vo .rh-tool .lbl{ color:var(--brass-ink); }
.vo .rh-tool h2{ font-size:clamp(28px,3.4vw,42px); }
html[dir="rtl"] .vo .rh-tool h2{ font-size:clamp(30px,3.7vw,46px); }
.vo .rh-tool p{ margin:0; max-width:56ch; line-height:1.65; }
.vo .rh-tool .rh-btn{ margin-top:6px; }
.vo .rh-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; counter-reset:none; }
.vo .rh-steps li{ display:flex; align-items:baseline; gap:12px; padding:12px 0; border-top:1px solid var(--rule); font-size:14px; line-height:1.45; }
.vo .rh-step-n{ font-family:var(--rh-sans); font-size:11px; letter-spacing:.14em; color:var(--brass-ink); font-variant-numeric:tabular-nums; }
html[dir="rtl"] .vo .rh-steps li{ font-size:15px; line-height:1.7; }
.vo .rh-more{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:26px 56px; padding-top:26px; border-top:1px solid var(--rule); }
.vo .rh-more:has(> :only-child){ grid-template-columns:1fr; }
.vo .rh-end .lbl{ margin:0 0 12px; display:block; }
.vo .rh-types ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.vo .rh-types a{ display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border:1px solid var(--espresso); font-size:13px; line-height:1;
  transition:background .25s ease, color .25s ease; }
.vo .rh-types a:hover, .vo .rh-types a:focus-visible{ background:var(--espresso); color:var(--ivory); }
html[dir="rtl"] .vo .rh-types a{ font-size:14.5px; }
.vo .rh-journal-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.vo .rh-journal-head .lbl{ margin:0 0 4px; }
.vo .rh-journal ul{ list-style:none; margin:0; padding:0; }
.vo .rh-journal li{ border-top:1px solid var(--rule); }
.vo .rh-journal li a{ display:block; padding:11px 0; font-size:14.5px; line-height:1.5; }
.vo .rh-journal li a:hover{ color:var(--oxide); }
.vo .rh-journal .rh-all{ white-space:nowrap; }

/* ---------- narrower screens -------------------------------- */
@media (max-width:1040px){
  .vo .rh-tiles ul{ grid-template-columns:repeat(2,1fr); }
  .vo .rh-item{ flex-basis:clamp(200px,30%,260px); }
  .vo .rh-tool, .vo .rh-more{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .vo .rh-sec{ padding:40px 18px 0; }
  .vo .rh-slides{ height:clamp(430px,114vw,540px); }
  .vo .rh-slide::after{ background:linear-gradient(to top, rgba(41,37,31,.9) 0%, rgba(41,37,31,.56) 52%, rgba(41,37,31,.12) 100%); }
  html[dir="rtl"] .vo .rh-slide::after{ background:linear-gradient(to top, rgba(41,37,31,.9) 0%, rgba(41,37,31,.56) 52%, rgba(41,37,31,.12) 100%); }
  .vo .rh-copy{ justify-content:flex-end; padding:0 20px 84px; margin-inline-start:0; }
  .vo .rh-controls{ inset-inline-end:16px; bottom:16px; }
  .vo .rh-dots{ inset-inline-end:auto; inset-inline-start:8px; bottom:22px; justify-content:flex-start; }
  .vo .rh-circles{ padding:24px 8px 0; }
  .vo .rh-circles ul{ justify-content:flex-start; padding-inline:10px; }
  .vo .rh-tiles ul{ gap:10px; }
  .vo .rh-tile-cap{ padding:12px 12px 12px; }
  .vo .rh-tile-name{ font-size:18px; }
  html[dir="rtl"] .vo .rh-tile-name{ font-size:21px; }
  .vo .rh-tile-from{ font-size:11.5px; }
  .vo .rh-strip-in{ padding:24px 18px; }
  .vo .rh-item{ flex-basis:64%; }
  .vo .rh-nav{ display:none !important; } /* a thumb scrolls the row */
  .vo .rh-campaign-copy{ padding:28px 20px; }
  .vo .rh-end{ margin-top:48px; }
  .vo .rh-end-in{ padding:34px 18px 32px; gap:26px; }
  .vo .rh-steps{ grid-template-columns:1fr; gap:0; }
}

/* ---------- reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  .vo .rh-slide{ transition:none; }
  .vo .rh-circle, .vo .rh-tile-img img, .vo .rh-btn{ transition:none; }
  .vo .rh-circles a:hover .rh-circle{ transform:none; }
  .vo .rh-tile:hover img{ transform:none; }
  .vo .rh-track{ scroll-behavior:auto; }
}

/* Arabic has no case and its letters must stay joined: no tracking, no capitals. */
html[dir="rtl"] .vo .rh-btn, html[dir="rtl"] .vo .rh-all, html[dir="rtl"] .vo .rh-code,
html[dir="rtl"] .vo .rh-item .card-sale, html[dir="rtl"] .vo .rh-item .card-no,
html[dir="rtl"] .vo .rh-item .card-buy, html[dir="rtl"] .vo .rh-circle-name,
html[dir="rtl"] .vo .rh-end .lbl, html[dir="rtl"] .vo .rh-step-n, html[dir="rtl"] .vo .rh-row-head .lbl{
  letter-spacing:0; text-transform:none; }
/* ...and Arabic is not set at the 10-11px that suits tracked Latin capitals. */
html[dir="rtl"] .vo .rh-btn, html[dir="rtl"] .vo .rh-all, html[dir="rtl"] .vo .rh-row-head .lbl, html[dir="rtl"] .vo .rh-end .lbl,
html[dir="rtl"] .vo .rh-code, html[dir="rtl"] .vo .rh-item .card-sale{ font-size:13px; }