/* Rätselpost – "Post, die man gern bekommt".
   Warm writing paper, black ink, one stamp red. Atkinson Hyperlegible for reading (made for low vision),
   the shop's Archivo condensed only for the wordmark and stamp values. Loaded after /style.css. */

@font-face { font-family: "Atkinson"; src: url(/fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url(/fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

body.rp {
  --paper: #f4f0e6;
  --paper-2: #ebe5d5;
  --card: #fffdf8;
  --ink: #121212;
  --ink-2: #3b3934;
  --rule: #c9c1ab;
  --red: #c3261c;
  --mark: #d6d3c6;
  --rp: "Atkinson", Verdana, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.1875rem/1.6 var(--rp);
}
.rp h1, .rp h2, .rp h3 { font-family: var(--rp); font-weight: 700; text-transform: none; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.15; }
.rp .note { font-size: 1rem; color: var(--ink-2); }
.rp .small { font-size: .95rem; }
.rp a { text-underline-offset: .2em; }
.rp :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; box-shadow: none; }
.rp-test { background: #ffe9a8; color: var(--ink); font: 700 1rem/1.4 var(--rp); padding: .6rem var(--gut); text-align: center; }

/* ---- masthead: the wordmark and a double rule, black over red (like the printed issue) ---- */
.rp-mast { background: var(--paper); border-bottom: 3px solid var(--ink); box-shadow: 0 4px 0 -2px var(--paper), 0 5px 0 -2px var(--red); margin-bottom: 6px; }
.rp-mast-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem 1.2rem; padding-top: .9rem; padding-bottom: .7rem; }
.rp-logo { font: 900 2.1rem/1 "Archivo", "Arial Narrow", sans-serif; font-stretch: 62%; letter-spacing: .01em; text-decoration: none; color: var(--ink); }
.rp-from { justify-self: end; font-size: .95rem; text-decoration: none; color: var(--ink-2); }
.rp-from b { color: var(--ink); }
.rp-nav { grid-column: 1 / -1; display: flex; gap: .2rem 1.4rem; flex-wrap: wrap; }
.rp-nav a { text-decoration: none; font-weight: 700; padding: .45rem 0; border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.rp-nav a:hover { border-bottom-color: var(--rule); }
.rp-nav a[aria-current="page"] { border-bottom-color: var(--red); }
@media (min-width: 900px) {
  .rp-mast-in { grid-template-columns: auto auto 1fr; }
  .rp-logo { font-size: 2.5rem; }
  .rp-from { justify-self: start; grid-column: 2; padding-top: .5rem; }
  .rp-nav { grid-column: 3; justify-content: flex-end; }
}

/* ---- buttons ---- */
.rp .rp-btn { background: var(--ink); color: #fff; font: 700 1.15rem/1.2 var(--rp); font-stretch: 100%; border-radius: 4px; min-height: 3.3rem; padding: .85rem 1.5rem;
  box-shadow: none; transition: background .15s ease; }
.rp .rp-btn:hover { background: var(--red); box-shadow: none; }
.rp .rp-btn.wide { width: 100%; }
.rp .rp-btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); font: 700 1.05rem var(--rp); border-radius: 4px; min-height: 3rem; padding: .6rem 1.2rem; cursor: pointer; }
.rp .textlink { font-weight: 700; }

/* ---- hero with the letter stack ---- */
.rp-hero { display: grid; gap: 2.5rem; padding-top: clamp(1.8rem, 5vw, 3.4rem); padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.rp-eyebrow { font-weight: 700; color: var(--red); margin: 0 0 .6rem; font-size: 1.02rem; }
.rp-h1 { font-size: clamp(2.5rem, 7.6vw, 4.4rem); margin: 0 0 1.1rem; max-width: 14ch; }
.rp-h2 { font-size: clamp(2.1rem, 6vw, 3rem); margin: .2rem 0 1rem; }
.rp-lede { font-size: clamp(1.2rem, 2.3vw, 1.35rem); max-width: 36rem; }
.rp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.6rem 0 1.4rem; }
.rp-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.rp-ticks li { border: 1.5px solid var(--ink); border-radius: 999px; padding: .2rem .85rem; font-size: 1rem; background: var(--card); }
.rp-stack { position: relative; min-height: 22rem; margin: 0 auto; width: min(100%, 31rem); aspect-ratio: 31 / 33; }
.rp-stack img { position: absolute; width: 74%; height: auto; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 22px 40px -26px rgba(40,30,10,.55); }
.rp-stack .sheet-a { left: 2%; top: 4%; transform: rotate(-3deg); }
.rp-stack .sheet-b { right: 0; top: 12%; transform: rotate(4deg); }
.rp-stack-pm { position: absolute; right: -2%; top: -3%; width: 26%; color: var(--red); transform: rotate(-12deg); mix-blend-mode: multiply; pointer-events: none; }
.rp-stack-pm svg, .pm { width: 100%; height: auto; display: block; font-family: var(--rp); }
@media (min-width: 960px) {
  .rp-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 3.5rem; }
}

