/* Zine: a cut-and-paste fanzine / scrapbook. Colours are sampled from the pack's art; fonts are self-hosted per pack. */
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/AlbertSans-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/AlbertSans-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/AlbertSans-normal-800.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/InstrumentSerif-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/InstrumentSerif-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Meow Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/MeowScript-normal-400.woff2') format('woff2'); }
:root {
  --paper: #f7ebe3;
  --paper-2: #eddacf;
  --ink: #302117;
  --ink-soft: #624e41;
  --accent: #e98549;
  --accent-deep: #aa4f18;
  --deep: #392518;
  --night: #18100c;
  --on-night: #f6eeea;
  --on-night-soft: #cbbcb4;
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Meow Script', 'Segoe Script', 'Brush Script MT', cursive;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --tilt: 1deg;
  --radius: 0px;
  --gap: 32px;
  --align: left;
  --white: #fffdf7;
  --tape: rgba(246, 238, 212, .82);
  --tape-solid: #f3ead0;
  --washi-a: color-mix(in srgb, var(--accent) 78%, transparent);
  --washi-b: color-mix(in srgb, var(--accent) 46%, transparent);
  --rule: color-mix(in srgb, var(--ink) 13%, transparent);
  --shade: 0 1px 1px rgba(0, 0, 0, .1), 0 12px 24px -10px rgba(0, 0, 0, .38);
  --wrap: min(1200px, 100% - 32px);
  /* torn and taped edges */
  --torn: polygon(0% 2.0px, 3.8% 4.0px, 5.7% 5.9px, 8.5% 3.9px, 11.9% 5.4px, 14.7% 4.9px, 17.7% 5.5px, 19.8% 3.6px, 23% 4.9px, 24.6% 4.6px, 27.2% 5.0px, 30.7% 0.3px, 33.4% 3.1px, 36.6% 1.6px, 39.5% 3.1px, 43.3% 1.5px, 45.5% 3.9px, 47.8% 1.2px, 50% 2.4px, 52.1% 4.7px, 55% 3.9px, 58.7% 1.6px, 60.8% 4.3px, 63.5% 4.5px, 65.4% 7.0px, 66.9% 4.8px, 69.2% 6.0px, 73% 4.6px, 74.9% 3.6px, 77% 2.9px, 79.5% 2.3px, 82.3% 3.3px, 84.3% 4.6px, 86.9% 4.3px, 89.9% 3.1px, 92.7% 2.0px, 95.9% 3.2px, 98.3% 1.9px, 100% 2.8px, 100% calc(100% - 3.4px), 97.7% calc(100% - 3.2px), 94.3% calc(100% - 5.2px), 92.6% calc(100% - 4.9px), 91% calc(100% - 3.1px), 89.2% calc(100% - 1.6px), 85.2% calc(100% - 1.5px), 82.1% calc(100% - 0.3px), 79.6% calc(100% - 1.6px), 77.8% calc(100% - 2.8px), 74.1% calc(100% - 2.8px), 70.4% calc(100% - 3.7px), 67% calc(100% - 1.8px), 65.6% calc(100% - 2.0px), 64% calc(100% - 1.1px), 61% calc(100% - 2.2px), 57.7% calc(100% - 3.4px), 54.5% calc(100% - 2.6px), 50.8% calc(100% - 3.3px), 48.4% calc(100% - 6.7px), 46.7% calc(100% - 5.2px), 45.3% calc(100% - 7.1px), 42.2% calc(100% - 6.9px), 40.8% calc(100% - 6.4px), 38.9% calc(100% - 6.2px), 36% calc(100% - 4.0px), 33.9% calc(100% - 1.4px), 32% calc(100% - 2.6px), 30.5% calc(100% - 3.4px), 27.2% calc(100% - 3.1px), 24.5% calc(100% - 0.2px), 22.9% calc(100% - 4.1px), 21.1% calc(100% - 2.9px), 17.4% calc(100% - 0.0px), 13.7% calc(100% - 2.9px), 9.7% calc(100% - 3.8px), 6.3% calc(100% - 2.5px), 4.3% calc(100% - 4.5px), 0.6% calc(100% - 4.0px), 0% calc(100% - 1.9px));
  --torn-top: polygon(0% 2.8px, 1.5% 6.2px, 3.9% 5.5px, 7.1% 4.7px, 9% 2.7px, 11.8% 5.9px, 14.3% 2.8px, 16.8% 2.8px, 19.3% 3.0px, 22.7% 4.3px, 25.7% 0.7px, 29.7% 0.1px, 31.4% 2.2px, 33.2% 0.0px, 36.6% 0.7px, 39% 1.0px, 41.6% 5.1px, 44.8% 4.7px, 47.5% 3.7px, 51.2% 1.8px, 53.1% 3.7px, 55.2% 4.6px, 58.1% 5.1px, 60% 5.5px, 62.9% 7.4px, 64.9% 6.5px, 67% 4.4px, 69% 3.9px, 71.6% 1.5px, 75.3% 0.3px, 79.3% 2.7px, 83.2% 0.6px, 86.1% 2.7px, 89.8% 0.6px, 93.8% 2.6px, 96% 1.9px, 97.4% 1.6px, 100% 2.1px, 100% 100%, 0 100%);
  --torn-foot: polygon(0% 2.1px, 2.2% 5.6px, 6.2% 5.2px, 8.1% 1.1px, 11.3% 1.3px, 13.8% 0.1px, 17.7% 1.1px, 20.8% 7.0px, 23.9% 2.0px, 26.6% 3.0px, 29.3% 4.3px, 31.9% 10.1px, 33.7% 4.6px, 35.7% 7.4px, 39.6% 6.6px, 41.7% 7.2px, 44.5% 12.8px, 47.4% 8.7px, 48.9% 11.8px, 51.3% 13.5px, 54.9% 10.6px, 57.5% 8.1px, 60.6% 8.4px, 63.8% 3.2px, 67.1% 4.2px, 69.9% 7.3px, 72.6% 3.3px, 74.6% 2.3px, 77.3% 2.0px, 80.5% 7.1px, 83.8% 2.7px, 86.7% 2.4px, 89.9% 8.2px, 92.8% 8.7px, 96.7% 10.1px, 98.1% 12.8px, 99.6% 12.8px, 100% 6.8px, 100% 100%, 0 100%);
  --torn-all: polygon(2% 4%, 9% 0, 18% 3%, 27% 0, 38% 4%, 49% 1%, 58% 5%, 69% 0, 80% 3%, 91% 0, 99% 4%, 97% 15%, 100% 27%, 98% 40%, 100% 54%, 97% 67%, 100% 80%, 98% 92%, 100% 100%,
    90% 97%, 80% 100%, 69% 96%, 58% 100%, 47% 97%, 36% 100%, 25% 96%, 14% 100%, 4% 97%, 0 88%, 3% 75%, 0 62%, 2% 49%, 0 36%, 3% 23%, 0 12%);
  --tape-cut: polygon(2% 0, 98% 0, 100% 22%, 97% 42%, 100% 62%, 97% 82%, 99% 100%, 1% 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
  --star: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.rm { scroll-behavior: auto; }

/* Paper: the ground colour plus a fine grain of specks and fibres, all gradients. */
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  background-color: var(--paper);
  /* sparse specks on tiles of unrelated sizes, so the grain never lines up into a grid */
  --speck: color-mix(in srgb, var(--ink) 17%, transparent);
  --speck-soft: color-mix(in srgb, var(--ink) 9%, transparent);
  background-image:
    radial-gradient(circle at 11px 13px, var(--speck) .7px, transparent 1.3px),
    radial-gradient(circle at 23px 7px, var(--speck) .6px, transparent 1.1px),
    radial-gradient(circle at 5px 29px, var(--speck-soft) 1px, transparent 1.7px),
    radial-gradient(circle at 15px 19px, rgba(255, 255, 255, .8) .8px, transparent 1.5px),
    radial-gradient(circle at 40px 50px, var(--speck-soft) 1.3px, transparent 2.3px),
    radial-gradient(circle at 31px 3px, rgba(255, 255, 255, .7) 1px, transparent 1.8px),
    radial-gradient(circle at 52px 20px, var(--speck-soft) .8px, transparent 1.4px),
    radial-gradient(circle at 8px 40px, var(--speck) .5px, transparent 1px),
    radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--ink) 3%, transparent), transparent),
    radial-gradient(closest-side at 70% 60%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(closest-side at 80% 50%, rgba(255, 255, 255, .45), transparent);
  background-size: 47px 53px, 31px 37px, 59px 41px, 23px 29px, 71px 67px, 43px 31px, 61px 47px, 37px 43px, 340px 290px, 410px 370px, 100% 1600px;
}
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; overflow-wrap: break-word; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Bits of tape (pseudo-elements) ---- */
.taped::before, .taped::after, .label::before, .buy__art::before, .wall figure::before, .notes .card:nth-child(2)::before, .lost__note::before {
  content: ''; position: absolute; z-index: 4; width: 104px; height: 28px; background: var(--tape);
  clip-path: var(--tape-cut); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); pointer-events: none;
}
.taped::before { top: -10px; left: -26px; rotate: -36deg; }
.taped::after { top: -10px; right: -26px; rotate: 38deg; }

