/* =============================================================================
   before you go · world.css — homepage globe + country/city hubs
   Shared across Home / country hub / city hub. Tokens only (var(--*)).
   Reuses .site-head/.brand/.nav, .pin/.pin__tip, .index-grid/.place-card,
   .kicker, .wrap from base.css + components.css. Raw hex lives ONLY in the
   inline SVG globe/map art (in the HTML/JS), never here. --accent = ACTION only.
   ============================================================================= */

/* ---------- prototype banner (local sample marker) ---------- */
.proto{
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; padding:7px;
}

/* ---------- shared layout helper ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* =============================================================================
   HEADER — faceless wordmark + category roadmap tabs + locale + alerts
   ============================================================================= */
.site-head{ border-bottom:1px solid var(--hair); background:color-mix(in srgb, var(--paper) 86%, transparent); position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.1) blur(8px); }
.site-head__row{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); height:64px; }
/* b4ugo brand lockup — B4 stamp + two-line wordmark (mirrors base.css) */
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand__stamp{ width:30px; height:30px; flex:none; border-radius:24%; background:var(--ink); display:grid; place-items:center; }
.brand__stamp span{ font-family:var(--sans); font-weight:var(--weight-bold); font-size:16px; line-height:1; letter-spacing:-.04em; color:var(--accent); }
.brand__stamp span i{ font-style:normal; color:var(--accent); }
.brand__txt{ display:flex; flex-direction:column; gap:1px; }
.brand__name{ font-family:var(--display); font-size:21px; font-weight:var(--weight-display); letter-spacing:-.022em; line-height:1; color:var(--ink); white-space:nowrap; }
.brand__name .dot{ color:var(--accent); }
.brand__sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft); }
.brand__sub b{ color:var(--accent); font-weight:var(--weight-medium); }
.brand>.dot{ color:var(--accent); }

/* category roadmap: Travel live, others greyed "soon" (NOT clickable) */
.cats{ display:flex; align-items:center; gap:4px; }
.cat{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); padding:7px 11px; border:1px solid transparent; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:7px; transition:color .2s, border-color .2s, background .2s;
  background:none; border-radius:2px;  /* button reset (cat 现可为可点筛选按钮) */
}
button.cat--on{ cursor:pointer; }
button.cat--on:hover{ border-color:var(--hair-strong); }
.cat--on{ color:var(--ink); border-color:var(--hair-strong); }
.cat--on[aria-pressed="true"]{ color:var(--paper); background:var(--ink); border-color:var(--ink); }
.cat--soon{ color:var(--ink-mute); cursor:default; }
.cat--soon .cat__tag{
  font-size:8.5px; letter-spacing:.12em; color:var(--ink-mute);
  border:1px solid var(--hair); padding:1px 4px;
}
.cat--soon:hover{ color:var(--ink-mute); }
.cats[hidden]{ display:none; }

.site-head .nav{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); margin-inline-start:auto; }
.site-head .nav a{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); transition:color .2s; }
.site-head .nav a:hover{ color:var(--accent); }
.nav-hide{ }
.locale-switch button{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft);
  background:none; border:1px solid var(--hair-strong); padding:7px 10px; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.locale-switch button:hover{ color:var(--ink); border-color:var(--ink-mute); }
.locale-switch{ white-space:nowrap; }   /* mobile: ZH · EN · FR stays on one line (Lumi 2026-06-13 screenshot) */
.nav-cta{
  font-family:var(--mono); font-size:11px !important; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent) !important; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding:8px 13px; transition:background .2s, border-color .2s;
}
.nav-cta:hover{ background:var(--accent-wash); border-color:var(--accent); }

@media (max-width:1080px){ .cats{ display:none; } }
@media (max-width:680px){ .site-head .nav .nav-hide{ display:none; } }

/* =============================================================================
   HERO — one restrained editorial line, straight into the map
   ============================================================================= */
.home-hero{ padding:clamp(20px,3vw,34px) 0 clamp(8px,1.4vw,14px); }
.home-hero__eyebrow{ margin-bottom:11px; }
.home-hero h1{
  font-family:var(--display); font-weight:400; letter-spacing:-.02em; line-height:1.0;
  font-size:clamp(32px,4.6vw,54px); color:var(--ink); margin:0 0 11px; max-width:16ch; text-wrap:balance;
}
.home-hero h1 em{ font-style:italic; color:var(--accent); }
.home-hero .lede{ max-width:62ch; color:var(--ink-soft); font-size:clamp(15px,1.3vw,17px); line-height:1.5; }

