/* =========================================================
   FOLIO & KEY — HOMEPAGE QA V2
   Contrast + Alignment + RTL/LTR consistency
   ========================================================= */

:root {
  --fk-paper-1: #F8EDD9;
  --fk-paper-2: #EFE0C5;

  --fk-ink: #17372D;
  --fk-ink-2: #294B40;
  --fk-ink-muted: #566D64;

  --fk-gold-dark: #86652F;
  --fk-gold: #CDAA65;

  --fk-ivory: #F6E8CE;
  --fk-ivory-bright: #FFF2DC;
}


/* =========================================================
   GLOBAL ALIGNMENT
   ========================================================= */

html[dir="rtl"] body {
  text-align: right;
}

html[dir="ltr"] body {
  text-align: left;
}

.editorial-story-shell,
.editions-shell,
.ritual-shell,
.author-shell,
.closing-inner,
.footer-shell {
  width: 100%;
}

.editorial-story h2,
.collectible-editions h2,
.ritual-heading h2,
.author-copy h2,
.final-closing h2,
.story-copy-side,
.editions-heading,
.author-copy,
.volume-inner {
  text-align: start;
}


/* =========================================================
   LIGHT SECTIONS — FORCE PROPER CONTRAST
   STORY + HOW
   ========================================================= */

.editorial-story,
.ritual-how {
  color: var(--fk-ink) !important;

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(167,125,58,.08),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      var(--fk-paper-1) 0%,
      #F3E6D0 52%,
      var(--fk-paper-2) 100%
    ) !important;
}


/* Main headings */
.editorial-story h2,
.ritual-heading h2 {
  color: var(--fk-ink) !important;
  -webkit-text-fill-color: var(--fk-ink) !important;

  text-shadow: none !important;
}


/* Main paragraphs */
.story-copy-side p,
.ritual-heading p,
.ritual-step p {
  color: var(--fk-ink-2) !important;
  -webkit-text-fill-color: var(--fk-ink-2) !important;

  opacity: 1 !important;
}


/* Lead paragraph gets stronger emphasis */
.story-copy-side .story-lead {
  color: #102E25 !important;
  -webkit-text-fill-color: #102E25 !important;

  font-weight: 500;
}


/* Labels / indices */
.editorial-story-index,
.ritual-index {
  color: var(--fk-gold-dark) !important;
  -webkit-text-fill-color: var(--fk-gold-dark) !important;
}


/* Number circles */
.editorial-story-index span:first-child,
.ritual-index span:first-child {
  color: #725426 !important;

  border-color:
    rgba(105,76,35,.38) !important;

  background:
    rgba(255,255,255,.13);
}


/* Story decorative mark */
.story-quiet-mark,
.story-bottom-ornament {
  color: var(--fk-gold-dark) !important;
}


/* How step headings */
.ritual-step h3 {
  color: #13362B !important;
  -webkit-text-fill-color: #13362B !important;
}


/* How numbers */
.ritual-number {
  color: #785B2D !important;
  opacity: 1 !important;
}


/* How icons */
.ritual-symbol {
  color: #81612F !important;

  background:
    rgba(255,248,234,.60) !important;

  border-color:
    rgba(115,82,35,.34) !important;
}


/* =========================================================
   STORY — DETERMINISTIC RTL / LTR COMPOSITION
   ========================================================= */

.editorial-story-main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(0, .96fr);

  align-items: center;

  gap:
    clamp(60px, 8vw, 135px);
}

.story-title-side {
  grid-area: title;
}

.story-copy-side {
  grid-area: copy;
}


/* English = title left / copy right */
html[dir="ltr"] .editorial-story-main {
  grid-template-areas:
    "title copy";
}


/* Arabic = title right / copy left */
html[dir="rtl"] .editorial-story-main {
  grid-template-areas:
    "copy title";
}


.story-title-side,
.story-copy-side {
  min-width: 0;
}


html[dir="rtl"] .story-copy-side {
  border-left: 1px solid rgba(70,52,29,.20);
  border-right: 0;

  padding-left: 0;
  padding-right: 42px;
}


html[dir="ltr"] .story-copy-side {
  border-right: 0;
  border-left: 1px solid rgba(70,52,29,.20);

  padding-left: 42px;
  padding-right: 0;
}


/* =========================================================
   COLLECTION — ALIGNMENT ONLY
   ========================================================= */

.editions-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, .85fr);

  align-items: end;

  gap:
    clamp(45px, 7vw, 100px);
}


html[dir="ltr"] .editions-heading {
  grid-template-areas:
    "heading intro";
}

html[dir="rtl"] .editions-heading {
  grid-template-areas:
    "intro heading";
}


.editions-heading > div {
  grid-area: heading;
}

.editions-heading > p {
  grid-area: intro;

  text-align: start;
}


.volume-inner {
  min-width: 0;
}


/* Product names remain visually correct on Arabic page */
html[dir="rtl"] .volume-inner h3 {
  direction: ltr;
  unicode-bidi: isolate;

  text-align: right;
}

html[dir="ltr"] .volume-inner h3 {
  direction: ltr;
  text-align: left;
}


/* =========================================================
   HOW IT WORKS — HEADING ALIGNMENT
   ========================================================= */

.ritual-heading-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, .85fr);

  align-items: end;

  gap:
    clamp(45px, 7vw, 95px);
}


html[dir="ltr"] .ritual-heading-grid {
  grid-template-areas:
    "ritual-title ritual-intro";
}

html[dir="rtl"] .ritual-heading-grid {
  grid-template-areas:
    "ritual-intro ritual-title";
}


