:root{
  --char:#1c1915;      /* deep charcoal */
  --char-2:#2a251f;
  --bone:#f2ede4;      /* off-white / bone */
  --bone-2:#e6dfd2;
  --leather:#4a3323;   /* tobacco leather */
  --tan:#a8835c;       /* saddle tan */
  --brick:#9a4a32;     /* muted brick */
  --ink:#231e19; --muted:#6e6255;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--char);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Shared label style: tracked uppercase */
.handle,.lbl,.asof,.btn,.site-footer{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--char);color:var(--bone);overflow:hidden}
.hero-photo{display:block;position:relative}
.hero-photo img{width:100%;height:min(70svh,560px);min-height:420px;object-fit:cover;object-position:56% 22%}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,25,21,0) 55%,rgba(28,25,21,.6) 78%,var(--char) 100%)}
.hero-text{position:relative;z-index:1;margin-top:-64px;padding:0 24px 56px;text-align:center}
.handle{font-size:12px;font-weight:600;color:#d9b98f}
h1{font-family:var(--display);font-weight:400;font-size:clamp(52px,15vw,124px);line-height:.95;letter-spacing:-.01em;margin-top:12px;color:#f7f2ea}
.rule{display:block;width:56px;height:5px;margin:22px auto 0;border-top:1px solid var(--tan);border-bottom:1px solid var(--tan)}
.sub{font-family:var(--display);font-style:italic;font-size:clamp(19px,5vw,24px);line-height:1.4;color:#e9e1d4;margin:18px auto 0;max-width:22ch;text-wrap:balance}

/* ---------- Reach / followers ---------- */
.reach{background:var(--bone);color:var(--ink);text-align:center;padding:64px 24px 72px}
.stats{list-style:none;display:flex;justify-content:center;max-width:560px;margin:0 auto}
.stats li{flex:1}
.stats li+li{border-left:1px solid #cbbfad}
.stats a{display:block;padding:6px 8px 10px}
.num{display:block;font-family:var(--display);font-size:clamp(56px,16vw,88px);line-height:1;color:var(--leather);letter-spacing:-.01em;transition:color .2s}
.lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:12px}
.stats a:hover .num{color:var(--brick)}
.asof{font-size:10.5px;font-weight:500;color:#8d8172;margin-top:28px;letter-spacing:.18em}

.links{display:flex;justify-content:center;gap:12px;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 34px;border-radius:2px;font-size:13px;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.btn-outline{width:150px;color:var(--ink);border:1px solid var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--bone)}

/* ---------- Work with me ---------- */
.contact{position:relative;background:var(--leather);color:var(--bone);text-align:center;padding:84px 24px 92px;
  background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,236,206,.08),rgba(0,0,0,0) 60%),linear-gradient(180deg,#4d3525,#3e2b1e)}
.contact::before{content:"";display:block;width:56px;height:5px;margin:0 auto 30px;border-top:1px solid var(--tan);border-bottom:1px solid var(--tan)}
.contact h2{font-family:var(--display);font-weight:400;font-size:clamp(42px,11vw,72px);line-height:1.02;color:#f7f2ea}
.contact p{font-size:17px;color:#e3d7c6;margin:20px 0 32px;line-height:1.7}
.mail{color:#f7f2ea;border-bottom:1px solid var(--tan);padding-bottom:2px;white-space:nowrap;font-weight:500;transition:color .2s,border-color .2s}
.mail:hover{color:#e7c79e;border-color:#e7c79e}
.btn-solid{background:var(--bone);color:var(--leather);border:1px solid var(--bone);min-width:220px}
.btn-solid:hover{background:transparent;color:var(--bone)}

/* ---------- Footer ---------- */
.site-footer{background:var(--char);color:#9d8f7e;font-size:11px;font-weight:500;text-align:center;padding:34px 20px 40px}

a:focus-visible{outline:2px solid var(--tan);outline-offset:4px}

/* ---------- Desktop: split hero ---------- */
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:45fr 55fr;min-height:min(92vh,880px)}
  .hero-photo{order:2;position:relative}
  .hero-photo img{position:absolute;inset:0;height:100%;min-height:0;object-position:58% 30%}
  .hero-photo::after{display:none}
  .hero-text{order:1;align-self:center;margin:0;text-align:left;padding:96px 48px 96px clamp(48px,6.5vw,112px)}
  .btn-outline{width:180px}
  .handle{font-size:13px}
  h1{font-size:clamp(84px,8.4vw,132px);margin-top:20px}
  .rule{margin:34px 0 0;width:72px}
  .sub{margin:28px 0 0;font-size:clamp(22px,1.9vw,27px);max-width:20ch}
  .reach{padding:112px 24px 120px}
  .contact{padding:128px 24px 136px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}