/* ============================================================================
   THE RED PULL — page-scoped styles.  All rules are namespaced to .rp-* / .rp-doc
   so this file never touches the global site chrome.  Colors reference the site
   tokens when present (styles.css) and fall back to RED's canon values otherwise,
   so the file renders identically on the live site and in the standalone preview.
   Single committed visual world (RED is always this world) — explicit colors,
   no theme media queries.
   ============================================================================ */

.rp-doc{
  --rp-parchment:#f3ead9;
  --rp-parchment-edge:#e7d9bf;
  --rp-parchment-ink:#2a1c12;
  --rp-parchment-soft:#5b4a38;
  --ink:#080607;--ink2:#12090b;--oxblood:#5c0815;--crimson:#9f1730;--red:#c52a43;
  --gold:#d7b36a;--gold2:#f0d99a;--ivory:#f7efe2;--muted:#c9bcae;
  --rp-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --rp-letterface: "EB Garamond", Georgia, serif;
  --rp-hand: "Ephesis", "Snell Roundhand", cursive;
}

/* ---- stage (the dark velvet table) ---------------------------------------- */
.rp-stage{
  position:relative;
  min-height:82vh;
  display:grid;
  place-items:center;
  padding:64px 20px 96px;
  isolation:isolate;
}
.rp-stage::before{      /* candlelight */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 30%, rgba(197,42,67,.16), transparent 62%),
    radial-gradient(46% 40% at 78% 86%, rgba(92,8,21,.28), transparent 60%),
    radial-gradient(40% 34% at 12% 74%, rgba(215,179,106,.06), transparent 60%);
  animation:rp-flicker 7s ease-in-out infinite;
}
@keyframes rp-flicker{0%,100%{opacity:1}44%{opacity:.86}68%{opacity:.94}}

/* ---- closed: the sealed envelope ------------------------------------------ */
.rp-closed{
  text-align:center;max-width:560px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  transition:opacity .55s ease, transform .55s ease;
}
.rp-kicker{
  font-family:var(--rp-serif);letter-spacing:.02em;color:var(--gold2);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.28em;font-weight:600;
}
.rp-supporting{
  font-family:var(--rp-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,4.4vw,2.1rem);line-height:1.28;color:var(--ivory);
  text-wrap:balance;margin:2px 0 6px;max-width:19ch;
}
.rp-envelope{position:relative;width:min(300px,72vw);aspect-ratio:7/5;margin:6px auto 2px;}
.rp-envelope-body{
  position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(160deg,#7a0f22,#4a0611 70%);
  border:1px solid rgba(215,179,106,.42);
  box-shadow:0 34px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.rp-envelope-body::before{     /* flap */
  content:"";position:absolute;left:-2%;right:-2%;top:0;height:64%;
  background:linear-gradient(180deg,#8a1226,#5c0815);
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-bottom:1px solid rgba(215,179,106,.5);
  transform-origin:top center;transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.rp-seal{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 38% 32%, #d33450, #8a0f20 62%, #5c0815);
  border:2px solid rgba(215,179,106,.7);
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.18);
  display:grid;place-items:center;
  font-family:var(--rp-serif);font-weight:900;font-size:2rem;color:#f5dca0;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:transform .5s ease, opacity .5s ease;
}
.rp-seal::after{content:"R";}
.rp-open-btn{
  font-family:var(--rp-serif);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.86rem;color:#160d08;background:var(--gold);
  border:1px solid var(--gold);border-radius:999px;
  padding:15px 30px;min-height:52px;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rp-open-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(215,179,106,.28)}
.rp-open-btn:focus-visible{outline:3px solid var(--gold2);outline-offset:4px}
.rp-hint{font-family:var(--rp-letterface);color:var(--muted);font-size:.92rem;font-style:italic}

/* ---- the letter (parchment) ----------------------------------------------- */
.rp-letterwrap{width:min(660px,100%);}
.rp-letter{
  position:relative;background:
    radial-gradient(120% 90% at 50% 0%, #f8f0e0, var(--rp-parchment) 55%, var(--rp-parchment-edge));
  color:var(--rp-parchment-ink);
  border-radius:6px;
  padding:clamp(30px,6vw,58px) clamp(24px,5.5vw,56px) clamp(34px,6vw,56px);
  box-shadow:0 40px 90px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.35) inset;
  font-family:var(--rp-letterface);
}
.rp-letter::before{     /* inner gold rule — the "framed keepsake" */
  content:"";position:absolute;inset:14px;border:1px solid rgba(140,95,30,.32);
  border-radius:3px;pointer-events:none;
}
.rp-letter > *{position:relative}

.rp-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin-bottom:8px}
.rp-mark{font-family:var(--rp-serif);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.74rem;color:var(--oxblood)}
.rp-meta{font-family:var(--rp-serif);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-parchment-soft)}
.rp-lane{
  display:inline-flex;align-items:center;gap:7px;margin:14px 0 6px;
  font-family:var(--rp-serif);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--oxblood);border:1px solid rgba(140,95,30,.4);border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.28)}
