/*
Theme Name: Butti
Theme URI: https://butti.ai/
Author: Marquting
Author URI: https://marquting.ae/
Description: Link-hub theme for Butti (بطي), the Ai creator from Abu Dhabi. The homepage is his link page; edit his photo, bio and links in Appearance → Customize → Butti page.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: butti
*/
html,body{margin:0;padding:0;background:#0C0B0A}
/* Layout: one narrow RTL column; portrait header, then a list of link rows; Msarifi row is the one highlighted card. */
.bt{
  --bt-bg:#0C0B0A; --bt-surface:#161412; --bt-line:#2A2622;
  --bt-fg:#F3EEE6; --bt-muted:#A39A8E; --bt-sand:#D8BE92;
  --bt-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --bt-body:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;
  direction:rtl; text-align:right; background:var(--bt-bg); color:var(--bt-fg);
  font-family:var(--bt-body); font-size:16px; line-height:1.6;
  min-height:100vh; color-scheme:dark;
  background-image:radial-gradient(60% 40% at 50% 0%, rgba(216,190,146,.10), transparent 70%);
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:56px 40px;
}
.bt *{box-sizing:border-box;margin:0;padding:0}
.bt-wrap{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.bt-head{display:flex;align-items:center;gap:18px}
.bt-photo{flex:none;width:96px;height:96px;border-radius:50%;position:relative;
  box-shadow:0 0 0 1px var(--bt-line),0 0 40px rgba(216,190,146,.18);overflow:hidden;background:var(--bt-surface)}
.bt-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bt-photo span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--bt-display);font-size:30px;color:var(--bt-sand)}
.bt-photo img + span{display:none}
.bt-who{min-width:0;display:flex;flex-direction:column;gap:4px}
.bt-name{font-family:var(--bt-display);font-weight:600;font-size:30px;line-height:1.15;color:var(--bt-fg)}
.bt-name small{font-family:var(--bt-display);font-weight:500;font-size:15px;color:var(--bt-muted);margin-inline-start:8px;letter-spacing:.02em}
.bt-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:13px;color:var(--bt-sand);
  border:1px solid rgba(216,190,146,.35);border-radius:999px;padding:2px 10px}
.bt-bio{font-size:17px;color:var(--bt-fg);max-width:36ch}
.bt-bio span{color:var(--bt-muted)}
.bt-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.bt a.bt-link{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  background:var(--bt-surface);border:1px solid var(--bt-line);color:var(--bt-fg)!important;
  text-decoration:none!important;transition:border-color .2s,transform .2s}
.bt a.bt-link:hover{border-color:rgba(216,190,146,.5);transform:translateY(-1px)}
.bt a.bt-link:focus-visible{outline:2px solid var(--bt-sand);outline-offset:3px}
.bt-ico{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bt-line);color:var(--bt-fg)}
.bt-ico svg{width:22px;height:22px}
.bt-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.bt-t{font-family:var(--bt-display);font-weight:500;font-size:16px}
.bt-s{font-size:13.5px;color:var(--bt-muted)}
.bt-arrow{flex:none;color:var(--bt-muted);font-size:18px}
.bt a.bt-feature{flex-direction:column;align-items:stretch;gap:12px;padding:18px;
  border-color:rgba(216,190,146,.45);background:linear-gradient(160deg, rgba(216,190,146,.12), var(--bt-surface) 55%)}
.bt-feature .bt-row{display:flex;align-items:center;gap:14px}
.bt-kicker{font-size:12.5px;letter-spacing:.04em;color:var(--bt-sand)}
.bt-feature p{font-size:14.5px;color:var(--bt-fg);opacity:.9}
.bt-sec{font-size:12.5px;color:var(--bt-muted);letter-spacing:.04em;margin-bottom:-14px}
.bt-foot{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--bt-muted);border-top:1px solid var(--bt-line);padding-top:18px}
.bt-sign{font-family:var(--bt-display);font-size:18px;color:var(--bt-fg)}
.bt-foot a{color:var(--bt-fg)!important;text-decoration:underline!important;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.bt a.bt-link{transition:none}.bt a.bt-link:hover{transform:none}}
@media (max-width:380px){.bt-photo{width:80px;height:80px}.bt-name{font-size:26px}}
.bt-content{max-width:640px;margin:0 auto;font-size:16px;line-height:1.8}
.bt-content h1,.bt-content h2,.bt-content h3{font-family:var(--bt-display);line-height:1.3;margin-block:1.2em .5em}
.bt-content p{margin-block:0 1em}
.bt-content a{color:var(--bt-sand)}
.bt-back{color:var(--bt-muted)!important;text-decoration:none!important;font-size:14px}