/* =============================================================
 * WWHITEBEARS — Theme Stylesheet v3.0
 * Design: Dark cinematic / Glassmorphism (based on ReelCraft Studio)
 * Fonts: Cormorant Garamond (display, italic) + Manrope (sans)
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
	--bg:        #0a0a0c;
	--bg-2:      #101014;
	--bg-3:      #08080b;
	--ink:       #f4efe6;
	--ink-2:     rgba(244,239,230,.72);
	--ink-3:     rgba(244,239,230,.5);
	--ink-4:     rgba(244,239,230,.28);
	--line:      rgba(244,239,230,.12);
	--line-2:    rgba(244,239,230,.08);
	--accent-warm: #e88a4a;
	--accent-orb:  #ffe2b3;
	--serif:    'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	--sans:     'Manrope', system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
	--mono:     'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

html, body {
	margin: 0; padding: 0;
	background: var(--bg); color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-size: 16px;
	line-height: 1.6;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(232,138,74,.45); color: var(--ink); }

/* =============================================================
 * 1. Floating Pill Navigation
 * ============================================================= */

.wwb-nav {
	position: fixed; top: 28px; left: 0; right: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 56px;
	pointer-events: none;
}
.wwb-nav > * { pointer-events: auto; }

.wwb-logo {
	width: 56px; height: 56px; border-radius: 999px;
	border: 1px solid rgba(244,239,230,.35);
	display: grid; place-items: center;
	font-family: var(--serif); font-style: italic; font-size: 26px;
	background: rgba(10,10,12,.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--ink);
	text-decoration: none;
}
.wwb-logo span { margin-top: -3px; letter-spacing: -.02em; }

.wwb-pill {
	display: flex; gap: 6px; align-items: center;
	padding: 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.25) 100%);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.22),
		inset 0 -1px 0 rgba(0,0,0,.35),
		0 8px 32px rgba(0,0,0,.45);
}
.wwb-pill a {
	padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 500;
	color: var(--ink-2); transition: .3s;
	letter-spacing: .02em;
	text-decoration: none;
}
.wwb-pill a:hover { color: var(--ink); }
.wwb-pill a.is-active,
.wwb-pill a[aria-current="page"] {
	color: var(--ink);
	background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.3),
		inset 0 -1px 0 rgba(0,0,0,.2),
		0 4px 14px rgba(0,0,0,.35);
}

.wwb-nav-cta {
	padding: 13px 22px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.18);
	background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.2) 100%);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	font-size: 14px; font-weight: 500; color: var(--ink);
	display: inline-flex; align-items: center; gap: 8px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.28),
		inset 0 -1px 0 rgba(0,0,0,.3),
		0 8px 24px rgba(0,0,0,.4);
	transition: .25s;
	text-decoration: none;
}
.wwb-nav-cta:hover {
	background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 55%, rgba(0,0,0,.18) 100%);
	transform: translateY(-1px);
}

.wwb-nav-burger {
	display: none;
	width: 44px; height: 44px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(10,10,12,.5);
	backdrop-filter: blur(12px);
	color: var(--ink);
	align-items: center; justify-content: center;
}

/* =============================================================
 * 2. Hero
 * ============================================================= */

.wwb-hero {
	position: relative; min-height: 100vh;
	display: grid; place-items: center;
	text-align: center;
	overflow: hidden;
}
.wwb-bg-orb {
	position: absolute; inset: 0; width: 100%; height: 100%;
	z-index: 0;
	background:
		radial-gradient(circle at 50% 52%,
			rgba(255,220,160,.95) 0%,
			rgba(255,180,100,.85) 6%,
			rgba(230,130,70,.55) 14%,
			rgba(140,70,90,.35) 28%,
			rgba(40,25,60,.6) 50%,
			rgba(10,10,18,.95) 80%),
		radial-gradient(ellipse at 18% 75%, rgba(180,90,180,.45), transparent 45%),
		radial-gradient(ellipse at 82% 30%, rgba(220,140,80,.4), transparent 40%),
		radial-gradient(ellipse at 90% 90%, rgba(255,200,140,.3), transparent 35%),
		radial-gradient(ellipse at 10% 10%, rgba(80,60,140,.4), transparent 45%),
		linear-gradient(180deg, #1a0e1f 0%, #0a0612 60%, #050308 100%);
	animation: wwbOrbBreathe 12s ease-in-out infinite;
}
@keyframes wwbOrbBreathe {
	0%, 100% { filter: saturate(1) brightness(1); transform: scale(1); }
	50%      { filter: saturate(1.1) brightness(1.08); transform: scale(1.02); }
}
.wwb-bg-tint {
	position: absolute; inset: 0; z-index: 2;
	background:
		radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, rgba(10,10,12,.7) 100%),
		linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,0) 22%, rgba(10,10,12,0) 70%, rgba(10,10,12,.95) 100%);
	pointer-events: none;
}

.wwb-hero-inner { position: relative; z-index: 3; padding: 140px 24px 80px; max-width: 1280px; }

.wwb-eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 6px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.25) 100%);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.24),
		inset 0 -1px 0 rgba(0,0,0,.3),
		0 10px 30px rgba(0,0,0,.45);
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
	margin-bottom: 46px;
	flex-wrap: wrap;
	justify-content: center;
}
.wwb-eyebrow .tag {
	padding: 9px 16px; border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 60%, rgba(0,0,0,.15) 100%);
	color: var(--ink); letter-spacing: .18em;
	border: 1px solid rgba(255,255,255,.18);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.3),
		inset 0 -1px 0 rgba(0,0,0,.2);
}
.wwb-eyebrow .sub {
	text-transform: none; letter-spacing: .02em;
	font-family: var(--sans); padding-right: 14px;
}

.wwb-display {
	font-family: var(--serif);
	font-style: italic; font-weight: 500;
	font-size: clamp(48px, 7.2vw, 116px);
	line-height: .96; letter-spacing: -.01em;
	margin: 0 0 38px;
	text-wrap: balance;
	text-shadow: 0 4px 60px rgba(0,0,0,.45);
	color: var(--ink);
}

.wwb-lede {
	max-width: 680px; margin: 0 auto;
	font-size: 17px; line-height: 1.75; color: var(--ink-2);
}

