:root {
  --ink: #13231b;
  --ink-2: #20372b;
  --paper: #fbf7ed;
  --cream: #efe7d7;
  --rust: #c85832;
  --lime: #d7ef68;
  --line: rgba(19, 35, 27, .17);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body:not(.is-loaded) { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; font: inherit; }
::selection { background: var(--lime); color: var(--ink); }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 999; background: #fff; padding: 12px 16px; }
.skip-link:focus { top: 16px; }

/* Opening sequence */
.page-loader { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .85s cubic-bezier(.76,0,.24,1) .15s; }
.is-loaded .page-loader { transform: translateY(-102%); }
.loader-word { overflow: hidden; font-size: clamp(25px, 4vw, 48px); font-weight: 700; letter-spacing: -.06em; animation: loaderWord 1s cubic-bezier(.2,.8,.2,1) both; }
.loader-word span { color: var(--rust); }
.loader-line { width: 150px; height: 1px; position: absolute; left: 50%; top: calc(50% + 50px); overflow: hidden; background: rgba(255,255,255,.16); transform: translateX(-50%); }
.loader-line i { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: left; animation: loaderProgress 1.05s cubic-bezier(.65,0,.35,1) both; }
@keyframes loaderWord { from { opacity: 0; transform: translateY(20px); letter-spacing: .1em; } to { opacity: 1; transform: none; letter-spacing: -.06em; } }
@keyframes loaderProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.announcement { height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 5vw, 76px); background: var(--ink); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.announcement p { display: flex; align-items: center; gap: 8px; margin: 0; }
.announcement > a { justify-self: center; color: rgba(255,255,255,.72); transition: color .2s ease; }
.announcement > a:hover { color: var(--lime); }
.announcement-hours { justify-self: end; color: rgba(255,255,255,.55); }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(215,239,104,.5); animation: statusPulse 2.5s ease-out infinite; }
.status-dot.closed { background: #d27b65; animation: none; }
@keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(215,239,104,.45); } 70% { box-shadow: 0 0 0 8px rgba(215,239,104,0); } 100% { box-shadow: 0 0 0 0 rgba(215,239,104,0); } }

.site-header { height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: absolute; top: 34px; left: 0; z-index: 30; width: 100%; padding: 0 clamp(22px, 5vw, 76px); border-bottom: 1px solid var(--line); background: rgba(251,247,237,.88); backdrop-filter: blur(18px); }
.logo { justify-self: start; font-size: 19px; font-weight: 700; letter-spacing: -.055em; }
.logo span { color: var(--rust); }
.main-nav { display: flex; gap: 34px; font-size: 11px; font-weight: 600; }
.main-nav a, .text-link, .contact-link { position: relative; }
.main-nav a::after, .text-link::after, .contact-link::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; }
.main-nav a:hover::after, .text-link:hover::after, .contact-link:hover::after { width: 100%; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.contact-link { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.directions-link { display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: transform .25s ease, background .25s ease; }
.directions-link:hover { background: var(--rust); transform: translateY(-2px); }
.menu-button { width: 42px; height: 42px; display: none; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
.menu-button i { display: block; width: 17px; height: 1px; margin: 5px auto; background: var(--ink); transition: transform .25s ease; }
.menu-button[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Hero */
.hero { min-height: calc(100vh - 34px); display: grid; grid-template-columns: 55% 45%; position: relative; padding-top: 86px; overflow: hidden; }
.hero-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 8.5vw, 138px) clamp(24px, 5vw, 76px) 120px; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { width: 32px; height: 1px; background: var(--rust); }
.eyebrow-light { color: rgba(255,255,255,.65); }
.eyebrow-light span { background: var(--lime); }
.hero-title, h2, blockquote { font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; }
.hero-title { margin: 0; font-size: clamp(61px, 6.9vw, 122px); line-height: .83; }
.title-line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.title-line i { display: block; font-style: normal; transform: translateY(115%) rotate(2deg); transition: transform .95s cubic-bezier(.2,.75,.2,1); }
.title-line:nth-child(2) i { transition-delay: .09s; }
.title-line:nth-child(3) i { transition-delay: .18s; }
.is-loaded .title-line i { transform: translateY(0) rotate(0); }
.accent-line i { color: var(--rust); font-style: italic; }
.hero-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.is-loaded .hero-reveal { opacity: 1; transform: translateY(0); }
.is-loaded .hero-delay-1 { transition-delay: .15s; }
.is-loaded .hero-delay-2 { transition-delay: .38s; }
.is-loaded .hero-delay-3 { transition-delay: .48s; }
.is-loaded .hero-delay-4 { transition-delay: .6s; }
.hero-lead { max-width: 560px; margin: 34px 0 0 7%; color: #53615a; font-family: var(--serif); font-size: clamp(18px, 1.4vw, 22px); line-height: 1.53; }
.hero-buttons { display: flex; align-items: center; gap: 32px; margin: 34px 0 0 7%; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 34px; min-height: 54px; padding: 0 22px; border: 1px solid transparent; border-radius: 2px; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; will-change: transform; }
.button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(19,35,27,.18); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: var(--rust); }
.button-lime { background: var(--lime); color: var(--ink); }
.button-outline { border-color: rgba(255,255,255,.35); color: #fff; }
.button-outline:hover { background: #fff; color: var(--ink); }
.text-link { font-size: 11px; font-weight: 600; }
.text-link b { margin-left: 7px; }
.hero-details { display: flex; gap: clamp(28px, 4vw, 66px); margin: auto 0 0; padding-top: 50px; }
.hero-details div { display: flex; flex-direction: column; gap: 4px; }
.hero-details small { margin-bottom: 5px; color: #777f7a; font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-details strong { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.hero-details span { color: #737b76; font-size: 9px; }
.hero-image-wrap { min-height: calc(100vh - 120px); position: relative; overflow: hidden; background: #9e3f25; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.13); transition: transform 1.6s cubic-bezier(.2,.75,.2,1) .15s; }
.is-loaded .hero-photo { transform: scale(1); }
.hero-image-reveal { position: absolute; inset: 0; z-index: 5; background: var(--rust); transform-origin: top; transition: transform 1.05s cubic-bezier(.76,0,.24,1) .12s; }
.is-loaded .hero-image-reveal { transform: scaleY(0); }
.image-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(36,12,4,.24)); }
.image-glow::after { content: ""; width: 34%; height: 140%; position: absolute; left: -55%; top: -20%; background: linear-gradient(90deg, transparent, rgba(255,226,185,.18), transparent); transform: skewX(-16deg); animation: heroSheen 7s ease-in-out 2s infinite; }
.coffee-steam { width: 180px; height: 190px; position: absolute; left: 50%; top: 20%; z-index: 4; pointer-events: none; }
.coffee-steam i { width: 32px; height: 105px; position: absolute; bottom: 0; border-left: 2px solid rgba(255,255,255,.58); border-radius: 50%; filter: blur(1.5px); opacity: 0; animation: steamRise 3.4s ease-out infinite; }
.coffee-steam i:nth-child(1) { left: 25px; animation-delay: -.3s; }
.coffee-steam i:nth-child(2) { left: 74px; height: 128px; animation-delay: -1.45s; }
.coffee-steam i:nth-child(3) { left: 124px; height: 92px; animation-delay: -2.3s; }
.hero-orbit { width: 112px; height: 112px; display: grid; place-items: center; position: absolute; right: 7%; top: 8%; z-index: 6; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 16px 38px rgba(44,22,9,.18); animation: orbitBob 4.5s ease-in-out infinite; }
.hero-orbit::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(19,35,27,.48); border-radius: 50%; animation: orbitSpin 13s linear infinite; }
.hero-orbit span { width: 72px; position: absolute; top: 21px; font-size: 5px; font-weight: 700; letter-spacing: .12em; line-height: 1.25; text-align: center; }
.hero-orbit b { position: relative; top: 8px; font-family: var(--serif); font-size: 31px; font-weight: 400; }
.hero-card { width: min(430px, 80%); display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: start; position: absolute; left: 8%; bottom: 8%; z-index: 6; padding: 20px 22px; background: rgba(251,247,237,.94); box-shadow: 0 25px 55px rgba(45,19,8,.2); backdrop-filter: blur(12px); }
.is-loaded .hero-card { animation: cardFloat 5s ease-in-out 1.3s infinite; }
.card-number { color: var(--rust); font-family: var(--serif); font-size: 34px; }
.hero-card small { display: block; margin: 1px 0 4px; color: #707a74; font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-card strong { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.hero-card p { margin: 6px 0 0; color: #69726d; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-card > b { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.vertical-copy { position: absolute; right: 17px; top: 17%; z-index: 4; margin: 0; color: rgba(255,255,255,.75); font-size: 7px; font-weight: 700; letter-spacing: .24em; writing-mode: vertical-rl; }
.scroll-cue { display: flex; align-items: center; gap: 12px; position: absolute; left: 48.4%; bottom: 18px; z-index: 8; font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: left center; }
.scroll-cue i { width: 42px; height: 1px; display: block; overflow: hidden; background: var(--line); }
.scroll-cue i::after { content: ""; width: 100%; height: 100%; display: block; background: var(--rust); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }
@keyframes heroSheen { 0%,15% { left: -55%; } 50%,100% { left: 125%; } }
@keyframes steamRise { 0% { opacity: 0; transform: translate3d(0,20px,0) scale(.75) rotate(-8deg); } 25% { opacity: .55; } 70% { opacity: .3; } 100% { opacity: 0; transform: translate3d(18px,-100px,0) scale(1.2) rotate(12deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitBob { 0%,100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -10px; rotate: 3deg; } }
@keyframes cardFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }

.ticker { overflow: hidden; padding: 16px 0; border-top: 1px solid rgba(19,35,27,.15); border-bottom: 1px solid rgba(19,35,27,.15); background: var(--lime); }
.ticker div { width: max-content; display: flex; align-items: center; gap: 30px; animation: ticker 25s linear infinite; }
.ticker span { font-family: var(--serif); font-size: 16px; font-style: italic; }
.ticker b { font-size: 10px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Menu */
.section { padding: clamp(90px, 10vw, 150px) clamp(24px, 5vw, 76px); }
.section-head { display: grid; grid-template-columns: 1fr minmax(260px, 410px); gap: 55px; align-items: end; margin-bottom: 65px; }
h2 { margin: 0; font-size: clamp(51px, 6.2vw, 96px); line-height: .88; }
h2 em { color: var(--rust); font-weight: 400; }
.section-head > p { margin: 0 0 8px; color: #5a665f; font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.menu-section { position: relative; }
.menu-section::before { content: "MENU"; position: absolute; right: -1vw; top: 120px; color: rgba(19,35,27,.025); font-family: var(--serif); font-size: 16vw; line-height: 1; pointer-events: none; }
.menu-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.menu-column { padding: 30px 27px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.26); }
.menu-column:nth-child(2) { background: var(--cream); }
.menu-column:nth-child(3) { background: var(--ink); color: #fff; }
.menu-category { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start; padding-bottom: 25px; border-bottom: 1px solid currentColor; }
.menu-category > span { color: var(--rust); font-family: var(--serif); font-size: 26px; }
.menu-column:nth-child(3) .menu-category > span { color: var(--lime); }
.menu-category h3 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.menu-category p { margin: 5px 0 0; opacity: .58; font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.menu-list article { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding-left .25s ease; }
.menu-column:nth-child(3) .menu-list article { border-color: rgba(255,255,255,.14); }
.menu-list article:hover { padding-left: 7px; }
.menu-list h4 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.menu-list p { margin: 5px 0 0; opacity: .56; font-size: 9px; line-height: 1.45; }
.menu-list strong { font-family: var(--serif); font-size: 17px; font-weight: 400; }
.menu-note { margin: 23px 0 0; color: #6d756f; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-align: right; text-transform: uppercase; }

/* Favorites */
.favorites-section { display: grid; grid-template-columns: .9fr 1fr 1fr 1fr; min-height: 650px; background: var(--ink); color: #fff; }
.favorites-intro { display: flex; flex-direction: column; justify-content: center; padding: 55px clamp(24px, 4vw, 65px); }
.favorites-intro h2 { font-size: clamp(44px, 4.6vw, 74px); }
.favorites-intro h2 em { color: var(--lime); }
.favorite-card { min-height: 650px; position: relative; overflow: hidden; border-left: 1px solid rgba(255,255,255,.13); }
.favorite-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,10,.03) 36%, rgba(7,13,10,.75)); }
.favorite-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .8s cubic-bezier(.2,.75,.2,1), filter .5s ease; }
.favorite-card:hover img { transform: scale(1.045); filter: saturate(1); }
.favorite-two img { object-position: 55% 60%; }
.favorite-three img { object-position: 50% 50%; }
.favorite-card > div { position: absolute; left: 25px; right: 25px; bottom: 27px; z-index: 2; }
.favorite-card span { font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.favorite-card h3 { margin: 10px 0 18px; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 38px); font-weight: 400; line-height: 1; }
.favorite-card strong { font-family: var(--serif); font-size: 20px; font-weight: 400; }

/* Story */
.story-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(55px, 8vw, 120px); align-items: center; }
.story-photo { height: min(760px, 72vw); position: relative; overflow: hidden; background: var(--rust); }
.story-photo img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 62%; filter: saturate(.82) contrast(1.03); transform: translateY(-5%); }
.story-photo > div { display: flex; justify-content: space-between; position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 16px; background: rgba(19,35,27,.9); color: #fff; font-size: 7px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.story-copy { max-width: 580px; }
.story-intro { margin: 35px 0 21px; font-family: var(--serif); font-size: 24px; line-height: 1.38; }
.story-copy > p:not(.eyebrow):not(.story-intro) { max-width: 520px; margin: 0; color: #5d6861; font-size: 13px; line-height: 1.85; }
.story-signature { display: flex; align-items: center; gap: 14px; margin-top: 31px; color: #6b756f; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-signature i { width: 42px; height: 1px; background: var(--rust); }

/* Visit */
.visit-section { min-height: 760px; display: grid; grid-template-columns: 1fr .85fr .9fr; grid-template-rows: auto 1fr; gap: 60px 70px; position: relative; overflow: hidden; padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 94px); background: var(--ink-2); color: #fff; }
.visit-section::before { content: "NYC"; position: absolute; right: -2vw; bottom: -4vw; color: rgba(255,255,255,.025); font-family: var(--serif); font-size: 25vw; line-height: .8; }
.visit-heading { grid-column: 1 / -1; position: relative; z-index: 2; }
.visit-heading h2 em { color: var(--lime); }
.visit-details { position: relative; z-index: 2; }
.visit-status { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; margin-bottom: 32px; }
.visit-status small { grid-column: 2; color: rgba(255,255,255,.48); font-size: 8px; }
.visit-status strong { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.visit-details address { margin: 0 0 25px; color: rgba(255,255,255,.67); font-family: var(--serif); font-size: 22px; font-style: normal; line-height: 1.45; }
.visit-details address strong { color: #fff; font-size: 32px; font-weight: 400; }
.contact-card { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.2); }
.contact-card > p { margin: 0; padding: 18px 0 9px; color: var(--lime); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.contact-row { display: grid; grid-template-columns: 47px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.contact-row small { color: rgba(255,255,255,.4); font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-row a, .contact-row > span { min-width: 0; color: #fff; font-family: var(--serif); font-size: clamp(15px, 1.35vw, 20px); overflow-wrap: anywhere; }
.contact-row button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: transparent; color: rgba(255,255,255,.7); font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.contact-row button:hover, .contact-row button.copied { background: var(--lime); color: var(--ink); }
.visit-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hours-card { align-self: start; position: relative; z-index: 2; padding: 30px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.035); }
.hours-card > p { margin: 0 0 28px; color: var(--lime); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hours-card > div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.13); }
.hours-card span { color: rgba(255,255,255,.58); font-size: 10px; }
.hours-card strong { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.hours-card > small { display: block; margin-top: 18px; color: rgba(255,255,255,.38); font-size: 8px; }
.visit-art { width: 250px; height: 250px; position: relative; align-self: center; justify-self: center; z-index: 2; }
.visit-art i { position: absolute; border: 1px solid rgba(215,239,104,.32); border-radius: 50%; animation: orbitFloat 6s ease-in-out infinite; }
.visit-art i:nth-child(1) { inset: 0; }
.visit-art i:nth-child(2) { inset: 34px; animation-delay: -.8s; }
.visit-art i:nth-child(3) { inset: 72px; background: var(--rust); border: 0; animation-delay: -1.6s; }
.visit-art span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-family: var(--serif); font-size: 34px; }
@keyframes orbitFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(3deg); } }

/* Testimonial and journal */
.quote-section { text-align: center; }
.quote-section .eyebrow { justify-content: center; }
.quote-section blockquote { max-width: 1120px; margin: 48px auto 38px; font-size: clamp(39px, 5.5vw, 82px); line-height: 1.03; }
.quote-person { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: 15px; }
.quote-person > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--rust); color: #fff; font-size: 9px; font-weight: 700; }
.quote-person p { margin: 0; color: #6b756f; font-size: 9px; line-height: 1.6; text-align: left; }
.quote-person p strong { color: var(--ink); }
.quote-person > b { margin-left: 28px; color: var(--rust); font-size: 10px; letter-spacing: .16em; }
.journal-section { border-top: 1px solid var(--line); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.journal-card { min-height: 500px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 24px; transition: transform .35s ease, box-shadow .35s ease; }
.journal-card:hover { transform: translateY(-7px); box-shadow: 0 24px 50px rgba(19,35,27,.13); }
.journal-card > span { font-family: var(--serif); font-size: 20px; }
.journal-card small { margin-top: auto; font-size: 7px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.journal-card h3 { max-width: 360px; margin: 12px 0 28px; font-family: var(--serif); font-size: clamp(27px, 2.3vw, 37px); font-weight: 400; line-height: 1.07; }
.journal-card > p { display: flex; justify-content: space-between; margin: 0; padding-top: 14px; border-top: 1px solid currentColor; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.journal-coral { background: var(--rust); color: #fff; }
.journal-lime { background: var(--lime); }
.journal-cream { background: var(--cream); }
.journal-art { width: 190px; height: 190px; position: absolute; right: -20px; top: 60px; }
.journal-art i { position: absolute; border: 1px solid currentColor; border-radius: 50%; opacity: .6; }
.journal-art i:nth-child(1) { inset: 0; }
.journal-art i:nth-child(2) { inset: 26px; }
.journal-art i:nth-child(3) { inset: 58px; background: currentColor; opacity: .14; }

/* Footer */
footer { padding: 72px clamp(24px, 5vw, 76px) 24px; background: #0e1b15; color: #fff; }
.footer-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr .7fr; gap: 50px; padding-bottom: 70px; }
.footer-logo { display: inline-block; font-size: 28px; }
.footer-identity p { color: rgba(255,255,255,.54); font-family: var(--serif); font-size: 21px; line-height: 1.42; }
.footer-main small { display: block; margin-bottom: 16px; color: var(--lime); font-size: 7px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.footer-main p { margin: 0; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.8; }
.footer-location > span, .footer-location > a { display: block; margin-top: 12px; color: #fff; font-family: var(--serif); font-size: 15px; overflow-wrap: anywhere; }
.footer-location > a { margin-top: 6px; color: rgba(255,255,255,.6); font-size: 12px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links small { margin-bottom: 6px; }
.footer-links a { color: rgba(255,255,255,.6); font-size: 10px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.35); font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }

/* Reveal and motion */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.menu-column:nth-child(2), .favorite-card:nth-of-type(3), .journal-card:nth-child(2) { transition-delay: .08s; }
.menu-column:nth-child(3), .favorite-card:nth-of-type(4), .journal-card:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 56% 44%; }
  .hero-title { font-size: clamp(59px, 7.2vw, 92px); }
  .scroll-cue { display: none; }
  .menu-board { grid-template-columns: 1fr 1fr; }
  .menu-column:nth-child(3) { grid-column: 1 / -1; }
  .favorites-section { grid-template-columns: 1fr 1fr 1fr; }
  .favorites-intro { grid-column: 1 / -1; min-height: 420px; }
  .favorite-card { min-height: 600px; }
  .visit-section { grid-template-columns: 1fr 1fr; }
  .visit-details { grid-column: 1; }
  .hours-card { grid-column: 2; }
  .visit-art { display: none; }
  .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-links { grid-column: 2 / -1; flex-direction: row; gap: 24px; }
}

@media (max-width: 900px) {
  .announcement { grid-template-columns: 1fr auto; }
  .announcement-hours { display: none; }
  .announcement > a { justify-self: end; }
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { display: none; position: absolute; top: 86px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 18px 24px 28px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 35px rgba(19,35,27,.08); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 21px; }
  .menu-button { display: block; }
  .contact-link { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 700px; padding-bottom: 70px; }
  .hero-title { font-size: clamp(64px, 12vw, 104px); }
  .hero-image-wrap { min-height: 760px; }
  .section-head { grid-template-columns: 1fr; gap: 28px; }
  .story-section { gap: 50px; }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .journal-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .announcement { height: 31px; padding: 0 15px; font-size: 7px; }
  .announcement > a { font-size: 0; }
  .announcement > a::before { content: "East 59th St ↗"; font-size: 7px; }
  .site-header { height: 74px; top: 31px; padding: 0 18px; }
  .main-nav { top: 74px; }
  .directions-link { padding: 10px 12px; }
  .menu-button { width: 38px; height: 38px; }
  .header-actions { gap: 9px; }
  .hero { padding-top: 74px; }
  .hero-copy { min-height: 680px; padding: 62px 20px 55px; }
  .hero-title { font-size: clamp(56px, 18.3vw, 80px); }
  .hero-lead, .hero-buttons { margin-left: 0; }
  .hero-buttons { align-items: flex-start; flex-direction: column; gap: 22px; }
  .hero-details { gap: 25px; }
  .hero-details strong { font-size: 15px; }
  .hero-image-wrap { min-height: 620px; }
  .coffee-steam { left: 42%; top: 22%; transform: scale(.78); }
  .hero-orbit { width: 92px; height: 92px; right: 16px; top: 18px; }
  .hero-orbit span { width: 63px; top: 17px; font-size: 4.5px; }
  .hero-orbit b { top: 7px; font-size: 26px; }
  .hero-card { width: calc(100% - 36px); left: 18px; bottom: 20px; grid-template-columns: auto 1fr; }
  .hero-card > b { grid-column: 2; }
  .vertical-copy { display: none; }
  .section { padding: 84px 20px; }
  h2 { font-size: clamp(49px, 16vw, 73px); }
  .menu-board { grid-template-columns: 1fr; }
  .menu-column:nth-child(3) { grid-column: auto; }
  .menu-column { padding: 25px 20px 8px; }
  .menu-note { text-align: left; }
  .favorites-section { grid-template-columns: 1fr; }
  .favorites-intro { min-height: 430px; padding: 70px 20px; }
  .favorite-card { min-height: 600px; border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }
  .story-section { grid-template-columns: 1fr; }
  .story-photo { height: 620px; }
  .visit-section { grid-template-columns: 1fr; gap: 48px; padding: 84px 20px; }
  .visit-heading, .visit-details, .hours-card { grid-column: auto; }
  .contact-row { grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; }
  .contact-row small { grid-column: 1 / -1; }
  .contact-row a, .contact-row > span { font-size: 16px; }
  .visit-buttons { align-items: flex-start; flex-direction: column; }
  .hours-card > div { align-items: flex-start; flex-direction: column; gap: 8px; }
  .quote-section blockquote { margin-top: 33px; }
  .quote-person { grid-template-columns: auto auto; }
  .quote-person > b { grid-column: 1 / -1; margin: 8px 0 0; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-card:last-child { grid-column: auto; }
  .journal-card { min-height: 455px; }
  footer { padding: 58px 20px 22px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 42px 25px; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-links { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body:not(.is-loaded) { overflow: auto; }
  .page-loader { display: none; }
  .title-line i, .hero-photo, .hero-reveal { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}