/* ==========================================================================
   IndieFounder "Retro Press" design system  ·  loaded LAST
   --------------------------------------------------------------------------
   Tokens live in theme.css. This layer paints the signature components for
   every route (public, admin, modals):
     · warm paper + dot grid, JetBrains Mono display, Work Sans body
     · 1.5px ink outlines, hard offset shadows, press-down buttons
     · outlined pill tags, sun-yellow torn "sticker" titles, sparkle ornaments
     · neon-lime hero band, charcoal footer
   Selectors use  html body :is(...)  so one rule beats the older per-page
   layers (specificity 0,1,2) without a pile of !important chains.
   ========================================================================== */

/* ---------- 0. Canvas ---------- */
html body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-text);
  font-feature-settings: "ss01", "cv11";
}
html body :is(a) { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
html body :focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 5px var(--line-strong);
}
html body ::selection { background: var(--lime); color: #1c1b16; }

/* ---------- 1. Type ---------- */
html body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}
html body h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
html body h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); }
html body h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
html body :is(h4, h5, h6) { font-size: 1rem; letter-spacing: -0.01em; }

/* eyebrow / kicker → outlined pill */
html body :is(.eyebrow, .pg-eyebrow, .hero-kicker, .ft-eyebrow, .docs-eyebrow, .makers-eyebrow, .dash-eyebrow,
  .fc-eyebrow, .cats-eyebrow, .story-deck-kicker, .learn-explorer-kicker, .ft-card-kicker) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: 700 0.74rem/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* big numbers use the mono face */
html body :is(.stories-listing-stat strong, .maker-stat-val, .dash-metric-val, .ft-primary-result strong,
  .ft-result-row strong, .fp-stat-value, .launch-rank, .wk-rank, .step-num, .share-step, .today-rank-num) {
  font-family: var(--font-mono);
  font-weight: 800;
}

/* ---------- 2. Sparkle + sticker ornaments ---------- */
html body :is(.rp-spark) {
  --s: 44px;
  --c: var(--coral);
  position: absolute;
  width: var(--s);
  height: var(--s);
  background: var(--c);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12 16.8 12.8 12.8 16.8 12 24 11.2 16.8 7.2 12.8 0 12 7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7.2 16.8 11.2 24 12 16.8 12.8 12.8 16.8 12 24 11.2 16.8 7.2 12.8 0 12 7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: rp-twinkle 5s ease-in-out infinite;
}
@keyframes rp-twinkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(18deg) scale(1.12); }
}

/* torn-paper label: sun yellow with notched edges (the "Frequently Asked Questions" look) */
html body :is(.rp-sticker, .page-head h1, .makers-head h1, .stories-listing-head h1, .pg-hero h1, .launches-cat-heading,
  .section-head h2, .cats-head h1, .docs-hub-head h1) {
  display: inline-block;
  max-width: 100%;
  padding: 0.14em 0.5em 0.18em;
  background: var(--sun);
  color: #1c1b16;
  text-align: left;
  transform: rotate(-1.2deg);
  -webkit-clip-path: polygon(0 5%, 1.6% 0, 98.5% 3%, 100% 0, 100% 38%, 98.6% 44%, 100% 50%, 100% 100%, 1.6% 97%, 0 100%, 0 58%, 1.4% 52%, 0 46%);
  clip-path: polygon(0 5%, 1.6% 0, 98.5% 3%, 100% 0, 100% 38%, 98.6% 44%, 100% 50%, 100% 100%, 1.6% 97%, 0 100%, 0 58%, 1.4% 52%, 0 46%);
}
html body :is(.pg-hero h1 span, .articles-page .pg-hero h1 span) { color: inherit; text-decoration: underline wavy var(--coral) 2px; text-underline-offset: 8px; }
html body :is(.pg-hero, .page-head, .makers-head, .stories-listing-head) { text-align: left; }
html body :is(.pg-hero) { border-bottom: 0; }

/* marker highlight for emphasis words */
html body :is(.rp-hl, mark) {
  background: linear-gradient(transparent 52%, var(--lime-deep) 52%, var(--lime-deep) 92%, transparent 92%);
  color: inherit;
  padding: 0 0.08em;
}