.wwb-hero-stats {
	margin-top: 90px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 360px));
	gap: 24px; justify-content: center;
}
.wwb-stat {
	padding: 38px 36px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(0,0,0,.25) 100%);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.22),
		inset 0 -1px 0 rgba(0,0,0,.3),
		0 18px 48px rgba(0,0,0,.5);
	text-align: left;
	display: flex; flex-direction: column; gap: 18px;
}
.wwb-stat-icon {
	width: 46px; height: 46px; border-radius: 12px;
	border: 1px solid rgba(255,255,255,.2);
	display: grid; place-items: center; color: var(--ink);
	background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%);
}
.wwb-stat-num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 64px; line-height: 1; }
.wwb-stat-label { font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }

/* =============================================================
 * 3. Trusted Black Band (Sellers/Producers strip)
 * ============================================================= */

.wwb-band {
	background: #000;
	padding: 48px 40px 56px;
	text-align: center;
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.wwb-band-label {
	font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3);
	margin-bottom: 28px;
}
.wwb-band-row {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
	gap: 32px 56px; padding: 0 20px;
	max-width: 1600px; margin: 0 auto;
}
.wwb-band-row span {
	font-family: var(--serif); font-style: italic; font-weight: 400;
	font-size: clamp(20px, 2.4vw, 38px);
	color: rgba(244,239,230,.78);
	white-space: nowrap;
}

/* =============================================================
 * 4. Cosmic Section (statement)
 * ============================================================= */

.wwb-cosmic {
	position: relative; padding: 140px 0 160px;
	overflow: hidden;
	background: #06080d;
}
.wwb-bg-cosmic {
	position: absolute; inset: 0; z-index: 0; opacity: .85;
	background:
		radial-gradient(ellipse at 50% 55%, rgba(60,120,180,.45) 0%, rgba(40,60,120,.4) 18%, rgba(20,20,55,.6) 40%, rgba(8,10,22,.95) 75%),
		radial-gradient(ellipse at 25% 30%, rgba(150,100,200,.35), transparent 50%),
		radial-gradient(ellipse at 80% 65%, rgba(100,160,220,.3), transparent 50%),
		radial-gradient(ellipse at 50% 90%, rgba(40,30,70,.6), transparent 60%),
		linear-gradient(180deg, #06070f 0%, #0a0e1c 50%, #050609 100%);
}
.wwb-cosmic .wwb-bg-tint {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 0%, rgba(6,8,13,.55) 70%, rgba(6,8,13,1) 100%),
		linear-gradient(180deg, rgba(6,8,13,.4) 0%, rgba(6,8,13,0) 30%, rgba(6,8,13,.95) 100%);
}
.wwb-cosmic-inner { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.wwb-cosmic h2 {
	margin: 0;
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: clamp(48px, 7vw, 110px);
	line-height: 1; letter-spacing: -.01em;
	color: var(--ink);
}

/* =============================================================
 * 5. Sections / Headings
 * ============================================================= */

.wwb-section { padding: 140px 56px; position: relative; }
.wwb-section--dark { background: #08080b; }
.wwb-section--black { background: #000; }
.wwb-container { max-width: 1280px; margin: 0 auto; }

.wwb-eyebrow-line {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3);
	margin-bottom: 18px;
	font-family: var(--sans);
}
.wwb-eyebrow-line::before { content: "// "; color: var(--ink-4); }

.wwb-section-title {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: clamp(56px, 8.5vw, 144px);
	line-height: .95; letter-spacing: -.015em;
	margin: 0 0 60px;
	color: var(--ink);
}
.wwb-section-title--small {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.05; letter-spacing: -.01em;
	margin: 0 0 32px;
	color: var(--ink);
}

/* =============================================================
 * 6. Cards
 * ============================================================= */

.wwb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wwb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wwb-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wwb-card {
	border-radius: 24px;
	border: 1px solid rgba(244,239,230,.1);
	background: var(--bg-2);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: .4s;
	color: var(--ink);
	text-decoration: none;
}
.wwb-card:hover { transform: translateY(-4px); border-color: rgba(244,239,230,.2); }

.wwb-card-thumb { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #15151a; }
.wwb-card-thumb::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.3) 100%);
	pointer-events: none;
}
.wwb-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 1.2s; }
.wwb-card:hover .wwb-card-thumb img { transform: scale(1.06); }
.wwb-card-thumb-placeholder {
	width: 100%; height: 100%;
	background:
		radial-gradient(ellipse at 30% 30%, rgba(232,138,74,.25), transparent 60%),
		linear-gradient(135deg, #181820, #0e0e12);
}

.wwb-card-body { padding: 28px 30px 32px; }
.wwb-card-tag {
	font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 8px;
	font-family: var(--mono);
}
.wwb-card-title {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 28px; line-height: 1.1;
	margin: 0 0 14px;
	color: var(--ink);
}
.wwb-card-title a { color: var(--ink); }
.wwb-card-title a:hover { color: var(--accent-warm); }
.wwb-card-desc {
	color: var(--ink-2); font-size: 14px; line-height: 1.7; margin: 0 0 16px;
}
.wwb-card-meta {
	font-family: var(--mono); font-size: 11px; color: var(--ink-3);
	letter-spacing: .08em; margin: 0;
}

.wwb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wwb-chip, .wwb-tag {
	padding: 8px 14px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.16);
	font-size: 11px; color: var(--ink); letter-spacing: .04em;
	background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.02) 60%, rgba(0,0,0,.15) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.22),
		inset 0 -1px 0 rgba(0,0,0,.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: inline-block;
	text-decoration: none;
}
.wwb-chip:hover, .wwb-tag:hover { transform: translateY(-1px); }

/* =============================================================
 * 7. Filters
 * ============================================================= */

.wwb-filters {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin-bottom: 40px;
}
.wwb-filter {
	padding: 13px 24px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.14);
	color: var(--ink-2); font-size: 14px; font-weight: 500;
	background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.2) 100%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	transition: .25s;
	text-decoration: none;
}
.wwb-filter:hover { color: var(--ink); transform: translateY(-1px); }
.wwb-filter.is-active {
	background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(230,225,215,.85) 100%);
	color: var(--bg); border-color: rgba(255,255,255,.6);
}

