@charset "UTF-8";

/* Dry colored-pencil marks live on the paper, never on the type or app images. */
:root {
  --pencil-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='135' height='105' viewBox='0 0 135 105'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23617743' opacity='.16' stroke-width='.55'%3E%3Cpath d='m2 14 21-8m-7 14L41 9m-5 20 21-8m8-14 24-8M74 21l29-10m-9 20 27-10m-4 22 21-8M2 46l28-10m-15 24 33-13m-13 24 27-10m-9 23 30-12m-8 25 23-9m-3-19 27-10m-13 25 29-11M1 96l22-7m8 14 15-6m65 7 19-7'/%3E%3C/g%3E%3Cg stroke='%23fffbea' stroke-width='1.1' opacity='.5'%3E%3Cpath d='m2 28 18-7m5 15 24-9m10 13 23-9M94 8l19-7m-4 48 22-9M1 72l27-10m15 29 26-10m15-17 20-7m-1 43 27-11'/%3E%3C/g%3E%3Cg stroke='%237c8253' stroke-width='.6' opacity='.16'%3E%3Cpath d='m8 6 1 .5m53 9 1-.7m65 3 .8-.6M14 39l1-.5m66 7 .6.6M49 58l1 .5m78 10 1-.5M4 87l.5.6m34 6 .6-.4m59-12 1-.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pencil-hatching: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='126' viewBox='0 0 136 126'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%2344663c' stroke-width='.7' opacity='.28'%3E%3Cpath d='m-9 10 71 24m-74-19 73 25m-74-20 72 25m-71-20 70 25m-59-12 73 25m-71-19 70 24m-71-19 72 26m-65-16 66 24m-65-18 68 25M68-3l75 25M67 2l74 26M68 8l76 26M71 14l71 25M80 23l64 23M81 29l60 23M87 37l60 22M-9 83l75 26m-78-21 78 27m-75-20 74 26m-72-19 76 25m-63-15 56 20M65 72l82 29M66 78l80 28M68 85l76 27M75 93l71 25M81 101l65 23'/%3E%3C/g%3E%3Cg stroke='%23fff5cf' stroke-width='1.1' opacity='.46'%3E%3Cpath d='M-9 6 58 29m-64-8 72 24m-62-9 72 25M70 3l67 24M82 24l61 22M11 81l65 24M7 96l65 22m7-39 57 20m-49-7 55 19'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pencil-edge-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'%3E%3Cpath d='m6 5 133 1 115-2 123 2 105-1 111 2 1 90-2 116 2 93-2 87-135 1-133-1-110 2-118-2-88 1-2-97 2-92L5 103Z' stroke='%236c8654' stroke-width='1.4' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='m9 8 104-1 135 2 137-1 114 2 91-1 1 102-2 109 1 95-1 75-97-2-108 1-119-1-126 2-129-1 1-111-2-120Z' stroke='%238aa26e' stroke-width='.9' opacity='.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='m7 3 103 1m26 0 89-1m19 1 100 1m47-1 96-1m20 2 80 1M596 19l-1 87m0 25-1 93m2 25-1 96m-3 51-105 1m-24-1-108 1m-20-1-128 1m-19 0-111-1M3 377l1-92m-1-20 1-84m-1-17 1-93' stroke='%23577140' stroke-width='.65' opacity='.55' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --pencil-edge-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 5 133 1 115-2 123 2 105-1 111 2 1 90-2 116 2 93-2 87-135 1-133-1-110 2-118-2-88 1-2-97 2-92L5 103Z' stroke='%235a8695' stroke-width='1.4' opacity='.85' vector-effect='non-scaling-stroke'/%3E%3Cpath d='m9 8 104-1 135 2 137-1 114 2 91-1 1 102-2 109 1 95-1 75-97-2-108 1-119-1-126 2-129-1 1-111-2-120Z' stroke='%238eacb3' stroke-width='.9' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='m7 3 103 1m26 0 89-1m19 1 100 1m47-1 96-1m20 2 80 1M596 19l-1 87m0 25-1 93m2 25-1 96m-3 51-105 1m-24-1-108 1m-20-1-128 1m-19 0-111-1M3 377l1-92m-1-20 1-84m-1-17 1-93' stroke='%23678189' stroke-width='.65' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --pencil-tape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='32' viewBox='0 0 90 32'%3E%3Cg fill='none' stroke-linecap='round' stroke='%23807538' stroke-width='.7' opacity='.23'%3E%3Cpath d='m-1 6 19-7M0 13 34 1M0 20 49 2M0 27 67 2M9 31 86 2m-59 29 65-24m-47 24L93 14m-30 17 28-10M10 0l-1 32M81 0l1 32'/%3E%3C/g%3E%3C/svg%3E");
}

