/* =========================================================
   FOLIO & KEY
   COMBINED STAGE C
   HOW + AUTHORS + CLOSING + FOOTER
   ========================================================= */


/* =========================================================
   HOW IT WORKS — THE RITUAL
   ========================================================= */

.ritual-how {
  position: relative;

  overflow: hidden;

  padding:
    125px 7%
    145px;

  color:
    #173128;

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(140, 106, 54, .10),
      transparent 27%
    ),
    linear-gradient(
      120deg,
      #F7EEDC,
      #EFE2CA 55%,
      #E9D9BC
    );
}


.ritual-how::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .20;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(75, 52, 28, .035) 0,
      rgba(75, 52, 28, .035) 1px,
      transparent 1px,
      transparent 5px
    );
}


.ritual-shell {
  position: relative;
  z-index: 2;

  max-width: 1480px;

  margin-inline: auto;
}


.ritual-index,
.author-index {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-bottom: 28px;

  color:
    #8C6A36;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .19em;

  text-transform: uppercase;
}


.ritual-index span:first-child,
.author-index span:first-child {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid rgba(122, 89, 42, .28);

  border-radius: 50%;
}


.ritual-heading {
  margin-bottom: 85px;
}


.ritual-heading-grid {
  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 80px;

  align-items: end;
}


.ritual-heading h2 {
  max-width: 760px;

  margin: 0;

  color:
    #14352B;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(48px, 5vw, 76px);

  font-weight: 400;

  line-height: 1.08;
}


html[lang="ar"] .ritual-heading h2 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size:
    clamp(58px, 5.7vw, 88px);

  line-height:
    1.30;
}


.ritual-heading p {
  max-width: 450px;

  margin: 0;

  color:
    rgba(20,53,43,.68);

  font-family:
    Arial,
    sans-serif;

  font-size: 17px;

  line-height: 1.8;
}


html[lang="ar"] .ritual-heading p {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 19px;

  line-height: 2;
}


/* track */
.ritual-track {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 34px;
}


.ritual-track::before {
  content: "";

  position: absolute;

  top: 70px;

  left: 7%;
  right: 7%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(126,94,49,.30) 12%,
      rgba(126,94,49,.30) 88%,
      transparent
    );
}


.ritual-step {
  position: relative;

  min-height: 310px;

  padding:
    0 14px;

  text-align: center;
}


.ritual-number {
  margin-bottom: 21px;

  color:
    rgba(119,87,44,.62);

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .20em;
}


.ritual-symbol {
  position: relative;
  z-index: 2;

  width: 78px;
  height: 78px;

  margin:
    0 auto
    32px;

  display: grid;
  place-items: center;

  color:
    #A98245;

  background:
    #F4E8D1;

  border:
    1px solid rgba(120,86,40,.30);

  border-radius: 50%;

  box-shadow:
    0 10px 30px rgba(87,57,22,.08);
}


.ritual-symbol span {
  font-size: 20px;
}


.ritual-step h3 {
  margin:
    0 0
    14px;

  color:
    #173128;

  font-family:
    Georgia,
    serif;

  font-size: 28px;

  font-weight: 400;
}


html[lang="ar"] .ritual-step h3 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size: 37px;
}


.ritual-step p {
  max-width: 260px;

  margin-inline: auto;

  color:
    rgba(23,49,40,.68);

  font-family:
    Arial,
    sans-serif;

  font-size: 14px;

  line-height: 1.8;
}


html[lang="ar"] .ritual-step p {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 16px;

  line-height: 1.95;
}


/* =========================================================
   AUTHOR WORLDS
   ========================================================= */

.author-worlds {
  position: relative;

  overflow: hidden;

  padding:
    135px 7%;

  color:
    #F7EBD5;

  background:
    radial-gradient(
      circle at 15% 30%,
      rgba(129,36,54,.38),
      transparent 33%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(212,179,115,.09),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #24121A 0%,
      #4E1828 35%,
      #073027 100%
    );
}


.author-worlds::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );

  background-size:
    120px 100%;

  opacity:
    .35;
}


.author-shell {
  position: relative;
  z-index: 2;

  max-width: 1480px;

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:
    clamp(70px, 9vw, 145px);

  align-items: center;
}


.author-index {
  color:
    #D4B373;
}


.author-index span:first-child {
  border-color:
    rgba(212,179,115,.30);
}


.author-copy h2 {
  max-width: 720px;

  margin:
    0 0
    35px;

  color:
    #F7EBD5;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(47px, 4.8vw, 74px);

  font-weight: 400;

  line-height: 1.08;
}


html[lang="ar"] .author-copy h2 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size:
    clamp(57px, 5.4vw, 84px);

  line-height:
    1.32;
}


.author-copy p {
  max-width: 640px;

  margin:
    0 0
    22px;

  color:
    rgba(247,235,213,.72);

  font-family:
    Arial,
    sans-serif;

  font-size: 16px;

  line-height: 1.85;
}


