/* ===========================================================================
   Vila Hedona · design system
   One system sans-serif, a 1200px content grid, a fixed spacing scale.
   Royal blue marks the booking action, the current page and a few details.
   =========================================================================== */
:root{
  --blue:#2447D8; --blue-ink:#1B36B0; --blue-tint:#E8EDFF; --on-blue:#D4DCFF;
  --ink:#17191D; --mute:#5A606A; --line:#DDE1E6; --grey:#F2F4F7; --white:#fff;
  --on-ink:#A9B0BC;
  --font:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* layout */
  --max:1200px;
  --m:clamp(20px,4vw,40px);                                   /* minimum side margin */
  --px:max(var(--m),calc((100% - var(--max)) / 2));           /* side padding of every section */
  --g:24px;                                                   /* grid gap */
  --head:64px;

  /* spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --sec:clamp(48px,6vw,72px);                                 /* between sections */

  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
picture{display:contents}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
figure{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.band :focus-visible,.foot :focus-visible,.viewer :focus-visible{outline-color:var(--white)}
main:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:10px 14px;text-decoration:none}
.skip:focus{top:8px}
.num{font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;line-height:1.15;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
.h2{font-size:clamp(1.6rem,2.6vw,2.25rem)}
.h3{font-size:1.25rem;font-weight:600;line-height:1.3;letter-spacing:0}
.eyebrow{font-size:.85rem;font-weight:600;color:var(--blue);line-height:1.3;letter-spacing:0}
p{max-width:40em}
p+p{margin-top:var(--s2)}
figcaption{font-size:.85rem;color:var(--mute);padding-top:var(--s1);line-height:1.4}

/* ---------- actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65em 1.2em;background:var(--blue);color:var(--white);border:1px solid var(--blue);border-radius:2px;font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn--sm{min-height:38px;padding:.45em .9em;font-size:.9rem}
.btn--lg{min-height:50px;padding:.8em 1.5em;font-size:1rem}
.btn--block{width:100%}
.btn--light{background:var(--white);color:var(--blue);border-color:var(--white)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.3em}
.link--arrow::after{content:" →";color:var(--blue)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
  .btn--light:hover{background:var(--blue-tint);border-color:var(--blue-tint);color:var(--blue-ink)}
  .btn--ghost:hover{background:var(--ink);color:var(--white)}
  .link:hover{color:var(--blue)}
}

/* ---------- section shell: same width and grid everywhere ---------- */
.top,.hero,.intro,.teaser,.preview,.regionteaser,.reviews,.band,.faqteaser,.pagehead,.house,.rooms,.amen,.rules,
.gnav,.gset,.regintro,.seasons,.places,.bk,.arrival,.faqpage,.legal,.foot{padding-left:var(--px);padding-right:var(--px)}
.hero,.intro,.teaser,.reviews,.band,.faqteaser,.house,.amen,.rules,.gset,.split,.places__head,.bk,.arrival,.faqpage,.foot,.room{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--s4);height:var(--head);background:var(--white);border-bottom:1px solid var(--line)}
.top__mark{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;margin-right:auto}
.top__nav{display:flex;gap:var(--s4)}
.top__nav a{font-size:.95rem;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.top__nav a[aria-current="page"]{border-bottom-color:var(--blue);color:var(--blue)}
.top__menu{display:none;font-weight:600;min-height:44px;padding:0 4px}
/* language switcher: disclosure button + list */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:2px;font-size:.88rem;font-weight:600;letter-spacing:.02em}
.lang__btn svg{transition:transform .15s}
.lang.is-open .lang__btn{border-color:var(--ink)}
.lang.is-open .lang__btn svg{transform:rotate(180deg)}
.lang__list{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;background:var(--white);border:1px solid var(--ink);border-radius:2px;padding:6px 0}
.lang.is-open .lang__list{display:block}
.lang__list a{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s2);text-decoration:none;font-size:.95rem}
.lang__list a[aria-current="true"]{color:var(--blue);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)}
.lang__code{font-size:.78rem;color:var(--mute);font-weight:500}
.lang__list a:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.lang__btn:hover{border-color:var(--ink)}.lang__list a:hover{background:var(--grey)}}
.menu__lang ul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin-bottom:var(--s3)}
.menu__lang a{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:2px;text-decoration:none;font-weight:500;font-size:.95rem}
.menu__lang a[aria-current="true"]{border-color:var(--blue);color:var(--blue);font-weight:600}
.foot__lang{grid-column:1/13}
.foot__lang ul{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.foot__lang a{text-decoration:none}
.foot__lang a[aria-current="true"]{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.3em}
@media (hover:hover) and (pointer:fine){.top__nav a:hover{border-bottom-color:var(--line)}}

.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;margin:0;background:var(--white);color:var(--ink);padding:0 var(--m) calc(var(--s3) + env(safe-area-inset-bottom,0px));flex-direction:column;overflow-y:auto}
.menu[open]{display:flex;animation:fade .2s var(--ease)}
.menu::backdrop{background:var(--white)}
.menu__bar{display:flex;justify-content:space-between;align-items:center;height:var(--head);border-bottom:1px solid var(--line)}
.menu__close{font-weight:600;min-height:44px;padding:0 4px}
.menu__nav{display:flex;flex-direction:column;margin:var(--s3) 0}
.menu__nav a{font-size:1.5rem;font-weight:700;text-decoration:none;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.menu__nav a[aria-current="page"]{color:var(--blue)}
.menu__foot{margin-top:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- page head (content pages) ---------- */
.pagehead{padding-top:var(--s5);padding-bottom:var(--s4)}
.pagehead__k{margin-bottom:var(--s1)}
.pagehead__t{font-size:clamp(2rem,4vw,3rem);max-width:20em}
.pagehead__lede{font-size:1.2rem;line-height:1.5;margin-top:var(--s2);max-width:36em}
.pagehead--404{padding-top:96px;padding-bottom:96px}
.pagehead--404 .actions{margin-top:var(--s4)}

/* ---------- home: hero ---------- */
.hero{padding-top:var(--s5);padding-bottom:var(--s4);row-gap:var(--s4);align-items:center}
.hero__text{grid-column:1/7}
.hero__eyebrow{font-size:.95rem;color:var(--mute);margin-bottom:var(--s2)}
.hero__title{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.02em}
.hero__title span{display:block}
.hero__lede{font-size:1.2rem;line-height:1.5;margin:var(--s3) 0 var(--s4);max-width:28em}
.hero__img{grid-column:7/13}
.hero__crop{aspect-ratio:4/3;overflow:hidden}
.keyfacts{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--blue)}
.keyfacts div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:var(--s2) var(--s3) 0 0}
.keyfacts div+div{padding-left:var(--s3);border-left:1px solid var(--line)}
.keyfacts dd{font-size:clamp(1.8rem,2.6vw,2.25rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.keyfacts .u{font-size:.55em;font-weight:600;margin-left:.15em}
.keyfacts dt{font-size:.9rem;color:var(--mute);margin-top:var(--s1)}
.keyfacts__rating dd{color:var(--blue)}

/* ---------- split: heading left, text right ---------- */
.split{row-gap:var(--s2)}
.split>h2{grid-column:1/6}
.split__body{grid-column:7/13}

/* ---------- home ---------- */
.intro{padding-top:var(--sec);padding-bottom:var(--sec);row-gap:var(--s2)}
.intro__h{grid-column:1/6;font-size:clamp(1.6rem,2.6vw,2.25rem)}
.intro__p{grid-column:7/13}

.teaser{padding-bottom:var(--sec);row-gap:var(--s3);align-items:start}
.teaser__main{grid-column:1/8;grid-row:1/3}
.teaser__main .crop{aspect-ratio:3/2;overflow:hidden}
.teaser__text{grid-column:8/13}
.teaser__text p{margin:var(--s2) 0 var(--s3)}
.teaser__inset{grid-column:8/11;grid-row:2;align-self:end}
.teaser__inset img{aspect-ratio:4/3;height:auto}

.preview{background:var(--grey);padding-top:var(--sec);padding-bottom:var(--sec)}
.preview__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.preview__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(110px,12vw,150px);gap:var(--s2)}
.preview__i button{display:block;width:100%;height:100%;overflow:hidden;cursor:zoom-in}
.preview__i img{transition:transform .5s var(--ease)}
.preview__i--0{grid-column:1/8;grid-row:1/3}
.preview__i--1{grid-column:8/13;grid-row:1/2}
.preview__i--2{grid-column:8/13;grid-row:2/3}
.preview__i--3{grid-column:1/4;grid-row:3/5}
.preview__i--4{grid-column:4/13;grid-row:3/5}
.preview__i--4 img{object-position:50% 70%}
@media (hover:hover) and (pointer:fine){.preview__i button:hover img{transform:scale(1.03)}}

.regionteaser{padding-top:var(--sec);padding-bottom:var(--sec)}
.pano__crop{aspect-ratio:21/9;overflow:hidden}
.pano figcaption{display:flex;justify-content:space-between;gap:var(--s2)}
.regionteaser .split{margin-top:var(--s4)}
.regionteaser .split__body .link{display:inline-block;margin-top:var(--s2)}
.riverline{position:relative;display:flex;justify-content:space-between;margin-top:var(--s5);padding-top:var(--s3);border-top:2px solid var(--blue)}
.riverline li{position:relative;font-weight:600;line-height:1.2}
.riverline li::before{content:"";position:absolute;top:calc(-1 * var(--s3) - 8px);left:0;width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid var(--blue)}
.riverline li.is-home{color:var(--blue)}
.riverline li.is-home::before{background:var(--blue)}
.riverline li:last-child{text-align:right}
.riverline li:last-child::before{left:auto;right:0}

/* ---------- reviews ---------- */
.reviews{padding-top:var(--sec);padding-bottom:var(--sec);border-top:1px solid var(--line);align-items:start;row-gap:var(--s3)}
.reviews__score{grid-column:1/5}
.reviews__n{font-size:clamp(4rem,8vw,6rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--blue);margin-top:var(--s2)}
.reviews__w{margin-top:var(--s1);color:var(--mute)}
.reviews__detail{grid-column:6/13}
.reviews__cats{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);border-top:1px solid var(--ink)}
.reviews__cats div{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.reviews__cats dd{font-weight:700}
.reviews__note{margin:var(--s2) 0 var(--s1);font-size:.9rem;color:var(--mute)}

/* ---------- booking band (one per page) ---------- */
.band{background:var(--blue);color:var(--white);padding-top:var(--s5);padding-bottom:var(--s5);align-items:center;row-gap:var(--s3)}
.band__h{grid-column:1/8;font-size:clamp(1.6rem,2.8vw,2.4rem)}
.band__h span{display:block}
.band__h span+span{color:var(--on-blue);font-weight:600}
.band__act{grid-column:9/13}
.band__act p{color:var(--on-blue);margin-bottom:var(--s2)}

/* ---------- FAQ (native <details>) ---------- */
.faqteaser{padding-top:var(--sec);padding-bottom:var(--sec);row-gap:var(--s3)}
.faqteaser h2{grid-column:1/5}
.faqteaser>div{grid-column:6/13}
.faqteaser .link{display:inline-block;margin-top:var(--s3)}
.faq{border-top:1px solid var(--ink)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;padding:var(--s2) 0;font-weight:600;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--blue);flex:none;font-weight:400}
.faq__item[open] summary::after{content:"−"}
.faq__item p{padding-bottom:var(--s2);max-width:42em}

