/* ============================================================
   J's Restaurant & Lounge — Heliotrope Design A
   Slot-scoped: [data-design="a"].dq-design
   All selectors under [data-design="a"].dq-design or .dq-design scoped
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=Manrope:wght@500;600&family=JetBrains+Mono:wght@400&display=swap');

/* ── Design tokens ── */
[data-design="a"] {
  --ht-ivory:       #F5EDE0;
  --ht-ivory-deep:  #EBE0CD;
  --ht-ivory-edge:  #DDCFB6;
  --ht-ink:         #2A2025;
  --ht-ink-soft:    #4A3D44;
  --ht-mute:        #7B6E6F;
  --ht-mauve:       #8A6E94;
  --ht-mauve-deep:  #634D6E;
  --ht-sage:        #8FA083;
  --ht-sage-deep:   #5D7152;
  --ht-gilt:        #B89A4E;
  --ht-dust:        #C4B3A0;
  --ht-rule:        rgba(42,32,37,.22);
  --ht-rule-faint:  rgba(42,32,37,.10);

  --ht-ease-hush:   cubic-bezier(.32,.72,.32,1);
  --ht-ease-bloom:  cubic-bezier(.16,.84,.44,1);
  --ht-ease-petal:  cubic-bezier(.4,0,.2,1);

  --ht-d-press:     180ms;
  --ht-d-register:  280ms;
  --ht-d-settle:    520ms;
  --ht-d-bloom:     780ms;

  --ht-hair:   1px;
  --ht-tight:  4px;
  --ht-snug:   8px;
  --ht-margin: 16px;
  --ht-gutter: 24px;
  --ht-bay:    40px;
  --ht-stanza: 64px;
  --ht-chapter:96px;
  --ht-folio:  144px;

  --ht-r-0:     0;
  --ht-r-card:  2px;
  --ht-r-petal: 12px;

  --design-a-primary: var(--ht-mauve);
}

/* ── Base reset scoped to this design ── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

[data-design="a"] .dq-design {
  font-family: "Lora", serif;
  background: var(--ht-ivory);
  color: var(--ht-ink);
  box-sizing: border-box;
}
[data-design="a"].dq-design *,
[data-design="a"].dq-design *::before,
[data-design="a"].dq-design *::after { box-sizing: inherit; }
[data-design="a"].dq-design h1,[data-design="a"].dq-design h2,[data-design="a"].dq-design h3 { margin: 0; font-weight: inherit; }
[data-design="a"].dq-design p { margin: 0; }
[data-design="a"].dq-design a { color: inherit; text-decoration: none; }
[data-design="a"].dq-design address { font-style: normal; }
[data-design="a"].dq-design figure { margin: 0; }

/* ============================================================
   ELEMENT 1 — Header: filigree finish
   ============================================================ */
[data-design="a"] .ht-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ht-ivory);
  isolation: isolate;
}
[data-design="a"] .ht-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px,4vw,56px);
  max-width: 1480px; margin: 0 auto;
}
[data-design="a"] .ht-logo {
  text-decoration: none; color: var(--ht-ink);
  display: inline-flex; align-items: baseline; gap: 16px; white-space: nowrap;
}
[data-design="a"] .ht-logo__mark {
  font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic;
  font-size: clamp(20px,2.2vw,30px); letter-spacing: -.005em;
}
[data-design="a"] .ht-logo__est {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .22em;
  color: var(--ht-mute); text-transform: uppercase;
  padding-left: 16px; border-left: 1px solid var(--ht-rule);
}
@media (max-width: 640px) { [data-design="a"] .ht-logo__est { display: none; } }

[data-design="a"] .ht-menu-btn {
  appearance: none; background: var(--ht-ivory-deep); color: var(--ht-ink);
  border: 1px solid var(--ht-mauve);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 18px; height: 44px; cursor: pointer; min-width: 44px;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 17px;
  transition: background var(--ht-d-press) var(--ht-ease-petal),
              color var(--ht-d-press) var(--ht-ease-petal);
}
[data-design="a"] .ht-menu-btn__sprig {
  display: inline-grid; place-items: center; width: 14px; height: 14px;
  color: var(--ht-mauve);
  transition: transform var(--ht-d-register) var(--ht-ease-bloom),
              color var(--ht-d-press) var(--ht-ease-petal);
}
[data-design="a"] .ht-menu-btn[aria-expanded="true"] .ht-menu-btn__sprig { transform: rotate(90deg); }
[data-design="a"] .ht-menu-btn:focus-visible { outline: 2px solid var(--ht-gilt); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ht-menu-btn:hover { background: var(--ht-mauve); color: var(--ht-ivory); }
  [data-design="a"] .ht-menu-btn:hover .ht-menu-btn__sprig { color: var(--ht-ivory); }
}

