/* Journal navigation and long-form editorial system */
body.journal-page,
body.article-page { background: var(--black); color: var(--white); }

.journal-header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  min-height: 82px;
  padding-inline: var(--page-pad);
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(7,7,7,.9);
  backdrop-filter: blur(22px) saturate(1.1);
}
.journal-header .site-mark { grid-column: 2; justify-self: center; }
.journal-header .site-mark::before { display: none; }
.journal-header .journal-monogram {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: .72rem;
  letter-spacing: -.04em;
}
.journal-header .site-nav {
  position: fixed;
  inset: 82px 0 auto;
  display: none;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 1px;
  padding: 1px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--line-dark);
}
.journal-header .site-nav.is-open { display: grid; }
.journal-header .site-nav a {
  display: flex;
  min-height: 92px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  background: rgba(7,7,7,.98);
  font-size: .72rem;
}
.journal-header .site-nav a::after { position: static; width: 7px; height: 7px; transform: none; border-radius: 50%; background: var(--accent); }
.journal-header .menu-toggle {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
}
.journal-header .menu-toggle::before {
  width: 22px;
  height: 12px;
  border-block: 1px solid currentColor;
  content: "";
  transition: transform .35s var(--ease-out);
}
.journal-header .menu-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.journal-header .header-tools { grid-column: 3; grid-row: 1; }
.journal-header .journal-cta {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding-inline: 15px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .25s,color .25s,border-color .25s;
}
.journal-header .journal-cta:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); }

