:root {
    --color-bg: #ffffff; --color-bg-muted: #f5f5f3;
    --color-text: #1a1a1a; --color-muted: #888880; --color-border: #e8e8e4;
    --color-accent: #c8a97e; --color-accent-dark: #a88660;
    --container-max: 1200px; --container-prose: 800px;
    --gutter: clamp(1rem, 4vw, 2.5rem); --section-gap: clamp(3rem, 8vw, 6rem);
    --grid-gap: clamp(1.5rem, 3vw, 2.5rem); --header-height: 72px;
    --transition: 0.3s ease; --radius-sm: 2px; --radius: 4px;
}

html { background: var(--color-bg); color: var(--color-text); }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.site-main { min-height: calc(100vh - var(--header-height)); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-border); height: var(--header-height); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-branding { display: flex; align-items: center; }
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }

/* ロゴ：CSS文字 + SVGシンボル（折り返し禁止） */
.logo-wordmark {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-family: var(--font-sans-ja);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--color-text);
    gap: 0;
}
.logo-wordmark__art,
.logo-wordmark__n   { display: inline; line-height: 1; }
.logo-wordmark__o   { display: inline-flex; align-items: center; line-height: 1; padding: 0 0.06em; }
.logo-wordmark__o svg { width: 1.1em !important; height: 1.1em !important; flex-shrink: 0; display: block; }
.site-footer .logo-wordmark { color: #fff; }

/* WordPress カスタムロゴ（外観→カスタマイズで設定した場合） */
.custom-logo-link { display: flex; align-items: center; }
.custom-logo      { height: 40px !important; width: auto !important; max-width: 200px; display: block; }

/* Nav */
.nav-menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a { font-family: var(--font-sans-ja); font-size: var(--text-sm); letter-spacing: var(--tracking-wider); color: var(--color-text); transition: color var(--transition); }
.nav-menu a:hover { color: var(--color-accent); }
.menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; }
.menu-toggle__bar { display: block; width: 100%; height: 1px; background: var(--color-text); transition: transform var(--transition), opacity var(--transition); }

/* Footer */
.site-footer { background: var(--color-text); color: var(--color-bg); padding-block: clamp(2rem, 5vw, 4rem); margin-top: var(--section-gap); }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.footer-menu { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.footer-menu a { font-family: var(--font-sans-ja); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); opacity: 0.7; transition: opacity var(--transition); }
.footer-menu a:hover { opacity: 1; }
.footer-copy { font-family: var(--font-sans-ja); font-size: var(--text-xs); opacity: 0.5; white-space: nowrap; }

/* Grids */
.artwork-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.post-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.post-list    { display: flex; flex-direction: column; gap: var(--grid-gap); }
.layout-with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Sections */
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.section-title  { font-size: var(--text-2xl); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.section-more   { font-family: var(--font-sans-ja); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--color-muted); transition: color var(--transition); }
.section-more:hover { color: var(--color-text); }
.artwork-section, .column-section { padding-block: var(--section-gap); }
.column-section { background: var(--color-bg-muted); }

/* Archive/Page headers */
.archive-header, .page-header, .post-header { padding-block: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--color-border); margin-bottom: clamp(2rem, 5vw, 3rem); }
.archive-title, .page-title { font-size: var(--text-3xl); letter-spacing: var(--tracking-widest); text-transform: uppercase; }

/* Pagination */
.pagination { margin-top: clamp(2rem, 5vw, 4rem); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 0.5rem; }
.pagination a, .pagination .current { font-family: var(--font-sans-ja); font-size: var(--text-sm); padding: 0.5rem 1rem; border: 1px solid var(--color-border); transition: background var(--transition), color var(--transition); }
.pagination .current { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.pagination a:hover { border-color: var(--color-text); }

/* 404 */
.error-404-wrap { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; }
.error-404__code    { font-size: clamp(4rem, 15vw, 10rem); font-family: var(--font-serif-en); font-weight: 300; color: var(--color-border); line-height: 1; margin-bottom: 1rem; }
.error-404__message { font-size: var(--text-lg); color: var(--color-muted); margin-bottom: 2rem; }

/* Responsive */
@media ( max-width: 1024px ) {
    .artwork-grid { grid-template-columns: repeat(2, 1fr); }
    .post-grid    { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-menu  { justify-content: center; }
    .footer-copy  { text-align: center; }
}
@media ( max-width: 768px ) {
    .artwork-grid        { grid-template-columns: 1fr; }
    .post-grid           { grid-template-columns: 1fr; }
    .layout-with-sidebar { grid-template-columns: 1fr; }
    .sidebar             { display: none; }
    .site-nav { position: fixed; inset: 0 0 0 30%; z-index: 200; background: var(--color-bg); padding: calc(var(--header-height) + 2rem) 2rem 2rem; transform: translateX(100%); transition: transform 0.4s ease; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,0.08); }
    .site-nav.is-open { transform: translateX(0); }
    .nav-menu { flex-direction: column; gap: 1.5rem; }
    .nav-menu a { font-size: var(--text-base); }
    .menu-toggle { display: flex; }
}