/* Served as it is, not through the build, because it leans on scroll-driven
   animation syntax that is best left untouched. Colours come from the tokens
   in src/styles/global.css. Unlayered, so it sits above the Tailwind layers. */

/* ---------------------------------------------------------------------------
   Dusk. As the visitor scrolls, evening falls over the range: the sun sets, the
   sky deepens, a moon rises, stars come out, lamps light on the hillside and
   the window glows from inside. Pure enhancement: without scroll-driven
   animation support, or with reduced motion, the page is the still day scene.
   Only opacity, transform and translate are animated.
   --------------------------------------------------------------------------- */
.hero-night, .hero-stars, .hero-moon, .hero-lamps, .hero-glow {
  position: absolute;
  pointer-events: none;
}

/* One indigo veil over sky, sun and ridges. Cheaper than recolouring them. */
.hero-night {
  inset: 0;
  z-index: -8;
  background: linear-gradient(to bottom, var(--color-neel-deep) 0%, var(--color-neel) 78%, var(--color-neel-deep) 100%);
  opacity: 0;
}

.hero-stars { inset: 0 0 45% 0; z-index: -7; opacity: 0; }
.hero-stars i {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: var(--color-bone);
}

.hero-moon {
  right: 13%;
  top: 11%;
  z-index: -7;
  width: clamp(3rem, 9vmin, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -0.55em 0.35em 0 0 var(--color-bone);
  opacity: 0;
}

/* Village lamps on the dark hillside: a marigold point in a soft halo. */
.hero-lamps { inset: 0; z-index: -7; }
.hero-lamps i {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-genda) 0 10%, color-mix(in srgb, var(--color-genda) 55%, transparent) 11% 22%, transparent 68%);
  opacity: 0;
}

/* The window, lit from inside. */
.hero-glow {
  left: 50%;
  top: 50%;
  z-index: -6;
  width: min(64rem, 150vw);
  aspect-ratio: 1.1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-genda) 60%, transparent), transparent 72%);
  opacity: 0;
}

/* The doorway. A bone arch the size of the window that grows, at the end of
   the evening, until the visitor has walked through it into the house. */
.hero-door {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: var(--card-w, 28rem);
  height: var(--card-h, 40rem);
  translate: -50% -50%;
  transform-origin: 50% 64%;
  background: var(--color-bone);
  opacity: 0;
  pointer-events: none;
}

