:root{
  --bg: #faf7f2;
  --text: #2d2a26;
  --muted: #6f6a64;
  --accent: #6aa4a1; /* seafoam */
  --accent-2: #c7d9d7; /* soft wash */
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-wrap{ display:flex; flex-direction:column; min-height:100vh; }

.container{
  width: min(1100px, 92%);
  margin-inline: auto;
}
.container.narrow{ width: min(850px, 92%); }

/* Hero */
.hero{
  position: relative;
  padding: 48px 0 2px;
  overflow:hidden;
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.avatar{
  width:52px; height:52px; display:grid; place-items:center; font-size:26px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent-2), #f1ece6);
  box-shadow: var(--shadow);
}
.title{
  margin:0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-weight:700;
  letter-spacing: 0.3px;
  font-size: clamp(28px, 4vw, 40px);
}
.subtitle{
  margin:2px 0 0; color: var(--muted);
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
}

.socials{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.social-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; text-decoration:none; color: var(--text);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.12); }
.social-btn .icon{ width:18px; height:18px; fill: var(--accent); }
.social-btn span{ font-weight:600; font-size:14px; }

.wash{
  pointer-events:none; position:absolute; inset:auto 0 0 0; height:140px; z-index:-1;
  background: radial-gradient(1000px 200px at 20% 0%, rgba(106,164,161,.35), rgba(0,0,0,0)),
              radial-gradient(900px 240px at 80% 10%, rgba(199,217,215,.5), rgba(0,0,0,0));
  opacity:.8;
}

/* Bio */
.bio{ padding: 28px 0 12px; }
.bio h2{
  margin:0 0 8px 0; font-family: 'Playfair Display', ui-serif, Georgia, serif; font-size: 28px;
}
.bio p{ margin:0; color: var(--text); font-size: 17px; }

/* Portfolio */
.portfolio{ padding: 28px 0 64px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap: wrap; }
.portfolio h2{ margin:0; font-family: 'Playfair Display', ui-serif, Georgia, serif; font-size: 26px; }
.hint{ margin:0; color: var(--muted); font-size: 14px; }

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* Masonry-like responsive spans */
.card{ margin:0; padding:0; border-radius:16px; overflow:hidden; background: var(--card); box-shadow: var(--shadow); }
.card:nth-child(6n+1){ grid-column: span 6; }
.card:nth-child(6n+2){ grid-column: span 6; }
.card:nth-child(6n+3){ grid-column: span 4; }
.card:nth-child(6n+4){ grid-column: span 8; }
.card:nth-child(6n+5){ grid-column: span 5; }
.card:nth-child(6n+6){ grid-column: span 7; }

.card img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio: 4 / 5; }
.card:nth-child(4n) img{ aspect-ratio: 16 / 10; }
.card:nth-child(5n) img{ aspect-ratio: 1 / 1; }

@media (max-width: 900px){
  .grid{ grid-template-columns: repeat(8, 1fr); }
  .card{ grid-column: span 4 !important; }
}
@media (max-width: 600px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
  .card{ grid-column: span 4 !important; }
}

/* Footer */
.footer{ margin-top:auto; padding: 36px 0; color: var(--muted); font-size: 14px; text-align:center; }