/* JK Food & Deli — warm editorial design, version 4. */
:root {
  --cream: #fff8ef;
  --paper: #fffdf9;
  --red: #872b3f;
  --red-dark: #631d31;
  --green: #4b1728;
  --ink: #381c23;
  --muted: #756568;
  --yellow: #f2cb75;
  --mustard: #f2cb75;
  --line: #e7d9ce;
}
body { background: var(--cream); }
.site-header { background: rgba(255,248,239,.97); border-bottom-color: var(--line); }
.brand-mark { background: var(--red-dark); }
.brand-text { color: var(--red-dark); }
.top-bar { background: #481627; }
.nav-call { background: var(--red-dark); }
h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-style: italic; letter-spacing: -1.7px; }
.button { border-radius: 12px; }
.button-yellow { background: var(--yellow); border-color: var(--yellow); color: #421525; }
.button-red { background: var(--red); }
.button-yellow:hover { background: #ffdda0; }
.hero { background: #280b13; min-height: 790px; }
.hero-layout { min-height: 790px; padding-top: 70px; padding-bottom: 165px; }
.hero-slides, .hero-slide { inset: 0; }
.hero-slide { opacity: 0; transition: opacity 1.15s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { object-position: 62% center; transform: scale(1.025); animation: none; transition: transform 8s linear; }
.hero-slide.is-active img { transform: scale(1.07); animation: none; }
.hero-slide:first-child img { object-position: center; }
.hero-shade { background: linear-gradient(90deg,rgba(32,5,14,.91),rgba(32,5,14,.64) 37%,rgba(32,5,14,.08) 77%),linear-gradient(0deg,rgba(32,5,14,.82),transparent 38%); }
.hero-copy { max-width: 670px; width: 57%; }
.hero h1 { font-size: clamp(64px,6.3vw,96px); line-height: 1.04; letter-spacing: -3.5px; }
.hero h1 em { font-family: Georgia,'Times New Roman',serif; font-style: italic; font-weight: 500; letter-spacing: -4px; color: var(--yellow); }
.hero-description { max-width: 550px; font-size: 21px; line-height: 1.65; color: #f6e9e3; }
.hero-eyebrow { color: var(--yellow); }
.hero-address { color: #f7e9dd; }
.hero-bottom { bottom: 30px; gap: 28px; }
.hero-photo-caption { max-width: 48%; }
.hero-photo-caption > span { color: var(--yellow); font-size: 15px; }
.hero-photo-caption p { font-size: 16px; }
.hero-control-panel { display: flex; align-items: center; gap: 17px; flex-shrink: 0; }
.hero-arrows { display: flex; gap: 8px; }
.round-control { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d9bfae; color: var(--red-dark); background: transparent; transition: background .2s,color .2s,transform .2s; }
.round-control .icon { width: 20px; height: 20px; }
.round-control:hover:not(:disabled) { color: var(--cream); background: var(--red); transform: translateY(-2px); }
.round-control:disabled { opacity: .3; cursor: default; }
.hero .round-control { color: white; border-color: #ffffff66; background: #ffffff08; }
.hero .round-control:hover { background: #ffffff24; color: var(--yellow); }
.arrow-back { transform: rotate(180deg); }
.hero-indicators { display: flex; gap: 7px; }
.hero-indicator { position: relative; width: 32px; min-height: 46px; padding: 0; background: transparent; border: 0; }
.hero-indicator::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; top: 21px; border-radius: 4px; background: #ffffff55; transition: background .25s; }
.hero-indicator[aria-pressed=true]::after { background: var(--yellow); }
.hero .motion-toggle { font-size: 13px; gap: 9px; min-width: 113px; }
.hero-in-view .floating-query { opacity: 0; pointer-events: none; transform: translateY(12px); }
.good-things { background: var(--yellow); color: var(--red-dark); padding: 21px 0; }
.marquee-set span { font-size: 21px; letter-spacing: .9px; }
.marquee-set b { color: var(--red); }
.section-heading { align-items: flex-end; }
.section-heading h2 { font-size: clamp(44px,4.7vw,66px); }
.section-heading > p { font-size: 18px; line-height: 1.8; }
.deli-studio { grid-template-columns: 1.02fr 1fr; gap: 75px; }
.deli-visual { position: relative; min-width: 0; border-radius: 28px; background: #ead8bf; overflow: hidden; box-shadow: 0 24px 55px #48162715; }
.deli-visual img { width: 100%; height: auto; aspect-ratio: 1.02; object-fit: cover; object-position: center; transition: opacity .25s,transform .7s; }
.deli-visual img.is-changing { opacity: .15; transform: scale(1.025); }
.deli-visual::after { content: ''; position: absolute; inset: 50% 0 0; pointer-events: none; background: linear-gradient(transparent,#2b0d17b8); }
.deli-photo-label { position: absolute; top: 24px; left: 24px; z-index: 1; padding: 9px 15px; border-radius: 30px; background: var(--cream); color: var(--red-dark); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.deli-visual-note { position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 1; color: #fff8ef; font-family: Georgia,serif; font-size: 29px; line-height: 1.25; font-style: italic; }
.deli-studio .deli-copy h2 { font-size: clamp(43px,4.4vw,62px); }
.deli-copy .deli-intro { font-size: 19px; line-height: 1.8; margin-top: 24px; }
.deli-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 22px; }
.deli-tab { border: 1px solid #d9c5b9; border-radius: 30px; padding: 11px 16px; background: transparent; font-size: 15px; font-weight: 700; min-height: 47px; line-height: 1.4; }
.deli-tab[aria-selected=true] { color: var(--cream); background: var(--red-dark); border-color: var(--red-dark); }
.deli-panel { border-top: 1px solid var(--line); padding-top: 21px; min-height: 145px; margin-bottom: 20px; }
.deli-panel h3 { font-size: 25px; letter-spacing: -.6px; margin-bottom: 12px; }
.deli-panel p { font-size: 17px; line-height: 1.8; }
.in-store-section { background: #f6ebdd; }
.browse-heading { margin-bottom: 28px; }
.browse-tools { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 13px; }
.browse-tools .filter-row { margin: 0; flex-wrap: wrap; }
.filter { font-size: 15px; min-height: 44px; padding: 9px 17px; border-color: #d9c7b8; }
.filter.active { color: var(--cream); background: var(--red-dark); border-color: var(--red-dark); }
.category-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.category-count { font-size: 13px; font-weight: 700; margin-right: 8px; color: var(--muted); white-space: nowrap; }
.category-track { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 2px; scrollbar-width: none; padding: 12px 2px 26px; touch-action: pan-x pan-y; cursor: grab; }
.category-track::-webkit-scrollbar { display: none; }
.category-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.category-track > .store-card { flex: 0 0 calc((100% - 72px)/3.15); min-width: 285px; scroll-snap-align: start; border-radius: 24px; overflow: hidden; background: var(--paper); border: 1px solid #ecdfd1; box-shadow: 0 8px 30px #48162708; }
.category-track > .store-card[hidden] { display: none; }
.category-card-link { display: flex; flex-direction: column; height: 100%; }
.category-track .card-photo { height: auto; aspect-ratio: 1.12; }
.category-track .card-photo img { width: 100%; height: 100%; transition: transform .6s; }
.category-track .store-card:hover .card-photo img { transform: scale(1.045); }
.category-track .card-tag { left: 20px; top: 20px; bottom: auto; background: var(--cream); color: var(--red-dark); font-size: 11px; padding: 8px 13px; border-radius: 30px; letter-spacing: 1.1px; }
.category-track .card-body { padding: 25px 25px 27px; flex: 1; }
.category-track .card-body h3 { font-size: 27px; letter-spacing: -.8px; margin: 0 0 12px; }
.category-track .card-body p { font-size: 17px; line-height: 1.75; }
.card-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; color: var(--red); font-size: 14px; font-weight: 800; }
.card-action .icon { width: 21px; height: 21px; }
.browse-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 7px; }
.browse-foot .availability-note { margin: 0; text-align: left; }
.swipe-hint { color: var(--red); font-size: 13px; font-weight: 700; white-space: nowrap; }
.convenience-section { background: #481627; color: var(--cream); }
.convenience-section .eyebrow, .convenience-section h2 em { color: var(--yellow); }
.convenience-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 40px; }
.convenience-heading h2 { font-size: clamp(44px,4.8vw,65px); }
.convenience-heading .button { border-color: #f1dbc57a; white-space: nowrap; }
.convenience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.convenience-card { border: 1px solid #906577; border-radius: 25px; overflow: hidden; background: #ffffff06; }
.service-photo { display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: #3b1523; }
.service-photo img { width: 100%; aspect-ratio: 1.55; object-fit: cover; transition: transform .6s; }
.service-photo:hover img { transform: scale(1.04); }
.convenience-card-copy { padding: 27px 29px 31px; }
.convenience-card-copy h3 { color: var(--cream); font-size: 29px; letter-spacing: -.7px; margin-bottom: 13px; }
.convenience-card-copy p { color: #e4ced0; font-size: 17px; line-height: 1.8; }
.service-label { display: inline-block; color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 13px; }
.our-place-copy p { color: var(--muted); }
.storefront-frame { background: var(--red-dark); box-shadow: 18px 18px 0 #ead2ad; }
.gallery-tile { background: var(--red-dark); }
.gallery-tile::after { background: linear-gradient(transparent,#3c1026dc); }
.hours-card { background: #f2e5d3; }
.hours-status { background: #e9d9c5; color: var(--red-dark); }
.location-card::after { background: linear-gradient(0deg,#3c1026e8,#3c102611); }
.query-card { background: #f2e1ca; box-shadow: 14px 14px 0 #e7c994; }
.last-call { background: var(--red-dark); }
.footer { background: #f3e8dc; }
.photo-dialog, .privacy-dialog, .inquiry-dialog { background: var(--cream); }
dialog::backdrop { background: #2e0f20d9; }
.pause-motion .hero-slide { transition: none; }
.pause-motion .hero-slide img { transition: none; transform: scale(1.025); }
@media (max-width:1100px) {
  .hero-control-panel { gap: 12px; }
  .hero-photo-caption { max-width: 43%; }
  .hero-photo-caption p { font-size: 14px; }
  .hero .motion-toggle { min-width: 0; }
  .hero-indicator { width: 25px; }
  .deli-studio { gap: 43px; }
  .deli-tabs { gap: 7px; }
  .deli-tab { font-size: 14px; padding: 11px 12px; }
  .category-track > .store-card { flex-basis: calc((100% - 48px)/2.2); }
  .browse-tools { align-items: flex-end; }
  .category-count { display: none; }
}
@media (max-width:760px) {
  .hero { min-height: 0; padding-top: 260px; }
  .hero-slides { inset: 0 0 auto; height: 330px; }
  .hero-slide img, .hero-slide:first-child img { object-position: center; }
  .hero-slide:first-child img { object-position: 81% center; }
  .hero-shade { background: linear-gradient(180deg,transparent 180px,#280b13 325px); }
  .hero-layout { min-height: 0; padding-top: 24px; padding-bottom: 29px; }
  .hero-copy { width: 100%; max-width: none; }
  .hero h1 { font-size: clamp(44px,8.4vw,62px); letter-spacing: -2px; }
  .hero h1 em { letter-spacing: -2.7px; }
  .hero-eyebrow { font-size: 12px; margin-bottom: 21px; }
  .hero-description { font-size: 19px; line-height: 1.65; margin-top: 23px; margin-bottom: 25px; }
  .hero .button-row { display: flex; flex-wrap: wrap; width: 100%; max-width: none; gap: 11px; }
  .hero .button { width: auto; min-height: 55px; font-size: 16px; padding: 15px 18px; gap: 12px; }
  .hero-address { font-size: 14px; margin-top: 22px; max-width: none; }
  .hero-bottom { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 13px; padding-bottom: 27px; }
  .hero-photo-caption { display: flex; max-width: 100%; gap: 13px; }
  .hero-photo-caption > span { font-size: 13px; }
  .hero-photo-caption p { font-size: 14px; padding-left: 13px; border-left: 1px solid #ffffff55; margin-top: 0; }
  .hero-control-panel { width: 100%; justify-content: space-between; gap: 12px; }
  .hero .motion-toggle { font-size: 13px; }
  .hero-indicator { width: 32px; }
  .marquee-set { gap: 27px; padding-right: 27px; }
  .marquee-set span { font-size: 18px; }
  .good-things { padding: 17px 0; }
  .deli-studio { display: grid; grid-template-columns: 1fr; gap: 38px; }
  .deli-visual img { aspect-ratio: 1.17; }
  .deli-studio .deli-copy h2 { font-size: 46px; }
  .deli-panel { min-height: 150px; }
  .deli-copy .deli-intro { font-size: 18px; }
  .deli-tabs { gap: 8px; margin-top: 25px; }
  .deli-tab { font-size: 14px; padding: 10px 14px; }
  .deli-visual-note { font-size: 27px; }
  .section-heading h2 { font-size: 46px; }
  .section-heading > p { font-size: 18px; max-width: none; }
  .browse-tools { flex-wrap: wrap; gap: 17px; }
  .browse-tools .filter-row { width: 100%; gap: 8px; }
  .filter { font-size: 14px; padding: 9px 13px; }
  .category-controls { width: 100%; justify-content: flex-end; }
  .category-count { display: block; margin-right: auto; }
  .category-track { gap: 18px; padding-top: 6px; }
  .category-track > .store-card { flex-basis: 84%; min-width: 0; }
  .category-track .card-photo { aspect-ratio: 1.14; }
  .category-track .card-body { padding: 24px; }
  .category-track .card-body h3 { font-size: 27px; }
  .category-track .card-body p { font-size: 17px; }
  .browse-foot { display: block; }
  .browse-foot .availability-note { font-size: 15px; line-height: 1.8; }
  .swipe-hint { display: block; margin-top: 12px; }
  .convenience-heading { display: block; margin-bottom: 30px; }
  .convenience-heading h2 { font-size: 46px; }
  .convenience-heading .button { margin-top: 25px; }
  .convenience-grid { grid-template-columns: 1fr; gap: 24px; }
  .convenience-card-copy { padding: 25px; }
  .convenience-card-copy h3 { font-size: 28px; }
  .service-photo img { aspect-ratio: 1.4; }
}
@media (max-width:450px) {
  .hero { padding-top: 235px; }
  .hero-slides { height: 300px; }
  .hero-shade { background: linear-gradient(180deg,transparent 155px,#280b13 295px); }
  .hero h1 { font-size: clamp(37px,10.4vw,46px); }
  .hero-description { font-size: 18px; }
  .hero .button-row { flex-wrap: nowrap; }
  .hero .button { font-size: 15px; padding: 14px 16px; gap: 10px; }
  .hero .button .icon { width: 19px; height: 19px; }
  .hero-address { font-size: 13px; }
  .hero .round-control { width: 42px; height: 44px; }
  .hero-indicator { width: 27px; }
  .hero .motion-toggle { font-size: 12px; }
  .deli-studio .deli-copy h2, .section-heading h2, .convenience-heading h2 { font-size: 40px; }
  .deli-panel h3 { font-size: 24px; }
  .deli-photo-label { left: 20px; top: 20px; }
  .deli-visual-note { left: 22px; bottom: 24px; font-size: 25px; }
  .deli-tab { padding: 11px 12px; font-size: 13px; }
  .category-track .card-body { padding: 21px; }
  .category-track .card-body h3 { font-size: 25px; }
  .convenience-card-copy h3 { font-size: 25px; }
}
@media (prefers-reduced-motion:reduce) {
  .category-track { scroll-behavior: auto; }
  .hero-slide img, .hero-slide.is-active img { transform: none !important; }
  .deli-visual img { transition: none; }
}


/* Body-copy readability update: headings and layout retain their existing rules. */
@font-face {
  font-family: LocalSans;
  src: url('assets/open-sans-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
body { font-weight: 600; }
.hours-table th { font-weight: 600; }


/* Business email links beside the existing phone contacts. */
.contact-email { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-email .icon { width: 20px; height: 20px; }
.nav-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.nav-email { color: var(--red-dark); font-size: 14px; line-height: 1.35; white-space: nowrap; }
.email-contact-line { margin-top: 12px; }
.email-contact-line .contact-email, .visit-email { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.6; }
.visit-email { margin-bottom: 22px; }
.contact-urgent > .urgent-email { font-size: 18px; font-weight: 600; gap: 10px; }
.footer-main > div > .footer-email { font-size: 16px; font-weight: 600; }
@media (max-width:780px) {
  .nav-contact { display: contents; }
  .nav-email { display: none; }
  .mobile-actions > a:nth-child(3) { background: var(--red); color: white; }
  .mobile-actions > a.mobile-email { position: absolute; bottom: 100%; left: 0; right: 0; min-height: 31px; padding: 5px 12px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; background: var(--cream); color: var(--green); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; font-weight: 600; }
  .mobile-actions > a.mobile-email .icon { width: 16px; height: 16px; }
  .footer { padding-bottom: 110px; }
}