/* Our Favourite Things.
   Section 22: Christmas + St. Thomas + tourism + editorial. Warm neutrals,
   evergreen, deep red sparingly, gold accents, generous white space.
   Explicitly NOT generic red/green clip art. */
:root{
  --paper:#faf6ef; --paper-2:#f3ece0; --ink:#23201c; --muted:#6f6558;
  --evergreen:#1f4034; --evergreen-2:#2f5a49; --red:#8c2f2a; --gold:#b8935c;
  --line:#e2d8c8; --shadow:0 2px 18px rgba(35,32,28,.10);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 .4em}
a{color:var(--evergreen);text-decoration:none}
a:hover{text-decoration:underline}

/* shell: map is the page, panel floats over it */
.shell{display:flex;height:100dvh;overflow:hidden}
#map{position:absolute;inset:0;background:var(--paper-2)}
.panel{width:390px;max-width:100%;background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:var(--shadow);z-index:500}
.panel header{padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:1.35rem;color:var(--evergreen);line-height:1.15}
.brand span{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-top:4px}
.panel .body{overflow-y:auto;padding:14px 20px 40px;flex:1}

.search{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-size:.95rem;font-family:inherit}
.search:focus{outline:2px solid var(--gold);outline-offset:-1px}

.eyebrow{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 9px;font-weight:600}

/* section 10: what are you looking for */
.intents{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.intent{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  font-size:.85rem;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);
  transition:.15s}
.intent:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  font-size:.8rem;cursor:pointer;font-family:inherit;color:var(--ink)}
.chip.on{background:var(--evergreen);color:#fff;border-color:var(--evergreen)}

.trail{display:flex;gap:11px;align-items:flex-start;padding:11px;border:1px solid var(--line);
  border-radius:11px;background:#fff;margin-bottom:8px;cursor:pointer;transition:.15s}
.trail:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.trail .em{font-size:1.4rem;line-height:1}
.trail b{display:block;font-family:var(--serif);font-size:1rem}
.trail small{color:var(--muted);font-size:.8rem;display:block;margin-top:2px}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;
  margin-bottom:9px;cursor:pointer;transition:.15s}
.card:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.card .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--red);color:#fff;font-size:.78rem;font-weight:700;
  font-family:var(--sans);margin-right:8px;flex:none}
.card h3{display:flex;align-items:center;font-size:1.02rem;margin:0 0 5px}
.card p{margin:0;color:var(--muted);font-size:.86rem}
.pick{margin-top:8px;padding:8px 10px;background:var(--paper-2);border-left:3px solid var(--gold);
  border-radius:0 7px 7px 0;font-size:.84rem;font-style:italic}
.offer{margin-top:7px;display:inline-block;background:var(--red);color:#fff;
  padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600}

/* illustrated numbered markers, not google pins (section 3) */
/* Figurine tokens (section 2). Sized so the figurine inside is actually
   readable on a phone, which is the whole point of using them. */
.tok{width:46px;height:46px;position:relative;cursor:pointer;
  transition:transform .14s ease;transform-origin:50% 90%}
.tok img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 3px 5px rgba(35,32,28,.34))}
/* Downtown they overlap, which is honest: those shops really are on the same
   block. Hovering lifts one clear of its neighbours rather than hiding any. */
