/* XHO Bacalar · The Loop. Tokens first; the engine is themed, never edited. */
:root {
  --sc-canvas: #0D1D18;  --sc-surface: #13261F;
  --sc-ink: #EEF1EA;     --sc-ink-soft: #B9C7BF;
  --sc-accent: #62D6CF;  --sc-accent-ink: #0D1D18;
  --sc-font-display: "Crimson Pro", "Minion Pro", Georgia, serif;
  --sc-font-text: "Figtree", system-ui, sans-serif;
  --sc-gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --lantern: #FFD08A;
  --bar-h: 4.25rem;
}

html { background: var(--sc-canvas); color-scheme: dark; }
body {
  margin: 0; background: var(--sc-canvas); color: var(--sc-ink);
  font: 400 1rem/1.55 var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--sc-ink); color: var(--sc-canvas); padding: .6rem 1rem; border-radius: 4px;
}
.skip:focus { top: 1rem; }

/* ---- bar ---------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 120;
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding: 0 var(--sc-gutter);
  background: linear-gradient(to bottom, rgb(8 20 16 / .55), rgb(8 20 16 / 0));
}
.bar__mark { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.bar__mark img { display: block; width: 3.4rem; height: auto; filter: brightness(0) invert(1); }
.bar__place {
  font: 500 .66rem/1 var(--sc-font-text); letter-spacing: .42em; text-transform: uppercase;
  padding-left: .7rem; border-left: 1px solid rgb(238 241 234 / .4);
}
.bar__cta {
  justify-self: end;
  font: 600 .8rem/1 var(--sc-font-text); letter-spacing: .06em;
  text-decoration: none; color: var(--sc-accent-ink); background: var(--sc-ink);
  padding: .8rem 1.15rem; border-radius: 999px;
  transition: background-color .25s ease, transform .25s ease;
}
.bar__cta:hover { background: var(--sc-accent); }
.bar__cta:focus-visible, .map button:focus-visible, .btn:focus-visible, .link:focus-visible, .bar__mark:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 3px;
}

/* ---- the map: the XHO loop as the route gauge ------------------------- */
.map { justify-self: center; display: flex; align-items: center; gap: .85rem; position: relative; }
.map__glyph { width: 2.1rem; height: auto; overflow: visible; flex: none; }
.map__track { fill: none; stroke: rgb(238 241 234 / .28); stroke-width: 12; stroke-linecap: round; }
.map__ink   { fill: none; stroke: var(--sc-ink); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.map__dot   { fill: var(--sc-accent); }
.map__stops { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; }
.map__stops button {
  position: relative; width: 1.6rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 0; color: transparent;
}
.map__stops button::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgb(238 241 234 / .38); transition: transform .3s ease, background-color .3s ease;
}
.map__stops button:hover::before { background: var(--sc-ink); transform: scale(1.4); }
.map__stops button[aria-current="step"]::before { background: var(--sc-accent); transform: scale(1.7); }
.map__here { margin: 0; min-width: 8.5rem; font: 500 .72rem/1 var(--sc-font-text); letter-spacing: .2em; text-transform: uppercase; }

/* ---- the world: film, atmosphere, then the land ---------------------- */
.atmos {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 140; pointer-events: none;
}
.land {
  position: absolute; inset: 0; z-index: 150; opacity: 0; visibility: hidden;
  background: radial-gradient(120% 90% at 60% 40%, #10283A 0%, #0A1820 55%, #06100F 100%);
}
.land.is-on { visibility: visible; }
.land__gl, .land__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.land__poster { object-fit: cover; }
.land.has-gl .land__poster { opacity: 0; }

.land__labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 .68rem/1 var(--sc-font-text); letter-spacing: .2em; text-transform: uppercase;
  color: var(--sc-ink); opacity: 0;
  padding-left: .9rem;
  text-shadow: 0 1px 6px rgb(0 0 0 / .7);
  transition: opacity .5s ease;
}
.tag::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--sc-ink);
}
.tag.is-on { opacity: 1; }
.tag--left { padding: 0 .9rem 0 0; translate: -100% 0; }
.tag--left::before { left: auto; right: 0; }
.tag--dock::before { background: var(--lantern); }

