/* ATLAS - editorial multilingual demo. Built RTL-first with logical properties. */
:root{
  --paper:#FAF7F1; --paper-2:#F2ECE0; --card:#FFFDF8;
  --ink:#1A1714; --ink-soft:#574F45; --ink-faint:#8A8073;
  --line:#DED6C7; --line-strong:#C9BFAD;
  --accent:#A02A20; --accent-deep:#7C1E16; --accent-tint:#F3E2DD;
  --panel:#141210; --panel-2:#1E1A16; --panel-line:#332D26;
  --panel-text:#ECE6DA; --panel-dim:#A79E8E;
  --tok-key:#E6B14C; --tok-str:#7FB8A8; --tok-com:#8A8377; --tok-tag:#E08A6E;
  --serif:"Source Serif 4",Georgia,serif;
  --ui:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ar-display:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  --ar-text:"IBM Plex Sans Arabic","Noto Naskh Arabic",sans-serif;
  --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* faint paper grain */
  background-image:radial-gradient(circle at 1px 1px, rgba(26,23,20,.025) 1px, transparent 0);
  background-size:4px 4px;
}
body.lang-ar{font-family:var(--ar-text)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
a{color:inherit}

/* ---------- Masthead ---------- */
.masthead{padding-block:18px 8px; border-block-end:1px solid var(--line)}
.masthead-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block-end:14px;
}
.dateline{font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase}
body.lang-ar .dateline{letter-spacing:0; text-transform:none; font-size:13.5px}
.lang-switcher{display:flex; gap:2px; align-items:center}
.lang-link{
  font-size:13px; padding:5px 10px; border:1px solid var(--line-strong);
  border-radius:999px; color:var(--ink-soft); text-decoration:none; line-height:1;
  transition:background .18s, color .18s, border-color .18s; white-space:nowrap;
}
.lang-link + .lang-link{margin-inline-start:4px}
.lang-link[lang="ar"]{font-family:var(--ar-display)}
.lang-link[lang="ru"]{font-family:var(--ui)}
.lang-link:hover{border-color:var(--accent); color:var(--accent)}
.lang-link.is-current{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.nameplate-row{display:flex; align-items:flex-end; gap:14px; padding-block:6px 2px}
.nameplate{
  font-family:var(--serif); font-weight:700; font-size:clamp(40px,8vw,76px);
  letter-spacing:.12em; line-height:.9; text-decoration:none; color:var(--ink);
  text-transform:uppercase;
}
body.lang-ar .nameplate{font-family:var(--ar-display); letter-spacing:0}
.nameplate-tag{
  font-size:13px; color:var(--accent); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding-block-start:8px; border-block-start:2px solid var(--accent);
  display:inline-block; margin-block-start:8px;
}
body.lang-ar .nameplate-tag{letter-spacing:0; text-transform:none; font-family:var(--ar-text)}

/* ---------- Home ---------- */
.home{padding-block:26px 12px}
.home-kicker{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  border-block-end:1px solid var(--line); padding-block-end:10px; margin-block-end:22px;
}
body.lang-ar .home-kicker{letter-spacing:.04em}
.lead-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:34px}
.lead-side{display:flex; flex-direction:column; gap:24px}
.lead-side .card{border-block-start:1px solid var(--line); padding-block-start:20px}
.lead-side .card:first-child{border-block-start:0; padding-block-start:0}

.card{animation:rise .6s both; animation-delay:calc(var(--i,0)*90ms)}
.card-link{text-decoration:none; display:block; color:var(--ink)}
.kicker{
  font-family:var(--ui); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; display:inline-block; margin-block-end:9px;
}
body.lang-ar .kicker{font-family:var(--ar-text); letter-spacing:0; font-size:13px}
.card-lead .card-title{font-size:clamp(28px,4.4vw,42px); line-height:1.06}
.card-title{
  font-family:var(--serif); font-weight:700; font-size:22px; line-height:1.16;
  margin:0 0 10px; letter-spacing:-.01em;
}
body.lang-ar .card-title{font-family:var(--ar-display); letter-spacing:0; line-height:1.45}
.card-excerpt{font-family:var(--serif); color:var(--ink-soft); font-size:16.5px; line-height:1.5; margin:0 0 12px}
body.lang-ar .card-excerpt{font-family:var(--ar-text); line-height:1.85}
.card-lead .card-excerpt{font-size:18.5px}
.card-meta{font-size:12px; color:var(--ink-faint); letter-spacing:.03em}
.card-link:hover .card-title{color:var(--accent-deep)}
.card-lead{position:relative}
.card-lead::after{content:""; display:block; height:1px; background:var(--line); margin-block-start:22px}
@media(max-width:760px){ .lead-grid{grid-template-columns:1fr; gap:26px} .card-lead::after{display:none} }

