/* Build 255 — public navigation + promoted V2 page consistency.
   Loaded after all legacy/V2 page styles so page-specific layouts win. */

/* ---------- Main navigation ---------- */
.site-header .header-inner {
  width: calc(100% - 56px) !important;
  max-width: none !important;
  min-height: 108px !important;
  margin-inline: auto !important;
}
@media (min-width: 1321px) {
  .site-header .header-inner {
    grid-template-columns: 250px minmax(0,1fr) !important;
    gap: clamp(28px, 2.5vw, 54px) !important;
  }
  .site-header .logo-link { width: 250px !important; }
  .site-header .nav-toggle { display: none !important; }
  .site-header .main-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, .72vw, 15px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  .site-header .main-nav > a,
  .site-header .main-nav > .nav-dropdown > summary {
    font-size: clamp(.72rem, .66vw, .87rem) !important;
    letter-spacing: .045em !important;
    font-weight: 800 !important;
  }
  .site-header .main-nav > .nav-availability {
    padding: 10px 13px !important;
  }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  .site-header .header-inner { grid-template-columns: 220px minmax(0,1fr) !important; gap: 24px !important; }
  .site-header .logo-link { width: 220px !important; }
  .site-header .main-nav { gap: 8px !important; }
  .site-header .main-nav > a,
  .site-header .main-nav > .nav-dropdown > summary { font-size: .72rem !important; letter-spacing: .025em !important; }
  .site-header .main-nav > .nav-availability { padding: 9px 10px !important; }
}
/* Use the mobile menu before the expanded desktop nav becomes cramped. */
@media (max-width: 1320px) {
  .site-header .header-inner {
    width: calc(100% - 34px) !important;
    min-height: 86px !important;
    grid-template-columns: minmax(180px, 240px) 1fr 46px !important;
    gap: 16px !important;
  }
  .site-header .logo-link { width: min(240px, 100%) !important; }
  .site-header .nav-toggle { display: inline-grid !important; place-items: center !important; justify-self: end !important; }
  .site-header .main-nav {
    position: fixed !important;
    z-index: 130 !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px 24px 26px !important;
    background: rgba(0,0,0,.985) !important;
    border-top: 1px solid rgba(210,162,58,.2) !important;
    border-bottom: 1px solid rgba(210,162,58,.28) !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
  }
  body.nav-open .site-header .main-nav { display: flex !important; }
  .site-header .main-nav > a,
  .site-header .main-nav > .nav-dropdown > summary {
    padding: 14px 0 !important;
    font-size: .91rem !important;
    letter-spacing: .07em !important;
  }
  .site-header .main-nav > .nav-dropdown { border-bottom: 1px solid rgba(210,162,58,.13) !important; }
  .site-header .main-nav > .nav-dropdown > summary { justify-content: space-between !important; }
  .site-header .main-nav > .nav-dropdown > .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    width: auto !important;
    padding: 0 0 10px 14px !important;
    border: 0 !important;
    border-left: 1px solid rgba(210,162,58,.3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .site-header .main-nav > .nav-dropdown > .nav-dropdown-menu a { padding: 10px 12px !important; }
  .site-header .main-nav > .nav-availability { margin-top: 12px !important; text-align: center !important; }
}
@media (max-width: 640px) {
  .site-header .header-inner { width: calc(100% - 24px) !important; grid-template-columns: 190px 1fr 44px !important; }
  .site-header .logo-link { width: 190px !important; }
}
/* ---------- About hero ---------- */
@media (min-width: 901px) {
  body.about-page .about-hero.preview-v2-hero { padding: 0 !important; }
  body.about-page .about-hero-grid.preview-v2-hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important;
    gap: clamp(34px, 4vw, 68px) !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: clamp(42px, 4vw, 64px) var(--public-content-gutter, clamp(28px,4vw,72px)) !important;
  }
  body.about-page .about-hero-copy.preview-v2-hero-copy {
    padding: 0 !important;
    background: transparent !important;
    align-self: center !important;
  }
  body.about-page .about-hero-media.preview-v2-hero-media {
    width: 100% !important;
    height: clamp(340px, 30vw, 455px) !important;
    min-height: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  body.about-page .about-hero-media.preview-v2-hero-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 35% !important;
  }
}
@media (max-width: 900px) {
  body.about-page .about-hero-grid.preview-v2-hero-split { min-height: 0 !important; }
  body.about-page .about-hero-media.preview-v2-hero-media { min-height: 0 !important; height: clamp(320px, 70vw, 460px) !important; }
  body.about-page .about-hero-media.preview-v2-hero-media img { min-height: 0 !important; height: 100% !important; object-position: 50% 34% !important; }
}
/* ---------- Reviews hero/header consistency ---------- */
@media (min-width: 981px) {
  body.reviews-page .reviews-hero.preview-v2-hero { padding: 0 !important; }
  body.reviews-page .reviews-hero-grid.preview-v2-hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(410px, .94fr) !important;
    gap: clamp(36px, 4vw, 70px) !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 46px var(--public-content-gutter, clamp(28px,4vw,72px)) 62px !important;
  }
  body.reviews-page .reviews-hero-copy.preview-v2-hero-copy {
    padding: 0 !important;
    background: transparent !important;
    align-self: center !important;
  }
  body.reviews-page .reviews-hero-media.preview-v2-hero-media {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.reviews-page .reviews-hero-image { height: clamp(340px, 29vw, 440px) !important; }
  body.reviews-page .reviews-hero-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 50% 32% !important;
  }
}
@media (max-width: 980px) {
  body.reviews-page .reviews-hero-grid.preview-v2-hero-split { min-height: 0 !important; }
  body.reviews-page .reviews-hero-media.preview-v2-hero-media { min-height: 0 !important; height: auto !important; overflow: visible !important; }
  body.reviews-page .reviews-hero-image { height: clamp(320px, 62vw, 430px) !important; }
  body.reviews-page .reviews-hero-image img { min-height: 0 !important; height: 100% !important; object-position: 50% 32% !important; }
}
/* ---------- Gallery: restore the intentional collage/grids ---------- */
body.gallery-page .gallery-hero.preview-v2-hero { padding: 0 !important; }
body.gallery-page .gallery-hero-grid.preview-v2-hero-split {
  display: grid !important;
  grid-template-columns: minmax(0, .83fr) minmax(520px, 1.17fr) !important;
  gap: clamp(34px, 4vw, 64px) !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 46px var(--public-content-gutter, clamp(28px,4vw,72px)) 42px !important;
}
body.gallery-page .gallery-hero-copy.preview-v2-hero-copy {
  padding: 0 !important;
  background: transparent !important;
  align-self: center !important;
  justify-content: center !important;
}
body.gallery-page .gallery-hero-collage.preview-v2-hero-panel {
  display: grid !important;
  grid-template-columns: minmax(0,1.9fr) minmax(190px,.95fr) minmax(140px,.72fr) !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  height: clamp(350px, 30vw, 430px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
body.gallery-page .gallery-hero-collage.preview-v2-hero-panel button { min-width: 0 !important; min-height: 0 !important; }
body.gallery-page .gallery-showcase > .container {
  width: 100% !important; max-width: none !important; padding-inline: var(--public-content-gutter, clamp(28px,4vw,72px)) !important;
}
@media (max-width: 1080px) {
  body.gallery-page .gallery-hero-grid.preview-v2-hero-split { grid-template-columns: 1fr !important; }
  body.gallery-page .gallery-hero-collage.preview-v2-hero-panel { max-width: 900px !important; height: 390px !important; }
}
@media (max-width: 760px) {
  body.gallery-page .gallery-hero-grid.preview-v2-hero-split { padding: 34px var(--public-content-gutter, 20px) 32px !important; }
  body.gallery-page .gallery-hero-collage.preview-v2-hero-panel {
    height: auto !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-rows: auto !important;
  }
}

/* Build 258 — public header, scroll-control and Weddings consistency. */
/* One public header presentation everywhere. Page-specific styles are not allowed to
   move, resize or restyle the shell after this file loads. */
html body .site-header {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: #050505 !important;
  border-bottom: 1px solid rgba(210,162,58,.24) !important;
  box-shadow: none !important;
}
html body .site-header .header-inner {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  align-items: center !important;
  padding-block: 0 !important;
  transform: none !important;
}
html body .site-header .logo-link {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
html body .site-header .logo-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 88px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
html body .site-header .main-nav {
  margin: 0 !important;
  transform: none !important;
}
html body .site-header .main-nav > a,
html body .site-header .main-nav > .nav-dropdown,
html body .site-header .main-nav > .nav-dropdown > summary {
  align-self: center !important;
}
html body .site-header .main-nav > a,
html body .site-header .main-nav > .nav-dropdown > summary {
  line-height: 1.15 !important;
}
/* Weddings had accumulated page-specific header rules over several V2 passes.
   These selectors deliberately pin it to the same shell as Collaborations. */
html body.weddings-page .site-header,
html body.weddings-page .site-header .header-inner,
html body.weddings-page .site-header .main-nav,
html body.weddings-page .site-header .logo-link {
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}
/* Wedding package chooser: landscape artwork is supporting navigation, not a hero.
   Keep all five visible at a sensible size on wide screens and never crop the art. */
body.weddings-page #wedding-packages .packages-grid {
  width: 100% !important;
  max-width: 1260px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(150px, 220px)) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: clamp(12px, 1.25vw, 20px) !important;
}
body.weddings-page #wedding-packages .package-card {
  width: 100% !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
body.weddings-page #wedding-packages .package-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 165px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 1180px) {
  body.weddings-page #wedding-packages .packages-grid {
    grid-template-columns: repeat(3, minmax(170px, 230px)) !important;
  }
  body.weddings-page #wedding-packages .package-card { max-width: 230px !important; }
  body.weddings-page #wedding-packages .package-card img { max-height: 173px !important; }
}
@media (max-width: 760px) {
  body.weddings-page #wedding-packages .packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 560px !important;
  }
  body.weddings-page #wedding-packages .package-card { max-width: 260px !important; }
  body.weddings-page #wedding-packages .package-card img { max-height: 195px !important; }
}
@media (max-width: 470px) {
  body.weddings-page #wedding-packages .packages-grid { grid-template-columns: 1fr !important; max-width: 290px !important; }
  body.weddings-page #wedding-packages .package-card { max-width: 290px !important; }
  body.weddings-page #wedding-packages .package-card img { max-height: 218px !important; }
}
/* One scroll-arrow system everywhere: exactly the dark/gold circular treatment used
   on Collaborations. Page-specific legacy colours/backgrounds are overridden. */
