/* ═══════════════════════════════════════════════════════════════════
   ATMOSPHERE — the Creative Mansion's feel, carried across the site.

   This is a layer, not a rewrite. It loads last on every page
   and only adds the mansion's five signatures on top of what each page
   already had, so nothing of the original site was removed and pulling
   this one <link> puts everything back exactly as it was.

   The five signatures, taken from mansion.html:
     1. a lit ground   — layered radial washes instead of a flat field
     2. gold structure — hairlines, rules and focus rings in champagne
     3. lit scenes     — dark panel + top glow + floor, text at the base
     4. the lift       — translateY(-6px) on a slow, weighted curve
     5. the big serif  — Cormorant at display scale, tight tracking

   One deliberate difference from the mansion, and it is a contrast one.
   The mansion sets small gold kickers on a light ground; champagne
   (#B8963E) only reaches 2.7:1 on ivory, which is under the 4.5:1 that
   small text needs. So on light grounds gold stays STRUCTURAL here
   (rules, rings, glow) and rose keeps the small text at 4.6:1. Gold
   text appears where the mansion actually earns it — on the dark
   scenes, where champagne on ink is 5.6:1.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Named off the mansion so the two files can be read side by side.
     Each falls back to the value the page already had. */
  --atm-blush:#EEC9D2;
  --atm-champagne:#B8963E;
  --atm-champagne-deep:#8A6E28;
  --atm-rose:#983E54;
  --atm-ink:#2A1E22;
  --atm-ivory:#FFFDF8;
  --atm-glow:rgba(238,201,210,.55);
  --atm-gold-glow:rgba(184,150,62,.16);
  --atm-shadow:rgba(42,30,34,.14);
  --atm-lift:cubic-bezier(.2,.7,.3,1);
  --atm-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}

/* ── 1. THE LIT GROUND ────────────────────────────────────────────
   The mansion never shows a flat colour: light falls from the top and
   a little gold pools in the far corner. Fixed and behind everything,
   so it reads as the room the page sits in rather than a banner that
   scrolls away. It keeps the page's own pink weight underneath, which
   is what protects the gold lettering in the hero banner — that gloss
   ramp was tuned against the deepened pink, not against ivory. */
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 0%,   var(--atm-glow) 0%, transparent 60%),
    radial-gradient(90% 70% at 84% 98%,   var(--atm-gold-glow) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,253,248,.55) 0%, rgba(255,253,248,0) 46%);
}

/* A page that already paints its own wash keeps it; two would over-light. */
body.atm-no-wash::after{content:none}

/* ── 2. GOLD STRUCTURE ────────────────────────────────────────────
   Gold as architecture rather than as labels: the hairline under a
   section, the ring on a focused control, the rule beneath a heading. */
.atm-rule{
  background:linear-gradient(90deg,
    transparent 0%, var(--atm-champagne) 22%,
    var(--atm-champagne) 78%, transparent 100%);
}

/* One focus ring for the whole estate. Gold, generous, and never
   removed — it is the only thing a keyboard has to find its way by. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--atm-champagne);
  outline-offset:4px;
  border-radius:2px;
}

/* ── 3. LIT SCENES ────────────────────────────────────────────────
   The mansion room, available anywhere: a deep ground, a light from
   above, a floor it stands on, and the words at the base of the frame.
   Give a block class="atm-scene" and set --s-deep / --s-glow / --s-accent. */
.atm-scene{
  --s-deep:#2A1E22;
  --s-glow:#EEC9D2;
  --s-accent:#B8963E;
  position:relative; overflow:hidden; isolation:isolate;
  min-height:300px; border-radius:5px; padding:30px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--s-deep); color:var(--atm-ivory);
  box-shadow:0 2px 12px var(--atm-shadow);
  transition:transform .5s var(--atm-lift), box-shadow .5s ease;
}
.atm-scene::before,
.atm-scene::after{content:''; position:absolute; inset:0; z-index:-1}
/* the light */
.atm-scene::before{
  background:radial-gradient(70% 52% at 50% -6%, var(--s-glow) 0%, transparent 64%);
  opacity:.5; mix-blend-mode:screen;
}
/* the floor it stands on */
.atm-scene::after{
  top:auto; height:44%;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 46%, rgba(0,0,0,.76) 100%);
}
.atm-scene > *{position:relative; z-index:1}
.atm-scene-kicker{
  font-size:.58rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--s-accent); margin-bottom:10px;
}
.atm-scene-title{
  font-family:var(--atm-serif); font-weight:600; line-height:1.04;
  font-size:clamp(26px,3.4vw,40px); margin:0 0 8px;
}
.atm-scene-line{color:rgba(255,253,248,.86); font-size:.95rem; margin:0; max-width:44ch}

/* ── 4. THE LIFT ──────────────────────────────────────────────────
   Everything that can be clicked rises the same distance, on the same
   curve, into the same shadow. It is the single gesture that makes
   pages built months apart feel like one hand made them. */
.card,
.atm-scene,
.tool-card,
.brandcube .bc-scene{
  transition:transform .5s var(--atm-lift), box-shadow .5s ease, border-color .3s ease;
}
.card:hover,
.atm-scene:hover,
.tool-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px rgba(42,30,34,.28);
}

/* ── 5. THE BIG SERIF ─────────────────────────────────────────────
   The mansion lets its headings run large and pulls the tracking in.
   Only the top-level heading changes; body copy is left alone. */
.atm-display,
.hero-tagline{
  font-family:var(--atm-serif); font-weight:600;
  letter-spacing:-.01em; text-wrap:balance;
}

/* Section eyebrows keep rose for contrast, but gain the mansion's
   wider tracking so they read as the same family of label. */
