/* The Emerald Breakfast & Lunch: demo site styles. Mobile first; breakpoints 640px and 1024px. */
:root {
  --parchment: #F5EFE0;
  --paper-deep: #EAE1CB;
  --bottle: #0F4D2E;
  --shamrock: #2E8B3E;
  --slate-green: #1E2B24;
  --gold: #B8913A;
  --sage: #A9B59A;
  --ink: #22251F;
  --white: #FFFDF8;
  --display: 'Gloock', Georgia, 'Times New Roman', serif;
  --body: 'Literata', Georgia, 'Times New Roman', serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  --gutter: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }
body { margin: 0; background: var(--parchment); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--bottle); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); }
.nw { white-space: nowrap; }
h2 { font-size: clamp(1.95rem, 5vw, 3rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
a { color: var(--bottle); }
a:hover { color: var(--shamrock); }
:focus-visible { outline: 3px solid var(--shamrock); outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--bottle); color: var(--parchment); padding: 10px 16px; }
.skip:focus { top: 12px; }
.label { font: 700 .8rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bottle); margin-bottom: 1rem; }
.lede { font-size: 1.15rem; max-width: 34em; }
.price-line { font: 400 1rem/1.5 var(--mono); color: var(--ink); }
section { padding-block: clamp(56px, 9vw, 112px); }

/* ---------- link underline (anim 5) ---------- */
.ul, .nav a, .mnav nav a { position: relative; text-decoration: none; }
.ul::after, .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.ul:hover::after, .ul:focus-visible::after, .nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); }
.ul { text-decoration: underline; text-decoration-color: rgba(15, 77, 46, .35); text-underline-offset: 4px; }
.ul:hover { text-decoration-color: transparent; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 1.5px solid var(--bottle); background: var(--bottle); color: var(--parchment);
  font: 700 .9rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 0; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.btn:hover { background: var(--slate-green); color: var(--parchment); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--bottle); }
.btn--ghost:hover { background: var(--bottle); color: var(--parchment); }
.btn--light { background: var(--parchment); color: var(--slate-green); border-color: var(--parchment); }
.btn--light:hover { background: var(--white); color: var(--bottle); }
.btn--sm { min-height: 42px; padding: 8px 16px; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }

/* ---------- shamrock bullet ---------- */
.sb { width: 1em; height: 1em; fill: var(--bottle); color: var(--bottle); flex: none; }

/* ---------- section heading rules (motif 3, anim 2) ---------- */
.rh { text-align: center; margin: 0 auto 2rem; max-width: 760px; }
.rh h2 { margin: .55em 0 .5em; }
.rh-rule { display: block; position: relative; height: 7px; border-top: 1px solid var(--gold); border-bottom: 3px solid var(--gold); transition: clip-path .9s var(--ease); }
.rh-rule--b { width: 60%; margin-inline: auto; }
.rh-sb { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; padding: 2px; margin: -11px 0 0 -11px; background: var(--parchment); fill: var(--bottle); color: var(--bottle); box-sizing: content-box; }
.js [data-reveal="rule"] .rh-rule { clip-path: inset(0 50% 0 50%); }
.js [data-reveal="rule"].in .rh-rule { clip-path: inset(0 0 0 0); }
.js [data-reveal="rule"] .rh-rule--b { transition-delay: .15s; }

