/* the home page as a guided tour: picture tiles, chips, listen toggles, reveal-on-scroll */
.home .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.home .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .home .reveal { opacity: 1; transform: none; transition: none; } }

.hm-grid { display: grid; gap: 18px; }
.hm-map { grid-template-columns: repeat(3, 1fr); }
.hm-map .htile.big { grid-column: span 2; grid-row: span 2; }
.hm-places { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.hm-yours { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.htile { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 0; border-radius: 16px; text-align: left; text-decoration: none; color: var(--text); cursor: pointer; font: inherit;
  background: rgba(255, 240, 210, .03); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .14); transition: box-shadow .35s, transform .35s var(--ease), background .35s; }
.htile:hover { transform: translateY(-3px); background: rgba(255, 240, 210, .055); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .42), 0 24px 50px -24px rgba(0, 0, 0, .8); }
.htile:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.ht-img { position: relative; display: block; aspect-ratio: 16 / 9.2; overflow: hidden; background: #15100b; }
.htile.big .ht-img { flex: 1; aspect-ratio: auto; min-height: 300px; }
.ht-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92); }
.htile:hover .ht-img img { transform: scale(1.045); filter: saturate(1.05); }
.ht-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 8, 6, .55)); pointer-events: none; }
.ht-scene { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 5px 10px; border-radius: 99px; font: 500 10.5px/1 var(--label); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #1a1208; background: var(--gold-hi); }
.ht-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ht-body em { font: 500 10.5px/1 var(--label); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ht-body strong { font: 500 25px/1.15 var(--display); color: var(--text); }
.htile.big .ht-body strong { font-size: 34px; }
.ht-body > span { font: 400 15px/1.55 var(--body); color: var(--text-2); }
/* the flyover tile has no still: a big play mark on dark parchment */
.ht-play { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(201, 163, 91, .25), transparent 65%), #120d09; }
.ht-play b svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.ht-play b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #1a1208; background: var(--gold-hi); box-shadow: 0 0 40px rgba(236, 211, 154, .45); transition: transform .35s var(--ease); }
.htile.play:hover .ht-play b { transform: scale(1.08); }
/* the postcard tile wears a cream border and a stamp */
.htile.postcard .ht-img { margin: 12px 12px 0; border-radius: 4px; box-shadow: 0 0 0 8px #efe3c6, 0 0 0 9px rgba(0, 0, 0, .25); aspect-ratio: 16 / 9.8; }
.htile.postcard .ht-img::before { content: ''; position: absolute; right: 10px; top: 10px; z-index: 1; width: 34px; height: 42px; background: #efe3c6 radial-gradient(circle at 50% 45%, #b8372a 0 9px, transparent 10px); outline: 2px dotted #efe3c6; outline-offset: 2px; }
.htile.postcard .ht-body { padding-top: 22px; }

.hm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.hm-chips > span { margin-right: 6px; font: 500 10.5px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.hm-chips .chip { text-decoration: none; }

.hm-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.hl-btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: rgba(255, 240, 210, .03); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .14); transition: box-shadow .3s, background .3s; }
.hl-btn:hover { background: rgba(255, 240, 210, .06); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .4); }
.hl-btn > b { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--gold-hi); background: rgba(201, 163, 91, .1); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .3); }
.hl-btn > b svg { width: 26px; height: 26px; }
.hl-btn strong { display: block; font: 500 24px/1.2 var(--display); }
.hl-btn em { display: block; margin-top: 3px; font: italic 400 15px/1.4 var(--body); color: var(--text-2); }
.hl-state { position: relative; width: 44px; height: 24px; border-radius: 99px; background: rgba(255, 240, 210, .12); transition: background .3s; }
.hl-state::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .3s var(--ease), background .3s; }
.hl-btn[aria-pressed='true'] { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 40px -12px rgba(201, 163, 91, .55); }
.hl-btn[aria-pressed='true'] > b { color: #1a1208; background: var(--gold-hi); }
.hl-btn[aria-pressed='true'] .hl-state { background: rgba(201, 163, 91, .5); }
.hl-btn[aria-pressed='true'] .hl-state::after { transform: translateX(20px); background: var(--gold-hi); }

.hm-about { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 90px; margin-bottom: 30px; padding: 40px clamp(22px, 4vw, 48px); border-radius: 18px;
  background: radial-gradient(ellipse at 15% 0%, rgba(240, 190, 90, .16), transparent 55%), rgba(255, 240, 210, .025); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .22); }
.hm-about h2 { margin: 6px 0 8px; font: 500 clamp(28px, 3.4vw, 40px)/1.1 var(--display); color: var(--gold-hi); }
.hm-about p:last-child { margin: 0; max-width: 52ch; color: var(--text-2); font-size: 17px; line-height: 1.55; }

@media (max-width: 900px) {
  .hm-map { grid-template-columns: 1fr 1fr; }
  .hm-map .htile.big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .hm-map { grid-template-columns: 1fr; }
  .htile.big .ht-img { min-height: 200px; }
}
/* even rows: map = big 2×2 + two on the right + beacons and a wide flyover; places 3×3; five encyclopedia doors in one row */
.hm-map .htile.play { grid-column: span 2; }
.hm-map .htile.play .ht-img { aspect-ratio: auto; flex: 1; min-height: 160px; }
.hm-map .htile.play { display: grid; grid-template-columns: 1fr 1fr; }
.hm-map .htile.play .ht-body { justify-content: center; }
.hm-places { grid-template-columns: repeat(3, 1fr); }
.home .cats { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .home .cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .hm-places { grid-template-columns: 1fr 1fr; }
  .hm-map .htile.play { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hm-places, .home .cats { grid-template-columns: 1fr; }
  .hm-map .htile.play { display: flex; }
}