@layer reset, tokens, base, components, responsive, utilities;

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--color-canvas);
    -webkit-tap-highlight-color: var(--color-tap-highlight);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background-color: var(--color-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img,
  svg {
    display: block;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  ul,
  h1,
  h2,
  p {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  ::selection {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }
}

@layer components {
  .header-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: var(--header-sentinel-h);
    pointer-events: none;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: transparent;
    background-image: linear-gradient(
      180deg,
      rgb(var(--rgb-canvas-deep) / 0.92) 0%,
      rgb(var(--rgb-canvas-deep) / 0) 100%
    );
    transition:
      background-color var(--motion-standard) var(--ease-standard),
      box-shadow var(--motion-standard) var(--ease-standard);
  }

  .site-header.is-scrolled {
    background-color: var(--color-canvas-deep);
    box-shadow: 0 1px 0 var(--color-border);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
    align-items: center;
    padding-top: var(--safe-top);
    padding-right: var(--gutter-right);
    padding-left: var(--gutter-left);
  }

  .brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: var(--header-h);
  }

  .brand__logo {
    width: auto;
    height: 22px;
  }

  .site-header__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--header-h);
  }

  @media (max-width: 639.98px) {
    .site-header__actions {
      margin-right: calc((44px - 22px) / -2);
    }
  }

  .site-nav {
    grid-area: nav;
    display: none;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-1);
  }

  .site-nav__link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--fs-nav);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: color var(--motion-micro) linear;
  }

  .site-nav__link[aria-current] {
    color: var(--color-text-primary);
  }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    transition: background-color var(--motion-micro) linear;
  }

  .icon-btn svg {
    width: 22px;
    height: 22px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding-inline: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
    transition:
      background-color var(--motion-micro) linear,
      color var(--motion-micro) linear,
      transform var(--motion-micro) var(--ease-enter);
  }

  .btn svg {
    flex: none;
    width: 20px;
    height: 20px;
  }

  .btn:active {
    transform: scale(0.97);
    transition-duration: var(--motion-instant);
  }

  .btn--soon:active {
    transform: none;
  }

  .btn--primary {
    background-color: var(--color-text-primary);
    color: var(--color-canvas-deep);
  }

  .btn--primary svg {
    color: var(--color-primary);
  }

  .btn--primary {
    flex: 1;
  }

  .btn--soon {
    flex: 1;
    background-color: rgb(var(--rgb-white) / 0.1);
    color: var(--color-text-secondary);
    cursor: default;
  }

  .hero {
    position: relative;
    isolation: isolate;
    height: clamp(440px, 66vh, 580px);
    height: clamp(440px, 66svh, 580px);
    margin-left: var(--gutter-left);
    margin-right: var(--gutter-right);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-hero);
  }

  .hero__slides {
    position: absolute;
    inset: 0;
  }

  .hero__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity var(--motion-screen) var(--ease-standard);
    pointer-events: none;
  }

  .hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    transform: scale(1.015);
    transition: transform var(--motion-screen) var(--ease-enter);
  }

  .hero__slide.is-active .hero__media {
    transform: scale(1);
  }

  .hero__art {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .hero__art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-art-position-mobile, var(--hero-art-position, 62% center));
  }

  .hero__media--fallback {
    background-image:
      radial-gradient(120% 140% at 20% 15%, rgb(var(--rgb-primary) / 0.22), transparent 60%),
      linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-canvas-deep) 75%);
  }

  .hero__slide[data-hero-slide="1"] .hero__media--fallback {
    background-image:
      radial-gradient(120% 140% at 80% 20%, rgb(var(--rgb-primary) / 0.2), transparent 60%),
      linear-gradient(150deg, var(--color-surface-elevated) 0%, var(--color-canvas-deep) 75%);
  }

  .hero__slide[data-hero-slide="2"] .hero__media--fallback {
    background-image:
      radial-gradient(120% 140% at 50% 85%, rgb(var(--rgb-primary) / 0.2), transparent 62%),
      linear-gradient(115deg, var(--color-surface-elevated) 0%, var(--color-canvas-deep) 75%);
  }

  .hero__slide[data-hero-slide="3"] .hero__media--fallback {
    background-image:
      radial-gradient(120% 140% at 25% 80%, rgb(var(--rgb-primary) / 0.24), transparent 60%),
      linear-gradient(160deg, var(--color-surface-elevated) 0%, var(--color-canvas-deep) 75%);
  }

  .hero__slide[data-hero-slide="4"] .hero__media--fallback {
    background-image:
      radial-gradient(120% 140% at 75% 75%, rgb(var(--rgb-primary) / 0.22), transparent 60%),
      linear-gradient(120deg, var(--color-surface-elevated) 0%, var(--color-canvas-deep) 75%);
  }

  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
      linear-gradient(
        to top,
        rgb(var(--rgb-canvas-deep) / 0.55) 0%,
        rgb(var(--rgb-canvas-deep) / 0.16) 22%,
        rgb(var(--rgb-canvas-deep) / 0) 42%
      ),
      linear-gradient(
        to right,
        rgb(var(--rgb-canvas-deep) / 0.82) 0%,
        rgb(var(--rgb-canvas-deep) / 0.5) 30%,
        rgb(var(--rgb-canvas-deep) / 0.16) 55%,
        rgb(var(--rgb-canvas-deep) / 0) 78%
      );
  }

  .hero__content {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--hero-pad);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 16px rgb(0 0 0 / 0.35);
  }

  .hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-accessible);
    font-size: var(--fs-chip);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .hero__eyebrow::before {
    content: "";
    width: var(--space-4);
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-primary);
  }

  .hero__title {
    max-width: 16ch;
    font-size: var(--fs-hero-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .hero__description {
    max-width: 46ch;
    color: var(--color-text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--fs-chip);
    font-weight: var(--fw-medium);
    white-space: nowrap;
  }

  .hero__controls {
    position: absolute;
    z-index: 4;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .hero__nav {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    background-color: rgb(var(--rgb-white) / 0.1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color var(--motion-micro) linear;
  }

  .hero__nav svg {
    width: 18px;
    height: 18px;
  }

  .hero__indicators {
    display: flex;
    align-items: center;
  }

  .hero__indicator {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }

  .hero__indicator::before {
    content: "";
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background-color: rgb(var(--rgb-white) / 0.34);
    transition: background-color var(--motion-micro) linear, width var(--motion-micro) linear;
  }

  .hero__indicator.is-active::before {
    width: 24px;
    background-color: var(--color-primary);
  }

  @keyframes rise-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .hero__content > * {
    animation: rise-in var(--motion-screen) var(--ease-enter) both;
  }

  .hero__content > :nth-child(2) {
    animation-delay: var(--motion-stagger);
  }

  .hero__content > :nth-child(3) {
    animation-delay: calc(var(--motion-stagger) * 2);
  }

  .catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--section-gap);
    margin-top: var(--hero-gap);
  }

  .site-footer {
    padding: var(--space-7) var(--gutter-right) calc(var(--mobile-nav-reserve) + var(--space-4)) var(--gutter-left);
  }

  .site-footer__text {
    color: var(--color-text-muted);
    font-size: var(--fs-chip);
    line-height: var(--lh-body);
  }

  .catalog-message,
  .noscript-message {
    padding: var(--space-8) var(--gutter-right) var(--space-8) var(--gutter-left);
    color: var(--color-text-secondary);
  }

  .rail {
    position: relative;
    min-width: 0;
    scroll-margin-top: calc(var(--header-offset) + var(--space-4));
  }

  .rail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--space-6);
    margin-bottom: var(--rail-header-gap);
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
  }

  .rail__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .rail__title {
    font-size: var(--fs-rail-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
  }

  .rail__subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-rail-subtitle);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
  }

  .rail__pager {
    display: none;
    align-items: center;
    gap: 2px;
  }

  .rail__pip {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-text-muted);
    opacity: 0.4;
    transition: opacity var(--motion-micro) linear, background-color var(--motion-micro) linear;
  }

  .rail__pip.is-active {
    background-color: var(--color-primary);
    opacity: 1;
  }

  .rail__viewport {
    position: relative;
  }

  .rail__track {
    container-type: inline-size;
    display: flex;
    gap: var(--rail-gap);
    padding-block: var(--space-4);
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter-left);
    scroll-padding-right: var(--gutter-right);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .rail__track::-webkit-scrollbar {
    display: none;
  }

  .rail__slot {
    flex: 0 0 var(--slot-w);
    min-width: 0;
    scroll-snap-align: start;
  }

  .rail--selection .rail__slot {
    flex-basis: calc(var(--slot-w) * var(--selection-scale));
  }

  .rail__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: var(--z-rail-controls);
    display: none;
    align-items: center;
    justify-content: center;
    width: max(var(--gutter), 48px);
    color: var(--color-text-primary);
    opacity: 0;
    transition: opacity var(--motion-micro) linear, background-color var(--motion-micro) linear;
  }

  .rail__nav svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.6));
  }

  .rail__nav--prev {
    left: 0;
    background-image: linear-gradient(to right, rgb(var(--rgb-canvas) / 0.82), rgb(var(--rgb-canvas) / 0));
  }

  .rail__nav--next {
    right: 0;
    background-image: linear-gradient(to left, rgb(var(--rgb-canvas) / 0.82), rgb(var(--rgb-canvas) / 0));
  }

  .card {
    position: relative;
    display: block;
    aspect-ratio: var(--card-ratio);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-surface);
    transition:
      transform var(--motion-fast) var(--ease-enter),
      box-shadow var(--motion-fast) var(--ease-enter),
      filter var(--motion-fast) var(--ease-enter);
  }

  .card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
  }

  .badge {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding-inline: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: rgb(var(--rgb-canvas-deep) / 0.86);
    color: var(--color-text-primary);
    font-size: var(--fs-badge);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
  }

  .badge--soon::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
  }

  .card--soon {
    cursor: default;
  }

  .card--soon .card__img {
    filter: grayscale(0.85) brightness(0.5);
  }

  .selection {
    --selection-overlap: calc(var(--slot-w) * 0.13);
    --numeral-size: calc(var(--slot-w) * 0.72);

    display: flex;
    align-items: center;
  }

  .selection__numeral {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    width: calc(var(--slot-w) * (var(--selection-scale) - 1) + var(--selection-overlap));
    color: var(--color-numeral-fill);
    font-size: var(--numeral-size);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 0.78;
    letter-spacing: -0.04em;
    -webkit-text-stroke: var(--numeral-stroke-w) var(--color-numeral-stroke);
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
  }

  @supports not (-webkit-text-stroke: 1px transparent) {
    .selection__numeral {
      color: var(--color-numeral-stroke);
    }
  }

  @supports (mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent)) {
    .selection__numeral {
      opacity: 1;
      -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 45%,
        rgb(0 0 0 / 0.3) 78%,
        rgb(0 0 0 / 0.3) 100%
      );
      mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 45%,
        rgb(0 0 0 / 0.3) 78%,
        rgb(0 0 0 / 0.3) 100%
      );
    }
  }

  .selection__card {
    position: relative;
    flex: none;
    width: var(--slot-w);
    margin-left: calc(-1 * var(--selection-overlap));
  }
}

@layer utilities {
  [hidden] {
    display: none;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-elevated);
    color: var(--color-text-primary);
    font-weight: var(--fw-semibold);
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    top: calc(var(--safe-top) + var(--space-2));
    left: max(var(--space-4), var(--safe-left));
    transform: none;
  }
}