/* ===========================================================================
   tideline.css  --  "TIDELINE"
   Art direction for the Hotel Amarabati homepage, sections 5-10.

   SCOPE - styles ONLY:
     1. Hotel Facilities      .tl-fac    The Index
     2. Explore Experiences   .tl-exp    Scenes
     3. Beautiful View        .tl-view   Horizon
     4. Happy Explore Reviews .tl-rev    Voices
     5. Nearby Attractions    .tl-attr   Destinations
     6. Homepage footer       .tl-foot   Last Light

   Never touches the approved header / hero / About Us / Explore Rooms, and
   never loads on the 24 internal pages. Every selector is `.tl-` namespaced.

   THREE STRUCTURAL RULES, enforced throughout, that keep this from becoming
   another card grid:
     1. border-radius: 0 and box-shadow: none everywhere in this scope.
        Depth comes from occlusion, scale and grading -- never from a raised
        rectangle.
     2. No background fill, border or panel behind any text group. Type sits
        on the page or on a photograph. There are no containers.
     3. Every photograph is either full-bleed to the viewport edge or hard
        locked to grid columns with square corners. No image floats.

   HIERARCHY AT REST
     Inactive states shift COLOUR (charcoal -> sand), never opacity. Every
     word on the page is legible with JavaScript disabled and nothing
     animating. Motion clarifies; it is never load-bearing.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------------------- */

