@layer blocks, exceptions;

@layer blocks {
  .sal-map-page {
    padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
  }

  .sal-map-page .section-head {
    margin-block-end: var(--space-m, 1.5rem);
  }

  .sal-map-page .section-head p:not(.eyebrow) {
    max-inline-size: 62ch;
  }

  .sal-map-instructions {
    margin-block: 0 var(--space-m, 1.5rem);
    font-size: var(--t-s, 0.8125rem);
    text-align: center;
    color: var(--paper-faint, #97918a);
  }

  .salamanca-map__filters {
    max-inline-size: none;
    margin-block-end: var(--space-m, 1.5rem);
  }

  .salamanca-map__filters .topic-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
  }

  .salamanca-map__filters .topic-pill[aria-pressed="true"] {
    background: var(--gold-wash, rgba(195,155,78,.08));
    color: var(--gold-bright, #e0bf7d);
    border-color: var(--gold, #c39b4e);
    box-shadow: inset 0 0 0 1px var(--hairline-gold, #756039);
  }

  .sal-map-filter-symbol {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: 0 0 1.5rem;
    pointer-events: none;
  }

  .sal-map-view-switch {
    display: none;
    justify-content: center;
    gap: .35rem;
    margin-block-end: 1rem;
  }

  .sal-map-view-switch[hidden] { display: none; }

  .sal-map-view-switch button {
    min-block-size: var(--target-size, 2.75rem);
    min-inline-size: 7rem;
    padding: .55rem 1.25rem;
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: var(--radius, .1875rem);
    background: var(--ink-raised, #1c1c21);
    color: var(--paper-dim, #bdb8ad);
    font: inherit;
    font-size: var(--t-s, .8125rem);
    cursor: pointer;
  }

  .sal-map-view-switch button[aria-pressed="true"] {
    background: var(--gold-wash, rgba(195,155,78,.08));
    border-color: var(--gold, #c39b4e);
    color: var(--gold-bright, #e0bf7d);
  }

  .sal-map-view-switch button:focus-visible {
    outline: 2px solid var(--paper, #f2efe9);
    outline-offset: 3px;
  }

  .sal-map-explorer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1rem;
    align-items: stretch;
    max-inline-size: var(--max-width, 73.75rem);
    margin-inline: auto;
  }

  .sal-map-shell {
    min-inline-size: 0;
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--max-width, 73.75rem);
    margin-inline: auto;
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: var(--radius, 0.1875rem);
    overflow: hidden;
    background: var(--ink-deep, #08080a);
    box-shadow: 0 1.25rem 3rem -2rem rgba(0, 0, 0, 0.85);
  }

  .sal-map-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 54% 40%, var(--gold-wash, rgba(195,155,78,.08)), transparent 42%);
    z-index: 1;
  }

  .sal-map {
    display: block;
    position: relative;
    z-index: 0;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    background: transparent;
  }

  .sal-map__ocean {
    fill: var(--ink-deep, #08080a);
  }

  .sal-map__graticule line {
    stroke: oklch(100% 0 0 / 0.045);
    stroke-width: .65;
    vector-effect: non-scaling-stroke;
  }

  .sal-map__country {
    fill: oklch(27% 0.012 80);
    stroke: oklch(78% 0.015 85 / 0.16);
    stroke-width: .65;
    vector-effect: non-scaling-stroke;
  }

  .sal-map__country.has-cities {
    fill: oklch(33% 0.045 82);
    stroke: var(--gold, #c39b4e);
    stroke-opacity: .7;
    stroke-width: 1;
  }

  .sal-map__inset-bg {
    fill: color-mix(in oklch, var(--ink-deep) 94%, var(--gold) 6%);
    stroke: var(--hairline-gold, #756039);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
  }

  .sal-map__inset-header {
    fill: color-mix(in oklch, var(--ink-deep) 90%, var(--gold) 10%);
    stroke: var(--hairline-gold, #756039);
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
  }

  .sal-map__inset-frame {
    fill: none;
    stroke: var(--hairline-gold, #756039);
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }

  .sal-map__locator {
    fill: none;
    stroke: var(--gold, #c39b4e);
    stroke-opacity: .45;
    pointer-events: none;
  }

  .sal-map__locator :is(rect, path) {
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
  }

  .sal-map__locator path {
    stroke-dasharray: 4 5;
  }

  .sal-map__inset-label,
  .sal-map__region-label {
    font-family: var(--serif, Georgia, serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--paper-faint, #97918a);
    pointer-events: none;
  }

  .sal-map__region-label {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .28em;
    opacity: .4;
  }

  .sal-map__city-label-set {
    visibility: hidden;
    pointer-events: none;
  }

  .sal-map__marker-set[data-label-permanent="true"] .sal-map__city-label-set,
  .sal-map__marker-set.is-active .sal-map__city-label-set,
  .sal-map__marker-set:hover .sal-map__city-label-set,
  .sal-map__marker-set:focus .sal-map__city-label-set {
    visibility: visible;
  }

  .sal-map__city-label {
    font-family: var(--serif, Georgia, serif);
    font-size: 16px;
    font-weight: 500;
    fill: var(--paper-dim, #bdb8ad);
    stroke: var(--ink-deep, #08080a);
    stroke-width: 3.5;
    stroke-linejoin: round;
    paint-order: stroke fill;
  }

  .sal-map__marker-set[data-group="core"] .sal-map__city-label {
    font-size: 18px;
    font-weight: 700;
    fill: var(--gold-bright, #e0bf7d);
  }

  .sal-map__label-leader {
    fill: none;
    stroke: var(--paper-faint, #97918a);
    stroke-opacity: .6;
    stroke-width: .65;
    vector-effect: non-scaling-stroke;
  }

  .sal-map__core-ring {
    fill: none;
    stroke: var(--gold-bright, #e0bf7d);
    stroke-width: .85;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }

  .sal-map__core-ring--outer {
    stroke-opacity: .4;
    stroke-width: .65;
  }

  .sal-map__marker-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
  }

  .sal-map__marker {
    fill: var(--gold, #c39b4e);
    stroke: var(--ink-deep, #08080a);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    transition: r var(--speed, 180ms) var(--ease, ease), fill var(--speed, 180ms) var(--ease, ease), opacity var(--speed, 180ms) var(--ease, ease);
  }

  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="core"] .sal-map__marker {
    fill: var(--gold-bright, #e0bf7d);
  }

  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="major"] .sal-map__marker {
    fill: var(--gold, #c39b4e);
  }

  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="secondary"] .sal-map__marker {
    fill: var(--gold-deep, #6f5a20);
    stroke: var(--gold-bright, #e0bf7d);
  }

  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="biographical"] .sal-map__marker {
    fill: var(--paper-faint, #97918a);
  }

  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="precursor"] .sal-map__marker,
  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="reception"] .sal-map__marker {
    fill: var(--ink-deep, #08080a);
    stroke: var(--gold, #c39b4e);
  }

  :is(.sal-map__marker-set, .sal-map-filter-symbol)[data-group="reception"] .sal-map__marker {
    stroke: var(--paper-dim, #bdb8ad);
  }

  .sal-map__marker-set.is-active .sal-map__marker,
  .sal-map__marker-set:focus-visible .sal-map__marker {
    fill: var(--gold-bright, #e0bf7d);
    stroke: var(--paper, #f2efe9);
  }

  .sal-map__marker-set.is-active .sal-map__marker {
    r: 8;
  }

  .sal-map__marker-set[hidden] {
    display: none;
  }

  .sal-map__marker-set:focus-visible {
    outline: none;
  }

  .sal-map__tooltip {
    box-sizing: border-box;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 20;
    min-inline-size: 0;
    min-block-size: 0;
    border: 1px solid var(--hairline-gold, #756039);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-veil, rgba(13,13,16,.94));
    text-align: start;
  }

  .sal-map__tooltip-body {
    position: absolute;
    inset: 0;
    padding: 1.25rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .sal-map__tooltip[data-empty="true"] {
    border-color: var(--hairline-strong, #36363a);
  }

  .sal-map__tooltip[data-pinned="true"] {
    border-color: var(--gold, #c39b4e);
  }

  .sal-map__tooltip-state {
    margin-block: 1rem 0;
    font-size: var(--t-xs, .75rem);
    line-height: 1.55;
    color: var(--gold, #c39b4e);
  }

  .sal-map__tooltip-kicker {
    padding-inline-end: 1.75rem;
    margin-block-end: .25rem;
    font-size: var(--t-2xs, .6875rem);
    font-weight: var(--w-semibold, 600);
    letter-spacing: var(--tracking-caps, .12em);
    text-transform: uppercase;
    color: var(--gold, #c39b4e);
  }

  .sal-map__tooltip h2 {
    margin: 0;
    font-size: var(--t-l, 1.125rem);
    color: var(--paper, #f2efe9);
  }

  .sal-map__former-name {
    margin-block-start: .2rem;
    font-size: var(--t-xs, .75rem);
    font-style: italic;
    color: var(--paper-faint, #97918a);
  }

  .sal-map__tooltip-description {
    margin-block-start: .65rem;
    font-size: var(--t-s, .8125rem);
    line-height: 1.6;
    color: var(--paper-dim, #bdb8ad);
  }

  .sal-map__tooltip-associations {
    margin-block-start: .75rem;
    padding-block-start: .65rem;
    border-block-start: 1px solid var(--hairline, #29292d);
    font-size: var(--t-xs, .75rem);
    line-height: 1.55;
    color: var(--paper-faint, #97918a);
  }

  .sal-map__tooltip-associations strong {
    color: var(--paper-dim, #bdb8ad);
  }

  .sal-map__tooltip-close {
    position: absolute;
    inset-block-start: .55rem;
    inset-inline-end: .55rem;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    background: transparent;
    color: var(--paper-dim, #bdb8ad);
    cursor: pointer;
  }

  .sal-map-note {
    max-inline-size: var(--measure, 70ch);
    margin: var(--space-s, 1rem) auto 0;
    font-size: var(--t-2xs, .6875rem);
    line-height: 1.6;
    text-align: center;
    color: var(--paper-faint, #97918a);
  }

  .salamanca-city-index-wrap {
    max-inline-size: var(--max-width, 73.75rem);
    margin: var(--space-xl, 4rem) auto 0;
    padding-block-start: var(--space-l, 2.5rem);
    border-block-start: 1px solid var(--hairline, #29292d);
  }

  .salamanca-city-index-wrap h2 {
    margin-block-end: var(--space-m, 1.5rem);
    text-align: center;
    font-size: var(--t-xl, 1.5rem);
  }

  .salamanca-city-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    grid-auto-rows: 1fr;
    gap: .5rem;
    padding: 0;
    list-style: none;
  }

  .salamanca-city-index button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: var(--target-size, 2.75rem);
    padding: .65rem .75rem;
    border: 1px solid var(--hairline, #29292d);
    border-radius: var(--radius, .1875rem);
    background: var(--ink-raised, #1c1c21);
    text-align: start;
    color: var(--paper-dim, #bdb8ad);
    cursor: pointer;
    transition: border-color var(--speed, 180ms) var(--ease, ease), color var(--speed, 180ms) var(--ease, ease), background-color var(--speed, 180ms) var(--ease, ease);
  }

  .salamanca-city-index button strong {
    display: block;
    color: var(--paper, #f2efe9);
  }

  .salamanca-city-index button span {
    display: block;
    margin-block-start: .1rem;
    font-size: var(--t-2xs, .6875rem);
    letter-spacing: .04em;
    color: var(--paper-faint, #97918a);
  }

  .salamanca-city-index li[hidden] { display: none; }

  @media (hover: hover) and (pointer: fine) {
    .salamanca-city-index button:hover {
      border-color: var(--hairline-gold, #756039);
      background: var(--gold-wash, rgba(195,155,78,.08));
    }
  }

  @media (max-width: 64rem) {
    .sal-map-view-switch { display: flex; }
    .sal-map-shell[data-view="atlantic"] .sal-map__inset,
    .sal-map-shell[data-view="atlantic"] #sal-map-inset-connector {
      display: none;
    }
    .sal-map-shell[data-view="iberia"] .sal-map > :not(.sal-map__inset):not(title):not(desc) {
      display: none;
    }
    .sal-map-shell[data-view="iberia"] .sal-map {
      aspect-ratio: 350 / 295;
    }
    .sal-map-shell[data-view="iberia"] .sal-map__city-label { font-size: 16px; }
    .sal-map-shell[data-view="iberia"] .sal-map__marker-set[data-group="core"] .sal-map__city-label { font-size: 18px; }
    .sal-map-shell[data-view="iberia"] .sal-map__marker-hit { r: 22; }
    .sal-map-explorer { display: block; }
    .sal-map__tooltip {
      position: fixed;
      inset-inline: 1rem;
      inset-block-end: 1rem;
      max-block-size: min(70vh, 32rem);
      max-block-size: min(70dvh, 32rem);
      overflow-y: auto;
      box-shadow: 0 1rem 2.5rem -0.75rem rgba(0,0,0,.75);
    }
    .sal-map__tooltip[data-empty="true"] { display: none; }
    .sal-map__tooltip-body {
      position: relative;
      overflow: visible;
    }
  }

  @media (max-width: 44rem) {
    .sal-map-shell { overflow: visible; }
    .sal-map-shell::before { display: none; }
    .sal-map { aspect-ratio: 4 / 3; }
    .sal-map__region-label { display: none; }
    .sal-map-shell:not([data-view="iberia"]) .sal-map__marker-set[data-label-permanent="true"]:not([data-label-mobile="true"]):not(.is-active):not(:hover):not(:focus) .sal-map__city-label-set {
      visibility: hidden;
    }
    .sal-map__city-label { font-size: 22px; }
    .sal-map__marker-set[data-group="core"] .sal-map__city-label { font-size: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sal-map__marker { transition: none; }
  }
}