/* =============================================================
 * 8. Steps
 * ============================================================= */

.wwb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wwb-step {
	padding: 38px 32px 36px;
	border-radius: 24px;
	border: 1px solid rgba(244,239,230,.1);
	background: rgba(16,16,20,.6);
	min-height: 300px;
	display: flex; flex-direction: column;
}
.wwb-step-num {
	font-family: var(--serif); font-style: italic; font-weight: 400;
	font-size: 64px; line-height: 1; color: rgba(244,239,230,.18);
	margin-bottom: 50px;
}
.wwb-step h4 {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 30px; margin: 0 0 16px;
	color: var(--ink);
}
.wwb-step p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }

/* =============================================================
 * 9. Article (Column / Story Single)
 * ============================================================= */

.wwb-article { background: var(--bg); color: var(--ink); }

.wwb-article-hero {
	position: relative; min-height: 70vh; max-height: 800px; overflow: hidden;
}
.wwb-article-hero img {
	width: 100%; height: 100%; min-height: 70vh; max-height: 800px;
	object-fit: cover;
	position: absolute; inset: 0;
}
.wwb-article-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(10,10,12,.4) 40%, var(--bg) 100%);
}
.wwb-article-hero-text {
	position: absolute; bottom: 60px; left: 0; right: 0;
	z-index: 2; padding: 0 56px;
	max-width: 1280px; margin: 0 auto;
	text-align: center;
}

.wwb-kicker {
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
	color: var(--accent-warm);
	margin: 0 0 18px; font-weight: 500;
}
.wwb-kicker--small { font-size: 10px; letter-spacing: .2em; margin-bottom: 8px; }

.wwb-article-title {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: clamp(36px, 6vw, 84px);
	line-height: 1.0; letter-spacing: -.01em;
	margin: 0 0 24px;
	color: var(--ink);
	text-wrap: balance;
}
.wwb-article-subtitle {
	font-family: var(--serif); font-style: italic;
	font-size: clamp(18px, 2.4vw, 26px);
	line-height: 1.5; color: var(--ink-2);
	max-width: 720px; margin: 0 auto 32px;
}

.wwb-article-meta {
	display: flex; justify-content: center; align-items: center;
	gap: 24px; flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 12px; color: var(--ink-3); letter-spacing: .08em;
}
.wwb-article-meta .dot { opacity: .5; }
.wwb-article-author {
	display: inline-flex; align-items: center; gap: 12px;
}
.wwb-article-author img {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.2);
}
.wwb-article-author-name {
	font-family: var(--sans); font-size: 14px;
	color: var(--ink); letter-spacing: 0; text-transform: none;
}
.wwb-article-author-role {
	font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}

.wwb-article-lead {
	max-width: 720px; margin: 60px auto 0;
	padding: 0 56px;
	font-family: var(--serif); font-style: italic;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.55; color: var(--ink);
}
.wwb-article-lead-inner {
	border-left: 3px solid var(--accent-warm);
	padding-left: 24px;
}

.wwb-article-content {
	max-width: 720px; margin: 56px auto;
	padding: 0 56px;
	font-size: 17px; line-height: 1.95; color: var(--ink-2);
}
.wwb-article-content p { margin: 0 0 1.6em; }
.wwb-article-content h2 {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 36px; margin: 56px 0 16px; padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--ink);
}
.wwb-article-content h3 {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 26px; margin: 36px 0 12px;
	color: var(--ink);
}
.wwb-article-content blockquote {
	border-left: 3px solid var(--accent-warm);
	padding: 4px 0 4px 28px;
	margin: 32px 0;
	font-family: var(--serif); font-style: italic;
	font-size: 22px; line-height: 1.5; color: var(--ink);
}
.wwb-article-content img,
.wwb-article-content figure { margin: 32px 0; border-radius: 16px; overflow: hidden; }
.wwb-article-content figcaption {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: .08em;
	margin-top: 8px; text-align: center;
}
.wwb-article-content a {
	color: var(--accent-warm); text-decoration: underline;
	text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.wwb-article-content a:hover { color: var(--accent-orb); }

.wwb-article-footer {
	max-width: 720px; margin: 64px auto 100px;
	padding: 32px 56px;
	border-top: 1px solid var(--line);
}
.wwb-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.wwb-share { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wwb-share-label {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3);
}
.wwb-share a {
	padding: 8px 18px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.04);
	font-size: 12px; color: var(--ink-2);
	transition: .2s;
	text-decoration: none;
}
.wwb-share a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* =============================================================
 * 10. Video
 * ============================================================= */

.wwb-video-player { width: 100%; background: #000; padding: 0; }
.wwb-video-frame {
	max-width: 1400px; margin: 0 auto;
	position: relative; aspect-ratio: 16 / 9;
	background: #000;
}
.wwb-video-frame iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%; border: 0;
}

.wwb-video-info-row {
	display: flex; gap: 12px; flex-wrap: wrap;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 18px;
}
.wwb-video-info-row .dot { opacity: .5; }
.wwb-video-cast { margin: 16px 0; display: flex; gap: 14px; flex-wrap: wrap; }
.wwb-video-cast-label {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3); min-width: 110px;
}

.wwb-video-featured {
	display: grid; grid-template-columns: 1.5fr 1fr;
	gap: 48px; margin-bottom: 80px;
	padding: 32px;
	border-radius: 24px;
	border: 1px solid var(--line);
	background: rgba(16,16,20,.6);
	color: var(--ink);
	align-items: center;
	transition: .4s;
	text-decoration: none;
}
.wwb-video-featured:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }

.wwb-video-thumb {
	position: relative; aspect-ratio: 16 / 9;
	border-radius: 16px; overflow: hidden;
	background: #000;
}
.wwb-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: .8s; }
.wwb-video-featured:hover .wwb-video-thumb img,
.wwb-video-card:hover .wwb-video-thumb img { transform: scale(1.04); }

