/* dakhni.org — shared stylesheet (generated by build_site.py) */
:root{
  --gold:#A07020;
  --gold-deep:#6B4710;
  --gold-soft:#C9A968;
  --cream:#F2EDE2;
  --ivory:#FAF7EF;
  --ink:#1A1814;
  --ink-soft:#4A453C;
  --ink-faint:#6B6253;
  --rule:rgba(26,24,20,0.10);
  --rule-soft:rgba(26,24,20,0.05);
  color-scheme:light dark;
}
/* Dark mode -- the whole site is built on these role variables (page bg,
   panel bg, three text tones, gold accents, hairline rules), so redefining
   them here re-themes almost everything automatically. A handful of
   elements that are hardcoded dark regardless of site theme on purpose
   (footer, the photo-cover hero) don't reference these and are untouched;
   the few remaining hardcoded literals (nav's translucent backdrop, the
   mobile menu panel, quiz "selected" state, the homepage seal watermark)
   get their own overrides at the bottom of this file. */
@media (prefers-color-scheme:dark){
  :root{
    --gold:#C99A56;
    --gold-deep:#E0B36B;
    --gold-soft:#EDD39C;
    --cream:#221E17;
    --ivory:#15130F;
    --ink:#ECE6D8;
    --ink-soft:#C6BFAD;
    --ink-faint:#948C77;
    --rule:rgba(236,230,216,0.14);
    --rule-soft:rgba(236,230,216,0.07);
  }
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body { background:var(--ivory); color:var(--ink); font-family:'EB Garamond',Georgia,serif; overflow-x:hidden; }
.flag-banner { display:flex; justify-content:center; margin:0 auto 1.8rem; line-height:0; }
.flag-banner img { width:auto; max-width:96px; height:auto; max-height:96px; object-fit:contain; object-position:center; display:block; opacity:.95; border:none; }
nav {
      position:sticky; top:0; z-index:200;
      background:var(--ivory);
      height:58px;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 3rem; border-bottom:1px solid var(--rule);
    }
.nav-brand { display:inline-flex; align-items:center; gap:.65rem; font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:600; letter-spacing:.22em; color:var(--ink); text-decoration:none; }
.nav-links { display:flex; gap:2.2rem; list-style:none; }
.nav-links a { font-family:'Inter',sans-serif; font-size:.8rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:color .2s; padding-bottom:2px; border-bottom:1px solid transparent; }
.nav-links a:hover { color:var(--gold-deep); border-bottom-color:var(--gold); }
.hero {
      background:var(--ivory);
      padding:7rem 2rem 6rem; text-align:center;
      border-bottom:1px solid var(--rule);
      position:relative; overflow:hidden;
    }
.hero::after {
      content:''; position:absolute; inset:0;
      background:url('/assets/dakhni-pattern.webp') repeat;
      background-size:120px;
      opacity:0.06; pointer-events:none; z-index:0;
    }
.hero-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.seal-img { width:120px; height:120px; object-fit:contain; margin:0 auto 1.6rem; display:block; }
.hero-urdu { font-family:'Lateef',serif; font-size:clamp(1.6rem,3.8vw,2.4rem); color:var(--gold-deep); line-height:1.5; font-weight:400; }
.hero-rule { width:64px; height:1px; background:var(--gold); margin:1.4rem auto; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,6vw,4rem); font-weight:500; color:var(--ink); letter-spacing:.18em; line-height:1.1; }
.hero-subtitle { font-family:'Inter',sans-serif; font-size:clamp(.85rem,1.4vw,.95rem); font-weight:400; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-top:1rem; }
.hero-desc { font-size:clamp(1rem,1.8vw,1.12rem); color:var(--ink-soft); line-height:1.75; max-width:520px; margin:2rem auto 0; }
.hero-btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2.6rem; }
.btn-primary { font-family:'Inter',sans-serif; font-size:.875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:.95rem 2.1rem; background:var(--ink); color:var(--ivory); border:1px solid var(--ink); cursor:pointer; text-decoration:none; transition:background-color .25s,color .25s; display:inline-block; }
.btn-primary:hover { background:transparent; color:var(--ink); }
.btn-secondary { font-family:'Inter',sans-serif; font-size:.875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:.95rem 2.1rem; background:transparent; color:var(--ink); border:1px solid var(--rule); cursor:pointer; text-decoration:none; transition:border-color .25s,color .25s; display:inline-block; }
.btn-secondary:hover { border-color:var(--gold); color:var(--gold-deep); }
.city-strip { background:var(--cream); padding:1.4rem 2rem; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:center; align-items:center; border-bottom:1px solid var(--rule); }
.city-strip-label { font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:var(--ink-faint); width:100%; text-align:center; margin-bottom:.3rem; }
.city { font-family:'Cormorant Garamond',serif; font-size:.95rem; font-weight:500; letter-spacing:.06em; color:var(--ink-soft); transition:color .2s; cursor:default; text-decoration:none; }
a.city { cursor:pointer; }
.city:hover { color:var(--gold-deep); }
.city-sep { color:var(--gold); font-size:.45rem; }
.sec-label { font-family:'Inter',sans-serif; font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:.9rem; }
.sec-title { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--ink); line-height:1.25; letter-spacing:.02em; }
.sec-title span { display:block; color:var(--ink-soft); font-family:'EB Garamond',serif; font-size:.7em; font-weight:400; margin-top:.5em; letter-spacing:0; }
.h-rule { border:none; border-top:1px solid var(--rule); margin:0; }
.diamond-rule { display:flex; align-items:center; gap:.8rem; padding:0 3rem; }
.diamond-rule::before, .diamond-rule::after { content:''; flex:1; height:1px; background:var(--rule); }
.diamond { width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }
.pillars-wrap { padding:6rem 3rem 6rem; max-width:1440px; margin:0 auto; }
.pillars-hdr { text-align:center; margin-bottom:4rem; }
.pillars-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.pillar { background:var(--ivory); padding:2.4rem 2rem; text-decoration:none; color:inherit; display:block; transition:background .25s; }
.pillar:hover { background:var(--cream); }
.pillar-num { font-family:'Inter',sans-serif; font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:1rem; }
.pillar-name { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:500; color:var(--ink); margin-bottom:.7rem; letter-spacing:.02em; }
.pillar-text { font-size:.95rem; line-height:1.75; color:var(--ink-soft); }
.pillar-link { display:inline-block; margin-top:1.2rem; font-family:'Inter',sans-serif; font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); border-bottom:1px solid var(--gold); padding-bottom:2px; }
.dynasties-sec {
      position:relative;
      background:var(--cream);
      border-top:1px solid var(--rule);
      border-bottom:1px solid var(--rule);
      overflow:hidden;           
      padding:6rem 3rem;
      text-align:center;
    }
.dynasties-seal-bg {
      position:absolute;
      right:-120px;
      top:50%;
      transform:translateY(-50%);
      width:480px;
      height:auto;
      opacity:0.10;
      pointer-events:none;
      mix-blend-mode:multiply;
    }
.dynasties-sec::after {
      content:'';
      position:absolute;
      right:0; top:0; bottom:0;
      width:1px;
      background:var(--gold);
      opacity:0.4;
    }
.dynasties-inner {
      position:relative; z-index:1;
      max-width:1440px;
      margin:0 auto;
    }
.dynasties-inner > .sec-label,
    .dynasties-inner > .sec-title { max-width:680px; margin-left:auto; margin-right:auto; }
