PageSourceSearch

https://erie-portfolio.netlify.app/

html erie-portfolio.netlify.app collected 2026-10-03 10:42:19 UTC 66,757 bytes, 1,487 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>ERIÉ — Artist | New Single "CEO" Out Now</title>
7    <meta name="description" content="Official site of ERIÉ (Platon Mary Eri) — Tokyo/Los Angeles artist blending melodic rap, pop hooks and early-2000s R&B. Her third single 'CEO' is out now on Spotify, Apple Music and all platforms via Peace By Peace Sounds. Press, music, media and booking.">
8    <link rel="canonical" href="https://erie-portfolio.netlify.app/">
9    <meta property="og:type" content="website">
10    <meta property="og:title" content="ERIÉ — Artist | New Single &quot;CEO&quot; Out Now">
11    <meta property="og:description" content="Tokyo/LA artist ERIÉ releases her third single 'CEO' — out now on all streaming platforms. Watch her TEEN ACCESS interview, explore music, media and booking.">
12    <meta property="og:url" content="https://erie-portfolio.netlify.app/">
13    <meta property="og:image" content="https://erie-portfolio.netlify.app/photos/CEO_WALKING_VIDEO-thumb.jpg">
14    <meta name="twitter:card" content="summary_large_image">
15    
15<script type="application/ld+json">
16    {
17      "@context": "https://schema.org",
18      "@type": "MusicGroup",
19      "name": "ERIÉ",
20      "alternateName": "Platon Mary Eri",
21      "description": "Nagoya-born, Tokyo/Los Angeles-based artist. Half-Japanese, half-Filipina. Melodic rap, pop hooks and early-2000s R&B — an LA–Tokyo sound.",
22      "genre": ["J-pop", "R&B", "Melodic rap", "Pop"],
23      "url": "https://erie-portfolio.netlify.app/",
24      "sameAs": [
25        "https://www.instagram.com/platon_mary_eri/",
26        "https://open.spotify.com/artist/7FZGL4fKbZFTuooX8TJETi",
27        "https://www.tiktok.com/@platon.mary.eri",
28        "https://www.youtube.com/@platon_mary_eri"
29      ],
30      "track": [
31        { "@type": "MusicRecording", "name": "CEO", "datePublished": "2026-07-03", "url": "https://independent.ffm.to/ceo" },
32        { "@type": "MusicRecording", "name": "Star", "datePublished": "2026" },
33        { "@type": "MusicRecording", "name": "BYEEE BOY", "datePublished": "2025" }
34      ]
35    }
36    </script>
36
37    <style>
38        * {
39            margin: 0;
40            padding: 0;
41            box-sizing: border-box;
42        }
43
44        body {
45            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
46            line-height: 1.6;
47            color: #222222;
48            background: #ffffff;
49            overflow-x: hidden;
50        }
51
52        /* Header / Navigation */
53        header {
54            background: #ffffff;
55            border-bottom: 0.5px solid #e0e0e0;
56            position: sticky;
57            top: 0;
58            z-index: 100;
59        }
60
61        nav {
62            max-width: 1400px;
63            margin: 0 auto;
64            padding: 1.5rem 1rem;
65            display: flex;
66            justify-content: center;
67            align-items: center;
68        }
69
70        .logo {
71            display: flex;
72            align-items: center;
73            justify-content: center;
74            height: 50px;
75        }
76
77        .logo img {
78            max-height: 50px;
79            width: auto;
80        }
81
82        nav ul {
83            list-style: none;
84            display: flex;
85            gap: 1.5rem;
86            flex-wrap: wrap;
87            justify-content: center;
88        }
89
90        nav a {
91            text-decoration: none;
92            color: #222222;
93            font-size: 0.75rem;
94            font-weight: 400;
95            transition: all 0.3s ease;
96            position: relative;
97            text-transform: uppercase;
98            letter-spacing: 2px;
99        }
100
101        nav a:hover {
102            color: #999999;
103        }
104
105        nav a::after {
106            content: '';
107            position: absolute;
108            bottom: -5px;
109            left: 0;
110            width: 0;
111            height: 0.5px;
112            background: #222222;
113            transition: width 0.3s ease;
114        }
115
116        nav a:hover::after {
117            width: 100%;
118        }
119
120        #translateBtn {
121            background: none;
122            border: none;
123            color: #222222;
124            font-size: 0.75rem;
125            cursor: pointer;
126            text-transform: uppercase;
127            letter-spacing: 2px;
128            font-weight: 400;
129            transition: color 0.3s ease;
130        }
131
132        #translateBtn:hover {
133            color: #999999;
134        }
135
136        /* Top Image Carousel */
137        .top-carousel {
138            background: #ffffff;
139            border-bottom: 0.5px solid #e0e0e0;
140            padding: 2rem 2rem 2.5rem;
141        }
142
143        .carousel-frame {
144            max-width: 1400px;
145            margin: 0 auto;
146            position: relative;
147        }
148
149        .carousel-viewport {
150            position: relative;
151            width: 100%;
152            aspect-ratio: 16 / 9;
153            overflow: hidden;
154            background: #f0f0f0;
155        }
156
157        .carousel-track {
158            display: flex;
159            height: 100%;
160            transition: transform 0.5s ease;
161        }
162
163        .carousel-slide {
164            flex: 0 0 100%;
165            height: 100%;
166        }
167
168        .carousel-slide img {
169            width: 100%;
170            height: 100%;
171            object-fit: cover;
172            display: block;
173        }
174
175        .carousel-slide.music-slide {
176            background-size: cover;
177            background-position: center;
178            display: flex;
179            align-items: center;
180            justify-content: center;
181            padding: 1.5rem;
182        }
183
184        .carousel-slide.music-slide iframe {
185            max-width: 700px;
186            max-height: 90%;
187        }
188
189        .carousel-arrow {
190            position: absolute;
191            top: 50%;
192            transform: translateY(-50%);
193            width: 44px;
194            height: 44px;
195            background: rgba(255, 255, 255, 0.85);
196            border: 0.5px solid #e0e0e0;
197            color: #222222;
198            font-size: 1.1rem;
199            line-height: 1;
200            cursor: pointer;
201            display: flex;
202            align-items: center;
203            justify-content: center;
204            transition: background 0.3s ease;
205            z-index: 5;
206        }
207
208        .carousel-arrow:hover {
209            background: #ffffff;
210        }
211
212        .carousel-arrow.prev { left: 12px; }
213        .carousel-arrow.next { right: 12px; }
214
215        .carousel-dots {
216            display: flex;
217            justify-content: center;
218            gap: 0.5rem;
219            margin-top: 1rem;
220        }
221
222        .carousel-dot {
223            width: 7px;
224            height: 7px;
225            border-radius: 50%;
226            background: #d0d0d0;
227            border: none;
228            padding: 0;
229            cursor: pointer;
230            transition: background 0.3s ease;
231        }
232
233        .carousel-dot.active {
234            background: #222222;
235        }
236
237        @media (max-width: 768px) {
238            .top-carousel {
239                padding: 1rem 1rem 1.5rem;
240            }
241
242            .carousel-arrow {
243                width: 34px;
244                height: 34px;
245            }
246        }
247
248        /* Hero Section */
249        .hero {
250            background: #ffffff;
251            border-bottom: 0.5px solid #e0e0e0;
252            padding: 6rem 2rem;
253            text-align: center;
254            position: relative;
255            overflow: hidden;
256        }
257
258        .hero-content {
259            max-width: 800px;
260            margin: 0 auto;
261            position: relative;
262            z-index: 2;
263        }
264
265        .hero .logo {
266            margin-bottom: 2rem;
267        }
268
269        .hero .tagline {
270            font-size: 1.1rem;
271            margin-bottom: 2rem;
272            color: #222222;
273            font-weight: 400;
274            letter-spacing: 1px;
275        }
276
277        .hero p {
278            font-size: 0.9rem;
279            margin-bottom: 1.5rem;
280            color: #666666;
281            max-width: 600px;
282            margin-left: auto;
283            margin-right: auto;
284            letter-spacing: 0.5px;
285        }
286
287        .stats {
288            display: flex;
289            justify-content: center;
290            gap: 5rem;
291            margin: 2rem 0;
292            flex-wrap: wrap;
293        }
294
295        .stat {
296            text-align: center;
297        }
298
299        .stat-number {
300            font-size: 1.8rem;
301            font-weight: 400;
302            display: block;
303            color: #222222;
304            margin-bottom: 0.5rem;
305            letter-spacing: 1px;
306        }
307
308        .stat-label {
309            font-size: 0.7rem;
310            color: #999999;
311            text-transform: uppercase;
312            letter-spacing: 2px;
313        }
314
315        /* CTA Button */
316        .cta-button {
317            display: inline-block;
318            background: #222222;
319            color: white;
320            padding: 1rem 3rem;
321            border-radius: 0;
322            text-decoration: none;
323            font-weight: 400;
324            margin-top: 1.5rem;
325            transition: all 0.3s ease;
326            cursor: pointer;
327            border: none;
328            font-size: 0.75rem;
329            box-shadow: none;
330            text-transform: uppercase;
331            letter-spacing: 2px;
332        }
333
334        .cta-button:hover {
335            background: #999999;
336        }
337
338        /* Gallery Section */
339        .gallery {
340            max-width: 1400px;
341            margin: 0 auto;
342            padding: 3rem 2rem;
343        }
344
345        .gallery h2 {
346            font-size: 1.8rem;
347            margin-bottom: 4rem;
348            text-align: center;
349            color: #222222;
350            font-weight: 400;
351            letter-spacing: 1px;
352        }
353
354        .video-grid, .photo-grid {
355            display: grid;
356            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
357            gap: 2rem;
358            margin-bottom: 6rem;
359        }
360
361        .video-item, .photo-item {
362            background: #ffffff;
363            border: 0.5px solid #e0e0e0;
364            border-radius: 0;
365            overflow: hidden;
366            transition: all 0.3s ease;
367        }
368
369        .video-item:hover, .photo-item:hover {
370            border-color: #222222;
371        }
372
373        .video-wrapper, .photo-wrapper {
374            position: relative;
375            width: 100%;
376            padding-bottom: 100%;
377            background: #f5f5f5;
378            overflow: hidden;
379        }
380
381        .video-wrapper video, .photo-wrapper img {
382            position: absolute;
383            top: 0;
384            left: 0;
385            width: 100%;
386            height: 100%;
387            object-fit: cover;
388            object-position: center;
389        }
390
391        .video-info, .photo-info {
392            padding: 2rem;
393        }
394
395        .video-title, .photo-title {
396            font-size: 1rem;
397            font-weight: 400;
398            color: #222222;
399            margin-bottom: 0.5rem;
400            letter-spacing: 0.5px;
401        }
402
403        .video-description, .photo-description {
404            font-size: 0.8rem;
405            color: #999999;
406            line-height: 1.6;
407            letter-spacing: 0.3px;
408        }
409
410        .featured-badge {
411            display: inline-block;
412            background: #222222;
413            color: white;
414            padding: 0.4rem 1rem;
415            border-radius: 0;
416            font-size: 0.65rem;
417            font-weight: 400;
418            margin-bottom: 1rem;
419            text-transform: uppercase;
420            letter-spacing: 1.5px;
421        }
422
423        /* About Section */
424        .about {
425            background: #ffffff;
426            border-top: 0.5px solid #e0e0e0;
427            border-bottom: 0.5px solid #e0e0e0;
428            padding: 8rem 2rem;
429        }
430
431        .about-content {
432            max-width: 1000px;
433            margin: 0 auto;
434        }
435
436        .about h2 {
437            font-size: 1.8rem;
438            margin-bottom: 3rem;
439            color: #222222;
440            font-weight: 400;
441            letter-spacing: 1px;
442        }
443
444        .about p {
445            font-size: 0.95rem;
446            color: #555555;
447            margin-bottom: 2rem;
448            line-height: 1.8;
449            letter-spacing: 0.5px;
450        }
451
452        .highlight {
453            color: #222222;
454            font-weight: 400;
455        }
456
457        /* Services */
458        .services {
459            display: grid;
460            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
461            gap: 3rem;
462            margin-top: 4rem;
463        }
464
465        .service-card {
466            background: #ffffff;
467            padding: 2.5rem;
468            border: 0.5px solid #e0e0e0;
469            border-radius: 0;
470            transition: all 0.3s ease;
471        }
472
473        .service-card:hover {
474            border-color: #222222;
475        }
476
477        .service-card h3 {
478            color: #222222;
479            margin-bottom: 1rem;
480            font-weight: 400;
481            font-size: 1rem;
482            letter-spacing: 0.5px;
483        }
484
485        .service-card p {
486            color: #888888;
487            font-size: 0.85rem;
488            line-height: 1.7;
489            letter-spacing: 0.3px;
490        }
491
492        /* Contact Section */
493        .contact {
494            background: #ffffff;
495            border-top: 0.5px solid #e0e0e0;
496            padding: 8rem 2rem;
497            text-align: center;
498        }
499
500        .contact-content {
501            max-width: 600px;
502            margin: 0 auto;
503        }
504
505        .contact h2 {
506            font-size: 1.8rem;
507            margin-bottom: 2rem;
508            color: #222222;
509            font-weight: 400;
510            letter-spacing: 1px;
511        }
512
513        .contact p {
514            font-size: 0.9rem;
515            margin-bottom: 3rem;
516            color: #666666;
517            letter-spacing: 0.5px;
518        }
519
520        .contact-info {
521            background: #ffffff;
522            padding: 3rem;
523            border: 0.5px solid #e0e0e0;
524            border-radius: 0;
525            margin-bottom: 3rem;
526        }
527
528        .contact-email {
529            font-size: 1.2rem;
530            font-weight: 400;
531            margin: 1.5rem 0;
532            color: #222222;
533            letter-spacing: 0.5px;
534        }
535
536        .contact-label {
537            font-size: 0.7rem;
538            color: #999999;
539            text-transform: uppercase;
540            letter-spacing: 2px;
541            margin-bottom: 0.5rem;
542        }
543
544        /* Footer */
545        footer {
546            background: #ffffff;
547            border-top: 0.5px solid #e0e0e0;
548            color: #999999;
549            text-align: center;
550            padding: 3rem;
551            font-size: 0.8rem;
552            letter-spacing: 0.5px;
553        }
554
555        footer a {
556            color: #222222;
557            text-decoration: none;
558            transition: color 0.3s;
559        }
560
561        footer a:hover {
562            color: #999999;
563        }
564
565        /* Responsive */
566        @media (max-width: 768px) {
567            .hero {
568                padding: 3rem 1.5rem;
569            }
570
571            nav {
572                padding: 1rem 0.75rem;
573            }
574
575            nav ul {
576                gap: 0.75rem;
577            }
578
579            nav a {
580                font-size: 0.65rem;
581            }
582
583            .hero .logo {
584                margin-bottom: 1rem;
585            }
586
587            .stats {
588                gap: 2rem;
589                margin: 1rem 0;
590            }
591
592            .video-grid, .photo-grid {
593                grid-template-columns: 1fr;
594            }
595
596            /* Mobile: Vertical image display - crop from center */
597            .video-wrapper img, .photo-wrapper img {
598                object-position: center center;
599            }
600
601            .about h2, .contact h2 {
602                font-size: 1.4rem;
603            }
604        }
605
606        /* Desktop: Landscape image display */
607        @media (min-width: 769px) {
608            .video-wrapper img, .photo-wrapper img {
609                object-position: center center;
610            }
611        }
612    </style>
613</head>
614<body>
615
616<!-- Translation Script -->
617<script>
618const translations = {
619    'Media': 'メディア',
620    'Press': 'プレス',
621    'Press Highlight': 'プレスハイライト',
622    'ERIÉ talks new single "CEO" — TEEN ACCESS "Spill the Tea" Podcast': 'ERIÉ、新曲「CEO」を語る — TEEN ACCESS「Spill the Tea」ポッドキャスト',
623    'Tokyo/Los Angeles artist ERIÉ (Platon Mary Eri) sits down with TEEN ACCESS to talk her new single "CEO", her style, and her creative process. "CEO" is ERIÉ\'s third single, following "BYEEE BOY" and "Star" — out now on Spotify, Apple Music and all streaming platforms via Peace By Peace Sounds.': '東京・ロサンゼルスを拠点に活動するアーティストERIÉ(プラトン・メリー・恵梨)がTEEN ACCESSに出演し、新曲「CEO」、ファッション、そして制作プロセスについて語りました。「CEO」は「BYEEE BOY」「Star」に続く3枚目のシングルで、Peace By Peace SoundsよりSpotify、Apple Musicほか全ストリーミングサービスで配信中。',
624    'Gallery': 'ギャラリー',
625    'Music': '音楽',
626    'About': 'について',
627    'Contact': 'お問い合わせ',
628    'Let\'s Create Together': '一緒に作りましょう',
629    'Artist + Beauty + Fashion + Creator': 'アーティスト + ビューティー + ファッション + クリエイター',
630    'Tokyo Energy. LA Sound. Global Soul.': '東京エネルギー。LAサウンド。グローバルソウル。',
631    'Instagram': 'インスタグラム',
632    'TikTok': 'TikTok',
633    'Engagement': 'エンゲージメント',
634    'Fashion Content': 'ファッションコンテンツ',
635    'Street style, lifestyle fashion, and creative brand partnerships.': 'ストリートスタイル、ライフスタイルファッション、クリエイティブブランドパートナーシップ。',
636    'Makeup & Beauty': 'メイク & ビューティー',
637    'Signature one-handed lipstick tutorials & creative beauty content creation.': 'シグネチャーワンハンドリップスティックチュートリアル & クリエイティブビューティーコンテンツ作成。',
638    'Kodak Commercial': 'コダック商業',
639    'Recent brand campaign demonstrating professional quality & creative direction.': '最近のブランドキャンペーン、プロフェッショナルな品質とクリエイティブディレクションを実証しています。',
640    'Food & Lifestyle': '食べ物とライフスタイル',
641    'Behind-the-scenes moments, food, and authentic lifestyle content.': 'ビハインドザシーンの瞬間、食べ物、本物のライフスタイルコンテンツ。',
642    'Lifestyle': 'ライフスタイル',
643    'Daily moments, creative perspective, and relatable content from ERIÉ.': '毎日の瞬間、クリエイティブなパースペクティブ、ERIÉからの関連コンテンツ。',
644    'ERIÉ Live': 'ERIÉ ライブ',
645    'Live performance, artist presence, and authentic creative energy in real time.': 'ライブパフォーマンス、アーティストプレゼンス、リアルタイムの本物のクリエイティブエネルギー。',
646    'Music Video': 'ミュージックビデオ',
647    'Original music release showcasing ERIÉ\'s creative vision & sound.': 'ERIÉ のクリエイティブビジョンとサウンドを紹介するオリジナルミュージックリリース。',
648    'Product Review': '製品レビュー',
649    'Creative product showcase and brand partnership content.': 'クリエイティブな製品ショーケースとブランドパートナーシップコンテンツ。',
650    'Fashion & Style': 'ファッション & スタイル',
651    'Releases': 'リリース',
652    'ERIÉ\'s music fuses Japanese softness with LA confidence, blending melodic rap cadences, polished pop hooks, and early 2000s R&B influence.': 'ERIÉ の音楽は日本の柔らかさとLA自信を融合させ、メロディアスラップケイデンス、ポリッシュドポップフック、2000年代初期のR&B影響をブレンドしています。',
653    'Available on all streaming platforms': 'すべてのストリーミングプラットフォームで利用可能',
654    'Untitled': 'アンタイトル',
655    'Spotify': 'Spotify',
656    'Apple Music': 'Apple Music',
657    'Who is ERIÉ?': 'ERIÉは誰ですか?',
658    'Ready to Partner with ERIÉ?': 'ERIÉ とパートナーシップの準備はできていますか?',
659    'Let\'s create something authentic together.': '本物を一緒に作りましょう。',
660    'Manager:': 'マネージャー:',
661    'Bam Barcena': 'Bam Barcena',
662    'Email:': 'メール:',
663    'Availability:': '可用性:',
664    'June 25 – July 7, 2026': '2026年6月25日~7月7日',
665    'Rate:': 'レート:',
666    '$2,000–$2,500': '$2,000~$2,500',
667    'Full EPK:': 'フル EPK:',
668    'Get in Touch': 'お問い合わせ',
669    'Peace By Peace Studios': 'Peace By Peace Studios',
670    'All rights reserved.': 'すべての著作権は所有されています。'
671};
672
673document.addEventListener('DOMContentLoaded', function() {
674    const translateBtn = document.getElementById('translateBtn');
675    let isJapanese = localStorage.getItem('erieLang') === 'ja';
676
677    function translateElement(element) {
678        if (element.nodeType === 3) {
679            for (let key in translations) {
680                if (element.textContent.includes(key)) {
681                    element.textContent = element.textContent.replace(new RegExp(key, 'g'), translations[key]);
682                }
683            }
684        } else if (element.nodeType === 1 && element.children.length === 0) {
685            for (let key in translations) {
686                if (element.textContent.includes(key)) {
687                    element.textContent = element.textContent.replace(new RegExp(key, 'g'), translations[key]);
688                }
689            }
690        } else {
691            for (let i = 0; i < element.childNodes.length; i++) {
692                translateElement(element.childNodes[i]);
693            }
694        }
695    }
696
697    function toggleJapanese() {
698        if (!isJapanese) {
699            // Switch to Japanese
700            translateElement(document.body);
701            isJapanese = true;
702            translateBtn.textContent = 'English';
703            localStorage.setItem('erieLang', 'ja');
704        } else {
705            // Switch back to English
706            isJapanese = false;
707            translateBtn.textContent = '日本語 / JP';
708            localStorage.removeItem('erieLang');
709            location.reload();
710        }
711    }
712
713    translateBtn.addEventListener('click', function(e) {
714        e.preventDefault();
715        toggleJapanese();
716    });
717
718    if (isJapanese) {
719        setTimeout(() => {
720            translateElement(document.body);
721            translateBtn.textContent = 'English';
722        }, 100);
723    }
724});
725</script>
725
726
727<!-- Header -->
728<header>
729    <nav>
730        <ul style="width: 100%; justify-content: center;">
731            <li><a href="#portfolio">Media</a></li>
732            <li><a href="#press">Press</a></li>
733            <li><a href="#gallery">Gallery</a></li>
734            <li><a href="#music">Music</a></li>
735            <li><a href="#about">About</a></li>
736            <li><a href="#contact">Contact</a></li>
737            <li style="margin-left: 1rem; padding-left: 1rem; border-left: 0.5px solid #e0e0e0;">
738                <button id="translateBtn" style="background: none; border: none; color: #222222; font-size: 0.75rem; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; transition: color 0.3s ease;" title="日本語に翻訳">
739                    日本語 / JP
740                </button>
741            </li>
742        </ul>
743    </nav>
744</header>
745
746<!-- Top Image Carousel (Artist Profile) -->
747<section class="top-carousel" id="artist-profile">
748    <div class="carousel-frame">
749        <div class="carousel-viewport">
750            <div class="carousel-track" id="carouselTrack">
751                <div class="carousel-slide"><img src="./photos/1_EPK.png" alt="ERIÉ — Artist Profile"></div>
752                <div class="carousel-slide"><img src="./photos/2_EPK.png" alt="The World of ERIÉ" loading="lazy"></div>
753                <div class="carousel-slide"><img src="./photos/3_EPK.png" alt="Her Sound" loading="lazy"></div>
754                <div class="carousel-slide"><img src="./photos/4_EPK.png" alt="Between Worlds" loading="lazy"></div>
755                <div class="carousel-slide"><img src="./photos/5_EPK.png" alt="Release Plan" loading="lazy"></div>
756                <div class="carousel-slide"><img src="./photos/6_EPK.png" alt="ERIÉ — Editorial" loading="lazy"></div>
757                <div class="carousel-slide music-slide" style="background-image: url('./photos/7_EPK.png');">
758                    <iframe style="border-radius: 24px" src="https://untitled.stream/embed/xhah3qRuGTs7" width="100%" height="344" allowFullScreen="" allow="picture-in-picture" frameborder="0" loading="lazy" title="ERIÉ — Untitled Stream Player"></iframe>
759                </div>
760                <div class="carousel-slide"><img src="./photos/8_EPK.png" alt="Global By Design" loading="lazy"></div>
761                <div class="carousel-slide"><img src="./photos/9_EPK.png" alt="Artist: ERIÉ — Contact" loading="lazy"></div>
762            </div>
763            <button class="carousel-arrow prev" id="carouselPrev" aria-label="Previous slide">&#10094;</button>
764            <button class="carousel-arrow next" id="carouselNext" aria-label="Next slide">&#10095;</button>
765        </div>
766        <div class="carousel-dots" id="carouselDots"></div>
767    </div>
768</section>
769
770<script>
771(function() {
772    var track = document.getElementById('carouselTrack');
773    var slides = track.children;
774    var dotsWrap = document.getElementById('carouselDots');
775    var current = 0;
776    var timer = null;
777
778    for (var i = 0; i < slides.length; i++) {
779        var dot = document.createElement('button');
780        dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
781        dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
782        dot.dataset.index = i;
783        dot.addEventListener('click', function() {
784            goTo(parseInt(this.dataset.index, 10));
785            restartTimer();
786        });
787        dotsWrap.appendChild(dot);
788    }
789
790    function goTo(index) {
791        current = (index + slides.length) % slides.length;
792        track.style.transform = 'translateX(-' + (current * 100) + '%)';
793        var dots = dotsWrap.children;
794        for (var j = 0; j < dots.length; j++) {
795            dots[j].className = 'carousel-dot' + (j === current ? ' active' : '');
796        }
797    }
798
799    function restartTimer() {
800        clearInterval(timer);
801        timer = setInterval(function() { goTo(current + 1); }, 6000);
802    }
803
804    document.getElementById('carouselPrev').addEventListener('click', function() { goTo(current - 1); restartTimer(); });
805    document.getElementById('carouselNext').addEventListener('click', function() { goTo(current + 1); restartTimer(); });
806
807    var viewport = track.parentElement;
808    viewport.addEventListener('mouseenter', function() { clearInterval(timer); });
809    viewport.addEventListener('mouseleave', function() { restartTimer(); });
810
811    var startX = null;
812    track.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; }, { passive: true });
813    track.addEventListener('touchend', function(e) {
814        if (startX === null) return;
815        var diff = e.changedTouches[0].clientX - startX;
816        if (Math.abs(diff) > 40) { goTo(diff < 0 ? current + 1 : current - 1); restartTimer(); }
817        startX = null;
818    }, { passive: true });
819
820    restartTimer();
821})();
822</script>
822
823
824<!-- Hero Section -->
825<section class="hero">
826    <div class="hero-content">
827        <div class="logo">
828            <img src="./erie-logo.png" alt="ERIÉ" style="max-height: 120px; width: auto;">
829        </div>
830        <p class="tagline">Artist + Beauty + Fashion + Creator</p>
831        <p>Tokyo Energy. LA Sound. Global Soul.</p>
832
833        <a href="#contact" class="cta-button">Let's Create Together</a>
834
835        <div style="margin-top: 3rem;">
836            <iframe style="border-radius: 24px" src="https://untitled.stream/embed/8fAE6g8MM8El" width="100%" height="344" allowFullScreen="" allow="picture-in-picture" frameborder="0" loading="lazy" title="ERIÉ — Untitled Stream Player"></iframe>
837        </div>
838    </div>
839</section>
840
841<!-- Portfolio / Video Gallery -->
842<section class="gallery" id="portfolio">
843    <h2>Media</h2>
844    
845    <div class="video-grid">
846        <!-- Row 1: CEO Promo -->
847        <div class="video-item">
848            <div class="video-wrapper">
849                <video controls preload="none" poster="./videos/CEO_DRIVING-thumb.jpg">
850                    <source src="./videos/CEO_DRIVING.mp4" type="video/mp4">
851                    Your browser does not support the video tag.
852                </video>
853            </div>
854            <div class="video-info">
855                <div class="video-title">CEO Promo</div>
856                <div class="video-description">Promotional content for CEO — boss energy and self-empowerment.</div>
857            </div>
858        </div>
859
860        <!-- Row 1: CEO Promo 2 -->
861        <div class="video-item">
862            <div class="video-wrapper">
863                <video controls preload="none" poster="./videos/CEO_WALKING_VIDEO-thumb.jpg">
864                    <source src="./videos/CEO_WALKING_VIDEO.mp4" type="video/mp4">
865                    Your browser does not support the video tag.
866                </video>
867            </div>
868            <div class="video-info">
869                <div class="video-title">CEO Promo 2</div>
870                <div class="video-description">Promotional content for CEO — boss energy and self-empowerment.</div>
871            </div>
872        </div>
873
874        <!-- Row 1: Buzzfeed Interview -->
875        <div class="video-item">
876            <div class="video-wrapper">
877                <video controls preload="none" poster="./videos/buzzfeed_interview_2026-thumb.jpg">
878                    <source src="./videos/buzzfeed_interview_2026.mp4" type="video/mp4">
879                    Your browser does not support the video tag.
880                </video>
881            </div>
882            <div class="video-info">
883                <div class="video-title">TEEN ACCESS Interview</div>
884                <div class="video-description">Feature interview on BUZZ's Teen Access — personality, story, and culture with ERIÉ.</div>
885            </div>
886        </div>
887
888        <!-- Row 1: ERIÉ Live -->
889        <div class="video-item">
890            <div class="video-wrapper">
891                <video controls preload="none" poster="./videos/erie-live-thumb.jpg">
892                    <source src="./videos/erie-live.mp4" type="video/mp4">
893                    Your browser does not support the video tag.
894                </video>
895            </div>
896            <div class="video-info">
897                <div class="video-title">ERIÉ Live</div>
898                <div class="video-description">Live performance, artist presence, and authentic creative energy in real time.</div>
899            </div>
900        </div>
901
902        <!-- Row 2: Live Session -->
903        <div class="video-item">
904            <div class="video-wrapper">
905                <video controls preload="none" poster="./videos/FIRST_LOVE-thumb.jpg">
906                    <source src="./videos/FIRST_LOVE.m4v" type="video/mp4">
907                    Your browser does not support the video tag.
908                </video>
909            </div>
910            <div class="video-info">
911                <div class="video-title">Live Session</div>
912                <div class="video-description">Live studio session — raw vocals and real-time artistry.</div>
913            </div>
914        </div>
915
916        <!-- Row 2: Complex Family Food Festival Host -->
917        <div class="video-item">
918            <div class="video-wrapper">
919                <video controls preload="none" poster="./videos/complex-style-fs2026-thumb.jpg">
920                    <source src="./videos/complex-style-fs2026.m4v" type="video/mp4">
921                    Your browser does not support the video tag.
922                </video>
923            </div>
924            <div class="video-info">
925                <div class="video-title">Complex Family Food Festival Host</div>
926                <div class="video-description">Hosting Complex's Family Food Festival — on-camera hosting, food, and culture.</div>
927            </div>
928        </div>
929
930        <!-- Row 2: Fashion Content -->
931        <div class="video-item">
932            <div class="video-wrapper">
933                <video controls preload="none" poster="./videos/fashion-content-thumb.jpg">
934                    <source src="./videos/fashion-content.mp4" type="video/mp4">
935                    Your browser does not support the video tag.
936                </video>
937            </div>
938            <div class="video-info">
939                <div class="video-title">Fashion Content</div>
940                <div class="video-description">Street style, lifestyle fashion, and creative brand partnerships.</div>
941            </div>
942        </div>
943
944        <!-- Row 2: Kodak Commercial -->
945        <div class="video-item">
946            <div class="video-wrapper">
947                <video controls preload="none" poster="./videos/kodak-commercial-thumb.jpg">
948                    <source src="./videos/kodak-commercial.mp4" type="video/mp4">
949                    Your browser does not support the video tag.
950                </video>
951            </div>
952            <div class="video-info">
953                <div class="featured-badge">Featured</div>
954                <div class="video-title">Kodak Commercial</div>
955                <div class="video-description">Recent brand campaign demonstrating professional quality & creative direction.</div>
956            </div>
957        </div>
958
959        <!-- Row 3: Food & Lifestyle -->
960        <div class="video-item">
961            <div class="video-wrapper">
962                <video controls preload="none" poster="./videos/food-lifestyle-thumb.jpg">
963                    <source src="./videos/food-lifestyle.mp4" type="video/mp4">
964                    Your browser does not support the video tag.
965                </video>
966            </div>
967            <div class="video-info">
968                <div class="video-title">Food & Lifestyle</div>
969                <div class="video-description">Behind-the-scenes moments, food, and authentic lifestyle content.</div>
970            </div>
971        </div>
972
973        <!-- Row 3: Lifestyle -->
974        <div class="video-item">
975            <div class="video-wrapper">
976                <video controls preload="none" poster="./videos/lifestyle-thumb.jpg">
977                    <source src="./videos/lifestyle.mp4" type="video/mp4">
978                    Your browser does not support the video tag.
979                </video>
980            </div>
981            <div class="video-info">
982                <div class="video-title">Lifestyle</div>
983                <div class="video-description">Daily moments, creative perspective, and relatable content from ERIÉ.</div>
984            </div>
985        </div>
986
987        <!-- Row 3: Product Review -->
988        <div class="video-item">
989            <div class="video-wrapper">
990                <video controls preload="none" poster="./videos/product-review-thumb.jpg">
991                    <source src="./videos/product-review.mp4" type="video/mp4">
992                    Your browser does not support the video tag.
993                </video>
994            </div>
995            <div class="video-info">
996                <div class="video-title">Product Review</div>
997                <div class="video-description">Creative product showcase and brand partnership content.</div>
998            </div>
999        </div>
1000
1001        <!-- Row 3: Makeup & Beauty -->
1002        <div class="video-item">
1003            <div class="video-wrapper">
1004                <video controls preload="none" poster="./videos/makeup-tutorial-thumb.jpg">
1005                    <source src="./videos/makeup-tutorial.mp4" type="video/mp4">
1006                    Your browser does not support the video tag.
1007                </video>
1008            </div>
1009            <div class="video-info">
1010                <div class="video-title">Makeup & Beauty</div>
1011                <div class="video-description">Signature one-handed lipstick tutorials & creative beauty content creation.</div>
1012            </div>
1013        </div>
1014    </div>
1015</section>
1016
1017<!-- Press Section -->
1018<section class="gallery" id="press" style="background: #f9f9f9; border-top: 0.5px solid #e0e0e0; border-bottom: 0.5px solid #e0e0e0;">
1019    <h2>Press</h2>
1020
1021    <div style="max-width: 1000px; margin: 0 auto;">
1022        <!-- Press Hero Video -->
1023        <div style="position: relative; width: 100%; padding-bottom: 56.25%; background: #f0f0f0; border: 0.5px solid #e0e0e0; overflow: hidden;">
1024            <iframe
1025                src="https://www.youtube-nocookie.com/embed/_hpnTgxWn5c"
1026                title="ERIÉ talks new single CEO, fashion and creative process — TEEN ACCESS Spill the Tea Podcast"
1027                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
1028                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
1029                referrerpolicy="strict-origin-when-cross-origin"
1030                allowfullscreen
1031                loading="lazy"></iframe>
1032        </div>
1033
1034        <div style="text-align: center; padding: 2.5rem 1rem 0;">
1035            <div class="featured-badge">Press Highlight</div>
1036            <h3 style="color: #222222; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px; margin-bottom: 1rem;">ERIÉ talks new single "CEO" — TEEN ACCESS "Spill the Tea" Podcast</h3>
1037            <p style="color: #666666; font-size: 0.9rem; line-height: 1.8; letter-spacing: 0.5px; max-width: 700px; margin: 0 auto 1.5rem;">
1038                Tokyo/Los Angeles artist ERIÉ (Platon Mary Eri) sits down with TEEN ACCESS to talk her new single "CEO", her style, and her creative process. "CEO" is ERIÉ's third single, following "BYEEE BOY" and "Star" — out now on Spotify, Apple Music and all streaming platforms via Peace By Peace Sounds.
1039            </p>
1040            <div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;">
1041                <a href="https://independent.ffm.to/ceo" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem;">Stream "CEO" →</a>
1042                <a href="https://open.spotify.com/artist/7FZGL4fKbZFTuooX8TJETi" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem;">ERIÉ on Spotify →</a>
1043            </div>
1044            <p style="color: #999999; font-size: 0.8rem; letter-spacing: 0.5px; margin-top: 2rem;">
1045                For press &amp; interview inquiries: <a href="mailto:[email protected]" style="color: #222222; text-decoration: none; border-bottom: 0.5px solid #222222;">[email protected]</a>
1046            </p>
1047        </div>
1048    </div>
1049</section>
1050
1051<!-- Photography Gallery -->
1052<section class="gallery" id="gallery">
1053    <h2>Gallery</h2>
1054    
1055    <div class="photo-grid">
1056        <!-- Photo 1: Look 1 -->
1057        <div class="photo-item">
1058            <div class="photo-wrapper">
1059                <img src="./photos/look-1.jpg" alt="ERIÉ Look 1">
1060            </div>
1061            <div class="photo-info">
1062                <div class="photo-title">Look 1</div>
1063                <div class="photo-description">Fashion & Style</div>
1064            </div>
1065        </div>
1066
1067        <!-- Photo 2: Look 2 -->
1068        <div class="photo-item">
1069            <div class="photo-wrapper">
1070                <img src="./photos/look-2.jpg" alt="ERIÉ Look 2">
1071            </div>
1072            <div class="photo-info">
1073                <div class="photo-title">Look 2</div>
1074                <div class="photo-description">Fashion & Style</div>
1075            </div>
1076        </div>
1077
1078        <!-- Photo 3: Look 3 -->
1079        <div class="photo-item">
1080            <div class="photo-wrapper">
1081                <img src="./photos/look-3.jpg" alt="ERIÉ Look 3">
1082            </div>
1083            <div class="photo-info">
1084                <div class="photo-title">Look 3</div>
1085                <div class="photo-description">Fashion & Style</div>
1086            </div>
1087        </div>
1088
1089        <!-- Photo 4: Look 4 -->
1090        <div class="photo-item">
1091            <div class="photo-wrapper">
1092                <img src="./photos/look-4.jpg" alt="ERIÉ Look 4">
1093            </div>
1094            <div class="photo-info">
1095                <div class="photo-title">Look 4</div>
1096                <div class="photo-description">Fashion & Style</div>
1097            </div>
1098        </div>
1099
1100        <!-- Photo 5: Look 5 -->
1101        <div class="photo-item">
1102            <div class="photo-wrapper">
1103                <img src="./photos/look-5.jpg" alt="ERIÉ Look 5">
1104            </div>
1105            <div class="photo-info">
1106                <div class="photo-title">Look 5</div>
1107                <div class="photo-description">Fashion & Style</div>
1108            </div>
1109        </div>
1110
1111        <!-- Photo 6: Look 6 -->
1112        <div class="photo-item">
1113            <div class="photo-wrapper">
1114                <img src="./photos/look-6.jpg" alt="ERIÉ Look 6">
1115            </div>
1116            <div class="photo-info">
1117                <div class="photo-title">Look 6</div>
1118                <div class="photo-description">Fashion & Style</div>
1119            </div>
1120        </div>
1121
1122        <!-- Photo 7: Look 7 -->
1123        <div class="photo-item">
1124            <div class="photo-wrapper">
1125                <img src="./photos/look-7.jpg" alt="ERIÉ Look 7">
1126            </div>
1127            <div class="photo-info">
1128                <div class="photo-title">Look 7</div>
1129                <div class="photo-description">Fashion & Style</div>
1130            </div>
1131        </div>
1132
1133        <!-- Photo 8: Look 8 -->
1134        <div class="photo-item">
1135            <div class="photo-wrapper">
1136                <img src="./photos/look-8.jpg" alt="ERIÉ Look 8">
1137            </div>
1138            <div class="photo-info">
1139                <div class="photo-title">Look 8</div>
1140                <div class="photo-description">Fashion & Style</div>
1141            </div>
1142        </div>
1143    </div>
1144</section>
1145
1146<!-- Music Section -->
1147<section class="gallery" id="music">
1148    <h2>Music</h2>
1149    
1150    <div style="max-width: 900px; margin: 0 auto;">
1151        <div style="background: #ffffff; border: 0.5px solid #e0e0e0; padding: 2.5rem; margin-bottom: 3rem; text-align: center;">
1152            <p style="color: #666666; font-size: 0.95rem; margin-bottom: 0; line-height: 1.8; letter-spacing: 0.5px;">
1153                ERIÉ's music fuses Japanese softness with LA confidence, blending melodic rap cadences, polished pop hooks, and early 2000s R&B influence.
1154            </p>
1155        </div>
1156
1157        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
1158            <!-- Track 1 -->
1159            <div style="text-align: center;">
1160                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1161                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">BYEEEE BOY</h4>
1162                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">V3 110525 (Z EDIT)</p>
1163                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">
1163Listen →</a>
1164            </div>
1165
1166            <!-- Track 2 -->
1167            <div style="text-align: center;">
1168                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1169                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">ABC_XYZ</h4>
1170                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">Master V4</p>
1171                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">Listen →</a>
1172            </div>
1173
1174            <!-- Track 3 -->
1175            <div style="text-align: center;">
1176                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1177                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">Sono Mama De</h4>
1178                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">Prod. Bamski</p>
1179                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">Listen →</a>
1180            </div>
1181
1182            <!-- Track 4 -->
1183            <div style="text-align: center;">
1184                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1185                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">Slushie</h4>
1186                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">Prod. Kwak Z</p>
1187                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">Listen →</a>
1188            </div>
1189
1190            <!-- Track 5 -->
1191            <div style="text-align: center;">
1192                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1193                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">Bring It To Me</h4>
1194                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">feat. b.kae</p>
1195                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">Listen →</a>
1196            </div>
1197
1198            <!-- Track 6 -->
1199            <div style="text-align: center;">
1200                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1201                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">CEO Remix</h4>
1202                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">Like Eag6</p>
1203                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">Listen →</a>
1204            </div>
1205
1206            <!-- Track 7 -->
1207            <div style="text-align: center;">
1208                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1209                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">Shh 20</h4>
1210                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">feat. b.kae x Olmo2</p>
1211                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">
1211Listen →</a>
1212            </div>
1213
1214            <!-- Track 8 -->
1215            <div style="text-align: center;">
1216                <div style="font-size: 1.5rem; margin-bottom: 0.75rem; color: #222222;">♪</div>
1217                <h4 style="color: #222222; margin-bottom: 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.5px;">Slide</h4>
1218                <p style="color: #999999; font-size: 0.75rem; margin-bottom: 1rem; letter-spacing: 0.3px;">feat. Bodhi, JAE</p>
1219                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">Listen →</a>
1220            </div>
1221        </div>
1222
1223        <div style="text-align: center; padding-top: 2rem; border-top: 0.5px solid #e0e0e0;">
1224            <p style="color: #999999; font-size: 0.85rem; margin-bottom: 1.5rem; letter-spacing: 0.5px;">
1225                Available on all streaming platforms
1226            </p>
1227            <div style="display: flex; justify-content: center; gap: 2rem;">
1228                <a href="https://untitled.stream/library/project/9HdDPTYhWOqrQo1MMKbgR" target="_blank" style="color: #222222; text-decoration: none; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.5px;">Untitled</a>
1229                <a href="https://open.spotify.com/search/eriè" target="_blank" style="color: #222222; text-decoration: none; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.5px;">Spotify</a>
1230                <a href="https://music.apple.com/search?term=eriè" target="_blank" style="color: #222222; text-decoration: none; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.5px;">Apple Music</a>
1231            </div>
1232        </div>
1233    </div>
1234</section>
1235
1236<!-- About Section -->
1237<section class="about" id="about">
1238    <div class="about-content">
1239        <h2>Who is ERIÉ?</h2>
1240        
1241        <p>
1242            <span class="highlight">ERIÉ is not a manufactured artist — she's a living brand.</span> Born in Nagoya, raised in Tokyo, and globally rooted between Tokyo, Manila, and Los Angeles, she represents something rare: an authentic voice that moves fluidly across cultures without losing herself.
1243        </p>
1244
1245        <p>
1246            Her identity is her architecture. As a half-Japanese, half-Filipina artist and songwriter, ERIÉ embodies the diaspora — complex, multilingual, and fully realized. She exists at the intersection of cultures, holding multiple truths at once. Her sound fuses <span class="highlight">Japanese softness with LA confidence</span>, layering melodic rap cadences, polished pop hooks, and early 2000s R&B influence into something distinctly her own.
1247        </p>
1248
1249        <p style="margin-top: 2rem; font-size: 1rem; font-style: italic; color: #444444;">
1250            "What attracts people to ERIÉ isn't just the music—it's her energy, her aura, her unfiltered personality. She's the real person who thrives on identity, who refuses simplification."
1251        </p>
1252
1253        <p style="margin-top: 2rem;">
1254            ERIÉ represents a <span class="highlight">living lifestyle brand</span> across three pillars:
1255        </p>
1256
1257        <div class="services">
1258            <div class="service-card">
1259                <h3>🎵 Music Culture</h3>
1260                <p>Original tracks, collaborations, and an LA–Tokyo sound that speaks to diaspora audiences globally.</p>
1261            </div>
1262            <div class="service-card">
1263                <h3>🍜 Food Culture</h3>
1264                <p>Authentic moments connecting her heritage to daily life—Tokyo ramen to Manila street food to LA fusion.</p>
1265            </div>
1266            <div class="service-card">
1267                <h3>👗 Fashion Culture</h3>
1268                <p>A personal aesthetic blending Japanese minimalism, Filipino warmth, and LA street culture into a cohesive look.</p>
1269            </div>
1270        </div>
1271
1272        <p style="margin-top: 2rem;">
1273            In an industry built on singular narratives, <span class="highlight">ERIÉ is the future</span>: someone brands need to partner with because she represents the real, evolving, global audience of tomorrow. She doesn't need positioning—she needs the right partnership to amplify who she already is.
1274        </p>
1275    </div>
1276</section>
1277
1278<!-- Upcoming Shows Section -->
1279<section class="gallery" style="background: #f9f9f9; border-top: 0.5px solid #e0e0e0; border-bottom: 0.5px solid #e0e0e0;">
1280    <h2>Upcoming Shows</h2>
1281    
1282    <div style="max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
1283        <!-- Show 1: Tokyo -->
1284        <div style="background: #ffffff; border: 0.5px solid #e0e0e0; padding: 2rem; text-align: center;">
1285            <div style="font-size: 2rem; margin-bottom: 1rem; color: #222222;">🇯🇵</div>
1286            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1rem; letter-spacing: 0.5px;">Tokyo, Japan</h3>
1287            <p style="color: #999999; font-size: 0.9rem; margin-bottom: 0.75rem; letter-spacing: 0.3px;">June 17, 2026</p>
1288            <p style="color: #666666; font-size: 0.85rem; line-height: 1.6; letter-spacing: 0.3px; margin-bottom: 1rem;">FILO HIGHKEY NITE @ Music Bar Lion — Live performance with international DJ crew</p>
1289            <a href="https://www.instagram.com/p/DZaL2E0zmSI/?hl=en" target="_blank" style="color: #222222; text-decoration: none; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block;">See Details →</a>
1290        </div>
1291
1292        <!-- Show 2: Los Angeles -->
1293        <div style="background: #ffffff; border: 0.5px solid #e0e0e0; padding: 2rem; text-align: center;">
1294            <div style="font-size: 2rem; margin-bottom: 1rem; color: #222222;">🇺🇸</div>
1295            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1rem; letter-spacing: 0.5px;">Los Angeles, CA</h3>
1296            <p style="color: #999999; font-size: 0.9rem; margin-bottom: 0.75rem; letter-spacing: 0.3px;">July 2, 2026</p>
1297            <p style="color: #666666; font-size: 0.85rem; line-height: 1.6; letter-spacing: 0.3px; margin-bottom: 1rem;">Brand partnerships, studio sessions & creative collaborations</p>
1298            <p style="color: #999999; font-size: 0.75rem; letter-spacing: 0.5px;">Details coming soon</p>
1299        </div>
1300
1301        <!-- Show 3: Angeles, Philippines -->
1302        <div style="background: #ffffff; border: 0.5px solid #e0e0e0; padding: 2rem; text-align: center;">
1303            <div style="font-size: 2rem; margin-bottom: 1rem; color: #222222;">🇵🇭</div>
1304            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1rem; letter-spacing: 0.5px;">Angeles, Philippines</h3>
1305            <p style="color: #999999; font-size: 0.9rem; margin-bottom: 0.75rem; letter-spacing: 0.3px;">August 20, 2026</p>
1306            <p style="color: #666666; font-size: 0.85rem; line-height: 1.6; letter-spacing: 0.3px; margin-bottom: 1rem;">Hyphy Bodega — Festival performance and brand activation</p>
1307            <p style="color: #999999; font-size: 0.75rem; letter-spacing: 0.5px;">Details coming soon</p>
1308        </div>
1309
1310        <!-- Show 4: Cebu -->
1311        <div style="background: #ffffff; border: 0.5px solid #e0e0e0; padding: 2rem; text-align: center;">
1312            <div style="font-size: 2rem; margin-bottom: 1rem; color: #222222;">🇵🇭</div>
1313            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1rem; letter-spacing: 0.5px;">Cebu, Philippines</h3>
1314            <p style="color: #999999; font-size: 0.9rem; margin-bottom: 0.75rem; letter-spacing: 0.3px;">August 14 - 15, 2026</p>
1315            <p style="color: #666666; font-size: 0.85rem; line-height: 1.6; letter-spacing: 0.3px; margin-bottom: 1rem;">Festival performances and brand activations across Philippines</p>
1316            <p style="color: #999999; font-size: 0.75rem; letter-spacing: 0.5px;">
1316Details coming soon</p>
1317        </div>
1318    </div>
1319
1320    <p style="text-align: center; margin-top: 3rem; color: #999999; font-size: 0.9rem; letter-spacing: 0.5px;">
1321        *More dates and regions coming. Let's book ERIÉ for your event.
1322    </p>
1323</section>
1324
1325<!-- Contact Section -->
1326<section class="contact" id="contact">
1327    <div class="contact-content">
1328        <h2>Ready to Partner with ERIÉ?</h2>
1329        <p>Let's create something authentic together.</p>
1330
1331        <div class="contact-info">
1332            <div class="contact-label">Manager:</div>
1333            <strong style="color: #222222; display: block; margin-bottom: 1.5rem; font-weight: 400; letter-spacing: 0.5px;">BAM</strong>
1334            <div class="contact-label">Contact:</div>
1335            <a href="mailto:[email protected]" style="color: #222222; text-decoration: none; font-weight: 400; font-size: 1rem; letter-spacing: 0.5px; border-bottom: 0.5px solid #222222; padding-bottom: 0.25rem; display: inline-block; margin-bottom: 1.5rem;">Get in Touch →</a>
1336            <div class="contact-label" style="margin-top: 0;">Availability:</div>
1337            <div style="color: #222222; margin-bottom: 1.5rem; font-weight: 400; letter-spacing: 0.5px;">June 25 – July 7, 2026 (Los Angeles)</div>
1338            <div class="contact-label">Rate:</div>
1339            <div style="color: #222222; margin-bottom: 2rem; font-weight: 400; letter-spacing: 0.5px;">TBD</div>
1340            
1341            <div style="border-top: 0.5px solid #e0e0e0; padding-top: 2rem; margin-top: 2rem;">
1342                <div class="contact-label">Full EPK:</div>
1343                <a href="https://erieepk.netlify.app" target="_blank" style="color: #222222; text-decoration: none; font-weight: 400; font-size: 1rem; letter-spacing: 0.5px;">
1344                    erieepk.netlify.app →
1345                </a>
1346            </div>
1347        </div>
1348
1349        <a href="mailto:[email protected]" class="cta-button">Get in Touch</a>
1350    </div>
1351</section>
1352
1353<!-- World Clocks Section -->
1354<section class="gallery" id="clocks" style="background: #ffffff; border-top: 0.5px solid #e0e0e0; border-bottom: 0.5px solid #e0e0e0; padding: 4rem 2rem;">
1355    <h2>Global Presence</h2>
1356    
1357    <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem;">
1358        
1359        <!-- Los Angeles Clock -->
1360        <div style="text-align: center;">
1361            <div style="font-size: 2.5rem; margin-bottom: 1rem;">🌆</div>
1362            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px;">Los Angeles</h3>
1363            <div style="background: #f9f9f9; border: 0.5px solid #e0e0e0; padding: 2rem; border-radius: 0; margin-bottom: 1rem;">
1364                <div id="la-time" style="font-size: 2rem; font-weight: 400; color: #222222; font-family: 'Courier New', monospace; letter-spacing: 2px; margin-bottom: 0.5rem;">--:--</div>
1365                <div style="font-size: 0.8rem; color: #999999; letter-spacing: 1px;">Pacific Time</div>
1366            </div>
1367        </div>
1368
1369        <!-- Tokyo Clock -->
1370        <div style="text-align: center;">
1371            <div style="font-size: 2.5rem; margin-bottom: 1rem;">🗾</div>
1372            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px;">Tokyo</h3>
1373            <div style="background: #f9f9f9; border: 0.5px solid #e0e0e0; padding: 2rem; border-radius: 0; margin-bottom: 1rem;">
1374                <div id="tokyo-time" style="font-size: 2rem; font-weight: 400; color: #222222; font-family: 'Courier New', monospace; letter-spacing: 2px; margin-bottom: 0.5rem;">--:--</div>
1375                <div style="font-size: 0.8rem; color: #999999; letter-spacing: 1px;">Japan Standard Time</div>
1376            </div>
1377        </div>
1378
1379        <!-- Manila Clock -->
1380        <div style="text-align: center;">
1381            <div style="font-size: 2.5rem; margin-bottom: 1rem;">🇵🇭</div>
1382            <h3 style="color: #222222; margin-bottom: 0.5rem; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px;">Manila</h3>
1383            <div style="background: #f9f9f9; border: 0.5px solid #e0e0e0; padding: 2rem; border-radius: 0; margin-bottom: 1rem;">
1384                <div id="manila-time" style="font-size: 2rem; font-weight: 400; color: #222222; font-family: 'Courier New', monospace; letter-spacing: 2px; margin-bottom: 0.5rem;">--:--</div>
1385                <div style="font-size: 0.8rem; color: #999999; letter-spacing: 1px;">Philippine Time</div>
1386            </div>
1387        </div>
1388
1389    </div>
1390
1391    <p style="text-align: center; margin-top: 3rem; color: #999999; font-size: 0.9rem; letter-spacing: 0.5px;">
1392        Where ERIÉ creates across three continents
1393    </p>
1394</section>
1395
1396<script>
1397function updateClocks() {
1398    // Los Angeles (PT)
1399    const laFormatter = new Intl.DateTimeFormat('en-US', {
1400        hour: '2-digit',
1401        minute: '2-digit',
1402        second: '2-digit',
1403        hour12: false,
1404        timeZone: 'America/Los_Angeles'
1405    });
1406    document.getElementById('la-time').textContent = laFormatter.format(new Date());
1407
1408    // Tokyo (JST)
1409    const tokyoFormatter = new Intl.DateTimeFormat('en-US', {
1410        hour: '2-digit',
1411        minute: '2-digit',
1412        second: '2-digit',
1413        hour12: false,
1414        timeZone: 'Asia/Tokyo'
1415    });
1416    document.getElementById('tokyo-time').textContent = tokyoFormatter.format(new Date());
1417
1418    // Manila (PST)
1419    const manilaFormatter = new Intl.DateTimeFormat('en-US', {
1420        hour: '2-digit',
1421        minute: '2-digit',
1422        second: '2-digit',
1423        hour12: false,
1424        timeZone: 'Asia/Manila'
1425    });
1426    document.getElementById('manila-time').textContent = manilaFormatter.format(new Date());
1427}
1428
1429// Update clocks immediately and every second
1430updateClocks();
1431setInterval(updateClocks, 1000);
1432</script>
1432
1433<section class="gallery" id="social" style="background: #ffffff; border-top: 0.5px solid #e0e0e0; padding: 4rem 2rem;">
1434    <h2>Follow ERIÉ</h2>
1435    
1436    <div style="max-width: 1400px; margin: 0 auto;">
1437        
1438        <!-- Instagram Section -->
1439        <div style="margin-bottom: 5rem;">
1440            <h3 style="color: #222222; margin-bottom: 2rem; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px; text-align: center;">Instagram Feed</h3>
1441            <div style="display: flex; justify-content: center;">
1442                <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/platon_mary_eri/" data-instgrm-version="14" style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"></blockquote>
1443            </div>
1444        </div>
1445
1446        <!-- YouTube Section -->
1447        <div style="margin-bottom: 5rem;">
1448            <h3 style="color: #222222; margin-bottom: 2rem; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px; text-align: center;">YouTube Channel</h3>
1449            <div style="display: flex; justify-content: center;">
1450                <a href="https://www.youtube.com/@platon_mary_eri" target="_blank" style="display: block; background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); border: 1px solid #e0e0e0; padding: 4rem 2rem; text-decoration: none; width: 100%; max-width: 450px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
1451                    <div style="font-size: 4rem; margin-bottom: 1.5rem;">🎬</div>
1452                    <div style="color: #222222; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.5px; margin-bottom: 0.75rem;">@platon_mary_eri</div>
1453                    <div style="color: #999999; font-size: 0.9rem; letter-spacing: 0.3px; margin-bottom: 1.5rem;">Subscribe for exclusive content, behind-the-scenes, and collaborations</div>
1454                    <div style="background: #222222; color: #ffffff; padding: 0.75rem 2rem; display: inline-block; font-size: 0.9rem; letter-spacing: 1px; font-weight: 400;">
1454WATCH NOW →</div>
1455                </a>
1456            </div>
1457        </div>
1458
1459        <!-- TikTok Section -->
1460        <div style="margin-bottom: 2rem;">
1461            <h3 style="color: #222222; margin-bottom: 2rem; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.5px; text-align: center;">TikTok Creator</h3>
1462            <div style="display: flex; justify-content: center;">
1463                <a href="https://www.tiktok.com/@platon.mary.eri" target="_blank" style="display: block; background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); border: 1px solid #e0e0e0; padding: 4rem 2rem; text-decoration: none; width: 100%; max-width: 450px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
1464                    <div style="font-size: 4rem; margin-bottom: 1.5rem;">🎵</div>
1465                    <div style="color: #222222; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.5px; margin-bottom: 0.75rem;">@platon.mary.eri</div>
1466                    <div style="color: #999999; font-size: 0.9rem; letter-spacing: 0.3px; margin-bottom: 1.5rem;">Daily content, trends, music, and lifestyle moments from ERIÉ</div>
1467                    <div style="background: #222222; color: #ffffff; padding: 0.75rem 2rem; display: inline-block; font-size: 0.9rem; letter-spacing: 1px; font-weight: 400;">FOLLOW NOW →</div>
1468                </a>
1469            </div>
1470        </div>
1471
1472    </div>
1473</section>
1474
1475<!-- Embed Scripts -->
1476<script async src="https://www.instagram.com/embed.js"></script>
1476
1477
1478<!-- Footer -->
1479<footer>
1480    <p>ERIÉ — Artist + Beauty + Fashion + Creator</p>
1481    <p>Peace By Peace Studios</p>
1482    <p><a href="https://www.peacebypeacestudios.com">www.peacebypeacestudios.com</a></p>
1483    <p style="margin-top: 1rem; opacity: 0.6; letter-spacing: 0.5px;">© 2026 ERIÉ. All rights reserved.</p>
1484</footer>
1485
1486</body>
1487</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.