/* Sawubona field journal - paper kit.
   Generated by tools/make-art.mjs (edit the generator, not this file). All textures are
   procedural SVG data URIs; nothing is downloaded.

   Tokens  --j-*  (light "field journal" and dark "night journal", switched by
           prefers-color-scheme or :root[data-theme]).

   Surfaces
     .j-grid            pale grid paper (24px, stronger every 120px) - the desk/backdrop
     .j-sheet           big cream sheet: grain, deckled edges, soft shadow (uses ::before/::after)
     .j-lined           lined notebook paper (--line-gap, --line-top); .j-lined--margin adds the red margin
     .j-notebook        open spread: > .j-page ×2, spine shadow, cloth binding and page edges beneath
     .j-scrap           torn scrap with a light fibrous rim; colour with .j-kraft / .j-green / .j-cream
     .j-sticky          mustard sticky note (pair with .j-tape)
     .j-tape            masking tape strip; tilt with --tilt; place it yourself (absolute)
     .j-photo           mounted photo print; .j-corners adds dark-green photo corners (::after)
     .j-index-card      dictionary index card; .j-drawer catalogue drawer; .j-label-holder brass frame
     .j-plate           specimen plate with a ruled double frame; .j-plate-cell for each figure
   Marks
     .j-stamp           rubber stamp; .j-stamp--match / --close / --not; .j-stamp--in animates inking
     .j-type            typewriter label (Courier Prime);  .j-caps  letter-spaced micro caps
     .j-rule            hand-drawn pencil rule (block, 6px tall)
     .j-btn             forest-green rounded button; .j-hint small pencil hint
     .j-icon            24px line icon: <svg class="j-icon"><use href="assets/art/icons.svg#camera"/></svg>
   Art
     .j-art--wash       watercolour <img> (multiply on paper; dimmed at night)
     .j-art--ink        ink/pencil <img> (multiply by day; inverted to pale lines at night)
     .j-collage         margin decoration: hidden under 900px unless .j-collage--keep
*/

