/*** css rabten.eu — ported verbatim from the original site, fonts modernised to woff2 ***/

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/montserrat-v14-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/montserrat-v14-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/montserrat-v14-latin_latin-ext-600.woff2') format('woff2');
}

a:link, a:visited { text-decoration: none; }
a:hover { 
	text-decoration: underline; 
	cursor: pointer; 
	font-weight:bold; 
}
a:link img, a:visited img {	/* Bug bei verschiedenen Browsern ...*/  
	color: black; 
	border-style: none; 
}

#title { 
	padding: 0px 15px 0px 15px; 
	color: white;
	text-align: center;
	z-index: 998;
	/* The full-size original, byte-identical to the one the main site serves
	   from /css/logo-cloud.png. The 900px derivatives were 40x lighter but
	   the banner is 20em tall and full-bleed, so on any desktop window they
	   were upscaled ~1.7x and the ridge came out visibly washed out next to
	   rabten.eu. Match the main site; keep the two files in step. */
	background-image: url('../assets/logo-cloud.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	height: 20em;
}


#title h4 { 
	 display: inline-block;
}

#title img {
	width: 180px;
}

#payCode { 
	padding: 10px 15px 10px 15px; 
	text-align: center;
}



 /*@ special ***/

#logoBackgroundSpecial {
/*	height: 400px;*/
	text-align: center;
	position: relative;
}

#contentSpecial { 
	position: absolute; 
	top: 390px; left: 10px; bottom: 0px; 
	text-align: center;
}

#contentSpecialHead td { 
	padding: 0px 5px 0px;
	text-align: center;
}

#gallerySpecial { 
	position: relative;
}

#gallerySpecialBlock {
	height: auto;
	width: auto;
	float: left;
}

#gallerySpecial img {
	padding: 1px;
}

/*** @ gallery ***/

#galleryContent { 
	text-align: center;
	width: 100%;
	position: absolute; 
	padding-top: 20px;
}

.galleryBlock {
	height: auto;
	width: auto;
	float: left;
	margin: 2px;
}

/*** @ itemGallery ***/

#itemGallery { 
	left: 245px; 
	text-align: left;
	width: 100%;
}

#itemGallery h4 { 
	text-align: right;
	width: 60%;
	margin-left: 20px;
	padding: 20px 12px 1px 20px;	

}

#itemGalleryBlock button {
	margin-top: 20px;
}

#itemGallery img {
	width: 80px;
	height: auto;		/* let the width/height attributes only reserve space */
	float: left;
	margin-right: 15px;
	border: 1px solid rgb(236,105,30);
	padding: 2px;
}

#itemGallery a:hover img {
	border: 3px solid rgb(236,105,30);
	padding: 0;
}

#itemGallery a:hover { 
/*	text-decoration: none; */
/*	cursor: pointer;*/
	color: rgb(236,105,30);
	font-weight:normal; 
}


#itemGallery a:link { 
/*	cursor: pointer;*/
/*	color: rgb(0,90,135);*/
}

#itemDesc {
	font-size: 110%;
	margin-top: 5px;
	color: rgb(236,105,30);
}

.itemGalleryBlock {
	height: auto;
	width: 310px;
	float: left;
	margin: 10px 15px 15px 5px;
}

.itemGalleryBlockCourse {
	margin: 10px 15px 5px 5px;
/*	border-bottom: 1px solid rgb(236,105,30);*/
}

.itemGalleryBlockCourse td {
	padding: 1px 12px 1px 2px;	
}

.itemGalleryBlockCourse img {
	width: 40px;
	float: left;
	margin-right: 15px;
	border: 1px solid rgb(236,105,30);
	padding: 2px;
	margin-bottom: 4px;
}



/*** @ gate ***/

.countryActive {
	font-weight: bold;
}

#gateContent { 
	width: 100%;
	clear: both;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.gateBlock {
	height: auto;
	width: auto;
	
	text-align: center;
	float: unset;
	margin: 20px auto 8px;
	width: 280px;   
	display: inline-block;
}

.gateLink {
	border: solid 1px rgb(221,227,230);
	border-radius: 150px;
	background-color: white;
	width: 40%;
	margin: 16px 10px 0px 10px;
	display: inline-block;
}

.gateLink a {
	color: rgb(63,84,95);
	font-size: 100%;
	line-height: 1.3;	/* was 50% — any label wrapping to two lines printed them on top of each other */
}

.gateLinkSlim {
	border: solid 1px rgb(221,227,230);
	border-radius: 150px;
	background-color: white;
	width: 28%;
	margin: 12px 5px 0px 5px;
	display: inline-block;
}

.gateLinkSlim a {
	color: rgb(63,84,95);
	font-size: 100%;
	line-height: 1.3;	/* was 35% — any label wrapping to two lines printed them on top of each other */
}

.gateLinkWide {
	border: solid 1px rgb(221,227,230);
	border-radius: 150px;
	background-color: white;
	width: 40%;
	margin: 16px 10px 0px 10px;
	display: inline-block;
}

.gateLinkWide a {
	color: rgb(63,84,95);
	font-size: 100%;
	line-height: 1.3;	/* was 50% — any label wrapping to two lines printed them on top of each other */
}



/*** @copyright ***/

.addr {	
	clear: both;
	font-size: 85%; 
	font-weight: normal;
	margin: 60px 20px 5px 5px;
	color: gray;
	border-bottom: 1px solid white;
	padding-top: 30px;
	padding-bottom: 15px;
  	text-align: center;
}


/*** @elements ***/

body 
{
	text-align: justify;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: rgb(0,90,135);
	
	line-height: 1.5em;
	margin:  0px;
}


h1 { font-size: 200%; margin-top: 0em; margin-bottom: 1em; 
	 font-weight: normal;
 }
h2 { font-size: 150%; margin-top: 1.5em; }
h3 { font-size: 110%; margin-top: 1.5em; }
h4 { font-size: 130%; margin-top: 1.5em; 
	 margin-bottom: 0.5em; 
	 font-weight:normal;
	 display: inline-block;
}

h6 { font-size: 115%; 
	 margin-top: 1.5em; 
	 margin-bottom: 0.5em; 
	 font-weight:normal;
	 font-style: italic;
	 color: rgb(236,105,30);
}

p.quote  { margin-bottom: 0; text-indent: 20px; }
p.verse  { margin: 10px 0 0 0; font-weight: bold; text-indent: 0}




/*** @content ***/

#content {
	position: static;
	float: none;
	width: auto;
	max-width: 1180px;
	margin: 24px auto 20px;
	padding: 0 24px;
	box-sizing: border-box;
}

#content h3 {
	margin-bottom: 5px; 
}
#content h2 {
	margin-bottom: 10px; 
}

/*SAFARI coloring problem ******************/
#gateContent a, a:visited  { 
	color: rgb(60,60,60);
	/*color: blue; *//*rgb(236,105,30);*/ 
}
#content a, a:visited  { 
	color: rgb(236,105,30)
}


#contentTable {
	border-spacing: 0px; 
	border-collapse: collapse;	
	padding: 0px; 
	font-size: 14px; 
	margin-top: 5px;
	width: 100%;
}

#contentTable img {
	margin: 12px 10px 30px 20px;
/*	padding: 1px;
/*	border: 1px solid orange;*/
/*	rgb(0,90,135);*/
	background-color: white;
	display: block; 
}

#noBorder img {
	border: none;
}


/** food **/

.foodContent { 
	margin: 6px 55px 15px 10px;
	width: 80%;
	text-align: left; 
}



/** cart **/

#cartContent {
	color: rgb(0,90,135);
	width: 98%;
}

#cartReply {
	margin: 50px 50px 0px 5px;
}

#cartContent table, 
#cartContent th, 
#cartContent td {
	border: 1px solid; 
	border-collapse: collapse;
	padding: 1px 10px 1px 10px;
}

#cartContent a:hover {
	font-weight:bold;
	color: green; 	
}

#cartContent th#t1 { width: 35%; text-align: left; }

#cartContent a {
	font-weight:bold;
	color: rgb(220,2,2); /*rgb(236,105,30);*/
}

#cartContent th#t2 { width: 7%; text-align: right; }
#cartContent th#t3 { width: 7%; text-align: right; }
#cartContent th#t4 { width: 18%; font-style: italic; }

#cartContent td#t1 { text-align: left; }
#cartContent td#t2 { text-align: right; }
#cartContent td#t3 { text-align: right; }
#cartContent td#t9 { width: 18%; color: gray; }

#tb {
	text-align: right;
}

#cartCommand {
	text-align: right;
}

#cartCommand img {
	margin: 10px 0 10px 15px;
	padding: 2px;
	border: 2px solid rgb(128,0,0); /*rgb(236,105,30);*/
}


/** supportForm **/

#supportForm input
{
	color: rgb(0,90,135);
	padding: 3px;
	margin: 25px 10px 0px 0px;
	border: 2px solid;
	width: 8em;
	font-size: 150%;
}

#supportForm button
{
	color: rgb(0,90,135);
	background-color: white;
	margin: 0px 4px 0px 4px;
	border: none;
}

#supportForm button:hover {
	font-weight: bold;
	border: 1px solid;
}

#supportContent {
	margin: 0;
	color: rgb(0,90,135);
}

#supportReply {
	margin: 0 50px 0px 5px;
}

#supportContent table {
	width:  600px; 
	margin: 0;
}


#supportContent table, #supportContent th, #supportContent td
{
	border: 2px solid rgb(236,105,30); 
	border-collapse: collapse;
	padding: 1px 10px 1px 10px;
}

