/* OffGrid — hub token layer and chrome.
   Loaded only when site.is_hub, so Colorado's stylesheets are untouched.
   The rules here implement docs/DESIGN.md; the law numbers are cited where a
   choice looks arbitrary without them. */

:root {
  --og-paper: #F2F0EA;
  --og-ink: #111111;
  --og-accent: #FF4D00;              /* brand orange: the mark, always */
  /* #FF4D00 measures 2.92:1 on paper — it fails AA for text AND the 3:1
     large-text/graphics floor. WCAG exempts logotypes, so the mark keeps the
     brand orange; anything that is *text* uses the darker token, which is
     4.60:1 on paper. On night the brand orange already clears 5.54:1, so the
     two collapse back to one colour there and the palette stays honest. */
  --og-accent-text: #C43D00;
  --og-ink-soft: rgba(17, 17, 17, 0.62);
  --og-ink-faint: rgba(17, 17, 17, 0.14);

  --og-display: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --og-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif;

  --og-rule: 2px solid var(--og-ink);
  --og-hair: 1px solid var(--og-ink-faint);
  --og-measure: 68ch;
  --og-gutter: clamp(1rem, 4vw, 2.5rem);
  --og-max: 1180px;
}

/* Law 7: night is a first-class expression, not a filter. Ink and paper swap;
   the accent never moves. Paper is not pure white and night is not pure black —
   #000 next to #FF4D00 smears badly on OLED. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --og-paper: #141414;
    --og-ink: #F2F0EA;
    --og-ink-soft: rgba(242, 240, 234, 0.62);
    --og-ink-faint: rgba(242, 240, 234, 0.16);
    --og-accent-text: #FF4D00;
  }
}
:root[data-theme="dark"] {
  --og-paper: #141414;
  --og-ink: #F2F0EA;
  --og-ink-soft: rgba(242, 240, 234, 0.62);
  --og-ink-faint: rgba(242, 240, 234, 0.16);
  --og-accent-text: #FF4D00;
}

/* ---------- reset-ish base ---------- */

body.og {
  margin: 0;
  background: var(--og-paper);
  color: var(--og-ink);
  font-family: var(--og-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.og a { color: inherit; text-decoration: none; }
.og a:hover { color: var(--og-accent-text); }
.og :focus-visible { outline: 2px solid var(--og-accent); outline-offset: 3px; }

.og-wrap { max-width: var(--og-max); margin: 0 auto; padding: 0 var(--og-gutter); }

.og-display {
  font-family: var(--og-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.94;
  text-transform: uppercase;
}

/* ---------- masthead ---------- */

.og-masthead {
  border-bottom: var(--og-rule);
  position: sticky; top: 0; z-index: 20;
  background: var(--og-paper);
}
.og-masthead__inner {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.7rem var(--og-gutter);
  max-width: var(--og-max); margin: 0 auto;
}
.og-brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.og-brand svg { width: 38px; height: 38px; display: block; }
.og-brand__word { font-family: var(--og-display); font-size: 1.65rem; font-weight: 700; letter-spacing: 0.005em; }

.og-nav { display: flex; gap: 1.1rem; align-items: center; font-size: 0.82rem;
          text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }
/* Law 3: the wire marks the active item — a rule, not a pill or a highlight. */
.og-nav a { padding-bottom: 3px; border-bottom: 2px solid transparent; }
.og-nav a:hover, .og-nav a[aria-current="page"] { border-bottom-color: var(--og-accent); color: inherit; }

.og-theme {
  background: none; border: var(--og-hair); color: inherit; cursor: pointer;
  font: inherit; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.32rem 0.6rem; border-radius: 2px;
}
.og-theme:hover { border-color: var(--og-ink); }

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

.og-hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.og-hero h1 {
  font-family: var(--og-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 6.2rem); line-height: 0.9; margin: 0 0 1.1rem;
  letter-spacing: 0.005em;
}
.og-hero p { max-width: var(--og-measure); margin: 0 0 1.4rem; color: var(--og-ink-soft); font-size: 1.05rem; }

/* Law 1 — the Escaped Bird Rule. This is the page's one orange thing. */
.og-tonight { display: flex; align-items: baseline; gap: 0.55rem; font-family: var(--og-display);
              text-transform: uppercase; letter-spacing: 0.04em; }
.og-tonight__n { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--og-accent-text); line-height: 1; }
.og-tonight__label { font-size: 0.95rem; color: var(--og-ink-soft); letter-spacing: 0.1em; }

/* ---------- section heads ---------- */

.og-sec { padding: clamp(1.8rem, 5vw, 3rem) 0; }
.og-sec__head { display: flex; align-items: baseline; justify-content: space-between;
                gap: 1rem; border-bottom: var(--og-rule); padding-bottom: 0.5rem; margin-bottom: 1.4rem; }
.og-sec__head h2 { font-family: var(--og-display); text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 1.9rem);
                   margin: 0; letter-spacing: 0.02em; }
.og-sec__head span { font-size: 0.8rem; color: var(--og-ink-soft); text-transform: uppercase; letter-spacing: 0.09em; }

/* ---------- state directory ---------- */

.og-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
           border-top: var(--og-hair); border-left: var(--og-hair); }
