/* ============================================================
   Bear Park — site v2 tweak overrides
   Loaded AFTER site-v2.css. Every rule is driven by a CSS var
   (set by the Tweaks panel) with a fallback equal to the
   original design value, so the page is identical until tweaked.
   ============================================================ */

:root {
  --tw-head-scale: 1;
  --tw-space-scale: 1;
}

/* ---------- Heading font / weight / tracking ---------- */
.headline,
.hero2 .h,
.proj-row .nm,
.story .q,
.coll-item .big,
.ourgal-head h2 {
  font-family: var(--tw-font-head, var(--v2-sans));
}
.headline { font-weight: var(--tw-head-weight, 300); letter-spacing: var(--tw-head-track, -0.015em); }
.ourgal-head h2 { font-weight: var(--tw-head-weight, 350); }
.hero2 .h { font-weight: var(--tw-head-weight, 400); letter-spacing: var(--tw-head-track, -0.01em); }
.story .q { font-weight: var(--tw-head-weight, 350); }
.coll-item .big { font-weight: var(--tw-head-weight, 400); }

/* ---------- Label / mono font ---------- */
.eyebrow,
.hero2-b .para,
.btn-block,
.link-line,
.tag-pill,
.stories .count,
.footer2 .links,
.pillnav .seg.label,
.story .who .role,
.darkband .address .lbl,
.menu-list a small,
.menu-list a,
.menu-aside {
  font-family: var(--tw-font-label, var(--v2-label-fallback));
}

/* ---------- Section subheadings (eyebrow labels): Inter, 14px ---------- */
.eyebrow {
  font-family: "Inter", var(--v2-sans);
  font-size:var(--t-eyebrow);
  letter-spacing: .08em;
  align-items: center;
  text-transform: var(--tw-label-case, uppercase);
}
/* Primary labels & buttons share the 14px label size */
.btn-block,
.link-line {
  font-size: 14px;
}
.eyebrow::before {
  font-size: 8px;
  align-self: center;
  transform: translateY(0.5px);
  line-height: 1;
}

/* ---------- Heading scale ---------- */
.hero2 .h { font-size: calc(clamp(2.2rem, 4.6vw, 4.2rem) * var(--tw-head-scale)); }
.statement .headline { font-size: calc(clamp(1.95rem, 3.8vw, 3.5rem) * var(--tw-head-scale)); }
.darkband .overlay-h { font-size: calc(clamp(1.7rem, 3vw, 2.7rem) * var(--tw-head-scale)); }
.guide .overlay-h { font-size: calc(clamp(1.9rem, 3.4vw, 3rem) * var(--tw-head-scale)); }
.projects .statement-mini .headline { font-size: calc(clamp(1.9rem, 3.6vw, 3.2rem) * var(--tw-head-scale)); }
.cta2 .headline { font-size: calc(clamp(2rem, 4vw, 3.6rem) * var(--tw-head-scale)); }
.coll-item .big { font-size: calc(clamp(1.9rem, 3.4vw, 3.1rem) * var(--tw-head-scale)); }
.story .q { font-size: calc(clamp(1.6rem, 3vw, 2.7rem) * var(--tw-head-scale)); }

/* ---------- Section spacing scale ---------- */
.statement { padding-block: calc(clamp(72px, 9vw, 132px) * var(--tw-space-scale)); }
.collection {
  padding-top: calc(clamp(60px, 8vw, 110px) * var(--tw-space-scale));
  padding-bottom: calc(clamp(110px, 14vw, 200px) * var(--tw-space-scale));
}
.darkband {
  padding-top: calc(clamp(60px, 8vw, 100px) * var(--tw-space-scale));
  padding-bottom: calc(clamp(120px, 16vw, 240px) * var(--tw-space-scale));
}
.projects { padding-block: calc(clamp(60px, 8vw, 110px) * var(--tw-space-scale)); }
.stories {
  padding-top: calc(clamp(60px, 8vw, 110px) * var(--tw-space-scale));
  padding-bottom: calc(clamp(110px, 14vw, 190px) * var(--tw-space-scale));
}
.cta2-wrap { padding-bottom: calc(clamp(80px, 10vw, 140px) * var(--tw-space-scale)); }

/* ---------- Button / accent colour ---------- */
.btn-block {
  background: var(--tw-btn, var(--v2-dark));
  border-color: var(--tw-btn, var(--v2-dark));
}

/* ---------- Hero text position ---------- */
body[data-hero-align="left"] .hero2 { justify-content: flex-start; }
body[data-hero-align="left"] .hero2 .h {
  text-align: left;
  padding-left: clamp(15px, 2.625vw, 48px);
}
body[data-hero-align="left"] .hero2 .h .mask-line { margin-inline: 0; }

body[data-hero-align="low"] .hero2 { justify-content: flex-start; align-items: flex-end; }
body[data-hero-align="low"] .hero2 .h {
  text-align: left;
  padding-left: clamp(15px, 2.625vw, 48px);
  margin-bottom: 16svh;
}
body[data-hero-align="low"] .hero2 .h .mask-line { margin-inline: 0; }

/* ---------- Statement alignment ---------- */
body[data-statement-align="left"] .statement { text-align: left; }
body[data-statement-align="left"] .statement .headline { margin-inline: 0; max-width: 26ch; }
body[data-statement-align="left"] .statement .headline .mask-line { margin-inline: 0; }