/* subscribe.css: the /subscribe/ page on top of the post pages' design, around one reply card (Felix, 2026-10-28). Ghost puts
   loading / success / error on the form. */
.bm-sub .content{padding-bottom:0}
.sub-wrap,.bm-sub .pend{max-width:var(--measure);margin-inline:auto}
.sub-wrap{margin-top:30px;font-family:var(--body)}
.bm-sub .pend{margin-top:56px}
.pend .sub-wrap{margin-block:28px 34px}
.sub-fine{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.sub-fine a,.sub-in a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.sub-fine a:hover,.sub-in a:hover{text-decoration-color:currentColor}
.sub-in{margin:0;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--soft)}
.sub-in strong{font-weight:600;color:var(--ink);overflow-wrap:anywhere}

/* the states */
.sub-box input{all:unset;box-sizing:border-box;width:100%;min-width:0}
.sub-box button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;white-space:nowrap}
.sub-box .s-busy,.sub-box .sub-ok,.sub-box .sub-err{display:none}
.sub-box .sub-ok,.sub-box .sub-err{margin:0}
.sub-box.loading .s-idle{display:none}
.sub-box.loading .s-busy{display:inline}
.sub-box.loading button{cursor:progress;opacity:.75}
.sub-box.success .sub-ok,.sub-box.error .sub-err{display:block}
.sub-box.success button{display:none}
.sub-box.success input{pointer-events:none}
.sub-box.success input{-webkit-text-fill-color:currentColor}

/* Reply card: the card that falls out of a magazine. Paper whatever the theme, like the TV guide. On success Ghost's "success"
   brings down the postmark. */
.sub-card{--paper:#f4f1e7;--ink2:#1c1b22;--faint:#6a6672;--line:rgba(28,27,34,.26);--blue:#2a45c8;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--paper);color:var(--ink2);border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 22px 44px -26px rgba(20,18,30,.5);transform:rotate(-.35deg);overflow:hidden}
.sub-card input::placeholder{color:var(--faint);opacity:.55}
.sc-left{position:relative;padding:22px 22px 26px 24px;border-right:1px solid var(--line)}
/* rave-poster stipple, fading up from the card's corner */
.sc-left::before{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:46%;background:radial-gradient(circle at 1px 1px,var(--blue) .85px,transparent 1.05px) 0 0/4px 4px;-webkit-mask-image:linear-gradient(14deg,#000,transparent 58%);mask-image:linear-gradient(14deg,#000,transparent 58%);opacity:.42;pointer-events:none}
.sc-left>*{position:relative}
.sc-kick{margin:0;font-family:var(--osd);font-size:18px;letter-spacing:.08em;color:var(--blue)}
.sc-head{margin:6px 0 16px;font-family:var(--display-c);font-weight:860;font-stretch:62%;text-transform:uppercase;font-size:clamp(36px,5vw,46px);line-height:.92;color:var(--ink2);text-wrap:balance}
.sc-ticks{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.35}
.sc-ticks li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start}
.sc-ticks li+li{margin-top:6px}
.sc-ticks i{display:block;width:16px;height:16px;margin-top:1px;border:1.5px solid var(--ink2);font:600 25px/12px var(--hand);color:var(--blue);text-indent:1px;background:var(--paper)}
.sc-right{position:relative;padding:22px 24px 22px 22px;display:flex;flex-direction:column;min-height:228px}
.sc-stamp{align-self:flex-end;width:74px;height:88px;padding:5px;background:radial-gradient(circle at 50% 50%,var(--paper) 2.3px,transparent 2.8px) -4px -4px/8px 8px,var(--blue);display:grid}
.sc-stamp span{display:grid;place-items:center;background:var(--blue);color:#fff;font-family:var(--display-c);font-stretch:75%;font-weight:800;font-size:12.5px;line-height:1.08;letter-spacing:.06em;text-align:center}
.sc-mark{position:absolute;top:8px;right:66px;width:184px;color:#16247e;font-family:var(--display-c);opacity:0;transform:rotate(-11deg) scale(1.3);pointer-events:none}
.sub-card.success .sc-mark{opacity:.86;transform:rotate(-11deg);transition:opacity .09s ease-in,transform .16s cubic-bezier(.3,1.4,.5,1)}
.sc-to{margin-top:auto;font-family:var(--osd);font-size:17px;letter-spacing:.06em;color:var(--faint)}
.sub-card input{padding:2px 0 3px;font-family:var(--hand);font-weight:600;font-size:27px;line-height:1.2;color:#16247e;border-bottom:1.5px solid var(--line)}
.sub-card input:focus{border-bottom-color:var(--blue)}
.sub-card input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--paper) inset;-webkit-text-fill-color:#16247e}
.sub-card button{align-self:flex-end;margin-top:14px;padding:7px 16px 6px;background:var(--blue);color:#fff;font-family:var(--display-c);font-stretch:75%;font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;border-radius:2px}
.sub-card button:hover{background:#1e33a6}
.sub-card button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sub-card .sub-ok,.sub-card .sub-err{margin-top:12px;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.sub-card .sub-err{color:#a4231b}
@media (max-width:600px){
  .sub-card{grid-template-columns:minmax(0,1fr);transform:none}
  .sc-left{border-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}
  /* the stamp and the postmark keep the card's top right corner, so they hang from the card here */
  .sc-right{position:static;min-height:0;padding-top:16px}
  .sc-stamp{position:absolute;top:14px;right:14px;width:62px;height:74px}
  .sc-mark{top:8px;right:66px;width:128px}
}

@media (prefers-reduced-motion:reduce){.sub-card.success .sc-mark{transition:none}}