:root{
  --bg: #fafafa;
  --panel: #ffffff;
  --text: #0f1113;
  --muted: #6b7278;
  --accent: #000000; /* Nothing aesthetic: pure black accent */
  --radius: 14px;
  --gap: 28px;
  --maxw: 880px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:48px 20px;
}

/* page wrapper */
.wrap{
  width:100%;
  max-width:var(--maxw);
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  align-items:stretch;
}

/* top nav */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  gap:12px;
  backdrop-filter: blur(6px);
}
.brand{
  font-weight:700;
  letter-spacing:0.02em;
}
.nav-links a{
  margin-left:18px;
  font-weight:600;
  text-decoration:none;
  color:var(--muted);
  font-size:0.95rem;
}
.nav-links a:hover{color:var(--text)}

/* hero */
.hero{
  padding:56px;
  background:transparent;
  border-radius:16px;
  text-align:left;
}
.hero-title{
  margin:0 0 8px 0;
  font-size: clamp(2.0rem, 4vw, 3.2rem);
  font-weight:600;
  letter-spacing: -0.01em;
}
.hero-sub{
  margin:0;
  color:var(--muted);
  font-weight:300;
  font-size:1.05rem;
}

/* cards */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:28px;
  box-shadow: 0 6px 18px rgba(12,14,16,0.04);
  border: 1px solid rgba(12,14,16,0.04);
}
.card-title{
  margin:0 0 10px 0;
  font-size:1.05rem;
  letter-spacing:0.06em;
  font-weight:600;
  text-transform:uppercase;
  color:var(--muted);
}
.card-body{ margin:0; color:var(--text); font-weight:400; }

/* work list */
.work-list{
  margin:0;
  padding-left:1rem;
  color:var(--text);
}
.work-list li{
  margin:8px 0;
  padding:6px 0;
}

/* links */
.link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.link:hover{text-decoration:underline}

/* subtle accent style like Nothing: dot + label */
.accent{
  display:inline-block;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  background:transparent;
  color:var(--accent);
  letter-spacing:0.01em;
  margin-left:6px;
}

/* footer */
.footer{
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
  padding:12px 0;
}
.footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-icons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 6px;
}

.footer-icons a {
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.footer-icons a:hover {
  opacity: 1;
}

.footer-icons svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}


/* responsive */
@media (max-width:640px){
  .hero{ padding:28px; text-align:center }
  .nav-links{ display:none }
  .card{ padding:18px }
}