.tl {
  /* ---- colour: coastal, predominantly light ---- */
  --ivory:    #fbf9f5;
  --sand:     #e9e0d2;
  --sand-ink: #b9ad99;   /* inactive type on ivory: legible, recessive */
  --gold:     #ca9e4e;
  --charcoal: #14171a;
  --ink-2:    #4e565c;
  --coast:    #3e5c69;
  --green:    #6e7f63;
  --hair:     #ddd3c2;

  /* ---- type ---- */
  --display-f: "Sora", "Jost", sans-serif;
  --body-f:    "DM Sans", "Inter", sans-serif;

  --t-display: clamp(3.25rem, 1.2rem + 7.4vw, 8.25rem);
  --t-h2:      clamp(2.375rem, 1.3rem + 4.4vw, 4.75rem);
  --t-h3:      clamp(1.375rem, .95rem + 2.2vw, 2.375rem);
  --t-body:    clamp(.9375rem, .89rem + .22vw, 1.0625rem);
  --t-meta:    .75rem;

  /* ---- spacing scale: nothing outside this list ---- */
  --s1: 8px;   --s2: 12px;  --s3: 16px;  --s4: 24px;  --s5: 32px;
  --s6: 48px;  --s7: 64px;  --s8: 96px;  --s9: 128px; --s10: 160px;
  --section-y: clamp(96px, 9vw, 160px);

  /* ---- grid ---- */
  --gutter: clamp(20px, 5vw, 80px);
  --gap:    clamp(16px, 1.6vw, 24px);
  --measure: 1440px;

  /* ---- motion: four easings, four durations ---- */
  --e-mask:  cubic-bezier(.76, 0, .24, 1);
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 220ms;
  --t-ui:    360ms;
  --t-rev:   900ms;
  --t-scene: 1300ms;

  position: relative;
  font-family: var(--body-f);
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

/* Rule 1, enforced globally for the scope. */
.tl :where(*, *::before, *::after) {
  border-radius: 0;
  box-shadow: none;
}

.tl :where(h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; }
.tl :where(ul, ol) { list-style: none; padding: 0; }
.tl img { display: block; max-width: 100%; }
.tl a { text-decoration: none; color: inherit; }

/* --- legacy theme neutralisation -------------------------------------------
   This codebase styles bare elements globally, which silently leaks into any
   new markup:
     default.css  span { color: #edaa1f }      -- turns every span gold
     default.css  a:hover, a:focus { color: #edaa1f }
     default.css  ul li / ol li { color, font-size, margin }
     style.css    footer:before { skewed #071f33 block }
   `:where()` holds these at 0,1,0 specificity so every component rule below
   still wins normally. Without them the section headlines render gold and a
   stray navy wedge appears across the footer. */
.tl :where(span, div, li, b, i, strong, em) { color: inherit; }
.tl :where(a):hover,
.tl :where(a):focus { color: inherit; }
footer.tl::before,
footer.tl::after { content: none; }

/* default.css also tints every even <section> peach:
     section:nth-child(even) { background: #f8d5bc24 }
   which lands on whichever of these happens to fall on an even index and
   breaks the ground plane. Re-assert each section's own ground at 0,2,0 so
   that rule can never reach in. */
.tl.tl-fac,
.tl.tl-exp,
.tl.tl-view,
.tl.tl-attr { background: var(--ivory); }
.tl.tl-rev { background: var(--charcoal); }
.tl.tl-foot { background: #0e1113; }

.tl-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   1. GRID  --  one system, all six sections
   Axis A = column 1 start.  Axis B = column 5 start.  Axis C = column 12 end.
   --------------------------------------------------------------------------- */

.tl-section { padding-block: var(--section-y); }

.tl-wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tl-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* full-bleed escape hatch, used only by photography */
.tl-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* the hairline that opens every section: the thread through the document */
.tl-rule {
  display: block;
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  margin-bottom: var(--s6);
}
html:not(.tl-on) .tl-rule { transform: none; }

@media (max-width: 1279px) {
  .tl-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tl { --gutter: 20px; }
  .tl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 480px) and (max-width: 767px) {
  .tl { --gutter: 24px; }
}

/* ---------------------------------------------------------------------------
   2. TYPE PRIMITIVES
   --------------------------------------------------------------------------- */

.tl-meta {
  display: block;
  font-family: var(--body-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.tl-h1 {
  font-family: var(--display-f);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.04em;
}
.tl-h2 {
  font-family: var(--display-f);
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
}
.tl-h2 em, .tl-h1 em { font-style: normal; font-weight: 600; }

.tl-body {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
}

/* line masking, applied to a short list of elements only */
.tl-maskline { display: block; overflow: hidden; }
.tl-line { display: block; will-change: transform; }

html.tl-on .tl [data-tl-mask] { clip-path: inset(100% 0 0 0); }
html.tl-on .tl [data-tl-fade] { opacity: 0; }

/* ---------------------------------------------------------------------------
   3. CONTROLS  --  text and hairlines, never buttons in boxes
   --------------------------------------------------------------------------- */

.tl-ctrl {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--body-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: currentColor;
  position: relative;
  transition: color var(--t-ui) var(--e-out);
}
.tl-ctrl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-ui) var(--e-out);
}
.tl-ctrl:hover::after,
.tl-ctrl:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.tl-count {
  font-family: var(--display-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}
.tl-count i { font-style: normal; opacity: .45; margin-inline: .35em; }

/* rolling-number digit viewport, built by TL.rollNumber (js/tideline-core.js).
   Structural only -- font-size continues to come from whichever host selector
   already sized the plain digit text (.tl-fac-frameno b, .tl-count b, etc.),
   since the tracks and cells are children and inherit it normally. */
.tl-roll {
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
  /* Set in JS to exactly one digit-cell's height once measured (see
     TL.rollNumber in tideline-core.js). Without an explicit height an
     inline-flex box stretches to fit ALL 30 stacked cells per track --
     overflow:hidden has nothing to clip against a box that already contains
     its own content, so every digit renders visible at once instead of one
     row. This custom property is the fallback before JS measures. */
  height: 1em;
}
.tl-roll-track {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}
.tl-roll-track i { display: block; font-style: normal; line-height: 1; }

.tl-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.tl-more svg {
  width: 18px; height: 18px;
  transition: transform var(--t-ui) var(--e-out);
}

/* two-layer line-hover label, built by TL.lineHover (js/tideline-core.js).
   The real text node stays put inside .tl-line > span; the duplicate is a
   ::after fed by content: attr(data-label), which is not exposed to the
   accessibility tree in any modern engine -- so there is exactly one
   accessible label, with no aria-hidden duplicate required. */
.tl-line {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.tl-line > span {
  display: block;
  will-change: transform;
  transition: transform var(--t-ui) var(--e-mask);
}
.tl-line::after {
  content: attr(data-label);
  position: absolute;
  left: 0; top: 0; width: 100%;
  transform: translateY(100%);
  will-change: transform;
  transition: transform var(--t-ui) var(--e-mask);
}
.tl-line-host:hover .tl-line > span,
.tl-line-host:focus-visible .tl-line > span { transform: translateY(-100%); }
.tl-line-host:hover .tl-line::after,
.tl-line-host:focus-visible .tl-line::after { transform: translateY(0); }

.tl a:focus-visible,
.tl button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* contextual cursor, desktop only, only over interactive media */
.tl-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: var(--gold, #ca9e4e);
  color: #fff !important;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: scale(.3);
  transition: opacity var(--t-ui, 360ms) ease, transform var(--t-ui, 360ms) cubic-bezier(.16, 1, .3, 1);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Ensure the label span inside also stays white */
.tl-cursor-label {
  color: #fff !important;
}
.tl-cursor.is-on { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) {
  .tl-cursor { display: none !important; }
}

/* =========================================================================
   4. FACILITIES  --  "The Shelf"
   Eight full-height panels browsed by native horizontal scroll (drag, touch,
   or wheel translated to horizontal on desktop) -- deliberately a different
   interaction model from Experiences' vertical-scroll-drives-horizontal-reel
   below: this section never pins the page's own vertical scroll. Facility
   names run vertically along each panel's left edge, book-spine style.
   ========================================================================= */

.tl-fac { background: var(--ivory); padding-block: calc(var(--section-y) * 0.7); }
.tl-fac-head { grid-column: 1 / 9; }
.tl-fac-head .tl-h2 {
  margin-block: var(--s4) var(--s5);
  white-space: nowrap;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.8rem);
}
.tl-fac-cta { grid-column: 9 / 13; align-self: end; justify-self: end; margin-bottom: 50px !important; }
.tl-fac-cta .btn { padding: 16px 40px; font-size: 1rem; border-radius: 4px; }
@media (max-width: 991px) {
  .tl-fac-head { grid-column: 1 / -1; margin-bottom: var(--s5); }
  .tl-fac-cta { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--s7); }
}
@media (max-width: 600px) {
  .tl-fac-head .tl-h2 { white-space: normal; }
}

/* =========================================================================
   1. HOTEL FACILITIES  --  "Interactive Resort Canvas with Living Hotspots"
   A panoramic widescreen architectural canvas of Hotel Amarabati grounds
   with interactive radar-pulse pins, frosted preview glass cards, and a
   mathematically aligned 8-tab luxury control dock below.
   Scoped exclusively under .tl-fac.
   ========================================================================= */

.tl-fac-canvas-wrap {
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  position: relative;
  width: 100%;
}

/* --- Panoramic Stage Canvas --- */
.tl-fac-stage-canvas {
  position: relative;
  width: 100%;
  height: clamp(440px, 46vw, 560px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(202, 158, 78, 0.35);
  box-shadow: 0 24px 60px -12px rgba(14, 18, 22, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: #0e1216;
  isolation: isolate;
  container-type: size;
}

/* Canvas Backdrop Media & Lighting */
.tl-fac-canvas-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The photo and the pins layer share ONE box: the image's own 16:9 frame,
   scaled to cover the stage and centred (a hand-rolled object-fit: cover).
   Pin top/left percentages are therefore coordinates on the photograph
   itself and stay on their building at every stage size. No hover zoom --
   scaling the photo alone would slide it out from under the pins. */
.tl-fac-canvas-img,
.tl-fac-canvas-pins {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 16 / 9);
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.tl-fac-canvas-img {
  max-width: none;
  filter: brightness(0.82) contrast(1.06);
  transition: filter 0.8s ease;
}

.tl-fac-stage-canvas:hover .tl-fac-canvas-img {
  filter: brightness(0.78) contrast(1.08);
}

.tl-fac-canvas-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(14, 18, 22, 0.12) 0%, rgba(14, 18, 22, 0.55) 80%, rgba(14, 18, 22, 0.85) 100%),
              linear-gradient(180deg, rgba(14, 18, 22, 0.65) 0%, transparent 35%, transparent 65%, rgba(14, 18, 22, 0.75) 100%);
  pointer-events: none;
}

/* Canvas Header Bar */
.tl-fac-canvas-topbar {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.tl-fac-canvas-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(14, 18, 22, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(202, 158, 78, 0.45);
  border-radius: 100px;
  font-family: var(--display-f);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tl-fac-canvas-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: tlDotBlink 2s infinite ease-in-out;
}

@keyframes tlDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.tl-fac-canvas-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(14, 18, 22, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  font-family: var(--body-f);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tl-fac-canvas-hint i {
  color: var(--gold);
  font-size: 0.85rem;
}

/* Pins Layer (geometry shared with .tl-fac-canvas-img above) */
.tl-fac-canvas-pins {
  z-index: 20;
  pointer-events: none;
}

/* Single Pin Hotspot */
.tl-fac-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 25;
  transition: z-index 0.2s ease;
}

.tl-fac-pin.is-active {
  z-index: 60;
}

.tl-fac-pin-trigger {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

/* Sonar radar pulse */
.tl-fac-pin-sonar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  animation: tlPinPulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

.tl-fac-pin:nth-child(2) .tl-fac-pin-sonar { animation-delay: 0.35s; }
.tl-fac-pin:nth-child(3) .tl-fac-pin-sonar { animation-delay: 0.7s; }
.tl-fac-pin:nth-child(4) .tl-fac-pin-sonar { animation-delay: 1.05s; }
.tl-fac-pin:nth-child(5) .tl-fac-pin-sonar { animation-delay: 1.4s; }
.tl-fac-pin:nth-child(6) .tl-fac-pin-sonar { animation-delay: 1.75s; }
.tl-fac-pin:nth-child(7) .tl-fac-pin-sonar { animation-delay: 2.1s; }
.tl-fac-pin:nth-child(8) .tl-fac-pin-sonar { animation-delay: 2.45s; }

@keyframes tlPinPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Pin Core Badge */
.tl-fac-pin-core {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dfb76c 0%, #ca9e4e 100%);
  color: #0e1216;
  font-family: var(--display-f);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(14, 18, 22, 0.85);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.tl-fac-pin:hover .tl-fac-pin-core,
.tl-fac-pin.is-active .tl-fac-pin-core,
.tl-fac-pin-trigger:focus-visible .tl-fac-pin-core {
  transform: scale(1.18);
  background: #ffffff;
  color: #0e1216;
  box-shadow: 0 6px 20px rgba(202, 158, 78, 0.55), 0 0 0 4px #0e1216, 0 0 18px rgba(255, 255, 255, 0.4);
}

/* Floating Frosted Glass Preview Card */
.tl-fac-pin-card {
  position: absolute;
  width: 280px;
  background: rgba(14, 18, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(202, 158, 78, 0.42);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 25px rgba(202, 158, 78, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s;
  z-index: 50;
}

/* Directional placement variants */
.tl-fac-card-right {
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-12px) scale(0.96);
}

.tl-fac-card-left {
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(12px) scale(0.96);
}

.tl-fac-card-top {
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.96);
}

.tl-fac-card-bottom {
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(0.96);
}

/* Visible card states */
.tl-fac-pin.is-active .tl-fac-pin-card,
.tl-fac-pin:hover .tl-fac-pin-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tl-fac-pin.is-active .tl-fac-card-right,
.tl-fac-pin:hover .tl-fac-card-right {
  transform: translateY(-50%) translateX(0) scale(1);
}

.tl-fac-pin.is-active .tl-fac-card-left,
.tl-fac-pin:hover .tl-fac-card-left {
  transform: translateY(-50%) translateX(0) scale(1);
}

.tl-fac-pin.is-active .tl-fac-card-top,
.tl-fac-pin:hover .tl-fac-card-top {
  transform: translateX(-50%) translateY(0) scale(1);
}

.tl-fac-pin.is-active .tl-fac-card-bottom,
.tl-fac-pin:hover .tl-fac-card-bottom {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Card Media Preview */
.tl-fac-pin-media {
  position: relative;
  width: 100%;
  height: 125px;
  overflow: hidden;
}

.tl-fac-pin-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tl-fac-pin:hover .tl-fac-pin-media img {
  transform: scale(1.08);
}

.tl-fac-pin-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(14, 18, 22, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(202, 158, 78, 0.4);
  color: var(--gold);
  font-family: var(--display-f);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
}

/* Card Content Details */
.tl-fac-pin-content {
  padding: 14px 16px 16px;
  text-align: left;
}

.tl-fac-pin-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.tl-fac-pin-num {
  font-family: var(--display-f);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.tl-fac-pin-title {
  margin: 0;
  font-family: var(--display-f);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
}

.tl-fac-pin-desc {
  font-family: var(--body-f);
  font-size: 0.79rem;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.82);
  margin: 6px 0 12px;
}

.tl-fac-pin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display-f);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.tl-fac-pin-link:hover {
  color: #ffffff;
  gap: 9px;
  text-decoration: none;
}

.tl-fac-pin-link i {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.tl-fac-pin-link:hover i {
  transform: translateX(3px);
}

/* --- Mathematical Aligned Luxury Dock Ribbon --- */
.tl-fac-dock {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(202, 158, 78, 0.28);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(14, 18, 22, 0.05);
}

.tl-fac-dock-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease;
  outline: none;
}

.tl-fac-dock-bar {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
  opacity: 0;
}

.tl-fac-dock-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.tl-fac-dock-btn:hover .tl-fac-dock-bar {
  transform: scaleX(0.5);
  opacity: 0.65;
}

.tl-fac-dock-btn.is-active,
.tl-fac-dock-btn:focus-visible {
  background: #0e1216;
  border-color: rgba(202, 158, 78, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(14, 18, 22, 0.18);
}

.tl-fac-dock-btn.is-active .tl-fac-dock-bar {
  transform: scaleX(1);
  opacity: 1;
}

.tl-fac-dock-num {
  font-family: var(--display-f);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(14, 18, 22, 0.45);
  transition: color 0.28s ease;
}

.tl-fac-dock-btn.is-active .tl-fac-dock-num {
  color: var(--gold);
}

.tl-fac-dock-icon {
  font-size: 1.15rem;
  color: #0e1216;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.28s ease;
}

.tl-fac-dock-btn.is-active .tl-fac-dock-icon {
  color: #ffffff;
  transform: scale(1.15);
}

.tl-fac-dock-label {
  font-family: var(--display-f);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: #0e1216;
  transition: color 0.28s ease;
}

.tl-fac-dock-btn.is-active .tl-fac-dock-label {
  color: #ffffff;
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 1024px) {
  .tl-fac-dock-label {
    font-size: 0.72rem;
  }
}

@media (max-width: 991px) {
  .tl-fac-stage-canvas {
    height: 420px;
  }

  .tl-fac-dock {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    gap: 8px;
    scrollbar-width: none;
  }
  .tl-fac-dock::-webkit-scrollbar {
    display: none;
  }

  .tl-fac-dock-btn {
    flex: 0 0 135px;
    scroll-snap-align: start;
    padding: 14px 8px 12px;
  }

  /* Responsive card centering on touch devices */
  .tl-fac-card-right,
  .tl-fac-card-left {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 14px) !important;
    transform: translateX(-50%) translateY(12px) scale(0.96) !important;
  }

  .tl-fac-pin.is-active .tl-fac-card-right,
  .tl-fac-pin.is-active .tl-fac-card-left {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
}

@media (max-width: 600px) {
  .tl-fac-stage-canvas {
    height: 380px;
    border-radius: 14px;
  }

  /* Too narrow to crop: covering a 380px-tall stage would push the parking
     and pool pins off-screen, so show the whole photograph instead, sat on
     the bottom edge so the free band above holds the badge and the cards
     that open upward from the pins. */
  .tl-fac-canvas-img,
  .tl-fac-canvas-pins {
    width: 100cqw;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }

  .tl-fac-canvas-topbar {
    top: 14px;
    left: 14px;
    right: 14px;
  }

  .tl-fac-canvas-hint {
    display: none;
  }

  .tl-fac-pin-core {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  .tl-fac-pin-card {
    width: 250px;
  }

  .tl-fac-pin-media {
    height: 100px;
  }

  .tl-fac-pin-content {
    padding: 12px 14px 14px;
  }

  .tl-fac-dock-btn {
    flex: 0 0 115px;
  }

  .tl-fac-dock-label {
    font-size: 0.7rem;
  }
}

/* =========================================================================
   5. EXPERIENCES  --  "The Diptych"
   A large active scene on the left, a scrollable filmstrip of the other
   seven on the right -- deliberately not the previous pinned horizontal
   reel. Selection is a click (or Tab+Enter) on a real <button>; the page's
   own vertical scroll is never hijacked here.
   ========================================================================= */

.tl-exp { background: var(--ivory); padding-block: calc(var(--section-y) * 0.7); }
.tl-exp-head { margin-bottom: var(--s7); }
.tl-exp-intro { grid-column: 1 / 8; }
.tl-exp-intro .tl-h2 {
  margin-block: var(--s4) var(--s5);
  white-space: nowrap;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.8rem);
}
.tl-exp-stats {
  grid-column: 8 / 13;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 50px;
}
.tl-stat {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.tl-stat-num {
  font-family: var(--display-f);
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 300;
  color: var(--charcoal);
  letter-spacing: -0.02em;
}
.tl-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}
.tl-stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(20, 23, 26, 0.15);
}
@media (max-width: 991px) {
  .tl-exp-intro { grid-column: 1 / -1; }
  .tl-exp-stats {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--s5);
  }
}
@media (max-width: 600px) {
  .tl-exp-intro .tl-h2 { white-space: normal; }
}

.tl-exp-accordion {
  display: flex;
  width: 100vw;
  height: 70vh;
  min-height: 500px;
  max-height: 800px;
  margin-inline: calc(50% - 50vw);
  margin-top: var(--s8);
  background: var(--ivory); /* Matches the section above */
  overflow: hidden;
}

.tl-exp-slice {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  border-right: 1px solid rgba(255,255,255,0.1);
}
.tl-exp-slice:last-child {
  border-right: none;
}
/* When a slice is hovered or active, it flex-grows to take up more space */
.tl-exp-slice:hover,
.tl-exp-slice:focus-within,
.tl-exp-slice.is-active {
  flex: 6; /* Much wider than the others */
}

.tl-exp-slice img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) brightness(0.7);
  transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.tl-exp-slice:hover img,
.tl-exp-slice:focus-within img,
.tl-exp-slice.is-active img {
  filter: grayscale(0) brightness(1);
}

.tl-exp-slice::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.6;
  transition: opacity 0.6s;
}
.tl-exp-slice:hover::after,
.tl-exp-slice:focus-within::after,
.tl-exp-slice.is-active::after {
  opacity: 1;
}

.tl-exp-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s5);
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: 0s;
  pointer-events: none;
  /* Prevent text wrapping when container is tiny */
  white-space: nowrap;
}
.tl-exp-slice:hover .tl-exp-content,
.tl-exp-slice:focus-within .tl-exp-content,
.tl-exp-slice.is-active .tl-exp-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* delay content appearance slightly */
  white-space: normal;
}

