:root { color-scheme: light; --page:#799584; --panel:#b7cec1; --navigation:#95aea0; --radius:9px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:16px; }
body { margin:0; background:var(--page); color:#000; font-family:"IBM Plex Serif","Times New Roman",serif; font-size:14px; font-weight:600; }
.portfolio { width:100%; max-width:402px; min-height:100svh; margin:0 auto; padding:clamp(12px,calc(100svh - 800px),50px) max(13px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left)); display:flex; flex-direction:column; }
.portfolio > section { flex-shrink:0; }
.portfolio > #projects { margin-bottom:18px; }
.portfolio > .bottom-nav { flex-shrink:0; margin-top:auto; }
h1,h2,h3,p,ul { margin:0; font-size:inherit; font-weight:inherit; }
section > h1,section > h2 { height:22px; padding-left:6px; color:white; line-height:22px; font-weight:700; text-shadow:0 1px 1px #0000000a; }
section:first-child > h1 { height:15px; line-height:15px; }
.panel { border-radius:var(--radius); background:var(--panel); min-height:211px; box-shadow:inset 0 0 0 1px #ffffff26,0 2px 6px #00000005; }
.bio-panel { display:flex; align-items:center; padding:16px 9px; }
.bio-panel p { line-height:18px; }
.skills-panel { display:grid; grid-template-columns:1fr 1fr; position:relative; padding:14px 11px 14px 21px; }
.skill-column { line-height:18px; min-width:0; }
.skill-column h3 { font-weight:700; }
.skill-column li::marker { color:var(--page); }
.skill-column ul { padding-left:21px; }
.other-skills { padding-left:25px; }
.skills-divider { position:absolute; width:185px; height:3px; top:103px; left:calc(50% - 91px); transform:rotate(90deg); }
.projects-panel { display:flex; align-items:flex-start; gap:10px; padding:12px 9px 18px; }
.project { display:block; border:0; padding:0; border-radius:4px; background:transparent; cursor:zoom-in; box-shadow:0 2px 5px #00000026; flex-shrink:1; min-width:0; transition:box-shadow 160ms ease; }
.project img { display:block; object-fit:cover; width:100%; height:100%; border-radius:inherit; }
a.project { cursor:pointer; }
.project-chat { width:109px; aspect-ratio:109 / 181; }
.project-game { width:119px; aspect-ratio:119 / 173; }
.project-terminal { width:111px; aspect-ratio:111 / 166; margin-top:8px; }
.bottom-nav { display:flex; gap:4px; width:min(100%,240px); margin:18px auto 0; padding:4px; border-radius:16px; background:var(--navigation); box-shadow:inset 0 0 0 1px #ffffff1a,0 2px 8px #0000000f; }
.bottom-nav a { display:flex; flex:1; justify-content:center; align-items:center; min-width:44px; min-height:44px; border-radius:12px; background:transparent; transition:background-color 150ms ease; }
.bottom-nav img { object-fit:contain; width:auto; height:28px; }
.bottom-nav a[aria-current="location"],.bottom-nav a[aria-current="page"] { background:var(--panel); box-shadow:0 1px 3px #0000000d; }
a:focus-visible,button:focus-visible { outline:2px solid white; outline-offset:3px; }
.bottom-nav a:active { background:var(--panel); }
@media(hover:hover) {
  .bottom-nav a:hover { background:var(--panel); }
  .project:hover { box-shadow:0 4px 9px #00000033; }
}
dialog { max-width:min(90vw,600px); max-height:90vh; padding:16px; border:0; border-radius:var(--radius); background:var(--panel); color:black; }
dialog::backdrop { background:#14291dcc; }
.dialog-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:12px; }
.close-preview { border:0; background:transparent; font-size:28px; cursor:pointer; }
.preview-image { display:block; max-width:100%; max-height:70vh; width:auto; margin:auto; }
@media(max-width:375px) { .skills-panel { padding-left:14px; padding-right:8px; } .other-skills { padding-left:15px; } .project img { object-fit:contain; } }
@media(max-height:850px) {
  .panel { min-height:0; }
  .bio-panel { padding:12px 9px; }
  .skills-panel { padding-top:10px; padding-bottom:10px; }
  .skills-divider { top:calc(50% - 1.5px); }
  .projects-panel { justify-content:center; padding-top:10px; padding-bottom:12px; }
  .project-chat { width:93px; }
  .project-game { width:101px; }
  .project-terminal { width:94px; }
  .bottom-nav { margin-top:12px; }
  .portfolio > #projects { margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .bottom-nav a,.project { transition:none; } }

.contact-page { width:100%; max-width:402px; min-height:100svh; margin:0 auto; padding:clamp(12px,calc(100svh - 800px),50px) max(13px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left)); display:flex; flex-direction:column; }
.contact-page > h1 { color:white; font-size:clamp(28px,10vw,48px); line-height:1.3; text-align:center; margin-bottom:14px; }
.contact-email { display:flex; align-items:center; gap:clamp(8px,3vw,21px); min-height:60px; padding:6px clamp(9px,3vw,18px); background:var(--panel); border-radius:var(--radius); color:inherit; text-decoration:none; font-size:clamp(14px,4.7vw,20px); line-height:1.3; }
.contact-email img { flex-shrink:0; object-fit:contain; }
.contact-email span,.social-panel span { min-width:0; overflow-wrap:anywhere; }
.contact-social { margin:19px 0 0; }
.contact-social > h2 { height:45px; padding:0 8px; line-height:35px; font-size:20px; }
.social-panel { min-height:278px; padding:6px 6px 24px; border-radius:var(--radius); background:var(--panel); }
.social-panel a { display:flex; align-items:center; gap:7px; min-height:63px; color:inherit; text-decoration:none; font-size:clamp(16px,5vw,20px); line-height:1.3; }
.social-panel img { object-fit:contain; flex-shrink:0; }
.social-panel .facebook-icon { margin-left:2px; margin-right:5px; }
.social-panel .instagram-icon { margin-left:6px; margin-right:5px; }
.contact-nav { flex-shrink:0; margin-top:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.projects-page > .panel { flex-shrink:0; min-height:223px; margin-bottom:11px; }
.projects-page .project-gallery { align-items:flex-start; gap:10px; padding:19px 7px 23px; }
.projects-page .project-terminal { width:111px; margin-top:7px; }
.projects-page .project-chat { width:109px; }
.projects-page .project-game { width:119px; }
.projects-page .project-description { padding:14px 11px 18px; font-size:16px; line-height:21px; }
.project-description > h2 { height:auto; padding:0; color:inherit; font-size:inherit; line-height:inherit; text-shadow:none; }
.project-description ul { padding-left:24px; margin-bottom:12px; }
.projects-page .masters-panel { display:flex; align-items:center; padding:23px 9px 33px; margin-bottom:18px; }
.project-masters { width:100%; }
.project-masters img { height:auto; }
@media(max-height:850px) {
  .projects-page > .panel { min-height:0; }
  .projects-page .project-gallery { padding-top:12px; padding-bottom:16px; }
  .projects-page .masters-panel { padding-top:16px; padding-bottom:20px; margin-bottom:12px; }
}
.contact-social { margin-bottom:18px; }
.contact-nav a[aria-current="page"] { background:var(--panel); box-shadow:0 1px 3px #0000000d; }
@media(max-height:850px) {
  .contact-page > h1 { margin-bottom:12px; }
  .contact-social { margin-top:12px; }
  .contact-social { margin-bottom:12px; }
  .social-panel { min-height:0; padding-bottom:10px; }
}