/* ---- Label-maker strips ---- */
.dymo {
  display: inline-block; padding: 8px 13px 7px; background: var(--ink); color: var(--paper);
  font: 800 12.5px/1.15 var(--body); letter-spacing: .2em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45); border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .14); rotate: calc(-1.5deg - var(--tilt) * .5);
}
.dymo--alt { background: var(--accent); color: var(--night); text-shadow: none; rotate: calc(1.8deg + var(--tilt) * .5); }

/* ---- Stickers (buttons) ---- */
.stk {
  display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 12px 22px;
  border: 2px solid var(--ink); border-radius: var(--radius); font: 800 16px/1.1 var(--body); text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink); rotate: -1.5deg; cursor: pointer;
  transition: rotate .18s ease, translate .18s ease, box-shadow .18s ease;
}
.stk:hover { rotate: 0deg; translate: -1px -1px; box-shadow: 5px 5px 0 var(--ink); }
.stk:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.stk img { width: 18px; height: 18px; flex: none; }
.stk--buy { background: var(--accent); color: var(--night); }
.stk--plain { background: var(--white); color: var(--ink); rotate: 1.2deg; }

/* ---- Masthead ---- */
.mast {
  width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 14px 0 13px;
  border-bottom: 2px dashed color-mix(in srgb, var(--ink) 32%, transparent);
}
.mast__brand { display: flex; align-items: center; gap: 11px; flex: none; color: var(--ink); text-decoration: none; }
.mast__brand img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); rotate: -8deg; }
.mast__name { font: 400 26px/1 var(--display); }
.mast__nav { margin-left: auto; display: flex; align-items: center; gap: 24px; min-width: 0; padding: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.mast__nav::-webkit-scrollbar { display: none; }
.mast__nav a { color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none; padding: 10px 0; }
.mast__nav a:hover { text-decoration: underline wavy var(--accent-deep) 1.5px; text-underline-offset: 6px; }
.mast__nav .mast__x { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); }
.mast__x img { width: 14px; height: 14px; }
.mast__buy { flex: none; min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* ---- Cover (hero collage) ---- */
.cover {
  width: var(--wrap); margin: 0 auto; padding: 40px 0 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 72px; align-items: center;
}
.cover__tags { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cover__title { margin: 24px 0 0; font-family: var(--display); font-size: clamp(36px, 4.3vw, 64px); line-height: 1.26; rotate: -1deg; }
.cover__title.is-long { font-size: clamp(34px, 3.75vw, 54px); }
.cover__title.is-longer { font-size: clamp(32px, 3.3vw, 48px); }
.cut {
  background: var(--white); color: var(--ink); padding: .03em .2em .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.scrawl { display: block; margin: .16em 0 0 .1em; font-family: var(--script); font-size: 1.45em; line-height: .98; color: var(--ink); rotate: 1.4deg; }
.mark {
  text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--accent) 82%, transparent);
  text-decoration-thickness: .3em; text-underline-offset: -.2em; text-decoration-skip-ink: none;
}
.cover__lede { margin: 26px 0 0; max-width: 32em; font-size: 18px; line-height: 1.55; color: var(--ink); }

/* CA: a ransom-note label sticker */
.label {
  position: relative; max-width: 540px; margin: 30px 0 0; padding: 22px 18px 16px; background: var(--white);
  border-radius: 4px; box-shadow: var(--shade); rotate: calc(.8deg - var(--tilt) * .4);
}
.label::before { top: -12px; left: 28px; rotate: -5deg; }
.label__name { margin: 0 0 12px; font-size: 22px; line-height: 1.4; color: var(--ink); }
.label__btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); background: transparent; border: 2px dashed color-mix(in srgb, var(--ink) 42%, transparent); border-radius: 4px;
}
.label__btn:hover { border-style: solid; }
.label__btn code { flex: 1; min-width: 0; font: 600 14px/1.4 var(--mono); overflow-wrap: anywhere; }
.ca__tap {
  flex: none; padding: 6px 9px 5px; border: 2px solid var(--accent-deep); border-radius: 3px; color: var(--accent-deep);
  font: 800 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; rotate: -4deg;
}
.label.is-stamped::after {
  content: 'Copied!'; position: absolute; z-index: 5; right: 16px; top: -14px; padding: 7px 12px 6px; border: 3px solid var(--accent-deep);
  border-radius: 6px; color: var(--accent-deep); background: color-mix(in srgb, var(--white) 80%, transparent);
  font: 800 19px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; rotate: -9deg;
}
html:not(.rm) .label.is-stamped::after { animation: stamp .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp { from { scale: 1.9; opacity: 0; } to { scale: 1; opacity: 1; } }

.cover__acts, .buy__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 30px; }

