/* ─────────── space pages ───────────
   A page per space, over the film (spaces.js). ERA Residence's apartment
   page in SAM's colours: a full-screen hero, a sticky column of copy beside
   the gallery, the next space, all fourteen, the sales office
   (docs/superpowers/specs/2026-09-24-space-pages-design.md).
   Anything GSAP moves gets no CSS transition on the same property. */

/* the film's scroller is locked out while a page is open — keys and touch
   on the fixed bars must not move it. #space keeps scrolling on its own.
   The lock sits on body, not html: html must stay visible so body's own
   overflow-x:hidden (style.css) keeps reaching the viewport — locking html
   itself stops that propagation, turns body into its own scroll container,
   and unsticks the gallery's position:sticky .gal-screen underneath. */
html.space-open{scrollbar-gutter:stable}
html.space-open body{overflow:hidden}

#space{position:fixed;inset:0;z-index:90;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  background:var(--ink);color:var(--chalk);scrollbar-width:none}
#space::-webkit-scrollbar{display:none}
.sp-content{position:relative}
/* A scrim under the fixed wordmark, Close and language toggle, for the page
   scrolling past them: above the page, below .sp-bar (3) and the global
   chrome (100). A light shade, always there, like the chrome itself; out
   before the sticky copy's top, so the lede is never dimmed. */
#space::before{content:"";position:fixed;left:0;right:0;top:0;z-index:2;pointer-events:none;
  height:calc(var(--chrome-edge) * 2 + var(--chrome-size) + .5rem);
  background:linear-gradient(rgba(8,8,10,.6),rgba(8,8,10,.36) 55%,rgba(8,8,10,0))}

/* ── the counter and the close button, beside the language toggle ── */
/* on the chrome's row (style.css: --chrome-*): one toggle and one gap in
   from the edge, the same height as the toggle, so the two sit level */
.sp-bar{position:fixed;top:var(--chrome-edge);inset-inline-end:calc(var(--chrome-edge) + var(--chrome-size) + var(--chrome-gap));
  z-index:3;height:var(--chrome-size);display:flex;align-items:center;gap:1.1rem}
.sp-count{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.24em;color:var(--chalk-dim);
  font-variant-numeric:tabular-nums;text-shadow:0 1px 12px rgba(8,8,10,.7)}
.sp-close,.lb-close{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  height:var(--chrome-size);min-width:var(--chrome-size);font-family:var(--font-mono);font-size:.6875rem;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;color:var(--chalk-dim);background:rgba(20,18,15,.4);
  border:1px solid var(--hairline-strong);backdrop-filter:blur(10px);padding:0 .95rem;cursor:pointer;
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
/* focus lands here when a page opens: lit for the keyboard only (main.js:
   html.kbd), or a tap opened the page with Close already looking pressed */
.sp-close:hover,html.kbd .sp-close:focus-visible,.lb-close:hover,html.kbd .lb-close:focus-visible{
  color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}
.sp-close-x{position:relative;width:.7rem;height:.7rem}
.sp-close-x::before,.sp-close-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:currentColor;transform:rotate(45deg)}
.sp-close-x::after{transform:rotate(-45deg)}

/* ── hero ── */
.sp-hero{position:relative;height:100vh;height:100lvh;overflow:hidden}
.sp-hero-media{position:absolute;inset:0;background:var(--ink-800)}
.sp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sp-hero--none .sp-hero-img{visibility:hidden}
.sp-hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,8,10,.5),transparent 24%,transparent 50%,rgba(8,8,10,.82))}
/* lifted clear of a phone's URL bar, as the gallery's copy is, and of the
   sales dock in the corner under View images (style.css: --dock-clear) */
.sp-hero-copy{position:absolute;inset-inline:var(--gutter);bottom:calc(100lvh - 100svh + clamp(2.4rem,7vh,5rem) + var(--dock-clear));
  pointer-events:none}
