/* =========================================================
   FOLIO & KEY — HOMEPAGE QA V4
   EXACT selectors
   Collection cleanup + contrast + global micro type
   ========================================================= */

:root {
  --fk-green-dark: #173B31;
  --fk-green-copy: #2E5146;

  --fk-ivory: #F7EBD7;
  --fk-ivory-soft: #EEDFC5;

  --fk-gold: #CDAA65;
  --fk-gold-dark: #81602D;
}


/* =========================================================
   COLLECTION — REMOVE THE UNWANTED CONSTRUCTION LINES
   ========================================================= */

/* Remove section-wide vertical construction/grid lines */
.collectible-editions::before {
  display: none !important;
  content: none !important;
}


/* Remove numbered side spine completely */
.edition-volume {
  grid-template-columns: 1fr !important;

  border-radius: 12px !important;

  overflow: hidden;
}


.volume-spine {
  display: none !important;
}


/* Remove internal rectangle/frame */
.volume-inner::before,
.volume-inner::after {
  display: none !important;
  content: none !important;
}


/* Clean card itself */
.edition-volume {
  border:
    1px solid rgba(205,170,101,.18) !important;

  box-shadow:
    0 25px 58px rgba(0,0,0,.22) !important;
}


/* =========================================================
   COLLECTION — BETTER INTERNAL SPACING
   ========================================================= */

.volume-inner {
  padding:
    34px 38px
    38px !important;
}


.volume-preview {
  margin:
    8px 0
    30px !important;

  border-radius:
    4px;

  border:
    1px solid rgba(205,170,101,.18) !important;
}


/* =========================================================
   COLLECTION TITLES
   ========================================================= */

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

  font-size:
    clamp(44px, 3.2vw, 62px) !important;

  line-height:
    1.08 !important;
}


/* Product names are English even on Arabic page */
html[lang="ar"] .volume-inner h3 {
  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  direction:
    ltr;

  unicode-bidi:
    isolate;

  text-align:
    center;
}


html[lang="en"] .volume-inner h3 {
  text-align:
    center;
}


/* =========================================================
   COLLECTION BODY COPY — ALL THREE
   ========================================================= */

.volume-inner p {
  max-width:
    31ch !important;

  margin:
    0 auto !important;

  font-size:
    20px !important;

  line-height:
    1.95 !important;

  text-align:
    center;
}


/* ONE OF ONE */
.edition-one .volume-inner h3 {
  color:
    #F8EBD7 !important;

  -webkit-text-fill-color:
    #F8EBD7 !important;
}


.edition-one .volume-inner p {
  color:
    rgba(248,235,215,.90) !important;

  -webkit-text-fill-color:
    rgba(248,235,215,.90) !important;

  opacity:
    1 !important;
}


/* SIGNATURE */
.edition-signature .volume-inner h3 {
  color:
    #FFF0DF !important;

  -webkit-text-fill-color:
    #FFF0DF !important;
}


.edition-signature .volume-inner p {
  color:
    rgba(255,240,223,.91) !important;

  -webkit-text-fill-color:
    rgba(255,240,223,.91) !important;

  opacity:
    1 !important;
}


/* =========================================================
   GIFT EDITION — EXACT CONTRAST FIX
   ========================================================= */

.edition-gift .volume-inner h3 {
  color:
    #143A30 !important;

  -webkit-text-fill-color:
    #143A30 !important;
}


.edition-gift .volume-inner p {
  color:
    #294C41 !important;

  -webkit-text-fill-color:
    #294C41 !important;

  opacity:
    1 !important;

  text-shadow:
    none !important;
}


.edition-gift .volume-status {
  color:
    #76562C !important;

  -webkit-text-fill-color:
    #76562C !important;
}


.edition-gift .volume-monogram {
  color:
    #76562C !important;
}


.edition-gift .volume-rule {
  background:
    rgba(80,57,30,.33) !important;
}


/* =========================================================
   COLLECTION STATUS + FOOTER — NO TINY TYPE
   ========================================================= */

.volume-status {
  font-size:
    14px !important;

  line-height:
    1.4 !important;

  letter-spacing:
    .10em !important;
}


