/* ============================================================
   PROFILE SCREEN, the person behind the work.
   Loads AFTER mobile.css (tokens, .glass, .chip, typography).
   Same frosted-glass / orange-on-black language as every other
   screen; nothing here touches the homepage or desktop.
   ============================================================ */
.pfscreen{min-height:100svh;min-height:100dvh;overflow-x:hidden;
  background:var(--black);position:relative;isolation:isolate}
.pf__atmos{position:fixed;inset:-14%;z-index:0;pointer-events:none;filter:blur(46px) saturate(1.1);
  background:
    radial-gradient(92% 62% at 50% 0%,  rgba(255,90,31,.20) 0%, transparent 64%),
    radial-gradient(80% 56% at 96% 46%, rgba(150,90,52,.16) 0%, transparent 68%),
    radial-gradient(86% 60% at 4% 98%,  rgba(90,62,44,.22) 0%, transparent 70%)}

/* ============ TOP BAR ============ */
.ubar{position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 12px}
.ubar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:var(--nav,0);transition:opacity .5s var(--ease)}
.ubar > *{pointer-events:auto;position:relative}
.ubar__back,.ubar__home{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:14px;color:var(--white);flex:none;
  transition:transform .4s var(--ease)}
.ubar__back:active,.ubar__home:active{transform:scale(.94)}
.ubar__label{font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,244,240,.75)}

/* ============ HERO ============
   The portrait keeps its true 3:4 ratio, the full frame, never cropped. */
.pf__hero{position:relative;z-index:2}
.pf__portrait{position:relative;width:100%;aspect-ratio:1200/1600;background:rgba(128,128,128,.06)}
.pf__portrait img{width:100%;height:100%;object-fit:contain;display:block}
.pf__portrait-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,7,.66) 0%,rgba(7,7,7,.06) 24%,
    rgba(7,7,7,0) 44%,rgba(7,7,7,.68) 80%,rgba(7,7,7,.97) 100%)}
.pf__intro{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) clamp(22px,4vh,36px)}
.pf__status{display:inline-flex;align-items:center;gap:.55em;font-size:.56rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.8rem}
.pf__status i{width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 9px 1px rgba(255,90,31,.7);animation:pfpulse 2.6s var(--ease) infinite}
@keyframes pfpulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.5)}70%{box-shadow:0 0 0 9px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
.pf__name{font-size:clamp(2.1rem,10.5vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:.98}
.pf__name em{color:var(--orange);font-weight:500}
.pf__role{margin-top:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* ============ SECTIONS ============ */
.pf{position:relative;z-index:2}
.pf__sec{padding:clamp(42px,8vh,78px) var(--pad) 0}
.pf__sec .chip{display:inline-block;padding:.5em .9em;border-radius:20px;font-size:.58rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white);margin-bottom:1rem}
.pf__sec h2{font-size:clamp(1.6rem,7.6vw,2.3rem);font-weight:800;letter-spacing:-.04em;line-height:1.06}
.pf__sec h2 em{color:var(--orange);font-weight:500}
.pf__sec p{margin-top:1.15rem;font-size:.95rem;line-height:1.68;color:var(--dim);max-width:46ch}

/* ---- experience ---- */
.pf__roles{list-style:none;margin-top:1.6rem;display:flex;flex-direction:column;gap:.8rem}
.pf__role-card{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.2rem;border-radius:22px}
.pf__role-n{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--orange);
  font-variant-numeric:tabular-nums;padding-top:.25em}
.pf__role-card h3{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pf__role-card p{margin-top:.5rem;font-size:.86rem;line-height:1.62;color:var(--dim);max-width:none}

/* ---- skills ---- */
.pf__skills{list-style:none;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.pf__skills li{padding:.6em 1em;border-radius:100px;font-size:.75rem;font-weight:500;color:var(--white);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bd)}
.pf__skills-note{font-size:.8rem !important;color:var(--faint) !important}
.pf__skills-note a{color:var(--orange);font-weight:600;
  border-bottom:1px solid rgba(255,90,31,.35);padding-bottom:1px}

/* ============ CONTACT ============ */
.pf__cta{position:relative;z-index:2;margin-top:clamp(52px,10vh,96px);
  background:var(--orange);color:#0a0a0a;overflow:hidden;
  padding:clamp(56px,11vh,104px) var(--pad) calc(env(safe-area-inset-bottom) + 36px)}
.pf__cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.16) 0%,transparent 62%)}
.pf__cta > *{position:relative;z-index:1}
.pf__cta-eyebrow{display:block;font-size:.58rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(10,10,10,.62);margin-bottom:1.2rem}
.pf__cta h2{font-size:clamp(2rem,10vw,3.1rem);font-weight:800;letter-spacing:-.045em;
  line-height:.98;color:#0a0a0a}
.pf__cta h2 em{font-weight:500;font-style:italic}
.pf__cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem}
.pf__btn-solid{display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.4em;border-radius:20px;
  background:rgba(16,12,9,.2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(20,14,9,.24);box-shadow:0 12px 30px -20px rgba(0,0,0,.4);
  color:#0a0a0a;font-weight:600;font-size:.84rem;white-space:nowrap;transition:transform .4s var(--ease)}
.pf__btn-solid::before{content:"";width:7px;height:7px;border-radius:50%;background:#0a0a0a;flex:none}
.pf__btn-glass{display:inline-flex;align-items:center;padding:.9em 1.3em;border-radius:20px;
  --glass-bg:rgba(16,12,9,.12);--glass-bd:rgba(20,14,9,.22);
  color:#0a0a0a;font-weight:600;font-size:.84rem;white-space:nowrap;transition:transform .4s var(--ease)}
.pf__btn-solid:active,.pf__btn-glass:active{transform:scale(.96)}

.pf__foot{margin-top:clamp(48px,9vh,84px);border-top:1px solid rgba(10,10,10,.2);padding-top:2rem;
  display:flex;flex-direction:column;gap:1.4rem}
.pf__eyebrow{display:block;font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(10,10,10,.6);margin-bottom:.45em}
.pf__mail{font-weight:600;font-size:1rem;color:#0a0a0a;
  border-bottom:1px solid rgba(10,10,10,.3);padding-bottom:2px;word-break:break-word}
.pf__social{display:flex;flex-direction:column;gap:.5em}
.pf__social a{display:inline-flex;align-items:center;gap:.4em;width:max-content;
  font-weight:600;font-size:.98rem;color:#0a0a0a}
.pf__social a i{font-style:normal;font-size:.82em;opacity:.65}
.pf__social a:active{opacity:.65}
.pf__copy{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.65rem;letter-spacing:.04em;color:rgba(10,10,10,.6)}

/* ============ REVEAL ============
   filter is reset explicitly: mobile.css also defines .reveal (with a 4px
   blur) and loads first, so leaving it unset here would make this screen
   depend on that rule's .in state to un-blur. Self-contained instead. */
.reveal{opacity:0;transform:translateY(26px);filter:none;
  transition:opacity .9s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}

@media (min-width:560px){
  .pf__sec p{max-width:56ch}
  /* cap the portrait rather than re-cropping it, a full-width 3:4 frame is
     enormous on a tablet, but changing the ratio would cut the photo. */
  .pf__portrait{max-width:520px;margin:0 auto}
  .pf__intro,.pf__portrait-scrim{max-width:520px;margin-left:auto;margin-right:auto}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pf__status i{animation:none}
}