/* Map-art teaser: artwork, palette and concept note each retain their own space. */
.mapart-preview {
  --mapart-glass: rgba(241, 250, 244, .82);
  --mapart-glass-border: rgba(255, 255, 255, .82);
  --mapart-glass-ink: #214539;
  --mapart-glass-muted: #3d6153;
  --mapart-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 4px 16px rgba(19, 52, 39, .12);
  --mapart-visual-surface: rgba(224, 242, 231, .58);
  --mapart-swatch-border: rgba(32, 65, 51, .27);
  --mapart-led: #438262;
  --mapart-led-glow: rgba(67, 130, 98, .26);
  --mapart-inset: 16px;
  padding-top: clamp(30px, 5.6vw, 76px);
}
.mapart-card.glass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(310px, .87fr);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: clamp(24px, 3vw, 36px);
  background: linear-gradient(140deg, rgba(246, 253, 246, .38), rgba(211, 233, 228, .23) 56%, rgba(240, 250, 245, .43));
  -webkit-backdrop-filter: blur(25px) saturate(1.2);
  backdrop-filter: blur(25px) saturate(1.2);
  box-shadow: 0 27px 70px -39px rgba(21, 55, 45, .54), inset 0 1px 0 rgba(255, 255, 255, .68);
  color: var(--ink);
}
.mapart-card.glass::after {
  content: ""; position: absolute; z-index: 5; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 1px 0 0 rgba(255, 255, 255, .18);
  pointer-events: none;
}
.mapart-card .mapart-visual {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden; min-width: 0; min-height: 405px; margin: 0;
  background: var(--mapart-visual-surface); isolation: isolate;
}
.mapart-card .mapart-visual img {
  position: relative; grid-area: 1 / 1 / 2 / 2; display: block;
  width: 100%; height: 100%; min-width: 0; min-height: 280px;
  object-fit: cover; object-position: center;
  transition: transform 1s cubic-bezier(.2,.76,.2,1), filter .8s ease;
}
.mapart-visual-tone {
  position: absolute; grid-area: 1 / 1 / 2 / 2; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,22,25,.18), transparent 33%, transparent 76%, rgba(9,23,27,.12));
}
.mapart-visual-grid {
  position: absolute; grid-area: 1 / 1 / 2 / 2; z-index: 2; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(222,247,255,.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222,247,255,.32) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .23; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(120deg, transparent 15%, #000 85%);
  mask-image: linear-gradient(120deg, transparent 15%, #000 85%);
  animation: mapart-grid-breathe 5.5s ease-in-out infinite;
}
.mapart-visual-scan {
  position: absolute; grid-area: 1 / 1 / 2 / 2; z-index: 3; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(166,223,255,.02) 35%, rgba(160,223,255,.52) 49%, transparent 54%);
  background-size: 100% 320%; background-position: 0 0; mix-blend-mode: screen; opacity: .57;
  animation: mapart-sweep 8s linear infinite;
}
.mapart-visual-hud {
  position: absolute; grid-area: 1 / 1 / 2 / 2; z-index: 4;
  top: var(--mapart-inset); left: var(--mapart-inset); right: var(--mapart-inset);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; pointer-events: none;
}
.mapart-hud-pill {
  display: inline-flex; gap: 7px; align-items: center; min-width: 0; max-width: 100%;
  padding: 8px 12px; border: 1px solid var(--mapart-glass-border); border-radius: 999px;
  background: var(--mapart-glass); color: var(--mapart-glass-ink); box-shadow: var(--mapart-glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  font-size: 11px; font-weight: 650; line-height: 1.45; letter-spacing: .01em;
  white-space: normal; overflow-wrap: anywhere;
}
.mapart-hud-pill svg { flex: none; width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.mapart-hud-pill-muted { color: var(--mapart-glass-muted); font-weight: 500; }
.mapart-hud-led { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mapart-led); box-shadow: 0 0 10px var(--mapart-led-glow); }
.mapart-palette {
  position: relative; grid-area: 2 / 1; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; min-width: 0; margin: 12px var(--mapart-inset) 0;
  padding: 10px 12px; border: 1px solid var(--mapart-glass-border); border-radius: 13px;
  background: var(--mapart-glass); color: var(--mapart-glass-ink); box-shadow: var(--mapart-glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.mapart-palette-caption { min-width: 0; font-size: 11px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.mapart-palette-swatches {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px;
  flex: 1 1 176px; min-width: 0; max-width: 304px;
}
.mapart-palette-swatches i {
  display: block; min-width: 0; width: 100%; height: 17px; border-radius: 3px;
  border: 1px solid var(--mapart-swatch-border); background: var(--mapart-color); transform-origin: center bottom;
  animation: mapart-chip-glow 6s ease-in-out infinite; animation-delay: calc(var(--mapart-order) * 110ms);
}
.mapart-card .mapart-visual figcaption {
  position: relative; grid-area: 3 / 1; z-index: 4; inset: auto; min-width: 0;
  margin: 8px var(--mapart-inset) 14px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--mapart-glass-muted); font-size: 10px; line-height: 1.5;
  text-align: right; overflow-wrap: anywhere;
}
.mapart-copy {
  min-width: 0; display: flex; flex-direction: column; justify-content: center;
  align-self: stretch; gap: 0; padding: clamp(24px, 3.1vw, 48px);
  background: linear-gradient(130deg, rgba(249,255,251,.45), rgba(231,247,244,.22));
  -webkit-backdrop-filter: blur(19px) saturate(1.14); backdrop-filter: blur(19px) saturate(1.14);
}
.mapart-kicker {
  display: flex; align-items: center; gap: 9px; margin: 0;
  color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em;
}
.mapart-kicker-led { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #558a67; box-shadow: 0 0 0 4px rgba(85,138,103,.13); }
.mapart-kicker-separator { opacity: .35; }
.mapart-copy h2 {
  margin: 14px 0 10px; font-size: clamp(30px, 3.3vw, 50px); font-weight: 750;
  letter-spacing: -.06em; line-height: 1.15; text-wrap: balance;
}
.mapart-copy .mapart-summary {
  margin: 0; max-width: 42ch; font-size: clamp(13px, 1.16vw, 15px);
  line-height: 1.85; color: var(--muted);
}
.mapart-flow {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px; margin: 24px 0 0; padding: 0; list-style: none;
}
.mapart-flow li {
  display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 12px;
  border: 1px solid rgba(70,111,96,.18); border-radius: 15px;
  background: rgba(255,255,255,.19);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.31);
  transition: border-color .25s, background .25s, transform .32s cubic-bezier(.2,.8,.2,1);
}
.mapart-flow-number {
  display: grid; place-items: center; flex: none; width: 27px; height: 27px;
  border-radius: 9px; background: rgba(83,125,99,.13); color: #47745a;
  font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.mapart-flow b { display: block; font-size: 13px; font-weight: 680; }
.mapart-flow small { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.55; }
.mapart-status-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 13px;
  margin-top: 21px; padding-top: 17px; border-top: 1px solid rgba(80,113,98,.21);
}
.mapart-status {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 11px; border: 1px solid rgba(81,131,103,.23); border-radius: 999px;
  background: rgba(102,153,115,.13); color: #315f46;
  font-size: 11px; font-weight: 750;
}
.mapart-status svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mapart-status-note { color: var(--muted); font-size: 10.5px; line-height: 1.55; }
:root[data-theme="dark"] .mapart-preview {
  --mapart-glass: rgba(28, 53, 45, .82);
  --mapart-glass-border: rgba(221, 246, 231, .25);
  --mapart-glass-ink: #e1f4e8;
  --mapart-glass-muted: #bdd7c9;
  --mapart-glass-shadow: inset 0 1px 0 rgba(228, 249, 236, .13), 0 4px 16px rgba(0, 14, 8, .17);
  --mapart-visual-surface: rgba(16, 37, 30, .66);
  --mapart-swatch-border: rgba(236, 250, 241, .36);
  --mapart-led: #a4e6c5;
  --mapart-led-glow: rgba(149, 223, 183, .45);
}
:root[data-theme="dark"] .mapart-card.glass {
  border-color: rgba(224,244,234,.26);
  background: linear-gradient(145deg, rgba(36,53,51,.58), rgba(16,36,35,.48));
  box-shadow: 0 27px 70px -39px rgba(0,0,0,.83), inset 0 1px 0 rgba(240,252,245,.16);
}
:root[data-theme="dark"] .mapart-copy { background: linear-gradient(135deg, rgba(19,39,37,.66), rgba(15,30,30,.48)); }
:root[data-theme="dark"] .mapart-flow li { border-color: rgba(212,236,217,.16); background: rgba(215,242,224,.045); box-shadow: inset 0 1px 0 rgba(215,242,224,.07); }
:root[data-theme="dark"] .mapart-flow-number { background: rgba(168,223,187,.12); color: #c5e7d0; }
:root[data-theme="dark"] .mapart-status { border-color: rgba(170,224,187,.2); background: rgba(162,224,181,.085); color: #bce4c6; }
:root[data-theme="dark"] .mapart-status-row { border-color: rgba(217,243,226,.17); }
@media (hover:hover) and (pointer:fine) {
  .mapart-card:hover .mapart-visual img { transform: scale(1.03); filter: saturate(1.07); }
  .mapart-flow li:hover { transform: translateY(-2px); border-color: rgba(83,134,107,.36); background: rgba(255,255,255,.30); }
}
@keyframes mapart-sweep { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes mapart-grid-breathe { 0%,100% {opacity:.13} 50% {opacity:.32} }
@keyframes mapart-chip-glow { 0%,20%,100% { filter:brightness(1); transform:translateY(0) } 10% { filter:brightness(1.35); transform:translateY(-3px) } }
.mapart-visual-grid, .mapart-visual-scan, .mapart-palette-swatches i { animation-play-state: paused; }
.mapart-preview[data-mapart-motion="running"] :is(.mapart-visual-grid, .mapart-visual-scan, .mapart-palette-swatches i) { animation-play-state: running; }
@media(max-width:960px) {
  .mapart-card.glass { grid-template-columns: minmax(0,1fr) minmax(290px,.95fr); }
  .mapart-flow { gap:7px; }
  .mapart-flow li { padding:10px; gap:7px; }
}
@media(max-width:850px) {
  .mapart-card.glass { grid-template-columns: minmax(0,1fr); border-radius:24px; }
  .mapart-card .mapart-visual { min-height:0; grid-template-rows:auto auto auto; }
  .mapart-card .mapart-visual img { height:auto; min-height:0; aspect-ratio:16/9; }
  .mapart-copy { padding:clamp(20px,4.5vw,32px); }
  .mapart-visual-hud { left:max(var(--mapart-inset),env(safe-area-inset-left,0px)); right:max(var(--mapart-inset),env(safe-area-inset-right,0px)); }
  .mapart-palette, .mapart-card .mapart-visual figcaption {
    margin-left:max(var(--mapart-inset),env(safe-area-inset-left,0px));
    margin-right:max(var(--mapart-inset),env(safe-area-inset-right,0px));
  }
}
@media(max-width:420px) {
  .mapart-preview { --mapart-inset:12px; }
  .mapart-visual-hud { gap:6px; }
  .mapart-hud-pill { padding:6px 9px; font-size:10px; }
  .mapart-hud-pill svg { width:12px; height:12px; }
  .mapart-palette { padding:9px 10px; gap:8px 10px; }
  .mapart-palette-swatches { gap:2px; }
  .mapart-palette-swatches i { height:16px; }
  .mapart-copy { padding:20px 18px 21px; }
  .mapart-copy h2 { margin:10px 0; font-size:clamp(29px,8vw,36px); }
  .mapart-copy .mapart-summary { font-size:12.5px; }
  .mapart-flow { margin-top:17px; }
  .mapart-flow li { flex-direction:column; gap:6px; padding:10px; }
  .mapart-flow small { font-size:10px; }
  .mapart-status-row { margin-top:16px; padding-top:14px; }
}
@media(max-width:350px) {
  .mapart-flow b { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapart-visual-grid, .mapart-visual-scan, .mapart-palette-swatches i { animation:none!important; }
  .mapart-visual-scan { display:none; }
  .mapart-card .mapart-visual img, .mapart-flow li { transition:none!important; }
  .mapart-card:hover .mapart-visual img { transform:none; filter:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .mapart-preview { --mapart-glass:#edf5ee; --mapart-visual-surface:#e1eee4; }
  :root[data-theme="dark"] .mapart-preview { --mapart-glass:#233c31; --mapart-visual-surface:#1a2b25; }
  .mapart-card.glass { background:#e9f0eb; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mapart-copy { background:#f4f7f2; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mapart-hud-pill, .mapart-palette { -webkit-backdrop-filter:none; backdrop-filter:none; }
  :root[data-theme="dark"] .mapart-card.glass { background:#1a2b28; }
  :root[data-theme="dark"] .mapart-copy { background:#21332e; }
}
@media (forced-colors:active) {
  .mapart-card.glass, .mapart-flow li, .mapart-status,
  .mapart-hud-pill, .mapart-palette, .mapart-card .mapart-visual figcaption {
    background:Canvas; color:CanvasText; border-color:ButtonText; box-shadow:none;
  }
  .mapart-visual-grid,.mapart-visual-scan { display:none; }
}