.tl-exp-pnum {
  display: block;
  font-family: var(--display-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: var(--s2);
}

.tl-exp-pname {
  font-family: var(--display-f);
  font-size: clamp(1.5rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
}
.tl-exp-pname span { display: block; }

.tl-exp-hud {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
}
.tl-exp-progress {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--hair);
  overflow: hidden;
}
.tl-exp-progress i {
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.tl-exp-hint {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand-ink);
}

@media (max-width: 767px) {
  /* On mobile, stack them vertically */
  .tl-exp-accordion {
    flex-direction: column;
    height: 80vh;
  }
  .tl-exp-pname { font-size: 2rem; }
  .tl-exp-hint { display: none; }
}

/* =========================================================================
   6. BAKKHALI  --  "Horizon"
   One panoramic plane. The word sits ON the horizon: upper half on ivory,
   lower half genuinely occluded by the photograph.
   ========================================================================= */

.tl-view {
  background: var(--ivory);
  padding-top: 0;
  padding-bottom: calc(var(--section-y) * 0.9);
  /* how far the word rises above the landscape. The band's PADDING and the
     occluded copy's clip both read this one value, so the two halves of the
     effect can never drift apart. Padding, not the image's margin -- a child
     margin-top collapses straight through and hides the word entirely. */
  --cut: clamp(28px, 5.2vw, 108px);
}

.tl-view-horizon {
  position: relative;
  padding-top: var(--cut);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.tl-view-word {
  position: absolute;
  top: 45%; left: 0; right: 0;
  transform: translateY(-50%) !important;
  text-align: center;
  font-family: var(--display-f);
  font-weight: 400; /* Increased from 300 for better visibility */
  font-size: clamp(4rem, 15vw, 16rem);
  line-height: .8;
  letter-spacing: -.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.tl-view-word--up { display: none; }
.tl-view-word--in {
  z-index: 4;
  color: #fff;
  opacity: .55; /* Increased from .3 for better visibility */
}

.tl-view-pano {
  position: relative;
  z-index: 3;
  display: block;
  height: min(72vh, 780px);
  overflow: hidden;
  background: var(--sand);
}
.tl-view-pano img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  will-change: transform;
}

/* =========================================================================
   WEBGL IMAGE LAYER (js/tideline-gl.js, lazily injected)
   Shared by the Bakkhali ripple and the Experiences dissolve. Sits above the
   plain <img>/.tl-exp-frame planes it enhances but below any overlay type
   (.tl-exp-name z:4, .tl-exp-hud z:3). pointer-events:none throughout, so
   the Bakkhali lightbox anchor and the Experiences "Explore" cursor target
   keep receiving every click/hover exactly as before GL existed.
   Starts at opacity 0 and is only raised once a real frame -- a pixel-match
   of the <img> beneath it -- has actually been presented, so the handover
   is invisible; the same crossfade quietly reverses on context loss.
   ========================================================================= */
.tl-gl-canvas {
  position: absolute;
  inset: 0;
  /* Above TL.imageMask's frame stack: that primitive sets inline z-index up
     to 2 via GSAP on whichever plane is incoming/outgoing (js/tideline-core.js),
     including on the very first, pre-GL-ready activation that every GL
     consumer goes through before its lazy-loaded surface exists. At equal
     z-index the later DOM sibling wins, and the frames are inserted after
     the canvas -- so anything less than 3 here loses that tie once a frame
     has ever been through the CSS path, even briefly, and stays covered by
     the DOM image for the rest of the session. */
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms linear;
}
.tl-gl-ready > .tl-gl-canvas { opacity: 1; }

.tl-view-copy { margin-bottom: var(--s8); margin-top: 0; }
.tl-view-copy > div { grid-column: 1 / 8; }
.tl-view-copy .tl-h2 { margin-block: var(--s4) var(--s5); }

/* the wave: a solid ivory mass with a wavy top edge sitting over the lower
   ~62% of the panorama, like a tide covering the shore. JS animates it
   sliding down and off (see viewMotion in tideline.js) so the photograph
   reveals from the waterline downward as the tide recedes. Default state
   (no JS) is fully off-canvas -- the photograph is always legible without
   scripts, per this file's baseline-first convention. */
.tl-view-tide {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateY(100%);
}
.tl-view-tide path { fill: var(--ivory); }

/* the postcards: five small tilted prints floating over the horizon's own
   edges -- not a flush band, not a grid. Each is a real lightbox link. */
.tl-view-postcards {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.tl-view-card {
  position: absolute;
  display: block;
  width: clamp(120px, 12.5vw, 190px);
  background: var(--ivory);
  padding: var(--s2) var(--s2) var(--s4);
  pointer-events: auto;
  text-decoration: none;
}
.tl-view-card:hover,
.tl-view-card:focus-visible { z-index: 2; }
.tl-view-card-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.tl-view-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-scene) var(--e-out);
}
.tl-view-card:hover .tl-view-card-photo img,
.tl-view-card:focus-visible .tl-view-card-photo img { transform: scale(1.06); }
.tl-view-cap {
  display: block;
  margin-top: var(--s3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--charcoal);
}

.tl-view-card:nth-child(1) { left: 50%; bottom: 50px; transform: translateX(calc(-50% - 36vw)); z-index: 10; }
.tl-view-card:nth-child(2) { left: 50%; bottom: 50px; transform: translateX(calc(-50% - 18vw)); z-index: 10; }
.tl-view-card:nth-child(3) { left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 10; }
.tl-view-card:nth-child(4) { left: 50%; bottom: 50px; transform: translateX(calc(-50% + 18vw)); z-index: 10; }
.tl-view-card:nth-child(5) { left: 50%; bottom: 50px; transform: translateX(calc(-50% + 36vw)); z-index: 10; }

.tl-view-card:nth-child(1):hover { transform: translateX(calc(-50% - 36vw)) scale(1.15) translateY(-20px); z-index: 20 !important; }
.tl-view-card:nth-child(2):hover { transform: translateX(calc(-50% - 18vw)) scale(1.15) translateY(-20px); z-index: 20 !important; }
.tl-view-card:nth-child(3):hover { transform: translateX(-50%) scale(1.15) translateY(-20px); z-index: 20 !important; }
.tl-view-card:nth-child(4):hover { transform: translateX(calc(-50% + 18vw)) scale(1.15) translateY(-20px); z-index: 20 !important; }
.tl-view-card:nth-child(5):hover { transform: translateX(calc(-50% + 36vw)) scale(1.15) translateY(-20px); z-index: 20 !important; }

/* ═══════════════════════════════════════════════════════════════════
   Bakkhali Custom Photo-Frame Popup  ·  Modern Cinematic Edition
   All rules use #bk-frame-overlay, #bk-frame-outer, #bk-frame-matte
   as root selectors — will never touch anything else on the page.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes bkFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes bkPanelRise {
  from { opacity: 0; transform: scale(0.94) translateY(30px); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0);   }
}
@keyframes bkSlideInRight {
  from { opacity: 0; transform: translateX(2%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bkSlideInLeft {
  from { opacity: 0; transform: translateX(-2%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Full-screen overlay shell ──────────────────────────────────── */
#bk-frame-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#bk-frame-overlay.bk-active,
#bk-frame-overlay.bk-closing { pointer-events: all; }

/* ── Rich cinematic backdrop — deep radial spotlight ───────────── */
#bk-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,
      rgba(25, 25, 30, 0.85) 0%,
      rgba(3, 3, 5, 0.98)   100%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
#bk-frame-overlay.bk-active  #bk-backdrop { opacity: 1; }
#bk-frame-overlay.bk-closing #bk-backdrop { opacity: 0; transition-duration: 0.4s; }

/* ── Outer frame — clean white panel ──────────────────────── */
#bk-frame-outer {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 3px;

  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18),
    0 40px 80px -10px rgba(0, 0, 0, 0.5),
    0 80px 140px -20px rgba(0, 0, 0, 0.35);

  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease;
  transform: scale(0.94) translateY(28px);
  filter: blur(6px);
}
#bk-frame-overlay.bk-active #bk-frame-outer {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
#bk-frame-overlay.bk-closing #bk-frame-outer {
  opacity: 0;
  transform: scale(0.97) translateY(16px);
  filter: blur(4px);
  transition-duration: 0.4s;
}

