/* Wr. Sarkhedi blog theme. Self-hosted fonts, storyboard look. */
@font-face{font-family:'Chancery Clone';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/chancery-clone.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/caveat-500.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-800.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-mono-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/archivo-800.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/archivo-900.woff2) format('woff2')}

:root{--paper:#e8e2d4;--ink:#26241f;--gold:#f0dc82;--red:#c0392b;--card:#fffdf4;--line:#d3ccb8;--soft:#4c4638;--mut:#8a8271}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Manrope',sans-serif;line-height:1.75;background-image:radial-gradient(#d8d1bf 1px,transparent 1px);background-size:26px 26px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:'Space Mono',monospace}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* top strip (matches home) */
.top{position:sticky;top:0;z-index:50;background:var(--ink);color:#f2ecd9;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between}
.top .wm{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:26px;color:var(--gold)}
.top nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.top nav a{font-family:'Space Mono',monospace;font-size:13.5px;letter-spacing:.04em;color:#e9e2cf}
.top nav a:hover{color:var(--gold)}
.top a.mail{font-family:'Space Mono',monospace;font-size:13.5px;border:1.5px solid var(--gold);color:var(--gold);padding:8px 14px}
.top a.mail:hover{background:var(--gold);color:var(--ink)}

/* breadcrumb */
.crumb{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--mut);padding:22px 20px 0;max-width:820px;margin:0 auto}
.crumb a:hover{color:var(--red)}

/* article */
article.post{max-width:760px;margin:0 auto;padding:8px 20px 20px}
.post .kick{font-family:'Space Mono',monospace;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:22px}
.post h1{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:clamp(40px,6.4vw,68px);line-height:1.04;margin:14px 0 6px}
.post h1 mark{background:transparent;color:var(--red)}
.post .meta{font-family:'Space Mono',monospace;font-size:13.5px;color:var(--soft);margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:8px 18px}
.post .dek{font-size:21px;line-height:1.6;color:var(--soft);border-left:3px solid var(--red);padding-left:18px;margin:20px 0 8px}
.rule{height:1px;background:var(--line);margin:30px 0}

/* body copy: type floors honoured (>=18px body, larger heads) */
.body{font-size:19px;line-height:1.78;color:#2c2a22}
.body p{margin:0 0 22px}
.body h2{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:clamp(30px,4.4vw,42px);line-height:1.12;margin:44px 0 14px}
.body h2 mark{background:transparent;color:var(--red)}
.body h3{font-family:'Manrope',sans-serif;font-weight:800;font-size:23px;line-height:1.25;margin:32px 0 10px}
.body a{color:var(--red);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(192,57,43,.4)}
.body a:hover{text-decoration-color:var(--red)}
.body strong{font-weight:700}
.body em{font-style:italic}
.body ul,.body ol{margin:0 0 22px 2px;padding-left:22px}
.body li{margin:0 0 10px;padding-left:4px}
.body blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:4px solid var(--gold);font-family:'Apple Chancery','Chancery Clone',cursive;font-size:29px;line-height:1.3;color:var(--ink)}
.body blockquote cite{display:block;font-family:'Space Mono',monospace;font-size:13.5px;font-style:normal;color:var(--mut);margin-top:12px;letter-spacing:.03em}

/* pencil aside + note card */
.pencil{font-family:'Caveat',cursive;font-size:26px;line-height:1.3;color:var(--red);transform:rotate(-.6deg);margin:6px 0 24px}
.note{background:var(--card);border:1px solid var(--line);box-shadow:0 16px 34px -18px rgba(40,35,20,.45);padding:22px 24px;margin:30px 0;position:relative}
.note .tape{position:absolute;top:-13px;left:26px;width:110px;height:26px;background:rgba(240,220,130,.55);border:1px solid rgba(180,160,80,.35);transform:rotate(-2deg)}
.note .lab{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.note p{font-size:18px;margin:0}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.tags a{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.06em;border:1.5px solid var(--ink);padding:7px 12px}
.tags a:hover{background:var(--ink);color:var(--gold)}

/* author card */
.author{display:flex;gap:18px;align-items:flex-start;background:var(--ink);color:#f2ecd9;padding:26px 26px;margin:44px 0 0;box-shadow:6px 6px 0 var(--red)}
.author img{width:74px;height:74px;border-radius:50%;border:2px solid var(--gold);flex:0 0 auto}
.author .n{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:28px;color:var(--gold);line-height:1}
.author .r{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#c9c1a8;margin:6px 0 10px}
.author p{font-size:16px;line-height:1.6;color:#e9e2cf;margin:0}

/* related */
.related{margin:56px 0 0}
.related h2{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:34px;margin-bottom:20px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.rcard{background:var(--card);border:1px solid var(--line);box-shadow:0 16px 34px -18px rgba(40,35,20,.45);padding:22px 22px 24px;position:relative}
.rcard:nth-child(odd){transform:rotate(-.8deg)}
.rcard:nth-child(even){transform:rotate(.7deg)}
.rcard .plab{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);border-bottom:1.5px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.rcard h3{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:26px;line-height:1.1;margin-bottom:8px}
.rcard p{font-size:15.5px;line-height:1.6;color:var(--soft)}
.rcard .go{font-family:'Space Mono',monospace;font-size:13px;color:var(--red);margin-top:12px;display:inline-block}

/* footer */
footer.f{background:var(--ink);color:#c9c1a8;margin-top:70px;padding:40px 20px}
footer.f .in{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;align-items:center}
footer.f .wm{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:24px;color:var(--gold)}
footer.f a{font-family:'Space Mono',monospace;font-size:13px}
footer.f a:hover{color:var(--gold)}
footer.f .fnav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------------- hub ---------------- */
.hub-hero{max-width:900px;margin:0 auto;padding:64px 20px 20px;text-align:center}
.hub-hero .kick{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.hub-hero h1{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:clamp(48px,8vw,92px);line-height:1.02;margin:16px 0 8px}
.hub-hero h1 mark{background:transparent;color:var(--red)}
.hub-hero p{font-size:20px;line-height:1.7;color:var(--soft);max-width:60ch;margin:12px auto 0}
.filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px auto 0;max-width:900px;padding:0 20px}
.filter span{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.08em;border:1.5px solid var(--ink);padding:8px 13px}
.hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;max-width:1160px;margin:44px auto 0;padding:0 20px}
.hcard{background:var(--card);border:1px solid var(--line);box-shadow:0 16px 34px -18px rgba(40,35,20,.45);padding:26px 24px 28px;position:relative;display:flex;flex-direction:column}
.hcard:nth-child(3n+1){transform:rotate(-1deg)}
.hcard:nth-child(3n+2){transform:rotate(.7deg)}
.hcard:nth-child(3n){transform:rotate(-.4deg)}
.hcard .tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);width:120px;height:28px;background:rgba(240,220,130,.55);border:1px solid rgba(180,160,80,.35)}
.hcard .plab{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);border-bottom:1.5px solid var(--ink);padding-bottom:9px;margin-bottom:13px;display:flex;justify-content:space-between;gap:10px}
.hcard h2{font-family:'Apple Chancery','Chancery Clone',cursive;font-weight:700;font-size:30px;line-height:1.08;margin-bottom:10px}
.hcard p{font-size:16px;line-height:1.65;color:var(--soft);flex:1}
.hcard .go{font-family:'Space Mono',monospace;font-size:13.5px;color:var(--red);margin-top:16px}
.hcard:hover{box-shadow:0 20px 40px -16px rgba(40,35,20,.55)}

@media(max-width:600px){
 article.post{padding:8px 18px 20px}
 .body{font-size:18px}
 .author{flex-direction:column}
}