/* ---------- Article ---------- */
.article{max-width:680px; margin-inline:auto; padding-block:30px 10px}
.article-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(30px,5.2vw,46px);
  line-height:1.08; letter-spacing:-.015em; margin:.25em 0 .35em;
}
body.lang-ar .article-title{font-family:var(--ar-display); letter-spacing:0; line-height:1.4}
.article-meta{font-size:13px; color:var(--ink-faint); letter-spacing:.03em; padding-block-end:14px; border-block-end:1px solid var(--line)}
.article-switch{padding-block:16px; display:flex; gap:8px; align-items:center}
.article-body{font-family:var(--serif); font-size:19px; line-height:1.62; color:#262019}
body.lang-ar .article-body{font-family:var(--ar-text); font-size:19px; line-height:1.95}
.article-body p{margin:0 0 1.05em}
.article-body p:first-child::first-letter{
  font-weight:700; font-size:3.1em; line-height:.8; float:inline-start;
  padding-inline-end:.08em; padding-block-start:.04em; color:var(--accent-deep);
}
body.lang-ar .article-body p:first-child::first-letter{font-size:1em; float:none; color:inherit; padding:0; font-weight:inherit}

/* ---------- Footer ---------- */
.site-foot{
  margin-block-start:40px; border-block-start:1px solid var(--line); padding-block:22px 60px;
  display:flex; gap:14px; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
}
.site-foot span:first-child{font-family:var(--serif); font-weight:700; letter-spacing:.14em; font-size:18px}
body.lang-ar .site-foot span:first-child{font-family:var(--ar-display); letter-spacing:0}
.foot-note{font-size:12.5px; color:var(--ink-faint)}

/* ---------- Chat bubble (the client's injected widget; flips on RTL) ---------- */
.chat-dock{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:40}
.chat-bubble{
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(124,30,22,.34); transition:transform .16s, background .16s;
}
.chat-bubble:hover{transform:translateY(-2px); background:var(--accent-deep)}
.chat-panel{
  position:absolute; inset-block-end:66px; inset-inline-end:0; width:268px;
  background:var(--card); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:0 18px 40px rgba(26,23,20,.18); padding:14px 15px; animation:rise .22s both;
}
.chat-head{font-weight:600; font-size:14px; margin-block-end:6px; color:var(--ink)}
body.lang-ar .chat-head{font-family:var(--ar-text)}
.chat-note{margin:0; font-size:12.7px; line-height:1.5; color:var(--ink-soft)}
body.lang-ar .chat-note{font-family:var(--ar-text); line-height:1.8}

/* ---------- SEO head pill + inspector drawer ---------- */
.seo-pill{
  position:fixed; inset-block-end:24px; inset-inline-start:24px; z-index:41; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  background:var(--panel); color:var(--panel-text); border:1px solid var(--panel-line);
  padding:9px 14px; border-radius:999px; box-shadow:0 8px 22px rgba(20,18,16,.28);
  transition:transform .16s;
}
.seo-pill:hover{transform:translateY(-2px)}
.seo-dot{width:8px; height:8px; border-radius:50%; background:#54C08A; box-shadow:0 0 0 3px rgba(84,192,138,.2)}
.seo-pill-hint{color:var(--panel-dim)}

.inspector{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:60; height:min(64vh,560px);
  background:var(--panel); color:var(--panel-text); border-block-start:1px solid var(--panel-line);
  box-shadow:0 -20px 50px rgba(0,0,0,.4); display:flex; flex-direction:column;
  animation:slideup .26s cubic-bezier(.2,.7,.2,1) both; font-family:var(--mono);
}
.inspector[hidden]{display:none}
.chat-panel[hidden]{display:none}
.inspector-bar{display:flex; align-items:center; justify-content:space-between; border-block-end:1px solid var(--panel-line); padding-inline:10px}
.inspector-tabs{display:flex; gap:2px; overflow:auto}
.tab{
  background:transparent; border:0; color:var(--panel-dim); font-family:var(--mono); font-size:12.5px;
  padding:13px 14px; cursor:pointer; border-block-end:2px solid transparent; white-space:nowrap;
}
.tab:hover{color:var(--panel-text)}
.tab.is-active{color:var(--panel-text); border-block-end-color:var(--tok-key)}
.inspector-close{background:transparent; border:0; color:var(--panel-dim); font-size:22px; cursor:pointer; padding:6px 10px}
.inspector-close:hover{color:#fff}
.inspector-body{overflow:auto; padding:16px 18px}
.panel{display:none}
.panel.is-active{display:block}
.code,.readout{font-family:var(--mono); font-size:12.7px; line-height:1.7; white-space:pre-wrap; word-break:break-word; margin:0; direction:ltr; text-align:start}
.why{max-width:760px; line-height:1.7; font-family:var(--ui); font-size:14px}
.why code{font-family:var(--mono); background:var(--panel-2); padding:1px 5px; border-radius:4px; color:var(--tok-key); font-size:12.5px}
.why strong{color:#fff}
.why p{margin:0 0 12px}

/* live head readout tokens */
.ro-row{display:block; padding:3px 0}
.ro-tag{color:var(--tok-tag)}
.ro-attr{color:var(--tok-key)}
.ro-str{color:var(--tok-str)}
.ro-note{color:#fff; background:rgba(84,192,138,.14); border-inline-start:3px solid #54C08A; padding:8px 12px; margin:10px 0; display:block; font-family:var(--ui); line-height:1.6}
.ro-omit{color:var(--tok-com)}
.ro-omit .ro-attr{color:#C98A7A}
.ro-h{color:var(--panel-dim); display:block; margin:14px 0 4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase}

/* code token coloring (applied by app.js for .hbs / .yaml) */
.code .c-com{color:var(--tok-com)}
.code .c-key{color:var(--tok-key)}
.code .c-str{color:var(--tok-str)}
.code .c-tag{color:var(--tok-tag)}

@media(max-width:760px){
  .inspector{height:72vh}
  .nameplate{font-size:46px}
  .chat-dock{inset-block-end:16px; inset-inline-end:16px}
  .seo-pill{inset-block-end:16px; inset-inline-start:16px}
}

@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes slideup{from{transform:translateY(100%)} to{transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}