/* Paper Trail (byshrey.com/notes) v5: the shared page styles. One dark theme on every page, full width on big screens.
   Tokens copied from the lobby (public/index.html :root). Load this first, then kit/kit.css (the toys). */
:root {
  --bg: #000000;
  --panel: #0C0C0C;
  --panel-line: #222;
  --text: #FFFFFF;
  --text-soft: rgba(255, 255, 255, 0.7);
  --gray: #8F8F8F;
  --accent: #FF3B30;
  --hairline: rgba(255, 255, 255, 0.14);
  --paper: #F4F1EA; --paper-edge: #E4DFD3; --ink: #1B1A18; --ink-soft: #55524C; --stamp: #D7261C;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Anton', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3.4vw, 96px);
  --max: 2560px;
  /* thermal paper grain, drawn once as an SVG noise tile */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #333 var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
[hidden] { display: none !important; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- header: the lobby wordmark, "shrey" leads, "by" just labels it ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; border-bottom: 1px solid var(--hairline); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.wm { display: inline-flex; align-items: baseline; line-height: 1; }
.wm-by { font: 300 13px/1 'Archivo', sans-serif; opacity: 0.55; margin-right: 3px; text-transform: lowercase; }
.wm-name { font: 400 50px/0.8 'Mrs Saint Delafield', cursive; padding: 6px 4px 10px 0; }
.brand-slash { color: var(--accent); font: 400 24px/1 var(--font-display); }
/* deslop-ignore-next-line 10: the byshrey.com wordmark, not a kicker */
.brand-notes { font: 400 21px/1 'Major Mono Display', ui-monospace, monospace; text-transform: uppercase; letter-spacing: -0.02em; }
.brand:hover .brand-notes { color: var(--accent); }

.shelves { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.shelves::-webkit-scrollbar { display: none; }
.shelf-btn {
  appearance: none; border: 1px solid var(--hairline); background: none; color: var(--text-soft);
  font: 500 13px/1 var(--font-ui); padding: 10px 14px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.shelf-btn:hover { color: var(--text); border-color: rgba(255,255,255,.45); }
.shelf-btn[aria-pressed="true"] { background: var(--text); color: #000; border-color: var(--text); }

/* ---- shared bits ---- */
.meta { color: var(--gray); font-size: 13.5px; }
.meta .shelf { color: var(--accent); }
.lede { color: var(--text-soft); max-width: 48ch; font-size: 18px; margin: 0; }
.read-link {
  display: inline-flex; align-items: center; gap: 10px; background: var(--text); color: #000; text-decoration: none;
  font: 700 14px/1 var(--font-ui); padding: 15px 22px; border-radius: 999px; transition: background .2s;
}
.read-link:hover { background: var(--accent); }

/* ---- kinetic type (rules: blog-write/modes/kinetic-type.md) ---- */
/* a rubber stamp landing (the printer's mode stamp uses it too) */
@keyframes stampin { from { transform: scale(1.35) rotate(-3deg); opacity: 0; } }

.k { display: inline-block; }
.k[data-k="shake"].play { animation: kshake .45s cubic-bezier(.36,.07,.19,.97) 2; }
@keyframes kshake { 20%, 60% { transform: translateX(-3px) rotate(-2deg); } 40%, 80% { transform: translateX(3px) rotate(2deg); } }
.k[data-k="grow"] { transition: color .5s; }
.k[data-k="grow"].play { color: var(--accent); font-weight: 700; animation: kgrow .7s cubic-bezier(.16,1,.3,1); }
@keyframes kgrow { 40% { transform: scale(1.22); } }
.k[data-k="strike"] { background: linear-gradient(var(--accent), var(--accent)) left 55%/0 .09em no-repeat; transition: background-size .6s cubic-bezier(.7,0,.3,1); }
.k[data-k="strike"].play { background-size: 100% .09em; }

/* slang: bold italic, a red underline draws in, tap for the meaning */
.sl { font-weight: 700; font-style: italic; cursor: help; padding: 0 .06em;
  background: linear-gradient(var(--accent), var(--accent)) left bottom/0 2px no-repeat; transition: background-size .55s cubic-bezier(.16,1,.3,1); }
.sl.play { background-size: 100% 2px; }


/* ---- sticky notes: glued on top, the paper below peels (sticky.js) ---- */
.stack { list-style: none; margin: 0; padding: 0; }
.sticky { position: relative; z-index: var(--z, 1); translate: var(--x, 0) 0; }
.stack > .sticky + .sticky { margin-top: -38%; }
.sn {
  display: block; position: relative; color: var(--ink); text-decoration: none; user-select: none; -webkit-user-select: none;
  transform: rotate(var(--r, 0deg)) perspective(600px) rotateX(calc(var(--lift, 0deg) * var(--lk, 1))) rotateY(var(--tw, 0deg)); transform-origin: 50% 0; touch-action: pan-y; cursor: grab;   /* --lift: kit/air.js, a gust from a fast scroll */
  filter: brightness(calc(1 - var(--lv, 0) * .006)) drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 calc(12px + var(--lv, 0) * .4px) calc(14px + var(--lv, 0) * .3px) rgba(0,0,0,.5));   /* lifted, it turns from the light and its shadow falls further */
}
.sn.peeling { cursor: grabbing; }
.sn:focus-visible { outline: none; }
.sn:focus-visible .sn-paper { outline: 2px solid var(--accent); outline-offset: 4px; }
.sn-paper {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 1; padding: 22% 9% 9%;
  background: linear-gradient(rgba(0,0,0,.045), rgba(0,0,0,0) 20%), var(--c, var(--paper)) var(--grain);
}
/* the glue strip catches light a little differently from the rest of the sheet */
.sn-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20%; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
/* the flap box sits off-note when folded; keep it from widening the page */
.wrap { overflow-x: clip; }   /* the wrap spans the window, so the paper toy still reaches both edges */
.sn-flapwrap { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(-2px 3px 3px rgba(0,0,0,.28)); }
.sn-flap { position: absolute; inset: 0; transform-origin: 0 0; clip-path: polygon(0 0, 0 0, 0 0); }
.sn .n-meta { font: 500 11px/1.4 var(--mono); color: var(--ink-soft); display: flex; justify-content: space-between; border-bottom: 1.5px dashed rgba(0,0,0,.22); padding-bottom: 8px; margin-bottom: 10px; text-transform: uppercase; }
.sn .n-title { font: 600 clamp(15px, 1.15vw, 19px)/1.28 var(--font-ui); margin: 0; letter-spacing: -0.01em; }
.sn .n-total { margin-top: auto; font: 600 12px/1 var(--mono); color: var(--stamp); padding-top: 9px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; }
.sn .stamp {
  position: absolute; right: 9%; bottom: 9%; transform: rotate(-9deg); font: 600 11px/1 var(--mono); letter-spacing: .14em; color: #B0231A;
  text-transform: uppercase; border: 2px solid #B0231A; border-radius: 4px; padding: 5px 7px; opacity: .92; mix-blend-mode: multiply;
}
.soon .n-title { color: #4D4943; }   /* dark enough to pass 4.5:1 even on the oldest, most faded note */
@media (max-width: 720px) {
  .sn .n-title { font-size: 13.5px; }
  .sn .n-meta { font-size: 11px; }
  .sn .n-total { font-size: 11px; }
  .sn .stamp { font-size: 11px; padding: 4px 5px; letter-spacing: .08em; }
}

.foot {
  border-top: 1px solid var(--hairline); margin-top: 40px; padding: 28px 0 40px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--gray); font-size: 13.5px;
}
.foot a { color: var(--text-soft); display: inline-block; padding: 12px 0; margin: -12px 0; }   /* a 44px tap target without moving the text */
.foot { padding-bottom: 72px; }   /* room for the toys-found counter pinned to the corner */

@media (max-width: 720px) {
  .top { height: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0 14px; }
  .wm-name { font-size: 44px; }
  .shelves { width: calc(100% + var(--gutter)); padding-right: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}

/* print: black on white, toys and printers hidden, link addresses shown, fact boxes kept */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .progress, .modebar, .mode-note, .t30, .rail, .side, .next, .endbits, .slip, #toys, .toys-found, canvas, .foot, nav, .dust-rew { display: none !important; }
  .body, .body p, .body li, .fact, .summary { color: #000 !important; background: #fff !important; box-shadow: none !important; }
  .fact, .summary, figure { break-inside: avoid; border: 1px solid #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; }
}