:root {
  --j-grid-paper: #edefe6;
  --j-grid-line: rgb(88 124 100 / .13);
  --j-grid-line-strong: rgb(88 124 100 / .22);
  --j-cream: #f4efe3;
  --j-page: #f8f4ea;
  --j-ink: #1f2a1e;
  --j-ink-soft: #3b4637;
  --j-forest: #4a5e3f;
  --j-forest-deep: #3c4e33;
  --j-deep: #2e4535;
  --j-sage: #8a9a78;
  --j-mustard: #d6b04a;
  --j-kraft: #d8cdb8;
  --j-kraft-rim: #e6ddca;
  --j-cream-rim: #fdfaf2;
  --j-pencil: #6e6a60;
  --j-clay: #a8472f;
  --j-rule-line: rgb(74 94 63 / .2);
  --j-margin-line: rgb(168 71 47 / .34);
  --j-shadow: 60 44 20;
  --j-tape: rgb(234 224 192 / .8);
  --j-photo: #fcf9f1;
  --j-stamp-match: #3f6a38;
  --j-stamp-close: #86620f;
  --j-stamp-not: #a8472f;
  --j-focus: #1f2a1e;
  --j-focus-halo: #d6b04a;
  --j-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .11 0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --j-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E %3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .5' numOctaves='2' seed='9' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 -.4 .2'/%3E%3C/filter%3E %3Crect width='360' height='360' filter='url(%23f)'/%3E%3C/svg%3E");
  --j-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E %3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .2 0 0 0 -.5 .3'/%3E%3C/filter%3E %3Crect width='480' height='480' filter='url(%23m)'/%3E%3C/svg%3E");
  --j-kraft-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E %3Cfilter id='k' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .6' numOctaves='2' seed='6' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 -.9 .52'/%3E%3C/filter%3E %3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  --j-ink-worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E %3Cfilter id='w' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='12' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 4.9'/%3E%3C/filter%3E %3Crect width='160' height='160' filter='url(%23w)'/%3E%3C/svg%3E");
  --j-cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E %3Cpath d='M0 0h6v6H0z' fill='%23fff' fill-opacity='0'/%3E%3Cpath d='M0 .5h6M0 3.5h6' stroke='%23fff' stroke-opacity='.12'/%3E%3Cpath d='M.5 0v6M3.5 0v6' stroke='%23000' stroke-opacity='.1'/%3E%3C/svg%3E");
  --j-rule-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='6'%3E%3Cpath d='M0 2.9c1 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4-.1 6-.1 2-.1 4-.1 6-.2 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .2 2 0 4 .1 6 .1 2 .1 4 .1 6 .2 2 0 4 0 6 0 2 0 4 0 6 .1 2 0 4 0 6 0 2 0 4 0 6 0 2-.1 4-.1 6-.1 2-.1 4-.1 6-.2 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2-.1 4-.1 6-.2 2-.1 4-.2 6-.3 2 0 4-.1 6-.1 2 0 4 0 6 .1 2 0 4 0 6 .1 2 0 4 .1 6 .2 2 0 4 0 6 0 2 .1 4 0 6 0 2 0 4-.1 6-.1 2-.1 4-.1 6-.1 2-.1 4-.1 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 .1 4 .1 6 .2 2 0 4 .1 6 .1 2 .1 4 .2 6 .3 2 0 4 .2 6 .3 2 .1 4 .3 6 .5 2 .1 4 .3 6 .4 2 .1 4 .3 6 .3 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 0 6 0 2-.1 4-.1 6-.2 2 0 4-.1 6-.2 2 0 4-.1 6-.1 2-.1 4-.1 6-.1 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4 0 6-.1 2 0 4-.1 6-.1 2-.1 4-.2 6-.3 2-.1 4-.2 6-.2 2-.1 4-.1 6-.1 2 0 4 .1 6 .2 2 .1 4 .3 6 .4 2 .1 4 .2 6 .3 2 .1 4 .1 6 .1 2 0 4-.1 6-.2 2 0 4-.1 6-.2 2 0 5 0 6 0' fill='none' stroke='%236E6A60' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --j-tape-clip: polygon(1.4% 0%, 3.5% 12.5%, 1.4% 25%, 3.5% 37.5%, 1.2% 50%, 3.5% 62.5%, .6% 75%, 3.5% 87.5%, .4% 100%, 99.8% 100%, 96.5% 87.5%, 99.8% 75%, 96.5% 62.5%, 99.6% 50%, 96.5% 37.5%, 99.5% 25%, 96.5% 12.5%, 98.8% 0%);
  --j-deckle-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3Cpath d='M0 16L0 7.4L2 7L4 7.2L6 7.7L8 7.9L10 7.2L12 7.6L14 8L16 8.7L18 8.8L20 8.7L22 8.2L24 7.8L26 7.3L28 7L30 6.8L32 7.5L34 7.3L36 8L38 8.4L40 8.9L42 8L44 8.1L46 8L48 8.4L50 9.2L52 9.5L54 8.9L56 9.6L58 9.5L60 9.8L62 9.1L64 9.2L66 9.3L68 9.4L70 9.4L72 9.6L74 8.9L76 9L78 8.2L80 8.5L82 8.4L84 8.4L86 8.7L88 8.3L90 8.8L92 9L94 9L96 9.7L98 9.5L100 9.7L102 9.3L104 8.9L106 9.2L108 8.9L110 8.9L112 8.8L114 8.4L116 7.7L118 7.7L120 7.9L122 8.7L124 8.4L126 7.6L128 7.5L130 7.3L132 7.4L134 7.8L136 7.3L138 6.6L140 7.4L142 7.3L144 7L146 7.5L148 7.7L150 6.6L152 5.8L154 6.9L156 6.7L158 6.9L160 8.3L162 8.2L164 8.2L166 7.9L168 8.2L170 8L172 8.9L174 8.1L176 8.4L178 8.6L180 7.9L182 7.5L184 7.1L186 7L188 7.7L190 7.8L192 7.5L194 7.9L196 7.3L198 7.4L200 7.3L202 7.6L204 7.2L206 7.4L208 6.9L210 7.5L212 7L214 6.2L216 7L218 7.4L220 7.6L222 6.7L224 6.9L226 7.2L228 7.4L230 7.4L232 7.1L234 7.7L236 8.1L238 7.9L240 7.4L240 16Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-deckle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3Cpath d='M0 0L0 7.4L2 8.2L4 8.8L6 7.9L8 8.4L10 7.8L12 7.7L14 7.8L16 7.7L18 8.1L20 8.1L22 8.3L24 7.8L26 8.2L28 8.5L30 9.1L32 8.5L34 8.5L36 8.4L38 7.9L40 8L42 7.5L44 6.6L46 6.9L48 7L50 7.3L52 6.9L54 7.7L56 8.2L58 8.7L60 8.5L62 8.2L64 8.6L66 8.8L68 8.5L70 8.4L72 8L74 8.5L76 8.3L78 8L80 8.4L82 8.1L84 8.4L86 7.6L88 7.8L90 8.3L92 8.8L94 9.2L96 9.2L98 8.9L100 9.5L102 9.3L104 8.4L106 7.8L108 7.6L110 8.2L112 8.3L114 8.9L116 8.6L118 8.9L120 7.8L122 7.9L124 8.2L126 8.7L128 8.5L130 8L132 8.4L134 8.8L136 8.4L138 8.7L140 9L142 8.9L144 8.3L146 8.2L148 8.2L150 7.7L152 7.7L154 7.7L156 7.4L158 8.1L160 7.3L162 8.3L164 8.7L166 9.3L168 9.6L170 9L172 8.3L174 9L176 8.1L178 8.1L180 9L182 9.4L184 8.7L186 8.8L188 8.4L190 7.7L192 7.2L194 7.2L196 6.6L198 6.9L200 6.5L202 6.5L204 6.2L206 6.3L208 6.2L210 6.9L212 6.5L214 6.6L216 7.4L218 7.3L220 7.2L222 6.9L224 6.7L226 6L228 6.9L230 7.8L232 7.5L234 7.3L236 7L238 8.3L240 7.4L240 0Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-deckle-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='240' viewBox='0 0 16 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3Cpath d='M16 0L10.3 0L10.1 2L10.2 4L10.1 6L9.2 8L8.9 10L8.6 12L8.3 14L8.4 16L8.7 18L8.5 20L7.3 22L7 24L6.7 26L6.5 28L6.9 30L7.3 32L8 34L8.9 36L8.3 38L8.3 40L8.3 42L8.3 44L8.1 46L7.8 48L8 50L9.2 52L8.4 54L8.4 56L8.4 58L8.9 60L9.1 62L9.1 64L8.6 66L8.2 68L7.8 70L8 72L8.6 74L8.1 76L8 78L8.1 80L7.4 82L7.6 84L7.8 86L7.6 88L7.2 90L7.5 92L7.8 94L7.8 96L7.4 98L7.4 100L7.6 102L7 104L6.9 106L7.1 108L7.8 110L7.4 112L6.9 114L7 116L6.3 118L6.5 120L7.4 122L6.6 124L6.3 126L6.6 128L7 130L7.1 132L7.7 134L7.6 136L7.6 138L7.6 140L6.7 142L6.6 144L6.7 146L6.8 148L7.5 150L7.6 152L7.1 154L6.6 156L7.9 158L7.8 160L7.1 162L7.2 164L7.6 166L7.5 168L7.6 170L7.5 172L8.1 174L7.8 176L7.2 178L7.1 180L6.6 182L7.8 184L7.4 186L8.1 188L8.5 190L9.1 192L8.6 194L8.2 196L8.1 198L8.3 200L7.9 202L8.5 204L8.4 206L8.3 208L8.6 210L9 212L9 214L8.6 216L8.7 218L9 220L9 222L9.4 224L9.3 226L9 228L9.8 230L9.6 232L10 234L9.9 236L9.9 238L10.3 240L16 240Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-deckle-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='240' viewBox='0 0 16 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3Cpath d='M0 0L6.5 0L6.7 2L6.6 4L6.9 6L7.2 8L6.9 10L6.5 12L6.5 14L6.8 16L7.5 18L7.3 20L7.2 22L7.4 24L7.7 26L7.8 28L7.8 30L7.5 32L8.1 34L7.9 36L8.1 38L7.7 40L8.1 42L7.8 44L8 46L8.1 48L8.4 50L9.1 52L8.6 54L8.3 56L8.8 58L8.2 60L8.2 62L8.3 64L8.6 66L8.5 68L8.3 70L8.2 72L8.2 74L8.3 76L8.4 78L8.8 80L8 82L7.9 84L7.6 86L7.7 88L8.4 90L8.6 92L8.3 94L8 96L7.8 98L8.6 100L9 102L8.8 104L7.8 106L7.9 108L8.4 110L7.3 112L7.7 114L8.5 116L8.2 118L7.7 120L6.7 122L6.2 124L7.5 126L7 128L8 130L9.4 132L9.4 134L9.1 136L9 138L9 140L8.5 142L8.8 144L8.9 146L8.5 148L9 150L8.8 152L9 154L8.5 156L7.9 158L7.2 160L7.5 162L7.8 164L7.9 166L7.6 168L7.7 170L8.2 172L7.9 174L8.6 176L8.9 178L9.5 180L9.2 182L9 184L8.5 186L9.8 188L9.4 190L8.7 192L8.1 194L8.6 196L8.4 198L8 200L8.3 202L8 204L8.9 206L8.8 208L9.5 210L7.8 212L7.6 214L7.9 216L6.9 218L6.7 220L6.8 222L6.9 224L6.9 226L6.9 228L6.8 230L7 232L7.1 234L6.9 236L7.1 238L6.5 240L0 240Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-deckle: var(--j-deckle-t) top left / 240px 16px repeat-x, var(--j-deckle-b) bottom left / 240px 16px repeat-x,
    var(--j-deckle-l) top left / 16px 240px repeat-y, var(--j-deckle-r) top right / 16px 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 30px) calc(100% - 30px) no-repeat;
  --j-torn-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.25'/%3E%3C/filter%3E%3Cpath d='M0 12L0 5.8L2 5.6L4 6L6 6.1L8 6L10 6.4L12 6.2L14 6.8L16 7L18 7.2L20 6.3L22 6.6L24 6.6L26 6.8L28 6.3L30 6.6L32 6.6L34 6.1L36 7L38 6L40 5.9L42 5.7L44 6.3L46 7.1L48 6.1L50 6.3L52 6.1L54 5.7L56 6.4L58 7L60 6.3L62 6.6L64 6.6L66 6.5L68 6.8L70 6.8L72 6.3L74 6.1L76 5.9L78 5.6L80 5.5L82 5.2L84 5.3L86 6.7L88 6.4L90 5.8L92 5.3L94 5.9L96 6.2L98 6L100 5.8L102 5.9L104 5.8L106 5.9L108 5.5L110 7.3L112 6.6L114 6.7L116 6L118 6.9L120 7L122 6.6L124 7.3L126 6.3L128 5.9L130 5.9L132 5.4L134 5.5L136 5.9L138 6.6L140 6.4L142 6.4L144 5.9L146 5.1L148 5.2L150 4.3L152 5.5L154 5.6L156 6.1L158 6.1L160 5.3L162 6.2L164 6.1L166 6.2L168 6L170 5.5L172 6L174 6L176 5.6L178 5.1L180 6.1L182 6.1L184 5.5L186 5.4L188 6.8L190 6.5L192 5.9L194 6.5L196 6.1L198 6.1L200 6.4L202 6L204 5L206 5L208 4.6L210 5.4L212 4.9L214 4.7L216 4.9L218 5.3L220 5.1L222 5.3L224 5.6L226 5.6L228 5.8L230 5.7L232 5L234 5.4L236 5.7L238 5.9L240 5.8L240 12Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.25'/%3E%3C/filter%3E%3Cpath d='M0 0L0 6.2L2 6L4 5.9L6 5.6L8 5.3L10 4.8L12 4.9L14 5.2L16 6L18 6L20 5.6L22 6.3L24 6.4L26 6L28 5.9L30 5.6L32 6.2L34 5.6L36 6.4L38 6.1L40 4.9L42 5L44 4.7L46 4.9L48 5L50 5.2L52 5.3L54 5L56 4.9L58 4.7L60 4.8L62 4.5L64 4.8L66 5L68 4.9L70 4.9L72 5.3L74 6.2L76 6.2L78 5.8L80 6.1L82 6.4L84 6.8L86 6.3L88 6.4L90 6.2L92 6.8L94 6.1L96 6.6L98 6.3L100 6.3L102 5.9L104 5.8L106 6.1L108 6.8L110 7.4L112 6.8L114 6.7L116 6.5L118 6.4L120 6.8L122 6.4L124 6.7L126 6.9L128 7L130 6.6L132 6.8L134 6.9L136 6.6L138 6.5L140 6.5L142 5.8L144 6.5L146 6.9L148 6.9L150 7L152 7L154 6.6L156 7.3L158 7.5L160 6.7L162 6L164 5.8L166 6.5L168 6.8L170 6.5L172 6.6L174 5.8L176 6.7L178 5.5L180 5.6L182 5.6L184 5.5L186 5L188 5.8L190 6.4L192 5.5L194 6L196 5.9L198 6.3L200 6.5L202 6.2L204 5.8L206 6.1L208 5.8L210 6.6L212 6L214 5.5L216 6.2L218 5L220 5.2L222 5.6L224 6.1L226 6.1L228 6.2L230 6.1L232 4.5L234 5.9L236 6L238 6.6L240 6.2L240 0Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='240' viewBox='0 0 12 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.25'/%3E%3C/filter%3E%3Cpath d='M12 0L5.7 0L6.2 2L5.7 4L6.1 6L5.1 8L6 10L5.9 12L6.2 14L5.4 16L6 18L4.8 20L5.2 22L6 24L5.4 26L5.5 28L4.7 30L5.2 32L5.7 34L5.4 36L6.2 38L5.1 40L4.7 42L5 44L5.5 46L5.4 48L5.8 50L6.2 52L5.6 54L6.3 56L5.8 58L6.1 60L6.3 62L5.4 64L5.1 66L5.8 68L5.1 70L5 72L5.3 74L5.7 76L5.4 78L5.9 80L6.2 82L5 84L5.4 86L5.2 88L6.1 90L6.2 92L6.5 94L6.4 96L6.2 98L6.5 100L6.5 102L6.5 104L5.5 106L6 108L5.9 110L6 112L6 114L5.9 116L5.8 118L5.8 120L6.6 122L6.1 124L6.5 126L5.7 128L5.6 130L6.1 132L5.7 134L4.8 136L5.7 138L5.9 140L5.9 142L6.1 144L6.4 146L6.6 148L6.5 150L6.6 152L6.5 154L7.1 156L6.8 158L6.5 160L6.4 162L5.9 164L5.2 166L6.8 168L6.8 170L7.4 172L6.9 174L7.9 176L7.5 178L6.9 180L6.9 182L7.5 184L7.4 186L7.1 188L7 190L7 192L7 194L5.7 196L5.4 198L5.5 200L6.3 202L6.3 204L5.7 206L5.7 208L6.3 210L5.5 212L5.4 214L6.2 216L5.9 218L6.1 220L5.8 222L6 224L5.8 226L5.7 228L6.8 230L5.6 232L5.7 234L6.1 236L5.8 238L5.7 240L12 240Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='240' viewBox='0 0 12 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.25'/%3E%3C/filter%3E%3Cpath d='M0 0L6.4 0L6.5 2L7.1 4L6.8 6L6.3 8L6.4 10L6.2 12L6.6 14L6.6 16L6.6 18L6.2 20L5.8 22L6.2 24L5.8 26L6.1 28L6.2 30L6.2 32L6.1 34L6.7 36L6.4 38L6.8 40L5.9 42L6 44L5.8 46L5.9 48L5.9 50L6.7 52L6.6 54L6.3 56L6.2 58L5.5 60L6.2 62L5.8 64L5.7 66L5.8 68L7 70L6.8 72L5.9 74L5.2 76L5 78L6 80L6.3 82L6.4 84L5.3 86L6 88L5 90L6.1 92L6.3 94L5.7 96L6 98L6.1 100L6.4 102L6.2 104L6.6 106L6.9 108L6 110L6.2 112L6.2 114L6.1 116L4.8 118L5.5 120L5.1 122L5.3 124L5.7 126L5.3 128L5.1 130L5.5 132L5.6 134L5.5 136L5.3 138L5.6 140L6.1 142L6.6 144L6 146L6.3 148L5.4 150L6.1 152L5.2 154L4.4 156L5 158L4.9 160L3.9 162L4.6 164L5 166L5.1 168L5.3 170L5.8 172L5.5 174L4.9 176L4.8 178L4.8 180L5.6 182L4.8 184L5.6 186L5.9 188L5.9 190L5.7 192L6.8 194L6.6 196L6.4 198L6.7 200L7 202L6.8 204L6.7 206L6.7 208L6.5 210L7 212L6.6 214L6.1 216L6.5 218L7 220L6.4 222L6.5 224L6.8 226L7.2 228L7.1 230L6.2 232L6.4 234L6.1 236L6.6 238L6.4 240L0 240Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn: var(--j-torn-t) top left / 240px 12px repeat-x, var(--j-torn-b) bottom left / 240px 12px repeat-x,
    var(--j-torn-l) top left / 12px 240px repeat-y, var(--j-torn-r) top right / 12px 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 22px) calc(100% - 22px) no-repeat;
  --j-torn-rim-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3C/filter%3E%3Cpath d='M0 12L0 4.3L2 3.8L4 4.5L6 4.8L8 5L10 4.8L12 5.2L14 5.4L16 4.9L18 4L20 4.4L22 4.1L24 4.1L26 4.3L28 4.6L30 5.4L32 4.9L34 5.4L36 4.9L38 4.5L40 5L42 5.4L44 4.4L46 4.9L48 4.6L50 4.1L52 4.4L54 4.6L56 4L58 4.3L60 4.2L62 4.8L64 4.1L66 4.6L68 4.6L70 4.7L72 5.1L74 4.9L76 5.2L78 4.6L80 4.8L82 4.6L84 5L86 4.2L88 4.2L90 4.4L92 4.3L94 3.8L96 3.5L98 3.9L100 4L102 4.5L104 5.1L106 4.6L108 5L110 5.1L112 5.2L114 4.3L116 4.4L118 4.6L120 4.7L122 4.4L124 4.6L126 4.4L128 4.3L130 4.1L132 4.8L134 4.8L136 4.5L138 3.4L140 3.9L142 4.4L144 4.5L146 4.7L148 4.6L150 4.3L152 4.6L154 5.1L156 4.8L158 5.3L160 5.4L162 4.8L164 4.9L166 5.2L168 5.7L170 4.9L172 5L174 4.4L176 3.9L178 4.1L180 3.2L182 3.8L184 3.5L186 2.5L188 2.9L190 2.7L192 3.4L194 3.3L196 2.8L198 4L200 4.1L202 3.3L204 2.6L206 2.3L208 3.5L210 4L212 3.7L214 4L216 5L218 4.2L220 4L222 4.1L224 4.2L226 4.7L228 5L230 4.9L232 4.4L234 4.5L236 4.6L238 4.6L240 4.3L240 12Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-rim-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3C/filter%3E%3Cpath d='M0 0L0 7.2L2 7.3L4 7.9L6 7.4L8 7.8L10 7.5L12 7.2L14 7L16 7.5L18 7.6L20 8.2L22 8.3L24 8L26 8.2L28 8.1L30 8.7L32 9L34 9.9L36 9.3L38 9.3L40 8.9L42 8.4L44 8.7L46 9.1L48 8.4L50 7.5L52 8L54 7.4L56 8L58 8.1L60 8L62 8.1L64 8.1L66 7.8L68 8L70 7.5L72 7.1L74 7L76 7.4L78 7.5L80 7.6L82 7L84 7.1L86 8.1L88 8.3L90 7.6L92 7.8L94 8L96 8.3L98 7.5L100 8L102 7.9L104 8L106 7.7L108 7.5L110 6.4L112 7L114 7.4L116 7.8L118 8L120 7.6L122 8.4L124 8.4L126 7.8L128 7.9L130 7.5L132 8.1L134 8.4L136 7.9L138 8.6L140 8.7L142 8.3L144 8.4L146 8L148 7.8L150 7.7L152 7.1L154 7.2L156 7.1L158 7.4L160 7.5L162 7.1L164 7.3L166 7.1L168 7.4L170 7.1L172 7.4L174 7.2L176 6.7L178 7.2L180 6.8L182 6.6L184 6.7L186 6.5L188 6.5L190 6.2L192 6.5L194 6.2L196 6.1L198 6.5L200 5.9L202 6.8L204 6.7L206 6.7L208 6.6L210 7.4L212 8.7L214 7.9L216 7.5L218 7.2L220 6.9L222 6.9L224 7.5L226 7.6L228 7.2L230 7.5L232 6.9L234 7.4L236 7.5L238 7.1L240 7.2L240 0Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-rim-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='240' viewBox='0 0 12 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3C/filter%3E%3Cpath d='M12 0L4 0L4.5 2L4 4L4.1 6L4 8L3.4 10L3.4 12L3.3 14L3.9 16L4.2 18L4.6 20L4 22L3.5 24L4.1 26L4.6 28L3.5 30L3.1 32L3.5 34L3.6 36L3.3 38L3.6 40L3.4 42L3.9 44L3.8 46L3.4 48L2.9 50L3.4 52L4 54L3.7 56L3.7 58L3.4 60L4 62L4 64L3.8 66L4.1 68L3.6 70L3.4 72L3 74L3.7 76L3.8 78L3.8 80L4.6 82L4.5 84L4.7 86L4.9 88L4.3 90L4.2 92L4 94L4.7 96L4.5 98L3.7 100L4.5 102L4 104L4.3 106L4.1 108L4.2 110L4.9 112L4.5 114L4.5 116L5 118L4.9 120L4.7 122L5.1 124L3.5 126L4.3 128L3.9 130L4.3 132L4.5 134L5.8 136L5.1 138L4.9 140L4.5 142L3.6 144L4.4 146L4.3 148L4.1 150L4.2 152L4.3 154L4.7 156L4.8 158L4.9 160L4.9 162L4.6 164L4.4 166L5.2 168L5.5 170L4.2 172L4.4 174L4.7 176L5 178L5.3 180L4.7 182L4.9 184L4.4 186L4 188L4.5 190L4.7 192L4.8 194L4.8 196L4.5 198L4.9 200L4.8 202L5 204L5.3 206L5.5 208L5.6 210L5.4 212L5.2 214L5.6 216L5.4 218L5.3 220L6.1 222L6.2 224L6 226L5.8 228L5.6 230L5 232L4.6 234L4.5 236L4.8 238L4 240L12 240Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-rim-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='240' viewBox='0 0 12 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3C/filter%3E%3Cpath d='M0 0L7.9 0L7.8 2L8.4 4L8.8 6L8.6 8L8.5 10L8.7 12L7.9 14L8.2 16L8.2 18L8.2 20L7.6 22L7.9 24L7.5 26L7.8 28L7.9 30L7.9 32L7.6 34L8.2 36L8.5 38L9 40L8.3 42L7.6 44L8.5 46L7.8 48L7.2 50L7.8 52L8 54L7.3 56L7.3 58L7.8 60L7.7 62L7.4 64L7.5 66L7.4 68L8 70L7.8 72L7.5 74L8.2 76L7.8 78L7.8 80L7.8 82L7.2 84L8.1 86L8.9 88L7.6 90L7.4 92L6.8 94L6.8 96L7.2 98L7.5 100L7.2 102L6.7 104L7.2 106L7.7 108L7.2 110L7.1 112L7.8 114L7.6 116L7.8 118L8.4 120L8 122L8.2 124L8.3 126L7.8 128L7.7 130L7.2 132L7.3 134L7 136L8.3 138L8 140L7.9 142L8 144L7.6 146L7.9 148L7.7 150L7.7 152L7.5 154L6.8 156L7.6 158L7.2 160L7.6 162L8.2 164L7.7 166L7.1 168L6.7 170L6.9 172L7 174L6.8 176L6.2 178L6.2 180L5.8 182L6.5 184L6.5 186L7.1 188L6.9 190L6.9 192L6.4 194L6 196L6.2 198L6.9 200L7.1 202L7.6 204L7.6 206L7.4 208L7.4 210L8.3 212L7.5 214L8.4 216L8.3 218L8.8 220L8.4 222L7.8 224L6.9 226L7.1 228L7.2 230L7.2 232L7.4 234L7.6 236L8.7 238L7.9 240L0 240Z' filter='url(%23b)'/%3E%3C/svg%3E");
  --j-torn-rim: var(--j-torn-rim-t) top left / 240px 12px repeat-x, var(--j-torn-rim-b) bottom left / 240px 12px repeat-x,
    var(--j-torn-rim-l) top left / 12px 240px repeat-y, var(--j-torn-rim-r) top right / 12px 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 22px) calc(100% - 22px) no-repeat;
  --j-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --j-font-body: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --j-font-type: "Courier Prime", "Courier New", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --j-grid-paper: #111713;
    --j-grid-line: rgb(170 196 164 / .06);
    --j-grid-line-strong: rgb(170 196 164 / .1);
    --j-cream: #1b231d;
    --j-page: #1f2821;
    --j-ink: #ede6d3;
    --j-ink-soft: #cfc8b4;
    --j-forest: #4a5e3f;
    --j-forest-deep: #5a7050;
    --j-deep: #2c4233;
    --j-sage: #9aab87;
    --j-mustard: #c9a441;
    --j-kraft: #3a342a;
    --j-kraft-rim: #4a4336;
    --j-pencil: #aaa592;
    --j-clay: #e08c70;
    --j-rule-line: rgb(170 196 164 / .14);
    --j-margin-line: rgb(224 140 112 / .3);
    --j-shadow: 0 0 0;
    --j-tape: rgb(214 204 170 / .42);
    --j-photo: #2a332c;
    --j-stamp-match: #9cc48c;
    --j-stamp-close: #e2c060;
    --j-stamp-not: #ee9a80;
    --j-focus: #ede6d3;
    --j-focus-halo: #c9a441;
    --j-rule-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='6'%3E%3Cpath d='M0 2.9c1 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4-.1 6-.1 2-.1 4-.1 6-.2 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .2 2 0 4 .1 6 .1 2 .1 4 .1 6 .2 2 0 4 0 6 0 2 0 4 0 6 .1 2 0 4 0 6 0 2 0 4 0 6 0 2-.1 4-.1 6-.1 2-.1 4-.1 6-.2 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2-.1 4-.1 6-.2 2-.1 4-.2 6-.3 2 0 4-.1 6-.1 2 0 4 0 6 .1 2 0 4 0 6 .1 2 0 4 .1 6 .2 2 0 4 0 6 0 2 .1 4 0 6 0 2 0 4-.1 6-.1 2-.1 4-.1 6-.1 2-.1 4-.1 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 .1 4 .1 6 .2 2 0 4 .1 6 .1 2 .1 4 .2 6 .3 2 0 4 .2 6 .3 2 .1 4 .3 6 .5 2 .1 4 .3 6 .4 2 .1 4 .3 6 .3 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 0 6 0 2-.1 4-.1 6-.2 2 0 4-.1 6-.2 2 0 4-.1 6-.1 2-.1 4-.1 6-.1 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4 0 6-.1 2 0 4-.1 6-.1 2-.1 4-.2 6-.3 2-.1 4-.2 6-.2 2-.1 4-.1 6-.1 2 0 4 .1 6 .2 2 .1 4 .3 6 .4 2 .1 4 .2 6 .3 2 .1 4 .1 6 .1 2 0 4-.1 6-.2 2 0 4-.1 6-.2 2 0 5 0 6 0' fill='none' stroke='%23A9A493' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    --j-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    --j-fibre: linear-gradient(transparent, transparent);
    --j-mottle: linear-gradient(transparent, transparent);
    --j-cream-rim: #2b352d;
    --j-kraft-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --j-grid-paper: #111713;
  --j-grid-line: rgb(170 196 164 / .06);
  --j-grid-line-strong: rgb(170 196 164 / .1);
  --j-cream: #1b231d;
  --j-page: #1f2821;
  --j-ink: #ede6d3;
  --j-ink-soft: #cfc8b4;
  --j-forest: #4a5e3f;
  --j-forest-deep: #5a7050;
  --j-deep: #2c4233;
  --j-sage: #9aab87;
  --j-mustard: #c9a441;
  --j-kraft: #3a342a;
  --j-kraft-rim: #4a4336;
  --j-pencil: #aaa592;
  --j-clay: #e08c70;
  --j-rule-line: rgb(170 196 164 / .14);
  --j-margin-line: rgb(224 140 112 / .3);
  --j-shadow: 0 0 0;
  --j-tape: rgb(214 204 170 / .42);
  --j-photo: #2a332c;
  --j-stamp-match: #9cc48c;
  --j-stamp-close: #e2c060;
  --j-stamp-not: #ee9a80;
  --j-focus: #ede6d3;
  --j-focus-halo: #c9a441;
  --j-rule-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='6'%3E%3Cpath d='M0 2.9c1 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4-.1 6-.1 2-.1 4-.1 6-.2 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .2 2 0 4 .1 6 .1 2 .1 4 .1 6 .2 2 0 4 0 6 0 2 0 4 0 6 .1 2 0 4 0 6 0 2 0 4 0 6 0 2-.1 4-.1 6-.1 2-.1 4-.1 6-.2 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2-.1 4-.1 6-.2 2-.1 4-.2 6-.3 2 0 4-.1 6-.1 2 0 4 0 6 .1 2 0 4 0 6 .1 2 0 4 .1 6 .2 2 0 4 0 6 0 2 .1 4 0 6 0 2 0 4-.1 6-.1 2-.1 4-.1 6-.1 2-.1 4-.1 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2-.1 4-.1 6-.1 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 .1 4 .1 6 .2 2 0 4 .1 6 .1 2 .1 4 .2 6 .3 2 0 4 .2 6 .3 2 .1 4 .3 6 .5 2 .1 4 .3 6 .4 2 .1 4 .3 6 .3 2 .1 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 .1 6 .1 2 0 4 0 6 0 2 0 4 0 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4 0 6-.1 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 0 6 0 2 0 4 .1 6 .1 2 0 4 0 6 0 2-.1 4-.1 6-.2 2 0 4-.1 6-.2 2 0 4-.1 6-.1 2-.1 4-.1 6-.1 2 0 4 0 6 0 2 .1 4 .1 6 .1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4-.1 6-.1 2 0 4 0 6-.1 2 0 4-.1 6-.1 2-.1 4-.2 6-.3 2-.1 4-.2 6-.2 2-.1 4-.1 6-.1 2 0 4 .1 6 .2 2 .1 4 .3 6 .4 2 .1 4 .2 6 .3 2 .1 4 .1 6 .1 2 0 4-.1 6-.2 2 0 4-.1 6-.2 2 0 5 0 6 0' fill='none' stroke='%23A9A493' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --j-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --j-fibre: linear-gradient(transparent, transparent);
  --j-mottle: linear-gradient(transparent, transparent);
  --j-cream-rim: #2b352d;
  --j-kraft-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- surfaces */

