@import url('https://fonts.googleapis.com/css2?family=VT323&family=Lora:ital,wght@0,400;0,600;1,400&family=Share+Tech+Mono&display=swap');

:root {
  --clay:#C8714A;--clay-light:#E8A882;--clay-pale:#F5E6DC;
  --moss:#5C6B3A;--moss-light:#8A9E5C;--moss-pale:#E8EDD8;
  --earth:#6B4A2A;--earth-light:#A07850;
  --cream:#F7F0E4;--cream-dark:#EBE0C8;
  --bark:#3D2B1A;--bark-mid:#7A5C3C;--white:#FFF9F2;
  --fp:'VT323',monospace;--fb:'Lora',Georgia,serif;--fm:'Share Tech Mono',monospace;
  --border:2px solid var(--bark-mid);--radius:4px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

body {
  background-color:var(--cream);
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(92,107,58,0.07) 39px,rgba(92,107,58,0.07) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(92,107,58,0.07) 39px,rgba(92,107,58,0.07) 40px);
  color:var(--bark);font-family:var(--fb);font-size:16px;line-height:1.7;min-height:100vh;
}

a{color:var(--clay);text-decoration:underline;}
a:hover{color:var(--moss);}
img{max-width:100%;display:block;}

.site-wrapper{max-width:980px;margin:0 auto;padding:20px 16px 60px;}

.site-header{text-align:center;padding:18px 0 10px;border-bottom:3px double var(--clay);margin-bottom:20px;position:relative;}
.site-title{font-family:var(--fp);font-size:48px;color:var(--clay);text-shadow:3px 3px 0 var(--moss);letter-spacing:2px;line-height:1;}
.site-subtitle{font-family:var(--fm);font-size:12px;color:var(--bark-mid);margin-top:4px;letter-spacing:3px;text-transform:uppercase;}
.site-header::before,.site-header::after{content:'';position:absolute;top:50%;width:80px;height:2px;background:var(--clay-light);}
.site-header::before{left:20px;}.site-header::after{right:20px;}

.site-nav{display:flex;justify-content:center;gap:0;margin-bottom:20px;border:var(--border);border-radius:var(--radius);overflow:hidden;width:fit-content;margin-left:auto;margin-right:auto;}
.site-nav a{font-family:var(--fp);font-size:18px;color:var(--bark);text-decoration:none;padding:4px 16px;background:var(--cream-dark);border-right:2px solid var(--bark-mid);letter-spacing:1px;transition:background 0.15s,color 0.15s;}
.site-nav a:last-child{border-right:none;}
.site-nav a:hover,.site-nav a.active{background:var(--clay);color:var(--white);}

.marquee-bar{background:var(--moss);color:var(--cream);font-family:var(--fm);font-size:12px;padding:4px 0;overflow:hidden;white-space:nowrap;margin-bottom:20px;border-top:2px solid var(--moss-light);border-bottom:2px solid var(--moss-light);}
.marquee-bar marquee{letter-spacing:2px;}

.main-grid{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;}
.sidebar,.content{display:flex;flex-direction:column;gap:14px;}

