/* The AMA's paper, shared by the page, the desk and the pictures the desk draws (card.js
   reads them from this file); its colour and grain are the design system's (tokens.css).
   Torn paper (Mustafa, 2026-10-29: the notes felt sterile; "a torn paper border like a
   letter"): four strips of what's torn away, each a 240px tile that repeats without a seam,
   the tear wandering up to 3.6px in from the edge. Drawn once (a seeded generator, so they
   never change), and started at a different place on each note so no two edges match */
:root {
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='5'%3E%3Cpath d='M0 0L0 3.3L2.2 2.3L5.5 2.3L9 1.3L11.6 1.2L13.5 0.9L15.6 1.2L17.7 1.3L20.2 1.6L23 2.6L24.6 1.5L27.9 2.5L30.8 0.9L32.9 0.5L36.6 1L39.9 1.5L42.9 1.5L46.1 2.1L48.6 2.5L52.5 2.7L55.4 2.3L58.7 1.3L61.4 1.8L65 1.8L67.9 0.7L71.4 1.9L74.2 1.4L75.6 2L78.6 1.6L82.3 3.3L84.2 1.3L86.1 1.3L88.9 0.4L92.6 0.4L96.6 1.5L98.3 1.7L102 2.1L105.6 2.7L107.1 2.6L109.3 1.8L111.5 2.2L114.5 1.9L117.4 1.5L119 1L122.9 1.5L126.8 3L129.1 3L132.4 2.2L134.3 2L136.6 2.3L140.1 2.1L142.7 0.9L144.7 0.7L147.8 1.3L151.3 2.3L152.9 2.1L155.8 3.5L157.5 2.2L160.5 2.6L162.6 2.9L165.8 2.2L167.9 1.7L170.2 1.8L173.4 2.4L175.1 2.8L178.7 2.1L181.9 3.4L184.1 3.6L186.4 2.5L189.7 3.6L192.3 2.8L194 1.8L195.5 1.7L197.2 1.8L199.3 0.9L201.3 1.8L204.9 3.5L208.6 2.5L210.3 2.2L212.8 2.3L216.5 2L219 1.8L221.4 0.9L225.3 1.6L228.5 2L231.2 1.7L234.2 2.6L238.1 3L240 3.3L240 0Z'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='5'%3E%3Cpath d='M0 5L0 4.3L1.6 4.2L3.6 3.6L5.4 4.1L7.9 4.3L11.1 4L13.7 3.9L15.1 4.4L18.1 3.3L20.1 3.1L21.8 3.8L24.4 3L26.1 3L28.3 3.2L31.5 3L34.5 3.1L37.2 3L39.3 3.5L41.8 3.7L45.7 3.7L47.6 3.2L50.7 2.6L54.5 2.6L57.3 2.3L60.4 2.4L62.7 2.1L64.3 1.4L66.9 2.1L68.8 2.8L72.4 2.4L75.9 2.6L77.4 2.9L79.5 3.2L82.3 3.6L85.4 3.9L88.5 4.2L91.3 3.1L94.8 3.2L96.4 3L100.1 2.2L102.6 1.4L104.1 2.1L107 1.4L108.7 1.9L110.2 1.4L112.8 1.9L115 1.4L118 1.9L121.1 2.4L123.7 3.3L126.5 3.8L128.6 3.4L131.1 2.6L135.1 3.4L137.3 3.3L141.2 2.4L145.1 2.5L149.1 3.1L152.4 3L156.3 2.7L158.5 2.9L161.1 2.8L164.8 3.3L168.4 3.3L171.6 2.6L174.3 3.2L175.7 2.6L179.2 3L181.8 2.8L184.3 2.9L186.4 2.5L188.5 3.1L190 2.9L191.8 3L195.2 4L198 4.1L200.3 4.5L202.6 4.6L204.7 4.3L208.6 4.2L211.7 4.5L213.4 3.9L215.5 3.3L217.4 3.4L221.1 3.2L224.9 2.2L228.4 3.2L231 2.2L234.7 3L237.9 2.7L240 4.3L240 5Z'/%3E%3C/svg%3E");
  --tear-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='240'%3E%3Cpath d='M0 0L1.5 0L1.4 1.8L1.8 4.6L1.4 7.3L0.4 10.3L1 13.4L1 16L0.7 18.8L1.4 21.1L2 23.7L1.2 26.8L2 30.2L2.8 32.6L2.3 34.8L1.7 37.4L1.5 41.1L1.3 43.5L1.9 45L1.7 47.3L1.9 50.1L1.9 52.2L2.3 55.8L1.4 58.4L1.7 60.4L3.1 62.9L2.7 64.7L2.6 67.8L2.6 70.5L3.1 73.9L3.1 75.4L2.9 78.3L2.9 81.1L2.4 85.1L1.2 88.5L1.6 91.7L1.1 95.6L1.8 99.5L2.2 102.3L1.9 106.3L1.9 109.6L2.2 113.2L1.6 115L2.2 117.1L1.7 119.8L1.6 121.5L1.5 124.7L1.2 128.5L0.9 131.1L0.4 134.3L0.4 136.9L1 140.2L1.7 143.5L1.8 145.8L1.7 147.3L1.6 150.9L2.9 154.5L1.9 156.3L2 158.9L2.5 162.1L1.9 163.7L1 166.6L2.2 170L2.2 171.8L2.2 174.8L1.4 176.9L1.9 178.8L2.5 180.6L3.1 184.5L3.3 186.6L2.6 188L2.5 190.4L3.1 193.6L2.9 196.7L2.5 198.1L3.1 200.6L2.7 204.5L2.1 207.4L1.5 211.1L1.3 214L1 216.7L2.2 220.3L1.7 223.8L2.2 226.5L1.7 229.5L1.6 232.6L2.3 235L1.6 237.1L1.5 240L0 240Z'/%3E%3C/svg%3E");
  --tear-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='240'%3E%3Cpath d='M5 0L4.1 0L3.1 1.8L2.3 4.7L2.9 7L3.2 10L3.6 13.3L3.2 16.5L3.6 17.9L3.6 20.5L3.1 23.5L2.4 27.2L2.5 28.9L3 32.8L1.4 35.9L2.8 39.3L1.9 41.7L1.8 44.8L1.6 46.8L1.8 50.7L2.1 52.5L1.7 54.3L2.9 56.7L3 59.6L3.4 61.9L3.6 65.1L3.3 66.6L4 69.4L3.7 71.6L4 73.9L4.2 76.8L3.8 80.5L3.7 84.1L2.8 86.8L3.2 90.7L3 93.1L3.2 96L4 98.2L2.2 101.4L3.9 104.2L3.2 107.6L3.3 110L3.8 111.8L3.6 114.9L2.2 118.3L2.5 120.1L2.4 122.4L2 125.2L3 128.3L2.6 130.2L3.2 132.4L2.9 135.3L3.6 137.6L2.9 141.3L3.2 143.1L3.3 145.1L3.7 147.2L3.2 150.1L3.8 152.9L3.4 155.3L3.1 158.8L2.7 160.5L3.6 163.5L2.4 164.9L2.7 167.3L1.8 170.7L2.9 173.5L2.6 176L2.6 178.2L3.4 180.5L2.8 182.3L2.4 184L3.3 187.7L2.7 189.4L2.5 192.7L2.1 195.8L2.5 198.4L2.8 201.5L2.1 204.8L3 207.2L2.9 210.7L2.6 214.1L3.4 216L4.1 219.5L3.8 222.3L3.7 224.7L4.6 227.8L3.8 230.4L4.2 233.2L3.7 235.1L4.4 237.9L4.1 240L5 240Z'/%3E%3C/svg%3E");
  /* A fold's fibres: crushed along it, they break its hairline and its lit side into short
     streaks. A noise the browser draws (feTurbulence), stretched along the fold, tiling
     without seams */
  --crease-fibre-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.12' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2 0 0 0 -0.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --crease-fibre-across: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12 0.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2 0 0 0 -0.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23g%29'/%3E%3C/svg%3E");
}

