/* Home page only */

/* Hero: the cobalt arcade wall over the courtyard film */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--cobalt);color:var(--on-dark);isolation:isolate}
.hero-media,.hero-frame{position:absolute;inset:0;will-change:transform}
.hero-media{inset:-8% 0 -8%;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,25,103,.5) 0%,rgba(4,25,103,0) 22%),linear-gradient(0deg,rgba(3,17,72,.93) 0%,rgba(3,17,72,.6) 36%,rgba(3,17,72,0) 64%)}
.hero-frame{z-index:2;pointer-events:none;transform-origin:50% 62%}
.hero-frame .inner{position:absolute;inset:0;transform-origin:50% 62%}
.hero-frame svg{position:absolute;inset:0;width:100%;height:100%}
.frame-sm{display:none}
@media (max-aspect-ratio:4/5){.frame-lg{display:none}.frame-sm{display:block}}
.wall{fill:url(#wallgrad)}
.rim{fill:none;stroke:var(--cream);stroke-opacity:.42;stroke-width:2;vector-effect:non-scaling-stroke}
.hero-copy{position:absolute;z-index:3;left:0;right:0;margin-inline:auto;bottom:clamp(28px,7vh,72px);width:min(620px,40vw);text-align:center;transform-origin:50% 80%}
.hero-copy .inner>*{margin-inline:auto}
.hero-logo{width:min(260px,58%);color:var(--cream);margin-bottom:1.2rem}
.hero-logo svg{width:100%;height:auto}
.hero h1{font-size:clamp(2.2rem,4vw,3.8rem);max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-sub{margin-top:1rem;max-width:42ch;font-size:clamp(1rem,1.25vw,1.125rem);color:#ebe4d2;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:1.4rem}
.hero-rating{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:.6rem;font-size:.9rem;color:#ddd5c4;text-decoration:none}
.stars{display:inline-flex;gap:2px;color:#f2c14e}
.stars svg{width:14px;height:14px}
.vid-toggle{position:absolute;z-index:4;right:var(--gutter);bottom:clamp(20px,4vh,36px);width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(246,238,219,.55);background:rgba(4,25,103,.35);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background-color .2s var(--ease)}
@media (hover:hover){.vid-toggle:hover{background:rgba(4,25,103,.75)}}
.vid-toggle svg{width:16px;height:16px}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed="true"] .i-play{display:block}
.vid-toggle[aria-pressed="true"] .i-pause{display:none}
.hero-welcome{position:absolute;z-index:3;left:0;right:0;bottom:clamp(40px,12vh,120px);text-align:center;color:var(--cream);opacity:0;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero-welcome::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,120vw);height:260%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(3,17,72,.8),rgba(3,17,72,0))}
.hero-welcome .ar{display:block;font-size:clamp(3.2rem,9vw,7rem);line-height:1.15}
.hero-welcome .en{display:block;font-size:clamp(1rem,1.4vw,1.2rem);margin-top:.2rem}
@media (max-aspect-ratio:4/5){.hero-copy{width:min(84vw,420px);bottom:max(28px,env(safe-area-inset-bottom))}.hero h1{font-size:clamp(2rem,9vw,2.8rem)}.vid-toggle{top:88px;bottom:auto}}
@media (min-aspect-ratio:4/5) and (max-width:900px){.hero-copy{width:min(560px,64vw)}}

/* Statement: Loris in its own words, lit word by word */
.statement{padding-block:clamp(110px,14vw,190px) clamp(80px,10vw,140px)}
.statement-text{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.12;max-width:22ch;margin:0;color:var(--cobalt)}
.statement-text .wd{opacity:.18}
.statement-src{margin-top:1.6rem;color:var(--ink-soft)}
.facts-row{display:grid;gap:18px;margin-top:clamp(48px,6vw,80px);grid-template-columns:1fr}
@media (min-width:760px){.facts-row{grid-template-columns:repeat(3,1fr)}}
.fact{border-top:1.5px solid var(--cobalt);padding-top:1rem}
.fact b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--cobalt);line-height:1.1}
.fact span{color:var(--ink-soft);font-size:.95rem}

/* Signature dishes: a sideways track pinned on wide screens */
.signatures{overflow:clip}
.sig-head{display:grid;gap:20px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
@media (min-width:900px){.sig-head{grid-template-columns:1.2fr 1fr}}
.sig-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gutter);width:max-content;will-change:transform}
.sig-card{flex:none;width:clamp(240px,24vw,340px);margin:0}
.sig-card .pic{aspect-ratio:4/5.2}
.sig-card figcaption{padding-top:1rem;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline}
.sig-card h3{font-size:clamp(1.3rem,1.8vw,1.55rem)}
.sig-card .price{font-weight:600;color:var(--sky)}
.sig-card p{grid-column:1/-1;margin:0;color:var(--on-dark-soft);font-size:.95rem}
.sig-more{display:flex;align-items:center;flex:none;width:clamp(220px,20vw,280px);padding-left:12px}
.sig-scroller{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.sig-scroller::-webkit-scrollbar{display:none}.sig-card{scroll-snap-align:start}
.signatures.is-pinned{padding-block:0}
.signatures.is-pinned .sig-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.signatures.is-pinned .sig-scroller{overflow:visible;scroll-snap-type:none}

/* Breakfast */
.bf-grid{display:grid;gap:clamp(40px,6vw,88px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.bf-grid{grid-template-columns:1fr 1fr}}
.bf-pics{position:relative;aspect-ratio:1/1.05;max-width:600px;width:100%;margin-inline:auto}
.bf-pics .pic{position:absolute;box-shadow:0 30px 60px -30px rgba(4,25,103,.45)}
.bf-pics .p1{inset:0 22% 18% 0}
.bf-pics .p2{inset:38% 0 0 46%}
.bf-price{display:flex;align-items:baseline;gap:.6rem;margin:1.6rem 0}
.bf-price b{font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,6vw,5rem);line-height:1;color:var(--clay)}
.bf-list{columns:2;column-gap:24px;margin:0 0 1.6rem;padding:0;list-style:none;font-size:.98rem}
.bf-list li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid rgba(13,22,64,.14)}
.bf-note{font-size:.85rem}

