/* Reset and base */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;
  --ink:#121212;
  --muted:#4b4b4b;
  --rule:#e9e9e9;
  --accent:#111111;
  --accent-2:#777;
}
html,body{height:100%}
body{
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

/* Layout */
.container{max-width:980px;margin:0 auto;padding: clamp(16px, 3vw, 28px)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 880px){.grid-2{grid-template-columns: 1fr}}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:40;background: rgba(255,255,255,.9);backdrop-filter: blur(8px); border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav a.logo{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.4px}
.logo img{height:32px;width:auto;border-radius:2px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:var(--ink);text-decoration:none;font-weight:600;opacity:.7}
.menu a:hover{opacity:1}

/* Hero */
.hero{padding: 56px 0 24px; border-bottom:1px solid var(--rule)}
.hero h1{font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: clamp(34px, 5vw, 56px); line-height:1.1; letter-spacing:.2px}
.slogan{font-family: Georgia, 'Times New Roman', serif; font-size: clamp(16px, 2.2vw, 22px); color: var(--muted); margin-top: 8px; letter-spacing:.3px}
.hero p{color:var(--muted);max-width: 70ch;margin-top:12px}
.hero .cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);padding:10px 16px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:700;opacity:.9}
.btn:hover{opacity:1}
.btn.primary{background: var(--ink); color:#fff;}

/* Cards */
.card{background:#fff; border:1px solid var(--rule); padding:22px;border-radius:14px}
.card h3{margin-bottom:8px; font-size: 20px; font-family: Georgia, 'Times New Roman', serif;}

/* Lists */
.list{display:grid;gap:12px}
.list li{display:flex;gap:12px}
.bullet{width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:10px;flex:0 0 auto}

/* Footer */
footer{margin-top:40px;padding:28px 0;border-top:1px solid var(--rule);color:var(--muted);font-size:14px}

/* Page titles */
.page-title{font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px}
.subtitle{color:var(--muted);max-width:70ch}

/* Media */
figure{border-radius:12px; overflow:hidden; border:1px solid var(--rule)}
figure img{width:100%; display:block}
.caption{color:var(--muted); font-size: 13px; margin-top: 6px}

/* Callouts */
.callout{border-left:4px solid var(--ink); padding:12px 16px; background: #fafafa; border-radius: 6px; color: var(--ink)}

/* Forms */
form{display:grid;gap:12px;margin-top:10px}
label{font-weight:600}
input, textarea{width:100%; padding:12px; border:1px solid var(--rule); border-radius:10px; font: inherit}
input:focus, textarea:focus{outline:2px solid #00000020}
button.submit{all:unset; display:inline-block; padding:12px 16px; border-radius:10px; border:1px solid var(--ink); background: var(--ink); color:#fff; font-weight:700; cursor:pointer}

/* Gallery */
.gallery{columns: 3 240px; column-gap: 16px}
.gallery figure{break-inside: avoid; margin-bottom: 16px}
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center}
.lightbox img{max-width:95vw; max-height:90vh}
.lightbox.show{display:flex}
.close{position:absolute; top:16px; right:16px; background:#fff; color:#000; border-radius:8px; padding:8px 10px; cursor:pointer; font-weight:700}