/* ---------- unterkunft ---------- */
.house{padding-bottom:var(--sec);row-gap:var(--s3);align-items:start}
.house__img{grid-column:1/8}
.house__img .crop{aspect-ratio:3/2;overflow:hidden}
.house__facts{grid-column:8/13}
.facts{margin-top:var(--s1);border-top:2px solid var(--blue)}
.fact{display:grid;grid-template-columns:5.5rem 1fr;align-items:baseline;padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.fact dd{grid-row:1;grid-column:1;font-size:1.9rem;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.fact .u{font-size:.55em;font-weight:600;margin-left:.15em}
.fact dt{grid-row:1;grid-column:2;color:var(--mute)}
.house__text{margin-top:var(--s3)}

.rooms{padding-bottom:var(--sec)}
.rooms>h2{margin-bottom:var(--s3)}
.room{row-gap:var(--s2);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line)}
.room__img{grid-column:1/7}
.room__img img{aspect-ratio:3/2;height:auto}
.room__text{grid-column:8/13}
.room--flip .room__img{grid-column:7/13;grid-row:1}
.room--flip .room__text{grid-column:1/6;grid-row:1}
.room__sub{color:var(--mute);margin-top:var(--s1)}
.room__text p:last-child{margin-top:var(--s2)}

.amen{background:var(--grey);padding-top:var(--sec);padding-bottom:var(--sec);row-gap:var(--s3);align-items:start}
.amen h2{grid-column:1/13}
.amen__groups{grid-column:1/9;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--g)}
.amen__g ul{margin-top:var(--s1);border-top:1px solid var(--ink)}
.amen__g li{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.amen__n{color:var(--mute);font-size:.9rem;text-align:right}
.amen__note{grid-column:1/9;font-size:.92rem;color:var(--mute)}
.amen__img{grid-column:10/13;grid-row:2/4}
.amen__img img{aspect-ratio:3/4;height:auto}

.rules{padding-top:var(--sec);padding-bottom:var(--sec);row-gap:var(--s3)}
.rules h2{grid-column:1/5}
.rules__list{grid-column:6/13;border-top:1px solid var(--ink)}
.rules__list div{display:grid;grid-template-columns:12rem 1fr;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.rules__list dt{color:var(--mute)}

/* ---------- galerie ---------- */
.gnav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);padding-bottom:var(--s4)}
.gnav a{font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid var(--line)}
.gnav a span{color:var(--mute);font-size:.85rem;font-weight:400;margin-left:.2em}
@media (hover:hover) and (pointer:fine){.gnav a:hover{border-bottom-color:var(--blue)}}
.gset{padding-top:var(--s5);padding-bottom:var(--s5);border-top:1px solid var(--line);row-gap:var(--s3);--maxh:440px}
.gset__h{grid-column:1/4;align-self:start;position:sticky;top:calc(var(--head) + var(--s3));font-size:1.4rem}
.gset__h .num{display:block;font-size:.85rem;font-weight:600;color:var(--blue);margin-bottom:var(--s1)}
.gset__rows{grid-column:4/13;display:flex;flex-direction:column;gap:var(--s3);min-width:0}
/* one row: widths ∝ aspect ratio → one shared height, capped at --maxh */
.grow{display:flex;gap:var(--s2);width:min(100%,calc(var(--sum) * var(--maxh) + (var(--n) - 1) * var(--s2)))}
.grow li{flex:var(--r) 1 0;min-width:0;display:flex;flex-direction:column}
.grow button{display:block;width:100%;aspect-ratio:var(--r);overflow:hidden;cursor:zoom-in;background:var(--grey)}
.grow img{transition:transform .5s var(--ease)}
.gset__cap{font-size:.85rem;color:var(--mute);padding-top:var(--s1)}
@media (hover:hover) and (pointer:fine){.grow button:hover img{transform:scale(1.03)}}