#supportContent a:link, #supportContent a:visited {
	font-weight: bold;
	font-style: italic;
	color: rgb(0,90,135);
}

#supportContent a:hover {
	font-weight: bold;
	color: green; 	
}

#supportContent table h1
{
	font-size: 220%;
	font-weight: bold;
	color: rgb(236,105,30);
	margin: 0;
}

#supportContent table h2
{
	font-size: 120%;
	font-weight: bold;
	margin-top: 6px;
}

#supportContent th#t1 { 
	width:  80%;
	line-height: normal;
	font-weight: normal;
	color: rgb(0,90,135);
	border-right-style: none;
}

#supportContent th#t2 { 
	font-size: 140%;
	text-align: right; 
/*	line-height: normal;*/
	border-left-style: none;
}

#supportContent td#t1 { 
	text-align: left; 
	border-right-style: none;
}

#supportContent td#t2 { 
	text-align: right; 
	border-left-style: none;
}



/**ccForm*/

#ccForm input
{
	color:  rgb(0,90,135);
	padding: 3px;
	margin: 2px 10px 2px 0px;
	border: 1px solid;
	width: 25em;
	font-size: 100%;
}

#ccForm #iCty
{
	margin: 10px 70px 10px 0;
	width: 25em;
}

#ccForm #iPmt
{
	margin: 10px 70px 10px 0;
	width: 25em;
}

#ccForm h5 	  { margin: 0;	}

#submit
{
	color: rgb(0,90,135);
	padding: 3px;
	background-color: white;
	border: 1px solid;
	width: 12em;
	font-size: 100%;
	font-weight: bold;
}
 
#submit:hover
{
	color: white;
	border-color: rgb(0,90,135);
	background: green; /*rgb(236,105,30);*/
}

#xcard 	 { display: none; }

#iTtlerr { display: none; }
#iNmeerr { display: none; }
#iEmlerr { display: none; }
#iTelerr { display: none; }
#iStrerr { display: none; }
#iZiperr { display: none; }
#iTwnerr { display: none; }
#iCmterr { display: none; }
#iSpcerr { display: none; }
#iCtyerr { display: none; }
#iPmterr { display: none; }
#iCrderr { display: none; }
#iExperr { display: none; }
#iSecerr { display: none; }
#iHlderr { display: none; }




#contentTable th.date    { width: 30%; padding-left: 10px; }
#contentTable th.seminar { width: 70%; }
#contentTable th.text    { padding-left: 10px; display: block; }
#contentTable th.picture { width: 250px; }

#contentTable td.seminar { padding-right: 30px; }


#contentTable td { 
	padding: 15px 5px 10px;
	vertical-align: top;
	border-bottom: 1px solid rgb(236,105,30);
	/*	border-top: 2px solid orange;*/
}
#contentHead td {
	padding: 0px 5px 0px;
	text-align: left;
}
#contentSubline td {			/*address*/
	color: 	rgb(236,105,30);
	border-bottom: none;
	padding: 0px 5px 0px;
}
#contentSubline h5 {			/*address*/
	font: 100% Verdana, sans-serif;
	margin: 5px 5px 1px 0px;
}

#contentTable h1 { 		/*content general title*/
	font-size: 150%; 
	margin-bottom: 1%;
	vertical-align: baseline;
	color: rgb(236,105,30);
}
#contentTable h2 { 		/*Date, content title*/
	font-size: 100%;
	font-weight: bold; 
	margin-top: 0px; 
	margin-bottom: 0px;
	text-align: left;
}
#contentTable h3 { 		/*event teacher, color corresp with content a*/
	font-size: 100%;
	font-weight: normal; 
	margin-top: 0px; 
	text-align: left;
}
#contentTable h4 { 		/*event title large*/
	font-size: 120%;
	font-weight: bold; 
	margin-top: 0px; 
	margin-bottom: 1px; 
	text-align: left;
	color: rgb(236,105,30); /*orange;*/	
}


#contentTable a { 
	display: block;	
	margin: 0px; 
	text-align: left; 
}
#contentTable p { 
	/*font-family: Arial, sans-serif;*/
	/*font-family: Avenir, sans-serif;*/
	margin: 0 0 0 0;
	padding: 8px 0px 8px 0px; 
	text-align: left; 
}

#contentTable ul {
	/*font-family: Arial, sans-serif;*/
	/*font-family: Avenir, sans-serif;*/
	text-align: left; 
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}


#contentText p {
	text-align: justify;
}

#contentText ul.bold {
	font-weight: bold;
/*	padding-left: 10px;*/
	text-align: left;
}

#contentText ul.plain {
	padding-left: 0px;
	margin-left: 0;
	font-weight: normal;
}

#contentText ul.center {
	padding-left: 0px;
	text-align: center;
}

#contentText ul.circle {
	list-style-type: circle;
	padding-left: 14px;
}

#contentText ul.disc {
	list-style-type: disc;
	padding-left: 14px;
}


#contentTextSmall p {
	font-size: 90%;
	font-weight: normal; 
	margin-top: 10px; 
	text-align: left;
}




#contentBook p {
	text-align: justify;
	padding: 1px 30px 1px 0px; 
}

#contentBook img {
	margin: 10px 10px 10px 10px;
/*	padding: 1px;*/
/*	border: 1px solid orange;*/
/*	rgb(0,90,135);*/
	background-color: white;
	display: block; 
}

#contentBook td {
	vertical-align: top;
}

#contentBook a { 		/*link*/
	font-size: 100%;
	font-weight: bold; 
 	/*font-style: italic;*/
	margin-top: 8px; 
	margin-bottom: 6px;
	text-align: left;
	color: rgb(236,105,30); /*orange;*/
}

#contentBook a:hover { 		/*title*/
	font-size: 100%;
	text-decoration: underline; 
	cursor: pointer; 
	font-weight:bold; 
}

#contentBook h2 { 		/*title*/
	font-size: 130%;
	font-weight: normal; 
 	font-style: italic;
	margin-top: 8px; 
	margin-bottom: 5px;
	text-align: left;
	color: rgb(0,90,135);	
	/*color: rgb(236,105,30); /*orange;*!/*/
}


#contentSubBook td {
	color: 	rgb(236,105,30);
	border-bottom: none;
	padding: 30px 5px 0px;
}

#contentSubBook h1 { 	
	font-size: 130%; 
 	font-style: italic;
	color: rgb(0,90,135);	
	/*color: rgb(236,105,30);*/
}


#langSelect { 
	text-align: center;
	z-index: 999;
	position: relative;
	top: 30px;
	display: block;
}

#langSelect a {
  color: rgb(100,100,100);
  float: center;
  padding-right: 8px;
  padding-left: 8px;
  font-size: 120%;
}

.floating-menu {
    font-family: sans-serif;
    background: transparent;
    width: 30px;
    z-index: 100;
    position: fixed;
    top: 5px;
    left: 3px;  
    color:  white;
    display: block;
}
  
.floating-menu a {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
}
	

/*.floating-menu 	{ display: none; }*/
/*.sidenav 		{ display: none; }*/
/*.gateLink       { display: none; }*/
/*#langSelect     { display: none; }*/

/*.hide-image {
  display: none;
  z-index: 100;
  position: absolute;
}

.preview:hover .hide-image {
min-width: 50%;
width: auto;
display: block
}*/



/****************************************************************************/
/**handheld******************************************************************/
@media  (max-width: 900px) {
/****************************************************************************/

h1 { font-size: 140%; line-height: 120%; 
	margin-top: 0em;
 }
h2 { font-size: 150%; margin-top: 1.5em; }
h3 { font-size: 110%; margin-top: 1.5em; }
h4 { font-size: 100%; 
	/*margin-top: 0em; */
	 margin-bottom: 0em; 
	 font-weight:normal;
	 /*border-bottom: 1px solid #333;*/
	 /*border-top: 1px solid #333;*/
	 padding-top: 3px;
	 padding-bottom: 3px;
	 display: inline-block;
	 /*font-weight:bold;*/
}

#title h1 { 
	font-size: 140%; 
	line-height: 120%; 
	 /*border-top: 1px solid #333;*/
	 display: inline-block;
	 padding-top: 2px;
	/*font-weight:bold; */
}


#contentTable {
	width: 100%;
}

#contentTable h1 {
	font-size: 120%; 
	font-weight:bold;
	text-align: left;	
}

#contentSubline h5 {			/*address*/
	font: 70% Verdana, sans-serif;
	text-align: left;	
}

#contentTable img {
	width:  140px;
	margin: 12px 10px 30px 8px;
}

/*#contentBook p {
	padding: 8px 10px 4px 0px; 
}*/

/*#galleryContent { 
	position:static;
	float: left;
}*/

#itemGallery { 
	position:static;
	margin: 10px 5px 15px 15px;
}

.itemGalleryBlock {
	/*height: auto;*/
	/*width: 310px;*/
	/*float: left;*/
	/*margin: 20px 15px 15px 5px;*/
}

.itemGalleryBlockCourse {	/*meditation-course, childrensweek*/
	margin: 5px 15px 5px 4px;
	/*border-bottom: 1px solid rgb(236,105,30);*/
}




} 
/**handheld********************************************************************/

/**handheld small ***********************************************************/
@media  (max-width: 700px) {
/****************************************************************************/

.gateLinkWide {
	width: 70%;
	margin: 15px 10px 0px 10px;
}

}
/**handheld small ************************************************************/

/* ---- shop -------------------------------------------------------- */

