/* Katibe: a hey'at cloth banner whose fabric follows the Shia calendar; the reading column below stays plain.
   Loads after the shared /Themes/Shared/site.css (content compatibility) and restyles everything visible.
   Rules: two inks per cloth (cloth + thread), no greys or gradients in the frame; colour names the occasion,
   links keep one ink; state is a mark, never a hue; one module (12px, the fringe pitch) sets the rhythm. */

@font-face {
  font-family:"Amiri Katibe";
  src:url("/Assets/fonts/Amiri-Bold-fa.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap
}

html.katibe {
  --m:12px;
  --kb-ground:#fcfbf9;
  --kb-ink:#1c1916;
  --kb-muted:#5c5650;
  --kb-rule:#e3dfd8;
  --kb-tint:#f3f1ec;
  --kb-link:#1f4aa3;
  --kb-link-hover:#163a85;
  --kb-lettering:"Amiri Katibe", var(--font-persian);
  --kb-column:42rem;
  --kb-rail:17rem;
  /* the shared stylesheet's tokens, so content blocks follow this world */
  --ink:var(--kb-ink);
  --muted:var(--kb-muted);
  --teal:var(--kb-link);
  --teal-hover:var(--kb-link-hover);
  --accent:var(--kb-ink);
  --paper:var(--kb-ground);
  --line:var(--kb-rule);
  --surface:var(--kb-ground);
  --surface-2:var(--kb-tint);
  --surface-3:var(--kb-tint);
  --card-image:var(--kb-tint);
  --on-teal:#fff;
  --button-border:var(--kb-ink);
  --input-border:#a8a097;
  --crumb-sep:#8d857b;
  --focus:var(--kb-link);
  --note:var(--kb-muted);
  --overlay:rgba(20,16,12,.5);
  --tag-bg:transparent;
  --tag-ink:var(--kb-muted);
  /* ordinary days: indigo cloth, gold thread */
  --cloth:#1d2950;
  --thread:#e3b341;
  --fringe:#e3b341;
  color-scheme:light;
  scrollbar-color:var(--cloth) var(--kb-ground)
}
html.katibe.cloth-mourning {
  --cloth:#15110e;
  --thread:#ece4d3;
  --fringe:#15110e
}
html.katibe.cloth-celebration {
  --cloth:#0d5a42;
  --thread:#edc04a;
  --fringe:#edc04a
}

html.katibe body.site {
  background:var(--kb-ground);
  color:var(--kb-ink);
  font-size:16px;
  line-height:1.9;
  caret-color:var(--kb-link)
}
html.katibe ::selection {
  background:var(--cloth);
  color:var(--thread)
}
html.katibe a:hover {
  color:var(--kb-link)
}
html.katibe a:focus-visible,html.katibe button:focus-visible,html.katibe input:focus-visible,html.katibe textarea:focus-visible,html.katibe select:focus-visible {
  outline:2px solid var(--kb-link);
  outline-offset:3px
}
html.katibe .container {
  width:min(1180px,calc(100% - 40px))
}
.skip-link:focus {
  background:var(--cloth);
  color:var(--thread)
}

/* ===== Banner ===== */
.kb-banner {
  position:relative;
  z-index:40
}
.kb-cloth {
  display:flow-root; /* keeps the panel's bottom margin inside the cloth, so the fringe hangs flush from it */
  background:var(--cloth);
  color:var(--thread)
}
.kb-cloth a:hover {
  color:var(--thread)
}
html.katibe .kb-cloth :focus-visible {
  outline-color:var(--thread)
}
.kb-bar {
  display:flex;
  align-items:center;
  gap:var(--m);
  min-height:56px
}
.kb-wordmark {
  font-family:var(--kb-lettering);
  font-weight:700;
  font-size:30px;
  line-height:1;
  padding-top:6px;
  color:var(--thread);
  white-space:nowrap
}
.kb-date {
  display:none;
  font-size:12px
}
.kb-date span {
  color:inherit!important
}
.kb-chip {
  font-size:12px;
  font-weight:700;
  padding:2px 10px;
  border:1px dashed var(--thread);
  color:var(--thread)
}
.kb-tools {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:2px
}
.kb-tool {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:44px;
  min-height:44px;
  padding:0 8px;
  background:none;
  border:0;
  color:var(--thread);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer
}
.kb-tool svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round
}
.kb-tools .theme-switch {
  border:1px solid var(--thread);
  border-radius:0;
  background:transparent;
  margin-inline-end:4px
}
.kb-tools .theme-switch button {
  width:34px;
  min-width:34px;
  min-height:34px;
  color:var(--thread)
}
.kb-tools .theme-switch button.is-active,.kb-tools .theme-switch button.is-active:hover {
  background:var(--thread);
  color:var(--cloth)
}
.kb-tools .theme-switch .material-symbols-outlined {
  font-size:19px
}
.kb-panel {
  border-block:1.5px dashed var(--thread);
  padding:10px 0 12px;
  margin-bottom:calc(var(--m) - 2px);
  text-align:center
}
.kb-occasion {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin:0;
  color:var(--thread)
}
.kb-occasion b {
  font-family:var(--kb-lettering);
  font-weight:700;
  font-size:clamp(25px,6.6vw,46px);
  line-height:1.5
}
.kb-occasion span {
  font-size:13px;
  font-weight:700
}
a.kb-occasion:hover b {
  text-decoration:underline dashed 1.5px;
  text-underline-offset:10px
}
.kb-fringe {
  display:block;
  width:100%;
  height:18px;
  margin-top:-1px
}
.kb-fringe path {
  fill:var(--fringe)
}