/* ---------- region ---------- */
.regintro{padding-bottom:var(--sec)}
.regintro .split{margin-top:var(--s4)}
.regintro .split__body p:first-child{font-size:1.2rem;line-height:1.5}
.pano figcaption span:last-child{color:var(--blue)}

.seasons{background:var(--grey);padding-top:var(--sec);padding-bottom:var(--sec)}
.seasons>h2{margin-bottom:var(--s3)}
.seasons__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.season__img img{aspect-ratio:4/3;height:auto}
.season:first-child .season__img img{object-position:50% 22%}
.season__name{margin-top:var(--s2);font-size:.85rem;font-weight:600;color:var(--blue)}
.season h3{margin:var(--s1) 0}

.places{padding-top:var(--sec);padding-bottom:var(--sec)}
.places__head{row-gap:var(--s2);margin-bottom:var(--s4);align-items:end}
.places__head h2{grid-column:1/6}
.places__head p{grid-column:7/13;color:var(--mute)}
.river{position:relative;height:170px}
.river__svg{position:absolute;inset:0;width:100%;height:150px;overflow:visible}
.r-water{stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}
.r-park{stroke:var(--line);fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.r-arrow{fill:var(--blue)}
.rlabel{position:absolute;transform:translateX(-50%);font-size:.8rem;color:var(--mute)}
.rlabel--park{top:6px}
.rlabel--flow{top:112px;transform:translateX(-100%);color:var(--blue)}
.rpt{position:absolute;top:100px;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--white);border:2px solid var(--blue);border-radius:50%;transition:background .2s,transform .2s}
.rpt--home{background:var(--blue);width:18px;height:18px;margin:-9px 0 0 -9px}
.rpt.is-on{background:var(--blue);transform:scale(1.3)}
.rname{position:absolute;top:64px;transform:translateX(-50%);font-weight:600;white-space:nowrap}
.rname--home{color:var(--blue)}
.river__note{font-size:.8rem;color:var(--mute);text-align:right}
.places__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:var(--s3);border-top:1px solid var(--ink)}
.jt{padding-top:var(--s2);transition:opacity .2s}
.jt__w{font-size:.85rem;font-weight:600;color:var(--blue)}
.jt h3{margin:var(--s1) 0}
.jt p:last-child{font-size:.95rem}
.places__note{margin-top:var(--s4);font-size:.9rem;color:var(--mute)}
@media (hover:hover) and (pointer:fine){
  .places__list:hover .jt{opacity:.5}
  .places__list .jt:hover{opacity:1}
}