/* ---------- wash, loader and page change (anim 1, 6) ---------- */
.wash { position: fixed; inset: 0; z-index: 400; background: var(--parchment); display: none; place-items: center; pointer-events: none; }
.js .wash { display: grid; opacity: 1; animation: wash-fallback .2s 2.5s forwards; }
.js .wash.out { opacity: 0; transition: opacity .15s ease-out; animation: none; }
.js.first .wash.out { transition-duration: .22s; }
.js.leaving .wash { opacity: 1 !important; transition: opacity .15s ease-in; }
@keyframes wash-fallback { to { opacity: 0; } }
.mark { width: 96px; height: 96px; display: none; }
.js.first .wash .mark { display: block; }
.mk-leaf, .mk-maple, .mk-stem { transform-box: fill-box; transform-origin: 50% 100%; }
.js.first .mk-leaf { opacity: 0; transform: scale(.6); animation: leaf-in .32s var(--ease) forwards; }
.js.first .mk-leaf1 { transform-origin: 50% 100%; animation-delay: .05s; }
.js.first .mk-leaf2 { transform-origin: 100% 0; animation-delay: .13s; }
.js.first .mk-leaf3 { transform-origin: 0 0; animation-delay: .21s; }
.js.first .mk-stem { opacity: 0; animation: fade-in .25s .2s forwards; }
.js.first .mk-maple { opacity: 0; transform: translateX(12px); animation: maple-in .35s .42s var(--ease) forwards; }
@keyframes leaf-in { to { opacity: 1; transform: scale(1); } }
@keyframes maple-in { to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- header (anim 3, 4) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
.site-header::before { content: ''; position: absolute; inset: 0; background: var(--parchment); border-bottom: 1px solid rgba(184, 145, 58, .5); opacity: 0; transition: opacity .3s; }
.site-header.scrolled::before { opacity: 1; }
.hdr { position: relative; display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 8px var(--gutter); min-height: var(--hdr-h); }
.brand { flex: none; display: block; width: 74px; transform-origin: left center; transition: transform .3s var(--ease); }
.scrolled .brand { transform: scale(.85); }
.nav { display: none; }
.hdr-call { display: none; }
.chip { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(15, 77, 46, .35); background: var(--white); font: 400 .74rem/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
.chip[hidden] { display: none; }
.chip-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #8A8F86; flex: none; }
.chip.open .chip-dot { background: var(--shamrock); }
.chip.open .chip-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--shamrock); animation: pulse 1s ease-out 2; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--bottle); background: transparent; color: var(--bottle); font: 700 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.menu-btn-bars { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-btn[aria-expanded="true"] .menu-btn-bars { border-color: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn-bars::before, .menu-btn[aria-expanded="true"] .menu-btn-bars::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-bars::after { transform: rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 90; background: var(--parchment); padding: calc(var(--hdr-h) + 32px) var(--gutter) 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; }
.mnav[hidden] { display: none; }
.mnav nav { display: flex; flex-direction: column; border-top: 1px solid var(--gold); }
.mnav nav a { font: 400 2rem/1.2 var(--display); color: var(--bottle); padding: 14px 0; border-bottom: 1px solid rgba(184, 145, 58, .5); }
.mnav nav a[aria-current] { color: var(--shamrock); }
.mnav .btn { align-self: flex-start; }
.mnav-hours .hrs-line, .hrs-line { font-family: var(--mono); margin: 0 0 .3em; }
body.nav-open { overflow: hidden; }

/* ---------- bridge line (motif 1, anim 7) ---------- */
.bridge { position: relative; width: 100%; max-width: 560px; padding-bottom: 22px; margin: 4px 0 18px; }
.bridge svg { width: 100%; height: auto; aspect-ratio: 600 / 124; overflow: visible; }
.bridge path { fill: none; stroke: var(--gold); vector-effect: non-scaling-stroke; }
.b-main { stroke-width: 1.6; }
.b-rail { stroke-width: 1; }
.bridge-l, .bridge-r { position: absolute; bottom: 0; font: 700 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bottle); }
.bridge-l { left: 0; }
.bridge-r { right: 0; }
.js [data-reveal="bridge"] svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.45, .05, .3, 1); }
.js [data-reveal="bridge"] .bridge-l, .js [data-reveal="bridge"] .bridge-r { opacity: 0; transition: opacity .5s; }
.js [data-reveal="bridge"].in svg { clip-path: inset(0 0 0 0); }
.js [data-reveal="bridge"].in .bridge-l { opacity: 1; transition-delay: 1.1s; }
.js [data-reveal="bridge"].in .bridge-r { opacity: 1; transition-delay: 1.4s; }

