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

/* ── VARIABLES ───────────────────────────── */
:root {
  --pink:        #e8a0bc;
  --pink-soft:   #f5d5e4;
  --purple:      #9b7fc4;
  --purple-soft: #d9cff0;
  --blue:        #7aadd4;
  --blue-soft:   #c8dff0;
  --yellow-soft: #fdf8e1;
  --text:        #3d3450;
  --text-muted:  #8a7fa8;
  --white:       rgba(255,255,255,0.82);
}

/* ── BASE ────────────────────────────────── */
html, body {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
}

body {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}


/* ── SWIRLY BORDER ───────────────────────── */
.swirl-border {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  width: 100vw;
  height: 100vh;
}

/* ── NAVBAR ──────────────────────────────── */
nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 60px);
  max-width: 960px;
  
  /* 🛠️ UPDATED: Changed vertical padding from 0.4rem to 0.55rem to give the bigger cat some room */
  padding: 0.55rem 1.4rem;
  
  border-radius: 999px;
  background: var(--white);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 24px rgba(134, 127, 196, 0.1);
}

.nav-cat {
  /* 🛠️ UPDATED: Increased from 52px to 72px to make the cat logo noticeably bigger */
  width: 72px;
  height: 72px;
  
  object-fit: contain;
  flex-shrink: 0;
  animation: navBob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 8px rgba(122,173,212,0.22)); /* Slightly enhanced shadow for the larger scale */
}


.nav-links {
  display: flex;
  list-style: none;
  gap: 0.2rem;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.nav-links a:hover {
  background: var(--purple-soft);
  color: var(--purple);
}

/* ── NAV SOCIAL BUTTONS ──────────────────── */
.nav-socials {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  align-items: center;
}

.nav-social-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--blue);
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(122, 173, 212, 0.3);
  background: rgba(200, 223, 240, 0.18);
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.nav-social-btn:hover {
  background: var(--blue-soft);
  color: #4a88b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(122, 173, 212, 0.2);
}

.nav-social-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* ── PAGE LAYOUT ─────────────────────────── */
.page-layout {
  position: relative;
  z-index: 3;
  height: 100vh;                  /* 🛠️ CHANGED: Lock it strictly to 100% viewport height */
  overflow: hidden;               /* 🛠️ ADDED: Hard stop—cuts off any extra space so the user CANNOT scroll */
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 100px 5vw 0px 6vw;     /* 🛠️ UPDATED: Removed bottom padding so elements can sit flush if needed */
  gap: 2rem;
  max-width: 1250px; 
}

/* ── HERO ────────────────────────────────── */
.hero {
  flex: 1;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-name {
  font-family: "Magilio", serif;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  max-width: 900;
  font-weight: 300;
  line-height: 1.05;
  color: var(--text);
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.35s;
  margin-bottom: 1px;
}


.hero-subtitle {
  margin-top: 1px;
  font-family: "DM Serif Display", serif;
  font-size: clamp(0.6rem, 1.5vw, 1.2rem);
  margin-left: 20px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.5s;
}

.hero-desc {
  font-family: "Patrick Hand", sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  margin-left: 25px;
  color: var(--text-muted);
  max-width: 380px;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.65s;
}

.hero-links {
  display: flex;
  gap: 1rem;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.8s;
}

/* ── BUTTONS ─────────────────────────────── */
.btn {
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: white;
  box-shadow: 0 4px 20px rgba(155,127,196,0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(155,127,196,0.4);
}

.btn-ghost {
  background: var(--white);
  color: var(--text-muted);
  border: 1px solid rgba(155,127,196,0.25);
}

.btn-ghost:hover {
  background: var(--purple-soft);
  color: var(--purple);
  transform: translateY(-2px);
}

/* ── GOJO + BOARD SIDE ───────────────────── */
.gojo-side {
  /* 🛠️ KEEP THESE AS THEY WERE */
  position: relative;
  display: inline-block; 
  width: 390px;            
  flex-shrink: 0;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.9s;
  margin-left: auto;
  margin-right: 14vw;       

  /* 🛠️ REMOVE the margin-top: auto; and margin-bottom lines. USE THIS INSTEAD: */
  top: 17vh; /* 📐 Nudges them down by 8% of the screen height. No scrolling created! */
}

.gojo-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; 
  filter: drop-shadow(0 8px 24px rgba(155,127,196,0.15));
  margin-top: -12px;
  pointer-events: none;
}


/* ── GOJO IMAGE BACKGROUND ───────────────── */
.gojo-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; /* Keeps Gojo behind the text */
}

/* ── PROJECT BOARD (sits perfectly inside Gojo's sign) ─────── */
.project-board {
  position: absolute;
  z-index: 5;
  
  top: 13%;      /* 🛠️ Tweak this slightly to align the text vertically inside the bigger sign */
  height: 56%;   
  left: 6%;     
  width: 88%;   
  
  padding: 20px 18px 12px; /* 🛠️ Slightly increased padding for the larger board size */
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.board-heading {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}

.board-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px; /* ⏳ Shrunk from 8px 8px to pull everything upward */
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 2px; /* ⏳ Shrunk from 4px to pull items closer together */
  background: transparent; 
}

.board-item img {
  width: 26px;        /* Increased from 20px */
  height: 26px;       /* Increased from 20px */
  object-fit: contain;
}

.board-icon {
  font-size: 1.4rem;  /* Makes sure emoji text scales up if you use raw emojis */
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(232,160,188,0));
  transition: filter 0.2s, transform 0.2s;
}

.board-item:last-child { margin-bottom: 0; }

.board-item:hover {
  background: var(--pink-soft); /* This will highlight the item beautifully when hovered inside the board */
  transform: translateX(3px);
}

.board-item:hover .board-icon {
  animation: iconPop 0.4s ease;
}

@keyframes iconPop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1);    }
}


.board-item:hover .board-icon {
  filter: drop-shadow(0 0 8px rgba(232,160,188,0.7));
}

.board-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.board-title {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  font-size: 0.95rem; /* Handwritten fonts usually need to be a tiny bit larger to read easily */
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.board-stack {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  font-size: 0.78rem; /* Slightly bumped up so the handwritten text is easy to read */
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-transform: lowercase; /* Forces "Python · XGBoost" to be "python · xgboost" */
}

.board-arrow {
  font-size: 0.8rem;
  color: var(--purple);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.board-item:hover .board-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.board-hint {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--blue), #000 15%);
  opacity: 0.5;
  text-align: center;
  margin-top: 4px; /* ⏳ Shrunk from 10px to lift it back inside the frame */
  letter-spacing: 0.05em;
  animation: hintFade 3s ease-in-out infinite;
}

@keyframes hintFade {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.65; }
}

/* ── MODAL OVERLAY ───────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(61,52,80,0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: white;
  border-radius: 18px;
  width: min(700px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
  transform: translateY(40px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  opacity: 0;
  box-shadow: 0 24px 80px rgba(61,52,80,0.18);
}

.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-project-img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: var(--pink-soft);
  border: none;
  color: var(--pink);
  font-size: 0.85rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}

.modal-close:hover {
  background: var(--pink);
  color: white;
  transform: rotate(90deg);
}

/* ── SCRAPBOOK MODAL INNER ───────────────── */
.modal-tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.5rem;
}

.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.scrapbook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

/* coloured placeholder card */
.scrap-card {
  border-radius: 10px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 🛠️ ADDED THIS: Prevents wide project pictures from leaking over the rounded corners */
  overflow: hidden; 
  padding: 0 !important; 
}

/* sticky note */
.scrap-note {
  background: var(--yellow-soft);
  border-radius: 6px;
  padding: 1rem 1rem 1rem 1.1rem;
  font-family: 'Caveat', cursive;
  font-size: 1rem;
  line-height: 1.65;
  color: #5a4f3a;
  transform: rotate(1deg);
  box-shadow: 2px 3px 12px rgba(0,0,0,0.07);
  position: relative;
}

.scrap-note::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 16px;
  background: rgba(232,160,188,0.55);
  border-radius: 3px;
}

.scrap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.scrap-chip {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink);
  border: 1px solid rgba(232,160,188,0.4);
}

.scrap-chip.blue   { background: var(--blue-soft);   color: var(--blue);   border-color: rgba(122,173,212,0.4); }
.scrap-chip.purple { background: var(--purple-soft); color: var(--purple); border-color: rgba(155,127,196,0.4); }

.modal-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

/* ── ANIMATIONS ──────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── FLOATING WIDGETS ────────────────────── */
@keyframes drift {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-5px) rotate(0.4deg); }
  66%       { transform: translateY(-2px) rotate(-0.3deg); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.35); }
}

/* ── FLOATING WIDGETS ────────────────────── */
.widget {
  position: fixed;            
  
  /* 🛠️ ULTIMATE OVERRIDE: Fasten them strictly to the screen's right edge, bypassing any max-width grid boxes */
  right: 40px;                 
  
  background: rgba(255, 255, 255, 0.88); 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(155, 127, 196, 0.4); 
  border-radius: 20px;        
  padding: 18px 20px;         
  width: 210px;               
  right: 200px;
  box-shadow:
    0 8px 32px rgba(134, 127, 196, 0.18),
    0 2px 8px rgba(134, 127, 196, 0.1);
   
  z-index: 10;
  animation: drift 6s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.3s ease;
  cursor: default;
}
.widget-exp {
  top: 170px;
  animation-delay: 0s;
}

.widget-exploring {
  top: calc(170px + 215px);
  animation-delay: -2.8s;
}

.widget:hover {
  transform: translateY(-4px) rotate(0.6deg) !important;
  box-shadow:
    0 10px 32px rgba(122, 173, 212, 0.2),
    0 2px 8px rgba(122, 173, 212, 0.1);
  animation-play-state: paused;
}


.widget-label {
  font-size: 0.75rem;         
  font-weight: 700;            /* 🛠️ Thicker font-weight */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);        /* 🛠️ Changed from blue to your vibrant purple to stand out */
  margin-bottom: 12px;        
  display: flex;
  align-items: center;
  gap: 4px;
}

.widget-tags li {
  font-size: 0.9rem;           /* 🛠️ Slightly larger text */
  font-weight: 500;            /* 🛠️ Slightly bolder */
  color: #3d3450;              /* 🛠️ Much darker charcoal-purple color to pop against the white card */
  font-family: 'Patrick Hand', sans-serif;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
}

.wtag-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  opacity: 0.65;
  flex-shrink: 0;
  animation: pulse-dot 3s ease-in-out infinite;
}
.widget-tags li:nth-child(2) .wtag-dot { animation-delay: -1s; }
.widget-tags li:nth-child(3) .wtag-dot { animation-delay: -2s; }

/* Experience Log list */
.widget-list {
   color: #3d3450;  
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.widget-list li {
  font-size: 0.9rem;           /* 🛠️ Slightly larger text */
  font-weight: 500;            /* 🛠️ Slightly bolder */
  color: #3d3450;              /* 🛠️ Much darker charcoal-purple color to pop against the white card */
  font-family: 'Patrick Hand', sans-serif;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}

.exp-dot {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  opacity: 0.75;
  flex-shrink: 0;
  animation: pulse-dot 3s ease-in-out infinite;
}
.widget-list li:nth-child(2) .exp-dot { animation-delay: -1s; }
.widget-list li:nth-child(3) .exp-dot { animation-delay: -2s; }

/* Subtle separator between label and items */
.widget-exp .widget-label {
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(200, 223, 240, 0.5);
  margin-bottom: 8px;
}

.modal-box::-webkit-scrollbar { width: 5px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: var(--purple-soft); border-radius: 999px; }

/* ── DIARY / PROJECTS VIEW ───────────────── */
@keyframes diaryFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0)    rotate(0deg);  }
}

@keyframes cardOut {
  from { opacity: 1; transform: translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateY(-18px) scale(0.96); }
}

.diary-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(220, 210, 235, 0.35);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  align-items: center;
  justify-content: center;
  animation: diaryFadeIn 0.35s ease;
}

.diary-overlay.open {
  display: flex;
}

.diary-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 820px;
  width: 92vw;
}

/* Spine */
.diary-spine {
  width: 36px;
  background: linear-gradient(180deg, var(--purple-soft) 0%, var(--blue-soft) 100%);
  border-radius: 14px 0 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
  box-shadow: inset -2px 0 8px rgba(155,127,196,0.12);
}

.spine-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--purple);
  opacity: 0.7;
}

.spine-star {
  font-size: 0.7rem;
  color: var(--pink);
  opacity: 0.6;
}

/* Main book */
.diary-book {
  flex: 1;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: 0 18px 18px 0;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 20px 60px rgba(155,127,196,0.18), 0 4px 16px rgba(0,0,0,0.06);
  min-height: 520px;
  /* subtle lined paper texture */
  background-image:
    linear-gradient(rgba(200,223,240,0.18) 1px, transparent 1px);
  background-size: 100% 38px;
  background-color: rgba(255,255,255,0.88);
}