/* Law 2: cells are printed cells — shared hairlines, no shadows, no radius. */
.og-card {
  border-right: var(--og-hair); border-bottom: var(--og-hair);
  /* The bottom padding is a reserved band for the state's drawing. Text and
     terrain used to share that space, and at an opacity where the land was
     actually visible the soft state name measured 4.00:1 - under the 4.5 AA
     floor. Giving the drawing its own strip fixes the contrast and lets the
     art be stronger, rather than trading one against the other. */
  /* 4.8rem clears the glyph band exactly: the art is width * 44/140 tall,
     which at a 223px desktop cell is 70px. 4.3rem measured 0.9px short. */
  padding: 1.05rem 1.1rem 4.8rem; display: flex; flex-direction: column; gap: 0.28rem;
  /* border-box so min-height means the height of the card, not the height of
     its text. Without it the reserved art band was added on top of the
     minimum rather than counted inside it, and the cards came out 259px. */
  box-sizing: border-box;
  min-height: 176px; background: transparent; transition: background 120ms ease;
}
.og-card:hover { background: var(--og-ink-faint); }
.og-card__abbr { font-family: var(--og-display); font-size: 2.5rem; line-height: 0.86; }
.og-card__name { font-size: 0.9rem; color: var(--og-ink-soft); }
.og-card__count { margin-top: auto; font-family: var(--og-display); font-size: 1.28rem; letter-spacing: 0.02em; }
.og-card__blurb { margin-top: auto; font-size: 0.78rem; color: var(--og-ink-soft);
                  text-transform: uppercase; letter-spacing: 0.07em; }
.og-card--scouting { opacity: 0.55; }
.og-card--scouting:hover { opacity: 0.8; }
.og-card--out .og-card__blurb { color: var(--og-ink-soft); }
.og-card__ext { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--og-ink-soft); }

/* ---------- manifesto ---------- */

.og-manifesto { border-top: var(--og-rule); border-bottom: var(--og-rule); padding: clamp(1.6rem,4vw,2.4rem) 0; }
.og-manifesto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem;
                   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.og-manifesto h3 { font-family: var(--og-display); text-transform: uppercase; font-size: 1rem;
                   letter-spacing: 0.06em; margin: 0 0 0.3rem; }
.og-manifesto p { margin: 0; font-size: 0.92rem; color: var(--og-ink-soft); }

/* ---------- footer ---------- */

.og-footer { padding: 2.2rem 0 3rem; font-size: 0.86rem; color: var(--og-ink-soft); }
.og-footer__wire { display: block; width: 100%; height: 14px; margin-bottom: 1.4rem; }
.og-footer a { border-bottom: 1px solid var(--og-ink-faint); }
.og-footer a:hover { border-bottom-color: var(--og-accent); }
.og-footer__cols { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: flex-start; }
.og-footer__tag { font-family: var(--og-display); text-transform: uppercase; letter-spacing: 0.05em;
                  font-size: 1.05rem; color: var(--og-ink); }

/* Law 5: texture is seasoning — a single faint paper tile on chrome surfaces
   only, never behind data. Kept as a gradient so it costs no request. */
.og-paper-tint {
  background-image: radial-gradient(var(--og-ink-faint) 0.5px, transparent 0.5px);
  background-size: 14px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .og *, .og *::before, .og *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 620px) {
  /* Two columns of abbreviations rather than nine stacked cards - the
     directory is a scannable index, not a feed. */
  /* minmax(0,1fr), not 1fr: a plain 1fr track refuses to shrink below its
     min-content, and Colorado's "coloradobarmusic.com" link made one column
     50% wider than the other. */
  .og-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-card__ext { overflow-wrap: anywhere; }
  /* The bottom padding still has to clear the art band, or the count sits on
     top of the drawing - which it did on every card at this width, because
     this override replaced the whole padding shorthand and dropped the
     reserved strip with it. The band is shorter here only because the card is
     narrower and the SVG scales with width. */
  .og-card { min-height: 148px; padding: 0.85rem 0.85rem 3.5rem; }
  .og-card__abbr { font-size: 2.1rem; }
  .og-masthead__inner { flex-wrap: wrap; gap: 0.7rem 1rem; }
  .og-nav { order: 3; width: 100%; gap: 0.9rem; }
  body.og { font-size: 16px; }
}

/* ---------- prose (about) ---------- */

.og-hero--tight { padding-bottom: 0.6rem; }
.og-lede { font-size: 1.18rem; color: var(--og-ink); max-width: var(--og-measure); }
.og-prose__body { max-width: 62ch; padding-bottom: 2.4rem; border-top: var(--og-rule); padding-top: 1.6rem; }
.og-prose__body p { margin: 0 0 1.1rem; }
.og-prose__body h2 {
  font-family: var(--og-display); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 1.35rem; margin: 2.1rem 0 0.7rem; padding-bottom: 0.3rem;
  border-bottom: var(--og-hair);
}
.og-prose__body a { border-bottom: 1px solid var(--og-ink-faint); }
.og-prose__body a:hover { border-bottom-color: var(--og-accent-text); }
/* The mark gets to be an illustration here rather than chrome — the one page
   with room for it. */
.og-prose__mark { padding: 0 0 3rem; opacity: 0.85; }

/* ---------- state page ---------- */

.og-crumb { margin: 1.4rem 0 0; font-size: 0.78rem; text-transform: uppercase;
            letter-spacing: 0.09em; color: var(--og-ink-soft); }
.og-crumb a { border-bottom: 1px solid var(--og-ink-faint); }

.og-state-head { padding-bottom: 1rem; border-bottom: var(--og-rule); }
.og-state-head h1 {
  font-family: var(--og-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 5.4rem); line-height: 0.9;
  margin: 0.5rem 0 0.4rem; letter-spacing: 0.005em;
}
.og-state-sub { margin: 0 0 0.2rem; color: var(--og-ink-soft); font-size: 0.98rem; }
.og-state-sub strong { color: var(--og-ink); font-weight: 600; }

/* Town chips: printed tags, not pills. */
.og-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 1rem 0 0.2rem; }
.og-chips a {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.28rem 0.6rem; border: var(--og-hair); border-radius: 2px;
  color: var(--og-ink-soft);
}
.og-chips a:hover { border-color: var(--og-ink); color: var(--og-ink); }
.og-chips a[aria-current="page"] { border-color: var(--og-ink); color: var(--og-ink); font-weight: 600; }

.og-day { padding-top: 1.6rem; }
.og-day__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--og-display); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1.15rem; margin: 0 0 0.2rem; padding-bottom: 0.35rem;
  border-bottom: var(--og-rule);
}
.og-day__head--now { color: var(--og-accent-text); }
.og-day__n { font-size: 0.82rem; color: var(--og-ink-soft); letter-spacing: 0.08em; }

.og-list { list-style: none; margin: 0; padding: 0; }
/* A listing row, not a card: hairline between entries, no box, no shadow. */
.og-row {
  display: grid; grid-template-columns: 5.4rem 1fr 15rem; gap: 0.9rem;
  padding: 0.62rem 0; border-bottom: var(--og-hair); align-items: baseline;
}
.og-row__time { font-variant-numeric: tabular-nums; font-size: 0.86rem;
                color: var(--og-ink-soft); white-space: nowrap; }
.og-row__band { font-weight: 600; }
.og-row__venue { font-size: 0.88rem; color: var(--og-ink-soft); text-align: right; }
.og-row__city { opacity: 0.75; }
.og-row__city::before { content: "· "; }

.og-beyond { margin: 1.8rem 0 0; padding-top: 1rem; border-top: var(--og-hair);
             font-size: 0.88rem; color: var(--og-ink-soft); }

.og-empty { padding: 3rem 0 4rem; border-top: var(--og-rule); margin-top: 1rem; }
.og-empty__line { font-family: var(--og-display); text-transform: uppercase;
                  font-size: clamp(1.2rem, 3vw, 1.7rem); margin: 0 0 0.5rem; }
.og-empty__sub { margin: 0; color: var(--og-ink-soft); }
.og-empty__sub a { border-bottom: 1px solid var(--og-ink-faint); }

@media (max-width: 720px) {
  .og-row { grid-template-columns: 4.6rem 1fr; gap: 0.6rem; }
  .og-row__venue { grid-column: 2; text-align: left; padding-bottom: 0.1rem; }
}

/* Folded town tail. <details> is the whole mechanism - no JS, and it stays
   usable with scripting off, which a hand-rolled toggle would not. */
.og-chips__more { display: inline-block; }
.og-chips__more > summary {
  /* Deliberately not setting `display`. Overriding it to inline-block drops
     the summary's disclosure semantics - the accessibility tree reported it as
     a plain generic, so a screen reader never announced it as expandable.
     list-style plus the -webkit marker rule removes the triangle on their own. */
  cursor: pointer;
  width: max-content;
  list-style: none;
  padding: .28rem .7rem;
  border: 1px solid var(--og-rule);
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  color: var(--og-ink-soft);
  background: none;
}
.og-chips__more > summary::-webkit-details-marker { display: none; }
.og-chips__more > summary:hover { border-color: var(--og-ink); color: var(--og-ink); }
.og-chips__more > summary:focus-visible { outline: 2px solid var(--og-accent-text); outline-offset: 2px; }
.og-chips__more[open] > summary { border-style: dashed; }
/* Closed, this is a chip-sized flex item sitting in the row. Open, its contents
   still measure against that chip width, so long town names spill past the
   viewport - take the whole row instead so the list can wrap inside it. */
.og-chips__more[open] { flex: 1 0 100%; }
/* Hide the tail explicitly rather than leaning on the UA rule for a closed
   <details>. That rule is not reliable once the details carries author display
   styles: measured in Chrome, a closed disclosure still laid its 45 towns out
   as a 1,475px column spilling from a 30px box. Stating both states directly
   is a few more bytes and cannot silently stop working. */
.og-chips__more:not([open]) > .og-chips__rest { display: none; }
.og-chips__more[open] > .og-chips__rest {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: .55rem;
}

/* ---- Error pages and empty states -------------------------------------- */
/* Both are the same shape: a drawing, a short line, a way out. They share the
   motif system rather than each inventing artwork. */
.og-error {
  max-width: 34rem;
  padding-top: clamp(3rem, 10vh, 6rem);
  padding-bottom: 5rem;
  text-align: center;
}
.og-error__art {
  display: block;
  width: min(280px, 78%);
  height: auto;
  margin: 0 auto 1.6rem;
}
.og-error__code {
  font-family: var(--og-display);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--og-ink-soft);
  margin: 0 0 .5rem;
}
.og-error h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.05;
  margin: 0 0 .7rem;
}
.og-error__msg {
  color: var(--og-ink-soft);
  margin: 0 auto 1.8rem;
  max-width: 30rem;
}
.og-error__actions {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.og-error__actions a {
  padding: .5rem 1.1rem;
  border: 1px solid var(--og-rule);
  border-radius: 999px;
  text-decoration: none;
  color: var(--og-ink);
  font-size: .92rem;
}
.og-error__actions a:hover { border-color: var(--og-ink); }
.og-error__actions a:focus-visible { outline: 2px solid var(--og-accent-text); outline-offset: 2px; }

/* The state page's empty state borrows the same drawing. */
.og-empty__art {
  display: block;
  width: min(240px, 70%);
  height: auto;
  margin: 0 auto 1.2rem;
}

/* Law 6 in the directory: each state's own wire, drawn from its code. Set low
   so it reads as the texture of a printed cell rather than an illustration
   competing with the type - and ink-only, because Law 1 allows one orange
   element per view and a grid of these would be fifty. */
.og-card { position: relative; overflow: hidden; }
/* A horizon across the foot of the card, not a vignette in the corner. At 62%
   width in the bottom-right the state's own glyph was cropped by the card edge
   and read as smudge; full width gives the land somewhere to sit and makes the
   card legible as Colorado-or-Kansas at a glance.
   No opacity here: it would multiply with the layer opacities inside the SVG,
   which is what buried the terrain at 2.5% in the first place. */
.og-card__art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: opacity 120ms ease;
}
/* Hover lifts the two layers by name. A wrapper opacity cannot do this - it
   would multiply down into them - and CSS beats the SVG presentation
   attributes, so the inline weights are the resting state and these are the
   hover state. */
.og-card:hover .og-card__art .og-motif__land { opacity: .62; }
/* The card's own text has to sit above the drawing. */
.og-card > span { position: relative; }

/* The state's own line - flavor, not boilerplate. Full ink where the count
   line below it is soft: the scene is the claim, the number is the data. */
.og-state-known {
  margin: .35rem 0 .2rem;
  font-size: 1.02rem;
  color: var(--og-ink);
  max-width: var(--og-measure);
}

/* The masthead horizon. Sits on the masthead's bottom edge like a skyline on
   a poster footer; the terrain's own opacity lives inside the SVG. */
.og-state-scape {
  display: block;
  width: 100%;
  height: auto;
  margin: .9rem 0 0;
}

/* Colorado runs its own site; the state page says so rather than the card
   sending you there. Soft, because it is a footnote, not the headline. */
.og-state-alt {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--og-ink-soft);
}
.og-state-alt a { border-bottom: 1px solid var(--og-ink-faint); }
.og-state-alt a:hover { border-bottom-color: var(--og-accent); }

/* ---- Listing filter (rendered by script; no-JS pages never see it) ------ */
#og-filter-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  margin: 1.3rem 0 .4rem;
}
.og-filter__q {
  flex: 1 1 15rem;
  max-width: 24rem;
  font: inherit;
  font-size: .95rem;
  color: var(--og-ink);
  background: none;
  border: 1px solid var(--og-rule);
  border-radius: 2px;
  padding: .45rem .7rem;
}
.og-filter__q::placeholder { color: var(--og-ink-soft); }
.og-filter__q:focus-visible { outline: 2px solid var(--og-accent-text); outline-offset: 2px; }
.og-filter__scopes { display: flex; gap: .4rem; }
.og-filter__scopes button {
  font: inherit;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--og-ink-soft);
  background: none;
  border: 1px solid var(--og-rule);
  border-radius: 999px;
  padding: .32rem .75rem;
  cursor: pointer;
}
.og-filter__scopes button:hover { border-color: var(--og-ink); color: var(--og-ink); }
.og-filter__scopes button[aria-pressed="true"] {
  color: var(--og-paper);
  background: var(--og-ink);
  border-color: var(--og-ink);
}
.og-filter__scopes button:focus-visible { outline: 2px solid var(--og-accent-text); outline-offset: 2px; }
.og-filter__count {
  flex-basis: 100%;
  margin: 0;
  font-size: .82rem;
  color: var(--og-ink-soft);
}
.og-filter__none { color: var(--og-ink-soft); padding: 1.4rem 0 .6rem; }
.og-filter__none a { border-bottom: 1px solid var(--og-ink-faint); }
.og-filter__none a:hover { border-bottom-color: var(--og-accent); }

/* ---- State map ---------------------------------------------------------- */
/* The silhouette is the same faint-ink language as the terrain glyphs. Two
   marks share one area scale: a filled pin is a venue (click for
   directions), a hollow dot is a town holding the shows whose venue has no
   pin yet. */
.og-map { margin: 1.6rem 0 .4rem; }
.og-map svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.og-map__state {
  fill: var(--og-ink);
  fill-opacity: .07;
  stroke: var(--og-ink);
  stroke-opacity: .5;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.og-map__dot {
  fill: var(--og-ink);
  fill-opacity: .55;
  stroke: var(--og-paper);
  stroke-width: 1;
  transition: fill-opacity 120ms ease;
}
.og-map__dot--town {
  fill-opacity: .12;
  stroke: var(--og-ink);
  stroke-opacity: .45;
  stroke-width: 1.1;
}
.og-map a:hover .og-map__dot,
.og-map a:focus-visible .og-map__dot { fill-opacity: 1; }
.og-map a:hover .og-map__dot--town,
.og-map a:focus-visible .og-map__dot--town { fill-opacity: .3; }
.og-map a:focus-visible { outline: 2px solid var(--og-accent-text); outline-offset: 2px; }
.og-map__label {
  font-family: var(--og-body);
  font-size: 11px;
  letter-spacing: .02em;
  fill: var(--og-ink);
  fill-opacity: .78;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--og-paper);
  stroke-width: 2.6px;
}

/* ---- Stage motif -------------------------------------------------------- */
/* Sits at the foot of a listing run: the room the listings above are about.
   Faint, wide, and never competing with the type. */
.og-stage { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.og-stage-rule {
  margin: 2.6rem 0 0;
  padding-top: 1.6rem;
  border-top: var(--og-hair);
  text-align: center;
}
.og-stage-rule p {
  margin: .5rem 0 0;
  font-family: var(--og-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  color: var(--og-ink-soft);
}
/* The empty state gets it too: a stage with nothing booked is the picture. */
.og-empty .og-stage { max-width: 260px; margin-bottom: 1.1rem; }