.cy-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}
.cy-media img,.cy-media video{display:block;width:100%;height:auto;border-radius:var(--m-radius);background:var(--media-bg,transparent)}
.cy-media figcaption{font-size:var(--media-cap-size,.88em);color:var(--media-cap-color,inherit);opacity:.82;margin-top:6px}
.cy-mframe{display:grid;overflow:hidden;border-radius:var(--m-radius)}
.cy-mframe>img{grid-area:1/1;aspect-ratio:var(--media-slide-ratio,3/2);object-fit:cover;border-radius:0}
.cy-mframe>img+img{opacity:0}
.cy-mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-gap)}
.cy-mrow>img{aspect-ratio:var(--media-trip-ratio,4/5);object-fit:cover}
.cy-mstrip{display:flex;gap:var(--m-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain}
.cy-mitem{flex:0 0 var(--media-gal-w,78%);scroll-snap-align:start;margin:0}
.cy-mitem img{aspect-ratio:var(--media-gal-ratio,3/2);object-fit:cover}
@media (min-width:720px){.cy-mitem{flex-basis:var(--media-gal-w-wide,46%)}}
@media (max-width:520px){.cy-mrow{gap:4px}}
@keyframes cy-ms2{0%{opacity:0}10%{opacity:1}60%{opacity:1}70%{opacity:0}100%{opacity:0}}@keyframes cy-me2{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}}.cy-n2 .cy-mframe>img+img{animation:cy-ms2 calc(var(--m-slide) * 2) linear infinite both}.cy-n2 .cy-mframe>img:last-child{animation-name:cy-me2}
@keyframes cy-ms3{0%{opacity:0}6.67%{opacity:1}40%{opacity:1}46.67%{opacity:0}100%{opacity:0}}@keyframes cy-me3{0%{opacity:0}6.67%{opacity:1}33.33%{opacity:1}40%{opacity:0}100%{opacity:0}}.cy-n3 .cy-mframe>img+img{animation:cy-ms3 calc(var(--m-slide) * 3) linear infinite both}.cy-n3 .cy-mframe>img:last-child{animation-name:cy-me3}
@keyframes cy-ms4{0%{opacity:0}5%{opacity:1}30%{opacity:1}35%{opacity:0}100%{opacity:0}}@keyframes cy-me4{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}.cy-n4 .cy-mframe>img+img{animation:cy-ms4 calc(var(--m-slide) * 4) linear infinite both}.cy-n4 .cy-mframe>img:last-child{animation-name:cy-me4}
@keyframes cy-ms5{0%{opacity:0}4%{opacity:1}24%{opacity:1}28%{opacity:0}100%{opacity:0}}@keyframes cy-me5{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}.cy-n5 .cy-mframe>img+img{animation:cy-ms5 calc(var(--m-slide) * 5) linear infinite both}.cy-n5 .cy-mframe>img:last-child{animation-name:cy-me5}
@keyframes cy-ms6{0%{opacity:0}3.33%{opacity:1}20%{opacity:1}23.33%{opacity:0}100%{opacity:0}}@keyframes cy-me6{0%{opacity:0}3.33%{opacity:1}16.67%{opacity:1}20%{opacity:0}100%{opacity:0}}.cy-n6 .cy-mframe>img+img{animation:cy-ms6 calc(var(--m-slide) * 6) linear infinite both}.cy-n6 .cy-mframe>img:last-child{animation-name:cy-me6}
@keyframes cy-ms7{0%{opacity:0}2.86%{opacity:1}17.14%{opacity:1}20%{opacity:0}100%{opacity:0}}@keyframes cy-me7{0%{opacity:0}2.86%{opacity:1}14.29%{opacity:1}17.14%{opacity:0}100%{opacity:0}}.cy-n7 .cy-mframe>img+img{animation:cy-ms7 calc(var(--m-slide) * 7) linear infinite both}.cy-n7 .cy-mframe>img:last-child{animation-name:cy-me7}
@keyframes cy-ms8{0%{opacity:0}2.5%{opacity:1}15%{opacity:1}17.5%{opacity:0}100%{opacity:0}}@keyframes cy-me8{0%{opacity:0}2.5%{opacity:1}12.5%{opacity:1}15%{opacity:0}100%{opacity:0}}.cy-n8 .cy-mframe>img+img{animation:cy-ms8 calc(var(--m-slide) * 8) linear infinite both}.cy-n8 .cy-mframe>img:last-child{animation-name:cy-me8}
@keyframes cy-ms9{0%{opacity:0}2.22%{opacity:1}13.33%{opacity:1}15.56%{opacity:0}100%{opacity:0}}@keyframes cy-me9{0%{opacity:0}2.22%{opacity:1}11.11%{opacity:1}13.33%{opacity:0}100%{opacity:0}}.cy-n9 .cy-mframe>img+img{animation:cy-ms9 calc(var(--m-slide) * 9) linear infinite both}.cy-n9 .cy-mframe>img:last-child{animation-name:cy-me9}
@keyframes cy-ms10{0%{opacity:0}2%{opacity:1}12%{opacity:1}14%{opacity:0}100%{opacity:0}}@keyframes cy-me10{0%{opacity:0}2%{opacity:1}10%{opacity:1}12%{opacity:0}100%{opacity:0}}.cy-n10 .cy-mframe>img+img{animation:cy-ms10 calc(var(--m-slide) * 10) linear infinite both}.cy-n10 .cy-mframe>img:last-child{animation-name:cy-me10}
.cy-slides .cy-mframe>img:nth-child(2){animation-delay:calc(var(--m-slide) * 1)}
.cy-slides .cy-mframe>img:nth-child(3){animation-delay:calc(var(--m-slide) * 2)}
.cy-slides .cy-mframe>img:nth-child(4){animation-delay:calc(var(--m-slide) * 3)}
.cy-slides .cy-mframe>img:nth-child(5){animation-delay:calc(var(--m-slide) * 4)}
.cy-slides .cy-mframe>img:nth-child(6){animation-delay:calc(var(--m-slide) * 5)}
.cy-slides .cy-mframe>img:nth-child(7){animation-delay:calc(var(--m-slide) * 6)}
.cy-slides .cy-mframe>img:nth-child(8){animation-delay:calc(var(--m-slide) * 7)}
.cy-slides .cy-mframe>img:nth-child(9){animation-delay:calc(var(--m-slide) * 8)}
.cy-slides .cy-mframe>img:nth-child(10){animation-delay:calc(var(--m-slide) * 9)}
@media (prefers-reduced-motion:reduce){.cy-slides .cy-mframe>img+img{animation:none!important;opacity:0}}
.cy-moframe{position:relative;overflow:hidden;display:block}
.cy-moframe>picture,.cy-moframe img{display:block}
.cy-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}
.cy-moclip.cy-live{opacity:1}
.cy-art .cy-moframe{border-radius:var(--art-radius,0);box-shadow:var(--art-shadow,none)}
.cy-art .cy-moframe img{box-shadow:none}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){@keyframes cy-mo-rise{from{opacity:0;translate:0 var(--motion-rise,120px);scale:.85}to{opacity:1;translate:0 0;scale:1}}@keyframes cy-mo-open{from{opacity:.2;clip-path:inset(var(--motion-open,14%) round 28px)}to{opacity:1;clip-path:inset(0 round 0)}}@keyframes cy-mo-slide{from{opacity:0;translate:var(--motion-slide,160px) 0;rotate:3deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes cy-mo-zoom{from{scale:var(--motion-zoom,1.35)}to{scale:1}}@keyframes cy-mo-drift{from{translate:0 0;scale:1.02}to{translate:0 var(--motion-drift,15%);scale:1.35}}@keyframes cy-mo-head{from{opacity:0;translate:calc(-1 * var(--motion-head,60px)) 0}to{opacity:1;translate:0 0}}@keyframes cy-mo-text{from{opacity:.08;translate:0 var(--motion-text,36px)}to{opacity:1;translate:0 0}}@keyframes cy-mo-line{from{scale:0 1}to{scale:1 1}}@keyframes cy-mo-bar{from{scale:0 1}to{scale:1 1}}@keyframes cy-mo-fadeout{from{opacity:1}to{opacity:.25}}.cy-motion .cy-rise{animation:cy-mo-open linear both;animation-timeline:view();animation-range:entry 0% cover 45%}.cy-motion .cy-slide{animation:cy-mo-slide linear both;animation-timeline:view();animation-range:entry 0% cover 40%}.cy-motion .cy-zoom .cy-moframe,.cy-motion .cy-zoom>picture{overflow:hidden;display:block;border-radius:var(--art-radius,0)}.cy-motion .cy-zoom img,.cy-motion .cy-zoom .cy-moclip{animation:cy-mo-zoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}.cy-motion .cy-drift>picture,.cy-motion .cy-drift .cy-moframe{overflow:hidden;display:block}.cy-motion .cy-drift img,.cy-motion .cy-drift .cy-moclip{animation:cy-mo-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}.cy-motion .cy-drift .cy-moframe,.cy-motion .cy-drift>picture{animation:cy-mo-fadeout linear both;animation-timeline:view();animation-range:exit 30% exit 100%}.cy-motion h2{animation:cy-mo-head linear both;animation-timeline:view();animation-range:entry 0% cover 30%}.cy-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:cy-mo-line linear both;animation-timeline:view();animation-range:entry 40% cover 35%}.cy-motion :is(p,li,blockquote,table):not(figure *){animation:cy-mo-text linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.cy-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:cy-mo-bar linear both;animation-timeline:scroll(root)}}}
@media (prefers-reduced-motion:reduce){.cy-moclip{display:none}}
/* Costa Rica Yoga Retreats: design C "Ocean Breath" (approved 2026-Oct-31). Light and airy, sea-glass blue and coral.
   THE THEME BLOCK: every colour, font, size, radius and timing lives in the :root block below; the rest of the file only
   uses these tokens. Sections: fonts + tokens, base, header/nav, homepage, showcases, articles + sections, footer. */
