/* Explore SEQ site styles (option B, Big Sky). Colours, fonts and radii come from tokens.css (generated from tokens.json):
   use var(--ink) etc, never a hex colour for a brand colour. */
:root { --pad: 40px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.es { margin: 0; background: var(--alt); color: var(--text); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
:where(.es) img { display: block; max-width: 100%; height: auto; }
:where(.es) a { color: inherit; text-decoration: none; }
:where(.es) :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.es) :where(ul, ol) { list-style: none; }
:where(.es) figure { margin: 0; }
.es :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.es-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.es-skip { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.es-skip:focus { left: 8px; }
.es-ico { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; stroke-width: 1.9; fill: none; }

.es h2 { font: 700 clamp(38px, 4.7vw, 70px)/1 var(--font-heading); letter-spacing: -.032em; }
.eyebrow { font: 700 12.5px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.eyebrow--dark { color: var(--accent-ink); }
.lead { font-size: 19px; line-height: 1.55; color: var(--on-dark); max-width: 32em; margin-top: 20px; }
.lead--dark { color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 28px; font: 700 16px/1 var(--font-body); background: var(--accent); color: var(--ink); border: 0; border-radius: 16px; cursor: pointer; transition: background .2s, transform .2s; white-space: nowrap; }
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.es-link { display: inline-flex; align-items: center; gap: 9px; font: 600 15.5px/1.2 var(--font-body); color: var(--text); transition: gap .25s; }
.es-link:hover { gap: 14px; }
.es-link--light { color: #fff; }
.es-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.es-head--light h2 { color: #fff; }
.es-head__side { display: flex; align-items: center; gap: 26px; padding-bottom: 8px; }
.es-head__side > span { font: 600 15px/1 var(--font-body); color: var(--muted); }

/* header */
.es-top { position: fixed; left: 0; right: 0; top: 0; z-index: 60; color: #fff; transition: background .35s, box-shadow .35s; }
.es-top.is-solid { background: rgba(11, 27, 38, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.es-top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.es-logo { display: inline-flex; align-items: center; gap: 11px; font: 700 23px/1 var(--font-heading); letter-spacing: -.035em; color: #fff; }
.es-logo img { width: 34px; height: 34px; }
.es-logo__mark { width: 36px; height: 36px; flex: none; }
.es-nav { display: flex; gap: 4px; }
.es-nav a { position: relative; padding: 10px 15px; font: 500 15.5px/1 var(--font-body); color: rgba(255, 255, 255, .9); }
.es-nav a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.es-nav a:hover { color: #fff; }
.es-nav a:hover::after { transform: scaleX(1); }
.es-top__tools { display: flex; align-items: center; gap: 10px; }
.es-tool { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); font-size: 18px; transition: background .2s, border-color .2s; }
.es-tool:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.es-tool--saved span { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 11px/1 var(--font-body); }
.es-tool--saved span[data-empty] { display: none; }
.es-pill { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 14.5px/1 var(--font-body); transition: background .2s; }
.es-pill:hover { background: var(--accent); }
.es-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: none; cursor: pointer; position: relative; }
.es-burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, top .3s; }
.es-burger span:first-child { top: 17px; } .es-burger span:last-child { top: 25px; }
.es-burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.es-burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.es-menu { position: fixed; inset: 0; z-index: 55; background: var(--ink); padding: 110px var(--pad) 40px; overflow: auto; }
.es-menu[hidden] { display: none; }
.es-menu nav { display: grid; }
.es-menu a { font: 700 34px/1.1 var(--font-heading); letter-spacing: -.035em; color: #fff; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* hero */
.es-hero { position: relative; min-height: max(680px, min(100vh, 1020px)); min-height: max(680px, min(100svh, 1020px)); display: flex; color: #fff; background: var(--ink); overflow: hidden; }
.es-hero__slides { position: absolute; inset: 0; }
.es-hero__slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 27, 38, .62) 0%, rgba(11, 27, 38, .12) 26%, rgba(11, 27, 38, .2) 52%, rgba(11, 27, 38, .9) 100%); }
/* the first photo shows before any script runs; once the slideshow is live only the current photo shows */
.es-hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.es-hero__slides > img:first-child, .es-hero__slides > :first-child img { opacity: 1; }
.es-hero__slides.is-live img { opacity: 0; }
.es-hero__slides.is-live img.is-on { opacity: 1; }
[data-motion="on"] .es-hero__slides.is-live img.is-on { animation: es-zoom 9s ease-out both; }
@keyframes es-zoom { from { transform: scale(1.09); } to { transform: scale(1); } }
.es-hero__in { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-top: 140px; padding-bottom: 60px; }
.es-hero__copy { max-width: 900px; }
.es-hero .eyebrow { margin-bottom: 20px; }
.es-hero h1 { font: 700 clamp(44px, 6.1vw, 94px)/.97 var(--font-heading); letter-spacing: -.022em; word-spacing: .05em; text-wrap: balance; }
.es-hero h1 span { display: block; }
.es-find { display: flex; align-items: stretch; gap: 0; margin-top: 40px; padding: 8px; max-width: 760px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
.es-find__f { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 9px 20px; border-right: 1px solid rgba(255, 255, 255, .22); }
.es-find__f:nth-of-type(2) { border-right: 0; }
.es-find__f > span { font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.es-find__f select { appearance: none; -webkit-appearance: none; width: 100%; font: 600 18px/1.3 var(--font-body); color: #fff; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 18px; border: 0; padding: 2px 24px 2px 0; cursor: pointer; text-overflow: ellipsis; }
.es-find__f select:focus { outline: none; }
.es-find__f .es-sel__btn { padding: 2px 0; font: 600 18px/1.3 var(--font-body); color: #fff; }
.es-find__f .es-sel__btn .es-ico { color: rgba(255, 255, 255, .8); }
.es-find__f:focus-within > span { color: var(--accent); }
.es-find__f option { color: var(--text); }
.es-hero__cap { flex: none; width: 290px; padding-bottom: 6px; }
.es-hero__label { font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.es-hero__title { margin: 9px 0 18px; }
.es-hero__title a { display: inline-block; font: 600 19px/1.25 var(--font-heading); letter-spacing: -.015em; border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 3px;  color: #fff; }
.es-hero__title a:hover { border-color: var(--accent); color: var(--accent-hover); }
.es-hero__dots { display: flex; gap: 8px; }
.es-hero__dots button { flex: 1; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.es-hero__dots button::before, .es-hero__dots i { content: ""; position: absolute; left: 0; top: 10px; height: 3px; border-radius: 3px; }
.es-hero__dots button::before { right: 0; background: rgba(255, 255, 255, .3); }
.es-hero__dots i { width: 0; background: #fff; }
.es-hero__dots .is-on i { width: 100%; }
[data-motion="on"] .es-hero__dots .is-on i { animation: es-fill 6.5s linear both; }
@keyframes es-fill { from { width: 0; } to { width: 100%; } }
.js[data-motion="on"] .es-hero__copy > * { animation: es-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.js[data-motion="on"] .es-hero__copy > :nth-child(2) { animation-delay: .1s; }
.js[data-motion="on"] .es-hero__copy > :nth-child(3) { animation-delay: .22s; }
@keyframes es-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* activity chips */
.es-cats { padding: 44px 0 12px; }
/* the activity row is moved with a transform (home.js): --bleed is how far the view reaches past each content edge (icons fade out
   across it), --fl / --fr the fade widths, --ph the photo size, --li the item width, --cb / --co the arrow size and its gap outside the content */
.es-cats__car { position: relative; display: flow-root; --ph: 112px; --li: 124px; --bleed: 0px; --fl: 0px; --fr: 0px; --cb: 44px; --co: 18px; }
.es-cats__view { overflow: hidden; overflow: clip; margin: -14px calc(var(--bleed) * -1); padding: 14px 0; }
.es-cats__car.is-wrap .es-cats__view { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.es-cats__car.is-drag .es-cats__view { cursor: grabbing; }
.es-cats__car.is-drag .es-cats__row { pointer-events: none; }
.es-cats__row { display: flex; align-items: flex-start; gap: 22px; width: max-content; margin: 0 auto; }
.es-cats__car.is-wrap .es-cats__row { margin: 0; will-change: transform; }
.es-cats__car.is-fit .es-cats__row { gap: 30px; }
.es-cats__row li { flex: none; width: var(--li); min-width: 0; }
.es-cats__row a { display: grid; justify-items: center; align-content: start; gap: 14px; max-width: var(--li); text-align: center; font: 600 15.5px/1.2 var(--font-body); color: var(--text); -webkit-user-drag: none; }
.es-cats__row img { width: var(--ph); height: var(--ph); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0 var(--accent); transition: box-shadow .25s, transform .35s; -webkit-user-drag: none; }
.es-cats__row a:hover img { box-shadow: 0 0 0 4px var(--alt), 0 0 0 7px var(--accent); transform: translateY(-4px); }
.es-cats__btn { position: absolute; top: calc(var(--ph) / 2 - var(--cb) / 2); z-index: 2; display: grid; place-items: center; width: var(--cb); height: var(--cb); margin: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 18px -4px rgba(11, 27, 38, .35), 0 0 0 1px rgba(11, 27, 38, .08); cursor: pointer; transition: background .2s, transform .2s; }
.es-cats__btn[hidden] { display: none; }
.es-cats__btn:hover { background: var(--accent); }
.es-cats__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.es-cats__btn--prev { left: calc((var(--co) + var(--cb)) * -1); }   /* the arrows sit outside the content edges, in the bleed */
.es-cats__btn--next { right: calc((var(--co) + var(--cb)) * -1); }
.es-cats__btn--prev .es-ico { transform: rotate(180deg); }
.es-cats__btn .es-ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; }

/* this weekend */
.es-weekend { padding: 84px 0 110px; overflow: hidden; }
.es-rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))) 30px; scroll-padding-left: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))); }
.es-rail::-webkit-scrollbar { display: none; }
.es-ev { flex: none; width: 344px; scroll-snap-align: start; }
.es-ev > a { display: block; height: 100%; background: var(--white); border-radius: var(--radius-md); overflow: hidden; padding-bottom: 26px; box-shadow: 0 1px 0 rgba(18, 34, 44, .04), 0 22px 40px -30px rgba(18, 34, 44, .4); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.es-ev > a:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(18, 34, 44, .04), 0 34px 50px -30px rgba(18, 34, 44, .55); }
.es-ev__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.es-ev__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.es-ev > a:hover .es-ev__img img { transform: scale(1.06); }
.es-ev time { position: absolute; left: 14px; top: 14px; display: grid; justify-items: center; gap: 1px; min-width: 58px; padding: 9px 10px 8px; background: #fff; border-radius: 14px; }
.es-ev time span { font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.es-ev time b { font: 700 27px/1 var(--font-heading); letter-spacing: -.03em; color: var(--text); }
.es-ev__tag { font: 700 11.5px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-ink); margin: 22px 24px 9px; }
.es-ev h3 { font: 700 23px/1.12 var(--font-heading); letter-spacing: -.025em; margin: 0 24px 8px; }
.es-ev p:not(.es-ev__tag) { font-size: 15.5px; line-height: 1.5; color: var(--muted); margin: 0 24px; }
.es-ev--more { display: flex; flex-direction: column; justify-content: space-between; width: 270px; padding: 28px; border-radius: var(--radius-md); background: var(--ink); color: #fff; font: 700 30px/1.05 var(--font-heading); letter-spacing: -.035em; transition: background .25s; }
.es-ev--more .es-ico { width: 34px; height: 34px; color: var(--accent); transition: transform .3s; }
.es-ev--more:hover { background: var(--ink-3); }
.es-ev--more:hover .es-ico { transform: translateX(8px); }

/* featured bento */
.es-featured { background: var(--ink); padding: 110px 0 118px; }
.es-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 258px; gap: 16px; }
.es-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; border-radius: var(--radius-md); overflow: hidden; background: var(--ink-3); color: #fff; isolation: isolate; }
.es-tile--xl, .es-bento > .es-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.es-tile--wide, .es-bento > .es-tile:nth-child(4), .es-bento > .es-tile:nth-child(7) { grid-column: span 2; }
.es-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.es-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 20, 28, .88) 0%, rgba(8, 20, 28, .25) 46%, rgba(8, 20, 28, 0) 66%); transition: opacity .4s; }
.es-tile:hover img { transform: scale(1.06); }
.es-tile__txt { min-width: 0; }
.es-tile h3 a { color: inherit; }
.es-tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole tile is the link */
.es-tile__txt p { font: 700 11.5px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hover); margin-bottom: 8px; }
.es-tile__txt h3 { font: 700 24px/1.08 var(--font-heading); letter-spacing: -.028em; }
.es-tile__txt span { display: none; }
.es-tile--xl, .es-bento > .es-tile:nth-child(1) { padding: 32px 34px; }
.es-tile--xl .es-tile__txt, .es-bento > .es-tile:nth-child(1) .es-tile__txt { max-width: 520px; }
.es-tile--xl .es-tile__txt h3, .es-bento > .es-tile:nth-child(1) .es-tile__txt h3 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1; letter-spacing: -.04em; }
.es-tile--xl .es-tile__txt span, .es-bento > .es-tile:nth-child(1) .es-tile__txt span { display: block; font-size: 17px; line-height: 1.5; color: var(--on-dark); margin-top: 12px; }
.es-tile--wide .es-tile__txt h3, .es-bento > .es-tile:nth-child(4) .es-tile__txt h3, .es-bento > .es-tile:nth-child(7) .es-tile__txt h3 { font-size: 30px; }
.es-heart { position: absolute; right: 14px; top: 14px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(8, 20, 28, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 19px; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.es-heart:hover { transform: scale(1.1); background: rgba(8, 20, 28, .7); }
.es-heart[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.es-heart[aria-pressed="true"] .es-ico { fill: currentColor; }

/* regions accordion */
.es-regions { padding: 110px 0 118px; }
.es-acc { display: flex; gap: 12px; height: 540px; }
.es-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1); }
.es-panel.is-on { flex-grow: 4.2; }
.es-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s; filter: saturate(.75) brightness(.8); }
.es-panel.is-on img { filter: none; transform: scale(1.03); }
.es-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 20, 28, .9) 0%, rgba(8, 20, 28, .2) 55%, rgba(8, 20, 28, .25) 100%); }
.es-panel__txt { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.es-panel__txt span { position: absolute; left: 24px; top: 22px; font: 700 12.5px/1 var(--font-body); letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.es-panel h3 a { color: inherit; }
.es-panel h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole panel is the link */
.es-panel h3 { font: 700 26px/1 var(--font-heading); letter-spacing: -.03em; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; }
.es-panel p { display: none; font-size: 16.5px; line-height: 1.45; color: var(--on-dark); margin-top: 10px; max-width: 24em; }
.es-panel.is-on h3 { writing-mode: horizontal-tb; transform: none; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -.04em; }
.es-panel.is-on p { display: block; }
.es-panel__areas { display: none; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; position: relative; z-index: 2; }   /* above the stretched region link, so each area link takes its own tap */
.es-panel.is-on .es-panel__areas { display: flex; }
.es-panel__areas a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(11, 27, 38, .35); font: 600 14px/1 var(--font-body); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s; }
.es-panel__areas .is-area a { background: rgba(255, 255, 255, .92); border-color: transparent; color: var(--ink); }
.es-panel__areas a:hover, .es-panel__areas a:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.js[data-motion="on"] .es-panel.is-on h3, .js[data-motion="on"] .es-panel.is-on p { animation: es-rise .6s .12s cubic-bezier(.2, .7, .2, 1) both; }

/* day trip */
.es-day { background: var(--ink-2); color: #fff; padding: 118px 0; }
.es-day__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 0 64px; align-items: center; }
/* the heading holds two lines at most (a size step for long region names, balanced wrapping) and keeps room for two, so the section does not jump when the region changes */
.es-day h2 { font-size: clamp(34px, 3.6vw, 54px); text-wrap: balance; min-height: 2em; }
.es-day h2.is-long { font-size: clamp(32px, 3.1vw, 46px); }
.es-day .lead { min-height: 6.2em; }
.es-stops h3 { text-wrap: balance; overflow-wrap: anywhere; }
.es-day__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.es-stops { display: grid; gap: 14px; }
.es-stops li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; padding: 14px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md); }
.es-stops li:nth-child(2) { margin-left: 44px; }
.es-stops li:nth-child(3) { margin-left: 88px; }
.es-stops img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.es-stops span { font: 700 11.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.es-stops li { position: relative; transition: background .25s, border-color .25s; }
.es-stops li:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.es-stops h3 a::after { content: ""; position: absolute; inset: 0; }
.es-stops p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.es-day[hidden] { display: none; }
.es-day__regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.es-daychip { height: 42px; padding: 0 17px; font: 600 15px/1 var(--font-body); color: #fff; background: none; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.es-daychip:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.es-daychip.is-on { background: #fff; color: var(--ink); box-shadow: none; }
.es-day__again { background: none; border: 0; padding: 0; cursor: pointer; }
.es-stops h3 { font: 700 25px/1.1 var(--font-heading); letter-spacing: -.03em; margin: 9px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.es-stops p { font-size: 15.5px; line-height: 1.5; color: var(--on-dark); padding-right: 12px; }

/* guides */
.es-guides { padding: 110px 0 100px; }
.es-guides__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.es-guide__img { aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; }
.es-guide__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.es-guide { position: relative; }
.es-guide:hover .es-guide__img img { transform: scale(1.06); }
.es-guide h3 a { color: inherit; }
.es-guide h3 a::after { content: ""; position: absolute; inset: 0; }
.es-guide .es-ev__tag { margin: 20px 0 9px; }
.es-guide h3 { font: 700 22px/1.14 var(--font-heading); letter-spacing: -.025em; }

/* shop */
.es-shop { background: var(--alt-2); padding: 100px 0; }
.es-shop__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 64px; align-items: center; }
.es-soon { display: inline-block; margin-top: 28px; font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--accent); border-radius: 999px; padding: 10px 16px; }
.es-shop__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.es-shop__tiles li { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.es-shop__tiles img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.es-shop__tiles li:hover img { transform: scale(1.06); }
.es-shop__tiles h3 { position: absolute; left: 14px; bottom: 14px; font: 700 16px/1 var(--font-body); background: #fff; color: var(--text); padding: 11px 16px; border-radius: 999px; }

/* newsletter */
.es-news { position: relative; color: #fff; padding: 130px 0; overflow: hidden; background: var(--ink); isolation: isolate; text-align: center; }
.es-news__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.es-news::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 27, 38, .66); }
.es-news__in { max-width: 820px; }
.es-news h2 { text-wrap: balance; }
.es-news .lead { margin-left: auto; margin-right: auto; }
.es-news__form { display: flex; gap: 8px; margin: 38px auto 0; max-width: 700px; padding: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.es-news__form input { flex: 1; min-width: 0; font: 500 17px/1.2 var(--font-body); color: #fff; background: transparent; border: 0; padding: 0 18px; }
.es-news__form input::placeholder { color: rgba(255, 255, 255, .72); }
.es-news__form input:focus { outline: none; }
/* optional first name (about 30 percent) before the email field, with a quiet divider between them in a one-row form */
.es-news__form input[name="FIRSTNAME"] { flex: 0 0 30%; }
.es-news__form input[name="FIRSTNAME"] ~ input { border-left: 1px solid rgba(255, 255, 255, .28); }

/* footer */
.es-foot { background: var(--ink); color: #9fb0b8; padding: 84px 0 36px; font-size: 15.5px; }
.es-foot__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.2fr)); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.es-foot__brand p { margin-top: 18px; max-width: 26em; }
.es-foot h3 { font: 700 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.es-foot li { margin-bottom: 9px; }
.es-foot li a:hover { color: var(--accent); }
.es-foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 26px; font-size: 13.5px; color: #71838b; }
.es-foot__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.es-foot .es-foot__legal li { margin: 0; }
.es-foot__by { margin-left: auto; }
.es-foot__base a { color: #9fb0b8; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.es-foot__base a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* motion */
.js[data-motion="on"] [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js[data-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; }
.js[data-motion="on"] .es-rail [data-reveal]:nth-child(2), .js[data-motion="on"] .es-bento [data-reveal]:nth-child(2), .js[data-motion="on"] .es-guides__grid [data-reveal]:nth-child(2), .js[data-motion="on"] .es-stops [data-reveal]:nth-child(2) { transition-delay: .08s; }
.js[data-motion="on"] .es-rail [data-reveal]:nth-child(3), .js[data-motion="on"] .es-bento [data-reveal]:nth-child(3), .js[data-motion="on"] .es-guides__grid [data-reveal]:nth-child(3), .js[data-motion="on"] .es-stops [data-reveal]:nth-child(3) { transition-delay: .16s; }
.js[data-motion="on"] .es-rail [data-reveal]:nth-child(4), .js[data-motion="on"] .es-guides__grid [data-reveal]:nth-child(4) { transition-delay: .24s; }
[data-motion="off"] * { transition: none !important; animation: none !important; }

/* tablet */
@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .es-nav, .es-pill { display: none; }
  .es-burger { display: block; }
  .es-hero__in { flex-direction: column; align-items: flex-start; gap: 34px; }
  .es-hero__cap { width: 100%; max-width: 420px; }
  .es-cats__btn { display: none; }   /* swipe on a tablet or phone */
  .es-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
  .es-acc { flex-direction: column; height: auto; }
  .es-panel { flex: none; height: 96px; transition: height .6s cubic-bezier(.2, .7, .2, 1); }
  .es-panel.is-on { height: 320px; }
  .es-panel h3 { writing-mode: horizontal-tb; transform: none; }
  .es-panel__txt span { left: auto; right: 24px; }
  .es-day__grid, .es-shop__grid { grid-template-columns: minmax(0, 1fr); gap: 48px 0; }   /* minmax(0, ..): a row of chips that scrolls sideways must not widen the page */
  .es-day__text { min-width: 0; }
  .es-day h2, .es-day .lead { min-height: 0; }
  .es-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; }
  .es-foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .es-foot__brand { grid-column: 1 / -1; }
}

/* phone */
@media (max-width: 640px) {
  :root { --pad: 18px; --radius-md: 18px; }
  body.es { font-size: 16px; }
  .es-top__in { height: 66px; }
  .es-logo { font-size: 20px; gap: 9px; }
  .es-logo img { width: 30px; height: 30px; }
  .es-logo__mark { width: 31px; height: 31px; }
  .es-tool:not(.es-tool--saved) { display: none; }
  .es-tool, .es-burger { width: 42px; height: 42px; }
  .es-burger span { left: 12px; right: 12px; }
  .es-burger span:first-child { top: 16px; } .es-burger span:last-child { top: 24px; }
  .es-burger[aria-expanded="true"] span:first-child, .es-burger[aria-expanded="true"] span:last-child { top: 20px; }
  .es-hero { min-height: max(640px, 100vh); min-height: max(640px, 100svh); }
  .es-hero__in { padding-top: 110px; padding-bottom: 34px; gap: 26px; }
  .es-hero h1 { font-size: clamp(42px, 12.4vw, 56px); }
  .es-find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 24px; padding: 6px; border-radius: 20px; }
  .es-find__f { padding: 8px 12px 9px; gap: 3px; }
  .es-find__f > span { font-size: 10px; }
  .es-find__f .es-sel__btn, .es-find__f select { font-size: 15.5px; }
  .es-find__f .es-sel__btn { gap: 6px; padding: 1px 0; }
  .es-find__f .es-sel__btn .es-ico { width: 15px; height: 15px; }
  .es-find .btn { grid-column: 1 / -1; margin-top: 6px; height: 50px; }
  .es-cats { padding-top: 30px; }
  .es-cats__car { --ph: 84px; --li: 110px; }
  .es-cats__row a { font-size: 13.5px; gap: 10px; }
  .es-cats__row { gap: 4px; }
  .es-weekend { padding: 56px 0 72px; }
  .es-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .es-head__side { padding-bottom: 0; }
  .es-ev { width: 282px; }
  .es-ev--more { width: 220px; font-size: 26px; }
  .es-featured, .es-regions, .es-day, .es-guides, .es-shop { padding: 72px 0; }
  .es-bento { grid-auto-rows: 190px; gap: 10px; }
  .es-tile--xl, .es-bento > .es-tile:nth-child(1) { grid-row: span 2; }
  .es-tile { padding: 14px; }
  .es-tile__txt h3 { font-size: 18.5px; }
  .es-tile__txt p { font-size: 10px; letter-spacing: .1em; }
  .es-tile--xl, .es-bento > .es-tile:nth-child(1) { padding: 18px; }
  .es-tile--xl .es-tile__txt span, .es-bento > .es-tile:nth-child(1) .es-tile__txt span { font-size: 15px; }
  .es-tile--wide .es-tile__txt h3, .es-bento > .es-tile:nth-child(4) .es-tile__txt h3, .es-bento > .es-tile:nth-child(7) .es-tile__txt h3 { font-size: 23px; }
  .es-heart { width: 38px; height: 38px; right: 9px; top: 9px; font-size: 17px; }
  .es-panel { height: 84px; }
  .es-panel.is-on { height: 330px; }
  .es-stops li { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 10px; }
  .es-stops li:nth-child(2), .es-stops li:nth-child(3) { margin-left: 0; }
  .es-stops h3 { font-size: 21px; }
  .es-stops img { aspect-ratio: 1; }
  .es-guides__grid { gap: 28px 12px; }
  .es-guide h3 { font-size: 18.5px; }
  .es-shop__tiles { gap: 10px; }
  .es-shop__tiles h3 { left: 8px; bottom: 8px; font-size: 13px; padding: 8px 11px; }
  .es-news { padding: 88px 0; }
  .es-news__form { flex-direction: column; border-radius: 20px; }
  .es-news__form { gap: 6px; padding: 6px; }
  .es-news__form input { flex: none; width: 100%; height: 56px; padding: 0 16px; font-size: 17px; text-align: center; }
  .es-news__form .btn { width: 100%; height: 54px; }
  .es-news__form input[name="FIRSTNAME"] { flex: none; }
  .es-news__form input[name="FIRSTNAME"] ~ input { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
  .es-foot { padding: 60px 0 96px; }
  .es-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .es-foot__base { flex-direction: column; align-items: flex-start; gap: 12px; }
  .es-foot__by { margin-left: 0; }
  .es-day__regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 24px calc(var(--pad) * -1) 0; padding: 0 var(--pad); }
  .es-day__regions::-webkit-scrollbar { display: none; }
  .es-daychip { flex: none; height: 40px; padding: 0 15px; font-size: 14.5px; }
  .es-sel__list li[role="option"] { padding: 13px 14px; }
}

/* ------------------------------------------------------------------ shared site parts (added after the option B port) */
.es-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.es-dot[class$="--"] { display: none; } /* a card with no kind of day out (guides, events) shows no dot */
.es-dot--water { background: var(--cat-water); } .es-dot--nature { background: var(--cat-nature); } .es-dot--parks { background: var(--cat-parks); } .es-dot--food { background: var(--cat-food); } .es-dot--fun { background: var(--cat-fun); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 8px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); }
.btn--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--line:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* header on inner pages + the Explore drop-down */
body.es:not(.page-home) .es-top { background: var(--ink); }
body.es:not(.page-home) main { padding-top: 78px; }
.es-top:has(.es-nav__group:hover), .es-top:has(.es-nav__group:focus-within) { background: var(--ink); }
.es-nav { align-self: stretch; align-items: stretch; }
.es-nav__group { display: flex; align-items: stretch; }
.es-nav > a, .es-nav__link { display: inline-flex; align-items: center; gap: 6px; }
.es-nav > a::after, .es-nav__link::after { bottom: 21px; }
.es-nav__link .es-ico { width: 15px; height: 15px; opacity: .8; transition: transform .25s; }
.es-nav__group:hover .es-nav__link .es-ico, .es-nav__group:focus-within .es-nav__link .es-ico { transform: rotate(180deg); }
.es-mega { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .55); padding: 40px 0 46px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s, visibility .25s; }
.es-nav__group:hover .es-mega, .es-nav__group:focus-within .es-mega { opacity: 1; visibility: visible; transform: none; }
.es-mega__in { display: block; }
.es-mega__kinds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 28px; min-width: 0; align-items: start; }
.es-mega__col { min-width: 0; }
.es-nav__group--loc .es-mega__kinds { grid-auto-columns: minmax(0, 250px); gap: 0 36px; }   /* a few regions stay in neat columns instead of stretching across the panel */
.es-nav__group:has([data-auto="menu-locations"]:empty) { display: none; }   /* no region has places yet: no Locations menu */
.es-nav:has(.es-nav__group:hover) .es-nav__group:not(:hover) .es-mega { opacity: 0; visibility: hidden; transform: translateY(-6px); }   /* opening one closes the other, even when the other still has focus */
.es-mega__h { display: flex; align-items: flex-start; min-height: 2.5em; font: 700 12px/1.25 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.es-nav .es-mega .es-mega__h a { display: inline-flex; align-items: flex-start; gap: 9px; padding: 0; font: inherit; letter-spacing: inherit; color: #fff; }
.es-nav .es-mega .es-mega__h a:hover { color: var(--accent-hover); }
.es-mega__h .es-dot { margin-top: .12em; width: 11px; height: 11px; }
.es-mega ul { display: grid; gap: 0; }
.es-nav .es-mega li a { display: block; padding: 7px 0; font: 600 16.5px/1.25 var(--font-heading); letter-spacing: -.015em; color: #fff; }
.es-nav .es-mega a::after { display: none; }
.es-nav .es-mega li a:hover { color: var(--accent-hover); }
.es-nav .es-mega li.es-mega__all a { padding-top: 11px; font: 700 14.5px/1.25 var(--font-body); letter-spacing: 0; color: var(--accent); }
.es-nav .es-mega li.es-mega__all a:hover { color: #fff; }
.es-mega__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font: 400 14.5px/1.4 var(--font-body); color: var(--on-dark); }
.es-nav .es-mega .es-mega__foot a.es-mega__btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; font: 700 14.5px/1 var(--font-body); letter-spacing: 0; color: #fff; transition: background .2s, color .2s, border-color .2s; }
.es-nav .es-mega .es-mega__foot a.es-mega__btn .es-ico { width: 16px; height: 16px; color: var(--accent); transition: transform .25s, color .2s; }
.es-nav .es-mega .es-mega__foot a.es-mega__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.es-nav .es-mega .es-mega__foot a.es-mega__btn:hover .es-ico { color: var(--ink); transform: translateX(3px); }
@media (min-width: 1500px) { .es-nav .es-mega li a { font-size: 17.5px; } .es-mega__kinds { gap: 0 40px; } }
button.es-tool { background: none; color: inherit; cursor: pointer; }
.es-menu__sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 22px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.es-menu__sub:empty { display: none; }
.es-menu__sub--kinds { padding-bottom: 6px; border-bottom: 0; }
.es-menu .es-menu__sub a { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; font: 600 15px/1 var(--font-body); letter-spacing: 0; padding: 11px 15px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; }
.es-menu__lab { flex: 0 0 100%; margin: 0; font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* inner page top band + breadcrumbs */
.es-pagehero { background: var(--ink); color: #fff; padding: 56px 0 64px; }
.es-pagehero h1 { font: 700 clamp(38px, 5vw, 68px)/1 var(--font-heading); letter-spacing: -.03em; text-wrap: balance; }
.es-pagehero .lead { margin-top: 18px; max-width: 40em; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 14px/1.3 var(--font-body); color: var(--muted); margin-bottom: 22px; }
.breadcrumbs a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s, color .2s; }
.breadcrumbs a:hover { color: var(--text); text-decoration-color: currentColor; }
.breadcrumbs span { opacity: .5; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; }
.es-pagehero .breadcrumbs { color: var(--on-dark-muted); }
.es-pagehero .breadcrumbs a:hover, .es-pagehero .breadcrumbs [aria-current] { color: #fff; }

/* chips */
.es-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.es-chip { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 17px; font: 600 15px/1 var(--font-body); color: var(--text); background: #fff; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: box-shadow .18s, background .18s, color .18s, transform .18s; }
.es-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.es-chip:active { transform: scale(.97); }
.es-chip.is-on { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.es-chip .es-ico { color: var(--cat-water); }
.es-chip.is-busy { opacity: .6; }

/* place cards (Explore list, related places) */
.es-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
.es-card { position: relative; }
.es-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--alt-2); }
.es-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.es-card:hover .es-card__img img, .es-card.is-hot .es-card__img img { transform: scale(1.05); }
.es-card__type { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; background: rgba(255, 255, 255, .96); border-radius: 999px; font: 700 12.5px/1 var(--font-body); color: var(--text); }
.es-card .es-heart { background: rgba(255, 255, 255, .96); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; right: 12px; top: 12px; }
.es-card .es-heart:hover { background: #fff; color: var(--cat-food); }
.es-card .es-heart[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.es-card h3 { font: 700 22px/1.15 var(--font-heading); letter-spacing: -.025em; margin-top: 16px; }
.es-card h3 a::after { content: ""; position: absolute; inset: 0; }
.es-card__meta { font: 600 13.5px/1.3 var(--font-body); color: var(--muted); margin-top: 6px; }
.es-card__blurb { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.js[data-motion="on"] .es-card--in { animation: es-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes es-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* map pins and pop-ups (Explore page and post pages) */
.es-pin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(11, 27, 38, .45); transition: transform .2s; }
.es-pin.is-hot { transform: scale(1.55); }
.es-pin--water { background: var(--cat-water); } .es-pin--nature { background: var(--cat-nature); } .es-pin--parks { background: var(--cat-parks); } .es-pin--food { background: var(--cat-food); } .es-pin--fun { background: var(--cat-fun); }
.es-pin--me { background: var(--ink); width: 18px; height: 18px; box-shadow: 0 0 0 6px rgba(11, 27, 38, .18); }
.es-pin--here { width: 30px; height: 30px; background: var(--accent); border-color: var(--ink); box-shadow: 0 0 0 7px rgba(255, 179, 65, .3), 0 4px 12px rgba(11, 27, 38, .5); }
.es .leaflet-container { font-family: var(--font-body); background: var(--alt-2); }
.es .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 14px 34px -12px rgba(11, 27, 38, .5); }
.es .leaflet-popup-content { margin: 0; width: 230px !important; font: 400 14px/1.4 var(--font-body); }
.es .leaflet-popup-content img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.es-pop { padding: 12px 14px 14px; }
.es-pop b { display: block; font: 700 17px/1.2 var(--font-heading); letter-spacing: -.02em; color: var(--text); }
.es-pop__a { display: block; color: inherit; }
.es-pop em { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font: 700 13px/1 var(--font-body); font-style: normal; color: var(--accent-ink); transition: gap .2s; }
.es-pop__a:hover em { gap: 11px; }
.es-pop__a:hover b { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.es-pop span { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--font-body); color: var(--muted); margin-top: 5px; }
.es .leaflet-container a.leaflet-popup-close-button { top: 6px; right: 6px; width: 28px; height: 28px; background: rgba(255, 255, 255, .92); border-radius: 50%; color: var(--text); font: 400 20px/26px var(--font-body); }
.es .leaflet-control-attribution { font-size: 10.5px; }
.es .leaflet-bar { border: 0; box-shadow: 0 4px 14px rgba(11, 27, 38, .22); border-radius: 12px; overflow: hidden; }
.es .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; color: var(--text); }

/* saved places drawer (every page) */
.es-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(11, 27, 38, .5); }
.es-scrim[hidden] { display: none; }
.es-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(430px, 100vw); background: var(--alt); display: flex; flex-direction: column; transform: translateX(104%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); box-shadow: -30px 0 60px -30px rgba(11, 27, 38, .5); visibility: hidden; }
.es-drawer.is-open { transform: none; visibility: visible; }
.es-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.es .es-drawer__head h2 { font-size: 28px; letter-spacing: -.03em; }
.es-drawer__x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--alt-2); color: var(--text); font-size: 18px; cursor: pointer; }
.es-drawer__empty { padding: 28px 24px; color: var(--muted); }
.es-drawer__list { flex: 1; overflow: auto; padding: 8px 24px; }
.es-drawer__list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 42px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.es-drawer__list img { width: 80px; height: 62px; object-fit: cover; border-radius: 12px; }
.es-drawer__list b { display: block; font: 700 18px/1.15 var(--font-heading); letter-spacing: -.02em; }
.es-drawer__list span { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--font-body); color: var(--muted); margin-top: 5px; }
.es-drawer__list button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--accent-ink); font-size: 18px; cursor: pointer; }
.es-drawer__list button .es-ico { fill: currentColor; }
.es-drawer__list button:hover { background: var(--alt-2); }
.es-drawer__foot { padding: 18px 24px 24px; border-top: 1px solid var(--line); }
.es-drawer__foot .btn { width: 100%; }