/* Navigation: a row under the fringe on desktop, a full-screen cloth sheet on phones. */
.kb-menu {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0 28px;
  min-height:52px;
  font-size:15px;
  font-weight:700
}
.kb-menu>a {
  padding:12px 0;
  color:var(--kb-ink);
  border-bottom:2px solid transparent
}
.kb-menu>a:hover {
  color:var(--kb-link)
}
.kb-menu>a[aria-current=page] {
  border-bottom:2px dashed currentColor
}
.kb-menu-head,.kb-menu-button {
  display:none
}
.kb-nav {
  border-bottom:1px solid var(--kb-rule)
}
@media (min-width:640px) {
  .kb-date {
    display:inline
  }
}
@media (min-width:900px) {
  .kb-bar {
    min-height:64px
  }
  .kb-wordmark {
    font-size:36px
  }
  .kb-panel {
    padding:16px 0 18px
  }
  .kb-fringe {
    height:22px
  }
  .kb-menu-aside {
    margin-inline-start:12px;
    padding-inline-start:28px!important;
    border-inline-start:1px solid var(--kb-rule)
  }
}
@media (max-width:899px) {
  .kb-menu-button {
    display:inline-flex
  }
  .kb-nav {
    border:0
  }
  .kb-menu {
    display:none
  }
  html.katibe .kb-menu.is-open {
    position:fixed;
    inset:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    width:auto;
    margin:0;
    padding:0 24px 36px;
    overflow-y:auto;
    background:var(--cloth);
    color:var(--thread);
    font-size:20px
  }
  .kb-menu.is-open .kb-menu-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:56px;
    margin-bottom:var(--m);
    border-bottom:1.5px dashed var(--thread)
  }
  .kb-menu.is-open>a {
    padding:10px 0;
    color:var(--thread);
    border:0
  }
  .kb-menu.is-open>a[aria-current=page] {
    text-decoration:underline dashed 1.5px;
    text-underline-offset:10px
  }
}

/* ===== Page body ===== */
.kb-main {
  padding-block:20px 48px
}
html.katibe .breadcrumbs {
  font-size:12.5px;
  color:var(--kb-muted);
  margin:0 0 var(--m);
  padding:0;
  background:none;
  border:0
}
html.katibe .breadcrumbs a {
  color:var(--kb-muted)
}
html.katibe .breadcrumbs a:hover {
  color:var(--kb-link)
}

html.katibe .solid-button,html.katibe .outline-button {
  border-radius:0;
  gap:10px;
  font-size:14px
}
html.katibe .solid-button {
  background:var(--kb-ink);
  border-color:var(--kb-ink);
  color:var(--kb-ground)
}
html.katibe .solid-button:hover {
  background:var(--kb-link);
  border-color:var(--kb-link);
  color:#fff
}
html.katibe .outline-button {
  border-color:var(--kb-ink);
  color:var(--kb-ink)
}
html.katibe .page-content input:not([type=hidden]),html.katibe .page-content textarea,html.katibe .page-content select {
  border-radius:0
}

/* ===== Reading page: article, news, special-issue piece ===== */
html.katibe .page-content:has(#article_content),html.katibe .page-content:has(#news_content) {
  max-width:none
}
.kb-main:has(#article_content) {
  display:grid;
  grid-template-columns:minmax(0,var(--kb-column));
  justify-content:center
}
.kb-main:has(#article_content)>* {
  grid-column:1;
  min-width:0
}
html.katibe #article_content {
  display:contents
}
html.katibe #article_content>* {
  grid-column:1;
  min-width:0
}
html.katibe .article-header {
  margin:0 0 calc(var(--m) * 2)
}
html.katibe .page-title {
  margin:4px 0 10px;
  font-size:25px;
  line-height:1.65;
  font-weight:700
}
html.katibe .page-title span,html.katibe .page-title label {
  line-height:1.65;
  font-weight:700!important
}
html.katibe .article-meta {
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  font-size:13px;
  color:var(--kb-muted)
}
html.katibe .article-meta span {
  font-size:13px!important;
  font-weight:400!important
}
.article-issue {
  margin:6px 0 0;
  font-size:14px;
  color:var(--kb-muted)
}
.article-issue a {
  color:var(--kb-link);
  font-weight:700
}
.article-issue-jump {
  margin-inline-start:14px;
  font-weight:400!important;
  white-space:nowrap
}
.article-issue-jump::after {
  content:" \2193"
}
html.katibe .calendar-badge {
  border-radius:0;
  box-shadow:none
}