@font-face { font-family: Marcellus; src: url(/static/fonts/marcellus-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(/static/fonts/nunito-sans-normal-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --sea: #2b6f86; --sea-deep: #1c4e60; --glass: #d9ecee; --coral: #e8735a; --coral-deep: #cc5a41; --shell: #fffdf9; --foam: #f3f8f8; --sand: #f4ede3; --ink0: #18303a; --sage: #7aa58f;
  --bg: var(--shell); --paper: #ffffff; --ink: var(--ink0); --muted: #5b6d74; --line: rgba(24, 48, 58, .1); --link: var(--sea); --accent: var(--coral); --accent-2: var(--sea); --accent-3: var(--sage); --accent-bright: var(--coral);
  --f-display: Marcellus, Georgia, serif; --f-body: "Nunito Sans", system-ui, sans-serif; --f-logo: Marcellus, Georgia, serif; --f-nav: "Nunito Sans", system-ui, sans-serif;
  --fw-body: 400; --fw-strong: 700; --fw-display: 400; --lh-body: 1.65; --lh-heading: 1.12; --h-italic: normal; --logo-italic: normal; --quote-style: normal;
  --fs-body: 1rem; --fs-small: .9rem; --fs-label: .72rem; --fs-card: 1.25rem; --fs-h2: clamp(1.9rem, 3.2vw, 2.7rem); --fs-hero: clamp(2.6rem, 5vw, 4.4rem); --fs-logo: 2rem;
  --ls-label: .14em; --ls-logo: .02em; --ls-nav: .01em; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 52px; --sp-8: 80px;
  --gutter: 20px; --max: 1300px; --radius: 22px; --radius-sm: 12px; --pill: 999px; --ic: 20px; --ic-big: 44px; --mini: 64px; --mark-size: 50px;
  --top-bg: var(--sea-deep); --top-ink: #b8d6dc; --top-link: #fff; --mast-bg: var(--shell); --mast-border: 1px solid var(--line);
  --logo-ink: var(--ink0); --logo-accent: var(--sea); --logo-accent-dark: #9fd3dd; --logo-small: var(--coral); --mark-sun: var(--coral); --mark-ink: #fff;
  --btn-bg: var(--coral); --btn-ink: #fff; --btn-hover: var(--coral-deep); --bar: #fff; --bar-ink: var(--ink0); --bar-ink-on: var(--sea); --bar-icon: var(--coral);
  --hero-h: auto; --hero-align: center; --hero-tx-w: 560px; --hero-text-align: left; --hero-tx-margin: 0; --hero-stats-justify: flex-start;
  --hero-ink: #fff; --hero-kick: #ffd9cd; --hero-accent: #ffd2c4; --hero-muted: #eef6f7; --kick: var(--coral);
  --hero-shade: none; --feature-shade: linear-gradient(0deg, rgba(24, 48, 58, .85), transparent 60%); --band-shade: linear-gradient(90deg, rgba(28, 78, 96, .88), rgba(28, 78, 96, .25));
  --rule: 1px solid var(--line); --map-sec-bg: var(--foam); --map-shadow: 0 24px 50px -28px rgba(24, 48, 58, .4);
  --side-h: var(--sea); --side-h-ink: #fff; --side-h-t: var(--coral); --side-h-alt: var(--sage);
  --walks-bg: var(--foam); --guides-bg: var(--sand); --guides-ink: var(--ink0); --guides-muted: var(--muted); --guides-line: var(--line); --guides-rule: 1px solid var(--line);
  --dir-bg: var(--foam); --dir-h: min(70vh, 640px); --foot-bg: var(--sea-deep); --foot-ink: #fff; --foot-muted: #b8d6dc; --pp-filter: none;
  --card-bg: #fff; --card-ink: var(--ink); --card-muted: var(--muted); --card-shadow: 0 10px 30px -18px rgba(24, 48, 58, .35); --card-shadow-hover: 0 22px 40px -18px rgba(24, 48, 58, .45); --card-border: 0; --card-ratio: 4 / 3;
  --noimg-bg: var(--glass); --noimg-ink: var(--sea); --noimg-disc: #fff;
  --noimg-pattern: radial-gradient(circle at 25% 30%, rgba(232, 115, 90, .18) 0 18%, transparent 19%), radial-gradient(circle at 75% 72%, rgba(43, 111, 134, .14) 0 16%, transparent 17%);
  --tag-bg: rgba(255, 255, 255, .92); --tag-ink: var(--sea); --chip-bg: #fff; --chip-ink: var(--sea); --chip-line: var(--line); --chip-on-bg: var(--sea); --chip-on-ink: #fff;
  --pop-bg: #fff; --pop-ink: var(--ink0); --pop-muted: var(--muted);
  --show-bg: var(--shell); --show-bg-alt: var(--foam); --show-fade: 2s; --show-hold: 5s; --show-list-w: 0.95fr; --show-ph-w: 1.45fr; --show-ph-h: 520px; --show-ph-h-sm: 300px;
  --show-ph-radius: 200px 22px 200px 22px; --show-ph-radius-flip: 22px 200px 22px 200px; --show-glow: 0 0 0 1px rgba(232, 115, 90, .35), 0 0 38px 6px rgba(232, 115, 90, .38); --show-glow-line: var(--coral); --show-lift: translateY(-2px);
  --slide-every: 7s; --fade: 1.6s; --drift-from: 1.03; --drift-to: 1.1; --drift-x: -1%; --drift-slow: 18s; --sticky-h: 50px;
  --sticky-top: 0; --prose-w: 720px; --side-w: 320px; --minimap-h: 260px; --art-pic-radius: var(--radius); --fs-prose: 1.08rem; --lh-prose: 1.75;
  --crumb-ink: var(--muted); --sub-bg: #fff; --sub-ink: var(--sea); --hub-h-rule: 2px solid var(--glass); --focus: 2px solid var(--coral);
  --map-h: min(74vh, 700px); --map-radius: 22px;
  --map-land: #f6f3ec; --map-woods: #e3eedf; --map-park: #d2e6cf; --map-park-line: #a9caa6; --map-town: #ece7dd; --map-water: #bfe1e6; --map-river: #9fcfd6;
  --map-border: #7aa58f; --map-road: #ffffff; --map-road-major: #f1b19f; --map-label: #3f565f; --map-label-strong: #1c4e60; --map-halo: #ffffff;
  --map-icon-bg: #2b6f86; --map-icon-ink: #ffffff; --map-icon-ring: #ffffff; --map-group: #e8735a; --map-group-ring: #ffffff; --map-group-ink: #ffffff;
  /* turning mandala (static/mandala.js): Learning center background and the half circle on inner pages */
  --mandala-opacity: .2; --mandala-learn-opacity: .06; --mandala-line: 1.5; --mandala-learn-w: 90%; --mandala-side-size: min(96vh, 110vw, 1000px);
  --mandala-learn-shades: #cc5a41, #999999; --mandala-side-shades: #f2a48f, #e8735a, #cc5a41, #a8452f, #db6a4f, #b9503a;
  --mandala-learn-speed: 1; --mandala-learn-idle-turn: 60; --mandala-side-speed: .4; --mandala-side-boost: 10; --mandala-hover-r: 100;
  --map-group-scale: .7; --map-name-size: 10; --map-name-ink: #1c4e60;
  --map-icon-retreat: #2b6f86; --map-icon-ytt: #7b5aa6; --map-icon-surf: #1f8fa8; --map-icon-hotel: #a77a52; --map-icon-studio: #e8735a; --map-icon-eco: #5d9a6a; --map-icon-wellness: #c46a8f;
}

*, *::before, *::after { box-sizing: border-box; }
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, [data-slides] img.out { animation: pv-drift var(--slide-run, calc(var(--slide-every) + var(--fade))) linear both; }
[data-slides] img.on { opacity: 1; }
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-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 .pv-pop-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-1); }
.pv-pop .pv-pop-more { font-weight: var(--fw-strong); color: var(--link); }
.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, [data-slides] img.out { animation: none; } }

