/* ==========================================================================
   The Piglet — V2 landing page (staging preview)
   Self-contained: fonts, reset, tokens and full page layout.
   Built from Figma node 423:1778. Class names are v2- prefixed so this file
   never collides with the holding page's style.css.
   ========================================================================== */

/* Fonts */
@font-face {
  font-family: "Perpetua";
  src: url('/assets/fonts/webFonts/PerpetuaProRoman/font.woff2') format('woff2'),
       url('/assets/fonts/webFonts/PerpetuaProRoman/font.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perpetua";
  src: url('/assets/fonts/webFonts/PerpetuaProItalic/font.woff2') format('woff2'),
       url('/assets/fonts/webFonts/PerpetuaProItalic/font.woff') format('woff');
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Perpetua";
  src: url('/assets/fonts/webFonts/PerpetuaProBold/font.woff2') format('woff2'),
       url('/assets/fonts/webFonts/PerpetuaProBold/font.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perpetua";
  src: url('/assets/fonts/webFonts/PerpetuaProBoldItalic/font.woff2') format('woff2'),
       url('/assets/fonts/webFonts/PerpetuaProBoldItalic/font.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Run Wild";
  src: url('/assets/fonts/webFonts/Run_Wild/Run%20Wild.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --color-text: #161616;
  --color-white: #f2f2f2;
  --color-green: #5a6e60;
  --color-terracotta: #ad4e0e;
  --font-perpetua: "Perpetua", Georgia, serif;
  --font-display: "Run Wild", "Perpetua", cursive;
  --content-width: 1120px;
}

body {
  font-family: var(--font-perpetua);
  color: var(--color-text);
  background-image: url('/assets/images/v2/bg-texture.jpg');
  background-size: 640px 640px;
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* TPH-style link defaults — terracotta on hover */
a {
  color: inherit;
  text-decoration: none;
  opacity: 1;
  transition: color 0.2s ease-in-out;
}
a:hover { color: var(--color-terracotta); }

/* Stripes — full-width green bars top & bottom */
.v2-stripes {
  width: 100%;
  height: 66px;
  background-image: url('/assets/images/v2/stripes-vertical.jpg');
  background-size: 260px 260px;
  background-repeat: repeat-x;
  background-position: center;
  mix-blend-mode: multiply;
}

/* Centered content column */
.v2-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;  /* no side padding on desktop — full 1120px used */
}

/* ---------- Header / Footer shared nav ---------- */
.v2-header,
.v2-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v2-header { gap: 48px; padding: 48px 0 39px; }

.v2-hamburger { display: none; }
/* Mobile-only compact bar (Instagram + hamburger). Hidden on desktop/tablet —
   it's shown via the max-width:767 block. Without this it leaks onto desktop,
   showing the Instagram logo top-left and pushing the logo down. */
.v2-mobile-bar { display: none; }

.v2-logo { width: 210px; height: auto; display: block; opacity: 1; transition: opacity 0.2s ease-in-out; }
.v2-logo:hover { opacity: 0.65; }
.v2-logo img { width: 100%; height: auto; }

.v2-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 39px; /* match Figma nav frame height — anchors all items to same baseline */
}

.v2-bookings {
  position: relative;
  width: 107px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s ease-in-out;
}
.v2-bookings:hover {
  filter: brightness(0.90); /* darkens button to approx #9b460c */
}
.v2-bookings::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/v2/menu-button.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.v2-bookings span {
  position: relative;
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-white);
  line-height: 36px;
  padding-top: 4px;
}

.v2-navlinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 39px;
  padding-top: 2px;
  flex-wrap: wrap;
}
.v2-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 0 8px;
  box-sizing: border-box;
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease-in-out;
}
/* Underline: absolute so it never affects layout; positioned just below cap letters */
.v2-navlink::after {
  content: "";
  position: absolute;
  bottom: 6px; /* ~2px below visual cap bottom within the 39px element */
  left: 8px;
  right: 8px;
  height: 3px;
  background-image: url('/assets/images/v2/nav-underline.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
/* Hover: terracotta colour + underline */
.v2-navlink:hover { color: var(--color-terracotta); }
.v2-navlink:hover::after { opacity: 1; }

.v2-social {
  display: flex;
  align-items: center;
  height: 39px; /* match nav frame height */
  gap: 8px;
}
.v2-social-title { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.v2-social-icon { width: 19px; height: 19px; flex-shrink: 0; }
.v2-social-handle { font-family: var(--font-perpetua); font-weight: 700; font-size: 17px; line-height: 1; padding-top: 5px; transition: color 0.2s ease-in-out; }
a.v2-social { text-decoration: none; color: var(--color-text); padding-bottom: 3px; }
a.v2-social:hover { opacity: 1; } /* no fade — keep normal state */
a.v2-social:hover .v2-social-handle { color: var(--color-terracotta); } /* @thepigletpub turns terracotta */

/* ---------- Offer banner ---------- */
.v2-offer {
  position: relative;
  width: 813px;
  max-width: 100%;
  margin: 0 auto; /* removed 8px top margin */
  min-height: 91px; /* min-height (not height) so extra text expands the banner */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px; /* vertical padding gives room when the text grows past min-height */
  overflow: hidden;
}
.v2-offer-box,
.v2-offer-grunge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Grunge texture — desktop (Figma 423:1948): width-fit, stretched tall and
   offset up, clipped by the banner. (Was object-fit:none → natural size, which
   rendered the grain far too large.) */
.v2-offer-grunge { opacity: 0.22; mix-blend-mode: normal; inset: auto; left: 0.01%; top: -445.74%; width: 100%; height: 1273.62%; object-fit: fill; }
.v2-offer-text { position: relative; text-align: center; color: var(--color-white); }
.v2-offer-primary {
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1.1;
  padding-top: 8px;
}
.v2-offer-secondary {
  font-family: var(--font-display);
  font-size: 30px;
  text-transform: none; /* render as written, e.g. "Reservations now open" */
  line-height: 1.1;
}

/* ---------- Hero / Menus ---------- */
.v2-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-top: 24px;
}
.v2-hero-illustration { width: 696px; max-width: 100%; height: auto; }
.v2-hero-illustration img { width: 100%; height: auto; }


.v2-menu {
  position: relative;
  flex: 1 0 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 27px;
}
.v2-menu-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 34px;
  color: var(--color-text);
  width: 100%;
}
.v2-menu-title .v2-menu-title-1 { text-transform: uppercase; }
.v2-menu-list { width: 100%; padding: 0 10px; }
.v2-menu-rule { width: 100%; height: 5px; display: block; }
.v2-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}
.v2-menu-item a,
.v2-menu-item span {
  font-family: var(--font-display);
  font-size: 37px;
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
}
/* Hover only — terracotta colour, no underline, matching nav hover */
.v2-menu-item a:hover,
.v2-menu-item span:hover { color: var(--color-terracotta); }

