/* ============================================================================
   Hadi Patel — portfolio
   Hand-written. No framework, no build step, no runtime dependencies.
   ========================================================================= */

:root{
  --bg:        #fbfbfa;
  --surface:   #ffffff;
  --raised:    #f4f5f3;
  --ink:       #16181c;
  --body:      #3d444d;
  --muted:     #6b747f;
  --faint:     #9aa3ad;
  --line:      #e2e5e1;
  --line-firm: #cdd2cc;
  --accent:    #b4451f;
  --accent-ink:#8f3517;
  --accent-bg: #fdf1ec;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 68ch;
  --gut: clamp(20px, 5vw, 40px);
}

html[data-theme="dark"]{
  --bg:        #101215;
  --surface:   #16191d;
  --raised:    #1c2025;
  --ink:       #f2f4f6;
  --body:      #bcc4cd;
  --muted:     #8d97a2;
  --faint:     #68727d;
  --line:      #262b31;
  --line-firm: #363d45;
  --accent:    #f08256;
  --accent-ink:#f5a684;
  --accent-bg: #241611;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:        #101215;
    --surface:   #16191d;
    --raised:    #1c2025;
    --ink:       #f2f4f6;
    --body:      #bcc4cd;
    --muted:     #8d97a2;
    --faint:     #68727d;
    --line:      #262b31;
    --line-firm: #363d45;
    --accent:    #f08256;
    --accent-ink:#f5a684;
    --accent-bg: #241611;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"cv11" 1;
}

.wrap{max-width:1080px; margin:0 auto; padding-inline:var(--gut)}
.wrap.narrow{max-width:760px}

h1,h2,h3,h4{color:var(--ink); line-height:1.18; letter-spacing:-.022em; margin:0}
p{margin:0 0 1.05em}
a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px}
strong{color:var(--ink); font-weight:600}
em{font-style:italic}
code{
  font-family:var(--mono); font-size:.855em;
  background:var(--raised); border:1px solid var(--line);
  padding:.1em .38em; border-radius:4px; color:var(--ink);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--accent); color:#fff; padding:10px 18px; border-radius:0 0 6px 0;
}
.skip:focus{left:0}

/* ───────────────────────── header ───────────────────────── */

header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:24px; height:62px}

.mark{
  font-family:var(--mono); font-weight:500; font-size:15px;
  color:var(--ink); text-decoration:none; letter-spacing:.06em;
  border:1px solid var(--line-firm); border-radius:6px;
  padding:5px 9px; line-height:1; flex:none;
}
.mark:hover{border-color:var(--accent); color:var(--accent)}

header nav{display:flex; gap:26px; margin-left:auto; font-size:14.5px}
header nav a{color:var(--muted); text-decoration:none; font-weight:500}
header nav a:hover{color:var(--ink)}

#theme{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:7px; cursor:pointer;
  background:transparent; border:1px solid var(--line-firm); color:var(--muted);
}
#theme:hover{color:var(--ink); border-color:var(--ink)}

@media (max-width:640px){
  header nav{gap:16px; font-size:13.5px}
  header nav a:nth-child(2){display:none}
}

/* ───────────────────────── hero ───────────────────────── */

.hero{padding:clamp(64px,11vw,124px) 0 clamp(52px,8vw,84px)}

.kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:500; margin:0 0 22px;
}

.hero h1{
  font-size:clamp(38px,6.6vw,68px);
  font-weight:700; letter-spacing:-.036em; margin-bottom:.58em;
}
.hero h1 em{
  font-style:normal; color:var(--accent);
  border-bottom:3px solid currentColor; padding-bottom:1px;
}

.lede{
  max-width:var(--measure); font-size:clamp(17px,1.7vw,19.5px);
  color:var(--body); margin-bottom:1em;
}

.cta{display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 0}

