/* About ---------------------------------------------------------------- */

.about-grid{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,5vw,84px);align-items:center;
  width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(8px,2vh,24px) 0;
}
.about-column{min-height:0;max-height:100%;pointer-events:auto}
.about-column::-webkit-scrollbar{display:none}
.about-column{scrollbar-width:none;overflow-y:auto}

.about-hello{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(26px,2.5vw,36px);line-height:1.15;color:var(--dim);
  margin-bottom:4px;
  opacity:0;animation:rise 1.1s var(--ease) .7s forwards;
}
.about-name{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(36px,3.6vw,54px);line-height:1.08;
  margin-bottom:clamp(12px,2.2vh,22px);
  opacity:0;animation:rise 1.1s var(--ease) .7s forwards,shimmer 7s ease-in-out 1.8s infinite;
}
.about-body{opacity:0;animation:rise 1.1s var(--ease) .95s forwards}
.about-body p{
  font-size:clamp(12px,1.05vw,14px);font-weight:300;line-height:1.72;
  color:var(--dim);max-width:56ch;margin-bottom:clamp(8px,1.5vh,14px);
  text-shadow:0 2px 16px rgba(2,4,10,.85);
}
.about-body p:last-child{margin-bottom:0}
.about-body strong{font-weight:500;color:var(--star)}
.about-body em{font-style:normal;color:var(--gold)}

/* Timeline -------------------------------------------------------------- */

.timeline-heading{animation-delay:1.2s}

.timeline{position:relative;padding-left:30px;margin-top:2px}
.timeline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(159,210,239,.45) 12%,
    rgba(159,210,239,.45) 88%,transparent);
}
.timeline-item{
  position:relative;padding-bottom:clamp(10px,2.1vh,22px);
  opacity:0;animation:rise .9s var(--ease) forwards;
}
.timeline-item:last-child{padding-bottom:0}
.timeline-item:nth-child(1){animation-delay:1.15s}
.timeline-item:nth-child(2){animation-delay:1.30s}
.timeline-item:nth-child(3){animation-delay:1.45s}
.timeline-item:nth-child(4){animation-delay:1.60s}
.timeline-item:nth-child(5){animation-delay:1.75s}
.timeline-item:nth-child(6){animation-delay:1.90s}

.timeline-item::before{
  content:"";position:absolute;left:-29px;top:5px;
  width:9px;height:9px;border-radius:50%;
  background:#0a1020;border:1.5px solid var(--cyan);
  box-shadow:0 0 10px rgba(159,210,239,.5);
}
.timeline-item--current::before{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 14px rgba(245,201,123,.8);
}
.timeline-item--community::before{
  background:var(--violet);border-color:var(--violet);
  box-shadow:0 0 14px rgba(201,171,247,.8);
}

.timeline-date{
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(234,242,255,.45);margin-bottom:3px;
}
.timeline-item--current .timeline-date{color:var(--gold)}
.timeline-item--community .timeline-date{color:var(--violet)}

.timeline-role{
  font-size:clamp(12.5px,1.1vw,14.5px);font-weight:500;
  color:var(--star);line-height:1.35;
}
.timeline-role .org{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:1.06em;color:var(--gold);
}
.timeline-item--community .timeline-role .org{color:var(--violet)}
.timeline-note{
  font-size:clamp(10.5px,.9vw,12px);font-weight:300;line-height:1.55;
  color:rgba(234,242,255,.5);margin-top:2px;max-width:44ch;
}

@media (max-width:900px){
  html,body{overflow:auto}
  .overlay{position:relative;min-height:100%}
  .about-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .about-column{max-height:none;overflow:visible}
}
@media (max-height:640px){
  .about-body p{font-size:11.5px;line-height:1.6;margin-bottom:8px}
  .timeline-note{display:none}
}

/* Day mode ------------------------------------------------------------- */
[data-theme="light"] .about-grid{
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.24));
  border:1px solid rgba(255,255,255,.50);
  border-radius:32px;
  padding:clamp(22px,2.8vw,36px);
  box-shadow:0 20px 48px rgba(18,53,75,.08);
  backdrop-filter:blur(12px) saturate(1.05);
}
[data-theme="light"] .about-column{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  backdrop-filter:none;
}
[data-theme="light"] .about-hello,
[data-theme="light"] .about-body p,
[data-theme="light"] .timeline-date,
[data-theme="light"] .timeline-note{
  text-shadow:none;
}
[data-theme="light"] .about-body p{
  color:rgba(18,53,75,.88);
}
[data-theme="light"] .about-name{
  text-shadow:0 1px 12px rgba(255,255,255,.86),0 0 24px rgba(255,255,255,.65);
}
[data-theme="light"] .timeline-role{
  color:rgba(18,53,75,.92);
}
[data-theme="light"] .timeline::before{
  background:linear-gradient(180deg,transparent,rgba(42,126,166,.5) 12%,
    rgba(42,126,166,.5) 88%,transparent);
}
[data-theme="light"] .timeline-item::before{background:#fff;box-shadow:0 0 0 3px rgba(42,126,166,.12)}
[data-theme="light"] .timeline-item--current::before{
  background:var(--gold);box-shadow:0 0 0 3px rgba(181,118,28,.16);
}
[data-theme="light"] .timeline-item--community::before{
  background:var(--violet);box-shadow:0 0 0 3px rgba(106,92,166,.16);
}
/* These were tuned for a dark sky; over water they need proper ink. */
[data-theme="light"] .timeline-date{color:rgba(18,53,75,.66)}
[data-theme="light"] .timeline-note{color:rgba(18,53,75,.66)}
[data-theme="light"] .about-hello{color:rgba(18,53,75,.78)}

@media (max-width:900px){
  [data-theme="light"] .about-grid{padding:22px}
}