.kite { cursor: pointer; pointer-events: auto; }
/* On a phone the medallion hangs into the top of the sky, so the second kite flies to its left. */
@media (max-width: 640px) { .hero .kite-b { right: auto; left: 12%; top: 4%; } }
.kite.is-cut { animation: kite-cut 1.8s cubic-bezier(0.3, 0, 0.7, 1) forwards; }
.kite.is-rising { animation: kite-rise 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes kite-cut { to { transform: translate(60%, -220%) rotate(38deg); opacity: 0; } }
@keyframes kite-rise { from { transform: translate(-30%, 320%) rotate(-14deg); opacity: 0; } }

@keyframes veil { to { opacity: 0.9; } }
@keyframes appear { to { opacity: 1; } }
@keyframes sunset { to { translate: 0 52svh; } }
@keyframes moonrise { from { translate: 0 45%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes kite-away { to { translate: 0 -160%; opacity: 0; } }
@keyframes lift { to { translate: 0 var(--lift, -2%); } }
@keyframes walk-in { 0% { opacity: 0; scale: 1; } 10% { opacity: 1; scale: 1; } 100% { opacity: 1; scale: 5.5; } }
@keyframes hero-leave { to { opacity: 0; visibility: hidden; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { scale: 0; opacity: 0; } 70% { scale: 1.25; } to { scale: 1; opacity: 1; } }
@keyframes stamp { from { opacity: 0.35; scale: 1.06; rotate: -1.6deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

@media (prefers-reduced-motion: no-preference) {
  /* Pages cross-fade into one another instead of flashing. */
  @view-transition { navigation: auto; }

  .hero-stars i { animation: twinkle 3.4s ease-in-out var(--d, 0s) infinite alternate; }

  @supports (animation-timeline: scroll()) {
    /* The hero holds still for a moment while evening falls, then lets go.
       --hero-h and the dusk range are set by a few lines of script; the
       defaults work for a hero that fits the screen. */
    /* The next section is tucked under the pinned scene, so that when the doorway
       has filled the screen and the scene fades, the house is already there. */
    /* The stage sits above the tucked section (whose clipped and animated tiles
       would otherwise paint over it) but lets clicks through once the scene has gone. */
    .hero-stage { position: relative; z-index: 2; pointer-events: none; height: calc(var(--hero-h, 100svh) + var(--pin, 105vh)); margin-bottom: calc(-1 * var(--tuck, 0px)); }
    .hero-stage > .hero { pointer-events: auto; padding-top: 6.75rem; padding-bottom: 5rem; }
    .hero-stage > .hero { position: sticky; top: min(0px, calc(100svh - var(--hero-h, 100svh))); min-height: 100svh; animation-name: hero-leave; animation-timeline: scroll(root); animation-timing-function: linear; animation-fill-mode: both; animation-range: var(--dusk-c1, 95vh) var(--dusk-c, 105vh); }

    @media (max-height: 700px) and (max-width: 640px) { .hero-stage > .hero { padding-bottom: 3.25rem; } }

    .hero-door { animation-name: walk-in; animation-range: var(--dusk-b, 70vh) var(--dusk-c1, 95vh); }

    .hero-night, .hero-stars, .hero-moon, .hero-glow, .hero-sun, .hero-lamps i, .kite, .hero-ridge path, .hero-door {
      animation-timeline: scroll(root);
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    /* The doorway swells slowly, then takes the screen in the last stretch. */
    .hero-door { animation-timing-function: cubic-bezier(0.65, 0, 0.9, 0.35); }

    .hero-night { animation-name: veil; animation-range: var(--dusk-a, 0px) var(--dusk-b, 70vh); }
    .hero-glow { animation-name: appear; animation-range: var(--dusk-m, 35vh) var(--dusk-b, 70vh); }
    .hero-stars { animation-name: appear; animation-range: var(--dusk-m, 35vh) var(--dusk-b, 70vh); }
    .hero-moon { animation-name: moonrise; animation-range: var(--dusk-m, 35vh) var(--dusk-b, 70vh); }
    .hero-lamps i { animation-name: appear; animation-range: calc(var(--dusk-m, 35vh) + var(--at, 0) * 1vh) calc(var(--dusk-m, 35vh) + var(--at, 0) * 1vh + 8vh); }

    /* These already move on their own; the scroll uses translate so the two add up. */
    .hero-sun { animation-name: sun-glow, sunset; animation-timeline: auto, scroll(root); animation-duration: 9s, auto; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite, 1; animation-direction: alternate, normal; animation-range: normal, var(--dusk-a, 0px) var(--dusk-b, 70vh); }
    .kite-a, .kite-b { animation-name: kite-bob, kite-away; animation-timeline: auto, scroll(root); animation-duration: 7s, auto; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite, 1; animation-direction: alternate, normal; animation-range: normal, var(--dusk-a, 0px) var(--dusk-m, 35vh); }
    .kite-b { animation-duration: 9s, auto; }
    .kite.is-cut, .kite.is-rising { animation-timeline: auto; animation-iteration-count: 1; animation-direction: normal; }
    .kite.is-cut { animation-name: kite-cut; animation-duration: 1.8s; }
    .kite.is-rising { animation-name: kite-rise; animation-duration: 2.4s; }

    .hero-ridge path { animation-name: ridge-drift, lift; animation-timeline: auto, scroll(root); animation-duration: 40s, auto; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite, 1; animation-direction: alternate, normal; animation-range: normal, var(--dusk-a, 0px) var(--dusk-b, 70vh); }
    .hero-ridge path:nth-of-type(1) { --lift: -1%; animation-duration: 46s, auto; }
    .hero-ridge path:nth-of-type(2) { --lift: -2.5%; animation-duration: 38s, auto; animation-direction: alternate-reverse, normal; }
    .hero-ridge path:nth-of-type(3) { --lift: -4.5%; animation-duration: 31s, auto; }
    .hero-ridge path:nth-of-type(4) { --lift: -7%; animation-duration: 26s, auto; animation-direction: alternate-reverse, normal; }
  }

  @supports (animation-timeline: view()) {
    /* The map inks itself in as it arrives, town by town. Drawn by default. */
    .map-spine { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: cover 5% cover 36%; }
    .map-town { transform-box: fill-box; transform-origin: center; animation: pop linear both; animation-timeline: view(); animation-range: cover calc(12% + var(--i, 0) * 4%) cover calc(20% + var(--i, 0) * 4%); }

    /* The room tiles land like a block on cloth: slightly off, then true. */
    .stamp { animation: stamp steps(5, end) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* jharokha:start (generated by scripts/generate-jharokha.mjs) */
.jharokha { clip-path: polygon(0.0% 100.0%, 0.0% 36.0%, 3.4% 36.0%, 3.4% 33.0%, 2.4% 32.3%, 1.9% 31.5%, 1.5% 30.8%, 1.2% 30.0%, 1.1% 29.2%, 1.0% 28.5%, 1.0% 27.8%, 1.1% 27.0%, 1.2% 26.3%, 1.5% 25.7%, 1.8% 25.0%, 2.2% 24.3%, 2.7% 23.7%, 3.3% 23.2%, 3.9% 22.6%, 4.6% 22.1%, 5.5% 21.7%, 6.8% 21.5%, 6.3% 20.6%, 6.2% 19.8%, 6.3% 19.1%, 6.5% 18.4%, 6.7% 17.7%, 7.1% 17.1%, 7.5% 16.5%, 8.0% 15.9%, 8.5% 15.4%, 9.1% 14.9%, 9.8% 14.4%, 10.6% 14.0%, 11.3% 13.7%, 12.2% 13.3%, 13.1% 13.1%, 14.0% 12.9%, 15.1% 12.8%, 16.4% 13.0%, 16.5% 12.0%, 16.9% 11.3%, 17.4% 10.6%, 18.0% 10.1%, 18.6% 9.5%, 19.4% 9.0%, 20.1% 8.6%, 20.9% 8.2%, 21.8% 7.8%, 22.7% 7.5%, 23.6% 7.3%, 24.6% 7.1%, 25.6% 7.0%, 26.6% 6.9%, 27.6% 6.8%, 28.7% 6.9%, 29.8% 7.0%, 31.1% 7.5%, 31.8% 6.5%, 32.6% 5.9%, 33.5% 5.4%, 34.4% 5.0%, 35.4% 4.6%, 36.4% 4.3%, 37.4% 4.0%, 38.4% 3.7%, 39.5% 3.6%, 40.6% 3.4%, 41.7% 3.3%, 42.9% 3.3%, 44.0% 3.4%, 45.2% 3.4%, 46.4% 3.6%, 47.6% 3.8%, 48.8% 4.1%, 50.0% 4.8%, 50.0% 0.0%, 50.0% 4.8%, 51.2% 4.1%, 52.4% 3.8%, 53.6% 3.6%, 54.8% 3.4%, 56.0% 3.4%, 57.1% 3.3%, 58.3% 3.3%, 59.4% 3.4%, 60.5% 3.6%, 61.6% 3.7%, 62.6% 4.0%, 63.6% 4.3%, 64.6% 4.6%, 65.6% 5.0%, 66.5% 5.4%, 67.4% 5.9%, 68.2% 6.5%, 68.9% 7.5%, 70.2% 7.0%, 71.3% 6.9%, 72.4% 6.8%, 73.4% 6.9%, 74.4% 7.0%, 75.4% 7.1%, 76.4% 7.3%, 77.3% 7.5%, 78.2% 7.8%, 79.1% 8.2%, 79.9% 8.6%, 80.6% 9.0%, 81.4% 9.5%, 82.0% 10.1%, 82.6% 10.6%, 83.1% 11.3%, 83.5% 12.0%, 83.6% 13.0%, 84.9% 12.8%, 86.0% 12.9%, 86.9% 13.1%, 87.8% 13.3%, 88.7% 13.7%, 89.4% 14.0%, 90.2% 14.4%, 90.9% 14.9%, 91.5% 15.4%, 92.0% 15.9%, 92.5% 16.5%, 92.9% 17.1%, 93.3% 17.7%, 93.5% 18.4%, 93.7% 19.1%, 93.8% 19.8%, 93.7% 20.6%, 93.2% 21.5%, 94.5% 21.7%, 95.4% 22.1%, 96.1% 22.6%, 96.7% 23.2%, 97.3% 23.7%, 97.8% 24.3%, 98.2% 25.0%, 98.5% 25.7%, 98.8% 26.3%, 98.9% 27.0%, 99.0% 27.8%, 99.0% 28.5%, 98.9% 29.2%, 98.8% 30.0%, 98.5% 30.8%, 98.1% 31.5%, 97.6% 32.3%, 96.6% 33.0%, 96.6% 36.0%, 100.0% 36.0%, 100.0% 100.0%); }
/* jharokha:end */

/* ---------------------------------------------------------------------------
   The window. A cusped jharokha with a double rim, a lotus at the crown, a
   block print hem and a stepped plinth, so it stands in the scene as
   architecture. The .jharokha clip-path is generated (see jharokha.mjs).
   --------------------------------------------------------------------------- */
.jh {
  position: relative;
  width: min(100%, 33rem);
  filter: drop-shadow(0 22px 30px rgb(20 28 74 / 0.38));
}

.jh-layer { position: absolute; }
.jh-rim { inset: 0; background: var(--color-madder); }
.jh-face { inset: 7px; background: var(--color-bone); }
.jh-line { inset: 17px; background: var(--color-genda); }
.jh-face2 { inset: 19px; background: var(--color-bone); }

.jh-body {
  position: relative;
  padding: clamp(4.25rem, 15vw, 5.5rem) clamp(1.75rem, 7vw, 3.25rem) 5.25rem;
  text-align: center;
}

.jh-label { margin-top: 1.4rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* hairline, diamond, hairline */
.jh-rule { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1.35rem auto 0; }
.jh-rule span { display: block; width: 3.4rem; height: 1px; background: color-mix(in srgb, var(--color-madder) 55%, transparent); }
.jh-rule i { display: block; width: 0.5rem; height: 0.5rem; rotate: 45deg; background: var(--color-genda); }

.jh-lede { max-width: 21rem; margin: 1.35rem auto 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.2rem, 4.6vw, 1.55rem); line-height: 1.3; color: var(--color-ink); }

.jh-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 2rem; }

/* The hem: the block print border, in madder, along the foot of the window. */
.jh-hem {
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: 19px;
  height: 30px;
  border-top: 1px solid color-mix(in srgb, var(--color-madder) 45%, transparent);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 44px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='%23b8322b' fill-opacity='0.85'%3E%3Ccircle cx='22' cy='11' r='2.2'/%3E%3Cellipse cx='22' cy='4.5' rx='1.6' ry='3.2'/%3E%3Cellipse cx='22' cy='17.5' rx='1.6' ry='3.2'/%3E%3Cellipse cx='15.5' cy='11' rx='3.2' ry='1.6'/%3E%3Cellipse cx='28.5' cy='11' rx='3.2' ry='1.6'/%3E%3Ccircle cx='2' cy='11' r='1.1'/%3E%3Ccircle cx='42' cy='11' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Two steps for it to stand on. */
.jh-plinth { position: absolute; left: -14px; right: -14px; top: 100%; height: 13px; background: var(--color-madder); border-top: 2px solid var(--color-genda); }
.jh-plinth::after { content: ''; position: absolute; left: -16px; right: -16px; top: 100%; height: 10px; background: var(--color-neel-deep); border-top: 1px solid color-mix(in srgb, var(--color-genda) 60%, transparent); }

/* Short phones: a lower window, so the way in is on the first screen. */
@media (max-height: 700px) and (max-width: 640px) {
  .jh-body { padding-top: 4.25rem; padding-bottom: 4.4rem; }
  .jh-label { margin-top: 1.1rem; }
  .jh-rule, .jh-lede { margin-top: 1rem; }
  .jh-cta { margin-top: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   The wings. On wide screens the big window is flanked by smaller windows into
   the rooms, the way a haveli front carries a row of jharokhas. Hidden below
   1024px, where the big window already takes the width.
   --------------------------------------------------------------------------- */
.hero-wing { display: none; }

@media (min-width: 1024px) {
  .hero { gap: clamp(2rem, 4vw, 5.5rem); }
  /* Two small windows a side. Stacked on a laptop; side by side, stepped down
     towards the edges, once there is the width for it. */
  .hero-wing { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2rem; }
  .hero-wing-l > :first-child { margin-right: 1.5rem; }
  .hero-wing-r > :first-child { margin-left: 1.5rem; }

  .jh-mini {
    position: relative;
    display: block;
    width: clamp(7rem, 8.5vw, 11rem);
    text-align: center;
    text-decoration: none;
    filter: drop-shadow(0 14px 18px rgb(20 28 74 / 0.3));
    transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .jh-mini:hover { translate: 0 -6px; }
  .jh-mini-frame { display: block; padding: 5px; aspect-ratio: 1 / 1.35; background: var(--color-madder); }
  .jh-mini-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .jh-mini-name {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bone) 92%, transparent);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media (min-width: 1280px) {
  .hero-wing { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
  .hero-wing-l > :first-child, .hero-wing-r > :last-child { margin: 4.5rem 0 0; }
}

/* At dusk the small windows light up from inside. */
@keyframes window-light { to { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--color-genda) 75%, transparent)) drop-shadow(0 14px 18px rgb(20 28 74 / 0.3)); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  @supports (animation-timeline: scroll()) {
    .jh-mini { animation-name: window-light; animation-timeline: scroll(root); animation-timing-function: linear; animation-fill-mode: both; animation-range: var(--dusk-m, 35vh) var(--dusk-b, 70vh); }
  }
}


/* ---------------------------------------------------------------------------
   The emblem. It hangs below the header bar as a medallion at the top of the
   page, and tucks into the bar once the page scrolls (see Header.astro), so the
   header keeps its height and never covers what the visitor is reading.
   --------------------------------------------------------------------------- */
.brand-medallion-link {
  position: relative;
  display: block;
  width: 104px;
  height: 44px;
  margin-block: -5.5px;
}
.brand-medallion {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 104px;
  height: 104px;
  max-width: none;
  translate: -50% 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px var(--color-bone),
    0 0 0 5px color-mix(in srgb, var(--color-genda) 70%, transparent),
    0 10px 22px rgb(20 28 74 / 0.22);
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
header.is-scrolled .brand-medallion { width: 52px; height: 52px; top: -4px; }
@media (min-width: 768px) {
  .brand-medallion-link { width: 156px; }
  .brand-medallion { top: -10px; width: 156px; height: 156px; }
  header.is-scrolled .brand-medallion { width: 64px; height: 64px; top: -9px; }
}
@media (prefers-reduced-motion: reduce) { .brand-medallion { transition: none; } }

/* The lotus ornament at the crown of the window. */
.jh-lotus { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 3rem; }
@media (max-height: 700px) and (max-width: 640px) { .jh-lotus { width: 2.75rem; height: 2.75rem; margin-bottom: 2.25rem; } }


/* ---------------------------------------------------------------------------
   The header slides away while the visitor scrolls down and comes back on any
   scroll up (see Header.astro). The shop's filter bar follows it: pinned under
   the header, or at the very top while the header is away. On phones the filter
   bar is not pinned at all, so the page keeps the screen.
   --------------------------------------------------------------------------- */
header.sticky { transition: translate var(--dur-base) var(--ease-out); }
header.is-hidden { translate: 0 calc(-100% - 12px); }
[data-filter-bar] { transition: top var(--dur-base) var(--ease-out); }
html.header-hidden [data-filter-bar] { top: 0; }
@media (max-width: 767px) { [data-filter-bar] { position: static; } }
@media (prefers-reduced-motion: reduce) {
  header.sticky, [data-filter-bar] { transition: none; }
}


/* ---------------------------------------------------------------------------
   One set of speeds for the whole site. Quick for small feedback, base for
   things that move into place, slow for the gentle hover on photos, move for
   the photo that travels between pages. All drop to nothing for visitors who
   ask for less motion.
   --------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-quick: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
  --dur-move: 380ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-move: 0ms; }
}

/* The hover on photos: a small, slow lift, only on screens with a mouse. */
.hover-zoom { transition: scale var(--dur-slow) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .group:hover .hover-zoom, .group:hover .pc-img { scale: 1.03; }
}

/* ---------------------------------------------------------------------------
   Product cards: a second photo, usually the piece in a room, on hover.
   --------------------------------------------------------------------------- */
.pc-img { transition: scale var(--dur-slow) var(--ease-out); }
.pc-alt {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .group:hover .pc-alt { opacity: 1; }
}
.pc-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-bone);
  color: var(--color-ink);
  font-size: 0.68rem;
}

/* ---------------------------------------------------------------------------
   Moving between pages. The photo you tap grows into the product page's main
   photo; everything else cross-fades. Chrome, Edge and Safari; other browsers
   simply change page.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .vt-piece { view-transition-name: piece; }
  ::view-transition-group(piece) {
    animation-duration: var(--dur-move);
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-base);
  }
}

/* ---------------------------------------------------------------------------
   Product page. Phones: photos to swipe, then the buy box, then the detail.
   Larger screens: the photos stack in one column and the buy box stays in view
   beside them while they scroll past.
   --------------------------------------------------------------------------- */
.pd-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) {
  .pd-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}
@media (min-width: 1024px) { .pd-grid { gap: 5rem; } }

.pd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; padding: 0; list-style: none; }
.pd-facts li {
  padding: 6px 10px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--color-slate);
}
/* Size choice: clear boxes, the chosen one filled */
.pd-size {
  flex: 1 1 0; min-width: 4.5rem; white-space: nowrap; padding: 1.05rem 1.25rem; border-radius: 0.6rem;
  border: 1.5px solid rgb(30 27 51 / 0.45); background: var(--color-bone); color: var(--color-ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.pd-size:hover { border-color: var(--color-ink); box-shadow: 0 2px 10px rgb(30 27 51 / 0.1); }
.pd-size[aria-pressed="true"] {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bone);
  box-shadow: 0 3px 14px rgb(30 27 51 / 0.22);
}
.pd-size[aria-pressed="true"] span { opacity: 0.85; }
.pd-size-out { text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }

/* The gallery */
.pg-track { margin: 0; padding: 0; list-style: none; }
.pg-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 1rem; }
.pg-open:focus-visible { outline: 2px solid var(--color-rani); outline-offset: 3px; }
@media (max-width: 767px) {
  .pg-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .pg-track::-webkit-scrollbar { display: none; }
  .pg-slide { flex: 0 0 100%; scroll-snap-align: start; }
  .pg-thumbs { display: flex; align-items: center; gap: 8px; margin-top: 10px; overflow-x: auto; }
  .pg-thumb {
    flex: 0 0 52px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-shell);
    min-height: 44px;
  }
  .pg-thumb[aria-pressed="true"] { border-color: var(--color-ink); }
  .pg-count { margin-left: auto; font-size: 0.75rem; color: var(--color-quartz); font-variant-numeric: tabular-nums; }
}
@media (min-width: 768px) {
  .pg-track { display: grid; gap: 1rem; }
  .pg-thumbs { display: none; }
}

/* Full-size photos */
.pg-zoom {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-bone);
  color: var(--color-ink);
}
.pg-zoom::backdrop { background: rgb(20 28 74 / 0.6); }
.pg-zoom[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.pg-zoom-stage { overflow: hidden; display: grid; place-items: center; padding: 12px; touch-action: pinch-zoom; }
.pg-zoom-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: scale var(--dur-base) var(--ease-out);
}
.pg-zoom-stage.is-zoomed img { scale: 2.2; cursor: zoom-out; }
.pg-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--color-rule);
}
.pg-zoom-bar button { min-height: 44px; padding: 0 10px; border: 0; background: none; color: inherit; cursor: pointer; }
.pg-zoom-bar span { color: var(--color-slate); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .pg-zoom[open] { animation: zoom-in var(--dur-base) var(--ease-out); }
  @keyframes zoom-in { from { opacity: 0; } }
}

/* The slim buy bar on phones */
.pd-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--color-bone) 94%, transparent);
  border-top: 1px solid var(--color-rule);
  backdrop-filter: blur(6px);
}
.pd-bar button { min-height: 44px; flex: none; }
@media (min-width: 768px) { .pd-bar { display: none !important; } }

/* ---- Home: the collections as photographs, and the wear and gift band ---- */
/* The lead photograph sets the height; the two beside it share it exactly. */
.coll-mosaic { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px; padding: 6px 6px 0; aspect-ratio: 2.6 / 2; }
.coll-mosaic.is-single { grid-template-columns: 1fr; aspect-ratio: 4 / 3; }
.coll-mosaic > * { min-height: 0; min-width: 0; }
.coll-mosaic .coll-main { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0 0; }
.coll-side { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.coll-side img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.coll-side img:first-child { border-radius: 0 12px 0 0; }
.coll-main, .coll-side img { transition: scale var(--dur-slow) var(--ease-out); }
.group:hover .coll-main { scale: 1.04; }
.group:hover .coll-side img { scale: 1.06; }

.band-tile { position: relative; overflow: hidden; border-radius: 1rem; }
.band-tile img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.band-tile:hover img { scale: 1.04; }

/* Sections rise into view as they arrive. Only where the browser can tie it to the
   scroll; otherwise everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* ---- Home: a photograph first, with the pieces marked on it ---- */
.home-hero { position: relative; isolation: isolate; min-height: min(78svh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--color-neel-deep); }
.home-hero picture, .home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; }
.home-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 18 48 / 0.78) 0%, rgb(14 18 48 / 0.35) 38%, rgb(14 18 48 / 0.05) 70%); }
.home-hero-copy { width: 100%; padding-top: 7rem; padding-bottom: 2.5rem; }
/* On wider screens the hero is never taller than the photograph's own 16:9, so the photo is only ever
   cropped top and bottom and the tea lights keep their true size. It stops at about two thirds of the
   screen so the collection is close below, and the crop keeps the lower part of the room. */