/* ---------- 3. Header ---------- */
html body .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: var(--bw) solid var(--header-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html body .site-header .bar { min-height: var(--header-h); gap: clamp(10px, 1.6vw, 22px); }
html body .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
html body .brand-mark { width: 32px; height: 32px; flex-shrink: 0; overflow: visible; }
html body .brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--ink);
}
html body .brand-name b {
  font-weight: 800;
  background: linear-gradient(transparent 58%, var(--lime-deep) 58%, var(--lime-deep) 94%, transparent 94%);
}
html body .site-header .main-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; border: 0; background: transparent; }
html body .site-header .main-nav a {
  padding: 7px 13px;
  border: var(--bw) solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font: 600 0.9rem/1.2 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s, transform 0.12s;
}
html body .site-header .main-nav a:hover { background: var(--surface-2); border-color: var(--line-strong); }
html body .site-header .main-nav a[aria-current="page"] { background: var(--sun); border-color: var(--line-strong); color: #1c1b16; }
html body .site-header .main-nav a[aria-current="page"]::after { display: none; }
html body .site-header .bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

html body :is(.palette-trigger, .theme-toggle) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.86rem/1 var(--font-text);
  box-shadow: none;
  cursor: pointer;
}
html body .theme-toggle { width: 40px; padding: 0; justify-content: center; }
html body :is(.palette-trigger, .theme-toggle):hover { background: var(--lime); color: #1c1b16; box-shadow: 2px 2px 0 var(--line-strong); transform: translate(-1px, -1px); }
html body .palette-trigger-text { color: var(--muted); font-weight: 500; }
html body :is(.palette-kbd, kbd) {
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  font: 700 0.68rem/1.3 var(--font-mono);
  box-shadow: 0 1.5px 0 var(--line-strong);
}
html body .site-header #nav-login { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
html body .site-header #nav-login:hover { background: var(--surface-2); box-shadow: 2px 2px 0 var(--line-strong); }

/* ---------- 4. Buttons ---------- */
html body :is(.button, .btn, .btn-primary, .hm-btn, .hm-btn-primary, .pg-btn, .pg-btn-primary, .dash-btn, .dash-btn-primary,
  .spotlight-visit-btn, .spotlight-story-btn, .cats-btn, .foot-news-row button, button[type="submit"], .launch-page-btn,
  .maker-x-btn, .course-start-btn, .detail-badge-btn, .detail-visit-btn, .badge-copy-btn, .badge-style-btn,
  .digest-share-btn, .otp-resend-btn, .login-btn, .docs-vote-btn, .docs-copy-page-btn, .docs-mobile-nav-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: 700 0.92rem/1 var(--font-text);
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
html body :is(.button, .btn, .btn-primary, .hm-btn, .hm-btn-primary, .pg-btn, .pg-btn-primary, .dash-btn, .dash-btn-primary,
  .spotlight-visit-btn, .spotlight-story-btn, .cats-btn, .foot-news-row button, button[type="submit"], .launch-page-btn,
  .maker-x-btn, .course-start-btn, .detail-badge-btn, .detail-visit-btn, .badge-copy-btn, .badge-style-btn,
  .digest-share-btn, .otp-resend-btn, .login-btn, .docs-vote-btn, .docs-copy-page-btn):hover {
  background: var(--sun);
  color: #1c1b16;
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--line-strong);
}
html body :is(.button, .btn, .btn-primary, .hm-btn, .pg-btn, .dash-btn, .course-start-btn, button[type="submit"], .launch-page-btn):active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 var(--line-strong);
}
html body :is(.button.ghost, .button.quiet, .button-quiet, .hm-btn-ghost, .pg-btn-ghost, .dash-btn-quiet, .btn-quiet, .cats-btn-quiet) {
  background: var(--btn-quiet-bg);
  color: var(--ink);
  border: var(--bw) solid var(--line-strong);
}
html body :is(.button.ghost, .button.quiet, .button-quiet, .hm-btn-ghost, .pg-btn-ghost, .dash-btn-quiet, .btn-quiet, .cats-btn-quiet):hover {
  background: var(--lime);
  color: #1c1b16;
  box-shadow: 3px 3px 0 var(--line-strong);
}
/* attention buttons: sun fill + hard shadow */
html body :is(.lcat-hero-submit-btn, .launch-submit-trigger, .nav-submit, .button.accent) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--sun);
  color: #1c1b16;
  font: 800 0.9rem/1 var(--font-text);
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--line-strong);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.12s;
}
html body :is(.lcat-hero-submit-btn, .launch-submit-trigger, .nav-submit, .button.accent):hover {
  background: var(--lime);
  color: #1c1b16;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--line-strong);
}
html body :is(.lcat-hero-submit-btn, .launch-submit-trigger, .nav-submit, .button.accent):active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--line-strong); }

/* round +/- icon buttons used by accordions */
html body :is(summary) { cursor: pointer; }

/* upvote: tall ink-outlined pill */
html body :is(.launch-upvote-btn, .vote-btn) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 54px;
  padding: 10px 8px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
  font: 800 0.95rem/1 var(--font-mono);
  box-shadow: 3px 3px 0 var(--line-strong);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}
html body :is(.launch-upvote-btn, .vote-btn):hover { background: var(--lime); color: #1c1b16; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line-strong); }
html body :is(.launch-upvote-btn[aria-pressed="true"], .launch-upvote-btn.is-voted, .vote-btn.is-voted) {
  background: var(--sun);
  color: #1c1b16;
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--line-strong);
}

/* ---------- 5. Pills, tags, tabs ---------- */
html body :is(.tag, .chip, .badge, .launch-cat-pill, .lcat-pill, .lcat-time-btn, .launch-filter-pill, .launch-sort-btn,
  .pricing-filter-btn, .stats-tab-btn, .roadmap-tab-btn, .submit-cat-btn, .topic-pill, .post-category-pill, .story-stage-pill,
  .story-type-badge, .course-badge, .docs-course-chip, .docs-tab, .job-type, .jobs-filter, .fp-verified, .share-live-pill, .wk-tag,
  .palette-filter-pill, .launch-pricing-pill, .launch-fresh-pill, .spotlight-tag, .status-badge, .phase-pill, .tech-pill,
  .library-tab, .glossary-cat-pill, .rp-pill, .rp-chip) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.78rem/1.25 var(--font-text);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
