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

:root {
  --bg: #0c0b09;
  --amber: #c8924a;
  --cream: #FBAF00;
  --blue: #3f4ac4;
  --yg: #74B446;
  --dg: #3fad43;
  --gold: #ffd639;
  --muted: #5a5248;
  --dim: #2a2520;
  --win-bg: #f0eeea;
  --win-border: rgba(255, 255, 255, 0.08);
}
html, body {
width:100%; height:100%;
background: var(--bg);
color: var(--cream);
font-family: ‘DM Mono’, monospace;
overflow-x: hidden;
overflow-y: auto;
cursor: default;
user-select: none;
}



/* ── LOCK ── */
#lock {
position:fixed; inset:0; z-index:9000;
background: #515de0;
background: radial-gradient(circle,rgba(81, 93, 224, 1) 0%, rgba(129, 184, 129, 1) 50%, rgba(255, 214, 57, 1) 100%);
display:flex; align-items:center; justify-content:center;
transition: opacity .9s ease, transform .9s ease;
}
#lock.hide { opacity:0; transform:translateY(-20px); pointer-events:none; }
.lk-inner { display:flex; flex-direction:column; align-items:center; gap:44px; max-width:300px; width:100%; padding:0 20px; }
.lk-title { font-family:‘Cormorant’,serif; font-size:5rem; font-weight:300; font-style:italic; line-height:.88; letter-spacing:-.04em; color:var(--win-bg); text-align:center; }
.lk-title em { color:var(--win-bg); display:block; }
.lk-tag { font-size:.5rem; letter-spacing:.3em; color:var(--dg); text-transform:uppercase; text-align:center; margin-top:10px; }
.lk-fields { width:100%; display:flex; flex-direction:column; gap:12px; }
.lk-inp { width:100%; background:transparent; border:none; border-bottom:1px solid var(--dim); color:var(--yg); font-family:‘DM Mono’,monospace; font-size:1rem; letter-spacing:.16em; padding:11px 0; outline:none; transition:border-color .2s; }
.lk-inp::placeholder { color:var(--dim); }
.lk-inp:focus { border-color:var(--amber); }
.lk-btn { width:100%; background:transparent; border:1px solid var(--dim); color:var(--amber); font-family:‘DM Mono’,monospace; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; padding:12px; cursor:none; transition:background .2s,color .2s; }
.lk-btn:hover { background:var(--blue); color:var(--yg); }
.lk-err { font-size:.55rem; letter-spacing:.15em; color:#904030; text-transform:uppercase; text-align:center; min-height:14px; }

/* ── DESKTOP ── */
#desktop {
position:fixed; inset:0;
opacity:0; transition:opacity .7s ease .1s;
display:flex; flex-direction:column;
}
#desktop.on { opacity:1; }

/* ── MENUBAR ── */
#menubar {
height:28px; background:var(--blue);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,.06);
display:flex; align-items:center;
padding:0 16px; gap:20px;
flex-shrink:0; z-index:500;
}
.mb-logo { font-family:‘Cormorant’,serif; font-size:.9rem; font-style:italic; color:greenyellow; font-weight:700; }
.mb-item { font-size:.55rem; letter-spacing:.1em; color:rgba(226,217,204,.5); text-transform:capitalize; cursor:none; }
.mb-item:hover { color:var(--cream); }
.mb-right { margin-left:auto; display:flex; gap:14px; align-items:center; }
#mb-clock { font-size:.55rem; letter-spacing:.08em; color:rgba(226,217,204,.6); }

/* ── WALLPAPER / ICON GRID ── */
#wallpaper {
flex:1; position:relative; overflow:hidden;
background-image: url('./sims.jpg');
background-size:cover; background-position:center 65%;
filter: saturate(1.2) contrast(1.05);
}
#wallpaper::before {
content:’’; position:absolute; inset:0;
background:rgba(12,11,9,.55); z-index:0;
}


