/* =========================================================
   酒と私 — base.css
   デザイントークン（色・フォント・重なり順）・リセット・和紙地・共通部品
   ※このファイルは全体の土台。セクションの見た目は sections.css へ。
   ========================================================= */

:root {
  /* ---- 色（名刺デザイン準拠） ---- */
  --kinari: #f5efe2;          /* 生成り地 */
  --kinari-fukami: #ece0c8;   /* 和紙の影 */
  --sumi: #2b2426;            /* 墨 */
  --sumi-usu: #5a5052;        /* 薄墨 */
  --murasaki-koi: #4a2e6f;    /* 「酒」の濃紫 */
  --murasaki: #8b6bb0;        /* 「と」の紫 */
  --murasaki-usu: #c3afd6;    /* 「私」の薄紫 */
  --shu: #a23b3b;             /* 朱（アクセント） */
  --kin: #b39245;             /* 昭和スナックの金 */

  /* ---- フォント ---- */
  --font-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --font-fude: "Yuji Syuku", "Hiragino Mincho ProN", serif;

  /* ---- 重なり順（全員これを使う） ---- */
  --z-noren: 1000;
  --z-nav: 900;
  --z-okami: 800;
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 16px;
  color: var(--sumi);
  background-color: var(--kinari);
  line-height: 1.9;
  letter-spacing: 0.06em;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--murasaki-koi); text-decoration: none; }

/* ---- 和紙の質感（画像ファイル不要：静的SVGノイズ＋淡い光） ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 18%, rgba(255, 252, 240, 0.55), rgba(255, 252, 240, 0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.055'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* 本文はテクスチャの下に沈まないように */
main, header, footer { position: relative; z-index: 2; }

/* ---- 共通部品 ---- */

/* 縦書き */
.tate {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* スクリーンリーダー専用 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 屋号の三色（名刺準拠） */
.ji-sake    { color: var(--murasaki-koi); }
.ji-to      { color: var(--murasaki); }
.ji-watashi { color: var(--murasaki-usu); }

/* アニメを控えたい人への配慮 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}