/* Editorial layer: posts and pages.
 *
 * The storefront and the journal share one palette. These tokens map the
 * article styles onto the shop's colours and fonts so a post never looks
 * like it came from a different site.
 */
:root{
	--ff:var(--zn-sans);
	--fd:var(--zn-serif);
	--ink:#1A1F1B;
	--ink2:#5D665F;
	--ink3:#8A9289;
	--green:#1F3A2B;
	--deep:#15281E;
	--gold:#B8862F;
	--light:#F3E3C3;
	--line:#E4DCCB;
	--line2:#D8CFBB;
	--paper:#FFFFFF;
	--tile:#F8F4EC;
	--wash:#EFE6D4;
	--radius:10px;
	--radius-lg:18px;
	--shadow:0 1px 2px rgba(31,58,43,.06),0 10px 28px rgba(31,58,43,.09);
	--ease:cubic-bezier(.22,.61,.36,1);
	--hdr-h:114px;
}

/* The few shared pieces the article layout leans on. */
.site-main,.site-main *{box-sizing:border-box}
.site-main{display:block}
/* One class only, and inline padding only: the article rules below set
   their own widths and their own block padding, and must win. */
.wrap{max-width:1240px;margin-inline:auto;padding-inline:24px}
@media(max-width:640px){.wrap{padding-inline:16px}}
.site-main .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-family:var(--ff)}
.site-main .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink3);font-family:var(--ff)}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{color:var(--green)}
.dot{margin:0 8px}
.site-main{font-family:var(--ff);color:var(--ink)}
.site-main h1,.site-main h2,.site-main h3,.site-main h4{color:var(--green);margin:0}
.site-main p,.site-main ul,.site-main ol{margin:0}
.site-main a{color:inherit}
.site-main img{max-width:100%;height:auto}

/* ============================================================
   EDITORIAL — journal index, articles and pages
   Set for reading: a centred measure, type with enough weight
   to hold up in Arabic as well as English, and a share rail and
   sidebar either side of the column.
   ============================================================ */

/* ---------- article header ---------- */
.art-hd{background:var(--wash);border-block-end:1px solid var(--line);
  padding-block:clamp(26px,4vw,52px) clamp(28px,4.4vw,56px);text-align:center}
.art-hd .wrap{max-width:1180px}
.art-hd .crumbs{margin-bottom:clamp(16px,2.4vw,26px);justify-content:center}
.art-cat{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--green);background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;margin-bottom:18px;transition:.24s var(--ease)}
.art-cat:hover{border-color:var(--green);background:var(--green);color:#fff}
.art-hd h1{font-family:var(--fd);font-weight:600;font-size:clamp(31px,4.4vw,53px);line-height:1.1;
  letter-spacing:-.012em;color:var(--ink);margin-inline:auto;max-width:none;
  /* A long title breaks into even lines instead of leaving one word stranded. */
  text-wrap:balance}
.art-hd h1 em{font-style:italic;color:var(--green)}
.art-sub{margin:clamp(14px,1.8vw,20px) auto 0;font-size:clamp(16.5px,1.8vw,19.5px);line-height:1.6;
  color:var(--ink2);max-width:70ch;font-weight:400;text-wrap:balance}
.art-meta{margin-top:clamp(18px,2.4vw,26px);display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  justify-content:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink3)}
.art-meta .dot{color:var(--line2)}

html[dir="rtl"] .art-hd h1{font-family:'Cairo',var(--ff);font-weight:700;line-height:1.3;letter-spacing:0}
html[dir="rtl"] .art-hd h1 em{font-family:'Cairo';font-style:normal}
html[dir="rtl"] .art-sub{font-size:clamp(16px,1.8vw,19px);line-height:1.9}
html[dir="rtl"] .art-meta,html[dir="rtl"] .art-cat{letter-spacing:0;text-transform:none;font-size:12.5px}

/* A date is read left to right even inside Arabic, so it is isolated from
   the surrounding direction instead of being reordered into nonsense. */
.art-meta time,.jc-meta time,.sidepost time{unicode-bidi:plaintext}