html body .section-scroll-next.preview-v2-scroll-next {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d2a23a !important;
  border-radius: 999px !important;
  background: rgba(8,8,8,.94) !important;
  color: #efc767 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body > .section-scroll-next.preview-v2-scroll-next {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 96 !important;
  transform: translateX(-50%) !important;
}
html body .section-scroll-next.preview-v2-scroll-next svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  overflow: visible !important;
}
html body .section-scroll-next.preview-v2-scroll-next svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .section-scroll-next.preview-v2-scroll-next:hover,
html body .section-scroll-next.preview-v2-scroll-next:focus-visible {
  background: #d2a23a !important;
  border-color: #d2a23a !important;
  color: #080808 !important;
  outline: none !important;
}
html body .section-scroll-next.preview-v2-scroll-next:focus-visible {
  box-shadow: 0 0 0 3px rgba(210,162,58,.22), 0 10px 28px rgba(0,0,0,.34) !important;
}
@media (max-width: 720px) {
  html body .section-scroll-next.preview-v2-scroll-next {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
  html body > .section-scroll-next.preview-v2-scroll-next { bottom: 14px !important; }
  html body .section-scroll-next.preview-v2-scroll-next svg { width: 22px !important; height: 22px !important; }
}

/* Build 262 — promoted original public pages: outstanding consistency fixes.
   This layer deliberately changes presentation only. No retired *2 HTML page is targeted. */

/* Wedding Advice: the shared public header changes from 108px to 86px at 1320px.
   Keep the opening hero + header equal to one complete viewport at that same breakpoint. */
html body.resource-page-advice main > .article-hero,
html body.resource-page-advice main > .article-hero > .article-hero-grid {
  min-height: calc(100vh - 108px) !important;
  min-height: calc(100svh - 108px) !important;
}
@media (max-width: 1320px) {
  html body.resource-page-advice main > .article-hero,
  html body.resource-page-advice main > .article-hero > .article-hero-grid {
    min-height: calc(100vh - 86px) !important;
    min-height: calc(100svh - 86px) !important;
  }
}

/* Wedding Advice: make the reading field / guide rail contrast explicit and use the
   exact warm-ivory colour used by the light V2 sections elsewhere on the site. */
html body.resource-page-advice .article-content-section {
  background: #090909 !important;
}
html body.resource-page-advice .article-side-card {
  background: #f4efe7 !important;
  color: #17130e !important;
  border-color: rgba(127,92,23,.38) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.34) !important;
}
html body.resource-page-advice .article-side-card h2,
html body.resource-page-advice .article-side-card strong {
  color: #17130e !important;
}
html body.resource-page-advice .article-side-card .article-toc-list a,
html body.resource-page-advice .article-side-card .article-side-links a,
html body.resource-page-advice .article-side-card .article-topic-chip {
  color: #30281e !important;
}
html body.resource-page-advice .article-side-card .article-toc-list a:hover,
html body.resource-page-advice .article-side-card .article-toc-list a:focus-visible,
html body.resource-page-advice .article-side-card .article-side-links a:hover,
html body.resource-page-advice .article-side-card .article-side-links a:focus-visible,
html body.resource-page-advice .article-side-card .article-topic-chip:hover,
html body.resource-page-advice .article-side-card .article-topic-chip:focus-visible {
  color: #7f5c17 !important;
}