/* The column: a reading face at a real measure, nothing behind the text. */
html.katibe .article-prose,html.katibe .news-lead,html.katibe #article_content>span {
  font-size:17px;
  line-height:2.05
}
html.katibe #article_content span:not(.honorific),html.katibe #article_content font {
  font-size:inherit!important
}
html.katibe #article_content .article-copy {
  text-align:start
}
html.katibe #article_content p {
  margin-bottom:1em
}
html.katibe #article_content h2,html.katibe #article_content .article-x h2 {
  font-size:21px;
  line-height:1.7;
  color:var(--kb-ink);
  border:0;
  padding:0;
  margin:2.2em 0 .5em
}
html.katibe #article_content h3 {
  font-size:18px;
  line-height:1.7;
  margin:1.8em 0 .4em
}
html.katibe #article_content a,html.katibe #article_content a span {
  color:var(--kb-link)!important;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}
html.katibe #article_content img,
html.katibe #article_content .article-copy img,
html.katibe #article_content.vizhe-article .article-copy img,
html.katibe #article_content img.article-inline-photo,
html.katibe #article_content.vizhe-article img.article-inline-photo {
  border-radius:0!important;
  box-shadow:none!important;
  border:0!important
}
html.katibe #article_content.vizhe-article img.article-inline-photo {
  margin:0 0 calc(var(--m) * 2)!important
}
html.katibe .news-detail-photo {
  border-radius:0;
  max-height:none;
  aspect-ratio:16/9;
  margin-bottom:calc(var(--m) * 2)
}
html.katibe .news-lead {
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0 0 1em;
  font-weight:700
}
@media (max-width:639px) {
  html.katibe #article_content .article-copy img,html.katibe #article_content img.article-inline-photo {
    float:none!important;
    width:100%!important;
    max-width:100%!important;
    margin:var(--m) 0 calc(var(--m) * 2)!important
  }
  html.katibe #article_content .article-copy a:has(> img) {
    display:block;
    width:100%;
    max-width:100%;
    margin:var(--m) 0
  }
}

html.katibe .honorific,
html.katibe #article_content .honorific,
html.katibe #article_content span.honorific,
html.katibe #news_content span.honorific,
html.katibe .page-title .honorific,
html.katibe .page-title span.honorific {
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  color:var(--kb-muted)!important;
  font-size:.72em!important;
  font-weight:400!important;
  vertical-align:baseline
}

/* Editor blocks stored in articles: same classes, this world's rules (stitch lines, no tinted cards). */
html.katibe nav.toc,html.katibe .article-x .toc,html.katibe #article_content .article-x .toc {
  background:none;
  border:1.5px dashed var(--kb-ink);
  border-radius:0;
  padding:var(--m) 18px;
  margin:calc(var(--m) * 2) 0
}
html.katibe nav.toc .toc-title,html.katibe .toc .toc-title,html.katibe #article_content .article-x .toc p {
  color:var(--kb-ink);
  font-size:14px
}
html.katibe nav.toc a {
  text-decoration:none
}
html.katibe blockquote.hadith,html.katibe blockquote.riwayat,html.katibe #article_content .article-x blockquote.riwayat {
  background:none;
  border:0;
  border-block:1px solid var(--kb-rule);
  border-radius:0;
  padding:var(--m) 0;
  margin:calc(var(--m) * 2) 0;
  font-size:19px;
  color:var(--kb-ink)
}
html.katibe blockquote.ayah {
  background:none;
  border:0;
  border-block:1.5px dashed var(--kb-ink);
  border-radius:0;
  padding:var(--m) 0;
  margin:calc(var(--m) * 2) 0;
  color:var(--kb-ink)
}
html.katibe blockquote.ayah>p:first-child::before,html.katibe blockquote.ayah>p:first-child::after {
  color:var(--kb-muted)
}
html.katibe blockquote .tr,html.katibe .ayah .ref,html.katibe .hadith .ref,html.katibe .riwayat .ref,html.katibe #article_content .article-x .src {
  color:var(--kb-muted)
}
html.katibe .poem h2,html.katibe #article_content .poem h2 {
  color:var(--kb-ink)
}
html.katibe .poem p.stanza,html.katibe #article_content .poem p.stanza,html.katibe .article-x .story,html.katibe #article_content .article-x .story {
  background:none;
  border:0;
  border-radius:0;
  padding:var(--m) 0
}
html.katibe #article_content .article-refs {
  background:none;
  border-radius:0;
  border-top:1.5px dashed var(--kb-ink);
  padding:var(--m) 0 0
}