/* Language row (views/components/lang-filter): a plain row of codes echoing
   the home page's #langSelect, rather than a boxed control competing with the
   page title. Shared by the events filter and the book shop's catalogue
   switch, so keep it free of anything specific to either. */
.langFilter { margin: 1.7em auto 2em; padding: 0 16px; text-align: center; }

.langRow {
	display: inline-flex; flex-wrap: wrap; justify-content: center;
	gap: 2px 4px;
}
.langRow > * {
	display: inline-block; padding: 4px 13px 6px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px; line-height: 1.5;
	letter-spacing: .09em; text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}
/* the id only outranks the "#gateContent a" Safari colour rule further up; the
   font-weight/underline resets outrank the global bolding a:hover */
#gateContent .langRow a { color: rgb(120,120,120); font-weight: 400; text-decoration: none; }
/* same hover as the home gate buttons: the site teal, their .18s ease. If the
   gate accent ever moves again, this needs to move with it. */
#gateContent .langRow a:hover {
	color: rgb(0,90,135); border-bottom-color: rgba(0,90,135,.5);
	font-weight: 400; text-decoration: none;
}
.langRow .is-active {
	color: rgb(0,90,135); font-weight: 600;
	border-bottom-color: rgb(0,90,135); cursor: default;
}
/* the shop's row sits outside #gateContent, so it needs states of its own —
   :visited included, or the site's orange visited link leaks in. */
/* The centres page puts this row inside #content, whose "#content a" colour is
   an id selector and so outranks the class-only states below — the same orange
   leak the note above describes, one container further up. Repeating the
   selectors under #content is the narrowest fix that keeps books and centres
   rendering as one component. */
.langFilter .langRow a, .langFilter .langRow a:link, .langFilter .langRow a:visited,
#content .langFilter .langRow a, #content .langFilter .langRow a:link, #content .langFilter .langRow a:visited {
	color: rgb(120,120,120); font-weight: 400; text-decoration: none;
}
.langFilter .langRow a:hover, .langFilter .langRow a:focus-visible,
#content .langFilter .langRow a:hover, #content .langFilter .langRow a:focus-visible {
	color: rgb(0,90,135); border-bottom-color: rgba(0,90,135,.5);
	font-weight: 400; text-decoration: none;
}


/* the catalog reuses the original #itemGallery / #cartContent styling above;
   the rules below style only the single-product page and the cart page.      */
.shopProduct { display:flex; gap:2em; flex-wrap:wrap; align-items:flex-start; }
.shopProduct .shopCover { max-width:260px; height:auto; }
.shopProduct .shopInfo { flex:1; min-width:260px; }
.shopProduct .shopPrice { font-size:1.3em; color:#c8622a; font-weight:bold; }
.shopIsbn { color:#666; font-size:.9em; }
.cartTable { width:100%; max-width:520px; border-collapse:collapse; margin:1em 0; }
.cartTable td { padding:.4em .6em; border-bottom:1px solid #ddd; }
.cartTable .RHT { text-align:right; }
.cartTable .cartTotal td { border-top:2px solid #c8622a; border-bottom:none; }
.shopNote { color:#666; font-size:.9em; }
.btn { display:inline-block; background:#2f5d84; color:#fff; padding:.6em 1.2em; border:none; border-radius:6px; text-decoration:none; cursor:pointer; }
.btn.ghost { background:transparent; color:#2f5d84; border:1px solid #2f5d84; }
.checkoutForm label { display:block; margin:.5em 0; }
.checkoutForm input, .checkoutForm select { display:block; width:100%; max-width:360px; padding:.4em; }
.payMethods { display:flex; gap:1em; flex-wrap:wrap; margin-top:1em; }
.qrBill { max-width:300px; height:auto; border:1px solid #ddd; }

/* ---- events list ---------------------------------------------------- */
/* Scoped to .eventTable, NOT to #contentTable on its own: ~170 imported
   legacy page bodies reuse #contentTable / #contentHead / #contentSubline
   verbatim, and none of them have the two-column event markup these rules
   assume. Only views/events.php and views/location.php carry the class. */

#contentTable.eventTable, #contentTable.eventTable td { text-align: left; }
#contentTable.eventTable { font-size: 14.5px; }

#contentTable.eventTable td {
	padding: 26px 0 28px;
	border-bottom: 1px solid rgba(0,90,135,.14);	/* hairline, not a full orange bar */
}
#contentTable.eventTable th.date    { width: 33%; padding-left: 0; }
#contentTable.eventTable th.seminar { width: 67%; }
#contentTable.eventTable td.seminar { padding-left: 42px; padding-right: 0; }

/* the page title keeps the one orange rule, so it still opens the list */
#contentTable.eventTable #contentHead td { padding: 0 0 14px; border-bottom: 2px solid rgb(236,105,30); }
#contentTable.eventTable h1 { font-size: 30px; line-height: 1.2; margin: 0; }
#contentTable.eventTable #contentSubline td { padding: 14px 0 0; border-bottom: none; }

/* --- when / where ---------------------------------------------------- */
#contentTable.eventTable td h2 {				/* the date range */
	font-size: 15px; font-weight: 600; line-height: 1.35;
	color: rgb(0,90,135); margin: 0 0 3px;
}
#contentTable.eventTable td h3 {				/* the place */
	font-size: 12px; font-weight: 400; letter-spacing: .07em;
	text-transform: uppercase; margin: 0;
}
#contentTable.eventTable td h3 a { display: inline; }
#contentTable.eventTable ul {				/* the schedule lines */
	margin: 14px 0 0; padding: 0;
	color: rgba(0,90,135,.8); line-height: 1.75;
}

/* --- what ------------------------------------------------------------ */
#contentTable.eventTable td.seminar h2 {			/* the event title */
	font-size: 19px; font-weight: 600; line-height: 1.3;
	color: rgb(0,90,135); margin: 0 0 4px;
}
#contentTable.eventTable td.seminar h3 {			/* the teacher */
	font-size: 14px; font-weight: 400; letter-spacing: .01em;
	text-transform: none; color: rgb(236,105,30); margin: 0 0 14px;
}
#contentTable.eventTable td.seminar h3 b { font-weight: 500; }
/* descriptions arrive as a bare text node on some events and wrapped in <p> on
   others, so the gap has to hang off the paragraph that follows them; adjacent
   <p>s just collapse to the same 15px */
#contentTable.eventTable td.seminar p {
	max-width: 64em; line-height: 1.75; padding: 0; margin: 15px 0 0;
}
#contentTable.eventTable td.seminar a { display: inline; }	/* let the online link sit in its sentence */

/* --- registration ----------------------------------------------------- */
#contentTable.eventTable .reg-cta { margin: 18px 0 0; text-transform: none; letter-spacing: 0; }
#contentTable.eventTable .reg-cta a {
	display: inline-block; padding: 7px 20px; border-radius: 20px;
	background: rgb(236,105,30); color: #fff;
	font-size: 13px; letter-spacing: .02em; line-height: 1.4;
}
#contentTable.eventTable .reg-cta a b { font-weight: 600; }
#contentTable.eventTable .reg-cta a:hover { background: rgb(0,90,135); text-decoration: none; }
#contentTable.eventTable .reg-note {
	font-size: 12.5px; line-height: 1.6; color: rgba(0,90,135,.65);
	margin: 10px 0 0; padding: 0;
}

/* --- one column on a phone: the 33/67 split gets unreadable below ~700px */
@media (max-width: 700px) {
	#contentTable.eventTable, #contentTable.eventTable tbody, #contentTable.eventTable tr, #contentTable.eventTable td { display: block; width: auto; }
	#contentTable.eventTable thead, #contentTable.eventTable th { display: none; }
	#contentTable.eventTable tr { border-bottom: 1px solid rgba(0,90,135,.14); padding: 22px 0 24px; }
	#contentTable.eventTable tr:first-child { display: none; }	/* the width-only header row */
	#contentTable.eventTable td { border-bottom: none; padding: 0; }
	#contentTable.eventTable td.seminar { padding: 14px 0 0; }
	#contentTable.eventTable h1 { font-size: 24px; }
	#contentTable.eventTable td.seminar h2 { font-size: 17px; }
	#contentTable.eventTable #contentHead, #contentTable.eventTable #contentSubline { border-bottom: none; padding: 0; }
	#contentTable.eventTable #contentHead td { padding: 0 0 12px; border-bottom: 2px solid rgb(236,105,30); }
	#contentTable.eventTable #contentSubline td { padding: 12px 0 0; }

	.langRow > * { font-size: 14px; padding: 4px 10px 5px; }
}


/*** @gate hairline *********************************************************/
/* Home gateway buttons — the "Hairline" pass from the gateway mockup.
   Scoped to #gateContent.gateHome (set in views/home.php) so the gate rows on
   page.php and events.php, which reuse #gateContent/.gateLink, are untouched. */

#gateContent.gateHome {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	max-width: 660px;
	margin: 0 auto;
	padding: 22px 22px 0px;
	box-sizing: border-box;
}

#gateContent.gateHome .gateLink {
	display: block;
	width: auto;
	margin: 0px;
	background-color: white;
	border: 1px solid rgb(221,227,230);
	border-radius: 150px;		/* pill, as the gate buttons have always been */
	transition: border-color .18s ease, background-color .18s ease;
}

#gateContent.gateHome .gateLink a {
	display: block;
	padding: 13px 20px;
	font-size: 104%;
	font-weight: 500;
	line-height: 1.25;		/* not the 50% used elsewhere: a two-line label overlapped itself */
	color: rgb(63,84,95);
	transition: color .18s ease;
}

