/*
 * 共通の土台とデザイントークン。
 * 全セクションで使う初期化・汎用部品を定義する。
 */
:root {
  --paper: #fff6e7;
  --paper-deep: #f4e4c6;
  --paper-light: #fffdf7;
  --ink: #21304e;
  --ink-soft: #536077;
  --red: #ff4e3e;
  --yellow: #ffc531;
  --blue: #2f6bff;
  --white: #fff;
  --line: rgba(33, 48, 78, .22);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --display: "RocknRoll One", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --latin: "Paytone One", "Arial Black", sans-serif;
  --body: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(92px, 10vw, 144px);
  --solid-shadow: 6px 6px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: 104px; background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; font-weight: 500; line-height: 1.9; letter-spacing: .02em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, summary { color: inherit; font: inherit; }
button { border: 0; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--ink); }

.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--yellow); font-weight: 700; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip-link:focus { transform: translateY(0); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section[id] { scroll-margin-top: 100px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--latin); font-size: .74rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { width: 28px; height: 3px; background: var(--red); content: ""; transform: rotate(-4deg); }
.section-title { max-width: 15em; margin-top: 18px; font-family: var(--display); font-size: clamp(30px, 4vw, 42px); font-weight: 400; line-height: 1.42; letter-spacing: .01em; text-wrap: balance; }
.section-lead { max-width: 43em; color: var(--ink-soft); line-height: 2; }
.marker { position: relative; z-index: 0; display: inline; }
.marker i { position: absolute; z-index: -1; right: -.08em; bottom: .04em; left: -.08em; height: .34em; background: var(--yellow); content: ""; transform: rotate(-1.5deg); transform-origin: left center; }
.paper-noise { position: absolute; inset: 0; pointer-events: none; opacity: .36; background-image: radial-gradient(circle at 20% 30%, rgba(33,48,78,.09) 0 1px, transparent 1.4px), radial-gradient(circle at 70% 60%, rgba(255,78,62,.055) 0 1px, transparent 1.3px); background-size: 18px 21px, 23px 19px; mix-blend-mode: multiply; }
.tape { position: absolute; z-index: 4; width: 92px; height: 25px; background: rgba(255,197,49,.82); transform: rotate(-5deg); }
.tape--blue { background: rgba(47,107,255,.68); transform: rotate(6deg); }
.tape--red { background: rgba(255,78,62,.7); transform: rotate(-8deg); }
.wobble { transition: transform .4s var(--pop); }