/* ---------- About + Gallery ---------- */
.v2-about-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 542px 1fr;
  gap: 24px;
  padding-top: 32px;
}
.v2-about { width: 542px; max-width: 100%; display: flex; flex-direction: column; gap: 26px; }
.v2-about-title { font-family: var(--font-display); font-size: 60px; font-weight: normal; line-height: 1.0; }
.v2-about-text { padding-left: 41px; }
.v2-about-text p { font-family: var(--font-perpetua); font-size: 20px; line-height: 1.19; }
/* Perpetua's "f" terminal overhangs and optically swallows the space before an
   inline link starting with a cap (e.g. "of The Pig's Head"); a hair of left
   margin restores a visible gap. */
.v2-about-text a { margin-left: 0.12em; }
.v2-about-text p + p { margin-top: 1em; }

.v2-about-photos {
  display: flex;
  align-items: flex-start;
  padding: 10px 10px 10px 0;
}
.v2-pub-photo { width: 475px; flex-shrink: 0; transform: rotate(-0.53deg); }
.v2-pub-photo img { width: 100%; height: auto; }
.v2-veg-crate { width: 182px; height: 134px; flex-shrink: 0; overflow: hidden; }
.v2-veg-crate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery cluster — absolute polaroids on the Figma 526x623 canvas */
.v2-gallery {
  position: relative;
  width: 526px;
  max-width: 100%;
  height: 623px;
  justify-self: end;
}
.v2-gallery-item {
  position: absolute;
  width: 202px;
  height: 202px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.2s ease-in-out, z-index 0s;
  cursor: pointer;
}
.v2-gallery-item:hover {
  transform: rotate(var(--rot, 0deg)) scale(1.05);
  z-index: 20;
}
.v2-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.v2-gallery-1 { left: 0;   top: 141px; --rot: -0.71deg; z-index: 1; }
.v2-gallery-2 { left: 165px; top: 25px;  --rot: 0.15deg; z-index: 3; }
.v2-gallery-3 { left: 321px; top: 156px; --rot: -0.71deg; z-index: 1; }
.v2-gallery-4 { left: 166px; top: 261px; --rot: 0.48deg; z-index: 2; }
.v2-gallery-5 { left: 294px; top: 419px; --rot: 1.15deg; z-index: 4; }
.v2-gallery-6 { left: 65px;  top: 395px; --rot: 0.15deg; z-index: 4; }
/* Wine bottle container — matches Figma node 423:1907 exactly */
.v2-white-wine {
  position: absolute;
  left: 38px;
  top: 0;
  width: 105px;
  height: 137px;
  overflow: hidden;
  z-index: 3;
}
.v2-white-wine img {
  position: absolute;
  width: 180.1%;   /* scales image up beyond container */
  height: 109.45%;
  left: -42.63%;   /* offsets to show the right crop */
  top: -3.94%;
  max-width: none;
}