.y-top { background: var(--top-bg); color: var(--top-ink); font-size: var(--fs-label); letter-spacing: .04em; }
.y-top .wrap { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); }
.y-top a { color: var(--top-link); text-decoration: none; margin-right: var(--sp-4); }
.y-mast { background: var(--mast-bg); border-bottom: var(--mast-border); }
.y-mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-5); }
.y-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--logo-ink); }
.y-mark { width: var(--mark-size); height: var(--mark-size); flex: none; }
.y-mark .m-sun { fill: var(--mark-sun); } .y-mark .m-head { fill: var(--mark-ink); } .y-mark .m-body { stroke: var(--mark-ink); }
.y-logo b { display: block; font: var(--fw-display) var(--fs-logo)/1 var(--f-logo); letter-spacing: var(--ls-logo); }
.y-logo b i { color: var(--logo-accent); font-style: var(--logo-italic); }
.y-logo small { display: block; margin-top: var(--sp-1); font: var(--fw-strong) var(--fs-label)/1.4 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--logo-small); }
.y-search { display: flex; gap: var(--sp-2); }
.y-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: 250px; color: var(--ink); }
.y-search button, .y-btn { border: 0; background: var(--btn-bg); color: var(--btn-ink); 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); transition: transform .15s, background .15s; }
.y-search button:hover, .y-btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
.y-nav { background: var(--bar); position: sticky; top: 0; z-index: 20; }
.y-nav .wrap { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.y-nav a { color: var(--bar-ink); text-decoration: none; font: var(--fw-strong) var(--fs-small) var(--f-nav); letter-spacing: var(--ls-nav); padding: var(--sp-3); white-space: nowrap; display: flex; align-items: center; gap: var(--sp-2); border-bottom: 3px solid transparent; transition: border-color .15s, color .15s; }
.y-nav a:hover, .y-nav a.on { border-bottom-color: var(--accent-bright); color: var(--bar-ink-on); }
.y-nav .pv-ic { --ic: 17px; color: var(--bar-icon); }

.y-hero { position: relative; min-height: var(--hero-h); display: grid; align-items: var(--hero-align); color: var(--hero-ink); overflow: hidden; }
.y-hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); }
.y-hero > .wrap { position: relative; z-index: 2; padding-block: var(--sp-8) var(--sp-7); }
.y-hero-tx { max-width: var(--hero-tx-w); text-align: var(--hero-text-align); margin-inline: var(--hero-tx-margin); }
.y-kick { font: var(--fw-strong) var(--fs-label)/1 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--kick); margin: 0 0 var(--sp-3); }
.y-hero .y-kick { color: var(--hero-kick); }
.y-hero h1 { font-size: var(--fs-hero); }
.y-hero h1 i { color: var(--hero-accent); font-style: var(--h-italic); }
.y-lede { font-size: 1.15rem; margin: var(--sp-4) 0 var(--sp-5); color: var(--hero-muted); }
.y-stats { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); justify-content: var(--hero-stats-justify); }
.y-stats b { display: block; font: var(--fw-display) 2.2rem/1 var(--f-display); color: var(--hero-ink); }
.y-stats span { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--hero-kick); }
.y-noslide { position: absolute; inset: 0; background: var(--noimg-pattern), var(--noimg-bg); }

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

