/* Zestaw wycinanek: wspólny papier, paleta, cienie i rytm dla wszystkich kontrapcji. */
:root {
  --sky1: #e4ebf1; --sky2: #b7c6d4;
  --paper: #f1e7cf; --paper-dark: #e3d6b6; --paper-light: #f8f2e2;
  --ink: #2a211a; --soft: #6a5d4f; --red: #a4382a; --gold: #b4914a; --brass: #c9a85c; --brass-dark: #7a5c22;
  --wood: #8a5a33; --wood-dark: #5d3b1e; --wood-light: #a9733f;
  --rule: rgb(42 33 26 / .3);
  --shadow-hard: 8px 10px 0 rgb(42 33 26 / .22);
  --font-display: "Playfair Display", Georgia, serif;
  --font-sc: "Playfair Display SC", Georgia, serif;
  --font-type: "Special Elite", "Courier Prime", monospace;
  --font-mono: "Courier Prime", "Courier New", monospace;
}
.paper { background: var(--paper); color: var(--ink); }
.cut { box-shadow: var(--shadow-hard), 0 20px 40px rgb(0 0 0 / .15); border-radius: 3px 7px 4px 6px; position: relative; }
.cut::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); pointer-events: none; border-radius: 2px; }
.brass { background: linear-gradient(180deg, #e2c98a, var(--brass) 45%, #9c7b35 100%); color: var(--ink); border: 1px solid var(--brass-dark); }
.wood { background: repeating-linear-gradient(90deg, var(--wood) 0 14px, var(--wood-light) 14px 17px, var(--wood) 17px 34px, var(--wood-dark) 34px 36px); }
.manicule { color: var(--red); }
.manicule::before { content: "☞ "; }
.typed { font-family: var(--font-type); }
.mono { font-family: var(--font-mono); }
.sc { font-family: var(--font-sc); letter-spacing: .08em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Uchwyt: wszystko, za co się ciągnie, kręci lub co się wciska. */
.handle { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.handle:active { cursor: grabbing; }
.handle:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .cut, .handle { transition: none !important; } }

/* Scena przewijana: sekcja jest wyższa niż ekran, a jej zawartość przykleja się na czas kroków. */
.stage { position: relative; }
.stage > .stage-sticky { position: sticky; top: 24px; }

/* Żywy portret jako komponent. */
head-widget { position: relative; display: block; width: var(--head-size, 240px); aspect-ratio: 1; user-select: none; -webkit-user-select: none;
  filter: blur(var(--motion-blur, 0px)); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
head-widget canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
head-widget.is-egg { animation: hw-pop .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes hw-pop { 0% { transform: scale(1); } 35% { transform: scale(1.06) rotate(-2deg); } 100% { transform: scale(1); } }