/* Add AFTER style.css */
.ach-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ach .cap{padding-top:3rem}
.ach .cap b{text-wrap:balance}

/* Lightbox with previous / next */
.lightbox{grid-template-columns:auto minmax(0,860px) auto;gap:.8rem;justify-content:center}
.lb-card{width:100%}
.lb-nav{width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--accent);background:rgba(0,0,0,.75);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .2s,transform .15s}
.lb-nav:hover{background:var(--btn)}
.lb-nav:active{transform:scale(.92)}
.lb-nav[disabled]{opacity:.3;cursor:default;pointer-events:none}
.lb-count{display:block;margin-top:.6rem;font-size:.72rem;color:var(--dim)}
@media (prefers-reduced-motion:no-preference){
  @keyframes lbin{from{opacity:0;transform:scale(.97)}}
  .lightbox:not([hidden]) .lb-card{animation:lbin .22s ease-out}
}
@media (max-width:820px){
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto;align-content:center}
  .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:2.4rem;height:2.4rem}
  .lb-prev{left:.4rem}.lb-next{right:.4rem}
}


/* ===== GLOWING NAVIGATION ===== */
header{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand{text-shadow:0 0 16px rgba(79,155,255,.6)}
nav a{position:relative;border-bottom:0;padding:.35rem .1rem;transition:color .25s,text-shadow .25s}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 12px 2px rgba(79,155,255,.7);transform:scaleX(0);transition:transform .3s}
nav a:hover{color:#cfe6ff;text-shadow:0 0 12px rgba(79,155,255,.95)}
nav a:hover::after{transform:scaleX(.6)}
nav a[aria-current="page"]{color:#fff;border-color:transparent;text-shadow:0 0 14px rgba(79,155,255,1)}
nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  @keyframes navglow{50%{box-shadow:0 0 20px 4px rgba(79,155,255,.95)}}
  nav a[aria-current="page"]::after{animation:navglow 2.6s ease-in-out infinite}
}

/* ===== HOME ===== */
.hello{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;font-size:.78rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 14px rgba(79,155,255,.7)}
.hello::before{content:"";width:2.4rem;height:1px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.hero h1{margin-bottom:1.2rem}
/* Photo with a moonlit halo that matches the portrait */
.photo-wrap{position:relative;align-self:center;justify-self:center;display:grid;place-items:center}
.halo{position:absolute;width:150%;aspect-ratio:1;max-width:760px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 42% 38%,rgba(170,200,255,.26),rgba(37,99,235,.14) 45%,transparent 70%);filter:blur(10px);pointer-events:none}
.photo-wrap .photo{position:relative;z-index:1}
.photo img{object-position:50% 20%}
@media (prefers-reduced-motion:no-preference){
  @keyframes breathe{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.06)}}
  @keyframes floaty{50%{transform:translateY(-8px)}}
  @keyframes pulse{50%{box-shadow:0 0 62px rgba(37,99,235,.6)}}
  .halo{animation:breathe 7s ease-in-out infinite}
  .photo-wrap .photo{animation:floaty 8s ease-in-out infinite,pulse 5s ease-in-out infinite}
}
@media (max-width:820px){
  .photo-wrap{order:-1;height:100%;min-height:0;padding-top:.6rem}
  .photo-wrap .photo{height:100%}
  .halo{width:120%}
  .hello{justify-content:center;margin-bottom:.4rem;font-size:.68rem}
  .hello::before{display:none}
    }

