.vd-media{--m-gap:var(--media-gap,10px);--m-radius:var(--media-radius,10px);--m-slide:var(--media-slide-s,5s);margin:var(--media-margin,28px 0);padding:0}
.vd-media img,.vd-media video{display:block;width:100%;height:auto;border-radius:var(--m-radius);background:var(--media-bg,transparent)}
.vd-media figcaption{font-size:var(--media-cap-size,.88em);color:var(--media-cap-color,inherit);opacity:.82;margin-top:6px}
.vd-mframe{display:grid;overflow:hidden;border-radius:var(--m-radius)}
.vd-mframe>img{grid-area:1/1;aspect-ratio:var(--media-slide-ratio,3/2);object-fit:cover;border-radius:0}
.vd-mframe>img+img{opacity:0}
.vd-mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-gap)}
.vd-mrow>img{aspect-ratio:var(--media-trip-ratio,4/5);object-fit:cover}
.vd-mstrip{display:flex;gap:var(--m-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain}
.vd-mitem{flex:0 0 var(--media-gal-w,78%);scroll-snap-align:start;margin:0}
.vd-mitem img{aspect-ratio:var(--media-gal-ratio,3/2);object-fit:cover}
@media (min-width:720px){.vd-mitem{flex-basis:var(--media-gal-w-wide,46%)}}
@media (max-width:520px){.vd-mrow{gap:4px}}
@keyframes vd-ms2{0%{opacity:0}10%{opacity:1}60%{opacity:1}70%{opacity:0}100%{opacity:0}}@keyframes vd-me2{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}}.vd-n2 .vd-mframe>img+img{animation:vd-ms2 calc(var(--m-slide) * 2) linear infinite both}.vd-n2 .vd-mframe>img:last-child{animation-name:vd-me2}
@keyframes vd-ms3{0%{opacity:0}6.67%{opacity:1}40%{opacity:1}46.67%{opacity:0}100%{opacity:0}}@keyframes vd-me3{0%{opacity:0}6.67%{opacity:1}33.33%{opacity:1}40%{opacity:0}100%{opacity:0}}.vd-n3 .vd-mframe>img+img{animation:vd-ms3 calc(var(--m-slide) * 3) linear infinite both}.vd-n3 .vd-mframe>img:last-child{animation-name:vd-me3}
@keyframes vd-ms4{0%{opacity:0}5%{opacity:1}30%{opacity:1}35%{opacity:0}100%{opacity:0}}@keyframes vd-me4{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}.vd-n4 .vd-mframe>img+img{animation:vd-ms4 calc(var(--m-slide) * 4) linear infinite both}.vd-n4 .vd-mframe>img:last-child{animation-name:vd-me4}
@keyframes vd-ms5{0%{opacity:0}4%{opacity:1}24%{opacity:1}28%{opacity:0}100%{opacity:0}}@keyframes vd-me5{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}.vd-n5 .vd-mframe>img+img{animation:vd-ms5 calc(var(--m-slide) * 5) linear infinite both}.vd-n5 .vd-mframe>img:last-child{animation-name:vd-me5}
@keyframes vd-ms6{0%{opacity:0}3.33%{opacity:1}20%{opacity:1}23.33%{opacity:0}100%{opacity:0}}@keyframes vd-me6{0%{opacity:0}3.33%{opacity:1}16.67%{opacity:1}20%{opacity:0}100%{opacity:0}}.vd-n6 .vd-mframe>img+img{animation:vd-ms6 calc(var(--m-slide) * 6) linear infinite both}.vd-n6 .vd-mframe>img:last-child{animation-name:vd-me6}
@keyframes vd-ms7{0%{opacity:0}2.86%{opacity:1}17.14%{opacity:1}20%{opacity:0}100%{opacity:0}}@keyframes vd-me7{0%{opacity:0}2.86%{opacity:1}14.29%{opacity:1}17.14%{opacity:0}100%{opacity:0}}.vd-n7 .vd-mframe>img+img{animation:vd-ms7 calc(var(--m-slide) * 7) linear infinite both}.vd-n7 .vd-mframe>img:last-child{animation-name:vd-me7}
@keyframes vd-ms8{0%{opacity:0}2.5%{opacity:1}15%{opacity:1}17.5%{opacity:0}100%{opacity:0}}@keyframes vd-me8{0%{opacity:0}2.5%{opacity:1}12.5%{opacity:1}15%{opacity:0}100%{opacity:0}}.vd-n8 .vd-mframe>img+img{animation:vd-ms8 calc(var(--m-slide) * 8) linear infinite both}.vd-n8 .vd-mframe>img:last-child{animation-name:vd-me8}
@keyframes vd-ms9{0%{opacity:0}2.22%{opacity:1}13.33%{opacity:1}15.56%{opacity:0}100%{opacity:0}}@keyframes vd-me9{0%{opacity:0}2.22%{opacity:1}11.11%{opacity:1}13.33%{opacity:0}100%{opacity:0}}.vd-n9 .vd-mframe>img+img{animation:vd-ms9 calc(var(--m-slide) * 9) linear infinite both}.vd-n9 .vd-mframe>img:last-child{animation-name:vd-me9}
@keyframes vd-ms10{0%{opacity:0}2%{opacity:1}12%{opacity:1}14%{opacity:0}100%{opacity:0}}@keyframes vd-me10{0%{opacity:0}2%{opacity:1}10%{opacity:1}12%{opacity:0}100%{opacity:0}}.vd-n10 .vd-mframe>img+img{animation:vd-ms10 calc(var(--m-slide) * 10) linear infinite both}.vd-n10 .vd-mframe>img:last-child{animation-name:vd-me10}
.vd-slides .vd-mframe>img:nth-child(2){animation-delay:calc(var(--m-slide) * 1)}
.vd-slides .vd-mframe>img:nth-child(3){animation-delay:calc(var(--m-slide) * 2)}
.vd-slides .vd-mframe>img:nth-child(4){animation-delay:calc(var(--m-slide) * 3)}
.vd-slides .vd-mframe>img:nth-child(5){animation-delay:calc(var(--m-slide) * 4)}
.vd-slides .vd-mframe>img:nth-child(6){animation-delay:calc(var(--m-slide) * 5)}
.vd-slides .vd-mframe>img:nth-child(7){animation-delay:calc(var(--m-slide) * 6)}
.vd-slides .vd-mframe>img:nth-child(8){animation-delay:calc(var(--m-slide) * 7)}
.vd-slides .vd-mframe>img:nth-child(9){animation-delay:calc(var(--m-slide) * 8)}
.vd-slides .vd-mframe>img:nth-child(10){animation-delay:calc(var(--m-slide) * 9)}
@media (prefers-reduced-motion:reduce){.vd-slides .vd-mframe>img+img{animation:none!important;opacity:0}}
.vd-moframe{position:relative;overflow:hidden;display:block}
.vd-moframe>picture,.vd-moframe img{display:block}
.vd-moclip{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity var(--motion-fade,.7s) ease}
.vd-moclip.vd-live{opacity:1}
.vd-art .vd-moframe{border-radius:var(--art-radius,0);box-shadow:var(--art-shadow,none)}
.vd-art .vd-moframe img{box-shadow:none}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){@keyframes vd-mo-rise{from{opacity:0;translate:0 var(--motion-rise,120px);scale:.85}to{opacity:1;translate:0 0;scale:1}}@keyframes vd-mo-open{from{opacity:.2;clip-path:inset(var(--motion-open,14%) round 28px)}to{opacity:1;clip-path:inset(0 round 0)}}@keyframes vd-mo-slide{from{opacity:0;translate:var(--motion-slide,160px) 0;rotate:3deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes vd-mo-zoom{from{scale:var(--motion-zoom,1.35)}to{scale:1}}@keyframes vd-mo-drift{from{translate:0 0;scale:1.02}to{translate:0 var(--motion-drift,15%);scale:1.35}}@keyframes vd-mo-head{from{opacity:0;translate:calc(-1 * var(--motion-head,60px)) 0}to{opacity:1;translate:0 0}}@keyframes vd-mo-text{from{opacity:.08;translate:0 var(--motion-text,36px)}to{opacity:1;translate:0 0}}@keyframes vd-mo-line{from{scale:0 1}to{scale:1 1}}@keyframes vd-mo-bar{from{scale:0 1}to{scale:1 1}}@keyframes vd-mo-fadeout{from{opacity:1}to{opacity:.25}}.vd-motion .vd-rise{animation:vd-mo-open linear both;animation-timeline:view();animation-range:entry 0% cover 45%}.vd-motion .vd-slide{animation:vd-mo-slide linear both;animation-timeline:view();animation-range:entry 0% cover 40%}.vd-motion .vd-zoom .vd-moframe,.vd-motion .vd-zoom>picture{overflow:hidden;display:block;border-radius:var(--art-radius,0)}.vd-motion .vd-zoom img,.vd-motion .vd-zoom .vd-moclip{animation:vd-mo-zoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}.vd-motion .vd-drift>picture,.vd-motion .vd-drift .vd-moframe{overflow:hidden;display:block}.vd-motion .vd-drift img,.vd-motion .vd-drift .vd-moclip{animation:vd-mo-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}.vd-motion .vd-drift .vd-moframe,.vd-motion .vd-drift>picture{animation:vd-mo-fadeout linear both;animation-timeline:view();animation-range:exit 30% exit 100%}.vd-motion h2{animation:vd-mo-head linear both;animation-timeline:view();animation-range:entry 0% cover 30%}.vd-motion h2::after{content:"";display:block;inline-size:var(--motion-line,64px);block-size:3px;margin-block-start:10px;background:var(--motion-accent,currentColor);border-radius:2px;transform-origin:0 50%;animation:vd-mo-line linear both;animation-timeline:view();animation-range:entry 40% cover 35%}.vd-motion :is(p,li,blockquote,table):not(figure *){animation:vd-mo-text linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.vd-motion::before{content:"";position:fixed;inset-block-start:0;inset-inline:0;block-size:var(--motion-bar-h,3px);z-index:50;background:var(--motion-bar,var(--motion-accent,currentColor));transform-origin:0 50%;animation:vd-mo-bar linear both;animation-timeline:scroll(root)}}}
@media (prefers-reduced-motion:reduce){.vd-moclip{display:none}}
/* Pura-Verde.com: cream paper magazine, forest-green bars, wood rules, terra cotta highlights (approved design A, 2026-Oct-30).
   ONE theme block below holds every colour, font and size; the rest of the file only uses those tokens. */
@font-face { font-family: "DM Serif Display"; src: url(/static/fonts/dm-serif-display-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(/static/fonts/dm-serif-display-italic-400.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Manrope; src: url(/static/fonts/manrope-normal-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---- theme: every value for this design ---- */
:root {
  --forest: #1f3b2c; --forest-deep: #142a1f; --moss: #4a6a3b; --fern: #7d9b5c; --sage: #c3cfa9; --wood: #8b6343; --tan: #cdb08a;
  --creme: #f6efe0; --creme-2: #ede3cd; --paper: #fbf7ee; --black: #141611; --terra: #c1623b; --terra-deep: #9d4a2a;
  --bg: var(--creme); --ink: var(--black); --muted: #5e5a4c; --line: rgba(20, 22, 17, .13); --link: var(--forest); --accent: var(--terra);
  --f-display: "DM Serif Display", Georgia, serif; --f-body: Manrope, system-ui, sans-serif;
  --fw-body: 400; --fw-strong: 700; --fw-display: 400; --lh-body: 1.6; --lh-heading: 1.08;
  --fs-body: 1rem; --fs-small: .9rem; --fs-label: .72rem; --fs-card: 1.3rem; --fs-h2: clamp(2rem, 3.6vw, 3.1rem); --fs-hero: clamp(2.8rem, 6.4vw, 5.6rem);
  --ls-label: .12em; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --gutter: 16px; --max: 1320px; --radius: 6px; --radius-sm: 4px; --pill: 999px; --ic: 20px; --ic-big: 44px; --mini: 64px;
  --card-bg: var(--paper); --card-ink: var(--ink); --card-muted: var(--muted); --card-shadow: 0 1px 0 var(--line); --card-border: 1px solid var(--line); --card-ratio: 4 / 3;
  --noimg-bg: var(--creme-2); --noimg-ink: var(--forest); --noimg-disc: var(--sage);
  --noimg-pattern: radial-gradient(circle at 20% 30%, rgba(125, 155, 92, .22) 0 18%, transparent 19%), radial-gradient(circle at 80% 75%, rgba(193, 98, 59, .14) 0 14%, transparent 15%), repeating-linear-gradient(135deg, rgba(139, 99, 67, .07) 0 2px, transparent 2px 12px);
  --logo-disc: var(--forest); --logo-leaf: var(--fern); --logo-vein: var(--creme); --logo-dot: var(--terra); --tag-bg: var(--forest); --tag-ink: var(--creme);
  --chip-bg: var(--paper); --chip-ink: var(--forest); --chip-line: var(--line); --chip-on-bg: var(--forest); --chip-on-ink: var(--creme);
  --pop-bg: var(--paper); --pop-ink: var(--black); --pop-muted: var(--muted);
  --slide-every: 7s; --fade: 1.6s; --drift-from: 1.04; --drift-to: 1.13; --drift-x: -1.5%; --drift-slow: 18s;
  --map-h: min(78vh, 760px); --dir-h: min(80vh, 820px); --sticky-h: 50px; --map-radius: 6px;
  --map-land: #efe6d2; --map-woods: #dfe3c6; --map-park: #c9d6a8; --map-park-line: #9fb47a; --map-town: #e7dcc4; --map-water: #9fc3bb; --map-river: #86b1a8;
  --map-border: #8b6343; --map-road: #ffffff; --map-road-major: #d9a07e; --map-label: #3d3a30; --map-label-strong: #1f3b2c; --map-halo: #f6efe0;
  --map-icon-bg: #1f3b2c; --map-icon-ink: #f6efe0; --map-icon-ring: #f6efe0; --map-group: #c1623b; --map-group-ring: #f6efe0; --map-group-ink: #ffffff;
  --map-icon-stay: #1f3b2c; --map-icon-village: #4a6a3b; --map-icon-park: #2f5a3a; --map-icon-rescue: #9d4a2a; --map-icon-turtle: #2a6a6a; --map-icon-reserve: #3c5d34;
  --map-icon-food: #8b6343; --map-icon-market: #8b6343; --map-icon-shop: #6f5a3a; --map-icon-marine: #2d5f78;
  --on-accent: #ffffff; --on-photo-soft: #ebe5d4; --foot-line: rgba(195, 207, 169, .18); --foot-logo-w: 150px; --fs-foot-name: 1.4rem;
  --veil-hero: linear-gradient(90deg, rgba(14, 26, 19, .82), rgba(14, 26, 19, .15) 70%), linear-gradient(0deg, rgba(14, 26, 19, .6), transparent 45%);
  --veil-feature: linear-gradient(0deg, rgba(14, 26, 19, .9), transparent 60%); --veil-band: linear-gradient(90deg, rgba(20, 42, 31, .88), rgba(20, 42, 31, .3));
  --map-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(20, 22, 17, .45);
  /* Stone Spheres game (real module from costaricasailing.net, its own --relic-* names): this site's dark green, the game's gold */
  --fs-xs: .78rem; --fs-s: .9rem; --fs-m: 1rem; --fs-l: 1.15rem; --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); --fs-xxl: var(--fs-h2);
  --head: var(--f-display); --body: var(--f-body); --gap: 16px; --gap-2: 24px; --gap-3: clamp(32px, 4vw, 48px); --foot-max: var(--max);
  --relic-bg: var(--forest-deep); --relic-surface: #1c3628; --relic-soil: #0f2017; --relic-platform: #0f2017; --relic-sign-bg: #2c4a39;
  --relic-grid: rgba(205, 176, 138, .08); --relic-border: rgba(246, 239, 224, .16); --relic-ink: var(--creme); --relic-muted: #c9c7b4;
  --relic-panel-bg: rgba(16, 34, 25, .93); --relic-modal-card: #10231a; --relic-story-bg: #10231a; --relic-accent-ink: var(--forest-deep);
  --relic-bar: 6px; --relic-bar-color: var(--wood); --relic-badge-ink: var(--forest-deep);
}

/* ---- layout ---- */
.a-top { background: var(--black); color: var(--sage); font-size: var(--fs-label); letter-spacing: .04em; }
.a-top .wrap { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); }
.a-top a { color: var(--creme); text-decoration: none; margin-right: var(--sp-4); }
.a-mast { background: var(--creme); border-bottom: 3px double var(--wood); }
.a-mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-5); }
.a-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--forest); }
.a-logo svg { width: 54px; height: 54px; }
.a-logo b { font: var(--fw-display) 2.6rem/1 var(--f-display); letter-spacing: -.01em; }
.a-logo b i { color: var(--terra); }
.a-com { font-size: .5em; letter-spacing: 0; margin-left: .04em; }
.a-logo small { display: block; font: var(--fw-strong) var(--fs-label)/1.4 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--wood); }
.a-search { display: flex; gap: var(--sp-2); }
.a-search input { border: 1.5px solid var(--line); background: var(--paper); border-radius: var(--pill); padding: var(--sp-2) var(--sp-4); font: inherit; min-width: 240px; color: var(--ink); }
.a-search button, .a-btn { border: 0; background: var(--terra); color: var(--on-accent); border-radius: var(--pill); padding: var(--sp-2) var(--sp-5); font: var(--fw-strong) var(--fs-small) var(--f-body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.a-nav { background: var(--forest); position: sticky; top: 0; z-index: 20; }
.a-nav .wrap { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.a-nav a { color: var(--creme); text-decoration: none; font-weight: var(--fw-strong); font-size: var(--fs-small); padding: var(--sp-3) var(--sp-3); white-space: nowrap; display: flex; align-items: center; gap: var(--sp-2); border-bottom: 3px solid transparent; }
.a-nav a:hover, .a-nav a.on { border-bottom-color: var(--terra); }
.a-nav .pv-ic { --ic: 17px; color: var(--tan); }

.a-hero { position: relative; min-height: clamp(460px, 64vh, 680px); display: grid; align-items: end; color: var(--creme); overflow: hidden; }
.a-hero::after { content: ""; position: absolute; inset: 0; background: var(--veil-hero); }
.a-hero .wrap { position: relative; z-index: 2; padding-block: var(--sp-8) var(--sp-7); }
.a-kick { font: var(--fw-strong) var(--fs-label)/1 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--tan); margin: 0 0 var(--sp-3); }
.a-hero h1 { font-size: var(--fs-hero); max-width: 13ch; }
.a-hero h1 i { color: var(--tan); }
.a-hero p { max-width: 52ch; font-size: 1.15rem; margin: var(--sp-4) 0 var(--sp-5); color: var(--on-photo-soft); }
.a-hero .a-stats { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); }
.a-hero .a-stats b { display: block; font: 2.2rem/1 var(--f-display); color: var(--creme); }
.a-hero .a-stats span { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--tan); }

