/* SKHERIA — PUBLIC OBSERVATORY.

   The same Observatory ground as the Founder Cockpit, and a deliberately
   different temperament. The Cockpit is an instrument: dense, mono, every
   figure at once. This is a room you can stand in — one column, generous
   measure, serif for anything an inhabitant wrote, and long stretches of
   nothing so the few things that matter can be seen.

   The grammar is skheria.css unchanged: rings for accreted time, ember for the
   growing edge, verdigris for assent, mono only where a figure is derived. */

.ob { --line-warm: rgba(217, 138, 58, 0.28); }

.ob main { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* --- the pulse ------------------------------------------------------------- */

.ob-pulse {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.6rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--fg-3);
}
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); flex: none; }
.ob-pulse[data-live="true"] { color: var(--verd); }
.ob-pulse[data-live="true"] .ob-dot { background: var(--verd); animation: ob-breathe 2.4s ease-in-out infinite; }
@keyframes ob-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 168, 147, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(127, 168, 147, 0); }
}
@media (prefers-reduced-motion: reduce) { .ob-pulse .ob-dot { animation: none; } }

/* --- the hero -------------------------------------------------------------- */

.ob-hero {
  padding: clamp(2.6rem, 8vw, 6.5rem) var(--gut) clamp(2.2rem, 5vw, 4rem);
  max-width: var(--max); margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.ob-headline {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 1.1rem; max-width: 17ch;
}
.ob-standfirst { font-size: clamp(1.05rem, 1.9vw, 1.32rem); line-height: 1.5; max-width: 54ch; margin: 0 0 1.5rem; color: var(--fg); }
.ob-frame { color: var(--fg-2); max-width: 66ch; margin: 0; font-size: 0.97rem; line-height: 1.62; }

.ob-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--line-soft); margin-top: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.ob-stat { background: var(--bg); padding: 1.1rem 0.2rem 1.15rem; }
.ob-stat b { display: block; font-family: var(--mono); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 400; letter-spacing: -0.02em; }
.ob-stat span { display: block; margin-top: 0.3rem; font-size: 0.76rem; color: var(--fg-3); line-height: 1.35; }
.ob-stats-tight { margin-top: 1.8rem; }

/* --- sections -------------------------------------------------------------- */

.ob .band { max-width: var(--max); }
.ob .band > .lede { margin-bottom: 2rem; }

/* --- acts ------------------------------------------------------------------ */

.ob-acts { display: grid; gap: 1rem; }

.ob-act {
  border: 1px solid var(--line); border-left: 3px solid var(--mute);
  background: var(--bg-2); border-radius: 2px;
}
.ob-act[open] { border-left-color: var(--ember); background: var(--bg-3); }
.ob-act summary {
  display: grid; gap: 0.5rem; padding: clamp(1rem, 2.2vw, 1.5rem);
  cursor: pointer; list-style: none;
}
.ob-act summary::-webkit-details-marker { display: none; }
.ob-act summary:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.ob-act-head { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; }
.ob-act-kind {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.ob-badge {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 0.2rem 0.5rem; border-radius: 2px; color: var(--fg-3);
}
.ob-badge[data-tone="good"] { color: var(--verd); border-color: color-mix(in srgb, var(--verd) 45%, transparent); }
/* Law that exists but has never been used. It must not read as achievement. */
.ob-badge[data-tone="law"] { color: var(--ember); border-color: var(--line-warm); }

.ob-act-title { font-family: var(--serif); font-size: clamp(1.18rem, 2.4vw, 1.62rem); line-height: 1.22; letter-spacing: -0.012em; }
/* The two recorded fields, quoted. Not a sentence assembled from them. */
.ob-act-effect { display: grid; gap: 0.3rem; max-width: 64ch; }
.ob-act-effect > span { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0.8rem; color: var(--fg-2); font-size: 0.92rem; line-height: 1.5; }
.ob-act-effect i {
  font-style: normal; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3); padding-top: 0.24rem;
}
@media (max-width: 760px) {
  .ob-act-effect > span { grid-template-columns: minmax(0, 1fr); gap: 0.05rem; }
  .ob-act-effect i { padding-top: 0.4rem; }
}
.ob-act-by { font-size: 0.82rem; color: var(--fg-3); }

.ob-tally { display: grid; gap: 0.4rem; max-width: 30rem; }
.ob-bar { position: relative; display: block; height: 6px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 3px; overflow: hidden; }
.ob-bar i { position: absolute; inset: 0 auto 0 0; background: var(--verd); }
.ob-bar s { position: absolute; inset: 0 auto 0 0; background: #b25c4a; }
.ob-bar u { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ember); }
.ob-tally-n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--fg-3); }

.ob-more {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); margin-top: 0.2rem;
}
.ob-act[open] .ob-more { color: var(--fg-3); }
.ob-act[open] .ob-more::after { content: " — open"; }

