/* World Beyond Home: shared brand layer. The site header and the site footer; colours, type and shapes live in
   worldlings-tokens.css. Loaded by site-shell.js on shared pages and linked directly by the homepage. */
@import url("/worldlings-tokens.css?v=9");

/* Page systems' colour tokens, remapped to World Beyond Home. ":root:root" outranks each system's own :root, whatever the load order. */
:root:root{
  --ft-ink:#16243a;--ft-ink-2:#2b3a52;--ft-ink-3:#3e4f6b;--ft-deep:#16243a;--ft-forest:#16243a;
  --ft-pine:#16243a;--ft-pine-dark:#16243a;--ft-muted:#5b6578;--ft-on-dark-muted:#c8d1df;
  --ft-line:#e3d8c3;--ft-line-strong:#c9bfa9;--ft-sand:#f6efe2;--ft-ivory:#fbf7ef;--ft-cream:#f6efe2;--ft-sun:#c8a46a;
  --ink:#16243a;--forest-mid:#1f3354;--forest-light:#eef1f6;--ocean-mid:#3e4f6b;--ocean-light:#eef1f6;
  --blue:#3e4f6b;--blue-light:#eef1f6;--blue-mid:#5b6578;--green:#16243a;--green-light:#f1e9da;
  --stone:#5b6578;--stone-light:#a9b4c6;--mist:#f1f3f7;--rule:#e3d8c3;--line-2:#c9bfa9;
}

/* Short shared pages: the area below the body matches the page, not an older tinted root background. */
html:has(>body.ft-shell-page){background:var(--wl-ivory)!important}

/* Header (drawn by site-shell.js): a dusk bar with the lantern-gold call to action. */
.ft-global-nav{min-height:72px;box-sizing:border-box;grid-template-columns:auto minmax(0,1fr) auto!important}
.ft-global-context{justify-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.ft-global-context{visibility:hidden}}
.ft-global-links{gap:6px}
.ft-global-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px}
.ft-global-links .ft-global-cta{min-height:46px;padding:0 20px;margin-left:6px}
@media(max-width:840px){.ft-global-nav{min-height:64px;padding:8px 16px}.ft-global-links .ft-global-cta{min-height:44px;padding:0 16px;font-size:15px}}
.ft-global-nav{background:rgba(22,36,58,.97)!important;border-bottom:1px solid rgba(240,180,80,.22)!important;box-shadow:0 8px 28px rgba(12,20,36,.18)!important;color:#fff;font-family:var(--wl-sans)}
.ft-global-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff!important;font:400 25px/1 var(--wl-serif);letter-spacing:-.01em;text-decoration:none!important}
.ft-global-brand img{width:auto!important;height:34px!important}
.ft-global-context{color:var(--wl-mist)!important;font:500 15px/1.3 var(--wl-sans)}
.ft-global-links a{color:#e6eaf2!important;font:600 16px/1 var(--wl-sans)}
.ft-global-links a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;text-decoration:none}
.ft-global-links a[aria-current="page"]{background:rgba(255,255,255,.08)!important;box-shadow:inset 0 -3px 0 var(--wl-lantern)!important}
.ft-global-links .ft-global-cta{background:var(--wl-lantern)!important;color:var(--wl-dusk)!important;font-weight:800!important;box-shadow:0 8px 24px rgba(240,180,80,.18)!important}
.ft-global-links .ft-global-cta:hover{background:var(--wl-lantern-hi)!important;color:var(--wl-dusk)!important}
.ft-global-nav a:focus-visible{outline:3px solid var(--wl-lantern-hi)!important;outline-offset:2px}
@media(max-width:840px){.ft-global-brand{font-size:21px}.ft-global-brand img{width:auto!important;height:30px!important}}
/* Phones keep the name next to the mark; only very narrow screens drop it. Overrides an older 480px rule that hid it. */
@media(max-width:480px){.ft-global-brand span{display:inline!important;font-size:20px}.ft-global-brand{gap:8px!important}.ft-global-brand img{width:auto!important;height:28px!important}}
@media(max-width:340px){.ft-global-brand span{display:none!important}}

