/* ==========================================================================
   BOALD — Global chrome: navbar + footer
   ========================================================================== */

/* ---- Preloader — exits with the same strip curtain as the page transition - */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: transparent;
  display: grid;
  place-items: center;
  transition: visibility 0s linear 0.75s;
  animation: preloaderFailsafe 0s linear 5s forwards;
}
@keyframes preloaderFailsafe { to { visibility: hidden; pointer-events: none; } }
.preloader__bg { position: absolute; inset: 0; z-index: -1; display: flex; }
.preloader__bg span { position: relative; flex: 1; background: var(--c-ink); transition: transform 0.5s var(--ease-in-out); }
/* the site's vertical hairlines carry through the curtain (seams at 25/50/75%) */
.preloader__bg span + span::before, .pt > span + span::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(247,247,242,0.05); }
.preloader__bg span + span { margin-left: -1px; }
.preloader.is-done { visibility: hidden; }
.preloader.is-done .preloader__bg span { transform: translateY(-101%); }
.preloader.is-done .preloader__bg span:nth-child(1) { transition-delay: 0.18s; }
.preloader.is-done .preloader__bg span:nth-child(2) { transition-delay: 0.12s; }
.preloader.is-done .preloader__bg span:nth-child(3) { transition-delay: 0.06s; }
.preloader.is-done .preloader__bg span:nth-child(4) { transition-delay: 0s; }
/* no-JS / legacy markup without strips: keep a plain veil */
.preloader:not(:has(.preloader__bg)) { background: var(--c-ink); transition: transform 0.9s var(--ease-in-out), visibility 0s linear 0.9s; }
.preloader:not(:has(.preloader__bg)).is-done { transform: translateY(-100%); }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
.preloader__mask { display: block; overflow: hidden; }
.preloader__line { display: block; color: var(--c-sand-soft); }
.preloader__line .pl-ch { display: inline-block; white-space: pre; transform: translateY(115%); transition: transform 0.7s var(--ease-out); }
.preloader.is-in .preloader__line .pl-ch { transform: translateY(0); }
.preloader.is-done .preloader__line .pl-ch { transform: translateY(-115%); transition: transform 0.35s var(--ease-in-out); }
.preloader__bar { display: block; width: 64px; height: 1px; background: var(--c-cream-16); overflow: hidden; opacity: 0; transition: opacity 0.4s var(--ease-out) 0.85s; }
.preloader.is-in .preloader__bar { opacity: 1; }
.preloader.is-done .preloader__bar { opacity: 0; transition: opacity 0.25s var(--ease-in-out); }
.preloader__fill { display: block; height: 100%; width: 100%; background: var(--c-sand); transform: scaleX(0); transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* ---- Page transition curtain — same strips as the mobile menu; while the
   paint covers everything, the preloader line comes back ------------------- */
.pt { position: fixed; inset: 0; z-index: 400; display: flex; visibility: hidden; pointer-events: none; }
.pt > span { position: relative; flex: 1; background: var(--c-ink); transform: translateY(-101%); transition: transform 0.5s var(--ease-in-out); }
.pt > span + span { margin-left: -1px; }
.pt.is-covering { visibility: visible; transition: none; }
.pt.is-covering > span { transform: translateY(0); }
.pt.is-covering > span:nth-child(1) { transition-delay: 0s; }
.pt.is-covering > span:nth-child(2) { transition-delay: 0.07s; }
.pt.is-covering > span:nth-child(3) { transition-delay: 0.14s; }
.pt.is-covering > span:nth-child(4) { transition-delay: 0.21s; }
.pt.is-leaving > span { transform: translateY(-101%); }
.pt.is-leaving > span:nth-child(1) { transition-delay: 0.18s; }
.pt.is-leaving > span:nth-child(2) { transition-delay: 0.12s; }
.pt.is-leaving > span:nth-child(3) { transition-delay: 0.06s; }
.pt.is-leaving > span:nth-child(4) { transition-delay: 0s; }
.pt.is-instant > span { transition: none !important; }
.pt__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pt__mask { display: block; overflow: hidden; }
.pt__line { display: block; color: var(--c-sand-soft); }
.pt__line .pl-ch { display: inline-block; white-space: pre; transform: translateY(115%); transition: transform 0.7s var(--ease-out); }
.pt.is-instant .pt__line .pl-ch { transition: none !important; }
.pt.label-in .pt__line .pl-ch { transform: translateY(0); }
.pt.label-out .pt__line .pl-ch { transform: translateY(-115%); transition: transform 0.35s var(--ease-in-out); }

/* ---- Navbar -------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* content rides a touch lower; the gradient veils (inset:0) stay glued to the top */
  padding-top: clamp(0.75rem, 1.6vw, 1.5rem);
}
/* Two gradient layers cross-fade so the navbar reads on either backdrop.
   ::before = dark (for the dark sections) · ::after = light (for the white
   sections). Opacity animates; the active one is chosen by body.on-light. */
