/* Sri — the concierge. Sits above the WhatsApp button and expands.
   Desktop: a panel in the corner. Phone: a sheet that covers the screen,
   because a 420px panel on a 390px phone is a joke. */

/* Position is measured from the real WhatsApp button at runtime — there are
   two of them on this site (.wa-float at 56px, .wa-btn at 52px), only one
   has a mobile rule, and the journey dock moves whichever is present. These
   values are only the fallback for before the first measurement. */
.sri-fab{
  position:fixed; right:var(--sri-right,28px); bottom:var(--sri-bottom,96px); z-index:9998;
  width:58px; height:58px; padding:9px; border:none; border-radius:50%;
  background:#fff; cursor:pointer;
  transition:transform .2s; -webkit-tap-highlight-color:transparent;
}
/* a hairline ring so the disc keeps an edge against dark photography —
   without it the mark's own white background reads as the button */
.sri-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(201,168,108,0.55); pointer-events:none;
}
.sri-fab:hover{ transform:scale(1.08); }
.sri-fab img{ display:block; width:100%; height:100%;
  animation:sriTurn 60s linear infinite; }
.sri-fab .sri-live{
  position:absolute; right:-1px; bottom:-1px; width:12px; height:12px;
  border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px #fff;
  animation:sriPulse 2.4s ease-in-out infinite;
}
@keyframes sriTurn{ to{ transform:rotate(360deg); } }
@keyframes sriPulse{
  0%,100%{ opacity:1;  box-shadow:0 0 0 3px #fff, 0 0 0 3px rgba(74,222,128,.45); }
  50%    { opacity:.6; box-shadow:0 0 0 3px #fff, 0 0 0 8px rgba(74,222,128,0); }
}

.sri-panel{
  /* the story pages put their reader controls at z-index 9999 — the panel
     has to clear everything on the site, not just most of it */
  position:fixed; right:24px; bottom:24px; z-index:10000;
  width:420px; max-width:calc(100vw - 32px); height:min(640px, calc(100dvh - 48px));
  background:var(--cream,#FAF8F4); color:var(--ink,#1A1612);
  border:1px solid rgba(26,22,18,0.12); border-radius:6px;
  box-shadow:0 18px 60px rgba(26,22,18,0.28);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:var(--sans,'Inter',system-ui,sans-serif);
  opacity:0; transform:translateY(10px) scale(.99); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.sri-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }

.sri-head{ display:flex; align-items:center; gap:11px; padding:15px 16px 13px;
  border-bottom:1px solid rgba(26,22,18,0.12); flex:0 0 auto; }
/* The header lotus sits still while you read, and turns while Sri is
   working. One revolution every 2.6s — present enough to read as thinking,
   slow enough to stay elegant. */
.sri-head img{ width:32px; height:32px; display:block; transform-origin:50% 50%; }
.sri-panel.is-busy .sri-head img{ animation:sriTurn 2.6s linear infinite; }
.sri-name{ font-family:var(--serif,'Cormorant Garamond',serif); font-size:25px;
  font-style:italic; color:var(--gold-ink,#856E44); letter-spacing:.015em; line-height:1; }
.sri-sub{ font-size:12px; color:var(--ink-40,rgba(26,22,18,.55)); font-weight:300; margin-top:3px; }
.sri-x{ margin-left:auto; background:none; border:none; cursor:pointer; padding:6px;
  font-size:20px; line-height:1; color:var(--ink-40,rgba(26,22,18,.55)); }

/* the last answer was ending flush against the footer — give the column
   room to finish, and room to breathe at the top */
/* No -webkit-overflow-scrolling:touch. It is deprecated (iOS has had native
   momentum scrolling since 13) and it promotes the scroller to its own
   compositing layer, where WebKit has a long-standing bug: links inside
   render fine and refuse taps. Desktop never sees it. That is the shape of
   this bug exactly. */
.sri-body{ flex:1; overflow-y:auto; padding:24px 18px 34px;
  overscroll-behavior:contain; }
.sri-hello h2{ font-family:var(--serif,'Cormorant Garamond',serif); font-weight:400;
  font-size:28px; line-height:1.2; margin:4px 0 0; }
.sri-hello p{ font-family:var(--serif,'Cormorant Garamond',serif); font-style:italic;
  font-weight:300; font-size:19px; line-height:1.45; color:var(--ink-70,rgba(26,22,18,.75));
  margin:7px 0 0; }
.sri-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 4px; }
.sri-chip{ font:inherit; font-size:12.5px; font-weight:300; padding:8px 14px; border-radius:100px;
  border:1px solid rgba(26,22,18,0.15); background:none; color:inherit; cursor:pointer; text-align:left; }
.sri-chip:hover{ background:rgba(201,168,108,.12); }

.sri-q{ font-family:var(--serif,'Cormorant Garamond',serif); font-size:20px; line-height:1.45;
  margin:44px 0 24px; }
.sri-q:first-child{ margin-top:2px; }
/* Leading is where the elegance lives. Long-form serif-adjacent prose at
   1.72 reads like a chat window; at 1.9 with a wider paragraph gap it
   reads like a page. Costs vertical space, and it is worth it. */
.sri-a{ font-size:14.5px; line-height:1.9; font-weight:300; color:rgba(26,22,18,.88);
  padding-left:17px; border-left:1px solid rgba(201,168,108,.30); }
.sri-a p{ margin:0 0 1.1em; }
.sri-a p:last-child{ margin-bottom:0; }

/* blocks arrive one after another, so an answer reads as written */
@keyframes sriBlk { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.sri-blk{ animation:sriBlk .5s cubic-bezier(.22,.61,.36,1) both; }

/* follow-ups — what to ask next, in the same pill language as the openers */
.sri-next{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 4px; padding-left:17px; }
.sri-nextq{ font:inherit; font-size:12px; font-weight:300; line-height:1.35; text-align:left;
  padding:8px 14px; border-radius:100px; border:1px solid rgba(26,22,18,.15);
  background:transparent; color:var(--ink,#1A1612); cursor:pointer;
  transition:background-color .2s, border-color .2s; }
.sri-nextq:hover{ background:rgba(201,168,108,.12); border-color:var(--gold,#C9A86C); }

/* one standing call to action above the field */
/* two small pills, same language as every other button on the site — they
   sit on one line, so nothing wraps down and breaks the row */
.sri-cta{ display:flex; gap:8px; padding:0 2px 12px;
  border-bottom:1px solid rgba(26,22,18,.08); margin-bottom:12px; }
.sri-cta-a{ flex:1 1 0; min-width:0; text-align:center;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  color:var(--ink,#1A1612); text-decoration:none; border:1px solid var(--gold,#C9A86C);
  border-radius:100px; padding:9px 10px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  transition:background-color .25s ease; }
.sri-cta-a:hover{ background:var(--gold,#C9A86C); }
.sri-cta[hidden]{ display:none; }
/* touch-action + a real tap target: iOS drops taps on links inside a
   momentum-scrolling container, and a 1px-tall inline link is a hard
   thing to hit on glass anyway */
.sri-a a, .sri-cta-a, .sri-hotel-top a{ touch-action:manipulation; }
.sri-a a{ color:var(--gold-ink,#856E44); text-decoration:none;
  border-bottom:1px solid rgba(201,168,108,.5);
  padding:2px 0; -webkit-tap-highlight-color:rgba(201,168,108,.18); }
.sri-a strong{ font-weight:500; color:var(--ink,#1A1612); }
.sri-a h3{ font-family:var(--serif,'Cormorant Garamond',serif); font-size:20px; font-weight:500;
  margin:1.7em 0 .6em; padding-bottom:7px; border-bottom:1px solid rgba(26,22,18,.12); }
.sri-a h3:first-child{ margin-top:0; }
.sri-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 .85em; }
.sri-tag{ font-size:11px; letter-spacing:.03em; line-height:1; padding:6px 11px 7px; border-radius:100px;
  white-space:nowrap; border:1px solid rgba(26,22,18,.15); background:rgba(201,168,108,.10);
  color:var(--gold-ink,#856E44); }
.sri-tag.is-warn{ border-color:rgba(176,100,47,.4); background:rgba(176,100,47,.07); color:var(--warn,#B0642F); }
.sri-lab{ display:flex; gap:14px; align-items:baseline; margin:0 0 .6em; }
.sri-lab b{ flex:0 0 92px; font-size:11px; letter-spacing:.06em; color:var(--gold-ink,#856E44);
  font-weight:400; }
/* Bullets: a real marker rather than a stray dot, aligned to the first
   line and given enough room that wrapped lines hang cleanly. */
.sri-li{ display:flex; gap:12px; margin:0 0 .7em; align-items:flex-start; }
.sri-li i{ flex:0 0 auto; width:4px; height:4px; border-radius:50%; margin-top:.62em;
  background:var(--gold,#C9A86C); font-style:normal; }
.sri-li span{ flex:1; min-width:0; }
.sri-li strong{ font-weight:500; }
/* Hotel entries: no underline on the name — the serif carries it, and an
   underline stretched to the flex width stops dead before the price and
   reads as a broken rule. Hierarchy does the work: the name is larger,
   the note smaller and paler, one hairline between rows and none after
   the last. The note is capped near 46 characters because a line running
   the full panel width is most of why a list like this is hard to read. */
/* The price sits in its own reserved column on the right. This used to be
   a grid with display:contents on the row header — which renders correctly
   everywhere but has hit-testing bugs in WebKit, so on iPhone the hotel
   name simply would not take a tap. Plain positioning has no such problem. */
.sri-hotel{ position:relative; padding:13px 78px 14px 0;
  border-bottom:1px solid rgba(26,22,18,.10); }
.sri-hotel:last-child{ border-bottom:none; }
.sri-hotel-top{ display:block; }
.sri-hotel-top a{ display:inline-block; padding:3px 0;
  font-family:var(--serif,'Cormorant Garamond',serif); font-size:17px;
  line-height:1.2; color:var(--ink,#1A1612); text-decoration:none; border-bottom:none;
  touch-action:manipulation; -webkit-tap-highlight-color:rgba(201,168,108,.18);
  transition:color .18s; }
.sri-hotel-top a:hover{ color:var(--gold-ink,#856E44); }
/* price untouched — same size and colour as before. Nothing runs beneath it. */
.sri-price{ position:absolute; right:0; top:16px;
  font-size:11.5px; letter-spacing:.04em; color:var(--gold-ink,#856E44);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.sri-hotel-note{ font-size:12.5px; line-height:1.75; font-weight:300;
  color:rgba(26,22,18,.62); margin-top:5px; }
/* the line of judgement after a list needs air, not a squeeze */
.sri-hotel + p, .sri-a h3 + p{ margin-top:1.3em; }

.sri-wait{ padding-left:15px; border-left:1px solid rgba(201,168,108,.45); }
.sri-wait span{ font-size:13px; color:var(--ink-40,rgba(26,22,18,.55)); font-style:italic; }
.sri-secs{ font-size:11.5px; margin-left:9px; font-variant-numeric:tabular-nums; }
.sri-err{ font-size:13px; color:var(--warn,#B0642F); margin-top:12px; }

.sri-foot{ flex:0 0 auto; border-top:1px solid rgba(26,22,18,.12); padding:11px 16px 13px;
  background:var(--cream,#FAF8F4); }
/* One pill, button inside, same radius as the nav CTA. The site draws a
   gold outline on every focused input; giving the field a shape means the
   ring follows it instead of boxing it. */
.sri-row{ display:flex; align-items:center; gap:8px; background:var(--white,#fff);
  border:1px solid rgba(26,22,18,.15); border-radius:var(--r-pill,100px);
  padding:5px 6px 5px 18px; transition:border-color .18s; }
.sri-row:focus-within{ border-color:var(--gold,#C9A86C); }
/* 16px, not 14 — below it iOS zooms the viewport on focus and the reader
   has to pinch back out. Same reason tokens.css sets it site-wide. */
.sri-in{ flex:1; font:inherit; font-size:16px; font-weight:300; padding:8px 0; border:none;
  outline:none; background:none; color:inherit; min-width:0; }
.sri-in:focus-visible{ outline:none; }
/* Ask out loud. Only shown where the browser actually supports it. */
.sri-mic{ flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center;
  border:none; background:transparent; color:var(--gold-ink,#856E44); cursor:pointer;
  border-radius:50%; touch-action:manipulation; transition:background-color .2s, color .2s; }
.sri-mic:hover{ background:rgba(201,168,108,.14); }
.sri-mic[hidden]{ display:none; }
.sri-panel.is-listening .sri-mic{ color:#fff; background:#2f7d4f;
  animation:sriListen 1.4s ease-in-out infinite; }
@keyframes sriListen{
  0%,100%{ box-shadow:0 0 0 0 rgba(47,125,79,.45); }
  50%    { box-shadow:0 0 0 7px rgba(47,125,79,0); }
}
.sri-panel.is-listening .sri-in::placeholder{ color:#2f7d4f; }

.sri-send{ font:inherit; font-size:12.5px; letter-spacing:.04em; padding:10px 20px; border:none;
  border-radius:var(--r-pill,100px); background:var(--gold,#C9A86C); color:var(--ink,#1A1612);
  cursor:pointer; flex:0 0 auto; }
.sri-send[disabled]{ background:rgba(26,22,18,.12); color:rgba(26,22,18,.45); cursor:default; }
/* Tips wrap to two lines instead of running off the edge, and the row
   keeps a fixed height so the footer never resizes when a short tip is
   replaced by a long one — a footer that jumps under your thumb is how
   you lose a tap. */
.sri-tip{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; min-height:36px; }
.sri-tip i{ width:5px; height:5px; border-radius:50%; background:var(--gold,#C9A86C);
  opacity:.85; flex:0 0 5px; margin-top:6px; }
/* two lines, split at the tip's own sentence break (see tipHtml). balance
   keeps whichever clause still wraps from leaving a single orphan word. */
.sri-tip span{ flex:1; min-width:0; font-size:11.5px; line-height:1.5; font-style:italic;
  font-weight:300; color:var(--ink-70,rgba(26,22,18,.75)); transition:opacity .34s ease;
  text-wrap:balance; overflow-wrap:break-word; }
.sri-tip.is-fading span{ opacity:0; }
.sri-tip.is-fading i{ opacity:.3; }
.sri-tip i{ transition:opacity .34s ease; }

@media (max-width:760px){
  .sri-fab{ right:var(--sri-right,18px);
            bottom:var(--sri-bottom, calc(84px + env(safe-area-inset-bottom,0px)));
            width:54px; height:54px; padding:8px; }
  .sri-panel{ right:0; left:0; bottom:0; width:100%; max-width:none;
    height:100dvh; border-radius:0; border:none; }
  .sri-body{ padding:20px 18px 30px; }
  .sri-next{ padding-left:16px; }
  .sri-cta{ gap:7px; }
  .sri-cta-a{ font-size:9.5px; letter-spacing:.07em; padding:9px 8px; }
  .sri-foot{ padding-bottom:calc(13px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion:reduce){
  .sri-fab img, .sri-fab .sri-live, .sri-panel.is-busy .sri-head img,
  .sri-blk, .sri-panel.is-listening .sri-mic{ animation:none !important; }
  .sri-tip span, .sri-tip i{ transition:none; }
  .sri-panel{ transition:none; }
}

/* ── the answer being written ──────────────────────────────────────
   Each word of an answer is revealed on a clock rather than the whole
   block appearing at once. The lift is tiny and the fade short: at
   reading speed it reads as writing, not as a row of animations. */
.sri-w{ opacity:0; }
.sri-w.on{ opacity:1; animation:sriWord .18s ease-out both; }
@keyframes sriWord{ from{ opacity:0; transform:translateY(2px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .sri-w{ opacity:1; }
  .sri-w.on{ animation:none; }
}