/* Weshloon site — shared styles v1 (2026-11-09) */
*{box-sizing:border-box}
html,body{margin:0}
:root{--coral:#FF6B4A;--sea:#0B4F4C;--night:#1E1B4B;--paper:#F4F3EE;--mint:#E7F1EE}
body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;background:var(--bg);color:var(--ink);transition:background .5s,color .5s}
body.t-dark{--bg:#1E1B4B;--ink:#F4F3EE;--ink2:rgba(244,243,238,.82);--ink3:rgba(244,243,238,.72);--label:#E7F1EE;--line:rgba(244,243,238,.18);--line2:rgba(244,243,238,.38);--panel:rgba(11,79,76,.18);--card:rgba(30,27,75,.6);--field:rgba(244,243,238,.06);--solid:#F4F3EE;--on-solid:#1E1B4B;--plate:transparent;--plate-pad:0;--soft:#E7F1EE;--on-soft:#1E1B4B;--note:#E7F1EE;--on-note:#1E1B4B;--hover:rgba(244,243,238,.04);--grid:.18}
body.t-light{--bg:#F4F3EE;--ink:#1E1B4B;--ink2:rgba(30,27,75,.8);--ink3:rgba(30,27,75,.68);--label:#0B4F4C;--line:rgba(30,27,75,.14);--line2:rgba(30,27,75,.32);--panel:#E7F1EE;--card:#E7F1EE;--field:#FFFFFF;--solid:#1E1B4B;--on-solid:#F4F3EE;--plate:#1E1B4B;--plate-pad:6px 14px;--soft:#1E1B4B;--on-soft:#F4F3EE;--note:#1E1B4B;--on-note:#F4F3EE;--hover:rgba(30,27,75,.04);--grid:.10}
a{color:var(--ink)}a:hover{color:var(--coral)}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.page{position:relative;overflow:hidden;min-height:100vh}
.grid-bg{position:absolute;inset:0;pointer-events:none;opacity:var(--grid);background-image:radial-gradient(circle at 2px 2px,var(--ink) 1.2px,transparent 1.3px);background-size:32px 32px}
.wrap{position:relative;max-width:1360px;margin:0 auto;padding:0 64px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);text-decoration:none;font-size:16px;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer}
.pill.solid{background:var(--solid);color:var(--on-solid);border-color:var(--solid);font-weight:700}
.pill.coral{background:var(--coral);color:#1E1B4B;border-color:var(--coral);font-weight:700}
.pill.big{min-height:52px;padding:0 28px;font-size:18px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--coral);display:inline-block;flex:none}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--line2);border-radius:999px;font-size:15px;color:var(--label)}
.label{font-size:15px;letter-spacing:2px;color:var(--label)}
h1,h2,p{margin:0}
/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.plate{display:flex;align-items:center;gap:10px;padding:var(--plate-pad);border-radius:12px;background:var(--plate)}
.plate .mark{height:28px;width:auto;display:block}
.plate .word{height:44px;width:auto;display:block;margin:-6px 0}
.brand .divider{width:1px;height:24px;background:var(--line2)}
.brand .sub{font-weight:700;font-size:22px}
.nav{display:flex;gap:32px;font-size:17px}
.nav a{text-decoration:none}
.tools{display:flex;align-items:center;gap:12px}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer}
body.t-dark .icon-moon,body.t-light .icon-sun{display:none}
/* footer */
.site-footer{border-top:1px solid var(--line);padding:32px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px}
.site-footer .social{display:flex;gap:20px;flex-wrap:wrap;direction:ltr}
.site-footer .social a,.site-footer a{text-decoration:none}
.credit{flex-basis:100%;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink3);text-align:center}
@media (max-width:860px){.wrap{padding:0 20px}.nav{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}