/* Beacon round 3 — modern, painting-first base layered over beacon.css.
   Keeps the lit-lighthouse red band header; everything else gets contemporary type, pills and clean space. */
:root {
  --display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --paper: #f6f4ef;
  --paper-2: #ebe7de;
  --ink: #111316;
  --ink-2: #2a2d33;
  --muted: #6b6f76;
  --line: rgba(17, 19, 22, .12);
  --max: 1360px;
}
body { font: 400 17px/1.6 var(--sans); background: var(--paper); color: var(--ink); }
::selection { background: var(--crimson); color: #fff; }

.d-xl, .d-l, .d-m, .d-s { margin: 0; font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 88, "opsz" 96; letter-spacing: -.028em; line-height: .92; }
.d-xl { font-size: clamp(56px, 10.4vw, 184px); }
.d-l { font-size: clamp(44px, 6.6vw, 112px); }
.d-m { font-size: clamp(34px, 4.4vw, 72px); line-height: .96; letter-spacing: -.025em; }
.d-s { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.04; letter-spacing: -.02em; }
.d-xl em, .d-l em, .d-m em, .d-s em, .it { font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.tag { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); }
.tag::before { content: none; }
.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 36em; }

.btn { border-radius: 999px; min-height: 54px; padding: 0 28px; font: 600 15.5px/1 var(--sans); letter-spacing: 0; }
.btn::after { border-radius: inherit; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--light { --bg: #fff; --fg: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); color: #fff; font: 600 13px/1 var(--sans); }

/* the shared footer, in round-3 type */
.bp-foot { background: #0d0f12; }
.bp-foot__brand i { font-family: var(--serif); }
.bp-foot__big { font-family: var(--display); font-variation-settings: "wdth" 85; letter-spacing: -.02em; font-size: 30px; }
.bp-foot h4 { color: #fff; opacity: .55; }

/* review switcher pill and toast keep their look */
.rv-pill { font-family: var(--sans); }

/* line-by-line reveal used by v3.js */
.ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.ln > span { display: block; transform: translateY(110%); }

/* utility */
.wrap { width: min(var(--max), 100% - var(--pad) * 2); }
.sr-only { position: absolute !important; }

/* every button fills with a streak of paint on hover: a brush-stroke shape (ragged ends, two little drips) sweeps across */
.btn::after { inset: -16% -8% -34%; background: var(--streak, var(--crimson-deep)); transform: none !important; -webkit-mask: url(/assets/brush-stroke.svg) no-repeat left center / 0% 100%; mask: url(/assets/brush-stroke.svg) no-repeat left center / 0% 100%; transition: -webkit-mask-size .65s cubic-bezier(.6, 0, .25, 1), mask-size .65s cubic-bezier(.6, 0, .25, 1); }
.btn:hover::after, .btn:focus-visible::after { -webkit-mask-size: 125% 100%; mask-size: 125% 100%; }
.btn { --streak: #24324f; transition: transform .4s var(--ease), color .35s .1s; }
.btn--light { --streak: #d6a63c; }
.btn--light:hover { color: var(--ink); }
.btn--ghost { --streak: var(--crimson); }
.btn--ghost::after { opacity: 1; }
.btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--crimson); }



/* SEO pass: some pages use the small line above the big headline as the real H1 */
h1.tag { margin-block: 0 1em; }
.n2-kw { color: #f6c96b; }

/* auto-playing sections change height; never let the browser shift the page to "compensate" */
html, body { overflow-anchor: none; }

/* bigger tap areas on small links without changing the layout */
@media (max-width: 900px) {
  .pf__cols a, .pf__up, .lp-crumbs a, a[href^="tel:"]:not(.btn):not(.link), .n2-skip, .n2-mail, .bp-word { padding-block: 10px; margin-block: -10px; }
}