/* Demo demo28 "Index" — locals as a magazine index: warm paper, Instrument Serif + Inter Tight, a numbered contents column beside a Google hybrid map, a person opens as a spread. */
.demo28-page { --map-top: 70px; --paper: #f2eee6; --paper-2: #e8e2d6; --ink: #191714; --muted28: #6e675c; --rule: #191714; background: var(--paper); }
.ix { padding: 0; color: var(--ink); font-family: "Inter Tight", "Lato", sans-serif; }

/* banner: editorial split */
.ix-banner__inner { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 28px; }
.ix-slide { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; padding: 36px 0 30px; border-bottom: 2px solid var(--rule); }
.ix-slide__issue { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(25,23,20,.25); font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.ix-slide__title { margin: 0; font: 400 clamp(64px, 10vw, 150px)/.82 "Instrument Serif", Georgia, serif; letter-spacing: -.035em; }
.ix-slide__title em { display: block; font-size: .36em; letter-spacing: -.01em; margin-top: .25em; color: var(--muted28); }
.ix-slide__lead { margin: 20px 0 0; font: 400 17px/1.5 "Inter Tight", sans-serif; max-width: 46ch; }
.ix-slide__fig { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: clamp(220px, 24vw, 330px); }
.ix-slide__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: sepia(.12) contrast(1.02); }
.ix-slide__fig img:last-child { margin-top: 40px; height: calc(100% - 40px); }
.ix-banner__hide { position: absolute; right: 28px; top: 36px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 13px/1 "Inter Tight", sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ix-banner__hide:hover { color: #b0361f; }

/* stage: index column + map */
.lp-stage.ix-stage { display: grid; grid-template-columns: 380px minmax(0, 1fr); --lm-bg: #2a2d27; }
.ix-index { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-right: 2px solid var(--rule); }
.ix-index__head { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 26px 14px; border-bottom: 1px solid var(--rule); }
.ix-index__kicker { margin: 0; font: 400 40px/1 "Instrument Serif", serif; }
.ix-index__count { margin: 0; font: 500 12.5px/1 "Inter Tight", sans-serif; color: var(--muted28); }
.ix-index__list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 26px; scrollbar-width: thin; }
.ix-entry { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 0; border-bottom: 1px solid rgba(25,23,20,.14); }
.ix-entry__no { flex: none; width: 24px; font: 600 12px/1 "Inter Tight", sans-serif; color: var(--c); }
.ix-entry .lm-spec__name { font: 400 22px/1.1 "Instrument Serif", serif; white-space: nowrap; transition: transform .2s; }
.ix-entry__dots { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(25,23,20,.4); transform: translateY(-4px); }
.ix-entry .lm-spec__count { font: 600 13px/1 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; }
.ix-entry:hover .lm-spec__name { transform: translateX(6px); font-style: italic; }
.ix-entry.is-empty { opacity: .4; }
.ix-entry.is-on .lm-spec__name { font-style: italic; }
.ix-entry.is-on { box-shadow: inset 3px 0 0 var(--c); padding-left: 10px; }
.ix .lm-spec--all { display: flex; align-items: baseline; justify-content: space-between; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ix .lm-spec--all.is-on { color: #b0361f; }
.ix .lm-spec:focus-visible, .ix-link:focus-visible, .lm-provider:focus-visible, .ix-name:focus-visible { outline: 2px solid #b0361f; outline-offset: 2px; }
.ix-index__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 26px 16px; border-top: 1px solid var(--rule); }
.ix-city { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1 "Inter Tight", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ix-city select { height: 34px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; font: 400 18px/1 "Instrument Serif", serif; color: var(--ink); max-width: 190px; letter-spacing: 0; text-transform: none; }
.ix-link { border: 0; background: none; padding: 0; font: 500 13px/1 "Inter Tight", sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; color: var(--ink); }

.ix-mapwrap { position: relative; min-width: 0; }
.ix-providers { position: absolute; z-index: 500; left: 16px; top: 16px; display: flex; background: var(--paper); border: 1.5px solid var(--rule); }
.lm-provider { padding: 9px 12px; font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: .04em; text-transform: uppercase; border-right: 1px solid var(--rule); }
.lm-provider:last-child { border-right: 0; }
.lm-provider:hover { background: var(--paper-2); }
.lm-provider.is-active { background: var(--ink); color: var(--paper); }
.ix-stage .leaflet-control-zoom { border: 1.5px solid var(--rule); border-radius: 0; margin: 16px 16px 0 0; }
.ix-stage .leaflet-control-zoom a { border-radius: 0 !important; background: var(--paper); color: var(--ink); width: 36px; height: 36px; line-height: 36px; border-color: var(--rule); }
.ix-strip { position: absolute; z-index: 500; left: 16px; right: 16px; bottom: 26px; display: flex; gap: 0; overflow-x: auto; background: var(--paper); border: 1.5px solid var(--rule); scrollbar-width: none; }
.ix-strip::-webkit-scrollbar { display: none; }
.ix-name { flex: none; width: auto; gap: 8px; padding: 10px 14px; border-right: 1px solid rgba(25,23,20,.2); }
.ix-name__no { font: 600 11px/1 "Inter Tight", sans-serif; color: var(--c); }
.ix-name .lm-person__name { font: 400 18px/1 "Instrument Serif", serif; }
.ix-name .lm-person__meta { font: 500 11.5px/1 "Inter Tight", sans-serif; color: var(--muted28); }
.ix-name:hover, .ix-name.is-selected { background: var(--ink); color: var(--paper); }
.ix-name:hover .lm-person__meta, .ix-name.is-selected .lm-person__meta { color: rgba(242,238,230,.7); }
.ix-strip .lm-empty { margin: 0; padding: 10px 14px; font: italic 400 17px/1.2 "Instrument Serif", serif; }
.ix-status { position: absolute; z-index: 500; left: 16px; top: 60px; margin: 0; font: 500 12px/1.3 "Inter Tight", sans-serif; background: var(--paper); }
.ix-status:not(:empty) { padding: 6px 8px; border: 1px solid var(--rule); }

/* stamps */
.ix-stamp { position: relative; display: block; width: 100%; height: 100%; background: var(--paper); padding: 3px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.7); transition: transform .2s, opacity .25s, filter .25s; }
.ix-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ix-stamp b { position: absolute; left: -6px; top: -8px; padding: 2px 4px; background: var(--c); color: #fff; font: 700 9.5px/1 "Inter Tight", sans-serif; }
.lm-marker:hover .ix-stamp, .lm-marker.is-hot .ix-stamp { transform: scale(1.25) rotate(-3deg); z-index: 2; }
.lm-marker.is-selected .ix-stamp { transform: scale(1.4); outline: 3px solid var(--c); }
.ix-stamp.is-dim { opacity: .25; filter: grayscale(1); }
.ix-stage .lm-cluster { border-radius: 0; --lm-cluster-bg: var(--paper); }
.ix-stage .lm-cluster b { border-radius: 0; font: 600 13px/1 "Inter Tight", sans-serif; }
.ix-stage.is-hovering .lm-cluster { opacity: .35; }

/* the spread: covers the index column */
.ix-spread { position: absolute; inset: 0; z-index: 3; background: var(--paper); overflow-y: auto; border-right: 2px solid var(--rule); }
.ix-card { min-height: 100%; display: flex; flex-direction: column; }
.ix-card .lm-card__close { position: absolute; z-index: 2; right: 14px; top: 14px; padding: 8px 12px; background: var(--paper); border: 1.5px solid var(--rule); font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ix-card .lm-card__close:hover { background: var(--ink); color: var(--paper); }
.ix-card__fig { margin: 0; position: relative; }
.ix-card .lm-card__img { width: 100%; height: 380px; object-position: center 18%; }
.ix-card__fig figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--c); color: #fff; font: 600 11.5px/1 "Inter Tight", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ix-card__text { padding: 18px 26px 26px; }
.ix-card .lm-card__place { margin: 0; font: 600 11.5px/1 "Inter Tight", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted28); }
.ix-card .lm-card__name { margin: 10px 0 0; font: 400 52px/.92 "Instrument Serif", serif; letter-spacing: -.02em; }
.ix-card .lm-card__bio { margin: 14px 0 0; font: italic 400 21px/1.3 "Instrument Serif", serif; }
.ix-card .lm-card__facts { margin: 18px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.ix-card .lm-card__facts dt { font: 600 10.5px/1 "Inter Tight", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted28); margin-bottom: 6px; }
.ix-card .lm-card__facts dd { font: 400 20px/1.1 "Instrument Serif", serif; }
.ix-card .lm-card__open { margin: 14px 0 0; font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #2f7d4f; }
.ix-card .lm-card__actions { margin: 18px 0 0; }
.ix-card .lm-card__btn { flex: 1; height: 44px; border: 1.5px solid var(--rule); color: var(--ink); font: 600 13px/1 "Inter Tight", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.ix-card .lm-card__btn--primary { background: var(--ink); color: var(--paper); }
.ix-card .lm-card__btn:hover { background: #b0361f; border-color: #b0361f; color: #fff; }

@media (max-width: 900px) {
  .ix-slide { grid-template-columns: 1fr; gap: 18px; padding: 24px 0 20px; }
  .ix-slide__fig { height: 200px; }
  .ix-banner__inner { padding: 0 16px; }
  .ix-banner__hide { right: 16px; top: 24px; }
  .lp-stage.ix-stage { display: flex; flex-direction: column-reverse; height: auto; min-height: 0; }
  .ix-mapwrap { height: 64vh; min-height: 420px; }
  .ix-providers { left: 10px; top: 10px; max-width: calc(100% - 70px); overflow-x: auto; scrollbar-width: none; }
  .lm-provider { white-space: nowrap; padding: 8px 9px; font-size: 11px; }
  .ix-stage .leaflet-control-zoom { margin: 10px 10px 0 0; }
  .ix-index { border-right: 0; border-top: 2px solid var(--rule); }
  .ix-index__list { max-height: none; overflow: visible; }
  .ix-spread { position: fixed; inset: auto 0 0 0; max-height: 86vh; z-index: 1000; border-right: 0; border-top: 2px solid var(--rule); box-shadow: 0 -20px 40px rgba(0,0,0,.3); }
  .ix-card .lm-card__img { height: 260px; }
  .ix-card .lm-card__name { font-size: 40px; }
}