/* The collage: banner print, paper scraps, logo sticker, a scribbled note */
.cover__art { position: relative; padding: 22px 12px 0 30px; }
.snap { position: relative; margin: 0; padding: 10px 10px 12px; background: var(--white); box-shadow: var(--shade); }
.snap img { width: 100%; height: auto; }
.snap--hero { z-index: 2; rotate: calc(var(--tilt) + 1.6deg); }
.snap--hero img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 66% 55%; }
.scrap { position: absolute; z-index: 0; pointer-events: none; }
.scrap--a { inset: -2% 10% 22% 0; background: var(--accent); clip-path: var(--torn-all); rotate: calc(-4deg - var(--tilt)); }
.scrap--b {
  width: 34%; height: 44%; right: -1%; bottom: 10%; clip-path: var(--torn-all); rotate: 7deg; background-color: var(--white);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 16px 16px;
}
.sticker {
  position: absolute; z-index: 3; left: 0; bottom: 6px; width: clamp(96px, 11vw, 156px); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 6px solid var(--white); box-shadow: var(--shade); rotate: -9deg;
}
html:not(.rm) .sticker { animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -11deg; } to { rotate: -4deg; } }
.scribble {
  position: relative; z-index: 3; width: fit-content; max-width: 62%; margin: 26px 2% 0 auto; text-align: right;
  font: 400 clamp(30px, 2.7vw, 40px)/1.05 var(--script); color: var(--ink); rotate: -3deg;
}
.doodle { position: absolute; z-index: 4; clip-path: var(--star); pointer-events: none; }
.doodle--a { top: -4px; left: 6px; width: 40px; height: 40px; background: var(--accent-deep); rotate: 14deg; }
.doodle--b { right: 4%; top: -14px; width: 24px; height: 24px; background: var(--ink); rotate: -10deg; }

