:root{--paper:#fff;--ink:#111;--muted:#777;--line:#bbb;--sans:Arial,'Noto Sans TC',sans-serif;--serif:'Noto Serif TC',Georgia,serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

/* Collection page: compact top navigation and a centered, image-led sequence. */
.collection-header,.about-header{position:fixed;z-index:20;top:0;left:0;width:100%;height:54px;font:700 10px/1.3 var(--sans)}
.collection-brand,.about-brand{position:absolute;left:1.5vw;top:13px;font-size:13px;line-height:1.05;letter-spacing:-.06em}
.collection-brand small{display:block;font:700 8px/1.3 var(--sans);letter-spacing:-.02em}
.nav-price,.about-nav-left,.about-nav-middle{position:absolute;top:19px;transform:translateX(-50%);white-space:nowrap}
.about-nav-left{left:36%}
.nav-price{left:50%}
.about-nav-middle{left:68%}
.nav-stack,.about-nav-right{position:absolute;top:13px;right:1.5vw;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.collection-header a:hover,.about-header a:hover,.collection-header button:hover,.about-header button:hover{opacity:.55}
.contact-trigger,.contact-close{border:0;background:none;padding:0;color:inherit;cursor:pointer;font:inherit}
.collection-gallery{display:flex;flex-direction:column;align-items:center;gap:58px;margin:54px auto 0;padding:0 0 80px}
.collection-item{position:relative;display:block;width:min(68vw,900px);height:min(87vw,1050px);overflow:hidden;background:#f1f0ec}
.collection-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.collection-item:hover img{transform:scale(1.025)}
.collection-item span{position:absolute;left:0;right:0;bottom:-23px;text-align:center;font:8px var(--mono);letter-spacing:.06em;color:#555}
.item-01{transform:rotate(.35deg)}
.item-02{width:min(54vw,700px);height:min(68vw,880px);transform:rotate(-.6deg)}
.item-03{width:min(58vw,760px);height:min(78vw,1000px);transform:rotate(.5deg)}
.item-05{width:min(63vw,820px);height:min(82vw,1050px);transform:rotate(-.4deg)}
.item-05 img{object-position:center bottom}
.item-06{width:min(60vw,780px);height:auto;transform:rotate(.4deg)}
.item-06 img{height:auto;object-fit:contain}
.item-06:hover img{transform:none}
.item-07{width:min(34vw,430px);height:min(43vw,520px);transform:rotate(-.45deg)}
.item-09{width:min(28vw,355px);height:min(36vw,430px);transform:rotate(.5deg)}
.item-10{width:min(32vw,405px);height:min(42vw,500px);transform:rotate(-.35deg)}
.item-11{width:min(35vw,445px);height:min(46vw,550px);transform:rotate(.3deg)}
.item-12{width:min(29vw,365px);height:min(38vw,455px);transform:rotate(-.5deg)}
.item-13{width:min(34vw,430px);height:min(45vw,540px);transform:rotate(.45deg)}
.item-14{width:min(31vw,390px);height:min(40vw,480px);transform:rotate(-.35deg)}
.item-15{width:min(35vw,445px);height:min(50vw,600px);transform:rotate(.25deg)}
.item-16{width:min(29vw,365px);height:min(38vw,455px);transform:rotate(-.5deg)}
.item-17{width:min(34vw,430px);height:min(42vw,500px);transform:rotate(.4deg)}
.item-18{width:min(30vw,380px);height:min(39vw,465px);transform:rotate(-.35deg)}
.item-19{width:min(35vw,445px);height:min(47vw,560px);transform:rotate(.35deg)}
.item-20{width:min(32vw,405px);height:min(42vw,500px);transform:rotate(-.45deg)}
.collection-footer{border-top:1px solid var(--line);padding:12px 1.5vw 16px;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;font:8px/1.6 var(--mono);letter-spacing:.025em}
.collection-footer div{display:flex;flex-direction:column;gap:2px}
.collection-footer div:nth-child(2){align-items:center}
.collection-footer div:nth-child(3){align-items:flex-end}

/* About page follows the reference's full-height split: image left, short text right. */
.about-page{overflow:hidden}
.about-header{position:absolute}
.about-brand{color:var(--ink);text-shadow:none}
.about-nav-left{left:50.7%}
.about-nav-right{color:var(--ink)}
.about-split{height:100svh;min-height:620px;display:grid;grid-template-columns:49.3% 50.7%;}
.about-image{height:100%;overflow:hidden;background:#f1f0ec;display:flex;align-items:center;justify-content:center;position:relative}
.about-image-caption{position:absolute;left:3vw;bottom:22px;font:500 8px var(--mono);letter-spacing:.06em}
.about-image img{display:block;width:min(24vw,320px);height:auto;max-height:74svh;object-fit:contain}
.about-copy{display:grid;grid-template-columns:minmax(105px,120px) minmax(0,280px);gap:clamp(12px,1.5vw,20px);align-content:center;justify-content:start;padding:60px 3vw 30px 5%}
.about-copy h1{font:700 10px/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.about-description{font:600 11px/1.42 var(--sans);letter-spacing:-.015em}
.about-description h2{font:500 9px/1 var(--mono);letter-spacing:.04em;margin:0 0 12px}
.about-experience{list-style:none;padding:0;margin:0}
.about-experience li{display:grid;gap:4px;padding:9px 0;border-top:1px solid #1a1a1a24}
.experience-role{font-size:9px;font-weight:700;white-space:nowrap}
.experience-date{font:500 9px/1.3 var(--mono);letter-spacing:.01em;color:#555}
.about-description a{display:inline-block;margin-top:7px;font:700 8px var(--mono);letter-spacing:.03em}
.about-description a:hover{text-decoration:underline}

/* Contact form overlay. */
.contact-dialog{width:min(534px,calc(100vw - 28px));height:342px;max-height:calc(100svh - 28px);border:0;padding:27px 26px 20px;background:#fff;color:var(--ink);box-shadow:0 8px 35px #0002}
.contact-dialog::backdrop{background:rgba(0,0,0,.72)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;font:400 13px var(--serif)}
.contact-close{font:700 9px var(--sans)}
.contact-form{display:grid;grid-template-rows:40px 40px 1fr 34px;height:270px;margin-top:17px}
.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;padding:9px 0 5px;outline:none;color:var(--ink);font:400 10px var(--sans)}
.contact-form textarea{height:100%;resize:none;padding-top:17px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#777;opacity:1}
.contact-form>button{border:0;background:none;padding:12px 0 0;cursor:pointer;font:700 10px var(--sans);text-align:center}
.contact-form>button:hover{opacity:.55}
body.dialog-open{overflow:hidden}
.lookbook-popup{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f7f7f4;overflow:hidden}
.lookbook-popup::backdrop{background:rgba(6,8,9,.88)}
.lookbook-popup iframe{display:block;width:100%;height:100%;border:0;background:#f7f7f4}
.lookbook-popup-close{position:absolute;z-index:2;top:13px;right:18px;border:0;padding:9px 11px;background:rgba(247,247,244,.92);color:#111;font:700 9px var(--mono);letter-spacing:.08em;cursor:pointer}
.lookbook-popup-close:hover{background:#fff}
.mahjong-lookbook-popup,.mushroom-lookbook-popup{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;transform:none!important;scale:1!important;animation:none!important;opacity:0;transition:opacity 360ms cubic-bezier(.22,.7,.2,1)}
.mahjong-lookbook-popup[open],.mushroom-lookbook-popup[open]{transform:none!important;scale:1!important;opacity:1}
.mahjong-lookbook-popup::backdrop,.mushroom-lookbook-popup::backdrop{background-color:rgba(6,8,9,0);transition:background-color 420ms ease,display 420ms allow-discrete,overlay 420ms allow-discrete}
.mahjong-lookbook-popup[open]::backdrop,.mushroom-lookbook-popup[open]::backdrop{background-color:rgba(6,8,9,.88)}
@starting-style{
  .mahjong-lookbook-popup[open],.mushroom-lookbook-popup[open]{transform:none!important;scale:1!important;opacity:0}
  .mahjong-lookbook-popup[open]::backdrop,.mushroom-lookbook-popup[open]::backdrop{background-color:rgba(6,8,9,0)}
}

@media(max-width:700px){
  .collection-header,.about-header{height:45px;font-size:9px}
  .collection-brand,.about-brand{left:10px;top:10px;font-size:12px}
  .collection-brand small{font-size:7px}
  .about-nav-left{display:none}
  .nav-price,.about-nav-middle{left:52%;top:14px}
  .nav-price{left:50%}
  .nav-stack,.about-nav-right{right:10px;top:9px}
  .collection-gallery{margin-top:45px;gap:42px;padding-bottom:70px}
  .collection-item{width:73vw;height:105vw;max-height:600px}
  .item-02{width:65vw;height:83vw}
  .item-03{width:73vw;height:79vw}
  .item-05{width:73vw;height:96vw}
  .item-06{width:67vw;height:auto;max-height:none}
  .item-07{width:73vw;height:92vw}
  .item-09{width:62vw;height:80vw}
  .item-10{width:70vw;height:89vw}
  .item-11{width:73vw;height:100vw}
  .item-12{width:65vw;height:84vw}
  .item-13{width:73vw;height:96vw}
  .item-14{width:67vw;height:87vw}
  .item-15{width:73vw;height:105vw}
  .item-16{width:63vw;height:83vw}
  .item-17{width:73vw;height:90vw}
  .item-18{width:66vw;height:85vw}
  .item-19{width:73vw;height:101vw}
  .item-20{width:69vw;height:90vw}
  .collection-item span{font-size:7px;bottom:-20px}
  .collection-footer{grid-template-columns:1fr 1fr;padding:10px 10px 14px;font-size:7px;gap:10px}
  .collection-footer div:nth-child(2){align-items:flex-end}
  .collection-footer div:nth-child(3){grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .lookbook-popup-close{top:7px;right:8px;padding:8px;font-size:8px}
  .about-page{overflow:auto}
  .about-header{position:absolute}
  .about-split{height:auto;min-height:100svh;display:flex;flex-direction:column}
  .about-image{height:54svh;min-height:350px;width:100%}
  .about-image img{width:min(56vw,260px);max-height:44svh}
  .about-image-caption{left:7vw;bottom:15px;font-size:6px}
  .about-copy{grid-template-columns:105px 1fr;gap:15px;padding:42px 7vw 54px;align-content:start;justify-content:stretch}
  .about-copy h1{font-size:9px}
  .about-description{font-size:10px;line-height:1.5}
  .contact-dialog{height:342px;padding:23px 20px 18px}
}
@media(prefers-reduced-motion:reduce){
  .mahjong-lookbook-popup,.mahjong-lookbook-popup::backdrop,.mushroom-lookbook-popup,.mushroom-lookbook-popup::backdrop{transition:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}