LLCCRAFT \u00b7 P-06 Collection \u00b7 v1.0.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-06 Collection hub. v1.0.0. Gallery grid + sticky filter + anti-nonsense cards. Inherits P-01 v0.4.1.6 (Phase 3.5 chassis).\"><\/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 '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', 'gallery': '1600px' },\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:wght@400;500;600&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-06 Collection v1.0.0 - Gallery catalog hub\n ========================================================================== *\/<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (inherited, ACTIVE) ---------- *\/\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> @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 (Phase 3.5 chassis, reused)\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; 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 { display: flex; align-items: center; gap: 24px; }\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; list-style: none; margin: 0;\n opacity: 0; visibility: hidden; 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 .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 .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. [SF] Sticky Filter Bar (NOT sidebar - horizontal text labels)\n Locked directly below the global header (top: 80px)\n ==================================================================== *\/\n .filter-bar {\n position: sticky;\n top: 80px; \/* below global header *\/\n z-index: 90;\n background: oklch(0.97 0.012 90 \/ 0.92);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-bottom: 1px solid oklch(0.88 0.005 28);\n }\n .filter-bar__inner {\n max-width: 1600px;\n margin: 0 auto;\n padding: 14px 24px;\n display: flex;\n gap: 36px;\n overflow-x: auto;\n \/* hide scrollbar visually on webkit *\/\n scrollbar-width: none;\n }\n .filter-bar__inner::-webkit-scrollbar { display: none; }\n .filter-pill {\n flex-shrink: 0;\n display: inline-block;\n padding: 8px 0;\n background: transparent; border: none;\n color: oklch(0.55 0.008 28);\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n text-decoration: none;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n transition: color 200ms ease, border-color 200ms ease;\n white-space: nowrap;\n }\n .filter-pill:hover { color: oklch(0.20 0.010 28); }\n .filter-pill.is-active {\n color: oklch(0.20 0.010 28);\n border-bottom-color: oklch(0.42 0.165 27); \/* \u9701\u7ea2 underline *\/\n }\n .filter-pill__en {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 14px;\n margin-right: 6px;\n text-transform: none;\n letter-spacing: 0;\n }<\/p>\n<p> \/* ====================================================================\n 3. Page header (sparse)\n ==================================================================== *\/\n .page-header {\n padding: 160px 24px 64px;\n max-width: 1320px;\n margin: 0 auto;\n }\n .page-header__eyebrow {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n margin: 0 0 16px;\n }\n .page-header__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 500; line-height: 1.1;\n margin: 0 0 24px;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.015em;\n }\n .page-header__caption {\n max-width: 36rem;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; line-height: 1.6;\n color: oklch(0.55 0.008 28);\n margin: 0;\n }<\/p>\n<p> \/* ====================================================================\n 4. [GR] Gallery grid (4-col, 1:1 squares, 64px gap)\n ==================================================================== *\/\n .gallery {\n padding: 32px 24px 160px;\n max-width: 1600px;\n margin: 0 auto;\n }\n .gallery__grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 64px 48px; \/* 64 row \/ 48 col -- huge breathing *\/\n }\n @media (max-width: 1100px) {\n .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }\n }\n @media (max-width: 800px) {\n .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }\n }\n @media (max-width: 500px) {\n .gallery__grid { grid-template-columns: 1fr; gap: 48px; }\n }<\/p>\n<p> \/* [AN] Anti-nonsense card -- name + kiln + price only *\/\n .collection-card {\n display: flex; flex-direction: column; gap: 16px;\n }\n .collection-card__image {\n display: block;\n width: 100%;\n aspect-ratio: 1 \/ 1; \/* strict square *\/\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .collection-card__image img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .collection-card:hover .collection-card__image img { transform: scale(1.03); }<\/p>\n<p> .collection-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 18px; font-weight: 500; line-height: 1.3;\n margin: 0;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .collection-card__kiln {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.05em;\n color: oklch(0.55 0.008 28);\n margin: 0;\n }\n .collection-card__price {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; font-weight: 500;\n color: oklch(0.20 0.010 28);\n margin: 0;\n letter-spacing: 0.02em;\n }<\/p>\n<p> \/* ====================================================================\n 5. Lumina Liquid Glass footer (verbatim, inherited)\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 <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\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<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<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<header class=\"page-header\">\n<p class=\"page-header__eyebrow\">Catalogue · No. 06<\/p>\n<h1 class=\"page-header__title\">Lorem Ipsum, 24 pieces<\/h1>\n<p class=\"page-header__caption\">Curated by the editorial desk. Updated quarterly.<\/p>\n<\/header>\n<p> <\/p>\n<nav class=\"filter-bar\" role=\"navigation\" aria-label=\"Collection categories\">\n<div class=\"filter-bar__inner\">\n <button class=\"filter-pill is-active\" type=\"button\" data-filter=\"all\">All<\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"ru-ware\"><br \/>\n <span class=\"filter-pill__en\">Ru ware<\/span>\u6c5d\u7a91<br \/>\n <\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"jianzhan\"><br \/>\n <span class=\"filter-pill__en\">Jianzhan<\/span>\u5efa\u76cf<br \/>\n <\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"tea-cup\"><br \/>\n <span class=\"filter-pill__en\">Tea cup<\/span>\u8336\u676f<br \/>\n <\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"process\"><br \/>\n <span class=\"filter-pill__en\">Process<\/span>\u5de5\u827a<br \/>\n <\/button>\n <\/div>\n<\/nav>\n<p> <\/p>\n<section class=\"gallery\" aria-label=\"Collection catalogue\">\n<div class=\"gallery__grid\">\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum sky-blue Mei vase\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-60\/600\/600.jpg\" alt=\"Lorem ipsum sky-blue Mei vase\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Sky-blue Mei vase<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$1,200<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum moon-white tea bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-61\/600\/600.jpg\" alt=\"Lorem ipsum moon-white tea bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Moon-white tea bowl<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$890<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum celadon small cup\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-62\/600\/600.jpg\" alt=\"Lorem ipsum celadon small cup\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Celadon small cup<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$250<\/p>\n<\/article>\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum Tenmoku tea bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-63\/600\/600.jpg\" alt=\"Lorem ipsum Tenmoku tea bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Tenmoku tea bowl<\/h3>\n<p class=\"collection-card__kiln\">Jianzhan · Jianyang<\/p>\n<p class=\"collection-card__price\">$2,400<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum hare's fur bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-64\/600\/600.jpg\" alt=\"Lorem ipsum hare's fur bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Hare’s fur bowl<\/h3>\n<p class=\"collection-card__kiln\">Jianzhan · Jianyang<\/p>\n<p class=\"collection-card__price\">$1,800<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum oil-spot bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-65\/600\/600.jpg\" alt=\"Lorem ipsum oil-spot bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Oil-spot bowl<\/h3>\n<p class=\"collection-card__kiln\">Jianzhan · Jianyang<\/p>\n<p class=\"collection-card__price\">$3,200<\/p>\n<\/article>\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum hand-thrown celadon cup\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-66\/600\/600.jpg\" alt=\"Lorem ipsum hand-thrown celadon cup\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Hand-thrown celadon cup<\/h3>\n<p class=\"collection-card__kiln\">Longquan celadon<\/p>\n<p class=\"collection-card__price\">$420<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum Ru-ware teacup set\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-67\/600\/600.jpg\" alt=\"Lorem ipsum Ru-ware teacup set\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Ru-ware teacup, pair<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$680<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum glazed teacup pair\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-68\/600\/600.jpg\" alt=\"Lorem ipsum glazed teacup pair\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Glazed teacup, pair<\/h3>\n<p class=\"collection-card__kiln\">Jingdezhen<\/p>\n<p class=\"collection-card__price\">$320<\/p>\n<\/article>\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum glaze test tile\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-69\/600\/600.jpg\" alt=\"Lorem ipsum glaze test tile\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Glaze test tile<\/h3>\n<p class=\"collection-card__kiln\">Process · Studio sample<\/p>\n<p class=\"collection-card__price\">$180<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum kiln record plate\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-70\/600\/600.jpg\" alt=\"Lorem ipsum kiln record plate\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Kiln record plate<\/h3>\n<p class=\"collection-card__kiln\">Process · Q2 2026 firing<\/p>\n<p class=\"collection-card__price\">$220<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum maker's reference piece\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-71\/600\/600.jpg\" alt=\"Lorem ipsum maker's reference piece\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Maker’s reference piece<\/h3>\n<p class=\"collection-card__kiln\">Process · Liu atelier<\/p>\n<p class=\"collection-card__price\">$1,400<\/p>\n<\/article><\/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=\"p06-collection.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Ru ware<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p06-collection.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Jianzhan<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p06-collection.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Tea cup<\/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=\"p04-about.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">About<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p04-about.html\" 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=\"p04-about.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Chen<\/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=\"p02-pdp.html\" 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=\"p02-pdp.html\" 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=\"p05-auth.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Sign in<\/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 \/* ==========================================================================\n P-06 Collection JS v1.0.0\n ==========================================================================\n Modules (Phase 3.5 chassis + new collection-specific):\n 1. Global Sticky Header (scroll dir + lang dropdown)\n 2. Sticky filter bar tab-switch (skeleton visual only)\n ========================================================================== *\/<\/p>\n<p> (function () {\n \/* 1. Global Sticky Header (Phase 3.5 chassis) *\/\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 \/* 1b. 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 }<\/p>\n<p> \/* 2. Sticky Filter Bar tab-switch (skeleton visual only) *\/\n const pills = document.querySelectorAll('.filter-pill');\n pills.forEach((pill) => {\n pill.addEventListener('click', () => {\n pills.forEach((p) => {\n p.classList.toggle('is-active', p === pill);\n p.setAttribute('aria-selected', p === pill ? 'true' : 'false');\n });\n \/* skeleton : no real article filtering *\/\n });\n });\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-06 Collection \u00b7 v1.0.0 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e Catalogue · No. 06 Lorem Ipsum, 24 pieces Curated by the editorial desk. Updated quarterly. All Ru ware\u6c5d\u7a91 Jianzhan\u5efa\u76cf Tea cup\u8336\u676f Process\u5de5\u827a Sky-blue Mei vase Ru ware · Baofeng $1,200 Moon-white tea bowl Ru ware · Baofeng $890 Celadon […]<\/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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16,"date":"2026-07-08T01:57:01","date_gmt":"2026-07-08T08:57:01","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=16"},"modified":"2026-07-08T01:57:01","modified_gmt":"2026-07-08T08:57:01","slug":"collection","status":"publish","type":"page","link":"https:\/\/llccraft.com\/?page_id=16","title":{"rendered":"Collection \u00b7 \u85cf\u54c1\u76ee\u5f55"},"content":{"rendered":"

\n
\n
\n
\n
\nLLCCRAFT \u00b7 P-06 Collection \u00b7 v1.0.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-06 Collection hub. v1.0.0. Gallery grid + sticky filter + anti-nonsense cards. Inherits P-01 v0.4.1.6 (Phase 3.5 chassis).\"><\/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 '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', 'gallery': '1600px' },\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:wght@400;500;600&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-06 Collection v1.0.0 - Gallery catalog hub\n ========================================================================== *\/<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (inherited, ACTIVE) ---------- *\/\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> @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 (Phase 3.5 chassis, reused)\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; 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 { display: flex; align-items: center; gap: 24px; }\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; list-style: none; margin: 0;\n opacity: 0; visibility: hidden; 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 .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 .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. [SF] Sticky Filter Bar (NOT sidebar - horizontal text labels)\n Locked directly below the global header (top: 80px)\n ==================================================================== *\/\n .filter-bar {\n position: sticky;\n top: 80px; \/* below global header *\/\n z-index: 90;\n background: oklch(0.97 0.012 90 \/ 0.92);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-bottom: 1px solid oklch(0.88 0.005 28);\n }\n .filter-bar__inner {\n max-width: 1600px;\n margin: 0 auto;\n padding: 14px 24px;\n display: flex;\n gap: 36px;\n overflow-x: auto;\n \/* hide scrollbar visually on webkit *\/\n scrollbar-width: none;\n }\n .filter-bar__inner::-webkit-scrollbar { display: none; }\n .filter-pill {\n flex-shrink: 0;\n display: inline-block;\n padding: 8px 0;\n background: transparent; border: none;\n color: oklch(0.55 0.008 28);\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n text-decoration: none;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n transition: color 200ms ease, border-color 200ms ease;\n white-space: nowrap;\n }\n .filter-pill:hover { color: oklch(0.20 0.010 28); }\n .filter-pill.is-active {\n color: oklch(0.20 0.010 28);\n border-bottom-color: oklch(0.42 0.165 27); \/* \u9701\u7ea2 underline *\/\n }\n .filter-pill__en {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 14px;\n margin-right: 6px;\n text-transform: none;\n letter-spacing: 0;\n }<\/p>\n<p> \/* ====================================================================\n 3. Page header (sparse)\n ==================================================================== *\/\n .page-header {\n padding: 160px 24px 64px;\n max-width: 1320px;\n margin: 0 auto;\n }\n .page-header__eyebrow {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n margin: 0 0 16px;\n }\n .page-header__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 500; line-height: 1.1;\n margin: 0 0 24px;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.015em;\n }\n .page-header__caption {\n max-width: 36rem;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; line-height: 1.6;\n color: oklch(0.55 0.008 28);\n margin: 0;\n }<\/p>\n<p> \/* ====================================================================\n 4. [GR] Gallery grid (4-col, 1:1 squares, 64px gap)\n ==================================================================== *\/\n .gallery {\n padding: 32px 24px 160px;\n max-width: 1600px;\n margin: 0 auto;\n }\n .gallery__grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 64px 48px; \/* 64 row \/ 48 col -- huge breathing *\/\n }\n @media (max-width: 1100px) {\n .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }\n }\n @media (max-width: 800px) {\n .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }\n }\n @media (max-width: 500px) {\n .gallery__grid { grid-template-columns: 1fr; gap: 48px; }\n }<\/p>\n<p> \/* [AN] Anti-nonsense card -- name + kiln + price only *\/\n .collection-card {\n display: flex; flex-direction: column; gap: 16px;\n }\n .collection-card__image {\n display: block;\n width: 100%;\n aspect-ratio: 1 \/ 1; \/* strict square *\/\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .collection-card__image img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .collection-card:hover .collection-card__image img { transform: scale(1.03); }<\/p>\n<p> .collection-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 18px; font-weight: 500; line-height: 1.3;\n margin: 0;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .collection-card__kiln {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.05em;\n color: oklch(0.55 0.008 28);\n margin: 0;\n }\n .collection-card__price {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; font-weight: 500;\n color: oklch(0.20 0.010 28);\n margin: 0;\n letter-spacing: 0.02em;\n }<\/p>\n<p> \/* ====================================================================\n 5. Lumina Liquid Glass footer (verbatim, inherited)\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 <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\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<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<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<header class=\"page-header\">\n<p class=\"page-header__eyebrow\">Catalogue · No. 06<\/p>\n<h1 class=\"page-header__title\">Lorem Ipsum, 24 pieces<\/h1>\n<p class=\"page-header__caption\">Curated by the editorial desk. Updated quarterly.<\/p>\n<\/header>\n<p> <\/p>\n<nav class=\"filter-bar\" role=\"navigation\" aria-label=\"Collection categories\">\n<div class=\"filter-bar__inner\">\n <button class=\"filter-pill is-active\" type=\"button\" data-filter=\"all\">All<\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"ru-ware\"><br \/>\n <span class=\"filter-pill__en\">Ru ware<\/span>\u6c5d\u7a91<br \/>\n <\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"jianzhan\"><br \/>\n <span class=\"filter-pill__en\">Jianzhan<\/span>\u5efa\u76cf<br \/>\n <\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"tea-cup\"><br \/>\n <span class=\"filter-pill__en\">Tea cup<\/span>\u8336\u676f<br \/>\n <\/button><br \/>\n <button class=\"filter-pill\" type=\"button\" data-filter=\"process\"><br \/>\n <span class=\"filter-pill__en\">Process<\/span>\u5de5\u827a<br \/>\n <\/button>\n <\/div>\n<\/nav>\n<p> <\/p>\n<section class=\"gallery\" aria-label=\"Collection catalogue\">\n<div class=\"gallery__grid\">\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum sky-blue Mei vase\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-60\/600\/600.jpg\" alt=\"Lorem ipsum sky-blue Mei vase\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Sky-blue Mei vase<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$1,200<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum moon-white tea bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-61\/600\/600.jpg\" alt=\"Lorem ipsum moon-white tea bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Moon-white tea bowl<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$890<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum celadon small cup\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-62\/600\/600.jpg\" alt=\"Lorem ipsum celadon small cup\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Celadon small cup<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$250<\/p>\n<\/article>\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum Tenmoku tea bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-63\/600\/600.jpg\" alt=\"Lorem ipsum Tenmoku tea bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Tenmoku tea bowl<\/h3>\n<p class=\"collection-card__kiln\">Jianzhan · Jianyang<\/p>\n<p class=\"collection-card__price\">$2,400<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum hare's fur bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-64\/600\/600.jpg\" alt=\"Lorem ipsum hare's fur bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Hare’s fur bowl<\/h3>\n<p class=\"collection-card__kiln\">Jianzhan · Jianyang<\/p>\n<p class=\"collection-card__price\">$1,800<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum oil-spot bowl\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-65\/600\/600.jpg\" alt=\"Lorem ipsum oil-spot bowl\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Oil-spot bowl<\/h3>\n<p class=\"collection-card__kiln\">Jianzhan · Jianyang<\/p>\n<p class=\"collection-card__price\">$3,200<\/p>\n<\/article>\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum hand-thrown celadon cup\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-66\/600\/600.jpg\" alt=\"Lorem ipsum hand-thrown celadon cup\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Hand-thrown celadon cup<\/h3>\n<p class=\"collection-card__kiln\">Longquan celadon<\/p>\n<p class=\"collection-card__price\">$420<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum Ru-ware teacup set\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-67\/600\/600.jpg\" alt=\"Lorem ipsum Ru-ware teacup set\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Ru-ware teacup, pair<\/h3>\n<p class=\"collection-card__kiln\">Ru ware · Baofeng<\/p>\n<p class=\"collection-card__price\">$680<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum glazed teacup pair\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-68\/600\/600.jpg\" alt=\"Lorem ipsum glazed teacup pair\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Glazed teacup, pair<\/h3>\n<p class=\"collection-card__kiln\">Jingdezhen<\/p>\n<p class=\"collection-card__price\">$320<\/p>\n<\/article>\n<p> <\/p>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum glaze test tile\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-69\/600\/600.jpg\" alt=\"Lorem ipsum glaze test tile\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Glaze test tile<\/h3>\n<p class=\"collection-card__kiln\">Process · Studio sample<\/p>\n<p class=\"collection-card__price\">$180<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum kiln record plate\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-70\/600\/600.jpg\" alt=\"Lorem ipsum kiln record plate\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Kiln record plate<\/h3>\n<p class=\"collection-card__kiln\">Process · Q2 2026 firing<\/p>\n<p class=\"collection-card__price\">$220<\/p>\n<\/article>\n<article class=\"collection-card\">\n <a href=\"p02-pdp.html\" class=\"collection-card__image\" aria-label=\"Lorem ipsum maker's reference piece\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/collection-piece-71\/600\/600.jpg\" alt=\"Lorem ipsum maker's reference piece\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<h3 class=\"collection-card__title\">Maker’s reference piece<\/h3>\n<p class=\"collection-card__kiln\">Process · Liu atelier<\/p>\n<p class=\"collection-card__price\">$1,400<\/p>\n<\/article><\/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=\"p06-collection.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Ru ware<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p06-collection.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Jianzhan<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p06-collection.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Tea cup<\/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=\"p04-about.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">About<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p04-about.html\" 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=\"p04-about.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Chen<\/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=\"p02-pdp.html\" 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=\"p02-pdp.html\" 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=\"p05-auth.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Sign in<\/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 \/* ==========================================================================\n P-06 Collection JS v1.0.0\n ==========================================================================\n Modules (Phase 3.5 chassis + new collection-specific):\n 1. Global Sticky Header (scroll dir + lang dropdown)\n 2. Sticky filter bar tab-switch (skeleton visual only)\n ========================================================================== *\/<\/p>\n<p> (function () {\n \/* 1. Global Sticky Header (Phase 3.5 chassis) *\/\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 \/* 1b. 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 }<\/p>\n<p> \/* 2. Sticky Filter Bar tab-switch (skeleton visual only) *\/\n const pills = document.querySelectorAll('.filter-pill');\n pills.forEach((pill) => {\n pill.addEventListener('click', () => {\n pills.forEach((p) => {\n p.classList.toggle('is-active', p === pill);\n p.setAttribute('aria-selected', p === pill ? 'true' : 'false');\n });\n \/* skeleton : no real article filtering *\/\n });\n });\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-06 Collection \u00b7 v1.0.0 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e Catalogue · No. 06 Lorem Ipsum, 24 pieces Curated by the editorial desk. Updated quarterly. All Ru ware\u6c5d\u7a91 Jianzhan\u5efa\u76cf Tea cup\u8336\u676f Process\u5de5\u827a Sky-blue Mei vase Ru ware · Baofeng $1,200 Moon-white tea bowl Ru ware · Baofeng $890 Celadon […]<\/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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}