.tok:hover{transform:scale(1.28)}
.leaflet-marker-icon:hover{z-index:10000 !important}
.tok b{position:absolute;right:-2px;bottom:-1px;min-width:19px;height:19px;
  border-radius:10px;background:var(--red);color:#fff;font-size:.68rem;
  font-weight:700;font-family:var(--sans);display:flex;align-items:center;
  justify-content:center;padding:0 4px;border:2px solid var(--paper);
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tok.on-trail b{background:var(--evergreen)}
.tok.dim{opacity:.32}
/* Landmarks sit behind the businesses and are not clickable. */
.tok.landmark{width:72px;height:72px;cursor:default;opacity:1}
.tok.landmark img{filter:drop-shadow(0 4px 6px rgba(35,32,28,.42))}
.tok.landmark:hover{transform:none}
/* If a category has no artwork yet, fall back to a plain marker rather than a
   broken image. */
.tok-fallback{display:block;width:34px;height:34px;margin:12px auto 0;
  border-radius:50%;background:var(--red);border:3px solid var(--paper)}

.leaflet-container{background:var(--paper-2);font-family:var(--sans)}
/* paper-toned basemap: real geography, illustrated feel (see research) */
/* Section 2 says explicitly: do not look like Google Maps. Until the Chamber's
   illustrator delivers a drawn basemap, this pushes the road tiles toward warm
   parchment so the map reads as part of the campaign rather than a utility.
   Contrast is raised, not lowered, because the previous treatment washed the
   streets out to the point where the map looked broken rather than stylised. */
/* Warmth, not a colour cast. The figurine tokens now carry the character the
   brief asks for, so the basemap's job is to stay readable underneath them:
   people are using this to find a street. Earlier versions pushed sepia and
   saturation hard enough that Talbot Street disappeared into the parchment. */
.tiles{filter:sepia(.16) saturate(.92) hue-rotate(-6deg) brightness(1.01) contrast(1.05)}
/* A parchment ground under the tiles, so water and gaps are warm, not grey. */
.leaflet-container{background:#f2ece0}

.topbar{position:absolute;top:14px;right:14px;z-index:600;display:flex;gap:8px}
.btn{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 14px;
  font-size:.85rem;cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:var(--shadow)}
.btn.primary{background:var(--evergreen);color:#fff;border-color:var(--evergreen)}

.empty{color:var(--muted);font-size:.88rem;padding:14px 0}
.banner{background:var(--evergreen);color:#fff;padding:9px 13px;border-radius:9px;
  font-size:.85rem;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center}
.banner button{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;
  border-radius:7px;padding:3px 9px;font-size:.76rem;cursor:pointer}

@media (max-width:820px){
  .shell{flex-direction:column-reverse}
  #map{height:58dvh}
  /* mobile: bottom drawer, map keeps the majority of the screen (section 1) */
  .panel{width:100%;height:42dvh;border-right:0;border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;margin-top:-16px}
  .panel header{padding:12px 16px 9px}
  .panel .body{padding:11px 16px 28px}
  .intents{grid-template-columns:1fr 1fr}
}

/* --- artwork ------------------------------------------------------------
   Every image here is generated for this campaign, so the Chamber owns it
   outright. Business photographs come from the businesses themselves. */

/* A band of the street scene behind the panel masthead. Warmth without
   pushing the map below the fold, which is the whole point of the layout. */
.panel header{
  position:relative; overflow:hidden;
  background:#1c2740 url("/img/hero.webp") center 62% / cover no-repeat;
  padding:26px 20px 20px;
}
.panel header::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,28,45,.34) 0%,rgba(20,28,45,.72) 100%);
}
.panel header .brand{position:relative; z-index:1; color:#fdf7ec;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.panel header .brand span{color:#e8cfa0}

/* Trail cards carry their own art. The tile is decorative, so the emoji and
   the name still carry the meaning for anyone who cannot see it. */
.trail-art{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:12px 12px 0 0; background:var(--paper-2);
}
.trail-card{
  display:block; border:1px solid var(--line); border-radius:13px;
  overflow:hidden; background:#fff; margin-bottom:12px; text-decoration:none;
  color:inherit; box-shadow:var(--shadow); transition:border-color .15s,transform .15s;
}
.trail-card:hover{border-color:var(--gold); transform:translateY(-2px)}
.trail-card .meta{padding:12px 14px 14px}
.trail-card b{font-family:var(--serif); font-size:1.06rem; display:block}
.trail-card small{display:block; color:var(--muted); font-size:.82rem; margin-top:3px}
.trail-card .count{color:var(--gold); font-size:.78rem; margin-top:6px; display:block}

/* Page hero used on the passport. */
.page-hero{
  width:100%; aspect-ratio:24/9; object-fit:cover; border-radius:14px;
  margin:14px 0 6px; box-shadow:var(--shadow);
}
@media (max-width:640px){ .page-hero{aspect-ratio:16/9} }

.trail-thumb{width:46px;height:46px;flex:0 0 46px;object-fit:cover;border-radius:9px;
  background:var(--paper-2)}

/* A trail the Chamber has not filled in yet. Present, clearly not ready. */
.trail-card.is-empty,.trail.is-empty{opacity:.55;cursor:default;box-shadow:none}
.trail-card.is-empty:hover{border-color:var(--line);transform:none}
.trail-card.is-empty .count{color:var(--muted);font-style:italic}

/* Profile extras (section 5): a listing, not a directory row. */
.hero .logo{width:54px;height:54px;object-fit:contain;border-radius:10px;background:#fff;
  border:1px solid var(--line);padding:5px;flex:0 0 54px}
.gallery{display:flex;gap:9px;overflow-x:auto;margin-top:14px;padding-bottom:4px;
  scroll-snap-type:x mandatory}
.gallery img{height:190px;border-radius:11px;object-fit:cover;flex:0 0 auto;
  scroll-snap-align:start}
table.hours{border-collapse:collapse;font-size:.87rem;margin-top:6px}
table.hours th{text-align:left;font-weight:600;color:var(--muted);padding:3px 16px 3px 0;
  font-family:var(--sans)}
table.hours td{padding:3px 0}

/* Section 4: the card carries enough to act on without opening the profile. */
.card-photo{width:100%;height:118px;object-fit:cover;border-radius:9px;
  margin:-2px 0 9px;background:var(--paper-2)}
.card-trails{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.chip.sm{font-size:.71rem;padding:2px 8px}
.card-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line)}
.mini{font-size:.77rem;color:var(--evergreen);text-decoration:none;
  border:1px solid var(--line);border-radius:7px;padding:3px 9px;background:#fff}
.mini:hover{border-color:var(--gold)}
.mini.go{margin-left:auto;border-color:transparent;color:var(--gold);font-weight:600}

/* Trail progress, shown only once someone has started a passport. */
.progress{height:7px;background:var(--paper-2);border-radius:7px;overflow:hidden;margin:8px 0 3px}
.progress i{display:block;height:100%;background:var(--evergreen);transition:width .3s}
.progress-label{font-size:.75rem;color:var(--muted);margin-bottom:6px}

/* Section 18: what a paid package looks like on the page. */
.feat{color:var(--gold);margin-left:6px;font-size:.9em}
.video{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;
  background:var(--paper-2);margin-top:8px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Section 11: content around the map, every line of it a way back onto it. */
.featured{display:grid;gap:7px;margin-bottom:16px}
.fx{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:11px;
  background:#fff;text-decoration:none;color:inherit;transition:border-color .15s}
.fx:hover{border-color:var(--gold)}
.fx span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.fx b{display:block;font-family:var(--serif);font-size:.94rem;font-weight:500;
  margin-top:2px;line-height:1.3}