/* ==========================================================================
   The Rooms · four occasions, four lit panels (site/celebrate/)
   Aaron: "add some dimension and/or color to the 'The rooms' section. Give
   the events a very subtle distinguishing." (notes/vision.md, 2026-10-08)

   Each room becomes an object under the pendant: a dark glass-and-lacquer
   panel with a polished rim, lit sides that fall away, a still diagonal
   reflection and a soft cast shadow. The four are one family (same panel,
   same light, the same emerald tick where the rim begins, as on every label
   on the page) and each carries a whisper of its occasion:
     · Weddings      pearl and ivory-champagne light; a pair of rings, one set
                     with a pearl, on the rim.
     · Birthdays     glossy emerald lacquer with gold and silver confetti caught
                     in it; the logo's star with two pieces of confetti on the rim.
     · Professional  cool chrome-graphite, a fine pinstripe and a crisp second
                     silver rule; a chrome lozenge on the rim.
     · Intimate      candlelight: a low amber falloff and a small flame standing
                     on the rim, whose glow falls onto the panel.

   The rules of the layer:
   · No layout change. The panel is the room's ::before, absolutely placed and
     outset around the text (--rm-x at the sides, --rm-b below; its top edge is
     the room's own rule, which it replaces). No size, margin, padding or line
     break moves, the outsets stay inside the gutters and the column gaps, and
     nothing reaches the edge of the screen (320 to 1920).
   · Still. The only change of state is hover (fine pointers): a lift of light,
     opacity only. Nothing sparkles or moves, so the opening's star keeps its
     moment. Reduced motion: no transition. Forced colours: the plain rule.
   · Text stays as it was (cream, #f4f1ea). Sampled behind every line at 320,
     390, 820 and 1440, hovered or not: the lightest pixel is #303e36 (the
     birthday's lacquer under hover), 9.97:1; the means run 13.1 to 17.2:1.
   · Works under every finish (its specificity, #rooms, wins over the finishes'
     rules on .room); with "celebration" the rims are brighter and each carries
     one still point of light. The panels are 82% opaque, so the celebration's
     bead shows through them only faintly, as through glass.
   · Pseudo-elements: .room::before (the panel), .room::after (the hover light),
     .room__name::before (the seal on the rim; it is placed against .room, so
     .room__name stays unpositioned).
   ========================================================================== */

#rooms .room {
  /* Geometry: the panel's outset at the sides (phones: 8px short of the screen's edge) and below. */
  --rm-x: min(calc(var(--gutter) - 8px), 24px);
  --rm-b: 1.25rem;
  /* Light: neutral chrome, the rim's colour (per room) and its strength from left to right. */
  --rm-lit: 240, 240, 240;
  --rm-rim: 240, 240, 240;
  --rm-a1: 0.46;
  --rm-a2: 0.23;
  --rm-a3: 0.14;
  /* The break in the rim for the seal, measured from the panel's right edge. */
  --rm-gap-b: calc(var(--rm-x) - 5px);
  --rm-gap-a: calc(var(--rm-x) + 33px);
  /* Each room's signature: layers over the surface (top) and in it (sig), and its seal. */
  --rm-sig: linear-gradient(transparent, transparent);
  --rm-sig-top: linear-gradient(transparent, transparent);
  --rm-seal: none;
  /* Celebration only: one still point of light on the rim, at --rm-pt. */
  --rm-pt: 30%;
  --rm-cel: linear-gradient(transparent, transparent);

  position: relative;
  isolation: isolate;
  border-top-color: transparent;
  border-image: none;
}

/* Two columns: half of the list's column gap (styles.css, .rooms__list) less 6px, so two
   staggered panels keep 12px of dark between them. */
@media (min-width: 768px) {
  #rooms .room { --rm-x: calc(clamp(2rem, 4vw, 3.5rem) / 2 - 6px); }
}
@media (min-width: 1024px) {
  #rooms .room { --rm-x: clamp(18px, 1.9vw, 30px); --rm-b: 1.5rem; }
}

#rooms .room::before,
#rooms .room::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  left: calc(-1 * var(--rm-x));
  right: calc(-1 * var(--rm-x));
  bottom: calc(-1 * var(--rm-b));
  pointer-events: none;
}