/* =============================================================================
   GLOBE STAGE — sphere on the left, search + featured rail on the right
   ============================================================================= */
.stage-wrap{ padding-block:clamp(6px,1.5vw,14px) clamp(36px,5vw,64px); }
.stage{
  display:grid; grid-template-columns:1fr minmax(280px,360px);
  gap:clamp(22px,4vw,56px); align-items:center;
}

/* the globe sphere — circular paper/ink orb */
.globe-panel{ position:relative; }
.globe{
  position:relative; width:100%; max-width:600px; margin-inline:auto;
  aspect-ratio:1/1; cursor:grab; isolation:isolate; touch-action:none;
}
.globe:active{ cursor:grabbing; }
.globe__svg{ position:absolute; inset:0; width:100%; height:100%; display:block;
  border-radius:50%;
  box-shadow:
    inset -30px -20px 64px color-mix(in srgb, var(--ink) 13%, transparent),
    inset  24px  18px 46px color-mix(in srgb, var(--paper) 60%, transparent),
    0 24px 64px -28px color-mix(in srgb, var(--ink) 30%, transparent);
}
/* atmosphere ring */
.globe::before{
  content:""; position:absolute; inset:-2.5%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle at 38% 32%, transparent 60%, color-mix(in srgb, var(--accent) 8%, transparent) 78%, transparent 86%);
}

/* pin overlay layer — pins positioned each frame by JS (left/top %) */
.globe__pins{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.globe__pins .pin{ pointer-events:auto; }
.globe__pins .pin__disc{ width:42px; height:42px; }
.globe__pins .pin::after{ display:none; }
/* back-of-sphere pins fade out + ignore pointer */
.globe__pins .pin[data-back="1"]{ opacity:0; pointer-events:none; }
.globe__pins .pin{ transition:opacity .25s ease; }
.globe__pins .pin.pin--dim{ opacity:.18; pointer-events:none; }  /* 板块筛选:非当前板块的 pin 淡出 */
@media (max-width:760px){
  .globe__pins .pin__disc{ width:34px; height:34px; }
  /* dense clusters (Italy x5...) collide on small screens: only the overview representative
     pins keep labels, the rest stay as tappable dots with the full tooltip on tap. */
  .globe__pins .pin:not(.pin--over) .pin__label,
  .atlas-flat .pin:not(.pin--over) .pin__label{ display:none; }
}

/* controls under the globe */
.globe__controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.globe__btn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); background:none; border:1px solid var(--hair-strong); padding:7px 12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:color .2s, border-color .2s, background .2s;
}
.globe__btn:hover{ color:var(--ink); border-color:var(--ink-mute); }
.globe__btn[aria-pressed="true"]{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-wash); }
.globe__hint{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-mute); }

/* flat atlas fallback (also the "flat" map-form tweak) — hidden by default */
.atlas-flat{ display:none; position:relative; width:100%; aspect-ratio:1000/620;
  border:1px solid var(--hair); background:var(--paper); overflow:hidden; isolation:isolate;
  box-shadow:0 1px 0 var(--hair), 0 24px 60px -42px color-mix(in srgb, var(--ink) 40%, transparent); }
.atlas-flat__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
[data-mapform="flat"] .globe{ display:none; }
[data-mapform="flat"] .globe__controls .globe__btn--spin{ display:none; }
[data-mapform="flat"] .atlas-flat{ display:block; }
[data-mapform="flat"] .atlas-flat .globe__pins{ }

/* =============================================================================
   SIDEBAR — search + featured rail
   ============================================================================= */
.stage-side{ display:flex; flex-direction:column; gap:24px; }
.side-block__lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 10px; }

.gsearch{ position:relative; }
.gsearch__field{ display:flex; border:1px solid var(--hair-strong); background:var(--paper); transition:border-color .2s; }
.gsearch__field:focus-within{ border-color:var(--ink); }
.gsearch__field input{ flex:1; min-width:0; background:transparent; border:0; font-family:var(--sans); font-size:15px; color:var(--ink); padding:13px 15px; outline:none; }
.gsearch__field input::placeholder{ color:var(--ink-mute); }
.gsearch__btn{ background:transparent; border:0; border-inline-start:1px solid var(--hair); padding:0 15px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; transition:background .2s; }
.gsearch__btn:hover{ background:var(--accent-wash); }
.gsearch__suggest{ position:absolute; top:calc(100% + 2px); inset-inline:0; z-index:30;
  background:var(--paper); border:1px solid var(--hair-strong);
  box-shadow:0 14px 30px -18px color-mix(in srgb, var(--ink) 30%, transparent);
  list-style:none; margin:0; padding:4px 0; max-height:248px; overflow-y:auto; display:none; }
