/* =====================================================================
   KOHWAN — split banner.

   Two panels divided by a chevron, each carrying a headline, a CTA and a
   scrollable strip of four product cards. Loaded after home.css.

   The divider is one shape drawn twice: panel A is clipped up to it, panel B
   from just past it, and the sliver between them shows the page background as
   a hairline gap. Both polygons share the same three x-stops, so changing the
   angle means editing --hs-top / --hs-waist / --hs-foot and nothing else.
   ===================================================================== */

.hsplit {
  /* Divider stops, measured off the reference at 1536px wide:
     top x=862, waist x=737 at 43% down, foot x=880. */
  --hs-top:   56.1%;
  --hs-waist: 48.0%;
  --hs-foot:  57.3%;
  /* The bend sits low, not mid-height: the long lean runs from the top edge
     down to roughly two thirds, then kicks back out to the foot over the last
     third. Putting it at 43% made the chevron read as a centred arrow. */
  --hs-waist-y: 65%;
  --hs-gap:   0.8%;    /* white sliver between the panels */

  /* Fixed chrome the banner sits under. The solid home header is 74px, not the
     88px --header-h reserves for the transparent one. */
  --hs-chrome: calc(var(--header-h) + var(--ubar-h));

  position: relative;
  isolation: isolate;
  /* Reference banner is 565px on a 1536px canvas — 36.8vw — measured BELOW
     the chrome, which is why the chrome is added rather than absorbed. */
  /* Taller than the comp's 36.8vw: the photograph is the point of this band,
     and the chrome above it is now reserved rather than overlaid, so the image
     itself gets the extra height. Floor stays generous — below ~1300px the ski
     panel's three-line lead would otherwise push its button into the strip. */
  min-height: calc(clamp(560px, 42vw, 680px) + var(--hs-chrome));
  background: var(--bg);
  overflow: hidden;
}

/* ---------------------------------------------------------------- panels
   Inset to below the chrome, not the section's own top edge: percentages in
   clip-path resolve against the element's box, so a panel starting at y=0
   would put the chevron's waist a chrome-height too high — and the top and
   foot stops at the wrong x. Starting the box where the banner visibly
   starts makes every stop the number measured off the reference. */
.hsplit__panel {
  position: absolute;
  inset: var(--hs-chrome) 0 0 0;
}
.hsplit__panel--a {
  clip-path: polygon(
    0 0,
    var(--hs-top) 0,
    var(--hs-waist) var(--hs-waist-y),
    var(--hs-foot) 100%,
    0 100%
  );
}
/* The comp's white divider is not a flat gap — the right panel casts a soft
   shadow back across it. drop-shadow follows the clip path, so the chevron
   gets the edge rather than the element's box. */
.hsplit__panel--b {
  filter: drop-shadow(-4px 0 9px rgba(46, 71, 85, .16));
  clip-path: polygon(
    calc(var(--hs-top) + var(--hs-gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--hs-foot) + var(--hs-gap)) 100%,
    calc(var(--hs-waist) + var(--hs-gap)) var(--hs-waist-y)
  );
}

.hsplit__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* The comp's photography is bright and airy — pale water, open snow. These
     are darker and greener, so they get lifted toward it: exposure up, a
     little saturation, a little contrast to stop the lift going flat. */
  filter: brightness(1.08) saturate(1.12) contrast(1.03);
  transition: opacity .55s var(--ease);
}
/* Crossfade target for the card clicks — empty and invisible until one fires. */
.hsplit__bg--alt { opacity: 0; }
.hsplit__panel.is-swapped .hsplit__bg--base { opacity: 0; }
.hsplit__panel.is-swapped .hsplit__bg--alt  { opacity: 1; }
/* Framed on the peaks and the open snowfield rather than the lodge, which the
   headline would otherwise sit on top of. */
.hsplit__panel--b .hsplit__bg { background-position: 62% 34%; }

/* The reference sets dark type on pale, airy panels. Kohwan's photography is
   darker than that, so each panel gets a tinted wash that clears the copy side
   and thins out over the picture — warm on the tours half, cold on the ski
   half. Dark text stays legible whatever photo the CMS serves. */
.hsplit__veil {
  position: absolute;
  inset: 0;
}
/* Both washes span the whole section and are then clipped to their panel, so
   the percentage stops are section-relative: panel A has to clear by ~50% and
   panel B does not begin until ~56%.

   Deliberately no flat full-panel tint on top of these: that layer is what was
   greying the photography out. The wash now runs opaque behind the copy and
   falls away hard, so the picture stays as crisp as the reference's. */
/* Sampled off the comp. Its copy columns are not raw photograph — they are
   washed almost flat: pale peach on the left, pale ice-blue on the right, both
   clearing to nothing before the picture's subject. Matching it means matching
   that, so the stops below are where the comp's own wash falls away. */
/* No wash: the photograph is shown at full strength, edge to edge. The copy
   gets its contrast from the halo below instead of from covering the picture. */
.hsplit__panel--a .hsplit__veil,
.hsplit__panel--b .hsplit__veil { background: none; }

/* ------------------------------------------------------------------ copy */
/* Reference: eyebrow baseline 87px below the banner's top edge; copy columns
   start at x=91 (5.9%) and x=893 (58.1%). */
.hsplit__copy {
  position: absolute;
  top: clamp(40px, 5.7vw, 92px);
  z-index: 2;
  color: #2e4755;
  /* Nothing is painted over the photograph, so the type carries its own
     contrast: a #FAF8F3 halo that hugs the glyphs. It disappears over pale sky
     or snow and only shows where the picture underneath turns busy. */
  text-shadow:
    0 0 4px rgba(250, 248, 243, .92),
    0 0 12px rgba(250, 248, 243, .82),
    0 0 30px rgba(250, 248, 243, .6);
}
/* Small text has far less mass to hold its own, so it gets a denser halo. */
.hsplit__eyebrow,
.hsplit__lead {
  text-shadow:
    0 0 3px #FAF8F3,
    0 0 7px #FAF8F3,
    0 0 14px rgba(250, 248, 243, .95),
    0 0 26px rgba(250, 248, 243, .8);
}
/* The pills are solid, so they must not inherit the halo. */
.hsplit__cta { text-shadow: none; }
/* Wider than the reference's ~330px column: "Beyond Compare" is a character
   longer than "Beyond Places" and would drop to a third line at 400px. */