.wwb-video-play {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: #fff; font-size: 64px;
	background: rgba(0,0,0,0); transition: background .3s;
	pointer-events: none;
	text-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.wwb-video-card .wwb-video-play { font-size: 40px; }
.wwb-video-featured:hover .wwb-video-play,
.wwb-video-card:hover .wwb-video-play { background: rgba(0,0,0,.25); }

.wwb-video-dur {
	position: absolute; bottom: 12px; right: 12px;
	background: rgba(0,0,0,.85); color: #fff;
	padding: 4px 10px; border-radius: 6px;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .05em;
	border: 1px solid rgba(255,255,255,.15);
}

.wwb-video-card {
	display: flex; flex-direction: column; gap: 14px;
	color: var(--ink); text-decoration: none;
	transition: .3s;
}
.wwb-video-card:hover { transform: translateY(-3px); }
.wwb-video-card-body { padding-top: 4px; }
.wwb-video-card-title {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 22px; line-height: 1.2;
	margin: 0 0 6px;
	color: var(--ink);
}
.wwb-video-card-loc {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink-3); margin: 0;
}

/* =============================================================
 * 11. Forms
 * ============================================================= */

.wwb-form { display: grid; gap: 24px; }
.wwb-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.wwb-field label {
	display: block; font-size: 12px;
	color: var(--ink-3); margin-bottom: 10px;
	letter-spacing: .12em; text-transform: uppercase;
	font-family: var(--mono);
}
.wwb-field input,
.wwb-field select,
.wwb-field textarea {
	width: 100%; padding: 18px 20px; border-radius: 14px;
	border: 1px solid var(--line);
	background: rgba(244,239,230,.025);
	color: var(--ink); font: inherit; font-size: 15px;
	transition: .2s;
	font-family: var(--sans);
}
.wwb-field textarea { resize: vertical; min-height: 140px; }
.wwb-field input:focus,
.wwb-field select:focus,
.wwb-field textarea:focus {
	outline: none;
	border-color: rgba(244,239,230,.4);
	background: rgba(244,239,230,.04);
}
.wwb-field input::placeholder,
.wwb-field textarea::placeholder { color: var(--ink-4); }

.wwb-submit, .wwb-btn-primary, .btn-primary {
	padding: 18px 32px; border-radius: 16px;
	border: 1px solid rgba(255,255,255,.2);
	background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.25) 100%);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.28),
		inset 0 -1px 0 rgba(0,0,0,.3),
		0 14px 36px rgba(0,0,0,.45);
	color: var(--ink); font-size: 15px; font-weight: 500;
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	transition: .3s;
	cursor: pointer; text-decoration: none;
	letter-spacing: .02em;
	font-family: var(--sans);
}
.wwb-submit:hover, .wwb-btn-primary:hover, .btn-primary:hover {
	background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(230,225,215,.85) 100%);
	color: var(--bg); border-color: rgba(255,255,255,.6);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.9),
		0 14px 40px rgba(255,240,220,.22);
	transform: translateY(-1px);
}

.wwb-btn-ghost, .btn-ghost, .btn {
	padding: 14px 24px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.18);
	background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.2) 100%);
	color: var(--ink); font-size: 14px;
	display: inline-flex; align-items: center; gap: 8px;
	transition: .25s;
	text-decoration: none;
	font-family: var(--sans);
}
.wwb-btn-ghost:hover, .btn-ghost:hover, .btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.4); }

/* =============================================================
 * 12. Footer
 * ============================================================= */

.wwb-footer {
	background: var(--bg);
	border-top: 1px solid var(--line-2);
	padding: 80px 56px 40px;
	color: var(--ink-2);
}
.wwb-footer-grid {
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 56px;
	max-width: 1280px; margin: 0 auto 48px;
}
.wwb-footer-brand-name {
	font-family: var(--serif); font-style: italic;
	font-size: 36px; line-height: 1; margin: 0 0 16px;
	color: var(--ink);
}
.wwb-footer-tagline {
	font-size: 14px; line-height: 1.7;
	color: var(--ink-2); max-width: 320px;
}
.wwb-footer h5 {
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 18px; font-weight: 500;
}
.wwb-footer ul { list-style: none; padding: 0; margin: 0; }
.wwb-footer ul li { margin: 8px 0; }
.wwb-footer ul a {
	color: var(--ink-2); font-size: 14px;
	transition: color .2s;
}
.wwb-footer ul a:hover { color: var(--ink); }

.wwb-footer-bottom {
	max-width: 1280px; margin: 0 auto;
	padding-top: 32px;
	border-top: 1px solid var(--line-2);
	display: flex; justify-content: space-between;
	font-family: var(--mono);
	font-size: 11px; color: var(--ink-3);
	letter-spacing: .1em;
	flex-wrap: wrap; gap: 16px;
}

/* =============================================================
 * 13. Lang Switch
 * ============================================================= */

.wwb-lang-switch {
	display: inline-flex; gap: 0; flex-wrap: wrap;
	font-family: var(--mono);
	padding: 4px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.16);
	background: rgba(0,0,0,.3);
	backdrop-filter: blur(12px);
}
.wwb-lang-switch a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	color: var(--ink-3);
	font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase;
	transition: all .2s;
	text-decoration: none;
}
.wwb-lang-switch a:hover { color: var(--ink); }
.wwb-lang-switch a.is-active {
	background: rgba(255,255,255,.1);
	color: var(--ink);
}
.wwb-lang-switch .wwb-lang-label { display: none; }
@media (min-width: 700px) { .wwb-lang-switch .wwb-lang-label { display: inline; } }

/* =============================================================
 * 14. Pagination & Notices
 * ============================================================= */

.wwb-pagination { margin-top: 64px; text-align: center; }
.wwb-pagination .page-numbers {
	display: inline-block; margin: 0 4px;
	padding: 11px 18px; border-radius: 999px;
	font-family: var(--mono); font-size: 12px;
	color: var(--ink-2); text-decoration: none;
	border: 1px solid var(--line);
	background: rgba(255,255,255,.04);
	transition: .2s;
}
.wwb-pagination .page-numbers.current,
.wwb-pagination .page-numbers:hover {
	background: var(--ink); color: var(--bg);
	border-color: var(--ink);
}

