html {
        scroll-behavior: smooth;
      }

      body {
        font-family: 'Noto Sans', 'Noto Sans KR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 400;
        letter-spacing: 0;
      }

      h1,
      h2,
      h3 {
        letter-spacing: 0;
      }

      .display-latin {
        font-family: 'Archivo Black', 'Arial Black', 'Noto Sans', sans-serif;
        font-weight: 900 !important;
        letter-spacing: 0;
      }

      .display-korean {
        font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
        font-weight: 800 !important;
        letter-spacing: 0;
        line-height: 1.08 !important;
        word-break: keep-all;
      }

      #heroLine2.display-korean {
        font-size: clamp(2.25rem, 4.2vw, 4rem) !important;
      }

      #storyTitle.display-korean,
      #directionTitle.display-korean,
      #logoTitle.display-korean,
      #historyTitle.display-korean {
        font-size: clamp(2.45rem, 5vw, 4.5rem) !important;
      }

      .condensed-label {
        font-family: 'Bebas Neue', 'Noto Sans', sans-serif;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0;
      }

      .font-black,
      .font-extrabold {
        font-weight: 700 !important;
      }

      .font-semibold {
        font-weight: 500 !important;
      }

      .font-medium {
        font-weight: 400 !important;
      }

      .brand-grid-bg {
        background-image:
          linear-gradient(rgba(248, 223, 196, 0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(248, 223, 196, 0.06) 1px, transparent 1px);
        background-size: 112px 112px;
      }

      .cream-grid-bg {
        background-image:
          linear-gradient(rgba(50, 21, 6, 0.055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(50, 21, 6, 0.055) 1px, transparent 1px);
        background-size: 112px 112px;
      }

      .surface-depth {
        box-shadow:
          0 24px 70px rgba(67, 24, 9, 0.11),
          0 6px 20px rgba(23, 23, 23, 0.045),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }

      .brand-text-link {
        position: relative;
        display: inline-flex;
        width: fit-content;
        align-items: center;
        gap: 0.55rem;
        font-family: 'Archivo Black', 'Noto Sans', sans-serif;
        font-size: 0.82rem;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .brand-text-link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.48rem;
        height: 2px;
        background: currentColor;
        transform-origin: left;
        transition: transform 240ms ease;
      }

      .brand-text-link:hover::after {
        transform: scaleX(0.58);
      }

      .about-hero-cta {
        min-height: 3rem;
        padding: 0.85rem 1.35rem;
        border: 1px solid #321506;
        border-radius: 999px;
        background: #321506;
        color: #fff8ef;
        box-shadow: 0 12px 28px rgba(50, 21, 6, 0.12);
        transition:
          transform 220ms ease,
          background-color 220ms ease,
          color 220ms ease;
      }

      .about-hero-cta::after {
        display: none;
      }

      .about-hero-cta:hover {
        transform: translateY(-2px);
        background: #ef5f18;
        border-color: #ef5f18;
      }

      [data-reveal] {
        opacity: 1;
        transform: none;
        transition:
          opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .story-copy p + p {
        margin-top: 1.75rem;
      }

      .timeline-month {
        display: inline-flex;
        min-width: 2.25rem;
        min-height: 2.25rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #321506;
        color: #fff8ef;
        box-shadow: 0 5px 14px rgba(50, 21, 6, 0.12);
      }

      .timeline-month.is-empty {
        background: transparent;
        box-shadow: none;
      }

      @media (min-width: 640px) and (max-width: 1023px) {
        .about-story-figure {
          width: 100%;
          max-width: 40rem;
          margin-inline: auto;
        }

        .about-story-media {
          aspect-ratio: 5 / 4;
        }

        .about-identity-logo {
          max-width: 390px !important;
        }
      }

      @media (max-width: 767px) {
        body #historyTitle {
          font-size: clamp(2.15rem, 9.7vw, 2.75rem) !important;
          line-height: 0.96 !important;
          overflow-wrap: anywhere;
          word-break: normal !important;
        }

        body #historyTitle.display-korean {
          font-size: clamp(2.1rem, 9.2vw, 2.65rem) !important;
          line-height: 1.12 !important;
          word-break: keep-all !important;
        }

        body #logoTitle {
          font-size: clamp(2.3rem, 10vw, 3rem) !important;
          overflow-wrap: anywhere;
          word-break: normal !important;
        }

      }

      @media (max-width: 359px) {
        #top h1 {
          max-width: 100%;
          font-size: clamp(3.75rem, 22vw, 5.25rem) !important;
          line-height: 0.8 !important;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        [data-reveal] {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }