/* ————————————————————————————————————————————————
   كاتب ثلاثيني — نظام التصميم
   الورق · الحبر · الطين (لون الإبراز الوحيد)
   كل قيمة في هذا الملف متغيّر. لا تعدّل الصفحات، عدّل هنا.
———————————————————————————————————————————————— */

/* ——— 1. الخطوط ———
   خط ثمانية، ثلاث عائلات:
     Serif Display → العناوين
     Serif Text    → نص التدوينة
     Sans          → الواجهة والتواريخ

   الملفات تُوضع في assets/fonts/ بهذه البنية:
     assets/fonts/thmanyah-serif-display/woff2/thmanyah-serif-display-Light.woff2
     ... إلخ

   حتى تضع الملفات، الموقع يعمل بالخطوط الاحتياطية في --font-* أدناه. */

@font-face { font-family: "Thmanyah Serif Display"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-display/woff2/thmanyah-serif-display-Light.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Serif Display"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-display/woff2/thmanyah-serif-display-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Serif Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-display/woff2/thmanyah-serif-display-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Serif Display"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-display/woff2/thmanyah-serif-display-Bold.woff2") format("woff2"); }

@font-face { font-family: "Thmanyah Serif Text"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-text/woff2/thmanyah-serif-text-Light.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Serif Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-text/woff2/thmanyah-serif-text-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Serif Text"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-text/woff2/thmanyah-serif-text-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Serif Text"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-serif-text/woff2/thmanyah-serif-text-Bold.woff2") format("woff2"); }

@font-face { font-family: "Thmanyah Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-sans/woff2/thmanyah-sans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-sans/woff2/thmanyah-sans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/thmanyah-sans/woff2/thmanyah-sans-Bold.woff2") format("woff2"); }


/* ——— 2. الرموز (tokens) ———
   اللوحة الرسمية (Brand Identity Brief):
     عنابي  #6D1F2C  الأساس: الشعار، العناوين، الأزرار
     ذهبي   #C9971C  لمسة ثانوية: الفواصل، الخطوط، قلم التظليل
     برتقالي #C1571B لمسة نادرة: معيّن الشعار ومؤشّر الكتابة فقط
     حبر    #1F2421  النص
     كريمي  #F6EDE3  الخلفية، لون واحد ثابت في كل الصفحات
   الذهبي على الكريمي لا يصلح للنص الصغير (تباين 2.3): للخطوط والتظليل فقط. */

:root {
  /* الخطوط */
  --font-display: "Thmanyah Serif Display", "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --font-text:    "Thmanyah Serif Text", "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --font-ui:      "Thmanyah Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;

  /* المقاييس */
  --step--1: clamp(.8125rem, .78rem + .15vw, .875rem);
  --step-0:  clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --step-1:  clamp(1.1875rem, 1.12rem + .35vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.26rem + .6vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  --step-5:  clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem);

  /* الفراغ */
  --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --measure: 36rem;
  --wide: 68rem;
  --leading-prose: 2.05;
  --shadow: none;

  /* صبغة الصور: الداكن عنابي والفاتح كريمي */
  --duo-dark:  #6D1F2C;
  --duo-light: #F6EDE3;
}

/* كريمي (الافتراضي، كما في الدليل) */
:root, :root[data-palette="cream"] {
  --paper:       #F6EDE3;
  --ink:         #1F2421;
  --ink-soft:    #4F4843;
  --ink-faint:   #6F655C;
  --heading:     #6D1F2C;
  --rule:        #E4D7C7;
  --rule-strong: #CDBBA6;
  --accent:      #6D1F2C;
  --gold:        #C9971C;
  --caret:       #C1571B;
  --marker:      #C9971C;
  --marker-ink:  #1F2421;
  --btn:         #6D1F2C;
  --btn-ink:     #F6EDE3;
  --btn-hover:   #1F2421;
  --accent-tint: rgba(201, 151, 28, .3);
}

/* عنابي: للحظات العالية فقط حسب الدليل، متاح إن أردته للموقع كله */
:root[data-palette="burgundy"] {
  --paper:       #6D1F2C;
  --ink:         #F6EDE3;
  --ink-soft:    #E9DDC9;
  --ink-faint:   #D9BFB3;
  --heading:     #F6EDE3;
  --rule:        rgba(246, 237, 227, .16);
  --rule-strong: rgba(246, 237, 227, .34);
  --accent:      #F6EDE3;
  --gold:        #C9971C;
  --caret:       #C1571B;
  --marker:      #C9971C;
  --marker-ink:  #1F2421;
  --btn:         #F6EDE3;
  --btn-ink:     #6D1F2C;
  --btn-hover:   #C9971C;
  --accent-tint: rgba(201, 151, 28, .3);
}

/* حبر */
:root[data-palette="ink"] {
  --paper:       #1F2421;
  --ink:         #F6EDE3;
  --ink-soft:    #CFC4B6;
  --ink-faint:   #A39A8E;
  --heading:     #F6EDE3;
  --rule:        rgba(246, 237, 227, .13);
  --rule-strong: rgba(246, 237, 227, .28);
  --accent:      #C9971C;
  --gold:        #C9971C;
  --caret:       #C1571B;
  --marker:      #C9971C;
  --marker-ink:  #1F2421;
  --btn:         #6D1F2C;
  --btn-ink:     #F6EDE3;
  --btn-hover:   #C1571B;
  --accent-tint: rgba(201, 151, 28, .3);
}


/* ——— 3. الأساس ——— */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-prose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}

