/* =========================================================
   At-Land — 「ホームページの裏側」ストーリーサイト
   Tokens: At-Land Design System (colors_and_type.css 準拠)
   ========================================================= */
:root{
  --ink:#0B0B0B;
  --ink-2:#161616;
  --ink-3:#222;
  --paper:#F3F0E8;
  --paper-2:#E9E4D8;
  --line:rgba(255,255,255,.12);
  --line-ink:rgba(11,11,11,.14);
  --mute:#8A8A85;
  --mute-ink:#5E5B54;
  --blue:#2B6CFF;   /* AI */
  --purple:#7A4DFF; /* AI×人 */
  --orange:#FF6A1F; /* 人 */
  --green:#1FB26B;  /* OK / 公開 */
  --red:#FF3B30;
  --brown:#704030;  /* ロゴ */
  --f-en:"Inter",system-ui,sans-serif;
  --f-ja:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--ink);color:#EDEBE5;
  font-family:var(--f-ja);font-feature-settings:"palt";
  line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--f-mono);letter-spacing:0}
.en{font-family:var(--f-en)}

/* grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:.06;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}