/* ---------- buchen ---------- */
.bk{padding-bottom:var(--sec);row-gap:var(--s4);align-items:start}
.bk__main{grid-column:1/8}
.bk__box{border-top:2px solid var(--blue);background:var(--grey);padding:var(--s4)}
.bk__box--widget{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--blue);min-height:320px}
.bk__box .h3{margin-bottom:var(--s2)}
.bk__box p{margin-bottom:var(--s3)}
.bk__lead{font-size:1.1rem}
.bk__loading{color:var(--mute)}
.bk__loading.is-done{display:none}
.bk__note{margin-top:var(--s2);font-size:.9rem;color:var(--mute)}
.bk__side{grid-column:9/13}
.bk__side .eyebrow{margin-bottom:var(--s1)}
.bk__side .eyebrow~.eyebrow{margin-top:var(--s4)}
.steps{counter-reset:s;border-top:1px solid var(--ink)}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;row-gap:2px;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:1/3;font-weight:700;color:var(--blue)}
.steps strong{font-weight:600}
.steps span{font-size:.92rem;color:var(--mute)}
.bk__side p{font-size:.95rem}

/* ---------- faq & arrival ---------- */
.arrival{padding-bottom:var(--sec);row-gap:var(--s3);align-items:start}
.arrival__text{grid-column:1/6}
.arrival__dir{margin:var(--s2) 0 var(--s3)}
.arrival__facts{grid-column:6/10;border-top:2px solid var(--blue)}
.arrival__facts div{padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.arrival__facts dt{font-size:.85rem;color:var(--mute)}
.arrival__img{grid-column:10/13}
.arrival__img img{aspect-ratio:3/4;height:auto}
.faqpage{background:var(--grey);padding-top:var(--sec);padding-bottom:var(--sec);row-gap:var(--s3)}
.faqpage h2{grid-column:1/5}
.faqpage .faq{grid-column:6/13}

/* ---------- legal ---------- */
.legal{padding-bottom:var(--sec)}
.legal section{max-width:46rem;padding:var(--s3) 0;border-top:1px solid var(--line)}
.legal .h3{margin-bottom:var(--s1)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-ink);padding-top:var(--s5);padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));font-size:.92rem;row-gap:var(--s4)}
.foot a:not(.btn){color:var(--white);text-underline-offset:.25em}
.foot__id{grid-column:1/5}
.foot__name{font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:var(--s1)}
.foot__id .btn{margin-top:var(--s3)}
.foot__addr{grid-column:5/8;font-style:normal}
.foot__col{grid-column:span 2}
.foot__h{color:var(--white);font-weight:600;margin-bottom:var(--s1)}
.foot__col li{padding:2px 0}
.foot__col a{text-decoration:none}
.foot__copy{grid-column:1/13;font-size:.8rem;border-top:1px solid #ffffff1f;padding-top:var(--s3)}
@media (hover:hover) and (pointer:fine){.foot__col a:hover{text-decoration:underline}}

/* ---------- mobile booking bar ---------- */
.dock{display:none}

/* ---------- viewer ---------- */
.viewer{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--ink);color:var(--white)}
.viewer::backdrop{background:var(--ink)}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:fade .2s var(--ease)}
.viewer__top,.viewer__bot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:calc(var(--s1) + env(safe-area-inset-top,0px)) var(--m) var(--s1);font-size:.92rem}
.viewer__bot{padding:var(--s1) var(--m) calc(var(--s1) + env(safe-area-inset-bottom,0px))}
.viewer__bot p{color:var(--on-ink);text-align:center}
.viewer button{min-height:44px;min-width:44px;padding:0 6px;font-weight:600}
.viewer__stage{position:relative;overflow:hidden;margin:0 var(--m)}
.viewer__stage img{object-fit:contain;transition:opacity .2s}
.viewer__stage img.swap{opacity:0}