.hsplit__panel--a .hsplit__copy { left: 5.9%;  width: min(30%, 460px); }
.hsplit__panel--b .hsplit__copy { left: 58.1%; width: min(28%, 430px); }

.hsplit__eyebrow {
  margin: 0 0 13px;
  font-size: clamp(.6rem, .72vw, .69rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #2e4755;        /* comp value */
}
/* Reference "Beyond Places" measures 322px at 1536 — ~52px of Playfair. */
.hsplit__title {
  margin: 0 0 17px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.4px;
  color: #2e4755;
}
.hsplit__title span { display: block; }
.hsplit__lead {
  margin: 0 0 25px;
  max-width: 27ch;          /* two lines, as the reference sets it */
  font-size: clamp(.84rem, .95vw, .92rem);
  line-height: 1.6;
  color: #2e4755;        /* comp value */
}

/* Reference pill: 39px tall, 11px letterspaced caps, plain arrow (no disc). */
.hsplit__cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: clamp(.62rem, .72vw, .69rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.hsplit__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(46, 71, 85, .22); }
.hsplit__cta-ic { display: grid; place-items: center; width: 20px; height: 20px; }
.hsplit__cta-ic svg { width: 18px; height: 18px; }

/* The comp's pills are neutral: white/near-black and near-black/white. Brand
   colour comes back on hover so the buttons still feel like Kohwan's. */
.hsplit__cta--light { background: #FAF8F3; color: #2e4755; box-shadow: 0 10px 26px rgba(46, 71, 85, .14); }
.hsplit__cta--light:hover { background: var(--gold); color: var(--on-accent); }
.hsplit__cta--dark { background: #2e4755; color: #FAF8F3; box-shadow: 0 10px 26px rgba(46, 71, 85, .26); }
.hsplit__cta--dark:hover { background: var(--primary-deep); }

/* ------------------------------------------------------- card deck + arrows */
/* Reference strips: cards y=447–580, i.e. 50px clear of the banner's foot.
   Arrows sit outside the cards at x=48/693 (left panel) and 783/1459 (right). */
.hsplit__deck {
  position: absolute;
  bottom: clamp(28px, 3.3vw, 52px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
}
/* Mirrored about the 50% line so both strips are exactly the same width and
   their cards come out the same size — an uneven pair reads as a mistake.
   38.2% is also what the reference gives its left strip. */
.hsplit__deck--a { left: 3.1%; right: 58.7%; }
/* The divider leans further right the lower it goes, so the ski strip has to
   clear it at the strip's BOTTOM edge, not at its middle — otherwise the line
   passes under the first card. --hs-foot is the divider at its rightmost
   (y=100%), so starting past that is safe at every height and at every
   viewport width, whatever the banner's height clamps to. */
.hsplit__deck--b { left: calc(var(--hs-foot) + var(--hs-gap) + 1.4%); right: 3.1%; }

.hsplit__step {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(26px, 1.9vw, 30px);
  height: clamp(26px, 1.9vw, 30px);
  border-radius: 50%;
  background: rgba(250, 248, 243, .94);
  color: #2e4755;
  box-shadow: 0 4px 14px rgba(46, 71, 85, .2);
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              opacity .22s var(--ease);
}
.hsplit__step svg { width: 14px; height: 14px; }
.hsplit__step:hover { background: var(--gold); }
.hsplit__step[disabled] { opacity: .35; cursor: default; }
.hsplit__step[disabled]:hover { background: rgba(250, 248, 243, .94); }

.hsplit__track {
  display: flex;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* The strip is driven by its arrows; a native scrollbar under the cards
     would sit on the photograph. */
  scrollbar-width: none;
}
.hsplit__track::-webkit-scrollbar { display: none; }

/* Reference card: 147 x 133 at 1536 — four across, three 5px gaps. */
.hcard {
  position: relative;
  flex: 0 0 calc((100% - 15px) / 4);
  min-width: 104px;
  aspect-ratio: 147 / 133;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 6px 18px rgba(46, 71, 85, .18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(46, 71, 85, .28); }

/* The card whose photograph is currently filling the panel behind it. Its
   second click follows the link, so it says so. */
.hcard.is-showing {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.hcard__open {
  position: absolute;
  top: 7px; right: 7px;
  display: none;
  place-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-accent);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hcard.is-showing .hcard__open { display: inline-flex; }
.hcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 71, 85, 0) 34%, rgba(46, 71, 85, .82) 100%);
}
.hcard__body {
  position: absolute;
  left: 12px; right: 10px; bottom: 11px;
  display: block;
  color: #FAF8F3;
}
/* Two lines where the reference needs only one: its names are "Bali Paradise",
   these run to "Kashmir Great Lakes Trek — Sonamarg to Naranag". Clamping to
   one line would read "5 Nights / 6 Days K…" on half the cards. */
.hcard__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.22;
}
.hcard__meta,
.hcard__price {
  display: block;
  font-size: .66rem;
  font-style: normal;
  line-height: 1.42;
  opacity: .86;
}
.hcard__price { font-weight: 500; opacity: 1; }

/* The live-conditions rail is inherited from the old hero; nudge it clear of
   the ski panel's card strip. */
.hsplit .krail { transform: translateY(-58%); }

/* ------------------------------------------------- header over a pale banner
   This stylesheet only loads on the homepage, so these rules are home-scoped.

   The old hero was a dark photograph, so the header sat over it transparent
   with white type. The banner is pale, which would leave the logo and links
   invisible — so the header takes the solid treatment inner pages already use.
   That is also how the reference is built: a white bar above the artwork. */
.site-header {
  background: #FAF8F3;
  box-shadow: 0 8px 30px rgba(46, 71, 85, .1);
  /* Height comes from .vhead__bar in sidenav.css — the header grows when the
     Discover panel is open, so it cannot be pinned here. */
  /* No backdrop blur anywhere over the banner. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The live-conditions rail sits on the artwork; home.css blurs behind it. */
.hsplit .krail {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(46, 71, 85, .88);
}
.site-header .brand,
.site-header .nav__link,
.site-header .header__phone { color: var(--green-deep); }
.site-header .nav__link.is-active { color: var(--primary); }
.site-header .theme-toggle,
.site-header .navmode-btn {
  color: var(--green-deep);
  border-color: var(--border);
  background: transparent;
}
.site-header .theme-toggle:hover,
.site-header .navmode-btn:hover { background: var(--surface-2); }
.site-header .nav-toggle span { background: var(--green-deep); }

:root[data-theme="dark"] .site-header {
  background: rgba(46, 71, 85, .92);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .site-header .brand,
:root[data-theme="dark"] .site-header .nav__link,
:root[data-theme="dark"] .site-header .header__phone,
:root[data-theme="dark"] .site-header .theme-toggle,
:root[data-theme="dark"] .site-header .navmode-btn { color: var(--ink); }
:root[data-theme="dark"] .site-header .nav-toggle span { background: var(--ink); }

/* ------------------------------------------------------ the utility strip
   The reference starts its banner immediately under the header. Kohwan's
   contact + live-conditions strip would push it 40px lower, so on the homepage
   the strip stops taking up space and rides ON the artwork instead: every link
   is still there, and the banner starts where the reference's does.

   position:absolute (not fixed) so it belongs to the hero and scrolls with it
   rather than hovering over the page. */
.ubar {
  position: absolute;
  top: 65px;                 /* a solid bar directly under the header */
  z-index: 3;
  /* Solid, not a translucent overlay — this is a second header, so it reads as
     a bar rather than a smudge over the top of the photograph. No backdrop
     blur either. */
  background: var(--primary-deep);
  border-bottom: 0;
}
/* style.css parks the header below the strip's old fixed slot. With the strip
   out of the flow the header goes back to the very top — otherwise the two
   overlap and the strip lands across the nav. Only above 900px: below that the
   strip is hidden and the mobile "Pay Online" bar owns the top 44px instead. */
@media (min-width: 901px) {
  .site-header { top: 0; }
}
/* No sidebar above the banner in this layout, so the header is the only chrome
   the banner has to clear. The solid header is 74px, not the 88px --header-h
   reserves for the transparent one. */
@media (min-width: 1100px) {
  /* The banner starts BELOW the strip, not under it, so no chrome ever covers
     the photograph. */
  :root[data-nav="top"] .hsplit { --hs-chrome: calc(80px + var(--ubar-h)); }
  :root:not([data-nav="top"]) .hsplit { --hs-chrome: var(--ubar-h); }
  /* The sidebar layout has no top header at all, so the strip starts flush. */
  :root:not([data-nav="top"]) .ubar { top: 0; }
}

/* ------------------------------------------------------------ search bar
   Reference: 79px tall, lapping the banner's foot by 15px; each field carries
   a caret; the submit is a dark icon square with a filter control beside it. */
.ksearch { margin-top: -15px; }
.ksearch__bar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(46, 71, 85, .13);
  padding: 8px 8px 8px 10px;
  gap: 8px;
}
.ksearch__field { padding: 8px 16px; }
.ksearch__field + .ksearch__field { border-left: 1px solid var(--border); }

/* Caret on each field, drawn on the wrapper so it lands past the control
   rather than inside the native select. */
.ksearch__body { position: relative; padding-right: 20px; }
.ksearch__body::after {
  content: "";
  position: absolute;
  right: 2px; top: 60%;
  width: 8px; height: 8px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.ksearch__go {
  gap: 0;
  padding: 0;
  width: 76px;
  border-radius: 9px;
}
.ksearch__go-txt {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ksearch__filters {
  display: grid;
  place-items: center;
  width: 46px;
  border-radius: 9px;
  color: var(--ink);
  transition: background-color .22s var(--ease);
}
.ksearch__filters:hover { background: var(--surface-2); }

@media (max-width: 900px) {
  .ksearch__bar { grid-template-columns: 1fr; }
  .ksearch__go { width: auto; padding: 14px 24px; gap: 9px; }
  /* Icon-only reads as a mystery button once it spans the full width. */
  .ksearch__go-txt {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip: auto;
  }
  .ksearch__filters { width: auto; padding: 12px; }
}

/* =====================================================================
   CATEGORY RAIL
   Reference: 60px tall icon chips under the search bar, the resting one on a
   sand-coloured pill, a scroll chevron at the right end.
   ===================================================================== */
.kchips { padding: clamp(18px, 2.4vw, 30px) 0 clamp(6px, 1vw, 12px); }
.kchips__inner { display: flex; align-items: center; gap: 14px; }

.kchips__track {
  display: flex;
  gap: clamp(2px, 1.1vw, 18px);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.kchips__track::-webkit-scrollbar { display: none; }

.kchip {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: clamp(72px, 6.7vw, 104px);
  padding: 12px 8px;
  border-radius: 10px;
  color: var(--ink);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.kchip__ic { display: grid; place-items: center; height: 24px; }
.kchip__ic svg { width: 23px; height: 23px; display: block; }
.kchip__label {
  font-size: clamp(.55rem, .62vw, .61rem);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(46, 71, 85, .72);
}
.kchip:hover { background: var(--surface-2); }
.kchip:hover .kchip__label { color: var(--ink); }
/* Sand pill on the resting chip, as the reference marks "ALL". */
.kchip.is-active { background: #FAF8F3; }
.kchip.is-active .kchip__label { color: var(--ink); }
:root[data-theme="dark"] .kchip.is-active { background: rgba(189, 131, 13, .14); }
:root[data-theme="dark"] .kchip__label { color: var(--text-faint); }

.kchips__step {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .22s var(--ease), opacity .22s var(--ease);
}
.kchips__step svg { width: 13px; height: 13px; }
.kchips__step:hover { background: var(--surface-2); }
.kchips__step[disabled] { opacity: .3; cursor: default; }

/* =====================================================================
   POPULAR DESTINATIONS
   Reference: one centred heading over a five-across grid of photo tiles,
   two rows deep. Each tile carries only the place name, centred on the
   image over a light veil — no rail, so no arrows and no "view all".
   ===================================================================== */



@media (max-width: 1100px) { .kpop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .kpop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .kpop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* =====================================================================
   TOP ATTRACTIONS / TOP TOURS
   Both sit under the destinations grid and share its centred heading.
   ===================================================================== */
.ksec__ctitle {
  margin: 0 0 clamp(18px, 2.1vw, 30px);
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--ink);
}

/* ---------------------------------------------------- top attractions */
.kattr { padding: clamp(20px, 2.4vw, 34px) 0 clamp(20px, 2.4vw, 34px); }
.kattr__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3.2vw, 52px);
  row-gap: clamp(16px, 1.9vw, 28px);
}
.acard {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  min-width: 0;
}
.acard__thumb {
  flex: none;
  width: clamp(62px, 5.4vw, 78px);
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.acard__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.acard:hover .acard__thumb img { transform: scale(1.06); }
.acard__txt { min-width: 0; }
.acard__name {
  display: block;
  font-size: clamp(.82rem, .95vw, .92rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  transition: color .22s var(--ease);
}
.acard:hover .acard__name { color: var(--primary); }
.acard__meta {
  display: block;
  margin-top: 3px;
  font-size: clamp(.7rem, .8vw, .78rem);
  line-height: 1.35;
  color: var(--muted);
}

/* ---------------------------------------------------------- top tours */
.ktours { padding: clamp(20px, 2.4vw, 34px) 0 clamp(32px, 3.6vw, 52px); }
.ktours__rail { position: relative; }
.ktours__track {
  display: flex;
  gap: clamp(12px, 1.55vw, 22px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ktours__track::-webkit-scrollbar { display: none; }

.tcard {
  position: relative;
  flex: 0 0 calc((100% - 3 * clamp(12px, 1.55vw, 22px)) / 4);
  min-width: 210px;
  scroll-snap-align: start;
}
.tcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}
.tcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.tcard:hover .tcard__media img { transform: scale(1.04); }
.tcard__badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #FAF8F3;
  color: #2e4755;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.5;
}
.tcard__save {
  position: absolute;
  top: 10px; right: 10px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 248, 243, .94);
  color: #2e4755;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.tcard__save svg { width: 16px; height: 16px; }
.tcard__save:hover { background: #FAF8F3; color: #2e4755; }
.tcard__save[aria-pressed="true"] { color: #2e4755; }
.tcard__save[aria-pressed="true"] svg { fill: currentColor; }

.tcard__body { padding-top: 9px; }
.tcard__place,
.tcard__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: clamp(.68rem, .78vw, .76rem);
  line-height: 1.5;
}
.tcard__place { color: var(--muted); }
.tcard__place svg { width: 13px; height: 13px; flex: none; }
.tcard__rating { margin-top: 2px; font-weight: 600; color: var(--ink); }
.tcard__rating svg { width: 13px; height: 13px; flex: none; color: var(--primary); }
.tcard__title {
  margin: 4px 0 0;
  font-size: clamp(.82rem, .95vw, .92rem);
  font-weight: 700;
  line-height: 1.32;
}
.tcard__title a { color: var(--ink); transition: color .22s var(--ease); }
.tcard__title a:hover { color: var(--primary); }
.tcard__price {
  margin: 7px 0 0;
  font-size: clamp(.7rem, .8vw, .78rem);
  color: var(--muted);
}
.tcard__price b { font-size: clamp(.85rem, .98vw, .95rem); font-weight: 700; color: var(--ink); }
.tcard__note {
  margin: 1px 0 0;
  font-size: clamp(.66rem, .74vw, .72rem);
  color: var(--text-faint);
}

.ktours__step {
  position: absolute;
  /* Centred on the photo row rather than the whole card: subtract the body
     block below the image, then half the button's own height. */
  top: calc((100% - 96px) / 2 - 15px);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #FAF8F3;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(46, 71, 85, .16);
  cursor: pointer;
  transition: opacity .22s var(--ease), background-color .22s var(--ease);
}
.ktours__step svg { width: 16px; height: 16px; }
.ktours__step--prev { left: -14px; }
.ktours__step--next { right: -14px; }
.ktours__step[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 1100px) {
  .tcard { flex: 0 0 calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 860px) {
  .kattr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcard { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; }
  .ktours__step--prev { left: 4px; }
  .ktours__step--next { right: 4px; }
}
@media (max-width: 620px) {
  .kattr__grid { grid-template-columns: minmax(0, 1fr); }
  .tcard { flex: 0 0 76%; }
}

/* =====================================================================
   FEATURED PACKAGES
   Reference: left-aligned heading, destination tabs on a hairline, then a
   rail of white cards. The fifth card is deliberately part-visible so the
   row reads as scrollable without needing the arrow to say so.
   ===================================================================== */
.kpkg {
  --pkg-gap: clamp(12px, 1.3vw, 20px);
  /* The comp's own palette, scoped to this section: navy type, blue accent.
     Kept as tokens so the section can be put back on brand in one place. */
  --pkg-navy:   #2e4755;
  --pkg-grey:   #2e4755;
  --pkg-accent: #BD830D;
  padding: clamp(28px, 3.2vw, 48px) 0 clamp(30px, 3.4vw, 50px);
}
/* The glass card on a dark ground: the panels darken instead of lightening,
   or the writing would sit white on near-white. */
:root[data-theme="dark"] .pcard {
  border-color: rgba(250, 248, 243, .14);
  background: rgba(46, 71, 85, .42);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .26);
}
:root[data-theme="dark"] .pcard__body { background: rgba(46, 71, 85, .72); }
:root[data-theme="dark"] .pcard__price { border-top-color: rgba(250, 248, 243, .16); }

:root[data-theme="dark"] .kpkg {
  --pkg-navy: var(--ink);
  --pkg-grey: var(--muted);
  --pkg-accent: #BD830D;
}
.kpkg__title {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--pkg-navy);
}

.kpkg__tabs {
  display: flex;
  gap: clamp(14px, 2vw, 34px);
  margin-bottom: clamp(16px, 1.9vw, 26px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.kpkg__tabs::-webkit-scrollbar { display: none; }
.kpkg__tab {
  flex: none;
  padding: 0 2px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--pkg-navy);
  font: inherit;
  font-size: clamp(.86rem, .98vw, 1rem);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.kpkg__tab:hover { color: var(--pkg-accent); }
.kpkg__tab.is-active { color: var(--pkg-accent); border-bottom-color: var(--pkg-accent); font-weight: 600; }

.kpkg__rail { position: relative; }
.kpkg__track {
  display: flex;
  align-items: stretch;
  gap: var(--pkg-gap);
  padding: 2px 2px 6px;          /* room for the card shadow */
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kpkg__track::-webkit-scrollbar { display: none; }

/* The card is a pale glass panel: the photograph sits inset at the top with
   its own rounded corner, and the writing rides on a lighter panel that laps
   over the photograph's foot.

   Plain translucency rather than backdrop-filter on purpose. A filter here
   would put every card on its own compositing layer, and forty-odd of them
   rasterised the section above softly — the blurred strip that had to be
   chased down once already. */
.pcard {
  display: flex;
  flex-direction: column;
  /* 4.28 rather than 4 so the next card peeks past the edge. */
  flex: 0 0 calc((100% - 3 * var(--pkg-gap)) / 4.28);
  min-width: 236px;
  padding: clamp(7px, .62vw, 10px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 8px 26px rgba(46, 71, 85, .09);
  scroll-snap-align: start;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.pcard[hidden] { display: none; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(46, 71, 85, .16); }

.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 13px;
  background: var(--surface-2);
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }

/* Gold, rounded, with its star — the reference's flag. */
.pcard__badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E0A63C 0%, #BD830D 100%);
  color: #FFFFFF;
  font-size: clamp(.64rem, .74vw, .72rem);
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(46, 71, 85, .26);
}
.pcard__badge svg { width: 13px; height: 13px; flex: none; }

/* Laps over the photograph, which is what gives the card its layered look. */
.pcard__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin: clamp(-24px, -1.6vw, -16px) 0 0;
  padding: clamp(13px, 1.15vw, 18px);
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
}
.pcard__title {
  margin: 0;
  font-size: clamp(.92rem, 1.05vw, 1.04rem);
  font-weight: 700;
  line-height: 1.3;
}
.pcard__title a { color: var(--pkg-navy); transition: color .2s var(--ease); }
.pcard__title a:hover { color: var(--pkg-accent); }
/* Now carries a gold pin, so it lines up with the rows beneath it. */
.pcard__place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: clamp(.76rem, .86vw, .84rem);
  color: var(--pkg-navy);
}
.pcard__place svg { width: 15px; height: 15px; flex: none; color: var(--pkg-accent); }
.pcard__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  font-size: clamp(.74rem, .84vw, .82rem);
  line-height: 1.4;
  color: var(--pkg-navy);
}
.pcard__row svg { width: 15px; height: 15px; flex: none; color: var(--pkg-grey); }
.pcard__row svg[fill="currentColor"] { color: var(--pkg-accent); }

/* Pushes the price cluster to the foot so every card in the row lines up. */
.pcard__deal-row { display: flex; justify-content: flex-end; min-height: 12px; margin-top: auto; padding-top: 14px; }
.pcard__deal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--on-accent);
  font-size: clamp(.7rem, .78vw, .76rem);
  font-weight: 700;
}
.pcard__deal svg { width: 14px; height: 14px; }

/* Left-aligned under a hairline, as the reference sets it. */
.pcard__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(46, 71, 85, .12);
}
.pcard__price b { font-size: clamp(1.18rem, 1.45vw, 1.45rem); font-weight: 700; color: var(--pkg-navy); }
.pcard__price s { font-size: clamp(.78rem, .88vw, .86rem); color: var(--pkg-grey); opacity: .62; }
/* The reference drops this line. It is kept because these packages are priced
   per person AND per couple, and a figure with neither stated is a figure the
   reader can misread. */
.pcard__unit {
  margin: 3px 0 0;
  text-align: left;
  font-size: clamp(.71rem, .78vw, .76rem);
  color: var(--pkg-grey);
  opacity: .8;
}

/* The gold call at the card's foot. */
.pcard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: clamp(11px, 1vw, 15px);
  padding: 9px 17px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E0A63C 0%, #BD830D 100%);
  color: #FFFFFF;
  font-size: clamp(.74rem, .83vw, .82rem);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(189, 131, 13, .3);
  transition: filter .2s var(--ease), box-shadow .2s var(--ease);
}
.pcard__go svg { width: 15px; height: 15px; transition: transform .22s var(--ease); }
.pcard__go:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(189, 131, 13, .38); }
.pcard__go:hover svg { transform: translateX(3px); }
.pcard__go:focus-visible { outline: 2px solid var(--pkg-navy); outline-offset: 2px; }

.kpkg__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #FAF8F3;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(46, 71, 85, .18);
  cursor: pointer;
  transition: opacity .22s var(--ease), background-color .22s var(--ease);
}
.kpkg__step svg { width: 18px; height: 18px; }
.kpkg__step--prev { left: -15px; }
.kpkg__step--next { right: -15px; }
.kpkg__step[disabled] { opacity: 0; pointer-events: none; }

.kpkg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 2.1vw, 30px);
}
.kpkg__cta {
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--pkg-accent);
  /* navy ink on gold — white would only reach ~2.6:1 */
  color: var(--brand-navy-dark);
  font-size: clamp(.86rem, .96vw, .96rem);
  font-weight: 700;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.kpkg__cta:hover { background: #2e4755; color: #FAF8F3; }
.kpkg__more {
  font-size: clamp(.82rem, .92vw, .92rem);
  font-weight: 500;
  color: var(--pkg-accent);
}
.kpkg__more:hover { text-decoration: underline; }

@media (max-width: 1100px) { .pcard { flex: 0 0 calc((100% - 2 * var(--pkg-gap)) / 3.2); } }
@media (max-width: 860px) {
  .pcard { flex: 0 0 calc((100% - var(--pkg-gap)) / 2.15); min-width: 0; }
  .kpkg__step--prev { left: 4px; }
  .kpkg__step--next { right: 4px; }
}
@media (max-width: 620px) {
  .pcard { flex: 0 0 80%; }
  .kpkg__foot { justify-content: flex-start; }
}

/* ============================================================ responsive */

/* Under ~1400px a quarter of the strip is narrower than a card can usefully
   be, so the fourth card ends up sliced by the strip's edge. Three across
   keeps every card whole and legible; the fourth is a scroll away. */
@media (max-width: 1400px) {
  .hcard { flex: 0 0 calc((100% - 10px) / 3); }
}

/* Below the sidebar breakpoint the chevron has no room to read as a shape:
   stack the panels and let each one run full width. */
@media (max-width: 900px) {
  .hsplit {
    min-height: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .hsplit__panel {
    position: relative;
    inset: auto;
    clip-path: none;
    min-height: 360px;
    padding: calc(var(--header-h) + 44px + 28px) 0 22px;
  }
  .hsplit__panel--b { padding-top: 34px; }

  /* The strips are siblings of the panels (see the blade), so document order is
     panel A, panel B, strip A, strip B. Interleave them back for the stack. */
  .hsplit__panel--a { order: 1; }
  .hsplit__deck--a   { order: 2; }
  .hsplit__panel--b { order: 3; }
  .hsplit__deck--b   { order: 4; }

  .hsplit__copy,
  .hsplit__deck {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: auto;
    padding-inline: var(--gutter);
  }
  .hsplit__panel--a .hsplit__copy,
  .hsplit__panel--b .hsplit__copy { width: auto; left: auto; }
  /* The lead's line breaks stay: hiding them would run the ski panel's three
     sentences together with no space between them. */
  .hsplit__lead { max-width: 38ch; }

  /* Each strip sits on the panel above it, matching the docked layout. */
  .hsplit__deck--a { background: #FAF8F3; }
  .hsplit__deck--b { background: #FAF8F3; }
  .hsplit__deck { margin-top: 0; padding-bottom: 26px; }
  /* Arrows are a pointer affordance; touch just swipes the strip. */
  .hsplit__step { display: none; }
  .hsplit__track { gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hcard { flex: 0 0 46%; }

  .hsplit .krail { display: none; }
}

@media (max-width: 520px) {
  .hcard { flex: 0 0 62%; }
  .hsplit__panel { min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsplit__track { scroll-behavior: auto; }
  .hcard, .hsplit__cta { transition: none; }
}

/* =====================================================================
   REFERENCE METRICS
   Everything below is measured off the comp at a 1536px canvas and written
   as vw against that base, so the proportions hold at any width. Scoped to
   >=901px so the stacked mobile layout above is untouched.

     header            65 tall · nav 11.5px caps · logo mark 30
     banner            565 tall (36.8vw)
     eyebrow           11px  · .18em tracking
     title             50px  (3.26vw) · line-height 1.06
     lead              14px  · line-height 1.5
     CTA pill          214x39 · 11px caps
     banner card       147x133 (1.105) · 5px gutters · radius 8
     strip arrows      29 · 50 clear of the banner foot
     search bar        1174x79 · radius 14 · submit 85x46 radius 9
     chip              103x60 · icon 22 · label 9px · 117 pitch
     section title     30px/700 · kicker 10px
     destination card  226x150 (1.507) · 13px gutters · radius 10
   ===================================================================== */
@media (min-width: 901px) {

  /* The header itself is styled in sidenav.css — it is shared with every
     page, and this sheet only loads on the homepage. */

  /* The header bar is 80px tall; the strip sits directly beneath it and the
     banner starts below both. */
  :root[data-nav="top"] .hsplit { --hs-chrome: calc(80px + var(--ubar-h)); }
  .ubar { top: 80px; }

  /* ---------------- banner type ---------------- */
  .hsplit__eyebrow { font-size: clamp(.62rem, .72vw, .69rem); letter-spacing: .18em; }
  .hsplit__title   { font-size: clamp(2rem, 3.26vw, 3.2rem); line-height: 1.06; }
  .hsplit__lead    { font-size: clamp(.8rem, .91vw, .88rem); line-height: 1.5; }
  .hsplit__cta     { padding: 12px 24px; font-size: clamp(.6rem, .72vw, .69rem); }

  .hsplit__deck  { bottom: clamp(30px, 3.25vw, 52px); }
  .hsplit__step  { width: clamp(25px, 1.89vw, 30px); height: clamp(25px, 1.89vw, 30px); }
  .hcard         { aspect-ratio: 147 / 133; border-radius: 8px; }
  .hcard__name   { font-size: clamp(.72rem, .85vw, .82rem); }
  .hcard__meta,
  .hcard__price  { font-size: clamp(.6rem, .72vw, .7rem); }

  /* ---------------- search bar ---------------- */
  .ksearch__bar { max-width: 1174px; margin-inline: auto; }
  .ksearch__go  { width: 85px; border-radius: 9px; }

  /* ---------------- chips ---------------- */
  .kchip        { min-width: clamp(84px, 6.7vw, 103px); padding: 12px 6px; gap: 10px; }
  .kchip__ic    { height: 22px; }
  .kchip__ic svg { width: 22px; height: 22px; }
  .kchip__label { font-size: clamp(.53rem, .59vw, .57rem); letter-spacing: .1em; }
  .kchips__step { width: 26px; height: 26px; }

  /* ---------------- popular destinations ---------------- */
  .kpop__title,
  .ksec__ctitle { font-size: clamp(1.5rem, 2.05vw, 2rem); letter-spacing: -.5px; }
  .kpop__grid   { gap: clamp(14px, 1.35vw, 22px); }
  .dcard        { aspect-ratio: 158 / 100; border-radius: 12px; }
  .dcard__name  { font-size: clamp(.86rem, 1.02vw, 1.02rem); }

  /* These sections used to paint themselves white to match the comp. They
     are transparent now so the site-wide navy→cream gradient runs behind the
     whole page uninterrupted; the cards inside carry the light panels. */
  .kchips, .kpop, .kattr, .ktours, .kdm { background: transparent; }
}

/* =====================================================================
   TOP ACTIVITIES (per place) + LATEST ARTICLES
   Left is a slider whose every slide is one place: an intro card carrying
   the place's name and blurb, then that place's activities as photo cards.
   Right is the ranked article list.
   ===================================================================== */
.kdm { padding: clamp(26px, 3vw, 44px) 0 clamp(30px, 3.4vw, 50px); }
.kdm__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(248px, 23vw, 320px);
  gap: clamp(18px, 2.2vw, 36px);
  align-items: start;
}
.kdm__main { min-width: 0; }
.kdm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
.kdm__title {
  margin: 0;
  padding-left: 11px;
  border-left: 4px solid var(--primary);
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--ink);
}
.kdm__tools { display: flex; gap: 8px; flex: none; }
.kdm__step {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.kdm__step svg { width: 17px; height: 17px; }
.kdm__step:hover { background: var(--surface-2); }
.kdm__step[disabled] { opacity: .28; cursor: default; }

.kdm__stage { overflow: hidden; }
.kdm__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kdm__track::-webkit-scrollbar { display: none; }

/* One slide = one place. Intro card left, that place's activities right. */
.dmslide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.55fr);
  gap: clamp(10px, 1.1vw, 16px);
  height: clamp(300px, 27vw, 404px);
  scroll-snap-align: start;
}
.dmslide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(10px, 1.1vw, 16px);
  min-width: 0;
}
/* A place with a single activity gets the full width rather than half a row. */
.dmcard:only-child { grid-column: 1 / -1; }

.dmintro,
.dmcard {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dmintro img,
.dmcard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.dmintro:hover img,
.dmcard:hover img { transform: scale(1.05); }
.dmintro__veil,
.dmcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 71, 85, .12) 30%, rgba(46, 71, 85, .82) 100%);
}
.dmcard { border-radius: 12px; }
.dmcard:hover { box-shadow: 0 14px 30px rgba(46, 71, 85, .2); }