@media (min-width: 768px) {
  .home-hero-copy { padding-bottom: 4rem; }
  .home-hero { min-height: min(56.25vw, max(66svh, 440px)); container-type: inline-size; }
  .home-hero-img { object-position: center 72%; }
}
@media (max-width: 767px) { .home-hero { min-height: 72svh; } .home-hero-img { object-position: center 55%; } }

.hotspot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: flex; align-items: center; gap: 0.6rem; color: var(--color-bone); text-decoration: none; z-index: 1; }
.hotspot-dot { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--color-bone); box-shadow: 0 0 0 3px rgb(251 244 230 / 0.35), 0 2px 8px rgb(0 0 0 / 0.35); flex: none; }
.hotspot-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgb(251 244 230 / 0.7); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { scale: 0.7; opacity: 0.9; } 100% { scale: 1.8; opacity: 0; } }
.hotspot-tag { font-size: 0.78rem; line-height: 1.2; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgb(251 244 230 / 0.94); color: var(--color-ink); white-space: nowrap; box-shadow: 0 4px 14px rgb(0 0 0 / 0.18); transition: translate var(--dur-base) var(--ease-out); }
.hotspot-tag b { font-weight: 500; margin-left: 0.35rem; color: var(--color-slate); }
.hotspot:hover .hotspot-tag { translate: 2px 0; }
@media (max-width: 767px) { .hotspot-tag { font-size: 0.72rem; padding: 0.35rem 0.55rem; } }
@media (prefers-reduced-motion: reduce) { .hotspot-dot::after { animation: none; } }

.scene { position: relative; margin: 0; }
.scene img { width: 100%; aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; border-radius: 1rem; display: block; }
/* In the room photos the dot sits exactly on x and y, and the tag hangs to its right, wrapping before the edge. */
.scene-photo { position: relative; }
.scene .hotspot { translate: -7px -50%; }
.scene .hotspot-tag { white-space: normal; max-width: 19rem; }
.hotspot-hero { display: none; }
@media (min-width: 768px) { .hotspot-hero { display: flex; } }

.room-tile-img img { transition: scale var(--dur-slow) var(--ease-out); }
.room-tile:hover .room-tile-img img { scale: 1.04; }

/* ---- Shop and product pages ---- */
.pc-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: none; justify-content: center; gap: 6px; }
.pc-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgb(251 244 230 / 0.55); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); }
.pc-dot.is-on { background: var(--color-bone); }
.pc-dot::before { content: ''; position: absolute; inset: -12px; }
.pc-dot { position: relative; }
@media (hover: none) { .pc-dots { display: flex; } }
.pc-frame.is-alt .pc-alt { opacity: 1; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 0; }