/* Orbit Calendar — red and off-white theme (Sept 2026). Loaded after styles.css.
   Only three colors on the page: red, a pale pink tint of it, and off-white.
   Every box is a red outline; hovers and the current sidebar card fill red.
   A few orbit icons sit behind the boxes in the pink tint and bleed off the
   right edge of the window; box outlines and text draw over them.
   The earlier multicolor version is archived in _old/rainbow-site-2026-09-23. */

:root {
  /* Page color: light pink (trial, 2026-09-23). The off-white was #eee9e5. */
  --paper: #fff2f6;
  /* Red: #ff1378 (2026-09-23). Previously #ff1c66. */
  --red: #ff1378;
  --mono: var(--red);
  --tint: color-mix(in srgb, var(--red) 22%, var(--paper));
  --cur: var(--paper);
  --cur-fg: var(--red);
}

html, body { color: var(--mono); }
.sec, .foot { --c: var(--paper) !important; --fg: var(--mono) !important; }

/* Boxes are see-through: red outlines and text on the off-white page. */
.box, .box.outline {
  background: transparent;
  color: var(--mono);
  box-shadow: inset 0 0 0 1.5px var(--mono);
  z-index: 1;
}
.giant, .subhead, .hero-foot, #subscribe .num, #subscribe .pill { color: var(--mono); }
.g2, .hero-body { border-top-color: var(--mono); }

/* Text columns: about 70% of the box, never longer than ~88 characters a line. */
.copy, .hero-body p { max-width: min(70%, 44em); }

/* Pills and the footer link. */
.pill, .foot .pill, #subscribe .pill { border-color: var(--mono); color: var(--mono); background: transparent; }
.pill:hover, .foot .pill:hover, #subscribe .pill:hover,
.foot .pill.link:hover { background: var(--mono); color: var(--paper); border-color: var(--mono); }
.foot .pill.link { background: transparent; color: var(--mono); text-decoration: none; }

.card { color: var(--mono); box-shadow: inset 0 0 0 1.5px var(--mono); }
.card code { background: var(--tint); }
.next .now { background: var(--mono); color: var(--paper); }
/* Small all-caps pills: Roc Grotesk's capitals sit high in a plain line box, so
   0.1em of top padding centers them (measured in Chrome and Safari/WebKit on
   Retina: 13 device px above, 12 below). */
.next .now, .share { box-sizing: border-box; padding-top: 0.1em; }

/* Sidebar: outlined cards; hover and the current section fill red. */
.side a, .side a.quiet, .side a.on-light, .side a.logo {
  background: var(--paper);
  color: var(--mono);
  box-shadow: inset 0 0 0 1.5px var(--mono);
  transition: flex-grow 0.7s var(--ease), background-color 0.12s, color 0.12s;
}
.side a:hover, .side a.quiet:hover, .side a.logo:hover,
.side a.active, .side a.quiet.active {
  background: var(--mono);
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--mono);
}

/* Logo: Orbit.logo.v2.svg in #ff80ab, turning slowly and flat, like a planet seen from above.
   Small at top left while the card is collapsed; larger and centered at the top
   when the card is the current (red) one, at the top of the page. */
.side a.logo { flex-basis: 140px; align-items: flex-start; justify-content: space-between; gap: 0; }
.side a.logo .mark {
  width: 60px;
  height: auto;
  fill: #ff80ab;
  margin: 2px 0 0;
  transition: width 0.7s var(--ease), margin 0.7s var(--ease);
  animation: turn 24s linear infinite;
}
.side a.logo.active .mark { width: 108px; margin: 18px auto 0; }
@keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.side a.logo .l {
  font-family: var(--font-ui);
  font-size: 17px;
  letter-spacing: var(--track);
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

/* Sidebar numbers in the same extra-wide cut as the box numbers and pills. */
.side a .n { font-family: var(--font-num); font-variation-settings: normal; font-weight: 400; }
/* No dot on the current (red) card. */
.side a.active::after { display: none; }

/* Statements type themselves: the untyped rest is invisible but holds the layout. */
.ruled .tw-off { color: transparent; }
.ruled .caret { height: 0.9em; width: 2px; vertical-align: -0.08em; }
.ruled .tw.done .caret { display: none; }

/* Headlines slide sideways as you scroll (set by app.js). */
.title-box h2, .pills, .pill-line { will-change: transform; }

/* Pills pop in with a little overshoot. */
.pill { transform: scale(0.4); transition: opacity 0.5s var(--ease), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.12s, color 0.12s, border-color 0.12s; }
.in .pill { transform: none; }

/* 101 Editions box: open space above, three lines of pills that slide separately. */
.foot-box { min-height: clamp(380px, 70vh, 760px); justify-content: flex-end; }
.pill-lines { flex-direction: column; align-items: flex-start; }
.pill-line { display: flex; flex-wrap: wrap; }
/* Sized so each of the three lines stays on one row at desktop widths. */
.foot .pill { font-size: clamp(24px, 5vw, 110px); }

/* Tagline sits flush right in the top bar. */
.entering .tagline { white-space: nowrap; }

/* Hero footer: just “Scroll” with a thin arrow, flush right. */
.hero-foot { justify-content: flex-end; }
.hero-foot .scroll { display: inline-flex; align-items: center; gap: 6px; }
.hero-foot .arrow { width: 1.1em; height: 1.1em; fill: currentColor; }

/* Top bar and progress: off-white and red only. */
.entering { background: var(--paper); color: var(--mono); box-shadow: inset 0 0 0 1.5px var(--mono); }
.progress .bar { background: var(--mono); }

/* Let icons run to the window edge: main reaches the right edge and clips there. */
main {
  margin-right: 0;
  padding-right: var(--gap);
  overflow-x: clip;
}

/* The pink background orbit icons were removed on 2026-09-23; see _old/background-icons-2026-09-23. */

@media (max-width: 900px) {
  main { margin: 0; padding: 0 var(--gap); }
  .copy, .hero-body p { max-width: none; }
  .side a.active:not(.logo) { box-shadow: none; }
  .side a.logo .mark, .side a.logo.active .mark { width: 34px; margin: 0; }
  .side a.logo { flex-basis: auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .side a.logo .mark, .logo .star { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Reveal hooks when the piece itself (not its box) is marked in view. */
.num.in { opacity: 1; transform: none; }
h2.in .w > span { transform: none; }

/* Smooth jumps for in-page links; land below the sticky top bar. */
html { scroll-behavior: smooth; }
.box.get { scroll-margin-top: 72px; }

/* 06: the shapes are a menu. Hover swaps the big word for a small label. */
.pill-nav .pill { position: relative; text-decoration: none; cursor: pointer; }
.pill-nav .pill.dot { width: 1.6em; }
.pill-nav .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  letter-spacing: var(--track);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s;
}
.pill-nav .pill:hover .pw, .pill-nav .pill:focus-visible .pw { visibility: hidden; }
.pill-nav .pill:hover .ph, .pill-nav .pill:focus-visible .ph { opacity: 1; }
.pill-nav .pill:focus-visible { background: var(--mono); color: var(--paper); outline: none; }
@media (max-width: 900px) { .pill-nav .ph { font-size: 13px; white-space: normal; text-align: center; line-height: 1.1; padding: 0 8px; } .pill-nav .pill.dot { width: 2.1em; } .box.get { scroll-margin-top: 90px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Share pill: top-right of each calendar's title box, level with the big number. */
.share {
  position: absolute;
  top: 68px;
  right: 64px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0.1em calc(12px - 0.14em) 0 12px;     /* trailing tracking balanced; 0.1em centers the caps */
  border: 1.5px solid var(--mono);
  border-radius: 99px;
  background: transparent;
  color: var(--mono);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.share:hover, .share:focus-visible { background: var(--mono); color: var(--paper); outline: none; }
.share.copied { background: var(--mono); color: var(--paper); }
@media (max-width: 900px) {
  .share { position: static; align-self: flex-start; margin-bottom: 16px; }
}