:root {
  --bg:#070707; --panel:#0d0d0d; --text:#f5f1ea; --muted:#9c9c9c; --line:#282828; --accent:#cbb99a;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
a { color:inherit; }
.site {
  width:min(1500px, 100%);
  margin:0 auto;
  padding:24px 34px 70px;
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:8px 0 22px; border-bottom:1px solid var(--line);
}
.brand {
  font-family:Georgia,serif; letter-spacing:5px; font-size:22px; white-space:nowrap;
}
.nav { display:flex; gap:24px; flex-wrap:wrap; }
.nav a {
  text-decoration:none; color:#aaa; font-size:12px; letter-spacing:2px;
}

.nav-dropdown {
  position:relative;
}
.nav-dropdown summary {
  list-style:none;
  cursor:pointer;
  color:#aaa;
  font-size:12px;
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:7px;
  transition:color .22s ease;
}
.nav-dropdown summary::after {
  content:"";
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-dropdown[open] summary {
  color:var(--text);
}
.nav-dropdown[open] summary::after {
  transform:rotate(225deg) translate(-1px,-1px);
}
.nav-dropdown summary::-webkit-details-marker { display:none; }
.dropdown-menu {
  position:absolute;
  top:24px;
  left:0;
  z-index:20;
  display:grid;
  gap:4px;
  min-width:180px;
  padding:10px;
  background:#0d0d0d;
  border:1px solid var(--line);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.985);
  transform-origin:top left;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .28s;
}
.nav-dropdown[open] .dropdown-menu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.dropdown-menu a {
  display:block;
  padding:10px 12px;
  white-space:nowrap;
  transform:translateX(0);
  transition:
    color .2s ease,
    background-color .2s ease,
    transform .22s ease;
}
.dropdown-menu a:hover {
  color:var(--text);
  background:#171717;
  transform:translateX(3px);
}
@media (prefers-reduced-motion:reduce) {
  .nav-dropdown summary,
  .nav-dropdown summary::after,
  .dropdown-menu,
  .dropdown-menu a {
    transition:none;
  }
}

.hero {
  margin-top:24px; min-height:660px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:58px;
  background:#111;
}
.hero img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.74));
}
.hero-content { position:relative; z-index:2; max-width:800px; }
.eyebrow { color:var(--accent); font-size:12px; letter-spacing:4px; margin-bottom:16px; }
h1,h2,h3 { font-family:Georgia,serif; font-weight:500; }
.hero h1 { font-size:78px; line-height:.95; margin:0; letter-spacing:3px; }
.hero p { color:#d0d0d0; line-height:1.8; font-size:16px; max-width:600px; }
.btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.btn {
  text-decoration:none; border:1px solid #ddd5ca; padding:13px 18px;
  font-size:12px; letter-spacing:2px;
}
.section { margin-top:90px; }
.section-head {
  display:flex; justify-content:space-between; align-items:end;
  gap:30px; margin-bottom:32px;
}
.section-head h2 { font-size:42px; letter-spacing:3px; margin:0; }
.section-head p { color:var(--muted); max-width:540px; line-height:1.75; margin:0; }
.grid {
  display:grid; grid-template-columns:1.25fr .95fr .95fr; gap:18px;
}
.card {
  min-height:430px; position:relative; overflow:hidden; background:#111;
}
.card.tall { min-height:570px; }
.card img {
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  transition:transform .65s ease, filter .65s ease;
}
.card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 48%, rgba(0,0,0,.75));
}
.card:hover img { transform:scale(1.035); filter:contrast(1.04); }
.caption { position:absolute; left:24px; bottom:24px; z-index:2; }
.caption h3 { margin:0; font-size:28px; }
.caption span { color:#c8c8c8; font-size:11px; letter-spacing:2px; display:block; margin-top:8px; }
.gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.gallery figure {
  margin:0;
  position:relative;
  overflow:hidden;
  background:#111;
  aspect-ratio:4/5;
}
.gallery figure img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .55s ease;
}
.gallery figure:hover img { transform:scale(1.025); }



