:root {
  --bg: #faf4f7;                             /* Soft light pink background */
  --frame: rgba(169, 132, 103, 0.95);         /* Strong magenta frame with more opacity */
  --paper: #fff9fc;                          /* Soft off-white with a pink tint for content */
  --ink: #1a0d14;                            /* Keep deep purple/brown for strong text contrast */
  --accent: #ff69b4;                         /* Vibrant pink (keep as-is for buttons/hover) */
  --accent-dark: #b30059;                   /* Slightly softened deep magenta for contrast */
  --panel: rgba(240, 234, 210, 0);        /* Increase opacity for readability */
  --panel-dark: rgba(240, 234, 210, 1);        /* Full-opacity dark green for strength */
  --entry-bg: rgba(255, 225, 235, 1);        /* Soft pink background for guestbook entries */
  --entry-border: rgba(240, 234, 210, 1);                  /* Keep the bold magenta for borders */
  --feature-bg: rgba(255, 190, 210, 0.95);   /* Light pink with more visibility for overlays */
}



/* Global */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font: 14px/1.6 "ui-sans-serif", system-ui;
  color: var(--ink);
  background: url('borders.png') center/cover no-repeat;
  overflow: hidden;
  font-smoothing: antialiased;
  cursor: url('cursor.cur'), auto;
}

.page-frame {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  height: 90vh;
  margin: 40px auto 0 auto; /* Adds 40px space from the top */
  background: url('bobbyjack.png') center/cover no-repeat;
  border-radius: 1px;

  overflow: hidden;
  backdrop-filter: blur(3px);
}


/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* push logo left, hamburger right */
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 0px solid var(--accent-dark);
   cursor: url('cursor.cur'), auto;
}

.site-header .logo {
  text-decoration: none;
  color: #fff;
  font-variant: small-caps;
  letter-spacing: .12em;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
   cursor: url('cursor.cur'), auto;
}
.tiny-link {
  background: none;
  border: 0;

  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}

.hamburger {
  display: none; /* still hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0; /* remove previous spacing */
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Mobile hamburger */
@media (max-width:680px) {
  .hamburger {
    display: flex;
  }
}


/* Layout Grid */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr 360px;
  gap: 1px;
  flex: 1;
  height: calc(100% - 72px);
  padding: 16px;
  min-height: 0;
}

/* Sidebar */
.sidebar {
  background: var(--panel);
  padding: 12px;
  font-weight: bold;
  overflow-y: auto;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.005);
  backdrop-filter: blur(3px);
   cursor: url('cursor.cur'), auto;
}
.menu + .menu { margin-top: 16px; }
.menu h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: .25rem 0;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
   cursor: url('cursor.cur'), auto;
}
.menu a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: .1rem .8rem;
  margin:.3rem 0;
  background: var(--entry-bg);
  border-radius: 1px;
  border: 1px solid rgba(0,0,0,.2);
  transition: all 0.2s ease;
  backdrop-filter: blur(2px);
   cursor: url('cursor.cur'), auto;
}
.menu a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(3px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
   cursor: url('cursor.cur'), auto;
}

/* Content Column */
.content-column {
  background: var(--paper);
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  backdrop-filter: blur(3px);
   cursor: url('cursor.cur'), auto;
}

/* Tab Content Container */
.tab-content-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
   cursor: url('cursor.cur'), auto;
}

/* Tab Content */
.tab-content { 
  display: none; 
  padding: 1rem 0; 
   cursor: url('cursor.cur'), auto;
}
.tab-content.active { display: block; }


/* Feature Box */
.feature {
  background: var(--feature-bg);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(3px);
}
.feature-inner {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 40%, rgba(255,255,255,1) 100%);
  color: var(--ink);
}
.feature-title { font-size: 14px; margin-bottom: .5rem; font-weight: bold; }
.feature-card {
  display: inline-block;
  border-radius: 1px;
  background: var(--paper);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  backdrop-filter: blur(2px);
}
.feature-card img { 
  display: block; 
  width: 100%; 
  height: auto; 
  max-width: 300px;
  border-radius: 1px;
}