/* ── Thin top accent line ──────────────────────────────── */
#bk-frame-outer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent
  );
}

/* ── Matte board — bright white ──────────────────────────── */
#bk-frame-matte {
  position: relative;
  background: #ffffff;
  padding: 14px 14px 0 14px;
}

/* ── The photo — portrait orientation ────────────────────────── */
#bk-frame-inner {
  position: relative;
  width: min(36vw, 420px);
  aspect-ratio: 3 / 4;         
  max-height: 72vh;            
  overflow: hidden;
}

#bk-frame-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Vignette burned onto photo edges */
#bk-frame-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}

#bk-frame-img.bk-img-enter-right { animation: bkSlideInRight 0.45s cubic-bezier(0.22,1,0.36,1); }
#bk-frame-img.bk-img-enter-left  { animation: bkSlideInLeft  0.45s cubic-bezier(0.22,1,0.36,1); }

/* ── Caption strip ─────────────────────────────────────── */
#bk-frame-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 6px 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 12px;
  gap: 12px;
}

#bk-frame-caption::before {
  content: '—';
  color: rgba(0, 0, 0, 0.18);
  font-size: 0.75rem;
  flex-shrink: 0;
}

#bk-frame-title {
  color: rgba(20, 15, 10, 0.82);
  font-family: var(--display-f), 'Georgia', serif;
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 3px;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

