@font-face {
  font-family:Recoleta;
  src:url('assets/fonts/recoleta_semibold-webfont.woff2') format('woff2');
  font-weight:700;
  font-display:swap}

:root {
  --paper:#f8f7f3;
  --ink:#252d29;
  --muted:#657069;
  --line:#dddfd7;
  --accent:#35654b;
  --tint:#e9eee5}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
a {
  color:inherit;
  text-decoration:none}
button,input,select {
  font:inherit;
  color:inherit}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent}
button,select,summary {
  cursor:pointer}
button {
  background:transparent;
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px 16px;
  min-height:44px}
button:hover:not(:disabled) {
  background:var(--tint)}
button:disabled {
  opacity:.4;
  cursor:default}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px}
a:hover {
  color:var(--accent)}
.shell {
  width:min(1120px,calc(100% - 96px));
  margin:auto}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:35px 0;
  border-bottom:1px solid var(--line)}
.brand {
  font-family:Buenard,Georgia,serif;
  font-size:25px;
  white-space:nowrap}
.brand-dot {
  color:var(--accent)}
nav {
  display:flex;
  gap:32px}
nav a {
  padding:8px 0;
  color:var(--muted);
  font-size:14px}
nav a[aria-current] {
  color:var(--ink);
  box-shadow:0 2px var(--accent)}
main {
  min-height:65vh}
.intro {
  padding:24px 0 16px;
  max-width:760px}
.eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--accent);
  margin:0 0 18px}
h1,h2 {
  font-family:Buenard,Georgia,serif;
  font-weight:600;
  line-height:1.12}
h1 {
  font-size:30px;
  letter-spacing:-.025em;
  line-height:1.15;
  margin:0}
.lede {
  color:var(--muted);
  font-size:17px;
  max-width:610px;
  margin:0}
.city-picker {
  display:flex;
  border:0;
  border-bottom:1px solid var(--line);
  padding:0;
  gap:26px;
  margin:0 0 26px}
.city-picker button {
  border:0;
  border-radius:0;
  padding:12px 0;
  color:var(--muted)}
.city-picker button[aria-pressed=true] {
  box-shadow:0 2px var(--accent);
  color:var(--accent);
  font-weight:600}
.toolbar {
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:center}
.search-label {
  border:1px solid var(--line);
  background:#fffefa;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  flex:1;
  max-width:540px}
.search-label>span[aria-hidden] {
  font-size:26px;
  color:var(--muted)}
input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  padding:12px 0;
  outline-offset:2px!important}
input::placeholder {
  color:var(--muted);
  font-size:14px}
.sort-label {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap}
select {
  max-width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  padding:11px 28px 11px 12px;
  font-size:13px}
.collection-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:22px 0 10px}
.collection-meta p {
  color:var(--muted);
  font-size:12px}
.filter-button {
  border-radius:30px;
  font-size:12px;
  padding:5px 14px;
  min-height:36px}
.filter-button[aria-pressed=true] {
  background:var(--accent);
  border-color:var(--accent);
  color:white}
.entry {
  border-top:1px solid var(--line);
  padding:12px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px 100px 64px;
  gap:14px;
  align-items:center}
.entry-title {
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  overflow-wrap:anywhere}
.entry-title a:hover {
  text-decoration:underline;
  text-underline-offset:4px}
.entry-subtitle {
  font-size:13px;
  color:var(--muted);
  margin:2px 0 0;
  overflow-wrap:anywhere}
.entry-meta {
  font-size:13px;
  color:var(--muted)}
.entry-meta span {
  display:block}
.meta-label {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px}
.score {
  justify-self:end;
  display:flex;
  align-items:baseline;
  gap:2px;
  color:var(--accent);
  font-size:23px;
  font-weight:600;
  font-variant-numeric:tabular-nums}
.score small {
  font-size:10px;
  font-weight:400;
  color:var(--muted)}
details {
  grid-column:1/-1;
  margin-top:2px;
  font-size:13px;
  color:var(--muted)}
summary {
  width:fit-content;
  min-height:28px;
  padding:2px 0;
  color:var(--accent)}
details p {
  max-width:700px;
  margin:10px 0}
details a {
  text-decoration:underline;
  text-underline-offset:3px}