.j-grid {
  background-color: var(--j-grid-paper);
  background-image:
    var(--j-grain),
    linear-gradient(var(--j-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--j-grid-line-strong) 1px, transparent 1px),
    linear-gradient(var(--j-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--j-grid-line) 1px, transparent 1px);
  background-size: 220px 220px, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* The cream sheet. Its paper and torn edge live on ::before and its shadow on
   ::after, so nothing that contains a <video> needs a filter. */
.j-sheet {
  position: relative;
  isolation: isolate;
  color: var(--j-ink);
}
.j-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--j-cream);
  background-image: var(--j-grain), var(--j-fibre), var(--j-mottle);
  background-size: 220px 220px, 360px 360px, 480px 480px;
  -webkit-mask: var(--j-deckle);
  mask: var(--j-deckle);
}
.j-sheet::after {
  content: "";
  position: absolute;
  inset: 10px 8px 4px;
  z-index: -2;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgb(var(--j-shadow) / .1),
    0 14px 30px -6px rgb(var(--j-shadow) / .2),
    0 40px 70px -30px rgb(var(--j-shadow) / .25);
}

.j-lined {
  --line-gap: 30px;
  --line-top: 44px;
  background-color: var(--j-page);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line-gap) - 1px),
      var(--j-rule-line) calc(var(--line-gap) - 1px) var(--line-gap));
  background-position: 0 var(--line-top);
  background-repeat: repeat-x;
  background-size: 100% calc(100% - var(--line-top));
  background-attachment: local;
  line-height: var(--line-gap);
}
.j-lined--margin {
  background-image:
    linear-gradient(90deg, transparent 0 46px, var(--j-margin-line) 46px 47px, transparent 47px 50px,
      var(--j-margin-line) 50px 51px, transparent 51px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line-gap) - 1px),
      var(--j-rule-line) calc(var(--line-gap) - 1px) var(--line-gap));
  background-position: 0 0, 0 var(--line-top);
  background-size: 100% 100%, 100% calc(100% - var(--line-top));
  background-repeat: no-repeat, repeat-x;
  padding-left: 64px;
}

