/* ============================================================
   STAY PERKS — Editorial edition
   White pages, ink type, photography first: Cormorant Garamond for
   display, Libre Franklin for text, hairline rules instead of floating
   cards, square buttons. No gold accents, sparkles, glows or pills.
   Loaded after style.css by pages whose <body> carries class="sp-light"
   (the file keeps its name so every page's link stays the same);
   everything here is scoped to that class.
   ============================================================ */

:root {
  --sp-paper: #FFFFFF;
  --sp-mist: #F6F5F2;          /* alternate sections */
  --sp-sand: #EEEAE3;          /* tints, hover fills, photo placeholders */
  --sp-line: #E4DFD6;          /* hairline rules */
  --sp-line-strong: #CFC8BC;   /* field borders */
  --sp-ink: #1B1A17;           /* headings, primary buttons, 17:1 on white */
  --sp-ink-2: #4A4741;         /* body text, 9:1 on white */
  --sp-ink-3: #6F6B63;         /* secondary text, 5.2:1 on white, 4.8:1 on mist */
  /* The champagne accent is retired. The names stay for older inline
     styles and resolve to the quiet neutrals. */
  --sp-gold: #9A958C;
  --sp-gold-ink: var(--sp-ink);
  --sp-gold-soft: var(--sp-sand);
  --sp-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sp-sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --sp-radius-lg: 0px;
  --sp-radius: 0px;
  --sp-radius-sm: 0px;
  --sp-shadow-1: none;
  --sp-shadow-2: 0 22px 44px -30px rgba(20, 18, 14, 0.35);
  --sp-shadow-3: 0 30px 60px -34px rgba(20, 18, 14, 0.45);
  --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Once a sparkle; now a short dash, for list markers */
  --sp-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='5.4' width='10' height='1.2'/%3E%3C/svg%3E");
  --sp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8'/%3E%3C/svg%3E");
  --sp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231B1A17' stroke-width='1.3'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

/* --- Base --------------------------------------------------- */
body.sp-light {
  /* style.css hides sideways overflow on html and body alike, which makes
     body a scroll box and stops position: sticky; clip does the same job
     without that (older browsers fall back to visible, html still hides). */
  overflow-x: visible;
  overflow-x: clip;
  --font-display: var(--sp-serif);
  --font-accent: var(--sp-serif);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  background: var(--sp-paper);
  color: var(--sp-ink-2);
  font-family: var(--sp-sans);
  line-height: 1.62;
  font-variant-numeric: lining-nums; /* Cormorant's default figures are old-style */
}
.sp-light h1, .sp-light h2, .sp-light h3 {
  font-family: var(--sp-serif);
  font-weight: 600;
  color: var(--sp-ink);
  letter-spacing: -0.012em;
}
.sp-light h2 { font-size: clamp(2.3rem, 4.5vw, 3.75rem); line-height: 1.03; }
.sp-light h3 { line-height: 1.12; }
/* Headlines keep their words; the gold italic accent goes */
.sp-light h1 em, .sp-light h2 em, .sp-light h3 em { font: inherit; font-style: normal; color: inherit; }
.sp-light ::selection { background: var(--sp-sand); color: var(--sp-ink); }
.sp-light a:focus-visible, .sp-light button:focus-visible, .sp-light summary:focus-visible, .sp-light input:focus-visible {
  outline: 2px solid var(--sp-ink);
  outline-offset: 3px;
}
.sp-light .eyebrow { color: var(--sp-ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Small spaced capitals above a heading */
.sp-eyebrow, .sp-label {
  display: inline-flex;
  align-items: center;
  font: 600 0.69rem/1.3 var(--sp-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}
.sp-eyebrow::before { content: none; }

/* Former rounded chips: now the same quiet label */
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 0.69rem/1.3 var(--sp-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}
.sp-chip__spark { display: none; }

/* --- Inner-page hero ---------------------------------------- */
.sp-light .page-hero { position: relative; display: block; overflow: hidden; padding: 8.2rem 0 3.6rem; background: var(--sp-paper); color: var(--sp-ink-2); }
.sp-light .page-hero::before { content: none; }
.sp-light .page-hero .container { position: relative; }
.sp-light .page-hero h1 { margin: 1.1rem 0 1.2rem; font-size: clamp(3rem, 6.6vw, 5.6rem); line-height: 0.97; letter-spacing: -0.02em; color: var(--sp-ink); text-wrap: balance; }
.sp-light .page-hero .lede { max-width: 36rem; font-size: 1.12rem; line-height: 1.62; color: var(--sp-ink-2); }
@media (min-width: 1000px) { .sp-light .page-hero { padding: 10rem 0 5rem; } }

/* --- Inner pages: the shared building blocks ----------------
   The older pages share these classes; restyling them here moves
   every page into the editorial look without touching its words. */

/* Every older hero headline style, in one place */
.sp-light .hero h1, .sp-light .page-hero h1, .sp-light .hotels-hero h1, .sp-light .membership-hero h1,
.sp-light .explore-hero h1, .sp-light .journal-hero h1, .sp-light .article-hero h1 {
  margin: 1.1rem 0 1.2rem;
  font-family: var(--sp-serif);
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  font-weight: 600;
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  text-wrap: balance;
}
.sp-light h1 span[data-fx-decode] { font: inherit; font-style: normal; color: inherit; }
.sp-light .page-hero { min-height: 0; align-items: flex-end; }
.sp-light .page-hero::after { display: none; }
.sp-light .page-hero p.lede { max-width: 36rem; font-size: 1.12rem; line-height: 1.62; color: var(--sp-ink-2); }

/* The older .hero sections: words on white, no glow */
.sp-light .hero { position: relative; display: block; min-height: 0; overflow: hidden; background: var(--sp-paper); color: var(--sp-ink-2); }
.sp-light .hero::before { content: none; }
.sp-light .hero::after, .sp-light .hero-bg { display: none; }
.sp-light .hero-content { position: relative; z-index: 1; }
.sp-light .hero p, .sp-light .hero .sub, .sp-light .hero-sub, .sp-light .hero-subtitle { color: var(--sp-ink-2); }

/* Hero badges become the quiet label */
.sp-light .hero-label, .sp-light .virtuoso-tag, .sp-light .eyebrow--chip, .sp-light .hub-hero__eyebrow,
.sp-light .membership-hero .eyebrow, .sp-light .hero-band .eyebrow, .sp-light .virtuoso-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 0.69rem/1.3 var(--sp-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}
.sp-light .hero-label::before, .sp-light .virtuoso-tag::before, .sp-light .eyebrow--chip::before,
.sp-light .membership-hero .eyebrow::before, .sp-light .hero-band .eyebrow::before { content: none; }
.sp-light .eyebrow, .sp-light .section-label, .sp-light .hub-section-label, .sp-light .hub-cta-band__eyebrow, .sp-light .status-header__eyebrow {
  font: 600 0.69rem/1.3 var(--sp-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}

/* Buttons: square, spaced capitals, no shadows */
.sp-light .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 0;
  font: 600 0.78rem/1 var(--sp-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.sp-light .btn-gold, .sp-light .btn-primary { background: var(--sp-ink); border-color: var(--sp-ink); color: #FFFFFF; box-shadow: none; }
.sp-light .btn-gold:hover, .sp-light .btn-primary:hover { background: #3A3832; border-color: #3A3832; color: #FFFFFF; transform: none; box-shadow: none; }
.sp-light .btn-outline, .sp-light .btn-outline-dark, .sp-light .btn-white { background: transparent; color: var(--sp-ink); border-color: var(--sp-ink); box-shadow: none; }
.sp-light .btn-outline:hover, .sp-light .btn-outline-dark:hover, .sp-light .btn-white:hover { background: var(--sp-ink); color: #FFFFFF; border-color: var(--sp-ink); transform: none; box-shadow: none; }
.sp-light .btn:active { transform: none; opacity: 0.92; }
.sp-light .btn-glow { animation: none; }
.sp-light .btn-group { gap: 0.75rem; }
@media (max-width: 600px) {
  .sp-light .btn-group { flex-direction: column; align-items: stretch; }
  .sp-light .btn-group .btn { width: 100%; }
}

/* Sections: alternate bands in a quiet warm white */
.sp-light .section-dark, .sp-light .section-stone, .sp-light .section-agent { background: var(--sp-mist); color: var(--sp-ink-2); }
.sp-light .section-dark::before, .sp-light .section-agent::before, .sp-light .section-agent::after { display: none; }
.sp-light .section-dark h2, .sp-light .section-dark h3, .sp-light .section-dark h4,
.sp-light .section-agent h2, .sp-light .section-agent h3 { color: var(--sp-ink); }
.sp-light .section-dark .section-desc, .sp-light .section-dark .perk-item p, .sp-light .section-desc { color: var(--sp-ink-3); }
.sp-light .section-header h2 { text-wrap: balance; }
.sp-light .accent-text { font-family: inherit; font-style: normal; color: inherit; }
.sp-light .gradient-text, .sp-light .section-dark .gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--sp-ink); }

/* Cards: flat hairline boxes, square corners */
.sp-light .card, .sp-light .feature-card, .sp-light .glass-card, .sp-light .pricing-card {
  background: #FFFFFF;
  border: 1px solid var(--sp-line);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sp-light .card:hover, .sp-light .feature-card:hover { transform: none; border-color: var(--sp-ink-3); box-shadow: none; }
.sp-light .card-img { background: var(--sp-sand); border-radius: 0; }
.sp-light .card-img-placeholder { background: var(--sp-sand); color: var(--sp-ink-3); }
.sp-light .card-body h3, .sp-light .perk-item h4 { font-family: var(--sp-serif); font-weight: 600; color: var(--sp-ink); }
.sp-light .card-body p, .sp-light .perk-item p { color: var(--sp-ink-3); }
.sp-light .card-link { color: var(--sp-ink); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: var(--sp-line-strong); text-underline-offset: 4px; }
.sp-light .card-link:hover { color: var(--sp-ink); text-decoration-color: var(--sp-ink); }
.sp-light .stat-item .stat-number { font-family: var(--sp-serif); font-weight: 500; font-variant-numeric: lining-nums; color: var(--sp-ink); }
.sp-light .stat-item .stat-label { color: var(--sp-ink-3); }
.sp-light .testimonial-card { background: #FFFFFF; border: 1px solid var(--sp-line); border-radius: 0; }
.sp-light .testimonial-card blockquote { font-family: var(--sp-serif); font-style: italic; color: var(--sp-ink); }

/* Long-form pages (legal, guides, the Journal) */
.sp-light .prose h2 { font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1; margin-top: 2rem; }
.sp-light .prose h3 { font-weight: 600; font-size: 1.5rem; }
.sp-light .prose p, .sp-light .prose li { color: var(--sp-ink-2); }
.sp-light .prose ul li::before { content: ''; top: 0.78em; width: 9px; height: 1px; line-height: 1; background: var(--sp-ink-3); -webkit-mask: none; mask: none; }
.sp-light .prose a, .sp-light .text-link { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sp-light .prose a:hover, .sp-light .text-link:hover { color: var(--sp-ink); text-decoration-color: var(--sp-ink); }
.sp-light .prose .meta { color: var(--sp-ink-3); }
.sp-light .callout { background: var(--sp-mist); border: 1px solid var(--sp-line); border-radius: 0; }
.sp-light .callout strong { font-family: var(--sp-serif); font-weight: 600; font-size: 1.5rem; color: var(--sp-ink); }
.sp-light .callout p { color: var(--sp-ink-3); }

/* Accordions */
.sp-light .faq-item { border-bottom-color: var(--sp-line); }
.sp-light .faq-item:hover { border-color: var(--sp-line-strong); }
.sp-light .faq-question { font-family: var(--sp-serif); font-weight: 600; font-size: 1.4rem; line-height: 1.25; color: var(--sp-ink); }
.sp-light .faq-question:hover { color: var(--sp-ink); }
.sp-light .faq-question .faq-icon { color: var(--sp-ink-3); }
.sp-light .faq-answer-inner { color: var(--sp-ink-2); }

/* Forms: a label above every field, square fields, one dark button */
.sp-light .form-group label { font: 500 0.8rem/1.3 var(--sp-sans); letter-spacing: 0.02em; text-transform: none; color: var(--sp-ink-2); }
.sp-light .form-group input, .sp-light .form-group select, .sp-light .form-group textarea {
  min-height: 50px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
  background-color: #FFFFFF;
  color: var(--sp-ink);
  font: 400 1rem/1.4 var(--sp-sans);
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sp-light .form-group textarea { min-height: 140px; }
.sp-light .form-group input:focus, .sp-light .form-group select:focus, .sp-light .form-group textarea:focus,
.sp-light input:focus, .sp-light select:focus, .sp-light textarea:focus { outline: none; border-color: var(--sp-ink); box-shadow: 0 0 0 1px var(--sp-ink); }
.sp-light select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 2.6rem; background-image: var(--sp-chevron); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; }
.sp-light input[type=checkbox], .sp-light input[type=radio] { accent-color: var(--sp-ink); }
.sp-light ::placeholder { color: #A09B92; opacity: 1; }

/* --- Section rhythm ----------------------------------------- */
.sp-section { padding: 7rem 0; }
.sp-section--mist { background: var(--sp-mist); }
.sp-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: 3.4rem; }
.sp-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sp-head p { font-size: 1.06rem; line-height: 1.62; color: var(--sp-ink-2); }
.sp-fine { font-size: 0.8rem; line-height: 1.6; color: var(--sp-ink-3); }
.sp-link {
  color: var(--sp-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--sp-ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s, color 0.2s;
}
.sp-link:hover { text-decoration-color: var(--sp-ink); }

/* --- Buttons ------------------------------------------------ */
.sp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 0;
  font: 600 0.78rem/1 var(--sp-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.sp-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--sp-ease); }
.sp-btn:hover svg { transform: translateX(3px); }
.sp-btn:active { opacity: 0.92; }
.sp-btn--primary { background: var(--sp-ink); border-color: var(--sp-ink); color: #FFFFFF; box-shadow: none; }
.sp-btn--primary::after { content: none; }
.sp-btn--primary:hover { background: #3A3832; border-color: #3A3832; color: #FFFFFF; }
.sp-btn--ghost { background: transparent; color: var(--sp-ink); border-color: var(--sp-ink); }
.sp-btn--ghost:hover { background: var(--sp-ink); color: #FFFFFF; border-color: var(--sp-ink); }
.sp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* Buttons in motion: the 21st.dev Interactive Hover Button, cut square like
   the rest of the site. A dot sits before the label; on hover it floods the
   button in the label's colour while the words fade, then come back with an
   arrow. motion.js marks the buttons (.sp-ihb), copies each label into
   data-sp-label for that second line and reads the button's own colours, so
   black buttons turn white and outlined ones turn black. Without it, every
   button keeps its plain hover. */
.sp-ihb { position: relative; isolation: isolate; overflow: hidden; }
.sp-ihb::before {
  content: '';
  position: relative;
  z-index: 1;
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: var(--ihb-gap, 0.7rem);
  border-radius: 50%;
  background: var(--ihb-flood, currentColor);
  vertical-align: 0.12em;
  transition: transform 0.5s var(--sp-ease);
}
.sp-ihb::after {
  content: attr(data-sp-label) '\2002\2192';
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ihb-ink, #FFFFFF);
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(2.6rem, 0, 0);
  transition: transform 0.45s var(--sp-ease), opacity 0.3s;
  pointer-events: none;
}
.sp-ihb > svg { opacity: 1; transition: opacity 0.2s; }
@media (hover: hover) {
  .sp-ihb[data-sp-label]:not(:disabled):hover { background-color: var(--ihb-rest) !important; border-color: var(--ihb-border) !important; color: transparent !important; }
  .sp-ihb[data-sp-label]:not(:disabled):hover > svg { opacity: 0; }
  .sp-ihb[data-sp-label]:not(:disabled):hover::before { transform: scale(var(--ihb-scale, 120)); }
  .sp-ihb[data-sp-label]:not(:disabled):hover::after { opacity: 1; transform: none; }
}
.sp-ihb[data-sp-label]:not(:disabled):focus-visible { background-color: var(--ihb-rest) !important; border-color: var(--ihb-border) !important; color: transparent !important; }
.sp-ihb[data-sp-label]:not(:disabled):focus-visible > svg { opacity: 0; }
.sp-ihb[data-sp-label]:not(:disabled):focus-visible::before { transform: scale(var(--ihb-scale, 120)); }
.sp-ihb[data-sp-label]:not(:disabled):focus-visible::after { opacity: 1; transform: none; }
.sp-ihb--ring[data-sp-label]:not(:disabled):hover, .sp-ihb--ring[data-sp-label]:not(:disabled):focus-visible { box-shadow: 0 0 0 1px var(--ihb-rest) !important; }
.sp-ihb:disabled::before { opacity: 0.5; }

/* --- Header ------------------------------------------------- */
/* A white bar with one hairline; the logo in spaced capitals */
.sp-light .site-nav {
  padding: 0.9rem 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--sp-line);
  box-shadow: none;
  transition: padding 0.3s var(--sp-ease), background-color 0.3s, border-color 0.3s;
}
.sp-light .site-nav.scrolled {
  padding: 0.6rem 0;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--sp-line);
  box-shadow: none;
}
.sp-light .site-nav:has(.nav-links.active) { background: #FFFFFF; }
.sp-light .nav-logo, .sp-logo { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--sp-ink); text-decoration: none; }
.sp-light .nav-logo span, .sp-logo span { color: inherit; }
.sp-logo__mark { width: 18px; height: 23px; flex: none; }
.sp-logo__mark path:not([fill="none"]) { display: none; } /* the old sparkle inside the arch */
.sp-logo__word { padding-top: 3px; font-family: var(--sp-serif); font-weight: 600; font-size: 1.02rem; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
.sp-logo__word i { font-style: normal; }
.sp-light .nav-links { gap: 1.9rem; }
.sp-light .nav-links a {
  font-family: var(--sp-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sp-ink-2);
}
.sp-light .nav-links a:hover { color: var(--sp-ink); }
.sp-light .nav-links a::after { bottom: -6px; height: 1px; background: var(--sp-ink); }
.sp-light .nav-cta, .sp-light .nav-links .nav-cta {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: var(--sp-ink) !important;
  font: 600 0.74rem/1 var(--sp-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sp-light .nav-links .nav-cta::after { display: none; }
.sp-light .nav-links .nav-cta:hover { background: none; border-color: currentColor; box-shadow: none; transform: none; opacity: 0.72; }
/* The phone menu button says what it does, in the same spaced capitals */
.sp-light .nav-toggle { align-items: center; padding: 14px 4px; margin: -10px -4px; }
.sp-light .nav-toggle span { display: none; }
.sp-light .nav-toggle::before { content: 'Menu'; font: 600 0.74rem/1 var(--sp-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sp-ink); }
.sp-light .nav-toggle[aria-expanded="true"]::before { content: 'Close'; }
@media (max-width: 1200px) {
  .sp-light .nav-links.active {
    background: #FFFFFF;
    border-top: 1px solid var(--sp-line);
    box-shadow: 0 30px 50px -20px rgba(20, 18, 14, 0.18);
    padding: 0.6rem 1.5rem 1.6rem;
    gap: 0;
    align-items: stretch;
  }
  .sp-light .nav-links.active a { font-family: var(--sp-serif); font-size: 1.6rem; font-weight: 600; color: var(--sp-ink); padding: 0.75rem 0.1rem; border-bottom: 1px solid var(--sp-line); }
  .sp-light .nav-links.active a::after { display: none; }
  .sp-light .nav-links.active .nav-cta, .sp-light .nav-links.active a.nav-cta { margin-top: 1.2rem; padding: 1.05rem; border: 0; background: var(--sp-ink); color: #FFFFFF !important; text-align: center; font: 600 0.78rem/1 var(--sp-sans); letter-spacing: 0.14em; }
}

/* --- Letter sign-up ----------------------------------------- */
.sp-light .subscribe-band { background: var(--sp-mist); border-top: 0; padding: 6rem 1.5rem; text-align: center; }
.sp-light .subscribe-band .eyebrow { margin-bottom: 0.4rem; }
.sp-light .subscribe-band h2 { color: var(--sp-ink); font-family: var(--sp-serif); font-weight: 600; font-size: clamp(2.1rem, 4vw, 3.1rem); margin: 0.5rem 0 0.8rem; }
.sp-light .subscribe-band .subscribe-sub { color: var(--sp-ink-2); max-width: 30rem; margin: 0 auto 2rem; line-height: 1.6; }
.sp-light .subscribe-form {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.sp-light .subscribe-form:focus-within { box-shadow: none; }
.sp-light .subscribe-form input[type=email] { flex: 1; min-width: 0; height: 50px; padding: 0 0.15rem; border: 0; border-bottom: 1px solid var(--sp-ink); border-radius: 0; background: transparent; color: var(--sp-ink); font: 400 1rem/1.4 var(--sp-sans); box-shadow: none; }
.sp-light .subscribe-form input[type=email]:focus { outline: none; box-shadow: inset 0 -1px 0 var(--sp-ink); }
.sp-light .subscribe-form button { flex: none; height: 50px; padding: 0 1.5rem; border: 0; border-radius: 0; background: var(--sp-ink); color: #FFFFFF; font: 600 0.76rem/1 var(--sp-sans); letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 0.2s; }
.sp-light .subscribe-form button:hover { background: #3A3832; }
.sp-light .subscribe-msg { color: var(--sp-ink-2); }
.subscribe-form .hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }

/* --- Footer: the one dark band ------------------------------ */
.sp-light .site-footer { background: var(--sp-ink); color: rgba(255, 255, 255, 0.7); border-top: 0; padding: 5rem 0 2rem; }
.sp-light .site-footer::before { display: none; }
.sp-light .footer-brand .sp-logo { margin-bottom: 1.3rem; }
.sp-light .footer-brand p { color: rgba(255, 255, 255, 0.7); max-width: 26rem; }
.sp-light .footer-virtuoso-text { font-family: var(--sp-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.86); opacity: 1; }
.sp-light .footer-virtuoso-text:hover { color: #FFFFFF; }
.sp-light .footer-col h4 { color: #FFFFFF; font-family: var(--sp-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.2rem; }
.sp-light .footer-col a { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; margin-bottom: 0.3rem; }
.sp-light .footer-col a:hover { color: #FFFFFF; }
.sp-light .footer-bottom { border-top-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
.sp-light .footer-social a { color: rgba(255, 255, 255, 0.6); font: 600 0.66rem/1 var(--sp-sans); letter-spacing: 0.18em; text-transform: uppercase; }
/* The links as words, not icons: the Virtuoso one was a star */
.sp-light .footer-social svg { display: none; }
.sp-light .footer-social a[href*="instagram"]::before { content: 'Instagram'; }
.sp-light .footer-social a[href*="virtuoso"]::before { content: 'Virtuoso'; }
.sp-light .footer-social a:hover, .sp-light .footer-legal a:hover { color: #FFFFFF; }
.sp-light .site-footer a { color: rgba(255, 255, 255, 0.72); }
.sp-light .site-footer a:hover { color: #FFFFFF; }
.sp-light .site-footer .sp-logo, .sp-light .site-footer .sp-logo:hover { color: #FFFFFF; }

/* --- The Journal ---------------------------------------------- */
.sp-light .journal-hero, .sp-light .article-hero { position: relative; overflow: hidden; padding: 9.5rem 1.5rem 3rem; background: var(--sp-paper); }
.sp-light .journal-hero::before, .sp-light .article-hero::before { content: none; }
.sp-light .journal-hero > *, .sp-light .article-hero > * { position: relative; }
.sp-light .journal-hero p.lede { color: var(--sp-ink-2); }
.sp-light .article-hero .byline { color: var(--sp-ink-3); }
.sp-light .journal-card { border: 1px solid var(--sp-line); border-radius: 0; box-shadow: none; transition: border-color 0.3s; }
.sp-light .journal-card:hover { border-color: var(--sp-ink-3); transform: none; box-shadow: none; }
.sp-light .journal-card .kicker { font-weight: 600; letter-spacing: 0.2em; color: var(--sp-ink-3); }
.sp-light .journal-card h2 { font-size: 1.9rem; line-height: 1.12; color: var(--sp-ink); }
.sp-light .journal-card p { color: var(--sp-ink-2); }
.sp-light .journal-card .read { font-weight: 500; color: var(--sp-ink); }
.sp-light article.prose { color: var(--sp-ink-2); }
.sp-light article.prose h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1; color: var(--sp-ink); }
.sp-light article.prose a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-line-strong); text-underline-offset: 4px; }
.sp-light .evidence { border: 1px solid var(--sp-line); border-left: 2px solid var(--sp-ink); border-radius: 0; background: var(--sp-mist); }
.sp-light article.prose .cta-row a { display: inline-flex; align-items: center; min-height: 50px; padding: 0 1.75rem; border-radius: 0; font: 600 0.78rem/1 var(--sp-sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.sp-light article.prose .cta-row a.cta-gold { background: var(--sp-ink); color: #FFFFFF; box-shadow: none; }
.sp-light article.prose .cta-row a.cta-gold:hover { background: #3A3832; }
.sp-light article.prose .cta-row a.cta-line { border: 1px solid var(--sp-ink); background: transparent; color: var(--sp-ink); }
.sp-light article.prose .cta-row a.cta-line:hover { background: var(--sp-ink); color: #FFFFFF; }
@media (max-width: 600px) {
  .sp-light .journal-hero, .sp-light .article-hero { padding: 7.5rem 1.25rem 2.5rem; }
  /* Long article titles ran to five lines at the section-header size */
  .sp-light .article-hero h1 { font-size: clamp(2.2rem, 9.6vw, 2.75rem); line-height: 1.02; }
}

/* --- Section headers ---------------------------------------
   Section pages open the same way: a quiet label, the serif title,
   one line of text, aligned to the left like the homepage. With a
   photograph (.has-photo and --hero-photo on the element), the picture
   fills the band and fades into the white page behind the words.
   Journal and article headers stay centred over their column. */
body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero):not(.page-hero--split) { padding-top: 9rem; padding-bottom: 4rem; text-align: left; }
body.sp-light :is(.journal-hero, .article-hero) { padding-top: 9rem; padding-bottom: 3.6rem; text-align: center; }
body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero):not(.page-hero--split) :is(.hero-content, .page-hero-content) { max-width: none; margin-inline: 0; padding: 0 !important; }
body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero):not(.page-hero--split) h1 { margin: 1.1rem 0 1.2rem; max-width: 15ch; }
body.sp-light :is(.journal-hero, .article-hero) h1 { margin: 1.1rem auto 1.2rem; max-width: 20ch; }
body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero):not(.page-hero--split) :is(.container, .hero-content, .page-hero-content) > p:not(.search-hint):not(.eyebrow):not(.section-label) {
  max-width: 36rem;
  margin: 0;
  font: 400 1.12rem/1.62 var(--sp-sans);
  font-style: normal;
  color: var(--sp-ink-2);
}
body.sp-light :is(.journal-hero, .article-hero) > p:not(.eyebrow):not(.byline) {
  max-width: 36rem;
  margin: 0 auto;
  font: 400 1.12rem/1.62 var(--sp-sans);
  font-style: normal;
  color: var(--sp-ink-2);
}
body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero, .journal-hero, .article-hero) :is(.eyebrow, .section-label) {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 0.69rem/1.3 var(--sp-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-ink-3);
}
body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero, .journal-hero, .article-hero) :is(.eyebrow, .section-label)::before { content: none; }
@media (min-width: 1000px) {
  body.sp-light :is(.page-hero, .hero, .hotels-hero, .explore-hero):not(.page-hero--split) { padding-top: 11rem; padding-bottom: 5.6rem; }
  body.sp-light :is(.journal-hero, .article-hero) { padding-top: 11rem; padding-bottom: 4.6rem; }
}

/* The photograph, faded into the page behind the words */
body.sp-light .has-photo { position: relative; isolation: isolate; overflow: hidden; background: #FFFFFF; }
body.sp-light .has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: 1;
  background: var(--hero-photo) center 45% / cover no-repeat;
  pointer-events: none;
  bottom: 2px; /* no hairline at the foot when the height lands between pixels */
}
body.sp-light .has-photo::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 32%, rgba(255, 255, 255, 0.66) 58%, rgba(255, 255, 255, 0.2) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, #FFFFFF 92%);
}
body.sp-light :is(.journal-hero, .article-hero).has-photo::after {
  background:
    radial-gradient(ellipse 58% 64% at 50% 56%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.55) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.55) 74%, #FFFFFF 100%);
}
@media (max-width: 760px) {
  body.sp-light .has-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.84) 38%, #FFFFFF 100%); }
}

@media (prefers-reduced-motion: no-preference) {
  body.sp-light .has-photo::before { animation: spHeroDrift 2.6s var(--sp-ease) backwards; }
  body.sp-light :is(.page-hero .container, .hero-content, .page-hero-content, .hotels-hero .container, .explore-hero .container, .journal-hero, .article-hero) > * { animation: spHeroRise 0.9s var(--sp-ease) backwards; }
  body.sp-light :is(.page-hero .container, .hero-content, .page-hero-content, .hotels-hero .container, .explore-hero .container, .journal-hero, .article-hero) > :nth-child(2) { animation-delay: 0.06s; }
  body.sp-light :is(.page-hero .container, .hero-content, .page-hero-content, .hotels-hero .container, .explore-hero .container, .journal-hero, .article-hero) > :nth-child(3) { animation-delay: 0.12s; }
  body.sp-light :is(.page-hero .container, .hero-content, .page-hero-content, .hotels-hero .container, .explore-hero .container, .journal-hero, .article-hero) > :nth-child(n+4) { animation-delay: 0.18s; }
}
@keyframes spHeroRise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes spHeroDrift { from { transform: scale(1.05); } }

/* --- Scroll entrances (assets/motion.js adds .motion) ------- */
/* An animation, not a transition, so each element keeps its own hover transitions */
.motion [data-reveal]:not(.is-in) { opacity: 0; }
.motion [data-reveal].is-anim { animation: spReveal 0.9s var(--sp-ease) var(--delay, calc(var(--i, 0) * 70ms)) backwards; }
@keyframes spReveal { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

/* --- Assistant example: a printed exchange, no window chrome --- */
.sp-chat { position: relative; width: 100%; max-width: 32rem; justify-self: center; padding: 1.6rem 1.7rem; border: 1px solid var(--sp-line); border-radius: 0; background: #FFFFFF; box-shadow: none; }
.sp-chat__bar { display: block; padding: 0 0 1rem; border-bottom: 1px solid var(--sp-line); font: 600 0.69rem/1.3 var(--sp-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-ink-3); }
.sp-chat__bar i { display: none; }
.sp-chat__bar span { margin-left: 0; }
.sp-chat__body { display: grid; gap: 1rem; align-content: start; min-height: 0; padding-top: 1.1rem; }
.sp-chat__me { justify-self: start; max-width: none; padding: 0; border-radius: 0; background: none; color: var(--sp-ink); font: italic 500 1.45rem/1.25 var(--sp-serif); }
.sp-chat__typing { display: none !important; }
.sp-chat__ai { justify-self: start; max-width: none; padding: 0; border-radius: 0; background: none; font-size: 0.96rem; line-height: 1.6; color: var(--sp-ink-2); }
.sp-chat__chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.9rem; }
.sp-chat__chips span { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--sp-line-strong); border-radius: 0; background: none; font-size: 0.84rem; font-weight: 500; color: var(--sp-ink-2); }
.sp-chat__chips span:first-child { background: none; border-color: var(--sp-ink); color: var(--sp-ink); }

/* --- Sticky quote bar, phones only -------------------------- */
.sp-sticky { display: none; }
@media (max-width: 760px) {
  .motion .sp-sticky {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 8px 8px 10px;
    background: #FFFFFF;
    border: 1px solid var(--sp-line);
    border-radius: 0;
    box-shadow: var(--sp-shadow-3);
    transform: translate3d(0, 150%, 0);
    visibility: hidden;
    transition: transform 0.5s var(--sp-ease), visibility 0s linear 0.5s;
  }
  .motion .sp-sticky.is-on { transform: none; visibility: visible; transition: transform 0.5s var(--sp-ease); }
  .sp-sticky img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
  .sp-sticky span { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.3; color: var(--sp-ink-3); }
  .sp-sticky span b { display: block; color: var(--sp-ink); font-weight: 600; }
  .sp-sticky .sp-btn { min-height: 44px; padding: 0 1.1rem; font-size: 0.72rem; }
  .sp-sticky .sp-ihb::before { content: none; } /* no hover on a phone, and the bar needs the room */
}

/* --- Geisel's notes on a hotel page (lib/hotel-pages.js) ---- */
/* The page's own ruled list (.facts in property.html), its values in body
   text as How pricing works sets them. Here rather than in property.html:
   every hotel page carries that file's styles inline, and a page without
   notes must not change. */
.sp-light .hotel-notes .fact-value { max-width: 36rem; color: var(--sp-ink-2); }
.sp-light .hotel-notes__fine { margin: 1rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--sp-ink-3); }

/* --- Four Seasons Preferred Partner and the guides (lib/hotel-pages.js) --- */
/* The box: the two amenities Four Seasons names as the page's ruled list,
   then the rules as How pricing works sets its own, then Geisel's line. */
.sp-light .fspp .facts { margin-top: 2.6rem; border-top-color: var(--sp-line-strong); }
.sp-light .fspp .fact-value { max-width: 36rem; color: var(--sp-ink-2); }
.sp-light .fspp__by { margin: 1.8rem 0 0; max-width: 38rem; font-family: var(--sp-serif); font-size: 1.32rem; font-weight: 500; line-height: 1.38; color: var(--sp-ink); text-wrap: pretty; }
.sp-light .fspp__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 1.1rem 0 0; font-size: 0.94rem; line-height: 1.5; }
.sp-light .fspp__links a, .sp-light .prop-guides a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.sp-light .fspp__links a:hover, .sp-light .prop-guides a:hover { text-decoration-color: var(--sp-ink); }
/* After a hotel's own Virtuoso list (two Four Seasons hotels publish theirs) */
.sp-light .fspp-line { margin-top: 2.6rem; max-width: 40rem; }
.sp-light .fspp-line .amenities-kicker { margin-bottom: 0.7rem; }
.sp-light .amenities-card .fspp-line > p:not([class]) { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--sp-ink-2); }
/* One ruled row, set like the facts: the label, then the links */
.sp-light .prop-guides p { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 1.5rem; align-items: baseline; margin: 0; padding: 1.05rem 0; border-top: 1px solid var(--sp-ink); border-bottom: 1px solid var(--sp-line); }
.sp-light .prop-guides__label { font: 600 0.66rem/1.5 var(--sp-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-ink-3); }
.sp-light .prop-guides__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.98rem; line-height: 1.5; }
@media (max-width: 760px) {
  .sp-light .fspp__by { font-size: 1.2rem; }
  .sp-light .prop-guides p { grid-template-columns: 7.6rem minmax(0, 1fr); gap: 0.3rem 1rem; }
  .sp-light .prop-guides__links { flex-direction: column; gap: 0.55rem; }
}

/* --- Responsive --------------------------------------------- */
/* The header's edge follows the page's (style.css set it 4px tighter) */
@media (max-width: 768px) { .sp-light .nav-inner { padding: 0 1.25rem; } }
@media (max-width: 480px) { .sp-light .nav-inner { padding: 0 1rem; } }
@media (max-width: 760px) {
  .sp-section { padding: 5rem 0; }
  .sp-head { margin-bottom: 2.4rem; }
  .sp-light .subscribe-band { padding: 4.5rem 1.25rem; }
  .sp-light .site-footer { padding-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-light *, .sp-light *::before, .sp-light *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .motion [data-reveal]:not(.is-in) { opacity: 1; }
}