:root{
  --bg:#0c0c0f;
  --paper:#f5ebd8;
  --ink:#111111;
  --acid:#d2ff2d;
  --cyan:#1de2ff;
  --hot:#ff5a36;
  --magenta:#ff45c6;
  --amber:#ffb000;
  --line:#222;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:var(--paper);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,90,54,.18), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(29,226,255,.13), transparent 24%),
    linear-gradient(180deg,#101014 0%,#09090b 100%);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:24px 24px;
  mix-blend-mode:soft-light;
  opacity:.35;
}
a{color:inherit}
main{padding:1rem}
.menu-trigger,.menu-close,.btn,.quick-item,.menu-item,.story-poster,.contact-card{box-shadow:8px 8px 0 #000}
.menu-trigger{
  position:fixed; top:14px; right:14px; z-index:50;
  display:flex; flex-direction:column; gap:.15rem;
  border:2px solid var(--line); background:var(--paper); color:var(--ink);
  padding:.8rem 1rem; cursor:pointer; font:inherit; text-align:left;
}
.menu-trigger span,.section-tag,.eyebrow,.micro-list,.extra-label,.item-meta span,.hours span,.form-note,.social,.status-strip span,.time-strip span{font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem}
.menu-trigger strong{font-size:.82rem}
.site-menu{
  position:fixed; inset:0; z-index:60; display:grid; place-content:center; gap:1rem;
  background:rgba(5,5,7,.94); backdrop-filter:blur(10px);
  transform:translateY(-100%); transition:transform .28s ease;
}
.site-menu.open{transform:translateY(0)}
.site-menu a{
  font-family:"Bebas Neue",sans-serif; font-size:clamp(2.6rem,8vw,6rem); text-decoration:none;
  line-height:.9; color:var(--paper);
}
.menu-close{
  position:absolute; top:18px; right:18px; width:56px; height:56px;
  border:2px solid var(--paper); background:transparent; color:var(--paper); font-size:2rem; cursor:pointer;
}
.poster,.offerings,.story,.contact,.footer{max-width:var(--max); margin:0 auto 1rem}
.hero{
  min-height:100vh;
  display:grid; gap:1rem;
  grid-template-columns:1.5fr .9fr;
  grid-template-areas:
    "copy book"
    "board board";
  align-items:end;
  padding:5.5rem 0 0;
}
.hero-copy,.book-panel,.quick-board,.story-poster,.contact-card,.menu-item,.extras{
  border:2px solid var(--line);
}
.hero-copy{
  grid-area:copy;
  background:var(--paper); color:var(--ink);
  padding:1.15rem 1rem 1rem;
  position:relative;
}
.hero-copy::after{
  content:"OSAKA";
  position:absolute; right:.8rem; bottom:.35rem;
  font-family:"Bebas Neue",sans-serif; font-size:clamp(4rem,10vw,9rem); line-height:.8; color:rgba(0,0,0,.07);
}
.hero h1{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(4.5rem,14vw,11rem);
  line-height:.84; margin:.3rem 0 .6rem;
  letter-spacing:.02em;
}
.intro{max-width:42ch; font-size:1.05rem; position:relative; z-index:1}
.book-panel{
  grid-area:book;
  background:var(--hot); color:var(--ink);
  padding:1rem;
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
}
.book-panel h2,.contact h2,.offerings h2,.story h2,.menu-item h3{font-family:"Bebas Neue",sans-serif; letter-spacing:.02em; margin:.35rem 0; line-height:.92}
.book-panel h2{font-size:clamp(2.1rem,5vw,3.8rem)}
.status-strip,.time-strip{
  display:flex; justify-content:space-between; gap:1rem; padding:.55rem .65rem; margin-bottom:.55rem;
  background:rgba(255,255,255,.22); border:2px solid rgba(0,0,0,.45)
}
.book-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin:.9rem 0}
.btn{
  display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.85rem 1rem;
  text-decoration:none; border:2px solid var(--ink); color:var(--ink); font-weight:700; background:var(--paper)
}
.btn.acid{background:var(--acid)}
.btn.ghost{background:transparent}
.micro-list{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.45rem}
.quick-board{
  grid-area:board;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.quick-item{
  display:grid; gap:.4rem; text-decoration:none; padding:1rem;
  background:#17171b; transition:transform .18s ease, background .18s ease;
}
.quick-item span,.item-no{font-family:"Bebas Neue",sans-serif; font-size:3rem; line-height:.8; color:var(--acid)}
.quick-item strong{font-size:1.15rem}
.quick-item em{font-style:normal; color:#b7b7c4}
.quick-item:hover{transform:translate(-4px,-4px); background:#1d1d23}
.offerings{padding:1rem 0 0}
.section-tag{
  display:inline-block; padding:.38rem .55rem; margin:0 0 .7rem;
  background:var(--cyan); color:var(--ink); border:2px solid var(--line)
}
.menu-head{
  display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:end; margin-bottom:1rem;
}
.offerings h2,.story h2,.contact h2{font-size:clamp(2.8rem,7vw,6rem); margin:0}
.menu-head p{max-width:34ch; margin:0 0 .5rem}
.menu-item{
  display:grid; grid-template-columns:120px 1fr 160px; gap:1rem; align-items:start;
  padding:1rem; margin-bottom:1rem; background:var(--paper); color:var(--ink)
}
.menu-item:nth-of-type(odd){transform:rotate(-.5deg)}
.menu-item:nth-of-type(even){transform:rotate(.4deg)}
.menu-item.hot{border-color:#541a10}
.menu-item.acid{background:linear-gradient(135deg,var(--acid),#f0ffd1)}
.menu-item.cool{background:linear-gradient(135deg,#c9f7ff,#f5ebd8)}
.menu-item h3{font-size:clamp(2.4rem,6vw,4.2rem)}
.menu-item p{margin:.3rem 0 .8rem; max-width:60ch}
.menu-item ul{margin:0; padding-left:1rem}
.item-meta{display:grid; gap:.4rem; justify-items:end}
.item-meta strong{font-size:2rem}
.extras{display:grid; grid-template-columns:220px 1fr; background:#121217; overflow:hidden}
.extra-label{padding:1rem; background:var(--magenta); color:var(--ink); border-right:2px solid var(--line)}
.extra-track{display:flex; gap:1rem; overflow:auto; white-space:nowrap; padding:1rem}
.extra-track span{display:inline-flex; align-items:center; border:2px solid #30303a; padding:.65rem .8rem; background:#1a1a20}
.story{padding:2rem 0 0}
.story-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:1rem}
.story-poster{padding:1rem; background:#15151a}
.story-poster.big{grid-column:span 2; background:var(--paper); color:var(--ink)}
.story-poster.big h2{max-width:10ch}
.story-poster h3{font-family:"Bebas Neue",sans-serif; font-size:2rem; line-height:.95; margin:.2rem 0 .5rem}
.story-poster.accent{background:var(--amber); color:var(--ink)}
.contact{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:1rem; padding:2rem 0 0;
}
.contact-card{padding:1rem; background:var(--paper); color:var(--ink)}
.details{background:linear-gradient(180deg,var(--paper),#e9dcc6)}
.hours{display:grid; gap:.7rem; margin:1rem 0}
.hours div{display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-top:2px solid rgba(0,0,0,.15)}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
label{display:grid; gap:.35rem; margin-bottom:.8rem}
input,select,textarea{
  width:100%; border:2px solid var(--line); border-radius:0; background:#fffaf0; color:var(--ink);
  padding:.9rem; font:inherit
}
.submit{width:100%}
.footer{padding:1.25rem 1rem 2rem; text-align:center}
.footer p{margin:0; font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.08em}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; grid-template-areas:"copy" "book" "board"; min-height:auto}
  .quick-board,.menu-head,.contact,.story-grid,.field-grid,.menu-item,.extras{grid-template-columns:1fr}
  .menu-item{transform:none!important}
  .item-meta{justify-items:start}
  .story-poster.big{grid-column:auto}
}
@media (max-width:620px){
  main{padding:.75rem}
  .menu-trigger{left:12px; right:auto; max-width:calc(100% - 24px)}
  .hero{padding-top:6rem}
  .hero-copy,.book-panel,.quick-item,.story-poster,.contact-card,.menu-item,.extras{box-shadow:5px 5px 0 #000}
  .quick-item span,.item-no{font-size:2.4rem}
}