.y-mag { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: var(--sp-7); padding-block: var(--sp-7); }
.y-sh { font: var(--fw-strong) var(--fs-label)/1 var(--f-body); letter-spacing: var(--ls-label); text-transform: uppercase; background: var(--side-h); color: var(--side-h-ink); padding: var(--sp-3); margin-bottom: var(--sp-2); border-radius: var(--radius-sm); }
.y-sh.t { background: var(--side-h-t); } .y-sh.alt { background: var(--side-h-alt); }
.y-side section { margin-bottom: var(--sp-6); }
.y-cats { list-style: none; margin: 0; padding: 0; }
.y-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); }
.y-cats a:hover { color: var(--accent); }
.y-cats .pv-ic { color: var(--accent-2); --ic: 18px; }
.y-cats em { font-style: normal; color: var(--muted); font-size: var(--fs-label); }
.y-lead { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.y-feature { position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; color: var(--hero-ink); display: grid; align-items: end; }
.y-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.y-feature::after { content: ""; position: absolute; inset: 0; background: var(--feature-shade); }
.y-feature div { position: relative; z-index: 1; padding: var(--sp-6); }
.y-feature .y-kick { color: var(--hero-kick); }
.y-feature h2 a { color: inherit; text-decoration: none; }
.y-feature h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: var(--sp-2) 0; }
.y-feature p { margin: 0; color: var(--hero-muted); }
.y-lead ul { display: grid; gap: var(--sp-1); align-content: start; }
.y-block { margin-bottom: var(--sp-7); }
.y-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.pv-card { transition: transform .2s, box-shadow .2s; }
.pv-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.pv-card-tx h3 a { color: inherit; text-decoration: none; }

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

