/* ── INDEX: Home page only ── */

/* Hero */
.hero {
  background: var(--off-white);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 92vh;
  overflow: hidden;
  position: relative;
}

/* Full-bleed background photo behind the hero (subtle, behind text). */
.hero-bg {
  position: absolute;
  inset: 0;
  /* LCP target. Full-size WebP (~166 KB) replaces the 1.5 MB PNG. The
     matching <link rel="preload" as="image"> in index.html starts the
     fetch in parallel with CSS parsing.
     Note: the source is 1080×1080, so 1200/1600-wide variants don't
     exist — the resize pipeline never up-scales. We point at the
     full-size .webp (which IS our 1080-wide hero asset). */
  background-image:
    linear-gradient(110deg,
      rgba(247,246,241,0.97) 0%,
      rgba(247,246,241,0.90) 32%,
      rgba(247,246,241,0.55) 52%,
      rgba(247,246,241,0.18) 72%,
      rgba(0,62,116,0.05) 100%),
    url('/images/categories/rooms-home-decor.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.hero-left {
  padding: 80px 60px 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}

.hero-eyebrow::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--yellow);
  display: block;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(52px, 5.6vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  margin-bottom: 28px;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.hero h1 em { font-style: italic; color: var(--blue); }

.hero-desc {
  font-size: 19px;
  color: var(--mid);
  line-height: 1.65;
  max-width: 520px;
  font-weight: 300;
  margin-bottom: 44px;
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.hero-tags .tag { font-size: 12.5px; padding: 7px 16px; letter-spacing: 0.08em; }
.hero-btns { display: flex; gap: 16px; }
.hero-btns .btn-primary,
.hero-btns .btn-outline {
  font-size: 13.5px;
  padding: 16px 36px;
  letter-spacing: 0.1em;
}

.tag {
  background: var(--yellow);
  color: var(--dark-blue);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.tag:hover { background: var(--dark-blue); color: var(--white); }

.hero-right {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.hero-featured-card {
  position: absolute;
  bottom: 40px;
  left: 40px;
  background: white;
  border-radius: 4px;
  padding: 18px 22px;
  width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border-left: 4px solid var(--yellow);
}

.hfc-label { font-size: 10px; font-weight: 700; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.hfc-title { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--dark); margin-bottom: 8px; }
.hfc-meta { font-size: 11px; color: var(--mid); }

.hero-badge {
  position: absolute;
  top: 32px;
  right: 32px;
  background: var(--yellow);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-blue);
  text-align: center;
  animation: float 4s ease-in-out infinite;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  line-height: 1.4;
  z-index: 4;
  pointer-events: none;
}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Marquee */
.marquee-bar {
  background: var(--dark-blue);
  color: var(--yellow);
  padding: 11px 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  animation: marquee 30s linear infinite;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.marquee-track span { margin: 0 40px; }
.marquee-track span::before { content: '✦  '; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Sections shared */
section { padding: 80px var(--page-pad-x); }

section > .section-header-row,
section > .section-label,
section > .section-heading,
section > .section-sub,
section > .featured-grid,
section > .rooms-grid,
section > .budget-grid,
section > .diy-grid,
section > .rental-banner,
section > .rental-grid,
section > .seasonal-tabs,
section > .seasonal-content,
section > .small-spaces-callout {
  max-width: var(--max-w-page);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after { content: ''; flex: 0 0 32px; height: 2px; background: var(--yellow); }

.section-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
}

.section-heading em { font-style: italic; color: var(--blue); }

.section-sub {
  font-size: 15px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.65;
  max-width: 540px;
  margin-bottom: 48px;
}

.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.see-all {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--blue);
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--yellow);
}

.see-all:hover { gap: 12px; }

/* Featured posts */
.featured { background: var(--white); }

.featured-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.post-card {
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--white);
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 14px -10px rgba(15,42,79,0.18);
  isolation: isolate;
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px -22px rgba(15,42,79,0.35);
}
.post-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.post-card.large {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.post-img {
  width: 100%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* The large card spans 2 grid rows, so its total height is dictated by the
   two stacked small cards on the right. Let the image flex to fill any extra
   vertical room so we never end up with a big blank gap below the body. */
.post-card.large .post-img {
  flex: 1 1 auto;
  height: auto;
  min-height: 420px;
}
.post-card.large .post-body {
  flex: 0 0 auto;
}
.post-card.large .post-excerpt { -webkit-line-clamp: 4; }

.post-img-default { height: 220px; }

.post-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  transition: transform 0.7s cubic-bezier(0.2,0.6,0.2,1);
  position: relative;
}

.post-card.large .post-img-inner { font-size: 110px; }
.post-card:hover .post-img-inner { transform: scale(1.07); }

/* Subtle dark gradient at the bottom of the image so the read-time pill
   stays legible over light photos. */
.post-img-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(15,42,79,0.55) 100%);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
.post-card:hover .post-img-gradient { opacity: 1; }

/* When a real photo is supplied, render it edge-to-edge as the cover. */
.post-img-inner--photo {
  padding: 0;
  font-size: 0;
  background: var(--off-white);
}
.post-img-inner--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-bg-1 { background: linear-gradient(145deg, #f0e8d4, #d8c8a8); }
.img-bg-2 { background: linear-gradient(145deg, #d4e4f0, #a8c4d8); }
.img-bg-3 { background: linear-gradient(145deg, #e4f0d4, #b8d4a0); }
.img-bg-4 { background: linear-gradient(145deg, #f0d4e4, #d8a8c0); }
.img-bg-5 { background: linear-gradient(145deg, #d4e8d4, #a0c8a8); }
.img-bg-6 { background: linear-gradient(145deg, #e8d4f0, #c0a8d8); }
.img-bg-7 { background: linear-gradient(145deg, #f0eed4, #d4cfa0); }
.img-bg-8 { background: linear-gradient(145deg, #d4f0ee, #a0d4d0); }
.img-bg-9 { background: linear-gradient(145deg, #f0d4d4, #d8a8a8); }
.img-bg-10 { background: linear-gradient(145deg, #d4d4f0, #a8a8d8); }

.post-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transition: transform 0.3s ease;
}
.post-card:hover .post-category-badge { transform: translateY(-2px); }

.badge-rooms { background: var(--blue); color: white; }
.badge-budget { background: #22a844; color: white; }
.badge-diy { background: #e07020; color: white; }
.badge-rental { background: var(--dark-blue); color: var(--yellow); }
.badge-seasonal { background: #cc3322; color: white; }

/* Read-time pill: glass-effect, bottom-right of the image. */
.post-read-pill {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 42, 79, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform 0.3s ease, background 0.3s ease;
}
.post-read-pill svg { display: block; }
.post-card:hover .post-read-pill {
  transform: translateY(-2px);
  background: rgba(15, 42, 79, 0.88);
}

.post-body {
  padding: 22px 22px 24px;
  flex: 1;
  border: 1px solid var(--light-gray);
  border-top: none;
  border-radius: 0 0 14px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Animated underline accent that appears on card hover. */
.post-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--blue));
  transition: width 0.45s cubic-bezier(0.2,0.6,0.2,1);
  border-radius: 0 0 3px 3px;
}
.post-card:hover .post-body::before { width: calc(100% - 44px); }

.post-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
  transition: opacity 0.25s ease, gap 0.25s ease;
}
.post-cta-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2,0.6,0.2,1);
}
.post-card:hover .post-cta { opacity: 1; gap: 10px; }
.post-card:hover .post-cta-arrow { transform: translateX(4px); }

.post-meta {
  font-size: 11.5px;
  color: var(--mid);
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}

.post-meta .dot { width: 3px; height: 3px; background: var(--light-gray); border-radius: 50%; }

.post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--mid);
}
.post-meta-item svg {
  display: block;
  flex-shrink: 0;
  opacity: 0.75;
}
.post-meta-cat {
  color: var(--dark-blue);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.post-meta-cat svg { opacity: 1; }
.post-meta-views { color: var(--dark); font-weight: 600; }
.post-meta-views svg { opacity: 0.85; }

.post-meta-tagline {
  font-size: 12px;
  color: var(--mid);
  font-style: italic;
  margin: -4px 0 10px;
  line-height: 1.45;
}

.post-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--dark);
  margin-bottom: 10px;
  transition: color 0.25s ease;
}

.post-card.large .post-title { font-size: 28px; }
.post-card:hover .post-title { color: var(--blue); }

.post-excerpt {
  font-size: 13.5px;
  color: var(--mid);
  line-height: 1.65;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card.large .post-excerpt { -webkit-line-clamp: 3; }

/* Rooms */
.rooms-section { background: var(--off-white); }

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.room-tile {
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.room-tile:hover { transform: translateY(-4px); }

.room-tile-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s;
}

/* Photo variant: real image fills the tile, with caption overlay on hover. */
.room-tile-img--photo {
  position: relative;
  background: var(--light-gray);
  border: 1px solid rgba(0,62,116,0.08);
}
.room-tile-img--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.3s;
}
.room-tile-img--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.room-tile-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 1;
  pointer-events: none;
}
.room-tile:hover .room-tile-img--photo img { transform: scale(1.06); }
.room-tile:hover .room-tile-img--photo::after { opacity: 1; }
.room-tile:hover .room-tile-overlay { opacity: 1; transform: translateY(0); }
.room-tile:hover .room-tile-img { box-shadow: 0 14px 32px rgba(0,62,116,0.18); }

.room-tile h4 { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.room-tile span { font-size: 11px; color: var(--mid); font-weight: 400; }

/* Budget */
.budget-section { background: var(--white); }
.budget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.budget-card {
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  display: flex;
  flex-direction: column;
}

.budget-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); }

.budget-card-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}

.budget-card-body { padding: 18px 20px 22px; flex: 1; }
.budget-price-tag {
  display: inline-block;
  background: var(--yellow);
  color: var(--dark-blue);
  font-size: 15px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 3px;
  margin-bottom: 12px;
  font-family: var(--serif);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.budget-card-body h4 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.budget-card-body p { font-size: 13px; color: var(--mid); line-height: 1.6; font-weight: 300; }
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.2s;
}
.read-more:hover { gap: 10px; }

/* DIY */
.diy-section {
  background: var(--dark-blue);
  color: white;
}
.diy-section .section-label { color: var(--yellow); }
.diy-section .section-label::after { background: rgba(255,255,255,0.3); }
.diy-section .section-heading { color: white; }
.diy-section .section-heading em { color: var(--yellow); }
.diy-section .section-sub { color: rgba(255,255,255,0.65); }
.diy-section .see-all { color: var(--yellow); border-bottom-color: rgba(255,255,255,0.3); }

.diy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.diy-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.diy-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-4px); }
.diy-img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.diy-body { padding: 22px; }
.diy-type { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; }
.diy-body h4 { font-family: var(--serif); font-size: 18px; font-weight: 700; color: white; line-height: 1.25; margin-bottom: 10px; }
.diy-body p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.65; font-weight: 300; }
.diy-steps { display: flex; gap: 8px; margin-top: 16px; position: relative; }
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--dark-blue);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.step-dot:hover,
.step-dot:focus-visible {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  outline: none;
}

/* Product popover that appears on step-dot hover. JS positions it. */
.step-product-popover {
  position: absolute;
  z-index: 50;
  width: 220px;
  background: var(--white);
  color: var(--dark);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.step-product-popover.open {
  opacity: 1;
  transform: translateY(0);
}
.step-product-popover::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-left: 1px solid rgba(0,0,0,0.06);
  border-top: 1px solid rgba(0,0,0,0.06);
  transform: rotate(45deg);
}
.step-product-popover__img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  display: block;
  background: var(--light-gray);
}
.step-product-popover__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--dark);
  margin: 0 0 4px;
  line-height: 1.25;
}
.step-product-popover__price {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Rental */
.rental-section { background: var(--off-white); }
.rental-banner {
  background: var(--blue);
  border-radius: 4px;
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}
.rental-banner::before {
  content: '🏠';
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 200px;
  opacity: 0.05;
}
.rental-banner h3 { font-family: var(--serif); font-size: 36px; font-weight: 700; color: white; line-height: 1.1; margin-bottom: 14px; }
.rental-banner h3 em { font-style: italic; color: var(--yellow); }
.rental-banner p { font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.7; font-weight: 300; margin-bottom: 28px; }
.rental-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rental-tile {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--light-gray);
  transition: transform 0.3s, box-shadow 0.3s;
}
.rental-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.09); }
.rental-tile-img { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 56px; }
.rental-tile-body { padding: 16px 18px 20px; }
.rental-tile-badge {
  display: inline-block;
  background: var(--off-white);
  color: var(--dark-blue);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--light-gray);
}
.rental-tile-body h4 { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.rental-tile-body p { font-size: 12.5px; color: var(--mid); line-height: 1.55; font-weight: 300; }

/* Seasonal */
.seasonal-section { background: var(--white); }
.seasonal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--light-gray);
}
.season-tab {
  padding: 12px 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--mid);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.season-tab.active { color: var(--dark-blue); border-bottom-color: var(--yellow); }
.season-tab:hover { color: var(--dark-blue); }
.seasonal-content { display: none; }
.seasonal-content.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.season-card {
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  background: var(--off-white);
}
.season-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.09); }
.season-img { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 72px; }
.season-body { padding: 20px; }
.season-body h4 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.season-body p { font-size: 13px; color: var(--mid); line-height: 1.6; font-weight: 300; }

