/*
 * CITY OF LEGENDS: the places track (src/places/). Every class starts pl-.
 *
 * Neon Ink: hard edges, flat colour, halftone dots for shade. No blur, no
 * glow, no soft gradients. Mobile first; the min-width blocks are the wider
 * layouts. Nothing here animates. Reads the shared tokens only and never
 * restyles a site class, with one scoped exception: .pl-passage sets the size
 * of the canon quotes inside it so a page-long passage reads as a passage.
 */

/* ── ring map ──────────────────────────────────────────────────────── */

.pl-map {
  max-width: 560px;
  margin: 8px 0 36px;
}
.pl-map-svg {
  display: block;
  width: 100%;
  height: auto;
}
.pl-pbg-dots {
  fill: var(--night-2);
}
.pl-pbg-hatch {
  fill: var(--ink);
}
.pl-pbg-water {
  fill: var(--night);
}
.pl-dot {
  fill: rgba(217, 210, 189, 0.32);
}
.pl-hatch {
  stroke: rgba(154, 163, 189, 0.55);
  stroke-width: 1.5;
}
.pl-wave {
  stroke: rgba(56, 232, 255, 0.5);
  stroke-width: 1.5;
}
.pl-r-war {
  fill: var(--ink);
  stroke: var(--registry);
  stroke-width: 3;
  stroke-dasharray: 10 5;
}
.pl-r-fringe {
  fill: var(--night);
  stroke: var(--sodium);
  stroke-width: 3;
}
.pl-r-ground {
  fill: var(--night-2);
  stroke: var(--paper);
  stroke-width: 3;
}
.pl-r-core {
  fill: url(#pl-dots);
  stroke: var(--paper);
  stroke-width: 3;
}
.pl-r-coil {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
}
.pl-r-west {
  fill: url(#pl-hatch);
  stroke: var(--dim);
  stroke-width: 2;
}
.pl-r-south {
  fill: url(#pl-water);
  stroke: var(--lattice);
  stroke-width: 2;
}
.pl-wall {
  fill: none;
  stroke: var(--paper);
  stroke-width: 4;
}
.pl-hit {
  fill: transparent;
}
.pl-label {
  fill: var(--paper);
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
}
.pl-label-coil {
  fill: var(--ink);
}
.pl-map-svg a {
  cursor: pointer;
  text-decoration: none;
}
.pl-map-svg a:hover .pl-label {
  fill: var(--sodium);
  text-decoration: underline;
}
.pl-map-svg a:hover .pl-label-coil {
  fill: var(--ink);
}
.pl-map-svg a:focus-visible {
  outline: 3px solid var(--lattice);
  outline-offset: 1px;
}
.pl-map figcaption {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--dim);
}
.pl-legend {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.pl-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.pl-legend i {
  flex: none;
  width: 22px;
  height: 22px;
  border: 3px solid var(--paper);
}
.pl-legend .pl-sw-coil {
  background: var(--paper);
  border-color: var(--ink);
  outline: 2px solid var(--paper);
}
.pl-legend .pl-sw-core {
  background-color: var(--night-2);
  background-image: radial-gradient(rgba(217, 210, 189, 0.6) 1.2px, transparent 1.6px);
  background-size: 6px 6px;
}
.pl-legend .pl-sw-ground {
  background: var(--night-2);
}
.pl-legend .pl-sw-fringe {
  background: var(--night);
  border-color: var(--sodium);
}
.pl-legend .pl-sw-war {
  background: var(--ink);
  border: 3px dashed var(--registry);
}
.pl-legend .pl-sw-beyond {
  background: repeating-linear-gradient(45deg, var(--ink) 0 3px, var(--dim) 3px 4px);
  border-color: var(--dim);
}

/* ── a day, as times ───────────────────────────────────────────────── */

.pl-times {
  display: grid;
  max-width: 56rem;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border: 3px solid var(--paper);
  background: var(--ink);
}
.pl-times li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.pl-times li:last-child {
  border-bottom: 0;
}
.pl-at {
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--sodium);
}

/* ── landmarks and places: one column on a phone, two from 960px ───── */

.pl-entries {
  display: grid;
  gap: 0 56px;
}

/* ── who you will meet, what hunts here ────────────────────────────── */

.pl-list {
  display: grid;
  gap: 14px;
  max-width: 46rem;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.pl-list li {
  padding: 2px 0 2px 16px;
  border-left: 4px solid var(--sodium);
  font-size: 18px;
}

/* ── a breach, from a window ───────────────────────────────────────── */

.pl-passage {
  max-width: 46rem;
  margin: 0 0 28px;
}
.pl-passage .g-q {
  margin: 0 0 22px;
}
.pl-passage .g-q blockquote p {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
}

/* ── the jump list on the life page ────────────────────────────────── */

.band.pl-jump {
  padding: 22px 0 6px;
}
.pl-jump .g-jump ul {
  margin: 0;
}

/* ── wider screens ─────────────────────────────────────────────────── */

@media (min-width: 480px) {
  .pl-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .pl-entries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .pl-times {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .pl-times li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .pl-times li:last-child {
    border-right: 0;
  }
}

@media (min-width: 900px) {
  .pl-map {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 14px 40px;
    align-items: start;
    max-width: 960px;
  }
  .pl-map-svg {
    grid-row: 1 / span 2;
  }
  .pl-map figcaption {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 17px;
  }
  .pl-legend {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    margin: 0;
  }
}