html[lang="ar"] .volume-status {
  font-family:
    "Noto Naskh Arabic",
    serif !important;

  font-size:
    16px !important;

  letter-spacing:
    0 !important;
}


.volume-footer {
  margin-top:
    34px !important;
}


.volume-monogram {
  font-size:
    22px !important;
}


/* =========================================================
   GLOBAL MICRO TYPE
   Previously many of these were 8px–11px.
   Bring all to usable size.
   ========================================================= */

/* Section index labels */
.editorial-story-index,
.editions-index,
.ritual-index,
.author-index {
  font-size:
    14px !important;

  line-height:
    1.4 !important;
}


/* Circular section numbers */
.editorial-story-index span:first-child,
.editions-index span:first-child,
.ritual-index span:first-child,
.author-index span:first-child {
  font-size:
    13px !important;
}


/* Story small signature */
.story-quiet-mark {
  font-size:
    13px !important;
}


/* Author "coming later" note */
.author-note {
  font-size:
    14px !important;

  letter-spacing:
    .08em !important;
}


html[lang="ar"] .author-note {
  font-size:
    16px !important;

  letter-spacing:
    0 !important;
}


/* Author card eyebrow */
.author-card-top small {
  font-size:
    13px !important;

  letter-spacing:
    .15em !important;
}


/* Author card title */
.author-card-top strong {
  font-size:
    28px !important;
}


/* Author card row numbers */
.author-card-entry > span {
  font-size:
    14px !important;
}


/* Author card copy */
.author-card-entry p {
  font-size:
    18px !important;

  line-height:
    1.75 !important;
}


html[lang="ar"] .author-card-entry p {
  font-size:
    20px !important;

  line-height:
    1.85 !important;
}


/* Author footer */
.author-card-footer {
  font-size:
    12px !important;

  letter-spacing:
    .11em !important;
}


/* Closing kicker */
.closing-kicker {
  font-size:
    14px !important;
}


/* Footer nav */
.footer-nav a {
  font-size:
    14px !important;
}


html[lang="ar"] .footer-nav a {
  font-size:
    17px !important;
}


/* Footer legal / bottom line */
.footer-end {
  font-size:
    12px !important;
}


html[lang="ar"] .footer-end {
  font-size:
    15px !important;
}


/* =========================================================
   MAIN BODY COPY — SLIGHTLY LARGER CONSISTENTLY
   ========================================================= */

.story-copy-side p,
.ritual-heading p,
.ritual-step p,
.author-copy p,
.final-closing p {
  font-size:
    18px !important;

  line-height:
    1.9 !important;
}


html[lang="ar"] .story-copy-side p,
html[lang="ar"] .ritual-heading p,
html[lang="ar"] .ritual-step p,
html[lang="ar"] .author-copy p,
html[lang="ar"] .final-closing p {
  font-size:
    20px !important;

  line-height:
    2 !important;
}


/* Author lead slightly larger than normal body */
html[lang="ar"] .author-copy .author-lead {
  font-size:
    22px !important;
}


.author-copy .author-lead {
  font-size:
    20px !important;
}


/* =========================================================
   AUTHOR CARD — KEEP LIGHT BACKGROUND HIGH CONTRAST
   ========================================================= */

.author-library-card {
  color:
    #173B31 !important;
}


.author-card-entry p {
  color:
    #294C41 !important;

  -webkit-text-fill-color:
    #294C41 !important;

  opacity:
    1 !important;
}


.author-card-top strong {
  color:
    #173B31 !important;

  -webkit-text-fill-color:
    #173B31 !important;
}


.author-card-top small,
.author-card-entry > span,
.author-card-footer {
  color:
    #76562C !important;

  -webkit-text-fill-color:
    #76562C !important;
}


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

