/* Oh!Mumbai — the hooks the admin panel writes into: phone / desktop variants
   of copy and photos, and the focal point of every photo. Loads after
   cinematic.css; 640px is the breakpoint that file is written around. */

picture{display:contents}

/* focal point: --pos-d on desktop, --pos-m on phones (falls back to desktop) */
img[style*="--pos-d"]{--pos:var(--pos-d);object-position:var(--pos)}
@media (max-width:640px){
  img[style*="--pos-d"]{--pos:var(--pos-m,var(--pos-d))}
}

/* copy written separately for phones */
.v-d{display:contents}
.v-m{display:none}
/* blocks shown on one kind of screen only */
@media (min-width:641px){ .only-m{display:none!important} }
@media (max-width:640px){
  .v-d{display:none}
  .v-m{display:contents}
  .only-d{display:none!important}
}

/* light styling from the editor */
.ch-title strong,.ch-quote strong,.tk-link strong{font-weight:700}
.ch-note strong,.ch-cite strong,.reel-dish strong{font-weight:500}
.ch-note a{color:var(--terra-light);border-bottom:1px solid currentColor}

/* «← Назад» next to the logo on every page but the home page */
.reel-back{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;margin:0 auto 0 clamp(14px,2.6vw,36px);
  font-size:14px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
  transition:color .25s ease;
}
.reel-back svg{width:20px;height:20px;flex:none;transition:transform .35s var(--reel-ease)}
/* Optical centring: the logo's lettering sits 5% of its height below the
   image's middle (the ornament on the M fills the top), so the link follows
   it down; capitals carry no descenders, so the word drops onto the arrow. */
.reel-back{position:relative;top:calc(var(--logo-w) * .0266)}
.reel-back span{position:relative;top:.068em}
.reel-back:hover,.reel-back:focus-visible{color:var(--terra-light)}
.reel-back:hover svg{transform:translateX(-4px)}
body.is-takeover .reel-back{opacity:0;pointer-events:none}
@media (max-width:380px){ .reel-back span{display:none} }

/* ---------- legal documents (/privacy, /consent) ---------- */
.doc-page--text .doc{max-width:860px}
.doc-updated{color:var(--terra-light);font-size:14px;letter-spacing:.06em;margin-top:10px}
.doc-text{
  margin-top:clamp(24px,4vh,40px);
  font-size:16px;line-height:1.7;color:var(--cream);
  -webkit-user-select:text;user-select:text;
}
.doc-text h2{
  font-family:"TT Gertika",Georgia,serif;font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.2;color:var(--seashell);
  margin:2.2em 0 .7em;
}
.doc-text h3{font-size:17px;font-weight:500;color:var(--seashell);margin:1.6em 0 .5em}
.doc-text p,.doc-text ul,.doc-text ol{margin:0 0 1em}
.doc-text ul,.doc-text ol{padding-left:1.3em}
.doc-text li{margin:.35em 0}
.doc-text strong{font-weight:500;color:var(--seashell)}
.doc-text a{color:var(--terra-light);border-bottom:1px solid currentColor}
.doc-text a:hover{color:var(--seashell)}
.doc-table{overflow-x:auto;margin:0 0 1.2em}
.doc-text table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:1.5}
.doc-text th,.doc-text td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid rgba(237,226,209,.18)}
.doc-text th{font-weight:500;color:var(--seashell);border-bottom-color:rgba(237,226,209,.4)}

/* legal links in the closing slide may be buttons (cookie settings) */
.rc-legal button{font:inherit;letter-spacing:.04em;color:var(--cream);opacity:.78;padding:0;cursor:pointer}
.rc-legal button:hover{opacity:1}

/* ---------- cookie banner & settings ---------- */
.consent{
  position:fixed;z-index:95;
  left:var(--gut);right:var(--gut);bottom:calc(var(--gut) + env(safe-area-inset-bottom));
  display:flex;justify-content:flex-end;pointer-events:none;
}
.consent-in{
  pointer-events:auto;
  width:100%;max-width:460px;
  background:var(--choc-deep);color:var(--cream);
  border:1px solid rgba(237,226,209,.2);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  padding:20px 22px;
  font-size:14px;line-height:1.55;
  animation:consent-in .5s var(--reel-ease);
}
@keyframes consent-in{from{opacity:0;transform:translateY(16px)}}
.consent--panel{inset:0;align-items:center;justify-content:center;padding:var(--gut);background:rgba(20,14,12,.6);pointer-events:auto}
.consent--panel .consent-in{max-width:520px;max-height:calc(100dvh - 2 * var(--gut));overflow-y:auto}
.consent-title{font-family:"TT Gertika",Georgia,serif;font-size:19px;line-height:1.2;color:var(--seashell);margin-bottom:8px}
.consent-text{margin-bottom:14px}
.consent-text a{color:var(--terra-light);border-bottom:1px solid currentColor}
.consent-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.consent-btn{
  min-height:44px;padding:0 18px;border-radius:100px;
  border:1px solid rgba(237,226,209,.45);color:var(--cream);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.consent-btn:hover{border-color:var(--cream);color:var(--seashell)}
.consent-btn--solid{background:var(--terra);border-color:var(--terra);color:var(--seashell)}
.consent-btn--solid:hover{background:var(--terra-hover);border-color:var(--terra-hover)}
.consent-link{min-height:44px;padding:0 6px;color:var(--terra-light);font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid transparent}
.consent-link:hover{color:var(--seashell)}
.consent-rows{list-style:none;margin:6px 0 14px}
.consent-row{border-top:1px solid rgba(237,226,209,.14)}
.consent-row label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer}
.consent-row input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--terra)}
.consent-row span{display:flex;flex-direction:column;gap:2px}
.consent-row b{font-weight:500;color:var(--seashell)}
.consent-row small{font-size:13px;line-height:1.45;opacity:.8}
/* the floating booking button steps aside while the banner is up */
body.has-consent .reel-jump{opacity:0;pointer-events:none}
@media (max-width:640px){
  .consent{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .consent-in{max-width:none;padding:18px}
  .consent-actions .consent-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .consent-in{animation:none} }