/* Numachan editorial direction: warm local character, honest imagery, clear actions. */
:root {
  --paper:#f7f2e8;
  --cream:#eadbc5;
  --wall:#d8c9b6;
  --ink:#281b14;
  --brown:#633a22;
  --brown-2:#815030;
  --red:#a63f2a;
  --gold:#865427;
  --muted:#57483d;
  --line:rgba(99,58,34,.3);
  --shadow:none;
}
html{scroll-padding-top:84px}
body{font-size:16px;line-height:1.85;letter-spacing:.01em}
::selection{background:#a63f2a;color:#fff}
a:focus-visible{outline:3px solid #a63f2a;outline-offset:4px}
.shell{width:min(1320px,calc(100% - 88px))}
.progress{height:4px;background:var(--red)}

/* Navigation */
.header{height:82px;grid-template-columns:minmax(295px,1fr) auto minmax(190px,240px);background:rgba(247,242,232,.96);border-bottom:1px solid var(--brown)}
.brand{border-right:0;padding-inline:clamp(28px,3.5vw,60px);gap:12px}
.brand>span:last-child{font-size:25px;white-space:nowrap;letter-spacing:.035em}
.brand small{font-size:10.5px;letter-spacing:.22em;color:var(--brown);line-height:1.5}
.mark{width:49px;height:49px;flex:0 0 49px;margin:0;border-width:1.5px;font-size:28px;transform:rotate(-7deg)}
.nav{gap:clamp(14px,2vw,34px);padding-inline:18px;font-size:15px;font-weight:700}
.nav a:after{border-width:2px;bottom:-9px}
.reserve{background:var(--red);font-size:16px;transition:background .25s ease,letter-spacing .25s ease}
.reserve:hover{background:#7d2d1c;letter-spacing:.1em}

/* Cover: real place and its owner lead the entire experience */
.hero{min-height:760px;height:min(900px,100svh);background:var(--cream);border-bottom:1px solid var(--brown)}
.hero-bg{left:37%;margin:0;overflow:hidden}
.hero-bg img{object-position:61% center;animation:heroEnter 1.5s cubic-bezier(.2,.7,.2,1) both;filter:saturate(.9) contrast(1.02)}
.hero:after{pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 34%,rgba(247,242,232,.97) 40%,rgba(247,242,232,.15) 55%,transparent 70%)}
.hero:before{display:none}
@keyframes heroEnter{from{transform:scale(1.055);filter:saturate(.65)}to{transform:scale(1);filter:saturate(.9) contrast(1.02)}}
.hero-copy{max-width:650px;padding-top:clamp(175px,24vh,255px)}
.hero-copy.shell{width:min(650px,calc(100% - 88px));margin-left:max(44px,calc((100vw - 1320px)/2))}
.eyebrow{font-size:13px;letter-spacing:.2em;color:var(--brown);font-weight:800}
.hero .eyebrow:before{content:"";display:inline-block;vertical-align:middle;width:38px;border-top:2px solid var(--red);margin-right:14px}
.hero h1{font-size:clamp(48px,5.45vw,88px);font-weight:600;letter-spacing:-.055em;line-height:1.33;margin:24px 0 28px;white-space:nowrap}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-lead{font-size:17px;line-height:2;max-width:none;color:#443127;font-weight:600;margin-bottom:32px}
.actions{gap:11px}
.btn{position:relative;min-width:170px;min-height:54px;padding:13px 18px;font-size:15px;line-height:1.3;letter-spacing:.02em;border-radius:0;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s ease}
.btn span:last-child{margin-left:18px;font-size:19px;line-height:1}
.btn.primary{background:var(--red);border-color:var(--red)}
.btn.primary:hover{background:#7d2d1c;border-color:#7d2d1c;color:#fff}
.btn.instagram{background:var(--paper);border-color:var(--brown)}
.hero-card{right:clamp(30px,5vw,84px);bottom:42px;width:min(405px,31vw);padding:22px 25px;background:var(--paper);border:1px solid var(--brown);box-shadow:7px 7px 0 rgba(58,34,20,.18)}
.hero-card:before{content:"NISHIOJI / KYOTO";display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--red);margin-bottom:8px}
.hero-card b{font-size:19px;line-height:1.5}
.hero-card p{font-size:13px;line-height:1.7;color:var(--muted)}
.scroll-cue{position:absolute;z-index:3;bottom:34px;left:max(44px,calc((100vw - 1320px)/2));display:flex;align-items:center;gap:16px;color:var(--brown);font-size:11px;font-weight:800;letter-spacing:.18em}
.scroll-cue-line{display:block;width:76px;height:1px;background:var(--red);transform-origin:left;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{50%{transform:scaleX(.55)}}
.intro-band{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:106px;padding-inline:clamp(25px,5vw,80px);background:var(--red);color:var(--paper);border-bottom:1px solid var(--brown)}
.intro-band span:first-child,.intro-band span:last-child{font-family:var(--serif);font-size:clamp(24px,3.4vw,50px);letter-spacing:-.03em;line-height:1}
.intro-band span:nth-child(2){font-size:12px;font-weight:800;letter-spacing:.23em;white-space:nowrap}
.intro-band span:last-child{opacity:.35}

/* Editorial section rhythm */
.section{padding:clamp(88px,10vw,154px) 0;border-bottom:1px solid var(--line)}
.head{grid-template-columns:235px 1fr;align-items:start;gap:clamp(30px,5vw,85px);margin-bottom:clamp(42px,5vw,76px)}
.no{display:flex;align-items:center;gap:16px;font-size:13px;letter-spacing:.16em;color:var(--red);white-space:nowrap}
.no:before{content:"";display:block;width:35px;border-top:2px solid currentColor}
.title{font-size:clamp(43px,5.2vw,78px);letter-spacing:-.035em;line-height:1.27;font-weight:600}
.title small{font-family:var(--sans);font-size:12px;letter-spacing:.23em;font-weight:800;color:var(--brown);margin-top:23px}
.reason{background:var(--paper)}
.reason-grid{gap:0;border-top:1px solid var(--brown);border-bottom:1px solid var(--brown)}
.reason-card{position:relative;min-height:320px;padding:37px 30px 38px;background:transparent;border:0;border-right:1px solid var(--line);transition:background .35s ease}
.reason-card:first-child{padding-left:0}.reason-card:last-child{border-right:0}
.reason-card:hover{background:#efe3d1}
.reason-num{font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.15em;color:var(--red)}
.reason-card h3{font-size:clamp(22px,2vw,30px);line-height:1.4;letter-spacing:-.035em;margin:42px 0 15px}
.reason-card p{font-size:16px;line-height:1.85;color:var(--muted);max-width:22em}

.story{background:#eadcc9}
.story-grid{grid-template-columns:1.02fr .98fr;gap:clamp(55px,7vw,110px)}
.portrait{height:clamp(560px,55vw,780px);margin:0;box-shadow:none;overflow:hidden}
.portrait img{object-position:center 24%;filter:saturate(.82) contrast(1.04);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portrait:hover img{transform:scale(1.035)}
.portrait:after{content:"NUMA CHAN / OWNER";right:auto;left:20px;top:auto;bottom:18px;font-size:13px;font-weight:800;letter-spacing:.16em;background:var(--paper);color:var(--brown);padding:7px 12px}
.story-copy{padding:45px 0 20px}
.story h2{font-size:clamp(39px,4.4vw,65px);line-height:1.35;letter-spacing:-.045em;margin:30px 0 38px}
.story p{font-size:17px;color:var(--ink);line-height:2.05;max-width:38em}
.story .eyebrow{font-size:13px;color:var(--red)}
.quote{font-size:23px;line-height:1.8;color:var(--brown);border-top:2px solid var(--brown);border-bottom:0;margin-top:40px;padding:25px 0 0}

.menu{background:#2f2119;color:#f8f0e4}
.menu .no,.menu .title small{color:#e9b77e}
.menu-grid{grid-template-columns:1.05fr .95fr;gap:17px}
.food-main{min-height:650px;margin:0;box-shadow:none}
.food-main img,.food-card img,.use-card img,.photo-strip img{transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.food-main:hover img,.food-card:hover img,.use-card:hover img,.photo-strip figure:hover img{transform:scale(1.045)}
.food-main:after{left:0;right:0;bottom:0;padding:25px 29px;background:linear-gradient(0deg,rgba(32,21,16,.9),rgba(32,21,16,.05));font-size:24px;line-height:1.5}
.food-list{gap:17px}
.food-card{min-height:0;background:#efe5d8}
.food-card figure{height:214px;overflow:hidden}
.food-card div{padding:16px 18px 21px}
.food-card b{font-size:20px}
.food-card p{font-size:14px;line-height:1.6;color:#57483d}

.lunch{background:var(--paper)}
.use-grid{gap:16px}
.use-card{min-height:620px;box-shadow:none}
.use-card:after{background:linear-gradient(0deg,rgba(25,16,11,.86),rgba(25,16,11,.42) 39%,transparent 77%)}
.use-copy{left:clamp(25px,3vw,48px);right:clamp(25px,3vw,48px);bottom:clamp(27px,3vw,44px)}
.use-copy>span{font-size:14px;font-weight:800;letter-spacing:.25em;color:#fff}
.use-copy h3{font-size:clamp(28px,2.6vw,43px);line-height:1.42;white-space:normal;letter-spacing:-.04em}
.use-copy p{font-size:16px;white-space:normal;line-height:1.75;max-width:29em}
.use-copy .btn{width:min(100%,370px);font-size:16px;background:var(--paper);color:var(--brown);border-color:var(--paper)}

.space{background:#e7d8c2}
.space-grid{grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
.space-main{height:670px;margin:0;box-shadow:none;overflow:hidden}
.space-main img,.space-copy figure img{filter:saturate(.88)}
.space-copy{gap:35px}
.space-copy figure{height:355px;box-shadow:none;overflow:hidden}
.space-text{border-top:2px solid var(--brown);padding-top:23px}
.space-text h3{font-size:29px;line-height:1.45}
.space-text p{font-size:16px;line-height:1.9;color:var(--muted)}

.voice{background:var(--paper)}
.voice-grid{gap:0;border-top:1px solid var(--brown);border-bottom:1px solid var(--brown)}
.voice-card{min-height:260px;padding:38px 30px;background:transparent;border:0;border-right:1px solid var(--line);box-shadow:none}
.voice-card:first-child{padding-left:0}.voice-card:last-child{border:0}
.voice-card:before{content:"●";display:block;color:var(--red);font-size:15px;margin-bottom:22px}
.voice-card b{font-size:26px}
.voice-card p{font-size:16px;line-height:1.85;color:var(--muted)}

.insta{background:#eadcc9}
.photo-strip{grid-template-columns:1fr 1.1fr .9fr;gap:15px}
.photo-strip figure,.photo-strip figure:nth-child(2){height:430px;margin:0;box-shadow:none;position:relative}
.photo-strip figure:nth-child(2){transform:translateY(52px)}
.photo-strip figure:after{position:absolute;left:18px;bottom:16px;padding:5px 11px;background:var(--paper);color:var(--brown);font-size:12px;font-weight:800;letter-spacing:.08em}
.photo-strip figure:nth-child(1):after{content:"看板"}.photo-strip figure:nth-child(2):after{content:"今夜の一杯"}.photo-strip figure:nth-child(3):after{content:"西大路の店先"}
.insta .actions{margin-top:88px!important}

.faq{background:var(--paper)}
.faq-grid{gap:0 38px}
.faq-item{padding:27px 0 30px;border-top:1px solid var(--brown)}
.faq-item h3{font-family:var(--serif);font-size:23px;line-height:1.45}
.faq-item p{font-size:17px;line-height:1.8;color:var(--muted);font-weight:500}
.faq-item p:before{border-radius:0;background:var(--red);flex-basis:30px;width:30px;height:30px;font-size:18px;font-weight:700;margin-top:3px}

.access{background:#eadcc9}
.access-grid{grid-template-columns:1.18fr .82fr;gap:clamp(45px,6vw,95px)}
.row{grid-template-columns:115px 1fr;gap:20px;padding:19px 0;font-size:17px;line-height:1.7}
.row b{font-size:17px;letter-spacing:.05em}
.row a{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.map-panel{margin-top:32px}
.map-label{margin:0 0 12px;font-family:var(--serif);font-size:23px;font-weight:700;color:var(--brown)}
.map-panel iframe{display:block;width:100%;height:390px;border:1px solid var(--brown);background:#d9cbb9}
.map{margin-top:12px;padding:20px 22px;background:var(--brown);font-size:16px;font-weight:700}
.map:hover{background:var(--red)}
.hours{border-top:2px solid var(--brown)}
.hours h3{font-size:35px}
.hours-grid{grid-template-columns:95px 1fr;gap:10px 12px;font-size:16px;line-height:1.65}
.hours .actions{margin-top:30px!important}
.hours>p{font-size:14px!important;line-height:1.7}

.final{padding:clamp(100px,12vw,180px) 0;background:#633a22;text-align:left}
.final:before{opacity:.6;bottom:-.55em}
.final-inner{max-width:1320px}
.final .eyebrow{color:#f3c89d}
.final h2{font-size:clamp(64px,8.4vw,130px);line-height:1.18;letter-spacing:-.05em;margin:27px 0 42px}
.final p:not(.eyebrow){font-size:20px;line-height:1.9;color:#fff2e3!important;margin:0 0 40px!important}
.final .actions{justify-content:flex-start!important;max-width:775px}
.final .btn{min-width:180px;font-size:16px}
footer{padding:35px clamp(25px,5vw,80px) 110px;color:#f0dcca;background:#281b14;font-size:13px}
.reveal{opacity:1;transform:none}
.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.motion-ready .reveal.in{opacity:1;transform:none}
.reason-card:nth-child(2),.food-list .food-card:nth-child(2),.voice-card:nth-child(2){transition-delay:.09s}
.reason-card:nth-child(3),.voice-card:nth-child(3){transition-delay:.18s}

@media(max-width:1100px){
  .header{grid-template-columns:minmax(240px,1fr) auto 185px}
  .brand{padding-inline:20px}.brand>span:last-child{font-size:21px}.mark{width:43px;height:43px;flex-basis:43px;font-size:24px}
  .nav{gap:15px;font-size:13px}
  .hero h1{font-size:clamp(48px,5.1vw,68px)}
  .hero .actions{max-width:430px}.hero .btn{min-width:190px}
  .hero-card{width:35vw;right:24px}
  .food-card figure{height:170px}
}
@media(max-width:880px){
  html{scroll-padding-top:66px}
  .shell{width:calc(100% - 48px)}
  .header{height:66px;grid-template-columns:1fr 154px}
  .brand{padding-inline:20px}.brand>span:last-child{font-size:20px}.brand small{display:block;font-size:10px}.reserve{font-size:14px}
  .hero{min-height:800px;height:100svh}
  .hero-bg{left:33%}.hero-bg img{object-position:65% center}
  .hero:after{background:linear-gradient(90deg,var(--paper),rgba(247,242,232,.94) 33%,rgba(247,242,232,.2) 66%,transparent)}
  .hero-copy{padding-top:155px}
  .hero-copy.shell{width:min(565px,calc(100% - 48px));margin-left:24px}
  .hero h1{font-size:clamp(47px,6vw,67px)}
  .hero-card{display:none}
  .scroll-cue{left:24px}
  .head{grid-template-columns:1fr;gap:20px}
  .reason-grid,.story-grid,.menu-grid,.use-grid,.space-grid,.access-grid,.faq-grid{grid-template-columns:1fr}
  .reason-grid,.voice-grid{grid-template-columns:repeat(3,1fr)}
  .reason-card{padding:25px 18px;min-height:330px}.reason-card h3{margin-top:25px}
  .story-grid{gap:25px}.portrait{height:660px}.story-copy{padding-top:20px}
  .food-main{min-height:520px}.food-card figure{height:230px}
  .use-card{min-height:550px}
  .space-grid{gap:35px}.space-main{height:520px}.space-copy{grid-template-columns:1fr 1fr;gap:25px;align-items:center}.space-copy figure{height:320px}
  .voice-card{padding:25px 18px}.voice-card b{font-size:21px}
  .photo-strip figure,.photo-strip figure:nth-child(2){height:290px}
  .sticky-cta{left:12px;right:12px;bottom:12px;padding:7px;gap:7px;background:rgba(247,242,232,.97);border:1px solid var(--brown);box-shadow:0 10px 35px rgba(40,27,20,.2)}
  .sticky-cta a{font-size:13px;min-height:50px}.sticky-cta a:nth-child(3){border-color:var(--brown)}
}
@media(max-width:620px){
  .shell{width:calc(100% - 36px)}
  .header{height:62px;grid-template-columns:1fr 121px}
  .brand{padding-inline:12px;gap:8px}.brand>span:last-child{font-size:17px}.brand small{font-size:10px;letter-spacing:.1em}.mark{width:38px;height:38px;flex-basis:38px;font-size:22px}
  .reserve{font-size:12px;letter-spacing:0}
  .hero{height:100svh;min-height:650px;max-height:790px;background:var(--paper)}
  .hero-bg{inset:62px 0 auto;height:43%;left:0}
  .hero-bg img{object-position:72% 26%}
  .hero:after{inset:62px 0 auto;height:44%;background:linear-gradient(0deg,var(--paper),transparent 35%)}
  .hero-copy{position:absolute;left:0;right:0;bottom:28px;padding-top:0;max-width:none}
  .hero-copy.shell{width:calc(100% - 36px);margin:0 18px}
  .hero .eyebrow{font-size:11px;letter-spacing:.1em;margin:0 0 9px}.hero .eyebrow:before{width:20px;margin-right:8px}
  .hero h1{font-size:clamp(34px,9.8vw,48px);line-height:1.27;margin:0 0 12px;letter-spacing:-.065em}
  .hero-lead{font-size:14px;line-height:1.7;margin:0 0 15px}
  .hero-lead br{display:none}
  .hero .actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .hero .btn{min-width:0;min-height:46px;padding:8px 10px;font-size:13px}
  .hero .btn.instagram{display:none}
  .hero .btn span:last-child{font-size:17px;margin-left:5px}
  .scroll-cue{display:none}
  .intro-band{min-height:68px;padding:0 19px}.intro-band span:first-child{font-size:28px}.intro-band span:nth-child(2){font-size:10px;letter-spacing:.08em}.intro-band span:last-child{display:none}
  .section{padding:82px 0}
  .head{gap:13px;margin-bottom:35px}.no{font-size:11px;gap:10px}.no:before{width:22px}.title{font-size:clamp(37px,10vw,53px)}.title small{font-size:11px;margin-top:13px}
  .reason-grid,.voice-grid{grid-template-columns:1fr}
  .reason-card,.reason-card:first-child{padding:24px 0 30px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.reason-card:last-child{border-bottom:0}.reason-card h3{font-size:28px;margin:14px 0 9px}.reason-card p{font-size:16px}
  .portrait{height:480px}.story h2{font-size:40px}.story p{font-size:16px}.quote{font-size:20px}
  .food-main{min-height:390px}.food-main:after{font-size:20px;padding:16px}.food-list{grid-template-columns:1fr 1fr;gap:9px}.food-card figure{height:150px}.food-card div{padding:11px 11px 15px}.food-card b{font-size:17px}.food-card p{font-size:13px}
  .use-grid{gap:13px}.use-card{min-height:480px}.use-copy{left:20px;right:20px;bottom:20px}.use-copy h3{font-size:31px}.use-copy p{font-size:15px}.use-copy .btn{font-size:15px}
  .space-main{height:380px}.space-copy{grid-template-columns:1fr;gap:18px}.space-copy figure{height:320px}.space-text h3{font-size:26px}.space-text p{font-size:16px}
  .voice-card,.voice-card:first-child{padding:23px 0;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.voice-card:last-child{border-bottom:0}.voice-card:before{margin-bottom:8px}.voice-card b{font-size:24px}.voice-card p{font-size:16px}
  .photo-strip{grid-template-columns:1fr 1fr;gap:10px}.photo-strip figure,.photo-strip figure:nth-child(2){height:260px;transform:none}.photo-strip figure:nth-child(2){margin-top:38px}.photo-strip figure:nth-child(3){grid-column:1/3;height:200px}.insta .actions{margin-top:32px!important}
  .faq-grid{grid-template-columns:1fr}.faq-item h3{font-size:21px}.faq-item p{font-size:16px}
  .access-grid{gap:55px}.row{grid-template-columns:85px 1fr;gap:10px;font-size:16px}.row b{font-size:16px}.map-panel iframe{height:320px}.hours-grid{grid-template-columns:70px 1fr;font-size:15px}.hours .actions{display:grid;grid-template-columns:1fr 1fr}.hours .btn{font-size:14px;padding:10px}
  .final{padding:90px 0 115px}.final h2{font-size:clamp(56px,14vw,78px)}.final p:not(.eyebrow){font-size:17px}.final .actions{display:grid;grid-template-columns:1fr;gap:8px}.final .btn{min-width:0;font-size:16px;min-height:52px;padding:10px 16px}.final .btn span:last-child{margin-left:4px}
  footer{padding:28px 18px 100px;font-size:11px}
}
@media(max-width:390px){
  .hero{min-height:650px}.hero-bg{height:42%}.hero:after{height:43%}
  .hero h1{font-size:35px}.hero-lead{font-size:13.5px}
  .food-list{grid-template-columns:1fr 1fr}.food-card figure{height:128px}
  .hours-grid{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready .reveal{opacity:1;transform:none}
  .hero-bg img,.scroll-cue-line{animation:none!important}
  .food-main img,.food-card img,.use-card img,.photo-strip img,.portrait img{transition:none!important}
}