.navbar::before,
.navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.navbar::before { background: linear-gradient(180deg, var(--c-ink) 0%, rgba(30,28,29,0) 100%); }
.navbar::after  { background: linear-gradient(180deg, var(--c-paper) 0%, rgba(245,245,245,0) 100%); }
.navbar.is-scrolled::before { opacity: calc(1 - var(--nav-light, 0)); }
.navbar.is-scrolled::after  { opacity: var(--nav-light, 0); }
.navbar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
  padding-inline: var(--section-pad-inline); /* edge gutter: the navbar spans the whole screen at every width, never capped (CEO, 2026-10-11) */
}

/* Brand */
.navbar__brand { color: var(--c-white); transition: color var(--dur-fast) var(--ease-out); padding-block: 12px; margin-block: -12px; } /* touch area 44px tall, no layout change */
/* collapsing wordmark: "Boald®" → "B®" once scrolling starts */
.navbar__brand .lgwrap { --lgh: clamp(20px, 1.9vw, 28px); display: block; overflow: hidden; height: var(--lgh); width: calc(var(--lgh) * 5.89); transition: width 0.7s var(--ease-out), height 0.7s var(--ease-out); }
.navbar__brand svg { height: 100%; width: calc(var(--lgh) * 5.89); max-width: none; display: block; }
.lg-lt, .lg-dot { transition: transform 0.7s var(--ease-out), opacity 0.45s var(--ease-out); }
.lg-d { transition-delay: 0s; } .lg-l { transition-delay: 0.04s; } .lg-a { transition-delay: 0.08s; } .lg-o { transition-delay: 0.12s; }
.navbar.is-collapsed .lgwrap { width: calc(var(--lgh) * 1.22); }
.navbar.is-collapsed .lg-o { transform: translateX(-204px); opacity: 0; }
.navbar.is-collapsed .lg-a { transform: translateX(-434px); opacity: 0; }
.navbar.is-collapsed .lg-l { transform: translateX(-670px); opacity: 0; }
.navbar.is-collapsed .lg-d { transform: translateX(-903px); opacity: 0; }
.navbar.is-collapsed .lg-dot { transform: translateX(-920px); transition-delay: 0.06s; }
@media (prefers-reduced-motion: reduce) { .lg-lt, .lg-dot, .navbar__brand .lgwrap { transition: none; } }
body.on-light .navbar__brand { color: var(--c-ink); }
body.on-light .navbar__burger { color: var(--c-ink); }

/* Center nav (desktop) — pinned to viewport center so the collapsing logo doesn't shift it */
.navbar__nav { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); }
.navbar__inner { position: relative; }

/* CTA */
.navbar__cta { flex-shrink: 0; }

/* Scrolled state — background handled by the fading ::before layer */

/* Mobile burger — hidden on desktop */
.navbar__burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  color: var(--c-white);
}
.navbar__burger span,
.navbar__burger span::before,
.navbar__burger span::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.navbar__burger span::before { position: absolute; top: -7px; }
.navbar__burger span::after  { position: absolute; top: 7px; }
body.menu-open .navbar__burger span { background: transparent; }
body.menu-open .navbar__burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .navbar__burger span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile slide-in menu ------------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  justify-content: center; /* links block vertically centered */
  gap: var(--sp-3xl);
  padding: clamp(6rem, 18vw, 8rem) var(--section-pad-inline) var(--section-pad-inline);
  visibility: hidden;
  transition: visibility 0s linear 0.7s; /* wait for the last strip to close */
}
/* the dark backdrop is split into four strips (matching the background line
   columns); each drops with a subtle stagger, items stay put */
