/* Sarabi Gallery home: full-width showroom hero, Persian block, showroom wall, browse by size and origin, home
   viewing, visit. Ported from the approved Direction 1 mockup. Nothing here depends on script to be readable. The scroll-driven
   rug unroll (spec R4-7) was replaced by the showroom photo on 2026-10-14 at Raouf's request. */

main > section,
main > .wp-block-group { padding-inline: var(--gutter, 16px); }
main > .wp-block-group,
main > section { max-width: var(--page-max, 1440px); margin-inline: auto; }
main > .hero { padding-top: var(--sp-6, 32px); }
main h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }   /* restrained, like the Armadillo home (Raouf 2026-10-14); the dark band's statement is the one large line */

/* ---------- hero: the showroom, full width (Raouf 2026-10-14, "like the Armadillo website's first look") ---------- */
/* Without the photo options the hero is the words on the page colour (no class .hero-photo). */
.hero { display: grid; gap: var(--sp-5, 24px); padding-bottom: var(--section-y, 56px); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.hero .lede { margin: var(--sp-4, 16px) 0 var(--sp-5, 24px); }
.hero-eyebrow { margin: 0 0 var(--sp-3, 12px); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.08em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px); margin: 0; }

/* the photo hero runs edge to edge under the header and starts at the very top of the page */
main > .hero.hero-photo { max-width: none; margin: 0; padding: calc(var(--header-h, 56px) + var(--sp-7, 48px)) var(--gutter, 16px) var(--sp-8, 72px); }
.hero-photo { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(560px, 100svh, 1200px);   /* the whole first screen (Raouf 2026-10-14: bigger, like Armadillo) */
  place-items: center; text-align: center; color: var(--c-on-photo); }
.hero-photo-pic, .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-photo-pic { overflow: hidden; }   /* the drifting photo is clipped by its own frame, not the words' section */
.hero-photo-img { object-fit: cover; object-position: 50% 45%; }
/* a quiet darkening so white words read on any part of the photo (WCAG 1.4.3 over an image); stronger at the top for the header */
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-photo-shade) 80%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 64%, transparent) 9%, color-mix(in srgb, var(--c-photo-shade) 18%, transparent) 26%, color-mix(in srgb, var(--c-photo-shade) 0%, transparent) 42%),   /* the top band reads under the bar's words wherever the spotlights fall (2026-10-14) */
              radial-gradient(ellipse 70% 58% at 50% 52%, color-mix(in srgb, var(--c-photo-shade) 74%, transparent), color-mix(in srgb, var(--c-photo-shade) 46%, transparent) 70%, color-mix(in srgb, var(--c-photo-shade) 30%, transparent)); }
.hero-photo .hero-copy { max-width: 46rem; text-shadow: 0 1px 18px color-mix(in srgb, var(--c-photo-shade) 35%, transparent); }
.hero-photo h1, .hero-photo .lede, .hero-photo .hero-eyebrow { color: var(--c-on-photo); }
.hero-photo .lede { max-width: 36rem; margin-inline: auto; font-size: clamp(1rem, 1.6vw, 1.1875rem); }
.hero-photo .hero-actions { justify-content: center; }
.hero-photo .btn-primary { background: var(--c-on-photo); border-color: var(--c-on-photo); color: var(--c-ink); text-shadow: none; }
.hero-photo .btn-primary:hover { background: transparent; color: var(--c-on-photo); }
.hero-photo .btn-quiet { background: transparent; border-color: var(--c-on-photo); color: var(--c-on-photo); }
.hero-photo .btn-quiet:hover { background: var(--c-on-photo); color: var(--c-ink); text-shadow: none; }
.hero-photo :is(.btn-primary, .btn-quiet):focus-visible { outline: 3px solid var(--c-on-photo); outline-offset: 3px; }
@media (max-width: 699px) {
  .hero-photo { min-height: clamp(520px, 88svh, 860px); }   /* a sliver of the next section shows on phones */
  .hero-photo-img { object-position: 50% 50%; }   /* the tall crop is framed for phones already */
  /* on phones the words cover most of the photo: one even darkening, so every line keeps 4.5:1 (measured on the brightest pixels) */
  .hero-photo::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--c-photo-shade) 66%, transparent), color-mix(in srgb, var(--c-photo-shade) 56%, transparent) 55%, color-mix(in srgb, var(--c-photo-shade) 40%, transparent)); }
  .hero-photo .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* the header lying on the photo: assets/css/menu.css (body.has-photo-header, 2026-10-14) */