.rp-lane::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--crimson)}

.rp-title{
  font-family:var(--rp-serif);font-weight:900;color:var(--oxblood);
  font-size:clamp(2.6rem,9vw,4.4rem);line-height:.98;letter-spacing:-.02em;
  margin:4px 0 22px;text-wrap:balance;
}
.rp-reading p{
  font-size:clamp(1.12rem,2.4vw,1.28rem);line-height:1.66;margin:0 0 18px;max-width:62ch;
  color:#31241a;
}
.rp-reading p:first-child::first-letter{
  font-family:var(--rp-serif);font-weight:900;color:var(--crimson);
  font-size:3.2em;line-height:.72;float:left;margin:.06em .1em 0 0;
}
.rp-rule{height:1px;border:0;margin:30px 0;background:linear-gradient(90deg,transparent,rgba(140,95,30,.55),transparent)}

.rp-block{margin:24px 0}
.rp-label{
  font-family:var(--rp-serif);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.76rem;color:var(--crimson);margin:0 0 8px;display:block;
}
.rp-block p{font-size:clamp(1.06rem,2.2vw,1.2rem);line-height:1.62;margin:0;color:#31241a;max-width:60ch}
.rp-block .rp-q{font-style:italic;font-size:clamp(1.2rem,2.8vw,1.5rem);color:var(--oxblood);line-height:1.4}
.rp-receipt{font-family:var(--rp-serif);font-style:italic;font-weight:500}

/* the MOVE fill-in — a handwriting line you can feel, saved/sent to no one */
.rp-fill{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:14px 0 6px;
  font-size:clamp(1.14rem,2.6vw,1.36rem);color:#31241a}
.rp-fill-input{
  font-family:var(--rp-hand);font-size:1.5em;line-height:1;color:var(--oxblood);
  background:transparent;border:0;border-bottom:2px solid rgba(140,95,30,.5);
  min-width:8ch;flex:1 1 10ch;padding:2px 6px;
}
.rp-fill-input::placeholder{color:rgba(140,95,30,.45);font-style:italic}
.rp-fill-input:focus{outline:0;border-bottom-color:var(--crimson)}
.rp-fillnote{font-family:var(--rp-letterface);font-style:italic;color:var(--rp-parchment-soft);font-size:.92rem;margin:2px 0 12px}

.rp-together{
  margin-top:26px;padding:20px 22px;border-radius:5px;
  background:rgba(140,95,30,.08);border:1px solid rgba(140,95,30,.24);
}
.rp-together .rp-label{color:var(--oxblood)}
.rp-together p{font-size:1.04rem;line-height:1.58;margin:0;color:#3a2c1f}

.rp-close{
  font-family:var(--rp-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,4vw,2rem);line-height:1.3;color:var(--oxblood);
  text-align:center;margin:38px auto 6px;max-width:24ch;text-wrap:balance;
}

/* share + return (outside the ink, on the parchment footer) */
.rp-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px}
.rp-hand{font-family:var(--rp-hand);font-size:clamp(1.7rem,5vw,2.4rem);color:var(--crimson);line-height:1;margin:0}
.rp-btn{
  font-family:var(--rp-serif);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;
  border-radius:999px;padding:13px 26px;min-height:50px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;
}
.rp-btn:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}
.rp-btn-share{background:var(--oxblood);color:var(--gold2);border:1px solid var(--oxblood)}
.rp-btn-share:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(92,8,21,.3)}
.rp-return{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(140,95,30,.3)}
.rp-return-eyebrow{font-family:var(--rp-serif);letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;color:var(--rp-parchment-soft)}
.rp-return .rp-hand{font-size:clamp(1.9rem,5.5vw,2.6rem);color:var(--oxblood)}
.rp-return-sub{font-family:var(--rp-serif);font-size:clamp(1rem,2.4vw,1.15rem);color:var(--oxblood);margin:0;letter-spacing:.01em}
.rp-return-url{font-family:var(--rp-serif);font-size:.8rem;letter-spacing:.12em;color:var(--rp-parchment-soft);margin:9px 0 0}
.rp-btn-ghost{background:transparent;color:var(--oxblood);border:1px solid rgba(140,95,30,.5)}
.rp-btn-ghost:hover{transform:translateY(-2px);border-color:var(--crimson)}

