/* === brand r1 (2026-10-05): retire residual teal, footer onto navy === */
:root{--wp--preset--color--primary:#1B2A41}
html body footer.footer-container,html body:has(.hub-page) footer.footer-container{background:#1B2A41 !important}

/* === a11y r2 (2026-10-05): muted label contrast in the hub kit === */
.c6-flag small,.c6-grp__k,.c2-filter small,.c6-plan__row em,.c4-stops em,.c7-panel__h p,.c7-card.is-soon em,.hub-ticket__top span,.hub-ticket__stub small,.hub-ticket small,.hub-bp__f small,.hub-bp__stub small,.hub-bp label small{color:#616C7B !important}
.c3-cities em,.c6-facts dt,.hub-board__row--h span{color:#9FA8B5 !important}
.c6-flag.is-soon small{color:#806220 !important}
.c6-ini,.hub-ticket__cd{color:#A8442F !important}
.c2-actions a:first-child,.c2-actions a:first-child:link,.c2-actions a:first-child:visited{background:#A8442F !important;border-color:#A8442F !important;color:#F4EBDD !important}

/* === a11y r1 (2026-10-04): AA contrast for terracotta text === */
.hh5-k,.hx-eyebrow,.hub-eyebrow,.hor-tag--sand,.hor-callout--warning,.hor-callout--warning .hor-callout__body strong{color:#A8442F !important}
.hub-dhero .hub-eyebrow,.hub-cta .hub-eyebrow,.hub-board-sec .hub-eyebrow{color:#D4B97A !important}
.hor-city-badge{background:#A8442F !important}
.hp-head h2 em,.hub-board-sec .hub-h2 em{color:#D4B97A !important}
.hf-text h2 em{color:#D4B97A !important}
div[style*="background:#B5503C"]{background:#A8442F !important}

/* === 1. GLOBAL FOUNDATION === */
	html {
		  scroll-behavior: smooth;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
	}
	
	/* === 2. POST CARD EFFECTS === */
	.wp-block-post-featured-image,
	.wp-block-post-featured-image a {
		  overflow: hidden;
		  display: block;
		  border-radius: 4px;
	}
	.wp-block-post-featured-image img {
		  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
		  will-change: transform;
	}
	.wp-block-post:hover .wp-block-post-featured-image img {
		  transform: scale(1.05);
	}
	.wp-block-post {
		  transition: transform 0.3s ease;
	}
	.wp-block-post:hover {
		  transform: translateY(-3px);
	}
	
	/* === 3. NAV HOVER UNDERLINE === */
	.wp-block-navigation-item__content {
		  position: relative;
	}
	.wp-block-navigation-item__content::after {
		  content: '';
		  position: absolute;
		  left: 0;
		  bottom: -2px;
		  width: 0;
		  height: 1px;
		  background: currentColor;
		  opacity: 0.5;
		  transition: width 0.25s ease;
	}
	.wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
		  width: 100%;
	}
	
	/* === 4. READING PROGRESS BAR (single posts) === */
	body.single-post::before {
		  content: '';
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 2px;
		  background: linear-gradient(90deg, #1b2a41, #1b2a41);
		  transform-origin: left;
		  transform: scaleX(0);
		  z-index: 9999;
		  animation: hor-reading-progress linear both;
		  animation-timeline: scroll(root);
	}
	@keyframes hor-reading-progress {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
	
	/* === 5. ARTICLE LINKS === */
	.wp-block-post-content a:not([class]),
		.entry-content a:not([class]) {
			  color: inherit;
			  text-decoration-color: rgba(27,42,65, 0.4);
			  text-decoration-thickness: 1px;
			  text-underline-offset: 3px;
			  transition: color 0.15s ease, text-decoration-color 0.15s ease;
	}
	.wp-block-post-content a:not([class]):hover,
		.entry-content a:not([class]):hover {
			  color: #1b2a41;
			  text-decoration-color: #1b2a41;
	}
	
	/* === 6. BLOCKQUOTES === */
	.wp-block-post-content blockquote,
	.entry-content blockquote {
		  border-left: 3px solid #1b2a41;
		  padding: 0.75rem 1.5rem;
		  background: rgba(27,42,65, 0.04);
		  border-radius: 0 6px 6px 0;
		  margin: 2rem 0;
		  font-style: italic;
	}
	
	/* === 7. HR DIVIDERS === */
	.wp-block-post-content hr,
	.entry-content hr,
	.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
		  border: none !important;
		  border-top: 1px solid rgba(27,42,65, 0.2) !important;
		  max-width: 50%;
		  margin: 3rem auto !important;
		  opacity: 1 !important;
	}
	
	/* === 8. TEXT SELECTION === */
	::selection {
		  background: rgba(27,42,65, 0.15);
		  color: #1b2a41;
	}
	
	/* === 9. FOCUS RINGS === */
	a:focus-visible,
		button:focus-visible {
			  outline: 2px solid #1b2a41;
			  outline-offset: 3px;
			  border-radius: 2px;
	}
	
	/* === 10. SCROLL MARGIN FOR ANCHOR LINKS === */
	h2, h3, h4 {
		  scroll-margin-top: 80px;
	}
	
	/* === 11. STICKY FROSTED HEADER === */
	.wp-block-template-part[class*="header"],
	header.wp-block-template-part,
	#masthead,
	.site-header {
		  position: sticky;
		  top: 0;
		  z-index: 100;
		  backdrop-filter: blur(12px);
		  -webkit-backdrop-filter: blur(12px);
		  background: rgba(247, 243, 237, 0.85) !important;
		  transition: background 0.3s ease, box-shadow 0.3s ease;
	}
	
	/* === 12. SECTION HEADING DECORATIVE RULE === */
	.wp-block-heading + *,
	h2.wp-block-heading {
		  position: relative;
	}
	.wp-block-query-title,
	.wp-block-post-template ~ .wp-block-heading {
		  text-align: center;
	}
	.wp-block-query-title::after {
		  content: '';
		  display: block;
		  width: 40px;
		  height: 1px;
		  background: #1b2a41;
		  margin: 0.75rem auto 0;
		  opacity: 0.6;
	}
	
	/* === 13. H2 HEADING ACCENT IN ARTICLES === */
	.wp-block-post-content h2,
	.entry-content h2 {
		  position: relative;
	}
	.wp-block-post-content h2 .wp-anchor-link,
	.entry-content h2 .wp-anchor-link,
	.wp-block-post-content h2 a.wp-anchor-link,
	.entry-content h2 a.wp-anchor-link {
		  opacity: 0;
		  transition: opacity 0.2s ease;
		  color: #1b2a41;
		  text-decoration: none;
		  margin-left: 0.4em;
		  font-size: 0.7em;
	}
	.wp-block-post-content h2:hover .wp-anchor-link,
		.entry-content h2:hover .wp-anchor-link {
			  opacity: 1;
	}
	
	/* === 14. TASTE THE JOURNEY ARROW === */
	a[href*="top-reads"] em,
	.wp-block-paragraph a em {
		  display: inline-block;
		  transition: transform 0.2s ease;
	}
	a[href*="top-reads"]:hover em,
	.wp-block-paragraph a:hover em {
		  transform: translateX(4px);
	
}

/* === 2. POST CARD EFFECTS === */
.wp-block-post-featured-image,
.wp-block-post-featured-image a {
	  overflow: hidden;
	  display: block;
	  border-radius: 4px;
}
.wp-block-post-featured-image img {
	  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	  will-change: transform;
	  background: linear-gradient(135deg, #f0ede8, #e8e4de);
}
.wp-block-post:hover .wp-block-post-featured-image img {
	  transform: scale(1.05);
}
.wp-block-post {
	  transition: transform 0.3s ease;
}
.wp-block-post:hover {
	  transform: translateY(-3px);
}

/* === 3. NAV HOVER UNDERLINE === */
.wp-block-navigation-item__content {
	  position: relative;
}
.wp-block-navigation-item__content::after {
	  content: '';
	  position: absolute;
	  left: 0;
	  bottom: -2px;
	  width: 0;
	  height: 1px;
	  background: currentColor;
	  opacity: 0.5;
	  transition: width 0.25s ease;
}
.wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
	  width: 100%;
}

/* === 4. READING PROGRESS BAR (single posts) === */
body.single-post::before {
	  content: '';
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background: linear-gradient(90deg, #1b2a41, #1b2a41);
	  transform-origin: left;
	  transform: scaleX(0);
	  z-index: 9999;
	  animation: hor-reading-progress linear both;
	  animation-timeline: scroll(root);
}
@keyframes hor-reading-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* === 5. ARTICLE LINKS === */
.wp-block-post-content a:not([class]),
.entry-content a:not([class]) {
	  color: inherit;
	  text-decoration-color: rgba(27,42,65, 0.4);
	  text-decoration-thickness: 1px;
	  text-underline-offset: 3px;
	  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.wp-block-post-content a:not([class]):hover,
.entry-content a:not([class]):hover {
	  color: #1b2a41;
	  text-decoration-color: #1b2a41;
}

/* === 6. BLOCKQUOTES === */
.wp-block-post-content blockquote,
.entry-content blockquote {
	  border-left: 3px solid #1b2a41;
	  padding: 0.75rem 1.5rem;
	  background: rgba(27,42,65, 0.04);
	  border-radius: 0 6px 6px 0;
	  margin: 2rem 0;
	  font-style: italic;
}

/* === 7. HR DIVIDERS === */
.wp-block-post-content hr,
.entry-content hr,
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	  border: none !important;
	  border-top: 1px solid rgba(27,42,65, 0.2) !important;
	  max-width: 50%;
	  margin: 3rem auto !important;
	  opacity: 1 !important;
}

/* === 8. TEXT SELECTION === */
::selection {
	  background: rgba(27,42,65, 0.15);
	  color: #1b2a41;
}

/* === 9. FOCUS RINGS === */
a:focus-visible,
button:focus-visible {
	  outline: 2px solid #1b2a41;
	  outline-offset: 3px;
	  border-radius: 2px;
}

/* === 10. SMOOTH IMAGE TRANSITIONS === */
img {
	  transition: opacity 0.3s ease;
}

body {
  background-color: #fafaf8;
  color: #1a1a18;
}

/* === 2. COLOR TOKENS === */
:root {
  --color-bg:        #fafaf8;
  --color-text:      #1a1a18;
  --color-accent:    #1b2a41;
  --color-muted:     #7a7a72;
  --color-border:    #e2dfd9;
  --color-surface:   #f3f0ea;
  --transition-base: 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === 3. TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5vw, 5rem);    font-weight: 300; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3.2rem); font-weight: 300; }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem);   font-weight: 400; }

p { line-height: 1.75; color: #2e2e2c; }

.wp-block-navigation-item a,
figcaption {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* === 4. BUTTONS === */
.wp-block-button__link {
  border-radius: 0;
  padding: 14px 32px;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  border: 1px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #1a1a18;
  color: #fafaf8;
}

/* === 5. IMAGES === */
.wp-block-image img,
.wp-block-cover img {
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-image:hover img { transform: scale(1.04); }
.wp-block-image { overflow: hidden; }

/* === 6. LINKS === */
a {
  text-decoration: none;
  transition: opacity var(--transition-base);
}
a:hover { opacity: 0.6; }

.entry-content a:not(.wp-block-button__link),
.wp-block-paragraph a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.entry-content a:not(.wp-block-button__link):hover,
.wp-block-paragraph a:hover {
  background-size: 100% 1px;
  opacity: 1;
}

/* === 7. NAVIGATION === */
.wp-block-navigation-item a {
  position: relative;
  padding-bottom: 2px;
}
.wp-block-navigation-item a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-navigation-item a:hover::after { width: 100%; }

/* === 8. SCROLL REVEAL === */
.hor--reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hor--reveal.hor--in-view { opacity: 1; transform: translateY(0); }
.hor--reveal:nth-child(2) { transition-delay: 0.08s; }
.hor--reveal:nth-child(3) { transition-delay: 0.16s; }
.hor--reveal:nth-child(4) { transition-delay: 0.24s; }
.hor--reveal:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .hor--reveal { opacity: 1; transform: none; transition: none; }
}

/* === 9. DETAILS === */
hr, .wp-block-separator { border-color: var(--color-border); opacity: 1; }
figcaption { color: var(--color-muted); margin-top: 0.75rem; font-size: 0.72rem; }

/* ==============================
   BLOG ARCHIVE — EDITORIAL LAYOUT
   ============================== */

.category .wp-block-query-title,
.archive .wp-block-query-title {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 4rem 2rem 3rem;
}

/* 3-column grid */
.category .wp-block-post-template.columns-4,
.archive .wp-block-post-template.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background-color: var(--color-border) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.category .wp-block-post-template.columns-4 .wp-block-post,
.archive .wp-block-post-template.columns-4 .wp-block-post {
  background: var(--color-bg);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  grid-column: span 1 !important;
}

/* 4:5 portrait ratio */
.category .wp-block-post .wp-block-post-featured-image,
.archive .wp-block-post .wp-block-post-featured-image {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  overflow: hidden;
  flex-shrink: 0;
}

.category .wp-block-post .wp-block-post-featured-image img,
.archive .wp-block-post .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.category .wp-block-post:hover .wp-block-post-featured-image img,
.archive .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* Text area */
.category .wp-block-post .wp-block-group,
.archive .wp-block-post .wp-block-group {
  padding: 1.5rem 1.8rem 2rem !important;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  gap: 0.6rem;
}

.category .wp-block-post .wp-block-spacer,
.archive .wp-block-post .wp-block-spacer {
  display: none !important;
}

/* Title */
.category .wp-block-post .wp-block-post-title,
.archive .wp-block-post .wp-block-post-title {
  font-size: 1.05rem !important;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 !important;
}

.category .wp-block-post .wp-block-post-title a,
.archive .wp-block-post .wp-block-post-title a {
  color: var(--color-text) !important;
  text-decoration: none;
  transition: opacity 0.4s;
}

.category .wp-block-post .wp-block-post-title a:hover,
.archive .wp-block-post .wp-block-post-title a:hover {
  opacity: 0.6;
}

/* Injected excerpt */
.hor--excerpt {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Date */
.category .wp-block-post .wp-block-post-date,
.archive .wp-block-post .wp-block-post-date {
  font-size: 0.68rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: auto;
  padding-top: 0.4rem;
}

@media (max-width: 640px) {
  .category .wp-block-post-template.columns-4,
  .archive .wp-block-post-template.columns-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .category .wp-block-post-template.columns-4,
  .archive .wp-block-post-template.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* === 12. ARCHIVE/CATEGORY TOP GAP FIX === */
.category main.wp-block-group,
.archive main.wp-block-group {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.category .wp-block-group.alignfull,
.archive .wp-block-group.alignfull {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.category .wp-block-query,
.archive .wp-block-query {
  margin-top: 0 !important;
}
/* === ARTICLE CARDS — Destination pages === */
.hor-article-card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(26,26,24,0.07);
  transition: box-shadow 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
}
.hor-article-card:hover {
  box-shadow: 0 8px 28px rgba(26,26,24,0.12);
  transform: translateY(-4px);
}
.hor-article-card .wp-block-image {
  margin: 0 !important;
  overflow: hidden;
  flex-shrink: 0;
}
.hor-article-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.hor-article-card:hover .wp-block-image img {
  transform: scale(1.04);
}
.hor-article-card .hor-card-title,
.hor-article-card h3.wp-block-heading {
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  color: #1a1a18 !important;
  padding: 1rem 1.1rem 0.35rem !important;
  margin: 0 !important;
  text-transform: none !important;
}
.hor-article-card .hor-card-title a,
.hor-article-card h3.wp-block-heading a {
  color: #1a1a18 !important;
  text-decoration: none !important;
  background: none !important;
  transition: color 0.3s ease !important;
}
.hor-article-card .hor-card-title a:hover,
.hor-article-card h3.wp-block-heading a:hover {
  color: #1b2a41 !important;
  opacity: 1 !important;
}
.hor-article-card .hor-card-excerpt,
.hor-article-card .wp-block-paragraph {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
  color: #7a7a72 !important;
  padding: 0 1.1rem 1.1rem !important;
  margin: 0 !important;
  flex-grow: 1;
}
/* Consistent column gap for card grids */
.wp-block-columns:has(.hor-article-card) {
  gap: 1.25rem !important;
}
.wp-block-columns:has(.hor-article-card) .wp-block-column {
  padding: 0 !important;
}


/* ── House of Routes: Post Layout (content width + typography) ── */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 760px !important;
}
.single .entry-content h2,.single .wp-block-post-content h2{font-family:'Cormorant Garamond',Georgia,serif!important;font-style:italic;font-weight:600;font-size:2rem;line-height:1.25;color:#1b2a41;margin-top:2.5rem;margin-bottom:.75rem;letter-spacing:-.01em}
.single .entry-content h3,.single .wp-block-post-content h3{font-family:'Raleway',sans-serif!important;font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#1b2a41;margin-top:2rem;margin-bottom:.5rem}
.single .entry-content p,.single .wp-block-post-content p{font-size:1.05rem;line-height:1.85;color:#2a2a28}
.single .entry-content a,.single .wp-block-post-content a{color:#1b2a41;text-decoration-color:rgba(27,42,65,.3);text-underline-offset:3px}
.single .entry-content a:hover,.single .wp-block-post-content a:hover{color:#13202f;text-decoration-color:#1b2a41}
.single .entry-content hr,.single .wp-block-post-content hr{border:none;border-top:1px solid #e8ebe0;margin:2.5rem auto;width:60%}
.single .entry-content li,.single .wp-block-post-content li{font-size:1.05rem;line-height:1.85;color:#2a2a28;margin-bottom:.4rem}
.hor-related-reading{background:#fafbf3;border:1px solid #e8ebe0;border-radius:10px;padding:1.75rem 2rem;margin:3rem auto 2rem;max-width:760px}
.hor-related-reading h3{font-family:'Raleway',sans-serif!important;font-weight:700;font-size:.7rem!important;letter-spacing:.14em;text-transform:uppercase;color:#1b2a41!important;margin-top:0!important;margin-bottom:1rem!important}
.hor-related-reading ul{list-style:none;padding-left:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem}
.hor-related-reading ul li::before{content:"\2192\A0";color:#1b2a41;font-weight:600}
.hor-related-reading ul a{color:#2a2a28;text-decoration:none;font-size:.92rem}
.hor-related-reading ul a:hover{color:#1b2a41;text-decoration:underline}
.hor-map-btn{display:inline-flex;align-items:center;gap:.4rem;background:#1b2a41;color:#fff!important;padding:.45rem 1rem;border-radius:50px;font-size:.82rem;font-family:'Raleway',sans-serif;font-weight:600;text-decoration:none!important;margin:.5rem .25rem .5rem 0;transition:background .2s,transform .15s}
.hor-map-btn:hover{background:#13202f!important;transform:translateY(-1px)}
@media(max-width:680px){.hor-related-reading ul{grid-template-columns:1fr}.single .entry-content h2,.single .wp-block-post-content h2{font-size:1.65rem}}

/* HOR Post Layout */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
.wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:760px!important}
.single .entry-content h2,.single .wp-block-post-content h2{font-family:'Cormorant Garamond',Georgia,serif!important;font-style:italic;font-weight:600;font-size:2rem;line-height:1.25;color:#1b2a41;margin-top:2.5rem;margin-bottom:.75rem}
.single .entry-content h3,.single .wp-block-post-content h3{font-family:'Raleway',sans-serif!important;font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#1b2a41;margin-top:2rem;margin-bottom:.5rem}
.single .entry-content p,.single .wp-block-post-content p{font-size:1.05rem;line-height:1.85;color:#2a2a28}
.single .entry-content a,.single .wp-block-post-content a{color:#1b2a41;text-decoration-color:rgba(27,42,65,.3);text-underline-offset:3px}
.single .entry-content a:hover,.single .wp-block-post-content a:hover{color:#13202f;text-decoration-color:#1b2a41}
.single .entry-content hr,.single .wp-block-post-content hr{border:none;border-top:1px solid #e8ebe0;margin:2.5rem auto;width:60%}
.single .entry-content li,.single .wp-block-post-content li{font-size:1.05rem;line-height:1.85;color:#2a2a28;margin-bottom:.4rem}
.hor-related-reading{background:#fafbf3;border:1px solid #e8ebe0;border-radius:10px;padding:1.75rem 2rem;margin:3rem auto 2rem;max-width:760px}
.hor-related-reading h3{font-family:'Raleway',sans-serif!important;font-weight:700;font-size:.7rem!important;letter-spacing:.14em;text-transform:uppercase;color:#1b2a41!important;margin-top:0!important;margin-bottom:1rem!important}
.hor-related-reading ul{list-style:none;padding-left:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem}
.hor-related-reading ul li::before{content:'\2192  ';color:#1b2a41;font-weight:600}
.hor-related-reading ul a{color:#2a2a28;text-decoration:none;font-size:.92rem}
.hor-related-reading ul a:hover{color:#1b2a41;text-decoration:underline}
.hor-map-btn{display:inline-flex;align-items:center;gap:.4rem;background:#1b2a41;color:#fff!important;padding:.45rem 1rem;border-radius:50px;font-size:.82rem;font-family:'Raleway',sans-serif;font-weight:600;text-decoration:none!important;margin:.5rem .25rem .5rem 0;transition:background .2s,transform .15s}
.hor-map-btn:hover{background:#13202f!important;transform:translateY(-1px)}
@media(max-width:680px){.hor-related-reading ul{grid-template-columns:1fr}.single .entry-content h2,.single .wp-block-post-content h2{font-size:1.65rem}}


/* Mango — map button centering */
.hor-map-buttons { text-align: center; margin: 0.25rem 0 1.25rem; }


/* ================================================
   UX POLISH v2 — Pure CSS effects, no JS overhead
   ================================================ */

/* 1. HOMEPAGE HERO — entrance animations on load */
body.home h2.has-cormorant-garamond-font-family {
  animation: hor-title-enter 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.home p.has-x-large-font-size {
  animation: hor-sub-enter 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
body.home .wp-block-columns .wp-block-column:last-child > p {
  animation: hor-sub-enter 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
@keyframes hor-title-enter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hor-sub-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2. HOMEPAGE HERO — thin decorative rule under title */
body.home h2.has-cormorant-garamond-font-family {
  position: relative;
  padding-bottom: 1.2rem;
}
body.home h2.has-cormorant-garamond-font-family::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 1px;
  background: #1b2a41;
  opacity: 0.5;
  animation: hor-line-grow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
@keyframes hor-line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 52px; opacity: 0.5; }
}

/* 3. SECTION HEADINGS — centered accent line */
h2.wp-block-heading.has-text-align-center {
  padding-bottom: 1.2rem;
  position: relative;
}
h2.wp-block-heading.has-text-align-center::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 1px;
  background: #1b2a41;
  opacity: 0.55;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
h2.wp-block-heading.has-text-align-center:hover::after { width: 60px; }

/* 4. READING PROGRESS BAR — enhanced (3px, richer gradient) */
body.single-post::before {
  height: 3px !important;
  background: linear-gradient(90deg, #1b2a41 0%, #1b2a41 65%, #1b2a41 100%) !important;
}

/* 5. ARTICLE CARDS — teal gradient overlay on hover */
.hor-article-card figure {
  position: relative;
  isolation: isolate;
}
.hor-article-card figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,42,65,0.22) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hor-article-card:hover figure::after { opacity: 1; }

/* 6. COVER IMAGE — graceful fade in using @starting-style */
.wp-block-cover .wp-block-cover__image-background {
  transition: opacity 0.9s ease;
}
@starting-style {
  .wp-block-cover .wp-block-cover__image-background { opacity: 0; }
}

/* 7. HEADER — subtle depth shadow */
.wp-block-template-part[class*="header"],
header.wp-block-template-part,
#masthead, .site-header {
  box-shadow: 0 1px 16px rgba(26, 26, 24, 0.07);
}

/* 8. BUTTON — refined fill transition */
.wp-block-button__link {
  transition:
    background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* 9. SELECTION HIGHLIGHT */
::selection { background: rgba(27,42,65, 0.15); color: #1b2a41; }

/* ================================================
   POST EDITORIAL STYLING — all single posts
   ================================================ */
/* 1. DROP CAP */
.single .wp-block-post-content .wp-block-paragraph:first-of-type::first-letter {
  float: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5rem; font-weight: 700; line-height: 0.75;
  margin-right: 0.09em; margin-top: 0.08em; color: #1b2a41;
}
/* 2. LEDE PARAGRAPH */
.single .wp-block-post-content .wp-block-paragraph:first-of-type {
  font-size: 1.2rem !important; color: #1a1a18 !important;
  line-height: 1.9 !important; font-weight: 400;
}
/* 3. H2 — teal rule above */
.single .entry-content h2::before,
.single .wp-block-post-content h2::before {
  content: ''; display: block; width: 30px; height: 2px;
  background: #1b2a41; opacity: 0.45; margin-bottom: 0.8rem;
}
/* 4. ORNAMENTAL DIVIDER */
.single .wp-block-separator:not(.is-style-wide),
.single .entry-content hr, .single .wp-block-post-content hr {
  border: none !important; background: none !important;
  height: auto !important; text-align: center; overflow: visible;
  margin: 3.5rem auto !important; max-width: 100% !important;
}
.single .wp-block-separator:not(.is-style-wide)::after,
.single .entry-content hr::after, .single .wp-block-post-content hr::after {
  content: '\B7  \B7  \B7';
  display: block; color: #1b2a41; opacity: 0.4;
  font-size: 1.1rem; letter-spacing: 0.6rem;
}
/* 5. BLOCKQUOTE */
.single .wp-block-quote, .single .entry-content blockquote {
  position: relative !important;
  border-left: 2px solid rgba(27,42,65,0.35) !important;
  background: rgba(27,42,65,0.03) !important;
  padding: 1.75rem 1.75rem 1.5rem 2.25rem !important;
  margin: 3rem 0 !important; border-radius: 0 10px 10px 0 !important;
}
.single .wp-block-quote::before, .single .entry-content blockquote::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5rem; line-height: 1; color: #1b2a41; opacity: 0.18;
  position: absolute; top: -0.6rem; left: 0.75rem; pointer-events: none;
}
.single .wp-block-quote p, .single .entry-content blockquote p {
  font-size: 1.1rem !important; font-style: italic !important;
  line-height: 1.75 !important; color: #1a1a18 !important;
}
/* 6. LIST ARROWS */
.single .entry-content ul:not([class]), .single .wp-block-post-content ul:not([class]) {
  list-style: none !important; padding-left: 0 !important;
}
.single .entry-content ul:not([class]) li, .single .wp-block-post-content ul:not([class]) li {
  padding-left: 1.6rem !important; position: relative; margin-bottom: 0.55rem;
}
.single .entry-content ul:not([class]) li::before, .single .wp-block-post-content ul:not([class]) li::before {
  content: '\2192'; position: absolute; left: 0;
  color: #1b2a41; opacity: 0.65; font-size: 0.85rem; top: 0.25em;
}
/* 7. CAPTIONS */
.single figcaption, .single .wp-block-image figcaption {
  text-align: center !important; font-size: 0.73rem !important;
  letter-spacing: 0.07em; color: #7a7a72 !important;
  font-style: italic; margin-top: 0.65rem !important; opacity: 0.8;
}
/* 8. IMAGES */
.single .wp-block-image img { border-radius: 6px !important; }
/* 9. POST TITLE ACCENT */
.single .wp-block-post-title { position: relative; padding-bottom: 1rem !important; }
.single .wp-block-post-title::after {
  content: ''; display: block; width: 44px; height: 2px;
  background: #1b2a41; margin-top: 0.8rem; opacity: 0.5;
}
/* ================================================
   TOP READS PAGE — wider grid, bigger cards
   ================================================ */
/* Override the 760px max-width for the blog query block */
body.blog .wp-block-query.alignwide {
  max-width: min(78%, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 3-column grid (cards bigger than 4-col) */
body.blog .wp-block-post-template.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  background: none !important;
}
/* Card base */
body.blog .wp-block-post {
  background: #ffffff !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(26,26,24,0.07) !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  display: flex !important;
  flex-direction: column !important;
}
body.blog .wp-block-post:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(26,26,24,0.13) !important;
}
/* Featured image — taller portrait */
body.blog .wp-block-post-featured-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
body.blog .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1) !important;
}
body.blog .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.05) !important;
}
/* Card text area */
body.blog .wp-block-post .wp-block-group {
  padding: 0.75rem 1rem 1rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
/* Date — small uppercase */
body.blog .wp-block-post-date {
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1b2a41 !important;
  opacity: 0.8 !important;
}
/* Title */
body.blog .wp-block-post-title {
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.blog .wp-block-post-title::after { display: none !important; }
body.blog .wp-block-post-title a {
  color: #1a1a18 !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}
body.blog .wp-block-post-title a:hover { color: #1b2a41 !important; }
/* Remove spacers */
body.blog .wp-block-post .wp-block-spacer { display: none !important; }
/* Responsive */
@media (max-width: 900px) {
  body.blog .wp-block-post-template.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 580px) {
  body.blog .wp-block-post-template.columns-4 {
    grid-template-columns: 1fr !important;
  }
}
body.blog .wp-block-post-template.columns-4 .wp-block-post { width: 100% !important; min-width: 0 !important; }
/* BACK TO TOP — CSS scroll-driven, appears after 400px */
.hor-top-btn {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  background: #1b2a41; color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1.1rem; line-height: 1;
  box-shadow: 0 4px 16px rgba(27,42,65,0.35);
  opacity: 0; pointer-events: none;
  animation: hor-show-top linear both;
  animation-timeline: scroll(root);
  animation-range: 400px 600px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hor-top-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(27,42,65,0.45); opacity: 1 !important; color: #fff !important; }
@keyframes hor-show-top { to { opacity: 1; pointer-events: auto; } }
/* SEARCH — styles ready for when you add the Search block to nav */
.wp-block-search__inside-wrapper {
  border: none !important; border-radius: 40px !important;
  background: rgba(27,42,65,0.07) !important;
  overflow: hidden;
}
.wp-block-search__input {
  background: transparent !important; border: none !important;
  padding: 0.45rem 1rem !important; font-size: 0.82rem !important;
  letter-spacing: 0.04em; color: #1a1a18 !important;
}
.wp-block-search__input::placeholder { color: #7a7a72; opacity: 0.7; }
.wp-block-search__button {
  background: #1b2a41 !important; color: #fff !important;
  border: none !important; border-radius: 0 40px 40px 0 !important;
  padding: 0.45rem 1rem !important; font-size: 0.75rem !important;
  letter-spacing: 0.08em; cursor: pointer;
  transition: background 0.3s !important;
}
.wp-block-search__button:hover { background: #13202f !important; }
.search .wp-block-query.alignwide { max-width: min(78%, 1240px) !important; }
.search .wp-block-post-template.columns-4 { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 2rem !important; background: none !important; }
.search .wp-block-post-template.columns-4 .wp-block-post { width: 100% !important; }

/* CARD PLACEHOLDER — elegant gradient when no image */
body.blog .wp-block-post-featured-image:empty,
body.blog .wp-block-post-featured-image:not(:has(img)) {
  background: linear-gradient(135deg, #f0ede8 0%, #e2dfd9 100%) !important;
}
/* LOGO/SITE NAME — refined */
.wp-site-blocks .wp-block-site-title a,
.wp-block-site-title a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.1rem !important; font-weight: 600 !important;
  letter-spacing: 0.06em !important; color: #1a1a18 !important;
  text-decoration: none !important;
}
/* CATEGORY — teal chip above post title on archive cards */
body.blog .wp-block-post-terms {
  display: inline-block;
  font-size: 0.65rem !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; font-weight: 600 !important;
  color: #1b2a41 !important; margin-bottom: 0.3rem !important;
}
/* POST CONTENT — tighten paragraph spacing */
.single .wp-block-post-content .wp-block-paragraph { margin-bottom: 1.4rem !important; }
.single .wp-block-post-content .wp-block-paragraph + .wp-block-paragraph { margin-top: 0 !important; }
/* STICKY SHARE HINT on articles */
.single .wp-block-post-content { position: relative; }
/* FOOTER — ready for when content is added */
.wp-block-template-part[class*='footer'] {
  border-top: 1px solid rgba(27,42,65,0.12);
  padding-top: 3rem !important;
  background: #f7f4ee !important;
}
.wp-block-template-part[class*='footer'] p,
.wp-block-template-part[class*='footer'] a {
  font-size: 0.78rem !important; letter-spacing: 0.06em;
  color: #7a7a72 !important; text-transform: uppercase;
}
.wp-block-template-part[class*='footer'] a:hover { color: #1b2a41 !important; opacity: 1 !important; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* NAV — current page indicator */
.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current-page-ancestor > a {
  opacity: 1 !important;
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 1px !important;
}
/* PAGINATION — styled */
.wp-block-query-pagination {
  display: flex !important; justify-content: center !important;
  gap: 0.5rem !important; margin-top: 3rem !important;
  padding-bottom: 4rem !important;
}
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  border: 1px solid rgba(27,42,65,0.3) !important;
  padding: 0.4rem 0.9rem !important; border-radius: 4px !important;
  font-size: 0.78rem !important; letter-spacing: 0.06em !important;
  color: #1b2a41 !important; text-decoration: none !important;
  transition: background 0.3s, color 0.3s !important;
}
.wp-block-query-pagination-numbers a:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  background: #1b2a41 !important; color: #fff !important;
}
/* TOP READS PAGE SEARCH — integrated above grid */
body.blog .wp-block-search {
  max-width: min(50%, 600px) !important;
  margin: 0 auto 2.5rem !important;
  display: block !important;
}
body.blog .wp-block-search .wp-block-search__inside-wrapper {
  border: 1px solid rgba(27,42,65,0.25) !important;
  border-radius: 50px !important;
  background: rgba(255,255,255,0.7) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(27,42,65,0.08) !important;
}
body.blog .wp-block-search__input {
  background: transparent !important;
  border: none !important;
  padding: 0.7rem 1.25rem !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
  color: #1a1a18 !important;
  font-family: inherit !important;
}
body.blog .wp-block-search__input::placeholder { color: #7a7a72 !important; opacity: 0.8; }
body.blog .wp-block-search__button {
  background: #1b2a41 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  padding: 0.7rem 1.25rem !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
}
body.blog .wp-block-search__button:hover { background: #13202f !important; }


/* ================================================
   RELATED POSTS PLUGIN — relpost grid fix
   ================================================ */
.relpost-thumb-wrapper { margin: 2rem 0 1.5rem; }
.relpost-thumb-container h3 { font-family: 'Raleway', sans-serif !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: #1b2a41 !important; margin-bottom: 1.25rem !important; margin-top: 0 !important; }
.relpost-thumb-container > ul { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.relpost-thumb-container > ul > li { display: flex !important; flex-direction: column !important; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid #e8ebe0; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.relpost-thumb-container > ul > li:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(27,42,65,0.12); }
.relpost-post-image { width: 100% !important; height: 140px !important; object-fit: cover !important; border-radius: 0 !important; display: block !important; margin-bottom: 0 !important; }
.relpost_content { font-size: 0.83rem !important; font-weight: 500 !important; color: #1a1a18 !important; line-height: 1.4 !important; padding: 0.75rem 0.9rem !important; display: block; text-decoration: none !important; }
.relpost_content:hover { color: #1b2a41 !important; }
.relpost-thumb-wrapper > span { display: none !important; }
@media (max-width: 680px) { .relpost-thumb-container > ul { grid-template-columns: repeat(2, 1fr) !important; } }

/* ================================================
   ARTICLE VITALS STRIP
   ================================================ */
.hor-vitals { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; padding: 1rem 0; margin: 1.5rem 0 2rem; border-top: 1px solid #e8ebe0; border-bottom: 1px solid #e8ebe0; }
.hor-vitals__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7a7a72; font-family: 'Raleway', sans-serif; font-weight: 600; }
.hor-vitals__icon { font-size: 0.85rem; opacity: 0.7; }

/* ================================================
   KEY TAKEAWAYS BOX
   ================================================ */
.hor-takeaways { background: linear-gradient(135deg, #fbf6ec 0%, #fbf6ec 100%); border: 1px solid rgba(27,42,65,0.2); border-left: 3px solid #1b2a41; border-radius: 0 10px 10px 0; padding: 1.5rem 1.75rem; margin: 2rem 0; }
.hor-takeaways__label { display: block; font-family: 'Raleway', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #1b2a41; margin-bottom: 0.85rem; }
.hor-takeaways ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.hor-takeaways ul li { font-size: 0.95rem !important; line-height: 1.65 !important; color: #2a2a28 !important; padding-left: 1.4rem !important; position: relative; margin-bottom: 0.45rem !important; }
.hor-takeaways ul li::before { content: '\2713'; position: absolute; left: 0; color: #1b2a41; font-weight: 700; font-size: 0.85rem; }

/* ================================================
   BADGES / TAGS
   ================================================ */
.hor-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 1.5rem; }
.hor-tag { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.72rem; font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none !important; }
.hor-tag--teal  { background: rgba(27,42,65,0.1); color: #1b2a41; }
.hor-tag--sand  { background: rgba(181,80,60,0.09); color: #b5503c; }
.hor-tag--stone { background: #f0ede8; color: #5a5a52; }
.hor-tag--green { background: rgba(22,163,74,0.1); color: #1b2a41; }

/* ================================================
   CALLOUT VARIANTS — tip / warning / info / note
   ================================================ */
.hor-callout { display: flex; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 8px; margin: 1.75rem 0; border-left: 3px solid; }
.hor-callout__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }
.hor-callout__body { flex: 1; }
.hor-callout__body strong { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; }
.hor-callout__body p { font-size: 0.93rem !important; line-height: 1.65 !important; margin: 0 !important; color: inherit !important; }
.hor-callout--tip { background: rgba(27,42,65,0.05); border-color: #1b2a41; color: #13202f; }
.hor-callout--tip .hor-callout__body strong { color: #1b2a41; }
.hor-callout--warning { background: rgba(217,119,6,0.06); border-color: #b5503c; color: #b5503c; }
.hor-callout--warning .hor-callout__body strong { color: #b5503c; }
.hor-callout--info { background: rgba(37,99,235,0.05); border-color: #1b2a41; color: #1b2a41; }
.hor-callout--info .hor-callout__body strong { color: #1b2a41; }
.hor-callout--note { background: #f7f6f3; border-color: #b0ada6; color: #4a4a42; }
.hor-callout--note .hor-callout__body strong { color: #5a5a52; }

/* ================================================
   RELATED POSTS PLUGIN — hidden globally, use .hor-related-reading instead
   ================================================ */
.relpost-thumb-wrapper { display: none !important; }

/* COMPARISON CARDS */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.cmp-card { padding: 1.4rem 1.6rem; background: #fff; border: 1px solid #e8ebe0; border-radius: 10px; }
.cmp-badge { display: inline-block; padding: 0.28rem 0.75rem; background: #1b2a41; color: #fff; font-family: 'Raleway', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 50px; margin-bottom: 0.85rem; }
.cmp-card h4 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #1b2a41; }
.cmp-card p { font-size: 0.92rem !important; line-height: 1.6 !important; color: #2a2a28 !important; margin: 0.25rem 0 !important; }
.cmp-card ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.cmp-card ul li { font-size: 0.92rem; line-height: 1.6; color: #2a2a28; margin-bottom: 0.25rem; }
@media (max-width: 600px) { .cmp-cards { grid-template-columns: 1fr; } }

/* FIX: checklist label layout */
.hor-checklist label { display: block !important; margin-bottom: 0.7rem !important; line-height: 1.6 !important; cursor: pointer; }
.hor-checklist input[type="checkbox"] { margin-right: 0.6rem; accent-color: #1b2a41; cursor: pointer; vertical-align: middle; }

/* Fix: nav responsive-container missing block CSS on single post pages */
.wp-block-navigation__responsive-container.is-menu-open {
  display: flex;
  flex-direction: column;
}
/* ================================================
   FIX: Force desktop navigation to display
   ================================================ */
@media (min-width: 782px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
  }
  nav.wp-block-navigation {
    display: flex !important;
  }
  .wp-block-navigation-item {
    display: flex !important;
  }
}



/* ================================================
   COMPREHENSIVE NAVIGATION FIX - ALL PAGES
   Ensures horizontal nav display across all articles
   ================================================ */

/* Desktop: Hide hamburger button, show horizontal nav */
@media (min-width: 782px) {
  /* Hide the hamburger toggle button */
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* Show responsive container as horizontal menu */
  .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: auto !important;
  }

  /* Ensure nav items display inline */
  .wp-block-navigation__responsive-container .wp-block-navigation-item {
    display: inline-flex !important;
    margin: 0 1rem !important;
    padding: 0 !important;
  }

  /* Remove modal/dropdown styling */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
  }

  /* Ensure nav wrapper displays correctly */
  .wp-block-navigation__responsive-container ul,
  .wp-block-navigation__responsive-container nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }

  /* Close button should be hidden at desktop */
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
}


/* === GLITCH FIX 2026-06-20: restore ::before/::after glyphs sitewide === */
.hor-related-reading ul li::before{content:"\2192\A0" !important;}
.single .wp-block-post-content ul:not([class]) li::before{content:"\2192" !important;}
.single .wp-block-separator:not(.is-style-wide)::after,.single .entry-content hr::after,.single .wp-block-post-content hr::after{content:"\B7\A0\B7\A0\B7" !important;}
.single .wp-block-quote::before,.single .entry-content blockquote::before{content:"\201C" !important;}
.hor-warn li::before{content:"\26A0" !important;}
.hor-tip li::before{content:"\2713" !important;}
.hor-warn li::before,.hor-tip li::before,.hor-list li::before{font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif !important;}

.hor-tip,.hor-warn,.hor-callout,.hor-callout--tip,.hor-callout--warning,.hor-callout--info,.hor-callout--note,.hor-checklist{background:#fbf6ec !important;border-color:rgba(27,42,65,.14) !important;border-left:5px solid #b5503c !important;border-radius:12px !important;}
.hor-tip li::before,.hor-warn li::before,.hor-callout li::before,.hor-checklist li::before{color:#b5503c !important;font-family:inherit !important;}



/* === 9. TOP READS EDITORIAL CARDS === */
body.blog .wp-block-post-template {
    gap: 34px 30px !important;
    align-items: stretch;
}

body.blog .wp-block-post-template .wp-block-post {
    background: #fffdf9;
    border: 1px solid rgba(2, 14, 1, 0.08);
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(2, 14, 1, 0.06);
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.blog .wp-block-post-template .wp-block-post:hover {
    border-color: rgba(2, 14, 1, 0.14);
    box-shadow: 0 18px 48px rgba(2, 14, 1, 0.10);
    transform: translateY(-3px);
}

body.blog .hor-card-image {
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

body.blog .hor-card-image::before,
body.blog .hor-card-image::after {
    display: none !important;
    content: none !important;
}

body.blog .wp-block-post-featured-image,
body.blog .wp-block-post-featured-image a {
    border-radius: 10px 10px 0 0 !important;
}

body.blog .wp-block-post-featured-image img {
    aspect-ratio: 4 / 5;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    filter: saturate(0.94) contrast(1.03);
}

body.blog .hor-card-title {
    position: static !important;
    transform: none !important;
    width: auto !important;
    padding: 18px 18px 0 !important;
    background: transparent !important;
    color: #020e01 !important;
    text-align: left !important;
}

body.blog .hor-card-title .wp-block-post-title {
    margin: 0 !important;
    color: #020e01 !important;
    font-size: clamp(23px, 2.2vw, 30px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.blog .hor-card-title .wp-block-post-title a {
    color: inherit !important;
    text-decoration: none !important;
}

body.blog .hor-title-main,
body.blog .hor-title-sub {
    display: inline !important;
}

body.blog .hor-title-main + .hor-title-sub::before {
    content: ': ';
}

body.blog .hor-title-sub {
    font-size: 0.74em !important;
    font-style: italic;
    line-height: 1.2;
    color: rgba(2, 14, 1, 0.70) !important;
}

body.blog .hor-card-excerpt {
    padding: 10px 18px 20px !important;
}

body.blog .wp-block-post-excerpt__excerpt {
    margin: 0 !important;
    color: rgba(2, 14, 1, 0.62) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

@media (max-width: 780px) {
    body.blog .wp-block-post-template {
        gap: 28px !important;
    }

    body.blog .hor-card-title .wp-block-post-title {
        font-size: 25px !important;
    }
}





/* CARD RESET */
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]{DISPLAY:FLEX!important;FLEX-DIRECTION:COLUMN!important;BACKGROUND:#FFFDF9!important;BORDER:1PX SOLID RGBA(2,14,1,.08)!important;BORDER-RADIUS:10PX!important;BOX-SHADOW:0 14PX 34PX RGBA(2,14,1,.06)!important;OVERFLOW:HIDDEN!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]{DISPLAY:FLEX!important;FLEX-DIRECTION:COLUMN!important;HEIGHT:AUTO!important;MIN-HEIGHT:0!important;OVERFLOW:VISIBLE!important;BACKGROUND:TRANSPARENT!important;BORDER-RADIUS:0!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::BEFORE,BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{DISPLAY:NONE!important;CONTENT:NONE!important;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-FEATURED-IMAGE" I]{ORDER:1;MARGIN:0!important;OVERFLOW:HIDDEN!important;BORDER-RADIUS:10PX 10PX 0 0!important;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-FEATURED-IMAGE" I] IMG{DISPLAY:BLOCK!important;WIDTH:100%!important;HEIGHT:AUTO!important;ASPECT-RATIO:4/5!important;OBJECT-FIT:COVER!important;FILTER:SATURATE(.95) CONTRAST(1.02)!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{ORDER:2;POSITION:STATIC!important;INSET:AUTO!important;WIDTH:AUTO!important;PADDING:18PX 18PX 0!important;BACKGROUND:TRANSPARENT!important;TEXT-ALIGN:LEFT!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I],BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] *{COLOR:#020E01!important;TEXT-SHADOW:NONE!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] [CLASS~="WP-BLOCK-POST-TITLE" I]{MARGIN:0!important;FONT-SIZE:25PX!important;LINE-HEIGHT:1.04!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-TITLE-MAIN" I],BODY[CLASS~="BLOG" I] [CLASS~="HOR-TITLE-SUB" I]{DISPLAY:INLINE!important;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-TITLE-MAIN" I]+[CLASS~="HOR-TITLE-SUB" I]::BEFORE{CONTENT:': ';}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-TITLE-SUB" I]{COLOR:RGBA(2,14,1,.68)!IMPORTANT;FONT-SIZE:.74EM!IMPORTANT;FONT-STYLE:ITALIC;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{MARGIN-TOP:AUTO!IMPORTANT;PADDING:10PX 18PX 20PX!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-EXCERPT__EXCERPT" I]{MARGIN:0!IMPORTANT;COLOR:RGBA(2,14,1,.62)!IMPORTANT;FONT-SIZE:13.5PX!IMPORTANT;LINE-HEIGHT:1.55!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]:NOT(:HAS([CLASS~="WP-BLOCK-POST-FEATURED-IMAGE" I])){MIN-HEIGHT:236PX!IMPORTANT;JUSTIFY-CONTENT:CENTER!IMPORTANT;BACKGROUND:LINEAR-GRADIENT(135DEG,#F7F1E8,#EFE4D6)!IMPORTANT;BORDER-BOTTOM:1PX SOLID RGBA(2,14,1,.07)!IMPORTANT;}



/* STRUCTURAL CARD FIX */
MAIN UL:HAS(>LI FIGURE)>LI{DISPLAY:FLEX!IMPORTANT;FLEX-DIRECTION:COLUMN!IMPORTANT;BACKGROUND:#FFFDF9!IMPORTANT;BORDER:1PX SOLID RGBA(2,14,1,.08)!IMPORTANT;BORDER-RADIUS:10PX!IMPORTANT;BOX-SHADOW:0 14PX 34PX RGBA(2,14,1,.06)!IMPORTANT;OVERFLOW:HIDDEN!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD{DISPLAY:FLEX!IMPORTANT;FLEX-DIRECTION:COLUMN!IMPORTANT;HEIGHT:AUTO!IMPORTANT;MIN-HEIGHT:0!IMPORTANT;OVERFLOW:VISIBLE!IMPORTANT;BACKGROUND:TRANSPARENT!IMPORTANT;BORDER-RADIUS:0!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD::BEFORE,MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD::AFTER{DISPLAY:NONE!IMPORTANT;CONTENT:NONE!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>FIGURE{ORDER:1;MARGIN:0!IMPORTANT;OVERFLOW:HIDDEN!IMPORTANT;BORDER-RADIUS:10PX 10PX 0 0!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>FIGURE IMG{DISPLAY:BLOCK!IMPORTANT;WIDTH:100%!IMPORTANT;HEIGHT:AUTO!IMPORTANT;ASPECT-RATIO:4/5!IMPORTANT;OBJECT-FIT:COVER!IMPORTANT;FILTER:SATURATE(.95) CONTRAST(1.02)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV{ORDER:2;POSITION:STATIC!IMPORTANT;INSET:AUTO!IMPORTANT;WIDTH:AUTO!IMPORTANT;PADDING:18PX 18PX 0!IMPORTANT;BACKGROUND:TRANSPARENT!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV *{COLOR:#020E01!IMPORTANT;TEXT-SHADOW:NONE!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV H2{MARGIN:0!IMPORTANT;FONT-SIZE:25PX!IMPORTANT;LINE-HEIGHT:1.04!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV SPAN{DISPLAY:INLINE!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV SPAN+SPAN::BEFORE{CONTENT:': ';}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV SPAN+SPAN{COLOR:RGBA(2,14,1,.68)!IMPORTANT;FONT-SIZE:.74EM!IMPORTANT;FONT-STYLE:ITALIC;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD+DIV{MARGIN-TOP:AUTO!IMPORTANT;PADDING:10PX 18PX 20PX!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD+DIV P{MARGIN:0!IMPORTANT;COLOR:RGBA(2,14,1,.62)!IMPORTANT;FONT-SIZE:13.5PX!IMPORTANT;LINE-HEIGHT:1.55!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD:NOT(:HAS(FIGURE)){MIN-HEIGHT:236PX!IMPORTANT;JUSTIFY-CONTENT:CENTER!IMPORTANT;BACKGROUND:LINEAR-GRADIENT(135DEG,#F7F1E8,#EFE4D6)!IMPORTANT;BORDER-BOTTOM:1PX SOLID RGBA(2,14,1,.07)!IMPORTANT;}



/* FINAL CARD STACK FIX */
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD{HEIGHT:AUTO!IMPORTANT;PADDING:0!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>FIGURE{POSITION:STATIC!IMPORTANT;HEIGHT:AUTO!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>FIGURE IMG{HEIGHT:AUTO!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV{HEIGHT:AUTO!IMPORTANT;MIN-HEIGHT:0!IMPORTANT;MARGIN:0!IMPORTANT;PADDING:18PX 18PX 0!IMPORTANT;}



/* ART-DIRECTED TOP READS */
MAIN UL:HAS(>LI FIGURE){GAP:42PX 32PX!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI{BACKGROUND:TRANSPARENT!IMPORTANT;BORDER:0!IMPORTANT;BOX-SHADOW:NONE!IMPORTANT;OVERFLOW:VISIBLE!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI{--TINT:34,64,50;--PAPER:#F3EAE0;}
MAIN UL:HAS(>LI FIGURE)>LI:NTH-CHILD(2){--TINT:92,112,100;--PAPER:#EEF0E8;}
MAIN UL:HAS(>LI FIGURE)>LI:NTH-CHILD(3){--TINT:142,103,54;--PAPER:#F3E7D4;}
MAIN UL:HAS(>LI FIGURE)>LI:NTH-CHILD(4){--TINT:31,48,66;--PAPER:#E9EDF0;}
MAIN UL:HAS(>LI FIGURE)>LI:NTH-CHILD(5){--TINT:126,73,54;--PAPER:#F0E2DA;}
MAIN UL:HAS(>LI FIGURE)>LI:NTH-CHILD(6){--TINT:98,108,74;--PAPER:#ECEBDD;}
MAIN UL:HAS(>LI FIGURE)>LI>NTH-CHILD(1),MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD{POSITION:RELATIVE!IMPORTANT;HEIGHT:330PX!IMPORTANT;MIN-HEIGHT:330PX!IMPORTANT;PADDING:0!IMPORTANT;OVERFLOW:HIDDEN!IMPORTANT;BORDER-RADIUS:14PX!IMPORTANT;BACKGROUND:LINEAR-GRADIENT(135DEG,RGBA(VAR(--TINT),.92),RGBA(VAR(--TINT),.46))!IMPORTANT;BOX-SHADOW:0 16PX 38PX RGBA(2,14,1,.10)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD::AFTER{DISPLAY:BLOCK!IMPORTANT;CONTENT:""!IMPORTANT;POSITION:ABSOLUTE!IMPORTANT;INSET:0!IMPORTANT;Z-INDEX:1!IMPORTANT;BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(VAR(--TINT),.72) 0%,RGBA(VAR(--TINT),.28) 42%,RGBA(VAR(--TINT),.84) 100%)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>FIGURE{POSITION:ABSOLUTE!IMPORTANT;INSET:0!IMPORTANT;HEIGHT:100%!IMPORTANT;MARGIN:0!IMPORTANT;BORDER-RADIUS:14PX!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>FIGURE IMG{WIDTH:100%!IMPORTANT;HEIGHT:100%!IMPORTANT;OBJECT-FIT:COVER!IMPORTANT;FILTER:SATURATE(.92) CONTRAST(1.02)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV{POSITION:ABSOLUTE!IMPORTANT;LEFT:0!IMPORTANT;RIGHT:0!IMPORTANT;BOTTOM:0!IMPORTANT;TOP:AUTO!IMPORTANT;Z-INDEX:2!IMPORTANT;HEIGHT:AUTO!IMPORTANT;MIN-HEIGHT:0!IMPORTANT;MARGIN:0!IMPORTANT;PADDING:22PX 22PX 24PX!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV H2{MARGIN:0!IMPORTANT;FONT-SIZE:27PX!IMPORTANT;LINE-HEIGHT:1.02!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV *{COLOR:#FFF8EF!IMPORTANT;TEXT-SHADOW:0 2PX 12PX RGBA(0,0,0,.28)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV SPAN{DISPLAY:BLOCK!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV SPAN+SPAN::BEFORE{CONTENT:""!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD>DIV SPAN+SPAN{MARGIN-TOP:6PX!IMPORTANT;FONT-SIZE:.66EM!IMPORTANT;LINE-HEIGHT:1.28!IMPORTANT;FONT-STYLE:ITALIC!IMPORTANT;COLOR:RGBA(255,248,239,.86)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD+DIV{POSITION:RELATIVE!IMPORTANT;Z-INDEX:3!IMPORTANT;MARGIN:-24PX 18PX 0!IMPORTANT;PADDING:16PX 18PX 18PX!IMPORTANT;BACKGROUND:VAR(--PAPER)!IMPORTANT;BORDER:1PX SOLID RGBA(2,14,1,.06)!IMPORTANT;BORDER-RADIUS:10PX!IMPORTANT;BOX-SHADOW:0 12PX 30PX RGBA(2,14,1,.09)!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD+DIV P{MARGIN:0!IMPORTANT;COLOR:RGBA(2,14,1,.68)!IMPORTANT;FONT-SIZE:13.5PX!IMPORTANT;LINE-HEIGHT:1.55!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
MAIN UL:HAS(>LI FIGURE)>LI>DIV:FIRST-CHILD:NOT(:HAS(FIGURE)){DISPLAY:FLEX!IMPORTANT;ALIGN-ITEMS:FLEX-END!IMPORTANT;}



/* FORCE ART CARD DETAILS */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{POSITION:ABSOLUTE!IMPORTANT;LEFT:0!IMPORTANT;RIGHT:0!IMPORTANT;BOTTOM:0!IMPORTANT;TOP:AUTO!IMPORTANT;Z-INDEX:5!IMPORTANT;HEIGHT:AUTO!IMPORTANT;MIN-HEIGHT:0!IMPORTANT;MARGIN:0!IMPORTANT;PADDING:22PX!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] *{COLOR:#FFF8EF!IMPORTANT;TEXT-SHADOW:0 2PX 12PX RGBA(0,0,0,.30)!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{POSITION:RELATIVE!IMPORTANT;Z-INDEX:8!IMPORTANT;MARGIN:-26PX 18PX 0!IMPORTANT;PADDING:16PX 18PX 18PX!IMPORTANT;BACKGROUND:#F1E7DA!IMPORTANT;BORDER:1PX SOLID RGBA(2,14,1,.07)!IMPORTANT;BORDER-RADIUS:10PX!IMPORTANT;BOX-SHADOW:0 12PX 30PX RGBA(2,14,1,.11)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I] P{MARGIN:0!IMPORTANT;COLOR:RGBA(2,14,1,.70)!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(2) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#E9EEE7!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(3) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#F1E4CE!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(4) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#E7EBEF!IMPORTANT;}



/* TOP TITLE + OVERLAP TWEAK */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(VAR(--TINT),.86) 0%,RGBA(VAR(--TINT),.48) 34%,RGBA(VAR(--TINT),.08) 72%,RGBA(VAR(--TINT),.30) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{TOP:0!IMPORTANT;BOTTOM:AUTO!IMPORTANT;LEFT:0!IMPORTANT;RIGHT:0!IMPORTANT;PADDING:24PX 22PX 18PX!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;ALIGN-ITEMS:FLEX-START!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] H2,BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] A,BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] SPAN{TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{MARGIN:-30PX -10PX 0!IMPORTANT;WIDTH:CALC(100% + 20PX)!IMPORTANT;}



/* CARD TITLE LEFT LOCK */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{DISPLAY:BLOCK!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] H2{WIDTH:100%!IMPORTANT;MAX-WIDTH:82%!IMPORTANT;MARGIN:0 AUTO 0 0!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] A{DISPLAY:BLOCK!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{TRANSFORM:TRANSLATEY(-4%)!IMPORTANT;}



/* STRONG GRADIENT + BIGGER EXCERPT */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]{POSITION:RELATIVE!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]>FIGURE{Z-INDEX:1!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{DISPLAY:BLOCK!IMPORTANT;CONTENT:""!IMPORTANT;POSITION:ABSOLUTE!IMPORTANT;INSET:0!IMPORTANT;Z-INDEX:2!IMPORTANT;POINTER-EVENTS:NONE!IMPORTANT;BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(VAR(--TINT),.96) 0%,RGBA(VAR(--TINT),.78) 24%,RGBA(VAR(--TINT),.30) 48%,RGBA(0,0,0,.05) 66%,RGBA(VAR(--TINT),.72) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{Z-INDEX:4!IMPORTANT;TOP:0!IMPORTANT;BOTTOM:AUTO!IMPORTANT;PADDING:24PX 22PX 18PX!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] [CLASS~="HOR-TITLE-MAIN" I]{DISPLAY:BLOCK!IMPORTANT;FONT-SIZE:1EM!IMPORTANT;LINE-HEIGHT:1.02!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] [CLASS~="HOR-TITLE-SUB" I]{DISPLAY:BLOCK!IMPORTANT;MARGIN-TOP:8PX!IMPORTANT;FONT-SIZE:.62EM!IMPORTANT;LINE-HEIGHT:1.22!IMPORTANT;FONT-STYLE:ITALIC!IMPORTANT;COLOR:RGBA(255,248,239,.88)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-TITLE-MAIN" I]+[CLASS~="HOR-TITLE-SUB" I]::BEFORE{CONTENT:""!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{MARGIN:-42PX -18PX 0!IMPORTANT;WIDTH:CALC(100% + 36PX)!IMPORTANT;PADDING:20PX 22PX 22PX!IMPORTANT;BORDER-RADIUS:14PX!IMPORTANT;TRANSFORM:NONE!IMPORTANT;}



/* FLOATING EXCERPT BUBBLE */
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]{OVERFLOW:VISIBLE!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]{OVERFLOW:HIDDEN!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND-IMAGE:LINEAR-GRADIENT(180DEG,RGBA(VAR(--TINT),.98) 0%,RGBA(VAR(--TINT),.78) 24%,RGBA(VAR(--TINT),.22) 52%,RGBA(VAR(--TINT),.58) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{POSITION:RELATIVE!IMPORTANT;Z-INDEX:20!IMPORTANT;MARGIN:-54PX -14PX 28PX!IMPORTANT;WIDTH:CALC(100% + 28PX)!IMPORTANT;PADDING:22PX 24PX!IMPORTANT;BACKGROUND:#F2E7D8!IMPORTANT;BORDER:1PX SOLID RGBA(2,14,1,.10)!IMPORTANT;BORDER-RADIUS:16PX!IMPORTANT;BOX-SHADOW:0 18PX 36PX RGBA(2,14,1,.14)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(2) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#E7EEE7!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(3) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#F1E2C8!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(4) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#E5EBEF!IMPORTANT;}



BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]{OVERFLOW:VISIBLE!IMPORTANT;BACKGROUND:TRANSPARENT!IMPORTANT;BOX-SHADOW:NONE!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]{OVERFLOW:HIDDEN!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{POSITION:RELATIVE!IMPORTANT;Z-INDEX:50!IMPORTANT;MARGIN:-54PX -14PX 30PX!IMPORTANT;WIDTH:CALC(100% + 28PX)!IMPORTANT;PADDING:22PX 24PX!IMPORTANT;BORDER-RADIUS:16PX!IMPORTANT;BOX-SHADOW:0 18PX 36PX RGBA(2,14,1,.16)!IMPORTANT;}


/* LET EXCERPT BUBBLE ESCAPE CARD */
MAIN [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]{OVERFLOW:VISIBLE!IMPORTANT;BACKGROUND:TRANSPARENT!IMPORTANT;BOX-SHADOW:NONE!IMPORTANT;}
MAIN [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]>DIV:FIRST-CHILD{OVERFLOW:HIDDEN!IMPORTANT;}
MAIN [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]>[CLASS~="HOR-CARD-EXCERPT" I]{MARGIN:-54PX -14PX 28PX!IMPORTANT;WIDTH:CALC(100% + 28PX)!IMPORTANT;}



/* TRUE FINAL CARD OVERRIDE */
BODY.BLOG .WP-BLOCK-POST-TEMPLATE>LI.WP-BLOCK-POST{OVERFLOW:VISIBLE!IMPORTANT;BACKGROUND:TRANSPARENT!IMPORTANT;BOX-SHADOW:NONE!IMPORTANT;}
BODY.BLOG .HOR-CARD-IMAGE{OVERFLOW:HIDDEN!IMPORTANT;}
BODY.BLOG .HOR-CARD-EXCERPT{POSITION:RELATIVE!IMPORTANT;Z-INDEX:50!IMPORTANT;MARGIN:-54PX -14PX 30PX!IMPORTANT;WIDTH:CALC(100% + 28PX)!IMPORTANT;PADDING:22PX 24PX!IMPORTANT;BORDER-RADIUS:16PX!IMPORTANT;BOX-SHADOW:0 18PX 36PX RGBA(2,14,1,.16)!IMPORTANT;}



/* TOP READS FINISHING POLISH */
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]{GAP:64PX 38PX!IMPORTANT;}
@MEDIA (MIN-WIDTH:900PX){BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]{GRID-TEMPLATE-COLUMNS:REPEAT(3,MINMAX(0,1FR))!IMPORTANT;MAX-WIDTH:1050PX!IMPORTANT;MARGIN-LEFT:AUTO!IMPORTANT;MARGIN-RIGHT:AUTO!IMPORTANT;}}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]{--TINT:50,72,55;--PAPER:#F1E8DA;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(2){--TINT:151,82,58;--PAPER:#E8EFE6;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(3){--TINT:172,132,64;--PAPER:#F2E3C8;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(4){--TINT:31,48,66;--PAPER:#E6EBEF;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(5){--TINT:126,67,48;--PAPER:#F0E1D8;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(6){--TINT:102,118,78;--PAPER:#EAEDDD;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(7){--TINT:38,94,82;--PAPER:#E4EEE9;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(8){--TINT:148,124,68;--PAPER:#F0E8D0;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND-IMAGE:LINEAR-GRADIENT(180DEG,RGBA(VAR(--TINT),.98) 0%,RGBA(VAR(--TINT),.78) 26%,RGBA(VAR(--TINT),.22) 54%,RGBA(VAR(--TINT),.64) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]::BEFORE{DISPLAY:BLOCK!IMPORTANT;MARGIN:0 0 10PX!IMPORTANT;COLOR:RGBA(255,248,239,.78)!IMPORTANT;FONT:700 10PX/1 RALEWAY,SANS-SERIF!IMPORTANT;LETTER-SPACING:.18EM!IMPORTANT;TEXT-SHADOW:0 2PX 10PX RGBA(0,0,0,.22)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(1) [CLASS~="HOR-CARD-TITLE" I]::BEFORE{CONTENT:"HOTELS";}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(2) [CLASS~="HOR-CARD-TITLE" I]::BEFORE{CONTENT:"BARCELONA";}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(3) [CLASS~="HOR-CARD-TITLE" I]::BEFORE{CONTENT:"FOOD";}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(4) [CLASS~="HOR-CARD-TITLE" I]::BEFORE{CONTENT:"RESTAURANTS";}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(5) [CLASS~="HOR-CARD-TITLE" I]::BEFORE{CONTENT:"ROME";}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(6) [CLASS~="HOR-CARD-TITLE" I]::BEFORE{CONTENT:"CUBA";}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] H2{MAX-WIDTH:88%!IMPORTANT;FONT-SIZE:26PX!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:VAR(--PAPER)!IMPORTANT;PADDING:20PX 24PX 21PX!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I] P{FONT-SIZE:12.8PX!IMPORTANT;LINE-HEIGHT:1.68!IMPORTANT;LETTER-SPACING:.01EM!IMPORTANT;}


/* REMOVE TOP READS CARD LABELS */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]::BEFORE{DISPLAY:NONE!IMPORTANT;CONTENT:NONE!IMPORTANT;}



/* CARD REFINEMENT PASS */
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]{GAP:76PX 38PX!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]{BORDER-RADIUS:16PX!IMPORTANT;BOX-SHADOW:0 18PX 42PX RGBA(2,14,1,.12)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-FEATURED-IMAGE" I] IMG{TRANSITION:TRANSFORM .9S CUBIC-BEZIER(.2,.8,.2,1),FILTER .9S EASE!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST" I]:HOVER [CLASS~="WP-BLOCK-POST-FEATURED-IMAGE" I] IMG{TRANSFORM:SCALE(1.045)!IMPORTANT;FILTER:SATURATE(1.02) CONTRAST(1.04)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{PADDING:24PX 24PX 18PX!IMPORTANT;}
BODY[[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] H2{FONT-SIZE:24PX!IMPORTANT;LINE-HEIGHT:1.08!IMPORTANT;MAX-WIDTH:92%!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-TITLE-SUB" I]{MARGIN-TOP:9PX!IMPORTANT;FONT-SIZE:.60EM!IMPORTANT;LINE-HEIGHT:1
	BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{MARGIN:-48PX 6PX 32PX!IMPORTANT;WIDTH:CALC(100% - 12PX)!IMPORTANT;PADDING:18PX 22PX 20PX!IMPORTANT;BORDER-RADIUS:18PX!IMPORTANT;BOX-SHADOW:0 16PX 34PX RGBA(2,14,1,.13)!IMPORTANT;}}]


/* WHITE + GOLD TOP READS SYSTEM */
BODY[CLASS~="BLOG" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(178,139,73,.22)!IMPORTANT;BORDER-RADIUS:18PX!IMPORTANT;BOX-SHADOW:0 18PX 44PX RGBA(2,14,1,.08)!IMPORTANT;OVERFLOW:VISIBLE!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]{BORDER-RADIUS:18PX 18PX 0 0!IMPORTANT;BOX-SHADOW:NONE!IMPORTANT;BACKGROUND:#FFFFFF!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{DISPLAY:BLOCK!IMPORTANT;CONTENT:""!IMPORTANT;POSITION:ABSOLUTE!IMPORTANT;INSET:0!IMPORTANT;Z-INDEX:2!IMPORTANT;POINTER-EVENTS:NONE!IMPORTANT;BACKGROUND:LINEAR-GRADIENT(180DERGBA(0,0,0,.52) 0%,RGBA(0,0,0,.30) 28%,RGBA(0,0,0,.06) 56%,RGBA(0,0,0,.18) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I]{Z-INDEX:4!IMPORTANT;TOP:0!IMPORTANT;BOTTOM:AUTO!IMPORTANT;PADDING:24PX 24PX 18PX!IMPORTANT;TEXT-ALIGN:LEFT!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-TITLE" I] *{COLOR:#FFFDF8!IMPORTANT;TEXT-SHADOW:0 2PX 14PX RGBA(0,0,0,.34)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;BORDER-RADIUS:16PX!IMPORTANT;BOX-SHADOW:0 16PX 34PX RGBA(2,14,1,.10)!IMPORTANT;}
/* FINAL BLACK GRADIENT WHITE CARD */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(0,0,0,.52) 0%,RGBA(0,0,0.30) 28%,RGBA(0,0,0,.06) 58%,RGBA(0,0,0,.16) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;}


/* FINAL OVERRIDE CORRECTED */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(0,0,0,.52) 0%,RGBA(0,0,0,.30) 28%,RGBA(0,0,0,.06) 58%,RGBA(0,0,0,.16) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;}


/* SPECIFIC FEED COLOR RESET */
.HOR-BLOG-FEED .HOR-CARD-IMAGE::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(0,0,0,.52) 0%,RGBA(0,0,0,.30) 28%,RGBA(0,0,0,.06) 58%,RGBA(0,0,0,.16) 100%)!IMPORTANT;}
.HOR-BLOG-FEED .HOR-CARD-EXCERPT{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;}


[CLASS~="HOR-BLOG-FEED" I] [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(0,0,0,.52) 0%,RGBA(0,0,0,.30) 28%,RGBA(0,0,0,.06) 58%,RGBA(0,0,0,.16) 100%)!IMPORTANT;}
[CLASS~="HOR-BLOG-FEED" I] [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;}


/* HIGH SPEC WHITE GOLD RESET */
BODY[CLASS~="BLOG" I] [CLASS~="HOR-BLOG-FEED" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(N) [CLASS~="HOR-CARD-IMAGE" I]::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(0,0,0,.52) 0%,RGBA(0,0,0,.30) 28%,RGBA(0,0,0,.06) 58%,RGBA(0,0,0,.16) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" I] [CLASS~="HOR-BLOG-FEED" I] [CLASS~="WP-BLOCK-POST-TEMPLATE" I]>LI[CLASS~="WP-BLOCK-POST" I]:NTH-CHILD(N) [CLASS~="HOR-CARD-EXCERPT" I]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;}


/* LOWERCASE FLAG FINAL RESET */
BODY[CLASS~="BLOG" i] [CLASS~="HOR-BLOG-FEED" i] [CLASS~="WP-BLOCK-POST-TEMPLATE" i]>LI[CLASS~="WP-BLOCK-POST" i]:NTH-CHILD(N) [CLASS~="HOR-CARD-IMAGE" i]::AFTER{BACKGROUND:LINEAR-GRADIENT(180DEG,RGBA(0,0,0,.52) 0%,RGBA(0,0,0,.30) 28%,RGBA(0,0,0,.06) 58%,RGBA(0,0,0,.16) 100%)!IMPORTANT;}
BODY[CLASS~="BLOG" i] [CLASS~="HOR-BLOG-FEED" i] [CLASS~="WP-BLOCK-POST-TEMPLATE" i]>LI[CLASS~="WP-BLOCK-POST" i]:NTH-CHILD(N) [CLASS~="HOR-CARD-EXCERPT" i]{BACKGROUND:#FFFFFF!IMPORTANT;BORDER:1PX SOLID RGBA(186,145,76,.46)!IMPORTANT;BORDER-TOP:3PX SOLID #C8A15A!IMPORTANT;}


/* LOWERCASE ATTRIBUTE FINAL RESET */
body[class~="blog" i] [class~="hor-blog-feed" i] [class~="wp-block-post-template" i]>li[class~="wp-block-post" i]:nth-child(n) [class~="hor-card-image" i]::after{background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.30) 28%,rgba(0,0,0,.06) 58%,rgba(0,0,0,.16) 100%)!important;}
body[class~="blog" i] [class~="hor-blog-feed" i] [class~="wp-block-post-template" i]>li[class~="wp-block-post" i]:nth-child(n) [class~="hor-card-excerpt" i]{background:#fff!important;border:1px solid rgba(186,145,76,.46)!important;border-top:3px solid #c8a15a!important;}

/* ============================================================
   HOUSE OF ROUTES — MASTER COMPONENT KIT
   Paste this ONCE into wp-admin (Appearance → Additional CSS,
   or a child-theme/mu-plugin stylesheet).
   Every article then uses the short snippets in hor-snippets.html.
   Palette: navy + terracotta + sand gold on marfil. Teal is retired.
   ============================================================ */

:root {
  --hor-marfil:     #F4EBDD;
  --hor-cream:      #FBF6EC;
  --hor-white:      #FFFFFF;
  --hor-navy:       #1B2A41;
  --hor-terracotta: #B5503C;
  --hor-sand:       #D4B97A;
  --hor-line:       rgba(27, 42, 65, 0.14);
  --hor-muted:      rgba(27, 42, 65, 0.60);
  --hor-radius:     12px;
  --hor-radius-sm:  8px;
  --hor-label-font: "Helvetica Neue", Arial, sans-serif;
}

/* --- Defensive reset: kill the Enroute icon-font glitch inside our kit --- */
[class^="hor-"] li::before,
[class^="hor-"] blockquote::before,
[class^="hor-"] hr::before { content: none !important; }

/* Shared text rhythm (inherits the post's body font on purpose) */
[class^="hor-"] { box-sizing: border-box; color: var(--hor-navy); }
[class^="hor-"] * { box-sizing: border-box; }

/* Uppercase section label used across components */
.hor-label {
  font-family: var(--hor-label-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--hor-navy);
  margin: 0 0 14px;
}
.hor-label--accent { color: var(--hor-terracotta); }

/* ---------------- 01 · BADGES & TAGS ---------------- */
.hor-badge {
  display: inline-block;
  font-family: var(--hor-label-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--hor-radius-sm);
  margin: 0 4px 4px 0;
}
.hor-badge--navy   { background: var(--hor-navy);        color: #fff; }
.hor-badge--terra  { background: var(--hor-terracotta);  color: #fff; }
.hor-badge--sand   { background: var(--hor-sand);        color: var(--hor-navy); }
.hor-badge--ghost  { background: rgba(27,42,65,.08);     color: var(--hor-navy); border: 1px solid rgba(27,42,65,.20); }
.hor-badge--outline{ background: #fff;                   color: var(--hor-terracotta); border: 1px solid var(--hor-terracotta); }
.hor-badge--pill   { border-radius: 20px; background: rgba(181,80,60,.12); color: var(--hor-terracotta); }

/* ---------------- 02 · COMPARATIVE TABLE ---------------- */
.hor-table-wrap {
  border-radius: var(--hor-radius);
  overflow: hidden;
  border: 1px solid var(--hor-line);
  margin: 1.5rem 0;
}
.hor-table { width: 100%; border-collapse: collapse; }
.hor-table th {
  background: var(--hor-navy);
  color: #fff;
  font-family: var(--hor-label-font);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
}
.hor-table td { padding: 11px 14px; font-size: 15px; }
.hor-table tbody tr:nth-child(odd)  { background: var(--hor-white); }
.hor-table tbody tr:nth-child(even) { background: var(--hor-cream); }
.hor-table .hor-star { color: var(--hor-terracotta); font-weight: 700; text-align: center; }

/* ---------------- 03 · CHECKLIST ---------------- */
.hor-card {
  background: var(--hor-cream);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 1.5rem 0;
}
.hor-card--topbar { border-top: 4px solid var(--hor-navy); }

.hor-check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--hor-white);
  border: 1px solid var(--hor-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 15px;
}
.hor-check-row:last-child { margin-bottom: 0; }
.hor-check-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--hor-terracotta);
  border-radius: 5px;
}

/* ---------------- 04 · PACKING / FEATURE GRID ---------------- */
.hor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) { .hor-grid { grid-template-columns: 1fr; } }
.hor-grid-item {
  display: flex;
  gap: 12px;
  background: var(--hor-white);
  border: 1px solid var(--hor-line);
  border-radius: 10px;
  padding: 12px 14px;
}
.hor-grid-item__icon { flex: 0 0 auto; color: var(--hor-terracotta); }
.hor-grid-item__icon svg { display: block; width: 22px; height: 22px; }
.hor-grid-item__title { font-size: 15px; font-weight: 700; }
.hor-grid-item__sub   { font-family: var(--hor-label-font); font-size: 12px; color: var(--hor-muted); }

/* ---------------- 05 · LOCATION PIN ---------------- */
.hor-pin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hor-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  margin: 1rem 0;
  font-weight: 700;
  font-size: 16px;
}
.hor-pin svg { display: block; width: 18px; height: 18px; color: var(--hor-terracotta); flex: 0 0 auto; }

/* ---------------- 06 · TIP CALLOUT ---------------- */
/* Named .hor-insight (not .hor-callout) — an older, unrelated .hor-callout
   system is already live in wp-admin Additional CSS; reusing that name
   would collide with it. */
.hor-insight {
  background: var(--hor-white);
  border-left: 4px solid var(--hor-terracotta);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 1.5rem 0;
  font-size: 15px;
}
.hor-insight__label {
  font-family: var(--hor-label-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hor-terracotta);
  margin-bottom: 5px;
}

/* ---------------- 07 · RELATED ARTICLES ---------------- */
.hor-related-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hor-white);
  border: 1px solid var(--hor-line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  text-decoration: none;
  color: var(--hor-navy);
}
.hor-related-item svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--hor-navy); }
.hor-related-item:hover { border-color: var(--hor-terracotta); }


/* === Partner CTA pinned to the right edge of the header === */
.wp-block-navigation { flex: 1 1 auto !important; }
.wp-block-navigation ul.wp-block-navigation__container { width: 100% !important; justify-content: flex-end !important; }
.wp-block-navigation .wp-block-navigation-item.hor-nav-cta { margin-left: 2.2rem !important; }
.wp-block-navigation .hor-nav-cta .wp-block-navigation-item__content { border: 1px solid rgba(181,80,60,.55); border-radius: 999px; padding: .5rem 1.05rem; color: #B5503C !important; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.wp-block-navigation .hor-nav-cta .wp-block-navigation-item__content:hover { background: #B5503C; color: #F4EBDD !important; border-color: #B5503C; }
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { justify-content: center !important; }
.wp-block-navigation__responsive-container.is-menu-open .hor-nav-cta { margin-left: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .hor-nav-cta .wp-block-navigation-item__content { padding: .6rem 1.4rem; }


/* --- top reads: no empty band before the footer (2026-10-12) ----------------
   The feed finished 208px above the footer - 64px inside the query, 48px of
   group padding and main's own 96px margin - which read as an empty block
   between the last card and the subscribe form. */
body.blog main.wp-block-group{ margin-bottom:24px !important; }
body.blog .hor-blog-feed{ padding-bottom:8px !important; }


/* ===========================================================
   2026-10-15 - quieter article modules + plain subscribe block
   No oversized slabs or headings; one hairline above the footer,
   not two; the subscribe control is a plain block, not a ticket.
   Delete this whole block to restore the previous treatment.
   =========================================================== */

/* --- the appended Related guides / FAQ / sources modules --- */
.hor-related-guides,
.hor-refresh-faq,
.hor-refresh-sources,
.hor-refresh-decision{
  margin:2.2rem 0 !important;
  padding:1.2rem 1.3rem !important;
  border-radius:3px !important;
  border:1px solid rgba(27,42,65,.13) !important;
  box-shadow:none !important;
}
.hor-related-guides{ background:#FBF6EC !important; }
.hor-related-guides h2,
.hor-refresh-faq h2,
.hor-refresh-sources h2,
.hor-refresh-decision h2{
  font:600 1.05rem/1.3 Jost,system-ui,sans-serif !important;
  color:#1B2A41 !important;
  margin:0 0 .8rem !important;
}
.hor-refresh-faq h3,
.hor-refresh-decision h3{
  font:600 .95rem/1.4 Jost,system-ui,sans-serif !important;
  color:#1B2A41 !important;
  margin:1rem 0 .25rem !important;
}
.hor-refresh-faq p,
.hor-refresh-sources p,
.hor-refresh-decision p{ font-size:.95rem !important; }
.hor-related-guides__eyebrow{ font-size:.58rem !important; margin:0 0 .3rem !important; }
.hor-related-guides a{
  padding:.65rem .8rem !important;
  border-radius:2px !important;
  font-weight:500 !important;
  font-size:.95rem !important;
}

/* --- footer: one hairline, not two, and no ticket treatment --- */
@media (min-width:900px){
  .hor-foot .hor-foot__top{
    background:#F7F0E4 !important;
    border-top:0 !important;
    box-shadow:none !important;
    padding:26px clamp(26px,3vw,44px) !important;
  }
  .hor-foot .hor-foot__top::after{ display:none !important; }
}
.hor-foot{ border-top:1px solid rgba(27,42,65,.14) !important; }

/* --- subscribe: a plain field and a plain block button --- */
.hor-foot .hor-foot__form input[type=email],
.hor-foot .wp-block-jetpack-subscriptions__container input[type=email]{
  background:#FFFDF8 !important;
  border:1px solid rgba(27,42,65,.26) !important;
  border-radius:2px !important;
  padding:11px 12px !important;
}
.hor-foot .hor-foot__form button[type=submit],
.hor-foot .hor-foot__form input[type=submit],
.hor-foot .wp-block-jetpack-subscriptions__container button[type=submit],
.hor-foot .wp-block-jetpack-subscriptions__container input[type=submit]{
  border-radius:2px !important;
  padding:11px 20px !important;
  font:600 12px/1 Jost,system-ui,sans-serif !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  transition:none !important;
}


/* ===========================================================
   2026-10-15b - the footer newsletter as a plain block
   The boarding-pass chrome comes off: the brand line, FROM/TO/
   DEPARTS, the stub, the barcode and the printer that fed it.
   The heading, the email field and the button stay.
   Delete this whole block to restore the boarding pass.
   =========================================================== */
.hor-foot .hor-pass__head,
.hor-foot .hor-pass__row,
.hor-foot .hor-pass__stub,
.hor-foot .hor-pass__code,
.hor-printer{ display:none !important; }

.hor-foot .hor-foot__top{
  background:#F7F0E4 !important;
  box-shadow:none !important;
  border-top:0 !important;
  border-radius:0 !important;
  padding:30px clamp(24px,3vw,44px) !important;
  clip-path:none !important;
  animation:none !important;
}
.hor-foot .hor-foot__top::after,
.hor-foot .hor-foot__top::before{ display:none !important; }

.hor-foot .hor-foot__h{ font-size:clamp(19px,1.5vw,22px) !important; max-width:34ch !important; }
.hor-foot .hor-foot__note{ display:block !important; }

/* no decorative dash above the appended module headings */
.hor-refresh-faq h2::before,
.hor-refresh-sources h2::before,
.hor-refresh-decision h2::before,
.hor-related-guides h2::before{ display:none !important; }

/* ===========================================================
   2026-10-15c - the trip-planning CTA, given some craft
   Was: an oversized Cormorant heading on line-height 1 that
   orphaned the last word, a paragraph inheriting the theme's
   loose serif leading, and a pill floating in a half-empty
   right column. Now a two-column card on a defined grid with
   a gold edge, a measured heading and a square button.
   =========================================================== */
section.hor-route-cta{
  max-width:980px !important;
  margin:2.4rem auto 3rem !important;
  padding:clamp(1.5rem,3.2vw,2rem) clamp(1.5rem,3.2vw,2.3rem) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:clamp(1.4rem,4vw,2.8rem) !important;
  row-gap:1.25rem !important;
  border-radius:3px !important;
  border-left:3px solid #D4B97A !important;
  background:#1B2A41 !important;
  color:#F4EBDD !important;
}
section.hor-route-cta span{
  display:block !important;
  color:#D4B97A !important;
  font:600 .6rem/1 Jost,system-ui,sans-serif !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
}
section.hor-route-cta strong{
  display:block !important;
  margin:.6rem 0 .5rem !important;
  max-width:19ch !important;
  font:500 clamp(1.45rem,2.6vw,1.85rem)/1.16 "Cormorant Garamond",Georgia,serif !important;
  color:#F4EBDD !important;
}
section.hor-route-cta p{
  margin:0 !important;
  max-width:52ch !important;
  font:400 .92rem/1.6 Jost,system-ui,sans-serif !important;
  color:rgba(244,235,221,.74) !important;
}
section.hor-route-cta>a{
  justify-self:end !important;
  padding:.85rem 1.4rem !important;
  border-radius:2px !important;
  background:#B5503C !important;
  color:#fff !important;
  font:600 .7rem/1 Jost,system-ui,sans-serif !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  transition:background .2s ease !important;
}
section.hor-route-cta>a:hover{ background:#C25F4A !important; }
@media(max-width:760px){
  section.hor-route-cta{ grid-template-columns:1fr !important; }
  section.hor-route-cta>a{ justify-self:stretch !important; text-align:center !important; white-space:normal !important; }
}


/* ===========================================================
   2026-10-15d - the orphaned printer
   The 2026-10-15b block above lists .hor-printer among the
   boarding-pass chrome to hide, but the hor-footer-thin snippet
   ends with  .hor-foot .hor-printer{display:block!important}
   which is more specific and wins. So the machine stayed on
   screen with no pass under it, its -12px lip sitting on top of
   THE BOARDING CALL. Snippets cannot be saved, so it is
   outranked from here instead.
   Delete this block too if the boarding pass is ever restored.
   =========================================================== */
html body .hor-foot .hor-printer{ display:none !important; }


/* ===========================================================
   2026-10-15e - the course-change burst, every room page
   When the room engine opens a course it restyles that whole
   subtree in one go. Every element carrying a transition then
   animates from its previous computed value, and every CSS
   reveal animation on those elements starts on the same frame.
   Measured: /deals/ ~50 transitions per dock click, /about/ up
   to 12 transitions plus 10 animations (rmWipe x5, rmTakeoff
   x3, rmPop). That simultaneous burst is the flash Alvaro has
   been seeing around the site.
   The class is put on <html> by a small script on each room
   page, on the click itself, and lifts 700ms later.
   Three things this has to get right, all learned the hard way:
     - on <html>, not .rm: the page's own opacity fade and the
       footer reveal blocks are outside the room
     - the class is repeated to clear the component transitions,
       which are declared !important at about (0,4,2); a single
       class is (0,1,1) and is simply ignored
     - the script freezes in the capture phase, before the
       engine's own click handler runs
   Delete this block and the per-page scripts to restore the
   old behaviour.
   =========================================================== */
html.dlx-still.dlx-still.dlx-still.dlx-still body *,
html.dlx-still.dlx-still.dlx-still.dlx-still body *::before,
html.dlx-still.dlx-still.dlx-still.dlx-still body *::after,
html.dlx-still.dlx-still.dlx-still.dlx-still body .rm,
html.dlx-still.dlx-still.dlx-still.dlx-still body .rm .rm-sec,
html.dlx-still.dlx-still.dlx-still.dlx-still body .rm .rm-sec *,
html.dlx-still.dlx-still.dlx-still.dlx-still body .rm-dock a{
  transition:none !important;
}
/* the reveal animations only ever fire at this moment, so suppressing them
   for the length of the swap is what round 21 of the room engine already
   asks for - it pins their duration and delay but leaves the name, which is
   why they still all went off together. */
/* 2026-10-15g - the kill is PERMANENT, not part of the freeze.
   Gating it on .dlx-still only postponed the burst: the class lifts after
   700ms, every animation-name comes back at the same instant and all ten
   entry animations start together, 0.7s after the course change instead of
   during it. Measured on /destinations/: 0 animations while frozen, then 10
   at t=870ms. Sampling only the first frame after a click misses this.
   Rooms are not supposed to animate on entry at all (round 21 of snippet 49
   pins their duration and delay but leaves the name), so the name goes for
   good. Verified: no element in an open course drops below opacity .1. */
html body .rm.rm .rm-sec.rm-sec *{
  animation-name:none !important;
}


/* === 2026-10-15f: the sand strip above the footer ==========================
   footer.footer-container carries 3rem of padding-top over its own sand
   background, while the block inside it (.hor-foot) is navy. On a page that
   ends in sand that strip is invisible; on a room page whose last course is
   navy it reads as a pale band glitching across the bottom of the screen,
   which is how it was reported on /about/. The padding does no work anywhere:
   the navy block inside already has 42px of its own.

   The rule that sets it is .wp-block-template-part[class*="footer"] at
   (0,2,0) with !important, so a plain html body footer.footer-container at
   (0,1,2) loses even with !important of its own. Name both classes.
   ========================================================================= */
html body footer.footer-container.wp-block-template-part,
html body .wp-block-template-part.footer-container[class*="footer"]{
  padding-top:0 !important;
  border-top:0 !important;
}
/* and the 1px hairline that was left behind (2026-10-16). With the padding
   gone, the footer container's own border-top sat directly on the seam -
   rgba(27,42,65,.12), but composited over the container's SAND background,
   so between a navy course and the navy footer it read as a pale line right
   across the screen. The navy block inside carries a second one at .14.
   Both go: the footer's own colour change is the separation. */
html body footer.footer-container .wp-block-group.hor-foot{
  border-top:0 !important;
}


/* === 2026-10-15h: the homepage corridor fires groups on one frame =========
   The "everything at once" burst had a second home. Block g killed the entry
   animations inside .rm-sec, which covers /about/, /deals/ and the continent
   rooms - but the homepage corridor is a separate engine with its own
   namespace (.mn-room / .mn-cam / .mn-world / .mn-sec), so none of it applied
   there. It has 46 animation rules; most already stagger themselves through
   var(--i) or var(--d), but seven fire a whole GROUP at animation-delay:0s:

     horStampIn   16 country posters   <- the worst of them by far
     mn-drop       5 deal cards
     mn-deal / mnRouteIn / ticket-in   4 route tickets
     horOfferIn    2 offers
     horWayRise    3 ways to reach us
     horWayRing    their 3 numerals

   Sixteen posters landing on the same frame is exactly the reported
   "all the things happen all at once very, very quickly".

   Do NOT fix this the way the rooms were fixed. animation-name:none works
   on .rm-sec because that content is visible without its animation; here the
   animation IS the reveal, and killing the name left the five deal cards
   invisible (measured: 5 elements under opacity .1 in the live course).
   The design is fine - the simultaneity is the fault - so the groups are
   given a cascade instead. The hero is untouched: it is locked work and its
   takeover is one deliberate transition on one element, not a burst.
   ========================================================================= */
/* the sixteen country posters */
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(1){ animation-delay:0ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(2){ animation-delay:55ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(3){ animation-delay:110ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(4){ animation-delay:165ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(5){ animation-delay:220ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(6){ animation-delay:275ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(7){ animation-delay:330ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(8){ animation-delay:385ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(9){ animation-delay:440ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(10){ animation-delay:495ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(11){ animation-delay:550ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(12){ animation-delay:605ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(13){ animation-delay:660ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(14){ animation-delay:715ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(15){ animation-delay:770ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-dest2.mn-live .mn-posters > *:nth-child(16){ animation-delay:825ms !important; }
/* the five deal cards */
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(1){ animation-delay:0ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(2){ animation-delay:75ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(3){ animation-delay:150ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(4){ animation-delay:225ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(5){ animation-delay:300ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(6){ animation-delay:375ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(7){ animation-delay:450ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-deals .mn-dcard:nth-child(8){ animation-delay:525ms !important; }
/* the route tickets */
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(1){ animation-delay:0ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(2){ animation-delay:75ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(3){ animation-delay:150ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(4){ animation-delay:225ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(5){ animation-delay:300ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(6){ animation-delay:375ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(7){ animation-delay:450ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live a.mn-route:nth-child(8){ animation-delay:525ms !important; }
/* the two offers */
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-book .mn-offer:nth-child(1){ animation-delay:0ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-book .mn-offer:nth-child(2){ animation-delay:90ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-book .mn-offer:nth-child(3){ animation-delay:180ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-live .mn-book .mn-offer:nth-child(4){ animation-delay:270ms !important; }
/* the three ways to reach us */
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(1){ animation-delay:0ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(2){ animation-delay:90ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(3){ animation-delay:180ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(4){ animation-delay:270ms !important; }
/* their numerals */
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(1) .mn-way__n{ animation-delay:0ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(2) .mn-way__n{ animation-delay:90ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(3) .mn-way__n{ animation-delay:180ms !important; }
html body .mn.mn.mn.mn .mn-world .mn-sec.mn-reach.mn-live .mn-way:nth-child(4) .mn-way__n{ animation-delay:270ms !important; }


/* === 2026-10-16a: three homepage notes, DESKTOP ONLY =====================
   The phone layout is deliberately untouched - every rule below sits inside
   the min-width:1025px query.

   1. The tan stripe under the header was not a border or a divider. The
      header ends at y=149 and .mn starts at y=181: a 32px margin-top on
      .entry-content.alignfull, with html's marfil showing through the gap.
      It only reads as a stripe because the header above it (#F7F3ED) and the
      room below it are both lighter than marfil.
   2. The set-menu header sat 52px down its course; it comes up to 22px.
      Scoped with :has(.mn-set) so the other courses keep their own spacing.
   3. The two booking cards get a country poster as a stamp in the empty
      space on their right, with matching right padding so the copy reflows
      instead of running under it. The phone layout ALREADY had these stamps
      at 62px via its own ::after - Spain and Thailand - so the desktop pair
      uses the same two countries rather than inventing a different set.
   ========================================================================= */
@media (min-width:1025px){
  html body.home .entry-content.alignfull{ margin-top:0 !important; }
  html body .mn.mn.mn .mn-world .mn-sec:has(.mn-set) > .mn-w{ padding-top:22px !important; }
  html body .mn.mn.mn .mn-world .mn-sec .mn-book .mn-offer{ position:relative !important; padding-right:168px !important; }
  html body .mn.mn.mn .mn-world .mn-sec .mn-book .mn-offer::after{ content:""; position:absolute; top:20px; right:24px;
    width:104px; aspect-ratio:4/5; background:center/cover no-repeat;
    filter:drop-shadow(0 8px 16px rgba(27,42,65,.28)); pointer-events:none; }
  html body .mn.mn.mn .mn-world .mn-sec .mn-book .mn-offer:nth-child(1)::after{ background-image:url(https://houseofroutes.com/wp-content/uploads/2026/10/Spain.png?w=320); transform:rotate(-4.5deg); }
  html body .mn.mn.mn .mn-world .mn-sec .mn-book .mn-offer:nth-child(2)::after{ background-image:url(https://houseofroutes.com/wp-content/uploads/2026/10/Thailand.png?w=320); transform:rotate(3.5deg); }
}

/* === HOR boarding call, phones (2026-10-16) =============================
   The field row carried flex:1 1 240px from the desktop ROW layout. The phone
   form is a COLUMN, so that basis became a 240px tall box around a 48px input:
   roughly 190px of dead screen between the field and BOARD. And the block had
   nothing moving in it. Phone only. */
@media (max-width:781px){
  html body .hor-foot form > p{ flex:0 0 auto !important; }
  html body .hor-foot form{ gap:12px !important; }

  /* a little route under the headline: two gold stops, a dashed leg, and
     something travelling it */
  html body .hor-foot .hor-foot__h{ position:relative !important; padding-bottom:32px !important; }
  html body .hor-foot .hor-foot__h::before{
    content:"" !important; position:absolute !important; left:50% !important; bottom:12px !important;
    width:220px !important; height:9px !important; margin-left:-110px !important; pointer-events:none !important;
    background:
      radial-gradient(circle 3.4px at 3.4px 50%, #D4B97A 3.2px, rgba(212,185,122,0) 3.4px) left center/16px 9px no-repeat,
      radial-gradient(circle 3.4px at 12.6px 50%, #D4B97A 3.2px, rgba(212,185,122,0) 3.4px) right center/16px 9px no-repeat,
      repeating-linear-gradient(90deg, rgba(244,235,221,.34) 0 5px, rgba(244,235,221,0) 5px 11px) center center/100% 1px no-repeat !important;
  }
  html body .hor-foot .hor-foot__h::after{
    content:"" !important; position:absolute !important; left:50% !important; bottom:13px !important;
    width:7px !important; height:7px !important; margin-left:-108px !important; border-radius:50% !important;
    background:#F4EBDD !important; box-shadow:0 0 8px rgba(244,235,221,.75) !important; pointer-events:none !important;
    animation:horFootRoute 5.4s ease-in-out infinite !important;
  }
  @keyframes horFootRoute{
    0%{ transform:translateX(0); opacity:0; }
    12%{ transform:translateX(24px); opacity:1; }
    70%{ transform:translateX(213px); opacity:1; }
    84%{ transform:translateX(213px); opacity:0; }
    100%{ transform:translateX(0); opacity:0; }
  }
}

/* the 240px basis is set by a snippet rule at (0,3,3); this has to out-class it */
@media (max-width:781px){
  html body .hor-foot.hor-foot .wp-block-jetpack-subscriptions__container form > p:has(input[type="email"]){ flex:0 0 auto !important; }
  html body .hor-foot.hor-foot .wp-block-jetpack-subscriptions__container form > p{ flex:0 0 auto !important; }
}

/* === HOR: Jost is not loaded, so stop asking for it (2026-10-16) ===========
   33 rules across the footer, the latest-guides rail and the injected article
   modules ask for Jost. It is not in document.fonts and never has been, so every
   one of them silently renders in system-ui - the wrong voice, and exactly the
   failure the Raleway + Cormorant rule exists to prevent.
   The rail reads var(--body) and blocks read the WP preset var, so defining those
   two fixes most of it outright; the literal "Jost, ..." declarations are remapped
   by selector below. Snippets own these rules and cannot be saved, so the
   Customizer is the only place this can live. */
:root{
  --body: "Raleway", system-ui, sans-serif;
  --wp--preset--font-family--jost: "Raleway", system-ui, sans-serif;
}
.has-jost-font-family,
.hor-foot__kick,
.hor-foot__rail,
.hor-foot__form input[type="email"],
.hor-foot__form input[type="text"],
.hor-foot__form button,
.hor-foot__form input[type="submit"],
.hor-foot .hor-foot__form button[type="submit"],
.hor-foot .jetpack_subscription_widget #subscribe-text p,
.hor-foot .wp-block-jetpack-subscriptions__container input[type="email"],
.hor-foot .wp-block-jetpack-subscriptions__container button[type="submit"],
.hor-related-guides h2,
.hor-refresh-faq h2,
.hor-refresh-faq h3,
.hor-refresh-sources h2,
.hor-refresh-decision h2,
.hor-refresh-decision h3,
section.hor-route-cta p,
section.hor-route-cta span,
section.hor-route-cta > a,
.hl-tag, .hl-kick, .hl-x, .hl-go, .hl-rk{
  font-family: "Raleway", system-ui, sans-serif !important;
}

/* r2: the Route Ledger declares its own --body on .hra, which beats :root, so
   every article still rendered in system-ui. One line fixes all 186 elements. */
.hra.hra{ --body: "Raleway", system-ui, sans-serif; }
html:root{ --wp--preset--font-family--jost: "Raleway", system-ui, sans-serif; }

/* r3: .hor-editorial-note sits outside .hra, so it kept inheriting the old stack. */
.hor-editorial-note, .hor-editorial-note *{
  font-family: "Raleway", system-ui, sans-serif !important;
}
.entry-content{ --body: "Raleway", system-ui, sans-serif; }

/* === HOR: the dock must not sit on the footer links (2026-10-16) ===========
   The pill dock is position:fixed (.mn-nav z70 on the homepage, .rm-dock z60 on
   the room pages). At the foot of the page it landed on top of the footer link
   row - measured on the homepage: dock 812-854, .hor-foot__rail 751-874, and the
   footer had padding-bottom:0. Give the footer room to clear it.
   Both footer classes are named on purpose: footer.footer-container alone loses
   to .wp-block-template-part[class*="footer"]. */
body:has(.mn-nav) footer.footer-container.wp-block-template-part,
body:has(.rm-dock) footer.footer-container.wp-block-template-part{
  padding-bottom: 112px;
}

/* === HOR: running text out of the grey zone (2026-10-16) ==================
   31 elements failed WCAG AA. Navy #1B2A41 on the cream ground needs about 0.66
   alpha to reach 4.5:1; these were set at 0.5 to 0.64, so the worst measured
   2.90:1 and was effectively unreadable. 0.78 lands near 7.4:1 and still reads
   as secondary against full navy, so the hierarchy survives.
   Not touched here: cream text on the terracotta pills (.hl-tag, filled .mn-btn)
   tops out near 4.0:1 even at full opacity - that needs a slightly darker
   terracotta, which is a brand decision, not a CSS one. */
.hl-rk, .hl-kick,
.mn .mn-dcard .go,
.mn .mn-route .s,
.mn .mn-way__m span,
.hh5-stat{
  color: rgba(27,42,65,.78) !important;
}

/* === HOR article frame: join it to the rest of the site (2026-10-16) =======
   The single-post template was the one place not speaking the brand system.
   Measured: the page ground was a COOL near-white rgb(250,250,248) sitting under
   Route Ledger components that are all WARM (239,227,208 / 250,245,236 /
   244,235,221), so every card floated on the wrong paper. The header (247,243,237)
   and footer (247,244,238) were already warm - the body was the odd one out.
   And the H1 was Raleway Light 41px, where every other page speaks in Cormorant.
   The locked Route Ledger spine is NOT touched - this is only the frame. */
body.single{ background-color:#F4EBDD; }
body.single .wp-block-post-title{
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-size:clamp(2.6rem, 3.6vw, 3.3rem) !important;
  line-height:1.05 !important;
  font-weight:500 !important;
  letter-spacing:-0.012em !important;
}

/* Article H1 on a phone: Cormorant at 42px ran a long SEO title to five lines
   and pushed the hero below the fold. 33px keeps the voice and buys two lines. */
@media (max-width:600px){
  body.single .wp-block-post-title{ font-size:2.05rem !important; line-height:1.08 !important; }
}


/* === Room camera: phones must measure ONE viewport, not two (2026-10-20) ===
   The room engine sizes the sticky camera in CSS from 100vh, but builds its
   scroll track in JS from window.innerHeight. On iOS Safari those are different
   numbers (~793 vs ~710 on a 16 Pro) and innerHeight moves as the toolbar hides,
   so the camera drifts out of its pinned range mid-room, unpins early, and lets
   the footer ride up under a still-visible course - the half-filled screen.
   svh is the toolbar-up height, which is what innerHeight reports, and unlike vh
   it does not shift. Phones only; the desktop rule is deliberately untouched.
   Beats hor-room-v3's own (0,4,2) rule on specificity with a fourth .rm. */
@media (max-width:781px){
  html body .rm.rm.rm.rm .rm-cam{
    height: calc(100svh - var(--hdrH) - 128px) !important;
  }
}


/* === Boarding-call footer, phone repairs (2026-10-20) ======================
   1. The 112px dock clearance was painted on footer.footer-container, whose
      background is cream, while the boarding call (.hor-foot--board) is navy.
      So every page ended in a 112px sand strip below the navy block. Move the
      same clearance inside the navy block: 28px existing + 112px = 140px.
      Scoped with :has() so pages without the board footer keep the old rule.
   2. On /destinations/ the subscribe form ran nowrap, squeezing the email input
      to 171px (it is 301px on /deals/, which is the one that looks right) and
      clipping the placeholder to a bare line. Let it wrap so the input always
      gets a full row, and the block reads the same on every page.
   Specificity is doubled on the class because snippet 51 injects .hor-foot
   styles inline in the body, which beats the head at equal weight. */

html body:has(.hor-foot--board) footer.footer-container.wp-block-template-part{
  padding-bottom: 0 !important;
}
html body .hor-foot.hor-foot--board.hor-foot--board{
  padding-bottom: 140px !important;
}

@media (max-width:781px){
}


/* === Boarding-call footer, specificity correction (2026-10-20) ============
   The page-content blocks on /deals/ and /destinations/ carry
   @media(max-width:781px){ html body .hor-foot.hor-foot.hor-foot{padding-bottom:28px} }
   which is (0,3,2) - exactly the weight of the rule above - and being inline in
   the body it wins on source order. A fourth class takes this to (0,4,2).
   Phone-scoped on purpose: the hor-foot-board snippet sets 0 above 782px and the
   desktop must not move. Same escalation for the subscribe row, which was being
   squeezed to 160px on /destinations/ and 226px on /destinations/asia/ while
   /deals/ (the one that reads correctly) sits at 301px. */
@media (max-width:781px){
  html body .hor-foot.hor-foot.hor-foot--board.hor-foot--board{
    padding-bottom: 140px !important;
  }
}


/* === Boarding-call footer + progress bar, phone (2026-10-20) =============
   1. The subscribe row read differently on every page: 301px on /deals/,
      226px on /destinations/asia/, 160px on /destinations/. hor-foot-phone-v2
      lays it out as one row via .hor-foot__form #subscribe-email, so the input
      just takes whatever is left beside the button - and the footer container
      is a different width on each page. Stack it everywhere instead, which is
      what /deals/ already does and what reads correctly. Beating an ID needs
      the ID in the selector plus a doubled class: (1,3,2) over their (1,2,2).
   2. #hor-progress is width:<pct> from JS and overshoots - measured 458px in a
      430px viewport - so the terracotta rule ran off the right edge. Clamp it. */
@media (max-width:781px){
  html body .hor-foot.hor-foot .hor-foot__form form{
    flex-flow: column nowrap !important;
    align-items: center !important;
    gap: 14px !important;
  }
  html body .hor-foot.hor-foot .hor-foot__form form > p#subscribe-email{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
  }
  html body .hor-foot.hor-foot .hor-foot__form form > p#subscribe-submit{
    flex: 0 0 auto !important;
    width: auto !important;
  }
}
html body div#hor-progress{ max-width: 100% !important; }


/* === Desktop boarding-call field: restore the pill (2026-10-20) ==========
   hor-foot-board already states the desktop design -
   html body .hor-foot.hor-foot--board .hor-foot__top input[type=email]
   { border-radius:999px } at min-width:782px, (0,4,3) - but hor-footer-thin
   carries html body .hor-foot input#subscribe-field-1 { border-radius:3px
   !important }, and an ID beats any number of classes, so desktop has been
   rendering the raw rectangular Jetpack field instead of the pill.
   Restate it with the ID plus the board classes: (1,3,3) over their (1,1,3).
   Desktop only - the phone keeps its underline treatment. */
@media (min-width:782px){
  html body .hor-foot.hor-foot--board .hor-foot__top input#subscribe-field-1{
    border-radius: 999px !important;
    height: 58px !important;
    padding: 0 22px !important;
    background: rgba(244,235,221,.07) !important;
    border: 1px solid rgba(244,235,221,.3) !important;
    color: #F4EBDD !important;
  }
}


/* === Boarding call: desktop skin + dock stands down (2026-10-20) =========
   The new footer build is phone-gated (every script in the footer template
   part bails at >781px), so desktop renders the fallback. Skin the fallback
   to the homepage reference: brand navy instead of the terracotta bottom
   glow, sentence-case partner line, a field that is not stranded narrow.
   The dock overlap is NOT fixable from here: the room engine writes
   opacity:1 !important inline on .rm-dock, and inline !important beats
   even animations, so it needs a JS change in snippet 49. */
@media (min-width:782px){
  html body .hor-foot.hor-foot--board.hor-foot--board{
    background-color: #1B2A41 !important;
    background-image: none !important;
  }
  html body .hor-foot.hor-foot--board .hor-foot__partner,
  html body .hor-foot.hor-foot--board .hor-foot__partner *{
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13.5px !important;
  }
  html body .hor-foot.hor-foot--board .hor-foot__top input#subscribe-field-1{
    width: 100% !important;
    min-width: 280px !important;
  }
}





/* hor-foot-board states the glow at (0,4,2) and the partner size at (0,3,2).
   One more class each to land the homepage reference on desktop. */
@media (min-width:782px){
  html body .hor-foot.hor-foot--board.hor-foot--board.hor-foot--board.hor-foot--board{
    background: #1B2A41 !important;
    background-color: #1B2A41 !important;
    background-image: none !important;
  }
  html body .hor-foot.hor-foot--board.hor-foot--board .hor-foot__partner,
  html body .hor-foot.hor-foot--board.hor-foot--board .hor-foot__partner *{
    font-size: 13.5px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
}