/* ============================================================
   base.css — volto shared base styles

   Resets and the .page container that every core page uses.
   body の line-height / letter-spacing は意図的に含めていません
   （ページごとの読み心地の差を尊重するため）。

   読み込み順:
     1. tokens.css   （変数）
     2. base.css     （ここ：リセット + .page）
     3. <style>      （ページ固有）
   ============================================================ */

*{ box-sizing: border-box; }

html,
body{ margin: 0; padding: 0; }

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

body{
  font-family: var(--jp);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* line-height / letter-spacing はページごとに inline <style> 側で指定 */
}

a{ color: inherit; text-decoration: none; }

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: inherit;
}

img{ display: block; max-width: 100%; }

/* --- Page container: mobile-first, max 520 --- */
.page{
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  background: var(--paper);
  overflow: hidden;
}

/* PC では .page の幅制限を解除し全幅レンダリングへ。
   front-page だけでなく page-* / archive-* / single-* を含む全ページで
   この base が必要なため、page-specific (front.css) ではなくここに置く。 */
@media (min-width: 768px){
  .page{
    max-width: none;
    overflow: visible;
  }
}