/* ---------- bands (spec R4-3): home sections only; collection and rug pages stay on --c-page and --c-wall ---------- */
/* A band sets --c-band (its fill) and --c-on-band (its text); saffron's text is always ink. Everything inside reads those two. */
.band-oxblood { --c-band: var(--c-band-oxblood); }
.band-lapis { --c-band: var(--c-band-lapis); }
.band-saffron { --c-band: var(--c-band-saffron); --c-on-band: var(--c-ink); }
.band-oxblood, .band-lapis, .band-saffron { background: var(--c-band); color: var(--c-on-band); }
/* full bleed: the fill runs edge to edge while the content keeps the page measure */
main > :is(.band-oxblood, .band-lapis, .band-saffron) { max-width: none; border-top: 0;
  padding-inline: max(var(--gutter, 16px), calc((100% - var(--page-max, 1440px)) / 2 + var(--gutter, 16px))); }
.band-oxblood a:not([class]), .band-lapis a:not([class]), .band-saffron a:not([class]) { color: inherit; text-decoration: underline; }
.band-oxblood :focus-visible, .band-lapis :focus-visible, .band-saffron :focus-visible { outline-color: var(--c-on-band); }

/* ---------- Persian and Afghan: "the pattern library" (Raouf 2026-10-14) ----------
   A framed plate on the wall colour holds one real rug; the words, the two collections and six patterns sit beside it. Pointing at
   a name hangs a rug of it in the frame (pattern-plate.js): the photo fades over the old one, the caption names it. */
.pattern-library { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7, 48px); padding-block: var(--section-y, 56px); border-top: 1px solid var(--c-rule); }
@media (min-width: 900px) { .pattern-library { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-9, 96px); align-items: center; } }
.pl-frame { margin: 0; padding: clamp(28px, 5vw, 64px); background: var(--c-wall); }
.pl-plate { position: relative; display: block; aspect-ratio: 3 / 4; }
.pl-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px var(--c-shadow));
  opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pl-plate img.is-new { opacity: 0; transform: translateY(10px) scale(0.985); }
.pl-caption { margin-top: var(--sp-4, 16px); text-align: center; font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui); min-height: 2.8em; }
.pl-caption a { color: var(--c-muted); text-decoration: none; }
.pl-caption a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; }
.pl-copy .hp-eyebrow { margin: 0 0 var(--sp-3, 12px); color: var(--c-muted); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.08em; }
.pl-copy h2 { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.pl-copy > p:not([class]) { max-width: 36rem; margin: var(--sp-4, 16px) 0 0; color: var(--c-muted); }
/* the patterns: six lines, a number, the name in large serif and a short note; the one shown is italic with a gold thread */
.pl-patterns { list-style: none; margin: var(--sp-6, 32px) 0 0; padding: 0; border-top: 1px solid var(--c-text); }
.pl-patterns a { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); grid-template-rows: auto auto; align-items: baseline; column-gap: var(--sp-3, 12px);
  padding: 14px 0 12px; min-height: 64px; border-bottom: 1px solid var(--c-rule); color: var(--c-text); text-decoration: none; }
.pl-n { grid-row: 1 / span 2; color: var(--c-muted); font: 500 0.75rem / 1 var(--font-ui); letter-spacing: 0.14em; }
.pl-name { font: 400 clamp(1.375rem, 2.4vw, 1.875rem) / 1.15 var(--font-display); transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1); }
.pl-blurb { color: var(--c-muted); font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.4s ease, margin 0.5s ease; }
.pl-patterns a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.2, 1); }
.pl-patterns a:is(:hover, :focus-visible, .is-shown)::after { transform: scaleX(1); }
.pl-patterns a:is(:hover, :focus-visible, .is-shown) .pl-name { font-style: italic; transform: translateX(6px); }
.pl-patterns a:is(:hover, :focus-visible, .is-shown) .pl-blurb { max-height: 3em; opacity: 1; margin-top: 4px; }
@media (hover: none) { .pl-blurb { max-height: 3em; opacity: 1; margin-top: 4px; } }
.pl-patterns a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pl-plate img, .pl-patterns a::after, .pl-name, .pl-blurb { transition: none; } }
html:is([data-motion="none"], [data-motion="reduced"]) .pl-plate img { transition: none; }

