@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Rampart+One&family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

:root{
  --cream:#f4e8c9;
  --cream-2:#eeddab;
  --paper:#faf2dd;
  --mustard:#dea52f;
  --mustard-dark:#c68a26;
  --teal:#25453e;
  --teal-dark:#153029;
  --brown:#4a2c19;
  --brown-soft:#6b4527;
  --coral:#d9603c;
  --cherry:#b23a2c;
  --cream-line: rgba(74,44,25,.35);
  --shadow: 0 10px 26px rgba(21,48,41,.25);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* dotted halftone paper texture */
.texture{
  position:relative;
}
.texture::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(var(--brown) 0.6px, transparent 0.6px);
  background-size:14px 14px;
  opacity:.05;
  pointer-events:none;
}

h1,h2,h3{margin:0;}
.display{
  font-family:'Rampart One', 'Zen Maru Gothic', sans-serif;
  letter-spacing:.04em;
}
.mincho{
  font-family:'Shippori Mincho', serif;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:linear-gradient(to bottom, rgba(21,48,41,.92), rgba(21,48,41,0));
  transition:background .3s ease;
}
.nav.scrolled{
  background:var(--teal-dark);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.nav-logo{
  color:var(--mustard);
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.12em;
  display:flex; align-items:center; gap:8px;
}
.nav-logo span.small{font-size:.7rem;color:var(--cream-2);letter-spacing:.2em;}
.nav-links{
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--cream);
  font-size:.85rem;
  letter-spacing:.12em;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--mustard);
  transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-toggle{
  display:none;
  width:34px;height:26px;position:relative;cursor:pointer;background:none;border:none;
}
.nav-toggle span{
  position:absolute;left:0;right:0;height:2px;background:var(--cream);
  transition:all .3s ease;
}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:11px;}
.nav-toggle span:nth-child(3){top:22px;}
.nav-toggle.open span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

@media (max-width:800px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:70vw; max-width:320px;
    background:var(--teal-dark); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px; transform:translateX(100%); transition:transform .35s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
}

/* ---------- FIRST VIEW ---------- */
.firstview{
  position:relative;
  background:var(--teal-dark);
  padding:36px 20px;
}
.fv-wrap{
  max-width:1040px;
  margin:0 auto;
  box-shadow:var(--shadow);
}
.fv-marquee{
  overflow:hidden;
  width:100%;
  line-height:0;
}
.fv-marquee-track{
  display:flex;
  width:200%;
  animation:fv-marquee 26s linear infinite;
}
.fv-track-reverse{
  animation-direction:reverse;
}
.fv-strip-img{
  display:block;
  width:50%;
  flex-shrink:0;
  height:auto;
}
.fv-title-img{
  display:block;
  width:100%;
  height:auto;
}
@keyframes fv-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .fv-marquee-track{animation:none;}
}

.fv-scroll-bar{
  background-color:var(--mustard);
  background-image:var(--grain);
  padding:20px 24px;
  display:flex;
  justify-content:center;
}
.fv-scroll{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer;
}
.fv-scroll-label{
  font-family:'Shippori Mincho',serif;
  font-size:.7rem;
  letter-spacing:.3em;
  color:var(--teal-dark);
}
.fv-scroll-line{
  width:1px; height:34px;
  background:var(--teal-dark);
  animation:fv-scrolldown 1.8s infinite;
}
@keyframes fv-scrolldown{
  0%{transform:scaleY(0); transform-origin:top;}
  50%{transform:scaleY(1); transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0); transform-origin:bottom;}
}
@media (prefers-reduced-motion: reduce){
  .fv-scroll-line{animation:none;}
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Shippori Mincho',serif;
  letter-spacing:.14em;
  font-size:.9rem;
  padding:14px 30px;
  border-radius:2px;
  border:1.5px solid var(--mustard);
  transition:all .25s ease;
}
.btn-line{
  margin-top:30px;
  background:#06C755;
  color:#fff;
  border:none;
  padding:16px 36px;
  border-radius:40px;
  font-size:.95rem;
  box-shadow:0 10px 22px rgba(6,199,85,.35);
}
.btn-line:hover{background:#05b34c; transform:translateY(-2px);}

/* ---------- SECTION GENERIC ---------- */
section{position:relative;}
.section-pad{padding:110px 0;}
.section-title{
  font-family:'Rampart One';
  font-size:clamp(1.8rem, 4.2vw, 2.7rem);
  color:var(--teal-dark);
  letter-spacing:.06em;
  margin-bottom:6px;
}
.story-title{
  color:var(--brown-soft);
}
.story-title .emphasis{
  font-size:1.5em;
  color:var(--brown);
}
.section-sub{
  font-family:'Shippori Mincho',serif;
  color:var(--brown-soft);
  letter-spacing:.08em;
  margin-bottom:40px;
  font-size:1rem;
}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.show{opacity:1; transform:translateY(0);}

/* ---------- CONCEPT ---------- */
.concept{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.concept-photo{
  position:relative;
}
.concept-photo img{
  border:8px solid var(--paper);
  box-shadow:var(--shadow);
  transform:rotate(-2deg);
}
.concept-photo .washi{
  position:absolute; top:-18px; left:38%;
  width:90px; height:34px;
  background:rgba(217,96,60,.55);
  transform:rotate(-4deg);
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}
.concept-text p{
  line-height:2;
  font-size:.98rem;
  color:var(--brown);
  margin:0 0 18px;
}
.stamped-title{
  font-family:'Mochiy Pop One', sans-serif;
  font-weight:400;
  color:var(--teal-dark);
  background-color:var(--teal-dark);
  background-image:var(--grain-light);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:.04em;
}
@media (max-width:860px){
  .concept{grid-template-columns:1fr;}
}

/* ---------- MENU (colored band, like At-Home section) ---------- */
.menu-band{
  background-color:var(--mustard);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.08), transparent 40%),
    var(--grain);
  position:relative;
}
.menu-band::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(74,44,25,.06) 0 2px, transparent 2px 18px);
}
.menu-band .section-title{color:var(--teal-dark);}
.menu-band .section-sub{color:var(--brown-soft);}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  position:relative; z-index:1;
}
.menu-card{
  background:var(--paper);
  border:4px solid var(--paper);
  box-shadow:var(--shadow);
  padding-bottom:6px;
  transform:rotate(var(--r,0deg));
  transition:transform .25s ease;
}
.menu-card:nth-child(2n){--r:1.4deg;}
.menu-card:nth-child(3n){--r:-1.6deg;}
.menu-card:hover{transform:rotate(0deg) translateY(-6px);}
.menu-photo{
  aspect-ratio:1/1; overflow:hidden;
}
.menu-photo img{width:100%;height:100%;object-fit:cover;}
.menu-info{
  padding:16px 16px 4px;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px;
}
.menu-name{
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  font-size:1rem;
  color:var(--teal-dark);
}
.menu-price{
  font-family:'Rampart One';
  color:var(--coral);
  font-size:.95rem;
  white-space:nowrap;
}
.menu-desc{
  padding:0 16px 16px;
  font-size:.78rem;
  color:var(--brown-soft);
  line-height:1.6;
}
.menu-card.note{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px 16px; gap:10px;
  background:var(--teal-dark); color:var(--cream);
}
.menu-card.note .menu-name{color:var(--mustard); font-size:1.05rem;}
.menu-card.note p{margin:0; font-size:.8rem; color:var(--cream-2); line-height:1.8;}

@media (max-width:860px){
  .menu-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .menu-grid{grid-template-columns:1fr;}
}

/* ---------- ROASTERY STORY ---------- */
.story{
  background:var(--cream);
}
.story-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  align-items:stretch;
  box-shadow:var(--shadow);
}
.story-photo{
  position:relative; min-height:420px;
  background-size:cover; background-position:center;
}
.story-copy{
  background:var(--teal-dark); color:var(--cream);
  padding:60px 50px; display:flex; flex-direction:column; justify-content:center; gap:20px;
}
.story-copy h3{
  font-family:'Rampart One'; font-size:1.7rem; color:var(--mustard); letter-spacing:.05em;
  white-space:nowrap;
}
@media (max-width:480px){
  .story-copy h3{white-space:normal;}
}
.story-copy p{
  line-height:2; font-size:.94rem; color:var(--cream-2); margin:0;
}
.story-sign{
  margin-top:10px; font-family:'Shippori Mincho',serif; font-size:.85rem; color:var(--mustard);
  letter-spacing:.15em;
}
@media (max-width:860px){
  .story-inner{grid-template-columns:1fr;}
  .story-photo{min-height:260px;}
  .story-copy{padding:40px 26px;}
}

