LLCCRAFT \u00b7 P-03 Journal \u00b7 v0.6.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-03 Journal page skeleton. v0.6.0. No sidebar. Full-bleed grid + single-column detail. Inherits P-01 v0.4.1.5 + P-02 v0.5.0.\"><\/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', 'prose': '65ch' },\n }\n }\n }\n<\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-03 Journal v0.6.0\n ==========================================================================\n Constitution carry-overs (P-01 + P-02):\n - Helvetica Regular @font-face (5 formats, ACTIVE)\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 - \u5546\u4e1a\u62a4\u57ce\u6cb3 : NO countdown \/ NO red strikethrough \/ NO sale\n P-03 new:\n - NO sidebar - list full-bleed 1+2 grid\n - Detail page - 65ch single column, line-height 1.8\n - Sticky horizontal filter bar at top\n - 21:9 \/ 16:9 cinematic covers\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.3 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. Page header (NO sidebar - full width)\n ==================================================================== *\/\n .journal-header {\n padding: 160px 24px 64px; \/* top = nav clearance (80) + air *\/\n max-width: 1320px;\n margin: 0 auto;\n text-align: center;\n }\n .journal-header__eyebrow {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); margin: 0 0 16px;\n }\n .journal-header__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2.5rem, 5vw, 4.5rem);\n font-weight: 500; line-height: 1.05;\n margin: 0 0 20px; color: oklch(0.20 0.010 28);\n letter-spacing: -0.015em;\n }\n .journal-header__subtitle {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: clamp(1.125rem, 1.5vw, 1.375rem);\n color: oklch(0.55 0.008 28);\n margin: 0 auto; max-width: 56ch;\n }<\/p>\n<p> \/* ====================================================================\n 3. [F] Sticky horizontal filter bar (NOT sidebar)\n ==================================================================== *\/\n .filter-bar {\n position: sticky;\n top: 80px; \/* below nav (nav is 80px tall) *\/\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-top: 1px solid oklch(0.88 0.005 28);\n border-bottom: 1px solid oklch(0.88 0.005 28);\n margin-top: 24px;\n }\n .filter-bar__inner {\n max-width: 1320px;\n margin: 0 auto;\n padding: 16px 24px;\n display: flex; align-items: center; gap: 16px;\n overflow-x: auto; \/* horizontal scroll on narrow *\/\n }\n .filter-bar__label {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); font-weight: 500;\n flex-shrink: 0;\n }\n .filter-bar__options {\n display: flex; gap: 8px;\n flex-shrink: 0;\n }\n .filter-pill {\n display: inline-flex; align-items: center;\n padding: 8px 16px;\n background: transparent;\n color: oklch(0.20 0.010 28);\n border: 1px solid oklch(0.20 0.010 28 \/ 0.3);\n border-radius: 999px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 13px; font-weight: 500;\n cursor: pointer;\n transition: background 200ms ease, color 200ms ease, border-color 200ms ease;\n white-space: nowrap;\n }\n .filter-pill:hover {\n background: oklch(0.20 0.010 28 \/ 0.06);\n border-color: oklch(0.20 0.010 28 \/ 0.7);\n }\n .filter-pill.is-active {\n background: oklch(0.20 0.010 28);\n color: oklch(0.97 0.012 90);\n border-color: oklch(0.20 0.010 28);\n }<\/p>\n<p> \/* ====================================================================\n 4. [L] Article list - full-bleed 1+2 asymmetric grid\n ==================================================================== *\/\n .journal-list {\n max-width: 1320px;\n margin: 64px auto 96px;\n padding: 0 24px;\n display: flex; flex-direction: column; gap: 80px;\n }<\/p>\n<p> \/* Featured : 21:9 cover, full width, title beside or below *\/\n .article-featured {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) 1fr;\n gap: 48px;\n align-items: center;\n }\n @media (max-width: 900px) {\n .article-featured {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n }\n .article-featured__cover {\n width: 100%;\n aspect-ratio: 21 \/ 9;\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .article-featured__cover img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .article-featured:hover img { transform: scale(1.02); }\n .article-featured__body {\n display: flex; flex-direction: column; gap: 16px;\n }\n .article-featured__category {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); font-weight: 500;\n }\n .article-featured__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(1.75rem, 2.5vw, 2.5rem);\n font-weight: 500; line-height: 1.15;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.01em;\n }\n .article-featured__excerpt {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 17px; line-height: 1.6;\n color: oklch(0.42 0.012 28);\n margin: 0;\n }\n .article-featured__meta {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.02em;\n color: oklch(0.55 0.008 28);\n display: flex; gap: 12px; align-items: center;\n }\n .article-featured__meta-dot {\n width: 3px; height: 3px;\n border-radius: 50%;\n background: oklch(0.55 0.008 28);\n }\n .article-featured__read {\n display: inline-block;\n margin-top: 8px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.20 0.010 28);\n text-decoration: none;\n border-bottom: 1px solid oklch(0.20 0.010 28);\n padding-bottom: 2px;\n align-self: flex-start;\n }\n .article-featured__read:hover {\n color: oklch(0.42 0.165 27);\n border-color: oklch(0.42 0.165 27);\n }<\/p>\n<p> \/* 1+2 grid for remaining articles *\/\n .article-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 48px 32px;\n }\n @media (max-width: 700px) {\n .article-grid { grid-template-columns: 1fr; }\n }\n .article-card {\n display: flex; flex-direction: column; gap: 16px;\n cursor: pointer;\n }\n .article-card__cover {\n width: 100%;\n aspect-ratio: 16 \/ 9;\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .article-card__cover img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .article-card:hover .article-card__cover img { transform: scale(1.02); }\n .article-card__category {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); font-weight: 500;\n }\n .article-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500; line-height: 1.25;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .article-card__meta {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; color: oklch(0.55 0.008 28);\n margin-top: auto;\n }<\/p>\n<p> \/* ====================================================================\n 5. [D] Article detail - single-column centered, 65ch, 1.8 leading\n ==================================================================== *\/\n .article-detail {\n max-width: 1320px;\n margin: 0 auto;\n padding: 0 24px 96px;\n }\n .article-detail__cover {\n width: 100%;\n aspect-ratio: 21 \/ 9;\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n margin-bottom: 64px;\n }\n .article-detail__cover img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n }\n .article-detail__inner {\n max-width: 65ch; \/* \u9ec4\u91d1\u9605\u8bfb\u5bbd\u5ea6,Impeccable \u5f3a\u5236 *\/\n margin: 0 auto;\n }\n .article-detail__meta-row {\n display: flex; gap: 12px; align-items: center;\n margin-bottom: 24px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n }\n .article-detail__category { color: oklch(0.42 0.165 27); font-weight: 500; }\n .article-detail__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: oklch(0.55 0.008 28); }\n .article-detail__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 500; line-height: 1.15;\n margin: 0 0 16px; color: oklch(0.20 0.010 28);\n letter-spacing: -0.015em;\n }\n .article-detail__subtitle {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: clamp(1.125rem, 1.5vw, 1.375rem);\n color: oklch(0.55 0.008 28);\n margin: 0 0 48px; line-height: 1.5;\n }\n .article-detail__byline {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 13px; color: oklch(0.55 0.008 28);\n margin: 0 0 48px;\n padding-bottom: 32px;\n border-bottom: 1px solid oklch(0.88 0.005 28);\n display: flex; gap: 8px; align-items: center;\n }\n .article-detail__author { color: oklch(0.20 0.010 28); font-weight: 500; }<\/p>\n<p> \/* Body text - \u9ec4\u91d1\u9605\u8bfb\u4f53\u9a8c *\/\n .article-body {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 18px; line-height: 1.8;\n color: oklch(0.20 0.010 28);\n }\n .article-body p { margin: 0 0 1.5em; }\n .article-body p:last-child { margin-bottom: 0; }\n .article-body p:first-of-type::first-letter {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 4em; line-height: 0.85;\n float: left; margin: 0.05em 0.1em 0 0;\n color: oklch(0.20 0.010 28);\n font-weight: 500;\n }<\/p>\n<p> .article-body h2 {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 28px; font-weight: 500;\n line-height: 1.3; margin: 2em 0 0.5em;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.01em;\n }\n .article-body blockquote {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 22px; line-height: 1.5;\n color: oklch(0.20 0.010 28);\n margin: 2em 0;\n padding-left: 24px;\n border-left: 2px solid oklch(0.42 0.165 27);\n }\n .article-body blockquote p { margin: 0; }<\/p>\n<p> .article-body figure { margin: 2em 0; }\n .article-body figure img {\n width: 100%; height: auto;\n aspect-ratio: 16 \/ 9; object-fit: cover;\n background: oklch(0.93 0.005 28);\n }\n .article-body figcaption {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-style: italic;\n font-size: 13px; color: oklch(0.55 0.008 28);\n margin-top: 12px; text-align: center;\n letter-spacing: 0.02em;\n }<\/p>\n<p> .article-detail__end {\n margin-top: 64px;\n padding-top: 32px;\n border-top: 1px solid oklch(0.88 0.005 28);\n display: flex; justify-content: space-between; align-items: center;\n flex-wrap: wrap; gap: 16px;\n }\n .article-detail__tags {\n display: flex; gap: 8px; flex-wrap: wrap;\n }\n .article-detail__tag {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n padding: 4px 10px;\n border: 1px solid oklch(0.88 0.005 28);\n border-radius: 999px;\n }\n .article-detail__back {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.20 0.010 28);\n text-decoration: none;\n border-bottom: 1px solid oklch(0.20 0.010 28);\n padding-bottom: 2px;\n }\n .article-detail__back:hover {\n color: oklch(0.42 0.165 27);\n border-color: oklch(0.42 0.165 27);\n }<\/p>\n<p> \/* Section divider between list and detail *\/\n .journal-divider {\n max-width: 1320px;\n margin: 96px auto 64px;\n padding: 0 24px;\n text-align: center;\n }\n .journal-divider__line {\n height: 1px;\n background: oklch(0.88 0.005 28);\n margin: 0 auto;\n max-width: 120px;\n }\n .journal-divider__label {\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); margin: 16px 0 0;\n }<\/p>\n<p> \/* ====================================================================\n 6. 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<p> <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=\"journal-header\">\n<p class=\"journal-header__eyebrow\">The LLCCRAFT Journal<\/p>\n<h1 class=\"journal-header__title\">\u6162\u4ef6\u672d\u8bb0 \/ Lorem Ipsum on porcelain craft<\/h1>\n<p class=\"journal-header__subtitle\">\u5320\u4eba\u3001\u7a91\u706b\u3001\u571f\u7684\u672d\u8bb0\u3002>Dispatches from ateliers, kilns, and the slow science of fired earth<mdash; Dispatches from ateliers, kilns, and the slow science of fired earth.<\/p>\n<\/header>\n<p> <\/p>\n<div class=\"filter-bar\" role=\"navigation\" aria-label=\"Journal categories\">\n<div class=\"filter-bar__inner\">\n <span class=\"filter-bar__label\">Filter<\/span><\/p>\n<div class=\"filter-bar__options\" role=\"tablist\">\n <button class=\"filter-pill is-active\" role=\"tab\" aria-selected=\"true\" data-filter=\"all\">All<\/button><br \/>\n <button class=\"filter-pill\" role=\"tab\" aria-selected=\"false\" data-filter=\"science\">Lorem Ipsum · Science<\/button><br \/>\n <button class=\"filter-pill\" role=\"tab\" aria-selected=\"false\" data-filter=\"appreciation\">Lorem Ipsum · Appreciation<\/button><br \/>\n <button class=\"filter-pill\" role=\"tab\" aria-selected=\"false\" data-filter=\"myth\">Lorem Ipsum · Myth<\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<section class=\"journal-list\" aria-label=\"Article list\">\n<p> <\/p>\n<article class=\"article-featured\">\n <a href=\"#article-1\" class=\"article-featured__cover\" aria-label=\"Featured article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1600\/686?random=30\" alt=\"Lorem ipsum featured article cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<div class=\"article-featured__body\">\n<p class=\"article-featured__category\">Lorem Ipsum · Science<\/p>\n<h2 class=\"article-featured__title\"><a href=\"#article-1\" style=\"color: inherit; text-decoration: none;\">The chemistry of sky-blue: how reduction firing turns earth into Ru<\/a><\/h2>\n<p class=\"article-featured__excerpt\">A slow walk through the kiln-side science of iron oxidation, the dance of carbon and oxygen, and the moment a piece of fired earth catches the colour of a clear morning.<\/p>\n<div class=\"article-featured__meta\">\n <span>8 min read<\/span><br \/>\n <span class=\"article-featured__meta-dot\"><\/span><br \/>\n <span>14 March 2026<\/span><br \/>\n <span class=\"article-featured__meta-dot\"><\/span><br \/>\n <span>By the LLCCRAFT editorial desk<\/span>\n <\/div>\n<p> <a href=\"#article-1\" class=\"article-featured__read\">Read essay<\/a>\n <\/div>\n<\/article>\n<p> <\/p>\n<div class=\"article-grid\">\n<article class=\"article-card\" id=\"article-2\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-1\/800\/450.jpg\" alt=\"Lorem ipsum article 2 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Appreciation<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">Reading a bowl: six small signs that mark a contemporary master<\/a><\/h3>\n<p class=\"article-card__meta\">6 min read · 02 March 2026<\/p>\n<\/article>\n<article class=\"article-card\" id=\"article-3\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-2\/800\/450.jpg\" alt=\"Lorem ipsum article 3 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Myth<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">The bowl that caught a meteor: a Tenmokus origin story retold<\/a><\/h3>\n<p class=\"article-card__meta\">5 min read · 21 February 2026<\/p>\n<\/article>\n<article class=\"article-card\" id=\"article-4\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-3\/800\/450.jpg\" alt=\"Lorem ipsum article 4 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Science<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">Why Ru ware cracks at 3%: the secret number of the celadon glaze<\/a><\/h3>\n<p class=\"article-card__meta\">7 min read · 11 February 2026<\/p>\n<\/article>\n<article class=\"article-card\" id=\"article-5\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-4\/800\/450.jpg\" alt=\"Lorem ipsum article 5 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Appreciation<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">The ten-thousand-bowl problem: a small manifesto on slow collecting<\/a><\/h3>\n<p class=\"article-card__meta\">4 min read · 30 January 2026<\/p>\n<\/article><\/div>\n<\/section>\n<p> <\/p>\n<div class=\"journal-divider\" aria-hidden=\"true\">\n<div class=\"journal-divider__line\"><\/div>\n<p class=\"journal-divider__label\">Featured Essay<\/p>\n<\/p><\/div>\n<p> <\/p>\n<article class=\"article-detail\" id=\"article-1\">\n<div class=\"article-detail__cover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1600\/686?random=30\" alt=\"Lorem ipsum article cover\" loading=\"lazy\">\n <\/div>\n<div class=\"article-detail__inner\">\n<div class=\"article-detail__meta-row\">\n <span class=\"article-detail__category\">Lorem Ipsum · Science<\/span><br \/>\n <span class=\"article-detail__meta-dot\"><\/span><br \/>\n <span>14 March 2026<\/span><br \/>\n <span class=\"article-detail__meta-dot\"><\/span><br \/>\n <span>8 min read<\/span>\n <\/div>\n<h1 class=\"article-detail__title\">The chemistry of sky-blue: how reduction firing turns earth into Ru<\/h1>\n<p class=\"article-detail__subtitle\">A slow walk through the kiln-side science of iron oxidation, the dance of carbon and oxygen, and the moment a piece of fired earth catches the colour of a clear morning.<\/p>\n<div class=\"article-detail__byline\">\n <span>By<\/span><br \/>\n <span class=\"article-detail__author\">the LLCCRAFT editorial desk<\/span>\n <\/div>\n<div class=\"article-body\">\n<p>The colour of Ru ware is famously — and infuriatingly — impossible to photograph. What looks like a soft sky-blue on a still morning shifts toward grey-green in a northern light, and toward almost nothing under the photographer’s flash. The reason is not mood or pigment. The reason is iron.<\/p>\n<p>A Ru glaze carries, by weight, between one and three per cent of iron oxide. That tiny fraction is the entire colour budget of the piece. The rest is silence: feldspar, quartz, a little clay, and a small dose of bone ash. The glaze is a near-colourless liquid before it enters the kiln.<\/p>\n<h2>The reduction moment<\/h2>\n<p>What happens inside the kiln is one of the most studied and least reproducible reactions in ceramics. At roughly 1,250 degrees Celsius, the kiln atmosphere is deliberately starved of oxygen. The burner is throttled. Smoke curls out. The flame turns from a clean blue to a soft, sooty orange.<\/p>\n<p>In that starved atmosphere, the iron in the glaze is forced to give up some of its oxygen. The compound that forms is not the bright orange of common rust; it is a reduced form — a quieter cousin, magnetite — that scatters light in a particular way. To a human eye, that way looks like the colour of a clear morning after rain.<\/p>\n<blockquote>\n<p>The kiln is not a tool that produces sky-blue. The kiln is a question, asked in fire, that the iron in the glaze is sometimes willing to answer.<\/p>\n<\/blockquote>\n<figure>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-kiln-hero\/1200\/675.jpg\" alt=\"Lorem ipsum kiln cross-section illustration\" loading=\"lazy\"><figcaption>Kiln cross-section during the reduction phase. The flame is starved of oxygen, the iron in the glaze gives up some of its own, and a particular chemistry becomes possible.<\/figcaption><\/figure>\n<h2>Why three per cent<\/h2>\n<p>Below one per cent, the glaze fires to a clean ivory with no colour. Above three per cent, the surface becomes muddy, then almost black, then metallically shiny in ways that betray the iron rather than refining it. The window between one and three is the Ru window. The window is also surprisingly narrow on the way up: a single per cent more iron and the bowl is no longer a Ru bowl. It is a black-burnished iron-stone.<\/p>\n<p>This is why a contemporary master can fire a kiln for ten years and still set aside a third of the pieces that come out. The colour is not painted on. It is the answer to a question that is asked in fire, in a piece of earth, every single time.<\/p>\n<h2>What the buyer is buying<\/h2>\n<p>When a contemporary Ru bowl sits on a low wooden table in a Belgravia flat, the colour it holds is the residue of a particular chain of decisions: which iron, which particle size, which glaze recipe, which kiln, which stoke, which minute of which day. There is no batch. There is no repeat.<\/p>\n<p>This is also why provenance is not paperwork in this field. Provenance is the chain of decisions. To own a Ru bowl is to inherit a small piece of one particular conversation between a maker and a kiln.<\/p>\n<p>And on a still morning, the bowl will catch the light, and the colour will look, briefly, like the sky it was named after.<\/p>\n<\/p><\/div>\n<footer class=\"article-detail__end\">\n<div class=\"article-detail__tags\">\n <span class=\"article-detail__tag\">Ru ware<\/span><br \/>\n <span class=\"article-detail__tag\">Reduction firing<\/span><br \/>\n <span class=\"article-detail__tag\">Iron oxide<\/span><br \/>\n <span class=\"article-detail__tag\">Celadon<\/span>\n <\/div>\n<p> <a href=\"#main\" class=\"article-detail__back\">Back to journal<\/a><br \/>\n <\/footer>\n<\/p><\/div>\n<\/article>\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=\"p01-home.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contemporary Ru ware<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p01-home.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Jingdezhen blue-and-white<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Reserved & Commission<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Atelier<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Liu<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Chen<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Provenance<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Acquisition<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"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=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contact<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"max-w-wide mx-auto\" style=\"margin-top: 64px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid oklch(0.20 0.010 28 \/ 0.1);\">\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">© 2026 LLCCRAFT · Lorem ipsum<\/p>\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">Privacy · Terms · Contact<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer>\n<p><script>\n \/* ==========================================================================\n P-03 Journal JS v0.6.0\n ==========================================================================\n Modules:\n 1. Sticky nav scroll\n 2. Filter pill tab-switch (skeleton: visual only, no real filter)\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 })();<\/p>\n<p> (function () {\n \/* 2. Filter pill tab-switch (skeleton visual) *\/\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-03 Journal \u00b7 v0.6.0 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e The LLCCRAFT Journal \u6162\u4ef6\u672d\u8bb0 \/ Lorem Ipsum on porcelain craft \u5320\u4eba\u3001\u7a91\u706b\u3001\u571f\u7684\u672d\u8bb0\u3002>Dispatches from ateliers, kilns, and the slow science of fired earth<\/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-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/13","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=13"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13,"date":"2026-07-08T01:56:57","date_gmt":"2026-07-08T08:56:57","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=13"},"modified":"2026-07-08T01:56:57","modified_gmt":"2026-07-08T08:56:57","slug":"journal","status":"publish","type":"page","link":"https:\/\/llccraft.com\/?page_id=13","title":{"rendered":"Journal \u00b7 \u5de5\u574a\u7eaa\u4e8b"},"content":{"rendered":"

\n
\n
\n
\n
\n
\nLLCCRAFT \u00b7 P-03 Journal \u00b7 v0.6.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-03 Journal page skeleton. v0.6.0. No sidebar. Full-bleed grid + single-column detail. Inherits P-01 v0.4.1.5 + P-02 v0.5.0.\"><\/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', 'prose': '65ch' },\n }\n }\n }\n<\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-03 Journal v0.6.0\n ==========================================================================\n Constitution carry-overs (P-01 + P-02):\n - Helvetica Regular @font-face (5 formats, ACTIVE)\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 - \u5546\u4e1a\u62a4\u57ce\u6cb3 : NO countdown \/ NO red strikethrough \/ NO sale\n P-03 new:\n - NO sidebar - list full-bleed 1+2 grid\n - Detail page - 65ch single column, line-height 1.8\n - Sticky horizontal filter bar at top\n - 21:9 \/ 16:9 cinematic covers\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.3 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. Page header (NO sidebar - full width)\n ==================================================================== *\/\n .journal-header {\n padding: 160px 24px 64px; \/* top = nav clearance (80) + air *\/\n max-width: 1320px;\n margin: 0 auto;\n text-align: center;\n }\n .journal-header__eyebrow {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); margin: 0 0 16px;\n }\n .journal-header__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2.5rem, 5vw, 4.5rem);\n font-weight: 500; line-height: 1.05;\n margin: 0 0 20px; color: oklch(0.20 0.010 28);\n letter-spacing: -0.015em;\n }\n .journal-header__subtitle {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: clamp(1.125rem, 1.5vw, 1.375rem);\n color: oklch(0.55 0.008 28);\n margin: 0 auto; max-width: 56ch;\n }<\/p>\n<p> \/* ====================================================================\n 3. [F] Sticky horizontal filter bar (NOT sidebar)\n ==================================================================== *\/\n .filter-bar {\n position: sticky;\n top: 80px; \/* below nav (nav is 80px tall) *\/\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-top: 1px solid oklch(0.88 0.005 28);\n border-bottom: 1px solid oklch(0.88 0.005 28);\n margin-top: 24px;\n }\n .filter-bar__inner {\n max-width: 1320px;\n margin: 0 auto;\n padding: 16px 24px;\n display: flex; align-items: center; gap: 16px;\n overflow-x: auto; \/* horizontal scroll on narrow *\/\n }\n .filter-bar__label {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); font-weight: 500;\n flex-shrink: 0;\n }\n .filter-bar__options {\n display: flex; gap: 8px;\n flex-shrink: 0;\n }\n .filter-pill {\n display: inline-flex; align-items: center;\n padding: 8px 16px;\n background: transparent;\n color: oklch(0.20 0.010 28);\n border: 1px solid oklch(0.20 0.010 28 \/ 0.3);\n border-radius: 999px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 13px; font-weight: 500;\n cursor: pointer;\n transition: background 200ms ease, color 200ms ease, border-color 200ms ease;\n white-space: nowrap;\n }\n .filter-pill:hover {\n background: oklch(0.20 0.010 28 \/ 0.06);\n border-color: oklch(0.20 0.010 28 \/ 0.7);\n }\n .filter-pill.is-active {\n background: oklch(0.20 0.010 28);\n color: oklch(0.97 0.012 90);\n border-color: oklch(0.20 0.010 28);\n }<\/p>\n<p> \/* ====================================================================\n 4. [L] Article list - full-bleed 1+2 asymmetric grid\n ==================================================================== *\/\n .journal-list {\n max-width: 1320px;\n margin: 64px auto 96px;\n padding: 0 24px;\n display: flex; flex-direction: column; gap: 80px;\n }<\/p>\n<p> \/* Featured : 21:9 cover, full width, title beside or below *\/\n .article-featured {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) 1fr;\n gap: 48px;\n align-items: center;\n }\n @media (max-width: 900px) {\n .article-featured {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n }\n .article-featured__cover {\n width: 100%;\n aspect-ratio: 21 \/ 9;\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .article-featured__cover img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .article-featured:hover img { transform: scale(1.02); }\n .article-featured__body {\n display: flex; flex-direction: column; gap: 16px;\n }\n .article-featured__category {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); font-weight: 500;\n }\n .article-featured__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(1.75rem, 2.5vw, 2.5rem);\n font-weight: 500; line-height: 1.15;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.01em;\n }\n .article-featured__excerpt {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 17px; line-height: 1.6;\n color: oklch(0.42 0.012 28);\n margin: 0;\n }\n .article-featured__meta {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.02em;\n color: oklch(0.55 0.008 28);\n display: flex; gap: 12px; align-items: center;\n }\n .article-featured__meta-dot {\n width: 3px; height: 3px;\n border-radius: 50%;\n background: oklch(0.55 0.008 28);\n }\n .article-featured__read {\n display: inline-block;\n margin-top: 8px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.20 0.010 28);\n text-decoration: none;\n border-bottom: 1px solid oklch(0.20 0.010 28);\n padding-bottom: 2px;\n align-self: flex-start;\n }\n .article-featured__read:hover {\n color: oklch(0.42 0.165 27);\n border-color: oklch(0.42 0.165 27);\n }<\/p>\n<p> \/* 1+2 grid for remaining articles *\/\n .article-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 48px 32px;\n }\n @media (max-width: 700px) {\n .article-grid { grid-template-columns: 1fr; }\n }\n .article-card {\n display: flex; flex-direction: column; gap: 16px;\n cursor: pointer;\n }\n .article-card__cover {\n width: 100%;\n aspect-ratio: 16 \/ 9;\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n }\n .article-card__cover img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n .article-card:hover .article-card__cover img { transform: scale(1.02); }\n .article-card__category {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28); font-weight: 500;\n }\n .article-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500; line-height: 1.25;\n margin: 0; color: oklch(0.20 0.010 28);\n letter-spacing: -0.005em;\n }\n .article-card__meta {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; color: oklch(0.55 0.008 28);\n margin-top: auto;\n }<\/p>\n<p> \/* ====================================================================\n 5. [D] Article detail - single-column centered, 65ch, 1.8 leading\n ==================================================================== *\/\n .article-detail {\n max-width: 1320px;\n margin: 0 auto;\n padding: 0 24px 96px;\n }\n .article-detail__cover {\n width: 100%;\n aspect-ratio: 21 \/ 9;\n overflow: hidden;\n background: oklch(0.93 0.005 28);\n margin-bottom: 64px;\n }\n .article-detail__cover img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n }\n .article-detail__inner {\n max-width: 65ch; \/* \u9ec4\u91d1\u9605\u8bfb\u5bbd\u5ea6,Impeccable \u5f3a\u5236 *\/\n margin: 0 auto;\n }\n .article-detail__meta-row {\n display: flex; gap: 12px; align-items: center;\n margin-bottom: 24px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n }\n .article-detail__category { color: oklch(0.42 0.165 27); font-weight: 500; }\n .article-detail__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: oklch(0.55 0.008 28); }\n .article-detail__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2rem, 3.5vw, 3rem);\n font-weight: 500; line-height: 1.15;\n margin: 0 0 16px; color: oklch(0.20 0.010 28);\n letter-spacing: -0.015em;\n }\n .article-detail__subtitle {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: clamp(1.125rem, 1.5vw, 1.375rem);\n color: oklch(0.55 0.008 28);\n margin: 0 0 48px; line-height: 1.5;\n }\n .article-detail__byline {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 13px; color: oklch(0.55 0.008 28);\n margin: 0 0 48px;\n padding-bottom: 32px;\n border-bottom: 1px solid oklch(0.88 0.005 28);\n display: flex; gap: 8px; align-items: center;\n }\n .article-detail__author { color: oklch(0.20 0.010 28); font-weight: 500; }<\/p>\n<p> \/* Body text - \u9ec4\u91d1\u9605\u8bfb\u4f53\u9a8c *\/\n .article-body {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 18px; line-height: 1.8;\n color: oklch(0.20 0.010 28);\n }\n .article-body p { margin: 0 0 1.5em; }\n .article-body p:last-child { margin-bottom: 0; }\n .article-body p:first-of-type::first-letter {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 4em; line-height: 0.85;\n float: left; margin: 0.05em 0.1em 0 0;\n color: oklch(0.20 0.010 28);\n font-weight: 500;\n }<\/p>\n<p> .article-body h2 {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 28px; font-weight: 500;\n line-height: 1.3; margin: 2em 0 0.5em;\n color: oklch(0.20 0.010 28);\n letter-spacing: -0.01em;\n }\n .article-body blockquote {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 22px; line-height: 1.5;\n color: oklch(0.20 0.010 28);\n margin: 2em 0;\n padding-left: 24px;\n border-left: 2px solid oklch(0.42 0.165 27);\n }\n .article-body blockquote p { margin: 0; }<\/p>\n<p> .article-body figure { margin: 2em 0; }\n .article-body figure img {\n width: 100%; height: auto;\n aspect-ratio: 16 \/ 9; object-fit: cover;\n background: oklch(0.93 0.005 28);\n }\n .article-body figcaption {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-style: italic;\n font-size: 13px; color: oklch(0.55 0.008 28);\n margin-top: 12px; text-align: center;\n letter-spacing: 0.02em;\n }<\/p>\n<p> .article-detail__end {\n margin-top: 64px;\n padding-top: 32px;\n border-top: 1px solid oklch(0.88 0.005 28);\n display: flex; justify-content: space-between; align-items: center;\n flex-wrap: wrap; gap: 16px;\n }\n .article-detail__tags {\n display: flex; gap: 8px; flex-wrap: wrap;\n }\n .article-detail__tag {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.55 0.008 28);\n padding: 4px 10px;\n border: 1px solid oklch(0.88 0.005 28);\n border-radius: 999px;\n }\n .article-detail__back {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n color: oklch(0.20 0.010 28);\n text-decoration: none;\n border-bottom: 1px solid oklch(0.20 0.010 28);\n padding-bottom: 2px;\n }\n .article-detail__back:hover {\n color: oklch(0.42 0.165 27);\n border-color: oklch(0.42 0.165 27);\n }<\/p>\n<p> \/* Section divider between list and detail *\/\n .journal-divider {\n max-width: 1320px;\n margin: 96px auto 64px;\n padding: 0 24px;\n text-align: center;\n }\n .journal-divider__line {\n height: 1px;\n background: oklch(0.88 0.005 28);\n margin: 0 auto;\n max-width: 120px;\n }\n .journal-divider__label {\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); margin: 16px 0 0;\n }<\/p>\n<p> \/* ====================================================================\n 6. 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<p> <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=\"journal-header\">\n<p class=\"journal-header__eyebrow\">The LLCCRAFT Journal<\/p>\n<h1 class=\"journal-header__title\">\u6162\u4ef6\u672d\u8bb0 \/ Lorem Ipsum on porcelain craft<\/h1>\n<p class=\"journal-header__subtitle\">\u5320\u4eba\u3001\u7a91\u706b\u3001\u571f\u7684\u672d\u8bb0\u3002>Dispatches from ateliers, kilns, and the slow science of fired earth<mdash; Dispatches from ateliers, kilns, and the slow science of fired earth.<\/p>\n<\/header>\n<p> <\/p>\n<div class=\"filter-bar\" role=\"navigation\" aria-label=\"Journal categories\">\n<div class=\"filter-bar__inner\">\n <span class=\"filter-bar__label\">Filter<\/span><\/p>\n<div class=\"filter-bar__options\" role=\"tablist\">\n <button class=\"filter-pill is-active\" role=\"tab\" aria-selected=\"true\" data-filter=\"all\">All<\/button><br \/>\n <button class=\"filter-pill\" role=\"tab\" aria-selected=\"false\" data-filter=\"science\">Lorem Ipsum · Science<\/button><br \/>\n <button class=\"filter-pill\" role=\"tab\" aria-selected=\"false\" data-filter=\"appreciation\">Lorem Ipsum · Appreciation<\/button><br \/>\n <button class=\"filter-pill\" role=\"tab\" aria-selected=\"false\" data-filter=\"myth\">Lorem Ipsum · Myth<\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<section class=\"journal-list\" aria-label=\"Article list\">\n<p> <\/p>\n<article class=\"article-featured\">\n <a href=\"#article-1\" class=\"article-featured__cover\" aria-label=\"Featured article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1600\/686?random=30\" alt=\"Lorem ipsum featured article cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<div class=\"article-featured__body\">\n<p class=\"article-featured__category\">Lorem Ipsum · Science<\/p>\n<h2 class=\"article-featured__title\"><a href=\"#article-1\" style=\"color: inherit; text-decoration: none;\">The chemistry of sky-blue: how reduction firing turns earth into Ru<\/a><\/h2>\n<p class=\"article-featured__excerpt\">A slow walk through the kiln-side science of iron oxidation, the dance of carbon and oxygen, and the moment a piece of fired earth catches the colour of a clear morning.<\/p>\n<div class=\"article-featured__meta\">\n <span>8 min read<\/span><br \/>\n <span class=\"article-featured__meta-dot\"><\/span><br \/>\n <span>14 March 2026<\/span><br \/>\n <span class=\"article-featured__meta-dot\"><\/span><br \/>\n <span>By the LLCCRAFT editorial desk<\/span>\n <\/div>\n<p> <a href=\"#article-1\" class=\"article-featured__read\">Read essay<\/a>\n <\/div>\n<\/article>\n<p> <\/p>\n<div class=\"article-grid\">\n<article class=\"article-card\" id=\"article-2\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-1\/800\/450.jpg\" alt=\"Lorem ipsum article 2 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Appreciation<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">Reading a bowl: six small signs that mark a contemporary master<\/a><\/h3>\n<p class=\"article-card__meta\">6 min read · 02 March 2026<\/p>\n<\/article>\n<article class=\"article-card\" id=\"article-3\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-2\/800\/450.jpg\" alt=\"Lorem ipsum article 3 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Myth<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">The bowl that caught a meteor: a Tenmokus origin story retold<\/a><\/h3>\n<p class=\"article-card__meta\">5 min read · 21 February 2026<\/p>\n<\/article>\n<article class=\"article-card\" id=\"article-4\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-3\/800\/450.jpg\" alt=\"Lorem ipsum article 4 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Science<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">Why Ru ware cracks at 3%: the secret number of the celadon glaze<\/a><\/h3>\n<p class=\"article-card__meta\">7 min read · 11 February 2026<\/p>\n<\/article>\n<article class=\"article-card\" id=\"article-5\">\n <a href=\"#\" class=\"article-card__cover\" aria-label=\"Article cover\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-piece-4\/800\/450.jpg\" alt=\"Lorem ipsum article 5 cover\" loading=\"lazy\"><br \/>\n <\/a><\/p>\n<p class=\"article-card__category\">Lorem Ipsum · Appreciation<\/p>\n<h3 class=\"article-card__title\"><a href=\"#\" style=\"color: inherit; text-decoration: none;\">The ten-thousand-bowl problem: a small manifesto on slow collecting<\/a><\/h3>\n<p class=\"article-card__meta\">4 min read · 30 January 2026<\/p>\n<\/article><\/div>\n<\/section>\n<p> <\/p>\n<div class=\"journal-divider\" aria-hidden=\"true\">\n<div class=\"journal-divider__line\"><\/div>\n<p class=\"journal-divider__label\">Featured Essay<\/p>\n<\/p><\/div>\n<p> <\/p>\n<article class=\"article-detail\" id=\"article-1\">\n<div class=\"article-detail__cover\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1600\/686?random=30\" alt=\"Lorem ipsum article cover\" loading=\"lazy\">\n <\/div>\n<div class=\"article-detail__inner\">\n<div class=\"article-detail__meta-row\">\n <span class=\"article-detail__category\">Lorem Ipsum · Science<\/span><br \/>\n <span class=\"article-detail__meta-dot\"><\/span><br \/>\n <span>14 March 2026<\/span><br \/>\n <span class=\"article-detail__meta-dot\"><\/span><br \/>\n <span>8 min read<\/span>\n <\/div>\n<h1 class=\"article-detail__title\">The chemistry of sky-blue: how reduction firing turns earth into Ru<\/h1>\n<p class=\"article-detail__subtitle\">A slow walk through the kiln-side science of iron oxidation, the dance of carbon and oxygen, and the moment a piece of fired earth catches the colour of a clear morning.<\/p>\n<div class=\"article-detail__byline\">\n <span>By<\/span><br \/>\n <span class=\"article-detail__author\">the LLCCRAFT editorial desk<\/span>\n <\/div>\n<div class=\"article-body\">\n<p>The colour of Ru ware is famously — and infuriatingly — impossible to photograph. What looks like a soft sky-blue on a still morning shifts toward grey-green in a northern light, and toward almost nothing under the photographer’s flash. The reason is not mood or pigment. The reason is iron.<\/p>\n<p>A Ru glaze carries, by weight, between one and three per cent of iron oxide. That tiny fraction is the entire colour budget of the piece. The rest is silence: feldspar, quartz, a little clay, and a small dose of bone ash. The glaze is a near-colourless liquid before it enters the kiln.<\/p>\n<h2>The reduction moment<\/h2>\n<p>What happens inside the kiln is one of the most studied and least reproducible reactions in ceramics. At roughly 1,250 degrees Celsius, the kiln atmosphere is deliberately starved of oxygen. The burner is throttled. Smoke curls out. The flame turns from a clean blue to a soft, sooty orange.<\/p>\n<p>In that starved atmosphere, the iron in the glaze is forced to give up some of its oxygen. The compound that forms is not the bright orange of common rust; it is a reduced form — a quieter cousin, magnetite — that scatters light in a particular way. To a human eye, that way looks like the colour of a clear morning after rain.<\/p>\n<blockquote>\n<p>The kiln is not a tool that produces sky-blue. The kiln is a question, asked in fire, that the iron in the glaze is sometimes willing to answer.<\/p>\n<\/blockquote>\n<figure>\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/journal-kiln-hero\/1200\/675.jpg\" alt=\"Lorem ipsum kiln cross-section illustration\" loading=\"lazy\"><figcaption>Kiln cross-section during the reduction phase. The flame is starved of oxygen, the iron in the glaze gives up some of its own, and a particular chemistry becomes possible.<\/figcaption><\/figure>\n<h2>Why three per cent<\/h2>\n<p>Below one per cent, the glaze fires to a clean ivory with no colour. Above three per cent, the surface becomes muddy, then almost black, then metallically shiny in ways that betray the iron rather than refining it. The window between one and three is the Ru window. The window is also surprisingly narrow on the way up: a single per cent more iron and the bowl is no longer a Ru bowl. It is a black-burnished iron-stone.<\/p>\n<p>This is why a contemporary master can fire a kiln for ten years and still set aside a third of the pieces that come out. The colour is not painted on. It is the answer to a question that is asked in fire, in a piece of earth, every single time.<\/p>\n<h2>What the buyer is buying<\/h2>\n<p>When a contemporary Ru bowl sits on a low wooden table in a Belgravia flat, the colour it holds is the residue of a particular chain of decisions: which iron, which particle size, which glaze recipe, which kiln, which stoke, which minute of which day. There is no batch. There is no repeat.<\/p>\n<p>This is also why provenance is not paperwork in this field. Provenance is the chain of decisions. To own a Ru bowl is to inherit a small piece of one particular conversation between a maker and a kiln.<\/p>\n<p>And on a still morning, the bowl will catch the light, and the colour will look, briefly, like the sky it was named after.<\/p>\n<\/p><\/div>\n<footer class=\"article-detail__end\">\n<div class=\"article-detail__tags\">\n <span class=\"article-detail__tag\">Ru ware<\/span><br \/>\n <span class=\"article-detail__tag\">Reduction firing<\/span><br \/>\n <span class=\"article-detail__tag\">Iron oxide<\/span><br \/>\n <span class=\"article-detail__tag\">Celadon<\/span>\n <\/div>\n<p> <a href=\"#main\" class=\"article-detail__back\">Back to journal<\/a><br \/>\n <\/footer>\n<\/p><\/div>\n<\/article>\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=\"p01-home.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contemporary Ru ware<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"p01-home.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Jingdezhen blue-and-white<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Reserved & Commission<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Atelier<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Liu<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Master Chen<\/a><\/li>\n<li style=\"margin-bottom: 8px;\"><a href=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Provenance<\/a><\/li>\n<\/ul><\/div>\n<div>\n<h4 class=\"text-xs uppercase mb-4\" style=\"letter-spacing: 0.18em; color: oklch(0.55 0.008 28);\">Acquisition<\/h4>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 8px;\"><a href=\"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=\"#\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; font-size: 14px;\">Contact<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"max-w-wide mx-auto\" style=\"margin-top: 64px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid oklch(0.20 0.010 28 \/ 0.1);\">\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">© 2026 LLCCRAFT · Lorem ipsum<\/p>\n<p class=\"text-xs\" style=\"color: oklch(0.55 0.008 28);\">Privacy · Terms · Contact<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer>\n<p><script>\n \/* ==========================================================================\n P-03 Journal JS v0.6.0\n ==========================================================================\n Modules:\n 1. Sticky nav scroll\n 2. Filter pill tab-switch (skeleton: visual only, no real filter)\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 })();<\/p>\n<p> (function () {\n \/* 2. Filter pill tab-switch (skeleton visual) *\/\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-03 Journal \u00b7 v0.6.0 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e The LLCCRAFT Journal \u6162\u4ef6\u672d\u8bb0 \/ Lorem Ipsum on porcelain craft \u5320\u4eba\u3001\u7a91\u706b\u3001\u571f\u7684\u672d\u8bb0\u3002>Dispatches from ateliers, kilns, and the slow science of fired earth<\/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-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/13","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=13"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}