.wwb-notice, .wwb-portal-notice {
	padding: 16px 20px; border-radius: 14px;
	font-size: 14px;
	margin-bottom: 16px;
}
.wwb-notice-ok, .wwb-portal-notice-ok { background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.4); color: #6fdc8c; }
.wwb-notice-err, .wwb-portal-notice-err { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.35); color: #fda4af; }
.wwb-notice-info, .wwb-portal-notice-info { background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.35); color: #93c5fd; }

/* =============================================================
 * 15. Seller Portal (dark)
 * ============================================================= */

.wwb-seller-portal {
	max-width: 1280px; margin: 0 auto;
	padding: 120px 56px 80px;
	color: var(--ink);
}
.wwb-portal-header {
	display: flex; justify-content: space-between; align-items: baseline;
	flex-wrap: wrap; gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 32px;
}
.wwb-portal-header h2 {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 42px; margin: 0;
	color: var(--ink);
}
.wwb-portal-user { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: .08em; }

.wwb-portal-nav {
	display: flex; gap: 4px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.wwb-portal-nav a {
	padding: 12px 20px;
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: .2s;
	text-decoration: none;
}
.wwb-portal-nav a:hover { color: var(--ink); }
.wwb-portal-nav a.is-active { color: var(--ink); border-bottom-color: var(--accent-warm); }

.wwb-portal-form {
	padding: 32px;
	background: rgba(16,16,20,.7);
	border: 1px solid var(--line);
	border-radius: 24px;
}
.wwb-portal-form h3 {
	font-family: var(--serif); font-style: italic; font-weight: 500;
	font-size: 26px; margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}
.wwb-portal-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
}
.wwb-portal-grid .wwb-portal-grid-full { grid-column: 1 / -1; }
.wwb-portal-grid label {
	display: flex; flex-direction: column; gap: 6px;
	font-family: var(--mono); font-size: 11px; color: var(--ink-3);
	letter-spacing: .12em; text-transform: uppercase;
}
.wwb-portal-grid input,
.wwb-portal-grid select,
.wwb-portal-grid textarea {
	font: inherit; font-family: var(--sans);
	font-size: 14px; padding: 12px 14px;
	border: 1px solid var(--line);
	background: rgba(244,239,230,.025);
	color: var(--ink);
	border-radius: 10px;
	letter-spacing: 0; text-transform: none;
}
.wwb-portal-grid small {
	font-size: 11px; color: var(--ink-3);
	font-family: var(--sans);
	text-transform: none; letter-spacing: 0;
}

.wwb-portal-table {
	width: 100%; border-collapse: collapse;
	font-size: 14px;
}
.wwb-portal-table th, .wwb-portal-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}
.wwb-portal-table th {
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3); font-weight: 500;
}
.wwb-portal-table td { color: var(--ink-2); }
.wwb-portal-scroll { overflow-x: auto; }

.wwb-portal-summary dl {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 0 0 32px;
}
.wwb-portal-summary > dl > div {
	padding: 24px;
	border-radius: 16px;
	background: rgba(16,16,20,.6);
	border: 1px solid var(--line);
}
.wwb-portal-summary dt {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 8px;
}
.wwb-portal-summary dd {
	font-family: var(--serif); font-style: italic;
	font-size: 32px; margin: 0;
	color: var(--ink);
}

.wwb-portal-empty {
	padding: 32px; text-align: center;
	color: var(--ink-3);
	border: 1px dashed var(--line);
	border-radius: 16px;
	background: rgba(255,255,255,.02);
}

/* =============================================================
 * 16. Responsive
 * ============================================================= */

@media (max-width: 1100px) {
	.wwb-grid, .wwb-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.wwb-steps { grid-template-columns: repeat(2, 1fr); }
	.wwb-video-featured { grid-template-columns: 1fr; }
	.wwb-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.wwb-section { padding: 96px 24px; }
	.wwb-article-content,
	.wwb-article-lead,
	.wwb-article-footer,
	.wwb-article-hero-text { padding-left: 24px; padding-right: 24px; }
	.wwb-seller-portal { padding: 100px 24px 60px; }
}
@media (max-width: 700px) {
	.wwb-nav { padding: 0 16px; top: 16px; }
	.wwb-pill { display: none; }
	.wwb-nav-burger { display: flex; }
	.wwb-section, .wwb-cosmic { padding-left: 20px; padding-right: 20px; }
	.wwb-section { padding-top: 80px; padding-bottom: 80px; }
	.wwb-hero-stats { grid-template-columns: 1fr; }
	.wwb-grid, .wwb-grid--2, .wwb-grid--4 { grid-template-columns: 1fr; }
	.wwb-steps { grid-template-columns: 1fr; }
	.wwb-form .row2 { grid-template-columns: 1fr; }
	.wwb-band-row { gap: 16px; padding: 0 16px; overflow-x: auto; }
	.wwb-footer { padding: 64px 24px 32px; }
	.wwb-footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.wwb-footer-bottom { flex-direction: column; }
	.wwb-portal-grid { grid-template-columns: 1fr; }
	.wwb-portal-header h2 { font-size: 32px; }
}

/* =============================================================
 * v3.1: 強制ダーク化（WordPress / プラグイン / 親テーマの override 防止）
 * ============================================================= */

html, body, body.wwb-mobile-nav-open,
.wwb-main, main.wwb-main,
#wwb-main, .site, #page, .site-content {
	background-color: var(--bg) !important;
	color: var(--ink);
}

/* WordPress のデフォルト .container や p の白文字を強制 */
.wwb-main p, .wwb-main h1, .wwb-main h2, .wwb-main h3, .wwb-main h4, .wwb-main h5, .wwb-main h6,
.wwb-main li, .wwb-main span, .wwb-main td, .wwb-main th, .wwb-main label {
	color: inherit;
}