.sp-crumbs{display:flex;flex-wrap:wrap;gap:.8em;margin:0 0 1.5rem;font-family:var(--font-mono);font-weight:400;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--chalk-dim)}
.sp-crumbs i{font-style:normal;opacity:.5}
.sp-kicker,.sp-next-kicker,.sp-all-kicker,.sp-contact-kicker{display:block;margin:0 0 1.3rem;font-family:var(--font-mono);
  font-weight:400;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--electric-soft)}
.sp-title{margin:0;max-width:14ch;font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,9vw,9.5rem);
  line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 4px 60px rgba(8,8,10,.55);outline:none}
.sp-hero-view{position:absolute;inset-inline-end:var(--gutter);bottom:calc(100lvh - 100svh + clamp(2.4rem,7vh,5rem) + var(--dock-clear));
  display:inline-flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--chalk);background:rgba(20,18,15,.35);
  border:1px solid var(--hairline-strong);backdrop-filter:blur(10px);cursor:pointer;
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
.sp-hero-view:hover,.sp-hero-view:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}
.sp-hero-view-n{font-variant-numeric:tabular-nums;opacity:.7}
.sp-cue{position:absolute;left:50%;bottom:calc(100lvh - 100svh + 1.2rem);width:1px;height:2.6rem;overflow:hidden;
  background:var(--hairline-strong)}
.sp-cue::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--chalk);
  animation:sp-cue 2.2s var(--ease-expo) infinite}
@keyframes sp-cue{to{top:100%}}

/* ── body: the sticky column beside the gallery ── */
.sp-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,6vw,7rem);
  align-items:start;max-width:var(--max-edge);margin:0 auto;padding:clamp(5rem,14vh,9rem) var(--gutter)}
.sp-info{position:sticky;top:clamp(5.5rem,13vh,8.5rem)}
/* one per split line (spaces-motion.js), as .gal-mask */
.sp-mask{display:block;overflow:clip}
.sp-line{display:block}
.sp-lede{margin:0 0 1.8rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.3vw,2.4rem);
  line-height:1.12;letter-spacing:-.01em}
.sp-desc{margin:0 0 2.6rem;max-width:46ch;color:var(--chalk-dim);font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.75}
.sp-facts{margin:0 0 2.8rem}
.sp-fact{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:1rem;padding:1.05rem 0}
.sp-fact-rule{position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline-strong);transform-origin:left center}
html[dir="rtl"] .sp-fact-rule{transform-origin:right center}
.sp-fact dt{padding-top:.2rem;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--chalk-faint)}
.sp-fact dd{margin:0;font-size:.98rem;line-height:1.55}
.sp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem}

/* ERA's buttons: the fill wipes in from the inline start and the label
   rolls up into a second copy of itself */
.sp-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:3.1rem;
  padding:0 1.6rem;overflow:hidden;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--chalk);background:none;border:1px solid var(--hairline-strong);border-radius:999px;cursor:pointer;
  transition:color .5s var(--ease-expo),border-color .5s var(--ease-expo)}
.sp-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--electric);transform:scaleX(0);
  transform-origin:left center;transition:transform .6s cubic-bezier(.25,1,.5,1)}
html[dir="rtl"] .sp-btn::before{transform-origin:right center}
.sp-btn--solid{color:var(--ink);background:var(--chalk);border-color:var(--chalk)}
.sp-btn:hover,.sp-btn:focus-visible{color:var(--ink);border-color:var(--electric);outline:none}
.sp-btn:hover::before,.sp-btn:focus-visible::before{transform:scaleX(1)}
.sp-btn-roll{display:grid;overflow:hidden;line-height:1.4}
.sp-btn-roll>span{grid-area:1/1;transition:transform .6s cubic-bezier(.25,1,.5,1)}
.sp-btn-roll>span+span{transform:translateY(100%)}
.sp-btn:hover .sp-btn-roll>span:first-child,.sp-btn:focus-visible .sp-btn-roll>span:first-child{transform:translateY(-100%)}
.sp-btn:hover .sp-btn-roll>span+span,.sp-btn:focus-visible .sp-btn-roll>span+span{transform:translateY(0)}
.sp-back{padding:0 .2rem;border-color:transparent}
.sp-back::before{display:none}
.sp-back:hover,.sp-back:focus-visible{color:var(--electric);border-color:transparent}