.gsearch__suggest.open{ display:block; }
.gsearch__suggest li a{ display:flex; align-items:center; gap:11px; padding:9px 14px; cursor:pointer; transition:background .15s; }
.gsearch__suggest li a:hover, .gsearch__suggest li a.active{ background:var(--paper-2); }
.gsearch__suggest .s-badge{ width:30px; height:30px; flex:none; border-radius:50%; border:1px solid var(--hair); overflow:hidden; background:var(--paper-2); }
.gsearch__suggest .s-badge img{ width:100%; height:100%; object-fit:cover; }
.gsearch__suggest .s-name{ font-family:var(--display); font-size:15px; color:var(--ink); line-height:1.1; }
.gsearch__suggest .s-crumb{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-inline-start:auto; }
.gsearch__empty{ padding:11px 14px; font-family:var(--mono); font-size:11px; color:var(--ink-mute); }

/* featured rail */
.featured{ display:flex; flex-direction:column; gap:7px; }
.feat{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  border:1px solid var(--hair); background:var(--paper); cursor:pointer; text-decoration:none;
  transition:border-color .2s, background .2s, transform .2s;
}
.feat:hover{ border-color:var(--hair-strong); background:var(--paper-2); transform:translateX(2px); }
.feat[aria-current="true"]{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-wash); }
.feat__badge{ width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--hair); overflow:hidden; background:var(--paper-2); }
.feat__badge img{ width:100%; height:100%; object-fit:cover; }
.feat__info{ min-width:0; flex:1; }
.feat__name{ font-family:var(--display); font-size:16px; line-height:1.1; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feat__meta{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
.feat__arrow{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); flex:none; transition:color .2s, transform .2s; }
.feat:hover .feat__arrow{ color:var(--accent); transform:translateX(3px); }

@media (max-width:880px){
  .stage{ grid-template-columns:1fr; }
  .stage-side{ flex-direction:column; }
  /* featured 改用全宽 place-card → 移动端保持单列堆叠(不再 row-wrap) */
}

/* =============================================================================
   OPTIONAL "this week" preview card (hero hook) — hidden unless tweak on
   ============================================================================= */
.spotlight{ display:none; border:1px solid var(--hair-strong); background:var(--paper);
  box-shadow:0 2px 0 var(--hair), 0 22px 44px -32px color-mix(in srgb, var(--ink) 50%, transparent); }
[data-spotlight="on"] .spotlight{ display:block; }
.spotlight__row{ display:flex; align-items:center; gap:11px; padding:13px 15px 11px; border-bottom:1px solid var(--hair); }
.spotlight__badge{ width:40px; height:40px; flex:none; border-radius:50%; border:1px solid var(--hair); overflow:hidden; background:var(--paper-2); }
.spotlight__badge img{ width:100%; height:100%; object-fit:cover; }
.spotlight__kicker{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 2px; }
.spotlight__place{ font-family:var(--display); font-size:16px; color:var(--ink); margin:0; line-height:1.1; }
.spotlight__body{ padding:12px 15px 14px; }
.spotlight__head{ font-family:var(--display); font-weight:440; font-size:17px; line-height:1.2; margin:0 0 8px; letter-spacing:-.01em; }
.spotlight__text{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0 0 12px; }
.spotlight__text b{ color:var(--ink); }
.spotlight__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.spotlight__cta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:inline-flex; gap:7px; align-items:center; transition:gap .2s; }
.spotlight__cta:hover{ gap:11px; }
.spotlight__chk{ font-family:var(--mono); font-size:9.5px; color:var(--ink-mute); }
.spotlight__chk::before{ content:"✓ "; color:var(--insight-tip-rule); }

/* =============================================================================
   PLACE INDEX — grouped by COUNTRY (the drilldown target)
   ============================================================================= */
