/* JGG Places — single place page (2.2).
 * Everything is scoped to .jggp so it can't fight Foxiz.
 *
 * Layout follows travel-directory conventions (title above a photo mosaic, sticky tab bar,
 * main column + sidebar cards) in JGG's own brand:
 * Colours follow the JGG Brand Guidelines 2026:
 * - Black grounds the type badge, the LGBTQ+ box, the main button and the tour banner.
 * - Yellow #FEED2A highlights key info (button text, the map pin and label).
 *   Text on yellow is always black.
 * - Plan your visit, Hours and Contact are white cards with a hairline border and black Geist Mono labels.
 * - The rainbow gradient is the brand's voice: it marks queer content (the LGBTQ+ context label).
 *   Used sparingly, never as a fill or a decorative rule.
 * - Rainbow colours Nurture (green) and Love (red) for the Open / Closed squares.
 * - Fonts: Geist; Geist Mono for information (labels, hours, exit codes), uppercase for labels.
 * - Every colour comes from the tokens below; Foxiz dark mode only swaps tokens.
 * - Hard edges only: no rounded corners anywhere (brand rule), including buttons, pins and the status dot.
 */

.jggp {
	/* Brand palette (JGG Brand Guidelines 2026). */
	--jggp-yellow: #FEED2A;  /* Brighter than brand Hope (#F7EC47), chosen for screen. */
	--jggp-black: #000;
	--jggp-white: #fff;
	--jggp-passion: #9E10A8;
	--jggp-equality: #143AB0;
	--jggp-nurture: #13A160;
	--jggp-community: #E87408;
	--jggp-love: #E61818;
	--jggp-gradient: linear-gradient(90deg, #13A160 0%, #21AEE1 20%, #DB21AC 40%, #E61818 60%, #E87408 80%, #F7EC47 100%); /* LGBTQ+ context label: green, blue, magenta, red, orange, yellow. */
	--jggp-open: var(--jggp-nurture);
	--jggp-shut: var(--jggp-love);

	/* The black information column. */
	--jggp-dark-line: #2c2c2c;
	--jggp-dark-muted: #a0a0a0;

	--jggp-bg: #fff;
	--jggp-ink: #000;
	--jggp-text: #1f1f1f;
	--jggp-muted: #666;
	--jggp-line: #e2e2e2;
	--jggp-panel: #f5f5f3;
	--jggp-stripe: #f7f7f7; /* Hours table stripes: neutral grey (the panel grey reads a little warm). */
	--jggp-star-off: #dcdcdc; /* Empty star boxes. */
	--jggp-hover: #ebebe9;
	--jggp-cta-bg: var(--jggp-black);
	--jggp-cta-fg: var(--jggp-yellow);

	--jggp-sans: "Geist JGGP", "Geist", sans-serif;
	--jggp-mono: "Geist Mono JGGP", "Geist Mono", monospace;

	--jggp-max: 1260px;
	--jggp-gutter: 24px;
	--jggp-sticky-top: 0px;  /* place.js sets this to the height of a sticky site header. */

	color: var(--jggp-text);
	background: var(--jggp-bg);
	font-family: var(--jggp-sans);
	font-size: 16px;
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Foxiz dark mode sets data-theme="dark" on <html>; #191c20 is its dark page colour. */
[data-theme="dark"] .jggp {
	--jggp-bg: #191c20;
	--jggp-ink: #fff;
	--jggp-text: #e6e6e6;
	--jggp-muted: #a3a7ad;
	--jggp-line: #33373d;
	--jggp-panel: #22262b;
	--jggp-stripe: #22262b;
	--jggp-star-off: #3a3e44;
	--jggp-hover: #2c3036;
	--jggp-cta-bg: var(--jggp-yellow);
	--jggp-cta-fg: #000;
}

/* ---------- Reset (scoped) ---------- */

.jggp *,
.jggp *::before,
.jggp *::after { box-sizing: border-box; }
.jggp h1, .jggp h2, .jggp h3, .jggp h4, .jggp p, .jggp li, .jggp dt, .jggp dd, .jggp th, .jggp td,
.jggp a, .jggp button, .jggp summary, .jggp figcaption, .jggp span { font-family: inherit; }
.jggp a { color: inherit; }
.jggp img { display: block; max-width: 100%; height: auto; }
.jggp ul, .jggp ol, .jggp dl, .jggp dd, .jggp figure { margin: 0; padding: 0; list-style: none; }
.jggp button { font: inherit; color: inherit; }
.jggp p { margin: 0; }
.jggp table { border-collapse: collapse; width: 100%; margin: 0; border: 0; }
.jggp th, .jggp td { padding: 0; border: 0; background: none; text-align: left; }
.jggp-icon { width: 20px; height: 20px; flex: none; }
.jggp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.jggp-wrap {
	max-width: calc(var(--jggp-max) + 2 * var(--jggp-gutter));
	margin: 0 auto;
	padding: 0 var(--jggp-gutter) 48px;
}
.jggp-anchor { scroll-margin-top: calc(var(--jggp-sticky-top) + 72px); }

/* ---------- Shared bits ---------- */

.jggp .jggp-h2 { margin: 0 0 16px; color: var(--jggp-ink); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.jggp .jggp-h3 { margin: 0; color: var(--jggp-ink); font-size: 18px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; }

/* Exit code chip, like the plates on Tokyo subway exit signs. */
.jggp .jggp-exit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	margin-right: 6px;
	padding: 2px 6px;
	background: #000;
	color: var(--jggp-yellow);
	font-family: var(--jggp-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: 1px;
}

/* Outline pill (Share, Get directions). */
.jggp .jggp-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1.5px solid var(--jggp-ink);
	background: transparent;
	color: var(--jggp-ink);
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}
.jggp .jggp-pill:hover { background: var(--jggp-panel); }
.jggp .jggp-pill.is-copied { background: var(--jggp-yellow); border-color: #000; color: #000; } /* "Link copied" confirmation. */
.jggp-pill .jggp-icon { width: 17px; height: 17px; }
.jggp .jggp-pill--block { display: flex; width: 100%; margin-top: 16px; }

/* Hard edges everywhere in the template (brand). The theme and Elementor's global styles round
   buttons and fields, so this wins over them. Radio buttons keep their circle. */
.jggp :is(button, .jggp-btn, .jggp-pill, a.jggp-btn, input:not([type="radio"]), select, textarea, dialog) { border-radius: 0 !important; }

/* Main button. */
.jggp .jggp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 10px 22px;
	border: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, opacity .15s;
}
.jggp .jggp-btn:hover { transform: translateY(-1px); opacity: .92; }
.jggp-btn .jggp-icon { width: 17px; height: 17px; }
.jggp .jggp-btn--cta { background: var(--jggp-cta-bg); color: var(--jggp-cta-fg); }
.jggp .jggp-btn--yellow { background: var(--jggp-yellow); color: #000; }
.jggp .jggp-btn--sm { display: inline-flex; width: auto; min-height: 42px; padding: 8px 18px; font-size: 14px; }

.jggp .jggp-sublink { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--jggp-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.jggp-sublink .jggp-icon { width: 15px; height: 15px; }

/* Open now / Closed (filled in by place.js). */
.jggp .jggp-open { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--jggp-ink); }
.jggp .jggp-open[hidden] { display: none; }
.jggp-open__dot { width: 9px; height: 9px; flex: none; background: var(--jggp-muted); }
.jggp-open.is-open .jggp-open__dot { background: var(--jggp-open); }
.jggp-open.is-closed .jggp-open__dot { background: var(--jggp-shut); }
.has-open-status .jggp-open-fallback { display: none; }

/* Tooltip */
.jggp-tip { display: inline-flex; }
.jggp .jggp-tip__btn { display: inline-flex; padding: 2px; border: 0; background: none; cursor: help; color: inherit; opacity: .7; }
.jggp-tip__btn .jggp-icon { width: 16px; height: 16px; }
.jggp .jggp-tip__text {
	position: absolute;
	left: 20px; bottom: calc(100% - 6px);
	z-index: 5;
	width: max-content;
	max-width: min(320px, calc(100% - 40px));
	padding: 10px 12px;
	background: var(--jggp-black);
	color: var(--jggp-white);
	font-size: 13px;
	font-weight: 450;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s;
}
.jggp-tip:hover .jggp-tip__text,
.jggp-tip:focus-within .jggp-tip__text { opacity: 1; visibility: visible; }

/* ---------- Breadcrumb ---------- */

.jggp-crumbs { padding: 18px 0 14px; font-size: 13.5px; color: var(--jggp-muted); }
.jggp-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.jggp-crumbs li + li::before { content: "›"; margin: 0 8px; }
.jggp .jggp-crumbs a { color: var(--jggp-muted); text-decoration: none; }
.jggp .jggp-crumbs a:hover { color: var(--jggp-ink); text-decoration: underline; text-underline-offset: 3px; }
.jggp-crumbs__current { display: none; }

/* ---------- Title block ---------- */

.jggp .jggp-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--jggp-panel);
	color: var(--jggp-text);
	font-size: 15px;
	line-height: 1.5;
}
.jggp-notice .jggp-icon { margin-top: 1px; color: var(--jggp-ink); }
.jggp-notice strong { color: var(--jggp-ink); font-weight: 700; }
.jggp .jggp-notice--permanently_closed { background: var(--jggp-black); color: var(--jggp-white); }
.jggp-notice--permanently_closed .jggp-icon,
.jggp-notice--permanently_closed strong { color: var(--jggp-yellow); }

.jggp-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.jggp-head__main { min-width: 0; }
.jggp-head__actions { display: flex; gap: 10px; flex: none; padding-bottom: 2px; }

.jggp .jggp-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 7px calc(11px - .03em) 7px 11px; /* Right side drops the trailing letter-spacing. */
	text-box: trim-both cap alphabetic; /* Box hugs the capitals, so equal padding = equal space. Browsers without it fall back below. */
	background: var(--jggp-black);
	color: var(--jggp-yellow);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
}
@supports (text-box: trim-both cap alphabetic) {
	.jggp .jggp-badge { padding-top: 7.5px; padding-bottom: 8.5px; } /* Measured: Geist caps sit ~.5px below the font's cap metric. */
}
[data-theme="dark"] .jggp-badge { box-shadow: inset 0 0 0 1px var(--jggp-line); }

