diff --git a/.gitignore b/.gitignore
index e00b26f..a6d3be1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,3 +52,15 @@ COHORT/
# planning docs live outside the repo, in BrandSteward/
docs/
+
+# Grinder source binaries; the served woff2 live in public/fonts/grinder/
+/src/grinder-font/
+
+# Grinder binaries: licence provenance unconfirmed (no copyright/licence in the
+# name table, and not listed in RaidGuild's BRAND-ASSETS.md). The wiring is
+# committed; drop the three woff2 into public/fonts/grinder/ to build locally.
+/public/fonts/grinder/*.woff2
+
+# Scratch from the Figma asset pull, and the PR body draft.
+/.figma-raw/
+/PR-BODY.md
diff --git a/HANDOFF.md b/HANDOFF.md
new file mode 100644
index 0000000..3616aa4
--- /dev/null
+++ b/HANDOFF.md
@@ -0,0 +1,132 @@
+# Venture Beyond — handoff
+
+**Branch:** `handoff/venture-beyond-deekan`
+**Base:** `origin/main` (`b02d67b`) · diverges at `b630790`
+**Figma:** https://www.figma.com/design/ke8N6VpnO86zfjGiLp46m2/RaidGuild---Grimoire---Venture?node-id=0-1
+Light frame `8:7` · Dark frame `117:3965` · both 1440×7759
+
+The branch is your own `feat/venture-beyond-redesign` history (26 commits,
+unchanged SHAs) plus six commits on top. Nothing has been pushed.
+
+## Run it
+
+```bash
+bun install
+PORT=3017 bun run dev
+```
+
+Two things are **not** in the repo and the build fails without the first:
+
+1. **`public/fonts/grinder/{Grinder-Regular,Grinder-Italic,Grinder-Retalic}.woff2`**
+ — held out pending a licence decision, see Blockers. `next/font/local`
+ resolves these at build time, so `bun run build` fails until they are in
+ place. Ask Luis for the files.
+2. **`.env`** — copy `env.sample`. Only the contact/consultation API routes
+ need it; the homepage renders without.
+
+## What is done
+
+Everything is measured against the final Figma target frames, not the
+`CODE BASELINE` frame `1:2` (that frame is a snapshot of the *old* code and
+several things exist only there — see Non-blocking).
+
+**Typography.** Grinder Regular/Italic/Retalic are wired as real cuts and
+scoped to `.site`, so the pre-redesign routes keep Mazius. The hero headline
+used to fake the reverse-italic with `transform: skewX(8deg)`; it now uses the
+actual Retalic cut. Body is Ubuntu 400 and mono is Ubuntu Mono 700, confirmed
+against the Figma type specimens.
+
+**Assets.** Hero light and dark play the Figma video fills; the manifesto
+backdrop is the desert walking-machine scene; Contact ships the Druid
+illustration; Louchi has a portrait. Icons are the native SVG exports, masked
+with `currentColor`.
+
+**Parity.** Every section height matches Figma at 1440:
+
+| Section | px | Section | px |
+|---|---|---|---|
+| Hero | 897 | Active Spears | 1525 |
+| Signal bar | 80 | Expeditions | 1338 |
+| Guild + stats | 837 | Manifesto | 615 |
+| Keepers | 802 | Contact | 881 |
+| Team network | 444 | Footer | 402 |
+
+Total content 7821 against Figma's 7820.74. (The frame's declared 7759 is
+shorter than the sum of its own children — the footer overflows it in Figma.)
+
+The Figma button component is implemented once as a reusable pill (56px tall,
+100px radius, 40px icon container, 32px glyph) with filled and outlined
+variants, used in the Guild, Team, Spears and Expeditions.
+
+Section labels were audited individually — they are **not** uniform: Guild,
+Keepers, Team and Spears are 24px italic magenta; Expeditions is the same in
+Fresh Green; Manifesto is 24px upright in Light Blue; Contact is **16px**
+upright in Fresh Green at 80%.
+
+**Validation.** All 15 new assets return HTTP 200 from localhost. No broken
+images. `tsc --noEmit` passes.
+
+## Blockers
+
+1. **Grinder licence — decide before this can be published.** The three
+ `.woff2` carry **no copyright, trademark, licence or vendor string** in
+ their name table, and their version string says they were produced with
+ FontCreator, so they are not a vendor-original distribution. RaidGuild's own
+ `BRAND-ASSETS.md` documents only Mazius Display, EB Garamond and Ubuntu
+ Mono — Grinder is not in it. That may simply mean it was commissioned and
+ the docs are behind, but it cannot be told apart from a commercial font with
+ its metadata stripped. They are gitignored until someone produces the EULA
+ or the commission agreement. If it is a RaidGuild commission, re-injecting
+ copyright and licence into the name table before publishing would be worth
+ doing.
+
+2. **Two hero/manifesto videos are low-resolution.** `hero-light.mp4` is
+ 760×472 and `manifesto.mp4` is 760×324, both scaled ~1.9× to 1440. They look
+ soft in motion; the posters are native resolution so first paint is sharp.
+ Cause: Figma clamps video export to 4096px per side and the Light frame is
+ 7759 tall, so the whole-page render came out 760 wide. `hero-dark.mp4` is
+ fine at 1440×934 because `Video / Dark` (`117:3325`) is a top-level node and
+ exported natively.
+ **Fix:** duplicate `Escena de viento 1` (`117:4889`) and the manifesto
+ `Section` (`26:6542`) in Figma, drag the copies to the root of the canvas,
+ and export each as MP4. Drop the two files in `public/videos/venture/` —
+ no code change needed.
+
+3. **`next build` has not been run.** It could not be run in the environment
+ this work was done in (a Linux VM with a macOS `node_modules`, missing the
+ Linux SWC binary). Please confirm a clean build.
+
+## Known non-blocking issues
+
+- **React hydration mismatch in the contact form.** Radix `FormLabel` /
+ `FormControl` ids differ between server and client. **Pre-existing, not
+ introduced by this work.** Visible in the console; does not affect layout.
+- **14 Unicode arrows remain inside cards** — 5 on the steward cards, 5 in
+ Active Spears, 4 in Expeditions. Section-level chrome was converted to the
+ Figma pills; card interiors are a further pass.
+- **Steward cards show `ST—01 ↗`.** Figma's card (`19:4245`) is portrait, role,
+ name, project only — no index, no arrow. Left in place because removing
+ visible content is a product decision.
+- **Expeditions shows an `01 / 04` counter** that Figma does not have. The
+ prev/next buttons were removed (they exist only in `CODE BASELINE`); the
+ track still scrolls by drag and trackpad.
+- **`ico-handbook.svg` is committed but unused.** Not an oversight — there is
+ no `ico_handbook` instance anywhere in the Figma page; it is an orphan
+ component. The Guild's handbook link does not exist in the target either.
+- **`hero-dark-poster.png` is 5.1 MB** (2880×1866). Worth compressing or
+ dropping to 1×.
+- **Card interiors in Spears and Expeditions have not been measured** against
+ Figma. The spec for the "Your edge problem" card is `117:2212`.
+- **`hero-landmarks-v1.png` was removed** — it has no equivalent in the final
+ target. `creed-moons-v1.png`, `creed-flyer-v1.png`,
+ `project-ship-schematic-v1.webp` and the two `raidguild-panorama*` files are
+ now unreferenced and can be deleted once you agree.
+
+## A note on what was wrong before
+
+Three things in the previous state were not "a video replaced by a still" but
+simply the wrong artwork: the manifesto backdrop (moons + flyer, where Figma
+has a desert walking machine), the Contact illustration (a ship schematic,
+where Figma has a druid), and Louchi's portrait (rendered as the initials
+`LO`, though the portrait does exist in Figma as an image fill on `19:4234`).
+Worth knowing if you are reconciling against the earlier audit.
diff --git a/bun.lock b/bun.lock
index bf466e0..74c37f7 100644
--- a/bun.lock
+++ b/bun.lock
@@ -32,7 +32,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"lucide-react": "^0.545.0",
- "next": "15.5.7",
+ "next": "^15.5.9",
"next-themes": "^0.4.6",
"react": "19.1.0",
"react-dom": "19.1.0",
@@ -159,25 +159,25 @@
"@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.12", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.10.0" } }, "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ=="],
- "@next/env": ["@next/env@15.5.7", "", {}, "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg=="],
+ "@next/env": ["@next/env@15.5.23", "", {}, "sha512-Mv3Z9hVbFcPnoLevsZ6rnX1TBtyHb5E17yN7HTPDXSXxeNsGBjUFrdbjRXKKXIOhfth7/cg6Ay7PZ2UFawaWsQ=="],
"@next/eslint-plugin-next": ["@next/eslint-plugin-next@15.5.5", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-FMzm412l9oFB8zdRD+K6HQ1VzlS+sNNsdg0MfvTg0i8lfCyTgP/RFxiu/pGJqZ/IQnzn9xSiLkjOVI7Iv4nbdQ=="],
- "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.5.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw=="],
+ "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.5.23", "", { "os": "darwin", "cpu": "arm64" }, "sha512-SrEwOROH/rhA03F59hHtdhgtfZMWGzr5duDBWgRQt2rS3mJhqMKOcnNx6txOd0/i3E3D3uFKYFvyHsEiwQxzag=="],
- "@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.5.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg=="],
+ "@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.5.23", "", { "os": "darwin", "cpu": "x64" }, "sha512-f0FpFbG2EhDCuptBGcfrLcYMDuQAhe6m1QA4VVfXFrIBoFXvXt/olGbBkYkloKlXQtmhuzvtdYyuu/6zf07GIg=="],
- "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.5.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA=="],
+ "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.5.23", "", { "os": "linux", "cpu": "arm64" }, "sha512-WlNtfepUXKX2u2ZsJZ8c3c8+tJSRZqsYzoMwLOY72A8ucKCCgxgNhiePA3qzFYahVWrwcQd8jOeJmBinc+VFVQ=="],
- "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.5.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw=="],
+ "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.5.23", "", { "os": "linux", "cpu": "arm64" }, "sha512-W/6qKk7UG93mg14PmQC+2urt69MIdwTBLNQ6MJyeC4wOCIHCjz+VfgssvS1pK7mgYBtLC1g6VKNoHD9xB0WWGg=="],
- "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.5.7", "", { "os": "linux", "cpu": "x64" }, "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw=="],
+ "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.5.23", "", { "os": "linux", "cpu": "x64" }, "sha512-vzefI32mi6VMk96RaTAyxApgfGbiFzQBXVsekEjsDv1fr48mlABTWx0sUYhaYCBHWqCalxmz3DxbxFcbFvzNtw=="],
- "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.5.7", "", { "os": "linux", "cpu": "x64" }, "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA=="],
+ "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.5.23", "", { "os": "linux", "cpu": "x64" }, "sha512-qppK/3dTGOTI+aoWWBZc3DshFIhrzgL8guATlaN9V6M1QJxbkP/rhEZ22tdICsQ/2WWXopMZ2Jokzj2u3uKY3Q=="],
- "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.5.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ=="],
+ "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.5.23", "", { "os": "win32", "cpu": "arm64" }, "sha512-Wc29KFOdT7XBcII3Vtmw7aoU8Uk3Mes/FNJfhFeSHdYBFJWMcR/DsI8U9BCPUhq/uycsUVuqSKGthW15tLsigA=="],
- "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.7", "", { "os": "win32", "cpu": "x64" }, "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw=="],
+ "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.23", "", { "os": "win32", "cpu": "x64" }, "sha512-/C7wRW4fa9s/PKA18zGPPpVmx8ycgVpP8yOxro4gzGTzjPJdscbAP3ODeFvgiIovxD176Z2J/SXO9t8PJKHLeQ=="],
"@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
@@ -791,7 +791,7 @@
"natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
- "next": ["next@15.5.7", "", { "dependencies": { "@next/env": "15.5.7", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.7", "@next/swc-darwin-x64": "15.5.7", "@next/swc-linux-arm64-gnu": "15.5.7", "@next/swc-linux-arm64-musl": "15.5.7", "@next/swc-linux-x64-gnu": "15.5.7", "@next/swc-linux-x64-musl": "15.5.7", "@next/swc-win32-arm64-msvc": "15.5.7", "@next/swc-win32-x64-msvc": "15.5.7", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ=="],
+ "next": ["next@15.5.23", "", { "dependencies": { "@next/env": "15.5.23", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.23", "@next/swc-darwin-x64": "15.5.23", "@next/swc-linux-arm64-gnu": "15.5.23", "@next/swc-linux-arm64-musl": "15.5.23", "@next/swc-linux-x64-gnu": "15.5.23", "@next/swc-linux-x64-musl": "15.5.23", "@next/swc-win32-arm64-msvc": "15.5.23", "@next/swc-win32-x64-msvc": "15.5.23", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-Gvd2WKgvxIXCGotxcI1im/Uf3rS3J3oZGw0g/uskg6AVBZhyE3aAbujkYWzS3xLmEPEtTLfkaVQUKK0KMTSIkA=="],
"next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
diff --git a/docs/venture-integration.md b/docs/venture-integration.md
new file mode 100644
index 0000000..2354d9b
--- /dev/null
+++ b/docs/venture-integration.md
@@ -0,0 +1,45 @@
+# Venture Beyond integration
+
+Design and Figma asset handoff: Luis Blanco (Louchi), https://estudioblanco.org.
+
+Source: https://github.com/luisblancoach/website/tree/handoff/venture-beyond-dekan
+Imported tip: a195359. All seven original commits are retained as merge ancestry,
+including their original author information. HANDOFF.md is the original handoff;
+this document records subsequent integration decisions rather than rewriting it.
+
+Integration decisions:
+- Use self-hosted Afacad Flux with CSS slants instead of the missing Grinder cuts.
+ Keep Ubuntu body and Ubuntu Mono supporting type from the handoff.
+- Preserve the local foliage front door and direct inquiry route.
+- Include Talent & Placement as a proposed spear; keep the handbook accessible.
+- Retain the supplied illustrations, palettes, icons, portraits and video scenes.
+- Make section sizing responsive rather than enforcing Figma heights when content grows.
+
+Clean scene exports supplied by Louchi in Assets.zip on 2026-09-09:
+- Video/wind.mp4 → hero-light.mp4 (2200 × 940).
+- Video/forest.mp4 → hero-dark.mp4 (2184 × 948).
+- Video/Animated Scene.mp4 → manifesto.mp4 (2200 × 940).
+These replace the previous preview videos with background-only artwork. Web copies
+use H.264 CRF 23, yuv420p and fast-start metadata, with audio removed. Posters are
+extracted from the matching exports. Playback pauses offscreen, in hidden tabs,
+and for reduced-motion preferences; the existing hover discovery layer is retained.
+
+Walkthrough parity pass:
+- Continuous word ticker and counter-moving statistics band, with pause controls
+ and static, wrapped content for reduced-motion preferences.
+- Lighter dark-mode card surfaces; stronger interaction colors apply on hover/focus.
+- Contact artwork uses the genuinely transparent professions/Druid 2.png export
+ from Assets.zip instead of the earlier cream-backed PNG.
+- Night navigation/theme switch use navy surfaces; the switch stays separate.
+Statistics remain unverified mockup values, not newly validated claims.
+
+Loop experiment: hero playback uses separate *-pingpong.mp4 derivatives, with
+the original forward sequence followed by its reverse (duplicate endpoint frames
+omitted). The original clean exports remain available for comparison. Reverse
+segments are processed in bounded 48-frame chunks to limit encoding memory use.
+The browser plays one continuous file rather than switching players at the seam.
+The creed/manifesto remains forward-only because of its flying bird. Its
+manifesto-crossfade.mp4 derivative blends the final 0.75 seconds with the opening
+0.75 seconds, then loops to the next forward frame without reversing motion.
+Statistical and portfolio copy from the design remains mockup content requiring
+editorial verification before release. No Grinder files are bundled or required.
diff --git a/package.json b/package.json
index 9d3a0d5..dcbb751 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
"dev": "next dev --turbopack",
"build": "next build --turbopack",
"start": "next start",
- "lint": "eslint"
+ "lint": "eslint",
+ "brand:sync": "node scripts/sync-brand-dist.mjs"
},
"dependencies": {
"@hookform/resolvers": "^5.2.2",
@@ -36,7 +37,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"lucide-react": "^0.545.0",
- "next": "15.5.7",
+ "next": "^15.5.9",
"next-themes": "^0.4.6",
"react": "19.1.0",
"react-dom": "19.1.0",
diff --git a/public/fonts/AfacadFlux-OFL.txt b/public/fonts/AfacadFlux-OFL.txt
new file mode 100644
index 0000000..5d6ffe0
--- /dev/null
+++ b/public/fonts/AfacadFlux-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2023 The Afacad Project Authors (https://github.com/Dicotype/Afacad)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/AfacadFlux-Variable.ttf b/public/fonts/AfacadFlux-Variable.ttf
new file mode 100644
index 0000000..a3df5d1
Binary files /dev/null and b/public/fonts/AfacadFlux-Variable.ttf differ
diff --git a/public/images/icons/venture/ico-dark.svg b/public/images/icons/venture/ico-dark.svg
new file mode 100644
index 0000000..451fbc3
--- /dev/null
+++ b/public/images/icons/venture/ico-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/icons/venture/ico-discord.svg b/public/images/icons/venture/ico-discord.svg
new file mode 100644
index 0000000..4a9474f
--- /dev/null
+++ b/public/images/icons/venture/ico-discord.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/icons/venture/ico-handbook.svg b/public/images/icons/venture/ico-handbook.svg
new file mode 100644
index 0000000..08d2ec4
--- /dev/null
+++ b/public/images/icons/venture/ico-handbook.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/icons/venture/ico-logo.svg b/public/images/icons/venture/ico-logo.svg
new file mode 100644
index 0000000..2d0d3d4
--- /dev/null
+++ b/public/images/icons/venture/ico-logo.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/icons/venture/ico-portal.svg b/public/images/icons/venture/ico-portal.svg
new file mode 100644
index 0000000..ce2e3f4
--- /dev/null
+++ b/public/images/icons/venture/ico-portal.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/icons/venture/ico-sun.svg b/public/images/icons/venture/ico-sun.svg
new file mode 100644
index 0000000..a7725c8
--- /dev/null
+++ b/public/images/icons/venture/ico-sun.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/icons/venture/sigil-logo.svg b/public/images/icons/venture/sigil-logo.svg
new file mode 100644
index 0000000..83e2b7e
--- /dev/null
+++ b/public/images/icons/venture/sigil-logo.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/images/member-dekan.png b/public/images/member-dekan.png
index a5a9c1b..85f5aec 100644
Binary files a/public/images/member-dekan.png and b/public/images/member-dekan.png differ
diff --git a/public/images/member-louchi.png b/public/images/member-louchi.png
new file mode 100644
index 0000000..93edbb2
Binary files /dev/null and b/public/images/member-louchi.png differ
diff --git a/public/images/neo/contact-druid-transparent.png b/public/images/neo/contact-druid-transparent.png
new file mode 100644
index 0000000..39a90c7
Binary files /dev/null and b/public/images/neo/contact-druid-transparent.png differ
diff --git a/public/images/neo/contact-druid.png b/public/images/neo/contact-druid.png
new file mode 100644
index 0000000..d381140
Binary files /dev/null and b/public/images/neo/contact-druid.png differ
diff --git a/public/images/neo/creed-flyer-v1.png b/public/images/neo/creed-flyer-v1.png
new file mode 100644
index 0000000..dc2fea5
Binary files /dev/null and b/public/images/neo/creed-flyer-v1.png differ
diff --git a/public/images/neo/creed-moons-v1.png b/public/images/neo/creed-moons-v1.png
new file mode 100644
index 0000000..7b6d3d4
Binary files /dev/null and b/public/images/neo/creed-moons-v1.png differ
diff --git a/public/images/neo/field-autonomous-treasury.png b/public/images/neo/field-autonomous-treasury.png
new file mode 100644
index 0000000..5c806e4
Binary files /dev/null and b/public/images/neo/field-autonomous-treasury.png differ
diff --git a/public/images/neo/field-protocol-garden.png b/public/images/neo/field-protocol-garden.png
new file mode 100644
index 0000000..68f1eb8
Binary files /dev/null and b/public/images/neo/field-protocol-garden.png differ
diff --git a/public/images/neo/field-signal-commons.png b/public/images/neo/field-signal-commons.png
new file mode 100644
index 0000000..9b5bddb
Binary files /dev/null and b/public/images/neo/field-signal-commons.png differ
diff --git a/public/images/neo/guild-builders-v1.png b/public/images/neo/guild-builders-v1.png
new file mode 100644
index 0000000..e104a33
Binary files /dev/null and b/public/images/neo/guild-builders-v1.png differ
diff --git a/public/images/neo/hero-dark-poster.png b/public/images/neo/hero-dark-poster.png
new file mode 100644
index 0000000..d6f2739
Binary files /dev/null and b/public/images/neo/hero-dark-poster.png differ
diff --git a/public/images/neo/hero-foreground.png b/public/images/neo/hero-foreground.png
new file mode 100644
index 0000000..670400e
Binary files /dev/null and b/public/images/neo/hero-foreground.png differ
diff --git a/public/images/neo/hero-landmarks-v1.png b/public/images/neo/hero-landmarks-v1.png
new file mode 100644
index 0000000..f6aaaef
Binary files /dev/null and b/public/images/neo/hero-landmarks-v1.png differ
diff --git a/public/images/neo/hero-light-poster.png b/public/images/neo/hero-light-poster.png
new file mode 100644
index 0000000..95234ae
Binary files /dev/null and b/public/images/neo/hero-light-poster.png differ
diff --git a/public/images/neo/manifesto-backdrop.png b/public/images/neo/manifesto-backdrop.png
new file mode 100644
index 0000000..e3aceb7
Binary files /dev/null and b/public/images/neo/manifesto-backdrop.png differ
diff --git a/public/images/neo/project-ship-schematic-v1.webp b/public/images/neo/project-ship-schematic-v1.webp
new file mode 100644
index 0000000..28b018d
Binary files /dev/null and b/public/images/neo/project-ship-schematic-v1.webp differ
diff --git a/public/images/neo/raidguild-panorama-night-v1.webp b/public/images/neo/raidguild-panorama-night-v1.webp
new file mode 100644
index 0000000..6f2a54f
Binary files /dev/null and b/public/images/neo/raidguild-panorama-night-v1.webp differ
diff --git a/public/images/neo/raidguild-panorama.png b/public/images/neo/raidguild-panorama.png
new file mode 100644
index 0000000..2e26fc1
Binary files /dev/null and b/public/images/neo/raidguild-panorama.png differ
diff --git a/public/images/neo/raidguild-swords.png b/public/images/neo/raidguild-swords.png
new file mode 100644
index 0000000..b5fdb0a
Binary files /dev/null and b/public/images/neo/raidguild-swords.png differ
diff --git a/public/images/neo/sky-citadel.png b/public/images/neo/sky-citadel.png
new file mode 100644
index 0000000..7222b61
Binary files /dev/null and b/public/images/neo/sky-citadel.png differ
diff --git a/public/images/neo/spear-applied-ai-v1.webp b/public/images/neo/spear-applied-ai-v1.webp
new file mode 100644
index 0000000..e1e5b45
Binary files /dev/null and b/public/images/neo/spear-applied-ai-v1.webp differ
diff --git a/public/images/neo/spear-edge-problem-v1.webp b/public/images/neo/spear-edge-problem-v1.webp
new file mode 100644
index 0000000..f79e584
Binary files /dev/null and b/public/images/neo/spear-edge-problem-v1.webp differ
diff --git a/public/images/neo/spear-onchain-v1.webp b/public/images/neo/spear-onchain-v1.webp
new file mode 100644
index 0000000..5ef765e
Binary files /dev/null and b/public/images/neo/spear-onchain-v1.webp differ
diff --git a/public/videos/venture/hero-dark-pingpong.mp4 b/public/videos/venture/hero-dark-pingpong.mp4
new file mode 100644
index 0000000..c62d7fe
Binary files /dev/null and b/public/videos/venture/hero-dark-pingpong.mp4 differ
diff --git a/public/videos/venture/hero-dark.mp4 b/public/videos/venture/hero-dark.mp4
new file mode 100644
index 0000000..7cae35f
Binary files /dev/null and b/public/videos/venture/hero-dark.mp4 differ
diff --git a/public/videos/venture/hero-light-pingpong.mp4 b/public/videos/venture/hero-light-pingpong.mp4
new file mode 100644
index 0000000..c197ed0
Binary files /dev/null and b/public/videos/venture/hero-light-pingpong.mp4 differ
diff --git a/public/videos/venture/hero-light.mp4 b/public/videos/venture/hero-light.mp4
new file mode 100644
index 0000000..505f8b6
Binary files /dev/null and b/public/videos/venture/hero-light.mp4 differ
diff --git a/public/videos/venture/manifesto-crossfade.mp4 b/public/videos/venture/manifesto-crossfade.mp4
new file mode 100644
index 0000000..b840f06
Binary files /dev/null and b/public/videos/venture/manifesto-crossfade.mp4 differ
diff --git a/public/videos/venture/manifesto.mp4 b/public/videos/venture/manifesto.mp4
new file mode 100644
index 0000000..79fb500
Binary files /dev/null and b/public/videos/venture/manifesto.mp4 differ
diff --git a/scripts/sync-brand-dist.mjs b/scripts/sync-brand-dist.mjs
new file mode 100644
index 0000000..e9edd79
--- /dev/null
+++ b/scripts/sync-brand-dist.mjs
@@ -0,0 +1,28 @@
+import { cp, mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const websiteRoot = path.resolve(
+ path.dirname(fileURLToPath(import.meta.url)),
+ ".."
+);
+
+const brandRoot = path.resolve(websiteRoot, "../raidguild-brand");
+const source = path.join(brandRoot, "dist/consumer");
+const destination = path.join(websiteRoot, "src/brand-dist");
+
+await mkdir(destination, { recursive: true });
+
+await cp(
+ path.join(source, "palette.css"),
+ path.join(destination, "palette.css"),
+ { force: true }
+);
+
+await cp(
+ path.join(source, "VERSION.json"),
+ path.join(destination, "VERSION.json"),
+ { force: true }
+);
+
+console.log("RaidGuild Brand synced to src/brand-dist");
diff --git a/src/app/globals.css b/src/app/globals.css
index 152b2c0..686cc7c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,6 @@
@import "tailwindcss";
@import "tw-animate-css";
+@import "../brand-dist/palette.css";
@custom-variant dark (&:is(.dark *));
@@ -137,40 +138,6 @@
:root {
--radius: 0.625rem;
-
- /* Brand Colors - Moloch */
- --moloch-100: #f1efee;
- --moloch-200: #efc5bb;
- --moloch-300: #e39b8b;
- --moloch-400: #d25c41;
- --moloch-500: #bd482d;
- --moloch-600: #8b3521;
- --moloch-700: #5c2316;
- --moloch-800: #29100a;
-
- /* Brand Colors - Scroll */
- --scroll-100: #f9f7e7;
- --scroll-150: #f3eeca;
- --scroll-200: #ece5ac;
- --scroll-300: #dccd6a;
- --scroll-400: #d2c141;
- --scroll-500: #b5a22c;
- --scroll-600: #837820;
- --scroll-700: #534a13;
- --scroll-800: #211e07;
-
- /* Brand Colors - Neutral */
- --neutral-100: #f1efee;
- --neutral-200: #d5cecd;
- --neutral-300: #b9aeac;
- --neutral-400: #9e8e8a;
- --neutral-500: #806f6b;
- --neutral-600: #645754;
- --neutral-700: #433937;
- --neutral-800: #221d1c;
- --neutral-white: #fafafa;
- --neutral-black: #0d0d0d;
-
/* Light Theme - Using brand colors */
--background: var(--scroll-100);
--foreground: var(--moloch-800);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1821588..6d6891e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,11 @@
import type { Metadata } from "next";
-import { maziusDisplay, ebGaramond, ubuntuMono } from "@/lib/fonts";
+import {
+ afacadFlux,
+ ebGaramond,
+ maziusDisplay,
+ ubuntu,
+ ubuntuMono,
+} from "@/lib/fonts";
import "./globals.css";
// import { ThemeProvider } from "next-themes";
import { Providers } from "@/providers/providers";
@@ -8,24 +14,24 @@ import VercelAnalytics from "@/components/VercelAnalytics";
export const metadata: Metadata = {
metadataBase: new URL("https://www.raidguild.org"),
title: {
- default: "RaidGuild — Web3 Design & Development Collective",
+ default: "RaidGuild — A Builder-Owned Community",
template: "%s | RaidGuild",
},
description:
- "A builder-owned collective shipping smart contracts, dApps, AI systems, and DAO tooling since 2019. Clients include Gitcoin, Gnosis, Pocket Network, and Unlock Protocol.",
+ "A builder-owned community of creative and technical people sharing knowledge, exploring technology, and building together since 2019.",
openGraph: {
siteName: "RaidGuild",
type: "website",
url: "https://www.raidguild.org",
- title: "RaidGuild — Web3 Design & Development Collective",
+ title: "RaidGuild — A Builder-Owned Community",
description:
- "A builder-owned collective shipping smart contracts, dApps, AI systems, and DAO tooling since 2019.",
+ "Explore the people, ideas, and independent specialist practices growing from the RaidGuild community.",
},
twitter: {
card: "summary_large_image",
- title: "RaidGuild — Web3 Design & Development Collective",
+ title: "RaidGuild — A Builder-Owned Community",
description:
- "A builder-owned collective shipping smart contracts, dApps, AI systems, and DAO tooling since 2019.",
+ "Explore the people, ideas, and independent specialist practices growing from the RaidGuild community.",
},
};
@@ -37,6 +43,11 @@ export default function RootLayout({
return (
+
{/*
+ <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ >
);
}
diff --git a/src/brand-dist/VERSION.json b/src/brand-dist/VERSION.json
new file mode 100644
index 0000000..059c919
--- /dev/null
+++ b/src/brand-dist/VERSION.json
@@ -0,0 +1,11 @@
+{
+ "schemaVersion": 1,
+ "distributionVersion": "0.1.0",
+ "generated": true,
+ "notice": "Generated artifact. Do not edit files in this directory manually.",
+ "source": "src/styles/tokens/palette.css",
+ "artifactHash": "sha256:bf4af1d453292e7059442a90a1c3f5b1bb081c57aefdc999d28f1dbe2a5bbbf7",
+ "files": {
+ "palette.css": "sha256:99c956d4a3c213778a67744e3a3e00dcdb2744f1d590b3ed3173189b01bad2cc"
+ }
+}
diff --git a/src/brand-dist/palette.css b/src/brand-dist/palette.css
new file mode 100644
index 0000000..8ffcb29
--- /dev/null
+++ b/src/brand-dist/palette.css
@@ -0,0 +1,63 @@
+/* GENERATED FILE - DO NOT EDIT. Source: raidguild-brand/src/styles/tokens/palette.css */
+/* Canonical RaidGuild palette source for Brand Distribution v0.1. */
+@theme inline {
+ --color-moloch-100: var(--moloch-100);
+ --color-moloch-200: var(--moloch-200);
+ --color-moloch-300: var(--moloch-300);
+ --color-moloch-400: var(--moloch-400);
+ --color-moloch-500: var(--moloch-500);
+ --color-moloch-600: var(--moloch-600);
+ --color-moloch-700: var(--moloch-700);
+ --color-moloch-800: var(--moloch-800);
+
+ --color-scroll-100: var(--scroll-100);
+ --color-scroll-200: var(--scroll-200);
+ --color-scroll-300: var(--scroll-300);
+ --color-scroll-400: var(--scroll-400);
+ --color-scroll-500: var(--scroll-500);
+ --color-scroll-600: var(--scroll-600);
+ --color-scroll-700: var(--scroll-700);
+ --color-scroll-800: var(--scroll-800);
+
+ --color-neutral-100: var(--neutral-100);
+ --color-neutral-200: var(--neutral-200);
+ --color-neutral-300: var(--neutral-300);
+ --color-neutral-400: var(--neutral-400);
+ --color-neutral-500: var(--neutral-500);
+ --color-neutral-600: var(--neutral-600);
+ --color-neutral-700: var(--neutral-700);
+ --color-neutral-800: var(--neutral-800);
+ --color-neutral-white: var(--neutral-white);
+ --color-neutral-black: var(--neutral-black);
+}
+
+:root {
+ --moloch-100: #f1efee;
+ --moloch-200: #efc5bb;
+ --moloch-300: #e39b8b;
+ --moloch-400: #d25c41;
+ --moloch-500: #bd482d;
+ --moloch-600: #8b3521;
+ --moloch-700: #5c2316;
+ --moloch-800: #29100a;
+
+ --scroll-100: #f9f7e7;
+ --scroll-200: #ece5ac;
+ --scroll-300: #dccd6a;
+ --scroll-400: #d2c141;
+ --scroll-500: #b5a22c;
+ --scroll-600: #837820;
+ --scroll-700: #534a13;
+ --scroll-800: #211e07;
+
+ --neutral-100: #f1efee;
+ --neutral-200: #d5cecd;
+ --neutral-300: #b9aeac;
+ --neutral-400: #9e8e8a;
+ --neutral-500: #806f6b;
+ --neutral-600: #645754;
+ --neutral-700: #433937;
+ --neutral-800: #221d1c;
+ --neutral-white: #fafafa;
+ --neutral-black: #0d0d0d;
+}
diff --git a/src/components/FrontDoor.module.css b/src/components/FrontDoor.module.css
new file mode 100644
index 0000000..f3ca5bd
--- /dev/null
+++ b/src/components/FrontDoor.module.css
@@ -0,0 +1,94 @@
+.door { position: fixed; inset: 0; z-index: 100; isolation: isolate; color: #efe9d7; display: flex; align-items: center; justify-content: center; overflow: auto; background: #092b28; font-family: var(--font-body), serif; transition: background .9s; }
+.canopy { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
+/* Overlapping, feathered clusters retain a continuous canopy at rest.
+ Each cluster bends away from its own root when the visitor steps through. */
+.cluster { position: absolute; inset: 0; mask-image: var(--leaf-mask); transform-origin: var(--root); transition: transform 1.25s cubic-bezier(.22,.68,.24,1), opacity .4s ease .9s; transition-delay: var(--delay, 0ms), .95s; }
+.upperLeft { --leaf-mask: radial-gradient(ellipse 65% 60% at 8% 0%, #000 48%, transparent 90%); --root: 0% 0%; --spread: translate(-24%, -45%) rotate(-17deg) scale(1.2); --delay: 70ms; }
+.upperRight { --leaf-mask: radial-gradient(ellipse 65% 65% at 95% 0%, #000 48%, transparent 90%); --root: 100% 0%; --spread: translate(30%, -42%) rotate(13deg) scale(1.16); --delay: 140ms; }
+.middleLeft { --leaf-mask: radial-gradient(ellipse 62% 54% at 0% 48%, #000 45%, transparent 95%); --root: 0% 65%; --spread: translate(-52%, -5%) rotate(-12deg) scale(1.3); }
+.middleRight { --leaf-mask: radial-gradient(ellipse 62% 57% at 100% 48%, #000 45%, transparent 95%); --root: 100% 60%; --spread: translate(49%, 8%) rotate(16deg) scale(1.25); --delay: 90ms; }
+.lowerLeft { --leaf-mask: radial-gradient(ellipse 72% 65% at 15% 100%, #000 47%, transparent 94%); --root: 0% 100%; --spread: translate(-29%, 46%) rotate(19deg) scale(1.32); --delay: 130ms; }
+.lowerRight { --leaf-mask: radial-gradient(ellipse 70% 65% at 90% 100%, #000 47%, transparent 94%); --root: 100% 100%; --spread: translate(32%, 49%) rotate(-14deg) scale(1.26); --delay: 40ms; }
+.leaves { position: absolute; top: 0; bottom: 0; width: 55%; background-color: #123e36; background-image: url('/images/neo/hero-foreground.png'); background-size: auto 280%; background-repeat: repeat-x; filter: saturate(.7) brightness(.78); }
+.left { left: 0; background-position: 21% 100%; }
+.right { right: 0; background-position: 84% 100%; }
+.shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 46%, rgba(5,29,26,.97) 0%, rgba(5,29,26,.9) 25%, rgba(5,29,26,.35) 64%, rgba(5,29,26,.18)); transition: opacity .7s; }
+.content { text-align: center; width: min(680px, 100%); padding: 40px 28px; transition: opacity .3s, transform .5s; }
+.brand { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--font-mono), monospace; font-size: 15px; letter-spacing: .22em; margin-bottom: 35px; }
+.brand img { object-fit: contain; filter: brightness(0) invert(94%) sepia(12%) saturate(332%) hue-rotate(353deg); }
+.content h1 { font-family: var(--font-display), sans-serif; font-size: clamp(48px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; margin: 0 0 25px; }
+.content p { font-size: 21px; line-height: 1.5; max-width: 470px; margin: 0 auto; text-wrap: pretty; }
+.content .homeNote { font-size: 16px; color: #bdcfc0; margin-top: 12px; max-width: 420px; }
+.offerings { text-align: left; max-width: 470px; margin: 28px auto 0; }
+.offerings h2 { font: 700 11px/1.4 var(--font-mono), monospace; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; color: #bdcfc0; }
+.offerings a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid #648477; text-decoration: none; transition: color .2s; }
+.offerings strong { display: block; font-size: 22px; line-height: 1.2; font-weight: 700; }
+.offerings small { display: block; font-size: 14px; line-height: 1.4; margin-top: 3px; color: #bdcfc0; }
+.offerings a > span:last-child { color: #d7e34d; font-size: 24px; }
+.offerings a:hover { color: #d7e34d; }
+.join { display: inline-block; padding: 12px; margin-top: 12px; font: 12px/1.4 var(--font-mono), monospace; color: #bdcfc0; text-underline-offset: 4px; }
+.explore { display: block; width: fit-content; margin: 28px auto 0; font-size: 23px; }
+.explore > span { display: inline-block; margin-left: 10px; transition: transform .2s; color: #ee3c78; }
+.explore:hover > span { transform: translateY(4px); }
+.explore small { display: block; font-family: var(--font-mono), monospace; font-size: 10px; color: #bdcfc0; margin-top: 8px; }
+.readiness { width: min(280px, 100%); margin: 16px auto 0; color: #bdcfc0; font: 12px/1.5 var(--font-mono), monospace; }
+.readiness > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
+.readiness .loadBar { height: 3px; border-radius: 0; background: #64847755; }
+.loadBar > div { background: #ee3c78; transition: transform .4s ease; }
+@media (prefers-reduced-motion: reduce) { .loadBar > div { transition: none; } }
+.door a:focus-visible { outline: 2px solid #ee3c78; outline-offset: 6px; }
+.door { overflow-x: hidden; }
+.content { flex-shrink: 0; margin: auto; }
+.door { --font-display: var(--font-afacad); --font-body: var(--font-afacad); }
+.opening { background: transparent; pointer-events: none; overflow: hidden; }
+.opening .cluster { transform: var(--spread); opacity: 0; }
+.opening .shade, .opening .content { opacity: 0; }
+.opening .content { transform: translateY(-12px); }
+@media (max-width: 600px) {
+ .content { padding: 28px 25px; }
+ .content h1 { font-size: clamp(42px, 11vw, 60px); }
+ .content p { font-size: 19px; max-width: 340px; }
+ .brand { margin-bottom: 28px; }
+ .offerings { margin-top: 24px; }
+ /* Portrait needs shorter, irregular patches rather than tall side panels.
+ Overlapping masks hide their boundaries; each patch lifts or dips away
+ at a different time, like brushing through the undergrowth. */
+ .cluster { transition-duration: 1.1s, .45s; transition-delay: var(--delay, 0ms), .75s; }
+ .upperLeft { --leaf-mask: radial-gradient(ellipse 90% 38% at 12% 10%, #000 30%, transparent 84%); --spread: translate(-10%, -32%) rotate(-26deg) scale(1.18); --delay: 0ms; }
+ .upperRight { --leaf-mask: radial-gradient(ellipse 82% 42% at 86% 23%, #000 28%, transparent 85%); --spread: translate(12%, -24%) rotate(21deg) scale(1.25); --delay: 140ms; }
+ .middleLeft { --leaf-mask: radial-gradient(ellipse 86% 33% at 16% 49%, #000 28%, transparent 88%); --root: 0% 30%; --spread: translate(-16%, -18%) rotate(-31deg) scale(1.2); --delay: 80ms; }
+ .middleRight { --leaf-mask: radial-gradient(ellipse 86% 35% at 91% 62%, #000 28%, transparent 88%); --root: 100% 84%; --spread: translate(18%, 19%) rotate(-27deg) scale(1.22); --delay: 210ms; }
+ .lowerLeft { --leaf-mask: radial-gradient(ellipse 92% 38% at 13% 83%, #000 28%, transparent 87%); --spread: translate(-8%, 30%) rotate(24deg) scale(1.3); --delay: 170ms; }
+ .lowerRight { --leaf-mask: radial-gradient(ellipse 80% 32% at 87% 100%, #000 28%, transparent 88%); --spread: translate(10%, 35%) rotate(-19deg) scale(1.16); --delay: 40ms; }
+ .leaves { background-size: auto 210%; background-color: transparent; }
+ .left { mask-image: linear-gradient(to right, #000 65%, transparent); }
+ .right { mask-image: linear-gradient(to left, #000 65%, transparent); }
+}
+@media (max-height: 700px) and (min-width: 601px) {
+ .content { padding: 30px 25px 65px; }
+ .brand { margin-bottom: 18px; }
+ .content h1 { font-size: 54px; margin-bottom: 15px; }
+ .explore { margin-top: 18px; }
+}
+@media (prefers-reduced-motion: reduce) { .door, .door * { transition: none !important; } }
+
+/* Keep the entrance a compact directory, including on laptop-height screens. */
+.content { padding: 24px 28px; }
+.brand { margin-bottom: 18px; }
+.brand img { width: 36px; height: 36px; }
+.content h1 { font-size: clamp(42px, 4.2vw, 56px); margin-bottom: 16px; }
+.content p { font-size: 19px; line-height: 1.35; }
+.content .homeNote { font-size: 15px; line-height: 1.35; margin-top: 10px; }
+.offerings { margin-top: 20px; }
+.offerings a { padding: 10px 0; }
+.explore { margin-top: 20px; }
+.join { margin-top: 4px; }
+.trust { max-width: 470px; margin: 22px auto 0; }
+.content .trust p { font: 10px/1.4 var(--font-mono), monospace; color: #bdcfc0; }
+.trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 18px; list-style: none; margin: 12px 0 0; padding: 0; }
+.trust li { display: flex; align-items: center; justify-content: center; min-width: 0; height: 28px; }
+.trust img { width: auto; height: auto; max-width: 100%; max-height: 28px; filter: brightness(0) invert(94%) sepia(12%) saturate(332%) hue-rotate(353deg); opacity: .85; }
+@media (max-width: 600px) {
+ .trust ul { gap: 12px; }
+ .trust img { max-height: 24px; }
+}
diff --git a/src/components/FrontDoor.tsx b/src/components/FrontDoor.tsx
new file mode 100644
index 0000000..1d773b0
--- /dev/null
+++ b/src/components/FrontDoor.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./FrontDoor.module.css";
+import { ProgressBar } from "./ui/progress";
+
+const bootMessages = [
+ "Cold-starting the walker",
+ "Booting OuroborOS",
+ "Plugging into the WORM",
+ "Tuning the guild frequency",
+ "Charting the uncharted",
+];
+
+export default function FrontDoor({ onEnter, isNight }: { onEnter: (destination: string) => void; isNight: boolean }) {
+ const [opening, setOpening] = useState(false);
+ const [loading, setLoading] = useState({ percent: 0, finished: false, fallback: false });
+ const [bootMessage, setBootMessage] = useState(0);
+
+ useEffect(() => {
+ if (loading.finished) return;
+ const interval = setInterval(() => setBootMessage(index => (index + 1) % bootMessages.length), 2200);
+ return () => clearInterval(interval);
+ }, [loading.finished]);
+
+ useEffect(() => {
+ let disposed = false;
+ let completed = 0;
+ let failed = false;
+ const cleanups: (() => void)[] = [];
+ const video = document.querySelector(`video[data-scene="${isNight ? "dark" : "light"}"]`);
+ const connection = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection;
+ const useVideo = !!video && !connection?.saveData && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const sources = [...new Set([
+ `/images/neo/hero-${isNight ? "dark" : "light"}-poster.png`,
+ ...Array.from(document.querySelectorAll("#top img")).map(img => img.currentSrc || img.src),
+ ])];
+ const total = sources.length + 1 + Number(useVideo);
+ setLoading({ percent: 0, finished: false, fallback: false });
+ const track = (subscribe: (finish: (ok: boolean) => void) => void) => {
+ let settled = false;
+ const timeout = setTimeout(() => finish(false), 12000);
+ const finish = (ok: boolean) => {
+ if (settled || disposed) return;
+ settled = true;
+ clearTimeout(timeout);
+ failed ||= !ok;
+ completed += 1;
+ setLoading({ percent: Math.round(completed / total * 100), finished: completed === total, fallback: failed });
+ };
+ cleanups.push(() => clearTimeout(timeout));
+ subscribe(finish);
+ };
+ sources.forEach(src => track(finish => {
+ const image = new Image();
+ image.onload = () => finish(true);
+ image.onerror = () => finish(false);
+ image.src = src;
+ cleanups.push(() => { image.onload = null; image.onerror = null; });
+ }));
+ track(finish => { void document.fonts.ready.then(() => finish(true), () => finish(false)); });
+ if (useVideo && video) track(finish => {
+ const check = () => {
+ for (let i = 0; i < video.buffered.length; i++) {
+ if (video.readyState >= 3 && video.buffered.start(i) <= .1 && video.buffered.end(i) >= Math.min(2, video.duration)) finish(true);
+ }
+ };
+ const error = () => finish(false);
+ video.preload = "auto";
+ video.addEventListener("progress", check);
+ video.addEventListener("canplay", check);
+ video.addEventListener("error", error);
+ check();
+ cleanups.push(() => {
+ video.removeEventListener("progress", check);
+ video.removeEventListener("canplay", check);
+ video.removeEventListener("error", error);
+ });
+ });
+ return () => { disposed = true; cleanups.forEach(cleanup => cleanup()); };
+ }, [isNight]);
+ const leaving = useRef(false);
+ const timer = useRef | null>(null);
+ const enter = useCallback((destination: string) => {
+ if (leaving.current) return;
+ leaving.current = true;
+ const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ if (destination !== "top" || reduced) {
+ onEnter(destination);
+ return;
+ }
+ setOpening(true);
+ timer.current = setTimeout(() => onEnter(destination), 1450);
+ }, [onEnter]);
+
+ useEffect(() => {
+ const overflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ if (window.location.hash && window.location.hash !== "#top") {
+ onEnter(window.location.hash.slice(1));
+ }
+ const key = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ event.preventDefault();
+ enter("top");
+ }
+ };
+ window.addEventListener("keydown", key);
+ return () => {
+ document.body.style.overflow = overflow;
+ window.removeEventListener("keydown", key);
+ if (timer.current) clearTimeout(timer.current);
+ };
+ }, [enter, onEnter]);
+
+ return (
+
+
+ {[styles.upperLeft, styles.upperRight, styles.middleLeft, styles.middleRight, styles.lowerLeft, styles.lowerRight].map((cluster) => (
+
+ ))}
+
+
+
+
+ {/* Existing identity artwork; the foliage is also reused from the hero. */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
RAIDGUILD
+
+
A community for curious minds.
+
A builder-owned network of creative and technical people who like solving hard problems.
+
Go far together. Explore the people, ideas, and shared ambition behind RaidGuild.
+
+ Work with the network
+
+ Applied AI Explore the AI practice · raidguild.ai ↗
+
+
+ Onchain systems Bring us a protocol, product, or web3 challenge ↗
+
+ { event.preventDefault(); enter("project-inquiry"); }}>
+ Talent & placement Find creative and technical people for your team ↓
+
+ { event.preventDefault(); enter("project-inquiry"); }}>
+ Talk to someone Not sure where to start? Send us a note. ↓
+
+
+
+
Built with and contributed to
+
+ {[
+ { name: "Gitcoin", file: "logo-Gitcoin.svg" },
+ { name: "Gnosis", file: "logo-Gnosis.svg" },
+ { name: "Pocket Network", file: "logo-Pocket.svg" },
+ { name: "Unlock Protocol", file: "logo-Unlock.svg" },
+ ].map((logo) => (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ ))}
+
+
+
{ event.preventDefault(); enter("top"); }}>
+ Venture Beyond ↓
+ Meet the network. Explore our world.
+
+
+
{loading.finished ? (loading.fallback ? "Signal faint. Venture onward." : "Systems awake. Venture beyond.") : `${bootMessages[bootMessage]}…`} {loading.finished ? "↓" : `${loading.percent}%`}
+
+
+
{ event.preventDefault(); enter("guild"); }}>Join the Guild ↓
+
+
+ );
+}
diff --git a/src/components/HireUs.tsx b/src/components/HireUs.tsx
index f1ab2e9..d96d057 100644
--- a/src/components/HireUs.tsx
+++ b/src/components/HireUs.tsx
@@ -693,6 +693,7 @@ export default function HireUs() {
) : (
div { position: absolute; bottom: 100%; left: 0; }
+.portalMessage .unchartedPortal button { display: inline-block; background: none; border: 0; border-radius: 0; margin: 0; padding: 10px 0; color: #efe9d7; font: inherit; letter-spacing: normal; text-transform: none; transform: none; }
+.unchartedShip { position: absolute; bottom: 24px; left: 24px; z-index: 12; }
+.unchartedShip details[open] > div { position: absolute; bottom: 100%; left: 0; }
+.unchartedWalker { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: 16px; }
+.unchartedWalker details[open] > div { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }
+.unchartedPortal, .unchartedShip, .unchartedWalker { display: flex; align-items: center; gap: 4px; }
+.unchartedPortal > details, .unchartedShip > details, .unchartedWalker > details { position: static; }
+.unchartedWalker { width: fit-content; margin-inline: auto; }
+
+.handbookLink { display: inline-block; margin-top: 16px; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
+
+.header {
+ align-items: center;
+ color: var(--paper);
+ display: flex;
+ height: 96px;
+ justify-content: space-between;
+ left: 0;
+ padding: 0 clamp(300px, 21vw, 350px) 0 clamp(24px, 4vw, 72px);
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 20;
+}
+
+.brand { align-items: center; color: inherit; display: inline-flex; font-size: 12px; font-weight: 700; letter-spacing: .11em; line-height: .9; text-decoration: none; }
+/* Glifos nativos exportados de Figma, pintados con currentColor via mask. */
+.iconLogo, .iconDiscord, .iconPortal { background: currentColor; display: block; }
+.iconLogo { -webkit-mask: url("/images/icons/venture/ico-logo.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-logo.svg") center / contain no-repeat; }
+.iconDiscord { -webkit-mask: url("/images/icons/venture/ico-discord.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-discord.svg") center / contain no-repeat; }
+.iconPortal { -webkit-mask: url("/images/icons/venture/ico-portal.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-portal.svg") center / contain no-repeat; }
+
+/* Componente button de Figma (19:4977 y variantes): alto 56, radio 100,
+ padding 8/8/8/24, gap 24, contenedor de icono 40 y glifo 32. */
+.pill { align-items: center; border: 2px solid transparent; border-radius: 100px; display: inline-flex; gap: 24px; height: 56px; justify-content: flex-end; padding: 8px 8px 8px 24px; text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .25s; width: max-content; }
+.pill:hover { transform: translateY(-2px); }
+.pill > span { font-family: var(--font-mono), monospace; font-size: 16px; font-style: italic; font-weight: 700; letter-spacing: 2px; line-height: 24px; text-transform: uppercase; white-space: nowrap; }
+.pillIcon { align-items: center; border: 2px solid transparent; border-radius: 100px; display: flex; flex: 0 0 auto; height: 40px; justify-content: center; width: 40px; }
+.pillIcon > b { height: 32px; width: 32px; }
+.pillFilled { background: var(--coral); border-color: var(--coral); color: var(--paper); }
+.pillFilled .pillIcon { background: var(--paper); color: var(--coral); }
+.pillOutline { background: var(--paper); border-color: var(--coral); color: var(--coral); }
+.pillOutlineNavy { background: var(--paper); border-color: var(--color-navy); color: var(--color-navy); }
+.pillOutlineGreen { background: var(--paper); border-color: var(--color-dark-green); color: var(--color-dark-green); }
+.pillOutline .pillIcon, .pillOutlineNavy .pillIcon, .pillOutlineGreen .pillIcon { border-color: currentColor; }
+
+.sigil { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; height: 41px; justify-content: center; margin-right: 12px; position: relative; width: 41px; }
+.swordMark { background: currentColor; display: block; height: 27px; -webkit-mask: url("/images/icons/venture/ico-logo.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-logo.svg") center / contain no-repeat; width: 29px; }
+.celestialToggle { align-items: center; background: rgba(5,34,34,.52); border: 1px solid rgba(239,233,215,.24); border-radius: 999px; color: var(--paper); cursor: pointer; display: flex; font-family: var(--font-mono), monospace; gap: 8px; left: clamp(158px, 10vw, 192px); padding: 5px 9px 5px 6px; position: absolute; transition: background .3s, border-color .3s; }
+.celestialToggle:hover { background: rgba(5,34,34,.8); border-color: rgba(239,233,215,.55); }
+.celestialToggle > span { background: rgba(239,233,215,.14); border: 1px solid rgba(239,233,215,.38); border-radius: 999px; display: block; height: 18px; position: relative; width: 34px; }
+.celestialToggle > span::before { background: var(--paper); content: ""; height: 10px; left: 3px; -webkit-mask: url("/images/icons/venture/ico-sun.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-sun.svg") center / contain no-repeat; opacity: .72; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; }
+.celestialToggle > span::after { background: var(--paper); content: ""; height: 10px; -webkit-mask: url("/images/icons/venture/ico-dark.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-dark.svg") center / contain no-repeat; opacity: .72; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 10px; }
+.celestialToggle i { background: var(--paper); border-radius: 50%; box-shadow: 0 0 8px rgba(239,233,215,.55); height: 10px; left: 3px; position: absolute; top: 3px; transform: translateX(0); transition: background .75s, box-shadow .75s, transform .75s cubic-bezier(.16,.76,.18,1); width: 10px; z-index: 1; }
+.celestialToggle b { font-size: 7px; letter-spacing: .16em; min-width: 34px; text-align: center; }
+:global(html[data-theme="dark"]) .site .celestialToggle i { background: var(--color-cyan); box-shadow: 0 0 10px rgba(184,224,223,.82); transform: translateX(16px); }
+
+.nav { align-items: center; backdrop-filter: blur(12px) saturate(1.15); background: rgba(5,34,34,.52); border: 1px solid rgba(239,233,215,.2); border-radius: 100px; box-shadow: 0 8px 30px rgba(4,22,24,.16); display: flex; gap: clamp(18px, 2.15vw, 38px); padding: 10px 23px; -webkit-backdrop-filter: blur(12px) saturate(1.15); }
+.nav a { color: inherit; font-size: 11px; font-weight: 700; letter-spacing: .12em; position: relative; text-decoration: none; text-shadow: 0 1px 10px rgba(0,0,0,.45); text-transform: uppercase; }
+.nav > a:not(.navCta)::after { background: currentColor; bottom: -5px; content: ""; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; width: 100%; }
+.nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
+.nav .brandArchiveLink { align-items: center; border-left: 1px solid rgba(239,233,215,.24); display: flex; font-size: 8px; gap: 7px; margin-left: 2px; opacity: .72; padding: 3px 0 3px clamp(18px, 1.7vw, 27px); transition: opacity .2s; }
+.nav .brandArchiveLink:hover { opacity: 1; }
+.nav .brandArchiveLink span { color: var(--coral); font-size: 12px; }
+.menuButton { display: none; }
+
+.portalTrigger { align-items: center; animation: portalAttention 6s 2s ease-in-out infinite; backdrop-filter: blur(14px) saturate(1.15); background: rgba(5,34,34,.86); border: 1px solid rgba(239,233,215,.35); border-radius: 100px; box-shadow: 0 10px 35px rgba(2,18,20,.22); color: var(--paper); cursor: pointer; display: flex; font-family: var(--font-mono), monospace; gap: 12px; padding: 7px 17px 7px 7px; position: fixed; right: clamp(24px, 4vw, 72px); top: 20px; transition: background .25s, border-color .25s, transform .25s; -webkit-backdrop-filter: blur(14px) saturate(1.15); z-index: 30; }
+.portalTrigger:hover { animation-play-state: paused; background: var(--paper); border-color: var(--paper); color: var(--ink); transform: translateY(-3px); }
+.portalTriggerMark { display: block; position: relative; }
+.portalTriggerMark .iconPortal { color: var(--coral); height: 48px; width: 48px; }
+.portalTriggerMark > i { animation: triggerOrbit 3.8s linear infinite; border: 1px solid var(--coral); border-bottom-color: transparent; border-radius: 50%; inset: -3px; pointer-events: none; position: absolute; }
+.portalTriggerCopy { align-items: center; display: grid; font-size: 9px; font-weight: 700; gap: 3px 10px; grid-template-columns: auto auto; letter-spacing: .15em; text-align: left; white-space: nowrap; }
+.portalTriggerCopy small { font-size: 6px; font-weight: 400; grid-column: 1 / -1; letter-spacing: .2em; opacity: .55; }
+.portalTriggerCopy > i { color: var(--coral); font-size: 14px; font-style: normal; grid-column: 2; grid-row: 2; transition: transform .25s; }
+.portalTrigger:hover .portalTriggerCopy > i { transform: translate(3px, -3px); }
+
+@keyframes triggerOrbit { to { transform: rotate(360deg); } }
+@keyframes portalAttention { 0%, 68%, 100% { box-shadow: 0 10px 35px rgba(2,18,20,.22); transform: translateY(0); } 73% { box-shadow: 0 10px 35px rgba(2,18,20,.22), 0 0 0 0 rgba(238,60,120,.3); transform: translateY(-2px); } 82% { box-shadow: 0 10px 35px rgba(2,18,20,.22), 0 0 0 12px rgba(238,60,120,0); transform: translateY(0); } }
+
+.hero { background: var(--deep); color: var(--paper); height: max(1060px, 140svh); min-height: 1060px; position: relative; }
+.heroStage { height: 100svh; min-height: 760px; overflow: hidden; position: sticky; top: 0; }
+.heroExploring { --neo-curtain-open: 152px; --neo-curtain-speed: .68s; --neo-track-title-x: 54px; }
+.heroCelestial { inset: -10%; position: absolute; transform: translate3d(var(--neo-sky-x, 0), var(--neo-sky-y, 0), 0) translateX(var(--neo-track-sky-x, 0)); z-index: 0; }
+.heroCelestial span { border: 1px solid rgba(239,233,215,.22); border-radius: 50%; position: absolute; }
+.moonLarge { height: 25vw; max-height: 400px; max-width: 400px; right: 7%; top: 7%; width: 25vw; }
+.moonSmall { height: 5vw; min-height: 48px; min-width: 48px; right: 31%; top: 13%; width: 5vw; }
+.orbitLine { border-bottom-color: transparent !important; border-left-color: transparent !important; height: 52vw; right: -7%; top: -19%; transform: rotate(22deg); width: 52vw; }
+.heroArt { inset: 0; position: absolute; z-index: 1; }
+.heroImage { height: 100%; inset: 0; object-fit: cover; object-position: calc(48% + var(--neo-land-x, 0px) + var(--neo-track-land-x, 0px)) 58%; position: absolute; transition: object-position .22s cubic-bezier(.2,.7,.2,1); width: 100%; }
+.heroNightImage { opacity: 0; transition: object-position .22s cubic-bezier(.2,.7,.2,1), opacity 1.35s cubic-bezier(.2,.7,.2,1); }
+:global(html[data-theme="dark"]) .site .heroNightImage { opacity: 1; }
+.heroWash { background: linear-gradient(90deg, rgba(5, 34, 34, .88) 0%, rgba(5, 34, 34, .43) 31%, rgba(5, 34, 34, .02) 65%), linear-gradient(0deg, rgba(5,27,28,.72), transparent 34%, rgba(2, 25, 27, .26)); inset: 0; position: absolute; z-index: 2; }
+:global(html[data-theme="dark"]) .site .heroWash { background: linear-gradient(90deg, rgba(25,30,78,.82) 0%, rgba(25,30,78,.3) 31%, rgba(25,30,78,.02) 65%), linear-gradient(0deg, rgba(25,30,78,.66), transparent 38%, rgba(25,30,78,.14)); }
+.heroWash::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); content: ""; inset: 0; mix-blend-mode: soft-light; opacity: .35; pointer-events: none; position: absolute; }
+.heroWayfinding { inset: 0; opacity: .46; pointer-events: none; position: absolute; transition: opacity .5s ease; z-index: 8; }
+.heroExploring .heroWayfinding, .heroWayfinding:focus-within { opacity: 1; }
+.heroOrbitMap { fill: none; height: 100%; inset: 0; overflow: visible; pointer-events: none; position: absolute; stroke: rgba(239,233,215,.4); stroke-dasharray: 2 9; stroke-width: .65; width: 100%; }
+.heroOrbitMap ellipse { opacity: .34; }
+.heroOrbitMap path { opacity: .18; }
+.heroHub { align-items: center; display: flex; gap: 9px; left: 53.5%; opacity: 0; pointer-events: none; position: absolute; top: 49.3%; transform: translate(-50%, -50%) scale(.9); transition: opacity .35s, transform .5s; }
+.heroExploring .heroHub { opacity: 0; transform: translate(-50%, -50%) scale(1); }
+.heroHub > i { background: var(--coral); border: 1px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 7px rgba(238,60,120,.18); height: 9px; width: 9px; }
+.heroHub > span { display: none; }
+.heroHub small { font-size: 5px; font-weight: 400; opacity: .7; }
+.heroWaypoint { color: var(--paper); height: 52px; pointer-events: auto; position: absolute; text-decoration: none; width: 52px; }
+.heroWaypoint::after { backdrop-filter: blur(8px); background: rgba(5,34,34,.74); border: 1px solid rgba(239,233,215,.22); border-radius: 999px; content: attr(data-route); font-size: 7px; font-weight: 700; left: 43px; letter-spacing: .16em; opacity: 0; padding: 6px 9px 5px; pointer-events: none; position: absolute; text-shadow: 0 1px 7px var(--deep); top: 18px; transform: translateX(5px); transition: opacity .3s, transform .35s; white-space: nowrap; -webkit-backdrop-filter: blur(8px); }
+.heroExploring .heroWaypoint::after { opacity: 1; transform: translateX(0); }
+.heroWaypoint:hover::after, .heroWaypoint:focus-visible::after { opacity: 0; }
+.heroWaypoint > i { animation: waypointPulse 3.6s ease-in-out infinite; backdrop-filter: blur(3px); background: rgba(238,60,120,.72); border: 1px solid rgba(239,233,215,.94); border-radius: 50%; box-shadow: 0 0 0 7px rgba(238,60,120,.14), 0 0 13px rgba(238,60,120,.28); display: block; height: 14px; left: 19px; position: absolute; top: 19px; transition: background .25s, box-shadow .25s, transform .25s; width: 14px; -webkit-backdrop-filter: blur(3px); }
+.heroWaypoint > i::after { border: 1px solid rgba(239,233,215,.72); border-radius: 50%; content: ""; inset: -7px; position: absolute; }
+.heroExploring .heroWaypoint > i { background: var(--coral); box-shadow: 0 0 0 8px rgba(238,60,120,.17); }
+.heroWaypoint:hover > i, .heroWaypoint:focus-visible > i { background: var(--coral); box-shadow: 0 0 0 9px rgba(238,60,120,.2); transform: scale(1.18); }
+.heroWaypoint:focus-visible { outline: 1px solid var(--paper); outline-offset: 5px; }
+.waypointShip { left: 25.1%; top: 69.5%; }
+.waypointCitadel { left: 69%; top: 21%; }
+.waypointProcession { left: 54.6%; top: 70.2%; }
+.waypointLabel { backdrop-filter: blur(9px); background: rgba(5,34,34,.68); border-left: 1px solid var(--coral); display: flex; flex-direction: column; left: 38px; min-width: 210px; opacity: 0; padding: 10px 12px; pointer-events: none; position: absolute; top: 29px; transform: translate(8px, -50%); transition: opacity .3s, transform .35s; -webkit-backdrop-filter: blur(9px); }
+.heroWaypoint:hover .waypointLabel, .heroWaypoint:focus-visible .waypointLabel { opacity: 1; transform: translate(4px, -50%); }
+.waypointLabel small { color: var(--coral); font-size: 6px; letter-spacing: .16em; margin-bottom: 4px; }
+.waypointLabel strong { font-family: var(--font-body), serif; font-size: 17px; font-weight: 500; line-height: 1; }
+.waypointLabel em { font-family: var(--font-body), serif; font-size: 11px; font-style: normal; line-height: 1.2; margin-top: 5px; opacity: .72; }
+.waypointCitadel .waypointLabel { left: auto; right: 38px; text-align: right; }
+.waypointCitadel::after { left: auto; right: 43px; text-align: right; }
+@keyframes waypointPulse { 50% { box-shadow: 0 0 0 9px rgba(239,233,215,0); } }
+.heroCopy { left: clamp(24px, 7.5vw, 140px); opacity: var(--neo-copy-opacity, 1); position: absolute; top: clamp(138px, 17vh, 172px); transform: translate3d(var(--neo-title-x, 0), var(--neo-copy-y, 0), 0) translateX(var(--neo-track-title-x, 0)); transition: transform .3s cubic-bezier(.2,.7,.2,1); width: min(720px, 70vw); z-index: 4; }
+.heroTitle { color: inherit; display: block; position: relative; text-align: left; transform: translateX(clamp(-100px, -5.5vw, -64px)); transition: transform .3s cubic-bezier(.2,.7,.2,1); width: max-content; }
+.heroExploring .heroTitle { transform: translateX(0); }
+.heroTitle > span { bottom: -27px; font-family: var(--font-mono), monospace; font-size: 7px; left: 5px; letter-spacing: .18em; opacity: 0; position: absolute; transition: opacity .2s, transform .2s; }
+.heroTitle:hover > span, .heroTitle:focus-within > span { opacity: .7; transform: translateX(6px); }
+.heroTitle h1:focus-visible { outline: 1px solid var(--paper); outline-offset: 12px; }
+.heroSupplement { bottom: clamp(74px, 9vh, 104px); left: clamp(24px, 7.5vw, 140px); opacity: var(--neo-copy-opacity, 1); position: absolute; transform: translate3d(0, var(--neo-copy-y, 0), 0); transition: opacity .3s ease; width: min(540px, 75vw); z-index: 7; }
+.heroExploring .heroSupplement { opacity: 0; pointer-events: none; }
+.eyebrow { align-items: center; display: flex; font-size: 10px; font-weight: 700; letter-spacing: .19em; margin: 0 0 20px; text-transform: uppercase; }
+.eyebrow span { background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 5.625px rgba(238,60,120,.2); height: 7px; margin-right: 14px; width: 7px; }
+.hero h1 { font-family: var(--font-retalic), var(--font-display), sans-serif; font-size: clamp(74px, 10vw, 160px); font-weight: 500; letter-spacing: 0; line-height: 1; margin: 0; text-shadow: 0 4px 8px rgba(25,30,78,.3); }
+.hero h1 em { color: var(--coral); font-family: var(--font-display), sans-serif; font-style: italic; font-weight: 500; }
+.heroDek { font-family: var(--font-body), serif; font-size: clamp(18px, 1.65vw, 25px); line-height: 1.28; margin: 35px 0 0; max-width: 520px; }
+.discover { align-items: center; color: inherit; display: flex; font-size: 10px; gap: 18px; letter-spacing: .16em; margin-top: 40px; text-decoration: none; text-transform: uppercase; width: max-content; }
+.discover i { align-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: flex; font-style: normal; height: 42px; justify-content: center; transition: transform .25s, background .25s; width: 42px; }
+.discover:hover i { background: var(--coral); border-color: var(--coral); transform: translateY(5px); }
+.heroIndex { bottom: 44px; display: grid; grid-template-columns: auto auto; opacity: var(--neo-meta-opacity, 1); position: absolute; right: clamp(24px, 4vw, 72px); text-align: right; transform: translateY(var(--neo-meta-y, 0)); z-index: 7; }
+.heroIndex span { font-size: 8px; letter-spacing: .18em; padding-top: 8px; }
+.heroIndex strong { font-family: var(--font-display), serif; font-size: 44px; font-weight: 400; grid-row: span 2; line-height: 1; margin-left: 15px; }
+.heroScrollCue { display: none; margin: 0; }
+.heroForeground { inset: -7% -7% -14%; pointer-events: none; transform-origin: center 58%; transition: transform var(--neo-curtain-speed, .18s) cubic-bezier(.16,.76,.18,1); position: absolute; z-index: 6; }
+.heroForegroundLeft { clip-path: inset(0 50% 0 0); transform: translate3d(calc(72px - var(--neo-curtain-open, 0px)), var(--neo-fore-y, 0px), 0) scale(1.1); }
+.heroForegroundRight { clip-path: inset(0 0 0 50%); transform: translate3d(calc(-58px + var(--neo-curtain-open, 0px)), var(--neo-fore-y, 0px), 0) scale(1.1); }
+.foregroundImage { object-fit: cover; object-position: 48% 58%; }
+.nightMode .foregroundImage { filter: brightness(.46) saturate(.82) hue-rotate(7deg) contrast(1.14); }
+
+.signalBar { background: var(--coral); color: var(--paper); overflow: hidden; padding: 14px 0 13px; }
+.signalBar div { align-items: center; animation: signal 28s linear infinite; display: flex; gap: 30px; width: max-content; }
+.signalBar span { font-size: 10px; font-weight: 700; letter-spacing: .16em; white-space: nowrap; }
+.signalBar i { background: currentColor; display: block; flex: 0 0 auto; height: 32px; -webkit-mask: url("/images/icons/venture/ico-logo.svg") center / contain no-repeat; mask: url("/images/icons/venture/ico-logo.svg") center / contain no-repeat; width: 32px; }
+@keyframes signal { to { transform: translateX(-50%); } }
+
+.prologue { background-image: radial-gradient(circle at 82% 16%, rgba(16,45,44,.022) 0 1px, transparent 1.5px), repeating-linear-gradient(107deg, transparent 0 21px, rgba(16,45,44,.01) 22px, transparent 23px 46px); background-size: 29px 31px, auto; display: grid; grid-template-columns: minmax(270px, .7fr) 1.6fr; margin: 0 auto; max-width: 1440px; overflow: hidden; padding: clamp(110px, 14vw, 210px) clamp(24px, 7vw, 110px); position: relative; }
+.prologue::before { border: 1px solid rgba(16,45,44,.07); border-radius: 50%; content: ""; height: clamp(290px, 37vw, 540px); pointer-events: none; position: absolute; right: clamp(-250px, -10vw, -80px); top: clamp(20px, 5vw, 80px); transform: rotate(19deg); width: clamp(520px, 64vw, 920px); }
+.prologue::after { background: radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(16,45,44,.08) 22px 23px, transparent 24px 49px, rgba(16,45,44,.055) 50px 51px, transparent 52px), linear-gradient(90deg, transparent calc(50% - .5px), rgba(16,45,44,.05) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(16,45,44,.05) 50%, transparent calc(50% + .5px)); content: ""; height: 150px; opacity: .72; pointer-events: none; position: absolute; right: clamp(28px, 8vw, 120px); top: clamp(74px, 10vw, 145px); transform: rotate(7deg); width: 150px; }
+.prologue > * { position: relative; z-index: 1; }
+.guildBuilders { --artifact-opacity: .105; height: auto; mix-blend-mode: multiply; opacity: var(--artifact-opacity); pointer-events: none; position: absolute; right: clamp(-110px, -4vw, -36px); top: clamp(250px, 27vw, 410px); width: clamp(300px, 38vw, 560px); z-index: 0; }
+.sectionArriving .guildBuilders { animation: artifactArrival 1.8s cubic-bezier(.16,.76,.18,1) both; }
+@keyframes artifactArrival {
+ 0% { opacity: .015; }
+ 30% { opacity: .23; }
+ 100% { opacity: var(--artifact-opacity); }
+}
+.prologueMark { align-items: center; display: flex; flex-direction: column; justify-content: center; }
+.prologueMark > span { font-size: 8px; letter-spacing: .22em; margin-top: 20px; }
+.orbit { align-items: center; border: 1px solid rgba(16,45,44,.28); border-radius: 50%; display: flex; height: 210px; justify-content: center; position: relative; width: 210px; }
+.orbit::before, .orbit::after { border: 1px solid rgba(16,45,44,.16); border-radius: 50%; content: ""; inset: 17px; position: absolute; }
+.orbit::after { animation: orbit 9s linear infinite; border-color: var(--coral) transparent transparent; inset: -1px; }
+.orbit .sigil { height: 76px; margin: 0; width: 76px; }
+.orbit .swordMark { height: 50px; width: 54px; }
+@keyframes orbit { to { transform: rotate(360deg); } }
+.sectionLabel { font-size: 9px; font-weight: 700; letter-spacing: .2em; margin: 0 0 30px; text-transform: uppercase; }
+.sectionArriving .sectionLabel { animation: arrivalSignal 1.8s cubic-bezier(.16,.76,.18,1) both; }
+@keyframes arrivalSignal {
+ 0% { color: inherit; letter-spacing: .34em; opacity: .3; text-shadow: 0 0 0 rgba(238,60,120,0); }
+ 28% { color: var(--coral); opacity: 1; text-shadow: 0 0 18px rgba(238,60,120,.42); }
+ 100% { color: inherit; letter-spacing: .2em; opacity: 1; text-shadow: 0 0 0 rgba(238,60,120,0); }
+}
+.prologue h2, .practice h2, .fieldIntro h2, .contact h2 { font-family: var(--font-display), serif; font-size: clamp(54px, 7vw, 108px); font-weight: 500; letter-spacing: -.055em; line-height: .82; margin: 0; }
+.prologue h2 em, .practice h2 em, .fieldIntro h2 em, .contact h2 em, .creed em { color: var(--coral); font-weight: 400; }
+.prologueBody { border-top: 1px solid rgba(16,45,44,.3); display: grid; gap: 50px; grid-template-columns: 1fr auto; margin-top: 56px; padding-top: 30px; }
+.prologueBody > p:first-child { font-family: var(--font-body), serif; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; margin: 0; max-width: 680px; }
+.guildActions { align-items: center; display: flex; flex-wrap: wrap; gap: 22px 30px; margin-top: 38px; }
+.stat { align-items: center; display: flex; gap: 15px; margin: 0; }
+.stat strong { color: var(--coral); font-family: var(--font-display), serif; font-size: 68px; font-weight: 400; line-height: .8; }
+.stat span { font-size: 8px; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
+.guildRoster { grid-column: 1 / -1; margin-top: clamp(72px, 7vw, 108px); min-width: 0; }
+.rosterHeading { align-items: end; border-top: 1px solid rgba(16,45,44,.3); display: flex; justify-content: space-between; padding-top: 28px; }
+.rosterHeading .sectionLabel { margin-bottom: 20px; }
+.rosterHeading h3 { font-family: var(--font-display), serif; font-size: clamp(44px, 5vw, 72px); font-weight: 500; letter-spacing: -.045em; line-height: .9; margin: 0; }
+.rosterAside { max-width: 390px; }
+.rosterAside p { font-family: var(--font-body), serif; font-size: 16px; line-height: 1.45; margin: 0; }
+.rosterAside a:not(.pill) { align-items: center; border-bottom: 1px solid currentColor; color: inherit; display: flex; font-size: 8px; font-weight: 700; justify-content: space-between; letter-spacing: .14em; margin-top: 23px; padding-bottom: 10px; text-decoration: none; text-transform: uppercase; }
+.rosterAside a span { font-size: 15px; transition: transform .2s; }
+.rosterAside a:hover span { transform: translate(3px, -3px); }
+.stewardTrack { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); margin-top: 55px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin; }
+.stewardCard { border-bottom: 1px solid rgba(16,45,44,.35); border-left: 1px solid rgba(16,45,44,.35); color: inherit; display: block; min-width: 190px; padding: 18px; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
+.stewardCard:last-child { border-right: 1px solid rgba(16,45,44,.35); }
+.stewardCard:hover { background: var(--deep); color: var(--paper); transform: translateY(-8px); }
+.stewardTop { display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .15em; }
+.stewardTop i { font-size: 16px; font-style: normal; }
+.stewardPortrait { aspect-ratio: 1; background: var(--sky); border-radius: 50%; margin: 26px auto; max-width: 150px; overflow: hidden; position: relative; }
+.stewardPortrait::after { border: 1px solid rgba(16,45,44,.25); border-radius: 50%; content: ""; inset: 8px; pointer-events: none; position: absolute; }
+.stewardPortrait img { filter: saturate(.75) contrast(1.04); object-fit: cover; }
+.stewardCard > p { color: var(--coral); font-size: 7px; letter-spacing: .15em; margin: 0 0 8px; text-transform: uppercase; }
+.stewardCard h4 { font-family: var(--font-display), serif; font-size: 30px; font-weight: 500; line-height: 1; margin: 0 0 10px; }
+.stewardCard > small { font-size: 7px; letter-spacing: .12em; opacity: .65; }
+.memberMarquee { border-bottom: 1px solid rgba(16,45,44,.3); margin-top: 68px; overflow-x: auto; padding: 16px 0; scrollbar-width: none; }
+.memberMarquee::-webkit-scrollbar { display: none; }
+.memberRail { animation: memberDrift 68s linear infinite; display: flex; gap: 14px; width: max-content; }
+.memberMarquee:hover .memberRail { animation-play-state: paused; }
+.memberRail > a, .memberRail > div { align-items: center; border: 1px solid rgba(16,45,44,.28); color: inherit; display: flex; flex: 0 0 auto; gap: 11px; min-width: 190px; padding: 7px 12px 7px 7px; text-decoration: none; transition: background .2s, color .2s; }
+.memberRail > a:hover { background: var(--coral); border-color: var(--coral); color: var(--paper); }
+.memberRail img { background: var(--sky); border-radius: 50%; filter: saturate(.65); height: 48px; object-fit: cover; width: 48px; }
+.memberRail span { display: flex; flex-direction: column; min-width: 95px; }
+.memberRail strong { font-family: var(--font-display), serif; font-size: 17px; font-weight: 500; line-height: 1; }
+.memberRail small { font-size: 7px; letter-spacing: .1em; margin-top: 5px; opacity: .65; text-transform: uppercase; }
+.memberRail i { font-size: 13px; font-style: normal; margin-left: auto; }
+.rosterFootnote { font-size: 7px; letter-spacing: .15em; margin: 12px 0 0; opacity: .58; }
+@keyframes memberDrift { to { transform: translateX(calc(-50% - 7px)); } }
+
+.practice { background: var(--deep); color: var(--paper); padding: clamp(100px, 12vw, 180px) clamp(24px, 6vw, 96px); }
+.practiceHeading { align-items: end; display: grid; gap: 30px; grid-template-columns: 1fr auto; margin: 0 auto 80px; max-width: 1300px; }
+.practiceHeading .sectionLabel { grid-column: 1 / -1; }
+.practiceAside, .fieldAside { align-self: end; }
+.practiceAside p, .fieldAside p { font-family: var(--font-body), serif; font-size: 18px; line-height: 1.4; margin: 0; max-width: 280px; }
+.practiceAside a:not(.pill), .fieldAside a:not(.pill) { align-items: center; border-bottom: 1px solid currentColor; color: inherit; display: flex; font-size: 8px; font-weight: 700; justify-content: space-between; letter-spacing: .14em; margin-top: 26px; padding-bottom: 10px; text-decoration: none; text-transform: uppercase; width: min(100%, 280px); }
+.practiceAside a span, .fieldAside a span { font-size: 15px; transition: transform .2s; }
+.practiceAside a:hover span { transform: translate(3px, 3px); }
+.fieldAside a:hover span { transform: translate(3px, -3px); }
+.disciplineGrid { border-left: 1px solid rgba(239,233,215,.22); display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1300px; }
+.discipline { border-right: 1px solid rgba(239,233,215,.22); min-height: 560px; padding: 28px clamp(24px, 3vw, 46px) 40px; position: relative; transition: background .3s, color .3s, transform .3s; }
+.discipline:hover { background: var(--sky); color: var(--ink); transform: translateY(-10px); }
+.disciplineTop { display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .15em; }
+.disciplineTop i { color: var(--coral); font-size: 7px; font-style: normal; }
+.disciplineArt { align-items: end; aspect-ratio: 4 / 3; display: flex; justify-content: center; margin: 26px -12px 30px; overflow: hidden; position: relative; }
+.disciplineArt::after { background: linear-gradient(90deg, transparent, rgba(239,233,215,.28), transparent); bottom: 0; content: ""; height: 1px; left: 3%; position: absolute; width: 94%; }
+.disciplineArt img { height: 100%; object-fit: contain; transform: scale(.96); transition: filter .35s, transform .45s cubic-bezier(.2,.8,.2,1); width: 100%; }
+.discipline:hover .disciplineArt img { filter: saturate(1.08) contrast(1.03); transform: scale(1.02) translateY(-3px); }
+.discipline:hover .disciplineArt::after { background: linear-gradient(90deg, transparent, rgba(16,45,44,.28), transparent); }
+.disciplineTag { color: var(--coral); font-size: 8px !important; font-weight: 700; letter-spacing: .15em; }
+.spearEndorsement { align-items: center; color: var(--paper); display: flex; font-family: var(--font-mono), monospace !important; font-size: 6px !important; letter-spacing: .15em; margin: 0 0 20px !important; opacity: .6 !important; }
+.spearEndorsement .sigil { color: var(--coral); height: 27px; margin-right: 9px; width: 27px; }
+.spearEndorsement .swordMark { height: 17px; width: 19px; }
+.discipline:hover .spearEndorsement { color: var(--ink); }
+.discipline h3 { font-family: var(--font-display), serif; font-size: clamp(30px, 3vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: .95; margin: 15px 0 20px; }
+.discipline > p:not(.disciplineTag) { font-family: var(--font-body), serif; font-size: 17px; line-height: 1.45; margin: 0; opacity: .78; }
+.discipline > a, .spearActions > a { border-bottom: 1px solid currentColor; color: inherit; display: grid; font-size: 8px; font-weight: 700; gap: 4px 10px; grid-template-columns: 1fr auto; letter-spacing: .14em; margin-top: 30px; padding-bottom: 10px; text-decoration: none; text-transform: uppercase; }
+.discipline > a span, .spearActions > a span { font-size: 14px; grid-column: 2; grid-row: 1; transition: transform .2s; }
+.discipline > a:hover span, .spearActions > a:hover span { transform: translate(3px, -3px); }
+.spearActions > a + a { margin-top: 18px; }
+.spearActions small { font-size: 6px; font-weight: 400; grid-column: 1 / -1; letter-spacing: .12em; opacity: .5; }
+.problemSpear { background: rgba(239,233,215,.06); }
+.problemSpear .disciplineArt img { filter: saturate(.82); }
+.problemSpear:hover .disciplineArt img { filter: saturate(1) contrast(1.03); }
+
+.fieldNotes { background-color: var(--sky); background-image: radial-gradient(circle at 14% 78%, rgba(16,45,44,.025) 0 1px, transparent 1.5px); background-size: 27px 33px; overflow: hidden; padding: clamp(100px, 12vw, 180px) clamp(24px, 6vw, 96px); position: relative; }
+.fieldNotes::before { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(16,45,44,.08) 25%); content: ""; inset: 0; pointer-events: none; position: absolute; }
+.fieldNotes::after { border: 1px solid rgba(16,45,44,.09); border-radius: 50%; bottom: clamp(-330px, -20vw, -120px); content: ""; height: clamp(360px, 44vw, 650px); left: clamp(-210px, -9vw, -60px); pointer-events: none; position: absolute; transform: rotate(-11deg); width: clamp(760px, 86vw, 1280px); }
+.fieldNotes > * { position: relative; z-index: 1; }
+.fieldIntro { display: grid; grid-template-columns: 1fr 300px; margin: 0 auto 85px; max-width: 1300px; position: relative; }
+.fieldIntro::after { background: radial-gradient(circle, transparent 0 15px, rgba(16,45,44,.095) 16px 17px, transparent 18px), linear-gradient(90deg, transparent calc(50% - .5px), rgba(16,45,44,.075) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(16,45,44,.075) 50%, transparent calc(50% + .5px)); content: ""; height: 92px; opacity: .7; pointer-events: none; position: absolute; right: clamp(255px, 25vw, 375px); top: -18px; transform: rotate(12deg); width: 92px; }
+.fieldIntro .sectionLabel { grid-column: 1 / -1; }
+.networkProof { max-width: 1267px; margin: 0 auto 48px; padding: 24px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; color: var(--ink); }
+.networkProof > p { font-family: var(--font-body), sans-serif; font-size: 17px; line-height: 1.5; margin: 0 0 24px; }
+.networkProof ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; list-style: none; margin: 0; padding: 0; }
+.networkProof li { display: flex; align-items: center; justify-content: center; min-width: 0; height: 56px; }
+.networkProof img { width: auto; height: auto; max-width: min(150px, 100%); max-height: 44px; filter: brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(1335%) hue-rotate(129deg) brightness(92%) contrast(94%); }
+.networkProof small { display: block; font-size: 11px; line-height: 1.5; margin-top: 24px; }
+:global(html[data-theme="dark"]) .site .networkProof { color: var(--paper); }
+:global(html[data-theme="dark"]) .site .networkProof img { filter: brightness(0) invert(94%) sepia(12%) saturate(332%) hue-rotate(353deg); }
+@media (max-width: 800px) {
+ .networkProof { margin: 0 22px 32px; }
+ .networkProof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+}
+@media (min-width: 801px) and (max-width: 1500px) {
+ .networkProof { margin-left: 5vw; margin-right: 5vw; }
+}
+.fieldAside p { line-height: 1.45; max-width: 300px; }
+.fieldControls { align-items: center; display: flex; justify-content: space-between; margin: 0 auto 24px; max-width: 1300px; position: relative; }
+.fieldControls p { font-size: 9px; letter-spacing: .15em; margin: 0; }
+.fieldControls p strong { color: var(--coral); font-family: var(--font-display), serif; font-size: 30px; font-weight: 400; }
+.fieldTrack { display: flex; gap: clamp(16px, 2vw, 32px); margin-right: clamp(-96px, -6vw, -24px); overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 clamp(24px, 6vw, 96px) 24px 0; position: relative; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
+.fieldTrack::-webkit-scrollbar { display: none; }
+.featuredMission { background: var(--paper); display: grid; flex: 0 0 min(1120px, 82vw); grid-template-columns: 1.05fr .95fr; min-height: 680px; position: relative; scroll-snap-align: start; }
+.missionArt { min-height: 680px; overflow: hidden; position: relative; }
+.missionImage { object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
+.featuredMission:hover .missionImage { transform: scale(1.035); }
+.artBadge { background: var(--acid); font-size: 8px; left: 24px; letter-spacing: .15em; padding: 10px 12px; position: absolute; top: 24px; }
+.missionCopy { display: flex; flex-direction: column; padding: clamp(42px, 5vw, 78px); }
+.missionNumber { font-size: 9px; letter-spacing: .16em; margin-left: auto; }
+.missionType { color: var(--coral); font-size: 8px; font-weight: 700; letter-spacing: .14em; margin: auto 0 18px; }
+.missionCopy h3 { font-family: var(--font-display), serif; font-size: clamp(44px, 4.6vw, 70px); font-weight: 500; letter-spacing: -.05em; line-height: .86; margin: 0 0 30px; }
+.missionCopy > p:not(.missionType) { font-family: var(--font-body), serif; font-size: 18px; line-height: 1.45; margin: 0 0 36px; }
+.missionCopy > a { border-bottom: 1px solid currentColor; color: inherit; display: flex; font-size: 9px; justify-content: space-between; letter-spacing: .14em; padding-bottom: 12px; text-decoration: none; text-transform: uppercase; }
+.missionCopy > a span { font-size: 16px; transition: transform .2s; }
+.missionCopy > a:hover span { transform: translate(4px,-4px); }
+.missionCopy dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 50px 0 0; }
+.missionCopy dl div { border-left: 1px solid rgba(16,45,44,.25); padding-left: 12px; }
+.missionCopy dt { font-size: 7px; letter-spacing: .16em; opacity: .6; }
+.missionCopy dd { font-family: var(--font-display), serif; font-size: 25px; margin: 5px 0 0; }
+
+.creed { background: var(--coral); color: var(--paper); overflow: hidden; padding: clamp(100px, 13vw, 190px) 24px 50px; position: relative; text-align: center; }
+.creed > *:not(.creedMoons) { position: relative; z-index: 2; }
+.creedMoons { animation: creedOrbit 24s ease-in-out infinite alternate; height: auto; left: 50%; mix-blend-mode: soft-light; opacity: .3; pointer-events: none; position: absolute; top: 48%; transform: translate(-50%, -50%) rotate(-2deg) scale(1.04); width: min(1536px, 116vw); z-index: 0; }
+.creed blockquote { font-family: var(--font-display), serif; font-size: clamp(58px, 8.5vw, 132px); font-weight: 500; letter-spacing: -.055em; line-height: .83; margin: 55px auto 130px; max-width: 1300px; }
+.creed em { color: var(--deep); }
+.creedFooter { align-items: center; border-top: 1px solid rgba(239,233,215,.4); display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .18em; margin: 0 auto; max-width: 1300px; padding-top: 28px; }
+.creedFooter .sigil { height: 48px; margin: 0; width: 48px; }
+.creedFooter .swordMark { height: 31px; width: 34px; }
+
+@keyframes creedFlight {
+ from { transform: translate(-52%, -48%) rotate(-4deg) scale(.98); }
+ to { transform: translate(-48%, -52%) rotate(-1deg) scale(1.02); }
+}
+
+@keyframes creedOrbit {
+ from { transform: translate(-51%, -49%) rotate(-2deg) scale(1.04); }
+ to { transform: translate(-49%, -51%) rotate(1deg) scale(1.07); }
+}
+
+.site .teamWall { height: auto; min-width: 0; overflow: hidden; }
+.teamWall .memberMarquee { cursor: grab; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: auto; }
+.teamWall .memberMarquee:active { cursor: grabbing; }
+.memberMarquee:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
+.memberLoop { display: flex; gap: 14px; width: max-content; }
+.teamWall .memberRail { animation: none; transform: none; flex-shrink: 0; user-select: none; }
+.memberRail > a:focus-visible { outline: 3px solid var(--coral); outline-offset: -4px; }
+.teamMotionToggle { background: transparent; border: 0; color: inherit; cursor: pointer; font-family: var(--font-mono), monospace; font-size: 11px; margin: 8px 12px; padding: 5px; text-decoration: underline; text-underline-offset: 4px; }
+:global(html[data-theme="dark"]) .site .teamNetwork { color: var(--paper); }
+:global(html[data-theme="dark"]) .site .teamCopy h3,
+:global(html[data-theme="dark"]) .site .memberRail small { color: var(--paper); }
+@media (prefers-reduced-motion: reduce) {
+ .teamMotionToggle { display: none; }
+ .memberRail[aria-hidden="true"] { display: none; }
+ .creedMoons { animation: none; }
+}
+
+.contact { align-items: start; background-color: var(--paper); background-image: radial-gradient(circle at 16% 22%, rgba(16,45,44,.027) 0 1px, transparent 1.5px), radial-gradient(circle at 74% 68%, rgba(16,45,44,.018) 0 1px, transparent 1.4px), repeating-linear-gradient(103deg, transparent 0 17px, rgba(16,45,44,.012) 18px, transparent 19px 38px); background-size: 23px 29px, 31px 37px, auto; display: grid; gap: clamp(60px, 8vw, 130px); grid-template-columns: minmax(340px, .82fr) minmax(540px, 1fr); overflow: hidden; padding: clamp(100px, 12vw, 180px) clamp(24px, 7vw, 110px); position: relative; }
+.contactDruid { display: block; height: auto; margin: 0 0 34px; max-width: 506px; object-fit: cover; pointer-events: none; width: 100%; }
+.contact::before { border: 1px solid rgba(16,45,44,.075); border-radius: 50%; content: ""; height: clamp(380px, 52vw, 760px); left: clamp(-320px, -18vw, -120px); pointer-events: none; position: absolute; top: clamp(20px, 6vw, 90px); transform: rotate(-17deg); width: clamp(520px, 72vw, 1050px); }
+.contact::after { background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(16,45,44,.065) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(16,45,44,.065) 50%, transparent calc(50% + .5px)); content: ""; height: 74px; left: clamp(22px, 5vw, 80px); opacity: .65; pointer-events: none; position: absolute; top: clamp(130px, 17vw, 255px); transform: rotate(-4deg); width: 74px; }
+.contact > * { position: relative; z-index: 1; }
+
+.contactIntro { position: sticky; top: 70px; }
+.contact h2.contactHeadline { font-size: clamp(50px, 5.7vw, 88px); }
+.contactHeadline span { display: block; white-space: nowrap; }
+.contactHeadline span:last-child { margin-top: .09em; }
+.contactDek { font-family: var(--font-body), serif; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; margin: 42px 0 0; max-width: 590px; }
+.contactProtocol { border-top: 1px solid rgba(16,45,44,.3); display: grid; grid-template-columns: repeat(3, 1fr); margin: 70px 0 0; padding-top: 18px; }
+.contactProtocol div { border-left: 1px solid rgba(16,45,44,.25); padding-left: 12px; }
+.contactProtocol dt { font-size: 7px; letter-spacing: .16em; opacity: .55; }
+.contactProtocol dd { font-family: var(--font-display), serif; font-size: 16px; margin: 7px 0 0; }
+.contactProtocol dd span { animation: signalBlink 1.2s steps(2) infinite; background: var(--coral); border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }
+.contactFormShell { background: var(--deep); box-shadow: 20px 20px 0 var(--sky); color: var(--paper); min-width: 0; padding: clamp(34px, 4vw, 62px); }
+.formCoordinates { border-bottom: 1px solid rgba(239,233,215,.2); display: flex; font-size: 7px; justify-content: space-between; letter-spacing: .17em; margin-bottom: 44px; padding-bottom: 18px; }
+.contactFormShell :global(.text-heading-lg) { color: var(--paper) !important; font-family: var(--font-display), serif !important; font-size: clamp(42px, 4vw, 62px) !important; font-weight: 400 !important; letter-spacing: -.04em; line-height: .9 !important; margin-bottom: 42px !important; }
+.contactFormShell :global(.text-heading-md) { color: var(--coral); font-family: var(--font-display), serif; font-size: clamp(28px, 2.4vw, 38px); letter-spacing: -.025em; }
+.contactFormShell :global(.contact-form-label) { color: var(--paper); font-family: var(--font-mono), monospace; font-size: 8px; letter-spacing: .13em; min-height: 20px; text-transform: uppercase; }
+.contactFormShell :global(.contact-form-input), .contactFormShell :global(.contact-form-textarea), .contactFormShell :global(.contact-form-select) { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(239,233,215,.38) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--paper) !important; font-family: var(--font-body), serif !important; font-size: 17px !important; height: 48px; padding-left: 0 !important; padding-right: 0 !important; }
+.contactFormShell :global(.contact-form-textarea) { min-height: 115px; padding-top: 12px !important; resize: vertical; }
+.contactFormShell :global(.contact-form-input)::placeholder, .contactFormShell :global(.contact-form-textarea)::placeholder { color: rgba(239,233,215,.42) !important; }
+.contactFormShell :global(.contact-btn-active) { background: var(--coral) !important; border: 0; border-radius: 100px !important; color: var(--paper) !important; font-family: var(--font-mono), monospace !important; font-size: 9px !important; height: 50px !important; letter-spacing: .13em !important; padding: 0 24px !important; transition: background .2s, color .2s, transform .2s !important; width: auto !important; }
+.contactFormShell :global(.contact-btn-active):hover { background: var(--paper) !important; color: var(--ink) !important; transform: translateY(-2px); }
+.contactFormShell :global(.hire-us-wizard) > div:first-child { border-bottom: 1px solid rgba(239,233,215,.2); gap: 8px; margin-bottom: 34px; padding-bottom: 24px; }
+.contactFormShell :global(.hire-us-wizard) > div:first-child > div { background: transparent !important; border: 1px solid rgba(239,233,215,.32); border-radius: 100px !important; color: var(--paper) !important; font-family: var(--font-mono), monospace; font-size: 8px; padding-left: 10px; padding-right: 13px; }
+.contactFormShell :global(.hire-us-wizard) > div:first-child > div > span:first-child { background: var(--coral) !important; color: var(--paper) !important; }
+.contactFormShell :global([role="radiogroup"]) { flex-wrap: wrap; }
+.contactFormShell :global(button[role="combobox"]) { background: transparent; border-color: rgba(239,233,215,.38); color: var(--paper); }
+.contactFormShell :global(.contact-multiselect-badge) { background: var(--coral); }
+
+.footer { align-items: start; background: var(--deep); color: var(--paper); display: grid; gap: 50px; grid-template-columns: 1fr 1fr 1fr; padding: 70px clamp(24px, 5vw, 80px) 30px; }
+.footer > p { font-family: var(--font-display), serif; font-size: 22px; line-height: 1.15; margin: 0; }
+.socials { display: flex; flex-direction: column; gap: 10px; justify-self: end; }
+.socials a { color: inherit; font-size: 9px; letter-spacing: .13em; text-decoration: none; }
+.footer small { border-top: 1px solid rgba(239,233,215,.2); font-size: 7px; grid-column: 1 / -1; letter-spacing: .14em; opacity: .6; padding-top: 25px; }
+
+/* The paired Figma frame uses the same accents over a canonical navy ground. */
+:global(html[data-theme="dark"]) .site { background: var(--color-navy); color: var(--color-cream); }
+.prologue, .practice, .fieldNotes, .featuredMission, .creed, .contact, .footer { transition: background-color .9s ease, color .9s ease, border-color .9s ease; }
+:global(html[data-theme="dark"]) .site .signalBar { background: var(--color-pink); }
+
+:global(html[data-theme="dark"]) .site .prologue {
+ background-color: var(--color-navy);
+ background-image: radial-gradient(circle at 82% 16%, rgba(184,224,223,.07) 0 1px, transparent 1.5px), repeating-linear-gradient(107deg, transparent 0 21px, rgba(239,233,215,.018) 22px, transparent 23px 46px);
+ color: var(--color-cream);
+}
+:global(html[data-theme="dark"]) .site .keepers,
+:global(html[data-theme="dark"]) .site .teamNetwork {
+ background: var(--color-navy);
+ color: var(--color-cream);
+}
+:global(html[data-theme="dark"]) .site .statsBand { background: var(--color-navy); }
+:global(html[data-theme="dark"]) .site .keepers .stewardCard,
+:global(html[data-theme="dark"]) .site .teamNetwork .memberRail > a,
+:global(html[data-theme="dark"]) .site .teamNetwork .memberRail > div { border-color: rgba(239,233,215,.25); }
+:global(html[data-theme="dark"]) .site .prologue::before { border-color: rgba(184,224,223,.13); }
+:global(html[data-theme="dark"]) .site .prologue::after { background: radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(184,224,223,.14) 22px 23px, transparent 24px 49px, rgba(184,224,223,.08) 50px 51px, transparent 52px), linear-gradient(90deg, transparent calc(50% - .5px), rgba(239,233,215,.09) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(239,233,215,.09) 50%, transparent calc(50% + .5px)); }
+:global(html[data-theme="dark"]) .site .orbit { border-color: rgba(184,224,223,.42); }
+:global(html[data-theme="dark"]) .site .orbit::before { border-color: rgba(239,233,215,.18); }
+:global(html[data-theme="dark"]) .site .prologueBody, :global(html[data-theme="dark"]) .site .rosterHeading, :global(html[data-theme="dark"]) .site .memberMarquee { border-color: rgba(239,233,215,.22); }
+:global(html[data-theme="dark"]) .site .stewardCard, :global(html[data-theme="dark"]) .site .stewardCard:last-child, :global(html[data-theme="dark"]) .site .memberRail > a, :global(html[data-theme="dark"]) .site .memberRail > div { border-color: rgba(239,233,215,.2); }
+:global(html[data-theme="dark"]) .site .stewardCard:hover { background: var(--color-dark-green); color: var(--color-cream); }
+:global(html[data-theme="dark"]) .site .stewardPortrait, :global(html[data-theme="dark"]) .site .memberRail img { background: var(--color-cyan); }
+:global(html[data-theme="dark"]) .site .stewardPortrait::after { border-color: rgba(184,224,223,.28); }
+:global(html[data-theme="dark"]) .site .stewardPortrait img, :global(html[data-theme="dark"]) .site .memberRail img { filter: saturate(.58) brightness(.82) contrast(1.08); }
+:global(html[data-theme="dark"]) .site .guildBuilders { filter: brightness(.8) saturate(.65) hue-rotate(8deg); mix-blend-mode: screen; opacity: .09; }
+
+:global(html[data-theme="dark"]) .site .practice { background: var(--color-navy); color: var(--color-cream); }
+:global(html[data-theme="dark"]) .site .discipline:hover { background: var(--color-dark-green); color: var(--color-cream); }
+:global(html[data-theme="dark"]) .site .discipline:hover .spearEndorsement { color: var(--color-cream); }
+:global(html[data-theme="dark"]) .site .problemSpear { background: rgba(184,224,223,.045); }
+
+:global(html[data-theme="dark"]) .site .fieldNotes {
+ background-color: var(--color-navy);
+ background-image: radial-gradient(circle at 14% 78%, rgba(184,224,223,.075) 0 1px, transparent 1.5px);
+ color: var(--color-cream);
+}
+:global(html[data-theme="dark"]) .site .fieldNotes::before { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(184,224,223,.075) 25%); }
+:global(html[data-theme="dark"]) .site .fieldNotes::after { border-color: rgba(184,224,223,.16); }
+:global(html[data-theme="dark"]) .site .fieldIntro::after { background: radial-gradient(circle, transparent 0 15px, rgba(184,224,223,.18) 16px 17px, transparent 18px), linear-gradient(90deg, transparent calc(50% - .5px), rgba(184,224,223,.12) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(184,224,223,.12) 50%, transparent calc(50% + .5px)); }
+:global(html[data-theme="dark"]) .site .featuredMission { background: var(--color-navy); color: var(--color-cream); }
+:global(html[data-theme="dark"]) .site .missionImage { filter: brightness(.7) saturate(.82) hue-rotate(5deg) contrast(1.08); }
+:global(html[data-theme="dark"]) .site .artBadge { background: var(--color-cyan); color: var(--color-navy); }
+:global(html[data-theme="dark"]) .site .missionCopy dl div { border-color: rgba(239,233,215,.22); }
+
+:global(html[data-theme="dark"]) .site .creed { background: var(--color-pink); color: var(--color-cream); }
+:global(html[data-theme="dark"]) .site .creed em { color: var(--color-cyan); text-shadow: 0 0 28px rgba(184,224,223,.2); }
+:global(html[data-theme="dark"]) .site .creedMoons { mix-blend-mode: normal; opacity: .8; }
+/* El Deep Blue del Guild es solo para light: en dark Figma 117:3966 pinta el
+ fondo con ese mismo azul, asi que el texto pasa a papyrus. */
+:global(html[data-theme="dark"]) .site .prologueCopy,
+:global(html[data-theme="dark"]) .site .prologue h2 { color: var(--paper); }
+
+:global(html[data-theme="dark"]) .site .contact {
+ background-color: var(--color-navy);
+ background-image: radial-gradient(circle at 16% 22%, rgba(184,224,223,.04) 0 1px, transparent 1.5px), radial-gradient(circle at 74% 68%, rgba(184,224,223,.03) 0 1px, transparent 1.4px), repeating-linear-gradient(103deg, transparent 0 17px, rgba(184,224,223,.018) 18px, transparent 19px 38px);
+ color: var(--color-cream);
+}
+:global(html[data-theme="dark"]) .site .contactFormShell { background: var(--color-navy); box-shadow: 20px 20px 0 var(--color-cyan); }
+
+:global(html[data-theme="dark"]) .site .footer { background: var(--color-navy); color: var(--color-cream); }
+
+.siteGlitching > .header, .siteGlitching > .hero { animation: realityGlitch 3.4s steps(1, end) both; transform-origin: center; will-change: filter, transform; }
+.siteGlitching::after { animation: glitchBands 3.4s steps(2, end) both; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(109,230,223,.12) 9px, transparent 10px 17px, rgba(238,60,120,.1) 18px, transparent 19px 26px); content: ""; inset: 0; mix-blend-mode: screen; pointer-events: none; position: fixed; z-index: 99; }
+
+.portalOverlay { background: #041618; color: var(--paper); inset: 0; isolation: isolate; overflow: hidden; position: fixed; z-index: 100; }
+.portalOverlay::before { animation: portalReveal .8s cubic-bezier(.16,.76,.18,1) both; background: radial-gradient(ellipse at 59% 49%, rgba(238,60,120,.13), transparent 22%), radial-gradient(ellipse at 82% 49%, rgba(109,230,223,.12), transparent 22%), radial-gradient(ellipse at 71% 49%, transparent 10%, rgba(4,22,24,.2) 42%, rgba(2,12,14,.86) 88%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 2; }
+.portalOverlay::after { background-image: linear-gradient(rgba(239,233,215,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(239,233,215,.025) 1px, transparent 1px); background-size: 52px 52px; content: ""; inset: 0; -webkit-mask-image: radial-gradient(ellipse at 66% 50%, transparent 12%, #000 72%); mask-image: radial-gradient(ellipse at 66% 50%, transparent 12%, #000 72%); opacity: .5; pointer-events: none; position: absolute; z-index: 2; }
+.portalCanvas { inset: 0; position: absolute; z-index: 1; }
+.portalForming { animation: portalWorldForm 3.4s linear both; }
+.portalForming::before { animation: portalVignetteForm 3.4s ease-in both; }
+.portalForming::after { animation: gridForm 3.4s ease-in both; }
+.portalForming .portalAtmosphere { animation: atmosphereTurn 28s linear infinite, atmosphereIgnite 3.4s ease-in both; }
+.portalForming .portalReadout, .portalForming .portalCoordinates { opacity: 0; }
+.portalAtmosphere { animation: atmosphereTurn 28s linear infinite; background: conic-gradient(from 30deg at 66% 50%, transparent 0 14%, rgba(109,230,223,.045) 18%, transparent 23% 44%, rgba(238,60,120,.055) 50%, transparent 57% 78%, rgba(239,233,215,.035) 84%, transparent 91%); inset: -8%; opacity: .75; pointer-events: none; position: absolute; transform: translateZ(0); z-index: 2; }
+.portalMachine { animation: machineArrive 3.2s cubic-bezier(.16,.8,.22,1) both; background: transparent; border: 0; color: var(--paper); cursor: pointer; font-family: inherit; height: min(65vh, 650px); padding: 0; position: absolute; top: 49%; transform: translate(-50%, -50%); width: min(22vw, 300px); z-index: 3; }
+.portalMachine:disabled { cursor: default; }
+.portalEnergy { position: absolute; width: 160%; height: 140%; left: -30%; top: -16%; pointer-events: none; }
+.portalOverlay .portalMachine::before, .portalOverlay .portalMachine::after { display: none; }
+.portalOverlay .portalMachine .portalThreshold { animation: none; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
+.portalOverlay .portalThreshold::after { display: none; }
+.portalOverlay .portalThreshold .sigil { opacity: .48; transition: opacity .3s, transform .3s; }
+.portalMachine:hover .portalThreshold .sigil, .portalMachine:focus-visible .portalThreshold .sigil { opacity: .95; transform: scale(1.06); }
+.portalMachine:focus-visible { outline: 2px solid var(--paper); outline-offset: 8px; border-radius: 45%; }
+.portalSpear { left: 54%; --portal-accent: var(--coral); }
+.portalProblem { left: 72%; --portal-accent: var(--acid); }
+.portalJoin { left: 88%; --portal-accent: #6de6df; }
+.portalMachine::before, .portalMachine::after { border: 1px solid rgba(109,230,223,.42); border-radius: 50%; content: ""; inset: -3%; position: absolute; }
+.portalMachine::before { animation: rimSkew 7s ease-in-out infinite alternate; border-color: rgba(109,230,223,.45) transparent rgba(238,60,120,.6); transform: rotate(5deg) scaleX(.94); }
+.portalMachine::after { animation: rimSkew 5s ease-in-out -2s infinite alternate-reverse; border-color: rgba(238,60,120,.65) rgba(239,233,215,.16) transparent; inset: 3%; transform: rotate(-4deg) scaleX(1.06); }
+.portalHalo { animation: haloPulse 2.8s ease-in-out infinite; background: radial-gradient(ellipse, rgba(109,230,223,.08) 0 20%, rgba(238,60,120,.12) 36%, transparent 68%); border: 1px solid rgba(239,233,215,.55); border-radius: 50%; box-shadow: inset 0 0 34px rgba(109,230,223,.22), 0 0 25px rgba(238,60,120,.25), 0 0 70px rgba(109,230,223,.12); inset: 7%; position: absolute; will-change: opacity, transform; }
+.portalHalo::before, .portalHalo::after { border-radius: inherit; content: ""; position: absolute; }
+.portalHalo::before { animation: portalScan 3.5s linear infinite; background: conic-gradient(from 0deg, transparent 0 35%, rgba(239,233,215,.92) 48%, rgba(238,60,120,.9) 51%, transparent 62%); inset: -2px; -webkit-mask: radial-gradient(ellipse, transparent 69%, #000 70% 72%, transparent 73%); mask: radial-gradient(ellipse, transparent 69%, #000 70% 72%, transparent 73%); }
+.portalHalo::after { background: repeating-radial-gradient(ellipse, transparent 0 12px, rgba(109,230,223,.08) 13px, transparent 14px); inset: 9%; opacity: .75; }
+.portalThreshold { align-items: center; animation: thresholdBreathe 3.1s ease-in-out infinite; background: radial-gradient(ellipse, rgba(238,60,120,.2), rgba(5,28,30,.95) 48%, rgba(2,15,17,.98) 72%); border: 1px solid rgba(238,60,120,.45); border-radius: 50%; box-shadow: inset 0 0 100px rgba(0,0,0,.85), inset 0 0 34px rgba(238,60,120,.25); display: flex; inset: 13%; justify-content: center; overflow: hidden; position: absolute; }
+.portalThreshold::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); content: ""; inset: 0; mix-blend-mode: soft-light; opacity: .18; position: absolute; }
+.portalThreshold .sigil { color: var(--paper); height: 96px; margin: 0; opacity: .9; width: 96px; }
+.portalThreshold .swordMark { height: 62px; width: 68px; }
+.portalJoin::before { border-color: rgba(109,230,223,.75) transparent rgba(215,227,77,.55); }
+.portalJoin::after { border-color: rgba(215,227,77,.5) rgba(239,233,215,.16) transparent; }
+.portalJoin .portalHalo { background: radial-gradient(ellipse, rgba(215,227,77,.07) 0 20%, rgba(109,230,223,.14) 36%, transparent 68%); border-color: rgba(109,230,223,.7); box-shadow: inset 0 0 34px rgba(109,230,223,.25), 0 0 25px rgba(109,230,223,.22), 0 0 70px rgba(215,227,77,.1); }
+.portalJoin .portalThreshold { background: radial-gradient(ellipse, rgba(109,230,223,.2), rgba(5,28,30,.95) 48%, rgba(2,15,17,.98) 72%); border-color: rgba(109,230,223,.55); box-shadow: inset 0 0 100px rgba(0,0,0,.85), inset 0 0 34px rgba(109,230,223,.25); }
+.portalProblem::before { border-color: rgba(215,227,77,.7) transparent rgba(239,233,215,.28); }
+.portalProblem .portalHalo { border-color: rgba(215,227,77,.6); }
+.portalProblem .portalThreshold { background: radial-gradient(ellipse, rgba(215,227,77,.14), rgba(5,28,30,.95) 48%, rgba(2,15,17,.98) 72%); border-color: rgba(215,227,77,.5); }
+.portalChoiceLabel { bottom: -64px; color: var(--portal-accent); display: flex; flex-direction: column; font-family: var(--font-display), serif; font-size: clamp(18px, 1.6vw, 26px); left: 0; letter-spacing: -.01em; line-height: 1; opacity: 0; position: absolute; right: 0; text-align: center; transition: letter-spacing .25s, color .25s; }
+.portalChoiceLabel small { color: var(--paper); font-family: var(--font-mono), monospace; font-size: 7px; letter-spacing: .17em; margin-bottom: 8px; opacity: .55; }
+.portalChoiceLabel strong { font-weight: 400; }
+.portalChoiceLabel b { color: var(--paper); font-family: var(--font-mono), monospace; font-size: 6px; font-weight: 400; letter-spacing: .1em; line-height: 1.35; margin-top: 8px; opacity: .58; }
+.portalChoiceLabel i { font-size: 14px; font-style: normal; position: absolute; right: 8%; top: 18px; }
+.portalMachine:not(:disabled) .portalChoiceLabel { animation: choiceArrive .65s ease both; opacity: 1; }
+.portalMachine:not(:disabled):hover .portalChoiceLabel { letter-spacing: .035em; }
+.portalMachine:not(:disabled):hover .portalHalo { border-color: var(--portal-accent); opacity: 1; }
+.portalClose { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font-family: inherit; font-size: 24px; gap: 13px; letter-spacing: .18em; padding: 18px; position: absolute; right: clamp(14px, 3vw, 50px); top: clamp(14px, 3vw, 42px); z-index: 6; }
+.portalClose span { font-size: 8px; }
+.portalReadout { display: flex; font-size: 7px; justify-content: space-between; left: clamp(24px, 4vw, 68px); letter-spacing: .18em; opacity: .58; position: absolute; right: clamp(24px, 4vw, 68px); top: clamp(30px, 4vw, 58px); z-index: 5; }
+.portalReadout span:last-child { margin-right: 116px; }
+.portalBreach { animation: breachSignal 3.4s steps(2, end) both; bottom: clamp(26px, 4vw, 54px); font-size: 8px; left: 50%; letter-spacing: .22em; margin: 0; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 5; }
+.portalMessage { animation: portalCopyIn .95s .25s cubic-bezier(.2,.7,.2,1) both; left: clamp(28px, 6vw, 100px); position: absolute; top: 50%; transform: translateY(-50%); width: min(48vw, 720px); z-index: 5; }
+.portalMessage > p { align-items: center; display: flex; font-size: 9px; font-weight: 700; letter-spacing: .19em; margin: 0 0 28px; text-transform: uppercase; }
+.portalMessage > p span { animation: signalBlink 1s steps(2) infinite; background: var(--coral); border-radius: 50%; box-shadow: 0 0 14px var(--coral); height: 7px; margin-right: 13px; width: 7px; }
+.portalMessage h2 { font-family: var(--font-display), serif; font-size: clamp(64px, 8.1vw, 132px); font-weight: 500; letter-spacing: -.07em; line-height: .7; margin: 0; text-shadow: 0 7px 45px rgba(0,0,0,.55); }
+.portalMessage h2 em { color: var(--coral); font-weight: 400; }
+.portalMessage > small { display: block; font-size: 7px; letter-spacing: .18em; margin-top: 34px; opacity: .58; }
+.portalMessage > b { border-left: 1px solid var(--coral); display: block; font-family: var(--font-body), serif; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.35; margin-top: 22px; padding-left: 12px; }
+.portalMessage button { align-items: center; background: rgba(4,22,24,.55); border: 1px solid rgba(239,233,215,.7); border-radius: 100px; color: var(--paper); cursor: pointer; display: flex; font-family: inherit; font-size: 9px; font-weight: 700; gap: 28px; letter-spacing: .17em; margin-top: 54px; padding: 9px 9px 9px 24px; text-transform: uppercase; transition: background .25s, border-color .25s, transform .25s; }
+.portalMessage button i { align-items: center; background: var(--coral); border-radius: 50%; display: flex; font-size: 18px; font-style: normal; height: 46px; justify-content: center; transition: transform .25s; width: 46px; }
+.portalMessage button:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); transform: translateX(6px); }
+.portalMessage button:hover i { transform: rotate(45deg); }
+.portalCoordinates { bottom: clamp(24px, 4vw, 54px); font-size: 7px; left: clamp(28px, 6vw, 100px); letter-spacing: .18em; line-height: 1.8; margin: 0; opacity: .5; position: absolute; z-index: 5; }
+.portalClosing { animation: portalDeparture .92s cubic-bezier(.68,0,.3,1) forwards; pointer-events: none; }
+.portalClosing .portalMachine { animation: machineDeparture .92s cubic-bezier(.68,0,.3,1) forwards; }
+.portalClosing .portalMessage, .portalClosing .portalBreach, .portalClosing .portalReadout, .portalClosing .portalCoordinates, .portalClosing .portalClose { animation: copyDeparture .35s ease forwards; }
+
+@keyframes portalReveal { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
+@keyframes portalWorldForm { 0%, 38% { background: rgba(4,22,24,0); } 56% { background: rgba(4,22,24,.12); } 72% { background: rgba(4,22,24,.48); } 88% { background: rgba(4,22,24,.88); } 100% { background: #041618; } }
+@keyframes portalVignetteForm { 0%, 30% { opacity: 0; } 55% { opacity: .18; } 76% { opacity: .62; } 100% { opacity: 1; } }
+@keyframes gridForm { 0%, 56% { opacity: 0; } 100% { opacity: .5; } }
+@keyframes atmosphereIgnite { 0%, 38% { opacity: 0; } 100% { opacity: .75; } }
+@keyframes realityGlitch { 0%, 8%, 14%, 22%, 31%, 42%, 53%, 66%, 78%, 88%, 100% { filter: none; transform: none; } 9% { filter: contrast(1.35) saturate(1.4) drop-shadow(7px 0 rgba(238,60,120,.7)) drop-shadow(-7px 0 rgba(109,230,223,.7)); transform: translateX(-5px) skewX(.5deg); } 23% { filter: contrast(1.6) hue-rotate(18deg) drop-shadow(-11px 0 rgba(238,60,120,.75)); transform: translate(8px, -2px); } 43%, 45% { filter: contrast(1.8) saturate(1.6) drop-shadow(14px 0 rgba(109,230,223,.75)); transform: translateX(-10px) scaleY(1.006); } 67% { filter: contrast(1.65) hue-rotate(-12deg) drop-shadow(9px 0 rgba(238,60,120,.8)); transform: translate(7px, 3px) skewX(-.7deg); } 79%, 81% { filter: contrast(2) saturate(.5) drop-shadow(-15px 0 rgba(109,230,223,.9)); transform: translateX(-12px) scale(1.008); } 89%, 94% { filter: contrast(1.8) saturate(1.8) drop-shadow(11px 0 rgba(238,60,120,.8)); transform: translateX(8px); } }
+@keyframes glitchBands { 0%, 7%, 14%, 21%, 32%, 44%, 57%, 69%, 82%, 94%, 100% { opacity: 0; transform: none; } 8%, 13% { clip-path: inset(18% 0 67%); opacity: .9; transform: translateX(13px); } 22%, 31% { clip-path: inset(54% 0 31%); opacity: .65; transform: translateX(-18px); } 45%, 56% { clip-path: inset(31% 0 52%); opacity: .8; transform: translateX(22px); } 70%, 81% { clip-path: inset(72% 0 12%); opacity: .75; transform: translateX(-25px); } 83%, 93% { clip-path: inset(8% 0 76%); opacity: .9; transform: translateX(18px); } }
+@keyframes machineArrive { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.04) rotate(-24deg); } 20% { opacity: .15; transform: translate(-50%, -50%) scale(.08) rotate(-20deg); } 48% { opacity: .5; transform: translate(-50%, -50%) scale(.38) rotate(-10deg); } 76% { opacity: .92; transform: translate(-50%, -50%) scale(.96) rotate(2deg); } 89% { transform: translate(-50%, -50%) scale(1.04) rotate(-1deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
+@keyframes atmosphereTurn { to { transform: rotate(360deg); } }
+@keyframes rimSkew { to { transform: rotate(12deg) scaleX(1.06); } }
+@keyframes haloPulse { 50% { opacity: .72; transform: scale(1.025); } }
+@keyframes portalScan { to { transform: rotate(360deg); } }
+@keyframes thresholdBreathe { 50% { opacity: .86; transform: scale(.975); } }
+@keyframes portalCopyIn { from { opacity: 0; transform: translate(-60px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
+@keyframes signalBlink { 50% { opacity: .35; } }
+@keyframes choiceArrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes breachSignal { 0%, 8%, 13%, 22%, 31%, 44% { opacity: 0; } 9%, 12%, 23%, 30%, 45%, 88% { opacity: .8; } 100% { opacity: 0; } }
+@keyframes copyDeparture { to { opacity: 0; transform: translateX(-50px); } }
+@keyframes machineDeparture { 35% { opacity: 1; transform: translate(-50%, -50%) scale(.9); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.9); } }
+@keyframes portalDeparture { 0%, 45% { background: #041618; opacity: 1; } 78% { background: var(--paper); opacity: 1; } 100% { background: var(--paper); opacity: 0; } }
+
+/* Finalized 1440px Code Transfer composition. */
+@media (min-width: 1000px) {
+ .site { width: 100%; }
+
+ .header { height: 104px; padding: 0 80px; }
+ .brand { font-size: 16px; gap: 16px; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
+ .brand .sigil { height: 46px; margin: 0; width: 46px; }
+ .brand .swordMark { height: 32px; width: 32px; }
+ .nav { gap: 31px; padding: 12px 27px; }
+ .nav a { font-size: 16px; letter-spacing: 2px; line-height: 24px; }
+ .nav .brandArchiveLink { display: none; }
+ .celestialToggle { left: auto; padding: 9px; right: 398px; }
+ .celestialToggle > span { height: 30px; width: 62px; }
+ .celestialToggle i { height: 16px; left: 7px; top: 6px; width: 16px; }
+ .celestialToggle b { font-size: 16px; letter-spacing: 2px; min-width: 38px; }
+ :global(html[data-theme="dark"]) .site .celestialToggle i { transform: translateX(31px); }
+ .portalTrigger { position: absolute; right: 80px; top: 18px; }
+
+ .hero { height: 897px; min-height: 897px; }
+ .heroStage { height: 897px; min-height: 897px; position: relative; top: auto; }
+ .heroArt, .heroImage, .heroNightImage, .heroWash { height: 897px; }
+ .heroImage { object-position: 50% 50%; }
+ .heroStage { --neo-curtain-speed: 1.4s; }
+ .heroExploring { --neo-curtain-open: clamp(160px, 13vw, 250px); --neo-curtain-speed: .8s; }
+ .heroForeground { inset: 0; }
+ .heroForegroundLeft { clip-path: inset(0 50% 0 0); transform: translateX(calc(-1 * var(--neo-curtain-open, 0px))); }
+ .heroForegroundRight { clip-path: inset(0 0 0 50%); transform: translateX(var(--neo-curtain-open, 0px)); }
+ .heroCopy { left: 176px; opacity: 1; top: 245px; transform: translateX(0); transition: transform var(--neo-curtain-speed) cubic-bezier(.16,.76,.18,1); width: 509px; }
+ .heroExploring .heroCopy { transform: translateX(32px); }
+ .heroTitle, .heroExploring .heroTitle { transform: none; }
+ .eyebrow { font-size: 24px; font-style: italic; letter-spacing: 2px; line-height: 24px; margin-bottom: 24px; white-space: nowrap; }
+ .eyebrow span { height: 16px; margin-right: 16px; width: 16px; }
+ .hero h1 { font-size: 88px; letter-spacing: 0; line-height: 88px; text-shadow: 0 4px 8px rgba(25,30,78,.3); }
+ .heroTitle > span { display: none; }
+ .heroSupplement, .heroExploring .heroSupplement { bottom: auto; left: 305px; opacity: 1; pointer-events: auto; top: 509px; transform: none; width: 379px; }
+ .heroDek { font-size: 24px; line-height: 32px; margin: 0; width: 379px; }
+ .discover { display: none; }
+ .heroIndex { bottom: 78px; display: block; right: 80px; }
+ .heroIndex span { display: block; font-size: 16px; letter-spacing: 2px; line-height: 24px; padding-top: 0; }
+ .heroIndex strong { display: block; font-size: 88px; letter-spacing: 4px; line-height: 88px; margin-left: 0; margin-top: 8px; }
+ .heroScrollCue { bottom: 78px; display: block; font-size: 16px; left: 80px; letter-spacing: 2px; line-height: 24px; position: absolute; transform: rotate(180deg); white-space: nowrap; writing-mode: vertical-rl; z-index: 7; }
+ .heroWayfinding { opacity: 1; }
+ .heroOrbitMap, .heroHub { display: none; }
+ .heroWaypoint { height: 78px; width: 165px; }
+ .heroWaypoint::after { background: transparent; border: 0; font-size: 16px; left: 0; letter-spacing: 2px; opacity: 1; padding: 0; text-align: center; top: 0; transform: none; width: 100%; }
+ .heroWaypoint > i { background: transparent; border-color: rgba(255,255,255,.5); box-shadow: none; height: 47px; left: 59px; top: 40px; width: 47px; }
+ .heroWaypoint > i::after { border: 0; content: "+"; font-size: 40px; inset: 8px 0 0; line-height: 24px; text-align: center; }
+ .waypointShip { left: 604px; top: 650px; }
+ .waypointCitadel { left: 844px; top: 378px; }
+ .waypointProcession { left: 1007px; top: 223px; }
+ .waypointLabel { display: none; }
+
+ .signalBar { height: 80px; padding: 0; }
+ .signalBar div { animation: none; gap: 24px; height: 80px; justify-content: space-around; width: 100%; }
+ .signalBar span { font-size: 24px; font-style: italic; letter-spacing: 2px; line-height: 24px; }
+
+ .prologue { display: grid; grid-template-columns: 761.5px 1fr; grid-template-rows: 653px 184px; height: 837px; max-width: none; padding: 0; }
+ .prologue::before, .prologue::after { display: none; }
+ .guildVisual { align-items: center; display: flex; height: 653px; justify-content: flex-end; overflow: hidden; padding-right: 48px; }
+ .guildBuilders { height: 596px; mix-blend-mode: normal; object-fit: contain; opacity: 1; position: static; width: 601px; }
+ .prologueCopy { align-self: start; padding: 139px 114px 0 0; }
+ .sectionLabel { color: var(--coral); font-size: 24px; font-style: italic; letter-spacing: 2px; line-height: 24px; margin-bottom: 16px; }
+ .practice h2 { font-family: var(--font-display), sans-serif; font-size: 56px; font-style: italic; letter-spacing: 0; line-height: 56px; }
+ .practice h2 em { font-family: var(--font-retalic), sans-serif; font-size: 72px; font-style: normal; line-height: 72px; }
+ .fieldIntro h2 { color: var(--color-dark-green); font-family: var(--font-display), sans-serif; font-size: 72px; font-style: italic; letter-spacing: 0; line-height: 72px; }
+ .fieldIntro h2 b { color: var(--color-dark-green); font-family: var(--font-retalic), sans-serif; font-size: 88px; font-style: normal; font-weight: 500; line-height: 88px; }
+ .fieldIntro h2 b em { color: var(--coral); font-family: inherit; font-size: inherit; font-style: normal; }
+ .prologue h2 { color: var(--color-navy); font-family: var(--font-display), sans-serif; font-size: 40px; font-style: italic; letter-spacing: 0; line-height: 48px; }
+ .prologue h2 em { font-family: var(--font-retalic), sans-serif; font-size: 56px; font-style: normal; line-height: 56px; }
+ .prologueCopy { color: var(--color-navy); }
+ .prologueBody > p { font-size: 16px; letter-spacing: 1px; line-height: 24px; max-width: 565px; }
+ .prologueBody > p + p { margin-top: 24px; }
+ .prologueBody strong { font-weight: 700; }
+ .prologueBody { border: 0; display: block; margin-top: 16px; padding: 0; }
+ .prologueBody > p:first-child { font-size: 16px; letter-spacing: 1px; line-height: 24px; max-width: 565px; }
+ .guildActions { gap: 16px; margin-top: 16px; }
+ .statsBand { align-items: center; background: var(--deep); color: var(--paper); display: grid; grid-column: 1 / -1; grid-template-columns: 249px 395px 316px 369px; height: 184px; justify-content: center; padding: 0 20px; }
+ .statsBand > div { align-items: center; border-left: 1px solid rgba(239,233,215,.28); display: flex; gap: 24px; min-height: 72px; padding-left: 24px; }
+ .statsBand strong { color: var(--coral); font-family: var(--font-display), serif; font-size: 56px; font-weight: 500; line-height: 56px; }
+ .statsBand span { font-size: 16px; letter-spacing: 2px; line-height: 24px; max-width: 200px; text-transform: uppercase; }
+
+ .keepers { background: var(--paper); color: var(--ink); height: 802px; overflow: hidden; padding: 48px 80px 24px; }
+ .guildRoster { margin: 0; }
+ .rosterHeading { align-items: center; border: 0; height: 247px; padding: 32px 0; }
+ .rosterHeading h3, .teamCopy h3 { color: var(--color-navy); font-family: var(--font-display), sans-serif; font-size: 40px; font-style: italic; font-weight: 500; letter-spacing: 0; line-height: 48px; margin: 0; }
+ .rosterHeading h3 em, .teamCopy h3 em { color: var(--coral); font-family: var(--font-retalic), sans-serif; font-size: 56px; font-style: normal; letter-spacing: 0; line-height: 56px; }
+ .rosterHeading > div > p:last-child { font-family: var(--font-body), serif; font-size: 16px; letter-spacing: 1px; line-height: 24px; margin: 8px 0 0; width: 671px; }
+ .rosterAside { width: 268px; }
+ .rosterAside a:not(.pill) { font-size: 14px; height: 56px; letter-spacing: 1px; margin: 0; }
+ .stewardTrack { grid-template-columns: repeat(5, 243.2px); margin-top: 0; overflow: visible; padding: 24px 0; }
+ .stewardCard { border: 2px solid var(--coral); border-radius: 16px; height: 411px; min-width: 0; padding: 26px; }
+ .stewardCard:last-child { border-right: 1px solid rgba(16,45,44,.35); }
+ .stewardPortrait { height: 169px; margin: 24px auto 8px; max-width: none; width: 169px; }
+ .stewardCard > p { font-size: 16px; letter-spacing: 2px; line-height: 24px; margin: 0; }
+ .stewardCard h4 { font-size: 24px; line-height: 32px; margin: 8px 0; }
+ .stewardCard > small { font-size: 14px; letter-spacing: 1px; line-height: 16px; }
+ .stewardTop { font-size: 14px; }
+
+ .teamNetwork { align-items: center; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 839px 1fr; height: 444px; overflow: hidden; }
+ .teamWall { height: 384px; overflow: hidden; position: relative; width: 820px; }
+ .memberMarquee { border: 0; height: 384px; margin: 0; overflow: hidden; padding: 0; }
+ .memberRail { animation: none; column-gap: 14px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 90px); row-gap: 8px; transform: translateX(-799.25px); width: max-content; }
+ .memberRail > a, .memberRail > div { border: 2px solid var(--coral); border-radius: 16px; gap: 16px; height: 90px; min-width: 213.75px; padding: 18px; }
+ .memberRail img { border-radius: 27px; filter: none; height: 54px; width: 54px; }
+ .memberRail strong { color: var(--coral); font-family: var(--font-display), sans-serif; font-size: 24px; font-style: italic; line-height: 32px; }
+ .memberRail small { color: var(--color-dark-green); font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 16px; margin-top: 5.625px; opacity: 1; }
+ .memberRail i { display: none; }
+ .teamCopy { padding-left: 61px; width: 460px; }
+ .teamCopy > p:not(.sectionLabel) { font-family: var(--font-body), serif; font-size: 16px; letter-spacing: 1px; line-height: 24px; }
+ .teamCopy > a:not(.pill) { border-bottom: 1px solid currentColor; color: inherit; display: flex; font-size: 14px; justify-content: space-between; letter-spacing: 1px; margin-top: 24px; padding-bottom: 12px; text-decoration: none; text-transform: uppercase; width: 228px; }
+
+ .practice { height: 1525px; padding: 160px 86px; }
+ .practiceHeading { align-items: center; grid-template-columns: 762px 447px; margin: 0 auto; max-width: 1209px; }
+ .practiceHeading .sectionLabel { grid-column: 1; margin-bottom: 24px; }
+ .practiceHeading h2 { grid-column: 1; }
+ .practiceAside { grid-column: 2; grid-row: 1 / span 2; padding-left: 109px; }
+ .practiceAside p { font-size: 16px; letter-spacing: 1px; line-height: 24px; width: 338px; }
+ .disciplineGrid { height: 826px; margin-top: 40px; max-width: 1267px; }
+ .discipline { height: 826px; min-height: 826px; padding: 32px 43px 45px; }
+ .disciplineArt { height: 337px; margin: 20px 0 0; }
+ .disciplineTag { color: var(--sky); font-size: 16px !important; line-height: 24px; }
+ .spearEndorsement { display: none; }
+ .discipline h3 { font-size: 24px; line-height: 32px; margin: 16px 0 0; }
+ .discipline > p:not(.disciplineTag) { font-size: 16px; letter-spacing: 1px; line-height: 24px; }
+ .disciplineTop { font-size: 20px; }
+ .disciplineTop i { color: var(--sky); font-size: 16px; }
+ .discipline > a, .spearActions > a { font-size: 16px; letter-spacing: 2px; line-height: 24px; }
+
+ .fieldNotes .sectionLabel { color: var(--color-dark-green); }
+ .fieldNotes { height: 1338px; padding: 120px 0 0; }
+ .fieldIntro { grid-template-columns: 930px 338px; margin: 0 auto 80px; max-width: 1267px; }
+ .fieldIntro::after { display: none; }
+ .fieldAside { padding-top: 110px; }
+ .fieldAside p { font-size: 16px; letter-spacing: 1px; line-height: 24px; }
+ .fieldControls { margin: 0 45px 24px; max-width: none; }
+ .fieldTrack { gap: 80px; margin: 0; padding: 0 45px; }
+ .featuredMission { flex-basis: 1181px; grid-template-columns: 560px 621px; height: 765px; min-height: 765px; }
+ .missionArt { min-height: 765px; }
+ .missionCopy { padding: 72px; }
+ .missionType { font-size: 16px; letter-spacing: 2px; line-height: 24px; margin-top: auto; }
+ .missionCopy h3 { font-size: 40px; line-height: 48px; margin-bottom: 24px; }
+ .missionCopy > p:not(.missionType) { font-size: 16px; letter-spacing: 1px; line-height: 24px; }
+ .missionCopy > a:not(.pill) { font-size: 14px; }
+ .missionCopy dl { margin-top: 56px; }
+
+ .creed { background: var(--deep); height: 615px; padding: 133px 24px 0; }
+ .creedMoons { animation: none; height: 100%; left: 0; max-width: none; mix-blend-mode: normal; object-fit: cover; opacity: .8; top: 0; transform: none; width: 100%; }
+ .creed .sectionLabel { color: var(--sky); font-size: 24px; font-style: normal; line-height: 24px; margin: 0; }
+ .creed blockquote { font-size: 56px; letter-spacing: 4px; line-height: 56px; margin: 73px auto 0; }
+ .creed em { color: var(--coral); }
+ .creedFooter { display: none; }
+
+ .contact { gap: 76px; grid-template-columns: 506px 698px; height: 881px; padding: 32px 80px; }
+ .contactIntro { padding-top: 0; position: static; }
+ .contact .sectionLabel { color: var(--color-dark-green); font-size: 16px; font-style: normal; line-height: 24px; opacity: .8; }
+ .contactDruid { height: 435.92px; margin-bottom: 34px; object-fit: cover; width: 506px; }
+ .contact h2.contactHeadline { color: var(--color-dark-green); font-family: var(--font-display), sans-serif; font-size: 24px; font-style: italic; letter-spacing: 0; line-height: 32px; }
+ .contact h2.contactHeadline span { display: block; }
+ .contact h2.contactHeadline em { color: var(--coral); display: block; font-family: var(--font-retalic), sans-serif; font-size: 40px; font-style: normal; line-height: 48px; }
+ .contactDek { font-size: 16px; letter-spacing: 1px; line-height: 24px; margin-top: 24px; width: 460px; }
+ .contactProtocol { margin-top: 48px; }
+ .contactFormShell { box-shadow: 20px 20px 0 var(--sky); height: 720px; padding: 54px; }
+
+ .footer { gap: 56.25px; grid-template-columns: 394.49px 1fr 394.49px; height: 402px; padding: 78.75px 72px 33.75px; }
+ .footer > p { font-size: 24.75px; font-style: italic; letter-spacing: 0; line-height: 28.46px; }
+ .socials { gap: 16px; }
+ .socials a { font-size: 14px; letter-spacing: 1px; line-height: 16px; }
+ .footer small { border-color: var(--sky); font-size: 14px; letter-spacing: 1px; line-height: 16px; opacity: 1; padding-top: 25px; }
+}
+
+@media (max-width: 900px) {
+ .header { height: 78px; padding-left: 24px; padding-right: 24px; }
+ .nav { align-items: flex-start; backdrop-filter: none; background: var(--deep); border: 0; border-radius: 0; box-shadow: none; flex-direction: column; inset: 0; justify-content: center; opacity: 0; padding: 90px 30px; pointer-events: none; position: fixed; transform: translateY(-15px); transition: opacity .25s, transform .25s; -webkit-backdrop-filter: none; }
+ .nav a { font-family: var(--font-display), serif; font-size: 42px; letter-spacing: -.03em; text-transform: none; }
+ .nav .brandArchiveLink { border-left: 0; border-top: 1px solid rgba(239,233,215,.25); font-family: var(--font-mono), monospace; font-size: 12px; letter-spacing: .14em; margin-top: 20px; padding: 24px 0 0; text-transform: uppercase; }
+ .navOpen { opacity: 1; pointer-events: auto; transform: translateY(0); }
+ .menuButton { background: none; border: 0; display: block; height: 36px; padding: 0; position: relative; width: 36px; z-index: 2; }
+ .menuButton span { background: var(--paper); height: 1px; left: 6px; position: absolute; top: 15px; width: 24px; }
+ .menuButton span:last-child { top: 21px; }
+ .celestialToggle { left: 138px; }
+ .portalTrigger { bottom: 18px; right: 18px; top: auto; }
+ .heroWayfinding { opacity: .7; }
+ .heroWaypoint::after { opacity: .7; }
+ .heroWaypoint > i { background: rgba(238,60,120,.72); }
+ .prologue { grid-template-columns: 1fr; }
+ .prologueMark { margin-bottom: 80px; }
+ .rosterHeading { align-items: start; flex-direction: column; gap: 25px; }
+ .stewardTrack { grid-template-columns: repeat(5, 220px); }
+ .disciplineGrid { grid-template-columns: 1fr; }
+ .discipline { border-bottom: 1px solid rgba(239,233,215,.22); min-height: 480px; }
+ .practiceHeading, .fieldIntro { grid-template-columns: 1fr; }
+ .practiceAside, .fieldAside { margin-top: 30px; }
+ .featuredMission { grid-template-columns: 1fr; }
+ .missionArt { min-height: 660px; }
+ .missionCopy { min-height: 620px; }
+ .contact { grid-template-columns: 1fr; }
+ .contactIntro { position: static; }
+ .contactFormShell { margin-top: 15px; }
+ .portalMachine { height: min(36vh, 340px); top: 29%; width: min(27vw, 205px); }
+ .portalSpear { left: 20%; }
+ .portalProblem { left: 50%; }
+ .portalJoin { left: 80%; }
+ .portalOverlay::before { background: radial-gradient(ellipse at 20% 29%, rgba(238,60,120,.14), transparent 18%), radial-gradient(ellipse at 50% 29%, rgba(215,227,77,.1), transparent 18%), radial-gradient(ellipse at 80% 29%, rgba(109,230,223,.14), transparent 18%), radial-gradient(ellipse at 50% 38%, transparent 10%, rgba(4,22,24,.25) 48%, rgba(2,12,14,.9) 88%); }
+ .portalOverlay::after { -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 12%, #000 72%); mask-image: radial-gradient(ellipse at 50% 40%, transparent 12%, #000 72%); }
+ .portalMessage { bottom: 4vh; left: 24px; top: auto; transform: none; width: calc(100% - 48px); }
+ .portalMessage > p { margin-bottom: 13px; }
+ .portalMessage h2 { font-size: clamp(52px, 15vw, 92px); line-height: .72; }
+ .portalChoiceLabel { bottom: -62px; font-size: clamp(14px, 3vw, 20px); }
+ .portalChoiceLabel i { display: none; }
+ .portalMessage button { margin-top: 24px; }
+ .portalCoordinates { display: none; }
+ .portalReadout { left: 24px; right: 24px; }
+ .portalReadout span:last-child { display: none; }
+ @keyframes portalCopyIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
+}
+
+@media (max-width: 600px) {
+ .hero { height: 130svh; min-height: 920px; }
+ .heroStage { min-height: 680px; }
+ .celestialToggle { left: 126px; }
+ .heroImage { object-position: 56% center; }
+ .heroForeground { inset: -6% -23% -14%; }
+ .heroForegroundLeft { transform: translate3d(calc(42px - var(--neo-curtain-open, 0px)), var(--neo-fore-y, 0px), 0) scale(1.1); }
+ .heroForegroundRight { transform: translate3d(calc(-34px + var(--neo-curtain-open, 0px)), var(--neo-fore-y, 0px), 0) scale(1.1); }
+ .heroWash { background: linear-gradient(90deg, rgba(5,34,34,.82), rgba(5,34,34,.22)), linear-gradient(0deg, rgba(5,27,28,.8), transparent 55%); }
+ .heroExploring { --neo-track-title-x: 0px; }
+ .heroWayfinding { display: block; opacity: .82; }
+ .heroOrbitMap, .heroHub, .waypointLabel { display: none; }
+ .heroWaypoint::after { display: none; }
+ .heroExploring .heroWaypoint::after { display: block; opacity: 1; }
+ .waypointShip { left: 7%; top: 70%; }
+ .waypointCitadel { left: auto; right: 7%; top: 45%; }
+ .waypointProcession { left: auto; right: 8%; top: 68%; }
+ .waypointProcession::after { left: auto; right: 43px; text-align: right; }
+ .heroCopy { bottom: auto; left: 24px; top: 168px; width: calc(100% - 48px); }
+ .heroTitle, .heroExploring .heroTitle { transform: none; }
+ .heroTitle > span { display: none; }
+ .heroSupplement, .heroExploring .heroSupplement { bottom: auto; left: 24px; opacity: var(--neo-copy-opacity, 1); pointer-events: auto; top: 336px; width: min(330px, calc(100% - 48px)); }
+ .eyebrow { font-size: 7px; letter-spacing: .16em; margin-bottom: 13px; }
+ .eyebrow span { box-shadow: 0 0 0 4px rgba(238,60,120,.18); height: 6px; margin-right: 11px; width: 6px; }
+ .hero h1 { font-size: clamp(54px, 15.5vw, 68px); letter-spacing: -.055em; line-height: .74; }
+ .heroDek { font-size: 16px; line-height: 1.35; margin-top: 0; max-width: 315px; }
+ .discover { font-size: 8px; gap: 13px; margin-top: 28px; }
+ .discover i { height: 36px; width: 36px; }
+ .heroIndex { display: none; }
+ .prologue { padding-left: 22px; padding-right: 22px; }
+ .guildBuilders { right: -92px; top: 560px; width: 78vw; }
+ .prologue h2, .practice h2, .fieldIntro h2, .contact h2 { font-size: 54px; }
+ .prologueBody { grid-template-columns: 1fr; }
+ .guildRoster { margin-top: 100px; }
+ .rosterHeading h3 { font-size: 46px; }
+ .stewardTrack { margin-right: -22px; padding-right: 22px; }
+ .practice { padding-left: 0; padding-right: 0; }
+ .practiceHeading { padding: 0 22px; }
+ .disciplineGrid { border-left: 0; }
+ .discipline { border-right: 0; padding-left: 30px; padding-right: 30px; }
+ .fieldNotes { padding-left: 0; padding-right: 0; }
+ .fieldIntro { padding: 0 22px; }
+ .fieldControls { padding: 0 22px; }
+ .fieldTrack { gap: 14px; margin-right: 0; padding: 0 22px 20px; }
+ .featuredMission { flex-basis: 88vw; }
+ .missionArt { min-height: 560px; }
+ .missionCopy { min-height: 560px; padding: 36px 28px; }
+ .creed blockquote { font-size: 55px; }
+ .creedFooter { gap: 12px; }
+ .creedFooter span { max-width: 90px; }
+ .contact { padding-left: 22px; padding-right: 22px; }
+ .contactHeadline span { white-space: normal; }
+ .contactProtocol { grid-template-columns: 1fr; }
+ .contactProtocol div { border-bottom: 1px solid rgba(16,45,44,.2); padding: 14px 0; }
+ .contactFormShell { box-shadow: 10px 10px 0 var(--sky); margin-right: 10px; padding: 28px 20px; }
+ .formCoordinates span:last-child { display: none; }
+ .contactFormShell :global(.hire-us-wizard) > div:first-child { align-items: stretch; flex-direction: column; }
+ .contactFormShell :global(.hire-us-wizard) > div:first-child > div { justify-content: flex-start; }
+ .footer { grid-template-columns: 1fr; }
+ .socials { justify-self: start; }
+ .footer small { grid-column: 1; }
+}
+
+/* Integration: open display face, retained local routes, responsive handoff. */
+.site h1, .site h2, .rosterHeading h3, .teamCopy h3, .discipline h3, .missionCopy h3, .creed blockquote { font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; }
+/* Reverse italic accents: positive skew leans the letter tops to the left. */
+.site h1 em, .site h2 em, .site h3 em, .creed em { display: inline-block; font-style: normal; font-weight: 1000; font-variation-settings: "slnt" 0; transform: skewX(12deg); transform-origin: center; }
+.hero h1 { line-height: .73; }
+.hero h1 > span { display: inline-block; transform: skewX(12deg); }
+.fieldIntro h2 > em { font-size: 1.1em; white-space: nowrap; }
+:global(html[data-theme="dark"]) .site .fieldIntro h2,
+:global(html[data-theme="dark"]) .site .fieldIntro .sectionLabel { color: var(--paper); }
+.site .contactFormShell :global(.text-heading-lg) { font-weight: 900 !important; }
+.statsBand strong { font-weight: 900; }
+.creed .creedMoons { animation: none; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: none; }
+.carouselButtons { display: flex; gap: 12px; }
+.carouselButtons button { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 24px; }
+.carouselButtons button:hover:not(:disabled), .carouselButtons button:focus-visible { background: var(--coral); color: var(--paper); outline: 2px solid var(--coral); outline-offset: 3px; }
+.carouselButtons button:disabled { opacity: .3; cursor: default; }
+.spearControls { display: none; }
+/* Continuous, opposite-direction bands from the design walkthrough. */
+.loopBand { grid-column: 1 / -1; min-width: 0; overflow: hidden; position: relative; color: var(--paper); }
+.wordBand { background: var(--coral); }
+.metricBand { background: var(--deep); }
+.loopViewport { overflow: hidden; }
+.loopTrack { display: flex; width: max-content; animation: bandDrift 60s linear infinite; }
+.loopGroup { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; gap: 32px; padding: 20px 16px; min-width: 100vw; }
+.metricBand .loopTrack { animation-duration: 75s; animation-direction: reverse; }
+.metricBand .loopGroup { padding: 32px 24px; }
+.loopBand:hover .loopTrack, .loopBand:focus-within .loopTrack { animation-play-state: paused; }
+.tickerWord { display: flex; align-items: center; gap: 32px; font-family: var(--font-mono); font-size: clamp(14px, 1.6vw, 24px); font-style: italic; font-weight: 700; white-space: nowrap; }
+.tickerWord i { background: currentColor; width: 25px; height: 25px; mask: url('/images/icons/venture/ico-logo.svg') center / contain no-repeat; }
+.metricItem { display: flex; align-items: center; gap: 22px; border-left: 1px solid rgba(239,233,215,.25); padding-left: 24px; width: 300px; flex-shrink: 0; }
+.metricItem strong { color: var(--coral); font-family: var(--font-display); font-size: clamp(40px, 4vw, 56px); font-weight: 900; font-style: italic; }
+.metricItem span { font-family: var(--font-mono); font-size: 14px; line-height: 1.35; max-width: 165px; }
+.loopPause { position: absolute; right: 4px; top: 4px; border: 1px solid currentColor; border-radius: 50%; width: 28px; height: 28px; background: var(--deep); color: var(--paper); cursor: pointer; font-size: 12px; }
+@keyframes bandDrift { to { transform: translateX(-50%); } }
+:global(html[data-theme="dark"]) .site .metricBand { background: #252a61; }
+:global(html[data-theme="dark"]) .site .contactFormShell { background: #252a61; }
+:global(html[data-theme="dark"]) .site .contact h2,
+:global(html[data-theme="dark"]) .site .contact .sectionLabel,
+:global(html[data-theme="dark"]) .site .rosterHeading h3 { color: var(--paper); }
+:global(html[data-theme="dark"]) .site .stewardCard,
+:global(html[data-theme="dark"]) .site .memberRail > a,
+:global(html[data-theme="dark"]) .site .memberRail > div,
+:global(html[data-theme="dark"]) .site .discipline { background: rgba(185,224,223,.055); }
+:global(html[data-theme="dark"]) .site .stewardCard:hover,
+:global(html[data-theme="dark"]) .site .stewardCard:focus-visible,
+:global(html[data-theme="dark"]) .site .memberRail > a:hover,
+:global(html[data-theme="dark"]) .site .memberRail > a:focus-visible,
+:global(html[data-theme="dark"]) .site .discipline:hover,
+:global(html[data-theme="dark"]) .site .discipline:focus-within { background: #303675; border-color: var(--coral); color: var(--paper); }
+:global(html[data-theme="dark"]) .site .memberRail > a:hover strong,
+:global(html[data-theme="dark"]) .site .memberRail > a:focus-visible strong { color: var(--paper); }
+.site .problemSpear { background: transparent; }
+/* Keep foreground and surface changes paired, including the transparent
+ discovery card. Its base selector previously overrode only the hover surface. */
+.site .discipline:hover,
+.site .discipline:focus-within { background: var(--sky); color: var(--ink); }
+.site .discipline:is(:hover, :focus-within) .disciplineTag,
+.site .discipline:is(:hover, :focus-within) .disciplineTop i,
+.site .discipline:is(:hover, :focus-within) .spearEndorsement { color: inherit; }
+:global(html[data-theme="dark"]) .site .header .nav,
+:global(html[data-theme="dark"]) .site .celestialToggle { background: rgba(25,30,78,.92); border-color: rgba(185,224,223,.4); }
+.site .nav a:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; }
+@media (prefers-reduced-motion: reduce) {
+ .loopTrack { animation: none; transform: none; width: 100%; }
+ .loopGroup { flex-wrap: wrap; min-width: 0; width: 100%; }
+ .loopGroup[aria-hidden="true"], .loopPause { display: none; }
+ .metricItem { width: min(300px, 100%); }
+}
+.practice { height: auto; }
+.spearGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
+.spearGrid .discipline { height: auto; min-height: 0; }
+.spearGrid .disciplineArt { height: clamp(220px, 24vw, 337px); }
+.guildActions { flex-wrap: wrap; }
+.pill { max-width: 100%; }
+.teamCopy > p:not(.sectionLabel) { margin-bottom: 0; }
+.teamCopy > .pill, .practiceAside > .pill, .fieldAside > .pill { margin-top: 24px; }
+.pill > span { white-space: normal; }
+.contact, .fieldNotes, .keepers { height: auto; }
+.contactFormShell { height: auto; min-height: 720px; }
+.contactDruid { object-fit: contain; }
+.contactFormShell :global(.hire-us-wizard) > div:first-child > div { height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
+.contactFormShell :global(.hire-us-wizard) > div:first-child > div > span:first-child { flex-shrink: 0; }
+.contactFormShell :global(.hire-us-wizard) > div:first-child > div > span:last-child { display: inline; font-size: 11px; line-height: 1.25; }
+.guildBuilders { --artifact-opacity: 1; }
+:global(html[data-theme="dark"]) .site .guildBuilders { filter: none; mix-blend-mode: normal; opacity: 1; }
+.prologueBody p { font-family: var(--font-body), sans-serif; }
+.rosterHeading { height: auto; min-height: 247px; }
+@media (min-width: 1000px) {
+ .header { gap: 20px; justify-content: flex-start; padding: 0 224px 0 4vw; }
+ .celestialToggle { position: static; flex-shrink: 0; }
+ .celestialToggle b { font-size: 10px; }
+ .nav { margin-left: auto; gap: 18px; padding: 12px 18px; }
+ .nav a { font-size: 10px; letter-spacing: 1px; white-space: nowrap; }
+ .nav .brandArchiveLink { display: flex; padding-left: 14px; }
+ .portalTrigger { box-sizing: border-box; width: 180px; position: fixed; right: 24px; }
+ .prologue { grid-template-columns: 52% 48%; grid-template-rows: minmax(653px, auto) auto; height: auto; }
+ .prologueCopy { padding: 100px 6vw 48px 0; }
+ .guildBuilders { max-width: 100%; }
+ .statsBand { grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; min-height: 184px; padding: 25px 4vw; }
+ .statsBand > div { gap: 15px; padding-left: 15px; flex-wrap: wrap; }
+ .stewardTrack { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; }
+ .stewardCard { height: auto; min-height: 411px; padding: 20px; }
+ .stewardPortrait { max-width: 100%; }
+ .rosterHeading > div > p:last-child { width: auto; max-width: 671px; }
+ .teamNetwork { grid-template-columns: 60% 40%; }
+ .teamWall { width: 100%; }
+ .teamCopy { width: auto; padding: 30px; }
+ .practiceHeading { grid-template-columns: 1.4fr 1fr; }
+ .practiceAside { padding-left: 30px; }
+ .practiceAside p { width: auto; }
+ .fieldIntro { grid-template-columns: minmax(0, 1fr) 338px; padding: 0 5vw; }
+ .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5vw; padding: 48px 5vw; }
+ .contactDruid, .contactDek { width: 100%; }
+ .footer { grid-template-columns: 1fr 1fr 1fr; height: auto; }
+ .heroCopy { left: 12%; }
+ .heroSupplement, .heroExploring .heroSupplement { top: 455px; left: 21%; }
+}
+@media (max-width: 999px) {
+ .prologue { grid-template-columns: 1fr; padding: 64px 24px 0; }
+ .guildVisual { display: flex; justify-content: center; }
+ .guildBuilders { position: static; height: 340px; width: 100%; object-fit: contain; opacity: 1; mix-blend-mode: normal; }
+ .prologueCopy { padding: 30px 0; }
+ .prologueBody { display: block; margin-top: 24px; }
+ .prologueBody p + p { margin-top: 20px; }
+ .prologue h2, .practice h2, .fieldIntro h2, .contact h2 { font-size: clamp(32px, 6vw, 56px); line-height: 1; }
+ .statsBand { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; }
+ .statsBand strong { display: block; font-family: var(--font-display); font-size: 40px; color: var(--coral); }
+ .statsBand span { font-size: 11px; }
+ .keepers, .teamNetwork { padding: 40px 24px; }
+ .guildRoster { margin-top: 0; }
+ .teamWall { overflow: auto; }
+ .teamCopy { margin-top: 24px; }
+ .teamCopy h3 { font-size: 36px; line-height: 1; }
+ .teamCopy p { margin: 16px 0; }
+ .teamCopy > p:not(.sectionLabel) { margin-bottom: 0; }
+ .spearControls { display: flex; padding: 0 24px; margin-top: 30px; color: var(--paper); }
+ .spearGrid { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 24px; gap: 16px; padding: 0 24px 20px; margin-top: 0; scrollbar-width: none; }
+ .spearGrid::-webkit-scrollbar { display: none; }
+ .spearGrid .discipline { flex: 0 0 88%; min-width: 0; scroll-snap-align: start; }
+ .keepers { padding-bottom: 16px; }
+ .teamNetwork { padding-top: 16px; }
+ .teamWall .memberMarquee { margin-top: 0; }
+ .contactFormShell { min-height: 0; }
+ .contactDruid { max-height: 350px; width: 100%; }
+ .creedMoons { inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; opacity: .8; mix-blend-mode: normal; }
+ .pill { gap: 12px; }
+ .pill > span { font-size: 12px; letter-spacing: 1px; }
+}
+
+@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
+ .heroCopy, .heroSupplement { z-index: 7; }
+}
+@media (prefers-reduced-motion: reduce) {
+ .heroArt, .heroForeground, .heroCelestial, .heroCopy, .heroSupplement, .heroIndex, .signalBar div, .orbit::after { animation: none; transform: none; transition: none; }
+ .heroNightImage, .celestialToggle i { transition: none; }
+ .sectionArriving .sectionLabel { animation: none; }
+ .sectionArriving .guildBuilders { animation: none; }
+ .missionImage { transition: none; }
+ .portalAtmosphere, .portalMachine::before, .portalMachine::after, .portalHalo, .portalHalo::before, .portalThreshold, .portalThreshold::after, .portalMessage > p span { animation: none; }
+}
diff --git a/src/components/HomeExperience.tsx b/src/components/HomeExperience.tsx
new file mode 100644
index 0000000..ce0e918
--- /dev/null
+++ b/src/components/HomeExperience.tsx
@@ -0,0 +1,997 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type MouseEvent } from "react";
+import Image from "next/image";
+import FrontDoor from "./FrontDoor";
+import { UnchartedHunt, HuntMarker, HuntPixel } from "./UnchartedHunt";
+import TeamWall from "./TeamWall";
+import PortalEnergy from "./PortalEnergy";
+import LoopBand from "./LoopBand";
+import HireUs from "@/components/HireUs";
+import { mercenaries } from "@/lib/data/members";
+import styles from "./HomeExperience.module.css";
+
+const activeSpears = [
+ {
+ index: "01",
+ title: "Applied AI",
+ copy: "An independently led practice bringing the network’s technical curiosity to applied AI. Explore its work with agents, workflows, and the systems that support them.",
+ tag: "ACTIVE SPEAR / RAIDGUILD.AI",
+ status: "DEPLOYING",
+ href: "https://raidguild.ai",
+ cta: "Explore the AI practice",
+ art: "/images/neo/spear-applied-ai-v1.webp",
+ artAlt: "A field technologist working with an AI companion and portable systems",
+ },
+ {
+ index: "02",
+ title: "Onchain Systems",
+ copy: "A specialist practice rooted in the Guild’s onchain experience since 2019. Explore its work with protocols, products, governance, and shared ownership.",
+ tag: "ACTIVE SPEAR / ONCHAIN",
+ status: "BATTLE-TESTED",
+ href: "https://raidguild-onchain-production.up.railway.app/",
+ cta: "Explore onchain work",
+ art: "/images/neo/spear-onchain-v1.webp",
+ artAlt: "Guild builders operating an onchain systems foundry",
+ },
+];
+
+// Reuse the identity assets from the original site's partner-logo banner.
+// The group includes client, partner, and member-built projects, not just clients.
+const networkLogos = [
+ { name: "Gitcoin", file: "logo-Gitcoin.svg" },
+ { name: "Gnosis", file: "logo-Gnosis.svg" },
+ { name: "Pocket Network", file: "logo-Pocket.svg" },
+ { name: "Unlock Protocol", file: "logo-Unlock.svg" },
+ { name: "BrightID", file: "logo-brightid.svg" },
+ { name: "DAOhaus", file: "logo-daohaus.svg" },
+ { name: "Hypercerts", file: "logo-Hypercerts.svg" },
+ { name: "Protocol Labs", file: "logo-Protocol.svg" },
+];
+
+const fieldNotes = [
+ {
+ issue: "07",
+ code: "RG—24.071",
+ image: "/images/neo/sky-citadel.png",
+ alt: "A cloaked traveler looks toward a floating coral citadel",
+ type: "PROTOCOL DESIGN · PRODUCT · ENGINEERING",
+ title: "Infrastructure for new worlds.",
+ abstract:
+ "How we turned complex coordination into an interface that feels inevitable—clear enough for day one, powerful enough for what comes next.",
+ status: "LIVE",
+ sector: "ONCHAIN",
+ crew: "08",
+ },
+ {
+ issue: "08",
+ code: "RG—25.014",
+ image: "/images/neo/field-protocol-garden.png",
+ alt: "A guild cartographer studies a living network city",
+ type: "SYSTEMS · IDENTITY · PROTOCOL",
+ title: "Gardens, not platforms.",
+ abstract:
+ "A field study in designing protocols that grow through participation: legible incentives, composable paths, and room for the unexpected.",
+ status: "ARCHIVED",
+ sector: "NETWORKS",
+ crew: "06",
+ },
+ {
+ issue: "09",
+ code: "RG—25.033",
+ image: "/images/neo/field-signal-commons.png",
+ alt: "A floating civic commons above the clouds",
+ type: "GOVERNANCE · RESEARCH · EXPERIENCE",
+ title: "A commons in the clouds.",
+ abstract:
+ "What changes when governance feels like a place? Notes on making collective decisions spatial, social, and unmistakably human.",
+ status: "TRANSMITTING",
+ sector: "COMMUNITIES",
+ crew: "11",
+ },
+ {
+ issue: "10",
+ code: "RG—26.002",
+ image: "/images/neo/field-autonomous-treasury.png",
+ alt: "Two engineers inspect a monumental autonomous treasury",
+ type: "TREASURY · AUTOMATION · AI",
+ title: "The machine that stewards itself.",
+ abstract:
+ "Inside an autonomous treasury: observable agents, bounded authority, and financial infrastructure designed to earn trust over time.",
+ status: "CLASSIFIED",
+ sector: "AUTONOMY",
+ crew: "05",
+ },
+];
+
+const stewards = [
+ {
+ name: "Dekan",
+ role: "Knowledge Steward",
+ href: "https://x.com/DekanBro",
+ project: "KNOWLEDGE SYSTEMS",
+ image: "/images/member-dekan.png",
+ },
+ {
+ name: "ECWireless",
+ role: "Infrastructure Steward",
+ href: "https://github.com/ECWireless",
+ project: "GITHUB / ECWIRELESS",
+ image: "/images/member-ecwireless.png",
+ },
+ {
+ name: "Takekek",
+ role: "Sync Steward",
+ project: "PROFILE FORTHCOMING",
+ image: "/images/member-takekek.png",
+ },
+ {
+ name: "Pupcakes",
+ role: "Participation Steward",
+ href: "https://github.com/Fluffy9",
+ project: "GITHUB / FLUFFY9",
+ image: "/images/member-pupcakes.png",
+ },
+ {
+ name: "Louchi",
+ role: "Brand Steward",
+ href: "https://estudioblanco.org",
+ project: "ESTUDIO BLANCO",
+ image: "/images/member-louchi.png",
+ },
+];
+
+const stewardNames = new Set(stewards.map((steward) => steward.name.toLowerCase()));
+const guildMembers = mercenaries.filter((member) => !stewardNames.has(member.name.toLowerCase()));
+
+function Sigil() {
+ return (
+
+
+
+ );
+}
+
+type PortalOverlayProps = {
+ open: boolean;
+ forming: boolean;
+ closing: boolean;
+ onClose: () => void;
+ onSpears: () => void;
+ onProblem: () => void;
+ onJoin: () => void;
+};
+
+function PortalOverlay({ open, forming, closing, onClose, onSpears, onProblem, onJoin }: PortalOverlayProps) {
+ const [energized, setEnergized] = useState(null);
+
+ useEffect(() => {
+ if (!open) return;
+
+ const previousOverflow = document.body.style.overflow;
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Escape") onClose();
+ };
+
+ document.body.style.overflow = "hidden";
+ window.addEventListener("keydown", handleKeyDown);
+ return () => {
+ document.body.style.overflow = previousOverflow;
+ window.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [open, onClose]);
+
+
+ if (!open) return null;
+
+ return (
+
+
+
setEnergized("Spear")}
+ onPointerLeave={() => setEnergized(null)}
+ onFocus={() => setEnergized("Spear")}
+ onBlur={() => setEnergized(null)}
+ type="button"
+ onClick={onSpears}
+ disabled={forming}
+ aria-label="Explore independent RaidGuild practices"
+ >
+
+
+
+ 01 / EXPLORE
+ EXPLORE PRACTICES
+ Meet the Guild’s specialist offerings
+ ↓
+
+
+
setEnergized("Problem")}
+ onPointerLeave={() => setEnergized(null)}
+ onFocus={() => setEnergized("Problem")}
+ onBlur={() => setEnergized(null)}
+ type="button"
+ onClick={onProblem}
+ disabled={forming}
+ aria-label="Start a project with RaidGuild"
+ >
+
+
+
+ 02 / INQUIRE
+ START A PROJECT
+ Find a starting point in the network
+ ↓
+
+
+
setEnergized("Join")}
+ onPointerLeave={() => setEnergized(null)}
+ onFocus={() => setEnergized("Join")}
+ onBlur={() => setEnergized(null)}
+ type="button"
+ onClick={onJoin}
+ disabled={forming}
+ aria-label="Join the RaidGuild builder community in a new tab"
+ >
+
+
+
+ 03 / JOIN
+ JOIN THE GUILD
+ Connect with the community on Portal
+ ↗
+
+
+
+ CLOSE ×
+
+
+ RG—TRANSIT / 001
+ STABILITY 98.7%
+
+ {forming &&
[ SPATIAL BREACH DETECTED ]
}
+ {!forming && (
+
+
Three transit windows open
+
CHOOSE YOURPORTAL.
+
EXPLORE PRACTICES · START A PROJECT · JOIN THE GUILD
+
Independent minds. Shared ambition. Different ways to connect with one network.
+
+
+ )}
+
39°44′N / 104°59′W DESTINATION: UNMAPPED
+
+ );
+}
+
+export default function HomeExperience() {
+ const [frontDoorOpen, setFrontDoorOpen] = useState(true);
+ const [entranceDestination, setEntranceDestination] = useState(null);
+ const enterFromFrontDoor = useCallback((destination: string) => {
+ setEntranceDestination(destination);
+ setFrontDoorOpen(false);
+ }, []);
+
+ useEffect(() => {
+ if (frontDoorOpen || !entranceDestination) return;
+ const target = document.getElementById(entranceDestination);
+ if (!target) return;
+ target.scrollIntoView({ behavior: "instant", block: "start" });
+ const focusTarget = target.querySelector("input, a, button") || target;
+ if (!focusTarget.hasAttribute("tabindex") && focusTarget === target) focusTarget.setAttribute("tabindex", "-1");
+ focusTarget.focus({ preventScroll: true });
+ }, [frontDoorOpen, entranceDestination]);
+ const [menuOpen, setMenuOpen] = useState(false);
+ const [activeField, setActiveField] = useState(0);
+ const [portalOpen, setPortalOpen] = useState(false);
+ const [portalForming, setPortalForming] = useState(false);
+ const [portalClosing, setPortalClosing] = useState(false);
+ const [heroRevealed, setHeroRevealed] = useState(false);
+ const [isNight, setIsNight] = useState(false);
+ const [arrivalTarget, setArrivalTarget] = useState(null);
+ const heroRef = useRef(null);
+ const fieldTrackRef = useRef(null);
+ const spearTrackRef = useRef(null);
+ const [activeSpear, setActiveSpear] = useState(0);
+ const heroRevealTimerRef = useRef(null);
+ const portalTimerRef = useRef(null);
+ const portalFormTimerRef = useRef(null);
+ const arrivalTimerRef = useRef(null);
+
+ useEffect(() => {
+ const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+ const visible = new Set();
+ const videos = Array.from(document.querySelectorAll("video[data-scene]"));
+ const update = () => videos.forEach((video) => {
+ const scene = video.dataset.scene;
+ const matchesTheme = scene === "manifesto" || scene === (isNight ? "dark" : "light");
+ if (!frontDoorOpen && !document.hidden && !preference.matches && matchesTheme && visible.has(video)) {
+ void video.play().catch(() => { /* Poster remains available if autoplay is blocked. */ });
+ } else video.pause();
+ });
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ const video = entry.target as HTMLVideoElement;
+ if (entry.isIntersecting) visible.add(video);
+ else visible.delete(video);
+ });
+ update();
+ });
+ videos.forEach((video) => observer.observe(video));
+ preference.addEventListener("change", update);
+ document.addEventListener("visibilitychange", update);
+ return () => {
+ observer.disconnect();
+ videos.forEach((video) => video.pause());
+ preference.removeEventListener("change", update);
+ document.removeEventListener("visibilitychange", update);
+ };
+ }, [frontDoorOpen, isNight]);
+
+ const revealHero = () => {
+ if (heroRevealTimerRef.current) window.clearTimeout(heroRevealTimerRef.current);
+ setHeroRevealed(true);
+ };
+
+ const restHero = () => {
+ if (heroRevealTimerRef.current) window.clearTimeout(heroRevealTimerRef.current);
+ heroRevealTimerRef.current = window.setTimeout(() => setHeroRevealed(false), 2200);
+ };
+
+ const scrollToSection = (destination: "guild" | "spears" | "work" | "contact") => {
+ const target = document.getElementById(destination);
+ if (!target) return;
+ const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ target.scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth", block: "start" });
+ if (arrivalTimerRef.current) window.clearTimeout(arrivalTimerRef.current);
+ setArrivalTarget(destination);
+ arrivalTimerRef.current = window.setTimeout(() => setArrivalTarget(null), reduceMotion ? 0 : 1800);
+ };
+
+ const followSectionLink = (
+ event: MouseEvent,
+ destination: "guild" | "spears" | "work" | "contact",
+ departHero = false,
+ ) => {
+ event.preventDefault();
+ if (departHero) setHeroRevealed(false);
+ scrollToSection(destination);
+ };
+
+ const openPortal = () => {
+ if (portalFormTimerRef.current) window.clearTimeout(portalFormTimerRef.current);
+ setPortalOpen(true);
+ setPortalForming(true);
+ portalFormTimerRef.current = window.setTimeout(() => setPortalForming(false), 3400);
+ };
+
+ const dismissPortal = (destination?: "contact" | "spears") => {
+ if (portalClosing) return;
+ if (portalFormTimerRef.current) window.clearTimeout(portalFormTimerRef.current);
+ setPortalForming(false);
+ setPortalClosing(true);
+ portalTimerRef.current = window.setTimeout(() => {
+ setPortalOpen(false);
+ setPortalClosing(false);
+ if (destination) scrollToSection(destination);
+ }, destination ? 920 : 620);
+ };
+
+ const joinGuild = () => {
+ window.open("https://portal.raidguild.org", "_blank", "noopener,noreferrer");
+ dismissPortal();
+ };
+
+ useEffect(() => () => {
+ if (heroRevealTimerRef.current) window.clearTimeout(heroRevealTimerRef.current);
+ if (portalTimerRef.current) window.clearTimeout(portalTimerRef.current);
+ if (portalFormTimerRef.current) window.clearTimeout(portalFormTimerRef.current);
+ if (arrivalTimerRef.current) window.clearTimeout(arrivalTimerRef.current);
+ }, []);
+
+ useEffect(() => {
+ const root = document.documentElement;
+ const media = window.matchMedia("(prefers-color-scheme: dark)");
+ const stored = window.localStorage.getItem("raidguild-theme");
+ const initialTheme = stored === "light" || stored === "dark"
+ ? stored
+ : media.matches ? "dark" : "light";
+
+ root.dataset.theme = initialTheme;
+ root.style.colorScheme = initialTheme;
+ setIsNight(initialTheme === "dark");
+
+ const followSystem = (event: MediaQueryListEvent) => {
+ if (window.localStorage.getItem("raidguild-theme")) return;
+ const theme = event.matches ? "dark" : "light";
+ root.dataset.theme = theme;
+ root.style.colorScheme = theme;
+ setIsNight(event.matches);
+ };
+
+ media.addEventListener("change", followSystem);
+ return () => media.removeEventListener("change", followSystem);
+ }, []);
+
+ const toggleTheme = () => {
+ const theme = isNight ? "light" : "dark";
+ document.documentElement.dataset.theme = theme;
+ document.documentElement.style.colorScheme = theme;
+ window.localStorage.setItem("raidguild-theme", theme);
+ setIsNight(theme === "dark");
+ };
+
+ const closestCard = (track: HTMLDivElement) => {
+ const cards = Array.from(track.children) as HTMLElement[];
+ const start = track.getBoundingClientRect().left + parseFloat(getComputedStyle(track).paddingLeft);
+ return cards.reduce((best, card, index) =>
+ Math.abs(card.getBoundingClientRect().left - start) < Math.abs(cards[best].getBoundingClientRect().left - start)
+ ? index
+ : best, 0);
+ };
+ const updateActiveField = () => {
+ if (fieldTrackRef.current) setActiveField(closestCard(fieldTrackRef.current));
+ };
+ const moveCard = (track: HTMLDivElement | null, direction: number) => {
+ if (!track) return;
+ const cards = Array.from(track.children) as HTMLElement[];
+ const next = Math.max(0, Math.min(cards.length - 1, closestCard(track) + direction));
+ const left = cards[next].getBoundingClientRect().left - track.getBoundingClientRect().left + track.scrollLeft - parseFloat(getComputedStyle(track).paddingLeft);
+ track.scrollTo({ left, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+ };
+
+ useEffect(() => {
+ const root = document.documentElement;
+ const updatePointer = (event: PointerEvent) => {
+ const x = event.clientX / window.innerWidth - 0.5;
+ const y = event.clientY / window.innerHeight - 0.5;
+ root.style.setProperty("--neo-pointer-x", x.toFixed(3));
+ root.style.setProperty("--neo-pointer-y", y.toFixed(3));
+ root.style.setProperty("--neo-sky-x", `${(x * 10).toFixed(1)}px`);
+ root.style.setProperty("--neo-land-x", `${(x * -10).toFixed(1)}px`);
+ root.style.setProperty("--neo-title-x", `${(x * 8).toFixed(1)}px`);
+ };
+
+ window.addEventListener("pointermove", updatePointer, { passive: true });
+ return () => window.removeEventListener("pointermove", updatePointer);
+ }, []);
+
+ useEffect(() => {
+ let frame = 0;
+ const updateScroll = () => {
+ if (frame) return;
+ frame = window.requestAnimationFrame(() => {
+ const hero = heroRef.current;
+ if (hero) {
+ const travel = Math.max(hero.offsetHeight - window.innerHeight, 1);
+ const distance = Math.min(Math.max(window.scrollY - hero.offsetTop, 0), travel);
+ const progress = distance / travel;
+ const root = document.documentElement;
+ root.style.setProperty("--neo-progress", progress.toFixed(3));
+ root.style.setProperty("--neo-sky-y", `${(distance * 0.035).toFixed(1)}px`);
+ root.style.setProperty("--neo-fore-y", `${(distance * -0.34).toFixed(1)}px`);
+ root.style.setProperty("--neo-copy-y", `${(distance * -0.3).toFixed(1)}px`);
+ root.style.setProperty("--neo-meta-y", `${(distance * -0.18).toFixed(1)}px`);
+ root.style.setProperty("--neo-copy-opacity", (1 - progress * 0.72).toFixed(3));
+ root.style.setProperty("--neo-meta-opacity", (1 - progress).toFixed(3));
+ }
+ frame = 0;
+ });
+ };
+
+ updateScroll();
+ window.addEventListener("scroll", updateScroll, { passive: true });
+ window.addEventListener("resize", updateScroll, { passive: true });
+ return () => {
+ window.removeEventListener("scroll", updateScroll);
+ window.removeEventListener("resize", updateScroll);
+ if (frame) window.cancelAnimationFrame(frame);
+ };
+ }, []);
+
+ return (
+ <>
+
+ {frontDoorOpen && }
+
+
+
+
+
+
+ TRANSIT READY OPEN A PORTAL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Independent digital mercenaries
+
+
VENTURE BEYOND
+ {heroRevealed ? "THE WORLD IS OPEN" : "HOVER TO LOOK BEYOND"}
+
+
+
+
+ TRANSMISSION
+ 001
+
+
<<< SCROLL TO DESCEND
+
+
+
+
+
+
+
+
+
+
+ {['ONE GUILD', 'MANY EDGES', 'BUILDER-OWNED', 'APPLIED AI', 'ONCHAIN SYSTEMS', 'OPEN EXPERIMENTS'].map(word => {word} )}
+
+
+
+
+
+
+
+
[ THE GUILD ]
+
The networkis the engine
+
+
+ RaidGuild is a builder-owned community exploring emerging technology together.{" "}
+ Designers, engineers, researchers, strategists, and operators share knowledge, reputation, and infrastructure.
+
+
We learn from one another, test ideas, and build lasting relationships. Shared work grows from those connections, from open experiments to independent specialist practices.
+
+
+
Read the handbook ↗
+
+
+ 150 GLOBAL MEMBERS
+ 88+ RAIDS SHIPPED ACROSS THE FRONTIER
+ ∞ QUESTIONS TO EXPLORE
+ 2019 BUILDING TOGETHER SINCE
+
+
+
+
+
+
+
+
[ CURRENT STEWARDS ]
+
Keepers ofthe signal
+
Stewards help care for the Guild’s shared knowledge, infrastructure, coordination, and public voice.
+
+
+
+
+
+ {stewards.map((steward, index) => {
+ const card = (
+ <>
+
+ ST—{String(index + 1).padStart(2, "0")}
+ {steward.href ? "↗" : "·"}
+
+
+
+
+
{steward.role}
+
{steward.name}
+
{steward.project}
+ >
+ );
+
+ return steward.href ? (
+
{card}
+ ) : (
+
{card}
+ );
+ })}
+
+
+
+
+
+
+
+
+
[ THE TEAM ]
+
A WIDE NETWORKOF BUILDERS
+
Different skills, backgrounds, and curiosities. Get to know the people who share what they learn and make more possible together.
+
+ Enter Discord
+
+
+
+
+
+
+
+
[ ACTIVE SPEARS ]
+
Specialized atthe applied edge
+
+
The Guild is the center of gravity. These independently led practices are its tips of the spear, turning shared experience into focused offerings with their own teams and direction.
+
+ Find your starting point
+
+
+
+
+
+
{String(activeSpear + 1).padStart(2, "0")} / 04
+
+ moveCard(spearTrackRef.current, -1)}>←
+ moveCard(spearTrackRef.current, 1)}>→
+
+
+ { if (spearTrackRef.current) setActiveSpear(closestCard(spearTrackRef.current)); }}>
+ {activeSpears.map((item) => (
+
+
+ SP—{item.index}
+ {item.status}
+
+
+
+
+ RAIDGUILD PRACTICE / VERIFIED SPEAR
+ {item.tag}
+ {item.title}
+ {item.copy}
+
+
+ ))}
+
+ SP—03 PROPOSED
+
+
+
+ RAIDGUILD NETWORK / PROPOSED SPEAR
+ TALENT / PLACEMENT SERVICES
+ Talent & Placement
+ A proposed practice connecting people in the Guild with teams beyond it. Share the skills you’re looking for and help us explore where the network can make a useful connection.
+
+
+
+ SP—?? UNMAPPED
+
+
+
+ RAIDGUILD NETWORK / SHARED INTAKE
+ GUILD-LEVEL DISCOVERY
+ A new direction
+ Not every project fits an existing practice. Share what you're exploring and we can help you find a conversation to start within the network.
+ Start a transmission ↘
+
+
+
+
+
+
+
[ SELECTED EXPEDITIONS ]
+
Proof fromthe frontier
+
+
Work and ideas emerging from the network. Explore what members build, the questions they follow, and what they learn along the way.
+
+ Read community posts
+
+
+
+
+
+
+
Across the network, we’ve built with and contributed to
+
+ {networkLogos.map((logo) => (
+
+
+
+ ))}
+
+
Clients, collaborators, and member-built projects.
+
+
+
+
{String(activeField + 1).padStart(2, "0")} / {String(fieldNotes.length).padStart(2, "0")}
+
+ moveCard(fieldTrackRef.current, -1)}>←
+ moveCard(fieldTrackRef.current, 1)}>→
+
+
+
+
+ {fieldNotes.map((note) => (
+
+
+
+ FIELD NOTE / {note.issue}
+
+
+
{note.code}
+
{note.type}
+
{note.title}
+
{note.abstract}
+
Read the field notes ↗
+
+
STATUS {note.status}
+
SECTOR {note.sector}
+
CREW {note.crew}
+
+
+
+ ))}
+
+
+
+
+
+ [ THE RAIDGUILD CREED ]
+
+ The future is not something to predict. It is something to build.
+
+
+ NO SPECTATORS
+
+ OPEN TERRITORY
+
+
+
+
+
+
+
+
+ dismissPortal()}
+ onSpears={() => dismissPortal("spears")}
+ onProblem={() => dismissPortal("contact")}
+ onJoin={joinGuild}
+ />
+
+
+ >
+ );
+}
diff --git a/src/components/LoopBand.tsx b/src/components/LoopBand.tsx
new file mode 100644
index 0000000..a1bacc1
--- /dev/null
+++ b/src/components/LoopBand.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import styles from "./HomeExperience.module.css";
+
+export default function LoopBand({ children, label, reverse = false }: { children: ReactNode; label: string; reverse?: boolean }) {
+ const [paused, setPaused] = useState(false);
+ return
+
+
+
{children}
+
{children}
+
+
+ setPaused(!paused)} aria-label={`${paused ? "Resume" : "Pause"} ${label}`} aria-pressed={paused}>{paused ? "▶" : "Ⅱ"}
+ ;
+}
diff --git a/src/components/PortalEnergy.tsx b/src/components/PortalEnergy.tsx
new file mode 100644
index 0000000..df3b1fc
--- /dev/null
+++ b/src/components/PortalEnergy.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+// Adapted from portal-artifacts/studies/portal-motion/app/page.tsx.
+// Mixed-palette filament and spark study; optional destination artwork stays behind the rim.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import styles from './HomeExperience.module.css';
+
+type Settings = { mixed: boolean; scale: number; hue: number; saturation: number; lightness: number; energy: number; speed: number; oval: number; paused: boolean; hover: boolean; replay: number; enter: number; reduced: boolean };
+type Spark = { tint:number; x:number; y:number; vx:number; vy:number; life:number; age:number; size:number };
+const TAU = Math.PI * 2;
+const mixColors = [[238,61,121],[215,227,78],[185,224,223],[239,233,215]];
+// Interpolate actual palette RGB values, avoiding unrelated rainbow hues.
+function mixedColor(angle:number,alpha:number,light:number){
+ const position=((angle/TAU%1)+1)%1*mixColors.length;
+ const index=Math.floor(position),blend=position-index;
+ const a=mixColors[index],b=mixColors[(index+1)%mixColors.length];
+ const heat=Math.max(0,Math.min(1,(light-60)/40));
+ const rgb=a.map((channel,i)=>{const base=channel+(b[i]-channel)*blend;return Math.round(base+(255-base)*heat);});
+ return `rgba(${rgb.join(',')},${Math.max(0,alpha)})`;
+}
+const wave = (a:number,t:number) => Math.sin(a*7+t*1.7)*.46 + Math.sin(a*13-t*2.1)*.25 + Math.sin(a*29+t*3)*.16 + Math.sin(a*53-t*1.2)*.08;
+
+export default function PortalEnergy({ energized = false, destinationSrc }: { energized?: boolean; destinationSrc?: string }) {
+ const [reduced, setReduced] = useState(false);
+ useEffect(() => {
+ const query = matchMedia('(prefers-reduced-motion: reduce)');
+ const update = () => setReduced(query.matches);
+ update(); query.addEventListener('change', update);
+ return () => query.removeEventListener('change', update);
+ }, []);
+ const settings: Settings = useMemo(() => ({ mixed: true, scale: 1, hue: 339.66, saturation: 83.89, lightness: 58.63, energy: 1.8, speed: 1.15, oval: .55, paused: reduced, hover: energized, replay: 0, enter: 0, reduced }), [energized, reduced]);
+ const canvas = useRef(null);
+ const live = useRef(settings);
+ useEffect(() => { live.current = settings; }, [settings]);
+ useEffect(() => {
+ const el = canvas.current!;
+ const context = el.getContext('2d', { alpha: true });
+ if (!context) return;
+ const ctx: CanvasRenderingContext2D = context;
+ let width=0,height=0,frame=0,last=0,time=0,opening=0,hover=0,travel=0,replay=-1,enter=0;
+ let sparks:Spark[]=[];
+ let previous:Settings | null=null;
+ let dirty=true;
+ let destinationReady=false;
+ const destination=new Image();
+ // Bake two blur levels once; crossfade them without filtering a full canvas every frame.
+ const views=[document.createElement('canvas'),document.createElement('canvas')];
+ destination.onload=()=>{
+ for(let i=0;i {
+ dirty=true;
+ width=el.clientWidth; height=el.clientHeight;
+ const dpr=Math.min(window.devicePixelRatio || 1,2);
+ el.width=width*dpr; el.height=height*dpr; ctx.setTransform(dpr,0,0,dpr,0,0);
+ };
+ const observer=new ResizeObserver(resize); observer.observe(el); resize();
+ function draw(now:number) {
+ frame=requestAnimationFrame(draw);
+ const s=live.current;
+ const dt=Math.min((now-last)/1000 || .016,.035); last=now;
+ if(document.hidden) return;
+ if(s.paused && previous===s && !dirty) return;
+ previous=s;dirty=false;
+ const step=s.reduced || s.paused ? 0 : dt;
+ if(replay!==s.replay){ replay=s.replay; opening=s.reduced?1:0; sparks=[]; travel=0; }
+ if(enter!==s.enter){enter=s.enter;travel=.001;}
+ if(travel>0){travel+=dt*.55; if(travel>1){travel=0;opening=0;sparks=[];}}
+ opening=Math.min(1,opening+dt*.65);
+ hover+=(Number(s.hover)-hover)*Math.min(1,dt*4);
+ time+=step*s.speed*(1+hover*.5);
+ const o=s.reduced?1:1-Math.pow(1-opening,3);
+ const zoom=1+Math.pow(travel,3)*9;
+ const r=height*.32*s.scale*(.08+.92*o)*zoom;
+ const ratio=Math.min(.9,width*.25/Math.max(r,1));
+ const cx=width*.5,cy=height*.47;
+ const energy=s.energy*(1+hover*.65);
+ const color=(alpha:number,light=60,angle=0) => s.mixed ? mixedColor(angle-time*.15,alpha,light) : `hsla(${s.hue},${s.saturation}%,${Math.min(97, s.lightness + (light-60)*(100-s.lightness)/40)}%,${alpha})`;
+ ctx.clearRect(0,0,width,height);
+ // Light cast below the opening.
+ ctx.save(); ctx.translate(cx,cy+r*1.25); ctx.scale(1,.13);
+ const floor=ctx.createRadialGradient(0,0,0,0,0,r*1.5);
+ floor.addColorStop(0,color(.14*o));floor.addColorStop(1,color(0));ctx.fillStyle=floor;
+ ctx.fillRect(-r*1.6,-r*1.6,r*3.2,r*3.2);ctx.restore();
+ ctx.save();ctx.translate(cx,cy);ctx.scale(ratio,1);
+ const haze=ctx.createRadialGradient(0,0,r*.72,0,0,r*1.5);
+ haze.addColorStop(0,color(0));haze.addColorStop(.36,color(.1*energy));haze.addColorStop(1,color(0));
+ ctx.fillStyle=haze;ctx.fillRect(-r*1.5,-r*1.5,r*3,r*3);
+ // A destination sits behind the rim, softened by the portal membrane.
+ ctx.save();ctx.beginPath();ctx.arc(0,0,r*.978,0,TAU);ctx.clip();
+ ctx.fillStyle='#080f20';ctx.fillRect(-r,-r,r*2,r*2);
+ if(destinationReady){
+ ctx.save();
+ // Undo the portal's ellipse transform so the landscape keeps natural proportions.
+ ctx.scale(1/ratio,1);
+ const size=r*2.18*(1+hover*.035+travel*.16);
+ const driftX=s.reduced?0:Math.sin(time*.16)*r*.018;
+ const driftY=s.reduced?0:Math.cos(time*.12)*r*.012;
+ const reveal=s.reduced?0:Math.min(1,hover*.8+travel);
+ ctx.globalAlpha=.76+hover*.12;
+ ctx.drawImage(views[0],-size/2+driftX,-size/2+driftY,size,size);
+ ctx.globalAlpha=reveal*(.76+hover*.12);
+ ctx.drawImage(views[1],-size/2+driftX,-size/2+driftY,size,size);
+ ctx.restore();
+ }
+ for(let i=0;i<8;i++){
+ const a=i*2.399+time*(.025+i*.003);
+ const x=Math.cos(a)*r*.65,y=Math.sin(a*1.2+time*.04)*r*.55;
+ const fog=ctx.createRadialGradient(x,y,0,x,y,r*(.55+i*.018));
+ fog.addColorStop(0,`hsla(${s.hue+i*5},${s.saturation}%,${18+hover*7}%,.16)`);fog.addColorStop(1,color(0));
+ ctx.fillStyle=fog;ctx.fillRect(-r,-r,r*2,r*2);
+ }
+ const depth=ctx.createRadialGradient(-r*.12,-r*.1,0,0,0,r);
+ depth.addColorStop(0,'rgba(8,15,32,.06)');depth.addColorStop(.65,'rgba(8,15,32,.14)');depth.addColorStop(.92,'rgba(8,15,32,.48)');depth.addColorStop(1,color(.3));
+ ctx.fillStyle=depth;ctx.fillRect(-r,-r,r*2,r*2);ctx.restore();
+ ctx.globalCompositeOperation='lighter';
+ // Broken, moving filaments share a noisy edge, rather than separate perfect rings.
+ for(let layer=0;layer<36;layer++){
+ const a0=layer*2.399+time*(.55+(layer%5)*.12);
+ const length=.35+(Math.sin(layer*13.7)*.5+.5)*(s.mixed?.8:2.1);
+ ctx.beginPath();
+ for(let j=0;j<=64;j++){
+ const a=a0+j/64*length;
+ const n=wave(a,time+layer*.05);
+ const rr=r+(n*5+(layer-18)*.34+Math.sin(a*21-time*5+layer)*1.3)*(r/220);
+ const x=Math.cos(a)*rr,y=Math.sin(a)*rr;
+ if(j===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
+ }
+ ctx.lineWidth=(layer%6===0?2.1:.65)*(r/220);
+ ctx.strokeStyle=color((layer%6===0?.22:.42)*Math.min(energy,1.7),layer%5===0?86:59,a0+length/2);
+ ctx.shadowColor=color(.8,60,a0+length/2);ctx.shadowBlur=layer%6===0?15:3;ctx.stroke();
+ }
+ ctx.shadowBlur=0;ctx.restore();
+ if(step>0 && opening>.12){
+ const count=Math.floor((230+energy*490)*step);
+ for(let i=0;ip.age.7){ctx.fillStyle=`rgba(239,233,215,${Math.sin((travel-.7)/.3*Math.PI)*.2})`;ctx.fillRect(0,0,width,height);}
+ }
+ frame=requestAnimationFrame(draw);
+ return()=>{cancelAnimationFrame(frame);observer.disconnect();destination.onload=null;};
+ },[destinationSrc]);
+ return ;
+}
diff --git a/src/components/TeamWall.tsx b/src/components/TeamWall.tsx
new file mode 100644
index 0000000..d3a7118
--- /dev/null
+++ b/src/components/TeamWall.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import type { Mercenary } from "@/lib/data/members";
+import styles from "./HomeExperience.module.css";
+
+export default function TeamWall({ members }: { members: Mercenary[] }) {
+ const viewport = useRef(null);
+ const paused = useRef(false);
+ const hover = useRef(false);
+ const focused = useRef(false);
+ const drag = useRef<{ x: number; scroll: number; moved: boolean } | null>(null);
+ const resumeAt = useRef(0);
+ const suppressClick = useRef(false);
+ const [isPaused, setPaused] = useState(false);
+
+ useEffect(() => {
+ const element = viewport.current;
+ if (!element) return;
+ const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+ let visible = false;
+ let frame = 0;
+ let previous = 0;
+ let position = element.scrollLeft;
+ const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; });
+ observer.observe(element);
+ const tick = (now: number) => {
+ const elapsed = Math.min(now - previous, 50);
+ previous = now;
+ if (visible && !document.hidden && !motion.matches && !paused.current && !hover.current && !focused.current && !drag.current && now > resumeAt.current) {
+ const group = element.firstElementChild?.firstElementChild as HTMLElement | null;
+ const distance = group ? group.getBoundingClientRect().width + 14 : 0;
+ if (distance > 0) {
+ position = (position + elapsed * .018) % distance;
+ element.scrollLeft = position;
+ }
+ } else {
+ position = element.scrollLeft;
+ }
+ frame = requestAnimationFrame(tick);
+ };
+ frame = requestAnimationFrame(tick);
+ return () => { cancelAnimationFrame(frame); observer.disconnect(); };
+ }, []);
+
+ return (
+
+
{ if (event.pointerType === "mouse") hover.current = true; }}
+ onPointerLeave={(event) => { if (event.pointerType === "mouse") { hover.current = false; if (drag.current && !drag.current.moved) drag.current = null; } }}
+ onFocusCapture={() => { focused.current = true; }}
+ onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) focused.current = false; }}
+ onWheel={() => { resumeAt.current = performance.now() + 2500; }}
+ onPointerDown={(event) => {
+ if (event.button !== 0) return;
+ suppressClick.current = false;
+ drag.current = { x: event.clientX, scroll: event.currentTarget.scrollLeft, moved: false };
+ }}
+ onPointerMove={(event) => {
+ const start = drag.current;
+ if (!start || event.pointerType !== "mouse") return;
+ const delta = event.clientX - start.x;
+ if (Math.abs(delta) > 5) {
+ start.moved = true;
+ suppressClick.current = true;
+ event.currentTarget.setPointerCapture(event.pointerId);
+ event.currentTarget.scrollLeft = start.scroll - delta;
+ }
+ }}
+ onPointerUp={() => { drag.current = null; resumeAt.current = performance.now() + 2500; }}
+ onPointerCancel={() => { drag.current = null; resumeAt.current = performance.now() + 2500; }}
+ onLostPointerCapture={() => { drag.current = null; }}
+ onDragStart={(event) => event.preventDefault()}
+ onClickCapture={(event) => { if (suppressClick.current) { event.preventDefault(); suppressClick.current = false; } }}
+ >
+
+ {[0, 1].map((copy) => (
+
+ {members.map((member) => {
+ const content = <>
{member.name} {member.title} >;
+ return member.link
+ ?
{content}↗
+ :
{content}
;
+ })}
+
+ ))}
+
+
+
{ paused.current = !isPaused; setPaused(!isPaused); }}>
+ {isPaused ? "Resume movement" : "Pause movement"}
+
+
+ );
+}
diff --git a/src/components/UnchartedHunt.module.css b/src/components/UnchartedHunt.module.css
new file mode 100644
index 0000000..50dddfd
--- /dev/null
+++ b/src/components/UnchartedHunt.module.css
@@ -0,0 +1,24 @@
+.marker { position: relative; z-index: 4; width: fit-content; color: #efe9d7; font: 12px/1.5 var(--font-mono), monospace; text-align: left; }
+.marker summary { cursor: pointer; padding: 12px; list-style: none; }
+.marker summary::-webkit-details-marker { display: none; }
+.marker summary span { font-size: 10px; }
+.marker summary:hover, .marker summary:focus-visible { color: #d7e34d; }
+.rabbit summary { display: flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 6px; }
+.rabbit summary span { opacity: 0; transition: opacity .2s; }
+.rabbit summary:hover span, .rabbit summary:focus-visible span, .rabbit[open] summary span { opacity: 1; }
+.rabbit summary:focus-visible { outline: 2px solid #d7e34d; outline-offset: 3px; border-radius: 4px; }
+@media (hover: none) { .rabbit summary span { opacity: .7; } }
+@media (prefers-reduced-motion: reduce) { .rabbit summary span { transition: none; } }
+.note { background: #102d2c; border: 1px solid #b8e0df; border-radius: 12px; padding: 18px; width: min(320px, 80vw); max-height: 55vh; overflow: auto; box-shadow: 0 12px 40px #0006; }
+.note p { margin: 12px 0; font: inherit; }
+.note label { display: grid; gap: 6px; }
+.note input { width: 100%; min-width: 0; background: #efe9d7; color: #102d2c; padding: 10px; border-radius: 4px; }
+.note button, .note a { display: inline-block; color: #efe9d7; padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
+.note small { display: block; font-size: 10px; }
+.note :focus-visible { outline: 2px solid #d7e34d; outline-offset: 3px; }
+.marker[open] > .note { z-index: 5; }
+.pixel > summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
+.pixel > summary span { display: block; width: 5px; height: 5px; background: #b8e0df; box-shadow: 0 0 9px #b8e0df99; }
+.pixel > summary:hover span, .pixel[open] > summary span { background: #d7e34d; box-shadow: 0 0 12px #d7e34d99; }
+.pixel > summary:focus-visible { outline: 2px solid #d7e34d; outline-offset: 2px; border-radius: 4px; }
+.extraHint > summary { min-height: 44px; padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; }
diff --git a/src/components/UnchartedHunt.tsx b/src/components/UnchartedHunt.tsx
new file mode 100644
index 0000000..fe18fa1
--- /dev/null
+++ b/src/components/UnchartedHunt.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import styles from "./UnchartedHunt.module.css";
+
+const artifacts = {
+ portal: { name: "Portal Motion", clue: "I connect two places without being a road. What am I?", answer: "portal", url: "https://portal-artifacts-production.up.railway.app/portal-motion/" },
+ ship: { name: "Rift Plot", clue: "A ship sends me across the void so others know where it is. I am a…", answer: "signal", url: "https://portal-artifacts-production.up.railway.app/veydrift-mission-explorer/" },
+ walker: { name: "Desert Walker", clue: "Go fast alone. Go far…", answer: "together", url: "https://portal-artifacts-production.up.railway.app/desert-walker/" },
+} as const;
+type Key = keyof typeof artifacts;
+const keys = Object.keys(artifacts) as Key[];
+const storageKey = "raidguild.uncharted.v1";
+const hints: Record = {
+ portal: "A doorway between worlds. You just opened one.",
+ ship: "Not the message itself, but what carries it. A distress _____.",
+ walker: "Alone is fast. ________ is far.",
+};
+const welcome = String.raw`
+ __ __ _____ _ ____ ___ __ __ _____
+ \ \ / /| ____|| | / ___| / _ \ | \/ || ____|
+ \ \ /\ / / | _| | | | | | | | || |\/| || _|
+ \ V V / | |___ | |___| |___ | |_| || | | || |___
+ \_/\_/ |_____||_____|\____| \___/ |_| |_||_____|
+
+ A D V E N T U R E R
+ ──────────────────
+ Looking beneath the surface? You might be one of us.
+ Three destinations. One uncharted path.
+
+ raidguild.help() Start here
+ raidguild.clue("portal") Ask for a clue
+ raidguild.hint("portal") Get a stronger hint
+ raidguild.solve("portal", "…") Try an answer
+ raidguild.progress() Check your discoveries
+ raidguild.reset() Start again
+
+ No downloads, wallets, or pasted scripts required.
+ Prefer to explore visually? Follow the rabbit, then the ✧ marks.
+ Meet the Guild: https://portal.raidguild.org
+`;
+
+type Hunt = { found: Key[]; solve: (key: Key, answer: string) => string; reset: () => void };
+const HuntContext = createContext(null);
+
+export function UnchartedHunt({ children }: { children: ReactNode }) {
+ const [found, setFound] = useState([]);
+ const foundRef = useRef([]);
+ function save(next: Key[]) {
+ foundRef.current = next;
+ setFound(next);
+ try { localStorage.setItem(storageKey, JSON.stringify(next)); } catch { /* Play still works without storage. */ }
+ }
+ function solve(key: Key, answer: string) {
+ if (!keys.includes(key) || typeof answer !== "string") return 'Try raidguild.clue("portal"), "ship", or "walker".';
+ if (answer.trim().toLowerCase() !== artifacts[key].answer) return "Not quite. Follow the clue and try again.";
+ if (!foundRef.current.includes(key)) save([...foundRef.current, key]);
+ return `Discovered: ${artifacts[key].name}. ${artifacts[key].url}`;
+ }
+ useEffect(() => {
+ try {
+ const saved: unknown = JSON.parse(localStorage.getItem(storageKey) || "[]");
+ if (Array.isArray(saved)) {
+ const valid = keys.filter(key => saved.includes(key));
+ foundRef.current = valid;
+ setFound(valid);
+ }
+ } catch { /* Ignore invalid or unavailable storage. */ }
+ const api = {
+ help: () => 'Follow the rabbit in Open a Portal, then find ✧ beside the hero ship route and beneath the Creed. Glowing pixels offer extra hints. Commands: clue(key), hint(key), solve(key, answer), progress(), reset(). Keys: portal, ship, walker.',
+ clue: (key: Key) => artifacts[key]?.clue || "Choose portal, ship, or walker.",
+ hint: (key: Key) => hints[key] || "Choose portal, ship, or walker.",
+ solve,
+ progress: () => `${foundRef.current.length}/3 discovered: ${foundRef.current.join(", ") || "none yet"}`,
+ reset: () => { save([]); return "The path is uncharted again."; },
+ };
+ const host = window as typeof window & { raidguild?: typeof api; __raidguildGreeting?: boolean };
+ const previous = host.raidguild;
+ host.raidguild = api;
+ if (!host.__raidguildGreeting) { console.info(welcome); host.__raidguildGreeting = true; }
+ return () => { if (host.raidguild === api) host.raidguild = previous; };
+ // Commands read current discoveries through the ref, not a captured render.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ return save([]) }}>{children} ;
+}
+
+export function HuntMarker({ artifact, label, rabbit = false }: { artifact: Key; label: string; rabbit?: boolean }) {
+ const hunt = useContext(HuntContext);
+ const [answer, setAnswer] = useState("");
+ const [message, setMessage] = useState("");
+ if (!hunt) return null;
+ const unlocked = hunt.found.includes(artifact);
+ return
+
+ {rabbit ?
+
+
+
+ : "✧"} {label}
+
+
+
The Uncharted Portal
+ {rabbit &&
Some trails begin beneath the surface. Inspect closely. Or follow the clues right here.
}
+
{artifacts[artifact].clue}
+ {!unlocked &&
+ Another hint?
+ {hints[artifact]}
+ }
+ {!unlocked ?
:
Explore {artifacts[artifact].name} ↗ }
+
{unlocked ? `Artifact discovered. ${hunt.found.length}/3 found.` : message}
+
Opens an experimental Guild artifact in another tab. Progress stays on this device; visiting is optional.
+ {hunt.found.length === 3 &&
The uncharted path is yours. Discover the arcade ↗ Games may require Portal membership.
}
+
{ hunt.reset(); setMessage(""); setAnswer(""); }}>Reset discoveries
+
+ ;
+}
+
+export function HuntPixel({ artifact }: { artifact: Key }) {
+ return
+
+
+
+
+
A faint signal
+
{hints[artifact]}
+
Try this clue at the nearby {artifact === "portal" ? "rabbit" : "✧ mark"}. Tap the glowing pixel again to close.
+
+ ;
+}
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
index f53cf5c..25a0685 100644
--- a/src/lib/fonts.ts
+++ b/src/lib/fonts.ts
@@ -1,6 +1,16 @@
-import { EB_Garamond, Ubuntu_Mono } from "next/font/google";
+import { Ubuntu, Ubuntu_Mono } from "next/font/google";
import localFont from "next/font/local";
+// Openly licensed display alternative; preserve legacy typography on other routes.
+export const afacadFlux = localFont({
+ src: "../../public/fonts/AfacadFlux-Variable.ttf",
+ weight: "100 1000",
+ style: "normal",
+ variable: "--font-afacad",
+ display: "swap",
+});
+
+// Legacy display face, still used by the pre-redesign pages.
// Primary Display Font - Mazius Display
export const maziusDisplay = localFont({
src: [
@@ -19,12 +29,21 @@ export const maziusDisplay = localFont({
display: "swap",
});
-// Secondary Body Font - EB Garamond
-export const ebGaramond = EB_Garamond({
- subsets: ["latin"],
+// Secondary Body Font - EB Garamond (bundled to keep production builds deterministic)
+export const ebGaramond = localFont({
+ src: [
+ {
+ path: "../../public/fonts/EBGaramond-VariableFont_wght.ttf",
+ weight: "400 800",
+ style: "normal",
+ },
+ {
+ path: "../../public/fonts/EBGaramond-Italic-VariableFont_wght.ttf",
+ weight: "400 800",
+ style: "italic",
+ },
+ ],
variable: "--font-body",
- weight: ["400", "500", "600", "700"],
- style: ["normal", "italic"],
display: "swap",
});
@@ -34,3 +53,13 @@ export const ubuntuMono = Ubuntu_Mono({
weight: ["400", "700"],
display: "swap",
});
+
+// Figma's supporting/body face. Kept separate from the display fallback so the
+// hierarchy remains stable when the proprietary Grinder family is unavailable.
+export const ubuntu = Ubuntu({
+ subsets: ["latin"],
+ variable: "--font-ubuntu",
+ weight: ["400", "500", "700"],
+ style: ["normal", "italic"],
+ display: "swap",
+});