:root{
  --bg:#0a080a;
  --panel:#121013;
  --panel-2:#171117;
  --gold:#d7ad54;
  --gold-soft:#f0ce7a;
  --ivory:#f4efe8;
  --muted:#aaa2a8;
  --line:rgba(215,173,84,.22);
  --burgundy:#4a1728;
  --serif:"Fraunces",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:
    radial-gradient(circle at 85% 10%,rgba(82,20,45,.18),transparent 27%),
    linear-gradient(180deg,#0b090b 0%,#0a080a 100%);
  color:var(--ivory);
  font-family:var(--sans);
}
img{display:block;width:100%}
a{color:inherit}
button,a{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:1.2fr auto 1.05fr;
  align-items:center;
  gap:28px;
  padding:22px clamp(24px,4vw,64px);
  background:rgba(10,8,10,.9);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none}
.avatar{
  width:54px;height:54px;border-radius:50%;object-fit:cover;
  border:1px solid var(--gold);box-shadow:0 0 0 5px rgba(215,173,84,.06)
}
.brand strong{display:block;font-family:var(--serif);font-size:2rem;font-weight:500;color:var(--gold-soft);line-height:1}
.brand small{display:block;margin-top:8px;color:var(--muted);font-family:var(--serif);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.55}
.site-nav{display:flex;gap:34px}
.site-nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:.74rem;color:#d6cfd4}
.header-location{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding-left:28px;border-left:1px solid rgba(255,255,255,.07)}
.header-location strong,.header-location small{display:block}
.header-location strong{font-size:.75rem;color:var(--gold-soft)}
.header-location small{margin-top:4px;color:var(--muted);font-size:.74rem}
.header-location time{font-family:var(--serif);font-size:1.05rem;color:var(--gold-soft)}
.pin{color:#c06a8e}
.menu-button{display:none}

.mobile-hero{
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mobile-hero img{position:absolute;inset:0;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.15) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.56))}
.hero-copy{
  position:relative;
  z-index:2;
  max-width:700px;
  padding:120px clamp(24px,5vw,68px) 60px;
}
.eyebrow,.section-kicker,.dialog-meta{
  margin:0 0 16px;
  color:var(--gold-soft);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:600;
}
.hero-copy h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.6rem,7vw,7rem);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.035em;
}
.gold-rule{width:78px;height:2px;background:var(--gold);margin:30px 0}
.hero-time{margin:0;color:var(--ivory);line-height:1.7}
.hero-time small{color:var(--muted);letter-spacing:.12em}

.mosaic-shell{padding:14px clamp(18px,3vw,46px) 26px}
.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:dense;
  gap:12px;
}
.card{
  position:relative;
  overflow:hidden;
  min-height:280px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  color:var(--ivory);
  cursor:pointer;
  text-align:left;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px);border-color:rgba(215,173,84,.5);box-shadow:0 15px 40px rgba(0,0,0,.28)}
