/* ==========================================================================
   Heritage logo integration (round 1.1). The store's restored mark is shown
   unaltered on a cream enamel plate, the way a shop sign hangs in the dark.
   The reversed file is used only where the plate would be too heavy (footer).
   ========================================================================== */
:root {
  --burgundy: #7c042c;
  --enamel: oklch(0.955 0.018 86);
  --enamel-2: oklch(0.9 0.022 82);
}

/* ---------- Header badge ---------- */
.wordmark { display: flex; align-items: center; gap: 14px; }
.badge {
  display: inline-grid; place-items: center;
  padding: 6px 9px 5px;
  background:
    radial-gradient(120% 140% at 30% 0%, oklch(1 0 0 / .55), transparent 55%),
    linear-gradient(var(--enamel), var(--enamel-2));
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px oklch(0.45 0.13 12 / .55),
    inset 0 0 0 3px var(--enamel),
    inset 0 0 0 4px oklch(0.45 0.13 12 / .25),
    0 1px 0 oklch(1 0 0 / .08),
    0 10px 24px -10px oklch(0 0 0 / .9);
}
.badge img { height: 34px; width: auto; }
.wordmark-sub {
  display: grid; gap: 5px;
  padding-left: 14px; border-left: 1px solid var(--line-2);
  font: 500 9.5px/1 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bone-3);
}
.wordmark-sub span:first-child { color: var(--brass); }
.menu-top .badge img { height: 28px; }
@media (max-width: 719px) {
  .badge { padding: 5px 7px 4px; }
  .badge img { height: 26px; }
  .wordmark-sub { display: none; }
}

/* ---------- The sign (Our story) ---------- */
.sign {
  position: relative;
  display: grid; justify-items: center; gap: 28px;
  margin: 0 auto clamp(72px, 9vw, 128px);
  padding: clamp(56px, 8vw, 112px) 0 0;
  isolation: isolate;
  --sx: 0.5;
}
/* a cone of warm light falling on the wall behind the plate */
.sign::before {
  content: ""; position: absolute; z-index: -1;
  inset: -40px calc(-1 * var(--gutter)) auto;
  height: calc(100% + 40px);
  background:
    radial-gradient(ellipse 34% 52% at calc(var(--sx) * 100%) 42%, oklch(0.72 0.12 68 / .22), transparent 70%),
    conic-gradient(from 180deg at 50% -8%, transparent 164deg, oklch(0.79 0.105 77 / .07) 172deg, oklch(0.79 0.105 77 / .1) 180deg, oklch(0.79 0.105 77 / .07) 188deg, transparent 196deg);
  pointer-events: none;
}
.sign-plate {
  position: relative;
  width: min(100%, 780px);
  padding: clamp(26px, 5vw, 58px) clamp(22px, 5.5vw, 70px) clamp(22px, 4.4vw, 50px);
  border-radius: 10px;
  background:
    radial-gradient(90% 120% at calc(var(--sx) * 100%) -10%, oklch(1 0 0 / .7), transparent 60%),
    linear-gradient(172deg, var(--enamel) 0%, var(--enamel-2) 100%);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / .6),
    inset 0 0 0 clamp(8px, 1.2vw, 12px) var(--enamel),
    inset 0 0 0 calc(clamp(8px, 1.2vw, 12px) + 1.5px) var(--burgundy),
    inset 0 -18px 30px -18px oklch(0.4 0.05 60 / .35),
    0 2px 0 oklch(0.6 0.03 70),
    0 50px 80px -30px oklch(0 0 0 / .95),
    0 0 120px -20px oklch(0.72 0.12 68 / .25);
  overflow: hidden;
}
.sign-plate img { position: relative; width: 100%; height: auto; }
.screw {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.93 0.06 85), oklch(0.62 0.09 70) 55%, oklch(0.4 0.05 60));
  box-shadow: 0 1px 1px oklch(0 0 0 / .4);
}
.screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: oklch(0.35 0.04 60 / .7); transform: rotate(-35deg); }
.screw:nth-of-type(1) { top: 5px; left: 5px; } .screw:nth-of-type(2) { top: 5px; right: 5px; }
.screw:nth-of-type(3) { bottom: 5px; left: 5px; } .screw:nth-of-type(4) { bottom: 5px; right: 5px; }
@media (min-width: 720px) { .screw { width: 11px; height: 11px; } .screw::after { top: 5px; } .screw:nth-of-type(odd) { left: 7px; } .screw:nth-of-type(even) { right: 7px; } .screw:nth-of-type(-n+2) { top: 7px; } .screw:nth-of-type(n+3) { bottom: 7px; } }
/* a slow gloss that follows the pointer across the enamel */
.sign-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent calc(var(--sx) * 100% - 22%), oklch(1 0 0 / .45) calc(var(--sx) * 100%), transparent calc(var(--sx) * 100% + 22%));
}
.sign figcaption { display: grid; justify-items: center; gap: 8px; text-align: center; }
.sign figcaption .cap { color: var(--brass); }
.sign-note { color: var(--bone-2); font: italic 300 17px/1.4 var(--f-display); max-width: 44ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .sign[data-reveal] .sign-plate { transform: translateY(18px) rotate(-.6deg); transition: transform 1.6s var(--ease); }
  .js .sign[data-reveal].in .sign-plate { transform: none; }
}

/* ---------- Footer ---------- */
.footer-brand { display: grid; gap: 22px; justify-items: start; margin-bottom: clamp(56px, 7vw, 96px); }
.footer-logo { width: min(100%, 520px); height: auto; }
.footer-note { color: var(--bone-3); font: italic 300 17px/1.4 var(--f-display); }
.story { overflow-x: clip; }
.sign-note { text-wrap: balance; }