/* ---- copy ----------------------------------------------------------------- */
.scrim { opacity: var(--scrim, 1); }
.scrim::before, .scrim::after { content: ""; position: absolute; inset: 0; transition: opacity .4s ease; }
.scrim::before {
  background: radial-gradient(100% 120% at 0% 100%, rgb(7 18 15 / .96) 0%, rgb(7 18 15 / .9) 40%, rgb(7 18 15 / .62) 62%, rgb(7 18 15 / .25) 78%, transparent 92%);
  opacity: var(--scrim-lead, 1);
}
.scrim::after {
  background: radial-gradient(95% 115% at 100% 100%, rgb(7 18 15 / .94) 0%, rgb(7 18 15 / .86) 38%, rgb(7 18 15 / .55) 60%, rgb(7 18 15 / .2) 76%, transparent 90%);
  opacity: var(--scrim-trail, 0);
}

.copy { max-width: min(34rem, 82vw); }
.copy h1, .copy h2 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 300; letter-spacing: -.01em;
  text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / .35);
}
.copy h1 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: .98; max-width: 11ch; }
.copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1.02; max-width: 13ch; }
.copy--trail h2 { margin-left: auto; }
.copy em { font-style: italic; font-weight: 300; display: block; color: #F6F8F2; }
.copy p { margin: 1rem 0 0; max-width: 34ch; font-size: clamp(1rem, 1.15vw, 1.12rem); color: #E4EBE5; text-shadow: 0 1px 10px rgb(0 0 0 / .45); }
.copy--trail p { margin-left: auto; }
.kicker {
  margin: 0 0 1.1rem !important; font: 600 .7rem/1 var(--sc-font-text) !important;
  letter-spacing: .34em; text-transform: uppercase; color: var(--sc-ink) !important; white-space: nowrap;
}
.copy .lede { max-width: 30ch; }
.copy--hero { bottom: clamp(3rem, 14vh, 9rem); }

.copy--quiet { inset-inline: auto; left: 50%; bottom: 18vh; translate: -50% 0; text-align: center; max-width: none; }
.quiet {
  font: italic 300 clamp(1.8rem, 3.2vw, 2.8rem)/1.1 var(--sc-font-display) !important;
  margin: 0 !important; max-width: none !important; white-space: nowrap; color: var(--sc-ink) !important;
}

.copy--finale { left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); max-width: min(30rem, 86vw); }
.finale__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.3rem; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-accent-ink); text-decoration: none;
  font: 600 .9rem/1 var(--sc-font-text); letter-spacing: .04em;
  transition: background-color .25s ease;
}
.btn:hover { background: var(--sc-accent); }
.link {
  font: 500 .88rem/1 var(--sc-font-text); text-decoration: none; padding: .9rem 0;
  border-bottom: 1px solid rgb(238 241 234 / .4);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s ease;
}
.link:hover { background-size: 100% 1px; }
.fine { font-size: .74rem !important; line-height: 1.5; color: var(--sc-ink-soft) !important; max-width: 46ch !important; margin-top: 1.4rem !important; }

/* ---- phones ---------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --bar-h: 3.6rem; }
  .bar { gap: .75rem; }
  .bar__place { display: none; }
  .map__stops { display: none; }
  .map { gap: .55rem; }
  .map__here { min-width: 0; font-size: .62rem; letter-spacing: .16em; }
  .bar__cta { padding: .7rem .9rem; font-size: .74rem; }
  .copy, .copy--finale { inset-inline: var(--sc-gutter); max-width: none; }
  .copy h2, .copy--trail h2, .copy--trail p { margin-left: 0; }
  .copy--trail { text-align: left; }
  .scrim::before { opacity: max(var(--scrim-lead, 1), var(--scrim-trail, 0));
    background: linear-gradient(to top, rgb(7 18 15 / .95) 0%, rgb(7 18 15 / .88) 36%, rgb(7 18 15 / .6) 56%, rgb(7 18 15 / .2) 70%, transparent 80%); }
  .scrim::after { display: none; }
  .copy--quiet { left: 0; right: 0; translate: none; }
  .quiet { white-space: normal; }
  .copy--finale { bottom: 1.5rem; }
  .finale__acts { gap: .4rem 1rem; }
}
@media (max-width: 380px), (max-height: 680px) {
  .copy h1 { font-size: 2.35rem; }
  .copy h2 { font-size: 1.9rem; }
  .copy p { font-size: .95rem; margin-top: .7rem; }
  .copy--finale .fine { display: none; }
  .kicker { margin-bottom: .7rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tag, .bar__cta, .btn, .link { transition: none; }
}