/* 空セクションでも世界観を保つ */
.wwb-section-empty {
	padding: 80px 24px;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.wwb-section-empty-icon {
	font-family: var(--serif);
	font-style: italic;
	font-size: 64px;
	color: var(--ink-4);
	margin-bottom: 16px;
	line-height: 1;
}
.wwb-section-empty-text {
	font-family: var(--serif);
	font-style: italic;
	font-size: 22px;
	color: var(--ink-3);
	margin: 0;
}

/* =============================================================
 * v3.1: 各 CPT 専用 single テンプレート向けスタイル
 * ============================================================= */

/* --- Story 専用 (訪問記録: ジャーナル風) --- */
.wwb-story {
	background: var(--bg);
	color: var(--ink);
}
.wwb-story-hero {
	position: relative;
	min-height: 80vh;
	max-height: 900px;
	overflow: hidden;
}
.wwb-story-hero-bg {
	position: absolute; inset: 0;
}
.wwb-story-hero-bg img {
	width: 100%; height: 100%; object-fit: cover;
}
.wwb-story-hero-bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(10,10,12,.6) 60%, var(--bg) 100%);
}
.wwb-story-hero-text {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column;
	align-items: center; justify-content: flex-end;
	padding: 0 24px 80px;
	text-align: center;
}
.wwb-story-date-badge {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .25em;
	text-transform: uppercase; color: var(--ink-2);
	margin-bottom: 24px;
	padding: 8px 16px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	background: rgba(0,0,0,.4);
	backdrop-filter: blur(12px);
}
.wwb-story-region {
	font-family: var(--mono);
	font-size: 12px; letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--accent-warm);
	margin-bottom: 16px;
}

/* --- Reading progress bar (全 single 共通) --- */
.wwb-progress-bar {
	position: fixed; top: 0; left: 0;
	height: 3px; width: 0%;
	background: linear-gradient(90deg, var(--accent-warm), var(--accent-orb));
	z-index: 100;
	transition: width .15s ease;
	box-shadow: 0 0 12px var(--accent-warm);
}

/* --- Article toolbar (右側固定) --- */
.wwb-article-tools {
	position: fixed; right: 24px; top: 50%;
	transform: translateY(-50%);
	display: flex; flex-direction: column; gap: 8px;
	z-index: 40;
}
.wwb-article-tools button {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(10,10,12,.7);
	backdrop-filter: blur(12px);
	color: var(--ink);
	display: grid; place-items: center;
	transition: all .25s;
	cursor: pointer;
}
.wwb-article-tools button:hover {
	background: rgba(232,138,74,.2);
	border-color: var(--accent-warm);
	transform: scale(1.05);
}
@media (max-width: 900px) {
	.wwb-article-tools { display: none; }
}

/* --- 投稿 navigator (前後の記事) --- */
.wwb-post-nav {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 1280px;
	margin: 80px auto 0;
	padding: 0 56px;
}
.wwb-post-nav a {
	padding: 24px 28px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgba(16,16,20,.6);
	transition: all .3s;
	color: var(--ink);
	text-decoration: none;
	display: flex; flex-direction: column; gap: 6px;
}
.wwb-post-nav a:hover {
	border-color: var(--accent-warm);
	background: rgba(232,138,74,.05);
	transform: translateY(-2px);
}
.wwb-post-nav-label {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3);
}
.wwb-post-nav-title {
	font-family: var(--serif); font-style: italic;
	font-size: 18px; line-height: 1.4;
	color: var(--ink);
}
.wwb-post-nav-next { text-align: right; }

/* --- Product 専用 --- */
.wwb-product-layout {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 64px; align-items: start;
	max-width: 1280px; margin: 0 auto;
	padding: 140px 56px 80px;
}
.wwb-product-gallery {
	position: sticky; top: 120px;
}
.wwb-product-gallery-main {
	border-radius: 24px; overflow: hidden;
	border: 1px solid var(--line);
	aspect-ratio: 1;
	background: var(--bg-2);
}
.wwb-product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.wwb-product-info { padding-top: 24px; }
.wwb-product-origin {
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--accent-warm);
	margin-bottom: 12px;
}
.wwb-product-name {
	font-family: var(--serif); font-style: italic;
	font-weight: 500;
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1.05;
	margin: 0 0 16px;
	color: var(--ink);
}
.wwb-product-tagline {
	font-family: var(--serif); font-style: italic;
	font-size: 22px; line-height: 1.5;
	color: var(--ink-2);
	margin: 0 0 32px;
}
.wwb-product-price-row {
	display: flex; align-items: baseline; gap: 16px;
	padding: 24px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin: 32px 0;
}
.wwb-product-price {
	font-family: var(--serif); font-style: italic;
	font-size: 48px; color: var(--ink);
	line-height: 1;
}
.wwb-product-price-tax {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: .1em;
}
.wwb-product-features {
	margin: 24px 0;
}
.wwb-product-features dt {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 6px;
}
.wwb-product-features dd {
	color: var(--ink); font-size: 15px;
	margin: 0 0 18px;
	line-height: 1.6;
}
.wwb-product-actions {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin-top: 32px;
}

/* --- Reserve 専用 --- */
.wwb-reserve-form {
	max-width: 800px; margin: 0 auto;
	padding: 56px 24px;
}
.wwb-reserve-step {
	margin-bottom: 48px;
}
.wwb-reserve-step-num {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--accent-warm);
	margin-bottom: 16px;
}
.wwb-reserve-step-num::before {
	content: ""; width: 24px; height: 1px;
	background: var(--accent-warm);
}

/* --- Footer 拡張 --- */
.wwb-footer-deep {
	padding: 100px 56px 40px;
}
.wwb-footer-cta {
	max-width: 720px; margin: 0 auto 80px;
	text-align: center;
	padding-bottom: 60px;
	border-bottom: 1px solid var(--line-2);
}
.wwb-footer-cta-title {
	font-family: var(--serif); font-style: italic;
	font-weight: 500;
	font-size: clamp(32px, 5vw, 56px);
	margin: 0 0 16px; color: var(--ink);
}
.wwb-footer-newsletter {
	display: flex; gap: 8px;
	max-width: 480px; margin: 32px auto 0;
}
.wwb-footer-newsletter input {
	flex: 1;
	padding: 14px 20px; border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(244,239,230,.04);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
}
.wwb-footer-newsletter input::placeholder { color: var(--ink-4); }
.wwb-footer-newsletter button {
	padding: 14px 28px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.2);
	background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(230,225,215,.85));
	color: var(--bg);
	font-family: var(--sans); font-weight: 500;
	font-size: 13px;
	cursor: pointer;
	transition: .25s;
}
.wwb-footer-newsletter button:hover { transform: translateY(-1px); }