html[lang="ar"] .author-copy p {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 18px;

  line-height: 2;
}


.author-copy .author-lead {
  color:
    rgba(247,235,213,.91);

  font-size: 18px;
}


html[lang="ar"] .author-copy .author-lead {
  font-size: 20px;
}


.author-note {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 37px;

  color:
    #D4B373;

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.author-note span {
  width: 50px;
  height: 1px;

  background:
    rgba(212,179,115,.55);
}


/* library card */
.author-card-wrap {
  position: relative;
}


.author-card-wrap::before {
  content: "";

  position: absolute;

  inset:
    10% -8%;

  background:
    radial-gradient(
      circle,
      rgba(212,179,115,.16),
      transparent 65%
    );

  filter:
    blur(28px);
}


.author-library-card {
  position: relative;
  z-index: 2;

  max-width: 570px;

  margin-inline: auto;

  padding:
    46px;

  color:
    #173128;

  background:
    linear-gradient(
      145deg,
      #F8EFDf,
      #EADBC0
    );

  border:
    1px solid rgba(212,179,115,.45);

  box-shadow:
    0 38px 95px rgba(0,0,0,.35);

  transform:
    rotate(1.1deg);
}


.author-library-card::before {
  content: "";

  position: absolute;

  inset: 16px;

  pointer-events: none;

  border:
    1px solid rgba(117,84,40,.18);
}


.author-card-top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 22px;
}


.author-card-top img {
  width: 82px;
  height: 82px;

  object-fit: contain;
}


.author-card-top small,
.author-card-top strong {
  display: block;
}


.author-card-top small {
  margin-bottom: 5px;

  color:
    #8B6835;

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  letter-spacing: .23em;
}


.author-card-top strong {
  color:
    #173128;

  font-family:
    Georgia,
    serif;

  font-size: 25px;

  font-weight: 400;

  letter-spacing: .10em;
}


.author-card-divider {
  position: relative;
  z-index: 2;

  height: 1px;

  margin:
    32px 0
    20px;

  background:
    rgba(96,69,34,.22);
}


.author-card-entry {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    38px 1fr;

  gap: 17px;

  padding:
    16px 0;

  border-bottom:
    1px solid rgba(96,69,34,.12);
}


.author-card-entry > span {
  color:
    #967039;

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .15em;
}


.author-card-entry p {
  margin: 0;

  color:
    rgba(23,49,40,.78);

  font-family:
    Arial,
    sans-serif;

  font-size: 14px;

  line-height: 1.55;
}


html[lang="ar"] .author-card-entry p {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 16px;
}


.author-card-footer {
  position: relative;
  z-index: 2;

  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-top:
    28px;

  color:
    #8B6835;

  font-family:
    Arial,
    sans-serif;

  font-size: 8px;

  letter-spacing: .16em;
}


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

.final-closing {
  position: relative;

  overflow: hidden;

  padding:
    145px 7%
    130px;

  text-align: center;

  color:
    #F7EBD5;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(212,179,115,.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #052C24,
      #021713
    );
}


.final-closing::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 20%,
      rgba(0,0,0,.22) 100%
    );
}


.closing-inner {
  position: relative;
  z-index: 2;

  max-width: 940px;

  margin-inline: auto;
}


.closing-symbol {
  width: 90px;
  height: auto;

  margin-bottom: 28px;

  opacity: .94;
}


.closing-kicker {
  margin-bottom: 22px;

  color:
    #D4B373;

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .27em;

  text-transform: uppercase;
}


.final-closing h2 {
  margin:
    0 auto
    27px;

  color:
    #F7EBD5;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(52px, 5.5vw, 82px);

  font-weight: 400;

  line-height: 1.08;
}


html[lang="ar"] .final-closing h2 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size:
    clamp(61px, 6vw, 94px);

  line-height:
    1.32;
}


.final-closing > .closing-inner > p {
  max-width: 620px;

  margin:
    0 auto;

  color:
    rgba(247,235,213,.72);

  font-family:
    Arial,
    sans-serif;

  font-size: 17px;

  line-height: 1.8;
}


html[lang="ar"]
.final-closing > .closing-inner > p {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 19px;

  line-height: 2;
}


.closing-actions {
  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 40px;
}


.closing-actions a {
  min-width: 190px;

  border-radius: 999px;
}


.closing-ornament {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 15px;

  width: min(420px, 80%);

  margin:
    64px auto
    25px;

  color:
    #D4B373;
}


.closing-ornament span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,179,115,.40),
      transparent
    );
}


.closing-ornament i {
  font-size: 9px;

  font-style: normal;
}


.closing-tagline {
  color:
    #D4B373;

  font-family:
    Georgia,
    serif;

  font-size: 17px;

  font-style: italic;
}


html[lang="ar"] .closing-tagline {
  font-family:
    "Amiri",
    serif;

  font-size: 24px;

  font-style: normal;
}


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