.jggp-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.jggp .jggp-title { margin: 0; color: var(--jggp-ink); font-size: clamp(36px, 4.2vw, 58px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; }
.jggp .jggp-title-ja { font-size: 18px; font-weight: 600; color: var(--jggp-muted); letter-spacing: .03em; }

.jggp .jggp-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; }
.jggp-facts li { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--jggp-ink); }
.jggp-facts .jggp-icon { width: 18px; height: 18px; color: var(--jggp-ink); }
.jggp-facts .jggp-facts__icon--wine { transform: scale(1.15); }

/* Rating in the title block (shown instead of Open now once a place has reviews). */
.jggp .jggp-rating-fact a { display: inline-flex; align-items: center; gap: 8px; color: var(--jggp-ink); text-decoration: none; }
.jggp-rating-fact__avg { font-weight: 600; font-variant-numeric: tabular-nums; }
.jggp .jggp-rating-fact a:hover .jggp-rating-fact__count { text-decoration: underline; text-underline-offset: 3px; }

/* Star boxes: black squares with a white star; the last one partly filled for e.g. 4.5. */
.jggp-stars { display: inline-flex; gap: 2px; vertical-align: middle; --jggp-star-size: 20px; }
.jggp-stars--sm { --jggp-star-size: 16px; gap: 2px; }
.jggp-stars--lg { --jggp-star-size: 28px; gap: 3px; }
.jggp-star { display: inline-flex; align-items: center; justify-content: center; width: var(--jggp-star-size); height: var(--jggp-star-size); background: linear-gradient(90deg, var(--jggp-ink) var(--jggp-fill, 0%), var(--jggp-star-off) var(--jggp-fill, 0%)); }
.jggp-star svg { display: block; width: 76%; height: 76%; fill: var(--jggp-bg); }

/* ---------- Photo mosaic ---------- */

.jggp-mosaic {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 6px;
	height: clamp(280px, 33vw, 450px);
	margin-top: 20px;
	overflow: hidden;
}
.jggp-mosaic__track { display: contents; }
.jggp-mosaic__item {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: var(--jggp-panel);
	overflow: hidden;
	cursor: zoom-in;
}
.jggp-mosaic__item--main { grid-row: 1 / span 2; }
.jggp-mosaic__item:nth-child(n+4) { display: none; }
.jggp-mosaic__img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.jggp-mosaic__item:hover .jggp-mosaic__img { transform: scale(1.03); }

/* Fewer photos: the map takes the empty tile(s). */
.jggp-mosaic--1:not(.jggp-mosaic--map):not(.jggp-mosaic--share) { grid-template-columns: 1fr; }
.jggp-mosaic--2:not(.jggp-mosaic--map):not(.jggp-mosaic--share) .jggp-mosaic__item:nth-child(2) { grid-row: 1 / span 2; }
.jggp-mosaic--1 .jggp-mosaic__map,
.jggp-mosaic--1 .jggp-mosaic__share { grid-row: 1 / span 2; }

/* "Share your photos" tile (fewer than 3 photos, reviews on): a blurred, darkened copy of the place's
   first photo with the words on top, so it reads as part of the gallery. Black when there are no photos. */
.jggp-mosaic__share { position: relative; display: flex; align-items: flex-end; min-width: 0; min-height: 0; overflow: hidden; background: #000; color: #fff; }
.jggp .jggp-mosaic__share-bg { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px) !important; max-width: none; object-fit: cover; filter: blur(16px) saturate(1.15); transform: scale(1.05); }
.jggp-mosaic__share--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .78) 100%); }
.jggp-mosaic__share-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 28px; }
.jggp .jggp-mosaic__share-eyebrow { margin: 0; color: var(--jggp-yellow); font-family: var(--jggp-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jggp .jggp-mosaic__share-title { margin: 0; color: #fff; font-size: clamp(22px, 2vw, 28px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; }
.jggp .jggp-mosaic__share-text { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.45; }
.jggp .jggp-mosaic__share-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 10px 18px; border: 0; background: var(--jggp-yellow); color: #000; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s; }
.jggp .jggp-mosaic__share-btn:hover { transform: translateY(-1px); background: #fff; }
.jggp-mosaic__share-btn .jggp-icon { width: 18px; height: 18px; }
.jggp-mosaic--2 .jggp-mosaic__share-body { gap: 6px; padding: 20px; }
.jggp-mosaic--2 .jggp-mosaic__share-text { display: none; } /* Small tile: no extra line. */
.jggp .jggp-mosaic--2 .jggp-mosaic__share-title { font-size: 21px; }
.jggp-mosaic--0.jggp-mosaic--share { height: auto; }
.jggp-mosaic--0 .jggp-mosaic__share-body { padding: 40px 44px; }
@media (prefers-reduced-motion: reduce) { .jggp .jggp-mosaic__share-btn:hover { transform: none; } }
.jggp-mosaic--0 { grid-template-columns: 1fr; grid-template-rows: 1fr; height: clamp(220px, 24vw, 320px); }

.jggp .jggp-mosaic__count {
	position: absolute;
	left: 14px; bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 0;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1.2;
	cursor: pointer;
	backdrop-filter: blur(4px);
}
.jggp-mosaic__count .jggp-icon { width: 15px; height: 15px; }
.jggp-mosaic__count-pos { display: none; }

.jggp .jggp-mosaic__map {
	position: relative;
	display: block;
	min-height: 0;
	overflow: hidden;
	background: #eceae4;
	text-decoration: none;
	container-type: size;
	--jggp-map-ratio: 3.2;
}
.jggp-mosaic__map img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.jggp-mosaic__map img { transform-origin: calc(50cqi + (var(--jggp-pin, .5) - .5) * max(100cqi, 100cqh * var(--jggp-map-ratio))) 46%; } /* Zooms out from the pin, so the pin stays on its spot. */
.jggp-mosaic__map:hover img { transform: scale(1.04); }
.jggp-mosaic__map--blank {
	background-image:
		linear-gradient(90deg, rgba(255,255,255,.9) 3px, transparent 3px),
		linear-gradient(rgba(255,255,255,.9) 3px, transparent 3px);
	background-size: 56px 56px;
}
.jggp-mosaic__pin {
	position: absolute;
	top: 46%;
	left: calc(50cqi + (var(--jggp-pin, .5) - .5) * max(100cqi, 100cqh * var(--jggp-map-ratio)));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	background: #000;
	color: var(--jggp-yellow);
	transform: translate(-50%, calc(-100% - 8px));
}
.jggp-mosaic__pin::after { /* Pointer: its tip marks the spot. */
	content: "";
	position: absolute;
	left: 50%; top: 100%;
	border: 8px solid transparent;
	border-top: 9px solid #000;
	border-bottom: 0;
	transform: translateX(-50%);
}
.jggp-mosaic__pin .jggp-icon { width: 20px; height: 20px; }
.jggp .jggp-mosaic__map-label {
	position: absolute;
	left: 12px; right: 12px; bottom: 12px;
	display: flex;
	align-items: center;
	padding: 9px 12px;
	background: #fff;
	color: #000;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.25;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* ---------- Tab bar ---------- */

.jggp-tabs {
	position: sticky;
	top: var(--jggp-sticky-top);
	z-index: 30;
	margin-top: 16px;
	background: var(--jggp-bg);
	border-bottom: 1px solid var(--jggp-line);
	box-shadow: 0 0 0 100vmax var(--jggp-bg); /* Full-width background without overflowing the page. */
	clip-path: inset(0 -100vmax);
}
.jggp-tabs.is-stuck { box-shadow: 0 0 0 100vmax var(--jggp-bg), 0 8px 16px -12px rgba(0, 0, 0, .35); clip-path: inset(0 -100vmax -24px); }
.jggp-tabs__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; min-height: 56px; }
.jggp .jggp-tabs__name { display: none; flex: none; max-width: 260px; overflow: hidden; color: var(--jggp-ink); font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.jggp-tabs.is-stuck .jggp-tabs__name { display: block; }
.jggp-tabs__list { display: flex; gap: 26px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.jggp-tabs__list::-webkit-scrollbar { display: none; }
.jggp .jggp-tabs__list a {
	display: block;
	padding: 17px 0 15px;
	border-bottom: 3px solid transparent;
	color: var(--jggp-muted);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.jggp .jggp-tabs__list a:hover { color: var(--jggp-ink); }
.jggp .jggp-tabs__list a.is-current { color: var(--jggp-ink); border-bottom-color: var(--jggp-ink); }
.jggp .jggp-tabs__cta {
	display: none;
	margin-left: auto;
	flex: none;
	padding: 9px 18px;
	background: var(--jggp-cta-bg);
	color: var(--jggp-cta-fg);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.jggp-tabs.show-cta .jggp-tabs__cta { display: inline-flex; }

/* ---------- Body: main column + sidebar ---------- */

.jggp-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--jggp-side-w);
	gap: var(--jggp-body-gap);
	align-items: start;
	margin-top: 40px;
}
.jggp-body--single { grid-template-columns: minmax(0, 1fr); }
.jggp { --jggp-side-w: 360px; --jggp-body-gap: 56px; --jggp-tabs-h: 57px; --jggp-tabs-gap: 40px; }

/* 2.11.4 (computers, pages with a sidebar): the tab bar and its line sit over the main column only, and
   "Plan your visit" and the cards below it start level with the tab bar, right under the photos.
   The big photo is as wide as the main column. Once the bar sticks to the top it spans the full width again. */
@media (min-width: 1001px) {
	.jggp--side .jggp-mosaic:not(.jggp-mosaic--0) { grid-template-columns: minmax(0, 1fr) calc(var(--jggp-side-w) + var(--jggp-body-gap) - 6px); }
	.jggp--side .jggp-mosaic--1:not(.jggp-mosaic--map):not(.jggp-mosaic--share) { grid-template-columns: 1fr; }
	.jggp--side .jggp-tabs:not(.is-stuck) { width: calc(100% - var(--jggp-side-w) - var(--jggp-body-gap)); box-shadow: none; clip-path: none; }
	.jggp--side .jggp-body { margin-top: calc(-1 * var(--jggp-tabs-h)); }
	.jggp--side .jggp-main { padding-top: calc(var(--jggp-tabs-h) + var(--jggp-tabs-gap)); }
	.jggp-tabs__item--hours { display: none; } /* Hours is in the column beside Overview here. */
}

.jggp { --jggp-section-gap: 56px; --jggp-context-gap: 48px; } /* 2.11.2: one rhythm for the page. 56px each side of a divider line; 48px around the LGBTQ+ box. */
.jggp-block + .jggp-block { margin-top: var(--jggp-section-gap); padding-top: var(--jggp-section-gap); border-top: 1px solid var(--jggp-line); }
/* The LGBTQ+ box sits under Features and doubles as the divider before Location:
   equal space above and below it, no rule. */
.jggp .jggp-block--context { margin-top: var(--jggp-context-gap); padding-top: 0; border-top: 0; }
.jggp .jggp-block--context + .jggp-block { margin-top: var(--jggp-context-gap); padding-top: 0; border-top: 0; }
.jggp .jggp-venue + .jggp-location { margin-top: var(--jggp-section-gap); padding-top: var(--jggp-section-gap); } /* 2.11.20: Location comes after "Meet the venue". */

/* LGBTQ+ context (2.11.2): black box, solid yellow label, white text across the full width of the box. */
.jggp-context {
	position: relative;
	padding: 22px 24px 24px;
	background: var(--jggp-black);
	color: var(--jggp-white);
}
[data-theme="dark"] .jggp-context { box-shadow: inset 0 0 0 1px var(--jggp-line); }
.jggp .jggp-context__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--jggp-white); }
.jggp .jggp-context p.jggp-context__label, .jggp .jggp-context .jggp-context__text { font-size: 20px; } /* Holds against theme paragraph sizes. */
/* The label in the brand rainbow (green, blue, magenta, red, orange, yellow): the guidelines use it for queer content. */
.jggp-context__text {
	background: var(--jggp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.jggp .jggp-context .jggp-tip__btn { color: var(--jggp-white); opacity: .7; } /* White at the tip's usual 70%, so it reads as a soft grey. */
.jggp-context .jggp-tip__btn .jggp-icon { width: 16px; height: 16px; stroke-width: 2.6; } /* Slightly heavier than the default 1.75 so it holds up next to the bold label. */
.jggp .jggp-context .jggp-tip__text { background: var(--jggp-white); color: #000; border: 1.5px solid #000; } /* Black edge so it stands apart from the page above it. */
.jggp .jggp-context__note, .jggp .jggp-context p.jggp-context__note { margin: 10px 0 0; max-width: none; font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--jggp-white); }

/* About + features */
.jggp-prose { font-size: 16.5px; line-height: 1.7; color: var(--jggp-text); }
.jggp .jggp-prose p { margin: 0 0 .9em; }
.jggp-prose > :last-child { margin-bottom: 0; }
.jggp-prose strong { font-weight: 700; color: var(--jggp-ink); }
.jggp-prose a { color: var(--jggp-ink); text-decoration: underline; text-underline-offset: 3px; }

.jggp-features-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 32px 0 20px; }
.jggp .jggp-features-head .jggp-h3 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } /* Same as "About". */
.jggp .jggp-features-all { flex: none; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 650; color: var(--jggp-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.jggp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; align-items: start; }
/* Icon in a fixed 20px column, lined up with the first line of text, so wrapped labels stay tidy. */
.jggp-features li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: 12px; font-size: 15px; line-height: 22px; color: var(--jggp-text); text-wrap: pretty; }
.jggp-features .jggp-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--jggp-ink); stroke-width: 1.7; }

.jggp-modal {
	width: min(720px, calc(100vw - 32px));
	max-width: none;
	max-height: min(80vh, 760px);
	margin: auto;
	padding: 0;
	border: 0;
	background: var(--jggp-bg);
	color: var(--jggp-text);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.jggp-modal::backdrop { background: rgba(0, 0, 0, .55); }

/* Popups that slide up and fade in, and reverse on close ("See all features", "Report an update", "Write a review"). */
.jggp-modal--pop[open] { animation: jggp-report-in .42s cubic-bezier(.16, 1, .3, 1) both; will-change: transform, opacity; }
.jggp-modal--pop[open]::backdrop { animation: jggp-fade-in .32s ease-out both; }
.jggp-modal--pop.is-closing { animation: jggp-report-out .24s cubic-bezier(.4, 0, 1, 1) both; }
.jggp-modal--pop.is-closing::backdrop { animation: jggp-fade-out .24s ease-in both; }

/* "Report an update": our own popup with the Fluent Forms form. */
.jggp .jggp-report { width: min(600px, calc(100vw - 32px)); max-height: min(88vh, 900px); border: 2px solid var(--jggp-ink); }
@keyframes jggp-report-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes jggp-report-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes jggp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jggp-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jggp-modal--pop[open], .jggp-modal--pop[open]::backdrop, .jggp-modal--pop.is-closing, .jggp-modal--pop.is-closing::backdrop { animation: none; } }
.jggp .jggp-report .jggp-modal__head { border-bottom: 2px solid var(--jggp-ink); }
.jggp .jggp-report .jggp-modal__close { background: none; }
.jggp .jggp-report .jggp-modal__close:hover { background: var(--jggp-panel); }
.jggp .jggp-report__body { padding: 20px 24px 24px; }
/* Hard edges on the form too (brand: no rounded corners). */
.jggp .jggp-report__form input,
.jggp .jggp-report__form select,
.jggp .jggp-report__form textarea,
.jggp .jggp-report__form button,
.jggp .jggp-report__form .ff-btn { border-radius: 0 !important; }
.jggp .jggp-report__form .ff-btn-submit { background: #000 !important; border-color: #000 !important; color: var(--jggp-yellow) !important; font-weight: 700; }
.jggp .jggp-report__form .ff-btn-submit:hover { opacity: .85; }
.jggp-modal[open] { display: flex; }
.jggp-modal__panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.jggp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--jggp-line); }
.jggp .jggp-modal__head .jggp-h2 { margin: 0; font-size: 20px; }
.jggp-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: var(--jggp-panel); color: var(--jggp-ink); cursor: pointer; }
.jggp-modal__close:hover { background: var(--jggp-hover); }
.jggp-modal__body { overflow-y: auto; padding: 4px 24px 24px; }
.jggp-modal__group { padding-top: 20px; }
.jggp-modal__group + .jggp-modal__group { margin-top: 6px; border-top: 1px solid var(--jggp-line); }
.jggp .jggp-modal__group-title { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--jggp-muted); }
.jggp-features.jggp-features--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }

/* Location ("Find your way."): the 1.4 layout — map left, details right. */
.jggp .jggp-eyebrow { margin: 0 0 10px; font-family: var(--jggp-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jggp-muted); } /* 2.11.9: grey, so the heading under it leads. */
.jggp .jggp-eyebrow__note { color: var(--jggp-muted); font-weight: 600; }
.jggp .jggp-h2--display { margin-bottom: 22px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; } /* 2.11.4: same as "Reviews". */

.jggp-loc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: stretch; } /* Map is as tall as the details beside it. */
.jggp-map { position: relative; display: flex; margin: 0; }
.jggp .jggp-map__frame {
	position: relative;
	display: block;
	flex: 1;
	min-height: 220px; /* Low floor so the map shrinks to the height of the details beside it. */
	overflow: hidden;
	border: 1px solid var(--jggp-line);
	background: #eceae4;
	color: inherit;
	text-decoration: none;
	container-type: size;   /* Lets the pin work out where the cropped image puts the place. */
	--jggp-map-ratio: 3.2;  /* Static map image is 1280×400 (Mapbox's max width), centred on the place. */
	--jggp-shift: 0px;      /* Set by place.js: how far pin + map slide so pin and name sit centred together. */
}
/* The map (a background, 2.11.19) covers the frame and is centred on it, so its centre (the place) sits mid-frame.
   It then slides sideways by --jggp-shift, and the pin moves by exactly the same amount, so the pin always marks the place. */
.jggp .jggp-map__img {
	position: absolute;
	inset: 0;
	display: block;
	background-color: #eceae4;
	background-repeat: no-repeat;
	background-size: cover; /* 1280×400 image: as wide as max(frame width, frame height × 3.2), same as place.js assumes. */
	background-position: calc(50% + var(--jggp-shift)) 50%;
	transform-origin: calc(50% + var(--jggp-shift)) 50%; /* = the place, so the hover zoom keeps the pin on its spot. */
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
a.jggp-map__frame:hover .jggp-map__img { transform: scale(1.04); }
.jggp-map--blank .jggp-map__frame {
	background-color: #efede8;
	background-image:
		linear-gradient(90deg, rgba(255,255,255,.9) 3px, transparent 3px),
		linear-gradient(rgba(255,255,255,.9) 3px, transparent 3px),
		linear-gradient(28deg, transparent 49%, #fff 49%, #fff 51.5%, transparent 51.5%);
	background-size: 64px 64px, 64px 64px, 100% 100%;
	background-position: 18px 0, 0 22px, 0 0;
}

/* Marker: a yellow tile with a pointer; the pointer's tip sits on the place's coordinates. */
.jggp-map__pin {
	position: absolute;
	left: calc(50cqi + var(--jggp-shift));
	top: 50%;
	pointer-events: none;
}
.jggp-map__marker {
	position: absolute;
	left: 0; top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	background: #000;
	color: var(--jggp-yellow);
	transform: translate(-50%, calc(-100% - 9px));
	transition: transform .25s ease;
}
.jggp-map__marker::after { /* Pointer */
	content: "";
	position: absolute;
	left: 50%; top: 100%;
	border: 9px solid transparent;
	border-top: 10px solid #000;
	border-bottom: 0;
	transform: translateX(-50%);
}
.jggp-map__marker .jggp-icon { width: 24px; height: 24px; }
a.jggp-map__frame:hover .jggp-map__marker { transform: translate(-50%, calc(-100% - 12px)); }
.jggp .jggp-map__label { transition: transform .25s ease; }
a.jggp-map__frame:hover .jggp-map__label { transform: translateY(-3px); } /* Lifts with the marker. */
.jggp .jggp-map__label {
	position: absolute;
	left: 31px; top: -51px; /* Level with the top of the marker tile. */
	display: block;
	width: max-content;
	max-height: calc(3 * 1.2em + 20px);
	max-width: min(240px, 100cqi - 92px); /* Long names wrap; keeps pin + name narrow enough to centre and inside the map. */
	padding: 10px 14px;
	background: #000;
	color: var(--jggp-yellow);
	font-size: clamp(12.5px, 3.3cqi, 14.5px);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	overflow: hidden;
}
.jggp .jggp-map__open {
	position: absolute;
	right: 14px; bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	padding: 0 18px;
	background: #000;
	color: var(--jggp-yellow);
	font-size: 14.5px;
	font-weight: 700;
	transition: transform .15s ease;
}
a.jggp-map__frame:hover .jggp-map__open { transform: translateY(-1px); }
.jggp-map__open .jggp-icon { width: 16px; height: 16px; }
.jggp .jggp-map__credit { position: absolute; left: 0; top: 100%; margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--jggp-muted); }
.jggp .jggp-map__credit::before, .jggp .jggp-map__credit::after { content: none; display: none; } /* Theme adds a line before captions. */
.jggp-map__credit a { color: inherit; text-decoration: none; }
.jggp-map__credit a:hover { text-decoration: underline; }

.jggp-loc__facts > div { padding: 14px 0; border-bottom: 1px solid var(--jggp-line); } /* Same row rules as Plan your visit. */
.jggp-loc__facts > div:first-child { padding-top: 0; }
.jggp-loc__facts dd { margin-top: 4px; font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--jggp-ink); }
.jggp .jggp-loc__note { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--jggp-muted); }
.jggp-loc__ja { display: block; }
.jggp-nowrap { white-space: nowrap; }
.jggp .jggp-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 11px;
	border: 1.5px solid var(--jggp-ink);
	background: transparent;
	color: var(--jggp-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.jggp .jggp-copy:hover { background: var(--jggp-ink); color: var(--jggp-bg); }
.jggp-copy .jggp-icon { width: 14px; height: 14px; }

/* ---------- Sidebar cards: Plan your visit, Hours, Contact ---------- */

.jggp-side { display: grid; gap: 20px; }
.jggp-card-box { padding: 24px 24px 26px; border: 1px solid var(--jggp-line); background: var(--jggp-bg); }
.jggp .jggp-card-box__title { margin: 0 0 6px; color: var(--jggp-ink); font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }

.jggp-visit { transition: box-shadow .3s; }
.jggp-visit.is-flash { box-shadow: 0 0 0 5px var(--jggp-yellow); }
.jggp .jggp-visit__list { margin-bottom: 18px; }
.jggp-visit__row { padding: 12px 0; border-bottom: 1px solid var(--jggp-line); }
.jggp .jggp-visit__list:last-child { margin-bottom: 0; }
.jggp-visit__list:last-child .jggp-visit__row:last-child { padding-bottom: 0; border-bottom: 0; }
.jggp-visit dd { margin-top: 3px; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--jggp-ink); }
.jggp-dot { color: var(--jggp-muted); }

/* Free text split into lines (2.11.13): "A; B; C" → one per line with a small square marker. */
.jggp .jggp-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jggp .jggp-lines li { position: relative; margin: 0; padding-left: 14px; }
.jggp .jggp-lines li::before { content: ""; position: absolute; left: 0; top: calc(.725em - 2.5px); width: 5px; height: 5px; background: currentColor; }
.jggp .jggp-lines li[hidden] { display: none; }
.jggp-lines-wrap,
.jggp-lines--text { display: block; }
.jggp .jggp-lines__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.jggp .jggp-lines__btn { display: block; width: fit-content; margin: 8px 0 0; padding: 0; text-align: left; border: 0; background: none; color: var(--jggp-ink); font: inherit; font-size: 14px; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.jggp .jggp-lines__btn[hidden] { display: none; }

/* Notes from the type's own details (e.g. "About the baths"): text in the "See all features" popup. */
.jggp .jggp-features-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--jggp-text); }
.jggp .jggp-features--grid + .jggp-features-note { margin-top: 16px; }

/* Minimum age badge on the facts line under the title. */
.jggp-facts .jggp-icon--age { width: 21px; height: 21px; }

/* Other locations of the same place ("Also in Kyoto · Osaka"), under the facts. */
.jggp .jggp-also { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14.5px; font-weight: 500; color: var(--jggp-muted); }
.jggp-also .jggp-icon { width: 18px; height: 18px; flex: none; color: var(--jggp-ink); }
.jggp-also a { color: var(--jggp-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jggp-also a:hover, .jggp-also a:focus-visible { background: var(--jggp-yellow); text-decoration: none; }
.jggp-also__sep { color: var(--jggp-muted); }
/* Read by screen readers only (e.g. "Languages:" before "Japanese · English"). */
.jggp .jggp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.jggp-more__full[hidden] { display: none; }
.jggp .jggp-more__btn { display: block; margin-top: 4px; padding: 0; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--jggp-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jggp-muted { color: var(--jggp-muted); font-size: 14px; font-weight: 450; }

.jggp .jggp-open--card { margin: 2px 0 10px; font-size: 15px; }
/* Week table: soft alternating stripes instead of dividing lines. The table runs 10px past the
   card's text edge on both sides so the day names still line up with the heading. */
.jggp .jggp-hours__table { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; border-collapse: collapse; }
.jggp-hours__table tr { border: 0; }
.jggp-hours__table tbody tr:nth-child(odd) { background: var(--jggp-stripe); }
.jggp .jggp-hours__table th,
.jggp .jggp-hours__table td { border: 0; padding: 10px; font-size: 14.5px; line-height: 1.4; color: var(--jggp-text); font-weight: 450; vertical-align: top; }
.jggp .jggp-hours__table td { text-align: right; font-variant-numeric: tabular-nums; }
.jggp .jggp-hours__table tr.is-today th,
.jggp .jggp-hours__table tr.is-today td { color: var(--jggp-ink); font-weight: 750; }
.jggp .jggp-hours__table tr.is-today th { box-shadow: inset 4px 0 0 var(--jggp-ink); padding-left: 20px; }
.jggp-hours__closed,
.jggp-hours__unknown { color: var(--jggp-muted); }
.jggp-range { white-space: nowrap; }
.is-12h .jggp-range__sep { margin: 0 .3em; }
.jggp .jggp-hours__text { font-size: 15px; line-height: 1.6; color: var(--jggp-ink); font-weight: 550; }
.jggp .jggp-hours__note,
.jggp .jggp-hours__tz { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--jggp-muted); }

/* Contact */
.jggp-contact__rows li { border-bottom: 1px solid var(--jggp-line); }
.jggp .jggp-contact__rows a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--jggp-ink); font-size: 15.5px; font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.jggp .jggp-contact__rows a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.jggp-contact__rows .jggp-icon,
.jggp-contact__rows .jggp-icon--solid { width: 18px; height: 18px; color: var(--jggp-ink); }
.jggp .jggp-contact__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jggp .jggp-contact__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid var(--jggp-ink);
	color: var(--jggp-ink);
	transition: background .15s, color .15s;
}
.jggp .jggp-contact__socials a:hover { background: var(--jggp-ink); color: var(--jggp-bg); }
.jggp-contact__socials .jggp-icon,
.jggp-contact__socials .jggp-icon--solid { width: 18px; height: 18px; }