/* ===== Issue contents: the one reversed cloth strip, rows stitched apart, read pieces marked ===== */
html.katibe .vizhe-pages {
  margin:calc(var(--m) * 3) 0;
  padding:0;
  border:0;
  background:none
}
html.katibe .vizhe-pages h2,html.katibe #article_content .vizhe-pages h2 {
  margin:0;
  padding:8px 14px 6px;
  background:var(--cloth);
  color:var(--thread);
  font-family:var(--kb-lettering);
  font-size:21px;
  line-height:1.6;
  scroll-margin-top:var(--m)
}
html.katibe .vizhe-page-list {
  display:block;
  margin:0;
  border-bottom:1.5px dashed var(--kb-ink)
}
html.katibe .vizhe-page-card {
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  padding:0;
  margin:0
}
html.katibe .vizhe-page-card:hover {
  background:none;
  box-shadow:none;
  transform:none
}
html.katibe .vizhe-page-card+.vizhe-page-card {
  border-top:1px dashed var(--kb-rule)
}
html.katibe #article_content .vizhe-page-card a {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:0 var(--m);
  padding:var(--m) 4px;
  color:var(--kb-ink)!important;
  text-decoration:none
}
html.katibe #article_content .vizhe-page-index {
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--kb-muted);
  font-size:15px!important;
  font-weight:700;
  line-height:1.9
}
html.katibe #article_content .vizhe-page-card h3 {
  margin:0;
  font-size:15px;
  line-height:1.9
}
html.katibe #article_content .vizhe-page-card h3 span:not(.honorific) {
  font-size:15px!important
}
html.katibe #article_content.vizhe-article .vizhe-page-card p {
  display:none
}
html.katibe #article_content.vizhe-issue .vizhe-page-card p {
  margin:2px 0 0;
  color:var(--kb-muted);
  font-size:14px;
  line-height:1.9
}
html.katibe #article_content.vizhe-issue .vizhe-page-card p span:not(.honorific) {
  font-size:14px!important
}
@media (max-width:1099px) {
  html.katibe .vizhe-page-list.is-collapsed .vizhe-page-card:nth-child(n+9) {
    display:none
  }
}
html.katibe .vizhe-pages-more {
  width:100%;
  margin-top:var(--m)
}
html.katibe .vizhe-pages-more[hidden] {
  display:none
}
html.katibe .vizhe-page-go {
  display:none
}
html.katibe .vizhe-page-card:hover h3,html.katibe .vizhe-page-card a:focus-visible h3 {
  color:var(--kb-link);
  text-decoration:underline;
  text-underline-offset:5px
}
html.katibe #article_content .vizhe-page-card a.is-read .vizhe-page-index {
  color:transparent;
  background:var(--kb-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='3 2.2'/%3E%3C/svg%3E") center/18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='3 2.2'/%3E%3C/svg%3E") center/18px no-repeat
}

/* ===== Reading path «مطالب بیشتر» ===== */
html.katibe .related-path {
  margin:calc(var(--m) * 3) 0;
  padding:0;
  background:none;
  border:0;
  border-radius:0
}
html.katibe .related-path h2 {
  font-size:17px;
  margin:0;
  padding-bottom:8px;
  border-bottom:1.5px dashed var(--kb-ink)
}
html.katibe .related-path ol {
  display:block;
  overflow:visible;
  padding:0
}
html.katibe .related-path ol::before {
  display:none
}
html.katibe .related-path li {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:0 var(--m);
  padding:var(--m) 4px;
  border:0;
  border-radius:0;
  border-bottom:1px dashed var(--kb-rule)
}
html.katibe .related-path-n {
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:none!important;
  color:var(--kb-muted)!important;
  font-size:15px;
  line-height:1.9;
  display:block
}
html.katibe .related-path a {
  font-size:15px;
  line-height:1.9;
  font-weight:700;
  color:var(--kb-ink)
}
html.katibe .related-path li:hover a,html.katibe .related-path li:focus-within a {
  color:var(--kb-link)
}
html.katibe .related-path li:hover .related-path-body {
  transform:none
}
html.katibe .related-path-thumb,html.katibe .page-content .related-path img.related-path-thumb {
  border-radius:0;
  margin-bottom:6px
}
html.katibe .related-path-ribbon {
  background:none;
  color:var(--kb-muted);
  padding:0;
  border-radius:0;
  font-size:12px;
  font-weight:700
}
html.katibe .related-path-thumb,html.katibe .page-content .related-path img.related-path-thumb,html.katibe .related-path-tile {
  display:none
}

/* ===== Comments ===== */
html.katibe .comments {
  margin-top:calc(var(--m) * 3)
}
html.katibe .comments-head {
  border-bottom:1.5px dashed var(--kb-ink)
}
html.katibe .comment-count:not([hidden]) {
  border-radius:0;
  background:none;
  color:var(--kb-muted);
  padding:0
}
html.katibe .comment-thread {
  gap:0
}
html.katibe .comment-card {
  background:none;
  border:0;
  border-bottom:1px dashed var(--kb-rule);
  border-radius:0;
  padding:var(--m) 0 calc(var(--m) + 4px)
}
html.katibe .comment-avatar {
  border-radius:0;
  background:var(--kb-tint);
  color:var(--kb-ink)
}
html.katibe .comment-card strong {
  color:var(--kb-ink)
}
html.katibe .comment-empty,html.katibe .comment-form {
  border-radius:0;
  background:none;
  border:1px dashed var(--kb-rule)
}
html.katibe .comment-form input:not([type=hidden]),html.katibe .comment-form textarea {
  border-radius:0!important;
  background:#fff!important
}

/* ===== Desktop: the reading column with the issue contents / reading path in a sticky rail ===== */
@media (min-width:1100px) {
  html.katibe .page-title {
    font-size:34px;
    line-height:1.6
  }
  html.katibe .article-prose,html.katibe .news-lead {
    font-size:18px
  }
  .kb-main:has(.vizhe-article .vizhe-pages,.related-path) {
    grid-template-columns:minmax(0,var(--kb-column)) var(--kb-rail);
    column-gap:72px
  }
  #main-content #article_content.vizhe-article>.vizhe-pages,
  #main-content:not(:has(.vizhe-pages))>.related-path {
    grid-column:2;
    grid-row:1 / span 6;
    align-self:start;
    position:sticky;
    top:var(--m);
    max-height:calc(100vh - var(--m) * 2);
    overflow-y:auto;
    margin:0;
    scrollbar-width:thin;
    scrollbar-color:var(--kb-rule) transparent
  }
  html.katibe .kb-main .vizhe-pages-more,html.katibe .article-issue-jump {
    display:none
  }
}