h1, h2, h3, h4 {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent-tint); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

.meta {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.6;
  letter-spacing: .01em;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* فاصل: ثلاث نقاط بدل خط */
.dots { border: 0; margin: 4.5rem auto; width: 100%; max-width: var(--measure); text-align: center; }
.dots::before {
  content: "···";
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .5em;
  color: var(--gold);
}


/* ——— 4. الترويسة ——— */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -.015em;
  margin-inline-end: auto;
  color: var(--heading);
  transition: color .2s;
}
.brand:hover { opacity: .8; }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand__mark { width: 1.65rem; height: auto; flex: none; }
.brand__mark .m1 { fill: var(--heading); }
.brand__mark .m2 { fill: var(--caret); }

.nav__links { display: flex; align-items: center; gap: 1.6rem; }

.nav__link {
  font-family: var(--font-ui);
  font-size: .9375rem;
  color: var(--ink-soft);
  position: relative;
  padding-block: .35rem;
  transition: color .2s;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s, color .2s, background-color .2s;
}
.icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); background: var(--paper); }
.icon-btn svg { width: 1.0625rem; height: 1.0625rem; }


.nav__burger { display: none; }

@media (max-width: 44rem) {
  .nav__links {
    position: fixed;
    inset: 4.25rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.5rem;
    transform: translateY(-120%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow);
  }
  body[data-menu="open"] .nav__links { transform: translateY(0); }
  .nav__link { font-size: 1.0625rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); }
  .nav__link::after { display: none; }
  .nav__burger { display: grid; }
}


/* ——— 5. الهيرو الثابت ——— */

/* مؤشّر الكتابة: علامة الموقع. يظهر بعد العنوان، وعند آخر كلمة تُكتب */
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.caret {
  display: inline-block;
  width: max(3px, .055em);
  height: .92em;
  background: var(--heading);
  margin-inline-start: .14em;
  vertical-align: -.1em;
  animation: blink 1.15s linear infinite;
}