/* ---- Section headings: display type mixed with a scrawl ---- */
.hd h2 { font: 400 clamp(34px, 4.1vw, 56px)/1.08 var(--display); color: var(--ink); }
.hd__a { display: block; }
.hd__b { display: block; margin-top: .06em; font-family: var(--script); font-size: 1.42em; line-height: 1.05; color: var(--accent-deep); }
.hd__note {
  display: inline-block; margin: 0 0 16px; font: 400 clamp(32px, 3.1vw, 42px)/1.1 var(--script); color: var(--ink-soft); rotate: -3deg;
  text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 12px; text-decoration-skip-ink: none;
}

/* ---- Story: a feature print and three torn notes ---- */
.story {
  width: var(--wrap); margin: 0 auto; padding: 80px 0 40px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: center;
}
.snap--feature { rotate: calc(var(--tilt) * -1 - 1.4deg); }
.snap--feature img { aspect-ratio: 3 / 2; object-fit: cover; }
.snap--feature figcaption {
  position: absolute; z-index: 3; left: 7%; bottom: -24px; max-width: 84%; padding: 9px 18px 10px; background: var(--tape-solid);
  clip-path: var(--tape-cut); font: italic 400 18px/1.3 var(--display); color: var(--ink); rotate: 1.6deg;
}
.notes {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-items: start; margin-top: 44px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .16)) drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
}
.notes .card { position: relative; margin: 0; padding: 38px 28px 34px; background-color: var(--white); color: var(--ink); }
.card__num {
  display: inline-block; padding: 6px 10px 5px; background: var(--ink); color: var(--paper); border-radius: 2px;
  font: 800 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; rotate: -3deg;
}
.card__num::before { content: 'No. '; }
.notes .card h3 { margin: 16px 0 8px; font: 400 28px/1.12 var(--display); }
.notes .card p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-soft); }
/* I: torn from a ruled notebook */
.notes .card:nth-child(1) {
  clip-path: var(--torn); rotate: calc(var(--tilt) - 1.6deg); padding-left: 50px;
  background-image: linear-gradient(90deg, transparent 32px, color-mix(in srgb, var(--accent-deep) 50%, transparent) 32px 34px, transparent 34px),
    repeating-linear-gradient(transparent 0 25px, var(--rule) 25px 26px);
  background-position: 0 0, 0 12px;
}
/* II: a sticky note, taped on */
.notes .card:nth-child(2) { background-color: var(--accent); color: var(--night); rotate: calc(1.8deg - var(--tilt) * .5); margin-top: 34px; border-radius: 0 0 2px 18px / 0 0 2px 8px; }
.notes .card:nth-child(2)::before { top: -13px; left: 50%; margin-left: -52px; rotate: -3deg; }
.notes .card:nth-child(2) p { color: var(--night); }
.notes .card:nth-child(2) .card__num { background: var(--night); color: var(--accent); }
/* III: torn from a graph pad */
.notes .card:nth-child(3) {
  clip-path: var(--torn-top); rotate: calc(var(--tilt) * .5 - .7deg); margin-top: 10px;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 18px 18px;
}