/* ── gallery: a pair of details, or one image, per row ── */
.sp-gallery{display:flex;flex-direction:column;gap:clamp(.8rem,1.4vw,1.4rem)}
.sp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(.8rem,1.4vw,1.4rem)}
.sp-row--wide{grid-template-columns:minmax(0,1fr)}
.sp-fig{margin:0}
.sp-fig-btn{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.sp-fig-btn:focus-visible{outline:1px solid var(--electric);outline-offset:4px}
/* three wrappers, three transforms: clip (reveal) > zoom (hover) > img (reveal scale) */
.sp-fig-clip{display:block;overflow:hidden;background:var(--ink-800)}
.sp-fig-zoom{display:block;transition:transform .8s cubic-bezier(.25,1,.5,1)}
.sp-fig-btn:hover .sp-fig-zoom{transform:scale(1.03)}
.sp-fig-img{display:block;width:100%;height:auto}
.sp-fig-media{position:relative}
.sp-fig-poster{display:block;width:100%;height:auto}
.sp-fig-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── the next space ── */
.sp-next{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,6vw,7rem);align-items:end;
  max-width:var(--max-edge);margin:0 auto;padding:clamp(4rem,11vh,7rem) var(--gutter);border-top:1px solid var(--hairline);
  color:inherit;text-decoration:none}
.sp-next:focus-visible{outline:1px solid var(--electric);outline-offset:-6px}
.sp-next-text{display:block}
.sp-next-title{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,5.6vw,6rem);
  line-height:.95;letter-spacing:-.015em;text-transform:uppercase}
.sp-next-arrow{position:relative;display:block;width:2.4rem;height:1px;margin-top:1.6rem;background:currentColor;
  transition:transform .6s cubic-bezier(.25,1,.5,1)}
.sp-next-arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
html[dir="rtl"] .sp-next-arrow{scale:-1 1}
.sp-next:hover .sp-next-arrow{transform:translateX(.6rem)}
.sp-next-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink-800)}
.sp-next-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.25,1,.5,1)}
.sp-next:hover .sp-next-img{transform:scale(1.04)}

/* ── all fourteen: a mosaic ──
   Cards over their pictures in a dense grid of five: the page's own space two
   by two, others two wide to close its rows (spaces.js: is-current, is-wide). Each picture
   a little dimmed under a shade, the number, name and group over its foot;
   pointed at, it comes up to full light and grows. The page's own card is
   marked You are here. On a phone: a strip of cards. */
.sp-all{max-width:var(--max-edge);margin:0 auto;padding:0 var(--gutter) clamp(4rem,11vh,7rem)}
.sp-all-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:clamp(1.3rem,2.4vw,2rem)}
.sp-all-head .sp-all-kicker{margin:0}

.sp-all-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:clamp(9rem,12.5vw,13rem);
  grid-auto-flow:dense;gap:.45rem;margin:0;padding:0;list-style:none}
.sp-all-track li{min-width:0}
.sp-all-track li.is-wide{grid-column:span 2}
.sp-all-track li.is-current{grid-column:span 2;grid-row:span 2}
.sp-all-link{position:relative;isolation:isolate;display:block;height:100%;overflow:hidden;color:var(--chalk);text-decoration:none;
  background:var(--ink-800)}
.sp-all-thumb{position:absolute;inset:0;overflow:hidden}
.sp-all-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.9);
  transition:transform 1.4s var(--ease-expo),filter .7s var(--ease-expo)}