/* ---------- the home viewing band ---------- */
/* the home viewing band (2026-10-14 pm, after Armadillo's "Rug Placement Guide" on shop-all): on deep graphite grey (Raouf: "an elegant grey"), the heading at the
   top left, the words and the link at the bottom left, a large photo running to the right edge; the wine red is the link's accent */
main > .home-band { max-width: none; margin: 0; padding: var(--section-y, 56px) 0; border-top: 0; background: var(--c-band-stone); }
.home-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6, 32px); }
.home-band-copy { box-sizing: border-box; display: flex; flex-direction: column; padding-inline: var(--gutter, 16px); }
.home-band-h { margin: 0; color: var(--c-on-band); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 14ch; }
.home-band-foot { margin-top: var(--sp-6, 32px); }
.home-band-foot p { max-width: 30rem; margin: 0 0 var(--sp-5, 24px); color: color-mix(in srgb, var(--c-on-band) 88%, transparent); font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.7; }
.home-band .home-band-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-on-band); font: 500 var(--fs-ui, 0.9375rem) / 1 var(--font-ui);
  letter-spacing: 0.04em; }   /* its caramel underline redraws left to right on hover (buttons.css) */
.home-band .home-band-link:hover { color: var(--c-band-saffron); }
.home-band .home-band-link:focus-visible { outline: 3px solid var(--c-on-band); outline-offset: 3px; }
.home-band-photo { margin: 0; overflow: hidden; }
.home-band-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  .home-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8, 72px); align-items: stretch; }
  .home-band-copy { justify-content: space-between; padding: var(--sp-6, 32px) 0 0 max(var(--gutter, 16px), calc((100vw - var(--page-max, 1440px)) / 2 + var(--gutter, 16px))); }
  .home-band-foot { margin-top: var(--sp-8, 72px); }
  .home-band-photo img { height: clamp(440px, 34vw, 560px); aspect-ratio: auto; }
}

/* ---------- the Armadillo rhythm (Raouf 2026-10-14: "the landing has to be like this"): calm sections, a heading with its
   "view all" on the same line, one row of rugs, a photo pair, a collection split and one dark band ---------- */
.section-all { margin: 0; }
.section-all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); font: 500 var(--fs-ui, 0.9375rem) / 1 var(--font-ui);
  letter-spacing: 0.06em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.section-all a:hover { text-decoration-thickness: 2px; }

/* New in: the heading left, View all right, then one row of four rugs (two by two on phones) */
.in-showroom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-5, 24px); padding-block: var(--section-y, 56px); }
.in-showroom > h2 { grid-column: 1; margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.in-showroom > .section-all { grid-column: 2; }
.in-showroom > .wall { grid-column: 1 / -1; margin-top: var(--sp-6, 32px); border-top: 0; }
.in-showroom .wall .wc-block-product-template.wc-block-product-template__responsive { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5, 24px); }
@media (min-width: 900px) {
  .in-showroom .wall .wc-block-product-template.wc-block-product-template__responsive { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-6, 32px); }
}
/* product cards, not the to-scale gallery wall: no wall panel, every rug fills its card at 3:4 */
.in-showroom .wall { background: transparent; padding: 0; }
.in-showroom .wall .wc-block-product-template.wc-block-product-template__responsive { grid-auto-rows: auto auto; row-gap: var(--sp-7, 48px); }
.in-showroom .wall .hung-rug :is(.mat) { width: 100%; max-width: none; max-height: none; aspect-ratio: 3 / 4; box-sizing: border-box; justify-self: stretch; }
.in-showroom .wall .wc-block-product-template > li > .hung-rug > .mat { justify-self: stretch; align-self: stretch; }

/* the photo pair: a wide photo and a close-up, the same height, a hairline apart; stacked on phones */
.home-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2, 8px); padding-block: 0 var(--section-y, 56px); }
.home-pair figure { margin: 0; overflow: hidden; background: var(--c-wall); }
.home-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-pair-wide img { aspect-ratio: 16 / 10; }
.home-pair-detail img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .home-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .home-pair-wide img, .home-pair-detail img { aspect-ratio: auto; height: clamp(420px, 42vw, 640px); }
}

