/* Golden Money Rain: banknote paper, engraver's green, flat gold. The order form is a cheque you write to yourself. */
body[data-store="peniaze"] {
  --bg: #f2ebd9; --ink: #16261f; --muted: #5d6a61; --line: #cbbf9f;
  --accent: #1f4d3a; --on-accent: #f6f0df; --card: #f7f1e1; --field: #fbf7ea; --radius: 2px;
  --gold: #a87b1e; --green: #1f4d3a;
  --display: 'Bodoni Moda', 'Times New Roman', serif;
}
[data-store="peniaze"] .brand { font-weight: 700; font-size: 18px; }
[data-store="peniaze"] h1, [data-store="peniaze"] h2, [data-store="peniaze"] .brand { font-variation-settings: "opsz" 11; }
[data-store="peniaze"] h1 { font-weight: 700; font-size: clamp(40px, 6.2vw, 88px); letter-spacing: -.01em; line-height: 1; }
[data-store="peniaze"] h2 { font-weight: 700; }
[data-store="peniaze"] .step h3 { font-weight: 700; font-size: 24px; }
[data-store="peniaze"] .step h3 i { color: var(--gold); }
[data-store="peniaze"] .item b { font-size: 21px; }
[data-store="peniaze"] .item em { font-family: var(--display); font-size: 22px; }
[data-store="peniaze"] .item, [data-store="peniaze"] .sound { outline: 1px solid var(--line); outline-offset: -5px; }
[data-store="peniaze"] .item:has(input:checked), [data-store="peniaze"] .sound:has(input:checked) { outline-color: var(--accent); }
[data-store="peniaze"] .item .bar::after { background: var(--green); }
[data-store="peniaze"] .item .bolt { fill: var(--gold); }
[data-store="peniaze"] .play { background: var(--green); color: var(--on-accent); }
[data-store="peniaze"] .fold > summary, [data-store="peniaze"] .faq-list summary { font-size: 21px; }

/* ---- hero: the medallion engraves itself while gold rain falls */
[data-store="peniaze"] .hero { position: relative; padding: 40px 0 72px; overflow: hidden; }
#goldrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[data-store="peniaze"] .hero .wrap { position: relative; display: grid; gap: 28px; }
.medal { width: min(100%, 430px); margin: 0 auto; aspect-ratio: 1; }
.medal svg { width: 100%; height: 100%; overflow: visible; }
[data-store="peniaze"] .hero .lead { margin-top: 24px; }
[data-store="peniaze"] .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
[data-store="peniaze"] .hero .note { margin-top: 16px; }
@media (min-width: 900px) {
  [data-store="peniaze"] .hero { padding: 72px 0 112px; }
  [data-store="peniaze"] .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: center; }
  .medal { order: 2; width: 100%; }
}
.g-line { fill: none; stroke: var(--green); stroke-width: .8; }
.g-gold { fill: none; stroke: var(--gold); stroke-width: .9; }
.g-rim { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.g-text { font: 700 15px 'Bodoni Moda', serif; letter-spacing: .32em; fill: var(--ink); }
.g-disc { fill: #c69a35; stroke: #8a6414; stroke-width: 2; }
.g-drop { fill: #f2ebd9; }
.spin, .spin-back { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .spin { animation: turn 240s linear infinite; }
  .spin-back { animation: turn 320s linear infinite reverse; }
  .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 5s cubic-bezier(.3, .1, .2, 1) forwards; }
}
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- 108 Golden Drops: the wish is written on a banknote line, and its letters make its serial number */
.gd { margin-top: 28px; max-width: 560px; }
.gd-line { display: block; }
.gd-line span { display: block; font: 600 12.5px/1.2 var(--text); color: var(--muted); }
.gd-line input { display: block; width: 100%; margin-top: 2px; padding: 6px 2px 4px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  background: transparent; font: 600 clamp(25px, 2.6vw, 31px)/1.25 'Caveat', cursive; color: #1b2a8a; -webkit-appearance: none; appearance: none; }
.gd-line input::placeholder { color: #8f9bb8; opacity: 1; }
.gd-line input:focus { outline: 0; border-bottom-color: var(--gold); background-color: rgba(255, 251, 233, .7); }
.gd-serial { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; min-height: 1.4em; }
.gd-serial span { flex: none; font: 600 12.5px/1.2 var(--text); color: var(--muted); }
.gd-serial b { font: 700 15px/1.35 'Courier Prime', monospace; letter-spacing: .04em; color: #8a2a1a; overflow-wrap: anywhere; }
.gd-serial b.sample { opacity: .55; }
[data-store="peniaze"] .gd .cta-row { margin-top: 26px; }
@media (max-width: 899px) { .medal { width: min(52%, 210px); } [data-store="peniaze"] .hero { padding-top: 28px; } [data-store="peniaze"] .hero .wrap { gap: 22px; } }
[data-store="peniaze"] .library { background: var(--bg); }
[data-store="peniaze"] .lb-txt b { font-weight: 700; font-variation-settings: "opsz" 11; }

/* ---- the buyer's page: the string of 108 beads, the wish in the buyer's own hand */
.mala { width: min(78%, 320px); margin: 30px auto 0; }
.mala svg { display: block; width: 100%; height: auto; overflow: visible; }
.bead { fill: none; stroke: var(--ink); stroke-width: .7; transition: fill .8s ease, stroke .8s ease; }
.bead.on { fill: #c69a35; stroke: #8a6414; }
.bead.off { opacity: .28; }
.mala-n { font: 700 56px/1 'Bodoni Moda', serif; fill: var(--ink); font-variant-numeric: lining-nums; font-variation-settings: "opsz" 11; }
.mala-of { font: 600 9.5px/1 'Hanken Grotesk', sans-serif; fill: var(--muted); }
main.status.drops-page h1 { font-size: clamp(28px, 4vw, 40px); }
main.status.drops-page .pl-name { margin-top: 22px; font: 600 clamp(26px, 4.4vw, 36px)/1.2 'Caveat', cursive; letter-spacing: 0; color: #1b2a8a; overflow-wrap: anywhere; }
main.status.drops-page .pl-tones { font: 700 14px/1.4 'Courier Prime', monospace; letter-spacing: .04em; color: #8a2a1a; overflow-wrap: anywhere; }