.sp-all-track li.is-current .sp-all-thumb img{filter:brightness(.92)}
.sp-all-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.82),rgba(8,8,10,.2) 45%,rgba(8,8,10,0) 70%)}
.sp-all-meta{position:absolute;inset-inline:1rem;bottom:.9rem;display:flex;flex-direction:column;gap:.35rem}
.sp-all-n{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.2em;color:var(--electric);font-variant-numeric:tabular-nums}
.sp-all-name{font-family:var(--font-display);font-weight:400;font-size:clamp(.9rem,1.15vw,1.2rem);line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase}
.sp-all-track li.is-current .sp-all-name{font-size:clamp(1.5rem,2.4vw,2.5rem)}
.sp-all-group{font-family:var(--font-mono);font-weight:400;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--chalk-dim)}
.sp-all-here{position:absolute;top:1rem;inset-inline-start:1rem;display:none;align-items:center;gap:.5rem;padding:.4rem .7rem;
  font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:var(--electric)}
.sp-all-here::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:currentColor}
.sp-all-link[aria-current="page"] .sp-all-here{display:inline-flex}
.sp-all-link:hover .sp-all-thumb img,.sp-all-link:focus-visible .sp-all-thumb img{filter:brightness(1) saturate(1);transform:scale(1.06)}
.sp-all-link:focus-visible{outline:none}
html.kbd .sp-all-link:focus-visible{outline:1px solid var(--electric);outline-offset:-1px}
.sp-all-progress{display:none}

/* ── the sales office, RATA's: its wordmark and board are the closing's 01
   block, cloned (style.css: .cl-rata, .cl-board), as that block sets them —
   the wordmark at the start, the sales line across on its foot ── */
.sp-contact{max-width:var(--max-edge);margin:0 auto;padding:clamp(4rem,11vh,7rem) var(--gutter) clamp(5rem,14vh,9rem);
  border-top:1px solid var(--hairline)}
.sp-phone{display:inline-block;margin-bottom:.6rem;font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.6rem,7vw,7rem);line-height:1;letter-spacing:-.02em;color:var(--chalk);text-decoration:none;transition:color .35s}
.sp-phone:hover,.sp-phone:focus-visible{color:var(--electric);outline:none}
/* Book a visit lands focus here (tabindex=-1), as a swap does on .sp-title */
.sp-contact-title{margin:0;font-weight:300;font-size:clamp(1rem,1.3vw,1.25rem);color:var(--chalk-dim);outline:none}
.sp-contact-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem 3rem}
.sp-rata{display:block;width:clamp(13rem,32vw,32rem);line-height:0;transition:opacity .45s var(--ease-expo)}
.sp-rata img{display:block;width:100%;height:auto}
.sp-rata:hover{opacity:.78}
.sp-rata:focus-visible{outline:1px solid var(--electric);outline-offset:.6rem}
.sp-contact-line{display:flex;flex-direction:column;align-items:flex-end;text-align:end}
.sp-contact-lead{max-width:46ch;margin:clamp(2.6rem,5vw,4.5rem) 0 0;color:var(--chalk);font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.6rem);line-height:1.5}
html[lang="fa"] .sp-contact-lead{line-height:1.95}
.sp-contact-board .cl-facts{margin-top:clamp(2.6rem,5vw,4.5rem)}
/* the developer, one quiet line: SAM Projects built it, RATA sells it */
.sp-dev{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;margin:2rem 0 0;font-family:var(--font-mono);
  font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--chalk-dim)}
html[lang="fa"] .sp-dev{font-size:.8rem;letter-spacing:.06em}
.sp-dev-link{color:var(--chalk);text-decoration:none;letter-spacing:.08em;text-transform:none;transition:color .35s}
.sp-dev-link::after{content:" ↗"}
.sp-dev-link:hover,.sp-dev-link:focus-visible{color:var(--electric);outline:none}

/* ── the closing's footer, cloned (style.css: .cl-foot): the sales office's
   own bottom padding is the gap the closing gives it as a margin ── */
/* centred as #contact centres it in the closing: on a phone the footer stacks,
   and its long last line wraps */
.sp-foot{max-width:var(--max-edge);margin:0 auto;padding:0 var(--gutter);text-align:center}
.sp-foot .cl-foot{margin-top:0}

