/* ============================================================
Leviathan Rise Advisory — landing
============================================================ */
:root {
--abyss: #030506;
--sea: #0b2229;
--teal: #4fb3c2;
--red: #e0231c;
--red-hot: #ff3b2f;
--ember: #ff7a3d;
--bone: #ece6dc;
--mist: #a8a39b;
--fog: #6c6760;
--line: rgba(236, 230, 220, 0.09);
--display: "Cinzel", "Trajan Pro", Georgia, serif;
--serif: "IM Fell English", "Iowan Old Style", Georgia, serif;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--gutter: max(16px, min(5vw, 80px));
--crack: url("data:image/svg+xml;utf8,");
--fog-tex: url("data:image/svg+xml;utf8,");
--lava: url("data:image/svg+xml;utf8,");
color-scheme: dark;
}
*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--abyss); }
body {
margin: 0;
background: var(--abyss);
color: var(--bone);
font-family: var(--serif);
font-size: 18px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
::selection { background: var(--red); color: #fff; }
a { color: inherit; }
img { max-width: 100%; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------- textured lettering ---------- */
.lava-text,
.stone-text {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 260px 260px, 100% 100%;
}
.lava-text {
background-image: var(--crack), linear-gradient(180deg, #ffd6a8 0%, #ff6a36 22%, #e3241a 52%, #8e0c07 80%, #3d0302 100%);
filter: drop-shadow(0 0 16px rgba(255, 59, 47, 0.55)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8));
}
.stone-text {
background-image: var(--crack), linear-gradient(180deg, #fbf7f0 0%, #d9d2c6 40%, #8e877d 100%);
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(0, 0, 0, 0.6));
}
/* ============================================================
LOADER
============================================================ */
.loader {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
--s: min(190px, 44vw);
}
.loader__half {
position: absolute;
left: 0;
right: 0;
height: 50.5%;
background: radial-gradient(ellipse 60% 80% at 50% 100%, #12090a, var(--abyss) 70%);
}
.loader__half--top { top: 0; }
.loader__half--bottom { bottom: 0; background: radial-gradient(ellipse 60% 80% at 50% 0%, #12090a, var(--abyss) 70%); }
.loader__core {
position: relative;
z-index: 2;
width: var(--s);
height: var(--s);
}
.loader__eclipse { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loader__ring { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px #ff3b2f); transform: rotate(-90deg); transform-origin: center; }
.loader__corona { opacity: 0; transform-origin: center; }
.loader__disc { opacity: 0; }
.loader__meta {
position: absolute;
left: 0;
right: 0;
width: max-content;
margin-inline: auto;
top: calc(100% + 40px);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
white-space: nowrap;
font-family: var(--display);
text-transform: uppercase;
}
.loader__label { font-size: 11px; letter-spacing: 0.6em; margin-right: -0.6em; color: var(--fog); }
.loader__depth { font-size: 15px; letter-spacing: 0.3em; color: var(--red-hot); font-variant-numeric: tabular-nums; }
.loader__seam {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
z-index: 3;
background: linear-gradient(90deg, transparent, #ff6a3d 20%, #fff 50%, #ff6a3d 80%, transparent);
box-shadow: 0 0 24px 4px rgba(255, 59, 47, 0.8);
transform: scaleX(0);
}
/* ---------- ambient ---------- */
#abyss {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.vignette {
position: fixed;
inset: 0;
z-index: 48;
pointer-events: none;
background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}
.grain {
position: fixed;
inset: -4%;
z-index: 50;
pointer-events: none;
opacity: 0.09;
background-image: url("data:image/svg+xml;utf8,");
animation: grain 1s steps(5) infinite;
}
@keyframes grain {
0% { transform: translate(0, 0); }
25% { transform: translate(-3%, 2%); }
50% { transform: translate(2%, -3%); }
75% { transform: translate(-2%, -1%); }
100% { transform: translate(0, 0); }
}
.cursor-glow {
position: fixed;
left: 0;
top: 0;
width: 560px;
height: 560px;
margin: -280px 0 0 -280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 90, 50, 0.09) 0%, rgba(224, 35, 28, 0.04) 35%, transparent 70%);
pointer-events: none;
z-index: 47;
transform: translate3d(-999px, -999px, 0);
}
@media (hover: none) { .cursor-glow { display: none; } }
/* ---------- depth gauge ---------- */
.depth {
position: fixed;
right: clamp(12px, 2vw, 40px);
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
opacity: 0;
transition: opacity 0.6s;
}
.depth.is-visible { opacity: 1; }
.depth__track { width: 1px; height: 26vh; background: var(--line); position: relative; overflow: hidden; }
.depth__fill {
position: absolute;
inset: 0;
background: linear-gradient(var(--teal), var(--red-hot));
transform-origin: top;
transform: scaleY(0);
}
.depth__readout {
font-family: var(--display);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--mist);
writing-mode: vertical-rl;
font-variant-numeric: tabular-nums;
}
.depth__readout small { margin-top: 4px; color: var(--fog); }
@media (max-width: 760px) { .depth { display: none; } }
/* ---------- shared ---------- */
main { position: relative; z-index: 3; }
section { position: relative; padding: clamp(96px, 16vh, 200px) var(--gutter); }
.section-head { text-align: center; margin-bottom: clamp(48px, 8vh, 96px); }
.eyebrow {
font-family: var(--display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 20px;
display: inline-flex;
align-items: center;
gap: 16px;
}
.eyebrow::before,
.eyebrow::after {
content: "";
width: 40px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--red-hot));
box-shadow: 0 0 8px var(--red);
}
.eyebrow::after { transform: scaleX(-1); }
.h2 {
font-family: var(--display);
font-weight: 800;
font-size: clamp(34px, 5.4vw, 80px);
line-height: 1.05;
letter-spacing: 0.03em;
text-transform: uppercase;
margin: 0;
text-wrap: balance;
}
/* ============================================================
HERO
============================================================ */
.hero {
--band: clamp(150px, 24vh, 260px);
--cue: clamp(58px, 8vh, 84px);
height: 100vh;
height: 100svh;
min-height: 560px;
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, #080202 0%, #1c0404 24%, #241008 42%, #10191a 50%, #0a1b20 58%, #061317 74%, var(--abyss) 100%);
}
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30%;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(3, 5, 6, 0), rgba(3, 5, 6, 0.75) 60%, var(--abyss));
}
.sky {
position: absolute;
inset: 0 0 42% 0;
overflow: hidden;
-webkit-mask: linear-gradient(180deg, #000 55%, transparent);
mask: linear-gradient(180deg, #000 55%, transparent);
}
.sky__clouds {
position: absolute;
inset: -30% -20%;
background:
radial-gradient(ellipse 22% 40% at 16% 60%, rgba(220, 40, 25, 0.38), transparent 70%),
radial-gradient(ellipse 22% 40% at 84% 55%, rgba(210, 30, 20, 0.34), transparent 70%),
radial-gradient(ellipse 45% 30% at 50% 95%, rgba(255, 80, 40, 0.3), transparent 70%);
}
.sky__clouds::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -800px;
right: 0;
background: url("data:image/svg+xml;utf8,") 0 0 / 800px 400px;
animation: drift 90s linear infinite;
will-change: transform;
}
@keyframes drift { to { transform: translate3d(800px, 0, 0); } }
.sky__lightning {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 35% 70% at var(--lx, 70%) 25%, rgba(255, 140, 110, 0.7), transparent 70%);
opacity: 0;
}
.sea {
position: absolute;
inset: 50% 0 0 0;
overflow: hidden;
-webkit-mask: linear-gradient(180deg, transparent, #000 20%);
mask: linear-gradient(180deg, transparent, #000 20%);
}
.rays {
position: absolute;
inset: 0;
-webkit-mask: linear-gradient(180deg, #000, transparent 85%);
mask: linear-gradient(180deg, #000, transparent 85%);
}
.rays i {
position: absolute;
top: -10%;
width: 12vw;
height: 120%;
background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(120, 220, 235, 0.16), rgba(63, 167, 184, 0.04) 55%, transparent 75%);
transform-origin: top center;
animation: sway 11s ease-in-out infinite alternate;
}
.rays i:nth-child(1) { left: 4%; rotate: 16deg; }
.rays i:nth-child(2) { left: 22%; rotate: 8deg; width: 6vw; animation-duration: 9s; }
.rays i:nth-child(3) { left: 62%; rotate: -8deg; width: 5vw; animation-duration: 13s; }
.rays i:nth-child(4) { left: 78%; rotate: -14deg; animation-duration: 10s; }
.rays i:nth-child(5) { left: 92%; rotate: -20deg; width: 8vw; animation-duration: 8s; }
@keyframes sway {
0% { transform: skewX(-6deg); opacity: 0.5; }
100% { transform: skewX(6deg); opacity: 1; }
}
/* the key art: fills landscape screens, sits at full height with feathered edges on ultrawides */
.hero__art {
position: absolute;
inset: 0 0 auto 0;
height: calc(100% - var(--band) * 0.8);
display: flex;
justify-content: center;
}
.hero__art picture { display: block; height: 100%; width: 100%; }
.hero__art img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
-webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%);
mask: linear-gradient(180deg, #000 72%, transparent 100%);
animation: breathe-art 24s ease-in-out infinite alternate;
transform-origin: 50% 40%;
}
@keyframes breathe-art { to { transform: scale(1.05); } }
/* living key art: WebGL takes over from the still once it's ready */
.hero__gl {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s;
-webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%);
mask: linear-gradient(180deg, #000 72%, transparent 100%);
animation: breathe-art 24s ease-in-out infinite alternate;
transform-origin: 50% 40%;
}
.hero__art.has-gl .hero__gl { opacity: 1; }
.hero__art.has-gl img { visibility: hidden; }
@media (min-aspect-ratio: 16/9) {
.hero__art img {
width: auto;
max-width: none;
aspect-ratio: 1672 / 941;
margin-inline: auto;
-webkit-mask:
linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
linear-gradient(180deg, #000 72%, transparent 100%);
-webkit-mask-composite: source-in;
mask:
linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) intersect,
linear-gradient(180deg, #000 72%, transparent 100%);
}
}
/* portrait & near-square: the transparent logo over the animated storm */
@media (max-aspect-ratio: 13/10) {
.hero { background: linear-gradient(180deg, #0d0203 0%, #2a0605 30%, #2c0b08 44%, #10191a 51%, #0a1b20 58%, #071519 74%, var(--abyss) 100%); }
.sky { inset: 0 0 42% 0; }
.sea { inset: 53% 0 0 0; }
/* logo and headline sit together as one cluster around the middle */
.hero__art {
inset: 0;
height: auto;
bottom: 47%;
align-items: flex-end;
padding-inline: max(12px, 3vw);
}
.hero__content {
top: 55%;
bottom: auto;
height: auto;
justify-content: flex-start;
}
.releasing { font-size: clamp(24px, 7vw, 56px); }
.hero__art picture { height: auto; }
.hero__gl { display: none; }
.hero__art.has-gl img { visibility: visible; }
.hero__art img {
height: auto;
width: 100%;
max-width: 900px;
margin-inline: auto;
object-fit: contain;
-webkit-mask: none;
mask: none;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(224, 35, 28, 0.25));
}
}
.fog {
position: absolute;
inset: 35% calc(-10% - 900px) 0 -10%;
will-change: transform;
pointer-events: none;
background: url("data:image/svg+xml;utf8,") 0 0 / 900px 300px;
opacity: 0.16;
-webkit-mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
animation: fogdrift 70s linear infinite;
}
@keyframes fogdrift { to { transform: translate3d(-900px, 0, 0); } }
.hero__content {
position: absolute;
left: var(--gutter);
right: var(--gutter);
bottom: var(--cue);
height: calc(var(--band) - var(--cue) * 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(8px, 1.6vh, 16px);
text-align: center;
z-index: 2;
}
.releasing {
margin: 0;
font-family: var(--display);
font-weight: 800;
font-size: min(clamp(26px, 4.6vw, 76px), 7vh);
line-height: 1;
letter-spacing: 0.18em;
margin-right: -0.18em;
text-transform: uppercase;
}
/* centred with margins, not `translate`: GSAP animates this, and it folds a CSS
translate into its own transform as fixed pixels measured at load */
.scroll-cue {
position: absolute;
left: 0;
right: 0;
width: max-content;
margin-inline: auto;
bottom: max(12px, env(safe-area-inset-bottom, 0px));
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
white-space: nowrap;
}
.scroll-cue__label {
font-family: var(--display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.5em;
margin-right: -0.5em;
text-transform: uppercase;
color: var(--bone);
text-shadow: 0 0 12px rgba(255, 59, 47, 0.6);
opacity: 0.95;
animation: cuePulse 3s ease-in-out infinite;
}
.scroll-cue__line {
position: relative;
width: 1px;
height: clamp(22px, 4vh, 40px);
background: linear-gradient(var(--red-hot), transparent);
overflow: hidden;
}
.scroll-cue__line i {
position: absolute;
left: 0;
top: -40%;
width: 1px;
height: 40%;
background: #fff;
box-shadow: 0 0 6px #fff;
animation: drip 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.scroll-cue:hover .scroll-cue__label { opacity: 1; color: #fff; }
.scroll-cue:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }
@keyframes drip { to { top: 110%; } }
@keyframes cuePulse { 50% { opacity: 0.55; } }
/* ============================================================
MANIFESTO
============================================================ */
.manifesto {
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding-block: clamp(110px, 20vh, 260px);
}
.manifesto__text {
font-family: var(--serif);
font-size: clamp(26px, 3.7vw, 56px);
line-height: 1.28;
margin: 0;
text-wrap: balance;
}
.manifesto__text em {
color: var(--red-hot);
text-shadow: 0 0 24px rgba(255, 59, 47, 0.55);
}
/* the tagline is longer than the other eyebrows; keep it on one line on phones */
@media (max-width: 520px) {
.manifesto .eyebrow { letter-spacing: 0.28em; gap: 10px; }
.manifesto .eyebrow::before,
.manifesto .eyebrow::after { width: 18px; }
}
/* ============================================================
BOUND LEVIATHAN
============================================================ */
.bound { padding: 0; }
.bound__stage {
position: relative;
height: 100vh;
height: 100svh;
overflow: hidden;
display: grid;
place-items: center;
}
.bound__stage::before,
.bound__stage::after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 2;
pointer-events: none;
}
.bound__stage::before { top: 0; height: 22%; background: linear-gradient(var(--abyss), rgba(3, 5, 6, 0)); }
.bound__stage::after { bottom: 0; height: 26%; background: linear-gradient(rgba(3, 5, 6, 0), var(--abyss)); }
.bound__glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 45% 40% at 50% 48%, rgba(224, 35, 28, 0.26), transparent 70%);
opacity: 0.3;
}
.bound__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chain-link { fill: none; stroke: url(#metal); stroke-width: 6; }
.chain-link--side { fill: #2a211d; stroke: #5e4c43; stroke-width: 1.5; }
.bound__fog {
position: absolute;
inset: 50% calc(-10% - 900px) 0 -10%;
will-change: transform;
background: url("data:image/svg+xml;utf8,") 0 0 / 900px 300px;
opacity: 0.12;
pointer-events: none;
-webkit-mask: linear-gradient(180deg, transparent, #000 45%);
mask: linear-gradient(180deg, transparent, #000 45%);
animation: fogdrift 50s linear infinite reverse;
}
/* centred with margins, not `translate`: GSAP scales the eye and would bake a CSS
translate into pixels at load, so a page that first loads at another size
(e.g. an embedded preview) leaves the eye off to the side */
.bound .eye {
position: absolute;
left: 0;
right: 0;
top: 46%;
margin: calc(var(--eye-w) * -871 / 1243 / 2) auto 0;
}
.eye {
--eye-w: min(480px, 74vw, 52vh);
position: relative;
width: var(--eye-w);
aspect-ratio: 1243 / 871;
}
.eye::before {
content: "";
position: absolute;
inset: -22%;
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 60, 30, 0.45), rgba(224, 35, 28, 0.12) 45%, transparent 70%);
animation: eyeGlow 6s ease-in-out infinite;
}
@keyframes eyeGlow { 50% { opacity: 0.6; } }
/* the graphic's own oval does the clipping; lids are cut to the same shape */
.eye__ball {
position: absolute;
inset: 0;
clip-path: ellipse(49.6% 49.4% at 50% 50%);
overflow: hidden;
}
.eye__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: 50.6% 57%;
animation: eyeBreathe 6s ease-in-out infinite;
}
@keyframes eyeBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.025); }
}
.eye__lids {
position: absolute;
inset: 0;
z-index: 2;
clip-path: ellipse(50% 50% at 50% 50%);
pointer-events: none;
}
.eye__lid {
position: absolute;
left: -10%;
right: -10%;
height: 56%;
background: var(--crack) 0 0 / 160px, linear-gradient(#0d0b0a, #1a1512);
z-index: 2;
}
.eye__lid--top { top: 0; border-bottom: 1px solid rgba(255, 59, 47, 0.6); border-radius: 0 0 50% 50% / 0 0 30% 30%; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9); }
.eye__lid--bottom { bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.9); }
.bound__captions {
position: absolute;
z-index: 3;
left: var(--gutter);
right: var(--gutter);
bottom: clamp(48px, 12vh, 140px);
display: grid;
text-align: center;
}
.cap {
grid-area: 1 / 1;
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(24px, 3.8vw, 58px);
letter-spacing: 0.06em;
text-transform: uppercase;
text-wrap: balance;
}
.cap__sub {
display: block;
margin-top: 14px;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
font-size: clamp(18px, 1.9vw, 26px);
color: var(--mist);
}
.cap--2 {
font-weight: 900;
font-size: clamp(38px, 7vw, 120px);
opacity: 0;
}
/* ============================================================
PILLARS
============================================================ */
.pillars__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
max-width: 1500px;
margin: 0 auto;
perspective: 1200px;
}
.pillar {
position: relative;
padding: 40px clamp(14px, 1.6vw, 30px) 44px;
text-align: center;
transform-style: preserve-3d;
}
.pillar + .pillar::before {
content: "";
position: absolute;
left: -10px;
top: 6%;
bottom: 6%;
width: 20px;
background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat;
filter: drop-shadow(0 0 4px var(--red)) drop-shadow(0 0 10px rgba(255, 59, 47, 0.6));
}
.pillar::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse at 50% 30%, rgba(224, 35, 28, 0.14), transparent 70%);
opacity: 0;
transition: opacity 0.5s;
}
.pillar:hover::after { opacity: 1; }
.pillar__icon {
width: 56px;
height: 56px;
fill: none;
stroke: var(--red-hot);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 6px rgba(255, 59, 47, 0.7));
display: block;
margin: 0 auto 22px;
transform: translateZ(40px);
transition: transform 0.6s var(--ease-out);
}
.pillar:hover .pillar__icon { transform: translateZ(40px) scale(1.12) rotate(-4deg); }
.pillar h3 {
font-family: var(--display);
font-weight: 700;
font-size: clamp(14px, 1.15vw, 18px);
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 10px;
line-height: 1.35;
color: var(--bone);
text-shadow: 0 2px 0 #000;
transform: translateZ(30px);
}
.pillar__kicker {
font-family: var(--serif);
font-style: italic;
font-size: clamp(16px, 1.2vw, 19px);
color: var(--mist);
margin: 0;
}
@media (max-width: 900px) {
.pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
.pillar:last-child { grid-column: 1 / -1; }
.pillar + .pillar::before { display: none; }
.pillar { border-top: 1px solid rgba(255, 59, 47, 0.22); }
}
@media (max-width: 520px) {
.pillars__grid { grid-template-columns: 1fr; }
.pillar { padding: 30px 8px 32px; }
}
/* ============================================================
CONTACT
============================================================ */
.contact {
min-height: 78vh;
min-height: 78svh;
display: grid;
align-items: center;
padding-bottom: clamp(140px, 18vh, 200px);
overflow: hidden;
}
.contact::before {
/* smoke rolling over the seam where the abyss meets the painting */
content: "";
position: absolute;
left: -10%;
right: calc(-10% - 900px);
top: 0;
height: 45%;
z-index: 1;
will-change: transform;
pointer-events: none;
background: var(--fog-tex) 0 0 / 900px 300px;
opacity: 0.2;
-webkit-mask: linear-gradient(180deg, transparent, #000 35%, #000 55%, transparent);
mask: linear-gradient(180deg, transparent, #000 35%, #000 55%, transparent);
animation: fogdrift 60s linear infinite;
}
.contact__art {
position: absolute;
inset: 0;
-webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 12%, #000 34%);
mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 12%, #000 34%);
}
.contact__art img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 28% 40%;
display: block;
}
.contact__gl {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s;
}
.contact__art.has-gl .contact__gl { opacity: 1; }
.contact__art.has-gl img { visibility: hidden; }
.contact__shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(3, 5, 6, 0) 25%, rgba(3, 5, 6, 0.55) 50%, rgba(3, 5, 6, 0.92) 75%),
linear-gradient(180deg, rgba(3, 5, 6, 0.7) 0%, rgba(3, 5, 6, 0) 25%, rgba(3, 5, 6, 0) 60%, var(--abyss) 100%);
}
.contact__body {
position: relative;
z-index: 2;
justify-self: end;
width: min(780px, 100%);
margin-right: clamp(0px, 5vw, 160px);
}
.contact__title {
font-family: var(--display);
font-weight: 900;
/* size the headline to the column so its longest line never overflows */
font-size: min(clamp(38px, 6vw, 96px), calc((100vw - 2 * var(--gutter)) / 8));
line-height: 0.98;
letter-spacing: 0.01em;
text-transform: uppercase;
margin: 0 0 clamp(32px, 5vh, 56px);
}
.contact__title .line { display: inline-block; }
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
.contact { align-items: end; }
.contact__art img { object-position: 14% 45%; }
.contact__shade {
background: linear-gradient(180deg, rgba(3, 5, 6, 0.6) 0%, rgba(3, 5, 6, 0) 22%, rgba(3, 5, 6, 0.2) 40%, rgba(3, 5, 6, 0.92) 68%, var(--abyss) 100%);
}
.contact__body { justify-self: center; margin: 0; text-align: center; }
}
.cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 18px;
padding: 24px 48px;
font-family: var(--display);
font-weight: 800;
font-size: clamp(13px, 1vw, 16px);
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
isolation: isolate;
filter: drop-shadow(0 0 14px rgba(255, 59, 47, 0.55)) drop-shadow(0 0 40px rgba(224, 35, 28, 0.3));
transition: filter 0.4s, transform 0.3s var(--ease-out);
--jag: polygon(2% 12%, 9% 0, 30% 7%, 51% 0, 74% 6%, 93% 0, 100% 20%, 97% 52%, 100% 84%, 91% 100%, 70% 93%, 49% 100%, 27% 94%, 7% 100%, 0 78%, 3% 46%);
}
.cta::before,
.cta::after {
content: "";
position: absolute;
inset: 0;
z-index: -2;
clip-path: var(--jag);
}
.cta::before {
background: var(--lava) 0 0 / 400px 200px, #8e0c07;
animation: lavaflow 14s linear infinite;
}
.cta::after {
inset: 3px;
z-index: -1;
background: var(--crack) 0 0 / 180px, linear-gradient(180deg, rgba(24, 6, 5, 0.94), rgba(8, 3, 3, 0.96));
transition: opacity 0.5s var(--ease-out);
}
.cta:hover::after,
.cta:focus-visible::after { opacity: 0; }
.cta:hover { filter: drop-shadow(0 0 22px rgba(255, 90, 50, 0.9)) drop-shadow(0 0 70px rgba(224, 35, 28, 0.55)); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
.cta__label { margin-right: -0.3em; }
.cta__arrow { transition: transform 0.4s var(--ease-out); }
.cta:hover .cta__arrow { transform: translateY(5px); }
@keyframes lavaflow { to { background-position: 400px 200px, 0 0; } }
/* ---------- footer ---------- */
.footer {
position: absolute;
left: var(--gutter);
right: var(--gutter);
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding-block: 28px;
text-align: center;
font-family: var(--display);
text-transform: uppercase;
}
.footer__motto {
display: flex;
align-items: center;
gap: clamp(12px, 2vw, 24px);
font-size: clamp(10px, 1vw, 13px);
font-weight: 600;
letter-spacing: 0.5em;
color: var(--bone);
}
.footer__rule {
width: clamp(28px, 10vw, 180px);
height: 2px;
background: linear-gradient(90deg, transparent, var(--red-hot));
box-shadow: 0 0 8px var(--red);
}
.footer__rule:last-child { transform: scaleX(-1); }
@media (max-width: 600px) { .footer__rule { display: none; } .footer__motto { letter-spacing: 0.35em; } }
.footer__copy { font-size: 11px; letter-spacing: 0.3em; color: var(--fog); }
/* ============================================================
NAV
============================================================ */
html.modal-open,
html.menu-open { overflow: hidden; }
html.modal-open body,
html.menu-open body { overflow: hidden; }
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
transition: transform 0.5s var(--ease-out), background 0.5s, border-color 0.5s, opacity 0.8s;
border-bottom: 1px solid transparent;
}
body.is-loading .nav { opacity: 0; pointer-events: none; }
.nav::before {
content: "";
position: absolute;
inset: 0 0 -60px 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg, rgba(2, 3, 4, 0.92) 0%, rgba(2, 3, 4, 0.7) 45%, rgba(2, 3, 4, 0));
transition: opacity 0.5s;
}
.nav.is-solid::before { opacity: 0; }
.nav.is-solid {
background: rgba(3, 5, 6, 0.9);
border-color: rgba(255, 59, 47, 0.14);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { display: block; line-height: 0; position: relative; z-index: 2; }
.nav__logo img {
height: clamp(46px, 5.5vw, 62px);
width: auto;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
transition: transform 0.4s var(--ease-out), filter 0.4s;
}
.nav__logo:hover img { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(255, 59, 47, 0.45)); }
.nav__logo:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.nav__links a {
position: relative;
font-family: var(--display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3em;
margin-right: -0.3em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
padding: 10px 0;
text-shadow: 0 1px 2px #000, 0 0 14px rgba(0, 0, 0, 0.95);
transition: color 0.3s;
}
.nav__links a::after {
content: "";
position: absolute;
left: 0;
right: 0.34em;
bottom: 2px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--red-hot), transparent);
box-shadow: 0 0 10px var(--red);
transform: scaleX(0);
transition: transform 0.5s var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-active { color: #fff; }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }
.nav__toggle {
display: none;
position: relative;
z-index: 2;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 59, 47, 0.4);
background: rgba(3, 5, 6, 0.5);
cursor: pointer;
}
.nav__toggle span {
position: absolute;
left: 11px;
right: 11px;
height: 2px;
background: var(--bone);
transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out);
}
.nav__toggle span:first-child { top: 16px; }
.nav__toggle span:last-child { top: 25px; }
.nav.is-open .nav__toggle span:first-child { top: 21px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 760px) {
.nav__toggle { display: block; }
.nav__links {
position: fixed;
inset: 0;
flex-direction: column;
justify-content: center;
gap: 36px;
background: radial-gradient(ellipse at 50% 30%, #1c0605, var(--abyss) 70%);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s, visibility 0s 0.4s;
}
.nav.is-open .nav__links { opacity: 1; visibility: visible; transition: opacity 0.4s; }
.nav__links a { font-size: 22px; letter-spacing: 0.3em; }
.nav.is-open { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ---------- nav dive ---------- */
.dive {
position: fixed;
inset: 0;
z-index: 55;
pointer-events: none;
opacity: 0;
background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(3, 12, 16, 0) 30%, rgba(4, 22, 28, 0.55) 70%, rgba(2, 8, 10, 0.9) 100%);
overflow: hidden;
}
.dive__streaks {
/* three screens tall so it never runs out while it rushes up */
position: absolute;
left: 0;
right: 0;
top: -100%;
height: 300%;
background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(160, 225, 235, 0.09) 46px 47px, transparent 47px 83px, rgba(255, 90, 50, 0.08) 83px 84px);
}
.dive.is-diving { animation: diveFade 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.dive.is-diving .dive__streaks { animation: diveRush 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes diveFade {
0% { opacity: 0; }
25%, 60% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes diveRush {
from { transform: translate3d(0, 25%, 0); }
to { transform: translate3d(0, -25%, 0); }
}
/* ============================================================
WHO WE ADVISE
============================================================ */
.advise { max-width: 1400px; margin: 0 auto; }
.advise__marquee {
overflow: hidden;
margin: 0 calc(var(--gutter) * -1) clamp(40px, 6vh, 64px);
padding: 14px 0;
border-block: 1px solid rgba(255, 59, 47, 0.18);
-webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.advise__track {
display: flex;
width: max-content;
animation: marquee 90s linear infinite;
}
.advise__marquee:hover .advise__track { animation-play-state: paused; }
.advise__track span {
display: inline-flex;
align-items: center;
font-family: var(--display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--mist);
white-space: nowrap;
}
.advise__track span::after {
content: "";
width: 6px;
height: 6px;
margin: 0 28px;
rotate: 45deg;
background: var(--red-hot);
box-shadow: 0 0 8px var(--red);
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* Phones & tablets: a giant animated strip under a mask is exactly what mobile
Safari drops mid-scroll, so the marquee swaps for static, tappable tabs. */
.advise__tabs {
display: none;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 0 clamp(36px, 5vh, 56px);
}
.lite .advise__marquee { display: none; }
.lite .advise__tabs { display: flex; }
.advise__tab {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 12px;
border: 1px solid rgba(255, 59, 47, 0.32);
border-top-color: rgba(255, 59, 47, 0.6);
background: linear-gradient(170deg, rgba(40, 12, 10, 0.45), rgba(8, 10, 11, 0.85));
font-family: var(--display);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.12em;
line-height: 1.3;
text-transform: uppercase;
text-decoration: none;
color: var(--bone);
transition: background 0.3s, border-color 0.3s;
}
.advise__tab:hover,
.advise__tab:active { background: rgba(224, 35, 28, 0.25); border-color: rgba(255, 59, 47, 0.6); }
.advise__tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.advise__lede {
max-width: 44ch;
margin: 22px auto 0;
font-style: italic;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.45;
color: var(--mist);
text-wrap: balance;
}
/* seven groups: rows of four and three, an uneven last row stays centred */
.advise__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.advise__grid .aud { flex: 0 0 calc((100% - 60px) / 4); }
@media (max-width: 1200px) { .advise__grid .aud { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 1000px) { .advise__grid .aud { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 620px) { .advise__grid .aud { flex-basis: 100%; } }
.aud {
position: relative;
scroll-margin-top: 90px;
display: flex;
flex-direction: column;
padding: 28px 26px 24px;
background:
var(--crack) 0 0 / 220px,
linear-gradient(170deg, rgba(40, 12, 10, 0.55), rgba(8, 10, 11, 0.9));
border: 1px solid var(--line);
border-top: 2px solid rgba(255, 59, 47, 0.55);
transition: translate 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.aud:hover { translate: 0 -4px; border-color: rgba(255, 59, 47, 0.35); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(224, 35, 28, 0.12); }
.aud h3 {
margin: 0 0 12px;
font-family: var(--display);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.12em;
line-height: 1.35;
text-transform: uppercase;
color: var(--bone);
}
.aud p { margin: 0 0 18px; font-size: 20px; line-height: 1.35; color: #d8d1c6; }
.aud .aud__who {
margin: auto 0 0;
padding-top: 16px;
border-top: 1px solid var(--line);
font-style: italic;
font-size: 16px;
line-height: 1.5;
color: var(--ember);
}
.aud__w { white-space: nowrap; }
.aud__dot { color: var(--fog); }
.advise__closer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 22px;
margin: clamp(40px, 6vh, 60px) 0 0;
text-align: center;
font-style: italic;
font-size: clamp(18px, 1.6vw, 22px);
color: var(--bone);
}
.advise__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid rgba(255, 59, 47, 0.55);
background: rgba(224, 35, 28, 0.12);
font-family: var(--display);
font-style: normal;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
transition: background 0.3s, box-shadow 0.3s;
}
.advise__cta i { font-style: normal; transition: transform 0.4s var(--ease-out); }
.advise__cta:hover { background: rgba(224, 35, 28, 0.3); box-shadow: 0 0 26px rgba(224, 35, 28, 0.35); }
.advise__cta:hover i { transform: translateX(5px); }
.advise__cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
/* ============================================================
TEAM
============================================================ */
.team { max-width: 1400px; margin: 0 auto; }
.carousel { position: relative; }
.carousel__track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
padding: 8px 4px 24px;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* center when everything fits, without clipping when it doesn't */
.carousel__track > :first-child { margin-left: auto; }
.carousel__track > :last-child { margin-right: auto; }
.carousel__controls { display: none; justify-content: center; gap: 12px; margin-top: 8px; }
.carousel.is-overflowing .carousel__controls { display: flex; }
.carousel__btn {
width: 48px;
height: 48px;
border: 1px solid rgba(255, 59, 47, 0.45);
background: rgba(3, 5, 6, 0.6);
color: var(--bone);
font-size: 18px;
cursor: pointer;
transition: background 0.3s, opacity 0.3s;
}
.carousel__btn:hover { background: rgba(224, 35, 28, 0.25); }
.carousel__btn:disabled { opacity: 0.3; cursor: default; }
.carousel__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.member {
position: relative;
flex: 0 0 min(380px, 84vw);
height: min(600px, 76vh, 128vw);
scroll-snap-align: center;
padding: 0;
border: 1px solid rgba(255, 59, 47, 0.22);
background: #080a0b;
color: inherit;
text-align: left;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: translate 0.6s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
}
.member__img { position: absolute; inset: 0; z-index: -2; }
.member__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--ease-out), filter 0.6s;
filter: saturate(0.9) brightness(0.9);
}
.member::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(3, 5, 6, 0) 35%, rgba(3, 5, 6, 0.85) 72%, var(--abyss));
}
.member__text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: clamp(22px, 3vw, 32px);
}
.member__title {
font-family: var(--display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
}
.member__name {
font-family: var(--display);
font-weight: 800;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.05;
text-transform: uppercase;
color: var(--bone);
text-shadow: 0 3px 0 #000, 0 0 20px rgba(0, 0, 0, 0.8);
}
.member__tag { font-style: italic; font-size: 18px; line-height: 1.35; color: #d8d1c6; }
.member__more {
margin-top: 8px;
font-family: var(--display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bone);
}
.member__more i { display: inline-block; font-style: normal; transition: transform 0.4s var(--ease-out); }
.member:hover,
.member:focus-visible {
translate: 0 -6px;
border-color: rgba(255, 59, 47, 0.7);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(224, 35, 28, 0.25);
}
.member:hover .member__img img,
.member:focus-visible .member__img img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.member:hover .member__more i { transform: translateX(6px); }
.member:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.subhead {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: clamp(56px, 8vh, 88px) 0 20px;
font-family: var(--display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--ember);
}
.subhead::before,
.subhead::after {
content: "";
width: 40px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--red-hot));
}
.subhead::after { transform: scaleX(-1); }
.advisor {
flex: 0 0 min(300px, 78vw);
scroll-snap-align: center;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px 14px 14px;
border: 1px solid var(--line);
background: linear-gradient(170deg, rgba(40, 12, 10, 0.45), rgba(8, 10, 11, 0.9));
text-decoration: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.4s, translate 0.5s var(--ease-out);
}
.advisor:hover { border-color: rgba(255, 59, 47, 0.6); translate: 0 -3px; }
.advisor:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.advisor__img {
flex: none;
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(255, 59, 47, 0.5);
box-shadow: 0 0 16px rgba(224, 35, 28, 0.25);
}
.advisor__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.advisor__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.advisor__name {
font-family: var(--display);
font-weight: 800;
font-size: 17px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bone);
}
.advisor__title { font-style: italic; font-size: 16px; color: var(--mist); }
.advisor__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
}
.advisor__link i { font-style: normal; transition: transform 0.4s var(--ease-out); }
.advisor:hover .advisor__link i { transform: translateX(4px); }
/* ============================================================
THE GUILD
============================================================ */
.guild { max-width: 1300px; margin: 0 auto; }
.guild__lede {
max-width: 46ch;
margin: 22px auto 0;
font-style: italic;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.45;
color: var(--mist);
text-wrap: balance;
}
/* a register of names, set like carved plaques; an uneven last row stays centred */
.guild__grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.mark {
position: relative;
flex: 0 0 calc((100% - 40px) / 5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 132px;
padding: 26px 16px;
text-align: center;
border: 1px solid rgba(255, 59, 47, 0.22);
background: linear-gradient(170deg, rgba(30, 10, 8, 0.35), rgba(6, 8, 9, 0.6));
overflow: hidden;
transition: border-color 0.5s;
}
.mark:hover { border-color: rgba(255, 59, 47, 0.55); }
@media (max-width: 1100px) { .mark { flex-basis: calc((100% - 30px) / 4); } }
@media (max-width: 820px) { .mark { flex-basis: calc((100% - 20px) / 3); } }
.mark::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 80% at 50% 110%, rgba(255, 59, 47, 0.28), transparent 70%);
opacity: 0;
transition: opacity 0.5s;
}
.mark:hover::before { opacity: 1; }
.mark__name {
position: relative;
font-family: var(--display);
font-weight: 800;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.15;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bone);
text-shadow: 0 2px 0 #000;
transition: color 0.4s, text-shadow 0.4s;
}
.mark:hover .mark__name { color: #fff; text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 59, 47, 0.6); }
.mark__kind {
position: relative;
font-family: var(--display);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ember);
opacity: 0.85;
}
.guild__also {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: clamp(44px, 6vh, 64px) 0 18px;
font-family: var(--display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--ember);
}
.guild__also::before,
.guild__also::after {
content: "";
width: 40px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--red-hot));
}
.guild__also::after { transform: scaleX(-1); }
.guild__sectors {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 980px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.guild__sectors li {
font-family: var(--display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mist);
padding: 8px 14px;
border: 1px solid var(--line);
background: rgba(6, 8, 9, 0.6);
}
.guild__note {
max-width: 70ch;
margin: clamp(36px, 5vh, 52px) auto 0;
text-align: center;
font-size: 14px;
line-height: 1.5;
color: var(--fog);
}
@media (max-width: 520px) {
.mark { flex-basis: calc((100% - 10px) / 2); min-height: 108px; padding: 20px 10px; }
.mark__kind { letter-spacing: 0.16em; }
}
/* ============================================================
MODAL
============================================================ */
.modal {
/* Lovable's Tailwind reset zeroes margins; native