/* /thenandnow/ — Then & Now (Macclesfield, Bollington, Prestbury). A Lime Fresh community project, so it uses the studio's own fonts and tokens,
   with an old-map paper tone around the map. Leaflet's own CSS loads from /thenandnow/leaflet/. */

.tn-hero { padding-bottom: clamp(20px, 3vw, 32px); }
.tn-hero h1 { max-width: none; }

/* the towns: each is its own page */
.tn-towns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1.1rem; font-size: .95rem; }
.tn-towns span { color: var(--muted, #5b665f); margin-right: 2px; }
.tn-towns a { padding: .42rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .2s, background .2s; }
.tn-towns a:hover { border-color: var(--ink); }
.tn-towns a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper, #fff); }

.tn-app { --sepia: #efe7d4; --sepia-ink: #3b3226; --pin: #8a3b1e; --pin-lost: #6b6256;
  position: relative; margin-inline: auto; max-width: 1400px; padding-inline: clamp(0px, 2vw, 24px);
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "ctrl ctrl" "map side"; column-gap: 16px; }
.tn-map { grid-area: map; height: clamp(440px, 74svh, 780px); border-radius: clamp(0px, 1.4vw, 18px); overflow: hidden; background: var(--sepia);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); font-family: var(--f-body); }
.tn-map:empty::before { content: "The map needs JavaScript. All ten stops are listed below."; display: grid; place-items: center; height: 100%; color: var(--sepia-ink); }
.tn-map .leaflet-tile-pane { filter: saturate(.9); }
.tn-map .leaflet-control-attribution { font-size: 11px; background: rgba(255, 255, 255, .8); }
.tn-map .leaflet-control-zoom a { color: var(--ink); }
.leaflet-container { font-family: var(--f-body); }

/* numbered pins: circles with the stop number; lost places are dashed */
.tn-pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pin); color: #fff8ec;
  font: 700 .95rem/1 var(--f-display); box-shadow: 0 0 0 3px #fff8ec, 0 6px 14px rgba(40, 20, 10, .35); transition: transform .2s; }
