/* irfanmirza.de — Mirza Irfan Baig · SEO & GEO
   One stylesheet for all pages. Light + dark, system-driven. */

:root{
  --ground:#F3F4F5;
  --surface:#FFFFFF;
  --surface-2:#F7F9FA;
  --ink:#101619;
  --muted:#566068;
  --line:#DBDFE2;
  --accent:#1B4E6B;
  --on-accent:#FFFFFF;
  --accent-soft:#E3EDF3;
  --data:#9A5320;
  --data-soft:#F6EADF;
  --shadow:0 1px 2px rgba(16,22,25,.05), 0 8px 24px rgba(16,22,25,.05);
  --radius:10px;
  --maxw:1080px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#0B1114;
    --surface:#121A1E;
    --surface-2:#172127;
    --ink:#E5EBEE;
    --muted:#94A1A9;
    --line:#253137;
    --accent:#7FB6D8;
    --on-accent:#0B1114;
    --accent-soft:#152833;
    --data:#D69257;
    --data-soft:#2A2018;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* System fonts only — no external font host is called, so no consent banner
   is needed for fonts and nothing is loaded from a third-party server. */
:root{
  --font-body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Semibold","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-head); margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.15}
h1{font-size:clamp(31px,5vw,46px); font-weight:600}
h2{font-size:clamp(24px,3.4vw,31px); font-weight:600}
h3{font-size:20px; font-weight:600}
p{margin:0}
img{max-width:100%; height:auto; display:block}

a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 32%, transparent)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ---------- skip link ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--on-accent); padding:10px 16px; border:0; z-index:100}
.skip:focus{left:12px; top:12px}

/* ---------- header / nav ---------- */
.site-head{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; flex-wrap:wrap}
.brand{font-family:var(--font-head); font-weight:600; font-size:17px; color:var(--ink); border:0; letter-spacing:-.01em}
.brand span{color:var(--muted); font-weight:400}
nav.main{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center; font-size:15.5px}
nav.main a{color:var(--muted); border:0; padding:4px 0}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--ink)}
nav.main a.lang{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--line); border-radius:5px}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px; display:flex; flex-direction:column; gap:20px}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.hero p.lead{font-size:19.5px; color:var(--muted); max-width:62ch}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}

.btn{display:inline-block; padding:11px 20px; border-radius:7px; font-weight:600; font-size:16px; border:1px solid transparent}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- metric row ---------- */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:10px}
.metric{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px 19px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px}
.metric .fig{font-family:var(--font-mono); font-size:26px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.metric .cap{font-size:14px; color:var(--muted); line-height:1.4}

/* ---------- sections ---------- */
section{padding:46px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{display:flex; flex-direction:column; gap:8px; margin-bottom:24px; max-width:70ch}
.sec-head p{color:var(--muted)}

.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px}
.card h3{font-size:18px}
.card p, .card li{color:var(--muted); font-size:16px}
.card ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:6px}
.card .tagline{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent)}

/* ---------- case blocks ---------- */
.case{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; display:flex; flex-direction:column; gap:16px}
.case-top{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline}
.case-top h3{flex:1 1 auto; min-width:220px; font-size:21px}
.pill{font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:20px; background:var(--accent-soft); color:var(--accent); white-space:nowrap}
.pill.warm{background:var(--data-soft); color:var(--data)}
.deltas{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.delta{background:var(--surface-2); padding:13px 15px; display:flex; flex-direction:column; gap:2px}
.delta .row{font-family:var(--font-mono); font-size:19px; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.delta .from{color:var(--muted)}
.delta .arrow{color:var(--muted); font-size:13px}
.delta .to{color:var(--accent); font-weight:500}
.delta .cap{font-size:12.5px; color:var(--muted)}
.case p{color:var(--muted)}
.case p strong, .case li strong{color:var(--ink); font-weight:600}
.case ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:16px}

/* ---------- tables ---------- */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15.5px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--surface-2)}
tr:last-child td{border-bottom:none}
td b{font-weight:600}
td.n{font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted)}

/* ---------- CV timeline ---------- */
.cv-item{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:18px 0; border-bottom:1px solid var(--line)}
.cv-item:last-child{border-bottom:0}
.cv-item .when{font-family:var(--font-mono); font-size:13.5px; color:var(--muted); padding-top:3px}
.cv-item h3{font-size:18px; margin-bottom:2px}
.cv-item .where{color:var(--accent); font-size:15.5px; margin-bottom:6px}
.cv-item ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:16px}
@media (max-width:620px){.cv-item{grid-template-columns:1fr; gap:6px}}

/* ---------- tag cloud ---------- */
.tags{display:flex; flex-wrap:wrap; gap:7px}
.tags .t{font-size:14.5px; padding:4px 12px; border-radius:20px; background:var(--accent-soft); color:var(--ink)}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:72ch; display:flex; flex-direction:column; gap:16px}
.prose h2{margin-top:18px; font-size:23px}
.prose h3{margin-top:10px; font-size:18px}
.prose p, .prose li{color:var(--muted)}
.prose strong{color:var(--ink)}
.prose ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.prose .box{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--data); border-radius:8px; padding:16px 18px}

/* ---------- contact ---------- */
.contact-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.contact-row .card a{font-size:17px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:32px 0 46px; margin-top:26px}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:flex-start}
.site-foot p, .site-foot a{font-size:14.5px; color:var(--muted)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:16px}
.site-foot .who{max-width:44ch}