:root{
  --bg:#08090a; --bg2:#0e1012; --line:#1c1f22; --ink:#e9e9ea; --dim:#9aa0a6; --acc:#c8a24a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;letter-spacing:.01em;line-height:1.2;margin:0 0 .5em}
h1,h2{font-family:Georgia,"Times New Roman",serif}
p{margin:0 0 1em}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 28px;background:rgba(8,9,10,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.brand img{height:49px;width:auto}
.top nav{display:flex;gap:26px;flex-wrap:wrap}
.top nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:4px 0;border-bottom:1px solid transparent;transition:.2s}
.top nav a:hover{color:var(--ink);border-color:var(--acc)}

/* hero */
.hero{min-height:78vh;display:flex;align-items:center;background-size:cover;background-position:center;
  position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.86));z-index:-1}
.hinner{max-width:960px;margin:0 auto;padding:80px 28px;text-align:center}
.hinner h1{font-size:clamp(30px,5vw,58px);margin-bottom:.35em}
.hinner p{color:#cfd2d6;font-size:clamp(15px,1.6vw,19px);margin-bottom:2em;letter-spacing:.02em}

/* buttons */
.btn{display:inline-block;padding:13px 28px;border:1px solid var(--acc);color:#fff;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;margin:0 6px;transition:.2s;background:transparent}
.btn:hover{background:var(--acc);color:#0a0a0a}
.btn.ghost{border-color:#3a3f44;color:var(--dim)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}

/* layout */
.wrap{max-width:1240px;margin:0 auto;padding:74px 28px}
.sec{font-size:clamp(24px,3vw,38px);text-align:center;margin-bottom:44px}
.sec::after{content:"";display:block;width:52px;height:1px;background:var(--acc);margin:18px auto 0}
.center{text-align:center;margin-top:40px}
.sub{text-align:center;color:var(--dim);margin:-24px 0 42px;font-size:14px;letter-spacing:.04em}
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.crumb a:hover{color:var(--ink)}

/* services */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.three article{background:var(--bg2);padding:34px 30px}
.three h3{font-size:20px;margin-bottom:.6em}
.three p{color:var(--dim);font-size:15px}
.more{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid transparent}
.more:hover{border-color:var(--acc)}

/* album cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:26px}
.card{display:block;background:var(--bg2);border:1px solid var(--line);overflow:hidden;transition:.25s}
.card:hover{border-color:#33383d;transform:translateY(-2px)}
.card .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:#111}
.card .ph.empty{background:#101214}
.card .ph.cover{display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 30% 20%,#1b1e22,#0a0b0d 70%);position:relative;overflow:hidden}
.card .ph.cover::after{content:"";position:absolute;inset:14px;border:1px solid rgba(200,162,74,.25)}
.card .ph.cover span{font-family:Georgia,serif;font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:#c8a24a;opacity:.72}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .ph img{transform:scale(1.04)}
.card .cap{display:block;padding:16px 18px}
.card .cap b{display:block;font-weight:400;font-size:16px;letter-spacing:.01em}
.card .cap i{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px}

/* chips */
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.chip{background:transparent;border:1px solid var(--line);color:var(--dim);padding:9px 20px;cursor:pointer;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-family:inherit;transition:.2s}
.chip:hover{color:var(--ink);border-color:#3a3f44}
.chip.on{color:#0a0a0a;background:var(--acc);border-color:var(--acc)}

/* photo grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.grid a{display:block;aspect-ratio:1;overflow:hidden;background:#111}
.grid img{width:100%;height:100%;object-fit:cover;transition:.45s;opacity:.94}
.grid a:hover img{opacity:1;transform:scale(1.05)}

/* lightbox */
#lb{position:fixed;inset:0;background:rgba(4,5,6,.96);display:none;align-items:center;justify-content:center;z-index:99}
#lb.on{display:flex}
#lb img{max-width:92vw;max-height:90vh;width:auto;object-fit:contain}
#lb span{position:absolute;top:50%;transform:translateY(-50%);font-size:42px;color:#8e949a;cursor:pointer;
  padding:18px;user-select:none;line-height:1}
#lb span:hover{color:#fff}
#lb .pv{left:8px} #lb .nx{right:8px}

/* text pages */
.txt{max-width:760px}
.txt p{color:#c6c9cd}
.txt h2{font-size:24px;margin-top:1.8em}
.txt h1.sec{text-align:left}
.txt h1.sec::after{margin:18px 0 0}
.cinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin:34px 0}
.cinfo p{color:var(--dim);font-size:15px;margin:0}
.cinfo b{color:var(--ink);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:8px}
.cinfo a:hover{color:var(--acc)}

/* quote */
.quote{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:70px 28px;text-align:center}
.quote blockquote{margin:0 auto;max-width:760px;font-family:Georgia,serif;font-size:clamp(19px,2.4vw,27px);
  line-height:1.5;color:#e6e7e8}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* post */
.post{max-width:820px}
.post .body img{margin:26px 0}
.post .body p{color:#c6c9cd}

/* footer */
footer{border-top:1px solid var(--line);background:#050607;padding:58px 28px 26px;margin-top:20px}
.fwrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.fwrap strong{font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.fwrap p{color:var(--dim);font-size:14px;margin:12px 0 0}
.fwrap a:hover{color:var(--ink)}
.fbot{max-width:1240px;margin:44px auto 0;padding-top:20px;border-top:1px solid #121517;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5f6469}

@media(max-width:760px){
  .top{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 18px}
  .top nav{gap:14px}
  .top nav a{font-size:10px;letter-spacing:.12em}
  .wrap{padding:52px 18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
  .hero{min-height:66vh}
}