/*
 * MAWSIM · The Journal — magazine index and long-form articles.
 * Builds on mawsim.css tokens; every class is prefixed .journal-.
 *
 *  Masthead · Meta line · Lead story · Asymmetric grid & cards · Pagination · Coda
 *  Article: head, cover, prose (drop cap, pull quotes), end mark, tie-in, more stories
 */

.page-journal { font-variant-numeric: lining-nums; }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.journal-mast { padding-block: var(--space-l) var(--space-2xl); }
.journal-mast__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  margin-block-start: var(--space-l);
  padding-block-end: var(--space-m);
  border-block-end: 1px solid var(--c-ink);
  box-shadow: 0 4px 0 -3px var(--c-ink);
}
.journal-mast__title { font-size: clamp(3.4rem, 1.6rem + 8vw, 9rem); line-height: .92; }
.journal-mast__title:lang(ar) { line-height: 1.2; }
.journal-mast__issue {
  display: grid;
  gap: .2rem;
  justify-items: end;
  padding-block-end: .6rem;
  text-align: end;
}
.journal-mast__count { font-family: var(--f-display); font-size: var(--step-1); color: var(--fg-soft); }
.journal-mast__count:lang(en) { font-style: italic; }
.journal-mast__foot {
  display: grid;
  gap: var(--space-m);
  margin-block-start: var(--space-l);
  align-items: end;
}
.journal-mast__lede { margin: 0; }
.journal-filter ul { margin: 0; }
@media (min-width: 56em) {
  .journal-mast__foot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .journal-filter ul { justify-content: flex-end; }
}

/* ── Meta line (category · date · reading time) ──────────────────────────── */
.journal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .7rem;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.journal-meta:lang(ar) { font-size: var(--step--1); font-weight: 400; letter-spacing: 0; text-transform: none; }
.journal-meta__cat { color: var(--accent); }
.journal-meta__sep {
  inline-size: 4px;
  block-size: 4px;
  background: var(--foil);
  transform: rotate(45deg);
  flex: none;
}

/* ── Lead story ───────────────────────────────────────────────────────────── */
.journal-issue { padding-block-end: var(--space-3xl); }
.journal-lead { display: grid; gap: var(--space-l); align-items: center; }
.journal-lead__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-s);
  background: var(--c-beige);
}
.journal-lead__media img, .journal-card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out);
}
.journal-lead__body { display: grid; gap: var(--space-s); align-content: center; }
.journal-lead__flag { color: var(--fg); }
.journal-lead__title { font-size: var(--step-5); line-height: 1.05; }
.journal-lead__title:lang(ar) { line-height: 1.35; }
.journal-lead__title a, .journal-card__title a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-3) var(--ease-out);
}
[dir="rtl"] .journal-lead__title a, [dir="rtl"] .journal-card__title a { background-position: 100% 100%; }
.journal-lead__dek { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.4; color: var(--fg-soft); max-inline-size: 30em; }
.journal-lead__dek:lang(ar) { line-height: 1.8; }
.journal-lead .link-arrow { justify-self: start; margin-block-start: var(--space-2xs); }
@media (hover: hover) {
  .journal-lead:hover .journal-lead__media img, .journal-card:hover .journal-card__media img { transform: scale(1.035); }
  .journal-lead:hover .journal-lead__title a, .journal-card:hover .journal-card__title a { background-size: 100% 1px; }
}
.journal-lead__title a:focus-visible, .journal-card__title a:focus-visible { background-size: 100% 1px; }
@media (min-width: 56em) {
  .journal-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
}

