@charset "UTF-8";
:root{color-scheme:light;--paper:#eee9df;--ink:#39312a;--muted:#827666;--line:#cfc5b6;--serif:"Songti SC","STSong","Noto Serif CJK SC",serif;--card:clamp(260px,33vw,560px)}
*{box-sizing:border-box}html{background:var(--paper);scrollbar-gutter:stable}body{margin:0;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:disabled{opacity:.24;cursor:default}[hidden]{display:none!important}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #8c583a;outline-offset:7px}img{display:block;max-width:100%}h1,p{margin:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.masthead{height:115px;padding:28px 4.5vw;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand>span{font:32px/1 var(--serif);letter-spacing:.05em}.brand small{font:9px/1.5 Georgia,serif;letter-spacing:.16em;width:48px}.preview-mark{font-size:10px;letter-spacing:.12em;color:var(--muted)}.live-link{font-size:11px;letter-spacing:.08em}.collection{min-height:calc(100svh - 115px)}.collection-heading{padding:16px 5vw 0;display:flex;justify-content:space-between;align-items:center;gap:28px}.collection-heading h1{font:400 clamp(25px,3vw,39px)/1.4 var(--serif);letter-spacing:.12em}.categories{display:flex;gap:26px;flex-wrap:wrap}.categories a{min-height:44px;display:flex;align-items:center;font-size:12px;color:var(--muted);position:relative;white-space:nowrap}.categories a[aria-current]{color:var(--ink)}.categories a[aria-current]:after{content:"";position:absolute;height:1px;background:currentColor;bottom:5px;left:0;right:0}
.bread-track{display:flex;gap:3.7vw;overflow-x:auto;padding:50px calc((100% - var(--card))/2) 24px;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--card))/2);scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab}.bread-track::-webkit-scrollbar{display:none}.bread-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.loaf{flex:0 0 var(--card);width:var(--card);position:relative;text-align:center;scroll-snap-align:center;scroll-snap-stop:normal;--scale:.8;--opacity:.7;outline-offset:0}.loaf-image{display:flex;align-items:flex-end;justify-content:center;width:100%;height:clamp(280px,49svh,650px);transform:scale(var(--scale));opacity:var(--opacity);transform-origin:center bottom;will-change:transform;transition:opacity .15s}.loaf-image img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;user-select:none}.loaf-name{font:400 16px/1.8 var(--serif);letter-spacing:.04em;display:block;margin:23px 20px 0;overflow-wrap:anywhere}.loaf-open{display:inline-block;margin-top:12px;font-size:18px;opacity:0;transition:opacity .2s}.loaf[aria-current] .loaf-open,.loaf:hover .loaf-open,.loaf:focus-visible .loaf-open{opacity:.7}.collection-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 5vw 30px;gap:25px}.collection-signature{font:12px var(--serif);letter-spacing:.14em;color:var(--muted)}.track-controls{display:flex;gap:24px}.track-controls button{height:44px;width:44px;font:24px Georgia,serif}.empty{padding:80px 8vw;font:18px/2 var(--serif)}
body.detail-open .masthead{display:none}.detail{display:grid;grid-template-columns:53% 47%;min-height:100svh}.detail-close{position:fixed;right:3.8vw;top:25px;z-index:6;display:flex;align-items:center;gap:16px;font-size:12px;min-height:44px;padding:0 12px;background:var(--paper)}.detail-close span{font:26px/1 Georgia,serif}.detail-visual{position:sticky;top:0;height:100svh;align-self:start;min-width:0;background:#e7e0d5}.photo-stage{height:100%;position:relative;outline-offset:-5px;touch-action:pan-y;overflow:hidden}.photo-stage>img{width:100%;height:100%;object-fit:contain;user-select:none}.photo-stage>img.photo-changing{animation:photo-in .32s ease both}.photo-prev,.photo-next{position:absolute;top:50%;transform:translateY(-50%);height:48px;width:48px;background:#f6f0e6da;border-radius:50%;font:23px Georgia,serif;z-index:2}.photo-prev{left:20px}.photo-next{right:20px}.photo-index{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font:12px/1.8 Georgia,serif;letter-spacing:.13em;background:#f6f0e6df;padding:3px 10px}.photo-index:empty{display:none}.detail-copy{padding:clamp(95px,15svh,180px) clamp(35px,5vw,100px) 60px;min-width:0}.detail-category{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:24px}.detail-copy h1{font:400 clamp(27px,2.55vw,43px)/1.55 var(--serif);letter-spacing:.045em;margin:0 0 38px;overflow-wrap:anywhere;outline:none}.bread-body{white-space:pre-wrap;font-size:14px;line-height:2.05;overflow-wrap:anywhere}.other-breads{margin-top:clamp(65px,10svh,140px);display:flex;gap:23px;overflow-x:auto;padding:6px 3px 16px;scrollbar-width:thin;scrollbar-color:#c2b6a4 transparent;scroll-snap-type:x proximity}.other-breads a{flex:0 0 87px;scroll-snap-align:start;opacity:.65}.other-breads a:hover,.other-breads a[aria-current]{opacity:1}.other-breads img{width:87px;height:85px;object-fit:contain}.other-breads span{display:block;font:11px/1.75 var(--serif);margin-top:13px}.other-breads a[aria-current] span{text-decoration:underline;text-underline-offset:5px}.transition-photo{position:fixed;z-index:10;pointer-events:none;max-width:none;object-fit:contain}.detail-copy.entering{animation:copy-in .5s .08s both ease-out}@keyframes copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes photo-in{from{opacity:.25}to{opacity:1}}
@media(min-width:1600px){.bread-body{font-size:16px}.loaf-name{font-size:19px}}
@media(max-width:760px){:root{--card:73vw}.masthead{height:91px;padding:21px 23px}.brand>span{font-size:29px}.brand small{font-size:8px}.preview-mark{font-size:9px}.live-link{font-size:10px}.collection{min-height:calc(100svh - 91px)}.collection-heading{display:block;padding:17px 24px 0}.collection-heading h1{font-size:27px}.categories{gap:23px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:14px}.categories a{font-size:11px}.bread-track{gap:8vw;padding-top:29px;padding-bottom:13px}.loaf-image{height:clamp(260px,43svh,540px)}.loaf-name{font-size:16px;margin:20px 8px 0}.loaf-open{margin-top:7px}.collection-footer{padding:10px 24px 22px}.collection-signature{font-size:11px}.detail{display:block}.detail-close{position:absolute;right:14px;top:12px;font-size:11px;gap:12px;background:#f5f0e7e6}.detail-visual{position:relative;height:66svh;min-height:360px;max-height:720px}.photo-stage>img{object-fit:contain}.photo-prev,.photo-next{width:42px;height:42px}.photo-prev{left:12px}.photo-next{right:12px}.photo-index{bottom:16px;font-size:11px}.detail-copy{padding:43px 27px 38px}.detail-category{font-size:10px;margin-bottom:15px}.detail-copy h1{font-size:29px;line-height:1.5;margin-bottom:27px}.bread-body{font-size:14px;line-height:2.1}.other-breads{margin-top:54px;margin-right:-12px}.other-breads a{flex-basis:80px}.other-breads img{width:80px;height:82px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.loaf-image{transform:none;will-change:auto}.transition-photo{display:none}}
@media(max-width:760px){:root{--card:64vw}.bread-track{gap:4vw}}
#bread-name:focus-visible{outline:none}
.bread-gallery{isolation:isolate}.gallery-space{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.075;filter:grayscale(.25) blur(6px);overflow:hidden}.gallery-space img{width:100%;height:100%;object-fit:cover}.bread-gallery>.masthead,.bread-gallery>.collection,.bread-gallery>.detail{position:relative;z-index:1}.preview-mark{display:flex;gap:24px}.preview-mark a:hover{text-decoration:underline;text-underline-offset:5px}.empty img{display:block;max-width:min(420px,85vw);margin-top:30px}.bread-gallery .detail-close{position:fixed;z-index:6}
@media(max-width:760px){.preview-mark{gap:14px;white-space:nowrap}.bread-gallery .live-link{display:none}.bread-gallery .detail-close{position:absolute}}
.brand img{display:block;width:178px;height:auto}
@media(max-width:760px){.brand img{width:135px}}