/* Orbit Calendar — topic pages (Mercury retrograde, Full Moons, glossary).
   Loaded after styles.css and theme.css; same red outlines on pink.
   Nothing here waits on scroll animations: every word is visible on load. */

.topic main { padding-bottom: var(--gap); }
.topic .box { padding: 48px 64px 56px; }
.topic a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* Sidebar: no stretching card on these pages; the current page is filled red. */
.topic .side a.active { flex-grow: 0; }
.topic .side a.logo { flex-grow: 1; }
.topic .side a.logo .mark { width: 108px; margin: 18px auto 0; }

/* Heading box */
.page-head { min-height: clamp(360px, 62vh, 680px); display: flex; flex-direction: column; justify-content: flex-end; }
.kicker { font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; margin: 0 0 auto; }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7.4vw, 150px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 48px 0 32px;
}
.lede { font-size: 20px; line-height: 1.4; max-width: min(70%, 44em); margin: 0 0 16px; padding-top: 24px; border-top: 1.5px solid var(--mono); }
.zone { font-size: 14px; margin: 0; }

.big {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
}
.status .big { margin: 0; }
.status[hidden] { display: none; }

.cap { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; margin: 0 0 16px; font-family: var(--font-ui); }

/* Date tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; padding: 0 16px 10px 0; }
td { vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; }
tbody tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
td small { display: block; font-size: 15px; margin-top: 6px; }
td.y { font-family: var(--font-num); font-size: 15px; padding-top: 20px; }
tr.past { opacity: 0.45; }
tr.now td { background: var(--mono); color: var(--paper); }
tr.now td:first-child { border-radius: 12px 0 0 12px; padding-left: 12px; }
tr.now td:last-child { border-radius: 0 12px 12px 0; }
/* "Next" and "Now" sit on their own line above the date, never squeezed beside it.
   Same pill as the home page's small pills: 0.1em top padding centers the capitals. */
tr.next td:first-child::before, tr.now td:first-child::before {
  content: "Next";
  display: flex;
  align-items: center;
  width: fit-content;
  box-sizing: border-box;
  height: 22px;
  padding: 0.1em calc(10px - 0.14em) 0 10px;
  position: absolute;
  top: 16px;
  left: 0;
  border: 1.5px solid currentColor;
  border-radius: 99px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
tr.now td:first-child::before { content: "Now"; left: 12px; }
/* The pill takes its own line above the row, so every cell in the row drops by the
   same amount and the date still lines up with the text beside it. */
td { position: relative; }
tr.next td, tr.now td { padding-top: 48px; }
tr.next td.y, tr.now td.y { padding-top: 52px; }
.years { margin: 24px 0 0; font-size: 17px; }

/* FAQ */
.faq dl { margin: 0; max-width: 52em; }
.faq dl > div { padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
.faq dt { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; }
.faq dd { margin: 0; font-size: 18px; max-width: 40em; }

/* Call to action: the one filled box on the page. */
.cta { background: var(--mono); color: var(--paper); --fg: var(--paper); --c: var(--mono); }
.cta .actions { margin-bottom: 16px; }
.cta .fine { font-size: 15px; margin: 0; }

/* Glossary */
.letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 32px; }
.letters a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0.1em 10px 0;
  border: 1.5px solid var(--mono); border-radius: 99px;
  text-decoration: none; font-family: var(--font-num); font-size: 15px;
}
.letters a:hover { background: var(--mono); color: var(--paper); }
/* Section letters: small, but a step heavier than the entries (Roc Grotesk Wide Bold). */
.letter { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 0.02em; margin: 36px 0 14px; scroll-margin-top: 24px; }
.entry { font-size: 19px; line-height: 1.45; max-width: 44em; margin: 0 0 18px; scroll-margin-top: 24px; }
.entry .term { font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; }
.entry .pron { font-size: 0.85em; }
.entry:target { background: color-mix(in srgb, var(--mono) 12%, transparent); border-radius: 8px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--mono) 12%, transparent); }

.topic .foot-legal a { color: inherit; }
/* 101 Editions is a link, but it reads as plain text: no underline. */
.topic .foot-legal a.quiet { text-decoration: none; }

@media (max-width: 900px) {
  .topic .box { padding: 28px 20px 36px; }
  .topic .side a.logo { flex-grow: 0; }
  .topic .side a.logo .mark { width: 34px; margin: 0; }
  .lede { max-width: none; font-size: 17px; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tr { padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
  td { border: 0 !important; padding: 2px 0; }
  td.y { padding: 0 0 4px; }
  tr.now { background: var(--mono); color: var(--paper); border-radius: 12px; padding: 14px 12px; }
  tr.now td { background: none; }
}
@media (max-width: 900px) {
  td[data-l]::before { content: attr(data-l); display: block; margin: 10px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
}

/* ---- One color per page (Sept 25, 2026): the rainbow site's blue, purple, and green.
   Everything on a page is that one color on a pale tint of it, sidebar included. */
html.c-blue   { --red: #0245de; --mono: #0245de; --paper: #f0f4fd; }
html.c-purple { --red: #962dd3; --mono: #962dd3; --paper: #f9f2fc; }
html.c-green  { --red: #7cae2a; --mono: #7cae2a; --paper: #f5f8f0; }
.topic .side a.logo .mark { fill: color-mix(in srgb, var(--mono) 55%, var(--paper)); }

@media (max-width: 900px) {
  /* Stacked cells on phones: only the first one makes room for the pill. */
  tr.next td, tr.now td { padding-top: 2px; }
  tr.next td:first-child, tr.now td:first-child { padding-top: 34px; }
  tr.next td:first-child::before, tr.now td:first-child::before { top: 0; }
}