/* ==========================================================================
   Turāth House — site stylesheet
   Design idea: the page is read like a manuscript.
   - jadwal: the ruled gold frame around the opening text block
   - hāshiya: margin notes that carry sources
   - taʿqība: the catchword at the foot of each section, naming what follows
   Logical properties (inline-start/end) keep English and Urdu in one file.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+02B0-02FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+02B0-02FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-500-italic.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+02B0-02FF; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+02B0-02FF; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+02B0-02FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+02B0-02FF; }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 400; font-display: swap;
  src: url("../fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 600; font-display: swap;
  src: url("../fonts/noto-nastaliq-urdu-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
/* Jameel Noori Nastaleeq: uses the reader's installed copy if present, otherwise a subset
   containing exactly the letter shapes this site's Urdu text needs (rebuilt on each publish). */
@font-face { font-family: "Jameel Noori Nastaleeq"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Jameel Noori Nastaleeq"), local("JameelNooriNastaleeq"), url("../fonts/jameel-noori-nastaleeq-subset.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-weight: 400; font-display: swap;
  src: url("../fonts/amiri-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }

/* ---------- Tokens ---------- */
:root {
  --ink-navy: #0B1D2D;      /* brand Deep Navy: header, hero, media */
  --navy-2: #12293D;        /* raised navy surface */
  --gold: #C9A84C;          /* brand Warm Gold: on navy only */
  --gold-ink: #7A5C1E;      /* gold for text and rules on paper (5.4:1) */
  --paper: #F1E8D6;         /* parchment: the page */
  --paper-2: #E5D6B8;       /* sand: a second sheet */
  --card: #FBF6EC;          /* light leaf for cards */
  --text: #23211D;
  --muted: #5C5850;
  --on-navy: #E9E4D8;
  --on-navy-muted: #A9B4BE;
  --rubric: #8E2F23;        /* rubrication red: sources and catchwords only */
  --rule: rgba(122, 92, 30, .35);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --urdu: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif;
  --urdu-input: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --arabic: "Amiri", "Traditional Arabic", serif;

  --measure: 66ch;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 36px; --space-5: 52px; --space-6: 72px;
  --section-y: clamp(44px, 5.5vw, 72px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 17px/1.65 var(--sans);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rubric); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -200px; background: var(--gold); color: var(--ink-navy); padding: 10px 14px; z-index: 100; }
.skip:focus { top: 12px; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 600; }
p { margin: 0 0 var(--space-2); }
.lede { font-size: 18px; color: var(--muted); max-width: 54ch; }
.ar { font-family: var(--arabic); direction: rtl; }
.translit { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px;
  font: 500 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-gold { background: var(--gold); color: var(--ink-navy); }
.btn-gold:hover { background: #D8BA62; color: var(--ink-navy); }
.btn-line { border-color: rgba(201,168,76,.6); color: var(--on-navy); }
.btn-line:hover { border-color: var(--gold); color: #fff; }
.btn-ink { background: var(--ink-navy); color: var(--paper); }
.btn-ink:hover { background: var(--navy-2); color: #fff; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink-navy); color: var(--on-navy);
  border-bottom: 1px solid rgba(201,168,76,.22); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-3); min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-navy); margin-inline-end: auto; }
.brand img { width: 40px; height: 40px; }
.brand-name { font: 600 23px/1 var(--display); letter-spacing: .02em; }
.brand-name small { display: block; font: 400 15px/1.5 var(--urdu); color: var(--gold); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--on-navy); padding-block: 6px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.lang { font-size: 15px; text-decoration: none; color: var(--gold); padding: 6px 10px; border: 1px solid rgba(201,168,76,.4); border-radius: 2px; }
.lang:hover { color: #fff; border-color: var(--gold); }
.lang[lang="ur"] { font-family: var(--urdu); font-size: 15px; line-height: 1.6; padding-block: 0 2px; }
.header-cta { min-height: 42px; padding: 0 18px; font-size: 14px; }
.menu-toggle { display: none; background: none; border: 1px solid rgba(201,168,76,.4); color: var(--on-navy);
  min-height: 42px; padding: 0 14px; font: 500 14px var(--sans); border-radius: 2px; cursor: pointer; }

/* ---------- Hero: the opening folio ---------- */
.folio { background: var(--ink-navy); color: var(--on-navy); padding-block: var(--space-4) var(--space-4); position: relative; overflow: hidden; }
.folio::before { /* faint eight-point star lattice, as tooled on a binding */
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='1'%3E%3Crect x='26' y='26' width='36' height='36'/%3E%3Crect x='26' y='26' width='36' height='36' transform='rotate(45 44 44)'/%3E%3Cpath d='M0 44h18M70 44h18M44 0v18M44 70v18'/%3E%3C/g%3E%3C/svg%3E");
}
.folio-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: var(--space-4); align-items: center; }
.jadwal { /* double ruled frame */
  position: relative; padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid rgba(201,168,76,.55);
  box-shadow: inset 0 0 0 6px var(--ink-navy), inset 0 0 0 7.5px rgba(201,168,76,.9);
}
.jadwal h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; max-width: 17ch; color: #F6F1E6; font-weight: 500; }
.jadwal .lede { color: var(--on-navy); margin-top: var(--space-2); font-size: 18px; max-width: 62ch; }
.jadwal .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-3); }
.kicker { font: 500 12.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.basmala { font: 400 26px/1.4 var(--arabic); color: var(--gold); margin-bottom: var(--space-3); }

.hashiya { /* margin note */
  padding-top: var(--space-3); border-top: 1px solid rgba(201,168,76,.45); font-size: 15px; color: var(--on-navy-muted);
}
.hashiya p { margin: 0; }
.hashiya .ar { font-size: 28px; line-height: 1.5; color: var(--gold); text-align: start; }
.hashiya .gloss { font: italic 500 20px/1.3 var(--display); color: var(--on-navy); margin-top: 6px; }
.hashiya .src { color: #D98A7C; font-size: 14px; margin-top: 4px; }
.hashiya .why { margin-top: 10px; font-size: 14px; }

/* ---------- Catchword (taʿqība) ---------- */
.catchword { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.catchword a { font: italic 500 18px/1 var(--display); color: var(--rubric); text-decoration: none; }
.catchword a:hover { text-decoration: underline; }
.catchword a::after { content: "\2193"; display: inline-block; font: 400 .75em/1 var(--sans); margin-inline-start: 6px; opacity: .7; }
.folio .catchword a, .media .catchword a { color: #D98A7C; }
.folio .catchword { margin-top: var(--space-2); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y) calc(var(--section-y) * .6); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px var(--space-4); align-items: end; margin-bottom: var(--space-4); }
.section-head p { color: var(--muted); max-width: 52ch; margin: 0; }
.sheet-2 { background: var(--paper-2); }

/* Method: a real sequence */
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.method li { counter-increment: step; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 3px; padding: 18px 20px 20px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: start; }
.method li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink-navy); color: var(--gold); font: 600 20px/1 var(--display); font-variant-numeric: lining-nums; }
.method h3 { margin: 0; }
.method p { grid-column: 1 / -1; color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 10px 0 0; }
.motto { margin: var(--space-3) 0 0; font: italic 500 24px/1.3 var(--display); color: var(--gold-ink); }

/* Articles: a lead piece and a fihrist (table of contents) */
.articles-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4) var(--space-5); }
.lead-article { border-top: 3px double var(--gold-ink); padding-top: var(--space-3); }
.lead-article .kind { font-size: 14px; color: var(--muted); margin-bottom: var(--space-2); }
.lead-article h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.12; margin-bottom: var(--space-2); }
.lead-article h3 a { text-decoration: none; }
.lead-article p { max-width: 58ch; }
.source-note { margin-top: var(--space-3); padding-inline-start: var(--space-2); border-inline-start: 2px solid var(--rubric); font-size: 15px; color: var(--muted); }
.source-note b { color: var(--rubric); font-weight: 600; }
.fihrist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.fihrist li { border-bottom: 1px solid var(--rule); }
.fihrist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding-block: 13px; text-decoration: none; }
.fihrist .t { font: 600 22px/1.2 var(--display); }
.fihrist .d { font-size: 14px; color: var(--muted); align-self: baseline; white-space: nowrap; }
.fihrist .s { grid-column: 1 / -1; font-size: 15px; color: var(--muted); }
.fihrist a:hover .t { color: var(--rubric); }
.all-link { display: inline-block; margin-top: var(--space-2); font-weight: 500; }

/* Media */
.media { background: var(--ink-navy); color: var(--on-navy); }
.media h2 { color: #F6F1E6; }
.media .section-head p { color: var(--on-navy-muted); }
.doc-feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-4) var(--space-5); align-items: center; }
.doc-feature figure { margin: 0; border: 1px solid rgba(201,168,76,.5); padding: 8px; }
.doc-feature img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.doc-feature .series { font: 400 14px var(--sans); color: var(--gold); margin-bottom: var(--space-1); }
.doc-feature h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; color: #F6F1E6; margin-bottom: var(--space-2); }
.doc-feature p { color: var(--on-navy); max-width: 54ch; }
.parts { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); border-top: 1px solid rgba(201,168,76,.3); }
.parts li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid rgba(201,168,76,.3); }
.parts span:last-child { color: var(--on-navy-muted); font-size: 15px; }
.reels { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.reel { border-top: 1px solid rgba(201,168,76,.5); padding-top: 12px; }
.reel h4 { font: 600 21px/1.2 var(--display); margin: 0 0 4px; color: #F6F1E6; }
.reel p { font-size: 15px; color: var(--on-navy-muted); margin: 0; }
.reel a { color: var(--gold); font-size: 15px; }

/* Translation */
.service { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-4) var(--space-5); align-items: center; }
.service .specimen { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: var(--space-3); }
.specimen .label { font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); }
.specimen .ar { font-size: 26px; line-height: 1.75; color: var(--text); }
.specimen .ur { font: 400 21px/2.1 var(--urdu); direction: rtl; color: var(--text); border-top: 1px solid var(--rule); padding-top: var(--space-2); margin-top: var(--space-2); }
.specimen .note { font-size: 13px; color: var(--muted); margin-top: var(--space-2); }
.checklist { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); }
.checklist li { padding: 8px 0 8px 28px; border-bottom: 1px solid var(--rule); position: relative; }
.checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: 17px; width: 12px; height: 12px; transform: rotate(45deg); border: 1.5px solid var(--gold-ink); }
[dir="rtl"] .checklist li { padding: 8px 28px 8px 0; }

/* Standard */
.standard { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3) var(--space-5); }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding-block: 11px; border-bottom: 1px solid var(--rule); }
.rules li:first-child { border-top: 1px solid var(--rule); }
.rules b { font: 600 20px/1.25 var(--display); }
.rules span { color: var(--muted); }
.policy-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--space-2); font-weight: 500; }

/* In preparation */
.prep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.prep div { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 3px; padding: 18px 20px; }
.prep p { color: var(--muted); margin: var(--space-1) 0 0; }

/* Newsletter */
.letter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: end; }
.letter form { display: flex; gap: 10px; flex-wrap: wrap; }
.letter label { width: 100%; font-size: 14px; color: var(--muted); }
.letter input { flex: 1 1 240px; min-height: 48px; padding: 0 14px; font: 400 16px var(--sans); background: var(--card); border: 1px solid #B9AD94; border-radius: 2px; color: var(--text); }
.letter input:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(201,168,76,.35); }
.letter-note p { color: var(--muted); margin: 0 0 12px; }
.channels { display: flex; flex-wrap: wrap; gap: 10px; }
.channels a { font: 500 14px/1 var(--sans); text-decoration: none; color: var(--ink-navy); padding: 11px 16px; border: 1px solid rgba(11,29,45,.35); border-radius: 2px; background: var(--card); }
.channels a:hover { background: var(--ink-navy); color: var(--gold); border-color: var(--ink-navy); }
.form-msg { width: 100%; font-size: 14px; color: var(--muted); min-height: 1.4em; margin: 0; }

/* Footer: the colophon */
.colophon { background: var(--ink-navy); color: var(--on-navy-muted); padding-block: var(--space-5) var(--space-3); font-size: 15px; }
.colophon-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--space-4); }
.colophon .seal { width: 84px; height: 84px; border-radius: 50%; margin-bottom: var(--space-2); }
.colophon h2 { font: 600 15px/1.4 var(--sans); color: var(--on-navy); margin-bottom: 10px; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { padding-block: 3px; }
.colophon a { color: var(--on-navy-muted); text-decoration: none; }
.colophon a:hover { color: var(--gold); }
.colophon .about { max-width: 40ch; }
.colophon-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid rgba(201,168,76,.25); font-size: 14px; }

/* ---------- Urdu (RTL) ---------- */
[dir="rtl"] body, body[dir="rtl"] { font: 400 19px/2.15 var(--urdu); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .fihrist .t, [dir="rtl"] .reel h4, [dir="rtl"] .rules b, [dir="rtl"] .brand-name { font-family: var(--urdu); font-weight: 600; letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.9 !important; }
[dir="rtl"] h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.9; }
[dir="rtl"] h3, [dir="rtl"] .lead-article h3, [dir="rtl"] .doc-feature h3 { line-height: 1.9; }
[dir="rtl"] .jadwal h1 { font-size: clamp(28px, 3.7vw, 44px); max-width: none; text-wrap: balance; }
[dir="rtl"] .kicker { font: 400 16px/2 var(--urdu); letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
[dir="rtl"] .letter-note p { line-height: 2.1; }
[dir="rtl"] .channels { direction: rtl; }
[dir="rtl"] .lead-article h3 { font-size: clamp(26px, 2.8vw, 34px); }
[dir="rtl"] .doc-feature h3 { font-size: clamp(26px, 3vw, 36px); }
[dir="rtl"] .fihrist .t { font-size: 20px; line-height: 2; }
[dir="rtl"] .reel h4, [dir="rtl"] .rules b { font-size: 18px; line-height: 2; }
[dir="rtl"] .btn { font-family: var(--urdu); font-size: 15px; line-height: 2; padding-bottom: 4px; }
[dir="rtl"] .nav a { font-size: 16px; }
[dir="rtl"] .lede, [dir="rtl"] .jadwal .lede { font-size: 18px; }
[dir="rtl"] .motto, [dir="rtl"] .hashiya .gloss, [dir="rtl"] .catchword a { font-family: var(--urdu); font-style: normal; font-size: 18px; line-height: 2.2; }
[dir="rtl"] .catchword { justify-content: flex-start; }
[dir="rtl"] .method li::before { content: counter(step, persian); font-family: var(--urdu); line-height: 1; padding-bottom: 4px; }
[dir="rtl"] .brand-name small { font-family: var(--display); font-size: 14px; letter-spacing: .04em; }
[dir="rtl"] input, [dir="rtl"] .form-msg, [dir="rtl"] label { font-family: var(--urdu); }
[dir="rtl"] .colophon h2 { font-family: var(--urdu); font-size: 17px; }
[dir="rtl"] .latin { font-family: var(--sans); direction: ltr; unicode-bidi: isolate; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { gap: 20px; }
  .header-cta { display: none; }
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--ink-navy); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; border-bottom: 1px solid rgba(201,168,76,.3); }
  .nav.open { display: flex; }
  .nav a { padding-block: 14px; font-size: 18px; border-bottom: 1px solid rgba(201,168,76,.15); }
  .folio-grid, .section-head, .articles-grid, .doc-feature, .service, .standard, .letter { grid-template-columns: 1fr; }
  .folio-grid { gap: var(--space-3); }
  .hashiya { padding-top: var(--space-2); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
  .hashiya .ar { grid-row: 1 / span 3; margin: 0; }
  .hashiya .why { grid-column: 1 / -1; }
  .articles-grid, .doc-feature, .service, .standard, .letter { gap: var(--space-3); }
  .section-head { gap: 8px; margin-bottom: var(--space-3); }
  .section-head p { max-width: 64ch; }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .colophon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .colophon-grid > div:first-child { grid-column: 1 / -1; }
  .doc-feature img { aspect-ratio: 16 / 9; }
  .colophon-grid > div:first-child { display: flex; align-items: center; gap: var(--space-2); }
  .colophon .seal { width: 64px; height: 64px; margin: 0; flex: none; }
  .colophon .about { margin: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .section-head { margin-bottom: var(--space-2); }
  .reels { grid-template-columns: 1fr; }
  .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hashiya { display: block; }
  .folio { padding-block: var(--space-3) var(--space-4); }
  .jadwal { padding: 22px 18px; }
  .method { grid-template-columns: 1fr; }
  .method li { padding: 14px 16px; }
  .rules li { padding-block: 10px; }
  .prep div { padding: 14px 16px; }
  .rules li { grid-template-columns: 1fr; gap: 4px; }
  .prep { grid-template-columns: 1fr; }
  .brand-name { font-size: 20px; }
  .brand img { width: 34px; height: 34px; }
  .lang { padding: 4px 8px; }
  .jadwal .actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
[dir="rtl"] .colophon a[href^="https"], [dir="rtl"] input[type="email"] { font-family: var(--sans); }

/* ==========================================================================
   Article page
   ========================================================================== */
.draft-banner { background: var(--rubric); color: #fff; text-align: center; font-size: 14px; padding: 8px var(--gutter); }
.article-head { background: var(--ink-navy); color: var(--on-navy); padding-block: var(--space-5); }
.article-head .crumbs { font-size: 14px; color: var(--on-navy-muted); margin-bottom: var(--space-3); }
.article-head .crumbs a { color: var(--gold); text-decoration: none; }
.article-head h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; color: #F6F1E6; max-width: 18ch; }
.article-head .standfirst { font: italic 500 clamp(21px, 2vw, 25px)/1.4 var(--display); color: var(--on-navy); max-width: 46ch; margin-top: var(--space-3); }
.article-head .meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(201,168,76,.35); font-size: 14px; color: var(--on-navy-muted); }
.article-head .meta b { color: var(--on-navy); font-weight: 500; }

.grades { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--muted); padding-block: var(--space-3); border-bottom: 1px solid var(--rule); }
.grade { display: inline-block; font: 500 12.5px/1 var(--sans); padding: 5px 8px 5px; border-radius: 2px; vertical-align: 2px; white-space: nowrap; }
.g-est { background: #DCE5D6; color: #2F4A2A; }
.g-trad { background: #EFE2C2; color: #6A4F12; }
.g-disp { background: #F0D6CF; color: #7C2618; }

.prose-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: calc(68ch + 320px); padding-inline-end: 320px; padding-block: var(--space-5) var(--space-6); font-size: 18px; line-height: 1.75; }
.prose > p, .prose > ul, .prose > ol { max-width: 68ch; }
.prose h2 { font-size: clamp(30px, 3.2vw, 38px); margin-block: var(--space-5) var(--space-2); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.1em; }
.prose em { font-style: italic; }
.prose blockquote { margin: var(--space-4) 0; padding-inline-start: var(--space-3); border-inline-start: 3px double var(--gold-ink); font: italic 500 25px/1.4 var(--display); color: var(--text); max-width: 34ch; }
.sidenote { float: inline-end; clear: inline-end; width: 270px; margin-inline-end: -320px; margin-block: 4px 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--rubric); padding-top: 8px; }
.sidenote b { color: var(--rubric); font-weight: 600; }
.sidenote .ar { font-size: 20px; line-height: 1.7; color: var(--text); display: block; margin-bottom: 4px; }

.verdicts { width: 100%; max-width: 68ch; border-collapse: collapse; margin-block: var(--space-3) var(--space-4); font-size: 16px; }
.verdicts th, .verdicts td { text-align: start; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.verdicts th { font: 600 14px var(--sans); color: var(--muted); border-bottom: 1.5px solid var(--gold-ink); }
.verdicts td:first-child { width: 42%; font-family: var(--display); font-size: 19px; line-height: 1.35; }
.formulation { background: var(--paper-2); border-inline-start: 3px solid var(--gold-ink); padding: var(--space-3); margin-block: var(--space-3); max-width: 68ch; }
.formulation p { margin: 0; }
.sources { font-size: 15.5px; line-height: 1.6; padding-inline-start: 1.2em; }
.sources li { margin-bottom: 10px; }
.article-end { border-top: 3px double var(--gold-ink); padding-top: var(--space-3); margin-top: var(--space-5); max-width: 68ch; color: var(--muted); font-size: 15.5px; }

@media (max-width: 1080px) {
  .prose { padding-inline-end: 0; max-width: 72ch; margin-inline: auto; }
  .sidenote { float: none; width: auto; margin: 0 0 1.2em; padding: 10px 14px; background: var(--paper-2); border-top: 0; border-inline-start: 2px solid var(--rubric); }
}
@media (max-width: 560px) {
  .prose { font-size: 17px; }
  .verdicts td:first-child { width: 50%; font-size: 17px; }
}
[dir="rtl"] .method p, [dir="rtl"] .reel p, [dir="rtl"] .fihrist .s, [dir="rtl"] .prep p, [dir="rtl"] .rules span { line-height: 2; }

/* ==========================================================================
   Inner pages: about, contact, translation, policies, articles index
   ========================================================================== */
.page-head { padding-block: var(--space-5) var(--space-4); }
.page-head h1 { max-width: 22ch; }
.page-body { padding-block: var(--space-5) var(--space-6); }
.doc { max-width: 70ch; font-size: 17.5px; line-height: 1.75; }
.doc > :first-child { margin-top: 0; }
.doc h2 { font-size: clamp(26px, 2.6vw, 32px); margin: var(--space-4) 0 10px; }
.doc h3 { margin: var(--space-3) 0 6px; }
.doc p { margin-bottom: 1em; }
.doc ul, .doc ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--gold-ink); }
.doc .rules { margin-block: 6px var(--space-3); padding: 0; }
.doc .rules li { margin: 0; grid-template-columns: 200px minmax(0, 1fr); }
.doc .rules li::marker { content: none; }
.callout { background: var(--paper-2); border-inline-start: 3px solid var(--gold-ink); padding: 16px 20px; margin: var(--space-3) 0; border-radius: 0 3px 3px 0; }
[dir="rtl"] .callout { border-radius: 3px 0 0 3px; }
.callout p:last-child { margin: 0; }
.updated { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.page-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--space-3); font-weight: 500; }

/* Two columns: text beside a form */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-4) var(--space-5); align-items: start; }
.form-card { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 3px; padding: var(--space-3); position: sticky; top: 100px; }
.form-card h2 { font-size: 26px; margin-bottom: 4px; }
.form-card .intro { color: var(--muted); font-size: 15px; margin-bottom: var(--space-2); }
.field { display: grid; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 500; color: var(--text); }
.field .hint { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--sans); color: var(--text);
  background: #fff; border: 1px solid #B9AD94; border-radius: 2px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(201,168,76,.35); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.hp { position: absolute !important; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.form-card { position: relative; }
.form-card .btn { width: 100%; justify-content: center; }
.form-status { margin: 12px 0 0; font-size: 14px; color: var(--muted); min-height: 1.2em; }
.form-status.is-ok { color: #2F4A2A; }
.form-status.is-error { color: var(--rubric); }
.form-status.is-note { color: var(--text); background: var(--paper-2); padding: 10px 12px; border-radius: 2px; }

/* Coming-soon rows in the article list */
.fihrist .f-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding-block: 13px; }
.fihrist .is-soon .t { color: var(--muted); }
.soon { display: inline-block; vertical-align: 3px; margin-inline-start: 8px; font: 500 11.5px/1 var(--sans); letter-spacing: .04em;
  color: var(--gold-ink); border: 1px solid var(--rule); padding: 4px 7px; border-radius: 2px; }
.articles-page .fihrist { max-width: 820px; }
.articles-page .fihrist .t { font-size: 24px; }

/* Urdu adjustments for inner pages */
[dir="rtl"] .doc { font-size: 19px; line-height: 2.15; }
[dir="rtl"] .field label, [dir="rtl"] .field .hint, [dir="rtl"] .form-card .intro, [dir="rtl"] .form-status { font-family: var(--urdu); line-height: 2; }
[dir="rtl"] .field input, [dir="rtl"] .field select, [dir="rtl"] .field textarea { font-family: var(--urdu); font-size: 17px; line-height: 2; }
[dir="rtl"] .field input[type="email"] { font-family: var(--sans); direction: ltr; text-align: right; }
[dir="rtl"] .soon { font-family: var(--urdu); font-size: 13px; line-height: 1.6; padding: 0 7px 2px; vertical-align: 6px; }
[dir="rtl"] .doc .rules li { grid-template-columns: 170px minmax(0, 1fr); }
[dir="rtl"] .page-head h1 { line-height: 1.8; }
[dir="rtl"] .article-head .standfirst { font-family: var(--urdu); font-style: normal; font-size: 20px; line-height: 2.1; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .form-card { position: static; }
  .page-body { padding-block: var(--space-4) var(--space-5); }
}
@media (max-width: 560px) {
  .doc { font-size: 17px; }
  .doc .rules li, [dir="rtl"] .doc .rules li { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
[dir="rtl"] .doc ol { list-style-type: persian; }
.specimen .en { font: italic 500 20px/1.45 var(--display); color: var(--text); border-top: 1px solid var(--rule); padding-top: var(--space-2); margin-top: var(--space-2); }
[dir="rtl"] .specimen .en { text-align: left; font-family: var(--display); font-style: italic; line-height: 1.45; }


/* ==========================================================================
   Urdu typography — Jameel Noori Nastaleeq, one weight, compact news-style scale
   (proportions taken from Jang, BBC Urdu and VOA Urdu: regular weight, ~1.6 line height)
   ========================================================================== */
.brand-name small { font: 400 20.4px/1.4 var(--urdu); }
.lang[lang="ur"] { font-family: var(--urdu); font-size: 21.6px; line-height: 1.4; padding-block: 2px 4px; }
.specimen .ur { font: 400 28.8px/1.85 var(--urdu); }

[dir="rtl"] body, body[dir="rtl"] { font: 400 22.8px/1.8 var(--urdu); word-spacing: 1px; font-synthesis: none; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .fihrist .t, [dir="rtl"] .reel h4, [dir="rtl"] .rules b, [dir="rtl"] .brand-name,
[dir="rtl"] .lead-article h3, [dir="rtl"] .doc-feature h3, [dir="rtl"] .colophon h2 { font-family: var(--urdu); font-weight: 400; letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.5 !important; }
[dir="rtl"] .jadwal h1 { font-size: clamp(36px, 3.96vw, 50.4px); }
[dir="rtl"] .article-head h1, [dir="rtl"] .page-head h1 { font-size: clamp(36px, 4.08vw, 50.4px); max-width: 26ch; }
[dir="rtl"] h2 { font-size: clamp(31.2px, 3.12vw, 39.6px); line-height: 1.5; }
[dir="rtl"] h3 { font-size: clamp(24px, 2.16vw, 27.6px); line-height: 1.55; }
[dir="rtl"] .lead-article h3 { font-size: clamp(28.8px, 2.76vw, 36px); line-height: 1.5; }
[dir="rtl"] .doc-feature h3 { font-size: clamp(28.8px, 3vw, 37.2px); line-height: 1.5; }
[dir="rtl"] .form-card h2 { font-size: 28.8px; }
[dir="rtl"] .fihrist .t { font-size: 24px; line-height: 1.55; }
[dir="rtl"] .articles-page .fihrist .t { font-size: 26.4px; }
[dir="rtl"] .reel h4, [dir="rtl"] .rules b { font-size: 22.8px; line-height: 1.55; }
[dir="rtl"] .brand-name { font-size: 30px; line-height: 1.2; }
[dir="rtl"] .brand-name small { font: 500 12.5px/1.2 var(--display); letter-spacing: .04em; margin-top: 2px; }
[dir="rtl"] .nav a { font-size: 20.4px; }
[dir="rtl"] .btn { font-family: var(--urdu); font-size: 20.4px; line-height: 1.5; padding-bottom: 3px; }
[dir="rtl"] .header-cta { font-size: 19.2px; }
[dir="rtl"] .lede, [dir="rtl"] .jadwal .lede { font-size: 22.8px; line-height: 1.8; }
[dir="rtl"] .kicker { font: 400 19.2px/1.6 var(--urdu); margin-bottom: 2px; }
[dir="rtl"] .motto { font: 400 25.2px/1.6 var(--urdu); }
[dir="rtl"] .hashiya .gloss { font: 400 22.8px/1.7 var(--urdu); }
[dir="rtl"] .catchword a { font: 400 21.6px/1.4 var(--urdu); }
[dir="rtl"] .doc-feature .series { font: 400 19.2px/1.6 var(--urdu); }
[dir="rtl"] .method p, [dir="rtl"] .reel p, [dir="rtl"] .fihrist .s, [dir="rtl"] .prep p, [dir="rtl"] .rules span { font-size: 20.4px; line-height: 1.75; }
[dir="rtl"] .letter-note p { line-height: 1.8; }
[dir="rtl"] .doc { font-size: 22.8px; line-height: 1.9; }
[dir="rtl"] .article-head .standfirst { font: 400 24px/1.75 var(--urdu); max-width: 48ch; }
[dir="rtl"] .grade { font: 400 18px/1.5 var(--urdu); padding: 1px 8px 3px; vertical-align: 1px; }
[dir="rtl"] .soon { font: 400 16.8px/1.4 var(--urdu); padding: 1px 7px 3px; vertical-align: 3px; }
[dir="rtl"] .field label, [dir="rtl"] .field .hint, [dir="rtl"] .form-card .intro, [dir="rtl"] .form-status { font-family: var(--urdu); line-height: 1.7; }
[dir="rtl"] .field label { font-size: 19.8px; }
[dir="rtl"] .field select { font-family: var(--urdu); font-size: 20.4px; line-height: 1.5; }
[dir="rtl"] .field input, [dir="rtl"] .field textarea { font-family: var(--urdu-input); font-size: 19.2px; line-height: 2; }
[dir="rtl"] .field input[type="email"], [dir="rtl"] .field input[type="url"] { font-family: var(--sans); direction: ltr; text-align: right; line-height: 1.4; }
[dir="rtl"] .method li::before { font: 400 24px/1 var(--urdu); padding-bottom: 3px; }
[dir="rtl"] .checklist li { padding-block: 6px; }
[dir="rtl"] .checklist li::before { top: 16px; }
[dir="rtl"] .parts li { padding-block: 8px; }
[dir="rtl"] .colophon h2 { font-size: 21.6px; }
[dir="rtl"] .updated, [dir="rtl"] .crumbs { font-size: 18px; }
@media (max-width: 560px) {
  [dir="rtl"] body, body[dir="rtl"] { font-size: 21.6px; }
  [dir="rtl"] .jadwal h1, [dir="rtl"] .article-head h1, [dir="rtl"] .page-head h1 { font-size: 34.8px; }
  [dir="rtl"] h2 { font-size: 30px; }
  [dir="rtl"] .doc { font-size: 21.6px; }
  [dir="rtl"] .nav a { font-size: 22.8px; }
}
[dir="rtl"] .source-note, [dir="rtl"] .lead-article .kind, [dir="rtl"] .hashiya, [dir="rtl"] .hashiya .src,
[dir="rtl"] .fihrist .d, [dir="rtl"] .specimen .label, [dir="rtl"] .specimen .note, [dir="rtl"] .parts span:last-child,
[dir="rtl"] .reel a, [dir="rtl"] .colophon, [dir="rtl"] .colophon-base, [dir="rtl"] .updated, [dir="rtl"] .crumbs,
[dir="rtl"] .form-card .intro, [dir="rtl"] .field .hint, [dir="rtl"] .service-note { font-size: 18px; line-height: 1.7; }
[dir="rtl"] .hashiya .why { font-size: 17px; }
[dir="rtl"] .fihrist .d { padding-top: 0; }
[dir="rtl"] .article-head .standfirst { line-height: 1.65; text-wrap: pretty; }
[dir="rtl"] .lede, [dir="rtl"] .doc p, [dir="rtl"] .section-head p { text-wrap: pretty; }
[dir="rtl"] .rules span, [dir="rtl"] .method p, [dir="rtl"] .prep p, [dir="rtl"] .fihrist .s, [dir="rtl"] .reel p { font-size: 21px; line-height: 1.7; }
[dir="rtl"] .field input, [dir="rtl"] .field textarea { line-height: 1.7; padding-block: 6px; font-size: 17px; }
[dir="rtl"] .field select { min-height: 48px; padding-block: 4px; }
[dir="rtl"] .doc { line-height: 1.8; }