/* --- Floating share buttons --- */
.wwb-share-floating {
	position: fixed; left: 24px; bottom: 24px;
	display: flex; gap: 8px;
	z-index: 30;
}
.wwb-share-floating a {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(10,10,12,.7);
	backdrop-filter: blur(12px);
	color: var(--ink);
	display: grid; place-items: center;
	transition: .25s;
	font-size: 14px;
}
.wwb-share-floating a:hover {
	background: rgba(232,138,74,.2);
	border-color: var(--accent-warm);
	transform: scale(1.05);
}
@media (max-width: 700px) {
	.wwb-share-floating { left: 50%; transform: translateX(-50%); }
}

/* --- Reading time / TOC --- */
.wwb-toc {
	position: sticky; top: 120px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgba(16,16,20,.6);
	margin-bottom: 32px;
}
.wwb-toc-title {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .25em; text-transform: uppercase;
	color: var(--ink-3); margin: 0 0 14px;
}
.wwb-toc ul { list-style: none; padding: 0; margin: 0; }
.wwb-toc li { margin: 8px 0; }
.wwb-toc a {
	color: var(--ink-2); font-size: 13px;
	text-decoration: none;
	transition: color .2s;
	line-height: 1.5;
	display: block;
	padding: 4px 0;
}
.wwb-toc a:hover { color: var(--accent-warm); }
.wwb-toc a.is-active { color: var(--accent-warm); font-weight: 500; }


/* =============================================================
 * v3.2: 「良いとこ取り」拡張
 * Slate のテック感を WWHITEBEARS の朱色 + Cormorant 世界観に変換
 * 比率 = 伝統 7 : モダン 3
 * ============================================================= */

/* --- 1. Liquid Glass の border 精緻化 (朱色アクセント) --- */
.wwb-glass {
	position: relative;
	background: rgba(244, 239, 230, 0.012);
	background-blend-mode: luminosity;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: none;
	border-radius: 24px;
	box-shadow:
		inset 0 1px 1px rgba(244, 239, 230, 0.08),
		inset 0 -1px 1px rgba(0, 0, 0, 0.3),
		0 14px 36px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

/* 朱色のグラデーション border (Slate 流の精緻さを朱色に) */
.wwb-glass::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.4px;
	background: linear-gradient(180deg,
		rgba(232, 138, 74, 0.45) 0%,
		rgba(244, 239, 230, 0.15) 22%,
		rgba(244, 239, 230, 0) 45%,
		rgba(244, 239, 230, 0) 60%,
		rgba(244, 239, 230, 0.15) 80%,
		rgba(232, 138, 74, 0.45) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 1;
}

/* --- 2. 3D Card hover (Slate の動きを 50% 抑制) --- */
/* 「動きすぎない」のが日本の美意識。rotate 1.5°、translateZ 14px */
.wwb-card,
.wwb-video-card,
.wwb-video-featured {
	transform-style: preserve-3d;
	transition:
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.6s ease,
		box-shadow 0.6s ease;
	will-change: transform;
}

/* perspective を親グリッドに付与 */
.wwb-grid,
.wwb-video-grid {
	perspective: 1400px;
	transform-style: preserve-3d;
}

/* hover: 静かな 3D 効果 */
.wwb-card:hover {
	transform: rotateX(1.5deg) rotateY(-1.5deg) translateY(-4px) translateZ(14px);
	box-shadow:
		inset 0 1px 1px rgba(244, 239, 230, 0.1),
		0 24px 48px rgba(0, 0, 0, 0.5),
		0 8px 16px rgba(232, 138, 74, 0.08);
	border-color: rgba(232, 138, 74, 0.28);
}

.wwb-video-card:hover {
	transform: rotateX(1deg) rotateY(-1deg) translateY(-3px) translateZ(10px);
}

/* --- 3. 和紙の格子 (Slate のグリッドを大きく & 朱色彩度低め) --- */
/* 通常のグリッドより大きい 180px。SaaS テック感ではなく障子の桟風 */
.wwb-grid-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(244, 239, 230, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244, 239, 230, 0.022) 1px, transparent 1px);
	background-size: 180px 180px;
	opacity: 0.6;
	z-index: 0;
}

.wwb-grid-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 35%, rgba(10, 10, 12, 0.65) 100%),
		linear-gradient(to bottom, rgba(10, 10, 12, 0.15), rgba(10, 10, 12, 0.85));
}

/* Cosmic セクションに格子背景を追加適用 */
.wwb-cosmic {
	position: relative;
}

.wwb-cosmic .wwb-grid-bg {
	z-index: 1;
}

/* --- 4. 浮遊バッジの精緻化 (Slate の inset shadow 技法を統合) --- */
.wwb-eyebrow {
	box-shadow:
		inset 0 1.5px 1px rgba(244, 239, 230, 0.22),
		inset 0 -1px 1px rgba(0, 0, 0, 0.32),
		inset 0 0 28px rgba(244, 239, 230, 0.025),
		0 2px 1px rgba(244, 239, 230, 0.06),
		0 18px 25px rgba(0, 0, 0, 0.4),
		0 32px 65px rgba(0, 0, 0, 0.65);
}

.wwb-eyebrow .tag {
	box-shadow:
		inset 0 1px 0 rgba(244, 239, 230, 0.28),
		inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 4px 12px rgba(232, 138, 74, 0.08);
}

/* --- 5. ナビピルの質感をさらに精緻化 --- */
.wwb-pill {
	box-shadow:
		inset 0 1.5px 1px rgba(244, 239, 230, 0.24),
		inset 0 -1px 1px rgba(0, 0, 0, 0.36),
		inset 0 0 22px rgba(244, 239, 230, 0.025),
		0 2px 1px rgba(244, 239, 230, 0.06),
		0 14px 24px rgba(0, 0, 0, 0.4),
		0 28px 60px rgba(0, 0, 0, 0.55);
}

/* アクティブピルにわずかな朱色グロー */
.wwb-pill a.is-active,
.wwb-pill a[aria-current="page"] {
	box-shadow:
		inset 0 1px 0 rgba(244, 239, 230, 0.32),
		inset 0 -1px 0 rgba(0, 0, 0, 0.22),
		0 4px 14px rgba(232, 138, 74, 0.12);
}