.index-wrap{ padding-block:clamp(8px,2vw,20px) clamp(44px,6vw,80px); }
.index-top{ display:flex; align-items:baseline; gap:16px; padding-bottom:14px; margin-bottom:8px; border-bottom:1px solid var(--hair-strong); }
.index-top h2{ font-family:var(--display); font-weight:400; font-size:clamp(22px,2.8vw,32px); color:var(--ink); letter-spacing:-.014em; margin:0; }
.index-top h2 em{ font-style:italic; color:var(--accent); }
.index-top__filter{ margin-inline-start:auto; display:flex; align-items:center; gap:8px; }
.index-top__clear{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); background:none; border:1px solid var(--hair); padding:6px 10px; cursor:pointer; display:none; transition:color .2s, border-color .2s; }
.index-top__clear:hover{ color:var(--accent); border-color:var(--hair-strong); }
.index-top__clear.show{ display:inline-flex; }

.region{ margin-top:clamp(26px,3.5vw,42px); scroll-margin-top:80px; }
.region[hidden]{ display:none; }
.region__head{ display:flex; align-items:baseline; gap:13px; margin-bottom:16px; }
.region__flag{ width:8px; height:8px; border-radius:50%; background:var(--ph-tint,var(--hair-strong)); border:1px solid var(--hair-strong); flex:none; align-self:center; }
.region__name{ font-family:var(--display); font-size:clamp(19px,2.3vw,25px); color:var(--ink); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:10px; }
.region__name a{ transition:color .2s; }
.region__name a:hover{ color:var(--accent); }
.natflag{ display:inline-flex; flex:none; }
.natflag svg{ display:block; border:1px solid var(--hair-strong); border-radius:1.5px; box-shadow:0 1px 2px -1px color-mix(in srgb, var(--ink) 34%, transparent); }
.region__count{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-inline-start:auto; }
.region__count a{ color:var(--accent); }

.index-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; }
/* 微缩图满铺左侧方块(原本是 54px 圆 badge + 大留白)→ 图片前置、卡片更像一块「微缩世界」瓷砖 */
.place-card{ display:flex; align-items:stretch; gap:0; border:1px solid var(--hair); background:var(--paper); padding:0; overflow:hidden; min-height:96px; text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s; }
.place-card:hover{ border-color:var(--hair-strong); box-shadow:0 10px 26px -18px color-mix(in srgb, var(--ink) 28%, transparent); transform:translateY(-2px); }
.place-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.place-card--soon{ opacity:.86; }
.place-card__badge{ width:96px; height:auto; flex:none; align-self:stretch; border:0; border-inline-end:1px solid var(--hair); border-radius:0; background:var(--paper-2); overflow:hidden; box-shadow:none; }
.place-card__badge img{ width:100%; height:100%; object-fit:cover; border-radius:0; display:block; }
.place-card__badge--ph{ position:relative; }
.place-card__badge--ph::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 120%, color-mix(in srgb, var(--ph-tint,var(--accent)) 30%, transparent), transparent 62%),
    linear-gradient(168deg, var(--paper-2), var(--paper-3)); }
.place-card__info{ min-width:0; flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; }
.place-card__name{ font-family:var(--display); font-size:18px; line-height:1.12; color:var(--ink); }
.place-card__country{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
.place-card__row{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.place-card__guides{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-soft); }
.place-card__guides.live::before{ content:"✓ "; color:var(--insight-tip-rule); font-weight:600; }
.place-card__guides.soon{ color:var(--ink-mute); }
.place-card__decide{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-inline-start:auto; white-space:nowrap; display:inline-flex; align-items:center; gap:.45em; transition:gap .2s; }
.place-card:hover .place-card__decide{ gap:.75em; }
.place-card__decide.soon{ color:var(--ink-mute); }

@media (max-width:560px){ .stage-wrap .atlas-flat, .stage-wrap .globe{ } .index-grid{ grid-template-columns:1fr; } }

/* =============================================================================
   HUB PAGES — country + city
   ============================================================================= */
.hubcrumb{ padding-top:clamp(20px,3vw,30px); }
.hubcrumb__row{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.hubcrumb__row a{ color:var(--ink-soft); transition:color .2s; }
.hubcrumb__row a:hover{ color:var(--accent); }
.hubcrumb__sep{ color:var(--hair-strong); }
.hubcrumb__here{ color:var(--ink); }

.hub-hero{ padding:clamp(20px,3vw,34px) 0 clamp(20px,3vw,30px); }
.hub-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; }
.hub-hero__eyebrow{ margin-bottom:14px; }
.hub-hero h1{ font-family:var(--display); font-weight:400; letter-spacing:-.02em; line-height:1.0; font-size:clamp(38px,6vw,68px); color:var(--ink); margin:0 0 16px; }
.hub-hero h1 em{ font-style:italic; color:var(--accent); }
.hub-hero .lede{ max-width:48ch; color:var(--ink-soft); font-size:clamp(16px,1.5vw,19px); line-height:1.55; margin:0 0 22px; }
.hub-hero__stats{ display:flex; gap:0; border:1px solid var(--hair-strong); width:fit-content; }
.hub-hero__stat{ padding:11px 18px; }
.hub-hero__stat + .hub-hero__stat{ border-inline-start:1px solid var(--hair); }
.hub-hero__stat dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:3px; }
.hub-hero__stat dd{ margin:0; font-family:var(--display); font-size:21px; color:var(--ink); }