.tn-pin--lost { background: #fff8ec; color: var(--pin-lost); box-shadow: 0 0 0 3px var(--pin-lost), 0 6px 14px rgba(40, 20, 10, .25); outline: 2px dashed #fff8ec; outline-offset: 3px; }
.leaflet-marker-icon:hover .tn-pin, .leaflet-marker-icon:focus-visible .tn-pin { transform: scale(1.15); }
.leaflet-marker-icon.is-on .tn-pin { transform: scale(1.25); background: var(--ink); color: var(--green); box-shadow: 0 0 0 3px var(--green), 0 8px 18px rgba(0, 0, 0, .35); }
.leaflet-marker-icon:focus-visible { outline: none; }
.tn-me { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(26, 115, 232, .25); }

/* swipe divider */
.tn-div { position: absolute; z-index: 450; top: 0; bottom: 0; width: 0; pointer-events: none; }
.tn-div::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff8ec; box-shadow: 0 0 10px rgba(0, 0, 0, .4); }
.tn-div button { pointer-events: auto; position: absolute; top: 50%; left: 0; translate: -50% -50%; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: #fff8ec; color: var(--sepia-ink); font: 700 1rem var(--f-display); cursor: ew-resize; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); touch-action: none; }
.tn-div button:focus-visible { outline: 3px solid var(--green); }
.tn-div__l, .tn-div__r { position: absolute; top: 14px; padding: .25rem .6rem; border-radius: 999px; background: rgba(20, 20, 15, .72); color: #fff; font: 500 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tn-div__l { right: 12px; } .tn-div__r { left: 12px; }

/* controls float over the bottom of the map on wide screens */
/* controls: a bar above the map, so nothing covers the pins */
.tn-ctrl { grid-area: ctrl; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "modes time tools"; gap: 10px 20px; align-items: center;
  margin-bottom: 14px; padding: 12px 16px 10px; border-radius: 18px; background: #fffaf0; box-shadow: 0 0 0 1px rgba(60, 40, 10, .12); color: var(--sepia-ink); }
.tn-modes { grid-area: modes; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(60, 40, 10, .08); }
.tn-modes button, .tn-pair button { min-height: 34px; padding: 0 .9rem; border: 0; border-radius: 999px; background: none; color: inherit; font: 600 .86rem var(--f-body); cursor: pointer; }
.tn-modes button[aria-checked="true"], .tn-pair button[aria-pressed="true"] { background: var(--sepia-ink); color: #fff8ec; }
.tn-tools { grid-area: tools; display: flex; gap: 8px; justify-content: flex-end; }
.tn-time, .tn-pair { grid-area: time; }
.tn-app [hidden] { display: none !important; }
.tn-pair { display: flex; align-items: center; gap: 6px; font: 500 .8rem var(--f-mono); }
.tn-pair span:last-child { margin-left: auto; }
/* the three maps: one button each */
.tn-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(60, 40, 10, .08); }
.tn-time button { display: grid; justify-items: center; gap: 1px; padding: 7px 8px 6px; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.tn-time button b { font: 700 1.15rem/1.1 var(--f-display); letter-spacing: -.01em; }
.tn-time button small { font: 500 .62rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.tn-time button:hover { background: rgba(60, 40, 10, .07); }
.tn-time button[aria-checked="true"] { background: var(--pin); color: #fff8ec; }
.tn-time button[aria-checked="true"] small { opacity: .85; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 .95rem; border-radius: 999px; border: 1px solid rgba(60, 40, 10, .2);
  background: #fffaf0; color: var(--sepia-ink); font: 600 .86rem var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.tn-btn:hover { border-color: var(--sepia-ink); }
.tn-btn[aria-pressed="true"] { background: var(--sepia-ink); color: #fff8ec; }
.tn-btn--go { background: var(--pin); border-color: var(--pin); color: #fff8ec; }
.tn-btn:focus-visible, .tn-modes button:focus-visible, .tn-time button:focus-visible, .tn-pair button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* the stop card sits over the left of the map on wide screens */
/* the side column beside the map: the list of stops, or the open stop's card */
.tn-side { grid-area: side; height: clamp(440px, 74svh, 780px); overflow: auto; padding: 22px 22px 18px; border-radius: clamp(0px, 1.4vw, 18px);
  background: #fffaf0; color: var(--sepia-ink); box-shadow: 0 0 0 1px rgba(60, 40, 10, .12), var(--shadow-sm); }
.tn-card { position: relative; }
.tn-intro h2 { margin: 0 0 .4rem; font: 700 1.5rem/1.1 var(--f-display); letter-spacing: -.02em; }
.tn-intro > p { margin: 0 0 1rem; font-size: .95rem; }
.tn-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tn-pick button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: 600 .98rem/1.2 var(--f-body); text-align: left; cursor: pointer; }
.tn-pick button:hover, .tn-pick button:focus-visible { background: rgba(60, 40, 10, .07); outline: none; }
.tn-pick small { display: block; margin-top: 2px; font: 500 .7rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.tn-pick__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pin); color: #fff8ec; font: 700 .85rem var(--f-display); }
.tn-pick__n--lost { background: #fff8ec; color: var(--pin-lost); box-shadow: inset 0 0 0 2px var(--pin-lost); }
.tn-card__x { position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(60, 40, 10, .08); color: inherit; font-size: 1.3rem; cursor: pointer; }
.tn-card__n { margin: 0 0 .35rem; font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pin); }
.tn-card__h { margin: 0 2.4rem .5rem 0; font: 700 1.6rem/1.08 var(--f-display); letter-spacing: -.02em; }
.tn-card__lost { display: inline-block; margin: 0 0 .6rem; padding: .2rem .55rem; border-radius: 6px; border: 1.5px dashed var(--pin-lost); color: var(--pin-lost); font: 500 .74rem var(--f-mono); }
.tn-card__body p { margin: 0 0 .7rem; line-height: 1.55; font-size: .98rem; }
.tn-card__body b { color: var(--pin); }
.tn-card__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .9rem; }
.tn-card__nav .tn-btn--go { margin-left: auto; }
.tn-msg { margin: 0 0 12px; padding: .7rem .9rem; border-radius: 12px; background: var(--sepia-ink); color: #fff8ec; font-size: .9rem; }

/* the list of stops (also the no-JavaScript version) */
.tn-walknote { max-width: 62ch; color: var(--ink-2); margin: 14px 0 34px; }
.tn-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tn-stop { padding: 22px 24px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 100px; }
.tn-stop--lost { box-shadow: inset 0 0 0 1.5px var(--line); background: repeating-linear-gradient(135deg, transparent 0 14px, var(--line-2) 14px 15px), var(--card); }
.tn-stop__k { margin: 0 0 .35rem; font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }
.tn-stop h3 { margin: 0 0 .6rem; font-size: 1.35rem; }
.tn-stop p { margin: 0 0 .6rem; color: var(--ink-2); }
.tn-stop strong { color: var(--ink); }
.tn-stop__links { font-size: .9rem; }
.tn-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 60px; align-items: start; }
.tn-two h2 { margin: 14px 0 16px; }
.tn-two p { color: var(--ink-2); }
.tn-about { padding: 24px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tn-about h3 { margin: 0 0 .7rem; }
.tn-credits { font-size: .86rem; }

@media (max-width: 900px) {
  .tn-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctrl" "map" "side"; padding-inline: 0; gap: 0; }
  .tn-map { height: 62svh; border-radius: 0; }
  .tn-ctrl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "modes" "time" "tools"; margin: 0 16px 12px; }
  .tn-tools { justify-content: flex-start; }
  .tn-modes { justify-self: start; }
  .tn-side { height: auto; max-height: none; margin: 12px 16px 0; overflow: visible; }
  .tn-side { scroll-margin-top: 90px; }
  .tn-stops, .tn-two { grid-template-columns: minmax(0, 1fr); }
}

/* which map you're looking at, top right of the map; pops when it changes */
.tn-era { position: absolute; z-index: 460; top: 14px; right: 14px; display: grid; justify-items: end; gap: 2px; padding: 8px 12px 9px; border-radius: 12px;
  background: rgba(20, 20, 15, .78); color: #fff8ec; pointer-events: none; text-align: right; }
.tn-era b { font: 700 1.5rem/1 var(--f-display); letter-spacing: -.02em; }
.tn-era span { font: 500 .66rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.tn-era.is-pop { animation: tn-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tn-pop { 0% { transform: scale(.85); opacity: .4; } 100% { transform: none; opacity: 1; } }
.tn-soft { position: absolute; z-index: 460; top: 82px; right: 14px; max-width: 240px; margin: 0; padding: 7px 10px; border-radius: 10px;
  background: #fffaf0; color: var(--sepia-ink); font-size: .8rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tn-era.is-pop { animation: none; } }

/* old photos (where a free one exists) and the "send one in" prompt */
.tn-ph { margin: 0 0 .9rem; }
.tn-ph img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(60, 40, 10, .15); filter: sepia(.08); }
.tn-ph figcaption { margin-top: .45rem; font-size: .85rem; line-height: 1.45; }
.tn-ph figcaption a { display: block; margin-top: .15rem; font: 500 .68rem var(--f-mono); letter-spacing: .03em; color: inherit; opacity: .7; }
.tn-ask { margin: .4rem 0 0 !important; padding: .6rem .75rem; border-radius: 10px; border: 1.5px dashed rgba(60, 40, 10, .25); font-size: .88rem !important; }
.tn-ask a { font-weight: 700; color: var(--pin); }
.tn-stop .tn-ph { max-width: 460px; }

/* how to move the map: a pill on the map until first use, and a line in the side panel */
.tn-hint { position: absolute; z-index: 460; left: 50%; bottom: 34px; translate: -50% 0; margin: 0; padding: .55rem 1rem; border-radius: 999px;
  background: rgba(20, 20, 15, .78); color: #fff8ec; font-size: .88rem; white-space: nowrap; pointer-events: none; transition: opacity .5s; }
.tn-hint b { color: #ffd9a8; font-weight: 600; }
.tn-hint.is-gone { opacity: 0; }
.tn-howto { margin: -.4rem 0 1rem !important; padding: .55rem .75rem; border-radius: 10px; background: rgba(60, 40, 10, .06); font-size: .88rem !important; }
.tn-howto--touch { display: none; }
@media (pointer: coarse) { .tn-howto--touch { display: inline; } .tn-howto--mouse { display: none; } }