.a-sec-h { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); border-bottom: 2px solid var(--black); padding-bottom: var(--sp-2); margin-bottom: var(--sp-5); }
.a-sec-h h2 { font-size: var(--fs-h2); }
.a-sec-h h2 i { color: var(--terra); }
.a-sec-h a { font-weight: var(--fw-strong); font-size: var(--fs-small); color: var(--terra); text-decoration: none; white-space: nowrap; }
.a-mapsec { padding-block: var(--sp-8) var(--sp-7); }
.a-mapsec .pv-chips { margin-bottom: var(--sp-4); }
.a-map { box-shadow: var(--map-shadow); }

.a-mag { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: var(--sp-7); padding-block: var(--sp-7); }
.a-side h3 { font: var(--fw-strong) var(--fs-label)/1 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; background: var(--forest); color: var(--creme); padding: var(--sp-3); margin-bottom: var(--sp-2); }
.a-side h3.t { background: var(--terra); }
.a-side h3.w { background: var(--wood); }
.a-side section { margin-bottom: var(--sp-6); }
.a-cats { list-style: none; margin: 0; padding: 0; }
.a-cats a { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px dotted var(--line); color: var(--ink); text-decoration: none; font-size: var(--fs-small); }
.a-cats .pv-ic { color: var(--moss); --ic: 18px; }
.a-cats em { font-style: normal; color: var(--muted); font-size: var(--fs-label); }
.a-lead { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.a-lead .a-feature { position: relative; min-height: 440px; border-radius: var(--radius); overflow: hidden; color: var(--creme); display: grid; align-items: end; }
.a-lead .a-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-lead .a-feature::after { content: ""; position: absolute; inset: 0; background: var(--veil-feature); }
.a-lead .a-feature div { position: relative; z-index: 1; padding: var(--sp-6); }
.a-lead .a-feature h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: var(--sp-2) 0; }
.a-lead .a-feature p { margin: 0; color: var(--on-photo-soft); }
.a-lead ul { display: grid; gap: var(--sp-1); align-content: start; }
.a-block { margin-bottom: var(--sp-7); }
.a-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.a-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.a-band { position: relative; color: var(--creme); overflow: hidden; }
.a-band::after { content: ""; position: absolute; inset: 0; background: var(--veil-band); }
.a-band .wrap { position: relative; z-index: 1; padding-block: clamp(80px, 11vw, 150px); }
.a-band blockquote { margin: 0; font: italic 400 clamp(1.8rem, 3.6vw, 3rem)/1.2 var(--f-display); max-width: 24ch; }
.a-band p { color: var(--tan); font-weight: var(--fw-strong); letter-spacing: var(--ls-label); text-transform: uppercase; font-size: var(--fs-label); }