.dmintro__txt {
  position: absolute;
  left: clamp(14px, 1.3vw, 20px);
  right: clamp(14px, 1.3vw, 20px);
  bottom: clamp(14px, 1.3vw, 20px);
  display: block;
  color: #FAF8F3;
}
.dmintro__kicker {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
}
.dmintro__name {
  display: block;
  margin-top: 3px;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1.85vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.dmintro__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 7px;
  font-size: clamp(.74rem, .84vw, .82rem);
  line-height: 1.45;
  opacity: .92;
}
.dmintro__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(250, 248, 243, .95);
  color: #2e4755;
  font-size: .72rem;
  font-weight: 700;
  transition: background-color .22s var(--ease);
}
.dmintro__more svg { width: 14px; height: 14px; }
.dmintro:hover .dmintro__more { background: var(--gold); }

.dmcard__badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dmcard__body {
  position: absolute;
  left: 12px; right: 12px; bottom: 11px;
  display: block;
  color: #FAF8F3;
}
.dmcard__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(.82rem, .95vw, .94rem);
  font-weight: 700;
  line-height: 1.28;
}
.dmcard__meta { display: block; margin-top: 3px; font-size: .72rem; opacity: .88; }

.kdm__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.kdm__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: width .22s var(--ease), background-color .22s var(--ease);
}
.kdm__dot.is-active { width: 22px; border-radius: 999px; background: var(--primary); }