#rooms .room::before {
  background:
    var(--rm-cel),
    /* the rim, brightest where the light lands, broken for the seal */
    linear-gradient(90deg,
      rgba(var(--rm-rim), var(--rm-a1)) 0,
      rgba(var(--rm-rim), var(--rm-a2)) 32%,
      rgba(var(--rm-rim), var(--rm-a3)) calc(100% - var(--rm-gap-a)),
      transparent calc(100% - var(--rm-gap-a)) calc(100% - var(--rm-gap-b)),
      rgba(var(--rm-rim), var(--rm-a3)) calc(100% - var(--rm-gap-b))) 0 0 / 100% 1px no-repeat,
    /* the emerald tick where the rim begins, as on every label */
    linear-gradient(90deg, #3cc987, #1aa35c 60%, #0f7a45) 0 0 / 2.25rem 1px no-repeat,
    /* the sides: lit on the left, turned away on the right */
    linear-gradient(180deg, rgba(var(--rm-rim), 0.22), rgba(var(--rm-rim), 0.05) 55%, rgba(var(--rm-rim), 0.02)) 0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(var(--rm-lit), 0.09), rgba(var(--rm-lit), 0.02) 60%, rgba(var(--rm-lit), 0.01)) 100% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(var(--rm-lit), 0.06), rgba(var(--rm-lit), 0.02)) 0 100% / 100% 1px no-repeat,
    var(--rm-sig-top),
    /* glass: a still diagonal reflection with a thin second streak */
    linear-gradient(112deg,
      transparent 16%, rgba(var(--rm-lit), 0.03) 16.2%, rgba(var(--rm-lit), 0.012) 31%, transparent 31.2%,
      transparent 34%, rgba(var(--rm-lit), 0.02) 34.2%, rgba(var(--rm-lit), 0.02) 35.2%, transparent 35.4%),
    /* the pendant above and to the left */
    radial-gradient(120% 90% at 18% 0%, rgba(var(--rm-lit), 0.05), rgba(var(--rm-lit), 0) 62%),
    var(--rm-sig),
    /* the surface: the page's black, lifted a little, 82% opaque */
    linear-gradient(180deg, rgba(var(--rm-lit), 0.02), rgba(var(--rm-lit), 0.01)) rgba(5, 7, 6, 0.82);
  /* a highlight under the rim, the foot in shade, a contact line and a soft cast shadow */
  box-shadow:
    inset 0 1px 0 rgba(var(--rm-lit), 0.04),
    inset 0 24px 28px -26px rgba(var(--rm-rim), 0.1),
    inset 0 -28px 30px -28px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 26px 44px -26px rgba(0, 0, 0, 0.95);
}

/* The seal, set into the rim at its right end, over the text column's right edge. */
#rooms .room__name::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 0;
  width: 28px;
  height: 16px;
  background: var(--rm-seal) center / 28px 16px no-repeat;
  pointer-events: none;
}

/* Hover (fine pointers only): a lift of light. The rim brightens after the emerald tick, the
   pendant's light spreads and the cast shadow deepens, all in one layer that fades in. */
#rooms .room::after {
  background:
    linear-gradient(90deg,
      transparent 0 2.25rem,
      rgba(var(--rm-rim), 0.4) 2.25rem,
      rgba(var(--rm-rim), 0.2) 40%,
      rgba(var(--rm-rim), 0.1) calc(100% - var(--rm-gap-a)),
      transparent calc(100% - var(--rm-gap-a)) calc(100% - var(--rm-gap-b)),
      rgba(var(--rm-rim), 0.1) calc(100% - var(--rm-gap-b))) 0 0 / 100% 1px no-repeat,
    radial-gradient(80% 70% at 24% 0%, rgba(var(--rm-rim), 0.06), rgba(var(--rm-rim), 0) 70%);
  box-shadow: 0 34px 56px -30px #000;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  #rooms .room:is(:hover, :focus-within)::after { opacity: 1; }
}

/* ---------- The four signatures ------------------------------------------
   Low saturation, in the brand's light: ivory, emerald, cool chrome, candle. */

