/* ============================================================
   about.css — styles unique to about.html
   Shared chrome (orbs, noise, brand, footer, language toggle,
   card glow) lives in base.css, which loads first.
   ============================================================ */

.page-wrap { position:relative;z-index:5;max-width:900px;margin:0 auto;padding:max(30px,5vh) 24px }

.top-bar { display:flex;align-items:center;justify-content:space-between;margin-bottom:max(40px,6vh) }

.back-link { display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);text-decoration:none;font-size:14px;letter-spacing:1px;transition:color .3s }

.back-link .icon { font-size:12px }

.brand { font-size:clamp(16px,2vw,20px);font-weight:700;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(135deg,#fff,#a0a0b0);-webkit-background-clip:text;-webkit-text-fill-color:transparent }

.page-title { font-size:clamp(36px,5vw,56px);font-weight:900;line-height:1.1;margin-bottom:12px;background:linear-gradient(180deg,#fff,#c0c0c8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:fade-up .7s .1s both ease-out }

.page-sub { font-size:clamp(14px,1.4vw,17px);font-weight:300;color:rgba(255,255,255,.5);margin-bottom:max(40px,5vh);animation:fade-up .7s .2s both ease-out }

.bio-card { background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:44px 40px;margin-bottom:28px;animation:fade-up .7s .3s both ease-out }

.bio-card p { font-size:16px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.7);margin-bottom:20px }

.bio-card p:last-child { margin-bottom:0 }

.bio-card a { color:#79bc68;text-decoration:none;border-bottom:1px solid rgba(121,188,104,.3);transition:border-color .3s }

.bio-card a:hover { border-color:#79bc68 }

.section-label { display:block;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#79bc68;margin-bottom:20px }

.skills-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px }

.skill-card { background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;transition:all .35s ease }

.skill-card:hover { background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);transform:translateY(-4px) }

.skill-card .si { font-size:22px;margin-bottom:12px;color:rgba(255,255,255,.5) }

.skill-card h3 { font-size:16px;font-weight:700;margin-bottom:6px }

.skill-card p { font-size:13px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.6 }

.interests { margin-top:28px }

.interest-tags { display:flex;flex-wrap:wrap;gap:10px }

.interest-tags span { font-size:13px;padding:8px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);transition:all .3s }

.interest-tags span:hover { border-color:rgba(255,255,255,.3);color:#fff }

.bio-content { position:relative;overflow:hidden;transition:max-height .6s cubic-bezier(.25,.46,.45,.94) }

.read-more-btn { display:none }

.read-more-icon { font-size:11px;transition:transform .4s cubic-bezier(.25,.46,.45,.94) }

.bio-expanded .read-more-icon { transform:rotate(180deg) }

@keyframes fade-up { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }

@media(max-width:600px) {
  .bio-card { padding:26px 20px }

  /* 15px, not 13 — 13px is below comfortable reading size on a phone.
     text-wrap:pretty stops the ragged rag and one-word last lines. */
  .bio-card p { font-size:15px;line-height:1.75;color:rgba(255,255,255,.75);margin-bottom:16px;text-wrap:pretty }

  .skills-grid { grid-template-columns:1fr }

  /* Clamp to exactly 6 lines (15px x 1.75 x 6) so the cut always lands on a
     line boundary instead of slicing through one. The old gradient overlay is
     gone: it was a hardcoded near-black over a translucent card, so it read as
     a dark smudge, and at 80px tall it obscured half the visible text. The
     Read more button already signals there is more. */
  /* Fade via a mask, not a colour overlay: this fades the text itself to
     transparent, so it blends over the translucent card and the drifting orbs
     without having to guess a matching background colour. */
  .bio-content.collapsed { max-height:157px;-webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);mask-image:linear-gradient(to bottom,#000 74%,transparent) }

  .read-more-btn { display:inline-flex;align-items:center;gap:7px;margin-top:4px;background:none;border:none;color:#79bc68;font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;cursor:pointer;padding:6px 0;transition:color .3s }
  .read-more-btn:hover { color:#9ad48a }

  .skill-card { padding:22px 20px }
  .skill-card p { font-size:14px;color:rgba(255,255,255,.6);line-height:1.65 }
  .interest-tags span { font-size:13px }
}

@media(max-width:600px) { .social-footer{padding:20px 16px}.footer-credit{font-size:11px} }