/* ============================================================
   すし柳 — SUSHI YANAGI   (rich edition)
   ============================================================ */

:root{
  --ink:        #1a1714;
  --ink-soft:   #514b41;
  --cream:      #f6f1e7;
  --cream-2:    #ece2d1;
  --paper:      #faf6ee;
  --gold:       #b58e4c;
  --gold-lt:    #d8b572;
  --gold-deep:  #8a6a30;
  --dark:       #100d0a;
  --dark-2:     #1a1510;
  --line:       rgba(26,23,20,.14);

  --serif: "Shippori Mincho","Noto Serif JP",serif;
  --sans:  "Noto Sans JP",sans-serif;
  --en:    "Cormorant Garamond",serif;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --frame: 14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  line-height:1.95;
  letter-spacing:.045em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; height:100vh; }

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

/* subtle paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:radial-gradient(circle at 1px 1px, #000 1px, transparent 0);
  background-size:4px 4px;
}

/* ===== Intro loader ===== */
.loader{
  position:fixed; inset:0; z-index:1000; background:var(--dark);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:1rem; color:var(--cream); }
.loader-mark{
  display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold-lt); font-size:1.9rem;
  opacity:0; animation:loadMark 1.2s .1s var(--ease) forwards;
}
.loader-name{ font-size:1.9rem; letter-spacing:.3em; text-indent:.3em; opacity:0; animation:loadUp .9s .5s var(--ease) forwards; }
.loader-en{ font-family:var(--en); font-size:.85rem; letter-spacing:.5em; text-indent:.5em; color:var(--gold-lt); opacity:0; animation:loadUp .9s .75s var(--ease) forwards; }
@keyframes loadMark{ from{opacity:0; transform:scale(.7) rotate(-20deg);} to{opacity:1; transform:none;} }
@keyframes loadUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ===== Decorative frame & rails ===== */
.frame{
  position:fixed; inset:var(--frame); z-index:90; pointer-events:none;
  border:1px solid rgba(246,241,231,.5);
  mix-blend-mode:difference;
  transition:opacity .5s var(--ease);
}
.rail{ position:fixed; top:0; bottom:0; width:var(--frame); z-index:91; display:grid; place-items:center; pointer-events:none; }
.rail-left{ left:0; } .rail-right{ right:0; }
.rail span{
  writing-mode:vertical-rl; font-family:var(--en); font-size:.62rem; letter-spacing:.35em;
  color:rgba(246,241,231,.6); mix-blend-mode:difference; white-space:nowrap;
}
.rail-right span{ font-family:var(--serif); letter-spacing:.3em; }