/* the focused regional map sits in the hub hero */
.hub-map{ position:relative; width:100%; aspect-ratio:1/1; max-width:440px; margin-inline:auto; isolation:isolate; }
.hub-map__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:50%;
  box-shadow:
    inset -24px -16px 52px color-mix(in srgb, var(--ink) 12%, transparent),
    inset  18px  14px 38px color-mix(in srgb, var(--paper) 60%, transparent),
    0 20px 52px -26px color-mix(in srgb, var(--ink) 28%, transparent); }
.hub-map .globe__pins .pin__disc{ width:38px; height:38px; }

@media (max-width:880px){ .hub-hero__grid{ grid-template-columns:1fr; } .hub-map{ order:-1; max-width:340px; } }

/* hub section shells */
.hub-sec{ padding-block:clamp(34px,5vw,64px); border-top:1px solid var(--hair); }
.hub-sec__head{ margin-bottom:clamp(22px,3vw,34px); }
.hub-sec__head h2{ font-family:var(--display); font-weight:400; font-size:clamp(24px,3vw,38px); color:var(--ink); letter-spacing:-.014em; margin:0; }
.hub-sec__head h2 em{ font-style:italic; color:var(--accent); }
.hub-sec__head .lede{ color:var(--ink-soft); max-width:58ch; margin-top:12px; font-size:16px; }

/* city list within a country hub */
.citygrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.citycard{ display:flex; flex-direction:column; border:1px solid var(--hair); background:var(--paper); text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s; }
.citycard:hover{ border-color:var(--hair-strong); box-shadow:0 12px 28px -18px color-mix(in srgb, var(--ink) 26%, transparent); transform:translateY(-2px); }
.citycard--soon{ opacity:.84; }
.citycard__scene{ aspect-ratio:16/8; position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(130% 110% at 50% 120%, color-mix(in srgb, var(--ph-tint,var(--accent)) 26%, transparent), transparent 62%),
    linear-gradient(168deg, var(--paper-2), var(--paper-3)); }
.citycard__scene::after{ content:""; position:absolute; inset:-10%; z-index:-1; opacity:.5;
  background-image:repeating-radial-gradient(circle at 50% 96%, transparent 0 24px, color-mix(in srgb, var(--ink) 5%, transparent) 24px 25px); }
.citycard__badge{ position:absolute; left:16px; bottom:-22px; width:56px; height:56px; border-radius:50%; border:2px solid var(--paper); overflow:hidden; background:var(--paper-2); box-shadow:0 3px 8px -2px color-mix(in srgb, var(--ink) 30%, transparent); }
.citycard__badge img{ width:100%; height:100%; object-fit:cover; }
.citycard__tag{ position:absolute; right:12px; top:12px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:color-mix(in srgb, var(--paper) 82%, transparent); border:1px solid var(--hair); padding:4px 8px; }
.citycard__body{ padding:30px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.citycard__name{ font-family:var(--display); font-size:22px; line-height:1.08; color:var(--ink); letter-spacing:-.012em; }
.citycard__dek{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.citycard__foot{ margin-top:auto; padding-top:13px; border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.citycard__count{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-soft); }
.citycard__count.live::before{ content:"✓ "; color:var(--insight-tip-rule); font-weight:600; }
.citycard__count.soon{ color:var(--ink-mute); }
.citycard__go{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.45em; transition:gap .2s; }
.citycard:hover .citycard__go{ gap:.75em; }
.citycard__go.soon{ color:var(--ink-mute); }

/* attraction / node list (city hub) — reuse place-card grid */
.nodelist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

/* small trust line shared on hubs */
.trustline{ display:flex; flex-wrap:wrap; gap:10px 14px; padding-top:6px; }
.trustline__item{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-soft); border:1px solid var(--hair); padding:7px 11px; }
.trustline__item::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--insight-tip-rule); flex:none; }

