/* Hallmark · shape: Menu-led field guide · genre: editorial · theme: Hedgerow (deal 2/3) · job: visit · draw: fed717
 * hero: Ledge · nav: slab · footer: mast · imagery: owner's storefront and original menu · signature: the actual 506 streetfront beside a Vietnamese coffee invitation · hedgerow: hedge
 * axes: dark/high-contrast-serif/chromatic-green · posture: drenched · contrast: pass · fold: pass · hero-review: fix, 1 finding resolved, identity added to invitation · v2.0.0 */
/* Hallmark · finish-review: subagent, 1 finding resolved, concrete menu headings replace generic copy. */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: H, a short invitation balances the busy real storefront photograph; Lora substitutes Prata for consistent Vietnamese glyphs. */
@import url('./tokens.css');
@import url('./base.css');
:root { --font-display: 'Lora', Georgia, serif; --color-transparent: transparent; --color-cream-muted: oklch(42% 0.034 158); --space-photo-inset: 28px; --space-menu-row: 28px; }
html { scroll-behavior: smooth; }
body { font-size: 17px; }
a,button { -webkit-tap-highlight-color: var(--color-transparent); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
a:active,button:active { opacity: .8; }
a[aria-disabled="true"],button:disabled { opacity: .55; cursor: not-allowed; }
.skip { position: absolute; top: calc(-1 * var(--space-3xl)); left: var(--space-lg); z-index: var(--z-toast); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-md); }
.skip:focus-visible { top: var(--space-md); }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 104px; border-bottom: 1px solid var(--color-rule); }
.wordmark { font-family: var(--font-display); font-size: 28px; text-decoration: none; white-space: nowrap; }
.wordmark span { font-size: 1.3em; }
nav { display: flex; align-items: center; gap: var(--space-xl); font-size: 14px; }
nav a { text-decoration: none; white-space: nowrap; }
nav a:hover,.text-link:hover { color: var(--color-accent); }
.nav-contact { padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.hero { min-height: calc(100svh - 104px); max-height: 930px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-xl) var(--space-2xl); align-items: center; }
.hero-copy { padding-right: var(--space-lg); }
h1 { font-size: clamp(2.7rem, 4.6vw, 4.7rem); line-height: 1.15; max-width: 12ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 32ch; color: var(--color-ink-2); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-lg); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.text-link { font-size: 14px; text-underline-offset: .35em; }
.hero-hours { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-2xl); font-size: 14px; color: var(--color-ink-2); }
.hero-hours strong { font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hero-photo { margin: 0; position: relative; padding-left: var(--space-photo-inset); }
.hero-photo::before { content: ''; position: absolute; inset: var(--space-lg) var(--space-lg) var(--space-xl) 0; border: 1px solid var(--color-rule); }
.hero-photo img { width: 100%; height: clamp(400px, 64svh, 650px); object-fit: cover; object-position: center 55%; position: relative; }
figcaption { font-size: 12px; margin-top: var(--space-sm); color: var(--color-ink-2); }
.menu-coffee { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); --color-focus: var(--color-accent-deep); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); margin-bottom: var(--space-2xl); }
.section-heading p { max-width: 45ch; font-size: 16px; }
.menu-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--gap-columns); }
.menu-side { display: flex; flex-direction: column; justify-content: space-between; align-items: start; }
.menu-side .large-price { font-family: var(--font-display); font-size: clamp(5rem, 10vw, 9rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.menu-side p { font-size: 15px; color: var(--color-cream-muted); }
.menu-side a { font-size: 14px; margin-top: var(--space-xl); }
.menu-list { margin: 0; border-top: 1px solid currentColor; }
.menu-list > div { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-columns); padding-block: var(--space-menu-row); border-bottom: 1px solid color-mix(in oklab, currentColor 22%, var(--color-transparent)); }
.menu-list dt { font-size: clamp(1.2rem, 1.6vw, 1.55rem); }
.menu-list dd { margin: 0; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.other-drinks { padding-block: var(--section-gap); }
.other-drinks .menu-list { border-top-color: var(--color-accent); }
.other-drinks .menu-list > div { padding-block: var(--space-lg); }
.other-drinks .menu-side h2 { max-width: 9ch; }
.other-drinks .menu-side p { color: var(--color-ink-2); max-width: 45ch; margin-top: var(--space-lg); }
.original-menu { margin-top: var(--space-xl); font-size: 14px; }
.original-menu summary { cursor: pointer; min-height: 44px; padding-block: var(--space-sm); text-decoration: underline; text-underline-offset: .3em; }
.original-menu img { width: min(100%, 600px); height: auto; margin-top: var(--space-lg); filter: none; }
.visit { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.visit h2 { max-width: 11ch; }
.visit address { font-style: normal; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.5; }
.visit-details { display: flex; gap: var(--space-2xl); border-block: 1px solid var(--color-rule); padding-block: var(--space-lg); margin-top: var(--space-xl); }
.visit-details span { display: block; font-size: 13px; color: var(--color-ink-2); margin-bottom: var(--space-xs); }
.visit-details a { text-decoration: none; font-variant-numeric: tabular-nums; }
.visit .actions { margin-top: var(--space-xl); }
.footer { padding-block: var(--space-2xl) var(--space-xl); }
.footer-wordmark { font-family: var(--font-display); font-size: clamp(3.4rem, 10.2vw, 9rem); line-height: 1.3; white-space: nowrap; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); border-top: 1px solid var(--color-rule); margin-top: var(--space-xl); padding-top: var(--space-lg); font-size: 13px; color: var(--color-ink-2); }
@media (min-width: 1600px) { .hero { min-height: 850px; } }
@media (max-width: 60rem) { .site-header { min-height: 88px; } nav { gap: var(--space-lg); } .hero { min-height: calc(100svh - 88px); } .hero-copy { padding-right: 0; } .hero-photo { padding-left: var(--space-md); } .hero-photo img { height: 510px; } .menu-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } .visit-details { gap: var(--space-lg); } }
@media (max-width: 40rem) { .site-header { min-height: 80px; } .wordmark { font-size: 23px; } nav { gap: var(--space-md); } nav a { font-size: 13px; } .nav-contact { display: none; } .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; max-height: none; padding-block: var(--space-xl) var(--space-2xl); gap: var(--space-xl); } h1 { font-size: clamp(2.5rem, 10.8vw, 3.6rem); max-width: 13ch; } .hero .lead { font-size: 16px; } .actions { gap: var(--space-lg); margin-top: var(--space-lg); } .hero-hours { margin-top: var(--space-lg); } .hero-photo img { height: 420px; } figcaption { font-size: 12px; } .menu-layout,.visit-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .menu-side { gap: var(--space-lg); } .menu-side .large-price { font-size: 5rem; } .menu-side a { margin-top: 0; } .section-heading { display: block; margin-bottom: var(--space-xl); } .section-heading p { margin-top: var(--space-md); } .menu-list > div { padding-block: var(--space-lg); } .menu-list dt { font-size: 18px; } .menu-list dd { font-size: 16px; } .other-drinks .menu-side h2 { max-width: 15ch; } .visit-details { flex-wrap: wrap; } .footer-wordmark { font-size: 12vw; } .footer-bottom { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* Keep the beginning of the real shop sign visible on narrow phones. */
@media (max-width: 40rem) { .hero-photo img { object-position: left 55%; } }

.original-menu:not([open]) > a { display: none; }