/* ---------- image reveal (once, subtle) ---------- */
.js [data-crop] img{transform:scale(1.04);transition:transform 1.2s var(--ease)}
.js [data-crop].in img{transform:none}

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width:1180px){
  .top__nav{display:none}
  .top__menu{display:block}
}
@media (max-width:960px){
  .hero__text,.hero__img{grid-column:1/13}
  .hero__img{grid-row:1}
  .hero__crop{aspect-ratio:16/9}
  .keyfacts{grid-template-columns:repeat(2,1fr)}
  .keyfacts div:nth-child(3){padding-left:0;border-left:0}
  .keyfacts div:nth-child(n+3){border-top:1px solid var(--line);margin-top:var(--s2)}
  .split>h2,.split__body,.intro__h,.intro__p,.places__head h2,.places__head p{grid-column:1/13}
  .teaser__main,.teaser__text{grid-column:1/13;grid-row:auto}
  .teaser__inset{display:none}
  .reviews__score,.reviews__detail{grid-column:1/13}
  .band__h,.band__act{grid-column:1/13}
  .faqteaser h2,.faqteaser>div,.faqpage h2,.faqpage .faq,.rules h2,.rules__list{grid-column:1/13}
  .house__img,.house__facts{grid-column:1/13}
  .room__img,.room--flip .room__img{grid-column:1/7}
  .room__text,.room--flip .room__text{grid-column:7/13}
  .room--flip .room__img,.room--flip .room__text{grid-row:auto}
  .amen__groups,.amen__note{grid-column:1/13}
  .amen__img{grid-column:1/6;grid-row:auto}
  .gset__h{grid-column:1/13;position:static}
  .gset__rows{grid-column:1/13}
  .seasons__grid{grid-template-columns:1fr 1fr}
  .places__list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s4)}
  .bk__main,.bk__side{grid-column:1/13}
  .arrival__text{grid-column:1/13}
  .arrival__facts{grid-column:1/9}
  .arrival__img{grid-column:9/13}
  .foot__id{grid-column:1/7}
  .foot__addr{grid-column:7/13}
  .foot__col{grid-column:span 6}
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width:640px){
  :root{--head:56px;--g:16px;--sec:48px;--s5:40px}
  body{font-size:16px}
  .top__cta{display:none}
  .top{gap:var(--s2)}
  .top__mark{font-size:1.1rem}
  .lang__btn{padding:0 8px}
  .hero,.intro,.teaser,.reviews,.band,.faqteaser,.house,.amen,.rules,.gset,.split,.places__head,.bk,.arrival,.faqpage,.foot,.room{display:block}
  .hero{padding-top:var(--s3)}
  .hero__img{margin-top:var(--s4)}
  .hero__crop{aspect-ratio:4/3}
  .hero__title{font-size:clamp(2rem,9vw,2.6rem)}
  .hero__lede{font-size:1.05rem;margin:var(--s2) 0 var(--s3)}
  .hero .actions .btn{width:100%}
  .keyfacts{margin-top:var(--s4)}
  .keyfacts div{padding-right:var(--s2)}
  .keyfacts div+div{padding-left:var(--s2)}
  .intro__p,.split__body{margin-top:var(--s2)}
  .teaser__text{margin-top:var(--s3)}
  .preview__grid{grid-template-columns:1fr 1fr;grid-auto-rows:30vw;gap:var(--s1)}
  .preview__i--0{grid-column:1/3;grid-row:auto/span 2}
  .preview__i--1,.preview__i--2{grid-column:auto;grid-row:auto}
  .preview__i--3{grid-column:1/2;grid-row:auto/span 2}
  .preview__i--4{grid-column:2/3;grid-row:auto/span 2}
  .pano__crop{aspect-ratio:3/2}
  .pano figcaption{flex-direction:column;gap:0}
  .riverline{flex-direction:column;gap:var(--s2);border-top:0;border-left:2px solid var(--blue);padding:0 0 0 var(--s3);margin-left:7px}
  .riverline li::before,.riverline li:last-child::before{top:.2em;left:calc(-1 * var(--s3) - 8px);right:auto}
  .riverline li:last-child{text-align:left}
  .reviews__detail{margin-top:var(--s3)}
  .reviews__cats{grid-template-columns:1fr}
  .band__act{margin-top:var(--s3)}
  .band .btn{width:100%}
  .faqteaser>div,.faqpage .faq,.rules__list{margin-top:var(--s3)}
  .pagehead{padding-top:var(--s4);padding-bottom:var(--s3)}
  .pagehead__t{font-size:clamp(1.8rem,8vw,2.4rem)}
  .pagehead__lede{font-size:1.05rem}
  .house__facts{margin-top:var(--s3)}
  .room__text{margin-top:var(--s2)}
  .amen__groups{grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s3)}
  .amen__note{margin-top:var(--s3)}
  .amen__img{width:60%;margin-top:var(--s3)}
  .rules__list div{grid-template-columns:1fr;gap:0}
  .gnav{gap:var(--s1) var(--s3)}
  .gset{padding-top:var(--s4);padding-bottom:var(--s4)}
  .gset__h{margin-bottom:var(--s2)}
  .gset__rows{gap:var(--s3)}
  .grow{flex-wrap:wrap;width:100%;gap:var(--s3)}
  .grow li{flex:0 0 100%}
  .grow li.is-tall{flex-basis:64%}
  .seasons__grid{grid-template-columns:1fr;gap:var(--s4)}
  .river,.river__note{display:none}
  .places__head p{margin-top:var(--s1)}
  .places__list{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--blue);margin-left:7px;row-gap:0}
  .jt{position:relative;padding:0 0 var(--s3) var(--s3)}
  .jt::before{content:"";position:absolute;left:-8px;top:.25rem;width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid var(--blue)}
  .jt--home::before{background:var(--blue)}
  .bk__side{margin-top:var(--s4)}
  .bk__box{padding:var(--s3)}
  .bk__box .btn{width:100%}
  .arrival__facts{margin-top:var(--s3)}
  .arrival__img{width:55%;margin-top:var(--s3)}
  .arrival .btn{width:100%}
  .foot{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .foot>*+*{margin-top:var(--s4)}
  .foot__id .btn{width:100%}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:var(--s2);background:var(--white);border-top:1px solid var(--line);padding:var(--s1) var(--m) calc(var(--s1) + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .3s var(--ease)}
  .dock span{font-size:.9rem;font-weight:600;white-space:nowrap}
  .dock .btn{flex:none}
  .dock.on{transform:none}
}
@media (max-width:360px){
  .dock span{display:none}
  .dock .btn{width:100%}
  .keyfacts dd{font-size:1.6rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-crop] img{transform:none}
}