/* Shared overrides for every page. Each page still has its own inline <style>;
   this file loads after it, so the rules here win where they overlap. */

/* ---- Bigger, easier-to-read text ---- */

/* Small uppercase labels */
.eyebrow, .p-eyebrow, .page-hero .eyebrow, .intro .eyebrow, .sec-head span,
.back, .back-link, .hero-label, .cap, .cta .eye, .count, .vf-head,
.meta .k, .intro .meta .k, .meta-row .k, .spec .k, .sv .n, .pk .n, .fl, .sub,
.w-cat, .ticks.short b, .detail-item .label, .reel-cap .m, .vf-cap, .portrait .tag,
footer, .footer-copy, .hero-meta { font-size: 12px; }
.sec-head h2 { font-size: 13px; }

/* Menu, buttons and small print */
.nav-links a { font-size: 12px; }
.btn, .send-btn { font-size: 12px; }
.price .terms, .buy-band .terms, .cta .sub { font-size: 12px; }

/* Body copy */
.lede, .page-hero .lede { font-size: 17px; }
.p-body p, .copy p, .intro p, .body-section p, .detail-item .value { font-size: 16px; }
.meta .v, .intro .meta .v, .meta-row .v { font-size: 15px; }
.sv .d, .sv ul, .pk ul, .pk .price, .qa p, .spec, .steps li, .ticks li, .ticks.short li { font-size: 15px; }
.steps code { font-size: 14px; }
.note, #form-success, .tlink, .by, .intro .contact-link { font-size: 14px; }

/* Form fields at 16px also stop iPhones zooming in when a field is tapped */
.fi, .ft, .fs { font-size: 16px; }

/* Footer links wrap instead of running off narrow screens at the larger size */
.foot-links { flex-wrap: wrap; row-gap: 12px; }

/* Email, social and phone in the enquiry blocks stack on phones so nothing is squeezed */
@media (max-width: 560px) {
  .enquire .meta { grid-template-columns: 1fr; }
}

/* ---- Phone menu (button and panel are added by /assets/site.js) ---- */

.menu-btn { display: none; }

@media (max-width: 820px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-links { gap: 14px; }
  .nav-links a.nav-cta { font-size: 12px; letter-spacing: 0.12em; padding: 9px 14px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 10px 4px; cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; color: #f2ece1;
  }
  .menu-btn .bars { display: inline-block; width: 18px; height: 10px; position: relative; }
  .menu-btn .bars::before, .menu-btn .bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  }
  .menu-btn .bars::before { top: 1px; }
  .menu-btn .bars::after { bottom: 1px; }
}

.m-menu {
  position: fixed; inset: 0; z-index: 9990;
  background: #0e0b09; color: #f2ece1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 28px 48px; overflow-y: auto;
}
.m-menu[hidden] { display: none; }
.m-menu a {
  font-family: 'Cormorant', serif; font-weight: 300; font-size: 44px; line-height: 1.1;
  letter-spacing: -0.01em; text-transform: none; color: #f2ece1; text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid rgba(242,236,225,0.13);
}
.m-menu a:hover, .m-menu a:focus-visible { color: #c79a54; outline: none; }
.m-menu .m-close {
  position: absolute; top: 22px; right: 20px;
  background: none; border: 1px solid rgba(242,236,225,0.13); color: #f2ece1; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 14px;
}
.m-menu .m-close:hover, .m-menu .m-close:focus-visible { border-color: #c79a54; color: #c79a54; outline: none; }
body.m-open { overflow: hidden; }