/* Newsletter — elevated editorial block */
.newsletter-section.nl-feature {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 24px;
  overflow: hidden;
  background: linear-gradient(165deg, #faf9f5 0%, #eef3f9 42%, #f7f5ef 100%);
  border-top: 1px solid rgba(0, 62, 116, 0.08);
  border-bottom: 1px solid rgba(0, 62, 116, 0.06);
}
.nl-feature-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.nl-feature-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
}
.nl-feature-blob--a {
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  background: radial-gradient(circle, rgba(255, 219, 0, 0.45) 0%, transparent 70%);
  top: -18%;
  right: -8%;
}
.nl-feature-blob--b {
  width: min(60vw, 420px);
  height: min(60vw, 420px);
  background: radial-gradient(circle, rgba(0, 88, 163, 0.14) 0%, transparent 70%);
  bottom: -22%;
  left: -12%;
}
.nl-feature-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 62, 116, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 62, 116, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%);
}
.nl-feature-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .nl-feature-inner {
    grid-template-columns: 1.05fr 0.92fr;
    gap: 56px;
  }
}
.nl-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-blue);
  margin-bottom: 20px;
}
.nl-feature-eyebrow-line {
  display: inline-block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow) 0%, rgba(255, 219, 0, 0.35) 100%);
  box-shadow: 0 1px 0 rgba(0, 62, 116, 0.08);
}
.nl-feature-title {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.025em;
  max-width: 11em;
}
.nl-feature-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: rgba(255, 219, 0, 0.95);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.nl-feature-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mid);
  font-weight: 400;
  max-width: 38em;
}
.nl-feature-highlights {
  list-style: none;
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.nl-feature-highlights li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-blue);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 62, 116, 0.1);
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0, 62, 116, 0.05);
  backdrop-filter: blur(8px);
}
.nl-hi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--yellow), #e6c200);
  flex-shrink: 0;
}

