@charset "UTF-8";

@layer layout {
  html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
  }

  .container,
  .container-fluid,
  .container-compact-fluid {
    inline-size: 100%;
    max-inline-size: var(--t-container-max-inline-size);
    margin-inline: auto;
  }

  .container-fluid,
  .container-compact-fluid {
    padding-inline: var(--t-container-gutter-fluid-compact);
  }

  .container-compact-fluid {
    max-inline-size: var(--t-container-max-inline-size-compact);
  }
}

@layer components {
	.link-button {
		--d-inline-size: 12.5rem;
		--d-background-color: var(--t-action-primary-background-color);
		--d-background-hover: var(--t-action-primary-background-color-hover);
		--d-background-active: var(--t-action-primary-background-color-active);
		--d-color: var(--t-action-primary-text-color);

    display: grid;
		place-items: center;
    position: relative;
		min-inline-size: var(--d-inline-size);
    padding-block: var(--t-space-06);
    padding-inline: var(--t-space-12);
		background-color: var(--d-background-color);
		border-radius: var(--t-radius-full);
    font-size: var(--t-font-size-base);
    font-weight: var(--t-font-weight-bold);
    color: var(--d-color);
		text-align: center;
    text-decoration: underline transparent;
    transition-property: background-color, transform;
    transition-duration: var(--t-duration-fast);
    transition-timing-function: var(--t-timing-function-standard);

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      inset-block: 0;
      margin-block: auto;
    }

    &::before {
      --d-inline-size: 1rem;

      inset-inline-end: 1.25rem;
      inline-size: var(--d-inline-size);
      aspect-ratio: var(--t-ratio-1-1);
      background: var(--t-background-color-surface);
      border-radius: 50%;
    }

    &::after {
      --d-inline-size: 0.375rem;
      --d-offset: 0.25rem;

      inset-inline-end: 1.375em;
      inline-size: var(--d-inline-size);
      aspect-ratio: var(--t-ratio-1-1);
      border-block-start: var(--t-border-width-200) solid var(--t-border-color-secondary);
      border-inline-end: var(--t-border-width-200) solid var(--t-border-color-secondary);
      transform: translateX(calc(-1 * (var(--d-offset)))) rotate(45deg);
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--d-background-hover);
        text-decoration-color: currentColor;
				transform: translateY(var(--t-interactive-lift-y));
      }

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

@layer header {
  .site-header {
    --d-logo-block-size: 6rem;
    --d-padding-inline: var(--t-space-08);
    --d-background-size: 20rem;

    margin-block-end: var(--t-space-16);
		padding-block-start: var(--t-space-12);
		padding-inline: var(--d-padding-inline);
    background: url(../images/common/backgrounds/rokko-mountain-illust.webp) center center / var(--d-background-size) no-repeat;
		border-block-start: var(--t-border-width-800) solid var(--t-border-color-secondary);

		@media (width >= 48rem) {
      --d-logo-block-size: 7.5rem;
      --d-padding-inline: var(--t-space-18);
      --d-background-size: 25rem;

      margin-block-end: var(--t-space-24);
      padding-block-start: var(--t-space-16);
    }
  }

  .header-logo {
    a {
			display: block;
      width: fit-content;
			margin-inline: auto;

      img {
        inline-size: auto;
        max-inline-size: 100%;
        block-size: var(--d-logo-block-size);
      }
    }
  }
}

