/* JimGO Taxis: location pages (taxis-<town>.php). Tokens in _work/design-plan.md: surfaces square, buttons pill. */

/* ---------- maps on this page: line widths and labels stay the same size on screen at any zoom ----------
   location.js sets --iz (1 / zoom) on the svg and counter-scales each town marker; without JS the PHP value holds. */
.lc-map { --iz: 1; overflow: hidden; }
.lc-map .m-coastline { stroke-width: calc(1.4px * var(--iz)); }
.lc-map .m-contour { stroke-width: calc(1px * var(--iz)); }
.lc-map .m-border { stroke-width: calc(1.2px * var(--iz)); stroke-dasharray: calc(2px * var(--iz)) calc(7px * var(--iz)); }
.lc-map .m-river { stroke-width: calc(1.8px * var(--iz)); }
.lc-map .m-rail { stroke-width: calc(1.4px * var(--iz)); stroke-dasharray: calc(1px * var(--iz)) calc(6px * var(--iz)); }
.lc-map .m-road { stroke-width: calc(2.4px * var(--iz)); }
.lc-map .m-road-a1, .lc-map .m-road-a697 { stroke-width: calc(3.4px * var(--iz)); }
.lc-map .m-region { font-size: calc(22px * var(--iz)); }
.lc-map .m-town text { transition: opacity .6s; }
.lc-map.is-wide .m-town text { opacity: 0; }
.lc-route { fill: none; stroke: var(--amber); stroke-width: calc(4.5px * var(--iz)); stroke-linecap: round; stroke-linejoin: round; }
.lc-flow { fill: none; stroke: #FFF4DA; stroke-width: calc(2.2px * var(--iz)); stroke-linecap: round; stroke-dasharray: calc(1px * var(--iz)) calc(15px * var(--iz)); opacity: .75; animation: lc-flow 1.2s linear infinite; }
@keyframes lc-flow { to { stroke-dashoffset: calc(-16px * var(--iz)); } }
.lc-head { fill: #FFF4DA; opacity: 0; }
.lc-glow { opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.lc-dest { fill: none; stroke: var(--amber); stroke-width: calc(2.4px * var(--iz)); opacity: 0; }
.lc-pin-shape { fill: var(--amber); stroke: #161513; stroke-width: 2; }
.lc-pin-eye { fill: #161513; }
.lc-ring { fill: none; stroke: var(--amber); stroke-width: 2; opacity: .5; }
.lc-ring-b { opacity: 0; }

/* ---------- opener: the town, its photo and a map that flies to it ---------- */
.lo { position: relative; min-height: max(600px, 78svh); padding-top: var(--head-h); display: flex; flex-direction: column; justify-content: center; overflow: clip; isolation: isolate; background: radial-gradient(70% 80% at 82% 40%, rgba(232, 169, 65, .09), transparent 62%), var(--tarmac); }
.lo-tex { position: absolute; inset: -12%; z-index: -1; pointer-events: none; background: repeating-radial-gradient(ellipse at 74% 48%, rgba(251, 229, 193, .045) 0 2px, transparent 2px 44px); will-change: transform; }
.lo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(36px, 5vw, 84px); align-items: center; padding-block: clamp(14px, 2.6vh, 34px) clamp(10px, 2vh, 24px); }
.lo-copy { container-type: inline-size; }
.lo-h1 { font-size: clamp(2rem, 3.1vw, 3.1rem); line-height: 1; margin-bottom: .42em; }
.lo-pre { font-stretch: 92%; }
.lo-town { font-size: min(clamp(3.4rem, 7.2vw, 6.4rem), calc(100cqi / (var(--len) * .5))); font-weight: 840; font-stretch: 78%; letter-spacing: -.015em; line-height: .96; }
.lo-lede { margin-bottom: 1.5em; }

.lo-media { position: relative; padding-bottom: clamp(36px, 6vh, 64px); }
.lo-photo { margin: 0; }
.lo-photo .frame-img { height: min(54svh, 500px); max-height: none; }
.lo-photo .frame-img img { height: 100%; transform-origin: 60% 50%; }
.lo-photo figcaption { left: auto; right: 0; top: 0; bottom: auto; border-left: 0; border-right: 3px solid var(--amber); }
.lo-card { position: absolute; z-index: 3; left: clamp(-64px, -3.6vw, -24px); bottom: 0; width: min(360px, 56%); background: #121110; border: 1px solid rgba(251, 229, 193, .1); box-shadow: 0 44px 70px -30px rgba(0, 0, 0, .95), 0 0 0 6px rgba(18, 17, 16, .4); will-change: transform; }
.lo-card-map { height: clamp(170px, 23svh, 220px); overflow: hidden; background: var(--sea); }
.lo-card-map svg { width: 100%; height: 100%; }
/* the strip keeps one size whatever the place name ("Northumberland" during the flight, then the town): no reflow */
.lo-card-bar { display: flex; align-items: center; gap: 12px; height: 46px; margin: 0; padding: 0 14px; border-top: 2px solid var(--amber); font-size: .9rem; line-height: 1.2; color: var(--fog); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.lo-card-bar b { flex: 1 1 0; min-width: 0; overflow: hidden; font: 760 1.1rem/1.2 var(--display); font-stretch: 86%; color: var(--cream); }
.lo-card-bar span { flex: none; width: 10.4rem; text-align: right; }

.lo-foot { position: relative; padding-bottom: clamp(16px, 3vh, 32px); }
.lo-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid rgba(251, 229, 193, .12); }
.lo-facts li { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 0; }
.lo-facts li + li { padding-left: 18px; border-left: 1px solid rgba(251, 229, 193, .12); }
.lo-facts .ic { width: 40px; height: 40px; padding: 9px; border: 2px solid rgba(232, 169, 65, .55); color: var(--amber); }
.lo-facts small { display: block; color: var(--fog); font-size: .88rem; line-height: 1.3; }
.lo-facts b { display: block; color: var(--cream); font-weight: 600; font-size: .98rem; line-height: 1.3; }

/* ---------- your local taxi in <town> ---------- */
.ll { overflow: clip; padding-block: clamp(76px, 10vh, 130px); }
.ll-word { position: absolute; left: 0; right: 0; bottom: clamp(10px, 3vh, 40px); z-index: 0; pointer-events: none; white-space: nowrap; overflow: clip; }
.ll-word span { display: inline-block; padding-left: 3vw; font: 860 clamp(7rem, 17vw, 17rem)/.86 var(--display); font-stretch: 70%; color: transparent; -webkit-text-stroke: 1.5px rgba(251, 229, 193, .09); will-change: transform; }
.ll-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ll-media { position: relative; padding: 0 clamp(30px, 3.6vw, 56px) clamp(56px, 8vh, 90px) 0; }
.ll-photo .frame-img { height: min(54vh, 480px); max-height: none; }
.ll-inset { position: absolute; right: 0; bottom: 0; z-index: 2; width: 54%; margin: 0; background: var(--tarmac); box-shadow: -14px -14px 0 var(--tarmac), 0 30px 60px -30px rgba(0, 0, 0, .9); will-change: transform; }
.ll-inset-img { height: clamp(140px, 20vh, 210px); overflow: hidden; background: var(--asphalt); }
.ll-inset-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ll-inset figcaption { padding: 9px 14px; background: #121110; color: var(--text); font-size: .9rem; border-left: 3px solid var(--amber); }
.ll-copy .lede { margin: 20px 0 12px; }
.ll-p { color: var(--text); }
.ll-roads-h { font-size: 1.2rem; line-height: 1.2; font-stretch: 92%; margin: 22px 0 8px; }
.ll-roads li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(251, 229, 193, .12); }
.ll-roads li:last-child { border-bottom: 1px solid rgba(251, 229, 193, .12); }
.ll-shield { position: relative; display: grid; place-items: center; min-width: 76px; height: 46px; padding: 0 12px; background: var(--amber); color: var(--ink); font: 860 1.4rem/1 var(--display); font-stretch: 84%; }
.ll-shield::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 235, .55) 50%, transparent 62%) 0 0 / 300% 100% no-repeat; background-position: 120% 0; animation: ll-glint 5s ease-in-out infinite; }
.ll-roads li:nth-child(2) .ll-shield::before { animation-delay: .5s; }
.ll-roads li:nth-child(3) .ll-shield::before { animation-delay: 1s; }
@keyframes ll-glint { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } }
.ll-shield::after { content: ''; position: absolute; inset: 4px; border: 2px solid rgba(29, 28, 26, .7); pointer-events: none; }
.ll-roads p { margin: 0; color: var(--text); }
.ll-car { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; color: var(--fog); font-size: .98rem; }
.ll-car .ic { color: var(--amber); margin-top: 3px; }

/* ---------- set piece: journeys from <town>. Static (no JS, reduced motion, short screens) by default ---------- */
.lj { --hs: 82px; --lj-panel: min(460px, 35vw); position: relative; overflow: clip; padding-block: clamp(80px, 11vh, 140px); background: radial-gradient(80% 60% at 70% 30%, rgba(232, 169, 65, .06), transparent 70%), #161513; }
/* static: the panel is the same width as the live panel (headings wrap the same), the map sticks beside it */
.lj-stage { display: grid; grid-template-columns: var(--lj-panel) minmax(0, 1fr); gap: 44px; align-items: start; width: min(1320px, 100% - 2 * var(--gut)); margin-inline: auto; }
.lj-stage > .lj-in { grid-column: 1; grid-row: 1; width: auto; margin: 0; }
.lj-map { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--hs) + 24px); height: min(76vh, 680px); background: var(--sea); overflow: hidden; }
.lj-map svg { width: 100%; height: 100%; }
.lj-fade { display: none; }
.lj-intro { color: var(--fog); margin: 14px 0 0; }
.lj-meter { display: none; }
.lj-legs { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 28px; }
.lj-leg-in { height: 100%; padding: 22px 22px 14px; background: var(--asphalt); border-top: 3px solid var(--amber); }
.lj-leg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lj-ic { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(232, 169, 65, .65); color: var(--amber); background: rgba(18, 17, 16, .5); }
.lj-ic .ic { width: 22px; height: 22px; }
.lj-tag { font-weight: 600; color: var(--amber); font-size: .95rem; }
.lj-to { font-size: clamp(1.4rem, 1.9vw, 1.9rem); line-height: 1.08; margin-bottom: 6px; }
.lj-road { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border: 1px solid rgba(251, 229, 193, .2); color: var(--cream); font-size: .9rem; font-weight: 500; }
.lj-text { color: var(--text); margin: 0 0 6px; font-size: 1rem; }
.lj-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.lj-more { color: var(--cream); }

