
:root{
  --gray-50:#f6f6f6;--gray-100:#eee;--gray-200:#ddd;--gray-700:#333;
  --sand-100:#FAF6EE;--sand-200:#F5ECDE;--sand-500:#9D8A79;--sand-600:#876B58;
  --text:var(--gray-700);--text-subtle:rgba(0,0,0,.55);--accent:var(--sand-500);
  --surface:#fff;--surface-subtle:var(--gray-50);--bg-hero:var(--sand-200);
  --backdrop:rgba(255,255,255,.75);
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--surface);line-height:1.6}
a{color:inherit}
.container{width:calc(100vw - 32px);max-width:1140px;margin:0 auto}
.hero{background:var(--bg-hero);padding:48px 0 32px}
.profile-position{margin:0 0 8px;color:var(--text-subtle)}
.profile-name{margin:0;font-size:36px;line-height:1.15;color:var(--accent)}
.profile-description{margin:16px 0 0;max-width:36em;font-size:14px}
.gallery{display:grid;gap:12px;margin:24px auto 64px}
.gallery-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.gallery-nav a{display:block;padding:4px 12px;border-radius:1000px;text-decoration:none;font-size:14px;background:var(--surface-subtle)}
.gallery-nav a.is-current{background:var(--accent);color:#fff}
.layout-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.post{display:block;overflow:hidden;position:relative;aspect-ratio:1;background:var(--surface-subtle)}
.post[hidden]{display:none}
.post-thumbnail{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .3s ease}
.post:hover .post-thumbnail{transform:scale(1.05)}
@media(min-width:768px){
  .container{width:calc(100vw - 64px)}
  .gallery{grid-template-columns:1fr 4fr;gap:20px;margin-top:36px}
  .gallery-nav ul{display:block}.gallery-nav li{margin-bottom:4px}
  .layout-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
.work{width:calc(100vw - 32px);max-width:992px;margin:24px auto 64px}
.work-title{margin:8px 0 4px;font-size:24px}
.work-category{margin:0 0 16px;color:var(--text-subtle);font-size:14px}
.work-images img{display:block;width:100%;height:auto;margin-bottom:12px}
.work-pager{display:flex;justify-content:space-between;margin-top:24px}
.modal{position:fixed;inset:0;z-index:10;overflow-y:auto;background:var(--backdrop);backdrop-filter:blur(10px)}
.modal[hidden]{display:none}
.modal-panel{position:relative;max-width:992px;margin:24px auto;background:var(--surface);border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);padding:16px}
.modal-bar{display:flex;justify-content:space-between;gap:8px}
.modal button{font:inherit;border:0;border-radius:8px;padding:6px 14px;background:var(--surface-subtle);cursor:pointer}
.modal .work{width:auto;margin:0}
