/* Little Bell Studio — shared styles
   Layout language follows marnen.com: neutral paper background, big Instrument Serif
   display type, Instrument Sans UI, hairline borders, pill buttons. */

:root{
  --ink:#1c1916;
  --ink-soft:#5b524b;
  --paper:#eeebe7;
  --paper-2:#f5f3f0;
  --line:#1c1916;
  --accent:#b9765a;          /* Mistpost clay */
  --peach:#e9b896;
  --border:1px solid var(--line);
  --pad:2.66rem;
  --fs-h1:clamp(3.6rem,10vw,9rem);
  --fs-h2:clamp(2.2rem,4.4vw,3.4rem);
  --fs-h5:1.35rem;
  --fs-base:1.125rem;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (max-width:760px){
  :root{--pad:1.33rem;--fs-h5:1.15rem;--fs-base:1rem}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:var(--fs-base);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{padding-left:var(--pad);padding-right:var(--pad);margin:0 auto}
.sans{font-family:var(--sans)}
.muted{color:var(--ink-soft)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--sans);font-size:var(--fs-h5)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:.6rem;padding-bottom:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.6rem;white-space:nowrap}
.brand svg{width:2rem;height:2rem}
.nav{display:flex;align-items:center;gap:2.4rem}
.nav .links{display:flex;gap:1.6rem}
.nav .links a{border-bottom:1px solid transparent}
.nav .links a:hover,.nav .links a[aria-current]{border-bottom:var(--border)}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.4rem;border:var(--border);border-radius:3rem;background:var(--paper);font:inherit;color:inherit;cursor:pointer;transition:background .2s,color .2s}
.pill:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;width:30px;height:20px;flex-direction:column;justify-content:space-between;background:none;border:0;padding:0;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media (max-width:860px){
  .burger{display:flex}
  .nav{display:none}
  .nav.show{display:flex;flex-direction:column;align-items:flex-start;gap:2rem;position:fixed;top:3.6rem;left:0;width:100%;height:100vh;padding:3rem var(--pad);background:var(--paper)}
  .nav.show .links{flex-direction:column;gap:1rem;font-size:2.2rem}
}

/* ---------- hero (centered intro with scramble) ---------- */
.intro{min-height:min(100svh,60rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;padding-top:5rem}
.intro .kicker{font-family:var(--sans);letter-spacing:.3rem;text-transform:lowercase;display:flex;align-items:center;gap:2.4rem}
.dash{display:inline-block;width:3rem;height:1px;background:var(--ink)}
.intro h1{font-weight:400;font-size:var(--fs-h1);line-height:.95;margin:0}
.intro .hint{font-family:var(--sans);font-size:1.5rem;color:var(--ink-soft);animation:bounce 1.6s ease-in-out infinite;margin-top:2rem}
@keyframes bounce{50%{transform:translateY(.5rem)}}
@media (max-width:760px){.intro .kicker{gap:1rem;letter-spacing:.15rem;font-size:.85rem}.dash{width:1.4rem}}

/* ---------- section titles ---------- */
.sec{padding-top:6rem;padding-bottom:6rem}
.tags{font-family:var(--sans);letter-spacing:.3rem;text-align:center;text-transform:lowercase;margin-bottom:2.5rem}
.h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);line-height:1.05;margin:0 0 1.5rem}

/* ---------- game tiles ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:1.5rem;max-width:80rem;margin:0 auto}
.tile{position:relative;border:var(--border);border-radius:14px;overflow:hidden;background:var(--paper-2);display:flex;flex-direction:column}
.tile .art{aspect-ratio:4/3;overflow:hidden;position:relative}
.tile .art img{width:100%;height:100%;object-fit:cover;object-position:50% 78%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile:hover .art img{transform:scale(1.04)}
.tile .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:1.2rem 1.4rem;border-top:var(--border)}
.tile .meta h3{font-family:var(--serif);font-weight:400;font-size:2.4rem;margin:0;line-height:1}
.tile .meta p{margin:.3rem 0 0;font-family:var(--sans);font-size:.95rem;color:var(--ink-soft)}
.tile .arrow{font-family:var(--sans);font-size:1.6rem}
.tile.soon{justify-content:center;align-items:center;min-height:20rem;border-style:dashed;background:transparent;text-align:center;padding:2rem}
.tile.soon p{font-family:var(--sans);color:var(--ink-soft);margin:.4rem 0 0}
.badge-rot{position:absolute;top:1rem;right:1rem;width:7rem;height:7rem;animation:rot 20s linear infinite;pointer-events:none}
.badge-rot text{font-family:var(--sans);font-size:10.5px;letter-spacing:2.6px;fill:var(--ink)}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- about: word-by-word paragraph ---------- */
.about{max-width:58rem;margin:0 auto}
.para{display:flex;flex-wrap:wrap;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.15}
.para .w{margin:.35rem .6rem 0 0;opacity:.12;transition:opacity .5s}
.para .w.on{opacity:1}
.list{font-family:var(--sans);font-size:1.15rem;margin:2rem 0 0;padding-left:1.25rem}
.list li{margin-bottom:.4rem}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;margin:6rem 0;border-top:var(--border);border-bottom:var(--border)}
.marquee .track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee.rev .track{animation-direction:reverse}
.marquee .phrase{display:flex;align-items:center;gap:2rem;padding:1.6rem 1rem;white-space:nowrap}
.marquee .word{font-family:var(--serif);font-size:clamp(3.6rem,9vw,6rem);line-height:1}
.marquee .pic{height:clamp(3.4rem,7vw,5.2rem);width:auto;image-rendering:auto}
.marquee .pic.round{width:clamp(3.4rem,7vw,5.2rem);border-radius:50%;object-fit:cover}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- footer ---------- */
.ftr{border-top:var(--border);padding-top:7rem;padding-bottom:2rem;font-family:var(--sans);display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.ftr .big{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;margin:0 0 1rem}
.ftr .cols{display:flex;gap:3rem;flex-wrap:wrap}
.ftr .cols div{display:flex;flex-direction:column;gap:.4rem}
.ftr .cols b{font-weight:500;color:var(--ink-soft);font-size:.85rem;letter-spacing:.15rem;text-transform:uppercase}
.ftr a:hover{text-decoration:underline}
.ftr small{flex-basis:100%;color:var(--ink-soft);margin-top:3rem}

/* ---------- hero fade-in (out of the mist) ---------- */
.mist-in{display:inline-block;opacity:0;animation:mistIn 1.2s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 160ms + 100ms)}
@keyframes mistIn{
  from{opacity:0;filter:blur(10px);transform:translateY(12px)}
  to{opacity:1;filter:blur(0);transform:none}
}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- plain text pages (privacy / support) ---------- */
.doc{max-width:46rem;margin:0 auto;padding-top:9rem;padding-bottom:5rem;font-family:var(--sans);font-size:1.05rem;line-height:1.65}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,7vw,5rem);line-height:1;margin:0 0 .5rem}
.doc h2{font-family:var(--serif);font-weight:400;font-size:2rem;margin:2.6rem 0 .4rem}
.doc a{text-decoration:underline}
.doc .note{border:1px dashed var(--ink-soft);border-radius:10px;padding:.8rem 1rem;color:var(--ink-soft);font-size:.95rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .para .w{opacity:1}
  .mist-in{opacity:1}
}