:root{
  --bg:#06100f;
  --gold:#d8ca98;
  --gold2:#eee4b9;
  --cream:#f4f0df;
  --muted:#9ca8a2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--cream);
  background:
    radial-gradient(circle at 39% 40%,rgba(46,79,68,.14),transparent 34rem),
    radial-gradient(circle at 87% 31%,rgba(101,79,29,.06),transparent 25rem),
    var(--bg);
  font-family:Inter,system-ui,sans-serif;
}
a{color:inherit;text-decoration:none}
.topbar{
  min-height:78px;
  padding:0 clamp(22px,4.7vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(6,16,15,.94);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:13px}
.seal{
  width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);
  font:600 22px "Cormorant Garamond",serif;
  box-shadow:0 0 20px rgba(216,202,152,.08)
}
.brand-copy strong{
  display:block;
  font:600 19px "Cormorant Garamond",serif;
  letter-spacing:.055em
}
.brand-copy small{
  display:block;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.34em;
  margin-top:1px
}
.topbar nav{
  display:flex;
  gap:36px;
  color:#bec6c1;
  font-size:10px;
  letter-spacing:.17em
}
.topbar nav a:hover{color:var(--gold2)}
.top-cta{
  border:1px solid rgba(216,202,152,.5);
  color:var(--gold2);
  padding:13px 18px;
  font-size:9px;
  letter-spacing:.16em
}
.hero-art{
  position:relative;
  width:100%;
  min-height:760px;
  overflow:hidden;
  background:#06100f;
}
.hero-art img{
  display:block;
  width:100%;
  height:100%;
  min-height:760px;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.93) contrast(1.02);
}
.hero-art:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,16,15,.05),rgba(6,16,15,.02) 60%,rgba(6,16,15,.16)),
    radial-gradient(circle at 50% 45%,transparent 56%,rgba(6,16,15,.12) 100%);
}
.hotspot{
  position:absolute;
  z-index:4;
  border-radius:50%;
  outline:none;
}
.hotspot:hover{
  box-shadow:0 0 38px rgba(216,202,152,.18);
}
.meeting{left:34.5%;top:33%;width:18%;aspect-ratio:1}
.discussions{left:34%;top:12%;width:18%;height:15%}
.sprints{left:20%;top:28%;width:18%;height:18%}
.intersections{left:54%;top:28%;width:18%;height:18%}
.archive{left:36%;top:69%;width:15%;height:14%}
.future{left:55%;top:63%;width:18%;height:16%}
.book{right:6%;top:14%;width:20%;height:65%;border-radius:0}
.quiet-cards{
  max-width:1440px;
  margin:0 auto;
  padding:20px clamp(22px,4.7vw,72px) 64px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.quiet-card{
  min-height:126px;
  padding:22px 23px;
  border:1px solid rgba(216,202,152,.14);
  background:
    linear-gradient(180deg,rgba(13,27,25,.46),rgba(7,16,15,.60));
  position:relative;
  transition:.22s ease;
  box-shadow:inset 0 1px rgba(255,255,255,.018)
}
.quiet-card:hover{
  border-color:rgba(216,202,152,.32);
  background:rgba(18,33,30,.58);
  transform:translateY(-2px)
}
.card-label{
  display:block;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.18em;
  margin-bottom:17px
}
.quiet-card strong{
  display:block;
  max-width:220px;
  color:#c2c8c3;
  font-size:12px;
  line-height:1.65;
  font-weight:400
}
.quiet-card b{
  position:absolute;
  right:20px;
  bottom:18px;
  color:var(--gold);
  font-size:18px;
  font-weight:400
}
footer{
  max-width:1440px;
  margin:auto;
  padding:40px clamp(22px,4.7vw,72px);
  border-top:1px solid rgba(216,202,152,.09);
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  color:var(--muted)
}
footer strong{
  color:var(--gold2);
  font:600 18px "Cormorant Garamond",serif;
  letter-spacing:.06em
}
footer p{font-size:11px}
.footer-imprint{
  color:var(--gold);
  font:600 16px "Cormorant Garamond",serif;
  letter-spacing:.18em
}
.copyright{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,.045);
  padding-top:17px;
  font-size:9px
}
@media(max-width:1100px){
  .topbar nav{display:none}
  .hero-art,.hero-art img{min-height:640px}
  .quiet-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .topbar{padding-inline:17px}
  .top-cta{display:none}
  .brand-copy strong{font-size:15px}
  .hero-art,.hero-art img{min-height:520px}
  .hero-art img{object-position:43% top}
  .book{right:0;width:28%}
  .quiet-cards{grid-template-columns:1fr;padding-inline:18px}
  footer{grid-template-columns:1fr;padding-inline:18px}
}