.rp-disclaimer{
  font-family:var(--rp-letterface);font-style:italic;color:var(--rp-parchment-soft);
  font-size:.86rem;line-height:1.5;text-align:center;margin:26px auto 0;max-width:52ch}

/* toast */
.rp-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink2);color:var(--ivory);border:1px solid var(--gold);
  padding:12px 20px;border-radius:999px;font-family:var(--rp-serif);font-size:.86rem;letter-spacing:.04em;
  box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s ease;z-index:120}
.rp-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- reveal state machine ------------------------------------------------- */
.rp-nojs .rp-closed{display:none}
.rp-nojs .rp-letterwrap{opacity:1;transform:none;max-height:none}
.rp-js  .rp-letterwrap{opacity:0;transform:translateY(26px);max-height:0;overflow:clip;
  transition:opacity .7s ease .05s, transform .75s cubic-bezier(.2,.7,.2,1) .05s, max-height .9s ease}
.rp-js .rp-stage.is-open .rp-letterwrap{opacity:1;transform:none;max-height:7000px}
.rp-js .rp-stage.is-open .rp-closed{opacity:0;transform:scale(.94) translateY(-10px);position:absolute;pointer-events:none}
.rp-js .rp-stage.is-open .rp-envelope-body::before{transform:rotateX(128deg)}
.rp-js .rp-stage.is-open .rp-seal{transform:translate(-50%,-140%) scale(.6) rotate(-14deg);opacity:0}

/* ---- minimal RED chrome (standalone preview only; real pages use styles.css) */
.rp-header,.rp-footer{background:#070506}
.rp-header{position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(215,179,106,.26);
  backdrop-filter:blur(16px);background:rgba(8,6,7,.86)}
.rp-nav{width:min(100% - 34px,1180px);margin:auto;height:66px;display:flex;align-items:center;gap:12px}
.rp-brand{display:flex;align-items:center;gap:11px;font-family:var(--rp-serif);letter-spacing:.14em;
  text-transform:uppercase;font-size:.92rem;color:var(--ivory)}
.rp-brand-mark{width:32px;height:32px;border:1px solid var(--gold);display:grid;place-items:center;
  transform:rotate(45deg);border-radius:3px}
.rp-brand-mark span{transform:rotate(-45deg);color:var(--gold);font-family:var(--rp-serif);font-weight:700}
.rp-badge{margin-left:auto;font-family:var(--rp-serif);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
.rp-footer{border-top:1px solid rgba(215,179,106,.26);padding:34px 0;color:#94887e;font-size:.78rem}
.rp-footwrap{width:min(100% - 34px,1180px);margin:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--rp-serif);letter-spacing:.06em}

@media (max-width:520px){
  .rp-badge{display:none}
  .rp-letter::before{inset:9px}
}
@media (prefers-reduced-motion: reduce){
  .rp-stage::before{animation:none}
  .rp-js .rp-letterwrap{transition:none}
  .rp-js .rp-stage.is-open .rp-envelope-body::before,
  .rp-js .rp-stage.is-open .rp-seal{transition:none}
  .rp-open-btn,.rp-btn{transition:none}
}