@import url("about-compact-v100.css?v=100");

/* Keep the approved three-column composition at readable, content-led sizes. */
#about.about-installed{width:100%;max-width:1280px;margin-inline:auto}
#about .about-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.48fr) minmax(0,1fr);grid-template-rows:auto;gap:18px;align-items:stretch}
#about .profile-study,#about .skill-study,#about .education-study{min-width:0;min-height:0;margin:0;align-self:stretch}
#about .profile-study{grid-column:1;grid-row:1}
#about .profile-scene{height:100%;min-height:0}
#about .profile-content{display:flex;flex-direction:column;height:100%;padding:28px}
#about .identity-heading{gap:22px}
#about .profile-identity{gap:10px}
#about .profile-identity #profile-name{font-size:46px}
#about .roman-name{font-size:14px}
#about .profile-roles{font-size:8px;line-height:1.6;letter-spacing:.2px;gap:4px}
#about .profile-summary{width:100%;max-width:none;margin-top:24px;font-size:15px;line-height:1.9}
#about .profile-contact{margin-top:auto;padding-top:28px;max-width:none}
#about .profile-contact #contact-title{font-size:17px;margin-bottom:16px}
#about .contact-list{gap:12px}
#about .contact-row{grid-template-columns:32px 30px minmax(0,1fr);column-gap:10px;min-height:34px}
#about .contact-icon{width:32px;height:32px}
#about .contact-icon svg{width:18px;height:18px}
#about .contact-row dt>span:last-child{font-size:12px}
#about .contact-row dd{font-size:14px}
#about .portal-art{width:110px;opacity:.24}

#about .skill-study{grid-column:2;grid-row:1;width:100%;height:auto;min-height:min-content;aspect-ratio:1;display:flex;flex-direction:column;padding:22px;overflow:visible}
#about .matrix-heading{flex:none;margin-bottom:16px}
#about .matrix-heading .matrix-title{font-size:24px}
#about .matrix-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(min-content,1fr));gap:12px;flex:1;min-height:auto;overflow:visible}
#about .card-design{grid-column:1;grid-row:1}
#about .card-video{grid-column:2;grid-row:1}
#about .card-image{grid-column:1;grid-row:2}
#about .card-agent{grid-column:2;grid-row:2}
#about .matrix-card{padding:11px;min-height:min-content}
#about .card-intro{min-height:24px;gap:5px;flex:none}
#about .card-number{display:block;font-size:11px}
#about .card-intro .matrix-card-title{font-size:16px}
#about .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(32px,auto);gap:6px;margin-top:10px;flex:0 0 auto}
#about .tool-grid li{font-size:12px;min-height:32px;padding:6px;gap:5px;line-height:1.35}
#about .tool-grid .tool-label{overflow-wrap:normal;word-break:normal}
#about .tool-logo{width:16px;height:16px;flex-basis:16px}
#about .tool-logo svg{width:16px;height:16px}
#about .matrix-crystal{width:42px;height:42px;inset:12px 20px auto auto}
#about .matrix-crystal img{width:42px}

#about .about-side{grid-column:3;grid-row:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(min-content,1fr);gap:18px;align-self:stretch}
#about .about-side .education-study{grid-column:1;grid-row:1}
#about .education-scene{min-height:0;height:auto}
#about .education-content{display:block;padding:22px}
#about .education-content .education-title{font-size:23px}
#about .education-dates{margin-top:16px;font-size:13px}
#about .education-school{margin-top:8px;font-size:23px;line-height:1.4}
#about .education-degree{margin-top:5px;font-size:13.5px;line-height:1.6}
#about .education-description{margin-top:14px;width:100%;max-width:none;font-size:13.5px;line-height:1.8}
#about .education-art{width:110px;opacity:.24}
#about .personal-note{grid-column:1;grid-row:2;min-width:0;padding:22px;border:1px solid #bfdcf5;border-radius:18px;background:linear-gradient(135deg,#fbfefff5,#f2f9fff0);box-shadow:inset 0 0 0 2px #ffffff90}
#about .personal-note h3{margin:0;padding:0;border:0;color:#153c69;font-size:23px;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none}
#about .personal-note h3:before,#about .personal-note h3:after{content:none}
#about .personal-note p{margin:12px 0 0;color:#587894;font-size:13.5px;line-height:1.8}

/* Reflow narrower screens instead of shrinking text or hiding skills in a scroll box. */
@media(min-width:901px) and (max-width:1359px){
 #about .about-review{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);max-width:1100px;margin-inline:auto}
 #about .skill-study{aspect-ratio:auto;padding:18px}
 #about .profile-content{padding:24px}
 #about .profile-identity #profile-name{font-size:42px}
 #about .profile-roles{font-size:7px}
 #about .identity-heading{gap:16px}
 #about .card-intro .matrix-card-title{font-size:15px}
 #about .matrix-card{padding:9px}
 #about .tool-grid li{font-size:11px;padding:5px;gap:4px}
 #about .about-side{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
 #about .personal-note{grid-column:2;grid-row:1}
 #about .education-scene{height:100%}
}
@media(max-width:1000px) and (min-width:901px){
 #about .profile-content{padding:22px}
 #about .profile-summary{font-size:14px}
 #about .contact-row{grid-template-columns:28px 26px minmax(0,1fr);column-gap:7px}
 #about .contact-row dd{font-size:12px}
 #about .matrix-layout{gap:8px}
 #about .matrix-card{padding:8px}
 #about .tool-logo{width:14px;height:14px;flex-basis:14px}
}
@media(max-width:900px){
 #about .about-review{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto;gap:16px}
 #about .profile-study,#about .skill-study,#about .about-side{grid-column:1;grid-row:auto}
 #about .profile-content{padding:24px}
 #about .profile-identity #profile-name{font-size:42px}
 #about .roman-name{font-size:13px}
 #about .identity-heading{gap:18px}
 #about .profile-roles{font-size:7.5px}
 #about .profile-summary{font-size:15px}
 #about .skill-study{aspect-ratio:auto;min-height:0;padding:20px}
 #about .matrix-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,max-content);gap:12px;flex:none}
 #about .matrix-card{grid-column:1;grid-row:auto;padding:14px}
 #about .tool-grid li{font-size:13px;min-height:36px}
 #about .about-side{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
 #about .personal-note{grid-column:1;grid-row:2}
}
@media(max-width:370px){
 #about .profile-content{padding:20px}
 #about .profile-identity #profile-name{font-size:36px}
 #about .roman-name{font-size:11px}
 #about .identity-heading{gap:14px}
 #about .profile-roles{font-size:7px}
 #about .contact-row{grid-template-columns:26px 26px minmax(0,1fr);column-gap:6px}
 #about .contact-icon{width:26px;height:26px}
 #about .contact-row dd{font-size:12px}
 #about .skill-study{padding:16px}
 #about .matrix-card{padding:11px}
 #about .tool-grid li{font-size:11.5px;padding:5px;gap:4px}
}