.hero {
  min-height: calc(100svh - 4.25rem);
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  position: relative;
}
.hero__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, transparent 18%, #000 72%);
          mask-image: linear-gradient(to left, transparent 18%, #000 72%);
}
.hero__pattern path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; opacity: .2; }
.hero__pattern path.one { stroke: var(--caret); opacity: .55; }
.hero .wrap { position: relative; }
@media (max-width: 44rem) {
  .hero__pattern { -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 100%); mask-image: linear-gradient(to bottom, transparent 35%, #000 100%); }
}
.hero__text > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero__text > :nth-child(2) { animation-delay: .12s; }
.hero__text > :nth-child(3) { animation-delay: .26s; }
.hero__text > :nth-child(4) { animation-delay: .4s; }

/* الهيرو بعمودين حين يوجد عنصر بصري */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.hero__visual { justify-self: center; animation: rise 1.1s .55s cubic-bezier(.2, .7, .2, 1) both; }
.hero__grid .hero__title { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem); }
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero__visual { display: none; }
  /* الصورة الشخصية تبقى على الجوال، صغيرة فوق العنوان */
  .hero__visual.portrait { display: block; order: -1; justify-self: start; width: 7.5rem; }
  .hero__visual.portrait::before { transform: translate(-.45rem, .45rem); border-width: 1.5px; }
}

/* العمر: رقم الفصل الحالي من سنوات الثلاثين، يتغيّر وحده كل سنة */
.age { display: grid; justify-items: center; text-align: center; color: var(--heading); }
.age__label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: .12em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.age__label::before, .age__label::after { content: ""; width: 1.75rem; height: 2px; background: var(--gold); }
.age__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(10rem, 4rem + 13vw, 19rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  background: linear-gradient(to top, var(--heading) 0 var(--fill, 0%), transparent var(--fill, 0%));
  -webkit-background-clip: text;
          background-clip: text;
  padding-inline: .05em;
  animation: fill-up 1.8s .9s cubic-bezier(.6, 0, .2, 1) forwards;
}
@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes fill-up { to { --fill: 100%; } }
.age__cap { font-family: var(--font-ui); font-size: .9375rem; color: var(--ink-soft); }
.age__cap b { font-weight: 500; color: var(--heading); }
.age:hover .age__cap b { color: var(--ink); }

/* الصورة الشخصية: قوس مأخوذ من الشعار، بصبغة الموقع، وخلفه إطار ذهبي مزاح */
.portrait { position: relative; width: min(100%, 20rem); }
.portrait .duo { border-radius: 999px 999px 6px 6px; aspect-ratio: 3 / 4; }
.portrait .duo img { height: 100%; object-fit: cover; object-position: 50% 18%; }
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 999px 999px 6px 6px;
  transform: translate(-.9rem, .9rem);
}

/* رسم بالقلم لصاحب المدونة، وخلفه قرص ذهبي */
.sketchp { position: relative; width: min(100%, 23rem); }
.sketchp::before {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  opacity: .2;
  top: 4%;
  left: 13%;
}
.sketchp img { position: relative; width: 100%; }
.article__sketch { margin: 0 auto 2.5rem; display: grid; justify-items: center; }
.article__sketch .sketchp { width: 15rem; }
.article__sketch--letters .sketchp { width: min(100%, 21rem); }
.article__sketchcap { margin-top: -1.75rem; font-size: .85rem; color: var(--ink-faint); text-align: center; }
/* الحركة: اللوحة تحلّ محلّ الصورة والقرص أثناء العرض (portrait.js) */
.sketchp canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.sketchp.is-motion::before { opacity: 0; }
.sketchp.is-motion img { visibility: hidden; }
@media (max-width: 60rem) {
  .hero__visual.sketchp { display: block; order: -1; justify-self: start; width: 9.5rem; margin-bottom: -1rem; }
}