/* One header (2026-11 review): logo left, four links and one button right, no section label. Under 900px the links
   move into a Menu panel so phones can still reach Explore, Guides, My trip and Help. */
.ft-global-nav{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center;column-gap:18px;position:sticky;top:0;z-index:120;padding-inline:max(16px,4.5vw)!important}
.ft-global-links{display:flex;align-items:center}
.ft-global-links a{text-decoration:none;white-space:nowrap}
.ft-global-context{display:none!important}
.ft-global-links{justify-content:flex-end;min-width:0}
.ft-global-menu-btn,.ft-global-menu{display:none}
.ft-global-menu-btn{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(246,241,233,.4);background:transparent;color:#f6f1e9;font:600 15px/1 var(--wl-sans);cursor:pointer}
.ft-global-menu-btn:hover{background:rgba(255,255,255,.08)}
.ft-global-menu-btn:focus-visible,.ft-global-menu a:focus-visible{outline:3px solid var(--wl-lantern-hi);outline-offset:2px}
@media(max-width:900px){
  .ft-global-links a:not(.ft-global-cta){display:none!important}
  .ft-global-menu-btn{display:inline-flex;align-items:center}
  .ft-global-menu:not([hidden]){display:grid;grid-column:1/-1;gap:2px;padding:8px 0 12px;border-top:1px solid rgba(246,241,233,.14);margin-top:8px}
  .ft-global-menu a{display:flex;align-items:center;min-height:48px;padding:0 4px;color:#f6f1e9!important;font:600 18px/1 var(--wl-sans);text-decoration:none}
  .ft-global-menu a[aria-current="page"]{color:var(--wl-lantern)!important}
}

/* Atlas & Pip in empty states: a small, friendly arrival (no motion for people who turn it down). */
.wl-mascot{display:block;width:min(160px,42vw);height:auto;margin:0 0 14px;animation:wl-hop .9s cubic-bezier(.3,1.4,.5,1) both}
.ft-404-page .wl-mascot{margin-inline:auto}
@keyframes wl-hop{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.wl-mascot{animation:none}}

/* 404 keeps its own header markup; give it the same dusk bar. */
.ft-404-page>header.nav{background:rgba(22,36,58,.97)!important;border-bottom:1px solid rgba(240,180,80,.22)!important}
.ft-404-page>header.nav .brand{color:#fff!important;font-family:var(--wl-serif)}
.ft-404-page>header.nav .cta{background:var(--wl-lantern)!important;color:var(--wl-dusk)!important;font-weight:800}
.ft-404-page>header.nav .cta:hover{background:var(--wl-lantern-hi)!important}

/* Footer: one shared footer; any page-specific notes sit above the links. */
.wl-footer{background:var(--wl-night);color:var(--wl-mist);font:15px/1.6 var(--wl-sans);margin-top:48px;padding:0;border-top:0}
.wl-footer .linkish{color:#e6eaf2;font-weight:600}
.wl-footer-inner{max-width:1200px;margin:0 auto;padding:44px 24px 36px;box-sizing:border-box;display:grid;gap:22px}
.wl-footer-notes{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:20px;color:#e6eaf2}
.wl-footer-notes p{margin:0 0 8px;max-width:72ch}
.wl-footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px}
.wl-footer-brand{display:inline-flex;align-items:center;gap:10px;color:#fff!important;font:400 27px/1 var(--wl-serif);text-decoration:none!important}
.wl-footer-brand img{width:auto;height:36px}
.wl-footer-tag{display:block;margin-top:6px;color:var(--wl-lantern);font:italic 500 17px/1.3 var(--wl-serif)}
.wl-footer-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.wl-footer-links a{color:#e6eaf2!important;font-weight:600;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.wl-footer-links a:hover{color:var(--wl-lantern-hi)!important;text-decoration:underline}
.wl-footer-small{margin:0;font-size:13px;color:#a9b4c6}
.wl-footer a:focus-visible{outline:3px solid var(--wl-lantern-hi);outline-offset:3px}
@media print{.wl-footer{background:none;color:#000}.wl-footer-links{display:none}}

/* Atlas & Pip as storytellers: a pose beside a moment ("then a nap", "plot twist: rain"). */
.wl-pose{display:block;width:120px;height:auto;margin:0 0 8px}
.wl-pose.wl-pose-sm{width:96px}
.wl-pose.wl-pose-lg{width:min(220px,50vw);margin-bottom:12px}
.wl-pose-row{display:flex;align-items:center;gap:12px}
.wl-pose-row .wl-pose{margin:0;flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){.wl-pose.wl-in{animation:wl-hop .9s cubic-bezier(.3,1.4,.5,1) both}}
/* On dark backgrounds they ride on an ivory sticker, like a luggage label, so their outlines stay visible.
   Sizes are locked because older home styles shrink images inside the story copy. */
.wl-pose.wl-sticker{box-sizing:border-box;background:var(--wl-ivory);border-radius:22px;padding:6px 8px;box-shadow:0 10px 26px rgba(0,0,0,.28);transform:rotate(-4deg)}
.film .wl-pose,.final .wl-pose{max-width:none!important;flex:0 0 auto}
.film .wl-pose.wl-pose-sm{width:128px!important;height:auto!important}
.film .wl-pose:not(.wl-pose-sm){width:136px!important;height:auto!important}
.final .wl-pose.wl-pose-lg{width:min(220px,50vw)!important;height:auto!important}
.film .wl-pose-row{gap:16px;margin-top:6px}

/* The four planner steps, each with its pose: the same story on the home page as in the planner. */
.wl-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:wlstep}
.wl-steps li{position:relative;background:var(--wl-paper);border:1px solid var(--wl-line);border-radius:var(--wl-r-lg);padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--wl-shadow-1)}
.wl-steps img{width:100%;max-width:190px;height:auto;align-self:center}
.wl-steps .wl-step-n{counter-increment:wlstep;font:800 var(--wl-text-xs)/1 var(--wl-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--wl-teal-ink)}
.wl-steps .wl-step-n::before{content:"Step " counter(wlstep) " · "}
.wl-steps strong{font:600 21px/1.2 var(--wl-serif);font-variation-settings:"SOFT" 100;color:var(--wl-ink)}
.wl-steps span:last-child{font:400 15px/1.5 var(--wl-sans);color:var(--wl-muted)}
@media(max-width:900px){.wl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wl-steps{grid-template-columns:minmax(0,1fr)}.wl-steps li{flex-direction:row;align-items:center;gap:12px}.wl-steps img{width:104px;flex:0 0 auto}}
/* Two-balloon mark (2026-11): keep its own near-square proportions inside the older 3:2 image boxes. */
img[src*="/branding/worldlings-mark"]{width:auto!important;object-fit:contain}

/* Explore (2026-11 review): the shared header replaces the Atlas bar. The collection bar sticks below it, the search card
   no longer tucks under that bar, the duplicate "Jump to collection" select is hidden (the tabs do the same job), and
   catalogue counts give way to the plain explanation above them. */
body.ft-explore .nav-shell{top:72px}
@media(max-width:840px){body.ft-explore .nav-shell{top:64px}}
body.ft-explore .command{margin-top:20px!important}
body.ft-explore .collection-jump-label,body.ft-explore #collectionJump{display:none!important}
body.ft-explore .hero-card .micro{display:none}
body.ft-explore .agent-toggle{margin-left:8px;border:0;background:none;padding:0;font:inherit;color:var(--wl-link);text-decoration:underline;cursor:pointer}

/* Trip pages with no saved trip: only the header, this message and the footer show. */
body.ft-no-trip>*:not(.ft-global-nav):not(.ft-no-trip-state):not(.wl-footer):not(script):not(style):not(link):not(dialog){display:none!important}
.ft-no-trip-state{box-sizing:border-box;max-width:640px;margin:clamp(48px,10vh,120px) auto;padding:0 max(16px,env(safe-area-inset-left,0px));display:grid;gap:16px;color:var(--wl-ink);font:17px/1.6 var(--wl-sans)}
.ft-no-trip-state h1{margin:0;font:400 clamp(34px,6vw,52px)/1.08 var(--wl-serif)!important;letter-spacing:-.01em;color:var(--wl-ink)}
.ft-no-trip-state p{margin:0;color:var(--wl-muted);max-width:56ch}
.ft-no-trip-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ft-no-trip-actions a{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--wl-sans);text-decoration:none}
.ft-no-trip-primary{background:var(--wl-action);color:var(--wl-on-action)}
.ft-no-trip-primary:hover{background:var(--wl-action-hover)}
.ft-no-trip-secondary{border:1px solid var(--wl-ink);color:var(--wl-ink)}
.ft-no-trip-secondary:hover{background:var(--wl-parchment)}
.ft-no-trip-link{justify-self:start;color:var(--wl-link);font-weight:600}
.ft-no-trip-state a:focus-visible{outline:3px solid var(--wl-focus);outline-offset:3px}

/* Type (2026-11 review): the same two families as the homepage on every shared page. Instrument Serif at its one
   regular weight for headings (no synthetic bold), Inter for everything else; Fraunces stays only in the wordmark.
   Older page systems name their fonts through variables, remapped here. */
:root:root:has(>body.ft-shell-page){
  --ft-serif:var(--wl-serif);--ft-display:var(--wl-serif);--ft-font-display:var(--wl-serif);--ft-shell-serif:var(--wl-serif);
  --display:var(--wl-serif);--cinema-serif:var(--wl-serif);
  --ft-ui:var(--wl-sans);--ft-font-body:var(--wl-sans);--ft-shell-ui:var(--wl-sans);--ui:var(--wl-sans);--sans:var(--wl-sans);
}
body.ft-shell-page{font-family:var(--wl-sans)}
body.ft-shell-page :is(button,input,select,textarea){font-family:var(--wl-sans)}
body.ft-shell-page :is(h1,h2,h3):not(.ft-global-nav *){font-family:var(--wl-serif)!important;font-weight:400!important;font-synthesis:none;letter-spacing:-.01em!important}
body.ft-shell-page :is(h1,h2,h3) :is(em,i){font-family:inherit!important;font-weight:400!important}

/* Stays (2026-11 review): a secondary task gets a short header, in the brand's bone text. */
.stays-hero{padding-block:clamp(40px,7vw,72px)!important;min-height:0!important}
.stays-hero h1{font-size:clamp(38px,5.4vw,60px)!important;line-height:1.05!important;margin:0 0 12px!important}
.stays-hero p{color:var(--wl-on-dark-2)!important;max-width:60ch}
body.ft-shell-page{font-synthesis:none}
body.ft-explore .filters .plan-saved{background:var(--wl-dusk)!important;color:#fff!important;border-color:var(--wl-dusk)!important}
.ft-global-links .ft-global-cta{font-size:16px!important;white-space:nowrap}
@media(max-width:840px){.ft-global-links .ft-global-cta{font-size:15px!important}}
/* A hidden trip banner stays hidden (older trip styles force it to display). */
.trip-mode-banner[hidden]{display:none!important}

/* World Beyond Home wordmark: "Beyond" set in champagne italic. */
:is(.ft-global-brand,.wl-footer-brand,.ft-public-brand,header .brand) em{font-style:italic;font-weight:400;color:#C8A46A}