.final-footer {
  padding:
    65px 7%
    38px;

  color:
    rgba(247,235,213,.65);

  background:
    #01100D;

  border-top:
    1px solid rgba(212,179,115,.16);
}


.footer-shell {
  max-width: 1480px;

  margin-inline: auto;
}


.footer-brand {
  display: flex;

  justify-content: space-between;
  align-items: end;

  gap: 40px;

  padding-bottom: 35px;

  border-bottom:
    1px solid rgba(212,179,115,.12);
}


.footer-logo {
  width: auto;

  height: 74px;

  max-width: 320px;

  object-fit: contain;
}


html[lang="ar"] .footer-logo-en,
html[lang="en"] .footer-logo-ar {
  display: none;
}


.footer-brand p {
  margin: 0;

  color:
    #D4B373;

  font-family:
    Georgia,
    serif;

  font-size: 15px;
}


html[lang="ar"] .footer-brand p {
  font-family:
    "Amiri",
    serif;

  font-size: 21px;
}


.footer-nav {
  display: flex;

  justify-content: center;

  gap:
    clamp(25px, 5vw, 70px);

  padding:
    35px 0;
}


.footer-nav a {
  color:
    rgba(247,235,213,.62);

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  letter-spacing: .12em;

  text-decoration: none;

  transition:
    color .2s ease;
}


html[lang="ar"] .footer-nav a {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 15px;

  letter-spacing: 0;
}


.footer-nav a:hover {
  color:
    #D4B373;
}


.footer-end {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-top:
    25px;

  border-top:
    1px solid rgba(212,179,115,.08);

  color:
    rgba(247,235,213,.38);

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  letter-spacing: .10em;
}


html[lang="ar"] .footer-end {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 13px;

  letter-spacing: 0;
}


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

@media (max-width: 950px) {

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

    gap:
      25px;
  }


  .ritual-track {
    grid-template-columns:
      repeat(2, 1fr);

    gap:
      65px 30px;
  }


  .ritual-track::before {
    display: none;
  }


  .author-shell {
    grid-template-columns:
      1fr;

    gap:
      75px;
  }


  .author-library-card {
    max-width:
      620px;
  }

}


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

@media (max-width: 650px) {

  .ritual-how {
    padding:
      88px 23px
      100px;
  }


  .ritual-heading {
    margin-bottom:
      55px;
  }


  html[lang="ar"]
  .ritual-heading h2 {
    font-size:
      clamp(48px, 12vw, 63px);

    line-height:
      1.35;
  }


  .ritual-track {
    grid-template-columns:
      1fr;

    gap: 0;
  }


  .ritual-step {
    position: relative;

    min-height: 0;

    padding:
      0 0
      55px;

    text-align: start;

    display: grid;

    grid-template-columns:
      72px 1fr;

    column-gap: 20px;
  }


  .ritual-number {
    grid-column: 1;

    margin: 0;

    text-align: center;
  }


  .ritual-symbol {
    grid-column: 1;

    width: 62px;
    height: 62px;

    margin:
      10px auto
      0;
  }


  .ritual-step h3 {
    grid-column: 2;

    margin:
      0 0
      8px;

    align-self: end;
  }


  .ritual-step p {
    grid-column: 2;

    max-width: none;

    margin: 0;
  }


  html[lang="ar"]
  .ritual-step h3 {
    font-size: 34px;
  }


  /* AUTHORS */

  .author-worlds {
    padding:
      95px 23px
      105px;
  }


  html[lang="ar"]
  .author-copy h2 {
    font-size:
      clamp(48px, 12vw, 64px);

    line-height:
      1.36;
  }


  .author-library-card {
    padding:
      34px 27px;

    transform:
      none;
  }


  .author-card-top img {
    width: 65px;
    height: 65px;
  }


  .author-card-top strong {
    font-size: 20px;
  }


  /* CLOSING */

  .final-closing {
    padding:
      100px 22px
      90px;
  }


  .closing-symbol {
    width:
      76px;
  }


  html[lang="ar"]
  .final-closing h2 {
    font-size:
      clamp(50px, 12.5vw, 65px);

    line-height:
      1.38;
  }


  .closing-actions {
    width: 100%;

    max-width: 310px;

    margin:
      34px auto
      0;

    flex-direction: column;
  }


  .closing-actions a {
    width: 100%;
  }


  /* FOOTER */

  .final-footer {
    padding:
      52px 22px
      30px;
  }


  .footer-brand {
    flex-direction:
      column;

    align-items:
      center;

    text-align:
      center;
  }


  .footer-logo {
    height: 68px;

    max-width:
      260px;
  }


  .footer-nav {
    flex-wrap: wrap;

    gap:
      18px 30px;
  }


  .footer-end {
    flex-direction:
      column;

    align-items:
      center;

    text-align:
      center;

    gap:
      8px;
  }

}