/* ============================================================
   心斎橋シーシャ BLOOM — style.css
   Palette: grey × gold lounge, medium tone (not heavy club dark)
   ============================================================ */

:root{
  /* --- colors (spec) --- */
  --deep-ash:      #1C1C22;
  --warm-charcoal: #262428;
  --stone-beige:   #D8D3C9;
  --gold:          #C9A45C;
  --gold-bright:   #E5C278;
  --terracotta:    #A9543B;
  --off-white:     #F4F1EA;
  --warm-grey:     #A9A49C;
  --dark-earth:    #2E2A26;
  --plum:          #3A2C3A;
  --rule:          rgba(201,164,92,0.15);

  /* --- type --- */
  --serif-jp: "Shippori Mincho", "Noto Serif JP", serif;
  --serif-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --sans:     "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", -apple-system,
              BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  /* matches the real backlit wall sign: bold geometric sans, lowercase */
  --wordmark-font: "Poppins", "Noto Sans JP", sans-serif;

  --header-h: 66px;
  --wrap: 1120px;
}

/* language-specific heading font fallbacks (keeps glyphs from breaking) */
html[lang="ko"]{ --serif-jp: "Noto Sans KR", sans-serif; }
html[lang="zh"]{ --serif-jp: "Noto Sans SC", sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }

body{
  margin:0;
  background:var(--warm-charcoal);
  color:var(--off-white);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,iframe{ max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--deep-ash); padding:10px 16px;
}
.skip-link:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(28,28,34,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--rule);
}
.header-inner{
  max-width:var(--wrap); height:100%; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:20px;
}

.wordmark{
  font-family:var(--wordmark-font);
  font-size:23px; font-weight:700; letter-spacing:-.01em;
  color:var(--off-white); line-height:1;
  flex:0 0 auto;
}
.wordmark-lg{ font-size:36px; color:var(--gold); }

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  font-size:13.5px; letter-spacing:.06em; color:var(--off-white);
  position:relative; padding:6px 0; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s ease;
}
.nav a:hover::after{ width:100%; }

.header-right{ display:flex; align-items:center; gap:14px; }

/* open badge */
.open-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; letter-spacing:.1em; color:var(--gold-bright);
  border:1px solid var(--rule); border-radius:100px; padding:5px 12px;
  white-space:nowrap;
}
.open-badge.closed{ color:var(--warm-grey); }
.open-badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-bright); animation:pulse 1.8s ease-in-out infinite;
}
.open-badge.closed .dot{ background:var(--warm-grey); animation:none; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.82)} }

/* language switch */
.lang{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--rule); border-radius:4px;
  color:var(--off-white); font-family:var(--sans); font-size:12.5px;
  padding:6px 10px; cursor:pointer; white-space:nowrap;
  transition:border-color .25s, color .25s;
}
.lang-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  list-style:none; margin:0; padding:6px;
  background:rgba(28,28,34,.97);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--rule); border-radius:6px;
  min-width:132px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s, transform .22s, visibility .22s;
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--off-white); font-family:var(--sans); font-size:13px;
  padding:9px 12px; border-radius:4px;
}
.lang-menu button:hover,.lang-menu button[aria-current="true"]{
  background:rgba(201,164,92,.12); color:var(--gold-bright);
}

.ig-icon{ color:var(--off-white); display:flex; transition:color .25s; }
.ig-icon:hover{ color:var(--gold-bright); }

.burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:6px;
}
.burger span{
  display:block; width:22px; height:1.5px; background:var(--off-white);
  transition:transform .3s, opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) 20px 80px;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }

.hero-img{
  position:absolute; inset:0;
  background-image:
    radial-gradient(60% 45% at 70% 30%, rgba(201,164,92,.16), transparent 70%),
    url("images/hero.jpg");
  background-size:cover; background-position:center 38%;
}
/* Mobile gets its own crop of the room (portrait-shot, framed for a
   narrow viewport) instead of a squeezed version of the desktop photo. */
