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

body {
    background: #f3f5f6;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: -0.5px;
    color: #241010;
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding-bottom: 25px; /* same as footer height to avoid overlap */
    background-image: linear-gradient(to bottom, rgb(239, 46, 28), rgb(168, 224, 214) 20%, rgb(200, 205, 205) 30%, rgb(219, 225, 225) );
    
}

/* LEFT SIDE NAVIGATION */
.side-nav {
    position: fixed;
    left: 40px;
    top: 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}


.side-nav a {
    color: #241010;
    text-decoration: none;
    font-size: 14px;
}

/* Default: no underline */
.side-nav a {
    text-decoration: none;
}

/* INDEX active */
.page-index .side-nav a[href="../index.html"],
.page-index .side-nav a[href="index.html"] {
    text-decoration: underline;
}

/* ABOUT active */
.page-about .side-nav a[href="../about.html"],
.page-about .side-nav a[href="about.html"] {
    text-decoration: underline;
}

/* MY NOTES active — applies to ANY notes page */
.page-my-notes .side-nav a[href="../my-notes.html"],
.page-my-notes .side-nav a[href="my-notes.html"] {
    text-decoration: underline;
}


/* MAIN COLUMN */
.content {
    width: 700px;
    margin: 0 auto;
    padding-top: 80px;
    margin-left: 500px; 
}

/* HEADLINE */
.headline {
    font-size: 36px;
     width: 80%;
    margin-bottom: 30px;
    letter-spacing: -4px;
        line-height: 1;
        margin-left: 0px;
}

.subcopy {
    font-size: 18px;
    width: 90%;
    line-height: 1.4;
    margin-bottom: 40px;
      color: #241010;
}

.textcopy {
    font-size: 16px;
    width: 95%;
    line-height: 1.2;
    margin-bottom: 0px;
    text-align: left;
    letter-spacing: -0.5px;
    color: #241010;
    white-space: pre-wrap;
    color:rgb(178, 169, 169);
    mix-blend-mode:difference;
}

.textcopy-local {
    font-size: 16px;
    width: 95%;
    line-height: 1.2;
    margin-bottom: 0px;
    text-align: left;
    letter-spacing: -0.5px;
    color: #241010;
    white-space: pre-wrap;
}

.bodycopy {
    font-size: 18px;
    width: 95%;
    line-height: 1.5;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: -0.5px;
    color: #241010;
}

/* TAGS + SORT */
.tag-row {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 14px;
    margin-bottom: 30px;
}

.tag-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #241010;
    cursor: pointer;
}

/* RGB TAG COLOR CODING */
.blog {
    background: rgb(201, 0, 1);
}

.writing {
    background: rgb(255, 132, 0);
}


.conspiracy {
    background: rgb(0, 181, 0);
}

.history {
    background: rgb(221, 181, 4);
}
.art {
    background: rgb(191, 0, 166);
}
.forum {
    background: rgb(0, 182, 173);
}
.inexplicable {
    background: rgb(45, 0, 112);
}
.arctic {
    background: rgb(3, 138, 168);
}

/* SORT DROPDOWN */
.sort-controls select {
    border: none;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
}

/* GRID LAYOUT */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 20px);
    gap: 2px;
    margin-top: 20px;
}

/* SINGLE GRID ITEM */
.grid-item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}


/* NEW EXPAND PART 
 Expand/Collapse Button */
.toggle-btn {
    margin-bottom: 20px;
    padding: 6px 10px;
    background: #241010;
    color: #f6f3f3;
    border: none;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: -0.5px;
}

.clear-btn {
    margin-bottom: 20px;
    padding: 6px 10px;
    background: #f6f3f3;
    color: #241010;
    border: 1 px ;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: -0.5px;
}

/* Expanded mode list layout */
.expanded .grid {
    display: block;
}

.expanded .grid-item {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 50%; /* keep dot shape */
}

/* Title shown in expanded mode */
.item-title {
    margin-left: 15px;
    font-size: 14px;
    letter-spacing: -0.5px;
    text-decoration: underline;
}

/* Notes area */
.item-notes {
    margin-left: auto;
    width: 250px;
    font-size: 14px;
    letter-spacing: -0.5px;
}
/*
.expanded .grid > div {
    border-bottom: 1px dashed #241010;
    padding-bottom: 10px;
}

.grid-item {
    position: relative;
}

/* Tooltip on hover */
.grid-item:hover::after {
    content: attr(data-title);
    position: absolute;
    top: -28px;
    left: 0;
    background: #f6f3f3;
    padding: 4px 6px;
    border: 1px solid #241010;
    font-size: 12px;
    white-space: nowrap;
    z-index: 999;
}