.panel{background:var(--white);border:var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:4px 4px 0 var(--clay-light);}
.panel-header{background:var(--clay);color:var(--white);font-family:var(--fp);font-size:20px;padding:6px 12px;letter-spacing:1px;border-bottom:2px solid var(--earth);display:flex;align-items:center;gap:8px;}
.panel-header.moss-header{background:var(--moss);border-bottom-color:#3d4f22;}
.panel-header.earth-header{background:var(--earth);border-bottom-color:var(--bark);}
.panel-body{padding:12px;}

.avatar{width:100px;height:100px;border-radius:50%;border:3px solid var(--clay);object-fit:cover;display:block;margin:0 auto 10px;}
.avatar-placeholder{width:100px;height:100px;border-radius:50%;border:3px solid var(--clay);background:var(--clay-pale);color:var(--clay);font-family:var(--fp);font-size:48px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.profile-name{font-family:var(--fp);font-size:28px;color:var(--clay);text-align:center;line-height:1;margin-bottom:2px;}
.profile-handle{font-family:var(--fm);font-size:12px;color:var(--bark-mid);text-align:center;margin-bottom:6px;}
.profile-location{font-size:13px;color:var(--bark-mid);text-align:center;margin-bottom:8px;}
.status-box{background:var(--moss-pale);border:1px solid var(--moss-light);border-radius:var(--radius);padding:4px 8px;font-size:12px;margin-bottom:6px;font-family:var(--fm);}
.status-label{color:var(--moss);font-weight:bold;margin-right:4px;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;}
.tag{background:var(--clay-pale);color:var(--earth);border:1px solid var(--clay-light);border-radius:2px;font-family:var(--fm);font-size:10px;padding:2px 6px;text-transform:lowercase;}
.tag-cloud.small .tag{font-size:10px;}
.online-since{font-family:var(--fm);font-size:10px;color:var(--bark-mid);text-align:center;margin-top:6px;opacity:0.7;}

/* ── MUSIC PLAYER ─────────────────────────────────────── */
.player-screen{background:var(--bark);border:2px inset #1a0d05;border-radius:3px;padding:8px 10px;margin-bottom:8px;min-height:60px;}
.player-title{font-family:var(--fp);font-size:20px;color:#00ff88;letter-spacing:1px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-artist{font-family:var(--fm);font-size:11px;color:#7dffbe;margin-top:2px;}
.player-tracknum{font-family:var(--fm);font-size:10px;color:#4aaa77;margin-top:4px;letter-spacing:2px;}
.player-controls{display:flex;justify-content:center;gap:6px;margin-bottom:8px;}
.player-btn{background:var(--clay-pale);border:2px solid var(--bark-mid);border-radius:3px;font-family:var(--fm);font-size:14px;color:var(--bark);padding:3px 10px;cursor:pointer;transition:background 0.1s;}
.player-btn:hover{background:var(--clay);color:var(--white);}
.player-btn:active{transform:scale(0.95);}
.player-timerow{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.player-time{font-family:var(--fm);font-size:10px;color:var(--bark-mid);min-width:32px;text-align:center;}
.player-progress{flex:1;height:6px;accent-color:var(--clay);cursor:pointer;}
.player-volrow{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.player-vol-icon{font-family:var(--fm);font-size:14px;color:var(--moss);}
.player-vol{flex:1;height:4px;accent-color:var(--moss);cursor:pointer;}
.recently-loved{margin-top:4px;border-top:1px dashed var(--cream-dark);padding-top:8px;}

.section-sub{font-family:var(--fp);font-size:18px;color:var(--moss);margin:10px 0 4px;border-bottom:1px dashed var(--moss-light);padding-bottom:2px;}
.section-sub.small{font-size:15px;}
.about-body{font-size:14px;color:var(--bark);line-height:1.7;margin-bottom:6px;}
.music-list{list-style:none;font-size:13px;}
.music-list li{padding:4px 0;border-bottom:1px dotted var(--cream-dark);}
.music-list li:last-child{border-bottom:none;}
.music-artist{color:var(--bark-mid);font-family:var(--fm);font-size:12px;}

/* ── POSTS ────────────────────────────────────────────── */
.post-entry{padding:10px 0;border-bottom:1px dashed var(--cream-dark);}
.post-entry:last-child{border-bottom:none;}
.post-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;}
.post-date{font-family:var(--fm);font-size:11px;color:var(--bark-mid);flex-shrink:0;}
.post-title{font-family:var(--fp);font-size:18px;color:var(--clay);line-height:1;}
.post-body{font-size:14px;color:var(--bark);line-height:1.6;margin-bottom:6px;}

/* ── MEDIA ────────────────────────────────────────────── */
.media-entry{padding:10px 0;border-bottom:1px dashed var(--cream-dark);}
.media-entry:last-child{border-bottom:none;}
.media-top{display:flex;align-items:flex-start;gap:8px;}
.media-icon{font-size:18px;flex-shrink:0;line-height:1.3;}
.media-info{flex:1;min-width:0;}
.media-title{font-family:var(--fp);font-size:18px;color:var(--bark);line-height:1.1;}
a.media-title{color:var(--clay);}
.media-creator{font-family:var(--fm);font-size:11px;color:var(--bark-mid);}
.media-status{font-family:var(--fm);font-size:10px;padding:2px 7px;border-radius:2px;flex-shrink:0;text-transform:lowercase;border:1px solid;}
.status-clay{background:var(--clay-pale);color:var(--earth);border-color:var(--clay-light);}
.status-moss{background:var(--moss-pale);color:var(--moss);border-color:var(--moss-light);}
.status-earth{background:#f0e4d4;color:var(--earth);border-color:var(--earth-light);}
.status-bark{background:var(--cream-dark);color:var(--bark-mid);border-color:var(--bark-mid);}
.media-note{font-size:12px;color:var(--bark-mid);font-style:italic;margin-top:4px;padding-left:26px;}

/* ── PHOTOS ───────────────────────────────────────────── */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.photo-item{border:2px solid var(--cream-dark);border-radius:var(--radius);overflow:hidden;background:var(--cream-dark);transition:border-color 0.2s;}
.photo-item:hover{border-color:var(--clay);}
.photo-item img{width:100%;height:120px;object-fit:cover;display:block;}
.photo-item figcaption{font-size:11px;font-family:var(--fm);color:var(--bark-mid);padding:4px 6px;text-align:center;}

/* ── PROJECTS ─────────────────────────────────────────── */
.project-card{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:10px;border-bottom:1px dashed var(--cream-dark);}
.project-card:last-child{border-bottom:none;}
.project-img{width:120px;height:90px;object-fit:cover;border:2px solid var(--cream-dark);border-radius:var(--radius);}
.project-title{font-family:var(--fp);font-size:18px;color:var(--clay);margin-bottom:2px;}
.project-date{font-family:var(--fm);font-size:11px;color:var(--bark-mid);margin-bottom:4px;}
.project-desc{font-size:13px;color:var(--bark);line-height:1.5;margin-bottom:6px;}
.project-link{font-family:var(--fm);font-size:12px;color:var(--moss);}

.empty-note{font-family:var(--fm);font-size:12px;color:var(--bark-mid);font-style:italic;}

.site-footer{text-align:center;padding:20px 0 10px;border-top:3px double var(--clay);margin-top:20px;}
.visitor-counter{display:inline-block;background:var(--bark);color:#00ff88;font-family:var(--fm);font-size:14px;letter-spacing:4px;padding:4px 16px;border:2px inset #555;margin-bottom:8px;}
.footer-text{font-family:var(--fm);font-size:10px;color:var(--bark-mid);letter-spacing:1px;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream-dark);}
::-webkit-scrollbar-thumb{background:var(--clay-light);border:2px solid var(--cream);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--clay);}

@media(max-width:640px){
  .main-grid{grid-template-columns:1fr;}
  .site-title{font-size:36px;}
  .project-card{grid-template-columns:1fr;}
  .project-img{width:100%;height:140px;}
}