/* about.css — /about personal layer (more celestial substrate) */

.ab-main{ padding:118px 56px 60px; position:relative; z-index:5; min-height:100vh; }

.ab-grid{ max-width:1180px; margin:0 auto; position:relative; }
.ab-head{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.ab-head .callnum{ width:48px; height:48px; font-size:15px; }
.ab-head .ttl{ font-size:15px; letter-spacing:.16em; color:var(--ink-dim); text-transform:lowercase; }

.ab-body{ display:block; margin-top:34px; }
.ab-para{ font-size:18px; line-height:1.78; color:var(--ink); max-width:660px; text-wrap:pretty; }
.ab-para .em{ color:var(--gold-hi); }
.triverse{ margin-top:26px; font-size:12.5px; color:var(--faint); letter-spacing:.02em; display:flex; align-items:baseline; gap:9px; max-width:660px; }
.triverse .tick{ width:7px; height:7px; border-top:1.4px solid var(--gold-dim); border-left:1.4px solid var(--gold-dim); flex:none; position:relative; top:4px; }
.triverse b{ color:var(--ink-dim); font-weight:400; }

/* right column: signature + stamp — pinned lower-right, clear of drawing index */
.ab-side{ position:absolute; right:0; top:42%; display:flex; flex-direction:column; align-items:flex-end; gap:18px; }
.sig{ width:96px; height:96px; border-radius:50%; border:1.4px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--gold-hi);
  letter-spacing:.02em; box-shadow:inset 0 0 22px rgba(212,162,76,0.06); }
.ab-stamp{ font-size:11px; letter-spacing:.12em; color:var(--faint); }

/* signature gesture (drafting annotation near orbital diagram) — anchored to the section */
.sig-gesture{ position:absolute; left:47%; bottom:23%; font-size:12px; color:var(--gold-hi);
  letter-spacing:.04em; pointer-events:none; z-index:5; }
.sig-gesture .tick{ display:inline-block; width:8px; height:8px; border-top:1.4px solid var(--gold-dim);
  border-right:1.4px solid var(--gold-dim); margin-right:8px; }
.sig-gesture .sub{ display:block; color:var(--faint); font-size:10px; margin-top:3px; padding-left:16px; letter-spacing:.06em; }

/* orbital field (mid-layer, drifts; inner group is cursor-reactive) */
.orbital{ position:absolute; left:-30px; bottom:-44px; width:760px; height:520px; z-index:2;
  pointer-events:none; max-width:80vw; }
.orbital svg{ width:100%; height:100%; overflow:visible; }
.orbital .orbit{ fill:none; stroke:var(--line-soft); stroke-width:1; }
.orbital .orbit.dashed{ stroke-dasharray:3 7; stroke:rgba(234,240,251,0.12); }
/* feathered light to share the hero's quality (soft bloom, not hard dots);
   keep the orbit strokes as linework — feather lightly, don't over-inkify the human beat */
.orbital .sun{ fill:var(--gold-hi);
  filter:drop-shadow(0 0 12px var(--gold-glow)) drop-shadow(0 0 34px rgba(212,162,76,0.34)); }
.orbital .sun-glow.g1{ fill:rgba(212,162,76,0.20); }
.orbital .sun-glow.g2{ fill:rgba(212,162,76,0.07); }
.orbital .oplanet{ fill:var(--ink-dim); filter:drop-shadow(0 0 3px rgba(166,190,223,0.5)); }
.orbital .oplanet.bright{ fill:var(--ink); filter:drop-shadow(0 0 7px rgba(234,240,251,0.55)); }
.orbital .oring{ fill:none; stroke:var(--line-soft); stroke-width:1; }
.orbital .dust{ fill:rgba(205,217,240,0.85); }
.orbital .dust.gold{ fill:var(--gold-hi); filter:drop-shadow(0 0 3px var(--gold-glow)); }
.orbital .marker{ fill:none; stroke:var(--line-soft); stroke-width:1; }

@media (max-width:900px){
  .ab-side{ position:static; align-items:flex-start; margin-top:30px; }
}
@media (max-width:760px){
  .ab-main{ padding:64px 18px 40px; }
  .ab-para{ font-size:16px; }
  .orbital{ position:relative; left:auto; bottom:auto; width:100%; height:260px; margin-top:20px; }
  .sig-gesture{ position:relative; left:auto; bottom:auto; margin-top:14px; }
}