html body :is(.chip) { background: var(--tc-bg, var(--surface)); color: var(--ink); }
html body :is(.chip)::before { width: 7px; height: 7px; background: var(--tc-line, var(--ink)); }
html body :is(button.lcat-pill, button.lcat-time-btn, a.lcat-pill, .launch-filter-pill, .launch-sort-btn, .pricing-filter-btn, .stats-tab-btn,
  .roadmap-tab-btn, .submit-cat-btn, .docs-tab, .jobs-filter, .library-tab, .glossary-cat-pill, .palette-filter-pill, .rp-chip) {
  cursor: pointer;
  transition: transform 0.1s, background-color 0.1s, box-shadow 0.1s;
}
html body :is(button.lcat-pill, button.lcat-time-btn, .launch-filter-pill, .launch-sort-btn, .pricing-filter-btn, .stats-tab-btn,
  .roadmap-tab-btn, .submit-cat-btn, .docs-tab, .jobs-filter, .library-tab, .glossary-cat-pill, .palette-filter-pill, .rp-chip):hover {
  background: var(--lime);
  color: #1c1b16;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--line-strong);
}
html body :is(.lcat-pill.is-active, .lcat-time-btn.is-active, .launch-filter-pill.is-active, .launch-sort-btn.is-active, .pricing-filter-btn.is-active,
  .stats-tab-btn.is-active, .roadmap-tab-btn.is-active, .submit-cat-btn.is-active, .docs-tab.is-active, .docs-tab[aria-selected="true"],
  .jobs-filter.is-active, .library-tab.is-active, .glossary-cat-pill.is-active, .palette-filter-pill.is-active) {
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: none;
  transform: none;
}
html body :is(.lcat-pill.lcat-explore) { background: var(--sun); color: #1c1b16; font-weight: 800; box-shadow: 2px 2px 0 var(--line-strong); }
html body :is(.lcat-divider) { width: 1.5px; align-self: stretch; margin: 4px 4px; background: var(--line-strong); opacity: 0.35; }

/* rank badge: colourful square stamp */
html body :is(.launch-rank, .wk-rank, .rank-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 9px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--ink);
  font: 800 0.8rem/1.2 var(--font-mono);
  box-shadow: 2px 2px 0 var(--line-strong);
}
html body :is(.launch-rank.rank-1) { background: var(--sun); color: #1c1b16; }
html body :is(.launch-rank.rank-2) { background: var(--mint); color: #0c3a36; }
html body :is(.launch-rank.rank-3) { background: var(--bubblegum); color: #4a0d2a; }

/* ---------- 6. Cards & panels ---------- */
html body :is(.launch-card, .home-launch-card, .launches-panel, .launches-side-panel, .activity-card, .activity-sidebar-card,
  .ranking-sidebar-card, .story-card, .story-featured, .stories-listing-stat, .story-explorer-tools, .maker-card, .maker-product-card,
  .maker-hero-card, .topic-tile, .cats-card, .category-card, .course-card-featured, .course-card, .docs-resource-card, .docs-pager-card,
  .author-card, .digest-story-card, .digest-product-card, .digest-article-card, .tool-card, .tool-panel, .ft-card,
  .ft-form-panel, .ft-results, .stats-panel, .stat-card, .potw-card, .spotlight-card, .post-card, .entry, .callout, .sponsored-slot,
  .sponsor-inline, .launches-search-bar, .roadmap-card, .roadmap-node-card, .library-card, .series-card, .series-hub-card,
  .series-banner, .dash-card, .dash-panel, .dash-preview-card, .dash-login, .dash-note, .dash-msg, .wk-item, .today-ranking-card,
  .cal-day, .launch-calendar-card, .job-card, .jobs-post, .fc-head, .fc-compose, .fc-feed-section, .fc-post, .fp-card, .fc-empty,
  .share-editor, .share-preview-pane, .post-rail .toc, .post-author-box, .article-author-card, .article-cta, .related-posts,
  .admin-section, .admin-card, .nf-card, .nf-search-box) {
  background: var(--card-bg);
  border: var(--bw) solid var(--card-border);
  border-radius: var(--radius-l);
  box-shadow: var(--card-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
html body :is(.launch-card, .home-launch-card, .story-card, .story-featured, .maker-card, .maker-product-card, .topic-tile, .cats-card,
  .category-card, .course-card-featured, .course-card, .docs-resource-card, .docs-pager-card, .author-card, .tool-card, .ft-card,
  .potw-card, .digest-story-card, .digest-product-card, .digest-article-card, .post-card, .entry, .wk-item, .job-card, .fc-post, .library-card,
  .series-card, .series-hub-card, .roadmap-card):hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--card-hover-border);
}
/* highlighted podium cards */
html body :is(.launch-card.is-top-rank) { background: color-mix(in srgb, var(--lime) 42%, var(--card-bg)); }
html body :is(.launch-card.is-top-rank:nth-of-type(2)) { background: color-mix(in srgb, var(--sun) 34%, var(--card-bg)); }
html body :is(.launch-card.is-top-rank:nth-of-type(3)) { background: color-mix(in srgb, var(--bubblegum) 30%, var(--card-bg)); }

html body :is(.launch-icon-box, .maker-avatar, .maker-card-avatar) {
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: 2px 2px 0 var(--line-strong);
  overflow: hidden;
}
html body :is(.launch-name, .story-card-title, .course-card-title, .job-title, .wk-name) { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
html body :is(.launch-description, .story-card-excerpt, .entry-excerpt) { color: var(--prose); }
html body :is(.launch-maker-link, .launch-domain-link) { color: var(--ink); font-weight: 600; }
html body :is(.launch-maker-link:hover, .launch-domain-link:hover) { color: var(--accent-text); }
html body :is(.launch-maker-avatar) { border: 1.5px solid var(--line-strong); border-radius: 50%; }

/* dashed "sponsored" slots get the retro ticket look */
html body :is(.sponsored-slot, .sponsor-inline) { border-style: dashed; background: var(--surface); box-shadow: none; }

/* ---------- 7. Forms ---------- */
html body :is(input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"])), textarea, select) {
  min-height: 44px;
  padding: 10px 14px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
  font: 500 0.95rem/1.4 var(--font-text);
  box-shadow: none;
  transition: box-shadow 0.12s, background-color 0.12s;
}
html body :is(textarea) { min-height: 110px; }
html body :is(input, textarea, select)::placeholder { color: var(--muted); opacity: 1; }
html body :is(input:where(:not([type="checkbox"], [type="radio"])), textarea, select):focus {
  outline: none;
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--sun);
}
html body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ink); width: 18px; height: 18px; }
html body :is(.launches-search-bar) { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: var(--radius-m); box-shadow: var(--card-shadow); }
html body :is(.launches-search-bar) input { border: 0; box-shadow: none; background: transparent; min-height: 52px; padding-inline: 4px; flex: 1; }
html body :is(.launches-search-bar) input:focus { box-shadow: none; }
html body :is(.launches-search-bar):focus-within { box-shadow: 5px 5px 0 var(--sun); border-color: var(--line-strong); }

/* ---------- 8. Home hero (.rp-hero) ---------- */
html body .rp-hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-ink);
  border-bottom: var(--bw) solid var(--line-strong);
  background-image: radial-gradient(rgba(35, 38, 10, 0.16) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  padding: clamp(2.6rem, 7vw, 5.2rem) 0 clamp(2.4rem, 6vw, 4.2rem);
}
html body .rp-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
html body .rp-hero .rp-pill { background: #fffdf4; color: #1c1b16; border-color: #1c1b16; }
html body .rp-hero h1 {
  margin: 1.1rem 0 0;
  max-width: 15ch;
  color: var(--hero-ink);
  font-size: clamp(2.35rem, 7.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  display: block;
  padding: 0;
  background: none;
  transform: none;
  clip-path: none;
  -webkit-clip-path: none;
  text-align: center;
}
html body .rp-hero h1 .rp-sticker-inline {
  display: inline-block;
  margin-top: 0.1em;
  padding: 0.04em 0.34em 0.1em;
  background: var(--sun);
  color: #1c1b16;
  transform: rotate(-1.6deg);
  -webkit-clip-path: polygon(0 6%, 1.6% 0, 98.5% 3%, 100% 0, 100% 38%, 98.6% 44%, 100% 50%, 100% 100%, 1.6% 97%, 0 100%, 0 58%, 1.4% 52%, 0 46%);
  clip-path: polygon(0 6%, 1.6% 0, 98.5% 3%, 100% 0, 100% 38%, 98.6% 44%, 100% 50%, 100% 100%, 1.6% 97%, 0 100%, 0 58%, 1.4% 52%, 0 46%);
}
html body .rp-hero-sub { margin: 1.3rem 0 0; max-width: 56ch; color: #343812; font-size: clamp(1rem, 1.9vw, 1.18rem); line-height: 1.6; font-weight: 500; }

html body .rp-search {
  display: flex;
  width: min(100%, 640px);
  margin-top: 1.9rem;
  border: var(--bw) solid #1c1b16;
  border-radius: var(--radius-m);
  background: #fffdf4;
  box-shadow: 5px 5px 0 #1c1b16;
  overflow: hidden;
}
html body .rp-search:focus-within { box-shadow: 7px 7px 0 #1c1b16; transform: translate(-1px, -1px); }
html body .rp-search svg { align-self: center; margin-left: 16px; flex-shrink: 0; color: #1c1b16; }
html body .rp-search input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1c1b16;
  box-shadow: none;
  font: 500 1rem/1 var(--font-text);
}
html body .rp-search input:focus { box-shadow: none; background: transparent; }
html body .rp-search input::placeholder { color: #6b675a; }
html body .rp-search button {
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-left: var(--bw) solid #1c1b16;
  border-radius: 0;
  background: #1c1b16;
  color: #fffdf4;
  font: 800 0.95rem/1 var(--font-text);
  box-shadow: none;
  cursor: pointer;
}
html body .rp-search button:hover { background: var(--coral); color: #1c1b16; transform: none; box-shadow: none; }

html body .rp-trending { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 1.25rem; font-size: 0.88rem; font-weight: 600; }
html body .rp-trending > span { color: #343812; }
html body .rp-hero .rp-chip { background: transparent; border-color: #1c1b16; color: #1c1b16; border-radius: 6px; padding: 5px 12px; font-weight: 600; }
html body .rp-hero .rp-chip:hover { background: #1c1b16; color: var(--lime); }

html body .rp-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.9rem; }
html body .rp-hero .button { background: #1c1b16; color: #fffdf4; border-color: #1c1b16; }
html body .rp-hero .button:hover { background: var(--coral); color: #1c1b16; box-shadow: 3px 3px 0 #1c1b16; }
html body .rp-hero .button.ghost { background: #fffdf4; color: #1c1b16; }
html body .rp-hero .button.ghost:hover { background: var(--sun); }

html body .rp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 2.2rem 0 0; padding: 0; list-style: none; }
html body .rp-stats li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 16px;
  border: var(--bw) solid #1c1b16;
  border-radius: var(--radius-pill);
  background: #fffdf4;
  color: #1c1b16;
  font-size: 0.86rem;
  font-weight: 600;
}
html body .rp-stats b { font: 800 1.15rem/1 var(--font-mono); }
html body .rp-hero .rp-spark--a { --s: 64px; --c: var(--coral); top: 12%; left: 7%; }
html body .rp-hero .rp-spark--b { --s: 38px; --c: #1c1b16; top: 24%; right: 9%; animation-delay: -1.6s; }
html body .rp-hero .rp-spark--c { --s: 52px; --c: var(--mint); bottom: 14%; right: 14%; animation-delay: -3s; }
html body .rp-hero .rp-spark--d { --s: 30px; --c: var(--lilac); bottom: 22%; left: 12%; animation-delay: -2.2s; }
html body .rp-hero .rp-spark--e { --s: 26px; --c: var(--bubblegum); top: 9%; right: 28%; animation-delay: -4s; }

/* ---------- 9. Home feed chrome ---------- */
html body .launches-cat-nav-wrap { background: var(--surface); border-bottom: var(--bw) solid var(--line-strong); box-shadow: none; }
html body .launches-cat-nav { display: flex; align-items: center; gap: 8px; padding: 12px 2px; overflow-x: auto; scrollbar-width: none; }
html body .launches-cat-nav::-webkit-scrollbar { display: none; }
html body .launches-cat-hero { border-bottom: 0; background: transparent; padding-block: clamp(1.8rem, 5vw, 3rem) 0.6rem; }
html body .launches-cat-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
html body .launches-cat-hero-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
html body .launches-cat-heading { font-size: clamp(1.8rem, 4.4vw, 2.9rem); }
html body .launches-cat-sub { margin-top: 0.7rem; color: var(--muted); max-width: 52ch; margin-inline: auto; }
html body .launches-cat-time-row { display: inline-flex; gap: 8px; }
html body .launches-top20-label {
  display: inline-flex;
  padding: 4px 14px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: #1c1b16;
  font: 800 0.74rem/1.2 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html body .launches-ranking-sidebar :is(h2, h3, .activity-title) { font-size: 1rem; }

/* ---------- 10. Footer (always charcoal) ---------- */
html body .site-footer {
  --ink: #f6f3e6;
  --ink-soft: #e6e2d0;
  --prose: #cac5b1;
  --muted: #a8a38f;
  --line: #45413a;
  --line-strong: #f6f3e6;
  --surface: #2a2723;
  --surface-2: #34312b;
  --btn-bg: #f6f3e6;
  --btn-ink: #1c1b16;
  --btn-quiet-bg: transparent;
  --card-border: #f6f3e6;
  margin-top: clamp(3rem, 7vw, 5rem);
  background: #14120f;
  color: var(--ink);
  border-top: var(--bw) solid #1c1b16;
  padding: 0;
}
html body .site-footer .wrap { padding-block: clamp(2rem, 5vw, 3.2rem) 1.4rem; }
html body .site-footer .foot-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem 2rem;
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  border-bottom: 1.5px solid #3a3730;
}
html body .site-footer .foot-cta h2 { max-width: 18ch; margin-top: 0.9rem; color: var(--ink); font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; }
html body .site-footer .foot-cta h2 span { color: var(--lime); }
html body .site-footer .foot-cta .rp-pill { background: transparent; border-color: #f6f3e6; color: #f6f3e6; }
html body .site-footer .foot-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
html body .site-footer .button.accent { background: var(--sun); color: #1c1b16; border-color: #1c1b16; box-shadow: 3px 3px 0 #f6f3e6; }
html body .site-footer .button.accent:hover { background: var(--lime); box-shadow: 5px 5px 0 #f6f3e6; }
html body .site-footer .button.ghost { background: transparent; color: #f6f3e6; border-color: #f6f3e6; }
html body .site-footer .button.ghost:hover { background: #f6f3e6; color: #1c1b16; }
html body .site-footer .foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
html body .site-footer .foot-col h2 { margin: 0 0 0.9rem; color: var(--ink); font: 800 0.86rem/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
html body .site-footer .foot-col ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
html body .site-footer .foot-col a { color: #cac5b1; text-decoration: none; font-size: 0.95rem; }
html body .site-footer .foot-col a:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 4px; }
html body .site-footer .foot-news { margin-top: 2rem; background: #1f1c18; border-color: #f6f3e6; box-shadow: 4px 4px 0 #f6f3e6; }
html body .site-footer .foot-news-row { display: flex; gap: 10px; flex-wrap: wrap; }
html body .site-footer .foot-news-row input { flex: 1; min-width: 200px; background: #14120f; color: #f6f3e6; border-color: #f6f3e6; }
html body .site-footer .foot-news-row button { background: var(--sun); color: #1c1b16; border-color: #1c1b16; box-shadow: 3px 3px 0 #f6f3e6; }
html body .site-footer .foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1.5px solid #3a3730; }
html body .site-footer .foot-id { display: flex; align-items: center; gap: 12px; }
html body .site-footer .foot-mark { width: 34px; height: 34px; overflow: visible; }
html body .site-footer .foot-brand-name { color: var(--ink); font: 500 1.1rem/1 var(--font-display); letter-spacing: -0.04em; text-decoration: none; text-transform: lowercase; }
html body .site-footer .foot-brand-name b { font-weight: 800; color: var(--lime); }
html body .site-footer .foot-cursor { display: none; }
html body .site-footer .foot-credit { margin-top: 4px; color: var(--muted); font-size: 0.82rem; }
html body .site-footer .foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
html body .site-footer .foot-visitors { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border: 1.5px solid #f6f3e6; border-radius: var(--radius-pill); color: var(--ink); font-size: 0.8rem; font-weight: 600; }
html body .site-footer .foot-visitors strong { font-family: var(--font-mono); }
html body .site-footer .foot-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(238, 249, 111, 0.25); }
html body .site-footer .foot-social { display: flex; gap: 8px; }
html body .site-footer .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid #f6f3e6; border-radius: 50%; color: #f6f3e6; transition: background-color 0.12s, color 0.12s, transform 0.12s; }
html body .site-footer .foot-social a:hover { background: var(--lime); color: #1c1b16; transform: translateY(-2px); }
html body .site-footer .foot-sep { width: 1.5px; height: 24px; background: #3a3730; }
html body .site-footer .theme-switch { display: inline-flex; gap: 4px; padding: 3px; border: 1.5px solid #f6f3e6; border-radius: var(--radius-pill); }
html body .site-footer .theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #cac5b1; box-shadow: none; }
html body .site-footer .theme-switch button:hover { background: #34312b; color: #f6f3e6; transform: none; box-shadow: none; }
html body .site-footer .theme-switch button[aria-pressed="true"], html body .site-footer .theme-switch button.is-active { background: var(--sun); color: #1c1b16; }
html body .site-footer .foot-dots { display: none; }

/* ---------- 11. Page heads & listings ---------- */
html body :is(.pg-hero, .page-head, .makers-head, .stories-listing-head) { padding-block: clamp(1.6rem, 4vw, 2.6rem) 1.2rem; text-align: left; }
html body .pg-hero { border-bottom: 0; margin-bottom: 0.6rem; }
html body .pg-hero :is(.pg-eyebrow, .eyebrow)::before,
html body .pg-hero :is(.pg-eyebrow, .eyebrow)::after { content: none; }
html body .pg-hero :is(.pg-eyebrow, .eyebrow) { display: flex; width: fit-content; margin: 0 0 1.1rem; }
html body .pg-hero h1 { margin-inline: 0; max-width: 100%; letter-spacing: -0.04em; font-weight: 800; }
html body .pg-hero :is(.lead, .pg-sub) { max-width: 60ch; margin: 1rem 0 0; color: var(--muted); }
html body .pg-actions { justify-content: flex-start; }
html body :is(.page-head, .makers-head, .stories-listing-head) h1 { margin-bottom: 0.6rem; font-weight: 800; letter-spacing: -0.04em; }
html body :is(.page-head, .makers-head) :is(p.lead, .lead, p) { max-width: 62ch; color: var(--muted); }
html body .stories-listing-head .eyebrow { margin-bottom: 1.1rem; }
html body .section-head { align-items: flex-end; }
html body .docs-tabs { background: var(--surface); border: 0; border-bottom: var(--bw) solid var(--line-strong); border-radius: 0; box-shadow: none; }

html body :is(.entry, .post-card) { padding: clamp(14px, 2.4vw, 22px); }
html body :is(.entry, .post-card) :is(h2, h3) { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
html body .entry-cover, html body .post-card-cover, html body .entry img { border: var(--bw) solid var(--line-strong); border-radius: var(--radius-m); }

/* ---------- 12. Articles, docs & prose ---------- */
html body .prose :is(h1, h2, h3, h4) { color: var(--ink); }
html body .prose h2 { padding-bottom: 0.35em; border-bottom: var(--bw) solid var(--line-strong); }
html body .prose a { color: var(--ink); text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
html body .prose a:hover { background: var(--lime); color: #1c1b16; text-decoration-color: #1c1b16; }
html body .prose blockquote { border-left: 5px solid var(--sun); border-radius: 0 var(--radius-m) var(--radius-m) 0; background: var(--surface); box-shadow: 3px 3px 0 var(--line-strong); border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); }
html body .prose code { border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); }
html body .prose pre { border: var(--bw) solid var(--line-strong); border-radius: var(--radius-m); box-shadow: 4px 4px 0 var(--line-strong); }
html body .prose pre code { border: 0; background: transparent; }
html body .code-bar { border: var(--bw) solid var(--line-strong); border-bottom: 0; border-radius: var(--radius-m) var(--radius-m) 0 0; }
html body .code-bar + pre { border-radius: 0 0 var(--radius-m) var(--radius-m); }
html body .prose table { border: var(--bw) solid var(--line-strong); border-radius: var(--radius-m); box-shadow: 4px 4px 0 var(--line-strong); }
html body .prose th { background: var(--sun); color: #1c1b16; font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
html body .prose img { border: var(--bw) solid var(--line-strong); border-radius: var(--radius-m); }
html body .docs-callout { border: var(--bw) solid var(--line-strong); border-radius: var(--radius-m); box-shadow: 3px 3px 0 var(--cl-line, var(--line-strong)); }

/* FAQ-style accordions: round +/- bubble */
html body :is(details) { border-bottom: var(--bw) solid var(--line-strong); }
html body :is(details) > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  list-style: none;
  font: 700 1rem/1.35 var(--font-display);
}
html body :is(details) > summary::-webkit-details-marker { display: none; }
html body :is(details) > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: var(--bw) solid var(--line-strong);
  border-radius: 50%;
  background: var(--mint);
  color: #1c1b16;
  font: 800 1.1rem/1 var(--font-mono);
}
html body :is(details[open]) > summary::after { content: "−"; background: var(--sun); }

/* ---------- 13. Modals & palette ---------- */
html body :is(.launch-modal-dialog, .palette-dialog, .palette-panel, .modal, dialog) {
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-l);
  box-shadow: 8px 8px 0 var(--line-strong);
}
html body :is(.launch-modal-backdrop, .palette-backdrop, .modal-backdrop) { background: rgba(20, 18, 15, 0.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body :is(.modal-title, .launch-modal-title, #submit-modal-title) { font-family: var(--font-display); font-weight: 800; }

/* tables outside prose */
html body :is(table) { border-collapse: separate; border-spacing: 0; }

/* ---------- 13b. Header responsive + small fixes ---------- */
html body .post-rail .toc { padding: 14px 16px; }
html:is([data-theme="dark"], .dark) body .brand-name b { background: none; color: var(--lime); }

@media (max-width: 1080px) {
  :root { --header-h: 100px; }
  html body .site-header .bar { flex-wrap: wrap; row-gap: 8px; padding-block: 10px 0; }
  html body .site-header .main-nav {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 8px 0 10px;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 4px;
    border-top: 1.5px solid var(--line);
    scrollbar-width: none;
  }
  html body .site-header .main-nav::-webkit-scrollbar { display: none; }
  html body .site-header .main-nav a { flex: 0 0 auto; padding: 6px 13px; letter-spacing: 0; font-size: 0.88rem; }
  html body .site-header .bar-actions { margin-left: auto; }
}
@media (max-width: 720px) {
  :root { --header-h: 96px; }
  html body .site-header #nav-login { display: none; }
  html body .site-header :is(.palette-trigger, .theme-toggle) { width: 38px; min-height: 38px; padding: 0; justify-content: center; }
  html body .site-header .nav-submit { min-height: 38px; padding: 0 14px; font-size: 0.84rem; box-shadow: 2px 2px 0 var(--line-strong); }
  html body .brand-name { font-size: 1.02rem; }
  html body .brand-mark { width: 28px; height: 28px; }
}

html body .launch-card.is-top-rank { border: var(--bw) solid var(--card-border) !important; box-shadow: var(--card-shadow) !important; background: color-mix(in srgb, var(--lime) 45%, var(--card-bg)) !important; }
html body .launch-card.is-top-rank:nth-of-type(2) { background: color-mix(in srgb, var(--sun) 38%, var(--card-bg)) !important; }
html body .launch-card.is-top-rank:nth-of-type(3) { background: color-mix(in srgb, var(--bubblegum) 34%, var(--card-bg)) !important; }
html body .launch-card.is-top-rank:hover { box-shadow: var(--card-hover-shadow) !important; }

/* ---------- 13c. Structure carried over from the retired override layers ---------- */
html body .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html body .launches-top20-meta { display: none; }
html body .contact-options h2 { margin-top: 1.5rem; }
html body .contact-options ul { margin-bottom: 1rem; }
html body .tool-panel { padding: 20px 22px; max-width: 38rem; }
html body .tool-panel label { display: block; margin: 12px 0 6px; font-size: 0.85rem; font-weight: 700; }
html body .tool-panel .button { margin-top: 12px; }
html body .tool-input { width: 100%; }
html body .tool-muted { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
html body .launches-container { padding: 20px 0 3rem; }
html body .launches-search-wrap { margin-bottom: 1rem; }
html body .launches-search-bar { min-height: 54px; border-radius: var(--radius-m); }
html body .launches-search-input { flex: 1; outline: none; }
html body .launches-ranking-sidebar { position: sticky; top: calc(var(--header-h) + 12px); }
html body .activity-sidebar-card { padding: 16px; }
html body .activity-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
html body .activity-sidebar-title { display: inline-flex; align-items: center; gap: 8px; font: 800 0.88rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); }
html body .activity-sidebar-title::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 1.5px solid var(--line-strong); }
html body .activity-sidebar-see-all { font-size: 0.78rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
html body .activity-list { list-style: none; margin: 0; padding: 0; }
html body .activity-item { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1.5px dashed var(--line); }
html body .activity-item:last-child { border-bottom: 0; }
html body .today-ranking-list .activity-item { display: flex; align-items: center; gap: 10px; }
html body .activity-icon { width: 32px; height: 32px; display: grid; place-items: center; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-2); font: 800 0.8rem var(--font-mono); overflow: hidden; flex: 0 0 32px; }
html body .activity-icon img { width: 100%; height: 100%; object-fit: cover; }
html body .activity-title { display: block; color: var(--ink); font: 700 0.88rem/1.3 var(--font-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .activity-meta { margin: 2px 0 0; font-size: 0.74rem; color: var(--muted); }
html body .today-rank-number { flex: 0 0 26px; font: 800 0.78rem var(--font-mono); color: var(--accent-text); }

/* ---------- 13d. Compact density (shorter hero, tighter spacing everywhere) ---------- */
:root { --gutter: clamp(14px, 2.4vw, 22px); --header-h: 60px; }
html body { line-height: 1.6; }
html body .rp-hero { padding: clamp(1.4rem, 3.2vw, 2.2rem) 0 clamp(1.3rem, 3vw, 2rem); }
html body .rp-hero h1 { margin-top: 0.7rem; max-width: none; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; }
html body .rp-hero h1 .rp-sticker-inline { white-space: nowrap; }
html body .rp-hero-sub { margin-top: 0.7rem; font-size: clamp(0.95rem, 1.6vw, 1.05rem); }
html body .rp-search { margin-top: 1.1rem; box-shadow: 4px 4px 0 #1c1b16; }
html body .rp-search input, html body .rp-search button { min-height: 48px; }
html body .rp-trending { margin-top: 0.8rem; gap: 8px; }
html body .rp-stats { margin-top: 1rem; gap: 8px; }
html body .rp-stats li { padding: 4px 12px; font-size: 0.8rem; }
html body .rp-hero .rp-spark--c, html body .rp-hero .rp-spark--d, html body .rp-hero .rp-spark--e { display: none; }
html body .rp-hero .rp-spark--a { --s: 44px; top: 18%; }
html body .rp-hero .rp-spark--b { --s: 28px; }

html body .launches-cat-nav { padding-block: 8px; }
html body .launches-cat-hero { padding-block: clamp(1rem, 2.6vw, 1.6rem) 0.2rem; }
html body .launches-cat-hero-inner, html body .launches-cat-hero-row { gap: 0.6rem; }
html body .launches-cat-heading { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
html body .launches-cat-sub { margin-top: 0.4rem; }
html body .launches-container { padding: 12px 0 2rem; }
html body .launches-search-bar { min-height: 46px; }
html body .launches-search-wrap { margin-bottom: 0.7rem; }

html body :is(.pg-hero, .page-head, .makers-head, .stories-listing-head) { padding-block: clamp(1rem, 2.4vw, 1.5rem) 0.7rem; }
html body .pg-hero :is(.pg-eyebrow, .eyebrow), html body .stories-listing-head .eyebrow { margin-bottom: 0.7rem; }
html body .pg-hero :is(.lead, .pg-sub) { margin-top: 0.6rem; }
html body .pg-actions { margin-top: 0.9rem; }
html body :is(.page-head, .makers-head, .stories-listing-head) h1 { margin-bottom: 0.4rem; }
html body .page { padding-top: 1rem; padding-bottom: 1.6rem; }
html body .section { padding-block: clamp(1.1rem, 2.4vw, 1.7rem); }
html body .section-head { margin-bottom: 0.8rem; }

html body :is(.entry, .post-card) { padding: clamp(10px, 1.6vw, 14px); }
html body .activity-sidebar-card { padding: 12px 14px; }
html body .activity-item { padding: 6px 0; }
html body .tool-panel { padding: 14px 16px; }
html body .prose h2 { margin-top: 1.4em; }
html body .prose p { margin-bottom: 0.85em; }
html body :is(button, .button, .btn):not(.lcat-pill):not(.rp-chip):not(.theme-toggle):not(.palette-trigger) { min-height: 40px; }
html body details > summary { padding-block: 11px; }

html body .site-footer { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
html body .site-footer .wrap { padding-block: clamp(1.3rem, 3vw, 2rem) 1rem; }
html body .site-footer .foot-cta { padding-bottom: 1.2rem; margin-bottom: 1.2rem; }
html body .site-footer .foot-cta h2 { margin-top: 0.6rem; font-size: clamp(1.4rem, 3vw, 2rem); }
html body .site-footer .foot-grid { gap: 1.2rem; }
html body .site-footer .foot-col h2 { margin-bottom: 0.6rem; }
html body .site-footer .foot-col ul { gap: 0.35rem; }
html body .site-footer .foot-news { margin-top: 1.2rem; }
html body .site-footer .foot-base { margin-top: 1.4rem; padding-top: 1rem; }

@media (max-width: 1080px) { :root { --header-h: 92px; } html body .site-header .bar { padding-block: 8px 0; row-gap: 6px; } html body .site-header .main-nav { padding: 6px 0 8px; } }
@media (max-width: 720px) { :root { --header-h: 90px; } }

@media (max-width: 640px) {
  html body .rp-hero .rp-stats { display: none; }
  html body .rp-hero h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  html body .rp-hero-sub { display: none; }
  html body .rp-trending { font-size: 0.8rem; gap: 6px; }
  html body .rp-hero .rp-chip { padding: 3px 9px; }
  html body .rp-search input, html body .rp-search button { min-height: 44px; }
}

/* ---------- 13e. Submit modal: URL auto-fill ---------- */
html body .submit-autofill-status { display: block; margin-top: 6px; color: var(--muted); font-size: 0.8rem; }
html body .submit-autofill-status.is-ok { color: var(--olive); font-weight: 600; }
html body .submit-autofill-status.is-error { color: var(--danger); font-weight: 600; }
html body .submit-logo-row { display: flex; align-items: center; gap: 10px; }
html body .submit-logo-row input { flex: 1; min-width: 0; }
html body .submit-logo-preview { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-s); background: #fff; padding: 3px; }

/* header between 1081px and 1280px: collapse search to an icon and tighten nav so nothing is clipped */
@media (min-width: 1081px) and (max-width: 1280px) {
  html body .palette-trigger { width: 40px; min-width: 0; flex: 0 0 40px; padding: 0; justify-content: center; }
  html body .palette-trigger-text, html body .palette-kbd { display: none; }
  html body .site-header .main-nav a { padding: 7px 10px; }
  html body .site-header .bar { gap: 10px; }
}

/* ---------- 14. Responsive ---------- */
@media (max-width: 1100px) {
  html body .palette-trigger-text, html body .palette-kbd { display: none; }
  html body .palette-trigger { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 900px) {
  html body .site-footer .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .rp-hero .rp-spark--b, html body .rp-hero .rp-spark--e { display: none; }
}
@media (max-width: 640px) {
  html body .site-footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  html body .rp-search { box-shadow: 4px 4px 0 #1c1b16; }
  html body .rp-search button { padding: 0 16px; }
  html body .rp-hero .rp-spark--a { --s: 40px; top: 5%; left: 4%; }
  html body .rp-hero .rp-spark--c { --s: 34px; bottom: 5%; right: 5%; }
  html body .rp-hero .rp-spark--d { display: none; }
  html body .site-footer .foot-cta-actions .button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.rp-spark) { animation: none; }
  html body * { transition-duration: 0.01ms !important; }
}

/* ---------- 13f. Launch-option radios sit beside their text, not above it ---------- */
html body .launch-submit-form .promo-plan { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
html body .launch-submit-form .promo-plan input[type="radio"] { width: 18px; height: 18px; min-width: 18px; flex: none; margin: 3px 0 0; padding: 0; box-shadow: none; }
html body .launch-submit-form .promo-plan-body { flex: 1; min-width: 0; }

/* ---------- 14. Side slots: paid logo chips. Vertical rails in the empty margins on wide screens; on mobile two auto-scrolling strips pinned under the header and at the bottom of the screen ---------- */
html body .side-slots { position: sticky; top: var(--side-top, 0); z-index: 95; display: flex; align-items: center; padding: 6px 0; border-bottom: 1.5px solid var(--line-strong); background: var(--bg); overflow: hidden; }
html body .side-slots .side-slots-label { flex: none; margin: 0 8px; position: relative; z-index: 2; }
html body .side-slots .side-view { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html body .side-slots .side-view::-webkit-scrollbar { display: none; }
html body .side-slots .side-track { display: flex; width: max-content; }
html body .side-slots .side-set { display: flex; align-items: center; gap: 10px; padding-right: 10px; flex: none; }
html body .side-slots .side-rail { display: contents; }
@keyframes side-marquee { to { transform: translateX(-50%); } }
html body .side-slots.is-marquee .side-view { overflow: hidden; }
html body .side-slots.is-marquee .side-track { animation: side-marquee var(--marquee-time, 24s) linear infinite; will-change: transform; }
html body .side-slots-bottom.is-marquee .side-track { animation-direction: reverse; }
html body .side-slots.is-marquee:hover .side-track, html body .side-slots.is-marquee:active .side-track { animation-play-state: paused; }
html body .side-slots-bottom { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 40; border-bottom: 0; border-top: 1.5px solid var(--line-strong); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
html body .side-slots-bottom[hidden] { display: none; }
html.has-side-bottom body { padding-bottom: 64px; }
/* mobile: only the bottom strip is shown; the in-page copy is just its source */
@media (max-width: 1579px) { html body .side-slots:not(.side-slots-bottom) { display: none; } }
html body .side-slot {
  --slot-tint: #ffc44a;
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 5px 12px 5px 5px; min-width: 0;
  border: 1.5px solid var(--line-strong); border-radius: 14px;
  background: color-mix(in srgb, var(--slot-tint) 16%, var(--surface, var(--bg)));
  color: var(--ink); text-decoration: none; font: 700 0.86rem/1.15 var(--font-display);
  box-shadow: 2px 2px 0 var(--line-strong);
  transition: transform .12s ease, box-shadow .12s ease;
}
html body .side-slot:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line-strong); }
html body .side-slot img, html body .side-slot .side-slot-letter { width: 30px; height: 30px; flex: none; border-radius: 10px; object-fit: cover; }
html body .side-slot .side-slot-letter { display: grid; place-items: center; background: var(--slot-tint); color: #1c1b16; font: 800 1.05rem/1 var(--font-display); }
html body .side-slot .side-slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .side-slot .side-slot-name small { display: block; margin-top: 2px; font: 500 0.72rem/1 var(--font-text); color: var(--muted); }
html body .side-slot-cta { background: transparent; border-style: dashed; box-shadow: none; }
html body .side-slot-cta .side-slot-letter { background: var(--lime); }
/* wide screens: two fixed rails in the margins beside the 1180px content column */
@media (min-width: 1580px) {
  html body .side-slots { position: static; display: block; padding: 0; overflow: visible; border: 0; background: transparent; }
  html body .side-slots-bottom { display: none; }
  html.has-side-bottom body { padding-bottom: 0; }
  html body .side-slots .side-view, html body .side-slots .side-track, html body .side-slots .side-set { display: contents; }
  html body .side-slots .side-set[aria-hidden] { display: none; }
  html body .side-slots .side-slots-label { position: fixed; top: 92px; left: 14px; z-index: 5; }
  html body .side-slots .side-rail { display: flex; flex-direction: column; gap: 12px; position: fixed; top: 124px; width: 190px; z-index: 5; max-height: calc(100vh - 150px); overflow: hidden; }
  html body .side-slots .side-rail-left { right: calc(50% + 590px + 20px); }
  html body .side-slots .side-rail-right { left: calc(50% + 590px + 20px); }
  html body .side-slot { width: 100%; }
}