/* ============================================================
   B MINI MART — ukiyo-e dusk edition
   Built from the print: sumi ink dusk, aged paper, crimson sun.
   ============================================================ */
:root{
  --ink:#171310;          /* night ink */
  --ink-2:#241d17;        /* raised ink panel */
  --paper:#e9dcbc;        /* aged cream paper */
  --paper-dim:#d9c8a0;
  --sun:#c1272d;          /* crimson sun */
  --sun-deep:#8e1c22;
  --sepia:#9c7f5c;        /* brush sepia */
  --mincho:'Zen Old Mincho','Shippori Mincho',serif;
  --mincho2:'Shippori Mincho',serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);overflow-x:hidden}
a{color:var(--sun);text-decoration:none}
::selection{background:var(--sun);color:var(--paper)}

/* ---------- nav : ink bar with seal ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:14px 4vw;
  background:linear-gradient(180deg,rgba(23,19,16,.92),rgba(23,19,16,0))}
.nav-seal{width:46px;height:46px;border-radius:50%;background:var(--sun);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:var(--mincho);
  font-weight:900;font-size:1.5rem;box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--sun),0 4px 18px rgba(193,39,45,.5)}
.nav-links{display:flex;gap:2rem}
.nav-links a{color:var(--paper);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;opacity:.8}
.nav-links a em{font-style:normal;color:var(--sun);margin-right:.45em;font-family:var(--mincho)}
.nav-links a:hover{opacity:1;color:var(--sun)}
.nav-cta{border:1px solid var(--sun);color:var(--paper);padding:.55em 1.4em;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.nav-cta:hover{background:var(--sun)}

/* ---------- scrub stages ---------- */
.scrub-section{position:relative}
.sticky-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.sticky-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ink-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(23,19,16,.55) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")}
.overlay-copy{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:0 6vw;pointer-events:none}
.reveal-line{opacity:0;will-change:opacity,transform}

.vertical-label{writing-mode:vertical-rl;position:absolute;right:6vw;top:50%;transform:translateY(-50%);
  font-size:.72rem;letter-spacing:.6em;color:var(--paper);opacity:.85;
  border-right:1px solid var(--sun);padding-right:.9em;text-shadow:0 0 12px rgba(23,19,16,.9)}
.hero-title{font-family:var(--mincho);font-weight:900;font-size:clamp(3rem,9vw,7.5rem);
  letter-spacing:.22em;line-height:1;color:var(--paper);
  text-shadow:0 0 26px rgba(23,19,16,.95),0 4px 14px rgba(23,19,16,.9)}
.hero-tag{font-family:var(--mincho2);font-style:italic;font-size:clamp(1rem,2.2vw,1.55rem);
  margin-top:1.4rem;color:var(--paper);letter-spacing:.06em;
  text-shadow:0 0 18px rgba(23,19,16,.95)}
.hero-mid,.hero-end{position:absolute;left:0;right:0;font-family:var(--mincho);
  font-size:clamp(1.3rem,3vw,2.3rem);line-height:1.5;letter-spacing:.1em;
  text-shadow:0 0 20px rgba(23,19,16,.95)}
.hero-mid{top:42%}.hero-end{top:46%}
.chapter{font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;color:var(--sun);
  font-weight:600;margin-bottom:1.3rem;text-shadow:0 0 10px rgba(23,19,16,.9)}
.print-line{font-family:var(--mincho);font-weight:700;font-size:clamp(1.9rem,4.8vw,3.6rem);
  line-height:1.35;letter-spacing:.08em;color:var(--paper);
  text-shadow:0 0 24px rgba(23,19,16,.95),0 3px 12px rgba(23,19,16,.85)}
.print-line.small{position:absolute;top:60%;font-family:var(--mincho2);font-weight:500;
  font-size:clamp(.98rem,1.9vw,1.35rem);line-height:1.9;letter-spacing:.06em;
  text-shadow:0 0 18px rgba(23,19,16,.95)}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:4;
  font-size:.66rem;letter-spacing:.5em;color:var(--sun);font-weight:600;transition:opacity .4s}
.scroll-hint span{display:block;width:1px;height:44px;margin:0 auto 10px;
  background:linear-gradient(transparent,var(--sun));animation:pour 1.8s infinite}