/* The open notebook: two .j-page children. */
.j-notebook {
  position: relative;                    /* no stacking context: the binding sits behind the pages */
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 5px;
  background: var(--j-page);
  box-shadow:
    0 1px 0 #e7e0cd, 0 2px 0 #d6ceb9, 0 3px 0 #ebe4d2, 0 4px 0 #d2c9b3, 0 5px 0 #e4dcc8,
    0 6px 1px rgb(var(--j-shadow) / .25),
    0 22px 40px -18px rgb(var(--j-shadow) / .45);
}
.j-notebook::before {                    /* sage cloth binding peeking out beneath */
  content: "";
  position: absolute;
  inset: 6px -9px -11px;
  z-index: -1;
  border-radius: 8px;
  background: var(--j-cloth), linear-gradient(#7d8f6b, #6c7d5c);
  background-size: 6px 6px, auto;
  box-shadow: 0 2px 3px rgb(var(--j-shadow) / .3), 0 18px 34px -16px rgb(var(--j-shadow) / .5);
}
.j-notebook::after {                     /* the spine: a soft fold in the middle */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 96px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--j-shadow) / .06) 30%, rgb(var(--j-shadow) / .2) 49%,
    rgb(255 255 255 / .25) 50.5%, rgb(var(--j-shadow) / .1) 53%, rgb(var(--j-shadow) / .05) 70%, transparent);
}
.j-page { position: relative; min-width: 0; padding: 36px 40px 40px; }
.j-page:first-child { border-radius: 5px 0 0 5px; background: linear-gradient(90deg, transparent 70%, rgb(var(--j-shadow) / .035)); }
.j-page:last-child { border-radius: 0 5px 5px 0; }
@media (max-width: 760px) {
  .j-notebook { grid-template-columns: 1fr; }
  .j-notebook::after {
    top: auto; left: 0; right: 0; bottom: auto; width: auto; height: 36px; transform: none;
    background: linear-gradient(transparent, rgb(var(--j-shadow) / .1) 48%, rgb(255 255 255 / .2) 52%, transparent);
    display: none;
  }
  .j-page { padding: 24px 18px 28px; }
  .j-page + .j-page { border-top: 1px dashed var(--j-rule-line); }
}

