@charset "UTF-8";
@layer core, reset, base, layout, components, pages;

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/SourceSerif4-VariableFont_opsz,wght.ttf') format('truetype');
}

@layer core {
  :root {
    --p-motion-factor: 1;

    --t-opacity-inactive: 0.6;
    --t-opacity-hover: 0.8;

    --p-color-white: oklch(1 0 0);
    --p-color-alabaster-050: oklch(0.981 0.012 85.0);

    --p-color-gray-700: oklch(0.231 0.007 85.0);

    --p-color-beige-200: oklch(0.875 0.080 89.5);
    --p-color-beige-500: oklch(0.743 0.117 89.5);

    --p-color-mahogany-500: oklch(0.325 0.088 18.5);
    --p-color-mahogany-600: oklch(0.270 0.080 18.5);
    --p-color-mahogany-700: oklch(0.215 0.070 18.5);
    --p-color-mahogany-800: oklch(0.165 0.055 18.5);

    --p-color-gold-500: oklch(0.635 0.137 83.2);
    --p-color-gold-600: oklch(0.540 0.130 83.2);
    --p-color-gold-700: oklch(0.450 0.110 83.2);

    --p-color-ecru-100: oklch(0.940 0.018 95.0);
    --p-color-ecru-300: oklch(0.860 0.035 95.0);

    --t-background-color-base: var(--p-color-alabaster-050);
    --t-background-color-surface: var(--p-color-white);
    --t-background-color-surface-static: var(--p-color-beige-200);
    --t-background-color-accent-secondary-surface: var(--p-color-ecru-100);

    --t-border-width-100: 0.0625rem;
    --t-border-width-200: 0.125rem;
    --t-border-width-400: 0.25rem;
		--t-border-width-800: 0.5rem;

    --t-border-color-divider: var(--p-color-ecru-300);
    --t-border-color-primary: var(--p-color-beige-500);
    --t-border-color-secondary: var(--p-color-mahogany-500);
    --t-border-color-media: var(--p-color-white);
    --t-border-color-focus: var(--p-color-gold-600);

    --t-outline-width-focus:  var(--t-border-width-200);
    --t-outline-color-focus:  var(--t-border-color-focus);
    --t-outline-offset-focus: 0.125rem;

    /* Text */
    --t-text-color-primary: var(--p-color-gray-700);
    --t-text-color-on-media: var(--p-color-white);
    --t-bullet-text-color: var(--p-color-beige-500);

    /* Link */
    --t-interactive-text-color: var(--p-color-gold-500);
    --t-interactive-text-color-hover: var(--p-color-gold-700);
    --t-interactive-text-color-active: var(--p-color-accent-gold900);

    /* Action */
    --t-action-primary-background-color: var(--p-color-mahogany-500);
    --t-action-primary-background-color-hover: var(--p-color-mahogany-600);
    --t-action-primary-background-color-active: var(--p-color-mahogany-700);
    --t-action-primary-text-color: var(--p-color-white);

    --t-carousel-action-background-color: var(--t-background-color-surface);
    --t-carousel-action-background-color-hover: var(--p-color-beige-200);
    --t-carousel-action-background-color-active: var(--p-color-beige-500);
    /* --t-carousel-action-text-color: var(--p-color-white); */

    --t-pagination-action-background-color: var(--p-color-ecru-100);
    --t-pagination-action-background-color-hover: var(--p-color-mahogany-600);
    --t-pagination-action-background-color-active: var(--p-color-mahogany-700);
    /* --t-pagination-action-text-color: var(--p-color-white); */

    --t-page-top-arrow-color: var(--p-color-white);

		--p-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		--p-font-serif: "Source Serif 4", "Times New Roman", "Yu Mincho", serif;

    --t-font-base: var(--p-font-sans);
    --t-font-heading: var(--p-font-serif);

    --t-font-size-sm: 0.875rem;
    --t-font-size-base: 1rem;
    --t-font-size-lg: 1.125rem;
    --t-font-size-fluid-xl: clamp(1.125rem, 1.0833rem + 0.1852dvw, 1.25rem);
    --t-font-size-fluid-2xl: clamp(1.25rem,  1.1429rem + 0.4762dvw, 1.5rem);
    --t-font-size-fluid-3xl: clamp(1.5rem,   1.3714rem + 0.5714dvw, 1.8rem);
    --t-font-size-fluid-4xl: clamp(1.75rem, 1.5333rem + 0.963dvw, 2.4rem);
    --t-font-size-fluid-5xl: clamp(2rem,     1.5714rem + 1.9048dvw, 3rem);

    --t-font-weight-semibold: 600;
    --t-font-weight-bold: 700;

    --t-line-height-tight: 1.25;
    --t-line-height-snug: 1.375;
    --t-line-height-relaxed: 1.625;

    --t-letter-spacing-semi-wide: 0.025em;

    --t-space-02: 0.25rem;
    --t-space-04: 0.5rem;
    --t-space-06: 0.75rem;
    --t-space-08: 1rem;
    --t-space-12: 1.5rem;
    --t-space-16: 2rem;
    --t-space-18: 2rem;
    --t-space-20: 2.5rem;
    --t-space-24: 3rem;
    --t-space-32: 4rem;
    --t-space-72: 9rem;

    --t-space-fluid-02: clamp(0.25rem, 0.1667rem + 0.3704dvw, 0.5rem);
    --t-space-fluid-05: clamp(0.625rem, 0.4167rem + 0.9259dvw, 1.25rem);
    --t-space-fluid-04: clamp(0.5rem, 0.3333rem + 0.7407dvw, 1rem);
    --t-space-fluid-06: clamp(0.75rem, 0.4286rem + 1.4286dvw, 1.5rem);
    --t-space-fluid-08: clamp(1rem, 0.5714rem + 1.9048dvw, 2rem);
    --t-space-fluid-10: clamp(1.25rem, 0.7143rem + 2.381dvw, 2.5rem);
    --t-space-fluid-12: clamp(1.5rem, 0.8571rem + 2.8571dvw, 3rem);
    --t-space-fluid-16: clamp(2rem, 1.3333rem + 2.963dvw, 4rem);
    --t-space-fluid-20: clamp(2.5rem, 1.4286rem + 4.7619dvw, 5rem);
    --t-space-fluid-28: clamp(3.5rem, 2rem + 6.6667dvw, 7rem);

    --t-ratio-1-1: 1 / 1;
    --t-ratio-4-3: 4 / 3;
    --t-ratio-16-9: 16 / 9;

    --t-radius-full: 9999rem;

    --t-z-showcase-controls: 100;
    --t-z-active-award-product-link: 200;
    --t-z-page-top: 300;

    --t-link-underline-offset: 0.2em;
    --t-link-underline-offset-hover: 0.2em;

    --t-interactive-lift-y: -2px;
    --t-interactive-press-y: 1px;

    --p-duration-150: 150ms;
    --p-duration-300: 300ms;
    --p-duration-400: 400ms;

    --t-timing-function-standard: cubic-bezier(0.2, 0, 0, 1);
    --t-timing-function-snap: cubic-bezier(0.25, 1, 0.5, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --p-motion-factor: 0;
      --t-interactive-lift-y: 0;
      --t-interactive-press-y: 0;
    }

    *,
    *::before,
    *::after {
      transition-duration: 0s;
      animation-duration: 0s;
      scroll-behavior: auto;
    }

    .image-link,
    .page-top-button {
      transition: none;
    }

    .award-list,
    .award-pagination-bullet {
      transition: none;
    }
  }

  :root {
    --t-duration-fast: calc(var(--p-duration-150) * var(--p-motion-factor));
    --t-duration-base: calc(var(--p-duration-300) * var(--p-motion-factor));
    --t-duration-moderate: calc(var(--p-duration-400) * var(--p-motion-factor));
  }

  :root {
    --t-container-max-inline-size: 90rem;
    --t-container-max-inline-size-compact: 75rem;

    --t-container-gutter-fluid-compact: clamp(var(--t-space-06), calc(-0.6428rem + 6.1905vw), var(--t-space-32));

    --t-column-space-fluid: clamp(var(--t-space-12), calc(0.429rem + 2.857vw), var(--t-space-24));

    --t-section-space-block-end-fluid: clamp(var(--t-space-24), calc(1.286rem + 11.429dvw), var(--t-space-72));
    --t-section-space-fluid: clamp(var(--t-space-24), calc(1.286rem + 11.429dvw), var(--t-space-72));

    --t-inline-gutter-fluid: clamp(var(--t-space-08), calc(-0.2857rem + 5.7143vw), var(--t-space-32));

    --t-content-space-fluid: var(--t-space-fluid-12);
    --t-content-space-fluid-compact: clamp(var(--t-space-12), calc(1.179rem + 1.429vw), var(--t-space-18));
    --t-content-space-fluid-relaxed: var(--t-space-fluid-28);
  }
}

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

  *:not(dialog) {
    margin: 0;
    padding: 0;
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  ol {
    list-style: decimal;
    padding-inline-start: 1.5rem;
  }

  a, button {
    touch-action: manipulation;
  }

  button {
    width: auto;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
  }

  picture, img, video, canvas, svg, iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  dialog {
    box-sizing: border-box;
    margin: auto;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
  }

  #root, #__next {
    isolation: isolate;
  }

  [hidden] {
    display: none;
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    background: url(../images/common/backgrounds/washi-paper-texture-01.webp) 0 center repeat,  var(--t-background-color-base);
    font-family: var(--t-font-base);
    font-size: var(--t-font-size-base);
    line-height: var(--t-line-height-relaxed);
    color: var(--t-text-color-primary);

    @media (width >= 768px) {
      /* font-size: var(--t-font-size-lg); */
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--t-font-heading);
    font-weight: var(--t-font-weight-bold);
    font-kerning: normal;
    font-feature-settings: "kern" 1, "palt" 1;
    letter-spacing: var(--t-letter-spacing-semi-wide);
    overflow-wrap: break-word;

    > span {
      display: inline-block;
    }
  }

  h1 {
    margin-block: 0;
  }

  p {
    margin-block-end: var(--t-space-fluid-06);
    text-wrap: pretty;
    overflow-wrap: break-word;

    &:last-child {
      margin-block-end: 0;
    }

    &:has(+ ol) {
      margin-block-end: var(--t-space-fluid-02);
    }
  }

  address {
    font-style: normal;
  }

  a, button {
    -webkit-tap-highlight-color: transparent;
  }

  a {
    color: var(--t-interactive-text-color);
    text-decoration: underline;
    text-underline-offset: var(--t-link-underline-offset);
    transition: color var(--t-duration-fast);
    touch-action: manipulation;

    @media (hover: hover) {
      &:hover {
        color: var(--t-interactive-text-color-hover);
        text-decoration: underline;
        text-underline-offset: var(--t-link-underline-offset-hover);
      }
    }

    &:active {
      color: var(--t-interactive-text-color-active);
    }
  }

  :where(button) {
    transition: background-color var(--t-duration-fast);

    @media (hover: hover) {
      &:hover {
        transform: translateY(var(--t-interactive-lift-y));
      }
    }

    &:active {
      transform: translateY(var(--t-interactive-press-y));
    }
  }

  :focus-visible {
    outline: var(--t-outline-width-focus) solid var(--t-outline-color-focus);
    outline-offset: var(--t-outline-offset-focus);
  }

  @media (forced-colors: active) {
    :focus-visible {
      outline: var(--t-outline-width-focus) solid Highlight;
    }
  }

  input, textarea, select {
    font: inherit;
  }
}