/* Weddings: the five 4:3 package chooser images are navigation thumbnails, not hero
   artwork. Keep them substantially smaller while preserving the full source image. */
html body.weddings-page #wedding-packages .packages-grid {
  width: 100% !important;
  max-width: 860px !important;
  grid-template-columns: repeat(5, minmax(118px, 150px)) !important;
  justify-content: center !important;
  gap: clamp(10px, .9vw, 14px) !important;
}
html body.weddings-page #wedding-packages .package-card {
  width: 100% !important;
  max-width: 150px !important;
  min-width: 0 !important;
}
html body.weddings-page #wedding-packages .package-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 113px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 1180px) {
  html body.weddings-page #wedding-packages .packages-grid {
    max-width: 510px !important;
    grid-template-columns: repeat(3, minmax(120px, 150px)) !important;
  }
  html body.weddings-page #wedding-packages .package-card { max-width: 150px !important; }
  html body.weddings-page #wedding-packages .package-card img { max-height: 113px !important; }
}
@media (max-width: 760px) {
  html body.weddings-page #wedding-packages .packages-grid {
    max-width: 350px !important;
    grid-template-columns: repeat(2, minmax(0, 165px)) !important;
  }
  html body.weddings-page #wedding-packages .package-card { max-width: 165px !important; }
  html body.weddings-page #wedding-packages .package-card img { max-height: 124px !important; }
}
@media (max-width: 470px) {
  html body.weddings-page #wedding-packages .packages-grid {
    max-width: 210px !important;
    grid-template-columns: 1fr !important;
  }
  html body.weddings-page #wedding-packages .package-card { max-width: 210px !important; }
  html body.weddings-page #wedding-packages .package-card img { max-height: 158px !important; }
}

/* Weddings: explicitly pin the promoted original page to the shared Collaborations
   header geometry so older Weddings-specific styles cannot alter the top navigation. */
html body.weddings-page .site-header .header-inner {
  width: calc(100% - 56px) !important;
  max-width: none !important;
  min-height: 108px !important;
  margin-inline: auto !important;
  padding-block: 0 !important;
}
@media (min-width: 1321px) {
  html body.weddings-page .site-header .header-inner {
    grid-template-columns: 250px minmax(0,1fr) !important;
    gap: clamp(28px, 2.5vw, 54px) !important;
  }
  html body.weddings-page .site-header .logo-link { width: 250px !important; }
  html body.weddings-page .site-header .nav-toggle { display: none !important; }
  html body.weddings-page .site-header .main-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, .72vw, 15px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  html body.weddings-page .site-header .main-nav > a,
  html body.weddings-page .site-header .main-nav > .nav-dropdown > summary {
    font-size: clamp(.72rem, .66vw, .87rem) !important;
    letter-spacing: .045em !important;
    font-weight: 800 !important;
  }
  html body.weddings-page .site-header .main-nav > .nav-availability {
    padding: 10px 13px !important;
  }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  html body.weddings-page .site-header .header-inner {
    grid-template-columns: 220px minmax(0,1fr) !important;
    gap: 24px !important;
  }
  html body.weddings-page .site-header .logo-link { width: 220px !important; }
  html body.weddings-page .site-header .main-nav { gap: 8px !important; }
  html body.weddings-page .site-header .main-nav > a,
  html body.weddings-page .site-header .main-nav > .nav-dropdown > summary {
    font-size: .72rem !important;
    letter-spacing: .025em !important;
  }
  html body.weddings-page .site-header .main-nav > .nav-availability { padding: 9px 10px !important; }
}
@media (max-width: 1320px) {
  html body.weddings-page .site-header .header-inner {
    width: calc(100% - 34px) !important;
    min-height: 86px !important;
    grid-template-columns: minmax(180px, 240px) 1fr 46px !important;
    gap: 16px !important;
  }
  html body.weddings-page .site-header .logo-link { width: min(240px, 100%) !important; }
  html body.weddings-page .site-header .nav-toggle {
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
  }
  html body.weddings-page .site-header .main-nav {
    position: fixed !important;
    z-index: 130 !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px 24px 26px !important;
    background: rgba(0,0,0,.985) !important;
    border-top: 1px solid rgba(210,162,58,.2) !important;
    border-bottom: 1px solid rgba(210,162,58,.28) !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }
  html body.weddings-page.nav-open .site-header .main-nav { display: flex !important; }
}
@media (max-width: 640px) {
  html body.weddings-page .site-header .header-inner {
    width: calc(100% - 24px) !important;
    grid-template-columns: 190px 1fr 44px !important;
  }
  html body.weddings-page .site-header .logo-link { width: 190px !important; }
}

/* Scroll controls: use the actual Collaborations visual treatment everywhere.
   Generic V2 arrows remain interactive; Collaborations keeps its own is-visible behaviour. */