/* Footer */
.site-footer {
  padding: 12px 16px;
  border-radius: 0 0 1px 1px;

  color: #fff;
  text-align: right;

  backdrop-filter: blur(3px);
}

/* Guestbook Entries */
#guestbook-entries .entry {
  background: var(--entry-bg);
  border-left: 4px solid var(--entry-border);
  padding: .6rem;
  margin: .5rem 0 .7rem;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  backdrop-filter: blur(2px);
  font: 14px/1.6 "ui-sans-serif", system-ui;
}
#guestbook-form input,
#guestbook-form textarea,
#guestbook-form button {
  width: 100%;
  padding: 3px;
  margin-bottom: 8px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
}

/* Shop Layout */
#shop .shop-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
#shop .shop-container section {
  width: 100%;
  max-width: 400px;
  text-align: center;
  background: var(--paper);
  border-radius: 1px;
  padding: 12px;
  backdrop-filter: blur(3px);
}
#shop .shop-container section img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  border-radius: 1px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width:1000px) { .layout { grid-template-columns: 200px 1fr; } .feature { display: none; } }
@media (max-width:680px) {
  .sidebar { position: fixed; top: 2; left: -250px; width: 220px; height: 100%; z-index: 1000; overflow-y: auto; transition: left .3s ease; }
  .sidebar.open { left:0; }
  .layout { grid-template-columns: 1fr; gap: 12px; height: calc(100% - 60px); }
  .content-column { order: 1; height: 100%; }
  .hamburger { display: flex; }
}


/* Aspect ratio wrapper for iframes */
.aspect-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  margin-bottom: 1rem;
}
.aspect-ratio iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  backdrop-filter: blur(2px);
}

/* Nina embeds taller */
.nina-wrapper { position: relative; width: 100%; padding-top: 80.5%; overflow: hidden; margin-bottom: 0rem; }
.nina-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
 cursor: url('cursor.cur'), auto;
}
/* Urban Dictionary embed tweaks */
.ud-embed {
  max-width: 500px;
  background: rgba(243,243,243,0.9);
  border: 1px solid rgba(209,209,209,0.7);
  border-radius: 1px;
  padding: 16px;
  font-family: Arial, sans-serif;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.15);
  margin: 20px auto;
  backdrop-filter: blur(3px);
}
.ud-embed h3 { margin-top: 0; color: #333; }
.ud-embed blockquote { margin: 12px 0; padding-left: 12px; border-left: 3px solid rgba(153,153,153,0.6); color: #555; font-style: italic; }
.ud-embed a { color: #1a0dab; text-decoration: none; }
.ud-embed a:hover { text-decoration: underline; }

.h3 {
  margin-left: 4px;
}

@font-face {
  font-family: 'Bigspit';
  src: url('fonts/Bigspit-dJ6V.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.logo {
  font-family: 'Bigspit', cursive; /* fallback: cursive */
  font-size: 2.5rem;
  color: #ff69b4; /* optional cute color */
  text-decoration: none;
}

/* Style the entire scrollbar */
::-webkit-scrollbar {
  width: 12px; /* For vertical scrollbar */
  height: 12px; /* For horizontal scrollbar */
}

/* Style the scrollbar thumb (draggable handle) */
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 225, 235, 1);
  border-radius: 6px;
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
  background-color: rgba(240, 234, 210, 1);
}

/* Style the scrollbar on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 190, 210, 1);  
}

/* Import the Fine Books font */
@font-face {
  font-family: 'FineBooks';
  src: url('fonts/Old Bookshop HK.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Apply it to the guestbook element */
#guestbook {
  font-family: 'FineBooks', cursive; /* fallback: cursive */
  font-size: 1.5rem; /* adjust size as needed */
  color: #ff69b4;    /* optional cute color */
  text-decoration: none; /* remove underline if any */
}

 .section-image {
      display: block;
      max-width: 310px; /* small image */
      margin: 0.5rem 0 1rem 0; /* spacing below h2 */
     
    }