/* Qasr Noun · shared system (homepage + journal). Heritage Gold palette, Marcellus / Cormorant Garamond / Jost. */
:root{
  --ink:#1A1712; --ink-2:#231e17; --ash:#F7F4EE; --lime:#E4DCCB; --lime-2:#efe8d9; --cedar:#3B4232;
  --brass:#C6A15B; --brass-d:#9C7A36; --line:rgba(26,23,18,.14); --line-d:rgba(247,244,238,.16);
  --e1:0 1px 2px rgba(26,23,18,.06),0 4px 12px -4px rgba(26,23,18,.12);
  --e2:0 2px 4px rgba(26,23,18,.06),0 18px 40px -14px rgba(26,23,18,.32);
  --e3:0 4px 10px rgba(26,23,18,.08),0 40px 80px -24px rgba(26,23,18,.5);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Jost,system-ui,sans-serif; --mark:Marcellus,Georgia,serif;
  --w:1180px; --gut:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ash);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--brass);color:var(--ink)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-d)}
.dark .eyebrow,.eyebrow.on-dark{color:var(--brass)}
.h1,.h2,.h3{font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.01em}
.h1{font-size:clamp(46px,8vw,104px)}
.h2{font-size:clamp(36px,5.2vw,68px)}
.h3{font-size:clamp(26px,3vw,36px);line-height:1.1}
.h1 em,.h2 em,.h3 em{font-style:italic;color:var(--brass-d)}
.dark .h1 em,.dark .h2 em,.dark .h3 em{color:var(--brass)}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,25px);line-height:1.45;color:var(--cedar)}
.dark .lead{color:rgba(247,244,238,.78)}
.dark{background:var(--ink);color:var(--ash)}
.muted{color:var(--cedar)}
.label{display:inline-block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px 5px;background:rgba(26,23,18,.62);color:var(--ash);backdrop-filter:blur(6px)}
.label.real{background:var(--ash);color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:17px 28px;border-radius:100px;border:1.5px solid var(--brass);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s,color .35s;will-change:transform}
.btn.fill{background:var(--brass);color:var(--ink)}
.btn.line{color:inherit}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(198,161,91,.7)}
.btn.line:hover{background:var(--brass);color:var(--ink)}
.btn svg{width:18px;height:18px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s,padding .4s;padding:22px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ash);font-family:var(--mark);font-size:19px;letter-spacing:.2em}
.brand svg{width:28px;height:28px;color:var(--brass)}
.brand .ar{font-family:"Aref Ruqaa",serif;letter-spacing:0;font-size:18px;color:var(--brass);margin-left:2px}
.nav ul{display:flex;gap:28px;list-style:none;align-items:center}
.nav ul a{text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);opacity:.85}
.nav ul a:hover{opacity:1;color:var(--brass)}
.nav .btn{padding:12px 20px;font-size:11.5px}
.nav.solid,.nav.light{background:rgba(26,23,18,.92);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(0,0,0,.6);padding:12px 0}
@media (max-width:860px){.nav ul li:not(.keep){display:none}}
@media (max-width:520px){.brand{font-size:16px;letter-spacing:.16em;white-space:nowrap;gap:9px}.brand svg{width:24px;height:24px}.nav .btn{padding:10px 14px;font-size:10.5px;letter-spacing:.14em;white-space:nowrap}.nav{padding:14px 0}}

/* pattern strip (the estate's arcade) */
.qanater{height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='33' viewBox='0 0 46 68'%3E%3Cpath fill='none' stroke='%23C6A15B' stroke-width='3.5' stroke-linecap='round' d='M8 64 L9.25 57.34 L11.13 53.53 L13 50.85 L15.5 48.04 L18 45.74 L20.5 43.76 L23 42.05 L25.5 43.76 L28 45.74 L30.5 48.04 L33 50.85 L34.87 53.53 L36.75 57.34 L38 64'/%3E%3C/svg%3E") repeat-x left bottom/22px 33px;opacity:.7}

/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* footer */
.foot{background:var(--ink);color:rgba(247,244,238,.75);padding:72px 0 40px;font-size:14px}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.foot a{text-decoration:none}.foot a:hover{color:var(--brass)}
.foot ul{list-style:none;display:grid;gap:8px}
.foot .base{margin-top:56px;padding-top:22px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;opacity:.7}
@media (max-width:760px){.foot .grid{grid-template-columns:1fr}}

/* whatsapp float */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--brass);color:var(--ink);display:grid;place-items:center;box-shadow:var(--e2);transition:transform .3s}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}
.wa-float svg{width:28px;height:28px}