/* FLOATING LANES BETWEEN NAV & CONTENT */
#float-lanes {
    position: fixed;
    left: 250px;
    top: 0;
    height: 100vh;
    display: flex;
    gap: 20px;       /* ✅ exact 20px between lanes */
    pointer-events: none;
    z-index: 2;
}

/* EACH LANE */
.float-lane {
    position: relative;   /* ✅ creates its own positioning context */
    width: 18px;          /* exactly the dot width */
    height: 100%;
}

/* FLOATING DOT */
.float-dot {
    position: absolute;
    left: 0;              /* ✅ LOCKS dot inside its lane */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
}


/*////////////*

/* TAG BAR AT TOP */
.tag-bar {
  display: flex;
  gap: 16px;
  margin: 40px 0 30px 0;
  font-size: 14px;
}

.tag-bar span {
  cursor: pointer;
  user-select: none;
}

/* ARTICLE LIST */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.note-row {
  display: grid;
  grid-template-columns: auto 24px 1fr 200px;
  align-items: left;
  gap: 12px;
}

/* DOT */
.note-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* TITLE */
.note-title {
  font-size: 14px;
  text-decoration: underline;
  background:transparent;
  color: #241010;
}


/* DATE */
.note-date {
  font-size: 14px;
  opacity: 1;
  text-align: right;
}

/* WORD TAGS (RIGHT) */
.note-tags {
  display: flex;
  gap: 10px;
}

/* PLAIN WORD TAGS */
.word-tag {
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

/* COLOR SYSTEM */
.word-tag.blog, .note-title.blog { color: rgb(201, 0, 0); }
.word-tag.writing, .note-title.writing { color: rgb(255, 132, 0); }
.word-tag.conspiracy, .note-title.conspiracy { color: rgb(0, 181, 0); }
.word-tag.history, .note-title.history { color: rgb(221, 181, 4); }
.word-tag.forum, .note-title.forum { color: rgb(0, 182, 173); }
.word-tag.art, .note-title.art { color: rgb(191, 0, 166); }
.word-tag.inexplicable, .note-title.inexplicable { color: rgb(45, 0, 112); }

.word-tag:hover {
  text-decoration: underline;
}

/*Images */
.text-with-image {
    position: relative;
}

/* image behind text */
.bg-image {
    position: absolute;
    top: -500px;
    left: -1800px;
    width: auto;        /* ← control size freely */
    height: auto;
    opacity: 1;       /* optional */
    z-index: 0;
}

.bg-image-full {
    position: absolute;
    top: -0px;
    left: 0px;
    width: auto;        /* ← control size freely */
    height: auto;
    opacity: 1;       /* optional */
    z-index: 0;
}

/* text above image */
.text-with-image h1,
.text-with-image p {
    position: relative;
    z-index: 1;
}



.float-image {
    float: left;
    width: 340px;               /* size similar to screenshot */
    margin: 0 12px 12px -150px; /* RIGHT push, BOTTOM space, LEFT pull-out */
}

.float-image img {
    width: 100%;
    margin-bottom:7px;
    margin-top:7px;
    height: auto;
    display: block;
    mix-blend-mode:overlay;
}

.float-image .caption {
    font-size: 14px;  
    text-align: left;
    margin-top: 6px;
    line-height: 1.3;  
    mix-blend-mode:normal; 
    text-decoration:underline; 
    color:rgb(86, 80, 80); 
}

.image-strip {
  position: relative;
      width: 100%;
    margin-bottom:7px;
    margin-top:7px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(168, 224, 214),
    transparent
  );
}

.image-strip::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: 0;
  bottom: 0;
  background: inherit;
  z-index: -1;
}



.footnote {
    text-indent: 50px;
    font-size: 14px;  
    text-align: left;
    margin-top: 6px;
    margin-bottom: 10px;
    line-height: 1.5;
    width:65%;
    color: #4e4545; 
}

#notes-subnav {
    display: none;
    margin-top: -20px;
    margin-left: 65px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-my-notes #notes-subnav {
    display: flex;
}

.note-link-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    position: relative;
    cursor: pointer;
}

.note-link-dot.blog { background: rgb(201, 0, 0); }
.note-link-dot.writing { background: rgb(255, 132, 0); }
.note-link-dot.conspiracy { background: rgb(0, 181, 0); }
.note-link-dot.history { background: rgb(221, 181, 4); }
.note-link-dot.art { background: rgb(191, 0, 166); }
.note-link-dot.forum { background: rgb(0, 182, 173); }
.note-link-dot.inexplicable { background: rgb(45, 0, 112); }
.note-link-dot.arctic { background: rgb(3, 138, 168); }


