/* LaAura visual layer. No content, links, metadata, or page structure changes. */
:root {
  --glass-ink: #082a50;
  --glass-line: rgba(255, 255, 255, .74);
  --glass-surface: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(247, 250, 255, .53));
  --glass-shadow: 0 22px 65px rgba(24, 56, 93, .11), inset 0 1px 0 rgba(255, 255, 255, .94);
}

body {
  background-color: #f4f7fb !important;
  background-image: radial-gradient(circle at 10% 8%, rgba(214, 231, 249, .82), transparent 32rem),
    radial-gradient(circle at 92% 28%, rgba(238, 232, 216, .62), transparent 34rem),
    linear-gradient(180deg, #f9fbfd, #eef4fa 68%, #f9faf7) !important;
}

/* Navigation: pale glass lifts the page while blue links retain contrast. */
body > header {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(237, 244, 251, .65)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .79) !important;
  box-shadow: 0 10px 34px rgba(5, 30, 61, .10), inset 0 1px 0 rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(24px) saturate(1.65);
  backdrop-filter: blur(24px) saturate(1.65);
}

body > header a,
body > header nav {
  color: #123b68 !important;
}

body > header a:focus-visible,
a.primary:focus-visible,
a.nav-cta:focus-visible {
  outline: 3px solid #f2d19d;
  outline-offset: 3px;
}

/* Home page: brighter imagery, fine highlights, and airy glass panels. */
.hero .shade {
  background: linear-gradient(180deg, rgba(0, 20, 48, .02), rgba(0, 20, 48, .38)),
    linear-gradient(90deg, rgba(0, 30, 69, .16), transparent 78%) !important;
}

.origin .shade {
  background: linear-gradient(180deg, rgba(0, 20, 48, .01), rgba(0, 24, 57, .46)) !important;
}

.hero-content,
.origin-content {
  isolation: isolate;
}

.hero-content::before,
.origin-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -24px;
  bottom: 46px;
  width: min(770px, calc(100% + 48px));
  height: calc(100% - 20px);
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(6, 36, 75, .07), rgba(12, 49, 87, .025));
  box-shadow: 0 22px 72px rgba(0, 21, 48, .15), inset 0 1px 0 rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  backdrop-filter: blur(3px) saturate(1.1);
  pointer-events: none;
}

.origin-content::before {
  bottom: 37px;
  width: min(720px, calc(100% + 48px));
  height: calc(100% - 48px);
}

.hero .copy,
.origin .copy {
  color: rgba(255, 255, 255, .93) !important;
}

.hero-content,
.origin-content {
  text-shadow: 0 2px 15px rgba(1, 19, 43, .34);
}

.nav-cta,
.primary {
  border: 1px solid rgba(255, 255, 255, .72);
  background: linear-gradient(145deg, rgba(255, 249, 225, .94), rgba(232, 227, 202, .73)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 9px 24px rgba(0, 23, 51, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.intro,
#companion,
.faq {
  position: relative;
}

.story-grid .card,
.faq-item {
  border: 1px solid var(--glass-line) !important;
  border-radius: 27px;
  background: var(--glass-surface) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
}

.story-grid .card .photo {
  border-radius: 25px 25px 0 0;
}

.story-grid .caption {
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(247, 250, 255, .4));
}

.faq-list {
  display: grid;
  gap: 14px;
  border-top: 0 !important;
}

.faq-item {
  padding: 22px 25px !important;
}

.faq-item p,
.caption p {
  color: rgba(7, 26, 52, .72) !important;
}

.pillars {
  background: radial-gradient(circle at 88% 4%, rgba(83, 137, 185, .58), transparent 34rem),
    linear-gradient(145deg, #092e58, #061d3c 78%) !important;
}

.pillar-list {
  display: grid;
  gap: 16px;
  border-top: 0 !important;
}

.pillar {
  padding: 26px 30px !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 25px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 15px 35px rgba(0, 14, 34, .11);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

.pillar p:last-child {
  color: rgba(255, 255, 255, .83) !important;
}

.launch {
  background: radial-gradient(circle at 78% 18%, rgba(88, 143, 189, .3), transparent 34rem),
    linear-gradient(145deg, #092b52, #061a35 80%) !important;
}

/* Facts, guides, articles and the 50-question directory use the same glass language. */
main .note,
main .links,
main .summary,
main .toc,
main .answer,
main .sources,
main blockquote,
main .lead,
main .category,
main > dl,
main > section:not(.hero):not(.origin):not(.pillars):not(.launch):not(.intro):not(.faq):not(#companion):not(.answer) {
  border: 1px solid var(--glass-line) !important;
  border-radius: 22px !important;
  background: var(--glass-surface) !important;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

main .note,
main blockquote,
main .lead {
  border-left: 4px solid #c4a46d !important;
}

main > dl,
main > section:not(.hero):not(.origin):not(.pillars):not(.launch):not(.intro):not(.faq):not(#companion):not(.answer) {
  margin: 20px 0;
  padding: 24px 28px !important;
}

main > section:not(.hero):not(.origin):not(.pillars):not(.launch):not(.intro):not(.faq):not(#companion):not(.answer) h2:first-child {
  margin-top: 0;
}

main img.hero:not([class~="bg"]) {
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
}

.answer:target {
  outline-offset: 3px;
}

@media (max-width: 719px) {
  .hero-content::before,
  .origin-content::before {
    left: -12px;
    bottom: 34px;
    width: calc(100% + 24px);
    height: calc(100% - 20px);
    border-radius: 24px;
  }

  .origin-content::before {
    bottom: 28px;
    height: calc(100% - 38px);
  }

  .faq-item,
  .pillar {
    padding: 20px !important;
  }

  main .note,
  main .links,
  main .summary,
  main .toc,
  main .answer,
  main .sources,
  main blockquote,
  main .lead,
  main > dl,
  main > section:not(.hero):not(.origin):not(.pillars):not(.launch):not(.intro):not(.faq):not(#companion):not(.answer) {
    border-radius: 18px !important;
  }

  main > dl,
  main > section:not(.hero):not(.origin):not(.pillars):not(.launch):not(.intro):not(.faq):not(#companion):not(.answer) {
    padding: 20px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-content::before,
  .origin-content::before,
  .story-grid .card,
  .faq-item,
  main .note,
  main .links,
  main .summary,
  main .toc,
  main .answer,
  main .sources,
  main blockquote,
  main .lead {
    background: rgba(249, 251, 253, .94) !important;
  }

  .hero-content::before,
  .origin-content::before {
    background: rgba(5, 32, 68, .78) !important;
  }
}
@keyframes lab{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}
.hero .bg,.origin .bg,.photo img{animation:lab 10s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){img.bg,.photo img{animation:none!important}}