/* hero text on wallpaper */
.wp-hero {
position:absolute; bottom:100px; left:56px; z-index:2;
}
.wp-hero-name {
font-family:‘Cormorant’,serif;
font-size:clamp(3rem,6vw,5.5rem);
font-weight:300; line-height:.9;
letter-spacing:-.04em; color:yellowgreen;
}
.wp-hero-name em { color:yellowgreen; font-style:italic; display:block; }


/* desktop icons scattered */
.desk-icons {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.desk-icons .d-icon {
  pointer-events: all;
}
.d-icon {
display:flex; flex-direction:column; align-items:center; gap:5px;
padding:8px; border-radius:10px; cursor:none;
transition:background .15s;
}
.d-icon:hover { background:rgba(255,255,255,.08); }
.d-icon:hover .d-icon-img { transform:scale(1.08); }
.d-icon-img {
width:68px; height:68px; border-radius:14px; object-fit:cover;
box-shadow:0 4px 20px rgba(0,0,0,.6);
transition:transform .2s;
overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.d-icon-img img { width:100%; height:100%; object-fit:cover; border-radius:14px; filter:saturate(.65) brightness(.8); }
.d-icon-img.no-img { background:rgba(30,25,20,.8); font-size:1.8rem; }
.d-icon-label {
font-size:.5rem; letter-spacing:.06em;
color: #ffffff; text-align:center;
text-shadow:0 1px 4px rgba(0,0,0,.9);
max-width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── DOCK ── */
#dock {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:100;
  display:flex; align-items:flex-end; gap:6px;
  padding:8px 14px 10px;
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius:18px;
  box-shadow: none;
}
.dk-item {
display:flex; flex-direction:column; align-items:center; gap:0;
position:relative; cursor:none;
}
.dk-item:hover .dk-label { opacity:1; transform:translateY(0); }
.dk-btn {
  width:52px; height:52px; border-radius:13px; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:default;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  background:none;
  padding:0;
  overflow:hidden;
}
.dk-btn:hover { transform:translateY(-10px) scale(1.2); }
.dk-btn img { width:100%; height:100%; border-radius:13px; display:block; }

.dk-btn.active-dot::after {
content:’’; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
width:4px; height:4px; border-radius:50%; background:var(--amber);
}
.dk-label {
position:absolute; bottom:calc(100% + 10px);
font-size:.5rem; letter-spacing:.1em;
color:#ffffff;
background:rgba(20,17,13,.9);
border:1px solid rgba(255,255,255,.08);
padding:4px 10px; border-radius:6px;
white-space:nowrap; pointer-events:none;
opacity:0; transform:translateY(6px);
transition:opacity .15s, transform .15s;
}
.dk-sep { width:1px; height:34px; background:rgba(255,255,255,.07); align-self:center; margin:0 3px; }

/* dock icon colors */
.ic-home  { background:linear-gradient(145deg,#1a1612,#2e2518); }
.ic-film  { background:linear-gradient(145deg,#1a0e18,#2d1628); }
.ic-music { background:linear-gradient(145deg,#0c1420,#162236); }
.ic-book  { background:linear-gradient(145deg,#1a1408,#2e2210); }
.ic-pod   { background:linear-gradient(145deg,#0e1a10,#162e18); }
.ic-food  { background:linear-gradient(145deg,#1e100a,#341a0e); }
.ic-lock  { background:linear-gradient(145deg,#181412,#281e18); }
.ic-cal   { background: linear-gradient(145deg, #1a1a2e, #2a2a4a); }
.ic-photos { background: linear-gradient(145deg, #1a0e10, #3a1a20); }
.ic-notes { background: linear-gradient(145deg, #1e1a08, #3a3010); }

/* ── WINDOWS ── */
.win {
position:absolute;
min-width:380px; max-width:680px; width:480px;
background:#f0eeea;
backdrop-filter:blur(40px) saturate(180%);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
box-shadow:0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.5);
z-index:200;
display:none;
flex-direction:column;
overflow:hidden;
transition:opacity .2s ease, transform .2s ease;
}
.win.open { display:flex; }
.win.appear { animation: winPop .22s cubic-bezier(.34,1.4,.64,1) forwards; }
@keyframes winPop {
from { opacity:0; transform:scale(.9) translateY(12px); }
to   { opacity:1; transform:scale(1) translateY(0); }
}
.win.closing { animation: winClose .18s ease forwards; }
@keyframes winClose {
from { opacity:1; transform:scale(1); }
to   { opacity:0; transform:scale(.92) translateY(8px); }
}

/* title bar */
.win-bar {
  height:40px; display:flex; align-items:center; padding:0 14px; gap:8px;
  background: #e8e5e0;
  border-bottom:1px solid rgba(0,0,0,.08);
  flex-shrink:0;
  cursor:move;
}

.win-dots { display:flex; gap:7px; }
.win-dot {
width:13px; height:13px; border-radius:50%; cursor:none;
display:flex; align-items:center; justify-content:center;
font-size:8px; color:transparent; transition:color .1s;
}
.win-dot:hover { color:rgba(0,0,0,.5); }
.dot-r { background:#ff5f57; }
.dot-y { background:#febc2e; }
.dot-g { background:#28c840; }
.win-title { flex:1; text-align:center; font-size:.58rem; letter-spacing:.12em; color:rgba(0,0,0,.4); }

/* window body */
.win-body { overflow-y:auto; flex:1; max-height:60vh; scrollbar-width:thin; scrollbar-color:#ccc transparent; background:#f5f4f0; }
.win-body::-webkit-scrollbar { width:3px; }
.win-body::-webkit-scrollbar-thumb { background:var(--dim); border-radius:2px; }

/* entry detail layout */
.wd-hero { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:saturate(.7) brightness(.8); }
.wd-body { padding:22px 24px 28px; background:#f5f4f0; }
.wd-title { font-family:'Cormorant',serif; font-size:1.8rem; font-weight:400; line-height:1; letter-spacing:-.02em; color:#1a1714; margin-bottom:6px; }
.wd-meta { font-size:.52rem; letter-spacing:.22em; color:#c8924a; text-transform:uppercase; margin-bottom:16px; }
.wd-blurb { font-size:.78rem; font-weight:300; color:#3a3530; line-height:1.85; }



/* month-picker window */
.month-list-win { padding:8px 0; }
.month-row { padding:10px 20px; font-size:.68rem; letter-spacing:.1em; color:#3a3530; cursor:default; display:flex; align-items:center; justify-content:space-between; transition:background .15s; border-bottom:1px solid rgba(0,0,0,.06); background:#f5f4f0; }
.month-row:hover { background:#edeae4; color:#1a1714; }
.month-row em { font-family:'Cormorant',serif; font-style:italic; font-size:.85rem; color:#c8924a; }
.month-row-mood { font-size:.5rem; color:#8a8078; font-style:italic; }
.month-list-win { padding:8px 0; background:#f5f4f0; }


/* section window */
.sec-entry { display:flex; gap:0; border-bottom:1px solid rgba(0,0,0,.06); cursor:default; transition:background .15s; background:#f5f4f0; }
.sec-entry:hover { background:#edeae4; }
.sec-entry:last-child { border-bottom:none; }
.sec-entry-img { width:80px; height:80px; flex-shrink:0; object-fit:cover; filter:saturate(.6) brightness(.75); display:block; }
.sec-entry-img.no-img { background:rgba(30,25,20,.8); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.sec-entry-body { padding:12px 16px; display:flex; flex-direction:column; justify-content:center; }
.sec-entry-title { font-family:'Cormorant',serif; font-size:1.1rem; font-weight:400; color:#1a1714; line-height:1.1; margin-bottom:3px; }
.sec-entry-blurb { font-size:.6rem; font-weight:300; color:#5a5248; line-height:1.7; }
.sec-entry-meta { font-size:.48rem; letter-spacing:.18em; color:#c8924a; text-transform:uppercase; margin-bottom:6px; }
/* grain */
body::after { content:’’; position:fixed; inset:0; background-image:url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘300’ height=‘300’%3E%3Cfilter id=‘g’%3E%3CfeTurbulence type=‘fractalNoise’ baseFrequency=’.8’ numOctaves=‘4’ stitchTiles=‘stitch’/%3E%3C/filter%3E%3Crect width=‘300’ height=‘300’ filter=‘url(%23g)’ opacity=’.04’/%3E%3C/svg%3E”); opacity:.3; pointer-events:none; z-index:9990; }

.notes-nav-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  cursor:default;
  transition:background .15s;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.notes-nav-item:hover { background:rgba(0,0,0,.04); }
.notes-nav-item.active { background:rgba(0,0,0,.06); }
.notes-nav-icon { display:none; }
.notes-nav-title { font-size:.75rem; letter-spacing:.02em; color:#1a1714; font-family:'Georgia',serif; }
.notes-nav-item.active .notes-nav-title { color:#1a1714; }
.notes-nav-count { font-size:.65rem; color:#aaa; }

@media (max-width:700px) {
.win { min-width:300px; width:92vw; max-width:92vw; }
.wp-hero { left:20px; bottom:120px; }
.wp-hero-name { font-size:2.4rem; }
.desk-icons { right:8px; top:8px; }
.d-icon-img { width:52px; height:52px; }
}

/* ── MOBILE & TABLET ── */
@media (max-width: 768px) {
  /* dock smaller and scrollable */
  #dock {
    gap: 4px;
    padding: 6px 10px 8px;
    max-width: 95vw;
    overflow-x: auto;
    scrollbar-width: none;
    bottom: 10px;
  }
  #dock::-webkit-scrollbar { display: none; }
  .dk-btn { width: 42px; height: 42px; }

  /* menubar */
  #menubar { padding: 0 10px; gap: 12px; }
  

  /* hero text */
  .wp-hero { left: 16px; bottom: 110px; }
  .wp-hero-name { font-size: 2.2rem; }
  .wp-hero-note { font-size: .6rem; max-width: 260px; }

  /* windows full width on mobile */
  .win {
    min-width: unset;
    width: 92vw !important;
    max-width: 92vw;
    left: 4vw !important;
  }

  /* desktop icons tighter */
  .d-icon-img { width: 52px; height: 52px; }
  .d-icon-label { font-size: .45rem; }
}

@media (max-width: 480px) {
  .wp-hero-name { font-size: 1.8rem; }
  .wp-hero-note { display: none; }
  .dk-btn { width: 36px; height: 36px; }
  .dk-label { display: none; }
}
@keyframes badgePop {
  from { transform:scale(0); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}

@media (max-width: 768px) {
  /* menubar */
  #menubar { padding: 0 10px; gap: 10px; }
  .mb-item { font-size: .5rem; }
  .mb-logo { font-size: .75rem; }
  .mb-right { display: none; }

  /* hero */
  .wp-hero { left: 16px; bottom: 130px; }
  .wp-hero-name { font-size: 2rem; }

  /* dock — scrollable, full width */
  #dock {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    gap: 4px;
    padding: 6px 10px 8px;
    max-width: 92vw;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #dock::-webkit-scrollbar { display: none; }
  .dk-btn { width: 42px; height: 42px; border-radius: 10px; }
  .dk-label { display: none; }
  .dk-sep { height: 24px; }

  /* windows full width */
  .win {
    min-width: unset !important;
    width: 92vw !important;
    max-width: 92vw !important;
    left: 4vw !important;
  }

  /* desktop icons — spread wider on mobile */
  .desk-icons { inset: 0; }
}