html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: #97867d;
}

@font-face {
  font-family: 'Baskerville';
  src: url('assets/Baskerville.woff2') format('woff2');
  font-weight: 385;
  font-style: normal;
}

/*
* {
  cursor: url('assets/Precision\ Select\ G191.cur'), auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}*/

.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  container-type: size;
}

.wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.17;
  background-image: url('assets/noise.png');
  background-size: 200px 200px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/*
a, button, .cardicon2, .tuck-btn, .mute-btn {
  cursor: url('assets/Normal\ Select\ G191.cur'), pointer;
}

p, h1, h2, h3, .content {
  cursor: url('assets/Text\ Select\ G191.cur'), text;
}*/

.material {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  background-image: url("assets/gridpapercropped.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ========================
   TWO CARD PANELS
======================== */

.card-panel {
  position: absolute;
  z-index: 10;
  transition: left 0.35s ease, top 0.35s ease;
  user-select: none;
  cursor: grab;
}

.card-panel.dragging {
  transition: none;
  cursor: grabbing;
}

#card-folders-panel {
  top: 5cqh;
  left: 2cqw;
}

#card-files-panel {
  top: 6.4cqh;   /* starting position — adjust to taste */
  left: 26.5cqw;  /* starting position — adjust to taste */
}

.tuck-btn {
  position: absolute;
  z-index: 11;
  pointer-events: visibleFill;
  transition: width 0.15s ease;
  transform: rotate(5deg);
}

#card-folders-panel .tuck-btn {
  width: 4.8cqw; /* bigger */
  right: -1.4cqw;
  top: 1.2cqw;
  filter: drop-shadow(0px 5.5px 2.6px rgba(0,0,0,0.5));
}

#card-folders-panel .tuck-btn:hover {
  width: 5cqw;
}

#card-files-panel .tuck-btn {
  width: 2.8cqw; /* smaller */
  right: -0.6cqw;
  top: 1.9cqw;
  filter: drop-shadow(0px 3.1px 3.2px rgba(0,0,0,0.44));
}

#card-files-panel .tuck-btn:hover {
  width: 3cqw;
}

/* ========================
   FOLDER CARD
======================== */

.card {
  position: relative;
  width: 42.8cqw;
  container-type: inline-size;
  background-image: url("assets/linedpapergraffiti.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(4px 4px 7px rgba(0,0,0,0.45));
}

.card-folder-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 7.65cqw;
  margin-left: 11.2cqw;
  margin-bottom: 3.65cqw;
  outline: none;
}

/* header label inside folder card */
.card-section-header {
  text-decoration: none;
  color: #2d2d2d;
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-size: 4.9cqw;
  opacity: 0.715;
  line-height: 1.068;
  outline: none;
  letter-spacing: -0.045em;
  filter: blur(0.53px) drop-shadow(0px 0px 2.4px rgba(0,0,0,0.25));
  mix-blend-mode: multiply;
}

.card a {
  transition: all 0.18s ease;
  text-decoration: none;
  color: #2d2d2d;
  font-family: 'Noto Serif', serif;
  font-weight: 300;
  font-size: 4.3cqw;
  opacity: 0.715;
  line-height: 1.068;
  outline: none;
  letter-spacing: -0.045em;
  filter: blur(0.53px) drop-shadow(0px 0px 2.4px rgba(0,0,0,0.25));
  mix-blend-mode: multiply;
  display: block;
}

.card a:hover {
  color: #5c3286;
  font-size: 4.6cqw;
  text-decoration: underline;
}

.card a.active-link {
  color: #566acf;
  opacity: 1;
  text-decoration: underline;
}

.card a.active-folder-link {
  color: #566acf;
  opacity: 1;
}

.card a.unread {
  color: #832e23;
}

.card a.unread::after {
  content: ' •';
  color: #832e23;
  font-size: 3cqw;
}

/*4e108d purple

*/

.sub-links {
  display: flex;
  flex-direction: column;
  padding-left: 2cqw;
}

