/* Suphantara Thai Spa: site system. Three type sizes, six tones, one editorial serif + one sans. */
:root{
  --teak:#1C140E;--umber:#2B2019;--smoke:#3B2D23;
  --ivory:#F2EADB;--mineral:#D8CCB6;
  --brass:#B08D57;--brass-ink:#76592B;--clay:#8B5A43;--herb:#5A6650;
  --ink:#2A2019;--ink2:#5B5043;--on-dark2:rgba(242,234,219,.72);
  --serif:'Bodoni Moda','Bodoni 72',Didot,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;--thai:'Noto Serif Thai',serif;
  --f1:.8125rem;--f2:1.0625rem;--f3:clamp(1.55rem,2.3vw,2.1rem);
  --gut:clamp(1.25rem,4vw,3.5rem);--hh:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 var(--f2)/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ivory);color:var(--ink);padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}
[id]{scroll-margin-top:calc(var(--hh) + 8px)}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem}

/* type: label 13 / body 17 / display ~33 */
.label{font:500 var(--f1)/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.display{font:400 var(--f3)/1.28 var(--serif);letter-spacing:-.005em;font-variation-settings:'opsz' 28}
.display em{font-style:italic}
.th{font-family:var(--thai);font-weight:400;letter-spacing:.04em}
.dim{color:var(--ink2)}
.on-dark{color:var(--ivory)}

/* call to action: uppercase text, arrow, underline that draws */
.cta{display:inline-flex;align-items:center;gap:.9rem;font:500 var(--f1)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:.9rem 0;position:relative;color:inherit;background:none;border:0;cursor:pointer}
.cta::before{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cta i{font-style:normal;display:inline-block;transition:transform .5s var(--ease)}
.cta:hover::before,.cta:focus-visible::before{transform:scaleX(1)}
.cta:hover i,.cta:focus-visible i{transform:translateX(.45rem)}
.cta--solid{background:var(--ivory);color:var(--teak);padding:1.15rem 1.7rem;transition:background .4s,color .4s}
.cta--solid::before{display:none}
.cta--solid:hover{background:var(--brass);color:var(--teak)}
.cta--ink.cta--solid{background:var(--teak);color:var(--ivory)}
.cta--ink.cta--solid:hover{background:var(--brass-ink);color:var(--ivory)}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:50;color:var(--ivory);background:rgba(28,20,14,var(--hb,.94));transition:background .4s}
.hdr__in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:none;padding-inline:var(--gut)}
.hdr__menu{justify-self:start;display:inline-flex;align-items:center;gap:.9rem;background:none;border:0;color:inherit;font:500 var(--f1)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;padding:.8rem 0}
.hdr__menu b{display:grid;gap:5px;width:20px}
.hdr__menu b::before,.hdr__menu b::after{content:"";height:1px;background:currentColor;transition:transform .4s var(--ease)}
.hdr__menu:hover b::before{transform:translateX(4px)}
.hdr__menu:hover b::after{transform:translateX(-4px)}
.hdr__logo{justify-self:center;opacity:var(--hl,1);transition:opacity .35s}
.hdr__logo img{height:calc(var(--hh) - 10px);width:auto;aspect-ratio:3/2}
.hdr__r{justify-self:end;display:flex;align-items:center;gap:2rem}
.hdr__r a{font:500 var(--f1)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.hdr__gift{position:relative;padding:.6rem 0}
.hdr__gift::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hdr__gift:hover::after{transform:scaleX(1)}
.hdr__book{border:1px solid rgba(242,234,219,.65);padding:.75rem 1.1rem;transition:background .35s,color .35s,border-color .35s}
.hdr__book:hover{background:var(--ivory);color:var(--teak);border-color:var(--ivory)}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:80;background:var(--teak);color:var(--ivory);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--hh) + 2rem) var(--gut) 2.5rem;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease),opacity .5s,visibility 0s .8s}
.menu.open{visibility:visible;opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease),opacity .3s,visibility 0s}
.menu__x{position:absolute;top:0;left:var(--gut);height:var(--hh);background:none;border:0;color:inherit;font:500 var(--f1)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center}
.menu__links{display:grid;gap:.4rem;align-content:center;flex:1}
.menu__links a{font:400 var(--f3)/1.15 var(--serif);text-decoration:none;padding:.55rem 0;display:flex;align-items:baseline;gap:1.2rem;width:fit-content;transition:color .3s,transform .5s var(--ease)}
.menu__links a span{font:500 var(--f1)/1 var(--sans);letter-spacing:.22em;color:var(--brass);min-width:2rem}
.menu__links a:hover{color:var(--brass);transform:translateX(.6rem)}
.menu__foot{display:flex;flex-wrap:wrap;gap:1rem 3rem;color:var(--on-dark2);font-size:var(--f2)}
.menu__foot a{text-decoration:none}