/* ---------- hero (anim 7, 8, 13) ---------- */
.hero { display: grid; gap: 28px; padding-top: 12px; padding-bottom: clamp(56px, 8vw, 96px); }
.hero-photo { order: -1; position: relative; }
.hero-photo::after { content: ''; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--gold); z-index: -1; }
.hero-pic img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.js .hero-pic { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.3, .6, .2, 1) .2s; }
.js .hero.go .hero-pic { clip-path: inset(0 0 0 0); }
.nudge { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 16px; background: var(--paper-deep); border-left: 3px solid var(--gold); font: 400 .9rem/1.4 var(--mono); max-width: 30em; }
.js .nudge { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease); transition-delay: 1.7s; }
.js .hero.go .nudge { opacity: 1; transform: none; }

/* ---------- full irish ring (anim 9) ---------- */
.sec-intro { text-align: center; max-width: 34em; margin: -0.5rem auto 2rem; font-style: italic; }
.fi { text-align: center; }
.fi-ring { position: relative; margin: 0 auto; max-width: 640px; }
.fi-circle { width: min(70vw, 300px); aspect-ratio: 1; margin: 0 auto 28px; border-radius: 50%; overflow: hidden; outline: 1px solid var(--gold); outline-offset: 8px; }
.fi-circle img { width: 100%; height: 100%; object-fit: cover; }
.fi-list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; max-width: 460px; text-align: left; }
.fi-list li { font: 400 1rem/1.35 var(--body); padding: 6px 0 6px 18px; position: relative; border-bottom: 1px dotted rgba(34, 37, 31, .3); }
.fi-list li::before { content: ''; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--gold); }
.js [data-reveal="ring"] .fi-list li { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease); transition-delay: calc(var(--i) * 60ms + .1s); }
.js [data-reveal="ring"].in .fi-list li { opacity: 1; transform: none; }
.fi .price-line { margin-top: 2rem; font-size: 1.15rem; color: var(--bottle); font-weight: 700; }
.fi-roll { font-size: 1rem; }