/* ------------------------------------------------ latest articles panel */
.karts {
  padding: clamp(13px, 1.2vw, 18px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.karts__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.karts__title {
  margin: 0;
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  font-weight: 800;
  color: var(--ink);
}
.karts__all { font-size: .74rem; font-weight: 700; color: var(--primary); }
.karts__all:hover { text-decoration: underline; }

.karts__list { margin: 0; padding: 0; list-style: none; }
.karts__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border-soft);
}
.karts__item:first-child { border-top: 0; }
.karts__rank {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  text-align: center;
}
.karts__txt b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.karts__txt:hover b { color: var(--primary); }
.karts__txt small { display: block; margin-top: 3px; font-size: .7rem; color: var(--muted); }
.karts__thumb {
  display: block;
  width: 54px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.karts__thumb img { width: 100%; height: 100%; object-fit: cover; }
.karts__more {
  display: block;
  margin-top: 12px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.karts__more:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

@media (max-width: 1000px) {
  .kdm__layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .dmslide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 190px minmax(0, 1fr);
    height: auto;
  }
  .dmslide__grid { grid-auto-rows: 132px; }
  .dmintro__desc { -webkit-line-clamp: 2; }
}

/* =====================================================================
   POPULAR DESTINATIONS
   The places fanned out: the middle card full size, the rest falling away
   and dimming to each side. Cards sit on one spot and JS writes each one's
   distance from the middle onto it; the transform below turns that into the
   spread.

   No ground of its own — the site's page gradient runs straight through, so
   this reads as one sheet with the sections either side of it. The type is
   therefore on the theme's own ink rather than the warm white the dark band
   used to call for; only the writing that sits on a photograph, over the
   card's veil, stays light.
   ===================================================================== */
.kpop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  padding: clamp(52px, 6vw, 92px) 0 clamp(38px, 4vw, 62px);
}
/* The gold web was drawn for the dark band and turns to dirty streaks on the
   warm white, so it is off with the ground that carried it. */
