@charset "UTF-8";
/* ============================================================
   jpmono.com — Base (reset + typography)
   ------------------------------------------------------------
   tokens.css の後に enqueue される前提。
   Cocoon 親テーマの強い既定値 (body 背景・フォント・ヘッダー色等) を
   このファイルで意図的に上書きする。!important は最小限にとどめ、
   特異度は class セレクタ 1つ程度で維持。
   ------------------------------------------------------------
   作成: 2026-05-23
   ============================================================ */

/* ── Modern reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
hr { border: 0; border-top: var(--border-thin); margin: var(--space-8) 0; }


/* ── Document base ─────────────────────────────────────── */
html, body {
  background: var(--bg-primary);
  color: var(--ink-primary);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  text-rendering: optimizeLegibility;
}

/* Cocoon 親が body や .body に淡色背景を強制するのを抑える。
   親テーマの大部分の指定は .body / .content / #main 等の id/class で
   入っているので、ここで CSS Variables 経由に揃え直す。 */
.body, #body, .content, #content, #main, #wrap, #wrap-in {
  background: transparent;
  color: inherit;
}


/* ── Links ─────────────────────────────────────────────── */
a {
  color: var(--ink-primary);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-base) var(--ease-out);
}
a:hover {
  color: var(--accent-red);
}
/* body 文中リンクは下線が静かにフェードインする */
.prose a, .article-body a {
  text-decoration: underline;
  text-decoration-color: transparent;
}
.prose a:hover, .article-body a:hover {
  text-decoration-color: currentColor;
}


/* ── Selection ─────────────────────────────────────────── */
::selection {
  background: var(--accent-red-soft);
  color: var(--ink-primary);
}


/* ── Focus  (WCAG AA 4.5:1, キーボード操作前提) ──────── */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }


/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  color: var(--ink-primary);
  text-wrap: pretty;
}
h1.is-balanced, h2.is-balanced, .display.is-balanced {
  text-wrap: balance;
}

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-medium);
  color: var(--ink-primary);
  text-wrap: pretty;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
h4, .h4 {
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: var(--fw-semi);
  font-family: var(--font-sans);
}
h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  line-height: 1.4;
}

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--ink-secondary);
  max-width: var(--measure-max);
}
.lead, p.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-primary);
}

small, .caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
}

blockquote {
  margin: var(--space-8) 0;
  padding: 0 0 0 var(--space-6);
  border-left: 2px solid var(--accent-red);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.45;
  color: var(--ink-primary);
  font-style: italic;
}
blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-style: normal;
  color: var(--ink-muted);
}

/* 日本語の地名・工芸名は Noto Serif JP を当てる用クラス */
.lang-ja {
  font-family: var(--font-ja-serif);
  font-feature-settings: "palt" 1;
}

/* mono ナンバー (価格など) */
.num {
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* ── Eyebrow / sectional label ─────────────────────────
   sans, uppercase, 朱、tracking 0.12em, weight 600
*/
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-red);
}


/* ── Container / Section ───────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.container--narrow { max-width: var(--container-narrow); }
.container--reading { max-width: var(--container-reading); }

.section {
  padding-block: var(--section-py-mobile);
}
@media (min-width: 768px) {
  .section { padding-block: var(--section-py-tablet); }
}
@media (min-width: 1100px) {
  .section { padding-block: var(--section-py-desktop); }
}
.section--lg { padding-block: var(--section-py-desktop); }
@media (min-width: 1100px) {
  .section--lg { padding-block: var(--section-py-large); }
}

.section--alt { background: var(--bg-secondary); }


/* ── Section header pattern (eyebrow + h2 + view-all) ─── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}
.section-header__intro { max-width: 56ch; }
.section-header__intro .eyebrow { margin-bottom: var(--space-3); }
.section-header__intro h2 { margin: 0; }
.section-header__link {
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--ink-primary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.section-header__link::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}
.section-header__link:hover { color: var(--accent-red); }
.section-header__link:hover::after { transform: translateX(4px); }


/* ── Utility ──────────────────────────────────────────── */
.visually-hidden {
  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: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-popover);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-primary);
  color: var(--ink-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: var(--ink-inverse); }


/* ── Image defaults ────────────────────────────────────── */
img { border-radius: var(--radius-img); }
figure { margin: 0; }
figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  font-style: italic;
}


/* ── Cocoon 親テーマの干渉を抑える ────────────────────
   - サイドバーは新テンプレでは出さない (front/single の自前テンプレ側でレイアウト)
   - 親の .article 内部 padding を緩和
   - 親の白背景強制を解除
*/
body { background: var(--bg-primary); }
#sidebar { /* front-page / single の独自テンプレで wrapper class により非表示制御 */ }
.no-sidebar #main, .no-sidebar #wrap, .no-sidebar #wrap-in { width: 100%; max-width: none; }
.no-sidebar #main { float: none; }

/* 旧 amaoffry style.css に残っていた img { border-radius: 6px } のような副作用を打ち消す */
.entry-content img,
.article img {
  border-radius: var(--radius-img);
}

/* Cocoon の入れ子コンテナで生まれる二重 background を消す */
#container, .main, .article, .article-body, .entry-content {
  background: transparent;
}


/* ── Fade-in (既存 ama-fade JS は維持、見た目だけ刷新) ── */
.ama-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.ama-fade.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ama-fade, .ama-fade.is-visible { opacity: 1; transform: none; transition: none; }
}