.a-more { padding-block: var(--sp-8); }
.a-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.a-tile { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--moss); padding: var(--sp-5); border-radius: var(--radius); }
.a-tile:nth-child(3n+2) { border-top-color: var(--terra); }
.a-tile:nth-child(3n) { border-top-color: var(--wood); }
.a-tile h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.45rem; }
.a-tile h3 .pv-ic { color: var(--terra); --ic: 24px; }
.a-tile > p { margin: var(--sp-1) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-small); }

/* the green directory: every place, scrolls inside its own box */
.a-dir { padding-block: var(--sp-7) var(--sp-8); background: var(--creme-2); border-top: 3px double var(--wood); }
.a-dir-n { font-size: var(--fs-small); color: var(--muted); }
.a-dir-jump { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-4); }
.a-dir-jump a { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--forest); text-decoration: none; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); }
.a-dir-jump a:hover { background: var(--forest); color: var(--creme); }
.a-dir-box { height: var(--dir-h); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); scrollbar-width: thin; scrollbar-color: var(--wood) var(--creme-2); scroll-padding-top: var(--sp-3); }
.a-dir-cols { columns: 4 250px; column-gap: var(--sp-6); column-rule: 1px solid var(--line); }
.a-dcol { break-inside: avoid; margin-bottom: var(--sp-6); }
.a-dcol h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.35rem; padding-bottom: var(--sp-2); border-bottom: 3px solid var(--terra); }
.a-dcol h3 .pv-ic { color: var(--terra); }
.a-dcol h3 em { margin-left: auto; font: var(--fw-body) var(--fs-small) var(--f-body); color: var(--muted); }
.a-dcol .pv-row { padding: var(--sp-2) 0; }