#bk-frame-counter {
  color: rgba(0, 0, 0, 0.25);
  font-family: var(--body-f), sans-serif;
  font-size: 0.68rem;
  letter-spacing: 3px;
  flex-shrink: 0;
}

/* ── Close button ─────────────────────────────────────────────── */
#bk-frame-close {
  position: fixed;
  top: 24px; right: 26px;
  z-index: 100001;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.3s ease;
}
#bk-frame-close:hover {
  background: rgba(195,158,80,0.1);
  border-color: rgba(195,158,80,0.4);
  transform: rotate(90deg);
}
#bk-frame-close svg {
  width: 14px; height: 14px;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.5; fill: none;
  stroke-linecap: round;
}

/* ── Prev / Next navigation ───────────────────────────────────── */
.bk-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 100001;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 2.2rem; line-height: 1;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s ease;
}
.bk-nav:hover {
  background: rgba(195,158,80,0.08);
  border-color: rgba(195,158,80,0.4);
  color: rgba(195,158,80,1);
}
#bk-nav-prev { left: 20px; }
#bk-nav-next { right: 20px; }


/* ---- bakkhali: tablet ---- */
@media (max-width: 1279px) {
  .tl-view-copy > div { grid-column: 1 / 8; }
  .tl-view-card { width: clamp(96px, 13vw, 140px); }
  .tl-view-card:nth-child(2) { bottom: -24px; }
  .tl-view-card:nth-child(4) { bottom: -20px; }
}

