/*
Theme Name: The Hotel Lover
Theme URI: https://thehotellover.com
Author: Thomas Stadler
Description: Theme The Hotel Lover.
Version: 0.1.06
Text Domain: thl
*/



@font-face {
  font-family: 'Alpina';
  src: url(assets/fonts/alpina/alpina-standard-light.woff2);
  font-display: swap;
  font-weight: 300;
}

@font-face {
  font-family: 'Alpina';
  src: url(assets/fonts/alpina/GT-Alpina-Standard-Light-Italic-Trial.woff2);
  font-display: swap;
  font-weight: 300;
  font-style:italic;
}





@font-face {
font-family:"worksans";
src:url("https://use.typekit.net/af/4fb54b/00000000000000007735c12d/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff2"),url("https://use.typekit.net/af/4fb54b/00000000000000007735c12d/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff"),url("https://use.typekit.net/af/4fb54b/00000000000000007735c12d/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:100;font-stretch:normal;
}

@font-face {
font-family:"worksans";
src:url("https://use.typekit.net/af/1b1cca/00000000000000007735c134/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"),url("https://use.typekit.net/af/1b1cca/00000000000000007735c134/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"),url("https://use.typekit.net/af/1b1cca/00000000000000007735c134/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:200;font-stretch:normal;
}

@font-face {
font-family:"worksans";
src:url("https://use.typekit.net/af/ab7ecc/00000000000000007735c139/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/ab7ecc/00000000000000007735c139/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/ab7ecc/00000000000000007735c139/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"worksans";
src:url("https://use.typekit.net/af/152437/00000000000000007735c13d/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/152437/00000000000000007735c13d/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/152437/00000000000000007735c13d/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"worksans";
src:url("https://use.typekit.net/af/25a8b0/00000000000000007735c14a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/25a8b0/00000000000000007735c14a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/25a8b0/00000000000000007735c14a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
font-family:"worksans";
src:url("https://use.typekit.net/af/fc9283/00000000000000007735c159/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/fc9283/00000000000000007735c159/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/fc9283/00000000000000007735c159/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}





@font-face {
font-family: 'Plantin';
src: url(assets/fonts/plantin/plantin-300.woff2);
font-display:swap;
font-style:normal;  
font-weight:300;
}

@font-face {
font-family: 'Plantin';
src: url(assets/fonts/plantin/plantin-300-italic.woff2);
font-display:swap;
font-style:italic;  
font-weight:300;
}

@font-face {
font-family: 'Plantin';
src: url(assets/fonts/plantin/plantin-400.woff2);
font-display:swap;
font-style:normal;  
font-weight:400;
}

@font-face {
font-family: 'Plantin';
src: url(assets/fonts/plantin/plantin-400-italic.woff2);
font-display:swap;
font-style:italic;  
font-weight:400;
}

@font-face {
font-family: 'Plantin';
src: url(assets/fonts/plantin/plantin-600.woff2);
font-display:swap;
font-style:normal;  
font-weight:600;
}

@font-face {
font-family: 'Plantin';
src: url(assets/fonts/plantin/plantin-600-italic.woff2);
font-display:swap;
font-style:italic;  
font-weight:600;
}




:root {
  --accent: #9C3E24;
  --accent: #B26451;
  --accent: #7C6746;
   --accent: #A69A8D;
  --footer: #2C2C2C;
}


    :root {
      --paper: #f5f1e9;
      --paper-deep: #ebe4d8;
      --ink: #282823;
		--ink: #32322D;
      --muted: #746f65;
      --line: rgba(40, 40, 35, 0.18);
      --accent: #8d5c3f;
      --lake: #696047;
      --max-super: 1440px;
      --max-wide: 1152px;
      --max-copy: 800px;
      --max-copy: 760px;
		
      --max-copy: 744px;
      --max-wide: 1128px;
		
      --max-copy: 728px;
      --max-wide: 1104px;		
		
		
		
      --side: clamp(20px, 4vw, 56px);
      --side: clamp(24px, 4vw, 56px);
      --side: clamp(24px, 4vw, 40px);
      --side: clamp(24px, 4vw, 40px);
		
		--margin-outside-mobile: 24px;
	
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overscroll-behavior: none;
    }
    
    
    
 @media (max-width : 699px){
    html {
      scroll-behavior: smooth;
      overscroll-behavior: auto;
    }
}	 


body{
	margin: 0;
	padding: 0;
	height: 100%;

	color: var(--ink);
	background: #F6F3EF;
	background: #F6F3EF;
	background: #F7F5F1;	
	background: var(--paper);
	
	
	background: #FAFAFA;
	background: #F8F7F3;
	
}


	

p, li, summary, figcaption{
	hyphens: auto;	
	hyphenate-limit-chars: 8 4 3;
    font-variant-ligatures: normal;
    font-variant-numeric: oldstyle-nums;
}	


p, li, summary {
	font: 300 18.5px/1.6 'Plantin'; 
	font: 300 19px/1.6 'Plantin'; 
	font: 300 18.5px/1.6 'Plantin'; 
	font: 300 19px/1.6 'Plantin'; 
	font: 300 20px/1.6 'Plantin'; 
	word-spacing: -1px; 
}





@media (max-width : 699px){
	p, li, summary {	
	font: 300 15.5px/1.4 'Plantin', Georgia, serif; 
	font: 300 17px/1.4 'Plantin', Georgia, serif; 
	font: 300 18px/1.5 'Plantin', Georgia, serif; 
	word-spacing: -0.6px; 
	}
}


figcaption{
      margin-top: 12px;
      color: var(--muted);
      font-family: worksans, sans-serif;
      letter-spacing: 0.08em;
      line-height: 1.3;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0.6px;
     font-size: 11px;
       margin-top: 10px;
       
       	
	font: 400 16px/1.2 'plantin', sans-serif;
	text-transform: none;
	ont-style: italic;
      letter-spacing: 0;
      word-spacing: -1px;
	
	
	  font-family: worksans;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;

	
	
		font: 400 16px/1.2 'plantin', sans-serif;
	text-transform: none;
	font-style: italic;
      letter-spacing: 0;
      word-spacing: 0;	
	color: #746f65;;
       margin-top: 8px;
	
	
	 font-family: "Alpina";
	
	font: 400 italic 16px/1.2 'Alpina', serif;


}	




a, a:visited, a:hover, a:focus, a:active{color: #1d1f2a; text-decoration-color: #EBE9E2;}
a:hover{cursor: pointer; text-decoration-color: #e2dfd4;}
strong{font-weight: 500;}
img{display: block; height: auto; margin: 0; max-width: 100%;}


p+p{margin-top: 16px;}


@media (max-width : 699px){
p+p{margin-top: 10px;}

}	

/* ------------------------------------------------- HEADER */



h1 {
	margin: 40px auto;
	padding: 0;
	text-wrap: balance;
	hyphens: none;	
	text-align: center;
	font: 400 34px/1.2 'ogg-text', sans-serif;
	font: 400 40px/1.2 'ogg-text', sans-serif;
}


.guide h1 {
	font: 500 40px/1.1 'SourceSerif', serif;	
	font: 300 50px/1.1 'FreightBigPro', serif;	


}

h1.destination {
	font: 400 50px/1.1 'Garamond', serif;	
	text-transform: uppercase;
}









p.pretitle{
	font-size: 11px;	
	text-align: center;
	margin: 0px auto 10px auto;
	text-transform: uppercase;
	font-weight: 500;
}

p.tag{
	font-size: 12px;	
	font-weight: 500;
	


	user-select: none; 
	
	text-align: center;
	margin: 0 auto 10px auto;
	text-transform: uppercase;
	display: inline-block;
	background: #eee;
	background: #fff;
	padding: 6px 16px;
	border-radius: 14px;
	word-spacing: -4px;
	letter-spacing: 0.5px;
}


p.fullname {
	font: 400 24px/1.1 'Playfair', serif;	
	
	ont-style: italic;
	text-align: center;
	margin: 4px auto 0;
}













.hotel_hero {
  position: relative;
	aspect-ratio: 2 / 1;
	width: 100%;
	min-height: 480px;
	max-height: min(760px, 88vh);
	overflow: hidden;
	background: #333;	
}





/* image fills the hero */
.hotel_hero picture,
.hotel_hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* header + logo, over a top-down scrim */
header {
  width: 100%;
  max-width: none;
  background: none;
  margin: 0 auto;
  padding: 30px 0 60px 0;
}

.hotel_hero header {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 30px 0 60px 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
}

.hotel_hero header .logo {
  width: 100%;
  margin: 0;
}

.hotel_hero header .logo img {
	display: inline-block; 
	height: 28px; 
	width: auto;
	margin: 30px auto;
}
  /* if you only have a dark PNG and need it white here, uncomment:
  filter: brightness(0) invert(1); */

/* full-width bottom gradient; text held to 1120 */
.hotel_hero .title-band {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 40px;
  padding-top: 60px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.hotel_hero .title-band .title {
  width: min(calc(100% - 2 * var(--side, 56px)), 1120px);
  margin: 0 auto;
  text-align: left;
  color: #fffdf8;
  pointer-events: auto;
  
}

/* the "Review" kicker as a small utility tag */
.hotel_hero .title .type {
  margin: 0 0 12px;
  font-family: var(--util,  worksans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* hotel name, length-tiered */
.hotel_hero .title .hotelname {
  margin: 0;
  font-family: var(--display, Alpina, Plantin, Georgia, serif);
  font-weight: 300;
  letter-spacing: -0.05em;
  letter-spacing: -2px;
  line-height: 0.9;
  text-wrap: balance;
  text-align: left;
	font-size: clamp(44px, 6vw, 90px); 
	line-height: 0.86;
}
.hotel_hero .title .hotelname.hotelname-short  { font-size: clamp(52px, 8vw, 110px); line-height: 0.86; }
.hotel_hero .title .hotelname.hotelname-long   { font-size: clamp(38px, 4.6vw, 80px); line-height: 0.98; max-width: 18ch; }


.hotel_hero .title .location {
  margin: 18px 0 0;
  font-family: worksans;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}






/* mobile: drop the wide crop, go taller, center the title low */
@media (max-width: 699px) {
  .hotel_hero {
    aspect-ratio: 3 / 4;   /* or set a height, e.g. min-height: 88vh */
    max-height: none;
  }
	
	
.hotel_hero header .logo img {
	height: 24px; 
}
	
	
.hotel_hero .title .hotelname {
  text-align: center;
}
	
.hotel_hero .title-band .title { text-align: center; }
.hotel_hero .title .hotelname.name-short  { font-size: clamp(46px, 15vw, 80px); }
.hotel_hero .title .hotelname.name-medium { font-size: clamp(40px, 12vw, 68px); }
.hotel_hero .title .hotelname.name-long   { font-size: clamp(34px, 9vw, 56px); max-width: none; }
	
.hotel_hero .title .location {
  margin: 16px 0 0;
  font-family: var(worksans, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 1.3px;
}
	
	
	
}

















header nav{
	text-align: center;
	display: block;
	margin-top: 10px;
	display: none;
}


header nav a, header nav a:visited, header nav a:hover, header nav a:active{
	font: 400 15px/1.4 'Engravers', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
    margin: 0 13px 0 0;
    text-decoration: none;    
	color: #383838;

    margin: 0 10px 0 0;	
	font: 300 16px/1.4 'plantin', sans-serif;
	text-transform: none;
	letter-spacing: 0;

}

header nav a:last-of-type{
    margin-right: 0;
}


@media (max-width : 699px){
header nav a, header nav a:visited, header nav a:hover, header nav a:active{
	font: 400 10px/12px 'Lausanne', sans-serif;	
	letter-spacing: 0.5px;
    margin: 0 5px 0 0;
}
}

/* ------------------------------------------------- MAIN */

main{
} 


/* -------------------------------------------------    */



.hero {
	width: 100%;
	aspect-ratio: 16 / 9;
	aspect-ratio: 3 / 1;
	aspect-ratio: 2.75 / 1;
	aspect-ratio: 3 / 1;
	aspect-ratio: 2.75 / 1;
	aspect-ratio: 2 / 1;
	aspect-ratio: 2.5 / 1;
	min-height: 400px;
	ax-height: min(calc(100vh - 40px), 698px);
	overflow: hidden;
	position: relative;
	isplay: flex;
	lign-items: center;
	ustify-content: center;
	background: #333;
	
	margin: 0 auto;
	ax-width: 1440px;
	ax-width: 1128px;
	ax-width: 1220px;
	aspect-ratio: 3 / 1;
	aspect-ratio: 2 / 1;
	aspect-ratio: 2.5 / 1;
	aspect-ratio: 2.5 / 1;
	aspect-ratio: 21 / 9;
	ax-height: min(calc(100vh - 40px), 600px);
	ax-height: 700px;
	ax-height: 620px;
	
}

	@media (max-width : 566px){
	.hero {
	width: 100%;
	max-height: none;
	aspect-ratio: 4 / 5;
	}
	}



.hero header{
	width: 100%;
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: none;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
	padding: 30px 0;
	order: 1px solid red;
}

.hero header nav{
	display: none;
}

.hero header .logo a{
	display: block;
	text-indent: -99999px;
	height: 100%; width: 100%;
	background:  url("images/logo/thehotellover.webp") no-repeat center center / contain;
	background:  url("images/logo/thl_logo_white.webp") no-repeat center center / contain;
}


.hero video,
.hero picture,
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}


.hero .title {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0);
	text-align: center;
	color: #fff;
	z-index: 1;
	width: calc(100% - 40px);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
	width: 100%;
	max-width: 1200px;
	max-width: none;
	margin: 0;
	order: 1px solid red;
	padding: 0 0 24px;
	padding: 120px 48px 32px;
}


.hero .title p.type {
	text-align: center;
	text-wrap: balance;
	text-transform: lowercase;
	letter-spacing: 0px;
	font: 500 14px/1 'Sackers', sans-serif;
	margin: 0 0 10px 0;
	border: 1px solid #fff;
	border-radius: 15px;
	display: inline-block;
	padding: 5px 12px 5px 12px;

}


.hero .title h1 {
	margin: 0 auto 6px 0;
	ext-shadow: 0 0 45px #000;	
	font: 300 48px/1.1 'plantin', sans-serif;	
	font: 400 48px/1.1 'SangBleuRepublic', sans-serif;
	font: 400 42px/1.1 'SangBleuRepublic', sans-serif;
	font: 500 42px/1.1 'PlayfairDisplay', sans-serif;
	font: 400 48px/1.1 'plantin', sans-serif;	
	
	font:  400 44px/1.1 'Nantes', sans-serif;
	font:  300 48px/1.1 'ogg-text', sans-serif;
	font:  400 52px/1.1 'ogg-text', sans-serif;

	ont: 400 56px/1.0 'worksans', sans-serif;
	ext-transform: uppercase;
	etter-spacing: -1.5px;
}


.hero .title p.location{
	font: 600 12px/1.1 'europa', sans-serif;	
	margin: 10px 0 0;
	text-align: center;
	text-wrap: balance;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-shadow: 0 0 20px #000;
	
		font: 600 15px/1.5 'Engravers', sans-serif;

		font: 300 16px/1.3 'Engravers', sans-serif;

	margin: 0px 0 0;


	font: 200 14px/1.3 'sackers', sans-serif;
	text-transform: lowercase;
	letter-spacing: 0px;


	ont: 300  italic 18px/1.1 'plantin', sans-serif;	
	text-transform: none;
	font: 400 15px/1.3 'worksans', sans-serif;
	margin: 10px 0 0;
	
	
	font: 400 14px/1.3 'worksans', sans-serif;
	
	
	background:  url("images/icons/location_white.webp") no-repeat center left / 14px;
	padding-left: 20px;
	
	display: inline-block;
	

}



@media (max-width : 699px){


.hero  .title h1 {
	font: 300 38px/1.1 'plantin', sans-serif;	
}


.hero .title p.location{
		font: 300 14px/1.2 'Engravers', sans-serif;

}
}








.hero .title_dest {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, 50%);
	text-align: center;
	color: #fff;
	z-index: 1;
	width: calc(100% - 80px);
	background: none;
	width: calc(100% - 80px);
	max-width: 1200px;
	mx-width: none;
	margin: 0;
	border: 1px solid red;
	padding: 0 0 24px;
	padding: 120px 0;
}

.hero .title_dest img{
	width: 100%;
	display: block;
	border: 1px solid green;
}


.hero .dest_title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: calc(100% - 80px);
  max-width: 1200px;
	filter: brightness(100%);
}


.dest-hero picture{
	filter: brightness(90%);

}

@media (max-width : 699px){
.dest-hero{
	min-height: 1px;
	height: 300px;
}




}




/* ===== HOTEL INTRO ===== */


/* ===== WRAPPER: copy and author left, facts right ===== */

.intro {
	margin: 80px auto;
	width: calc(100% - 80px);
	max-width: var(--max-wide);
	display: grid;
	grid-template-columns: 1.9fr 1.1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"copy   facts"
		"author facts";
	column-gap: clamp(60px, 6vw, 100px);
	align-items: start;
}

/* no facts: single column */
.intro.intro-no-facts {
	display: block;
}

@media (max-width: 699px) {
	.intro {
		display: block;
		width: calc(100% - (var(--margin-outside-mobile) * 2));
		margin: 40px var(--margin-outside-mobile);
	}
}


/* ===== LEFT: intro copy ===== */

.intro_l {
	grid-area: copy;
	max-width: 720px;
}

.intro_l h2.intro-headline {
	margin: 0 0 30px;
	max-width: 24ch;
	font-family: var(--display, Alpina, Georgia, serif);
	font-size: 44px;
	font-weight: 300;
	letter-spacing: -2px;
	line-height: 1.05;
	text-align: left;
	text-wrap: balance;
}

@media (max-width: 699px) {
	.intro_l h2.intro-headline {
		max-width: none;
		padding-right: 10px;
		font-size: 34px;
		letter-spacing: -1.5px;
		line-height: 1.06;
	}
}

.intro_l p {
	margin: 0 0 1.2em;
}

.intro_l p:last-child {
	margin-bottom: 0;
}


/* ===== RIGHT: facts, a line beneath each fact ===== */

.intro-facts {
	grid-area: facts;
}

@media (max-width: 699px) {
	.intro-facts {
		margin-top: 32px;
	}
}

.intro-facts .facts-label {
	margin: 0 0 8px;
	font-family: worksans;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	user-select: none;
}

.intro-facts .facts {
	list-style: none;
	margin: 0;
	padding: 0;
	user-select: none;
}

.intro-facts .facts li {
	padding: 11px 0;
	border-bottom: 1px solid #E3DED2;
	font-family: worksans;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	word-spacing: -1.5px;
	color: #3f3c34;
	text-wrap: balance;
}

.intro-facts .facts li:last-child {
	border-bottom: none;
}


/* ===== AUTHOR: under the copy on desktop, under the facts on mobile ===== */

.intro .hotel-intro-author {
	grid-area: author;
	display: flex;
	align-items: center;
	margin: 40px auto 0 0;
	width: calc(100% - 48px);
	max-width: 460px;
	user-select: none;
}

.intro .hotel-intro-author .image {
	flex: 0 0 60px;
	margin: 0 24px 0 0;
}

.intro .hotel-intro-author .image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border: 1px solid #D1C9C0;
	border-radius: 50%;
}

.intro .hotel-intro-author p {
	margin: 0;
	font: italic 400 18px/1.4 'alpina', Georgia, serif;
	color: #89847A;
	text-wrap: balance;
}

@media (max-width: 699px) {
	.intro .hotel-intro-author p {
		font: italic 300 15px/1.3 'alpina', Georgia, serif;
	}
}






/* -------------------------------------------------  HOTEL MEDIA ESTABLISHER */


.hotel_media_establisher{
	width: min(calc(100% - 2 * var(--side)), var(--max-super));  
	margin: 0 auto;
	max-width: 1440px;
	max-width: 1120px;
	max-width: 1152px;
	max-width: var(--max-wide);
   }

.hotel_media_establisher picture{
	display: block;
      margin: 0;
 	width: 100%;
   }

.hotel_media_establisher video{
      aspect-ratio: 16 / 9;
	display: block;
      margin: 0;
 	width: 100%;
   }


    .hotel_media_establisher img {
      aspect-ratio: 16 / 9;
	width: 100%;
    }
    



@media (max-width: 1300px) {
	.hotel_media_establisher {
		
		max-width: 1120px;
	}
}




@media (max-width : 699px){

	.hotel_media_establisher {
      width: 100%;  
      margin: 0 auto;
      spect-ratio: 4 / 3;
    }

    .hotel_media_establisher img {
      aspect-ratio: 4 / 3;

    }
	
	
}




.establisher-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  font: 600 11px/1.2 'worksans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A6448;
}

.establisher-meta .place {
  order: 1;
}

.establisher-meta::before {
  content: "";
  order: 2;
  flex: 1;
  border-top: 1px solid #DDD7CE;
}

.establisher-meta .coords {
  order: 3;
  white-space: nowrap;
}


@media (max-width: 699px) {
  .establisher-meta { display: none; }
}


/* -------------------------------------------------  HOTEL REVIEW */


.hotel_review {
	margin: 0 auto;
	adding: 0 var(--side);
	} 


.hotel_review {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--side);
  box-sizing: content-box; /* --side padding sits outside --max-wide */
}





.hotel_review h2.h2-review {
	display: none;
	}
 


.hotel_review .review-chapter {
	ax-width: var(--max-copy);
	margin: 0 auto;
	adding: clamp(100px, 12vw, 120px) var(--side);
	padding: clamp(100px, 12vw, 120px) 0;
	padding: clamp(80px, 12vw, 120px) 0;
	padding: clamp(80px, 12vw, 120px) 0;
	padding: 80px 0;
	padding:  0;
	margin: 120px auto;
	}

.hotel_review .review-chapter {
  grid-column: 3 / 11;
  margin: 120px 0;
}



.hotel_review .review-chapter:last-of-type {
	padding-bottom: 40px;
	border-bottom: 1px solid #EDE8DE;
	}

.review-label {
	margin: 0 0 18px;
	font: 600 11px/1.2 'worksans', sans-serif;	
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #7A6448;		
	}




@media (max-width : 699px){

	
	.hotel_review {
  display: block;
	}

	
	
	.hotel_review .review-chapter {
		margin: 50px var(--margin-outside-mobile);
		width: calc(100% - (var(--margin-outside-mobile)*2));
		padding: 0;
	}
	
}






    .review-copy {
      order-bottom: 1px solid #E3DFD7;
    }
    
    .review-copy > *:last-child { margin-bottom: 0; }

.review-copy h3.review-headline {
      margin: 0 0 36px;
    margin: 0 0 36px;
     font-size: clamp(38px, 4.8vw, 60px);
      font-size: clamp(38px, 4.8vw, 50px);
      font-size: clamp(38px, 4.8vw, 42px);
      font-size: clamp(38px, 4.8vw, 48px);
      font-weight: 300;
      line-height: 1.04;
	font-family: Alpina;
	letter-spacing: -2px;
	text-wrap: balance;
	font-style: normal;
	width: 70%;
	}
    
    

@media (max-width : 699px){
	
    .review-label {
      margin: 0 0 10px;
      font-size: 10px;
      letter-spacing: 1.4px;
    }	
	
    .review-copy h3.review-headline  {
    font-size: 34px;
    font-size: 32px;
	letter-spacing: -1px;
    margin: 0 0 18px;
	width: 90%;
		
}	
	
}	
    


.hotel_review .review-chapter:first-of-type .review-body p:first-of-type::first-letter {
	font-size: 64px;
	line-height: 0.8;
	float: left;
	margin-right: 7px;
	margin-top: 6px;
	font-family: Alpina;
	font-weight: 200;
}





.review-copy h4 {
	font-family: Plantin;
    font-size: 22px;
	font-weight: 600;
    margin-bottom: 2px;
	word-spacing: -2px;
	}
    

h4+p {
    margin-top: 8px;
	}





.review-copy blockquote {
	width: 80%;
	margin: 0 auto;
	padding: 30px;
	}
    
.review-copy blockquote p {
	font-family: "Alpina";
    font-size: 36px;
	line-height: 1.1;
	font-weight: 300;
	text-align: center;
	text-wrap: balance;
	margin: 0;
	padding: 40px 0;
	}
    

.review-copy blockquote::before,
.review-copy blockquote::after {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  background-color: #E3DED2;
  margin: 0 auto;
	background-color: #2B2A28;
  opacity: 0.35;
	
}


	@media (max-width : 699px){

	.review-copy blockquote {
		padding: 20px 0;
		width: 90%;
		margin: 0 auto;
		}
    
	.review-copy blockquote p {
    font-size: 26px;
	line-height: 1.1;
	text-align: center;
	text-wrap: balance;
	margin: 0;
	padding: 30px 0;
	}
    
		.review-copy blockquote::before,
		.review-copy blockquote::after {
		width: 100px;
		}

	}







    
.hotel_review .review-media {
	margin: 0 auto;
	grid-column: 1 / -1;
}
 
	
    } 
    
.hotel_review .review-media img{
	width: 100%;
    } 
    

.hotel_review .media-landscape {
	width: 100%;
	}


.hotel_review .media-landscape figure {
      margin: 0;
	width: 100%;
	aspect-ratio: 3 / 2;
   }



.hotel_review .media-landscape img {
	width: 100%;
	aspect-ratio: 3 / 2;
	}



.hotel_review .review-media.image-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
	}


  
.hotel_review .image-pair img{
	aspect-ratio: 3 / 4;
	}
  

.hotel_review .image-pair.asym_l{
	grid-template-columns: 1.25fr 1fr;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	}

.hotel_review .image-pair.asym_r{
	grid-template-columns: 1fr 1.25fr;
	grid-template-columns: 1fr 1.2fr;
	gap: 60px;
	}

.image-pair figure {
      margin: 0;
 		width: 100%;
   }









	@media (max-width: 699px) {
	
		.hotel_review .review-media{
		width: 100%;
		margin: 0;	
		}
	
	.hotel_review .review-media.image-pair {
		isplay: block;
		width: calc(100% - (var(--margin-outside-mobile)*2));
		margin: 0px var(--margin-outside-mobile);
		
		width: 100%;
		margin: 0 0;
	grid-template-columns: 1fr 1fr;
		gap: 8px;
		
		}	
	
.hotel_review .image-pair figure {
	margin: 0 auto;	
	width: 100%;
	display: block;
    }

	.hotel_review .image-pair figcaption {
	font-size: 13px;
	margin-top: 5px;
		
    display: none;
    }



	
	
	
	
	
	hotel_review .image-pair figure:nth-child(1) {
	margin-left: 0;	
	margin-right: auto;	
	margin-bottom: 25px;
    }
	
	hotel_review .image-pair figure:nth-child(2) {
	margin-right: 0;	
	margin-left: auto;	
    }

	.hotel_review .image-pair figure:nth-child(1) {
	margin: 0;
	idth: 75%;	
	width: 100%;	
    }
	
	.hotel_review .image-pair figure:nth-child(2) {
	margin: 0;
	width: 100%;	
	idth: 75%;	
    }
	
}


.review-video{
      width: min(calc(100% - 2 * var(--side)), var(--max-wide));
      margin: 0 auto;
}


.review-video video{
      width: 100%;
      display: block;
    }



	@media (max-width: 699px) {

		.review-video{
		width: 100%;
		margin: 0 auto;
		}
	}




p.review_disclaimer{
  margin: 80px auto;
	font-style: italic;
	ax-width: var(--max-copy);
	padding-bottom: 30px;
	border-bottom: 1px solid #EDE8DE;	
	font-size: 16px;
  grid-column: 3 / 11;

}



/* ----------------------------------------------- HOTEL CAROUSEL (NEW) 

.hotel_carousel {
  max-width: 1440px;
  max-width: 1152px;

	max-width: var(--max-wide);

  margin: 80px auto;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 28px;
}

.hotel-gallery-content h2{
	color: #7B7266;
	color: #E3DDD6;
	font-style: italic;
	text-transform: lowercase;
	font-weight: 300;
}


.carousel-intro h2 {
  margin: 0 0 12px;
	font-family: Alpina;
	font-size: 38px;
	font-weight: 300;
	letter-spacing: -1px;
}

.carousel-intro p {
  margin: 0;
}

.carousel-controls {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 20px;
}

.carousel-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #E3DED2 100%);
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-button {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #222;
  border-radius: 50%;
  background: transparent;
  color: #222;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.carousel-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-button svg {
  width: 18px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


@media (max-width: 699px) {

  .hotel_carousel {
    width: 100%;
    margin: 60px 0;
    padding: 0;
  }

  .carousel-controls {
    display: none;
  }

  .carousel-track {
    gap: 0;
  }

  .carousel-slide {
    flex: 0 0 66%;
   margin: 0 8px;
  }

}

*/



/* ----------------------------------------------- HOTEL CAROUSEL (NEW) */

/* The section runs full width. The header stays at --max-wide,
   the viewport starts at the left edge of --max-wide and runs to the
   right edge of the screen. */

.hotel_carousel {
  --gutter: 24px;
  --slide: 440px;   /* max slide width, matches the w_440 Cloudinary renders */
  --gap: 24px;
  --peek: 60px;     /* how much of the 4th slide stays visible */

  width: 100%;
  margin: 80px 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.carousel-header {
  width: min(100% - 2 * var(--gutter), var(--max-wide));
  margin: 0 auto 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.hotel-gallery-content h2 {
  color: #E3DDD6;
  font-style: italic;
  text-transform: lowercase;
  font-weight: 300;
}

.carousel-intro h2 {
  margin: 0 0 12px;
  font-family: Alpina;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -1px;
}

.carousel-intro p {
  margin: 0;
}

.carousel-controls {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Starts at the left edge of --max-wide (clips there),
   ends at the screen edge */
.carousel-viewport {
  overflow: hidden;
  margin-left: max(var(--gutter), calc((100% - var(--max-wide)) / 2));
}

.carousel-track {
  display: flex;
  gap: var(--gap);
}

.carousel-slide {
  /* 440px when there is room; otherwise shrinks so three slides
     plus the peek always fit in the viewport */
  flex: 0 0 min(var(--slide), calc((100% - 3 * var(--gap) - var(--peek)) / 3));
  min-width: 0;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #E3DED2 100%);
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-button {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #222;
  border-radius: 50%;
  background: transparent;
  color: #222;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.carousel-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-button svg {
  width: 18px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tablet range: two full slides plus part of the third */
@media (min-width: 700px) and (max-width: 1000px) {
  .hotel_carousel {
    --peek: 80px;
  }

  .carousel-slide {
    flex: 0 0 calc((100% - 2 * var(--gap) - var(--peek)) / 2);
  }
}

@media (max-width: 699px) {

  .hotel_carousel {
    margin: 60px 0;
  }

  .carousel-controls {
    display: none;
  }

  .carousel-viewport {
    margin-left: 0;
  }

  .carousel-track {
    gap: 0;
  }

  .carousel-slide {
    flex: 0 0 66%;
    margin: 0 8px;
  }

}





/* ----------------------------------------------- HOTEL PLANNING */


.hotel_planning {
	padding: clamp(64px, 8vw, 110px) var(--side);
	background: #e3ded2;
	color: #554f46;
    }

    .practical-inner {
      width: min(100%, var(--max-wide));
      margin: 0 auto;
    }

.hotel_planning h2 {
	margin: 0;
      font-family: Alpina, Georgia, "Times New Roman", serif;
      font-size: clamp(40px, 5vw, 62px);
      font-size: clamp(40px, 5vw, 56px);
	  font-size: 46px;
      font-weight: 300;
      letter-spacing: -2px;
      line-height: 1;
	color: #443f38;
    }


.hotel_planning .label {
	margin: 0 0 14px;
	font: 600 11px/1.2 'worksans', sans-serif;	
	letter-spacing: 2px;
	text-transform: uppercase;
	}




	@media (max-width : 699px){
		.hotel_planning h2 {
		font-size: 34px;
		letter-spacing: -1.5px;
		font-weight: 400;
		}
	}	
	
	


    .accordion {
      width: min(100%, var(--max-copy));
      margin-top: 70px;
      counter-reset: planning-item;
      border-top: 1px solid rgba(68, 63, 56, 0.17);
    }

    .accordion details {
      counter-increment: planning-item;
      border-bottom: 1px solid rgba(68, 63, 56, 0.17);
    }

    .accordion summary {
      list-style:none;
      position:relative;
      padding:24px 54px 24px 0;
    padding:20px 54px 20px 0;
     cursor:pointer;
      font-family: Plantin, Georgia, "Times New Roman", serif;
      font-size: clamp(24px,2.1vw,24px);
      font-size: clamp(18px,2.1vw,22px);
      font-weight: 400;
      letter-spacing: -0.2px;
      line-height:1.2;
      color:#443f38;
      user-select: none; cursor: pointer
    }

    .accordion summary::-webkit-details-marker { display: none; }

    .accordion summary::after {
      content: "+";
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 22px;
      font-weight: 300;
    }

    .accordion details[open] summary::after { content: "−"; }

    .accordion-content {
      max-width: var(--max-copy);
      padding:0 54px 36px 0;
      font-family: Plantin, Alpina, Georgia, "Times New Roman", serif;
      font-size: 20px;
      line-height:1.5;
      color:#5b554d;
    }


@media (max-width : 699px){
	
	
		.accordion {
		margin-top: 50px;
		}
		
    .accordion-content {
      padding:0 0 24px 0;
    }
}	
	
	
    .accordion-content p{
      font-family: "worksans", Alpina, Georgia, "Times New Roman", serif;
       font-size: 17px;
       font-size: 15px;
		font-weight: 400;
   }


@media (max-width : 699px){
    .accordion-content p{
      font-family: "worksans", Alpina, Georgia, "Times New Roman", serif;
       font-size: 14px;
      line-height:1.45;		
		font-weight: 400;
   }
}	
	
	



    .accordion-content p:last-child { margin-bottom: 0; }

    .map-link {
      display: inline-block;
      margin-top: 4px;
      padding-bottom: 3px;
      border-bottom: 1px solid currentColor;
      font-family: worksans, Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }












    .official-link {
      display: inline-block;
      padding-bottom: 4px;
      border-bottom: 1px solid currentColor;
      font-family: worksans, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    
    
    
    


.hotel-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border: 1px solid currentColor;
  font-family: worksans;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: background-color 180ms ease;
	margin-top: 30px;
}
.hotel-link:hover { background: rgba(40,40,35,0.06); }
.external-icon { flex-shrink: 0; }





/* ----------------------------------------------- RELATED */




.section-related{
	background: #ECE9E3;
	dsplay: none;
	padding: 80px 0;
	display: none;
}

.related{
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 1200px;
	max-width: 1224px;
	text-align: left;
}

.related h2{
	text-align: left;
	margin: 0;
	font: 200 28px/1.2 'ivypresto-display', serif;
	font:  300 42px/1.1 'ivypresto-display', serif;	
	font:  300 28px/1.1 'ogg-text', serif;	
	letter-spacing: 0;
}


.relatedhotels{
	margin: 40px auto 0;
}



.relatedhotels{
	display: flex;
	flex-direction: row;
	align-items: start;
	gap: 0 24px;
}



.related_hotel{
	width: 25%;
	position: relative;
	margin: 0;
}


.related_hotel a{
	color: #fff;
	text-decoration:none;
}

.related_hotel a img{
	filter: brightness(90%);
	transition: 0.4s ease-in;
}

.related_hotel a:hover img{
	filter: brightness(105%);
}

.related_hotel p.related_hotel_text{
	margin: 0;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	padding: 80px 20px 20px 20px;
	color: #fff;
	text-shadow: 0 0 12px #000;	
	color: #fff;
	text-align: center;
	hyphens: none;
}

.related_hotel p.related_hotel_text .related_hotel_hotelname{
		font: 200 24px/1.05 'argent-cf', serif;	
		ont: 300 22px/1.05 'ivymode', serif;
		font: 400 24px/1.05 'PlayfairDisplay', serif;
		font: 300 24px/1.05 'ivypresto-display', serif;
		font:  300 26px/1.1 'ogg-text', serif;	
		margin: 0 0 4px;
		display: block;
}

.related_hotel p.related_hotel_text .related_hotel_location{
		display: block;
		font: 400 12px/1.2 'worksans', serif;
}



	@media (min-width: 700px) and (max-width: 1099px){
	.relatedhotels{
	gap: 10px;}
	
	.related_hotel{
	width: 33.3333%;
	}

	.related_hotel:last-of-type{
	display: none;
	}
		
	.related_hotel p.related_hotel_text .related_hotel_hotelname{
	font-size: 20px;}
	}



@media (max-width : 699px){

.section-related{
	padding: 60px 0;
}

.section-related h2{
	font: 200 26px/1.2 'argent-cf', serif;	
	font: 600 26px/1.2 'PlayfairDisplay', serif;
}


.section-related .relatedhotels{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}


.section-related .related_hotel{
	width: calc(50% - 10px);
}


.related_hotel a img{
	filter: brightness(100%);
}

.related_hotel p.related_hotel_text .related_hotel_hotelname{
	font: 200 20px/1.05 'argent-cf', serif;	
	font: 400 18px/1.05 'PlayfairDisplay', serif;
}

.related_hotel p.related_hotel_text .related_hotel_location{
		font: 300 12px/1.1 'europa', serif;
}


}










.infobox{
	background: #EDE8E3;

	margin: 48px 0;
	padding: 48px;
	

}

.infobox p{
	font: 400 15px/1.5 'worksans', serif;

}

.infobox p strong{
	font-weight: 500;
}
















/* ----------------------------------------------- FOOTER */


    .footer {
      padding: 48px var(--side);
      background: var(--ink);
      color: var(--paper);
    }


@media (max-width : 699px){
.footer {
display: none;
    }
 }	
	
	


    .footer-inner {
      width: min(100%, var(--max-wide));
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 30px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

 
 
 


    .footer {
      padding: clamp(90px, 11vw, 150px) var(--side) 46px;
      background: var(--ink);
      color: var(--paper);
    }

    .footer-main {
      width: min(100%, var(--max-super));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.6fr) minmax(160px, 0.6fr);
      gap: clamp(48px, 8vw, 120px);
      padding-bottom: clamp(72px, 9vw, 120px);
    }

    .footer-brand {
      margin: 0 0 28px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: clamp(22px, 2.1vw, 32px);
      font-weight: 600;
      letter-spacing: 0.16em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .footer-statement {
      max-width: 680px;
      margin: 0;
      font-size: clamp(34px, 4.6vw, 66px);
      letter-spacing: -0.04em;
      line-height: 1.04;
    }

    .footer-column h3 {
      margin: 0 0 20px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      opacity: 0.58;
    }

    .footer-links {
      display: grid;
      gap: 11px;
    }

    .footer-links a {
      width: fit-content;
      font-size: 18px;
      line-height: 1.35;
    }

    .footer-links a:hover {
      text-decoration: underline;
      text-underline-offset: 5px;
      text-decoration-thickness: 1px;
    }

    .footer-bottom {
      width: min(100%, var(--max-super));
      margin: 0 auto;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.22);
      display: flex;
      justify-content: space-between;
      gap: 30px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      letter-spacing: 0.12em;
      line-height: 1.5;
      text-transform: uppercase;
      opacity: 0.68;
    }













  .rail{
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 30;
  }
  .rail a{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
    border: 1px solid var(--line);
    display: block;
    position: relative;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .rail a.active{
    background: var(--lake);
    border-color: var(--lake);
    transform: scale(1.3);
  }
  .rail a .tip{
    position:absolute;
    left: 22px; top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family:'Work Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .rail a:hover .tip{ opacity: 1; }
  @media (max-width: 1150px){ .rail{ display:none; } }