.a-foot { background: var(--black); color: var(--sage); padding-block: var(--sp-5); font-size: var(--fs-small); line-height: 1.5; }
.a-foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-7); align-items: start; }
.a-foot b { color: var(--creme); font: var(--fs-foot-name) var(--f-display); }
.a-foot p { margin: var(--sp-1) 0 0; max-width: 46ch; }
.a-foot a { color: var(--creme); display: block; text-decoration: none; padding: 1px 0; }
.a-foot a:hover { color: var(--tan); }

@media (max-width: 1180px) { .a-mag { grid-template-columns: minmax(0, 1fr) 280px; } .a-mag > .a-side:first-child { display: none; } }
@media (max-width: 900px) {
  .a-mag { grid-template-columns: 1fr; } .a-lead { grid-template-columns: 1fr; } .a-grid, .a-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-search { display: none; } .a-foot .wrap { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 600px) { .a-grid, .a-grid.four, .a-tiles { grid-template-columns: 1fr; } .a-top .wrap > span { display: none; } .a-logo b { font-size: 2rem; } .a-hero .a-stats { gap: var(--sp-4); } }

/* ---- shared pieces: place cards, rows, map, chips, popups, moving photos, Stone Spheres section ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--f-body); }
img { display: block; max-width: 100%; }
a { color: var(--link); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: var(--fw-display); line-height: var(--lh-heading); margin: 0; text-wrap: balance; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.pv-ic { width: var(--ic); height: var(--ic); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pv-ic-big { width: var(--ic-big); height: var(--ic-big); }

/* moving backgrounds (crossfade + drift) */
[data-slides] { position: absolute; inset: 0; overflow: hidden; }
[data-slides] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(var(--drift-from)); transition: opacity var(--fade) ease; }
[data-slides] img.on { opacity: 1; animation: pv-drift calc(var(--slide-every) + var(--fade)) linear both; }
img[data-drift] { animation: pv-drift var(--drift-slow) ease-in-out infinite alternate; }
@keyframes pv-drift { from { transform: scale(var(--drift-from)); } to { transform: scale(var(--drift-to)) translate3d(var(--drift-x), 0, 0); } }

