/* ============================================================================
   about.css — full-screen "About / CV" page overlay.  OWNED by the "about" agent.
   Dark, cinematic, editorial. Vanilla; open/close driven by about.js.
   Opened from the top nav (not a tile-morph): fades/slides in over a scrim.
   Shares the detail view's glass + type language (see detail.css).
   ========================================================================== */
#about-root:empty{ display:none; }

/* ---- scroll lock while open (page behind is fixed) ---- */
body.about-lock{ overflow:hidden; }

/* ---- host: fixed, full-screen; sits below the chrome (header/nav z:130) ---- */
#about-root{ position:fixed; inset:0; z-index:101; }
#about-root .about-scrim,
#about-root .about-close,
#about-root .about-panel{ pointer-events:auto; }

/* ---- scrim / backdrop (click to close) ---- */
.about-scrim{ position:fixed; inset:0; z-index:100; background:#000000cc;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; }

/* ---- glass token (shared by close button) ---- */
.about-glass{ border:0; color:#fff; cursor:pointer; background:#000000bf;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px #ffffff33 inset;
  transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94), opacity .3s cubic-bezier(.25,.46,.45,.94), transform .3s cubic-bezier(.25,.46,.45,.94); }
.about-glass:hover{ box-shadow:0 0 13px #b2b2b2 inset; }
.about-glass:focus-visible{ outline:0; box-shadow:0 0 0 1px #fff inset, 0 0 13px #b2b2b2 inset; }

/* ---- close (top-right) ---- */
.about-close{ position:fixed; top:20px; right:24px; z-index:103;
  width:38px; height:38px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; }
.about-close svg{ display:block; }

/* ---- panel ---- */
.about-panel{ position:fixed; z-index:101; inset:0;
  /* leave the top clear so nothing hides under the fixed header/nav (z:130) */
  padding:96px 0 0;
  display:flex; flex-direction:column;
  background:#0c0c0c;
  box-shadow:0 0 0 1px #ffffff1f inset, 0 60px 140px -40px #000; }
.about-panel:focus{ outline:0; }

/* scrollable content region (page can be tall) */
.about-scroll{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0;
  scrollbar-width:thin; scrollbar-color:#ffffff33 transparent; }
.about-scroll::-webkit-scrollbar{ width:6px; }
.about-scroll::-webkit-scrollbar-thumb{ background:#ffffff22; border-radius:6px; }

/* centered editorial column */
.about-inner{ width:min(1120px, 92vw); margin:0 auto;
  padding:40px 0 96px; }

/* ============================ HEADER BLOCK ============================ */
.about-header{ display:grid; grid-template-columns:auto 1fr; gap:34px;
  align-items:center; padding-bottom:40px; margin-bottom:44px;
  border-bottom:1px solid #ffffff14; }

.about-photo{ position:relative; width:150px; height:150px; border-radius:50%;
  overflow:hidden; flex:0 0 auto; background:#0a0a0a;
  box-shadow:0 0 0 1px #ffffff1f inset, 0 20px 50px -20px #000; }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-select:none; user-select:none; }

.about-eyebrow{ display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; opacity:.5; }
.about-name{ font-size:clamp(34px,4.4vw,58px); font-weight:600; line-height:1.0;
  letter-spacing:-.015em; margin:12px 0 0; }
.about-role{ font-size:17px; font-weight:500; line-height:1.35; opacity:.72;
  margin:14px 0 0; }
.about-location{ display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; opacity:.5; margin:10px 0 0; }
.about-location svg{ display:block; opacity:.8; }

/* ============================ BIO ============================ */
.about-bio{ font-size:clamp(15px,1.5vw,18px); font-weight:500; line-height:1.62;
  opacity:.82; max-width:60ch; margin-bottom:52px; }

/* ============================ TWO-COLUMN BODY ============================ */
.about-body{ display:grid; grid-template-columns:1fr 1fr; gap:52px 56px; }

.about-section{ min-width:0; }
.about-section.about-span{ grid-column:1 / -1; }

.about-label{ display:block; font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; opacity:.42; margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid #ffffff14; }

/* ---- timeline (education + experience share this) ---- */
.about-timeline{ list-style:none; display:flex; flex-direction:column; gap:26px; }
.about-item{ position:relative; padding-left:20px; }
.about-item::before{ content:""; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%; background:#fff; opacity:.5; }
.about-item::after{ content:""; position:absolute; left:2px; top:16px; bottom:-24px;
  width:1px; background:#ffffff14; }
.about-item:last-child::after{ display:none; }

.about-item-head{ font-size:16px; font-weight:600; line-height:1.25;
  letter-spacing:-.005em; }
.about-item-sub{ font-size:14px; font-weight:500; line-height:1.4; opacity:.72;
  margin-top:4px; }
.about-item-period{ display:block; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; opacity:.45; margin-top:6px; }
.about-item-note{ font-size:13px; font-weight:500; line-height:1.55; opacity:.6;
  margin-top:8px; max-width:52ch; }

/* ---- skills chips ---- */
.about-skills{ display:flex; flex-wrap:wrap; gap:9px; }
.about-chip{ font-size:12.5px; font-weight:500; line-height:1; color:#fff;
  padding:9px 14px; border-radius:6px; white-space:nowrap;
  background:#000000bf; box-shadow:0 0 0 1px #ffffff2b inset;
  transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94); }
.about-chip:hover{ box-shadow:0 0 13px #b2b2b2 inset; }

/* ---- achievements: two columns inside the full-width section; no connector line ---- */
.about-ach{ display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; }
.about-ach .about-item::after{ display:none; }

/* ---- languages ---- */
.about-langs{ list-style:none; }
.about-langs li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 0; border-bottom:1px solid #ffffff12; }
.about-langs li:first-child{ padding-top:0; }
.about-langs li:last-child{ border-bottom:0; }
.about-lang-name{ font-size:15px; font-weight:600; }
.about-lang-level{ font-size:13px; font-weight:500; opacity:.6; }

/* ---- contact rows ---- */
.about-contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px 28px; }
.about-contact .about-field{ min-width:0; }
.about-field-label{ display:block; font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; opacity:.42; margin-bottom:6px; }
.about-field-val{ font-size:14px; font-weight:500; opacity:.9; word-break:break-word; }
a.about-field-val{ color:#fff; text-decoration:none;
  box-shadow:inset 0 -1px 0 #ffffff33;
  transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94), opacity .3s cubic-bezier(.25,.46,.45,.94); }
a.about-field-val:hover{ box-shadow:inset 0 -1px 0 #fff; opacity:1; }
a.about-field-val:focus-visible{ outline:0; box-shadow:inset 0 -2px 0 #fff; }

/* ============================ OPEN / CLOSE TRANSITION ============================ */
/* start states — about.js toggles `is-in` on the next frame to animate in */
.about-scrim{ opacity:0; transition:opacity .45s cubic-bezier(.25,.46,.45,.94); }
.about-close{ opacity:0; transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94),
  opacity .3s cubic-bezier(.25,.46,.45,.94) .18s, transform .3s cubic-bezier(.25,.46,.45,.94); }
.about-panel{ opacity:0; transform:translateY(24px);
  transition:opacity .45s cubic-bezier(.25,.46,.45,.94),
             transform .45s cubic-bezier(.25,.46,.45,.94); }

#about-root.is-in .about-scrim{ opacity:1; }
#about-root.is-in .about-close{ opacity:1; }
#about-root.is-in .about-panel{ opacity:1; transform:translateY(0); }

/* closing */
#about-root.is-out .about-scrim{ opacity:0; }
#about-root.is-out .about-close{ opacity:0; transition:opacity .28s cubic-bezier(.25,.46,.45,.94); }
#about-root.is-out .about-panel{ opacity:0; transform:translateY(24px); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:800px){
  .about-panel{ padding-top:88px; }
  .about-inner{ padding:28px 0 72px; }
  .about-header{ grid-template-columns:1fr; gap:22px; text-align:left;
    padding-bottom:30px; margin-bottom:34px; }
  .about-photo{ width:112px; height:112px; }
  .about-body{ grid-template-columns:1fr; gap:44px; }
  .about-ach{ grid-template-columns:1fr; }
  .about-bio{ margin-bottom:40px; }
  .about-close{ top:14px; right:16px; }
}
@media (max-width:460px){
  .about-contact{ grid-template-columns:1fr; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  .about-scrim,
  .about-close,
  .about-panel{ transition:opacity .2s linear !important; transform:none !important; }
  #about-root.is-in .about-panel,
  #about-root.is-out .about-panel{ transform:none !important; }
  .about-glass, .about-chip, a.about-field-val{ transition:box-shadow .2s linear, opacity .2s linear; }
}