:root{
    --ink:#0f0f10;
    --ink-2:#3a3a3e;
    --ink-3:#76767e;
    --line:#e7e7ea;
    --line-2:#efeff1;
    --bg:#ffffff;
    --bg-soft:#fafafa;
    --pink:#ec3d6e;
    --pink-soft:#fdeef2;
    --green:#16a34a;
    --green-soft:#e9f7ee;
    --map-land:#eef0f1;
    --map-water:#dfe6ea;
    --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }

  /* ---------- creator site nav ---------- */
  .site-nav{
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(8px);
    position:sticky;top:0;z-index:50;
  }
  .site-nav-inner{
    max-width:1240px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{font-weight:800;font-size:19px;letter-spacing:-.02em}
  .logo span{color:var(--pink)}
  .nav-links{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
  .nav-links a{color:inherit;text-decoration:none}
  .nav-links a.active{color:var(--ink);font-weight:600}
  .nav-links a:hover{color:var(--ink)}

  /* ---------- header band ---------- */
  .wrap{max-width:1240px;margin:0 auto;padding:0 32px}
  .back{
    display:inline-flex;align-items:center;gap:7px;
    color:var(--ink-3);font-size:14px;font-weight:500;
    text-decoration:none;margin:34px 0 26px;
  }
  .back:hover{color:var(--ink)}
  .back svg{width:15px;height:15px}

  .head h1{
    font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1.05;
    max-width:760px;
  }
  .head .sub{
    margin-top:16px;font-size:18px;color:var(--ink-2);max-width:560px;
  }

  .meta-row{
    display:flex;gap:54px;flex-wrap:wrap;
    margin:34px 0 30px;padding:22px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .meta-row .m-label{
    font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
  }
  .meta-row .m-val{font-size:17px;font-weight:700}

  /* inspiration callout */
  .callout{
    background:var(--pink-soft);
    border-radius:var(--radius);
    padding:20px 22px;
    display:flex;gap:15px;
    margin-bottom:40px;
  }
  .callout .badge{
    width:26px;height:26px;border-radius:50%;
    background:var(--pink);color:#fff;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:700;line-height:1;
  }
  .callout .c-title{font-weight:700;font-size:14.5px;margin-bottom:4px}
  .callout .c-body{font-size:14px;color:var(--ink-2);max-width:780px}
  .callout .c-body strong{color:var(--ink);font-weight:600}

  /* ---------- operator-only gallery ---------- */
  .gallery{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:14px;
    margin-bottom:36px;
  }
  .gtile{
    position:relative;border-radius:var(--radius);overflow:hidden;
    background-size:cover;background-position:center;
    min-height:340px;
  }
  .gtile.lead{grid-row:span 1}
  .gtile::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(15,15,16,.55) 0%,rgba(15,15,16,0) 42%);
  }
  .gtile .g-meta{
    position:absolute;left:16px;right:16px;bottom:15px;z-index:2;
    color:#fff;
  }
  .gtile .g-role{
    font-size:10.5px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;opacity:.85;margin-bottom:3px;
  }
  .gtile .g-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
  .gtile .g-chip{
    position:absolute;left:14px;top:14px;z-index:2;
    background:rgba(255,255,255,.92);color:var(--ink);
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:6px 11px;border-radius:7px;
  }
  @media (max-width:1080px){
    .gallery{grid-template-columns:1fr 1fr;}
    .gtile{min-height:240px}
    .gtile.lead{grid-column:span 2}
  }
  @media (max-width:640px){
    .gallery{grid-template-columns:1fr;}
    .gtile.lead{grid-column:span 1}
    .gtile{min-height:220px}
  }

  /* ---------- two-column scroll layout ---------- */
  .layout{
    display:grid;
    grid-template-columns:1fr 480px;
    gap:64px;
    padding-bottom:120px;
  }

  /* left: narrative spine */
  .narrative{position:relative;padding-left:46px}
  /* the vertical line */
  .narrative::before{
    content:"";position:absolute;left:13px;top:8px;bottom:30px;
    width:2px;background:var(--line);
  }

  .section-label{
    font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);
    margin:0 0 20px;
  }

  .day-region{
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--pink);
    margin:18px 0 14px;
  }
  .day-region:first-of-type{ margin-top:0; }

  .leg{position:relative;padding-bottom:54px}
  .leg:last-child{padding-bottom:0}

  /* marker on the spine */
  .marker{
    position:absolute;left:-46px;top:2px;
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;
    background:#fff;border:2px solid var(--line);
    color:var(--ink-3);
    transition:all .35s ease;
  }
  /* open / loose moments — hollow dot, no number */
  .marker.open{
    width:14px;height:14px;left:-39px;top:9px;
    border:2px solid var(--line);background:#fff;
  }
  /* operator anchor — pink dot matching the map markers */
  .marker.anchor{
    background:var(--pink);
    border-color:var(--pink);
    color:transparent;
    width:16px;height:16px;
    left:-39px;top:9px;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
    transition:transform .25s ease,box-shadow .25s ease;
  }
  .leg.is-active .marker.anchor{
    transform:scale(1.18);
    box-shadow:0 0 0 6px rgba(236,61,110,.18);
  }
  .leg.is-active .marker.open{
    border-color:var(--pink);
  }

  .leg-day{
    font-size:12px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--pink);
    margin-bottom:6px;
  }
  .leg h3{
    font-size:23px;font-weight:700;letter-spacing:-.02em;
    margin-bottom:12px;line-height:1.25;
  }
  .leg p{
    font-size:16px;color:var(--ink-2);margin-bottom:14px;
  }
  .leg p:last-child{margin-bottom:0}
  .leg p em{
    color:var(--ink-3);font-style:italic;
  }

  /* operator anchor block — the ONLY place a photo appears */
  .anchor-card{
    margin-top:18px;border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;
    background:#fff;
    /* min touch target height ensured by anchor-body padding */
    min-height:44px;
  }
  .anchor-photo{
    height:200px;position:relative;
    background-size:cover;background-position:center;
  }
  .anchor-photo .tag{
    position:absolute;left:14px;top:14px;
    background:rgba(15,15,16,.82);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;
    padding:6px 11px;border-radius:7px;
    backdrop-filter:blur(4px);
  }
  .anchor-body{padding:18px 20px 20px}
  .anchor-body .a-name{font-size:17px;font-weight:700;margin-bottom:4px}
  .anchor-body .a-role{
    font-size:13px;color:var(--ink-3);font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;
  }
  .anchor-body .a-desc{font-size:14.5px;color:var(--ink-2)}
  .anchor-body .a-covered{
    margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);
    font-size:13.5px;color:var(--ink-2);
  }
  .anchor-body .a-covered b{color:var(--ink);font-weight:600}

  /* Creator's locked-in operator card variant. Used for legs the
     creator brought in themselves (their own hotel, car, activity).
     Visually distinct from Airmango-covered anchor cards: slate
     tint, "Yours · already locked in" tag instead of "Covered". */
  .creator-card{
    margin-top:18px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#fff;
    min-height:44px;
  }
  .creator-photo{
    height:120px;
    position:relative;
    background-size:cover;
    background-position:center;
  }
  .creator-tag{
    position:absolute;
    left:14px;
    top:14px;
    background:rgba(74, 82, 94, 0.85);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:6px 11px;
    border-radius:7px;
    backdrop-filter:blur(4px);
  }
  .creator-body{padding:18px 20px 20px}
  .creator-body .c-name{
    font-size:17px;
    font-weight:700;
    margin-bottom:4px;
  }
  .creator-body .c-role{
    font-size:13px;
    color:var(--ink-3);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-bottom:10px;
  }
  .creator-body .c-notes{
    font-size:14.5px;
    color:var(--ink-2);
    margin-top:8px;
    line-height:1.5;
  }

  /* Spine marker variant — same size as the anchor pink dot, slate fill */
  .marker.creator{
    background:#4a525e;
    border-color:#4a525e;
    color:transparent;
    width:16px;height:16px;
    left:-39px;top:9px;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
    transition:transform .25s ease,box-shadow .25s ease;
  }
  .leg.is-active .marker.creator{
    transform:scale(1.18);
    box-shadow:0 0 0 6px rgba(74, 82, 94, 0.18);
  }

  .open-hint{
    margin-top:10px;font-size:14px;color:var(--ink-3);
    font-style:italic;
  }

  /* ---------- right: sticky map + brief ---------- */
  .rail{position:relative}
  .rail-sticky{
    position:sticky;top:96px;
    display:flex;flex-direction:column;gap:20px;
  }

  .map-shell{
    border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;
    background:var(--map-water);
  }
  .map-shell #map{
    height:440px;
    display:block;
  }
  .map-cap{
    padding:11px 14px;font-size:12px;color:var(--ink-3);
    background:#fff;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
  }
  .map-cap b{color:var(--ink-2);font-weight:600}

  /* content brief card */
  .brief{
    border:1px solid var(--line);border-radius:var(--radius);
    padding:24px;
  }
  .brief .b-eyebrow{
    font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--pink);margin-bottom:12px;
  }
  .brief .b-free{font-size:25px;font-weight:800;letter-spacing:-.02em}
  .brief .b-free span{color:var(--pink)}
  .brief .b-note{font-size:13.5px;color:var(--ink-3);margin:7px 0 20px}
  .brief .b-row{
    display:flex;justify-content:space-between;
    font-size:14px;padding:11px 0;border-top:1px solid var(--line-2);
  }
  .brief .b-row:first-of-type{border-top:none}
  .brief .b-row .k{color:var(--ink-3)}
  .brief .b-row .v{font-weight:700}
  .brief .cta{
    display:block;width:100%;margin-top:20px;
    background:var(--pink);color:#fff;border:none;
    font-family:inherit;font-size:15.5px;font-weight:700;
    padding:15px;border-radius:10px;cursor:pointer;
    transition:filter .15s ease;
  }
  .brief .cta:hover{filter:brightness(1.05)}
  .brief .b-fine{
    font-size:12.5px;color:var(--ink-3);text-align:center;
    margin-top:12px;line-height:1.5;
  }

  /* ---------- responsive ---------- */
  @media (max-width:1080px){
    .layout{grid-template-columns:1fr;gap:0}
    .rail{order:-1;margin-bottom:36px}
    .rail-sticky{position:relative;top:0}
    .head h1{font-size:38px}
    .map-shell #map{height:320px}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px}
    .site-nav-inner{padding:16px 20px}
    .nav-links{display:none}
    .head h1{font-size:30px}
    .meta-row{gap:28px}
    .narrative{padding-left:38px}
    .narrative::before{left:9px}
    .marker{left:-38px}
    .marker.open{left:-33px}
  }

  /* ---------- skeleton loader ---------- */
  .skeleton{
    padding:60px 0;
    display:flex;flex-direction:column;gap:18px;
  }
  .skel-bar{
    background:linear-gradient(90deg,#f0f0f2,#e0e0e4,#f0f0f2);
    background-size:200% 100%;
    border-radius:8px;
  }
  .skel-bar.tall  { height:48px; max-width:600px; }
  .skel-bar.short { height:18px; max-width:280px; }
  .skel-bar.map   { height:320px; max-width:100%; }

  /* page entrance fade — applied to the content wrapper after render */
  .page-enter{
    opacity:0;
    transform:translateY(8px);
  }
  .page-entered{
    opacity:1;
    transform:translateY(0);
  }
  /* skeleton fade-out class */
  .skeleton.fading{
    opacity:0;
    pointer-events:none;
  }

  /* ---------- Mapbox GL marker states (anchor pins on the real map) ---------- */

  .map-marker-dot{
    width:16px;height:16px;border-radius:50%;
    background:var(--pink);
    border:3px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.18);
    cursor:pointer;
    transition:transform .18s ease;
  }
  .map-marker-dot:hover{ transform:scale(1.18); }
  /* Map dot variant — pink fill but with a thin slate border to
     distinguish from Airmango anchor dots which are pure pink. */
  .map-marker-dot.map-marker-dot-creator{
    background:var(--pink);
    border:3px solid #fff;
    outline:1px solid #4a525e;
  }

  .mapboxgl-popup.mp-pop .mapboxgl-popup-content{
    padding:0;border-radius:var(--radius);
    box-shadow:0 8px 24px rgba(15,15,16,.18);
    overflow:hidden;
  }
  .mapboxgl-popup.mp-pop .mapboxgl-popup-tip{
    border-top-color:#fff;border-bottom-color:#fff;
  }
  .map-pop{
    display:flex;align-items:stretch;
    min-width:220px;max-width:280px;
  }
  .map-pop .pop-photo{
    width:72px;flex:none;
    background-size:cover;background-position:center;
    background-color:#1f2730;
  }
  .map-pop .pop-body{
    padding:10px 14px;display:flex;flex-direction:column;justify-content:center;
  }
  .map-pop .pop-name{
    font-size:14.5px;font-weight:700;color:var(--ink);
    letter-spacing:-.01em;line-height:1.25;
  }
  .map-pop .pop-type{
    margin-top:4px;
    font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--pink);
  }

  /* ---------- all motion/transitions guarded behind prefers-reduced-motion ---------- */
  @media (prefers-reduced-motion: no-preference){
    /* skeleton pulse animation */
    @keyframes skel-pulse{
      0%  { background-position:100% 0; }
      100%{ background-position:-100% 0; }
    }

    .skel-bar{
      animation:skel-pulse 1.5s ease-in-out infinite;
    }
    .skeleton.fading{
      transition:opacity 200ms ease-out;
    }
    .page-entered{
      transition:opacity 400ms ease-out 60ms,transform 400ms ease-out 60ms;
    }
  }

  /* ---------- hover lift on anchor cards (desktop pointer only) ---------- */
  @media (hover: hover){
    .anchor-card{
      transition:
        transform 220ms cubic-bezier(.4,0,.2,1),
        box-shadow 220ms ease-out;
    }
    .anchor-card:hover{
      transform:translateY(-2px);
      box-shadow:0 6px 18px rgba(15,15,16,.08);
    }
  }

  /* ---------- mobile-specific overrides (<=640px) ---------- */
  @media (max-width:640px){

    /* The baseline already collapses .layout to single-column and
       reorders .rail to appear above .narrative. Map shows once at
       the top and scrolls naturally with the page — the standard
       mobile reading pattern. Sticky-map was tried in commits
       8bf4176, b529721, c1c3f4c, 49eab1f and reverted: the rail
       (containing both #map and the content brief) was always taller
       than the viewport once top:60px was applied, which makes
       position:sticky fall back to natural flow. Trying to split
       the rail into separate sticky vs scrolling pieces added more
       complexity than the marginal UX benefit was worth. */

    /* map height shorter so the spine starts higher on small screens */
    .map-shell #map{height:260px}
  }