/* Decor photo nested with newsletter copy. */
.nl-feature-photo {
  margin: 32px 0 0;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 18px 44px rgba(0, 62, 116, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255,255,255,0.85);
  transform: rotate(-1.5deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.nl-feature-photo:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 22px 52px rgba(0, 62, 116, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.nl-feature-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .nl-feature-photo { display: none; }
}
.nl-feature-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  padding: 32px 28px 36px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 28px 56px rgba(0, 62, 116, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
}
@media (min-width: 600px) {
  .nl-feature-panel {
    padding: 36px 36px 40px;
    border-radius: 28px;
  }
}
.nl-panel-ribbon {
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--yellow) 0%, #ffd43b 35%, var(--blue) 100%);
  opacity: 0.95;
}
.nl-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
  padding-top: 8px;
}
.nl-panel-icon {
  flex-shrink: 0;
  padding: 10px;
  background: linear-gradient(155deg, rgba(255, 219, 0, 0.2) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 62, 116, 0.08);
}
.nl-panel-head-text { min-width: 0; }
.nl-panel-kicker {
  font-size: 20px;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 1.2;
  margin-bottom: 4px;
}
.nl-panel-tagline {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.45;
}
.nl-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nl-inline--panel {
  gap: 10px;
}
@media (min-width: 520px) {
  .nl-inline--panel {
    flex-direction: row;
    align-items: stretch;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 62, 116, 0.12);
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0, 62, 116, 0.06);
  }
  .nl-inline--panel:focus-within {
    border-color: rgba(0, 88, 163, 0.45);
    box-shadow: 0 0 0 3px rgba(0, 88, 163, 0.12), 0 6px 20px rgba(0, 62, 116, 0.08);
  }
}
.nl-input-email {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid rgba(0, 62, 116, 0.12);
  background: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--dark);
  outline: none;
  border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
@media (min-width: 520px) {
  .nl-inline--panel .nl-input-email {
    flex: 1;
    border: none;
    border-radius: 0;
    min-width: 0;
    background: transparent;
    box-shadow: none;
  }
}
.nl-input-email::placeholder { color: #8a8a8a; }
.nl-input-email:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(0, 88, 163, 0.2);
}
.nl-btn-subscribe {
  flex-shrink: 0;
  padding: 16px 26px;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 14px;
  white-space: nowrap;
  color: var(--dark-blue);
  background: linear-gradient(165deg, var(--yellow) 0%, #ffd93d 45%, #ffc107 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 24px rgba(0, 62, 116, 0.15);
  transition: transform 0.18s, box-shadow 0.2s, filter 0.2s;
}
@media (min-width: 520px) {
  .nl-inline--panel .nl-btn-subscribe {
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(180deg, #003E74 0%, #004a8c 100%);
    color: var(--white);
    letter-spacing: 0.08em;
  }
  .nl-inline--panel .nl-btn-subscribe:hover {
    background: linear-gradient(180deg, var(--blue) 0%, #0066bd 100%);
    filter: brightness(1.03);
  }
}
@media (max-width: 519px) {
  .nl-btn-subscribe:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 12px 28px rgba(0, 62, 116, 0.18);
  }
}
.nl-btn-subscribe:active { transform: scale(0.98); }
.nl-optional-wrap {
  display: block;
  margin-top: 20px;
}
.nl-optional-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-blue);
  margin-bottom: 8px;
}
.nl-optional-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--mid);
}
.nl-input-name {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 62, 116, 0.1);
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 100%;
}
@media (min-width: 480px) {
  .nl-input-name { max-width: 320px; }
}
.nl-input-name:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 88, 163, 0.1);
}
.nl-feature-legal {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--mid);
}
.nl-feature-legal a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 88, 163, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.nl-feature-legal a:hover {
  color: var(--dark-blue);
  border-bottom-color: var(--dark-blue);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero blog slider */
/* Hero slider container — holds a sparkle layer + a cluster of floating
   polaroid-style blog cards. No more big sky-blue card. */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  z-index: 2;
  overflow: hidden;
}
.hero-slider-loading {
  color: var(--mid);
  text-align: center;
  font-size: 15px;
  padding: 80px 20px;
}