/* The pair of leaves is a layered pencil drawing, with pigment gaps and veins. */
.year-node > .pencil-leaf {
  display: block;
  width: 89px;
  height: 85px;
  max-width: 95%;
  object-fit: contain;
  margin-inline: auto;
  opacity: .25;
  transform: rotate(-7deg) scale(.9);
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
  pointer-events: none;
}
.year-node:nth-child(even) > .pencil-leaf { transform: rotate(7deg) scale(.9); }
.year-node:hover > .pencil-leaf { opacity: .58; }
.year-node[aria-selected="true"] > .pencil-leaf {
  opacity: 1;
  transform: rotate(0) scale(1.2);
  filter: drop-shadow(0 0 5px #efbb3666) drop-shadow(1px 2px 0 #5f774335);
}
.vine-line path:not(.vine-shadow) { stroke: #62884d; stroke-dasharray: 6 .9 2 .7 3 1; stroke-linecap: round; }
.vine-line .vine-shadow { stroke: #bdc892; opacity: .75; }

/* Crisp writing on dry, slightly uneven paper with two hand-drawn contours. */
.scrapbook, .timeline-card, .tool-note, .project-dialog {
  background-image: var(--pencil-fibre);
  background-size: 135px 105px;
  border-color: #94a976;
  box-shadow: 2px 3px 0 #c3d0aa, 6px 6px 0 #8a9f6e21;
}
.scrapbook { border-radius: 4px 11px 6px 8px / 9px 6px 9px 3px; }
.scrapbook::before {
  inset: 10px;
  border: 1px solid #b3bd975e;
  border-radius: 5px 3px 7px 5px;
}
.scrapbook::after, .timeline-card::after, .tool-note::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  background: var(--pencil-edge-green) center / 100% 100% no-repeat;
  pointer-events: none;
}
.scrapbook-seam {
  background-color: #cfdbc34d;
  background-image: var(--pencil-hatching);
  background-size: 105px 90px;
  border-inline: 1px dashed #7b92644d;
}
.about-copy { position: relative; }
.hello-sticker {
  background-image: var(--pencil-tape);
  border: 1px solid #b89c4973;
  border-radius: 2px 5px 2px 3px;
  box-shadow: 1px 2px 0 #b8a65780;
}
.portrait-blue-paper {
  background-image: var(--pencil-hatching), var(--pencil-fibre);
  border-color: #7596a0;
  border-radius: 3px 5px 2px 6px;
  box-shadow: 2px 3px 0 #7793a026;
}
.timeline-card { border-radius: 3px 7px 4px 5px; }
.timeline-card::before, .tool-note::before {
  background-image: var(--pencil-tape);
  background-size: 90px 32px;
  clip-path: polygon(1% 0, 99% 2%, 98% 17%, 100% 31%, 98% 48%, 100% 62%, 98% 79%, 99% 98%, 1% 100%, 2% 83%, 0 67%, 2% 51%, 0 38%, 2% 20%);
}
.timeline-highlights > span {
  background-color: #e5ebd5;
  background-image: var(--pencil-tape);
  border: 1px solid #82966f73;
  border-radius: 2px 4px 1px 3px;
  box-shadow: 1px 1px 0 #a6b18d3d;
}

/* Open folders retain their green and blue fills, with individual pencil strokes. */
.folder { --pencil-folder-edge: var(--pencil-edge-green); }
.folder:nth-child(even) { --pencil-folder-edge: var(--pencil-edge-blue); }
.folder-back, .folder-front, .folder-tab {
  background-image: var(--pencil-hatching), var(--pencil-fibre);
  background-size: 136px 126px, 135px 105px;
  border-width: 1.5px;
  border-color: var(--folder-line);
}
.folder-back { border-radius: 2px 7px 5px 8px; }
.folder-back::after {
  content: "";
  position: absolute;
  inset: -3px;
  background: var(--pencil-folder-edge) center / 100% 100% no-repeat;
  pointer-events: none;
}
.folder-front { border-radius: 5px 8px 6px 10px / 7px 5px 9px 7px; box-shadow: 2px 3px 0 #66834d33; }
.folder-front::before {
  inset: -4px;
  border: 0;
  border-radius: 0;
  background: var(--pencil-folder-edge) center / 100% 100% no-repeat;
}
.folder-front::after {
  inset: 7px;
  border: 1px solid #f5f3d766;
  border-bottom-color: #546e3e66;
  background: none;
  opacity: .6;
  border-radius: 2px 3px 5px 3px;
}
.folder-tab { border-radius: 9px 17px 2px 1px; box-shadow: inset 1px 1px 0 #f2edd933; }
.folder-sheet { background-image: var(--pencil-fibre); border: 1px solid #aeb594; border-radius: 2px 4px 1px 3px; }
.folder-sheet::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #aeb59440;
  border-radius: 2px;
  pointer-events: none;
}
.folder-sticker {
  background-color: #f8edba;
  background-image: var(--pencil-tape);
  border: 1px solid #a6a06899;
  border-radius: 2px 4px 1px 3px;
  box-shadow: 1px 2px 0 #61754c26;
}
.folder-open { background: #f6f2d72b; border: 1.5px solid var(--folder-line); border-radius: 48% 52% 47% 53%; box-shadow: 1px 1px 0 #f9f3d94d; }

/* A row of hand-colored paper notes, not flat UI cards. */
.tool-note {
  background-color: #fffdf1;
  border: 1px solid #98a17c;
  border-radius: 3px 1px 5px 2px;
  box-shadow: 2px 3px 0 #a5b58b4d, 6px 7px 0 #7f8e6d12;
}
.tool-note::after { opacity: .72; }
.tool-note::before { border: 1px solid #c4ad5f55; height: 27px; top: -12px; z-index: 3; }
.tool-note[data-color="blue"]::after { background-image: var(--pencil-edge-blue); }
.tool-note li::after {
  height: 3px;
  border: 0;
  background: linear-gradient(179deg, transparent 25%, currentColor 32% 48%, transparent 56% 64%, currentColor 70%, transparent 79%);
  opacity: .35;
  transform: rotate(-1deg);
}
.note-index { width: fit-content; border-bottom: 3px solid #c1d09a8c; padding-bottom: 2px; }
.tool-note[data-color="blue"] .note-index { border-bottom-color: #aad0df99; }
.tool-note[data-color="yellow"] .note-index { border-bottom-color: #e6cc6a99; }

/* The store detail is a sketchbook page, with a quiet double-pencil frame. */
.project-dialog {
  border: 2px solid #88a16d;
  border-radius: 4px 9px 5px 3px;
  background-color: #faf7e9;
  box-shadow: 2px 2px 0 #d7dfb8, 5px 6px 0 #68845466;
  outline: 1px solid #72915b;
  outline-offset: 3px;
}
.project-dialog-inner { background: var(--pencil-edge-green) center / 100% 100% no-repeat; }
.dialog-status, .dialog-pending {
  background-image: var(--pencil-tape);
  border: 1px solid #97a77d;
  border-radius: 2px 4px 1px 3px;
}
.dialog-close { border-radius: 48% 52% 47% 53%; border: 1.5px solid #97a77d; box-shadow: 1px 1px 0 #bdc89f80; }
.dialog-features { border-block: 1px dashed #9ba783; }
.project-dialog :focus-visible, .year-node:focus-visible, .folder-cover:focus-visible {
  outline: 2px dashed #637d46;
  outline-offset: 6px;
}

@media (max-width: 760px) {
  .year-node > .pencil-leaf { width: 68px; height: 65px; }
  .project-dialog-inner { background-image: none; }
  .scrapbook::after, .timeline-card::after { inset: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .year-node > .pencil-leaf { transition: none; }
}