/* =============================================================================
   FOOTER — faceless
   ============================================================================= */
.home-foot{ border-top:1px solid var(--hair); padding:38px 0 50px; }
.home-foot__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 30px; }
.home-foot__brand{ font-family:var(--display); font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.home-foot__brand .dot{ color:var(--accent); }
.home-foot__links{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-inline-start:auto; }
.home-foot__links a{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft); transition:color .2s; }
.home-foot__links a:hover{ color:var(--accent); }
.home-foot__note{ font-family:var(--mono); font-size:10.5px; color:var(--ink-mute); margin-top:16px; max-width:64ch; line-height:1.6; }

/* =============================================================================
   SIDEBAR ZOOM LEVELS — featured (L0) ↔ country panel ↔ place panel
   ============================================================================= */
.detail{ display:none; flex-direction:column; gap:14px; }
[data-zoom="country"] .side-l0, [data-zoom="place"] .side-l0{ display:none; }
[data-zoom="country"] .detail, [data-zoom="place"] .detail{ display:flex; }
.detail__back{ align-self:flex-start; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:none; border:1px solid var(--hair-strong); padding:7px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:color .2s, border-color .2s; }
.detail__back:hover{ color:var(--accent); border-color:var(--ink-mute); }

/* country panel */
.cpanel{ display:flex; flex-direction:column; gap:14px; }
.cpanel__head{ display:flex; align-items:center; gap:11px; }
.cpanel__flag svg{ display:block; border:1px solid var(--hair-strong); border-radius:1.5px; }
.cpanel__name{ font-family:var(--display); font-size:26px; color:var(--ink); letter-spacing:-.014em; }
.cpanel__lede{ font-size:14px; line-height:1.5; color:var(--ink-soft); margin:0; }
.cpanel__list{ display:flex; flex-direction:column; gap:7px; }
.cprow{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--hair); background:var(--paper); cursor:pointer; text-align:start; width:100%; transition:border-color .2s, background .2s, transform .2s; }
.cprow:hover{ border-color:var(--hair-strong); background:var(--paper-2); transform:translateX(2px); }
.cprow__badge{ width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--hair); overflow:hidden; background:var(--paper-2); }
.cprow__badge img{ width:100%; height:100%; object-fit:cover; }
.cprow__info{ min-width:0; flex:1; }
.cprow__name{ font-family:var(--display); font-size:16px; color:var(--ink); line-height:1.1; }
.cprow__meta{ font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
.cprow__meta.live{ color:var(--insight-tip-ink); }
.cprow__arrow{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); flex:none; transition:color .2s, transform .2s; }
.cprow:hover .cprow__arrow{ color:var(--accent); transform:translateX(3px); }
.cpanel__hub{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); display:inline-flex; gap:7px; align-items:center; width:fit-content; transition:gap .2s; }
.cpanel__hub:hover{ gap:11px; }

/* place panel */
.ppanel{ display:flex; flex-direction:column; border:1px solid var(--hair-strong); background:var(--paper);
  box-shadow:0 2px 0 var(--hair), 0 22px 44px -32px color-mix(in srgb, var(--ink) 50%, transparent); }
/* diorama 满铺面板顶部(原本是渐变框里浮一个圆盘 disc,四周大留白)→ 微缩图直接占满 */
.ppanel__scene{ aspect-ratio:4/5; position:relative; overflow:hidden; isolation:isolate; display:block; background:var(--paper-2); }
.ppanel__scene img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ppanel__b{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; }
/* match the "← FRANCE" back-button styling so the two country labels read identically */
.ppanel__country{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0; }
.ppanel__name{ font-family:var(--display); font-size:21px; line-height:1.1; color:var(--ink); margin:0; letter-spacing:-.012em; }
.ppanel__blurb{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.ppanel__blurb b{ color:var(--ink); }
.ppanel__meta{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-mute); }
.ppanel__meta.live::before{ content:"✓ "; color:var(--insight-tip-rule); font-weight:600; }
.ppanel__cta{ margin-top:4px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); padding:12px 14px; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .2s; }
.ppanel__cta:hover{ background:var(--accent-deep); }
.ppanel__cta.soon{ color:var(--accent); background:var(--accent-wash); }

/* =============================================================================
   reduced motion — globe never auto-spins
   ============================================================================= */
@media (prefers-reduced-motion: reduce){
  .feat, .place-card, .citycard{ transition:none; }
}

/* Pin popup redesign (Lumi 2026-06-15): diorama image-forward, opaque & above the label, click-to-open */
.globe__pins .pin__tip, .atlas-flat .pin__tip{
  width: 210px; padding: 0; overflow: hidden; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--hair-strong);
  box-shadow: 0 16px 40px rgba(40,30,20,.24); z-index: 80;
}
.pin__tip-go{ display:block; position:relative; cursor:pointer; text-decoration:none; }
.pin__tip-img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--paper-2); }
.pin__tip-img--soon{ display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; background:var(--paper-2); }
.pin__tip-img--soon img{ width:46px; height:46px; object-fit:contain; opacity:.55; }
.pin__tip-open{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:rgba(25,22,18,.72); color:#fff; font-size:14px;
  opacity:0; transform:translateY(-3px); transition:opacity .15s ease, transform .15s ease; }
.pin__tip-go:hover .pin__tip-open, .pin__tip-go:focus-visible .pin__tip-open{ opacity:1; transform:translateY(0); }
.pin__tip-head{ padding:9px 12px 0; }
.pin__tip-cta{ display:block; padding:4px 12px 11px; color:var(--accent); font-family:var(--mono); font-size:11px; letter-spacing:.04em; }

/* R20 city-map hub: real map (Leaflet + Carto light, sepia-toned) + attraction pins */
#citymap.city-map{ width:100%; height:clamp(340px,52vw,500px); margin:18px 0 28px;
  border:1px solid var(--hair); border-radius:14px; overflow:hidden; z-index:0; }
.leaflet-container{ background:var(--paper-2); font:inherit; }
#citymap .leaflet-tile{ filter:sepia(.28) saturate(1.08) brightness(.94) contrast(1.22); }
.cm-pin span{ display:block; width:14px; height:14px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.cm-popup .leaflet-popup-content-wrapper{ border-radius:12px; padding:0; overflow:hidden; box-shadow:0 14px 36px rgba(40,30,20,.24); }
.cm-popup .leaflet-popup-content{ margin:0; width:210px !important; }
.cm-pop{ display:block; text-decoration:none; color:var(--ink); }
.cm-pop img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--paper-2); }
.cm-pop__t{ display:block; padding:9px 12px 2px; font-size:13.5px; line-height:1.3; }
.cm-pop__c{ display:block; padding:2px 12px 10px; color:var(--accent); font-size:11px; letter-spacing:.03em; }
@media (max-width:560px){ #citymap.city-map{ height:clamp(360px,90vw,520px); } }

/* Hovered pin (+ its popup) must sit above all sibling pins/labels — fixes the popup being covered */
.globe__pins .pin:hover, .globe__pins .pin:focus-within,
.atlas-flat .pin:hover, .atlas-flat .pin:focus-within,
.city-map .pin:hover, .city-map .pin:focus-within{ z-index:200; }


/* ---------- coverage band ---------- */
.coverage-wrap { background: var(--paper); border-block: 1px solid var(--hair); padding: 32px 0; }
.coverage { max-width: 920px; margin: 0 auto; }
.coverage__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.coverage__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.coverage__title { font-family: var(--display); font-size: clamp(18px, 3vw, 24px); margin: 0; font-weight: 400; }
.coverage__note { font-size: 13px; color: var(--muted); margin: 0; max-width: 320px; text-align: end; }
.coverage__grid { display: flex; gap: clamp(24px, 5vw, 60px); flex-wrap: wrap; margin: 0; }
.coverage__stat { margin: 0; }
.coverage__stat dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.coverage__stat dd { font-family: var(--display); font-size: clamp(28px, 5vw, 40px); margin: 0; font-weight: 400; color: var(--ink); }
@media (max-width: 560px) {
  .coverage__head { flex-direction: column; }
  .coverage__note { text-align: start; }
  .coverage__grid { gap: 16px 32px; }
}