/* A quiet café with a lively rhythm: steam, turning type and a flowing ribbon. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#697754;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero-content{padding-top:280px}
.hero-stamp{position:absolute;top:calc(var(--header-height) + 28px);right:var(--gutter);width:140px;height:140px;color:var(--paper);pointer-events:none}
.hero-stamp::before{content:"";position:absolute;inset:24px;border:1px solid #f9f7ef70;border-radius:50%;background:#292e281a}
.stamp-ring,.stamp-cup{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stamp-ring{animation:stamp-turn 26s linear infinite}
.stamp-ring text{font-family:var(--body);font-size:11px;letter-spacing:1.1px;fill:currentColor}
.steam{animation:steam-rise 3.3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.steam:nth-child(3){animation-delay:-1.1s}.steam:nth-child(4){animation-delay:-2.2s}
@keyframes stamp-turn{to{transform:rotate(360deg)}}
@keyframes steam-rise{0%{opacity:0;transform:translate(-2px,9px) scaleX(.85)}25%{opacity:.95}75%{opacity:.65}100%{opacity:0;transform:translate(3px,-9px) scaleX(1.1)}}

.menu-section{position:relative;overflow:hidden;isolation:isolate}
.menu-section>.wrap{position:relative}
.menu-ornament{position:absolute;right:-30px;top:26px;width:112px;height:112px;color:#657653;pointer-events:none;opacity:.55}
.saucer-ring{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;animation:saucer-breathe 7s ease-in-out infinite}
.saucer-ring:nth-child(2){inset:15%;animation-delay:-3.5s}
.menu-spark{position:absolute;inset:32%;width:36%;height:36%;animation:stamp-turn 18s linear infinite}
@keyframes saucer-breathe{0%,100%{transform:scale(.82);opacity:.35}50%{transform:scale(1.08);opacity:.9}}

.brand-ribbon{overflow:hidden;background:var(--ink);color:var(--paper);padding-block:19px;pointer-events:none}
.ribbon-track{display:flex;width:max-content;animation:ribbon-flow 32s linear infinite}
.ribbon-group{display:flex;align-items:center;gap:30px;padding-right:30px;flex-shrink:0;white-space:nowrap;font-family:var(--display);font-size:42px;line-height:1.1;letter-spacing:-.025em}
.ribbon-group span:nth-of-type(2){font-style:italic;color:#d6ddc8}
.ribbon-group i{font-family:Georgia,serif;font-size:29px;font-style:normal;color:#b7c6a3}
@keyframes ribbon-flow{to{transform:translateX(-50%)}}
.floating-note{display:flex;justify-content:flex-end;align-items:center;gap:20px;min-height:95px;margin-bottom:26px;color:#5c6b4d;pointer-events:none}
.floating-note>span{display:block;font-family:var(--display);font-size:32px;font-style:italic;line-height:.98;text-align:center;animation:note-float 6s ease-in-out infinite}
.floating-note>svg{width:65px;height:40px;align-self:flex-end;animation:note-arrow 6s ease-in-out infinite}
@keyframes note-float{0%,100%{transform:translateY(4px) rotate(-8deg)}50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes note-arrow{0%,100%{transform:translate(-3px,0) rotate(-8deg)}50%{transform:translate(3px,6px) rotate(3deg)}}

.loop{animation-play-state:paused}
.motion-scene[data-visible="true"] .loop{animation-play-state:running}
html:is([data-page-hidden="true"],[data-modal-open="true"]) .motion-scene .loop{animation-play-state:paused}

/* One-time entrances never gate content, focus, map loading or navigation. */
.reveal-ready{transition:opacity 650ms var(--ease-out),transform 650ms var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.reveal-pending{opacity:0;transform:translateY(24px)}
.reveal-pending:focus-within{opacity:1;transform:none;transition:none}
.button,.board-zoom,.icon-button{transition:transform 160ms var(--ease-out),background-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.button:active,.board-zoom:active,.icon-button:active{transform:scale(.97)}
.button span,.text-link span,.menu-shortcuts span,.gallery-caption span:last-child{display:inline-block;transition:transform 220ms var(--ease-out)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 220ms var(--ease-out)}
.gallery-item::after{content:"↗";display:grid;place-items:center;position:absolute;right:16px;bottom:16px;width:44px;height:44px;background:var(--paper);color:var(--ink);border-radius:50%;font-size:24px;opacity:0;transform:translateY(8px) scale(.95);transition:transform 220ms var(--ease-out),opacity 220ms var(--ease-out);pointer-events:none}
.gallery-item:focus-visible::after{opacity:1;transform:none;transition:none}
.gallery-item img{transition:transform 650ms var(--ease-out)}
.lightbox-count{font-size:10px;letter-spacing:.18em;text-align:center;font-variant-numeric:tabular-nums;color:#c6cdbb;margin-top:-10px}
#lightbox-image{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-drag:none}
@media(hover:hover) and (pointer:fine){
  .desktop-nav a:hover{text-decoration:none}.desktop-nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .button:hover span,.text-link:hover span{transform:translate(3px,-3px)}
  .menu-shortcuts a:hover span{transform:translateY(4px)}
  .gallery-item:hover img{transform:scale(1.045)}
  .gallery-item:hover::after{opacity:1;transform:none}
  .gallery-grid figure:hover .gallery-caption span:last-child{transform:translate(3px,-3px)}
}
@media(hover:none){.gallery-item::after{opacity:1;transform:none;width:36px;height:36px;font-size:20px;right:12px;bottom:12px}}
@media(min-width:768px){
  .hero-stamp{width:180px;height:180px;top:calc(var(--header-height) + 38px);right:5vw}
  .hero-content{padding-top:300px}
  .menu-ornament{width:190px;height:190px;top:75px;right:5vw;opacity:.8}
  .brand-ribbon{padding-block:14px}.ribbon-group{font-size:clamp(34px,2.8vw,44px);line-height:1.05;gap:26px;padding-right:26px}.ribbon-group i{font-size:26px}
  .floating-note{margin-bottom:35px}.floating-note>span{font-size:39px}
}
@media(min-width:1200px){.hero-stamp{width:210px;height:210px}.menu-ornament{width:230px;height:230px}}
html[data-input="keyboard"]{scroll-behavior:auto}
html[data-input="keyboard"] *,html[data-input="keyboard"] *::after{transition:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal-pending{opacity:1;transform:none}
  .button:active,.icon-button:active,.board-zoom:active{transform:none}
  .gallery-item:hover img,.button:hover span,.text-link:hover span,.menu-shortcuts a:hover span,.highlight-detail>span,.gallery-caption span:last-child{transform:none!important}
  .steam{opacity:.7}
}