:root{
  --bg: hsl(220 20% 98%);
  --card: hsl(0 0% 100%);
  --text: hsl(222 47% 11%);
  --muted: hsl(215 16% 47%);
  --brand: hsl(224 76% 48%);
  --brand-2: hsl(260 83% 58%);
  --shadow: 0 10px 30px hsl(220 20% 10% / 10%);
  --radius: 18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: hsl(222 28% 8%);
    --card: hsl(222 24% 12%);
    --text: hsl(220 20% 97%);
    --muted: hsl(218 15% 65%);
    --shadow: 0 10px 30px hsl(220 40% 2% / 60%);
  }
}
.brand-title {
    color: var(--brand);     /* SAME blue as the button */
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    letter-spacing: 0.25px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at -10% -20%, hsl(260 100% 85% / 18%), transparent 60%),
    radial-gradient(1000px 700px at 110% -30%, hsl(210 100% 75% / 18%), transparent 60%),
    var(--bg);
  line-height:1.65;
}
.container{ width:min(1100px, 92vw); margin-inline:auto; }
.section{ padding: clamp(2.5rem, 4vw, 5rem) 0; }

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 35%);
  border-bottom: 1px solid color-mix(in oklab, var(--muted), transparent 75%);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; }
.brand .logo{ font-weight: 800; letter-spacing:.2px; font-size: clamp(1rem, 2vw, 1.25rem); }
.site-nav a{ text-decoration:none; color:var(--text); margin-left:1rem; font-weight:600; opacity:.8; }
.site-nav a:hover{ opacity:1 }

.hero .grid-2{
  display:grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 900px){ .hero .grid-2{ grid-template-columns: 1fr; } }

.media{ position:relative; }
.portrait{
  background: conic-gradient(from 180deg at 70% 10%, var(--brand), var(--brand-2), var(--brand));
  padding: 6px; margin:0; border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
}
.portrait img{
  display:block; width:100%; height:auto;
  border-radius: var(--radius);
  background: #eee;
  aspect-ratio: 4 / 3; object-fit: cover;
}

.social{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in oklab, var(--muted), transparent 60%);
  border-radius:14px; padding:.6rem .9rem; text-decoration:none; color:var(--text);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white; border:none;
}
.btn.icon{ padding:.55rem; width:42px; height:42px; }
.btn.icon svg{ width:20px; height:20px; fill: currentColor; }

.content h1{ font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1.2; margin: 0 0 .6rem 0; }
.content p{ margin: 0 0 1rem 0; }
.contact-cta{ display:flex; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap; }

.muted{ color:var(--muted); }
.small{ font-size:.95rem; }

.gallery h2{ margin:0 0 .25rem 0; font-size: clamp(1.4rem, 3vw, 1.8rem); }

.masonry{
  margin-top: 1rem;
  display:grid; gap:1rem;
  grid-template-columns: repeat(12, 1fr);
}
.masonry img{
  width:100%; height:100%; object-fit:cover; border-radius: var(--radius); box-shadow: var(--shadow);
  background:#ddd; aspect-ratio: 4 / 3;
}
.masonry img:nth-child(1){ grid-column: span 6; }
.masonry img:nth-child(2){ grid-column: span 6; }
.masonry img:nth-child(3){ grid-column: span 12; aspect-ratio: 21 / 9; }

@media (max-width: 700px){
  .masonry img:nth-child(1),
  .masonry img:nth-child(2),
  .masonry img:nth-child(3){
    grid-column: span 12;
  }
}

.site-footer{
  border-top:1px solid color-mix(in oklab, var(--muted), transparent 75%);
  padding: 1.2rem 0 2rem 0; margin-top: 1rem;
  background: color-mix(in oklab, var(--bg), transparent 15%);
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.footer-inner a{ color:inherit; text-decoration:none; opacity:.8 }
.footer-inner a:hover{ opacity:1 }