/* ---------- lead image ---------- */
.art-hero{margin-block:clamp(22px,3.4vw,44px);max-width:1040px;margin-inline:auto}
.art-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;max-height:62vh;
  border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--tile)}
.art-hero figcaption{margin-top:11px;font-size:12.5px;color:var(--ink3);text-align:center}

/* ---------- three columns, text in the middle ---------- */
.art-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.4vw,38px);
  padding-block:clamp(26px,3.2vw,46px) clamp(40px,6vw,86px);max-width:1700px;margin-inline:auto}
.art-main{min-width:0}
.prose,.art-foot{max-width:1040px;margin-inline:auto}

/* Equal side columns put the text column dead centre on the page, with the
   share rail and the sidebar sitting in the margins either side of it. Each
   child is placed explicitly, so a page with no rails — a plain Page, say —
   still gets the middle column rather than falling into the first one. */
@media(min-width:1024px){
  .art-body{grid-template-columns:minmax(0,1fr) minmax(0,1040px) minmax(0,1fr);align-items:start}
  .art-share{grid-column:1;justify-self:end;margin-inline-end:clamp(16px,2vw,34px)}
  .art-main{grid-column:2}
  .art-side{grid-column:3;justify-self:start;width:100%;max-width:272px;
    margin-inline-start:clamp(16px,2vw,34px)}
}

/* ---------- share rail ---------- */
.art-share{display:flex;flex-direction:column;align-items:center;gap:11px}
.art-share span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink3);margin-bottom:3px}
.art-share a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;
  place-items:center;transition:.24s var(--ease);background:var(--paper)}
.art-share a:hover{border-color:var(--deep);background:var(--deep);transform:translateY(-2px)}
.art-share svg{width:16px;height:16px;stroke:var(--ink2);fill:none;stroke-width:1.7}
.art-share a:hover svg{stroke:#fff}
@media(min-width:1024px){
  .art-share{position:sticky;inset-block-start:calc(var(--hdr-h) + 26px)}
}
@media(max-width:1023px){
  .art-share{flex-direction:row;justify-content:center;max-width:66ch;margin-inline:auto;
    padding-block-end:clamp(18px,3vw,26px);border-block-end:1px solid var(--line)}
  .art-share span{margin:0 4px 0 0;align-self:center}
}
html[dir="rtl"] .art-share span{letter-spacing:0;font-size:12px}

/* ---------- the side rail ---------- */
.art-side{display:none}
@media(min-width:1780px){
  .art-side{display:block;position:sticky;inset-block-start:calc(var(--hdr-h) + 26px);
    max-height:calc(100vh - var(--hdr-h) - 52px);overflow:auto}
}
.side-h{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink);padding-block-end:11px;margin-block-end:14px;border-block-end:1px solid var(--line2)}
html[dir="rtl"] .side-h{letter-spacing:0;font-size:13px}

.toc{margin-block-end:34px}
.toc ol{list-style:none}
.toc a{display:block;padding-block:8px;padding-inline:14px 0;font-size:13.5px;line-height:1.45;
  color:var(--ink2);border-inline-start:2px solid var(--line);transition:.22s var(--ease)}
.toc a:hover{color:var(--ink);border-inline-start-color:var(--line2)}
.toc a.on{color:var(--green);border-inline-start-color:var(--green);font-weight:600}
html[dir="rtl"] .toc a{font-size:14.5px;line-height:1.75}

.sidepost{display:flex;gap:13px;margin-block-end:18px}
.sidepost .im{flex:0 0 68px;width:68px;height:68px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--tile);border:1px solid var(--line)}
.sidepost .im img{width:100%;height:100%;object-fit:cover}
.sidepost b{display:block;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);
  transition:color .2s var(--ease)}