/* Sparkle layer sits behind the cards. */
.hero-sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-sparkle {
  position: absolute;
  display: block;
  color: var(--yellow);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,219,0,0.65));
  animation-name: heroSparkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.hero-sparkle svg { width: 100%; height: 100%; fill: currentColor; display: block; }
@keyframes heroSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%      { opacity: 0.95; transform: scale(1) rotate(180deg); }
  60%      { opacity: 0.85; transform: scale(1.05) rotate(220deg); }
}

/* Floating polaroid cards. */
.hero-float-cluster {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.float-card {
  position: absolute;
  width: clamp(170px, 38%, 230px);
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 14px;
  box-shadow:
    0 2px 6px rgba(15,42,79,0.08),
    0 16px 38px -10px rgba(15,42,79,0.32);
  text-decoration: none;
  color: var(--dark);
  transform-origin: center;
  /* heroFloatIn fades + drops the card in; floatBob then keeps it gently bobbing forever. */
  animation:
    heroFloatIn 0.7s cubic-bezier(0.2,0.7,0.2,1.05) backwards,
    floatBob 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroFloatIn {
  from { opacity: 0; transform: translateY(24px) rotate(0deg) scale(0.92); }
  to   { opacity: 1; }
}
@keyframes floatBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}
.float-card:hover {
  /* Reset rotation on hover so user can read the title comfortably,
     and lift slightly. */
  transform: rotate(0deg) translateY(-6px) !important;
  box-shadow:
    0 2px 6px rgba(15,42,79,0.1),
    0 24px 54px -10px rgba(15,42,79,0.45);
  z-index: 10 !important;
  animation-play-state: paused;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.float-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-card-views {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 42, 79, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.float-card-views svg { display: block; }
.float-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2,0.6,0.2,1);
}
.float-card:hover .float-card-img img { transform: scale(1.06); }
.float-card-emoji {
  font-size: 48px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-card-body {
  padding: 10px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.float-card-cat {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.float-card-title {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.28;
  color: var(--dark);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
  .hero-sparkle { animation: none; opacity: 0.6; }
}

/* Hidden by default. The hero slider has its own subtle "Loading ideas…"
   placeholder, so this big cartoony living-room SVG would otherwise flash
   on every reload while the slider fetches data — which looks terrible.
   We *only* show it as a real fallback when JavaScript is disabled. */
.hero-illustration-fallback { display: none; }
.hero-right:has(.hero-sparkle-layer) .hero-illustration-fallback { display: none; }
.hero-tags a.tag { text-decoration: none; }


/* Scroll animations */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
  .rooms-grid { grid-template-columns: repeat(3, 1fr); }
  .section-header-row { flex-wrap: wrap; gap: 16px; }
  .rental-banner { padding: 40px 40px; gap: 32px; }
}

@media (max-width: 900px) {
  section { padding: 48px 24px; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 48px 24px 40px; }
  .hero-right { min-height: 320px; display: flex; }
  .hero-illustration-fallback { display: none; }
  .hero h1 { font-size: clamp(32px, 8vw, 48px); }
  .hero-desc { font-size: 15px; margin-bottom: 32px; }
  .hero-btns { flex-wrap: wrap; gap: 10px; }
  .featured-grid { grid-template-columns: 1fr; gap: 20px; }
  .post-card.large { grid-row: span 1; }
  .post-card.large .post-img { height: 280px; }
  .post-card.large .post-img-inner { font-size: 72px; }
  .rooms-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .budget-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .diy-grid { grid-template-columns: 1fr; gap: 20px; }
  .rental-banner { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; margin-bottom: 36px; }
  .rental-banner h3 { font-size: 28px; }
  .rental-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .seasonal-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .seasonal-tabs::-webkit-scrollbar { display: none; }
  .season-tab { flex-shrink: 0; padding: 12px 20px; font-size: 12px; }
  .seasonal-content.active { grid-template-columns: 1fr; gap: 20px; }
  .newsletter-section.nl-feature { padding: 48px 20px; }
  .nl-feature-inner { gap: 28px; }
  .small-spaces-callout { flex-direction: column; text-align: center; padding: 28px 24px; gap: 20px; }
}

@media (max-width: 600px) {
  section { padding: 40px 16px; }
  .section-label { font-size: 10px; }
  .section-heading { font-size: clamp(22px, 5vw, 28px); }
  .section-sub { font-size: 14px; margin-bottom: 32px; }
  .section-header-row { margin-bottom: 32px; }
  .see-all { font-size: 11px; }
  .hero-left { padding: 36px 16px 32px; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 16px; }
  .hero h1 { font-size: 28px; margin-bottom: 18px; }
  .hero-desc { font-size: 14px; max-width: none; margin-bottom: 24px; }
  .hero-tags { margin-bottom: 28px; gap: 8px; }
  .tag { padding: 4px 12px; font-size: 10px; }
  .post-body { padding: 16px 18px 20px; }
  .post-title { font-size: 16px; }
  .post-card.large .post-title { font-size: 20px; }
  .post-card.large .post-img { height: 220px; }
  .post-card.large .post-img-inner { font-size: 56px; }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .room-tile-img { font-size: 36px; }
  .room-tile h4 { font-size: 12px; }
  .budget-grid { grid-template-columns: 1fr; gap: 20px; }
  .budget-card-img { height: 160px; font-size: 56px; }
  .budget-price-tag { font-size: 14px; padding: 5px 10px; }
  .rental-banner { padding: 28px 20px; margin-bottom: 28px; }
  .rental-banner h3 { font-size: 22px; }
  .rental-banner p { font-size: 14px; margin-bottom: 20px; }
  .rental-grid { grid-template-columns: 1fr; gap: 14px; }
  .rental-tile-img { height: 140px; font-size: 48px; }
  .newsletter-section.nl-feature { padding: 40px 16px; }
  .nl-input-email,
  .nl-input-name { font-size: 16px; }
  .marquee-track { font-size: 10px; }
}

@media (max-width: 480px) {
  section { padding: 32px 12px; }
  .hero-left { padding: 28px 12px 24px; }
  .hero h1 { font-size: 24px; }
  .post-body { padding: 14px 16px 18px; }
  .rooms-grid { grid-template-columns: 1fr; }
  .season-tab { padding: 10px 16px; font-size: 11px; }
}

/* Small spaces callout (no inline) */
.small-spaces-callout {
  margin-top: 24px;
  background: var(--blue);
  border-radius: 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,62,116,0.18);
}
.small-spaces-callout-img {
  width: 220px;
  height: 100%;
  min-height: 160px;
  overflow: hidden;
  margin: 0;
}
.small-spaces-callout-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.small-spaces-callout-text { padding: 28px 0; }
.small-spaces-callout .callout-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 8px;
}
.small-spaces-callout h3 { font-family: var(--serif); font-size: 28px; font-weight: 700; color: white; line-height: 1.1; }
.small-spaces-callout p { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 8px; font-weight: 300; }
.small-spaces-callout .btn-primary { margin-right: 32px; flex-shrink: 0; }
@media (max-width: 768px) {
  .small-spaces-callout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .small-spaces-callout-img { width: 100%; height: 180px; }
  .small-spaces-callout-text { padding: 24px 24px 0; }
  .small-spaces-callout .btn-primary { margin: 0 24px 24px; justify-self: center; }
}
.rental-banner-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rental-banner-feature {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 16px 20px;
  color: white;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
}
.rental-banner-feature strong { font-weight: 700; color: var(--yellow); }
.nl-disclaimer { font-size: 11px; color: var(--dark-blue); opacity: 0.55; text-align: center; }

/* ─────────────────────────────────────────────────────────────────────
 * Editorial polish: richer hero typography, decorative section accents,
 * deeper card hover states, ornament between sections.
 * ───────────────────────────────────────────────────────────────────── */

/* Reading progress bar pinned to the very top of the page. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--yellow) 0%, #ffd43b 50%, var(--blue) 100%);
  z-index: 9999;
  transition: width 0.12s ease-out;
  box-shadow: 0 0 8px rgba(255,219,0,0.55);
}

/* Decorative ornament: small floral/asterisk divider between sections. */
.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 24px 0;
  max-width: var(--max-w-page);
  margin: 0 auto;
  color: var(--dark-blue);
  opacity: 0.55;
}
.section-ornament::before,
.section-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dark-blue), transparent);
  max-width: 120px;
  opacity: 0.4;
}
.section-ornament__mark {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.4em;
  font-weight: 600;
}

