/* Articles section (meetatheer.com/articles/) — built on next.css variables and cards */

/* ---------- index ---------- */
.a-hero{padding-top:130px;padding-bottom:30px}
.a-hero h1{font-family:var(--display);font-weight:800;color:var(--text);font-size:clamp(40px,6vw,76px);line-height:1.15;letter-spacing:-.02em;margin-top:18px;max-width:16ch}
.a-hero .statement{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.9vw,23px);line-height:1.7;color:var(--soft);max-width:44ch;margin-top:18px}
.a-hero .chips{margin-top:26px}
.a-hero .chips span{font-size:13.5px;color:var(--soft);padding:7px 14px;border:1px solid var(--edge);border-radius:999px;background:var(--card)}

.a-list{padding-top:20px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post{display:flex;flex-direction:column;gap:12px;color:inherit;transition:transform .3s,border-color .3s}
.post:hover{transform:translateY(-3px);border-color:var(--edge-2)}
.post figure{margin:-1px -1px 0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--card-2)}
.post figure img{width:100%;height:100%;object-fit:cover;display:block}
.post .pad{display:flex;flex-direction:column;gap:12px;flex:1}
.post h2{font-family:var(--display);font-weight:600;color:var(--text);font-size:20px;line-height:1.55}
.post p{font-size:15.5px;color:var(--soft);line-height:1.8}
.post .more{margin-top:auto;font-size:14px;color:var(--c)}

/* empty state, shown until the first article is published */
.soon{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.soon .ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--edge);color:var(--c)}
.soon .ic svg{width:30px;height:30px}
.soon h2{font-family:var(--display);font-weight:600;color:var(--text);font-size:clamp(21px,2.3vw,27px);line-height:1.5}
.soon p{margin-top:6px;max-width:60ch}
.soon .actions{margin-top:18px}

@media (max-width:960px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.posts{grid-template-columns:1fr}.soon{grid-template-columns:1fr;gap:16px}}

/* ---------- single article ---------- */
.article{padding-top:120px;padding-bottom:40px}
.article .narrow{max-width:760px;margin-inline:auto}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);transition:color .25s}
.back:hover{color:var(--text)}
.article h1{font-family:var(--display);font-weight:700;color:var(--text);font-size:clamp(30px,4.6vw,50px);line-height:1.6;letter-spacing:-.01em;margin-top:16px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:14px;color:var(--muted)}
.meta b{color:var(--soft);font-weight:500}
.article .lead{font-family:var(--display);font-weight:400;color:var(--text);font-size:clamp(19px,2vw,23px);line-height:1.8;margin-top:28px}
.cover{margin:34px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge)}
.cover img{width:100%;height:auto;display:block}
.cover figcaption{font-size:13.5px;color:var(--muted);padding:12px 16px;background:var(--card)}

.body{margin-top:34px;font-size:18px;line-height:2.05;color:#cdd2dd}
.body > * + *{margin-top:22px}
.body h2{font-family:var(--display);font-weight:700;color:var(--text);font-size:clamp(23px,2.6vw,29px);line-height:1.6;margin-top:46px;width:fit-content;max-width:100%;background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.body h3{font-family:var(--display);font-weight:600;color:var(--text);font-size:21px;line-height:1.5;margin-top:34px}
.body strong{color:var(--text);font-weight:500}
.body a{color:var(--c);text-decoration:underline;text-underline-offset:4px}
.body ul,.body ol{padding-inline-start:24px}
.body li + li{margin-top:10px}
.body blockquote{border-inline-start:3px solid var(--v);background:var(--card);border-radius:0 18px 18px 0;padding:18px 24px;color:var(--text);font-family:var(--display);font-size:20px;line-height:1.8}
.body figure img{width:100%;height:auto;border-radius:18px;display:block}
.body figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}

.author{display:flex;align-items:center;gap:18px;margin-top:54px}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none}
.author strong{display:block;color:var(--text);font-family:var(--display);font-weight:600;font-size:18px}
.author span{display:block;font-size:14.5px;color:var(--soft);line-height:1.7}
.author .btn{margin-inline-start:auto;flex:none}

.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--muted)}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--edge);background:var(--card);color:var(--text);font:inherit;font-size:14px;cursor:pointer;transition:border-color .25s}
.share a:hover,.share button:hover{border-color:var(--edge-2)}

@media (max-width:620px){.author{flex-wrap:wrap}.author .btn{margin-inline-start:0}.body{font-size:17px}}

/* Arabic labels: no letter-spacing or Latin mono font, which split Arabic letters apart */
.post .label,.article .label{letter-spacing:0;font-family:var(--body);text-transform:none;font-size:13.5px}