.ritual-heading-grid h2 {
  grid-area: ritual-title;
}

.ritual-heading-grid p {
  grid-area: ritual-intro;

  text-align: start;
}


/* =========================================================
   AUTHOR WORLD — CLEANER ALIGNMENT + COLOR BALANCE
   ========================================================= */

.author-worlds {
  background:
    radial-gradient(
      circle at 12% 28%,
      rgba(99,35,52,.17),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 10%,
      rgba(205,170,101,.08),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #031914 0%,
      #062A22 55%,
      #021612 100%
    ) !important;
}


.author-shell {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, .95fr);

  align-items: center;

  gap:
    clamp(70px, 8vw, 130px);
}


.author-copy {
  grid-area: author-copy;
}

.author-card-wrap {
  grid-area: author-card;
}


/* English copy left */
html[dir="ltr"] .author-shell {
  grid-template-areas:
    "author-copy author-card";
}


/* Arabic copy right */
html[dir="rtl"] .author-shell {
  grid-template-areas:
    "author-card author-copy";
}


.author-copy h2 {
  color: var(--fk-ivory-bright) !important;
  -webkit-text-fill-color: var(--fk-ivory-bright) !important;
}


.author-copy .author-lead {
  color:
    rgba(255,242,220,.92) !important;
}


.author-copy p {
  color:
    rgba(246,232,206,.76) !important;
}


.author-index,
.author-note {
  color:
    var(--fk-gold) !important;
}


/* Author card should feel like ivory paper */
.author-library-card {
  color: var(--fk-ink) !important;

  background:
    linear-gradient(
      145deg,
      #FAEED9,
      #ECDCC0
    ) !important;

  transform:
    rotate(.45deg);
}


.author-library-card p,
.author-card-entry p {
  color:
    #304E43 !important;

  -webkit-text-fill-color:
    #304E43 !important;

  opacity: 1 !important;
}


.author-card-top strong {
  color: var(--fk-ink) !important;
}


.author-card-top small,
.author-card-entry > span,
.author-card-footer {
  color: #80602D !important;
}


/* =========================================================
   CLOSING / FOOTER ALIGNMENT
   ========================================================= */

.final-closing,
.closing-inner {
  text-align: center;
}


.final-closing h2,
.final-closing p,
.closing-tagline {
  text-align: center;
}


.final-closing h2 {
  color:
    var(--fk-ivory-bright) !important;
}


.final-closing p {
  color:
    rgba(246,232,206,.80) !important;
}


.footer-brand,
.footer-end {
  align-items: center;
}


/* =========================================================
   ARABIC TYPOGRAPHY — AMIRI REFINEMENT
   ========================================================= */

html[lang="ar"] .editorial-story h2,
html[lang="ar"] .ritual-heading h2,
html[lang="ar"] .author-copy h2,
html[lang="ar"] .final-closing h2 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif !important;

  font-weight: 400;

  letter-spacing: 0;
}


/* Amiri needs less extreme scaling than Aref Ruqaa */
html[lang="ar"] .editorial-story h2,
html[lang="ar"] .ritual-heading h2 {
  font-size:
    clamp(50px, 4.7vw, 73px) !important;

  line-height:
    1.42 !important;
}


html[lang="ar"] .author-copy h2 {
  font-size:
    clamp(50px, 4.6vw, 72px) !important;

  line-height:
    1.43 !important;
}


html[lang="ar"] .final-closing h2 {
  font-size:
    clamp(54px, 5vw, 78px) !important;

  line-height:
    1.43 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .editorial-story-main,
  .author-shell {
    grid-template-columns:
      1fr;

    gap:
      55px;
  }


  html[dir="ltr"] .editorial-story-main,
  html[dir="rtl"] .editorial-story-main {
    grid-template-areas:
      "title"
      "copy";
  }


  html[dir="ltr"] .author-shell,
  html[dir="rtl"] .author-shell {
    grid-template-areas:
      "author-copy"
      "author-card";
  }


  .editions-heading,
  .ritual-heading-grid {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  html[dir="ltr"] .editions-heading,
  html[dir="rtl"] .editions-heading {
    grid-template-areas:
      "heading"
      "intro";
  }


  html[dir="ltr"] .ritual-heading-grid,
  html[dir="rtl"] .ritual-heading-grid {
    grid-template-areas:
      "ritual-title"
      "ritual-intro";
  }


  .author-library-card {
    transform: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .editorial-story,
  .collectible-editions,
  .ritual-how,
  .author-worlds {
    padding-left:
      22px !important;

    padding-right:
      22px !important;
  }


  html[dir="rtl"] .story-copy-side,
  html[dir="ltr"] .story-copy-side {
    border-left: 0;
    border-right: 0;

    padding-left: 0;
    padding-right: 0;
  }


  .story-copy-side {
    padding-top:
      8px;
  }


  html[lang="ar"] .editorial-story h2,
  html[lang="ar"] .ritual-heading h2,
  html[lang="ar"] .author-copy h2 {
    font-size:
      clamp(42px, 10.8vw, 56px) !important;

    line-height:
      1.48 !important;
  }


  .story-copy-side p,
  .ritual-heading p,
  .author-copy p {
    max-width:
      100%;
  }


  .ritual-step {
    text-align:
      start;
  }


  .author-card-wrap {
    width:
      100%;
  }


  .author-library-card {
    width:
      100%;

    max-width:
      100%;
  }


  .footer-brand,
  .footer-end {
    text-align:
      center;
  }

}