/* tabi-world shared styles
   Same palette as the sabaisuites.com main site. No external font CDN --
   Georgia/system-serif only, so nothing here needs a runtime dependency. */

:root{
  --sand:#f4efe7; --sand-deep:#e8e0d3; --ink:#2c2a26; --muted:#6b655c;
  --sage:#7c8a6f; --sage-deep:#5d6a52; --clay:#b9764f; --line:#ddd5c8; --white:#fffdf9;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
body{
  font-family:Georgia,'Times New Roman',serif;
  color:var(--ink);
  background:var(--sand);
  min-height:100vh;
  overflow:hidden;
}

.tabi-back{
  position:absolute; top:32px; left:32px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; opacity:.55;
  transition:opacity .4s ease;
}
.tabi-back:hover{opacity:.9}

.tabi-wrap{
  width:100vw; height:100vh; position:relative;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}

.tabi-kicker{
  font-family:'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.28em; text-transform:uppercase;
  font-size:.7rem; color:var(--muted); opacity:.7;
  position:absolute; top:36px; left:0; right:0;
}

.tabi-line{
  font-size:1.35rem; line-height:1.6; color:var(--ink);
  max-width:34ch; margin:0 auto;
}

.tabi-fade{
  opacity:0; transform:translateY(-6px);
  transition:opacity 1.4s cubic-bezier(.22,1,.36,1), transform 1.4s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.tabi-fade.on{opacity:1; transform:translateY(0); pointer-events:auto}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .tabi-back, .tabi-fade{transition:none}
}