/* ---- stamp (perforated edge: half circles of paper bite into the stamp) ---- */
.stamp { --s: 6.2rem; position: relative; display: inline-block; width: var(--s); height: calc(var(--s) * 1.18); background: #fff; flex: none;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 3.6px, #000 4px) 0 0 / 11px 50% repeat-x, radial-gradient(circle at 50% 100%, transparent 3.6px, #000 4px) 0 100% / 11px 50% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent 3.6px, #000 4px) 0 0 / 11px 50% repeat-x, radial-gradient(circle at 50% 100%, transparent 3.6px, #000 4px) 0 100% / 11px 50% repeat-x;
  filter: drop-shadow(0 6px 10px rgba(60,40,10,.18)); }
.stamp-in { position: absolute; inset: 9px; border: 2px solid var(--red); display: grid; place-items: center; align-content: center; text-align: center; padding: .2rem; }
.stamp-k { font: 700 .9rem/1 var(--rp); color: var(--red); }
.stamp-n { font: 900 2.2rem/1 "Archivo", sans-serif; font-stretch: 62%; }
.stamp-s { font: 700 .78rem/1.1 var(--rp); }

/* ---- the eight pages ---- */
.rp-band { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(2.4rem, 6vw, 4rem) 0; }
.rp-head { max-width: 46rem; margin-bottom: 1.8rem; }
.rp-head h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: .6rem; }
.rp-strip { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: 1.2rem; overflow-x: auto; padding: .4rem .2rem 1.2rem; scroll-snap-type: x mandatory; }
.rp-strip li { scroll-snap-align: start; }
.rp-strip figure { margin: 0; }
.rp-strip img { width: 100%; height: auto; background: #fff; box-shadow: 0 14px 24px -20px rgba(40,30,10,.6); }
.rp-strip figcaption { display: flex; gap: .55rem; align-items: baseline; margin-top: .6rem; font-size: 1rem; line-height: 1.3; }
.rp-strip figcaption span { font: 900 1.25rem/1 "Archivo", sans-serif; font-stretch: 62%; color: var(--red); }
@media (min-width: 1000px) { .rp-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

.rp-split { display: grid; gap: 2.4rem; padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(2.6rem, 6vw, 4.5rem); align-items: center; }
.rp-page-big { margin: 0; }
.rp-page-big img, .rp-personal-img img, .rp-licence img { width: 100%; height: auto; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 26px 44px -30px rgba(40,30,10,.6); }
.rp-page-big img { transform: rotate(-1.2deg); }
.rp-page-big figcaption, .rp-personal-img figcaption, .rp-licence figcaption { font-size: 1rem; color: var(--ink-2); margin-top: .9rem; }
.rp-notes h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1.2rem; }
.rp-notelist { list-style: none; counter-reset: n; display: grid; gap: 1.1rem; }
.rp-notelist li { counter-increment: n; position: relative; padding-left: 3rem; }
.rp-notelist li::before { content: counter(n); position: absolute; left: 0; top: .05rem; width: 2.1rem; height: 2.1rem; border: 2px solid var(--red); border-radius: 50%;
  display: grid; place-items: center; font: 700 1.05rem/1 var(--rp); color: var(--red); }
@media (min-width: 900px) { .rp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }

/* ---- institutions ---- */
.rp-inst-grid { display: grid; gap: 2.4rem; }
.rp-inst-grid h2 { font-size: clamp(1.6rem, 4.4vw, 2.1rem); margin-bottom: 1rem; }
@media (min-width: 900px) { .rp-inst-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.rp-checks { list-style: none; display: grid; gap: .8rem; }
.rp-checks li { position: relative; padding-left: 2rem; }
.rp-checks li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .95rem; height: .55rem; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }
.rp-licence { margin: 0; }

/* ---- the personal page ---- */
.rp-personal { padding: clamp(2.4rem, 6vw, 4rem) 0; }
.rp-personal-in { display: grid; gap: 2.4rem; align-items: center; background: var(--card); border: 1px solid var(--rule); padding: clamp(1.4rem, 5vw, 3rem); }
.rp-personal h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1rem; }
.rp-personal-img { margin: 0; }
.rp-personal-img img { transform: rotate(1.5deg); }
.rp-words { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.rp-words li { background: var(--mark); border-radius: 999px; padding: .25rem .9rem; font-weight: 700; letter-spacing: .12em; font-size: 1rem; }
@media (min-width: 900px) { .rp-personal-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; } }