.ob-act-body { padding: 0 clamp(1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.7rem); border-top: 1px solid var(--line-soft); }
.ob-law-label {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-3); margin: 1.1rem 0 0.7rem;
}
/* The record voice: what an inhabitant actually wrote, quoted, never trimmed. */
.ob-law {
  font-family: var(--serif); font-size: 1.03rem; line-height: 1.66; white-space: pre-wrap;
  border-left: 2px solid var(--ember); padding: 0.1rem 0 0.1rem 1.15rem; max-width: 68ch;
}

.ob-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.2rem; margin: 1.6rem 0 0; }
.ob-facts dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); padding-top: 0.16rem; }
.ob-facts dd { margin: 0; font-size: 0.92rem; }
.ob-facts code { font-family: var(--mono); font-size: 0.86em; color: var(--fg-2); }

/* Provenance: present for anyone who wants it, invisible to anyone who doesn't. */
.ob-prov { margin-top: 1.4rem; border-top: 1px solid var(--line-soft); padding-top: 0.9rem; }
.ob-prov > summary {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-3); cursor: pointer;
}
.ob-prov > summary:hover { color: var(--fg-2); }
.ob-prov p { font-size: 0.84rem; color: var(--fg-3); line-height: 1.6; }
.ob-prov code { font-family: var(--mono); color: var(--fg-2); }
.ob-ids { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }

/* --- the feed -------------------------------------------------------------- */

.ob-feed-band { border-top: 1px solid var(--line-soft); }
.ob-feed-lede { color: var(--fg-2); margin: 0 0 1.6rem; font-size: 0.98rem; }
.ob-moments { list-style: none; margin: 0; padding: 0; display: grid; }
.ob-moments-full { max-height: none; }

.ob-moment {
  display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 1.2rem;
  padding: 0.95rem 0; border-top: 1px solid var(--line-soft); align-items: start;
}
.ob-moment:first-child { border-top: 0; }
.ob-when { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--fg-3); padding-top: 0.28rem; text-transform: uppercase; }
.ob-moment-head { margin: 0; font-size: 1rem; line-height: 1.45; }
.ob-moment-detail { margin: 0.35rem 0 0; color: var(--fg-2); font-size: 0.9rem; line-height: 1.6; max-width: 66ch; }

/* An adoption is a constitutional moment. It should read as one — and no more
   than one: this is a record, not a feed that rewards you for watching. */
.ob-moment[data-kind="DECISION"] { border-left: 2px solid var(--ember); padding-left: 1rem; margin-left: -1.2rem; }
.ob-moment[data-kind="DECISION"] .ob-moment-head { font-family: var(--serif); font-size: 1.22rem; line-height: 1.28; }
.ob-moment[data-kind="PROPOSAL"] .ob-moment-head { font-family: var(--serif); font-size: 1.1rem; }
.ob-moment[data-kind="PROPOSAL"] .ob-moment-detail { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ob-moment[data-kind="STRUCTURE"] .ob-moment-head { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-3); }
.ob-moment.is-new { animation: ob-arrive 1.4s ease-out; }
@keyframes ob-arrive { from { background: rgba(217, 138, 58, 0.14); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ob-moment.is-new { animation: none; } }

.ob-feed-more { margin-top: 1.6rem; }
.ob-feed-more a, .ob-back a, .ob-era-prov a { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-soft); }
.ob-feed-more a:hover, .ob-back a:hover, .ob-era-prov a:hover { border-bottom-color: var(--ember); }

/* --- the verdict ----------------------------------------------------------- */

.ob-verdict { border-left: 2px solid var(--ember); padding-left: 1.2rem; margin-bottom: 2.4rem; max-width: 62ch; }
.ob-verdict-status { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.ob-verdict-status b { color: var(--ember); font-weight: 400; }
.ob-verdict-line { margin: 0; font-size: 1.02rem; line-height: 1.6; }

/* The gap between law and fact, drawn as a gap. */
.ob-gap { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(0.8rem, 2.4vw, 2rem); align-items: stretch; }
.ob-gap-col { border: 1px solid var(--line); border-radius: 2px; padding: clamp(0.95rem, 2.2vw, 1.5rem); background: var(--bg-2); }
.ob-gap-col[data-side="law"] { border-left: 3px solid var(--ember); }
.ob-gap-col[data-side="fact"] { border-left: 3px solid var(--mute); }
.ob-gap-col[data-side="fact"][data-on="true"] { border-left-color: var(--verd); }
.ob-gap-col h3 {
  margin: 0 0 0.6rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500; color: var(--fg-3);
}
.ob-gap-col p { margin: 0; font-size: 0.98rem; line-height: 1.55; }
.ob-gap-by { margin-top: 0.7rem !important; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--fg-3); }
.ob-gap-by a { color: var(--ember); }
.ob-gap-arrow { align-self: center; color: var(--fg-3); font-size: 1.3rem; }
.ob-gap-note { margin-top: 1.6rem; max-width: 62ch; }

.ob-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.ob-cap { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.7rem; background: var(--bg); padding: 0.85rem 0.2rem; }
.ob-cap-mark { color: var(--mute); font-size: 0.8rem; line-height: 1.6; }
.ob-cap[data-on="true"] .ob-cap-mark { color: var(--verd); }
.ob-cap b { font-weight: 400; font-size: 0.98rem; display: block; color: var(--fg-2); }
.ob-cap[data-on="true"] b { color: var(--fg); }
.ob-cap-needs { display: block; margin-top: 0.2rem; color: var(--fg-3); font-size: 0.86rem; line-height: 1.5; max-width: 64ch; }
.ob-cap-status {
  display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}
.ob-cap[data-on="true"] .ob-cap-status { color: var(--verd); }
.ob-cap[data-on="false"][data-req="true"] .ob-cap-status { color: var(--ember); }

/* --- history --------------------------------------------------------------- */

.ob-eras { list-style: none; margin: 0; padding: 0; display: grid; }
.ob-era { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 1.2rem; padding-bottom: 2.2rem; position: relative; }
.ob-era::before {
  content: ""; position: absolute; left: 0.42rem; top: 1.2rem; bottom: 0; width: 1px; background: var(--line);
}
.ob-era:last-child { padding-bottom: 0; }
.ob-era:last-child::before { display: none; }
.ob-era-mark {
  width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid var(--verd);
  background: var(--bg); margin-top: 0.35rem; position: relative; z-index: 1;
}
.ob-era[data-failed="true"] .ob-era-mark { border-color: #b25c4a; border-style: dashed; }
.ob-era-body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0 0 0.5rem; letter-spacing: -0.012em; }
.ob-era-tag {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--line-warm); padding: 0.15rem 0.45rem; border-radius: 2px;
  vertical-align: 0.3em; white-space: nowrap;
}
.ob-era-what { margin: 0 0 0.8rem; color: var(--fg-2); line-height: 1.6; max-width: 64ch; }
.ob-era-nums { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0 0 0.7rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--fg-3); }
.ob-era-note { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--fg-3); line-height: 1.6; max-width: 60ch; border-left: 2px solid var(--line); padding-left: 0.9rem; }
.ob-era-prov { margin: 0; font-size: 0.88rem; }

/* --- inhabitants ----------------------------------------------------------- */

.ob-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.ob-person { display: block; background: var(--bg); padding: 1rem 0.9rem; text-decoration: none; color: inherit; height: 100%; }
.ob-person:hover { background: var(--bg-2); }
.ob-person b { font-family: var(--serif); font-weight: 400; font-size: 1.16rem; display: block; }
.ob-person-care { display: block; margin-top: 0.3rem; color: var(--fg-2); font-size: 0.84rem; line-height: 1.45; }
.ob-person-n { display: block; margin-top: 0.55rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.09em; color: var(--fg-3); }

.ob-authored { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.ob-authored a { display: block; background: var(--bg); padding: 0.85rem 0.6rem; text-decoration: none; color: inherit; }
.ob-authored a:hover { background: var(--bg-2); }
.ob-authored b { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; display: block; }
.ob-authored span { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; color: var(--fg-3); display: block; margin-top: 0.25rem; text-transform: uppercase; }

.ob-charter { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.3rem; margin: 1.6rem 0; max-width: 62ch; }
.ob-charter dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-3); padding-top: 0.2rem; }
.ob-charter dd { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; }
.ob-charter-note { max-width: 62ch; font-size: 0.9rem; }

/* --- verification ---------------------------------------------------------- */

.ob-check { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem) !important; }
.ob-steps { max-width: 64ch; padding-left: 1.2rem; }
.ob-steps li { margin-bottom: 0.8rem; line-height: 1.6; color: var(--fg-2); }
.ob-steps b { color: var(--fg); font-weight: 500; }
.ob-steps a { color: var(--ember); }
.ob-derived { margin-top: 1.8rem; }
.ob-back { margin-top: 2rem; }

/* --- mobile ---------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Not a compressed desktop: the measure changes, the rails collapse, and
     the timeline's gutter narrows so text keeps a readable line length. */
  .ob-headline { font-size: clamp(2.05rem, 9vw, 2.9rem); max-width: none; }
  .ob-stats { grid-template-columns: 1fr 1fr; }
  .ob-stat { padding: 0.95rem 0.1rem 1rem; }

  .ob-moment { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .ob-when { padding-top: 0; font-size: 0.6rem; }
  .ob-moment[data-kind="DECISION"] { margin-left: 0; padding-left: 0.9rem; }

  .ob-gap { grid-template-columns: minmax(0, 1fr); }
  .ob-gap-arrow { transform: rotate(90deg); justify-self: start; margin-left: 1rem; }

  .ob-era { grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.85rem; }
  .ob-era::before { left: 0.28rem; }
  .ob-era-mark { width: 0.7rem; height: 0.7rem; }

  .ob-people { grid-template-columns: 1fr 1fr; }
  .ob-person-care { display: none; }

  .ob-charter, .ob-facts { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .ob-charter dt, .ob-facts dt { padding-top: 0.7rem; }

  .ob-law { padding-left: 0.9rem; font-size: 1rem; }
}

@media (max-width: 400px) {
  .ob-people { grid-template-columns: 1fr; }
}