/* Header rule + sprig */
[data-design="a"] .ht-header__rule {
  position: relative; padding: 0 clamp(20px,4vw,56px);
  max-width: 1480px; margin: 0 auto; height: 18px; pointer-events: none;
}
[data-design="a"] .ht-header__rule-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--ht-mauve); opacity: .7;
  transform: scaleX(0); transform-origin: left center;
  animation: ht-a-rule-draw 1800ms 300ms var(--ht-ease-hush) forwards;
}
[data-design="a"] .ht-header__sprig {
  position: absolute; left: 50%; top: -2px; transform: translateX(-50%);
  width: 36px; height: 18px; color: var(--ht-sage-deep);
  background: var(--ht-ivory); padding: 0 6px;
  opacity: 0;
  animation: ht-a-sprig-in 600ms 1800ms var(--ht-ease-bloom) forwards,
             ht-a-sprig-sway 18s 2400ms var(--ht-ease-hush) infinite;
  transform-origin: bottom center;
}
[data-design="a"] .ht-header__sprig svg { width: 100%; height: 100%; display: block; }

/* Drawer */
[data-design="a"] .ht-drawer {
  position: fixed; inset: 0; z-index: 35; background: var(--ht-ivory-deep);
  transform: translateY(-100%); transition: transform var(--ht-d-bloom) var(--ht-ease-bloom);
  padding-top: 92px; overflow-y: auto;
}
[data-design="a"] .ht-drawer[hidden] { display: none; }
[data-design="a"] .ht-drawer[data-open="true"] { transform: translateY(0); display: block; }
[data-design="a"] .ht-drawer__inner {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(32px,5vw,72px) clamp(20px,4vw,56px);
  display: grid; gap: 4px;
}
[data-design="a"] .ht-drawer a {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 16px; align-items: baseline;
  padding: 18px 0; color: var(--ht-ink); text-decoration: none;
  border-bottom: 1px solid var(--ht-rule-faint);
  font-family: "Cormorant Garamond", serif; font-weight: 300; font-style: italic;
  font-size: clamp(28px,4.5vw,56px); letter-spacing: -.005em; line-height: 1.05;
  transition: color var(--ht-d-register) var(--ht-ease-petal);
}
[data-design="a"] .ht-drawer a small {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .22em;
  color: var(--ht-mute); text-transform: uppercase; font-style: normal;
}
[data-design="a"] .ht-drawer__sprig { color: var(--ht-sage); font-size: 22px; opacity: 0; transition: opacity var(--ht-d-register) var(--ht-ease-bloom); }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ht-drawer a:hover { color: var(--ht-mauve-deep); transform: translateX(24px); transition: color var(--ht-d-register) var(--ht-ease-petal), transform var(--ht-d-settle) var(--ht-ease-hush); }
  [data-design="a"] .ht-drawer a:hover .ht-drawer__sprig { opacity: 1; }
}

/* ============================================================
   HERO + ELEMENT 3: Animated popular-items menu
   ============================================================ */
[data-design="a"] .ht-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(48px,7vw,100px) clamp(20px,4vw,56px) clamp(64px,10vw,120px);
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(138,110,148,.08), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(143,160,131,.06), transparent 60%),
    var(--ht-ivory);
}
[data-design="a"] .ht-hero__inner {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,480px); gap: clamp(32px,5vw,80px); align-items: start;
}
@media (max-width: 900px) {
  [data-design="a"] .ht-hero__inner { grid-template-columns: 1fr; }
  [data-design="a"] .ht-hero__menu { order: -1; }
}

/* Hero copy */
[data-design="a"] .ht-eyebrow {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em;
  color: var(--ht-mute); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--ht-bay);
}
[data-design="a"] .ht-eyebrow__mark { width: 6px; height: 6px; background: var(--ht-mauve); display: inline-block; border-radius: 50%; }
[data-design="a"] .ht-hero__kicker {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400;
  font-size: clamp(18px,1.6vw,24px); color: var(--ht-mauve-deep); margin: 0 0 12px;
}
[data-design="a"] .ht-hero__title {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(44px,6.5vw,96px); line-height: 1.0; letter-spacing: -.005em;
  margin: 0 0 var(--ht-stanza); max-width: 16ch; opacity: 1;
}
[data-design="a"] .ht-hero__title em { color: var(--ht-mauve-deep); font-style: italic; font-weight: 400; }

/* Action cluster — ELEMENT 2 */
[data-design="a"] .ht-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  opacity: 1;
}
[data-design="a"] .ht-hero__chip {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .14em;
  color: var(--ht-mute); text-transform: uppercase;
  border-left: 1px solid var(--ht-rule); padding-left: 14px;
}
@media (max-width: 560px) {
  [data-design="a"] .ht-hero__chip { border-left: none; padding-left: 0; width: 100%; }
}

