/* Decimals kit: sand-cream page washed with blush light, one warm brown-black ink, a tight book serif, Arial for the
   small print, a handwritten tag, cutouts with thick white sticker borders. */
:root { --sand: #ede8e1; --ink: #4d4638; --blush: #f4c9be; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink); font: 15px/1.5 Arial, Helvetica, sans-serif; overflow-x: clip;
  background:
    radial-gradient(ellipse 70% 46% at 50% 58%, rgba(244, 201, 190, .55), rgba(244, 201, 190, 0) 70%),
    var(--sand);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
.spile {
  --spile-track: 200vh;
  --spile-art: min(250px, 20.5vh, 27vw);
  --spile-gap-y: clamp(6px, 1.4vh, 16px);
  --spile-gap-x: clamp(10px, 4.6vw, 56px);
  --spile-seat: #f2ede5;
}
.spile__sticky { padding-top: clamp(16px, 2vh, 28px); }
.spile h2 { margin: 0; font: 400 clamp(30px, 5.2vw, 58px)/1.02 Newsreader, Georgia, serif; letter-spacing: -.035em; }
.spile h2 span { opacity: .5; }
.script { display: inline-block; margin: 6px 0 clamp(10px, 2.2vh, 26px); font: 400 clamp(22px, 2.9vw, 32px)/1 "La Belle Aurore", cursive; opacity: .8; transform: rotate(-3deg); }
.spile__art::after { box-shadow: inset 0 0 0 1px rgba(77, 70, 56, .07); border-radius: 6px; }
.spile__fly img { display: block; height: auto; filter: drop-shadow(0 1px 1px rgba(60,50,35,.2)) drop-shadow(0 10px 14px rgba(60,50,35,.18)); }
.spile__label h3 { margin: 0; font: 500 clamp(15px, 1.8vw, 19px)/1.2 Newsreader, Georgia, serif; letter-spacing: -.01em; }
.spile__label p { margin: 1px 0 0; font-size: 13px; line-height: 16px; opacity: .7; }
.spile__open { font: italic 400 clamp(17px, 2.2vw, 24px)/1.2 Newsreader, Georgia, serif; color: rgba(77, 70, 56, .55); }
.tail { height: 20vh; }