:root{
  --paper:#ffffff;
  --ink:#1c1c1a;
  --body:#3c3c38;
  --soft:#5a5a54;
  --muted:#8e8e88;
  --faint:#9a9a94;
  --line:#e9e9e5;
  --line-soft:#eeeeea;
  --wash:#f6f5f3;
  --red:#c8102e;
  --red-dark:#a70d26;
  --max:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}

.wrap{max-width:var(--max);margin:0 auto;padding:0 34px}

/* ---------- logo ---------- */
.logo{
  font-size:19px;font-weight:700;letter-spacing:-0.03em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.logo .br{color:var(--red);font-weight:400}
.logo .sol{font-weight:400}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  position:sticky;top:0;z-index:40;
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .18s ease}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:700}
.nav a.on .br{color:var(--red);font-weight:400}
.nav .pill{
  border:1px solid var(--ink);border-radius:22px;padding:7px 17px;
  color:var(--ink);font-weight:700;font-size:13.5px;
  transition:background .18s ease,color .18s ease;
}
.nav .pill:hover{background:var(--ink);color:#fff}
.burger{display:none;background:none;border:0;padding:6px;color:var(--ink);line-height:1}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:transform .2s ease,opacity .2s ease}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobnav.open{display:block}
.mobnav a{
  display:block;padding:15px 34px;text-decoration:none;color:var(--ink);
  font-size:16px;border-bottom:1px solid var(--line-soft);
}
.mobnav a.on{font-weight:700}
.mobnav a.on .br{color:var(--red)}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink);margin:0;font-weight:700}
h1{font-size:clamp(2.35rem,6.2vw,4.15rem);line-height:0.98;letter-spacing:-0.045em}
h1 .dot{color:var(--red)}
h2{font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.12;letter-spacing:-0.032em}
h3{font-size:1.02rem;line-height:1.35;letter-spacing:-0.022em}
p{margin:0 0 20px;max-width:66ch}
p:last-child{margin-bottom:0}

.kicker{
  display:flex;align-items:center;gap:11px;margin-bottom:20px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.kicker::before{content:"";width:24px;height:2px;background:var(--red);flex:none}

.idx{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:11px}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.gridfx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-in{position:relative;z-index:1;padding:78px 0 74px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:44px;align-items:center}
.hero-solo{max-width:19ch}

.framebox{position:relative;background:var(--paper);border:1px solid #e4e4df;padding:30px 28px}
.framebox p{font-size:16px;line-height:1.62;max-width:none}
.framebox i{position:absolute;width:10px;height:10px}
.framebox i:nth-child(1){top:-1px;left:-1px;border-top:2px solid var(--red);border-left:2px solid var(--red)}
.framebox i:nth-child(2){top:-1px;right:-1px;border-top:2px solid var(--red);border-right:2px solid var(--red)}
.framebox i:nth-child(3){bottom:-1px;left:-1px;border-bottom:2px solid var(--red);border-left:2px solid var(--red)}
.framebox i:nth-child(4){bottom:-1px;right:-1px;border-bottom:2px solid var(--red);border-right:2px solid var(--red)}

/* ---------- sections ---------- */
.sec{padding:60px 0;border-bottom:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;align-items:start}
.sec-grid h2{position:sticky;top:104px}
.sec.plain{border-bottom:0}

/* ---------- cell grid ---------- */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.cells.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{background:var(--paper);padding:20px 19px;transition:background .18s ease}
.cell h3{margin-bottom:7px}
.cell p{font-size:14.5px;line-height:1.58;color:var(--soft);margin:0;max-width:none}

/* ---------- rows ---------- */
.rows{margin-top:26px}
.row{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:34px}
.row p{margin:0;font-size:15px;line-height:1.62;max-width:58ch}
.row:hover h3{color:var(--red)}
.row h3{transition:color .18s ease}

/* ---------- list ---------- */
.skills{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.skills li{border-top:1px solid var(--line);padding:14px 24px 14px 20px;position:relative;font-size:15px}
.skills li::before{content:"—";position:absolute;left:0;color:var(--red)}

/* ---------- cta ---------- */
.cta{position:relative;background:var(--wash);padding:clamp(30px,5vw,44px) clamp(24px,4vw,40px);overflow:hidden;margin:60px 0}
.cta::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--red)}
.cta .kicker{margin-bottom:14px}
.cta .kicker::before{display:none}
.cta h2{font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:-0.04em;max-width:18ch}
.cta p{margin-top:14px;max-width:50ch;font-size:15.5px}
.cta-row{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.btn{
  background:var(--red);color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;padding:13px 26px;border-radius:24px;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.mail-inline{font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid #c8c8c2;padding-bottom:2px}
.mail-inline:hover{border-color:var(--red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.mail-big{
  display:inline-block;margin-top:30px;
  font-size:clamp(1.3rem,3.6vw,2.05rem);font-weight:700;letter-spacing:-0.04em;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:4px;
}
.mail-big:hover{color:var(--red)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tiles a{background:var(--paper);padding:24px 22px;text-decoration:none;display:block;transition:background .18s ease}
.tiles a:hover{background:var(--wash)}
.tiles .top{display:flex;justify-content:space-between;align-items:center}
.tiles .n{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--red)}
.tiles .ar{color:#c8c8c2;font-size:16px;transition:transform .18s ease,color .18s ease}
.tiles a:hover .ar{color:var(--red);transform:translateX(3px)}
.tiles .t{display:block;margin-top:14px;color:var(--ink);font-weight:700;letter-spacing:-0.025em;line-height:1.3;font-size:15px}

.note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:22px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:26px 0 40px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;justify-content:space-between}
.foot-meta{font-size:12.5px;color:var(--faint)}
.foot-meta a{color:var(--faint);text-decoration:none}
.foot-meta a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid,.sec-grid,.row{grid-template-columns:1fr;gap:22px}
  .sec-grid{gap:16px}
  .sec-grid h2{position:static}
  .cells.c3,.cells.c2,.tiles,.skills{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block}
  .hero-in{padding:52px 0 50px}
  .sec{padding:42px 0}
  .cta{margin:42px 0}
  .hero-solo{max-width:none}
}
@media (max-width:560px){
  .wrap{padding:0 22px}
  .mobnav a{padding:14px 22px}
  .head-in{height:64px}
  body{font-size:16px}
  .framebox{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}