/* Two houses */
.houses-head{max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.houses-grid{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr}
@media (min-width:860px){.houses-grid{grid-template-columns:1fr 1fr}}
.house{position:relative;display:block;text-decoration:none;color:inherit}
.house .pic{aspect-ratio:4/4.8}
.house-body{padding-top:1.2rem}
.house h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.house h3 .ar{font-size:.7em;color:var(--clay);margin-left:.3em}
.house p{margin:.4rem 0 0;color:var(--ink-soft);max-width:44ch}
.house .go{display:inline-flex;margin-top:1rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px}
@media (hover:hover){.house:hover .go{text-decoration-thickness:2px}}

/* Around the table: photos float at different depths around a line of Loris's own copy */
.table-sec{position:relative;overflow:hidden;min-height:110vh;display:grid;place-items:center;text-align:center}
.table-copy{position:relative;z-index:2;max-width:760px;padding:0 var(--gutter)}
.table-copy h2{font-size:clamp(2.6rem,6vw,5.4rem)}
.table-copy p{margin:1.4rem auto 0;max-width:46ch}
.floaters{position:absolute;inset:0;z-index:1;pointer-events:none}
.floater{position:absolute;width:clamp(120px,15vw,230px);will-change:transform}
.floater .pic{aspect-ratio:4/5;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.f1{left:4%;top:8%}.f2{right:6%;top:6%;width:clamp(140px,17vw,260px)}.f3{left:10%;bottom:6%;width:clamp(110px,12vw,190px)}.f4{right:12%;bottom:4%}.f5{left:36%;top:-2%;width:clamp(90px,9vw,150px)}.f6{right:34%;bottom:-4%;width:clamp(90px,10vw,160px)}
@media (max-width:760px){.f5,.f6{display:none}.floater{width:28vw}.f2{width:30vw}.table-sec{min-height:100vh}}
.table-copy .on-floaters{display:inline-block;background:var(--cobalt);padding:.1em .3em}

/* Reviews */
.reviews-top{display:grid;gap:28px;grid-template-columns:1fr;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
@media (min-width:900px){.reviews-top{grid-template-columns:auto 1fr;gap:64px}}
.score{display:flex;align-items:flex-end;gap:20px}
.score-num{font-family:var(--font-display);font-size:clamp(6rem,14vw,11rem);line-height:.8;color:var(--cobalt)}
.score-meta{padding-bottom:.6rem}
.score-meta .stars{color:var(--clay)}
.score-meta .stars svg{width:20px;height:20px}
.score-meta p{margin:.5rem 0 0;font-size:.95rem}
.quotes{display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:1fr}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{margin:0;padding:clamp(24px,2.6vw,36px);background:var(--paper);border-radius:var(--r);display:flex;flex-direction:column;gap:1.4rem;border:1px solid rgba(4,25,103,.16)}
.quote blockquote{margin:0;font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.55;color:var(--ink)}
.quote blockquote::before{content:"";display:block;width:28px;height:22px;margin-bottom:1rem;background:var(--cobalt);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M0 22V12C0 5 4 1 11 0l1 3c-4 1-6 4-6 8h6v11zm16 0V12c0-7 4-11 11-12l1 3c-4 1-6 4-6 8h6v11z'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M0 22V12C0 5 4 1 11 0l1 3c-4 1-6 4-6 8h6v11zm16 0V12c0-7 4-11 11-12l1 3c-4 1-6 4-6 8h6v11z'/%3E%3C/svg%3E") 0 0/100% 100%}
.quote figcaption{margin-top:auto;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.92rem;color:var(--ink-soft)}
.quote figcaption b{font-weight:600;color:var(--cobalt)}
.reviews-link{margin-top:clamp(28px,4vw,44px)}

/* Photo bands: two rows that slide in opposite directions, faster when you scroll faster */
.bands{overflow:hidden;padding-block:clamp(80px,10vw,130px)}
.bands-head{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.band{display:flex;gap:16px;width:max-content;will-change:transform}
.band+.band{margin-top:16px}
.band .pic{flex:none;height:clamp(160px,20vw,260px);border-radius:var(--r)}
.band .pic img{width:auto;height:100%}

/* Visit, short version */
.visit-grid{display:grid;gap:clamp(40px,6vw,88px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.visit-grid{grid-template-columns:1fr 1fr}}
.visit h2{margin-bottom:1.4rem;max-width:12ch}
.status{position:relative;display:inline-flex;align-items:center;gap:.55em;font-weight:550;font-size:.95rem;padding:.4em .85em;border-radius:99px;background:rgba(4,25,103,.08);margin-bottom:1.4rem}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:#2f7d4f;box-shadow:0 0 0 3px rgba(47,125,79,.18)}
.status::after{content:"";position:absolute;left:.85em;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#2f7d4f;animation:ping 2.4s var(--ease-out) infinite}
.status.is-closed::before{background:var(--clay)}
.status.is-closed::after{display:none}
.status:empty{display:none}
@keyframes ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3);opacity:0}}
.info{display:grid;margin:0}
.info>div{display:grid;grid-template-columns:7.5rem 1fr;gap:16px;padding:1rem 0;border-top:1px solid rgba(13,22,64,.16)}
.info dt{font-weight:600}
.info dd{margin:0}
.info a{font-weight:500}
@media (max-width:420px){.info>div{grid-template-columns:1fr;gap:4px}}
.visit-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.map{position:relative;overflow:hidden;aspect-ratio:4/4.6;width:100%;max-width:560px;margin-inline:auto;background:var(--cream-2)}
.map iframe{position:absolute;left:0;top:-150px;width:100%;height:calc(100% + 150px);border:0;filter:saturate(.8) hue-rotate(-8deg)}

@media (prefers-reduced-motion:reduce){
  .hero-welcome{display:none}
  .status::after{animation:none}
  .statement-text .wd{opacity:1}
}

/* Real Loris clips in the side arches; motion.js fits them to the openings */
.side-vid{position:absolute;left:5.6%;top:37%;width:19.4%;height:63%;object-fit:cover;background:var(--cobalt-3)}
.sv-r{left:75%}
@media (max-aspect-ratio:4/5){.side-vid{display:none}}

/* Sayings teaser */
.say-teaser{padding-block:clamp(64px,8vw,110px)}
.say-teaser-in{display:grid;gap:clamp(20px,4vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.say-teaser-in{grid-template-columns:auto 1fr}}
.say-teaser .say-ar{font-family:var(--font-ar);font-size:clamp(4rem,10vw,8.5rem);line-height:1.2;color:var(--cobalt);margin:0}
.say-teaser h2{font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:20ch;margin-bottom:1.4rem}

/* Wide screens: the centre clip lives in the centre arch (motion.js sizes it) */
.hero.arch-film .hero-media{inset:0}
.hero.arch-film .hero-media video{transform-origin:50% 50%;will-change:transform}
.say-teaser .say-ar{text-align:left}