/* ---------- browse by size: "lay it on the floor" (Raouf 2026-10-14, "something breathtaking") ----------
   An architect's plan on drafting paper (a living room for rugs, a hallway for runners), drawn in centimetres (--W x --H); the rug is
   a real photo of that size laid with its length across the room, at --l x --w, centred on --cx/--cy, with dimension lines. Choosing a
   size in the index (size-plan.js) changes --l/--w and the rug grows or shrinks to it. Every size in the index is a link. */
.browse-size, .browse-origin { padding-block: var(--section-y, 56px); border-top: 1px solid var(--c-rule); }
.sp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5, 24px); margin-bottom: var(--sp-7, 48px); }
.sp-eyebrow { margin: 0 0 var(--sp-3, 12px); color: var(--c-muted); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.08em; }
.size-plan-section h2 { margin: 0; }
.browse-size-note { margin: var(--sp-3, 12px) 0 0; max-width: 36rem; color: var(--c-muted); font: 400 var(--fs-ui, 0.9375rem) / 1.5 var(--font-ui); }
.sp-switch { display: inline-flex; gap: var(--sp-5, 24px); }
.sp-switch[hidden] { display: none; }
.sp-switch button { position: relative; min-height: 44px; padding: 0; background: none; border: 0; color: var(--c-muted); font: 400 clamp(1.25rem, 2vw, 1.5rem) / 1 var(--font-display); cursor: pointer; }
.sp-switch button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1); }
.sp-switch button[aria-pressed="true"] { color: var(--c-text); }
.sp-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.sp-switch button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }

.sp-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7, 48px); }
.sp-panel + .sp-panel { margin-top: var(--sp-8, 72px); }
.sp-panel[hidden] { display: none; }
@media (min-width: 1000px) {
  .sp-panel { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--sp-8, 72px); align-items: start; }
  .sp-panel.sp-runner-size { grid-template-columns: minmax(0, 1fr); }
  .sp-panel.sp-runner-size .sp-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr; column-gap: var(--sp-8, 72px); align-items: start; }
  .sp-panel.sp-runner-size .sp-readout { grid-row: span 2; }
}

/* the drafting paper: a 50 cm grid, a finer 10 cm one, the plan drawn over it */
.sp-stage { position: relative; container-type: inline-size; aspect-ratio: calc(var(--W) / var(--H)); margin: 34px 46px 40px 0;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--c-text) 9%, transparent) 1px, transparent 1px) 0 0 / calc(50 / var(--W) * 100%) 100%,
    linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 9%, transparent) 1px, transparent 1px) 0 0 / 100% calc(50 / var(--H) * 100%),
    linear-gradient(to right, color-mix(in srgb, var(--c-text) 4%, transparent) 1px, transparent 1px) 0 0 / calc(10 / var(--W) * 100%) 100%,
    linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 4%, transparent) 1px, transparent 1px) 0 0 / 100% calc(10 / var(--H) * 100%),
    var(--c-surface); }
