/* Shared by the React shell and the embedded consumer experiences.
   Artwork and user-authored poster typography keep their own typefaces. */
@font-face {
  font-family: "RC Manrope";
  src: url("/fonts/home-type/manrope-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "RC Instrument";
  src: url("/fonts/home-type/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --rc-font-sans: "RC Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
  --rc-font-accent: "RC Instrument", Georgia, serif;
  --rc-ink: #182820;
  --rc-muted: #536158;
  --rc-paper: #f6f7f2;
  --rc-line: #d4dcd3;
  --rc-on-dark: #f6f7f2;
  --rc-muted-on-dark: #bac5be;
  --rc-focus: #38674c;
  --rc-radius: 6px;
  --rc-control-height: 48px;
  --rc-control-compact: 44px;
  --rc-page-gutter: clamp(20px, 5vw, 80px);
  --rc-page-width: 1440px;
  --rc-type-body: 1rem;
  --rc-type-control: 0.875rem;
  --rc-type-caption: 0.8125rem;
  --rc-type-label: 0.75rem;
  --rc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--rc-font-sans);
  font-kerning: normal;
  font-optical-sizing: auto;
}

::selection {
  background: #d8e4ce;
  color: #14251b;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 4px;
}

:where(button, a) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(input, textarea) {
  caret-color: var(--rc-focus);
}