/* ── Popular-items menu — hero centerpiece ── */
[data-design="a"] .ht-hero__menu {
  position: relative;
  display: grid; gap: 0;
}
[data-design="a"] .ht-menu-card {
  display: grid; grid-template-columns: 48px 1fr 40px; gap: 18px; align-items: center;
  padding: clamp(18px,2.5vw,26px) 0;
  border-bottom: 1px solid var(--ht-rule-faint);
  /* Note: animation uses transform+opacity on this wrapper;
     the text children (h2, p) are always opacity:1 — only the wrapper animates */
  transform: translateY(12px);
  animation: ht-a-item-in 600ms var(--ht-ease-bloom) forwards;
}
/* Ensure text children never inherit opacity:0 from the animation wrapper */
[data-design="a"] .ht-menu-card__num,
[data-design="a"] .ht-menu-card__name,
[data-design="a"] .ht-menu-card__preview-note { opacity: 1; }
[data-design="a"] .ht-menu-card[data-menu-item="1"] { animation-delay: 400ms; }
[data-design="a"] .ht-menu-card[data-menu-item="2"] { animation-delay: 900ms; }
[data-design="a"] .ht-menu-card[data-menu-item="3"] { animation-delay: 1400ms; }

[data-design="a"] .ht-menu-card__num {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: clamp(22px,2.2vw,28px); color: var(--ht-mauve); line-height: 1;
  align-self: start; padding-top: 4px;
}
[data-design="a"] .ht-menu-card__body { display: grid; gap: 10px; }
[data-design="a"] .ht-menu-card__name {
  font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: clamp(22px,2.6vw,34px); line-height: 1.1; letter-spacing: -.005em;
  color: var(--ht-ink); margin: 0;
}
[data-design="a"] .ht-menu-card__name--preview {
  color: var(--ht-mute); font-style: italic;
}
[data-design="a"] .ht-menu-card__preview-note {
  font-family: "Manrope", sans-serif; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ht-dust); margin: 0;
}
[data-design="a"] .ht-menu-card__rule {
  height: 1px; background: linear-gradient(90deg, var(--ht-mauve), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: ht-a-card-rule 800ms var(--ht-ease-hush) forwards;
}
[data-design="a"] .ht-menu-card[data-menu-item="1"] .ht-menu-card__rule { animation-delay: 900ms; }
[data-design="a"] .ht-menu-card[data-menu-item="2"] .ht-menu-card__rule { animation-delay: 1400ms; }
[data-design="a"] .ht-menu-card[data-menu-item="3"] .ht-menu-card__rule { animation-delay: 1900ms; }

/* Steam accent for chicken fried steak */
[data-design="a"] .ht-menu-card__accent { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
[data-design="a"] .ht-menu-steam { width: 24px; height: 40px; color: var(--ht-dust); }
[data-design="a"] .ht-steam-path {
  stroke-dasharray: 42; stroke-dashoffset: 42;
  opacity: 0;
  animation: ht-a-steam 2s var(--ht-ease-hush) 1200ms infinite;
}
[data-design="a"] .ht-steam-path:nth-child(2) { animation-delay: 1600ms; }
[data-design="a"] .ht-steam-path:nth-child(3) { animation-delay: 2000ms; }

/* Ember accent for salmon */
[data-design="a"] .ht-menu-ember { width: 24px; height: 40px; color: var(--ht-gilt); }
[data-design="a"] .ht-ember-dot {
  opacity: 0;
  animation: ht-a-ember 3s var(--ht-ease-hush) 1800ms infinite;
}
[data-design="a"] .ht-ember-dot:nth-child(2) { animation-delay: 2300ms; }
[data-design="a"] .ht-ember-dot:nth-child(3) { animation-delay: 2700ms; }

/* Hero botanical sprig (Element 3's heliotrope motif) */
[data-design="a"] .ht-hero__sprig {
  position: absolute; right: -20px; top: -10px;
  width: 160px; color: var(--ht-sage-deep); pointer-events: none;
  animation: ht-a-sprig-overall-sway 19s 4s var(--ht-ease-hush) infinite;
  transform-origin: bottom center;
}
@media (max-width: 600px) { [data-design="a"] .ht-hero__sprig { display: none; } }
[data-design="a"] .ht-hero__sprig svg { width: 100%; height: 100%; overflow: visible; }
[data-design="a"] .ht-hero__sprig .ht-sprig-stem {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: ht-a-sprig-draw 2400ms 500ms var(--ht-ease-hush) forwards;
}
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path {
  fill: none; stroke: currentColor; stroke-width: 1; opacity: 0;
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: ht-a-leaf-draw 700ms forwards;
}
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path:nth-child(1) { animation-delay: 1600ms; }
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path:nth-child(2) { animation-delay: 1800ms; }
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path:nth-child(3) { animation-delay: 2000ms; }
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path:nth-child(4) { animation-delay: 2200ms; }
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path:nth-child(5) { animation-delay: 2400ms; }
[data-design="a"] .ht-hero__sprig .ht-sprig-leaves path:nth-child(6) { animation-delay: 2600ms; }
[data-design="a"] .ht-hero__sprig .ht-sprig-blossoms { fill: var(--ht-mauve); opacity: 0; animation: ht-a-bloom-in 800ms 3000ms var(--ht-ease-bloom) forwards; }

/* Hero rule bottom */
[data-design="a"] .ht-hero__rule-bottom {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--ht-mauve) 50%, transparent 95%);
  opacity: .7; transform: scaleX(0); transform-origin: center;
  animation: ht-a-hero-rule 1800ms 800ms var(--ht-ease-hush) forwards;
}

