:root{
  --bg:#b7bcc1;
  --panel:rgba(242,244,245,.78);
  --ink:#1c2329;
  --muted:#4f5961;
  --line:rgba(33,42,50,.18);
  --gold:#9b7a3d;
  --titanium:#b7bcc1;
  --titanium-dark:#747d85;
  --titanium-light:#eef0f1;
  --shadow: 0 30px 80px rgba(26,34,40,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(135deg,var(--titanium-light),var(--titanium) 45%,var(--titanium-dark));
  color:var(--ink);
  font-family:"Noto Serif JP", serif;
  line-height:1.8;
  letter-spacing:.04em;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  background:linear-gradient(to bottom,rgba(238,240,241,.88),rgba(238,240,241,.20),transparent);
  transition:.35s ease;
}
.site-header.scrolled{
  background:rgba(226,229,231,.88);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:"Cormorant Garamond", serif;
  letter-spacing:.16em;
  font-size:20px;
}
.brand-mark{color:var(--gold);font-size:18px}
.site-nav{display:flex;gap:30px;font-family:"Cormorant Garamond", serif;font-size:18px;letter-spacing:.08em}
.site-nav a{opacity:.78;transition:.2s}
.site-nav a:hover{opacity:1;color:var(--gold)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:8px 12px;border-radius:999px}

.hero{
  min-height:100svh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.40), transparent 30%),
    linear-gradient(135deg, rgba(239,241,242,.94), rgba(183,188,193,.92) 48%, rgba(112,121,130,.92)),
    url("astra-logo.jpg") center/cover no-repeat;
}
.hero:before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.58), rgba(255,255,255,.06) 36%, rgba(42,50,57,.18) 72%),
    linear-gradient(to bottom,rgba(245,247,248,.12),rgba(179,185,190,.70));
}
.hero:after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,42,50,.08) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom, transparent, black 20%, black 78%, transparent);
}
.hero-inner{
  position:relative; z-index:2;
  width:min(1060px, 90vw);
  text-align:center;
  padding:120px 0 80px;
}
.hero-logo-wrap{
  width:min(320px,58vw);
  margin:0 auto 28px;
  padding:18px;
  border:1px solid var(--line);
  background:rgba(235,238,239,.68);
  box-shadow:var(--shadow);
}
.hero-logo{display:block;width:100%;height:auto;filter:contrast(1.05)}
.eyebrow,.section-kicker,.category{
  font-family:"Cormorant Garamond", serif;
  color:var(--gold);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero h1{
  margin:0;
  font-size:clamp(34px,6vw,76px);
  line-height:1.28;
  font-weight:500;
  text-shadow:0 8px 30px rgba(255,255,255,.42);
}
.lead{
  max-width:760px;
  margin:28px auto 0;
  color:var(--muted);
  font-size:clamp(15px,2vw,18px);
}
.hero-actions{display:flex;justify-content:center;gap:16px;margin-top:38px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid var(--line);
  transition:.25s ease;
}
.btn.primary{background:linear-gradient(135deg,#d8c18d,#9b7a3d);color:#1c2329;border-color:rgba(155,122,61,.7);font-weight:600}
.btn.secondary{background:rgba(255,255,255,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(26,34,40,.20)}
.scroll-cue{
  position:absolute;z-index:2;bottom:28px;left:50%;transform:translateX(-50%);
  font-family:"Cormorant Garamond", serif;color:var(--muted);font-size:15px;letter-spacing:.18em;
}

.section{
  padding:110px clamp(20px,6vw,84px);
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:42px;
}
h2{
  margin:.15em 0 0;
  font-size:clamp(30px,4.5vw,58px);
  line-height:1.35;
  font-weight:500;
}
.two-column{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(30px,7vw,90px);
  max-width:1180px;
  margin:auto;
}
.text-block{
  color:var(--muted);
  font-size:17px;
}
.text-block p{margin-top:0}
.intro{
  background:linear-gradient(180deg,#d5d9dc,#aeb5ba);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.restaurant-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.restaurant-card{
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(211,216,219,.58));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:620px;
  display:flex;
  flex-direction:column;
}
.card-image{
  height:300px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.card-image:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(60,70,78,.36));
}
.sushi .card-image{
  background:
    radial-gradient(circle at 35% 45%, rgba(255,255,255,.34), transparent 18%),
    linear-gradient(135deg,#e3e6e8,#8d969e 70%);
}
.teppan .card-image{
  background:
    radial-gradient(circle at 50% 55%, rgba(196,100,45,.22), transparent 24%),
    linear-gradient(135deg,#d7dadc,#858d94 70%);
}
.bar .card-image{
  background:
    radial-gradient(circle at 60% 35%, rgba(155,122,61,.22), transparent 22%),
    linear-gradient(135deg,#e1e4e6,#79828b 70%);
}
.card-content{padding:32px;display:flex;flex-direction:column;flex:1}
.category{margin:0 0 8px}
.card-content h3{
  margin:0 0 16px;
  font-size:clamp(25px,3vw,34px);
  font-weight:500;
}
.card-content p:not(.category){color:var(--muted);margin-top:0}
.text-link{margin-top:auto;color:var(--gold);font-size:14px;letter-spacing:.12em}
.text-link:after{content:" →"}

.membership{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.42), transparent 36%),
    linear-gradient(135deg,#eef0f1,#b7bcc1 55%,#7e8790);
}
.membership-box{
  max-width:900px;
  margin:auto;
  text-align:center;
  border:1px solid var(--line);
  padding:clamp(36px,7vw,74px);
  background:rgba(255,255,255,.50);
  box-shadow:var(--shadow);
}
.membership-box p{color:var(--muted);font-size:17px}

.access-card{
  max-width:1120px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.access-card > div:first-child{padding:clamp(32px,6vw,64px)}
.access-card h3{font-family:"Cormorant Garamond", serif;font-size:38px;letter-spacing:.14em;margin:0 0 18px}
.note,.small{color:var(--muted);font-size:13px}
.map-embed{
  min-height:360px;
  background:#d6dadd;
}
.map-embed iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  filter:grayscale(.18) contrast(1.03);
}
.contact{
  text-align:center;
  background:linear-gradient(180deg,#c8cdd1,#a9b0b6);
}
.contact-inner{max-width:760px;margin:auto}
.contact p{color:var(--muted)}
.site-footer{
  padding:42px clamp(20px,5vw,64px);
  border-top:1px solid var(--line);
  background:#a9b0b6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}
.footer-brand{
  font-family:"Cormorant Garamond", serif;
  color:var(--ink);
  font-size:24px;
  letter-spacing:.16em;
}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width: 900px){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;
    top:74px; right:20px;
    width:220px;
    display:none;
    flex-direction:column;
    gap:0;
    background:rgba(238,240,241,.96);
    border:1px solid var(--line);
    padding:10px;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px}
  .two-column,.access-card{grid-template-columns:1fr}
  .restaurant-grid{grid-template-columns:1fr}
  .restaurant-card{min-height:auto}
  .section{padding:84px 22px}
  .section-head{display:block}
}