.pagination {
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px}
.pagination span {
  font-size:12px;
  color:var(--muted)}
.pagination button {
  font-size:13px}
.empty {
  padding:55px 16px;
  text-align:center;
  border-top:1px solid var(--line);
  color:var(--muted)}
.empty h2 {
  color:var(--ink)}
footer {
  margin-top:80px;
  padding:26px 0 32px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted)}
footer div {
  display:flex;
  gap:22px}
.home-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:48px 0;
  gap:16px}
.home-intro h1 {
  font-size:clamp(40px,5.2vw,66px)}
h1 em {
  font-style:normal;
  color:var(--accent)}
.home-intro .lede {
  font-size:16px}
.portrait {
  width:100%;
  max-width:420px;
  mix-blend-mode:multiply}
.text-link {
  display:inline-block;
  color:var(--accent);
  margin-top:28px;
  border-bottom:1px solid var(--accent);
  font-size:14px}
.explore {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px}
.explore>a {
  border-top:1px solid var(--line);
  padding:24px 0}
.explore h2 {
  font-size:24px;
  display:flex;
  justify-content:space-between;
  gap:12px}
.explore h2 span {
  font-family:sans-serif;
  font-weight:400;
  color:var(--accent)}
.explore p {
  font-size:13px;
  color:var(--muted)}
.music-embeds {
  display:grid;
  gap:24px}
.music-embeds iframe {
  width:100%;
  display:block;
  border:0;
  border-radius:12px}
#cesiumContainer {
  width:100%;
  height:60vh;
  min-height:320px;
  border-radius:12px;
  overflow:hidden}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  background:var(--paper);
  padding:10px;
  z-index:10}
.skip-link:focus {
  top:10px}

@media(max-width:760px) {
  .shell {
  width:calc(100% - 40px)}
.site-header {
  padding:24px 0;
  align-items:flex-start;
  flex-direction:column;
  gap:12px}
nav {
  width:100%;
  justify-content:space-between;
  gap:16px}
nav a {
  font-size:14px}
.intro {
  padding:28px 0 18px}
.lede {
  font-size:16px}
.toolbar {
  align-items:stretch;
  flex-direction:column;
  gap:14px}
.search-label {
  max-width:none}
.sort-label {
  justify-content:space-between}
.sort-label select {
  flex:1;
  max-width:220px}
.entry {
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 12px;
  padding:12px 0}
.entry-main {
  grid-column:1;
  grid-row:1}
.score {
  grid-column:2;
  grid-row:1}
.entry-meta {
  grid-row:2;
  font-size:12px}
.entry-meta:nth-of-type(3) {
  text-align:right}
.meta-label {
  font-size:9px}
details {
  grid-column:1/-1;
  margin-top:0}
.home-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:48px 0;
  gap:16px}
.portrait {
  max-width:300px;
  justify-self:center}
.explore {
  grid-template-columns:1fr;
  gap:0}
.explore>a {
  padding:22px 0}
.explore h2 {
  margin:10px 0}
.explore p {
  margin-bottom:0}
footer {
  margin-top:50px;
  flex-direction:column;
  gap:12px}
.pagination button {
  padding:8px 10px}
.pagination span {
  font-size:11px}
}

@media(prefers-reduced-motion:no-preference) {
  a,button {
  transition:color .15s,background .15s}
}


.maps-link { display:inline-block; color:var(--accent); font-size:12px; padding:4px 0; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px) {
  .entry-meta .meta-label {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
  }
  .entry-meta { align-self:start; }
  .entry-meta .maps-link { padding:2px 0; }
}

/* Keep the navigation and home caption in the same serif as the name. */
.site-header nav a,
.home-intro > p {
  font-family:Buenard,Georgia,serif;
  font-weight:600;
  font-size:18px;
}
.home-intro > p {
  margin:0;
}
.home-page main {
  min-height:0;
}
.home-page .home-intro {
  padding-bottom:24px;
}
.home-page footer {
  margin-top:16px;
}