.card img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover img{transform:scale(1.025)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(0,0,0,.84))}
.card-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:18px}
.card-kicker{display:block;color:var(--gold-soft);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.card-title{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.02}
.card-date{display:block;margin-top:8px;color:#c0b8be;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.card.hero{grid-column:span 5;grid-row:span 2;min-height:530px}
.card.wide{grid-column:span 4;min-height:290px}
.card.medium{grid-column:span 3;min-height:290px}
.card.tall{grid-column:span 3;grid-row:span 2;min-height:530px}
.card.small{grid-column:span 2;min-height:230px}
.card.quote{
  grid-column:span 3;
  min-height:290px;
  padding:28px;
  background:linear-gradient(145deg,#3d1423,#1d1018);
  cursor:default
}
.card.quote::after{display:none}
.quote-mark{font-family:var(--serif);font-size:3rem;color:var(--gold-soft);line-height:1}
.card.quote blockquote{margin:18px 0 0;font-family:var(--serif);font-size:1.75rem;line-height:1.2}
.card.quote cite{display:block;margin-top:28px;color:var(--gold-soft);font-style:normal;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}

.stats-strip{
  margin:0 clamp(18px,3vw,46px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(17,14,17,.9);
  overflow:hidden;
}
.stats-strip div{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  padding:22px 20px;
  border-right:1px solid rgba(255,255,255,.06)
}
.stats-strip div:last-child{border-right:0}
.stat-icon{grid-row:1/3;color:var(--gold);font-size:1.7rem}
.stats-strip strong{font-family:var(--serif);font-size:1.75rem;color:var(--gold-soft);line-height:1}
.stats-strip small{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.66rem}

.journeys,.about{padding:90px clamp(22px,5vw,74px)}
.journey-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.journey-grid article{
  padding:38px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#171117,#0f0d10)
}
.journey-grid span{color:var(--gold-soft);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.journey-grid h2,.about h2{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.8rem);line-height:1;margin:16px 0}
.journey-grid p,.about p:last-child{color:var(--muted);max-width:700px}
.about{padding-bottom:140px}

.mobile-tabbar{display:none}

dialog{
  width:min(980px,calc(100% - 24px));
  max-height:calc(100vh - 24px);
  padding:0;border:1px solid var(--line);border-radius:22px;
  background:#0f0d10;color:var(--ivory);box-shadow:0 28px 90px rgba(0,0,0,.6);overflow:auto
}
dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}
.dialog-close{
  position:absolute;z-index:4;top:14px;right:14px;width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:50%;
  background:rgba(10,8,10,.78);color:white;font-size:1.5rem;cursor:pointer
}
.dialog-media img{max-height:68vh;object-fit:cover}
.dialog-copy{padding:34px}
.dialog-copy h2{font-family:var(--serif);font-size:clamp(2.5rem,6vw,5rem);line-height:1;margin:0}
.dialog-caption{color:var(--muted);font-size:1.05rem;max-width:720px}

@media(max-width:980px){
  .site-header{grid-template-columns:1fr auto}
  .site-nav,.header-location{display:none}
  .menu-button{display:grid;gap:5px;width:44px;height:44px;padding:10px;border:0;background:transparent}
  .menu-button span:not(.sr-only){height:2px;background:var(--gold);border-radius:2px}
  .site-nav.open{position:fixed;display:flex;top:99px;left:0;right:0;flex-direction:column;padding:28px;background:#0d0a0d;border-bottom:1px solid var(--line)}
  .card.hero{grid-column:span 6}
  .card.wide{grid-column:span 6}
  .card.medium,.card.tall,.card.quote{grid-column:span 6}
  .card.small{grid-column:span 3}
}

@media(max-width:680px){
  body{padding-bottom:88px}
  .site-header{
    position:relative;
    padding:18px 24px;
    background:#0b090b;
  }
  .avatar{width:58px;height:58px}
  .brand strong{font-size:2.25rem}
  .brand small{font-size:.68rem;line-height:1.5}
  .mobile-hero{min-height:390px}
  .hero-copy{padding:92px 32px 34px}
  .hero-copy h1{font-size:clamp(3rem,13vw,4.4rem)}
  .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18)),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72))}
  .mosaic-shell{padding:12px 14px 18px}
  .mosaic{grid-template-columns:repeat(6,1fr);gap:10px}
  .card{border-radius:14px}
  .card.hero{display:none}
  .card.wide{grid-column:span 4;min-height:245px}
  .card.medium{grid-column:span 2;min-height:245px}
  .card.tall{grid-column:span 3;grid-row:span 2;min-height:430px}
  .card.small{grid-column:span 3;min-height:210px}
  .card.quote{grid-column:span 2;min-height:300px;padding:20px}
  .card.quote blockquote{font-size:1.35rem}
  .card-title{font-size:1.28rem}
  .card-copy{padding:13px}
  .stats-strip{
    margin:0 14px;
    overflow-x:auto;
    grid-template-columns:repeat(5,minmax(125px,1fr));
    scrollbar-width:none
  }
  .stats-strip::-webkit-scrollbar{display:none}
  .stats-strip div{padding:17px 14px}
  .journeys,.about{padding:70px 20px}
  .journey-grid{grid-template-columns:1fr}
  .mobile-tabbar{
    position:fixed;
    z-index:40;
    left:0;right:0;bottom:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,8,10,.95);
    border-top:1px solid var(--line);
    backdrop-filter:blur(18px)
  }
  .mobile-tabbar a{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;color:#888187
  }
  .mobile-tabbar span{font-size:1.45rem;line-height:1}
  .mobile-tabbar a.active{color:var(--gold-soft)}
}

@media(max-width:430px){
  .brand small{display:none}
  .brand strong{font-size:2rem}
  .mosaic{grid-template-columns:repeat(6,1fr)}
  .card.wide{grid-column:span 4}
  .card.medium{grid-column:span 2}
  .card.quote{grid-column:span 2}
  .card.tall{grid-column:span 3}
  .card.small{grid-column:span 3}
}

.moments-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  padding:22px 4px 26px;
}
.moments-heading h2{
  margin:0;
  max-width:620px;
  font-family:var(--serif);
  font-size:clamp(2.3rem,5vw,4.7rem);
  line-height:.95;
  font-weight:500;
  letter-spacing:-.035em;
}
.avatar{object-position:center 28%}
@media(max-width:680px){
  .moments-heading{display:block;padding:18px 4px 22px}
  .moments-heading h2{font-size:2.25rem}
}