/* The drive-time map (assets/time-map.js): quiet hairline rings on a pale disc, the house in the middle, every town a link, a compass that turns
   with the phone. Colours and type come from the shared tokens only. */
.tm { width: 100%; max-width: 560px; margin: var(--s4) auto 0; }
.tm svg { display: block; width: 100%; height: auto; overflow: visible; }
.tm-disc { fill: var(--sage-05); }
.tm-ring { fill: none; stroke: var(--border-md); stroke-width: 1; }
.tm-ring--out { stroke-dasharray: 3 5; }
.tm-rl { font-family: var(--font); font-size: 10px; font-weight: var(--w-med); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-70); }
.tm-north path { fill: var(--ink-70); }
.tm-north text { font-family: var(--font); font-size: 11px; font-weight: var(--w-med); fill: var(--ink-70); }
.tm-pt { cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tm-hit { fill: transparent; }
.tm-dot { fill: var(--sage-dk); transform-box: fill-box; transform-origin: center; transition: transform var(--t-base) var(--ez-alt); }
.tm-n { font-family: var(--font); font-size: 14px; font-weight: var(--w-med); fill: var(--ink); }
.tm-m { font-family: var(--font); font-size: 12px; font-weight: var(--w-reg, 400); fill: var(--ink-70); }
.tm-pt:hover .tm-dot, .tm-pt:focus-visible .tm-dot { transform: scale(1.6); }
.tm-pt:hover .tm-n, .tm-pt:focus-visible .tm-n { fill: var(--sage-dk); text-decoration: underline; }
.tm-pt:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }
.tm-hr { fill: none; stroke: var(--sage-dk); stroke-width: 1; opacity: 0.5; }
.tm-hd { fill: var(--ink); }
.tm-hn { font-family: var(--font); font-size: 11px; font-weight: var(--w-med); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink); }
.tm-cap { margin: var(--s2) 0 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink-70); text-align: center; text-wrap: balance; }
.tm-go { margin: var(--s1) 0 0; text-align: center; font-size: var(--fs-caption); }
.tm-go a { color: var(--sage-dk); border-bottom: 1px solid var(--sage-20); text-decoration: none; }
.tm-go a:hover { border-bottom-color: var(--sage-dk); }
/* room is kept for the map while its data loads (a square picture plus the places further out, the compass button, the caption and the link), so a link to a section further down the page
   lands where it should; if the data never comes, or scripts are off, the room is given back */
.tm:empty { aspect-ratio: 1 / 1; padding-bottom: 218px; box-sizing: content-box; }
.tm.tm-failed { display: none; }
@media (scripting: none) { .tm:empty { display: none; } }
/* the towns appear from the house outwards, once, when the map comes into view */
.tm.tm-ready:not(.is-in) .tm-pt { opacity: 0; }
.tm.tm-ready .tm-pt { opacity: 1; transition: opacity 520ms var(--ez-alt); transition-delay: calc(var(--m) * 9ms); }
@media (prefers-reduced-motion: reduce) {
  .tm.tm-ready:not(.is-in) .tm-pt { opacity: 1; }
  .tm.tm-ready .tm-pt, .tm-dot { transition: none; }
}
@media print { .tm-go, .tm-cmp { display: none; } }

/* a label that sits a little away from its dot is tied to it by a hairline */
.tm-lead { fill: none; stroke: var(--ink-40); stroke-width: 0.75; pointer-events: none; }
/* places beyond the outer ring: a row under the map, each with an arrow in its real direction */
/* the picture is square but the map ends about an eighth above its bottom edge: the row is drawn up into that empty band (percentages follow the width, like the picture) */
.tm-farbox { margin: calc(var(--s2) - 11%) 0 0; }
.tm-far { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s3); margin: 0; font-size: var(--fs-caption); color: var(--ink-70); }
.tm-far.tm-near { margin-top: 0; }
.tm-farbox + .tm-far.tm-near { margin-top: 0; }
.tm-far-h, .tm-near-h { font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--sage-dk); }
.tm-far-i, .tm-near-i { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink); text-decoration: none; }
.tm-far-i:hover .tm-far-n, .tm-far-i:focus-visible .tm-far-n, .tm-near-i:hover .tm-near-n, .tm-near-i:focus-visible .tm-near-n { color: var(--sage-dk); text-decoration: underline; }
.tm-far-i:focus-visible, .tm-near-i:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; border-radius: var(--r-sm); }
.tm .tm-near-ic { flex: none; width: 16px; height: 16px; fill: var(--sage-dk); }
.tm .tm-near-r { fill: none; stroke: var(--sage-dk); stroke-width: 1.2; }
.tm .tm-far-ar { flex: none; width: 16px; height: 16px; fill: var(--sage-dk); }
.tm-far-m { color: var(--ink-70); }
/* the far places in a drop-down with a mist: while it is closed the heading and the first row show clearly and the second row fades out
   (a mask, so it needs no colour and follows any ground); the button opens it, a tap on the faded part does the same */
