LLCCRAFT \u00b7 P-01 Home \u00b7 v0.4.1.5<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-01 home skeleton placeholder. v0.4.1.5 Helvetica Regular activated. All visuals placeholder.\"><\/p>\n<p><\/p>\n<p><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n \/* TODO [Style Discovery] v0.4 : all visual values placeholder *\/\n 'gallery': 'oklch(0.97 0.012 90)',\n 'ink': 'oklch(0.20 0.010 28)',\n 'ink-soft': 'oklch(0.55 0.008 28)',\n 'rule': 'oklch(0.88 0.005 28)',\n },\n fontFamily: {\n serif: ['\"Cormorant Garamond\"', 'Georgia', 'serif'],\n sans: ['\"Helvetica Regular\"', '\"Inter\"', 'system-ui', 'sans-serif'],\n },\n maxWidth: { 'wide': '1320px' },\n }\n }\n }\n<\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-01 v0.4.1.4 - PIECE CARD precise refactor (SUPERSEDED by v0.4.1.5)\n --------------------------------------------------------------------------\n [F1] Helvetica Regular @font-face --> ACTIVATED in v0.4.1.5\n [F2] Piece card 4-layer stack --> RETAINED\n [F3] Footer Lumina 14-line CSS --> RETAINED<\/p>\n<p> v0.4.1.5 Helvetica Regular activation round (2026-07-06) :\n - CEO provided real onlinewebfonts CDN URLs (5 formats :\n eot \/ woff2 \/ woff \/ ttf \/ svg)\n - @font-face family name : \"Helvetica Regular\" (matches\n CDN face name)\n - body font-family chain head updated to \"Helvetica Regular\"\n - Tailwind config fontFamily.sans updated\n - Inter kept as graceful fallback if CDN unreachable\n --------------------------------------------------------------------------\n Targeted structural changes to piece card module only :<\/p>\n<p> [F1] Helvetica Regular @font-face\n - src urls were TODO (CEO) - RESOLVED in v0.4.1.5\n - ACTIVE : onlinewebfonts CDN, 5 formats (eot\/woff2\/woff\/ttf\/svg)<\/p>\n<p> [F2] Piece card : 4-layer stack (rating --> image --> headline\n (title L + price R) --> specs bar)\n - rating : 5 stars (light gold, NOT bright yellow) + count\n - image : aspect-square 1\/1, hover 1.03x 0.8s\n - headline: flex justify-between (no discount \/ sale styling)\n - specs : 3-icon flex bar (capacity \/ diameter \/ depth)<\/p>\n<p> [F3] Footer Lumina : verbatim 14-line CSS retained\n - background-blend-mode: luminosity LOCKED\n - backdrop-filter: blur(4px) LOCKED\n - linear-gradient mask border LOCKED<\/p>\n<p> Cross-round carry-overs (untouched from prior):\n - 3-slide hero with dots indicator (v0.4.1.3)\n - Strict 3-col piece grid (v0.4.1.3)\n - 16 testimonial cards with infinite-card__photo (v0.4.1.2)\n - All v0.4.1 PII-clearance\n ========================================================================== *\/<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (v0.4.1.5 ACTIVATED)\n onlinewebfonts CDN : eot + woff2 + woff + ttf + svg\n font-family \"Helvetica Regular\" matches the face registered on the CDN *\/\n @font-face {\n font-family: \"Helvetica Regular\";\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot\");\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n }<\/p>\n<p> *, *::before, *::after { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; }\n body {\n background: oklch(0.97 0.012 90);\n color: oklch(0.20 0.010 28);\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, -apple-system, sans-serif;\n font-size: 16px; line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> \/* ---------- A11Y ---------- *\/\n .skiplink {\n position: fixed; top: -100px; left: 12px; z-index: 200;\n padding: 8px 24px; background: #000; color: #fff;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n border-radius: 2px; text-decoration: none; font-weight: 500;\n transition: top 240ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .skiplink:focus { top: 12px; }\n :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }<\/p>\n<p> \/* ---------- Reduced motion ---------- *\/\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }<\/p>\n<p> \/* ====================================================================\n 1. Global Sticky Header (v0.4.1.6 chassis - PHASE 3.5)\n ==================================================================== *\/\n .global-header {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 100;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: background 320ms ease, backdrop-filter 320ms ease,\n border-color 320ms ease;\n }\n .global-header.is-scrolled-down {\n background: rgba(15, 15, 15, 0.5);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border-bottom-color: rgba(255, 255, 255, 0.08);\n }\n .global-header.is-scrolled-up {\n background: transparent;\n backdrop-filter: none;\n border-bottom-color: transparent;\n }\n .global-header__inner {\n max-width: 1320px;\n margin: 0 auto;\n padding: 18px 24px;\n display: flex; align-items: center; justify-content: space-between;\n gap: 32px;\n }\n .global-header__brand {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n color: #fff; text-decoration: none;\n letter-spacing: -0.005em; flex-shrink: 0;\n }\n .global-header__actions {\n display: flex; align-items: center; gap: 24px;\n }\n \/* lang dropdown *\/\n .global-header__lang { position: relative; }\n .global-header__lang-btn {\n display: inline-flex; align-items: center; gap: 4px;\n background: transparent; border: none; padding: 6px 8px;\n color: #fff; cursor: pointer;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.05em;\n border-radius: 4px; transition: background 200ms ease;\n }\n .global-header__lang-btn:hover { background: rgba(255, 255, 255, 0.08); }\n .global-header__lang-caret { width: 10px; height: 10px; fill: currentColor; }\n .global-header__lang-menu {\n position: absolute; top: calc(100% + 8px); right: 0;\n background: oklch(0.18 0.012 28 \/ 0.95);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 4px; padding: 4px 0;\n min-width: 100px;\n list-style: none; margin: 0;\n opacity: 0; visibility: hidden;\n transform: translateY(-4px);\n transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;\n z-index: 110;\n }\n .global-header__lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }\n .global-header__lang-menu button {\n display: block; width: 100%; padding: 8px 16px;\n background: transparent; border: none;\n color: rgba(255, 255, 255, 0.7);\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.05em;\n text-align: left; cursor: pointer;\n transition: background 200ms ease, color 200ms ease;\n }\n .global-header__lang-menu button:hover,\n .global-header__lang-menu button.is-active {\n background: rgba(255, 255, 255, 0.08); color: #fff;\n }\n \/* social matrix *\/\n .global-header__social {\n display: flex; align-items: center; gap: 12px;\n list-style: none; padding: 0; margin: 0;\n }\n .global-header__social a {\n display: flex; align-items: center; justify-content: center;\n width: 28px; height: 28px;\n color: #fff; opacity: 0.7;\n text-decoration: none; transition: opacity 200ms ease;\n }\n .global-header__social a:hover { opacity: 1; }\n .global-header__social svg { width: 16px; height: 16px; fill: currentColor; }\n \/* icons *\/\n .global-header__icons { display: flex; align-items: center; gap: 4px; }\n .global-header__icon-btn,\n .global-header__icon-link {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n width: 40px; height: 40px;\n background: transparent; border: none;\n color: #fff; opacity: 0.85;\n text-decoration: none; cursor: pointer; border-radius: 50%;\n transition: opacity 200ms ease, background 200ms ease;\n }\n .global-header__icon-btn:hover,\n .global-header__icon-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }\n .global-header__icon-btn svg,\n .global-header__icon-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }\n .global-header__cart-badge {\n position: absolute; top: 4px; right: 4px;\n min-width: 16px; height: 16px; padding: 0 4px;\n display: flex; align-items: center; justify-content: center;\n background: oklch(0.42 0.165 27);\n color: #fff;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 10px; font-weight: 500;\n border-radius: 999px; line-height: 1;\n }<\/p>\n<p> \/* ====================================================================\n 2. 100vh hero (3 INDEPENDENT FULL-SCREEN SLIDES, v0.4.1.3)\n ==================================================================== *\/\n .hero {\n position: relative; width: 100vw; height: 100vh;\n overflow: hidden; background: #000;\n isolation: isolate;\n }\n .hero__slide {\n position: absolute; inset: 0;\n opacity: 0; transition: opacity 2.4s ease-in-out; z-index: 0;\n }\n .hero__slide.is-active { opacity: 1; z-index: 1; }\n .hero__image {\n position: absolute; inset: 0;\n width: 100%; height: 100%; object-fit: cover;\n }\n .hero__veil {\n position: absolute; inset: 0; pointer-events: none;\n background: linear-gradient(180deg,\n rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 100%);\n }\n .hero__content {\n position: absolute; inset: 0;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n text-align: center; color: #fff; padding: 24px;\n }\n .hero__content .eyebrow {\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n opacity: 0.85; margin: 0 0 12px;\n }\n .hero__content h1 {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2.5rem, 5vw, 5rem);\n line-height: 1.05; font-weight: 500;\n margin: 0 auto 20px; max-width: 18ch;\n text-wrap: balance; letter-spacing: -0.02em;\n }\n .hero__content p {\n max-width: 56ch; margin: 0 auto 28px;\n font-size: 1.0625rem; opacity: 0.85;\n }\n .hero__cta {\n display: inline-block; padding: 14px 32px;\n background: #fff; color: #000; text-decoration: none;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n }\n .hero__dots {\n position: absolute; bottom: 32px; left: 50%;\n transform: translateX(-50%);\n display: flex; gap: 12px; z-index: 2;\n }\n .hero__dot {\n width: 32px; height: 2px;\n background: rgba(255, 255, 255, 0.4);\n transition: background 240ms ease;\n }\n .hero__dot.is-active { background: rgba(255, 255, 255, 1); }<\/p>\n<p> \/* ====================================================================\n 3. Piece card v0.4.1.4 - PRECISE REFACTOR\n 4-layer stack : image --> rating --> headline (title L + price R) --> specs\n ==================================================================== *\/\n .piece-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 80px 48px;\n }\n @media (max-width: 900px) {\n .piece-grid { grid-template-columns: repeat(2, 1fr); gap: 64px 32px; }\n }\n @media (max-width: 600px) {\n .piece-grid { grid-template-columns: 1fr; gap: 48px; }\n }\n .piece-card { cursor: pointer; }<\/p>\n<p> \/* layer 1 : image (square, hover) *\/\n .piece-card__image {\n width: 100%; aspect-ratio: 1 \/ 1; overflow: hidden;\n background: oklch(0.93 0.005 28);\n margin-bottom: 16px;\n }\n .piece-card__image img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .piece-card:hover .piece-card__image img { transform: scale(1.03); }<\/p>\n<p> \/* layer 2 : rating (5 stars + count, light gold NOT bright yellow) *\/\n .piece-card__rating {\n display: flex; align-items: center; gap: 2px;\n margin-bottom: 10px;\n }\n .piece-card__rating .star {\n color: oklch(0.72 0.025 85); \/* light gold - muted, NOT bright yellow *\/\n font-size: 13px; line-height: 1;\n }\n .piece-card__rating-count {\n margin-left: 10px;\n color: oklch(0.55 0.008 28);\n font-size: 12px; letter-spacing: 0.02em;\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n }<\/p>\n<p> \/* layer 3 : headline (title L + price R, single-color premium) *\/\n .piece-card__headline {\n display: flex; align-items: baseline; justify-content: space-between;\n gap: 16px; margin-bottom: 14px;\n }\n .piece-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .piece-card__price {\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n font-size: 13px; font-weight: 500;\n color: oklch(0.55 0.008 28); margin: 0;\n letter-spacing: 0.02em; white-space: nowrap;\n \/* v0.4.1.4 : NO red\/black discount \/ sale contrast - single-color premium *\/\n }<\/p>\n<p> \/* layer 4 : specs bar (3 icons + values, flex space-between) *\/\n .piece-card__specs {\n display: flex; justify-content: space-between;\n padding-top: 12px;\n border-top: 1px solid oklch(0.88 0.005 28);\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n font-size: 12px; color: oklch(0.55 0.008 28);\n letter-spacing: 0.02em;\n }\n .spec {\n display: flex; align-items: center; gap: 6px;\n }\n .spec__icon {\n display: flex; align-items: center; justify-content: center;\n width: 18px; height: 18px;\n color: oklch(0.42 0.012 28);\n flex-shrink: 0;\n }\n .spec__icon svg { display: block; }\n .spec__label { font-weight: 500; }<\/p>\n<p> \/* ====================================================================\n 4. Infinite testimonials (carried from v0.4.1.2)\n ==================================================================== *\/\n .infinite-track {\n display: flex; gap: 24px;\n animation: scroll-left 40s linear infinite;\n will-change: transform;\n }\n .infinite-track:hover { animation-play-state: paused; }\n .infinite-track.is-manual { animation: none; }\n @keyframes scroll-left {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n .infinite-card {\n flex: 0 0 340px;\n background: #fff;\n border-radius: 12px;\n padding: 24px;\n box-shadow:\n 0 0 32px rgba(0, 0, 0, 0.04),\n 0 2px 8px rgba(0, 0, 0, 0.03);\n }\n .infinite-card blockquote {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic; font-size: 16px; line-height: 1.55;\n margin: 0 0 16px; color: oklch(0.20 0.010 28);\n }\n .infinite-card__visual {\n width: 100%; aspect-ratio: 1 \/ 1;\n background: #e5e7eb;\n border-radius: 8px; overflow: hidden;\n margin: 0 0 16px;\n }\n .infinite-card__visual img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }\n .infinite-card__attr {\n display: flex; align-items: center; gap: 12px;\n padding-top: 16px; border-top: 1px solid oklch(0.88 0.005 28);\n }\n .infinite-card__avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: oklch(0.85 0.005 28);\n }\n .infinite-card__photo {\n width: 48px; height: 48px;\n border-radius: 6px;\n background: #e5e7eb;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n }\n .infinite-card__name { font-size: 14px; font-weight: 500; margin: 0; }\n .infinite-card__loc { font-size: 12px; color: oklch(0.55 0.008 28); margin: 0; }\n .carousel-controls {\n display: flex; gap: 12px; justify-content: center; margin-top: 32px;\n }\n .carousel-btn {\n width: 48px; height: 48px;\n border: 1px solid oklch(0.20 0.010 28);\n background: transparent; color: oklch(0.20 0.010 28);\n border-radius: 999px; cursor: pointer; font-size: 16px;\n transition: background 240ms ease, color 240ms ease;\n }\n .carousel-btn:hover { background: oklch(0.20 0.010 28); color: #fff; }<\/p>\n<p> \/* ====================================================================\n 5. Lumina Liquid Glass (F3 : 14 lines verbatim, LOCKED)\n ==================================================================== *\/\n .liquid-glass {\n background: rgba(255, 255, 255, 0.01);\n background-blend-mode: luminosity;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n border: none;\n box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n position: relative;\n overflow: hidden;\n }\n .liquid-glass::before {\n content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;\n background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;\n }\n .footer__bg {\n position: absolute; inset: 0; z-index: 0;\n width: 100%; height: 100%; object-fit: cover;\n opacity: 0.55;\n }\n .footer__glass {\n position: absolute; inset: 0; z-index: 0;\n }\n .footer__content {\n position: relative; z-index: 1;\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><br \/>\n<a href=\"#main\" class=\"skiplink\">Skip to main content<\/a><\/p>\n<p><\/p>\n<header class=\"global-header\" data-state=\"top\" id=\"global-header\">\n<div class=\"global-header__inner\">\n<p> <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\n<p> <\/p>\n<div class=\"global-header__lang\">\n <button class=\"global-header__lang-btn\" id=\"lang-btn\" type=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"lang-menu\"><br \/>\n <span data-current-lang>EN<\/span><br \/>\n <svg class=\"global-header__lang-caret\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M2 4l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<ul class=\"global-header__lang-menu\" id=\"lang-menu\" role=\"menu\" aria-label=\"Language\">\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"en\" class=\"is-active\">EN<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"zh\">\u4e2d\u6587<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"fr\">FR<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"ja\">\u65e5\u672c\u8a9e<\/button><\/li>\n<\/ul><\/div>\n<p> <\/p>\n<ul class=\"global-header__social\" aria-label=\"Social\">\n<li><a href=\"#\" aria-label=\"Instagram\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"8\" cy=\"8\" r=\"2.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"11.6\" cy=\"4.4\" r=\"0.7\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"WeChat\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"6\" cy=\"7\" rx=\"5\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <ellipse cx=\"11\" cy=\"10\" rx=\"3.5\" ry=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"4.7\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"7.3\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"10.4\" cy=\"9.5\" r=\"0.35\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"Weibo\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"8\" cy=\"8.5\" rx=\"6\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"6\" cy=\"9\" r=\"0.4\" fill=\"currentColor\"\/>\n <circle cx=\"9\" cy=\"8\" r=\"0.4\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<\/ul>\n<p> <\/p>\n<div class=\"global-header__icons\">\n <button class=\"global-header__icon-btn\" id=\"search-btn\" type=\"button\" aria-label=\"Search\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M12 12l4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <a href=\"p05-auth.html\" class=\"global-header__icon-link\" aria-label=\"Account\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"6.5\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M3 16c0-3 3-5 6-5s6 2 6 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/a><br \/>\n <button class=\"global-header__icon-btn global-header__cart\" id=\"cart-btn\" type=\"button\" aria-label=\"Cart\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path d=\"M3 5h2l1.5 8h7l1.5-6H6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n <circle cx=\"7.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <circle cx=\"12.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <\/svg><\/p>\n<p> <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><main id=\"main\"><\/p>\n<p><\/p>\n<section class=\"hero\" aria-label=\"Featured slideshow\">\n<div class=\"hero__slide is-active\" data-slide>\n <img decoding=\"async\" class=\"hero__image\" src=\"https:\/\/picsum.photos\/seed\/ru-ware-celadon-skyblue\/1920\/1080.jpg\" alt=\"Lorem ipsum porcelain - I\"><\/p>\n<div class=\"hero__veil\"><\/div>\n<div class=\"hero__content\">\n<p class=\"eyebrow\">Lorem ipsum · 2026 · Vol. I<\/p>\n<h1>Sky-blue Reveries<\/h1>\n<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<p> <a href=\"#\" class=\"hero__cta\">Explore<\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"hero__slide\" data-slide>\n <img decoding=\"async\" class=\"hero__image\" src=\"https:\/\/picsum.photos\/seed\/qinghua-hands-tradition\/1920\/1080.jpg\" alt=\"Lorem ipsum porcelain - II\"><\/p>\n<div class=\"hero__veil\"><\/div>\n<div class=\"hero__content\">\n<p class=\"eyebrow\">Lorem ipsum · Vol. II<\/p>\n<h1>Quiet Earthen Vessels<\/h1>\n<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n<p> <a href=\"#\" class=\"hero__cta\">View<\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"hero__slide\" data-slide>\n <img decoding=\"async\" class=\"hero__image\" src=\"https:\/\/picsum.photos\/seed\/scholar-table-ink-grind\/1920\/1080.jpg\" alt=\"Lorem ipsum porcelain - III\"><\/p>\n<div class=\"hero__veil\"><\/div>\n<div class=\"hero__content\">\n<p class=\"eyebrow\">Lorem ipsum · Vol. III<\/p>\n<h1>Hammered Indigo<\/h1>\n<p>In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>\n<p> <a href=\"#\" class=\"hero__cta\">Acquire<\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"hero__dots\" aria-hidden=\"true\">\n<div class=\"hero__dot is-active\" data-slide-dot><\/div>\n<div class=\"hero__dot\" data-slide-dot><\/div>\n<div class=\"hero__dot\" data-slide-dot><\/div>\n<\/p><\/div>\n<\/section>\n<p> rating –> headline –> specs<br \/>\n ============================================================ –><\/p>\n<section class=\"py-32 px-6 max-w-wide mx-auto\" aria-label=\"Featured collection\">\n<div class=\"text-center mb-20\">\n<p class=\"text-xs uppercase mb-3\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Lorem ipsum<\/p>\n<h2 class=\"font-serif text-4xl md:text-5xl\" style=\"font-weight: 500;\">Featured collection<\/h2>\n<\/p><\/div>\n<div class=\"piece-grid\">\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/ru-ware-celadon-vase\/600\/600.jpg\" alt=\"Lorem ipsum piece 01\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 24 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(24)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 01<\/h3>\n<p class=\"piece-card__price\">USD 1,200<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">280 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">12.5 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">8.0 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/qinghua-blue-bowl\/600\/600.jpg\" alt=\"Lorem ipsum piece 02\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 47 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(47)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 02<\/h3>\n<p class=\"piece-card__price\">USD 2,800<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">350 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">14.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">9.5 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/jingdezhen-vase-cobalt\/600\/600.jpg\" alt=\"Lorem ipsum piece 03\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 12 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(12)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 03<\/h3>\n<p class=\"piece-card__price\">USD 4,500<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">420 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">16.5 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">11.0 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/celadon-tea-cup\/600\/600.jpg\" alt=\"Lorem ipsum piece 04\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 38 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(38)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 04<\/h3>\n<p class=\"piece-card__price\">USD 6,200<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">280 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"22\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">12.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">7.5 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/scholar-pen-holder\/600\/600.jpg\" alt=\"Lorem ipsum piece 05\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 61 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(61)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 05<\/h3>\n<p class=\"piece-card__price\">USD 9,800<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">520 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">18.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">12.5 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/ru-ware-masterpiece\/600\/600.jpg\" alt=\"Lorem ipsum piece 06\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 29 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(29)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 06<\/h3>\n<p class=\"piece-card__price\">USD 18,500<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">380 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">15.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">10.0 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/section>\n<p><\/p>\n<section class=\"py-24 overflow-hidden\" aria-label=\"From our collectors\">\n<div class=\"px-6 text-center mb-12\">\n<p class=\"text-xs uppercase mb-3\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Lorem ipsum<\/p>\n<h2 class=\"font-serif text-4xl md:text-5xl\" style=\"font-weight: 500;\">From our collectors<\/h2>\n<\/p><\/div>\n<div class=\"infinite-track\" id=\"track\" aria-live=\"off\">\n<article class=\"infinite-card\">\n<blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-20\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Lorem Ipsum<\/p>\n<p class=\"infinite-card__loc\">London, UK<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-21\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Dolor Sit<\/p>\n<p class=\"infinite-card__loc\">New York, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-22\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Amet Consectetur<\/p>\n<p class=\"infinite-card__loc\">Hong Kong<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-23\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Adipiscing Elit<\/p>\n<p class=\"infinite-card__loc\">Singapore<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-24\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Tempor Incididunt<\/p>\n<p class=\"infinite-card__loc\">Los Angeles, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-25\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Magnam Dolorem<\/p>\n<p class=\"infinite-card__loc\">Geneva, CH<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-26\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Quisquam Est<\/p>\n<p class=\"infinite-card__loc\">Dubai, UAE<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-27\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Iure Reprehenderit<\/p>\n<p class=\"infinite-card__loc\">Aspen, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-20\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Lorem Ipsum<\/p>\n<p class=\"infinite-card__loc\">London, UK<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-21\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Dolor Sit<\/p>\n<p class=\"infinite-card__loc\">New York, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugit.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-22\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Amet Consectetur<\/p>\n<p class=\"infinite-card__loc\">Hong Kong<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Excepteur sint occaecat cupidentat non proident, sunt in culpa qui officia deserunt.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-23\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Adipiscing Elit<\/p>\n<p class=\"infinite-card__loc\">Singapore<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-24\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Tempor Incididunt<\/p>\n<p class=\"infinite-card__loc\">Los Angeles, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-25\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Magnam Dolorem<\/p>\n<p class=\"infinite-card__loc\">Geneva, CH<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-26\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Quisquam Est<\/p>\n<p class=\"infinite-card__loc\">Dubai, UAE<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-27\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Iure Reprehenderit<\/p>\n<p class=\"infinite-card__loc\">Aspen, USA<\/p>\n<\/div><\/div>\n<\/article><\/div>\n<div class=\"carousel-controls\">\n <button class=\"carousel-btn\" id=\"prev\" aria-label=\"Previous testimonials\">←<\/button><br \/>\n <button class=\"carousel-btn\" id=\"next\" aria-label=\"Next testimonials\">→<\/button>\n <\/div>\n<\/section>\n<p><\/main><\/p>\n<p><\/p>\n<footer class=\"relative overflow-hidden\" style=\"isolation: isolate; border-radius: 0; margin-top: 96px; min-height: 480px;\">\n<p> <video class=\"footer__bg\" autoplay loop muted playsinline><source src=\"{{hero.video.url}}\" data-placeholder=\"hero-video.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<div class=\"liquid-glass footer__glass\"><\/div>\n<div class=\"footer__content\" style=\"padding: 96px 24px 32px;\">\n<div class=\"max-w-wide mx-auto\" style=\"display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;\">\n<div>\n<h3 class=\"font-serif text-2xl mb-4\" style=\"font-family: 'Cormorant Garamond', serif; font-weight: 500;\">LLCCRAFT<\/h3>\n<p class=\"text-sm\" style=\"color: oklch(0.20 0.010 28); opacity: 0.7;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.<\/p>\n<\/p><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Collections<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contemporary Ru ware<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Jingdezhen blue-and-white<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Reserved & Commission<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Atelier<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Liu<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Chen<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Provenance<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Acquisition<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Direct purchase<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Private inquiry<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contact<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"max-w-wide mx-auto\" style=\"margin-top: 64px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid oklch(0.20 0.010 28 \/ 0.1);\">\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">© 2026 LLCCRAFT · Lorem ipsum<\/p>\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">Privacy · Terms · Contact<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer>\n<p><script>\n \/* Global Sticky Header v0.4.1.6 - PHASE 3.5 chassis *\/\n (function () {\n const header = document.getElementById('global-header');\n if (header) {\n let lastY = 0;\n const onScroll = () => {\n const y = window.scrollY;\n const dir = y > lastY ? 'down' : 'up';\n lastY = y;\n if (y < 80) {\n header.dataset.state = 'top';\n header.classList.remove('is-scrolled-down', 'is-scrolled-up');\n } else {\n header.dataset.state = dir;\n header.classList.toggle('is-scrolled-down', dir === 'down');\n header.classList.toggle('is-scrolled-up', dir === 'up');\n }\n };\n window.addEventListener('scroll', onScroll, { passive: true });\n onScroll();\n }\n\n \/* lang dropdown *\/\n const langBtn = document.getElementById('lang-btn');\n const langMenu = document.getElementById('lang-menu');\n if (langBtn && langMenu) {\n const toggle = (open) => {\n const isOpen = open ?? !langMenu.classList.contains('is-open');\n langMenu.classList.toggle('is-open', isOpen);\n langBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n };\n langBtn.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });\n langMenu.addEventListener('click', (e) => {\n const item = e.target.closest('[data-lang]');\n if (item) {\n langMenu.querySelectorAll('button').forEach((b) => b.classList.remove('is-active'));\n item.classList.add('is-active');\n const cur = langBtn.querySelector('[data-current-lang]');\n if (cur) cur.textContent = item.textContent;\n toggle(false);\n }\n });\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.global-header__lang')) toggle(false);\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && langMenu.classList.contains('is-open')) {\n toggle(false);\n langBtn.focus();\n }\n });\n }\n })();<\/p>\n<p> (function () {\n const slides = document.querySelectorAll('[data-slide]');\n const dots = document.querySelectorAll('[data-slide-dot]');\n if (slides.length === 0) return;\n let i = 0;\n const goTo = (next) => {\n slides[i].classList.remove('is-active');\n if (dots[i]) dots[i].classList.remove('is-active');\n i = next % slides.length;\n slides[i].classList.add('is-active');\n if (dots[i]) dots[i].classList.add('is-active');\n };\n setInterval(() => goTo(i + 1), 5000);\n })();<\/p>\n<p> (function () {\n const track = document.getElementById('track');\n const prev = document.getElementById('prev');\n const next = document.getElementById('next');\n if (!track || !prev || !next) return;\n let offset = 0;\n let manualTimer = null;\n const STEP = 360;\n const RESUME_MS = 4000;\n function nudge(direction) {\n track.classList.add('is-manual');\n offset += direction * STEP;\n track.style.transform = 'translateX(' + offset + 'px)';\n clearTimeout(manualTimer);\n manualTimer = setTimeout(function () {\n track.classList.remove('is-manual');\n track.style.transform = '';\n offset = 0;\n }, RESUME_MS);\n }\n prev.addEventListener('click', function () { nudge(+1); });\n next.addEventListener('click', function () { nudge(-1); });\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-01 Home \u00b7 v0.4.1.5 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e Lorem ipsum · 2026 · Vol. I Sky-blue Reveries Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Explore Lorem ipsum · Vol. II Quiet Earthen Vessels Quis nostrud exercitation ullamco laboris nisi ut […]<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11,"date":"2026-07-08T01:56:54","date_gmt":"2026-07-08T08:56:54","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=11"},"modified":"2026-07-08T01:56:54","modified_gmt":"2026-07-08T08:56:54","slug":"home","status":"publish","type":"page","link":"https:\/\/llccraft.com\/","title":{"rendered":"Home"},"content":{"rendered":"

