/* Per-variant looks. Same markup everywhere; only these rules differ. */
@media (max-width: 1080px) { .hide-md { display: none; } }
.nav__links { gap: 20px; font-size: 0.86rem; }
@media (max-width: 1180px) { .nav__links { display: none; } .nav__in { gap: 12px; } .nav__in .brand { margin-right: auto; } }

/* hero placements */
.hero-framed { padding-top: 24px; }
.hero-bleed .banner { max-height: 82dvh; }
.hero-bleed .banner__bar { left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero-ledger { padding-top: 24px; }
.hero-ledger .banner { box-shadow: 0 0 0 1px var(--rule-d); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule-d); border-top: 0; }
.kpi { padding: 20px 24px 24px; }
.kpi + .kpi { border-left: 1px solid var(--rule-d); }
.kpi small { display: block; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--washi-3); margin-bottom: 10px; }
.kpi .num { font-size: clamp(1.9rem, 3vw, 2.6rem); }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--rule-d); } }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 48px); }
.hero-split__copy { --flow: 24px; }
.hero-split__img { aspect-ratio: 1; }
.hero-split__img img { object-position: center 20%; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } .hero-split__img { order: -1; } }

/* section spacing — tighter than marketing default, this is a shop */
.sec-promo { padding-block: clamp(32px, 4vw, 56px); }
.sec-news { padding-block: 0 var(--section); }
.sec-news.dark { padding-block: var(--section); }

/* ---------- 01 Washi: hairline paper cards ---------- */
.v-washi .nft { --card-bg: var(--paper); --card-ring: inset 0 0 0 1px var(--rule); --card-pad: 14px 14px 16px; }
.v-washi .sec-up .nft { --card-bg: var(--paper); }

/* ---------- 02 Sumi: dark cards like the Figma, lifted panel ---------- */
.v-sumi { background: var(--sumi); }
.v-sumi .dark .nft { --card-bg: var(--sumi-2); --card-ring: inset 0 0 0 1px var(--rule-d); --card-pad: 14px 14px 16px; }
.v-sumi .dark .promo { --promo-bg: var(--sumi-2); box-shadow: inset 0 0 0 1px var(--rule-d); }
.v-sumi .dark .search, .v-sumi .dark .select { --field: var(--sumi-2); }
.v-sumi .sec-buyers { position: relative; }
.v-sumi .dark + .sec-buyers { border-top: 0; }

/* ---------- 03 Split: borderless light cards, ink band for upcoming ---------- */
.v-split .sec-up .nft { --card-bg: var(--sumi-2); --card-pad: 14px 14px 16px; }
.v-split .promo { --promo-bg: var(--paper-2); box-shadow: none; }

/* ---------- 04 Kin: caption over the square, gold hairlines ---------- */
.v-kin .banner { box-shadow: 0 0 0 1px var(--kin), 0 0 0 7px var(--paper), 0 0 0 8px color-mix(in oklch, var(--kin) 50%, transparent); }
.v-kin .eyebrow--shu { color: var(--kin-ink); }
.v-kin .dark .eyebrow--shu { color: var(--kin); }
.v-kin .nft { position: relative; }
.v-kin .nft__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.16 0.008 55 / 0.85), transparent 48%); pointer-events: none; }
.v-kin .nft h3 { position: absolute; left: 14px; right: 14px; top: 0; aspect-ratio: auto; transform: translateY(calc(-100% - 14px)); color: var(--washi); pointer-events: none; }
.v-kin .nft h3 a { pointer-events: auto; }
.v-kin .nft h3 .jp { color: var(--kin); }
.v-kin .nft__body { position: relative; }
.v-kin .nft { --card-ring: inset 0 0 0 1px color-mix(in oklch, var(--kin-ink) 35%, transparent); --card-pad: 14px 14px 16px; }
.v-kin .dark .nft { --card-ring: inset 0 0 0 1px color-mix(in oklch, var(--kin) 30%, transparent); }
.v-kin .tabs button::after, .v-kin .meter > i { background: var(--kin-ink); }
.v-kin .promo { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--kin-ink) 35%, transparent); }

/* ---------- 05 Ledger: burn-page rhythm ---------- */
.v-ledger { background: var(--sumi); }
.v-ledger .dark .promo { --promo-bg: var(--sumi-2); box-shadow: inset 0 0 0 1px var(--rule-d); }
.v-ledger .sec-promo.dark { padding-top: 24px; }
.v-ledger .nft { --card-bg: var(--paper); --card-ring: inset 0 0 0 1px var(--rule-strong); --card-pad: 12px 12px 14px; }
.v-ledger .nft__stats dd { font-family: var(--f-num); font-size: 1.05rem; letter-spacing: 0.03em; font-weight: 400; }

/* ---------- 06 Quiet: most white space, no boxes ---------- */
.v-quiet .grid4 { --g: 32px 24px; }
.v-quiet .nft p { -webkit-line-clamp: 3; }
.v-quiet .sec-promo .promos { --g: 1px; background: var(--rule-d); }
.v-quiet .dark .promo { --promo-bg: var(--sumi); box-shadow: none; }

/* ---------- NFT detail pages ---------- */
.pdp-banner { padding-top: 24px; }
.pdp-banner .banner { aspect-ratio: 2 / 1; }
.pdp-banner .banner .btns { display: none; }
@media (max-width: 760px) { .pdp-banner .banner__bar { display: none; } }
.pdp-wrap { padding-bottom: var(--section); }
body.dark { background: var(--sumi); }
.dark .ring { --ring-hole: var(--sumi); }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.countdown { padding: 20px 0; border-block: 1px solid var(--rule); display: grid; gap: 8px; }
.countdown small { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.countdown .num { font-size: clamp(2.2rem, 4vw, 3rem); color: var(--shu); }
.remind { display: flex; flex-wrap: wrap; gap: 8px; }
.remind input { flex: 1 1 220px; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule-strong); background: transparent; font: inherit; color: inherit; }
.remind input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.p-inugami .nft { --card-bg: var(--sumi-2); --card-pad: 14px 14px 16px; }
.p-shiba .pdp-wrap { background: var(--paper); }
.p-shiba .media .frame { box-shadow: 0 0 0 1px var(--rule-d); }
.p-sakura .countdown .num { color: var(--shu-deep); }