/* ===== Header ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem clamp(1.8rem,4.5vw,3.6rem);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.scrolled{
  background:rgba(250,246,238,.92);
  backdrop-filter:blur(10px) saturate(1.1);
  padding:.85rem clamp(1.8rem,4.5vw,3.6rem);
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--cream); transition:color .5s var(--ease); }
.scrolled .brand{ color:var(--ink); }
.brand-mark{
  display:grid; place-items:center; width:2.3rem; height:2.3rem;
  border:1px solid currentColor; border-radius:50%; font-size:1.1rem; opacity:.92;
}
.brand-name{ font-size:1.5rem; font-weight:600; letter-spacing:.2em; text-indent:.2em; }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.1rem); }
.nav > a:not(.nav-tel){ position:relative; color:var(--cream); transition:color .5s var(--ease); text-align:center; }
.scrolled .nav > a:not(.nav-tel){ color:var(--ink); }
.nav .ja{ display:block; font-size:.95rem; letter-spacing:.1em; }
.nav .en{ display:block; font-family:var(--en); font-size:.62rem; letter-spacing:.18em; opacity:.6; margin-top:1px; }
.nav > a:not(.nav-tel)::after{
  content:""; position:absolute; left:50%; bottom:-.5em; width:0; height:1px; background:var(--gold);
  transition:width .4s var(--ease), left .4s var(--ease);
}
.nav > a:not(.nav-tel):hover::after{ width:100%; left:0; }
.nav-tel{
  padding:.6em 1.3em; border:1px solid currentColor; border-radius:2em;
  font-size:.82rem; letter-spacing:.08em; color:var(--cream); white-space:nowrap;
  transition:.45s var(--ease);
}
.scrolled .nav-tel{ color:var(--gold-deep); border-color:var(--gold); }
.nav-tel:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

.nav-toggle{ display:none; flex-direction:column; gap:5.5px; background:none; border:none; cursor:pointer; padding:8px; z-index:101; }
.nav-toggle span{ width:27px; height:1.5px; background:var(--cream); transition:.4s var(--ease); }
.scrolled .nav-toggle span{ background:var(--ink); }

/* ===== Hero ===== */
.hero{
  position:relative; height:100svh; min-height:620px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--cream); overflow:hidden;
}
.hero-bg{ position:absolute; inset:-8% 0; will-change:transform; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); animation:heroZoom 11s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(10,8,6,.55) 100%),
    linear-gradient(180deg,rgba(10,8,6,.45) 0%,rgba(10,8,6,.15) 38%,rgba(10,8,6,.75) 100%);
}
.hero-inner{ position:relative; z-index:2; padding:0 1.5rem; }
.hero-sub{ font-size:.95rem; letter-spacing:.5em; margin-bottom:1.8rem; text-indent:.5em; opacity:0; animation:fadeUp 1.1s 1.5s var(--ease) forwards; }
.hero-title{ font-size:clamp(4.4rem,13vw,9.5rem); font-weight:600; letter-spacing:.12em; line-height:1; text-indent:.12em; opacity:0; animation:fadeUp 1.2s 1.7s var(--ease) forwards; text-shadow:0 4px 40px rgba(0,0,0,.4); }
.hero-en{ font-family:var(--en); font-size:clamp(1rem,2.6vw,1.45rem); letter-spacing:.6em; margin-top:1.1rem; text-indent:.6em; opacity:0; animation:fadeUp 1.1s 1.95s var(--ease) forwards; }
.hero-copy{
  position:absolute; right:clamp(1.6rem,4vw,3.4rem); top:50%; transform:translateY(-50%); z-index:2;
  writing-mode:vertical-rl; font-size:clamp(1rem,1.5vw,1.2rem); letter-spacing:.3em; line-height:1;
  color:var(--cream); opacity:0; animation:fadeIn 1.4s 2.3s var(--ease) forwards;
  padding-left:1.4rem; border-left:1px solid rgba(216,181,114,.5);
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--en); font-size:.72rem; letter-spacing:.35em; color:var(--cream);
  opacity:0; animation:fadeIn 1s 2.6s var(--ease) forwards;
}
.scroll-line{ width:1px; height:56px; background:rgba(246,241,231,.5); position:relative; overflow:hidden; }
.scroll-line::after{ content:""; position:absolute; top:-56px; left:0; width:100%; height:56px; background:var(--gold-lt); animation:scrollDown 2.2s var(--ease) infinite; }
@keyframes scrollDown{ 0%{transform:translateY(0);} 60%,100%{transform:translateY(112px);} }

/* ===== Section base ===== */
.section{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(5.5rem,12vw,10rem) clamp(1.8rem,5vw,3rem); }
.section-head{ text-align:center; margin-bottom:3.6rem; }
.label{ margin-bottom:1.2rem; }
.label span{
  position:relative; font-family:var(--en); font-size:.82rem; letter-spacing:.42em; text-indent:.42em; color:var(--gold-deep);
  padding:0 1.4em;
}
.label span::before,.label span::after{ content:""; position:absolute; top:50%; width:1.6em; height:1px; background:var(--gold); opacity:.6; }
.label span::before{ left:-.4em; } .label span::after{ right:-.4em; }
.section-title{ font-size:clamp(2rem,5.2vw,3.1rem); font-weight:500; letter-spacing:.12em; line-height:1.5; }
.ornament{ display:block; color:var(--gold); font-size:.6rem; margin-top:1.3rem; opacity:.7; }
.lead{ text-align:center; font-size:1.04rem; color:var(--ink-soft); margin-bottom:3.8rem; line-height:2.2; }
.note{ text-align:center; font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); margin-top:2.8rem; font-weight:300; }
.sp-br{ display:none; }

/* ===== Concept pillars ===== */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.2vw,3rem); }
.pillar{ text-align:center; }
.pillar-img{ position:relative; overflow:hidden; aspect-ratio:4/5; margin-bottom:1.8rem; }
.pillar-img::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(246,241,231,.18); pointer-events:none; }
.pillar-img img{ height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.pillar:hover .pillar-img img{ transform:scale(1.07); }
.pillar-no{ font-family:var(--serif); color:var(--gold); font-size:1.3rem; letter-spacing:.2em; margin-bottom:.5rem; }
.pillar-no::after{ content:""; display:block; width:1.4rem; height:1px; background:var(--gold); opacity:.5; margin:.7rem auto 0; }
.pillar h3{ font-size:1.4rem; font-weight:600; letter-spacing:.09em; margin-bottom:1rem; }
.pillar p{ font-size:.94rem; color:var(--ink-soft); line-height:2; }

/* ===== Parallax dividers ===== */
.divider{ position:relative; height:clamp(360px,58vh,560px); display:grid; place-items:center; overflow:hidden; }
.divider-bg{ position:absolute; inset:-12% 0; will-change:transform; }
.divider-bg img{ width:100%; height:100%; object-fit:cover; }
.divider-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,6,.5),rgba(10,8,6,.35) 50%,rgba(10,8,6,.6)); }
.divider-phrase{ position:relative; z-index:2; writing-mode:vertical-rl; display:flex; color:var(--cream); font-size:clamp(1.5rem,3.4vw,2.4rem); letter-spacing:.34em; line-height:1; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.divider-phrase span{ display:inline-block; opacity:0; transform:translateY(-18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.divider-phrase.in span{ opacity:1; transform:none; }
.divider-phrase span:nth-child(2){ transition-delay:.06s } .divider-phrase span:nth-child(3){ transition-delay:.12s }
.divider-phrase span:nth-child(4){ transition-delay:.18s } .divider-phrase span:nth-child(5){ transition-delay:.24s }
.divider-phrase span:nth-child(6){ transition-delay:.3s } .divider-phrase span:nth-child(7){ transition-delay:.36s }
.divider-phrase span:nth-child(8){ transition-delay:.42s } .divider-phrase span:nth-child(9){ transition-delay:.48s }
.divider-phrase span:nth-child(10){ transition-delay:.54s }

/* ===== Menu ===== */
.menu{ background:
    radial-gradient(80% 60% at 50% 0%, rgba(236,226,209,.55), transparent 70%); }
.course-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(26,23,20,.4); }
.course{ position:relative; background:var(--paper); padding:2.6rem clamp(1.8rem,3vw,2.8rem); transition:background .5s var(--ease); }
.course:hover{ background:#fffdf8; }
.course.featured{ background:#fffdf7; }
.course.featured::before{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--gold); opacity:.5; pointer-events:none; }
.course-tag{ position:absolute; top:1.5rem; right:1.5rem; font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; color:#fff; background:var(--gold); padding:.3em 1.1em; border-radius:2em; }
.course-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.course-head h3{ font-size:1.32rem; font-weight:600; letter-spacing:.06em; }
.course-price{ font-family:var(--en); font-size:2rem; color:var(--gold-deep); font-weight:500; white-space:nowrap; }
.course-price span{ font-family:var(--sans); font-size:.78rem; color:var(--ink-soft); margin-left:.25em; }
.course-desc{ font-size:.95rem; color:var(--ink-soft); line-height:2; }

/* ===== Gallery ===== */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.5vw,1.2rem); }
.gallery-grid figure{ position:relative; overflow:hidden; aspect-ratio:1/1; }
.gallery-grid figure::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(246,241,231,.15); pointer-events:none; }
.gallery-grid img{ height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery-grid figure:hover img{ transform:scale(1.08); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem 1rem; color:var(--cream);
  font-size:.96rem; letter-spacing:.16em; text-align:center;
  background:linear-gradient(transparent,rgba(10,8,6,.72)); opacity:0; transform:translateY(8px); transition:.5s var(--ease);
}
.gallery-grid figure:hover figcaption{ opacity:1; transform:none; }

/* ===== Sake ===== */
.sake{ max-width:none; background:var(--dark); color:var(--cream); overflow:hidden; }
.sake-inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.4rem,5vw,5rem); align-items:center; }
.sake-img{ position:relative; overflow:hidden; aspect-ratio:3/2; }
.sake-img::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(216,181,114,.3); }
.sake-img img{ height:100%; object-fit:cover; }
.sake-text .label{ text-align:left; }
.sake-text .label span{ color:var(--gold-lt); padding-left:0; }
.sake-text .label span::before{ display:none; }
.sake-text .label span::after{ right:auto; left:calc(100% + .2em); width:2.4em; }
.sake-text .section-title{ text-align:left; color:var(--cream); margin-bottom:1.8rem; }
.sake-text p{ color:rgba(246,241,231,.78); font-size:1rem; line-height:2.1; }

/* ===== Interior ===== */
.interior{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.interior-text .label{ text-align:left; }
.interior-text .label span{ padding-left:0; }
.interior-text .label span::before{ display:none; }
.interior-text .label span::after{ right:auto; left:calc(100% + .2em); width:2.4em; }
.interior-text .section-title{ text-align:left; margin-bottom:1.8rem; }
.interior-text p{ color:var(--ink-soft); font-size:1rem; line-height:2.1; }
.interior-images{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.4vw,1.1rem); }
.interior-images figure{ position:relative; overflow:hidden; }
.interior-images figure::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(26,23,20,.1); }
.interior-images img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.interior-images figure:hover img{ transform:scale(1.06); }
.interior-images .big{ grid-column:1 / -1; aspect-ratio:16/9; }
.interior-images figure:not(.big){ aspect-ratio:4/3; }