/* shared planes (the threshold) */
.pl{position:absolute;top:0;bottom:0;width:50.4%;z-index:3;will-change:transform;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 2px,transparent 2px 46px),linear-gradient(180deg,#2D2119 0,#1C140E 58%,#140D08 100%);opacity:.94}
.pl::after{content:"";position:absolute;top:0;bottom:0;width:22px}
.pl--l{left:0;transform:translate3d(calc(var(--o)*(-100% + 2.2vw)),0,0)}
.pl--l::after{right:0;background:linear-gradient(90deg,transparent,rgba(176,141,87,.28))}
.pl--r{right:0;transform:translate3d(calc(var(--o)*(100% - 2.2vw)),0,0)}
.pl--r::after{left:0;background:linear-gradient(270deg,transparent,rgba(176,141,87,.28))}
.seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:4;background:linear-gradient(180deg,transparent,rgba(224,186,118,.95) 28%,rgba(224,186,118,.95) 72%,transparent);box-shadow:0 0 44px 8px rgba(214,170,100,.32);opacity:calc(1 - var(--o)*3.2)}
.em{position:absolute;left:50%;top:50%;z-index:5;width:var(--ew);height:var(--ew);--ew:clamp(170px,17vw,250px)}
.em img{width:100%;height:100%;object-fit:contain}

/* 1. threshold hero */
.thr{position:relative;height:300vh;background:var(--teak)}
.thr__stage{transform:scale(calc(1 - .06*var(--x)));transform-origin:50% 60%;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--o:1;--m:1;--h:1;--x:0}
html.js .thr__stage{--o:0;--m:0;--h:0}
.thr__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(calc(1.14 - .14*var(--o)));filter:blur(.8px) brightness(calc((.7 + .3*var(--o))*(1 - .55*var(--x))));transition:opacity .45s}
.thr__vid.seamfade{opacity:.0}
.thr__scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 55% 45%,rgba(28,20,14,0) 38%,rgba(28,20,14,.55) 100%),linear-gradient(180deg,rgba(28,20,14,.6) 0,rgba(28,20,14,.05) 24%,rgba(28,20,14,.12) 52%,rgba(28,20,14,.86) 100%)}
.thr .em{transform:translate3d(-50%,calc(-50% - var(--m)*(50svh - 38px)),0) scale(calc(1 - var(--m)*.72));opacity:calc(1 - (var(--m) - .72)*3.6);margin:0}
.thr__tag{position:absolute;left:0;right:0;bottom:clamp(1.75rem,7svh,3.75rem);z-index:5;text-align:center;color:var(--mineral);opacity:calc(1 - var(--o)*5);display:grid;gap:.5rem}
.thr__txt{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:clamp(2rem,9svh,5rem);max-width:56rem;text-shadow:0 2px 28px rgba(20,13,8,.55);color:var(--ivory);opacity:calc(var(--h)*(1 - var(--x)*2.2));transform:translate3d(0,calc((1 - var(--h))*26px),0);visibility:hidden}
.thr__stage.live .thr__txt{visibility:visible}
.thr__txt h1{font:400 clamp(2.3rem,5.2vw,4.9rem)/1.06 var(--serif);letter-spacing:-.012em;margin-bottom:1.8rem}
.thr__cta{display:flex;flex-wrap:wrap;gap:.25rem 2.4rem}

/* 2. arrival: magazine spread */
.arr{position:relative;z-index:6;margin-top:-26vh;background:var(--ivory);box-shadow:0 -70px 90px -30px rgba(20,13,8,.6);display:flex;align-items:center}
.arr__in{display:grid;gap:2rem;justify-items:center;text-align:center;padding-block:clamp(4rem,10vh,6.5rem) clamp(5rem,13vh,9rem)}
.arr__in .label{color:var(--brass-ink)}
.arr__in .display{max-width:34rem}