/* ===== journal / article ===== */
.post-hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;color:var(--ash);background:var(--ink);overflow:hidden}
.post-hero .bg{position:absolute;inset:-6% 0 0 0;background-size:cover;background-position:center;transform:scale(1.04)}
.post-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,23,18,.55) 0%,rgba(26,23,18,.1) 35%,rgba(26,23,18,.85) 100%)}
.post-hero .wrap{position:relative;z-index:2;padding-bottom:64px;padding-top:140px;width:100%}
.post-hero .h1{font-size:clamp(40px,6.4vw,84px);max-width:16ch;margin-top:14px}
.post-hero .label{position:absolute;right:var(--gut);top:110px;z-index:3}
.meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.75)}
.crumbs{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,238,.7)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--brass)}
.article{max-width:740px;margin:0 auto;padding:72px var(--gut) 40px}
.article .answer{font-family:var(--serif);font-size:23px;line-height:1.5;padding:26px 28px;background:var(--lime-2);border-left:3px solid var(--brass);margin-bottom:44px;box-shadow:var(--e1)}
.article .answer b{font-weight:600}
.article h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,40px);line-height:1.1;margin:56px 0 16px}
.article h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;margin:36px 0 10px}
.article p{margin:0 0 20px}
.article ul,.article ol{margin:0 0 22px 1.2em}
.article li{margin-bottom:8px}
.article a{color:var(--brass-d);text-underline-offset:3px;text-decoration-thickness:1px}
.article a:hover{color:var(--ink)}
.article blockquote{margin:34px 0;padding:6px 0 6px 28px;border-left:2px solid var(--brass);font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.4;color:var(--ink)}
.article blockquote cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar)}
.article figure{margin:40px 0}
@media (min-width:900px){.article figure.wide{margin-left:-90px;margin-right:-90px}}
.article figure img{width:100%;box-shadow:var(--e2)}
.article figure.print{background:#efe8d6;padding:16px 16px 12px;box-shadow:var(--e3);transform:rotate(-.6deg)}
.article figure.print img{box-shadow:none;filter:sepia(.3)}
.article figcaption{font-size:13.5px;color:var(--cedar);margin-top:10px;line-height:1.5}
.article table{width:100%;border-collapse:collapse;margin:24px 0 30px;font-size:15px}
.article th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cedar);border-bottom:1.5px solid var(--brass);padding:8px 10px}
.article td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top}
.article .table-wrap{overflow-x:auto;margin:0 -4px}
.article .note{font-size:14px;color:var(--cedar);background:var(--lime-2);padding:14px 18px;margin:20px 0}
.faq{max-width:740px;margin:0 auto;padding:0 var(--gut) 40px}
.faq h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,40px);margin-bottom:12px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:22px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass-d);font-family:var(--sans);font-weight:400;font-size:26px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--ink)}
.sources{max-width:740px;margin:0 auto;padding:10px var(--gut) 30px;font-size:13.5px;color:var(--cedar)}
.sources h2{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin-bottom:10px;color:var(--cedar)}
.sources ol{margin-left:1.2em}.sources li{margin-bottom:6px}
.sources a{color:var(--cedar);word-break:break-word}
.cta-card{max-width:900px;margin:40px auto 90px;padding:0 var(--gut)}
.cta-card .in{position:relative;background:var(--ink);color:var(--ash);padding:54px clamp(26px,5vw,60px);box-shadow:var(--e3);overflow:hidden}
.cta-card .in::before{content:"";position:absolute;inset:auto 0 0 0;height:22px;background:inherit}
.cta-card .h2{font-size:clamp(32px,4vw,50px);margin:10px 0 14px}
.cta-card p{color:rgba(247,244,238,.8);max-width:52ch;margin-bottom:26px}
.related{background:var(--lime);padding:80px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:32px}
.card{display:block;text-decoration:none;background:var(--ash);box-shadow:var(--e1);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover{transform:translateY(-8px);box-shadow:var(--e3)}
.card .im{aspect-ratio:4/3;background-size:cover;background-position:center}
.card .tx{padding:20px 22px 24px}
.card .h3{font-size:25px;margin-top:8px}
.card p{font-size:14.5px;color:var(--cedar);margin-top:8px;line-height:1.5}

/* instagram */
.nav .ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,244,238,.35);color:var(--ash);opacity:1;transition:all .3s}
.nav .ico:hover{border-color:var(--brass);background:var(--brass);color:var(--ink)}
.nav .ico svg{width:19px;height:19px}
.ig-float{position:fixed;right:24px;bottom:90px;z-index:60;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--brass);border:1.5px solid var(--brass);display:grid;place-items:center;box-shadow:var(--e2);transition:transform .3s,background .3s,color .3s}
.ig-float:hover{transform:translateY(-3px);background:var(--brass);color:var(--ink)}
.ig-float svg{width:24px;height:24px}
.btn .ig{width:18px;height:18px}
/* integrated map */
.mapframe{position:relative;box-shadow:var(--e3);outline:1px solid rgba(198,161,91,.55);outline-offset:12px;background:#ddd}
.mapframe iframe{display:block;width:100%;height:min(70vh,560px);border:0;filter:sepia(.18) saturate(.85) contrast(.98)}
.mapcard{position:absolute;right:24px;bottom:24px;width:min(360px,calc(100% - 48px));background:var(--ink);color:var(--ash);padding:24px 26px;box-shadow:var(--e3)}
.mapcard .h3{font-size:28px;margin:6px 0 4px}
.mapcard p{font-size:14.5px;color:rgba(247,244,238,.78);margin-bottom:16px}
.mapcard .row{display:flex;gap:10px;flex-wrap:wrap}
.mapcard .btn{padding:13px 18px;font-size:11px}
@media (max-width:700px){.mapcard{position:relative;right:auto;bottom:auto;width:100%}.mapframe iframe{height:420px}}