/* area scene (area.js): the map large on the left, heading, list and the far line on the right; on phones heading, map,
   list in two columns. Map styles follow the case presentation (site-wittekind styles.css, .map) */
.scene-area { background: var(--paper); }
.ar { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: auto auto auto;
  grid-template-areas: "map head" "map list" "map tail"; column-gap: 44px; row-gap: 18px; align-content: center;
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--header) + 24px) var(--gutter) 24px; }
.ar-head { grid-area: head; }
.ar-title { font: 800 var(--fs-h2, clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem))/1.08 var(--sans); letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
:lang(ka) .ar-title, :lang(th) .ar-title { line-height: 1.18; letter-spacing: 0; }
.ar-text { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ar-map { grid-area: map; align-self: center; justify-self: stretch; position: relative; width: 100%; max-height: 100%; aspect-ratio: 1840 / 1280; background: #fff;
  border: 1px solid var(--line); overflow: hidden;
  box-shadow: var(--sh-2, 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30)); }
.ar-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.ar-it { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--line);
  color: var(--soft); transition: color .3s, background .3s; }
.ar-it i { width: 14px; height: 14px; border-radius: 50%; opacity: .35; transition: opacity .3s, transform .3s; }
.ar-lab { display: grid; min-width: 0; }
.ar-lab b { font: 700 1.0625rem/1.25 var(--sans); }
.ar-lab small { font-size: .8125rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-min { font: 800 1.25rem/1 var(--sans); white-space: nowrap; }
.ar-it.is-on { color: var(--ink); }
.ar-it.is-on i { opacity: 1; }
.ar-it.is-cur { background: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.ar-it.is-cur i { transform: scale(1.25); }
.ar-it.is-cur .ar-min { color: var(--blue); }
.ar-tail { grid-area: tail; }
.ar-far { margin: 0; font: 700 1rem/1.4 var(--sans); color: var(--soft); transition: color .3s; }
.ar-far.is-on { color: var(--ink); }
.ar-src { margin: 8px 0 0; font-size: .75rem; color: var(--soft); }

/* the map's own drawing */
.ar-map .rd { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ar-map .rd.r1 { stroke-width: 15; stroke: #B7C1CF; }
.ar-map .rd.r2 { stroke-width: 11; stroke: #C5CEDA; }
.ar-map .rd.r3 { stroke-width: 6.5; stroke: #D3DAE3; }
.ar-map .rd.r4 { stroke-width: 3; stroke: #DEE3EA; }
.ar-map .rd.fp { stroke-width: 2; stroke: #CFD9C8; }
.ar-map .rail { fill: none; stroke: #8E98A8; stroke-width: 3.5; stroke-dasharray: 14 10; }
.ar-map .gr { fill: #E6EEDF; stroke: none; }
.ar-map .wa { fill: #DCE8F4; stroke: none; }
.ar-map .wl { fill: none; stroke: #BFD3EA; stroke-width: 5; }
.ar-map .bd { fill: #E3E7ED; }
.ar-map .ring { fill: none; stroke: var(--blue); stroke-width: 2.4; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ar-map .ringl { font: 500 30px var(--mono); fill: var(--blue); letter-spacing: 1px; opacity: 0; }
.ar-map .sname { font: 500 24px var(--sans); fill: #6F7B8D; letter-spacing: .5px; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.ar-map .sname.hs { font-weight: 700; fill: var(--ink); font-size: 27px; }
.ar-map .poi { opacity: 0; }
.ar-map .poi circle { stroke: #fff; stroke-width: 4; transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.ar-map .poi.ar-near circle { transform: scale(1.7); }
.ar-map .rt { display: none; }
.ar-map .rt.show { display: inline; }
.ar-map .rt .rl { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ar-map .rt .rr { display: none; }
.ar-map .home > circle:not(.pulse) { fill: var(--blue); stroke: #fff; stroke-width: 4; }
.ar-map .home .pulse { fill: none; stroke: var(--blue); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: ar-pulse 2s ease-out infinite; }
@keyframes ar-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.ar-map .home text { font: 700 34px var(--sans); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 8px; stroke-linejoin: round; }

/* phones: heading, the map across, the list in two columns, the far line */
.ar.is-m { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "head" "map" "list" "tail";
  row-gap: 12px; align-content: start; padding: calc(var(--header) + 12px) 16px 16px; }
.ar.is-m .ar-text { margin-top: 6px; font-size: .9375rem; }
.ar.is-m .ar-map { aspect-ratio: 1.15; }
.ar.is-m .ar-map svg { left: -18%; width: 136%; }
.ar.is-m .ar-list { grid-template-columns: 1fr 1fr; column-gap: 10px; gap: 0 10px; }
.ar.is-m .ar-it { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 7px; padding: 7px 6px; }
.ar.is-m .ar-it i { width: 10px; height: 10px; }
.ar.is-m .ar-lab b { font-size: .9375rem; }
.ar.is-m .ar-lab small { display: none; }
.ar.is-m .ar-min { font-size: 1rem; }
.ar.is-m .ar-far { font-size: .9375rem; }
/* the map is drawn at about 0.19 on a 390 px phone: what is read on it (the rings and the house) gets 12 px on screen;
   the street names stay small, as the background of an overview map (larger, they no longer fit along their streets) */
.ar.is-m .ar-map .ringl { font-size: 64px; letter-spacing: 2px; }
.ar.is-m .ar-map .home text { font-size: 64px; stroke-width: 12px; }

.v2-still .scene-area { height: auto; overflow: visible; }
.v2-still .scene-area .scene-stage { display: none; }
.v2-still .scene-area .scene-text { display: block; padding: clamp(40px, 6vw, 80px) 0; }