.header-inner { gap: 20px; }
.header-inner > .brand { flex-shrink: 0; }
.nav { margin-left: auto; gap: 22px; }
.header-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.language-switch { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #dce5f2; border-radius: 30px; background: #f7f9ff; }
.language-switch a { display: grid; place-items: center; min-width: 35px; min-height: 33px; padding: 5px 8px; font-size: .72rem; line-height: 1; font-weight:600; color: #62728b; border-radius: 22px; }
.language-switch a[aria-current] { color: white; background: var(--blue); box-shadow: 0 2px 7px #2359e82b; }
.language-switch a:hover:not([aria-current]) { background: #e5edfc; color: var(--blue); }
html[lang='en'] .hero h1 { font-size: clamp(2.7rem, 4.7vw, 4.3rem); }
html[lang='en'] .hero-note { max-width: 430px; align-items: flex-start; }
html[lang='en'] .hero-note svg { flex-shrink: 0; margin-top: 3px; }
.hero-preview { width: 366px; padding: 24px 24px 18px; }
.lesson-visual { height: 91px; }
.lesson-panels { min-height: 195px; }
.hero-preview h2 { font-size: 1.12rem; }
.lesson-panel p { font-size: .84rem; }
.preview-heading { font-size: .72rem; }
.lesson-controls button { min-height: 40px; font-size: .73rem; }
@media (max-width: 1150px) and (min-width: 1051px) {
  .nav { gap: 13px; font-size: .8rem; }
  .nav .btn { padding: 10px 12px; }
}
@media (max-width: 1050px) {
  .site-header { height: 78px; }
  .header-tools { margin-left: auto; }
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 78px; left: 0; right: 0; background: #fff; padding: 20px 25px; box-shadow: 0 14px 20px #142c4f12; flex-direction: column; align-items: stretch; gap: 4px; }
  .nav.is-open { display: flex; }
  .nav > a { padding: 12px !important; }
  .nav > a[aria-current='page']:not(.btn):after { display: none; }
  .hero-preview { width: 350px; }
}
@media (max-width: 780px) {
  .hero-inner { padding-top: 40px; }
  .page-intro { padding-top: 40px; }
  .hero-preview { width: min(366px, calc(100% - 48px)); }
  .hero .celestial-system { width: 520px; height: 520px; top: 250px; right: -255px; opacity: .57; }
  .hero .constellation { width: 650px; left: -20px; top: 110px; opacity: .23; }
  .page-intro .celestial-system { right: -335px; top: -120px; opacity: .42; }
  .star-3 { left: 83%; top: 45%; }
  .star-8 { display: none; }
  .star-1 { left: 75%; top: 3%; }
  .star-2 { left: 50%; top: 9%; }
  html[lang='en'] .hero h1 { font-size: 3rem; }
}
@media (max-width: 420px) {
  .header-inner { gap: 9px; }
  .header-tools { gap: 7px; }
  .brand { gap: 8px; }
  .brand-symbol { width: 35px; height: 35px; border-radius: 10px; font-size: 24px; }
  .brand-name { font-size: 1.3rem; }
  .brand-sub { font-size: .49rem; letter-spacing: .1em; }
  .language-switch { gap: 1px; padding: 3px; }
  .language-switch a { min-width: 30px; min-height: 31px; padding: 4px 6px; font-size: .67rem; }
  .menu-toggle { font-size: .8rem; padding: 8px 10px; }
  .hero-preview { width: calc(100% - 36px); padding: 21px 20px 17px; }
  html[lang='en'] .hero h1 { font-size: 2.65rem; }
  .lesson-panels { min-height: 207px; }
}

/* Real submission feedback, without relying on colour alone. */
.form-status:empty{display:none}
.form-status:not(:empty){margin-top:18px;padding:14px 16px;border-radius:10px;background:#f0f4ff;border:1px solid #d4def8;overflow-wrap:anywhere}
.form-status[data-state="success"]{color:#185f43;background:#eefaf3;border-color:#b7dfc7}
.form-status[data-state="error"]{color:#842f30;background:#fff3f1;border-color:#e8bdb8}
.form-status:focus-visible{outline:3px solid #2359e8;outline-offset:3px}
button:disabled{cursor:wait;opacity:.7}
.donation-panel form{margin-top:24px}
.form-honeypot{display:none!important}

/* Keep copy on a solid surface; the photo has its own responsive grid row. */
@media (max-width: 780px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(360px, auto); padding-bottom: 0; }
  .hero-inner { grid-area: 1 / 1; padding: 40px 0 30px; }
  .hero-media { grid-area: 2 / 1; inset: 0; width: 100%; height: 100%; object-position: 65% center; }
  .hero:after { grid-area: 2 / 1; background: linear-gradient(180deg, #f5f8ff 0%, #f5f8ff00 24%); pointer-events: none; }
  .hero-preview { grid-area: 2 / 1; align-self: end; justify-self: end; margin: 30px 24px 42px; }
  .hero-note { align-items: flex-start; }
  .hero-note svg { flex-shrink: 0; margin-top: 3px; }
}
@media (max-width: 420px) {
  .hero-preview { margin-right: 18px; margin-left: 18px; }
}
@media (max-width: 1050px) {
  .nav { max-height: calc(100dvh - 78px); overflow-y: auto; }
}
.table-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.hero-preview:not([open]) { width: max-content; max-width: calc(100% - 36px); padding: 4px 14px; border-radius: 14px; }
.hero-preview:not([open]) .preview-count { display: none; }
.hero-preview:not([open]) .preview-chevron { margin-left: 10px; }
.text-link { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.text-link:hover { text-decoration-thickness: 2px; }
.table-hint { display: none; }
@media (max-width: 600px) {
  .table-hint { display: block; margin-top: 14px; color: var(--muted); font-size: .85rem; }
  .table-hint + .table-wrap { margin-top: 12px; }
}