/* Risaala, the monthly newsletter: the sign-up card (an airmail envelope with a stamp and a PKT postmark)
   and the Risaala pages. Used on the home page and on the pages the Worker builds. The card is paper in both
   themes, so its colours are fixed. */
@font-face{font-family:"Shrikhand";src:url("/fonts/shrikhand.woff2") format("woff2");font-weight:400;font-display:swap}

.risaala-card{max-width:740px; margin:clamp(40px,6vw,64px) auto 0; padding:11px; border:3px solid #17112F; border-radius:22px;
  background:repeating-linear-gradient(-45deg,#FF2E7E 0 14px,#FFFFFF 14px 28px,#2E3CFF 28px 42px,#FFFFFF 42px 56px,#FFB000 56px 70px,#FFFFFF 70px 84px);
  box-shadow:8px 8px 0 var(--hard,#17112F)}
.rs-envelope{position:relative; background:#FFF6EA; color:#17112F; border:3px solid #17112F; border-radius:12px; padding:clamp(20px,4vw,32px) clamp(18px,4vw,34px) clamp(18px,3vw,26px)}
.rs-envelope::after{content:""; display:table; clear:both}
.rs-envelope .eyebrow{color:#17112F; margin:0 0 4px}
.rs-envelope a{color:#B8003F; font-weight:700}

/* The stamp sits top right and the text flows round it; the postmark lands across its corner */
.rs-stamp{float:right; position:relative; margin:0 0 10px 16px; width:78px; padding:6px; background:#FFFFFF; border:2px dashed #17112F; box-shadow:0 0 0 4px #FFFFFF, 0 0 0 6px #17112F; transform:rotate(3deg); display:grid; justify-items:center; gap:2px}
.rs-stamp svg{width:48px; height:48px}
.rs-stamp span{font-family:var(--f-mono,"Courier Prime",monospace); font-weight:700; font-size:11px; letter-spacing:.08em}
.rs-postmark{position:absolute; top:64px; right:62px; width:96px; height:96px; transform:rotate(-14deg); fill:none; stroke:rgba(23,17,47,.55); stroke-width:3; pointer-events:none}
.rs-postmark text{fill:rgba(23,17,47,.6); stroke:none; font-family:var(--f-mono,"Courier Prime",monospace); font-weight:700; font-size:21px; letter-spacing:.08em}
.rs-postmark text.sm{font-size:12.5px; letter-spacing:.16em}

.rs-title{font-family:"Shrikhand","Cooper Black",Georgia,serif; font-weight:400; text-transform:none; letter-spacing:0; font-size:clamp(46px,7vw,64px); line-height:1.05;
  color:#FFB000; -webkit-text-stroke:2px #17112F; paint-order:stroke fill; text-shadow:3px 3px 0 #FF2E7E, 6px 6px 0 #17112F; margin:4px 0 2px}
/* The name and its Urdu, painted side by side like truck lettering, with the meaning underneath */
.rs-nameplate{display:flex; flex-wrap:nowrap; align-items:center; gap:0 .22em; font-size:clamp(38px,11.5vw,64px)}
.rs-nameplate .rs-title{font-size:1em; margin:4px 0 2px}
.rs-urdu{font-family:var(--f-urdu,"Noto Nastaliq Urdu",serif); font-weight:700; font-size:.56em; line-height:1.4; color:#FFB000; direction:rtl; unicode-bidi:isolate;
  -webkit-text-stroke:1.2px #17112F; paint-order:stroke fill; text-shadow:2px 2px 0 #FF2E7E, 3px 3px 0 #17112F; transform:translateY(-.08em)}
.rs-gloss{margin:2px 0 14px; font-family:var(--f-mono,"Courier Prime",monospace); font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#4A4470}
.rs-copy{margin:0 0 18px; max-width:44ch; font-size:18px; line-height:1.55}

.rs-form{clear:both; display:grid; gap:14px}
.rs-form .hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.rs-address{display:flex; align-items:baseline; gap:12px; border-bottom:3px dotted #17112F; padding-bottom:4px}
.rs-address label{font-family:var(--f-mono,"Courier Prime",monospace); font-weight:700; font-size:18px}
.rs-address input{flex:1; min-width:0; font:inherit; font-size:19px; color:#17112F; background:transparent; border:0; padding:8px 0}
.rs-address input::placeholder{color:#8A84A6}
.rs-address input:focus{outline:none}
.rs-address:focus-within{border-bottom-color:#FF2E7E}
.rs-form .btn{justify-self:start; --hard:#17112F}
.rs-status{margin:0; min-height:1.5em; font-weight:700}
.rs-status:empty{min-height:0}
.rs-fine{margin:14px 0 0; font-size:14px; color:#4A4470}

@media (max-width:560px){
  .rs-stamp{width:62px; padding:4px}
  .rs-stamp svg{width:36px; height:36px}
  .rs-postmark{top:40px; right:34px; width:62px; height:62px}
  .rs-form .btn{justify-self:stretch; margin-right:5px}
  .rs-nameplate{clear:right}
}

/* The home page band that holds the card */
.risaala-band .risaala-card{margin-top:0}
.risaala-band .rs-band-note{display:block; width:max-content; max-width:100%; margin:0 auto 18px}

/* The compact card on pages that already show the name */
.rs-compact-title{font-family:var(--f-display,"Big Shoulders Display",sans-serif); font-weight:900; text-transform:uppercase; font-size:clamp(32px,4vw,40px); line-height:1; margin:4px 0 12px; color:#17112F}

/* Risaala pages */
.rs-nameplate-lg{font-size:clamp(44px,13.5vw,112px); margin-top:8px}
.rs-nameplate-lg .rs-urdu{-webkit-text-stroke:1.5px #17112F; text-shadow:2px 2px 0 #FF2E7E, 4px 4px 0 #17112F}
.rs-hero .rs-gloss{font-size:14px; color:var(--ink-soft)}
.rs-section{padding-bottom:clamp(48px,8vw,96px)}
.rs-past{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(32px,4vw,44px); line-height:1; margin:clamp(48px,7vw,72px) 0 6px}
.rs-gloss-page{color:var(--ink-soft)}
.rs-gloss-page .urdu{color:var(--rani-ink)}
.rs-issues{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.rs-issues a{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:center; text-decoration:none; color:var(--ink); background:var(--card); border:3px solid var(--line); border-radius:18px; box-shadow:6px 6px 0 var(--hard); padding:16px 20px}
.rs-issues a:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--hard)}
.rs-issues .urdu{grid-row:span 2; font-size:26px; color:var(--rani-ink)}
.rs-issue-subject{font-weight:800; font-size:20px; line-height:1.3}
.rs-issue-date{font-family:var(--f-mono); font-size:14px; color:var(--ink-soft)}
.rs-empty{font-size:18px; color:var(--ink-soft)}
.rs-issue-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:20px 0 0; font-family:var(--f-mono); font-size:15px; color:var(--ink-soft)}
.rs-issue-meta .urdu{font-size:24px; color:var(--rani-ink)}
.rs-posts{max-width:740px; margin:clamp(40px,6vw,56px) auto 0}
.rs-posts h2{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(32px,4vw,44px); line-height:1; margin:0 0 18px}
.rs-post-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.rs-post-list a{display:grid; gap:8px; text-decoration:none; color:var(--ink); background:var(--card); border:3px solid var(--line); border-radius:18px; box-shadow:6px 6px 0 var(--hard); padding:18px 20px; overflow:hidden}
.rs-post-list img{width:calc(100% + 40px); max-width:none; margin:-18px -20px 6px; aspect-ratio:16/9; object-fit:cover; border-bottom:3px solid var(--line); display:block}
.rs-post-title{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:28px; line-height:1}
.rs-post-read{font-weight:800; color:var(--rani-ink)}
.rs-confirm-title{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(36px,5vw,56px); line-height:1; margin:clamp(28px,4vw,40px) 0 0}
.rs-confirm-links{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion: reduce){ .rs-issues a{transition:none} }