/* ---------- dictionary cards (motif 2, anim 10) ---------- */
.dict { background: var(--white); border: 3px solid #161814; padding: 9px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 24px -14px rgba(30, 43, 36, .35); }
.dict-in { border: 1px solid #CFC8B6; padding: 26px 24px 22px; height: 100%; }
.dict-hw { font: 600 1.85rem/1.15 var(--body); color: var(--ink); margin: 0 0 .25em; letter-spacing: -.01em; }
.dict-pos { font: italic 400 .95rem/1.4 var(--mono); color: #4A4E45; margin: 0 0 .9em; }
.dict-def { margin: 0; }
.dict-grid { display: grid; gap: 22px; max-width: 980px; margin: 0 auto; }
.dict-grid .dict { transition: transform .3s var(--ease), box-shadow .3s; }
.js [data-reveal="card"] { opacity: 0; transform: rotate(-2deg); transition: opacity .6s, transform .7s var(--ease); }
.js [data-reveal="card"].in { opacity: 1; transform: rotate(0); }
.dict-grid .dict.in:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(30, 43, 36, .45); }

/* ---------- benny (asymmetric) ---------- */
.benny { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; grid-template-areas: "text text" "big big" "s1 s2"; }
.benny-text { grid-area: text; margin-bottom: 12px; }
.benny-big { grid-area: big; }
.benny-s1 { grid-area: s1; }
.benny-s2 { grid-area: s2; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.benny-big .ph img { aspect-ratio: 4 / 4.4; }
.benny-s1 .ph img, .benny-s2 .ph img { aspect-ratio: 3 / 3.4; }

/* ---------- lunch row ---------- */
.lunch-row { display: grid; gap: 40px; }
.dish .ph img { aspect-ratio: 4 / 4.2; }
.dish-txt { padding-top: 16px; border-top: 0; }
.dish h3 { margin: 0 0 .35em; }
.dish p { margin-bottom: .5em; }
.dish-price { font: 700 1.05rem/1 var(--mono); color: var(--bottle); }

/* ---------- reviews (anim 11, 12) ---------- */
.rating { text-align: center; font: 400 1.05rem/1.4 var(--mono); margin: -0.75rem 0 2.5rem; }
.rating [data-count] { font: 400 1.6rem/1 var(--display); color: var(--bottle); }
.js .rating { opacity: 0; transition: opacity .6s; }
.js .rating.in { opacity: 1; }
.quotes { display: grid; gap: 28px; max-width: 1000px; margin: 0 auto; }
.q { position: relative; padding: 18px 0 0 54px; }
.q-mark { position: absolute; left: 0; top: -8px; font: 400 5rem/1 var(--display); color: var(--gold); transform-origin: 50% 70%; }
.q blockquote { margin: 0 0 .5em; }
.q blockquote p { font: 400 1.3rem/1.45 var(--display); color: var(--ink); margin: 0; }
.q figcaption { font: 400 .85rem/1.3 var(--mono); letter-spacing: .06em; color: #4A4E45; }
.q-intro { font: italic 400 .95rem/1.4 var(--body); margin: 0 0 .3em; color: #4A4E45; }
.js [data-reveal="quote"] { opacity: 0; transition: opacity .6s, transform .7s var(--ease); }
.js [data-reveal="quote"].q--l { transform: translateX(-24px); }
.js [data-reveal="quote"].q--r { transform: translateX(24px); }
.js [data-reveal="quote"] .q-mark { transform: scale(.8); transition: transform .7s var(--ease) .1s; }
.js [data-reveal="quote"].in { opacity: 1; transform: none; }
.js [data-reveal="quote"].in .q-mark { transform: scale(1); }

/* ---------- family + closing ---------- */
.family { background: var(--sage); }
.family-in { display: grid; gap: 32px; align-items: center; }
.family h2 { color: var(--slate-green); }
.family-photo .ph img { aspect-ratio: 4 / 4.4; }
.family-photo--wide .ph img { aspect-ratio: 4 / 3; }
.family-photo { border: 8px solid var(--parchment); box-shadow: 0 18px 40px -24px rgba(30, 43, 36, .6); }
.closing { background: var(--slate-green); color: var(--parchment); text-align: center; }
.closing-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.closing-line { font: 400 clamp(2rem, 6vw, 3.4rem)/1.1 var(--display); margin: 0; }
.closing-line--big { font-size: clamp(3rem, 12vw, 7rem); }
.closing-hrs .hrs-line { margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--slate-green); color: var(--parchment); padding: 8px 0 32px; border-top: 1px solid rgba(184, 145, 58, .5); }
.site-footer a { color: var(--parchment); }
.site-footer a:hover { color: #fff; }
.bridge--footer { margin: 28px auto 36px; width: auto; max-width: calc(520px + 2 * var(--gutter)); padding-inline: var(--gutter); }
.bridge--footer .bridge-l, .bridge--footer .bridge-r { color: var(--parchment); }
.bridge--footer .bridge-l { left: var(--gutter); }
.bridge--footer .bridge-r { right: var(--gutter); }
.ft-cols { display: grid; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(184, 145, 58, .4); }
.ft-h { font: 700 .78rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--parchment); margin: 0 0 .9em; opacity: .85; }
.ft-cols p { margin: 0 0 .5em; }
.ft-thanks { font: italic 400 1.05rem/1.5 var(--body); margin-top: 24px; }
.ft-legal { font: 400 .8rem/1.5 var(--mono); opacity: .85; margin: 0; }

/* ---------- modal (anim 23) ---------- */
.modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: var(--gutter); }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(30, 43, 36, .6); opacity: 0; transition: opacity .25s; }
.modal-card { position: relative; max-width: 480px; width: 100%; background: var(--white); border: 3px solid #161814; padding: 32px 28px 28px; opacity: 0; transform: translateY(24px); transition: opacity .3s, transform .35s var(--ease); box-shadow: 0 0 0 1px #CFC8B6 inset; }
.modal.show .modal-bg { opacity: 1; }
.modal.show .modal-card { opacity: 1; transform: none; }
.modal h2 { font-size: 2rem; }

/* ---------- inner page heads ---------- */
.page-head { padding-top: 24px; padding-bottom: 36px; }
.page-head h1 { margin-bottom: .3em; }

/* ---------- menu page (anim 14-18) ---------- */
.mtools { position: sticky; top: calc(var(--hdr-h) - 1px); z-index: 50; background: var(--parchment); border-block: 1px solid rgba(184, 145, 58, .55); padding-block: 10px 0; }
.filters { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 10px; }
.pill, .mindex a { position: relative; z-index: 1; font: 700 .76rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; min-height: 40px; border: 0; background: none; color: var(--bottle); cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; transition: color .25s; }
.pill[aria-pressed="true"], .mindex a.active { color: var(--parchment); }
.pill-ind { position: absolute; left: 0; top: 0; height: 40px; width: 0; background: var(--bottle); transform: translateX(0); transition: transform .35s var(--ease); z-index: 0; }
.filters .pill-ind { width: var(--w, 0); transform: translate(var(--x, 0), var(--y, 0)); }
.mindex { overflow-x: auto; scrollbar-width: none; border-top: 1px dotted rgba(15, 77, 46, .3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.mindex::-webkit-scrollbar { display: none; }
.mindex-track { position: relative; display: flex; gap: 2px; padding: 8px 0; width: max-content; }
.mindex .pill-ind { top: 8px; width: var(--w, 0); transform: translateX(var(--x, 0)); opacity: 0; }
.mindex .pill-ind.on { opacity: 1; }
.menu-body { padding-top: 40px; padding-bottom: 96px; }
.msec { padding-block: 36px; }
.msec[hidden] { display: none; }
.msec-body { display: grid; gap: 24px; }
.mp-col { display: grid; gap: 16px; }
.mp img { width: 100%; aspect-ratio: 3 / 1.15; object-fit: cover; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 48px; }
.mi { padding: 12px 0 10px; transition: opacity .25s; }
.mi.fading { opacity: 0; }
.mi.gone { display: none; }
.mi-top { display: flex; align-items: baseline; gap: 8px; }
.mi-sb { width: 13px; height: 13px; align-self: center; transition: transform .3s var(--ease); }
.mi-name { font: 600 1.06rem/1.35 var(--body); color: var(--ink); }
.mi-dots { flex: 1 1 24px; min-width: 24px; height: 1em; position: relative; top: -3px; background: radial-gradient(circle, rgba(34, 37, 31, .55) 1px, transparent 1.4px) 0 100% / 7px 4px repeat-x; transition: clip-path .8s var(--ease); }
.mi-price { font: 700 1rem/1 var(--mono); color: var(--bottle); white-space: nowrap; transition: transform .25s var(--ease); }
.mi-desc { font: italic 400 .97rem/1.5 var(--body); color: #3A3D36; margin: 4px 0 0 21px; max-width: 36em; }
.mi:hover .mi-sb { transform: rotate(20deg); }
.mi:hover .mi-price { transform: translateX(-2px); }
.js [data-reveal="row"] .mi-dots { clip-path: inset(0 100% 0 0); }
.js [data-reveal="row"].in .mi-dots { clip-path: inset(0 0 0 0); }
.msec--compact .mi { padding: 8px 0 6px; }
.msec--compact .mi-desc { margin-top: 0; }
.kid-sb { transition: transform .3s; }
.rh--kids.in .kid-sb { animation: hop .5s var(--ease) .5s 1; }
@keyframes hop { 40% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.order { max-width: 520px; margin: 48px auto 0; }
.order-h { font-family: var(--display); font-size: 1.9rem; color: var(--bottle); }
.order-lines { list-style: none; margin: 0 0 16px; padding: 0; font: 400 1rem/1.4 var(--mono); }
.order-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dotted rgba(34, 37, 31, .35); }
.order-lines span:last-child { text-align: right; }
.order-total { font-weight: 700; border-bottom: 3px double var(--ink) !important; color: var(--bottle); }
.order-small { font: italic 400 .88rem/1.4 var(--body); color: #4A4E45; margin: 0; }

/* ---------- story (anim 19, 20) ---------- */
.story-head { padding-top: 24px; }
.abh { display: grid; gap: 32px; align-items: center; }
.dict--big .dict-in { padding: 40px 32px 36px; }
.dict--big .dict-hw { font-size: clamp(2.6rem, 9vw, 4rem); }
.dict--big .dict-pos { font-size: 1.05rem; }
.dict--big .dict-def { font-size: 1.15rem; line-height: 1.7; }
.tw { display: block; }
.js [data-reveal="typewriter"] .tw { clip-path: inset(0 100% 0 0); transition: clip-path .7s steps(18, end); transition-delay: calc(var(--i) * .75s + .3s); }
.js [data-reveal="typewriter"].in .tw { clip-path: inset(0 0 0 0); }
.abh-cap { font: italic 400 1rem/1.4 var(--body); margin-top: 14px; color: #3A3D36; }
.abh-photo { display: none; }
.abh-photo .ph img { aspect-ratio: 3 / 4.6; }
.story-intro { max-width: 760px; padding-top: 0; font-size: 1.15rem; }
.story-intro p:first-child::first-letter { font: 400 3.6em/.8 var(--display); float: left; margin: .06em .1em 0 0; color: var(--bottle); }
.timeline { padding-top: 0; }
.timeline .bridge { display: none; }
.tl { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 34px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 0; border-left: 1px solid var(--gold); border-right: 3px solid var(--gold); padding-left: 3px; }
.tl-pt { position: relative; }
.tl-dot { position: absolute; left: -30px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 4px solid var(--parchment); }
.tl-pt .tl-h { font-size: 1.5rem; margin-bottom: .25em; }
.tl-pt p { margin: 0; }
.js [data-reveal="tl"] .tl-dot { transform: scale(0); transition: transform .5s var(--ease); }
.js [data-reveal="tl"] .tl-h, .js [data-reveal="tl"] p { opacity: 0; transform: translateY(12px); transition: opacity .5s .15s, transform .5s var(--ease) .15s; }
.js [data-reveal="tl"].in .tl-dot { transform: scale(1); }
.js [data-reveal="tl"].in .tl-h, .js [data-reveal="tl"].in p { opacity: 1; transform: none; }

/* ---------- visit (anim 21, 22) ---------- */
.visit-head { display: grid; gap: 28px; padding-top: 24px; }
.addr { font-style: normal; font-size: 1.1rem; }
.addr-main { font: 400 1.35rem/1.35 var(--display); color: var(--bottle); margin-bottom: .4em; }
.visit-photo .ph img { aspect-ratio: 4 / 4.2; }
.visit-grid { display: grid; gap: 40px; padding-top: 0; }
.visit-hours .rh { margin-bottom: 1rem; }
.hours { width: 100%; border-collapse: collapse; font: 400 1rem/1.3 var(--mono); }
.hours thead th { text-align: left; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #4A4E45; padding: 8px 14px; border-bottom: 1px solid var(--gold); }
.hours tbody th, .hours td { padding: 13px 14px; text-align: left; border-bottom: 1px dotted rgba(34, 37, 31, .3); position: relative; font-weight: 400; }
.hours tbody th { z-index: 0; }
.hours tr.today th, .hours tr.today td { color: var(--bottle); font-weight: 700; }
.hours tr.today th::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 100%; z-index: -1; background: rgba(184, 145, 58, .24); border-left: 4px solid var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .2s; }
.hours tr.today.in th::before { transform: scaleX(1); }
.weekend { display: flex; gap: 10px; align-items: center; margin-top: 20px; font: 400 .95rem/1.4 var(--mono); }
.mapcard { display: block; align-self: start; text-decoration: none; color: var(--bottle); border: 3px solid #161814; background: var(--white); padding: 9px; }
.mapcard svg { width: 100%; height: auto; border: 1px solid #CFC8B6; }
.mapcard-cap { display: block; padding: 12px 4px 2px; font: 700 .85rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mapcard:hover .mapcard-cap { color: var(--shamrock); }
.pin, .pin-shadow { transform-box: fill-box; transform-origin: 50% 100%; }
.js [data-reveal="map"] .pin { opacity: 0; transform: translateY(-16px); }
.js [data-reveal="map"] .pin-shadow { opacity: 0; transition: opacity .4s .55s; }
.js [data-reveal="map"].in .pin { animation: pin-drop .6s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.js [data-reveal="map"].in .pin-shadow { opacity: .35; }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-16px); } 30% { opacity: 1; } 70% { transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } }
.gtk { padding-top: 0; }
.gtk-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 4px 40px; max-width: 900px; }
.gtk-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px dotted rgba(34, 37, 31, .3); }
.gtk-list .sb { width: 14px; height: 14px; position: relative; top: 2px; }
.contact { padding-top: 0; }
.contact-card { max-width: 760px; margin: 0 auto; }
.contact h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.form { display: grid; gap: 18px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 700 .78rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bottle); }
.field input, .field textarea { font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--parchment); border: 1px solid #8C8A7E; border-radius: 0; padding: 12px 12px; width: 100%; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--shamrock); outline-offset: 1px; border-color: var(--bottle); }
.form-alt { margin: 18px 0 0; }

@media (max-width: 639px) {
  .brand { width: 62px; }
  .hdr { gap: 8px; }
  .chip { white-space: normal; font-size: .68rem; line-height: 1.25; padding: 5px 8px; max-width: 168px; }
  .menu-btn { padding: 8px 10px; }
  .menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 640px ---------- */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .dict-grid { grid-template-columns: 1fr 1fr; }
  .fi-list { max-width: 520px; }
  .quotes { grid-template-columns: 1fr 1fr; gap: 40px 56px; }
  .quotes .q:nth-child(even) { margin-top: 48px; }
  .lunch-row { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .ft-cols { grid-template-columns: repeat(3, 1fr); }
  .gtk-list { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .mlist { grid-template-columns: 1fr 1fr; }
  .msec--compact .mlist { grid-template-columns: 1fr 1fr; }
  .brand { width: 84px; }
  .chip { font-size: .8rem; }
}

/* ---------- 1024px ---------- */
@media (min-width: 1024px) {
  :root { --hdr-h: 96px; }
  .brand { width: 96px; }
  .nav { display: flex; gap: 26px; margin-left: 28px; }
  .nav a { font: 700 .82rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bottle); padding: 8px 0; }
  .hdr-call { display: inline-flex; }
  .menu-btn { display: none; }
  .mnav { display: none !important; }
  .hero { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; padding-top: 28px; }
  .hero-photo { order: 0; }
  .hero-pic img { aspect-ratio: 1317 / 1600; max-height: 76vh; }
  .fi-ring { height: 600px; }
  .fi-circle { position: absolute; left: 50%; top: 50%; width: 340px; margin: -170px 0 0 -170px; }
  .fi-list { display: block; max-width: none; height: 100%; }
  .fi-list li { position: absolute; left: var(--x); top: var(--y); border: 0; padding: 0; width: max-content; max-width: 200px; font-size: 1.08rem; }
  .fi-list li::before { display: none; }
  .fi-list li.fi-c { transform: translate(-50%, -50%); }
  .fi-list li.fi-r { transform: translate(-30%, -50%); }
  .fi-list li.fi-l { transform: translate(-70%, -50%); }
  .js [data-reveal="ring"] .fi-list li.fi-c { transform: translate(-50%, calc(-50% + 8px)); }
  .js [data-reveal="ring"] .fi-list li.fi-r { transform: translate(-30%, calc(-50% + 8px)); }
  .js [data-reveal="ring"] .fi-list li.fi-l { transform: translate(-70%, calc(-50% + 8px)); }
  .js [data-reveal="ring"].in .fi-list li.fi-c { transform: translate(-50%, -50%); }
  .js [data-reveal="ring"].in .fi-list li.fi-r { transform: translate(-30%, -50%); }
  .js [data-reveal="ring"].in .fi-list li.fi-l { transform: translate(-70%, -50%); }
  .fi-list li span, .fi-list li { background: var(--parchment); }
  .dict-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .dict-grid .dict:nth-child(even) { margin-top: 36px; }
  .benny { grid-template-columns: 4fr 5fr 3fr; grid-template-rows: auto auto; grid-template-areas: "text big s1" "text big s2"; gap: 20px 28px; align-items: start; }
  .benny-text { align-self: center; padding-right: 12px; }
  .benny-big .ph img { aspect-ratio: auto; height: 640px; }
  .benny-s1 .ph img, .benny-s2 .ph img { aspect-ratio: auto; height: 310px; }
  .benny-s2 { margin-top: 0; }
  .family-in { grid-template-columns: 1fr 1fr; gap: 72px; }
  .msec-body { grid-template-columns: 1fr; }
  .msec--compact .mlist { grid-template-columns: repeat(3, 1fr); gap: 2px 40px; }
  .abh { grid-template-columns: 1.4fr 1fr; gap: 64px; }
  .abh-photo { display: block; }
  .timeline { position: relative; --bw: min(100vw - 2 * var(--gutter), 1200px - 2 * var(--gutter)); }
  .timeline .bridge { display: block; max-width: none; margin: 0; padding-bottom: 0; }
  .timeline .bridge-l, .timeline .bridge-r { bottom: -22px; }
  .tl { grid-template-columns: repeat(4, 1fr); padding: 40px 0 0; gap: 32px; text-align: center; }
  .tl::before { display: none; }
  .tl-dot { left: 50%; margin-left: -11px; top: calc(-40px - var(--bw) * var(--dy) / 600 - 11px); }
  .tl-pt:nth-child(1), .tl-pt:nth-child(4) { --dy: 44.5; }
  .tl-pt:nth-child(2), .tl-pt:nth-child(3) { --dy: 72.5; }
  .visit-head { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 64px; }
  .visit-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .visit-hours .rh { text-align: left; margin-left: 0; }
  .visit-hours .rh-rule--b { margin-left: 0; }
}

@media (min-width: 1200px) {
  .msec--photo .msec-body { grid-template-columns: 2.4fr 1fr; align-items: start; gap: 40px; }
  .msec--photo .mp-col { order: 2; position: sticky; top: 230px; }
  .mp img { aspect-ratio: 3 / 3.4; }
}

/* ---------- mobile: drop the non-essential animations (keep 1, 4, 7, 8, 13, 14, 19, 21, 23) ---------- */
@media (max-width: 639px) {
  .js [data-reveal="rule"] .rh-rule, .js [data-reveal="card"], .js [data-reveal="quote"], .js [data-reveal="quote"].q--l, .js [data-reveal="quote"].q--r, .js [data-reveal="quote"] .q-mark,
  .js [data-reveal="ring"] .fi-list li, .js [data-reveal="row"] .mi-dots, .js [data-reveal="typewriter"] .tw, .js .rating,
  .js [data-reveal="map"] .pin, .js [data-reveal="map"] .pin-shadow { opacity: 1; transform: none; clip-path: none; transition: none; animation: none; }
  .js [data-reveal="map"] .pin-shadow { opacity: .35; }
  .rh--kids.in .kid-sb { animation: none; }
}

/* ---------- reduced motion: final state, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] , .js [data-reveal] *, .js .hero-pic, .js .nudge, .js .rating { opacity: 1 !important; clip-path: none !important; }
  .js [data-reveal="card"], .js [data-reveal="quote"], .js [data-reveal="quote"] .q-mark, .js [data-reveal="tl"] *, .js .nudge, .js [data-reveal="map"] .pin { transform: none !important; }
  .js [data-reveal="map"] .pin-shadow { opacity: .35 !important; }
  .js .wash { display: none !important; }
  .hours tr.today th::before { transform: scaleX(1) !important; }
}