.menu__bg { position: absolute; inset: 0; z-index: -1; display: flex; overflow: hidden; }
.menu__bg span { flex: 1; background: var(--c-ink); transform: translateY(-101%); transition: transform 0.5s var(--ease-in-out); }
.menu__bg span + span { margin-left: -1px; }
.menu__bg span:nth-child(1) { transition-delay: 0.18s; }
.menu__bg span:nth-child(2) { transition-delay: 0.12s; }
.menu__bg span:nth-child(3) { transition-delay: 0.06s; }
.menu__bg span:nth-child(4) { transition-delay: 0s; }
body.menu-open .menu { visibility: visible; transition: none; }
body.menu-open .menu__bg span { transform: translateY(0); }
body.menu-open .menu__bg span:nth-child(1) { transition-delay: 0s; }
body.menu-open .menu__bg span:nth-child(2) { transition-delay: 0.07s; }
body.menu-open .menu__bg span:nth-child(3) { transition-delay: 0.14s; }
body.menu-open .menu__bg span:nth-child(4) { transition-delay: 0.21s; }
.menu__links { display: flex; flex-direction: column; gap: var(--sp-md); align-items: flex-start; text-align: left; }
/* curtain reveal: each link is a mask; its span rises in with a stagger */
.menu__links a { display: block; overflow: hidden; }
.menu__links a span { display: block; transform: translateY(115%); transition: transform 0.45s var(--ease-in-out); }
body.menu-open .menu__links a span { transform: translateY(0); transition: transform 0.7s var(--ease-out); }
body.menu-open .menu__links a:nth-child(1) span { transition-delay: 0.28s; }
body.menu-open .menu__links a:nth-child(2) span { transition-delay: 0.35s; }
body.menu-open .menu__links a:nth-child(3) span { transition-delay: 0.42s; }
body.menu-open .menu__links a:nth-child(4) span { transition-delay: 0.49s; }
body.menu-open .menu__links a:nth-child(5) span { transition-delay: 0.56s; }
.menu__foot { opacity: 0; transition: opacity 0.3s var(--ease-out); }
body.menu-open .menu__foot { opacity: 1; transition: opacity 0.5s var(--ease-out) 0.6s; }
.menu__links a {
  font-size: clamp(1.625rem, 7vw, 2.25rem);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--c-cream);
  line-height: 1.05;
}
.menu__links a:hover { color: var(--c-sand); }
.menu__foot { display: flex; gap: var(--sp-md); flex-wrap: wrap; justify-content: flex-start; }
.menu__foot a { color: var(--c-cream-64); font-size: var(--fs-ui); }
.menu__foot a:hover { color: var(--c-sand); }

