/* Notion Design System — Mycophile Culture Blog */

:root {
  --blog-bg: var(--bg-light, #f8f5f0);
  --blog-surface: #ffffff;
  --blog-surface-soft: #f3efe7;
  --blog-border: rgba(74, 124, 89, 0.16);
  --blog-border-hover: rgba(74, 124, 89, 0.36);
  --blog-text: var(--text-dark, #2c3e2f);
  --blog-muted: var(--text-light, #6b7c6e);
  --blog-heading: var(--text-dark, #2c3e2f);
  --blog-accent: var(--primary-color, #4a7c59);
  --blog-accent-2: var(--accent-color, #d4a574);
  --blog-shadow: 0 16px 40px rgba(44, 62, 47, 0.10);
  --blog-radius: 8px;
  --sidebar-width: 300px;
  --blog-font: 'Inter', 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.blog-page { font-family: var(--blog-font); color: var(--blog-text); background: var(--blog-bg); }
.skip-link { position:absolute; top:-48px; left:16px; z-index:10000; padding:10px 14px; border-radius:var(--blog-radius); background:var(--blog-accent); color:#fff; font-weight:700; transition:top .2s ease; }
.skip-link:focus { top:16px; }
.blog-main { padding: calc(70px + 40px) 0 72px; background: radial-gradient(circle at top left, rgba(74,124,89,.10), transparent 30rem), var(--blog-bg); }
.blog-hero { max-width:1200px; margin:0 auto 32px; padding:0 24px 28px; border-bottom:1px solid var(--blog-border); }
.blog-hero .container { padding:0; }
.blog-hero h1 { margin:0 0 12px; color:var(--blog-heading); font-family:var(--blog-font); font-size:clamp(2.2rem,5vw,4rem); line-height:1.05; letter-spacing:-.04em; }
.blog-hero p { max-width:760px; margin:0; color:var(--blog-muted); font-size:1.05rem; }
.eyebrow { display:inline-flex; margin:0 0 10px; color:var(--blog-accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.blog-container, .blog-two-column { display:grid; grid-template-columns:minmax(0, 1fr) var(--sidebar-width); gap:32px; align-items:start; width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.blog-main-content, .blog-article { min-width:0; }
.section-header { margin-bottom:20px; padding:22px; border:1px solid var(--blog-border); border-radius:var(--blog-radius); background:var(--blog-surface); box-shadow:var(--blog-shadow); }
.section-header h2 { margin:0 0 8px; color:var(--blog-heading); }
.section-header p { margin:0; color:var(--blog-muted); }
.blog-grid, .blog-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.blog-card, .card { overflow:hidden; border:1px solid var(--blog-border); border-radius:var(--blog-radius); background:var(--blog-surface); box-shadow:0 10px 28px rgba(44,62,47,.07); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.blog-card:hover, .card:hover { transform:translateY(-3px); border-color:var(--blog-border-hover); box-shadow:0 18px 46px rgba(74,124,89,.14); }
.blog-card a, .card a { color:inherit; text-decoration:none; }
.card-thumb { aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg, rgba(74,124,89,.12), rgba(212,165,116,.16)); }
.card-thumb img, .blog-thumbnail { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.blog-card:hover .card-thumb img { transform:scale(1.04); }
.card-body, .blog-content { padding:22px; }
.card-body time, .blog-content time { display:inline-block; margin-bottom:10px; color:var(--blog-accent); font-size:.82rem; font-weight:700; }
.card-body h3, .blog-content h2 { margin:0 0 10px; color:var(--blog-heading); font-size:1.12rem; line-height:1.45; }
.card-body p, .blog-content p { margin:0 0 12px; color:var(--blog-muted); font-size:.95rem; line-height:1.75; }
.empty-state { grid-column:1 / -1; }
.article-header { margin-bottom:24px; padding:28px; border:1px solid var(--blog-border); border-radius:var(--blog-radius); background:var(--blog-surface); box-shadow:var(--blog-shadow); }
.article-header h1 { margin:0 0 14px; color:var(--blog-heading); font-family:var(--blog-font); font-size:clamp(2rem,4vw,3.2rem); line-height:1.14; letter-spacing:-.035em; }
.article-meta { color:var(--blog-muted); }
.article-body { padding:32px; border:1px solid var(--blog-border); border-radius:var(--blog-radius); background:var(--blog-surface); box-shadow:var(--blog-shadow); }
.article-body h2, .article-body h3, .article-body h4 { color:var(--blog-heading); font-family:var(--blog-font); line-height:1.35; }
.article-body h2 { margin:2rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--blog-border); }
.article-body p, .article-body li { color:var(--blog-text); line-height:1.9; }
.blog-sidebar { position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.sidebar-widget, .sidebar-section, .sidebar-toc, .sidebar-banners { padding:18px; border:1px solid var(--blog-border); border-radius:var(--blog-radius); background:var(--blog-surface); box-shadow:0 10px 28px rgba(44,62,47,.07); }
.widget-title, .sidebar-widget h2, .sidebar-widget h3, .sidebar-section h2, .sidebar-section h3, .sidebar-toc h2, .sidebar-toc h3 { margin:0 0 12px; color:var(--blog-heading); font-size:1rem; font-family:var(--blog-font); }
.sidebar-widget p, .sidebar-section p { margin:0; color:var(--blog-muted); font-size:.9rem; line-height:1.7; }
.sidebar-nav, .sidebar-list, .sidebar-toc ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.sidebar-nav a, .sidebar-list a, .sidebar-toc a { display:block; padding:9px 10px; border-radius:7px; color:var(--blog-text); background:var(--blog-surface-soft); text-decoration:none; }
.sidebar-nav a:hover, .sidebar-list a:hover, .sidebar-toc a:hover { color:var(--blog-accent); background:#edf5ef; }
.ad-placeholder, .amazon-ad { border-style:dashed; background:linear-gradient(135deg, rgba(74,124,89,.09), rgba(212,165,116,.12)); }
.ad-label { display:inline-flex; margin-bottom:8px; padding:3px 8px; border-radius:9999px; color:#fff; background:var(--blog-accent); font-size:.7rem; font-weight:800; }
.sitenavi-middle, .sitenavi-bottom { min-height:120px; }
@media (max-width: 768px) {
  .blog-container, .blog-two-column { grid-template-columns:1fr; gap:24px; padding:0 16px; }
  .blog-sidebar { position:static; }
  .blog-hero { padding:0 16px 22px; }
  .article-body, .article-header, .section-header, .sidebar-widget, .sidebar-section, .sidebar-toc, .sidebar-banners { padding:18px; }
  .blog-grid, .blog-list { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .blog-hero h1 { font-size:2rem; }
  .card-body, .blog-content { padding:18px; }
}