/* ===========================================================================
   SCRAPBOOK

   The last layer. Where sketch.css draws everything in marker, this one makes
   it a scrapbook: notebook paper underneath, washi tape holding things down,
   drawings kept on their own paper as taped-in polaroids, films as prints,
   flags as stamps, sealed notes as kraft envelopes, stickers with a die-cut
   white edge.

   And legibility first: quieter text is darker than before, small labels are
   bigger and not all-caps, and handwriting only appears at sizes where it
   reads easily. Nothing with a lot of text is tilted.
   =========================================================================== */

:root {
  --faint: #a1978a;
  --muted: #c8bea8;
  --print: #f7f2e6;       /* photo paper and stickers */
  --print-ink: #2e2a20;
  --kraft: #cdb38a;
  --dots: color-mix(in srgb, var(--pen) 11%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --faint: #756b58;
    --muted: #5a5243;
    --dots: color-mix(in srgb, var(--pen) 14%, transparent);
  }
}
:root[data-theme='light'] {
  --faint: #756b58;
  --muted: #5a5243;
  --dots: color-mix(in srgb, var(--pen) 14%, transparent);
}

/* notebook paper */
body {
  background-image:
    var(--grain),
    radial-gradient(var(--dots) 1.1px, transparent 1.5px);
  background-size: auto, 24px 24px;
}

/* ------------------------------------------------------------- legibility */

.card-sub, .panel-intro, .fine, .pc-date, .now-meta, .cd-label, .card-foot, .rb-summary + .card-foot { color: var(--muted); }
.wl-meta, .film-meta, .note-meta, .msg-meta, .pc-foot, .st-count span { font-size: 0.8rem; color: var(--muted); }
.field > span, .note-when, .cd-unit i, .now-eyebrow, .launch-eyebrow, .gate-eyebrow, .mc-who, .place-name, .stat span {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 700;
  color: var(--muted);
}
.place-name { text-transform: none; font-size: 0.8rem; max-width: 16ch; }
.place-day { color: var(--muted); }
.cd-unit i { font-size: 0.8rem; }
.art-empty p { font-family: var(--body); font-size: 0.95rem; letter-spacing: 0; }
.chat-empty p { font-family: var(--body); font-size: 1rem; }
.day-rule { color: var(--muted); }
.setup-note {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--wob-sm);
  border: 2px dashed color-mix(in srgb, var(--rabbit) 55%, transparent);
  background: color-mix(in srgb, var(--rabbit) 9%, transparent);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

/* ------------------------------------------------------------- washi tape */

.card, .place-card, .nowbar { position: relative; }
.card::after, .place-card::after, .nowbar::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background-color: color-mix(in srgb, var(--tape, var(--rabbit)) 62%, transparent);
  background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.22) 0 5px, transparent 5px 11px);
  clip-path: polygon(3% 8%, 97% 0, 100% 45%, 96% 100%, 4% 94%, 0 52%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
  pointer-events: none;
  z-index: 4;
}
.card:nth-child(3n + 2)::after, .place-card:nth-of-type(2)::after {
  --tape: var(--tuna);
  left: 22px;
  transform: rotate(-38deg);
  width: 80px;
  top: 2px;
  left: -18px;
}
.card:nth-child(3n + 3)::after {
  --tape: var(--heart);
  left: auto;
  right: -18px;
  top: 2px;
  width: 80px;
  transform: rotate(38deg);
}
.nowbar::after { --tape: var(--tuna); left: 30px; transform: rotate(-5deg); width: 70px; }
.cd::after { display: none; }   /* the countdown has its polaroid instead */

/* ------------------------------------------------------- highlighter heads */

.card-head {
  width: fit-content;
  padding: 0 0.2em;
  margin-left: -0.2em;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--rabbit) 30%, transparent) 55% 88%, transparent 88%);
}
.card:nth-child(3n + 2) .card-head { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--tuna) 30%, transparent) 55% 88%, transparent 88%); }
.card:nth-child(3n + 3) .card-head { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--heart) 28%, transparent) 55% 88%, transparent 88%); }

/* -------------------------------------------------------------- polaroids */

.polaroid {
  position: relative;
  margin: 0;
  padding: 8px 8px 30px;
  background: var(--print);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 4px 8px 16px -6px rgb(0 0 0 / 0.5);
  transform: rotate(4deg);
}
.polaroid img { display: block; width: 100%; height: auto; border-radius: 2px; }
.polaroid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--print-ink);
}
.polaroid::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 62px;
  height: 20px;
  transform: translateX(-50%) rotate(-4deg);
  background-color: color-mix(in srgb, var(--tuna) 60%, transparent);
  background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.22) 0 5px, transparent 5px 11px);
  clip-path: polygon(3% 8%, 97% 0, 100% 45%, 96% 100%, 4% 94%, 0 52%);
}

