/* The Realm (/overview): what is happening now. Its own styles, after site.css. */

/* The row of links to the page's parts (its touch targets are site.css's). */
.realm .jump { margin-bottom: 0.4rem; }

/* ---- The Realm: the herald's proclamation --------------------------------------- */

.proclamation { position: relative; margin: 1.6rem auto 2.4rem; padding: 26px; }
.vine { position: absolute; pointer-events: none; overflow: visible; }
.vine-top, .vine-bottom { left: 24px; right: 24px; height: 22px; width: calc(100% - 48px); }
.vine-top { top: 2px; }
.vine-bottom { bottom: 2px; transform: scaleY(-1); }
.vine-left, .vine-right { top: 24px; bottom: 24px; width: 22px; height: calc(100% - 48px); }
.vine-left { left: 2px; }
.vine-right { right: 2px; transform: scaleX(-1); }
.acanthus { position: absolute; width: 54px; height: 54px; pointer-events: none; }
.acanthus.tl { top: -4px; left: -4px; }
.acanthus.tr { top: -4px; right: -4px; transform: scaleX(-1); }
.acanthus.bl { bottom: -4px; left: -4px; transform: scaleY(-1); }
.acanthus.br { bottom: -4px; right: -4px; transform: scale(-1, -1); }
.crest { position: absolute; top: -30px; left: 50%; width: 68px; height: 68px; transform: translateX(-50%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.parchment {
  position: relative;
  padding: 1.7rem 1.8rem 1.3rem;
  color: var(--ink);
  text-align: center;
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(150, 105, 40, 0.3), transparent 65%);
  border-radius: 4px;
  box-shadow: inset 0 0 34px rgba(120, 80, 20, 0.38);
}
.herald { margin: 0; font: 700 0.95rem var(--plain); letter-spacing: 0.08em; color: #7a5c10; }
.headline { margin: 0.35rem 0 0.2rem; font: 400 clamp(1.3rem, 3.4vw, 2.05rem)/1.3 var(--plain); color: #3b0d10; }
.proclaimed { margin: 0.15rem 0 0.7rem; font-style: italic; color: #5a4632; }
.earlier { margin: 0.6rem auto 0; padding: 0; max-width: 46em; list-style: none; font: 1.05rem/1.4 var(--plain); color: var(--ink-soft); border-top: 1px solid rgba(122, 92, 16, 0.35); }
.earlier li { padding: 0.35rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); }
.earlier .when { margin-left: 0.45rem; font: italic 0.88rem var(--body); color: #6b5a44; }
  margin: 0.85rem auto 0; padding: 0.35rem 1.1rem;
  font: 700 1.02rem var(--times); letter-spacing: 0.02em; color: #3b0d10;
  background: #f7efdc; border: 1px solid #b8872b; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(120, 80, 20, 0.35); cursor: pointer;
}
.proclamation.shimmer .vine, .proclamation.shimmer .acanthus, .proclamation.shimmer .crest { animation: shimmer 1.6s ease-in-out 3; }
@keyframes shimmer {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.75) drop-shadow(0 0 6px #f1d78a); }
}

/* ---- The Realm: the map --------------------------------------------------------- */

.map-frame {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #d9c7a0;
  border: 3px double var(--gold);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
/* A window on the world, its own shape read from the box it is drawn into (map.js measures
   it): landscape once there is room, a taller box on a narrow phone. Dragged to look around,
   zoomed with the wheel. */
.map { position: relative; aspect-ratio: 1 / 1; }
@media (min-width: 560px) { .map { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .map { aspect-ratio: 16 / 10; } }
/* The ground is painted on a canvas beneath the chart (map.js: paint), the chart over it. */
.map .map-ground { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.map svg { position: relative; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
.map svg.dragging { cursor: grabbing; }
/* A touch drag slides the chart and its ground as one picture (map.js: slide), inside the frame. */
.map.panning { overflow: hidden; }
.map.panning svg, .map.panning .map-ground { will-change: transform; }
.map svg:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: -3px; }
.map-waiting { margin: 0; padding: 3rem 1rem; text-align: center; font-style: italic; color: #3d2d1d; }
.map-hover { min-height: 1.6em; margin: 0.5rem 0; text-align: center; font-style: italic; color: #efe3c4; }
.map-zoom { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.map-zoom button {
  min-width: 2.1rem; height: 2.1rem; padding: 0 0.5rem;
  font: 700 0.95rem/1 var(--plain); color: #2b2016; background: #f7efdc;
  border: 1px solid #8a6a3a; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); cursor: pointer;
}
.map-zoom button.map-zoom-word { font-size: 0.82rem; white-space: nowrap; }
.map-zoom button:hover, .map-zoom button:focus-visible { background: #fffaf0; outline: 2px solid var(--focus-ink); outline-offset: 1px; }
.hint { margin: 0 0 0.5rem; text-align: center; font-style: italic; color: var(--faint); }
.map-selected {
  max-width: 826px; margin: 0.6rem auto; padding: 0.8rem 1.1rem;
  color: var(--ink); background: var(--parchment);
  border: 1px solid #b08d3a; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.map-selected-title { display: block; font: 700 1.05rem/1.3 var(--plain); color: #5a1216; }
.map-selected-detail { margin: 0.35rem 0 0; font: 1rem/1.4 var(--plain); }
.map-selected-clear {
  margin-top: 0.6rem; padding: 0.3rem 0.8rem; font: 600 0.88rem/1 var(--plain); color: #2b2016;
  background: #f7efdc; border: 1px solid #8a6a3a; border-radius: 4px; cursor: pointer;
}
.map-selected-clear:hover, .map-selected-clear:focus-visible { background: #fffaf0; outline: 2px solid var(--focus-ink); outline-offset: 1px; }
.selection-ring { fill: none; stroke: #8b2420; stroke-width: 2.4; }
.selection-dot { fill: #8b2420; }
.pennant-pole { stroke: #2b2016; stroke-width: 1; }
.pennant-flag { fill: #6a2c96; stroke: #2b2016; stroke-width: 0.5; }
.story-mark { cursor: pointer; }
.story-mark:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: 2px; }
.story-mark:hover .pennant-flag, .story-mark:focus-visible .pennant-flag { fill: #8b3fc9; }
.heard, .features {
  max-width: 826px; margin: 0.6rem auto 1.2rem; padding: 1rem 1.3rem;
  color: var(--ink); background: var(--parchment);
  border: 1px solid #b08d3a; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.heard-title, .features-title { margin: 0 0 0.5rem; font: 700 1.2rem/1.3 var(--plain); color: #5a1216; }
/* The place chosen on the chart, and the button that lets it go (the administrator's request of
   2026-10-22). */
.heard-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.place-deselect {
  margin: 0 0 0.5rem; padding: 0.3rem 0.8rem; font: 600 0.88rem/1 var(--plain); color: #2b2016;
  background: #f7efdc; border: 1px solid #8a6a3a; border-radius: 4px; cursor: pointer;
}
.place-deselect:hover, .place-deselect:focus-visible { background: #fffaf0; outline: 2px solid var(--focus-ink); outline-offset: 1px; }
.heard-more { margin: 0.4rem 0 0; font-size: 0.9rem; font-style: italic; color: #5a4632; }
/* The Features card: what the record holds of the place chosen, directly under what was heard. */
.features-body { font: 1.02rem/1.45 var(--plain); }
.features-facts { margin: 0; }
.features-facts div { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: 0 1rem; padding: 0.4rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); }
.features-facts dt { font-weight: 700; color: #2a1f14; }
.features-facts dd { margin: 0; }
@media (max-width: 480px) {
  .features-facts div { grid-template-columns: 1fr; }
}
.features-undiscovered { margin: 0.2rem 0; font-style: italic; font-size: 1.1rem; }
.features-lately-title { margin: 0.8rem 0 0.2rem; font: 700 1rem/1.3 var(--plain); color: #5a1216; }
.features-lately { margin: 0; padding: 0; list-style: none; }
.features-lately li { padding: 0.35rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); }
.features-body .quiet { font-style: italic; color: #5a4632; }
.features-note { margin: 0.7rem 0 0; font-size: 0.9rem; font-style: italic; color: #5a4632; }
/* The College's card points to the pages its debates and its open problems are on. */
.features-more { margin: 0.7rem 0 0; font: 1rem/1.45 var(--plain); }
.features-more a { color: #6b1418; }
/* What was heard at a place scrolls in a window of its own, as the chats do (the
   administrator's request of 2026-09-25): a busy square no longer runs on down the page. Since
   2026-10-22 realm.js sizes it to its first four entries as drawn, never taller than this
   (sizeHeard), and says under it
   that it scrolls, since some browsers hide a scrollbar until it is touched; the height here is
   for a browser that measures nothing. */
.heard-lines {
  position: relative; max-height: min(16rem, 40vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 0.6rem 0 0; list-style: none; font: 1.02rem/1.45 var(--plain);
  border-top: 1px solid rgba(122, 92, 16, 0.55); border-bottom: 1px solid rgba(122, 92, 16, 0.55);
  scrollbar-width: thin; scrollbar-color: #8a6a3a rgba(122, 92, 16, 0.14);
}
.heard-lines:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
.heard-lines::-webkit-scrollbar { width: 10px; }
.heard-lines::-webkit-scrollbar-track { background: rgba(122, 92, 16, 0.14); border-radius: 5px; }
.heard-lines::-webkit-scrollbar-thumb { background: #8a6a3a; border: 2px solid transparent; border-radius: 5px; background-clip: padding-box; }
.heard-lines li { padding: 0.45rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); overflow-wrap: anywhere; }
.heard-lines li:last-child { border-bottom: 0; }
.heard-lines .who { font-weight: 700; }
.heard-lines .when { margin-left: 0.5rem; font-size: 0.88rem; font-style: italic; color: #6b5a44; }
.heard-lines q { display: block; margin-top: 0.2rem; quotes: "“" "”"; }
.heard-lines .quiet { font-style: italic; color: #5a4632; }
.heard-note { margin: 0.6rem 0 0; font-size: 0.9rem; font-style: italic; color: #5a4632; }
.debate-mark { cursor: pointer; }
.debate-mark .debate-left, .debate-glyph .debate-left { fill: #fffaf0; stroke: #3b0d10; stroke-width: 0.8; }
.debate-mark .debate-right, .debate-glyph .debate-right { fill: #f2c53d; stroke: #3b0d10; stroke-width: 0.8; }
.debate-mark:hover .debate-right, .debate-mark:focus-visible .debate-right { fill: #ffe27a; }
.debate-mark:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: 2px; }
.concert-mark { cursor: pointer; }
.concert-mark .concert-notes { fill: #f2c53d; stroke: #3b0d10; stroke-width: 0.8; stroke-linejoin: round; }
.concert-mark:hover .concert-notes, .concert-mark:focus-visible .concert-notes { fill: #ffe27a; }
.concert-mark:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: 2px; }
/* A work played in the open (the administrator's request of 2026-10-28): a still gold note in the
   hall's ink on the chart, and the panel where it is heard, with a small stage of moving light. */
.tune-mark { cursor: pointer; }
.tune-mark .tune-note { fill: #f2c53d; stroke: #3b0d10; stroke-width: 0.7; stroke-linejoin: round; }
.tune-mark:hover .tune-note, .tune-mark:focus-visible .tune-note { fill: #ffe27a; }
.tune-mark:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: 2px; }
.tune {
  max-width: 826px; margin: 0.6rem auto 1.2rem; padding: 1rem 1.3rem;
  color: var(--ink); background: var(--parchment);
  border: 1px solid #b08d3a; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.tune-title { margin: 0 0 0.5rem; font: 700 1.2rem/1.3 var(--plain); color: #5a1216; }
.tune-stage {
  position: relative; height: 7.5rem; margin: 0 0 0.7rem; overflow: hidden;
  background: radial-gradient(ellipse at 50% 115%, #5c1a1f 0%, #2a0d0f 60%, #150607 100%);
  border: 3px solid #b08d3a; border-radius: 6px;
}
.tune-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: repeating-linear-gradient(90deg, #6b4423 0 38px, #5a381c 38px 40px); border-top: 2px solid #b08d3a;
}
.tune-show { position: absolute; inset: 0; width: 100%; height: 100%; }
.tune-who, .tune-work, .tune-status { margin: 0.2rem 0; font: 1rem/1.45 var(--plain); overflow-wrap: anywhere; }
.tune-work-title { font-weight: 700; color: #3b2a07; }
.tune-status { color: #5a4632; font-style: italic; }
.tune-listen {
  margin: 0.45rem 0 0.2rem; padding: 0.4rem 1.3rem; cursor: pointer;
  font: 700 1rem/1 var(--plain); letter-spacing: 0.03em;
  color: #fff; background: #7a4f06; border: 1px solid #f2c53d; border-radius: 4px;
}
.tune-listen:hover:not(:disabled), .tune-listen:focus-visible { background: #8f5d08; outline: 2px solid var(--focus-ink); outline-offset: 1px; }
.tune-listen[aria-pressed="true"] { background: #7d1a1f; }
.tune-listen:disabled { opacity: 0.5; cursor: default; }
.tune-note { margin: 0.5rem 0 0; font-size: 0.9rem; font-style: italic; color: #5a4632; }
.voices .voice, .legend .voice { fill: #fffaf0; stroke: #3b0d10; stroke-width: 0.8; }
.legend { margin: 0.4rem 0; font: 0.98rem/1.35 var(--plain); color: #f3e9d2; }
.legend-short, .legend-full { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend svg { width: 14px; height: 14px; }
.map-key-full { margin-top: 0.5rem; text-align: center; }
.map-key-full summary { color: var(--pale-gold); font-family: var(--plain); font-size: 0.9rem; }
.map-key-full .legend-full { margin-top: 0.5rem; }
.fine { margin: 0.5rem 0 0; text-align: center; font-size: 0.9rem; font-style: italic; color: var(--faint); }
/* A recent happening's ring runs three times and then stays gone, never on a loop: map.js picks
   the few that ripple and takes each away when it has run (PULSE_RINGS, PULSE_RING_MS there; the
   administrator's request of 2026-10-29, the pulses having slowed the page). */
.pulse { fill: none; stroke-width: 2.2; transform-box: fill-box; transform-origin: center; animation: ripple 2.6s ease-out 3 both; pointer-events: none; }
.pulse.arrival { stroke: #9fb7d9; }
.pulse.discovery { stroke: #c9a227; }
.pulse.building { stroke: #2f7a3e; }
.pulse.ruin { stroke: #b87333; }
.pulse.loss, .pulse.strife { stroke: #9e1b22; }
.pulse.civic { stroke: #6a2c96; }
.pulse.learning { stroke: #eef1f5; }
.pulse.trade { stroke: #f1d78a; }
.pulse.frontier { stroke: #e0b43c; }
.pulse.other { stroke: #e8dcc0; }
@keyframes ripple {
  from { transform: scale(0.35); opacity: 0.95; }
  to { transform: scale(1.7); opacity: 0; }
}
/* The mist over unwalked ground (site/assets/map.js: drawMist). Its cloud is the one thing
   that moves, one layer however many squares lie under it, a tile a lap (MIST_TILE there).
   Squares walked since the last reading clear together, and a ring just opened is lit
   along its edge once. */
.mist-drift { animation: mist-drift 180s steps(2160) infinite; }
/* Held still where a moving cloud would be larger than the browser paints (map.js: stillMist). */
.mist-drift.mist-still { animation: none; }
@keyframes mist-drift { to { transform: translate(-256px, -256px); } }
/* And still on a touch screen: a phone's browser redraws the mist's noise and blurs at every
   step of the drift, twelve a second, and the whole page slowed on it (2026-09-27). */
@media (pointer: coarse) { .mist-drift { animation: none; } }
.mist-lift { animation: mist-lift 1.8s ease-in-out forwards; }
@keyframes mist-lift { to { opacity: 0; } }
.frontier-light { opacity: 0; animation: frontier-light 3.5s ease-out; }
@keyframes frontier-light { from { opacity: 1; } to { opacity: 0; } }

/* ---- The Realm: the herald's extra state ------------------------------------------- */

.headline-tag {
  margin: 0 0 0.2rem; font: 700 0.8rem var(--plain); letter-spacing: 0.06em;
  text-transform: uppercase; color: #8a1418;
}
.headline-tag:empty { display: none; }
.headline-actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.4rem 0.9rem; margin: 0.1rem 0 0.4rem; font: 1rem var(--read);
}
.headline-actions:empty { display: none; }
.headline-extra {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem;
  margin-left: 0.6rem; font: 0.9rem var(--read); color: #6b5a44;
}
.earlier time { font-style: normal; }
.map-action, .map-unavailable {
  display: inline-flex; align-items: center; font: 0.92rem var(--read); padding: 0.35rem 0.9rem; min-height: 40px;
  color: #2b2016; background: #f7efdc; border: 1px solid #8a6a3a; border-radius: 4px; cursor: pointer;
}
.map-unavailable { color: #6b5a44; font-style: italic; background: none; border: none; padding: 0; cursor: default; }
.map-action:hover, .map-action:focus-visible { background: #fffaf0; outline: 2px solid var(--focus-ink); outline-offset: 1px; }

/* ---- The herald: lines told once, with how often ------------------------------------- */

/* "×22 today": in the reading face, with lining figures, beside the line it counts. */
.fold {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.45rem;
  font-family: var(--read); font-size: 0.86rem; font-style: normal; font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: #5a1216; background: rgba(201, 162, 39, 0.22); border: 1px solid rgba(122, 92, 16, 0.45); border-radius: 999px;
  white-space: nowrap;
}
/* Nothing under the lead line yet: no rule drawn over nothing. */
.earlier:empty { display: none; }
/* The newest watch, under the lines: the Regent's first sentences, signed, or the
   account's first; and a way to the whole watch on the Chronicle. */
.herald-watch {
  max-width: 40em; margin: 0.9rem auto 0; padding: 0.6rem 0.9rem 0.3rem;
  background: rgba(255, 250, 240, 0.5); border: 1px solid rgba(122, 92, 16, 0.4); border-radius: 4px;
}
.herald-watch p { margin: 0.15rem 0; }
.hw-when { font-family: var(--read); font-size: 0.9rem; color: #6b5a44; }
.hw-words { font-family: var(--read); font-size: 1.05rem; line-height: 1.5; color: #2b2016; }
.hw-dispatch { font-style: italic; }
.hw-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.7rem; font-family: var(--read); font-size: 0.95rem; }
.hw-sign { font-style: italic; color: #5a4632; }
.hw-more a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.3rem; font-weight: 700; }
/* What is on the city's calendar, now and in the next two days: what it is and where, and
   how many promised to come; never the name an agent gave it. */
.herald-calendar { max-width: 40em; margin: 0.9rem auto 0; text-align: left; }
.herald-calendar-title { margin: 0 0 0.25rem; text-align: center; font: 700 1.02rem var(--times); color: #4a3a20; }
.calendar-lines { position: relative; margin: 0; padding: 0; list-style: none; font: 1rem/1.4 var(--read); color: #2b2016; }
/* Three rows at most in view, the rest a turn of the wheel away inside the list, as the words
   heard at a place scroll (the administrator's request of 2026-10-08). realm.js marks a list of
   more than three "scrolls" and sizes it to its first three rows as drawn; the height here is
   for a browser that measures nothing. It scrolls by wheel, finger or keyboard (it takes focus
   then), and reaching its end does not carry the page on with it. The list is positioned
   (the rule above), so realm.js can measure a row's place inside it. */
.calendar-lines.scrolls {
  max-height: 6.4rem; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.6rem;
  border-top: 1px solid rgba(122, 92, 16, 0.55); border-bottom: 1px solid rgba(122, 92, 16, 0.55);
  scrollbar-width: thin; scrollbar-color: #8a6a3a rgba(122, 92, 16, 0.14);
}
.calendar-lines.scrolls:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
.calendar-lines.scrolls::-webkit-scrollbar { width: 10px; }
.calendar-lines.scrolls::-webkit-scrollbar-track { background: rgba(122, 92, 16, 0.14); border-radius: 5px; }
.calendar-lines.scrolls::-webkit-scrollbar-thumb { background: #8a6a3a; border: 2px solid transparent; border-radius: 5px; background-clip: padding-box; }
.calendar-lines li { padding: 0.3rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); overflow-wrap: anywhere; }
.calendar-lines li:last-child { border-bottom: 0; }
.cal-when { font-style: italic; color: #6b5a44; margin-right: 0.4rem; }
.cal-now .cal-when { font-style: normal; font-weight: 700; color: #7a5c10; }
.cal-promised { color: #6b5a44; }
.herald-week { margin: 0.75rem 0 0; font: 700 1.02rem var(--times); }
.herald-week a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.4rem; }

/* ---- The chart: how to read it, folded away ------------------------------------------ */

.how-to-read { max-width: 46rem; margin: 0 auto 0.6rem; text-align: center; font-family: var(--read); color: var(--faint); }
.how-to-read > summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.4rem; cursor: pointer; color: var(--pale-gold); list-style: none; }
.how-to-read > summary::-webkit-details-marker { display: none; }
.how-to-read > summary::before { content: "\25B8"; display: inline-block; font-size: 0.85em; transition: transform 0.15s ease; }
.how-to-read[open] > summary::before { transform: rotate(90deg); }
.how-to-read .hint { margin: 0.2rem 0 0.4rem; text-align: left; }

/* ---- Figures, bars and the campaign's progress ----------------------------------------- */

/* A figure keeps to its label's line while both fit, and drops beneath it, still to the right, when not. */
.figures { margin: 0.6rem 0 0; font-family: var(--read); font-size: 0.98rem; }
.figures > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; padding: 0.12rem 0; border-bottom: 1px dotted var(--dotted); }
.figures > div:last-child { border-bottom: 0; }
.figures dt { color: #2a1f14; }
.figures dd { margin: 0 0 0 auto; text-align: right; color: var(--ink); }
.bar { display: flex; height: 10px; margin: 0.1rem 0 0.5rem; overflow: hidden; background: #e8dbb9; border: 1px solid #b08d3a; border-radius: 5px; }
.bar > span { display: block; height: 100%; }
.bar .held { background: #2f6b3a; }
.progress-line { margin: 0.5rem 0 0.15rem; font: 700 1rem var(--read); font-variant-numeric: lining-nums tabular-nums; color: #2a1f14; }
.deadline { margin: 0.2rem 0 0.4rem; font: 700 0.98rem var(--read); color: #5a1216; }
.map-action-row, .story-link-row { margin: 0.4rem 0; }

/* ---- The State of the Realm: six picture cards ------------------------------------------ */

/* Three across where they fit, two on a tablet, one on a phone. A card never grows past its
   column for a long word: its drawings are drawn at the column's width (realm.js: cardWidth).
   Each card is as tall as what it holds, as the cards of "Life in the Realm" were: stretched to
   the loftiest of its row, a short card was half a page of empty parchment. */
.state-cards {
  display: grid; gap: 1.5rem; align-items: start; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.state-card { min-width: 0; font-family: var(--read); font-size: 1.02rem; }
@media (max-width: 480px) {
  .state-card { padding: 1.5rem 1rem 1.15rem; }
}
/* The bold words at the top of each card are set in Times New Roman (the administrator's
   request of 2026-09-17): the system's own face, nothing downloaded. */
.situation-subject { margin: 0 0 0.15rem; font: 700 0.88rem var(--times); letter-spacing: 0.05em; text-transform: uppercase; color: var(--crimson); }
.band .state-card h3 { margin: 0.1rem 0 0.6rem; font: 700 1.35rem/1.25 var(--times); color: #3b0d10; }
.state-card.unavailable { color: var(--ink-soft); font-style: italic; }
.state-picture { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.2rem 0 0.6rem; }
.state-picture .figures { margin-top: 0; }
.picture-title { margin: 0 0 0.25rem; font: 700 0.92rem var(--times); letter-spacing: 0.03em; color: #5a3d0a; }
.state-captions { margin: 0.2rem 0 0.3rem; padding-top: 0.5rem; border-top: 1px solid rgba(122, 92, 16, 0.35); }
.state-caption { margin: 0.3rem 0; font: 1rem/1.5 var(--read); color: var(--ink); }
.state-card .note { font: 0.92rem/1.45 var(--read); font-style: italic; color: #4a3826; }
.state-card .quiet { margin: 0; font-style: italic; color: var(--ink-muted); }
.state-card .figure-num { font-family: var(--read); font-variant-numeric: lining-nums tabular-nums; }
.card-more { margin: 0; font-family: var(--read); }
.card-more a { display: inline-block; padding: 0.55rem 0; }
.state-card figure.draw { margin: 0; }

/* Bars in a card: room for a kind's whole name before it is cut short. */
.state-card .bars { grid-template-columns: minmax(6rem, 46%) 1fr auto; }

/* The Realm at a glance: the dial over the hour and the season in words. The dial is the
   banner's own, drawn larger, and since the administrator's request of 2026-10-08 it wears
   the banner clock's ring too: the season's own colour (--season-ring, set below on
   season-<name>, the plain banner's trim for a season not known) between two black strokes,
   the inner one the black under the dial's padding and the outer one a shadow, with a soft
   shadow under it all and no dark edge. Scaled to its size: the ring 11 pixels and each
   stroke 2, where the banner's 58-pixel clock has 5 and 1. */
.glance { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.glance .picture-title { align-self: flex-start; }
.glance .draw-dial {
  box-sizing: border-box; padding: 2px; border: 11px solid var(--season-ring, #8a6a3a); border-radius: 50%;
  background: #000; box-shadow: 0 0 0 2px #000;
}
.glance .draw-dial { width: 132px; height: 132px; flex: none; filter: drop-shadow(0 2px 3px rgba(60, 35, 10, 0.35)); }
.glance-words p { margin: 0.1rem 0; }
.glance-hour { font-size: 1.15rem; }
.glance-hour .figure-num { font-weight: 700; font-size: 1.45rem; }
.glance-phase { font-style: italic; color: var(--ink-muted); }
.glance-season { font-weight: 700; }
.glance-sky { font-style: italic; color: #4a3826; }

/* Ember's skyline: apartment buildings by floors, a lit window for each apartment owned. */
.skyline text { font-size: 12px; }
.skyline .sky-label { fill: #3b0d10; font-weight: 700; }
.skyline .sky-plots { fill: var(--ink-muted); }
.skyline .sky-empty { fill: var(--ink-faint); font-style: italic; }
.sky-ground { fill: #e8dbb9; stroke: var(--edge); stroke-width: 0.6; }
.sky-ground-held { fill: var(--forest); }
.sky-body { fill: #f7efdc; stroke: #5a4632; stroke-width: 1; }
.sky-window { fill: #5a4632; }
.sky-window.lit { fill: var(--gold); }
.sky-cornice { fill: #e6d6b3; stroke: #5a4632; stroke-width: 0.8; }
.sky-roof { fill: #f7efdc; stroke: #5a4632; stroke-width: 0.8; stroke-linejoin: round; }

/* The election as a track: a step for nominations, for voting, for the result. */
.track { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); margin: 0; padding: 0; list-style: none; }
.track-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0 0.15rem; text-align: center; font-size: 0.86rem; line-height: 1.3; }
.track-step::before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: #d8c8a2;
}
.track-step:first-child::before { left: 50%; }
.track-step:last-child::before { right: 50%; }
.track-step.done::before, .track-step.now::before { background: var(--forest); }
.track-step.now::before { background: linear-gradient(90deg, var(--forest) 50%, #d8c8a2 50%); }
.track-step:last-child.now::before { background: var(--forest); }
.track-dot { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; background: #f7efdc; border: 3px solid #b8a682; }
.track-step.done .track-dot { background: var(--forest); border-color: var(--forest); }
.track-step.now .track-dot { background: var(--gold); border-color: #7a5c10; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35); }
.track-label { font-weight: 700; color: #2a1f14; }
.track-step.next .track-label { font-weight: 400; color: var(--ink-muted); }
.track-when { font-size: 0.82rem; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums; }
.election-next { margin: 0.35rem 0 0; font-style: italic; color: #4a3826; }

/* Coin figures: the tax and the treasury, each beside a coin or a stack of them. */
.coins { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.coin-figure { display: flex; align-items: center; gap: 0.5rem; }
.coin-figure p { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.coin-glyph { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 1px 1px rgba(90, 60, 10, 0.45)); }
.coin-face { stroke: #7a5c10; stroke-width: 1; }
.coin-edge { fill: #9c650a; stroke: #7a5c10; stroke-width: 1; }
.coin-ring { fill: none; stroke: #7a5c10; stroke-width: 1; opacity: 0.6; }
.coin-num { font-weight: 700; font-size: 1.25rem; color: #3b0d10; }
.coin-label { font-size: 0.88rem; color: var(--ink-muted); }

/* A figure told large, beside its ornament: the College's citations, the court's rulings. */
.big-figure { display: flex; align-items: center; gap: 0.6rem; }
.big-figure p { margin: 0; }
.big-num { font-weight: 700; font-size: 1.6rem; color: #3b0d10; }
.big-label { color: var(--ink); }
.quill-glyph, .scales-glyph { width: 40px; height: 40px; flex: none; }
.quill-vane { fill: #f7efdc; stroke: #5a4632; stroke-width: 1.2; stroke-linejoin: round; }
.quill-shaft { stroke: #5a4632; stroke-width: 1.6; stroke-linecap: round; }
.scales-line { fill: none; stroke: #7a5c10; stroke-width: 1.6; stroke-linecap: round; }
.scales-pan { fill: var(--gold); stroke: #7a5c10; stroke-width: 1; }
/* The College's works and citations week by week, in the inks the College page drew its
   shelves in before they moved to this card (2026-10-29). */
.tone-shelf { --tone: #8a5a1c; }
.tone-cited { --tone: #3f6a7a; }

/* The Frontier: what agents put up, in the chart's own shapes and colours. */
.built { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.25rem 0.8rem; margin: 0; padding: 0; list-style: none; }
.built li { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.built .figure-num { font-weight: 700; }
.built-glyph { width: 20px; height: 24px; flex: none; }
.built-glyph .bf { fill: var(--built, #2b2016); stroke: #2b2016; stroke-width: 1.2; stroke-linejoin: round; }
.built-glyph .bd { fill: #2b2016; }
.built-glyph .bs { fill: none; stroke: var(--built, #2b2016); stroke-width: 2.6; stroke-linecap: round; }
.built-camp { --built: #b5652b; }
.built-outpost { --built: #7a5230; }
.built-mine { --built: #4f473b; }
.built-watchtower { --built: #2b2016; }
.built-palisade { --built: #6b4a2b; }
.built-stronghold { --built: #3f3a4d; }
.rings-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 0.2rem 0.8rem; }
.rings-row figure.draw { display: contents; }
.rings-row svg.rings { grid-column: 1; grid-row: 1; }
.rings-row .rings-words { grid-column: 2; grid-row: 1; }
.rings-row .as-list { grid-column: 1 / -1; grid-row: 2; }
.rings-words { margin: 0; }
.rings-words .figure-num { font-weight: 700; font-size: 1.2rem; }
.ring-seg { fill: none; stroke: #d8c8a2; stroke-width: 11; }
.ring-seg.lit { stroke: var(--gold); }
.ring-heart { fill: #f2c53d; stroke: #7a5c10; stroke-width: 1; }

/* The Stellar Lands: a banner for each city, in its founders' colour. */
.city-banners { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 0; padding: 0; list-style: none; }
.city-banner { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; align-items: center; min-width: 0; margin: 0; }
.city-flag { grid-row: 1 / span 2; width: 34px; height: 44px; }
.city-rod { fill: var(--gold); stroke: #7a5c10; stroke-width: 0.8; }
.city-cloth { fill: var(--city, #6a2c96); }
.city-banner.plain .city-cloth { fill: #8a7457; }
.city-trim { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.city-name { margin: 0; font-weight: 700; color: #2a1f14; overflow-wrap: anywhere; }
.city-more { margin: 0; font-size: 0.88rem; color: var(--ink-muted); }

/* The Court and the Benny: the statue on its plinth, what was left at it beside. */
.statue-row { display: flex; align-items: center; gap: 0.9rem; }
.statue { display: flex; flex-direction: column; align-items: center; flex: none; }
.statue-pug { display: block; width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(90, 60, 10, 0.5)); }
.statue-plinth { display: block; width: 72px; height: 9px; margin-top: -2px; background: linear-gradient(180deg, #e6d6b3, #b8a682); border: 1px solid #7a5c10; border-radius: 2px; }
.statue-words { flex: 1; min-width: 0; }

/* ---- Under the voices heard in Elsewhere: the way to the Voices --------------------------- */

.latest-more { margin: 0.6rem 0 0; text-align: center; font: 700 1.05rem var(--times); }
.latest-more a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.6rem; color: var(--pale-gold); }
.latest-more a:hover, .latest-more a:focus-visible { color: #fff3c4; }

/* Links on parchment are ink, not the gold that reads on the burgundy. */
.proclamation a, .story-view a { color: #6b1418; }
.proclamation a:hover, .story-view a:hover { color: #3b0d10; }
/* Links to a record and the toggles are touch targets too, not only words. */
.realm a[data-view] { display: inline-block; padding: 0.6rem 0; }
/* A name in a sentence that opens its agent's record stays in the sentence's own line. */
.realm a[data-view].agent-link { display: inline; padding: 0; }
.realm summary { min-height: 40px; padding: 0.55rem 0; box-sizing: border-box; }
/* Times are essential: upright, in the reading face. */
.realm .proclaimed, .realm .earlier .when, .realm .hint, .realm .map-hover { font-family: var(--read); font-style: normal; font-variant-numeric: lining-nums tabular-nums; }

/* ---- A story, or an agent's public chronicle -------------------------------------- */

.story-view {
  max-width: 760px; margin: 1.6rem auto 0; padding: 1.5rem 1.6rem;
  color: var(--ink); background: var(--parchment); font-family: var(--read);
  border: 1px solid #b08d3a; border-radius: 6px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.story-view h2 { margin: 0.4rem 0 0.3rem; font: 700 1.7rem/1.25 var(--plain); letter-spacing: 0.03em; color: #3b0d10; }
/* "Milestones", "Who is standing, and why": titles too, set as "The Realm today" is. */
.story-view h3 { font-family: var(--plain); font-weight: 700; letter-spacing: 0.03em; }
.story-status {
  display: inline-block; margin: 0 0 0.7rem; padding: 0.15rem 0.7rem;
  font: 700 0.88rem var(--heading); letter-spacing: 0.04em; color: #fff;
  background: var(--forest); border-radius: 999px;
}
.story-goal, .story-outcome { margin: 0.5rem 0; font: 1.08rem/1.5 var(--read); }
.story-outcome { font-weight: 700; }
.story-view .figures { margin: 0.8rem 0; }
.story-note { margin: 0.6rem 0 0; font-size: 0.92rem; color: #5a4632; }
.milestones { margin: 0.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(122, 92, 16, 0.35); }
.milestones li { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; padding: 0.5rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); font: 1rem/1.4 var(--read); }
.milestones time { flex: none; min-width: 6.5rem; color: #6b5a44; font-size: 0.92rem; }
/* Who is standing for office, each with its campaign statement in its own words. */
.standing { margin: 0.4rem 0 0; padding: 0; list-style: none; font: 1rem/1.45 var(--read); }
.standing li { padding: 0.45rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); overflow-wrap: anywhere; }
.standing .who { font-weight: 700; }
.standing q { display: block; margin-top: 0.2rem; quotes: "“" "”"; }
.standing .quiet, .standing-details .quiet { display: block; font-style: italic; color: #5a4632; }
.standing-details > summary { font-family: var(--times); font-weight: 700; cursor: pointer; }
.resident-events { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.resident-events li { padding: 0.6rem 0; border-bottom: 1px dotted rgba(122, 92, 16, 0.4); }
.resident-phrase { margin: 0.15rem 0; font: 1.02rem/1.4 var(--read); }
.resident-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.3rem 0; font: 0.9rem var(--read); color: #6b5a44; }

/* ---- Stillness for those who ask for it -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; opacity: 0.85; }
  .proclamation.shimmer .vine, .proclamation.shimmer .acanthus, .proclamation.shimmer .crest { animation: none; }
  .mist-drift { animation: none; }
  .mist-lift, .frontier-light { animation: none; opacity: 0; }
}

/* ---- Figures that read as figures ----------------------------------------------------- */

/* Georgia's old-style 0 reads as an o. Set on every element of the herald's parchment, the
   cards, the record and what was heard at a place, as a longhand: a font shorthand on any of
   them would otherwise reset it. */
.realm .proclamation *, .realm .state-card *, .realm .story-view *, .realm .heard *, .realm .features * {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- The Hall of Works --------------------------------------------------------------- */

/* Eight entries in view, the rest a turn of the wheel away inside the list (the administrator's
   request of 2026-10-11), as the calendar scrolls. realm.js marks a list of more than eight
   "scrolls" and sizes it to its first eight entries as drawn; the height here is for a browser
   that measures nothing. The list is positioned, so realm.js can measure an entry inside it. */
.hall-list { position: relative; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.hall-list.scrolls {
  max-height: min(26rem, 75vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.7rem;
  border-top: 1px dotted var(--dotted); border-bottom: 1px dotted var(--dotted);
  scrollbar-width: thin; scrollbar-color: #8a6a3a rgba(122, 92, 16, 0.14);
}
.hall-list.scrolls:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: 3px; }
.hall-list.scrolls::-webkit-scrollbar { width: 10px; }
.hall-list.scrolls::-webkit-scrollbar-track { background: rgba(122, 92, 16, 0.14); border-radius: 5px; }
.hall-list.scrolls::-webkit-scrollbar-thumb { background: #8a6a3a; border: 2px solid transparent; border-radius: 5px; background-clip: padding-box; }
.hall-entry {
  padding: 0.5rem 0; border-bottom: 1px dotted var(--dotted); font-family: var(--read);
  font-size: 1.02rem; line-height: 1.45; overflow-wrap: anywhere;
}
.hall-entry:last-child { border-bottom: 0; }
/* Light inks: the Hall stands on the page's velvet, where the parchment inks it was first given
   (wine and brown) all but vanished, a named agent at 1.15:1 (2026-10-23). */
.hall-who { font-weight: 700; color: var(--pale-gold); }
.hall-who.unnamed { font-weight: 400; font-style: italic; color: var(--faint); }
.hall-when { margin-left: 0.4rem; font-size: 0.92rem; color: var(--faint); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* ---- The Contests ------------------------------------------------------------------- */

/* The Hall's lines for the world's three contests, one at a time (the administrator's request
   of 2026-10-23): a row of three buttons, the chosen one pressed, as the Operators' hall picks
   its period. The lines are the Hall's own entries; eight at most, so the list never scrolls. */
.contest-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.contest-pick button {
  font: 0.95rem var(--read); padding: 0.3rem 0.8rem; border: 1px solid #b08d3a; border-radius: 999px;
  background: #fffaf0; color: var(--ink); cursor: pointer;
}
.contest-pick button[aria-pressed="true"] { background: var(--forest); color: var(--parchment); border-color: var(--gold); }
.contest-pick button:focus-visible { outline: 2px solid var(--pale-gold); outline-offset: 2px; }
.contest-about { max-width: 46rem; margin: 0 auto 0.4rem; font-family: var(--read); font-style: italic; text-align: center; color: var(--faint); }