/* ── Asymmetric grid & cards ─────────────────────────────────────────────── */
.journal-grid { display: grid; gap: var(--space-2xl); margin-block-start: var(--space-3xl); }
@media (min-width: 48em) {
  .journal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-m); align-items: start; }
  .journal-grid__item:nth-child(4n + 1) { grid-column: 1 / span 7; }
  .journal-grid__item:nth-child(4n + 2) { grid-column: 9 / span 4; margin-block-start: var(--space-3xl); }
  .journal-grid__item:nth-child(4n + 3) { grid-column: 2 / span 4; }
  .journal-grid__item:nth-child(4n + 4) { grid-column: 7 / span 6; margin-block-start: calc(-1 * var(--space-xl)); }
}
.journal-card { display: grid; gap: var(--space-s); align-content: start; }
.journal-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-s);
  background: var(--c-beige);
}
.journal-card--portrait .journal-card__media { aspect-ratio: 4 / 5; }
.journal-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-gold); background: var(--c-paper) var(--grain); }
.journal-card__placeholder .brand-svg { block-size: 30%; opacity: .7; }
.journal-card__body { display: grid; gap: .45rem; }
.journal-card__title { font-size: var(--step-3); line-height: 1.15; }
.journal-card__title:lang(ar) { line-height: 1.45; }
.journal-card__dek { font-size: var(--step--1); line-height: 1.6; color: var(--fg-soft); max-inline-size: 34rem; }
.journal-card__dek:lang(ar) { line-height: 1.85; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.journal-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}
.journal-pages__count { font-size: var(--step--1); color: var(--fg-muted); }
.journal-pages__next { margin-inline-start: auto; }

/* ── Coda (index) ─────────────────────────────────────────────────────────── */
.journal-coda__inner { display: grid; gap: var(--space-l); align-items: center; justify-items: start; }
.journal-coda__mark { display: block; block-size: 6.5rem; color: var(--c-gold); }
.journal-coda__mark .brand-svg { --line-weight: 3; block-size: 100%; inline-size: auto; }
.journal-coda__text { display: grid; gap: .5rem; max-inline-size: 38rem; }
.journal-coda__title { font-size: var(--step-4); }
@media (min-width: 56em) {
  .journal-coda__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xl); }
}

/* ── Article: head & cover ────────────────────────────────────────────────── */
.journal-head {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  padding-block: var(--space-l) var(--space-2xl);
  text-align: center;
}
.journal-head .breadcrumbs { justify-self: stretch; margin-block-end: var(--space-l); }
.journal-head .breadcrumbs ol { justify-content: center; }
.journal-head__cat a { color: inherit; text-decoration: none; padding-block: .7rem; }
.journal-head__cat a:hover { text-decoration: underline; text-underline-offset: .3em; }
.journal-head__title { max-inline-size: 15em; font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); }
.journal-head__title:lang(ar) { max-inline-size: 17em; }
.journal-head__dek { margin-inline: auto; max-inline-size: 34em; }
.journal-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .8rem;
  margin-block-start: var(--space-xs);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.journal-byline:lang(ar) { font-size: var(--step--1); font-weight: 400; letter-spacing: 0; text-transform: none; }

.journal-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-block: 0;
  border-radius: var(--radius-s);
  background: var(--c-beige);
}
.journal-cover__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 48em) { .journal-cover { aspect-ratio: 2 / 1; } }

/* ── Article: prose ───────────────────────────────────────────────────────── */
.journal-body { padding-block: var(--space-2xl) var(--space-3xl); }
.journal-prose {
  max-inline-size: none;
  font-size: var(--step-1);
  line-height: 1.75;
}
.journal-prose:lang(ar) { line-height: 2; font-size: calc(var(--step-1) * 1.02); }
.journal-prose > * + * { margin-block-start: 1.2em; }
.journal-prose > p:first-of-type { color: var(--fg); }
/* A drop cap for Latin text. Arabic letters join, so the opening paragraph is
   simply set a step larger instead. */
.journal-prose.prose > p:first-of-type:lang(en)::first-letter {
  float: inline-start;
  margin-block: .08em -.05em;
  margin-inline-end: .1em;
  font-family: var(--f-latin-display);
  font-size: 4.6em;
  font-weight: 400;
  line-height: .78;
  color: var(--c-gold-ink);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .journal-prose.prose > p:first-of-type:lang(en)::first-letter {
    float: none;
    margin: 0 .12em 0 0;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}
.journal-prose > p:first-of-type:lang(ar) { font-family: var(--f-arabic-display); font-size: var(--step-2); line-height: 1.85; }

.journal-prose h2 {
  margin-block-start: 2.2em;
  font-size: var(--step-3);
  line-height: 1.2;
}
.journal-prose h2:lang(ar) { line-height: 1.5; }
.journal-prose h2::before {
  content: "";
  display: block;
  inline-size: 2.25rem;
  block-size: 1px;
  margin-block-end: .8em;
  background: var(--foil);
}
.journal-prose h2 + p { margin-block-start: .7em; }

/* Pull quote: breaks out of the measure, set large between two gold rules */
.journal-prose blockquote {
  position: relative;
  margin-block: 2.4em;
  padding: var(--space-l) 0;
  border: 0;
  border-block: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent);
  font-family: var(--f-display);
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--fg);
  text-align: center;
  text-wrap: balance;
}
.journal-prose blockquote:lang(ar) { line-height: 1.7; }
.journal-prose blockquote p::before { content: "“"; color: var(--foil); }
.journal-prose blockquote p::after { content: "”"; color: var(--foil); }
.journal-prose blockquote p:lang(ar)::before { content: "«"; }
.journal-prose blockquote p:lang(ar)::after { content: "»"; }
.journal-prose blockquote::after {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: calc(50% - 4px);
  inline-size: 7px;
  block-size: 7px;
  background: var(--c-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5px var(--bg);
}
@media (min-width: 64em) {
  .journal-prose blockquote { margin-inline: calc(-1 * var(--space-2xl)); font-size: var(--step-4); }
}

/* The botanical end mark */
.journal-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-m);
  margin-block: var(--space-2xl) var(--space-l);
  color: var(--c-gold);
}
.journal-end::before, .journal-end::after { content: ""; block-size: 1px; background: var(--line); }
.journal-end__mark { display: block; block-size: 4rem; }
.journal-end__mark .brand-svg { --line-weight: 3.2; block-size: 100%; inline-size: auto; }

.journal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
}
.journal-foot__meta { font-size: var(--step--1); color: var(--fg-muted); }

/* ── Tie-in: the honey on the table ───────────────────────────────────────── */
.journal-tie__inner { display: grid; gap: var(--space-xl); align-items: center; }
.journal-tie__media {
  position: relative;
  display: block;
  overflow: hidden;
  inline-size: min(100%, 30rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-s);
  background: var(--c-beige);
}
.journal-tie__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out); }
@media (hover: hover) { .journal-tie__media:hover img { transform: scale(1.035); } }
.journal-tie__body { display: grid; gap: var(--space-m); align-content: center; max-inline-size: 34rem; }
.journal-tie__title { font-size: var(--step-4); }
.journal-tie__product { display: grid; gap: .3rem; padding-block-start: var(--space-s); border-block-start: 1px solid var(--line); }
.journal-tie__name { font-family: var(--f-display); font-size: var(--step-3); line-height: 1.2; }
.journal-tie__name a { color: inherit; text-decoration: none; }
.journal-tie__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.journal-tie__subtitle { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.journal-tie__subtitle:lang(ar) { letter-spacing: 0; text-transform: none; }
.journal-tie__short { color: var(--fg-soft); }
.journal-tie__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
.journal-tie__buy .price { inline-size: 100%; }
@media (min-width: 56em) {
  .journal-tie__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); }
  .journal-tie__media { justify-self: end; }
}

/* ── More stories ─────────────────────────────────────────────────────────── */
.journal-more__grid { display: grid; gap: var(--space-2xl) var(--space-l); margin-block-start: var(--space-xl); }
@media (min-width: 48em) { .journal-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.journal-more__item { display: grid; gap: var(--space-s); align-content: start; }