#gateContent.gateHome .gateLink p {
	margin: 0px;
}

#gateContent.gateHome .gateLink:hover {
	border-color: rgb(0,90,135);
	background-color: rgb(246,250,252);
}

#gateContent.gateHome .gateLink a:hover {
	color: rgb(0,90,135);
	text-decoration: none;		/* the global a:hover adds underline + bold, which reflows the label */
	font-weight: 500;
}

/* accent is the site teal rgb(0,90,135), not the mockup's #00577f — 3 units
   apart, invisible alone, but the two sit in one viewport on the events page */
/* the one gate that leads — "Meditation Course" (special => true) */
#gateContent.gateHome .gateLink.lead {
	border-color: rgba(0,90,135,.5);
}

#gateContent.gateHome .gateLink.lead a {
	color: rgb(0,90,135);
}

#gateContent.gateHome .gateLink.lead:hover {
	border-color: rgb(0,90,135);
	background-color: rgb(0,90,135);
}

#gateContent.gateHome .gateLink.lead a:hover {
	color: white;
}

/* Phones keep the two-column matrix the old site used — eight gates as 2 x 4
   rather than one column of eight that pushed the last gates past the fold.
   Same pill, only tightened: less inner padding and a slightly smaller label so
   "Teaching Events" and "Dharma Centres" still hold one line at 360px. The
   label is centred as a flex box because grid stretches the two gates in a row
   to one height — without it a gate that wraps to two lines would sit level at
   the top and leave its neighbour's single line hanging above centre. */

@media  (max-width: 620px) {

#gateContent.gateHome {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 18px 14px 0px;
}

#gateContent.gateHome .gateLink a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;		/* so min-height is the pill, not the pill plus padding */
	min-height: 56px;		/* thumb-sized target, and the floor both columns share */
	padding: 10px 12px;
	font-size: 14px;
	text-align: center;
}

/* a gate given the full width in /admin/gates takes the whole row */
#gateContent.gateHome .gateLink.span2 {
	grid-column: 1 / -1;
}

}

/* the narrowest phones (320px): the label gives up a point rather than the
   second column */

@media  (max-width: 360px) {

#gateContent.gateHome {
	gap: 7px;
	padding: 16px 10px 0px;
}

#gateContent.gateHome .gateLink a {
	padding: 10px 7px;
	font-size: 13px;
}

}

/* ---- language switcher + filter label ------------------------------- */
/* Card treatment borrowed from the home gate buttons so the two read as one
   system: white fill, rgb(221,227,230) hairline, 12px corners, teal accent,
   .18s ease. */

.langFilter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
/* ---- the top-right switcher ---------------------------------------- */
.langSwitch { position: fixed; top: 10px; right: 12px; z-index: 999; font-family: 'Montserrat', sans-serif; }

.langSwitch > summary {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; list-style: none; cursor: pointer;
	background: rgba(255,255,255,.92); border: 1px solid rgb(221,227,230); border-radius: 12px;
	font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
	color: rgb(63,84,95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.langSwitch > summary::-webkit-details-marker { display: none; }	/* Safari's triangle */
.langSwitch > summary:hover { border-color: rgb(0,90,135); color: rgb(0,90,135); background: #fff; }
.langSwitch > summary:focus-visible { outline: 2px solid rgb(0,90,135); outline-offset: 2px; }
.langSwitchCaret { flex: none; transition: transform .18s ease; }
.langSwitch[open] > summary { border-color: rgb(0,90,135); color: rgb(0,90,135); background: #fff; }
.langSwitch[open] .langSwitchCaret { transform: rotate(180deg); }

.langSwitchMenu {
	position: absolute; top: calc(100% + 6px); right: 0;
	display: flex; flex-direction: column; min-width: 148px; padding: 5px;
	background: #fff; border: 1px solid rgb(221,227,230); border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,60,90,.13);
}
.langSwitchItem {
	display: block; padding: 8px 12px; border-radius: 8px;
	font-size: 13.5px; line-height: 1.4; white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}
/* pinned against the site-wide "a, a:visited" colour rules and the bolding a:hover */
.langSwitch a.langSwitchItem, .langSwitch a.langSwitchItem:visited {
	color: rgb(63,84,95); font-weight: 400; text-decoration: none;
}
.langSwitch a.langSwitchItem:hover {
	background: rgb(246,250,252); color: rgb(0,90,135);
	font-weight: 400; text-decoration: none;
}
.langSwitchItem.is-current { color: rgb(0,90,135); font-weight: 600; cursor: default; }

@media (max-width: 700px) {
	.langSwitch { top: 6px; right: 7px; }
	.langSwitch > summary { padding: 6px 10px; font-size: 12px; }

	/* Both top corners now carry fixed furniture (hamburger left, switcher
	   right) and the banner subtitle is centred, so a long one runs underneath
	   — "Unter der Leitung des Ehrwürdigen Gonsar Tulku Rinpotsche" collides at
	   360 and 500px. Start the banner text below them instead; height has to
	   become min-height or the extra padding overflows the fixed 20em box. */
	#title {
		height: auto; min-height: 20em;
		padding-top: 44px; box-sizing: border-box;
	}
}

/* ---- teachings listing ---------------------------------------------- */
/* Replaces the old #contentTable rows on /events and /events/{slug}.
   Every selector is scoped to .evt* — the ~170 imported legacy pages reuse
   #contentTable and must not be touched by any of this.

   Text-led on purpose: the schedule is a sentence, the languages are words,
   and streaming reuses the site's own long-standing line. The only shaped
   things on the page are the date numerals and the single action. */

.evtPage {
	max-width: 1080px;
	text-align: left;	/* the whole listing, not just the description: body sets
						   justify, which stretched the schedule lines in the rail */
}

.evtHead { padding-bottom: 4px; }
.evtPage h1 {
	font-weight: 300; font-size: clamp(23px, 2.6vw, 29px); line-height: 1.18;
	letter-spacing: -.015em; margin: 0; color: rgb(236,105,30);
}
.evtAddr { margin: 12px 0 0; font-size: 13.5px; color: rgb(236,105,30); }

.evtSection { margin-top: clamp(26px, 3.4vw, 38px); }
.evtSectionHead {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
	padding-bottom: 11px; border-bottom: 2px solid rgb(236,105,30);
}
.evtSectionHead h2 {
	margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .01em; color: rgb(0,90,135);
}
.evtSectionHead p { margin: 0; font-size: 13.5px; color: rgba(0,90,135,.72); }

/* ---- one teaching ---- */
.evtEntry {
	display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 0 40px;
	padding: 17px 0 19px; border-bottom: 1px solid rgba(0,90,135,.14);
}
.evtWhen { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

#content .evtPlace {
	display: inline-block; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
	color: rgb(236,105,30); text-decoration: none;
	border-bottom: 1px solid transparent; padding-bottom: 1px;
	transition: border-color .18s ease;
}
#content .evtPlace:hover {
	border-bottom-color: currentColor; text-decoration: none; font-weight: 600;
}

/* "5-6 September 2026" — day and month set at one size on the same line, the
   way a printed listing would, rather than a stacked date tile */
.evtDate {
	margin: 2px 0 0; font-size: 15px;
	font-variant-numeric: tabular-nums; color: rgb(0,90,135);
}
.evtDate .d {
	font-weight: 400; letter-spacing: -.01em; margin-right: 4px;
	white-space: nowrap;	/* "5 - 6" is one number, never broken across lines */
}

/* the week at a glance — filled squares are the days the teaching runs.
   The full sentence stays on the strip's aria-label, so nothing is lost
   for a reader who cannot see the marks. */
#content .evtWeek {
	display: flex; gap: 4px; margin: 1px 0 0; padding: 0; list-style: none;
}
#content .evtWeek li {
	display: flex; align-items: center; justify-content: center;
	width: 23px; height: 23px; margin: 0; padding: 0; border-radius: 4px;
	border: 1px solid rgba(0,90,135,.16); background: transparent;
	font-size: 10.5px; font-weight: 500; color: rgba(0,90,135,.38);
}
#content .evtWeek li.on {
	background: rgb(0,90,135); border-color: rgb(0,90,135);
	color: #fff; font-weight: 600;
}

.evtWhenLines { margin: 1px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(0,90,135,.78);
	text-wrap: pretty; }

/* ---- the teaching itself ---- */
.evtWhat { min-width: 0; }
.evtWhat h3 {
	margin: 0 0 2px; font-size: 17px; font-weight: 500; line-height: 1.34;
	letter-spacing: -.008em; color: rgb(0,90,135); text-wrap: balance;
}
.evtTeacher { margin: 0; font-size: 14px; font-weight: 500; color: rgb(236,105,30); }
/* the name links to the teacher's own page when there is one; the hairline
   on hover is the same answer the places give */
#content .evtTeacher a {
	color: inherit; text-decoration: none;
	border-bottom: 1px solid transparent; padding-bottom: 1px;
	transition: border-color .18s ease;
}
#content .evtTeacher a:hover {
	border-bottom-color: currentColor; text-decoration: none; font-weight: 500;
}

.evtDesc {
	margin-top: 9px; max-width: 80ch; font-size: 15px; line-height: 1.6;
						/* 80ch fills the 730px description column (.evtPage 1080 less the
						   310px rail and the 40px gap): a wider line that saves a line,
						   rather than a narrow measure that strands the last word */
	text-align: left;	/* on the container: some descriptions are a bare text
						   node, so a rule on <p> alone leaves body{justify} winning */
	text-wrap: pretty;	/* never strand the last word alone on its own line;
						   the browser reflows as the column narrows, and simply
						   ignores this where it is unsupported */
}
.evtDesc p { margin: 0 0 8px; padding: 0; text-align: left; }
.evtDesc p:last-child { margin-bottom: 0; }
#content .evtDesc a { display: inline; }