/* ── ELEMENT 2: CTA button shared styles ── */
[data-design="a"] .ht-cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 26px;
  background: var(--ht-mauve); color: var(--ht-gilt);
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  font-size: 18px; letter-spacing: .005em;
  border: 1px solid var(--ht-mauve-deep); text-decoration: none; cursor: pointer;
  transition: background var(--ht-d-press) var(--ht-ease-petal),
              transform var(--ht-d-press) var(--ht-ease-petal);
  animation: ht-a-cta-halo 5.6s var(--ht-ease-hush) infinite;
  min-height: 44px;
}
[data-design="a"] .ht-cta__rosette {
  display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ht-gilt);
  transition: transform var(--ht-d-register) var(--ht-ease-bloom);
  flex-shrink: 0;
}
[data-design="a"] .ht-cta:active { transform: translateY(1px); }
[data-design="a"] .ht-cta:focus-visible { outline: 2px solid var(--ht-gilt); outline-offset: 3px; }
[data-design="a"] .ht-cta--ghost {
  background: transparent; color: var(--ht-ink); border-color: var(--ht-ink);
  animation: none;
}
[data-design="a"] .ht-cta--ghost .ht-cta__rosette { color: var(--ht-mauve); }
[data-design="a"] .ht-cta--sm { font-size: 15px; padding: 10px 20px; }
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ht-cta:hover { background: var(--ht-mauve-deep); }
  [data-design="a"] .ht-cta:hover .ht-cta__rosette { transform: rotate(30deg); }
  [data-design="a"] .ht-cta--ghost:hover { background: var(--ht-ivory-deep); }
}

/* ============================================================
   ELEMENT 6 — Pointer: appetite-warm
   ============================================================ */
[data-design="a"] .ht-pointer {
  position: relative; z-index: 5;
  max-width: 1280px; margin: -48px auto 0; padding: 0 clamp(20px,4vw,56px);
  display: flex; justify-content: center; pointer-events: none;
  min-height: 120px;
}
[data-design="a"] .ht-pointer__inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: auto;
  padding-top: 16px;
}
[data-design="a"] .ht-pointer__label {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px;
  color: var(--ht-ink-soft);
  opacity: 0;
  animation: ht-a-pointer-label 800ms 1400ms var(--ht-ease-hush) forwards;
}
[data-design="a"] .ht-pointer__rule {
  width: 1px; height: 108px;
  background: linear-gradient(to bottom, transparent, var(--ht-mauve) 30%, var(--ht-mauve-deep) 100%);
  transform-origin: top center;
  animation: ht-a-pointer-draw 1400ms 1700ms var(--ht-ease-hush) both,
             ht-a-pointer-breath 5.4s 3200ms var(--ht-ease-hush) infinite;
}
[data-design="a"] .ht-pointer__blossom {
  width: 20px; height: 20px; color: var(--ht-mauve);
  opacity: 0;
  animation: ht-a-blossom-in 700ms 3000ms var(--ht-ease-bloom) forwards,
             ht-a-blossom-breath 5.4s 3700ms var(--ht-ease-hush) infinite;
  transform-origin: center;
}
[data-design="a"] .ht-pointer__blossom svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   ELEMENT 5 — Daily special / cloche reveal
   ============================================================ */
[data-design="a"] .ht-daily-special {
  padding: clamp(64px,9vw,120px) clamp(20px,4vw,56px);
  background: var(--ht-ivory-deep);
  position: relative;
}
[data-design="a"] .ht-daily-special__inner {
  max-width: 760px; margin: 0 auto; text-align: center;
}
[data-design="a"] .ht-daily-special__inner .ht-eyebrow { justify-content: center; display: inline-flex; margin-bottom: var(--ht-bay); }
[data-design="a"] .ht-daily-special__title {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(36px,5vw,68px); line-height: 1.04; letter-spacing: -.005em;
  margin: 0 0 16px;
}
[data-design="a"] .ht-daily-special__title em { color: var(--ht-mauve-deep); font-style: italic; font-weight: 400; }
[data-design="a"] .ht-daily-special__sub {
  font-family: "Lora", serif; font-size: 17px; color: var(--ht-ink-soft);
  margin: 0 auto var(--ht-stanza); max-width: 40ch;
}

