/* =========================================================
   FOLIO & KEY — HOMEPAGE REFINEMENT V1
   Typography + Collection + Palette
   ========================================================= */

:root {
  --fk-forest-950: #011410;
  --fk-forest-900: #031C17;
  --fk-forest-800: #062A22;
  --fk-forest-700: #09382D;

  --fk-ivory: #F5E8CF;
  --fk-ivory-bright: #FFF1DA;
  --fk-paper: #F2E5CF;

  --fk-gold: #D3B06A;
  --fk-gold-soft: #BA985D;

  --fk-burgundy: #642538;
}


/* =========================================================
   ARABIC TYPOGRAPHY
   ========================================================= */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .hero-signature,
html[lang="ar"] .closing-tagline,
html[lang="ar"] .footer-brand p {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif !important;

  font-weight: 400;
}


html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] nav,
html[lang="ar"] a,
html[lang="ar"] button {
  font-family:
    "Noto Naskh Arabic",
    serif;
}


/* Hero Amiri is slightly more compact than Ruqaa */
html[lang="ar"] .hero-luxury h1 {
  font-size:
    clamp(58px, 5.2vw, 91px);

  line-height: 1.40;
}


@media(max-width:850px) {

  html[lang="ar"] .hero-luxury h1 {
    font-size:
      clamp(43px, 9.5vw, 61px);

    line-height:
      1.45;
  }


  html[lang="ar"] .hero-luxury h1 em {
    margin-top:
      14px;

    line-height:
      1.46;
  }

}


/* =========================================================
   COLLECTION PREVIEWS
   ========================================================= */

.volume-preview {
  position: relative;

  width: 100%;

  aspect-ratio:
    4 / 5 !important;

  margin:
    30px 0
    27px;

  overflow: hidden;

  border:
    1px solid rgba(211,176,106,.30);

  background:
    #061D18;

  box-shadow:
    0 20px 44px rgba(0,0,0,.22);
}


.volume-preview img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit:
    cover;

  object-position:
    center center;

  filter:
    saturate(.94)
    contrast(1.02);
}


.edition-gift .volume-preview img {
  object-position:
    center 51%;
}


.edition-signature .volume-preview img {
  object-position:
    center center;
}


.edition-one .volume-preview img {
  object-position:
    center center;
}


.edition-volume {
  min-height:
    760px;
}


.volume-inner h3 {
  margin:
    0 0
    17px !important;
}


@media(max-width:700px) {

  .edition-volume {
    min-height:
      auto;
  }


  .volume-preview {
    aspect-ratio:
      4 / 5 !important;

    margin:
      24px 0;
  }

}


/* =========================================================
   COLLECTION BACKGROUND
   ========================================================= */

.collectible-editions {
  background:
    radial-gradient(
      circle at 50% -5%,
      rgba(211,176,106,.10),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #031B16 0%,
      #062A22 53%,
      #011510 100%
    ) !important;
}


/* =========================================================
   IVORY SECTIONS
   ========================================================= */

.editorial-story,
.ritual-how {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(211,176,106,.09),
      transparent 27%
    ),
    linear-gradient(
      120deg,
      #F7EBD6,
      #F1E3CB 54%,
      #EAD9BB
    ) !important;
}


/* =========================================================
   AUTHOR WORLD
   Burgundy becomes accent, NOT the whole environment
   ========================================================= */

.author-worlds {
  background:
    radial-gradient(
      circle at 8% 30%,
      rgba(100,37,56,.26),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 13%,
      rgba(211,176,106,.09),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #031813 0%,
      #062A22 53%,
      #031B17 100%
    ) !important;

  color:
    var(--fk-ivory);
}


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


.author-copy .author-lead {
  color:
    rgba(255,241,218,.91) !important;
}


.author-copy p {
  color:
    rgba(245,232,207,.74) !important;
}


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


.author-library-card {
  background:
    linear-gradient(
      145deg,
      #F8ECD7,
      #EAD9BB
    ) !important;

  border-color:
    rgba(211,176,106,.42) !important;

  box-shadow:
    0 34px 82px rgba(0,0,0,.30);
}


/* Burgundy only as a restrained signature accent */
.author-library-card::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  inset-inline-end: 0;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--fk-burgundy),
      transparent
    );

  opacity:
    .70;
}


/* =========================================================
   CLOSING
   ========================================================= */

.final-closing {
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(211,176,106,.09),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #05291F 0%,
      #021713 68%,
      #01110E 100%
    ) !important;
}


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


.closing-kicker,
.closing-tagline {
  color:
    var(--fk-gold) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.final-footer {
  background:
    #010D0B !important;

  border-top-color:
    rgba(211,176,106,.15) !important;
}


/* =========================================================
   SMOOTHER SECTION TRANSITIONS
   ========================================================= */

.editorial-story,
.collectible-editions,
.ritual-how,
.author-worlds,
.final-closing,
.final-footer {
  isolation:
    isolate;
}