\n
\n
\n
\n
\nLLCCRAFT \u00b7 P-01 Home \u00b7 v0.4.1.5<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-01 home skeleton placeholder. v0.4.1.5 Helvetica Regular activated. All visuals placeholder.\"><\/p>\n<p><\/p>\n<p><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n \/* TODO [Style Discovery] v0.4 : all visual values placeholder *\/\n 'gallery': 'oklch(0.97 0.012 90)',\n 'ink': 'oklch(0.20 0.010 28)',\n 'ink-soft': 'oklch(0.55 0.008 28)',\n 'rule': 'oklch(0.88 0.005 28)',\n },\n fontFamily: {\n serif: ['\"Cormorant Garamond\"', 'Georgia', 'serif'],\n sans: ['\"Helvetica Regular\"', '\"Inter\"', 'system-ui', 'sans-serif'],\n },\n maxWidth: { 'wide': '1320px' },\n }\n }\n }\n<\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-01 v0.4.1.4 - PIECE CARD precise refactor (SUPERSEDED by v0.4.1.5)\n --------------------------------------------------------------------------\n [F1] Helvetica Regular @font-face --> ACTIVATED in v0.4.1.5\n [F2] Piece card 4-layer stack --> RETAINED\n [F3] Footer Lumina 14-line CSS --> RETAINED<\/p>\n<p> v0.4.1.5 Helvetica Regular activation round (2026-07-06) :\n - CEO provided real onlinewebfonts CDN URLs (5 formats :\n eot \/ woff2 \/ woff \/ ttf \/ svg)\n - @font-face family name : \"Helvetica Regular\" (matches\n CDN face name)\n - body font-family chain head updated to \"Helvetica Regular\"\n - Tailwind config fontFamily.sans updated\n - Inter kept as graceful fallback if CDN unreachable\n --------------------------------------------------------------------------\n Targeted structural changes to piece card module only :<\/p>\n<p> [F1] Helvetica Regular @font-face\n - src urls were TODO (CEO) - RESOLVED in v0.4.1.5\n - ACTIVE : onlinewebfonts CDN, 5 formats (eot\/woff2\/woff\/ttf\/svg)<\/p>\n<p> [F2] Piece card : 4-layer stack (rating --> image --> headline\n (title L + price R) --> specs bar)\n - rating : 5 stars (light gold, NOT bright yellow) + count\n - image : aspect-square 1\/1, hover 1.03x 0.8s\n - headline: flex justify-between (no discount \/ sale styling)\n - specs : 3-icon flex bar (capacity \/ diameter \/ depth)<\/p>\n<p> [F3] Footer Lumina : verbatim 14-line CSS retained\n - background-blend-mode: luminosity LOCKED\n - backdrop-filter: blur(4px) LOCKED\n - linear-gradient mask border LOCKED<\/p>\n<p> Cross-round carry-overs (untouched from prior):\n - 3-slide hero with dots indicator (v0.4.1.3)\n - Strict 3-col piece grid (v0.4.1.3)\n - 16 testimonial cards with infinite-card__photo (v0.4.1.2)\n - All v0.4.1 PII-clearance\n ========================================================================== *\/<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (v0.4.1.5 ACTIVATED)\n onlinewebfonts CDN : eot + woff2 + woff + ttf + svg\n font-family \"Helvetica Regular\" matches the face registered on the CDN *\/\n @font-face {\n font-family: \"Helvetica Regular\";\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot\");\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n }<\/p>\n<p> *, *::before, *::after { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; }\n body {\n background: oklch(0.97 0.012 90);\n color: oklch(0.20 0.010 28);\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, -apple-system, sans-serif;\n font-size: 16px; line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> \/* ---------- A11Y ---------- *\/\n .skiplink {\n position: fixed; top: -100px; left: 12px; z-index: 200;\n padding: 8px 24px; background: #000; color: #fff;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n border-radius: 2px; text-decoration: none; font-weight: 500;\n transition: top 240ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .skiplink:focus { top: 12px; }\n :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }<\/p>\n<p> \/* ---------- Reduced motion ---------- *\/\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }<\/p>\n<p> \/* ====================================================================\n 1. Global Sticky Header (v0.4.1.6 chassis - PHASE 3.5)\n ==================================================================== *\/\n .global-header {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 100;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: background 320ms ease, backdrop-filter 320ms ease,\n border-color 320ms ease;\n }\n .global-header.is-scrolled-down {\n background: rgba(15, 15, 15, 0.5);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border-bottom-color: rgba(255, 255, 255, 0.08);\n }\n .global-header.is-scrolled-up {\n background: transparent;\n backdrop-filter: none;\n border-bottom-color: transparent;\n }\n .global-header__inner {\n max-width: 1320px;\n margin: 0 auto;\n padding: 18px 24px;\n display: flex; align-items: center; justify-content: space-between;\n gap: 32px;\n }\n .global-header__brand {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n color: #fff; text-decoration: none;\n letter-spacing: -0.005em; flex-shrink: 0;\n }\n .global-header__actions {\n display: flex; align-items: center; gap: 24px;\n }\n \/* lang dropdown *\/\n .global-header__lang { position: relative; }\n .global-header__lang-btn {\n display: inline-flex; align-items: center; gap: 4px;\n background: transparent; border: none; padding: 6px 8px;\n color: #fff; cursor: pointer;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.05em;\n border-radius: 4px; transition: background 200ms ease;\n }\n .global-header__lang-btn:hover { background: rgba(255, 255, 255, 0.08); }\n .global-header__lang-caret { width: 10px; height: 10px; fill: currentColor; }\n .global-header__lang-menu {\n position: absolute; top: calc(100% + 8px); right: 0;\n background: oklch(0.18 0.012 28 \/ 0.95);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 4px; padding: 4px 0;\n min-width: 100px;\n list-style: none; margin: 0;\n opacity: 0; visibility: hidden;\n transform: translateY(-4px);\n transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;\n z-index: 110;\n }\n .global-header__lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }\n .global-header__lang-menu button {\n display: block; width: 100%; padding: 8px 16px;\n background: transparent; border: none;\n color: rgba(255, 255, 255, 0.7);\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.05em;\n text-align: left; cursor: pointer;\n transition: background 200ms ease, color 200ms ease;\n }\n .global-header__lang-menu button:hover,\n .global-header__lang-menu button.is-active {\n background: rgba(255, 255, 255, 0.08); color: #fff;\n }\n \/* social matrix *\/\n .global-header__social {\n display: flex; align-items: center; gap: 12px;\n list-style: none; padding: 0; margin: 0;\n }\n .global-header__social a {\n display: flex; align-items: center; justify-content: center;\n width: 28px; height: 28px;\n color: #fff; opacity: 0.7;\n text-decoration: none; transition: opacity 200ms ease;\n }\n .global-header__social a:hover { opacity: 1; }\n .global-header__social svg { width: 16px; height: 16px; fill: currentColor; }\n \/* icons *\/\n .global-header__icons { display: flex; align-items: center; gap: 4px; }\n .global-header__icon-btn,\n .global-header__icon-link {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n width: 40px; height: 40px;\n background: transparent; border: none;\n color: #fff; opacity: 0.85;\n text-decoration: none; cursor: pointer; border-radius: 50%;\n transition: opacity 200ms ease, background 200ms ease;\n }\n .global-header__icon-btn:hover,\n .global-header__icon-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }\n .global-header__icon-btn svg,\n .global-header__icon-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }\n .global-header__cart-badge {\n position: absolute; top: 4px; right: 4px;\n min-width: 16px; height: 16px; padding: 0 4px;\n display: flex; align-items: center; justify-content: center;\n background: oklch(0.42 0.165 27);\n color: #fff;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 10px; font-weight: 500;\n border-radius: 999px; line-height: 1;\n }<\/p>\n<p> \/* ====================================================================\n 2. 100vh hero (3 INDEPENDENT FULL-SCREEN SLIDES, v0.4.1.3)\n ==================================================================== *\/\n .hero {\n position: relative; width: 100vw; height: 100vh;\n overflow: hidden; background: #000;\n isolation: isolate;\n }\n .hero__slide {\n position: absolute; inset: 0;\n opacity: 0; transition: opacity 2.4s ease-in-out; z-index: 0;\n }\n .hero__slide.is-active { opacity: 1; z-index: 1; }\n .hero__image {\n position: absolute; inset: 0;\n width: 100%; height: 100%; object-fit: cover;\n }\n .hero__veil {\n position: absolute; inset: 0; pointer-events: none;\n background: linear-gradient(180deg,\n rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 100%);\n }\n .hero__content {\n position: absolute; inset: 0;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n text-align: center; color: #fff; padding: 24px;\n }\n .hero__content .eyebrow {\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n opacity: 0.85; margin: 0 0 12px;\n }\n .hero__content h1 {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2.5rem, 5vw, 5rem);\n line-height: 1.05; font-weight: 500;\n margin: 0 auto 20px; max-width: 18ch;\n text-wrap: balance; letter-spacing: -0.02em;\n }\n .hero__content p {\n max-width: 56ch; margin: 0 auto 28px;\n font-size: 1.0625rem; opacity: 0.85;\n }\n .hero__cta {\n display: inline-block; padding: 14px 32px;\n background: #fff; color: #000; text-decoration: none;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n }\n .hero__dots {\n position: absolute; bottom: 32px; left: 50%;\n transform: translateX(-50%);\n display: flex; gap: 12px; z-index: 2;\n }\n .hero__dot {\n width: 32px; height: 2px;\n background: rgba(255, 255, 255, 0.4);\n transition: background 240ms ease;\n }\n .hero__dot.is-active { background: rgba(255, 255, 255, 1); }<\/p>\n<p> \/* ====================================================================\n 3. Piece card v0.4.1.4 - PRECISE REFACTOR\n 4-layer stack : image --> rating --> headline (title L + price R) --> specs\n ==================================================================== *\/\n .piece-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 80px 48px;\n }\n @media (max-width: 900px) {\n .piece-grid { grid-template-columns: repeat(2, 1fr); gap: 64px 32px; }\n }\n @media (max-width: 600px) {\n .piece-grid { grid-template-columns: 1fr; gap: 48px; }\n }\n .piece-card { cursor: pointer; }<\/p>\n<p> \/* layer 1 : image (square, hover) *\/\n .piece-card__image {\n width: 100%; aspect-ratio: 1 \/ 1; overflow: hidden;\n background: oklch(0.93 0.005 28);\n margin-bottom: 16px;\n }\n .piece-card__image img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .piece-card:hover .piece-card__image img { transform: scale(1.03); }<\/p>\n<p> \/* layer 2 : rating (5 stars + count, light gold NOT bright yellow) *\/\n .piece-card__rating {\n display: flex; align-items: center; gap: 2px;\n margin-bottom: 10px;\n }\n .piece-card__rating .star {\n color: oklch(0.72 0.025 85); \/* light gold - muted, NOT bright yellow *\/\n font-size: 13px; line-height: 1;\n }\n .piece-card__rating-count {\n margin-left: 10px;\n color: oklch(0.55 0.008 28);\n font-size: 12px; letter-spacing: 0.02em;\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n }<\/p>\n<p> \/* layer 3 : headline (title L + price R, single-color premium) *\/\n .piece-card__headline {\n display: flex; align-items: baseline; justify-content: space-between;\n gap: 16px; margin-bottom: 14px;\n }\n .piece-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .piece-card__price {\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n font-size: 13px; font-weight: 500;\n color: oklch(0.55 0.008 28); margin: 0;\n letter-spacing: 0.02em; white-space: nowrap;\n \/* v0.4.1.4 : NO red\/black discount \/ sale contrast - single-color premium *\/\n }<\/p>\n<p> \/* layer 4 : specs bar (3 icons + values, flex space-between) *\/\n .piece-card__specs {\n display: flex; justify-content: space-between;\n padding-top: 12px;\n border-top: 1px solid oklch(0.88 0.005 28);\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n font-size: 12px; color: oklch(0.55 0.008 28);\n letter-spacing: 0.02em;\n }\n .spec {\n display: flex; align-items: center; gap: 6px;\n }\n .spec__icon {\n display: flex; align-items: center; justify-content: center;\n width: 18px; height: 18px;\n color: oklch(0.42 0.012 28);\n flex-shrink: 0;\n }\n .spec__icon svg { display: block; }\n .spec__label { font-weight: 500; }<\/p>\n<p> \/* ====================================================================\n 4. Infinite testimonials (carried from v0.4.1.2)\n ==================================================================== *\/\n .infinite-track {\n display: flex; gap: 24px;\n animation: scroll-left 40s linear infinite;\n will-change: transform;\n }\n .infinite-track:hover { animation-play-state: paused; }\n .infinite-track.is-manual { animation: none; }\n @keyframes scroll-left {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n .infinite-card {\n flex: 0 0 340px;\n background: #fff;\n border-radius: 12px;\n padding: 24px;\n box-shadow:\n 0 0 32px rgba(0, 0, 0, 0.04),\n 0 2px 8px rgba(0, 0, 0, 0.03);\n }\n .infinite-card blockquote {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic; font-size: 16px; line-height: 1.55;\n margin: 0 0 16px; color: oklch(0.20 0.010 28);\n }\n .infinite-card__visual {\n width: 100%; aspect-ratio: 1 \/ 1;\n background: #e5e7eb;\n border-radius: 8px; overflow: hidden;\n margin: 0 0 16px;\n }\n .infinite-card__visual img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }\n .infinite-card__attr {\n display: flex; align-items: center; gap: 12px;\n padding-top: 16px; border-top: 1px solid oklch(0.88 0.005 28);\n }\n .infinite-card__avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: oklch(0.85 0.005 28);\n }\n .infinite-card__photo {\n width: 48px; height: 48px;\n border-radius: 6px;\n background: #e5e7eb;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-family: 'Helvetica', 'Inter', system-ui, sans-serif;\n font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n }\n .infinite-card__name { font-size: 14px; font-weight: 500; margin: 0; }\n .infinite-card__loc { font-size: 12px; color: oklch(0.55 0.008 28); margin: 0; }\n .carousel-controls {\n display: flex; gap: 12px; justify-content: center; margin-top: 32px;\n }\n .carousel-btn {\n width: 48px; height: 48px;\n border: 1px solid oklch(0.20 0.010 28);\n background: transparent; color: oklch(0.20 0.010 28);\n border-radius: 999px; cursor: pointer; font-size: 16px;\n transition: background 240ms ease, color 240ms ease;\n }\n .carousel-btn:hover { background: oklch(0.20 0.010 28); color: #fff; }<\/p>\n<p> \/* ====================================================================\n 5. Lumina Liquid Glass (F3 : 14 lines verbatim, LOCKED)\n ==================================================================== *\/\n .liquid-glass {\n background: rgba(255, 255, 255, 0.01);\n background-blend-mode: luminosity;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n border: none;\n box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n position: relative;\n overflow: hidden;\n }\n .liquid-glass::before {\n content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;\n background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;\n }\n .footer__bg {\n position: absolute; inset: 0; z-index: 0;\n width: 100%; height: 100%; object-fit: cover;\n opacity: 0.55;\n }\n .footer__glass {\n position: absolute; inset: 0; z-index: 0;\n }\n .footer__content {\n position: relative; z-index: 1;\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><br \/>\n<a href=\"#main\" class=\"skiplink\">Skip to main content<\/a><\/p>\n<p><\/p>\n<header class=\"global-header\" data-state=\"top\" id=\"global-header\">\n<div class=\"global-header__inner\">\n<p> <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\n<p> <\/p>\n<div class=\"global-header__lang\">\n <button class=\"global-header__lang-btn\" id=\"lang-btn\" type=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"lang-menu\"><br \/>\n <span data-current-lang>EN<\/span><br \/>\n <svg class=\"global-header__lang-caret\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M2 4l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<ul class=\"global-header__lang-menu\" id=\"lang-menu\" role=\"menu\" aria-label=\"Language\">\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"en\" class=\"is-active\">EN<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"zh\">\u4e2d\u6587<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"fr\">FR<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"ja\">\u65e5\u672c\u8a9e<\/button><\/li>\n<\/ul><\/div>\n<p> <\/p>\n<ul class=\"global-header__social\" aria-label=\"Social\">\n<li><a href=\"#\" aria-label=\"Instagram\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"8\" cy=\"8\" r=\"2.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"11.6\" cy=\"4.4\" r=\"0.7\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"WeChat\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"6\" cy=\"7\" rx=\"5\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <ellipse cx=\"11\" cy=\"10\" rx=\"3.5\" ry=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"4.7\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"7.3\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"10.4\" cy=\"9.5\" r=\"0.35\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"Weibo\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"8\" cy=\"8.5\" rx=\"6\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"6\" cy=\"9\" r=\"0.4\" fill=\"currentColor\"\/>\n <circle cx=\"9\" cy=\"8\" r=\"0.4\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<\/ul>\n<p> <\/p>\n<div class=\"global-header__icons\">\n <button class=\"global-header__icon-btn\" id=\"search-btn\" type=\"button\" aria-label=\"Search\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M12 12l4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <a href=\"p05-auth.html\" class=\"global-header__icon-link\" aria-label=\"Account\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"6.5\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M3 16c0-3 3-5 6-5s6 2 6 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/a><br \/>\n <button class=\"global-header__icon-btn global-header__cart\" id=\"cart-btn\" type=\"button\" aria-label=\"Cart\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path d=\"M3 5h2l1.5 8h7l1.5-6H6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n <circle cx=\"7.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <circle cx=\"12.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <\/svg><\/p>\n<p> <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><main id=\"main\"><\/p>\n<p><\/p>\n<section class=\"hero\" aria-label=\"Featured slideshow\">\n<div class=\"hero__slide is-active\" data-slide>\n <img decoding=\"async\" class=\"hero__image\" src=\"https:\/\/picsum.photos\/seed\/ru-ware-celadon-skyblue\/1920\/1080.jpg\" alt=\"Lorem ipsum porcelain - I\"><\/p>\n<div class=\"hero__veil\"><\/div>\n<div class=\"hero__content\">\n<p class=\"eyebrow\">Lorem ipsum · 2026 · Vol. I<\/p>\n<h1>Sky-blue Reveries<\/h1>\n<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<p> <a href=\"#\" class=\"hero__cta\">Explore<\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"hero__slide\" data-slide>\n <img decoding=\"async\" class=\"hero__image\" src=\"https:\/\/picsum.photos\/seed\/qinghua-hands-tradition\/1920\/1080.jpg\" alt=\"Lorem ipsum porcelain - II\"><\/p>\n<div class=\"hero__veil\"><\/div>\n<div class=\"hero__content\">\n<p class=\"eyebrow\">Lorem ipsum · Vol. II<\/p>\n<h1>Quiet Earthen Vessels<\/h1>\n<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n<p> <a href=\"#\" class=\"hero__cta\">View<\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"hero__slide\" data-slide>\n <img decoding=\"async\" class=\"hero__image\" src=\"https:\/\/picsum.photos\/seed\/scholar-table-ink-grind\/1920\/1080.jpg\" alt=\"Lorem ipsum porcelain - III\"><\/p>\n<div class=\"hero__veil\"><\/div>\n<div class=\"hero__content\">\n<p class=\"eyebrow\">Lorem ipsum · Vol. III<\/p>\n<h1>Hammered Indigo<\/h1>\n<p>In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>\n<p> <a href=\"#\" class=\"hero__cta\">Acquire<\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"hero__dots\" aria-hidden=\"true\">\n<div class=\"hero__dot is-active\" data-slide-dot><\/div>\n<div class=\"hero__dot\" data-slide-dot><\/div>\n<div class=\"hero__dot\" data-slide-dot><\/div>\n<\/p><\/div>\n<\/section>\n<p> rating –> headline –> specs<br \/>\n ============================================================ –><\/p>\n<section class=\"py-32 px-6 max-w-wide mx-auto\" aria-label=\"Featured collection\">\n<div class=\"text-center mb-20\">\n<p class=\"text-xs uppercase mb-3\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Lorem ipsum<\/p>\n<h2 class=\"font-serif text-4xl md:text-5xl\" style=\"font-weight: 500;\">Featured collection<\/h2>\n<\/p><\/div>\n<div class=\"piece-grid\">\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/ru-ware-celadon-vase\/600\/600.jpg\" alt=\"Lorem ipsum piece 01\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 24 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(24)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 01<\/h3>\n<p class=\"piece-card__price\">USD 1,200<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">280 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">12.5 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">8.0 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/qinghua-blue-bowl\/600\/600.jpg\" alt=\"Lorem ipsum piece 02\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 47 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(47)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 02<\/h3>\n<p class=\"piece-card__price\">USD 2,800<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">350 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">14.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">9.5 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/jingdezhen-vase-cobalt\/600\/600.jpg\" alt=\"Lorem ipsum piece 03\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 12 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(12)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 03<\/h3>\n<p class=\"piece-card__price\">USD 4,500<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">420 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">16.5 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">11.0 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/celadon-tea-cup\/600\/600.jpg\" alt=\"Lorem ipsum piece 04\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 38 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(38)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 04<\/h3>\n<p class=\"piece-card__price\">USD 6,200<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">280 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"22\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">12.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">7.5 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/scholar-pen-holder\/600\/600.jpg\" alt=\"Lorem ipsum piece 05\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 61 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(61)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 05<\/h3>\n<p class=\"piece-card__price\">USD 9,800<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">520 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">18.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">12.5 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"piece-card\">\n<div class=\"piece-card__image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/ru-ware-masterpiece\/600\/600.jpg\" alt=\"Lorem ipsum piece 06\" loading=\"lazy\">\n <\/div>\n<div class=\"piece-card__rating\" aria-label=\"5 out of 5 stars from 29 reviews\">\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"star\" aria-hidden=\"true\">★<\/span><br \/>\n <span class=\"piece-card__rating-count\">(29)<\/span>\n <\/div>\n<div class=\"piece-card__headline\">\n<h3 class=\"piece-card__title\">Lorem ipsum vase 06<\/h3>\n<p class=\"piece-card__price\">USD 18,500<\/p>\n<\/p><\/div>\n<div class=\"piece-card__specs\">\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Capacity\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M5 2v3M11 2v3M3 5h10v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V5z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">380 ml<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Diameter\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"6\"\/>\n <path d=\"M2 8h12\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">15.0 cm<\/span>\n <\/div>\n<div class=\"spec\">\n <span class=\"spec__icon\" aria-label=\"Depth\"><br \/>\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" aria-hidden=\"true\">\n <path d=\"M3 2h10v9l-5 3-5-3V2z\"\/>\n <\/svg><br \/>\n <\/span><br \/>\n <span class=\"spec__label\">10.0 cm<\/span>\n <\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/section>\n<p><\/p>\n<section class=\"py-24 overflow-hidden\" aria-label=\"From our collectors\">\n<div class=\"px-6 text-center mb-12\">\n<p class=\"text-xs uppercase mb-3\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Lorem ipsum<\/p>\n<h2 class=\"font-serif text-4xl md:text-5xl\" style=\"font-weight: 500;\">From our collectors<\/h2>\n<\/p><\/div>\n<div class=\"infinite-track\" id=\"track\" aria-live=\"off\">\n<article class=\"infinite-card\">\n<blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-20\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Lorem Ipsum<\/p>\n<p class=\"infinite-card__loc\">London, UK<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-21\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Dolor Sit<\/p>\n<p class=\"infinite-card__loc\">New York, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-22\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Amet Consectetur<\/p>\n<p class=\"infinite-card__loc\">Hong Kong<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-23\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Adipiscing Elit<\/p>\n<p class=\"infinite-card__loc\">Singapore<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-24\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Tempor Incididunt<\/p>\n<p class=\"infinite-card__loc\">Los Angeles, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-25\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Magnam Dolorem<\/p>\n<p class=\"infinite-card__loc\">Geneva, CH<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-26\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Quisquam Est<\/p>\n<p class=\"infinite-card__loc\">Dubai, UAE<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\">\n<blockquote><p>“Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"Lorem ipsum visual\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-27\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Iure Reprehenderit<\/p>\n<p class=\"infinite-card__loc\">Aspen, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-20\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Lorem Ipsum<\/p>\n<p class=\"infinite-card__loc\">London, UK<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-21\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Dolor Sit<\/p>\n<p class=\"infinite-card__loc\">New York, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugit.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-22\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Amet Consectetur<\/p>\n<p class=\"infinite-card__loc\">Hong Kong<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Excepteur sint occaecat cupidentat non proident, sunt in culpa qui officia deserunt.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-23\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Adipiscing Elit<\/p>\n<p class=\"infinite-card__loc\">Singapore<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-24\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Tempor Incididunt<\/p>\n<p class=\"infinite-card__loc\">Los Angeles, USA<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-25\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Magnam Dolorem<\/p>\n<p class=\"infinite-card__loc\">Geneva, CH<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-26\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Quisquam Est<\/p>\n<p class=\"infinite-card__loc\">Dubai, UAE<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"infinite-card\" aria-hidden=\"true\">\n<blockquote><p>“Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.”<\/p><\/blockquote>\n<div class=\"infinite-card__visual\"><img decoding=\"async\" class=\"aspect-square bg-gray-200\" alt=\"\" src=\"https:\/\/picsum.photos\/seed\/atelier-collector-27\/400\/400.jpg\"><\/div>\n<div class=\"infinite-card__attr\">\n<div class=\"infinite-card__avatar\"><\/div>\n<div class=\"infinite-card__photo\" aria-label=\"Buyer photo placeholder\">Buyer<\/div>\n<div>\n<p class=\"infinite-card__name\">Iure Reprehenderit<\/p>\n<p class=\"infinite-card__loc\">Aspen, USA<\/p>\n<\/div><\/div>\n<\/article><\/div>\n<div class=\"carousel-controls\">\n <button class=\"carousel-btn\" id=\"prev\" aria-label=\"Previous testimonials\">←<\/button><br \/>\n <button class=\"carousel-btn\" id=\"next\" aria-label=\"Next testimonials\">→<\/button>\n <\/div>\n<\/section>\n<p><\/main><\/p>\n<p><\/p>\n<footer class=\"relative overflow-hidden\" style=\"isolation: isolate; border-radius: 0; margin-top: 96px; min-height: 480px;\">\n<p> <video class=\"footer__bg\" autoplay loop muted playsinline><source src=\"{{hero.video.url}}\" data-placeholder=\"hero-video.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<div class=\"liquid-glass footer__glass\"><\/div>\n<div class=\"footer__content\" style=\"padding: 96px 24px 32px;\">\n<div class=\"max-w-wide mx-auto\" style=\"display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;\">\n<div>\n<h3 class=\"font-serif text-2xl mb-4\" style=\"font-family: 'Cormorant Garamond', serif; font-weight: 500;\">LLCCRAFT<\/h3>\n<p class=\"text-sm\" style=\"color: oklch(0.20 0.010 28); opacity: 0.7;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.<\/p>\n<\/p><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Collections<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contemporary Ru ware<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Jingdezhen blue-and-white<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Reserved & Commission<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Atelier<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Liu<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Chen<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Provenance<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Acquisition<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Direct purchase<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Private inquiry<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contact<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"max-w-wide mx-auto\" style=\"margin-top: 64px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid oklch(0.20 0.010 28 \/ 0.1);\">\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">© 2026 LLCCRAFT · Lorem ipsum<\/p>\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">Privacy · Terms · Contact<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer>\n<p><script>\n \/* Global Sticky Header v0.4.1.6 - PHASE 3.5 chassis *\/\n (function () {\n const header = document.getElementById('global-header');\n if (header) {\n let lastY = 0;\n const onScroll = () => {\n const y = window.scrollY;\n const dir = y > lastY ? 'down' : 'up';\n lastY = y;\n if (y < 80) {\n header.dataset.state = 'top';\n header.classList.remove('is-scrolled-down', 'is-scrolled-up');\n } else {\n header.dataset.state = dir;\n header.classList.toggle('is-scrolled-down', dir === 'down');\n header.classList.toggle('is-scrolled-up', dir === 'up');\n }\n };\n window.addEventListener('scroll', onScroll, { passive: true });\n onScroll();\n }\n\n \/* lang dropdown *\/\n const langBtn = document.getElementById('lang-btn');\n const langMenu = document.getElementById('lang-menu');\n if (langBtn && langMenu) {\n const toggle = (open) => {\n const isOpen = open ?? !langMenu.classList.contains('is-open');\n langMenu.classList.toggle('is-open', isOpen);\n langBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n };\n langBtn.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });\n langMenu.addEventListener('click', (e) => {\n const item = e.target.closest('[data-lang]');\n if (item) {\n langMenu.querySelectorAll('button').forEach((b) => b.classList.remove('is-active'));\n item.classList.add('is-active');\n const cur = langBtn.querySelector('[data-current-lang]');\n if (cur) cur.textContent = item.textContent;\n toggle(false);\n }\n });\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.global-header__lang')) toggle(false);\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && langMenu.classList.contains('is-open')) {\n toggle(false);\n langBtn.focus();\n }\n });\n }\n })();<\/p>\n<p> (function () {\n const slides = document.querySelectorAll('[data-slide]');\n const dots = document.querySelectorAll('[data-slide-dot]');\n if (slides.length === 0) return;\n let i = 0;\n const goTo = (next) => {\n slides[i].classList.remove('is-active');\n if (dots[i]) dots[i].classList.remove('is-active');\n i = next % slides.length;\n slides[i].classList.add('is-active');\n if (dots[i]) dots[i].classList.add('is-active');\n };\n setInterval(() => goTo(i + 1), 5000);\n })();<\/p>\n<p> (function () {\n const track = document.getElementById('track');\n const prev = document.getElementById('prev');\n const next = document.getElementById('next');\n if (!track || !prev || !next) return;\n let offset = 0;\n let manualTimer = null;\n const STEP = 360;\n const RESUME_MS = 4000;\n function nudge(direction) {\n track.classList.add('is-manual');\n offset += direction * STEP;\n track.style.transform = 'translateX(' + offset + 'px)';\n clearTimeout(manualTimer);\n manualTimer = setTimeout(function () {\n track.classList.remove('is-manual');\n track.style.transform = '';\n offset = 0;\n }, RESUME_MS);\n }\n prev.addEventListener('click', function () { nudge(+1); });\n next.addEventListener('click', function () { nudge(-1); });\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-01 Home \u00b7 v0.4.1.5 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e Lorem ipsum · 2026 · Vol. I Sky-blue Reveries Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Explore Lorem ipsum · Vol. II Quiet Earthen Vessels Quis nostrud exercitation ullamco laboris nisi ut […]<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}