{"id":14,"date":"2026-07-08T01:56:59","date_gmt":"2026-07-08T08:56:59","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=14"},"modified":"2026-07-08T01:56:59","modified_gmt":"2026-07-08T08:56:59","slug":"about","status":"publish","type":"page","link":"https:\/\/llccraft.com\/?page_id=14","title":{"rendered":"About \u00b7 \u5173\u4e8e\u5de5\u574a"},"content":{"rendered":"


\n
\n
\n
\n
\nLLCCRAFT \u00b7 P-04 About \u00b7 v1.0.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-04 About Us page. v1.0.0. Asymmetrical art grid + sparse text + video\/image priority. Inherits P-01 v0.4.1.6 (Phase 3.5 chassis).\"><\/p>\n<p><!--\n ============================================================================\n P-04 About \u00b7 v1.0.0 \u00b7 PHASE 4 (art-gallery layout)\n ============================================================================\n Inherits from P-01 v0.4.1.6 (LOCKED + Phase 3.5 patch):\n - Helvetica Regular @font-face (5 formats, ACTIVE)\n - Global Sticky Header (Phase 3.5 chassis)\n - Impeccable \u5baa\u6cd5 : skiplink \/ focus-visible \/ reduced-motion\n - WCAG 2.1 AA : contrast \/ keyboard \/ aria\n - Lumina 14-line CSS - footer verbatim\n New for P-04 (CEO \u827a\u672f\u6392\u7248\u65b0\u89c4):\n [G] Asymmetrical grid - 12-col CSS grid, \u9519\u843d + overlap\n [V] Video priority - 2 silent <video>placeholders (21:9 + 16:9)\n [I] Image variety - 5 image placeholders, 4 distinct ARs\n (3:4 \/ 4:3 \/ 1:1 \/ 2:3)\n [T] Sparse text - max-w-md (28rem) only, no paragraphs\n [O] Overlap - negative margins on alternating items\n [W] Whitespace - 96-200px section padding\n ============================================================================\n--><\/p>\n<p><!-- Tailwind Play CDN : self-contained skeleton render --><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', 'md': '28rem' },\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-04 About v1.0.0 - Asymmetrical art-gallery layout\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 (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; 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. [G] Asymmetrical art grid (12-col CSS grid + overlap)\n ==================================================================== *\/\n .about-hero {\n padding: 200px 24px 128px;\n max-width: 1600px;\n margin: 0 auto;\n }\n .about-hero__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 32px;\n }\n .about-hero__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(3.5rem, 10vw, 8rem);\n font-weight: 500; line-height: 0.95;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.025em;\n max-width: 14ch;\n }\n .about-hero__caption {\n \/* [T] Sparse text : max-w-md (28rem), 2-3 lines only *\/\n max-width: 28rem;\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: 48px 0 0;\n }<\/p>\n<p> \/* Asymmetric grid (CEO \u827a\u672f\u6392\u7248\u65b0\u89c4) *\/\n .gallery {\n padding: 0 24px 160px;\n max-width: 1600px;\n margin: 0 auto;\n }\n .gallery__grid {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-auto-rows: auto;\n gap: 24px;\n }\n .gallery__item { position: relative; min-width: 0; }\n .gallery__media {\n width: 100%; overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .gallery__media img,\n .gallery__media video {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }<\/p>\n<p> \/* Aspect ratio tokens (5 distinct ARs) *\/\n .ar-21x9 { aspect-ratio: 21 \/ 9; }\n .ar-16x9 { aspect-ratio: 16 \/ 9; }\n .ar-3x4 { aspect-ratio: 3 \/ 4; }\n .ar-4x3 { aspect-ratio: 4 \/ 3; }\n .ar-1x1 { aspect-ratio: 1 \/ 1; }\n .ar-2x3 { aspect-ratio: 2 \/ 3; }<\/p>\n<p> \/* Asymmetric placements + [O] overlap (negative margin-top) *\/\n .gallery__item--1 { grid-column: 1 \/ 13; grid-row: 1; } \/* full-width 21:9 video *\/\n .gallery__item--2 { grid-column: 1 \/ 6; grid-row: 2; margin-top: 64px; } \/* 3:4 offset down *\/\n .gallery__item--3 { grid-column: 7 \/ 13; grid-row: 2; margin-top: -32px; } \/* 4:3 overlap up *\/\n .gallery__item--4 { grid-column: 1 \/ 5; grid-row: 3; margin-top: 48px; } \/* 1:1 small *\/\n .gallery__item--5 { grid-column: 5 \/ 13; grid-row: 3; margin-top: -64px; } \/* 16:9 video overlap up *\/\n .gallery__item--6 { grid-column: 4 \/ 9; grid-row: 4; margin-top: 96px; } \/* 2:3 tall portrait *\/\n .gallery__item--7 { grid-column: 9 \/ 13; grid-row: 4; margin-top: -48px; } \/* 1:1 right anchor *\/<\/p>\n<p> \/* Asymmetric text blocks (3 sparse placements) *\/\n .gallery__text {\n max-width: 28rem; \/* [T] hard cap *\/\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 }\n .gallery__text--eyebrow {\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n margin: 0 0 16px;\n }\n .gallery__text h3 {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(1.75rem, 2.5vw, 2.25rem);\n font-weight: 500; line-height: 1.1;\n margin: 0 0 16px;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .gallery__text p {\n margin: 0 0 12px;\n }\n .gallery__text--lg { max-width: 36rem; }\n .gallery__text--right { margin-left: auto; text-align: left; }<\/p>\n<p> \/* text position variants for asymmetric spread *\/\n .gallery__text--pos-1 { grid-column: 1 \/ 5; grid-row: 5; margin-top: 80px; }\n .gallery__text--pos-2 { grid-column: 6 \/ 10; grid-row: 5; margin-top: -32px; }\n .gallery__text--pos-3 { grid-column: 1 \/ 6; grid-row: 6; margin-top: 64px; }<\/p>\n<p> \/* ====================================================================\n 3. 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><!-- A11Y skiplink --><br \/>\n<a href=\"#main\" class=\"skiplink\">Skip to main content<\/a><\/p>\n<p><!-- 1. Global Sticky Header (PHASE 3.5 chassis, reused) --><\/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-linecap=\"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> <!-- ============================================================\n 2. Hero (sparse text \u00b7 Jingdezhen artisan narrative \u00b7 \u53cc\u8bed)\n ============================================================ --><\/p>\n<section class=\"about-hero\">\n<p class=\"about-hero__eyebrow\">\u666f\u5fb7\u9547 \u00b7 \u72ec\u7acb\u5de5\u4f5c\u5ba4 \/ Jingdezhen \u00b7 Independent studio<\/p>\n<h1 class=\"about-hero__title\">\u571f\u3001\u706b\u3001\u4eba,\u4e00\u95f4\u5c0f\u5de5\u4f5c\u5ba4<\/h1>\n<p class=\"about-hero__caption\">Earth, fire, and a pair of hands — a small workshop between two rivers in Jingdezhen, where we make one piece at a time, the old way.<\/p>\n<\/section>\n<p> <!-- ============================================================\n 3. [G] Asymmetrical art grid (video + image + sparse text)\n Layout: 12-col CSS grid, 7 items, 4 image ARs + 2 video ARs + 3 text blocks\n ============================================================ --><\/p>\n<section class=\"gallery\" aria-label=\"Asymmetrical art gallery\">\n<div class=\"gallery__grid\">\n<p> <!-- Item 1 : [V] Full-width 21:9 video (top) --><\/p>\n<div class=\"gallery__item gallery__item--1\">\n<div class=\"gallery__media ar-21x9\">\n <video autoplay muted loop playsinline poster=\"https:\/\/picsum.photos\/seed\/ru-ware-celadon-kiln\/1920\/800.jpg\"><source src=\"{{hero.video.url}}\" data-placeholder=\"about-video-kiln.mp4\" type=\"video\/mp4\"><\/video>\n <\/div>\n<\/p><\/div>\n<p> <!-- Item 2 : [I] 3:4 portrait image (offset down 64px) --><\/p>\n<div class=\"gallery__item gallery__item--2\">\n<div class=\"gallery__media ar-3x4\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/ru-celadon-glaze\/600\/800.jpg\" alt=\"\u6c5d\u7a91\u5929\u9752\u91c9 \/ Ru ware celadon glaze\" loading=\"lazy\">\n <\/div>\n<\/p><\/div>\n<p> <!-- Item 3 : [I] 4:3 landscape image (overlap up -32px) --><\/p>\n<div class=\"gallery__item gallery__item--3\">\n<div class=\"gallery__media ar-4x3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/jingdezhen-kiln\/800\/600.jpg\" alt=\"\u666f\u5fb7\u9547\u7a91\u53e3 \/ Jingdezhen kiln landscape\" loading=\"lazy\">\n <\/div>\n<\/p><\/div>\n<p> <!-- Item 4 : [I] 1:1 square image (offset down 48px) --><\/p>\n<div class=\"gallery__item gallery__item--4\">\n<div class=\"gallery__media ar-1x1\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/qinghua-blue-white\/600\/600.jpg\" alt=\"\u4f20\u7edf\u624b\u7ed8\u9752\u82b1 \/ Traditional hand-painted blue-and-white\" loading=\"lazy\">\n <\/div>\n<\/p><\/div>\n<p> <!-- Item 5 : [V] 16:9 half-width video (overlap up -64px) --><\/p>\n<div class=\"gallery__item gallery__item--5\">\n<div class=\"gallery__media ar-16x9\">\n <video autoplay muted loop playsinline poster=\"https:\/\/picsum.photos\/seed\/scholar-desk-hands\/1600\/900.jpg\"><source src=\"{{hero.video.url}}\" data-placeholder=\"about-video-hands.mp4\" type=\"video\/mp4\"><\/video>\n <\/div>\n<\/p><\/div>\n<p> <!-- Item 6 : [I] 2:3 tall portrait image (offset down 96px) --><\/p>\n<div class=\"gallery__item gallery__item--6\">\n<div class=\"gallery__media ar-2x3\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/master-craftsman-portrait\/600\/900.jpg\" alt=\"\u5320\u4eba\u8096\u50cf \/ Master craftsman portrait\" loading=\"lazy\">\n <\/div>\n<\/p><\/div>\n<p> <!-- Item 7 : [I] 1:1 right-anchored image (overlap up -48px) --><\/p>\n<div class=\"gallery__item gallery__item--7\">\n<div class=\"gallery__media ar-1x1\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/scholar-table-object\/600\/600.jpg\" alt=\"\u6587\u4eba\u6848\u5934\u96c5\u73a9 \/ Scholar's table object\" loading=\"lazy\">\n <\/div>\n<\/p><\/div>\n<p> <!-- [T] Sparse text - position 1 (offset down 80px) --><\/p>\n<div class=\"gallery__text gallery__text--pos-1\">\n<p class=\"gallery__text--eyebrow\">\u54f2\u5b66 \/ Philosophy · I<\/p>\n<h3>\u6162\u7684\u5bf9\u8bdd \/ The slow conversation<\/h3>\n<p>\u571f\u3001\u91c9\u3001\u706b,\u4e09\u79cd\u58f0\u97f3\u3002\u6211\u4eec\u53ea\u542c\u3002— Earth, glaze, fire. Three voices. We only listen.<\/p>\n<\/p><\/div>\n<p> <!-- [T] Sparse text - position 2 (overlap up -32px) --><\/p>\n<div class=\"gallery__text gallery__text--pos-2\">\n<p class=\"gallery__text--eyebrow\">\u65b9\u6cd5 \/ Method · II<\/p>\n<h3>\u624b,\u4e0d\u662f\u673a \/ Hands, not machines<\/h3>\n<p>\u6bcf\u4e00\u4ef6,\u90fd\u7531\u4e00\u4f4d\u5320\u4eba\u72ec\u7acb\u5b8c\u6210\u3002\u65e0\u6279\u4ea7\u3002— Each piece is shaped, glazed, and signed by one maker. No batch.<\/p>\n<\/p><\/div>\n<p> <!-- [T] Sparse text - position 3 (offset down 64px) --><\/p>\n<div class=\"gallery__text gallery__text--pos-3\">\n<p class=\"gallery__text--eyebrow\">\u627f\u8bfa \/ Promise · III<\/p>\n<h3>\u6eaf\u6e90\u7559\u6863 \/ Provenance on file<\/h3>\n<p>\u6bcf\u6b21\u4ea4\u4ed8,\u9644\u5320\u4eba\u624b\u8bb0\u3001\u7a91\u706b\u6863\u6848\u3001\u5341\u56db\u65e5\u9274\u771f\u7a97\u53e3\u3002— Every acquisition is delivered with a maker’s note, a kiln record, and a 14-day authenticity review.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p><\/main><\/p>\n<p><!-- ====================================================================\n Lumina Liquid Glass footer (P-01 v0.4.1.6 100% \u590d\u7528 verbatim)\n ==================================================================== --><\/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;\">\u666f\u5fb7\u9547 \u00b7 \u72ec\u7acb\u5de5\u4f5c\u5ba4 \/ Jingdezhen \u00b7 Independent studio. — \u5168\u624b\u5de5 \u00b7 \u53e4\u6cd5\u5236\u4f5c \/ All handmade \u00b7 Traditional method.<\/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);\">\u85cf\u54c1 \/ 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;\">\u5f53\u4ee3\u6c5d\u7a91 \/ Contemporary 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;\">\u666f\u5fb7\u9547\u9752\u82b1 \/ Jingdezhen blue-and-white<\/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;\">\u79c1\u4eba\u59d4\u7ea6 \/ Private 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=\"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 · \u666f\u5fb7\u9547 \u00b7 \u72ec\u7acb\u5de5\u4f5c\u5ba4 \/ Jingdezhen \u00b7 Independent studio<\/p>\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">\u9690\u79c1 \/ Privacy · \u6761\u6b3e \/ Terms · \u8054\u7cfb \/ Contact<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer>\n<p><script>\n \/* ==========================================================================\n P-04 About JS v1.0.0\n ==========================================================================\n Modules (Phase 3.5 chassis carry-over):\n 1. Global Sticky Header (scroll direction + lang dropdown)\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 }\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-04 About \u00b7 v1.0.0 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e \u666f\u5fb7\u9547 \u00b7 \u72ec\u7acb\u5de5\u4f5c\u5ba4 \/ Jingdezhen \u00b7 Independent studio \u571f\u3001\u706b\u3001\u4eba,\u4e00\u95f4\u5c0f\u5de5\u4f5c\u5ba4 Earth, fire, and a pair of hands — a small workshop between two rivers in Jingdezhen, where we make one piece at a time, the old way. \u54f2\u5b66 \/ Philosophy […]<\/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-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/14","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=14"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}