@font-face{font-family:Plex;src:url(/fonts/arabic-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/arabic-600.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/arabic-700.ttf) format('truetype');font-weight:700;font-display:swap}
body.longform-page{--paper:#f4f0e7;--ink:#282b29;--muted:#64675f;--line:#d6d3c8;--green:#314a3e;--ochre:#c1a26a}
.longform-page *{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body.longform-page{margin:0;background:var(--paper);color:var(--ink);font-family:Plex,Arial,sans-serif}
.longform-page a{color:inherit;text-underline-offset:5px}
.longform-page button{font:inherit}
.longform-page a:focus-visible,.longform-page button:focus-visible{outline:3px solid #bb7743;outline-offset:5px}
.longform-page .skip{position:absolute;top:-80px;z-index:20;padding:10px;background:white}
.longform-page .skip:focus{top:10px}
.longform-page .progress{position:fixed;inset:0 0 auto;z-index:30;height:3px;direction:rtl}
.longform-page .progress span{display:block;width:0;height:100%;background:var(--ochre)}
.longform-page .masthead{display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;border-bottom:1px solid var(--line);gap:15px}
.longform-page .wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;letter-spacing:1px;font-size:19px;font-weight:700}
.longform-page .brand-symbol{display:grid;place-items:center;width:34px;height:38px;background:var(--green);color:var(--paper);font-size:25px;font-weight:400;border-radius:2px}
.longform-page .brand-light{font-weight:400}
.longform-page .draft-badge{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 11px;border-radius:3px}
.longform-page .eyebrow{font-size:13px;font-weight:600;line-height:1.8;color:var(--muted);margin:0 0 18px}
.longform-page .cover{padding:72px 4vw 56px;display:grid;grid-template-columns:0.92fr 1.08fr;gap:4.5vw;align-items:center;max-width:1600px;margin:auto}
.longform-page .cover h1{font-size:clamp(42px,4.15vw,70px);line-height:1.55;letter-spacing:-1.4px;margin:0 0 25px;font-weight:700}
.longform-page .cover h1 em{font-style:normal;color:var(--green)}
.longform-page .deck{font-size:20px;line-height:2;max-width:560px;margin:0 0 25px;color:#53594f}
.longform-page .byline{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:12px}
.longform-page .byline span+span{border-inline-start:1px solid var(--line);padding-inline-start:18px}
.longform-page .start{display:inline-flex;gap:34px;margin-top:32px;padding-bottom:10px;border-bottom:1px solid var(--green);font-size:14px;text-decoration:none;color:var(--green)}
.longform-page .start span{font-size:20px}
.longform-page figure{margin:0}
.longform-page figure img{display:block;width:100%;height:auto;background:#171916}
.longform-page figure a.zoom-link{display:block;cursor:zoom-in}
.longform-page figcaption{font-size:12px;line-height:1.9;color:var(--muted);padding-top:12px}
.longform-page figcaption span{display:block}
.longform-page .credit{display:inline-block;font-size:11px;margin-top:4px;color:var(--green);text-decoration:none;border-bottom:1px solid var(--line)}
.longform-page .hero-image{align-self:center}
.longform-page .hero-image img{border-radius:3px}
.longform-page .hero-image figcaption{max-width:92%}
.longform-page .reading-layout{border-top:1px solid var(--line);max-width:1160px;margin:0 auto;padding:55px 30px 90px;display:grid;grid-template-columns:210px minmax(0,740px);gap:75px;justify-content:center}
.longform-page .contents{align-self:start;position:sticky;top:32px}
.longform-page .contents nav{display:flex;flex-direction:column;gap:0}
.longform-page .contents nav a{display:flex;align-items:baseline;gap:12px;font-size:12px;line-height:1.9;text-decoration:none;color:var(--muted);padding:12px 0;border-bottom:1px solid var(--line)}
.longform-page .contents nav a:hover,.longform-page .contents nav a.active{color:var(--green);font-weight:600}
.longform-page .contents nav span{font-family:Arial,sans-serif;font-size:10px;opacity:.8}
.longform-page .source-link{display:block;font-size:12px;margin-top:25px;color:var(--muted)}
.longform-page article{min-width:0}
.longform-page .spoiler{border-inline-start:3px solid var(--ochre);padding:3px 22px 5px;background:#ece8dd;margin:0 0 60px}
.longform-page .spoiler strong{display:block;font-size:15px;margin-top:14px}
.longform-page .spoiler p{font-size:14px;line-height:1.95;margin:8px 0 14px;color:var(--muted)}
.longform-page .chapter{margin:0 0 74px;scroll-margin-top:32px}
.longform-page .chapter-heading{position:relative;display:flex;align-items:baseline;gap:18px;margin:0 0 28px;padding-top:16px;border-top:1px solid var(--line)}
.longform-page .chapter-no{font-family:Georgia,serif;font-size:36px;color:#8b947e;line-height:1;font-style:italic;flex-shrink:0}
.longform-page h2{font-size:29px;line-height:1.7;margin:0;font-weight:600}
.longform-page .chapter p{font-size:20px;line-height:2.15;margin:0 0 27px;word-spacing:1px}
.longform-page .chapter>p:first-of-type{font-size:22px;line-height:2.1;color:#23372c}
.longform-page .story-image{margin:37px 0 43px}
.longform-page .story-image img{border-radius:2px;box-shadow:0 5px 20px #29322a0a}
.longform-page .story-image figcaption{border-bottom:1px solid var(--line);padding-bottom:15px}
.longform-page .end-mark{color:var(--ochre);font-size:20px;text-align:center;margin:0 0 65px}
.longform-page .method{background:#eae6db;border:1px solid #d9d3c4;padding:30px;margin-bottom:40px;scroll-margin-top:25px}
.longform-page .method h2,.longform-page .further h2{font-size:24px;margin-bottom:20px}
.longform-page .method p,.longform-page .method li{font-size:14px;line-height:2.1}
.longform-page .method ol{padding-inline-start:22px}
.longform-page .method li{margin-bottom:15px}
.longform-page .method .rights{font-size:12px;border-top:1px solid #d2cebf;padding-top:16px;color:var(--muted)}
.longform-page .method .eyebrow,.longform-page .further .eyebrow{font-size:12px}
.longform-page .related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.longform-page .related a{font-size:15px;line-height:1.8;padding:18px 0;border-top:1px solid var(--green);text-decoration:none;font-weight:600}
.longform-page .related span{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:10px}
.longform-page footer{border-top:1px solid var(--line);padding:24px 4vw;display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.longform-page footer p{margin:0}
.longform-page footer a{text-decoration:none}
.longform-page dialog{background:#111613;color:#f3f0e7;border:1px solid #7c867b;max-width:min(1400px,96vw);width:96vw;max-height:95dvh;padding:18px;border-radius:4px}
.longform-page dialog::backdrop{background:#060a07ed}
.longform-page dialog img{max-width:100%;max-height:77dvh;object-fit:contain;display:block;margin:auto}
.longform-page dialog button{display:block;margin:0 0 14px auto;background:#e4ded0;color:#1d2b22;border:0;border-radius:2px;padding:6px 16px;cursor:pointer}
.longform-page dialog p{font-size:13px;line-height:1.7;margin:14px 0 0}
@media(min-width:1500px){.longform-page .cover{padding-top:85px;padding-bottom:75px}}
@media(max-width:1050px){.longform-page .cover{padding-top:45px;gap:30px}
.longform-page .cover h1{font-size:42px}
.longform-page .deck{font-size:18px}
.longform-page .reading-layout{grid-template-columns:175px minmax(0,700px);gap:34px;padding-inline:25px}
.longform-page .contents nav a{font-size:11px}}
@media(max-width:760px){.longform-page .masthead{padding:18px 20px}
.longform-page .wordmark{font-size:15px;gap:8px}
.longform-page .brand-symbol{width:28px;height:32px;font-size:21px}
.longform-page .draft-badge{font-size:10px;padding:4px 7px}
.longform-page .cover{display:flex;flex-direction:column;align-items:stretch;padding:38px 22px 34px;gap:30px}
.longform-page .cover h1{font-size:40px;line-height:1.65;letter-spacing:-.7px;margin-bottom:17px}
.longform-page .eyebrow{font-size:12px;margin-bottom:12px}
.longform-page .deck{font-size:18px;line-height:1.95;margin-bottom:22px}
.longform-page .byline{font-size:11px;gap:8px 10px}
.longform-page .byline span+span{padding-inline-start:10px}
.longform-page .start{margin-top:23px}
.longform-page .hero-image figcaption{max-width:100%}
.longform-page .reading-layout{display:block;padding:25px 22px 45px}
.longform-page .contents{position:static;margin-bottom:32px;padding-bottom:23px;border-bottom:1px solid var(--line)}
.longform-page .contents nav{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}
.longform-page .contents nav a{font-size:11px;padding:9px 0;gap:8px}
.longform-page .contents .source-link{margin-top:16px;font-size:11px}
.longform-page .spoiler{margin-bottom:42px;padding-inline:15px}
.longform-page .spoiler p{font-size:13px}
.longform-page .chapter{margin-bottom:49px}
.longform-page .chapter-heading{gap:13px;margin-bottom:24px}
.longform-page .chapter-no{font-size:29px}
.longform-page h2{font-size:25px;line-height:1.7}
.longform-page .chapter p{font-size:18px;line-height:2.1;margin-bottom:24px;word-spacing:0}
.longform-page .chapter>p:first-of-type{font-size:19px;line-height:2.05}
.longform-page .story-image{margin:28px -10px 33px}
.longform-page figcaption{font-size:11px;padding-inline:10px}
.longform-page .credit{font-size:10px}
.longform-page .method{padding:22px 19px}
.longform-page .method h2,.longform-page .further h2{font-size:22px}
.longform-page .method p,.longform-page .method li{font-size:13px}
.longform-page .related{grid-template-columns:1fr}
.longform-page .related a{display:flex;justify-content:space-between;gap:15px;padding:15px 0}
.longform-page .related span{margin-top:0;font-size:11px}
.longform-page footer{flex-wrap:wrap;padding:22px;gap:15px}
.longform-page footer p{order:3;width:100%}
.longform-page .end-mark{margin-bottom:40px}
.longform-page dialog{padding:12px}
.longform-page dialog img{max-height:70dvh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.longform-page .contents,.longform-page .progress,.longform-page .start,.longform-page .draft-badge,.longform-page dialog{display:none}
.longform-page .cover{display:block}
.longform-page .cover h1{font-size:36px}
.longform-page .hero-image{max-width:600px;margin:20px auto}
.longform-page .reading-layout{display:block;padding:20px}
.longform-page .chapter p{font-size:12pt;line-height:1.8}
.longform-page .story-image{break-inside:avoid;max-width:650px;margin:20px auto}
.longform-page .chapter-heading{break-after:avoid}
.longform-page a{color:inherit}
body.longform-page{background:white}
.longform-page .method{break-before:page}}
.longform-page .literary-subtitle{font-size:23px;line-height:1.8;color:var(--green);margin:0 0 20px;font-weight:600}
.longform-page .cover h1{font-size:clamp(37px,3.5vw,58px);line-height:1.65;margin-bottom:16px}
@media(max-width:760px){.longform-page .cover h1{font-size:34px;line-height:1.7}
.longform-page .literary-subtitle{font-size:19px;margin-bottom:16px}}
/* Shared navigation and publishing tools keep the same behavior on the reading page. */
body.longform-page{--text:#282b29;--subtle:#64675f;--gold:#6c5733;--panel:#eae6db;--canvas:#f4f0e7}
.longform-page main{max-width:1500px;padding:0 24px;margin:auto}
.longform-page .cover{display:grid;border:0;background:none;max-width:none;margin:0;padding:45px 25px 55px;justify-content:normal}
.longform-page .chapter-heading{display:flex;max-width:none;padding:16px 0 0;margin:0 0 28px;border-bottom:0;justify-content:normal;align-items:baseline}
.longform-page .chapter{margin:0 0 74px}.longform-page .contents nav{display:flex}
.longform-page .site-header{background:var(--paper);border-bottom-color:var(--line);font-family:Plex,Arial,sans-serif}
.longform-page .site-header a,.longform-page .category-nav{color:#4f574d}
.longform-page .header-main nav a:hover,.longform-page .category-nav a:hover{color:#1c3529}
.longform-page .site-header .brand{color:#283c30}.longform-page .brand-name small{color:#64675f}
.longform-page .breadcrumbs{max-width:1200px;margin:0 auto;padding:22px 25px 0;font-size:12px;color:#64675f}
.longform-page .breadcrumbs [aria-current]{color:#384636}
.longform-page .share-panel{background:#eae6db;border-color:var(--line);color:var(--ink);margin-block:20px 45px}
.longform-page .secondary-button{color:#283c30;border-color:#8a9181;background:transparent}
.longform-page footer{display:block;max-width:1200px;margin:0 auto;padding:30px 24px;color:#56614f}
.longform-page .footer-grid h2,.longform-page .footer-brand{color:#314a3e}
.longform-page .footer-grid a{color:#56614f}.longform-page .footer-bottom{margin-top:24px}
.longform-page .method h3{font-size:17px;line-height:1.8;margin:25px 0 12px}
.longform-page .reading-layout{margin:0 auto}.longform-page .cover-text{min-width:0}
.longform-page .analytics-panel{color:#f1eee7}.longform-page .analytics-panel button{color:inherit}
@media(max-width:760px){.longform-page main{padding:0}.longform-page .cover{display:flex;padding:32px 22px}.longform-page .contents nav{display:grid}.longform-page .breadcrumbs{padding:20px 22px 0}.longform-page .share-panel{margin-inline:22px}.longform-page .chapter{margin-bottom:49px}}