/* =========================================================================
   هوية عائلة حوّاري — مكتبة عثمانية بروحٍ سعودية
   تُحمَّل بعد style.css وتعيد تلوين القالب وزخرفته:
   خشب الجوز والجلد، تذهيب المخطوطات، وأزرق بلاط إزنيق.
   كل الزخارف مرسومة في assets/ottoman/ (يولّدها tools/gen-ottoman-assets.mjs).
   ========================================================================= */

/* ---------- الخطوط: الرقعة للعناوين والأميري للنصوص الأدبية ---------- */
@font-face{font-family:'Aref Ruqaa';src:url('fonts/aref-ruqaa-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Aref Ruqaa';src:url('fonts/aref-ruqaa-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Amiri';src:url('fonts/amiri-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Amiri';src:url('fonts/amiri-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');font-weight:700 900;font-display:swap}

:root{
  /* القيم الأولى قبل أن يحسب script.js درجات الألوان */
  --beige:#f4ead6;--beige-2:#ecdfc4;--beige-3:#dcc59a;--cream:#faf4e8;--paper:#fcf8f0;
  --green:#3f2415;--green-2:#55331f;--green-3:#76503a;--dark:#2a180e;--deep:#190e08;
  --green-rgb:63,36,21;--dark-rgb:42,24,14;--deep-rgb:25,14,8;--cream-rgb:250,244,232;--beige-rgb:244,234,214;

  /* الذهب العثماني */
  --gold:#a97c33;--gold-2:#c79a45;--gold-3:#e2bf78;
  --brown:#6b4a2e;--ink:#2c190d;

  /* أزرق إزنيق والفيروزي والياقوتي */
  --ot-blue:#1d4a8a;--ot-blue-deep:#12305c;--ot-blue-light:#5a8bd0;
  --ot-turq:#3c9caa;--ot-ruby:#a33a26;
  --ot-blue-rgb:29,74,138;

  --font-body:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Aref Ruqaa','Amiri',serif;
  --font-poem:'Amiri','Dima Naskh',serif;

  --edge:30px;
  --girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a97c33' stroke-opacity='.15' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Cpath d='M32 24l3 5 5 3-5 3-3 5-3-5-5-3 5-3z'/%3E%3Cpath d='M0 0l15 15M64 0L49 15M0 64l15-15M64 64L49 49M32 0v8M32 56v8M0 32h8M56 32h8'/%3E%3C/g%3E%3C/svg%3E");
  --girih-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e2bf78' stroke-opacity='.13' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Cpath d='M32 24l3 5 5 3-5 3-3 5-3-5-5-3 5-3z'/%3E%3Cpath d='M0 0l15 15M64 0L49 15M0 64l15-15M64 64L49 49M32 0v8M32 56v8M0 32h8M56 32h8'/%3E%3C/g%3E%3C/svg%3E");
  --leather:radial-gradient(120% 90% at 50% 20%,var(--green-2) 0%,var(--green) 50%,var(--deep) 100%);
}

html.intro-lock,html.intro-lock body{overflow:hidden}
html{scrollbar-color:var(--gold) var(--beige-2)}
::selection{background:#e7cd8f;color:var(--ink)}

body{
  background-color:var(--beige);
  background-image:var(--girih),radial-gradient(120% 80% at 50% 0%,var(--paper) 0%,var(--beige) 60%,var(--beige-2) 100%);
  background-size:64px 64px,100% 100%;
  background-attachment:fixed;
  padding-inline:var(--edge);
}
body::before{display:none}
section{background-color:transparent}

/* ---------- إطار الصفحة الجانبي: شريطان مزخرفان كتجليد المخطوطات ---------- */
.ot-edge{
  position:fixed;top:0;bottom:0;z-index:110;inline-size:var(--edge);pointer-events:none;
  background:url("assets/ottoman/border.svg") repeat-y center top/var(--edge) auto,#2a170b;
  box-shadow:inset 0 0 0 1px rgba(226,191,120,.35);
}
.ot-edge::before,.ot-edge::after{
  content:"";position:absolute;top:0;bottom:0;inline-size:2px;background:var(--gold-2);
}
.ot-edge::before{inset-inline-start:2px}
.ot-edge::after{inset-inline-end:2px}
.ot-edge-r{right:0}
.ot-edge-l{left:0}
@media (max-width:720px){
  :root{--edge:10px}
  .ot-edge{background:linear-gradient(90deg,var(--gold-2) 0 2px,var(--ot-blue) 2px 8px,var(--gold-2) 8px 10px)}
  .ot-edge::before,.ot-edge::after{display:none}
}

/* ---------- الترويسة: جلد بنّي وشريط بلاط إزنيق أسفلها ---------- */
header{
  background:linear-gradient(180deg,rgba(var(--dark-rgb),.97),rgba(var(--green-rgb),.95));
  border-bottom:1px solid var(--gold-2);
}
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--girih-gold);background-size:64px 64px;opacity:.9;
}
header>*{position:relative}
header::after{
  block-size:12px;
  background:url("assets/ottoman/tile-band.svg") repeat-x center/auto 100%;
  border-bottom:1px solid var(--gold-2);opacity:1;
}
.logo span{font-family:var(--font-head);font-weight:700;color:var(--gold-3);letter-spacing:.2px}
nav a::after{background:linear-gradient(90deg,var(--gold-2),var(--ot-blue-light),var(--gold-2))}

/* ---------- الواجهة: مكتبة مرسومة ولوحة مذهّبة ---------- */
.hero-bg{background-position:center;background-size:cover;animation-duration:40s}
.hero::before{
  background:
    radial-gradient(70% 60% at 50% 45%,rgba(255,216,150,.16),transparent 70%),
    linear-gradient(180deg,rgba(var(--deep-rgb),.55) 0%,rgba(var(--deep-rgb),.35) 40%,rgba(var(--deep-rgb),.9) 100%);
}
.hero-content{
  padding:44px clamp(22px,5vw,64px) 40px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(var(--green-rgb),.72),rgba(var(--deep-rgb),.86));
  border:1px solid var(--gold-2);
  outline:1px solid rgba(226,191,120,.35);outline-offset:6px;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 6px rgba(0,0,0,.2),inset 0 0 0 7px rgba(226,191,120,.3);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  max-width:820px;
}
.hero .crest{inline-size:118px;animation-duration:7s}
.hero h1,#heroTitle{
  font-weight:700;
  font-size:clamp(2.3rem,6.4vw,4.6rem);
  line-height:1.55;
  background:linear-gradient(100deg,#b8893a 0%,#f0d697 30%,#fff4cf 45%,#e2bf78 60%,#a97c33 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(226,191,120,.25));
  padding:0 .3em .1em;margin-inline:-.3em;
}
.hero .sub,#heroSub{font-family:var(--font-poem);color:#f2e3c0}
.hero .divider{
  inline-size:min(300px,80%);block-size:56px;margin:18px auto 10px;
  background:url("assets/ottoman/medallion.svg") center/contain no-repeat;
}
.hero .divider::before{display:none}
.hero .bism,#heroFounder{font-family:var(--font-poem);color:var(--gold-3)}
.scroll-hint{color:var(--gold-3);inset-block-end:22px}
.hero{padding-block-end:120px}

/* حافة الواجهة: شريط بلاط بدل الشُرفات */
.najd-edge.hero-edge{
  -webkit-mask:none;mask:none;block-size:16px;
  background:url("assets/ottoman/tile-band.svg") repeat-x center/auto 100%;
  border-block:2px solid var(--gold-2);
}

/* زوايا مذهّبة (يضيفها ottoman.js داخل العناصر المؤطّرة) */
.ot-corners{position:absolute;inset:8px;pointer-events:none;z-index:3}
.ot-corners i{
  position:absolute;inline-size:var(--corner,64px);block-size:var(--corner,64px);
  background:url("assets/ottoman/corner.svg") center/contain no-repeat;
}
.ot-corners i:nth-child(1){top:0;left:0}
.ot-corners i:nth-child(2){top:0;right:0;transform:scaleX(-1)}
.ot-corners i:nth-child(3){bottom:0;left:0;transform:scaleY(-1)}
.ot-corners i:nth-child(4){bottom:0;right:0;transform:scale(-1,-1)}
.hero-content .ot-corners{--corner:78px;inset:10px}
@media (max-width:560px){.hero-content .ot-corners{--corner:50px}}

/* ---------- ترويسات الأقسام: زهرة الخزامى وسلسلة مذهّبة ---------- */
.sec-head .orn{gap:16px}
.sec-head .orn::before,.sec-head .orn::after{
  inline-size:110px;block-size:16px;
  background:url("assets/ottoman/chain.svg") repeat-x center/26px 16px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%);
}
.sec-head .orn::after{-webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent)}
.orn-mark{inline-size:68px;block-size:32px;display:block}
.sec-head h2{font-weight:700;color:var(--green);letter-spacing:.3px}
.sec-head h2::after{
  inline-size:84px;block-size:3px;bottom:-14px;
  background:linear-gradient(90deg,var(--gold-2),var(--ot-blue),var(--gold-2));
}
.sec-head p{font-family:var(--font-poem);font-size:1.12rem;color:var(--brown)}
.empty::before{content:"";inline-size:46px;block-size:22px;margin:0 auto 8px;background:url("assets/ottoman/glyph.svg") center/contain no-repeat;opacity:.8}

/* ---------- الفاصل بين الأقسام: الشمسة على شريط جلدي ---------- */
.sadu-divider{
  block-size:74px;
  background:
    url("assets/ottoman/medallion.svg") center/236px 70px no-repeat,
    url("assets/ottoman/chain.svg") center/26px 16px repeat-x,
    var(--girih-gold),
    linear-gradient(180deg,var(--green-2),var(--dark));
  background-size:236px 70px,26px 16px,64px 64px,100% 100%;
  border-block:2px solid var(--gold-2);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.25),inset 0 -3px 0 rgba(0,0,0,.25),0 6px 16px rgba(var(--dark-rgb),.22);
}
@media (max-width:560px){
  .sadu-divider{block-size:60px;background-size:190px 56px,22px 14px,64px 64px,100% 100%}
}
footer .sadu-divider{border-block-start:0}

/* الأشرطة الصغيرة (البوابة، الألبوم): بلاط إزنيق */
.sadu-band{
  block-size:16px;
  background:url("assets/ottoman/tile-band.svg") repeat-x center/auto 100%;
  border-block:2px solid var(--gold-2);
}
.gate-box .gate-band{block-size:22px}

/* ---------- معرض «إرث المكان»: لوحات مؤطّرة بالذهب ---------- */
.najd-card{
  border:2px solid var(--gold-2);border-radius:6px;
  box-shadow:0 14px 34px rgba(var(--dark-rgb),.28),inset 0 0 0 4px rgba(var(--deep-rgb),.4);
  background:var(--dark);
}
.najd-card::after{
  content:"";position:absolute;inset:6px;z-index:2;pointer-events:none;
  border:1px solid rgba(226,191,120,.65);border-radius:3px;
}
.najd-card figcaption{
  background:linear-gradient(transparent,rgba(var(--deep-rgb),.94));
  color:var(--gold-3);font-weight:700;
}

/* ---------- الأقسام الداكنة: جلد مذهّب ---------- */
#achievements,#recordings,#registry{background:var(--leather)}
#achievements::before,#recordings::before,#registry::before{
  opacity:1;background:var(--girih-gold);background-size:64px 64px;
}
#achievements::after,#recordings::after,#registry::after{
  content:"";position:absolute;inset:14px;pointer-events:none;z-index:0;
  border:1px solid rgba(226,191,120,.35);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.12),inset 0 0 0 6px rgba(226,191,120,.18);
}
#achievements .sec-head p,#recordings .sec-head p,#registry .sec-head p{color:#ecdcb8}
.rec-deck{background:linear-gradient(180deg,var(--ot-blue-deep),#0b1f3d)}
.rec-reel{background:radial-gradient(circle at 40% 35%,#3b6aa8,#0b1f3d 70%)}
.stat{border-color:rgba(226,191,120,.45);border-radius:6px}
.stat .num{font-family:'Amiri',serif;font-weight:700}

/* ---------- بطاقات وعناصر متفرقة بلمسة زرقاء ---------- */
.story-cover{background:linear-gradient(160deg,var(--ot-blue),var(--ot-blue-deep))}
.filters button.active{background:var(--ot-blue);border-color:var(--ot-blue);color:#fff}
.tree-show-all[aria-pressed="true"]{background:var(--ot-blue);border-color:var(--ot-blue);color:#fff}
.poem-head{background:var(--girih-gold),linear-gradient(160deg,var(--ot-blue),var(--ot-blue-deep));background-size:64px 64px,100% 100%}
.btn-add{color:var(--ink);background:linear-gradient(120deg,#b98a3c,#e2bf78 55%,#c79a45)}

/* ---------- شجرة العائلة ---------- */
/* بطاقة الملوك والأعلام: أزرق إزنيق ملكي بتذهيب */
.king-card{
  background:
    radial-gradient(130% 80% at 50% 0%,rgba(226,191,120,.18),transparent 60%),
    repeating-linear-gradient(45deg,rgba(226,191,120,.06) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,rgba(226,191,120,.06) 0 1px,transparent 1px 9px),
    linear-gradient(160deg,#2a5ea6,var(--ot-blue-deep) 58%,#0b1f3d);
  box-shadow:0 6px 18px rgba(11,31,61,.36);
}
.king-card:hover{box-shadow:0 9px 24px rgba(11,31,61,.46)}
.king-card .avatar{background:linear-gradient(150deg,#244f8c,#0b1f3d);box-shadow:0 0 0 3px rgba(11,31,61,.85),0 0 0 4px rgba(226,191,120,.3)}
.king-card .member-card-actions{background:rgba(6,16,34,.42)}
.king-card .member-age{color:#c5b78f}
.king-card.current-card{
  background:
    radial-gradient(130% 80% at 50% 0%,rgba(226,191,120,.26),transparent 62%),
    linear-gradient(160deg,#3068b5,var(--ot-blue-deep) 58%,#0d2448);
  box-shadow:0 0 0 2px rgba(226,191,120,.4),0 9px 24px rgba(11,31,61,.44);
}

/* ---------- البوابة ---------- */
.gate{background:var(--girih-gold),var(--leather);background-size:64px 64px,100% 100%}
.gate::before{background:url("assets/ottoman/shelves-hero.svg") center/cover no-repeat;opacity:.28}
.gate-box{
  background:linear-gradient(180deg,var(--paper),var(--beige));
  border:2px solid var(--gold-2);border-radius:8px;
  outline:1px solid rgba(226,191,120,.55);outline-offset:5px;
  padding-inline:44px;
}
.gate-box .ot-corners{--corner:58px;inset:30px 6px 6px}
.gate-title{font-size:1.6rem;font-weight:700}
.gate-lead{font-family:var(--font-poem);font-size:1rem}
@media (max-width:420px){.gate-box{padding-inline:30px}.gate-box .ot-corners{--corner:42px}}

/* ---------- التذييل ---------- */
footer{background:var(--girih-gold),linear-gradient(180deg,var(--dark),var(--deep));background-size:64px 64px,100% 100%}
footer .f-name{font-weight:700;font-size:1.9rem}
footer .f-dua{font-family:var(--font-poem)}

/* ---------- الألبوم والنوافذ ---------- */
.modal-box{border-top:4px solid var(--gold-2)}
.bk-cover{background:var(--girih-gold),var(--leather) !important;background-size:64px 64px,100% 100% !important}

/* =========================================================================
   الافتتاحية — غلاف كتاب ينفتح على الأرشيف
   ========================================================================= */
.ot-intro{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  perspective:1800px;cursor:pointer;overflow:hidden;color:var(--gold-3);
}
.ot-intro-cover{
  position:absolute;top:0;bottom:0;width:50.2%;
  background:var(--girih-gold),radial-gradient(120% 90% at 50% 30%,#4d2c17 0%,#331d0f 55%,#1f1108 100%);
  background-size:64px 64px,200% 100%;
  transition:transform 1.1s cubic-bezier(.62,.02,.32,1),opacity 1.1s ease,filter 1.1s ease;
  backface-visibility:hidden;
}
.ot-intro-cover.right{right:0;transform-origin:right center;background-position:0 0,100% 0;box-shadow:inset 18px 0 30px rgba(0,0,0,.5)}
.ot-intro-cover.left{left:0;transform-origin:left center;background-position:0 0,0 0;box-shadow:inset -18px 0 30px rgba(0,0,0,.5)}
.ot-intro-tooling{position:absolute;inset:26px;border:1px solid rgba(226,191,120,.55);box-shadow:inset 0 0 0 5px rgba(0,0,0,.15),inset 0 0 0 6px rgba(226,191,120,.35)}
.ot-intro-cover.right .ot-intro-tooling{left:0;border-left:0}
.ot-intro-cover.left .ot-intro-tooling{right:0;border-right:0}
.ot-intro.is-opening .ot-intro-cover.right{transform:rotateY(100deg);opacity:0;filter:brightness(.6)}
.ot-intro.is-opening .ot-intro-cover.left{transform:rotateY(-100deg);opacity:0;filter:brightness(.6)}
.ot-intro .ot-corners{inset:18px;--corner:110px;transition:opacity .45s ease;opacity:0}
.ot-intro.is-opening .ot-corners{opacity:0 !important}
.ot-intro-stage{
  position:relative;z-index:2;width:min(640px,94vw);height:min(700px,92vh);
  display:grid;place-items:center;transition:opacity .45s ease,transform .6s ease;
}
.ot-intro.is-opening .ot-intro-stage{opacity:0;transform:scale(1.04)}
.ot-intro-arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ot-intro-arch path{
  fill:none;stroke:var(--gold-3);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(226,191,120,.45));
}
.ot-intro-arch path.inner{stroke:var(--gold-2);stroke-width:1}
.ot-intro-arch path.base{stroke-width:1.4}
.ot-intro-arch path.fill{stroke:none;fill:rgba(12,6,2,.66);stroke-dasharray:none;filter:none;opacity:0}
.ot-intro-content{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:70px}
.ot-intro-emblem{
  width:120px;height:120px;padding:14px;border-radius:50%;object-fit:contain;
  background:radial-gradient(circle at 50% 38%,#fffaf0 0%,#f1dfb2 70%,#d8b670 100%);
  box-shadow:0 0 0 2px var(--gold-3),0 0 0 7px rgba(0,0,0,.3),0 0 0 8px rgba(226,191,120,.6),0 0 40px rgba(226,191,120,.35);
  opacity:0;
}
.ot-intro-eyebrow{margin-top:26px;font-family:var(--font-poem);font-size:18px;color:var(--gold-3);opacity:0}
.ot-intro-name{
  margin:-6px 0 0;font-family:'Aref Ruqaa',serif;font-weight:700;
  font-size:clamp(54px,11vw,104px);line-height:1.5;white-space:nowrap;
}
.ot-intro-name span{
  display:inline-block;padding:0 .5em .12em;margin-inline:-.5em;
  background:linear-gradient(100deg,#9c6f2a 0%,#e9c983 22%,#fff4cf 32%,#e2bf78 44%,#a97c33 62%,#f0d697 82%,#9c6f2a 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(226,191,120,.3));
  clip-path:inset(0 0 0 100%);
}
.ot-intro-medallion{margin-top:-6px;width:280px;height:84px;opacity:0}
.ot-intro-founder{max-width:min(400px,78vw);line-height:1.8;margin-top:10px;font-family:var(--font-poem);font-size:17px;color:#f4e3bb;opacity:0;padding-inline:18px}
.ot-intro-tagline{margin-top:6px;font-size:12px;color:rgba(226,191,120,.85);opacity:0}
.ot-intro-skip{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(242,228,196,.6);white-space:nowrap;opacity:0}

.ot-intro:not(.is-waiting) .ot-intro-arch path{animation:ot-draw 1.8s .15s cubic-bezier(.6,0,.3,1) forwards}
.ot-intro:not(.is-waiting) .ot-intro-arch path.inner{animation-delay:.45s}
.ot-intro:not(.is-waiting) .ot-intro-arch path.base{animation-duration:1s;animation-delay:1.1s}
.ot-intro:not(.is-waiting) .ot-intro-arch path.fill{animation:ot-fade 1.4s .6s ease forwards}
.ot-intro:not(.is-waiting) .ot-intro-emblem{animation:ot-seal .9s .45s cubic-bezier(.3,1.4,.5,1) forwards}
.ot-intro:not(.is-waiting) .ot-intro-eyebrow{animation:ot-fade-up .7s .9s ease forwards}
.ot-intro:not(.is-waiting) .ot-intro-name span{animation:ot-write 1.5s 1.05s cubic-bezier(.5,0,.3,1) forwards,ot-shimmer 1.6s 2.4s ease-in-out forwards}
.ot-intro:not(.is-waiting) .ot-intro-medallion{animation:ot-seal .8s 2s ease forwards}
.ot-intro:not(.is-waiting) .ot-intro-founder{animation:ot-fade-up .7s 2.3s ease forwards}
.ot-intro:not(.is-waiting) .ot-intro-tagline{animation:ot-fade-up .7s 2.5s ease forwards}
.ot-intro:not(.is-waiting) .ot-intro-skip{animation:ot-fade-up .7s 1.4s ease forwards}
.ot-intro:not(.is-waiting) .ot-corners{animation:ot-fade 1.2s .3s ease forwards}

@keyframes ot-draw{to{stroke-dashoffset:0}}
@keyframes ot-seal{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes ot-fade-up{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes ot-fade{to{opacity:1}}
@keyframes ot-write{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ot-shimmer{from{background-position:100% 0}to{background-position:0% 0}}

@media (max-width:720px){
  .ot-intro-tooling{inset:12px}
  .ot-intro .ot-corners{--corner:64px}
  .ot-intro-founder{font-size:14px}
  .ot-intro-emblem{width:100px;height:100px}
  .ot-intro-medallion{width:230px;height:69px}
}
@media (prefers-reduced-motion:reduce){
  .ot-intro-name span{clip-path:none}
  .hero-bg{animation:none}
}
@media print{.ot-edge,.ot-intro{display:none !important}body{padding:0}}

/* ---------- إضافة سريعة من بطاقة الشجرة (وضع التحرير) ---------- */
.member-quick{
  display:flex;gap:4px;width:100%;padding:5px;
  border-top:1px dashed rgba(169,124,51,.55);background:rgba(var(--beige-rgb),.7);
}
.mq-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:4px 4px;border-radius:5px;font-size:.68rem;font-weight:700;line-height:1.3;
  color:var(--green);background:var(--paper);border:1px solid rgba(169,124,51,.55);
  transition:background .2s,color .2s;white-space:nowrap;
}
.mq-btn svg{inline-size:12px;block-size:12px;flex-shrink:0}
.mq-btn:hover{background:var(--gold-3);color:var(--ink)}
.mq-wife{color:#8d4258;border-color:#e6b9c9;background:#fff6f9}
.mq-wife:hover{background:#fbe2ec;color:#7c3a51}
.king-card .member-quick{background:rgba(6,16,34,.35);border-top-color:rgba(226,191,120,.3)}
.princess-card .member-quick{background:#fff8fb;border-top-color:#f1d5df}

.wives-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.wife-row{display:flex;gap:8px;align-items:center}
.wife-row input{
  flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(169,124,51,.5);
  background:#fff;font:inherit;color:var(--ink);
}
.wife-row .btn{flex-shrink:0;padding:8px 14px}

/* ---------- بدائل النقوش النجدية في القالب: بلاط إزنيق وحافة أقواس عثمانية ---------- */
:root{
  --sadu-tile:url("assets/ottoman/tile-band.svg");
  --najd-merlon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16'%3E%3Cpath d='M0 16V11C5 11 8.2 7.5 10 2C11.8 7.5 15 11 20 11V16Z'/%3E%3C/svg%3E");
}
.fig-photo::before{background:linear-gradient(160deg,rgba(var(--green-rgb),.9),rgba(var(--deep-rgb),.96))}
.chip-group[data-chips^="gender"] .chip[data-value="أنثى"].active{background:#c97a95;border-color:#b5637f;color:#fff}