.summer-page {
  padding-top:36px;
}
.summer-page-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.summer-page-grid figure {
  margin:0;
  overflow:hidden;
  background:#111;
  aspect-ratio:4/3;
}
.summer-page-grid img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s ease, filter .45s ease;
}
.summer-page-grid figure:hover img {
  transform:scale(1.025);
  filter:contrast(1.03);
}

.about {
  display:grid; grid-template-columns:1fr 1fr; gap:42px; border-top:1px solid var(--line); padding-top:42px;
}
.about .lead { font-family:Georgia,serif; font-size:31px; line-height:1.45; }
.about p { color:var(--muted); line-height:1.9; }

.contact {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:56px;
  align-items:center;
  padding-top:48px;
  border-top:1px solid var(--line);
}
.contact h2 {
  margin:0 0 16px;
  font-size:42px;
  letter-spacing:2px;
}
.contact-copy p {
  max-width:560px;
  color:var(--muted);
  line-height:1.8;
}
.contact-email {
  display:inline-block;
  margin-top:12px;
  color:var(--text);
  font-family:Georgia,serif;
  font-size:24px;
  text-underline-offset:6px;
}
.wechat-card {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:26px;
  align-items:center;
  padding:22px;
  background:#0b0b0b;
  border:1px solid var(--line);
  color:var(--text);
}
.wechat-qr {
  position:relative;
  width:150px;
  aspect-ratio:1;
  overflow:hidden;
  background:#fff;
}
.wechat-qr img {
  position:absolute;
  width:146.5%;
  max-width:none;
  height:auto;
  left:-23.6%;
  top:-51.5%;
  display:block;
}
.wechat-label {
  display:block;
  margin-bottom:10px;
  color:var(--accent);
  font-size:10px;
  letter-spacing:3px;
}
.wechat-copy strong {
  display:block;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:500;
  letter-spacing:.4px;
}
.wechat-copy p {
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.4px;
}

.footer {
  margin-top:100px; padding-top:34px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  color:#777; font-size:12px; letter-spacing:1.5px;
}
.lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.95); display:none;
  align-items:center; justify-content:center; z-index:1000; padding:30px;
}
.lightbox.open { display:flex; }
.lightbox img { max-width:94vw; max-height:90vh; object-fit:contain; }
.lightbox button {
  position:absolute; top:18px; right:22px; background:transparent; color:#fff;
  border:1px solid #555; width:44px; height:44px; font-size:24px; cursor:pointer;
}
.clickable { cursor:zoom-in; }
@media (max-width:900px) {
  .contact { grid-template-columns:1fr; }
  .wechat-card { max-width:480px; }
  .grid { grid-template-columns:1fr 1fr; }
  .grid .card:first-child { grid-column:1/-1; }
  .about { grid-template-columns:1fr; }
  .hero h1 { font-size:58px; }
  .hero { min-height:560px; padding:38px; }
}
@media (max-width:640px) {
  .contact { gap:30px; }
  .contact h2 { font-size:34px; }
  .contact-email { font-size:19px; }
  .wechat-card { grid-template-columns:104px 1fr; padding:14px; gap:16px; }
  .wechat-qr { width:104px; }
  .wechat-copy strong { font-size:20px; }
  .wechat-copy p { font-size:11px; }
  .summer-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .site { padding:18px 16px 45px; }
  .topbar { align-items:flex-start; }
  .nav { gap:12px; }
  .hero { min-height:480px; padding:24px; }
  .hero h1 { font-size:42px; }
  .section { margin-top:62px; }
  .section-head { display:block; }
  .section-head p { margin-top:12px; }
  .section-head h2 { font-size:34px; }
  .grid { grid-template-columns:1fr; }
  .grid .card:first-child { grid-column:auto; }
  .card,.card.tall { min-height:420px; }
  .gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .gallery figure { aspect-ratio:4/3; }
}
