:root{
  --verd:#1F3326;
  --verd-2:#2B4535;
  --crema:#EADFC8;
  --papièr:#F4EDDD;
  --blanc:#FFFBF2;
  --roge:#A8322D;
  --aur:#C9973F;
  --negre:#1B1B18;
  --gris:#5E6B60;
  --filet:#D9CCB0;
  --ar:"Noto Naskh Arabic","Amiri","Geeza Pro",serif;
  --kufi:"Reem Kufi","Noto Naskh Arabic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papièr);color:var(--verd);
  font-family:"Alegreya Sans","Gill Sans",system-ui,sans-serif;font-size:1.15rem;line-height:1.6;
}
a{color:inherit}
[lang="ar"]{font-family:var(--ar)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Banda sadu (teissut najdi) */
.sadu{
  height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22'%3E%3Crect width='32' height='22' fill='%23A8322D'/%3E%3Crect y='4' width='32' height='14' fill='%23EADFC8'/%3E%3Cpath d='M0 18 8 4 16 18 24 4 32 18Z' fill='%231B1B18'/%3E%3Cpath d='M8 18 12 11 16 18ZM24 18 28 11 32 18Z' fill='%23C9973F'/%3E%3Crect y='9.5' width='2' height='3' fill='%23A8322D'/%3E%3Crect x='15' y='9.5' width='2' height='3' fill='%23A8322D'/%3E%3C/svg%3E") repeat-x;
}
.sadu-fin{height:12px;background-size:auto 12px}

.barra{
  background:var(--verd);color:var(--crema);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem max(1.25rem,calc((100% - 1040px)/2));
}
.marca{display:flex;align-items:baseline;gap:.7rem;text-decoration:none}
.marca [lang="ar"]{font-family:var(--kufi);font-weight:700;font-size:1.45rem;color:#fff}
.marca span:last-child{letter-spacing:.08em;font-size:1rem;opacity:.85}
.barra nav{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:1rem}
.barra nav a{text-decoration:none;opacity:.9}
.barra nav a:hover{color:var(--aur);opacity:1}
.barra nav .ostal{opacity:.6}

.cap{background:var(--verd);color:var(--crema);text-align:center;padding:2rem 1.25rem 3.5rem}
.palmièra{width:150px;height:180px;display:block;margin:0 auto .5rem}
.tronc path,.palmas path,.sòl{fill:none;stroke:var(--crema);stroke-width:2;stroke-linecap:round}
.tronc path:not(:first-child){stroke-width:1.4}
.palmas path{stroke-width:2.2}
.sòl{stroke:var(--aur)}
.datils circle{fill:var(--aur)}
.cap h1{font-family:var(--kufi);font-weight:700;font-size:clamp(3rem,11vw,6rem);line-height:1.25;margin:0;color:#fff}
.nom-lat{letter-spacing:.35em;text-transform:uppercase;margin:.2rem 0 1rem;font-size:1rem;color:var(--aur)}
.lengas{margin:0;font-size:1.05rem;opacity:.85}
.lengas [lang="ar"]{font-family:var(--kufi);font-weight:500}
.lede{max-width:36rem;margin:1.25rem auto 0;font-size:1.25rem}

main{max-width:1040px;margin:0 auto;padding:0 1.25rem}
h2{font-weight:700;font-size:1.9rem;margin:0 0 1rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
h2 [lang="ar"]{font-family:var(--kufi);color:var(--roge);font-size:1.6rem}
.chapeu{color:var(--gris);margin:-.5rem 0 1.25rem;font-style:italic}

.paraulas{padding:3.5rem 0 2.5rem}
.cercar input{
  width:100%;font:inherit;padding:.7rem .9rem;background:var(--blanc);color:var(--verd);
  border:1.5px solid var(--filet);border-radius:3px;
}
.cercar input:focus{outline:2px solid var(--aur);outline-offset:1px}
.temas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.temas button{
  font:inherit;font-size:.95rem;font-weight:500;background:none;color:var(--verd);
  border:1.5px solid var(--verd);padding:.15rem .85rem;border-radius:3px;cursor:pointer;
}
.temas button[aria-pressed="true"]{background:var(--verd);color:var(--crema)}
.compte{color:var(--gris);font-size:.95rem;margin:1rem 0 .75rem}

.cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.carta{
  background:var(--blanc);border-top:4px solid var(--verd);padding:1.1rem 1.25rem 1.2rem;
  display:flex;flex-direction:column;gap:.15rem;
}
.carta .ar{font-family:var(--ar);font-weight:600;font-size:1.75rem;line-height:1.6;text-align:right;margin:0;color:var(--negre)}
.carta .tr{font-style:italic;color:var(--roge);font-size:1rem}
.carta .oc{font-weight:700;font-size:1.2rem}
.carta .n{color:var(--gris);font-size:.98rem;margin-top:.35rem;border-top:1px dotted var(--filet);padding-top:.35rem}
.carta .n [lang="ar"]{font-size:1.1rem}
.carta .t{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aur);font-weight:700}
.res{color:var(--gris);font-style:italic}

.dialòg{padding:2rem 0 4rem}
.encadrat{background:var(--verd);color:var(--crema);border-radius:3px;padding:.5rem 1.5rem;border:1px solid var(--aur);outline:4px solid var(--verd);outline-offset:-9px}
.replica{display:grid;grid-template-columns:5rem 1fr 1fr;gap:1rem;align-items:center;padding:.85rem 0;border-bottom:1px solid rgba(234,223,200,.18)}
.replica:last-child{border-bottom:0}
.replica .qui{color:var(--aur);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.replica p{margin:0}
.replica .ar{font-size:1.55rem;line-height:1.6;color:#fff;text-align:right;order:3}
.replica .oc{font-size:1.15rem;order:2}

.libre{background:var(--verd);color:var(--crema)}
.libre-dins{max-width:1040px;margin:0 auto;padding:4rem 1.25rem;display:grid;grid-template-columns:280px 1fr;gap:3rem;align-items:center}
.cobèrta{
  aspect-ratio:148/210;background:var(--verd-2);border:1px solid rgba(234,223,200,.25);
  display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:space-between;
  box-shadow:8px 10px 0 rgba(0,0,0,.25);overflow:hidden;
}
.cobèrta .sadu{width:100%;height:16px;background-size:auto 16px}
.cobèrta svg{width:46%}
.cob-ar{font-family:var(--kufi);font-weight:700;font-size:2rem;color:#fff;line-height:1.3}
.cob-titol{font-size:1.15rem;letter-spacing:.06em;padding:0 1rem;margin-bottom:.5rem}
.libre .lengas{color:var(--aur);letter-spacing:.15em;text-transform:uppercase;font-size:.9rem;opacity:1}
.libre h2{color:#fff;margin-top:.25rem}
.capitols{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem}
.capitols li{border:1px solid rgba(234,223,200,.25);padding:.55rem .9rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.capitols [lang="ar"]{font-family:var(--kufi);color:var(--aur);font-size:1.1rem}

.pe{background:var(--verd);color:var(--crema);font-size:.98rem}
.pe-dins{max-width:1040px;margin:0 auto;padding:1.75rem 1.25rem 2.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pe p{margin:0}
.pe a{color:var(--aur)}

@media (max-width:760px){
  .replica{grid-template-columns:1fr;gap:.2rem}
  .replica .ar{order:2}
  .replica .oc{order:3}
  .libre-dins{grid-template-columns:1fr}
  .cobèrta{max-width:230px;margin:0 auto}
}

/* Ligams cap a las paginas del lexic complet */
.mai{margin:1.5rem 0 0;font-weight:500}
.mai a{color:var(--verd);text-decoration-color:var(--aur);text-underline-offset:3px}
.mai a:hover{color:var(--roge)}