/* styled dropdowns: site.js draws a button and a list over a real select (which keeps the value) */
.es-sel { position: relative; }
.es-sel__native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.es-sel__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.es-sel__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-sel__btn .es-ico { flex: none; width: 18px; height: 18px; transition: transform .25s; }
.es-sel.is-open .es-sel__btn .es-ico { transform: rotate(180deg); }
.es-sel__list { position: fixed; z-index: 120; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(11, 27, 38, .5), 0 2px 6px rgba(11, 27, 38, .08); }
.es-sel__list[hidden] { display: none; }
.js[data-motion="on"] .es-sel__list { animation: es-sel-in .18s cubic-bezier(.2, .7, .2, 1) both; }
.js[data-motion="on"] .es-sel__list.is-up { animation-name: es-sel-up; }
@keyframes es-sel-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes es-sel-up { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.es-sel__list li[role="option"] { display: flex; align-items: center; gap: 11px; margin: 0; padding: 12px 14px; border-radius: 12px; font: 600 16px/1.25 var(--font-body); color: var(--text); cursor: pointer; }
.es-sel__list li[role="option"]:hover, .es-sel__list li[role="option"]:focus { background: var(--alt); outline: none; }
.es-sel__list li[aria-selected="true"], .es-sel__list li[aria-selected="true"]:hover, .es-sel__list li[aria-selected="true"]:focus { background: var(--ink); color: #fff; }
.es-sel__list li span { flex: 1; min-width: 0; }
.es-sel__list li small { flex: none; font: 600 12.5px/1 var(--font-body); color: var(--muted); }
.es-sel__list li[aria-selected="true"] small { color: var(--on-dark-muted); }
.es-sel__group { margin: 0; padding: 12px 14px 6px; font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }

/* ad positions (the Explore SEQ ads plugin fills them; nothing shows while ads are off) */
.es-adslot:empty { display: none; }
.es-ad { margin: 52px 0 8px; padding: 18px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.es-ad__label { display: block; font: 700 10.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.es-ad--preview .es-ad__box { display: grid; place-items: center; min-height: 250px; padding: 20px; border: 1.5px dashed var(--line-2); border-radius: 14px; font: 600 14.5px/1.4 var(--font-body); color: var(--muted); }
.es-ad--own { padding: 0; border: 0; text-align: left; }
.es-ad--own a { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.es-ad--own a:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(18, 34, 44, .5); }
.es-ad--own img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.es-ad__txt { display: grid; gap: 6px; padding-right: 14px; }
.es-ad--own .es-ad__label { margin: 0 0 4px; color: var(--accent-ink); }
.es-ad--own b { font: 700 24px/1.12 var(--font-heading); letter-spacing: -.025em; color: var(--text); }
.es-ad--own .es-ad__txt > span:last-child { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.es-clist .es-ad { margin: 56px 0 0; }
@media (max-width: 640px) {
  .es-ad { margin-top: 36px; }
  .es-ad--own a { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 10px; }
  .es-ad--own b { font-size: 19px; }
}

/* plain content pages (About, Contact, Privacy, 404) until they are designed */
.page-hero { background: var(--ink); color: #fff; padding: 56px 0 64px; }
.page-hero h1 { font: 700 clamp(38px, 5vw, 68px)/1 var(--font-heading); letter-spacing: -.03em; }
.page-hero .lead { margin-top: 18px; }
.page-hero .breadcrumbs { color: var(--on-dark-muted); }
.es main > section:not([class]) { padding: 88px 0; }
.es main > section.sec--alt { padding: 88px 0; background: var(--alt-2); }
.es main > section.sec--ink { padding: 88px 0; background: var(--ink-2); color: #fff; }
.es main > section:not([class]) p, .es main > section.sec--alt p, .legal p { margin-bottom: 1em; max-width: 44em; }
.es main > section:not([class]) h2, .es main > section.sec--alt h2 { margin-bottom: .45em; font-size: clamp(30px, 3.4vw, 46px); }
.es main > section:not([class]) h3, .es main > section.sec--alt h3 { font: 700 22px/1.15 var(--font-heading); letter-spacing: -.02em; margin-bottom: .4em; }
.es main > section:not([class]) ul:not([class]) { list-style: disc; padding-left: 1.2em; }
.grid-2, .grid-3 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.small { font-size: 14px; color: var(--muted); }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; margin-bottom: 10px; }
.faq summary { font: 700 19px/1.3 var(--font-heading); letter-spacing: -.015em; cursor: pointer; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font-body); color: var(--accent-ink); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; color: var(--muted); }
.es main form:not([class]) label { display: block; font-weight: 600; margin: 14px 0 6px; }
.es main form:not([class]) input, .es main form:not([class]) textarea { width: 100%; font: inherit; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.es main form:not([class]) textarea { min-height: 140px; }
.es main form:not([class]) .btn { margin-top: 18px; }

@media (max-width: 1100px) {
  .es-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.es:not(.page-home) main { padding-top: 66px; }
  .es-pagehero, .page-hero { padding: 36px 0 44px; }
  .es-cards { grid-template-columns: 1fr; gap: 28px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .es main > section:not([class]), .es main > section.sec--alt, .es main > section.sec--ink { padding: 60px 0; }
  .es-chip { height: 42px; padding: 0 15px; font-size: 14.5px; }
}

/* phone polish (13 Nov 2026, checked at 384 px wide): finger-sized targets, nothing under 11 px, calmer footer */
@media (max-width: 640px) {
  .es-logo { min-height: 44px; }
  .es-link { min-height: 40px; }
  p > .es-link, .es-head__side .es-link { min-height: 36px; }
  .es-find__f > span { font-size: 10.5px; }
  .es-find__f .es-sel__btn { min-height: 30px; }
  .es-tile__txt p { font-size: 11px; }
  .es-hero__dots button { height: 32px; }
  .es-hero__dots button::before, .es-hero__dots i { top: 15px; }
  .es-foot { padding: 56px 0 44px; }
  .es-foot__base a { display: inline-flex; align-items: center; min-height: 36px; }
  .es-foot li { margin-bottom: 4px; }
  .es-foot li a { display: inline-flex; align-items: center; min-height: 36px; }
  .es-foot__legal { gap: 0 22px; }
  .es-day__again { min-height: 44px; }
  /* the big home tile: a short blurb, on a darker fade so the label and words read over a bright photo */
  .es-tile--xl .es-tile__txt span, .es-bento > .es-tile:nth-child(1) .es-tile__txt span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .es-tile::after { background: linear-gradient(to top, rgba(8, 20, 28, .92) 0%, rgba(8, 20, 28, .55) 38%, rgba(8, 20, 28, 0) 72%); }
  /* a post's breadcrumb stops at its type: the post's own name is the heading right under it */
  .es-post__head .breadcrumbs [aria-current], .es-post__head .breadcrumbs span:last-of-type { display: none; }
}