/* The planned town's page (world/town-page.mjs): what it adds to world/world.css. The palette is
   world/base.css's: paper, ink, the warm of the lamps. */

/* ---------------------------------------------------------------- the floating labels (world/labels.mjs) */
.town-page #labels { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.town-page .label-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.town-page .label-leaders line { stroke: #6b4518; stroke-width: 1; }
.town-page .label-leaders circle { fill: #6b4518; stroke: rgba(244, 240, 231, 0.9); stroke-width: 1; }
.town-page .label-layer { position: absolute; inset: 0; }
/* the drawing's cursor: one owner, world/labels.mjs, once a frame (data-cursor): a hand over what a click goes to, the
   grabbing hand while the view is dragged, else the arrow; over any inline cursor another hand sets */
.world-page.town-page #c[data-cursor="default"] { cursor: default !important; }
.world-page.town-page #c[data-cursor="pointer"] { cursor: pointer !important; }
.world-page.town-page #c[data-cursor="grabbing"] { cursor: grabbing !important; }
.town-page .label {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; visibility: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0.05rem 0.3rem 0.1rem; border: 0; margin: 0; font: inherit; text-align: left; white-space: nowrap;
  color: var(--ink); background: rgba(244, 240, 231, 0.8); border-radius: 1px;
  will-change: transform, opacity; transition: background 0.2s ease;
}
.town-page .label .label-text { font-size: 0.8rem; line-height: 1.2; font-style: italic; letter-spacing: 0.005em; }
.town-page .label .label-ref {
  display: none; font-size: 0.64rem; line-height: 1.3; letter-spacing: 0.04em;
  color: #7a4a12; font-variant-numeric: lining-nums;
}
.town-page .label:hover, .town-page .label:focus-visible { background: rgba(244, 240, 231, 0.96); outline: none; z-index: 3; }
.town-page .label:hover .label-ref, .town-page .label:focus-visible .label-ref { display: block; }
/* a detail at rest: a chip at its anchor, its pattern's number in the house serif's lining figures, translucent (paper
   by day, a dark glass of the ink-blue by night, cross-faded through dusk: world/labels.mjs sets --chip-* from the
   hour), a grain of the paper in it. Hovered, lit from its row, or its page open, the chip itself opens out in place,
   wider and taller, to hold its label and its pattern's name beside the number: one shape, over the others */
.town-page .loupe {
  all: unset; box-sizing: border-box; position: absolute; left: 0; top: 0; height: 21px; padding: 0 0.44rem;
  display: flex; align-items: center; overflow: hidden; border-radius: 10.5px; line-height: 1;
  font-family: "EB Garamond", Georgia, serif; line-height: 1; white-space: nowrap;
  color: var(--chip-fg, #231f1b); background: var(--chip-bg, rgba(246, 241, 230, 0.7)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23g)'/%3E%3C/svg%3E");
  border: 0.5px solid var(--chip-border, rgba(35, 31, 27, 0.35)); box-shadow: var(--chip-shadow, 0 1px 2px rgba(35, 31, 27, 0.14));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  translate: -50% -50%;
  cursor: pointer; pointer-events: auto; visibility: hidden; z-index: 4; will-change: transform, opacity;
  transition: width 180ms ease, height 180ms ease, border-radius 180ms ease, background-color 180ms ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.town-page .loupe .chip-n { flex: none; font-size: 0.8rem; line-height: 1; letter-spacing: 0.03em; font-variant-numeric: lining-nums tabular-nums; }
/* (the figures centred in the pill by their own height: cap to baseline, where the browser can trim the text box;
   else a measured nudge up, EB Garamond's ascent and descent leaving lining figures low in a line box) */
.town-page .loupe .chip-n, .town-page .loupe .chip-label, .town-page .loupe .chip-name { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .town-page .loupe .chip-n, .town-page .loupe .chip-more { position: relative; top: var(--chip-nudge, -0.06em); }
}
.town-page .loupe .chip-more { flex: none; display: flex; flex-direction: column; gap: 0.3rem; margin-left: 0.5rem; line-height: 1; opacity: 0; transition: opacity 140ms ease; }
.town-page .loupe .chip-label { font-size: 0.82rem; font-style: italic; }
.town-page .loupe .chip-name { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--chip-sub, #6b4518); }
.town-page .loupe.open { z-index: 5; border-radius: 12px; background-color: var(--chip-bg-open, rgba(246, 241, 230, 0.86)); }
.town-page .loupe .chip-n, .town-page .loupe .chip-more { text-shadow: 0 0 2px var(--chip-halo, rgba(246, 241, 230, 0.55)); }
.town-page .loupe.open .chip-more { opacity: 1; transition-delay: 60ms; }
/* (the chip nearest the pointer, the one whose row is hovered or page open, and the one hovered: the lamplight as an accent,
   its edge and a soft glow) */
.town-page .loupe.near, .town-page .loupe.focus { border-color: rgba(214, 160, 60, 0.9); box-shadow: var(--chip-shadow, 0 1px 2px rgba(35, 31, 27, 0.14)), 0 0 7px 1px rgba(244, 196, 90, 0.4); }
.town-page .loupe:hover, .town-page .loupe:focus-visible { border-color: #d6a03c; box-shadow: var(--chip-shadow, 0 1px 2px rgba(35, 31, 27, 0.14)), 0 0 10px 2px rgba(244, 196, 90, 0.5); outline: none; }
.town-page .label.detail.open { z-index: 3; }
.town-page .label.detail.open .label-ref { display: block; }
.town-page .label.scene { background: transparent; }
.town-page .label.scene .label-text {
  font-style: normal; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper);
}
.town-page .label.scene .label-text::after { content: ' ›'; letter-spacing: 0; }
.town-page .label.scene:hover .label-text { color: var(--ink); }
.town-page .label.zone { background: rgba(244, 240, 231, 0.82); padding: 0 0.45rem 0.08rem; border: 1px solid rgba(216, 208, 194, 0.9); }
.town-page .label.zone .label-text {
  font-style: normal; font-size: 1.05rem; letter-spacing: 0.08em; font-variant-caps: all-small-caps; color: var(--ink);
}
.town-page .label.zone.lit { background: rgba(243, 223, 179, 0.92); border-color: var(--warm); }
.town-page .label.zone.lit .label-text { color: #7a4a12; }


.town-page #index .scene-link { font-size: 0.86rem; padding: 0.2rem 0; }
.town-page #index .scene-link.sparse { color: var(--ink-soft); }
.town-page #index li.here .scene-link { color: #754e21; }
.town-page #index section.district ol { margin-left: 0.1rem; }

/* ---------------------------------------------------------------- the hour, at a view */
.town-page #hour-box { display: flex; align-items: center; gap: 0.35rem; }
.town-page #hour-box[hidden] { display: none; }
.town-page #hour-box .sun, .town-page #hour-box .moon { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.town-page #hour-box .sun { background: var(--warm); box-shadow: 0 0 0.3em rgba(217, 154, 59, 0.6); }
.town-page #hour-box .moon { background: transparent; box-shadow: inset -0.16rem 0 0 0 var(--ink-soft); }
.town-page #hour {
  -webkit-appearance: none; appearance: none; width: 6.5rem; height: 1rem; background: transparent; cursor: pointer; margin: 0;
}
.town-page #hour::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--warm-soft), var(--warm) 55%, var(--ink-soft)); }
.town-page #hour::-moz-range-track { height: 1px; background: linear-gradient(90deg, var(--warm-soft), var(--warm) 55%, var(--ink-soft)); }
.town-page #hour::-webkit-slider-thumb { -webkit-appearance: none; width: 0.6rem; height: 0.6rem; margin-top: -0.3rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-soft); }
.town-page #hour::-moz-range-thumb { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-soft); }
.town-page #index section.views h2 { color: #7a4a12; }

/* ---------------------------------------------------------------- three parts: the index, the drawing, the panel */
.world-page.town-page { --left: 17rem; --right: 20rem; }
.world-page.town-page #index { width: var(--left); background: var(--paper); border-right: 1px solid var(--rule); }
.world-page.town-page #index.folded { transform: translateX(calc(1.6rem - var(--left))); }
.world-page.town-page #c { left: var(--left); right: var(--right); width: calc(100vw - var(--left) - var(--right)); height: 100vh; height: 100dvh; transition: left 0.5s ease; }
.world-page.town-page.folded #c { left: 1.6rem; width: calc(100vw - 1.6rem - var(--right)); }
.world-page.town-page #corner { right: calc(var(--right) + 1rem); }
.world-page.town-page.render #c { left: 0; right: 0; width: 100vw; }

.town-page #panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--right); box-sizing: border-box; overflow-y: auto; scrollbar-width: thin;
  padding: 1.25rem 1.3rem 1.1rem 1.25rem; display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--rule); font-feature-settings: "lnum" 1, "kern" 1;
  transition: opacity 0.6s ease;
}
.town-page #panel .place-path { margin: 0 0 0.35rem; }
.town-page #panel .place-title { margin: 0; font-size: 1.55rem; line-height: 1.15; font-weight: 400; letter-spacing: 0.01em; }
.town-page #panel .place-note { margin: 0.7rem 0 0.9rem; font-size: 0.93rem; line-height: 1.5; }
.town-page #panel .scene-details { list-style: none; margin: 0 0 0.9rem; padding: 0.35rem 0 0; border-top: 1px solid var(--rule); }
.town-page #panel .scene-details[hidden] { display: none; }
.town-page #panel .scene-details button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
  padding: 0.28rem 0 0.28rem 0.7rem; font-size: 0.84rem; line-height: 1.3; font-style: italic; color: var(--ink); position: relative;
}
.town-page #panel .scene-details button::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.28rem; height: 0.28rem; border-radius: 50%; background: #6b4518; opacity: 0.55; }
.town-page #panel .scene-details .d-ref { font-style: normal; font-size: 0.66rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.town-page #panel .scene-details li.hot button, .town-page #panel .scene-details button:hover, .town-page #panel .scene-details button:focus-visible { color: #754e21; }
.town-page #panel .scene-details li.hot button::before, .town-page #panel .scene-details button:hover::before { opacity: 1; }
.town-page #panel .scene-details button[aria-current] { color: #754e21; }
.town-page #panel .scene-refs { margin: 0 0 0.75rem; font-size: 0.68rem; line-height: 1.55; color: var(--ink-soft); font-variant-numeric: lining-nums; }
.town-page #panel .scene-refs[hidden] { display: none; }
.town-page #panel .controls { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; margin: 0 0 0.9rem; }
.town-page #panel .controls[hidden] { display: none; }
.town-page #panel .controls button {
  appearance: none; font: inherit; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer;
}
.town-page #panel .controls button:hover { border-color: var(--ink-soft); }
.town-page #panel .controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.town-page #panel .controls button:disabled { opacity: 0.45; cursor: default; }
.town-page #panel .controls button.icon-button { border: 0; padding: 0.3rem; width: 1.9rem; height: 1.9rem; }
.town-page #panel .controls button.icon-button svg { width: 1.1rem; height: 1.1rem; }
.town-page #panel #hour-box { margin: 0 0 1rem; }
.town-page #panel #plan-map { display: block; width: 100%; height: 12.5rem; margin-top: auto; cursor: pointer; border: 1px solid var(--rule); background: var(--paper); flex: none; }
.town-page .label.hot { background: rgba(243, 223, 179, 0.95); }
.town-page .label.hot .label-text { color: #754e21; }

/* ---------------------------------------------------------------- narrow: the drawing on top, the panel a drawer under it, the index a menu */
@media (max-width: 899px) {
  .world-page.town-page #c, .world-page.town-page.folded #c { left: 0; right: 0; width: 100vw; top: 0; height: 56vh; height: 56dvh; }
  .world-page.town-page #panel { top: 56vh; top: 56dvh; left: 0; width: auto; border-left: 0; border-top: 1px solid var(--rule); padding: 0.9rem 1rem 1.2rem; }
  .world-page.town-page #panel .place-title { font-size: 1.3rem; }
  .world-page.town-page #panel #plan-map { height: 10rem; margin-top: 0.4rem; }
  .world-page.town-page #panel .scene-details button { min-height: 40px; }
  .world-page.town-page #corner { right: 0.7rem; top: 0.6rem; }
  .world-page.town-page #index { top: 0; bottom: 0; left: 0; right: auto; width: min(20rem, 86vw); height: auto; z-index: 5; padding: 3.2rem 1.1rem 1rem; transform: none; box-shadow: 0 6px 22px rgba(60, 50, 30, 0.12); }
  .world-page.town-page #index.folded { width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; transform: none; }
  .world-page.town-page #index { border-right: 1px solid var(--rule); overflow-y: auto; }
  .world-page.town-page #index #groups { overflow: visible; }
  .world-page.town-page #index.folded header, .world-page.town-page #index.folded #groups { display: none; }
  .world-page.town-page #index #fold, .world-page.town-page #index.folded #fold {
    position: fixed; top: 0.6rem; left: 0.7rem; right: auto; transform: none; width: auto; min-height: 36px; padding: 0 0.8rem; z-index: 6;
    font: inherit; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
    background: rgba(244, 240, 231, 0.94); border: 1px solid var(--rule); border-radius: 2px;
  }
  .town-page .label .label-text { font-size: 0.74rem; }
}

/* ---------------------------------------------------------------- the index: the town, its zones as they lie, their scenes */
.town-page #index .zone { border-top: 1px solid var(--rule); }
.town-page #index .zone.town-top { border-top: 0; margin-top: 0.4rem; }
.town-page #index .zone-head {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: baseline; gap: 0.5rem; padding: 0.42rem 0 0.38rem;
  font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft);
}
.town-page #index .zone-head:hover, .town-page #index .zone.open .zone-head { color: var(--ink); }
.town-page #index .zone-head:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }
.town-page #index .zone-name { flex: 1; }
.town-page #index .town-top.here .zone-name { color: #754e21; }
.town-page #index .bearing { display: inline-block; width: 0.9rem; text-align: center; color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0; transition: transform 0.6s ease; }
.town-page #index .bearing[hidden] { display: none; }
.town-page #index .zone-body { display: none; padding: 0.1rem 0 0.6rem; }
.town-page #index .zone.open .zone-body { display: block; }
.town-page #index .zone-plan { display: block; width: 100%; height: 64px; margin: 0.1rem 0 0.35rem; border: 1px solid var(--rule); background: var(--paper); filter: saturate(0.85); }
.town-page #index .zone-conceit { margin: 0 0 0.45rem; font-size: 0.72rem; line-height: 1.38; font-style: italic; color: var(--ink-soft); }
.town-page #index .zone-scenes { list-style: none; margin: 0; padding: 0; }
.town-page #index .views .zone-scenes { padding-bottom: 0.8rem; }
.town-page #index .views-head { margin: 0.5rem 0 0.3rem; }
.town-page #index .scene-link {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.18rem 0; font-size: 0.8rem; line-height: 1.25; color: var(--ink);
}
.town-page #index .scene-link:focus-visible { outline: 1px solid var(--rule); outline-offset: 1px; }
.town-page #index .thumb {
  flex: none; width: 48px; height: 30px; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-deep);
  filter: saturate(0.35) opacity(0.8); transition: filter 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.town-page #index .thumb.missing { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='60'%3E%3Crect width='96' height='60' fill='%23ece6d9'/%3E%3Cpath d='M18 42L36 26L48 36L62 22L80 42' fill='none' stroke='%23d8d0c2' stroke-width='1.2'/%3E%3C/svg%3E"); }
.town-page #index .scene-link:hover .thumb, .town-page #index li.here .thumb { filter: none; }
.town-page #index li.here .thumb { width: 96px; height: 60px; }
.town-page #index li.here .scene-link { color: #754e21; }
.town-page #index .scene-link:hover { color: #8d6025; }
.town-page #index .scene-link.sparse .scene-name { color: var(--ink-soft); }
.town-page #index li.here::before { display: none; }

/* ---------------------------------------------------------------- the patterns in view: an accordion, and its leaders */
.town-page .focus-leaders { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 4; overflow: visible; }
.town-page .focus-leaders path { fill: none; stroke: #6b4518; stroke-width: 0.9; transition: opacity 0.25s ease; }
.town-page .label.focus { background: rgba(243, 223, 179, 0.95); }
.town-page .label.focus .label-text { color: #754e21; }
.town-page #panel .pattern-rows { margin: 0.9rem 0 0; border-top: 1px solid var(--rule); }
.town-page #panel .pattern-rows[hidden] { display: none; }
.town-page #panel .pattern-row { border-bottom: 1px solid var(--rule); }
.town-page #panel .row-head {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0;
  font-size: 0.86rem; line-height: 1.3; color: var(--ink);
}
.town-page #panel .row-head::after { content: '+'; margin-left: auto; color: var(--ink-faint); font-size: 0.8rem; }
.town-page #panel .pattern-row.open .row-head::after { content: '–'; }
.town-page #panel .row-head:hover, .town-page #panel .pattern-row.open .row-head { color: #754e21; }
.town-page #panel .row-head:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }
.town-page #panel .row-n { min-width: 1.8rem; font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.town-page #panel .row-body { padding: 0 0 0.8rem 2.4rem; }
.town-page #panel .row-body[hidden] { display: none; }
.town-page #panel .row-details { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.town-page #panel .row-details button { all: unset; cursor: pointer; font-size: 0.82rem; font-style: italic; line-height: 1.45; color: var(--ink); }
.town-page #panel .row-details button::before { content: ''; display: inline-block; width: 0.26rem; height: 0.26rem; margin: 0 0.45rem 0.12rem 0; border-radius: 50%; background: #6b4518; }
.town-page #panel .row-details button:hover, .town-page #panel .row-details button[aria-current] { color: #754e21; }
.town-page #panel .row-note { margin: 0 0 0.55rem; font-size: 0.82rem; line-height: 1.45; }
.town-page #panel .row-quote { margin: 0 0 0.7rem; padding: 0 0 0 0.7rem; border-left: 1px solid var(--rule); }
.town-page #panel .row-quote p { margin: 0; font-size: 0.82rem; line-height: 1.45; font-style: italic; color: var(--ink-soft); }
.town-page #panel .row-quote cite { display: block; margin-top: 0.2rem; font-style: normal; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ink-faint); }
.town-page #panel .row-figure[hidden] { display: none; }
.town-page #panel .row-figure .illustration-stage { position: relative; width: 100%; border: 1px solid var(--rule); background: var(--paper); overflow: hidden; }
.town-page #panel .row-figure svg:not(button svg) { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.town-page #panel .row-figure .illustration-controls { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.3rem; font-size: 0.66rem; color: var(--ink-faint); }
.town-page #panel .row-figure .illustration-controls button:not(.icon-button) { font: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.6rem; cursor: pointer; color: var(--ink-soft); }
.town-page #panel .row-figure .illustration-controls button.icon-button { color: var(--ink-soft); }

/* ---------------------------------------------------------------- a toggle as two captioned states */
.town-page #panel .pattern-row[hidden] { display: none; }
.town-page #panel .states { position: relative; display: grid; gap: 0.35rem; margin: 0.1rem 0 0.75rem; padding: 0.5rem 0 0.1rem; border-top: 1px dotted var(--rule); }
.town-page #panel .states[hidden] { display: none; }
.town-page #panel .controls .states { border-top: 0; margin: 0 0 0.6rem; padding-top: 0; }
.town-page #panel .state { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding-right: 1.8rem; color: var(--ink-faint); transition: color 0.3s ease; }
.town-page #panel .state:hover { color: var(--ink-soft); }
.town-page #panel .state.current { color: var(--ink); cursor: default; }
.town-page #panel .state:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }
.town-page #panel .state-title { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.town-page #panel .state.current .state-title { color: #754e21; }
.town-page #panel .state-blurb { display: block; font-size: 0.8rem; line-height: 1.4; font-style: italic; }
.town-page #panel .state { position: relative; }
.town-page #panel .states { grid-template-columns: 1fr auto; column-gap: 0.4rem; }
.town-page #panel .states .state { grid-column: 1; }
.town-page #panel .state-replay { grid-column: 2; align-self: start; }
.town-page #panel button.state-replay.icon-button { width: 1.6rem; height: 1.6rem; padding: 0.2rem; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.town-page #panel button.state-replay.icon-button svg { width: 0.95rem; height: 0.95rem; }

/* ---------------------------------------------------------------- a scene's views, its children in the index */
.town-page #index .scene-views { list-style: none; margin: 0.05rem 0 0.3rem 1.2rem; padding: 0 0 0 0.5rem; border-left: 1px solid var(--rule); display: none; }
.town-page #index li.here > .scene-views, .town-page #index li.within > .scene-views { display: block; }
.town-page #index .scene-views .scene-link { font-size: 0.74rem; font-style: italic; color: var(--ink-soft); }
.town-page #index .scene-views .thumb { width: 36px; height: 22px; }
.town-page #index .scene-views li.here .thumb { width: 72px; height: 45px; }
.town-page #index li.within > .scene-link { color: #754e21; }

/* ---------------------------------------------------------------- slices: strips cut from the places, like panels from a page */
.town-page #index .scene-link { flex-direction: column; align-items: stretch; gap: 0.18rem; padding: 0.3rem 0 0.35rem; }
.town-page #index .thumb.slice, .town-page #index li.here .thumb.slice, .town-page #index .scene-views .thumb.slice, .town-page #index .scene-views li.here .thumb.slice {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: cover; border: 1px solid transparent; background: var(--paper-deep);
  filter: saturate(0.3) contrast(0.92) opacity(0.78); transition: filter 0.35s ease, border-color 0.35s ease;
}
.town-page #index .scene-link:hover .thumb.slice { filter: saturate(0.85) opacity(0.95); }
.town-page #index li.here > .scene-link .thumb.slice { filter: none; border-color: var(--ink); }

.town-page #index .scene-views { margin-left: 0.6rem; }
.town-page #index .scene-views .thumb.slice { aspect-ratio: 6 / 1; }
.town-page #index .zone-slice { margin: 0.1rem 0 0.35rem; }
.town-page #index .zone.open .zone-slice { filter: saturate(0.75); border-color: var(--rule); }

/* ---------------------------------------------------------------- while the town is drawn */
.town-page #loading { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--paper); transition: opacity 1s ease; }
.town-page #loading.gone { opacity: 0; pointer-events: none; }
.town-page #loading .load-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.12; filter: saturate(0.4); animation: load-still 4s ease both; }
.town-page #loading .load-card { position: relative; text-align: center; }
.town-page #loading h1 { margin: 0; font-weight: 400; font-size: 2.2rem; letter-spacing: 0.04em; }
.town-page #loading p { margin: 0.2rem 0 1.1rem; font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.town-page #loading .load-track { display: block; width: 14rem; height: 1px; margin: 0 auto; background: var(--rule); overflow: hidden; }
.town-page #loading .load-line { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0.03); transition: transform 0.2s linear; }
@keyframes load-still { from { opacity: 0; } to { opacity: 0.12; } }
.town-page #drawing-note {
  position: fixed; left: calc(var(--left) + 1rem); bottom: 0.9rem; z-index: 3; font-size: 0.72rem; font-style: italic; color: var(--ink-soft);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; display: flex; align-items: center; gap: 0.4rem;
}
.town-page.folded #drawing-note { left: 2.4rem; }
.town-page #drawing-note.shown { opacity: 0.85; }
.town-page #drawing-note .nib { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: #6b4518; animation: nib 1.1s ease-in-out infinite alternate; }
@keyframes nib { from { opacity: 0.25; } to { opacity: 1; } }
@media (max-width: 899px) { .town-page #drawing-note { left: 0.8rem; top: calc(56vh - 1.8rem); bottom: auto; } }
@media (prefers-reduced-motion: reduce) {
  .town-page #drawing-note .nib, .town-page #loading .load-still { animation: none; }
  .town-page #loading, .town-page #loading .load-line { transition: none; }
}

.town-page #panel .card-figure { position: relative; width: 100%; border: 1px solid var(--rule); background: var(--paper); overflow: hidden; }
.town-page #panel .card-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.town-page #panel .card-caption { margin: 0.3rem 0 0; font-size: 0.72rem; line-height: 1.4; font-style: italic; color: var(--ink-soft); }

/* ---------------------------------------------------------------- ?bare=1: the drawing alone */
.world-page.town-page.bare #ui, .world-page.town-page.bare #labels, .world-page.town-page.bare #drawing-note, .world-page.town-page.bare .focus-leaders { display: none; }
.world-page.town-page.bare #c { left: 0; right: 0; width: 100vw; height: 100vh; }

/* ---------------------------------------------------------------- the two states as radio circles, "or" between */
.town-page #panel .states { row-gap: 0.15rem; }
.town-page #panel .state { padding-left: 1.05rem; }
.town-page #panel .state::before {
  content: ''; position: absolute; left: 0.1rem; top: 0.28rem; width: 0.46rem; height: 0.46rem; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; box-sizing: border-box;
}
.town-page #panel .state.current::before { background: #6b4518; border-color: #6b4518; }
.town-page #panel .state-or { grid-column: 1; padding-left: 0.02rem; font-size: 0.7rem; font-style: italic; color: var(--ink-faint); line-height: 1.1; }

/* ---------------------------------------------------------------- subscenes in the drawing: an outline, small caps, hollow circles */
.town-page .label-leaders rect.sub-region { fill: rgba(244, 240, 231, 0.04); stroke: #6b4518; stroke-width: 0.8; stroke-dasharray: 3 3; opacity: 0.55; transition: opacity 0.4s ease, fill 0.25s ease; }
.town-page .label-leaders rect.sub-region.hot { fill: rgba(243, 223, 179, 0.18); stroke-dasharray: none; }
.town-page .label.sub { flex-direction: row; align-items: center; gap: 0.35rem; background: rgba(244, 240, 231, 0.78); }
.town-page .label.sub .label-text { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-size: 0.86rem; }
.town-page .dot { display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 50%; border: 1px solid #6b4518; box-sizing: border-box; }
.town-page .dot.hollow { background: transparent; }
.town-page .dot.filled { background: #6b4518; }
.town-page .sub-dots { display: inline-flex; gap: 0.18rem; }
/* a pattern lit from the Patterns tab: a small filled dot at each of its details, a paper halo round it; a click goes there */
.town-page .pattern-mark { all: unset; position: absolute; left: 0; top: 0; width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; border-radius: 50%; background: #6b4518; box-shadow: 0 0 0 2px rgba(244, 240, 231, 0.85); cursor: pointer; pointer-events: auto; }
.town-page .pattern-mark:hover, .town-page .pattern-mark:focus-visible { box-shadow: 0 0 0 2px rgba(244, 240, 231, 0.85), 0 0 0 3.5px #6b4518; }
.town-page .pattern-mark[hidden] { display: none; }

/* ---------------------------------------------------------------- the outline: guide lines, and subscenes as a grid of postcards */
.town-page #index .zone-body { margin-left: 0.35rem; padding-left: 0.6rem; border-left: 1px solid var(--rule); }
.town-page #index .zone-scenes > li.level-3 { margin-left: 0.2rem; }
.town-page #index .zone-scenes > li.level-3 > .scene-link .thumb.slice { width: 88%; }
.town-page #index .scene-link .sub-dots { margin-top: 0.12rem; }
.town-page #index ol.sub-scenes { display: none; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.55rem 0.5rem; margin: 0.25rem 0 0.6rem 0.4rem; padding: 0.1rem 0 0 0.6rem; border-left: 1px solid var(--rule); }
.town-page #index li.here > ol.sub-scenes, .town-page #index li.within > ol.sub-scenes { display: grid; }
.town-page #index ol.sub-scenes > li .scene-link { gap: 0.2rem; padding: 0; }
.town-page #index ol.sub-scenes > li .scene-link .thumb { order: 1; }
.town-page #index ol.sub-scenes > li .scene-link .scene-name { order: 2; font-size: 0.72rem; font-style: italic; line-height: 1.25; }
.town-page #index ol.sub-scenes > li .scene-link .sub-dots { order: 3; }
.town-page #index .thumb.tile {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid transparent; background: var(--paper-deep);
  filter: saturate(0.4) opacity(0.82); transition: filter 0.3s ease, border-color 0.3s ease;
}
.town-page #index .scene-link:hover .thumb.tile { filter: saturate(0.9); }
.town-page #index li.here > .scene-link .thumb.tile { filter: none; border-color: var(--ink); }
.town-page #index .thumb.missing { opacity: 0.7; }
.town-page #index ol.sub-scenes .scene-views { display: none !important; }
.town-page #panel .sub-row { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
.town-page #panel .sub-row::after { content: '›' !important; }
.town-page #panel .sub-row .sub-dots { margin-left: 0.4rem; }
.town-page #index .thumb.slice.town-slice { cursor: pointer; margin: 0.2rem 0 0; }
.town-page #index li.here > .scene-link .thumb.tile, .town-page #index ol.sub-scenes li .thumb.tile { width: 100%; height: auto; }

/* ---------------------------------------------------------------- the states are not buttons
   (the world page's `#card .controls button` pill is more specific than `.state`: out-rank it here,
   so the two states read as captions, the one not showing faded) */
.world-page.town-page #panel button.state,
.world-page #card .controls button.state,
.town-page #panel .controls button.state {
  all: unset; box-sizing: border-box; position: relative; display: block; grid-column: 1;
  padding: 0 1.8rem 0 1.05rem; cursor: pointer;
  font: inherit; text-transform: none; letter-spacing: normal;
  color: var(--ink-faint); background: none; border: 0; border-radius: 0;
  transition: color 0.3s ease;
}
.world-page.town-page #panel button.state:hover,
.world-page #card .controls button.state:hover { color: var(--ink-soft); }
.world-page.town-page #panel button.state.current,
.world-page #card .controls button.state.current { color: var(--ink); cursor: default; background: none; }
.world-page #card .controls button.state .state-title,
.town-page #panel button.state .state-title { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.world-page #card .controls button.state .state-blurb,
.town-page #panel button.state .state-blurb { display: block; margin-top: 0.1rem; font-size: 0.8rem; line-height: 1.4; font-style: italic; text-transform: none; letter-spacing: normal; }
.world-page #card .controls button.state.current .state-title,
.town-page #panel button.state.current .state-title { color: #754e21; }
.world-page #card .controls button.state::before,
.town-page #panel button.state::before {
  content: ''; position: absolute; left: 0.1rem; top: 0.3rem; width: 0.46rem; height: 0.46rem; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; box-sizing: border-box;
}
.world-page #card .controls button.state.current::before,
.town-page #panel button.state.current::before { background: #6b4518; border-color: #6b4518; }
.world-page #card .controls button.state:focus-visible,
.town-page #panel button.state:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }

/* ---------------------------------------------------------------- live names, lit parts, zone headers with their slices */
.town-page #panel .live-name { border-bottom: 1px solid rgba(107, 69, 24, 0.35); cursor: pointer; transition: background 0.2s ease; }
.town-page #panel .live-name:hover, .town-page #panel .live-name:focus-visible { background: rgba(243, 223, 179, 0.7); outline: none; }
.town-page #panel .pattern-row.lit .row-head, .town-page #index li.lit > .scene-link { color: #754e21; }
.town-page #index li.lit > .scene-link .thumb { filter: none; }
.town-page .label.sub.lit, .town-page .label.zone.lit { background: rgba(243, 223, 179, 0.95); }
.town-page #index .zone > .zone-slice { display: block; width: 100%; margin: 0.45rem 0 0.1rem; cursor: pointer; aspect-ratio: 5 / 1; }
.town-page #index .zone.here > .zone-slice, .town-page #index .zone.within > .zone-slice { filter: none; border-color: var(--ink); }
.town-page #panel .district-link { cursor: pointer; }

/* ---------------------------------------------------------------- the bird's-eye as the map: polaroids on ink lines */
.town-page #bird-layer { position: fixed; pointer-events: none; z-index: 2; visibility: hidden; opacity: 0; }
.town-page #bird-layer .bird-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.town-page #bird-layer .bird-lines line { stroke: #6b4518; stroke-width: 0.8; }
.town-page #bird-layer .bird-lines circle { fill: #6b4518; }
.town-page #bird-layer .bird-cards { position: absolute; inset: 0; }
.town-page #bird-layer .bird-card { position: absolute; left: 0; top: 0; width: 5rem; pointer-events: auto; cursor: pointer; font: inherit; border: 0; padding: 0; background: none; text-align: left; }
.town-page #bird-layer .bird-card .sub-dots { display: flex; margin-top: 0.15rem; }
.town-page #bird-layer .bird-card.lit { outline: 1px solid #6b4518; outline-offset: 1px; }
.town-page #bird-layer .bird-card .title { font-size: 0.72rem; }
.town-page #index .zone.lit > .zone-slice { filter: none; border-color: var(--ink); }
.town-page #index .zone.lit > .zone-head .zone-name { color: #754e21; }

/* ---------------------------------------------------------------- the views, as stories along the top */
.town-page #index .views-row { margin: 0.2rem 0 0.4rem; }
.town-page #index .stories { list-style: none; display: flex; gap: 0.45rem; margin: 0; padding: 0.15rem 0 0.35rem; overflow-x: auto; scrollbar-width: thin; }
.town-page #index .story { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; width: 3.4rem; }
.town-page #index .story .thumb.story-pic { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-deep); filter: saturate(0.45) opacity(0.85); transition: filter 0.3s ease, border-color 0.3s ease; }
.town-page #index .story:hover .thumb.story-pic { filter: none; }
.town-page #index li.here > .story .thumb.story-pic { filter: none; border-color: var(--ink); }
.town-page #index .story-name { font-size: 0.64rem; line-height: 1.2; font-style: italic; color: var(--ink-soft); text-align: center; }
.town-page #index li.here > .story .story-name { color: #754e21; }
.town-page #index .story:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }

/* ---------------------------------------------------------------- a timeline: an event in time, on a loop */
.town-page #panel .timeline { margin: 0.2rem 0 0.9rem; }
.town-page #panel .tl-row { display: flex; align-items: center; gap: 0.5rem; }
.town-page #panel .tl-line { position: relative; flex: 1; height: 1.1rem; cursor: ew-resize; touch-action: none; }
.town-page #panel .tl-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-soft); }
.town-page #panel .tl-tick { position: absolute; top: calc(50% - 3px); width: 1px; height: 7px; background: var(--ink-soft); }
.town-page #panel .tl-head { position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #6b4518; box-shadow: 0 0 0 2px var(--paper); }
.town-page #panel button.tl-restart.icon-button { width: 1.5rem; height: 1.5rem; padding: 0.2rem; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.town-page #panel .tl-beats { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.town-page #panel .tl-beat { all: unset; cursor: pointer; font-size: 0.76rem; font-style: italic; color: var(--ink-faint); line-height: 1.35; }
.town-page #panel .tl-beats li.past .tl-beat { color: var(--ink-soft); }
.town-page #panel .tl-beats li.past:not(:has(~ li.past)) .tl-beat { color: #754e21; }
.town-page #panel .tl-beats li::before { content: attr(style); display: none; }
.town-page #index .stories .story .thumb.story-pic { width: 3.4rem; height: 6rem; aspect-ratio: auto; }
.town-page #panel .controls .timeline button.tl-beat { all: unset; cursor: pointer; font-size: 0.76rem; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--ink-faint); line-height: 1.35; border: 0; padding: 0; background: none; }
.town-page #panel .controls .timeline .tl-beats li.past button.tl-beat { color: var(--ink-soft); }
.town-page #panel .controls .timeline { width: 100%; }

/* ---------------------------------------------------------------- the title row: the map and the sound beside it */
.town-page #index .title-row { display: flex; align-items: center; gap: 0.35rem; }
.town-page #index .map-button { all: unset; cursor: pointer; width: 1.4rem; height: 1.4rem; margin-left: 0.3rem; color: var(--ink-soft); border-radius: 50%; display: grid; place-items: center; }
.town-page #index .map-button svg { width: 1.05rem; height: 1.05rem; }
.town-page #index .map-button:hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
.town-page #index .map-button:focus-visible { outline: 1px solid var(--ink-soft); outline-offset: 2px; }
.town-page #index .title-row #sound { position: static; margin: 0; }
.town-page #corner:empty { display: none; }

/* ---------------------------------------------------------------- the outline: the town, its regions indented under it, a
   smaller picture at each level down; a region's picture only when it is open or lit (hovered in the drawing) */
.town-page #index .zone.town-top { margin-top: 0.2rem; }
.town-page #index .zone.town-top > .zone-head { padding-bottom: 0.25rem; }
.town-page #index .town-regions { margin: 0.35rem 0 0.8rem 0.35rem; padding-left: 0.65rem; border-left: 1px solid var(--rule); }
.town-page #index .town-regions > .zone:first-child { border-top: 0; }
.town-page #index .town-regions > .zone > .zone-slice { display: none; margin: 0 0 0.35rem; }
.town-page #index .town-regions > .zone.open > .zone-slice, .town-page #index .town-regions > .zone.lit > .zone-slice { display: block; }
.town-page #index .town-regions > .zone.lit > .zone-slice { filter: none; border-color: var(--ink); }
.town-page #index .zone-body { margin-left: 0.2rem; }
.town-page #index .zone-scenes > li.level-3 > .scene-link .thumb.slice { width: 100%; }
.town-page #index .zone-scenes > li.level-3 { margin-left: 0; }

/* ---------------------------------------------------------------- subscenes: portrait tiles, three to a row (two when narrow),
   the italic name beneath in the card's margin, then its circles; the current one in full colour in an ink frame */
.town-page #index ol.sub-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.45rem; margin: 0.3rem 0 0.7rem 0.3rem; padding: 0.1rem 0 0 0.55rem; }
@media (max-width: 899px) { .town-page #index ol.sub-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.town-page #index ol.sub-scenes > li .scene-link { gap: 0.18rem; padding: 0; }
.town-page #index .thumb.tile.portrait, .town-page #index li.here > .scene-link .thumb.tile.portrait, .town-page #index ol.sub-scenes li .thumb.tile.portrait {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%;
  border: 1px solid var(--rule); filter: saturate(0.55) opacity(0.86);
}
.town-page #index .scene-link:hover .thumb.tile.portrait, .town-page #index li.lit > .scene-link .thumb.tile.portrait { filter: saturate(0.9); }
.town-page #index li.here > .scene-link .thumb.tile.portrait { filter: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.town-page #index ol.sub-scenes > li .scene-link .scene-name { font-size: 0.7rem; line-height: 1.2; }
.town-page #index ol.sub-scenes > li .scene-link .sub-dots { gap: 0.14rem; }
.town-page #index ol.sub-scenes .dot { width: 0.36rem; height: 0.36rem; }

/* ---------------------------------------------------------------- a timeline, on one line: ticks with their words on hover,
   the beat playing now faint beside the playhead */
.town-page #panel .timeline { margin: 0.35rem 0 0.8rem; padding-top: 1.1rem; }
.town-page #panel .tl-line { height: 1.2rem; }
.town-page #panel button.tl-tick {
  all: unset; position: absolute; top: calc(50% - 5px); width: 9px; height: 11px; margin-left: -4px; cursor: pointer;
}
.town-page #panel button.tl-tick::before { content: ''; position: absolute; left: 4px; top: 2px; width: 1px; height: 7px; background: var(--ink-soft); }
.town-page #panel button.tl-tick:hover::before, .town-page #panel button.tl-tick:focus-visible::before { background: #6b4518; top: 0; height: 11px; }
.town-page #panel .tl-tip {
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 0.08rem 0.35rem; font-size: 0.72rem; font-style: italic; color: var(--ink); background: var(--paper); border: 0.5px solid var(--ink-soft);
  opacity: 0; transition: opacity 0.15s ease; z-index: 2;
}
.town-page #panel button.tl-tick:hover .tl-tip, .town-page #panel button.tl-tick:focus-visible .tl-tip { opacity: 1; }
.town-page #panel .tl-now {
  position: absolute; bottom: calc(50% + 6px); margin-left: 8px; white-space: nowrap; pointer-events: none;
  font-size: 0.68rem; font-style: italic; color: var(--ink-faint); opacity: 0.8;
}
.town-page #panel .tl-now.flip { transform: translateX(calc(-100% - 16px)); }
.town-page #panel .tl-line:has(button.tl-tick:hover) .tl-now { opacity: 0; }
.town-page #panel .tl-beats { display: none; }

/* ---------------------------------------------------------------- leaders: kept inside the window */
.town-page .focus-leaders { overflow: hidden; }

.town-page #index li.merged-subs > ol.sub-scenes { display: grid; margin-left: 0; padding-left: 0; border-left: 0; }

/* ---------------------------------------------------------------- the town as a small map, at the top of the index: the plan's
   halftone, squeezed to a wide box, the regions' real outlines over it */
.town-page #index .map-box { flex: none; margin: 0.15rem 0 0.5rem; }
.town-page .town-map { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 1px solid var(--rule); background: var(--paper); overflow: hidden; }
.town-page .town-map .tm-plan { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.town-page .town-map.drawn .tm-plan { opacity: 1; }
.town-page .town-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; font-family: inherit; }
.town-page .town-map .tm-zone { fill: #e8a848; fill-opacity: 0; stroke: #3a3027; stroke-width: 0.7; stroke-opacity: 0.35; stroke-linejoin: round; cursor: pointer; outline: none; pointer-events: all; transition: fill-opacity 0.2s ease, stroke-opacity 0.2s ease; }
.town-page .town-map .tm-zone:hover, .town-page .town-map .tm-zone.lit, .town-page .town-map .tm-zone:focus-visible { fill-opacity: 0.26; stroke: #6b4518; stroke-opacity: 0.95; stroke-width: 1.1; }
.town-page .town-map .tm-zone.here { fill: #d99a3b; fill-opacity: 0.4; stroke: var(--ink); stroke-opacity: 0.9; stroke-width: 1.3; }
.town-page .town-map .tm-names { pointer-events: none; }
.town-page .town-map .tm-name {
  font-size: 23px; font-variant-caps: all-small-caps; letter-spacing: 0.06em; text-anchor: middle; dominant-baseline: middle;
  fill: var(--ink-soft); paint-order: stroke; stroke: rgba(244, 240, 231, 0.9); stroke-width: 4.5px; stroke-linejoin: round;
}
.town-page .town-map .tm-name.lit { fill: #754e21; }
.town-page .town-map .tm-name.here { fill: var(--ink); }
/* (the views: only at the town's level, as a grid of portrait tiles, three to a row) */
.town-page #index .views-row { display: none; }
.town-page #index.town-level .views-row { display: block; margin: 0.1rem 0 0.6rem; }
.town-page #index.town-level .stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.45rem; overflow: visible; padding: 0; }
.town-page #index.town-level .stories .story, .town-page #index.town-level .stories .story .thumb.story-pic { width: 100%; }
.town-page #index.town-level .stories .story .thumb.story-pic { height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.town-page #index.town-level .story-name { text-align: left; font-size: 0.7rem; }
/* (the region list: only the open region's outline, under the map) */
.town-page #index .town-regions { margin: 0.2rem 0 0.8rem; padding-left: 0; border-left: 0; }
.town-page #index .town-regions > .zone:not(.open) { display: none; }
.town-page #index .town-regions > .zone.open { border-top: 0; }
.town-page #index .town-regions > .zone > .zone-head .bearing { display: none; }
.town-page #panel .state-only { grid-column: 1; margin-top: 0.1rem; font-size: 0.64rem; font-style: italic; color: var(--ink-faint); letter-spacing: 0.02em; }
.town-page #panel .state-only[hidden] { display: none; }

/* ---------------------------------------------------------------- the right column as a page: breadcrumbs, a directory, a detail's page */
.town-page #panel .place-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.35rem; margin: 0 0 0.45rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.town-page #panel .place-path .crumb { all: unset; cursor: pointer; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.town-page #panel .place-path button.crumb:hover, .town-page #panel .place-path button.crumb:focus-visible { color: var(--ink); border-bottom-color: var(--warm); }
.town-page #panel .place-path .crumb.current { cursor: default; color: var(--ink-faint); }
.town-page #panel .place-path .crumb-sep { color: var(--ink-faint); letter-spacing: 0; }
.town-page #panel .place-note[hidden] { display: none; }
.town-page #panel.detail-page .place-title { font-style: italic; font-size: 1.4rem; }
.town-page #panel .dir-row { border-bottom: 1px solid var(--rule); }
.town-page #panel .dir-entry { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: block; padding: 0.42rem 0 0.4rem; line-height: 1.3; }
.town-page #panel .dir-label { font-style: italic; font-size: 0.9rem; color: var(--ink); }
.town-page #panel .dir-ref { margin-left: 0.5rem; font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: lining-nums; }
.town-page #panel .dir-entry:hover .dir-label, .town-page #panel .dir-entry.lit .dir-label, .town-page #panel .dir-entry:focus-visible .dir-label { color: #754e21; }
.town-page #panel .dir-entry:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }
.town-page #panel .det-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0 0.4rem; border-bottom: 1px solid var(--rule); font-size: 0.82rem; color: var(--ink-soft); }
.town-page #panel .det-head .row-n { min-width: 0; font-size: 0.82rem; color: var(--ink-soft); }
.town-page #panel .det-nav { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.66rem; color: var(--ink-faint); white-space: nowrap; }
.town-page #panel .det-step { all: unset; cursor: pointer; padding: 0 0.25rem; font-size: 1rem; line-height: 1; color: var(--ink-soft); }
.town-page #panel .det-step:hover { color: var(--ink); }
.town-page #panel .det-step[disabled] { opacity: 0.3; cursor: default; }
.town-page #panel .det-body { padding: 0.55rem 0 0.8rem; }
.town-page #panel .det-body .states { border-top: 0; padding-top: 0; }


.town-page #panel .dir-views { margin: 0.7rem 0 0; font-size: 0.74rem; line-height: 1.6; color: var(--ink-soft); }
.town-page #panel .dir-views-head { margin-right: 0.5rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.town-page #panel .dir-view { all: unset; cursor: pointer; font-style: italic; border-bottom: 1px solid var(--rule); margin-right: 0.6rem; }
.town-page #panel .dir-view:hover { color: var(--ink); border-bottom-color: var(--warm); }

/* ---------------------------------------------------------------- the bird's-eye's names: text on a soft halo, no card */
.town-page .label.zone { background: transparent; border: 0; padding: 0 0.2rem; }
.town-page .label.zone .label-text { font-size: 0.98rem; letter-spacing: 0.1em; text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px rgba(244, 240, 231, 0.9); }
.town-page .label.zone.lit { background: transparent; }
.town-page .label.zone.lit .label-text { color: #6b4518; text-shadow: 0 0 3px var(--paper), 0 0 7px var(--paper), 0 0 12px rgba(243, 223, 179, 0.95); }

/* ---------------------------------------------------------------- the region's name under the map, in place of its heading; the tabs */
.town-page #index .map-caption { text-align: center; font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--ink-soft); margin: 0.3rem 0 0.2rem; flex: none; }
.town-page #index .town-regions > .zone > .zone-head, .town-page #index .town-regions > .zone > .zone-slice { display: none !important; }
.town-page #index .browse-tabs { flex: none; display: flex; gap: 1.1rem; margin: 0 0 0.45rem; }
.town-page #index .browse-tab { all: unset; cursor: pointer; font-variant-caps: all-small-caps; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--ink-faint); padding-bottom: 0.1rem; border-bottom: 1px solid transparent; }
.town-page #index .browse-tab[aria-selected="true"] { color: var(--ink); border-bottom: 0.5px solid var(--ink); }
.town-page #index .browse-tab:hover { color: var(--ink-soft); }
.town-page #index .browse-tab:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }
.town-page #index.by-pattern .map-caption, .town-page #index.by-pattern #groups, .town-page #index.by-pattern .region-strip { display: none; }
.town-page #index .patterns-pane { min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.town-page #index .patterns-pane[hidden] { display: none; }

/* ---------------------------------------------------------------- a scene's card in the outline: 4:3, one to a row, its name beneath, then its circles */
.town-page #index .zone-scenes > li > .scene-link { flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 0.35rem 0 0.5rem; }
.town-page #index .zone-scenes > li > .scene-link .thumb.tile.card { order: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); filter: saturate(0.55) opacity(0.88); transition: filter 0.3s ease, border-color 0.3s ease; }
.town-page #index .zone-scenes > li > .scene-link .scene-name { order: 2; }
.town-page #index .zone-scenes > li > .scene-link .sub-dots { order: 3; }
.town-page #index .zone-scenes > li > .scene-link:hover .thumb.tile.card, .town-page #index .zone-scenes > li.lit > .scene-link .thumb.tile.card { filter: saturate(0.9); }
.town-page #index .zone-scenes > li.here > .scene-link .thumb.tile.card, .town-page #index .zone-scenes > li.within > .scene-link .thumb.tile.card { filter: none; border-color: var(--ink); }
.town-page #index .zone-scenes ol.sub-scenes { margin-left: 0.7rem; }

/* ---------------------------------------------------------------- the region's own item: a small square, tight on its thing, and its name */
.town-page #index .region-box { margin: 0.35rem 0 0.2rem; }
.town-page #index .region-item { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.town-page #index .region-item .thumb.tile.icon { display: block; width: 3.6rem; height: 3.6rem; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%; border: 1px solid var(--rule); filter: saturate(0.7); }
.town-page #index .region-item .region-name { font-variant-caps: all-small-caps; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--ink-soft); }
.town-page #index .region-item:hover .region-name, .town-page #index .region-box.here .region-name, .town-page #index .region-box.within .region-name { color: #754e21; }
.town-page #index .region-box.here .thumb.tile.icon { border-color: var(--ink); filter: none; }
.town-page #index .region-item:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }


.town-page #index .region-item .thumb.tile.icon { width: 3.6rem !important; height: 3.6rem !important; aspect-ratio: 1 / 1 !important; object-fit: cover; }

/* ================================================================ the left column as an outline of rows (supersedes the cards and tiles above):
   the regions' strip; under it only the current region's scenes and subscenes, each a small square then its name
   in small caps, indented by level, no rules; at the town's level, the views as rows */
.town-page #index .region-strip { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; margin: 0.15rem 0 0.7rem; }
.town-page #index .strip-item { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1; border: 1px solid transparent; padding: 1px; }
.town-page #index .strip-item img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) opacity(0.85); transition: filter 0.25s ease; }
.town-page #index .strip-item:hover img, .town-page #index .strip-item:focus-visible img, .town-page #index .strip-item.current img { filter: none; }
.town-page #index .strip-item.current { border-color: var(--ink); }
.town-page #index .strip-item:focus-visible { outline: 1px solid var(--rule); outline-offset: 1px; }
.town-page #index .zone-body, .town-page #index .town-regions, .town-page #index ol.sub-scenes, .town-page #index .zone-scenes ol.sub-scenes { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
.town-page #index .zone-body { padding: 0; }
.town-page #index ol.sub-scenes, .town-page #index li.here > ol.sub-scenes, .town-page #index li.within > ol.sub-scenes { display: block !important; grid-template-columns: none; margin: 0 !important; }
.town-page #index ol.sub-scenes > li.here { display: block; grid-column: auto; }
.town-page #index .scene-link.row, .town-page #index .zone-scenes > li > .scene-link.row, .town-page #index ol.sub-scenes > li .scene-link.row {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex !important; flex-direction: row !important; align-items: center; gap: 0.55rem; padding: 0.18rem 0;
}
.town-page #index .scene-link.row .thumb.tile.square { order: 0 !important; flex: none; display: block; width: 32px !important; height: 32px !important; aspect-ratio: 1 !important; object-fit: cover; border: 1px solid transparent; filter: saturate(0.6) opacity(0.9); }
.town-page #index .scene-link.row .scene-name { order: 1 !important; flex: 1; min-width: 0; font-style: normal !important; font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-size: 0.86rem !important; line-height: 1.2; color: var(--ink-soft); }
.town-page #index .scene-link.row .sub-dots { order: 2 !important; flex: none; margin: 0 !important; gap: 0.12rem; }
.town-page #index .scene-link.row .dot { width: 0.3rem; height: 0.3rem; }
/* (the levels by indent, size and ink: scenes, then their subscenes smaller and fainter) */
.town-page #index ol.sub-scenes > li > .scene-link.row { padding-left: 1.2rem; }
.town-page #index ol.sub-scenes > li > .scene-link.row .thumb.tile.square { width: 26px !important; height: 26px !important; }
.town-page #index ol.sub-scenes > li > .scene-link.row .scene-name { font-size: 0.78rem !important; color: var(--ink-faint); }
.town-page #index ol.sub-scenes ol.sub-scenes > li > .scene-link.row { padding-left: 2.4rem; }
.town-page #index .scene-link.row:hover .scene-name, .town-page #index li.lit > .scene-link.row .scene-name { color: var(--ink); }
.town-page #index .scene-link.row:hover .thumb.tile.square { filter: none; }
.town-page #index li.here > .scene-link.row .scene-name, .town-page #index li.within > .scene-link.row .scene-name { color: var(--ink) !important; }
.town-page #index li.here > .scene-link.row .thumb.tile.square { filter: none; border-color: var(--ink); }
.town-page #index .view-rows { list-style: none; margin: 0; padding: 0; }
.town-page #index.town-level .views-row { display: block; }
.town-page #index .map-caption { display: none; }

/* ---------------------------------------------------------------- the map as an inset in the drawing's corner, bottom left, above the
   compass's names (world/minimap.mjs opens it out itself on hover and draws its own frame) */
.town-page .map-inset { position: fixed; z-index: 4; right: calc(var(--right) + 1.3rem); top: 2.3rem; width: 150px; margin: 0; }
.town-page.panel-closed .map-inset { right: 2.7rem; }
@media (max-width: 899px) { .town-page .map-inset { right: 0.7rem; top: 3.4rem; } }
.world-page.town-page.bare .map-inset { display: none; }

/* ---------------------------------------------------------------- the outline's squares, larger: the still, cut square round its focus */
.town-page #index .scene-link.row .thumb.tile.square { width: 72px !important; height: 72px !important; }
.town-page #index ol.sub-scenes > li > .scene-link.row .thumb.tile.square { width: 60px !important; height: 60px !important; }
.town-page #index .scene-link.row { gap: 0.75rem; padding: 0.3rem 0; }
.town-page #index ol.sub-scenes > li > .scene-link.row { padding-left: 1.4rem; }

/* ---------------------------------------------------------------- the regions' strip: drawn emblems in ink, the current one darker and framed */
.town-page #index .strip-item { display: grid; place-items: center; color: var(--ink-faint); padding: 3px; border-radius: 2px; }
.town-page #index .strip-item .region-icon { display: block; width: 100%; height: 100%; max-width: 44px; max-height: 44px; }
.town-page #index .strip-item:hover, .town-page #index .strip-item:focus-visible { color: var(--ink-soft); }
.town-page #index .strip-item.current { color: var(--ink); border-color: var(--ink-soft); }

/* ---------------------------------------------------------------- the right column folds away; the drawing takes the width */
.world-page.town-page #panel { transition: transform 0.45s ease, opacity 0.6s ease; }
.world-page.town-page #c { transition: left 0.5s ease, width 0.45s ease; }
.world-page.town-page.panel-closed #panel { transform: translateX(100%); pointer-events: none; }
.world-page.town-page.panel-closed #c { right: 0; width: calc(100vw - var(--left)); }
.world-page.town-page.folded.panel-closed #c { width: calc(100vw - 1.6rem); }
.world-page.town-page.panel-closed #corner { right: 1rem; }
.town-page .panel-fold { all: unset; cursor: pointer; position: absolute; top: 1.05rem; right: 0.7rem; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; color: var(--ink-faint); border-radius: 50%; }
.town-page .panel-fold:hover, .town-page .panel-fold:focus-visible { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
.town-page #panel .place-path { padding-right: 1.6rem; }
.town-page .panel-tab { all: unset; cursor: pointer; position: fixed; z-index: 5; right: 0; top: 1rem; width: 1.4rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.05rem; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule); border-right: 0; border-radius: 3px 0 0 3px; }
.town-page .panel-tab[hidden] { display: none; }
.town-page .panel-tab:hover, .town-page .panel-tab:focus-visible { color: var(--ink); }
@media (max-width: 899px) { .town-page .panel-fold, .town-page .panel-tab { display: none; } }

/* ---------------------------------------------------------------- the strip's names, as the map's tooltip has them; the region's name over its outline */
.town-page #index .region-strip { position: relative; }
.town-page .strip-tip { position: absolute; z-index: 6; pointer-events: none; white-space: nowrap; padding: 0.12rem 0.45rem; font-size: 0.72rem; font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--ink); background: var(--paper); border: 0.5px solid var(--ink-soft); box-shadow: 0 1px 3px rgba(60, 40, 20, 0.15); transform: translateX(-50%); }
.town-page .strip-tip[hidden] { display: none; }
.town-page #index .outline-head { margin: 0 0 0.35rem; font-size: 0.7rem; font-variant-caps: all-small-caps; letter-spacing: 0.16em; color: var(--ink-faint); }

/* ---------------------------------------------------------------- the drawing's names read: dark ink on a tight paper halo, over water and roofs alike */
.town-page .label.zone .label-text {
  color: var(--ink); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.1em;
  text-shadow: none; -webkit-text-stroke: 0; paint-order: stroke fill;
  text-shadow: 0 0 1px var(--paper), 1px 0 0 var(--paper), -1px 0 0 var(--paper), 0 1px 0 var(--paper), 0 -1px 0 var(--paper), 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper), 0 0 4px rgba(244, 240, 231, 0.95);
}
.town-page .label.zone.lit .label-text { color: #5a3510; }
.town-page .label.sub { background: rgba(244, 240, 231, 0.9); }
.town-page .label.sub .label-text { color: var(--ink); }
.town-page .label.detail { background: rgba(244, 240, 231, 0.9); }
.town-page .label.detail .label-text { color: var(--ink); }
.town-page .label.zone .label-text {
  font-weight: 600;
  text-shadow: 2px 0 0 var(--paper), -2px 0 0 var(--paper), 0 2px 0 var(--paper), 0 -2px 0 var(--paper), 1.5px 1.5px 0 var(--paper), -1.5px -1.5px 0 var(--paper), 1.5px -1.5px 0 var(--paper), -1.5px 1.5px 0 var(--paper), 0 0 5px var(--paper);
}

/* ---------------------------------------------------------------- the outline, strictly regular: one step of indent per depth, one square
   size per depth, the names in a column, the circles in one column at the right */
.town-page #index .scene-link.row .sq { flex: none; display: block; width: 64px; height: 64px; order: 0; }
.town-page #index .scene-link.row .sq .thumb.tile.square { width: 100% !important; height: 100% !important; }
.town-page #index ol.sub-scenes > li > .scene-link.row .sq { width: 48px; height: 48px; }
.town-page #index .scene-link.row, .town-page #index .zone-scenes > li > .scene-link.row { padding: 0.25rem 0 !important; gap: 0.7rem !important; }
.town-page #index ol.sub-scenes > li > .scene-link.row { padding-left: 20px !important; }
.town-page #index ol.sub-scenes ol.sub-scenes > li > .scene-link.row { padding-left: 40px !important; }
.town-page #index .scene-link.row .scene-name { flex: 1 1 auto; }
.town-page #index .scene-link.row .sub-dots { margin-left: auto !important; min-width: 2.2rem; justify-content: flex-end; }
.town-page #index ol.sub-scenes > li > .scene-link.row .scene-name { font-size: 0.8rem !important; }
/* (the region's name the largest in the outline, left; rows spaced, the name clear of its square) */
.town-page #index .outline-head { font-size: 1.05rem; letter-spacing: 0.14em; color: var(--ink); text-align: left; margin: 0.1rem 0 0.6rem; }
.town-page #index .scene-link.row, .town-page #index .zone-scenes > li > .scene-link.row { padding: 5px 0 !important; gap: 12px !important; }
.town-page #index ol.sub-scenes > li > .scene-link.row { padding: 4px 0 4px 20px !important; }
.town-page #index .scene-link.row .sq { overflow: hidden; }
.town-page #index li > .scene-link.row .sq > img.thumb.tile.square { width: 100% !important; height: 100% !important; }
.town-page #loading .load-track { margin-top: 1.1rem; }