/* place cards */
.pv-card { display: grid; grid-template-rows: auto 1fr; background: var(--card-bg); color: var(--card-ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); border: var(--card-border); }
.pv-card-img { position: relative; aspect-ratio: var(--card-ratio); overflow: hidden; background: var(--noimg-bg); }
.pv-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pv-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--noimg-ink); background: var(--noimg-pattern), var(--noimg-bg); }
.pv-noimg .pv-ic-big { padding: var(--sp-3); border-radius: 50%; background: var(--noimg-disc); box-sizing: content-box; }
.pv-logo .l-disc { fill: var(--logo-disc); } .pv-logo .l-leaf { fill: var(--logo-leaf); } .pv-logo .l-vein { stroke: var(--logo-vein); } .pv-logo .l-dot { fill: var(--logo-dot); }
.pv-tag { position: absolute; left: var(--sp-3); top: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); border-radius: var(--pill); background: var(--tag-bg); color: var(--tag-ink); font: var(--fw-strong) var(--fs-label)/1 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; }
.pv-tag .pv-ic { --ic: 15px; }
.pv-card-tx { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.pv-card-tx h3 { font-size: var(--fs-card); }
.pv-card-tx p { margin: 0; font-size: var(--fs-small); color: var(--card-muted); }
.pv-card-tx .pv-where { color: var(--accent); font-weight: var(--fw-strong); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.pv-out { justify-self: start; margin-top: var(--sp-1); color: var(--accent); font-weight: var(--fw-strong); font-size: var(--fs-small); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.pv-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); list-style: none; }
.pv-row .pv-ic { color: var(--accent); }
.pv-row b, .pv-mini b { display: block; font-weight: var(--fw-strong); font-size: var(--fs-small); line-height: 1.3; }
.pv-row span, .pv-mini span { font-size: var(--fs-label); color: var(--muted); }
.pv-row .pv-out { border: 0; font-size: var(--fs-body); }
.pv-mini { display: grid; grid-template-columns: var(--mini) 1fr; gap: var(--sp-3); align-items: center; list-style: none; padding: var(--sp-2) 0; }
.pv-mini-img { position: relative; width: var(--mini); aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--noimg-bg); }
.pv-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.pv-mini-img .pv-ic-big { --ic-big: 22px; padding: 6px; }
ul[data-places] { margin: 0; padding: 0; }

