/* A retreat's page (DESIGN.md 5C2): the glance row, the footpath of stops, the cork board, sleeping snapshots, luggage tags. The hero, the map and the access list share the social page's styles. */
.wfg-rtp p, .wfg-rtp h3, .wfg-rtp ul, .wfg-rtp ol, .wfg-rtp figure { margin: 0; }

/* At a glance: a plain row split by dashed lines, a highlighter stroke behind each number */
.wfg-patches { list-style: none; margin: 0; padding: 6px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.wfg-patch { --c: #FFE39A; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 4px clamp(8px, 2vw, 20px); text-align: center; }
.wfg-patch:nth-child(2) { --c: #CFE3A8; }
.wfg-patch:nth-child(3) { --c: #FBD0B0; }
.wfg-patch:nth-child(4) { --c: #CFE2EC; }
.wfg-patch + .wfg-patch { border-left: 2px dashed color-mix(in srgb, var(--wfg-primary) 22%, transparent); }
.wfg-patch__badge { display: grid; place-items: center; gap: 6px; }
.wfg-patch__badge .wfg-ico { width: 32px; height: 32px; color: var(--wfg-eyebrow); stroke-width: 2; }
.wfg-patch__badge b { padding: 0 .14em; font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: clamp(1.8rem, 1.45rem + 1.3vw, 2.5rem); line-height: 1; color: var(--wfg-primary); background: linear-gradient(transparent 56%, var(--c) 56% 90%, transparent 90%); }
.wfg-patch__lbl { max-width: 17ch; font-weight: 500; line-height: 1.35; color: var(--wfg-ink); }

/* The shape of it: stops along a dashed footpath, across the page on desktop and down it on phones */
.wfg-stops { list-style: none; margin: 0 0 clamp(46px, 6vw, 70px); padding: 54px 0 0; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(20px, 4vw, 48px); }
.wfg-stops::before { content: ""; position: absolute; top: 19px; left: calc(100% / 6); right: calc(100% / 6); border-top: 3px dashed #9A7650; }
.wfg-stop { position: relative; display: grid; gap: 4px; align-content: start; justify-items: center; text-align: center; }
.wfg-stop::before { content: ""; position: absolute; top: -54px; left: 50%; width: 40px; height: 40px; translate: -50% 0; border-radius: 50%; background: var(--wfg-accent); box-shadow: 0 0 0 6px var(--wfg-sec-bg, var(--wfg-bg)), 0 0 0 8px color-mix(in srgb, var(--wfg-accent) 50%, transparent); }
.wfg-stop--b::before { background: var(--wfg-leaf); box-shadow: 0 0 0 6px var(--wfg-sec-bg, var(--wfg-bg)), 0 0 0 8px color-mix(in srgb, var(--wfg-leaf) 50%, transparent); }
.wfg-stop--c::before { background: var(--wfg-pop); box-shadow: 0 0 0 6px var(--wfg-sec-bg, var(--wfg-bg)), 0 0 0 8px color-mix(in srgb, var(--wfg-pop) 50%, transparent); }
.wfg-stop b { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: 1.55rem; line-height: 1.1; color: var(--wfg-primary); }
.wfg-stop__time { font-weight: 700; font-size: .9rem; color: var(--wfg-eyebrow); }
.wfg-stop > span:last-child { max-width: 32ch; }

/* The cork noticeboard, "What's on" */
.wfg-board { position: relative; margin-top: 30px; padding: clamp(46px, 5vw, 62px) clamp(14px, 2.6vw, 30px) clamp(20px, 3vw, 32px); border: clamp(8px, 1.2vw, 14px) solid #8A5B3B; border-radius: 12px; background: radial-gradient(circle at 30% 30%, rgb(90 55 25 / .25) 0 1px, transparent 1.6px) 0 0 / 8px 8px, radial-gradient(circle at 70% 60%, rgb(255 230 190 / .35) 0 1px, transparent 1.6px) 4px 4px / 9px 9px, #D4A96A; box-shadow: inset 0 0 0 2px rgb(60 35 15 / .25), 0 18px 30px -20px rgb(40 25 10 / .6); }
.wfg-board__title { position: absolute; top: -22px; left: 50%; translate: -50% 0; rotate: -2deg; margin: 0; padding: .15em 1.1em .3em; background: var(--wfg-paper); font: 400 clamp(1.7rem, 1.4rem + 1vw, 2.2rem)/1.1 var(--wfg-font-hero); color: var(--wfg-primary); white-space: nowrap; box-shadow: 0 8px 14px -8px rgb(0 0 0 / .5); }
.wfg-board__title::before { content: ""; position: absolute; top: -8px; left: -22px; width: 64px; height: 20px; rotate: -32deg; background: color-mix(in srgb, var(--wfg-accent) 80%, transparent); }
.wfg-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 26px); }
.wfg-acts--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wfg-act { --paper: var(--wfg-paper); --pin: #C4532B; --tilt: -2deg; position: relative; width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 12px 16px; border-radius: 3px; background: var(--paper); color: var(--wfg-ink); text-align: center; rotate: var(--tilt); box-shadow: 0 10px 14px -10px rgb(40 25 10 / .6), 0 1px 2px rgb(0 0 0 / .06); }
.wfg-act--b { --paper: #F8E5B7; --pin: var(--wfg-leaf); --tilt: 1.5deg; }
.wfg-act--c { --paper: #EAF3DC; --pin: #E9A23B; --tilt: -1deg; }
.wfg-act--d { --paper: #FBE3D2; --pin: #3F6B35; --tilt: 2deg; }
.wfg-act::before { content: ""; position: absolute; top: 7px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / .6) 0 2px, transparent 3px), var(--pin); box-shadow: 0 3px 3px rgb(0 0 0 / .35); }
.wfg-act__ico { width: 40px; height: 40px; margin-top: 4px; color: var(--wfg-primary); }
.wfg-act__name { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: 1.15rem; line-height: 1.15; color: var(--wfg-primary); }
.wfg-act__line { font-size: .88rem; line-height: 1.4; color: var(--wfg-muted); }
.wfg-act__in { position: absolute; z-index: 2; top: -12px; right: -10px; display: grid; place-items: center; width: 58px; height: 58px; padding: 4px; border-radius: 50%; background: var(--wfg-accent); color: var(--wfg-on-accent); font: 700 .78rem/1.05 var(--wfg-font-body); text-align: center; rotate: 14deg; box-shadow: 0 4px 8px rgb(0 0 0 / .25); }
.wfg-act--lined { background: linear-gradient(#E8A7A7, #E8A7A7) 0 22px / 100% 1.5px no-repeat, repeating-linear-gradient(transparent 0 21px, #C9DAEA 21px 22px) 0 6px, var(--paper); }
.wfg-act--kraft { --paper: #DDBF8F; background: radial-gradient(circle at 30% 40%, rgb(90 55 25 / .18) 0 .8px, transparent 1.2px) 0 0 / 7px 7px, var(--paper); }
.wfg-act--kraft .wfg-act__line { color: #4A3520; }
.wfg-act--grid { background: linear-gradient(90deg, rgb(63 107 53 / .14) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(rgb(63 107 53 / .14) 1px, transparent 1px) 0 0 / 12px 12px, #F4FAEC; }
.wfg-act--sticky { --paper: #FBD9C9; border-radius: 2px 2px 18px 2px; box-shadow: 0 12px 12px -10px rgb(40 25 10 / .6), inset -10px -10px 14px -12px rgb(120 60 30 / .35); }
.wfg-act--tape::before { top: -9px; width: 70px; height: 20px; border-radius: 0; rotate: -3deg; background: color-mix(in srgb, var(--pin) 55%, transparent); box-shadow: none; }
.wfg-act--tape.wfg-act--kraft::before { background: color-mix(in srgb, var(--wfg-leaf) 55%, transparent); rotate: 4deg; }
.wfg-act--clip::before { top: -12px; left: 24%; width: 12px; height: 34px; border-radius: 8px; background: none; border: 2.5px solid #8C99A3; }
.wfg-act--pin2::before { width: 12px; height: 12px; background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / .7) 0 1.6px, transparent 2.4px), #3F6B35; }
.wfg-act__in--burst { width: 66px; height: 66px; background: var(--wfg-pop); color: var(--wfg-on-pop); clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 90% 42%, 100% 55%, 88% 65%, 92% 82%, 76% 82%, 68% 97%, 54% 88%, 40% 100%, 32% 85%, 15% 88%, 16% 71%, 2% 62%, 12% 49%, 4% 33%, 20% 29%, 22% 12%, 38% 14%); box-shadow: none; rotate: 8deg; }
.wfg-act__in--green { background: var(--wfg-leaf); color: var(--wfg-paper); rotate: -10deg; }
.wfg-act__in--stamp { width: 82px; height: 40px; top: -8px; right: -12px; border-radius: 6px; background: rgb(255 253 246 / .6); border: 2.5px solid #C4532B; color: #C4532B; font: 400 1.05rem/1 var(--wfg-font-hero); rotate: -12deg; box-shadow: none; }
.wfg-act__in--hand { width: auto; height: auto; top: -14px; right: -4px; background: none; box-shadow: none; color: #C4532B; font: 400 1.7rem/1 var(--wfg-font-hero); rotate: 10deg; }
.wfg-rtp .wfg-board__sum { min-height: 1.5em; margin-top: 20px; text-align: center; font-weight: 600; color: var(--wfg-primary); }
.wfg-rtp .wfg-board__note { margin-top: 4px; text-align: center; font-size: .92rem; color: var(--wfg-muted); }

/* Where you'll sleep: lines and ticks beside two taped snapshots */
.wfg-rtp-sleep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.wfg-rtp-sleep__txt { display: grid; gap: 16px; }
.wfg-snaps { position: relative; min-height: clamp(280px, 34vw, 420px); }
.wfg-snaps__snap { position: absolute; left: 0; top: 0; width: 64%; margin: 0; padding: 10px 10px 8px; background: var(--wfg-paper); border-radius: 4px; rotate: -4deg; box-shadow: 0 20px 34px -18px rgb(40 25 10 / .6); }
.wfg-snaps__snap::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 40%; width: 84px; height: 22px; rotate: 5deg; background: color-mix(in srgb, var(--wfg-pop) 65%, transparent); }
.wfg-snaps__snap--b { left: auto; right: 0; top: auto; bottom: 0; rotate: 3deg; }
.wfg-snaps__snap--b::before { background: color-mix(in srgb, var(--wfg-leaf) 55%, transparent); rotate: -4deg; }
.wfg-snaps__ph { aspect-ratio: 4 / 3; border-radius: 2px; }
.wfg-snaps__snap figcaption { font: 400 1.3rem/1.2 var(--wfg-font-hero); color: var(--wfg-primary); text-align: center; padding-top: 6px; }

/* Luggage tags on twine */
.wfg-ltags { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 7vw, 96px); padding: 46px clamp(0px, 5vw, 70px) 0; margin-top: 10px; }
.wfg-ltags__twine { position: absolute; left: 0; top: 0; width: 100%; height: 40px; overflow: visible; }
.wfg-ltags__twine path { fill: none; stroke: #A9744F; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wfg-ltag { position: relative; filter: drop-shadow(0 16px 16px rgb(20 30 25 / .22)); rotate: -2deg; transform-origin: 50% -30px; }
.wfg-ltag--b { rotate: 2.5deg; }
.wfg-ltag::before { content: ""; position: absolute; z-index: 1; left: calc(50% - 1px); top: -30px; width: 2px; height: 56px; background: #A9744F; }
.wfg-ltag__card { position: relative; display: grid; gap: 12px; padding: 54px clamp(20px, 3vw, 34px) 28px; background: #E8CFA0; color: #2A1810; clip-path: polygon(18% 0, 82% 0, 100% 11%, 100% 100%, 0 100%, 0 11%); }
.wfg-ltag--b .wfg-ltag__card { background: #F6E6BF; }
.wfg-ltag__card::before { content: ""; position: absolute; top: 18px; left: 50%; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: var(--wfg-bg); box-shadow: 0 0 0 5px #C9A36E; }
.wfg-ltag h3 { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); line-height: 1.15; color: var(--wfg-primary); text-align: center; }
.wfg-ltag__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wfg-ltag__list li { position: relative; padding-left: 26px; }
.wfg-ltag__list li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 13px; height: 8px; border-radius: 0 100% 0 100%; background: var(--wfg-primary-2); rotate: -25deg; }
.wfg-ltag__not { margin-top: 4px; font-size: .88rem; font-style: italic; }

/* Getting there reuses the social page's map and lists */
.wfg-rtp--travel .wfg-sc-dl dt { display: flex; align-items: center; gap: .4em; }
.wfg-rtp--travel .wfg-sc-dl .wfg-ico { width: 1.1em; height: 1.1em; color: var(--wfg-eyebrow); }

@media (width < 940px) { .wfg-rtp-sleep { grid-template-columns: minmax(0, 1fr); } .wfg-snaps { min-height: 0; aspect-ratio: 5 / 4; width: min(100%, 520px); justify-self: center; } }
@media (width < 760px) {
	.wfg-patches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wfg-patch { padding-block: 14px; }
	.wfg-patch:nth-child(odd) { border-left: 0; }
	.wfg-patch:nth-child(n+3) { border-top: 2px dashed color-mix(in srgb, var(--wfg-primary) 22%, transparent); }
	.wfg-stops { grid-template-columns: minmax(0, 1fr); padding: 2px 0 0 56px; gap: 28px; }
	.wfg-stops::before { top: 20px; bottom: 36px; left: 17px; right: auto; border-top: 0; border-left: 3px dashed #9A7650; }
	.wfg-stop { justify-items: start; text-align: left; }
	.wfg-stop::before { top: 0; left: -56px; translate: 0 0; width: 36px; height: 36px; }
	.wfg-acts, .wfg-acts--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wfg-ltags { grid-template-columns: 1fr; padding: 36px 6px 0; gap: 64px; }
	.wfg-ltags__twine { display: none; }
}
@media (width < 640px) {
	.wfg-board { margin-top: 26px; }
	.wfg-act { padding: 22px 8px 12px; }
	.wfg-act__ico { width: 34px; height: 34px; }
	.wfg-act__name { font-size: 1.02rem; }
	.wfg-act__line { font-size: .82rem; }
	.wfg-act__in { width: 50px; height: 50px; font-size: .7rem; right: -6px; }
	.wfg-snaps__snap { width: 70%; }
}