/* ---- bakkhali: mobile -- postcards become a swipe strip, still tilted ---- */
@media (max-width: 767px) {
  .tl-view-pano { height: 46vh; }
  .tl-view-copy { margin-top: var(--s6); }
  .tl-view-copy > div { grid-column: 1 / -1; }
  .tl-view-postcards {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: var(--s5);
    margin-top: var(--s7);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tl-view-postcards::-webkit-scrollbar { display: none; }
  .tl-view-card {
    position: static;
    flex: 0 0 auto;
    width: 34vw;
    transform: none !important;
  }
  .tl-view-card:nth-child(even) { margin-top: var(--s5); }
}

/* =========================================================================
   7. REVIEWS  --  "Voices"
   Full-bleed scene, directional grade, type straight on the photograph.
   No card, no panel, no glass, no quotation ornament.
   ========================================================================= */

.tl-rev {
  position: relative;
  isolation: isolate;
  color: #f6f2ea;
  background: var(--charcoal);
  padding-block: calc(var(--section-y) * 0.7);
  overflow: hidden;
}
/* dissolve in and out of the dark passage instead of a hard block */
.tl-rev::before,
.tl-rev::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}
.tl-rev::before { top: 0;    background: linear-gradient(to bottom, var(--ivory), transparent); }
.tl-rev::after  { bottom: 0; background: linear-gradient(to top,    var(--ivory), transparent); }

.tl-rev-bg { position: absolute; inset: 0; z-index: 0; }
.tl-rev-plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-scene) var(--e-inout);
  will-change: opacity, transform;
}
.tl-rev-plate.is-active { opacity: 1; }
.tl-rev-plate img { width: 100%; height: 100%; object-fit: cover; }

.tl-rev-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(14, 17, 19, .94) 0%, rgba(14, 17, 19, .84) 46%, rgba(14, 17, 19, .5) 100%),
    linear-gradient(to top, rgba(14, 17, 19, .7), transparent 55%);
}

