/* ===========================================================================
   استوديو الدعوة
   قسمان: واجهة الاختيار (داكنة، محايدة) ثم المسرح الذي تُعرض فيه التصاميم.
   كل شكل يقرأ متغيّراته من السطر الذي يحمله، فلا قاعدة خاصّة بكلّ تركيبة.
   =========================================================================== */
:root{
  --ui-bg:#14161a; --ui-panel:#1c2026; --ui-line:rgba(255,255,255,.12);
  --ui-ink:#ECEAE4; --ui-ink2:#9AA2AC; --ui-accent:#C9A86A;
  /* ثلاثة خطوط على الدعوة، لكلٍّ عملٌ لا يشاركه فيه غيره:
       --ruqaa  رقعةٌ للاسمين وحدهما — هويّة الدعوة
       --naskh  نسخٌ لِما يُقال: البسملة والأبيات والختام
       --ar     مجرّدٌ لِما يُقرأ: المواعيد والعنوان والأزرار
     ورابعٌ لا يظهر على الدعوة أصلًا: --mono حِلية الظرف وحده (برقية،
     طابع، بطاقة فهرسة). كانت سبعة، ويُرى منها أربعة في صفحة واحدة. */
  --ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --naskh:"Amiri",Georgia,serif;
  --ruqaa:"Aref Ruqaa","Amiri",serif;
  --mono:"Courier Prime",ui-monospace,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; background:var(--ui-bg); color:var(--ui-ink); font-family:var(--ar); }
body{ -webkit-font-smoothing:antialiased; }
button,a{ font:inherit; }