/* قصاصات من الدفتر: ثلاث أوراق مائلة تحمل آخر السطور */
.stack { position: relative; width: min(100%, 22.5rem); height: 25rem; }
.slip {
  position: absolute;
  width: 15.5rem;
  padding: 1.5rem 1.25rem 1.15rem;
  background: color-mix(in srgb, var(--paper) 55%, #fff);
  border: 1px solid var(--rule);
  box-shadow: 0 14px 26px -16px rgba(109, 31, 44, .45);
  display: grid;
  gap: .4rem;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.slip::before {
  content: "";
  position: absolute;
  top: -.55rem;
  left: 50%;
  width: 4.25rem;
  height: 1.1rem;
  background: var(--gold);
  opacity: .5;
  transform: translateX(-50%) rotate(-2deg);
}
.slip--1 { top: 0; right: 0; transform: rotate(3deg); z-index: 3; }
.slip--2 { top: 7.25rem; left: 0; transform: rotate(-4deg); z-index: 2; }
.slip--3 { top: 14.75rem; right: 1.75rem; transform: rotate(1.5deg); z-index: 1; }
.slip:hover { transform: rotate(0) translateY(-5px); z-index: 5; box-shadow: 0 22px 34px -18px rgba(109, 31, 44, .5); }
.slip__num { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: .08em; color: var(--ink-faint); }
.slip__text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--heading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* عقد الثلاثين: عشرة أقواس، ما مضى ممتلئ والحالي مضاء */
.decade { display: grid; justify-items: center; gap: 1.4rem; }
.decade__grid { display: grid; grid-template-columns: repeat(5, 3.5rem); gap: 1rem .85rem; direction: rtl; }
.decade__grid i {
  font-style: normal;
  display: grid;
  place-items: end center;
  padding-bottom: .5rem;
  height: 4.75rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px 999px 4px 4px;
  font-family: var(--font-ui);
  font-size: .8125rem;
  color: var(--ink-faint);
}
.decade__grid .past { background: var(--heading); border-color: var(--heading); color: var(--paper); }
.decade__grid .now {
  border: 2px solid var(--gold);
  color: var(--heading);
  font-weight: 700;
  background: linear-gradient(to top, color-mix(in srgb, var(--gold) 42%, transparent) 50%, transparent 50%);
  animation: glow 2.6s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 50% { box-shadow: 0 0 0 .5rem transparent; } }

/* القلم: ريشة ترسم سطرًا عربيًا من اليمين إلى اليسار */
.pen svg { width: min(100%, 30rem); height: auto; overflow: visible; }
.pen path, .pen circle { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.5, 0, .2, 1) forwards; }
.pen__body { stroke: var(--heading); stroke-width: 2.5; animation-delay: .7s !important; }
.pen__collar { stroke: var(--gold); stroke-width: 2.5; animation-delay: 1.2s !important; }
.pen__slit { stroke: var(--heading); stroke-width: 2; animation-delay: 1.6s !important; }
.pen__hole { stroke: var(--gold); stroke-width: 2.5; animation-delay: 1.8s !important; }
.pen__ink { stroke: var(--heading); stroke-width: 3; animation-duration: 2.2s !important; animation-delay: 2s !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__kicker {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--accent);
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.hero__kicker::after {
  content: "";
  height: 2px;
  flex: 1;
  background: var(--gold);
  max-width: 5rem;
}

.hero__title {
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 1.24;
  margin-bottom: 1.75rem;
}
.hero__title span { display: block; }
.hero__title em {
  font-style: normal;
  color: var(--heading);
  background: linear-gradient(to top, transparent .08em, color-mix(in srgb, var(--marker) 55%, transparent) .08em, color-mix(in srgb, var(--marker) 55%, transparent) .38em, transparent .38em);
  padding: 0 .1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__lead {
  font-size: var(--step-2);
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.8;
  max-width: 30ch;
  text-wrap: balance;
  margin-bottom: 2.5rem;
}

.hero__actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

.hero__down {
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--rule-strong));
}

/* ——— 5ب. الفقرة التي تُكتب مع النزول ——— */

.manifesto { padding-block: clamp(4.5rem, 11vw, 10rem); }
.manifesto__text {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.8;
  max-width: 21em;
  margin-inline: auto;
}
.manifesto__text + .manifesto__text { margin-top: 1.25em; }

/* بلا جافاسكربت أو مع «تقليل الحركة» يظهر النص كاملًا */
.js [data-reveal] .w { opacity: .13; transition: opacity .5s ease; }
.js [data-reveal] .w.on { opacity: 1; }
.js [data-reveal] .w.cur::after {
  content: "";
  display: inline-block;
  width: max(2px, .05em);
  height: .9em;
  background: var(--heading);
  margin-inline-start: .14em;
  vertical-align: -.1em;
  animation: blink 1.15s linear infinite;
}

.hero__fig {
  margin: 2.5rem 0 0;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.link-more {
  font-family: var(--font-ui);
  font-size: .9375rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.link-more::after {
  content: "←";
  transition: transform .25s;
}
.link-more:hover::after { transform: translateX(-.25rem); }


/* ——— 6. قائمة التدوينات ——— */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .5rem;
}
.section-head h2 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.section-head::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--rule);
}
.section-head::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--gold);
  align-self: center;
}

