/**
 * WPGraphQL series page (page-wpgraphql template + G00 video).
 * Tokens from the official brand guide: github.com/wp-graphql/wp-graphql design/brand/wpgraphql/tokens.ts
 */
@font-face { font-family: "WPG Bricolage"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/bricolage-latin.woff2) format("woff2"); }
@font-face { font-family: "WPG Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dmmono-400-latin.woff2) format("woff2"); }
@font-face { font-family: "WPG Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/dmmono-500-latin.woff2) format("woff2"); }

.wpg-page, .wpg-hero {
	--wpg-bg: #0a0f1e;
	--wpg-surface: #0e1628;
	--wpg-raised: #162039;
	--wpg-border: #1e2d50;
	--wpg-text: #f0f4ff;
	--wpg-text2: #a3b4cc;
	--wpg-muted: #7189b0;
	--wpg-accent: #ff8c1a;
	--wpg-accent-dim: #e06a00;
	--wpg-accent-soft: #ffaa4d;
	--wpg-sans: "WPG Bricolage", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wpg-mono: "WPG Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wpg-page { background: var(--wpg-bg); color: var(--wpg-text); font-family: var(--wpg-sans); }
.wpg-page *, .wpg-hero * { box-sizing: border-box; }

/* ---------- hero (scene built by wpgraphql.js) ---------- */
.wpg-hero { position: relative; width: 100%; height: calc(100svh - var(--wpg-top, 0px)); min-height: 560px; overflow: hidden;
	background: radial-gradient(60% 60% at 50% 45%, #0e1628 0%, var(--wpg-bg) 70%); color: var(--wpg-text); font-family: var(--wpg-sans); }
.wpg-net { position: absolute; left: 0; top: 0; pointer-events: none; }
.wpg-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wpg-scene > * { position: absolute; margin: 0; }

.wpg-mark { left: 0; top: 0; transform-origin: 50% 50%; }
.wpg-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--wpg-surface); opacity: 0;
	box-shadow: 0 0 60px 10px rgba(255, 140, 26, .5), 0 0 170px 40px rgba(255, 140, 26, .16), inset 0 0 0 2px rgba(255, 140, 26, .22); }
.wpg-ele { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wpg-ele__fill { fill: var(--wpg-accent); opacity: 0; }
.wpg-ele__line { fill: none; stroke: var(--wpg-accent); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }

.wpg-copy { left: 820px; top: 150px; width: 1000px; opacity: 0; }
.wpg-kicker { font: 500 22px/1 var(--wpg-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--wpg-accent); margin: 0; }
.wpg-title { font: 800 80px/1.02 var(--wpg-sans); letter-spacing: -.03em; margin: 22px 0 0; color: var(--wpg-text); max-width: 980px; }
.wpg-title em { font-style: normal; color: var(--wpg-accent); }
.wpg-lead { font-size: 25px; line-height: 1.4; color: var(--wpg-text2); margin: 18px 0 0; }

.wpg-code { left: 820px; top: 495px; width: 1000px; height: 360px; border-radius: 18px; background: #0b1222; border: 1px solid var(--wpg-border);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 40px -8px rgba(255, 140, 26, .25); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; opacity: 0; }
.wpg-pane { padding: 20px 26px; position: relative; min-width: 0; }
.wpg-pane + .wpg-pane { border-left: 1px solid var(--wpg-border); background: #09101e; }
.wpg-ph { font: 500 15px/1 var(--wpg-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--wpg-muted); margin-bottom: 14px; }
.wpg-ph b { color: var(--wpg-accent); font-weight: 500; }
.wpg-code pre { margin: 0; font: 400 21px/1.5 var(--wpg-mono); white-space: pre; color: var(--wpg-text2); background: none; padding: 0; border: 0; }
.wpg-code .k { color: var(--wpg-accent); } .wpg-code .n { color: var(--wpg-text); } .wpg-code .f { color: var(--wpg-text); }
.wpg-code .a { color: #93c5fd; } .wpg-code .v { color: var(--wpg-accent-soft); } .wpg-code .s { color: #86efac; } .wpg-code .p { color: var(--wpg-muted); }
.wpg-cur { display: inline-block; width: 12px; height: 24px; background: var(--wpg-accent); vertical-align: -4px; }

.wpg-btns { left: 120px; top: 912px; display: flex; gap: 16px; }
.wpg-btn { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 26px 0 20px; border-radius: 999px; border: 1.5px solid rgba(255, 140, 26, .55);
	background: rgba(14, 22, 40, .88); color: var(--wpg-text); text-decoration: none; font: 700 21px/1.1 var(--wpg-sans); opacity: 0;
	transition: box-shadow .2s, border-color .2s; }
.wpg-btn small { display: block; font: 400 13px/1 var(--wpg-mono); color: var(--wpg-muted); margin-top: 5px; }
.wpg-btn svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--wpg-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wpg-btn:hover, .wpg-btn:focus-visible { border-color: var(--wpg-accent); box-shadow: 0 0 26px -4px rgba(255, 140, 26, .6); color: var(--wpg-text); }

.wpg-go { right: 120px; top: 872px; display: flex; align-items: center; gap: 26px; height: 146px; padding: 0 28px 0 52px; border-radius: 999px;
	background: var(--wpg-accent); color: #0a0f1e; text-decoration: none; font: 800 50px/1 var(--wpg-sans); letter-spacing: -.02em; opacity: 0;
	transform-origin: 100% 50%; --pulse: .5; --bob: 0px;
	box-shadow: 0 0 calc(40px + 50px * var(--pulse)) calc(-6px + 10px * var(--pulse)) rgba(255, 140, 26, .75), inset 0 -4px 0 rgba(0, 0, 0, .12); }
.wpg-go small { display: block; font: 500 16px/1 var(--wpg-mono); letter-spacing: .06em; color: #5a2c00; margin-top: 10px; }
.wpg-go__arr { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: #0a0f1e; }
.wpg-go__arr svg { width: 50px; height: 50px; fill: none; stroke: var(--wpg-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
	transform: translateY(var(--bob)); }
.wpg-go:hover, .wpg-go:focus-visible { color: #0a0f1e; filter: brightness(1.06); }
.wpg-4wp { left: 64px; top: 44px; height: 40px; }

/* shorts / portrait scene 1080x1920 */
.is-sh .wpg-copy { left: 80px; top: 480px; width: 920px; }
.is-sh .wpg-title { font-size: 84px; }
.is-sh .wpg-lead { font-size: 32px; }
.is-sh .wpg-kicker { font-size: 24px; }
.is-sh .wpg-code { left: 60px; top: 950px; width: 960px; height: 610px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.is-sh .wpg-code pre { font-size: 21px; line-height: 1.36; }
.is-sh .wpg-pane { padding: 16px 26px; }
.is-sh .wpg-pane + .wpg-pane { border-left: 0; border-top: 1px solid var(--wpg-border); }
.is-sh .wpg-btns { left: 60px; right: 60px; top: 1585px; justify-content: space-between; gap: 12px; }
.is-sh .wpg-btn { height: 64px; padding: 0 18px 0 14px; font-size: 19px; gap: 10px; }
.is-sh .wpg-btn small { font-size: 12px; }
.is-sh .wpg-go { left: 60px; right: 60px; top: 1690px; height: 150px; justify-content: space-between; transform-origin: 50% 50%; }
.is-sh .wpg-4wp { left: 60px; top: 60px; height: 44px; }

/* ---------- sub-navigation ---------- */
.wpg-subnav { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20; display: flex; align-items: center; gap: 6px;
	padding: 14px max(24px, calc((100% - 1200px) / 2)); background: rgba(14, 22, 40, .94); backdrop-filter: blur(10px);
	border-top: 1px solid var(--wpg-border); border-bottom: 1px solid var(--wpg-border); overflow-x: auto; scrollbar-width: none; }
.wpg-subnav::-webkit-scrollbar { display: none; }
.wpg-subnav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--wpg-text); margin-right: 18px; white-space: nowrap; }
.wpg-subnav__brand svg { width: 30px; height: 30px; flex: none; }
.wpg-subnav a { font-size: 16px; font-weight: 600; color: var(--wpg-text2); padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.wpg-subnav a:hover { color: var(--wpg-text); background: var(--wpg-raised); }
.wpg-subnav a.is-on { color: #0a0f1e; background: var(--wpg-accent); }

/* ---------- sections ---------- */
.wpg-sec { max-width: 1200px; margin: 0 auto; padding: 110px 24px 40px; scroll-margin-top: 70px; }
.wpg-sec__num { font: 500 15px var(--wpg-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--wpg-accent); margin: 0; }
.wpg-sec h2 { font: 800 clamp(34px, 5vw, 60px)/1.05 var(--wpg-sans); letter-spacing: -.025em; margin: 14px 0 0; color: var(--wpg-text); }
.wpg-sec__lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--wpg-text2); max-width: 820px; margin: 18px 0 0; }
.wpg-sec h3 { font: 700 21px/1.25 var(--wpg-sans); margin: 0 0 8px; color: var(--wpg-text); }
.wpg-sec p { color: var(--wpg-text2); line-height: 1.6; }
.wpg-sec code { font-family: var(--wpg-mono); font-size: .9em; color: var(--wpg-accent-soft); background: var(--wpg-raised); padding: 1px 6px; border-radius: 5px; }
.wpg-sec a { color: var(--wpg-accent); }

.wpg-flow { display: flex; align-items: stretch; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.wpg-flow__node { flex: 1 1 180px; padding: 20px 22px; border-radius: 14px; background: var(--wpg-surface); border: 1px solid var(--wpg-border); font-weight: 700; font-size: 20px; }
.wpg-flow__node small { display: block; font: 400 14px var(--wpg-mono); color: var(--wpg-muted); margin-top: 6px; }
.wpg-flow__node.is-hot { border-color: var(--wpg-accent); box-shadow: 0 0 30px -6px rgba(255, 140, 26, .45); }
.wpg-flow__arr { align-self: center; color: var(--wpg-accent); font: 500 22px var(--wpg-mono); }

.wpg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px; }
.wpg-card { padding: 24px; border-radius: 16px; background: var(--wpg-surface); border: 1px solid var(--wpg-border); }
.wpg-card p { margin: 0; font-size: 16px; }
.wpg-card__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px;
	background: rgba(255, 140, 26, .12); color: var(--wpg-accent); font: 500 15px var(--wpg-mono); }
.wpg-card.is-soon { border-style: dashed; border-color: var(--wpg-accent-dim); background: linear-gradient(160deg, rgba(255, 140, 26, .08), transparent 60%); }

.wpg-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: s; }
.wpg-steps li { counter-increment: s; padding: 22px; border-radius: 16px; background: var(--wpg-surface); border: 1px solid var(--wpg-border); color: var(--wpg-text2); line-height: 1.55; font-size: 16px; }
.wpg-steps li::before { content: "0" counter(s); display: block; font: 500 14px var(--wpg-mono); color: var(--wpg-accent); letter-spacing: .15em; margin-bottom: 10px; }
.wpg-steps b { color: var(--wpg-text); display: block; font-size: 19px; margin-bottom: 4px; }

.wpg-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 30px; }
.wpg-snip { border-radius: 16px; background: #0b1222; border: 1px solid var(--wpg-border); overflow: hidden; display: flex; flex-direction: column; }
.wpg-snip__h { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--wpg-border);
	font: 500 13px var(--wpg-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wpg-muted); }
.wpg-snip__h b { color: var(--wpg-accent); font-weight: 500; }
.wpg-snip pre { margin: 0; padding: 18px; overflow-x: auto; font: 400 14.5px/1.55 var(--wpg-mono); color: var(--wpg-text2); background: none; border: 0; }
.wpg-snip p { margin: 0; padding: 0 18px 18px; font-size: 15px; }

.wpg-check { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.wpg-check li { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--wpg-surface); border: 1px solid var(--wpg-border); color: var(--wpg-text2); line-height: 1.5; font-size: 16px; }
.wpg-check li::before { content: "!"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255, 140, 26, .14); color: var(--wpg-accent); font: 500 14px var(--wpg-mono); }
.wpg-check b { color: var(--wpg-text); }

.wpg-faq { margin-top: 32px; border-top: 1px solid var(--wpg-border); }
.wpg-faq details { border-bottom: 1px solid var(--wpg-border); }
.wpg-faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 700 19px/1.35 var(--wpg-sans); color: var(--wpg-text); }
.wpg-faq summary::-webkit-details-marker { display: none; }
.wpg-faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font: 500 24px var(--wpg-mono); color: var(--wpg-accent); transition: transform .2s; }
.wpg-faq details[open] summary::after { transform: rotate(45deg); }
.wpg-faq details p { margin: 0 0 22px; max-width: 860px; }

.wpg-credit { max-width: 1200px; margin: 70px auto 0; padding: 26px 24px 90px; border-top: 1px solid var(--wpg-border);
	font: 400 13px/1.6 var(--wpg-mono); color: var(--wpg-muted); }
.wpg-credit a { color: var(--wpg-text2); }

.wpg-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.wpg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wpg-reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 640px) {
	.wpg-sec { padding-top: 80px; }
	.wpg-flow__arr { transform: rotate(90deg); flex-basis: 100%; text-align: center; }
	.wpg-subnav__brand span { display: none; }
}