/* 02 · Hearth & Vine — trattoria. Charcoal green, tomato, white; Fraunces italics. A split screen:
   the oven's film pinned on the left, the menu scrolling on the right. No cream anywhere. */
.v-hv { --bg: #10201a; --fg: #f6fbf8; --mut: #9fb3a8; --acc: #e4432b; --edge: #24382f; background: var(--bg); color: var(--fg); --btn-r: 999px; --fx-step-accent: var(--acc); }
.v-hv .hv-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.v-hv .hv-film { position: sticky; top: 0; height: 100svh; overflow: clip; background: #000; }
.v-hv .hv-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-hv .hv-play { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px); }
.v-hv .hv-film__tag { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(24px, 3vw, 48px); font: italic 500 clamp(18px, 1.6vw, 24px)/1.2 var(--serif); color: #fff; text-shadow: 0 2px 20px rgb(0 0 0 / 0.5); max-width: 12ch; text-align: right; }
.v-hv .hv-in { padding-block: clamp(56px, 7vw, 100px); }
.v-hv .hv-announce { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; margin-bottom: 34px; border-radius: 10px; background: var(--acc); color: #fff; font: 600 13px/1.4 var(--sans); }
.v-hv .hv-announce button { width: 32px; height: 32px; border-radius: 999px; flex: none; }
.v-hv .eyebrow { color: var(--acc); }
.v-hv .hv-open { display: inline-block; margin-left: 10px; padding: 6px 10px; border-radius: 4px; background: #4c9a5f; color: #06140b; letter-spacing: 0.16em; }
.v-hv h2 { font: 300 clamp(46px, 6.4vw, 104px)/0.98 var(--serif); letter-spacing: -0.025em; max-width: 14ch; }
.v-hv h2 em { font-style: italic; font-weight: 600; color: var(--acc); }
.v-hv .lede { margin-top: 24px; color: var(--mut); }
.v-hv .hv-rating { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 28px; padding: 13px 18px; border: 1px solid var(--edge); border-radius: 12px; font: 600 14px var(--sans); }
.v-hv .hv-stars { color: #e2a33b; letter-spacing: 2px; }
.v-hv .hv-rating em { font: 600 10px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); font-style: normal; }
.v-hv .hv-menu { margin-top: 44px; border-top: 1px solid var(--edge); }
.v-hv .hv-menu li { display: flex; justify-content: space-between; gap: 24px; padding: 20px 6px; border-bottom: 1px solid var(--edge); border-radius: 8px; }
.v-hv .hv-menu h3 { font: 600 20px/1.2 var(--serif); }
.v-hv .hv-menu p { color: var(--mut); font-size: 14px; margin-top: 4px; }
.v-hv .hv-price { font: 600 22px/1 var(--serif); color: var(--acc); }
.v-hv .hv-stats { margin-top: 44px; }
.v-hv .stat b { font-family: var(--serif); font-weight: 600; }
.v-hv .hv-strip { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: 12px; margin-top: 44px; }
.v-hv .hv-strip .ph { aspect-ratio: 3 / 4; border-radius: 12px; }
.v-hv .btn { background: var(--acc); color: #fff; }
.v-hv .fxlist { color: var(--mut); }
@media (max-width: 900px) {
  .v-hv .hv-split { grid-template-columns: 1fr; }
  .v-hv .hv-film { position: relative; height: 56svh; }
}