.evtOnline { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(0,90,135,.78); }
#content .evtOnline a {
	display: inline; color: rgb(0,90,135); text-decoration: none;
	border-bottom: 1px solid rgba(0,90,135,.25); transition: border-color .18s ease;
}
#content .evtOnline a:hover {
	border-bottom-color: rgb(0,90,135); text-decoration: none; font-weight: 400;
}

/* languages read left, the one action sits at the end of the line */
.evtFoot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
	gap: 8px 24px; margin-top: 11px; min-height: 1px;
}
.evtFoot:empty { display: none; }
.evtLangs {
	margin: 3px 0 0; padding: 4px 10px; border-radius: 5px;
	background: rgba(0,90,135,.07); color: rgb(0,90,135);
	font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
}
.evtLangs:empty { display: none; }

.evtReg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.evtDead { font-size: 13.5px; color: rgba(0,90,135,.72); }
.evtDead b { font-weight: 600; color: rgb(0,90,135); }

/* outlined, in the site teal — orange stays on headings and labels */
#content .evtBtn {
	display: inline-flex; align-items: center; padding: 7px 17px;
	border: 1px solid rgb(0,90,135); border-radius: 8px;
	background: transparent; color: rgb(0,90,135); text-decoration: none;
	font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
	transition: background-color .18s ease;
}
#content .evtBtn:hover {
	background: rgba(0,90,135,.09); color: rgb(0,90,135);
	text-decoration: none; font-weight: 500;
}

@media (max-width: 700px) {
	.evtEntry { grid-template-columns: 1fr; gap: 9px; padding: 16px 0 18px; }
	.evtWhen { gap: 4px; }
	.evtPage h1 { font-size: 22px; }
	.evtWhat h3 { font-size: 16px; }
}

/* day numerals: same size as the month */


/*** @centres — the /centres page ***************************************
   Scoped to #content.centresPage, never to #content alone: ~170 imported
   legacy page bodies render inside #content and must keep their own look
   (same reason #contentTable.eventTable is scoped above). The id is in the
   selector because plain "#content h2" would otherwise outrank a class. */

#content.centresPage { text-align: left; }

#content.centresPage .ctrTitle {
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 2px solid rgb(236,105,30);
	color: rgb(236,105,30);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
}

/* The lead used to stop at 64ch and leave half the row empty next to it.
   Full width would give ~130-character lines, so it fills the width in two
   columns instead — the same idiom as .ctrBlocks below — and justifies with
   hyphenation, which the long German compounds need to avoid rivers. */
#content.centresPage .ctrLead {
	margin: 22px 0 0;
	max-width: none;
	columns: 2;
	column-gap: 44px;
	font-size: 15.5px;
	line-height: 1.75;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* The countries again at the top of the page, as a row of pills that link
   where the cards below link. A visitor who came for one centre should not
   have to read the introduction and scroll the photo strip to find it. */
#content.centresPage .ctrQuick {
	margin: 18px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* The site-wide a:hover (bold + underline) would reflow the whole row, so the
   pill answers with its frame and its colour instead — as .ctrCard does. */
#content.centresPage .ctrPill {
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid rgb(223,232,238);
	border-radius: 999px;
	background-color: white;
	color: rgb(0,90,135);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	transition: border-color .16s ease, color .16s ease;
}
#content.centresPage .ctrPill:hover,
#content.centresPage .ctrPill:focus-visible {
	text-decoration: none;
	font-weight: normal;
	border-color: rgb(236,105,30);
	color: rgb(236,105,30);
}
#content.centresPage .ctrPill:focus-visible {
	outline: 2px solid rgb(236,105,30);
	outline-offset: 2px;
}

/* The five photos on file are 250px-wide originals, so the strip never asks
   for more width than that: five across on a wide screen, fewer as it narrows. */
#content.centresPage .ctrStrip {
	margin: 26px 0 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}
#content.centresPage .ctrStrip img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	border-radius: 5px;
	background-color: rgb(238,242,244);
}

#content.centresPage .ctrBlocks {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgb(227,235,240);
	display: grid;
	/* auto-fit, not repeat(3): German has two blocks where the others have
	   three, and they should fill the row rather than leave a hole. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px 34px;
}
#content.centresPage .ctrBlocks h2 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgb(236,105,30);
	text-align: left;
}
#content.centresPage .ctrBlocks p {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.7;
	text-align: left;
}

#content.centresPage .ctrHead {
	margin: 38px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgb(227,235,240);
}
#content.centresPage .ctrHead h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: rgb(0,90,135);
	text-align: left;
}

#content.centresPage .ctrGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

/* One card is one link, and the site-wide a:hover (bold + underline) would
   otherwise grab the whole card — here the hover shows as a frame instead. */
#content.centresPage .ctrCard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 14px;
	border: 1px solid rgb(223,232,238);
	border-radius: 8px;
	background-color: white;
	color: rgb(0,90,135);
	transition: border-color .16s ease, box-shadow .16s ease;
}
#content.centresPage .ctrCard:hover,
#content.centresPage .ctrCard:focus-visible {
	text-decoration: none;
	font-weight: normal;
	border-color: rgb(236,105,30);
	box-shadow: 0 6px 16px rgba(0,90,135,.09);
}
#content.centresPage .ctrCard:focus-visible {
	outline: 2px solid rgb(236,105,30);
	outline-offset: 2px;
}

/* The card is a box with two links in it: the centre, and its contact details.
   The first is stretched over the whole box so the card still opens the centre
   when clicked anywhere; the contact line sits above that layer. The frame lit
   on :focus-within because the box itself is no longer the focusable thing. */
#content.centresPage .ctrCard { position: relative; }
#content.centresPage .ctrCard:focus-within {
	border-color: rgb(236,105,30);
	box-shadow: 0 6px 16px rgba(0,90,135,.09);
}
#content.centresPage .ctrCardMain {
	display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto;
	color: inherit; text-decoration: none;
}
#content.centresPage .ctrCardMain:hover { text-decoration: none; font-weight: normal; }
#content.centresPage .ctrCardMain::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
#content.centresPage .ctrContact {
	position: relative; z-index: 1; align-self: flex-start;
	font-size: 12px; font-weight: 600; letter-spacing: .04em;
	color: rgb(236,105,30); text-decoration: none;
}
#content.centresPage .ctrContact:hover, #content.centresPage .ctrContact:focus-visible {
	font-weight: 600; text-decoration: underline;
}

#content.centresPage .ctrCountry { font-size: 15px; font-weight: 600; line-height: 1.25; color: rgb(0,90,135); }
#content.centresPage .ctrPlace   { font-size: 12px;  line-height: 1.4; color: rgb(127,147,158); }
#content.centresPage .ctrDesc    { margin-top: 4px; font-size: 13px; line-height: 1.6; color: rgb(60,109,136); }
#content.centresPage .ctrGo {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgb(236,105,30);
}
#content.centresPage .ctrKind {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgb(138,154,164);
}

@media (max-width: 900px) {
	#content.centresPage .ctrLead   { columns: 1; }
	#content.centresPage .ctrBlocks { grid-template-columns: 1fr; gap: 20px; }
	#content.centresPage .ctrGrid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#content.centresPage .ctrStrip  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	#content.centresPage .ctrGrid  { grid-template-columns: 1fr; }
	#content.centresPage .ctrStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#content.centresPage .ctrTitle { font-size: 21px; }
	#content.centresPage .ctrLead  { font-size: 15px; text-align: left; }
	#content.centresPage .ctrPill  { font-size: 12.5px; padding: 5px 11px; }
}
@media (prefers-reduced-motion: reduce) {
	#content.centresPage .ctrCard,
	#content.centresPage .ctrPill { transition: none; }
}


/*** @site nav — the standard row on centre pages and event listings ********
   Five entries, each a plain link: Media and Buddhism used to be <details>
   dropdowns and now lead to a section page instead (see @section gates at the
   foot of this file). Scoped to .siteNav*, and the page's own links keep their
   imported .gateLink markup — reshaped only inside #gateContent.gateLocal,
   because ~230 legacy pages share those classes and must keep their pills. */

.siteNav {
	max-width: 900px;
	margin: 22px auto 0;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
}

.siteNavItem {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 22px;		/* +1 for the border that went from 2px to 1px */
	border: 1px solid rgb(221,227,230);
	border-radius: 999px;
	background-color: white;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

/* pinned against the site-wide "a, a:visited" colour and the bolding a:hover */
a.siteNavItem, a.siteNavItem:visited { color: rgb(63,84,95); text-decoration: none; font-weight: 500; }
a.siteNavItem:hover {
	border-color: rgb(0,90,135); color: rgb(0,90,135); background-color: rgb(246,250,252);
	text-decoration: none; font-weight: 500;
}
.siteNavItem:focus-visible { outline: 2px solid rgb(236,105,30); outline-offset: 2px; }

/* the page's own links, now a second and quieter row under the standard one */
#gateContent.gateLocal {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px 0;
}
#gateContent.gateLocal .gateLink,
#gateContent.gateLocal .gateLinkSlim,
#gateContent.gateLocal .gateLinkWide {
	display: inline-flex;
	align-items: baseline;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
}
#gateContent.gateLocal .gateLink::after,
#gateContent.gateLocal .gateLinkSlim::after,
#gateContent.gateLocal .gateLinkWide::after {
	content: '\00b7';
	margin: 0 12px;
	color: rgb(180,190,196);
}
#gateContent.gateLocal > div:last-child::after { content: none; }
#gateContent.gateLocal a { font-size: 13px; color: rgb(0,90,135); }
#gateContent.gateLocal a:hover { color: rgb(236,105,30); text-decoration: none; font-weight: 400; }
#gateContent.gateLocal p { display: inline; margin: 0; padding: 0; }