/* Cloche interactive widget */
[data-design="a"] .ht-cloche-wrap {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  cursor: pointer; position: relative;
  min-height: 160px;
}
[data-design="a"] .ht-cloche__dome {
  display: block; width: 220px;
  transform-origin: bottom center;
  transition: transform var(--ht-d-bloom) var(--ht-ease-bloom);
}
[data-design="a"] .ht-cloche-svg { width: 100%; height: auto; display: block; }
[data-design="a"] .ht-cloche-dome-path {
  transition: transform var(--ht-d-bloom) var(--ht-ease-bloom), opacity var(--ht-d-bloom) var(--ht-ease-bloom);
  transform-origin: bottom center;
}
[data-design="a"] .ht-cloche-handle {
  transition: transform var(--ht-d-bloom) var(--ht-ease-bloom);
  transform-origin: center bottom;
}
/* Lifted state */
[data-design="a"] .ht-cloche-wrap[data-revealed="true"] .ht-cloche__dome {
  transform: translateY(-60px) rotate(-8deg);
  opacity: 0;
}
[data-design="a"] .ht-cloche__reveal {
  display: none;
  flex-direction: column; align-items: center; gap: 10px;
  padding: var(--ht-gutter) var(--ht-bay);
  background: var(--ht-ivory); border: 1px solid var(--ht-ivory-edge);
  border-radius: var(--ht-r-petal);
  box-shadow: 2px 2px 0 var(--ht-ivory-edge), 4px 4px 0 var(--ht-ivory-edge), 0 20px 48px -32px rgba(42,32,37,.24);
  min-width: 280px; text-align: center;
  animation: ht-a-reveal-in 500ms var(--ht-ease-bloom) forwards;
}
[data-design="a"] .ht-cloche-wrap[data-revealed="true"] .ht-cloche__reveal {
  display: flex;
}
[data-design="a"] .ht-cloche__eyebrow {
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ht-mauve);
}
[data-design="a"] .ht-cloche__special-name {
  font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic;
  font-size: clamp(20px,2.4vw,26px); color: var(--ht-ink); line-height: 1.3;
  margin: 0;
}
[data-design="a"] .ht-cloche__dine {
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ht-mute);
  border-top: 1px solid var(--ht-rule-faint); padding-top: 10px; width: 100%;
  text-align: center;
}
/* hover hint on cloche */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ht-cloche-wrap:not([data-revealed="true"]):hover .ht-cloche__dome {
    transform: translateY(-8px);
  }
}
[data-design="a"] .ht-daily-special__rule {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--ht-mauve) 50%, transparent 95%);
  opacity: .5;
}

/* ============================================================
   ELEMENT 4 (adapted) — Full menu section
   ============================================================ */
[data-design="a"] .ht-menu-section {
  padding: clamp(64px,9vw,120px) clamp(20px,4vw,56px);
  background: var(--ht-ivory);
  border-top: 1px solid var(--ht-rule-faint);
}
[data-design="a"] .ht-menu-section__head {
  max-width: 920px; margin: 0 auto var(--ht-chapter);
}
[data-design="a"] .ht-menu-section__head .ht-eyebrow { margin-bottom: var(--ht-bay); }
[data-design="a"] .ht-menu-section__title {
  font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: clamp(36px,5.4vw,64px); line-height: 1.04; letter-spacing: -.005em; margin: 0 0 20px;
}
[data-design="a"] .ht-menu-section__title em { color: var(--ht-mauve-deep); font-style: italic; font-weight: 300; }
[data-design="a"] .ht-menu-section__note {
  font-family: "Lora", serif; font-style: italic; font-size: 16px; line-height: 1.55;
  color: var(--ht-ink-soft); border-left: 2px solid var(--ht-sage); padding-left: 16px;
  max-width: 52ch;
}

/* Menu grid — two-column on desktop */
[data-design="a"] .ht-menu-grid {
  max-width: 920px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ht-chapter) var(--ht-stanza);
}
@media (max-width: 680px) {
  [data-design="a"] .ht-menu-grid { grid-template-columns: 1fr; gap: var(--ht-stanza); }
}

[data-design="a"] .ht-menu-cat {}
[data-design="a"] .ht-menu-cat__header {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  margin-bottom: var(--ht-gutter);
  border-bottom: 1px solid var(--ht-ivory-edge); padding-bottom: 12px;
}
[data-design="a"] .ht-menu-cat__title {
  font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic;
  font-size: clamp(22px,2.4vw,30px); color: var(--ht-mauve-deep); margin: 0;
  overflow-wrap: anywhere; min-width: 0;
}
[data-design="a"] .ht-menu-cat__note {
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ht-mute);
  white-space: nowrap; align-self: end;
}

