@font-face{font-family:'Kanit';src:url('fonts/Kanit-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Kanit';src:url('fonts/Kanit-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Kanit';src:url('fonts/Kanit-900i.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Nimbus';src:url('fonts/NimbusSans.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'ZenKaku';src:url('fonts/ZenKaku-sub.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  
  --amber-100:#FFF0D5; --amber-400:#F8B800; --amber-800:#6D5003;
  
  --pink-300:#ECAEA1;
  
  --n-50:#FCF8F3; --n-100:#F7F0E7; --n-200:#EBE3D9; --n-500:#8B857D; --n-700:#514C46; --n-900:#1D1A17; --n-950:#110F0D;

  
  --t-12:.75rem; --t-14:.875rem; --t-15:.9375rem; --t-17:1.0625rem; --t-19:1.1875rem; --t-22:1.375rem;
  --t-h3:clamp(1.25rem,1.1rem + .5vw,1.5rem); --t-h2:clamp(2rem,1.4rem + 2.6vw,3.5rem); --t-jp:clamp(2.6rem,1.4rem + 4vw,4.4rem);

  --gutter:20px; --pad:72px; --radius:14px; --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --sans:'Nimbus',Helvetica,Arial,sans-serif; --head:'Kanit','Nimbus',Helvetica,sans-serif;
}
@media(min-width:900px){:root{--gutter:48px;--pad:120px}}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:var(--t-17)/1.55 var(--sans);color:var(--n-950);background:var(--n-50);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--n-950);outline-offset:3px}
.tone-ink :focus-visible{outline-color:var(--amber-400)}
h2{font:italic 900 var(--t-h2)/1 var(--head);letter-spacing:-.005em;text-transform:uppercase}
h3{font:700 var(--t-h3)/1.2 var(--head);margin-top:var(--s3)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--pad) 0}


.tone-ink{background:var(--n-950);color:var(--n-100)}
.tone-light{background:var(--n-100)}
.tone-paper{background:var(--n-50)}
.tone-amber{background:var(--amber-400)}
.tone-pink{background:var(--pink-300)}


.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1.5px solid currentColor;border-radius:40px;font:700 var(--t-15)/1 var(--head);text-decoration:none;letter-spacing:.01em;transition:background .2s,color .2s}
.btn-ink{background:var(--n-950);color:var(--amber-400);border-color:var(--n-950)}
.btn-amber{background:var(--amber-400);color:var(--n-950);border-color:var(--amber-400)}
.btn-pink{background:var(--pink-300);color:var(--n-950);border-color:var(--pink-300)}
.btn:hover{filter:brightness(1.06)}