.tl-rev .tl-wrap { position: relative; z-index: 3; }
.tl-rev-intro { grid-column: 1 / 5; }
.tl-rev-intro .tl-h2 { color: #fff; margin-block: var(--s4) var(--s5); }
.tl-rev-intro .tl-body { color: rgba(246, 242, 234, .72); }
.tl-rev-intro .tl-more { margin-top: var(--s6); }

.tl-rev-body {
  grid-column: 6 / 13;
  position: relative;
  padding-left: var(--s6);
}

/* the autoplay timer: a hairline in the margin, not a progress bar in a box */
.tl-rev-timer {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(246, 242, 234, .2);
  overflow: hidden;
}
.tl-rev-timer i {
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}

/* all quotes share one grid cell: container height = tallest, so no CLS */
.tl-rev-slides { display: grid; }
.tl-rev-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: var(--s7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.tl-rev-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* the guest portrait: large, organic-masked (an irregular blob, not a plain
   circle), sitting apart from the quote rather than a small inline avatar. */
.tl-rev-portrait {
  flex: 0 0 auto;
  width: clamp(104px, 9vw, 148px);
  aspect-ratio: 1;
  clip-path: url(#tl-rev-blob);
  background: var(--sand);
}
.tl-rev-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.tl-rev-content { flex: 1 1 auto; min-width: 0; }

.tl-rev-quote {
  font-family: var(--display-f);
  font-size: clamp(1.125rem, .82rem + 1.2vw, 1.875rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.018em;
  color: #f6f2ea;
  max-width: 34ch;
}
.tl-rev-who {
  margin-top: var(--s7);
  /* asymmetric: indented past the quote's own edge rather than sitting
     flush beneath it, echoing the portrait's width without repeating it */
  margin-left: clamp(32px, 5vw, 64px);
}
.tl-rev-name {
  display: block;
  font-family: var(--display-f);
  font-size: clamp(1.125rem, .9rem + .9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
}
.tl-rev-role {
  display: block;
  margin-top: 6px;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(202, 158, 78, .92);
}

.tl-rev-nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin-top: var(--s7);
  color: rgba(246, 242, 234, .8);
}
.tl-rev-nav .tl-count { margin-left: auto; color: rgba(246, 242, 234, .6); }

/* ---- reviews: tablet + mobile ---- */
@media (max-width: 1279px) {
  .tl-rev-intro { grid-column: 1 / -1; margin-bottom: var(--s8); }
  .tl-rev-body { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .tl-rev-grade {
    background: linear-gradient(to bottom, rgba(14, 17, 19, .9), rgba(14, 17, 19, .8) 45%, rgba(14, 17, 19, .95));
  }
  .tl-rev-body { padding-left: var(--s4); }
  .tl-rev-slide { flex-direction: column; gap: var(--s5); }
  .tl-rev-portrait { width: 84px; }
  .tl-rev-quote { max-width: none; }
  .tl-rev-who { margin-left: 0; }
  .tl-rev-nav { gap: var(--s5); margin-top: var(--s6); }
}

/* =========================================================================
   8. ATTRACTIONS  --  "Destinations"
   Mirrors Facilities: the photograph bleeds off the LEFT edge. The active
   destination name crosses the image boundary and is split ivory / charcoal
   exactly on that grid line.
   ========================================================================= */

.tl-attr { background: var(--ivory); }
.tl-attr-head {
  grid-column: 1 / -1;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--s5);
}
.tl-attr-head .tl-h2 { margin-block: var(--s4) var(--s5); }

.tl-attr-stage { position: relative; }

/* the itinerary map: one photograph at the centre, the three destinations
   arranged around it like pins, each linked back to it by a thin line --
   not a scrolling index running beside a sticky frame. */
.tl-attr-map {
  position: relative;
  margin-top: var(--s7);
  min-height: clamp(700px, 55vw, 840px);
}
.tl-attr-mapimg {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 36vw, 520px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.tl-attr-shot { position: absolute; inset: 0; opacity: 0; }
.tl-attr-shot.is-active { opacity: 1; }
html.tl-on .tl-attr-shot {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, transform;
}
html.tl-on .tl-attr-shot.is-active { clip-path: inset(0 0 0 0); }
.tl-attr-shot img { width: 100%; height: 100%; object-fit: cover; }

.tl-attr-pins { position: static; }

/* leader lines from each pin to the photograph, drawn as one SVG overlay
   in percentage coordinates of .tl-attr-map itself -- robust to the map's
   fluid width, unlike a rotated CSS line tuned to one viewport. */
.tl-attr-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.tl-attr-line {
  stroke: var(--hair);
  stroke-width: .15;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--t-ui) var(--e-out);
}
.tl-attr-line.is-active { stroke: var(--gold); }

.tl-attr-item { position: absolute; z-index: 1; width: clamp(210px, 18vw, 280px); }
.tl-attr-link { display: block; }

.tl-attr-item:nth-child(1) { top: 0; left: 0; }
.tl-attr-item:nth-child(2) { top: 0; right: 0; text-align: right; }
.tl-attr-item:nth-child(3) { bottom: 0; left: 0; }
.tl-attr-item:nth-child(4) { bottom: 0; right: 0; text-align: right; }

.tl-attr-top { display: block; margin-bottom: var(--s3); }
.tl-attr-n {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--display-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--sand-ink);
  transition: color var(--t-ui) var(--e-out);
}
.tl-attr-item.is-active .tl-attr-n { color: var(--gold); }

.tl-attr-name {
  position: relative;
  display: block;
  font-family: var(--display-f);
  font-size: clamp(1.375rem, .95rem + 1.6vw, 2.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--sand-ink);
  transition: color var(--t-rev) var(--e-out);
}
.tl-attr-name .a { display: none; }
.tl-attr-item.is-active .tl-attr-name { color: var(--charcoal); }

.tl-attr-desc {
  display: block;
  margin-top: var(--s3);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--sand-ink);
  transition: color var(--t-rev) var(--e-out);
}
.tl-attr-item.is-active .tl-attr-desc { color: var(--ink-2); }
.tl-attr-item .tl-more { margin-top: var(--s3); }
.tl-attr-item.is-active .tl-more svg { transform: translateX(6px); }

.tl-attr-shot-m { display: none; }

/* ---- attractions: tablet ---- */
@media (max-width: 1279px) {
  .tl-attr-head { grid-column: 1 / -1; margin-bottom: var(--s5); }
  .tl-attr-map { min-height: clamp(760px, 72vw, 920px); }
  .tl-attr-item { width: clamp(200px, 26vw, 260px); }
}

/* ---- attractions: mobile -- deliberate vertical destination sequence ---- */
@media (max-width: 767px) {
  .tl-attr-map { position: static; min-height: 0; max-height: none; }
  .tl-attr-mapimg { display: none; }

  .tl-attr-pins { display: block; }
  .tl-attr-item {
    position: static;
    width: auto;
    margin-bottom: var(--s7);
  }
  .tl-attr-lines { display: none; }

  .tl-attr-shot-m {
    display: block;
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
  }
  html:not(.tl-on) .tl-attr-shot-m { clip-path: none; }
  .tl-attr-shot-m img { width: 100%; height: 100%; object-fit: cover; }
  .tl-attr-top { display: block; margin: var(--s4) 0 0; }
  .tl-attr-n { display: block; margin-bottom: var(--s2); color: var(--gold) !important; }
  .tl-attr-name { font-size: 1.625rem; color: var(--charcoal) !important; }
  .tl-attr-desc { color: var(--ink-2) !important; margin-top: var(--s4); }
}

/* =========================================================================
   9. FOOTER  --  "Last Light"
   Full-bleed closing scene. Information is arranged by typography and
   alignment alone: no panel, no borders, no columns in boxes.
   ========================================================================= */

.tl-foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0e1113;
  color: rgba(246, 242, 234, .78);
  padding-block: clamp(112px, 11vw, 184px) var(--s6);
}
.tl-foot-bg { position: absolute; inset: 0; z-index: 0; }
.tl-foot-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Carries both the readability grade and the dissolve out of the ivory page
   above. Kept as a real element rather than a pseudo-element because the
   theme already owns footer::before. */
.tl-foot-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--ivory) 0, rgba(251, 249, 245, 0) 150px),
    linear-gradient(to bottom, rgba(14, 17, 19, .8) 0%, rgba(14, 17, 19, .9) 45%, rgba(14, 17, 19, .97) 100%);
}
.tl-foot .tl-wrap { position: relative; z-index: 3; }