.sp-room { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sp-room .wall { fill: none; stroke: var(--c-text); stroke-width: 3; vector-effect: non-scaling-stroke; }
.sp-room .win { stroke: var(--c-surface); stroke-width: 4; vector-effect: non-scaling-stroke; }
.sp-room .door { fill: none; stroke: var(--c-muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sp-room .furn, .sp-room .furn rect { fill: color-mix(in srgb, var(--c-surface) 58%, transparent); stroke: var(--c-text); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sp-room .furn path { fill: none; stroke: var(--c-text); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the rug (under the drawing, so the furniture outlines sit over it) and its dimension lines (over the drawing) share one box */
.sp-rug, .sp-dims { position: absolute;
  left: calc((var(--cx) - var(--l) / 2) / var(--W) * 100%); top: calc((var(--cy) - var(--w) / 2) / var(--H) * 100%);
  width: calc(var(--l) / var(--W) * 100%); height: calc(var(--w) / var(--H) * 100%);
  transition: left 0.85s cubic-bezier(0.65, 0, 0.15, 1), top 0.85s cubic-bezier(0.65, 0, 0.15, 1), width 0.85s cubic-bezier(0.65, 0, 0.15, 1), height 0.85s cubic-bezier(0.65, 0, 0.15, 1); }
.sp-rug { z-index: 1; container-type: size; box-shadow: 0 14px 26px -14px var(--c-shadow); }
.sp-dims { z-index: 3; pointer-events: none; }
.sp-rug-photo { position: absolute; inset: 0; overflow: hidden; background: var(--c-mat); }
/* the photos are portrait (length up the page): turned a quarter so the length runs across the room */
.sp-rug-photo img { position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg);
  opacity: 1; transition: opacity 0.55s ease; }
.sp-rug-photo img.is-new { opacity: 0; }
.sp-dim { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--c-text); font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.sp-dim-t { position: relative; z-index: 1; padding: 3px 6px; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-rule); }
.sp-dim::before { content: ""; position: absolute; background: var(--c-accent); }
.sp-dim-x { left: 0; right: 0; bottom: 100%; height: 26px; margin-bottom: 6px; align-items: center; }
.sp-dim-x::before { left: 0; right: 0; top: 50%; height: 1px; }
.sp-dim-x::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 4px); height: 9px; border-inline: 1px solid var(--c-accent); }
.sp-dim-y { top: 0; bottom: 0; left: 100%; width: 26px; margin-left: 6px; justify-content: center; }
.sp-dim-y::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.sp-dim-y::after { content: ""; position: absolute; left: calc(50% - 4px); top: 0; bottom: 0; width: 9px; border-block: 1px solid var(--c-accent); }
.sp-scale { position: absolute; left: 0; top: 100%; margin-top: 14px; display: flex; align-items: center; gap: 8px; color: var(--c-muted); font: 400 var(--fs-small, 0.8125rem) / 1 var(--font-ui); }
.sp-scale i { display: block; width: calc(100 / var(--W) * 100cqw); height: 6px; border: 1px solid var(--c-text); border-top: 0; }

/* the plan stays in view while the index is used (Raouf 2026-10-14: "with the bigger sizes you scroll and lose the diagram"):
   pinned beside the index on wide screens, and at the top of the screen on phones while the index scrolls under it */
.sp-stage-wrap { position: sticky; top: var(--sp-4, 16px); z-index: 4; align-self: start; padding-top: 2px; background: var(--c-page); }
@media (min-width: 1000px) { .sp-stage-wrap { top: calc(var(--sp-6, 32px)); } }
@media (max-width: 999px) {
  .sp-stage-wrap { top: 0; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 6px var(--gutter, 16px) 2px; box-shadow: 0 10px 14px -14px var(--c-shadow); }
  .sp-stage { margin-top: 30px; margin-bottom: 32px; }
}

/* the readout and the index */
.sp-readout { margin: 0 0 var(--sp-6, 32px); }
.sp-size { display: block; font: 400 clamp(2.5rem, 4.6vw, 4rem) / 1 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sp-cta { display: inline-block; padding-block: 12px; margin-top: var(--sp-2, 8px); color: var(--c-text); font: 500 var(--fs-ui, 0.9375rem) / 1.2 var(--font-ui);
  letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.sp-cta:hover { text-decoration-thickness: 2.5px; }
.sp-index-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4, 16px); margin: 0; padding-bottom: var(--sp-3, 12px);
  border-bottom: 1px solid var(--c-text); font-size: clamp(1.25rem, 2vw, 1.5rem); }
.size-group-all { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--fs-ui, 0.9375rem) / 1.2 var(--font-ui); color: var(--c-link); }
/* two compact columns (smallest first, down then across), so every size sits beside the plan */
.sp-index { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sp-5, 24px); }
.sp-index li { break-inside: avoid; }
.sp-index a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-3, 12px);
  min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--c-rule); color: var(--c-text); text-decoration: none; }