/* image reveal */
.rvi{clip-path:inset(0 0 0 0)}
html.js .rvi:not(.in){clip-path:inset(12% 0 0 0)}
html.js .rvi img{transform:scale(1.07);transition:transform 1.6s var(--ease)}
html.js .rvi.in img{transform:scale(1)}
.rvi{transition:clip-path 1.4s var(--ease)}
html.js .rv:not(.in){opacity:0;transform:translate3d(0,18px,0)}
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* 3. method */
.mth{background:var(--umber);color:var(--ivory);padding:clamp(5rem,14vh,10rem) 0 0;overflow:hidden}
.mth__lab{color:var(--brass);padding-bottom:clamp(3rem,8vh,5rem)}
.mth__txt{display:grid;gap:1rem;justify-items:start}
.mth__txt p{color:var(--on-dark2)}
.mth__txt .label{color:var(--brass)}
.m1w{width:100%;margin:0 0 clamp(3.5rem,8vh,5.5rem)}
.m1{display:block;height:min(84svh,840px);overflow:hidden}
.m1 img{width:100%;height:100%;object-fit:cover;object-position:43% 50%}
.mth__cap{max-width:34rem;margin:1.8rem 0 0;justify-items:start}
.m2{padding-bottom:clamp(3rem,7vh,5rem)}
.m2__pair{display:grid;grid-template-columns:1fr 1fr}
.m2__a,.m2__b{height:min(86svh,820px);overflow:hidden;position:relative}
.m2__a img,.m2__b img{width:100%;height:100%;object-fit:cover}
.m2__a img{object-position:50% 40%;transform:scale(1.9);transform-origin:52% 36%}
.m2__b img{object-position:12% 70%;transform:scale(1.6);transform-origin:14% 76%}
html.js .rvi.m2__a img{transform:scale(2.0)}
html.js .rvi.m2__a.in img{transform:scale(1.9)}
html.js .rvi.m2__b img{transform:scale(1.7)}
html.js .rvi.m2__b.in img{transform:scale(1.6)}
.m2__a::after,.m2__b::after{content:"";position:absolute;inset:0;background:rgba(43,32,25,.18);pointer-events:none}
.m3{position:relative;height:min(92svh,860px);display:flex;align-items:flex-end}
.m3__img{position:absolute;inset:0;overflow:hidden}
.m3__img img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.m3::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,32,25,.85) 0,rgba(43,32,25,0) 24%,rgba(28,20,14,0) 46%,rgba(28,20,14,.88) 100%);pointer-events:none}
.m3 .wrap{position:relative;z-index:2;padding-bottom:clamp(2.5rem,9vh,5rem);display:flex;justify-content:flex-start}
.m3 .mth__txt{max-width:25rem;text-align:left}
.m3 .mth__txt p{color:rgba(242,234,219,.86)}

/* 4. treatments: four panels, edge to edge */
.trt{background:var(--ivory);padding-top:clamp(5rem,13vh,9rem)}
.trt__head{align-items:end;padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.trt__head .display{grid-column:1/8}
.trt__head .cta{grid-column:9/13;justify-self:end;color:var(--ink)}
.trt__row{display:grid;grid-template-columns:repeat(4,1fr);height:min(84svh,840px)}
.tp{position:relative;overflow:hidden;color:var(--ivory);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.25rem,2vw,2rem);isolation:isolate}
.tp__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.tp__bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.tp::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,20,14,.55) 0,rgba(28,20,14,0) 28%,rgba(28,20,14,.2) 50%,rgba(28,20,14,.9) 100%)}
.tp:hover .tp__bg img,.tp:focus-visible .tp__bg img{transform:scale(1.06)}
.tp__from{color:var(--mineral)}
.tp__b{display:grid;gap:.9rem;justify-items:start;align-content:end;min-height:13rem}
.tp__b p{color:rgba(242,234,219,.88);max-width:17rem}
.tp--a img{object-position:50% 50%}
.tp--b{--tint:rgba(139,90,67,.0)}
.tp--b .tp__bg::after,.tp--c .tp__bg::after,.tp--d .tp__bg::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply}
.tp--b .tp__bg::after{background:rgba(139,90,67,.38)}
.tp--c .tp__bg::after{background:rgba(90,102,80,.42)}
.tp--d .tp__bg::after{background:rgba(59,45,35,.4)}
.tp--a img{object-position:52% 55%}
.tp--b img{object-position:44% 50%}
.tp--c img{object-position:6% 70%}
.tp--d img{object-position:96% 60%}