/* map */
.pv-map { position: relative; height: var(--map-h); border-radius: var(--map-radius); overflow: hidden; background: var(--map-land); }
.pv-map [data-map] { position: absolute; inset: 0; }
.pv-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pv-chip { display: inline-flex; align-items: center; gap: var(--sp-1); border: 1.5px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-ink); border-radius: var(--pill); padding: var(--sp-1) var(--sp-3); font: var(--fw-strong) var(--fs-label)/1.6 var(--f-body); cursor: pointer; }
.pv-chip .pv-ic { --ic: 15px; }
.pv-chip span { opacity: .65; font-weight: var(--fw-body); }
.pv-chip.on { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: var(--chip-on-bg); }
.pv-pop .maplibregl-popup-content { background: var(--pop-bg); color: var(--pop-ink); border-radius: var(--radius-sm); padding: var(--sp-4); box-shadow: var(--card-shadow); font-family: var(--f-body); display: grid; gap: var(--sp-1); }
.pv-pop .maplibregl-popup-tip { border-top-color: var(--pop-bg); border-bottom-color: var(--pop-bg); }
.pv-pop h4 { font-size: var(--fs-card); }
.pv-pop p { margin: 0; font-size: var(--fs-small); color: var(--pop-muted); }
.pv-pop .pv-pop-cat { display: flex; align-items: center; gap: var(--sp-1); color: var(--accent); font-weight: var(--fw-strong); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); }
.pv-pop .pv-where { font-weight: var(--fw-strong); color: var(--pop-ink); }
.pv-pop .maplibregl-popup-close-button { color: var(--pop-ink); font-size: 20px; padding: 2px 8px; }
.maplibregl-ctrl-group { background: var(--pop-bg) !important; }

