/* ---------------------------------------------------------------
   dancdyer.com — minimal redesign (2026-07)
   Synthesis of bolto (cobalt accent), cal.com (mono + grotesk,
   neutral grayscale), qz (editorial hierarchy), siiimple (grid).
   --------------------------------------------------------------- */
:root{
  --bg:#FFFFFF; --bg2:#FAFAFA; --ink:#141414; --ink2:#3A3A3A;
  --gray:#8A8A8A; --line:#EAEAEA; --blue:#2966FF; --blue-d:#1E52E0;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.label{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--gray)}

/* NAV */
nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:18px;letter-spacing:-0.02em}
.logo b{color:var(--blue)}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{font-family:var(--mono);font-size:13px;color:var(--ink2);transition:.15s}
.nav-links a:hover{color:var(--blue)}

/* HERO */
.hero{padding:110px 0 90px;border-bottom:1px solid var(--line)}
.hero .label{margin-bottom:22px}
.hero h1{font-size:clamp(42px,6.2vw,74px);font-weight:600;line-height:1.05;
  letter-spacing:-0.03em;max-width:17ch}
.hero h1 .soft{color:#A6A6A6}
.hero p{font-size:20px;color:var(--ink2);max-width:52ch;margin:26px 0 34px;letter-spacing:-0.01em}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:14px;padding:13px 22px;border-radius:8px;
  transition:.15s;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn-solid{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn-solid:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--ink)}

/* ABOUT */
.about{padding:90px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1.7fr 1fr;gap:60px;align-items:start}
.about .label{margin-bottom:18px}
.about h2{font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-0.03em;margin-bottom:20px}
.about p{color:var(--ink2);margin-bottom:16px;max-width:56ch}
.facts{list-style:none;font-family:var(--mono);font-size:14px}
.facts li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.facts li:first-child{border-top:1px solid var(--line)}
.facts span:last-child{color:var(--gray)}
.about-side{display:flex;flex-direction:column;gap:24px}
.portrait{width:100%;max-width:340px;aspect-ratio:4/5;object-fit:cover;
  border-radius:12px;border:1px solid var(--line);background:var(--bg2)}

/* PROJECTS */
.projects{padding:90px 0;border-bottom:1px solid var(--line)}
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px}
.head h2{font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-0.03em}
.head .label{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card{padding:30px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;min-height:210px;transition:.18s;background:var(--bg)}
.card:hover{background:var(--bg2)}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.card .num{font-family:var(--mono);font-size:13px;color:var(--gray)}
.card:hover .num{color:var(--blue)}
.card .tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--gray)}
.card h3{font-size:21px;font-weight:700;letter-spacing:-0.02em;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--ink2);line-height:1.55;flex:1}
.card .go{font-family:var(--mono);font-size:13px;color:var(--blue);margin-top:18px}
.card .go .arr{transition:.18s;display:inline-block}
.card:hover .go .arr{transform:translateX(4px)}

/* CONTACT */
.contact{padding:100px 0 90px;text-align:center}
.contact .label{margin-bottom:18px}
.contact h2{font-size:clamp(34px,5vw,56px);font-weight:600;letter-spacing:-0.035em;margin-bottom:20px}
.contact p{color:var(--ink2);max-width:46ch;margin:0 auto 30px;font-size:18px}
.contact .cta{justify-content:center}

/* FOOTER */
footer{border-top:1px solid var(--line)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:26px 32px;display:flex;
  justify-content:space-between;font-family:var(--mono);font-size:12.5px;color:var(--gray)}

@media(max-width:860px){
  .about{grid-template-columns:1fr;gap:36px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .nav-links{gap:16px}
  .grid{grid-template-columns:1fr}
  .card{border-right:none}
  .foot-in{flex-direction:column;gap:8px}
}