@view-transition { navigation: auto; }
::view-transition-group(chijing-product) { animation-duration:.52s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
::view-transition-old(root) { animation:chijing-out .2s ease both; }
::view-transition-new(root) { animation:chijing-in .42s ease both; }
@keyframes chijing-out { to { opacity:0; } }
@keyframes chijing-in { from { opacity:0; } }

:root { --ink:#e9ede5; --muted:#a0aaa0; --line:rgba(228,238,228,.18); --deep:#121816; --room:#27362f; --room-dark:#101713; --glow:#c0dac9; --shelf-top:#4a3021; --serif:"Noto Serif SC",Georgia,serif; --sans:"Manrope",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--deep); scroll-behavior:smooth; }
body { min-height:100%; margin:0; color:var(--ink); font-family:var(--sans); overflow:hidden; background:var(--deep); }
body[data-mode="focus"] { overflow-x:hidden; overflow-y:auto; }
button { color:inherit; font:inherit; }
.grain { position:fixed; z-index:30; inset:0; pointer-events:none; opacity:.15; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.collection-experience { min-height:100dvh; }

.topbar { position:fixed; z-index:20; inset:0 0 auto; height:76px; padding:0 4.6vw; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:linear-gradient(rgba(9,13,11,.27),transparent); transition:opacity .35s ease,transform .45s ease; }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font:12px var(--mono); letter-spacing:.18em; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(240,246,238,.65); border-radius:50%; font:14px var(--serif); letter-spacing:0; }
.collection-label,.eyebrow,.room-label,.pointer-hint,.focus-scroll-cue,.story-kicker,.story-photo-label { font:10px/1.35 var(--mono); letter-spacing:.12em; }
.collection-label { margin:0; color:var(--muted); }.collection-label span { color:var(--ink); }
.language-control { justify-self:end; display:flex; align-items:center; gap:8px; color:var(--muted); font:8px var(--mono); letter-spacing:.09em; }
.language-picker { min-width:76px; height:32px; padding:0 9px; border:1px solid var(--line); border-radius:999px; outline:none; background:rgba(11,16,14,.24); color:var(--ink); font:9px var(--mono); letter-spacing:.06em; cursor:pointer; }
.language-picker:focus-visible { border-color:var(--glow); box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 18%,transparent); }
.top-actions { justify-self:end; display:flex; align-items:center; gap:18px; }
.shop-entry { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; white-space:nowrap; font:9px var(--mono); letter-spacing:.1em; border-bottom:1px solid rgba(233,237,229,.55); padding:7px 0; }
.shop-entry:hover,.shop-entry:focus-visible { color:var(--glow); border-color:var(--glow); }

.room { height:100dvh; min-height:610px; isolation:isolate; overflow:hidden; position:relative; background:radial-gradient(ellipse 65% 54% at 50% 47%,color-mix(in srgb,var(--room) 85%,#3d584b) 0%,var(--room) 37%,var(--room-dark) 92%); transition:background 1s ease; }
.room::before { content:""; position:absolute; z-index:-3; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 40%,rgba(1,4,3,.68)),radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--shelf-top) 35%,transparent),transparent 50%); }
.light-cone { position:absolute; z-index:-2; top:-25%; width:35vw; height:100vh; filter:blur(12px); opacity:.23; background:radial-gradient(ellipse,var(--glow),transparent 67%); transition:background 1s ease; }.light-cone--left { left:-13vw; transform:rotate(-18deg); }.light-cone--right { right:-12vw; transform:rotate(18deg); opacity:.13; }
.focus-halo { position:absolute; z-index:0; left:50%; top:50%; width:min(49vw,630px); aspect-ratio:.72; opacity:0; pointer-events:none; transform:translate(-50%,-48%) scale(.82); border:1px solid color-mix(in srgb,var(--glow) 40%,transparent); border-radius:50%; background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--glow) 46%,transparent),color-mix(in srgb,var(--room) 8%,transparent) 45%,transparent 72%); box-shadow:0 0 120px color-mix(in srgb,var(--glow) 13%,transparent) inset; transition:opacity .8s ease,transform 1.05s cubic-bezier(.16,.8,.2,1); }
.room-label { position:absolute; z-index:3; top:105px; inset-inline:4.6vw; display:flex; justify-content:space-between; color:rgba(231,238,229,.45); font-size:8px; }
.category-switcher { position:absolute; z-index:8; top:132px; left:4.6vw; display:flex; gap:7px; max-width:calc(100vw - 9.2vw); overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }.category-switcher::-webkit-scrollbar { display:none; }
.category-button { flex:0 0 auto; min-height:31px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:rgba(11,16,14,.22); color:rgba(233,237,229,.66); font:8px var(--mono); letter-spacing:.1em; cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; }.category-button span { color:var(--muted); margin-left:5px; }.category-button:hover,.category-button.is-active { border-color:rgba(225,240,227,.62); background:rgba(225,240,227,.14); color:var(--ink); }.category-button.is-active span { color:var(--glow); }