.cd-photo {
  position: absolute;
  right: -16px;
  top: 38px;
  width: 124px;
  z-index: 3;
  pointer-events: none;
}
.cd > :not(.cd-photo):not(.card-row) { max-width: calc(100% - 132px); }
.cd .card-row { padding-right: 0; }

.gate-photo {
  position: absolute;
  left: max(4vw, calc(50% - 500px));
  top: 50%;
  width: 210px;
  transform: translateY(-50%) rotate(-5deg);
  pointer-events: none;
}

/* ----------------------------------------------------- stickers and stamps */

/* The smug cat and the header cat get a soft shadow only (films.css). */

.pc-flag .flag-lg {
  width: 48px;
  height: 34px;
  border-radius: 1px;
  box-shadow: 0 0 0 4px var(--print), 0 0 0 5px color-mix(in srgb, var(--pen) 30%, transparent), 3px 4px 6px -2px rgb(0 0 0 / 0.4);
  transform: rotate(-5deg);
  margin: 4px 6px 4px 4px;
}
.place-card.who-tuna .pc-flag .flag-lg { transform: rotate(4deg); }

/* -------------------------------------------------- countdown as paper tags */

.cd-num { gap: 0.6rem 0.9rem; margin-top: 0.4rem; }
.cd-unit {
  justify-items: center;
  padding: 0.35rem 0.75rem 0.3rem;
  background: var(--surface-2);
  border: 2px dashed color-mix(in srgb, var(--pen) 38%, transparent);
  border-radius: var(--wob-sm);
  transform: rotate(-2deg);
}
.cd-unit:nth-child(even) { transform: rotate(1.8deg); }
.cd-unit b { line-height: 1; }

/* --------------------------------------------------------- films as prints */

.lib-grid { gap: 1.3rem 1.1rem; padding-top: 0.4rem; }
.film {
  padding: 8px 8px 0;
  background: var(--print);
  color: var(--print-ink);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 4px 8px 16px -8px rgb(0 0 0 / 0.55);
  transform: rotate(-0.7deg);
}
.film:nth-child(even) { transform: rotate(0.8deg); }
.film:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 6px 12px 20px -8px rgb(0 0 0 / 0.55); border: 0; }
.film.is-now { box-shadow: 0 0 0 3px var(--rabbit), 4px 8px 16px -8px rgb(0 0 0 / 0.55); }
.film-art { border-radius: 2px; }
.film-title { color: var(--print-ink); }
.film-meta { color: #6b6250; }
.film .btn-soft, .film .btn-ghost { background: #ece5d4; color: var(--print-ink); border-color: #3b3526; }
.film .btn-ghost { background: transparent; border-color: transparent; }
.film .icon-btn { color: #6b6250; }

/* --------------------------------------------------- notes as real paper */

.note-seal {
  background: var(--kraft);
  background-image:
    linear-gradient(135deg, transparent 49.4%, rgb(59 53 38 / 0.28) 50%, transparent 50.6%),
    linear-gradient(225deg, transparent 49.4%, rgb(59 53 38 / 0.28) 50%, transparent 50.6%);
  background-size: 50% 62%, 50% 62%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  border: 0;
  color: var(--print-ink);
  box-shadow: 3px 5px 10px -5px rgb(0 0 0 / 0.5);
}
.note-seal .note-label { color: var(--print-ink); }
.note-seal .note-meta { color: #5a4c33; }
.note.is-open, .note.is-mine {
  background-color: var(--print);
  background-image: repeating-linear-gradient(transparent 0 25px, rgb(90 120 160 / 0.22) 25px 26px);
  background-position: 0 10px;
  color: var(--print-ink);
  border: 0;
  box-shadow: 3px 5px 10px -6px rgb(0 0 0 / 0.5);
}
.note.is-open .note-body, .note.is-mine .note-body { line-height: 26px; font-size: 1rem; }
.note.is-open .note-meta, .note.is-mine .note-meta { color: #6b6250; }
.note.is-open .note-label, .note.is-mine .note-label { color: var(--print-ink); }
.note.is-mine .icon-btn { color: #6b6250; }

/* ------------------------------------------------------------------ small */

@media (max-width: 980px) {
  .gate-photo { display: none; }
}
@media (max-width: 760px) {
  .cd-photo { width: 88px; right: -6px; top: 44px; }
  .cd > :not(.cd-photo):not(.card-row) { max-width: calc(100% - 88px); }
  .card::after { width: 72px; height: 20px; }
  .cd-unit { padding: 0.25rem 0.5rem; }
}