.journal-intro { min-height: 72svh; display: flex; flex-direction: column; justify-content: space-between; }
.journal-intro__topline { display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.journal-intro h1 { max-width: none; }
html[lang="fa"] .journal-intro h1 { font-size: clamp(4rem,9.2vw,9rem); }
.journal-intro__bottom { display: grid; grid-template-columns: 1fr minmax(280px,.46fr); gap: 40px; align-items: end; }
.journal-intro__bottom p { margin: 0; }
.journal-intro__count { color: var(--accent); font-size: clamp(2.8rem,6vw,7rem); font-weight: 300; line-height: .8; }

.journal { padding-inline: var(--page-pad); }
.journal-card { position: relative; min-width: 0; }
.journal-card > a { display: block; height: 100%; }
.journal-card__body { display: flex; min-height: 380px; flex-direction: column; }
.journal-card__eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.journal-card__eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.journal-card__excerpt { margin-block: auto 28px; }
.journal-card__link { display: flex; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.journal-card__link b { color: var(--accent); font-size: 1.2rem; font-weight: 400; transition: transform .25s; }
.journal-card:hover .journal-card__link b { transform: translateX(7px); }
html[dir="rtl"] .journal-card:hover .journal-card__link b { transform: translateX(-7px); }

/* Article */
.article-hero {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
  gap: clamp(40px,7vw,110px);
  min-height: calc(100svh - 82px);
  align-items: center;
  padding: clamp(64px,8vw,120px) var(--page-pad);
  border-bottom: 1px solid var(--line-dark);
}
.article-hero__copy { align-self: end; }
.article-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(40px,8vw,100px); color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.article-kicker { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.article-hero h1 { margin: 18px 0 28px; font-size: clamp(3rem,6.2vw,7.4rem); font-weight: 400; letter-spacing: -.065em; line-height: .91; }
html[lang="fa"] .article-hero h1 { font-family: var(--fa); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.article-deck { max-width: 60ch; margin: 0; color: #aaa9a2; font-size: clamp(1rem,1.3vw,1.2rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.article-hero__media { align-self: stretch; overflow: hidden; background: #161616; }
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.03); }

.article-layout {
  display: grid;
  grid-template-columns: minmax(220px,.34fr) minmax(0,1fr);
  gap: clamp(50px,10vw,150px);
  padding: clamp(70px,10vw,140px) var(--page-pad);
}
.article-toc { position: sticky; top: 112px; align-self: start; padding-top: 4px; }
.article-toc__label { display: block; margin-bottom: 20px; color: var(--accent); font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.article-toc ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; border-top: 1px solid var(--line-dark); }
.article-toc li:last-child { border-bottom: 1px solid var(--line-dark); }
.article-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 13px 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.article-toc a::before { color: #5f5e59; content: "0" counter(toc); }
.article-toc a:hover { color: var(--white); }

.article-body { max-width: 780px; }
.article-summary { margin-bottom: clamp(70px,9vw,120px); padding: clamp(24px,4vw,44px); border: 1px solid var(--line-dark); background: #0d0d0d; }
.article-summary span { color: var(--accent); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.article-summary p { margin: 20px 0 0; color: var(--white); font-size: clamp(1.2rem,2.1vw,1.85rem); line-height: 1.55; }
.article-section { scroll-margin-top: 118px; padding: 0 0 clamp(70px,9vw,120px); }
.article-section__number { color: var(--accent); font-size: .7rem; }
.article-section h2 { margin: 18px 0 28px; font-size: clamp(2rem,4.2vw,4.8rem); font-weight: 400; letter-spacing: -.055em; line-height: 1; }
html[lang="fa"] .article-section h2 { font-family: var(--fa); font-weight: 800; letter-spacing: -.035em; line-height: 1.16; }
.article-section h3 { margin: 38px 0 15px; font-size: clamp(1.2rem,2vw,1.7rem); font-weight: 550; }
.article-section p,.article-section li { color: #b7b6b0; font-size: clamp(1rem,1.2vw,1.14rem); line-height: 1.95; }
.article-section p { margin: 0 0 22px; }
.article-section ul,.article-section ol { display: grid; gap: 12px; padding-inline-start: 1.35em; }
.article-callout { margin: 34px 0; padding: 24px 28px; border-inline-start: 3px solid var(--accent); background: #111; }
.article-callout strong { display: block; margin-bottom: 8px; color: var(--white); }
.article-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: 34px; padding: 0; background: var(--line-dark); border: 1px solid var(--line-dark); }
.article-checklist li { min-height: 110px; padding: 22px; background: var(--black); list-style: none; }
.article-next { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: clamp(40px,6vw,80px) var(--page-pad); border-top: 1px solid var(--line-dark); }
.article-next span { color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.article-next strong { font-size: clamp(1.6rem,4vw,4.5rem); font-weight: 400; letter-spacing: -.04em; }
.article-next b { color: var(--accent); font-size: 2.4rem; font-weight: 300; }

html[lang="fa"] .journal-header .site-nav a,
html[lang="fa"] .journal-intro,
html[lang="fa"] .journal-card,
html[lang="fa"] .article-hero,
html[lang="fa"] .article-layout,
html[lang="fa"] .article-next { text-align: right; }

@media (max-width: 920px) {
  .journal-header .site-nav { grid-template-columns: 1fr; }
  .journal-header .site-nav a { min-height: 62px; align-items: center; }
  .journal-intro__bottom,.article-hero,.article-layout { grid-template-columns: 1fr; }
  .journal-intro { min-height: 62svh; }
  .article-hero { min-height: auto; }
  .article-hero__copy { order: 2; }
  .article-hero__media { min-height: 52svh; }
  .article-breadcrumbs { margin-bottom: 40px; }
  .article-toc { position: static; }
  .article-toc ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-body { max-width: none; }
}

@media (max-width: 620px) {
  .journal-header { min-height: 66px; grid-template-columns: 1fr auto 1fr; }
  .journal-header .site-nav { inset-block-start: 66px; }
  .journal-header .site-mark { font-size: 0; }
  .journal-header .journal-monogram { width: 34px; height: 34px; font-size: .66rem; }
  .journal-header .header-tools { gap: 8px; }
  .journal-header .journal-cta,.journal-header .header-progress { display: none; }
  .journal-header .menu-toggle { font-size: 0; }
  .journal-intro { min-height: 58svh; padding-top: 46px; }
  .journal-intro h1 { font-size: clamp(2.7rem,12vw,3.6rem); line-height: 1; text-wrap: balance; }
  html[lang="fa"] .journal-intro h1 { font-size: clamp(2.45rem,11.2vw,3.35rem); line-height: 1.08; }
  .journal-intro__bottom { gap: 24px; }
  .journal-grid { gap: 18px; border: 0; background: transparent; }
  .journal-card { border: 1px solid var(--line-dark); }
  .journal-card__body { min-height: 330px; }
  .article-hero { padding-top: 38px; }
  .article-hero h1 { font-size: clamp(1.75rem,7.6vw,2.4rem); line-height: 1.06; text-wrap: balance; }
  html[lang="fa"] .article-hero h1 { line-height: 1.12; }
  .article-hero__media { min-height: 42svh; }
  .article-toc ol,.article-checklist { grid-template-columns: 1fr; }
  .article-next { grid-template-columns: 1fr auto; }
  .article-next span { grid-column: 1/-1; }
}