/* ===== Footer ===== */
.kb-footer {
  margin-top:calc(var(--m) * 2);
  padding:calc(var(--m) * 3) 0 calc(var(--m) * 2);
  border-top:1.5px dashed var(--kb-ink);
  font-size:14px
}
.kb-footer-grid {
  display:grid;
  gap:calc(var(--m) * 2)
}
.kb-footer .kb-wordmark {
  color:var(--kb-ink);
  font-size:34px
}
.kb-footer .kb-tagline {
  font-family:var(--kb-lettering);
  font-size:19px;
  margin:10px 0 4px
}
.kb-footer p {
  color:var(--kb-muted);
  max-width:28rem
}
.kb-footer h2 {
  font-size:14px;
  margin:0 0 6px
}
.kb-footer-grid>div>a:not(.kb-wordmark) {
  display:block;
  padding:5px 0;
  color:var(--kb-ink)
}
.kb-footer-grid>div>a:not(.kb-wordmark):hover {
  color:var(--kb-link)
}
.kb-copy {
  margin-top:calc(var(--m) * 2);
  font-size:12px;
  color:var(--kb-muted)
}
@media (min-width:720px) {
  .kb-footer-grid {
    grid-template-columns:2fr 1fr 1fr
  }
}

/* ===== Special issue page: its contents are the page, not a rail ===== */
html.katibe #article_content img.vizhe-issue-cover {
  float:none!important;
  display:block;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:16/9;
  object-fit:cover;
  margin:0 0 calc(var(--m) * 2)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}
html.katibe #article_content.vizhe-issue .vizhe-pages {
  margin-top:calc(var(--m) * 2)
}

/* ===== Homepage ===== */
.kh {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:calc(var(--m) * 3);
  padding-top:4px
}
.kh-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--m);
  margin-bottom:4px;
  padding-bottom:8px;
  border-bottom:1.5px dashed var(--kb-ink)
}
.kh-head h2 {
  margin:0;
  font-size:18px;
  line-height:1.6
}
.kh-head a {
  flex:none;
  font-size:13px;
  font-weight:700;
  color:var(--kb-link)
}
.kh-head a::after {
  content:" \2190"
}
.kh-lead>section+section {
  margin-top:calc(var(--m) * 3)
}
.kh-hero h1 {
  margin:0 0 10px;
  font-size:26px;
  line-height:1.6
}
.kh-hero p {
  max-width:38rem;
  font-size:16px;
  line-height:2
}
.kh-hero .kh-note {
  margin-top:6px;
  font-size:13px;
  color:var(--kb-muted)
}
.kh-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:calc(var(--m) * 1.5)
}
.kh-occ-list,.kh-pick-list,.kh-list {
  list-style:none;
  margin:0;
  padding:0
}
.kh-occ-list li,.kh-pick-list li,.kh-list li {
  border-bottom:1px dashed var(--kb-rule)
}
.kh-occ-list li>a,.kh-pick-list li>a {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:2px 14px;
  align-items:start;
  padding:var(--m) 0;
  color:var(--kb-ink)
}
.kh-occ-list li>a:not(:has(img)) {
  grid-template-columns:minmax(0,1fr)
}
.kh-occ-list img,.kh-pick-list img {
  grid-row:1 / span 2;
  width:112px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--kb-tint)
}
.kh-occ-list li:first-child>a:has(img) {
  grid-template-columns:minmax(0,1fr)
}
.kh-occ-list li:first-child img {
  grid-row:auto;
  width:100%;
  margin-bottom:6px
}
.kh-occ-list li:first-child h3 {
  font-size:20px
}
.kh-occ-list h3,.kh-pick-list h3 {
  margin:0;
  font-size:16px;
  line-height:1.8
}
.kh-occ-list small,.kh-pick-list small,.kh-list small {
  display:block;
  font-size:12.5px;
  color:var(--kb-muted)
}
.kh-occ-list a:hover h3,.kh-pick-list a:hover h3,.kh-feature a:hover h3 {
  color:var(--kb-link)
}
.kh-credit {
  margin:0 0 8px;
  font-size:11.5px;
  color:var(--kb-muted)
}
.kh-list li {
  padding:10px 0
}
.kh-list a {
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.8;
  color:var(--kb-ink)
}
.kh-list a:hover {
  color:var(--kb-link)
}
.kh-side .kh-list+.kh-head {
  margin-top:calc(var(--m) * 2.5)
}
.kh-topics {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  padding:6px var(--m);
  background:var(--cloth);
  color:var(--thread)
}
.kh-topics a {
  padding:10px 14px;
  font-size:15px;
  font-weight:700;
  color:var(--thread)
}
.kh-topics a:hover {
  color:var(--thread);
  text-decoration:underline dashed 1.5px;
  text-underline-offset:8px
}
.kh-feature {
  margin:var(--m) 0 0
}
.kh-feature>a {
  display:block;
  color:var(--kb-ink)
}
.kh-feature img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  background:var(--kb-tint)
}
.kh-feature h3 {
  margin:10px 0 4px;
  font-size:18px;
  line-height:1.7
}
.kh-feature p {
  font-size:14px;
  color:var(--kb-muted)
}
.kh-feature .kh-credit {
  margin-top:6px
}
@media (min-width:1100px) {
  .kh {
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    grid-auto-flow:row dense;
    gap:calc(var(--m) * 4) 56px
  }
  .kh-lead,.kh [data-track="mahdavi"],.kh [data-track="linkdooni"] {
    grid-column:1
  }
  .kh-side,.kh [data-track="poetry"],.kh [data-track="vizhe"] {
    grid-column:2
  }
  .kh-side {
    grid-row:1
  }
  .kh-topics {
    grid-column:1 / -1
  }
  .kh-hero h1 {
    font-size:34px
  }
  .kh-occ-list li>a,.kh-pick-list li>a {
    grid-template-columns:200px minmax(0,1fr)
  }
  .kh-occ-list img,.kh-pick-list img {
    width:200px
  }
  .kh [data-track="mahdavi"] {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 32px;
    align-items:start
  }
  .kh [data-track="mahdavi"] .kh-head {
    grid-column:1 / -1
  }
}