html body .section-scroll-next {
  box-sizing: border-box !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(244,210,124,.72) !important;
  border-radius: 50% !important;
  background: rgba(5,5,5,.12) !important;
  color: var(--gold-light, #f4d27c) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  opacity: .86 !important;
  pointer-events: auto !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease !important;
}
html body > .section-scroll-next {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  z-index: 9998 !important;
  transform: translate(-50%, 0) !important;
}
html body .section-scroll-next svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)) !important;
  transition: transform .18s ease !important;
}
html body .section-scroll-next svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .section-scroll-next:hover,
html body .section-scroll-next:focus-visible {
  opacity: 1 !important;
  border-color: var(--gold-light, #f4d27c) !important;
  background: rgba(5,5,5,.28) !important;
  color: var(--gold-light, #f4d27c) !important;
  outline: none !important;
}
html body .section-scroll-next:hover svg,
html body .section-scroll-next:focus-visible svg {
  transform: translateY(2px) !important;
}
html body.page2-preview .section-scroll-next.is-at-end {
  opacity: .38 !important;
}
html body.collaborations-page .section-scroll-next {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 12px) !important;
}
html body.collaborations-page .section-scroll-next.is-visible {
  opacity: .86 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}
html body.collaborations-page .section-scroll-next.is-visible:hover,
html body.collaborations-page .section-scroll-next.is-visible:focus-visible {
  opacity: 1 !important;
}
@media (max-width: 640px) {
  html body .section-scroll-next {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  html body > .section-scroll-next {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  html body .section-scroll-next svg {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .section-scroll-next,
  html body .section-scroll-next svg {
    transition: none !important;
  }
}

/* Build 264 — Wedding Advice landing page, built strictly on top of Build 262.
   This is a CSS-only transformation of the existing wedding-advice.php markup:
   full-depth photographic hero, real anchor scroll control, warm-light category rail,
   image-led horizontal advice carousel and deliberate light/dark section contrast. */

/* LANDING HERO — use the same photographic, full-viewport language as the article page. */
html body.resource-page-advice main > .resource-hero {
  position: relative !important;
  min-height: calc(100vh - 108px) !important;
  min-height: calc(100svh - 108px) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-bottom: 1px solid rgba(210,162,58,.22) !important;
  background:
    linear-gradient(90deg,rgba(4,4,4,.96) 0%,rgba(4,4,4,.87) 28%,rgba(4,4,4,.55) 53%,rgba(4,4,4,.22) 74%,rgba(4,4,4,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.05) 58%,rgba(0,0,0,.7) 100%),
    url("../img/home-v2/home-hero-ballroom-1536.webp") 64% 45% / cover no-repeat !important;
}
html body.resource-page-advice main > .resource-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(210,162,58,.72),transparent) !important;
  pointer-events: none !important;
}
html body.resource-page-advice main > .resource-hero > .resource-hero-grid {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 108px) !important;
  min-height: calc(100svh - 108px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(70px,8vh,118px) var(--public-content-gutter,clamp(28px,4vw,72px)) clamp(96px,11vh,142px) !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy {
  position: static !important;
  width: min(790px,58vw) !important;
  max-width: 790px !important;
  min-width: 0 !important;
  padding: clamp(22px,3vw,42px) 0 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.52) !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy .kicker {
  color: #efc767 !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy h1 {
  max-width: 780px !important;
  margin: .28rem 0 1rem !important;
  color: #fff8ea !important;
  font-size: clamp(2.8rem,4.65vw,5.75rem) !important;
  line-height: .99 !important;
  text-wrap: balance !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy > p:not(.kicker) {
  max-width: 710px !important;
  margin: 0 !important;
  color: rgba(255,248,234,.9) !important;
  font-size: clamp(1.06rem,1.3vw,1.24rem) !important;
  line-height: 1.68 !important;
}
/* The old small graphic is no longer the hero visual; the full bleed wedding photograph is. */
html body.resource-page-advice main > .resource-hero .resource-hero-media {
  display: none !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 28px !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]) {
  border-color: rgba(244,210,124,.72) !important;
  background: rgba(5,5,5,.42) !important;
  color: #f7e6b0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]):hover,
html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]):focus-visible {
  background: #d2a23a !important;
  border-color: #d2a23a !important;
  color: #080808 !important;
}

/* Re-use the existing Browse advice anchor as the missing Collaborations-style scroll control. */
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  z-index: 8 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(210,162,58,.62) !important;
  border-radius: 50% !important;
  background: rgba(5,5,5,.28) !important;
  color: var(--gold-light,#f4d27c) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: .88 !important;
  transition: opacity .18s ease,border-color .18s ease,background .18s ease !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  width: 1.8px !important;
  height: 17px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform: translateX(-50%) !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 20px !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  transform: translateX(-50%) rotate(45deg) !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]:hover,
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]:focus-visible {
  opacity: 1 !important;
  border-color: var(--gold-light,#f4d27c) !important;
  background: rgba(5,5,5,.42) !important;
  color: var(--gold-light,#f4d27c) !important;
  outline: none !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(210,162,58,.22),0 10px 28px rgba(0,0,0,.34) !important;
}

/* ADVICE LIBRARY — dark editorial field with the warm-light guide rail from article pages. */
html body.resource-page-advice main > #articles.resource-section {
  scroll-margin-top: 108px !important;
  padding: clamp(58px,6.2vw,94px) 0 !important;
  background:
    radial-gradient(circle at 8% 8%,rgba(210,162,58,.05),transparent 26%),
    linear-gradient(180deg,#0c0b09 0%,#080808 100%) !important;
  border-bottom: 1px solid rgba(210,162,58,.17) !important;
}
html body.resource-page-advice main > #articles > .container {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(285px,350px) minmax(0,1fr) !important;
  grid-template-rows: auto minmax(0,1fr) !important;
  column-gap: clamp(36px,5vw,82px) !important;
  row-gap: 24px !important;
  align-items: start !important;
  padding-left: var(--public-content-gutter,clamp(28px,4vw,72px)) !important;
  padding-right: var(--public-content-gutter,clamp(28px,4vw,72px)) !important;
}
html body.resource-page-advice main > #articles .resource-section-head {
  grid-column: 2 !important;
  grid-row: 1 !important;
  max-width: 880px !important;
  margin: 0 !important;
}
html body.resource-page-advice main > #articles .resource-section-head .kicker {
  color: #efc767 !important;
}
html body.resource-page-advice main > #articles .resource-section-head h2 {
  margin: .15rem 0 .75rem !important;
  color: #fff5e4 !important;
  font-size: clamp(2.2rem,3.35vw,4rem) !important;
  line-height: 1.05 !important;
  text-wrap: balance !important;
}
html body.resource-page-advice main > #articles .resource-section-head p:not(.kicker) {
  max-width: 760px !important;
  color: #cfc6b9 !important;
  font-size: clamp(1rem,1.08vw,1.12rem) !important;
  line-height: 1.72 !important;
}

