/*
Theme Name: Jamal Kaileh
Theme URI: https://jamalkaileh.com
Author: Jamal Kaileh
Author URI: https://jamalkaileh.com
Description: A simple, elegant, SEO-optimized personal theme for Jamal Kaileh — Houston-based construction and real estate operator. Built for name and location search, with meta tags, Open Graph, and Person schema included. Cool architectural palette, structural sans headings paired with a serif reading face.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jamal-kaileh
*/

:root{
  --ink:#14232e;
  --bg:#ffffff;
  --panel:#f4f6f7;
  --muted:#57666f;
  --line:#e3e7e9;
  --accent:#3f6b78;
  --wrap:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,.brand,.eyebrow,.site-nav,.social,.venture .meta,.cta{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{color:var(--ink);line-height:1.12;font-weight:700;margin:0}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(20,35,46,.22)}
a:hover{border-color:var(--ink)}

/* header */
.site-header{border-bottom:1px solid var(--line);background:var(--bg)}
.header-inner{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px 0}
.brand{font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;border:none;color:var(--ink)}
.site-nav{display:flex;gap:26px;flex-wrap:wrap}
.site-nav a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);border:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}

/* main + shared */
.site-main{padding:76px 0}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
.lede{font-size:22px;line-height:1.4;margin:0 0 26px;color:var(--ink)}
.prose p{margin:0 0 20px;color:var(--ink)}
.prose p:last-child{margin-bottom:0}

/* hero */
.hero h1{font-size:clamp(40px,7vw,58px);letter-spacing:-.015em;margin:0 0 18px}
.hero .intro{color:var(--muted);margin:0 0 30px}
.cta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.cta a{border:none;color:var(--accent)}
.cta a:hover{color:var(--ink)}
.cta .sep{color:var(--line);margin:0 12px}

/* sections */
.section{margin-top:64px;padding-top:0}
.section > h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 20px;display:flex;align-items:center;gap:12px}
.section > h2::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
.focus-list{list-style:none;padding:0;margin:0}
.focus-list li{padding:15px 0;border-top:1px solid var(--line);font-size:19px}
.focus-list li:last-child{border-bottom:1px solid var(--line)}

/* page titles */
.page-title{font-size:clamp(32px,5vw,42px);letter-spacing:-.01em;margin:0 0 30px}

/* portfolio */
.venture{padding:26px 0;border-top:1px solid var(--line)}
.venture:last-child{border-bottom:1px solid var(--line)}
.venture h3{font-size:21px;margin:0 0 6px;font-weight:700}
.venture .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 10px}
.venture p{margin:0;color:var(--muted)}

/* publications */
.coming{color:var(--muted);font-size:20px;margin:0}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--panel);padding:34px 0;margin-top:20px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.social{display:flex;gap:22px;flex-wrap:wrap}
.social a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);border:none}
.social a:hover{color:var(--ink)}
.copy{font-size:13px;color:var(--muted);margin:0;letter-spacing:.02em}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:640px){
  body{font-size:17px}
  .site-main{padding:52px 0}
  .header-inner{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}