@keyframes pour{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- paper section (wares) ---------- */
.paper-section{position:relative;z-index:2;background:var(--paper);color:var(--ink);
  padding:9rem 6vw 8rem;text-align:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.07' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.26 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E")}
.roofline{position:absolute;top:-1px;left:0;right:0;height:46px;background:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 30%,88% 68%,72% 42%,50% 100%,28% 42%,12% 68%,0 30%)}
.roofline.flip{background:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 30%,88% 68%,72% 42%,50% 100%,28% 42%,12% 68%,0 30%)}
.paper-section .chapter{text-shadow:none}
.section-title{font-family:var(--mincho);font-weight:800;font-size:clamp(2rem,4.4vw,3.3rem);
  letter-spacing:.1em;margin-bottom:1rem}
.section-title.light{color:var(--paper)}
.section-sub{font-family:var(--mincho2);font-style:italic;color:var(--sepia);margin-bottom:4rem;font-size:1.05rem}
.wares-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1160px;margin:0 auto;
  border:2px solid var(--ink)}
.ware{position:relative;text-align:left;padding:2.6rem 2.1rem 2.4rem;border:1px solid var(--ink);
  transition:background .3s,color .3s}
.ware:hover{background:var(--ink);color:var(--paper)}
.ware:hover p{color:var(--paper-dim)}
.ware-num{position:absolute;top:1.1rem;right:1.2rem;font-family:var(--mincho);font-weight:900;
  font-size:1.5rem;color:var(--sun);opacity:.85}
.ware h3{font-family:var(--mincho);font-weight:800;font-size:1.3rem;letter-spacing:.06em;margin-bottom:.7rem}
.ware p{font-family:var(--mincho2);font-size:.92rem;line-height:1.75;color:#5a4c3a;transition:color .3s}
.seals{display:flex;justify-content:center;gap:3.4rem;margin-top:5rem;flex-wrap:wrap}
.seal{width:120px;height:120px;border-radius:50%;background:var(--sun);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px var(--sun),0 6px 0 rgba(23,19,16,.85);
  transform:rotate(-3deg)}
.seal:nth-child(2n){transform:rotate(2.5deg)}
.seal b{font-family:var(--mincho);font-weight:900;font-size:1.9rem}
.seal i{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;font-style:normal;opacity:.9;margin-top:.2rem}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- ink section (visit) ---------- */
.ink-section{position:relative;z-index:2;background:var(--ink);color:var(--paper);
  padding:9rem 6vw 8rem;text-align:center;overflow:hidden}
.sun-disc{position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,var(--sun) 0%,var(--sun) 60%,var(--sun-deep) 100%);
  opacity:.34;filter:blur(2px);pointer-events:none}
.ink-section .chapter.light{color:var(--sun)}
.visit-grid{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;
  max-width:1200px;margin:3rem auto 0;text-align:left;align-items:start}
.visit-info h3{font-family:var(--mincho);font-weight:800;font-size:1.35rem;letter-spacing:.08em;
  color:var(--sun);margin:2rem 0 .9rem}
.visit-info h3:first-child{margin-top:0}
.hours{list-style:none}
.hours li{display:flex;justify-content:space-between;padding:.6em 0;
  border-bottom:1px solid rgba(233,220,188,.2);font-family:var(--mincho2);font-size:.95rem}
.addr{font-family:var(--mincho2);line-height:1.8;opacity:.9}
.btn-map{display:inline-block;margin-top:1.2rem;border:1px solid var(--sun);color:var(--paper);
  padding:.8em 1.8em;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase}
.btn-map:hover{background:var(--sun)}
.ask-form{margin-top:2.8rem;background:var(--ink-2);border:1px solid rgba(233,220,188,.25);padding:2.1rem}
.form-sub{font-family:var(--mincho2);font-style:italic;font-size:.88rem;opacity:.75;margin-bottom:1.3rem}
.ask-form input,.ask-form textarea{width:100%;background:var(--ink);border:1px solid rgba(233,220,188,.3);
  color:var(--paper);font-family:var(--sans);font-size:.95rem;padding:.85em 1em;margin-bottom:.9rem}