/* No image: Noor's placeholder tile is not this world's; the row becomes text-only. */
.kh-pick-list img[src*="placeholder.svg"],.kh-occ-list img[src*="placeholder.svg"],
html.katibe .browse-page .card-image:has(img[src*="placeholder.svg"]),
html.katibe .vizhe-archive .card-image:has(img[src*="placeholder.svg"]) {
  display:none
}
.kh-pick-list a:has(img[src*="placeholder.svg"]),
html.katibe .browse-page .article-card-link:has(img[src*="placeholder.svg"]),
html.katibe .vizhe-archive .issue-card a:has(img[src*="placeholder.svg"]) {
  grid-template-columns:minmax(0,1fr)!important
}

/* ===== Index pages: browse, special issues, links, archives, Khatm ===== */
html.katibe .browse-page {
  padding-block:4px calc(var(--m) * 2)
}
html.katibe .browse-page h1 {
  margin:4px 0 6px;
  font-size:26px;
  line-height:1.6
}
html.katibe .browse-page>.muted {
  color:var(--kb-muted);
  margin-bottom:calc(var(--m) * 2)
}
html.katibe .browse-page a {
  color:var(--kb-ink)
}
html.katibe .search-box {
  background:none;
  border:0;
  border-block:1.5px dashed var(--kb-ink);
  border-radius:0;
  padding:var(--m) 0;
  margin:var(--m) 0 calc(var(--m) * 2)
}
html.katibe .search-box input,html.katibe .search-box select {
  border-radius:0;
  background:var(--kb-ground)
}
html.katibe .search-box input.solid-button {
  background:var(--kb-ink);
  border-color:var(--kb-ink);
  color:var(--kb-ground);
  padding-inline:24px
}
html.katibe .search-box input.solid-button:hover {
  background:var(--kb-link);
  border-color:var(--kb-link);
  color:#fff
}
/* site.js removes images that fail to load; drop their empty frame too */
html.katibe .browse-page .card-image:not(:has(img)) {
  display:none
}
html.katibe .browse-page .article-card-link:not(:has(.card-image img)),
html.katibe .vizhe-archive .issue-card a:not(:has(.card-image img)) {
  grid-template-columns:minmax(0,1fr)!important
}
html.katibe .browse-page .article-grid,html.katibe .vizhe-archive .issue-list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-top:0;
  border-top:1.5px dashed var(--kb-ink)
}
html.katibe .browse-page .article-card,html.katibe .vizhe-archive .issue-card {
  background:none;
  border:0;
  border-bottom:1px dashed var(--kb-rule);
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  transform:none
}
html.katibe .browse-page .article-card-link,html.katibe .vizhe-archive .issue-card a {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:0 16px;
  align-items:start;
  padding:var(--m) 0
}
html.katibe .browse-page .card-image,html.katibe .vizhe-archive .issue-card .card-image {
  aspect-ratio:16/9;
  border:0;
  background:var(--kb-tint);
  overflow:hidden
}
html.katibe .vizhe-archive .issue-card .card-image::before,html.katibe .vizhe-archive .issue-card .card-image::after {
  display:none
}
html.katibe .browse-page .article-card img,html.katibe .vizhe-archive .issue-card .card-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none;
  filter:none
}
html.katibe .browse-page .card-body,html.katibe .vizhe-archive .issue-card .card-body {
  padding:0;
  background:none
}
html.katibe .browse-page h2,html.katibe .vizhe-archive .issue-card h2 {
  margin:0;
  font-size:16px;
  line-height:1.8
}
html.katibe .browse-page .card-body p,html.katibe .vizhe-archive .issue-card p {
  margin:2px 0 0;
  font-size:13.5px;
  color:var(--kb-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
html.katibe .browse-page .card-body small,html.katibe .vizhe-archive .issue-card small {
  display:block;
  margin-top:2px;
  padding:0;
  border:0;
  font-size:12.5px;
  color:var(--kb-muted)
}
html.katibe .browse-page .article-card-link:hover h2,html.katibe .vizhe-archive .issue-card a:hover h2,html.katibe .linkdoni-list a:hover h2 {
  color:var(--kb-link)
}
html.katibe .pagination a,html.katibe .linkdoni-page .pagination a,html.katibe .linkdoni-page .pagination span {
  border-radius:0;
  border-color:var(--kb-ink);
  background:none;
  color:var(--kb-ink)
}
html.katibe .linkdoni-page .pagination .pager-current {
  background:var(--kb-ink);
  border-color:var(--kb-ink);
  color:var(--kb-ground)
}
html.katibe .linkdoni-page .pagination .pager-gap {
  border:0
}
html.katibe .linkdoni-page,html.katibe .archive-page,html.katibe .khatm-page {
  max-width:none
}
html.katibe .linkdoni-list,html.katibe .archive-list {
  max-width:46rem;
  background:none;
  border:0;
  border-top:1.5px dashed var(--kb-ink);
  border-radius:0
}
html.katibe .linkdoni-list li+li {
  border-top:1px dashed var(--kb-rule)
}
html.katibe .linkdoni-list a {
  padding:var(--m) 0
}
html.katibe .linkdoni-list a:hover {
  background:none
}
html.katibe .link-index {
  color:var(--kb-muted)
}
html.katibe .empty-state,html.katibe .vizhe-archive .empty-state,html.katibe .linkdoni-page .empty-state {
  background:none;
  border:1px dashed var(--kb-rule);
  border-radius:0
}
html.katibe .page-content table.archive-list {
  width:100%
}
html.katibe .archive-list tr:not(.archive-pager) {
  border-bottom:1px dashed var(--kb-rule)
}
html.katibe .page-content .archive-list td {
  padding:10px 0;
  vertical-align:baseline
}
html.katibe .archive-list a {
  font-size:15px;
  font-weight:700;
  line-height:1.8;
  color:var(--kb-ink);
  text-decoration:none
}
html.katibe .archive-list a:hover {
  color:var(--kb-link)
}
html.katibe .page-content .archive-list td.archive-date {
  padding-inline-start:16px;
  font-size:12.5px;
  color:var(--kb-muted);
  white-space:nowrap;
  text-align:left
}
html.katibe .page-content .archive-pager td {
  padding:var(--m) 0 0
}
html.katibe .page-content .archive-pager table {
  border-collapse:separate;
  border-spacing:4px
}
html.katibe .page-content .archive-pager table td {
  padding:0
}
html.katibe .archive-pager a,html.katibe .archive-pager span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:0 8px;
  border:1px solid var(--kb-ink);
  font-weight:700;
  font-size:14px
}
html.katibe .archive-pager span {
  background:var(--kb-ink);
  color:var(--kb-ground)
}
.khatm-layout {
  display:grid;
  gap:calc(var(--m) * 2)
}
.khatm-copy p {
  max-width:40rem;
  margin-bottom:1em;
  font-size:16.5px;
  line-height:2.05
}
.khatm-copy .khatm-hadith {
  padding:var(--m) 0;
  border-block:1.5px dashed var(--kb-ink);
  font-size:18px;
  font-weight:700
}
.khatm-widget iframe {
  display:block;
  margin-inline:auto;
  border:0
}
.khatm-share {
  margin-top:calc(var(--m) * 3);
  padding-top:var(--m);
  border-top:1.5px dashed var(--kb-ink)
}
.khatm-share h2 {
  font-size:18px
}
.khatm-share textarea {
  width:100%;
  max-width:40rem;
  margin-top:8px;
  font:13px/1.7 Consolas,"Courier New",monospace;
  text-align:left
}
@media (min-width:900px) {
  html.katibe .browse-page .article-card-link,html.katibe .vizhe-archive .issue-card a {
    grid-template-columns:200px minmax(0,1fr);
    gap:0 20px
  }
  .khatm-layout {
    grid-template-columns:minmax(0,1fr) 220px;
    align-items:start
  }
}
@media (min-width:1100px) {
  html.katibe .browse-page .article-grid,html.katibe .vizhe-archive .issue-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:48px
  }
}

