/* ===========================================================================
   YA HABIBI SWEETS & ICE CREAM
   ---------------------------------------------------------------------------
   One stylesheet, no framework, no build step, no CDN, no web fonts.

   THE IDEA
   The shop sells two things that pull in opposite directions: warm syrupy
   pastry and cold gelato. So the palette does the same — dark roasted
   espresso and gold for the pastry side, a cool pistachio green for the ice
   cream side, over warm parchment.

   The recurring shape is the pointed arch, taken from the doorways and
   mashrabiya screens that Levantine sweet shops are built around. It frames
   photographs, tops the cards, and appears as a hairline motif between
   sections. Nothing here is clip-art "Middle Eastern"; the geometry is drawn
   from the same rules as the real thing — an eight-point star built from two
   squares, and arches struck from two centres.

   CONTENTS
     1. Tokens            7. Menu
     2. Reset & base      8. Gallery & reviews
     3. Accessibility     9. Visit, hours, map
     4. Layout            10. Forms
     5. Header & nav      11. Footer
     6. Hero & sections   12. Motion, reduced motion, print
   =========================================================================== */

/* ========================= 1. TOKENS ========================= */
:root {
  /* Roasted, syrupy dark — the pastry side */
  --espresso:   #1A1310;
  --espresso-2: #241A15;
  --espresso-3: #33251E;

  /* Warm parchment — the page */
  --cream:      #FBF6EE;
  --cream-2:    #F4EADA;
  --cream-3:    #E9DAC3;

  /* Gold, lifted from the logo */
  --gold:       #C08A2E;
  --gold-hi:    #E3B45C;
  --gold-deep:  #8F6417;

  /* Pistachio — the ice cream side */
  --pistachio:  #6F8F4F;
  --pistachio-hi: #9DBC79;

  /* Rose, from the Arabic wordmark. Used sparingly. */
  --rose:       #9A3341;

  --ink:        #1A1310;
  --ink-2:      #5A4A40;
  --ink-3:      #8B7768;
  --on-dark:    #F6EEE2;
  --on-dark-2:  rgba(246,238,226,.74);
  --on-dark-3:  rgba(246,238,226,.46);
  --rule:       #E0D2BC;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Consolas, "Roboto Mono", Menlo, monospace;

  --t-xs:   clamp(.70rem, .68rem + .10vw, .77rem);
  --t-sm:   clamp(.85rem, .83rem + .12vw, .93rem);
  --t-base: clamp(1rem, .97rem + .18vw, 1.1rem);
  --t-lg:   clamp(1.12rem, 1.04rem + .38vw, 1.35rem);
  --t-xl:   clamp(1.35rem, 1.18rem + .8vw, 1.95rem);
  --t-2xl:  clamp(1.85rem, 1.45rem + 1.9vw, 3rem);
  --t-3xl:  clamp(2.4rem, 1.75rem + 3.1vw, 4.4rem);
  --t-4xl:  clamp(3rem, 1.9rem + 5.4vw, 7rem);

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem; --s9: 7rem;

  --wrap: 1220px;
  --gutter: clamp(1.15rem, .7rem + 2.4vw, 3.25rem);
  --band: clamp(3.75rem, 2.6rem + 5.5vw, 8rem);
  --head-h: 82px;

  --r-sm: 10px; --r-md: 18px; --r-lg: 28px;
  /* the pointed arch */
  --arch: 48% 48% 10px 10px / 38% 38% 10px 10px;

  --ease: cubic-bezier(.22,.72,.28,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);

  --shadow-sm: 0 2px 6px rgba(26,19,16,.06), 0 8px 20px -14px rgba(26,19,16,.22);
  --shadow-md: 0 10px 26px -14px rgba(26,19,16,.35), 0 30px 60px -45px rgba(26,19,16,.5);
  --shadow-lg: 0 20px 50px -24px rgba(26,19,16,.42), 0 60px 90px -60px rgba(26,19,16,.6);
}

/* ========================= 2. RESET & BASE ========================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.25rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -.032em; }
h2 { font-size: var(--t-3xl); letter-spacing: -.026em; }
h3 { font-size: var(--t-xl); letter-spacing: -.016em; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--gold-deep); text-underline-offset: 4px; }
a:hover { color: var(--gold); }
img, svg, iframe { max-width: 100%; display: block; }
strong, b { font-weight: 650; }

/* ========================= 3. ACCESSIBILITY ========================= */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.dark :focus-visible { outline-color: var(--gold-hi); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 300;
  background: var(--espresso); color: var(--on-dark);
  padding: .85rem 1.4rem; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: var(--s4); color: var(--on-dark); }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ========================= 4. LAYOUT ========================= */
.wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.narrow { width: min(760px, 100%); }
.band { padding-block: var(--band); }
.dark { background: var(--espresso); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.tint { background: var(--cream-2); }

/* The eight-point star, built the way the real thing is: two squares, one
   rotated 45°. Used at low opacity as a ground texture, never as decoration
   competing with the food. */
.starfield { position: relative; isolation: isolate; }
.starfield::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  opacity: .07;
}
.dark .starfield::before { opacity: .10; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 var(--s3);
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow--start::after { display: none; }
.dark .eyebrow { color: var(--gold-hi); }

.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 56ch; }
.dark .lede { color: var(--on-dark-2); }
.small { font-size: var(--t-sm); }
.dim { color: var(--ink-3); }
.dark .dim { color: var(--on-dark-3); }
.center { text-align: center; }
.head { max-width: 48rem; margin-bottom: var(--s7); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }

.cols { display: grid; gap: var(--s5); }
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.cols--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cols--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---- Buttons ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--body); font-size: var(--t-sm); font-weight: 650;
  letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 1.05rem 2rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: color .22s var(--ease), border-color .22s var(--ease),
              transform .25s var(--ease), box-shadow .3s var(--ease);
}
.btn::before, .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transition: transform .42s var(--ease);
}
.btn::after { transform: translateY(101%); }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn--gold { color: var(--espresso); }
.btn--gold::before { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); }
.btn--gold::after  { background: var(--espresso); }
.btn--gold:hover { color: var(--gold-hi); }

.btn--dark { color: var(--cream); }
.btn--dark::before { background: var(--espresso); }
.btn--dark::after  { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); }
.btn--dark:hover { color: var(--espresso); }

.btn--line { color: var(--ink); border-color: var(--rule); }
.btn--line::after { background: var(--espresso); }
.btn--line:hover { color: var(--cream); border-color: var(--espresso); }
/* The hero sits on a dark photograph but is not a .dark section, so the
   outlined button has to be told to invert here too. Without this its text
   is near-black on a near-black image and reads as an empty pill. */
.dark .btn--line, .hero .btn--line { color: var(--on-dark); border-color: rgba(246,238,226,.4); }
.dark .btn--line::after, .hero .btn--line::after { background: var(--cream); }
.dark .btn--line:hover, .hero .btn--line:hover { color: var(--espresso); border-color: var(--cream); }

.btn--lg { padding: 1.2rem 2.4rem; font-size: var(--t-base); }
.btn--wide { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }

.ico { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico--f { fill: currentColor; stroke: none; }

/* ========================= 5. HEADER & NAV ========================= */
.site-head {
  position: sticky; top: 0; z-index: 200;
  background: rgba(26,19,16,.92);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--on-dark);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-head.stuck { box-shadow: 0 10px 34px -22px rgba(0,0,0,.9); }
.site-head::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,180,92,.5), transparent);
}
.head-in { display: flex; align-items: center; gap: var(--s5); min-height: var(--head-h); }

.brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand img { height: clamp(44px, 4.4vw, 60px); width: auto; transition: transform .35s var(--ease); }
.brand:hover img { transform: scale(1.04); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__list { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__list a {
  position: relative; text-decoration: none; color: var(--on-dark-2);
  font-size: var(--t-sm); font-weight: 550; letter-spacing: .02em; padding-block: .45rem;
  transition: color .2s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: .1rem; width: 100%; height: 1.5px;
  background: var(--gold-hi); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav__list a:hover { color: var(--on-dark); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list a[aria-current="page"] { color: var(--on-dark); }

.nav__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .85rem; font-weight: 600;
  color: var(--gold-hi); text-decoration: none; white-space: nowrap;
}
.nav__tel:hover { color: var(--cream); }

.burger {
  display: none; width: 48px; height: 48px; flex: none; padding: 0;
  background: transparent; border: 1px solid rgba(246,238,226,.28);
  border-radius: 999px; cursor: pointer;
}
.burger span { display: block; width: 17px; height: 1.6px; margin: 0 auto;
               background: var(--on-dark); border-radius: 2px;
               transition: transform .32s var(--ease), opacity .2s var(--ease); }
.burger span + span { margin-top: 4.6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto 0; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--espresso-2);
    padding: var(--s5) var(--gutter) var(--s7);
    max-height: calc(100vh - var(--head-h)); overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .45s var(--ease);
  }
  .nav.open { clip-path: inset(0 0 0 0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    font-family: var(--display); font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    color: var(--on-dark); padding: .65rem 0;
    border-bottom: 1px solid rgba(246,238,226,.12);
    opacity: 0; transform: translateY(12px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  .nav.open .nav__list a { opacity: 1; transform: none; }
  .nav__list a::after { display: none; }
  .nav__tel { padding-top: var(--s5); font-size: 1.05rem; }
  .nav__cta { margin-top: var(--s4); }
  body.locked { overflow: hidden; }
}

/* Open / closed pill, driven by the real opening hours in JS. */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status--open { color: var(--pistachio-hi); }
.status--open .status__dot { animation: pulse 2.4s var(--ease) infinite; }
.status--shut { color: var(--on-dark-3); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ========================= 6. HERO & SECTIONS ========================= */
.hero {
  position: relative; min-height: min(88vh, 820px);
  display: grid; align-items: end;
  background: var(--espresso); color: var(--on-dark);
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: heroDrift 22s var(--ease) infinite alternate;
}
@keyframes heroDrift { to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,19,16,.72) 0%, rgba(26,19,16,.35) 38%, rgba(26,19,16,.92) 100%),
    radial-gradient(70% 50% at 20% 90%, rgba(192,138,46,.22), transparent 70%);
}
.hero__in { position: relative; z-index: 2; padding-block: var(--s8) var(--s7); }
.hero h1 { max-width: 16ch; margin-bottom: var(--s5); }
.hero h1 em { font-style: italic; color: var(--gold-hi); }
.hero .lede { color: var(--on-dark-2); max-width: 48ch; margin-bottom: var(--s6); }
.hero__meta { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center;
              margin-top: var(--s6); font-size: var(--t-sm); color: var(--on-dark-2); }
.hero__meta a { color: var(--gold-hi); text-decoration: none; }
.hero__meta a:hover { color: var(--cream); }

/* ---- Ticker of what they make ---- */
.ticker {
  overflow: hidden; background: var(--espresso-2); color: var(--on-dark);
  border-block: 1px solid rgba(224,180,92,.22); padding-block: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9% 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9% 91%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; flex: none; }
.ticker__set span {
  display: flex; align-items: center; gap: 1.6rem; padding-inline: 1.6rem;
  font-family: var(--display); font-size: clamp(1rem, 2.1vw, 1.4rem);
  white-space: nowrap; color: var(--on-dark-2);
}
.ticker__set span::after {
  content: ""; width: 6px; height: 6px; rotate: 45deg; flex: none;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(192,138,46,.18);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- Arched photo frames ---- */
.arch { border-radius: var(--arch); overflow: hidden; position: relative; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--framed::after {
  content: ""; position: absolute; inset: 8px; border-radius: var(--arch);
  border: 1px solid rgba(246,238,226,.5); pointer-events: none;
}

/* ---- Signature cards ---- */
.sigs { display: grid; gap: var(--s5);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.sig {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .4s var(--ease);
}
.sig:hover { transform: translateY(-6px); }
.sig__img {
  aspect-ratio: 4/5; border-radius: var(--arch); overflow: hidden;
  background: var(--cream-2); box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease);
}
.sig:hover .sig__img { box-shadow: var(--shadow-md); }
.sig__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.sig:hover .sig__img img { transform: scale(1.07); }
.sig__body { padding-top: var(--s4); display: grid; gap: .25rem; }
.sig h3 { margin: 0; font-size: var(--t-lg); }
.sig p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.sig__price { font-family: var(--mono); font-size: var(--t-sm); color: var(--gold-deep); }

/* ---- Story ---- */
.story { display: grid; gap: clamp(2rem, 1.4rem + 3.5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) { .story { grid-template-columns: 1fr .85fr; } }
.story__media { position: relative; }
.story__media .arch { aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
/* a gold rule that traces the arch, offset like a mount */
.story__media::before {
  content: ""; position: absolute; inset: -14px -14px 14px 14px;
  border: 1px solid var(--gold); border-radius: var(--arch); opacity: .5; pointer-events: none;
}

/* ========================= 7. MENU ========================= */
.menubar {
  position: sticky; top: var(--head-h); z-index: 60;
  background: rgba(251,246,238,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s4); margin-bottom: var(--s6);
}
.dark .menubar { background: rgba(26,19,16,.95); border-bottom-color: rgba(246,238,226,.14); }
.menubar__in { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font: inherit; font-size: var(--t-sm); font-weight: 550; cursor: pointer;
  padding: .5rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), transform .2s var(--ease);
}
.chip:hover { border-color: var(--espresso); color: var(--ink); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.menufind { position: relative; margin-left: auto; min-width: 13rem; max-width: 20rem; flex: 1; }
.menufind input {
  font: inherit; font-size: var(--t-sm); width: 100%;
  padding: .6rem 1rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--cream); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.menufind input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192,138,46,.16); }
.menucount { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-3); }

.mgroup { margin-bottom: var(--s8); scroll-margin-top: calc(var(--head-h) + 6rem); }
.mgroup__head {
  display: flex; align-items: baseline; gap: var(--s4);
  padding-bottom: var(--s3); margin-bottom: var(--s5);
  border-bottom: 2px solid var(--espresso);
}
.mgroup__head h2 { font-size: var(--t-xl); margin: 0; }
.mgroup__head .n { margin-left: auto; font-family: var(--mono); font-size: var(--t-xs);
                   letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.mlist { display: grid; gap: .1rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .mlist { grid-template-columns: 1fr 1fr; gap: .1rem var(--s7); } }

/* Classic menu typography: name, dotted leader, price. The leader is drawn
   with a repeating gradient so it stretches to whatever gap is left. */
.mitem {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .5rem;
  padding: .7rem .4rem; border-radius: var(--r-sm);
  transition: background .2s var(--ease);
}
.mitem:hover { background: var(--cream-2); }
.mitem__name { font-weight: 550; }
.mitem__dots {
  height: 1em;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-position: bottom 4px left 0; background-size: 6px 6px;
  background-repeat: repeat-x; opacity: .28; min-width: 1.5rem;
}
.mitem__price { font-family: var(--mono); font-size: var(--t-sm); color: var(--gold-deep); font-weight: 600; }
.mitem__desc { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--ink-3); margin: .15rem 0 0; }
.mitem--big .mitem__price { color: var(--rose); }
.is-hidden { display: none !important; }
.mnone { padding: var(--s7); text-align: center; color: var(--ink-2);
         border: 1px dashed var(--rule); border-radius: var(--r-lg); }

/* ========================= 8. GALLERY & REVIEWS ========================= */
.gallery { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 1; background: var(--cream-2); box-shadow: var(--shadow-sm);
}
.gallery figure:nth-child(1), .gallery figure:nth-child(6) { grid-row: span 2; aspect-ratio: 1/2.06; }
@media (max-width: 779px) {
  .gallery figure:nth-child(1), .gallery figure:nth-child(6) { grid-row: auto; aspect-ratio: 1; }
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery figure:hover img { transform: scale(1.08); }

.reviews { display: grid; gap: var(--s5);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.review {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6) var(--s5);
  background: rgba(246,238,226,.05); border: 1px solid rgba(246,238,226,.14);
  border-radius: var(--r-md);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.review:hover { border-color: rgba(224,180,92,.5); transform: translateY(-4px); }
.stars { color: var(--gold-hi); letter-spacing: .18em; font-size: .95rem; }
.review blockquote { font-size: var(--t-sm); line-height: 1.7; color: var(--on-dark-2); }
.review figcaption { margin-top: auto; font-family: var(--mono); font-size: var(--t-xs);
                     letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }

/* ========================= 9. VISIT, HOURS, MAP ========================= */
.visit { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4rem); }
@media (min-width: 940px) { .visit { grid-template-columns: .9fr 1.1fr; } }
.info { display: grid; gap: var(--s5); }
.info li { display: flex; gap: var(--s4); align-items: flex-start; }
.info__i { width: 44px; height: 44px; flex: none; display: grid; place-items: center;
           border: 1px solid var(--rule); border-radius: 999px; color: var(--gold-deep); }
.dark .info__i { border-color: rgba(246,238,226,.2); color: var(--gold-hi); }
.info h3 { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
           text-transform: uppercase; margin: 0 0 .35rem; color: var(--ink-3); font-weight: 600; }
.dark .info h3 { color: var(--on-dark-3); }
.info a { color: inherit; text-decoration: none; }
.info a:hover { color: var(--gold); }
.info address { font-style: normal; }

.hours { display: grid; gap: .3rem; }
.hours div { display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
             padding: .3rem 0; font-size: var(--t-sm); }
.hours dt { color: var(--ink-2); }
.dark .hours dt { color: var(--on-dark-2); }
.hours dd { margin: 0; font-family: var(--mono); font-size: var(--t-xs); }
.hours .today { color: var(--gold-hi); font-weight: 700; }
.hours .today dt { color: var(--gold-hi); }

.map { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3;
       background: var(--cream-2); border: 1px solid var(--rule); }
.dark .map { border-color: rgba(246,238,226,.16); background: var(--espresso-2); }
.map iframe { width: 100%; height: 100%; border: 0; }

/* ========================= 10. FORMS ========================= */
.form { display: grid; gap: var(--s4); }
.form__row { display: grid; gap: var(--s4);
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.f { display: grid; gap: .4rem; }
.f label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
           text-transform: uppercase; color: var(--ink-2); }
.dark .f label { color: var(--on-dark-2); }
.f .req { color: var(--rose); }
.dark .f .req { color: var(--gold-hi); }
.f input, .f select, .f textarea {
  font: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: .8rem .95rem; width: 100%;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.f textarea { min-height: 8rem; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192,138,46,.16);
}
.dark .f input, .dark .f select, .dark .f textarea {
  background: rgba(246,238,226,.06); border-color: rgba(246,238,226,.2); color: var(--on-dark);
}
.dark .f input:focus, .dark .f select:focus, .dark .f textarea:focus {
  border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(224,180,92,.18);
}
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.dark .f input::placeholder, .dark .f textarea::placeholder { color: var(--on-dark-3); }
.f__err { font-size: var(--t-xs); color: var(--rose); margin: 0; min-height: 1em; }
.dark .f__err { color: #F2A0A8; }
.f.bad input, .f.bad select, .f.bad textarea { border-color: var(--rose); }
.form__status { font-size: var(--t-sm); margin: 0; }
.form__status:empty { display: none; }
.form__status.ok { color: var(--pistachio); }
.dark .form__status.ok { color: var(--pistachio-hi); }
.form__status.err { color: var(--rose); }
.dark .form__status.err { color: #F2A0A8; }

/* ========================= 11. FOOTER ========================= */
.foot { background: var(--espresso); color: var(--on-dark-2); padding-block: var(--s8) var(--s6); font-size: var(--t-sm); }
.foot__grid { display: grid; gap: var(--s6);
              grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.foot h2 { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .2em;
           text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s4); font-weight: 600; }
.foot a { color: var(--on-dark-2); text-decoration: none; }
.foot a:hover { color: var(--gold-hi); }
.foot__links { display: grid; gap: .6rem; }
.foot img.mark { height: 54px; width: auto; margin-bottom: var(--s4); }
.foot__legal { margin-top: var(--s7); padding-top: var(--s5);
               border-top: 1px solid rgba(246,238,226,.14);
               display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
               font-size: var(--t-xs); color: var(--on-dark-3); }
.foot__legal p { margin: 0; }

/* ========================= 12. MOTION ========================= */
.line { display: block; overflow: hidden; padding-bottom: .08em; }
.line > span {
  display: block; transform: translateY(115%);
  animation: lift 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--ld, 0) * 1ms);
}
@keyframes lift { to { transform: none; } }

[data-in] { opacity: 0; transform: translateY(24px);
            transition: opacity .85s var(--ease), transform .85s var(--ease);
            transition-delay: calc(var(--d, 0) * 95ms); }
[data-in="left"]  { transform: translateX(-28px); }
[data-in="right"] { transform: translateX(28px); }
[data-in="scale"] { transform: scale(.96); }
[data-in].is-in { opacity: 1; transform: none; }

.no-js [data-in] { opacity: 1; transform: none; }
.no-js .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-in] { opacity: 1 !important; transform: none !important; }
  .line > span { transform: none !important; }
  .hero__img { animation: none; transform: scale(1.02); }
  .ticker__track { animation: none; }
  .gallery figure:hover img, .sig:hover .sig__img img { transform: none; }
}

@media print {
  .site-head, .nav, .btn, .map, .ticker, .gallery { display: none !important; }
  body, .dark, .hero { background: #fff !important; color: #000 !important; }
  .band { padding-block: 1rem; }
  .mitem { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}