/* Weddings: a pearl's light from the top right, a faint pearlescent shift across the glass. */
#rooms .room[data-room="wedding"] {
  --rm-rim: 246, 236, 214;
  --rm-gap-b: calc(var(--rm-x) - 1px);
  --rm-gap-a: calc(var(--rm-x) + 28px);
  --rm-sig:
    radial-gradient(75% 95% at 88% 0%, rgba(242, 226, 200, 0.13), rgba(242, 226, 200, 0) 70%),
    linear-gradient(105deg, rgba(246, 228, 230, 0.035), rgba(228, 242, 238, 0.04) 40%, rgba(236, 232, 248, 0.035) 70%, rgba(246, 238, 222, 0.04));
  --rm-seal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><defs><linearGradient id='p' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='.5' stop-color='%23cdc2ac'/><stop offset='1' stop-color='%23f1e8d6'/></linearGradient><radialGradient id='q' cx='.38' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23efe6d4'/><stop offset='1' stop-color='%23a99f8c'/></radialGradient></defs><g fill='none' stroke='url(%23p)' stroke-width='1.2'><circle cx='10.5' cy='8.6' r='5.4'/><circle cx='17.5' cy='8.6' r='5.4'/></g><path d='M11.9 3.4A5.4 5.4 0 0 1 15.4 6.1' fill='none' stroke='%230a0d0b' stroke-width='2.6'/><path d='M11.9 3.4A5.4 5.4 0 0 1 15.4 6.1' fill='none' stroke='url(%23p)' stroke-width='1.2'/><circle cx='17.5' cy='2.6' r='1.9' fill='url(%23q)'/></svg>");
}

/* Milestone Birthdays: glossy emerald lacquer, a crisp gloss near the top, and confetti
   (gold, silver, one emerald) caught in it: a trail from the seal along the top margin and a
   few pieces in the foot, never behind a line of text. */
#rooms .room[data-room="birthday"] {
  --rm-rim: 236, 238, 236;
  --rm-gap-b: calc(var(--rm-x) - 1px);
  --rm-gap-a: calc(var(--rm-x) + 29px);
  --rm-sig-top:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 20'><rect x='138.3' y='12.4' width='3.4' height='1.3' transform='rotate(35 140 13)' fill='%233cc987' opacity='.85'/><rect x='122.1' y='4.3' width='3.8' height='1.4' transform='rotate(-20 124 5)' fill='%23d2b97f' opacity='.9'/><path d='M108 13.4l1.2 1.2-1.2 1.2-1.2-1.2z' fill='%23ececec' opacity='.85'/><circle cx='91' cy='7.5' r='.95' fill='%23d2b97f' opacity='.8'/><rect x='68.4' y='13.4' width='3.2' height='1.2' transform='rotate(62 70 14)' fill='%23e2e2e2' opacity='.75'/><rect x='44.5' y='5.4' width='3' height='1.2' transform='rotate(14 46 6)' fill='%23d2b97f' opacity='.6'/><circle cx='22' cy='11.5' r='.75' fill='%23e2e2e2' opacity='.5'/></svg>") right calc(var(--rm-x) + 30px) top 2px / 150px 20px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14'><rect x='97.2' y='5.4' width='3.6' height='1.3' transform='rotate(-28 99 6)' fill='%23d2b97f' opacity='.8'/><circle cx='76' cy='9' r='.85' fill='%23e6e6e6' opacity='.75'/><rect x='48.5' y='4.4' width='3' height='1.2' transform='rotate(48 50 5)' fill='%23e2e2e2' opacity='.6'/><circle cx='20' cy='8' r='.75' fill='%23d2b97f' opacity='.55'/></svg>") right calc(var(--rm-x) + 4px) bottom 4px / 110px 14px no-repeat,
    linear-gradient(176deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.01) 24%, transparent 24.3%);
  --rm-sig:
    linear-gradient(172deg, rgba(26, 163, 92, 0.13), rgba(15, 122, 69, 0.065) 46%, rgba(11, 94, 53, 0.04));
  --rm-seal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='.55' stop-color='%23cfcfcf'/><stop offset='1' stop-color='%23eeeeee'/></linearGradient></defs><path d='M14 2.2L15.1 6.9 19.8 8 15.1 9.1 14 13.8 12.9 9.1 8.2 8 12.9 6.9z' fill='url(%23s)'/><rect x='2.6' y='4.2' width='3.8' height='1.6' transform='rotate(-32 4.5 5)' fill='%23d6bd84'/><rect x='21.6' y='10.2' width='3.6' height='1.5' transform='rotate(28 23.4 11)' fill='%233cc987'/><circle cx='24' cy='4' r='.95' fill='%23d6bd84'/><circle cx='4.6' cy='11.6' r='.85' fill='%23e8e8e8'/></svg>");
}