/* A torn note on any page (the blog's posts and front pages): the note holds the words, its
   paper is a layer under them (<span class="paper torn">), the sheet less what's torn from each
   edge, each note's tear started at its own place (--tear-x, --tear-y), with the grain. The
   AMA's own notes add a dog-ear and folds to this (ama.css, .note > .paper) */
.paper.torn {
  /* A sheet a breath lighter than the table, so what's printed on it (a passage's card) stands out */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--paper-raised, var(--bg-surface));
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px; mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  -webkit-mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y; mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-out, source-over, source-over, source-over; mask-composite: subtract, add, add, add;
}
.paper.torn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity);
}

/* A note's shadow follows its tear: soft and close, as paper lying on a table casts. Its folds
   (fold.js, foldNote): each a hairline with a lit side, drawn as two strips laid on the fold;
   the half beyond each fold a breath darker. The AMA's passed notes and the blog's print of a
   passage alike */
:root {
  --note-shadow-near: oklch(0.2 0.02 60 / 0.16);
  --note-shadow-far: oklch(0.2 0.02 60 / 0.09);
  /* A fold's strength by day: its shadow lightened, its light as drawn */
  --fold-shade: 0.38;
  --fold-light: 1;
  /* The half beyond each fold, never quite flat again, a breath darker */
  --crease-facet: oklch(0.2 0.02 60 / 0.011);
}
:root[data-theme="dark"] {
  --note-shadow-near: oklch(0 0 0 / 0.55);
  --note-shadow-far: oklch(0 0 0 / 0.35);
  --fold-shade: 1;
  --fold-light: 0.1;
  --crease-facet: oklch(0 0 0 / 0.042);
}
.is-folded { --facet-l: transparent; --facet-r: var(--crease-facet); --facet-t: transparent; --facet-b: var(--crease-facet); }
.is-folded > .paper::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--facet-l) calc(var(--fold-x, 50%) - 5px), var(--facet-r) calc(var(--fold-x, 50%) + 5px)),
    linear-gradient(180deg, var(--facet-t) calc(var(--fold-y, 50%) - 5px), var(--facet-b) calc(var(--fold-y, 50%) + 5px));
}
.paper > .fold { position: absolute; background: 0 0 / 100% 100% no-repeat; }
.paper > .fold.down {
  top: 0; bottom: 0; left: calc(var(--fold-x, 50%) - 12px); width: 24px;
  -webkit-mask: var(--crease-fibre-down) 0 0 / 160px 160px;
  mask: var(--crease-fibre-down) 0 0 / 160px 160px;
}
.paper > .fold.across {
  left: 0; right: 0; top: calc(var(--fold-y, 50%) - 12px); height: 24px;
  -webkit-mask: var(--crease-fibre-across) 0 0 / 160px 160px;
  mask: var(--crease-fibre-across) 0 0 / 160px 160px;
}
.paper > .fold.shade { opacity: var(--fold-shade); }
.paper > .fold.light { opacity: var(--fold-light); }

/* A slip of the page's paper at the foot of the window, holding what can be done with what's
   chosen to share: the AMA's cards (ama.js), a post's passage (blog/ask.js). The raised paper
   (--bg-surface), or by night it vanished into the cards under it */
.share-slip {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; translate: -50% 0;
  display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 18px; isolation: isolate;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far));
}
.share-slip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-surface);
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  -webkit-mask-position: 0 0, 60px 0, -60px 100%, 0 40px, 100% -40px;
  mask-position: 0 0, 60px 0, -60px 100%, 0 40px, 100% -40px;
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add;
}
/* What a screen reader is told from the slip (the AMA's: as it refuses a fifth card) */
.share-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }