@charset "utf-8";

/* ============================================================
   Lounge Shion — 伊豆下田
   Palette pulled from the shop itself: the blue backlit sign,
   the gold script wordmark, and the near-black room.

   Type:  Cinzel             — engraved Roman capitals (numerals, small labels)
          Cormorant Garamond — high-contrast display serif (section titles)
          Shippori Mincho B1 — Japanese serif, everything else

   The Japanese face is loaded at one weight only: a second weight costs
   roughly half a megabyte on mobile, and at these sizes 400 vs 500 mincho
   is indistinguishable. Emphasis comes from colour and letter-spacing.
   ============================================================ */

:root{
  --ink:        #04050a;
  --ink-3:      #0e1322;

  --gold-deep:  #96742f;
  --gold:       #c8a45c;
  --gold-lite:  #ecd9ab;
  --gold-white: #f7edd4;

  --paper:      #f4f1ea;
  --body:       rgba(244,241,234,.86);
  --muted:      rgba(244,241,234,.66);
  --line:       rgba(200,164,92,.30);
  --line-soft:  rgba(200,164,92,.16);

  --caps: "Cinzel", "Cormorant Garamond", serif;
  --en:   "Cormorant Garamond", "Shippori Mincho B1", serif;
  --jp:   "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  --wrap: 1140px;
  --head-h: 100px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--body);
  font-family:var(--jp);
  font-weight:400;
  font-size:17px;
  line-height:2.05;
  letter-spacing:.03em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums;
}

/* Faint blue pool of light, like the room. A fixed layer rather than
   background-attachment:fixed — iOS ignores that, and it forces repaints. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1300px 780px at 78% -12%, rgba(47,128,201,.17), transparent 62%),
    radial-gradient(1000px 640px at 6% 44%, rgba(12,27,56,.55), transparent 62%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,.55) 100%);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:min(100% - 44px, var(--wrap)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:12px 22px; border-radius:0 0 4px 0;
}
.skip:focus{ left:0; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--gold-lite);
  outline-offset:3px;
  border-radius:2px;
}

.ext{ font-size:.78em; margin-left:.35em; opacity:.65; }

/* ---------------------------------------------------------- header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             height .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
.site-header.is-stuck{
  height:calc(var(--head-h) - 18px);
  background:rgba(4,5,10,.86);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 18px 46px -34px #000;
}
.site-header.is-stuck::after{ opacity:1; }

.header-inner{ display:flex; align-items:center; gap:30px; }

.brand{ flex:0 0 auto; line-height:0; }
.brand img{
  width:clamp(200px, 17vw, 248px); height:auto;
  filter:drop-shadow(0 2px 16px rgba(111,199,255,.30));
  transition:width .4s var(--ease);
}
.site-header.is-stuck .brand img{ width:clamp(178px, 15vw, 214px); }

.nav{ margin-left:auto; display:flex; gap:32px; }
.nav a{
  position:relative; text-decoration:none;
  font-family:var(--jp); font-size:15.5px; font-weight:400;
  letter-spacing:.14em; color:rgba(244,241,234,.88);
  padding:8px 0; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-lite), transparent);
  transform:scaleX(0); transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--gold-white); }
.nav a:hover::after{ transform:scaleX(1); }

/* Reservation CTA — one line, so nothing can sit askew. */
.tel-btn{
  flex:0 0 auto; text-decoration:none;
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 22px;
  border:1px solid var(--line); border-radius:2px;
  background:linear-gradient(180deg, rgba(200,164,92,.09), rgba(200,164,92,.02));
  color:var(--gold-white);
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.tel-btn:hover{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(200,164,92,.18), rgba(200,164,92,.05));
  box-shadow:0 10px 30px -18px rgba(200,164,92,.9);
}
.tel-ico{ color:var(--gold); flex:0 0 auto; }
.tel-label{
  font-family:var(--jp); font-size:13px; letter-spacing:.2em;
  color:var(--gold); white-space:nowrap;
}
.tel-rule{ width:1px; height:18px; background:var(--line); flex:0 0 auto; }
.tel-num{
  font-family:var(--caps); font-size:20px; font-weight:500;
  letter-spacing:.05em; line-height:1; white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}

.burger{
  display:none; width:44px; height:44px; padding:11px 9px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:1px; background:var(--paper); transition:transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ---------------------------------------------------------- hero */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--head-h) + 40px) 0 100px;
  isolation:isolate; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.12) contrast(1.06) brightness(.70);
  transform:scale(1.04);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(78% 58% at 50% 46%, transparent, rgba(4,5,10,.58) 78%),
    linear-gradient(180deg, rgba(4,5,10,.88) 0%, rgba(4,5,10,.28) 32%, rgba(4,5,10,.64) 72%, var(--ink) 100%);
}
.hero-inner{ text-align:center; }

.hero-eyebrow{
  margin:0 0 30px; font-family:var(--jp); font-weight:400;
  font-size:14.5px; letter-spacing:.52em; text-indent:.52em;
  color:var(--gold-lite);
}
.hero-eyebrow::before,
.hero-eyebrow::after{
  content:""; display:inline-block; width:40px; height:1px; vertical-align:middle;
  background:linear-gradient(90deg, transparent, var(--gold));
  margin:0 18px 5px;
}
.hero-eyebrow::after{ background:linear-gradient(90deg, var(--gold), transparent); }

.hero-title{ margin:0 0 30px; }
.hero-title img{
  width:min(460px, 76vw); margin-inline:auto;
  filter:drop-shadow(0 6px 34px rgba(111,199,255,.38));
}

.hero-lead{
  margin:0 0 32px; font-family:var(--jp); font-weight:400;
  font-size:clamp(17px, 2.5vw, 23px); letter-spacing:.16em; line-height:1.9;
  color:var(--paper);
  text-shadow:0 2px 20px rgba(0,0,0,.85);
}

.hero-hours{
  margin:0 0 42px; font-family:var(--caps); font-weight:400;
  font-size:clamp(14px, 1.6vw, 16.5px); letter-spacing:.16em;
  color:rgba(244,241,234,.82);
  display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.hero-hours .jp{ font-family:var(--jp); letter-spacing:.2em; }
.hero-hours .dot{ color:var(--gold); font-size:.7em; }

.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; left:50%; bottom:34px; translate:-50% 0;
  width:24px; height:46px; border:1px solid rgba(200,164,92,.55); border-radius:13px;
}
.scroll-cue span{
  position:absolute; left:50%; top:9px; translate:-50% 0;
  width:3px; height:8px; border-radius:2px; background:var(--gold-lite);
  animation:cue 2s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(17px); opacity:0 } }

/* ---------------------------------------------------------- buttons */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 36px; text-decoration:none;
  font-family:var(--jp); font-size:15.5px; font-weight:400; letter-spacing:.16em;
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .4s var(--ease),
             background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-sm{ padding:13px 26px; font-size:14.5px; }

.btn-gold{
  background:linear-gradient(135deg, #f0dcae 0%, #cfad68 38%, #a9843d 100%);
  color:#171008;
  box-shadow:0 10px 30px -14px rgba(200,164,92,.95), inset 0 1px 0 rgba(255,255,255,.42);
}
/* a slow sheen crossing the gold, the way light moves on foil */
.btn-gold::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transition:left .8s var(--ease);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(200,164,92,1), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold:hover::after{ left:130%; }

.btn-ghost{ border-color:rgba(244,241,234,.36); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-white); background:rgba(200,164,92,.09); }

/* ---------------------------------------------------------- sections */
.section{ padding:clamp(84px, 11vw, 150px) 0; position:relative; }

.ornament{
  width:min(320px, 62vw); margin:0 auto clamp(30px,5vw,52px);
  opacity:.9;
}

.sec-head{ text-align:center; margin-bottom:clamp(46px, 6.5vw, 78px); }
.sec-en{
  margin:0 0 14px; font-family:var(--en); font-style:italic;
  font-size:clamp(34px, 5.4vw, 54px); font-weight:500; letter-spacing:.03em;
  background:linear-gradient(102deg, var(--gold-white) 0%, var(--gold-lite) 26%, var(--gold) 52%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.18;
}
.sec-ja{
  margin:0; font-family:var(--jp); font-weight:400;
  font-size:15px; letter-spacing:.46em; text-indent:.46em;
  color:rgba(244,241,234,.72);
  display:flex; align-items:center; justify-content:center; gap:20px;
}
.sec-ja::before,.sec-ja::after{
  content:""; width:clamp(28px,6vw,60px); height:1px; background:var(--line);
}
.sec-note{
  margin:24px auto 0; max-width:46em;
  font-family:var(--jp); font-size:15.5px; line-height:2.05;
  color:var(--muted);
}

/* ---------------------------------------------------------- about */
.about-grid{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(34px, 5vw, 70px);
  align-items:start; max-width:960px; margin-inline:auto;
}

.mama{ margin:0; width:clamp(200px, 21vw, 268px); }
.mama picture{ display:block; position:relative; }
.mama img{
  width:100%; height:auto; border-radius:2px;
  box-shadow:0 28px 64px -28px #000, 0 0 0 1px rgba(200,164,92,.30);
}
.mama figcaption{
  margin-top:18px; text-align:center;
  font-family:var(--jp); font-size:13.5px; letter-spacing:.38em; text-indent:.38em;
  color:var(--gold-lite);
}

.about-copy p{
  font-family:var(--jp); font-size:clamp(16px, 1.4vw, 17.5px);
  font-weight:400; line-height:2.4; margin:0 0 1.75em;
  color:var(--paper);
}
.about-copy p:first-child{ margin-top:-.4em; }
.about-sign{
  padding-top:1.5em; border-top:1px solid var(--line-soft);
  color:var(--gold-lite) !important; font-size:16px !important;
}

.about-photos{
  margin-top:clamp(50px,6.5vw,80px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.about-photos .ph{
  margin:0; overflow:hidden; border-radius:2px; aspect-ratio:4/5;
  box-shadow:0 26px 62px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(200,164,92,.14);
}
.about-photos img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.about-photos .ph:hover img{ transform:scale(1.06); }

/* ---------------------------------------------------------- info strip */
.info-sec{ padding-block:clamp(46px,6vw,72px); }
.info-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line);
  box-shadow:0 30px 80px -50px #000;
}
.info-grid li{
  background:linear-gradient(180deg, rgba(16,22,40,.94), rgba(8,11,20,.94));
  padding:32px 20px; text-align:center;
  display:flex; flex-direction:column; gap:9px; justify-content:center;
}
.info-k{
  font-family:var(--jp); font-size:13px; letter-spacing:.26em; text-indent:.26em;
  color:var(--gold);
}
.info-v{
  font-family:var(--caps); font-size:clamp(22px,2.7vw,29px); font-weight:500;
  letter-spacing:.04em; line-height:1.3; color:var(--gold-white);
  font-variant-numeric:lining-nums;
}
.info-v .jp{ font-family:var(--jp); font-weight:400; }
.info-note{ font-family:var(--jp); font-size:13px; color:var(--muted); letter-spacing:.06em; line-height:1.7; }
.info-lead{
  margin:28px 0 0; text-align:center;
  font-family:var(--jp); font-size:15.5px; color:var(--muted);
}

/* ---------------------------------------------------------- menu */
.menu-sec{ background:linear-gradient(180deg, transparent, rgba(12,27,56,.30) 32%, transparent); }

.tabs{
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center;
  margin-bottom:clamp(38px,5vw,58px);
}
.tabs button{
  font-family:var(--jp); font-size:15px; letter-spacing:.1em;
  padding:12px 24px; cursor:pointer; white-space:nowrap;
  color:rgba(244,241,234,.70);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease);
}
.tabs button:hover{ color:var(--paper); border-color:rgba(200,164,92,.5); }
.tabs button[aria-selected="true"]{
  color:#171008; font-weight:400;
  background:linear-gradient(135deg, var(--gold-white), var(--gold-lite) 40%, var(--gold));
  border-color:transparent;
  box-shadow:0 8px 24px -12px rgba(200,164,92,.9), inset 0 1px 0 rgba(255,255,255,.5);
}

.panel{ animation:fade .5s var(--ease) both; }
@keyframes fade{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.feature-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr));
  gap:clamp(18px,2.6vw,28px); margin-bottom:40px;
}
.feature{
  position:relative; padding:30px 32px;
  background:linear-gradient(155deg, rgba(24,33,56,.78), rgba(8,11,20,.78));
  border:1px solid var(--line-soft); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 60px -44px #000;
}
.panel > .feature{ margin-bottom:40px; }

/* Bottle shot with the tasting note.
   In a multi-card row the card is too narrow to sit them side by side, so
   the bottle goes on top; the single full-width card keeps them side by side. */
.feature.has-bottle{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,2.2vw,26px);
  padding-top:34px;
}
.feature .bottle{ display:block; width:clamp(96px, 11vw, 132px); }
.feature .bottle img{
  width:100%; height:auto; max-height:250px; object-fit:contain;
  /* the source cut-outs sit on transparency — a soft pool of light grounds them */
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(111,199,255,.20));
}
.feature-body{ min-width:0; width:100%; }

.panel > .feature.has-bottle{
  flex-direction:row; align-items:center; gap:clamp(26px,3vw,44px);
  padding:30px 32px;
}
.panel > .feature.has-bottle .bottle{ width:clamp(88px, 9vw, 118px); flex:0 0 auto; }

.feature-name{
  margin:0 0 8px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);
  font-family:var(--en); font-weight:600;
  font-size:clamp(23px,2.4vw,28px); letter-spacing:.03em; color:var(--gold-white);
  display:flex; align-items:baseline; justify-content:space-between; gap:6px 18px; flex-wrap:wrap;
  line-height:1.35;
}
.panel > .feature .feature-name{ border-bottom:0; padding-bottom:0; }
.feature-price{
  font-family:var(--caps); font-size:clamp(18px,2vw,22px); font-weight:500;
  color:var(--gold-lite); white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}
.feature-sub{ margin:0 0 10px; font-family:var(--jp); font-size:13.5px; letter-spacing:.16em; color:var(--muted); }
.feature-desc{
  margin:12px 0 0; font-family:var(--jp); font-size:15px; line-height:2.05;
  color:rgba(244,241,234,.82);
}

.pl-head{
  margin:42px 0 16px; font-family:var(--jp); font-weight:400;
  font-size:17px; letter-spacing:.22em; color:var(--gold-lite);
}
.pl-head:first-child{ margin-top:0; }

.price-list{ list-style:none; margin:0; padding:0; }
.price-list li{
  display:flex; align-items:baseline; gap:12px;
  padding:18px 6px; border-bottom:1px solid var(--line-soft);
  font-size:16.5px;
  transition:background .3s var(--ease);
}
.price-list li:first-child{ border-top:1px solid var(--line-soft); }
.price-list li:hover{ background:rgba(200,164,92,.05); }
.pl-name{ font-family:var(--jp); color:var(--paper); }
.pl-dots{ flex:1 1 auto; border-bottom:1px dotted rgba(244,241,234,.20); transform:translateY(-5px); }
.pl-price{
  font-family:var(--caps); font-size:19px; font-weight:500; color:var(--gold-lite);
  white-space:nowrap; font-variant-numeric:lining-nums tabular-nums;
}

.food-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(228px,1fr));
  gap:18px; margin-bottom:38px;
}
.food-card{
  padding:28px 28px 30px;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.food-card h3{
  margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft);
  font-family:var(--caps); font-size:21px; font-weight:500; color:var(--gold-lite);
  letter-spacing:.05em; font-variant-numeric:lining-nums;
}
.food-card ul{ list-style:none; margin:0; padding:0; font-family:var(--jp); font-size:16px; }
.food-card li{ padding:5px 0 5px 18px; position:relative; color:var(--paper); }
.food-card li::before{
  content:""; position:absolute; left:0; top:1.02em; width:7px; height:1px; background:var(--gold); opacity:.75;
}

.events{
  margin-top:clamp(52px,6.5vw,80px); padding:clamp(34px,4.4vw,52px); text-align:center;
  background:linear-gradient(155deg, rgba(12,27,56,.66), rgba(8,11,20,.66));
  border:1px solid var(--line); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -50px #000;
}
.events h3{
  margin:0 0 18px; font-family:var(--en); font-style:italic; font-weight:600;
  font-size:clamp(28px,3.4vw,34px); letter-spacing:.03em;
  background:linear-gradient(102deg, var(--gold-white), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.events-list{ margin:0 0 10px; font-family:var(--jp); font-size:clamp(16px,2vw,19px); letter-spacing:.08em; color:var(--paper); }
.events-note{ margin:0 0 28px; font-family:var(--jp); font-size:15px; color:var(--muted); }

/* ---------------------------------------------------------- gallery */
/* Flex rather than grid so a part-filled last row centres under the others
   instead of leaving a lone tile stranded at the left. */
.gallery{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.gallery li{ margin:0; flex:0 0 calc((100% - 4 * 14px) / 5); }
.gallery button{
  display:block; width:100%; padding:0; border:0; cursor:pointer; overflow:hidden;
  background:var(--ink-3); border-radius:2px; position:relative; line-height:0;
  aspect-ratio:1/1;
}
.gallery img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.88) saturate(1.02);
  transition:transform .9s var(--ease), filter .45s var(--ease);
}
.gallery button::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(200,164,92,0);
  transition:box-shadow .35s var(--ease);
}
.gallery button:hover img,
.gallery button:focus-visible img{ transform:scale(1.07); filter:brightness(1.06) saturate(1.08); }
.gallery button:hover::after{ box-shadow:inset 0 0 0 1px rgba(200,164,92,.7); }

/* ---------------------------------------------------------- lightbox */
.lightbox{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,4,8,.95);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fade .35s var(--ease) both;
}
.lightbox[hidden]{ display:none; }
.lb-figure{ margin:0; max-width:min(1120px, 92vw); max-height:86vh; text-align:center; }
.lb-figure img{
  max-width:100%; max-height:78vh; width:auto; margin-inline:auto;
  border-radius:2px; box-shadow:0 34px 100px -30px #000, 0 0 0 1px rgba(200,164,92,.22);
}
.lb-figure figcaption{
  margin-top:20px; font-family:var(--jp); font-size:14.5px;
  letter-spacing:.16em; color:var(--muted);
}
.lightbox button{
  position:absolute; background:rgba(255,255,255,.06); color:var(--paper);
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
  width:52px; height:52px; font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox button:hover{ background:rgba(200,164,92,.22); border-color:var(--gold); }
.lb-close{ top:26px; right:26px; font-size:19px; }
.lb-prev{ left:26px; top:50%; translate:0 -50%; }
.lb-next{ right:26px; top:50%; translate:0 -50%; }

/* ---------------------------------------------------------- access */
.access-grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(30px,4vw,56px); align-items:start; }

.access-info dl{ margin:0; display:grid; grid-template-columns:6em 1fr; gap:0; }
.access-info dt{
  padding:17px 0; font-family:var(--jp); font-size:13.5px; letter-spacing:.2em;
  color:var(--gold); border-top:1px solid var(--line-soft);
}
.access-info dd{
  margin:0; padding:17px 0; font-family:var(--jp); font-size:16.5px; line-height:1.95;
  color:var(--paper); border-top:1px solid var(--line-soft);
}
/* underline via text-decoration, not a border: the border would sit at the
   bottom of the 44px touch target and float away from the text */
.access-info dd a{
  color:var(--gold-lite);
  text-decoration:underline; text-decoration-color:rgba(236,217,171,.45);
  text-decoration-thickness:1px; text-underline-offset:.28em;
}
.access-info dd a:hover{ color:var(--gold-white); text-decoration-color:var(--gold-white); }

.access-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }

.access-map{
  aspect-ratio:4/3; border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:var(--ink-3); box-shadow:0 30px 76px -50px #000;
}
.access-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) contrast(.94) brightness(.92); }

/* ---------------------------------------------------------- footer */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,27,56,.36), var(--ink));
  padding:clamp(56px,6.5vw,84px) 0 30px;
}
.footer-inner{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(30px,4vw,52px);
  align-items:start;
}
.f-brand img{ width:206px; margin-bottom:22px; }
.f-addr,.f-hours{ margin:0 0 8px; font-family:var(--jp); font-size:15px; color:var(--muted); }

.f-contact{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.f-tel{
  font-family:var(--caps); font-size:32px; font-weight:500; letter-spacing:.04em;
  color:var(--gold-lite); text-decoration:none; line-height:1.2;
  font-variant-numeric:lining-nums tabular-nums;
}
.f-tel:hover{ color:var(--gold-white); }
.f-mail,.f-blog{ font-family:var(--jp); font-size:15px; color:rgba(244,241,234,.80); text-decoration:none; }
.f-mail:hover,.f-blog:hover{ color:var(--gold-lite); }

.f-links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.f-links-head{ margin:0 0 6px; font-family:var(--jp); font-size:13px; letter-spacing:.28em; color:var(--gold); }
.f-links a{ font-family:var(--jp); font-size:15px; color:rgba(244,241,234,.80); text-decoration:none; }
.f-links a:hover{ color:var(--gold-lite); }

.copy{
  margin:clamp(42px,5vw,62px) 0 0; padding-top:26px;
  border-top:1px solid var(--line-soft); text-align:center;
  font-family:var(--caps); font-size:12.5px; letter-spacing:.2em; color:rgba(244,241,234,.62);
}

/* ---------------------------------------------------------- mobile call FAB
   Only while it is useful: hidden over the hero (which has its own call
   button) and over the footer (which shows the number in full), so it never
   sits on top of copy the reader is in the middle of. */
.fab-tel{
  position:fixed; z-index:90; right:14px; bottom:14px;
  display:none; align-items:center; gap:8px;
  padding:13px 20px; border-radius:999px; text-decoration:none;
  background:linear-gradient(135deg, #f0dcae, #cfad68 40%, #a9843d);
  color:#171008;
  font-family:var(--jp); font-size:14.5px; font-weight:400; letter-spacing:.1em;
  box-shadow:0 12px 34px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.45);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.fab-tel.is-shown{ opacity:1; transform:none; pointer-events:auto; }

/* ---------------------------------------------------------- reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav{ gap:24px; }
  .nav a{ font-size:15px; }
  .tel-label{ display:none; }
  .tel-rule{ display:none; }
  .gallery li{ flex-basis:calc((100% - 3 * 14px) / 4); }
}

@media (max-width:960px){
  .about-grid{ grid-template-columns:1fr; justify-items:center; }
  .mama{ width:212px; }
  .access-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .f-brand{ grid-column:1 / -1; }
  .info-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  :root{ --head-h:80px; }

  .burger{ display:flex; margin-left:auto; }
  .tel-btn{ display:none; }

  .about-photos{ grid-template-columns:repeat(2,1fr); }

  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0;
    margin:0; flex-direction:column; gap:0;
    background:rgba(4,5,10,.975);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:8px 0 22px;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    max-height:calc(100svh - var(--head-h)); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{
    padding:18px 26px; font-size:17px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav a::after{ display:none; }

  /* One swipeable row reads better than four stacked rows of pills. */
  .tabs{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:-18px; padding:4px 18px 10px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ scroll-snap-align:center; flex:0 0 auto; }

  .brand img{ width:min(190px, 48vw); }
  .site-header.is-stuck{ height:calc(var(--head-h) - 12px); }
  .site-header.is-stuck .brand img{ width:min(172px, 44vw); }

  .fab-tel{ display:flex; }

  .hero{ min-height:94svh; }
  .hero-eyebrow{ font-size:13.5px; }
  .hero-eyebrow::before,.hero-eyebrow::after{ width:22px; margin:0 12px 5px; }

  .gallery{ gap:9px; }
  .gallery li{ flex-basis:calc((100% - 2 * 9px) / 3); }

  .lightbox button{ width:46px; height:46px; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
  .lb-close{ top:16px; right:16px; }

  .access-info dl{ grid-template-columns:5.2em 1fr; }
  .access-map{ aspect-ratio:1/1; }

  .footer-inner{ grid-template-columns:1fr; }
}

/* Touch devices: give every standalone link a comfortable tap target. */
@media (pointer:coarse), (max-width:820px){
  .f-tel,.f-mail,.f-blog,.f-links a,.access-info dd a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .f-contact{ gap:2px; }
  .f-links{ gap:0; }
}

@media (max-width:560px){
  body{ font-size:16.5px; }
  .wrap{ width:calc(100% - 36px); }
  .info-grid{ grid-template-columns:1fr; }
  .price-list li{ flex-wrap:wrap; gap:2px 12px; }
  .pl-dots{ min-width:22px; }
  .feature{ padding:24px 22px; }
  /* Too narrow for a bottle beside the text — stack every card. */
  .feature.has-bottle,
  .panel > .feature.has-bottle{
    flex-direction:column; align-items:center; gap:18px; padding:28px 22px 24px;
  }
  .feature .bottle,
  .panel > .feature.has-bottle .bottle{ width:96px; }
  .feature .bottle img{ max-height:200px; }
  .events{ padding:28px 22px; }
  .section{ padding:72px 0; }
  .gallery li{ flex-basis:calc((100% - 9px) / 2); }
}

/* ---------------------------------------------------------- a11y prefs */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-video{ display:none; }
  .hero-media{ background:url("/assets/img/room-blue-960.jpg") center/cover no-repeat; }
}

@media print{
  .site-header,.fab-tel,.scroll-cue,.hero-media,.lightbox,.access-map{ display:none !important; }
  body{ background:#fff; color:#000; }
  .panel[hidden]{ display:block !important; }
}