@media (prefers-reduced-motion: reduce) { img[data-drift], [data-slides] img.on { animation: none; } }

/* ---- inner pages (About, How we choose places, search, 404) ---- */
.a-page { padding-block: var(--sp-7) var(--sp-8); }
.a-page .a-in { max-width: 760px; }
.a-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.a-crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--tan); }
.a-crumbs a { color: var(--wood); text-decoration: none; }
.a-page h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.a-page h2 { font-size: 1.7rem; margin: var(--sp-6) 0 var(--sp-3); }
.a-page p, .a-page li { font-size: 1.05rem; }
.a-page .a-lede { font-size: 1.2rem; color: var(--muted); }
.a-page img { max-width: 360px; height: auto; margin-block: var(--sp-3); }
.a-page a { color: var(--terra-deep); }
.vd-search { display: flex; gap: var(--sp-2); margin-block: var(--sp-4); }
.vd-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vd-search input { flex: 1; border: 1.5px solid var(--line); background: var(--paper); border-radius: var(--pill); padding: var(--sp-2) var(--sp-4); font: inherit; color: var(--ink); }
.vd-search button { border: 0; background: var(--terra); color: var(--on-accent); border-radius: var(--pill); padding: var(--sp-2) var(--sp-5); font: var(--fw-strong) var(--fs-small) var(--f-body); }
.a-none { margin: 0; color: var(--muted); }
.a-full { background: none; border: 0; padding: 0; cursor: pointer; font: var(--fw-strong) var(--fs-small) var(--f-body); color: var(--terra); }
.pv-map:fullscreen { --map-h: 100vh; border-radius: 0; }
.a-hop { position: absolute; left: -9999px; }
.a-hop:focus { left: var(--sp-3); top: var(--sp-3); z-index: 50; background: var(--paper); padding: var(--sp-2) var(--sp-4); }