.eyebrow,
.kicker,
.eco-label,
.card-cat{letter-spacing:.28em}

/* ── MOTION ───────────────────────────────────────────────────────
   Anyone who has asked their system for less movement gets the look
   and none of the travel. */
@media (prefers-reduced-motion:reduce){
  .card,.atm-scene,.tool-card,.brandcube .bc-scene{transition:none}
  .card:hover,.atm-scene:hover,.tool-card:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   THE MANSION LOOK — from the approved mockups.
   These are the pieces the whole site shares: the gradient pill, the
   script accent, the arched room portal and the value strip. The hero
   itself is one-off and lives on the store page.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --atm-magenta:#C2185B;
  --atm-magenta-hi:#E0568C;
  --atm-script:'Great Vibes','Snell Roundhand','Apple Chancery',
               'Cormorant Garamond',Georgia,cursive;
}

/* The flowing script from the mockups — "Welcome to Our", "All in One
   Place". Great Vibes sits very small on the line, so it always needs a
   generous line-height or the descenders clip. */
.script{
  font-family:var(--atm-script);
  font-weight:400; line-height:1.25;
  color:var(--atm-magenta);
  letter-spacing:.01em;
}

/* The gradient pill. One button shape for the whole estate. */
.cta-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  color:#FFFDF8; padding:1rem 2.1rem; border-radius:999px; border:0;
  background:linear-gradient(100deg,var(--atm-magenta) 0%,var(--atm-magenta-hi) 100%);
  box-shadow:0 10px 26px rgba(194,24,91,.34);
  transition:transform .35s var(--atm-lift), box-shadow .35s ease, filter .35s ease;
  cursor:pointer;
}
.cta-pill:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(194,24,91,.42); filter:saturate(1.08)}
.cta-pill .arrow{
  display:grid; place-items:center; width:1.55em; height:1.55em; border-radius:50%;
  background:rgba(255,253,248,.92); color:var(--atm-magenta); font-size:.85em; flex:none;
}
/* The quieter twin, for "watch the intro". */
.cta-pill.ghost{
  background:rgba(255,253,248,.92); color:var(--atm-magenta);
  box-shadow:0 8px 22px rgba(42,30,34,.16);
}
.cta-pill.ghost:hover{box-shadow:0 14px 32px rgba(42,30,34,.22)}

/* ── THE ARCHED ROOM PORTAL ───────────────────────────────────────
   The row of lit archways from the mockup. Each portal is a real link
   to a real room page; a room that is not built yet renders as a
   non-clickable portal, so nothing ever leads nowhere. */
/* ── THE ARCADE ──────────────────────────────────────────────────────
   One hall, not seven cards. The row is a single lit corridor: a warm
   wall above, a marble floor below, and seven archways cut into it,
   divided by gilded pilasters rather than gaps. That continuity is what
   makes the row read as somewhere you could walk, which is the whole
   point of the approved artwork. A bay whose photograph has not arrived
   yet is still a lit room - it takes its colour from room_palettes and
   glows from above - so the hall never breaks into dark holes. */