/* Featured card depth — handled by the .post-card rules at the top of this
   file. Older legacy overrides removed in favor of the fancier card styling. */

/* Section heading: tighten leading, slightly warmer accent on the em */
.section-heading em {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: var(--blue);
}
.section-heading em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.45em;
  background: var(--yellow);
  opacity: 0.35;
  z-index: -1;
  border-radius: 2px;
  transform: skew(-8deg);
}

/* Hero: refined eyebrow, deeper text-shadow on h1 letters for legibility */
.hero h1 em {
  position: relative;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.06em;
  height: 0.4em;
  background: var(--yellow);
  opacity: 0.45;
  z-index: -1;
  border-radius: 4px;
  transform: skew(-6deg);
}

/* Tag chip: slight gradient + hover lift */
.tag {
  background: linear-gradient(160deg, var(--yellow) 0%, #ffe04d 100%);
  box-shadow: 0 2px 6px rgba(0,62,116,0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.tag:hover {
  background: var(--dark-blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,62,116,0.22);
}

/* Buttons: subtle gloss + better focus state */
.btn-primary {
  background: linear-gradient(180deg, var(--dark-blue) 0%, #002e58 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px rgba(0,62,116,0.2);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--blue) 0%, #003e74 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 10px 22px rgba(0,62,116,0.28);
}
.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* Marquee: subtle gradient mask at edges so it fades into the page */
.marquee-bar { position: relative; }
.marquee-bar::before,
.marquee-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.marquee-bar::before {
  left: 0;
  background: linear-gradient(90deg, var(--dark-blue) 0%, transparent 100%);
}
.marquee-bar::after {
  right: 0;
  background: linear-gradient(270deg, var(--dark-blue) 0%, transparent 100%);
}

/* DIY section: subtle decorative dot pattern in background */
.diy-section {
  position: relative;
  overflow: hidden;
}
.diy-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,219,0,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.diy-section > * { position: relative; z-index: 1; }