/* Existing category toolbar becomes the visible light side menu. */
html body.resource-page-advice main > #articles .advice-toolbar {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: sticky !important;
  top: 122px !important;
  display: grid !important;
  gap: 0 !important;
  align-content: start !important;
  margin: 0 !important;
  padding: clamp(24px,2.4vw,34px) !important;
  border: 1px solid rgba(178,132,38,.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(155deg,#f5f0e7 0%,#eee5d8 100%) !important;
  color: #17130e !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.3) !important;
}
html body.resource-page-advice main > #articles .advice-toolbar::before {
  content: "Browse Wedding Advice" !important;
  display: block !important;
  margin: 0 0 13px !important;
  color: #18130d !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  width: 100% !important;
  min-height: 0 !important;
  justify-content: space-between !important;
  padding: 12px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(99,78,47,.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2c241c !important;
  text-align: left !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  letter-spacing: .035em !important;
  white-space: normal !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn:first-of-type {
  border-top: 1px solid rgba(99,78,47,.14) !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn::after {
  content: "→" !important;
  margin-left: 12px !important;
  color: #a57417 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn:hover,
html body.resource-page-advice main > #articles .advice-toolbar .btn:focus-visible {
  color: #8e6414 !important;
  background: rgba(154,111,26,.055) !important;
  outline: none !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn.btn-primary {
  padding-left: 10px !important;
  padding-right: 10px !important;
  background: rgba(154,111,26,.12) !important;
  color: #744f0c !important;
  font-weight: 900 !important;
}

/* The existing article list becomes an image-led horizontal carousel. */
html body.resource-page-advice main > #articles .advice-grid {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(350px,46%) !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 2px !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(210,162,58,.72) rgba(255,255,255,.055) !important;
  overscroll-behavior-inline: contain !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
  height: 7px !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05) !important;
  border-radius: 999px !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-thumb {
  background: rgba(210,162,58,.72) !important;
  border-radius: 999px !important;
}
html body.resource-page-advice main > #articles .advice-card {
  position: relative !important;
  min-height: 520px !important;
  padding: 0 0 26px !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(210,162,58,.27) !important;
  border-radius: 18px !important;
  background: linear-gradient(155deg,rgba(20,17,12,.98),rgba(7,7,7,.99)) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.28) !important;
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
html body.resource-page-advice main > #articles .advice-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(210,162,58,.52) !important;
  box-shadow: 0 26px 58px rgba(0,0,0,.38) !important;
}
html body.resource-page-advice main > #articles .advice-card::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: clamp(205px,16vw,270px) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(210,162,58,.24) !important;
}
html body.resource-page-advice main > #articles .advice-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: clamp(205px,16vw,270px) !important;
  background: linear-gradient(180deg,rgba(0,0,0,.02) 48%,rgba(7,7,7,.5) 100%) !important;
  pointer-events: none !important;
}
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+1)::before { background-image: url("../img/optimized/qa-image-pass-107/site-content/weddings-v2/wedding-ceremony-barn-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+2)::before { background-image: url("../img/optimized/qa-image-pass-107/site-content/weddings-v2/wedding-ceremony-editorial-close-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+3)::before { background-image: url("../img/optimized/qa-image-pass-107/gallery-v3/wedding-barn-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+4)::before { background-image: url("../img/home-v2/home-hero-ballroom-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+5)::before { background-image: url("../img/optimized/qa-image-pass-107/gallery-v3/wedding-church-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+6)::before { background-image: url("../img/optimized/qa3/heroes/wedding-ceremony-church-hero-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+7)::before { background-image: url("../img/optimized/qa-image-pass-107/site-content/weddings-v2/wedding-ceremony-editorial-full-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+8)::before { background-image: url("../img/optimized/qa3/heroes/james-performance-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card > * {
  position: relative !important;
  z-index: 2 !important;
}
html body.resource-page-advice main > #articles .advice-card > div:first-child {
  margin: 22px 24px 0 !important;
}
html body.resource-page-advice main > #articles .advice-card h2 {
  margin: .55rem 24px .7rem !important;
  color: #fff4df !important;
  font-size: clamp(1.55rem,2vw,2.15rem) !important;
  line-height: 1.14 !important;
  text-wrap: balance !important;
}
html body.resource-page-advice main > #articles .advice-card > p {
  margin: 0 24px !important;
  color: #d2c9bc !important;
  line-height: 1.68 !important;
}
html body.resource-page-advice main > #articles .advice-card .resource-meta {
  margin: 16px 24px 0 !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link {
  margin: auto 24px 0 !important;
  padding-top: 18px !important;
  color: #efc767 !important;
}
html body.resource-page-advice main > #articles .resource-empty {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Chromium's native generated scroll buttons make the CSS-only carousel controllable
   without touching the PHP or any shared JavaScript. Other browsers retain touch/trackpad scroll. */
@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 26px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(210,162,58,.56) !important;
    border-radius: 50% !important;
    background: rgba(6,6,6,.88) !important;
    color: #f4d27c !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.3) !important;
    font: 700 24px/1 Georgia,serif !important;
    cursor: pointer !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) { content: "‹" !important; }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) { content: "›" !important; }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):disabled,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):disabled {
    opacity: .28 !important;
    cursor: default !important;
  }
}