.dynasty-list { margin-top:2.4rem; display:flex; flex-direction:column; gap:1.4rem; text-align:left; }
.dynasty-note { font-family:'EB Garamond',Georgia,serif; font-size:.95rem; color:var(--ink-soft); line-height:1.7; margin-top:.4rem; max-width:62ch; }
.chrono-wrap { padding:5rem 3rem 5.5rem; max-width:1100px; margin:0 auto; }
.chrono-inner { text-align:center; }
.chrono-list { list-style:none; counter-reset:c; margin:3rem auto 0; max-width:780px; padding:0; text-align:left; border-top:1px solid var(--rule); }
.chrono-list li { display:grid; grid-template-columns:90px 1fr; gap:1.4rem; padding:1.1rem 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.chrono-year { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; color:var(--gold-deep); letter-spacing:.04em; }
.chrono-text { font-family:'EB Garamond',Georgia,serif; font-size:.98rem; line-height:1.7; color:var(--ink-soft); }
@media (max-width:560px) {
      .chrono-list li { grid-template-columns:1fr; gap:.2rem; }
    }
.lang-panel { max-width:1400px; margin:0 auto; padding:5rem 3rem 3rem; text-align:center; }
.lang-lead { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-size:1.1rem; line-height:1.85; color:var(--ink-soft); max-width:62ch; margin:1.8rem auto 2.6rem; }
.lang-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); text-align:left; }
.lang-card { background:var(--ivory); padding:1.8rem 1.6rem; }
.lang-card-eyebrow { font-family:'Inter',sans-serif; font-size:.6rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:.7rem; }
.lang-card-title { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; color:var(--ink); margin-bottom:.6rem; letter-spacing:.02em; }
.lang-card p { font-family:'EB Garamond',Georgia,serif; font-size:.95rem; line-height:1.75; color:var(--ink-soft); }
@media (max-width:600px) { .lang-panel { padding:3.5rem 1.4rem 2rem; } }
.dynasty-item { display:flex; align-items:flex-start; gap:1rem; }
.dynasty-dot { width:5px; height:5px; background:var(--gold-deep); transform:rotate(45deg); flex-shrink:0; margin-top:.7rem; }
.dynasty-name { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:500; color:var(--ink); letter-spacing:.03em; }
.dynasty-dates { font-family:'EB Garamond',serif; font-style:italic; font-size:.95rem; color:var(--ink-soft); margin-top:.2rem; }
.quiz-wrap { background:var(--cream); padding:6rem 3rem; border-top:2px solid var(--gold-soft); }
.quiz-inner { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.quiz-eyebrow { font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500; letter-spacing:.38em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1rem; display:block; }
.quiz-title { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.9rem,3.4vw,2.8rem); color:var(--ink); line-height:1.2; margin-bottom:1.2rem; letter-spacing:.02em; }
.quiz-title em { font-style:italic; color:var(--gold-deep); font-weight:400; }
.quiz-body { font-style:italic; font-size:1.05rem; color:var(--ink-soft); line-height:1.9; }
.quiz-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.quiz-tag { font-family:'Inter',sans-serif; font-size:.62rem; font-weight:400; letter-spacing:.08em; padding:.32rem .8rem; border:1px solid var(--rule); color:var(--ink-soft); }
.quiz-card { background:var(--cream); border:1px solid var(--rule); padding:2rem; }
.quiz-q { font-family:'Cormorant Garamond',serif; font-size:1.05rem; line-height:1.5; color:var(--ink); margin-bottom:1.2rem; font-weight:500; }
.quiz-opts { display:flex; flex-direction:column; gap:.5rem; }
.quiz-opt { font-family:'EB Garamond',serif; font-size:.98rem; padding:.7rem 1.1rem; background:var(--ivory); border:1px solid var(--rule); border-left:2px solid transparent; color:var(--ink-soft); cursor:pointer; text-align:left; transition:all .2s; }
.quiz-opt:hover { border-left-color:var(--gold); color:var(--ink); padding-left:1.4rem; }
.quiz-opt.sel { border-color:var(--gold-deep); border-left-color:var(--gold-deep); color:var(--ink); background:white; }
.quiz-note { margin-top:1.1rem; font-family:'Inter',sans-serif; font-size:.58rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); text-align:center; }
.poetry-wrap { background:var(--cream); padding:6rem 2rem; text-align:center; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.poetry-inner { max-width:660px; margin:0 auto; }
.poetry-urdu { font-family:'Lateef',serif; font-size:clamp(1.6rem,3.6vw,2.4rem); color:var(--gold-deep); direction:rtl; line-height:1.9; margin-bottom:1.4rem; font-weight:400; }
.poetry-trans { font-style:italic; font-size:clamp(1rem,2vw,1.15rem); color:var(--ink-soft); line-height:1.9; }
.poetry-attr { margin-top:1.6rem; font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); }
/* footer is a fixed dark band regardless of site theme -- like the photo-cover
   hero below, it doesn't reference the swappable --ink/--ivory roles. */