/* Book a table badges */
.v2-book {
  position: absolute;
  width: 132px;
  height: 162px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 5;
  transform: rotate(var(--base-rot, 0deg));
  transform-origin: top center; /* swing hangs from the pin at the top */
}
.v2-book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.v2-book-bubble { transition: filter 0.2s ease-in-out; }
.v2-book-ellipse {
  width: 90% !important;
  height: 73% !important;
  top: 4% !important;
  left: 5% !important;
}
.v2-book span {
  position: relative;
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 24px;
  line-height: 25px;
  color: var(--color-white);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 26px;
}
.v2-offer-section { position: relative; }
/* offsets shifted (~17px x, ~2px y) to keep the resting position the same
   now that the pivot moved from centre to the top pin. */
/* Anchored to the RIGHT END of the centred offer banner (half banner width
   minus half badge width from centre), so the badge always overlaps the bar's
   right end regardless of viewport. Banner is 813px wide → 813/2 - 132/2 = 340. */
.v2-book--offer { left: calc(50% + 340px); right: auto; top: -26px; --base-rot: 12deg; }
.v2-book--a { right: 30px; top: 459px; --base-rot: 12deg; }
.v2-book--b { left: 125px; top: 824px; --base-rot: -12deg; }

/* Pinned-badge swing: gentle left/right/left/right wiggle on hover,
   pivoting around each badge's own resting tilt (~3deg either way). */
@keyframes v2-book-wiggle-r { /* badges resting at +12deg, ~3.3deg swing */
  0%, 100% { transform: rotate(12deg); }
  20%      { transform: rotate(8.7deg); }
  40%      { transform: rotate(15.3deg); }
  60%      { transform: rotate(9.8deg); }
  80%      { transform: rotate(13.1deg); }
}
@keyframes v2-book-wiggle-l { /* badge resting at -12deg, ~3.3deg swing */
  0%, 100% { transform: rotate(-12deg); }
  20%      { transform: rotate(-15.3deg); }
  40%      { transform: rotate(-8.7deg); }
  60%      { transform: rotate(-14.2deg); }
  80%      { transform: rotate(-10.9deg); }
}
.v2-book--offer:hover,
.v2-book--a:hover { animation: v2-book-wiggle-r 0.7s ease-in-out; }
.v2-book--b:hover { animation: v2-book-wiggle-l 0.7s ease-in-out; }
.v2-book:hover .v2-book-bubble { filter: brightness(0.90); }
@media (prefers-reduced-motion: reduce) {
  .v2-book:hover { animation: none; }
}