.shelf-stage { position:absolute; z-index:1; inset:8% 0 0; perspective:1100px; transform-style:preserve-3d; transition:transform .82s cubic-bezier(.2,.75,.18,1); }
.back-wall { position:absolute; inset:0 0 calc(25.4% + 16px); opacity:.31; background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/20% 100%,linear-gradient(180deg,rgba(255,255,255,.05),transparent 35%); border-bottom:1px solid rgba(230,240,230,.22); transition:opacity .75s ease; }
.shelf { position:absolute; z-index:4; bottom:25.4%; left:0; width:100%; height:16px; background:linear-gradient(180deg,#604131 0%,#3b241a 42%,#1b100c 100%); border-top:1px solid rgba(235,210,177,.34); box-shadow:0 13px 21px rgba(0,0,0,.42); transition:opacity .75s ease,transform .75s ease; }.shelf-lip { display:none; }
.ceramic-carousel { position:absolute; z-index:5; inset:0; transform-style:preserve-3d; touch-action:none; }
.ceramic { position:absolute; left:50%; bottom:calc(25.4% + 16px); padding:0; border:0; background:transparent; cursor:pointer; isolation:isolate; transform-origin:50% 100%; transition:transform .88s cubic-bezier(.16,.8,.2,1),opacity .5s ease,filter .45s ease; will-change:transform,opacity; }.ceramic:focus-visible { outline:1px solid var(--ink); outline-offset:8px; }
.ceramic img { width:100%; height:100%; object-fit:contain; object-position:center bottom; transform:translateY(var(--object-shift-y,0%)) scale(var(--object-scale,1)); transform-origin:center bottom; filter:drop-shadow(0 18px 10px rgba(0,0,0,.36)) brightness(.8) saturate(.94); pointer-events:none; transition:filter .55s ease; }.ceramic:hover img { filter:drop-shadow(0 18px 10px rgba(0,0,0,.36)) brightness(.9) saturate(.97); }.ceramic.is-selected img { filter:drop-shadow(0 32px 24px rgba(0,0,0,.46)) brightness(1.04) saturate(1.02); }

.browse-ui { position:absolute; z-index:8; inset:auto 4.6vw 6.7vh; display:grid; grid-template-columns:1fr 250px 1fr; align-items:end; gap:3vw; transition:opacity .35s ease,transform .5s ease; }.selection-copy { align-self:end; }.eyebrow { color:var(--glow); margin:0 0 10px; font-size:9px; }.selection-copy h1,.focus-copy h2 { margin:0; font:500 clamp(31px,4.5vw,68px)/.96 var(--serif); letter-spacing:-.055em; }.selection-cn,.focus-cn { margin:10px 0 0; font:15px var(--serif); color:rgba(231,239,231,.74); }.selection-note { margin:0; font-size:12px; line-height:1.7; color:#cbd5ca; max-width:235px; }.browse-actions { justify-self:end; display:flex; align-items:center; gap:8px; }.round-button,.close-focus,.story-return { border:1px solid var(--line); background:rgba(11,16,14,.16); cursor:pointer; transition:background .25s ease,color .25s ease; }.round-button { border-radius:50%; width:39px; height:39px; }.round-button:hover,.close-focus:hover { background:rgba(231,240,232,.13); }.round-button:disabled { opacity:.22; cursor:not-allowed; }
.pointer-hint { position:absolute; z-index:6; left:4.6vw; bottom:23.8%; color:rgba(232,241,232,.46); font-size:8px; display:flex; align-items:center; gap:9px; }.pointer-hint i { width:27px; height:1px; background:currentColor; display:block; position:relative; }.pointer-hint i::after { content:""; position:absolute; right:0; top:-3px; height:6px; width:6px; border-top:1px solid; border-right:1px solid; transform:rotate(45deg); }

.focus-copy { position:absolute; z-index:12; top:126px; left:4.6vw; max-width:min(330px,30vw); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .42s ease .24s,transform .6s cubic-bezier(.16,.8,.2,1) .24s; }.close-focus { height:34px; padding:0 12px; margin:0 0 clamp(34px,7vh,75px); font:9px var(--mono); letter-spacing:.09em; }.focus-copy h2 { font-size:clamp(46px,5.2vw,78px); }.focus-scroll-cue { position:absolute; z-index:12; bottom:34px; left:50%; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:rgba(234,240,233,.72); font-size:8px; opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:opacity .42s ease .42s,transform .6s cubic-bezier(.16,.8,.2,1) .42s; cursor:pointer; }.focus-scroll-cue i { display:block; width:1px; height:35px; background:linear-gradient(var(--glow),transparent); }

.product-story { display:none; position:relative; z-index:4; min-height:100dvh; padding:clamp(80px,12vw,170px) 8vw; color:#21332e; background:#e7e4d8; grid-template-columns:minmax(240px,.88fr) minmax(300px,1.1fr); gap:clamp(36px,8vw,130px); align-items:start; }.story-intro { max-width:380px; }.story-kicker,.story-photo-label { margin:0 0 15px; color:#65766b; font-size:9px; }.story-intro h2 { margin:0; color:#1d2e29; font:500 clamp(54px,7vw,108px)/.92 var(--serif); letter-spacing:-.07em; }.story-subtitle { margin:13px 0 0; color:#6a786e; font:16px var(--serif); }.story-deck { margin:46px 0 32px; color:#3c4d46; font:15px/1.9 var(--serif); }.story-specs { display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; margin:0; }.story-specs div { padding-top:9px; border-top:1px solid rgba(43,61,54,.22); }.story-specs dt { color:#738077; font:8px var(--mono); letter-spacing:.11em; }.story-specs dd { margin:6px 0 0; color:#22342e; font:12px var(--sans); }.story-image-wrap { position:relative; padding-top:2px; }.story-image-wrap img { display:block; width:100%; max-height:74vh; object-fit:cover; border:1px solid rgba(42,61,54,.16); filter:saturate(.73) contrast(1.02); }.story-photo-label { position:absolute; z-index:1; top:16px; left:17px; color:#eef0e6; }.story-material { grid-column:1/-1; display:grid; grid-template-columns:.88fr 1.1fr; gap:clamp(36px,8vw,130px); padding-top:clamp(70px,10vw,150px); border-top:1px solid rgba(43,61,54,.22); }.story-material .story-kicker { margin:4px 0 0; }.story-material p:last-of-type { max-width:560px; margin:0; color:#3c4d46; font:18px/1.8 var(--serif); }.story-return { grid-column:2; justify-self:start; min-height:42px; padding:0 16px; color:#25372f; border-color:rgba(43,61,54,.35); background:transparent; font:9px var(--mono); letter-spacing:.1em; }.story-return:hover { background:#25372f; color:#edf0e6; }
.story-actions { grid-column:2; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.story-actions .story-return { grid-column:auto; }
.story-shop-link { display:inline-flex; align-items:center; min-height:42px; padding:0 18px; color:#edf0e6; background:#25372f; text-decoration:none; font:10px var(--mono); letter-spacing:.08em; }
.story-shop-link:hover,.story-shop-link:focus-visible { background:#3c665b; }

body[data-mode="focus"] .browse-ui,body[data-mode="focus"] .pointer-hint,body[data-mode="focus"] .room-label,body[data-mode="focus"] .category-switcher { opacity:0; transform:translateY(12px); pointer-events:none; }
body[data-mode="focus"] .focus-copy,body[data-mode="focus"] .focus-scroll-cue { opacity:1; transform:translate(-50%,0); pointer-events:auto; } body[data-mode="focus"] .focus-copy { transform:translateY(0); }
body[data-mode="focus"] .focus-halo { opacity:1; transform:translate(-50%,-48%) scale(1); } body[data-mode="focus"] .back-wall { opacity:.13; } body[data-mode="focus"] .shelf { opacity:.48; transform:translateY(2vh); } body[data-mode="focus"] .product-story { display:grid; } body[data-mode="focus"] .topbar { opacity:.62; }

@media(max-width:750px){ .topbar{height:62px;padding:0 20px;grid-template-columns:1fr auto}.collection-label{display:none}.language-control>span{display:none}.language-picker{min-width:68px;height:30px}.room{min-height:640px}.room-label{top:82px;inset-inline:20px}.category-switcher{top:105px;left:20px;max-width:calc(100vw - 40px)}.category-button{min-height:29px;padding:0 9px;font-size:7px}.shelf-stage{inset:7% 0 0}.back-wall{bottom:calc(29% + 12px)}.shelf{bottom:29%;height:12px}.ceramic{bottom:calc(29% + 12px)}.browse-ui{inset:auto 20px 30px;display:grid;grid-template-columns:1fr auto;gap:16px}.selection-copy{grid-column:1/-1}.selection-copy h1{font-size:42px}.selection-note{display:none}.browse-actions{grid-column:1/-1;justify-self:start}.pointer-hint{left:20px;bottom:27.5%}.focus-copy{top:88px;left:20px;max-width:220px}.focus-copy h2{font-size:48px}.close-focus{margin-bottom:34px}.focus-scroll-cue{bottom:22px}.focus-halo{width:min(84vw,420px);top:46%}.product-story{display:none;padding:82px 24px 90px;grid-template-columns:1fr;gap:52px}.story-intro h2{font-size:64px}.story-deck{margin-top:34px}.story-image-wrap img{max-height:60vh}.story-material{grid-column:auto;grid-template-columns:1fr;gap:24px;padding-top:58px}.story-material p:last-of-type{font-size:16px}.story-return{grid-column:auto}.story-specs{gap:15px 18px} }
@media(max-width:750px){ .top-actions{gap:10px}.shop-entry{font-size:8px}.story-actions{grid-column:auto}.story-shop-link{font-size:9px} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important} }