/* the next space's picture, grown to the whole screen (spaces-motion.js: swap) */
.sp-flip{position:fixed;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.sp-flip img{display:block;width:100%;height:100%;object-fit:cover}

.sp-mbar{display:none}

/* ── lightbox ── */
#space-lightbox{position:fixed;inset:0;z-index:105;background:rgba(8,8,10,.97);touch-action:none;
  -webkit-user-select:none;user-select:none}
#space-lightbox[hidden]{display:none}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center}
.lb-img{display:block;max-width:none;transform-origin:50% 50%;-webkit-user-drag:none}
/* one cell: a clip sits exactly over its poster; no display here, so [hidden] hides it.
   Positioned and above it: the FLIP leaves a transform on .lb-img, and a transformed
   box paints over an unpositioned sibling that follows it. */
.lb-stage{isolation:isolate}          /* …within the stage, never over the lightbox's buttons */
.lb-img,.lb-video{grid-area:1/1}
.lb-video{position:relative;z-index:1;object-fit:cover}
.lb-count{position:absolute;top:clamp(1.2rem,2.6vw,2.2rem);left:50%;margin:0;translate:-50% 0;font-family:var(--font-mono);
  font-weight:400;font-size:.6875rem;letter-spacing:.24em;color:var(--chalk-dim);font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;top:50%;width:3.25rem;height:3.25rem;margin-top:-1.625rem;display:grid;place-items:center;
  color:var(--chalk);background:rgba(20,18,15,.45);border:1px solid var(--hairline-strong);border-radius:50%;cursor:pointer;
  transition:color .35s,background-color .35s,border-color .35s}
.lb-btn:hover,.lb-btn:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}
.lb-prev{inset-inline-start:clamp(1rem,2.4vw,2rem)}
.lb-next{inset-inline-end:clamp(1rem,2.4vw,2rem)}
.lb-btn span{width:.62rem;height:.62rem;border-top:1px solid currentColor;border-left:1px solid currentColor}
.lb-prev span{transform:translateX(18%) rotate(-45deg)}
.lb-next span{transform:translateX(-18%) rotate(135deg)}
html[dir="rtl"] .lb-btn span{scale:-1 1}
.lb-close{position:absolute;top:var(--chrome-edge);inset-inline-end:var(--chrome-edge)}

/* ── Persian: no tracking, the body face for anything mono ── */
html[lang="fa"] .sp-crumbs,html[lang="fa"] .sp-kicker,html[lang="fa"] .sp-next-kicker,html[lang="fa"] .sp-all-kicker,
html[lang="fa"] .sp-contact-kicker,html[lang="fa"] .sp-fact dt,html[lang="fa"] .sp-hero-view,html[lang="fa"] .sp-count,
html[lang="fa"] .sp-all-group,html[lang="fa"] .sp-all-here,html[lang="fa"] .sp-all-n,
html[lang="fa"] .sp-btn,html[lang="fa"] .sp-close,html[lang="fa"] .lb-close,
html[lang="fa"] .lb-count{font-family:var(--font-body);letter-spacing:0;font-size:.82rem}
html[lang="fa"] .sp-title{font-weight:500;font-size:clamp(2.6rem,7vw,7rem);line-height:1.35;letter-spacing:0;text-transform:none}
html[lang="fa"] .sp-lede{font-weight:500;line-height:1.6;letter-spacing:0}
html[lang="fa"] .sp-desc{line-height:2.05}
html[lang="fa"] .sp-fact dd{line-height:1.95}
html[lang="fa"] .sp-all-name{font-family:var(--font-body);font-weight:500;letter-spacing:0;text-transform:none;line-height:1.5}
html[lang="fa"] .sp-next-title{font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none}
html[lang="fa"] .sp-phone{letter-spacing:0}