.ask-form input::placeholder,.ask-form textarea::placeholder{color:#8d7c60}
.ask-form input:focus,.ask-form textarea:focus{outline:none;border-color:var(--sun)}
.ask-form button{background:var(--sun);color:var(--paper);border:none;padding:.9em 2.4em;
  font-family:var(--sans);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  font-size:.76rem;cursor:pointer}
.ask-form button:hover{background:var(--sun-deep)}
.form-ok{margin-top:1rem;font-family:var(--mincho2);font-style:italic;color:var(--paper-dim)}

/* ---------- 3D woodblock map ---------- */
.map3d-wrap{position:sticky;top:12vh}
.map3d{height:540px;perspective:1150px;cursor:grab;user-select:none}
.map3d:active{cursor:grabbing}
.map3d-plane{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(56deg) rotateZ(-14deg);transition:transform .08s linear;
  background:linear-gradient(140deg,#e4d5b2,#d3bf95);border:3px solid #0d0a08;
  box-shadow:0 40px 70px -20px rgba(0,0,0,.85)}
.m-sun{position:absolute;top:4%;right:5%;width:26%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--sun),var(--sun-deep));opacity:.85;transform:translateZ(2px)}
.m-street{position:absolute;background:#efe3c6;box-shadow:inset 0 0 0 1px rgba(23,19,16,.35)}
.m-street.mh{left:0;right:0;height:9%}
.m-street.mv{top:0;bottom:0;width:8%}
.m-street.thin{opacity:.7}
.m-street.mh.thin{height:4%}
.m-street.mv.thin{width:4%}
.m-roof{position:absolute;background:#3a2f26;border:1px solid #0d0a08;transform:translateZ(14px);
  box-shadow:0 12px 0 #241d17,0 15px 0 rgba(13,10,8,.8);
  background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(233,220,188,.08) 6px 7px)}
.m-roof.r2{background-color:#46362a;transform:translateZ(18px);box-shadow:0 16px 0 #2b211a,0 19px 0 rgba(13,10,8,.8)}
.m-roof.r3{background-color:#57431f;transform:translateZ(10px);box-shadow:0 9px 0 #33270f,0 12px 0 rgba(13,10,8,.8)}
.m-grove{position:absolute;background:radial-gradient(circle at 35% 35%,#6d6b3a,#4a4c28);
  border:1px solid #0d0a08;border-radius:40% 55% 45% 60%/55% 45% 60% 40%}
.m-label{position:absolute;font-size:.6rem;letter-spacing:.26em;color:#57431f;font-weight:700}
.m-label.mvert{writing-mode:vertical-rl}
.grove-label{color:#e9dcbc;font-style:italic;letter-spacing:.08em}
.m-store{position:absolute;top:36%;left:40%;width:13%;height:9%;transform-style:preserve-3d}
.m-store .roof{position:absolute;inset:0;background:var(--sun);border:1px solid #0d0a08;
  transform:translateZ(48px);display:flex;align-items:center;justify-content:center;
  font-family:var(--mincho);font-weight:900;color:var(--paper);font-size:1.3rem;
  box-shadow:0 0 22px rgba(193,39,45,.7)}
.m-store .front{position:absolute;left:0;right:0;bottom:0;height:48px;background:var(--sun-deep);
  transform:rotateX(-90deg);transform-origin:bottom}
.m-store .side{position:absolute;top:0;bottom:0;right:0;width:48px;background:#6d151a;
  transform:rotateY(90deg);transform-origin:right}
.m-pin{position:absolute;top:14%;left:42%;transform:translateZ(100px);text-align:center;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateZ(100px) translateY(0)}50%{transform:translateZ(100px) translateY(-10px)}}
.pin-disc{width:26px;height:26px;margin:0 auto;border-radius:50%;background:var(--sun);
  box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--sun),0 6px 12px rgba(0,0,0,.6)}
.pin-tag{background:var(--ink);color:var(--paper);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;padding:.4em 1em;margin-top:.4em;white-space:nowrap;border:1px solid var(--sun)}
.map-hint{text-align:center;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-top:1.3rem}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;background:#0d0a08;color:var(--paper);text-align:center;
  padding:5rem 6vw 4rem;overflow:hidden}
.foot-sun{position:absolute;left:50%;bottom:-130px;transform:translateX(-50%);
  width:260px;height:260px;border-radius:50%;background:var(--sun);opacity:.55}
.foot-name{position:relative;font-family:var(--mincho);font-weight:900;font-size:1.6rem;letter-spacing:.3em}
.footer p{position:relative;margin-top:.8rem;font-size:.88rem;opacity:.8}
.foot-small{font-family:var(--mincho2);font-style:italic}

/* ---------- mobile pass ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .vertical-label{display:none}
  .wares-grid{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr;gap:3rem}
  .map3d{height:390px}
  .map3d-wrap{position:static}
  .seals{gap:1.6rem}
  .seal{width:104px;height:104px}
  .paper-section,.ink-section{padding:6.5rem 6vw 5.5rem}
  .print-line.small{top:63%}
}