.sp-i-size { font: 400 var(--fs-ui, 0.9375rem) / 1.2 var(--font-ui); font-variant-numeric: tabular-nums; }
.sp-i-size small { color: var(--c-muted); font-size: 0.8em; }
/* the share of the room each size covers: a thin bar, so the index itself reads small to large */
.sp-i-bar { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; height: 2px; background: linear-gradient(var(--c-rule), var(--c-rule)) 0 0 / max(4px, calc(var(--a) * 100%)) 100% no-repeat; transition: background-size 0.5s ease; }
.sp-i-n { justify-self: end; color: var(--c-muted); font: 400 var(--fs-small, 0.8125rem) / 1.2 var(--font-ui); font-variant-numeric: tabular-nums; }
.sp-index a:hover .sp-i-size, .sp-index a[aria-current="true"] .sp-i-size { font-weight: 600; }
.sp-index a[aria-current="true"] .sp-i-bar { background-image: linear-gradient(var(--c-accent), var(--c-accent)); }
.sp-index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1); }
.sp-index a:hover::after, .sp-index a:focus-visible::after, .sp-index a[aria-current="true"]::after { transform: scaleX(1); }
.sp-index a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 599px) {
  .sp-stage { margin-right: 40px; }
  .sp-dim { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-rug, .sp-rug-photo img, .sp-i-bar, .sp-index a::after, .sp-switch button::after { transition: none; }
}
html:is([data-motion="none"], [data-motion="reduced"]) :is(.sp-rug, .sp-rug-photo img) { transition: none; }

/* ---------- browse by origin: "four doors" (Raouf 2026-10-14) ----------
   One tall panel per origin, the field of a real rug filling it; the panel in focus opens wider and its rug drifts closer. */
.od-head { margin-bottom: var(--sp-6, 32px); }
.od-eyebrow, .hf-eyebrow { margin: 0 0 var(--sp-3, 12px); color: var(--c-muted); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.08em; }
.origin-doors h2 { margin: 0; }
.od-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2, 8px); border: 0; max-width: none; }
.od-list li { min-width: 0; }
.od-list a { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; overflow: hidden; padding: var(--sp-4, 16px);
  border: 0; color: var(--c-on-photo); text-decoration: none; background: var(--c-band-oxblood); }
.od-photo, .od-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.od-photo { z-index: -2; overflow: hidden; }
/* cropped close: the rug's field fills the door, not its white photo background */
.od-photo img { object-fit: cover; transform: scale(1.7); transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.od-list a::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-photo-shade) 82%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 35%, transparent) 45%, color-mix(in srgb, var(--c-photo-shade) 10%, transparent) 100%); }
.od-text { display: grid; gap: 4px; }
.od-list .origin-name { font: 400 clamp(1.75rem, 3vw, 2.75rem) / 1 var(--font-display); color: var(--c-on-photo); }
.od-made { font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui); color: color-mix(in srgb, var(--c-on-photo) 85%, transparent); }
.od-list .origin-count { margin-top: var(--sp-2, 8px); color: var(--c-on-photo); font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.08em;
  text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.od-list a:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
@media (min-width: 900px) {
  .od-list { display: flex; height: clamp(440px, 46vw, 620px); }
  .od-list li { flex: 1 1 0; transition: flex-grow 0.8s cubic-bezier(0.65, 0, 0.15, 1); }
  .od-list li:is(:hover, :focus-within) { flex-grow: 2.1; }
  .od-list a { height: 100%; aspect-ratio: auto; padding: var(--sp-6, 32px); }
  .od-list li:is(:hover, :focus-within) .od-photo img { transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) { .od-list li, .od-photo img { transition: none; } }
html:is([data-motion="none"], [data-motion="reduced"]) :is(.od-list li, .od-photo img) { transition: none; }

/* ---------- common questions: a quiet side and a numbered accordion ---------- */
.home-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6, 32px); max-width: var(--page-max, 1440px) !important; }
@media (min-width: 900px) { .home-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-9, 96px); align-items: start; } .hf-side { position: sticky; top: var(--sp-6, 32px); } }
.home-faq h2 { margin: 0; }
.hf-note { margin: var(--sp-4, 16px) 0 0; color: var(--c-muted); }
.hf-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5, 24px); margin: var(--sp-3, 12px) 0 0; }
.hf-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); font: 500 var(--fs-ui, 0.9375rem) / 1.2 var(--font-ui);
  text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.hf-list { border-top: 1px solid var(--c-text); }
.hf-list details { border-bottom: 1px solid var(--c-rule); }
.hf-list summary { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3, 12px); padding: var(--sp-4, 16px) 0; min-height: 64px; cursor: pointer; list-style: none; }
.hf-list summary::-webkit-details-marker { display: none; }
.hf-n { color: var(--c-muted); font: 500 0.75rem / 1 var(--font-ui); letter-spacing: 0.14em; }
.home-faq .hf-list h3 { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.625rem) / 1.25 var(--font-display); transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1); }
.hf-list summary::after { content: ""; width: 12px; height: 12px; align-self: center;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform 0.4s ease; }
.hf-list details[open] summary::after { transform: rotate(45deg); }
.hf-list summary:hover h3, .hf-list details[open] h3 { font-style: italic; transform: translateX(4px); }
.hf-list summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.home-faq .hf-list details > p { margin: 0; padding: 0 0 var(--sp-5, 24px) calc(2.4em + var(--sp-3, 12px)); max-width: 40rem; color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .home-faq .hf-list h3, .hf-list summary::after { transition: none; } }

