/* Actual restaurant photography, cut-out dishes and tactile menu paper. */
:root { --night: #201812; --paper-texture: url('assets/menu-paper.webp'); --sans: 'Noto Sans JP', sans-serif; --serif: var(--sans); --display: var(--sans); --receipt: #fffefb; --sunny: #f5cd64; }
body { background-image: var(--paper-texture); background-size: 768px auto; }
body::before { display: none; }
.hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.08) 64%, transparent); }
.hero-copy h1, .hero-description, .hero-copy .eyebrow, .watch-film { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero-image, .hero-video { filter: none; }
.hero { background: transparent; }
.hero-media { position: absolute; inset: 0; mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), rgba(0,0,0,.96) calc(100% - 210px), rgba(0,0,0,.75) calc(100% - 150px), rgba(0,0,0,.35) calc(100% - 80px), rgba(0,0,0,.06) calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), rgba(0,0,0,.96) calc(100% - 210px), rgba(0,0,0,.75) calc(100% - 150px), rgba(0,0,0,.35) calc(100% - 80px), rgba(0,0,0,.06) calc(100% - 28px), transparent 100%); }
.hero::after { display: none; }
.italian-strip { background: transparent; }

/* The first plate sits directly on paper, with a small overlapping menu note. */
.about { padding-top: 90px; padding-bottom: 105px; }
.about-photo { margin-top: 34px; min-height: 0; padding-bottom: 0; display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 0; }
.about-photo>img { width: 106%; height: auto; max-height: 580px; object-fit: contain; border-radius: 0; transform: rotate(-5deg); filter: drop-shadow(5px 22px 15px rgba(47,31,18,.20)); }
.about-photo-note { position: relative; right: auto; bottom: auto; z-index: 2; width: 260px; max-width: none; min-height: 210px; padding: 36px 30px 30px; margin-left: -12px; background: linear-gradient(135deg,#fffefb,#faf9f5); color: var(--ink); transform: rotate(4deg); mask: none; -webkit-mask: none; box-shadow: 3px 6px 8px rgba(30,20,10,.16), inset 0 0 1px rgba(30,20,10,.14); }
.about-photo::after { display: none; }
.about-photo-note::before { content: ""; position: absolute; left: 50%; top: -14px; width: 100px; height: 29px; background: rgba(230,204,140,.64); transform: translateX(-50%) rotate(-8deg); clip-path: polygon(2% 0,98% 2%,100% 7%,98% 13%,100% 21%,98% 28%,100% 36%,98% 43%,100% 50%,98% 59%,100% 68%,98% 77%,100% 86%,98% 94%,99% 100%,0 98%,2% 91%,0 82%,2% 74%,0 65%,2% 57%,0 49%,2% 40%,0 32%,2% 24%,0 15%,2% 8%); }
.about-photo-note>span { font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1.3; color: var(--green); }

/* A warm, real view of the bar becomes the whole menu's setting. */
.menu-section { background: var(--night); padding: 130px 0 130px; }
.section-scenery { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.section-scenery img { width: 100%; height: 100%; object-fit: cover; }
.menu-scenery img { object-position: 58% 45%; opacity: .72; }
.menu-scenery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,13,9,.55), rgba(18,13,9,.38) 35%, rgba(18,13,9,.76) 80%, var(--night)), linear-gradient(90deg, rgba(18,13,9,.24), transparent 60%); }
.menu-section .section-heading { align-items: center; margin-bottom: 38px; }
.menu-section .section-intro { text-shadow: 0 2px 8px #18100c; }
.food-layout { grid-template-columns: 1.08fr 1fr; gap: 44px; align-items: center; }
.food-feature { position: relative; align-self: center; }
.food-image-wrap { padding: 0; margin: 0 -5%; }
.food-image-wrap::before { display: none; }
.food-feature img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; object-fit: contain; transform: rotate(-7deg); filter: drop-shadow(0 22px 16px rgba(0,0,0,.45)); }
.food-stamp { top: 5%; bottom: auto; right: 1%; background-color: var(--cream); background-image: var(--paper-texture); box-shadow: none; border: 1px solid #d8b566; transform: rotate(12deg); }
.food-caption { position: relative; z-index: 1; margin: -3px 7% 0; padding: 18px 0 0; text-align: center; flex-direction: column; align-items: center; gap: 9px; }
.food-caption h3 { font-family: var(--serif); font-size: 21px; }
.food-kicker { color: #e3c48a; opacity: 1; }
.food-side { display: flex; flex-direction: column; gap: 25px; padding-top: 0; }
.food-small { grid-template-columns: 1.1fr 1fr; gap: 8px; padding: 0; }
.food-small+.food-small { padding-top: 0; }
.food-small:first-child img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; transform: rotate(5deg); object-fit: contain; filter: drop-shadow(0 16px 12px rgba(0,0,0,.4)); }
.food-small:last-child { grid-template-columns: .8fr 1.25fr; margin-left: 10px; }
.food-small:last-child img { width: 115%; max-width: none; height: auto; aspect-ratio: auto; border-radius: 0; mask: none; -webkit-mask: none; transform: rotate(-9deg); object-fit: contain; filter: drop-shadow(0 18px 12px rgba(0,0,0,.45)); }
.food-small h3 { font-family: var(--serif); font-size: 19px; line-height: 1.9; }
.food-small h3 span { font-family: var(--sans); }
.food-small .food-price { color: #f6efdf; }
.menu-list { margin-top: 70px; }
.drink-note { margin-top: 42px; padding: 34px 0 0; }
.menu-bottom .fine-print { opacity: .85; }

/* Printed menu sheets contrast with the photographic sections. */
.course-section { padding-top: 85px; padding-bottom: 105px; }
.featured-course { background: var(--receipt); border: 0; padding: 42px 46px; box-shadow: 0 10px 25px rgba(72,42,26,.12); }
.featured-course-top { padding-bottom: 26px; border-bottom: 2px dashed rgba(57,35,42,.28); }
.featured-course-bottom { padding-top: 16px; border-top: 2px dashed rgba(57,35,42,.28); }
.course-list { padding: 0 15px; }
.course-row:hover { background: rgba(139,40,59,.055); }

/* The room is the background; the text reads like a paper menu left on a table. */
.space-section { padding: 128px 0 115px; color: var(--cream); background-color: #2a2118; background-image: linear-gradient(90deg, rgba(21,15,10,.12), rgba(21,15,10,.28)), url('assets/interior-tables.webp'); background-size: cover; background-position: center; }
.space-layout { grid-template-columns: 1fr 1fr; gap: 65px; align-items: end; }
.space-photos { padding: 0 25px 90px 0; }
.space-main-photo { width: 82%; height: 280px; border-radius: 0; border: 10px solid var(--cream); border-bottom-width: 36px; object-fit: cover; transform: rotate(-8deg); box-shadow: 0 15px 30px rgba(0,0,0,.25); }
.space-inset-photo { width: 64%; right: 0; bottom: 0; aspect-ratio: 1.3; border-radius: 0; border: 9px solid var(--cream); border-bottom-width: 32px; transform: rotate(7deg); box-shadow: 0 15px 25px rgba(0,0,0,.25); }
.space-photo-caption { display: none; }
.space-copy { position: relative; padding: 45px 48px 47px; color: var(--ink); background: var(--receipt); transform: rotate(2deg); mask: none; -webkit-mask: none; box-shadow: 0 15px 28px rgba(0,0,0,.25); }
.space-copy h2 { font-size: clamp(2rem,3vw,2.8rem); }
.space-section .section-label { text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.space-section .section-label span:last-child { opacity: 1; }
.space-copy h2 { padding-bottom: 23px; border-bottom: 2px dashed rgba(57,35,42,.28); }
.space-copy .seat-tags { padding-top: 20px; border-top: 2px dashed rgba(57,35,42,.28); }
.space-copy .fine-print { opacity: .8; }

.film-section { background-color: #28201a; background-image: linear-gradient(rgba(27,20,15,.9), rgba(27,20,15,.9)), var(--paper-texture); background-size: auto, 768px auto; }
.film-section::before { background: #28201a; top: -70px; transform: rotate(180deg); }
.film-player { box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.access-map iframe { border: 8px solid #faf4e8; box-shadow: 0 8px 30px rgba(55,30,20,.09); }
.reservation-section { background-color: var(--night); background-image: linear-gradient(90deg, rgba(19,13,9,.68), rgba(19,13,9,.44)), url('assets/interior-counter.webp'); background-size: cover; background-position: center 45%; padding: 140px 0 130px; }
.reservation-layout { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.reservation-actions .button { text-shadow: none; }
.menu-section::before, .menu-section::after, .space-section::before, .film-section::after, .reservation-section::before { background-image: var(--paper-texture); background-size: 768px auto; }

/* Tear-off receipt edges, shared by the course card and the room guide. */
.featured-course::before, .featured-course::after, .space-copy::before, .space-copy::after { content: ""; position: absolute; left: 0; right: 0; width: auto; height: 8px; background: linear-gradient(135deg,transparent 50%,var(--receipt) 50%) 0 0 / 16px 16px repeat-x, linear-gradient(225deg,transparent 50%,var(--receipt) 50%) 0 0 / 16px 16px repeat-x; pointer-events: none; }
.featured-course::before, .space-copy::before { top: -8px; bottom: auto; }
.featured-course::after, .space-copy::after { bottom: -8px; top: auto; transform: rotate(180deg); }

/* Friendly bold gothic type, with a sunny accent for a casual wine bar. */
h1,h2,h3 { font-family: var(--sans); }
h2,.hero h1 { font-weight: 800; letter-spacing: .01em; }
.hero h1 { line-height: 1.5; font-size: clamp(2.5rem,4.1vw,4.3rem); }
.display-title { font-weight: 900; font-size: clamp(3rem,5.6vw,5rem); letter-spacing: -.065em; line-height: 1.06; }
.display-title em { font-style: normal; font-weight: 900; color: var(--sunny); }
.handwritten { font-style: normal; font-weight: 800; font-size: 33px; letter-spacing: -.045em; transform: rotate(-4deg); }
.italian-strip { font-weight: 800; font-size: 14px; }
.section-label span:first-child { font-weight: 800; }
.food-caption h3,.food-small h3 { font-weight: 700; }
.food-price,.row-price { font-weight: 800; letter-spacing: -.04em; }
.food-price { font-size: 28px; }
.course-price { font-weight: 800; }.course-price strong { font-weight: 900; font-size: 60px; }
.featured-course h3 { font-weight: 800; font-size: clamp(1.3rem,2vw,1.8rem); line-height: 1.65; }
.course-number { font-style: normal; font-weight: 800; }
.course-tag { background: var(--sunny); color: var(--green); font-size: 13px; font-weight: 800; transform: rotate(-3deg); padding: 4px 14px; }
.course-seal { background: var(--sunny); border-color: var(--green); outline-color: var(--green); color: var(--green); }
.course-seal strong { font-weight: 900; }
.button { font-weight: 800; border-radius: 3px; }
.hero-actions .button-light { background: var(--sunny); border-color: var(--sunny); }
.hero-actions .button-light:hover { background: #ffdc80; border-color: #ffdc80; }
.food-stamp { font-weight: 800; background: var(--sunny); border: 0; color: var(--green); }
.seat-tags span { border-style: dashed; font-weight: 600; }
.reservation-layout h2 { font-weight: 800; }

@media(min-width:761px) and (max-width:1100px) {
  .food-layout { gap: 24px; grid-template-columns: 1fr 1fr; }
  .food-small h3 { font-size: 16px; }
  .food-small { grid-template-columns: 1fr 1fr; }
  .food-caption h3 { font-size: 18px; }
  .space-layout { gap: 30px; }
  .space-copy { padding: 40px 30px; }
  .space-main-photo { height: 250px; }
  .space-photo-caption { top: 217px; font-size: 9px; }
}
@media(max-width:760px) {
  .hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.43), rgba(0,0,0,.08) 90%); }
  .about { padding-top: 55px; padding-bottom: 65px; }
  .about-photo { min-height: 0; padding: 0; margin-top: 26px; display: flex; flex-direction: column; align-items: center; }
  .about-photo>img { width: 104%; max-width: none; height: auto; margin-left: -2%; transform: rotate(-5deg); }
  .about-photo-note { width: 220px; max-width: 88%; min-height: 0; align-self: flex-end; right: auto; bottom: auto; padding: 30px 26px 28px; margin: -16px 9px 15px 0; }
  .about-photo-note>span { font-size: 21px; }
  .about-photo-note p { font-size: 14px; margin-top: 15px; }
  .about-photo-note::before { width: 87px; height: 26px; top: -12px; }
  .menu-section { padding-top: 98px; padding-bottom: 100px; }
  .menu-section .section-heading { align-items: flex-start; margin-bottom: 30px; }
  .menu-scenery img { object-position: 54% 50%; }
  .menu-scenery::after { background: linear-gradient(180deg, rgba(18,13,9,.5), rgba(18,13,9,.45) 55%, rgba(18,13,9,.85)); }
  .food-layout { grid-template-columns: 1fr; gap: 45px; }
  .food-image-wrap { margin: 0 -2%; }
  .food-feature img { height: auto; aspect-ratio: auto; }
  .food-stamp { right: 7%; top: 0; width: 75px; height: 75px; font-size: 13px; }
  .food-caption { margin: 0; padding-top: 0; gap: 7px; }
  .food-caption h3 { font-size: 18px; }
  .food-side { gap: 38px; }
  .food-small { grid-template-columns: 1fr 1fr; gap: 6px; }
  .food-small+.food-small { padding: 0; }
  .food-small:first-child img { width: 108%; margin-left: -4%; height: auto; aspect-ratio: auto; }
  .food-small:last-child { margin: 0; grid-template-columns: .95fr 1.05fr; }
  .food-small:last-child img { width: 110%; margin-left: -10%; height: auto; aspect-ratio: auto; }
  .food-small h3 { font-size: 17px; }
  .food-small h3 span { font-size: 13px; }
  .food-small .food-price { font-size: 28px; }
  .food-kicker { font-size: 11px; letter-spacing: .03em; }
  .menu-list { margin-top: 44px; }
  .drink-note { padding-top: 27px; margin-top: 30px; }
  .course-section { padding: 55px 0 70px; }
  .featured-course { padding: 28px; }
  .course-list { padding: 0; }
  .space-section { padding: 95px 0 80px; background-position: 60% center; }
  .space-layout { grid-template-columns: 1fr; gap: 35px; }
  .space-photos { order: 2; padding: 8px 15px 85px 0; margin-top: 5px; }
  .space-main-photo { width: 76%; height: 230px; border-width: 7px; border-bottom-width: 32px; }
  .space-inset-photo { width: 60%; border-width: 7px; border-bottom-width: 27px; right: -4px; }
  .space-photo-caption { top: 207px; left: 15px; font-size: 9px; }
  .space-copy { padding: 35px 31px 40px; transform: rotate(1deg); }
  .space-copy p, .space-copy h2, .space-copy .seat-tags { transform: none; }
  .space-copy h2 { font-size: 30px; }
  .space-copy>p { margin-top: 20px; }
  .film-section::before { top: -50px; }
  .reservation-section { padding: 105px 0 100px; background-position: 60% 50%; }
  .hero h1 { font-size: clamp(2rem,7.1vw,3.2rem); line-height: 1.65; }
  .hero-media { mask-image: linear-gradient(to bottom,#000 0,#000 calc(100% - 190px),rgba(0,0,0,.9) calc(100% - 140px),rgba(0,0,0,.42) calc(100% - 70px),rgba(0,0,0,.06) calc(100% - 25px),transparent 100%); -webkit-mask-image: linear-gradient(to bottom,#000 0,#000 calc(100% - 190px),rgba(0,0,0,.9) calc(100% - 140px),rgba(0,0,0,.42) calc(100% - 70px),rgba(0,0,0,.06) calc(100% - 25px),transparent 100%); }
  .display-title { font-size: clamp(3rem,13vw,4.6rem); }
  .handwritten { font-size: 29px; }
  .italian-strip { font-size: 12px; }
  .featured-course h3 { font-size: 21px; }
  .course-price strong { font-size: 53px; }
  .space-copy h2 { font-size: 29px; }
}
@media(max-width:370px) {
  .food-small h3 { font-size: 15px; }
  .food-small .food-price { font-size: 24px; }
  .space-copy { padding: 30px 25px 35px; }
}