/* Spectra: showcase block for the sister sites (O'Vanta dining on Visit, Spectra Immersive Services on About and
   Franchise). A big light line with a softer second half, one sentence, one outbound link (new tab). Behind the text a
   white beam splits into the six spectrum colours (the About prism idea) over a faint glow; the link's underline draws in the spectrum on hover. */
.xs{position:relative;isolation:isolate;overflow:hidden;max-width:var(--wrap);margin:0 auto;
  padding:var(--sec-y) calc(var(--gut) + var(--sar)) var(--sec-y) calc(var(--gut) + var(--sal));border-top:1px solid var(--line)}
.xs-fan{position:absolute;z-index:-1;pointer-events:none;right:calc(var(--gut) + var(--sar));top:50%;width:min(46%,560px);aspect-ratio:640/420;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 420' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 210 H300' stroke='url(%23b)' stroke-width='1.6'/%3E%3Cpath d='M300 210 L640 40' stroke='%23fb1a08' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M300 210 L640 108' stroke='%23fe9a04' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M300 210 L640 176' stroke='%23fce3a3' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M300 210 L640 244' stroke='%23cf99d3' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M300 210 L640 312' stroke='%239c92f2' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M300 210 L640 380' stroke='%233045e0' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='300' cy='210' r='3' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.55;transition:opacity .5s var(--ease)}
@media (hover:hover){.xs:hover .xs-fan{opacity:.85}}
@media (max-width:820px){.xs-fan{top:auto;bottom:18px;transform:none;width:70%;opacity:.3}}
.xs::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:0;top:0;width:min(640px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(252,227,163,.10),rgba(48,69,224,.10) 50%,rgba(0,0,0,0));filter:blur(24px)}   /* council 2026-11-08: was a lavender glow */
.xs-h{margin:0;max-width:20ch;font-family:var(--sans);font-weight:300;font-size:var(--fs-2);line-height:1.06;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.xs-h span{color:var(--soft)}
.xs-p{margin:clamp(16px,2.8vh,24px) 0 0;max-width:46ch;color:var(--soft);font-size:clamp(17px,1.5vw,19px);line-height:1.5}
.xs-go{position:relative;display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(18px,3vh,28px);
  font-size:clamp(18px,1.6vw,21px);color:var(--ink);text-decoration:none}
.xs-go::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:rgba(252,252,252,.4)}
.xs-go::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--spectrum);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.xs-go>span[aria-hidden]{font-size:.7em;margin-left:.35em}
.xs-go:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.xs-go:focus-visible::after{transform:scaleX(1)}@media (hover:hover){.xs-go:hover::after{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.xs-go::after{transition:none}}
@media (min-width:821px){.xs-h,.xs-p{max-width:min(54%,620px)}}
/* photo variant (O'Vanta on Visit): text left, two of the restaurant's own photos right, the small one overlapping */
.xs-media{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vh,56px);align-items:center}
.xs-media .xs-h,.xs-media .xs-p{max-width:22ch}
.xs-media .xs-p{max-width:40ch}
.xs-pics{position:relative;display:block;aspect-ratio:1/1;width:min(100%,560px);justify-self:end}
.xs-pic{position:absolute;display:block;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,.6);transition:transform .9s var(--ease)}
.xs-pic-a{right:0;top:0;width:82%;height:82%}
.xs-pic-b{left:0;bottom:0;width:38%;height:52%;outline:1px solid rgba(252,252,252,.12)}
@media (hover:hover){.xs-media:hover .xs-pic-a{transform:translate3d(6px,-6px,0) scale(1.02)}.xs-media:hover .xs-pic-b{transform:translate3d(-6px,6px,0)}}
@media (min-width:900px){.xs-media{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}.xs-media .xs-h,.xs-media .xs-p{max-width:none}}
@media (prefers-reduced-motion:reduce){.xs-pic{transition:none}}