/* FINAL CTA — a genuine light section so the page does not become one endless black field. */
html body.resource-page-advice main > .resource-cta.resource-section-alt {
  padding: clamp(58px,6vw,88px) 0 !important;
  background: #f4efe7 !important;
  color: #17130e !important;
  border-top: 1px solid rgba(127,92,23,.26) !important;
  border-bottom: 0 !important;
}
html body.resource-page-advice main > .resource-cta .resource-cta-shell {
  border-color: rgba(127,92,23,.38) !important;
  background: linear-gradient(135deg,#fbf7ef 0%,#eee4d5 100%) !important;
  box-shadow: 0 24px 56px rgba(47,33,12,.13) !important;
}
html body.resource-page-advice main > .resource-cta .kicker { color: #8f6516 !important; }
html body.resource-page-advice main > .resource-cta h2 { color: #17130e !important; }
html body.resource-page-advice main > .resource-cta p { color: #50483e !important; }
html body.resource-page-advice main > .resource-cta .btn:not(.btn-primary) {
  border-color: rgba(99,78,47,.38) !important;
  color: #241e17 !important;
  background: rgba(255,255,255,.38) !important;
}

@media (max-width: 1320px) {
  html body.resource-page-advice main > .resource-hero,
  html body.resource-page-advice main > .resource-hero > .resource-hero-grid {
    min-height: calc(100vh - 86px) !important;
    min-height: calc(100svh - 86px) !important;
  }
  html body.resource-page-advice main > #articles.resource-section { scroll-margin-top: 86px !important; }
}

@media (max-width: 980px) {
  html body.resource-page-advice main > .resource-hero {
    background-position: 60% 48% !important;
  }
  html body.resource-page-advice main > .resource-hero .resource-hero-copy {
    width: min(760px,82vw) !important;
  }
  html body.resource-page-advice main > #articles > .container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 24px !important;
  }
  html body.resource-page-advice main > #articles .resource-section-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: static !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 22px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar::before {
    width: 100% !important;
    margin-bottom: 3px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn {
    width: auto !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(99,78,47,.2) !important;
    border-radius: 999px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn:first-of-type {
    border-top: 1px solid rgba(99,78,47,.2) !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn::after { display: none !important; }
  html body.resource-page-advice main > #articles .advice-grid,
  html body.resource-page-advice main > #articles .resource-empty {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    grid-auto-columns: minmax(320px,72%) !important;
  }
}

@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero {
    background:
      linear-gradient(90deg,rgba(4,4,4,.93) 0%,rgba(4,4,4,.76) 48%,rgba(4,4,4,.44) 100%),
      linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.72) 100%),
      url("../img/home-v2/home-hero-ballroom-800.webp") 63% 50% / cover no-repeat !important;
  }
  html body.resource-page-advice main > .resource-hero > .resource-hero-grid {
    padding: 48px 22px 92px !important;
  }
  html body.resource-page-advice main > .resource-hero .resource-hero-copy {
    width: 100% !important;
    max-width: 560px !important;
  }
  html body.resource-page-advice main > .resource-hero .resource-hero-copy h1 {
    font-size: clamp(2.45rem,12vw,4rem) !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]) {
    width: 100% !important;
    justify-content: center !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    bottom: 16px !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::before {
    top: 9px !important;
    height: 16px !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::after {
    top: 18px !important;
  }
  html body.resource-page-advice main > #articles > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    padding: 19px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    grid-auto-columns: minmax(286px,88%) !important;
    gap: 14px !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    min-height: 495px !important;
  }
  html body.resource-page-advice main > #articles .advice-card::before,
  html body.resource-page-advice main > #articles .advice-card::after {
    height: 205px !important;
  }
  html body.resource-page-advice main > #articles .advice-card > div:first-child,
  html body.resource-page-advice main > #articles .advice-card h2,
  html body.resource-page-advice main > #articles .advice-card > p,
  html body.resource-page-advice main > #articles .advice-card .resource-meta,
  html body.resource-page-advice main > #articles .advice-card .text-link {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.resource-page-advice main > #articles .advice-grid { scroll-behavior: auto !important; }
  html body.resource-page-advice main > #articles .advice-card { transition: none !important; }
}


/* Build 265 — Wedding Advice landing refinements after live QA */
html body.resource-page-advice,
html body.resource-page-advice main,
html body.resource-page-advice main > #articles,
html body.resource-page-advice main > #articles > .container {
  overflow-x: clip !important;
}

html body.resource-page-advice main > .resource-hero {
  overflow: clip !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions {
  position: static !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 5 !important;
}

html body.resource-page-advice main > #articles > .container {
  grid-template-columns: minmax(280px,360px) minmax(0,1fr) !important;
  column-gap: clamp(24px,2.4vw,38px) !important;
  max-width: min(1760px, calc(100vw - 48px)) !important;
}

html body.resource-page-advice main > #articles .advice-toolbar {
  font-size: 0 !important;
  padding: 28px 34px !important;
}
html body.resource-page-advice main > #articles .advice-toolbar::before {
  font-size: .96rem !important;
  letter-spacing: .12em !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  padding: 16px 18px !important;
  font-size: .99rem !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn span,
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  line-height: 1.25 !important;
}

html body.resource-page-advice main > #articles .advice-grid {
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 4px 2px 24px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-inline: 2px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    content: "" !important;
  }
}