@media (max-width: 700px) {
	.siteNav { gap: 8px; padding: 0 14px; }
	.siteNavItem { padding: 9px 16px; font-size: 13px; }
}

/*** @BuddhaDharma — "The Teachings of the Buddha" *************************

   Scoped to .pageDoc / .dha* only. The ~230 imported legacy bodies keep
   #contentTable / #contentText / #contentHead and none of them is touched
   by anything below.

   The page keeps the shape it always had — the talk on the left, the artwork
   down the right. The one change of substance is that the rail is as tall as
   the text and spaces its four pictures over that whole height, so it cannot
   run out two thirds of the way down and leave a blank half-page under it,
   which is what the old table cell did.
***************************************************************************/

.pageDoc {
	text-align: left;			/* body sets justify — rivers at this measure */
	margin-bottom: 10px;
}

.dhaPage { max-width: 940px; margin: 0 auto; color: rgb(0,90,135); }
.dhaPage p { margin: 0; padding: 0; }

.dhaHead { padding-bottom: 13px; border-bottom: 2px solid rgb(236,105,30); }
.dhaPage h1 {
	margin: 0;
	font-weight: 300; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.14;
	letter-spacing: -.018em; color: rgb(236,105,30); text-wrap: balance;
}

/* ---- the two columns --------------------------------------------------- */
.dhaGrid {
	display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 50px;
	margin-top: clamp(24px, 3vw, 30px); align-items: stretch;
}
/* the rail is written first so it leads on a phone; here it goes back right */
.dhaCol  { grid-column: 1; grid-row: 1; min-width: 0; }
.dhaRail { grid-column: 2; grid-row: 1; }

.dhaRail {
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 40px; margin: 0;
}
.dhaRail figure { margin: 0; }
.dhaRail img { display: block; width: 250px; height: auto; max-width: 100%; }

/* ---- the text ----------------------------------------------------------- */
.dhaLede p {
	font-size: clamp(17px, 1.7vw, 18px); line-height: 1.6;
	letter-spacing: -.004em; text-wrap: pretty;
}
.dhaLede p + p { margin-top: 14px; }

/* the four lines the Buddha sums his own teaching up in — the one quotation
   on the page, and four unmarked list items in the imported markup */
.dhaVerse {
	margin: clamp(24px, 2.8vw, 28px) 0;
	padding: clamp(18px, 2.2vw, 22px) 0;
	border-top: 1px solid rgba(236,105,30,.45);
	border-bottom: 1px solid rgba(236,105,30,.45);
	text-align: center;
}
.dhaVerse p {
	font-size: clamp(17px, 1.9vw, 19px); line-height: 1.62;
	font-weight: 500; font-style: italic; letter-spacing: -.005em;
	text-wrap: balance;
}

.dhaCue { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.dhaPoints { margin: 12px 0 0; padding: 0 0 0 21px; list-style: none; }
.dhaPoints li { position: relative; margin: 0 0 7px; font-size: 16.5px; line-height: 1.6; }
.dhaPoints li::before {
	content: ""; position: absolute; left: -21px; top: .6em;
	width: 6px; height: 6px; border-radius: 50%; background: rgb(236,105,30);
}

.dhaProse { margin-top: clamp(22px, 2.6vw, 26px); }
.dhaProse p { font-size: 16px; line-height: 1.72; text-wrap: pretty; }
.dhaProse p + p { margin-top: 17px; }

/* ---- narrower ----------------------------------------------------------- */
@media (max-width: 900px) {
	/* the rail lies down rather than squeezing the measure — and because it is
	   first in the markup, the artwork opens the page instead of trailing it */
	.dhaGrid { grid-template-columns: minmax(0, 1fr); }
	.dhaCol, .dhaRail { grid-column: 1; grid-row: auto; }
	.dhaRail {
		flex-direction: row; flex-wrap: wrap; justify-content: center;
		gap: 18px; margin-bottom: 30px;
	}
	.dhaRail img { width: 150px; }
}

/* four across stops fitting here — pair them two by two rather than leave
   the fourth stranded on a line of its own */
@media (max-width: 780px) {
	.dhaRail {
		display: grid; grid-template-columns: repeat(2, minmax(0, 150px));
		justify-content: center; gap: 16px;
	}
	.dhaRail img { width: 100%; }
}

@media (max-width: 520px) {
	.dhaProse p, .dhaCue { font-size: 15.5px; }
	.dhaPoints li { font-size: 16px; }
}


/*** @gate hairline — the imported pages ************************************
   The gateway rows on the pages carried over from the old site sit in a bare
   #gateContent and wore the original grey pill: a 2px rgb(100,100,100) border
   on rgb(240,240,240), the label greyed with it. They now carry the same
   treatment as the home gates — white fill, an rgb(221,227,230) hairline, the
   site teal on hover — so a button reads the same wherever it stands.

   The id is in the selector because "#gateContent a" further up would
   otherwise outrank a plain .gateLink rule and keep the label grey.

   Scoped past the two rows that are not pills: .gateHome has its own grid
   above, .gateLocal is the quiet inline row centre pages carry under the
   standard navigation. Neither is touched by anything below. */

#gateContent:not(.gateHome):not(.gateLocal) .gateLink,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkSlim,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkWide {
	vertical-align: top;		/* a two-line label no longer drops its neighbours */
	transition: border-color .18s ease, background-color .18s ease;
}

/* the label geometry of the home gates, so the two rows measure the same */
#gateContent:not(.gateHome):not(.gateLocal) .gateLink a,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkSlim a,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkWide a {
	display: block;
	padding: 13px 20px;
	font-size: 104%;
	font-weight: 500;
	line-height: 1.25;
	color: rgb(63,84,95);
	transition: color .18s ease;
}

#gateContent:not(.gateHome):not(.gateLocal) .gateLink p,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkSlim p,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkWide p {
	margin: 0px;
}

#gateContent:not(.gateHome):not(.gateLocal) .gateLink:hover,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkSlim:hover,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkWide:hover {
	border-color: rgb(0,90,135);
	background-color: rgb(246,250,252);
}

/* the global a:hover adds underline + bold, which reflows the label */
#gateContent:not(.gateHome):not(.gateLocal) .gateLink a:hover,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkSlim a:hover,
#gateContent:not(.gateHome):not(.gateLocal) .gateLinkWide a:hover {
	color: rgb(0,90,135);
	text-decoration: none;
	font-weight: 500;
}


/*** @cart steppers — the "+" and "−" on the books page ********************
   Bare <button>s in the catalogue's cart table and under each cover, so they
   were drawn in the browser's own grey. Same hairline and teal as every other
   button, sized for the single glyph they carry. */

