/* Binding content scale for non-hotel pages. Never import into hotel templates.
   Heroes, booking controls and hotel cards keep their established components. */
.hl-content {
  --hl-content-width: 1280px;
  --hl-content-gutter: clamp(20px, 5.8vw, 96px);
  --hl-section-space: clamp(40px, 5vw, 72px);
  --hl-section-title: clamp(28px, 2.7vw, 38px);
  --hl-card-title: clamp(22px, 1.8vw, 28px);
  --hl-card-gap: 24px;
  --hl-card-radius: 24px;
  --hl-content-ink: #193d33;
  --hl-content-muted: #587067;
  --hl-content-paper: #f8f6ef;
  --hl-content-soft: #edf3e8;
}
.hl-content main h2.hl-section-title {
  margin: 0;
  max-width: 28ch;
  font: 400 var(--hl-section-title)/1.2 "Tenor Sans", Arial, sans-serif;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hl-content .hl-section {
  padding: var(--hl-section-space) max(var(--hl-content-gutter), calc((100% - var(--hl-content-width)) / 2));
}
.hl-content .hl-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hl-card-gap);
  align-items: stretch;
}
.hl-content .hl-content-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid #dbe3d9;
  border-radius: var(--hl-card-radius);
  background: #fffdf8;
}
.hl-content .hl-content-card h3,
.hl-content .brand-story-next h3 {
  margin: 12px 0 16px;
  font: 400 var(--hl-card-title)/1.25 "Tenor Sans", Arial, sans-serif;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.hl-content :is(.hl-content-card, .brand-story-intro, .brand-story-heading, .brand-story-outlook) p:not(.eyebrow):not(.brand-story-note) {
  margin: 16px 0 0;
  max-width: 66ch;
  color: var(--hl-content-muted);
  font: 400 16px/1.7 "Mulish", Arial, sans-serif;
}
.hl-content .brand-story-heading { max-width: 760px; margin-bottom: 28px; }
.hl-content .brand-story-heading .eyebrow,
.hl-content .brand-story-intro .eyebrow,
.hl-content .brand-story-outlook .eyebrow { margin: 0 0 14px; font-size: 12px; }
.hl-content .brand-story-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: var(--hl-content-paper);
  color: var(--hl-content-ink);
}
.hl-content .brand-story-intro__image {
  margin: 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--hl-card-radius);
}
.hl-content .brand-story-intro__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-content .brand-story-note {
  margin: 22px 0 0;
  padding: 0 0 0 16px;
  border-left: 3px solid #c84c20;
  color: var(--hl-content-ink);
  font: 700 16px/1.6 "Mulish", Arial, sans-serif;
}
.hl-content .brand-story-selection { background: #fffdf8; color: var(--hl-content-ink); }
.hl-content .brand-story-selection .hl-content-card { background: var(--hl-content-soft); }
.hl-content .brand-story-kicker {
  color: #b7451e;
  font: 800 12px/1.5 "Mulish", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hl-content .brand-story-luxury { background: var(--hl-content-soft); color: var(--hl-content-ink); }
.hl-content .brand-story-luxury__soft { border-top: 4px solid #aec1a3; }
.hl-content .brand-story-luxury__smart { border-top: 4px solid #bd7953; }
.hl-content .brand-story-luxury__super { border-top: 4px solid #244b3f; }
.hl-content .brand-story-outlook {
  --hl-content-muted: #d9e3dd;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: #203f35;
  color: #fffdf8;
}
.hl-content .brand-story-outlook p:not(.eyebrow) { color: #d9e3dd; }
.hl-content .brand-story-outlook .eyebrow { color: #ed6b2f !important; }
.hl-content .brand-story-next { padding-left: 28px; border-left: 1px solid #668077; }
.hl-content .hl-content-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  gap: 18px;
  color: inherit;
  font: 800 15px/1.5 "Mulish", Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* Magazine cards use a three-column desktop footprint even with two stories. */
.hl-content .journal-section { background: var(--hl-content-paper); }
.hl-content .journal-heading { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 32px; align-items: center; }
.hl-content .journal-heading .eyebrow { margin-bottom: 14px; font-size: 12px; }
.hl-content .journal-intro { margin: 18px 0 0; max-width: 65ch; color: var(--hl-content-muted); font: 400 16px/1.7 "Mulish", Arial, sans-serif; }
.hl-content .journal-search { min-height: 52px; border: 1px solid #dbe3d9; background: #fffdf8; }
.hl-content .journal-search input { font-size: 14px; }
.hl-content .article-grid,
.hl-content .home-magazine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hl-card-gap); }
.hl-content .journal-card { border-radius: var(--hl-card-radius); background: #fffdf8; }
.hl-content .journal-card__image { height: auto; aspect-ratio: 4 / 3; margin: 0; border-radius: 0; }
.hl-content .journal-card__body { min-height: 0; padding: 24px; gap: 16px; flex: 1; }
.hl-content .journal-card__body h3 { margin: 0; font-size: var(--hl-card-title); line-height: 1.25; letter-spacing: -.02em; }
.hl-content .journal-card__body > p { margin: 0; color: var(--hl-content-muted); font-size: 15px; line-height: 1.65; }
.hl-content .journal-card__body > a { min-height: 44px; padding-top: 16px; font-size: 14px; }
.hl-content .journal-card__body time { font-size: 11px; }
.home-page.hl-content .home-magazine-grid { min-height: 0; }
.home-page.hl-content .home-story-card {
  grid-row: auto;
  grid-column: auto;
  min-height: 380px;
  aspect-ratio: 4 / 5;
  padding: 24px;
  border-radius: var(--hl-card-radius);
}
.home-page.hl-content .home-story-card h3,
.home-page.hl-content .home-story-card:not(.home-story-card--lead) h3 { font-size: var(--hl-card-title); line-height: 1.25; }
/* Physical content spacing: not a footer margin, which the shared footer resets. */
.home-page.hl-content main { padding-bottom: clamp(32px, 4vw, 64px); }
.home-page.hl-content .closing-cta { margin-bottom: 0; overflow: hidden; isolation: isolate; }
.hl-content .editorial-promise { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; background: #203f35; }
.hl-content .editorial-promise .eyebrow { color: #ed6b2f !important; font-size: 12px; margin-bottom: 14px; }
.hl-content .editorial-points article { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); padding: 18px 0; gap: 20px; }
.hl-content .editorial-points strong { color: #fffdf8; font-size: 20px; line-height: 1.3; }
.hl-content .editorial-points p { color: #d9e3dd; font-size: 15px; }
.hl-content .magazin-cta { gap: 32px; background: var(--hl-content-paper); }
.hl-content .magazin-cta > a { font-size: 14px; }
.hl-content .article-empty { min-height: 0; padding: 40px 24px; }
.hl-content .article-empty h3 { font-size: var(--hl-card-title); line-height: 1.3; }
@media (max-width: 1000px) {
  .hl-content .article-grid,
  .hl-content .home-magazine-grid,
  .hl-content .hl-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hl-content { --hl-section-title: 28px; --hl-card-title: 24px; --hl-card-gap: 20px; }
  .hl-content .article-grid,
  .hl-content .home-magazine-grid,
  .hl-content .hl-content-grid,
  .hl-content .journal-heading,
  .hl-content .brand-story-intro,
  .hl-content .brand-story-outlook,
  .hl-content .editorial-promise { grid-template-columns: minmax(0, 1fr); }
  .hl-content .hl-content-card { padding: 24px; }
  .hl-content .brand-story-next { padding: 24px 0 0; border-left: 0; border-top: 1px solid #668077; }
  .hl-content .magazin-cta { display: flex; align-items: flex-start; flex-direction: column; }
  .hl-content .editorial-points article { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-content .journal-card, .hl-content .journal-card__image img { transition: none; transform: none; }
}