/* Three-track menu rows: name | leader | price — collision-proof */
[data-design="a"] .ht-menu-items { display: grid; gap: 0; }
[data-design="a"] .ht-menu-row {
  display: grid;
  grid-template-columns: minmax(0,auto) 1fr auto;
  align-items: baseline;
  gap: 0 8px;
  column-gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ht-rule-faint);
  position: relative;
}
[data-design="a"] .ht-menu-row[data-in="true"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  transform: scaleX(1);
  background: var(--ht-sage);
  opacity: 0.4;
  transition: transform 1200ms var(--ht-ease-hush);
}
[data-design="a"] .ht-menu-row__name {
  font-family: "Lora", serif; font-size: clamp(15px,1.3vw,17px);
  color: var(--ht-ink); overflow-wrap: anywhere; min-width: 0;
  white-space: normal;
}
[data-design="a"] .ht-menu-row__leader {
  border-bottom: 1px dotted var(--ht-rule);
  margin-bottom: 4px;
  min-width: 16px;
}
[data-design="a"] .ht-menu-row__price {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em;
  color: var(--ht-mute); justify-self: end; white-space: nowrap;
  tabular-nums: 1;
}

[data-design="a"] .ht-menu-note {
  font-family: "Lora", serif; font-style: italic; font-size: 15px;
  color: var(--ht-mute); max-width: 920px; margin: var(--ht-stanza) auto 0;
  text-align: center;
}

/* ============================================================
   Hours & Location
   ============================================================ */
[data-design="a"] .ht-hours-section {
  padding: clamp(64px,9vw,120px) clamp(20px,4vw,56px);
  background: var(--ht-ivory-deep);
  border-top: 1px solid var(--ht-rule-faint);
}
[data-design="a"] .ht-hours-section__inner {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); align-items: start;
}
@media (max-width: 700px) {
  [data-design="a"] .ht-hours-section__inner { grid-template-columns: 1fr; }
}
[data-design="a"] .ht-hours-col .ht-eyebrow { margin-bottom: var(--ht-bay); }
[data-design="a"] .ht-hours-section__title {
  font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: clamp(34px,5vw,60px); line-height: 1.04; letter-spacing: -.005em;
  margin: 0 0 var(--ht-stanza);
}
[data-design="a"] .ht-hours-section__title em { color: var(--ht-mauve-deep); font-style: italic; }
[data-design="a"] .ht-hours-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ht-gutter) var(--ht-stanza);
  margin-bottom: var(--ht-stanza);
}
@media (max-width: 420px) {
  [data-design="a"] .ht-hours-grid { grid-template-columns: 1fr; }
}
[data-design="a"] .ht-hours-block__label {
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ht-mauve);
  margin: 0 0 6px;
}
[data-design="a"] .ht-hours-block__time {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: clamp(18px,1.8vw,22px); color: var(--ht-ink);
}
[data-design="a"] .ht-address {
  display: grid; gap: var(--ht-gutter); align-items: start;
}
[data-design="a"] .ht-address p {
  font-family: "Lora", serif; font-size: clamp(16px,1.5vw,18px); line-height: 1.6; color: var(--ht-ink-soft);
}
[data-design="a"] .ht-address__phone {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: clamp(22px,2.4vw,28px); color: var(--ht-mauve-deep); text-decoration: none;
  display: block;
}

/* Map placeholder */
[data-design="a"] .ht-hours-map { display: flex; align-items: center; justify-content: center; }
[data-design="a"] .ht-map-frame {
  background: var(--ht-ivory); border: 1px solid var(--ht-ivory-edge);
  border-radius: var(--ht-r-card);
  box-shadow: 2px 2px 0 var(--ht-ivory-edge), 4px 4px 0 var(--ht-ivory-edge);
  padding: var(--ht-chapter) var(--ht-stanza);
  display: flex; flex-direction: column; align-items: center; gap: var(--ht-gutter);
  width: 100%;
}
[data-design="a"] .ht-map-pin { width: 40px; color: var(--ht-mauve); }
[data-design="a"] .ht-map-pin svg { width: 100%; height: auto; }
[data-design="a"] .ht-map-label {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ht-mute); text-align: center;
}

/* ============================================================
   Gallery
   ============================================================ */
[data-design="a"] .ht-gallery-section {
  padding: clamp(64px,9vw,120px) clamp(20px,4vw,56px);
  background: var(--ht-ivory);
  border-top: 1px solid var(--ht-rule-faint);
}
[data-design="a"] .ht-gallery-section__head {
  max-width: 920px; margin: 0 auto var(--ht-chapter);
}
[data-design="a"] .ht-gallery-section__head .ht-eyebrow { margin-bottom: var(--ht-bay); }
[data-design="a"] .ht-gallery-section__title {
  font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: clamp(34px,5vw,60px); line-height: 1.04; letter-spacing: -.005em; margin: 0;
}
[data-design="a"] .ht-gallery-section__title em { color: var(--ht-mauve-deep); font-style: italic; font-weight: 300; }