/* ===== Shia calendar: the hero is a cloth, days are stitched cells ===== */
html.katibe .calendar-shell {
  --calendar-ink:var(--kb-ink);
  --calendar-muted:var(--kb-muted);
  --calendar-line:var(--kb-rule);
  --calendar-teal:var(--kb-link);
  --calendar-gold:var(--kb-ink);
  font-family:var(--font-persian)
}
html.katibe .calendar-shell *:not(.calendar-event-dot) {
  border-radius:0!important
}
html.katibe .calendar-shell * {
  box-shadow:none!important
}
html.katibe .calendar-hero,html.katibe .calendar-day-hero {
  background:var(--cloth);
  color:var(--thread)
}
html.katibe .calendar-hero::after,html.katibe .calendar-day-hero::after {
  display:none
}
html.katibe .calendar-hero h1,html.katibe .calendar-day-hero h1,html.katibe .calendar-hero p,html.katibe .calendar-eyebrow,html.katibe .calendar-day-hero>span,html.katibe .calendar-lunar-large {
  color:var(--thread)
}
html.katibe .calendar-hero h1,html.katibe .calendar-day-hero h1 {
  font-family:var(--kb-lettering);
  font-weight:700
}
html.katibe .calendar-today,html.katibe .calendar-back {
  border:1px solid var(--thread);
  background:none;
  color:var(--thread)!important
}
html.katibe .calendar-today:hover,html.katibe .calendar-back:hover {
  background:var(--thread);
  color:var(--cloth)!important
}
html.katibe .calendar-hero-line {
  background:var(--thread)
}
html.katibe .calendar-day {
  background:var(--kb-ground);
  transform:none!important
}
html.katibe .calendar-day:hover {
  border-color:var(--kb-ink)
}
html.katibe .calendar-day-today {
  background:var(--kb-ground);
  border:1.5px dashed var(--kb-ink)
}
html.katibe .calendar-day-today::before {
  display:none
}
html.katibe .calendar-filter-pills button.active,html.katibe .calendar-filter-pills button:hover,html.katibe .calendar-monthnav:hover,html.katibe .calendar-day-nav a:hover {
  background:var(--kb-ink);
  border-color:var(--kb-ink);
  color:var(--kb-ground)!important
}
html.katibe .calendar-event-card,html.katibe .calendar-related,html.katibe .calendar-day-nav a,html.katibe .calendar-data-notice {
  background:none
}
html.katibe .calendar-event-summary,html.katibe .calendar-event-body,html.katibe .calendar-related li span,html.katibe .calendar-event-related>span,html.katibe .calendar-related-heading span {
  color:var(--kb-muted)
}
html.katibe .calendar-event-category {
  background:none;
  border:1px solid var(--kb-rule);
  color:var(--kb-muted)
}
html.katibe .calendar-event-related {
  border:0;
  border-top:1.5px dashed var(--kb-ink);
  background:none
}
html.katibe .calendar-event-related li {
  color:var(--kb-muted)
}
html.katibe .calendar-data-notice {
  border:1px dashed var(--kb-ink);
  color:var(--kb-ink)
}
html.katibe .calendar-data-unavailable {
  color:var(--kb-muted)
}
html.katibe .calendar-api-status {
  background:var(--kb-tint);
  color:var(--kb-ink)
}
html.katibe .calendar-api-source a {
  color:var(--kb-link)
}
html.katibe .calendar-controls select,html.katibe .calendar-search input {
  background:var(--kb-ground);
  color:var(--kb-ink)
}