.kpop__web { display: none; }

.kpop__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 46px);
}
.kpop__title {
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.kpop__title em {
  font-style: normal;
  color: var(--gold, #BD830D);
  border-bottom: 3px solid var(--gold, #BD830D);
  padding-bottom: 4px;
}
.kpop__sub { margin: 0; color: var(--muted); font-size: clamp(.86rem, 1vw, 1.02rem); }
.kpop__all {
  flex: none;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(.86rem, 1vw, 1rem);
  padding-bottom: 5px;
  border-bottom: 2px solid var(--gold, #BD830D);
}
.kpop__all:hover { border-bottom-color: var(--ink); }

/* A container, so the cards and the spread between them are measured against
   the fan's own width (1cqw is a hundredth of it). The fan then fills the
   section's column at any screen size, in line with the rows above it. */
.kpop__fan {
  position: relative;
  container-type: inline-size;
  /* Narrower than the column on purpose. The cards spread to ±46cqw of the
     fan and the outermost one is 40cqw wide at 0.70 scale, so they reach
     ±60cqw — a fifth wider than the fan itself. At 83.3% that reach lands on
     the column's own edges, which is what squares this row up with the
     package cards above it and the attraction cards below. */
  width: 83.3%;
  margin-inline: auto;
  /* A plain height, NOT an aspect-ratio. With a ratio, max-height transfers
     back through it to the width: past about 1250px of column the fan
     collapsed to the ratio's width and, being a block box with auto margins
     no longer in play, sat against the left edge. That is what threw this
     row off centre on wide screens. */
  height: clamp(330px, 30vw, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard2 {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Wide enough that the two either side are overlapped rather than merely set
     back. The width is fixed by that; only the height has changed — the card
     is now upright rather than landscape. */
  width: clamp(240px, 40cqw, 520px);
  aspect-ratio: 380 / 489;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  /* Softer, and on the navy rather than black: the heavy drop was carrying the
     cards off a dark band and reads as grime on the warm white. */
  box-shadow: 0 16px 38px rgba(33, 56, 87, .22);
  transform: translate(-50%, -50%) translateX(var(--p-x, 0)) scale(var(--p-s, 1));
  opacity: var(--p-o, 1);
  z-index: var(--p-z, 1);
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease;
}
.pcard2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The navy wash that used to cover the whole card is gone — the photograph
   reads at full strength. What is left is a neutral shadow across the bottom
   third only, so the place name and the price still have something to sit on;
   it is black rather than navy so it reads as shade on the picture instead of
   a colour laid over it. The top two thirds are untouched. */
.pcard2__veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .40) 42%,
    rgba(0, 0, 0, 0) 100%);
}
.pcard2__chip {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 2;
  background: rgba(0, 0, 0, .45);
  border: 0;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: clamp(.6rem, .7vw, .74rem);
  font-weight: 500;
  color: #FAF8F3;
}
.pcard2__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px; }
.pcard2__place {
  display: block;
  color: #FAF8F3;
  /* The reference sets the place in a light weight, larger — the price line
     below it carries the emphasis instead. */
  font-weight: 400;
  line-height: 1.18;
  font-size: clamp(1.05rem, 1.6vw, 1.62rem);
}
.pcard2__price {
  display: block;
  margin-top: 7px;
  color: rgba(250, 248, 243, .9);
  font-size: clamp(.7rem, .86vw, .9rem);
  font-weight: 400;
  line-height: 1.4;
}
.pcard2__price b { color: #FAF8F3; font-weight: 700; }

.kpop__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(20px, 2.2vw, 34px);
}
.kpop__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(46, 71, 85, .28);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.kpop__arrow:hover { border-color: var(--ink); background: rgba(46, 71, 85, .08); }
.kpop__arrow svg { width: 17px; height: 17px; }
.kpop__dots { display: flex; align-items: center; gap: 8px; }
.kpop__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(46, 71, 85, .24);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease, border-radius .2s ease;
}
.kpop__dot.is-on { width: 26px; border-radius: 5px; background: var(--gold, #BD830D); }

/* On the dark theme the ground behind this is navy again, so the ring and the
   dots go back to the warm white they used to carry. */
:root[data-theme="dark"] .kpop__arrow { border-color: rgba(250, 248, 243, .38); }
:root[data-theme="dark"] .kpop__arrow:hover { background: rgba(250, 248, 243, .12); }
:root[data-theme="dark"] .kpop__dot { background: rgba(250, 248, 243, .32); }

@media (max-width: 900px) {
  .kpop__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* The card is sized off the viewport here, not off the fan, so the fan goes
     back to the full column and only the spread reads off it. 76vw wide makes
     it 97.8vw tall — up to the 400px width cap, where it is 515px. */
  .kpop__fan { width: 100%; height: clamp(330px, 104vw, 540px); }
  .pcard2 { width: clamp(230px, 76vw, 400px); }
}
@media (prefers-reduced-motion: reduce) { .pcard2 { transition: none; } }