.folder-link::before {
  content: '► ';
  font-size: 4cqw;
  display: inline-block;
  transition: transform 0.5s ease;
}

.folder-link.open::before {
  content: '▼ ';
}

.folder-arrow-indicator::before {
  content: '' !important;
}

.folder-arrow-indicator {
  pointer-events: none !important;
  text-decoration: none !important;
  cursor: default !important;
  opacity: 0.45;
}

@keyframes receiptBob {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(-6px); }
  50%  { transform: translateY(2px); }
  75%  { transform: translateY(-3px); }
  100% { transform: translateY(0px); }
}

.receipt-bob {
  animation: receiptBob 0.45s ease;
}

.folder-line-path {
  fill: none;
  stroke: #4a4440;
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  opacity: 0.45;
  stroke-dashoffset: 1000;
  animation: draw-line 0.6s ease forwards;
}

#folder-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  overflow: visible;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.cardicon2 {
  transition: width 0.15s ease;
  position: absolute;
  top: -6cqw;
  left: 4cqw;
  width: 16cqw;
  opacity: 0.94;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
  pointer-events: visibleFill;
  z-index: 5;
  transform: rotate(-28deg);
}

.cardicon2:hover {
  width: 17cqw;
}

/* ========================
   RECEIPT — files panel
======================== */

.receipt {
  background-image: url('assets/receipt.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top left;
  width: 24cqw;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(6px 9px 5.5px rgba(0,0,0,0.23));
}

.card-file-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 3cqw;
  margin-left: 2.5cqw;
  margin-right: 2.5cqw;
  margin-bottom: 2cqw;
  outline: none;
}

/* ENTRIES: header at top of receipt */
.receipt-header {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  font-size: 1.5cqw;
  color: #434040;
  opacity: 0.815;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  letter-spacing: -0.07em;
  margin-bottom: -0.3cqw;
  transform: rotate(-0.4deg);
  filter: blur(0.07px) contrast(106%);
}

.receipt-divider {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  font-size: 0.95cqw;
  color: #434040;
  opacity: 0.815;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  letter-spacing: -0.07em;
  transform: rotate(-0.4deg);
  filter: blur(0.07px) contrast(106%);
  margin-top: 0.2cqw;
  margin-bottom: 0cqw;
  user-select: none;
}

.receipt-total {
  margin-top: 0cqw;
  transition: all 0.18s ease;
  text-decoration: none;
  color: #434040;
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: 1cqw;
  opacity: 0.8;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  line-height: 1.08;
  outline: none;
  letter-spacing: -0.065em;
  mix-blend-mode: multiply;
  text-rendering: optimizeSpeed;
  display: block;
  transform: rotate(-0.8deg);
  filter: blur(0.07px) contrast(106%);
}

.card-file-links a {
  transition: all 0.18s ease;
  text-decoration: none;
  color: #434040;
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: 1cqw;
  opacity: 0.8;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  line-height: 1.08;
  outline: none;
  letter-spacing: -0.065em;
  mix-blend-mode: multiply;
  text-rendering: optimizeSpeed;
  display: block;
  transform: rotate(-0.8deg);
  filter: blur(0.07px) contrast(106%);
}

.card-file-links a:hover {
  color: #512e74;
  opacity: 0.77;
}

.card-file-links a.active-link {
  color: #213786;
  opacity: 0.77;
}

.card-file-links a.unread {
  color: #832e23;
}

.card-file-links a.unread::after {
  content: ' •';
  color: #832e23;
  font-size: 1cqw;
}

/* ========================
   CONTENT AREA
======================== */

.banner {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
  border-bottom: 3.2px solid rgba(64, 56, 51, 1);
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.45));
}

.wip-sticker {
  display: none;
  position: absolute;
  width: 15cqw;
  top: 5cqh;
  left: 39.35cqw;
  z-index: 20;
  opacity: 0.96;
  pointer-events: none;
  filter: drop-shadow(2px 3px 10px rgba(0,0,0,0.7));
  transition: opacity 0.1s ease;
}