/* ── phones ── */
@media (max-width: 820px){
  /* the scrim, on a phone: fading from .88 straight away left body copy
     at two-thirds strength beside SAM */
  #space::before{height:6.5rem;background:linear-gradient(rgba(8,8,10,.94),rgba(8,8,10,.86) 50%,rgba(8,8,10,0))}
  .sp-bar{gap:.7rem}
  .sp-count,.sp-close-label{display:none}
  .sp-close{padding:0}   /* the ✕ alone: a square the toggle's size */
  .sp-hero{height:80vh;height:80svh}
  /* the title runs to two lines at 13vw, so crumbs and kicker start near the
     middle, where the desktop shade is still clear: the crumbs measured 2.9:1
     over the lounge's chairs */
  .sp-hero-shade{background:linear-gradient(to bottom,rgba(8,8,10,.5),transparent 24%,transparent 34%,
    rgba(8,8,10,.62) 56%,rgba(8,8,10,.86))}
  .sp-hero-copy{inset-inline:1.25rem;bottom:1.8rem}
  .sp-title{font-size:13vw}
  html[lang="fa"] .sp-title{font-size:10.5vw}
  .sp-hero-view,.sp-cue{display:none}
  .sp-body{grid-template-columns:minmax(0,1fr);row-gap:3rem;padding:3.2rem 1.25rem}
  .sp-info{position:static}
  .sp-actions .sp-book{display:none}              /* the pinned bar carries it */
  .sp-gallery,.sp-row{gap:.6rem}
  .sp-next{grid-template-columns:minmax(0,1fr);row-gap:1.6rem;padding:3.5rem 1.25rem}
  .sp-next-media{order:-1}
  .sp-next-title{font-size:11vw}
  /* a strip on a phone: nothing hovers, and a finger scrolls */
  .sp-all{padding:0 0 3.5rem}
  .sp-all-head{padding:0 1.25rem}
  .sp-all-track{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:0 1.25rem;scroll-padding-inline:1.25rem}
  .sp-all-track::-webkit-scrollbar{display:none}
  .sp-all-track li{flex:0 0 64vw;aspect-ratio:4/5;scroll-snap-align:start}
  .sp-all-track li.is-current .sp-all-name{font-size:1.5rem}
  .sp-all-progress{display:block;position:relative;height:1px;margin:1.2rem 1.25rem 0;background:var(--hairline)}
  .sp-all-progress span{position:absolute;inset:0;background:var(--electric);transform:scaleX(max(.08,var(--progress,0)));
    transform-origin:left center;transition:transform .25s linear}
  html[dir="rtl"] .sp-all-progress span{transform-origin:right center}
  .sp-contact{padding:3.5rem 1.25rem 4rem}
  /* the page's last thing now: clear of the pinned Book a visit bar */
  .sp-foot{padding:0 1.25rem calc(6rem + env(safe-area-inset-bottom))}
  .sp-phone{font-size:16vw}
  /* a finger's reach for the developer's line: a 44px hit area, the look unchanged */
  .sp-dev-link{position:relative}
  .sp-dev-link::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,2.75rem);height:2.75rem;transform:translate(-50%,-50%)}
  .sp-contact-head{flex-direction:column;align-items:flex-start}
  .sp-contact-line{align-items:flex-start;text-align:start}
  .sp-rata{width:62vw}
  /* solid under the button, the fade above it; and carried on below the bar,
     where the phone's toolbar floats over the page and copy showed through */
  .sp-mbar{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;
    padding:1.6rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(8,8,10,.94) 60%,rgba(8,8,10,0))}
  .sp-mbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:6rem;background:rgba(8,8,10,.94)}
  .sp-mbar .sp-btn{flex:1}
  .lb-btn{top:auto;bottom:calc(1.2rem + env(safe-area-inset-bottom));margin-top:0}
  .lb-count{top:auto;bottom:calc(2.3rem + env(safe-area-inset-bottom))}
}

/* ── reduced motion: no hover scale, no looping cue ── */
@media (prefers-reduced-motion:reduce){
  .sp-fig-zoom,.sp-next-img,.sp-all-thumb img{transition:none;transform:none!important}
  .sp-cue::after{animation:none}
}