/* Spotless free-parking guides: sodium streetlight, wet asphalt. Layer on /shared/fl.css. See /DESIGN.md. */
body { --accent: #f5c24a; --accent-2: #3fd0a0; --scribble-hue: -8deg; --ink-on-paper: #7a5500; --paper-faint: #8f8676; }
.band.paper .eyebrow b { color: var(--ink-on-paper); }
.band.paper h2 em { color: #855a00; }
.band.paper a:hover, .foot a:hover, .skip:hover { color: var(--ink-on-paper); }
/* paper bands carry their own side inset (same as /spotless/) */
.band.paper { padding: 72px 16px; }
@media (min-width: 560px) { .band.paper { padding: 96px 24px; } }
@media (min-width: 900px) { .band.paper { padding: 128px 40px; } }
@media (min-width: 1240px) { .band.paper { padding: 152px 40px; } }
.band.paper > .wrap { padding-left: 0; padding-right: 0; max-width: 1160px; }
@media (max-width: 900px) { .nav ul a:hover { color: var(--ink-on-paper); } }

/* masthead (no 3D on guide pages) */
.masthead { padding: clamp(140px, 16vw, 200px) 0 clamp(64px, 8vw, 110px); }
.masthead .wrap { position: relative; }
.masthead .curb-mark { position: absolute; right: var(--gut); bottom: 0; width: min(300px, 28vw); color: var(--accent); transform: rotate(-1.5deg); }
@media (max-width: 900px) { .masthead .curb-mark { display: none; } }
.masthead h1 { font-size: clamp(44px, 6.4vw, 96px); max-width: 14ch; }
.masthead .actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }
.crumbs { font: 500 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.crumbs a { text-decoration: none; color: var(--paper-dim); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs span, .crumbs b { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs b { color: var(--accent); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 22px 56px; margin: 34px 0 6px; }
.facts div { border-top: 1px solid var(--rule); padding-top: 14px; min-width: 150px; }
.facts .big { display: block; font: 400 clamp(44px, 5.4vw, 76px)/1 var(--display); color: var(--paper); }
.facts .mono { display: block; margin-top: 8px; color: var(--paper-faint); font-size: 11px; }

/* notable lots: ruled list */
.lots { margin-top: 40px; }
.lots > li { grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr); padding: 20px 0; }
.lots .num { font-size: 30px; color: var(--ink-on-paper); }
.lots h3 { font-size: clamp(21px, 2vw, 27px); margin: 0; }
.lots .meta { font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: #5f574c; }
@media (max-width: 760px) { .lots > li { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; } .lots .num { font-size: 24px; } }
.band.paper .caption { max-width: 72ch; margin-top: 26px; }

/* free / paid / ride */
.ways { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 820px; }
.ways li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.ways .k { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); }
.ways .k.free { color: var(--accent-2); }
.ways p { margin: 0; color: var(--paper-dim); }
.fine { margin-top: 26px; color: var(--paper-faint); font-size: 16px; }
.band .actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 30px; }

/* other cities: typeset list, like the footer (sits at the end of the dark band) */
.more { margin-top: clamp(72px, 9vw, 120px); padding-top: 28px; border-top: 1px solid var(--rule); }
.more h2 { font-size: clamp(30px, 3.6vw, 52px); }
.cities { list-style: none; margin: 34px 0 0; padding: 0; columns: 3; column-gap: 40px; }
.cities li { break-inside: avoid; border-top: 1px solid var(--rule); padding: 6px 0 4px; }
.cities a { display: flex; align-items: center; min-height: 44px; font: 400 24px/1.1 var(--display); text-decoration: none; }
@media (max-width: 900px) { .cities { columns: 2; } }
@media (max-width: 560px) { .cities { column-gap: 20px; } .cities a { font-size: 20px; } }

/* index: city rows */
.index { list-style: none; margin: 40px 0 0; padding: 0; columns: 2; column-gap: 56px; }
.index li { break-inside: avoid; border-top: 1px solid rgba(15, 13, 11, .16); }
.index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; text-decoration: none; }
.index .city { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--display); }
.index .meta { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #5f574c; }
@media (max-width: 760px) { .index { columns: 1; } }