.posts { padding-block: clamp(3rem, 6vw, 5.5rem); }

.post-row {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.post-row:first-of-type { border-top: 1px solid var(--rule); }

.post-row__num {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  letter-spacing: .08em;
  padding-top: .85rem;
  transition: color .25s;
}
.post-row:hover .post-row__num { color: var(--accent); }
@media (max-width: 34rem) {
  .post-row { grid-template-columns: 1fr; gap: 0; }
  .post-row__num { padding-top: 0; margin-bottom: .25rem; }
}

.post-row__title {
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: .5rem;
  transition: color .25s, transform .25s;
}
.post-row:hover .post-row__title { color: var(--accent); transform: translateX(-.3rem); }

.post-row__excerpt {
  color: var(--ink-soft);
  font-weight: 300;
  max-width: var(--measure);
  margin-bottom: .6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ——— 7. مقتبس كبير ——— */

.pull {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.pull__q {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.45;
  max-width: 30ch;
  margin-inline: auto;
}
.pull__q::before {
  content: "”";
  display: block;
  font-size: 3.5rem;
  line-height: .6;
  color: var(--gold);
  margin-bottom: 1rem;
}
.pull__by { margin-top: 1.5rem; }


/* ——— 8. النشرة ——— */

.news {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  position: relative;
  overflow: hidden;
}

.news__title { font-size: var(--step-2); font-weight: 400; margin-bottom: .75rem; }
.news__body { color: var(--ink-soft); font-weight: 300; max-width: 46ch; margin-bottom: 1.75rem; }

.form {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  max-width: 30rem;
}
.form input[type="email"] {
  flex: 1 1 14rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: .8125rem 1rem;
  transition: border-color .2s;
}
.form input[type="email"]::placeholder { color: var(--ink-faint); }
.form input[type="email"]:focus { outline: none; border-color: var(--accent); }

.btn {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--btn-ink);
  background: var(--btn);
  border: 1px solid var(--btn);
  border-radius: 3px;
  padding: .8125rem 1.625rem;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .1s;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
:root[data-palette="burgundy"] .btn:hover { color: var(--marker-ink); }
.btn:active { transform: translateY(1px); }

.form__note { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); margin-top: .875rem; flex-basis: 100%; }
.form__ok { color: var(--accent); }


/* ——— 9. صفحة التدوينة ——— */

.article { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.article__head {
  max-width: var(--measure);
  margin-inline: auto;
  margin-bottom: 3rem;
  text-align: center;
}
.article__title {
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.28;
  margin-block: 0;
}
.article__meta { text-align: center; margin-top: 1rem; }

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-weight: 400;
}
.prose > * + * { margin-top: 1.5rem; }
.prose p { text-wrap: pretty; }

.prose h2 {
  font-size: var(--step-2);
  font-weight: 500;
  margin-top: 3.25rem;
  line-height: 1.4;
}
.prose h3 {
  font-size: var(--step-1);
  font-weight: 500;
  margin-top: 2.5rem;
}

.prose a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color .2s;
}
.prose a:hover { border-bottom-color: var(--accent); }

.prose strong { font-weight: 700; }
.prose em { font-style: normal; color: var(--accent); }

.prose blockquote {
  margin: 2.5rem 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--gold);
  color: var(--ink-soft);
  font-weight: 300;
  font-size: var(--step-1);
}
.prose blockquote p + p { margin-top: 1rem; }

.prose ul, .prose ol { padding-inline-start: 1.5rem; }
.prose li + li { margin-top: .625rem; }
.prose li::marker { color: var(--gold); }

.prose figure { margin: 3rem 0; }
.prose figure img { border: 1px solid var(--rule); border-radius: 3px; }
.prose figcaption {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-align: center;
  margin-top: .875rem;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .1em .4em;
  direction: ltr;
  display: inline-block;
}
.prose pre {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  line-height: 1.7;
}
.prose pre code { background: none; border: 0; padding: 0; display: block; }

/* مقتبس بارز داخل النص: >> في ملف Markdown */
.prose .pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  margin: 3.5rem 0;
  padding-block: 2rem;
  color: var(--heading);
  border-block: 1px solid var(--gold);
}

.prose hr { border: 0; margin: 3.5rem auto; text-align: center; }
.prose hr::before {
  content: "···";
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: .5em;
  color: var(--gold);
}

/* تذييل التدوينة */
.article__end {
  max-width: var(--measure);
  margin: 4.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.sig { font-family: var(--font-display); color: var(--ink-faint); }

.neighbors {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3rem;
}
.neighbor { background: var(--paper); padding: 1.5rem; transition: background-color .2s; }
.neighbor:hover { background: var(--paper); }
.neighbor--next { text-align: start; }
.neighbor--prev { text-align: end; }
.neighbor__dir { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); display: block; margin-bottom: .5rem; }
.neighbor__title { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.5; }
.neighbor:hover .neighbor__title { color: var(--accent); }
.neighbor--empty { pointer-events: none; }
.neighbor--empty > * { opacity: .45; }
@media (max-width: 34rem) { .neighbors { grid-template-columns: 1fr; } }


/* ——— 10. الأرشيف ——— */

.page-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) 1.5rem; }
.page-head h1 { font-size: var(--step-3); font-weight: 400; margin-bottom: .875rem; }
.page-head p { color: var(--ink-soft); font-weight: 300; max-width: var(--measure); }

.year { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding-block: 2.5rem; border-top: 1px solid var(--rule); }
.year__label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  letter-spacing: .08em;
  position: sticky;
  top: 6rem;
  align-self: start;
  direction: ltr;
  text-align: start;
}
.year__list { display: grid; }
.year__item { display: flex; gap: 1.25rem; align-items: baseline; padding-block: .8125rem; border-bottom: 1px dotted var(--rule); }
.year__item:last-child { border-bottom: 0; }
.year__item time { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); flex: 0 0 3.5rem; }
.year__item span { font-family: var(--font-display); font-size: 1.125rem; transition: color .2s; }
.year__item:hover span { color: var(--accent); }
@media (max-width: 34rem) {
  .year { grid-template-columns: 1fr; gap: .5rem; }
  .year__label { position: static; }
}


/* ——— 11. التذييل ——— */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.footer__name { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .75rem; }
.footer__about { color: var(--ink-soft); font-weight: 300; max-width: 42ch; font-size: .9375rem; line-height: 1.9; }
.footer__h { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .08em; margin-bottom: .875rem; }
.footer__list { display: grid; gap: .625rem; }
.footer__list a { font-family: var(--font-ui); font-size: .9375rem; color: var(--ink-soft); transition: color .2s; }
.footer__list a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 40rem) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }


/* ——— 11ب. إضافات: الصور، صفحة التدوينة، الفصول، الدفتر ——— */

.more { margin-top: 2rem; }
.band { padding-block: 1rem clamp(3rem, 6vw, 5.5rem); }
.topic { color: var(--accent); }
.page-head__meta { margin-bottom: .75rem; }

/* المعالجة الموحّدة للصور: ظلال عنابية، إضاءات كريمية، وحبيبات خفيفة.
   لإيقافها: "image_treatment": false في site.json */
.duo {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #6D1F2C;
  isolation: isolate;
}
.duo img { width: 100%; filter: grayscale(1) contrast(1.12) brightness(1.08); mix-blend-mode: screen; border: 0 !important; border-radius: 0 !important; }
.duo::after { content: ""; position: absolute; inset: 0; background: #F6EDE3; mix-blend-mode: multiply; pointer-events: none; }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .28; mix-blend-mode: multiply; pointer-events: none; }
[data-img="raw"] .duo { background: none; }
[data-img="raw"] .duo img { filter: none; mix-blend-mode: normal; }
[data-img="raw"] .duo::before, [data-img="raw"] .duo::after { display: none; }

/* خط التقدّم أعلى صفحة التدوينة */
.progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  z-index: 60;
}

.post-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--heading);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--gold);
}

.article__fig { max-width: 52rem; margin: 0 auto 3rem; }
.article__fig img { aspect-ratio: 16 / 9; object-fit: cover; }
.article__fig--portrait { max-width: 20rem; }
.article__fig--portrait img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
.article__fig--portrait .duo { border-radius: 999px 999px 6px 6px; }

.endmark { max-width: var(--measure); margin: 3.5rem auto 0; text-align: center; line-height: 1; }
.endmark svg { width: .875rem; height: .875rem; fill: var(--gold); }

.reply { font-family: var(--font-ui); font-size: .9375rem; color: var(--ink-soft); margin-top: 1.25rem; }
.reply a { color: var(--accent); border-bottom: 1px solid var(--rule-strong); }
.reply a:hover { border-bottom-color: var(--accent); }
.article__news { margin-top: 2.5rem; }

/* سنوات الثلاثين: فصل لكل سنة */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: 3rem;
  border-top: 1px solid var(--rule);
}
.chapter__head { position: sticky; top: 6rem; align-self: start; }
.chapter__head h2 { font-size: var(--step-3); font-weight: 400; line-height: 1.3; margin-bottom: .5rem; }
.chapter__line { color: var(--ink-soft); font-weight: 300; font-size: 1rem; line-height: 1.9; margin-top: 1rem; }
.chapter__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}
.chapter__item:first-child { padding-top: .35rem; }
.chapter__item:last-child { border-bottom: 0; }
.chapter__num, .chapter__item time { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .04em; }
.chapter__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.6; color: var(--heading); transition: color .2s; }
.chapter__item:hover .chapter__title { color: var(--ink); }
.chapter__item:hover .chapter__num { color: var(--accent); }
@media (max-width: 48rem) {
  .chapter { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.25rem; }
  .chapter__head { position: static; }
  .chapter__item { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: .15rem; }
  .chapter__item time { grid-column: 2; }
}

/* الدفتر */
.notes { max-width: 44rem; }
.note {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
.note__num { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .08em; padding-top: .6rem; }
.note__body { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.85; }
.note__body p + p { margin-top: .75rem; }
.note__body a { color: var(--accent); border-bottom: 1px solid var(--rule-strong); }
.note .meta { grid-column: 2; margin-top: .6rem; }
.note:target .note__num { color: var(--accent); }
a.note__num:hover { color: var(--accent); }

.home-notes { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.notes-grid .note { grid-template-columns: 1fr; border-top: 2px solid var(--gold); padding-block: 1.25rem 0; align-content: start; }
.notes-grid .note__num { padding-top: 0; margin-bottom: .5rem; }
.notes-grid .note .meta { grid-column: 1; }
@media (max-width: 48rem) {
  .notes-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .note { grid-template-columns: 2.75rem minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .notes .note { grid-template-columns: 1fr; }
  .notes .note__num { padding-top: 0; margin-bottom: .35rem; }
  .notes .note .meta { grid-column: 1; }
}


/* ——— 12. تفاصيل أخيرة ——— */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] .w { opacity: 1; }
  .pen path, .pen circle { stroke-dashoffset: 0; }
  .age__num { --fill: 100%; }
  .js [data-reveal] .w.cur::after, .caret { animation: none; }
}

@media print {
  .nav, .footer, .news, .neighbors, .icon-btn, .progress { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
}