.note-link {
    background: none !important;
}


.note-link.blog { color: rgb(201, 0, 0); }
.note-link.writing { color: rgb(255, 132, 0); }
.note-link.conspiracy { color: rgb(0, 181, 0); }
.note-link.history { color: rgb(221, 181, 4); }
.note-link.art { color: rgb(191, 0, 166); }
.note-link.forum { color: rgb(0, 182, 173); }
.note-link.inexplicable { color: rgb(45, 0, 112); }
.note-link.arctic { color: rgb(3, 138, 168); }

.note-link.active-note {
    text-decoration: underline;
    
}

.note-link-dot::after {
    content: attr(data-title);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 14px;
    color: #241010;
    background: #f3f5f6;
    padding: 2px 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.note-link-dot:hover::after {
    opacity: 1;
}

.note-link-dot.active-note {
    outline: 1px solid #241010;
    outline-offset: 2px;
}

/* COMIC VIEWER */

.comic-viewer {
  margin-top: 40px;
  width: 100%;
}

.comic-frame {
  position: relative;
  width: 100%;
  max-width: 700px;
}

.comic-frame img {
  display: block;
  width: 100%;
}

/* overlay image */
#comicOverlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
  pointer-events: none;
}

/* hover effect */
.comic-frame:hover #comicOverlay {
  opacity: 50%;
  mix-blend-mode: normal;
}

/* controls */
.comic-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  font-size: 14px;
}

.comic-controls button {
  background: none;
  border: 1px solid #000;
  padding: 4px 10px;
  cursor: pointer;
}

/*///////////*/


/* HOTSPOT CONTAINER */
.hotspot {
  position: absolute;
}

/* THE X */
.hotspot-x {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #870909f6;
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
  text-indent: -9999px; /* hides the character */
}


/* SPEECH BUBBLE */
.bubble {
  position: absolute;
  top: 0;
  left: 60px;          /* space from dot */
  min-width: 300px;    /* ✅ REQUIRED */
  max-width: 320px;    /* optional, prevents huge blocks */
  background: #fff;
  color: #000;
  padding: 10px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  border: 1px solid #000;
  display: none;
  z-index: 10;
  white-space: pre-line;
  letter-spacing: -0.03em;
  
}

.bubble {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hotspot:hover .bubble {
  display: block;
  opacity: 1;
}

#hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* LITTLE TAIL */
.bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
}

/* SHOW ON HOVER */
.hotspot:hover .bubble {
  display: block;
}

/* HEADER AREA */
.comic-header {
  position: relative;
  z-index: 3;
  background: transparent;
  margin-bottom: 40px;
}

/* FULL WIDTH COMIC */
.comic-page {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* escape centered layout */
}

/* IMAGE */
.comic-bg {
  width: 100vw;
  height: auto;
  display: block;
}

html.view-my-notes,
body.view-my-notes {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}


/* VIEWER AREA */
.viewer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  overflow-x: auto;
  overflow-y: hidden;

  background: #000;
}

/* WRAPS THE IMAGE */
.image-wrapper {
  align-items: stretch;
}

.image-wrapper {
  position: relative;   /* 🔑 REQUIRED */
  height: 100vh;
  display: inline-block;
  align-items: stretch;
  display: flex;
}


/* THE IMAGE ITSELF */
.image-wrapper img {
  height: 100vh;
  width: auto;

  transform-origin: left center;
  transition: transform 0.15s ease;
  user-select: none;
  pointer-events: none;
}

.hotspot1 {
  position: absolute;
}

.hotspot-x1 {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #870909f6;
  mix-blend-mode: difference;
  opacity: 1;
  cursor: pointer;
  user-select: none;

  font-size: 0;      /* 🔑 hides text */
  line-height: 18px;
  
}

.bubble1 {
  position: absolute;
  top: 0;
  left: 60px;
  min-width: 300px;
  background: #fff;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: #000;
  padding: 10px 12px;
  border: 1px solid #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.hotspot1:hover .bubble1 {
  opacity: 1;
  pointer-events: auto;
}

.panorama {
  height: 100vh;
  width: auto;
  flex-shrink: 0;         /* 🔑 prevents squishing */
}

.intro-overlay {
  display: block;
  position: absolute;
  top: 135px;
    white-space: pre-line;
  left: 200px;
 text-indent: 100px;
  color:#241010;
  z-index: 20;
  max-width: 320px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.05em;
}

.site-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #8a857d; /* light beige-gray */
    text-align: left;
    padding: 0px 30px 10px;
    background: transparent;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}