/* America Editorial Design: portable starting tokens, not original site CSS.
 * Prefix ae- avoids clashing with an existing design system.
 * Font files are not included. Supply authorized fonts or use the fallbacks.
 * 1rem values assume the normal 16px root; do not globally force root size.
 */
:root {
  --ae-color-text: #000c1f;
  --ae-color-text-secondary: rgb(0 12 31 / 65%);
  --ae-color-action: #002664;
  --ae-color-link: #0066c5;
  --ae-color-interactive: #004ac3;
  --ae-color-deep: #00163b;
  --ae-color-soft-blue: #f1f5fb;
  --ae-color-bg: #fff;
  --ae-color-surface: #f7f7f7;
  --ae-color-surface-muted: #eee;
  --ae-color-divider: #e3e4e6;
  --ae-color-footer: #fbfbfb;
  --ae-color-border: rgb(0 12 31 / 10%);
  --ae-color-focus: #0066c5;

  --ae-font-serif: "Source Serif 4", "Noto Serif SC", Georgia, serif;
  --ae-font-sans: "Source Sans 3", "Noto Sans SC", system-ui, sans-serif;
  --ae-font-weight-regular: 400;
  --ae-font-weight-medium: 500;
  --ae-type-hero: clamp(3rem, 7.5vw, 6rem);
  --ae-type-section: clamp(2.5rem, 5vw, 4rem);
  --ae-type-manifesto: clamp(2.75rem, 7.5vw, 6rem);
  --ae-type-feature: clamp(1.75rem, 3.125vw, 2.5rem);
  --ae-type-subtitle: clamp(1.25rem, 2vw, 1.5rem);
  --ae-type-body: 1.125rem;
  --ae-type-input: clamp(1rem, 1.65vw, 1.3125rem);
  --ae-leading-hero: 1;
  --ae-leading-section: 1.0625;
  --ae-leading-body: 1.65;
  --ae-tracking-hero: -0.054em;
  --ae-tracking-section: -0.04em;
  --ae-tracking-feature: -0.03em;

  --ae-space-1: 0.25rem;
  --ae-space-2: 0.5rem;
  --ae-space-3: 0.75rem;
  --ae-space-4: 1rem;
  --ae-space-6: 1.5rem;
  --ae-space-8: 2rem;
  --ae-space-12: 3rem;
  --ae-space-16: 4rem;
  --ae-space-24: 6rem;
  --ae-space-section: clamp(4rem, 8vw, 6rem);
  --ae-gutter: clamp(1rem, 3vw, 3rem);
  --ae-width-site: 87rem;
  --ae-width-hero: 43rem;
  --ae-width-reading: 45rem;
  --ae-width-menu: 27.1875rem;

  --ae-radius-xs: 0.25rem;
  --ae-radius-sm: 0.5rem;
  --ae-radius-md: 0.75rem;
  --ae-radius-lg: 1rem;
  --ae-radius-xl: 1.5rem;
  --ae-radius-2xl: 2rem;
  --ae-radius-menu: 2.5rem;
  --ae-radius-photo: 3rem;
  --ae-radius-feature: 4.5rem;
  --ae-radius-full: 9999px;
  --ae-shadow-floating: 0 10px 40px rgb(1 14 36 / 8%);
  --ae-shadow-menu: 2px 11px 24px #0000001a,
    8px 42px 43px #00000017, 18px 95px 58px #0000000d;

  /* Timing values are recommendations. Curves were observed on the site. */
  --ae-duration-feedback: 200ms;
  --ae-duration-menu: 400ms;
  --ae-duration-reveal: 550ms;
  --ae-duration-scene: 750ms;
  --ae-stagger-word: 40ms;
  --ae-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ae-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ae-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ae-press-scale: 0.98;

  /* Layer order is a recommendation. Dialogs may use the browser top layer. */
  --ae-z-ambient: 0;
  --ae-z-content: 1;
  --ae-z-dock: 30;
  --ae-z-header: 40;
  --ae-z-scrim: 50;
  --ae-z-menu: 60;
}

/* Component language can differ from document language. */
:lang(zh) {
  --ae-type-hero: clamp(2.25rem, 6.25vw, 5rem);
  --ae-leading-hero: 1.12;
  --ae-leading-section: 1.15;
  --ae-leading-body: 1.75;
  --ae-tracking-hero: -0.015em;
  --ae-tracking-section: -0.015em;
  --ae-tracking-feature: -0.01em;
}

/* Opt-in recipes: these do not reset the existing project globally. */
.ae-site {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--ae-width-site);
  margin-inline: auto;
  padding-inline: var(--ae-gutter);
  color: var(--ae-color-text);
  font-family: var(--ae-font-sans);
}
.ae-hero-title {
  margin: 0;
  font-family: var(--ae-font-serif);
  font-size: var(--ae-type-hero);
  font-weight: var(--ae-font-weight-regular);
  line-height: var(--ae-leading-hero);
  letter-spacing: var(--ae-tracking-hero);
  text-wrap: balance;
}
.ae-reading {
  inline-size: 100%;
  max-inline-size: var(--ae-width-reading);
  margin-inline: auto;
  font-family: var(--ae-font-sans);
  font-size: var(--ae-type-body);
  line-height: var(--ae-leading-body);
  overflow-wrap: break-word;
}
.ae-rounded-visual {
  border-radius: var(--ae-radius-photo);
  overflow: hidden;
}
@supports (corner-shape: superellipse(1.3)) {
  .ae-rounded-visual { corner-shape: superellipse(1.3); }
}
.ae-focus:focus-visible {
  outline: 3px solid var(--ae-color-focus);
  outline-offset: 4px;
}
.ae-dock {
  position: fixed;
  inset-inline: 1rem;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  inline-size: auto;
  max-inline-size: var(--ae-width-hero);
  margin-inline: auto;
  z-index: var(--ae-z-dock);
}

@media (max-width: 47.999rem) {
  :root { --ae-radius-photo: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ae-duration-feedback: 0ms;
    --ae-duration-menu: 0ms;
    --ae-duration-reveal: 0ms;
    --ae-duration-scene: 0ms;
    --ae-stagger-word: 0ms;
    --ae-press-scale: 1;
  }
  /* JS must also disable autoplay and continuous Canvas animation. */
  .ae-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}