/* ===== ABOUT PAGE =====
   Uses the same design tokens as css/styles.css (:root vars, Unbounded/Inter
   fonts, --primary purple, --bg lavender) so this page reads as part of the
   same product rather than a bolted-on landing page. Only page-specific
   layout lives here; shared chrome (topbar, lang switch) stays in
   styles.css and is reused unchanged. */

.about-main{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 70px;
}

/* ----- Hero heading ----- */
.about-hero{
  padding:20px 4px 22px;
}
.about-hero h1{
  font-family:'Unbounded', sans-serif;
  font-weight:800;
  font-size:clamp(30px, 6vw, 46px);
  line-height:1.15;
  color:var(--ink);
}

/* ----- Card -----
   Same visual language as .event-card / .modal-panel elsewhere on the
   site: white surface, soft radius, subtle border+shadow. The ::before
   layer is a placeholder glow standing in for the constellation artwork
   (to be dropped in later as a background-image — see comment below). */
.about-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 24px 60px -24px rgba(75,46,131,0.22), 0 2px 10px rgba(24,24,41,0.04);
  overflow:hidden;
  padding:40px 44px 0;
}
.about-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Placeholder background — soft lavender/pink glow standing in for the
     constellation illustration. Once that asset is ready, swap this whole
     rule for:
       background:url('../assets/constellations.png') no-repeat top right / 60% auto;
     (or add it as a second layer alongside the gradient below). */
  background:
    radial-gradient(480px 320px at 8% -10%, rgba(75,46,131,0.10), transparent 65%),
    radial-gradient(420px 300px at 96% 14%, rgba(255,92,138,0.09), transparent 60%);
}
.about-card > *{ position:relative; z-index:1; }

.about-section{
  padding-bottom:30px;
}
.about-section + .about-section{
  border-top:1px solid var(--line);
  padding-top:30px;
}
.about-section h2{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:24px;
  color:var(--primary);
  margin-bottom:14px;
}
.about-section p{
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.75;
  color:var(--ink-soft);
}
.about-section p + p{ margin-top:14px; }

/* ----- Mascot section: text + image side by side, image anchored to the
   bottom of the card like an illustration standing on the card's edge. ----- */
.about-mascot{
  display:flex;
  align-items:flex-end;
  gap:28px;
}
.about-mascot-text{ flex:1; min-width:0; }
.about-mascot-img{
  flex-shrink:0;
  width:230px;
  align-self:flex-end;
  margin-bottom:-1px; /* let the art touch the card's bottom edge */
}
.about-mascot-img img{
  display:block;
  width:100%;
  height:auto;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width:900px){
  .about-mascot-img{ width:180px; }
}

/* Small tablet / large phone: stack the mascot below the text instead of
   beside it — side-by-side gets cramped once the text column narrows. */
@media (max-width:760px){
  .about-main{ padding:20px 14px 56px; }
  .about-card{ padding:28px 22px 0; border-radius:20px; }
  .about-section, .about-section + .about-section{ padding-bottom:24px; padding-top:24px; }
  .about-section h2{ font-size:20px; }
  .about-section p{ font-size:14px; }
  .about-mascot{
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .about-mascot-img{
    width:180px;
    align-self:center;
    margin-bottom:0;
    margin-top:6px;
  }
}

/* iPhone-width phones */
@media (max-width:480px){
  .about-hero{ padding:12px 2px 16px; }
  .about-card{ padding:22px 16px 0; }
  .about-mascot-img{ width:150px; }
}