/* ===== Info ===== */
.info{ background:var(--dark); color:var(--cream); max-width:none; }
.info .section-title{ color:var(--cream); }
.info-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
.info dl div{ display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:1.4rem 0; border-bottom:1px solid rgba(246,241,231,.14); }
.info dt{ font-size:.95rem; letter-spacing:.18em; color:var(--gold-lt); }
.info dd{ font-size:.98rem; line-height:1.85; }
.info dd a{ border-bottom:1px solid rgba(181,142,76,.5); }
.info dd .sub{ font-family:var(--sans); font-size:.8rem; color:rgba(246,241,231,.55); font-weight:300; }
.reserve-cta{ text-align:center; margin:4.8rem auto 0; }
.reserve-cta > p:first-child{ font-size:1rem; letter-spacing:.22em; margin-bottom:1.3rem; }
.btn-tel{
  display:inline-block; font-family:var(--en); font-size:clamp(2rem,6vw,3rem); letter-spacing:.08em; color:var(--cream);
  padding:.22em .7em; border:1px solid var(--gold); border-radius:.2em; transition:.45s var(--ease); position:relative;
}
.btn-tel:hover{ background:var(--gold); color:var(--dark); }
.cta-note{ font-family:var(--sans); font-size:.82rem; font-weight:300; color:rgba(246,241,231,.55); margin-top:1.3rem; }
.btn-gnavi{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.8rem;
  font-family:var(--sans); font-size:.92rem; font-weight:400; letter-spacing:.08em; color:var(--cream);
  padding:.85em 2em; border:1px solid rgba(246,241,231,.4); border-radius:2em;
  transition:.45s var(--ease);
}
.btn-gnavi .ext{ font-size:.85em; color:var(--gold-lt); transition:transform .4s var(--ease); }
.btn-gnavi:hover{ background:rgba(246,241,231,.06); border-color:var(--gold); color:#fff; }
.btn-gnavi:hover .ext{ transform:translate(2px,-2px); }

/* ===== Access ===== */
.access{ position:relative; z-index:2; height:clamp(340px,46vh,500px); }
.map{ width:100%; height:100%; filter:grayscale(.3) contrast(1.03) brightness(.98); }
.map iframe{ display:block; }

/* ===== Footer ===== */
.site-footer{ position:relative; z-index:2; background:var(--dark-2); color:var(--cream); text-align:center; padding:3.8rem 1.5rem 2.6rem; border-top:1px solid rgba(246,241,231,.1); }
.footer-brand{ display:flex; flex-direction:column; align-items:center; gap:.7rem; margin-bottom:1.5rem; }
.footer-brand .brand-mark{ width:2.7rem; height:2.7rem; color:var(--gold-lt); }
.footer-name{ font-size:1.6rem; letter-spacing:.26em; text-indent:.26em; }
.footer-en{ font-family:var(--en); font-size:.8rem; letter-spacing:.55em; text-indent:.55em; color:var(--gold-lt); }
.footer-tagline{ font-size:1rem; letter-spacing:.12em; color:var(--cream); margin-bottom:1.4rem; }
.footer-addr{ font-size:.86rem; color:rgba(246,241,231,.68); margin-bottom:.9rem; line-height:1.9; }
.footer-copy{ font-family:var(--en); font-size:.74rem; letter-spacing:.18em; color:rgba(246,241,231,.42); }

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

/* ===== Responsive ===== */
@media (max-width:960px){
  .interior{ grid-template-columns:1fr; }
  .sake-inner{ grid-template-columns:1fr; }
  .interior-text .label, .interior-text .section-title, .sake-text .label, .sake-text .section-title{ text-align:center; }
  .interior-text .label span::after, .sake-text .label span::after{ display:none; }
}
@media (max-width:880px){
  .rail,.frame{ display:none; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.7rem;
    background:rgba(16,13,10,.98); padding:2rem 2.6rem; transform:translateX(100%);
    transition:transform .5s var(--ease);
  }
  .nav.open{ transform:none; }
  .nav > a:not(.nav-tel), .scrolled .nav > a:not(.nav-tel){ color:var(--cream); text-align:left; }
  .nav .ja{ font-size:1.15rem; }
  .nav .en{ display:inline; margin-left:.6em; }
  .nav-tel, .scrolled .nav-tel{ color:var(--cream); border-color:var(--gold); margin-top:.6rem; font-size:.9rem; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span{ background:var(--cream); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .pillars{ grid-template-columns:1fr; max-width:420px; margin:0 auto; gap:3rem; }
  .course-list{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .info-grid{ grid-template-columns:1fr; gap:0; }
  .hero-copy{ font-size:1rem; right:1.2rem; }
  .sp-br{ display:inline; }
}
@media (max-width:480px){
  :root{ --frame:8px; }
  .info dl div{ grid-template-columns:5.5rem 1fr; gap:.6rem; }
  .hero-sub{ letter-spacing:.32em; }
  .interior-images{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal,.divider-phrase span{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  .hero-bg img{ transform:none; }
}