[data-design="a"] .ht-gallery-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) {
  [data-design="a"] .ht-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  [data-design="a"] .ht-gallery-grid { grid-template-columns: 1fr; }
}
[data-design="a"] .ht-gallery-item {
  overflow: hidden; border-radius: var(--ht-r-card);
  border: 1px solid var(--ht-ivory-edge);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--ht-d-bloom) var(--ht-ease-bloom),
              transform var(--ht-d-bloom) var(--ht-ease-bloom);
}
[data-design="a"] .ht-gallery-item[data-in="true"] { opacity: 1; transform: translateY(0); }
[data-design="a"] .ht-gallery-item img {
  width: 100%; height: 220px; object-fit: cover; display: block;
  transition: transform 600ms var(--ht-ease-hush);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ht-gallery-item:hover img { transform: scale(1.04); }
}
[data-design="a"] .ht-gallery-item figcaption {
  padding: 12px 16px;
  font-family: "Manrope", sans-serif; font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ht-mute);
  background: var(--ht-ivory);
}

/* ============================================================
   About / Story
   ============================================================ */
[data-design="a"] .ht-about-section {
  padding: clamp(64px,9vw,120px) clamp(20px,4vw,56px);
  background: var(--ht-ivory-deep);
  border-top: 1px solid var(--ht-rule-faint);
}
[data-design="a"] .ht-about-section__inner {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 260px; gap: clamp(40px,6vw,96px); align-items: start;
}
@media (max-width: 760px) {
  [data-design="a"] .ht-about-section__inner { grid-template-columns: 1fr; }
  [data-design="a"] .ht-about-section__sprig { display: none; }
}
[data-design="a"] .ht-about-section__text .ht-eyebrow { margin-bottom: var(--ht-bay); }
[data-design="a"] .ht-about-section__title {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(34px,5vw,60px); line-height: 1.04; letter-spacing: -.005em;
  margin: 0 0 var(--ht-stanza);
}
[data-design="a"] .ht-about-section__title em { color: var(--ht-mauve-deep); font-style: italic; font-weight: 400; }
[data-design="a"] .ht-about-section__body {
  font-family: "Lora", serif; font-size: clamp(16px,1.4vw,18px); line-height: 1.65;
  color: var(--ht-ink-soft); margin-bottom: 20px; max-width: 54ch;
}
[data-design="a"] .ht-about-section__team {
  margin: var(--ht-stanza) 0 var(--ht-bay);
  padding-left: 20px; border-left: 2px solid var(--ht-sage);
}
[data-design="a"] .ht-about-section__team-line {
  font-family: "Lora", serif; font-size: 15px; color: var(--ht-ink-soft); margin-bottom: 6px;
}
[data-design="a"] .ht-about-section__team-line em { color: var(--ht-mauve-deep); font-style: italic; }

