/* Lull hair — Shoplit sample */
:root{
  --paper:#FBFAF8;
  --greige:#E7E1D9;
  --greige-deep:#D6CEC3;
  --stone:#8A8177;
  --ink:#262421;
  --accent:#5E6E75;
  --line:#DDD6CC;
  --jp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --mark:"Jost",var(--jp);
  --wrap:1120px;
  --bar:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
p{max-width:36em}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(251,250,248,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.brand .mark{font-family:var(--mark);font-weight:400;font-size:30px;letter-spacing:.06em;line-height:1}
.brand .sub{font-family:var(--mark);font-size:13px;color:var(--stone);letter-spacing:.2em}
.sample{font-family:var(--mark);font-size:11px;letter-spacing:.14em;border:1px solid var(--ink);border-radius:4px;padding:1px 7px;align-self:center}
.nav{margin-left:auto;display:flex;gap:26px;font-size:14px}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:14px;letter-spacing:.08em;padding:12px 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .2s,color .2s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px auto;transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* hero (top page) */
.hero{position:relative;padding:56px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1fr 3.2fr;gap:40px;align-items:start}
.tategaki{grid-row:1 / span 2;writing-mode:vertical-rl;font-size:clamp(30px,3.6vw,46px);font-weight:500;letter-spacing:.32em;line-height:1.7;justify-self:center;margin-top:12px}
.tategaki .small{display:block;font-size:15px;font-weight:400;letter-spacing:.24em;color:var(--stone);margin-right:22px}
.hero-photo{position:relative;aspect-ratio:16/10;border-radius:2px;overflow:hidden;background:var(--greige)}
.hero-photo img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero-photo img.on{opacity:1}
.hero-foot{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:22px}
.hero-foot p{font-size:15px;color:var(--stone);max-width:none;white-space:nowrap}
.hero-foot .actions{display:flex;gap:12px}

/* sections */
.section{padding:96px 0;border-top:1px solid var(--line)}
.section.tint{background:var(--greige);border-top:0}
.h2{font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:.14em;margin-bottom:36px}
.h2 small{display:block;font-family:var(--mark);font-size:13px;letter-spacing:.24em;color:var(--stone);font-weight:400;margin-top:4px}
.lead{font-size:17px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .photo{aspect-ratio:4/3;overflow:hidden;background:var(--greige-deep)}
.split .photo.tall{aspect-ratio:3/4;max-width:420px}

/* concept list (top) */
.points{list-style:none;border-top:1px solid var(--ink)}
.points li{display:grid;grid-template-columns:12em 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.points b{font-weight:500}
.points span{color:#4a4640}

/* price list */
.price-group{margin-bottom:48px}
.price-group h3{font-size:17px;font-weight:500;letter-spacing:.14em;padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.price{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.price .name{flex:0 1 auto}
.price .name small{display:block;font-size:13px;color:var(--stone)}
.price .dots{flex:1;border-bottom:1px dotted var(--stone);transform:translateY(-6px);min-width:24px}
.price .yen{font-family:var(--mark);font-size:18px;letter-spacing:.04em;white-space:nowrap}
.note{font-size:13px;color:var(--stone);margin-top:12px}

/* styles (instagram picks) */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.styles a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--greige-deep);display:block}
.styles img{transition:transform .5s ease}
.styles a:hover img{transform:scale(1.04)}
.styles-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}

/* staff */
.staff{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.staff article{border-top:1px solid var(--ink);padding-top:20px}
.staff h3{font-size:19px;font-weight:500;letter-spacing:.12em}
.staff .role{font-size:13px;color:var(--stone);margin-bottom:12px}

/* info table */
.info{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.info th,.info td{text-align:left;padding:18px 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400}
.info th{width:9em;color:var(--stone);font-size:14px}
.map{aspect-ratio:4/3;background:var(--greige);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;border:1px solid var(--line)}
.map p{font-size:13px;color:var(--stone)}

/* faq */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--ink)}
summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;position:relative;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 22px;color:#4a4640}

/* page head (sub pages) */
.page-head{padding:72px 0 40px}
.page-head h1{font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:.16em}
.page-head p{color:var(--stone);margin-top:10px}

/* reserve band */
.reserve{background:var(--ink);color:var(--paper);padding:72px 0}
.reserve .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.reserve h2{font-size:24px;font-weight:500;letter-spacing:.14em}
.reserve p{color:#cfc8bf;font-size:14px;margin-top:6px}
.reserve .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.reserve .btn:hover{background:transparent;color:var(--paper)}
.reserve .btn.ghost{background:transparent;color:var(--paper)}

/* footer */
.site-foot{padding:48px 0 40px;font-size:13px;color:var(--stone)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-foot .brand .mark{font-size:24px;color:var(--ink)}
.disclaimer{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);width:100%}

/* mobile bottom bar */
.bar{display:none}

/* one load moment: hero text */
@media (prefers-reduced-motion:no-preference){
  .tategaki{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media (max-width:860px){
  :root{--bar:68px}
  .nav,.site-head .btn{display:none}
  .menu-toggle{display:block}
  .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 28px 20px}
  .nav.open a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .hero{padding:24px 0 56px}
  .hero .wrap{grid-template-columns:auto 1fr;gap:16px}
  .tategaki{font-size:24px;letter-spacing:.22em;margin-top:0}
  .tategaki .small{font-size:12px;margin-right:12px}
  .hero-photo{aspect-ratio:3/4}
  .tategaki{grid-row:auto}
  .hero-foot{grid-column:1/-1}
  .hero-foot p{white-space:normal}
  .hero-foot .actions{display:none}
  .section{padding:64px 0}
  .split,.staff{grid-template-columns:1fr;gap:32px}
  .split .photo.tall{max-width:none}
  .points li{grid-template-columns:1fr;gap:4px}
  .styles{grid-template-columns:repeat(2,1fr)}
  .bar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;height:68px;background:var(--paper);border-top:1px solid var(--line);padding:8px;gap:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .bar a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;border-radius:10px;border:1px solid var(--ink)}
  .bar a.main{background:var(--ink);color:var(--paper)}
  .wrap{padding:0 20px}
}