footer { background:#1A1814; padding:3.5rem 3rem 2.5rem; text-align:center; }
.ft-name { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:500; letter-spacing:.22em; color:#FAF7EF; margin-bottom:.5rem; }
.ft-tagline { font-style:italic; font-size:.92rem; color:rgba(250,247,239,0.55); margin-bottom:2rem; }
.ft-links { display:flex; gap:1.8rem; justify-content:center; list-style:none; flex-wrap:wrap; margin-bottom:2rem; }
.ft-links a { font-family:'Inter',sans-serif; font-size:.875rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:rgba(250,247,239,0.82); text-decoration:none; transition:color .2s; }
.ft-links a:hover { color:var(--gold-soft); }
.ft-divider { width:48px; height:1px; background:rgba(201,169,104,0.3); margin:0 auto 1.6rem; }
.ft-copy { font-family:'Inter',sans-serif; font-size:.6rem; font-weight:300; letter-spacing:.1em; color:rgba(250,247,239,0.3); }
@media(max-width:800px){
      nav { padding:0 1.2rem; } .nav-links { display:none; }
      .pillars-wrap { padding:3rem 1rem 4rem; }
      .dynasties-sec { padding:4rem 1.5rem; }
      .dynasties-seal-bg { width:320px; right:-80px; opacity:0.13; }
      .quiz-inner { grid-template-columns:1fr; gap:2.5rem; }
      .quiz-wrap { padding:4rem 1.4rem; }
      .diamond-rule { padding:0 1.4rem; }
      footer { padding:2.5rem 1.4rem; }
    }
.nav-mark{width:30px;height:30px;object-fit:contain;flex-shrink:0;display:block;transition:transform .4s ease;}
.nav-brand:hover .nav-mark{transform:rotate(8deg);}
.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:.5rem;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:1px;transition:transform .25s ease, opacity .25s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:880px){
      nav{padding:0 1.2rem;flex-wrap:wrap;height:auto;min-height:58px;align-items:center;}
      .nav-toggle{display:flex;}
      .nav-links{order:3;display:none;flex-direction:column;align-items:flex-start;width:100%;gap:0;padding:.5rem 0 1rem;border-top:1px solid var(--rule);background:var(--ivory);margin:.4rem -1.2rem 0;padding-left:1.4rem;}
      .nav-links.open{display:flex;position:fixed;top:var(--nav-bottom,58px);left:0;right:0;bottom:0;width:auto;margin:0;padding:.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:190;}
      body.menu-open{overflow:hidden;}
      body.menu-open nav{-webkit-backdrop-filter:none;backdrop-filter:none;}
      .nav-links li{width:100%;border-bottom:1px solid var(--rule-soft);}
      .nav-links li:last-child{border-bottom:none;}
      .nav-links a{display:block;padding:1rem 0;font-size:.72rem;letter-spacing:.18em;width:100%;}
    }
.nav-links > li { position:relative; }
.nav-links > li > a { padding:1.05rem 0; display:inline-block; border-bottom:1px solid transparent; }
.nav-links > li > a:hover { color:var(--gold-deep); border-bottom-color:var(--gold); }
.nav-links > li.has-dropdown > a:hover { border-bottom-color:transparent; }
.has-dropdown > a::after {
      content:'▾'; margin-left:.32em; font-size:.55em; color:var(--gold,#A07020);
      position:relative; top:-1px; display:inline-block;
      transition:transform .2s ease;
    }
.has-dropdown:hover > a::after { transform:translateY(2px); }
.dropdown {
      position:absolute; top:100%; left:0;
      transform:translateY(-4px);
      min-width:210px;
      background:var(--ivory);
      border:1px solid var(--rule,rgba(26,24,20,0.10));
      border-top:2px solid var(--gold,#A07020);
      list-style:none; padding:.4rem 0; margin:0;
      opacity:0; pointer-events:none;
      transition:opacity .22s ease, transform .22s ease;
      z-index:250;
      box-shadow:0 10px 30px rgba(26,24,20,0.10);
    }
.has-dropdown:hover > .dropdown,
    .has-dropdown:focus-within > .dropdown {
      opacity:1; pointer-events:auto;
      transform:translateY(0);
    }
.dropdown li { width:100%; }
.dropdown a {
      display:block; padding:.7rem 1.4rem;
      font-family:'Inter',sans-serif; font-size:.64rem; font-weight:400;
      letter-spacing:.16em; text-transform:uppercase;
      color:var(--ink-soft,#4A453C); text-decoration:none;
      border-bottom:none !important;
      transition:background .15s, color .15s;
      white-space:nowrap;
    }
.dropdown a:hover { background:var(--cream,#F2EDE2); color:var(--gold-deep,#6B4710); }
.dropdown-toggle {
      display:none; background:rgba(160,112,32,0.07); border:none; cursor:pointer;
      width:48px; height:48px; flex:none;
      align-items:center; justify-content:center;
      border-left:1px solid var(--rule,rgba(26,24,20,0.12));
      transition:background .15s ease;
    }
.dropdown-toggle:active,
    .dropdown-toggle[aria-expanded="true"] { background:rgba(160,112,32,0.16); }
.dropdown-toggle::after {
      content:'▾'; font-size:1.05rem; font-weight:600; color:var(--gold-deep,#6B4710);
      transition:transform .2s ease;
    }
.dropdown-toggle[aria-expanded="true"]::after { transform:rotate(180deg); }
@media (max-width:880px){
      .has-dropdown > a::after { content:''; }
      .nav-links > li.has-dropdown { display:flex; flex-wrap:wrap; align-items:center; }
      .nav-links > li.has-dropdown > a { flex:1 1 auto; width:auto; }
      .dropdown-toggle { display:flex; }
      .dropdown{
        position:static; opacity:1; pointer-events:auto; transform:none;
        background:transparent; border:none; box-shadow:none;
        padding:0 0 0 1.2rem; margin:0; transition:none; min-width:0;
        width:100%; display:none;
      }
      .has-dropdown.dropdown-open > .dropdown { display:block; padding-bottom:.5rem; }
      .dropdown a { padding:.55rem 0; font-size:.64rem; letter-spacing:.14em; }
    }
.crumb { max-width:1100px; margin:1.8rem auto .4rem; padding:0 1.4rem; }
.page-hero { padding:5.5rem 2rem 4rem; }
.page-hero-title { letter-spacing:.04em; line-height:1.15; }
.page-hero-title em { font-style:italic; color:var(--gold-deep); font-weight:400; }
.page-hero-sub { font-size:1.1rem; max-width:600px; }
.h-section { padding:0; max-width:none; }
.h-entry {
      display:grid;
      grid-template-columns:minmax(320px, 1fr) 1.55fr;
      gap:3.5rem;
      align-items:start;
      max-width:1500px;
      margin:0 auto;
      padding:3.5rem 2rem;
      border-bottom:1px solid var(--rule-soft);
    }
.h-entry:last-of-type { border-bottom:none; }
.h-entry:nth-of-type(even) .h-aside { order:2; }
.h-entry:nth-of-type(even) .h-text { order:1; }
.h-entry > .h-figure { margin:0; align-self:start; }
.h-entry > .h-figure img { width:100%; height:auto; display:block; border:1px solid var(--rule); }
.h-entry > .h-figure figcaption {
      font-family:'Inter',sans-serif; font-size:.58rem;
      letter-spacing:.18em; text-transform:uppercase;
      color:var(--ink-faint); margin-top:.7rem; line-height:1.7;
    }
.h-entry:nth-of-type(even) > .h-figure { order:2; }
.h-entry:nth-of-type(even) > .h-text { order:1; }
@media (max-width:820px) {
      .h-entry {
        grid-template-columns:1fr;
        gap:2rem;
        padding:2.6rem 1.2rem;
      }
      .h-entry .h-aside,
      .h-entry .h-text,
      .h-entry .h-figure { order:initial !important; }
    }
.h-section > section.h-entry:only-of-type > .h-text > .h-numeral,
    .h-section > section.h-entry:only-of-type > .h-text > .h-eyebrow,
    .h-section > section.h-entry:only-of-type > .h-text > .h-title,
    .h-section > section.h-entry:only-of-type > .h-text > .h-sub { display:none; }
.h-text .h-body p {
      font-family:'EB Garamond',Georgia,serif;
      font-size:1.08rem;
      line-height:1.85;
      color:var(--ink-soft);
      margin-bottom:1.3rem;
    }
.h-text .h-body > p:first-of-type::first-letter {
      font-family:'Cormorant Garamond',serif;
      font-size:3rem;
      float:left;
      line-height:.9;
      padding:.06em .14em 0 0;
      color:var(--gold-deep);
      font-weight:500;
    }
.h-text .h-tags { margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.h-text .h-tag {
      font-family:'Inter',sans-serif; font-size:.6rem; font-weight:400;
      letter-spacing:.1em; padding:.4rem .85rem;
      border:1px solid var(--rule); color:var(--ink-soft); background:var(--ivory);
    }
.h-aside {
      background:var(--cream);
      border:1px solid var(--rule);
      padding:1.8rem 1.6rem;
      position:sticky; top:78px;
    }
@media (max-width:820px) { .h-aside { position:static; } }
.h-aside-label {
      font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500;
      letter-spacing:.32em; text-transform:uppercase;
      color:var(--gold-deep); display:block; margin-bottom:1rem;
    }
.h-list { list-style:none; padding:0; margin:0; }
.h-list li {
      padding:.75rem 0;
      border-bottom:1px solid var(--rule-soft);
      font-family:'EB Garamond',Georgia,serif;
      font-size:.94rem; line-height:1.55; color:var(--ink-soft);
    }
.h-list li:last-child { border-bottom:none; }
.h-key {
      display:block;
      font-family:'Cormorant Garamond',serif;
      font-weight:600; color:var(--ink);
      margin-bottom:.2rem;
      letter-spacing:.02em;
    }
.h-aside-note {
      margin-top:1rem;
      font-family:'EB Garamond',Georgia,serif;
      font-style:italic; font-size:.92rem;
      color:var(--ink-faint); line-height:1.7;
    }
.article { max-width:760px; margin:0 auto; padding:3.2rem 1.4rem 2rem; }
.article > p { font-family:'EB Garamond',Georgia,serif; font-size:1.1rem; line-height:1.85; color:var(--ink-soft); margin-bottom:1.3rem; }
.article > .crumb + p::first-letter,
    .article > p:not(.crumb):first-of-type::first-letter {
      font-family:'Cormorant Garamond',serif;
      font-size:3.2em; float:left; line-height:.88;
      padding:.06em .14em 0 0;
      color:var(--gold-deep); font-weight:500;
    }
.article h2 {
      font-family:'Cormorant Garamond',serif;
      font-size:1.7rem; font-weight:500;
      color:var(--ink);
      margin:2.8rem 0 1rem;
      letter-spacing:.02em;
      padding-top:1.8rem;
      border-top:1px solid var(--rule-soft);
    }
.article h2:first-of-type { border-top:none; padding-top:0; margin-top:1.8rem; }
.article h2 em { color:var(--gold-deep); font-style:italic; font-weight:400; }
.article h3 {
      font-family:'Cormorant Garamond',serif;
      font-size:1.22rem; font-weight:500; color:var(--ink);
      margin:1.8rem 0 .7rem; letter-spacing:.02em;
    }
.article blockquote {
      background:var(--cream);
      border-left:3px solid var(--gold);
      padding:1.2rem 1.4rem 1.2rem 1.7rem;
      margin:2rem 0;
      font-family:'EB Garamond',Georgia,serif;
      font-style:italic;
      font-size:1.08rem;
      color:var(--ink-soft);
      line-height:1.75;
    }
.article ul, .article ol { padding-left:1.4rem; margin-bottom:1.3rem; color:var(--ink-soft); }
.article ul li, .article ol li { margin-bottom:.6rem; line-height:1.75; }
.article .facts {
      display:flex; flex-wrap:wrap; gap:.5rem;
      margin:2rem 0 1rem;
    }
.article .fact {
      font-family:'Inter',sans-serif; font-size:.6rem; font-weight:400;
      letter-spacing:.1em; padding:.4rem .85rem;
      border:1px solid var(--rule); color:var(--ink-soft); background:var(--cream);
    }
.lang-divider {
      max-width:1500px; margin:0 auto;
      padding:4.5rem 2rem 1rem;
      text-align:center;
      border-top:1px solid var(--rule-soft);
    }
.lang-divider:first-of-type { border-top:none; }
.lang-divider-eyebrow {
      font-family:'Inter',sans-serif; font-size:.6rem; font-weight:500;
      letter-spacing:.36em; text-transform:uppercase;
      color:var(--gold-deep); display:block; margin-bottom:1rem;
    }
.lang-divider-urdu {
      font-family:'Lateef',serif;
      font-size:clamp(2rem,4.5vw,3rem);
      color:var(--gold-deep); line-height:1.4; margin-bottom:.4rem;
    }
.lang-divider-title {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.5rem,3vw,2.1rem);
      color:var(--ink); font-weight:500; letter-spacing:.03em;
    }
.lang-divider-sub {
      font-family:'EB Garamond',Georgia,serif;
      font-style:italic; color:var(--ink-faint);
      max-width:600px; margin:1rem auto 0; line-height:1.8;
    }
.lang-divider-rule { width:50px; height:1px; background:var(--gold); margin:1.2rem auto 0; }
.lang-divider + .h-section .h-entry:first-of-type .h-text > .h-numeral,
    .lang-divider + .h-section .h-entry:first-of-type .h-text > .h-eyebrow { display:none; }
.h-text > .h-title {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.4rem,2.4vw,1.85rem);
      font-weight:500; letter-spacing:.02em;
      line-height:1.25;
      color:var(--ink);
      margin-bottom:.6rem;
    }
.h-text > .h-title em { color:var(--gold-deep); font-style:italic; }
.h-text > .h-eyebrow {
      font-family:'Cormorant Garamond',serif;
      font-style:italic; color:var(--ink-faint);
      font-size:1rem; margin-bottom:.6rem; display:block;
    }
.h-text > .h-numeral {
      font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500;
      letter-spacing:.32em; text-transform:uppercase;
      color:var(--gold-deep); display:block; margin-bottom:.6rem;
    }
.h-text > .h-sub {
      font-family:'EB Garamond',Georgia,serif;
      font-style:italic; color:var(--ink-soft);
      margin-bottom:1.4rem; line-height:1.7;
    }
.subnav {
      max-width:1400px; margin:5rem auto 0;
      padding:0 1.4rem 5rem;
      display:grid; grid-template-columns:1fr 1fr 1fr;
      gap:1rem;
      background:transparent; border:none;
    }
.subnav > a, .subnav > div {
      background:var(--cream);
      border:1px solid var(--rule);
      padding:1.4rem 1.6rem;
      text-decoration:none;
      color:var(--ink-soft);
      transition:background .2s, border-color .2s;
    }
.subnav > a:hover { background:var(--ivory); border-color:var(--gold); }
.subnav-eyebrow {
      display:block;
      font-family:'Inter',sans-serif; font-size:.54rem; font-weight:500;
      letter-spacing:.3em; text-transform:uppercase;
      color:var(--ink-faint); margin-bottom:.4rem;
    }
.subnav-title {
      font-family:'Cormorant Garamond',serif;
      font-size:1.05rem; font-weight:500; color:var(--ink);
    }
.subnav .index { text-align:center; }
.subnav .next { text-align:right; }
@media (max-width:600px){
      .subnav { grid-template-columns:1fr; }
      .subnav .next { text-align:left; }
    }
.nav-links > li > a[aria-current="page"] {
      color:var(--gold-deep);
      border-bottom-color:var(--gold);
    }
.nav-links > li.has-dropdown > a[aria-current="page"] {
      border-bottom-color:var(--gold);
    }
.dropdown a[aria-current="page"] {
      background:var(--cream);
      color:var(--gold-deep);
      font-weight:500;
    }
@media (max-width:880px){
      .nav-links > li > a[aria-current="page"] {
        background:linear-gradient(90deg, var(--cream) 0%, transparent 100%);
      }
    }
.h-wrap {
      max-width:1500px;
      margin:0 auto;
      padding:0 0 2rem;
    }
.h-wrap > .h-entry { padding-left:1.4rem; padding-right:1.4rem; }
.h-figure figcaption {
      max-width:520px;
    }
.crumb a, .crumb span { display:inline-block; }
@media (max-width:880px) {
      .page-hero { padding:3.4rem 1.2rem 2.6rem; }
      .page-hero-title { font-size:clamp(1.6rem, 7vw, 2.2rem); letter-spacing:.04em; }
      .page-hero-sub { font-size:1rem; line-height:1.7; }
      .page-hero-eyebrow { font-size:.56rem; letter-spacing:.28em; }
    }
@media (max-width:880px) {
      .article { padding:2.4rem 1.2rem 2rem; }
      .article > p, .h-text .h-body p { font-size:1.04rem; line-height:1.78; }
      .article h2 { font-size:1.45rem; margin-top:2.2rem; padding-top:1.4rem; }
      .article h3 { font-size:1.12rem; }
      .article blockquote { font-size:1rem; padding:1rem 1.2rem 1rem 1.4rem; }
    }
@media (max-width:600px) {
      .card-grid { grid-template-columns:1fr !important; }
      .card { padding:1.8rem 1.4rem; }
      .card-title { font-size:1.25rem; }
    }
@media (max-width:600px) {
      .subnav { gap:.6rem; padding:0 1.2rem 4rem; margin-top:3rem; }
      .subnav > a, .subnav > div { padding:1.2rem 1.4rem; min-height:60px; }
      .subnav-title { font-size:1rem; }
    }
@media (max-width:880px) {
      .nav-links > li > a { padding:.95rem 0; min-height:44px; }
      .dropdown a { padding:.7rem 0 .7rem .2rem; min-height:44px; }
      nav { padding:0 1rem; }
      .nav-brand { font-size:.9rem; letter-spacing:.18em; }
      .nav-mark { width:28px; height:28px; }
    }
@media (max-width:1024px) and (min-width:881px) {
      .h-entry { padding:2.6rem 1.6rem; gap:2rem; }
      .page-hero { padding:4.4rem 1.6rem 3rem; }
    }
@media (max-width:600px) {
      .h-entry { padding:2.4rem 1.2rem; gap:1.6rem; }
      .h-aside { padding:1.4rem 1.2rem; }
      .h-list li { font-size:.9rem; padding:.6rem 0; }
      .h-key { font-size:1rem; }
      footer { padding:2.6rem 1.2rem 2rem; }
      .ft-links { gap:1rem .9rem; font-size:.6rem; }
    }
.nav-search-btn{order:5;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:.4rem;padding:0;background:transparent;border:none;border-radius:50%;color:var(--ink-soft,#4A453C);cursor:pointer;transition:color .2s,background .2s;}
.nav-search-btn:hover{color:var(--gold-deep,#6B4710);background:rgba(160,112,32,0.08);}
.nav-search-btn svg{width:18px;height:18px;}
body.ds-search-open{overflow:hidden;}
.ds-search[hidden]{display:none;}
.ds-search{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-start;justify-content:center;}
.ds-search-backdrop{position:absolute;inset:0;background:rgba(26,24,20,0.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.ds-search-box{position:relative;display:flex;flex-direction:column;width:min(640px,92vw);max-height:76vh;margin-top:11vh;background:var(--ivory,#FAF7EF);border:1px solid var(--rule,rgba(26,24,20,0.10));border-radius:10px;box-shadow:0 24px 60px rgba(26,24,20,0.28);overflow:hidden;}
.ds-search-bar{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--rule,rgba(26,24,20,0.10));}
.ds-search-bar>svg{flex:none;width:18px;height:18px;color:var(--gold-deep,#6B4710);}
.ds-search-input{flex:1;min-width:0;border:none;background:transparent;font-family:'EB Garamond',Georgia,serif;font-size:1.1rem;color:var(--ink,#1A1814);outline:none;}
.ds-search-cancel{flex:none;border:1px solid var(--rule,rgba(26,24,20,0.18));background:transparent;color:var(--ink-soft,#4A453C);font-family:'Inter',sans-serif;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .55rem;border-radius:5px;cursor:pointer;}
.ds-search-cancel:hover{color:var(--gold-deep,#6B4710);border-color:var(--gold,#A07020);}
.ds-search-results{list-style:none;margin:0;padding:.25rem 0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.ds-search-results a{display:block;padding:.7rem 1.1rem;text-decoration:none;border-bottom:1px solid var(--rule-soft,rgba(26,24,20,0.06));}
.ds-search-results li:last-child a{border-bottom:none;}
.ds-search-results a:hover,.ds-search-results a:focus{background:var(--cream,#F2EDE2);outline:none;}
.ds-r-title{display:block;font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--ink,#1A1814);}
.ds-r-sec{display:block;margin:.1rem 0;font-family:'Inter',sans-serif;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#6B4710);}
.ds-r-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:'EB Garamond',serif;font-size:.82rem;line-height:1.4;color:var(--ink-soft,#4A453C);}
.ds-search mark{background:rgba(160,112,32,0.22);color:inherit;border-radius:2px;padding:0 .06em;}
.ds-search-hint,.ds-search-msg{margin:0;padding:1.1rem;text-align:center;font-family:'EB Garamond',serif;font-size:.92rem;color:var(--ink-soft,#4A453C);}
@media(max-width:880px){
    .nav-search-btn{order:0;margin-left:auto;width:42px;height:42px;}
    .nav-toggle{margin-left:.1rem;}
    .ds-search-box{width:100vw;max-width:100vw;max-height:100vh;height:100dvh;margin-top:0;border:none;border-radius:0;}
  }
.ai-notice {
    background:var(--cream,#F2EDE2);
    border-bottom:1px solid var(--rule);
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s ease;
  }
.ai-notice.open { opacity:1; transform:translateY(0); }
.ai-notice-inner {
    position:relative;
    max-width:1100px; margin:0 auto;
    display:flex; align-items:center; justify-content:center;
    gap:.6rem;
    padding:.55rem 2.6rem .55rem 1rem;
  }
.ai-notice-text {
    font-family:'Inter',sans-serif;
    font-size:.72rem; line-height:1.5;
    color:var(--ink-soft,#4A453C);
    text-align:center;
  }
.ai-notice-text a {
    color:var(--gold-deep,#6B4710);
    text-decoration:underline;
    text-underline-offset:2px;
    margin-left:.35em;
    white-space:nowrap;
  }
.ai-notice-close {
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:2.2rem; height:2.2rem;
    background:transparent; border:none;
    color:var(--ink-faint,#8B8472);
    font-size:1.1rem; line-height:1;
    cursor:pointer;
    transition:color .2s;
  }
.ai-notice-close:hover { color:var(--ink,#1A1814); }
@media (max-width:600px) {
  .ai-notice-inner { justify-content:flex-start; padding:.6rem 2.4rem .6rem .9rem; }
  .ai-notice-text { text-align:left; font-size:.68rem; }
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
.city-hero{
      position:relative;min-height:520px;display:flex;align-items:flex-end;justify-content:center;
      color:#FAF7EF;text-align:center;padding:6rem 2rem 3.4rem;border-bottom:1px solid var(--rule);
    }
.city-hero::after{content:'';position:absolute;inset:0;background:url('/assets/dakhni-pattern.webp') repeat;background-size:120px;opacity:0.10;pointer-events:none;z-index:0;}
.city-hero-inner{max-width:760px;margin:0 auto;position:relative;z-index:1;}
.city-hero-eyebrow{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:1rem;}
.city-hero-urdu{font-family:'Lateef',serif;font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--gold-soft);line-height:1.4;margin-bottom:.4rem;}
.city-hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,6vw,4.2rem);color:#FAF7EF;line-height:1.1;font-weight:500;letter-spacing:.06em;}
.city-hero-rule{width:64px;height:1px;background:var(--gold-soft);margin:1.4rem auto;}
.city-hero-sub{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:clamp(1rem,1.7vw,1.12rem);color:#E5DDC8;max-width:580px;margin:0 auto;line-height:1.85;}
.facts-strip{background:var(--cream);padding:1.6rem 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem;border-bottom:1px solid var(--rule);}
.fact{text-align:center;}
.fact-key{font-family:'Inter',sans-serif;font-size:.58rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.4rem;}
.fact-val{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:600;color:var(--ink);}
.pillars-strip{background:var(--ivory);border-bottom:1px solid var(--rule);padding:1.4rem 1.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;align-items:center;}
.pillars-strip-label{font-family:'Inter',sans-serif;font-size:.58rem;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-deep);width:100%;text-align:center;margin-bottom:.4rem;}
.pillars-strip a{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s, border-color .2s;}
.pillars-strip a:hover{color:var(--gold-deep);border-bottom-color:var(--gold);}
.pillars-strip-sep{color:var(--rule);font-size:.55rem;}
.h-entry:last-child{border-bottom:none;}
.h-entry:nth-child(even) .h-text{order:2;}
.h-eyebrow{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:.8rem;}
.h-numeral{font-family:'Cormorant Garamond',serif;font-size:.85rem;font-weight:600;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.4rem;}
.h-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:500;letter-spacing:.02em;line-height:1.2;color:var(--ink);margin-bottom:.6rem;}
.h-title em{color:var(--gold-deep);font-style:italic;}
.h-sub{font-family:'EB Garamond',Georgia,serif;font-style:italic;color:var(--ink-faint);font-size:1rem;margin-bottom:1.2rem;}
.h-body{font-family:'EB Garamond',Georgia,serif;font-size:1.02rem;line-height:1.85;color:var(--ink-soft);}
.h-body p{margin-bottom:.9rem;}
.h-body em{color:var(--gold-deep);font-style:italic;}
.h-figure{margin:0;}
.h-figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--cream);border:1px solid var(--rule);}
.h-list .h-key{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ink);letter-spacing:.02em;white-space:nowrap;font-size:1rem;}
.h-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;}
.h-tag{font-family:'Inter',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--rule);padding:.4rem .8rem;background:var(--ivory);}
.h-pull{margin:4rem auto;max-width:780px;padding:3rem 2rem;text-align:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--cream);}
.h-pull-urdu{font-family:'Lateef',serif;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--gold-deep);line-height:1.6;}
.h-pull-trans{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:1.1rem;line-height:1.85;color:var(--ink-soft);margin-top:1rem;}
.h-pull-attr{font-family:'Inter',sans-serif;font-size:.62rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint);margin-top:1.2rem;}
.timeline-wrap{max-width:980px;margin:0 auto;padding:4rem 2rem;}
.timeline-hdr{text-align:center;margin-bottom:3rem;}
.timeline-eyebrow{font-family:'Inter',sans-serif;font-size:.62rem;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:.9rem;}
.timeline-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink);font-weight:500;letter-spacing:.02em;}
.tl-list{list-style:none;display:grid;gap:0;border-left:1px solid var(--rule);margin-left:1rem;}
.tl-item{position:relative;padding:.9rem 0 1.4rem 1.8rem;}
.tl-item::before{content:'';position:absolute;left:-5px;top:1.25rem;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);}
.tl-year{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--gold-deep);font-size:1.05rem;letter-spacing:.04em;display:inline-block;margin-right:.7rem;}
.tl-text{font-family:'EB Garamond',Georgia,serif;color:var(--ink-soft);font-size:1rem;line-height:1.65;}
.xref-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink-faint);transition:color .2s,border-color .2s;}
.xref-link:hover{color:var(--gold-deep);border-bottom:1px solid var(--gold-deep);}
.ref-mark{font-size:.68em;line-height:0;}
.ref-mark a,.ref-mark span{color:var(--ink-faint);text-decoration:none;padding:0 1px;}
.ref-mark a:hover{color:var(--gold-deep);}
.refs-wrap{max-width:1100px;margin:2.6rem auto 0;padding:0 1.4rem;}
.refs-wrap details{border-top:1px solid var(--rule);padding-top:1.4rem;}
.refs-summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.55rem;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);user-select:none;padding-bottom:1.2rem;}
.refs-summary::-webkit-details-marker{display:none;}
.refs-summary::before{content:'';border-style:solid;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent var(--ink-faint);transition:transform .2s ease;flex-shrink:0;}
.refs-wrap details[open] > .refs-summary::before{transform:rotate(90deg);}
.refs-summary:hover{color:var(--gold-deep);}
.refs-summary:hover::before{border-left-color:var(--gold-deep);}
.refs-list{font-family:'EB Garamond',Georgia,serif;font-size:.86rem;line-height:1.7;color:var(--ink-soft);counter-reset:refnum;padding:0 0 2.2rem;list-style:none;}
.refs-list li{counter-increment:refnum;margin-bottom:.65rem;padding-left:1.6em;text-indent:-1.6em;}
.refs-list li::before{content:counter(refnum) ". ";color:var(--ink-faint);font-family:'Inter',sans-serif;font-size:.8em;}
.refs-back-group a.refs-back{color:var(--ink-faint);text-decoration:none;font-size:.85em;margin-right:.15em;}
.refs-back-group a.refs-back:hover{color:var(--gold-deep);}
.refs-url{color:var(--ink-faint);text-decoration:none;}
.refs-url:hover{color:var(--gold-deep);}
.comments-wrap{max-width:820px;margin:2rem auto 0;padding:4.5rem 2rem 6rem;border-top:1px solid var(--rule);}
.comments-ornament{text-align:center;font-size:.8rem;color:var(--gold);letter-spacing:.5em;margin-bottom:1.4rem;}
.comments-hdr{text-align:center;margin-bottom:2.6rem;}
.comments-eyebrow{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:.9rem;}
.comments-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink);font-weight:500;letter-spacing:.02em;}
.comments-panel{background:var(--cream);border:1px solid var(--rule);padding:clamp(1.6rem,4vw,2.8rem);}
.comments-pending{font-family:'EB Garamond',Georgia,serif;font-style:italic;color:var(--ink-faint);text-align:center;}
.comments-noscript{font-family:'EB Garamond',Georgia,serif;color:var(--ink-soft);}
#disqus_thread{font-family:'EB Garamond',Georgia,serif;color-scheme:light;}
@media (max-width:880px){
      .city-hero{min-height:380px;padding:4rem 1.4rem 2.6rem;}
      .h-entry{grid-template-columns:1fr;gap:1.6rem;padding:2.4rem 0;}
      .h-entry:nth-child(even) .h-text{order:0;}
      .h-wrap{padding:3rem 1.4rem 3rem;}
      nav{padding:0 1.2rem;}
      .nav-links{gap:1rem;}
      .nav-links a{font-size:.6rem;letter-spacing:.14em;}
      footer{padding:3rem 1.4rem 2.4rem;}
    }
@media (max-width:900px){
      .h-entry { grid-template-columns:1fr !important; gap:1.8rem !important; }
      .h-entry > .h-figure, .h-entry > .h-text, .h-entry > .h-aside { order:0 !important; }
      .h-aside { position:static !important; }
    }
@media (max-width:880px){
      nav{padding:0 1.2rem;flex-wrap:wrap;height:auto;min-height:58px;align-items:center;}
      .nav-toggle{display:flex;}
      .nav-links{order:3;display:none;flex-direction:column;align-items:flex-start;width:100%;gap:0;padding:.5rem 0 1rem;border-top:1px solid var(--rule);background:var(--ivory);margin:.4rem -1.2rem 0;padding-left:1.4rem;}
      .nav-links.open{display:flex;position:fixed;top:var(--nav-bottom,58px);left:0;right:0;bottom:0;width:auto;margin:0;padding:.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:190;}
      body.menu-open{overflow:hidden;}
      body.menu-open nav{-webkit-backdrop-filter:none;backdrop-filter:none;}
      .nav-links > li{width:100%;border-bottom:1px solid var(--rule-soft);}
      .nav-links > li:last-child{border-bottom:none;}
      .nav-links > li > a{display:block;padding:1rem 0;font-size:.72rem;letter-spacing:.18em;width:100%;}
}
.page-hero::after {
      content:''; position:absolute; inset:0;
      background:url('/assets/dakhni-pattern.webp') repeat;
      background-size:120px;
      opacity:0.05; pointer-events:none; z-index:0;
    }
.page-hero-inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.page-hero-eyebrow { font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500; letter-spacing:.38em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1rem; display:block; }
.page-hero-rule { width:64px; height:1px; background:var(--gold); margin:1.4rem auto; }
.crumb a { color:var(--ink-soft); text-decoration:none; }
.crumb a:hover { color:var(--gold-deep); }
.crumb-sep { color:var(--gold); margin:0 .6rem; }
.subnav a { background:var(--ivory); padding:1.4rem 1.6rem; text-decoration:none; color:var(--ink-soft); transition:background .2s; }
.subnav a:hover { background:var(--cream); color:var(--gold-deep); }
.subnav-spacer { background:var(--ivory); }
@media(max-width:600px){ .subnav{grid-template-columns:1fr;} .subnav .next, .subnav .index { text-align:left; } }
/* Unified card component — one structure for every hub listing */
.card-grid-wrap { max-width:1440px; margin:0 auto 6rem; padding:2.4rem 1.4rem 0; }
.hub-intro { max-width:760px; margin:0 auto 3rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.card { background:var(--ivory); padding:2.2rem 1.8rem; text-decoration:none; color:inherit; transition:background .25s; display:flex; flex-direction:column; }
a.card:hover { background:var(--cream); }
.card--soon { cursor:default; }
.card-eyebrow { font-family:'Inter',sans-serif; font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:.7rem; }
.card-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:500; color:var(--ink); margin:0 0 .45rem; letter-spacing:.03em; }
.card-meta { font-family:'EB Garamond',serif; font-style:italic; font-size:.92rem; color:var(--ink-faint); margin:0 0 .85rem; }
.card-text { font-family:'EB Garamond',serif; font-size:.95rem; line-height:1.7; color:var(--ink-soft); margin:0; flex:1; }
.card-text a { color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--gold-soft); }
.card-text a:hover { color:var(--ink); }
.card-cta { display:inline-block; margin-top:1.2rem; font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); border-bottom:1px solid var(--gold); padding-bottom:2px; align-self:flex-start; }
.card--soon .card-cta { color:var(--ink-faint); border-bottom:1px dotted var(--ink-faint); }
@media(max-width:600px){ .card { padding:1.8rem 1.4rem; } .card-title { font-size:1.25rem; } }
.article p { font-family:'EB Garamond',Georgia,serif; font-size:1.07rem; line-height:1.85; color:var(--ink-soft); margin-bottom:1.3rem; }
@media (max-width:880px){
      nav{padding:0 1.2rem;flex-wrap:wrap;height:auto;min-height:58px;}
      .nav-toggle{display:flex;}
      .nav-links{order:3;display:none;flex-direction:column;align-items:flex-start;width:100%;gap:0;padding:.5rem 0 1rem;border-top:1px solid var(--rule);background:var(--ivory);margin:.4rem -1.2rem 0;padding-left:1.4rem;}
      .nav-links.open{display:flex;position:fixed;top:var(--nav-bottom,58px);left:0;right:0;bottom:0;width:auto;margin:0;padding:.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:190;}
      body.menu-open{overflow:hidden;}
      body.menu-open nav{-webkit-backdrop-filter:none;backdrop-filter:none;}
      .nav-links > li{width:100%;border-bottom:1px solid var(--rule-soft);}
      .nav-links > li:last-child{border-bottom:none;}
      .nav-links > li > a{display:block;padding:1rem 0;font-size:.72rem;letter-spacing:.18em;width:100%;}
}
@media (max-width:780px){ .h-section { grid-template-columns:1fr; gap:2rem; } }
.h-text h2.h-title { font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:500; letter-spacing:.02em; line-height:1.2; color:var(--ink); margin-bottom:.6rem; }
.h-text h2.h-title em { color:var(--gold-deep); font-style:italic; }
.urdu-q { font-family:'Lateef',serif; font-size:1.6rem; color:var(--gold-deep); direction:rtl; line-height:1.7; margin:1.4rem 0 .6rem; }
@media(max-width:600px){ .subnav{grid-template-columns:1fr;} }
.page-hero-urdu { font-family:'Lateef',serif; font-size:clamp(2rem,4.4vw,3rem); color:var(--gold-deep); line-height:1.4; margin-bottom:.4rem; }
.article em { color:var(--gold-deep); font-style:italic; }
.tl-text em { color:var(--gold-deep); font-style:italic; }
.intro-wrap { max-width:760px; margin:0 auto; padding:4rem 1.4rem 2rem; }
.intro-wrap p { font-family:'EB Garamond',Georgia,serif; font-size:1.07rem; line-height:1.9; color:var(--ink-soft); margin-bottom:1.3rem; }
.grid-wrap { padding:2rem 1.4rem 5rem; }
.article-intro { max-width:760px; margin:0 auto; padding:3.5rem 1.4rem 2rem; }
.article-intro p { font-family:'EB Garamond',Georgia,serif; font-size:1.07rem; line-height:1.85; color:var(--ink-soft); margin-bottom:1.3rem; }
.article-intro a { color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--gold); }
.article-intro a:hover { color:var(--ink); }
.h-entry:not(:has(.h-figure)){grid-template-columns:minmax(0,72ch);justify-content:center;}
.diamonds-wrap{max-width:1400px;margin:0 auto;padding:4rem 2rem 2rem;}
.diamonds-hdr{text-align:center;margin-bottom:2.6rem;}
.diamond-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.diamond-card{background:var(--ivory);padding:1.6rem 1.4rem;display:flex;flex-direction:column;}
.diamond-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:var(--ink);margin-bottom:.3rem;letter-spacing:.02em;}
.diamond-weight{font-family:'Inter',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.7rem;}
.diamond-card p{font-family:'EB Garamond',Georgia,serif;font-size:.93rem;line-height:1.7;color:var(--ink-soft);}
.diamond-card-where{margin-top:.7rem;font-family:'Inter',sans-serif;font-size:.58rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
.h-entry:nth-child(even) .h-figure{order:1;}
.h-body > p:first-of-type::first-letter{font-family:'Cormorant Garamond',serif;font-size:3rem;float:left;line-height:.9;padding:.06em .14em 0 0;color:var(--gold-deep);font-weight:500;}
.city-strip-nav{background:var(--cream);padding:.9rem 2rem;text-align:center;border-bottom:1px solid var(--rule);}
.city-strip-nav a{font-family:'Inter',sans-serif;font-size:.62rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);text-decoration:none;transition:color .2s;}
.city-strip-nav a:hover{color:var(--gold-deep);}
@media (max-width:880px){
      .city-hero{min-height:380px;padding:4rem 1.4rem 2.6rem;}
      .h-entry{grid-template-columns:1fr;gap:1.6rem;padding:2.4rem 1.2rem;}
      .h-entry:nth-child(even) .h-text{order:0;}
      .h-entry:nth-child(even) .h-figure{order:0;}
      .h-wrap{padding:0 0 2rem;}
      nav{padding:0 1.2rem;}
      .nav-links{gap:1rem;}
      .nav-links a{font-size:.6rem;letter-spacing:.14em;}
      footer{padding:3rem 1.4rem 2.4rem;}
      .h-aside{position:static;}
    }
@media (max-width:1024px) and (min-width:881px) {
      .h-entry { padding:2.6rem 1.6rem; gap:2rem; }
    }
.chrono { max-width:1100px; margin:5rem auto 0; padding:0 1.4rem; }
.chrono-title { text-align:center; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin-bottom:.4rem; letter-spacing:.04em; }
.chrono-sub { text-align:center; font-style:italic; color:var(--ink-faint); margin-bottom:2.2rem; font-size:.95rem; }
.chrono-name { font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--ink); }
.cards-heading { text-align:center; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin-bottom:.4rem; letter-spacing:.04em; }
.cards-sub { text-align:center; font-style:italic; color:var(--ink-faint); margin-bottom:2.4rem; font-size:.95rem; }
.closing { max-width:760px; margin:0 auto; padding:4rem 1.4rem 5rem; text-align:center; font-style:italic; color:var(--ink-soft); font-size:1.02rem; line-height:1.85; }
.subnav .mid { text-align:center; }
@media(max-width:600px){ .subnav{grid-template-columns:1fr;} .subnav .next, .subnav .mid { text-align:left; } }
.index-intro { max-width:760px; margin:0 auto; padding:3rem 1.4rem 2rem; }
.index-intro p { font-family:'EB Garamond',Georgia,serif; font-size:1.07rem; line-height:1.85; color:var(--ink-soft); margin-bottom:1.3rem; }
.index-intro p em { color:var(--gold-deep); font-style:italic; }
.article-intro p:first-of-type::first-letter { font-family:'Cormorant Garamond',serif; font-size:3rem; float:left; line-height:.9; padding:.06em .14em 0 0; color:var(--gold-deep); font-weight:500; }
.entry-eyebrow { font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.7rem; }
.entry-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:500; color:var(--ink); letter-spacing:.03em; margin-bottom:.4rem; }
.entry-tag { font-family:'EB Garamond',serif; font-style:italic; font-size:.92rem; color:var(--ink-faint); margin-bottom:.9rem; }
.entry-text { font-family:'EB Garamond',serif; font-size:.96rem; line-height:1.75; color:var(--ink-soft); flex:1; }
.section-wrap { max-width:1400px; margin:0 auto; padding:4rem 1.4rem; }
.section-wrap.narrow { max-width:780px; }
.section-wrap h2.sec-title { text-align:center; }
.section-wrap .sec-label { text-align:center; }
.section-intro { font-family:'EB Garamond',Georgia,serif; font-style:italic; color:var(--ink-faint); max-width:620px; margin:.8rem auto 2.4rem; line-height:1.85; font-size:.98rem; text-align:center; }
.prose p { font-family:'EB Garamond',Georgia,serif; font-size:1.05rem; line-height:1.85; color:var(--ink-soft); margin-bottom:1.2rem; }
.prose em { color:var(--gold-deep); font-style:italic; }
.silsila-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; margin-top:2rem; }
.silsila-card { background:var(--cream); border:1px solid var(--rule); padding:1.8rem 1.6rem; }
.silsila-name { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:600; color:var(--ink); letter-spacing:.04em; margin-bottom:.3rem; }
.silsila-urdu { font-family:'Lateef',serif; font-size:1.4rem; color:var(--gold-deep); margin-bottom:.6rem; }
.silsila-founder { font-family:'EB Garamond',Georgia,serif; font-style:italic; color:var(--ink-faint); font-size:.92rem; margin-bottom:.9rem; }
.silsila-text { font-family:'EB Garamond',Georgia,serif; font-size:.95rem; line-height:1.65; color:var(--ink-soft); }
.silsila-text em { color:var(--gold-deep); font-style:italic; }
.note-card { max-width:980px; margin:2rem auto 4rem; padding:2rem 2rem; background:var(--cream); border-left:3px solid var(--gold); }
.note-card-label { font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:.7rem; }
.note-card-body { font-family:'EB Garamond',Georgia,serif; font-size:1rem; line-height:1.85; color:var(--ink-soft); }
.note-card-body em { color:var(--gold-deep); font-style:italic; }

/* ── normalized cover hero (generator) ── */
.city-hero{background:#1A1814 center/cover no-repeat;background-image:linear-gradient(180deg,rgba(26,24,20,0.42) 0%,rgba(26,24,20,0.60) 55%,rgba(26,24,20,0.88) 100%),var(--cover,url('/assets/dakhni-pattern.webp'));}
/* Pages with no real cover photo (--cover falls back to the same pattern tile
   used below) used to layer that pattern in twice: once here as a fake
   "photo" at full strength, and again via .city-hero::after's subtle 0.10
   texture -- two copies of the same artwork at different tile sizes fighting
   each other and muddying the title text. Drop the fake-photo layer and let
   a plain dark gradient carry it; ::after still supplies one clean, subtle
   texture pass. */
.city-hero.page-hero--pattern{background:#1A1814;background-image:linear-gradient(180deg,rgba(26,24,20,0.35) 0%,rgba(26,24,20,0.72) 100%);background-size:cover;background-repeat:no-repeat;background-position:center;}

/* ── progressive enhancement: never hide content if JS is absent/slow ── */

/* ── homepage heartland city grid (component) ── */
.heartland { background:var(--cream); padding:2.2rem 2rem 2.6rem; border-bottom:1px solid var(--rule); text-align:center; }
.heartland-label { font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:1.1rem; }
.heartland-grid { list-style:none; margin:0 auto; padding:0; max-width:1400px; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.heartland-grid > li { display:flex; }
@media(max-width:760px){ .heartland-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:auto; } }
.heartland-city { display:flex; flex-direction:column; justify-content:center; width:100%; background:var(--ivory); padding:1.1rem .8rem; text-decoration:none; color:inherit; transition:background .25s; }
.heartland-city:hover { background:#fff; }
.hc-name { display:block; font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:500; color:var(--ink); letter-spacing:.02em; }
.hc-era { display:block; margin-top:.35rem; font-family:'Inter',sans-serif; font-size:.55rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

/* ── Quiz: intro panel (single-column centred) ── */
.quiz-intro-panel { max-width:680px; margin:0 auto; text-align:center; padding:1rem 2rem 2rem; }
.quiz-intro-panel .quiz-title { text-align:center; }
.quiz-intro-panel .quiz-body { max-width:500px; margin:0 auto; }
.quiz-topic-grid { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1.8rem auto 2.5rem; max-width:520px; }
.quiz-topic { font-family:'Inter',sans-serif; font-size:.8rem; font-weight:400; letter-spacing:.02em; padding:.5rem .9rem; border:1px solid var(--rule); color:var(--ink-soft); background:var(--cream); }
.quiz-start-btn { margin-top:.5rem; }

/* ── Quiz: interactive states ── */
.quiz-opt--static { cursor:default; pointer-events:none; opacity:.82; }
.quiz-opt.correct { background:#1d5c1d; color:#fff; border-left-color:#1d5c1d; border-color:#1d5c1d; }
.quiz-opt.wrong   { background:#7a1c1c; color:#fff; border-left-color:#7a1c1c; border-color:#7a1c1c; }
.quiz-opt[disabled] { cursor:default; }
.quiz-stage { max-width:680px; margin:0 auto; padding:3rem 2rem 1rem; }
.quiz-progress-wrap { margin-bottom:1.8rem; }
.quiz-progress-label { display:block; font-family:'Inter',sans-serif; font-size:.68rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.6rem; }
.quiz-bar { height:3px; background:var(--rule); border-radius:2px; overflow:hidden; }
.quiz-bar-fill { height:100%; background:var(--gold-deep); transition:width .35s ease; width:0; }
.quiz-next-wrap { display:flex; justify-content:flex-end; padding-top:1rem; }
.quiz-result-panel { text-align:center; padding:4rem 2rem 3rem; max-width:520px; margin:0 auto; }
.quiz-score-wrap { display:flex; align-items:baseline; gap:.4rem; justify-content:center; margin-bottom:1rem; }
.quiz-score-num { font-family:'Cormorant Garamond',serif; font-size:5rem; font-weight:600; color:var(--gold-deep); line-height:1; }
.quiz-score-denom { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--ink-faint); }
.quiz-score-breakdown { font-family:'Inter',sans-serif; font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.8rem; }
.quiz-score-comment { font-style:italic; font-size:1.1rem; color:var(--ink-soft); margin-bottom:0; line-height:1.7; }

/* ── Mobile UX pass: stop stacked wrapper padding from eating the small screen ──
   Several sections nest a padded outer wrapper around a padded inner block
   (e.g. .dynasties-sec > .card-grid-wrap, .quiz-wrap > .quiz-intro-panel,
   .grid-wrap > .card-grid-wrap). On desktop the extra inset is invisible
   against the wide max-widths; on a ~360-430px phone it doubles up and
   pushes real content into a narrow center column. Below, the outer wrapper
   keeps its padding and the inner block goes flush to it. Sections that
   still had no mobile padding at all (chrono, diamonds, timeline, comments,
   pull-quote, note card, poetry, heartland) get one, matching the ~1.2rem
   inset already used by .article/.h-entry.

   Second pass: the desktop vertical rhythm (3-4rem section padding, 6rem
   card-grid-wrap bottom margin, plain <br> tags used as spacers in
   content/home.json) reads fine on a tall desktop viewport but costs a
   disproportionate amount of scroll on a ~700-900px-tall phone, and several
   "-intro" wrappers had no mobile reduction at all while their siblings
   did — an inconsistent rhythm from section to section. Tightened both. */
@media (max-width:600px) {
  .grid-wrap { padding-left:0; padding-right:0; }
  .dynasties-sec { padding:2.4rem 1.1rem; }
  .dynasties-inner > .card-grid-wrap { padding-left:0; padding-right:0; }
  .card-grid-wrap { padding:1.6rem 1.1rem 0; margin-bottom:2.2rem; }
  .quiz-wrap { padding:2rem 1.2rem; }
  .quiz-intro-panel, .quiz-stage, .quiz-result-panel { padding:.5rem 0; }
  .facts-strip { grid-template-columns:repeat(2,1fr); padding:1.4rem 1.1rem; gap:1.1rem .9rem; }
  .chrono-wrap { padding:2.4rem 1.2rem 2.6rem; }
  .diamonds-wrap { padding:2.4rem 1.2rem 1.2rem; }
  .timeline-wrap { padding:2.4rem 1.2rem; }
  .comments-wrap { padding:2.4rem 1.2rem 3rem; }
  .h-pull { padding:1.6rem 1.2rem; margin:2.4rem auto; }
  .note-card { padding:1.4rem 1.2rem; }
  .poetry-wrap { padding:0 1.2rem 2rem; }
  .lang-panel { padding:1.8rem 1.4rem 1.4rem; }
  .heartland { padding:1.8rem 1.2rem 2.2rem; }
  .pillars-wrap { padding:2.2rem 1rem 2.4rem; }
  .pillars-hdr { margin-bottom:1.8rem; }
  .diamond-rule { margin:1.5rem auto; }
  .timeline-hdr { margin-bottom:1.8rem; }
  .comments-hdr { margin-bottom:1.8rem; }
  .diamonds-hdr { margin-bottom:1.8rem; }
  .chrono-sub, .cards-sub { margin-bottom:1.6rem; }
  .intro-wrap { padding:2rem 1.4rem 1.6rem; }
  .article-intro { padding:2rem 1.4rem 1.6rem; }
  .index-intro { padding:2rem 1.4rem 1.6rem; }
  .closing { padding:2.2rem 1.4rem 2.6rem; }

  /* The homepage hero kept its desktop padding (7rem/6rem) and full-size
     seal image on every screen, so on a phone the "Explore Heritage" /
     "Deccan Trivia" buttons landed below the fold — a first-time visitor
     had to scroll before seeing any call to action. Compressed the whole
     hero stack so title, tagline and both buttons fit in one screen. */
  .hero { padding:2.2rem 1.4rem 2rem; }
  .seal-img { width:68px; height:68px; margin-bottom:.9rem; }
  .hero-rule { margin:.9rem auto; }
  .hero-subtitle { margin-top:.6rem; }
  .hero-desc { margin-top:1.1rem; }
  .hero-btns { margin-top:1.6rem; }
}

/* Dark mode: the handful of surfaces that hardcode a literal light color
   instead of referencing the swappable role variables above (translucent
   nav backdrops need actual transparency, not a variable; a couple of
   interactive states were pinned to literal white/black). Kept as one
   block, last in the cascade, so these always win over the light-mode
   values defined earlier regardless of selector specificity. */
@media (prefers-color-scheme:dark){
  nav { background:var(--ivory); }
  .nav-links { background:var(--ivory); }
  .dropdown { background:var(--ivory); box-shadow:0 10px 30px rgba(0,0,0,0.45); }
  .ds-search-backdrop { background:rgba(0,0,0,0.6); }
  .quiz-opt.sel { background:#2A2519; }
  .heartland-city:hover { background:#2A2519; }
  /* The seal watermark is black line-art on a white JPG, faked-transparent
     with multiply -- that only works on a light page (multiply toward
     black on an already-dark page just goes to black and disappears).
     Inverting first (white lines on black) then screening reproduces the
     same "ghost" effect against a dark background. */
  .dynasties-seal-bg { filter:invert(1); mix-blend-mode:screen; }
}

/* Glossary: generated from structured entries in content/glossary.json. */
.glossary-wrap { max-width:1000px; margin:0 auto; padding:3rem 2rem 5rem; }
.glossary-lede { max-width:720px; margin:0 0 2rem; color:var(--ink-soft); font-size:1.1rem; line-height:1.75; }
.glossary-az { position:static; z-index:auto; top:auto; height:auto; min-height:0; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:.45rem; padding:0 0 1.8rem; border-bottom:1px solid var(--rule); }
.glossary-az a { display:inline-flex; justify-content:center; align-items:center; width:2.3rem; height:2.3rem; border:1px solid var(--rule); color:var(--ink); font-family:'Inter',sans-serif; font-size:.8rem; text-decoration:none; }
.glossary-az a:hover, .glossary-az a:focus-visible { border-color:var(--gold-deep); color:var(--gold-deep); }
.glossary-group { display:grid; grid-template-columns:90px minmax(0,1fr); gap:1.5rem; padding-top:2.8rem; }
.glossary-group > h2 { margin:0; color:var(--gold-deep); font-family:'Cormorant Garamond',serif; font-size:4rem; font-weight:400; line-height:1; }
.glossary-list { margin:0; min-width:0; }
.glossary-entry { padding:0 0 1.7rem; margin-bottom:1.7rem; border-bottom:1px solid var(--rule); scroll-margin-top:5rem; }
.glossary-entry dt { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:600; line-height:1.15; color:var(--ink); }
.glossary-entry dd { margin:0; }
.glossary-meta { display:block; margin:.3rem 0 .75rem; font-family:'Inter',sans-serif; font-size:.69rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep); }
.glossary-entry p { margin:.55rem 0; line-height:1.7; color:var(--ink-soft); }
.glossary-entry .glossary-etymology { padding:.75rem 1rem; background:var(--cream); }
.glossary-entry strong { color:var(--ink); font-family:'Inter',sans-serif; font-size:.75rem; letter-spacing:.04em; margin-right:.35rem; }
.glossary-related { font-size:.9rem; }
.glossary-related a, .glossary-note a { color:var(--gold-deep); text-underline-offset:3px; }
.glossary-related a:hover, .glossary-note a:hover { text-decoration-thickness:2px; }
.glossary-note { border-top:1px solid var(--rule); padding-top:1.5rem; color:var(--ink-soft); font-size:.9rem; line-height:1.7; }
@media(max-width:600px) { .glossary-wrap { padding:2rem 1.2rem 3rem; } .glossary-az { padding:0 0 1.8rem; min-height:0; align-items:flex-start; } .glossary-group { grid-template-columns:1fr; gap:.75rem; padding-top:2rem; } .glossary-group > h2 { font-size:3rem; } .glossary-entry dt { font-size:1.8rem; } }