.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px var(--gutter);transition:background .3s,box-shadow .3s}
.bar.solid{background:rgba(252,248,243,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(17,15,13,.08)}
.mark{display:inline-flex;align-items:center;min-height:48px;margin-right:auto;opacity:0;pointer-events:none;transition:opacity .3s}
.mark img{width:128px}
.bar.solid .mark{opacity:1;pointer-events:auto}
.links{display:flex;gap:4px}

@media(min-width:900px){.mark{margin-right:8px}.links{margin-right:auto}}
@media(min-width:1100px){.mark{position:absolute;left:50%;transform:translateX(-50%);margin:0}}

.links a,.menu{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:40px;font:700 var(--t-17)/1 var(--head);color:var(--n-950);text-decoration:none;background:none;border:0;cursor:pointer}
.links a:hover{background:rgba(17,15,13,.08)}
.bar .pill{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:40px;background:var(--n-950);color:var(--amber-400);font:700 var(--t-17)/1 var(--head);text-decoration:none}
.menu{display:none;border:1.5px solid var(--n-950)}
@media(max-width:899px){
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--gutter) 16px;background:rgba(252,248,243,.98);box-shadow:0 12px 24px rgba(17,15,13,.1)}
  .bar.open .links{display:flex}
  .bar.open{background:rgba(252,248,243,.98)}
  .menu{display:inline-flex}
  .mark img{width:104px}
}
.hero{position:relative;overflow-x:clip;overflow-y:visible;z-index:2;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding:96px var(--gutter) 0;background:var(--amber-400)}
.hcopy{position:relative;z-index:3;max-width:min(640px,100%)}
@media(min-width:900px){.hcopy h1{max-width:600px}}
.hcopy h1 img{width:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.info{margin-top:28px;font:700 var(--t-19)/1.35 var(--head);display:flex;flex-direction:column;gap:2px}
.cta{display:flex;gap:20px;align-items:center;margin-top:22px;flex-wrap:wrap}
.tlink{display:inline-flex;align-items:center;min-height:48px;font:700 var(--t-17)/1 var(--head);color:var(--n-950);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bowl{position:relative;z-index:2;max-width:none;width:118vw;margin:28px 0 -38vw -4vw;will-change:transform;filter:drop-shadow(0 30px 40px rgba(40,25,0,.35));transform:translateY(calc(var(--p,0)*8vh)) rotate(calc(var(--p,0)*90deg))}
@media(min-width:900px){
  .hero{grid-template-columns:minmax(420px,620px) 1fr;padding:0 0 0 calc(var(--gutter) + 40px)}
  .bowl{width:min(72vw,940px);margin:0 -14vw 0 0;justify-self:end;transform:translateY(calc(var(--p,0)*18vh)) rotate(calc(var(--p,0)*90deg))}
}
@media(prefers-reduced-motion:no-preference){
  .hcopy{animation:rise .8s .1s cubic-bezier(.2,.7,.2,1) both}
  .hero .bowl{animation:roll 1.1s cubic-bezier(.2,.7,.2,1) both}
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes roll{from{opacity:0;translate:12vw 0;rotate:-40deg}}


.acts{display:flex;gap:var(--s1);flex-wrap:wrap}
.acts.left{justify-content:flex-start;margin:var(--s3) 0 0}


.ramen{position:relative;z-index:1;padding-top:calc(30vw + 8vh)}
@media(min-width:900px){.ramen{padding-top:22vh}}
.rail{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);padding-bottom:var(--pad)}
.ramen.is-pinned .rail{position:sticky;top:0;height:100svh;overflow:hidden;scroll-snap-type:none;display:flex;align-items:center;padding:0}
.track-h{display:flex;align-items:center;gap:24px;width:max-content;padding:0 var(--gutter);will-change:transform}
@media(min-width:900px){.track-h{padding:0 18vw 0 calc(var(--gutter) + 40px);gap:32px}}
.panel{flex:none;scroll-snap-align:start}
.intro{width:min(84vw,440px)}
.intro .lead{margin:var(--s3) 0}
.stamp{display:grid;place-items:center;width:150px;aspect-ratio:1;border-radius:50%;background:var(--pink-300);margin-top:var(--s3)}
.stamp span{font:700 var(--t-22)/1 'ZenKaku',var(--head);letter-spacing:.08em;margin-right:-.08em}
.shot{margin:0}
.shot img{height:min(62svh,560px);width:auto;aspect-ratio:1;object-fit:cover}
@media(max-width:599px){.shot img{height:auto;width:78vw}}
.card{width:min(78vw,340px);background:var(--n-100);border-top:4px solid var(--pink-300);border-radius:0 0 var(--radius) var(--radius);padding:28px 26px 30px}
.card h3{font:700 var(--t-22)/1.2 var(--head);margin:0 0 12px}
.card small{display:inline-block;margin-left:6px;padding:3px 9px;border-radius:20px;background:var(--pink-300);font:700 var(--t-12)/1.3 var(--head);vertical-align:3px}
.card p{font-size:var(--t-15);color:var(--n-700);line-height:1.6}
.outro{width:min(70vw,280px);display:grid;place-items:center}
.lead{font-size:var(--t-19);color:var(--n-950);line-height:1.5}


.sec-head{max-width:620px;margin-bottom:72px}
.sec-head .lead{margin-top:var(--s2);color:var(--n-700)}
.row{display:grid;gap:var(--s3);align-items:center;margin-bottom:72px}
.row img{width:100%;aspect-ratio:4/3;object-fit:cover}
.row-copy h3{font:italic 900 var(--t-h2)/1 var(--head);text-transform:uppercase;margin:0 0 var(--s2)}
.row-copy p{font-size:var(--t-17);color:var(--n-700);line-height:1.6}
@media(min-width:900px){.row{grid-template-columns:1.25fr 1fr;gap:88px;margin-bottom:112px}.row.flip img{order:2}}
.smalls{border-top:2px solid var(--pink-300);padding-top:48px;text-align:center;max-width:760px;margin:0 auto 96px}
.smalls h3{font:700 var(--t-22)/1.2 var(--head);margin-bottom:var(--s2)}
.smalls p{font-size:var(--t-17);color:var(--n-700);line-height:1.7}


.room{padding:var(--pad) 0}
.room-hero{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.room-hero img{width:100%;height:min(78svh,52vw);object-fit:cover}
.room-hero::after{content:'';position:absolute;inset:0 var(--gutter);border-radius:var(--radius);background:linear-gradient(0deg,rgba(17,15,13,.82) 0%,rgba(17,15,13,0) 55%)}
.room-copy{position:absolute;z-index:1;left:calc(var(--gutter) * 2);right:calc(var(--gutter) * 2);bottom:var(--s4);color:var(--n-50)}
.room-copy p{font-size:var(--t-19);margin:var(--s1) 0 var(--s3);max-width:32ch}
@media(min-width:900px){.room-copy{left:calc(var(--gutter) + 48px);bottom:56px}}
.room-trio{display:grid;gap:var(--s2);margin-top:var(--s2)}
.room-trio img{width:100%;aspect-ratio:1;object-fit:cover}
@media(min-width:700px){.room-trio{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.room-hero img{height:68svh}}


.find-grid{display:grid;gap:var(--s4)}
.find img{width:100%;aspect-ratio:4/5;object-fit:cover}
.find p{font-size:var(--t-17)}
.find .addr{font:700 var(--t-22)/1.3 var(--head);margin-top:var(--s3)}
.find h3{font-size:var(--t-15);color:var(--n-700)}
.find a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-weight:700}
@media(min-width:900px){.find-grid{grid-template-columns:.8fr 1fr;gap:80px;align-items:center}}

.foot{padding:48px 0}
.foot-grid{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.foot-logo{width:160px}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-15);color:var(--n-200)}


.marquee{overflow:hidden}
.track{display:flex;gap:var(--s1);width:max-content;animation:slide 60s linear infinite}
.track img{width:240px;aspect-ratio:1;object-fit:cover;flex:none}
.marquee:hover .track,.marquee:active .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-50% - var(--s1) / 2))}}
@media(min-width:900px){.track img{width:320px}}
@media(prefers-reduced-motion:reduce){.track{animation:none}.marquee{overflow-x:auto}}


main img:not(.bowl){border-radius:var(--radius)}
.marquee .track img{border-radius:var(--radius)}



.board-wrap{display:grid;gap:var(--s4);align-items:start}
.board-wrap .big{width:100%;aspect-ratio:4/5;object-fit:cover}
.board-grid{display:grid;gap:var(--s2)}
.board-grid .card{width:auto}
@media(min-width:700px){.board-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.board-wrap{grid-template-columns:.9fr 1.3fr;gap:56px}.board-wrap .big{position:sticky;top:96px}}
.board-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-bottom:56px}
.board-head .stamp{margin:0}
.board-head .lead{max-width:30ch}

.legal{flex-basis:100%;font-size:var(--t-12);color:var(--n-500);margin-top:var(--s1)}