/* ---------- What's On ---------- */
.v2-whatson { position: relative; padding-top: 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.v2-contact-link { text-decoration: underline; }
.v2-contact-link:hover, .v2-copyright a:hover { color: var(--color-terracotta); }
.v2-whatson-title {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: normal;
  line-height: 1.19;
  text-align: center;
  padding: 10px 0 16px;
}
.v2-event {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
}
.v2-cal-group { display: flex; align-items: flex-start; flex-shrink: 0; gap: 16px; }
/* TPH calendar tilt: hovering the event row tilts the calendar -2deg.
   will-change + a resting translateZ promote the calendar to its own
   compositor layer so the hover rotate transforms a cached raster instead of
   re-laying-out the text each frame — kills the subpixel number/month jitter
   while keeping the tilt. backface-visibility hardens it on WebKit. */
.v2-cal {
  transition: transform 0.2s ease-in-out;
  transform: translateZ(0);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
.v2-event:hover .v2-cal { transform: rotate(-2deg) translateZ(0); }

.v2-cal {
  position: relative;
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-cal-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.v2-cal-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.v2-cal-daterow { display: flex; align-items: flex-start; justify-content: center; height: 70px; padding-top: 16px; }
.v2-cal-num { font-family: var(--font-perpetua); font-weight: 700; font-size: 50px; line-height: 1; }
.v2-cal-ord { font-family: var(--font-perpetua); font-weight: 700; font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase; padding-top: 0px; }
.v2-cal-month { font-family: var(--font-perpetua); font-weight: 700; font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase; padding-top: 8px; }

.v2-event-img { position: relative; width: 190px; height: 145px; flex-shrink: 0; overflow: hidden; }
.v2-event-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.v2-event-text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.v2-event-title { font-family: var(--font-display); font-weight: normal; font-size: 30px; line-height: 1.1; }
.v2-event-body { font-family: var(--font-perpetua); font-size: 20px; line-height: 1.19; }
.v2-event-info { font-family: var(--font-display); font-size: 23px; line-height: 26px; }

.v2-event-divider { width: 100%; height: 13px; display: block; margin: 0 0 12px; }

/* ---------- Footer ---------- */
.v2-footer { gap: 24px; padding: 32px 0 48px; }
.v2-footer-top { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }
.v2-contact, .v2-copyright { text-align: center; font-family: var(--font-perpetua); font-size: 17px; line-height: 1.4; }
.v2-contact p { font-size: 17px; }
.v2-contact strong { font-weight: 700; }
.v2-contact-sp { height: 11px; }
.v2-copyright a { color: var(--color-text); text-decoration: underline; }

/* Contact details + sister-pub block. Desktop (Figma 652:552): two columns
   side by side — contact left (583px incl. 70px inset), Pig's Head right. */
.v2-footer-contact-row {
  display: flex;
  gap: 33px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.v2-footer-contact-row .v2-contact { width: 513px; flex-shrink: 0; padding-left: 0; }
.v2-sisterpub {
  flex: 1 0 0;
  min-width: 0;
  padding-right: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.v2-sisterpub-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: center;
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  width: 100%;
}
.v2-sisterpub-logo { width: 94px; height: 119px; display: block; flex-shrink: 0; }
.v2-sisterpub-logo img { width: 100%; height: 100%; object-fit: contain; }
a.v2-sisterpub-logo { transition: opacity 0.2s ease-in-out; }
a.v2-sisterpub-logo:hover { opacity: 0.65; }

/* Mobile-only footer nav + social (shown in the max-width:767 block) */
.v2-footer-nav, .v2-footer-social { display: none; }

/* ==========================================================================
   Mobile nav drawer (Figma node 579-285 / The Pig's Head pattern)
   ========================================================================== */

/* Full-screen slide-down overlay (The Pig's Head pattern). Background is the
   opaque paper texture — no dark scrim — with a stripe band across the top. */
.v2-drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
  overflow-y: auto;
  isolation: isolate; /* contain the stripe multiply over the texture */
}
.v2-drawer.is-open { transform: translateY(0); pointer-events: auto; }

/* Textured backdrop as a real element (not the drawer's own background): on iOS
   Safari, mix-blend-mode multiply against a transformed + scrolling container's
   background is unreliable, so the stripes get a concrete sibling to blend with.
   This mirrors the sticky header (texture surface + stripes multiply). */
.v2-drawer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/images/v2/bg-texture.jpg');
  background-size: 640px 640px;
  pointer-events: none;
}

/* Stripe band — 86px across the top. A real element (not ::before) so the
   mix-blend multiply over the texture works on iOS Safari, like the sticky
   header's .v2-stripes. Sits above the backdrop it multiplies into. */
.v2-drawer-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 86px;
  z-index: 1;
  background-image: url('/assets/images/v2/stripes-vertical.jpg');
  background-size: 260px 260px;
  background-repeat: repeat-x;
  background-position: center;
  mix-blend-mode: multiply;
}

/* Top bar: Instagram left + close right at y:120 — same coordinates as the
   sticky compact bar, so the icons stay put as the drawer slides over them. */
.v2-drawer-bar {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 20px;
}
.v2-drawer-ig img { width: 30px; height: 30px; display: block; }

.v2-drawer-close {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-drawer-close img { width: 30px; height: 30px; display: block; }

/* Body (Figma 586:458): logo at y:206 (13px below the 193px header band),
   then the nav frame. Mirrors the inline header so it sits directly over it. */
.v2-drawer-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 206px 20px 40px;
}
.v2-drawer-logo { display: block; width: 210px; height: auto; }
.v2-drawer-logo img { width: 100%; height: auto; }

.v2-drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.v2-drawer-bookings {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 107px;
  height: 36px;
  text-decoration: none;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.v2-drawer-bookings::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/v2/menu-button.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.v2-drawer-bookings span {
  position: relative;
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-white);
  line-height: 36px;
  padding-top: 4px;
}

.v2-drawer-link {
  font-family: var(--font-perpetua);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.2s;
}
.v2-drawer-link:hover { color: var(--color-terracotta); }

/* ==========================================================================
   Responsive — tablet (768px Figma spec) and mobile.
   ========================================================================== */

/* ---------- Tablet: max 1023px ---------- */
@media (max-width: 1023px) {
  .v2-content { padding: 0 28px; }
  .v2-stripes { height: 86px; }

  /* Header: 48px padding inside top, clear of stripes */
  .v2-header { padding-top: 48px; }

  /* Nav: allow height to grow when links wrap, 30px bottom padding */
  .v2-nav { height: auto; }
  .v2-header .v2-nav { padding-bottom: 30px; }

  /* Offer banner: iPad Air (820px viewport) */
  .v2-offer { width: 764px; min-height: 96px; }
  /* Grunge texture — 768 tablet (Figma 456:1045): simple cover fill */
  .v2-offer-grunge { inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Badge 1: anchored to the banner's right end (764/2 - 132/2 = 316) */
  .v2-book--offer { left: calc(50% + 256px); right: auto; top: 51px; }

  /* Hero: illustration full width, menu centred below */
  .v2-hero { flex-direction: column; }
  .v2-hero-illustration { width: 100%; }
  .v2-menu { width: 400px; max-width: 100%; flex: none; min-width: 0; }
  .v2-menu-item { padding: 16px 0; }

  /* About */
  .v2-about-gallery { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .v2-about { width: 100%; min-width: 0; overflow: hidden; }
  .v2-about-title { text-align: center; }
  .v2-about-text { padding-left: 0; width: 100%; max-width: 100%; min-width: 0; }
  .v2-about-text p { word-break: break-word; }
  .v2-about-photos { justify-content: center; padding: 10px 0; }

  /* Gallery: break out to full viewport width, 444px tall, tablet positions */
  .v2-gallery {
    position: relative;
    width: 100vw;
    max-width: none;
    height: 444px;
    left: -28px;
    justify-self: auto;
    margin: 0;
  }
  .v2-gallery-1 { left: 148px; top: 15px;  }
  .v2-gallery-2 { left: 324px; top: 27px;  }
  .v2-gallery-3 { left: 537px; top: 0;     }
  .v2-gallery-4 { left: 84px;  top: 217px; }
  .v2-gallery-5 { left: 500px; top: 179px; }
  .v2-gallery-6 { left: 269px; top: 243px; }
  .v2-white-wine { left: 33px; top: 42px;  }

  /* What's On */
  .v2-whatson { padding-top: 32px; }

  /* Footer: combined selector for higher specificity */
  .v2-content.v2-footer { padding-top: 42px; padding-bottom: 48px; }

  /* Footer contact + sister pub: stacked (Figma 654:564) — contact, then
     Pig's Head block, centred. */
  .v2-footer-contact-row { flex-direction: column; align-items: center; gap: 24px; }
  .v2-footer-contact-row .v2-contact { width: 486px; max-width: 100%; padding-left: 0; }
  .v2-sisterpub { width: 100%; flex: none; padding-right: 0; }

  /* Badge 2: anchored to bottom-right of menu list */
  /* Badge 2: right of menu, fully clear of text */
  .v2-book--a { left: auto; right: -115px; top: auto; bottom: -51px; }
  /* Badge 3: hangs from last event divider */
  .v2-book--b { left: 17px; top: auto; bottom: -126px; }
}

/* Centre 768px gallery on viewports wider than iPad Mini (e.g. Surface Pro 7 at 912px) */
@media (min-width: 769px) and (max-width: 1023px) {
  .v2-gallery {
    width: 768px;
    left: calc(50vw - 384px - 28px);
  }
}

/* ---------- Tablet 1024px: iPad Pro/Air portrait (Figma node 561-1459) ---------- */
@media (min-width: 1024px) and (max-width: 1119px) {
  .v2-content { padding: 0 28px; }
  .v2-stripes { height: 86px; }
  .v2-header { padding-top: 48px; }

  .v2-nav { height: auto; }
  .v2-header .v2-nav { padding-bottom: 30px; }

  /* Offer banner: iPad Pro (1024px viewport) */
  .v2-offer { width: 814px; min-height: 96px; }
  /* Grunge texture — 1024 tablet (Figma 561:1553): width-fit, stretched tall */
  .v2-offer-grunge { inset: auto; left: 0; top: -469.18%; width: 100%; height: 1138.37%; object-fit: fill; }
  /* Badge 1: anchored to the banner's right end (814/2 - 132/2 = 341) */
  .v2-book--offer { left: calc(50% + 300px); right: auto; top: 51px; }

  /* Hero: stacked layout */
  .v2-hero { flex-direction: column; }
  .v2-hero-illustration { width: 100%; }
  .v2-menu { width: 400px; max-width: 100%; flex: none; min-width: 0; }
  .v2-menu-item { padding: 16px 0; }

  /* About */
  .v2-about-gallery { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .v2-about { width: 100%; min-width: 0; overflow: hidden; }
  .v2-about-title { text-align: center; }
  .v2-about-text { padding-left: 0; width: 100%; max-width: 100%; min-width: 0; }
  .v2-about-text p { word-break: break-word; }
  .v2-about-photos { justify-content: center; padding: 10px 0; }

  /* Gallery: Figma node 561-1459 positions, full viewport width */
  .v2-gallery {
    position: relative;
    width: 100vw;
    max-width: none;
    height: 444px;
    left: -28px;
    justify-self: auto;
    margin: 0;
  }
  .v2-gallery-1 { left: 278px; top: 15px;  }
  .v2-gallery-2 { left: 454px; top: 27px;  }
  .v2-gallery-3 { left: 667px; top: 0;     }
  .v2-gallery-4 { left: 214px; top: 217px; }
  .v2-gallery-5 { left: 630px; top: 179px; }
  .v2-gallery-6 { left: 399px; top: 243px; }
  .v2-white-wine { left: 163px; top: 42px; }

  /* What's On */
  .v2-whatson { padding-top: 32px; }

  /* Footer */
  .v2-content.v2-footer { padding-top: 42px; padding-bottom: 48px; }

  /* Footer contact + sister pub: side by side (Figma 654:620) — gap 86px,
     contact 486px, no edge insets. */
  .v2-footer-contact-row { flex-direction: row; align-items: flex-start; gap: 86px; }
  .v2-footer-contact-row .v2-contact { width: fit-content; max-width: 486px; flex-shrink: 1; padding-left: 0; }
  .v2-sisterpub { flex: 1 0 0; width: auto; padding-right: 0; }

  /* Badge 2: anchored to menu bottom-right */
  .v2-book--a { left: auto; right: -115px; top: auto; bottom: -51px; }
  /* Badge 3: hangs from last event divider — Figma left:32px */
  .v2-book--b { left: 32px; top: auto; bottom: -128px; }
}

/* ---------- Mobile: max 767px (Figma node 579:285 compact header + 429:293 page) ---------- */
@media (max-width: 767px) {
  /* === Sticky header wrapper ===
     isolation:isolate contains the stripes' mix-blend-mode so scrolled
     content never bleeds through. Opaque bg-texture is the blend surface. */
  .v2-sticky-header {
    position: sticky;
    top: 0;
    z-index: 200;
    isolation: isolate;
    background-image: url('/assets/images/v2/bg-texture.jpg');
    background-size: 640px 640px;
    height: 193px; /* Figma 579:272 — stripes (86px) + mobile bar (107px) */
  }
  /* Stripes no longer individually sticky */
  .v2-stripes--top { position: static; }

  /* Compact bar: Instagram left + hamburger right, icons at y:120 (Figma 579:280) */
  .v2-mobile-bar {
    height: 107px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 34px 20px 0; /* 86px stripes + 34px = icons at 120px */
  }
  .v2-mobile-ig img { width: 30px; height: 30px; display: block; }

  .v2-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .v2-hamburger img { width: 30px; height: 30px; display: block; }

  /* Scrolling header (Figma 429:492): logo + full nav, scrolls with page.
     Sticky bar ends at 193px; Figma logo at 206px → 13px top padding. */
  /* .v2-content.v2-header beats the .v2-content {padding:0 20px} rule below,
     keeping the 13px top padding → logo at 206px (same as the open drawer). */
  .v2-content.v2-header {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 13px 20px 40px;
    gap: 0;
    background: transparent;
  }
  .v2-header .v2-logo { display: block; width: 210px; height: auto; }
  /* Nav lives in the drawer only (opened via the hamburger) */
  .v2-header .v2-nav { display: none; }

  /* Badge (Figma 579:273): fixed, centred in a 163×186 frame at left:120 top:6.
     Graphic is 132×162.5 → centred → left:135.5 top:18, rotate 12°. z above drawer. */
  /* Badge: centred on the viewport (left:50% + -66px = half its 132px width) so
     it holds the same position on every mobile width, like The Pig's Head.
     margin (not translateX) centres it so the hover wiggle's rotate is safe. */
  .v2-book--offer {
    position: fixed;
    left: 50%;
    margin-left: -66px;
    top: 18px;
    right: auto;
    width: 132px;
    height: 162.5px;
    z-index: 500;
    transform: rotate(12deg);
    transform-origin: center center;
  }
  .v2-book--a { display: none; }
  .v2-book--b { display: none; }

  /* === Page content === */
  .v2-content { padding: 0 20px; }

  /* Nav jumps clear the 193px sticky bar so each section heading lands at the
     top rather than hidden behind it. */
  #menus, #about, #whatson, #contact { scroll-margin-top: 193px; }

  /* Offer banner (Figma 592:256): green box + grunge both 350×129 */
  .v2-offer { width: 100%; max-width: 350px; min-height: 129px; padding: 16px; }
  .v2-offer-primary { font-size: 30px; }
  .v2-offer-secondary { font-size: 30px; }
  /* Grunge texture (Figma 429:360): scaled + offset inside the clipped banner */
  .v2-offer-grunge {
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hero */
  .v2-hero { padding-top: 40px; }
  .v2-hero-illustration { width: 350px; max-width: 100%; margin: 0 auto; }
  .v2-menu { width: 100%; }
  .v2-menu-title { font-size: 34px; }
  .v2-menu-item { padding: 16px 0; }
  .v2-menu-item a, .v2-menu-item span { font-size: 37px; }

  /* About (Figma 429:326): 48px top padding — needs .v2-content.v2-about-gallery
     specificity to beat the .v2-content {padding:0 20px} rule below. */
  .v2-content.v2-about-gallery { padding-top: 48px; }
  .v2-about-title { font-size: 60px; }
  .v2-about-text { padding-left: 0; }
  .v2-about-photos { flex-direction: column; align-items: center; gap: 19px; padding: 10px 0; }
  .v2-pub-photo { width: 100%; max-width: 358px; }

  /* Gallery: Figma node 429:317 — 799px tall, mobile scatter positions */
  /* Gallery frame is the 390px design canvas (Figma 429:317). Centre it on the
     viewport at every width: left:50% + translateX(-50%) makes the frame centre
     equal the viewport centre (the 20px padding offset cancels out), so it never
     hugs the left on wider phones (XR, Pixel 7, 14 Pro Max) and stays symmetric
     on narrower ones. overflow-x:hidden (body) absorbs the edges under 390px. */
  .v2-gallery {
    position: relative;
    display: block;
    width: 390px;
    max-width: none;
    height: 799px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  .v2-gallery-item { position: absolute; width: 202px; height: 202px; aspect-ratio: auto; transform: rotate(var(--rot, 0deg)); }
  .v2-white-wine { display: block; left: 40px; top: 0; }
  .v2-gallery-1 { left: 13px;  top: 141px; }
  .v2-gallery-2 { left: 167px; top: 25px;  }
  .v2-gallery-3 { left: 151px; top: 242px; }
  .v2-gallery-4 { left: 38px;  top: 388px; }
  .v2-gallery-5 { left: 165px; top: 495px; }
  .v2-gallery-6 { left: 30px;  top: 599px; }

  /* Events (Figma 429:300): calendar + image as one centred horizontal row,
     text below. Grid (not flex-wrap) so the pair never stacks vertically on
     narrow phones like the iPhone SE — it stays horizontal exactly like events
     1 & 3, overflowing under ~360px rather than wrapping. */
  /* 1fr | cal | img | 1fr: the 1fr edges absorb slack so the cal+image block
     centres, while the text row spans the full width and stays left-aligned
     (only the cal+image is centred, not the text). */
  .v2-event { display: grid; grid-template-columns: 1fr auto auto 1fr; column-gap: 0; row-gap: 18px; align-items: start; }
  .v2-cal-group { grid-column: 2; grid-row: 1; flex: 0 0 auto; display: flex; align-items: flex-start; gap: 24px; }
  .v2-cal-group:has(.v2-event-img) { grid-column: 2 / 4; } /* events 1 & 3: same placement as 2 & 4 */
  .v2-event > .v2-event-img { grid-column: 3; grid-row: 1; width: 190px; height: 145px; margin-left: 24px; } /* events 2 & 4 */
  .v2-event-text { grid-column: 1 / -1; grid-row: 2; min-width: 0; }

  /* What's On (Figma 429:300): 16px gap between items.
     Dividers keep their thin lines + 12px bottom margin (base) and gain 12px
     top padding (content-box so the 13px line isn't squished). */
  .v2-whatson-title { font-size: 60px; }
  .v2-whatson { padding-top: 32px; gap: 16px; }
  .v2-event-divider { box-sizing: content-box; padding-top: 12px; }

  /* Footer (Figma 429:296): logo + 2-row nav, then social, contact, copyright */
  .v2-content.v2-footer { padding-top: 36px; padding-bottom: 48px; gap: 24px; }
  .v2-footer-top { gap: 48px; }
  /* Hide the desktop (single-row) navbar; show the 2-row mobile nav + social */
  .v2-footer-top .v2-nav { display: none; }
  .v2-footer-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  .v2-footer-navrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .v2-footer-social { display: flex; justify-content: center; height: auto; padding-bottom: 8px; }
  /* "Menus" active state: terracotta + persistent underline; extra left
     padding for breathing room after the Bookings button */
  .v2-footer-nav .v2-navlink--active { color: var(--color-terracotta); padding-left: 20px; }
  .v2-footer-nav .v2-navlink--active::after { opacity: 1; left: 20px; }

  /* Footer contact + sister pub (Figma mobile order): contact, then the
     sister-pub note + Pig's Head logo, then copyright (a separate block below). */
  .v2-footer-contact-row { flex-direction: column; align-items: center; gap: 24px; }
  .v2-footer-contact-row .v2-contact { width: 100%; max-width: 100%; padding-left: 0; }
  .v2-sisterpub { width: 100%; flex: none; padding-right: 0; gap: 20px; }
}

/* ---------- Very narrow screens (Galaxy Z Fold 5 cover ~344px, small phones) ---------- */
@media (max-width: 374px) {
  /* Galaxy Z Fold cover and similarly tiny screens ONLY. Every iPhone is
     >=375px, so this block never touches them. */

  /* Footer nav: shrink a touch so the two rows keep clear of the edges */
  .v2-footer-nav { padding: 0 8px; }
  .v2-footer-navrow { gap: 6px; }
  .v2-footer-nav .v2-navlink { font-size: 16px; padding: 0 4px; }
  .v2-footer-nav .v2-navlink--active { padding-left: 4px; }
  .v2-footer-nav .v2-navlink--active::after { left: 4px; right: 4px; }

  /* Offer fits the narrow viewport */
  .v2-offer { max-width: 100%; }

  /* Events: keep the iPhone grid, but let the image column shrink (minmax) so
     the calendar+image always fits and centres — no left/right cutoff,
     whatever the exact Fold width is. */
  .v2-event { grid-template-columns: 1fr auto minmax(0, 190px) 1fr; }
  .v2-cal-group { gap: 16px; }
  .v2-cal-group:has(.v2-event-img) { grid-column: 1 / -1; justify-content: center; } /* events 1 & 3 */
  .v2-cal-group .v2-event-img { flex: 0 1 190px; min-width: 0; width: auto; }
  .v2-event > .v2-event-img { width: auto; min-width: 0; margin-left: 16px; }       /* events 2 & 4 */
}