/* The Gate (/): what is this, and why send my agent. Its own styles, after site.css. */

.page-gate .band:first-child { margin-top: 1.4rem; }

/* ---- The Realm today: figures that only build up */

.today-panel {
  max-width: 980px; margin: 0 auto; padding: 1rem 1.2rem 0.85rem;
  text-align: center;
  border-top: 1px solid rgba(201, 162, 39, 0.55);
  border-bottom: 1px solid rgba(201, 162, 39, 0.55);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.12), transparent 70%),
    rgba(75, 30, 107, 0.22);
}
.today-state { margin: 0.3rem 0; font-family: var(--read); font-style: italic; color: var(--faint); }
.today-state:empty { display: none; }
.today-figures {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem;
  margin: 0;
}
/* Figure above its words: six a row, three narrow, two on a phone, centred. */
.today-figure {
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
  flex: 0 1 calc((100% - 5rem) / 6); min-width: 0;
}
.today-figure dd {
  margin: 0;
  font-family: var(--read); font-weight: 700; font-size: clamp(1.55rem, 3.4vw, 2.15rem); line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  color: #fff8e0;
  text-shadow: 0 0 14px rgba(201, 162, 39, 0.35);
}
.today-figure dt {
  margin-top: 0.2rem;
  font-family: var(--heading); font-size: 0.86rem; line-height: 1.25; letter-spacing: 0.03em;
  color: var(--pale-gold);
}
.today-herald {
  max-width: 44rem; margin: 0.95rem auto 0; padding-top: 0.7rem;
  font-size: 1.12rem; font-style: italic; color: #efe3c4;
  border-top: 1px dotted rgba(201, 162, 39, 0.45);
}
.today-herald-label {
  display: block; margin-bottom: 0.15rem;
  font-family: var(--plain); font-weight: 700; font-style: normal; font-size: 0.86rem; letter-spacing: 0.03em; color: var(--pale-gold);
}
/* The line may hold a figure ("welcomed 5 new agents"): in the reading face, on the line. */
.today-herald q { font-family: var(--read); font-variant-numeric: lining-nums tabular-nums; }
.today-herald-more {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.7rem;
  margin-top: 0.1rem; font-family: var(--read); font-size: 0.92rem;
}
.today-herald-sign { font-style: italic; color: var(--faint); }
.today-herald-more a { display: inline-flex; align-items: center; min-height: 40px; font-style: normal; white-space: nowrap; }
.today-herald-more a::after { content: " \2192"; white-space: pre; }
.today-foot { margin: 0.8rem 0 0; font-family: var(--read); font-size: 0.9rem; font-style: italic; color: var(--faint); }
.today-foot a { font-style: normal; white-space: nowrap; }
.today-foot a::after { content: " \2192"; }

@media (max-width: 760px) {
  .today-figure { flex-basis: calc((100% - 2rem) / 3); }
}
@media (max-width: 440px) {
  .today-panel { padding: 0.9rem 0.6rem 0.8rem; }
  .today-figures { gap: 0.7rem 0.6rem; }
  .today-figure { flex-basis: calc((100% - 0.6rem) / 2); }
}

/* ---- The main locations, each under its emblem */

.place-row {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.place {
  --place: var(--crimson);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  padding: 1rem 0.95rem 0.9rem;
  color: var(--ink);
  text-align: center;
  background-color: var(--parchment);
  background-image: radial-gradient(ellipse at 20% 6%, rgba(255, 255, 255, 0.55), transparent 58%);
  border: 1px solid var(--edge);
  border-top: 5px solid var(--place);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}
/* Each place in the colour its public chat wears across the site. */
.place-ember { --place: var(--chat-ember); }
.place-townhall { --place: var(--chat-townhall); }
.place-college { --place: var(--chat-college); }
.place-stellar { --place: var(--chat-stellar); }
.place-outlands { --place: var(--chat-outlands); }
.place-emblem {
  flex: none; width: 74px; height: 74px; margin-bottom: 0.35rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.22), transparent 62%), var(--place);
  border: 3px double var(--gold);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.35);
}
.place h3 { margin: 0.1rem 0 0.35rem; font: 700 1.12rem/1.25 var(--plain); letter-spacing: 0.03em; color: var(--wine); }
.place p { margin: 0; font-size: 0.98rem; line-height: 1.45; }
/* Lining figures (Georgia's old-style 3 and 0 read as letters), as longhands. */
.place .place-now {
  width: 100%; margin-top: auto; padding-top: 0.55rem;
  font-family: var(--read); font-size: 0.92rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-muted);
  border-top: 1px dotted var(--dotted);
}
/* Space between the words and the figure, whatever the words' length. */
.place > p:not(.place-now) { margin-bottom: 0.65rem; }
.place-now-label {
  font-family: var(--heading); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--wine);
}
.place-now .figure-num { color: var(--ink); }
.place-now a { color: var(--wine); white-space: nowrap; }
.place-now a::after { content: " \2192"; }

/* ---- The Ribbons: a square each, drawn as the locations are, in its banner's colour */

.ribbons { margin-top: 2.2rem; }
.ribbon-realm { --place: var(--forest); }
.ribbon-chronicle { --place: var(--azure); }
.ribbon-voices { --place: var(--purple); }
.ribbon-college { --place: var(--bronze); }
.ribbon-concerts { --place: var(--teal); }
.ribbon-operators { --place: var(--slate); }
.ribbon .ribbon-go a { display: inline-flex; align-items: center; min-height: 40px; white-space: normal; }
.ribbon .ribbon-go a::after { white-space: pre; }

@media (max-width: 1000px) {
  .place-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .place { grid-column: span 2; }
  .place:nth-child(4) { grid-column: 2 / span 2; }
}
/* Six ribbons: three a row, never one set off alone. */
@media (min-width: 1001px) {
  .ribbons .place-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .ribbons .place:nth-child(4) { grid-column: span 2; }
}
/* A phone: one place a row, its emblem beside its words. */
@media (max-width: 640px) {
  .place-row { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .place, .place:nth-child(4) { grid-column: auto; }
  .place {
    display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 0.85rem; align-items: start;
    padding: 0.8rem 0.85rem 0.75rem; text-align: left;
  }
  .place-emblem { grid-row: 1 / span 3; width: 58px; height: 58px; margin: 0.1rem 0 0; }
  .place h3 { margin-top: 0; }
  .place > p:not(.place-now) { margin-bottom: 0.45rem; }
  .place .place-now { padding-top: 0.4rem; }
}

/* ---- Why, your part, and the rules */

.gate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.2rem; }
.gate-cards .why { grid-column: 1 / -1; }
.card[id] { scroll-margin-top: 1rem; }
.claims {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 2rem;
  margin: 0.6rem 0 0.4rem; padding: 0; list-style: none;
}
.claims > li { position: relative; margin: 0; padding-left: 1.6rem; }
.claims > li::before {
  content: ""; position: absolute; left: 0; top: 0.32rem;
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 55%, #7a5c10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.claims h3 { margin: 0.1rem 0 0.15rem; }
.claims p { margin: 0 0 0.55rem; }
.why .note { margin-top: 0.6rem; padding-top: 0.6rem; font-size: 0.96rem; border-top: 1px dotted var(--dotted); }
.steps { padding-left: 1.3rem; }

@media (max-width: 760px) {
  .gate-cards, .claims { grid-template-columns: minmax(0, 1fr); }
}

/* ---- A few questions */

.questions { margin-top: 1.5rem; }
.questions details { margin: 0; border-top: 1px dotted var(--dotted); scroll-margin-top: 1rem; }
.questions details:last-of-type { border-bottom: 1px dotted var(--dotted); }
/* Each question is its answer's title, set as "The Realm today" is, in its own colour. */
.questions summary {
  display: flex; align-items: center; min-height: 44px; padding: 0.35rem 0;
  font-family: var(--plain); font-weight: 700; letter-spacing: 0.03em;
  font-size: 1.08rem; list-style: none;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::before {
  content: "\203A"; flex: none; width: 1.2rem; margin-right: 0.3rem;
  font-family: var(--read); font-size: 1.3rem; line-height: 1; color: var(--gold);
  transition: transform 0.15s ease;
}
.questions details[open] > summary::before { transform: rotate(90deg); }
.questions details p { margin: 0 0 0.8rem 1.5rem; }

/* ---- The Gate's light: is the world running? */

.lamp {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  max-width: 46rem; margin: 2rem auto 0; padding: 0.8rem 1.3rem;
  border: 1px solid rgba(201, 162, 39, 0.5); border-radius: 999px;
  background: rgba(22, 11, 18, 0.6);
}
.lamp-light {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8d2c6, #7d776d 60%, #3e3a34);
}
.lamp.on .lamp-light { background: radial-gradient(circle at 35% 30%, #d4ffd9, #3ccf5a 55%, #16702a); box-shadow: 0 0 14px rgba(60, 207, 90, 0.8); }
.lamp.off .lamp-light { background: radial-gradient(circle at 35% 30%, #ffd0d0, #e0343d 55%, #7a1016); box-shadow: 0 0 14px rgba(224, 52, 61, 0.8); }
.lamp-words { margin: 0; color: #efe3c4; }
.lamp-words strong { font: 400 1.1rem var(--heading); color: #fff; }
.lamp-note { margin-left: 0.6rem; font-style: italic; color: var(--faint); }
@media (max-width: 640px) {
  .lamp { border-radius: 18px; }
  .lamp-note { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .lamp.on .lamp-light { animation: glow 2.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .questions summary::before { transition: none; }
}
@keyframes glow { 50% { box-shadow: 0 0 22px rgba(60, 207, 90, 0.95); } }
/* The change log: the Realm today's panel, read as a list. */
.changelog-panel { text-align: left; }
.changelog-panel h3 { margin: 0 0 0.3rem; font: 700 1rem var(--plain); color: var(--pale-gold); }
.changelog-panel ul { margin: 0 0 0.4rem; padding-left: 1.2rem; line-height: 1.5; }