.sidepost:hover b{color:var(--green)}
.sidepost time{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
html[dir="rtl"] .sidepost b{font-size:15px;line-height:1.6}
html[dir="rtl"] .sidepost time{letter-spacing:0;text-transform:none;font-size:12px}

/* ============================================================
   PROSE — whatever is typed in the editor
   ============================================================ */
.prose{color:var(--ink);font-size:21px;line-height:1.82;font-weight:400}
.prose > *:first-child{margin-block-start:0}
.prose > *:last-child{margin-block-end:0}

/* Arabic runs longer and sits lower on the line; it needs the room. */
html[dir="rtl"] .prose{font-family:'Cairo',var(--ff);font-size:22.5px;line-height:2.05;
  font-weight:400;letter-spacing:0}

/* Every paragraph reads at one size — no enlarged opening paragraph, which
   made the first block look like a different typeface from the rest. */

.prose p{margin-block:0 1.4em}
.prose strong,.prose b{font-weight:700;color:var(--ink)}
.prose em{font-style:italic}
html[dir="rtl"] .prose strong,html[dir="rtl"] .prose b{font-weight:700}
.prose a{color:var(--green);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:rgba(36,120,70,.45);transition:.2s var(--ease)}
.prose a:hover{color:var(--deep);text-decoration-color:currentColor}

/* ---------- headings ---------- */
.prose h2,.prose h3,.prose h4{position:relative;color:var(--ink);
  scroll-margin-block-start:calc(var(--hdr-h) + 22px)}
.prose h2{font-family:var(--ff);font-weight:600;font-size:clamp(27px,3.2vw,38px);line-height:1.2;
  letter-spacing:-.008em;margin-block:1.7em .45em}
.prose h3{font-family:var(--ff);font-weight:600;font-size:clamp(21px,2.3vw,25px);line-height:1.35;
  margin-block:1.6em .4em}
.prose h4{font-family:var(--ff);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);margin-block:1.7em .45em}
.prose h5,.prose h6{font-family:var(--ff);font-weight:600;font-size:15px;color:var(--ink2);margin-block:1.5em .4em}
.prose h2 + h3,.prose h2 + p,.prose h3 + p{margin-block-start:0}

html[dir="rtl"] .prose h2{font-family:'Cairo',var(--ff);font-weight:700;letter-spacing:0;
  line-height:1.45;font-size:clamp(26px,3.1vw,36px)}
html[dir="rtl"] .prose h3{font-family:'Cairo',var(--ff);font-weight:600;letter-spacing:0;
  line-height:1.55;font-size:clamp(21px,2.3vw,25px)}
html[dir="rtl"] .prose h4{font-family:'Cairo',var(--ff);letter-spacing:0;text-transform:none;font-size:15px}

/* the # that appears on hover, for linking to a section */
.hanchor{position:absolute;inset-inline-end:100%;padding-inline-end:12px;color:var(--gold);
  text-decoration:none;opacity:0;transition:opacity .2s var(--ease);font-weight:400;font-size:.7em}
.prose h2:hover .hanchor,.prose h3:hover .hanchor{opacity:.55}
.hanchor:hover{opacity:1!important}
@media(max-width:1400px){.hanchor{display:none}}

/* ---------- lists ---------- */
.prose ul,.prose ol{margin-block:0 1.4em;padding-inline-start:0;list-style:none}
.prose li{position:relative;padding-inline-start:28px;margin-block-end:.6em}
.prose ul > li::before{content:"";position:absolute;inset-inline-start:5px;inset-block-start:.68em;
  width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.prose ol{counter-reset:li}
.prose ol > li{counter-increment:li;padding-inline-start:34px}
.prose ol > li::before{content:counter(li) ".";position:absolute;inset-inline-start:0;inset-block-start:0;
  font-weight:700;color:var(--gold);font-size:.95em}
.prose li > ul,.prose li > ol{margin-block:.5em 0}
.prose li p{margin-block-end:.5em}
html[dir="rtl"] .prose li{padding-inline-start:30px}
html[dir="rtl"] .prose ul > li::before{inset-block-start:.82em}

/* ---------- quotes ---------- */
.prose blockquote{margin-block:2.2em;padding:0 clamp(8px,3vw,42px);text-align:center;border:0}
.prose blockquote::before{content:"\201C";display:block;font-family:var(--fd);font-size:68px;
  line-height:.6;color:var(--light);margin-bottom:8px}
.prose blockquote p{font-family:var(--fd);font-size:clamp(25px,3.1vw,35px);line-height:1.32;
  font-weight:600;color:var(--ink);margin-block-end:.4em;letter-spacing:-.008em}
.prose blockquote cite,.prose blockquote footer{display:block;font-family:var(--ff);font-style:normal;
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);
  margin-top:16px;font-weight:600}
html[dir="rtl"] .prose blockquote p{font-family:'Cairo',var(--ff);font-weight:600;line-height:1.75;
  letter-spacing:0;font-size:clamp(21px,2.6vw,27px)}
html[dir="rtl"] .prose blockquote cite,html[dir="rtl"] .prose blockquote footer{letter-spacing:0;
  text-transform:none;font-size:13px}

/* ---------- media ---------- */
.prose figure{margin-block:2em}
.prose img,.prose video{display:block;max-width:100%;height:auto;border-radius:var(--radius-lg)}
.prose figcaption,.prose .wp-caption-text{margin-top:11px;font-size:13px;line-height:1.5;
  color:var(--ink3);text-align:center}
.prose .alignwide{width:min(118%,100%);margin-inline:auto}
.prose .alignleft{float:inline-start;margin-inline-end:26px;margin-block:.4em 1em;max-width:min(46%,320px)}
.prose .alignright{float:inline-end;margin-inline-start:26px;margin-block:.4em 1em;max-width:min(46%,320px)}
.prose .aligncenter{margin-inline:auto}
.prose .wp-block-embed__wrapper,.prose iframe{max-width:100%;border-radius:var(--radius-lg)}

/* ---------- tables ---------- */
.prose table{width:100%;border-collapse:collapse;margin-block:1.8em;font-size:17px}
.prose th,.prose td{padding:13px 15px;text-align:start;border-block-end:1px solid var(--line)}
.prose th{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink2);border-block-end:1px solid var(--line2)}
.prose tbody tr:nth-child(even){background:var(--tile)}
.prose table caption{caption-side:bottom;margin-top:10px;font-size:13px;color:var(--ink3)}
html[dir="rtl"] .prose table{font-size:16.5px}
html[dir="rtl"] .prose th{letter-spacing:0;text-transform:none;font-size:14px}

/* ---------- code ---------- */
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:2px 6px;color:var(--deep)}
.prose pre{background:#10231A;color:#DCE9E0;border-radius:var(--radius-lg);padding:20px 22px;
  overflow:auto;margin-block:1.7em;font-size:13.5px;line-height:1.6;direction:ltr;text-align:start}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:1em}

/* ---------- rules and the rest ---------- */
.prose hr{border:0;margin-block:2.6em;text-align:center;height:auto}
.prose hr::before{content:"· · ·";letter-spacing:.7em;color:var(--line2);font-size:16px}
.prose mark{background:var(--light);color:var(--deep);padding:1px 4px;border-radius:var(--radius)}
.prose kbd{font-family:ui-monospace,monospace;font-size:.85em;background:var(--paper);
  border:1px solid var(--line2);border-block-end-width:2px;border-radius:3px;padding:2px 6px}
.prose dl dt{font-weight:700;margin-block-start:1.1em}
.prose dl dd{margin-inline-start:0;padding-inline-start:26px;color:var(--ink2)}
.prose .wp-block-button__link{display:inline-block;background:var(--deep);color:#fff;padding:14px 28px;
  border-radius:var(--radius);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;text-decoration:none}
.prose .wp-block-button__link:hover{background:var(--green)}

/* ---------- foot of the article ---------- */
.art-foot{margin-block-start:clamp(34px,4.4vw,56px);padding-block-start:clamp(22px,2.8vw,30px);
  border-block-start:1px solid var(--line)}
.artnav{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.artnav a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:.26s var(--ease);background:var(--paper)}
.artnav a:hover{border-color:var(--line2);box-shadow:var(--shadow);transform:translateY(-2px)}
.artnav span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--ink3);margin-bottom:7px}
.artnav b{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.an-next{text-align:end}
html[dir="rtl"] .artnav span{letter-spacing:0;text-transform:none;font-size:12px}
@media(max-width:620px){.artnav{grid-template-columns:1fr}.an-next{text-align:start}}

/* ============================================================
   JOURNAL INDEX
   ============================================================ */
.jhd{background:var(--wash);border-block-end:1px solid var(--line);
  padding-block:clamp(30px,4.6vw,62px) clamp(32px,5vw,66px);text-align:center}
.jhd .crumbs{justify-content:center}
.jhd h1{font-family:var(--fd);font-weight:600;font-size:clamp(36px,5.2vw,62px);line-height:1.08;
  letter-spacing:-.016em;margin-block:14px 0;text-wrap:balance}
.jhd p{margin:16px auto 0;font-size:clamp(16px,1.7vw,18.5px);line-height:1.68;color:var(--ink2);
  max-width:56ch;font-weight:400}
html[dir="rtl"] .jhd h1{font-family:'Cairo',var(--ff);font-weight:700;letter-spacing:0;line-height:1.3}
html[dir="rtl"] .jhd p{line-height:1.95}

.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px)}
@media(max-width:980px){.jgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.jgrid{grid-template-columns:1fr}}
.jwrap{padding-block:clamp(34px,5vw,72px)}

.jcard{display:flex;flex-direction:column}
.jc-im{display:block;position:relative;aspect-ratio:4/3;background:var(--tile);overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid var(--line)}
.jc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.jcard:hover .jc-im img{transform:scale(1.045)}
.jc-im.na{display:grid;place-items:center}
.jc-im.na svg{width:46px;height:46px;stroke:var(--line2);fill:none;stroke-width:1.2}
.jc-tx{padding-block-start:16px;display:flex;flex-direction:column;flex:1}
.jc-tx .art-cat{margin-bottom:11px;align-self:flex-start;padding:4px 11px;font-size:9.5px}
.jc-name{font-weight:600;font-size:clamp(19px,2vw,22px);line-height:1.3;margin-bottom:9px}
.jc-name a{color:var(--ink);transition:color .22s var(--ease)}
.jc-name a:hover{color:var(--green)}
.jc-ex{font-size:15px;line-height:1.65;color:var(--ink2);font-weight:400;margin-bottom:14px}
.jc-meta{margin-top:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink3);display:flex;align-items:center;gap:9px}
.jc-meta .dot{color:var(--line2)}
html[dir="rtl"] .jc-name{line-height:1.6}
html[dir="rtl"] .jc-ex{line-height:1.95;font-size:15.5px}
html[dir="rtl"] .jc-meta,html[dir="rtl"] .jc-tx .art-cat{letter-spacing:0;text-transform:none;font-size:12.5px}

.jrel{padding-block:clamp(34px,5vw,74px);border-block-start:1px solid var(--line)}
@media(max-width:860px){.jrel .jgrid{grid-template-columns:1fr}}

/* ---------- pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin-block-start:clamp(34px,4.6vw,58px)}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding-inline:12px;
  border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--ink2);
  font-weight:500;transition:.24s var(--ease)}
.pager a:hover{border-color:var(--deep);color:var(--ink)}
.pager .current{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:600}
.pager .dots{border:0}

/* ---------- empty / 404 ---------- */
.contentless{padding-block:clamp(60px,10vw,140px);text-align:center}
.contentless svg{width:52px;height:52px;stroke:var(--line2);fill:none;stroke-width:1.1;margin-bottom:22px}
.contentless h1{font-family:var(--fd);font-weight:600;font-size:clamp(30px,4.4vw,50px);line-height:1.1;
  letter-spacing:-.014em;margin-bottom:12px;text-wrap:balance}
.contentless p{color:var(--ink2);font-size:16.5px;line-height:1.7;max-width:46ch;margin-inline:auto;font-weight:400}
.contentless .btn{margin-top:26px}
html[dir="rtl"] .contentless h1{font-family:'Cairo',var(--ff);font-weight:700;letter-spacing:0;line-height:1.35}

/* ---------- search form ---------- */
.ssearch{display:flex;gap:10px;max-width:460px;margin:22px auto 0}
.ssearch input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:var(--radius);
  padding:13px 15px;font:inherit;font-size:15.5px;background:var(--paper);color:var(--ink)}
.ssearch input:focus{outline:none;border-color:var(--green)}