/* ---- Gallery: scattered polaroids ---- */
.pics { width: var(--wrap); margin: 0 auto; padding: 104px 0 40px; }
.pics__hd { text-align: var(--align); margin-bottom: 52px; }
.wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--gap) 40px; padding: 8px 0 24px; }
.wall figure {
  position: relative; flex: none; width: 300px; margin: 0; padding: 12px 12px 0; background: var(--white); box-shadow: var(--shade);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: rotate .3s ease, scale .3s ease, box-shadow .3s ease;
}
.wall figure::before {
  top: -12px; left: 50%; margin-left: -48px; width: 96px; height: 26px;
  background: repeating-linear-gradient(135deg, var(--washi-a) 0 7px, var(--washi-b) 7px 14px);
}
.wall figure:nth-child(even)::before { background: var(--tape); rotate: 4deg; }
.wall img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }
.wall figcaption { padding: 12px 6px 18px; min-height: 66px; font: italic 400 18px/1.3 var(--display); color: var(--ink); text-align: center; }
.wall figure:nth-child(6n+1) { rotate: calc(var(--tilt) - 3deg); }
.wall figure:nth-child(6n+2) { rotate: calc(2.6deg - var(--tilt)); margin-top: 36px; }
.wall figure:nth-child(6n+3) { rotate: calc(var(--tilt) + 1.4deg); margin-top: 6px; }
.wall figure:nth-child(6n+4) { rotate: calc(-1.6deg - var(--tilt)); margin-top: 20px; }
.wall figure:nth-child(6n+5) { rotate: calc(var(--tilt) + 3deg); }
.wall figure:nth-child(6n) { rotate: calc(var(--tilt) * .5 - 2.4deg); margin-top: 28px; }
/* exactly four pictures: one row of four */
.wall figure:first-child:nth-last-child(4), .wall figure:first-child:nth-last-child(4) ~ figure { width: 262px; }
.wall figure:hover, .wall figure.is-up { rotate: 0deg; scale: 1.05; z-index: 5; box-shadow: 0 2px 2px rgba(0, 0, 0, .1), 0 26px 40px -14px rgba(0, 0, 0, .45); }

