/* امتداد للهوية الأصلية؛ تبقى ملفات المشغّل والتصميم الأساسية كما هي. */
.final-wrap { width: min(1200px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.final-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 22px var(--gutter); border-block: 1px solid var(--line); }
.final-nav a, .final-social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--cream-2); }
.final-nav a:hover, .final-social a:hover { color: var(--coral); }
.edition-note { max-width: 780px; padding: 24px var(--gutter) 0; margin-inline: auto; text-align: center; color: var(--muted); }
.edition-note a { color: var(--cream); text-underline-offset: 5px; }
.final-scene { position: relative; margin-block: 0 70px; }
.final-scene img { width: 100%; height: clamp(240px, 40vw, 480px); object-fit: cover; border-radius: 4px; }
.final-scene figcaption, .final-workspace figcaption { color: var(--muted); margin-block-start: 10px; font-size: .9rem; }
.final-edition { margin-block: 20px; color: var(--sage); font-size: .95rem; }
.final-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.final-store { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-raise); text-decoration: none; transition: border-color .2s, background .2s; }
.final-store > span:first-child { font-size: 1.15rem; font-weight: 600; color: var(--cream); }
.final-store__action { color: var(--coral-2); font-size: .85rem; }
.final-store:hover { border-color: var(--coral); background: var(--panel); }
.buy__text { min-width: 0; }
.final-listening { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); padding-block: 60px 100px; }
.final-listening img { width: 100%; height: auto; border-radius: 4px; }
.final-eyebrow { color: var(--coral); margin-bottom: 18px; }
.final-listening h2, .final-author h2, .final-faq h2 { font-family: var(--f-display); font-size: clamp(1.55rem, 3vw, 2.6rem); line-height: 1.65; margin: 0 0 24px; }
.final-listening p:not(.final-eyebrow), .final-author p:not(.final-eyebrow) { color: var(--cream-2); margin-bottom: 22px; }
.final-listening .btn, .final-author .btn { margin-top: 10px; }
.final-author { display: grid; grid-template-columns: minmax(180px, .65fr) 1.35fr; gap: clamp(28px, 7vw, 100px); align-items: center; padding-block: 70px; border-top: 1px solid var(--line); }
.final-author__portrait img { width: 100%; height: auto; border-radius: 4px; background: var(--bg-raise); }
.final-author__role { color: var(--sage) !important; }
.final-workspace { margin-block: 35px 80px; }
.final-workspace img { width: 100%; height: clamp(240px, 34vw, 410px); object-fit: cover; object-position: center 70%; border-radius: 4px; }
.final-faq { max-width: 900px; padding-block: 30px 110px; }
.final-faq details { border-bottom: 1px solid var(--line-2); }
.final-faq summary { cursor: pointer; padding: 23px 6px; font-weight: 600; font-size: 1.1rem; }
.final-faq details[open] summary { color: var(--coral-2); }
.final-faq details p { color: var(--cream-2); padding: 0 6px 25px; max-width: 70ch; }
.final-social { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 20px 0; }
.final-stores.buy__cta::after { display: none; }
.final-stores.buy__cta { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.final-covers { margin-block: 0 40px; border-block: 1px solid var(--line); }
.final-covers summary { cursor: pointer; padding: 20px 0; color: var(--cream); }
.final-covers > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; margin-inline: auto; padding-bottom: 30px; }
.final-covers figure { margin: 0; min-width: 0; }
.final-covers img { width: 100%; height: auto; }
.final-covers figcaption { color: var(--muted); font-size: .85rem; margin-top: 10px; }
.final-covers a { text-decoration: none; }
/* Full-width photographs retain the track's existing card widths and scroll hooks. */
.topic { grid-template-rows: auto auto 1fr; padding: 0 0 18px; }
.topic__top { display: block; position: relative; border-radius: inherit; }
.topic__media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: inherit; }
.topic__n { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; padding: 8px 11px; border: 1px solid rgba(244, 236, 221, .3); border-radius: 10px; background: #071c1f; color: var(--cream); font-size: 1.5rem; line-height: 1; -webkit-text-stroke: 0; }
.topic__title { grid-row: 2; margin: 14px 20px 0; }
.topic__text { grid-row: 3; margin: 8px 20px 0; }
@media (max-width: 899px) and (max-height: 700px) {
  .topics__pin { padding-block: calc(var(--header-h) + 14px) 16px; }
  .topic { padding-block-end: 12px; }
  .topic__title { margin-block-start: 10px; }
  .topic__text { margin-block-start: 6px; }
}
/* تبقى المحاور الستة قابلة للقراءة عند تقليل الحركة أو غياب JavaScript. */
html:not(.js) .topics__pin { block-size: auto; overflow: visible; }
html:not(.js) .topics__viewport { display: block; overflow: visible; margin-block: 30px; }
html:not(.js) .topics__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); inline-size: 100%; max-block-size: none; }
html:not(.js) .topic { inline-size: auto; }
html:not(.js) .topics__route { display: none; }
:where(#buy, #author, #faq, #topics, #about) { scroll-margin-top: calc(var(--header-h) + 20px); }
@media (max-width: 700px) {
  .final-listening, .final-author { grid-template-columns: 1fr; padding-block: 40px; }
  .final-author__portrait { max-width: 230px; margin-inline: auto; }
  .final-store { padding: 14px 12px; }
  .final-scene { margin-bottom: 30px; }
  .final-faq { padding-bottom: 65px; }
  .final-nav { gap: 2px 20px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .stage__ring { visibility: hidden; }
}