@media (max-width:599px){
  .hero-img{
    background-image:
      radial-gradient(60% 45% at 70% 30%, rgba(201,164,92,.16), transparent 70%),
      url("images-responsive/hero-mobile.jpg");
    background-position:center 30%;
  }
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(28,28,34,.55) 0%,
    rgba(38,36,40,.30) 42%,
    rgba(28,28,34,.88) 100%);
}
/* smoke */
.smoke{
  position:absolute; inset:0; opacity:.10;
  background:
    radial-gradient(38% 55% at 22% 68%, #fff, transparent 62%),
    radial-gradient(30% 45% at 72% 40%, #fff, transparent 62%),
    radial-gradient(26% 38% at 48% 82%, #fff, transparent 62%);
  filter:blur(28px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(3%,-5%,0) scale(1.12); }
}

.hero-content{ position:relative; z-index:2; text-align:center; max-width:820px; }

.hero-word{
  font-family:var(--wordmark-font); font-size:clamp(34px,6.4vw,52px);
  font-weight:700; color:var(--gold); letter-spacing:-.01em;
  margin:0 0 14px; line-height:1;
}
.hero-eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-bright); margin:0 0 22px;
}
.hero-title{
  font-family:var(--serif-jp);
  font-size:clamp(24px,4.6vw,48px);
  font-weight:500; line-height:1.55; letter-spacing:.04em;
  margin:0 0 20px; color:var(--off-white);
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero-sub{
  font-size:clamp(13.5px,1.6vw,16px); line-height:2;
  color:var(--off-white); opacity:.92; margin:0 0 8px;
}
.hero-sub2{ margin-top:16px; }
.hero-en{
  font-family:var(--serif-en); font-style:italic;
  font-size:clamp(14px,1.8vw,19px); color:var(--gold-bright);
  letter-spacing:.08em; margin:0 0 26px;
}

.rating-badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--rule); border-radius:100px;
  background:rgba(28,28,34,.45);
  padding:8px 18px; font-size:12.5px; letter-spacing:.04em;
  color:var(--off-white); text-decoration:none;
  transition:border-color .25s, background .25s, transform .25s;
}
a.rating-badge:hover{
  border-color:var(--gold); background:rgba(28,28,34,.65);
  transform:translateY(-1px);
}
.rating-badge strong{
  font-family:var(--sans); font-size:17px; font-weight:700;
  font-variant-numeric:lining-nums; color:var(--gold-bright);
}
.stars{ color:var(--gold); letter-spacing:.12em; font-size:13px; }
.stars-lg{ font-size:19px; }

.hero-cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:30px;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:13px 28px; border-radius:4px;
  font-size:14px; letter-spacing:.08em; font-weight:400;
  transition:background .28s, color .28s, border-color .28s, transform .28s;
}
.btn-gold{ background:var(--gold); color:var(--deep-ash); font-weight:500; }
.btn-gold:hover{ background:var(--gold-bright); transform:translateY(-2px); }
.btn-ghost{
  background:rgba(28,28,34,.2); color:var(--off-white);
  border:1px solid var(--gold);
}
.btn-ghost:hover{ background:rgba(201,164,92,.14); color:var(--gold-bright); transform:translateY(-2px); }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; width:1px; height:52px; background:var(--rule); overflow:hidden;
}
.scroll-hint span{
  position:absolute; inset:0; background:var(--gold);
  animation:scrolldown 2.4s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes scrolldown{
  0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(64px,10vw,116px) 0; }
.section-dark { background:var(--warm-charcoal); }
.section-deep {
  background:linear-gradient(180deg,var(--deep-ash) 0%, #221F26 55%, var(--deep-ash) 100%);
}
.section-light{ background:var(--stone-beige); color:var(--dark-earth); }

.sec-head{ text-align:center; margin-bottom:46px; }
.sec-head .label{
  display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.sec-head h2{
  font-family:var(--serif-jp);
  font-size:clamp(22px,3.4vw,32px); font-weight:500; letter-spacing:.06em;
  margin:0 0 16px; line-height:1.5;
}
.sec-head .rule{
  display:block; width:40px; height:2px; background:var(--gold); margin:0 auto;
}

/* Gold on beige fails contrast — use a darkened gold on light sections.
   The gold rule/underline stays (decorative, not text). */
.section-light .sec-head .label,
.section-light .card-en{ color:#7A5A22; }

.lead{
  text-align:center; font-family:var(--serif-jp);
  font-size:clamp(15px,2vw,20px); line-height:2.05; letter-spacing:.04em;
  margin:0 auto 22px; max-width:760px; color:var(--off-white);
}
.lead-dark{ color:var(--dark-earth); }
.body{
  text-align:center; max-width:720px; margin:0 auto;
  font-size:15px; line-height:2.05; color:var(--warm-grey);
}
.note{
  text-align:center; font-size:12.5px; margin:34px 0 0;
  color:rgba(46,42,38,.65);
}

/* --- features --- */
.feature-grid{
  display:grid; gap:20px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.feature{
  border:1px solid var(--rule); border-radius:8px; padding:28px 24px;
  background:rgba(28,28,34,.35);
  transition:border-color .3s, transform .3s;
}
.feature:hover{ border-color:rgba(201,164,92,.4); transform:translateY(-3px); }
.f-num{
  display:block; font-family:var(--serif-en); font-size:22px;
  color:var(--gold); letter-spacing:.1em; margin-bottom:12px;
}
.feature h3{
  font-family:var(--serif-jp); font-size:17px; font-weight:500;
  letter-spacing:.04em; margin:0 0 10px; line-height:1.6;
}
.feature p{ margin:0; font-size:13.5px; line-height:1.95; color:var(--warm-grey); }

/* ============================================================
   CARDS (menu / rooms)
   ============================================================ */
.room-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin-top:46px;
}
/* menu-grid now holds exactly 4 cards (shisha / drink / food / cake) —
   a narrower minmax keeps all four on one row on desktop instead of
   leaving the last card stranded alone on its own line */
.menu-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}

.card{
  position:relative; overflow:hidden;
  background:var(--off-white); color:var(--dark-earth);
  border:1px solid var(--rule); border-radius:8px;
  transition:transform .32s ease, box-shadow .32s ease;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold); opacity:0; transition:opacity .32s ease; z-index:2;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.22); }
.card:hover::before{ opacity:1; }

.card-dark{ background:var(--warm-charcoal); color:var(--off-white); }

.card-img{
  height:200px; background-size:cover; background-position:center;
  border-bottom:1px solid var(--rule);
}
.card-body{ padding:24px; }
.card-en{
  display:block; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:9px;
}
.card-body h3{
  font-family:var(--serif-jp); font-size:18px; font-weight:500;
  letter-spacing:.03em; margin:0 0 10px; line-height:1.6;
}
.card-body p{ margin:0; font-size:13.5px; line-height:1.9; opacity:.78; }
.price{
  font-family:var(--sans); font-size:22px; font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--terracotta); letter-spacing:.01em; margin-top:14px !important;
  opacity:1 !important; line-height:1.4;
}
.card-dark .price{ color:var(--gold-bright); }
.price-sub{ font-size:13px; font-weight:400; opacity:.72; }

