:root {
      --pink: #ff85b3;
      --pink-deep: #f45f9b;
      --blue: #91d8ff;
      --blue-deep: #529fc9;
      --cream: #fff8f0;
      --lavender: #c8a6e8;
      --cotton: #ffcee3;
      --ink: #51445d;
      --white: #ffffff;
      --line: #f4b7d1;
      --shadow: #f6d4e3;
      --body-font: 'Nunito', 'Trebuchet MS', sans-serif;
      --heading-font: 'Quicksand', 'Trebuchet MS', sans-serif;
      --pixel-font: 'Share Tech Mono', monospace;
      --sidebar-width: 250px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 24px; }
    body {
      margin: 0;
      color: var(--ink);
      background-color: var(--cream);
      background-image:
        radial-gradient(circle, rgba(255,133,179,.20) 1.15px, transparent 1.4px),
        linear-gradient(135deg, rgba(145,216,255,.11), transparent 45%);
      background-size: 18px 18px, 100% 100%;
      font-family: var(--body-font);
      font-size: 15px;
      line-height: 1.65;
    }
    a { color: var(--blue-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
    a:hover { color: var(--pink-deep); }
    ::selection { color: var(--ink); background: var(--cotton); }
    img { max-width: 100%; height: auto; }

    .site-shell {
      width: min(1160px, calc(100% - 34px));
      margin: 28px auto;
      display: grid;
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .sidebar {
      position: sticky;
      top: 22px;
      padding: 16px;
      background: rgba(255,255,255,.84);
      border: 2px solid var(--pink);
      border-radius: 18px 18px 34px 18px;
      box-shadow: 7px 7px 0 var(--shadow);
      text-align: center;
      overflow: hidden;
    }
    .sidebar::before {
      content: "✦  ♡  ✦";
      display: block;
      color: var(--pink-deep);
      font-family: var(--pixel-font);
      letter-spacing: 5px;
      font-size: 13px;
      margin-bottom: 9px;
    }
    .avatar-frame {
      width: 142px;
      height: 142px;
      margin: 0 auto 12px;
      display: grid;
      place-items: center;
      position: relative;
      border: 3px solid var(--white);
      outline: 2px dashed var(--pink);
      border-radius: 50%;
      background: linear-gradient(145deg, var(--cotton), var(--blue), var(--lavender));
      box-shadow: 0 0 0 6px #fff3f8;
      overflow: hidden;
    }
    .avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-placeholder {
      color: var(--white);
      font-size: 54px;
      line-height: 1;
      text-shadow: 2px 2px 0 var(--pink-deep);
    }
    .avatar-note {
      margin: 18px 0 2px;
      color: var(--blue-deep);
      font: 11px var(--pixel-font);
      letter-spacing: 1px;
    }
    .site-title {
      margin: 4px 0 0;
      color: var(--pink-deep);
      font: 700 26px/1.08 var(--heading-font);
      text-shadow: 1px 2px 0 #ffe1ee;
    }
    .site-title span { display: block; color: var(--blue-deep); font-size: 20px; }
    .tagline { margin: 10px 0 13px; font-size: 13px; }
    .tiny-badge {
      display: inline-block;
      margin: 2px;
      padding: 3px 8px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fff5fa;
      color: var(--pink-deep);
      font: 11px var(--pixel-font);
    }
    .nav-label {
      margin: 20px 0 7px;
      padding-bottom: 5px;
      border-bottom: 1px dashed var(--line);
      color: var(--blue-deep);
      font: 12px var(--pixel-font);
      letter-spacing: 1px;
      text-align: left;
    }
    .site-nav { display: grid; gap: 7px; }
    .site-nav a {
      display: block;
      padding: 7px 10px;
      border: 1px solid #f9d8e6;
      border-radius: 9px;
      background: #fff9fc;
      color: var(--ink);
      text-align: left;
      text-decoration: none;
      font-size: 13px;
      transition: transform .15s ease, background .15s ease;
    }
    .site-nav a:hover { transform: translateX(3px); background: #eaf8ff; border-color: var(--blue); }
    .nav-icon { display: inline-block; width: 23px; color: var(--pink-deep); }
    .sidebar-footer { margin-top: 17px; padding-top: 10px; border-top: 1px dashed var(--line); font: 10px var(--pixel-font); color: #927e9f; }

    .main-column { min-width: 0; }
    .top-banner {
      position: relative;
      padding: 25px 28px 22px;
      border: 2px solid var(--blue);
      border-radius: 20px 20px 9px 20px;
      background: rgba(255,255,255,.88);
      box-shadow: 7px 7px 0 #d8effc;
      overflow: hidden;
    }
    .top-banner::after {
      content: "♡";
      position: absolute;
      right: 19px;
      top: -26px;
      color: rgba(255,133,179,.22);
      font-size: 125px;
      transform: rotate(13deg);
      pointer-events: none;
    }
    .pixel-label { color: var(--blue-deep); font: 12px var(--pixel-font); letter-spacing: 1px; }
    .banner-heading {
      position: relative;
      z-index: 1;
      margin: 4px 0 6px;
      color: var(--pink-deep);
      font: 700 clamp(28px, 4vw, 43px)/1.12 var(--heading-font);
    }
    .banner-heading em { color: var(--blue-deep); font-style: normal; }
    .banner-copy { max-width: 650px; margin: 8px 0 0; }
    .banner-stickers { position: relative; z-index: 1; margin-top: 13px; }

    .section-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 30px 0 13px;
      color: var(--pink-deep);
      font: 700 22px var(--heading-font);
    }
    .section-heading::after { content: ""; flex: 1; border-top: 2px dotted var(--line); }
    .section-heading small { color: var(--blue-deep); font: 11px var(--pixel-font); white-space: nowrap; }

    .post-card {
      margin-bottom: 18px;
      padding: 20px;
      border: 2px solid var(--line);
      border-radius: 14px 22px 14px 22px;
      background: rgba(255,255,255,.92);
      box-shadow: 5px 5px 0 rgba(255,206,227,.72);
    }
    .post-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      margin-bottom: 9px;
      color: var(--blue-deep);
      font: 11px var(--pixel-font);
    }
    .post-meta span { padding: 3px 7px; border-radius: 5px; background: #eaf8ff; }
    .post-card h3 { margin: 0 0 8px; color: var(--pink-deep); font: 700 23px/1.25 var(--heading-font); }
    .post-card p:first-of-type { margin-top: 0; }
    .post-card p:last-child { margin-bottom: 0; }
    .sticker {
      display: inline-block;
      padding: 4px 9px;
      border: 1px dashed var(--pink-deep);
      border-radius: 6px;
      background: #fff0f7;
      color: var(--pink-deep);
      font: 11px var(--pixel-font);
      transform: rotate(-1deg);
    }
    .note-box { padding: 13px 15px; border-left: 4px solid var(--blue); background: #eff9ff; border-radius: 0 10px 10px 0; }
    .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .mini-card { padding: 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fff8fc; }
    .mini-card h4 { margin: 0 0 7px; color: var(--blue-deep); font: 700 17px var(--heading-font); }
    .mini-card p { margin: 0; font-size: 14px; }

    .gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
    .gallery-tile {
      min-height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      border: 2px solid white;
      outline: 1px dashed var(--line);
      border-radius: 8px;
      background: linear-gradient(145deg, #ffe0ee, #fff8f0);
      color: var(--ink);
      text-decoration: none;
      overflow: hidden;
    }
    .gallery-tile:nth-child(2n) { background: linear-gradient(145deg, #dff4ff, #f8edff); }
    .gallery-tile:nth-child(3n) { background: linear-gradient(145deg, #f1e5ff, #fff1f7); }
    .gallery-emoji { font-size: 30px; text-align: center; padding-top: 10px; }
    .gallery-caption { font: 11px var(--pixel-font); text-align: center; }
    .gallery-tile:hover { outline: 2px solid var(--pink); transform: translateY(-2px); }

    .music-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #f4c8dc; }
    .music-line:last-child { border-bottom: 0; padding-bottom: 0; }
    .music-disc { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--pink), var(--blue), var(--lavender), var(--pink)); border: 4px solid #fff1f7; box-shadow: 0 0 0 1px var(--line); }
    .music-disc span { width: 10px; height: 10px; border-radius: 50%; background: var(--cream); }
    .music-details strong { display: block; color: var(--pink-deep); }
    .music-details small { color: #927e9f; font: 11px var(--pixel-font); }

    .guestbook-form label { display: block; margin: 10px 0 5px; font-weight: 800; }
    .guestbook-form input, .guestbook-form textarea {
      width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
      background: #fffafd; color: var(--ink); font: 14px var(--body-font);
    }
    .guestbook-form button {
      margin-top: 10px; padding: 9px 15px; border: 0; border-radius: 8px;
      background: var(--pink); color: white; font: 700 14px var(--heading-font); cursor: pointer;
      box-shadow: 3px 3px 0 #f5d0e0;
    }
    .guestbook-form button:hover { background: var(--pink-deep); }
    .form-hint { color: #927e9f; font-size: 12px; }

    .footer {
      margin: 28px 0 10px;
      padding: 16px;
      border: 1px dashed var(--blue);
      border-radius: 12px;
      background: rgba(255,255,255,.8);
      text-align: center;
      font: 11px var(--pixel-font);
      color: #927e9f;
    }
    .back-top { display: inline-block; margin-top: 8px; }

    @media (max-width: 780px) {
      .site-shell { width: min(650px, calc(100% - 20px)); margin: 12px auto; grid-template-columns: 1fr; gap: 18px; }
      .sidebar { position: relative; top: auto; }
      .site-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .nav-label { text-align: center; }
      .sidebar-footer { margin-top: 12px; }
      .top-banner { padding: 21px; }
      .two-col { grid-template-columns: 1fr; }
    }
    @media (max-width: 430px) {
      .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .post-card { padding: 15px; }
      .site-nav { grid-template-columns: 1fr 1fr; }
      .section-heading { font-size: 19px; }
    }

/* Multi-page navigation + homepage preview cards */
.site-nav a[aria-current="page"] { background: var(--cotton); border-color: var(--pink-deep); color: var(--ink); font-weight: 800; }
.preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.preview-card { display:block; background:rgba(255,255,255,.9); border:2px solid var(--line); border-radius:15px; padding:17px; color:var(--ink); text-decoration:none; box-shadow:3px 3px 0 var(--shadow); transition:transform .15s ease, box-shadow .15s ease; }
.preview-card:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--shadow); color:var(--ink); }
.preview-card h3 { margin:5px 0 7px; color:var(--pink-deep); }
.preview-card p { margin:0; }
.preview-card .preview-icon { font-size:25px; }
.page-intro { margin:0 0 18px; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.collection-item { min-height:145px; border:2px dashed var(--pink); border-radius:14px; background:linear-gradient(135deg,#fff 0%,#fff0f7 100%); padding:16px; text-align:center; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.collection-item .collection-art { font-size:30px; letter-spacing:3px; }
.collection-item small { color:var(--blue-deep); }
@media(max-width:600px){.preview-grid,.collection-grid{grid-template-columns:1fr;}}