/* WBL fx: story-fill. The paragraph is fully readable without JS and with reduced motion. */
.fx-story{font:600 clamp(26px,4.2vw,46px)/1.22 var(--hf,system-ui);font-stretch:85%;letter-spacing:-.015em;max-width:24ch;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){html.fx-js [data-fx=story-fill]:not(.fx-on){opacity:.18}}

/* WBL fx: marker-word. The mark sits behind the word (absolute), so it never moves text. */
.fx-mark{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.fx-mark svg{position:absolute;left:-4%;width:108%;bottom:-.16em;height:.4em;overflow:visible;z-index:-1;pointer-events:none}
.fx-mark[data-shape=circle] svg{left:-7%;width:114%;top:-18%;height:136%;bottom:auto}
.fx-mark path{fill:none;stroke:var(--fx-mark,#d9622b);stroke-width:var(--fx-mark-w,5px);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){html.fx-js .fx-mark:not(.fx-on) svg{opacity:0}}

/* WBL fx: icon-draw. Plain stroke icons; fully drawn without JS. */
.fx-icon{width:var(--fx-icon-s,52px);height:var(--fx-icon-s,52px);fill:none;stroke:var(--fx-icon,#b24a17);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.fx-icon .fx-dot{fill:var(--fx-icon-dot,#d9622b);stroke:none}
@media (prefers-reduced-motion:no-preference){html.fx-js [data-fx=icon-draw]:not(.fx-on) .fx-icon{opacity:0}}

/* WBL fx: checklist-ticks. A normal <ul>; ticks are decoration (aria-hidden). */
.fx-ck{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fx-ck li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:17px;line-height:1.45}
.fx-ck svg{width:30px;height:30px;fill:none;stroke:var(--fx-ck,#2f7d4f);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:-2px}
.fx-ck b{display:block}
@media (prefers-reduced-motion:no-preference){html.fx-js [data-fx=checklist-ticks]:not(.fx-on) svg{opacity:0}}

/* WBL fx: flip-filter. Without JS every photo shows and the (useless) buttons stay hidden. */
.fx-ff-bar{display:none;flex-wrap:wrap;gap:8px;margin:0 0 16px}
html.fx-js .fx-ff-bar{display:flex}
.fx-ff-bar button{font:600 15px/1 var(--bf,system-ui);padding:12px 16px;min-height:44px;border-radius:99px;border:1px solid var(--line,#d9d1c3);background:var(--card,#fff);color:var(--ink,#1d2430);cursor:pointer}
.fx-ff-bar button[aria-pressed=true]{background:var(--ink,#1d2430);color:var(--bg,#fff);border-color:var(--ink,#1d2430)}
.fx-ff-grid{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(150px,45%),1fr))}
.fx-ff-grid li{margin:0;border-radius:var(--r,6px);overflow:hidden;background:var(--bg2,#ece6db);position:relative}
.fx-ff-grid li[hidden]{display:none}
.fx-ff-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.fx-ff-grid span{position:absolute;left:8px;bottom:8px;right:8px;font:600 12.5px/1.25 var(--bf,system-ui);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fx-ff-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* WBL fx: flip-expand. Without JS every card shows its details (no button). */
.fx-fe{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));align-items:start}
.fx-fe-card{background:var(--card,#fff);border:1px solid var(--line,#d9d1c3);border-radius:var(--r,6px);overflow:hidden}
.fx-fe-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.fx-fe-body{padding:18px 18px 20px}
.fx-fe-body h3{margin:0 0 6px}.fx-fe-body p{margin:0 0 12px;color:var(--mute,#4b5463);font-size:16px}
.fx-fe-btn{display:none;font:700 15px/1 var(--bf,system-ui);padding:12px 16px;min-height:44px;border-radius:var(--r,6px);border:1.5px solid currentColor;background:none;color:var(--ink,#1d2430);cursor:pointer}
html.fx-js .fx-fe-btn{display:inline-flex}
.fx-fe-more{margin-top:14px}
.fx-fe-more ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.fx-fe-more li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line,#d9d1c3);padding:6px 0;font-size:15.5px}
.fx-fe-more li b{white-space:nowrap}
html.fx-js .fx-fe-card:not(.is-open) .fx-fe-more{display:none}
.fx-fe-card.is-open{grid-column:1/-1}
@container (min-width:700px){.fx-fe-card.is-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fx-fe-card.is-open .fx-fe-img{height:100%;aspect-ratio:auto}}
.fx-fe-wrap{container-type:inline-size}

/* WBL fx: photo-zoom. Thumbs are plain links to the full photo. */
.fx-pz-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(140px,30%),1fr))}
.fx-pz-grid a{display:block;border-radius:var(--r,6px);overflow:hidden;background:var(--bg2,#ece6db);cursor:zoom-in}
.fx-pz-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.fx-pz-dlg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:rgba(16,20,28,.94);color:#fff;overflow:hidden;overscroll-behavior:contain}
.fx-pz-dlg[open]{display:grid;place-items:center}
.fx-pz-dlg::backdrop{background:transparent}
.fx-pz-dlg figure{margin:0;width:min(100%,1100px,calc((100vh - 120px)*1.5))}
.fx-pz-dlg img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--r,6px)}
.fx-pz-dlg figcaption{margin-top:12px;font:500 15px/1.4 var(--bf,system-ui);text-align:center}
.fx-pz-x{position:absolute;top:10px;right:10px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:400 30px/1 system-ui;cursor:pointer}

/* WBL fx: cta-handoff. Without JS the header shows the full Call pill. */
.fx-ho-btn{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 0 0 18px;border-radius:99px;background:var(--fx-ho,#d9622b);color:var(--fx-ho-ink,#1d2430);font:700 15px/1 var(--bf,system-ui);text-decoration:none;white-space:nowrap;flex:none}
.fx-ho-ic{display:grid;place-items:center;width:46px;height:46px;flex:none}
.fx-ho-ic svg{width:20px;height:20px;fill:currentColor}
html.fx-js .fx-ho-btn:not(.is-big){clip-path:inset(0 0 0 calc(100% - 46px) round 99px)}
html.fx-js .fx-ho-btn:not(.is-big) .fx-ho-txt{opacity:0}

/* WBL fx: odometer. inline-flex + line-height 1 + tabular digits: same box before and after JS (CLS 0). */
[data-fx=odometer]{display:inline-flex;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-od-v{display:inline-flex}
.fx-od-c{display:block;height:1em;overflow:hidden}
.fx-od-r{display:block}.fx-od-r span{display:block;height:1em}
.fx-od-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* WBL fx: star-fill. Each <i> holds an empty and a filled star; --c is how much of the filled star is cut off. */
.fx-stars{display:inline-flex;gap:.12em;font-size:var(--fx-star-s,28px);line-height:1}
.fx-stars i{position:relative;display:block;width:1em;height:1em}
.fx-stars svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--fx-star-off,#d9d1c3)}
.fx-stars svg.on{fill:var(--fx-star,#e8a317);clip-path:inset(0 var(--c,0%) 0 0)}
@media (prefers-reduced-motion:no-preference){html.fx-js [data-fx=star-fill] .fx-stars svg.on{clip-path:inset(0 100% 0 0)}}

/* WBL fx: map-pin. A drawn map (no map API, no tracking); the town list under it is real text. */
.fx-mp svg{display:block;width:100%;height:auto;border-radius:var(--r,6px)}
.fx-mp-ring{fill:color-mix(in srgb,var(--fx-mp,#d9622b) 14%,transparent);stroke:var(--fx-mp,#d9622b);stroke-width:2;stroke-dasharray:6 6}
.fx-mp-pulse{fill:none;stroke:var(--fx-mp,#d9622b);stroke-width:3;opacity:0}
.fx-mp-town circle{fill:var(--ink,#1d2430)}.fx-mp-town text{font:600 16px/1 var(--bf,system-ui);fill:var(--ink,#1d2430);paint-order:stroke;stroke:#f5f1ea;stroke-width:4.5px;stroke-linejoin:round}
.fx-mp-town.out circle{fill:#9aa1ab}.fx-mp-town.out text{fill:#6b7280}
@media (prefers-reduced-motion:no-preference){html.fx-js [data-fx=map-pin]:not(.fx-on) :is(.fx-mp-pin,.fx-mp-ring,.fx-mp-town){opacity:0}}

/* WBL fx: route-van. Without JS (or with reduced motion) the van sits at "fixed" and every step is lit. */
.fx-rv svg{display:block;width:100%;height:auto;overflow:visible}
.fx-rv-bed{fill:none;stroke:var(--fx-rv-road,#d9d1c3);stroke-width:16;stroke-linecap:round}
.fx-rv-road{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:7 9;stroke-linecap:round}
.fx-rv-done{fill:none;stroke:var(--fx-rv,#d9622b);stroke-width:5;stroke-linecap:round}
.fx-rv-stop{fill:#fff;stroke:var(--fx-rv,#d9622b);stroke-width:4}
.fx-rv.fx-on .fx-rv-stop:not(.is-on){stroke:#b9b2a5}
.fx-rv-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.fx-rv-steps li{border-left:3px solid var(--fx-rv,#d9622b);padding:2px 0 2px 12px;font-size:15.5px;line-height:1.4;transition:opacity .3s,border-color .3s}
.fx-rv-steps b{display:block;font:800 20px/1.1 var(--hf,system-ui);font-stretch:85%}
.fx-rv.fx-on .fx-rv-steps li:not(.is-on){opacity:.45;border-color:#b9b2a5}

/* WBL fx: season-switch. Without JS both panels show, stacked, and the switch is hidden. */
.fx-ss{--fx-ss:#d9622b}
.fx-ss-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:18px}
.fx-ss-icon{width:56px;height:56px;flex:none;fill:var(--fx-ss);overflow:visible}
.fx-ss-toggle{display:none;padding:4px;border-radius:99px;background:var(--bg2,#ece6db);gap:4px}
html.fx-js .fx-ss-toggle{display:inline-flex}
.fx-ss-toggle button{font:700 15px/1 var(--bf,system-ui);min-height:44px;padding:0 18px;border:0;border-radius:99px;background:none;color:var(--ink,#1d2430);cursor:pointer}
.fx-ss-toggle button[aria-pressed=true]{background:var(--fx-ss);color:#fff}
.fx-ss-panels{display:grid;gap:18px}
html.fx-js .fx-ss.fx-on .fx-ss-panels>*{grid-area:1/1}
.fx-ss-panel.is-off{visibility:hidden}
.fx-ss-panel h3{margin:0 0 10px}
.fx-ss-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fx-ss-panel li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line,#d9d1c3)}
.fx-ss-panel li b{color:var(--fx-ss);white-space:nowrap}

/* WBL fx: tilt-cards. The sheen only exists for a real mouse. */
.fx-tilt{position:relative;transform-style:preserve-3d;will-change:transform;--gx:50;--gy:0}
@media (hover:hover) and (pointer:fine){
  .fx-tilt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(circle at calc(var(--gx)*1%) calc(var(--gy)*1%),rgba(255,255,255,.45),transparent 60%)}
  .fx-tilt:hover:after{opacity:1}
}
@media (prefers-reduced-motion:reduce){.fx-tilt:after{display:none}}

/* WBL fx: seal-stamp. Seals are decoration; the facts are in the text under each. */
.fx-seal{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.fx-seal svg{width:min(120px,100%);height:auto;display:block;margin:0 auto 10px;overflow:visible}
.fx-seal .r1{fill:none;stroke:var(--fx-seal,#1f2a3a);stroke-width:3}
.fx-seal .r2{fill:none;stroke:var(--fx-seal,#1f2a3a);stroke-width:1.2;stroke-dasharray:2 4}
.fx-seal text{font:700 9.5px/1 var(--bf,system-ui);letter-spacing:.14em;fill:var(--fx-seal,#1f2a3a)}
.fx-seal .c{fill:var(--fx-seal-a,#d9622b)}
.fx-seal b{display:block;font:800 18px/1.1 var(--hf,system-ui);font-stretch:85%}
.fx-seal span{display:block;font-size:14px;color:var(--mute,#4b5463);margin-top:3px}
@media (prefers-reduced-motion:no-preference){html.fx-js [data-fx=seal-stamp]:not(.fx-on) svg{opacity:0}}