/* A-01 production candidate v2.5. Source of truth for this sample only. */
.asusn-site {
  /* Brand red, pure white, achromatic neutrals. */
  --a-color-brand: #CE2C38;
  --a-color-brand-hover: #B52430;
  --a-color-brand-active: #9F202A;
  --a-color-white: #FFFFFF;
  --a-color-ink: #171717;
  --a-color-muted: #595959;
  --a-color-line: #D9D9D9;
  --a-color-line-strong: #767676;
  --a-color-subtle: #F5F5F5;
  --a-color-disabled: #E5E5E5;
  --a-color-error: var(--a-color-brand);
  --a-surface: var(--a-color-white);
  --a-text: var(--a-color-ink);
  --a-text-secondary: var(--a-color-muted);
  --a-rule: var(--a-color-line);
  --a-link: var(--a-color-brand);

  /* Typography: rem respects browser font preferences. */
  --a-font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --a-font-latin: Arial, Helvetica, sans-serif;
  --a-type-display: clamp(1.5rem, 2.4vw, 2rem);
  --a-type-section: clamp(1.5rem, 2.4vw, 2rem);
  --a-type-title: clamp(1.125rem, 1.6vw, 1.375rem);
  --a-type-lead: 1rem;
  --a-type-hero-name: clamp(2rem, 3.6vw, 3rem);
  --a-type-catchphrase: clamp(2.5rem, 4.8vw, 4rem);
  --a-type-body: 1rem;
  --a-type-label: .875rem;
  --a-type-meta: .75rem;
  --a-brand-name-size: 1.125rem;
  --a-brand-photo-size: 3rem;
  --a-weight-regular: 400;
  --a-weight-bold: 700;
  --a-weight-heavy: 900;
  --a-leading-display: 1.3;
  --a-leading-heading: 1.45;
  --a-leading-body: 1.75;
  --a-tracking-display: -.055em;
  --a-tracking-heading: -.035em;
  --a-tracking-label: .1em;

  /* 4px base, 8px composition rhythm (at 16px browser default). */
  --a-space-1: .25rem;
  --a-space-2: .5rem;
  --a-space-3: .75rem;
  --a-space-4: 1rem;
  --a-space-5: 1.5rem;
  --a-space-6: 2rem;
  --a-space-7: 3rem;
  --a-space-8: 4rem;
  --a-space-9: 6rem;
  --a-space-10: 7rem;

  --a-width-page: 80rem;
  --a-width-copy: 40rem;
  --a-width-detail: 70rem;
  --a-detail-space: 1.5rem;
  --a-gutter: 3rem;
  --a-section-space: var(--a-space-9);
  --a-control-height: 3rem;
  --a-border-width: 1px;
  --a-radius-control: 0;
  --a-radius-section: 0;
  --a-photo-frame: .75rem;
  --a-photo-tilt: 4deg;
  --a-photo-tilt-secondary: -3deg;
  --a-motion-fast: 160ms;
  --a-motion-ease: ease-out;
}

@media (max-width: 1000px) {
  .asusn-site { --a-gutter: 1.5rem; }
}
@media (max-width: 700px) {
  .asusn-site {
    --a-gutter: 1.25rem;
    --a-brand-name-size: 1rem;
    --a-section-space: var(--a-space-7);
    --a-radius-section: 0;
    --a-photo-frame: .5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .asusn-site { --a-motion-fast: 0ms; }
}