/* ─────────────────────────── واجهة الاستوديو ─────────────────────────── */
.top{
  position:sticky; top:0; z-index:20; background:rgba(20,22,26,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ui-line);
  padding:14px clamp(14px,3vw,28px);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.top h1{ margin:0; font-size:1.02rem; font-weight:600; }
.top h1 small{ display:block; font-weight:400; font-size:.76rem; color:var(--ui-ink2); margin-top:2px; }
.tabs{ display:flex; gap:6px; margin-inline-start:auto; background:#0f1115; padding:4px; border-radius:999px; }
.tabs button{
  border:0; background:none; color:var(--ui-ink2); cursor:pointer;
  padding:8px 16px; border-radius:999px; font-size:.86rem; transition:.2s;
}
.tabs button[aria-selected="true"]{ background:var(--ui-accent); color:#191308; font-weight:600; }

.wrap{ padding:clamp(14px,3vw,28px); display:grid; gap:clamp(14px,3vw,26px); }
@media (min-width:1000px){ .wrap{ grid-template-columns:minmax(0,1fr) 420px; align-items:start; } }

.panel{ background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:14px; padding:clamp(14px,2.4vw,22px); }
.panel h2{ margin:0 0 4px; font-size:.94rem; font-weight:600; }
.panel p.hint{ margin:0 0 14px; font-size:.78rem; color:var(--ui-ink2); line-height:1.7; }

/* شريط الخيارات */
.group + .group{ margin-top:20px; }
.subhead{ margin:14px 0 7px; font-size:.72rem; font-weight:500; color:var(--ui-accent);
  }
.subhead:first-child{ margin-top:0; }

.group > h3{ margin:0 0 9px; font-size:.82rem; font-weight:600; color:var(--ui-ink2); }
.opts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:9px; }
.opt{
  border:1px solid var(--ui-line); background:#0f1115; border-radius:10px;
  padding:0; cursor:pointer; overflow:hidden; text-align:center; transition:.18s;
  color:var(--ui-ink);   /* زرُّ المتصفّح يفرض buttontext، فيخفت الاسم تحت وصفه */
}
.opt:hover{ border-color:rgba(201,168,106,.5); transform:translateY(-1px); }
.opt[aria-pressed="true"]{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent) inset; }
.opt > .sw{ height:52px; display:block; }
.opt > b{ display:block; color:var(--ui-ink); font-size:.72rem; font-weight:500; padding:6px 6px 2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* الوصف يلتفّ على سطرين: هو المعلومة، لا يُقصّ */
.opt > i{ display:block; font-size:.63rem; font-style:normal; color:var(--ui-ink2);
  padding:0 7px 8px; line-height:1.5; }

/* بطاقات التصاميم الجاهزة */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:12px; }
.card{
  border:1px solid var(--ui-line); background:#0f1115; border-radius:12px;
  overflow:hidden; cursor:pointer; text-align:start; padding:0; transition:.18s;
}
.card{ color:var(--ui-ink); }   /* كالخيارات: زرُّ المتصفّح يفرض buttontext */
.card:hover{ border-color:rgba(201,168,106,.5); transform:translateY(-2px); }
.card[aria-pressed="true"]{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent) inset; }
.card .thumb{ height:104px; display:flex; }
.card .thumb span{ flex:1; }
.card .meta{ padding:9px 11px 11px; min-width:0; overflow:hidden; }
.card .meta b{ display:block; font-size:.82rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .meta i{ display:block; font-style:normal; font-size:.7rem; color:var(--ui-ink);
  margin-top:4px; line-height:1.55; }
.card .meta u{ display:block; text-decoration:none; font-size:.63rem; color:var(--ui-ink2);
  margin-top:5px; line-height:1.5; }

.acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.btn{
  border:1px solid var(--ui-line); background:#0f1115; color:var(--ui-ink);
  padding:10px 16px; border-radius:9px; cursor:pointer; font-size:.82rem; transition:.18s;
}
.btn:hover{ border-color:var(--ui-accent); color:var(--ui-accent); }
.btn--go{ background:var(--ui-accent); color:#191308; border-color:var(--ui-accent); font-weight:600; }
.btn--go:hover{ filter:brightness(1.08); color:#191308; }

/* المسرح */
.stagewrap{ position:sticky; top:86px; }
.stage{
  --w:390px; width:100%; max-width:var(--w); margin-inline:auto;
  aspect-ratio:390/780; border-radius:22px; overflow:hidden;
  border:1px solid var(--ui-line); background:#000;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  position:relative; isolation:isolate;
}
.stage .xp{ position:absolute; inset:0; }
.caption{ text-align:center; font-size:.76rem; color:var(--ui-ink); margin-top:11px; line-height:1.85; }
.caption b{ color:var(--ui-ink2); font-weight:500; }
.caption .dim{ color:var(--ui-ink2); font-size:.7rem; }

/* ملء الشاشة */
.full{ position:fixed; inset:0; z-index:60; background:#000; display:none; }
.full.on{ display:block; }
.full .xp{ position:absolute; inset:0; }
.full .close{
  position:fixed; inset-block-start:14px; inset-inline-start:14px; z-index:70;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:999px; padding:9px 16px; cursor:pointer; font-size:.8rem;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* ═══════════════════════════ التجربة ═══════════════════════════ */
.xp{ position:relative; overflow:hidden; }
.xp__cover{ position:absolute; inset:0; z-index:3; transition:opacity .75s ease,transform .95s cubic-bezier(.22,.85,.2,1); }
.xp.is-lifted .xp__cover{ opacity:0; transform:translateY(-7%); pointer-events:none; }
.xp__page{ position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; }

/* ─────────────────────────── الأظرف ─────────────────────────── */
/* الظرف غرضٌ على مكتب. كان .ev__paper يملأ الشاشة، فلم يظهر لون المكتب قطّ،
   وضاع معه كل ما يضعه التصميم عليه: الظلّ، الميل، وحتى اختلاف صورة الغرض —
   فالبرقية والكرافت عرضيّان في التصميم وكانا يُعرضان طوليَّين كبقيّة الأظرف. */
.ev{
  position:absolute; inset:0; background:var(--desk);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px,3vh,26px); padding:clamp(14px,4vh,34px) clamp(12px,4vw,30px);
}
.ev__paper{
  position:relative; aspect-ratio:var(--ar,1.5);
  width:100%; max-width:100%; max-height:100%; height:auto;
  background:var(--paper) var(--img,none) center/cover no-repeat;
  transform:rotate(var(--tilt,-.7deg));
  box-shadow:
    0 30px 60px -24px rgba(28,20,8,.62),
    inset 0 2px 0 rgba(255,250,235,.28),
    inset 0 0 90px rgba(40,28,10,.16);
  overflow:hidden;
}
/* ورقُ المستخدم الرخاميّ يملأ الشاشة عمدًا — هو ليس غرضًا على مكتب */
.ev--plain{ padding:0; gap:0; }
.ev--plain .ev__paper{
  aspect-ratio:auto; width:100%; height:100%; max-height:none;
  transform:none; box-shadow:inset 0 0 160px rgba(150,130,100,.2);
}
.ev--plain .ev__hint{ position:absolute; bottom:7%; }

/* ظرفٌ بشريطين: كـplain في ملء الشاشة، لكنّ زينته تثبت على الحافّتين بدل
   أن تُقصّ بـcover حين تختلف نسبة الشاشة عن نسبة الصورة. */
.ev--bands{ padding:0; gap:0; }
.ev--bands .ev__paper{
  aspect-ratio:auto; width:100%; height:100%; max-height:none;
  transform:none; box-shadow:inset 0 0 160px rgba(150,130,100,.18);
  background:
    var(--bandT) top center / 100% auto no-repeat,
    var(--bandB) bottom center / 100% auto no-repeat,
    /* الأرضيّة بين القصّتين تدرّجٌ لا لونٌ واحد: في الصورة تدرّجٌ رأسيّ،
       ولونٌ مسطّح يُظهر وصلًا عند كلّ قصّة. الطرفان مقيسان من الصورة. */
    linear-gradient(var(--ground,#E0E0DE), var(--ground2,#E0E0DE));
}
.ev--bands .ev__hint{ position:absolute; bottom:7%; }

/* نسيج الورق وبُقَع التقادم — عليهما تقوم الجولة الثانية كلّها، ولم يكونا
   موجودين بأيّ صورة. طبقة واحدة تخدم كل الأظرف. */
.ev__paper::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:
    radial-gradient(28% 34% at 74% 22%, rgba(150,110,60,.20), transparent 70%),
    radial-gradient(22% 26% at 14% 78%, rgba(150,110,60,.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(110,84,46,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(110,84,46,.035) 0 1px, transparent 1px 4px);
}

.ev__folds{ position:absolute; inset:0; width:100%; height:100%; }
.ev__folds line{ stroke:color-mix(in srgb, var(--ink) 38%, transparent); stroke-width:1; vector-effect:non-scaling-stroke; }
.ev__pocket{ position:absolute; inset:0; background:color-mix(in srgb, var(--ink) 6%, transparent);
  clip-path:polygon(0 100%, 50% 46%, 100% 100%); }
.ev__flap{
  position:absolute; left:0; right:0; top:0; height:46%;
  background:var(--flap); clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 5px 8px rgba(60,44,20,.4));
  transform-origin:top center;
  transition:transform .78s cubic-bezier(.22,.85,.2,1);
}
.xp.is-open .ev__flap{ transform:rotateX(-168deg); }

/* بريد جوّي: شريط الحوافّ الأحمر والأزرق */
.ev__air{
  position:absolute; inset:0; padding:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, var(--accent) 0 12px, transparent 12px 24px, var(--accent2) 24px 36px, transparent 36px 48px);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  border:9px solid transparent; opacity:.9; z-index:6;   /* فوق الطيّة، وإلّا اختفى أعلاه */
}
/* برقية: نموذج مسطّر */
.ev__tele{ position:absolute; inset:9% 8%; display:grid; align-content:start; gap:13%; }
.ev__tele b{ font-family:var(--mono); font-size:clamp(11px,3.2vw,15px); word-spacing:.5em;
  color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:9px; }
.ev__tele i{ display:block; height:1px; background:color-mix(in srgb, var(--ink) 28%, transparent); }
/* ملفّ بخيط */
.ev__tieline{ position:absolute; left:0; right:0; top:52%; height:1px;
  background:repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); opacity:.7; }
/* كرافت: فتحة السحب */
.ev__sleeve{ position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:44%; height:16%; background:var(--desk); border-radius:0 0 999px 999px; opacity:.5; }

/* ١ج: جسم الظرف هو البطانة، والواجهة العاجية مقصوصة فوقها */
.ev--lined .ev__paper{ background:var(--accent); }
.ev__front{
  position:absolute; inset:0; background:var(--paper);
  clip-path:polygon(0 20%, 50% 72%, 100% 20%, 100% 100%, 0 100%);
  background-image:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--accent) 7%, transparent) 0 2px, transparent 2px 9px);
}
/* ٢ب/٢ج: خطّان غائران داخل حافّة الظرف */
.ev__rules{
  position:absolute; inset:clamp(6px,1.8%,11px); pointer-events:none; z-index:5;
  border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.ev__rules--in{ inset:clamp(10px,2.9%,16px);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent); }

.ev__seal{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:4; }
.ev__hint{
  margin:0; text-align:center; flex:none;
  font-size:clamp(11px,2.7vw,13px);
  color:color-mix(in srgb, var(--ink) 70%, transparent);
  transition:opacity .3s ease;
}
.xp.is-open .ev__hint{ opacity:0; }

/* ─────────────────────────── الأختام ─────────────────────────── */
.sl{ border:0; background:none; padding:0; cursor:pointer; display:block; transition:transform .25s ease; }
.sl:active{ transform:scale(.94); }
.sl--wax{ width:var(--sz); aspect-ratio:1; }
.sl--wax svg{ width:100%; height:100%; display:block; overflow:visible; }

.sl--stamp{
  width:calc(var(--sz) * .88); aspect-ratio:74/94; position:relative;
  background:var(--body); box-shadow:0 1px 2px rgba(60,42,20,.32);
}
.sl--stamp .sl__perf{
  position:absolute; inset:-6px; pointer-events:none;
  background:
    radial-gradient(circle at 6px 6px, var(--paper,#ddd0b0) 4.6px, transparent 5px) repeat-x 0 0/12px 12px,
    radial-gradient(circle at 6px 6px, var(--paper,#ddd0b0) 4.6px, transparent 5px) repeat-x 0 100%/12px 12px,
    radial-gradient(circle at 6px 6px, var(--paper,#ddd0b0) 4.6px, transparent 5px) repeat-y 0 0/12px 12px,
    radial-gradient(circle at 6px 6px, var(--paper,#ddd0b0) 4.6px, transparent 5px) repeat-y 100% 0/12px 12px;
}
.sl--stamp .sl__in{
  position:absolute; inset:6px; border:1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  display:grid; place-content:center; gap:5px; justify-items:center;
}
.sl--stamp .sl__logo{ height:calc(var(--sz) * .42); width:auto; fill:var(--ink); opacity:.9; }
.sl--stamp .sl__num{ font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:var(--ink); }
.sl--stamp .sl__mark{
  position:absolute; left:-16%; top:24%; width:88%; aspect-ratio:1; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--ink) 50%, transparent);
  transform:rotate(-11deg); mix-blend-mode:multiply; pointer-events:none;
}
.sl--disc{
  width:calc(var(--sz)*.82); aspect-ratio:1; border-radius:50%;
  background:var(--body); display:grid; place-items:center;
  box-shadow:0 6px 16px -8px rgba(40,30,12,.6), inset 0 0 0 1px color-mix(in srgb, var(--foil) 40%, transparent);
}
.sl--disc .sl__logo{ height:62%; width:auto; fill:var(--foil); }
.sl--tie{ width:calc(var(--sz)*.5); aspect-ratio:1; display:grid; place-items:center; position:relative; }
.sl--tie .sl__btn{ width:62%; aspect-ratio:1; border-radius:50%; background:var(--body);
  box-shadow:0 3px 8px -3px rgba(0,0,0,.6), inset 0 0 0 3px color-mix(in srgb, var(--foil) 55%, transparent); }
.sl--tie .sl__thread{ position:absolute; width:190%; height:1px; background:var(--foil); opacity:.55; transform:rotate(-18deg); }

/* ═══════════════════════════ صفحة الدعوة ═══════════════════════════ */
.pg{
  position:relative; min-height:100%; display:grid; place-items:center;
  padding:clamp(16px,4vw,40px) clamp(12px,3.4vw,30px);
  background:var(--bg) var(--img,none) center/cover no-repeat;
}
.pg::before{ content:""; position:absolute; inset:0;
  background:var(--dark,#0E1F19); opacity:var(--scrim,0); }
.sh{
  position:relative; z-index:2; width:100%; max-width:660px;
  background:var(--sheet);
  padding:clamp(28px,7vw,66px) clamp(20px,5.4vw,54px) clamp(24px,6vw,54px);
  display:grid; justify-items:center; text-align:center; gap:clamp(9px,1.7vh,18px);
  color:var(--ink);
}
.pg--roses .sh{ box-shadow:none; background:transparent; }
.pg:not(.pg--roses) .sh{ box-shadow:0 22px 52px -24px rgba(50,38,20,.5); }

.sh__logo{ height:clamp(44px,8vw,80px); width:auto; fill:var(--ink); opacity:.92; }
.sh__bless{ margin:0; max-width:32ch; font-family:var(--naskh);
  font-size:clamp(12.5px,3.2vw,16px); line-height:2.05; color:color-mix(in srgb, var(--ink) 92%, transparent); }
.sh__div{ display:flex; align-items:center; gap:9px; opacity:.75; }
.sh__div i{ width:clamp(40px,11vw,96px); height:1px; background:var(--rule); }
.sh__div b{ width:6px; height:6px; background:var(--accent); transform:rotate(45deg); }
.sh__poem{ margin:0; max-width:34ch; font-family:var(--naskh);
  font-size:clamp(13.5px,3.5vw,18px); line-height:2.1; text-wrap:balance; }
.sh__inv{ margin:0; font-size:clamp(12px,3vw,14.5px); line-height:1.95; color:var(--ink2); }
.sh__names{
  margin:clamp(2px,1vh,10px) 0 0; font-family:var(--ruqaa); font-weight:700;
  font-size:clamp(28px,8.4vw,54px); line-height:1.45; color:var(--ink);
}
.sh__names span{ font-family:var(--naskh); font-weight:400; font-size:.44em; color:var(--ink2); }
/* ── الصيغة الرسميّة: تتشرّف ... بدعوتكم ... ابنتنا وابننا ──
   قواعدها موسومة بـ .sh--formal فلا تتعدّى إلى التصاميم الأخرى. */

/* البسملة بخطّ الرقعة كما في التصميم المرجعيّ: حروفٌ متشابكة سائلة، لا
   نسخُ المتن. وهي هنا وحدها — بقيّة التصاميم على الأميري كما كانت. */
/* وردتا الزاويتين في مخطّط `roses` تفترضان بطاقةً قصيرة: «الدعوة الحالية»
   متنُها ٦٧٦ في صفحةٍ ٨٤٤، فتتوسّط الورقةُ ويقع نصُّها بين الوردتين عفوًا.
   والصيغة الرسميّة متنُها ٨٣٠، فتبلغ الورقةُ الزاويتين ويقع على الزهر
   ثلاثةُ عناصر: البسملة، وزرّ التقويم، والتذييل.
   الحشو أدناه مقيسٌ بالعبارة التي تحدّ عرضَ الوردة نفسِها مضروبةً في
   نسبتها (٠٫٦٨٣)، فيخلو للنصّ ما فوق الزهر وما تحته في كلّ مقاس. */
/* وردتان أصغر وحروفٌ أضيق — لتقع الدعوة كلُّها في شاشةٍ واحدة.
   الحشو وحده لا يكفي: زيادتُه تُطيل الصفحة بقدر ما تُبعد النصّ عن الزهر،
   فيخرج آخرُها عن الشاشة. فالوردتان تصغران لتضيق حافّتاهما، والمتنُ يضيق
   معهما، حتى يسع ٨٤٤ بكسلًا بلا تمرير. */
.pg--roses:has(.sh--formal) .or--rl,
.pg--roses:has(.sh--formal) .or--rr{ width:clamp(88px,24vw,150px); }
.pg--roses .sh--formal{
  padding-block:calc(clamp(88px,24vw,150px) * .683 + 10px);
  gap:clamp(4px,.85vh,10px);
}
.sh--formal .sh__bless{ font-size:clamp(12px,3.1vw,16px); line-height:1.62; }
.sh--formal .sh__poem{ font-size:clamp(11.5px,3vw,15px); line-height:1.85; }
.sh--formal .sh__inv{ font-size:clamp(10.5px,2.6vw,13px); }
.sh--formal .sh__day{ font-size:clamp(10.5px,2.6vw,13px); }
.sh--formal .sh__hosts b{ font-size:clamp(12.5px,3.2vw,17px); line-height:1.6; }
.sh--formal .sh__honor{ font-size:clamp(11px,2.7vw,13.5px); }
.sh--formal .sh__kid b{ font-size:clamp(13px,3.6vw,22px); }
.sh--formal .sh__close{ font-size:clamp(13px,3.6vw,20px); }
.sh--formal .fcs{ margin-block:clamp(2px,.6vh,8px); }
.sh--formal .fc{ padding:clamp(6px,1.5vw,12px) clamp(3px,1vw,8px); }
.sh--formal .sh__acts{ margin-top:clamp(2px,.6vh,8px); }
.sh--formal .sh__btn{ padding:clamp(8px,2vw,13px) clamp(5px,1.7vw,12px); }
.sh--formal .sh__foot{ margin-top:clamp(4px,.9vh,10px); }

.sh--formal{ --wawCol:clamp(16px,4.2vw,24px); }
.sh--formal .sh__bless{
  font-family:var(--ruqaa); font-weight:400;
  font-size:clamp(14px,3.7vw,19.5px); line-height:1.72; max-width:30ch;
  color:var(--ink);
}
.sh__honor{ margin:clamp(0px,.4vh,5px) 0 0; font-family:var(--naskh);
  font-size:clamp(12px,3vw,15px); color:var(--ink2); }
/* سطر الأمَّين بشبكة سطر العروسين نفسها — عمودٌ فعمودٌ فعمود — كي تقع
   الواوان على محورٍ واحد، ويقف اسمُ كلِّ أمٍّ فوق اسم ولدها لا مُزاحًا عنه.
   كان السطر نصًّا متمركزًا، والاسمان غيرُ متساويي العرض، فكانت واوُه تهيم
   حيث ينتهي أوّلُهما — بعيدةً عن واو العروسين تحتها. */
.sh__hosts{
  width:100%; margin:0;
  display:grid; grid-template-columns:1fr var(--wawCol) 1fr;
  align-items:center; gap:0 clamp(9px,3vw,20px);
}
.sh__hosts b{
  font-family:var(--naskh); font-weight:700;
  font-size:clamp(14px,3.6vw,19px); line-height:1.75; color:var(--ink);
}

/* الواو المرسومة: قناعٌ لا صورة، فاللون من CSS لا من الملفّ — assets/waw.svg
   يُستبدل وحدَه بأيّ رسمٍ آخر بلا لمس الشيفرة. تُستعمل في الموضعين:
   بين اسمَي الأمَّين (صغيرة) وبين اسمَي العروسين (كبيرة). */
.waw{
  display:inline-block; vertical-align:middle; flex:none;
  background:var(--accent);
  -webkit-mask:url("assets/waw.svg") center/contain no-repeat;
          mask:url("assets/waw.svg") center/contain no-repeat;
  aspect-ratio:143.88/369.42;   /* صندوق حبر الرسم نفسه */
}
.waw--sm{ height:clamp(20px,5vw,28px); }
.waw--lg{ height:clamp(34px,9vw,52px); align-self:center; }
.waw--sm, .waw--lg{ justify-self:center; }
/* الواو في العنوان القصير: مقاسها بالـem فتكبر وتصغر مع الاسمين نفسِهما */
.waw--mid{ height:1.2em; margin:0 .3em; vertical-align:-.16em; }

/* الابنة والابن في عمودين والواو بينهما، كما في التصميم المرجعيّ. الاسمان
   كاملان فيلتفّان على سطرين في العمود الضيّق — وذلك أهون من كسر العمودين. */
.sh__pair{
  width:100%; margin:clamp(2px,.8vh,8px) 0 0;
  display:grid; grid-template-columns:1fr var(--wawCol) 1fr;
  align-items:start; gap:0 clamp(9px,3vw,20px);
}
.sh__kid{ display:grid; justify-items:center; gap:clamp(3px,.8vh,7px); }
.sh__kid i{ font-style:normal; font-size:clamp(10.5px,2.6vw,13px);
  color:var(--ink2); }
/* الاسم الكامل أطولُ من نصف عرض البطاقة، فكان يفيض من عموده على الواو.
   max-width يحبسه في عموده ويلفّه سطرين عند الضيق. */
/* الاسم الكامل في سطرٍ واحد. كان <b> سطريًّا (inline) فلم يعمل عليه
   max-width أصلًا — الخاصّية لا تنطبق على السطريّ غير المستبدَل — فكان
   يفيض من عموده. صار كتلةً، ومُنع كسرُه، وقِيس مقاسه ليسع أطولَ الاسمين. */
.sh__kid b{ display:block; max-width:100%; white-space:nowrap;
  font-family:var(--ruqaa); font-weight:700;
  font-size:clamp(15px,4.3vw,28px); line-height:1.55; color:var(--ink); }

/* التذييل هنا أطول، وسطرٌ واحد منه يمتدّ إلى وردة الزاوية فيضيع نصفه
   على بياضها. عمودٌ أضيق يكسره سطرين — كما في التصميم المرجعيّ — فيبقى
   في وسط الورقة بعيدًا عن الزهر. */
.sh--formal .sh__foot{ max-width:21ch; line-height:1.85; }

.sh__day{ margin:0; font-size:clamp(11.5px,2.9vw,14px); line-height:1.9; color:var(--ink2); }

.fcs{
  width:100%; margin:clamp(4px,1.3vh,14px) 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--rule);
}
.fc{
  display:grid; justify-items:center; gap:4px; padding:clamp(9px,2vw,15px) clamp(4px,1.2vw,10px);
  text-decoration:none; color:inherit;
}
.fc + .fc{ border-inline-start:1px solid var(--rule); }
.fc__i{ width:clamp(16px,3.4vw,21px); height:clamp(16px,3.4vw,21px); color:var(--ink2); }
.fc__k{ font-size:clamp(10.5px,2.5vw,12.5px); font-weight:500; line-height:1.55; color:var(--ink); }
.fc__v{ font-size:clamp(10px,2.4vw,12px); line-height:1.55; color:var(--ink2); }
.fc__go{ font-size:clamp(9.5px,2.2vw,11px); color:var(--accent);
  border-bottom:1px dotted currentColor; padding-bottom:1px; margin-top:2px; }
.fc--link:hover .fc__go{ border-bottom-style:solid; }

.sh__close{ margin:clamp(2px,1vh,10px) 0 0; font-family:var(--naskh); font-weight:500;
  font-size:clamp(15px,4.2vw,23px); line-height:1.7; color:var(--ink); }
/* زرّان متطابقان في صفٍّ واحد. كانا زرًّا كبيرًا فوق رابطٍ صغير، فيكلّفان
   سطرين وفجوةً بينهما — وذلك الطولُ هو ما كان يدفع قاعدةَ الزهور تحت حافّة
   الشاشة. صفٌّ واحد يردّ نحو ثلاثين بكسلًا إلى الزينة. */
.sh__acts{
  width:100%; max-width:min(100%,420px);
  margin-top:clamp(2px,1vh,10px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(7px,2vw,12px);
}
.sh__btn{
  display:grid; place-items:center; text-align:center;
  text-decoration:none; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius:999px;
  padding:clamp(10px,2.4vw,15px) clamp(6px,2vw,14px);
  font-size:clamp(11.5px,2.8vw,14px); line-height:1.4; transition:.2s;
}
.sh__btn:hover{ background:var(--ink); color:var(--sheet); border-color:var(--ink); }
/* العربيّة خطٌّ متّصل: letter-spacing يفصل الحروف عن بعضها فتنقطع
   وصلاتُها — «تتشرف» تصير «تـ تـ شـ ر ف». التبعيد هنا بـword-spacing
   لا بـletter-spacing: يوسّع بين الكلمات ولا يمسّ الوصل. */
.sh__foot{ margin:clamp(6px,1.6vh,16px) 0 0;
  font-size:clamp(9.5px,2.2vw,11px); word-spacing:.5em; color:var(--ink2); }

/* ───────────────────────────── الزينة ───────────────────────────── */
.or{ position:absolute; pointer-events:none; }
/* الأصول مرسومة بمقاس البطاقة نفسها ×١٫٥؛ contain يترك هوامش تفصل التاج
   والقاعدة عن حافّتي الورقة، فتفقد الزينة تماسّها مع الحافّة. */
.or--full{ inset:0; width:100%; height:100%; object-fit:fill; z-index:1;
  filter:saturate(1.3) contrast(1.07); }
/* ٦ب: الخطّ الداخلي داخل إطار الإكليل */
.or--keyline{
  inset:clamp(34px,16%,86px) clamp(26px,16%,74px); z-index:3;
  border:1px solid var(--rule);
}
/* ٦ج: الحلقة والشعار عنصر واحد، والشعار في مركزها */
.or--crest{
  top:clamp(10px,3vw,26px); left:50%; transform:translateX(-50%);
  width:clamp(120px,34vw,200px); aspect-ratio:1; z-index:3;
  display:grid; place-items:center;
}
.or--crest img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; filter:saturate(1.3) contrast(1.07); }
.or--crest svg{ position:relative; width:26%; height:auto; fill:var(--ink); }
.pg--crest .sh__logo{ display:none; }   /* الشعار صار داخل الإكليل */
.pg--crest .sh{ padding-top:clamp(104px,30vw,210px); }
.or--rl{ bottom:0; left:-4%; width:clamp(130px,42vw,260px); z-index:1; }
.or--rr{ top:0; right:-4%; width:clamp(130px,42vw,260px); z-index:1; transform:scaleY(-1); }
.or--s1{ top:-3%; left:-7%; width:clamp(120px,42vw,250px); z-index:1; filter:saturate(1.25); }
.or--s2{ top:-3%; right:-7%; width:clamp(120px,42vw,250px); z-index:1; transform:scaleX(-1); filter:saturate(1.25); }
/* ٥ج: نفس الباقة مُدارة ١٨٠° لا معكوسة، فتقرأ كباقة واحدة في زاويتين */
.or--s3{ bottom:-3%; right:-7%; width:clamp(120px,42vw,250px); z-index:1; transform:rotate(180deg); filter:saturate(1.25); }
/* متناثرة */
.or--st{ z-index:1; opacity:.9; filter:saturate(1.2); }
.or--st1{ top:-3%;  left:-8%;  width:38%; transform:rotate(-8deg); }
.or--st2{ top:6%;   right:-9%; width:34%; transform:rotate(152deg); }
.or--st3{ top:32%;  left:-11%; width:30%; transform:rotate(24deg); }
.or--st4{ top:46%;  right:-10%;width:32%; transform:rotate(-166deg); }
.or--st5{ bottom:14%;left:-9%; width:33%; transform:rotate(-30deg); }
.or--st6{ bottom:-4%;right:-7%;width:37%; transform:rotate(174deg); }
.or--st7{ bottom:-5%;left:22%; width:30%; transform:rotate(96deg); }
.pg--strewn .sh{ background:transparent; box-shadow:none; max-width:min(70%,460px); }

.or--c{ width:clamp(34px,7vw,56px); height:clamp(34px,7vw,56px); z-index:3; }
.or--c1{ top:clamp(12px,2.6vw,20px); left:clamp(12px,2.6vw,20px); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.or--c2{ top:clamp(12px,2.6vw,20px); right:clamp(12px,2.6vw,20px); border-top:1px solid var(--rule); border-right:1px solid var(--rule); }
.or--c3{ bottom:clamp(12px,2.6vw,20px); left:clamp(12px,2.6vw,20px); border-bottom:1px solid var(--rule); border-left:1px solid var(--rule); }
.or--c4{ bottom:clamp(12px,2.6vw,20px); right:clamp(12px,2.6vw,20px); border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); }
/* ٤ب: الورقة هي الصفحة كلّها، والقوس مرسوم داخلها لا حولها — وإلّا اختفى
   خلف الورقة المعتمة لأن عرضيهما متساويان تقريبًا. */
.pg--arch{ padding:0; }
.pg--arch .sh{
  max-width:none; width:100%; min-height:100%; box-shadow:none;
  padding:clamp(84px,19vw,140px) clamp(30px,8vw,62px) clamp(34px,8vw,62px);
}
.or--arch{
  inset:clamp(38px,9.5vw,64px) clamp(16px,4.6vw,30px) clamp(16px,4.6vw,30px);
  border:1px solid var(--rule); z-index:3;
  border-radius:clamp(110px,32vw,190px) clamp(110px,32vw,190px) 3px 3px;
}
/* الشعار يكسر التاج: يتوسّط خطّ القوس، وحشوته بلون الورق تقطع الخطّ خلفه */
.or--archlogo{
  top:clamp(38px,9.5vw,64px); left:50%; transform:translate(-50%,-44%);
  height:clamp(42px,8.4vw,78px); width:auto; fill:var(--ink); opacity:.92;
  z-index:4; background:var(--sheet); padding:0 clamp(10px,2.6vw,18px);
  box-sizing:content-box;
}
.pg--arch .sh__logo{ display:none; }          /* الشعار صار جزءًا من الزينة */
/* خطوط رفيعة تقود إلى سطر اليوم — hairline leaders */
/* .sh عمود شبكي يتوسّط عناصره، فعرض السطر = عرض نصّه والخطوط تنكمش إلى صفر.
   يُعطى عرضًا صريحًا حتى يبقى للخطوط ما تمتدّ فيه. */
.pg--arch .sh__day{
  display:flex; align-items:center; gap:clamp(8px,2.4vw,14px);
  width:min(100%,380px);
}
.pg--arch .sh__day::before, .pg--arch .sh__day::after{
  content:""; flex:1; height:1px; background:var(--rule); opacity:.8;
}
/* الإطار والإكليل يحتاجان هواءً حتى لا يقع النصّ فوق الورق المرسوم */
/* النصّ يقع داخل حلقة الإكليل: عمود أضيق وهامش أوسع، وإلّا ركب الرسمَ */
/* حدّ عرض البطاقة في المخطّطات الثلاثة ذات الزينة المحيطة. رفعُه يكبّر
   الزينة معه تلقائيًّا لأنّها مقيسة بعرض البطاقة لا بعرض الصفحة. */
.pg.pg--wreath .sh, .pg.pg--frame .sh, .pg.pg--arcs .sh{
  background:transparent; box-shadow:none;
  max-width:min(66%, var(--cardMax,430px)); padding:clamp(40px,12vw,90px) 0;
}
/* --arcShift: كم يُزاح كلُّ شريطٍ إلى داخل الورقة ليلامس حدَّ النصّ.
   كان بنسبةٍ مئويّة في top/bottom، والنسبة هناك تُقاس على ارتفاع الحاوية
   لا عرضها — فخرجت ضعفَ المقصود وركب الزهرُ النصَّ. صارت إزاحةً بالبكسل
   داخل transform، وهي مقيسة على الصندوق نفسه فلا تُفاجئ. */
.pg--arcs{ --cardMax:500px; --arcX:1.25; --arcY:1; --arcShift:clamp(4px,1.4vw,9px); }
.pg--wreath, .pg--frame, .pg--arcs{ padding:0; }

/* ٦أ التاج — شريطان مقصوصان من أصلٍ واحد فيه تاجٌ أعلاه وقاعدةٌ أسفله
   وفراغٌ بينهما (٣٢١ صفًّا أعلاه و٣١٥ أسفله من ١٠٣٥). مطُّه على الصفحة
   كلّها كان يُنزل التاج على البسملة؛ وقياسه بعرض الصفحة جعله أضيق من
   البطاقة. قياسه الصحيح عرضُ البطاقة: width:100% داخل .sh.
   والشريطان مطلقا الموضع فوق هامشِ الورقة لا نصِّها — التاج قوسٌ مفتوح
   الوسط يجلس الشعار في فتحته — والحشو أدناه هو ما يضمن ذلك: ٤٠٪ أعلاه
   و٥٩٪ أسفله من عرض البطاقة نفسه، فالنسبة محفوظة في كلّ مقاس. */
.pg.pg--arcs .sh{
  padding-block:calc(min(66%, var(--cardMax,430px)) * .40)
               calc(min(66%, var(--cardMax,430px)) * .59);
  gap:clamp(6px,1.15vh,14px);
}
.or--arc{
  /* الزهر فوق النصّ لا خلفه، ومزاحٌ إلى داخل الورقة بمقدار --arcIn من عرض
     البطاقة. يبقى الضربُ (multiply) فوق النصّ: فبه يمرّ الحبر الداكن من
     تحت الزهر الفاتح فيُقرأ، ولولاه لَطمسَ بياضُ النثرة أوائل السطور. */
  position:absolute; inset-inline:0; width:100%; z-index:3;
  object-fit:cover; pointer-events:none;
  /* أبيضُ زهر النثرة كان قصاصةً على الورق؛ الضربُ يُلبسه لونَ الورق نفسه */
  mix-blend-mode:multiply; opacity:.94; filter:saturate(.96);
  /* مقبضان مستقلّان: --arcX عرضُ القوس و--arcY عمقُه.
     ذراعا القوس وفتحتُه في صورةٍ واحدة، فتمديدُه عرضًا يمدّ الفتحة معه
     بالنسبة نفسها — ١٫٢٥ وسّعت الفتحة رُبعًا. تضييقُ الفتحة لا يكون إلّا
     بتضييق القوس كلِّه؛ و--arcY يُنزل الذراعين فيبدو أضمَّ بلا تعريضٍ. */
  transform:scaleX(var(--arcX,1)) scaleY(var(--arcY,1));
}
.or--arcT{ top:0; aspect-ratio:700/700; object-position:center top;
  transform:translateY(var(--arcShift,0)) scaleX(var(--arcX,1)) scaleY(var(--arcY,1)); }
.or--arcB{ bottom:0; aspect-ratio:700/700; object-position:center bottom;
  transform:translateY(calc(-1 * var(--arcShift,0))) scaleX(var(--arcX,1)) scaleY(var(--arcY,1)); }

/* الموعد الثاني داخل خانة الوقت: سطرٌ يفصله عن الأوّل بلا خطّ ولا أيقونة */
.fc__k--b{ margin-top:clamp(5px,1.1vh,10px); }
.pg--wreath .sh__logo, .pg--frame .sh__logo, .pg--arcs .sh__logo{ opacity:.95; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.14s!important; }
}

/* ميل مختلف لكل نوع، كما في التصميم */
.ev--flap    { --tilt:-.7deg; }
.ev--airmail { --tilt:-1.3deg; }
.ev--tie     { --tilt:.8deg; }
.ev--telegram{ --tilt:-.5deg; }
.ev--sleeve  { --tilt:.5deg; }

/* الجولة ٦: البطاقة واحدة والأسماء تتغيّر — ٦أ أكبر، ٦ب أصغر، ٦ج الأكبر */
.pg--arcs  .sh__names{ font-size:clamp(30px,9.2vw,58px); }
.pg--frame .sh__names{ font-size:clamp(25px,7.4vw,46px); }
.pg--crest .sh__names{ font-size:clamp(31px,9.6vw,60px); }

/* ═══════════════════════════════════════════════════════════════════════
   تفاصيل الأغراض — القيم من ملفّ التصميم نفسه، نسبيّةً إلى الظرف لا الشاشة
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الطابع البريدي: زينة مستقلّة عن الختم ── */
.ev__post{
  position:absolute; left:9%; top:7%; width:20%; aspect-ratio:74/94; z-index:5;
  background:color-mix(in srgb, var(--paper) 78%, var(--dark));
  box-shadow:0 1px 2px rgba(60,42,20,.32);
}
.ev__post__perf{
  position:absolute; inset:-5px; pointer-events:none;
  background:
    radial-gradient(circle at 5px 5px, var(--paper) 3.8px, transparent 4.2px) repeat-x 0 0/10px 10px,
    radial-gradient(circle at 5px 5px, var(--paper) 3.8px, transparent 4.2px) repeat-x 0 100%/10px 10px,
    radial-gradient(circle at 5px 5px, var(--paper) 3.8px, transparent 4.2px) repeat-y 0 0/10px 10px,
    radial-gradient(circle at 5px 5px, var(--paper) 3.8px, transparent 4.2px) repeat-y 100% 0/10px 10px;
}
.ev__post__in{
  position:absolute; inset:5px; display:grid; place-content:center; gap:3px; justify-items:center;
  border:1px solid color-mix(in srgb, var(--ink) 50%, transparent);
}
.ev__post__in svg{ height:46%; width:auto; fill:var(--ink); opacity:.85; }
.ev__post__num{ font-family:var(--mono); font-size:6.5px; letter-spacing:.2em; color:var(--ink); }
/* ختم الإلغاء: حلقتان — الداخلية كانت مفقودة — واسم المدينة والتاريخ */
.ev__post__mark{
  position:absolute; left:-52%; top:20%; width:104%; aspect-ratio:1; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--ink) 52%, transparent);
  transform:rotate(-11deg); mix-blend-mode:multiply;
  display:grid; place-content:center; gap:1px; text-align:center;
}
.ev__post__mark::before{
  content:""; position:absolute; inset:6%; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ink) 38%, transparent);
}
.ev__post__mark i,
.ev__post__mark b{
  font-style:normal; font-weight:400; font-family:var(--mono);
  font-size:5.5px; letter-spacing:.08em;
  color:color-mix(in srgb, var(--ink) 72%, transparent);
}
.ev__post__mark i{ font-family:var(--ar); font-size:6px; letter-spacing:normal; }
/* أشرطة الإلغاء */
.ev__post__cancel{
  position:absolute; left:-70%; top:40%; width:240%; height:16%;
  transform:rotate(-11deg); mix-blend-mode:multiply; opacity:.5;
  background:repeating-linear-gradient(0deg,
    color-mix(in srgb, var(--ink) 90%, transparent) 0 1.5px, transparent 1.5px 6px);
}

/* ── ٣أ: الرباط الحقيقي ── */
.ev__tie{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.ev__tie__band{
  position:absolute; left:calc(24% - 9px); top:26%; width:18px; height:52%;
  border-left:1.5px solid color-mix(in srgb, var(--paper) 85%, transparent);
  border-right:1.5px solid color-mix(in srgb, var(--paper) 85%, transparent);
  transform:rotate(.8deg);
}
.ev__tie__btn{
  position:absolute; left:24%; width:16px; height:16px; margin-left:-8px;
  border-radius:50%; background:var(--accent);
  box-shadow:inset 0 0 0 2px rgba(255,245,225,.22), 0 1px 3px rgba(0,0,0,.4);
}
.ev__tie__btn--a{ top:26%; margin-top:-8px; }
.ev__tie__btn--b{ top:78%; margin-top:-8px; }
/* الخيط ملفوف حول الزرّ: خطّان متقاطعان عند كلّ زرّ */
.ev__tie__btn i{
  position:absolute; left:50%; top:50%; width:26px; height:1.5px; margin:-.75px 0 0 -13px;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
}
.ev__tie__btn i:first-child{ transform:rotate(36deg); }
.ev__tie__btn i:last-child{ transform:rotate(-36deg); }
/* شبكة التوجيه */
.ev__route{
  position:absolute; right:7%; top:22%; width:26%; display:grid; gap:7px; z-index:5;
}
.ev__route span{
  font-size:10px; color:rgba(43,36,28,.75);
  border-bottom:1px dotted rgba(43,36,28,.5); padding-bottom:11px;
}
/* ختم مطّاطي أحمر */
.ev__urgent{
  position:absolute; left:6%; bottom:6%; z-index:5;
  padding:5px 11px; border:2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  transform:rotate(-6deg); mix-blend-mode:multiply;
  font-weight:700; font-size:10.5px; word-spacing:.4em;
  color:color-mix(in srgb, var(--accent) 85%, transparent);
}

/* ── ٣ب: نموذج البرقية ── */
.ev__tele{ position:absolute; inset:0; padding:6% 6% 0; display:block; }
.ev__tele::before{                       /* تسطير الورق */
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:
    radial-gradient(26% 30% at 84% 12%, rgba(140,124,80,.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(42,63,107,.05) 0 1px, transparent 1px 4px);
}
.ev__tele__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:8px; border-bottom:1px solid rgba(42,63,107,.55);
}
.ev__tele__head b{
  font-family:var(--ar); font-weight:700; font-size:clamp(11px,3.2vw,14px);
  color:var(--accent);
}
.ev__tele__head em{
  font-family:var(--mono); font-style:normal; font-size:clamp(6px,1.9vw,9px);
  letter-spacing:.24em; color:var(--accent); opacity:.8;
}
.ev__tele__rule{ display:block; margin-top:7px; border-top:1px solid rgba(42,63,107,.3); }
.ev__tele__field{
  display:grid; grid-template-columns:auto 1fr; align-items:end; gap:8px; margin-top:13px;
}
.ev__tele__field label{
  font-family:var(--mono); font-size:9px; color:var(--accent);
}
.ev__tele__field i{ display:block; height:13px; border-bottom:1px solid rgba(42,63,107,.35); }
.ev__tele__serial{ position:absolute; right:6%; bottom:13%; text-align:end; display:grid; gap:3px; }
.ev__tele__serial em{
  font-family:var(--mono); font-style:normal; font-size:8px;
  letter-spacing:.1em; color:var(--accent); opacity:.85;
}
.ev__tele__serial b{ font-weight:500; font-size:10px; color:var(--accent); }
/* الحافّة المصمّغة */
.ev__tele__gum{
  position:absolute; left:0; right:0; bottom:0; height:9px;
  border-top:1px dashed rgba(42,63,107,.5);
  background:repeating-linear-gradient(90deg, rgba(42,63,107,.1) 0 4px, transparent 4px 8px);
}

/* ── ٣ج: غلاف الأرشيف ── */
.ev__deboss{
  position:absolute; left:-7%; top:-18%; width:40%; height:auto; z-index:1;
  fill:rgba(28,16,6,.22); filter:drop-shadow(0 1px 0 rgba(255,236,200,.13));
}
.ev__seam{ position:absolute; left:0; right:0; top:44%; height:1px;
  background:rgba(28,16,6,.35); z-index:2; }
.ev__seam::after{ content:""; position:absolute; left:0; right:0; top:3px; height:1px;
  background:rgba(255,236,200,.12); }
.ev__box{
  position:absolute; right:5%; top:6%; z-index:5;
  padding:6px 12px; border:2px solid rgba(28,16,6,.6); transform:rotate(-3deg);
  font-size:10.5px; word-spacing:.4em; color:rgba(28,16,6,.75);
}
/* بطاقة الفهرسة مدسوسة تحت شفة الغلاف: ظلّها إلى الأعلى لا الأسفل */
.ev__card{
  position:absolute; left:6%; bottom:-6%; width:46%; z-index:4;
  padding:10px 12px 18px; background:var(--paper); transform:rotate(2.5deg);
  box-shadow:0 -3px 10px rgba(20,10,2,.35);
  display:grid; gap:5px; text-align:center;
}
.ev__card em{ font-family:var(--mono); font-style:normal; font-size:7.5px;
  letter-spacing:.2em; color:rgba(43,36,28,.8); }
.ev__card i{ display:block; border-top:1px dotted rgba(43,36,28,.45); }
.ev__card b{ font-weight:500; font-size:11px; color:var(--ink); }

/* نسيج الكرافت أخشن من الورق العادي */
.ev--sleeve .ev__paper::after{
  background:
    radial-gradient(30% 34% at 78% 20%, rgba(28,16,6,.14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(28,16,6,.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(28,16,6,.06) 0 1px, transparent 1px 4px);
  opacity:.7;
}

/* ── خطّ الأسماء يختلف باختلاف الخيار ── */

/* ١ج: إطار أخضر عريض حول الورقة — لا زهور فيها أصلًا */
.or--edge{ inset:0; border:6px solid var(--accent); z-index:3; }
.pg--edge .sh{ margin:clamp(10px,3vw,22px); }


/* ═══════════════════ مصغّرات الأزرار وعيّنات اللون ═══════════════════
   زرّ الشكل يحمل الشيء نفسه مصغّرًا لا مستطيلًا ملوّنًا: العيّنة اللونية
   كانت تتكرّر متطابقة على كلّ الأزرار بعد فصل اللون عن الشكل، فلم تعد
   تفرّق شيئًا. المصغّر يُرسم بالمحرّك نفسه وبألوان اللوحة المختارة. */
.mini{
  display:block; position:relative; overflow:hidden;
  background:var(--ui-bg); border-bottom:1px solid rgba(255,255,255,.06);
  height:86px;
}
.mini__in{
  position:absolute; top:0; right:50%; width:560px; height:760px;
  transform:translateX(50%) scale(.113); transform-origin:top center;
  pointer-events:none;
}
.mini__in .pg{ min-height:760px; }
.mini__in .ev__hint{ display:none; }

/* الظرف عرضيٌّ في الغالب، فإطارٌ عرضيّ يملؤه بدل أن يحفّه فراغ من فوق ومن
   تحت. الطولي منها (الملفّ) يبقى طوليًّا داخله — وذلك نصف الفرق بينها. */
.mini--env .mini__in{ width:640px; height:440px; transform:translateX(50%) scale(.196); }
.mini--seal .mini__in{ width:300px; height:300px; transform:translateX(50%) scale(.287); }
.sealth{ width:300px; height:300px; display:grid; place-items:center; background:var(--paper); }
.mini--card{ height:150px; }
.mini--card .mini__in{ transform:translateX(50%) scale(.197); }
/* شريط اللوحة تحت المصغَّر: التصميم فوقه واللون تحته، كلٌّ يُقرأ وحده */
.palstrip{ display:block; height:9px; }

/* شريط النسبة: ٧٠ للورق، ٢٠ للحبر، ١٠ للّمسة — تُقرأ بالعين لا بالرقم */
.opt > .sw--pal{ height:52px; }
.palbar{
  display:block; height:26px; border-radius:6px; margin:0 0 12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.slots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; }
.slot{
  display:grid; grid-template-columns:auto 1fr; grid-auto-rows:auto;
  align-items:center; gap:4px 9px; padding:11px 12px 12px;
  background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:10px; cursor:pointer;
}
.slot b{ grid-column:1/-1; font-size:.74rem; font-weight:600; color:var(--ui-ink); }
.slot input[type=color]{
  grid-column:1; width:40px; height:30px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--ui-line); border-radius:7px;
}
.slot input[type=color]::-webkit-color-swatch-wrapper{ padding:3px; }
.slot input[type=color]::-webkit-color-swatch{ border:none; border-radius:4px; }
.slot code{ grid-column:2; font-size:.68rem; letter-spacing:.06em; color:var(--ui-ink2);
  direction:ltr; text-align:left; }
.slot i{ grid-column:1/-1; font-style:normal; font-size:.63rem; line-height:1.7;
  color:var(--ui-ink2); }

/* ═══════════════ لؤلؤ وزهر: الزينة من الصورة نفسها ═══════════════
   الصورة ٩٠٠×١٦٠٠: لؤلؤٌ في أعلى ٣١٪ منها، وزهرٌ في أسفل ٢٦٪، وما بينهما
   أرضٌ صافية. لو وُضعت خلفيّةً واحدة بـcover لقُصّ الشريطان كلّما اختلفت
   نسبةُ الشاشة عن نسبتها — وهما الزينة كلُّها. فتُرسم نسختين: واحدةٌ
   مثبّتة أعلى البطاقة وأخرى أسفلها، وبينهما لونُ أرض الصورة نفسه
   (#EAEAE7، مقيسٌ منها لا مخمَّن) فلا يظهر وصل. */
/* الصورة طوليّة (٩٠٠×١٦٠٠)، وارتفاع شريطيها نسبةٌ من عرضها. فمدُّها على
   شاشةٍ عريضة يجعل اللؤلؤ وحده ٦٦١ بكسلًا ويدفع النصّ تحت الطيّ. تملأ
   الشاشة حافّةً إلى حافّة حيث تقارب النسبتان (الجوّال واللوح طوليًّا)،
   وتُحدّ بعمودٍ طوليّ حيث لا تقاربان. */
.pg--pearls{ padding:0; --cardW:100%; }
@media (min-width:760px){ .pg--pearls{ --cardW:620px; } }
.pg--pearls .sh{
  max-width:var(--cardW,100%); width:100%; min-height:100%;
  /* ملفّان لا ملفٌّ واحد: كلُّ طبقةٍ ترسم صورتها كاملةً لا شريطَها، فكان
     زهرُ النسخة العليا يقع في وسط البطاقة. انظر split-bands.py. */
  background:
    var(--bandT) top center / 100% auto no-repeat,
    var(--bandB) bottom center / 100% auto no-repeat,
    /* الأرضيّة بين القصّتين تدرّجٌ لا لونٌ واحد: في الصورة تدرّجٌ رأسيّ،
       ولونٌ مسطّح يُظهر وصلًا عند كلّ قصّة. الطرفان مقيسان من الصورة. */
    linear-gradient(var(--ground,#E0E0DE), var(--ground2,#E0E0DE));
  box-shadow:0 26px 60px -26px rgba(40,44,34,.45);
  /* الحشو بنسبة الشريطين من عرض البطاقة: أعلاه ٠٫٣١ × ١٫٧٨ ≈ ٥٥٪ وأسفله
     ٠٫٢٦ × ١٫٧٨ ≈ ٤٦٪، زائدًا هامشًا. وهو مكتوبٌ بـcalc على العبارة التي
     تحدّ العرض نفسها: النسبة المئويّة في padding تُقاس على عرض الحاوية
     (الصفحة) لا على عرض البطاقة، فكانت تتضاعف كلّما اتّسعت الشاشة.
     والجانبان ضيّقان عمدًا: الصورة خالية يمنةً ويسرة، فيتّسع النصّ عرضًا
     بدل أن يطول فيصطدم باللؤلؤ أو الزهر. */
  /* min(100%, --cardW) هو عين ما يحدّ العرض أعلاه، فالحشو يتبع عرضَ
     البطاقة لا عرضَ الصفحة — والنسبة في padding تُقاس على الحاوية. */
  padding:calc(min(100%, var(--cardW,100%)) * .578)   /* اللؤلؤ ينتهي عند ٠٫٥٦٠ */
          calc(min(100%, var(--cardW,100%)) * .055)
          calc(min(100%, var(--cardW,100%)) * .432);  /* والزهر عند ٠٫٤١٣ */
}
.pg--pearls .sh__bless,
.pg--pearls .sh__poem{ max-width:none; }

/* الشريطان يأخذان ٥٥٪ من شاشة الجوّال، فما بقي للنصّ ضيّق. تُشدّ المسافات
   دون مسّ مقاس الحرف: التصغير يُقصّر الصفحة ويُتعب القارئ، والشدُّ يُقصّرها
   ولا يُتعبه. وهامشُ الشريطين يُردّ إلى ما يكفي لعدم التلامس لا أكثر. */
.pg--pearls .sh{ gap:clamp(5px,1.1vh,13px); }
.pg--pearls .fcs{ margin-block:clamp(2px,.7vh,9px); }
.pg--pearls .fc{ padding:clamp(7px,1.7vw,13px) clamp(3px,1vw,9px); }
.pg--pearls .sh__acts{ margin-top:clamp(2px,.7vh,9px); }
.pg--pearls .sh__btn{ padding:clamp(9px,2.1vw,14px) clamp(5px,1.7vw,12px); }
.pg--pearls .sh__foot{ margin-top:clamp(4px,1vh,11px); }