:root{--paper:#FFFDF7;--paper-raised:#FFFFFF;--paper-depth:#E4D3B9;--ink:#2E241F;--ink-muted:#62584F;--coffee:#53281B;--tape-oat:#F7DC80;--tape-roast:#B73518;--tape-sage:#287A4B;--tape-slate:#A58668;--tape-dark:#4C241A;--accent-warm:#E0AA17;--line:#B9AA93;--serif:'Noto Serif TC','Songti TC','PMingLiU',serif;--sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--cream:var(--paper);--muted:var(--ink-muted);--ink-soft:var(--ink-muted)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.8 var(--sans);overflow-x:hidden}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-warm);outline-offset:3px}.skip-link{position:fixed;left:16px;top:-70px;z-index:200;background:var(--coffee);color:var(--paper);padding:8px 16px}.skip-link:focus{top:12px}
.site-header{height:76px;padding:0 clamp(24px,4.5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:60;border-bottom:1px solid rgba(41,40,36,.16);background:var(--paper)}.brand{display:flex;align-items:center;gap:12px;flex:none}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ink);font:500 20px var(--serif)}.brand-lockup{display:grid;line-height:1.15}.brand-lockup strong{font:500 19px var(--serif);letter-spacing:.12em}.brand-lockup small{font:400 9px var(--mono);letter-spacing:.11em;color:var(--ink-muted);margin-top:5px}.site-nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px);font-size:14px;font-weight:500}.site-nav a:not(.nav-contact){border-bottom:1px solid transparent}.site-nav a:not(.nav-contact):hover{border-color:currentColor}.nav-contact,.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px;padding:9px 18px;background:var(--coffee);color:var(--paper-raised);font-weight:500;transition:background .2s}.nav-contact:hover,.primary-link:hover{background:var(--ink)}.menu-toggle{display:none}
.pour-story{height:290vh;position:relative}.pour-stage{position:sticky;top:0;height:100dvh;min-height:650px;overflow:hidden;background:var(--paper)}.hero-copy{position:absolute;z-index:5;left:max(6vw,calc(50vw - 640px));top:clamp(100px,17vh,200px);width:min(46vw,590px);opacity:var(--intro-opacity,1);transform:translateY(var(--hero-y,0))}.eyebrow,.number{margin:0 0 20px;color:var(--ink-muted);font-size:13px;font-weight:500;letter-spacing:.18em}.hero-copy h1,h2,h3{font-family:var(--serif);font-weight:500}.hero-copy h1{font-size:clamp(56px,5.2vw,88px);line-height:1.22;letter-spacing:.045em;margin:0 0 28px}.hero-copy em,h2 em{font-style:normal;color:var(--coffee)}.hero-description{max-width:365px;margin:0 0 22px;color:var(--ink-muted);font-size:17px;line-height:1.8}.text-link{display:inline-flex;align-items:center;gap:16px;border-bottom:1px solid currentColor;padding:0 0 3px;font-size:15px;font-weight:500;transition:gap .2s}.text-link:hover{gap:24px}.pour-art{position:absolute;inset:0;z-index:3;transform:translateY(var(--art-y,0));pointer-events:none}.kettle-art{position:absolute;width:min(58vw,840px);max-width:none;left:43%;top:8%;transform-origin:70% 36%;transform:translateY(var(--kettle-y,0)) rotate(var(--kettle-tilt,0deg))}.story-caption{position:absolute;z-index:5;left:max(6vw,calc(50vw - 640px));bottom:28px;margin:0;color:var(--ink-muted);font-size:12px;letter-spacing:.08em;opacity:var(--intro-opacity,1)}.story-caption span{margin-left:12px}.coffee-flood{position:absolute;inset:0;z-index:10;background:var(--coffee);transform:translateY(var(--flood-y,112%));will-change:transform}.flood-copy{position:absolute;z-index:12;left:50%;top:47%;width:90%;margin:0;transform:translate(-50%,var(--flood-text-y,0));text-align:center;color:var(--paper-raised);font:500 clamp(26px,3.8vw,56px)/1.5 var(--serif);letter-spacing:.06em;opacity:var(--flood-text-opacity,0)}
.intro-paper,.experiences,.visit{position:relative;background:var(--paper)}.intro-paper{padding:clamp(100px,14vw,190px) clamp(24px,5vw,64px)}.intro-inner{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw}.intro-copy{max-width:610px}.intro-copy h2,.experience-heading h2,.visit h2{font-size:clamp(38px,4.5vw,62px);line-height:1.34;margin:0 0 30px;letter-spacing:.04em}.intro-copy>p:last-child{max-width:560px;color:var(--ink-muted);font-size:17px}.intro-object{width:min(100%,530px);justify-self:end}.experiences{padding:60px clamp(24px,5vw,64px) 140px}.experience-heading{max-width:1280px;margin:0 auto 48px}.experience-list{max-width:1280px;margin:auto}.experience-row{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:8vw;min-height:500px;border-top:1px solid var(--line)}.experience-row:last-child{border-bottom:1px solid var(--line)}.experience-row-reverse .experience-art{order:2}.experience-art{height:460px;display:grid;place-items:center}.experience-art img{max-height:100%;width:100%;object-fit:contain}.experience-copy{max-width:400px}.experience-copy h3{font-size:clamp(30px,3.2vw,46px);line-height:1.3;margin:0 0 20px}.experience-copy p{color:var(--ink-muted);font-size:17px;margin:0 0 28px}.experiences>.primary-link{display:flex;width:max-content;min-height:52px;margin:60px auto 0;padding:10px 22px}.visit{overflow:hidden;border-top:1px solid var(--line);padding:105px clamp(24px,5vw,64px) 150px}.visit-inner{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.35fr .65fr;gap:5vw;position:relative;z-index:2}.visit-details{padding-top:55px}.visit-details p{margin:0 0 22px;font-weight:500}.visit-details address{font-style:normal;margin-bottom:24px}.visit-details a{display:block;width:max-content;border-bottom:1px solid currentColor;margin:12px 0;font-size:14px}.site-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:24px clamp(24px,5vw,64px);border-top:1px solid var(--line);font-size:13px;color:var(--ink-muted)}.site-footer a{text-decoration:underline;text-underline-offset:4px}.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1023px){.hero-copy{left:5vw;width:50vw;top:18vh}.hero-copy h1{font-size:clamp(48px,6vw,70px)}.kettle-art{width:70vw;left:40%;top:15%}.experience-row{min-height:410px}.experience-art{height:360px}}
@media(max-width:699px){.site-header{height:66px;padding:0 20px}.brand-mark{width:33px;height:33px}.brand-lockup strong{font-size:17px}.menu-toggle{display:grid;gap:5px;place-content:center;width:44px;height:44px;background:none;border:0}.menu-toggle span{display:block;width:22px;height:1px;background:var(--ink)}.site-nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:16px 20px 24px;background:var(--paper-raised);border-bottom:1px solid var(--line)}.site-nav.is-open{display:flex}.site-nav a{min-height:48px;display:flex;align-items:center}.site-nav .nav-contact{margin-top:10px}.pour-story{height:270vh}.pour-stage{min-height:0}.hero-copy{left:24px;top:94px;width:calc(100% - 48px)}.hero-copy h1{font-size:clamp(39px,10vw,54px);margin-bottom:15px}.hero-description{font-size:15px;max-width:280px;margin-bottom:12px}.hero-copy .eyebrow{margin-bottom:11px}.kettle-art{width:100vw;left:34%;top:45%;transform-origin:70% 36%}.story-caption{left:24px;bottom:18px;font-size:11px}.intro-paper{padding:100px 24px 80px}.intro-inner{grid-template-columns:1fr;gap:20px}.intro-copy h2,.experience-heading h2,.visit h2{font-size:clamp(32px,8vw,42px)}.intro-copy>p:last-child{font-size:16px}.intro-object{width:70%;justify-self:end}.experiences{padding:50px 24px 100px}.experience-heading{margin-bottom:30px}.experience-row{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:30px 0 54px}.experience-row-reverse .experience-art{order:0}.experience-art{height:290px}.experience-art img{width:100%;height:100%}.experience-copy{max-width:none}.experience-copy h3{font-size:30px;margin-bottom:10px}.experience-copy p{font-size:16px;margin-bottom:12px}.experiences>.primary-link{width:100%;margin-top:40px}.visit{padding:80px 24px 160px}.visit-inner{display:block}.visit-details{padding-top:10px}.site-footer{padding:24px;flex-wrap:wrap}.site-footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.pour-story{height:100dvh;min-height:700px}.pour-stage{position:relative}.hero-copy{opacity:1;transform:none}.kettle-art{transform:none}.coffee-flood,.flood-copy{display:none}.nav-contact,.primary-link,.text-link{transition:none}}

