/* ============================================================
   FAYUM BOTANICALS — design system v1
   Palette v2: Fayum blue · chamomile gold · oasis sand
   Type: El Messiri (display) · Readex Pro (body)
   ============================================================ */
:root{
  --bg:#0E1F4B; --bg-2:#12264F; --surface:#1A3161; --surface-2:#22417F;
  --paper:#F2EBDB; --paper-2:#EAE2CE; --kraft:#C9A876;
  --ink:#F2EBDB; --ink-dim:#B4C0DC; --ink-on-paper:#14264F; --ink-on-paper-dim:#4D5C85;
  --gold:#E8B93B; --gold-soft:#F2D27A; --gold-deep:#B8860B;
  --mint:#8FA8DC; --hibiscus:#C65B50; --line:#2B4A8F; --line-paper:#D8CDB6;
  --radius:18px; --radius-sm:12px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --max:1180px;
  --font-d:'El Messiri', serif;
  --font-b:'Readex Pro', -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-weight:300; line-height:1.8; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold); color:#14264F}
img,svg{max-width:100%;display:block}
a{color:var(--gold-soft); text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--font-d); font-weight:700; line-height:1.28; letter-spacing:.005em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.22rem}
p{max-width:64ch}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(232,185,59,.45); border-radius:999px;
  padding:5px 16px; margin-bottom:18px; font-weight:400;
}
.lead{font-size:1.12rem; color:var(--ink-dim); font-weight:300}
.gold{color:var(--gold)}
.center{text-align:center}
.center p{margin-inline:auto}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(11,26,62,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(43,74,143,.7);
}
.nav-in{display:flex; align-items:center; gap:26px; height:74px; max-width:var(--max); margin:0 auto; padding:0 22px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand img{height:40px;width:40px}
.brand b{font-family:var(--font-d); font-size:1.08rem; letter-spacing:.06em; font-weight:700}
.brand small{display:block; font-size:.6rem; letter-spacing:.32em; color:var(--gold); font-weight:400}
.nav-links{display:flex; gap:26px; margin-inline-start:auto; align-items:center}
.nav-links a{color:var(--ink-dim); font-size:.9rem; font-weight:400; position:relative; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .25s}
.nav-links a:hover::after,.nav-links a[aria-current]::after{right:0}
.nav-links a[aria-current]{color:var(--ink)}
.btn{
  display:inline-block; background:var(--gold); color:#14264F !important; font-weight:500;
  padding:12px 26px; border-radius:999px; font-size:.92rem; border:1px solid var(--gold);
  transition:transform .18s, box-shadow .18s; box-shadow:0 8px 22px rgba(232,185,59,.22);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(232,185,59,.32)}
.btn-ghost{background:transparent; color:var(--ink) !important; border:1px solid rgba(242,235,219,.35); box-shadow:none}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold) !important}
.burger{display:none; margin-inline-start:auto; background:none; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 12px; font-size:1.1rem; cursor:pointer}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; padding:96px 0 90px;
  background:
    radial-gradient(1000px 480px at 78% -10%, rgba(232,185,59,.12), transparent 62%),
    radial-gradient(700px 420px at 6% 108%, rgba(143,168,220,.08), transparent),
    var(--bg);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero .lead{margin:20px 0 30px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.chip{
  font-size:.78rem; color:var(--ink-dim); border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; background:rgba(26,49,97,.6); font-weight:400;
}
.chip b{color:var(--gold-soft); font-weight:500}
.hero-art{position:relative}
.hero-art svg{width:100%; height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.hero-art img{width:100%; height:auto; border-radius:22px; border:1px solid rgba(232,185,59,.3); box-shadow:var(--shadow)}

/* ---------- SECTIONS ---------- */
section{padding:88px 0}
.section-head{max-width:720px; margin-bottom:46px}
.paper{background:var(--paper); color:var(--ink-on-paper)}
.paper .eyebrow{color:var(--gold-deep); border-color:rgba(184,134,11,.4)}
.paper .lead,.paper .muted{color:var(--ink-on-paper-dim)}
.paper h1,.paper h2,.paper h3{color:#12264F}
.paper a{color:var(--gold-deep)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}

/* ---------- LOT-TAG CARDS ---------- */
.tag-card{
  position:relative; background:#FAF6EC; border:1px solid var(--line-paper);
  border-radius:var(--radius); padding:28px 24px 24px; color:var(--ink-on-paper);
  box-shadow:0 10px 26px rgba(20,38,79,.10); transition:transform .2s, box-shadow .2s;
}
.tag-card::after{ /* punched hole */
  content:""; position:absolute; top:16px; inset-inline-end:18px; width:13px; height:13px;
  border-radius:50%; background:var(--paper); border:2px solid var(--line-paper);
}
.tag-card:hover{transform:translateY(-5px); box-shadow:0 18px 38px rgba(20,38,79,.16)}
.tag-card .bot-art{height:84px; margin-bottom:14px; color:#3E64AE}
.tag-card .bot-photo{width:100%; height:150px; object-fit:cover; border-radius:12px; margin-bottom:14px; border:1px solid var(--line-paper)}
.tag-card h3{margin-bottom:2px}
.tag-card .latin{font-style:italic; font-size:.82rem; color:var(--ink-on-paper-dim); margin-bottom:12px}
.spec-chips{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 6px}
.spec-chips span{
  font-size:.7rem; background:rgba(62,100,174,.1); color:#2C5290;
  border:1px solid rgba(62,100,174,.25); border-radius:7px; padding:3px 9px; font-weight:400;
}
.tag-card .season{font-size:.76rem; color:var(--gold-deep); font-weight:500; letter-spacing:.04em}

/* ---------- STANDARD LIST ---------- */
.std{counter-reset:std; display:grid; gap:0}
.std-item{
  display:grid; grid-template-columns:74px 1fr; gap:22px; padding:26px 4px;
  border-bottom:1px dashed var(--line); align-items:start;
}
.std-item:last-child{border-bottom:none}
.std-item::before{
  counter-increment:std; content:"0" counter(std);
  font-family:var(--font-d); font-size:2rem; font-weight:700; color:var(--gold); line-height:1;
}
.std-item h3{margin-bottom:6px}
.std-item p{color:var(--ink-dim); font-size:.95rem}

/* ---------- PASSPORT ---------- */
.passport{
  background:linear-gradient(155deg,#234279,#17305E);
  border:1px solid rgba(232,185,59,.4); border-radius:22px; padding:30px 28px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.passport::before{content:""; position:absolute; inset:0;
  background:radial-gradient(400px 200px at 90% 0%, rgba(232,185,59,.1), transparent)}
.passport h3{color:var(--gold-soft); display:flex; align-items:center; gap:10px}
.pass-rows{margin-top:18px; display:grid; gap:0}
.pass-rows div{display:flex; justify-content:space-between; gap:14px; padding:10px 2px;
  border-bottom:1px dashed rgba(43,74,143,.9); font-size:.9rem}
.pass-rows div:last-child{border-bottom:none}
.pass-rows span{color:var(--ink-dim)}
.pass-rows b{font-weight:500; color:var(--ink)}
.ok{color:var(--mint) !important}
.qr{width:96px;height:96px;flex:none}

/* ---------- STATS / SEASON ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px 20px}
.stat b{font-family:var(--font-d); font-size:1.9rem; color:var(--gold-soft); display:block; line-height:1.2; font-weight:700}
.stat span{font-size:.82rem; color:var(--ink-dim)}
.season-strip{display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin}
.season-strip .s{
  flex:1 0 150px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px;
}
.season-strip b{color:var(--gold-soft); font-weight:500; display:block; font-size:.94rem}
.season-strip span{font-size:.76rem; color:var(--ink-dim)}

/* ---------- TABLES ---------- */
.spec-table{width:100%; border-collapse:collapse; font-size:.92rem; background:#FAF6EC;
  border:1px solid var(--line-paper); border-radius:var(--radius-sm); overflow:hidden}
.spec-table th{background:#1A3161; color:var(--gold-soft); font-weight:500; text-align:left; padding:13px 16px; font-size:.84rem; letter-spacing:.04em}
.spec-table td{padding:12px 16px; border-top:1px solid var(--line-paper); color:var(--ink-on-paper)}
.spec-table td:first-child{font-weight:500}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--gold), #D9A72E);
  color:#14264F; border-radius:26px; padding:52px 46px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  box-shadow:0 24px 60px rgba(232,185,59,.25);
}
.cta-band h2{color:#14264F; max-width:22ch}
.cta-band p{color:#2A3760; font-weight:400}
.btn-dark{background:#14264F; color:var(--gold-soft) !important; border-color:#14264F}

/* ---------- FOOTER ---------- */
footer{background:#091634; border-top:1px solid var(--line); padding:56px 0 34px; font-size:.9rem}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:34px}
footer h4{color:var(--gold-soft); font-size:.95rem; margin-bottom:14px}
footer a{display:block; color:var(--ink-dim); padding:4px 0; font-weight:300}
footer a:hover{color:var(--gold)}
.foot-note{margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--ink-dim); font-size:.8rem}

/* ---------- FORM ---------- */
.form{display:grid; gap:14px; max-width:560px}
.form input,.form select,.form textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); padding:13px 16px; font-family:var(--font-b); font-size:.95rem;
}
.form textarea{min-height:130px; resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.form label{font-size:.82rem; color:var(--ink-dim)}

/* ---------- BLOG / FIELD NOTES ---------- */
.post-date{font-size:.74rem; color:var(--gold-deep); font-weight:500; letter-spacing:.06em; display:block; margin-bottom:10px}
.tag-card .read-more{font-size:.85rem; font-weight:500; color:var(--gold-deep); display:inline-block; margin-top:12px}
.post-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-dim); letter-spacing:.04em; margin-top:16px}
.prose{max-width:70ch}
.prose h2{margin:40px 0 14px}
.prose h3{margin:30px 0 10px}
.prose p{margin-bottom:18px; max-width:70ch}
.prose ul,.prose ol{margin:0 0 20px; padding-inline-start:24px}
.prose li{margin-bottom:8px}
.prose blockquote{border-inline-start:3px solid var(--gold); padding:4px 20px; margin:24px 0; font-style:italic}
.paper .prose blockquote{color:var(--ink-on-paper-dim)}
.prose .spec-table{margin:22px 0}

/* ---------- RTL ---------- */
html[dir="rtl"] .spec-table th{text-align:right}
html[dir="rtl"] .eyebrow{letter-spacing:.06em}
html[dir="rtl"] .brand small{letter-spacing:.14em}
html[dir="rtl"] .lead{line-height:2}
html[dir="rtl"] .chip{font-size:.82rem}

/* ---------- MISC ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.divider-leaf{display:flex; justify-content:center; padding:10px 0}
.badge-ar{direction:rtl; text-align:right; font-size:1.02rem; line-height:2.1}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.skip{position:absolute; inset-inline-start:-9999px; top:0; background:var(--gold); color:#14264F; padding:10px 16px; z-index:99; border-radius:0; border-end-end-radius:10px}
.skip:focus{inset-inline-start:0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-art{max-width:420px; margin:0 auto}
  .grid-3{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1240px){
  .nav-links{gap:18px}
  .nav-links a{font-size:.86rem}
}
@media (max-width:1020px){
  .nav-links{
    display:none; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    background:#0B1A3E; padding:18px 22px 26px; gap:4px; border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0; font-size:1.02rem}
  .burger{display:block}
}
@media (max-width:680px){
  section{padding:64px 0}
  .hero{padding:64px 0 58px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .std-item{grid-template-columns:52px 1fr; gap:14px}
  .std-item::before{font-size:1.5rem}
  .cta-band{padding:38px 26px}
  .foot-grid{grid-template-columns:1fr}
}