/* Compact collection controls and progressive loading. */
.collection-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0 16px;
}
.collection-heading h1 { font-size:30px; }
.collection-heading .city-picker { margin:0; border:0; gap:24px; }
.collection-heading .city-picker button { padding:8px 4px; }
.load-more-controls {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 0;
}
.load-more-controls span { font-size:12px; color:var(--muted); }
.load-more-controls button { min-width:140px; }
[hidden] { display:none !important; }
@media(max-width:760px) {
  .collection .toolbar {
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    gap:8px;
  }
  .collection .search-label { gap:6px; padding:0 10px; }
  .collection .sort-label { min-width:0; }
  .collection select { width:100%; padding:10px 4px; min-height:44px; font-size:12px; }
  .collection input { padding:10px 0; min-height:44px; font-size:14px; }
  .collection .collection-meta { margin:8px 0 4px; }
  .collection .entry { padding:8px 0; gap:2px 10px; }
  .collection .entry-title { font-size:15px; line-height:1.35; }
  .collection .entry-subtitle { font-size:12px; line-height:1.4; margin-top:1px; }
  .collection .entry-meta { font-size:11px; }
  .collection .score { font-size:21px; }
}

/* Slim Watch toolbar with a page-styled sort menu. */
.collection .search-label { height:34px; }
.collection .search-label > span[aria-hidden] { font-size:20px; line-height:1; }
.collection input { min-height:0; height:32px; padding:4px 0; line-height:24px; }
.sort-menu { position:relative; }
.sort-trigger {
  width:100%; min-height:34px; height:34px; padding:4px 10px;
  font-size:12px; text-align:left; white-space:nowrap;
}
.sort-options {
  position:absolute; z-index:5; top:calc(100% + 6px); right:0;
  width:168px; padding:5px; background:var(--paper);
  border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px #252d2914;
}
.sort-option {
  display:block; width:100%; min-height:36px; padding:7px 10px;
  border:0; border-radius:4px; font-size:13px; text-align:left;
}
.sort-option[aria-checked="true"] { color:var(--accent); background:var(--tint); }
.sort-option[aria-checked="true"]::after { content:'✓'; float:right; }
.sort-option:focus-visible { outline-offset:-2px; }

.music-embeds iframe { background:#fff; }
.embed-fallback { margin: -18px 0 0; font-size:13px; }
.embed-fallback a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* Keep Eat rows compact and align city switching with the page title. */
.collection[data-kind="food"] .entry { padding:6px 0; gap:6px 12px; }
.collection[data-kind="food"] .entry-subtitle { margin-top:1px; }
.collection[data-kind="food"] details { margin-top:0; }
.collection[data-kind="food"] .entry-meta { font-size:12px; }
.collection[data-kind="food"] .meta-value { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; }
.collection[data-kind="food"] .maps-link { margin:0; padding:0; white-space:nowrap; font-size:11px; }
@media(max-width:760px) {
  .collection-heading { padding:18px 0 12px; }
  .collection-heading h1 { font-size:28px; margin:0; }
  .collection-heading .city-picker { gap:14px; }
  .collection-heading .city-picker button { min-height:36px; padding:6px 2px; font-size:14px; }
  .collection[data-kind="food"] .entry { padding:6px 0; gap:4px 10px; }
  .collection[data-kind="food"] .entry-title { font-size:15px; }
  .collection[data-kind="food"] .entry-subtitle { font-size:12px; }
  .collection[data-kind="food"] .entry-meta { font-size:11px; }
  .collection[data-kind="food"] .score { font-size:21px; }
  .collection[data-kind="food"] .load-more-controls { padding:10px 0; }
}
@media(max-width:760px) {
  .collection .sort-trigger {
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:5px;
  }
  .collection .search-label input { font-size:16px; }
}

/* Keep all page headings aligned and avoid mobile page overflow. */
html { overflow-x:clip; }
.intro h1, .collection-heading h1 { font-size:30px; }
.intro { padding-top:24px; }
.collection-heading { padding-top:24px; }
.infinite-scroll-status { min-height:20px; color:var(--muted); font-size:12px; text-align:center; }
.load-sentinel { height:1px; }
.load-sentinel[hidden] { display:none; }
@media(max-width:760px) {
  .intro h1, .collection-heading h1 { font-size:28px; }
  .intro, .collection-heading { padding-top:18px; }
  .collection .search-label input { font-size:16px; }
}