/* ---- How to buy: coin sticker, a notepad and luggage tags ---- */
.buy {
  width: var(--wrap); margin: 0 auto; padding: 104px 0 120px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px 80px; align-items: center;
}
.buy__art { position: relative; justify-self: center; width: min(100%, 430px); }
.buy__art::before { top: 2%; left: 50%; margin-left: -52px; rotate: -6deg; }
.buy__coin { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 10px solid var(--white); box-shadow: var(--shade); rotate: calc(4deg - var(--tilt) * 2); }
.hd__ransom { display: block; margin-top: .16em; font-size: .92em; line-height: 1.2; }
.pad {
  position: relative; list-style: none; counter-reset: s; margin: 30px 0 0; padding: 40px 26px 22px 72px;
  background-color: var(--white); box-shadow: var(--shade); rotate: calc(.6deg + var(--tilt) * .3);
  background-image: radial-gradient(circle at 50% 50%, var(--paper) 0 5px, transparent 5.5px),
    linear-gradient(90deg, transparent 54px, color-mix(in srgb, var(--accent-deep) 50%, transparent) 54px 56px, transparent 56px),
    repeating-linear-gradient(transparent 0 25px, var(--rule) 25px 26px);
  background-size: 28px 22px, auto, auto; background-repeat: repeat-x, no-repeat, repeat; background-position: 6px 6px, 0 0, 0 14px;
}
.pad li { counter-increment: s; position: relative; line-height: 26px; color: var(--ink); }
.pad li + li { margin-top: 26px; }
.pad li::before {
  content: counter(s); position: absolute; left: -54px; top: -5px; width: 36px; height: 36px; display: grid; place-items: center;
  font: 400 21px/1 var(--display); color: var(--accent-deep); border: 2px solid var(--accent-deep);
  border-radius: 50% 44% 56% 47% / 53% 50% 46% 49%; rotate: -8deg; background: var(--white);
}
.pad b { font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22)); }
.tag {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px 10px 34px;
  background: var(--white); color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); transition: rotate .18s ease;
}
.tag::before { content: ''; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); }
.tag:nth-child(odd) { rotate: -2deg; }
.tag:nth-child(even) { rotate: 1.5deg; }
.tag:hover { rotate: 0deg; text-decoration: underline; }
.tag img { width: 18px; height: 18px; }

/* ---- Ransom-note letters (built by main.js from data-ransom text) ---- */
.rn__w { display: inline-block; max-width: 100%; margin-right: .28em; }
.rn__c {
  display: inline-block; min-width: .55em; margin: 0 .05em .14em 0; padding: .1em .15em .06em; text-align: center; line-height: 1.05;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.rn0 { background: var(--ink); color: var(--paper); font-family: var(--display); rotate: -4deg; }
.rn1 { background: var(--accent); color: var(--night); font-family: var(--body); font-weight: 800; text-transform: uppercase; font-size: .9em; rotate: 3deg; }
.rn2 { background: var(--white); color: var(--ink); font-family: var(--display); font-style: italic; font-size: 1.12em; rotate: -1.5deg; outline: 1px solid var(--rule); }
.rn3 { background: var(--paper-2); color: var(--ink); font-family: var(--body); font-weight: 600; rotate: 4.5deg; }
.rn4 { background: var(--accent-deep); color: var(--white); font-family: var(--display); text-transform: uppercase; font-size: .94em; rotate: -6deg; }
.rn5 { background: var(--night); color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: .92em; rotate: 2deg; }
.rn--up { translate: 0 -.08em; }

/* ---- Back cover ---- */
.back {
  padding: 72px 16px 60px; background: var(--night); color: var(--on-night-soft); text-align: center;
  clip-path: var(--torn-foot);
}
.back__end { margin: 0 0 18px; font: 400 clamp(38px, 4vw, 52px)/1 var(--script); color: var(--accent); rotate: -4deg; }
.back__logo { margin: 0 auto 16px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--white); rotate: -8deg; }
.back__name {
  display: inline-block; margin: 0 0 10px; padding: 8px 13px 7px; background: var(--accent); color: var(--night); border-radius: 3px;
  font: 800 12.5px/1.15 var(--body); letter-spacing: .2em; text-transform: uppercase; rotate: -1.5deg;
}
.back__links { margin: 6px 0 0; }
.back__links a, .back__report a { color: var(--on-night); font-weight: 600; }
.back__small { max-width: 640px; margin: 14px auto 0; font-size: 14px; line-height: 1.6; }
.back__report { margin: 14px 0 0; font-size: 13px; }