/* ---- plans as two stamps; the denomination is the monthly price ---- */
.rp-plans { padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.rp-plan-grid { display: grid; gap: 2rem; }
.rp-plan-grid.one { max-width: 34rem; margin: 0 auto; }
@media (min-width: 820px) { .rp-plan-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem; } .rp-plan-grid.one { grid-template-columns: 1fr; } }
.rp-plan { position: relative; background: #fff; padding: 2.4rem 2.2rem 2rem; outline: 2px solid var(--red); outline-offset: -14px;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 15px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) 0 100% / 15px 51% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 15px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) 0 100% / 15px 51% repeat-x;
  filter: drop-shadow(0 10px 16px rgba(60,40,10,.16)); }
.rp-plan h3 { font-size: 1.9rem; margin: 0 0 1rem; }
.rp-plan ul { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.6rem; padding-right: 5.5rem; }
.rp-plan li { padding-left: 1.5rem; position: relative; }
.rp-plan li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7rem; height: .7rem; border: 2px solid var(--red); border-radius: 50%; }
.rp-plan-value { position: absolute; right: 1.6rem; top: 1.4rem; text-align: right; line-height: 1; }
.rp-plan-value b { display: block; font: 900 3.4rem/0.9 "Archivo", sans-serif; font-stretch: 62%; }
.rp-plan-value small { font: 700 .92rem var(--rp); color: var(--ink-2); }
.rp-plan-inst { background: #fbf7ec; }

/* ---- the route of a week ---- */
.rp-route { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.rp-route h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1.6rem; }
.rp-route ol { list-style: none; display: grid; gap: 1.4rem; counter-reset: s; }
.rp-route li { counter-increment: s; position: relative; padding: 1.2rem 1.3rem 1.1rem 4.6rem; background: var(--card); border: 1px solid var(--rule); }
.rp-route li::before { content: counter(s); position: absolute; left: 1.1rem; top: 1.05rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px dashed var(--red);
  display: grid; place-items: center; font: 700 1.1rem var(--rp); color: var(--red); }
.rp-route li b { display: block; font-size: 1.3rem; margin-bottom: .2rem; }
.rp-route li p { margin: 0; }
@media (min-width: 860px) { .rp-route ol { grid-template-columns: repeat(3, 1fr); } }

/* ---- FAQ ---- */
.rp-faq { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.rp-faq h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1rem; }
.rp-faq-list { max-width: 50rem; border-top: 2px solid var(--ink); }
.rp-faq-list details { border-bottom: 1px solid var(--rule); }
.rp-faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 700; font-size: 1.2rem; min-height: 44px; }
.rp-faq-list summary::-webkit-details-marker { display: none; }
.rp-faq-list summary::after { content: "+"; font: 700 1.5rem/1 var(--rp); color: var(--red); }
.rp-faq-list details[open] summary::after { content: "–"; }
.rp-faq-list p { margin: 0 0 1.1rem; max-width: 44rem; }

/* ---- the sample form is an envelope ---- */
.rp-probe { display: grid; gap: 2.4rem; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); align-items: start; }
.rp-probe.solo { padding-top: 2rem; }
.rp-probe-side h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: 1rem; }
@media (min-width: 900px) { .rp-probe { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; } }
.envelope { position: relative; background: var(--card); border: 1px solid var(--rule); padding: 4.6rem clamp(1.2rem, 5vw, 2.6rem) 1.8rem; overflow: hidden;
  box-shadow: 0 26px 40px -34px rgba(40,30,10,.7); }
.envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 3.6rem; background: var(--paper-2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.envelope-flap::after { content: ""; position: absolute; left: 50%; top: 2.1rem; width: 1.6rem; height: 1.6rem; margin-left: -.8rem; border-radius: 50%; background: var(--red); }
.envelope-k { margin: 0; font-weight: 700; color: var(--red); font-size: 1rem; }
.envelope-h { font-size: clamp(1.8rem, 5vw, 2.3rem); margin: .2rem 0 1.2rem; }
.envelope .field.addr label { font-weight: 700; font-size: 1.15rem; }
.envelope .field.addr label span { font-weight: 400; color: var(--ink-2); }
.envelope .field.addr input { border: 0; border-bottom: 2px dotted var(--ink); background: transparent; border-radius: 0; padding: .55rem .1rem; font-size: 1.25rem; min-height: 3rem; }
.envelope .field.addr input:focus-visible { border-bottom-style: solid; outline-offset: 2px; }
.rp-choice { border: 0; padding: 0; margin: 1.2rem 0; }
.rp-choice legend { font-weight: 700; padding: 0; margin-bottom: .45rem; }
.rp-choice label { display: flex; gap: .7rem; align-items: center; min-height: 44px; cursor: pointer; }
.rp-choice input { width: 1.35rem; height: 1.35rem; accent-color: var(--ink); flex: none; }
.rp-fixed { margin: 0; padding: .7rem .9rem; background: var(--paper); border: 1px dashed var(--rule); }
.rp .agree { font-size: 1.02rem; }
.rp .agree input { width: 1.4rem; height: 1.4rem; }
.rp .formmsg.ok { color: #1d5a32; }

/* ---- forms on the other pages ---- */
.rp .field label { font-weight: 700; }
.rp .field input, .rp .field textarea { font-size: 1.15rem; border: 2px solid var(--ink-2); background: #fff; border-radius: 4px; }
.rp .hint { font-size: 1rem; color: var(--ink-2); }
.rp-narrow { max-width: 46rem; }
.rp-letter { position: relative; background: var(--card); border: 1px solid var(--rule); padding: clamp(1.4rem, 5vw, 3rem); margin: 2rem 0 4rem; }
.rp-letter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ink); box-shadow: 0 4px 0 -1px var(--card), 0 5px 0 0 var(--red); }
.rp-letter h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.rp-letter-stamp { float: right; margin: -.4rem 0 1rem 1rem; }
.rp-letter-stamp .stamp { --s: 5rem; }
.rp-letter-stamp .stamp-n { font-size: 1.9rem; }
.rp-wordgrid { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.rp-wordgrid legend { font-weight: 700; margin-bottom: .6rem; padding: 0; }
.rp-wordgrid .field input { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
@media (max-width: 420px) { .rp-wordgrid { grid-template-columns: 1fr; } }
.rp .receipt { white-space: pre-line; font: 400 1.02rem/1.55 var(--rp); background: #fff; border-left: 5px solid var(--red); padding: 1.1rem 1.3rem; }
.field.inline { margin: .4rem 0 0 2rem; max-width: 14rem; }

/* ---- checkout ---- */
.rp-checkout { padding-top: 1.6rem; padding-bottom: 4rem; }
.rp-co { display: grid; gap: 2rem; }
@media (min-width: 980px) { .rp-co { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: 3rem; align-items: start; } .rp-co-sum { position: sticky; top: 1rem; } }
.rp-plans-pick { border: 0; padding: 0; margin: 0 0 1.4rem; }
.rp-plans-pick legend { font-weight: 700; font-size: 1.35rem; margin-bottom: .7rem; padding: 0; }
.rp-pick { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; background: #fff; border: 2px solid var(--rule); margin-bottom: .6rem; cursor: pointer; }
.rp-pick:has(input:checked) { border-color: var(--ink); box-shadow: inset 5px 0 0 var(--red); }
.rp-pick input { width: 1.35rem; height: 1.35rem; margin-top: .2rem; accent-color: var(--ink); flex: none; }
.rp-pick small { display: block; color: var(--ink-2); font-size: 1rem; }
.rp-summary { background: #fff; border: 1px solid var(--rule); padding: 1.5rem clamp(1rem, 4vw, 1.6rem); }
.rp-summary h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.rp-facts { margin: 0 0 1rem; }
.rp-facts div { display: grid; grid-template-columns: 6.6rem 1fr; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #ece7da; font-size: 1.02rem; }
.rp-facts dt { font-weight: 700; margin: 0; }
.rp-facts dd { margin: 0; }
.rp-facts small { color: var(--ink-2); font-size: .92rem; }
.rp .btn.order { min-height: 3.7rem; font-size: 1.2rem; }

/* ---- shop footer on these pages ---- */
.rp .foot { margin-top: 0; }