html body.resource-page-advice main > #articles .advice-card {
  flex: 0 0 clamp(320px,31vw,408px) !important;
  width: clamp(320px,31vw,408px) !important;
  min-width: clamp(320px,31vw,408px) !important;
  min-height: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
}
html body.resource-page-advice main > #articles .advice-card:focus-within {
  border-color: rgba(210,162,58,.62) !important;
  box-shadow: 0 0 0 1px rgba(210,162,58,.22), 0 26px 58px rgba(0,0,0,.38) !important;
}
html body.resource-page-advice main > #articles .advice-card::before,
html body.resource-page-advice main > #articles .advice-card::after {
  height: clamp(220px,17vw,280px) !important;
}
html body.resource-page-advice main > #articles .advice-card > div:first-child {
  margin-top: 20px !important;
}
html body.resource-page-advice main > #articles .advice-card h2 {
  margin-bottom: .9rem !important;
}
html body.resource-page-advice main > #articles .advice-card > p {
  margin-bottom: 0 !important;
}
html body.resource-page-advice main > #articles .advice-card .resource-meta {
  margin-top: 18px !important;
  pointer-events: none !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link::after {
  content: "READ ARTICLE →" !important;
  position: absolute !important;
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  color: #efc767 !important;
  white-space: nowrap !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link:focus-visible {
  outline: none !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 2px rgba(240,205,117,.78) !important;
}

html body.resource-page-advice main > #articles .advice-card:nth-child(10n+1)::before { background-image: url("../img/generated/wedding-advice-265/01-songs-and-requests.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+2)::before { background-image: url("../img/generated/wedding-advice-265/02-supplier-checklist.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+3)::before { background-image: url("../img/generated/wedding-advice-265/03-electric-violin-backing-tracks.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+4)::before { background-image: url("../img/generated/wedding-advice-265/04-behind-the-scenes-setup.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+5)::before { background-image: url("../img/generated/wedding-advice-265/05-yorkshire-venue.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+6)::before { background-image: url("../img/generated/wedding-advice-265/06-live-music-venue-planning.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+7)::before { background-image: url("../img/generated/wedding-advice-265/07-dj-live-musician-both.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+8)::before { background-image: url("../img/generated/wedding-advice-265/08-drinks-reception-live-music.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+9)::before { background-image: url("../img/generated/wedding-advice-265/09-civil-church-celebrant.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+10)::before { background-image: url("../img/generated/wedding-advice-265/10-aisle-song-timing.webp") !important; }

@media (max-width: 1180px) {
  html body.resource-page-advice main > #articles > .container {
    grid-template-columns: 320px minmax(0,1fr) !important;
    max-width: min(100vw - 32px, 1600px) !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: clamp(312px,46vw,390px) !important;
    width: clamp(312px,46vw,390px) !important;
    min-width: clamp(312px,46vw,390px) !important;
  }
}

@media (max-width: 980px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: min(100vw - 24px, 1200px) !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    font-size: initial !important;
    padding: 24px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar::before {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn {
    font-size: .95rem !important;
    padding: 11px 14px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 8px !important;
  }
}

@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    bottom: 18px !important;
  }
  html body.resource-page-advice main > #articles > .container {
    max-width: calc(100vw - 12px) !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    padding: 20px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn {
    font-size: .92rem !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    min-height: 510px !important;
  }
  html body.resource-page-advice main > #articles .advice-card::before,
  html body.resource-page-advice main > #articles .advice-card::after {
    height: 205px !important;
  }
}


/* Build 266 — Wedding Advice live QA corrections.
   Corrects the remaining interaction/layout defects without changing page data. */

/* 1. The hero arrow must behave like the site's fixed section control, not as an
   absolutely positioned ornament inside the hero. */
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  z-index: 9998 !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  opacity: .86 !important;
}
@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}
/* Fade the hero-only anchor away once its hero leaves the viewport, so it cannot
   become a stale "jump back up" control further down the page. */
@supports (animation-timeline: view()) {
  html body.resource-page-advice main > .resource-hero {
    view-timeline-name: --wedding-advice-hero !important;
    view-timeline-axis: block !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    animation-name: wedding-advice-hero-arrow-visibility !important;
    animation-duration: 1ms !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both !important;
    animation-timeline: --wedding-advice-hero !important;
    animation-range: exit 0% exit 42% !important;
  }
  @keyframes wedding-advice-hero-arrow-visibility {
    from { opacity: .86; visibility: visible; pointer-events: auto; }
    to { opacity: 0; visibility: hidden; pointer-events: none; }
  }
}

/* 2. Keep the side menu genuinely interactive and above the scrolling article rail. */
html body.resource-page-advice main > #articles .advice-toolbar {
  z-index: 30 !important;
  isolation: isolate !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
html body.resource-page-advice main > #articles .advice-grid {
  z-index: 1 !important;
}

/* 3. Carousel geometry: the rail owns its own overflow; the page never does.
   Snap every movement to a whole card, so no article is left half-cut-off. */
html body.resource-page-advice,
html body.resource-page-advice body,
html body.resource-page-advice main {
  max-width: 100% !important;
  overflow-x: clip !important;
}
html body.resource-page-advice main > #articles > .container {
  min-width: 0 !important;
  max-width: min(1760px, calc(100vw - 48px)) !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-grid {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 2px 72px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 2px !important;
  overscroll-behavior-inline: contain !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html body.resource-page-advice main > #articles .advice-card {
  flex: 0 0 clamp(330px, 31.5%, 400px) !important;
  width: clamp(330px, 31.5%, 400px) !important;
  min-width: clamp(330px, 31.5%, 400px) !important;
  max-width: 400px !important;
  min-height: 560px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-card h2,
html body.resource-page-advice main > #articles .advice-card > p,
html body.resource-page-advice main > #articles .advice-card .resource-meta {
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* 4. Bring back visible carousel controls, but anchor them to the actual rail.
   Chrome exposes CSS scroll buttons here; reserve the bottom strip so they never
   float away from the carousel or cover article content. */
@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(244,210,124,.72) !important;
    border-radius: 50% !important;
    background: rgba(5,5,5,.9) !important;
    color: #f4d27c !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
    font: 700 26px/1 Georgia,serif !important;
    cursor: pointer !important;
    z-index: 20 !important;
    opacity: 1 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
    content: "‹" !important;
    left: calc(50% - 52px) !important;
    right: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    content: "›" !important;
    left: calc(50% + 8px) !important;
    right: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):focus-visible,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):focus-visible {
    background: #d2a23a !important;
    border-color: #d2a23a !important;
    color: #080808 !important;
    outline: none !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):disabled,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):disabled {
    opacity: .28 !important;
    cursor: default !important;
  }
}

/* Ensure the full-card article link remains clickable without swallowing the side menu. */
html body.resource-page-advice main > #articles .advice-card .text-link {
  z-index: 4 !important;
}

@media (max-width: 1180px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: min(100vw - 32px, 1600px) !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: clamp(320px, 46%, 380px) !important;
    width: clamp(320px, 46%, 380px) !important;
    min-width: clamp(320px, 46%, 380px) !important;
  }
}
@media (max-width: 980px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: calc(100vw - 24px) !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 70px !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: min(72vw, 360px) !important;
    width: min(72vw, 360px) !important;
    min-width: min(72vw, 360px) !important;
  }
}
@media (max-width: 640px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: calc(100vw - 12px) !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    gap: 14px !important;
    padding-bottom: 68px !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    min-height: 520px !important;
  }
  @supports selector(.advice-grid::scroll-button(right)) {
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      bottom: 10px !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
      left: calc(50% - 49px) !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      left: calc(50% + 7px) !important;
    }
  }
}