/* ---- Footer -------------------------------------------------------------- */
.footer { background: var(--c-ink); color: var(--c-cream); z-index: 2; }
/* edge gutter: the footer spans the whole screen at every width, never capped (CEO, 2026-10-11); content sections use --page-gutter */
.footer > .padding-global { padding-inline: var(--section-pad-inline); }
.footer__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3xl) var(--gap-columns);
  padding-block: clamp(4rem, 8vw, 6rem) var(--sp-3xl);
  align-items: start;
  position: relative;
}
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-md); max-width: 42ch; }
/* Full wordmark, recolored via mask so it stays crisp and themable */
.footer__logo { display: inline-flex; align-items: flex-end; gap: 5px; }
.footer__logo { color: var(--c-white); }
.footer__tagline { color: var(--c-cream-64); }
.footer__logo .logo__dot { width: 5px; height: 5px; margin-bottom: 1px; }
.footer__wordmark { display: block; width: clamp(96px, 9vw, 132px); aspect-ratio: 1887.918 / 358.230; background: var(--c-white); -webkit-mask: url(../assets/boald-wordmark-mask.svg) left center / contain no-repeat; mask: url(../assets/boald-wordmark-mask.svg) left center / contain no-repeat; }
/* Newsletter */
/* three columns: brand, Social and Contact in the middle, newsletter right-aligned (2026-10-23). Below 1440 the Subscribe button sits under the paragraph, the column is too narrow beside the title */
.footer__col.footer__news { grid-column: 3; justify-self: end; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg) var(--sp-xl); align-items: end; max-width: 36rem; }
@media (min-width: 1440px) {
  .footer__col.footer__news { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__col.footer__news .footer__subscribe { grid-column: 2; grid-row: 1; justify-self: end; }
}
.footer__news .footer__news-main { grid-column: 1; grid-row: 1; }
.footer__news .footer__news-desc { grid-column: 1 / -1; grid-row: 2; }
.footer__news-main { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer__news .footer__subscribe { grid-column: 1; grid-row: 3; justify-self: start; --text-strong: var(--c-cream); --border-subtle: var(--c-cream-16); }
.footer__news-desc { margin: 0; color: var(--c-cream-64); }
.footer__news-title { margin: 0; font-size: var(--fs-body-lg); font-weight: 500; letter-spacing: var(--ls-tight); color: var(--c-cream-100); }
.footer__cols { grid-column: 2; justify-self: center; display: flex; gap: var(--sp-3xl); flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer__col .text-eyebrow { color: var(--c-cream-40); }
.footer__col a, .footer__col span:not(.text-eyebrow) { color: var(--c-cream-88); font-size: var(--fs-ui); }
.footer__col a:hover { color: var(--c-sand); }
.footer__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
  padding-block: var(--sp-lg);
  position: relative;
}
/* the dividers run the full screen width, past the edge gutter (2026-10-15) */
.footer__inner::before, .footer__bar::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--section-pad-inline)); right: calc(-1 * var(--section-pad-inline)); height: 1px; background: var(--c-cream-16); }
.footer__bar .text-eyebrow { color: var(--c-cream-40); }
.footer__bar .text-caption { color: var(--c-cream-64); }
.footer__col--contact { gap: var(--sp-2xs); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .navbar__nav { display: none; }
  .navbar__cta { display: none; }
  .navbar__burger { display: inline-flex; }
}
@media (max-width: 991px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { justify-self: start; grid-column: 1; }
  .footer__col.footer__news { justify-self: stretch; grid-column: 1; grid-row: auto; max-width: none; }
  .footer__cols { gap: var(--sp-xl); }
}
@media (max-width: 767px) {
  .footer__col.footer__news { grid-template-columns: 1fr; }
  .footer__news .footer__subscribe { grid-column: 1; grid-row: 3; justify-self: start; }
}

/* =========================================================================
   CUSTOM CURSOR — trailing dot + ring (fine pointers only)
   ========================================================================== */
body.cursor-on, body.cursor-on * { cursor: none !important; }
@media (pointer: coarse) { body.cursor-on, body.cursor-on * { cursor: auto !important; } }
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; border-radius: 50%; will-change: transform; mix-blend-mode: difference; }
.cursor { width: 7px; height: 7px; background: var(--c-cream); margin: -3.5px 0 0 -3.5px; transition: opacity 0.25s var(--ease-out); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid var(--c-cream); margin: -19px 0 0 -19px; transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out), opacity 0.25s var(--ease-out); }
.cursor-ring.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
body.cursor-veiled .cursor, body.cursor-veiled .cursor-ring { opacity: 0; }
body:not(.cursor-live) .cursor, body:not(.cursor-live) .cursor-ring { opacity: 0; }
body:not(.cursor-on) .cursor, body:not(.cursor-on) .cursor-ring { display: none; }
@media (pointer: coarse) { .cursor, .cursor-ring { display: none !important; } }

/* touch screens: each footer link is a real 44px box (overlapping padding left the upper links 35px tappable; Rowan, 2026-10-08) */
@media (max-width: 991px) {
  .footer__col { gap: 0; }
  .footer__col .text-eyebrow { margin-bottom: var(--sp-2xs); }
  .footer__col a, .footer__col span:not(.text-eyebrow) { display: flex; align-items: center; min-height: 44px; }
  .footer__col--contact span:not(.text-eyebrow) { min-height: 0; }
}