.y-walks { padding-block: var(--sp-8); background: var(--walks-bg); }
.y-walkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.y-walk { position: relative; min-height: 360px; border-radius: var(--radius); overflow: hidden; display: grid; align-items: end; text-decoration: none; color: var(--hero-ink); }
.y-walk::after { content: ""; position: absolute; inset: 0; background: var(--feature-shade); transition: opacity .3s; }
.y-walk:hover::after { opacity: .8; }
.y-walk-tx { position: relative; z-index: 1; padding: var(--sp-5); }
.y-walk h3 { font-size: 1.9rem; }
.y-walk p { margin: var(--sp-2) 0; color: var(--hero-muted); font-size: var(--fs-small); }
.y-walk .y-kick { color: var(--hero-kick); }
.y-more { font-weight: var(--fw-strong); font-size: var(--fs-small); color: var(--hero-accent); }

.y-learn { padding-block: var(--sp-8); position: relative; overflow: hidden; isolation: isolate; }
.y-learn > .wrap { position: relative; z-index: 1; }
.y-mandala { pointer-events: none; opacity: var(--mandala-opacity); }
.y-mandala svg { display: block; width: 100%; height: 100%; overflow: visible; }
.y-mandala-learn { position: absolute; left: 50%; top: 50%; width: var(--mandala-learn-w); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0;
  --mandala-shades: var(--mandala-learn-shades); --mandala-speed: var(--mandala-learn-speed); --mandala-idle-turn: var(--mandala-learn-idle-turn); opacity: var(--mandala-learn-opacity); }
.y-mandala-side { position: fixed; right: 0; top: 50%; width: var(--mandala-side-size); aspect-ratio: 1; transform: translate(50%, -50%); z-index: -1;
  --mandala-shades: var(--mandala-side-shades); --mandala-speed: var(--mandala-side-speed); --mandala-boost: var(--mandala-side-boost); }
.y-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.y-tile { display: block; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent-2); padding: var(--sp-5); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .2s, border-color .2s; }
.y-tile:nth-child(3n+2) { border-top-color: var(--accent); } .y-tile:nth-child(3n) { border-top-color: var(--accent-3); }
.y-tile:hover { transform: translateY(-3px); }
.y-tile h3 { font-size: 1.45rem; }
.y-tile p { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-small); }

.y-guides { padding-block: var(--sp-8); background: var(--guides-bg); color: var(--guides-ink); }
.y-guides .y-sec-h { border-bottom: var(--guides-rule); } .y-guides .y-note { color: var(--guides-muted); }
.y-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.y-pillar { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-4); text-decoration: none; color: inherit; padding: var(--sp-4) 0; border-top: 1px solid var(--guides-line); }
.y-pillar .y-num { grid-row: span 2; font: var(--fw-display) 2.6rem/1 var(--f-display); color: var(--accent-bright); }
.y-pillar h3 { font-size: 1.4rem; } .y-pillar p { margin: var(--sp-1) 0 0; color: var(--guides-muted); font-size: var(--fs-small); }
.y-pillar:hover h3 { color: var(--accent-bright); }

.y-dir { padding-block: var(--sp-7) var(--sp-8); background: var(--dir-bg); }
.y-dir-jump { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-4); }
.y-dir-jump a { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--accent-2); text-decoration: none; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); }
.y-dir-jump a:hover { background: var(--accent-2); color: var(--paper); }
.y-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; }
.y-dir-cols { columns: 4 250px; column-gap: var(--sp-6); column-rule: 1px solid var(--line); }
.y-dcol { break-inside: avoid; margin-bottom: var(--sp-6); }
.y-dcol h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.3rem; padding-bottom: var(--sp-2); border-bottom: 3px solid var(--accent); }
.y-dcol h3 .pv-ic { color: var(--accent); }
.y-dcol h3 em { margin-left: auto; font: var(--fw-body) var(--fs-small) var(--f-body); color: var(--muted); }
.y-dcol .pv-row { padding: var(--sp-2) 0; }

.y-foot { background: var(--foot-bg); color: var(--foot-muted); padding-block: var(--sp-7); font-size: var(--fs-small); }
.y-foot .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--sp-6); align-items: start; }
.y-foot b { color: var(--foot-ink); font: var(--fw-display) 1.7rem var(--f-logo); }
.y-foot b i { color: var(--logo-accent-dark); font-style: var(--logo-italic); }
.y-foot a { color: var(--foot-ink); display: block; text-decoration: none; padding: 2px 0; }
.y-pp { display: grid !important; justify-items: center; gap: var(--sp-1); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--foot-muted) !important; }
.y-pp img { width: 160px; height: auto; filter: var(--pp-filter); }

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