/* ===== Error and not-found pages ===== */
html.katibe .not-found {
  max-width:40rem;
  margin-inline:auto;
  padding:calc(var(--m) * 3) 0;
  border:0;
  background:none;
  text-align:center
}
html.katibe .not-found h1 {
  font-size:26px;
  line-height:1.6
}
html.katibe .not-found .eyebrow {
  display:none
}
html.katibe .not-found-code {
  font-family:var(--kb-lettering);
  color:var(--kb-muted)
}
html.katibe .not-found-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px
}
html.katibe .not-found-actions a {
  width:auto;
  min-width:150px
}
html.katibe .not-found-links a {
  border-radius:0
}

/* ===== Contest landing (/Match/): legacy contest markup inside the reading frame ===== */
html.katibe .match-page {
  max-width:none
}
html.katibe .match-page *:not(.cboxOverlay) {
  border-radius:0!important;
  box-shadow:none!important
}
html.katibe .match-page #example-two .nav li a.current,html.katibe .match-page #example-two .nav li a:hover {
  background:var(--kb-ink)!important;
  border-color:var(--kb-ink)!important;
  color:var(--kb-ground)!important
}
html.katibe .match-page [style*="background-color:#feffae"],html.katibe .match-page [style*="background-color: #feffae"] {
  background:none!important;
  border:1px dashed var(--kb-ink)!important
}

/* ===== Links viewer (links.aspx): its toolbar is the cloth ===== */
html.katibe .links-chrome {
  background:var(--cloth);
  color:var(--thread);
  border:0;
  box-shadow:none
}
html.katibe .links-brand,html.katibe .links-brand:hover,html.katibe .links-brand small,html.katibe .links-title-block h1,html.katibe .links-meta,html.katibe .links-share {
  color:var(--thread)
}
html.katibe .links-brand .brand-symbol {
  display:none
}
html.katibe .links-brand b {
  font-family:var(--kb-lettering);
  font-size:28px;
  padding-top:4px
}
html.katibe .links-toolbar {
  border-top:1.5px dashed var(--thread)
}
html.katibe .links-chip,html.katibe .links-share a,html.katibe .links-share button {
  border:1px solid var(--thread)!important;
  border-radius:0!important;
  background:none!important;
  color:var(--thread)!important
}
html.katibe .links-chip.is-accent,html.katibe .links-chip:hover,html.katibe .links-share a:hover,html.katibe .links-share button:hover {
  background:var(--thread)!important;
  color:var(--cloth)!important
}
html.katibe .links-open {
  background:var(--thread);
  border-color:var(--thread);
  color:var(--cloth)
}
html.katibe .links-open:hover {
  background:var(--kb-ground);
  border-color:var(--kb-ground);
  color:var(--kb-ink)
}
html.katibe .links-top .theme-switch {
  border:1px solid var(--thread);
  border-radius:0;
  background:none
}
html.katibe .links-top .theme-switch button {
  color:var(--thread)
}
html.katibe .links-top .theme-switch button.is-active {
  background:var(--thread);
  color:var(--cloth)
}
html.katibe .links-fallback {
  border-radius:0;
  box-shadow:none
}