/* Notes are handwritten, on a sheet of crumpled paper that unfolds when a title is picked */
.paper-notes,
.notes-panel {
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --hand-display: "Caveat", "Kalam", cursive;
  --ink: #2b2723;
  --paper: #efe5cf;
  --ink-soft: #6d6255;
  --ink-red: #9a3d2b;
  --ink-blue: #2c4a8a;
}
.content-frame .paper-notes li,
.content-frame .paper-notes p {
  font-family: var(--hand);
  font-weight: 300;
}
.content-frame .paper-notes h3 {
  font-family: var(--hand-display);
  font-size: 1.45rem;
  font-weight: 700;
}

@media (min-width: 1100px) {
  .page-layout:has(.notes-panel) {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 4.5rem);
  }
  .page-media:has(.notes-panel) {
    position: relative;
    top: auto;
  }
}

/* The sheet (desktop side panel and phone pop-up) */
.page-media:has(.notes-panel),
.paper-pop {
    --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='900'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.015' numOctaves='5' seed='11'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='7' diffuseConstant='1.08'%3E%3CfeDistantLight azimuth='40' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
  .content-frame .notes-panel {
    /* Wrinkles: fractal noise lit from one side, multiplied over cream. Then the fold creases. */
    background:
      linear-gradient(180deg, transparent calc(33.3% - 2px), rgb(60 40 20 / 0.13) 33.3%, rgb(255 255 255 / 0.55) calc(33.3% + 1px), transparent calc(33.3% + 4px)),
      linear-gradient(180deg, transparent calc(66.6% - 2px), rgb(60 40 20 / 0.13) 66.6%, rgb(255 255 255 / 0.55) calc(66.6% + 1px), transparent calc(66.6% + 4px)),
      linear-gradient(90deg, transparent calc(50% - 2px), rgb(60 40 20 / 0.09) 50%, rgb(255 255 255 / 0.45) calc(50% + 1px), transparent calc(50% + 4px)),
      var(--paper-tex) center / cover,
      /* Each folded panel catches the light a little differently, so the sheet does not read as flat. */
      linear-gradient(180deg, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.02) 33.3%, rgb(255 255 255 / 0.2) 33.4%, rgb(0 0 0 / 0.07) 66.6%, rgb(255 255 255 / 0.16) 66.7%, rgb(0 0 0 / 0.12)),
      linear-gradient(90deg, rgb(255 255 255 / 0.12), rgb(0 0 0 / 0.05) 50%, rgb(255 255 255 / 0.1) 50.1%, rgb(0 0 0 / 0.1)),
      #efe5cf;
    background-blend-mode: normal, normal, normal, multiply, normal, normal, normal;
    color: var(--ink);
    scrollbar-color: rgb(60 40 20 / 0.35) transparent;
    /* Full-length sheet, no inner scroll: notes.js lays it down level with wherever the reader is. */
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 3px;
    padding: 2.4rem 2.8rem 2.6rem;
    rotate: -0.5deg;
    transform-origin: 50% 40%;
  }
  .content-frame .notes-panel .side-card-label {
    color: var(--ink-soft);
    font-family: var(--hand);
    font-size: 16px;
  }
  .content-frame .notes-panel .notes-panel-title {
    color: var(--ink);
    font-family: var(--hand-display);
    letter-spacing: 0;
    margin-bottom: 0.2rem;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
  }
  .content-frame .notes-panel .paper-source {
    font-family: var(--hand);
    font-size: 17px;
  }
  .content-frame .notes-panel a {
    color: var(--ink-blue);
    text-decoration-color: color-mix(in srgb, var(--ink-blue) 50%, transparent);
  }
  .content-frame .notes-panel h3 {
    color: var(--ink-red);
    font-family: var(--hand-display);
    letter-spacing: 0;
    margin: 1.5rem 0 0.3rem;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .content-frame .notes-panel .content-list {
    padding-left: 1.4rem;
    list-style: none;
  }
  .content-frame .notes-panel .content-list li {
    color: var(--ink);
    font-family: var(--hand);
    margin: 0 0 0.45rem;
    font-size: 19px;
    font-weight: 300;
    line-height: 1.55;
    position: relative;
  }
  .content-frame .notes-panel .content-list li::before {
    content: "–";
    color: var(--ink-red);
    position: absolute;
    left: -1.3rem;
  }

  /* Highlights on the sheet are in ink, not the site's light text. */
  .content-frame .notes-panel [data-scramble] {
    color: var(--ink) !important;
    text-decoration-color: var(--ink-red) !important;
    border-color: var(--ink-red) !important;
  }

@media (min-width: 1100px) {
  /* Real paper: a lit mesh rendered by paper3d.js sits behind the text, which lies flat on top of it. */
  .paper-3d {
    pointer-events: none;
    z-index: -1;
    position: absolute;
  }
  .page-media:has(.notes-panel) {
    isolation: isolate;
  }
  .content-frame .notes-panel.is-3d {
    background: none;
    rotate: none;
  }
  /* Without the mesh, the CSS sheet needs its own shadow. */
  .page-media:has(.notes-panel:not(.is-3d)) {
    filter: drop-shadow(0 20px 26px rgb(0 0 0 / 0.45));
  }
}

/* Phone pop-up */
.has-pop body {
  overflow: hidden;
}
.paper-pop {
  background: rgb(0 0 0 / 0.78);
  z-index: 60;
  overscroll-behavior: contain;
  padding: 12px 8px 24px;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden auto;
}
.content-frame .paper-pop .notes-panel {
  cursor: pointer;
  /* Auto margins center a short sheet and still let a long one scroll from its top. */
  margin: auto 0;
  padding: 2.2rem 1.5rem 2rem;
  display: block;
  rotate: none;
}
.content-frame .paper-pop .notes-panel-title {
  font-size: 2.1rem;
}
.content-frame .paper-pop .content-list li {
  font-size: 18px;
}
.content-frame .paper-pop .paper-pop-hint {
  color: var(--ink-soft);
  font-family: var(--hand);
  text-align: center;
  margin: 2rem 0 0;
  font-size: 15px;
}