.portals{
  position:relative; isolation:isolate;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(126px,1fr);
  gap:0; align-items:end;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin;
  padding:30px 0 0; border-radius:20px;
  background-color:#F4DFCE;
  background-image:
    radial-gradient(130% 44% at 50% -4%, rgba(255,244,222,.95) 0%, rgba(255,238,214,0) 62%),
    linear-gradient(180deg,#F7E6D6 0%,#F0D5C4 40%,#E9C9B8 64%,#F5E0D0 100%);
  box-shadow:inset 0 0 70px rgba(184,150,62,.26),
             inset 0 1px 0 rgba(255,253,248,.8),
             0 18px 44px rgba(42,30,34,.16);
}
/* the marble the whole hall stands on */
.portals::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:15%;
  pointer-events:none; z-index:2;
  background:linear-gradient(180deg,rgba(255,253,248,0) 0%,rgba(255,250,242,.78) 55%,rgba(246,229,215,.95) 100%);
}
:root[data-theme="night"] .portals{
  background-color:#2C2028;
  background-image:
    radial-gradient(130% 44% at 50% -4%, rgba(255,226,178,.55) 0%, rgba(255,226,178,0) 62%),
    linear-gradient(180deg,#3A2B33 0%,#2E222A 44%,#271C23 66%,#33252D 100%);
  box-shadow:inset 0 0 70px rgba(184,150,62,.3), 0 18px 44px rgba(0,0,0,.4);
}
:root[data-theme="night"] .portals::after{
  background:linear-gradient(180deg,rgba(255,253,248,0) 0%,rgba(60,44,54,.6) 55%,rgba(44,32,40,.95) 100%);
}

/* One bay of the arcade. The pilaster between bays is a border, not a
   gap, so the wall stays unbroken from end to end. */
.portal-slot{
  position:relative; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:0 9px 26px; text-decoration:none; color:inherit;
}
.portal-slot + .portal-slot::before{
  content:''; position:absolute; left:0; top:-14px; bottom:12%; width:1px;
  background:linear-gradient(180deg,rgba(184,150,62,0) 0%,rgba(184,150,62,.55) 22%,
             rgba(184,150,62,.55) 78%,rgba(184,150,62,0) 100%);
}

/* The archway itself: an opening in the wall, lit from the ceiling. */
.portal{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:7px;
  width:100%; aspect-ratio:1 / 1.65; padding:18px 10px 44px; isolation:isolate;
  border-radius:999px 999px 7px 7px;
  background-color:var(--p-deep,#3A2A30);
  background-image:
    var(--p-art,none),
    radial-gradient(70% 26% at 50% 96%, rgba(255,236,205,.5) 0%, rgba(255,236,205,0) 70%),
    radial-gradient(96% 60% at 50% 6%, rgba(255,240,212,.82) 0%, rgba(255,226,186,.28) 44%, rgba(255,226,186,0) 76%),
    linear-gradient(180deg,rgba(255,253,248,.18) 0%,rgba(255,240,214,.06) 40%,rgba(0,0,0,.30) 100%);
  background-size:cover, auto, auto, auto;
  background-position:center, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  border:1px solid rgba(184,150,62,.6);
  box-shadow:0 10px 26px rgba(42,30,34,.28),
             inset 0 0 0 3px rgba(255,253,248,.14),
             inset 0 -30px 40px rgba(0,0,0,.28);
  color:#FFFDF8; overflow:hidden;
  transition:transform .5s var(--atm-lift), box-shadow .5s ease, filter .5s ease;
}
/* the room lights up as you approach it */
a.portal-slot:hover .portal,
a.portal-slot:focus-visible .portal{
  transform:translateY(-7px); filter:brightness(1.16) saturate(1.05);
  box-shadow:0 30px 60px rgba(42,30,34,.36),
             inset 0 0 0 3px rgba(184,150,62,.6),
             inset 0 -30px 40px rgba(0,0,0,.22);
}
a.portal-slot:focus-visible{outline:3px solid var(--atm-champagne); outline-offset:4px;
  border-radius:14px}
.portal::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(72% 44% at 50% 0%, var(--p-glow,#EEC9D2) 0%, transparent 64%);
  opacity:.5; mix-blend-mode:screen; transition:opacity .5s ease;
}
a.portal-slot:hover .portal::before{opacity:.85}
.portal-icon{width:20px; height:20px; opacity:.96; flex:none;
  filter:drop-shadow(0 1px 4px rgba(24,14,18,.8))}
.portal-icon svg{width:100%; height:100%; display:block; fill:none;
  stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.portal-name{
  font-size:.56rem; font-weight:700; letter-spacing:.13em; line-height:1.35;
  text-transform:uppercase; text-align:center; margin:0; position:relative;
  /* A room name has to hold over a bright room and a dark one alike, so it
     carries its own pool of shade rather than trusting the photograph. */
  text-shadow:0 1px 2px rgba(24,14,18,.95), 0 2px 10px rgba(24,14,18,.85),
              0 0 22px rgba(24,14,18,.7);
}
.portal-icon,.portal-name{z-index:2}
/* the shade the name stands in, poured from the top of the arch */
.portal::after{content:''; position:absolute; inset:0 0 auto 0; height:56%;
  z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(24,14,18,.62) 0%, rgba(24,14,18,.28) 46%,
                             rgba(24,14,18,0) 100%)}
/* the Explore pill stands on the floor of its own archway */
.portal-go{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  font-size:.5rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.44rem .9rem; border-radius:999px; white-space:nowrap;
  background:linear-gradient(100deg,var(--atm-magenta),var(--atm-magenta-hi));
  color:#FFFDF8; box-shadow:0 5px 14px rgba(42,30,34,.42);
  transition:transform .35s var(--atm-lift), box-shadow .35s ease}
.portal-go .arw{display:inline-block; margin-left:.3em; transition:transform .35s ease}
a.portal-slot:hover .portal-go{box-shadow:0 8px 20px rgba(42,30,34,.5)}
a.portal-slot:hover .portal-go .arw{transform:translateX(4px)}
/* a room with no page yet says so, and is not a link */
.portal-slot.soon{cursor:default}
.portal-slot.soon .portal{opacity:.94}
.portal-slot.soon .portal-go{
  background:rgba(255,253,248,.18); color:rgba(255,253,248,.92); box-shadow:none}

/* ── VALUE STRIP ──────────────────────────────────────────────────
   The four-word band under the mockup: creative solutions, meaningful
   brands, purpose driven, global impact. */
.valuestrip{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem 1.9rem; padding:1.1rem 1.25rem;
  font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--atm-rose); border-top:1px solid rgba(184,150,62,.4);
  border-bottom:1px solid rgba(184,150,62,.4);
}
.valuestrip span{display:inline-flex; align-items:center; gap:.5rem}

@media (prefers-reduced-motion:reduce){
  .cta-pill,.portal,.portal-go,.portal-go .arw{transition:none}
  .cta-pill:hover,a.portal-slot:hover .portal{transform:none}
}

/* ── STANDING INSIDE A ROOM ───────────────────────────────────────
   Everything here is added around a page that already works. The room
   is painted behind the content; the bar that names the room and walks
   you back to the lobby sits above it. Nothing in this block changes
   how the page underneath behaves. */
.room-back{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--room-deep,#2A1E22);
  transition:opacity .6s ease}
.room-back.has-art::before{content:''; position:absolute; inset:0;
  background:var(--room-art) center/cover no-repeat;
  opacity:.34}
.room-back::after{content:''; position:absolute; inset:0;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--room-glow,#EEC9D2) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,253,248,.90) 0%, rgba(255,253,248,.96) 40%);
  opacity:.94}
:root[data-theme="night"] .room-back::after{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(226,150,186,.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(38,20,30,.90) 0%, rgba(30,16,24,.96) 44%)}

.room-bar{position:sticky; bottom:0; z-index:60; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:.7rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(255,253,248,.9); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(184,150,62,.4)}
:root[data-theme="night"] .room-bar{background:rgba(38,20,30,.86);
  border-top-color:rgba(184,150,62,.5)}
.room-back-link,.room-dir-btn{font:inherit; font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  padding:.55rem 1.05rem; border-radius:999px; text-decoration:none;
  border:1px solid rgba(152,62,84,.34); background:transparent; color:#983E54;
  transition:background .25s ease, color .25s ease}
.room-back-link:hover,.room-dir-btn:hover{background:#983E54; color:#FFFDF8}
.room-back-link:focus-visible,.room-dir-btn:focus-visible{
  outline:3px solid var(--atm-champagne); outline-offset:3px}
.rb-arrow{display:inline-block; margin-right:.45em; transition:transform .25s ease}
.room-back-link:hover .rb-arrow{transform:translateX(-4px)}
.room-here{font-size:.58rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#6B535B; display:inline-flex;
  align-items:center; gap:.5em}
.rh-dot{width:6px; height:6px; border-radius:50%; background:var(--atm-champagne);
  box-shadow:0 0 0 3px rgba(184,150,62,.22)}
:root[data-theme="night"] .room-here{color:#E4C9D2}

/* display:grid would otherwise win over the hidden attribute */
.room-dir[hidden]{display:none}
.room-dir{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:1.25rem; background:rgba(26,14,20,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.rd-panel{width:min(420px,100%); max-height:80vh; overflow:auto;
  background:#FFFDF8; border:1px solid rgba(184,150,62,.5); border-radius:12px;
  padding:1.4rem 1.3rem; box-shadow:0 30px 70px rgba(42,30,34,.4)}
:root[data-theme="night"] .rd-panel{background:#2E1A24; color:#F7ECEF}
.rd-kicker{margin:0 0 1rem; font-size:.56rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--atm-champagne); text-align:center}
.rd-list{list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:4px}
.rd-row{display:block; padding:.6rem .75rem; border-radius:6px;
  text-decoration:none; color:inherit; transition:background .2s ease}
a.rd-row:hover{background:rgba(238,201,210,.4)}
:root[data-theme="night"] a.rd-row:hover{background:rgba(238,201,210,.14)}
.rd-row.is-here{background:rgba(184,150,62,.16);
  box-shadow:inset 3px 0 0 var(--atm-champagne)}
.rd-name{display:block; font-family:var(--atm-serif); font-size:.98rem;
  font-weight:600; line-height:1.2}
.rd-sub{display:block; font-size:.72rem; color:#8A7480; margin-top:2px}
:root[data-theme="night"] .rd-sub{color:#C6A9B4}
.rd-shut{display:block; width:100%; font:inherit; font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  padding:.6rem 1rem; border-radius:999px; border:0; color:#FFFDF8;
  background:linear-gradient(100deg,var(--atm-magenta),var(--atm-magenta-hi))}
.rd-shut:focus-visible{outline:3px solid var(--atm-champagne); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .room-back,.room-back-link,.room-dir-btn,.rb-arrow,.rd-row{transition:none}
  .room-back-link:hover .rb-arrow{transform:none}
}

/* ── the host's voice ────────────────────────────────────────────────
   The control sits with the other switches so the visitor meets it as
   one more thing the house lets them decide, not as a surprise. It
   starts in the off state and says so in words, not only in an icon. */
.voiceswitch{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; cursor:pointer; font:inherit;
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.42rem .78rem; border-radius:999px;
  color:var(--ink,#2A1E22); background:transparent;
  transition:background .18s ease, color .18s ease;
}
.voiceswitch .vs-icon{ font-size:.7em; opacity:.75; }
.voiceswitch[aria-pressed="true"]{
  background:var(--ink,#2A1E22); color:var(--cream,#FBF7F4);
}
.voiceswitch[aria-pressed="true"] .vs-icon{ opacity:1; }
.voiceswitch:hover{ background:rgba(238,201,210,.55); }
.voiceswitch[aria-pressed="true"]:hover{ background:var(--ink,#2A1E22); }
.voiceswitch:focus-visible{ outline:2px solid var(--gold,#C9A227); outline-offset:2px; }
.room-bar .voiceswitch{ margin-left:.25rem; }
@media (max-width:520px){
  .voiceswitch .vs-word{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
}

/* ── A PANEL YOU CAN WALK INTO ───────────────────────────────────────
   The highlight panels carry their own click now, so the whole card is
   the door rather than the small pill in its corner. The pill stays,
   because it is what tells you the card is a door. */
a.feature.is-link{
  display:flex; text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .45s var(--atm-lift,cubic-bezier(.22,.61,.36,1)),
             box-shadow .45s ease, filter .45s ease;
}
a.feature.is-link:hover{
  transform:translateY(-5px); filter:brightness(1.06);
  box-shadow:0 26px 54px rgba(42,30,34,.3);
}
a.feature.is-link:focus-visible{
  outline:3px solid var(--atm-champagne,#C9A227); outline-offset:4px;
}
a.feature.is-link .fgo{
  display:inline-block; transition:transform .35s ease, box-shadow .35s ease;
}
a.feature.is-link:hover .fgo{ transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){
  a.feature.is-link, a.feature.is-link .fgo{ transition:none }
  a.feature.is-link:hover{ transform:none }
}
/* a saved piece on the cube is a door back to itself */
.cube-face .cube-open{display:block; width:100%; height:100%}
.cube-face .cube-open img{width:100%; height:100%; object-fit:cover; display:block}
.cube-face .cube-open:focus-visible{outline:3px solid var(--atm-champagne,#C9A227);
  outline-offset:-3px}

/* ── THE OFFICE CHATROOM ─────────────────────────────────────────────
   Her desk, at any hour. Two voices in one column: the guest's words on
   the right, hers on the left beneath her face. The panel is quiet by
   default and only ever as tall as the conversation needs. */
.chatroom{
  max-width:640px; margin:2.2rem auto; border-radius:16px; overflow:hidden;
  background:var(--atm-ivory,#FFFDF8);
  border:1px solid rgba(184,150,62,.4);
  box-shadow:0 20px 46px -26px rgba(42,30,34,.36);
}
.chat-head{
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1.1rem;
  background:linear-gradient(100deg,rgba(238,201,210,.55),rgba(255,253,248,.9));
  border-bottom:1px solid rgba(184,150,62,.32);
}
.chat-face{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid rgba(184,150,62,.7);
  box-shadow:0 3px 10px rgba(42,30,34,.22);
}
.chat-who{display:flex; flex-direction:column; line-height:1.3}
.chat-who strong{
  font-family:var(--serif,Georgia,serif); font-size:1.02rem; font-weight:600;
  color:var(--ink,#2A1E22);
}
.chat-state{
  font-size:.6rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted,#6B535B);
}
.chat-state::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#5BA97B; margin-right:.42em; vertical-align:middle;
}

.chat-log{
  display:flex; flex-direction:column; gap:.7rem;
  padding:1.1rem; max-height:23rem; overflow-y:auto; scrollbar-width:thin;
}
.chat-msg{max-width:82%; padding:.7rem .95rem; border-radius:14px}
.chat-msg .chat-text{margin:0; font-size:.9rem; line-height:1.55}
.from-host{
  align-self:flex-start; border-bottom-left-radius:5px;
  background:rgba(238,201,210,.34); color:var(--ink,#2A1E22);
  border:1px solid rgba(184,150,62,.26);
}
.from-guest{
  align-self:flex-end; border-bottom-right-radius:5px;
  background:var(--ink,#2A1E22); color:var(--atm-ivory,#FFFDF8);
}
.chat-go{
  display:inline-block; margin-top:.5rem; font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--atm-magenta,#983E54); border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.chat-go:hover{color:var(--ink,#2A1E22)}

.chat-chips{
  display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem .9rem;
}
.chat-chip{
  font:inherit; font-size:.68rem; cursor:pointer;
  padding:.42rem .8rem; border-radius:999px;
  background:transparent; color:var(--muted,#6B535B);
  border:1px solid rgba(184,150,62,.45);
  transition:background .2s ease, color .2s ease;
}
.chat-chip:hover{background:rgba(238,201,210,.45); color:var(--ink,#2A1E22)}
.chat-chip:focus-visible{outline:2px solid var(--atm-champagne,#C9A227); outline-offset:2px}

.chat-form, .chat-hand-form{display:flex; gap:.5rem}
.chat-form{padding:0 1.1rem 1.1rem}
.chat-field{
  flex:1 1 auto; min-width:0; font:inherit; font-size:.86rem;
  padding:.62rem .85rem; border-radius:999px;
  border:1px solid rgba(184,150,62,.5);
  background:#fff; color:var(--ink,#2A1E22);
}
.chat-field:focus{outline:2px solid var(--atm-champagne,#C9A227); outline-offset:1px}
.chat-send{
  font:inherit; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  padding:.62rem 1.15rem; border-radius:999px; border:0;
  background:linear-gradient(100deg,var(--atm-magenta,#983E54),var(--atm-magenta-hi,#B8536B));
  color:#FFFDF8; box-shadow:0 4px 12px rgba(42,30,34,.26);
}
.chat-send:disabled{opacity:.6; cursor:default}

.chat-handoff{
  align-self:stretch; padding:.85rem .95rem; border-radius:12px;
  background:rgba(255,253,248,.9); border:1px dashed rgba(184,150,62,.55);
}
.chat-hand-note, .chat-hand-done{
  margin:0 0 .6rem; font-size:.78rem; color:var(--muted,#6B535B);
}
.chat-hand-done{margin:0; color:var(--ink,#2A1E22); font-weight:600}

@media (max-width:520px){
  .chat-msg{max-width:92%}
  .chat-log{max-height:19rem}
}


/* ── THE ROOM ENTRANCE ────────────────────────────────────────────
   The doorway you just walked through, held at the top of the page.
   Deliberately short: it should say where you are and then get out of
   the way of the thing you came to do. */
.room-entrance{position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(150px, 22vw, 260px); display:flex; align-items:flex-end;
  padding:1.4rem clamp(1rem,4vw,2.4rem);
  background:var(--room-deep,#2A1E22);
  border-bottom:1px solid rgba(184,150,62,.5)}
.room-entrance::before{content:''; position:absolute; inset:0; z-index:-2;
  background:var(--room-art,none) center 58%/cover no-repeat; opacity:0;
  transition:opacity .8s ease}
.room-entrance.has-art::before{opacity:1}
/* the light in the room, and the floor the words rest on */
.room-entrance::after{content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(72% 50% at 50% -4%, var(--room-glow,#EEC9D2) 0%, transparent 64%),
    linear-gradient(180deg, rgba(26,14,20,0) 34%, rgba(26,14,20,.62) 100%);
  opacity:.9; mix-blend-mode:normal}
.re-plate{position:relative; z-index:1; color:#FFFDF8}
.re-kicker{margin:0 0 .3rem; font-size:.58rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:#EBD3A6; text-shadow:0 2px 8px rgba(26,14,20,.8)}
.re-name{margin:0; font-family:var(--atm-serif,'Cormorant Garamond',Georgia,serif);
  font-weight:600; font-size:clamp(1.7rem,4.6vw,3rem); line-height:1;
  text-shadow:0 3px 18px rgba(26,14,20,.85)}
:root[data-theme="night"] .room-entrance::after{
  background:
    radial-gradient(60% 44% at 50% -2%, rgba(255,214,158,.5) 0%, transparent 68%),
    linear-gradient(180deg, rgba(22,10,18,.24) 20%, rgba(22,10,18,.78) 100%)}
:root[data-theme="night"] .room-entrance.has-art::before{
  filter:brightness(.7) saturate(1.12) sepia(.12) hue-rotate(-12deg)}
/* a room still waiting on its picture keeps its own colour and its own light,
   so it reads as a room rather than as a hole where a photograph should be */
.room-entrance:not(.has-art)::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .room-entrance::before{transition:none}
}


/* ── A DOORWAY THAT CARRIES ITS OWN SIGN ──────────────────────────
   Her room artwork is a photographed archway with the room's name lit
   above it. Where that is true the arch stops drawing its own chrome:
   no icon, no printed name, no pool of shade over her lettering. The
   name stays in the markup for screen readers and for search, it is
   simply not painted a second time. The Explore pill stays, because
   that is the one thing her picture does not contain. */
.portal-slot.art-labelled .portal-icon{display:none}
.portal-slot.art-labelled .portal-name{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
/* Her picture is already an archway, lit, with its own sign. Drawing a second
   arch over it clipped the top of her lettering, and the painted lights sat on
   top of lights she had already put there. So the frame steps back to a plain
   soft rectangle and lets her arch be the arch. */
.portal-slot.art-labelled .portal{
  border-radius:10px;
  /* Taller than the door art's own 843x1124. Her mockup stands these arches up
     nearer 1:1.65, and cover-cropping from center top keeps the crown of the
     doorway and gives back the floor, which is the part nobody looks at. */
  aspect-ratio:1 / 1.65;
  padding:0;
  background-image:var(--p-art,none);
  background-size:cover;
  background-position:center top;
  box-shadow:0 10px 26px rgba(42,30,34,.26);
  border-color:rgba(184,150,62,.42);
}
.portal-slot.art-labelled .portal::before{opacity:.34}
.portal-slot.art-labelled .portal::after{
  /* only enough shade at the foot to seat the Explore pill */
  inset:auto 0 0 0; height:30%;
  background:linear-gradient(180deg, rgba(24,14,18,0) 0%, rgba(24,14,18,.5) 100%)}
a.portal-slot.art-labelled:hover .portal,
a.portal-slot.art-labelled:focus-visible .portal{
  box-shadow:0 30px 60px rgba(42,30,34,.34)}

/* ── THE MENU INSIDE A ROOM ───────────────────────────────────────
   In her mockup each lower panel has a small stack of plates on the
   wall - Our Story, The Divisions, Custom GPTs. They are real links on
   a translucent plate, sized for a thumb, and they sit above the pill
   rather than fighting it. */
.fmenu{list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:5px;
  position:relative; z-index:2; max-width:230px}
.fmenu a{display:block; text-decoration:none; font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#FFF6FA;
  padding:.5rem .8rem; border-radius:5px; min-height:32px; line-height:1.5;
  background:rgba(42,22,32,.56); border:1px solid rgba(184,150,62,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s ease, color .25s ease, border-color .25s ease}
.fmenu a:hover{background:rgba(255,246,250,.94); color:#4A2231;
  border-color:var(--atm-champagne,#B8963E)}
.fmenu a:focus-visible{outline:3px solid var(--atm-champagne,#B8963E); outline-offset:2px}
/* on a panel that carries a menu the pill is a real link, not a label */
.fgo.is-btn{display:inline-block; text-decoration:none; margin-top:.9rem;
  position:relative; z-index:2}
@media (max-width:640px){
  .fmenu{max-width:none; grid-template-columns:1fr 1fr}
}

/* A panel carrying a menu holds more than a panel that does not, and these
   stack from the bottom - so if the box is too short the title climbs out of
   the top of it and lands on the menu. Give the taller ones the room. */
.feature.has-menu{min-height:376px}
.feature.has-menu .ft{font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.12}
.feature.has-menu .fk{margin-bottom:.15rem}
/* and a deeper floor of shade under all of it, so the words hold over a
   bright boutique as well as a dark screening room */
.feature.has-menu::after{
  background:linear-gradient(180deg, rgba(26,14,20,0) 6%, rgba(26,14,20,.52) 42%,
                             rgba(26,14,20,.82) 100%)}
@media (max-width:640px){
  .feature.has-menu{min-height:330px}
}

/* The panel kicker is gold on artwork that is sometimes bright and sometimes
   dark, so it carries its own shade rather than trusting the picture. */
.feature .fk{text-shadow:0 1px 3px rgba(26,14,20,.9), 0 2px 12px rgba(26,14,20,.75)}
.feature .ft{text-shadow:0 2px 6px rgba(26,14,20,.85), 0 3px 20px rgba(26,14,20,.7)}

/* ── A DOORWAY AT NIGHT, WITHOUT A NIGHT PICTURE ──────────────────
   The same evening grade the lobby wears: gold deepens rather than
   dies, blush turns plum, and the light above the door is painted
   back ON rather than dimmed with everything else. Keyed to a class
   the script only sets when no night artwork exists, so it disappears
   the moment a real night file lands. */
.portal-slot.art-graded .portal{
  filter:brightness(.7) contrast(1.06) saturate(1.14) sepia(.14) hue-rotate(-13deg)}
.portal-slot.art-graded .portal::before{
  background:radial-gradient(64% 40% at 50% 0%, rgba(255,214,158,.62) 0%, transparent 66%);
  opacity:.95}
/* the pill and the light over it are not part of the graded picture */
.portal-slot.art-graded .portal-go{filter:none}
a.portal-slot.art-graded:hover .portal{filter:brightness(.84) contrast(1.06) saturate(1.16) sepia(.12) hue-rotate(-13deg)}

/* the room's own page, at night, wearing a graded day picture */
.room-back.art-graded::before{
  filter:brightness(.72) contrast(1.05) saturate(1.12) sepia(.13) hue-rotate(-13deg)}
.room-entrance.art-graded::before{
  filter:brightness(.7) contrast(1.06) saturate(1.12) sepia(.13) hue-rotate(-13deg)}

/* ── A ROOM PAGE AFTER DARK ───────────────────────────────────────
   The mansion going to evening turned the ground behind these pages
   deep plum while their type stayed the dark ink it wears by day, so
   the words all but vanished. These pages colour themselves entirely
   from page.css tokens and set no hex of their own, which means the
   whole fix is to hand them the night palette rather than to chase
   selectors across nine different pages.

   Scoped to body.in-room, so a page outside the mansion is untouched. */
:root[data-theme="night"] body.in-room{
  --ground:transparent;
  --pearl:rgba(58,32,44,.72);
  --ivory:rgba(48,26,38,.78);
  --linen:rgba(70,40,54,.7);
  --ink:#F7E8EE;
  --muted:#DCC0CC;
  --taupe:#C6A6B4;
  --rose:#F3B6C9;
  --rose-hi:#F7C8D8;
  --rose-ink:#F0A8BE;
  --gold:#E8C77E;
  --gold-deep:#D2A94F;
  --accent:#CBB8A8;
  --line:rgba(232,199,126,.30);
  --line-soft:rgba(232,199,126,.18);
}
/* panels that were light cards by day become lit glass at night, so they
   still read as panels rather than as holes cut in the room */
:root[data-theme="night"] body.in-room .card,
:root[data-theme="night"] body.in-room .panel,
:root[data-theme="night"] body.in-room .box{
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}

/* ═══════════════════════════════════════════════════════════════════
   THE WORLD, MOVING
   A still photograph of a mansion is a picture of a mansion. What makes
   it read as a place you are standing in is that the light will not hold
   still: the chandelier breathes, blossom comes down, the marble catches
   a sweep of light, the room drifts a fraction as you look at it.

   All of it is compositor-only - transform and opacity, no layout, no
   repaint - so it costs almost nothing, and all of it stops dead for
   anyone who asked for less movement.
   ═══════════════════════════════════════════════════════════════════ */

/* the room itself, breathing very slowly */
@keyframes atm-drift{
  0%   {transform:scale(1.02) translate3d(0,0,0)}
  50%  {transform:scale(1.06) translate3d(-1.2%,-0.8%,0)}
  100% {transform:scale(1.02) translate3d(0,0,0)}
}
.vhero-bed{animation:atm-drift 54s ease-in-out infinite; will-change:transform}

/* the chandelier, and the sconces down the walls */
.vhero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(22% 20% at 50% 0%,  rgba(255,240,205,.55) 0%, transparent 70%),
    radial-gradient(11% 22% at 11% 26%, rgba(255,232,190,.30) 0%, transparent 72%),
    radial-gradient(11% 22% at 89% 26%, rgba(255,232,190,.30) 0%, transparent 72%);
  animation:atm-lamps 7.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes atm-lamps{0%,100%{opacity:.72} 50%{opacity:1}}

/* the polished floor catching the light, once in a while */
.vhero-veil::after{
  content:''; position:absolute; left:-40%; right:-40%; bottom:0; height:34%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,247,230,.16) 46%,
             rgba(255,247,230,.30) 52%, rgba(255,247,230,.16) 58%, transparent 100%);
  transform:translate3d(-45%,0,0);
  animation:atm-sheen 13s ease-in-out infinite;
  mix-blend-mode:screen; pointer-events:none;
}
@keyframes atm-sheen{
  0%,68% {transform:translate3d(-45%,0,0); opacity:0}
  78%    {opacity:.9}
  100%   {transform:translate3d(45%,0,0);  opacity:0}
}

/* blossom, coming down through the lobby */
.atm-petals{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.atm-petal{
  position:absolute; top:-8%; width:12px; height:12px; border-radius:60% 20% 60% 20%;
  background:radial-gradient(circle at 32% 28%, #FFF1F5 0%, #F6C9D8 55%, #E7A6BD 100%);
  opacity:0; filter:blur(.2px);
  animation:atm-fall linear infinite;
  will-change:transform, opacity;
}
@keyframes atm-fall{
  0%   {transform:translate3d(0,-10vh,0) rotate(0deg)   scale(.9); opacity:0}
  8%   {opacity:.85}
  88%  {opacity:.7}
  100% {transform:translate3d(9vw,108vh,0) rotate(420deg) scale(1.05); opacity:0}
}
:root[data-theme="night"] .atm-petal{
  background:radial-gradient(circle at 32% 28%, #FFE7CF 0%, #E7B9C9 55%, #B98098 100%)}

/* the light on her, alive rather than pasted */
.vhero-hostglow{animation:atm-hostlight 9s ease-in-out infinite}
@keyframes atm-hostlight{0%,100%{opacity:.8} 50%{opacity:1}}

/* the doors, lit from within, each on its own clock */
.portal{animation:atm-doorlight 8s ease-in-out infinite}
.portal-slot:nth-child(2n)   .portal{animation-delay:-1.6s}
.portal-slot:nth-child(3n)   .portal{animation-delay:-3.1s}
.portal-slot:nth-child(5n)   .portal{animation-delay:-4.7s}
@keyframes atm-doorlight{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.07)}}
.portal-slot.art-graded .portal{animation:none}

/* the panels below, drifting a hair so the page never feels frozen */
.feature{background-size:106% auto; animation:atm-panel 46s ease-in-out infinite}
@keyframes atm-panel{
  0%,100%{background-position:center 42%}
  50%    {background-position:center 58%}
}

@media (prefers-reduced-motion:reduce){
  .vhero-bed,.vhero::after,.vhero-veil::after,.atm-petal,
  .vhero-hostglow,.portal,.feature{animation:none !important}
  .atm-petals{display:none}
  .vhero-bed{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   THE WELCOME TOUR
   The host's own recorded voice walks a visitor past all seven doors.
   While she speaks, the lobby drifts behind her and each door lights in
   turn as she reaches it, so the intro is something you watch, not just
   something you hear. Audio never starts on its own - a visitor presses
   play, always.
   ═══════════════════════════════════════════════════════════════════ */
/* No fade-in. An animation whose first frame is opacity:0 will hide the
   whole tour on any browser that has not started it yet, and an intro
   that might not appear is worse than one that appears at once. */
.introbox{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(24,10,16,.74); backdrop-filter:blur(9px); padding:clamp(12px,3vw,34px)}

.introstage{position:relative; width:min(1080px,100%); aspect-ratio:16/9;
  border-radius:18px; overflow:hidden; box-shadow:0 34px 90px rgba(40,12,26,.55);
  border:1px solid rgba(232,199,126,.42); background:#2a1420}
.introstage img.plate{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 56%;
  animation:intro-walk 42s ease-in-out forwards}
@keyframes intro-walk{
  0%   {transform:scale(1.00) translate3d(0,0,0)}
  100% {transform:scale(1.22) translate3d(0,3%,0)}
}
.introstage .glow{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(26% 26% at 50% 2%, rgba(255,240,205,.55) 0%, transparent 70%);
  animation:atm-lamps 7.5s ease-in-out infinite}
.introstage .wash{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(30,12,22,.34) 0%, transparent 34%,
             transparent 46%, rgba(30,12,22,.80) 100%)}

.introcaption{position:absolute; left:0; right:0; bottom:0; padding:clamp(14px,2.6vw,30px);
  display:grid; gap:.55rem; text-align:center; color:#FFF3F7}
.introcaption .k{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:#F0C9D7; opacity:.9}
.introcaption .t{font-size:clamp(1.05rem,2.5vw,1.9rem); font-weight:600; line-height:1.2;
  text-shadow:0 2px 18px rgba(30,10,20,.7)}
.introdoors{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.2rem}
.introdoors span{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .62rem; border-radius:999px; color:#EBC9D6;
  border:1px solid rgba(232,199,126,.28); background:rgba(38,16,28,.5);
  transition:color .4s ease, background .4s ease, border-color .4s ease, transform .4s ease}
.introdoors span.lit{color:#2A1220; transform:translateY(-2px);
  background:linear-gradient(180deg,#F6DFA8,#E8C77E); border-color:#F6DFA8}
.introbar{position:absolute; left:0; right:0; top:0; height:3px; background:rgba(255,255,255,.14)}
.introbar i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,#F3B6C9,#E8C77E)}

.introbtns{display:flex; gap:.6rem; justify-content:center; margin-top:.9rem; flex-wrap:wrap}
.introbox .cta-pill{cursor:pointer}

@media (max-width:640px){
  .introstage{aspect-ratio:4/5}
  .introstage img.plate{object-position:center 50%}
  .introdoors span{font-size:.6rem; padding:.26rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  .introbox,.introstage img.plate,.introstage .glow{animation:none}
}

/* ── the tour walks ────────────────────────────────────────────────
   Seven rooms stacked and cross-fading, and her own cut-out stepping
   into each one from alternating sides with a walking bob, so the intro
   reads as being led through the house rather than shown a slideshow.
   Nothing here redraws her: it only moves the photograph.            */
/* opacity is set by the script, frame by frame - see tour.js. A CSS
   transition here would decide what is on screen, and a transition that
   never starts leaves the wrong room showing. */
.introstage img.plate{opacity:0; animation:none}
.introstage img.plate.on{opacity:1; animation:intro-walk 26s ease-out forwards}

/* She stands in the room by default and the step is decoration laid on
   top of that, so if the walk never runs - reduced motion, a browser
   throttling work it cannot see - she is still standing there rather
   than missing from her own tour. */
/* same rule as the hero and the lobby: a width she cannot exceed, so the
   stage never trims the outstretched hand. */
.introstage .hostwrap{position:absolute; left:50%; bottom:0; height:76%;
  width:min(52%,420px);
  transform:translate3d(-50%,0,0); opacity:1}
.introstage .hostwrap img{height:100%; width:100%;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 18px 34px rgba(46,16,30,.5));
  animation:intro-bob 1.25s ease-in-out infinite}
/* the step itself is tweened in tour.js - see stepIn() */
@keyframes intro-bob{
  0%,100%{transform:translateY(0)      rotate(0deg)}
  25%    {transform:translateY(-1.1%)  rotate(.55deg)}
  75%    {transform:translateY(-1.1%)  rotate(-.55deg)}
}
@media (prefers-reduced-motion:reduce){
  .introstage img.plate.on,
  .introstage .hostwrap,
  .introstage .hostwrap img{animation:none}
  .introstage .hostwrap{opacity:1; transform:translate3d(-50%,0,0)}
}

/* the modal's inner column is a grid item, so it shrink-wraps to its
   buttons unless it is told how wide the stage wants to be */
.introbox > *{width:min(1080px,100%)}

/* The tour brings its own buttons, because it opens from pages whose
   house styles do not agree on what a button looks like. */
.introbtn{appearance:none; border:0; cursor:pointer; font:inherit;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.86rem 1.7rem; border-radius:999px; transition:transform .18s ease, box-shadow .18s ease}
.introbtn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,10,20,.4)}
.introbtn:focus-visible{outline:3px solid #E8C77E; outline-offset:3px}
.introbtn-solid{background:linear-gradient(180deg,#D6467F,#B92C67); color:#FFF4F8}
.introbtn-ghost{background:rgba(255,241,246,.90); color:#7A2B4A}