/* ---- 404 ---- */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 16px; }
.lost__note { position: relative; width: min(100%, 520px); padding: 48px 28px 40px; background: var(--white); box-shadow: var(--shade); text-align: center; rotate: -1.5deg; }
.lost__note::before { top: -13px; left: 50%; margin-left: -52px; rotate: 3deg; }
.lost__logo { margin: 0 auto 20px; border-radius: 50%; rotate: -6deg; }
.lost h1 { margin: 0 0 28px; font: 400 clamp(30px, 6vw, 46px)/1.1 var(--display); }
.lost__b { display: block; margin-top: .1em; font-family: var(--script); font-size: 1.35em; color: var(--accent-deep); }

/* ---- Pasted in on scroll (only with JS and motion) ---- */
html.js:not(.rm) .reveal { transition: opacity .6s ease, translate .7s cubic-bezier(.2, .9, .25, 1.15), scale .7s cubic-bezier(.2, .9, .25, 1.15), rotate .3s ease, box-shadow .3s ease; }
html.js:not(.rm) .reveal:not(.seen) { opacity: 0; translate: 0 36px; scale: .96; }
@media (prefers-reduced-motion: reduce) {
  html:not(.rm) .sticker { animation: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .cover { gap: 48px; }
  .story, .buy { gap: 44px 48px; }
  .notes { gap: 30px; }
  .notes .card { padding-left: 22px; padding-right: 22px; }
  .notes .card:nth-child(1) { padding-left: 46px; }
}
@media (max-width: 860px) {
  .cover { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 26px 0 40px; }
  .cover__text { display: contents; }
  .cover__tags { order: 1; }
  .cover__title { order: 2; }
  .cover__art { order: 3; margin-top: 34px; padding: 12px 8px 0 14px; }
  .cover__lede { order: 4; margin-top: 30px; }
  .label { order: 5; }
  .cover__acts { order: 6; }
  .story { grid-template-columns: minmax(0, 1fr); padding-top: 64px; }
  .snap--feature { margin: 0 6px; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 34px; max-width: 560px; }
  .notes .card:nth-child(n) { margin-top: 0; }
  .notes .card:nth-child(2) { margin-left: 22px; margin-right: 4px; }
  .notes .card:nth-child(3) { margin-right: 16px; }
  .pics { padding-top: 80px; }
  .buy { grid-template-columns: minmax(0, 1fr); padding: 80px 0 96px; }
  .buy__art { width: min(72%, 320px); }
}
@media (max-width: 760px) {
  .mast__buy { display: none; }
}
@media (max-width: 640px) {
  .wall { flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 6px 16px; }
  .wall figure { width: min(82%, 320px); }
  .wall figure:nth-child(n) { margin-top: 26px; }
  .wall figure:first-child { margin-top: 0; }
  .wall figure:nth-child(even) { align-self: flex-end; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .mast { gap: 12px; padding: 10px 0; }
  .mast__name { display: none; }
  .mast__nav { gap: 16px; }
  .mast__nav a { font-size: 14px; }
  .mast__nav .mast__x { padding: 7px 11px; }
  .cover__title { margin-top: 20px; font-size: 38px; line-height: 1.28; }
  .cover__title.is-long { font-size: 34px; }
  .cover__title.is-longer { font-size: 31px; }
  .cover__lede { font-size: 17px; }
  .scribble { max-width: 66%; margin-top: 20px; }
  .sticker { bottom: 0; }
  .label { padding: 20px 14px 14px; }
  .label__name { font-size: 17px; }
  .label__btn { padding: 10px 11px; gap: 10px; }
  .label__btn code { font-size: 13px; }
  .stk { padding: 12px 18px; font-size: 15px; }
  .snap--feature figcaption { font-size: 16px; left: 4%; max-width: 92%; }
  .notes .card { padding: 34px 22px 30px; }
  .notes .card:nth-child(1) { padding-left: 46px; }
  .pad { padding: 38px 18px 20px 62px; }
  .pad li::before { left: -50px; }
}
@media (max-width: 360px) {
  .mast__nav { gap: 12px; }
  .mast__nav a { font-size: 13px; }
  .mast__nav .mast__x { padding: 6px 10px; }
}