:root{--ink:#252822;--paper:#eeeae1;--warm:#cbbfae;--accent:#bd8e5d;--line:#2528222e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:300 16px "Noto Sans TC",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.progress{position:fixed;z-index:100;top:0;width:100%;height:3px}.progress i{display:block;height:100%;background:var(--accent)}header{position:fixed;z-index:90;top:0;width:100%;height:76px;padding:14px 3vw;display:flex;align-items:center;justify-content:space-between;color:#fff;mix-blend-mode:difference}.brand{display:flex;flex-direction:column}.brand b{font:500 22px "Noto Serif TC"}.brand small,header span{font-size:9px;letter-spacing:.16em}header button{border:0;background:none;color:inherit;cursor:pointer}#menu{position:fixed;z-index:80;inset:0;padding:14vh 12vw;background:#20231e;color:#eee9df;display:grid;grid-template-columns:1fr 1fr;gap:18px;transition:.4s}#menu[aria-hidden=true]{opacity:0;visibility:hidden}#menu a{padding:18px 0;border-bottom:1px solid #ffffff2a;display:flex;gap:20px}#rail{position:fixed;z-index:60;right:2vw;top:50%;transform:translateY(-50%);display:grid;gap:12px}#rail a{opacity:.3;font-size:9px;display:flex;gap:8px}#rail a.active{opacity:1}#rail small{display:none}.hero,.section{min-height:100vh;position:relative}.hero{background:#22261f;color:#f1ede3;display:grid;align-items:end;overflow:hidden;padding:12vh 10vw}.hero-art{position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,#74806e88,transparent 32%),linear-gradient(135deg,#171a16,#495044)}.hero-art i{position:absolute;border:1px solid #ffffff27;border-radius:50%}.hero-art i:nth-child(1){width:55vw;height:55vw;right:-10vw;top:-10vw}.hero-art i:nth-child(2){width:38vw;height:38vw;right:9vw;top:8vw}.hero-art i:nth-child(3){width:18vw;height:65vw;right:30vw;top:-10vw;transform:rotate(28deg)}.hero-copy{position:relative}.eyebrow{font-size:10px;letter-spacing:.18em}.hero h1{font:400 clamp(72px,13vw,190px) "Noto Serif TC";margin:.05em 0;letter-spacing:.08em}.project-en{letter-spacing:.35em;font-size:11px}.hero blockquote{margin:8vh 0 0;font:400 clamp(22px,3vw,42px)/1.5 "Noto Serif TC";max-width:680px}.scroll{position:absolute;right:4vw;bottom:5vh;font-size:10px;letter-spacing:.18em}.section{padding:14vh 10vw}.paper{background:var(--paper)}.dark{background:#242721;color:#ebe7de}.warm{background:var(--warm)}.no{font:400 11vw "Noto Serif TC";opacity:.08;position:absolute;top:7vh;right:8vw}.heading{max-width:850px;margin-bottom:9vh}.heading h2{font:400 clamp(34px,5.3vw,76px)/1.35 "Noto Serif TC";white-space:pre-line}.brief{display:grid;grid-template-columns:1.2fr 1fr;gap:10vw}.lead{font:400 clamp(20px,2.2vw,32px)/1.8 "Noto Serif TC"}dl{display:grid;grid-template-columns:1fr 1fr;margin:0}dl div{padding:18px 0;border-bottom:1px solid var(--line)}dt{font-size:9px;letter-spacing:.12em}dd{margin:8px 0}.pain-grid,.strategy-grid,.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:10vh;background:var(--line)}.pain-grid article,.strategy-grid article{background:var(--paper);padding:32px;min-height:250px}.pain-grid h3,.strategy-grid h3,.materials h3{font:400 25px/1.45 "Noto Serif TC"}.pain-grid span,.strategy-grid span,.materials span{font-size:10px;letter-spacing:.12em}.pain-grid i{display:block;margin:22px 0;color:var(--accent)}#persona-tabs{display:flex;gap:10px}#persona-tabs button{padding:10px 18px;color:inherit;background:none;border:1px solid #ffffff33}#persona-tabs .active{background:#eee9df;color:#252822}.persona{min-height:420px;border-block:1px solid #ffffff35;margin-top:30px;padding:8vh 0;display:grid;grid-template-columns:.7fr 1.2fr .8fr;gap:7vw;align-items:center}.persona h3{font:400 56px "Noto Serif TC";margin:12px 0}.persona blockquote{font:400 clamp(27px,3vw,45px)/1.6 "Noto Serif TC";margin:0}.persona li{padding:13px 0;border-bottom:1px solid #ffffff2a}.concept-copy{max-width:820px;font:400 24px/1.9 "Noto Serif TC"}#palette{height:180px;display:flex;margin:8vh 0 5vh}#palette i{background:var(--c);flex:1;transition:.3s}#palette i:hover{flex:1.8}.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.materials article{border-top:1px solid var(--line);padding-top:18px}.strategy-grid article{background:var(--warm)}.space{display:grid;grid-template-columns:1.25fr .75fr;min-height:70vh;margin-bottom:10vh;gap:7vw;align-items:center}.space:nth-child(even){grid-template-columns:.75fr 1.25fr}.space:nth-child(even) .space-visual{order:2}.space-visual{height:65vh;background:linear-gradient(140deg,var(--tone),#252822);position:relative;overflow:hidden}.space-visual span{position:absolute;color:white;top:25px;left:25px}.space-visual i{position:absolute;background:#ffffff17}.space-visual i:nth-child(2){inset:12% 18% 0 38%;border-radius:120px 120px 0 0}.space-visual i:nth-child(3){width:60%;height:24%;left:8%;bottom:9%;border-radius:50%}.space h3{font:400 clamp(30px,4vw,54px)/1.5 "Noto Serif TC"}.space p:last-child{line-height:1.9}.option-grid{background:#ffffff21}.option{padding:35px;background:#2b2e28;min-height:420px}.option.featured{background:#d2c5b3;color:#252822;transform:translateY(-16px)}.option h3{font:400 26px "Noto Serif TC";margin-top:50px}.option ul{list-style:none;padding:0;margin-top:55px}.option li{padding:12px 0;border-bottom:1px solid currentColor}.note{max-width:700px;margin-top:5vh;opacity:.65}ol{list-style:none;padding:0}ol li{display:grid;grid-template-columns:90px 1fr;border-top:1px solid var(--line);padding:25px 0}ol p{font:400 24px "Noto Serif TC";margin:0}.decision{margin-top:10vh;background:#252822;color:#eee9df;padding:5vw;display:flex;justify-content:space-between;align-items:center}.decision p{font:400 26px "Noto Serif TC"}.decision a{border:1px solid #ffffff45;padding:18px 24px}footer{background:#191b18;color:#eee9df;padding:8vh 5vw;display:grid;grid-template-columns:1fr 1fr auto;align-items:end}footer b,footer small{display:block}.reveal{opacity:0;transform:translateY(30px);transition:.8s}.reveal.visible{opacity:1;transform:none}@media(max-width:800px){header span,#rail{display:none}.section,.hero{padding-inline:6vw}.brief,.persona,.space,.space:nth-child(even){grid-template-columns:1fr}.pain-grid,.strategy-grid,.option-grid{grid-template-columns:1fr}.materials{grid-template-columns:1fr 1fr}.space:nth-child(even) .space-visual{order:0}.space-visual{height:55vh}.option.featured{transform:none}.decision{align-items:flex-start;gap:30px;flex-direction:column}#menu{grid-template-columns:1fr}footer{grid-template-columns:1fr;gap:35px}.hero h1{font-size:22vw}}