/* About sprig */
[data-design="a"] .ht-about-section__sprig { color: var(--ht-sage-deep); position: relative; }
[data-design="a"] .ht-about-section__sprig svg { width: 100%; height: auto; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-stem {
  stroke-dasharray: 280; stroke-dashoffset: 280;
  animation: ht-a-sprig-draw 2000ms 200ms var(--ht-ease-hush) forwards;
}
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path {
  fill: none; stroke: currentColor; stroke-width: 1; opacity: 0;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: ht-a-leaf-draw 600ms forwards;
}
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path:nth-child(1) { animation-delay: 1200ms; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path:nth-child(2) { animation-delay: 1400ms; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path:nth-child(3) { animation-delay: 1600ms; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path:nth-child(4) { animation-delay: 1800ms; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path:nth-child(5) { animation-delay: 2000ms; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path:nth-child(6) { animation-delay: 2200ms; }
[data-design="a"] .ht-about-section__sprig .ht-sprig-blossoms { fill: var(--ht-mauve); opacity: 0; animation: ht-a-bloom-in 800ms 2600ms var(--ht-ease-bloom) forwards; }

/* ============================================================
   Footer
   ============================================================ */
[data-design="a"] .ht-footer {
  background: var(--ht-ivory); border-top: 1px solid var(--ht-rule-faint);
  padding: clamp(40px,6vw,80px) clamp(20px,4vw,56px) clamp(24px,3vw,40px);
}
[data-design="a"] .ht-footer__inner {
  max-width: 1280px; margin: 0 auto var(--ht-stanza);
  display: grid; grid-template-columns: 2fr 1fr 1fr 80px; gap: var(--ht-stanza);
  align-items: start;
}
@media (max-width: 860px) {
  [data-design="a"] .ht-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--ht-bay); }
  [data-design="a"] .ht-footer__sprig-wrap { display: none; }
}
@media (max-width: 480px) {
  [data-design="a"] .ht-footer__inner { grid-template-columns: 1fr; }
}
[data-design="a"] .ht-footer__name {
  display: block;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400;
  font-size: clamp(22px,2.4vw,30px); color: var(--ht-ink); margin-bottom: 6px;
}
[data-design="a"] .ht-footer__est {
  display: block;
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ht-mute);
}
[data-design="a"] .ht-footer__label {
  display: block;
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ht-mauve);
  margin-bottom: var(--ht-snug);
}
[data-design="a"] .ht-footer__hours {
  font-family: "Lora", serif; font-size: 14px; line-height: 1.7; color: var(--ht-ink-soft);
  display: grid; gap: 2px;
}
[data-design="a"] .ht-footer__contact {
  font-family: "Lora", serif; font-size: 14px; line-height: 1.7; color: var(--ht-ink-soft);
  display: grid; gap: 4px;
}
[data-design="a"] .ht-footer__contact a { text-decoration: none; color: inherit; }
[data-design="a"] .ht-footer__sprig-wrap { color: var(--ht-sage); }
[data-design="a"] .ht-footer__sprig { width: 60px; height: auto; }
[data-design="a"] .ht-footer__rule {
  max-width: 1280px; margin: 0 auto var(--ht-gutter);
  height: 1px; background: var(--ht-mauve); opacity: .4;
}
[data-design="a"] .ht-footer__copy {
  max-width: 1280px; margin: 0 auto;
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ht-mute);
}

/* ============================================================
   Scroll-driven premium motion (TRIAD-2)
   Parallax / scroll-linked on hero → daily-special handoff
   ============================================================ */
@supports (animation-timeline: scroll()) {
  [data-design="a"] .ht-hero__menu {
    animation: ht-a-parallax-up linear;
    animation-timeline: scroll(root);
    animation-range: 0 40vh;
  }
  [data-design="a"] .ht-hero__copy {
    animation: ht-a-parallax-down linear;
    animation-timeline: scroll(root);
    animation-range: 0 40vh;
  }
}

/* ============================================================
   Keyframes — all prefixed ht-a- (slot "a")
   ============================================================ */
@keyframes ht-a-rule-draw    { to { transform: scaleX(1); } }
@keyframes ht-a-sprig-in    {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ht-a-sprig-sway  {
  0%,100% { transform: translateX(-50%) rotate(0deg); }
  50%     { transform: translateX(-50%) rotate(2deg); }
}
@keyframes ht-a-sprig-draw  { to { stroke-dashoffset: 0; } }
@keyframes ht-a-leaf-draw   { to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ht-a-bloom-in    { to { opacity: 1; } }
@keyframes ht-a-sprig-overall-sway {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(1.4deg); }
}
@keyframes ht-a-hero-rule   { to { transform: scaleX(1); } }
@keyframes ht-a-item-in {
  from { opacity: 0.01; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ht-a-card-rule   { to { transform: scaleX(1); } }
@keyframes ht-a-steam {
  0%   { stroke-dashoffset: 42; opacity: 0; transform: translateY(0); }
  20%  { opacity: 0.7; }
  80%  { opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-14px); }
}
@keyframes ht-a-ember {
  0%   { opacity: 0; transform: translateY(0) scale(0.96); }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-18px) scale(0.92); }
}
@keyframes ht-a-cta-halo {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,154,78,0); }
  50%     { box-shadow: 0 0 0 6px rgba(184,154,78,.12); }
}
@keyframes ht-a-pointer-label { to { opacity: 1; } }
@keyframes ht-a-pointer-draw  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ht-a-pointer-breath{ 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ht-a-blossom-in    {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ht-a-blossom-breath { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
@keyframes ht-a-reveal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ht-a-parallax-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-32px); }
}
@keyframes ht-a-parallax-down {
  from { transform: translateY(0); }
  to   { transform: translateY(20px); }
}

/* ============================================================
   Reduced motion fallbacks
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ht-header__rule-line,
  [data-design="a"] .ht-header__sprig,
  [data-design="a"] .ht-hero__sprig,
  [data-design="a"] .ht-hero__sprig .ht-sprig-stem,
  [data-design="a"] .ht-hero__sprig .ht-sprig-leaves path,
  [data-design="a"] .ht-hero__sprig .ht-sprig-blossoms,
  [data-design="a"] .ht-hero__rule-bottom,
  [data-design="a"] .ht-pointer__label,
  [data-design="a"] .ht-pointer__rule,
  [data-design="a"] .ht-pointer__blossom,
  [data-design="a"] .ht-cta,
  [data-design="a"] .ht-steam-path,
  [data-design="a"] .ht-ember-dot,
  [data-design="a"] .ht-menu-card,
  [data-design="a"] .ht-menu-card__rule,
  [data-design="a"] .ht-about-section__sprig .ht-sprig-stem,
  [data-design="a"] .ht-about-section__sprig .ht-sprig-leaves path,
  [data-design="a"] .ht-about-section__sprig .ht-sprig-blossoms {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  [data-design="a"] .ht-hero__menu,
  [data-design="a"] .ht-hero__copy { animation: none !important; }
  [data-design="a"] .ht-gallery-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-design="a"] .ht-cloche__dome { transition-duration: 120ms !important; }
}

/* ============================================================
   Mobile guard — viewport safety
   ============================================================ */
[data-design="a"].dq-design { overflow-x: clip; }
@media (max-width: 480px) {
  [data-design="a"] .ht-hero__actions { gap: 10px; }
  [data-design="a"] .ht-cta { font-size: 16px; padding: 12px 20px; }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }