@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Klee+One:wght@600&family=Caveat:wght@600;700&display=swap");

:root{
  --bg:#fbfaf7; --ink:#1e1b2a; --soft:#6b6779; --line:#e8e5dd; --card:#fff;
  --coral:#ff6b57; --mint:#2fb7a3; --tape:#f5b63a; --sheet:#f1eee6;
  --r-xl:36px; --r-lg:26px; --r-md:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans","Zen Kaku Gothic New",system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
html[data-lang="ja"] body{font-family:"Zen Kaku Gothic New","Plus Jakarta Sans",system-ui,sans-serif}
img,video{display:block;max-width:100%}
a{color:inherit}

/* language switch: content written twice, one hidden */
html[data-lang]:not([data-lang="en"]) [lang="en"]:not(html),
html:not([data-lang="fr"]) [lang="fr"]:not(html),
html:not([data-lang="ja"]) [lang="ja"]:not(html){display:none!important}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.pill{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:13px 22px;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pill.sm{font-size:13px;padding:8px 14px}

/* top bar shared by the site concepts */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:34px;height:34px}
.wordmark{font-weight:800;letter-spacing:-.045em;font-size:24px;line-height:1;font-family:"Plus Jakarta Sans",sans-serif}
.kana{font-family:"Zen Kaku Gothic New";font-weight:700;letter-spacing:.08em}
.lang{display:inline-flex;background:var(--sheet);border-radius:999px;padding:4px}
.lang button{border:0;background:transparent;font:inherit;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--soft)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.bar .right{display:flex;align-items:center;gap:10px}

/* reveal on scroll: hidden only once JS is known to run */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

.foot{padding:48px 0 64px;color:var(--soft);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:640px){
  .wrap{padding:0 16px}
  .bar .join{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .rv{opacity:1;transform:none}
}

/* two sample films: princess (watercolour) and unicorn (felt) */
html[data-sample="uni"] [data-s="jardin"],
html:not([data-sample="uni"]) [data-s="uni"]{display:none!important}
.samples{display:inline-flex;gap:4px;background:var(--sheet);border-radius:999px;padding:5px}
.samples button{border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--soft);display:inline-flex;align-items:center;gap:8px;transition:background .25s var(--ease),color .25s var(--ease)}
.samples button img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.samples button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* the stamp (hanko) logo */
.brand .seal-mark{width:38px;height:38px;animation:stampin .7s .15s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stampin{0%{transform:scale(1.9) rotate(-24deg);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
/* watermark seal on film frames: lives in the film layer, bottom-right */
.wm-seal{position:absolute;right:2.6%;bottom:4%;width:clamp(26px,5.2%,46px);height:auto;aspect-ratio:1;opacity:.92;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));z-index:2}

/* avatars: <i class="ava" data-a="kami|guru|kure"></i>, drawn by base.js */
.ava{display:inline-block;line-height:0}
.ava svg{width:100%;height:100%;display:block;overflow:visible}
.rk-bob{animation:rk-bob 3s ease-in-out infinite;transform-origin:100px 180px}
@keyframes rk-bob{50%{transform:translateY(-7px) rotate(-2deg)}}
.rk-blink{animation:rk-blink 4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes rk-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.rk-wave{animation:rk-wave 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:100% 100%}
@keyframes rk-wave{50%{transform:rotate(22deg)}}
.rk-flap{animation:rk-flap 3s ease-in-out infinite;transform-box:fill-box;transform-origin:0 100%}
@keyframes rk-flap{50%{transform:scale(1.12)}}
.rk-look{animation:rk-look 3.2s ease-in-out infinite}
@keyframes rk-look{0%,40%{transform:translate(0,0)}50%,70%{transform:translate(4px,-2px)}80%,100%{transform:translate(-3px,1px)}}
.rk-jot{animation:rk-jot .9s ease-in-out infinite;transform-origin:100px 168px}
@keyframes rk-jot{50%{transform:rotate(-7deg) translateX(-4px)}}
.rk-trail{stroke-dasharray:180;stroke-dashoffset:180;animation:rk-trail 2.7s linear infinite}
@keyframes rk-trail{60%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}