#cartContent button,
.itemGalleryBlock button {
	min-width: 30px;
	padding: 4px 10px 5px;
	background-color: white;
	border: 1px solid rgb(221,227,230);
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: rgb(63,84,95);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

#cartContent button:hover,
.itemGalleryBlock button:hover {
	border-color: rgb(0,90,135);
	background-color: rgb(246,250,252);
	color: rgb(0,90,135);
}

#cartContent button:focus-visible,
.itemGalleryBlock button:focus-visible {
	outline: 2px solid rgb(236,105,30);
	outline-offset: 2px;
}

/* ---- recurring prayers -------------------------------------------------
   A prayer entry is a teaching entry with two extra lines: the rhythm its
   calendar keeps, under the time in the rail, and the days after the one the
   date block already shows, under the description. Both are quieter than the
   text they sit with — the entry still leads with the next date and the
   title. */
.evtRhythm {
	margin: 3px 0 0; font-size: 12.5px; line-height: 1.45;
	color: rgba(0,90,135,.62); text-wrap: pretty;
}
.evtDates {
	margin: 9px 0 0; font-size: 13px; line-height: 1.55;
	color: rgba(0,90,135,.72); text-wrap: pretty;
}
.evtDatesLead {
	margin-right: 4px; font-size: 11px; font-weight: 500;
	letter-spacing: .09em; text-transform: uppercase;
	color: rgba(0,90,135,.55);
}


/* Banner subtitle. The new site's line — "Directed by the Venerable Gonsar
   Tulku Rinpoche" — is longer than the legacy "Directed by Gonsar Tulku
   Rinpoche", so it carries a notch below the global h4's 130%. The handheld
   rule repeats the 100% the bare `h4` rule gives it under 900px: an id beats
   a tag, so without it this would make the mobile banner text bigger. */
/* the 3px pad gives back the line-box height the smaller type loses, so the
   logo below it still lands on the same pixel row as on rabten.eu */
#title h4 { font-size: 120%; padding-bottom: 3px; }
@media (max-width: 900px) { #title h4 { font-size: 100%; } }

/* ---- book catalogue (views/shop/catalog.php) --------------------------- */
/* The page renders outside #content, so it carries its own width AND its own
   link colours: an <a> that matches neither "#content a" nor "#gateContent a"
   falls through every colour rule in this file to the browser's default blue. */
.bkPage {
	max-width: 1080px; margin: 0 auto; padding: 0 24px 76px;
	box-sizing: border-box; text-align: left;
}
.bkPage a, .bkPage a:link, .bkPage a:visited { color: rgb(0,90,135); text-decoration: none; }
/* the global a:hover bolds and underlines, which reflows a grid of cards */
.bkPage a:hover { color: rgb(236,105,30); text-decoration: none; font-weight: inherit; }

/* --- the open book ------------------------------------------------------ */
.bkDetail {
	display: flex; gap: 46px; align-items: flex-start;
	margin: 26px 0 0; padding: 40px 44px 42px;
	background: rgb(244,239,232); border-radius: 3px; outline: none;
}
.bkDetailCover { flex: none; width: 222px; }
.bkDetailCover picture { display: contents; }
.bkDetailCover img {
	display: block; width: 222px; height: auto; background: #f2f4f5;
	box-shadow: 0 18px 40px -18px rgba(0,42,64,.45);
}
.bkDetailBody { flex: 1 1 auto; min-width: 0; }
.bkEyebrow {
	margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .26em;
	text-transform: uppercase; color: rgb(236,105,30);
}
.bkDetailTitle {
	margin: 13px 0 0; font-size: 32px; font-weight: 500; line-height: 1.18;
	color: rgb(0,90,135); text-wrap: pretty;
}
.bkDetailAuthor { margin: 8px 0 0; font-size: 15px; color: rgb(236,105,30); }
/* the min-height holds the Add button still while the panel swaps between a
   400-word description and a book whose only text is its subtitle */
.bkDetailText {
	margin: 20px 0 0; min-height: 168px; max-width: 44em;
	font-size: 14px; line-height: 1.75; color: rgba(0,90,135,.82); text-align: left;
}
.bkDetailActions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 18px; }
.bkDetailActions form { margin: 0; }
.bkIsbn { margin: 0; font-size: 12.5px; color: rgba(0,90,135,.55); }

/* --- add buttons -------------------------------------------------------- */
.bkAdd {
	font: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
	cursor: pointer; padding: 6px 15px 7px;
	border: 1px solid rgba(0,90,135,.3); border-radius: 150px;
	background: #fff; color: rgb(0,90,135);
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.bkAdd:hover { border-color: rgb(236,105,30); background: rgb(236,105,30); color: #fff; }
.bkAdd:focus-visible { outline: 2px solid rgb(0,90,135); outline-offset: 2px; }
.bkAdd--lead {
	padding: 11px 26px 12px; font-size: 13.5px; font-weight: 600;
	border-color: rgb(236,105,30); background: rgb(236,105,30); color: #fff;
}
.bkAdd--lead:hover { border-color: rgb(0,90,135); background: rgb(0,90,135); color: #fff; }

/* --- author filter + basket --------------------------------------------- */
.bkBar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px 28px; margin-top: 46px; padding-bottom: 20px;
	border-bottom: 1px solid rgba(0,90,135,.12);
}
.bkFilters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.bkChip {
	display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 18px 9px;
	border: 1px solid rgb(221,227,230); border-radius: 150px; background: #fff;
	font-size: 12.5px; font-weight: 500; line-height: 1.3;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.bkPage a.bkChip, .bkPage a.bkChip:visited { color: rgb(63,84,95); }
.bkPage a.bkChip:hover { border-color: rgb(0,90,135); background: rgb(246,250,252); color: rgb(0,90,135); }
.bkChip b { font-size: 11px; font-weight: 400; color: rgba(0,90,135,.45); }
.bkChip.is-on { border-color: rgb(0,90,135); background: rgb(0,90,135); color: #fff; cursor: default; }
.bkChip.is-on b { color: rgba(255,255,255,.65); }
.bkBasket {
	display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 9px;
	border: 1px solid rgb(221,227,230); border-radius: 150px; background: #fff;
	transition: border-color .18s ease, background-color .18s ease;
}
.bkPage a.bkBasket:hover { border-color: rgb(0,90,135); background: rgb(246,250,252); color: rgb(0,90,135); }
.bkBasketLabel { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.bkBasketCount { font-size: 13px; color: rgba(0,90,135,.5); }

/* --- the grid ----------------------------------------------------------- */
.bkGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 40px; margin-top: 36px; }
.bkCard { display: flex; flex-direction: column; gap: 14px; }
.bkCardCover {
	display: block; padding: 3px; border: 1px solid rgba(0,90,135,.16);
	transition: border-color .18s ease;
}
.bkCardCover picture { display: contents; }
.bkCardCover img { display: block; width: 100%; height: auto; background: #f2f4f5; }
.bkPage .bkCardCover:hover { border-color: rgb(236,105,30); }
.bkCard.is-open .bkCardCover { border-color: rgb(236,105,30); }
.bkCardText { display: flex; flex-direction: column; gap: 4px; }
.bkCardTitle { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.bkCard.is-open .bkCardTitle a { color: rgb(236,105,30); }
.bkCardAuthor { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgb(236,105,30); }
.bkCardFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.bkCardFoot form { margin: 0; }
.bkCardPrice { font-size: 13.5px; font-weight: 500; color: rgba(0,90,135,.75); }

/* --- the shop's own title band ------------------------------------------ */
/* 20em of mountain above a shop pushes the first book off the screen; the
   band stays, at the height a section header needs. */
/* height:auto, not a second fixed height — the band has to hold whatever the
   heading wraps to, and a clipped emblem was the first thing that broke. */
#title.titleSlim {
	height: auto; min-height: 11em; padding: 16px 15px 20px;
	/* the darkening the white heading needs over a bright sky. Restating the
	   photo is the only way to layer a gradient over it, so this line has to
	   move with #title's own background-image if that ever changes again. */
	background-image: linear-gradient(180deg, rgba(0,42,64,.10) 0%, rgba(0,42,64,.36) 100%),
	                  url('../assets/logo-cloud.png');
}
#title.titleSlim img { width: 54px; height: auto; }
#title.titleSlim h4 { font-size: 100%; margin-top: 1em; margin-bottom: 0.2em; }
#title.titleSlim h1 { font-size: 175%; margin-bottom: 0.35em; }

@media (max-width: 900px) {
	.bkGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
	.bkDetail { gap: 30px; padding: 30px 30px 32px; }
	.bkDetailTitle { font-size: 26px; }
}

@media (max-width: 700px) {
	.bkPage { padding: 0 16px 56px; }
	.bkDetail { flex-direction: column; gap: 24px; margin-top: 18px; padding: 26px 22px 28px; }
	.bkDetailCover, .bkDetailCover img { width: 176px; }
	.bkDetailText { min-height: 0; }
	.bkGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; margin-top: 28px; }
	.bkBar { margin-top: 34px; }
	/* thumb-sized targets: the desktop pills are ~28px tall */
	.bkAdd { min-height: 44px; padding: 6px 18px; font-size: 12.5px; }
	.bkAdd--lead { min-height: 48px; }
	.bkCardFoot { flex-wrap: wrap; }
	#title.titleSlim { min-height: 9em; }
}

/*** @copyright — footer links ***********************************************/
/* The footer's "Editorial / Data protection" links had no colour of their own.
   On every inner page that does not matter, because the footer sits inside
   #content and picks up the site orange from "#content a" — but the gateway
   home page and the shop put it outside #content, where it fell through to the
   browser's default blue unvisited and then flipped to orange once visited
   (the bare `a:visited` in that same selector list is global). Pin it to the
   one colour every other footer on both sites already shows, so all of them
   match. Deliberately no :hover rule — the global `a:hover` underline is what
   the inner-page footers do, and matching them is the point. */
.addr a, .addr a:link, .addr a:visited {
	color: rgb(236,105,30);
}

/*** @home band ****************************************************************/
/* The gateway home as one full-bleed band: the mountain fills the top of the
   window with the brand block centred on it (emblem, heading, subtitle, in that
   order), and the eight gates sit in a single wide row beneath it. Desktop only
   — below 901px the page keeps the stacked band it has always had, so phones
   and tablets are untouched by any of this.
   Scoped to body.homeBand, which SiteController::home is the only caller to
   set, so no other view can pick the layout up by accident.
   Values below came out of the homepage tuner; edit them there rather than by
   hand, so the two stay in step. */

@media (min-width: 901px) {

body.homeBand {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #ffffff;
}

body.homeBand #title {
	flex: none;
	/* Half-height band. It used to paint 722px (574 content + 148 bottom
	   padding) on a normal window, which ate about seven tenths of the fold;
	   361px is exactly half of that, so the mountain reads as a header strip
	   and the gates come up under it. Split the same way as before, halved:
	   287 content + 74 padding = 361. Box is content-box, so the painted
	   band is height + 74, not height.
	   The old clamp shrank the band against the viewport because 722px
	   pushed the second row of gates below the fold on a short window. At
	   361px that pressure is gone — 361 leaves more room under it on any
	   window than the old floor of 448 did — so the band is now flat 361
	   wherever the window can afford it. The viewport term only bites below
	   about 722px of window height, and the 272px floor is the brand block
	   measured in the browser (270.4px: emblem 138 + 41 margin + h1 47 +
	   h4 24 + two 6px gaps), not computed by hand. Do not lower it — at 262
	   the block overflowed the content box by 8px and the top of the emblem
	   was cut off at the page edge. */
	height: clamp(272px, calc(50vh - 74px), 287px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0px 15px 74px;
	/* #title carries z-index:998, inert as a block box but live as a flex item —
	   it painted over the fixed hamburger at z-index 100. */
	z-index: auto;
	/* Not "auto 140%": that pins the photo's WIDTH to 1.4 x the band's painted
	   height x its 1.815 aspect, and since the height now follows the viewport
	   the width it implies moves with it — on a 1508px window it came out at
	   1476px and left a bare strip down the left. cover is the only value that
	   cannot do that. On real desktop windows it lands at 130-150% of the band
	   height anyway, so the tuned crop is essentially preserved. */
	background-size: cover;
	/* Was 100% 100%. Bottom-anchored, the shallower band showed nothing but the
	   snowfield, and the white subtitle crossed it and went unreadable. 88%
	   lifts the crop just enough to put clean sky behind the emblem and both
	   lines of type while keeping the ridge running along the foot of the
	   band — the same sky-above-mountains composition the tall band had. */
	background-position: 100% 88%;
	background-image: linear-gradient(180deg, rgba(0,42,64,0.04) 0%, rgba(0,42,64,.06) 93%, rgba(0,42,64,0.04) 100%),
	                  url('../assets/logo-cloud.png');
}

body.homeBand #title > picture            { order: 1; margin-bottom: 41px; transform: translate(0px, 7px); }
body.homeBand #title > div:nth-of-type(2) { order: 2; transform: translate(0px, -11px); }
body.homeBand #title > div:nth-of-type(1) { order: 3; transform: translate(0px, 0px); }

body.homeBand #title h1 {
	font-family: "Montserrat", 'Helvetica Neue', Arial, sans-serif;
	font-size: 39px;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: #ffffff;
	margin: 0px;
}

body.homeBand #title h4 {
	font-family: "Montserrat", 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 1.5;
	text-transform: uppercase;
	color: #ffffff;
	opacity: .88;
	margin: 0px;
}

body.homeBand #title img { width: 168px; height: auto; }

body.homeBand #gateContent.gateHome {
	flex: 1;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-content: center;
	width: 100%;
	max-width: 1100px;
	gap: 14px;
	padding: 24px 40px;
	box-sizing: border-box;
}

body.homeBand #gateContent.gateHome .gateLink {
	background-color: #ffffff;
	border: 1px solid #dde3e6;
	border-radius: 150px;
	min-height: 0px;
}

body.homeBand #gateContent.gateHome .gateLink a {
	padding: 17px 18px;
	font-size: 15px;
	font-weight: 500;
	color: #3f545f;
}

/* The hover states have to be restated here, not inherited. The site's own
   "#gateContent.gateHome .gateLink:hover" scores (1,3,0); the static rule above
   scores (1,3,1) because of the leading `body`, so it outranked the hover and
   the buttons went dead on the gateway page only. These are (1,4,1)/(1,4,2), so
   they win — while ".gateLink.lead:hover" at (1,5,0) still wins over both, which
   is what the lead gate needs. Colours are the site teal, unchanged. */

body.homeBand #gateContent.gateHome .gateLink:hover {
	border-color: rgb(0,90,135);
	background-color: rgb(246,250,252);
}