/* Full-width showcases: 5 place cards beside a wide crossfading photo; the featured card glows. .y-show-flip puts the photo on the left. */
.y-show { padding-block: var(--sp-7); background: var(--show-bg); }
.y-show-flip { background: var(--show-bg-alt); }
.y-show-in { display: grid; grid-template-columns: minmax(0, var(--show-list-w)) minmax(0, var(--show-ph-w)); gap: var(--sp-6); align-items: stretch; }
.y-show-flip .y-show-in { grid-template-columns: minmax(0, var(--show-ph-w)) minmax(0, var(--show-list-w)); }
.y-show-flip .y-show-ph { order: -1; border-radius: var(--show-ph-radius-flip); }
.y-show-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); align-content: center; }
.y-show-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; padding: var(--sp-4); background: var(--card-bg); color: var(--card-ink); border-radius: var(--radius-sm); box-shadow: var(--card-shadow); outline: 2px solid transparent; transition: box-shadow var(--show-fade) ease, outline-color var(--show-fade) ease, transform var(--show-fade) ease; }
.y-show-card.on { box-shadow: var(--show-glow); outline-color: var(--show-glow-line); transform: var(--show-lift); }
.y-show-card > .pv-ic { --ic: 22px; color: var(--accent-2); margin-top: var(--sp-1); }
.y-show-card h3 { font-size: var(--fs-card); margin: 0; }
.y-show-card h3 a { color: inherit; text-decoration: none; }
.y-show-card p { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--card-muted); }
.y-show-card .pv-where { color: var(--accent); font-weight: var(--fw-strong); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.y-show-card .pv-out { margin: 0; border: 0; }
.y-show-ph { position: relative; min-height: var(--show-ph-h); border-radius: var(--show-ph-radius); overflow: hidden; background: var(--noimg-bg); box-shadow: var(--map-shadow); }
.y-show-ph figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity var(--show-fade) ease; }
.y-show-ph figure.on { opacity: 1; }
.y-show-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--drift-from)); }
.y-show-ph figure.on img, .y-show-ph figure.out img { animation: pv-drift calc(var(--show-hold) + var(--show-fade) * 2) linear both; }
.y-show-ph figcaption { position: absolute; inset: auto 0 0; padding: var(--sp-7) var(--sp-5) var(--sp-4); background: var(--feature-shade); color: var(--hero-ink); display: grid; gap: var(--sp-1); }
.y-show-flip .y-show-ph figcaption { justify-items: end; text-align: right; }  /* the curved corner is bottom-left here */
.y-show-ph figcaption b { font: var(--fw-display) var(--fs-card)/1.2 var(--f-display); }
.y-show-ph figcaption span { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--hero-muted); }
@media (max-width: 900px) {
  .y-show-in, .y-show-flip .y-show-in { grid-template-columns: 1fr; }
  .y-show-ph, .y-show-flip .y-show-ph { order: -1; min-height: var(--show-ph-h-sm); }
}
@media (prefers-reduced-motion: reduce) { .y-show-ph figure.on img, .y-show-ph figure.out img { animation: none; } }

