/* BeargrassAI 2.0.0, direction D: Big Sky Survey, on the kit. Loads after /brand/tokens.css and /brand/base.css.
   Only what is this page's own: the first screen's three thirds, each section's sky and spacing. */
.glow, .hero-art .twp { position: absolute; left: 0; top: 0; pointer-events: none; }
.glow { width: 100%; height: 100%; }
.hero-art .twp { visibility: hidden; }
.hero-art .twp i { padding: 4px 5px; font-size: 9px; }
.actions .btn { min-width: 132px; }
.offers { position: relative; z-index: 2; display: grid; gap: 18px; padding-top: 28px; padding-bottom: 24px; }

/* Moment 2, the work, under the stars. */
.work { position: relative; background: linear-gradient(180deg, #0a1024 0%, #0f1830 55%, var(--night-2) 100%); }
html:not(.m) .work { background-image: linear-gradient(rgba(240, 230, 207, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 230, 207, 0.06) 1px, transparent 1px), linear-gradient(180deg, #0a1024 0%, #0f1830 55%, var(--night-2) 100%); background-size: 62px 62px, 62px 62px, auto; }
.work-cap { position: relative; padding-top: 22px; padding-bottom: 34px; font-size: 15px; color: var(--cream-2); }
.work-cap a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-weight: 600; white-space: nowrap; }

/* Moment 3, the record card: night heading, dawn, then the day under it. */
.record { position: relative; background: var(--paper); color: var(--ink); }
.record-head { background: linear-gradient(180deg, var(--night-2) 0%, #24364f 60%, var(--indigo) 100%); color: var(--cream); padding: 64px 0 30px; }
.record-head h2 { max-width: 16ch; color: var(--white); }
.record-foot { background: var(--paper); padding: 10px 0 48px; }
.record-say { font-size: clamp(22px, 5.6vw, 30px); line-height: 1.3; max-width: 30ch; color: var(--ink); margin-bottom: 24px; text-wrap: pretty; }
/* Pappenfüs' one real reading under his record (BGA 46, 85), in the record's own ink */
.record-real { max-width: 54ch; margin: -6px 0 24px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.record-real a { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Moments 4 and 5, in day. */
.trail { position: relative; padding: 58px 0 64px; }
.trail h2 { max-width: 14ch; }
.notes { position: relative; padding: 30px 0 92px; }
.notes-in { max-width: 820px; }
.notes h2 { max-width: 18ch; }

/* Laptop and up */
@media (min-width: 700px) {
  .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 900px) {
  /* Home only. The shared rule pins every scene heading to the logo's left edge. Other pages use that, so this page centers its own five headings on the card. */
  .m #work .lines-box { left: 50%; right: auto; transform: translateX(-50%); }
  .m #work .lines li { place-items: center; text-align: center; }
  .hero-art .twp i { padding: 6px 7px; font-size: 10.5px; }
  .offers { padding-top: 8px; padding-bottom: 34px; }
  .offer { padding: 16px 18px 17px; background: rgba(10, 16, 36, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .record-head { padding: 96px 0 40px; }
  .record-head .wrap { text-align: center; }
  .record-head h2 { margin-left: auto; margin-right: auto; text-align: center; }
  .record-foot { padding: 14px 0 100px; }
  .trail { padding: 110px 0 90px; }
  .notes { padding: 40px 0 130px; }
}