.btn{
  display:inline-block; padding:11px 21px; border-radius:8px;
  border:1px solid var(--line-firm); background:var(--surface);
  color:var(--ink); text-decoration:none;
  font-size:15px; font-weight:550; line-height:1.3;
  transition:border-color .14s, transform .14s, background .14s;
}
.btn:hover{border-color:var(--ink); transform:translateY(-1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
html[data-theme="dark"] .btn.primary{color:#1a0d08}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .btn.primary{color:#1a0d08}
}

.stats{
  display:grid; gap:1px; margin:clamp(46px,7vw,72px) 0 0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  background:var(--line); border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
.stats > div{background:var(--bg); padding:20px 22px}
.stats dt{
  font-size:12.5px; color:var(--muted); font-weight:500;
  letter-spacing:.005em; margin-bottom:7px;
}
.stats dd{
  margin:0; font-family:var(--mono); font-size:29px; font-weight:500;
  color:var(--ink); letter-spacing:-.03em; line-height:1;
}
.stats dd span{
  display:block; font-family:var(--sans); font-size:12px;
  color:var(--accent); letter-spacing:0; margin-top:8px; font-weight:500;
}

/* ───────────────────────── bands ───────────────────────── */

.band{padding:clamp(62px,9vw,108px) 0; border-top:1px solid var(--line)}
.band.alt{background:var(--surface)}

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:500;
}
.band h2{
  font-size:clamp(27px,3.8vw,40px); font-weight:650;
  letter-spacing:-.03em; margin-bottom:.5em; max-width:22ch;
}
.section-lede{max-width:var(--measure); color:var(--muted); font-size:16.5px}

/* ───────────────────────── cases ───────────────────────── */

.case{
  background:var(--bg); border:1px solid var(--line);
  border-radius:13px; padding:clamp(24px,3.4vw,38px);
}
.band.alt .case{background:var(--surface)}

.case h3{
  font-size:clamp(19px,2.2vw,24px); font-weight:620;
  letter-spacing:-.024em; margin-bottom:.6em;
}

.case.featured{
  margin:38px 0 26px; border-color:var(--line-firm);
  box-shadow:0 1px 2px rgba(0,0,0,.035), 0 8px 26px -18px rgba(0,0,0,.28);
}
.case-head{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:24px}
.case-head h3{margin:0}
.tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; font-weight:500;
  background:var(--accent-bg); color:var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding:4px 9px; border-radius:20px; white-space:nowrap;
}

.case-body{display:grid; gap:26px}
@media (min-width:900px){
  .case-body{grid-template-columns:1fr 1fr; gap:30px 40px}
  .case-body .pt:nth-child(2){grid-row:span 2}
}

.pt h4{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
  margin:0 0 11px; font-weight:500;
}
.pt p{margin-bottom:0; font-size:16px}
.pt ul{margin:0; padding-left:19px}
.pt li{margin:9px 0; font-size:16px}

.prob{
  font-size:16px; color:var(--muted);
  border-left:2px solid var(--line-firm); padding-left:15px; margin-bottom:18px;
}
.case > ul:not(.chips){margin:0; padding-left:19px}
.case > ul:not(.chips) li{margin:9px 0; font-size:16px}

.grid{display:grid; gap:22px; margin-top:22px}
@media (min-width:860px){.grid{grid-template-columns:1fr 1fr}}

.chips{
  display:flex; flex-wrap:wrap; gap:7px;
  list-style:none; margin:22px 0 0; padding:20px 0 0;
  border-top:1px solid var(--line);
}
.chips li{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:var(--raised); border:1px solid var(--line);
  padding:4px 10px; border-radius:5px;
}

/* ───────────────────────── principles ───────────────────────── */

.principles{
  display:grid; gap:1px; margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  background:var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
}
.pr{background:var(--surface); padding:28px 26px}
.pr h3{
  font-size:17px; font-weight:620; letter-spacing:-.018em; margin-bottom:.62em;
  padding-left:15px; border-left:2px solid var(--accent);
}
.pr p{margin:0; font-size:15.5px; color:var(--muted)}

/* ───────────────────────── stack ───────────────────────── */

.stack-grid{
  display:grid; gap:24px 36px; margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
}
.sk h3{
  font-family:var(--mono); font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:10px; font-weight:500;
}
.sk p{margin:0; font-size:15.5px; color:var(--body)}

.note{
  margin:42px 0 0; padding:20px 24px; font-size:15.5px; color:var(--muted);
  background:var(--raised); border:1px solid var(--line); border-radius:10px;
  max-width:var(--measure);
}

/* ───────────────────────── contact ───────────────────────── */

.links{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 22px}
.meta{font-size:14.5px; color:var(--faint); margin:0}

/* ───────────────────────── footer ───────────────────────── */

footer{border-top:1px solid var(--line); padding:30px 0; background:var(--bg)}
footer .wrap{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--faint);
}

/* ───────────────────────── focus ───────────────────────── */

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}