/* サイト共通：文字の配置と余白で階層を表現。配色・操作はsite.cssを継承。 */
.typography-site { --type-divider:color-mix(in srgb,var(--ink) 15%,var(--paper)); }
.typography-site .container { width:calc(100% - 6rem); }
.typography-site .site-header { border-color:var(--type-divider); }
.typography-site .header-inner { gap:1.5rem; padding-block:1.75rem; }
.typography-site .brand { font-size:1.625rem; letter-spacing:-.05em; text-decoration:none; }
.typography-site .nav-list { gap:.5rem 1.5rem; }
.typography-site .nav-list a { font-size:.875rem; padding:0; }
.typography-site .theme-control { font-size:.8125rem; }
.typography-site .hero { display:grid; grid-template-columns:4rem minmax(0,1fr); column-gap:1.5rem; padding:6.25rem 0 5.75rem; max-width:none; }
.typography-site .eyebrow { grid-column:2; font-size:.8125rem; font-weight:400; letter-spacing:.16em; margin:0 0 1.5rem; }
.typography-site h1 { grid-column:2; font-size:clamp(2rem,5.6vw,4rem); font-weight:500; letter-spacing:-.045em; line-height:1.5; margin:0; }
.typography-site .lead { grid-column:2; font-size:1rem; line-height:2; margin:2rem 0 0; }
.home-page .chromatic-title { --chroma-pink:light-dark(#a41b68,#ed75b6); --chroma-cyan:light-dark(#00677e,#66d3e4); position:relative; width:fit-content; max-width:100%; text-shadow:2px 0 var(--chroma-pink),-2px 0 var(--chroma-cyan); }
.home-page .chromatic-line::after { content:attr(data-text) / ""; position:absolute; inset:0; pointer-events:none; background:var(--paper); clip-path:inset(35% 0 42% 0); transform:translateX(-5px); text-shadow:3px 0 var(--chroma-pink),-3px 0 var(--chroma-cyan); animation:chromatic-shift 1.2s steps(1,end) 1; }
.home-page .chromatic-line { position:relative; display:inline-block; max-width:100%; }
@keyframes chromatic-shift { 0%,45% { transform:translateX(-5px); } 46%,89% { transform:translateX(10px); } 90%,100% { transform:translateX(-5px); } }
@media(prefers-reduced-motion:reduce) { .home-page .chromatic-line::after { animation:none; } }
@media(forced-colors:active) { .home-page .chromatic-title { text-shadow:none; } .home-page .chromatic-line::after { display:none; } }
.typography-site .home-grid { grid-template-columns:minmax(0,2fr) minmax(14.375rem,1fr); gap:4.5rem; padding-bottom:6rem; }
.typography-site h2 { font-size:1.375rem; font-weight:500; line-height:1.6; letter-spacing:-.025em; margin:0; }
.typography-site .section-heading { gap:1rem; margin-bottom:1.5rem; }
.typography-site .section-heading>a { font-size:.8125rem; }
.typography-site .post-list { border-top:0; }
.typography-site .post-list>li { padding-block:2rem; border-top:1px solid var(--type-divider); border-bottom:0; }
.typography-site .post-list article { display:grid; grid-template-columns:4rem minmax(0,1fr); gap:.75rem 1.5rem; }
.typography-site .post-list .meta { grid-column:2; font-size:.8125rem; margin:0; letter-spacing:.04em; }
.typography-site h3 { grid-column:2; font-size:1.375rem; font-weight:500; line-height:1.6; letter-spacing:-.025em; margin:0; }
.typography-site h3 a,.typography-site h3 a:visited { color:var(--ink); }
.typography-site h3 a:hover { color:var(--hover); }
.typography-site .post-list article>p:last-child { grid-column:2; font-size:.875rem; line-height:1.95; margin:0; }
.typography-site aside { padding-top:.1875rem; }
.typography-site #categories-heading { font-size:1.125rem; margin-bottom:1.5rem; }
.typography-site .category-list { margin-bottom:1rem; }
.typography-site .category-list li { padding-block:.5rem; border-top:1px solid var(--type-divider); border-bottom:0; }
.typography-site .category-list a { padding:0; font-size:1rem; letter-spacing:.015em; }
.typography-site aside>p { font-size:.8125rem; margin:0; }
.typography-site .about-note { margin-top:3rem; padding:0; border:0; background:transparent; }
.typography-site .about-note h2 { font-size:1.0625rem; margin-bottom:1rem; }
.typography-site .about-note p { font-size:.875rem; line-height:1.95; margin:0 0 1rem; }
.typography-site .about-note a { font-size:.8125rem; display:inline-flex; min-height:2.75rem; align-items:center; }
.typography-site .site-footer { background:var(--paper); border-color:var(--type-divider); }
.typography-site .footer-inner p { margin:0; font-size:.8125rem; color:var(--muted); }
/* 記事と固定ページは読みやすい本文幅を保ち、一覧も同じ文字階層に揃える。 */
.typography-site .reading { padding-block:3rem 6rem; }
.typography-site .reading>h1,.typography-site .article-header h1 { font-size:clamp(2rem,4vw,3rem); margin-bottom:1.5rem; }
.typography-site .article-header { margin-bottom:3.5rem; }
.typography-site .article-header .eyebrow { margin-bottom:1rem; }
.typography-site .article-header .meta { font-size:.875rem; letter-spacing:.04em; }
.typography-site .article-categories { gap:.5rem 1.5rem; margin-bottom:0; }
.typography-site .breadcrumb { font-size:.875rem; margin-block:2rem; }
.typography-site .post-list h2 { grid-column:2; font-size:1.375rem; margin:0; }
.typography-site .post-list h2 a,.typography-site .post-list h2 a:visited { color:var(--ink); }
.typography-site .post-list h2 a:hover { color:var(--hover); }
.typography-site .prose h2 { font-size:1.75rem; margin:3rem 0 1rem; }
.typography-site .prose h3 { font-size:1.375rem; margin:2rem 0 1rem; }
.typography-site .article-footer { border-color:var(--type-divider); margin-top:3rem; padding-top:1.5rem; }
.typography-site .pagination { border-top:1px solid var(--type-divider); padding-top:1.5rem; }
.typography-site .search-page #search-form { background:transparent; border-radius:0; padding:0; margin-block:2rem; }
.typography-site .search-page #search-status { font-size:.875rem; color:var(--muted); }
.typography-site #not-found-title { margin-bottom:2rem; }
.typography-site .reading>h2 { margin-bottom:1.5rem; }
@media(min-width:56.25rem) {
 .typography-site .header-inner { padding-right:6rem; }
 .typography-site .theme-control { width:100%; justify-content:flex-end; margin-top:-.5rem; }
}
@media(max-width:50rem) {
 .typography-site .container { width:calc(100% - 3rem); }
 .typography-site .home-grid { grid-template-columns:minmax(0,1fr); gap:3rem; }
 .typography-site .hero { padding-block:4rem; grid-template-columns:2rem minmax(0,1fr); column-gap:1rem; }
 .typography-site .post-list article { grid-template-columns:2rem minmax(0,1fr); gap:.75rem 1rem; }
 .typography-site aside { padding-left:3rem; }
}
@media(max-width:30rem) {
 .typography-site .container { width:calc(100% - 2rem); }
 .typography-site .header-inner { padding-block:1.25rem; gap:.75rem; }
 .typography-site .nav-list { gap:.25rem 1rem; }
 .typography-site .hero { grid-template-columns:1.5rem minmax(0,1fr); gap:0 .75rem; padding-block:3rem; }
 .typography-site h1 { font-size:clamp(1.6875rem,7.7vw,2.25rem); letter-spacing:-.055em; }
 .typography-site h1 br { display:initial; }
 .typography-site .lead { font-size:.875rem; margin-top:1.5rem; }
 .typography-site h2,.typography-site h3 { font-size:1.25rem; }
 .typography-site .post-list article { grid-template-columns:1.5rem minmax(0,1fr); gap:.75rem; }
 .typography-site aside { padding-left:2.25rem; }
 .typography-site .section-heading>a { margin-left:2.25rem; min-height:2.75rem; display:inline-flex; align-items:center; }
 .typography-site .reading { padding-block:2rem 4rem; }
 .typography-site .reading>h1,.typography-site .article-header h1 { font-size:1.75rem; }
 .typography-site .post-list h2 { font-size:1.25rem; }
 .typography-site .prose h2 { font-size:1.5rem; }
 .typography-site .breadcrumb { font-size:.8125rem; }
}