.diary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(155,127,196,0.25);
  flex-shrink: 0;
}

.diary-title {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 1rem;
  color: var(--purple);
  letter-spacing: 0.06em;
  flex: 1;
}

.diary-page-count {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--purple-soft);
  padding: 3px 10px;
  border-radius: 999px;
}

.diary-close {
  background: none;
  border: 1px solid rgba(155,127,196,0.3);
  color: var(--text-muted);
  font-size: 0.8rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.diary-close:hover {
  background: var(--pink-soft);
  color: var(--pink);
  border-color: transparent;
}

/* Card stage */
.diary-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each diary card */
.diary-card {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 18px;
  animation: cardIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.diary-card.active {
  display: flex;
}

.diary-card.exiting {
  animation: cardOut 0.22s ease forwards;
}

.diary-card-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}



.diary-card-image {
  width: 200px;
  min-width: 200px;
  height: 150px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  
  /* 🛠️ ADDED: Slices off the screenshot corners perfectly to match the 14px border-radius */
  overflow: hidden; 
  
  /* 🛠️ REMOVED: font-size: 4rem (No longer needed for emojis) */
}

.diary-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Shows the ENTIRE dashboard image without clipping any edges */
  padding: 8px;        /* Gives it a clean border frame inside the colored block */
  display: block;
}

.diary-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diary-card-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
}

.diary-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  color: var(--text);
  line-height: 1.2;
}

.diary-card-note {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  background: var(--yellow-soft);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(200,180,100,0.15);
  position: relative;
}

/* Tape strip on the note */
.diary-card-note::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 24px;
  width: 40px;
  height: 12px;
  background: rgba(155,127,196,0.2);
  border-radius: 3px;
  transform: rotate(-1.5deg);
}

.diary-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.diary-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.diary-card-links {
  display: flex;
  gap: 10px;
}

.diary-page-stamp {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.45;
  letter-spacing: 0.05em;
}

/* Nav bar */
.diary-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px dashed rgba(155,127,196,0.2);
  flex-shrink: 0;
}

.diary-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(155,127,196,0.28);
  color: var(--purple);
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.82rem;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.diary-btn:hover:not(:disabled) {
  background: var(--purple-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(155,127,196,0.15);
}

.diary-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.diary-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.diary-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple-soft);
  border: 1.5px solid rgba(155,127,196,0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.diary-dot.active {
  background: var(--purple);
  transform: scale(1.25);
  border-color: transparent;
}

/* Nav active state */
#nav-projects.active {
  color: var(--purple) !important;
  background: var(--purple-soft) !important;
}

/* ── HELLO POPUP ─────────────────────────── */
@keyframes helloIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hello-popup {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 400;
  
  /* Swapped back to your original bright, crisp white style */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(155, 127, 196, 0.18);
  border-radius: 16px;
  
  /* Keeping the fixed width and shorter padding from image_294e47.png */
  padding: 10px 16px; 
  width: 320px; 
  
  box-shadow: 0 10px 36px rgba(155, 127, 196, 0.16), 0 2px 8px rgba(0, 0, 0, 0.05);
  flex-direction: column;
  gap: 6px; 
}

.hello-popup.open {
  display: flex;
  animation: helloIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hello-title {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  padding-bottom: 6px; /* Slightly tightened up under the header */
  border-bottom: 1px dashed rgba(155,127,196,0.25);
  margin-bottom: 2px;
}

.hello-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0; /* Keeps rows compact */
}

.hello-label {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 44px;
}

.hello-val {
  font-family: 'Patrick Hand', sans-serif;
  font-size: 0.75rem;
  color: var(--blue);
  text-decoration: none;
  
  /* 4. FIX LINK WRAPPING (Prevents the ugly middle-of-the-word split from image_29558c.png) */
  word-break: keep-all; 
  white-space: nowrap;
  
  transition: color 0.15s;
}

.hello-val:hover {
  color: var(--purple);
  text-decoration: underline;
}

/* Say hello uses the exact same pill style as other nav links */
#nav-sayhello {
  color: var(--text-muted);
}
#nav-sayhello:hover,
#nav-sayhello.open {
  background: var(--purple-soft);
  color: var(--purple);
}