:root{font-family:Arial,Helvetica,sans-serif;color:#252525;background:#e6e8eb;font-size:13px;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}a{color:#14549a;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e87720;outline-offset:4px}header{background:#0756a2;color:#fff}.masthead{max-width:1000px;margin:auto;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.logo{font-size:42px;font-weight:900;letter-spacing:-3px;color:#fff}.logo span{font-weight:400}.logo small{font-size:12px;letter-spacing:2px;display:block;margin-top:2px}.era{text-align:right;font-size:10px;letter-spacing:1px;color:#d0e5fc;line-height:1.8}.era b{font-size:12px;letter-spacing:0;color:#fff}nav{background:#3176ba;display:flex;justify-content:center;gap:0;flex-wrap:wrap}nav a,nav button{padding:12px 20px;color:#fff;border:0;background:transparent;font-weight:bold;border-right:1px solid #75a2d0}nav a:hover,nav button:hover{background:#185f9f;text-decoration:none}main{max-width:1000px;margin:auto;background:white;padding:20px 28px 0;box-shadow:0 8px 30px #0000000a}.breadcrumb{font-size:10px;color:#697583;margin-bottom:22px;display:flex;justify-content:space-between;gap:10px}.breadcrumb span{letter-spacing:1px;color:#0756a2}.columns{display:grid;grid-template-columns:310px minmax(0,1fr);gap:28px}h1{font-size:32px;margin:0 0 8px;color:#111;letter-spacing:-1px}h1 span{font-size:12px;vertical-align:top;color:#9b9b9b}.quote{font-size:12px;line-height:1.5;color:#666;margin:0 0 18px}.profile-intro{display:flex;gap:15px;align-items:flex-start}.portrait{width:152px;height:210px;object-fit:cover;object-position:center 25%;border:1px solid #aaa;padding:3px;background:#fff}.profile-intro p{font-size:12px;line-height:1.6}.profile-intro>div>b{font-size:17px}.online{color:#328031;font-weight:bold}.mood{font-size:11px!important}.view-links{text-align:center;font-size:12px;margin:14px 0 22px}.box{border:1px solid #79a4d0;margin-bottom:20px}.box h2{background:#77a8d9;color:#fff;font-size:14px;padding:8px 11px;margin:0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;padding:12px 9px;gap:16px 8px}.contact-grid a,.contact-grid button{font-size:11px;font-weight:bold;color:#14549a;border:0;background:none;text-align:left;padding:0}.contact p{color:#777;font-size:10px;margin:0;padding:0 10px 10px}.url{border:1px solid #b3b3b3;padding:10px;font-size:11px;line-height:1.8;margin-bottom:20px}dl{display:grid;grid-template-columns:83px 1fr;gap:3px;margin:4px}dt{background:#b6d2ef;color:#245582;font-weight:bold;padding:10px 7px;font-size:11px}dd{background:#e3eef8;margin:0;padding:10px 8px;font-size:11px;line-height:1.6}.sticker{border:3px double #df7322;transform:rotate(-4deg);margin:32px auto;width:230px;text-align:center;padding:16px;background:#fff7e9;color:#a74c09;font-size:11px;letter-spacing:1px}.sticker strong{display:block;font-size:23px;letter-spacing:-1px}.sticker small{font-size:9px;letter-spacing:0;display:block;margin-top:5px}.network{border:2px solid #303030;text-align:center;padding:21px 12px;margin-bottom:20px}.network>span{display:block;font-size:10px;letter-spacing:3px;margin-bottom:7px}.network strong{display:block;font-size:23px;letter-spacing:-.5px}.network small{display:block;color:#777;font-size:10px;margin-top:9px}.announcement{background:#eff5fc;border:1px dashed #8badcf;padding:18px 90px 18px 16px;position:relative;margin-bottom:22px;line-height:1.6}.announcement>b{display:block;font-size:19px;color:#0756a2}.announcement>span{font-size:11px;color:#666}.announcement .stamp{position:absolute;right:13px;top:13px;background:#ffe7ce;color:#a74c09;border:1px solid #eab37d;transform:rotate(9deg);padding:7px;font-size:10px;font-weight:bold;text-align:center}.orange-section{margin-bottom:24px;scroll-margin-top:18px}.orange-section h2{font-size:14px;background:#ffd9b4;color:#963f09;margin:0;padding:9px 12px}.orange-section h2>span{float:right;font-size:10px;font-weight:normal;line-height:17px}.section-body{padding:12px 12px 0}.section-body p{line-height:1.7;margin:0 0 13px}h3{font-size:14px;color:#d25e12;margin:0 0 7px}.signature{font-weight:bold;color:#0756a2}.signature span{display:block;font-size:10px;font-weight:normal;color:#777}.section-kicker{font-size:11px;color:#747474}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 11px}.photo{border:0;padding:0;background:none;min-width:0;color:#14549a;text-align:left}.photo img{width:100%;height:154px;object-fit:cover;border:1px solid #c8c8c8;padding:3px;background:white;transition:transform .15s}.photo:nth-child(1) img,.photo:nth-child(3) img{object-fit:contain;background:#f5f4f0}.photo:nth-child(2) img{object-position:50% 25%}.photo:hover img{transform:rotate(-2deg)}.photo span{font-size:10px;font-weight:bold;display:block;line-height:1.4;margin-top:5px}.orange{color:#c4560e}.top-eight{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 10px;text-align:center}.top-eight b{display:block;font-size:10px;color:#14549a;margin-bottom:6px}.top-eight span{display:flex;align-items:center;justify-content:center;font-size:37px;height:82px;border:1px solid #b9cadb;background:linear-gradient(135deg,#e7f0fa,#f6f9fc)}.top-eight small{font-size:9px;color:#777;display:block;margin-top:5px}.comment{display:grid;grid-template-columns:90px 1fr;gap:4px;margin-bottom:4px}.avatar{background:#ffd9b4;text-align:center;padding:12px 5px;font-size:27px}.avatar b{display:block;color:#14549a;font-size:10px;margin-top:5px}.comment p{margin:0;background:#fff1e3;padding:12px;font-size:12px}.comment strong{display:block;color:#994d16;font-size:10px}footer{text-align:center;color:#7c7c7c;font-size:11px;padding:28px 0 20px;border-top:1px solid #ddd;margin-top:20px;line-height:1.9}footer>span{font-size:10px}dialog{border:0;padding:40px 18px 12px;max-width:95vw;max-height:95dvh;background:#fff;box-shadow:0 20px 80px #0006}dialog::backdrop{background:#001b35dc}dialog img{display:block;max-width:min(100%,1000px);max-height:75dvh;object-fit:contain;margin:auto}dialog p{text-align:center;font-size:13px}#close{position:absolute;right:6px;top:2px;font-size:28px;background:none;border:0;color:#0756a2;width:38px;height:38px}.confetti{position:fixed;top:-40px;pointer-events:none;font-size:25px;z-index:10;animation:fall 2.8s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(420deg)}}@media(max-width:760px){main{padding:18px 16px 0}.columns{grid-template-columns:250px minmax(0,1fr);gap:16px}.portrait{width:120px;height:170px}.photo-grid{grid-template-columns:repeat(2,1fr)}.network strong{font-size:20px}.breadcrumb span{display:none}.top-eight{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.masthead{padding:0 18px;height:88px}.logo{font-size:37px}.era{max-width:145px;font-size:8px}.era b{font-size:10px}nav a,nav button{padding:11px 12px;font-size:11px}.columns{grid-template-columns:1fr}.portrait{width:150px;height:200px}.profile-intro{gap:22px}.box dl{grid-template-columns:90px 1fr}.sticker{display:none}.right-column{min-width:0}.top-eight{grid-template-columns:repeat(4,1fr);gap:12px 7px}.top-eight span{height:65px;font-size:29px}.top-eight b{font-size:9px}.photo img{height:180px}.orange-section h2>span{font-size:9px}.breadcrumb{font-size:9px}.network{margin-top:4px}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.photo img{transition:none}.confetti{animation:none;display:none}}
/* Comfortable phone layout while preserving the classic profile panels. */
.columns > *, .profile-intro > div, dd, .comment > * { min-width: 0; }
button { -webkit-appearance: none; appearance: none; touch-action: manipulation; }
.portrait { flex-shrink: 0; }
#close { width: 44px; height: 44px; }
dialog { max-height: 95vh; max-height: 95dvh; }
dialog img { max-height: 75vh; max-height: 75dvh; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 760px) {
  :root { font-size: 15px; -webkit-text-size-adjust: 100%; }
  main { padding: 18px 16px 0; }
  .columns { display: flex; flex-direction: column; gap: 18px; }
  aside { display: contents; }
  .profile { order: 0; }
  .contact { order: 1; margin-bottom: 0; }
  .url { order: 2; margin-bottom: 0; font-size: 13px; overflow-wrap: anywhere; }
  .right-column { order: 3; }
  .interests { order: 4; }
  aside > .box:not(.contact):not(.interests) { order: 5; }
  .sticker { display: none; }
  .breadcrumb { line-height: 1.5; font-size: 11px; margin-bottom: 18px; flex-wrap: wrap; }
  .masthead { padding: 0 18px; }
  nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  nav a, nav button { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px; font-size: 13px; border-bottom: 1px solid #75a2d0; }
  .quote { font-size: 14px; }
  .profile-intro { gap: 16px; }
  .portrait { width: 42%; max-width: 190px; height: auto; aspect-ratio: 3 / 4; }
  .profile-intro p { font-size: 14px; line-height: 1.5; }
  .mood { font-size: 13px !important; }
  .view-links { font-size: 14px; margin-bottom: 0; }
  .view-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .contact-grid { gap: 6px; padding: 8px; }
  .contact-grid a, .contact-grid button { display: flex; align-items: center; min-height: 48px; padding: 8px; font-size: 13px; background: #eff5fc; }
  .contact p { font-size: 12px; line-height: 1.5; padding: 3px 12px 12px; }
  .box h2, .orange-section h2 { font-size: 16px; padding: 11px 12px; }
  dl, .box dl { grid-template-columns: 90px minmax(0, 1fr); }
  dt, dd { font-size: 13px; }
  .network strong { font-size: 23px; }
  .network small { font-size: 12px; line-height: 1.5; }
  .announcement { padding: 16px 84px 16px 12px; }
  .announcement > b { font-size: 18px; }
  .announcement > span { font-size: 13px; }
  .announcement .stamp { right: 9px; font-size: 10px; }
  .section-body { padding: 12px 4px 0; }
  h3 { font-size: 16px; }
  .signature span, .section-kicker { font-size: 13px; }
  .orange-section h2 > span { float: none; display: block; font-size: 12px; margin-top: 4px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .photo img { display: block; height: auto; aspect-ratio: 1; }
  .photo span { font-size: 13px; line-height: 1.5; margin-top: 6px; }
  .top-eight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .top-eight b { font-size: 13px; }
  .top-eight span { height: 85px; font-size: 36px; }
  .top-eight small { font-size: 12px; }
  .comment { grid-template-columns: 76px minmax(0, 1fr); }
  .comment p { font-size: 14px; padding: 10px; }
  .comment strong, .avatar b { font-size: 12px; overflow-wrap: anywhere; }
  footer { font-size: 13px; }
  footer > span { font-size: 12px; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  dialog { width: calc(100vw - 20px); padding: 48px 10px 12px; }
  dialog img { max-width: 100%; }
  dialog p { line-height: 1.5; }
}
@media (max-width: 360px) {
  main { padding-right: 12px; padding-left: 12px; }
  .era { display: none; }
  .profile-intro p { font-size: 13px; }
  .contact-grid a, .contact-grid button { font-size: 12px; }
}
@media (hover: none) { .photo:hover img { transform: none; } }