/* design C extras */
.y-nav { border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px -16px rgba(24, 48, 58, .4); }
.y-nav a.on, .y-nav a:hover { border-bottom-color: var(--coral); }
.y-hero-split { color: var(--ink0); background: linear-gradient(180deg, var(--foam), var(--shell)); }
.y-hero-split::after { display: none; }
.y-hero-split > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-7); align-items: center; padding-block: var(--sp-7); }
.y-hero-split .y-kick, .y-hero-split .y-stats span { color: var(--coral); }
.y-hero-split h1 i { color: var(--sea); } .y-hero-split .y-lede { color: var(--muted); } .y-hero-split .y-stats b { color: var(--sea); }
.y-hero-ph { position: relative; aspect-ratio: 5 / 4; border-radius: 200px 22px 200px 22px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(24, 48, 58, .55); }
.pv-card-img { margin: var(--sp-2) var(--sp-2) 0; border-radius: 16px; }
.y-tile { border: 0; border-top: 0; background: #fff; box-shadow: var(--card-shadow); border-left: 5px solid var(--sea); }
.y-tile:nth-child(3n+2) { border-left-color: var(--coral); } .y-tile:nth-child(3n) { border-left-color: var(--sage); }
.y-walk { border-radius: var(--radius); }
@media (max-width: 900px) { .y-hero-split > .wrap { grid-template-columns: 1fr; } }

/* ---------- site-only pieces ---------- */
.y-hop { position: absolute; left: -999px; top: var(--sp-2); background: var(--paper); color: var(--ink); padding: var(--sp-2) var(--sp-4); z-index: 50; border-radius: var(--radius-sm); }
.y-hop:focus { left: var(--sp-2); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.y-mag .y-sh { font: var(--fw-strong) var(--fs-label)/1 var(--f-body); }
.y-nav .pv-ic { --ic: 17px; color: var(--bar-icon); }
.pv-row b a, .pv-mini b a { color: inherit; text-decoration: none; }
.pv-row b a:hover, .pv-mini b a:hover, .y-show-card h3 a:hover, .pv-card-tx h3 a:hover { color: var(--accent); }
.pv-card-img { display: block; }

/* articles, sections and plain pages */
.y-page, .y-art { padding-block: var(--sp-6) var(--sp-8); }
.y-crumbs ol { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--crumb-ink); }
.y-crumbs li + li::before { content: "/"; margin-right: var(--sp-2); opacity: .5; }
.y-crumbs a { color: var(--crumb-ink); text-decoration: none; } .y-crumbs a:hover { color: var(--accent); }
.y-art-head { max-width: calc(var(--prose-w) + var(--side-w)); margin-bottom: var(--sp-6); }
.y-art-head h1 { font-size: var(--fs-h2); }
.y-art-head .y-lede, .y-page .y-lede { color: var(--muted); font-size: 1.2rem; margin: var(--sp-3) 0 0; max-width: 62ch; }
.y-meta { margin: var(--sp-4) 0 0; font-size: var(--fs-small); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.y-meta a { color: var(--sea); font-weight: var(--fw-strong); text-decoration: none; }
.y-meta img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.y-partner { display: inline-block; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--coral); margin: 0 0 var(--sp-2); }
.y-art-cols { display: grid; grid-template-columns: minmax(0, var(--prose-w)) var(--side-w); gap: var(--sp-7); align-items: start; }
.y-art-solo .y-art-cols { grid-template-columns: minmax(0, var(--prose-w)); }
.y-prose { font-size: var(--fs-prose); line-height: var(--lh-prose); min-width: 0; }
.y-prose h2 { font-size: 1.75rem; margin: var(--sp-7) 0 var(--sp-3); }
.y-prose h3 { font-size: 1.35rem; margin: var(--sp-6) 0 var(--sp-2); }
.y-prose p, .y-prose ul, .y-prose ol { margin: 0 0 var(--sp-4); }
.y-prose img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); margin: var(--sp-5) 0; }  /* every article photo runs the full text width */
.y-prose figure { margin: var(--sp-5) 0; } .y-prose figcaption { font-size: var(--fs-small); color: var(--muted); text-align: center; }
.y-prose blockquote { margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); border-left: 4px solid var(--coral); background: var(--foam); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.y-prose a { color: var(--sea); text-underline-offset: 3px; }
.y-prose strong { color: var(--ink0); }
.y-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-bottom: var(--sp-5); }
.y-prose th, .y-prose td { border-bottom: 1px solid var(--line); padding: var(--sp-2); text-align: left; }
.y-art-pic { margin: 0 0 var(--sp-5); } .y-art-pic img { width: 100%; height: auto; border-radius: var(--art-pic-radius); }
.y-art-side { position: sticky; top: calc(var(--sticky-h) + var(--sp-4)); display: grid; gap: var(--sp-5); }
.y-where { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.y-where .y-kick { display: flex; align-items: center; gap: var(--sp-1); margin: 0; }
.y-where h2 { font-size: var(--fs-card); }
.y-where .pv-where { margin: 0; color: var(--accent); font-weight: var(--fw-strong); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.y-minimap { position: relative; height: var(--minimap-h); border-radius: var(--radius-sm); overflow: hidden; background: var(--map-land); margin-block: var(--sp-2); }
.y-where .y-btn { justify-self: start; }
.y-fine { margin: 0; font-size: var(--fs-label); color: var(--muted); }
.y-more-list ul { list-style: none; margin: 0; padding: 0; }
.y-more-list li { border-bottom: 1px dotted var(--line); }
.y-more-list a { display: block; padding: var(--sp-2) 0; font-size: var(--fs-small); color: var(--ink); text-decoration: none; }
.y-more-list a:hover { color: var(--accent); }
.y-related { padding-block: var(--sp-7); background: var(--foam); }
.y-hub-h { font-size: 1.6rem; margin: var(--sp-6) 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: var(--hub-h-rule); }
.y-hub .y-grid { margin-top: var(--sp-4); }
.y-subs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.y-subs a { background: var(--sub-bg); color: var(--sub-ink); border: 1.5px solid var(--line); border-radius: var(--pill); padding: var(--sp-1) var(--sp-4); font-weight: var(--fw-strong); font-size: var(--fs-small); text-decoration: none; }
.y-subs a:hover { border-color: var(--sea); }
.y-simple { max-width: calc(var(--prose-w) + 2 * var(--gutter)); font-size: var(--fs-prose); line-height: var(--lh-prose); }
.y-simple h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.y-simple h2 { font-size: 1.6rem; margin: var(--sp-6) 0 var(--sp-3); }
.y-profile { display: flex; gap: var(--sp-5); align-items: flex-start; }
.y-avatar { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; flex: none; }
.y-simple .y-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.y-search-big { margin: var(--sp-4) 0; } .y-search-big input { flex: 1; min-width: 0; }
.y-found { color: var(--muted); }
.y-results .pv-card { grid-template-rows: auto; }
.y-foot nav a { display: block; }
.y-foot .y-pp a { display: grid; justify-items: center; gap: var(--sp-1); text-decoration: none; color: var(--foot-muted); }
.y-pp span { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.y-foot p { margin: var(--sp-2) 0 0; }
.cy-facts, .cy-faq { background: var(--foam); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); }
@media (max-width: 1000px) { .y-art-cols { grid-template-columns: 1fr; } .y-art-side { position: static; } }
@media (max-width: 600px) { .y-simple .y-grid { grid-template-columns: 1fr; } .y-profile { flex-direction: column; } .y-search-big { display: flex; } }