/* Sphere map inside the game: green land, blue-green water, gold roads (same token names as the game, scoped to it) */
.vd-relic, .vd-relicmodal {
  --map-land: #10201a; --map-earth: #15281e; --map-park: #1c3827; --map-town: #19291f; --map-building: #22362a; --map-water: #163a46; --map-water-line: #2a6070;
  --map-border: var(--terra); --map-road-minor: #2b3f33; --map-road: #a9bfa0; --map-road-major: var(--creme); --map-highway: #e0a94a;
  --map-label: var(--creme); --map-label-gold: #e0a94a; --map-label-halo: #0b140f;
  --map-purple: var(--terra); --map-ink: var(--creme); --map-muted: #c9c7b4; --map-dark: #0b140f; --map-ctrl-bg: rgba(12, 26, 19, .92); --map-line: rgba(246, 239, 224, .18);
  --map-icon-bg: #0b140f; --map-icon-ink: var(--creme); --map-star-bg: var(--terra); --map-radius: 12px; --map-group: 36px;
}

/* Pizote Press logo in the footer (engine footer_logo) */
.a-foot .a-press { border-left: 1px solid var(--foot-line); padding-left: var(--sp-6); }
.vd-footlogo { display: inline-grid; justify-items: start; gap: var(--sp-2); text-decoration: none; color: var(--sage); padding: 0; }
.vd-footlogo img { width: var(--foot-logo-w); height: auto; }
@media (max-width: 900px) { .a-foot .a-press { border-left: 0; padding-left: 0; border-top: 1px solid var(--foot-line); padding-top: var(--sp-4); } }
.vd-footcap { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }