/* 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; }
}

/* 07 What is all this?: one big link per guide page, ruled like the Next up list.
   The arrow is the hero's arrow turned to point right, at its original light weight
   (large enough not to need the heavier stroke). Hover: a lighter pink, no underline. */
.guides { list-style: none; margin: 0; padding: 0; }
.guides li { border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
.guides li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
.guides a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; text-decoration: none; transition: color 0.2s; }
.guides .g-t { font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 76px); line-height: 1; letter-spacing: -0.03em; }
.guides .arrow { flex: none; width: clamp(32px, 4.2vw, 76px); height: auto; fill: currentColor; transform: rotate(-90deg); transition: transform 0.3s var(--ease); }
.guides a:hover, .guides a:focus-visible { color: color-mix(in srgb, var(--mono) 55%, var(--paper)); outline: none; }
.guides a:hover .arrow { transform: rotate(-90deg) translateY(6px); }

/* Small links from a feed to its guide page. */
.more { margin: -28px 0 40px; font-size: 17px; }
.more a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Nine sidebar cards since 07 was added: on short windows the logo card gives up
   height first, so the current card still has room to stretch. */
@media (min-width: 901px) { .side a.logo { flex-shrink: 1; min-height: 96px; } }

/* Scroll arrow: heavier line (the path is a thin outline; a stroke in its own color thickens it),
   and a slow bob so the hero has some motion on every screen. */
.hero-foot .arrow path { stroke: currentColor; stroke-width: 20; stroke-linejoin: round; }
.hero-foot .arrow { animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

/* Phones (Sept 25, 2026): more of the motion shows up. */
@media (max-width: 900px) {
  /* The typing "You are now entering…" bar returns, tucked under the sticky card row. */
  .entering-wrap { display: block; position: sticky; top: 76px; padding: 0 0 var(--gap); margin: 0; }
  .entering { height: 34px; padding: 0 16px; font-size: 13px; }
  .entering .tagline { display: none; }
  .sec { scroll-margin-top: 130px; }
  .box.get { scroll-margin-top: 130px; }
  /* 101 Editions: bigger shapes; the lines can wrap. */
  .foot .pill { font-size: 8.4vw; }
  .foot-box { min-height: 0; }
}

/* A dot that wraps onto its own row keeps its full round shape. */
.pill.dot { min-height: 1.32em; }