.doc-header {
  margin-bottom: 2cqw;
}

.doc-dates {
  font-size: 1.2cqw;
  opacity: 0.6;
  display: block;
  margin-bottom: 0.5cqw;
}

.doc-header h2 {
  margin: 0;
  font-size: 2.5cqw;
  line-height: 100%;
}

.content-text h1, .content-text h2, .content-text h3,
.content-text h4, .content-text h5, .content-text h6,
.doc-header h2 {
  font-family: 'Baskerville', serif;
}

.content-bg {
  min-height: 100%;
  border-radius: 3px;
  background: rgba(248, 246, 246, 0.95);
  padding: 2cqw 2cqw 1cqw 2cqw;
  margin: 0 -1.69cqw;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  outline: 3.2px solid rgba(64, 56, 51, 1);
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 7.7cqw;
  padding-top: 4cqw;
  padding-bottom: 4.1cqw;
  padding-right: 4.9cqw;
  font-size: 0.96cqw;
  line-height: 123.8%;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 410;
  color: #4a4440;
  z-index: 2;
  filter: blur(0.2px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.2));
}

.content img {
  display: block;
  margin-top: 1.2cqw;
  margin-bottom: 0.1cqw;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  opacity: 1;
  border-radius: 3px;
  border: 2.4px solid rgba(33, 33, 33, 0.74);
  filter: drop-shadow(4px 0px 15px rgba(0,0,0,0.14))
    drop-shadow(0px 0px 35px rgba(0,0,0,0.15));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.content img:hover {
  transform: scale(1.035);
}

.multiply-wrapper {
  background: rgb(248, 246, 246);
  display: block;
  width: 100%;
  isolation: isolate;
}

.multiply-wrapper img {
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;
}

.content p {
  margin-top: 0px;
  margin-bottom: 1.7cqh;
}

.content h3 {
  margin-bottom: 0.48cqw;
}

.content a {
  color: #ad5147;
}

.content .video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  margin: 1cqw auto;
  border-radius: 4px;
  border: 2.6px solid rgba(33, 33, 33, 0.88);
  filter: drop-shadow(4px 0px 23px rgba(0,0,0,0.35))
    drop-shadow(0px 0px 35px rgba(0,0,0,0.15));
}

.content .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1cqw;
}

.content .grid img {
  width: 100%;
  height: auto;
}

.content .grid em {
  display: block;
  text-align: center;
  font-size: 1.2cqw;
}

.content .float-right {
  float: right;
  width: 40%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5cqw;
  margin-left: 2cqw;
}

.content .float-right img {
  height: 24cqw;
  float: none;
  margin: 0;
}

.content .float-right p {
  display: contents;
}

.content-text li p {
  filter: none;
  opacity: 1;
}

.content-text {
  mix-blend-mode: multiply;
}