@layer pages {
  /* Site Main */
  .site-main {
    display: flex;
    flex-direction: column;
    gap: var(--t-section-space-fluid);
    padding-block-end: var(--t-section-space-block-end-fluid);

    .section-heading {
      --d-block-size: 9.5rem;

      display: flex;
      align-items: center;
      block-size: var(--d-block-size);
      padding-inline: var(--t-inline-gutter-fluid);
      font-size: var(--t-font-size-fluid-3xl);
      color: var(--t-text-color-on-media);

      @media (width >= 48rem) {
        --d-block-size: 14rem;
      }
    }

    .content-heading {
      display: flex;
      align-items: center;
      gap: 0.2em;
      padding-inline: 0.2em;
      border-block-end: var(--t-border-width-200) solid var(--t-border-color-primary);
      font-size: var(--t-font-size-fluid-2xl);

      &::before {
        flex-shrink: 0;

        content: "";
        inline-size: 0.6em;
        block-size: 0.6em;
        border: var(--t-border-width-200) solid currentColor;
        border-radius: var(--t-radius-full);
        color: var(--t-bullet-text-color);
      }
    }

    .product-link {
      display: block;

      img {
        transition: opacity var(--t-duration-fast) var(--t-timing-function-standard);

        @media (hover: hover) {
            &:hover {
                opacity: var(--t-opacity-hover);
            }
        }
      }
    }
  }

  /* concept-hero */
  .concept-hero {
    --d-gradient-offset-start: 25rem;
    --d-gradient-offset-end: 5rem;

    padding-block-end: var(--t-section-space-block-end-fluid);
    background-image: linear-gradient(180deg, transparent 0%, transparent calc(100% - var(--d-gradient-offset-start)), var(--t-background-color-surface-static) calc(100% - var(--d-gradient-offset-end)), var(--t-background-color-surface-static) 100%);
    }

    .concept-overview {
      --d-gap: var(--t-content-space-fluid);

      display: grid;
      grid-template-columns: 1fr;
      gap: var(--d-gap);
      position: relative;

      @media (width >= 48rem) {
        > * {
          grid-column: 1;
          grid-row: 1;
        }
    }

    .brand-gallery {
      --d-duration: 35s;
      --d-item-inline-size: 14.0625rem;

      position: relative;
      overflow: hidden;

      .gallery-list {
        display: flex;
        inline-size: max-content;
        animation: scroll-seamless var(--d-duration) linear infinite;

        .gallery-item {
          flex-shrink: 0;
          inline-size: var(--d-item-inline-size);

          img {
              inline-size: 100%;
              aspect-ratio: 225 / 356;
              object-fit: cover;
          }
        }
      }
    }

    .story {
      --d-gap: var(--t-content-space-fluid);
      --d-figuer-inline-size: 90%;
      --d-portrait-inline-size: 33%;

      display: flex;
      flex-direction: column;
      gap: var(--d-gap);
      padding-inline: var(--t-container-gutter-fluid-compact);

      .description,
      .commitment {
        display: grid;
        flex-direction: column;
      }

      .description {
        grid-area: description;

        h2, h3 {
          margin-block-end: var(--t-space-fluid-08);
        }

        h2 {
          font-size: var(--t-font-size-fluid-5xl);
          line-height: var(--t-line-height-tight);
        }

        h3 {
          font-size: var(--t-font-size-fluid-2xl);
          line-height: var(--t-line-height-snug);
        }
      }

      .visual {
        grid-area: visual;
        position: relative;
        inline-size: var(--d-figuer-inline-size);
        margin-inline: auto;

        .portrait {
          position: absolute;
          inset-inline-end: var(--t-space-08);
          inset-block-end: 0;
          inline-size: var(--d-portrait-inline-size);
        }
      }

      .commitment {
        grid-area: commitment;

        h3 {
          margin-block-end: var(--t-space-fluid-02);
          font-size: var(--t-font-size-fluid-xl);
        }

        .commitment-list {
          margin-block-end: var(--t-space-fluid-06);
        }
      }

      @media (width >= 48rem) {
        --d-offset: 18rem;
        --d-figure-inline-size: clamp(11.5rem, 4.389rem + 14.815vw, 15.5rem);
        --d-portrait-inline-size: clamp(11.5rem, 4.389rem + 14.815vw, 15.5rem);

        position: relative;
        margin-block-start: var(--d-offset);

        display: grid;
        grid-template-columns: var(--d-figure-inline-size) 1fr;
        grid-template-areas:
          "visual description"
          "visual commitment";
        column-gap: var(--t-column-space-fluid);

        .visual {
          --d-gap: var(--t-content-space-fluid);

          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: var(--d-gap);
          overflow: hidden;
          inline-size: 100%;

          .portrait {
            position: static;
            inset-inline-end: auto;
            inset-block-end: auto;
          }

          .process {
            --d-block-size: clamp(15.25rem, calc(-28.7037vw + 588.44px), 23rem);

            block-size: var(--d-block-size);
            aspect-ratio: var(--t-ratio-4-3);
            object-fit: cover;
          }
        }

        .description {
          margin-block-start: var(--t-space-06);
        }
      }

      @media (width >= 48rem) {
      }
    }
  }

  /* Product Lineup */
  .product-lineup {
    .product-panel {
      --d-gap: var(--t-content-space-fluid);

      display: flex;
      flex-direction: column;
      gap: var(--d-gap);
      background-color: var(--t-background-color-surface);

      h2 {
        background: url(../images/home/products/rokko-miso-koji.webp) right bottom no-repeat;
        background-size: cover;
        border-block-start: var(--t-border-width-800) solid var(--t-border-color-secondary);
      }
    }

    .product-overview {
      margin-block-end: var(--t-space-fluid-10);
      padding-inline: var(--t-inline-gutter-fluid);
    }

    .product-catalog {
      --d-space: var(--t-content-space-fluid-relaxed);

      display: flex;
      flex-direction: column;
      gap: var(--d-space);
      padding-block-end: var(--d-space);
      padding-inline: var(--t-inline-gutter-fluid);
    }

    .product {
      --d-gap: var(--t-content-space-fluid);

      --d-package-inline-size: clamp(11.5rem, 9.4796rem + 9.0023vw, 15rem);

      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: 
        "name"
        "package"
        "desc";
      gap: var(--d-gap);

      @media (width >= 48rem) {
        --d-gap: var(--t-content-space-fluid) var(--t-column-space-fluid);
        --d-package-inline-size: clamp(12.5rem, 0.4545rem + 25.1748vw, 17.5rem);

        grid-template-columns: var(--d-package-inline-size) 1fr;
        grid-template-areas: 
        "name name"
        "package desc";
        align-items: start;
      }

      h3 {
        grid-area: name;
      }

      .package {
        grid-area: package;

        figure {
          text-align: center;

          img {
            display: inline;
            inline-size: var(--d-package-inline-size);
            margin-block-end: var(--t-space-04);
          }
        }
      }

      .description {
        grid-area: desc;

        p:last-of-type {
          margin-block-end: var(--t-space-fluid-10);
        }
      }

      .dish {
        --d-max-inline-size: 35rem;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--t-space-fluid-10);
        margin-inline: auto;

        img {
          inline-size: 75%;
          min-inline-size: 0;
        }

        @media (width >= 32.5rem) {
          flex-direction: row;
          justify-content: space-evenly;
          inline-size: 95%;
          max-inline-size: var(--d-max-inline-size);

          img {
            inline-size: 100%;
          }
        }
      }
    }

    .shop-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--t-space-04);

      a {
        display: block;

        &:last-child {
          padding-inline: 0.8em;
          text-align: center;
        }

        span {
          display: inline-block;
        }
      }
    }
  }

  /* About */
  .about {
    .about-panel {
      --d-gap: var(--t-content-space-fluid);

      display: flex;
      flex-direction: column;
      gap: var(--d-gap);
      background-color: var(--t-background-color-surface);

      h2 {
        margin-block-end: var(--t-space-fluid-06);
        background: url(../images/home/about/rokko-miso-headquarters-exterior.webp) center 80% no-repeat;
        background-size: cover;
        border-block-start: var(--t-border-width-800) solid var(--t-border-color-primary);
      }
    }

    /* About Craftsmanship */
    .about-craftsmanship {
      --d-gap: var(--t-content-space-fluid);
      --d-figuer-inline-size: clamp(11.5rem, 9.4796rem + 9.0023vw, 15rem);

      display: grid;
      grid-template-columns: 1fr;
      gap: var(--d-gap);
      margin-block-end: var(--t-space-fluid-10);
      margin-inline: var(--t-inline-gutter-fluid);
      padding-block: var(--t-space-fluid-12) var(--t-space-fluid-16);
      padding-inline: var(--t-space-fluid-12);
      background-color: var(--p-color-ecru-100);

      @media (width >= 48rem) {
        --d-gap: var(--t-content-space-fluid) var(--t-column-space-fluid);
        --d-figuer-inline-size: clamp(12.5rem, 0.4545rem + 25.1748vw, 17.5rem);

        grid-template-columns: var(--d-figuer-inline-size) 1fr;
        align-items: start;
      }

      figure {
        inline-size: var(--d-figuer-inline-size);
        margin-inline: auto;
        border: var(--t-border-width-400) solid var(--t-border-color-media);
      }

      .craftsmanship-overview {
        h3 {
          margin-block-end: var(--t-space-fluid-08);
          font-size: var(--t-font-size-fluid-2xl);
          line-height: var(--t-line-height-snug);

          span {
            display: inline-block;
          }
        }
      }
    }

    /* About Content */
    .about-content {
      --d-space: var(--t-content-space-fluid-relaxed);

      display: flex;
      flex-direction: column;
      gap: var(--d-space);
      padding-block-end: var(--d-space);
      padding-inline: var(--t-inline-gutter-fluid);

      & > div {
        display: flex;
        flex-direction: column;
        gap: var(--t-content-space-fluid-compact);
      }
    }

    /* About Profile */
    .profile-list {
      .profile-item {
        display: flex;
        flex-direction: column;

        dt,
        dd {
          padding-block: 0.6em;
          padding-inline: 1em;
          border-block-end: var(--t-border-width-100) solid var(--t-border-color-divider);
        }

        dt {
          background-color: var(--t-background-color-accent-secondary-surface);
          font-weight: var(--t-font-weight-semibold);
        }

        dd {
          padding-block-end: 0.7em;
        }

        @media (width >= 48rem) {
          flex-direction: row;

          dt,
          dd {
            padding-block: 0.8em;
          }

          dt {
            flex: 0 0 12em;
          }

          dd {
            inline-size: 100%;
            padding-block-end: 0.9em;
          }
        }
      }
    }

    .about-access {
      iframe {
        aspect-ratio: var(--t-ratio-4-3);
        border: none;
        outline: none;

        @media (width >= 48rem) {
          aspect-ratio: var(--t-ratio-16-9);
        }
      }
    }

    .history-list,
    .awards-list {
      list-style: none;
      padding-inline-start: 0;

      li {
        display: flex;
        flex-direction: column;

        time,
        p {
          padding-block: 0.6em;
          padding-inline: 1em;
          border-block-end: var(--t-border-width-100) solid var(--t-border-color-divider);
        }

        time {
          background-color: var(--p-color-ecru-100);
          font-weight: var(--t-font-weight-semibold);
        }

        p {
          padding-block-end: 0.7em;
        }

        @media (width >= 48rem) {
          flex-direction: row;

          time,
          p {
            padding-block: 0.8em;
          }

          time {
            flex: 0 0 8em;
          }

          p {
            inline-size: 100%;
            padding-block-end: 0.9em;
          }
        }
      }
    }

    .awards-list {
      margin-block-end: var(--t-space-fluid-16);
    }

    /* Award Showcase */
    .award-showcase {
      position: relative;
      touch-action: pan-y;

      > h4 {
        width: fit-content;
        margin-inline: auto;
        border-block-end: var(--t-border-width-200) solid var(--t-border-color-primary);
        font-size: var(--t-font-size-fluid-xl);
        line-height: var(--t-line-height-snug);
      }

      &[data-dragging="true"] {
        .award-product-link {
          pointer-events: none;
        }
      }
    }

    .showcase {
      position: relative;
      overflow: hidden;
      inline-size: 100%;
    }

    .award-list {
      display: flex;
      align-items: center;
      gap: var(--t-column-space-fluid);
      will-change: transform;
      transition-property: transform;
      transition-timing-function: var(--t-timing-function-standard);
    }

    .award-item {
      --d-inline-size: 12.5rem;

      flex-shrink: 0;
      transform: scale(0.7);
      transform-origin: center center;
      inline-size: var(--d-inline-size);
      opacity: var(--t-opacity-inactive);
      transition-property: transform, opacity;
      transition-duration: var(--t-duration-moderate);
      transition-timing-function: var(--t-timing-function-snap);
      pointer-events: none;

      @media (width >= 48rem) {
        --d-inline-size: 14rem;
      }

      .award-product-link {
        display: block;
        text-decoration: none;
        transition: opacity var(--t-duration-fast) var(--t-timing-function-standard);

        @media (hover: hover) {
          &:hover {
            text-decoration: underline;
            opacity: var(--t-opacity-hover);
          }
        }

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

      .description {
        background-image: url(../images/home/award-showcase/backgrounds/laurel-left.webp), url(../images/home/award-showcase/backgrounds/laurel-right.webp);
        background-position: left top, right top;
        background-repeat: no-repeat;
        background-size: 2.4rem;
        opacity: 0;
        visibility: hidden;
        transition-property: transform, opacity, visibility;
        transition-duration: var(--t-duration-moderate);
        transition-timing-function: var(--t-timing-function-standard);

        h4 {
          font-size: var(--t-font-size-fluid-xl);
          line-height: var(--t-line-height-snug);
          text-align: center;
        }

        p {
          font-weight: var(--t-font-weight-bold);
          text-align: center;

          .year {
            display: block;
          }
        }
      }

      &[data-active="true"] {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;

        .award-product-link {
          position: relative;
          z-index: var(--t-z-active-award-product-link);
        }

        .description {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    .showcase-controls {
      position: absolute;
      inset: 0;
      z-index: var(--t-z-showcase-controls);

      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: var(--t-space-fluid-02);
      pointer-events: none;

      .award-control {
        --d-inline-size: 2rem;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: var(--d-inline-size);
        aspect-ratio: var(--t-ratio-1-1);
        background-color: var(--t-carousel-action-background-color);
        border-radius: var(--t-radius-full);
        cursor: pointer;
        pointer-events: auto;
        transition-property: background-color;
        transition-duration: var(--t-duration-base);
        transition-timing-function: var(--t-timing-function-standard);

        @media (width >= 48rem) {
          --d-inline-size: 2.5rem;
        }

        &::before {
          --d-inline-size: 0.5rem;
          --d-offset: 0.125rem;

          content: '';
          display: block;
          inline-size: var(--d-inline-size);
          aspect-ratio: var(--t-ratio-1-1);
          border-block-start: var(--t-border-width-200) solid currentColor;
          border-inline-end: var(--t-border-width-200) solid currentColor;
        }

        &[data-action="prev"]::before {
          transform: translateX(var(--d-offset)) rotate(-135deg);
        }

        &[data-action="next"]::before {
          transform: translateX(calc(-1 * var(--d-offset))) rotate(45deg);
        }

        @media (hover: hover) {
          &:hover {
            background-color: var(--t-carousel-action-background-color-hover);
          }
        }

        &:active {
          background-color: var(--t-carousel-action-background-color-active);
        }

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

    .award-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--t-space-08);
      margin-block-start: var(--t-space-fluid-06);
    }

    .award-pagination-bullet {
      --d-inline-size: 0.5rem;
      --d-active-scale: 1.2;

      inline-size: var(--d-inline-size);
      aspect-ratio: var(--t-ratio-1-1);
      background-color: var(--t-pagination-action-background-color);
      border-radius: var(--t-radius-full);
      transition: background-color var(--t-duration-base) ease, transform var(--t-duration-base) ease;

      @media (hover: hover) {
        &:hover {
          background-color: var(--t-pagination-action-background-color-hover);
          transform: scale(var(--d-active-scale));
        }
      }

      &:active {
        background-color: var(--t-pagination-action-background-color-active);
        transform: scale(var(--d-active-scale));
      }

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

      &[aria-selected="true"] {
        background-color: var(--t-pagination-action-background-color-active);
        transform: scale(var(--d-active-scale));
      }
    }

    .contact {
      --d-block-size: 10rem;

      display: flex;
      align-items: center;
      justify-content: center;
      block-size: var(--d-block-size);
      padding-inline: var(--t-inline-gutter-fluid);
      background: url(../images/home/about/white-miso-koji-soybeans-plate.webp) center center no-repeat;
      background-size: 120%;
      border-block-end: var(--t-border-width-800) solid var(--t-border-color-primary);

      @media (width >= 48rem) {
        --d-block-size: 18rem;

        background-size: cover;
      }

      .contact-link {
        display: block;
        width: fit-content;
        margin-inline: auto;
      }
    }
  }

  /* Footer */
  .site-footer {
    --d-image-size: 7rem;
    --d-logo-size: 15rem;

    --d-background-color-start: var(--t-background-color-accent-secondary-surface);
    --d-background-color-end: var(--t-background-color-surface);
    --d-gradient-offset: 5rem;

    padding-block: var(--t-space-16) var(--t-space-20);
    background: linear-gradient(
      180deg, 
      var(--d-background-color-start) 0rem, 
      var(--d-background-color-start) var(--d-gradient-offset), 
      var(--d-background-color-end) var(--d-gradient-offset), 
      var(--d-background-color-end) 100%
    );

    .miso-soup-image,
    .company-logo {
      margin-inline: auto;
      margin-block-end: var(--t-space-12);
    }

    .miso-soup-image {
      inline-size: var(--d-image-size);
    }

    .company-logo {
      inline-size: var(--d-logo-size);
    }

    p {
      margin-block-end: var(--t-space-08);
      font-size: var(--t-font-size-sm);
      text-align: center;

      span {
        display: inline-block;
      }
    }
  }

  .page-top-button {
    --d-button-size: 2.25rem;
    --d-button-border-size: 0.625rem;
    --d-button-offset: 0.75rem;
    --d-button-easing: cubic-bezier(0.16, 1, 0.3, 1);

    position: fixed;
    inset-inline-end: var(--d-button-offset);
    inset-block-end: var(--d-button-offset);
    z-index: var(--t-z-page-top);

    display: flex;
    align-items: center;
    justify-content: center;

    inline-size: var(--d-button-size);
    aspect-ratio: var(--t-ratio-1-1);
    background-color: var(--t-action-primary-background-color);
    border-radius: var(--t-radius-full);
    opacity: 0;
    pointer-events: none;

    transition: opacity var(--t-duration-base) var(--d-button-easing);

    &::after {
      content: '';
      display: block;
      inline-size: var(--d-button-border-size);
      aspect-ratio: var(--t-ratio-1-1);
      border-block-start: var(--t-border-width-200) solid var(--t-page-top-arrow-color);
      border-inline-end: var(--t-border-width-200) solid var(--t-page-top-arrow-color);
      transform: translateY(2px) rotate(-45deg);
    }

    &[aria-hidden="false"] {
      opacity: 1;
      pointer-events: auto;
    }

    @media (width >= 48rem) {
      --d-button-size: 2.5rem;
      --d-button-offset: 1rem;
    }

    @media (width >= 90rem) {
      inset-inline-end: calc((100% - var(--t-container-max-inline-size) + var(--t-container-gutter-fluid-compact)) / 2 + var(--d-button-offset));
    }
  }
}

@keyframes scroll-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}