/* "ask our staff" is not a price — don't dress it as one */
.price-ask{
  font-family:var(--sans); font-size:13.5px; font-weight:400;
  color:var(--dark-earth); opacity:.62; margin-top:14px !important;
  letter-spacing:.02em;
}

/* still placeholders — no photo shot yet: replace with background-image:url("images/xxx.jpg"); */
.ph-ice   { background:linear-gradient(150deg,#4a3a2c,#2b2723 70%); }
.ph-churros{ background:linear-gradient(150deg,#A9543B,#6b3626 75%); }

/* real photos */
.ph-room3 { background-image:url("images/room3.jpg?v=2"); background-size:cover; background-position:center 30%; }

.card-img[class*="ph-"]{ position:relative; }

/* the subtle gold-glow overlay only suits the still-placeholder gradients —
   real photos should stay true to color, so skip it on photographic cards */
.ph-ice::after,.ph-churros::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(45% 55% at 55% 40%, rgba(229,194,120,.16), transparent 70%);
}

/* ============================================================
   GALLERY (VIP room slider)
   ------------------------------------------------------------
   Crossfade + gentle zoom-out, matched to a boutique-hotel feel.
   Every layer that moves uses only transform/opacity so the browser
   can run it on the compositor — no layout or paint cost per frame.
   ============================================================ */
.gallery{ position:relative; overflow:hidden; }

.gallery-slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transform:scale(1.04) translateX(0);
  transition:
    opacity 1.6s cubic-bezier(.22,1,.36,1),
    transform 2.2s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
/* directional nudge: JS tags the incoming slide with this for a single
   frame before adding .is-active, so the transition animates FROM this
   offset state TO the centred, full-opacity one below. Listed before
   .is-active so — at equal specificity — the active state always wins once
   both classes are present. */
.gallery-slide.is-from-right{ transform:scale(1.04) translateX(8px); }
.gallery-slide.is-active{
  opacity:1; transform:scale(1) translateX(0);
  pointer-events:auto;
}

@media (prefers-reduced-motion:reduce){
  .gallery-slide{
    transform:none !important;
    transition:opacity .3s linear !important;
  }
}

/* ============================================================
   ENTERTAINMENT ICONS
   ============================================================ */
.ent-icons{
  display:grid; gap:16px; margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.ent{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:26px 12px; border:1px solid var(--rule); border-radius:8px;
  color:var(--gold); transition:border-color .3s, transform .3s;
}
.ent:hover{ border-color:rgba(201,164,92,.45); transform:translateY(-3px); }
.ent svg{ width:38px; height:38px; }
.ent span{
  font-size:12.5px; letter-spacing:.1em; color:var(--off-white); text-align:center;
}

.charter-cta{
  margin-top:52px; text-align:center;
  border:1px solid var(--rule); border-radius:8px; padding:36px 24px;
  background:rgba(38,36,40,.55);
}
.charter-cta .hero-cta{ margin-top:0; }
.charter-cta .btn{ line-height:1.5; }

/* ============================================================
   ACCESS
   ============================================================ */
.access-grid{
  display:grid; gap:38px; align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .access-grid{ grid-template-columns:1fr 1.05fr; } }

.rating-inline{ margin-bottom:26px; }

.info-list{
  display:grid; grid-template-columns:88px 1fr;
  gap:0; margin:0 0 30px; font-size:14px;
}
.info-list dt{
  padding:14px 0; border-top:1px solid var(--rule);
  color:var(--gold); font-size:12px; letter-spacing:.1em; line-height:1.9;
}
.info-list dd{
  padding:14px 0; margin:0; border-top:1px solid var(--rule); line-height:1.9;
}
.info-list dd a{ color:var(--gold-bright); border-bottom:1px solid var(--rule); }
.muted{ color:var(--warm-grey); font-size:13px; }

.map{
  display:flex; flex-direction:column; gap:16px;
}
.map iframe{
  display:block; width:100%; height:340px; border:0; border-radius:8px;
  border:1px solid var(--rule);
  filter:grayscale(.35) contrast(1.05) brightness(.92);
}
.exterior-img{
  display:block; width:100%; height:560px; object-fit:cover;
  object-position:center 30%;
  border-radius:8px; border:1px solid var(--rule);
}
@media (max-width:599px){
  /* the mobile-cropped photo is exactly 358x460 — match the box to that
     ratio and use contain so the full frame (including the caption
     right at the bottom edge) always shows, regardless of how wide the
     viewport actually renders the column */
  .exterior-img{ height:auto; aspect-ratio:358/460; object-fit:contain; background:#000; }
}

/* ============================================================
   SNS — Instagram reel cards
   ------------------------------------------------------------
   Official embed.js renders each post as a cross-origin iframe whose
   internal height varies with caption length. We tried replacing this
   with a branded placeholder card (click to open a modal that loads
   the embed), but Instagram's own resize handshake — the iframe starts
   at height:0 and Instagram sends the real size back via postMessage
   once it can measure the element — turned out to be unreliable once
   the iframe was inserted into anything that wasn't already visible
   on page load (a modal fading in, in particular). So this places the
   embed directly in the card, visible from the start: min-height keeps
   the grid from collapsing before Instagram resizes it, and overflow
   handles whatever height it settles on.
   ============================================================ */
.reel-grid{
  display:grid; gap:28px;
  grid-template-columns:repeat(3, minmax(0, 340px));
  justify-content:center;
  align-items:start;
  max-width:1200px; margin:0 auto 44px;
}

.reel{
  position:relative;
  min-height:480px; max-height:640px;
  border-radius:14px; overflow:hidden; overflow-y:auto;
  border:1px solid var(--rule);
  background:var(--off-white);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* Instagram injects its own iframe + inline styles; tame them so the
   three embeds line up and never overflow their card. */
.reel .instagram-media{
  margin:0 !important;
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.reel iframe{ max-width:100% !important; }

/* Shown while embed.js loads, and left in place if a post can't be
   embedded (deleted / private / region-blocked) so the card is never
   just blank. */
.reel blockquote:not([data-instgrm-rendered]){
  display:flex; align-items:center; justify-content:center;
  min-height:480px;
  padding:28px 20px !important;
  text-align:center; font-size:13.5px; line-height:1.8;
  color:var(--dark-earth);
}
.reel blockquote:not([data-instgrm-rendered]) a{
  color:#7A5A22; border-bottom:1px solid var(--rule);
}
@media (max-width:1023px){
  .reel-grid{ grid-template-columns:repeat(2, minmax(0, 340px)); }
}
@media (max-width:599px){
  .reel-grid{
    grid-template-columns:1fr;
    /* 88% of the viewport width, not of .wrap's already-padded inner
       width — matches the "85–90% of screen width" spec on a mobile card */
    width:min(88vw, 340px);
    max-width:100%;
    margin-left:auto; margin-right:auto;
  }
  .reel{ min-height:420px; max-height:70vh; }
}

.sns-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.sns-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:34px 20px; border-radius:8px;
  background:var(--off-white); border:1px solid var(--rule);
  color:var(--dark-earth);
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.sns-card:hover{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 14px 32px rgba(0,0,0,.14);
}
.sns-card svg{ color:var(--terracotta); }
.sns-card strong{
  font-family:var(--serif-en); font-size:21px; font-weight:600; letter-spacing:.06em;
}
.sns-card span{ font-size:12.5px; opacity:.7; text-align:center; }
.sns-card .stars{ color:var(--gold); }
.sns-card .sns-cta{
  margin-top:6px; font-size:12px; font-weight:500; letter-spacing:.04em;
  color:#7A5A22; opacity:1; text-decoration:underline;
  text-decoration-color:var(--rule); text-underline-offset:3px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--deep-ash); border-top:1px solid var(--rule);
  padding:64px 0 40px; text-align:center;
}
.footer .wordmark-lg{ display:block; margin:0 0 18px; }
.f-name{ font-family:var(--serif-jp); font-size:15px; letter-spacing:.05em; margin:0 0 10px; }
.f-addr,.f-hours{ font-size:13px; color:var(--warm-grey); margin:0 0 6px; line-height:1.9; }

.f-links{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin:26px 0; font-size:12.5px; letter-spacing:.12em;
}
.f-links a{ color:var(--gold); transition:color .25s; }
.f-links a:hover{ color:var(--gold-bright); }

.f-age{
  font-size:11.5px; color:var(--warm-grey); line-height:1.9;
  max-width:600px; margin:0 auto 22px;
  padding-top:22px; border-top:1px solid var(--rule);
}
.f-copy{
  font-family:var(--serif-en); font-size:12px; letter-spacing:.14em;
  color:var(--warm-grey); margin:0;
}

/* floating maps button (mobile) */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:90;
  width:52px; height:52px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:var(--gold); color:var(--deep-ash);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:background .25s, transform .25s;
}
.fab:hover{ background:var(--gold-bright); transform:scale(1.06); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
.reveal:nth-child(5){ transition-delay:.32s; }
.reveal:nth-child(6){ transition-delay:.4s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE  (mobile-first: tablet ≥768, desktop ≥1024)
   ============================================================ */
@media (max-width:1023px){
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; gap:0; margin:0;
    background:rgba(28,28,34,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule);
    padding:8px 20px 20px;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .28s, transform .28s, visibility .28s;
  }
  .nav.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--rule); font-size:15px; }
  .nav a::after{ display:none; }
  .burger{ display:flex; }
  .header-right{ margin-left:auto; }
  .open-badge{ display:none; }
}

@media (max-width:599px){
  body{ font-size:15px; }
  .header-inner{ gap:10px; padding:0 14px; }
  .wordmark{ font-size:22px; }
  .lang-btn{ padding:6px 8px; font-size:11.5px; }
  .ig-icon{ display:none; }
  .wrap{ padding:0 16px; }

  .hero{ padding:calc(var(--header-h) + 24px) 16px 70px; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .rating-badge{ font-size:11.5px; padding:7px 14px; }

  .info-list{ grid-template-columns:1fr; }
  .info-list dt{ padding:12px 0 0; border-top:1px solid var(--rule); }
  .info-list dd{ padding:2px 0 12px; border-top:0; }

  .card-img{ height:180px; }
  .card-body{ padding:20px; }
  .fab{ display:flex; }
  .footer{ padding-bottom:84px; }
}

/* very small screens: no horizontal scroll at 320px */
@media (max-width:340px){
  .wrap{ padding:0 12px; }
  .hero-word{ font-size:34px; }
  .btn{ padding:12px 16px; font-size:13px; }
}

/* CJK / Latin metric tuning so language switch doesn't break layout */
html[lang="en"] .hero-title{ font-size:clamp(23px,4.1vw,42px); line-height:1.35; }
html[lang="en"] .lead,
html[lang="ko"] .lead,
html[lang="zh"] .lead{ line-height:1.85; }
html[lang="en"] .sec-head h2{ letter-spacing:.02em; }
html[lang="ko"] .hero-title,
html[lang="zh"] .hero-title{ line-height:1.5; }
html[lang="en"] .feature h3,
html[lang="ko"] .feature h3,
html[lang="zh"] .feature h3{ font-size:16px; }
html[lang="en"] .nav a{ font-size:12.5px; letter-spacing:.04em; }