/* Professional Events: cool graphite, a fine pinstripe, a second silver rule under the rim. */
#rooms .room[data-room="professional"] {
  --rm-rim: 226, 232, 238;
  --rm-gap-b: calc(var(--rm-x) - 3px);
  --rm-gap-a: calc(var(--rm-x) + 31px);
  --rm-sig-top:
    linear-gradient(90deg, rgba(226, 232, 238, 0.2), rgba(226, 232, 238, 0.09) 60%, rgba(226, 232, 238, 0.05)) 0 4px / 100% 1px no-repeat;
  --rm-sig:
    repeating-linear-gradient(90deg, rgba(210, 222, 236, 0.024) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(176, 192, 214, 0.06), rgba(176, 192, 214, 0.015));
  --rm-seal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path d='M1 8.5H8M20 8.5H27' stroke='%23d4dae0' stroke-width='1'/><path d='M14 3.5L19 8.5 14 13.5z' fill='%23a7adb3'/><path d='M14 3.5L9 8.5 14 13.5z' fill='%23eef1f4'/><path d='M14 3.5L19 8.5 14 13.5 9 8.5z' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='.5'/></svg>");
}

/* Intimate Gatherings: the flame's glow on the panel, and a low amber light from below. */
#rooms .room[data-room="intimate"] {
  --rm-rim: 244, 228, 204;
  --rm-gap-b: calc(var(--rm-x) + 9px);
  --rm-gap-a: calc(var(--rm-x) + 19px);
  --rm-sig:
    radial-gradient(48px 36px at calc(100% - var(--rm-x) - 14px) 0, rgba(246, 196, 128, 0.12), rgba(246, 196, 128, 0)),
    radial-gradient(80% 95% at 10% 106%, rgba(214, 156, 88, 0.085), rgba(214, 156, 88, 0) 70%);
  --rm-seal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><defs><radialGradient id='f' cx='.5' cy='.7' r='.62'><stop offset='0' stop-color='%23fff7e6'/><stop offset='.45' stop-color='%23f6d699'/><stop offset='.85' stop-color='%23dc9a50'/><stop offset='1' stop-color='%23b8732f'/></radialGradient><radialGradient id='h' cx='.5' cy='.5' r='.5'><stop offset='0' stop-color='%23f6c480' stop-opacity='.38'/><stop offset='1' stop-color='%23f6c480' stop-opacity='0'/></radialGradient></defs><ellipse cx='14' cy='5.8' rx='9' ry='6.5' fill='url(%23h)'/><path d='M14 .8C15.5 3.3 17 4.7 17 6.4 17 7.9 15.7 8.8 14 8.8S11 7.9 11 6.4C11 4.7 12.5 3.3 14 .8z' fill='url(%23f)'/><ellipse cx='14' cy='10.6' rx='4.5' ry='1' fill='%23f6c480' fill-opacity='.22'/></svg>");
}

/* ---------- Reduced motion and forced colours ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  #rooms .room::after { transition: none; }
}
@media (forced-colors: active) {
  #rooms .room { border-top-color: CanvasText; }
  #rooms .room::before,
  #rooms .room::after,
  #rooms .room__name::before { display: none; }
}

/* ---------- Celebration: the same panels, a little more lit -------------- */

:root[data-finish="celebration"] #rooms .room {
  --rm-a1: 0.56;
  --rm-a2: 0.28;
  --rm-a3: 0.17;
  --rm-cel: radial-gradient(72px 4px at var(--rm-pt) 0, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) no-repeat;
}
#rooms .room[data-room="birthday"]     { --rm-pt: 22%; }
#rooms .room[data-room="professional"] { --rm-pt: 38%; }
#rooms .room[data-room="intimate"]     { --rm-pt: 26%; }
/* Under the other finishes the seals rest a little quieter. */
:root:not([data-finish="celebration"]) #rooms .room__name::before { opacity: 0.85; }