/* Blue night-sky theme. The original layout remains in styles.css. */
:root {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --paper: #f3f6fc;
  --ink: #263b5c;
  --muted: #4c617d;
  --olive: #31588b;
  --olive-dark: #234473;
  --line: #d6e0ee;
  --sand: #e8eef8;
  --night: #10233e;
  --starlight: #c7dbfb;
  --gold: #dfbb7b;
}
h1, h2, h3 { font-weight: 500; }
body { font-weight: 500; }
.page-panel h2, .about-lead, .about-copy blockquote { font-weight: 600; }
.page-panel h3 { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -.25px; }
h1 em, h2 em { font-weight: inherit; }
h2 { letter-spacing: -1px; }
::selection { background: #c8d9f3; color: #183251; }
h2 em { color: #5d7fb0; }
.nav a:hover, .footer a:hover { color: #779bd1; }
.text-link, .header-contact { border-color: #9aafd0; }
.dot { background: #8db5f4; }
.request-number, .request-symbol, .steps article > span,
.session-icon, summary > span { color: #6a84aa; }
.session-card { border-color: #d1dded; }
.session-facts { border-color: #ccd8ea; }
.education-meta { color: #486b9b; }
.education-item .education-document { color: #4c617d; }

/* The user's celestial illustration, with a dark veil for readable text. */
.header-sky { background: #0c1b30; color: #edf3fd; }
.header-sky .header { height: 88px; }
.header-sky .brand small { color: #b5c5dc; }
.header-sky .nav { color: #cbd8eb; }
.header-sky .header-contact { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 44px; padding: 10px 22px; border: 1px solid var(--gold); border-radius: 999px; color: #e7c890; }
.header-sky .header-contact span { margin-left: 0; }
.header-sky .header-contact:hover { background: #dfbb7b18; }
.header-sky .header-contact:focus-visible { outline-color: var(--gold); }
.header-sky .nav a:hover { color: #fff; }
.night-hero-sky {
  position: relative;
  overflow: hidden;
  color: #f2f6ff;
  background: #10233e;
}
.night-hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #10233e66, #10233e12 65%, #10233e40),
    url("assets/night-sky-refined.png") center / cover no-repeat;
}
/* The hero mask brightens the actual painted stars, preserving their texture. */
.night-hero-sky::after, .about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
}
.night-hero-sky::after {
  background: url("assets/night-sky-refined.png") center / cover no-repeat;
  -webkit-mask: url("assets/hero-star-glints.svg") center / cover no-repeat;
  mask: url("assets/hero-star-glints.svg") center / cover no-repeat;
  mix-blend-mode: screen;
  filter: brightness(1.5);
}
.hero {
  position: relative;
  z-index: 1;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  min-height: 750px;
  align-items: center;
  align-content: start;
  padding-top: 36px;
  padding-bottom: 30px;
}
.hero-copy { padding-top: 10px; }
.hero .eyebrow { color: #c3d5ee; margin-bottom: 24px; }
.hero .night-quote {
  font-size: clamp(42px, 4.55vw, 59px);
  line-height: 1.14;
  letter-spacing: -.8px;
  margin: 0 0 27px;
}
.quote-intro {
  display: block;
  font-size: 24px;
  font-style: italic;
  letter-spacing: 0;
  color: #c3d3ec;
  margin-bottom: 12px;
}
.night-quote em { color: #bdd5fc; }
.night-quote > em { white-space: nowrap; }
.quote-continuation {
  display: block;
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.4;
  letter-spacing: -.3px;
  margin-top: 17px;
  color: #d5e1f4;
}
.hero-description { color: #dce7f7; max-width: 410px; }
.hero-support, .hero-details, .scroll-note { color: #b4c7e4; }
.hero .button { background: var(--gold); color: #142d4e; font-weight: 500; }
.hero .button:hover { background: #ebcb92; }
.hero .hero-booking { gap: 12px; padding-left: 18px; padding-right: 18px; }
.telegram-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.session-card .payment-note { font-size: 12px; line-height: 1.8; color: var(--muted); margin-bottom: 24px; }
.hero-messengers { display: flex; gap: 12px; margin-top: 17px; color: #e4edfc; }
.hero-messengers a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #a4b9d480; border-radius: 8px; background: #10233e66; transition: background .2s; }
.hero-messengers a:hover { background: #31588b; }
.hero-messengers svg { width: 25px; height: 25px; }
.hero-art.portrait-art { width: 100%; max-width: 416px; padding: 18px 18px 0; margin: 0; isolation: isolate; background: #fcfbf7; border: 1px solid #e7e3d9; border-radius: 2px; box-shadow: 0 18px 38px #06132644, 0 2px 6px #06132626; transform: rotate(2deg); }
.hero-portrait { mask-image: none; -webkit-mask-image: none; background: #dfe8f2; }
.portrait-caption { margin: 0; padding: 22px 8px 30px; color: #263b5c; text-align: center; font-family: var(--sans); font-size: 20px; font-weight: 700; font-style: normal; line-height: 1.35; letter-spacing: -.3px; }
.portrait-caption span { display: block; margin-top: 7px; font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.hero-details { display: table; padding: 4px 8px; background: #10233ecc; border-radius: 3px; color: #e2ecfc; }
.scroll-note { margin-top: 4px; width: fit-content; padding: 5px 10px; background: #10233ecc; border-radius: 3px; color: #e2ecfc; }
.header-sky a:focus-visible, .night-hero-sky a:focus-visible { outline-color: #c7ddff; }

/* Quiet light-blue reading sections between the darker sky panels. */
.illustrated-heading > p:not(.eyebrow) { font-size: 14px; color: var(--muted); line-height: 1.8; }
.section-illustration { display: block; width: 220px; max-width: 100%; height: auto; margin-top: 20px; }
.about {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(#1c365ae6, #1c365aeb),
    url("assets/night-sky-art.jpg") center / cover no-repeat,
    #1c365a;
}
.about .eyebrow { color: #c6d7ef; }
.about::before { background: url("assets/about-star-glints.svg") center / cover no-repeat; }
.about-layout { position: relative; z-index: 1; }
.about h2 em { color: #b9d2f7; }
.about-tag { color: #d4e2f5; border-color: #96b4df66; }
.about-flower { color: #b6d4ff; opacity: .85; }
.about-copy > p:not(.about-lead) { color: #d3e0f2; }
.about-copy blockquote { color: #e4eeff; border-color: #94b6e3; }
.light-link { color: #e7f0ff; border-color: #8caedb; }
.about-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px; }
.contact { background: #e5edf9; }
.contact-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 19% 29%, #7f9dc6 1.4px, transparent 2px),
    radial-gradient(circle at 29% 75%, #7f9dc6 1px, transparent 1.7px),
    radial-gradient(circle at 78% 19%, #7f9dc6 1px, transparent 1.7px),
    radial-gradient(circle at 85% 64%, #7f9dc6 1.4px, transparent 2px);
}
.contact p:not(.eyebrow) { color: #576e91; }
.contact-orbit { border-color: #bfcee6; }
.contact-actions { flex-wrap: wrap; gap: 16px; }
.contact-actions .button { min-width: 215px; }
.button-outline { background: transparent; color: var(--ink); border: 1px solid #7997bf; }
.button-outline:hover { background: #d5e3f7; }
.contact-profiles { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; margin-top: 28px; }
.contact-profiles .text-link { gap: 14px; }
.telegram-invitation { position: relative; }
.button .button-star { position: absolute; top: -17px; left: 70%; width: 38px; height: 38px; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 1px #10233e33); }
.button-star svg { display: block; width: 100%; height: 100%; }
.footer-socials { flex-wrap: wrap; gap: 12px 20px; }
.footer-socials, .footer-note { padding-left: 0; }

/* Comfortable reading weight and size throughout the information sections. */
.section-heading > p:not(.eyebrow), .request p, .education-item p,
.steps p, .faq-list details p, .session-facts p { font-size: 14px; }
.about-copy > p:not(.about-lead), .contact p:not(.eyebrow) { font-size: 14px; }
.education-item .education-institute { font-size: 13px; }
.education-item .education-document, .education-meta, .about-tag, .card-note { font-size: 12px; }
.session-card .payment-note { font-size: 13px; }
.faq-list summary { font-size: 14px; font-weight: 600; }
.text-link { font-size: 13px; }

/* Let the page's bottom edge reach the viewport midpoint before holding it.
   Only then does the following page cover it. Heights remain content-driven.
   Transforms do not change the view timeline's layout measurements. */
#main { isolation: isolate; overflow: clip; }
.page-panel { position: relative; z-index: 0; }
.page-paper { background: var(--paper); }
.footer { position: relative; background: var(--paper); }

/* Unsupported browsers and reduced motion retain the ordinary document flow. */
@media (prefers-reduced-motion: no-preference) {
  .night-hero-sky::after { animation: hero-star-breathe 8s ease-in-out -2s infinite; }
  .about::before { animation: sky-glimmer 13s ease-in-out -8s infinite; }
  .about-flower g { animation: constellation-glimmer 11s ease-in-out -5s infinite; }
  .button-star { animation: telegram-star-fall 7s linear 1s infinite; }
  @supports (animation-timeline: view()) and (animation-range: exit calc(100% - 50dvh) exit 100%) and (transform: translateY(50dvh)) {
    .page-panel:not(:last-child) {
      animation: page-hold 1s linear both;
      animation-timeline: view(block 0px);
      animation-range: exit calc(100% - 50dvh) exit 100%;
    }
    .page-panel + .page-panel { box-shadow: 0 -14px 32px #071b2f1f; }
  }
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%) {
    .section-heading, .request, .about-heading, .about-copy, .education-item,
    .session-card, .steps article, .faq-list, .contact h2, .contact-actions {
      animation: section-enter 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
}
@keyframes hero-star-breathe {
  0%, 100% { opacity: .08; }
  45% { opacity: .6; }
  70% { opacity: .22; }
}
@keyframes sky-glimmer {
  0%, 100% { opacity: .08; }
  45% { opacity: .22; }
  70% { opacity: .12; }
}
@keyframes constellation-glimmer {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}
@keyframes telegram-star-fall {
  0% { opacity: 0; transform: translate(58px, -160px) rotate(-35deg) scale(.65); }
  3% { opacity: 1; }
  18% { opacity: 1; transform: translate(0, -4px) rotate(12deg) scale(1); }
  22% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.85); }
  28%, 100% { opacity: 0; transform: translate(0, 2px) rotate(0) scale(.2); }
}
@keyframes page-hold {
  from { transform: translateY(0); }
  to { transform: translateY(50dvh); }
}
@keyframes section-enter {
  from { opacity: .15; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 1050px) {
  .hero { gap: 27px; min-height: 700px; padding-top: 30px; }
  .hero .night-quote { letter-spacing: -1.1px; }
  .hero-art.portrait-art { margin-top: 0; }
}
@media (max-width: 760px) {
  .header-sky .header { height: 72px; }
  .header-sky .header-contact { gap: 10px; min-height: 42px; padding: 9px 14px; }
  .illustrated-heading > p:not(.eyebrow) { font-size: 14px; }
  .section-illustration { width: 150px; margin-top: 14px; }
  .night-hero-sky::after { background-position: 35% center; -webkit-mask-position: 35% center; mask-position: 35% center; }
  .night-hero-sky::before {
    background-image: linear-gradient(180deg, #10233e55, #10233e44), url("assets/night-sky-refined.png");
    background-position: 35% center;
  }
  .hero { grid-template-columns: 1fr; gap: 21px; min-height: auto; padding-top: 25px; }
  .hero-copy { padding-top: 6px; }
  .hero .night-quote { font-size: clamp(32px, 8.8vw, 40px); line-height: 1.15; letter-spacing: -.3px; margin-bottom: 23px; }
  .quote-intro { font-size: 23px; margin-bottom: 12px; }
  .quote-continuation { font-size: 23px; line-height: 1.42; margin-top: 16px; }
  .hero .eyebrow { margin-bottom: 21px; }
  .hero-description { font-size: 14px; max-width: 360px; }
  .hero-support { font-size: 12px; }
  .hero-art.portrait-art { margin-top: 10px; max-width: 340px; }
  .scroll-note { margin-top: -5px; padding-bottom: 5px; }
}
@media (max-width: 360px) {
  .hero .night-quote { font-size: 31px; }
  .quote-continuation { font-size: 21px; }
}