/* Nav */
.site-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	transition: background 0.3s;
}
.site-nav.is-home {
	background: transparent;
	border-bottom-color: rgba(255,255,255,0.12);
}
.nav-inner {
	max-width: var(--max); margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 32px;
}
.nav-brand { text-decoration: none; }
.nav-brand-name {
	font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: -0.01em;
	color: var(--text); line-height: 1;
}
.nav-brand-city {
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
	color: var(--muted); margin-top: 2px;
}
.site-nav.is-home .nav-brand-name { color: #fff; }
.site-nav.is-home .nav-brand-city { color: rgba(255,255,255,0.5); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
	font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.13em;
	color: var(--muted); text-decoration: none;
	border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.nav-links a.is-active { color: var(--text); border-bottom-color: var(--accent); }
.site-nav.is-home .nav-links a { color: rgba(255,255,255,0.6); }
.site-nav.is-home .nav-links a.is-active { color: #fff; border-bottom-color: #fff; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.lang-switch { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint); }
.lang-switch a { text-decoration: none; color: var(--faint); }
.lang-switch a.is-active { color: var(--text); }
.site-nav.is-home .lang-switch, .site-nav.is-home .lang-switch a { color: rgba(255,255,255,0.4); }
.site-nav.is-home .lang-switch a.is-active { color: #fff; }
.lang-sep { margin: 0 6px; }
.btn-tour {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
	background: var(--text); color: #fff; padding: 8px 16px; text-decoration: none; white-space: nowrap;
}
.site-nav.is-home .btn-tour { background: rgba(255,255,255,0.12); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; font-size: 22px; color: var(--text); }
.site-nav.is-home .nav-burger { color: #fff; }

/* Footer */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); }
.footer-main { max-width: var(--max); margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: 4fr 3fr 3fr; gap: 40px; }
.footer-brand-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300; margin: 0 0 8px; }
.footer-city { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--muted); margin: 0 0 20px; }
.footer-lead { font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 36ch; margin: 0; }
.footer-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--faint); margin: 0 0 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { font-size: 13px; color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }
.footer-cafe-name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 300; margin: 0 0 8px; }
.footer-cafe-text { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 14px; }
.footer-cafe-link {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
	color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px;
}
.footer-bar { border-top: 1px solid var(--border); padding: 20px 32px; }
.footer-bar-inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-bar p { font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: 0.1em; margin: 0; }
.footer-nocopy { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: 0.04em; margin: 0; }
.footer-nocopy-icon {
	width: 18px; height: 18px; flex-shrink: 0; display: block;
	background: currentColor;
	-webkit-mask: url(/img/etc/no-copyright.svg) center / contain no-repeat;
	mask: url(/img/etc/no-copyright.svg) center / contain no-repeat;
}