/* Build 267 — Wedding Advice carousel, sidebar, viewport-scroll and article-guide QA fixes. */

/* Restore the normal document scrollbar. Horizontal containment belongs to the page
   content, not the viewport scrolling mechanism. */
html {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}
html body.resource-page-advice {
  overflow: visible !important;
  max-width: 100% !important;
}
html body.resource-page-advice main {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}
html body.resource-page-advice main > #articles,
html body.resource-page-advice main > #articles > .container {
  overflow: visible !important;
}

/* Landing-page hero scroll control: use the same fixed bottom-centre geometry as the
   public home-page control rather than locating it relative to the hero content. */
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 96 !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}
@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}

/* Article-page scroll control: resources-hub placed this absolutely inside the hero.
   Override it to the same fixed viewport position used on the home page. */
html body.resource-page-advice main > .article-hero .article-hero-scroll.section-scroll-next {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 96 !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}
@media (max-width: 640px) {
  html body.resource-page-advice main > .article-hero .article-hero-scroll.section-scroll-next {
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}
/* Keep the article-only control from becoming a stale button after the opening hero. */
@supports (animation-timeline: view()) {
  html body.resource-page-advice main > .article-hero {
    view-timeline-name: --wedding-article-hero !important;
    view-timeline-axis: block !important;
  }
  html body.resource-page-advice main > .article-hero .article-hero-scroll.section-scroll-next {
    animation-name: wedding-article-scroll-visibility !important;
    animation-duration: 1ms !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both !important;
    animation-timeline: --wedding-article-hero !important;
    animation-range: exit 0% exit 42% !important;
  }
  @keyframes wedding-article-scroll-visibility {
    from { opacity: .86; visibility: visible; pointer-events: auto; }
    to { opacity: 0; visibility: hidden; pointer-events: none; }
  }
}

/* The warm article guide was visually right but undersized. Increase all reading and
   navigation text without making the box feel oversized. */
html body.resource-page-advice .article-side-card {
  font-size: 1rem !important;
}
html body.resource-page-advice .article-side-section h2 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  letter-spacing: .075em !important;
  margin-bottom: 15px !important;
}
html body.resource-page-advice .article-toc-list a {
  padding: 8px 0 8px 14px !important;
  font-size: .98rem !important;
  line-height: 1.48 !important;
}
html body.resource-page-advice .article-toc-list li.is-subheading a {
  padding-left: 27px !important;
  font-size: .9rem !important;
  line-height: 1.46 !important;
}
html body.resource-page-advice .article-topic-chip {
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: .84rem !important;
  line-height: 1.25 !important;
}
html body.resource-page-advice .article-side-links a {
  padding: 14px 0 !important;
  font-size: .98rem !important;
  line-height: 1.4 !important;
}

/* Sidebar hit-area correction. Keep the carousel paint and pointer area strictly
   inside its own grid column so it cannot sit invisibly on top of the category links. */
html body.resource-page-advice main > #articles > .container {
  position: relative !important;
  isolation: isolate !important;
}
html body.resource-page-advice main > #articles .advice-toolbar {
  position: sticky !important;
  top: 122px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}
html body.resource-page-advice main > #articles .advice-toolbar a.btn {
  position: relative !important;
  z-index: 21 !important;
  display: flex !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  text-decoration: none !important;
}
html body.resource-page-advice main > #articles .advice-toolbar a.btn::before {
  content: none !important;
}

/* Carousel owns only its own column and scrollport. Clipping here prevents an
   invisible full-card anchor or generated control from stealing clicks from the rail. */
html body.resource-page-advice main > #articles .advice-grid {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  contain: layout style !important;
  clip-path: inset(0 round 18px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 2px 70px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 2px !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-inline: contain !important;
  anchor-name: --wedding-advice-carousel !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-card {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* 266 positioned experimental browser-generated scroll buttons against the wrong
   containing block. Anchor them explicitly to the carousel's own box instead. */
@supports (anchor-name: --wedding-advice-carousel) and selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid {
    scrollbar-width: none !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    position-anchor: --wedding-advice-carousel !important;
    top: calc(anchor(bottom) - 56px) !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(244,210,124,.72) !important;
    border-radius: 50% !important;
    background: rgba(5,5,5,.92) !important;
    color: #f4d27c !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
    font: 700 25px/1 Georgia,serif !important;
    cursor: pointer !important;
    z-index: 8 !important;
    opacity: 1 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
    content: "‹" / "Previous articles" !important;
    right: calc(anchor(center) + 8px) !important;
    left: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    content: "›" / "Next articles" !important;
    left: calc(anchor(center) + 8px) !important;
    right: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):focus-visible,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):focus-visible {
    background: #d2a23a !important;
    border-color: #d2a23a !important;
    color: #080808 !important;
    outline: none !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):disabled,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):disabled {
    opacity: .3 !important;
    cursor: default !important;
  }
}

/* Fallback for browsers without the CSS-carousel controls: retain a small, contained
   horizontal rail scrollbar rather than removing all indication that the rail scrolls. */
@supports not ((anchor-name: --wedding-advice-carousel) and selector(.advice-grid::scroll-button(right))) {
  html body.resource-page-advice main > #articles .advice-grid {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(210,162,58,.72) rgba(255,255,255,.055) !important;
    padding-bottom: 24px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
    display: block !important;
    height: 7px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05) !important;
    border-radius: 999px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-thumb {
    background: rgba(210,162,58,.72) !important;
    border-radius: 999px !important;
  }
}

/* Full-card links remain inside each card and cannot bleed outside the clipped rail. */
html body.resource-page-advice main > #articles .advice-card {
  position: relative !important;
  overflow: hidden !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}

@media (max-width: 980px) {
  html body.resource-page-advice main > #articles .advice-toolbar {
    position: static !important;
    top: auto !important;
  }
}
@media (max-width: 640px) {
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 66px !important;
  }
  @supports (anchor-name: --wedding-advice-carousel) and selector(.advice-grid::scroll-button(right)) {
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      top: calc(anchor(bottom) - 53px) !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
      right: calc(anchor(center) + 7px) !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      left: calc(anchor(center) + 7px) !important;
    }
  }
}