/* Contact (2.11.7): no box. A plain list under the Plan your visit and Hours cards, its text lined up with
   the text inside them (the cards' 24px padding), a little more space above, no line under the last item. */
.jggp .jggp-contact.jggp-card-box { padding: 0 24px; border: 0; background: none; }
.jggp-side__contact { margin-top: 16px; } /* + the 20px gap between sidebar cards = 36px under Hours. */
.jggp .jggp-contact__rows a { padding: 13px 0; }
.jggp-contact__rows li:last-child { border-bottom: 0; }
.jggp .jggp-contact__socials { margin-top: 14px; }

/* ---------- Explore ---------- */

.jggp-explore { margin-top: var(--jggp-section-gap); padding-top: var(--jggp-section-gap); border-top: 1px solid var(--jggp-line); }
.jggp-section + .jggp-section,
.jggp-tour + .jggp-section,
.jggp-section + .jggp-tour { margin-top: 72px; } /* Section rhythm: --jggp-section-gap each side of a divider line, 72px between sections without one. */
.jggp-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.jggp .jggp-section__head .jggp-h2 { margin-bottom: 14px; }
.jggp .jggp-section__head .jggp-h2--display { margin-bottom: 22px; } /* Labelled sections share the display heading of "Find your way." */
.jggp .jggp-more-link { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 14.5px; font-weight: 650; color: var(--jggp-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.jggp-more-link .jggp-icon { width: 14px; height: 14px; }

.jggp-cards { display: grid; gap: 24px 20px; }
.jggp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jggp-cards--guides { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 2.11.4: area guides four across (phones keep the list). */
.jggp .jggp-cards--guides .jggp-card__title { font-size: 18px; }
.jggp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jggp-card a { display: block; text-decoration: none; }
.jggp-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--jggp-panel); }
.jggp-cards--3 .jggp-card__img,
.jggp-cards--4 .jggp-card__img { aspect-ratio: 16 / 9; }
.jggp-card__img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.jggp-card a:hover .jggp-card__img img { transform: scale(1.04); }
.jggp .jggp-card__eyebrow { display: block; margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--jggp-muted); }
.jggp .jggp-card__title { display: block; margin: 8px 0 0; color: var(--jggp-ink); font-size: 20px; font-weight: 750; line-height: 1.3; letter-spacing: -.015em; }
.jggp-card__img + .jggp-card__title { margin-top: 10px; }
.jggp-card a:hover .jggp-card__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.jggp-tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); overflow: hidden; background: var(--jggp-black); color: var(--jggp-white); }
[data-theme="dark"] .jggp-tour { box-shadow: inset 0 0 0 1px var(--jggp-line); }
.jggp-tour--noimg { grid-template-columns: 1fr; }
.jggp-tour__body { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; }
.jggp .jggp-tour__eyebrow { margin: 0 0 14px; font-family: var(--jggp-mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jggp-white); }
.jggp .jggp-tour__title { margin: 0 0 12px; color: var(--jggp-yellow); font-size: clamp(28px, 2.8vw, 38px); font-weight: 850; line-height: 1.05; letter-spacing: -.03em; }
.jggp .jggp-tour__text { margin: 0 0 22px; max-width: 420px; font-size: 15.5px; line-height: 1.6; color: #e4e4e4; }
.jggp-tour .jggp-btn { display: inline-flex; align-self: flex-start; width: auto; min-width: 200px; }
.jggp-tour__img { min-height: 260px; overflow: hidden; }
.jggp-tour__img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.jggp-tour:hover .jggp-tour__img img { transform: scale(1.03); }

.jggp-request { display: flex; align-items: center; gap: 18px; margin-top: 48px; padding: 18px 22px; background: var(--jggp-panel); color: var(--jggp-text); }
.jggp-request__icon { width: 30px; height: 30px; color: var(--jggp-ink); }
.jggp .jggp-request p { flex: 1; font-size: 15px; }
.jggp-request strong { display: block; font-size: 17px; color: var(--jggp-ink); }
.jggp .jggp-request .jggp-btn--yellow { background: var(--jggp-cta-bg); color: var(--jggp-cta-fg); }

.jggp-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: var(--jggp-section-gap); padding-top: 20px; border-top: 1px solid var(--jggp-line); font-size: 14px; color: var(--jggp-muted); }
.jggp-status__actions { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.jggp .jggp-status a { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; text-decoration: none; color: var(--jggp-ink); }
.jggp-status a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jggp-status .jggp-icon { width: 16px; height: 16px; }

/* ---------- Labels: Geist Mono, uppercase (brand) ---------- */
/* Small labels that name a value: Plan your visit, Location, Hours days, card type labels,
   popup group titles and the breadcrumb. Kept after the component rules so it wins. */

.jggp .jggp-crumbs,
.jggp .jggp-crumbs *,
.jggp .jggp-visit dt,
.jggp .jggp-loc__facts dt,
.jggp .jggp-hours__table th,
.jggp .jggp-card__eyebrow,
.jggp .jggp-modal__group-title {
	font-family: var(--jggp-mono);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.4;
}
.jggp .jggp-visit dt,
.jggp .jggp-loc__facts dt { color: var(--jggp-muted); font-size: 12px; font-weight: 600; } /* 2.11.9: grey labels, so the values lead (as in the Hours table). */
.jggp .jggp-visit dd { margin-top: 5px; }
.jggp .jggp-loc__facts dd { margin-top: 5px; }
.jggp .jggp-hours__table th { padding-top: 12px; color: var(--jggp-muted); }
.jggp .jggp-hours__table tr.is-today th { color: var(--jggp-ink); font-weight: 700; }
.jggp .jggp-card__eyebrow { color: var(--jggp-muted); font-size: 13px; letter-spacing: .08em; }
.jggp .jggp-crumbs a:hover { color: var(--jggp-ink); }

/* ---------- Lightbox ---------- */

.jggp-lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); color: #fff; }
.jggp-lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.jggp-lightbox[open] { display: flex; flex-direction: column; }
.jggp-lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.jggp-lightbox__close,
.jggp-lightbox__nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.jggp-lightbox__close:hover,
.jggp-lightbox__nav:hover { background: rgba(255,255,255,.24); }
.jggp-lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 72px 24px; }
.jggp-lightbox__slide { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.jggp-lightbox__slide[hidden] { display: none; }
.jggp-lightbox__slide img { max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; }
.jggp-lightbox__slide figcaption { margin-top: 10px; font-size: 13px; color: #ccc; }
.jggp-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.jggp-lightbox__nav--prev { left: 14px; }
.jggp-lightbox__nav--next { right: 14px; }

/* ---------- Focus ---------- */

.jggp a:focus-visible,
.jggp button:focus-visible { outline: 2px solid var(--jggp-ink); outline-offset: 3px; }
.jggp-mosaic__item:focus-visible { outline-color: var(--jggp-yellow); outline-offset: -4px; }
.jggp-context button:focus-visible { outline-color: var(--jggp-yellow); outline-offset: 1px; } /* Visible on the black box. */

/* ---------- Sponsored listings (2.6) ---------- */
/* Disclosure tag beside the type badge: outlined in ink, so it never reads as part of the badge. */

.jggp-badges { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
/* The type badge keeps exactly its normal size (its padding is tuned to the capitals); the tag stretches to match it. */
.jggp .jggp-badges .jggp-badge { flex: none; align-self: flex-start; margin: 0; }
.jggp .jggp-sponsor-tag {
	display: inline-flex;
	align-self: stretch; /* Same height as the badge beside it. Kept shorter than the badge on its own, so it never sets the row height. */
	align-items: center;
	gap: 4px;
	padding: 0 4px 0 10px;
	border: 1.5px solid var(--jggp-ink);
	color: var(--jggp-ink);
	font-family: var(--jggp-mono);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.jggp .jggp-sponsor-tag:only-child { min-height: 28px; } /* No type badge to match. */
.jggp .jggp-sponsor-tag .jggp-tip__btn { padding: 1px; opacity: .85; }
.jggp-sponsor-tag .jggp-tip__btn .jggp-icon { width: 14px; height: 14px; }
.jggp .jggp-badges .jggp-tip__text { left: 0; top: calc(100% + 8px); bottom: auto; max-width: min(320px, 90vw); font-family: var(--jggp-sans); letter-spacing: 0; text-transform: none; }

/* Card label in Around the corner: "Bar · Sponsored". */
.jggp .jggp-card__sponsor { color: var(--jggp-ink); font-weight: 700; }
.jggp .jggp-card__sponsor::before { content: "· "; color: var(--jggp-muted); font-weight: 500; }

/* Reader offer card (sidebar). */
.jggp-offer { border-top: 4px solid var(--jggp-ink); }
.jggp .jggp-offer__title { margin-top: 8px; color: var(--jggp-ink); font-size: 17px; font-weight: 750; line-height: 1.35; letter-spacing: -.01em; }
.jggp .jggp-offer__details { margin-top: 6px; font-size: 15px; line-height: 1.55; }
.jggp-offer__code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.jggp .jggp-offer__code-label { font-family: var(--jggp-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jggp-ink); }
.jggp .jggp-offer__code-value { padding: 5px 10px; background: var(--jggp-yellow); color: #000; font-family: var(--jggp-mono); font-size: 15px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.jggp .jggp-offer__code .jggp-copy { margin-top: 0; }
.jggp .jggp-offer__link { justify-content: flex-start; margin-top: 16px; }
.jggp .jggp-offer__foot { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--jggp-muted); }

/* From the venue (main column). */
.jggp-owner { margin: 0; }
.jggp .jggp-owner__quote { margin: 0; padding: 2px 0 2px 20px; border: 0; border-left: 3px solid var(--jggp-ink); background: none; font-style: normal; }
.jggp .jggp-owner__quote::before,
.jggp .jggp-owner__quote::after { content: none; display: none; }
.jggp .jggp-owner__quote p { margin: 0; color: var(--jggp-ink); font-size: 19px; font-weight: 550; line-height: 1.5; letter-spacing: -.01em; }
.jggp-owner__by { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-left: 23px; font-size: 14.5px; line-height: 1.35; }
.jggp .jggp-owner__photo { width: 48px; height: 48px !important; object-fit: cover; }
.jggp-owner__by strong { display: block; color: var(--jggp-ink); font-weight: 700; }
.jggp .jggp-owner__role { display: block; color: var(--jggp-muted); font-size: 13.5px; }

.jggp-owner + .jggp-video,
.jggp-owner + .jggp-events,
.jggp-video + .jggp-events,
.jggp-owner + .jggp-venue-photos,
.jggp-video + .jggp-venue-photos,
.jggp-venue-photos + .jggp-events { margin-top: 32px; }
.jggp-h2 + .jggp-venue-photos { margin-top: 0; }

/* Sponsor photos: 3 across (2 when there are 2 or 4). */
.jggp-venue-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jggp-venue-photos--2,
.jggp-venue-photos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jggp .jggp-venue-photos__item { display: block; position: relative; margin: 0; padding: 0; border: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--jggp-panel); cursor: zoom-in; }
span.jggp-venue-photos__item { cursor: default; }
.jggp .jggp-venue-photos__img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.jggp-venue-photos__item:hover .jggp-venue-photos__img { transform: scale(1.03); }
.jggp-venue-photos__item:focus-visible { outline: 2px solid var(--jggp-yellow); outline-offset: -4px; }
@media (max-width: 600px) { .jggp-venue-photos { gap: 4px; } }
.jggp-video iframe[src*="youtube"],
.jggp-video iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.jggp-video .instagram-media { margin: 0 !important; }
.jggp .jggp-video__file { display: block; width: 100%; height: auto; max-height: 80vh; background: #000; object-fit: contain; }

.jggp .jggp-events .jggp-h3 { margin-bottom: 10px; }
.jggp-events__list li { border-bottom: 1px solid var(--jggp-line); }
.jggp-events__list li:first-child { border-top: 1px solid var(--jggp-line); }
.jggp .jggp-events__list a { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 14px 0; color: var(--jggp-ink); text-decoration: none; }
.jggp .jggp-events__date { font-family: var(--jggp-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.jggp .jggp-events__title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.jggp .jggp-events__list a:hover .jggp-events__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.jggp-events__list .jggp-icon { width: 16px; height: 16px; align-self: center; }

/* ---------- Reviews (layout 2.11.2) ---------- */

.jggp-reviews { margin-top: var(--jggp-section-gap); padding-top: var(--jggp-section-gap); border-top: 1px solid var(--jggp-line); }
.jggp .jggp-reviews__notice { margin: 0 0 32px; padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--jggp-ink); background: var(--jggp-stripe); }
.jggp .jggp-reviews__notice--ok { background: var(--jggp-yellow); color: #000; }
.jggp .jggp-reviews__notice--error { box-shadow: inset 4px 0 0 #e5281a; }
.jggp .jggp-reviews__h { margin: 0; color: var(--jggp-ink); font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }

/* Traveler photos: one row of six squares; the sixth says "See more" when there are more. */
.jggp-traveler-photos { margin: 0 0 56px; }
.jggp .jggp-traveler-photos .jggp-reviews__h { margin-bottom: 20px; }
.jggp-traveler-photos__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.jggp .jggp-traveler-photos__item,
.jggp .jggp-review__photo { position: relative; display: block; margin: 0; padding: 0; border: 0; overflow: hidden; aspect-ratio: 1; background: var(--jggp-panel); cursor: zoom-in; }
.jggp .jggp-traveler-photos__item img,
.jggp .jggp-review__photo img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.jggp-traveler-photos__item:hover img,
.jggp-review__photo:hover img { transform: scale(1.04); }
.jggp-traveler-photos__item:focus-visible,
.jggp-review__photo:focus-visible { outline: 3px solid var(--jggp-yellow) !important; outline-offset: -3px !important; }
.jggp .jggp-traveler-photos__item--more { cursor: pointer; }
.jggp-traveler-photos__more { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(0, 0, 0, .52); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.01em; transition: background .2s; }
.jggp-traveler-photos__item--more:hover .jggp-traveler-photos__more { background: rgba(0, 0, 0, .66); }
.jggp-traveler-photos__more-n { font-family: var(--jggp-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }

/* Heading row: "Reviews" over the summary column, search and sort over the list. */
.jggp-reviews__head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px 64px; align-items: center; margin-bottom: 32px; }
.jggp-reviews__head--plain { display: block; }
.jggp-reviews__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jggp .jggp-reviews__search { display: flex; flex: 0 1 400px; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--jggp-line); background: var(--jggp-bg); color: var(--jggp-muted); cursor: text; }
.jggp-reviews__search .jggp-icon { width: 20px; height: 20px; flex: none; }
.jggp .jggp-reviews__search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--jggp-ink); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
.jggp-reviews__search input::placeholder { color: var(--jggp-muted); opacity: 1; }
.jggp .jggp-reviews__search:focus-within,
.jggp .jggp-reviews__sort:focus-within { border-color: var(--jggp-ink); box-shadow: inset 0 0 0 1px var(--jggp-ink); }
.jggp .jggp-reviews__sort { position: relative; display: inline-flex; flex: none; align-items: center; height: 48px; margin: 0; padding: 0 0 0 16px; border: 1px solid var(--jggp-line); background: var(--jggp-bg); color: var(--jggp-ink); cursor: pointer; }
.jggp-reviews__sort-label { font-family: var(--jggp-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.jggp .jggp-reviews__sort select { height: 100%; margin: 0; padding: 0 44px 0 6px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--jggp-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; }
.jggp-reviews__sort .jggp-icon { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; }

.jggp-reviews__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.jggp-reviews--empty .jggp-reviews__grid { grid-template-columns: 1fr; }

/* Summary */
.jggp .jggp-reviews__score { margin: 0 0 12px; color: var(--jggp-ink); font-size: 64px; font-weight: 900; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.jggp-reviews__summary .jggp-stars--lg { --jggp-star-size: 32px; gap: 4px; }
.jggp .jggp-reviews__based { margin: 12px 0 0; font-size: 14.5px; color: var(--jggp-muted); }
.jggp-reviews__dist { margin: 18px 0 0; padding: 0; list-style: none; }
.jggp-reviews__dist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--jggp-mono); font-size: 12.5px; font-weight: 600; color: var(--jggp-ink); }
.jggp-reviews__dist-label { white-space: nowrap; }
.jggp-reviews__dist-label span[aria-hidden] { margin-left: 2px; font-size: 11px; }
.jggp-reviews__bar { position: relative; height: 8px; background: var(--jggp-stripe); }
.jggp-reviews__bar span { position: absolute; inset: 0 auto 0 0; background: var(--jggp-ink); }
.jggp-reviews__dist-n { text-align: right; color: var(--jggp-muted); font-variant-numeric: tabular-nums; }
.jggp-reviews__action { margin-top: 28px; }
.jggp .jggp-reviews__mine { margin: 0; padding: 12px 14px; font-size: 14.5px; background: var(--jggp-stripe); color: var(--jggp-ink); }

/* No reviews yet: one grey strip with the button on the right. */
.jggp-reviews--empty .jggp-reviews__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px; padding: 28px 32px; background: var(--jggp-stripe); }
.jggp .jggp-reviews__empty-title { flex: 1 1 100%; margin: 0; color: var(--jggp-ink); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.jggp .jggp-reviews__empty-text { flex: 1 1 320px; margin: 0; font-size: 15.5px; color: var(--jggp-text); }
.jggp-reviews--empty .jggp-reviews__action { flex: none; margin-top: 0; }
.jggp-reviews--empty .jggp-btn { width: auto; padding: 10px 26px; }

/* Each review: stars, then who and when (with the "…" menu), then the text, then their photos. */
.jggp-reviews__items { margin: 0; padding: 0; list-style: none; }
.jggp-review { padding: 28px 0; border-bottom: 1px solid var(--jggp-line); }
.jggp-review:first-child { padding-top: 0; }
.jggp .jggp-review__rating { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.jggp-review__rating .jggp-stars { --jggp-star-size: 22px; gap: 3px; }
.jggp-review__score { color: var(--jggp-ink); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jggp-review__head { display: flex; align-items: center; gap: 14px; }
.jggp-review__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: #000; color: var(--jggp-yellow); font-size: 20px; font-weight: 800; }
.jggp-review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jggp-review__name { color: var(--jggp-ink); font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.jggp-review__date { font-size: 14.5px; line-height: 1.3; color: var(--jggp-muted); }
.jggp .jggp-review__you { color: var(--jggp-muted); font-weight: 500; }

.jggp-review__body { position: relative; margin-top: 18px; }
.jggp .jggp-review__text { font-size: 16px; line-height: 1.65; color: var(--jggp-text); overflow-wrap: anywhere; }
.jggp .jggp-review__text p { margin: 0 0 .7em; }
.jggp .jggp-review__text p:last-child { margin-bottom: 0; }
.jggp-review__body.is-clamped .jggp-review__text { max-height: 4.95em; overflow: hidden; } /* Three lines. */
.jggp .jggp-review__readmore { display: inline-block; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--jggp-ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.65; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.jggp .jggp-review__readmore[hidden] { display: none; }
.jggp .jggp-review__body.is-clamped .jggp-review__readmore { position: absolute; right: 0; bottom: 0; margin: 0; padding-left: 72px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--jggp-bg) 60px); }
.jggp-review__body.is-clamped .jggp-review__readmore::before { content: "… "; color: var(--jggp-text); font-weight: 400; text-decoration: none; display: inline-block; white-space: pre; }
.jggp-review__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.jggp .jggp-review__photo { width: 148px; aspect-ratio: 4 / 3; }

/* "…" menu */
.jggp-menu { position: relative; flex: none; margin-left: auto; }
.jggp .jggp-menu__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--jggp-ink); cursor: pointer; }
.jggp .jggp-menu__btn:hover, .jggp .jggp-menu__btn[aria-expanded="true"] { background: var(--jggp-panel); }
.jggp-menu__btn .jggp-icon { width: 22px; height: 22px; stroke-width: 2.4; }
.jggp-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 210px; padding: 6px 0; border: 1px solid var(--jggp-ink); background: var(--jggp-bg); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.jggp-menu__list[hidden] { display: none; }
.jggp-menu__form { margin: 0; }
.jggp .jggp-menu__item { display: block; width: 100%; margin: 0; padding: 11px 16px; border: 0; background: none; color: var(--jggp-ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; }
.jggp .jggp-menu__item:hover, .jggp .jggp-menu__item:focus-visible { background: var(--jggp-panel); outline: none; }
.jggp .jggp-menu__item--danger { color: #c4261a; }

.jggp .jggp-reviews__more { margin-top: 24px; }
.jggp .jggp-reviews__more[hidden] { display: none; }
.jggp .jggp-reviews__nomatch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 20px; background: var(--jggp-stripe); font-size: 15.5px; color: var(--jggp-ink); }
.jggp .jggp-reviews__nomatch[hidden] { display: none; }
.jggp .jggp-reviews__clear { padding: 0; border: 0; background: none; color: var(--jggp-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* A pending review's own actions under the summary ("Edit my review" / "Delete my review"). */
.jggp-review-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; }
.jggp-review-delete { margin: 0; }
.jggp .jggp-review-delete__btn { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--jggp-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jggp .jggp-review-delete__btn:hover { color: #c4261a; }
.jggp-reviews__action .jggp-review-actions { margin-top: 8px; }
.jggp .jggp-photo-preview--current { cursor: pointer; }
.jggp-photo-preview--current input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jggp-photo-preview--current input:checked ~ .jggp-photo-preview__remove { background: #c4261a; }
.jggp-photo-preview--current:has(input:checked) img { opacity: .3; }
.jggp-photo-preview--current input:focus-visible ~ .jggp-photo-preview__remove { outline: 2px solid var(--jggp-ink); outline-offset: 1px; }
.jggp-photo-previews--current { margin-bottom: 12px; }
.jggp .jggp-photo-preview--current .jggp-photo-preview__remove { display: flex; align-items: center; justify-content: center; }

/* "Write a review" popup. */
.jggp .jggp-review-form { width: min(560px, calc(100vw - 32px)); max-height: min(90vh, 820px); border: 2px solid var(--jggp-ink); }
.jggp .jggp-review-form .jggp-modal__head { border-bottom: 2px solid var(--jggp-ink); }
.jggp .jggp-review-form .jggp-modal__close { background: none; }
.jggp .jggp-review-form .jggp-modal__close:hover { background: var(--jggp-panel); }
.jggp .jggp-review-form__body { padding: 22px 24px 24px; }
.jggp-rate { margin: 0 0 22px; padding: 0; border: 0; }
.jggp .jggp-rate__legend,
.jggp .jggp-review-form__label { display: block; margin: 0 0 10px; padding: 0; font-family: var(--jggp-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jggp-ink); }
.jggp-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 6px; vertical-align: middle; }
.jggp-rate__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jggp .jggp-rate__stars label { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; background: var(--jggp-star-off); cursor: pointer; transition: background .12s; }
.jggp-rate__stars label svg { width: 30px; height: 30px; fill: var(--jggp-bg); }
.jggp .jggp-rate__stars input:checked ~ label { background: var(--jggp-ink); }
.jggp .jggp-rate__stars:hover label { background: var(--jggp-star-off); }
.jggp .jggp-rate__stars label:hover,
.jggp .jggp-rate__stars label:hover ~ label { background: var(--jggp-ink); }
.jggp-rate__stars input:focus-visible + label { outline: 2px solid var(--jggp-ink); outline-offset: 2px; }
.jggp .jggp-rate__word { margin-left: 12px; font-size: 15px; font-weight: 700; color: var(--jggp-ink); vertical-align: middle; }
.jggp .jggp-review-form textarea { display: block; width: 100%; min-height: 150px; padding: 12px 14px; border: 1.5px solid var(--jggp-line); border-radius: 0; background: var(--jggp-bg); color: var(--jggp-ink); font: inherit; font-size: 15.5px; line-height: 1.55; resize: vertical; }
.jggp .jggp-review-form textarea:focus { outline: none; border-color: var(--jggp-ink); }
.jggp .jggp-review-form__hint { margin: 10px 0 20px; font-size: 13.5px; color: var(--jggp-muted); }
.jggp-review-form__photos { margin-top: 20px; }
.jggp .jggp-review-form__optional { font-weight: 500; color: var(--jggp-muted); text-transform: none; letter-spacing: 0; font-family: var(--jggp-sans); }
.jggp .jggp-photo-add { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px dashed var(--jggp-ink); color: var(--jggp-ink); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.jggp .jggp-photo-add:hover { background: var(--jggp-stripe); }
.jggp-photo-add .jggp-icon { width: 18px; height: 18px; }
.jggp-photo-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.jggp-photo-add:focus-within { outline: 2px solid var(--jggp-ink); outline-offset: 2px; }
.jggp-review-form__photos.is-full .jggp-photo-add { opacity: .4; pointer-events: none; }
.jggp-photo-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.jggp-photo-previews:not(:empty) { margin-top: 12px; }
.jggp-photo-preview { position: relative; width: 72px; height: 72px; background: var(--jggp-panel); }
.jggp-photo-preview img { width: 100%; height: 100% !important; object-fit: cover; }
.jggp .jggp-photo-preview__remove { position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 0; border: 0; background: #000; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.jggp .jggp-review-form__photo-note { margin: 8px 0 0; font-size: 13px; color: var(--jggp-muted); }
.jggp .jggp-review-form .jggp-btn[disabled] { opacity: .6; cursor: wait; }

/* ================= Tablet ================= */

@media (max-width: 1000px) {
	/* One column: practical info first, then the story, then the map and contact. */
	.jggp-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.jggp-main,
	.jggp-side { display: contents; }
	.jggp-side__visit { order: 1; }
	.jggp-about { order: 2; }
	.jggp-block--context { order: 3; }
	.jggp-side__hours { order: 4; }
	.jggp-venue { order: 5; } /* Sponsored "Meet the venue". */
	.jggp-side__contact { order: 6; }
	.jggp-location { order: 7; } /* 2.11.20: always last, right before Reviews. */
	.jggp-side__offer { order: 1; margin-top: 20px; } /* Right after Plan your visit. */
	.jggp { --jggp-section-gap: 48px; --jggp-context-gap: 40px; }
	.jggp .jggp-venue { margin-top: var(--jggp-section-gap); padding-top: var(--jggp-section-gap); border-top: 1px solid var(--jggp-line); }
	.jggp .jggp-about { margin-top: 44px; padding-top: 0; border-top: 0; }
	.jggp-side__hours,
	.jggp-side__contact { margin-top: 44px; }
	.jggp .jggp-contact.jggp-card-box { padding: 0; } /* One column: lines up with the page text. */
	.jggp .jggp-location { margin-top: var(--jggp-section-gap); padding-top: var(--jggp-section-gap); border-top: 1px solid var(--jggp-line); }
	.jggp .jggp-block--context + .jggp-location { padding-top: 0; border-top: 0; } /* The box is the divider; Hours sits between them on phones. */

	.jggp-visit__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
	.jggp-cards--4,
	.jggp-cards--guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.jggp-reviews__head { grid-template-columns: minmax(0, 1fr); }
	.jggp .jggp-reviews__search { flex: 1 1 auto; }
	.jggp-reviews__grid { grid-template-columns: 264px minmax(0, 1fr); gap: 32px 36px; }
}

/* ================= Phones ================= */

@media (max-width: 760px) {
	.jggp { --jggp-gutter: 16px; }

	.jggp-crumbs { padding: 12px 0 10px; }
	.jggp .jggp-crumbs, .jggp .jggp-crumbs * { font-size: 11px; }
	.jggp-head__row { align-items: flex-start; }
	.jggp .jggp-title { font-size: clamp(28px, 8vw, 34px); }
	.jggp .jggp-title-ja { font-size: 15px; }
	.jggp .jggp-facts { gap: 6px 16px; }
	.jggp-facts li { font-size: 14.5px; }
	.jggp .jggp-pill { min-height: 38px; padding: 8px 12px; }
	.jggp-head__actions .jggp-pill span { display: none; } /* Icon only next to the name. */
	.jggp-head__actions .jggp-pill { width: 40px; padding: 0; }

	/* Photos: a full-bleed swipe strip; the map tile waits for the Location section. */
	.jggp-mosaic {
		display: block;
		height: auto;
		margin: 16px calc(-1 * var(--jggp-gutter)) 0;
	}
	.jggp-mosaic--0 { display: none; }
	.jggp-mosaic__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.jggp-mosaic__track::-webkit-scrollbar { display: none; }
	.jggp-mosaic__item,
	.jggp-mosaic__item:nth-child(n+4) { display: block; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
	.jggp .jggp-mosaic__map { display: none; }
	.jggp-mosaic--0.jggp-mosaic--share { display: block; margin-left: 0; margin-right: 0; }
	.jggp-mosaic__share { margin: 6px 0 0; }
	.jggp-mosaic__share-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 18px var(--jggp-gutter); }
	.jggp .jggp-mosaic__share-eyebrow { flex: 1 1 100%; }
	.jggp .jggp-mosaic__share-title,
	.jggp .jggp-mosaic--2 .jggp-mosaic__share-title { flex: 1 1 auto; font-size: 19px; }
	.jggp .jggp-mosaic__share-text { display: none; }
	.jggp .jggp-mosaic__share-btn { margin-top: 0; }
	.jggp .jggp-mosaic__count { left: auto; right: 12px; bottom: 12px; padding: 6px 11px; }
	.jggp .jggp-mosaic--share .jggp-mosaic__count { top: calc(75vw - 42px); bottom: auto; } /* Stay on the photo, above the Share tile. */
	.jggp-mosaic__count-all { display: none; }
	.jggp-mosaic__count-pos { display: inline; }
	.jggp-mosaic--1 .jggp-mosaic__count-all { display: inline; }

	.jggp-tabs { margin-top: 6px; }
	.jggp-tabs__inner { gap: 16px; min-height: 50px; }
	.jggp-tabs.is-stuck .jggp-tabs__name { display: none; }
	.jggp-tabs__list { gap: 22px; }
	.jggp .jggp-tabs__list a { padding: 15px 0 13px; font-size: 14.5px; }
	.jggp-tabs.show-cta .jggp-tabs__cta { display: none; }

	.jggp-body { margin-top: 28px; }
	.jggp .jggp-h2 { font-size: 21px; }
	.jggp .jggp-h2--display { font-size: 26px; }
	.jggp-visit__list { grid-template-columns: 1fr; }
	.jggp-card-box { padding: 20px 20px 22px; }
	.jggp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
	.jggp-features li { column-gap: 10px; font-size: 14.5px; line-height: 21px; }
	/* 2.11.11: place.js marks features that don't fit half the width. Those come first, one per row; the short
	   ones follow together in a clean two-column block, so rows never alternate between one and two items.
	   Without the script, phones keep the single column. */
	.jggp-features.is-smart li.is-wide { grid-column: 1 / -1; order: -1; }
	.jggp-features-head { margin: 28px 0 16px; }
	.jggp .jggp-features-head .jggp-h3 { font-size: 21px; } /* Same as "About" on phones. */
	.jggp-features.jggp-features--grid { grid-template-columns: 1fr; gap: 14px; }
	.jggp-loc { grid-template-columns: 1fr; gap: 40px; }
	.jggp .jggp-map__frame { flex: none; width: 100%; min-height: 0; aspect-ratio: 4 / 3; }

	.jggp { --jggp-section-gap: 44px; }
	.jggp-reviews__grid { grid-template-columns: 1fr; gap: 32px; }
	.jggp .jggp-reviews__score { font-size: 54px; }
	.jggp-reviews__summary .jggp-stars--lg { --jggp-star-size: 28px; }
	.jggp-reviews__head { margin-bottom: 24px; }
	.jggp-reviews__tools { flex-direction: column; align-items: stretch; gap: 10px; }
	.jggp .jggp-reviews__search { flex: none; }
	.jggp .jggp-reviews__sort select { flex: 1; }
	.jggp-review { padding: 24px 0; }
	.jggp .jggp-review__rating { margin-bottom: 14px; }
	.jggp .jggp-review__text, .jggp .jggp-review__readmore { font-size: 15.5px; }
	.jggp-review__body { margin-top: 14px; }
	.jggp-reviews--empty .jggp-reviews__summary { padding: 22px 20px; }
	.jggp-reviews--empty .jggp-reviews__action,
	.jggp-reviews--empty .jggp-btn { width: 100%; }
	.jggp-traveler-photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.jggp .jggp-traveler-photos .jggp-reviews__h { margin-bottom: 16px; }
	.jggp-traveler-photos { margin-bottom: 44px; }
	.jggp-traveler-photos__more { font-size: 16px; }
	.jggp-review__photos { gap: 6px; }
	.jggp .jggp-review__photo { width: calc((100% - 12px) / 3); max-width: 120px; }
	.jggp-section + .jggp-section,
	.jggp-tour + .jggp-section,
	.jggp-section + .jggp-tour { margin-top: 56px; }
	.jggp-section__head { flex-wrap: wrap; }
	.jggp-cards--3 { grid-template-columns: 1fr; gap: 14px; }
	.jggp-cards--3 .jggp-card a { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; }
	.jggp-cards--3 .jggp-card__img { grid-row: span 2; aspect-ratio: 1; }
	.jggp-cards--3 .jggp-card__eyebrow { margin-top: 0; }
	.jggp .jggp-cards--3 .jggp-card__title { font-size: 17px; }
	.jggp .jggp-cards--4 .jggp-card__title { font-size: 18px; }
	.jggp-cards--3 .jggp-card__img + .jggp-card__title { margin-top: 0; }
	.jggp-cards--4 { display: flex; gap: 12px; margin: 0 calc(-1 * var(--jggp-gutter)); padding: 0 var(--jggp-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.jggp-cards--4::-webkit-scrollbar { display: none; }
	.jggp-cards--4 .jggp-card { flex: 0 0 62%; scroll-snap-align: start; }

	.jggp-tour { grid-template-columns: 1fr; }
	.jggp-tour__img { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
	.jggp-tour__body { padding: 26px 20px 28px; }
	.jggp-tour .jggp-btn { width: 100%; }

	.jggp .jggp-owner__quote p { font-size: 17px; }
	.jggp .jggp-events__list a { grid-template-columns: minmax(0, 1fr) auto; }
	.jggp .jggp-events__date { grid-column: 1 / -1; }

	.jggp-request { flex-wrap: wrap; }
	.jggp-request .jggp-btn { width: 100%; }
	.jggp-status { flex-direction: column; align-items: flex-start; }

	.jggp-lightbox__stage { padding: 0 0 16px; }
	.jggp-lightbox__nav { top: auto; bottom: 16px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Reduce motion: no zoom, but photos still react by darkening slightly. */
	.jggp *, .jggp *::after { transition: none !important; }
	.jggp .jggp-mosaic__img,
	.jggp .jggp-mosaic__map img,
	.jggp .jggp-card__img img,
	.jggp .jggp-map__img,
	.jggp .jggp-tour__img img { transition: filter .2s ease !important; }
	.jggp-mosaic__item:hover .jggp-mosaic__img,
	.jggp-mosaic__map:hover img,
	.jggp-card a:hover .jggp-card__img img,
	a.jggp-map__frame:hover .jggp-map__img,
	.jggp-tour:hover .jggp-tour__img img { transform: none; filter: brightness(.85); }
}

/* Phones: one feature per line (two narrow columns wrap almost every label). */
@media (max-width: 480px) {
	.jggp .jggp-features { grid-template-columns: 1fr; gap: 14px; }
	.jggp-features li { column-gap: 12px; font-size: 15px; }
	.jggp .jggp-features.is-smart { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
}