/* 5. brand chapter */
.brd{background:var(--teak);color:var(--ivory);position:relative;overflow:hidden}
.brd__in{min-height:min(92svh,820px);align-items:center;padding-block:clamp(5rem,12vh,8rem)}
.brd__em{grid-column:2/6;justify-self:start;width:clamp(210px,25vw,360px)}
.brd__em img{width:100%;height:auto;aspect-ratio:1}
.brd__txt{grid-column:7/13;display:grid;gap:1.8rem;justify-items:start}
.brd__txt p.display{max-width:26rem}
.brd__mat{height:14vw;background:url(/assets/img/hero-poster.jpg) 0 100%/100% auto no-repeat;filter:saturate(.9) brightness(.9)}
.brd__mat::after{content:"";display:block;height:100%;background:linear-gradient(180deg,#1C140E 0,rgba(28,20,14,0) 60%)}


/* 5b. reviews */
.arr__rate{font:500 var(--f1)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink2);margin-top:-.4rem}
.arr__rate b{color:var(--brass-ink);font-weight:400;letter-spacing:.12em;margin-right:.5rem}
.rev{background:var(--mineral);color:var(--ink);padding:clamp(5rem,13vh,9rem) 0}
.rev__in{align-items:start;row-gap:3rem}
.rev__sum{grid-column:1/5;display:grid;gap:.6rem;justify-items:start;align-content:start;position:sticky;top:calc(var(--hh) + 2rem)}
.rev__sum .label{color:var(--brass-ink)}
.rev__n{font:400 clamp(4.5rem,9vw,8rem)/1 var(--serif);letter-spacing:-.02em;margin-top:.8rem}
.rev__st{color:var(--brass-ink);letter-spacing:.3em;font-size:1.1rem}
.rev__ct{color:var(--ink2);margin-bottom:1rem}
.rev__list{grid-column:6/13}
.rev__q{margin:0;padding:clamp(1.8rem,4vh,2.6rem) 0;border-top:1px solid rgba(42,32,25,.22)}
.rev__q:last-child{border-bottom:1px solid rgba(42,32,25,.22)}
.rev__q blockquote{margin:0}
.rev__q p{font:400 clamp(1.2rem,1.7vw,1.5rem)/1.45 var(--serif);font-variation-settings:'opsz' 24;max-width:36rem}
.rev__q figcaption{margin-top:1.1rem;font:500 var(--f1)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink)}
@media(max-width:1000px){.rev__sum,.rev__list{grid-column:1/-1}.rev__sum{position:static}}

/* social icons */
.soc{display:flex;gap:1rem;margin-top:.5rem}
.soc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(242,234,219,.3);border-radius:50%;color:var(--on-dark2);transition:color .3s,border-color .3s}
.soc a:hover{color:var(--ivory);border-color:var(--brass)}
.ftr .soc a,.menu .soc a{width:44px;flex:none}
.soc svg{width:20px;height:20px}