/* ===== PERSONAL INFORMATION: centered and organized ===== */
#personal{max-width:1100px}
#personal .pi{display:grid;gap:1.1rem;justify-items:center;text-align:center;width:100%}
#personal .pi h2{font-size:clamp(1.6rem,3.6vw,2.6rem);margin:0}
.profile{display:flex;align-items:center;gap:1.3rem;padding:.9rem 1.8rem .9rem .9rem;border:1px solid var(--edge);border-radius:999px;background:rgba(0,0,0,.72);text-align:left;box-shadow:0 0 30px rgba(37,99,235,.18)}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--accent);box-shadow:0 0 22px rgba(79,155,255,.6)}
.who h3{font-family:'Unbounded',sans-serif;font-weight:500;font-size:1.15rem;line-height:1.25;margin-bottom:.3rem}
.who p{font-size:.95rem}
.who .muted{color:var(--dim);font-size:.88rem}
.pi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;width:100%;text-align:left}
.pcard{position:relative;padding:1.2rem 1.3rem;border:1px solid var(--edge);border-radius:14px;background:rgba(0,0,0,.72);transition:border-color .2s,transform .2s,box-shadow .25s}
.pcard::before{content:"";position:absolute;left:1.3rem;right:1.3rem;top:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.pcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 28px rgba(37,99,235,.3)}
.pcard h4{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-family:'Unbounded',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pcard h4 svg{width:20px;height:20px;flex:none}
.pcard dl{display:grid;gap:.75rem}
.pcard dt{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pcard dd{margin-top:.1rem;font-size:.98rem;line-height:1.4;overflow-wrap:anywhere}
.pcard a:hover{color:var(--accent)}
.mini{margin:.2rem 0 .45rem;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.chips span{padding:.3rem .7rem;border:1px solid var(--edge);border-radius:999px;background:rgba(37,99,235,.16);font-size:.82rem}
.links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.links a{padding:.35rem .9rem;border:1px solid var(--edge);border-radius:999px;font-size:.82rem;font-weight:600;transition:border-color .2s,box-shadow .2s}
.links a:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(79,155,255,.5)}
@media (max-width:1000px){.pi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .pi-grid{grid-template-columns:1fr}
  .profile{border-radius:22px;padding:.8rem 1rem;gap:.9rem}
  .avatar{width:64px;height:64px}
  .who h3{font-size:1rem}
}

/* ===== ACHIEVEMENTS: curricular and extracurricular on one page ===== */
#achievements .sub{margin-bottom:.8rem}
.ach-group .label{margin-bottom:.6rem;font-size:.74rem}
.label .count{padding:.05rem .55rem;border-radius:999px;background:rgba(79,155,255,.22);font-size:.64rem;letter-spacing:0;color:#fff}
.ach .cap{inset:0;padding:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,transparent 30%,transparent 50%,rgba(0,0,0,.94) 100%)}
.ach .cap small{position:absolute;top:.55rem;left:.55rem;width:fit-content;max-width:calc(100% - 1.1rem);margin:0;padding:.22rem .6rem;border-radius:999px;background:rgba(0,0,0,.75);border:1px solid rgba(79,155,255,.5);font-size:.56rem;line-height:1.3;letter-spacing:.08em}
.ach .cap b{position:absolute;left:.75rem;right:.75rem;bottom:.7rem;font-size:.74rem;line-height:1.3}
@media (min-width:821px){
  #achievements.active{display:flex;flex-direction:column;overflow:hidden}
  #achievements .ach-group{flex:1;min-height:0;display:flex;flex-direction:column}
  #achievements .ach-grid{flex:1;min-height:0;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:.8rem}
  #achievements .ach{aspect-ratio:auto;height:100%}
}
@media (max-width:820px){
  #achievements .ach-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  #achievements .ach{aspect-ratio:4/3}
}
.ach-group + .ach-group{margin-top:.7rem}
.ach .cap small{font-size:.54rem;padding:.2rem .5rem}


/* ===== FIT TO SCREEN: no page scrolling on phone, tablet or computer ===== */
.page{overflow:hidden}
header{padding:clamp(.6rem,2.2vh,1.5rem) clamp(1rem,5vw,4rem)}
main{padding-bottom:4rem}
.pager{bottom:.7rem}
.pager a{padding:.5rem 1.1rem;font-size:.8rem}
.view.active{display:flex;flex-direction:column;min-height:0}
#home.active{display:block}
.page h2{margin-bottom:.4rem}
.page .sub{margin-bottom:.8rem}

/* Personal information */
#personal.active{display:block}
#personal .pi{height:100%;align-content:start;gap:clamp(.5rem,1.6vh,1.1rem)}
#personal .pi h2{font-size:clamp(1.2rem,3vh,2.2rem)}
.pcard{padding:clamp(.6rem,1.6vh,1.2rem) 1rem}
.pcard h4{margin-bottom:clamp(.4rem,1.2vh,1rem)}
.pcard dl{gap:clamp(.3rem,1vh,.75rem)}

/* Family & Friends */
#family .grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Achievements: every card always visible, grid stretches to the screen */
#achievements.active{display:flex;flex-direction:column;overflow:hidden}
#achievements .ach-group{flex:1;min-height:0;display:flex;flex-direction:column}
#achievements .ach-grid{flex:1;min-height:0;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:.7rem}
#achievements .ach{aspect-ratio:auto;height:100%}
.lb-text{max-height:34vh;overflow-y:auto}

@media (max-width:1000px){
  .pi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #personal .pi{gap:.6rem}
  #achievements .ach-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #achievements .ach-group + .ach-group{margin-top:.5rem}
}
@media (max-width:820px){
  header{gap:.3rem .8rem;padding:.7rem 1rem .4rem}
  .brand{font-size:.9rem}
  nav ul{gap:.3rem .9rem}
  nav a{font-size:.74rem;letter-spacing:.02em}
  main{padding:0 1rem 3.6rem}
  .pager a{padding:.4rem .9rem;font-size:.74rem}
  .page .sub{font-size:.76rem;margin-bottom:.5rem}
  .page h2{font-size:1.35rem}
  .profile{padding:.5rem 1rem .5rem .5rem;gap:.8rem}
  .avatar{width:52px;height:52px}
  .who h3{font-size:.9rem;margin-bottom:.1rem}
  .who p{font-size:.75rem}
  .who .muted{font-size:.7rem}
  .pi-grid{gap:.5rem}
  .pcard{padding:.6rem .7rem}
  .pcard h4{font-size:.62rem;gap:.4rem;margin-bottom:.4rem}
  .pcard h4 svg{width:14px;height:14px}
  .pcard dl{gap:.3rem}
  .pcard dt{font-size:.5rem}
  .pcard dd{font-size:.7rem;line-height:1.25}
  .mini{font-size:.5rem;margin:0 0 .25rem}
  .chips{gap:.25rem;margin-bottom:.4rem}
  .chips span{padding:.15rem .45rem;font-size:.62rem}
  .links{margin-top:.4rem;gap:.3rem}
  .links a{padding:.2rem .6rem;font-size:.66rem}
  #family .grid{grid-template-columns:1fr;gap:.6rem}
  #achievements .ach-grid{gap:.5rem}
  .ach-group .label{font-size:.66rem;margin-bottom:.4rem}
  .lb-card img{max-height:46dvh}
  .lb-text{padding:.7rem .9rem .8rem}
  .lb-text h3{font-size:.9rem}
  .lb-text p{font-size:.78rem}
}
@media (max-width:600px){
  #achievements .ach-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
  #achievements .ach{border-radius:8px}
  #achievements .ach .cap b{display:none}
  #achievements .ach .cap small{display:none}
  #achievements .ach .cap{background:none}
  .pi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-height:520px) and (orientation:landscape){
  header{padding:.4rem 1rem}
  .page h2,#personal .pi h2{font-size:1.1rem}
  .page .sub{display:none}
  .pi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #achievements .ach-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  #achievements .ach .cap b,#achievements .ach .cap small{display:none}
  .hero{grid-template-columns:1fr 1fr}
  .photo{order:0;height:min(100%,70dvh)}
}

/* ===== FIT TO SCREEN: second pass ===== */
#home{overflow:hidden}
@media (max-width:820px){
  header{flex-direction:column;align-items:flex-start;gap:.35rem}
  nav ul{flex-wrap:nowrap;gap:clamp(.5rem,2.6vw,1.1rem)}
  nav a{font-size:clamp(.6rem,2.9vw,.78rem);white-space:nowrap}
}
@media (max-width:600px){
  .pcard dl div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .35rem}
  .pcard dt{flex:none}
  .pcard dt::after{content:":"}
  .pcard dd{margin-top:0}
}
@media (max-width:600px) and (max-height:760px){
  #personal .pi h2{display:none}
  .who .muted{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  header{flex-direction:row;align-items:center}
  #personal .pi h2,.profile{display:none}
  .pcard dl div{display:block}
  .pcard dt::after{content:none}
}

/* ===== FIT TO SCREEN: third pass (personal page on small screens) ===== */
.pi-grid{align-items:start}
@media (max-width:600px){
  .pi-grid .pcard:nth-child(3),.pi-grid .pcard:nth-child(4){grid-column:1 / -1}
  .pcard:nth-child(3) .chips{display:inline-flex;vertical-align:middle}
  .pcard:nth-child(4) dl{display:flex;flex-wrap:wrap;gap:.25rem .9rem}
  .pcard:nth-child(4) .links{margin-top:.35rem}
}
@media (max-height:520px) and (orientation:landscape){
  .pcard{padding:.5rem .7rem}
  .pcard h4{font-size:.6rem;margin-bottom:.35rem}
  .pcard h4 svg{width:13px;height:13px}
  .pcard dl{gap:.25rem}
  .pcard dt{font-size:.5rem}
  .pcard dd{font-size:.68rem;line-height:1.25}
  .mini{font-size:.5rem;margin:0 0 .2rem}
  .chips{gap:.2rem;margin-bottom:.3rem}
  .chips span{padding:.12rem .4rem;font-size:.6rem}
  .links{margin-top:.3rem}
  .links a{padding:.15rem .5rem;font-size:.6rem}
  #personal .pi{gap:.4rem}
  nav a{font-size:.72rem}
}

/* ===== FIT TO SCREEN: short phones ===== */
@media (max-width:600px) and (max-height:700px){
  .profile{display:none}
  #personal .pi{gap:.4rem}
  .pi-grid{gap:.4rem}
  .pcard{padding:.45rem .6rem}
  .pcard h4{margin-bottom:.3rem}
  .pcard dl{gap:.2rem}
  .pcard dd{font-size:.64rem}
  .pcard dt{font-size:.48rem}
  .mini{margin-bottom:.15rem}
  .chips{margin-bottom:.25rem}
  .chips span{font-size:.58rem;padding:.12rem .4rem}
  .links a{padding:.15rem .55rem;font-size:.62rem}
  header{padding:.5rem 1rem .3rem}
}


/* ===== REDESIGN: personal information (no photo, equal square cards) ===== */
#personal .pi{gap:clamp(.6rem,2vh,1.4rem)}
.pi-id{display:grid;gap:.15rem;justify-items:center;text-align:center}
.pi-id b{font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(.85rem,2.2vh,1.15rem);letter-spacing:.04em;color:#fff;text-shadow:0 0 18px rgba(79,155,255,.6)}
.pi-id span{font-size:clamp(.68rem,1.7vh,.88rem);color:var(--dim);letter-spacing:.06em}
.pi-id::after{content:"";width:3.2rem;height:2px;margin-top:.5rem;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 12px var(--accent)}
.pi-grid{align-items:stretch;gap:clamp(.6rem,1.6vh,1.1rem)}
.pcard{aspect-ratio:1/1;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(160deg,rgba(37,99,235,.2),rgba(0,0,0,.78) 55%);border-radius:16px}
.pcard::after{content:"";position:absolute;right:-30%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(79,155,255,.22),transparent 70%);pointer-events:none}
.pcard h4{flex:none;position:relative;z-index:1}
.pcard h4 svg{box-sizing:border-box;width:34px;height:34px;padding:.45rem;border-radius:50%;background:rgba(79,155,255,.14);border:1px solid rgba(79,155,255,.5);box-shadow:0 0 14px rgba(79,155,255,.35)}
.pcard dl,.pcard .mini,.pcard .chips,.pcard .links{position:relative;z-index:1}
.pcard dd{font-weight:500}
.chips span{border-color:rgba(79,155,255,.45);box-shadow:0 0 10px rgba(37,99,235,.2)}
@media (max-width:820px){
  .pcard h4 svg{width:24px;height:24px;padding:.32rem}
  .pcard{border-radius:12px}
}
@media (max-width:600px){
  .pi-grid{align-items:stretch}
  .pi-grid .pcard:nth-child(3),.pi-grid .pcard:nth-child(4){grid-column:auto}
  .pcard:nth-child(3) .chips{display:flex}
  .pcard:nth-child(4) dl{display:grid;gap:.2rem}
  .pcard:nth-child(4) .links{margin-top:.3rem}
  .pcard dl div{display:block}
  .pcard dt::after{content:none}
  .pcard dd{font-size:.66rem}
  .pi-id span{font-size:.6rem}
}
@media (max-width:600px) and (max-height:700px){
  .pcard{padding:.4rem .5rem}
  .pcard dd{font-size:.6rem;line-height:1.2}
  .pcard dt{font-size:.44rem}
  .chips span{font-size:.54rem;padding:.1rem .35rem}
  .links a{font-size:.56rem;padding:.12rem .45rem}
  .pi-id::after{display:none}
}

/* ===== REDESIGN: achievements (full picture, square, same size) ===== */
#achievements .ach-group{flex:none}
#achievements .ach-grid{
  --c:7;--r:2;--chrome:20rem;--g:.7rem;
  --s:min(calc((100% - (var(--c) - 1) * var(--g)) / var(--c)), calc((100dvh - var(--chrome)) / var(--r) - var(--g)));
  flex:none;gap:var(--g);grid-template-columns:repeat(var(--c),var(--s));grid-auto-rows:var(--s);justify-content:start}
#achievements .ach{display:grid;grid-template-rows:minmax(0,1fr) auto;aspect-ratio:1/1;height:auto;background:#05070f}
#achievements .ach img{position:static;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center!important;padding:.3rem .3rem 0}
#achievements .ach .cap{position:static;inset:auto;padding:.3rem .5rem .45rem;background:none}
#achievements .ach .cap small{display:none}
#achievements .ach .cap b{position:static;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.62rem;line-height:1.25;text-align:center}
#achievements .ach:hover img{transform:none}
@media (max-width:1000px){#achievements .ach-grid{--c:4;--r:4;--chrome:19rem;--g:.6rem}}
@media (max-width:600px){
  #achievements .ach-grid{--c:4;--r:4;--chrome:16rem;--g:.4rem}
  #achievements .ach .cap{display:none}
  #achievements .ach{grid-template-rows:1fr}
  #achievements .ach img{padding:.2rem}
}
@media (max-height:520px) and (orientation:landscape){
  #achievements .ach-grid{--c:7;--r:2;--chrome:12rem;--g:.4rem}
  #achievements .ach .cap{display:none}
  #achievements .ach{grid-template-rows:1fr}
}

@media (max-width:1000px){.pi-grid{max-width:calc(100dvh - 22rem)}}
@media (max-height:520px) and (orientation:landscape){
  .pi-grid{max-width:none}
  #achievements .ach-grid{--chrome:13.5rem}
}

/* ===== personal cards: equal squares that grow only if text needs it ===== */
#personal .pi{container-type:inline-size}
.pi-grid{--cols:4;--pg:clamp(.6rem,1.6vh,1.1rem);--maxw:9999px;
  width:min(100cqw,var(--maxw));max-width:none;gap:var(--pg);
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:minmax(calc((min(100cqw,var(--maxw)) - (var(--cols) - 1) * var(--pg)) / var(--cols)),auto);align-items:stretch}
.pcard{aspect-ratio:auto;overflow:clip}
@media (max-width:1000px){.pi-grid{--cols:2;--maxw:calc(100dvh - 22rem);max-width:none}}
@media (max-height:520px) and (orientation:landscape){.pi-grid{--cols:4;--maxw:9999px;max-width:none}}
#achievements{max-width:1500px}

/* equal height for all cards; each at least a square */
.pi-grid{--sq:calc((min(100cqw,var(--maxw)) - (var(--cols) - 1) * var(--pg)) / var(--cols));grid-auto-rows:1fr}
.pcard{min-height:var(--sq)}
.pcard{padding:clamp(.6rem,1.5vh,1rem) .95rem}
.pcard h4{margin-bottom:.7rem}
.pcard dl{gap:.5rem}
.pcard dd{font-size:.92rem;line-height:1.3}
.chips{gap:.3rem;margin-bottom:.6rem}
.chips span{padding:.18rem .55rem;font-size:.74rem}
.links{margin-top:.6rem}
@media (max-width:820px){.pcard dd{font-size:.7rem}.chips span{font-size:.62rem;padding:.15rem .45rem}}
@media (max-width:600px) and (max-height:700px){.pcard dd{font-size:.6rem}.chips span{font-size:.54rem;padding:.1rem .35rem}}
@media (max-height:520px) and (orientation:landscape){
  .pi-id span{display:none}
  .pcard{padding:.4rem .6rem}
  .pcard dd{font-size:.64rem}
  .pcard h4{margin-bottom:.3rem}
}

@media (max-width:600px){.pi-grid{grid-auto-rows:auto}}
@media (max-height:520px) and (orientation:landscape){
  .pi-grid{grid-auto-rows:auto}
  .pcard{min-height:0;padding:.35rem .5rem}
  .pcard h4 svg{display:none}
  .pcard h4{margin-bottom:.25rem;font-size:.56rem}
  .pcard dl{gap:.18rem}
  .pcard dt{font-size:.42rem}
  .pcard dd{font-size:.58rem;line-height:1.15}
  .mini{font-size:.42rem}
  .chips{margin-bottom:.15rem;gap:.15rem}
  .chips span{font-size:.5rem;padding:.06rem .3rem}
  .links{margin-top:.2rem}
  .links a{font-size:.5rem;padding:.08rem .4rem}
}

@media (max-width:600px) and (max-height:700px){
  .pi-id span{display:none}
  .pi-id b{font-size:.78rem}
  .pi-id::after{display:none}
  .pcard h4 svg{display:none}
  .pcard h4{margin-bottom:.25rem}
  #personal .pi{gap:.35rem}
}