/* Torn scraps. The body is ::before, a lighter fibrous rim is ::after, both masked. */
.j-scrap {
  --scrap: var(--j-kraft);
  --scrap-rim: var(--j-kraft-rim);
  position: relative;
  isolation: isolate;
  padding: 18px 20px;
  color: var(--j-ink);
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 1px 1px rgb(var(--j-shadow) / .18)) drop-shadow(0 6px 8px rgb(var(--j-shadow) / .12));
}
.j-scrap::before, .j-scrap::after { content: ""; position: absolute; inset: 0; border-radius: 4px 6px 5px 7px; }
.j-scrap::before {
  z-index: -1;
  inset: 1px;
  background-color: var(--scrap);
  background-image: var(--j-kraft-fibre), var(--j-grain);
  background-size: 200px 200px, 220px 220px;
  -webkit-mask: var(--j-torn);
  mask: var(--j-torn);
}
.j-scrap::after {
  z-index: -2;
  background: var(--scrap-rim);
  -webkit-mask: var(--j-torn-rim);
  mask: var(--j-torn-rim);
}
.j-kraft { --scrap: var(--j-kraft); --scrap-rim: var(--j-kraft-rim); }
.j-green { --scrap: var(--j-deep); --scrap-rim: #53685a; color: #f4efe3; }
.j-cream { --scrap: var(--j-page); --scrap-rim: var(--j-cream-rim); }

.j-sticky {
  position: relative;
  padding: 22px 18px 18px;
  color: #1f2a1e;
  background: linear-gradient(170deg, #ddb957, #d6b04a 45%, #cfa841);
  transform: rotate(var(--tilt, 1.5deg));
  box-shadow: 0 1px 1px rgb(var(--j-shadow) / .18), 0 12px 14px -10px rgb(var(--j-shadow) / .4);
  border-radius: 1px 1px 2px 14px / 1px 1px 2px 6px;
}
.j-sticky::after {                       /* the curl of the bottom corner */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 16px;
  background: linear-gradient(to top, rgb(var(--j-shadow) / .1), transparent);
  border-radius: 0 0 2px 60% / 0 0 2px 100%;
  pointer-events: none;
}

.j-tape {
  display: block;
  width: var(--tape-w, 104px);
  height: var(--tape-h, 26px);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 2px, transparent 2px 5px),
    linear-gradient(rgb(255 255 255 / .18), transparent 40%, rgb(0 0 0 / .04)),
    var(--j-tape);
  clip-path: var(--j-tape-clip);
  transform: rotate(var(--tilt, -4deg));
  pointer-events: none;
}

.j-photo {
  position: relative;
  display: block;
  padding: 10px;
  background: var(--j-photo);
  transform: rotate(var(--tilt, -.6deg));
  box-shadow: 0 1px 1px rgb(var(--j-shadow) / .16), 0 10px 22px -10px rgb(var(--j-shadow) / .45);
}
.j-photo > video, .j-photo > img, .j-photo > canvas { display: block; width: 100%; }
.j-corners::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 3;
  pointer-events: none;
  --c: 32px;
  --pc: var(--j-deep);
  --pc-fold: rgb(255 255 255 / .22);
  background:
    linear-gradient(135deg, var(--pc) 0 48.5%, var(--pc-fold) 48.5% 51%, transparent 51%) top left / var(--c) var(--c) no-repeat,
    linear-gradient(225deg, var(--pc) 0 48.5%, var(--pc-fold) 48.5% 51%, transparent 51%) top right / var(--c) var(--c) no-repeat,
    linear-gradient(45deg, var(--pc) 0 48.5%, var(--pc-fold) 48.5% 51%, transparent 51%) bottom left / var(--c) var(--c) no-repeat,
    linear-gradient(315deg, var(--pc) 0 48.5%, var(--pc-fold) 48.5% 51%, transparent 51%) bottom right / var(--c) var(--c) no-repeat;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3));
}