/* --- 6. ステータカード (Stats Block) の質感アップ --- */
.wwb-stat {
	box-shadow:
		inset 0 1.5px 1px rgba(244, 239, 230, 0.24),
		inset 0 -22px 42px rgba(0, 0, 0, 0.55),
		inset 0 0 32px rgba(244, 239, 230, 0.04),
		0 3px 1px rgba(244, 239, 230, 0.07),
		0 22px 40px rgba(0, 0, 0, 0.45),
		0 48px 90px rgba(0, 0, 0, 0.7);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

.wwb-stat:hover {
	transform: translateY(-3px);
	box-shadow:
		inset 0 1.5px 1px rgba(244, 239, 230, 0.28),
		inset 0 -22px 42px rgba(0, 0, 0, 0.6),
		inset 0 0 38px rgba(232, 138, 74, 0.04),
		0 4px 1px rgba(244, 239, 230, 0.08),
		0 32px 50px rgba(0, 0, 0, 0.5),
		0 70px 120px rgba(0, 0, 0, 0.78);
}

/* --- 7. 数字の発光 (朱色オーラ) --- */
.wwb-stat-num {
	text-shadow: 0 0 30px rgba(232, 138, 74, 0.18);
}

/* --- 8. CTA ボタンのプレス感 --- */
.wwb-btn-primary {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.wwb-btn-primary:active {
	transform: translateY(0) scale(0.985);
}

/* --- 9. カード内画像のゆっくりした拡大 (1.2s) --- */
.wwb-card-thumb img,
.wwb-video-thumb img {
	transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* --- 10. リーディング進捗バーの朱色グロー強化 --- */
.wwb-progress-bar {
	background: linear-gradient(90deg,
		rgba(232, 138, 74, 0.85) 0%,
		rgba(255, 226, 179, 1) 50%,
		rgba(232, 138, 74, 0.85) 100%);
	box-shadow:
		0 0 14px rgba(232, 138, 74, 0.6),
		0 0 28px rgba(255, 226, 179, 0.25);
}

/* --- 11. レスポンシブ調整 (モバイルでは 3D 効果を弱める) --- */
@media (max-width: 700px) {
	.wwb-card:hover,
	.wwb-video-card:hover {
		transform: translateY(-3px);
	}
}

/* prefers-reduced-motion 対応 (アクセシビリティ) */
@media (prefers-reduced-motion: reduce) {
	.wwb-card,
	.wwb-video-card,
	.wwb-video-featured,
	.wwb-stat,
	.wwb-card-thumb img,
	.wwb-video-thumb img,
	.wwb-btn-primary {
		transition: none !important;
		transform: none !important;
	}
	.wwb-card:hover,
	.wwb-video-card:hover {
		transform: none !important;
	}
}


/* =============================================================
 * v3.2.1: 最終強制ダーク化 (フッター後の余白・親テーマ干渉防止)
 * ============================================================= */

html { background-color: #0a0a0c !important; }
body { background-color: #0a0a0c !important; color: #f4efe6; }
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background: #0a0a0c;
	z-index: -1;
	pointer-events: none;
}
.wwb-footer, .wwb-footer-deep,
footer, footer.wwb-footer {
	background: #0a0a0c !important;
}


/* =============================================================
 * v3.3.0: 47 都道府県マーキー
 * - 右から左に永久ループ
 * - 当月新作がある県は朱色で発光
 * ============================================================= */

.wwb-prefectures-band {
	overflow: hidden;
	position: relative;
}

.wwb-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.wwb-marquee-track {
	display: flex;
	gap: 56px;
	width: max-content;
	align-items: baseline;
	animation: wwb-marquee-scroll 90s linear infinite;
	will-change: transform;
}

@keyframes wwb-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* hover で一時停止（ユーザーが読みたい時に止められる） */
.wwb-marquee:hover .wwb-marquee-track {
	animation-play-state: paused;
}

.wwb-marquee-item {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 38px);
	color: rgba(244, 239, 230, 0.55);
	white-space: nowrap;
	letter-spacing: .01em;
	flex-shrink: 0;
	transition: color .4s ease, text-shadow .4s ease;
}

/* hover で個別に色変化 */
.wwb-marquee-item:hover {
	color: rgba(244, 239, 230, 0.95);
}

/* 当月新作がある県: 朱色で発光 */
.wwb-marquee-item.is-hot {
	color: #ffc890;
	text-shadow:
		0 0 8px rgba(232, 138, 74, 0.6),
		0 0 18px rgba(232, 138, 74, 0.45),
		0 0 32px rgba(232, 138, 74, 0.25);
	animation: wwb-hot-pulse 3.2s ease-in-out infinite;
	cursor: help;
}

@keyframes wwb-hot-pulse {
	0%, 100% {
		text-shadow:
			0 0 8px rgba(232, 138, 74, 0.55),
			0 0 18px rgba(232, 138, 74, 0.4),
			0 0 32px rgba(232, 138, 74, 0.22);
	}
	50% {
		text-shadow:
			0 0 12px rgba(255, 200, 144, 0.85),
			0 0 28px rgba(232, 138, 74, 0.6),
			0 0 48px rgba(232, 138, 74, 0.35);
	}
}

.wwb-marquee-item.is-hot:hover {
	color: #ffe2b3;
	text-shadow:
		0 0 14px rgba(255, 226, 179, 0.95),
		0 0 32px rgba(232, 138, 74, 0.7),
		0 0 56px rgba(232, 138, 74, 0.45);
}

/* レスポンシブ調整 */
@media (max-width: 700px) {
	.wwb-marquee-track {
		gap: 32px;
		animation-duration: 60s; /* 短い画面では少し速め */
	}
	.wwb-marquee-item {
		font-size: 22px;
	}
}

/* アクセシビリティ: 動きを抑えたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
	.wwb-marquee-track {
		animation: none;
		transform: translateX(0);
		flex-wrap: wrap;
		gap: 24px 40px;
		justify-content: center;
		padding: 0 24px;
		width: 100%;
	}
	.wwb-marquee {
		mask-image: none;
		-webkit-mask-image: none;
	}
	.wwb-marquee-item.is-hot {
		animation: none;
	}
}