/* Constrain the scene to the actual viewport so the collage never becomes a full-screen crop. */
.kettle-art{
  width:min(42vw,55vh,560px);
  left:56%;
  top:clamp(40px,10vh,120px);
}



@media(max-width:1023px){.kettle-art{width:min(48vw,55vh,520px);left:50%;top:clamp(40px,9vh,100px)}}
@media(max-width:699px){.kettle-art{width:min(70vw,48vh,380px);left:29%;top:54%}}
@media (min-width:700px) and (max-width:1023px){.kettle-art{width:min(45vw,55vh,520px);left:55%}}
@media(max-width:699px){}
/* Shared paper controls across the public site and reservation pages. */
:root{--control-radius:0;--control-border:var(--line);--control-surface:var(--paper-raised);--control-selected:#EEE7DB}
html{background:var(--paper);scrollbar-color:var(--line) var(--paper)}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
html::-webkit-scrollbar-track{background:var(--paper)}
.brand-mark-photo{display:block;flex:none;border:0;background-image:url('./assets/brand-icon.jpg');background-repeat:no-repeat;background-size:640px 640px;background-position:-144px -311px;mix-blend-mode:multiply}
button,input,select,textarea{border-radius:0}
.nav-contact,.primary-link{border:1px solid var(--coffee);border-radius:var(--control-radius);background:var(--coffee);color:var(--paper-raised)}
.nav-contact:hover,.primary-link:hover{border-color:var(--ink);background:var(--ink)}
.menu-toggle{border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-surface)}
.menu-toggle:hover{border-color:var(--coffee);background:var(--control-selected)}
@media(prefers-reduced-motion:reduce){.nav-contact,.primary-link,.menu-toggle{transition:none}}

/* Motion and mobile layout corrections from the recorded scroll-through. */
.hero-copy,.story-caption{opacity:1;transform:none}
.pour-art{transform:none}
.kettle-art{transform:rotate(var(--kettle-tilt,0deg))}

.reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
.experience-art img{width:auto;max-width:100%;max-height:400px;height:auto;object-fit:contain}
@media(max-width:699px){
  .kettle-art{width:min(65vw,320px);left:34%;top:48%}
  
  .experience-row{display:block;min-height:0}
  .experience-art{display:block;width:100%;height:auto;min-height:0;margin:0 0 24px}
  .experience-art img{display:block;width:min(58vw,300px);height:auto;max-height:none;margin:0 auto}
  .experience-copy{position:relative;z-index:1;max-width:none}
}
/* The kettle rotates as one flat washi object. */
.kettle-unit{position:absolute;width:min(52vw,65vh,700px);left:45%;top:clamp(105px,18vh,205px);transform-origin:70% 36%;transform:rotate(var(--kettle-tilt,0deg))}
.kettle-unit .kettle-art{position:static;display:block;width:100%;height:auto;max-width:100%;transform:none}

@media(min-width:700px) and (max-width:1023px){.kettle-unit{width:min(55vw,63vh,610px);left:45%;top:clamp(80px,15vh,165px)}}
@media(max-width:699px){.kettle-unit{width:min(77vw,370px);left:25%;top:50%}}
/* A single coffee-coloured paper edge rises across the page. */
.coffee-edge{position:absolute;left:0;top:-95px;width:100%;height:110px;fill:var(--coffee);pointer-events:none}
/* The pour begins at the spout and stops at the rising coffee surface. */
.spout-anchor{position:absolute;left:2.5%;top:20%;width:1px;height:1px;pointer-events:none}
.pour-stream{position:absolute;z-index:2;left:var(--stream-x,0px);top:var(--stream-y,0px);width:18px;height:var(--stream-height,45vh);opacity:var(--stream-opacity,0);clip-path:inset(0 0 var(--stream-hidden,100%) 0);pointer-events:none;overflow:visible}
.pour-stream path{fill:none;stroke-linecap:round}
.pour-stream-body{stroke:#A07857;stroke-width:8;opacity:.9}
.pour-stream-glint{stroke:var(--tape-oat);stroke-width:2;stroke-dasharray:38 82;opacity:.28}
.coffee-landing{position:absolute;z-index:9;left:var(--impact-x,50%);bottom:-18px;width:var(--landing-width,0px);height:38px;transform:translateX(-50%);border-radius:50% 50% 0 0;background:var(--coffee);opacity:var(--landing-opacity,0);pointer-events:none}
.coffee-impact{position:absolute;z-index:11;left:var(--impact-x,50%);top:var(--impact-y,100%);width:170px;height:100px;overflow:visible;transform:translate(-50%,-49px);color:#8B684E;opacity:var(--impact-opacity,0);pointer-events:none}
.coffee-impact.on-coffee{color:var(--tape-oat)}
.impact-ripple,.impact-arc{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.impact-ripple{stroke-width:2.1;opacity:.7;transform-origin:60px 34px}
.impact-ripple-second{opacity:.45}
.impact-arc{stroke-width:2.7;opacity:.9;transform-origin:60px 33px}
.impact-drop{fill:currentColor;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .pour-stream.is-flowing .pour-stream-glint{animation:stream-flow 1.5s linear infinite}
  .coffee-impact.is-active .impact-ripple-first{animation:ripple-open 1.28s ease-out infinite}
  .coffee-impact.is-active .impact-ripple-second{animation:ripple-open 1.28s ease-out -.42s infinite}
  .coffee-impact.is-active .impact-arc{animation:splash-open 1.28s ease-out infinite}
  .coffee-impact.is-active .impact-drop-one{animation:drop-left 1.28s ease-out infinite}
  .coffee-impact.is-active .impact-drop-two{animation:drop-right 1.28s ease-out -.19s infinite}
  .coffee-impact.is-active .impact-drop-three{animation:drop-right 1.28s ease-out -.43s infinite}
}
@keyframes stream-flow{to{stroke-dashoffset:-120}}
@keyframes ripple-open{0%,12%{opacity:0;transform:scaleX(.45)}28%{opacity:.7}85%,100%{opacity:0;transform:scaleX(1.4)}}
@keyframes splash-open{0%,12%{opacity:0;transform:translateY(5px) scaleY(.65)}28%{opacity:.9}75%,100%{opacity:0;transform:translateY(-7px) scaleY(1.14)}}
@keyframes drop-left{0%,12%{opacity:0;transform:translate(9px,12px)}30%{opacity:1}78%,100%{opacity:0;transform:translate(-17px,-18px)}}
@keyframes drop-right{0%,12%{opacity:0;transform:translate(-8px,12px)}30%{opacity:1}78%,100%{opacity:0;transform:translate(17px,-17px)}}
@media(max-width:699px){.pour-stream{width:13px}}
@media(prefers-reduced-motion:reduce){.kettle-unit{transform:none}.pour-stream,.coffee-impact,.coffee-landing{display:none}}

/* The interactive map stays legible within the paper layout. */
.visit-map{position:relative;z-index:2;max-width:1280px;height:clamp(330px,36vw,470px);margin:64px auto 0;border:1px solid var(--line);background:var(--paper-depth)}
.visit-map iframe{display:block;width:100%;height:100%;border:0}
.visit-details a.line-add-button,.booking-aside a.line-add-button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-width:230px;min-height:52px;margin:20px 0 0;padding:11px 20px;border:1px solid var(--coffee);background:var(--coffee);color:var(--paper-raised);font-size:15px;font-weight:600;line-height:1.4;transition:background .2s,border-color .2s}
.visit-details a.line-add-button:hover,.booking-aside a.line-add-button:hover{border-color:var(--ink);background:var(--ink)}
@media(max-width:699px){.visit-details a.line-add-button{width:100%;max-width:300px}}
@media(prefers-reduced-motion:reduce){.visit-details a.line-add-button,.booking-aside a.line-add-button{transition:none}}
@media(max-width:699px){.visit-map{height:340px;margin-top:36px}}

/* The full navigation needs more room than the intermediate browser widths provide. */
@media (min-width:700px) and (max-width:1100px){
  .menu-toggle{display:grid;gap:5px;place-content:center;width:44px;height:44px;background:var(--control-surface);border:1px solid var(--control-border)}
  .menu-toggle span{display:block;width:22px;height:1px;background:var(--ink)}
  .site-nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:16px 24px 24px;background:var(--paper-raised);border-bottom:1px solid var(--line)}
  .site-nav.is-open{display:flex}
  .site-nav a{min-height:48px;display:flex;align-items:center}
  .site-nav .nav-contact{margin-top:10px}
}

/* Contact details stay available on every public page. */
.site-footer{display:block;padding:0 clamp(24px,5vw,64px);color:var(--ink-muted);background:var(--paper-depth)}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:start;gap:clamp(24px,5vw,72px);padding:56px 0 48px}
.footer-brand{display:grid;justify-items:start;gap:3px}
.footer-brand strong{color:var(--ink);font:500 24px/1.4 var(--serif);letter-spacing:.08em}
.footer-brand span{font:400 11px/1.5 var(--mono);letter-spacing:.12em}
.footer-brand p{margin:14px 0 0;font-size:14px}
.footer-contact{display:grid;justify-items:start;gap:10px;min-width:0;font-style:normal;font-size:14px;line-height:1.7}
.footer-label{color:var(--ink);font-weight:600;letter-spacing:.12em}
.site-footer .footer-contact a,.site-footer .footer-bottom a{border-bottom:1px solid currentColor;text-decoration:none;text-underline-offset:4px}
.site-footer .footer-line-button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-width:185px;min-height:48px;padding:10px 16px;border:1px solid var(--coffee);background:var(--coffee);color:var(--paper-raised);font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s}
.site-footer .footer-line-button:hover{border-color:var(--ink);background:var(--ink)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0 22px;border-top:1px solid var(--line);font-size:12px}
.footer-bottom small{font-size:inherit}
@media(max-width:900px){.footer-main{grid-template-columns:1fr 1fr}.footer-line-button{grid-column:2;justify-self:start}}
@media(max-width:600px){.site-footer{padding:0 24px}.footer-main{grid-template-columns:1fr;gap:28px;padding:42px 0 36px}.site-footer .footer-brand span:nth-child(2){display:block}.footer-line-button{grid-column:auto;width:100%;max-width:320px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){.footer-line-button{transition:none}}

/* Show the supplied handwritten mark instead of isolating one coffee bean. */
.site-header{height:100px}
.site-header .brand-mark-photo{width:128px;height:84px;background-size:194px 194px;background-position:-43px -40px}
.site-header .brand-lockup{display:none}
@media(max-width:699px){.site-header{height:92px}.site-header .site-nav{top:92px}}
@media(min-width:700px) and (max-width:1100px){.site-header .site-nav{top:100px}}