/* 6. gift */
.gft{position:relative;overflow:hidden;color:var(--ivory);min-height:min(88svh,780px);display:flex;align-items:center;background:linear-gradient(180deg,#241A13 0,#4A3226 34%,#8B5A43 74%,#B98B5E 100%)}
.gft__beam{position:absolute;top:-20%;left:62%;width:20vw;height:150%;background:linear-gradient(180deg,rgba(255,236,200,0),rgba(255,236,200,.26) 45%,rgba(255,236,200,0));filter:blur(28px);transform:rotate(9deg);animation:beam 22s ease-in-out infinite alternate}
@keyframes beam{from{transform:translateX(-14vw) rotate(9deg)}to{transform:translateX(10vw) rotate(5deg)}}
.gft .wrap{position:relative;z-index:1;padding-block:clamp(5rem,12vh,8rem)}
.gft__in{grid-column:2/8;display:grid;gap:1.7rem;justify-items:start}
.gft__in .label{color:var(--mineral)}
.gft__act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2.4rem;margin-top:.6rem}

/* 7. visit */
.vis{background:var(--mineral);padding:clamp(5rem,13vh,9rem) 0}
.vis__a{grid-column:1/6;display:grid;gap:1.6rem;align-content:start;justify-items:start}
.vis__a .label{color:var(--brass-ink)}
.vis__a address{font-style:normal}
.vis__b{grid-column:8/13;display:grid;gap:2.2rem;align-content:start}
.vis__b h3{font:500 var(--f1)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:.7rem}
.vis__b a{text-decoration:none;display:block;width:fit-content;transition:color .3s}
.vis__b a:hover{color:var(--brass-ink)}
.vis__act{display:flex;flex-wrap:wrap;gap:.25rem 2.4rem;margin-top:.6rem;grid-column:1/-1;padding-top:clamp(2.5rem,7vh,4.5rem)}

/* 8. closing: the threshold closes */
.out{position:relative;height:230vh;background:var(--teak)}
.out__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--o:0;--e:1}
html.js .out__stage{--o:1;--e:0}
.out__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%;filter:blur(.8px) brightness(.8);transform:scale(calc(1.02 + .08*var(--o)))}
.out__scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(110% 90% at 50% 45%,rgba(28,20,14,.1) 30%,rgba(28,20,14,.7) 100%)}
.out .em{transform:translate3d(-50%,calc(-50% - 8svh + (1 - var(--e))*18px),0) scale(calc(.82 + .18*var(--e)));opacity:var(--e)}
.out__t{position:absolute;left:0;right:0;top:calc(50% + clamp(60px,9vw,128px) + 2svh);z-index:5;display:grid;justify-items:center;gap:1.1rem;text-align:center;color:var(--ivory);opacity:var(--e);transform:translate3d(0,calc((1 - var(--e))*22px),0)}
.out__t .label{color:var(--mineral)}
.out__t .cta--solid{margin-top:.4rem}
.out__t .tel{color:var(--on-dark2);text-decoration:none;font-size:var(--f2)}

/* footer */
.ftr{background:var(--teak);color:var(--on-dark2);padding:clamp(3rem,7vh,5rem) 0 2rem}
.ftr__in{align-items:start;row-gap:2.5rem}
.ftr__logo{grid-column:1/4}
.ftr__logo img{width:clamp(130px,12vw,170px);height:auto}
.ftr__col{grid-column:span 3;display:grid;gap:.4rem;align-content:start}
.ftr__col h3{font:500 var(--f1)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:.6rem}
.ftr a{text-decoration:none;width:fit-content;transition:color .3s}
.ftr a:hover{color:var(--ivory)}
.ftr small{grid-column:1/-1;font-size:var(--f1);margin-top:1rem}

/* treatments page */
.th-hero{background:var(--teak);color:var(--ivory);padding:calc(var(--hh) + clamp(5rem,14vh,9rem)) 0 clamp(4rem,10vh,7rem)}
.th-hero__in{align-items:end}
.th-hero .label{grid-column:1/-1;color:var(--brass);margin-bottom:1.6rem}
.th-hero .display{grid-column:1/8}
.th-hero p.dim{grid-column:9/13;color:var(--on-dark2)}
.fam{padding:clamp(4.5rem,11vh,8rem) 0;background:var(--ivory)}
.fam:nth-of-type(even){background:var(--mineral)}
.fam__in{align-items:start}
.fam__h{grid-column:1/5;position:sticky;top:calc(var(--hh) + 2rem);display:grid;gap:1.1rem;justify-items:start}
.fam__h .label{color:var(--brass-ink)}
.fam__list{grid-column:6/13;display:grid;gap:clamp(2.5rem,6vh,4rem)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2.5rem;align-items:start}
.row h3{font:400 var(--f3)/1.2 var(--serif);margin-bottom:.4rem}
.row p{color:var(--ink2);max-width:30rem}
.row dl{display:grid;grid-template-columns:repeat(3,4.2rem);gap:.4rem 1.6rem}
.row dl div{display:grid;gap:.3rem;text-align:right}
.row dt{font:500 var(--f1)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink)}
.row dd{font:400 1.5rem/1 var(--serif)}
.row .na dd{color:var(--ink2)}
.fam__book{margin-top:.5rem}
.th-end{background:var(--teak);color:var(--ivory);padding:clamp(4.5rem,11vh,7rem) 0}
.th-end .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.th-end p{max-width:28rem}
.th-end .tel{text-decoration:none;color:var(--brass)}