/* Hero */
.hero { position: relative; margin-top: 80px; min-height: 50vh; overflow: hidden; }
.hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-g1 { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(26,25,22,0.28) 0%, rgba(26,25,22,0.18) 32%, rgba(26,25,22,0.55) 62%, rgba(26,25,22,0.82) 100%); }
.hero-g2 { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(26,25,22,0.4) 0%, transparent 60%); }
.hero-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 0 64px 64px; max-width: var(--max); margin: 0 auto; }
.hero .hero-content {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 2;
	display: block;
	height: auto;
	padding: 40px 64px;
	max-width: var(--max);
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.hero-content .grid-12 { max-width: none; width: 100%; align-items: start; }
.hero-content .hero-counters { position: static; bottom: auto; right: auto; }
.hero-kicker {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em;
	color: rgba(255,255,255,0.55); margin: 0 0 16px; position: relative; z-index: 3;
}
.hero h1 {
	font-family: var(--font-serif); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08;
	font-weight: 300; color: #fff; width: 75%; max-width: none; margin: 0 0 32px;
}
.hero-lead { color: rgba(255,255,255,0.65); max-width: 44ch; line-height: 1.65; font-size: 15px; margin: 0 0 24px; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.btn-light {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
	background: #fff; color: var(--text); padding: 15px 34px; text-decoration: none; display: inline-block;
}
.btn-light:hover { background: var(--bg); }
.hero-link { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; letter-spacing: 0.05em; }
.hero-link:hover { color: #fff; }
.hero-counters { position: absolute; bottom: 64px; right: 64px; display: flex; gap: 40px; }
.hero-counters p { text-align: right; margin: 0; }
.hero-counters .n { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; color: rgba(255,255,255,0.9); line-height: 1; }
.hero-counters .l { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.35); letter-spacing: 0.15em; margin-top: 3px; }

/* Sections */
.section { padding: 80px 64px; }
.section-border { border-bottom: 1px solid var(--border); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; max-width: var(--max); margin: 0 auto; }
.col-1 { grid-column: span 1; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-7 { grid-column-start: 7; }
.col-5.col-start-8 { grid-column: 8 / span 5; }
.col-4.col-start-9 { grid-column: 9 / span 4; }
.col-1.col-start-7 { grid-column: 7 / span 1; }
.about-step-img { height: 400px; width: 100%; object-fit: cover; display: block; }
.about-strip-wrap {
	width: 100%;
	margin-top: 40px;
	background: transparent;
}
.about-strip-hd {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--accent);
	margin: 0 0 12px;
}
.about-strip-row {
	--strip-gap: 8px;
	--strip-arrow: 48px;
	display: flex;
	align-items: stretch;
	gap: var(--strip-gap);
	width: 100%;
	background: transparent;
}
.about-strip {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	background: transparent;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	container-type: inline-size;
}
.about-strip::-webkit-scrollbar { display: none; }
.about-strip.is-drag { cursor: grabbing; }
.about-strip-track {
	display: flex;
	gap: var(--strip-gap);
	width: max-content;
	background: transparent;
}
.about-strip img {
	width: calc((100cqi - 3 * var(--strip-gap)) / 4);
	height: auto;
	aspect-ratio: 27 / 32;
	max-width: none;
	flex-shrink: 0;
	display: block;
	object-fit: cover;
	background: transparent;
	-webkit-user-drag: none;
	user-select: none;
	cursor: pointer;
}
.about-strip-btn {
	flex: 0 0 var(--strip-arrow);
	width: var(--strip-arrow);
	padding: 0;
	border: 1px solid var(--border);
	background: var(--light);
	color: var(--text);
	font-family: var(--font-serif);
	font-size: 36px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-strip-btn:hover { background: rgba(26, 25, 22, 0.06); }
.about-strip-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.num { font-family: var(--font-mono); font-size: 18px; color: var(--faint); }
.kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--accent); margin: 0 0 24px; }
.h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 300; line-height: 1.2; margin: 0 0 24px; }
.body { color: var(--muted); line-height: 1.85; font-size: 15px; margin: 0 0 20px; }
.body-faint { color: var(--faint); line-height: 1.85; font-size: 14px; margin: 0; }
.index-expo-links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 24px 0 0; }
.page-head .grid-12 { align-items: start; }
.body-cols {
	-webkit-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 24px;
	column-gap: 24px;
	-webkit-column-rule: 1px solid var(--border);
	column-rule: 1px solid var(--border);
	column-fill: balance;
	text-align: justify;
	hyphens: auto;
	line-height: 1.4;
	margin: 0;
	max-width: 100%;
}
.body-cols > p { margin: 0 0 0.85em; }
.body-cols > p:last-child { margin-bottom: 0; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 48px; max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-head-left { display: flex; align-items: baseline; gap: 16px; }
.section-head h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; margin: 0; }
.link-quiet { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--faint); text-decoration: none; }
.link-quiet:hover { color: var(--accent); }

.featured-row { display: grid; grid-template-columns: 8fr 4fr; gap: 16px; max-width: var(--max); margin: 0 auto 16px; }
.featured-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--max); margin: 0 auto; }
.card { text-decoration: none; color: inherit; display: block; }
.card-img { overflow: hidden; background: var(--light); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.card:hover .card-img img { transform: scale(1.04); }
.h-440 { height: 440px; }
.h-280 { height: 280px; }
.h-320 { height: 320px; }
.h-260 { height: 260px; }
.h-240 { height: 240px; }
.h-200 { height: 200px; }
.h-180 { height: 180px; }
.h-160 { height: 160px; }
.card-meta { margin-top: 16px; }
.card-num { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.12em; margin: 0 0 4px; }
.card-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 300; margin: 0; }
.card-loc { font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: 0.1em; margin: 4px 0 0; }

.frames { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.frames-img { height: 400px; overflow: hidden; background: var(--light); }
.frames-img img { width: 100%; height: 100%; object-fit: cover; }
.frames-text { display: flex; flex-direction: column; justify-content: center; padding: 64px; border-left: 1px solid var(--border); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
	border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; text-decoration: none;
}
.chip:hover, .chip.is-active { border-color: var(--accent); color: var(--accent); }
.chip-dark {
	border-color: var(--text); background: var(--text); color: #fff;
}
.chip-accent.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }

.tour-cta { padding: 128px 64px; background: var(--text); }
.tour-cta-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.tour-cta .kicker { color: #4A4840; }
.tour-cta h2 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.1; color: var(--cream); margin: 0; }
.tour-cta em { font-style: italic; color: var(--faint); }
.tour-cta h2 span { font-size: 0.42em; font-weight: 400; letter-spacing: 0.02em; color: var(--faint); }
.btn-outline {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
	border: 1px solid var(--cream); color: var(--cream); padding: 18px 40px; text-decoration: none; display: inline-block; flex-shrink: 0;
}
.btn-outline:hover { background: var(--cream); color: var(--text); }

.places-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: var(--max); margin: 0 auto; }
.themes { padding: 64px; background: var(--light); }
.themes-inner { max-width: var(--max); margin: 0 auto; }
.cafe-banner { background: var(--light); border-top: 1px solid var(--border); padding: 48px 64px; }
.cafe-banner-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cafe-banner h3 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300; margin: 8px 0 0; }

/* Inner pages */
.page { padding-top: 80px; color: var(--text); }
.page-head { padding: 64px; max-width: var(--max); margin: 0 auto; border-bottom: 1px solid var(--border); }
.page-head h1 { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.1; margin: 0; }
.page-head .hero-lead { color: var(--muted); max-width: 44ch; line-height: 1.75; font-size: 15px; margin: 24px 0 32px; }
.page-head .hero-link { color: var(--muted); }
.page-head .hero-link:hover { color: var(--text); }
.page-head .hero-counters { position: static; bottom: auto; right: auto; justify-content: flex-start; }
.page-head .hero-counters .n { color: var(--text); }
.page-head .hero-counters .l { color: var(--faint); }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-head-lead { color: var(--muted); font-size: 14px; max-width: 50ch; line-height: 1.7; margin: 0; }
.filters { padding: 24px 64px; border-bottom: 1px solid var(--border); background: var(--light); }
.filters-inner { max-width: var(--max); margin: 0 auto; }
.filter-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.filter-group p { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--faint); margin: 0 0 8px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-count { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin: 12px 0 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--max); margin: 0 auto; padding: 48px 64px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.card-foot { margin-top: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.placeholder-card { opacity: 0.3; }
.placeholder-box { height: 320px; background: var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }
.card-img-rel { position: relative; overflow: hidden; }
.card-hover {
	position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
	opacity: 0; transition: opacity 0.3s;
	background: linear-gradient(to top, rgba(26,25,22,0.7) 0%, transparent 60%);
	font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.8); letter-spacing: 0.12em;
}
.card:hover .card-hover { opacity: 1; }

.btn-dark {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
	background: var(--text); color: var(--bg); padding: 12px 28px; text-decoration: none; white-space: nowrap;
	border: 0; cursor: pointer;
}
.btn-dark:hover { background: var(--accent); }
.btn-dark:disabled, .btn-dark.is-sent {
	opacity: 0.45; cursor: default; pointer-events: none;
}
.hp {
	position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}

/* Tour */
.tour-progress { position: fixed; top: 80px; left: 0; right: 0; z-index: 90; height: 2px; background: var(--border); }
.tour-progress span { display: block; height: 100%; background: var(--accent); }
.tour-bar { padding: 32px 64px; border-bottom: 1px solid var(--border); max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.tour-bar-left { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--faint); }
.tour-bar-left .cur { color: var(--accent); }
.tour-main { max-width: var(--max); margin: 0 auto; padding: 48px 64px; display: grid; grid-template-columns: 7fr 5fr; gap: 32px; }
.tour-photo { background: var(--light); overflow: hidden; position: relative; }
.tour-photo img { width: 100%; height: 520px; object-fit: cover; }
.tour-badge {
	position: absolute; top: 20px; left: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
	background: rgba(245,240,232,0.9); color: var(--accent); padding: 6px 12px;
}
.audio-bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; background: var(--light); border: 1px solid var(--border); }
.audio-bar audio { display: none; }
.audio-btn { width: 36px; height: 36px; border: 1px solid var(--text); background: transparent; cursor: pointer; flex-shrink: 0; color: var(--text); }
.audio-bar.is-locked .audio-btn,
.audio-bar.is-locked .audio-btn:disabled {
	color: var(--faint);
	border-color: var(--faint);
	cursor: default;
	pointer-events: none;
}
.audio-line { flex: 1; height: 2px; background: var(--border); position: relative; }
.audio-line span { display: block; height: 100%; width: 0; background: var(--text); }
.audio-time { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.meta-grid .k { font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: 0.14em; margin: 0; }
.meta-grid .v { font-size: 14px; margin: 3px 0 0; }
.story p { font-size: 14px; color: var(--muted); line-height: 1.4; margin: 0; }
.story > p { margin: 0 0 0.85em; }
.story > p:last-child { margin-bottom: 0; }
/* .story p:first-of-type { font-family: var(--font-serif); font-weight: 300; font-size: 16px; color: var(--text); line-height: 1.9; } */
.tour-nav {
	display: grid;
	grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) minmax(140px, 220px);
	align-items: center;
	gap: 16px;
	padding: 40px 64px;
	max-width: var(--max);
	margin: 0 auto;
	border-top: 1px solid var(--border);
}
.tour-nav-side { min-width: 0; }
.tour-adj {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.tour-adj img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	flex-shrink: 0;
}
.tour-adj .card-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tour-thumbs-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.tour-thumbs-btn {
	flex: 0 0 36px;
	width: 36px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--border);
	background: var(--light);
	color: var(--text);
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tour-thumbs-btn:hover { background: rgba(26, 25, 22, 0.06); }
.tour-thumbs {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	padding: 4px 0;
	position: relative;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.tour-thumbs::-webkit-scrollbar { display: none; }
.tour-thumbs a {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 72px;
	border: 1px solid var(--border);
	overflow: hidden;
	display: block;
}
.tour-thumbs a.is-current {
	width: 56px;
	height: 84px;
	border: 2px solid var(--accent);
}
.tour-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.tour-thumb-num {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.08em;
	text-align: center;
	color: #fff;
	background: linear-gradient(transparent, rgba(26,25,22,0.72));
	padding: 10px 2px 3px;
}
.tour-next { justify-content: flex-end; text-align: right; }

/* Artwork detail */
.art-hero { position: relative; background: var(--light); }
.art-hero img { width: 100%; height: 70vh; max-height: 700px; object-fit: cover; }
.art-hero-g { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(26,25,22,0.6) 100%); }
.art-hero-txt { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 64px 40px; max-width: var(--max); margin: 0 auto; }
.art-hero-txt h1 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; color: #fff; line-height: 1.1; margin: 0; }
.art-hero-txt .sub { font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; color: rgba(245,240,232,0.6); margin: 6px 0 0; }
.crumb { padding: 24px 64px; border-bottom: 1px solid var(--border); max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.crumb-path { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--faint); }
.crumb-path a { color: var(--faint); text-decoration: none; }
.art-layout { max-width: var(--max); margin: 0 auto; padding: 64px 64px 16px; display: grid; grid-template-columns: 7fr 4fr; gap: 48px; align-items: start; }
.art-layout .art-photo {
	width: 100%;
	height: auto;
	margin-bottom: 0;
	background: transparent;
	overflow: hidden;
}
.art-layout .art-photo-frame {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}
.art-layout .art-photo-frame img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 680px;
	object-fit: contain;
	object-position: top center;
}
.art-layout .art-photo-bar {
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
}
.art-layout .art-photo-bar .card-loc {
	margin: 0;
	flex-shrink: 0;
}
.art-layout .art-photo-bar .audio-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.art-viewer {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 400;
	align-items: center;
	justify-content: center;
}
.art-viewer.is-open {
	display: flex;
}
.art-viewer-dim {
	position: absolute;
	inset: 0;
	background: rgba(26, 25, 22, 0.96);
}
.art-viewer-items { display: none; }
.art-viewer-stage {
	position: relative;
	z-index: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 92vw;
	max-height: 92vh;
}
.art-viewer-pic {
	max-width: 92vw;
	max-height: calc(92vh - 40px);
	width: auto;
	height: auto;
	object-fit: contain;
}
.art-viewer-cap {
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: rgba(245, 240, 232, 0.55);
	text-align: center;
}
.art-viewer-cap:empty { display: none; }
.art-viewer-close,
.art-viewer-prev,
.art-viewer-next {
	position: absolute;
	z-index: 2;
	border: 1px solid rgba(245, 240, 232, 0.35);
	background: transparent;
	color: #F5F0E8;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.art-viewer-close {
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	font-size: 28px;
}
.art-viewer-prev,
.art-viewer-next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 64px;
	font-size: 36px;
	font-weight: 300;
}
.art-viewer-prev { left: 20px; }
.art-viewer-next { right: 20px; }
.art-viewer-close:hover,
.art-viewer-prev:hover,
.art-viewer-next:hover {
	background: rgba(245, 240, 232, 0.1);
}
body.art-viewer-lock { overflow: hidden; }
.sticky { position: sticky; top: 100px; }
.sticky h1 {
	font-family: var(--font-serif);
	font-size: clamp(1.8rem, 2.5vw, 2.6rem);
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 24px;
}
.prevnext { border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; max-width: var(--max); margin: 0 auto; }
.prevnext a { display: flex; align-items: center; gap: 20px; padding: 32px 48px; text-decoration: none; color: inherit; }
.prevnext a:first-child { border-right: 1px solid var(--border); }
.prevnext a:hover { background: var(--light); }
.prevnext img { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.prevnext .right { justify-content: flex-end; text-align: right; }
.prevnext-arr {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 80px;
	font-weight: 300;
	line-height: 1;
	color: var(--text);
}
.prevnext a:first-child .prevnext-arr { margin-left: auto; }
.prevnext a.right .prevnext-arr { margin-right: auto; }

/* Places */
.places-list { max-width: var(--max); margin: 0 auto; padding: 48px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.place-row { display: flex; background: var(--bg); text-decoration: none; color: inherit; }
.place-row img { width: 200px; height: 180px; object-fit: cover; flex-shrink: 0; }
.place-row-txt { padding: 24px 32px; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
.place-hero { height: 400px; position: relative; overflow: hidden; background: var(--light); }
.place-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.place-hero-g { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(26,25,22,0.65) 100%); }
.place-hero-txt { position: absolute; bottom: 0; padding: 0 64px 40px; max-width: var(--max); left: 0; right: 0; margin: 0 auto; }
.place-hero-txt h1 { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 300; color: #fff; line-height: 1.05; margin: 0; }

/* Archive groups */
.archive-section { padding: 56px 64px; border-bottom: 1px solid var(--border); max-width: var(--max); margin: 0 auto; }
.archive-head { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.archive-grid .wide { grid-column: span 2; grid-row: span 2; }
.archive-grid .wide .card-img { height: 340px; }

/* Contact */
.contact-grid { max-width: var(--max); margin: 0 auto; padding: 0 64px 80px; display: grid; grid-template-columns: 7fr 4fr; gap: 64px; }
.field { margin-bottom: 24px; }
.field label { font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: 0.18em; display: block; margin-bottom: 8px; }
.field input, .field textarea {
	width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 0;
	padding: 12px 16px; font-size: 15px; color: var(--text); outline: none;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.contact-panel { width: 100%; position: relative; }
.contact-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	background: rgba(245, 240, 232, 0.78);
}
.contact-overlay[hidden] { display: none; }
.contact-overlay p {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.3rem;
	font-weight: 300;
	color: var(--text);
}
.contact-result {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 24px 48px 24px 16px;
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.contact-result[hidden] { display: none; }
.contact-result p { margin: 0; font-size: 15px; line-height: 1.85; }
.contact-result-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; margin: 0 0 12px !important; }
.contact-result.is-ok {
	border-color: #7A8F6A;
	background: #E8EDE3;
	color: #5A7350;
}
.contact-result.is-err {
	border-color: #B55A45;
	background: #F3E8E2;
	color: #B55A45;
}
.contact-result-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.info-block { border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 40px; }

/* About */
.full-img { height: 230px; overflow: hidden; background: var(--light); }
.full-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.info-rows { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border); }
.info-rows .k { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: 0.1em; }

/* Cafe */
.cafe-page { background: #FDFAF4; color: #1A1512; }
.cafe-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #FDFAF4; border-bottom: 1px solid #E8DDCC; }
.cafe-nav-inner { max-width: var(--max); margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.cafe-hero { position: relative; height: 90vh; padding-top: 80px; }
.cafe-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.cafe-hero-g { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(253,250,244,0.3) 0%, rgba(253,250,244,0.1) 40%, rgba(253,250,244,0.9) 100%); }
.cafe-accent { color: #C17B3A; }
.cafe-muted { color: #9A8872; }
.cafe-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; }
.menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #E8DDCC; }
.cafe-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; background: #F5EDD8; padding: 64px; border-top: 1px solid #E8DDCC; }
.btn-ghost { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; border: 1px solid #E8DDCC; color: #9A8872; padding: 8px 16px; text-decoration: none; }

.empty { padding: 96px; text-align: center; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; color: var(--muted); }

@media (max-width: 960px) {
	.nav-links { display: none; }
	.nav-burger { display: block; }
	.hero-counters { display: none; }
	.hero-content, .section, .page-head, .filters, .grid-4, .tour-bar, .tour-main, .tour-nav, .art-layout, .crumb, .places-list, .archive-section, .contact-grid, .cafe-banner, .themes, .tour-cta { padding-left: 24px; padding-right: 24px; }
	.hero .hero-content { padding: 32px 24px; }
	.featured-row, .featured-3, .frames, .places-grid, .grid-4, .tour-main, .art-layout, .places-list, .contact-grid, .cafe-menu, .cafe-features, .footer-main, .prevnext, .tour-nav, .grid-12 { grid-template-columns: 1fr; }
	.tour-nav-side:empty { display: none; }
	.tour-next { justify-content: flex-start; text-align: left; }
	.tour-thumbs-btn { height: 60px; font-size: 24px; }
	.tour-thumbs a { width: 40px; height: 60px; }
	.tour-thumbs a.is-current { width: 48px; height: 72px; }
	.col-1, .col-4, .col-5, .col-6, .col-7, .col-8, .col-start-7, .col-start-8, .col-start-9,
	.col-5.col-start-8, .col-4.col-start-9, .col-1.col-start-7 { grid-column: auto; }
	.place-row { flex-direction: column; }
	.place-row img { width: 100%; height: 200px; }
	.art-viewer-prev { left: 8px; }
	.art-viewer-next { right: 8px; }
	.art-viewer-close { top: 12px; right: 12px; }
}

@media (max-width: 640px) {
	.body-cols {
		-webkit-column-count: 1;
		column-count: 1;
		column-rule: none;
		text-align: left;
	}
}

/* Photostest */
.pt-filter { padding: 20px 64px; border-bottom: 1px solid var(--border); background: var(--light); }
.pt-filter-inner { max-width: var(--max); margin: 0 auto; }
.pt-tags { display: flex; flex-wrap: wrap; gap: 8px; max-height: 76px; overflow-y: auto; }
button.pt-tag {
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
	background: transparent; cursor: pointer;
}
button.pt-tag.is-on {
	border-color: var(--text); background: var(--text); color: #fff;
}
.pt-art-link { margin-top: 24px; }
.pt-back { margin-top: 16px; }
.pt-shell {
	max-width: var(--max); margin: 0 auto;
	padding: 36px 64px 80px;
	display: grid; grid-template-columns: 200px 1fr;
	gap: 40px; align-items: start;
}
.pt-toc {
	position: sticky; top: 96px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding-right: 8px;
}
.pt-toc-list { list-style: none; margin: 0; padding: 0; }
.pt-toc-list li { margin: 0 0 10px; }
.pt-toc-list a {
	display: flex; gap: 10px; align-items: flex-start;
	text-decoration: none; color: var(--muted);
}
.pt-toc-list a:hover, .pt-toc-list a.is-current, .pt-toc-list a.is-active { color: var(--text); }
.pt-toc-list a.is-dim { opacity: 0.35; }
.pt-toc-list li.is-off { display: none; }
.pt-toc-num {
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
	color: var(--accent); min-width: 16px; padding-top: 3px;
}
.pt-toc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-toc-title { font-family: var(--font-serif); font-size: 0.88rem; font-weight: 300; line-height: 1.25; }
.pt-toc-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint); }
.pt-group { display: none; margin: 0 0 56px; padding: 0 0 40px; border-bottom: 1px solid var(--border); }
.pt-group.is-on { display: block; }
.pt-group.is-out { display: none !important; }
.pt-banner {
	display: grid;
	height: auto; aspect-ratio: 19 / 4;
	overflow: hidden; background: var(--light); margin-bottom: 16px;
}
.pt-banner.is-port { height: 360px; aspect-ratio: auto; }
.pt-page[data-single="yes"] .pt-banner.is-port { height: min(72vh, 680px); aspect-ratio: auto; }
.pt-banner-img {
	display: block; width: 100%; height: 100%; padding: 0; border: 0;
	background: transparent; cursor: pointer;
}
.pt-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-page[data-single="yes"] .pt-banner.is-port .pt-banner-img img { object-fit: contain; }
.pt-banner .pt-shot-cap { display: none; }
.pt-group-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 24px; margin-bottom: 16px;
}
.pt-group-title {
	font-family: var(--font-serif); font-size: clamp(1.35rem, 2vw, 1.85rem);
	font-weight: 300; line-height: 1.15; margin: 0 0 6px;
}
.pt-page[data-single="yes"] .pt-group-title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.pt-group-meta {
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
	color: var(--faint); margin: 0;
}
.pt-group-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 42%; }
.pt-shot-cap {
	font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
	color: var(--faint); margin: 8px 0 0;
}
.pt-set-hd {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--accent);
	margin: 0 0 12px;
}
.pt-set-wrap {
	--pt-thumb-h: 120px;
	--pt-set-gap: 8px;
	--pt-set-arrow: 48px;
	display: flex; align-items: stretch; gap: var(--pt-set-gap); width: 100%;
}
.pt-page[data-single="yes"] .pt-set-wrap { --pt-thumb-h: 148px; }
.pt-set-grid .pt-set-btn { display: none; }
.pt-set-btn {
	flex: 0 0 var(--pt-set-arrow); width: var(--pt-set-arrow); padding: 0;
	border: 1px solid var(--border); background: var(--light); color: var(--text);
	font-family: var(--font-serif); font-size: 36px; font-weight: 300; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pt-set-btn:hover { background: rgba(26, 25, 22, 0.06); }
.pt-set-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.pt-set-scroller { flex: 1; min-width: 0; }
.pt-set-grid .pt-set-scroller { overflow: visible; }
.pt-set-strip .pt-set-scroller {
	overflow-x: auto; overflow-y: hidden; cursor: grab;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
	container-type: inline-size;
}
.pt-set-strip .pt-set-scroller::-webkit-scrollbar { display: none; }
.pt-set-strip .pt-set-scroller.is-drag { cursor: grabbing; }
.pt-set-track { display: flex; gap: var(--pt-set-gap); align-items: stretch; }
.pt-set-grid .pt-set-track { flex-wrap: wrap; width: 100%; }
.pt-set-strip .pt-set-track { flex-wrap: nowrap; width: max-content; background: transparent; }
.pt-set-shot {
	position: relative;
	flex: 0 0 auto; height: var(--pt-thumb-h);
	padding: 0; border: 0; background: var(--light); cursor: pointer;
}
.pt-set-num {
	position: absolute; z-index: 1; right: 6px; bottom: 6px;
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; line-height: 1;
	color: #fff; text-shadow: 0 1px 2px rgba(26, 25, 22, 0.7);
	pointer-events: none;
}
.pt-set-shot img {
	display: block; height: var(--pt-thumb-h); width: auto; max-width: none;
	-webkit-user-drag: none; user-select: none;
}
.pt-set-strip .pt-set-shot {
	height: auto;
	width: calc((100cqi - 4 * var(--pt-set-gap)) / 5);
	background: transparent;
}
.pt-set-strip .pt-set-shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 27 / 32;
	object-fit: cover;
}
.pt-more { padding: 24px 0 8px; text-align: center; }
.pt-more.is-off { display: none; }

@media (max-width: 960px) {
	.pt-filter { padding: 16px 24px; }
	.pt-shell { grid-template-columns: 1fr; padding: 24px 24px 64px; gap: 20px; }
	.pt-toc { position: static; max-height: none; overflow: visible; padding-right: 0; }
	.pt-toc-list {
		display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto;
		padding-bottom: 8px; scrollbar-width: none;
	}
	.pt-toc-list li { margin: 0; flex: 0 0 auto; }
	.pt-toc-title { white-space: nowrap; }
	.pt-banner { height: 200px; aspect-ratio: auto; }
	.pt-page[data-single="yes"] .pt-banner { height: 260px; aspect-ratio: auto; }
	.pt-banner.is-port, .pt-page[data-single="yes"] .pt-banner.is-port { height: 280px; }
	.pt-group-head { flex-direction: column; gap: 12px; }
	.pt-group-tags { max-width: none; justify-content: flex-start; }
	.pt-set-wrap { --pt-thumb-h: 104px; --pt-set-arrow: 48px; }
}