/* Dictionary: index cards in a catalogue drawer. */
.j-drawer {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 6px;
  background:
    linear-gradient(rgb(0 0 0 / .18), transparent 18px),
    repeating-linear-gradient(91deg, rgb(255 255 255 / .03) 0 7px, rgb(0 0 0 / .035) 7px 9px, transparent 9px 17px),
    linear-gradient(#8a6a48, #7a5c3e);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .35), inset 0 0 0 2px rgb(0 0 0 / .12), 0 10px 22px -12px rgb(var(--j-shadow) / .5);
}
.j-label-holder {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 3px;
  color: #1f2a1e;
  background: linear-gradient(#f7f1e1, #ece3cf);
  box-shadow: 0 0 0 3px #b99a55, 0 0 0 4px #7d6532, 0 2px 4px 3px rgb(0 0 0 / .25);
  font: 700 12px/1.2 var(--j-font-type);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.j-index-card {
  position: relative;
  padding: 34px 18px 14px;
  color: #1f2a1e;
  background:
    linear-gradient(transparent 0 26px, rgb(168 71 47 / .55) 26px 27px, transparent 27px),
    repeating-linear-gradient(transparent 0 23px, rgb(74 110 140 / .22) 23px 24px) 0 27px / 100% calc(100% - 27px) no-repeat,
    #fbf8ef;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .14), 0 6px 12px -8px rgb(0 0 0 / .4);
}

/* Specimen plate: a ruled double frame, like a botanical plate. */
.j-plate {
  position: relative;
  padding: 34px 30px 30px;
  background: var(--j-page);
  outline: 1px solid var(--j-ink);
  outline-offset: -10px;
  box-shadow: inset 0 0 0 13px var(--j-page), inset 0 0 0 15px var(--j-ink);
}
.j-plate-cell { margin: 0; text-align: center; }
.j-plate-cell figcaption { font: 13px/1.3 var(--j-font-type); color: var(--j-ink); margin-top: 6px; }

/* ------------------------------------------------------------------- marks */

.j-type { font-family: var(--j-font-type); font-size: 14px; letter-spacing: .04em; }
.j-caps { font-family: var(--j-font-body); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.j-rule { display: block; height: 6px; border: 0; margin: 0; background: var(--j-rule-img) 0 50% / 600px 6px repeat-x; opacity: .8; }

.j-stamp {
  --stamp: var(--j-stamp-match);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em .85em .44em;
  color: var(--stamp);
  font: 700 18px/1 var(--j-font-type);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 2.5px solid currentColor;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3.5px currentColor;
  transform: rotate(var(--tilt, -5deg));
  -webkit-mask: var(--j-ink-worn) 0 0 / 160px 160px;
  mask: var(--j-ink-worn) 0 0 / 160px 160px;
  mix-blend-mode: multiply;
}
.j-stamp .j-icon { width: 1.1em; height: 1.1em; stroke-width: 2; }
.j-stamp--match { --stamp: var(--j-stamp-match); }
.j-stamp--close { --stamp: var(--j-stamp-close); }
.j-stamp--not { --stamp: var(--j-stamp-not); }
.j-stamp--in { animation: j-stamp-in .42s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes j-stamp-in {
  0% { opacity: 0; transform: rotate(var(--tilt, -5deg)) scale(1.6); }
  55% { opacity: 1; transform: rotate(var(--tilt, -5deg)) scale(.94); }
  100% { opacity: 1; transform: rotate(var(--tilt, -5deg)) scale(1); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .j-stamp { mix-blend-mode: normal; } }
:root[data-theme="dark"] .j-stamp { mix-blend-mode: normal; }

.j-icon {
  width: 24px;
  height: 24px;
  flex: none;
  vertical-align: -6px;
}

.j-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 22px 10px 18px;
  border: 0;
  border-radius: 999px;
  color: #f4efe3;
  background: var(--j-forest);
  font: 600 16px/1.2 var(--j-font-body);
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 -2px 0 rgb(0 0 0 / .14) inset, 0 3px 8px -3px rgb(var(--j-shadow) / .5);
}
.j-btn:hover { background: var(--j-forest-deep); }
.j-btn:active { transform: translateY(1px); }
.j-btn:focus-visible, .j-focus:focus-visible {
  outline: 3px solid var(--j-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--j-focus-halo);
}
.j-hint { display: flex; align-items: flex-start; gap: 8px; color: var(--j-pencil); font: italic 15px/1.45 var(--j-font-body); }
.j-hint .j-icon { width: 18px; height: 18px; margin-top: 2px; }

/* --------------------------------------------------------------------- art */

.j-art--wash, .j-art--ink { display: block; max-width: 100%; height: auto; pointer-events: none; user-select: none; }
.j-art--wash, .j-art--ink { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .j-art--wash { mix-blend-mode: normal; opacity: .6; filter: saturate(.8) brightness(.9); }
  :root:not([data-theme="light"]) .j-art--ink { mix-blend-mode: screen; opacity: .5; filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .j-art--wash { mix-blend-mode: normal; opacity: .6; filter: saturate(.8) brightness(.9); }
:root[data-theme="dark"] .j-art--ink { mix-blend-mode: screen; opacity: .5; filter: invert(1) hue-rotate(180deg); }

.j-collage { pointer-events: none; }
@media (max-width: 900px) { .j-collage:not(.j-collage--keep) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .j-stamp--in { animation: none; }
}