/* ---------- GALLERY ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:16px;
}
.g-item{
  margin:0; position:relative; overflow:hidden; grid-row:span 1;
  border:5px solid var(--paper); box-shadow:var(--shadow);
}
.g-item.g-tall{grid-row:span 2;}
.g-item img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease;}
.g-item:hover img{transform:scale(1.08);}
.g-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px 8px;
  background:linear-gradient(to top, rgba(21,48,41,.8), transparent);
  color:var(--cream);
  font-family:'Shippori Mincho',serif;
  font-size:.72rem;
  letter-spacing:.08em;
}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .g-item.g-tall{grid-row:span 2;}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr;}
  .g-item.g-tall{grid-row:span 1;}
}

/* ---------- SCENES ---------- */
.scenes{background:var(--cream-2);}
.scenes-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}
.scene-card{
  background:var(--paper);
  border-top:3px solid var(--coral);
  padding:34px 26px;
  box-shadow:var(--shadow);
}
.scene-num{
  font-family:'Rampart One'; color:var(--mustard-dark); font-size:1rem; margin-bottom:14px;
}
.scene-card h3{
  font-family:'Shippori Mincho',serif; font-size:1.15rem; color:var(--teal-dark);
  letter-spacing:.08em; margin-bottom:14px;
}
.scene-card p{
  font-size:.88rem; line-height:1.9; color:var(--brown-soft); margin:0;
}
@media (max-width:860px){
  .scenes-grid{grid-template-columns:1fr;}
}

/* ---------- ACCESS / INFO ---------- */
.access{
  background:var(--paper);
}
.access-layout{
  display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:stretch;
}
.access-card{
  border:2px dashed var(--cream-line);
  padding:46px;
  position:relative;
}
.map-placeholder{
  background:var(--teal-dark);
  color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:30px;
  background-image:
    linear-gradient(rgba(244,232,201,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,232,201,.06) 1px, transparent 1px);
  background-size:26px 26px;
}
.map-pin{font-size:2.8rem;}
@media (max-width:860px){
  .access-layout{grid-template-columns:1fr;}
  .map-placeholder{min-height:180px;}
}
.access-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:30px 60px;
}
.access-item dt{
  font-family:'Shippori Mincho',serif; color:var(--coral); letter-spacing:.15em; font-size:.82rem; margin-bottom:8px;
}
.access-item dd{
  margin:0; font-size:.98rem; line-height:1.9; color:var(--brown);
}
@media (max-width:700px){
  .access-grid{grid-template-columns:1fr;}
  .access-card{padding:30px 22px;}
}

/* ---------- CONTACT ---------- */
.contact{
  background:var(--teal-dark);
  color:var(--cream);
}
.contact .section-title{color:var(--mustard);}
.contact .section-sub{color:var(--cream-2);}

/* ---------- FOOTER ---------- */
footer{
  background:var(--teal-dark); color:var(--cream-2);
  padding:56px 0 30px; text-align:center;
}
footer .foot-logo{
  font-family:'Shippori Mincho',serif; color:var(--mustard); font-size:1.2rem; letter-spacing:.2em; margin-bottom:10px;
}
footer .foot-sns{
  display:flex; justify-content:center; gap:22px; margin:22px 0;
  font-size:.8rem; letter-spacing:.1em;
}
footer .foot-sns a{opacity:.85;}
footer .foot-sns a:hover{opacity:1; color:var(--mustard);}
footer small{
  display:block; margin-top:18px; font-size:.7rem; color:rgba(244,232,201,.55); letter-spacing:.05em;
}

/* section title wrapper centered variant */
.center{text-align:center;}
.center .section-sub{max-width:560px;margin-left:auto;margin-right:auto;}