:root { --ink:#070908; --ivory:#f1ede3; --muted:#aaa69e; --gold:#d7a443; --line:rgba(215,164,67,.25); }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--ivory); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
header { min-height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 4.5vw; border-bottom:1px solid var(--line); }
.brand { color:var(--gold); font-family:Georgia,serif; font-size:28px; letter-spacing:.16em; }
.brand span { letter-spacing:.03em; }
.back { color:#b9b5ac; font-size:13px; }
.gallery-hero { padding:100px max(5vw,30px) 80px; background:radial-gradient(circle at 80% 20%,#27322f,#0a0d0c 45%); }
.eyebrow { color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
h1,h2 { font-family:Georgia,serif; font-weight:400; }
h1 { margin:20px 0 30px; font-size:clamp(58px,8vw,120px); line-height:.88; letter-spacing:-.045em; text-transform:uppercase; }
h1 em { color:var(--gold); font-style:normal; }
.intro { max-width:760px; color:#b8b4aa; font-size:19px; line-height:1.7; }
.rule { width:100%; height:1px; margin:50px 0 18px; background:var(--line); }
.count { color:#77746e; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:1px; background:rgba(255,255,255,.1); }
figure { margin:0; min-width:0; background:#0c0f0e; }
figure button { width:100%; padding:0; overflow:hidden; border:0; background:#111; cursor:zoom-in; }
figure img { width:100%; height:auto; aspect-ratio:364.252/562.394; object-fit:cover; transition:transform .45s,opacity .45s; }
figure button:hover img { transform:scale(1.025); opacity:.9; }
figcaption { min-height:76px; display:flex; gap:16px; align-items:center; padding:18px 22px; color:#d1cdc4; font-family:Georgia,serif; font-size:17px; }
figcaption span { color:var(--gold); font-family:Arial,sans-serif; font-size:10px; letter-spacing:.18em; }
.gallery-close { padding:130px 8vw; text-align:center; background:radial-gradient(circle at 50% 120%,#4a3416,#080a09 55%); }
.gallery-close h2 { margin:22px auto 42px; font-size:clamp(42px,5.5vw,78px); line-height:1.03; }
.gallery-close a { display:inline-block; padding:18px 24px; background:var(--gold); color:#090a09; font-weight:700; }
footer { display:grid; grid-template-columns:1fr auto auto; gap:35px; align-items:center; padding:45px 5vw; border-top:1px solid var(--line); }
footer p { margin:0; color:#77746e; font-size:12px; }
dialog { width:100vw; max-width:none; height:100vh; max-height:none; padding:50px; border:0; background:rgba(3,4,4,.96); }
dialog::backdrop { background:rgba(0,0,0,.9); }
dialog img { width:100%; height:100%; object-fit:contain; }
.close { position:fixed; z-index:2; top:18px; right:25px; border:0; background:transparent; color:var(--gold); font-size:42px; cursor:pointer; }
@media(max-width:900px){
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  figure button { height:430px; }
  footer { grid-template-columns:1fr; gap:14px; }
}
@media(max-width:560px){
  header { min-height:70px; }
  .brand { font-size:22px; }
  .gallery-hero { padding-top:75px; }
  .gallery { grid-template-columns:1fr; }
  figure button { height:auto; max-height:none; }
  figure img { height:auto; object-fit:cover; }
  dialog { padding:45px 8px 12px; }
}