/*
Theme Name: VOID GRID
Theme URI: https://example.com/void-grid
Author: Studio 01
Description: 余白とタイポグラフィを軸にした、モノクロのストア向けWordPressブロックテーマ。
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: void-grid
Tags: block-patterns, full-site-editing, e-commerce, one-column, wide-blocks
*/

:root { --vg-line: #d8d8d4; --vg-muted: #6f6f69; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.wp-site-blocks { min-height: 100vh; }
.vg-header { border-bottom: 1px solid var(--vg-line); }
.vg-header__inner { min-height: 84px; }
.vg-wordmark { letter-spacing: -.06em; }
.vg-header .wp-block-navigation { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.vg-header .wp-block-navigation-item__content { padding: .65rem 0; }
.vg-utility { gap: 18px; }
.vg-utility a { text-decoration: none; }
.vg-hero { min-height: 78vh; display: flex; align-items: flex-end; border-bottom: 1px solid var(--vg-line); }
.vg-hero__inner { width: 100%; padding-top: clamp(7rem, 16vw, 15rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.vg-kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.vg-display { max-width: 13ch; letter-spacing: -.055em; line-height: .88 !important; text-transform: uppercase; }
.vg-hero-meta { border-top: 1px solid var(--vg-line); padding-top: 18px; margin-top: clamp(3rem, 7vw, 7rem) !important; }
.vg-hero-meta p { margin: 0; }
.vg-section { padding-top: clamp(5rem, 10vw, 10rem); padding-bottom: clamp(5rem, 10vw, 10rem); }
.vg-section-head { padding-bottom: 20px; border-bottom: 1px solid var(--vg-line); margin-bottom: 28px !important; }
.vg-section-head h2, .vg-section-head p { margin: 0; }
.vg-product-grid { gap: 1px !important; background: var(--vg-line); border: 1px solid var(--vg-line); }
.vg-card { background: #f4f4f0; position: relative; overflow: hidden; }
.vg-card-image { aspect-ratio: 1 / 1; background-image: url('./assets/images/products-sprite.png'); background-repeat: no-repeat; background-size: 200% 200%; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.vg-card:hover .vg-card-image { transform: scale(1.025); filter: contrast(1.04); }
.vg-card-image--hoodie { background-position: 0 0; }
.vg-card-image--cap { background-position: 100% 0; }
.vg-card-image--bag { background-position: 0 100%; }
.vg-card-image--tee { background-position: 100% 100%; }
.vg-card-body { padding: 18px 18px 22px; background: #fff; border-top: 1px solid var(--vg-line); }
.vg-card-body p { margin: 0; }
.vg-card-title { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.vg-card-meta { color: var(--vg-muted); font-size: 11px; margin-top: 7px !important; }
.vg-card-link { position: absolute; inset: 0; z-index: 2; }
.vg-card-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vg-card-status { position: absolute; top: 14px; left: 14px; z-index: 1; background: #0b0b0b; color: #fff; padding: 6px 8px; font-size: 9px; line-height: 1; letter-spacing: .12em; }
.vg-statement { min-height: 62vh; background: #0b0b0b; color: #fff; display: flex; align-items: center; }
.vg-statement h2 { max-width: 15ch; letter-spacing: -.045em; line-height: .94; }
.vg-statement p { color: #aaa; }
.vg-marquee { overflow: hidden; border-block: 1px solid #292929; padding-block: 18px; white-space: nowrap; }
.vg-marquee p { width: max-content; margin: 0; animation: vg-scroll 24s linear infinite; }
@keyframes vg-scroll { to { transform: translateX(-50%); } }
.vg-newsletter { border-top: 1px solid var(--vg-line); }
.vg-newsletter .wp-block-button__link { min-width: 170px; }
.vg-footer { border-top: 1px solid var(--vg-line); padding-block: 34px; }
.vg-footer a { text-decoration: none; }
.vg-footer p { margin: 0; }
.vg-archive-title { padding-top: clamp(7rem, 14vw, 13rem); padding-bottom: 40px; border-bottom: 1px solid var(--vg-line); }
.vg-post-content { padding-block: clamp(4rem, 8vw, 8rem); }
.vg-post-content > * { max-width: 760px; margin-inline: auto; }
.vg-post-content > .alignwide { max-width: 1280px; }
.vg-post-content > .alignfull { max-width: none; }
.wp-block-query-pagination { border-top: 1px solid var(--vg-line); padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .vg-marquee p { animation: none; } .vg-card-image { transition: none; } }
@media (max-width: 781px) {
  .vg-header__inner { min-height: 68px; }
  .vg-header .wp-block-navigation__responsive-container-open { display: flex; }
  .vg-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .vg-hero { min-height: 70vh; }
  .vg-hero-meta { gap: 18px; }
  .vg-product-grid > .wp-block-column { flex-basis: calc(50% - 1px) !important; }
  .vg-statement { min-height: 55vh; }
}
@media (max-width: 520px) {
  .vg-product-grid > .wp-block-column { flex-basis: 100% !important; }
  .vg-card-body { padding: 14px 14px 18px; }
  .vg-hero__inner { padding-top: 8rem; }
  .vg-utility { display: none; }
}