/* NNiNN renewal — base (reset / typography / layout utilities)
   色・フォント・余白は tokens.css の変数のみを使う */
@layer reset, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
  body { min-height: 100dvh; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; }
  picture { display: contents; } /* <picture> をレイアウト上透過させ、img をそのままグリッド/フレックスの子にする */
  picture > source { display: none; } /* contents 化した picture 内の source がグリッド項目にならないように */
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; }
  h1, h2, h3, h4 { font-weight: 700; overflow-wrap: anywhere; }
  p { overflow-wrap: anywhere; }
  address { font-style: normal; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}

@layer base {
  body {
    background: var(--c-bg);
    color: var(--c-ink-2);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
  }
  body.is-locked { overflow: hidden; }

  h1, h2, h3, h4 { font-family: var(--ff-display); color: var(--c-ink); letter-spacing: .01em; }
  h1 { font-size: var(--fs-h1); line-height: 1.25; }
  h2 { font-size: var(--fs-h2); line-height: 1.3; }
  h3 { font-size: var(--fs-h3); line-height: 1.4; }

  :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; border-radius: 4px; }

  [id] { scroll-margin-top: calc(var(--header-h) + var(--sp-2)); }

  ::selection { background: var(--c-blue-tint); color: var(--c-ink); }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: fixed; top: var(--sp-1); left: var(--sp-1); z-index: 1000;
    padding: var(--sp-1) var(--sp-2); background: var(--c-ink); color: var(--c-on-dark);
    border-radius: var(--r-pill); transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

  /* typography helpers */
  .label {
    font-family: var(--ff-label); font-weight: 500; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); line-height: 1.6;
  }
  .serif { font-family: var(--ff-serif); letter-spacing: 0; }
  .lead { color: var(--c-ink-2); max-width: 36em; }
  .small { font-size: var(--fs-small); }
  .muted { color: var(--c-muted); }
  .ink { color: var(--c-ink); }

  /* layout */
  .container { width: 100%; max-width: calc(var(--content-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--section-y); }
  .section--band { background: var(--c-sage); }
  .section--dark { background: var(--c-dark); color: var(--c-on-dark); }
  .section--dark h2, .section--dark h3 { color: #fff; }
  .section--line { border-top: 1px solid var(--c-line); }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--sp-4); }
  .stack { display: flex; flex-direction: column; gap: var(--sp-3); }
  .stack--sm { gap: var(--sp-2); }
  .stack--lg { gap: var(--sp-7); }

  /* scroll reveal */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .no-js .reveal { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

  /* SVG 線描画アニメーション */
  .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
  .is-visible .draw, .is-drawn .draw { animation: draw 1.6s var(--ease-out) forwards; }
  .is-visible .dot, .is-drawn .dot { animation: pop .5s var(--ease-out) 1.2s both; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .dot { transform-box: fill-box; transform-origin: center; }
  @media (prefers-reduced-motion: reduce) { .draw { stroke-dashoffset: 0; animation: none; } .dot { animation: none; } }
}

@layer utilities {
  /* セージ地では --c-muted のコントラストが 4.33:1 に落ちるため一段濃くする */
  .section--band .label, .section--band .muted, .section--band .breadcrumb, .stay-hero .label, .stay-hero .muted, .stay-hero .breadcrumb, .stay-hero .stay-stats dt { color: var(--c-muted-on-sage); }
  @media (max-width: 767px) { .pc-only { display: none !important; } }
  @media (min-width: 768px) { .sp-only { display: none !important; } }
  @media (max-width: 767px) { .sp-hidden { display: none !important; } }
  @media (min-width: 768px) and (max-width: 1079px) { .tb-hidden { display: none !important; } }
  .nowrap { white-space: nowrap; }
}