.content-text h1 { color: #4a4440; opacity: 0.97; filter: blur(0.07px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.215)); }
.content-text h2 { color: #4a4440; opacity: 0.94; filter: blur(0.09px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.22)); }
.content-text h3 { color: #4a4440; opacity: 0.90; filter: blur(0.11px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.225)); }
.content-text h4 { color: #4a4440; opacity: 0.89; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.19)); }
.content-text h5 { color: #4a4440; opacity: 0.88; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.183)); }
.content-text h6 { color: #4a4440; opacity: 0.87; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.175)); }
.content-text p { color: #4a4440; opacity: 0.89; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.19)); }
.content-text blockquote { color: #4a4440; opacity: 0.88; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.183)); }
.content-text blockquote blockquote { color: #4a4440; opacity: 0.87; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.178)); }
.content-text blockquote blockquote blockquote { color: #4a4440; opacity: 0.86; filter: blur(0.10px) drop-shadow(0px 0px 3.6px rgba(0,0,0,0.175)); }
.content-text ul, .content-text ol { color: #4a4440; opacity: 0.88; filter: blur(0.08px) drop-shadow(0px 0px 2.8px rgba(0,0,0,0.15)); }
.content-text ul ul, .content-text ol ol { color: #4a4440; opacity: 0.87; filter: blur(0.07px) drop-shadow(0px 0px 2.6px rgba(0,0,0,0.14)); }
.content-text ul ul ul, .content-text ol ol ol { color: #4a4440; opacity: 0.86; filter: blur(0.07px) drop-shadow(0px 0px 2.4px rgba(0,0,0,0.13)); }

.csv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.96cqw;
  color: #4a4440;
}

.csv-table th {
  text-align: left;
  padding: 0.3cqw 0.8cqw;
  border-bottom: 1.5px solid rgba(74, 68, 64, 0.3);
  opacity: 0.7;
}

.csv-table td {
  padding: 0.3cqw 0.8cqw;
}

.csv-table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.mute-btn {
  position: absolute;
  bottom: 1.7cqh;
  left: 1cqw;
  width: 9cqw;
  z-index: 20;
  cursor: pointer;
  pointer-events: visibleFill;
  opacity: 0.94;
  transition: opacity 0.2s ease;
  filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.25));
}

.mute-btn:hover {
  opacity: 1;
  width: 9.07cqw;
}

.mute-btn.muted {
  opacity: 0.6;
}

.html-embed {
  width: 100%;
  height: 80cqh;
  border: none;
  background: transparent;
}

.full-width-img {
  width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain;
}

.top {
  top: -3.5px;
  left: 0;
  position: absolute;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%);
  width: 100%;
  height: 3cqh;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
}

.frame {
  position: absolute;
  bottom: -1.65cqw;
  right: 0;
  width: 100%;
  z-index: -10;
  pointer-events: none;
  filter: drop-shadow(7px -2px 5px rgba(0,0,0,0.3));
}

.lightbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#lightbox-img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  border: 22px solid rgb(255, 255, 255);
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.8));
  transform: scale(0.96);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.lightbox.active #lightbox-img {
  transform: scale(1);
}

.leftbg {
  position: relative;
  top: 0;
  left: 0;
  width: 44.1%;
  height: 100%;
  background-image: url("assets/leftbg.png");
  background-size: 100% 100%;
  background-position: right center;
  z-index: 5;
  filter: drop-shadow(5px 0px 23px rgba(0,0,0,0.3));
}

.leftbg img {
  position: absolute;
  bottom: 0;
  left: 3px;
  width: 94.7%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.next-page-btn {
  position: absolute;
  bottom: 0.2cqw;
  right: 5cqw;
  width: 10.3cqw;
  z-index: 11;
  pointer-events: auto;
  opacity: 1;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25)) drop-shadow(7px -2px 5px rgba(0,0,0,0.3));
  transform: scaleX(-1) translateY(100%);
  transition: width 0.15s ease;
  cursor: pointer;
}

.next-page-btn:hover {
  width: 10.7cqw;
}

.safari .content,
.safari .content-text h1, .safari .content-text h2, .safari .content-text h3,
.safari .content-text h4, .safari .content-text h5, .safari .content-text h6,
.safari .content-text p, .safari .content-text blockquote,
.safari .content-text ul, .safari .content-text ol,
.safari .card a {
  filter: none;
}

.compat-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.compat-warning.active {
  display: flex;
}

.compat-warning.visible {
  opacity: 1;
}

.compat-inner {
  position: relative;
  display: inline-block;
}

.compat-postit {
  display: block;
  width: auto;
  height: auto;
  max-width: 45vw;
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.4));
}

.compat-ok {
  position: absolute;
  /* now % is relative to the image size, easier to line up */
  bottom: 17%;
  right: 24.8%;
  width: 43%;
  height: 27%;
  cursor: pointer;
}

.info-card {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.info-card.visible {
  opacity: 1;
}

.info-card-img {
  width: auto;
  height: auto;
  max-width: 45vw;
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.4));
  cursor: default;
}