body.homeBand #gateContent.gateHome .gateLink a:hover {
	color: rgb(0,90,135);
	text-decoration: none;		/* the global a:hover adds underline + bold, which reflows the label */
	font-weight: 500;
}

body.homeBand .addr {
	flex: none;
	margin: 0px;
	padding: 0px 20px 26px;
	text-align: center;
	font-size: 11px;
	color: #808080;
	border-bottom: none;
}

body.homeBand .addr a, body.homeBand .addr a:link, body.homeBand .addr a:visited { color: #ec691e; }

body.homeBand .floating-menu     { top: 5px; left: 3px; color: #ffffff; }
body.homeBand .floating-menu a   { color: #ffffff; }
body.homeBand .floating-menu span{ font-size: 25px !important; }
body.homeBand .langSwitch        { top: 10px; right: 12px; }

body.homeBand #content { flex: none; }

}

/*** @contact — one centre's own details *********************************

   The page behind the Contact button while a visitor is on a centre's pages.
   Everything on it comes from that centre's row in the locations table, so
   the page is a short definition list and nothing else: the address as it is
   posted, the number as it is dialled, the address as it is written to.

   Scoped to .ctc* — the imported legacy bodies keep #contentTable and are
   untouched by any of this. Links are stated under #content because the site
   colours links only there; without the prefix they fall back to browser blue.
**************************************************************************/

.ctcPage {
	max-width: 620px;
	text-align: left;		/* body sets justify, which gaps a two-word line */
}

.ctcHead { padding-bottom: 13px; border-bottom: 2px solid rgb(236,105,30); }
.ctcKicker {
	margin: 0px 0px 6px; font-size: 12.5px; font-weight: 600;
	letter-spacing: .09em; text-transform: uppercase; color: rgba(0,90,135,.72);
}
.ctcPage h1 {
	margin: 0px;
	font-weight: 300; font-size: clamp(23px, 2.6vw, 29px); line-height: 1.18;
	letter-spacing: -.015em; color: rgb(236,105,30);
}

.ctcList { margin: clamp(20px, 2.6vw, 26px) 0px 0px; }
.ctcRow {
	display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0px 24px;
	padding: 13px 0px; border-bottom: 1px solid rgba(0,90,135,.14);
}
.ctcRow dt { margin: 0px; font-size: 13.5px; font-weight: 600; color: rgba(0,90,135,.72); }
.ctcRow dd { margin: 0px; font-size: 16px; line-height: 1.6; color: rgb(0,90,135); }

#content .ctcRow dd a {
	color: rgb(236,105,30); text-decoration: none;
	border-bottom: 1px solid rgba(236,105,30,.4); padding-bottom: 1px;
}
#content .ctcRow dd a:hover {
	color: rgb(236,105,30); font-weight: inherit;
	text-decoration: none; border-bottom-color: rgb(236,105,30);
}

.ctcMore { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: clamp(20px, 2.6vw, 26px) 0px 0px; }
#content .ctcMore a {
	font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
	color: rgb(236,105,30); text-decoration: none;
}
#content .ctcMore a:hover { color: rgb(236,105,30); text-decoration: underline; }
/* the way back to the centre's own page reads as a return, not a third fact */
#content .ctcMore .ctcBack::before { content: "\2190\00a0"; }
/* and the organisation's page, which nobody arrives at from a centre, points on */
#content .ctcMore .ctcOnward::after { content: "\00a0\2192"; }

/* the sentence under a value that needs one — why the Signal group is there */
.ctcRow .ctcNote { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: rgba(0,90,135,.72); }

/* ---- giving, on the organisation's page ---------------------------------
   Two buttons rather than two more rows: everything above them is a fact
   about the office, this is the one thing the page asks anybody to do. */
/* The heading takes the label column and the buttons the value column, so
   giving reads as one more line of the list above it rather than a block
   bolted underneath. The accounts drop to a full-width row of their own. */
.ctcGive {
	display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px 24px;
	align-items: center; margin: clamp(20px, 2.4vw, 26px) 0px 0px;
}
.ctcGive h2 {
	margin: 0px; font-size: 13.5px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: rgba(0,90,135,.72);
}
.ctcGive .ctcList { grid-column: 1 / -1; margin: 0px; }
.ctcActions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
#content .ctcAction {
	display: inline-block; padding: 11px 18px;
	border: 1px solid rgb(236,105,30); border-radius: 999px;
	font-size: 14px; font-weight: 600; line-height: 1.2;
	color: rgb(236,105,30); text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}
#content .ctcAction:hover, #content .ctcAction:focus-visible {
	background-color: rgb(236,105,30); color: white;
	text-decoration: none; font-weight: 600;
}

@media (max-width: 600px) {
	/* the label sits over its value rather than squeezing it into half a line */
	.ctcRow { grid-template-columns: minmax(0, 1fr); gap: 3px; }
	/* the heading goes back over its buttons where there is no room beside */
	.ctcGive { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
	/* a button per line, each wide enough to hit with a thumb */
	.ctcActions { flex-direction: column; align-items: stretch; }
	#content .ctcAction { text-align: center; }
}


/*** @section gates — a nav group, laid out on its own page *****************/
/* Media and Buddhism are groups of pages, not pages. Their entries used to
   hang in a dropdown under the nav button; they are now buttons on a section
   page (views/section.php). The pill itself comes from #gateContent.gateHome
   above — only the row is replaced, because two or three entries in the home
   grid's fixed two columns leave the odd one stranded in a half-width cell.
   The class is this page's alone, so the ~230 legacy pages that share
   #gateContent / .gateLink never see it. */

#gateContent.gateSection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 780px;
	padding: 44px 22px 0px;		/* clear of the nav: these are the page, not a second nav row */
}

#gateContent.gateSection .gateLink {
	flex: 0 1 auto;
	min-width: 220px;
}

/* a size up from the nav pill above, which is otherwise near enough to read as
   another row of navigation rather than as this page's content */
#gateContent.gateSection .gateLink a {
	padding: 17px 30px;
	font-size: 16px;
	text-align: center;
}

/* the nav button this page belongs under, held in its open state */
a.siteNavItem[aria-current="page"] {
	border-color: rgb(0,90,135);
	background-color: rgb(246,250,252);
	color: rgb(0,90,135);
}

/* On a phone the entries stack full width: there are only two or three of
   them, so the two-column matrix the home gateway keeps buys nothing here. */

@media (max-width: 620px) {

#gateContent.gateSection {
	gap: 8px;
	padding: 20px 14px 0px;
}

#gateContent.gateSection .gateLink {
	flex: 1 1 100%;
	min-width: 0;
}

}