@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;600&display=swap');
:root{--ink:#28251f;--paper:#eee8d9;--wood:#9c6743;--line:#bba78b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif}button{font:inherit;cursor:pointer}a{color:inherit}.skip{position:absolute;left:-9999px;z-index:30}.skip:focus{left:12px;top:12px;background:white;padding:12px}.demo-note{background:var(--ink);color:#fff;text-align:center;font-size:10px;line-height:1.7;padding:8px 20px}header{height:80px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font:600 19px 'Noto Serif JP',serif}.brand-mark{width:41px;height:41px;border:2px solid;display:grid;place-items:center;font-size:20px}.brand small{display:block;font:9px 'DM Mono',monospace;letter-spacing:.08em}header nav{display:flex;gap:30px;font:11px 'DM Mono',monospace}header nav a{text-decoration:none}
.hero{min-height:730px;display:grid;grid-template-columns:.95fr 1.05fr;overflow:hidden}.hero-left{padding:65px 9% 60px 10%;position:relative;display:flex;flex-direction:column;align-items:flex-start}.hero-left>span,.hero-slats>span,.catalogue-index>span,.caption,.board-title>span,.preview-kicker,.closing>span{font:10px 'DM Mono',monospace;letter-spacing:.16em}.tree-rings{width:420px;height:420px;border-radius:50%;border:2px solid #ad8869;position:absolute;top:40px;right:-110px;opacity:.75;pointer-events:none;animation:grow 8s ease-in-out infinite alternate}.tree-rings i{position:absolute;inset:8% 8%;border:2px solid #ad8869;border-radius:48% 52% 49% 51%;transform:rotate(14deg)}.tree-rings i:nth-child(2){inset:18% 19%;transform:rotate(45deg)}.tree-rings i:nth-child(3){inset:29% 27%;transform:rotate(70deg)}.tree-rings i:nth-child(4){inset:40% 38%;transform:rotate(90deg)}.tree-rings i:nth-child(5){inset:47% 46%;transform:rotate(28deg)}@keyframes grow{to{transform:scale(1.04) rotate(4deg)}}.hero h1{font:600 clamp(90px,11vw,185px)/1.2 'Noto Serif JP',serif;letter-spacing:-.13em;margin:120px 0 30px;position:relative}.hero-left p{font-size:13px;line-height:2.3;max-width:430px;position:relative}.hero-left a{margin-top:auto;border-bottom:1px solid;text-decoration:none;padding:10px 0;font-size:12px;position:relative}.hero-slats{display:flex;position:relative;gap:9px;padding:0 0 0 9px;background:var(--ink);overflow:hidden}.slat{width:33.33%;height:100%;overflow:hidden;transform-origin:bottom;animation:assemble 1.2s ease both}.slat:nth-child(2){animation-delay:.15s}.slat:nth-child(3){animation-delay:.3s}.slat img{height:100%;width:300%;max-width:none;object-fit:cover;filter:saturate(.68)}.slat-two img{transform:translateX(-33.33%)}.slat-three img{transform:translateX(-66.66%)}@keyframes assemble{from{transform:translateY(35%);opacity:0}to{transform:translateY(0);opacity:1}}.hero-slats>span{position:absolute;bottom:20px;right:20px;background:var(--paper);padding:10px}
.catalogue{display:grid;grid-template-columns:.72fr 1.28fr;gap:5%;padding:125px 6% 145px;max-width:1650px;margin:auto}.catalogue h2{font:600 clamp(50px,5vw,85px)/1.5 'Noto Serif JP',serif;letter-spacing:-.08em;margin:40px 0}.catalogue-index p{font-size:12px;line-height:2.5;max-width:370px}.catalogue-frame{border:1px solid var(--ink);padding:18px;background:#f7f2e7;box-shadow:18px 18px 0 #d3c2a6}.photo{height:530px;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.caption{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--ink);padding:17px 5px 0}.caption b{font-size:12px}
.board{background:#6f4d38;color:#f8f1e5;padding:110px 5% 130px}.board-title{max-width:1450px;margin:0 auto 60px;display:grid;grid-template-columns:.4fr 1.2fr .75fr;gap:30px;align-items:end}.board h2{font:600 clamp(50px,6vw,100px)/1.35 'Noto Serif JP',serif;letter-spacing:-.1em;margin:0}.board-title p{font-size:12px;line-height:2.3}.board-grid{max-width:1450px;margin:auto;display:grid;grid-template-columns:.75fr 1.25fr;gap:7%}.group{border-top:1px solid #b8997d;padding:25px 0 32px}.group h3{font:500 18px 'Noto Serif JP',serif;margin:0 0 20px}.group h3 span{font:12px 'DM Mono',monospace;margin-right:16px}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.option{border:1px solid #ccb69e;background:transparent;color:#f8f1e5;padding:10px;text-align:left;min-height:74px;font-size:11px;line-height:1.5}.option.active{background:#e5d2b5;color:var(--ink)}.controls>p{font-size:10px;line-height:2}.preview{align-self:start;background:#e7d6bd;color:var(--ink);padding:25px}.preview-kicker{display:block;margin-bottom:20px}.preview-scene{--wood-tone:#b58c63;height:400px;position:relative;overflow:hidden;border:1px solid #8f7355;background:#dcd5c5}.preview-scene.entry{background:#d7cab0}.preview-scene.study{background:#c9d1cc}.scene-wall{height:72%;background:repeating-linear-gradient(90deg,transparent 0 31px,#c8bda9 32px),#e7e1d2;position:relative}.study .scene-wall{background:#d4dbd5}.entry .scene-wall{background:#e9ddc4}.scene-wall span{position:absolute;top:12px;right:12px;font-size:11px;background:#f8f2e5;padding:8px}.furniture{position:absolute;width:58%;height:190px;left:21%;bottom:25px;filter:drop-shadow(8px 12px 5px #5145335e);animation:build .8s ease both}.preview-scene.warm{--wood-tone:#a66a43}.preview-scene.deep{--wood-tone:#604435}@keyframes build{from{transform:translateY(25px);opacity:.3}to{transform:translateY(0);opacity:1}}.surface{height:20px;background:var(--wood-tone);border:3px solid #5f4737;position:relative}.shelf{height:130px;border:15px solid var(--wood-tone);border-top:0;border-bottom:12px solid var(--wood-tone);background:#b5a68c}.feet{height:35px;border-left:15px solid var(--wood-tone);border-right:15px solid var(--wood-tone);margin:0 20px}.objects{display:flex;align-items:end;gap:5px;height:100%;padding:10px}.objects i{width:14%;height:65%;background:#875e44;border:2px solid #5f4737}.objects i:nth-child(2){height:85%;background:#b47e4d}.objects i:nth-child(3){height:55%;background:#566c5c}.objects i:nth-child(4){height:75%;background:#855c64}.objects i:nth-child(5){height:45%;background:#d4bc90}.objects.display i{border-radius:50% 50% 0 0;height:55%;width:18%}.objects.everyday i{height:45%;width:18%;border-radius:4px}.vase,.book-stack{position:absolute;bottom:18px;right:12%;height:33px;width:22px;background:#9e9680;border-radius:0 0 8px 8px}.book-stack{left:10%;right:auto;height:8px;width:50px;background:#846b56;border-radius:0}.preview-copy{padding:25px 3% 5px}.preview h3{font:600 28px 'Noto Serif JP',serif;margin:0 0 20px}.preview dl{margin:0}.preview dl div{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid #a88c6b;padding:11px 0;font-size:12px}.preview dd{margin:0}.preview button{background:var(--ink);color:white;border:0;padding:13px 20px;margin-top:20px;font-size:11px}.preview-copy p{font-size:10px;line-height:2}
.closing{text-align:center;padding:135px 20px}.closing h2{font:600 clamp(50px,6vw,95px)/1.4 'Noto Serif JP',serif;letter-spacing:-.1em;margin:25px}.closing p{font-size:11px;line-height:2}.closing a{display:inline-block;margin-top:25px;text-decoration:none;border-bottom:1px solid;padding:10px;font-size:12px}footer{background:var(--ink);color:white;padding:25px 4%;display:flex;justify-content:space-between;font:10px 'DM Mono',monospace}footer a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #a8c8ca;outline-offset:3px}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-left{min-height:650px}.hero-slats{height:450px}.tree-rings{right:0}.catalogue{grid-template-columns:1fr}.catalogue-frame{max-width:780px}.board-title{grid-template-columns:1fr 2fr}.board-title p{grid-column:2}.board-grid{grid-template-columns:1fr}.preview{max-width:800px}.controls{margin-bottom:45px}}
@media(max-width:600px){header{height:66px}.brand{font-size:15px}.brand small{font-size:7px}.brand-mark{width:34px;height:34px}header nav a:not(:last-child){display:none}.hero-left{padding:45px 6%;min-height:570px}.tree-rings{width:270px;height:270px;right:-80px}.hero h1{font-size:100px;margin:105px 0 25px}.hero-left p{font-size:11px}.hero-slats{height:330px}.catalogue{padding:80px 6%}.catalogue h2{font-size:55px}.photo{height:330px}.caption{flex-wrap:wrap;font-size:8px}.board{padding:80px 5%}.board-title{display:block}.board h2{font-size:60px;margin:20px 0}.options{gap:5px}.option{font-size:10px;padding:7px;min-height:74px}.preview{padding:15px}.preview-scene{height:280px}.furniture{height:135px;bottom:10px}.surface{height:16px}.shelf{height:95px}.feet{height:25px}.scene-wall{height:70%}.closing{padding:95px 20px}footer{flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tree-rings,.slat,.furniture{animation:none}}

/* Full workshop photograph with a small paper notice above the workbench. */
.hero{min-height:710px;display:block;position:relative;overflow:hidden;background:#77614a}
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%;filter:none}
.hero-photo>span{position:absolute;right:24px;bottom:22px;background:#f4eadbdb;padding:8px 12px;color:#3c3026;font-size:11px}
.hero-left{position:relative;z-index:1;width:min(500px,40%);min-height:0;margin:72px 0 72px 6%;padding:32px 42px 38px;background:#f0e7d9ed;display:block;box-shadow:12px 14px 0 #2b241b58}
.hero-left>span{display:block;line-height:1.5;margin:0 0 20px}
.hero h1{font:600 clamp(70px,7vw,112px)/1.16 'Noto Serif JP',serif;letter-spacing:.04em;margin:0 0 16px;white-space:nowrap}
.hero-left .hero-lead{font:600 clamp(24px,2.2vw,34px)/1.5 'Noto Serif JP',serif;margin:0 0 16px;max-width:none}
.hero-left .hero-copy{font-size:12px;line-height:2;margin:0 0 22px;max-width:none}
.hero-left a{display:inline-block;margin:0;padding:8px 0;font-size:12px}
@media(max-width:1000px){.hero{min-height:700px;display:block}.hero-left{width:min(530px,65%);min-height:0;margin:50px 0 50px 5%;padding:28px 34px 32px}.hero-photo{height:auto}.hero h1{font-size:clamp(67px,9vw,100px);margin:0 0 10px}}
@media(max-width:600px){.hero{min-height:680px}.hero-photo img{object-position:51% 50%}.hero-left{width:calc(100% - 54px);min-height:0;margin:22px 0 0 18px;padding:20px 22px 24px;box-shadow:8px 9px 0 #2b241b58}.hero-left>span{font-size:9px;margin:0 0 12px}.hero h1{font-size:clamp(63px,16vw,76px);margin:0 0 8px}.hero-left .hero-lead{font-size:23px;line-height:1.35;margin:0 0 12px}.hero-left .hero-copy{font-size:10px;line-height:1.8;margin:0 0 14px}.hero-photo>span{right:12px;bottom:12px;font-size:9px}}