/* booking page */
.ftr--slim{padding:2rem 0}
.ftr--slim small{margin:0}

/* responsive */
@media(max-width:1000px){
  .hdr__gift{display:none}
  .arr__img{grid-column:1/-1;height:62svh;margin-right:calc(var(--gut)*-1)}
  .arr__grid{min-height:0;row-gap:2.5rem;align-items:start}
  .arr__txt{grid-column:1/-1}
  .m1{width:auto;margin-inline:calc(var(--gut)*-1);aspect-ratio:4/5}
  .m2__pair{grid-template-columns:1fr}
  .m2__a,.m2__b{height:56svh}
  .m3{height:80svh}
  .m3 .wrap{justify-content:flex-start}
  .trt__head .display,.trt__head .cta{grid-column:1/-1;justify-self:start}
  .trt__head{row-gap:.6rem}
  .trt__row{grid-template-columns:1fr 1fr;height:auto}
  .tp{height:min(62svh,520px)}
  .brd__in{row-gap:2.5rem}
  .brd__em{grid-column:1/-1;width:clamp(170px,46vw,240px)}
  .brd__txt{grid-column:1/-1}
  .gft__in{grid-column:1/-1}
  .gft__beam{left:50%;width:36vw}
  .vis__a,.vis__b{grid-column:1/-1}
  .vis__b{margin-top:2.5rem}
  .ftr__logo{grid-column:1/-1}
  .ftr__col{grid-column:span 6}
  .th-hero .display,.th-hero p.dim{grid-column:1/-1}
  .th-hero p.dim{margin-top:1.4rem}
  .fam__h{grid-column:1/-1;position:static}
  .fam__list{grid-column:1/-1;margin-top:2.2rem}
}
@media(max-width:620px){
  :root{--hh:64px}
  .g12{column-gap:0}
  .hdr__r a:not(.hdr__book){display:none}
  .hdr__r{gap:0}
  .hdr__book{padding:.7rem .8rem;white-space:nowrap;letter-spacing:.16em;font-size:.75rem}
  .hdr__logo img{height:calc(var(--hh) - 14px)}
  .thr{height:230vh}
  .arr{margin-top:-20vh}
  .ftr a,.ftr__col p{overflow-wrap:anywhere}
  .hdr__menu span{display:none}
  .trt__row{grid-template-columns:1fr}
  .tp{height:min(58svh,460px)}
  .row{grid-template-columns:1fr}
  .row dl{grid-template-columns:repeat(3,1fr);max-width:20rem}
  .row dl div{text-align:left}
  .thr__txt{bottom:clamp(1.5rem,6svh,3rem)}
  .thr__vid{object-position:46% 50%}
  .out__t .cta--solid{width:min(18rem,80vw);justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html.js .rv:not(.in){opacity:1;transform:none}
  html.js .rvi:not(.in){clip-path:inset(0)}
  html.js .rvi img{transform:none}
}
html.rm .thr{height:100svh}
html.rm .arr,html:not(.js) .arr{margin-top:0;box-shadow:none}
html.rm .thr__stage{--o:1;--m:1;--h:1}
html.rm .out{height:100svh}
html.rm .out__stage{--o:0;--e:1}

.caps{text-transform:uppercase;letter-spacing:.08em}
html.js .hdr--home{--hl:0;--hb:0}
html:not(.js) .thr{height:100svh}
html:not(.js) .thr__txt{visibility:visible}
html:not(.js) .out{height:100svh}
html:not(.js) .out__stage{--o:0;--e:1}
.out .pl{opacity:.72}
.pl--l,.pl--r{backface-visibility:hidden}
.ftr a{max-width:100%}
.out__t{padding-inline:var(--gut)}
.ftr small a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,141,87,.6)}
.ftr small .by{white-space:nowrap}
.ftr small a.jf{display:inline-block;vertical-align:middle;margin-left:.5rem;text-decoration:none;opacity:.85;transition:opacity .3s}
.ftr small a.jf:hover{opacity:1}
.ftr small a.jf img{display:block;height:1.7rem;width:auto}