/* Photographic compositions, an expanded hotel directory and an integrated footer.
   Uses the existing Pure Prestige palette and typography. */
.intro{grid-template-columns:1.05fr .95fr;column-gap:8vw;row-gap:30px}
.intro .intro-composition{grid-column:1;grid-row:1/3;position:relative;max-width:none;width:100%;padding:0 10% 17% 0;align-self:center}
.intro .intro-photo{width:100%;margin:0;overflow:hidden}
.intro .intro-photo img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:4/5;object-fit:cover}
.intro .intro-detail{position:absolute;right:0;bottom:0;width:53%;margin:0;display:block;border:9px solid var(--white);transform:rotate(-4deg);transform-origin:50% 80%}
.intro .intro-detail img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.intro h2{padding-top:30px;align-self:end}
.intro .intro-copy{grid-column:2;grid-row:2;max-width:47ch;align-self:start}
.photo-frame{position:relative;display:block;overflow:hidden;border-radius:0;isolation:isolate}
.photo-frame::after{content:"";position:absolute;inset:-20% -70%;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 43%,rgb(255 255 255 / .24) 50%,transparent 57%);transform:translateX(-65%);opacity:0}
.photo-frame>img{display:block;transform:scale(1);transition:transform 650ms var(--ease-out)}
.photo-composition .photo-inset{transition:transform 650ms var(--ease-out)}
.photo-composition.is-depth-active .photo-inset{transition:none}
.collection-visual{margin:0 0 74px;overflow:visible}
.collection-composition{position:relative;padding:0 13% 7% 0}
.collection-main{margin:0}
.collection-visual .collection-main>img{height:auto;aspect-ratio:1.9;object-fit:cover;object-position:50% 58%}
.collection-inset{position:absolute;right:0;bottom:0;width:27%;margin:0;border:10px solid var(--surface);transform:rotate(3deg);transform-origin:50% 80%}
.collection-visual .collection-inset>img{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:65% 50%}
.collection-visual figcaption{padding-top:20px;max-width:70%;line-height:1.7}
.journey-photo,.moment-image,.photo-action,.button,.round-button,.moment-open{border-radius:0}
/* Gentle light passage reflects the reference without changing image colours. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .photo-frame:hover>img{transform:scale(1.035)}
 .photo-frame::after{transition:transform 750ms var(--ease-out),opacity 220ms ease}
 .photo-frame:hover::after{transform:translateX(65%);opacity:1}
 .intro-composition:hover .intro-detail{transform:translateY(-5px) rotate(-1deg)}
 .collection-composition:hover .collection-inset{transform:translateY(-5px) rotate(1deg)}
 .journey-photo:hover .photo-action .arrow{transform:translateX(4px)}
}
.photo-action .arrow{transition:transform 220ms var(--ease-out)}
@media(prefers-reduced-motion:reduce){
 .photo-frame>img,.photo-frame:hover>img{transform:none;transition:none}
 .photo-frame::after{display:none}
 .photo-composition .photo-inset{transition:none}
}
/* All hotel entries are readable without JavaScript. Controls progressively enhance it. */
.hotel-directory-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
.hotel-list-title{margin:0;max-width:24ch;font-size:clamp(28px,3vw,42px);line-height:1.15}
.hotel-directory-intro{font-size:15px;line-height:1.75;max-width:48ch;color:var(--muted);margin:0}
.hotel-directory-tools{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:22px}
.hotel-search-label{display:block;max-width:460px;font-size:13px;color:var(--muted)}
.hotel-search-field{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--control-border);margin-top:8px;min-height:52px}
.hotel-search-field>svg{width:19px;height:19px;flex:none;color:var(--ink)}
.hotel-search-field input{width:100%;min-width:0;border:0;border-radius:0;background:transparent;padding:12px 0;font:inherit;font-size:16px;color:var(--ink)}
.hotel-search-field:focus-within{outline:2px solid var(--ink);outline-offset:5px}
.hotel-search-field input:focus-visible{outline:0}
.hotel-search-clear{width:44px;height:44px;flex:none;font-size:24px;background:transparent;border:0;color:var(--ink);border-radius:0}
.hotel-results-count{font-size:13px;color:var(--muted);margin:0 0 12px;min-height:1.7em;text-align:right}
.hotel-filters{gap:8px 25px;margin-bottom:8px}
.hotel-filters button{white-space:nowrap}
.hotel-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6vw}
.hotel-cards .hotel{display:block;min-width:0;padding:28px 0;border-bottom:1px solid var(--line)}
.hotel-cards .hotel>div{display:block}
.hotel-cards .location{font-size:12px;margin:0 0 12px;color:var(--muted)}
.hotel-cards h3{font-size:clamp(22px,2vw,29px);line-height:1.25;margin:0;max-width:30ch}
.hotel-cards h3 a{display:flex;justify-content:space-between;gap:24px;align-items:start}
.hotel-cards h3 .arrow{flex:none;width:19px;margin-top:6px}
.hotel-cards p:not(.location){font-size:14px;line-height:1.75;max-width:49ch;margin:12px 0 0;color:var(--muted)}
.hotel-directory-bottom{display:flex;justify-content:center;padding-top:34px}
.hotel-more{border:1px solid var(--ink);background:transparent;color:var(--ink);min-width:260px}
.hotel-empty{padding:48px 0;border-bottom:1px solid var(--line)}
.hotel-empty p{font-size:20px;margin:0 0 20px}
.hotel-empty button{font-size:14px;text-decoration:underline;text-underline-offset:5px;min-height:44px}
.hotel-list>.fine-print{max-width:100ch;font-size:12px;margin-top:30px}
.hotel-list>.fine-print a{text-decoration:underline;text-underline-offset:3px}
/* The original logo now belongs to the main footer directory. */
.footer-directory{padding-block:60px 42px;grid-template-columns:1.2fr .8fr 1fr .7fr;align-items:start}
.footer-identity .brand{width:270px;max-width:100%;margin:0 0 22px}
.footer-identity p{font-size:14px;max-width:30ch}
.footer-column,.footer-contact{padding-top:14px}
.footer-tids{margin-top:20px}
.footer-utility{padding-bottom:30px}
@media(max-width:1199px){
 .intro{column-gap:6vw}
 .footer-directory{grid-template-columns:1fr 1fr;gap:36px 8vw}
 .footer-identity .brand{width:260px}
}
@media(max-width:850px){
 .intro{grid-template-columns:1fr 1fr;gap:26px 6vw}
 .intro h2{font-size:38px;padding-top:0}
 .intro .intro-composition{align-self:start;margin-top:10px}
 .intro .intro-photo img{aspect-ratio:3/5}
 .intro .intro-detail{width:65%;border-width:7px}
 .collection-inset{width:29%;border-width:7px}
 .hotel-directory-heading{display:block}
 .hotel-directory-intro{margin-top:20px}
 .hotel-cards{column-gap:32px}
}
@media(max-width:700px){
 .intro{grid-template-columns:1fr;gap:32px}
 .intro h2{grid-column:1;grid-row:1;font-size:var(--heading)}
 .intro .intro-composition{grid-column:1;grid-row:2;padding:0 10% 16% 0;margin:0}
 .intro .intro-photo img{aspect-ratio:4/5}
 .intro .intro-detail{width:53%}
 .intro .intro-copy{grid-column:1;grid-row:3;max-width:none}
 .collection-visual{margin-bottom:48px}
 .collection-composition{padding:0 10% 20% 0}
 .collection-visual .collection-main>img{aspect-ratio:4/5;object-position:47% 50%}
 .collection-inset{width:46%;border-width:7px}
 .collection-visual .collection-inset>img{aspect-ratio:1}
 .collection-visual figcaption{max-width:90%;font-size:12px}
 .hotel-directory-heading{margin-bottom:26px}
 .hotel-directory-tools{grid-template-columns:1fr;gap:16px}
 .hotel-search-label{max-width:none}
 .hotel-results-count{text-align:left;margin:0}
 .hotel-filters{gap:4px 20px}
 .hotel-cards{grid-template-columns:1fr}
 .hotel-cards .hotel{padding:25px 0}
 .hotel-cards h3{font-size:25px;max-width:none;margin:0}
 .hotel-more{width:100%;min-width:0}
 .footer-directory{padding-block:42px 32px;gap:28px 24px}
 .footer-identity .brand{width:250px;margin-bottom:20px}
 .footer-column{padding-top:10px}
 .footer-contact{padding-top:24px}
}