@media (max-width: 700px) {

  .volume-inner {
    padding:
      28px 24px
      30px !important;
  }


  .volume-inner h3 {
    font-size:
      clamp(38px, 10vw, 48px) !important;
  }


  .volume-inner p {
    max-width:
      100% !important;

    font-size:
      18px !important;

    line-height:
      1.85 !important;
  }


  html[lang="ar"] .volume-inner p {
    font-size:
      19px !important;

    line-height:
      1.95 !important;
  }


  .volume-status {
    font-size:
      14px !important;
  }


  html[lang="ar"] .volume-status {
    font-size:
      16px !important;
  }


  .editorial-story-index,
  .editions-index,
  .ritual-index,
  .author-index {
    font-size:
      14px !important;
  }


  html[lang="ar"] .author-card-entry p {
    font-size:
      18px !important;
  }


  .author-card-footer {
    font-size:
      11px !important;
  }

}


/* =========================================================
   COLLECTION CARDS — CLICKABLE EDITIONS
   ========================================================= */

a.edition-volume {
  position:relative;

  color:inherit;

  text-decoration:none;

  cursor:pointer;
}


a.edition-volume::after {
  content:"↗";

  position:absolute;

  top:18px;
  inset-inline-end:18px;

  z-index:10;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(205,170,101,.36);

  border-radius:50%;

  color:
    #cdaa65;

  background:
    rgba(2,24,19,.40);

  backdrop-filter:
    blur(6px);

  font-family:
    Arial,
    sans-serif;

  font-size:17px;

  opacity:.72;

  transition:
    transform .25s ease,
    opacity .25s ease,
    background .25s ease;
}


.edition-gift::after {
  color:
    #725326 !important;

  background:
    rgba(247,235,213,.75) !important;

  border-color:
    rgba(91,65,30,.30) !important;
}


a.edition-volume:hover::after {
  transform:
    translate(2px,-2px);

  opacity:1;
}


a.edition-volume:hover {
  transform:
    translateY(-7px);
}


@media(max-width:700px) {

  a.edition-volume::after {
    width:34px;
    height:34px;

    top:14px;
    inset-inline-end:14px;
  }

}

/* =========================================================
   BATCH 4A.1d — HERO FULL-EDGE FEATHER
   Feather all image edges to remove any sharp rectangle.
   Keep LTR / RTL only for focal positioning.
   ========================================================= */

.fk-hero-v5-media {
  overflow: hidden;
  position: relative;
}

/* إذا كان في overlay قديم يسبب edge واضح، نطفيه */
.fk-hero-v5-media::after,
.fk-hero-v5-media::before {
  pointer-events: none;
}

/* الصورة نفسها */
.fk-hero-v5-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) !important;

  /* Feather on all 4 edges */
  -webkit-mask-image:
    radial-gradient(
      ellipse 88% 84% at 50% 50%,
      rgba(0,0,0,1) 58%,
      rgba(0,0,0,0.98) 68%,
      rgba(0,0,0,0.92) 76%,
      rgba(0,0,0,0.74) 84%,
      rgba(0,0,0,0.42) 92%,
      rgba(0,0,0,0.12) 97%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 88% 84% at 50% 50%,
      rgba(0,0,0,1) 58%,
      rgba(0,0,0,0.98) 68%,
      rgba(0,0,0,0.92) 76%,
      rgba(0,0,0,0.74) 84%,
      rgba(0,0,0,0.42) 92%,
      rgba(0,0,0,0.12) 97%,
      transparent 100%
    );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* =========================================================
   FOCAL POINT
   Move attention more toward the physical bookmark/key.
   Mirror between LTR and RTL.
   ========================================================= */

html[dir="ltr"] .fk-hero-v5-img {
  object-position: 36% 58% !important;
}

html[dir="rtl"] .fk-hero-v5-img {
  object-position: 64% 58% !important;
}


/* Mobile: slightly gentler crop */
@media (max-width: 900px) {
  .fk-hero-v5-img {
    transform: scale(1.03) !important;
  }

  html[dir="ltr"] .fk-hero-v5-img {
    object-position: 40% 56% !important;
  }

  html[dir="rtl"] .fk-hero-v5-img {
    object-position: 60% 56% !important;
  }
}


/* Extra softening on container edges */
.fk-hero-v5-media {
  border-radius: 22px;
}

.fk-hero-v5-media,
.fk-hero-v5-media canvas,
.fk-hero-v5-media picture,
.fk-hero-v5-media img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}