/* ---------- home viewing and visit ---------- */
.home-viewing, .visit { padding-block: var(--section-y, 56px); border-top: 1px solid var(--c-rule); }
.home-viewing h2, .visit h2 { margin-bottom: var(--sp-4, 16px); }
.home-viewing p, .visit p { max-width: 36rem; }


.home-band-photo { overflow: hidden; }   /* the photo settles from a slight zoom inside its frame (scroll.css) */

/* ---------- visit the showroom: "the arrival" (Raouf 2026-10-14) ----------
   The showroom photo runs the full height of one half, edge to edge; the other half holds the invitation and the four facts in large
   serif, then the three actions. The directions link keeps class sarabi-directions, its text and URL (the Ads conversion). */
main > .visit-card.visit-arrival { max-width: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr);
  background: none; box-shadow: none; border-top: 1px solid var(--c-rule); }
.va-photo { position: relative; margin: 0; overflow: hidden; min-height: 420px; background: var(--c-wall); }
.va-photo :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.va-photo .cf-toggle { position: absolute; right: var(--gutter, 16px); bottom: var(--sp-4, 16px); min-height: 44px; padding: 0 var(--sp-4, 16px); border: 1px solid var(--c-on-photo); color: var(--c-on-photo); background-color: color-mix(in srgb, var(--c-photo-shade) 45%, transparent); font: 500 var(--fs-ui, 0.9375rem) / 1 var(--font-ui); cursor: pointer; }
@media (max-width: 699px) { .va-photo .cf-toggle { top: var(--sp-4, 16px); bottom: auto; min-height: 40px; } }   /* clear of the caption on phones */
.va-photo figcaption { position: absolute; left: var(--gutter, 16px); bottom: var(--sp-4, 16px); padding: 6px 10px; background: color-mix(in srgb, var(--c-photo-shade) 55%, transparent);
  color: var(--c-on-photo); font: 400 var(--fs-small, 0.8125rem) / 1.3 var(--font-ui); letter-spacing: 0.04em; }
.va-body { padding: clamp(56px, 8vw, 112px) var(--gutter, 16px); max-width: 44rem; }
.va-eyebrow { margin: 0 0 var(--sp-3, 12px); color: var(--c-muted); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.08em; }
.visit-arrival h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.va-lede { margin: var(--sp-4, 16px) 0 0; max-width: 32rem; color: var(--c-muted); }
.va-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6, 32px) var(--sp-5, 24px); margin: var(--sp-7, 48px) 0; }
.va-facts > div { border-top: 1px solid var(--c-text); padding-top: var(--sp-3, 12px); min-width: 0; }
.va-facts dt { margin: 0 0 var(--sp-3, 12px); color: var(--c-muted); font: 500 0.75rem / 1 var(--font-ui); letter-spacing: 0.16em; }
.va-facts dd { margin: 0; font: 400 clamp(1.25rem, 1.9vw, 1.625rem) / 1.25 var(--font-display); color: var(--c-text); }
.va-facts dd a { color: var(--c-text); text-decoration: none; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 100% / 0 1.5px no-repeat; transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1); }
.va-facts dd a:is(:hover, :focus-visible) { background-size: 100% 1.5px; }
.va-facts .va-note { margin-top: var(--sp-2, 8px); color: var(--c-muted); font: 400 var(--fs-small, 0.8125rem) / 1.4 var(--font-ui); }
.va-facts .va-mail { font-size: clamp(1rem, 1.4vw, 1.25rem); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  main > .visit-card.visit-arrival { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 80vh, 860px); }
  .va-photo { min-height: 100%; }
  .va-body { align-self: center; padding-inline: clamp(40px, 6vw, 96px) max(var(--gutter, 16px), calc((100vw - var(--page-max, 1440px)) / 2 + var(--gutter, 16px))); }
}