/* =========================================================
   FOLIO & KEY — COLLECTION DETAIL PAGES V1
   Gift / Signature / One of One
   ========================================================= */

:root {
  --fk-forest-950:#01130f;
  --fk-forest-900:#021b16;
  --fk-forest-800:#052a22;
  --fk-forest-700:#0b3b30;

  --fk-paper:#f5e8d1;
  --fk-paper-2:#ead8b8;

  --fk-ink:#17392f;
  --fk-ink-soft:#35594d;

  --fk-ivory:#f7ead4;
  --fk-ivory-soft:#e8d7ba;

  --fk-gold:#cdaa65;
  --fk-gold-deep:#83612e;

  --fk-burgundy:#671d35;
  --fk-burgundy-2:#431222;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;

  background:
    var(--fk-forest-950);

  color:
    var(--fk-ivory);

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

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

a {
  color:inherit;
}

img {
  max-width:100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.edition-header {
  position:relative;
  z-index:20;

  min-height:98px;

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

  gap:30px;

  padding:
    10px 5%;

  background:
    rgba(1,24,19,.96);

  border-bottom:
    1px solid rgba(205,170,101,.15);
}


.edition-brand {
  display:block;

  text-decoration:none;
}


.edition-logo {
  display:block;

  width:auto;
  height:78px;

  max-width:340px;

  object-fit:contain;
}


.edition-header-actions {
  display:flex;
  align-items:center;

  gap:12px;
}


.edition-back,
.language-toggle {
  min-height:48px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:
    10px 20px;

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

  border-radius:
    999px;

  color:
    var(--fk-ivory);

  background:
    rgba(255,255,255,.015);

  text-decoration:none;

  font-size:14px;

  cursor:pointer;
}


html[lang="ar"] .edition-back,
html[lang="ar"] .language-toggle {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size:16px;
}


.edition-back:hover,
.language-toggle:hover {
  border-color:
    rgba(205,170,101,.72);

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


/* =========================================================
   HERO
   ========================================================= */

.edition-hero {
  position:relative;

  overflow:hidden;

  padding:
    90px 6%
    110px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(205,170,101,.08),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      #021712,
      #052b22 58%,
      #01120f
    );
}


.edition-hero-shell {
  max-width:1500px;

  margin-inline:auto;

  display:grid;

  grid-template-columns:
    minmax(430px,.95fr)
    minmax(500px,1.05fr);

  gap:
    clamp(60px,7vw,120px);

  align-items:center;
}


html[dir="rtl"] .edition-hero-shell {
  grid-template-areas:
    "copy artwork";
}


html[dir="ltr"] .edition-hero-shell {
  grid-template-areas:
    "artwork copy";
}


.edition-hero-artwork {
  grid-area:artwork;

  position:relative;

  min-width:0;
}


.edition-hero-frame {
  position:relative;

  overflow:hidden;

  max-width:610px;

  margin-inline:auto;

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

  box-shadow:
    0 40px 100px rgba(0,0,0,.34);
}


.edition-hero-frame img {
  display:block;

  width:100%;

  aspect-ratio:
    4 / 5;

  object-fit:cover;

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


.edition-hero-frame::after {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -90px 110px rgba(0,0,0,.12);
}


.edition-hero-copy {
  grid-area:copy;

  max-width:690px;

  min-width:0;
}


.edition-eyebrow {
  display:flex;
  align-items:center;

  gap:15px;

  margin-bottom:24px;

  color:
    var(--fk-gold);

  font-family:
    Arial,
    sans-serif;

  font-size:12px;

  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;
}


.edition-eyebrow::after {
  content:"";

  width:54px;
  height:1px;

  background:
    rgba(205,170,101,.45);
}


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

  font-size:16px;

  letter-spacing:0;
}


.edition-hero h1 {
  margin:
    0 0
    28px;

  color:
    var(--fk-ivory);

  font-size:
    clamp(64px,6vw,105px);

  font-weight:400;

  line-height:.98;

  letter-spacing:-.035em;
}


.edition-hero h1 span {
  display:block;

  margin-top:14px;

  color:
    var(--fk-gold);

  font-size:.27em;

  line-height:1.3;

  letter-spacing:.12em;

  text-transform:uppercase;
}


html[lang="ar"] .edition-hero h1 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  line-height:1.22;
}


html[lang="ar"] .edition-hero h1 span {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size:.30em;

  letter-spacing:0;
}


.edition-lead {
  max-width:620px;

  margin:
    0 0
    18px;

  color:
    rgba(247,234,212,.90);

  font-family:
    Arial,
    sans-serif;

  font-size:19px;

  line-height:1.85;
}


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

  font-size:21px;

  line-height:2;
}


.edition-secondary-copy {
  max-width:620px;

  margin:0;

  color:
    rgba(247,234,212,.66);

  font-family:
    Arial,
    sans-serif;

  font-size:16px;

  line-height:1.8;
}


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

  font-size:18px;

  line-height:2;
}


.edition-hero-actions {
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:36px;
}


