body { font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-weight: 400; margin:0; color:#222; line-height:1.5; }
.wrapper { width: min(1100px, 92%); margin: 0 auto; }
h1 a { color:#44ee33; text-decoration:none; font-size: 2rem; font-weight: 400; }
a { color:#44aa33; text-decoration:none; }
a:hover { color:#44ff33; text-decoration:none; }
.site-header { position:relative; background:#111; color:#fff; border-bottom:1px solid #222; margin-bottom:2rem; overflow:hidden; }
.site-header .hero-bg { position:absolute; inset:0; background:url('../images/kiri_bg.jpg') center/cover no-repeat; filter:brightness(1) saturate(1); transform:scale(1.02); }
.site-header:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.75)); pointer-events:none; }
.site-title { margin:0; font-size:2.2rem; letter-spacing:.5px; font-weight: 350; }
.tagline { margin:.35rem 0 0; font-size:.9rem; opacity:.85; max-width:40ch; }
.site-header .wrapper.header-inner { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:3rem; padding:2.75rem 0 2.25rem; flex-wrap:wrap; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.75rem; z-index:3; position:relative; min-width:48px; min-height:48px; }
.nav-toggle-icon { display:block; width:30px; height:3px; background:#fff; border-radius:2px; position:relative; transition:transform .3s ease, opacity .3s ease, background .3s ease; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content:''; display:block; width:30px; height:3px; background:#fff; border-radius:2px; position:absolute; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle-icon::before { top:-9px; }
.nav-toggle-icon::after { top:9px; }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon { background:transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon::after { top:0; transform:rotate(-45deg); }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.site-nav a { padding:.4rem .65rem; border-radius:4px; background:rgba(0,0,0,.35); color:#fff; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.site-nav a.active, .site-nav a:hover { color:#afc; text-decoration:none; }
@media(max-width:640px) {
  .nav-toggle { display:flex; align-items:center; justify-content:center; }
  .site-header .wrapper.header-inner { flex-wrap:wrap; }
  .branding { flex:1; }
  .site-nav { display:none; width:100%; order:3; }
  .site-nav.is-open { display:block; }
  .site-nav ul { flex-direction:column; gap:.5rem; padding:.75rem 0 .25rem; }
  .site-nav a { display:block; text-align:center; padding:.6rem .75rem; }
}
main { padding-bottom:3rem; }
.social-links { list-style:none; margin:4.5rem 0 0; padding:0; display:flex; gap:.75rem; justify-content: center; }
.social-links li { display: list-item; }
.social-links a { color:inherit; width:34px; height:34px; border:1px solid #ccc; border-radius:6px; background:rgba(0,0,0,.03); display:inline-flex; align-items:center; justify-content:center; transition:.2s background,.2s color,.2s border-color; }
.social-links a svg { width:18px; height:18px; }
.social-links a:hover { background:#44aa33; color:#fff; text-decoration:none; border-color:#44aa33; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
/* Brand-specific styling */
/* .social-links a.facebook { color:#1877F2; border-color:#1877F2; }*/
.social-links a.facebook { background:#1877F2; color:#fff; }
/* .social-links a.instagram { color:#E4405F; border-color:#E4405F; }*/
.social-links a.instagram { background:linear-gradient(45deg,#F58529,#F77737,#FCAF45,#FFDC80,#E4405F,#C13584,#833AB4,#5851DB,#405DE6); color:#fff; border-color:#E4405F; }
.site-footer { border-top:0px solid #ddd; font-size:.875rem; padding:1.5rem 0; color:#555; }
.site-footer p { font-size: 0.8rem;}
.headshot { display:block; width:200px; height:200px; border-radius:50%; object-fit:cover; margin:0 auto 1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.page h1, .class h1 { font-size: 1.7rem; margin-top:0; font-weight: 400; }
h2 {font-size: 1.5rem; font-weight: 400; }
h3 {font-size: 1.3rem; font-weight: 400; }
p, li {font-size: 0.9rem; }
.class .meta { font-size:.85rem; color:#555; display:flex; flex-wrap:wrap; gap:.75rem; }
.badge.level { background:#eee; padding:2px 6px; border-radius:3px; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; }
.class-list { list-style:none; padding:0; }
.class-list li { padding:.5rem 0; border-bottom:1px solid #eee; }
.gallery-grid { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.gallery-grid figure { margin:0; width:200px; flex:0 0 200px; }
.gallery-grid img { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,.15); transition:transform .25s ease, box-shadow .25s ease; }
.gallery-grid figure:hover img, .gallery-grid figure:focus-within img { transform:scale(1.04); box-shadow:0 6px 16px rgba(0,0,0,.25); }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.lightbox[hidden] { display:none; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.92); }
.lightbox-content { position:relative; display:flex; flex-direction:column; align-items:center; max-width:90vw; max-height:90vh; }
.lightbox-img { max-width:90vw; max-height:82vh; object-fit:contain; border-radius:4px; opacity:0; transform:scale(.96); transition:opacity .3s ease, transform .3s ease; }
.lightbox-img--visible { opacity:1; transform:scale(1); }
.lightbox-counter { color:rgba(255,255,255,.7); font-size:.85rem; margin:.75rem 0 0; text-align:center; position:relative; }
.lightbox-close, .lightbox-prev, .lightbox-next { position:absolute; z-index:2; background:none; border:none; color:#fff; cursor:pointer; font-size:2rem; line-height:1; padding:.5rem; opacity:.7; transition:opacity .2s, transform .2s; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity:1; }
.lightbox-close { top:.75rem; right:1rem; font-size:2.5rem; }
.lightbox-prev { left:1rem; top:50%; transform:translateY(-50%); }
.lightbox-next { right:1rem; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover { transform:translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform:translateY(-50%) translateX(3px); }
@media(max-width:600px) {
  .lightbox-prev, .lightbox-next { font-size:1.5rem; }
  .lightbox-close { font-size:2rem; }
}
.contact-form { display:grid; gap:1rem; max-width:520px; }
.contact-form label { display:grid; font-size:.9rem; gap:.35rem; }
.contact-form input, .contact-form textarea { font:inherit; padding:.6rem .7rem; border:1px solid #bbb; border-radius:4px; }
.contact-form button { background:#44aa33; color:#fff; border:none; padding:.7rem 1.2rem; font:inherit; border-radius:4px; cursor:pointer; }
.contact-form button:hover { background:#2f7a24; }
@media (prefers-color-scheme: dark) {
  body { background:#0d0d0d; color:#ddd; }
  .site-footer { background:#181818; border-color:#333;}
  .social-links a { border-color:#444; background:rgba(255,255,255,.05); }
  .social-links a:hover { color:#111; }
  a { color:#44aa33; }
  .site-nav a { background:rgba(255,255,255,.08); }
  .site-nav a.active, .site-nav a:hover { background:#44aa33; color:#111; }
  .contact-form input, .contact-form textarea { background:#1e1e1e; color:#eee; border-color:#444; }
  .class-list li { border-color:#222; }
}