/* Winter Quill
   bujo: a bullet journal page. dot-grid paper, washi tape, handwriting, bright winter colours */

:root {
  --paper: #f3f9ff;
  --dot: #c8d9f5;
  --card: #ffffff;
  --ink: #2e1c55;
  --ink-soft: #6a5c8f;
  --line: rgba(46, 28, 85, .12);
  --sky: #8fd3ff;
  --lavender: #9670f7;
  --teal: #70ccf7;
  --teal-deep: #2a9fd6;
  --orange: #ff8a3d;
  --mint: #8ff0c9;

  --sans: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --hand: "Gaegu", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  /* dot-grid notebook paper */
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) 1.3px, transparent 1.6px);
  background-size: 24px 24px;
}

a { color: inherit; }

.layout {
  --index-w: 250px;
  padding: 64px 40px 56px calc(var(--index-w) + 56px);
}

.page {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- the index (menu): a strip of notebook paper pinned to the left edge ---------- */

.index {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 5;
  width: var(--index-w);
  padding: 64px 28px 24px 24px;
  background: var(--card);
  box-shadow: 6px 0 24px -16px rgba(46, 28, 85, .4);
}
/* the tape runs down the seam between the index and the page */
.index .tape {
  top: 0; bottom: 0; left: auto; right: -13px;
  width: 26px; height: auto;
  margin: 0;
  background: repeating-linear-gradient(-45deg, rgba(150, 112, 247, .5) 0 7px, rgba(214, 200, 255, .65) 7px 14px);
  transform: none;
}

.index-title {
  margin: 0 0 12px 6px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
.index-title::after {
  content: "";
  display: block;
  width: 64px;
  margin-top: 4px;
  border-bottom: 3px solid var(--orange);
  border-radius: 3px;
}

.index ul { margin: 0; padding: 0; list-style: none; }
.index a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px;
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 6px;
}
.index .label { white-space: nowrap; }
.index .bullet { width: 12px; color: var(--lavender); text-align: center; }
.index .leader {
  flex: 1;
  min-width: 10px;
  border-bottom: 2px dotted var(--dot);
  transform: translateY(-5px);
}
.index .pg { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.index a:hover .label,
.index a[aria-current="page"] .label {
  background: linear-gradient(transparent 50%, rgba(112, 204, 247, .55) 50% 92%, transparent 92%);
}
.index a[aria-current="page"] { font-weight: 700; }
.index a[aria-current="page"] .bullet { color: var(--teal-deep); }
/* stories nest under "short stories", like sub-entries in a bujo index */
.index .sub a { padding-left: 24px; font-size: 20px; }
.index .sub .bullet { color: var(--ink-soft); }

/* ---------- shared bits ---------- */

.tape {
  position: absolute;
  display: block;
  width: 120px; height: 28px;
  top: -14px; left: 50%;
  margin-left: -60px;
  background: repeating-linear-gradient(45deg, rgba(112, 204, 247, .6) 0 7px, rgba(196, 236, 252, .7) 7px 14px);
  transform: rotate(-3deg);
}

.margin-note {
  margin: 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

mark {
  color: inherit;
  background: linear-gradient(transparent 50%, rgba(255, 168, 92, .75) 50% 90%, transparent 90%);
  padding: 0 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the taped-in note at the top ---------- */

.hello {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 40px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(46, 28, 85, .35);
  transform: rotate(-1deg);
}
.hello h1 {
  margin: 0;
  font-weight: 700;
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1.25;
  text-align: center;
}
/* ---------- journal writing, straight on the paper ---------- */

.journal {
  max-width: min(clamp(640px, 52vw, 860px), calc(100% - 120px));
  margin: 48px auto 0;
  font-size: 18px;
  line-height: 1.75;
}
.journal p { margin: 0 0 1.15em; }
.journal::after { content: ""; display: block; clear: both; }

/* a pencil doodle in the margin: it sticks out past the text column,
   and the text wraps around the drawing's own outline (shape-outside, set inline) */
.doodle {
  float: right;
  width: 230px;
  height: auto;
  margin: -6px -64px 6px 10px;
  shape-image-threshold: .1;
  shape-margin: 14px;
}

/* ---------- the cards ---------- */

.cards {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(46, 28, 85, .35);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 var(--line), 0 18px 34px -18px rgba(46, 28, 85, .45);
}

.kind {
  margin-bottom: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.name {
  font-size: 29px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.blurb {
  margin: 10px 0 20px;
  flex-grow: 1;
  color: var(--ink-soft);
}
.go {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.margin-note-card {
  position: absolute;
  top: -30px; right: 8px;
  transform: rotate(5deg);
}

.read-time {
  margin: -10px 0 18px;
  font-family: var(--hand);
  font-size: 19px;
  color: var(--ink-soft);
}

/* colour sets: a strong edge colour plus a light tint for labels and buttons */
.c-orange   { --edge: var(--orange);   --tint: #ffd3b0; }
.c-teal     { --edge: var(--teal);     --tint: #c9ecfc; }
.c-lavender { --edge: var(--lavender); --tint: #d9ccff; }
/* the candy pink from the early drafts, back as a fourth story colour so the
   three card columns don't repeat colours all the way down */
.c-pink     { --edge: #ff5fa8;         --tint: #ffc6df; }
.card[class*="c-"], .story[class*="c-"] { border-top: 6px solid var(--edge); }
[class*="c-"] .kind, [class*="c-"] .go, .kind[class*="c-"] { background: var(--tint); }

a:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }

/* faux cards: stories not on the site yet, drawn like pencilled-in bujo entries */
.card.faux {
  border: 2px dashed rgba(46, 28, 85, .22);
  border-top: 6px dashed var(--edge);
  background: rgba(255, 255, 255, .55);
  box-shadow: none;
  cursor: default;
}
.card.faux:hover { transform: none; box-shadow: none; }
.card.faux .name { color: var(--ink-soft); }
.card.faux .go {
  background: transparent;
  border: 2px dashed var(--edge);
  color: var(--ink-soft);
  font-family: var(--hand);
  font-size: 19px;
  font-weight: 700;
  padding: 3px 14px;
}

/* ---------- reading a story ---------- */

/* a story's title note is taped down in that story's colour */
.hello[class*="c-"] .tape {
  background: repeating-linear-gradient(45deg, var(--edge) 0 7px, var(--tint) 7px 14px);
  opacity: .75;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.story-tags .kind { margin: 0; }

.story {
  max-width: clamp(700px, 50vw, 860px);
  margin: 40px auto 0;
  padding: 48px 56px 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -22px rgba(46, 28, 85, .35);
}
.story p {
  margin: 0 0 1.15em;
  font-size: 18.5px;
  line-height: 1.75;
}
/* a scene break inside a story: the same ✦✦✦ as the end mark, but in light gray */
.story .scene-break {
  margin: 1.6em 0;
  text-align: center;
  letter-spacing: .6em;
  color: #c9c6d3;
}

.story-end {
  margin: 2em 0 0 !important;
  text-align: center;
  letter-spacing: .6em;
  color: var(--edge);
}

.signoff {
  margin: 40px 0 0;
  text-align: center;
  font-family: var(--hand);
  font-size: 21px;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* ---------- homepage: doodles and notes you can push around ---------- */

/* the board covers the paper to the right of the index; only its items catch the pointer */
.board {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--index-w);
  z-index: 2;
  pointer-events: none;
}
.board > * {
  position: absolute;
  left: 0; top: 0;
  visibility: hidden; /* until the script has scattered them */
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform: rotate(var(--r, 0deg));
  transition: transform .12s ease, filter .12s ease;
}
.board.ready > * { visibility: visible; }
.board img { height: auto; -webkit-user-drag: none; }
/* picked up: lift it a little, like peeling a sticker */
.board .dragging {
  cursor: grabbing;
  transform: rotate(var(--r, 0deg)) scale(1.06);
  filter: drop-shadow(0 10px 12px rgba(46, 28, 85, .25));
}

.d-writer { width: 210px; }
.d-hugo   { width: 190px; }
.d-panim  { width: 110px; }

.drag-note {
  padding: 6px 10px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  white-space: nowrap;
}
.n-teal     { color: var(--teal-deep); }
.n-lavender { color: var(--lavender); }
.n-orange   { color: #db661c; } /* darker than --orange so thin handwriting reads on the paper */

/* ---------- smaller screens ---------- */

/* below this the index becomes a strip across the top, taped along its bottom edge */
@media (max-width: 980px) {
  .layout { padding: 0 24px 48px; }
  .index {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 -24px 60px;
    padding: 18px 16px 16px;
    box-shadow: 0 6px 24px -16px rgba(46, 28, 85, .4);
  }
  .index .tape {
    top: auto; bottom: -13px; left: 0; right: 0;
    width: auto; height: 26px;
    background: repeating-linear-gradient(45deg, rgba(150, 112, 247, .5) 0 7px, rgba(214, 200, 255, .65) 7px 14px);
  }
  .index-title { display: none; }
  .index ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
  .index .leader, .index .pg, .index .sub { display: none; }
  .journal { max-width: 640px; }
  .doodle { width: 180px; margin-right: -16px; }
  .board { left: 0; }
  .d-writer { width: 160px; }
  .d-hugo   { width: 145px; }
  .d-panim  { width: 84px; }
  .drag-note { font-size: 23px; }
}

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 520px) {
  .layout { padding: 0 16px 40px; }
  .index { margin: 0 -16px 52px; }
  .index a { font-size: 20px; }
  .hello { padding: 22px 22px 18px; }
  .hello h1 { font-size: 26px; }
  .story { padding: 30px 20px 28px; }
  .journal { font-size: 17px; }
  .doodle { width: 130px; margin-right: -6px; }
  .d-writer { width: 120px; }
  .d-hugo   { width: 110px; }
  .d-panim  { width: 64px; }
  .drag-note { font-size: 20px; padding: 4px 6px; }
  .story p { font-size: 17.5px; line-height: 1.7; }
}