/* --- the closing call to action: one colossal statement crossing the
   width at a slight angle, not a headline-plus-button grid row --- */
.tl-foot-top { display: block; }
.tl-foot-top h2 {
  display: block;
  color: #fff;
  font-size: clamp(2.75rem, 1rem + 7vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.03em;
  max-width: 15ch;
  transform: rotate(-2.4deg);
  transform-origin: left center;
}
.tl-foot-top h2 em { color: var(--gold); font-style: normal; }

.tl-foot-act {
  margin-top: var(--s7);
  margin-left: clamp(24px, 7vw, 120px);
}
.tl-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 20px 40px;
  border-radius: 999px !important;   /* the page's single primary action */
  background: var(--gold);
  color: var(--charcoal);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
  transition: background-color var(--t-ui) var(--e-out);
}
.tl-foot-cta svg { transition: transform var(--t-ui) var(--e-out); }
.tl-foot-cta:hover { background: #ddb367; }
.tl-foot-cta:hover svg { transform: translateX(6px); }

.tl-foot .tl-rule { background: rgba(246, 242, 234, .16); margin-block: var(--s9) var(--s7); }

/* --- information, an asymmetric multi-column close: uneven widths and
   staggered vertical starts, not a straight four-up grid --- */
.tl-foot-info { row-gap: var(--s8); }
.tl-foot-col:nth-child(1) { grid-column: 1 / 6; }
.tl-foot-col:nth-child(2) { grid-column: 7 / 10; margin-top: var(--s7); }
.tl-foot-col:nth-child(3) { grid-column: 10 / 13; }
.tl-foot-col:nth-child(4) { grid-column: 7 / 10; margin-top: var(--s8); }

.tl-foot-col h3 {
  font-family: var(--body-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}
.tl-foot-col p,
.tl-foot-col li {
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(246, 242, 234, .72);
}
.tl-foot-col li + li { margin-top: var(--s2); }
.tl-foot-col strong {
  display: block;
  font-weight: 600;
  color: rgba(246, 242, 234, .95);
}
.tl-foot-col a { color: rgba(246, 242, 234, .72); transition: color var(--t-micro) ease; }
.tl-foot-col a:hover { color: var(--gold); }

.tl-foot-pay { margin-top: var(--s5); }
.tl-foot-pay ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tl-foot-pay li + li { margin-top: 0; }
.tl-foot-pay img {
  width: 46px; height: 30px;
  object-fit: contain;
  opacity: .82;
  filter: grayscale(1) brightness(1.9);
  transition: opacity var(--t-micro) ease, filter var(--t-micro) ease;
}
.tl-foot-pay li:hover img { opacity: 1; filter: none; }

/* third-party weather embed: given its own quiet axis at reduced scale so it
   reads as a small instrument rather than a panel. Its own frame lives inside
   the vendor's iframe and cannot be restyled from here. */
.tl-foot-weather {
  max-width: 220px;
  transform-origin: left top;
  opacity: .9;
}

.tl-foot-social { display: flex; gap: var(--s4); margin-bottom: var(--s5); }
.tl-foot-social a {
  font-size: 1rem;
  color: rgba(246, 242, 234, .7);
  transition: color var(--t-micro) ease, transform var(--t-micro) var(--e-out);
}
.tl-foot-social a:hover { color: var(--gold); transform: translateY(-2px); }

.tl-foot-legal li { font-size: .8125rem; }

/* --- closing line --- */
.tl-foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid rgba(246, 242, 234, .14);
}
.tl-foot-copy { font-size: .8125rem; color: rgba(246, 242, 234, .5); }
.tl-foot-copy a { color: var(--gold); }
.tl-foot-copy a:hover { text-decoration: underline; }
.tl-foot-stamp {
  font-family: var(--display-f);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, .32);
}

/* ---- footer: tablet ---- */
@media (max-width: 1279px) {
  .tl-foot-top h2 { grid-column: 1 / -1; }
  .tl-foot-act { grid-column: 1 / -1; margin-top: var(--s6); }
  .tl-foot-col:nth-child(1) { grid-column: 1 / 5; }
  .tl-foot-col:nth-child(2) { grid-column: 5 / 9; }
  .tl-foot-col:nth-child(3) { grid-column: 1 / 5; }
  .tl-foot-col:nth-child(4) { grid-column: 5 / 9; }
}

/* ---- footer: mobile ---- */
@media (max-width: 767px) {
  .tl-foot-bg img { transform: none !important; }   /* drift disabled */
  .tl-foot-cta { width: 100%; justify-content: center; }
  .tl-foot-col:nth-child(n) { grid-column: 1 / -1; }
  .tl-foot .tl-rule { margin-block: var(--s7) var(--s6); }
  .tl-foot-base { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   10. MOTION SAFETY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tl :where(*, *::before, *::after) {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* `tl-on` is never added when motion is reduced, so the enhanced sticky
     scenes never build and the base layouts apply. These rules only need to
     undo the states that live outside that gate. */
  .tl [data-tl-mask],
  .tl-fac-shot-m,
  .tl-attr-shot-m { clip-path: none !important; }
  .tl [data-tl-fade] { opacity: 1 !important; }
  .tl-rule { transform: none !important; }
  .tl-fac-marker { display: none; }
  .tl-view-tide { transform: translateY(100%) !important; }
  .tl-view-card { opacity: 1 !important; }
}