/* Spotless free-parking guides, craft v2 "Curbside". Tokens, fonts and chrome come from /spotless/spotless.css.
   Layers on /shared/fl.css. See /docs/CRAFT-V2.md. */
.sp .band { padding: clamp(64px, 8vw, 120px) 0; }
.sp .band.paper { background: var(--asphalt-2); color: var(--text); }
.sp .band.paper .lede, .sp .band .lede { color: var(--muted); }
.sp .band.paper .caption, .sp .caption { font: 400 15px/1.55 var(--text-face); color: var(--faint); max-width: 72ch; margin-top: 26px; }

/* masthead: the street-name blade trail, then the headline */
.sp .masthead { padding: clamp(120px, 14vw, 180px) 0 clamp(56px, 7vw, 96px); border-bottom: 6px solid var(--teal); }
.sp .masthead h1 { font-size: clamp(52px, 7vw, 104px); max-width: 13ch; }
.sp .masthead .actions, .sp .band .actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; align-items: center; }
.crumbs span { display: none; }
.crumbs a, .crumbs b {
  display: inline-flex; align-items: center; min-height: 40px; padding: 5px 12px 3px; border-radius: 4px; text-decoration: none;
  font: 800 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.crumbs a { color: var(--text); box-shadow: inset 0 0 0 2px var(--kerb); }
.crumbs a:hover { color: var(--teal); }
.crumbs b { background: var(--sign-green); color: #fff; box-shadow: inset 0 0 0 2px var(--sign-green), inset 0 0 0 3.5px rgba(255, 255, 255, .85); }
.sp .facts { display: flex; flex-wrap: wrap; gap: 18px 48px; margin: 30px 0 6px; }
.sp .facts div { min-width: 130px; }
.sp .facts .big { display: block; font: 800 clamp(40px, 4.4vw, 62px)/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.sp .facts .mono { display: block; margin-top: 6px; font: 400 15px/1.4 var(--text-face); letter-spacing: 0; text-transform: none; color: var(--faint); }
.sp .link { font: 700 17px/1 var(--text-face); letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; padding: 0; display: inline-flex; align-items: center; min-height: 44px; }
.sp .link::after { display: none; }
.sp .tag { background: transparent; color: var(--muted); transform: none; box-shadow: inset 0 0 0 1.5px var(--kerb); font: 700 14px/1 var(--text-face); letter-spacing: 0; text-transform: none; padding: 8px 10px; border-radius: 4px; }
.sp .tag + .tag { transform: none; }

/* notable lots: each one a sign plate in a ruled list */
.sp .lots { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.sp .lots > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.sp .lots .num { font: 800 26px/1 var(--display); color: var(--teal); grid-row: span 2; }
.sp .lots h3 { font-size: clamp(22px, 2vw, 28px); margin: 0; }
.sp .lots .meta { font: 400 15px/1.4 var(--text-face); color: var(--faint); grid-column: 2; }
@media (max-width: 760px) { .sp .lots { grid-template-columns: 1fr; } .sp .lots > li { grid-template-columns: 40px minmax(0, 1fr); } }

/* free / paid / ride, as three plates */
.sp .ways { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; }
.sp .ways li {
  background: var(--sign); color: var(--sign-ink); border-radius: 10px; padding: 18px 20px;
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5.5px var(--sign-ink);
}
.sp .ways li:has(.free) { color: var(--sign-green); box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5.5px var(--sign-green); }
.sp .ways .k { display: block; font: 900 28px/.95 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.sp .ways p { margin: 0; color: var(--sign-ink); font-size: 16px; line-height: 1.45; }
@media (max-width: 760px) { .sp .ways { grid-template-columns: 1fr; } }
.sp .fine { margin-top: 26px; color: var(--faint); font-size: 16px; }

/* other cities: blades */
.sp .more { margin-top: clamp(64px, 8vw, 104px); padding-top: 28px; border-top: 1px solid var(--line); }
.sp .more h2 { font-size: clamp(36px, 4vw, 56px); }
.sp .cities { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sp .cities a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px 4px; border-radius: 5px; text-decoration: none;
  background: var(--sign-green); color: #fff; box-shadow: inset 0 0 0 2px var(--sign-green), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
  font: 800 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase;
}
.sp .cities a:hover { color: #fff; filter: brightness(1.15); }

/* index: city rows */
.sp .index { list-style: none; margin: 34px 0 0; padding: 0; columns: 2; column-gap: 48px; }
.sp .index li { break-inside: avoid; border-top: 1px solid var(--line); }
.sp .index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; text-decoration: none; min-height: 44px; }
.sp .index .city { font: 800 clamp(22px, 2.2vw, 28px)/1.1 var(--display); }
.sp .index a:hover .city { color: var(--teal); }
.sp .index .meta { font: 400 15px/1.4 var(--text-face); color: var(--faint); text-align: right; }
@media (max-width: 760px) { .sp .index { columns: 1; } }