.desktop-only{display:none}
.hero-copy p:not(.hero-kicker){width:100%;overflow-wrap:anywhere}
body{overflow-x:hidden}

/* Image orientation system: selected gallery assets remain in direction-matched cards. */
.gallery-grid{grid-template-columns:1fr;gap:14px}
.gallery-item.portrait{aspect-ratio:3/4}
.gallery-item.landscape{aspect-ratio:3/2}
.gallery-item.square{aspect-ratio:1/1}
.gallery-item img{object-fit:cover}

/* One stable brand theme, derived from the café interior. */
.menu-section,footer,.map-wrap{background:#17285f}
.menu-section .section-label{color:#e8bd61}
.button-primary{background:#c65010}
.button-primary:hover,.button-primary:focus-visible{background:#a93d0a}
.text-link{color:#ad400c}
.visit-section{background:#c65010;color:#fff}
.visit-section .section-label,.visit-section .visit-note,.visit-section .phone{color:#fff}
.visit-section .button-primary{background:#17285f;color:#fff}
.visit-section .button-primary:hover,.visit-section .button-primary:focus-visible{background:#0f1d4a}

/* The imagery stays warm and open; orange is reserved for actions and the visit scene. */
.story{color:var(--text)}
.story-image{width:min(100%,300px);aspect-ratio:4/5;justify-self:center}
.story .section-label{color:#c65010}
.story .text-link{color:#ad400c}
.story-copy p:not(.section-label){font-size:1.08rem;line-height:1.62}

/* Coffee section: one generous invitation, then quieter place context. */
.coffee-copy{max-width:39rem}
.coffee-copy .coffee-lead{max-width:30rem;margin:0;font-size:clamp(1.32rem,2vw,1.56rem);font-weight:700;line-height:1.38;text-wrap:pretty}
.coffee-copy .coffee-details{max-width:32rem;margin:22px 0 26px;padding-top:18px;border-top:1px solid rgba(23,40,95,.18)}
.coffee-copy .coffee-details p{margin:0;font-size:clamp(1.22rem,1.65vw,1.36rem);line-height:1.58;color:#4e5d80;text-wrap:pretty}

/* Verified public review excerpts sit as a compact, source-linked chapter before the map. */
.reviews-section{max-width:none;background:#f4f5f3;color:#17285f}
.reviews-heading,.reviews-grid{max-width:1240px;margin-left:auto;margin-right:auto}
.reviews-heading{margin-bottom:36px}
.reviews-heading .section-label{color:#ad400c}
.reviews-heading h2{max-width:10ch;margin:0 0 16px;font-size:clamp(2.7rem,9vw,4.7rem);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.reviews-grid{display:grid;gap:16px}
.review-card{display:grid;grid-template-rows:auto 1fr auto;gap:20px;align-content:stretch;min-height:252px;padding:26px;background:#dce6ef}
.review-stars{margin:0;color:#c65010;font-size:1.05rem;line-height:1;letter-spacing:.13em}
.review-card blockquote{margin:0;font-size:1.28rem;font-weight:700;line-height:1.38;letter-spacing:-.02em;text-wrap:pretty}
.review-meta{display:flex;align-items:center;gap:12px}.review-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#17285f;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.04em}.review-meta strong{display:block;font-size:.96rem}.review-meta p{margin:2px 0 0;color:#4e5d80;font-size:.8rem}
@media (min-width:700px){.reviews-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.review-card{min-height:280px;padding:30px}.reviews-heading h2{margin-bottom:0}}

/* A cool, light-blue gallery field separates the image chapter from the coffee story. */
.gallery-section{max-width:none;background:#dce6ef}
.gallery-section .gallery-grid{max-width:1240px;margin:auto}
.gallery-section .section-label{color:#ad400c}

/* Gallery: let the invitation breathe across the full image width rather than
   keeping the title in a narrow, centred column. */
.gallery-section .section-heading{max-width:1240px;margin:0 auto clamp(34px,5vw,58px)}
.gallery-section .section-heading h2{max-width:9.5ch;margin:0;font-size:clamp(3.2rem,12vw,4.5rem);line-height:.94}
.gallery-section .section-label{margin-bottom:16px;font-size:.74rem}

/* Looser display type better matches the handmade interior. */
.wordmark{letter-spacing:-.03em}
.wordmark span{letter-spacing:-.035em}
.hero h1{letter-spacing:-.035em;text-wrap:balance}
.story h2,.section-heading h2,.coffee-copy h2,.visit-copy h2,.panel-language-view h2{letter-spacing:-.035em;text-wrap:balance}
.mobile-nav a{letter-spacing:-.025em}

@media (min-width:700px){.desktop-only{display:block}.desktop-socials{display:flex}.story{position:relative;left:-72px}.story-image{width:min(100%,460px)}.story h2{font-size:clamp(3.8rem,6.3vw,5.4rem)}.story-copy p:not(.section-label){font-size:1.12rem}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.gallery-item.landscape{grid-column:auto}}
@media (min-width:1024px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* Coffee image and copy share the desktop composition evenly. */
@media (min-width:700px){.coffee-section{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Gallery heading: keep the place label and invitation together, aligned to the image grid. */
@media (min-width:700px){.gallery-section .section-heading{display:block}.gallery-section .section-label{margin:0 0 18px}.gallery-section .section-heading h2{max-width:12ch;font-size:clamp(4rem,6.5vw,5.45rem)}}

/* Menu: title and context share one editorial header before the three equal food stories. */
.menu-section{padding:80px 22px}
.menu-section .section-heading{max-width:1240px;margin:0 auto 40px}
.menu-section .section-heading h2{max-width:14ch;margin:0 0 18px}
.menu-section .section-heading>p:last-child{margin:0}
.menu-grid{grid-template-columns:1fr;gap:24px}
.menu-grid article{gap:12px}
.menu-grid img{aspect-ratio:4/3}
@media (min-width:768px) and (max-width:1023px){.menu-section{padding:112px 44px}.menu-section .section-heading{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);column-gap:40px;row-gap:12px;align-items:end}.menu-section .section-label{grid-column:1;grid-row:1;margin:0}.menu-section .section-heading h2{grid-column:1;grid-row:2;margin:0}.menu-section .section-heading>p:last-child{grid-column:2;grid-row:1 / span 2}.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (min-width:1024px){.menu-section{padding:112px 44px}.menu-section .section-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);column-gap:clamp(48px,7vw,104px);row-gap:12px;align-items:end}.menu-section .section-label{grid-column:1;grid-row:1;margin:0}.menu-section .section-heading h2{grid-column:1;grid-row:2;margin:0}.menu-section .section-heading>p:last-child{grid-column:2;grid-row:1 / span 2}.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* Keep the Demo's brand appearance stable regardless of system colour preference. */
@media (prefers-color-scheme:dark){:root{--paper:#f4f5f3;--paper-deep:#e7e9e7;--text:#17285f;--muted:#4e5d80;--line:rgba(23,40,95,.16)}.site-header.scrolled{background:var(--paper);color:var(--ink)}.mobile-panel,.language-menu{background:var(--paper);color:var(--text)}.menu-section,footer,.map-wrap{background:#17285f}.visit-section{background:#c65010}.visit-section .visit-note{color:#fff}}

/* Motion system: short, interruptible transitions that support the café's image-led pacing. */
:root{--motion-out:cubic-bezier(.23,1,.32,1);--motion-move:cubic-bezier(.77,0,.175,1)}
.site-header{transition:background-color 220ms var(--motion-out),color 220ms var(--motion-out),box-shadow 220ms var(--motion-out)}
.wordmark{display:inline-block;transform-origin:left center;transition:transform 220ms var(--motion-out)}
.site-header.scrolled .wordmark{transform:scale(.94)}
.desktop-nav a,.footer a:not(.wordmark),.text-link{position:relative;transition:color 160ms ease}
.desktop-nav a::after,.text-link::after{content:"";position:absolute;right:0;bottom:-5px;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform 180ms var(--motion-out)}
.text-link::after{bottom:-6px;transform:scaleX(1);transform-origin:left center}
.text-link span{display:inline-block;transition:transform 160ms var(--motion-out)}
.button,.language-button,.menu-button,.close-panel,.mobile-language-trigger,.back-to-menu,.gallery-item,.lightbox button,.language-option{transition:transform 140ms var(--motion-out),background-color 180ms ease,color 180ms ease,opacity 180ms ease}
.button:active,.language-button:active,.menu-button:active,.close-panel:active,.mobile-language-trigger:active,.back-to-menu:active,.gallery-item:active,.lightbox button:active,.language-option:active{transform:scale(.97)}

/* The popover appears from its trigger, not from the centre of the page. */
.language-menu{display:grid;visibility:hidden;pointer-events:none;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity 180ms var(--motion-out),transform 180ms var(--motion-out),visibility 0s linear 180ms}
.language-menu.open{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0) scale(1);transition-delay:0s}

/* The drawer is slightly slower into view and exits faster, so rapid toggles stay responsive. */
.mobile-panel{transition:transform 220ms var(--motion-out)}
.mobile-panel.open{transition-duration:320ms}
.mobile-panel .panel-menu-view>*{opacity:0;transform:translateX(14px);transition:opacity 180ms var(--motion-out),transform 220ms var(--motion-out)}
.mobile-panel.open .panel-menu-view>*{opacity:1;transform:translateX(0)}
.mobile-panel.open .panel-menu-view>*:nth-child(1){transition-delay:70ms}.mobile-panel.open .panel-menu-view>*:nth-child(2){transition-delay:120ms}.mobile-panel.open .panel-menu-view>*:nth-child(3){transition-delay:165ms}

/* Hero has one composed entrance: image reveal first, then a compact reading sequence. */
@media (prefers-reduced-motion:no-preference){
  .hero>img{animation:hero-image-reveal 620ms var(--motion-move) both}
  .hero-shade{animation:hero-shade-reveal 520ms var(--motion-out) both}
  .hero-copy>*{opacity:0;transform:translateY(15px);animation:hero-copy-enter 440ms var(--motion-out) forwards}
  .hero-copy>*:nth-child(1){animation-delay:170ms}.hero-copy>*:nth-child(2){animation-delay:230ms}.hero-copy>*:nth-child(3){animation-delay:290ms}.hero-copy>*:nth-child(4){animation-delay:350ms}
  @keyframes hero-image-reveal{from{clip-path:inset(0 0 100% 0);transform:scale(1.045)}to{clip-path:inset(0);transform:scale(1)}}
  @keyframes hero-shade-reveal{from{opacity:0}to{opacity:1}}
  @keyframes hero-copy-enter{to{opacity:1;transform:translateY(0)}}
}

/* Sections default to visible; JavaScript opts into a once-only reveal only after it is ready. */
.motion-reveal{transition:opacity 380ms var(--motion-out) var(--reveal-delay,0ms),transform 380ms var(--motion-out) var(--reveal-delay,0ms),clip-path 400ms var(--motion-move) var(--reveal-delay,0ms)}
.motion-reveal.is-visible{opacity:1;transform:translateY(0);clip-path:inset(0)}

/* Gallery hover is intentionally desktop-only so touch taps cannot leave a false hover state. */
@media (hover:hover) and (pointer:fine){
  .desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
  .text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(0);transform-origin:right center}
  .text-link:hover span,.text-link:focus-visible span{transform:translateX(3px)}
  .gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.045);filter:brightness(1.05)}
  .gallery-item:hover,.gallery-item:focus-visible{transform:translateY(-3px)}
  .button:hover,.language-button:hover,.lightbox button:hover{transform:translateY(-1px)}
}
@media (hover:none){.gallery-item:hover img{transform:none}}

/* Keep the mounted lightbox in the render tree so opening, closing and rapid navigation can retarget smoothly. */
.lightbox{display:flex;visibility:hidden;pointer-events:none;opacity:0;background:rgba(7,19,27,.96);transition:opacity 240ms var(--motion-out),visibility 0s linear 240ms}
.lightbox.open{visibility:visible;pointer-events:auto;opacity:1;transition-delay:0s}
.lightbox img{opacity:0;transform:translateY(8px) scale(.96);transition:opacity 230ms var(--motion-out),transform 280ms var(--motion-out)}
.lightbox.open img{opacity:1;transform:translateY(0) scale(1)}
.lightbox img.is-switching{opacity:0;transform:translateX(10px) scale(.985);transition-duration:110ms}
.gallery-item:focus-visible,.button:focus-visible,.language-button:focus-visible,.menu-button:focus-visible,.close-panel:focus-visible,.mobile-language-trigger:focus-visible,.back-to-menu:focus-visible,.language-option:focus-visible,.lightbox button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .site-header,.wordmark,.language-menu,.mobile-panel,.mobile-panel .panel-menu-view>*,.motion-reveal,.lightbox,.lightbox img{transition-duration:160ms!important}
  .site-header.scrolled .wordmark,.motion-ready .reveal-up:not(.is-visible),.motion-ready .reveal-card:not(.is-visible),.motion-ready .reveal-gallery:not(.is-visible),.lightbox img,.lightbox.open img{transform:none}
  .motion-ready .reveal-clip:not(.is-visible),.motion-ready .reveal-gallery:not(.is-visible){clip-path:inset(0)}
}

/* Production responsiveness: all anchor destinations clear the fixed header. */
html{scroll-padding-top:84px}
#story,#menu,#gallery,#visit{scroll-margin-top:84px}
img{max-width:100%;height:auto}
/* The six selected gallery files are all portrait originals (0.67–0.80 W/H).
   Keeping one 3:4 card ratio creates a strict editorial grid without turning
   any original into a landscape or square presentation. */
.gallery-grid .gallery-item.portrait{aspect-ratio:3/4!important}
.story h2,.section-heading h2,.coffee-copy h2,.visit-copy h2,.review-card blockquote{overflow-wrap:anywhere}
.footer-socials a,.panel-socials a,.desktop-socials a{width:44px;height:44px}
footer a:focus-visible,.phone:focus-visible,.wordmark:focus-visible,.mobile-nav a:focus-visible,.skip-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.text-link,.review-source{min-height:44px;align-items:center}.text-link{display:inline-flex}.review-source{display:inline-flex;margin-top:2px;color:#4e5d80;font-size:.8rem;text-underline-offset:3px;text-decoration-thickness:1px}.review-source:hover,.review-source:focus-visible{color:#17285f}

/* The story grid stays inside its own responsive container rather than relying on clipped overflow. */
@media (min-width:700px){.story{position:static;left:auto}}

/* Tablet widths keep the full mobile navigation; long translated labels get room to breathe. */
@media (min-width:700px) and (max-width:839px){.desktop-nav,.desktop-only{display:none!important}.menu-button{display:grid}}

@media (max-width:420px){.section{padding-inline:18px}.menu-section{padding-inline:18px}.hero-copy{padding-inline:18px}.visit-copy{padding-inline:18px}.reviews-heading h2{font-size:clamp(2.55rem,13.5vw,3.4rem)}.review-card{padding:22px}.lightbox{padding-inline:12px}.lightbox-prev,.lightbox-next{width:44px;height:64px}}

/* Desktop copy is anchored on the left, so the overlay darkens left-to-right. */
@media (min-width:1024px){.hero-shade{background:linear-gradient(90deg,rgba(5,23,34,.84) 0%,rgba(5,23,34,.58) 28%,rgba(5,23,34,.14) 48%,rgba(5,23,34,0) 62%)}}

/* On smaller screens the copy sits at the bottom; retain the upward fade and reveal more of the room on the left. */
@media (max-width:1023px){.hero>img{object-position:62% center}.hero-shade{background:linear-gradient(0deg,rgba(5,23,34,.84) 0%,rgba(5,23,34,.54) 26%,rgba(5,23,34,.12) 44%,rgba(5,23,34,0) 56%)}}