.tm-farclip { position: relative; }
.tm-farbox.is-collapsed .tm-farclip, .tm-farbox.is-anim .tm-farclip { overflow: hidden; max-height: var(--tm-fade-h, none); }
.tm-farbox.is-collapsed:not(.is-short) .tm-farclip, .tm-farbox.is-anim .tm-farclip {
  -webkit-mask-image: linear-gradient(to bottom, black 0, black var(--tm-fade-from, 0px), transparent 100%); mask-image: linear-gradient(to bottom, black 0, black var(--tm-fade-from, 0px), transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transition: max-height 760ms var(--ez), -webkit-mask-size 760ms var(--ez), mask-size 760ms var(--ez);
}
.tm-farbox.is-anim .tm-farclip { -webkit-mask-size: 100% 500%; mask-size: 100% 500%; }
.tm-farbox.is-collapsed:not(.is-short) .tm-farclip { cursor: pointer; }
.tm-farbox.is-collapsed .tm-far-i.is-later { pointer-events: none; }
.tm-farmore { display: none; justify-content: center; }
.tm-farbox.is-collapsed:not(.is-short) .tm-farmore { display: flex; }
.tm-farbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: var(--s1) 0; background: none; border: none; cursor: pointer; font-family: var(--font); font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--sage-dk); transition: color var(--t-base) var(--ez-alt); }
.tm-farbtn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform var(--t-base) var(--ez-alt); }
.tm-farbtn:hover { color: var(--ink); }
.tm-farbtn:hover svg { transform: translateY(2px); }
.tm-farbtn:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .tm-farbox .tm-farclip { transition: none; } }
@media print { .tm-farbox .tm-farclip { max-height: none !important; overflow: visible; -webkit-mask-image: none; mask-image: none; } .tm-farmore { display: none !important; } }
/* on a phone the six far places sit in two columns (arrow, the name and the minutes under it) instead of one long list */
@media (max-width: 560px) {
  .tm-far:not(.tm-near) { display: grid; grid-template-columns: 1fr 1fr; justify-items: start; gap: 0 var(--s2); }
  .tm-far:not(.tm-near) .tm-far-h { grid-column: 1 / -1; justify-self: center; }
  .tm-far:not(.tm-near) .tm-far-i { min-height: 44px; }
  .tm-far:not(.tm-near) .tm-far-t { display: flex; flex-direction: column; line-height: 1.3; }
  .tm-far:not(.tm-near) .tm-far-m { font-size: var(--fs-micro); }
}
/* the compass: the map itself turns. A button (and, without a sensor, two arrows) sits under the map. */
.tm-cmp { display: flex; flex-direction: column; align-items: center; gap: var(--s1); margin: var(--s3) 0 0; }
.tm-crow { display: flex; align-items: center; justify-content: center; gap: var(--s1); }
/* the compass buttons ARE the header's glass buttons (.lv-glass-btn--light, assets/glass.css: the same material, border, blur, hover and focus); only the shape differs: a pill when it carries the words */
.tm-cmp .tm-cbtn { width: auto; gap: var(--s1); padding: 0 var(--s3); border-radius: 22px; font-family: var(--font); font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; }
.tm-cmp .tm-cturn { display: none; }
.tm-cmp.is-manual .tm-cturn { display: inline-flex; }
/* on: still glass, tinted olive, the words and the icon in olive */
.tm-cmp .tm-cbtn[aria-expanded="true"] { background: var(--sage-10); border-color: var(--sage-dk); color: var(--sage-dk); }
.tm-cmp .tm-cbtn[aria-expanded="true"]:hover { background: var(--sage-20); }
.tm .tm-cbtn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tm .tm-cturn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-chint { margin: 0; max-width: 34ch; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-55); text-align: center; text-wrap: balance; }
.tm-chint:empty { display: none; }
/* the list of what lies ahead is for screen readers (the labels on the map are for everyone else) */
.tm-caim { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* while the compass is on: the map turns, the ring with N E S W shows, the beam, the scale and the heading stay put; the labels of the towns give way to the labels of what lies ahead */
.tm-bz, .tm-hud { display: none; }
.tm.is-rot .tm-bz, .tm.is-rot .tm-hud { display: block; }
.tm.is-rot .tm-north { display: none; }
.tm-pt text, .tm-pt .tm-lead, .tm-rl, .tm-hn { transition: opacity var(--t-base) var(--ez-alt); }
.tm.is-rot .tm-pt text, .tm.is-rot .tm-pt .tm-lead, .tm.is-rot .tm-rl, .tm.is-rot .tm-hn { opacity: 0; pointer-events: none; }
.tm-bzr { fill: none; stroke: var(--border-md); stroke-width: 1; }
.tm-tick { stroke: var(--ink-40); stroke-width: 1; }
.tm-tick--b { stroke: var(--ink-70); stroke-width: 1.5; }
.tm-cl { font-family: var(--font); font-size: 13px; font-weight: var(--w-med); fill: var(--ink-70); }
.tm-cl--n { font-weight: var(--w-bold); fill: var(--ink); }
.tm-hud { pointer-events: none; }
.tm-wedge { fill: var(--sage-20); }
.tm-sight { stroke: var(--sage-dk); stroke-width: 1.25; stroke-linecap: round; }
.tm-lub { fill: var(--sage-dk); }
.tm-sc { font-family: var(--font); font-size: 9px; font-weight: var(--w-med); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-55); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.tm-hd-t { font-family: var(--font); font-size: 16px; font-weight: var(--w-med); fill: var(--ink); font-variant-numeric: tabular-nums; }
.tm-hd-d { font-weight: var(--w-light); fill: var(--ink-70); }
.tm-fl { pointer-events: auto; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tm-fl-n, .tm-fl-m { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.tm-fl-ring { fill: none; stroke: var(--sage-dk); stroke-width: 1.5; }
.tm-fl-ch { fill: var(--sage-dk); }
.tm-fl-lead { stroke: var(--ink-40); stroke-width: 0.75; fill: none; }
.tm-fl:hover .tm-fl-n { fill: var(--sage-dk); text-decoration: underline; }
.tm-pt.is-aim .tm-dot { transform: scale(1.6); }
@media (prefers-reduced-motion: reduce) { .tm-cbtn, .tm-cturn, .tm-pt text, .tm-pt .tm-lead, .tm-rl, .tm-hn { transition: none; } }