/* live: pinned, the map on the right, one leg card at a time on the left */
.lj.is-live { height: 100svh; min-height: 600px; padding: 0; }
.lj.is-live .lj-stage { display: block; position: relative; height: 100%; width: auto; margin: 0; }
.lj.is-live .lj-map { position: absolute; top: var(--hs); right: 0; bottom: 0; left: calc(max(var(--gut), (100% - 1320px) / 2) + var(--lj-panel) + 44px); width: auto; height: auto; margin: 0; }
.lj.is-live .lj-stage > .lj-in { width: min(1320px, 100% - 2 * var(--gut)); margin-inline: auto; }
.lj.is-live .lj-fade { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 16%; background: linear-gradient(90deg, #161513, rgba(22, 21, 19, 0)); pointer-events: none; }
.lj.is-live .lj-in { position: absolute; top: var(--hs); bottom: 0; left: 0; right: 0; display: flex; align-items: center; pointer-events: none; }
.lj.is-live .lj-panel { width: var(--lj-panel); pointer-events: none; padding-block: 16px; }
.lj.is-live .lj-top, .lj.is-live .lj-legs-box { pointer-events: auto; }
.lj.is-live .lj-meter { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.lj-count { color: var(--fog); font: 700 1.2rem/1 var(--display); font-stretch: 86%; font-variant-numeric: tabular-nums; }
.lj-count b { font-size: 2.6rem; color: var(--amber); }
.lj-bars { display: flex; gap: 6px; flex: 1; }
.lj-bars i { position: relative; flex: 1; height: 4px; background: rgba(251, 229, 193, .14); overflow: hidden; }
.lj-bars i::after { content: ''; position: absolute; inset: 0; background: var(--amber); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.lj.is-live .lj-legs-box { position: relative; margin-top: 20px; }
.lj.is-live .lj-legs { display: block; margin: 0; }
.lj.is-live .lj-leg { position: absolute; left: 0; right: 0; top: 0; }
.lj.is-live .lj-leg-in { height: auto; background: rgba(41, 40, 37, .92); box-shadow: 0 36px 60px -36px rgba(0, 0, 0, .9); }

/* ---------- services from <town> ---------- */
.lsv { overflow: clip; background: linear-gradient(180deg, #161513, var(--tarmac) 40%); }
.lsv .sec-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.lsv .card { min-height: min(56vh, 500px); }

/* ---------- villages around <town>: finger posts on the cream band ---------- */
.lv { overflow: clip; }
.lv-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.lv .lede { color: var(--ink); margin: 18px 0 16px; }
.lv-towns { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; color: #5C564C; margin-bottom: 22px; }
.lv-towns .text-link { color: #8A5A0E; }
.lv-post { position: relative; padding: 44px 22px 30px; background: radial-gradient(120% 70% at 50% 110%, rgba(29, 28, 26, .1), transparent 60%), repeating-radial-gradient(ellipse at 50% 120%, rgba(29, 28, 26, .05) 0 1.5px, transparent 1.5px 34px), #EFE3CF; border-bottom: 4px solid #D9C8AA; }
.lv-pole { position: absolute; left: 50%; top: 18px; bottom: 0; width: 14px; margin-left: -7px; background: linear-gradient(90deg, #3A3833, #1D1C1A 55%, #121110); transform-origin: 50% 100%; }
.lv-pole::before { content: ''; position: absolute; left: -6px; right: -6px; top: -12px; height: 14px; background: #1D1C1A; }
.lv-pole::after { content: ''; position: absolute; left: -60px; right: -60px; bottom: -6px; height: 12px; background: radial-gradient(50% 50% at 50% 50%, rgba(29, 28, 26, .28), transparent 70%); }
.lv-signs { position: relative; display: grid; gap: 10px; }
.lv-signs { filter: drop-shadow(0 12px 10px rgba(29, 28, 26, .22)); }
.lv-sign { position: relative; width: calc(50% + 12px); padding: 3px; background: var(--ink); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); transform-origin: 0 50%; will-change: transform; }
.lv-sign.to-left { clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%); transform-origin: 100% 50%; }
.lv-sign.to-right { margin-left: calc(50% - 12px); }
.lv-sign a { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 6px 43px 6px 23px; background: #FFFDF8; color: var(--ink); text-decoration: none; clip-path: polygon(0 0, calc(100% - 28.6px) 0, 100% 50%, calc(100% - 28.6px) 100%, 0 100%); transition: background-color .3s; }
.lv-sign.to-left a { padding: 6px 23px 6px 43px; text-align: right; clip-path: polygon(28.6px 0, 100% 0, 100% 100%, 28.6px 100%, 0 50%); }
.lv-sign.has-page a::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 9px; background: var(--amber); }
.lv-sign.to-left.has-page a::after { left: auto; right: 0; }
.lv-sign b { font: 800 1.45rem/1.05 var(--display); font-stretch: 86%; }
.lv-sign span { margin-top: 3px; font-size: .92rem; line-height: 1.3; color: #4A453D; }
.lv-sign a:hover, .lv-sign a:focus-visible { background: #FFF1D6; }
.lv-sign a:focus-visible { outline: none; }
.lv-sign:focus-within { background: var(--amber); }

@media (prefers-reduced-motion: reduce) { .lc-flow, .ll-shield::before { animation: none; } }
/* the opener's photo and map card wait for their entrance (location.js); without JS or with reduced motion they show */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-all) .lo-photo .frame-img { clip-path: inset(0 100% 0 0); }
  html.js:not(.reveal-all) .lo-card { opacity: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .lo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lo-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .lo-facts li:nth-child(n + 3) { border-top: 1px solid rgba(251, 229, 193, .12); }
}
@media (max-width: 960px) {
  .lo { display: block; min-height: 0; }
  .lo-grid { grid-template-columns: 1fr; gap: 26px; }
  .lo-media { padding-bottom: 46px; margin-right: 10px; }
  .lo-photo .frame-img { height: clamp(260px, 42svh, 420px); }
  .lo-card { left: 12px; width: min(320px, 72%); }
  .lo-card-map { height: 150px; }
  .ll-in, .lv-in { grid-template-columns: 1fr; }
  .ll-media { padding-right: 28px; }
}
@media (max-width: 760px) {
  .lo-h1 { font-size: 1.9rem; }
  .lo .lede { font-size: 1rem; margin-bottom: 1.1em; }
  .lo .btn-row .btn { flex: 1 1 auto; padding: 0 1.1em; }
  .lo-facts li { gap: 10px; padding-right: 8px; align-items: flex-start; }
  .lo-facts li + li { padding-left: 12px; }
  .lo-facts li:nth-child(3) { padding-left: 0; }
  .lo-facts .ic { width: 34px; height: 34px; padding: 7px; }
  .lo-facts b { font-size: .92rem; }
  .lo-card-bar { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: 58px; padding: 0 12px; font-size: .88rem; }
  .lo-card-bar b { flex: none; width: 100%; font-size: 1rem; }
  .lo-card-bar span { width: auto; text-align: left; }
  .ll-photo .frame-img { height: min(52vh, 380px); }
  .ll-inset { width: 62%; }
  .ll-roads li { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
  .lj { --hs: 70px; }
  .lj-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lj-map { grid-column: 1; grid-row: 2; position: relative; top: auto; height: min(62vh, 460px); }
  /* the same type in the static list as in the pinned scene */
  .lj .h2 { font-size: 1.9rem; }
  .lj-leg-in { padding: 14px 16px 6px; }
  .lj-leg-head { margin-bottom: 8px; }
  .lj-ic { width: 40px; height: 40px; }
  .lj-to { font-size: 1.4rem; }
  .lj-text { font-size: .95rem; line-height: 1.5; }
  .lj.is-live .lj-map { left: 0; top: calc(var(--hs) + var(--lj-top-h, 100px) + 20px); bottom: calc(var(--lj-legs-h, 300px) + 22px); }
  .lj.is-live .lj-fade { display: none; }
  .lj.is-live .lj-in { align-items: stretch; }
  .lj.is-live .lj-panel { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0 14px; }
  .lj.is-live .lj-intro { display: none; }
  .lj.is-live .lj-meter { margin-top: 8px; }
  .lj-count b { font-size: 2rem; }
  .lsv .card { min-height: 340px; }
  .lv-post { padding: 40px 12px 20px; }
  .lv-pole { left: 26px; }
  .lv-sign, .lv-sign.to-right, .lv-sign.to-left { width: calc(100% - 16px); margin-left: 16px; }
  .lv-sign.to-left { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); transform-origin: 0 50%; }
  .lv-sign.to-left a { padding: 9px 43px 9px 23px; text-align: left; clip-path: polygon(0 0, calc(100% - 28.6px) 0, 100% 50%, calc(100% - 28.6px) 100%, 0 100%); }
  .lv-sign.to-left.has-page a::after { right: auto; left: 0; }
  /* the shared hero-map phone rules must not resize this page's maps */
  .lc-map .m-town.is-major text { font-size: 19px; stroke-width: 4px; }
  .lc-map .m-town.is-major .m-dot { r: 5.5px; }
  .lc-map .m-town[data-town] text { transform: none; }
  .lc-map .m-plane { transform-box: view-box; }
}