.edition-btn-primary,
.edition-btn-secondary {
  min-height:50px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:
    12px 25px;

  border-radius:999px;

  text-decoration:none;

  font-family:
    Arial,
    sans-serif;

  font-size:14px;

  transition:
    transform .2s ease,
    border-color .2s ease;
}


html[lang="ar"] .edition-btn-primary,
html[lang="ar"] .edition-btn-secondary {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size:16px;
}


.edition-btn-primary {
  color:
    var(--fk-ink);

  background:
    var(--fk-paper);
}


.edition-btn-secondary {
  color:
    var(--fk-ivory);

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


.edition-btn-primary:hover,
.edition-btn-secondary:hover {
  transform:
    translateY(-2px);
}


/* =========================================================
   IVORY EDITORIAL SECTION
   ========================================================= */

.edition-editorial {
  padding:
    115px 7%;

  color:
    var(--fk-ink);

  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(142,102,44,.09),
      transparent 27%
    ),
    linear-gradient(
      120deg,
      #f8ecd8,
      #f1e2ca 55%,
      #e9d7b9
    );
}


.edition-editorial-shell {
  max-width:1450px;

  margin-inline:auto;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.82fr);

  gap:
    clamp(65px,8vw,135px);

  align-items:start;
}


.edition-section-number {
  display:flex;
  align-items:center;

  gap:14px;

  margin-bottom:24px;

  color:
    var(--fk-gold-deep);

  font-family:
    Arial,
    sans-serif;

  font-size:14px;

  font-weight:700;

  letter-spacing:.12em;
}


html[lang="ar"] .edition-section-number {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size:16px;

  letter-spacing:0;
}


.edition-editorial h2,
.edition-features h2,
.edition-world h2,
.edition-next h2 {
  margin:
    0 0
    28px;

  font-size:
    clamp(47px,4.5vw,72px);

  font-weight:400;

  line-height:1.08;
}


html[lang="ar"] .edition-editorial h2,
html[lang="ar"] .edition-features h2,
html[lang="ar"] .edition-world h2,
html[lang="ar"] .edition-next h2 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  line-height:1.40;
}


.edition-editorial p {
  color:
    var(--fk-ink-soft);

  font-family:
    Arial,
    sans-serif;

  font-size:18px;

  line-height:1.9;
}


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

  font-size:20px;

  line-height:2;
}


.edition-definition {
  padding:
    35px 0
    35px 38px;

  border-left:
    1px solid rgba(113,80,35,.25);
}


html[dir="rtl"] .edition-definition {
  padding:
    35px 38px
    35px 0;

  border-left:0;

  border-right:
    1px solid rgba(113,80,35,.25);
}


.edition-definition strong {
  display:block;

  margin-bottom:14px;

  color:
    var(--fk-gold-deep);

  font-family:
    Arial,
    sans-serif;

  font-size:13px;

  letter-spacing:.14em;

  text-transform:uppercase;
}


html[lang="ar"] .edition-definition strong {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size:16px;

  letter-spacing:0;
}


/* =========================================================
   FEATURES
   ========================================================= */

.edition-features {
  padding:
    115px 7%
    130px;

  background:
    linear-gradient(
      145deg,
      #031a15,
      #062b23 55%,
      #011410
    );
}


.edition-features-shell {
  max-width:1450px;

  margin-inline:auto;
}


.edition-features-header {
  max-width:760px;

  margin-bottom:60px;
}


.edition-features-grid {
  display:grid;

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

  gap:18px;
}


.feature-card {
  min-height:270px;

  padding:
    32px 28px;

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

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


.feature-card span {
  display:block;

  margin-bottom:48px;

  color:
    var(--fk-gold);

  font-family:
    Arial,
    sans-serif;

  font-size:13px;

  letter-spacing:.15em;
}


.feature-card h3 {
  margin:
    0 0
    14px;

  color:
    var(--fk-ivory);

  font-size:26px;

  font-weight:400;
}


html[lang="ar"] .feature-card h3 {
  font-family:
    "Amiri",
    serif;

  font-size:34px;
}


.feature-card p {
  margin:0;

  color:
    rgba(247,234,212,.68);

  font-family:
    Arial,
    sans-serif;

  font-size:15px;

  line-height:1.8;
}


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

  font-size:17px;

  line-height:1.95;
}


/* =========================================================
   DIGITAL WORLD
   ========================================================= */

.edition-world {
  padding:
    120px 7%;

  color:
    var(--fk-ink);

  background:
    linear-gradient(
      115deg,
      #f7ead5,
      #ecdbc0
    );
}


.edition-world-shell {
  max-width:1350px;

  margin-inline:auto;

  display:grid;

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

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

  align-items:center;
}


html[dir="rtl"] .edition-world-shell {
  grid-template-areas:
    "world-card world-copy";
}


html[dir="ltr"] .edition-world-shell {
  grid-template-areas:
    "world-copy world-card";
}


.edition-world-copy {
  grid-area:world-copy;
}


.edition-world-copy p {
  color:
    var(--fk-ink-soft);

  font-family:
    Arial,
    sans-serif;

  font-size:18px;

  line-height:1.9;
}


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

  font-size:20px;

  line-height:2;
}


.world-card {
  grid-area:world-card;

  padding:
    38px;

  border:
    1px solid rgba(113,80,35,.20);

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


.world-card-header {
  display:flex;
  align-items:center;

  gap:18px;

  padding-bottom:24px;

  border-bottom:
    1px solid rgba(113,80,35,.16);
}


.world-card-header img {
  width:68px;
  height:68px;

  object-fit:contain;
}


.world-card-header strong {
  color:
    var(--fk-ink);

  font-family:
    Georgia,
    serif;

  font-size:23px;

  font-weight:400;
}


.world-flow {
  margin-top:10px;
}


.world-flow-row {
  display:grid;

  grid-template-columns:
    42px 1fr;

  gap:18px;

  padding:
    19px 0;

  border-bottom:
    1px solid rgba(113,80,35,.12);
}


.world-flow-row span {
  color:
    var(--fk-gold-deep);

  font-family:
    Arial,
    sans-serif;

  font-size:13px;
}


.world-flow-row p {
  margin:0;

  color:
    var(--fk-ink-soft);

  font-family:
    Arial,
    sans-serif;

  font-size:16px;

  line-height:1.65;
}


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

  font-size:18px;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.edition-next {
  padding:
    125px 7%;

  text-align:center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(205,170,101,.11),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #052a22,
      #011410
    );
}


.edition-next-inner {
  max-width:880px;

  margin-inline:auto;
}


.edition-next h2 {
  color:
    var(--fk-ivory);
}


.edition-next p {
  max-width:620px;

  margin:
    0 auto;

  color:
    rgba(247,234,212,.72);

  font-family:
    Arial,
    sans-serif;

  font-size:18px;

  line-height:1.85;
}


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

  font-size:20px;

  line-height:2;
}


.edition-next-actions {
  display:flex;

  justify-content:center;
  flex-wrap:wrap;

  gap:12px;

  margin-top:36px;
}


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

.edition-footer {
  padding:
    46px 6%
    32px;

  background:
    #010d0b;

  border-top:
    1px solid rgba(205,170,101,.12);
}


.edition-footer-shell {
  max-width:1450px;

  margin-inline:auto;

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

  gap:35px;
}


.edition-footer img {
  height:63px;
  width:auto;

  max-width:280px;
}


.edition-footer p {
  margin:0;

  color:
    rgba(247,234,212,.48);

  font-family:
    Arial,
    sans-serif;

  font-size:13px;
}


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

  font-size:15px;
}


/* =========================================================
   SIGNATURE ACCENT
   ========================================================= */

body[data-edition="signature"]
.edition-hero {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(117,28,52,.28),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #251018,
      #571729 42%,
      #06281f 100%
    );
}


body[data-edition="signature"]
.edition-features {
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(117,28,52,.25),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #031913,
      #062920 60%,
      #241018
    );
}


/* =========================================================
   ONE OF ONE ACCENT
   ========================================================= */

body[data-edition="one"]
.edition-hero {
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(205,170,101,.13),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #01130f,
      #07372b 55%,
      #01100d
    );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px) {

  .edition-hero-shell,
  .edition-editorial-shell,
  .edition-world-shell {
    grid-template-columns:
      1fr;

    gap:
      55px;
  }


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


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


  .edition-features-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media(max-width:650px) {

  .edition-header {
    min-height:84px;

    padding:
      8px 16px;
  }


  .edition-logo {
    height:63px;

    max-width:215px;
  }


  .edition-header-actions {
    gap:7px;
  }


  .edition-back,
  .language-toggle {
    min-height:44px;

    padding:
      8px 14px;
  }


  .edition-hero {
    padding:
      70px 22px
      82px;
  }


  .edition-hero h1 {
    font-size:
      clamp(50px,14vw,70px);

    line-height:1;
  }


  html[lang="ar"] .edition-hero h1 {
    line-height:1.30;
  }


  .edition-hero-frame {
    max-width:100%;
  }


  .edition-hero-actions {
    flex-direction:column;
  }


  .edition-btn-primary,
  .edition-btn-secondary {
    width:100%;
  }


  .edition-editorial,
  .edition-features,
  .edition-world,
  .edition-next {
    padding:
      80px 22px;
  }


  .edition-editorial-shell {
    gap:35px;
  }


  .edition-definition,
  html[dir="rtl"] .edition-definition {
    padding:
      25px 0;

    border-left:0;
    border-right:0;

    border-top:
      1px solid rgba(113,80,35,.20);
  }


  .edition-features-grid {
    grid-template-columns:
      1fr;
  }


  .feature-card {
    min-height:0;
  }


  .feature-card span {
    margin-bottom:28px;
  }


  .world-card {
    padding:27px 23px;
  }


  .edition-footer-shell {
    flex-direction:column;

    text-align:center;
  }

}